@gentleduck/docs 0.0.11 → 0.0.12

package/src/components/copy-button/copy-button.tsx

@@ -55,7 +55,7 @@ export function CopyButton({ value, className, variant = 'ghost', event, ...prop
   )
 }
 
-export function CopyWithClassNames({ value, classNames, className, ...props }: CopyWithClassNamesProps) {
+export function CopyWithClassNames({ value, classNames, className }: CopyWithClassNamesProps) {
   const [hasCopied, setHasCopied] = React.useState(false)
 
   React.useEffect(() => {
@@ -77,7 +77,7 @@ export function CopyWithClassNames({ value, classNames, className, ...props }: C
           icon={hasCopied ? <CheckIcon /> : <ClipboardIcon />}
           size="icon"
           variant="outline"
-          {...props}></Button>
+        />
       </DropdownMenuTrigger>
       <DropdownMenuContent>
         <DropdownMenuItem onClick={() => copyToClipboard(value)}>Component</DropdownMenuItem>

package/src/components/docs/docs-pager.tsx

@@ -32,7 +32,8 @@ export function DocsPagerBottom({ doc }: DocsPagerProps) {
               variant: 'outline',
             }),
           )}
-          href={pager.prev.href}>
+          href={pager.prev.href}
+          scroll>
           <ChevronLeft className="mr-2 size-4" />
           <span>{pager.prev.title}</span>
         </Link>
@@ -45,7 +46,8 @@ export function DocsPagerBottom({ doc }: DocsPagerProps) {
               variant: 'outline',
             }),
           )}
-          href={pager.next.href}>
+          href={pager.next.href}
+          scroll>
           <span>{pager.next.title}</span>
           <ChevronRight className="ml-2 size-4" />
         </Link>
@@ -72,7 +74,8 @@ export function DocsPagerTop({ doc }: DocsPagerProps) {
               variant: 'secondary',
             }),
           )}
-          href={pager.prev.href}>
+          href={pager.prev.href}
+          scroll>
           <ArrowLeft />
         </Link>
       )}
@@ -85,7 +88,8 @@ export function DocsPagerTop({ doc }: DocsPagerProps) {
               variant: 'secondary',
             }),
           )}
-          href={pager.next.href}>
+          href={pager.next.href}
+          scroll>
           <ArrowRight />
         </Link>
       )}

package/src/components/docs/docs-sidebar.tsx

@@ -75,6 +75,7 @@ export function DocsSidebarNavItem({ item, pathname }: { item: SidebarNavItem; p
             pathname === item.href ? 'font-medium text-foreground' : 'text-muted-foreground',
           )}
           href={item.href}
+          scroll
           rel={item.external ? 'noreferrer' : ''}
           target={item.external ? '_blank' : ''}>
           {item.title}

package/src/components/layouts/site-header/index.tsx

@@ -104,7 +104,10 @@ export function FontStyleButton() {
       return
     }
 
-    const family = fontType === 'sans' ? 'var(--font-sans-geist)' : 'var(--font-mono-geist)'
+    const family =
+      fontType === 'sans'
+        ? 'var(--font-geist-sans, "Montserrat"), sans-serif'
+        : 'var(--font-geist-mono, "Geist Mono"), monospace'
 
     document.documentElement.style.setProperty('font-family', family, 'important')
   }, [fontType])

package/src/components/mdx/mdx-components/callout.tsx

@@ -1,15 +1,22 @@
+import { cn } from '@gentleduck/libs/cn'
 import { Alert, AlertDescription, AlertTitle } from '@gentleduck/registry-ui-duckui/alert'
 
 interface CalloutProps {
-  icon?: string
+  icon?: React.ReactNode
   title?: string
   children?: React.ReactNode
+  className?: string
+  [key: string]: unknown
 }
 
-export function Callout({ title, children, icon, ...props }: CalloutProps) {
+export function Callout({ title, children, icon, className, ...props }: CalloutProps) {
   return (
-    <Alert {...props}>
-      {icon && <span className="mr-4 text-2xl">{icon}</span>}
+    <Alert className={cn('my-6', icon && 'grid-cols-[calc(var(--spacing)*4)_1fr] gap-x-3', className)}>
+      {icon && (
+        <span className="row-span-2 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:translate-y-0.5 [&_svg]:text-current">
+          {icon}
+        </span>
+      )}
       {title && <AlertTitle>{title}</AlertTitle>}
       <AlertDescription>{children}</AlertDescription>
     </Alert>

package/src/components/mdx/mdx-components/code/component-preview.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import { CopyButton } from '@duck-docs/components/copy-button'
-import { Icons } from '@duck-docs/components/icons'
 import { useRegistryIndex } from '@duck-docs/context'
 import { cn } from '@gentleduck/libs/cn'
 import { Button } from '@gentleduck/registry-ui-duckui/button'
@@ -104,15 +103,7 @@ export function ComponentPreview({
               'items-start': align === 'start',
             })}
             duck-preview="">
-            <React.Suspense
-              fallback={
-                <div className="flex w-full items-center justify-center text-muted-foreground text-sm">
-                  <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
-                  Loading...
-                </div>
-              }>
-              {Preview}
-            </React.Suspense>
+            {Preview}
           </div>
         </TabsContent>
         <TabsContent

package/src/components/mdx/mdx-components/code/index.ts

@@ -4,4 +4,5 @@ export * from './code-preview'
 export * from './component-preview'
 export * from './component-source'
 export * from './figcaption-block'
+export * from './mermaid-block'
 export * from './pre-block'

package/src/components/mdx/mdx-components/code/mermaid-block.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+import { cn } from '@gentleduck/libs/cn'
+import { PreviewPanelDialog } from '@gentleduck/registry-ui-duckui/preview-panel'
+import { Loader } from 'lucide-react'
+import { useTheme } from 'next-themes'
+import { useEffect, useState } from 'react'
+
+export interface MermaidBlockProps {
+  chart?: string
+  lightSvg?: string
+  darkSvg?: string
+  className?: string
+  __mermaidLightSvg__?: string
+  __mermaidDarkSvg__?: string
+  __rawString__?: string
+  [key: string]: unknown
+}
+
+export function MermaidBlock(props: MermaidBlockProps) {
+  const chart = props.chart || props.__rawString__ || ''
+  const preLight = props.lightSvg || props.__mermaidLightSvg__ || ''
+  const preDark = props.darkSvg || props.__mermaidDarkSvg__ || ''
+
+  const { resolvedTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  const currentSvg = resolvedTheme === 'dark' ? preDark || preLight : preLight || preDark
+
+  if (!mounted) {
+    return (
+      <div className={cn('my-6 flex h-[300px] items-center justify-center rounded-lg border bg-card', props.className)}>
+        <div className="flex flex-col items-center gap-3">
+          <Loader className="size-4 animate-spin opacity-50" />
+          <p className="text-muted-foreground text-sm">Loading diagram...</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (!currentSvg) {
+    return (
+      <pre className="my-6 overflow-auto rounded-lg border bg-muted p-4 text-muted-foreground text-sm">
+        {chart || 'Mermaid diagram'}
+      </pre>
+    )
+  }
+
+  return (
+    <PreviewPanelDialog
+      html={currentSvg}
+      maxHeight="500px"
+      className={cn('my-6', props.className)}
+      panelClassName="[&_svg]:block [&_svg]:h-auto [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full"
+      syncPanels
+    />
+  )
+}

package/src/components/mdx/mdx-components/table.tsx

@@ -2,12 +2,9 @@ import { cn } from '@gentleduck/libs/cn'
 import type { FC } from 'react'
 
 export const Table: FC<React.HTMLAttributes<HTMLTableElement>> = ({ className, ...props }) => (
-  <div className="my-6 w-full rounded-lg border">
+  <div className="my-6 w-full overflow-x-auto rounded-lg border">
     <table
-      className={cn(
-        'relative w-full overflow-hidden border-none text-sm [&_tbody_tr:last-child]:border-b-0',
-        className,
-      )}
+      className={cn('relative w-full border-none text-sm [&_tbody_tr:last-child]:border-b-0', className)}
       {...props}
     />
   </div>

package/src/components/mdx/mdx-icons.ts

@@ -0,0 +1,11 @@
+import { Lightbulb, Link as LinkIcon, Map as MapIcon, Search, Target, TriangleAlert, Zap } from 'lucide-react'
+
+export const mdxIcons = {
+  Lightbulb,
+  LinkIcon,
+  MapIcon,
+  Search,
+  Target,
+  TriangleAlert,
+  Zap,
+} as const

package/src/components/mdx/mdx.tsx

@@ -11,12 +11,20 @@ import Image from 'next/image'
 import type * as React from 'react'
 import runtime from 'react/jsx-runtime'
 import { Callout } from './mdx-components/callout'
-import { CodeBlock, CodeBlockWrapper, ComponentPreview, ComponentSource, PreBlock } from './mdx-components/code'
+import {
+  CodeBlock,
+  CodeBlockWrapper,
+  ComponentPreview,
+  ComponentSource,
+  MermaidBlock,
+  PreBlock,
+} from './mdx-components/code'
 import { FigcaptionBlock } from './mdx-components/code/figcaption-block'
 import { ComponentsList } from './mdx-components/components-list'
 import { Table, TableCell, TableHeader, TableRow } from './mdx-components/table'
 import { Tab, TabContent, TabList, TabTrigger } from './mdx-components/tabs'
 import { A, H1, H2, H3, H4, H5, H6, Hr, LinkBlock, LinkedCard, P } from './mdx-components/typepography'
+import { mdxIcons } from './mdx-icons'
 
 const useMDXComponent = (code: string) => {
   const fn = new Function(code)
@@ -24,6 +32,7 @@ const useMDXComponent = (code: string) => {
 }
 
 const components = {
+  ...mdxIcons,
   Accordion,
   AccordionContent,
   AccordionItem,
@@ -67,7 +76,13 @@ const components = {
     <ol className={cn('my-6 ml-6 list-decimal', className)} {...props} />
   ),
   p: P,
-  pre: PreBlock,
+  MermaidDiagram: MermaidBlock,
+  pre: (props: any) => {
+    if (props.__isMermaid__) {
+      return <MermaidBlock {...props} />
+    }
+    return <PreBlock {...props} />
+  },
   Step: ({ className, ...props }: React.ComponentProps<'h3'>) => (
     <h3 className={cn('step scroll-m-20 font-heading font-semibold text-xl tracking-tight', className)} {...props} />
   ),

package/src/components/mobile-nav.tsx

@@ -7,7 +7,6 @@ import { Drawer, DrawerContent, DrawerTrigger } from '@gentleduck/registry-ui-du
 import { ScrollArea } from '@gentleduck/registry-ui-duckui/scroll-area'
 import { PanelsTopLeft } from 'lucide-react'
 import Link, { type LinkProps } from 'next/link'
-import { useRouter } from 'next/navigation'
 import * as React from 'react'
 
 export function MobileNav() {
@@ -75,13 +74,12 @@ interface MobileLinkProps extends LinkProps {
 }
 
 function MobileLink({ href, onOpenChange, className, children, ...props }: MobileLinkProps) {
-  const router = useRouter()
   return (
     <Link
       className={cn(className)}
       href={href}
+      scroll
       onClick={() => {
-        router.push(href.toString())
         onOpenChange?.(false)
       }}
       {...props}>

package/src/styles/base.css

@@ -1,7 +1,4 @@
 :root {
-  --font-sans-geist: "Geist", "Adjusted Arial Fallback";
-  --font-mono-geist: "Geist Mono", monospace, "Adjusted Lucida Sans Typewriter Fallback";
-
   --background: oklch(1 0 0);
   --foreground: oklch(0.141 0.005 285.823);
   --card: oklch(1 0 0);
@@ -100,8 +97,8 @@
 @theme inline {
   --breakpoint-3xl: 1600px;
   --breakpoint-4xl: 2000px;
-  --font-sans: "Geist", "Adjusted Arial Fallback";
-  --font-mono: "Geist Mono", "JetBrains Mono", monospace, "Adjusted Lucida Sans Typewriter Fallback";
+  --font-sans: var(--font-geist-sans, "Montserrat"), sans-serif;
+  --font-mono: var(--font-geist-mono, "Geist Mono"), monospace;
   --radius: 0.5rem;
 
   --color-background: var(--background);

package/src/styles/docs.css

@@ -4,38 +4,6 @@
 
 @custom-variant dark (&:is(.dark *));
 
-@font-face {
-  font-family: "Adjusted Lucida Sans Typewriter Fallback";
-  src: local("Lucida Sans Typewriter");
-  size-adjust: 119%;
-  ascent-override: 86%;
-  descent-override: 16%;
-  line-gap-override: 30%;
-}
-
-@font-face {
-  font-family: "Adjusted Arial Fallback";
-  src: local("Arial");
-  size-adjust: 99%;
-  ascent-override: 101%;
-  descent-override: 26%;
-  line-gap-override: 0%;
-}
-
-@font-face {
-  font-family: "Geist";
-  font-weight: 100 900;
-  font-display: swap;
-  src: url(/fonts/Geist-VF.woff2) format("woff2");
-}
-
-@font-face {
-  font-family: "Geist Mono";
-  font-weight: 100 900;
-  font-display: swap;
-  src: url(/fonts/GeistMono-VF.woff2) format("woff2");
-}
-
 @theme {
   --animate-shine: shine 8s ease-in-out infinite;
 
@@ -63,11 +31,11 @@
   }
 
   .font-sans {
-    font-family: var(--font-sans-geist) !important;
+    font-family: var(--font-geist-sans, "Montserrat"), sans-serif !important;
   }
 
   .font-mono {
-    font-family: var(--font-mono-geist) !important;
+    font-family: var(--font-geist-mono, "Geist Mono"), monospace !important;
   }
 
   ::-webkit-scrollbar {

package/src/styles/mdx.css

@@ -1,10 +1,3 @@
-@font-face {
-  font-family: "JetBrains Mono";
-  font-weight: 100 900;
-  font-display: swap;
-  src: url(/fonts/JetBrainsMono-VF.woff2) format("woff2");
-}
-
 @layer components {
   code,
   code > * > *,
@@ -13,7 +6,6 @@
   pre {
     font-family: var(--font-mono);
     font-style: normal;
-    font-weight: 600;
     font-optical-sizing: auto;
   }
 
@@ -61,7 +53,7 @@
     text-align: right;
     content: counter(line);
     counter-increment: line;
-    @apply text-zinc-50/40 text-xs;
+    @apply text-accent-foreground text-xs;
   }
 
   [data-rehype-pretty-code-fragment] .line--highlighted,

package/src/types/unist.ts

@@ -17,6 +17,10 @@ export interface UnistNode extends Node {
     __title__?: string
     __marks__?: string[]
     __event__?: string
+    __isMermaid__?: boolean
+    __mermaidLightSvg__?: string
+    __mermaidDarkSvg__?: string
+    className?: string[]
     [key: string]: unknown
   } & NpmCommands
   attributes?: {

package/src/velite/config.ts

@@ -8,8 +8,7 @@ import { codeImport } from 'remark-code-import'
 import remarkGfm from 'remark-gfm'
 import type { Pluggable } from 'unified'
 import { defineConfig, s, type ZodMeta } from 'velite'
-import { rehypePreBlockSource, rehypeTitle, rhypeMetadataPlugin } from './plugins'
-import { rehypeNpmCommand } from './rehype-npm-command'
+import { rehypeMermaid, rehypeNpmCommand, rehypePreBlockSource, rehypeTitle, rhypeMetadataPlugin } from './plugins'
 import { cleanTocItems } from './utils'
 
 export type DocsVeliteConfigOptions = {
@@ -105,6 +104,7 @@ export function createDocsVeliteConfig({
         ],
         rehypeTitle,
         rehypePreBlockSource,
+        rehypeMermaid,
         rehypeNpmCommand,
         // @ts-ignore
         [rehypeAutolinkHeadings, { properties: { ariaLabel: 'Link to section', className: ['subheading-anchor'] } }],

package/src/velite/index.ts

@@ -1,5 +1,4 @@
 export type { DocsVeliteConfigOptions } from './config'
 export { createDocsVeliteConfig, docsVeliteConfig } from './config'
 export * from './plugins'
-export { rehypeNpmCommand } from './rehype-npm-command'
 export { cleanTocItems } from './utils'

package/src/velite/plugins/index.ts

@@ -1,3 +1,5 @@
 export * from './metadata-plugin'
+export * from './rehype-mermaid'
+export * from './rehype-npm-command'
 export * from './rehype-pre-block-source'
 export * from './rehype-title'

package/src/velite/plugins/rehype-mermaid.ts

@@ -0,0 +1,227 @@
+import { execSync } from 'node:child_process'
+import { mkdtempSync, rmSync, writeFileSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+import type { UnistNode, UnistTree } from '@duck-docs/types'
+import type { Nodes } from 'hast'
+import { toString } from 'hast-util-to-string'
+import { visit } from 'unist-util-visit'
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function isMermaidCode(node: UnistNode): boolean {
+  const codeChild = node.children?.[0]
+  if (!codeChild || codeChild.type !== 'element' || codeChild.tagName !== 'code') return false
+  const dataLang = codeChild.properties?.['data-language']
+  const classes = codeChild.properties?.className
+  return dataLang === 'mermaid' || (Array.isArray(classes) && classes.includes('language-mermaid'))
+}
+
+/** Safely extract a string value from an mdxJsxAttribute. */
+function extractAttrValue(attr: any): string | null {
+  if (!attr?.value) return null
+  if (typeof attr.value === 'string') return attr.value
+  if (attr.value?.type === 'mdxJsxAttributeValueExpression') {
+    try {
+      // eslint-disable-next-line no-new-func
+      return new Function('return ' + attr.value.value)()
+    } catch {
+      return null
+    }
+  }
+  return null
+}
+
+/** Create an mdxJsxAttribute with an expression value (properly escaped). */
+function makeJsxStringAttr(name: string, value: string) {
+  return {
+    type: 'mdxJsxAttribute',
+    name,
+    value: {
+      type: 'mdxJsxAttributeValueExpression',
+      value: JSON.stringify(value),
+      data: {
+        estree: {
+          type: 'Program',
+          sourceType: 'module',
+          body: [
+            {
+              type: 'ExpressionStatement',
+              expression: { type: 'Literal', value, raw: JSON.stringify(value) },
+            },
+          ],
+          comments: [],
+        },
+      },
+    },
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Headless Chromium renderer - produces pixel-perfect SVGs using a real browser
+// ---------------------------------------------------------------------------
+
+/** Find the system Chromium / Chrome binary. */
+function findChromium(): string {
+  for (const bin of ['chromium', 'google-chrome-stable', 'google-chrome', 'chromium-browser']) {
+    try {
+      const p = execSync(`which ${bin}`, { encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'] }).trim()
+      if (p) return p
+    } catch {
+      /* next */
+    }
+  }
+  throw new Error('[rehype-mermaid] No Chromium/Chrome binary found. Install chromium or google-chrome.')
+}
+
+let chromiumPath: string | null = null
+
+function buildRenderHtml(diagrams: { source: string; id: string; theme: 'default' | 'dark' }[]): string {
+  return `<!DOCTYPE html><html><head>
+<script type="module">
+import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+const diagrams = ${JSON.stringify(diagrams)};
+const results = {};
+for (const d of diagrams) {
+  try {
+    mermaid.initialize({ startOnLoad: false, theme: d.theme, fontFamily: 'sans-serif', securityLevel: 'loose' });
+    const { svg } = await mermaid.render(d.id, d.source);
+    results[d.id] = svg;
+  } catch (e) {
+    results[d.id] = '';
+  }
+}
+document.title = 'DONE:' + btoa(unescape(encodeURIComponent(JSON.stringify(results))));
+</script></head><body></body></html>`
+}
+
+async function renderSvgBatch(
+  diagrams: { source: string; id: string; theme: 'default' | 'dark' }[],
+): Promise<Record<string, string>> {
+  if (!chromiumPath) chromiumPath = findChromium()
+
+  const dir = mkdtempSync(join(tmpdir(), 'mermaid-'))
+  try {
+    const htmlFile = join(dir, 'render.html')
+    writeFileSync(htmlFile, buildRenderHtml(diagrams))
+
+    const output = execSync(
+      `"${chromiumPath}" --headless --disable-gpu --no-sandbox --virtual-time-budget=15000 --dump-dom "file://${htmlFile}"`,
+      { timeout: 60000, encoding: 'utf-8', maxBuffer: 50 * 1024 * 1024, stdio: ['pipe', 'pipe', 'pipe'] },
+    )
+
+    const titleMatch = output.match(/<title>DONE:([\s\S]*?)<\/title>/)
+    if (!titleMatch) throw new Error('Chromium did not produce output')
+
+    const json = decodeURIComponent(escape(Buffer.from(titleMatch[1]!, 'base64').toString('binary')))
+    const results: Record<string, string> = JSON.parse(json)
+
+    // Make SVGs responsive
+    for (const [id, svg] of Object.entries(results)) {
+      if (svg) {
+        results[id] = svg.replace(/\bwidth="[\d.]+"/, 'width="100%"')
+      }
+    }
+
+    return results
+  } finally {
+    rmSync(dir, { recursive: true, force: true })
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Plugin
+// ---------------------------------------------------------------------------
+
+export function rehypeMermaid() {
+  return async (tree: UnistTree) => {
+    // Two kinds of entries: code-fence <pre> blocks and <MermaidDiagram> JSX elements
+    type CodeFenceEntry = { kind: 'fence'; node: UnistNode; pre: UnistNode; source: string }
+    type JsxEntry = { kind: 'jsx'; node: UnistNode; source: string }
+    type Entry = CodeFenceEntry | JsxEntry
+
+    const entries: Entry[] = []
+
+    visit(tree, (node: UnistNode) => {
+      // 1. <MermaidDiagram chart={`...`} /> JSX elements
+      if ((node as any).type === 'mdxJsxFlowElement' && (node as any).name === 'MermaidDiagram') {
+        const attrs = (node as any).attributes || []
+        const chartAttr = attrs.find((a: any) => a.type === 'mdxJsxAttribute' && a.name === 'chart')
+        const chart = extractAttrValue(chartAttr)
+        if (chart) {
+          entries.push({ kind: 'jsx', node, source: chart.trim() })
+        }
+        return
+      }
+
+      // 2. rehypePrettyCode wrapper div (dual themes, two pre elements)
+      if (
+        node.type === 'element' &&
+        node.tagName === 'div' &&
+        node.properties &&
+        'data-rehype-pretty-code-fragment' in node.properties
+      ) {
+        const pres = (node.children || []).filter((c: UnistNode) => c.type === 'element' && c.tagName === 'pre')
+        const mPre = pres.find((c: UnistNode) => isMermaidCode(c))
+        if (!mPre) return
+        const src = (mPre.properties?.__rawString__ as string) || toString(mPre as Nodes)
+        if (src) entries.push({ kind: 'fence', node, pre: mPre, source: src.trim() })
+        return
+      }
+
+      // 3. Standalone <pre>
+      if (node.type === 'element' && node.tagName === 'pre' && isMermaidCode(node)) {
+        const src = (node.properties?.__rawString__ as string) || toString(node as Nodes)
+        if (src) entries.push({ kind: 'fence', node, pre: node, source: src.trim() })
+      }
+    })
+
+    if (entries.length === 0) return
+
+    // Build all diagrams in a single Chromium invocation (both themes)
+    const diagrams: { source: string; id: string; theme: 'default' | 'dark' }[] = []
+    for (let i = 0; i < entries.length; i++) {
+      const src = entries[i]!.source
+      diagrams.push({ source: src, id: `ml${i}`, theme: 'default' })
+      diagrams.push({ source: src, id: `md${i}`, theme: 'dark' })
+    }
+
+    let results: Record<string, string> = {}
+    try {
+      results = await renderSvgBatch(diagrams)
+    } catch (err) {
+      console.warn(`[rehype-mermaid] Build-time render failed:`, (err as Error).message)
+      return
+    }
+
+    for (let i = 0; i < entries.length; i++) {
+      const entry = entries[i]!
+      const lightSvg = results[`ml${i}`] || ''
+      const darkSvg = results[`md${i}`] || ''
+
+      if (!lightSvg && !darkSvg) {
+        console.warn(`[rehype-mermaid] No SVG produced for diagram ${i}`)
+        continue
+      }
+
+      if (entry.kind === 'jsx') {
+        const attrs = (entry.node as any).attributes || []
+        if (lightSvg) attrs.push(makeJsxStringAttr('lightSvg', lightSvg))
+        if (darkSvg) attrs.push(makeJsxStringAttr('darkSvg', darkSvg))
+        ;(entry.node as any).attributes = attrs
+      } else {
+        if (entry.node !== entry.pre) {
+          entry.node.children = [entry.pre]
+        }
+        entry.pre.properties = {
+          ...entry.pre.properties,
+          __isMermaid__: true,
+          __mermaidLightSvg__: lightSvg,
+          __mermaidDarkSvg__: darkSvg,
+        }
+      }
+    }
+  }
+}