prev-cli 0.24.12 → 0.24.13

package/dist/cli.js

@@ -3,11 +3,11 @@
 // src/cli.ts
 import { parseArgs } from "util";
 import path11 from "path";
-import { existsSync as existsSync8, mkdirSync as mkdirSync3, writeFileSync as writeFileSync5, rmSync as rmSync3, readFileSync as readFileSync6 } from "fs";
-import { fileURLToPath as fileURLToPath3 } from "url";
+import { existsSync as existsSync8, mkdirSync as mkdirSync4, writeFileSync as writeFileSync6, rmSync as rmSync4, readFileSync as readFileSync7 } from "fs";
+import { fileURLToPath as fileURLToPath4 } from "url";
 
 // src/vite/start.ts
-import { createServer as createServer2, build as build2, preview } from "vite";
+import { createServer as createServer2, build as build3, preview } from "vite";
 
 // src/vite/config.ts
 import { createLogger } from "vite";
@@ -17,8 +17,8 @@ import remarkGfm from "remark-gfm";
 import rehypeHighlight from "rehype-highlight";
 import path8 from "path";
 import os from "os";
-import { fileURLToPath as fileURLToPath2 } from "url";
-import { existsSync as existsSync6, readFileSync as readFileSync5 } from "fs";
+import { fileURLToPath as fileURLToPath3 } from "url";
+import { existsSync as existsSync6, readFileSync as readFileSync6 } from "fs";
 
 // src/vite/plugins/pages-plugin.ts
 import path2 from "path";
@@ -614,9 +614,95 @@ async function detectUnitFiles(unitDir, type) {
   return result;
 }
 
-// src/preview-runtime/build.ts
+// src/preview-runtime/vendors.ts
 import { build } from "esbuild";
-async function buildPreviewHtml(config) {
+import { dirname } from "path";
+import { fileURLToPath as fileURLToPath2 } from "url";
+var __dirname2 = dirname(fileURLToPath2(import.meta.url));
+async function buildVendorBundle() {
+  try {
+    const entryCode = `
+      import * as React from 'react'
+      import * as ReactDOM from 'react-dom'
+      import { createRoot } from 'react-dom/client'
+      export { jsx, jsxs, Fragment } from 'react/jsx-runtime'
+      export { React, ReactDOM, createRoot }
+      export default React
+    `;
+    const result = await build({
+      stdin: {
+        contents: entryCode,
+        loader: "ts",
+        resolveDir: __dirname2
+      },
+      bundle: true,
+      write: false,
+      format: "esm",
+      target: "es2020",
+      minify: true
+    });
+    const jsFile = result.outputFiles?.find((f) => f.path.endsWith(".js")) || result.outputFiles?.[0];
+    if (!jsFile) {
+      return { success: false, code: "", error: "No output generated" };
+    }
+    return { success: true, code: jsFile.text };
+  } catch (err) {
+    return {
+      success: false,
+      code: "",
+      error: err instanceof Error ? err.message : String(err)
+    };
+  }
+}
+
+// src/preview-runtime/build-optimized.ts
+import { build as build2 } from "esbuild";
+
+// src/preview-runtime/tailwind.ts
+import { $ } from "bun";
+import { mkdtempSync, mkdirSync, writeFileSync as writeFileSync2, readFileSync as readFileSync4, rmSync } from "fs";
+import { join, dirname as dirname2 } from "path";
+import { tmpdir } from "os";
+async function compileTailwind(files) {
+  const tempDir = mkdtempSync(join(tmpdir(), "prev-tailwind-"));
+  try {
+    for (const file of files) {
+      const filePath = join(tempDir, file.path);
+      const parentDir = dirname2(filePath);
+      mkdirSync(parentDir, { recursive: true });
+      writeFileSync2(filePath, file.content);
+    }
+    const configContent = `
+      module.exports = {
+        content: [${JSON.stringify(tempDir + "/**/*.{tsx,jsx,ts,js,html}")}],
+      }
+    `;
+    const configPath = join(tempDir, "tailwind.config.cjs");
+    writeFileSync2(configPath, configContent);
+    const inputCss = `
+      @tailwind base;
+      @tailwind components;
+      @tailwind utilities;
+    `;
+    const inputPath = join(tempDir, "input.css");
+    writeFileSync2(inputPath, inputCss);
+    const outputPath = join(tempDir, "output.css");
+    await $`bunx tailwindcss -c ${configPath} -i ${inputPath} -o ${outputPath} --minify`.quiet();
+    const css = readFileSync4(outputPath, "utf-8");
+    return { success: true, css };
+  } catch (err) {
+    return {
+      success: false,
+      css: "",
+      error: err instanceof Error ? err.message : String(err)
+    };
+  } finally {
+    rmSync(tempDir, { recursive: true, force: true });
+  }
+}
+
+// src/preview-runtime/build-optimized.ts
+async function buildOptimizedPreview(config, options) {
   try {
     const virtualFs = {};
     for (const file of config.files) {
@@ -626,25 +712,18 @@ async function buildPreviewHtml(config) {
     }
     const entryFile = config.files.find((f) => f.path === config.entry);
     if (!entryFile) {
-      return { html: "", error: `Entry file not found: ${config.entry}` };
+      return { success: false, html: "", css: "", error: `Entry file not found: ${config.entry}` };
     }
     const hasDefaultExport = /export\s+default/.test(entryFile.content);
+    const userCssCollected = [];
     const entryCode = hasDefaultExport ? `
-      import React from 'react'
-      import { createRoot } from 'react-dom/client'
+      import React, { createRoot } from '${options.vendorPath}'
       import App from './${config.entry}'
-
       const root = createRoot(document.getElementById('root'))
       root.render(React.createElement(App))
-    ` : `
-      import './${config.entry}'
-    `;
-    const result = await build({
-      stdin: {
-        contents: entryCode,
-        loader: "tsx",
-        resolveDir: "/"
-      },
+    ` : `import './${config.entry}'`;
+    const result = await build2({
+      stdin: { contents: entryCode, loader: "tsx", resolveDir: "/" },
       bundle: true,
       write: false,
       format: "esm",
@@ -652,84 +731,78 @@ async function buildPreviewHtml(config) {
       jsxImportSource: "react",
       target: "es2020",
       minify: true,
-      plugins: [{
-        name: "virtual-fs",
-        setup(build2) {
-          build2.onResolve({ filter: /^react(-dom)?(\/.*)?$/ }, (args) => {
-            const parts = args.path.split("/");
-            const pkg = parts[0];
-            const subpath = parts.slice(1).join("/");
-            const url = subpath ? `https://esm.sh/${pkg}@18/${subpath}` : `https://esm.sh/${pkg}@18`;
-            return { path: url, external: true };
-          });
-          build2.onResolve({ filter: /^[^./]/ }, (args) => {
-            if (args.path.startsWith("https://"))
-              return;
-            return { path: `https://esm.sh/${args.path}`, external: true };
-          });
-          build2.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;
+      plugins: [
+        {
+          name: "optimized-preview",
+          setup(build3) {
+            build3.onResolve({ filter: new RegExp(options.vendorPath.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")) }, (args) => {
+              return { path: args.path, external: true };
+            });
+            build3.onResolve({ filter: /^react(-dom)?(\/.*)?$/ }, () => {
+              return { path: options.vendorPath, external: true };
+            });
+            build3.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;
+                  }
                 }
               }
-            }
-            return { path: resolved, namespace: "virtual" };
-          });
-          build2.onLoad({ filter: /.*/, namespace: "virtual" }, (args) => {
-            const file = virtualFs[args.path];
-            if (file) {
-              if (file.loader === "css") {
-                const css = file.contents.replace(/`/g, "\\`").replace(/\$/g, "\\$");
-                return {
-                  contents: `
-                    const style = document.createElement('style');
-                    style.textContent = \`${css}\`;
-                    document.head.appendChild(style);
-                  `,
-                  loader: "js"
-                };
+              return { path: resolved, namespace: "virtual" };
+            });
+            build3.onLoad({ filter: /.*/, namespace: "virtual" }, (args) => {
+              const file = virtualFs[args.path];
+              if (file) {
+                if (file.loader === "css") {
+                  userCssCollected.push(file.contents);
+                  return { contents: "", loader: "js" };
+                }
+                return { contents: file.contents, loader: file.loader };
               }
-              return { contents: file.contents, loader: file.loader };
-            }
-            return { contents: "", loader: "empty" };
-          });
+              return { contents: "", loader: "empty" };
+            });
+          }
         }
-      }]
+      ]
     });
-    const jsFile = result.outputFiles.find((f) => f.path.endsWith(".js")) || result.outputFiles[0];
+    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;
+    }
+    const userCss = userCssCollected.join(`
+`);
+    const allCss = css + `
+` + userCss;
     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>
-  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
-  <style>
-    body { margin: 0; }
-    #root { min-height: 100vh; }
-  </style>
+  <style>${allCss}</style>
+  <style>body { margin: 0; } #root { min-height: 100vh; }</style>
 </head>
 <body>
   <div id="root"></div>
+  <script type="module" src="${options.vendorPath}"></script>
   <script type="module">${jsCode}</script>
 </body>
 </html>`;
-    return { html };
+    return { success: true, html, css: allCss };
   } catch (err) {
-    return {
-      html: "",
-      error: err instanceof Error ? err.message : String(err)
-    };
+    return { success: false, html: "", css: "", error: err instanceof Error ? err.message : String(err) };
   }
 }
 
 // src/vite/plugins/previews-plugin.ts
-import { existsSync as existsSync4, mkdirSync, rmSync, writeFileSync as writeFileSync2 } from "fs";
+import { existsSync as existsSync4, mkdirSync as mkdirSync2, rmSync as rmSync2, writeFileSync as writeFileSync3 } from "fs";
 import path5 from "path";
 var VIRTUAL_MODULE_ID2 = "virtual:prev-previews";
 var RESOLVED_VIRTUAL_MODULE_ID2 = "\x00" + VIRTUAL_MODULE_ID2;
@@ -792,31 +865,43 @@ export function getByStatus(status) {
         return;
       const distDir = path5.join(rootDir, "dist");
       const targetDir = path5.join(distDir, "_preview");
+      const vendorsDir = path5.join(targetDir, "_vendors");
       const previewsDir = path5.join(rootDir, "previews");
       const oldPreviewsDir = path5.join(distDir, "previews");
       if (existsSync4(oldPreviewsDir)) {
-        rmSync(oldPreviewsDir, { recursive: true });
+        rmSync2(oldPreviewsDir, { recursive: true });
       }
       if (existsSync4(targetDir)) {
-        rmSync(targetDir, { recursive: true });
+        rmSync2(targetDir, { recursive: true });
       }
       const previews = await scanPreviews(rootDir);
       if (previews.length === 0)
         return;
       console.log(`
   Building ${previews.length} preview(s)...`);
+      console.log("    Building shared vendor bundle...");
+      mkdirSync2(vendorsDir, { recursive: true });
+      const vendorResult = await buildVendorBundle();
+      if (!vendorResult.success) {
+        console.error(`    ✗ Vendor bundle: ${vendorResult.error}`);
+        return;
+      }
+      writeFileSync3(path5.join(vendorsDir, "runtime.js"), vendorResult.code);
+      console.log("    ✓ _vendors/runtime.js");
       for (const preview of previews) {
         const previewDir = path5.join(previewsDir, preview.name);
         try {
           const config = await buildPreviewConfig(previewDir);
-          const result = await buildPreviewHtml(config);
-          if (result.error) {
+          const depth = preview.name.split("/").length;
+          const vendorPath = "../".repeat(depth) + "_vendors/runtime.js";
+          const result = await buildOptimizedPreview(config, { vendorPath });
+          if (!result.success) {
             console.error(`    ✗ ${preview.name}: ${result.error}`);
             continue;
           }
           const outputDir = path5.join(targetDir, preview.name);
-          mkdirSync(outputDir, { recursive: true });
-          writeFileSync2(path5.join(outputDir, "index.html"), result.html);
+          mkdirSync2(outputDir, { recursive: true });
+          writeFileSync3(path5.join(outputDir, "index.html"), result.html);
           console.log(`    ✓ ${preview.name}`);
         } catch (err) {
           console.error(`    ✗ ${preview.name}: ${err}`);
@@ -936,7 +1021,7 @@ function validateConfig(raw) {
   return config;
 }
 // src/config/loader.ts
-import { readFileSync as readFileSync4, existsSync as existsSync5, writeFileSync as writeFileSync3 } from "fs";
+import { readFileSync as readFileSync5, existsSync as existsSync5, writeFileSync as writeFileSync4 } from "fs";
 import path6 from "path";
 import yaml2 from "js-yaml";
 function findConfigFile(rootDir) {
@@ -954,7 +1039,7 @@ function loadConfig(rootDir) {
     return defaultConfig;
   }
   try {
-    const content = readFileSync4(configPath, "utf-8");
+    const content = readFileSync5(configPath, "utf-8");
     const raw = yaml2.load(content);
     return validateConfig(raw);
   } catch (error) {
@@ -970,7 +1055,7 @@ function saveConfig(rootDir, config) {
     quotingType: '"',
     forceQuotes: false
   });
-  writeFileSync3(configPath, content, "utf-8");
+  writeFileSync4(configPath, content, "utf-8");
 }
 function updateOrder(rootDir, pathKey, order) {
   const config = loadConfig(rootDir);
@@ -978,7 +1063,7 @@ function updateOrder(rootDir, pathKey, order) {
   saveConfig(rootDir, config);
 }
 // src/utils/debug.ts
-import { mkdirSync as mkdirSync2, writeFileSync as writeFileSync4 } from "fs";
+import { mkdirSync as mkdirSync3, writeFileSync as writeFileSync5 } from "fs";
 import path7 from "path";
 
 class DebugCollector {
@@ -1058,11 +1143,11 @@ class DebugCollector {
       summary: this.generateSummary()
     };
     const debugDir = path7.join(this.rootDir, ".prev-debug");
-    mkdirSync2(debugDir, { recursive: true });
+    mkdirSync3(debugDir, { recursive: true });
     const date = new Date;
     const filename = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}-${String(date.getHours()).padStart(2, "0")}-${String(date.getMinutes()).padStart(2, "0")}-${String(date.getSeconds()).padStart(2, "0")}.json`;
     const filepath = path7.join(debugDir, filename);
-    writeFileSync4(filepath, JSON.stringify(report, null, 2));
+    writeFileSync5(filepath, JSON.stringify(report, null, 2));
     return filepath;
   }
 }
@@ -1136,12 +1221,12 @@ function createFriendlyLogger() {
   };
 }
 function findCliRoot2() {
-  let dir = path8.dirname(fileURLToPath2(import.meta.url));
+  let dir = path8.dirname(fileURLToPath3(import.meta.url));
   for (let i = 0;i < 10; i++) {
     const pkgPath = path8.join(dir, "package.json");
     if (existsSync6(pkgPath)) {
       try {
-        const pkg = JSON.parse(readFileSync5(pkgPath, "utf-8"));
+        const pkg = JSON.parse(readFileSync6(pkgPath, "utf-8"));
         if (pkg.name === "prev-cli") {
           return dir;
         }
@@ -1152,7 +1237,7 @@ function findCliRoot2() {
       break;
     dir = parent;
   }
-  return path8.dirname(path8.dirname(fileURLToPath2(import.meta.url)));
+  return path8.dirname(path8.dirname(fileURLToPath3(import.meta.url)));
 }
 function findNodeModules(cliRoot2) {
   const localNodeModules = path8.join(cliRoot2, "node_modules");
@@ -1249,7 +1334,7 @@ async function createViteConfig(options) {
               }
               const indexPath = path8.join(srcRoot2, "theme/index.html");
               if (existsSync6(indexPath)) {
-                server.transformIndexHtml(req.url, readFileSync5(indexPath, "utf-8")).then((html) => {
+                server.transformIndexHtml(req.url, readFileSync6(indexPath, "utf-8")).then((html) => {
                   res.setHeader("Content-Type", "text/html");
                   res.end(html);
                 }).catch(next);
@@ -1278,7 +1363,7 @@ async function createViteConfig(options) {
             if (urlPath === "/_preview-runtime") {
               const templatePath = path8.join(srcRoot2, "preview-runtime/template.html");
               if (existsSync6(templatePath)) {
-                const html = readFileSync5(templatePath, "utf-8");
+                const html = readFileSync6(templatePath, "utf-8");
                 res.setHeader("Content-Type", "text/html");
                 res.end(html);
                 return;
@@ -1394,7 +1479,7 @@ async function createViteConfig(options) {
                 }
                 if (existsSync6(htmlPath)) {
                   try {
-                    let html = readFileSync5(htmlPath, "utf-8");
+                    let html = readFileSync6(htmlPath, "utf-8");
                     const previewBase = `/_preview/${previewName}/`;
                     html = html.replace(/(src|href)=["']\.\/([^"']+)["']/g, `$1="${previewBase}$2"`);
                     const transformed = await server.transformIndexHtml(req.url, html);
@@ -1521,7 +1606,7 @@ async function findAvailablePort(minPort, maxPort) {
 
 // src/vite/start.ts
 import { exec } from "child_process";
-import { existsSync as existsSync7, rmSync as rmSync2, copyFileSync } from "fs";
+import { existsSync as existsSync7, rmSync as rmSync3, copyFileSync } from "fs";
 import path9 from "path";
 function printWelcome(type) {
   console.log();
@@ -1559,11 +1644,11 @@ function clearCache(rootDir) {
   const nodeModulesVite = path9.join(rootDir, "node_modules", ".vite");
   let cleared = 0;
   if (existsSync7(viteCacheDir)) {
-    rmSync2(viteCacheDir, { recursive: true });
+    rmSync3(viteCacheDir, { recursive: true });
     cleared++;
   }
   if (existsSync7(nodeModulesVite)) {
-    rmSync2(nodeModulesVite, { recursive: true });
+    rmSync3(nodeModulesVite, { recursive: true });
     cleared++;
   }
   if (cleared === 0) {
@@ -1674,7 +1759,7 @@ async function buildSite(rootDir, options = {}) {
     base: options.base,
     debug: options.debug
   });
-  await build2(config);
+  await build3(config);
   const debugCollector = getDebugCollector();
   if (debugCollector) {
     debugCollector.startPhase("buildComplete");
@@ -1766,11 +1851,11 @@ async function cleanCache(options) {
 import yaml3 from "js-yaml";
 function getVersion() {
   try {
-    let dir = path11.dirname(fileURLToPath3(import.meta.url));
+    let dir = path11.dirname(fileURLToPath4(import.meta.url));
     for (let i = 0;i < 5; i++) {
       const pkgPath = path11.join(dir, "package.json");
       if (existsSync8(pkgPath)) {
-        const pkg = JSON.parse(readFileSync6(pkgPath, "utf-8"));
+        const pkg = JSON.parse(readFileSync7(pkgPath, "utf-8"));
         if (pkg.name === "prev-cli")
           return pkg.version;
       }
@@ -1898,7 +1983,7 @@ async function clearViteCache(rootDir2) {
   try {
     const prevCacheDir = await getCacheDir(rootDir2);
     if (existsSync8(prevCacheDir)) {
-      rmSync3(prevCacheDir, { recursive: true });
+      rmSync4(prevCacheDir, { recursive: true });
       cleared++;
       console.log(`  ✓ Removed ${prevCacheDir}`);
     }
@@ -1906,12 +1991,12 @@ async function clearViteCache(rootDir2) {
   const viteCacheDir = path11.join(rootDir2, ".vite");
   const nodeModulesVite = path11.join(rootDir2, "node_modules", ".vite");
   if (existsSync8(viteCacheDir)) {
-    rmSync3(viteCacheDir, { recursive: true });
+    rmSync4(viteCacheDir, { recursive: true });
     cleared++;
     console.log(`  ✓ Removed .vite/`);
   }
   if (existsSync8(nodeModulesVite)) {
-    rmSync3(nodeModulesVite, { recursive: true });
+    rmSync4(nodeModulesVite, { recursive: true });
     cleared++;
     console.log(`  ✓ Removed node_modules/.vite/`);
   }
@@ -1992,7 +2077,7 @@ order: {}
   #   - "getting-started.md"
   #   - "guides/"
 `;
-      writeFileSync5(targetPath, configContent, "utf-8");
+      writeFileSync6(targetPath, configContent, "utf-8");
       console.log(`
   ✨ Created ${targetPath}
 `);
@@ -2020,7 +2105,7 @@ function createPreview(rootDir2, name) {
     console.error(`Preview "${name}" already exists at: ${previewDir}`);
     process.exit(1);
   }
-  mkdirSync3(previewDir, { recursive: true });
+  mkdirSync4(previewDir, { recursive: true });
   const appTsx = `import { useState } from 'react'
 import './styles.css'
 
@@ -2141,8 +2226,8 @@ export default function App() {
   .dark\\:text-white { color: #fff; }
 }
 `;
-  writeFileSync5(path11.join(previewDir, "App.tsx"), appTsx);
-  writeFileSync5(path11.join(previewDir, "styles.css"), stylesCss);
+  writeFileSync6(path11.join(previewDir, "App.tsx"), appTsx);
+  writeFileSync6(path11.join(previewDir, "styles.css"), stylesCss);
   console.log(`
   ✨ Created preview: previews/${name}/
 

package/dist/preview-runtime/build-optimized.d.ts

@@ -0,0 +1,11 @@
+import type { PreviewConfig } from './types';
+export interface OptimizedBuildOptions {
+    vendorPath: string;
+}
+export interface OptimizedBuildResult {
+    success: boolean;
+    html: string;
+    css: string;
+    error?: string;
+}
+export declare function buildOptimizedPreview(config: PreviewConfig, options: OptimizedBuildOptions): Promise<OptimizedBuildResult>;

package/dist/preview-runtime/tailwind.d.ts

@@ -0,0 +1,11 @@
+export interface TailwindResult {
+    success: boolean;
+    css: string;
+    error?: string;
+}
+interface ContentFile {
+    path: string;
+    content: string;
+}
+export declare function compileTailwind(files: ContentFile[]): Promise<TailwindResult>;
+export {};

package/dist/preview-runtime/vendors.d.ts

@@ -0,0 +1,6 @@
+export interface VendorBundleResult {
+    success: boolean;
+    code: string;
+    error?: string;
+}
+export declare function buildVendorBundle(): Promise<VendorBundleResult>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prev-cli",
-  "version": "0.24.12",
+  "version": "0.24.13",
   "description": "Transform MDX directories into beautiful documentation websites",
   "type": "module",
   "license": "MIT",

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

@@ -0,0 +1,47 @@
+import { test, expect } from 'bun:test'
+import { buildOptimizedPreview } from './build-optimized'
+import type { PreviewConfig } from './types'
+
+// Tailwind CLI can be slow on first run
+const TAILWIND_TIMEOUT = 30000
+
+test('buildOptimizedPreview generates HTML with local vendor imports', async () => {
+  const config: PreviewConfig = {
+    files: [
+      {
+        path: 'index.tsx',
+        content: `export default function App() { return <div className="p-4">Hello</div> }`,
+        type: 'tsx',
+      },
+    ],
+    entry: 'index.tsx',
+    tailwind: true,
+  }
+
+  const result = await buildOptimizedPreview(config, { vendorPath: '../_vendors/runtime.js' })
+
+  expect(result.success).toBe(true)
+  expect(result.html).toContain('../_vendors/runtime.js')
+  expect(result.html).not.toContain('esm.sh')
+  expect(result.html).not.toContain('tailwindcss/browser')
+}, TAILWIND_TIMEOUT)
+
+test('buildOptimizedPreview includes compiled CSS', async () => {
+  const config: PreviewConfig = {
+    files: [
+      {
+        path: 'index.tsx',
+        content: `export default function App() { return <div className="flex items-center bg-red-500">Hello</div> }`,
+        type: 'tsx',
+      },
+    ],
+    entry: 'index.tsx',
+    tailwind: true,
+  }
+
+  const result = await buildOptimizedPreview(config, { vendorPath: '../_vendors/runtime.js' })
+
+  expect(result.success).toBe(true)
+  expect(result.css).toContain('flex')
+  expect(result.css).toContain('bg-red-500')
+}, TAILWIND_TIMEOUT)

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

@@ -0,0 +1,136 @@
+import { build } from 'esbuild'
+import type { PreviewConfig } from './types'
+import { compileTailwind } from './tailwind'
+
+export interface OptimizedBuildOptions {
+  vendorPath: string
+}
+
+export interface OptimizedBuildResult {
+  success: boolean
+  html: string
+  css: string
+  error?: string
+}
+
+export async function buildOptimizedPreview(
+  config: PreviewConfig,
+  options: OptimizedBuildOptions
+): Promise<OptimizedBuildResult> {
+  try {
+    const virtualFs: Record<string, { contents: string; loader: string }> = {}
+    for (const file of config.files) {
+      const ext = file.path.split('.').pop()?.toLowerCase()
+      const loader = ext === 'css' ? 'css' : ext === 'json' ? 'json' : ext || 'tsx'
+      virtualFs[file.path] = { contents: file.content, loader }
+    }
+
+    const entryFile = config.files.find(f => f.path === config.entry)
+    if (!entryFile) {
+      return { success: false, html: '', css: '', error: `Entry file not found: ${config.entry}` }
+    }
+
+    const hasDefaultExport = /export\s+default/.test(entryFile.content)
+    const userCssCollected: string[] = []
+
+    const entryCode = hasDefaultExport
+      ? `
+      import React, { createRoot } from '${options.vendorPath}'
+      import App from './${config.entry}'
+      const root = createRoot(document.getElementById('root'))
+      root.render(React.createElement(App))
+    `
+      : `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 => {
+                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
+                  }
+                }
+              }
+              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' }
+                }
+                return { contents: file.contents, loader: file.loader as any }
+              }
+              return { contents: '', loader: 'empty' }
+            })
+          },
+        },
+      ],
+    })
+
+    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
+    }
+
+    const userCss = userCssCollected.join('\n')
+    const allCss = css + '\n' + userCss
+
+    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>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="${options.vendorPath}"></script>
+  <script type="module">${jsCode}</script>
+</body>
+</html>`
+
+    return { success: true, html, css: allCss }
+  } catch (err) {
+    return { success: false, html: '', css: '', error: err instanceof Error ? err.message : String(err) }
+  }
+}

package/src/preview-runtime/tailwind.test.ts

@@ -0,0 +1,30 @@
+import { test, expect } from 'bun:test'
+import { compileTailwind } from './tailwind'
+
+test('compileTailwind extracts used classes from content', async () => {
+  const content = `
+    export default function App() {
+      return <div className="flex items-center p-4 bg-blue-500">Hello</div>
+    }
+  `
+
+  const result = await compileTailwind([{ path: 'App.tsx', content }])
+
+  expect(result.success).toBe(true)
+  expect(result.css).toBeDefined()
+  expect(result.css).toContain('flex')
+  expect(result.css).toContain('items-center')
+  expect(result.css).toContain('bg-blue-500')
+})
+
+test('compileTailwind returns empty CSS for no Tailwind classes', async () => {
+  const content = `
+    export default function App() {
+      return <div style={{ color: 'red' }}>Hello</div>
+    }
+  `
+
+  const result = await compileTailwind([{ path: 'App.tsx', content }])
+
+  expect(result.success).toBe(true)
+})

package/src/preview-runtime/tailwind.ts

@@ -0,0 +1,64 @@
+import { $ } from 'bun'
+import { mkdtempSync, mkdirSync, writeFileSync, readFileSync, rmSync } from 'fs'
+import { join, dirname } from 'path'
+import { tmpdir } from 'os'
+
+export interface TailwindResult {
+  success: boolean
+  css: string
+  error?: string
+}
+
+interface ContentFile {
+  path: string
+  content: string
+}
+
+export async function compileTailwind(files: ContentFile[]): Promise<TailwindResult> {
+  const tempDir = mkdtempSync(join(tmpdir(), 'prev-tailwind-'))
+
+  try {
+    // Write content files (create parent dirs for nested paths)
+    for (const file of files) {
+      const filePath = join(tempDir, file.path)
+      const parentDir = dirname(filePath)
+      mkdirSync(parentDir, { recursive: true })
+      writeFileSync(filePath, file.content)
+    }
+
+    // Create Tailwind config - use .cjs for compatibility
+    const configContent = `
+      module.exports = {
+        content: [${JSON.stringify(tempDir + '/**/*.{tsx,jsx,ts,js,html}')}],
+      }
+    `
+    const configPath = join(tempDir, 'tailwind.config.cjs')
+    writeFileSync(configPath, configContent)
+
+    // Create input CSS
+    const inputCss = `
+      @tailwind base;
+      @tailwind components;
+      @tailwind utilities;
+    `
+    const inputPath = join(tempDir, 'input.css')
+    writeFileSync(inputPath, inputCss)
+
+    const outputPath = join(tempDir, 'output.css')
+
+    // Run Tailwind CLI
+    await $`bunx tailwindcss -c ${configPath} -i ${inputPath} -o ${outputPath} --minify`.quiet()
+
+    const css = readFileSync(outputPath, 'utf-8')
+
+    return { success: true, css }
+  } catch (err) {
+    return {
+      success: false,
+      css: '',
+      error: err instanceof Error ? err.message : String(err),
+    }
+  } finally {
+    rmSync(tempDir, { recursive: true, force: true })
+  }
+}

package/src/preview-runtime/vendors.test.ts

@@ -0,0 +1,15 @@
+import { test, expect } from 'bun:test'
+import { buildVendorBundle } from './vendors'
+
+test('buildVendorBundle creates runtime.js with React', async () => {
+  const result = await buildVendorBundle()
+  expect(result.success).toBe(true)
+  expect(result.code).toBeDefined()
+  expect(result.code).toContain('createElement')
+  expect(result.code).toContain('createRoot')
+})
+
+test('buildVendorBundle output is valid ESM', async () => {
+  const result = await buildVendorBundle()
+  expect(result.code).toContain('export')
+})

package/src/preview-runtime/vendors.ts

@@ -0,0 +1,52 @@
+import { build } from 'esbuild'
+import { dirname } from 'path'
+import { fileURLToPath } from 'url'
+
+// Resolve from CLI's location, not user's project (React is our dependency)
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+export interface VendorBundleResult {
+  success: boolean
+  code: string
+  error?: string
+}
+
+export async function buildVendorBundle(): Promise<VendorBundleResult> {
+  try {
+    const entryCode = `
+      import * as React from 'react'
+      import * as ReactDOM from 'react-dom'
+      import { createRoot } from 'react-dom/client'
+      export { jsx, jsxs, Fragment } from 'react/jsx-runtime'
+      export { React, ReactDOM, createRoot }
+      export default React
+    `
+
+    const result = await build({
+      stdin: {
+        contents: entryCode,
+        loader: 'ts',
+        resolveDir: __dirname, // Resolve React from CLI's node_modules
+      },
+      bundle: true,
+      write: false,
+      format: 'esm',
+      target: 'es2020',
+      minify: true,
+    })
+
+    // Select JS output file explicitly (in case sourcemaps are added later)
+    const jsFile = result.outputFiles?.find(f => f.path.endsWith('.js')) || result.outputFiles?.[0]
+    if (!jsFile) {
+      return { success: false, code: '', error: 'No output generated' }
+    }
+
+    return { success: true, code: jsFile.text }
+  } catch (err) {
+    return {
+      success: false,
+      code: '',
+      error: err instanceof Error ? err.message : String(err),
+    }
+  }
+}