prev-cli 0.2.1 → 0.3.0

package/dist/cli.js

@@ -9,13 +9,12 @@ import { createServer as createServer2, build, preview } from "vite";
 // src/vite/config.ts
 import { createLogger } from "vite";
 import react from "@vitejs/plugin-react-swc";
-import tailwindcss from "@tailwindcss/vite";
 import mdx from "@mdx-js/rollup";
 import remarkGfm from "remark-gfm";
 import rehypeHighlight from "rehype-highlight";
-import path4 from "path";
+import path5 from "path";
 import { fileURLToPath as fileURLToPath2 } from "url";
-import { existsSync as existsSync2, readFileSync as readFileSync2 } from "fs";
+import { existsSync as existsSync3, readFileSync as readFileSync2 } from "fs";
 
 // src/utils/cache.ts
 import { createHash } from "crypto";
@@ -269,6 +268,72 @@ function entryPlugin(rootDir) {
   };
 }
 
+// src/vite/plugins/fumadocs-plugin.ts
+import path4 from "path";
+import { existsSync as existsSync2 } from "fs";
+function fumadocsPlugin(nodeModulesPath) {
+  const fumadocsCorePath = path4.join(nodeModulesPath, "fumadocs-core");
+  const fumadocsUiPath = path4.join(nodeModulesPath, "fumadocs-ui");
+  const fumadocsUiScopedPath = path4.join(nodeModulesPath, "@fumadocs/ui");
+  function resolveSubpath(pkgPath, subpath) {
+    const directPath = path4.join(pkgPath, "dist", `${subpath}.js`);
+    if (existsSync2(directPath)) {
+      return directPath;
+    }
+    const indexPath = path4.join(pkgPath, "dist", subpath, "index.js");
+    if (existsSync2(indexPath)) {
+      return indexPath;
+    }
+    const rawPath = path4.join(pkgPath, "dist", subpath);
+    if (existsSync2(rawPath)) {
+      return rawPath;
+    }
+    return null;
+  }
+  return {
+    name: "fumadocs-resolver",
+    enforce: "pre",
+    resolveId(id, importer) {
+      if (importer && (id.startsWith("./") || id.startsWith("../"))) {
+        if (importer.includes("fumadocs-core") || importer.includes("fumadocs-ui") || importer.includes("@fumadocs")) {
+          const importerDir = path4.dirname(importer);
+          const resolved = path4.resolve(importerDir, id);
+          const withExt = resolved.endsWith(".js") ? resolved : `${resolved}.js`;
+          if (existsSync2(withExt)) {
+            return withExt;
+          }
+          const indexPath = path4.join(resolved, "index.js");
+          if (existsSync2(indexPath)) {
+            return indexPath;
+          }
+        }
+      }
+      if (id.startsWith("fumadocs-core/")) {
+        const subpath = id.slice("fumadocs-core/".length);
+        const resolved = resolveSubpath(fumadocsCorePath, subpath);
+        if (resolved) {
+          return resolved;
+        }
+      }
+      if (id.startsWith("fumadocs-ui/")) {
+        const subpath = id.slice("fumadocs-ui/".length);
+        const resolved = resolveSubpath(fumadocsUiPath, subpath);
+        if (resolved) {
+          return resolved;
+        }
+      }
+      if (id.startsWith("@fumadocs/ui/")) {
+        const subpath = id.slice("@fumadocs/ui/".length);
+        const resolved = resolveSubpath(fumadocsUiScopedPath, subpath);
+        if (resolved) {
+          return resolved;
+        }
+      }
+      return null;
+    }
+  };
+}
+
 // src/vite/config.ts
 function createFriendlyLogger() {
   const logger = createLogger("info", { allowClearScreen: false });
@@ -324,10 +389,10 @@ function createFriendlyLogger() {
   };
 }
 function findCliRoot2() {
-  let dir = path4.dirname(fileURLToPath2(import.meta.url));
+  let dir = path5.dirname(fileURLToPath2(import.meta.url));
   for (let i = 0;i < 10; i++) {
-    const pkgPath = path4.join(dir, "package.json");
-    if (existsSync2(pkgPath)) {
+    const pkgPath = path5.join(dir, "package.json");
+    if (existsSync3(pkgPath)) {
       try {
         const pkg = JSON.parse(readFileSync2(pkgPath, "utf-8"));
         if (pkg.name === "prev-cli") {
@@ -335,24 +400,24 @@ function findCliRoot2() {
         }
       } catch {}
     }
-    const parent = path4.dirname(dir);
+    const parent = path5.dirname(dir);
     if (parent === dir)
       break;
     dir = parent;
   }
-  return path4.dirname(path4.dirname(fileURLToPath2(import.meta.url)));
+  return path5.dirname(path5.dirname(fileURLToPath2(import.meta.url)));
 }
 function findNodeModules(cliRoot2) {
-  const localNodeModules = path4.join(cliRoot2, "node_modules");
-  if (existsSync2(path4.join(localNodeModules, "react"))) {
+  const localNodeModules = path5.join(cliRoot2, "node_modules");
+  if (existsSync3(path5.join(localNodeModules, "react"))) {
     return localNodeModules;
   }
   let dir = cliRoot2;
   for (let i = 0;i < 10; i++) {
-    const parent = path4.dirname(dir);
+    const parent = path5.dirname(dir);
     if (parent === dir)
       break;
-    if (path4.basename(parent) === "node_modules" && existsSync2(path4.join(parent, "react"))) {
+    if (path5.basename(parent) === "node_modules" && existsSync3(path5.join(parent, "react"))) {
       return parent;
     }
     dir = parent;
@@ -361,7 +426,7 @@ function findNodeModules(cliRoot2) {
 }
 var cliRoot2 = findCliRoot2();
 var cliNodeModules = findNodeModules(cliRoot2);
-var srcRoot2 = path4.join(cliRoot2, "src");
+var srcRoot2 = path5.join(cliRoot2, "src");
 async function createViteConfig(options) {
   const { rootDir, mode, port } = options;
   const cacheDir = await ensureCacheDir(rootDir);
@@ -372,26 +437,34 @@ async function createViteConfig(options) {
     customLogger: createFriendlyLogger(),
     logLevel: mode === "production" ? "silent" : "info",
     plugins: [
+      fumadocsPlugin(cliNodeModules),
       mdx({
         remarkPlugins: [remarkGfm],
         rehypePlugins: [rehypeHighlight]
       }),
       react(),
-      tailwindcss(),
       pagesPlugin(rootDir),
       entryPlugin(rootDir)
     ],
     resolve: {
       alias: {
-        "@prev/ui": path4.join(srcRoot2, "ui"),
-        "@prev/theme": path4.join(srcRoot2, "theme"),
-        react: path4.join(cliNodeModules, "react"),
-        "react-dom": path4.join(cliNodeModules, "react-dom"),
-        "react-router-dom": path4.join(cliNodeModules, "react-router-dom"),
-        mermaid: path4.join(cliNodeModules, "mermaid"),
-        dayjs: path4.join(cliNodeModules, "dayjs"),
-        "@terrastruct/d2": path4.join(cliNodeModules, "@terrastruct/d2")
-      }
+        "@prev/ui": path5.join(srcRoot2, "ui"),
+        "@prev/theme": path5.join(srcRoot2, "theme"),
+        react: path5.join(cliNodeModules, "react"),
+        "react-dom": path5.join(cliNodeModules, "react-dom"),
+        "@tanstack/react-router": path5.join(cliNodeModules, "@tanstack/react-router"),
+        mermaid: path5.join(cliNodeModules, "mermaid"),
+        dayjs: path5.join(cliNodeModules, "dayjs"),
+        "@terrastruct/d2": path5.join(cliNodeModules, "@terrastruct/d2")
+      },
+      dedupe: [
+        "react",
+        "react-dom",
+        "@tanstack/react-router",
+        "fumadocs-core",
+        "fumadocs-ui",
+        "@fumadocs/ui"
+      ]
     },
     optimizeDeps: {
       entries: [],
@@ -399,17 +472,18 @@ async function createViteConfig(options) {
         "react",
         "react-dom",
         "react-dom/client",
-        "react-router-dom",
+        "@tanstack/react-router",
         "react/jsx-runtime",
         "react/jsx-dev-runtime",
         "mermaid",
         "dayjs",
-        "@terrastruct/d2"
-      ],
-      exclude: [
-        "clsx",
-        "class-variance-authority",
-        "tailwind-merge"
+        "@terrastruct/d2",
+        "fumadocs-core/framework",
+        "fumadocs-core/framework/tanstack",
+        "fumadocs-core/link",
+        "fumadocs-core/breadcrumb",
+        "fumadocs-ui/provider/tanstack",
+        "fumadocs-ui/layouts/docs"
       ]
     },
     ssr: {
@@ -427,7 +501,7 @@ async function createViteConfig(options) {
       strictPort: false
     },
     build: {
-      outDir: path4.join(rootDir, "dist"),
+      outDir: path5.join(rootDir, "dist"),
       reportCompressedSize: false,
       chunkSizeWarningLimit: 1e4
     }

package/dist/vite/plugins/fumadocs-plugin.d.ts

@@ -0,0 +1,9 @@
+import type { Plugin } from 'vite';
+/**
+ * Vite plugin to resolve fumadocs subpath exports.
+ *
+ * Fumadocs uses Node.js subpath exports which Vite's esbuild pre-bundler
+ * can't resolve when packages are in CLI's node_modules (not user's project).
+ * This plugin uses resolveId hook to dynamically resolve imports to dist files.
+ */
+export declare function fumadocsPlugin(nodeModulesPath: string): Plugin;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prev-cli",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Transform MDX directories into beautiful documentation websites",
   "type": "module",
   "license": "MIT",
@@ -41,12 +41,15 @@
   },
   "dependencies": {
     "@mdx-js/rollup": "^3.0.0",
-    "@terrastruct/d2": "^0.1.33",
     "@tailwindcss/vite": "^4.0.0",
+    "@tanstack/react-router": "^1.145.7",
+    "@terrastruct/d2": "^0.1.33",
     "@vitejs/plugin-react-swc": "^4.2.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "fast-glob": "^3.3.0",
+    "fumadocs-core": "^16.4.3",
+    "fumadocs-ui": "^16.4.3",
     "lucide-react": "^0.460.0",
     "mermaid": "^11.0.0",
     "react": "^19.0.0",

package/src/theme/{Layout.tsx → diagrams.tsx}

@@ -1,7 +1,5 @@
-import React, { useEffect } from 'react'
-import { Outlet, useLocation } from 'react-router-dom'
-import { Sidebar } from './Sidebar'
-import './styles.css'
+import { useEffect } from 'react'
+import { useLocation } from '@tanstack/react-router'
 
 // Simple hash function for cache keys
 function hashCode(str: string): string {
@@ -159,7 +157,8 @@ async function renderDiagrams() {
   ])
 }
 
-export function Layout() {
+// Hook for diagram rendering
+export function useDiagrams() {
   const location = useLocation()
 
   useEffect(() => {
@@ -172,17 +171,4 @@ export function Layout() {
       cleanupDiagrams()
     }
   }, [location.pathname])
-
-  return (
-    <div className="min-h-screen bg-background text-foreground">
-      <div className="flex">
-        <Sidebar />
-        <main className="flex-1 p-8 max-w-4xl animate-fade-in">
-          <article className="prose max-w-none">
-            <Outlet />
-          </article>
-        </main>
-      </div>
-    </div>
-  )
 }

package/src/theme/entry.tsx

@@ -1,10 +1,98 @@
 import React from 'react'
 import { createRoot } from 'react-dom/client'
+import {
+  RouterProvider,
+  createRouter,
+  createRootRoute,
+  createRoute,
+  Outlet,
+  Link,
+} from '@tanstack/react-router'
+import { TanstackProvider } from 'fumadocs-core/framework/tanstack'
+import { DocsLayout } from 'fumadocs-ui/layouts/docs'
+import type { PageTree } from 'fumadocs-core/server'
+import { pages, sidebar } from 'virtual:prev-pages'
+import { useDiagrams } from './diagrams'
+import 'fumadocs-ui/style.css'
 import './styles.css'
-import { App } from './App'
 
+// Convert prev-cli sidebar to Fumadocs PageTree format
+function convertToPageTree(items: any[]): PageTree.Root {
+  function convertItem(item: any): PageTree.Item | PageTree.Folder {
+    if (item.children) {
+      return {
+        type: 'folder',
+        name: item.title,
+        children: item.children.map(convertItem),
+      }
+    }
+    return {
+      type: 'page',
+      name: item.title,
+      url: item.route || '/',
+    }
+  }
+
+  return {
+    name: 'docs',
+    children: items.map(convertItem),
+  }
+}
+
+// Dynamic imports for MDX pages
+const pageModules = import.meta.glob('/**/*.mdx', { eager: true })
+
+function getPageComponent(file: string): React.ComponentType | null {
+  const mod = pageModules[`/${file}`] as { default: React.ComponentType } | undefined
+  return mod?.default || null
+}
+
+// Page wrapper that renders diagrams after content loads
+function PageWrapper({ Component }: { Component: React.ComponentType }) {
+  useDiagrams()
+  return <Component />
+}
+
+// Root layout with Fumadocs DocsLayout - TanstackProvider wraps inside router
+function RootLayout() {
+  const pageTree = convertToPageTree(sidebar)
+
+  return (
+    <TanstackProvider>
+      <DocsLayout
+        tree={pageTree}
+        nav={{ enabled: false }}
+      >
+        <article className="prose max-w-none">
+          <Outlet />
+        </article>
+      </DocsLayout>
+    </TanstackProvider>
+  )
+}
+
+// Create root route
+const rootRoute = createRootRoute({
+  component: RootLayout,
+})
+
+// Create routes from pages
+const pageRoutes = pages.map((page: { route: string; file: string }) => {
+  const Component = getPageComponent(page.file)
+  return createRoute({
+    getParentRoute: () => rootRoute,
+    path: page.route === '/' ? '/' : page.route,
+    component: Component ? () => <PageWrapper Component={Component} /> : () => null,
+  })
+})
+
+// Create router
+const routeTree = rootRoute.addChildren(pageRoutes)
+const router = createRouter({ routeTree })
+
+// Mount app - RouterProvider must be outermost so TanStack Router context is available
 const container = document.getElementById('root')
 if (container) {
   const root = createRoot(container)
-  root.render(<App />)
+  root.render(<RouterProvider router={router} />)
 }

package/src/theme/styles.css

@@ -1,274 +1,99 @@
-/* Fonts loaded via HTML preload for better performance */
-@import "tailwindcss";
-
-@custom-variant dark (&:is(.dark *));
-
-/* Scan CLI source files for Tailwind classes */
-@source "../theme";
-@source "../ui";
-
 /*
-  Design OS - Refined Utility Design System
-  A professional, editorial-inspired aesthetic with warm neutrals
-  Using Tailwind's stone palette for warmth
+  Prev CLI Theme Customization
+  Overrides fumadocs-ui's default theme with warm stone palette
 */
-@theme {
-  /* Font families - DM Sans for clean, geometric type */
-  --font-display: "DM Sans", system-ui, sans-serif;
-  --font-body: "DM Sans", system-ui, sans-serif;
-  --font-sans: "DM Sans", system-ui, sans-serif;
-  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
-}
 
-/* Shadcn theme integration */
-@theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
+/* Custom fonts */
+:root {
+  --fd-font-sans: "DM Sans", system-ui, sans-serif;
+  --fd-font-mono: "IBM Plex Mono", ui-monospace, monospace;
 }
 
-/*
-  Light theme - Warm Stone palette
-  Professional, editorial aesthetic with warmth
-*/
+/* Override fumadocs colors with warm stone palette - Light theme */
 :root {
-  --radius: 0.5rem;
-  /* Backgrounds & Foregrounds - Stone palette for warmth */
-  --background: oklch(0.985 0.001 106.424); /* stone-50 #FAFAF9 */
-  --foreground: oklch(0.216 0.006 56.043); /* stone-900 #1C1917 */
-  --card: oklch(1 0 0); /* white */
-  --card-foreground: oklch(0.216 0.006 56.043); /* stone-900 */
-  --popover: oklch(1 0 0); /* white */
-  --popover-foreground: oklch(0.216 0.006 56.043); /* stone-900 */
-  /* Primary - Stone dark */
-  --primary: oklch(0.216 0.006 56.043); /* stone-900 */
-  --primary-foreground: oklch(0.985 0.001 106.424); /* stone-50 */
-  /* Secondary - Stone light */
-  --secondary: oklch(0.970 0.001 106.424); /* stone-100 */
-  --secondary-foreground: oklch(0.216 0.006 56.043); /* stone-900 */
-  /* Muted - Stone for subdued text */
-  --muted: oklch(0.970 0.001 106.424); /* stone-100 */
-  --muted-foreground: oklch(0.444 0.011 73.639); /* stone-600 #57534E */
-  /* Accent - Lime green for subtle pops */
-  --accent: oklch(0.970 0.001 106.424); /* stone-100 */
-  --accent-foreground: oklch(0.216 0.006 56.043); /* stone-900 */
-  /* Destructive - Rose */
-  --destructive: oklch(0.586 0.253 17.585); /* rose-600 */
-  /* Borders & Inputs - Stone very light */
-  --border: oklch(0.923 0.003 48.717); /* stone-200 #E7E5E4 */
-  --input: oklch(0.923 0.003 48.717); /* stone-200 */
-  --ring: oklch(0.553 0.013 58.071); /* stone-500 */
-  /* Chart colors */
-  --chart-1: oklch(0.532 0.157 131.589); /* lime-600 #65A30D */
-  --chart-2: oklch(0.6 0.118 184.704); /* teal-600 */
-  --chart-3: oklch(0.398 0.07 227.392); /* cyan-800 */
-  --chart-4: oklch(0.828 0.189 84.429); /* yellow-400 */
-  --chart-5: oklch(0.769 0.188 70.08); /* amber-400 */
-  /* Sidebar - Stone */
-  --sidebar: oklch(0.985 0.001 106.424); /* stone-50 */
-  --sidebar-foreground: oklch(0.216 0.006 56.043); /* stone-900 */
-  --sidebar-primary: oklch(0.216 0.006 56.043); /* stone-900 */
-  --sidebar-primary-foreground: oklch(0.985 0.001 106.424); /* stone-50 */
-  --sidebar-accent: oklch(0.970 0.001 106.424); /* stone-100 */
-  --sidebar-accent-foreground: oklch(0.216 0.006 56.043); /* stone-900 */
-  --sidebar-border: oklch(0.923 0.003 48.717); /* stone-200 */
-  --sidebar-ring: oklch(0.553 0.013 58.071); /* stone-500 */
+  --fd-background: oklch(0.985 0.001 106.424); /* stone-50 */
+  --fd-foreground: oklch(0.216 0.006 56.043); /* stone-900 */
+  --fd-muted: oklch(0.970 0.001 106.424); /* stone-100 */
+  --fd-muted-foreground: oklch(0.444 0.011 73.639); /* stone-600 */
+  --fd-card: oklch(0.985 0.001 106.424); /* stone-50 */
+  --fd-card-foreground: oklch(0.216 0.006 56.043); /* stone-900 */
+  --fd-popover: oklch(0.985 0.001 106.424); /* stone-50 */
+  --fd-popover-foreground: oklch(0.216 0.006 56.043); /* stone-900 */
+  --fd-border: oklch(0.869 0.005 106.424); /* stone-300 */
+  --fd-primary: oklch(0.268 0.007 34.298); /* stone-800 */
+  --fd-primary-foreground: oklch(0.985 0.001 106.424); /* stone-50 */
+  --fd-secondary: oklch(0.923 0.003 106.424); /* stone-200 */
+  --fd-secondary-foreground: oklch(0.268 0.007 34.298); /* stone-800 */
+  --fd-accent: oklch(0.923 0.003 106.424); /* stone-200 */
+  --fd-accent-foreground: oklch(0.268 0.007 34.298); /* stone-800 */
+  --fd-ring: oklch(0.553 0.013 73.639); /* stone-500 */
 }
 
-/*
-  Dark theme - Warm Stone dark palette
-*/
-.dark {
-  /* Backgrounds & Foregrounds - Stone dark */
-  --background: oklch(0.216 0.006 56.043); /* stone-900 #1C1917 */
-  --foreground: oklch(0.985 0.001 106.424); /* stone-50 */
-  --card: oklch(0.268 0.007 34.298); /* stone-800 #292524 */
-  --card-foreground: oklch(0.985 0.001 106.424); /* stone-50 */
-  --popover: oklch(0.268 0.007 34.298); /* stone-800 */
-  --popover-foreground: oklch(0.985 0.001 106.424); /* stone-50 */
-  /* Primary - Stone light */
-  --primary: oklch(0.923 0.003 48.717); /* stone-200 */
-  --primary-foreground: oklch(0.216 0.006 56.043); /* stone-900 */
-  /* Secondary - Stone dark */
-  --secondary: oklch(0.318 0.008 43.185); /* stone-700 */
-  --secondary-foreground: oklch(0.985 0.001 106.424); /* stone-50 */
-  /* Muted - Stone dark */
-  --muted: oklch(0.318 0.008 43.185); /* stone-700 */
-  --muted-foreground: oklch(0.709 0.01 56.259); /* stone-400 #A8A29E */
-  /* Accent - Stone dark */
-  --accent: oklch(0.318 0.008 43.185); /* stone-700 */
-  --accent-foreground: oklch(0.985 0.001 106.424); /* stone-50 */
-  /* Destructive - Rose lighter for dark mode */
-  --destructive: oklch(0.712 0.194 13.428); /* rose-400 */
-  /* Borders & Inputs - Stone dark */
-  --border: oklch(0.370 0.010 67.558); /* stone-600 */
-  --input: oklch(0.370 0.010 67.558); /* stone-600 */
-  --ring: oklch(0.553 0.013 58.071); /* stone-500 */
-  /* Chart colors - brighter for dark mode */
-  --chart-1: oklch(0.648 0.2 131.684); /* lime-500 */
-  --chart-2: oklch(0.696 0.17 162.48); /* emerald-400 */
-  --chart-3: oklch(0.769 0.188 70.08); /* amber-400 */
-  --chart-4: oklch(0.627 0.265 303.9); /* purple-500 */
-  --chart-5: oklch(0.645 0.246 16.439); /* rose-500 */
-  /* Sidebar - Stone dark */
-  --sidebar: oklch(0.268 0.007 34.298); /* stone-800 */
-  --sidebar-foreground: oklch(0.985 0.001 106.424); /* stone-50 */
-  --sidebar-primary: oklch(0.648 0.2 131.684); /* lime-500 */
-  --sidebar-primary-foreground: oklch(0.216 0.006 56.043); /* stone-900 */
-  --sidebar-accent: oklch(0.318 0.008 43.185); /* stone-700 */
-  --sidebar-accent-foreground: oklch(0.985 0.001 106.424); /* stone-50 */
-  --sidebar-border: oklch(0.370 0.010 67.558); /* stone-600 */
-  --sidebar-ring: oklch(0.553 0.013 58.071); /* stone-500 */
+/* Dark theme with warm stone palette */
+.dark, [data-theme="dark"] {
+  --fd-background: oklch(0.216 0.006 56.043); /* stone-900 */
+  --fd-foreground: oklch(0.970 0.001 106.424); /* stone-100 */
+  --fd-muted: oklch(0.268 0.007 34.298); /* stone-800 */
+  --fd-muted-foreground: oklch(0.709 0.010 106.424); /* stone-400 */
+  --fd-card: oklch(0.268 0.007 34.298); /* stone-800 */
+  --fd-card-foreground: oklch(0.970 0.001 106.424); /* stone-100 */
+  --fd-popover: oklch(0.268 0.007 34.298); /* stone-800 */
+  --fd-popover-foreground: oklch(0.970 0.001 106.424); /* stone-100 */
+  --fd-border: oklch(0.444 0.011 73.639); /* stone-600 */
+  --fd-primary: oklch(0.970 0.001 106.424); /* stone-100 */
+  --fd-primary-foreground: oklch(0.216 0.006 56.043); /* stone-900 */
+  --fd-secondary: oklch(0.341 0.009 56.043); /* stone-700 */
+  --fd-secondary-foreground: oklch(0.970 0.001 106.424); /* stone-100 */
+  --fd-accent: oklch(0.341 0.009 56.043); /* stone-700 */
+  --fd-accent-foreground: oklch(0.970 0.001 106.424); /* stone-100 */
+  --fd-ring: oklch(0.553 0.013 73.639); /* stone-500 */
 }
 
-/* Base layer styles */
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground font-sans antialiased;
-  }
-  h1, h2, h3, h4, h5, h6 {
-    font-family: var(--font-display);
-    @apply font-semibold tracking-tight;
-  }
-  code, pre, kbd {
-    font-family: var(--font-mono);
-  }
+/* Diagram container styles */
+.mermaid-diagram,
+.d2-diagram {
+  margin: 1rem 0;
+  padding: 1rem;
+  background: var(--fd-muted);
+  border-radius: 0.5rem;
+  display: flex;
+  justify-content: center;
 }
 
-/* Subtle page fade-in animation */
-@layer utilities {
-  .animate-fade-in {
-    animation: fade-in 200ms ease-out;
-  }
-
-  @keyframes fade-in {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-
-  .animate-collapse-down {
-    animation: collapse-down 200ms ease-out;
-  }
-
-  .animate-collapse-up {
-    animation: collapse-up 200ms ease-out;
-  }
-
-  @keyframes collapse-down {
-    from {
-      height: 0;
-    }
-    to {
-      height: var(--radix-collapsible-content-height);
-    }
-  }
-
-  @keyframes collapse-up {
-    from {
-      height: var(--radix-collapsible-content-height);
-    }
-    to {
-      height: 0;
-    }
-  }
+.mermaid-diagram svg,
+.d2-diagram svg {
+  max-width: 100%;
+  height: auto;
 }
 
-/* Prose styling with stone palette */
-@layer base {
-  .prose {
-    --tw-prose-body: var(--foreground);
-    --tw-prose-headings: var(--foreground);
-    --tw-prose-lead: var(--muted-foreground);
-    --tw-prose-links: var(--primary);
-    --tw-prose-bold: var(--foreground);
-    --tw-prose-counters: var(--muted-foreground);
-    --tw-prose-bullets: var(--muted-foreground);
-    --tw-prose-hr: var(--border);
-    --tw-prose-quotes: var(--foreground);
-    --tw-prose-quote-borders: var(--border);
-    --tw-prose-captions: var(--muted-foreground);
-    --tw-prose-kbd: var(--foreground);
-    --tw-prose-kbd-shadows: var(--ring);
-    --tw-prose-code: var(--foreground);
-    --tw-prose-pre-code: var(--foreground);
-    --tw-prose-pre-bg: var(--muted);
-    --tw-prose-th-borders: var(--border);
-    --tw-prose-td-borders: var(--border);
-  }
-
-  .prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-    @apply bg-muted px-1.5 py-0.5 rounded-sm text-sm font-mono;
-  }
-
-  .prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::before,
-  .prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::after {
-    content: none;
-  }
-
-  .prose :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-    @apply bg-muted border border-border rounded-lg;
-  }
-
-  .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-    @apply text-foreground font-medium underline underline-offset-4 decoration-border hover:decoration-foreground transition-colors;
-  }
-
-  .prose :where(h1, h2, h3, h4, h5, h6):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-    @apply font-display;
-  }
+/* Smooth page transitions */
+@keyframes fade-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
 
-  .prose :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-    @apply border-l-4 border-border pl-4 italic text-muted-foreground;
-  }
+.animate-fade-in {
+  animation: fade-in 0.2s ease-out;
+}
 
-  .prose :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-    @apply w-full border-collapse;
-  }
+/* Typography improvements */
+.prose {
+  --tw-prose-body: var(--fd-foreground);
+  --tw-prose-headings: var(--fd-foreground);
+  --tw-prose-links: var(--fd-primary);
+  --tw-prose-code: var(--fd-foreground);
+  --tw-prose-pre-bg: var(--fd-muted);
+}
 
-  .prose :where(th):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-    @apply border-b border-border px-4 py-2 text-left font-semibold;
-  }
+/* Code block styling */
+pre code {
+  font-family: var(--fd-font-mono);
+  font-size: 0.875rem;
+  line-height: 1.7;
+}
 
-  .prose :where(td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-    @apply border-b border-border px-4 py-2;
-  }
+/* Sidebar active item highlight */
+[data-active="true"] {
+  background: var(--fd-accent);
+  color: var(--fd-accent-foreground);
 }

package/dist/theme/App.d.ts

@@ -1 +0,0 @@
-export declare function App(): import("react/jsx-runtime").JSX.Element;

package/dist/theme/Layout.d.ts

@@ -1,2 +0,0 @@
-import './styles.css';
-export declare function Layout(): import("react/jsx-runtime").JSX.Element;

package/dist/theme/Sidebar.d.ts

@@ -1 +0,0 @@
-export declare function Sidebar(): import("react/jsx-runtime").JSX.Element;

package/dist/theme/entry.d.ts

@@ -1 +0,0 @@
-import './styles.css';

package/src/theme/App.tsx

@@ -1,33 +0,0 @@
-import React from 'react'
-import { BrowserRouter, Routes, Route } from 'react-router-dom'
-import { Layout } from './Layout'
-import { pages } from 'virtual:prev-pages'
-
-// Dynamic imports for MDX pages
-const pageModules = import.meta.glob('/**/*.mdx', { eager: true })
-
-function getPageComponent(file: string) {
-  const mod = pageModules[`/${file}`] as { default: React.ComponentType }
-  return mod?.default
-}
-
-export function App() {
-  return (
-    <BrowserRouter>
-      <Routes>
-        <Route element={<Layout />}>
-          {pages.map((page: { route: string; file: string }) => {
-            const Component = getPageComponent(page.file)
-            return Component ? (
-              <Route
-                key={page.route}
-                path={page.route}
-                element={<Component />}
-              />
-            ) : null
-          })}
-        </Route>
-      </Routes>
-    </BrowserRouter>
-  )
-}

package/src/theme/Sidebar.tsx

@@ -1,75 +0,0 @@
-import React from 'react'
-import { Link, useLocation } from 'react-router-dom'
-import { sidebar } from 'virtual:prev-pages'
-import { cn } from '../ui/utils'
-
-interface SidebarItem {
-  title: string
-  route?: string
-  children?: SidebarItem[]
-}
-
-export function Sidebar() {
-  const location = useLocation()
-
-  return (
-    <aside className="w-64 border-r border-sidebar-border bg-sidebar p-4 min-h-screen sticky top-0">
-      <nav>
-        <ul className="space-y-1">
-          {(sidebar as SidebarItem[]).map((item, i) => (
-            <SidebarItemComponent
-              key={i}
-              item={item}
-              currentPath={location.pathname}
-            />
-          ))}
-        </ul>
-      </nav>
-    </aside>
-  )
-}
-
-function SidebarItemComponent({
-  item,
-  currentPath
-}: {
-  item: SidebarItem
-  currentPath: string
-}) {
-  const isActive = item.route === currentPath
-
-  if (item.children) {
-    return (
-      <li className="mt-4 first:mt-0">
-        <span className="font-semibold text-xs text-sidebar-foreground/60 uppercase tracking-wider">
-          {item.title}
-        </span>
-        <ul className="ml-3 mt-2 space-y-1">
-          {item.children.map((child, i) => (
-            <SidebarItemComponent
-              key={i}
-              item={child}
-              currentPath={currentPath}
-            />
-          ))}
-        </ul>
-      </li>
-    )
-  }
-
-  return (
-    <li>
-      <Link
-        to={item.route || '/'}
-        className={cn(
-          'block py-1.5 px-2 rounded-md text-sm transition-colors',
-          isActive
-            ? 'bg-sidebar-accent text-sidebar-accent-foreground font-medium'
-            : 'text-sidebar-foreground/70 hover:text-sidebar-foreground hover:bg-sidebar-accent/50'
-        )}
-      >
-        {item.title}
-      </Link>
-    </li>
-  )
-}