prev-cli 0.24.19 → 0.25.0

package/dist/src/server/routes/tokens.d.ts

@@ -0,0 +1 @@
+export declare function createTokensHandler(rootDir: string): (req: Request) => Promise<Response | null>;

package/dist/{vite → src/server}/start.d.ts

@@ -8,6 +8,9 @@ export interface BuildOptions {
     base?: string;
     debug?: boolean;
 }
-export declare function startDev(rootDir: string, options?: DevOptions): Promise<import("vite").ViteDevServer>;
+export declare function startDev(rootDir: string, options?: DevOptions): Promise<Bun.Server<undefined>>;
 export declare function buildSite(rootDir: string, options?: BuildOptions): Promise<void>;
-export declare function previewSite(rootDir: string, options?: DevOptions): Promise<import("vite").PreviewServer>;
+export declare function previewSite(rootDir: string, options?: DevOptions): Promise<{
+    url: string;
+    stop: () => Promise<void>;
+}>;

package/dist/{ui → src/ui}/button.d.ts

@@ -3,7 +3,7 @@ import { type VariantProps } from 'class-variance-authority';
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+} & import("node_modules/class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/{validators → src/validators}/index.d.ts

@@ -26,11 +26,6 @@ export interface ValidationResult {
             valid: number;
             invalid: number;
         };
-        atlas: {
-            total: number;
-            valid: number;
-            invalid: number;
-        };
     };
     errors: ValidationError[];
     warnings: ValidationWarning[];

package/dist/{validators → src/validators}/semantic-validator.d.ts

@@ -14,7 +14,7 @@ export interface SemanticValidationWarning {
     message: string;
     code: SemanticWarningCode;
 }
-export type SemanticErrorCode = 'DUPLICATE_ID' | 'INVALID_REF' | 'INVALID_STATE_REF' | 'INVALID_STEP_REF' | 'INVALID_NODE_REF' | 'CIRCULAR_DEPENDENCY' | 'UNKNOWN_RENDERER' | 'INVALID_TEMPLATE' | 'INVALID_SLOT' | 'MISSING_SLOT_DEFINITION';
+export type SemanticErrorCode = 'DUPLICATE_ID' | 'INVALID_REF' | 'INVALID_STATE_REF' | 'INVALID_STEP_REF' | 'CIRCULAR_DEPENDENCY' | 'UNKNOWN_RENDERER' | 'INVALID_TEMPLATE' | 'INVALID_SLOT' | 'MISSING_SLOT_DEFINITION';
 export type SemanticWarningCode = 'DEPRECATED_STATUS' | 'MISSING_DESCRIPTION';
 export interface ValidationContext {
     /** Root directory containing previews folder */
@@ -24,7 +24,6 @@ export interface ValidationContext {
         components: Set<string>;
         screens: Set<string>;
         flows: Set<string>;
-        atlas: Set<string>;
     };
     /** Map of screen states by screen ID */
     screenStates: Map<string, Set<string>>;
@@ -40,7 +39,7 @@ export declare function createValidationContext(rootDir: string): ValidationCont
 /**
  * Register a preview unit in the validation context
  */
-export declare function registerPreviewUnit(context: ValidationContext, type: 'component' | 'screen' | 'flow' | 'atlas', id: string, states?: string[]): void;
+export declare function registerPreviewUnit(context: ValidationContext, type: 'component' | 'screen' | 'flow', id: string, states?: string[]): void;
 /**
  * Check for duplicate IDs within a type
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prev-cli",
-  "version": "0.24.19",
+  "version": "0.25.0",
   "description": "Transform MDX directories into beautiful documentation websites",
   "type": "module",
   "license": "MIT",
@@ -22,7 +22,7 @@
     "markdown",
     "cli",
     "static-site",
-    "vite",
+    "bun",
     "react"
   ],
   "repository": {
@@ -46,20 +46,17 @@
     "test:all": "bun run test && bun run test:integration"
   },
   "dependencies": {
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "@typescript/native-preview": "^7.0.0-dev",
+    "@mdx-js/mdx": "^3.1.0",
     "@mdx-js/react": "^3.1.1",
-    "@mdx-js/rollup": "^3.0.0",
-    "@tailwindcss/vite": "^4.0.0",
     "@tanstack/react-router": "^1.145.7",
     "@terrastruct/d2": "^0.1.33",
-    "@vitejs/plugin-react": "^5.1.2",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@typescript/native-preview": "^7.0.0-dev",
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
-    "esbuild": "^0.27.2",
     "fast-glob": "^3.3.0",
     "fumadocs-core": "^16.4.3",
     "fumadocs-ui": "^16.4.3",
@@ -73,8 +70,8 @@
     "remark-gfm": "^4.0.0",
     "tailwind-merge": "^2.5.0",
     "tailwindcss": "3",
-    "vite": "npm:rolldown-vite@^7.3.1",
-    "zod": "^4.3.5"
+    "zod": "^4.3.5",
+    "zustand": "^5.0.11"
   },
   "devDependencies": {
     "@types/js-yaml": "^4.0.9",

package/src/jsx/CLAUDE.md

@@ -0,0 +1,18 @@
+<!-- c3-generated: c3-501, c3-502, c3-503, c3-504 -->
+# JSX Primitives (WIP)
+
+Before modifying this code, read:
+- `.c3/c3-5-jsx/c3-501-vnode.md` - Virtual node structure
+- `.c3/c3-5-jsx/c3-502-jsx-runtime.md` - JSX transformation
+- `.c3/c3-5-jsx/c3-503-define-component.md` - Component definition API
+- `.c3/c3-5-jsx/c3-504-html-adapter.md` - HTML rendering
+
+Primitive types: `col`, `row`, `box`, `spacer`, `slot`, `text`, `icon`, `image`, `fragment`
+
+Key files:
+- `vnode.ts` - VNode creation and normalization
+- `jsx-runtime.ts` - JSX transformation runtime
+- `define-component.ts` - Component definition
+- `adapters/html.ts` - HTML output adapter
+- `adapters/react.tsx` - React output adapter
+<!-- end-c3-generated -->

package/src/jsx/jsx-runtime.ts

@@ -1,5 +1,5 @@
 // src/jsx/jsx-runtime.ts
-// JSX runtime for Vite's automatic JSX transform
+// JSX runtime for automatic JSX transform
 import {
   createVNode,
   normalizeChildren,

package/src/preview-runtime/CLAUDE.md

@@ -0,0 +1,21 @@
+<!-- c3-generated: c3-207 -->
+# c3-207: Preview Runtime
+
+Before modifying this code, read:
+- Component: `.c3/c3-2-build/c3-207-preview-runtime.md`
+- Patterns: `ref-preview-types`
+
+Key responsibilities:
+- Build shared vendor bundle (React, ReactDOM)
+- Compile individual preview bundles with Bun.build()
+- Process Tailwind CSS v4 for production
+- Generate standalone HTML files
+
+Files:
+- `build-optimized.ts` - Main preview building logic
+- `vendors.ts` - Shared vendor bundle
+- `tailwind.ts` - Tailwind CSS compilation
+- `types.ts` - Type definitions
+
+Full refs: `.c3/refs/ref-preview-types.md`
+<!-- end-c3-generated -->

package/src/preview-runtime/build-optimized.ts

@@ -1,9 +1,17 @@
-import { build } from 'esbuild'
 import type { PreviewConfig } from './types'
 import { compileTailwind } from './tailwind'
+import { existsSync, readFileSync, mkdtempSync, writeFileSync, rmSync, mkdirSync, statSync } from 'fs'
+import path from 'path'
+import { tmpdir } from 'os'
+
+function existsAsFile(p: string): boolean {
+  try { return statSync(p).isFile() } catch { return false }
+}
 
 export interface OptimizedBuildOptions {
   vendorPath: string
+  jsxPath?: string
+  resolveDir?: string
 }
 
 export interface OptimizedBuildResult {
@@ -19,6 +27,9 @@ export async function buildOptimizedPreview(
 ): Promise<OptimizedBuildResult> {
   try {
     const virtualFs: Record<string, { contents: string; loader: string }> = {}
+    const resolveDir = options.resolveDir || '/'
+
+    // Index files by their path for quick lookup
     for (const file of config.files) {
       const ext = file.path.split('.').pop()?.toLowerCase()
       const loader = ext === 'css' ? 'css' : ext === 'json' ? 'json' : ext || 'tsx'
@@ -42,99 +53,204 @@ export async function buildOptimizedPreview(
     `
       : `import './${config.entry}'`
 
-    const result = await build({
-      stdin: { contents: entryCode, loader: 'tsx', resolveDir: '/' },
-      bundle: true,
-      write: false,
-      format: 'esm',
-      jsx: 'automatic',
-      jsxImportSource: 'react',
-      target: 'es2020',
-      minify: true,
-      plugins: [
-        {
-          name: 'optimized-preview',
-          setup(build) {
-            // External: vendor runtime
-            build.onResolve(
-              { filter: new RegExp(options.vendorPath.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')) },
-              args => {
+    // Write all virtual files to a temp directory for Bun.build
+    const tempDir = mkdtempSync(path.join(tmpdir(), 'prev-optimized-'))
+    const entryPath = path.join(tempDir, '__entry.tsx')
+
+    try {
+      writeFileSync(entryPath, entryCode)
+
+      // Write virtual files to temp dir
+      for (const [filePath, file] of Object.entries(virtualFs)) {
+        const targetPath = path.join(tempDir, filePath)
+        const dir = path.dirname(targetPath)
+        if (!existsSync(dir)) {
+          mkdirSync(dir, { recursive: true })
+        }
+        writeFileSync(targetPath, file.contents)
+      }
+
+      const result = await Bun.build({
+        entrypoints: [entryPath],
+        format: 'esm',
+        target: 'browser',
+        minify: true,
+        jsx: { runtime: 'automatic', importSource: 'react' },
+        plugins: [
+          {
+            name: 'optimized-preview',
+            setup(build) {
+              // External: vendor runtime
+              build.onResolve(
+                { filter: new RegExp(options.vendorPath.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')) },
+                args => {
+                  return { path: args.path, external: true }
+                }
+              )
+
+              // External: React (map to vendor bundle)
+              build.onResolve({ filter: /^react(-dom)?(\/.*)?$/ }, () => {
+                return { path: options.vendorPath, external: true }
+              })
+
+              // External: @prev/jsx (map to jsx bundle)
+              build.onResolve({ filter: /^@prev\/jsx$/ }, () => {
+                const jsxPath = options.jsxPath || options.vendorPath.replace('runtime.js', 'jsx.js')
+                return { path: jsxPath, external: true }
+              })
+
+              // External: @prev/components/* (not supported in static builds yet)
+              build.onResolve({ filter: /^@prev\/components\// }, args => {
+                console.warn(`    Warning: @prev/components imports not supported in static builds: ${args.path}`)
                 return { path: args.path, external: true }
-              }
-            )
-
-            // External: React (map to vendor bundle)
-            build.onResolve({ filter: /^react(-dom)?(\/.*)?$/ }, () => {
-              return { path: options.vendorPath, external: true }
-            })
-
-            // Resolve relative imports
-            build.onResolve({ filter: /^\./ }, args => {
-              let resolved = args.path.replace(/^\.\//, '')
-              if (!resolved.includes('.')) {
-                for (const ext of ['.tsx', '.ts', '.jsx', '.js', '.css']) {
-                  if (virtualFs[resolved + ext]) {
-                    resolved = resolved + ext
-                    break
+              })
+
+              // Intercept CSS imports to collect them
+              build.onLoad({ filter: /\.css$/ }, args => {
+                // Read from temp dir or resolveDir
+                let content: string
+                const tempPath = args.path
+                if (existsSync(tempPath)) {
+                  content = readFileSync(tempPath, 'utf-8')
+                } else {
+                  const diskPath = path.resolve(resolveDir, path.relative(tempDir, tempPath))
+                  if (existsSync(diskPath)) {
+                    content = readFileSync(diskPath, 'utf-8')
+                  } else {
+                    return { contents: '', loader: 'js' }
                   }
                 }
-              }
-              return { path: resolved, namespace: 'virtual' }
-            })
-
-            // Load from virtual FS
-            build.onLoad({ filter: /.*/, namespace: 'virtual' }, args => {
-              const file = virtualFs[args.path]
-              if (file) {
-                if (file.loader === 'css') {
-                  userCssCollected.push(file.contents)
-                  return { contents: '', loader: 'js' }
+                userCssCollected.push(content)
+                return { contents: '', loader: 'js' }
+              })
+
+              // Resolve relative imports that might need to fall back to resolveDir
+              build.onResolve({ filter: /^\.\.?\// }, args => {
+                const resolved = path.resolve(path.dirname(args.importer), args.path)
+                // If it exists in temp dir as a file, let Bun handle it
+                const tryExts = ['.tsx', '.ts', '.jsx', '.js', '.css']
+                const tryIndex = ['/index.tsx', '/index.ts', '/index.jsx', '/index.js']
+                if (existsAsFile(resolved)) return undefined
+                for (const ext of tryExts) {
+                  if (existsAsFile(resolved + ext)) return undefined
+                }
+                for (const idx of tryIndex) {
+                  if (existsAsFile(resolved + idx)) return undefined
                 }
-                return { contents: file.contents, loader: file.loader as any }
-              }
-              return { contents: '', loader: 'empty' }
-            })
+                // Fall back: resolve using original directory structure
+                const importerRelative = path.relative(tempDir, args.importer)
+                const originalDir = path.resolve(resolveDir, path.dirname(importerRelative))
+                const diskPath = path.resolve(originalDir, args.path)
+                if (existsAsFile(diskPath)) return { path: diskPath }
+                for (const ext of tryExts) {
+                  if (existsAsFile(diskPath + ext)) {
+                    return { path: diskPath + ext }
+                  }
+                }
+                for (const idx of tryIndex) {
+                  if (existsAsFile(diskPath + idx)) {
+                    return { path: diskPath + idx }
+                  }
+                }
+                return undefined
+              })
+            },
           },
-        },
-      ],
-    })
-
-    const jsFile = result.outputFiles?.find(f => f.path.endsWith('.js')) || result.outputFiles?.[0]
-    const jsCode = jsFile?.text || ''
-
-    let css = ''
-    if (config.tailwind) {
-      const tailwindResult = await compileTailwind(
-        config.files.map(f => ({ path: f.path, content: f.content }))
-      )
-      if (tailwindResult.success) css = tailwindResult.css
-    }
+        ],
+      })
 
-    // Strip @import "tailwindcss" from user CSS when Tailwind is compiled
-    // (the import is Tailwind v4 dev syntax, not valid for static HTML)
-    let userCss = userCssCollected.join('\n')
-    if (config.tailwind) {
-      userCss = userCss.replace(/@import\s*["']tailwindcss["']\s*;?/g, '')
-    }
-    const allCss = css + '\n' + userCss
+      if (!result.success) {
+        const errors = result.logs.filter(l => l.level === 'error').map(l => l.message).join('; ')
+        return { success: false, html: '', css: '', error: errors || 'Build failed' }
+      }
 
-    const html = `<!DOCTYPE html>
+      const jsFile = result.outputs.find(f => f.path.endsWith('.js')) || result.outputs[0]
+      let jsCode = jsFile ? await jsFile.text() : ''
+
+      // Fix bare specifiers in output — Bun.build externalizes but keeps original specifiers
+      const jsxPath = options.jsxPath || options.vendorPath.replace('runtime.js', 'jsx.js')
+      jsCode = jsCode.replace(/from\s*["']react\/jsx(-dev)?-runtime["']/g, `from"${options.vendorPath}"`)
+      jsCode = jsCode.replace(/from\s*["']react-dom\/client["']/g, `from"${options.vendorPath}"`)
+      jsCode = jsCode.replace(/from\s*["']react-dom["']/g, `from"${options.vendorPath}"`)
+      jsCode = jsCode.replace(/from\s*["']react["']/g, `from"${options.vendorPath}"`)
+      jsCode = jsCode.replace(/from\s*["']@prev\/jsx["']/g, `from"${jsxPath}"`)
+      jsCode = jsCode.replace(/from\s*["']@prev\/components\/[^"']*["']/g, `from"${jsxPath}"`)
+
+      let css = ''
+      if (config.tailwind) {
+        const tailwindResult = await compileTailwind(
+          config.files.map(f => ({ path: f.path, content: f.content }))
+        )
+        if (tailwindResult.success) css = tailwindResult.css
+      }
+
+      // Strip @import "tailwindcss" from user CSS when Tailwind is compiled
+      let userCss = userCssCollected.join('\n')
+      if (config.tailwind) {
+        userCss = userCss.replace(/@import\s*["']tailwindcss["']\s*;?/g, '')
+      }
+      const allCss = css + '\n' + userCss
+
+      // Canvas styling for showcase presentation
+      const canvasStyles = `
+        html, body {
+          margin: 0;
+          min-height: 100vh;
+        }
+        body {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background-color: #fafafa;
+          background-image:
+            radial-gradient(circle at center, #e5e5e5 1px, transparent 1px);
+          background-size: 16px 16px;
+          padding: 24px;
+          box-sizing: border-box;
+        }
+        @media (prefers-color-scheme: dark) {
+          body {
+            background-color: #171717;
+            background-image:
+              radial-gradient(circle at center, #262626 1px, transparent 1px);
+          }
+        }
+        #root {
+          background: white;
+          border-radius: 12px;
+          padding: 32px;
+          box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
+          max-width: 100%;
+        }
+        @media (prefers-color-scheme: dark) {
+          #root {
+            background: #1c1c1c;
+            box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.06);
+          }
+        }
+      `
+
+      const html = `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Preview</title>
   <style>${allCss}</style>
-  <style>body { margin: 0; } #root { min-height: 100vh; }</style>
+  <style>${canvasStyles}</style>
 </head>
 <body>
   <div id="root"></div>
   <script type="module" src="${options.vendorPath}"></script>
+  <script type="module" src="${jsxPath}"></script>
   <script type="module">${jsCode}</script>
 </body>
 </html>`
 
-    return { success: true, html, css: allCss }
+      return { success: true, html, css: allCss }
+    } finally {
+      rmSync(tempDir, { recursive: true, force: true })
+    }
   } catch (err) {
     return { success: false, html: '', css: '', error: err instanceof Error ? err.message : String(err) }
   }