boltdocs 2.5.6 → 2.6.0

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "boltdocs",
-  "version": "2.5.6",
+  "version": "2.6.0",
   "description": "A lightweight documentation generator for React projects.",
-  "main": "dist/node/index.js",
+  "main": "dist/node/index.mjs",
   "module": "dist/node/index.mjs",
   "types": "dist/node/index.d.ts",
   "bin": {
@@ -11,7 +11,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "type": "commonjs",
+  "type": "module",
   "sideEffects": [
     "**/*.css"
   ],
@@ -19,17 +19,12 @@
     ".": {
       "types": "./dist/node/index.d.ts",
       "import": "./dist/node/index.mjs",
-      "require": "./dist/node/index.js"
+      "require": "./dist/node/index.cjs"
     },
     "./client": {
       "types": "./dist/client/index.d.ts",
-      "import": "./dist/client/index.mjs",
-      "require": "./dist/client/index.js"
-    },
-    "./ssr": {
-      "types": "./dist/client/ssr.d.ts",
-      "import": "./dist/client/ssr.mjs",
-      "require": "./dist/client/ssr.js"
+      "import": "./dist/client/index.js",
+      "require": "./dist/client/index.cjs"
     },
     "./theme/neutral.css": "./dist/client/theme/neutral.css"
   },
@@ -54,7 +49,7 @@
   "dependencies": {
     "@mdx-js/rollup": "3.1.1",
     "@tailwindcss/vite": "4.2.2",
-    "@vitejs/plugin-react": "^5.0.0",
+    "@vitejs/plugin-react": "6.0.1",
     "cac": "7.0.0",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
@@ -65,7 +60,8 @@
     "isomorphic-dompurify": "3.7.1",
     "lucide-react": "0.575.0",
     "react-aria-components": "1.16.0",
-    "react-router-dom": "6.30.3",
+    "react-helmet-async": "^2.0.1",
+    "react-router-dom": "^7.0.0",
     "rehype-slug": "6.0.0",
     "remark-frontmatter": "5.0.0",
     "remark-gfm": "4.0.1",
@@ -75,22 +71,23 @@
     "svgo": "4.0.1",
     "tailwind-merge": "3.5.0",
     "unist-util-visit": "5.1.0",
-    "vite": "7.3.1",
+    "vite": "7.0.0 || 8.0.0",
     "vite-plugin-image-optimizer": "2.0.3",
-    "zod": "4.3.6"
+    "zod": "4.3.6",
+    "@bdocs/ssg": "0.0.1"
   },
   "peerDependencies": {
-    "react": "19.2.5",
-    "react-dom": "19.2.5"
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
   },
   "devDependencies": {
-    "@types/node": "25.3.2",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
+    "@types/node": "22.0.0",
+    "@types/react": "19.0.0",
+    "@types/react-dom": "19.0.0",
     "@types/react-router-dom": "5.3.3",
     "@types/semver": "7.7.1",
-    "tsdown": "^0.21.7",
-    "typescript": "^5.9.3"
+    "tsdown": "0.21.7",
+    "typescript": "5.9.3"
   },
   "scripts": {
     "build": "tsdown --config-loader unrun",

package/src/client/app/config-context.tsx

@@ -1,18 +1,51 @@
 import { createContext, use } from 'react'
-import type { BoltdocsConfig } from '@node/config'
+import type { BoltdocsConfig } from '../../shared/types'
 
 /**
  * Context for the global documentation configuration.
+ * Using a global singleton pattern to survive dual-package or duplicated-code hazards.
  */
-export const ConfigContext = createContext<BoltdocsConfig | null>(null)
+const CONFIG_CONTEXT_SYMBOL = Symbol.for('__BDOCS_CONFIG_CONTEXT__')
+const CONFIG_INSTANCE_SYMBOL = Symbol.for('__BDOCS_CONFIG_INSTANCE__')
+
+export const ConfigContext =
+  (globalThis as any)[CONFIG_CONTEXT_SYMBOL] ||
+  ((globalThis as any)[CONFIG_CONTEXT_SYMBOL] =
+    createContext<BoltdocsConfig | null>(null))
+
+export function ConfigProvider({
+  config,
+  children,
+}: {
+  config: BoltdocsConfig
+  children: React.ReactNode
+}) {
+  // Sync with global registry for dual-package fallback
+  if (typeof globalThis !== 'undefined') {
+    ;(globalThis as any)[CONFIG_INSTANCE_SYMBOL] = config
+  }
+
+  return (
+    <ConfigContext.Provider value={config}>{children}</ConfigContext.Provider>
+  )
+}
 
 /**
  * Hook to access the Boltdocs configuration.
  */
 export function useConfig() {
   const context = use(ConfigContext)
-  if (!context) {
-    throw new Error('useConfig must be used within a ConfigProvider')
+
+  // Fallback to global registry if context is missing (dual-package hazard safety net)
+  if (
+    !context &&
+    typeof globalThis !== 'undefined' &&
+    (globalThis as any)[CONFIG_INSTANCE_SYMBOL]
+  ) {
+    return (globalThis as any)[CONFIG_INSTANCE_SYMBOL] as BoltdocsConfig
   }
-  return context
+
+  if (!context)
+    throw new Error('useConfig must be used within a ConfigProvider')
+  return context as BoltdocsConfig
 }

package/src/client/app/doc-page.tsx

@@ -0,0 +1,34 @@
+import UserLayout from 'virtual:boltdocs-layout'
+import { useMdxComponents } from './mdx-components-context'
+import { useMemo } from 'react'
+
+/**
+ * DocPage is a layout wrapper for documentation content during SSG.
+ * It renders the user-defined layout (or default) around the MDX content.
+ */
+export function DocPage({
+  route,
+  content: Content,
+  mdxComponents: propComponents,
+}: any) {
+  // Access global MDX components (defaults + plugins + virtuals) from context
+  const contextComponents = useMdxComponents()
+
+  // Merge components: Prop components (from loader) take priority,
+  // then context components (globals).
+  const allComponents = useMemo(
+    () => ({
+      ...contextComponents,
+      ...propComponents,
+    }),
+    [contextComponents, propComponents],
+  )
+
+  if (!Content) return null
+
+  return (
+    <UserLayout route={route}>
+      <Content components={allComponents} />
+    </UserLayout>
+  )
+}

package/src/client/app/mdx-component.tsx

@@ -1,6 +1,5 @@
-import type React from 'react'
 import { Link as LucideLink } from 'lucide-react'
-import * as MdxComponents from '@components/mdx'
+import * as MdxComponents from '../components/mdx'
 
 const Heading = ({
   level,
@@ -25,7 +24,7 @@ const Heading = ({
   )
 }
 
-import { Loading } from '@components/ui-base/loading'
+import { Loading } from '../components/ui-base/loading'
 
 export const mdxComponentsDefault = {
   ...MdxComponents,

package/src/client/app/mdx-components-context.tsx

@@ -2,10 +2,30 @@ import { createContext, use } from 'react'
 
 export type MdxComponentsType = Record<string, React.ComponentType<any>>
 
-const MdxComponentsContext = createContext<MdxComponentsType>({})
+const MDX_COMPONENTS_CONTEXT_SYMBOL = Symbol.for(
+  '__BDOCS_MDX_COMPONENTS_CONTEXT__',
+)
+const MDX_COMPONENTS_INSTANCE_SYMBOL = Symbol.for(
+  '__BDOCS_MDX_COMPONENTS_INSTANCE__',
+)
+
+const MdxComponentsContext =
+  (globalThis as any)[MDX_COMPONENTS_CONTEXT_SYMBOL] ||
+  ((globalThis as any)[MDX_COMPONENTS_CONTEXT_SYMBOL] =
+    createContext<MdxComponentsType>({}))
 
 export function useMdxComponents() {
-  return use(MdxComponentsContext)
+  const context = use(MdxComponentsContext)
+
+  // Fallback to global registry for dual-package hazards
+  if (
+    (!context || Object.keys(context).length === 0) &&
+    (globalThis as any)[MDX_COMPONENTS_INSTANCE_SYMBOL]
+  ) {
+    return (globalThis as any)[MDX_COMPONENTS_INSTANCE_SYMBOL]
+  }
+
+  return context
 }
 
 export function MdxComponentsProvider({
@@ -15,6 +35,11 @@ export function MdxComponentsProvider({
   components: MdxComponentsType
   children: React.ReactNode
 }) {
+  // Sync with global registry
+  if (typeof globalThis !== 'undefined') {
+    ;(globalThis as any)[MDX_COMPONENTS_INSTANCE_SYMBOL] = components
+  }
+
   return (
     <MdxComponentsContext.Provider value={components}>
       {children}

package/src/client/app/routes-context.tsx

@@ -0,0 +1,34 @@
+import { createContext, useContext } from 'react'
+import type { ComponentRoute } from '../types'
+
+interface RoutesContextType {
+  routes: ComponentRoute[]
+}
+
+const RoutesContext = createContext<RoutesContextType>({
+  routes: [],
+})
+
+/**
+ * Hook to access the processed routes list from the closest provider.
+ */
+export function useRoutesContext() {
+  return useContext(RoutesContext)
+}
+
+/**
+ * Provider component for the documentation routes.
+ */
+export function RoutesProvider({
+  routes,
+  children,
+}: {
+  routes: ComponentRoute[]
+  children: React.ReactNode
+}) {
+  return (
+    <RoutesContext.Provider value={{ routes }}>
+      {children}
+    </RoutesContext.Provider>
+  )
+}

package/src/client/app/scroll-handler.tsx

@@ -12,19 +12,19 @@ export function ScrollHandler() {
   // biome-ignore lint/correctness/useExhaustiveDependencies: pathname is used as a trigger for scroll-to-top on navigation
   useLayoutEffect(() => {
     const container = document.querySelector('.boltdocs-content') || window
-    
+
     // Helper to get scroll top
     const getScrollTop = () => {
       if (container === window) return window.scrollY
       return (container as HTMLElement).scrollTop
     }
-    
+
     // Helper to scroll
     const scrollTo = (top: number, behavior: ScrollBehavior = 'auto') => {
       if (container === window) {
         window.scrollTo({ top, behavior })
       } else {
-        (container as HTMLElement).scrollTo({ top, behavior })
+        ;(container as HTMLElement).scrollTo({ top, behavior })
       }
     }
 
@@ -33,7 +33,10 @@ export function ScrollHandler() {
       const element = document.getElementById(id)
       if (element) {
         const offset = 80
-        const containerTop = container === window ? 0 : (container as HTMLElement).getBoundingClientRect().top
+        const containerTop =
+          container === window
+            ? 0
+            : (container as HTMLElement).getBoundingClientRect().top
         const elementRect = element.getBoundingClientRect().top
         const elementPosition = elementRect - containerTop
         const offsetPosition = elementPosition - offset + getScrollTop()

package/src/client/app/theme-context.tsx

@@ -1,99 +1,103 @@
-import { createContext, use, useEffect, useState } from 'react'
+import { createContext, use, useState, useEffect } from 'react'
 
-type Theme = 'light' | 'dark' | 'system'
+export type Theme = 'light' | 'dark' | 'system'
+export type ResolvedTheme = 'light' | 'dark'
 
 interface ThemeContextType {
   theme: Theme
-  resolvedTheme: 'light' | 'dark'
+  resolvedTheme: ResolvedTheme
   setTheme: (theme: Theme) => void
 }
 
-const ThemeContext = createContext<ThemeContextType | undefined>(undefined)
+const THEME_CONTEXT_SYMBOL = Symbol.for('__BDOCS_THEME_CONTEXT__')
+const THEME_INSTANCE_SYMBOL = Symbol.for('__BDOCS_THEME_INSTANCE__')
+const THEME_EVENT = 'boltdocs-theme-change'
+
+const ThemeContext =
+  (globalThis as any)[THEME_CONTEXT_SYMBOL] ||
+  ((globalThis as any)[THEME_CONTEXT_SYMBOL] = createContext<
+    ThemeContextType | undefined
+  >(undefined))
 
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
   const [theme, setThemeState] = useState<Theme>('system')
-  const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark'>('dark')
-  const [mounted, setMounted] = useState(false)
-
-  // Initialize theme from localStorage and set internal resolved theme
-  useEffect(() => {
-    setMounted(true)
-    const stored = localStorage.getItem('boltdocs-theme') as Theme | null
-    const initialTheme =
-      stored === 'light' || stored === 'dark' || stored === 'system'
-        ? stored
-        : 'system'
-
-    setThemeState(initialTheme)
+  const [resolvedTheme, setResolvedTheme] = useState<ResolvedTheme>('dark')
 
+  const applyTheme = (targetTheme: Theme) => {
     const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    const isDark =
+      targetTheme === 'dark' ||
+      (targetTheme === 'system' && mediaQuery.matches)
+
+    const root = window.document.documentElement
+    root.classList.toggle('dark', isDark)
+    root.dataset.theme = isDark ? 'dark' : 'light'
+    setResolvedTheme(isDark ? 'dark' : 'light')
+  }
 
-    const updateResolved = (currentTheme: Theme, isDark: boolean) => {
-      if (currentTheme === 'system') {
-        setResolvedTheme(isDark ? 'dark' : 'light')
-      } else {
-        setResolvedTheme(currentTheme as 'light' | 'dark')
-      }
+  useEffect(() => {
+    const savedTheme = localStorage.getItem('boltdocs-theme') as Theme | null
+    if (savedTheme) {
+      setThemeState(savedTheme)
+      applyTheme(savedTheme)
+    } else {
+      applyTheme('system')
     }
 
-    updateResolved(initialTheme, mediaQuery.matches)
-
-    const handleChange = (e: MediaQueryListEvent) => {
-      // Re-read current theme state from some stable ref would be better, but we can capture it
-      // actually, the second useEffect will handle the source of truth,
-      // but this listener ensures 'system' updates instantly.
-      setResolvedTheme((prevResolved) => {
-        const currentTheme =
-          (localStorage.getItem('boltdocs-theme') as Theme) || 'system'
-        if (currentTheme === 'system') {
-          return e.matches ? 'dark' : 'light'
-        }
-        return prevResolved
-      })
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    const listener = () => {
+      const current = (localStorage.getItem('boltdocs-theme') as Theme) || 'system'
+      if (current === 'system') applyTheme('system')
     }
 
-    mediaQuery.addEventListener('change', handleChange)
-    return () => mediaQuery.removeEventListener('change', handleChange)
+    mediaQuery.addEventListener('change', listener)
+    return () => mediaQuery.removeEventListener('change', listener)
   }, [])
 
-  // Sync with DOM and resolved theme when theme preference changes
-  useEffect(() => {
-    if (!mounted) return
-
-    const isSystemDark = window.matchMedia(
-      '(prefers-color-scheme: dark)',
-    ).matches
-    const nextResolved =
-      theme === 'system' ? (isSystemDark ? 'dark' : 'light') : theme
-
-    setResolvedTheme(nextResolved as 'light' | 'dark')
-
-    const root = document.documentElement
-    if (nextResolved === 'light') {
-      root.classList.add('theme-light')
-      root.dataset.theme = 'light'
-    } else {
-      root.classList.remove('theme-light')
-      root.dataset.theme = 'dark'
-    }
-  }, [theme, mounted])
-
   const setTheme = (newTheme: Theme) => {
     setThemeState(newTheme)
     localStorage.setItem('boltdocs-theme', newTheme)
+    applyTheme(newTheme)
+    
+    // Notify external listeners (dual-package hazard)
+    if (typeof window !== 'undefined') {
+      window.dispatchEvent(new CustomEvent(THEME_EVENT, { detail: newTheme }))
+    }
   }
 
-  return (
-    <ThemeContext.Provider value={{ theme, resolvedTheme, setTheme }}>
-      {children}
-    </ThemeContext.Provider>
-  )
+  const value = { theme, resolvedTheme, setTheme }
+
+  // Sync with global registry
+  if (typeof globalThis !== 'undefined') {
+    ;(globalThis as any)[THEME_INSTANCE_SYMBOL] = value
+  }
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
 }
 
 export function useTheme() {
   const context = use(ThemeContext)
+  const [, forceUpdate] = useState({})
+
+  useEffect(() => {
+    if (context) return
+    
+    const handler = () => forceUpdate({})
+    window.addEventListener(THEME_EVENT, handler)
+    return () => window.removeEventListener(THEME_EVENT, handler)
+  }, [context])
+
+  // Fallback to global registry for dual-package hazards
+  if (
+    !context &&
+    typeof globalThis !== 'undefined' &&
+    (globalThis as any)[THEME_INSTANCE_SYMBOL]
+  ) {
+    return (globalThis as any)[THEME_INSTANCE_SYMBOL] as ThemeContextType
+  }
+
   if (context === undefined) {
     throw new Error('useTheme must be used within a ThemeProvider')
   }
-  return context
+  return context as ThemeContextType
 }

package/src/client/components/default-layout.tsx

@@ -1,18 +1,17 @@
-import { DocsLayout } from '@components/docs-layout'
-import { Navbar } from '@components/ui-base/navbar'
-import { Sidebar } from '@components/ui-base/sidebar'
-import { OnThisPage } from '@components/ui-base/on-this-page'
-import { Head } from '@components/ui-base/head'
-import { Breadcrumbs } from '@components/ui-base/breadcrumbs'
-import { PageNav } from '@components/ui-base/page-nav'
-import { ErrorBoundary } from '@components/ui-base/error-boundary'
-import { CopyMarkdown } from '@components/ui-base/copy-markdown'
-import { useRoutes } from '@client/hooks/use-routes'
-import { useConfig } from '@client/app/config-context'
-import { useMdxComponents } from '@client/app/mdx-components-context'
-
+import { DocsLayout } from './docs-layout'
+import { Navbar } from './ui-base/navbar'
+import { Sidebar } from './ui-base/sidebar'
+import { OnThisPage } from './ui-base/on-this-page'
+import { Head } from './ui-base/head'
+import { Breadcrumbs } from './ui-base/breadcrumbs'
+import { PageNav } from './ui-base/page-nav'
+import { ErrorBoundary } from './ui-base/error-boundary'
+import { CopyMarkdown } from './ui-base/copy-markdown'
+import { useRoutes } from '../hooks/use-routes'
+import { useConfig } from '../app/config-context'
+import { useMdxComponents } from '../app/mdx-components-context'
 import { useLocation } from 'react-router-dom'
-import { getTranslated } from '@client/utils/i18n'
+import { getTranslated } from '../utils/i18n'
 
 export interface LayoutProps {
   children: React.ReactNode

package/src/client/components/docs-layout.tsx

@@ -1,5 +1,4 @@
-import type React from 'react'
-import { cn } from '@client/utils/cn'
+import { cn } from '../utils/cn'
 import { useLocation } from '../hooks'
 
 /**

package/src/client/components/icons-dev.tsx

@@ -1,6 +1,4 @@
-import type { SVGProps } from 'react'
-
-type WrapperProps = SVGProps<SVGSVGElement> & {
+type WrapperProps = React.SVGProps<SVGSVGElement> & {
   size?: number
 }
 
@@ -150,7 +148,6 @@ export const BracketsOrange = (props: WrapperProps) => (
   </svg>
 )
 
-export default BracketsOrange
 
 export const React = (props: WrapperProps) => (
   <svg
@@ -219,10 +216,44 @@ export const Yaml = (props: WrapperProps) => (
     viewBox="0 0 24 24"
     {...wrapperProps(props)}
   >
-    <title>{'YAML'}</title>
+    <title>YAML</title>
     <path
       fill="#A78BFA"
       d="M6.533 5.864h2.755l2.654 5.011h.113l2.654-5.011h2.756l-4.245 7.522V17.5h-2.443v-4.114L6.533 5.864z"
     ></path>
   </svg>
 )
+
+export const Rust = (props: WrapperProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 25 24"
+    {...wrapperProps(props)}
+  >
+    <title>Rust</title>
+    <path
+      fill="#EA580C"
+      fillRule="evenodd"
+      d="M12.58 2.136a.287.287 0 00-.488 0l-.526.85a8.974 8.974 0 00-.232.022l-.683-.73a.287.287 0 00-.478.096l-.35.935c-.075.021-.15.044-.224.067l-.812-.583a.287.287 0 00-.45.187l-.162.989a9.088 9.088 0 00-.204.11l-.913-.417a.287.287 0 00-.406.272l.036 1.005a9.099 9.099 0 00-.175.144l-.98-.231a.287.287 0 00-.345.345l.231.98a9.125 9.125 0 00-.144.175L4.27 6.316a.287.287 0 00-.271.406l.416.913a9.036 9.036 0 00-.11.203L3.317 8a.287.287 0 00-.187.45l.584.813a8.953 8.953 0 00-.068.223l-.935.35a.287.287 0 00-.095.479l.73.682a8.966 8.966 0 00-.023.233l-.85.526a.287.287 0 000 .488l.85.526c.007.078.014.156.023.233l-.73.682a.287.287 0 00.095.479l.935.35.068.223-.584.812a.287.287 0 00.187.451l.99.162c.035.068.072.135.109.203l-.416.913a.287.287 0 00.271.406l1.006-.036c.047.059.095.117.143.174l-.23.981a.287.287 0 00.344.345l.981-.23c.057.048.115.095.174.142l-.036 1.006a.287.287 0 00.406.272l.914-.417c.067.038.135.074.203.11l.161.99a.287.287 0 00.451.186l.813-.584c.074.024.148.046.223.068l.35.935a.287.287 0 00.478.095l.683-.73c.077.01.154.017.232.023l.526.85a.287.287 0 00.489 0l.526-.85c.078-.006.155-.014.232-.023l.682.73a.287.287 0 00.479-.095l.35-.935c.075-.022.15-.044.223-.068l.813.584a.287.287 0 00.45-.187l.162-.99a8.77 8.77 0 00.203-.109l.913.417a.287.287 0 00.406-.272l-.035-1.006c.058-.047.116-.094.174-.143l.98.231a.287.287 0 00.346-.345l-.231-.98.143-.175 1.006.036a.287.287 0 00.271-.406l-.416-.913a9.4 9.4 0 00.109-.203l.99-.162a.287.287 0 00.187-.45l-.584-.813a8.43 8.43 0 00.067-.223l.935-.35a.287.287 0 00.096-.479l-.73-.682c.009-.077.016-.155.023-.233l.85-.526a.287.287 0 000-.488l-.85-.526a8.844 8.844 0 00-.023-.233l.73-.682a.287.287 0 00-.096-.479l-.934-.35a9.246 9.246 0 00-.068-.223l.584-.812A.287.287 0 0021.357 8l-.99-.162a8.92 8.92 0 00-.11-.203l.417-.913a.287.287 0 00-.271-.406l-1.006.036a9.178 9.178 0 00-.143-.174l.23-.981a.287.287 0 00-.345-.345l-.98.23a9.43 9.43 0 00-.174-.142l.035-1.006a.287.287 0 00-.405-.272l-.914.417a9.11 9.11 0 00-.203-.11l-.162-.99a.287.287 0 00-.45-.186l-.813.584a9.088 9.088 0 00-.223-.068l-.35-.935a.287.287 0 00-.479-.095l-.682.73a9.062 9.062 0 00-.232-.023l-.526-.85zm-.257 1.62a.592.592 0 01.578.596.595.595 0 11-.578-.595zm1.363.98A7.324 7.324 0 0118.7 8.309l-.702 1.585a.547.547 0 00.275.717l1.352.6c.041.422.047.847.015 1.27h-.752c-.075 0-.106.05-.106.123v.344c0 .812-.457.99-.859 1.034-.383.044-.806-.161-.86-.394-.22-1.24-.583-1.526-1.152-1.975l-.041-.033c.736-.467 1.502-1.158 1.502-2.08 0-.998-.683-1.625-1.148-1.934-.655-.43-1.379-.516-1.574-.516H6.88a7.324 7.324 0 014.098-2.312l.916.96a.54.54 0 00.766.018l1.026-.978zm-8.46 4.407a.595.595 0 11-.034 1.19.595.595 0 01.034-1.19zm14.192.026a.595.595 0 11-.035 1.19.595.595 0 01.035-1.19zm-13.07.096h1.037v4.678H5.291a7.324 7.324 0 01-.237-2.797l1.282-.57a.542.542 0 00.276-.716l-.264-.595zm4.33.05h2.47c.128 0 .901.147.901.727 0 .48-.593.653-1.081.653h-2.293l.002-1.38zm0 3.36h1.892c.172 0 .924.05 1.164 1.011.026.104.064.291.107.503.078.389.174.861.247 1.06.113.345.57 1.034 1.058 1.034h3.089c-.207.277-.433.54-.677.785l-1.258-.27a.544.544 0 00-.645.417l-.298 1.394a7.323 7.323 0 01-6.108-.03l-.298-1.392a.542.542 0 00-.643-.418l-1.23.264a7.32 7.32 0 01-.636-.75h5.984c.067 0 .113-.011.113-.074v-2.117c0-.061-.046-.075-.113-.075h-1.75l.001-1.341zm-2.763 4.848a.595.595 0 11-.034 1.19.595.595 0 01.034-1.19zm8.814.027a.596.596 0 11-.035 1.19.596.596 0 01.035-1.19z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+
+export const BracketsRed = (props: WrapperProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...wrapperProps(props)}
+  >
+    <title>Rust</title>
+    <path
+      fill="#F87171"
+      d="M4.778 6.667A2.667 2.667 0 017.444 4a.889.889 0 010 1.778.889.889 0 00-.888.889v3.5c0 .701-.273 1.35-.73 1.833.457.483.73 1.132.73 1.832v3.501c0 .491.398.89.888.89a.889.889 0 010 1.777 2.667 2.667 0 01-2.666-2.667v-3.5a.889.889 0 00-.674-.863l-.43-.108a.889.889 0 010-1.724l.43-.108a.889.889 0 00.674-.862V6.667zm14.222 0A2.667 2.667 0 0016.333 4a.889.889 0 000 1.778c.491 0 .89.398.89.889v3.5c0 .701.272 1.35.729 1.833a2.664 2.664 0 00-.73 1.832v3.501a.889.889 0 01-.889.89.889.889 0 000 1.777A2.667 2.667 0 0019 17.333v-3.5c0-.408.278-.764.673-.863l.431-.108a.889.889 0 000-1.724l-.43-.108a.889.889 0 01-.674-.862V6.667z"
+    ></path>
+  </svg>
+);
+

package/src/client/components/mdx/admonition.tsx

@@ -7,7 +7,7 @@ import {
   Zap,
   Flame,
 } from 'lucide-react'
-import { cn } from '@client/utils/cn'
+import { cn } from '../../utils/cn'
 import { cva } from 'class-variance-authority'
 import type { VariantProps } from 'class-variance-authority'
 
@@ -21,26 +21,17 @@ const ICON_MAP: Record<string, React.ReactNode> = {
   caution: <Zap size={18} />,
 }
 
-const LABEL_MAP: Record<string, string> = {
-  note: 'Note',
-  tip: 'Tip',
-  info: 'Info',
-  warning: 'Warning',
-  danger: 'Danger',
-  important: 'Important',
-  caution: 'Caution',
-}
 
-const admonitionVariants = cva('py-4 px-4 rounded-lg', {
+const admonitionVariants = cva('py-4 px-4 rounded-lg flex items-center gap-3 border-[1px] flex-row', {
   variants: {
     type: {
-      note: 'border-primary-400 bg-primary-500/5 text-primary-400',
-      tip: 'border-emerald-500 bg-emerald-500/5 text-emerald-500',
-      info: 'border-sky-500 bg-sky-500/5 text-sky-500',
-      warning: 'border-amber-500 bg-amber-500/5 text-amber-500',
-      danger: 'border-red-500 bg-red-500/5 text-red-500',
-      important: 'border-orange-500 bg-orange-500/5 text-orange-500',
-      caution: 'border-yellow-500 bg-yellow-500/5 text-yellow-500',
+      note: 'border-primary-200 dark:border-primary-800 bg-primary-500/5 text-primary-400',
+      tip: 'border-emerald-200 dark:border-emerald-800 bg-emerald-500/5 text-emerald-500',
+      info: 'border-sky-200 dark:border-sky-800 bg-sky-500/5 text-sky-500',
+      warning: 'border-amber-200 dark:border-amber-800 bg-amber-500/5 text-amber-500',
+      danger: 'border-red-200 dark:border-red-800/70 bg-red-500/5 text-red-500',
+      important: 'border-orange-200 dark:border-orange-800/70 bg-orange-500/5 text-orange-500',
+      caution: 'border-yellow-200 dark:border-yellow-800/70 bg-yellow-500/5 text-yellow-500',
     },
   },
   defaultVariants: {
@@ -51,7 +42,7 @@ type AdmonitionVariants = VariantProps<typeof admonitionVariants>
 
 export interface AdmonitionProps
   extends React.HTMLAttributes<HTMLDivElement>,
-    AdmonitionVariants {
+  AdmonitionVariants {
   title?: string
   children: React.ReactNode
 }
@@ -69,14 +60,7 @@ export function Admonition({
       role={type === 'warning' || type === 'danger' ? 'alert' : 'note'}
       {...rest}
     >
-      <div className="flex items-center flex-row gap-2 mb-2">
-        <span className={cn('shrink-0', admonitionVariants({ type }))}>
-          {ICON_MAP[type as keyof typeof ICON_MAP]}
-        </span>
-        <span className="text-sm font-bold tracking-tight text-text-main">
-          {title || LABEL_MAP[type as keyof typeof LABEL_MAP]}
-        </span>
-      </div>
+      {ICON_MAP[type as keyof typeof ICON_MAP]}
       <div className="text-sm text-text-muted leading-relaxed [&>p]:m-0 [&>p]:mb-2 [&>p:last-child]:mb-0">
         {children}
       </div>