prev-cli 0.24.20 → 0.25.0

package/dist/cli.js

@@ -2,18 +2,125 @@
 // @bun
 if(typeof globalThis.Bun==="undefined"){console.error("\n\x1b[31mError: prev-cli requires Bun runtime\x1b[0m\n\nYou are running with Node.js, but prev-cli uses Bun-specific APIs.\n\n\x1b[33mTo install and run with Bun:\x1b[0m\n\n  # Global install (recommended)\n  bun i -g prev-cli\n  prev-cli dev\n\n  # Or local install\n  bun add -d prev-cli\n  bunx --bun prev-cli dev\n\n\x1b[90mLearn more: https://bun.sh/docs/installation\x1b[0m\n");process.exit(1)}
 var __defProp = Object.defineProperty;
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, {
       get: all[name],
       enumerable: true,
       configurable: true,
-      set: (newValue) => all[name] = () => newValue
+      set: __exportSetter.bind(all, name)
     });
 };
 var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
 var __require = import.meta.require;
 
+// src/preview-runtime/region-bridge.ts
+var exports_region_bridge = {};
+__export(exports_region_bridge, {
+  REGION_BRIDGE_SCRIPT: () => REGION_BRIDGE_SCRIPT
+});
+var REGION_BRIDGE_SCRIPT = `
+(function() {
+  // Click handler: delegate clicks on [data-region] elements
+  document.addEventListener('click', function(e) {
+    var el = e.target;
+    while (el && el !== document.body) {
+      if (el.getAttribute && el.getAttribute('data-region')) {
+        e.preventDefault();
+        e.stopPropagation();
+        window.parent.postMessage({
+          type: 'region-click',
+          region: el.getAttribute('data-region')
+        }, '*');
+        return;
+      }
+      el = el.parentElement;
+    }
+  }, true);
+
+  // Highlight handler: parent sends list of region names to highlight
+  window.addEventListener('message', function(e) {
+    if (!e.data || e.data.type !== 'highlight-regions') return;
+
+    // Remove existing highlights
+    var existing = document.querySelectorAll('[data-region-highlight]');
+    for (var i = 0; i < existing.length; i++) {
+      existing[i].removeAttribute('data-region-highlight');
+      existing[i].style.cursor = '';
+    }
+
+    var regions = e.data.regions || [];
+    if (regions.length === 0) {
+      // Report empty rects when cleared
+      window.parent.postMessage({ type: 'region-rects', rects: [] }, '*');
+      return;
+    }
+
+    for (var j = 0; j < regions.length; j++) {
+      var els = document.querySelectorAll('[data-region="' + regions[j] + '"]');
+      for (var k = 0; k < els.length; k++) {
+        els[k].setAttribute('data-region-highlight', 'true');
+        els[k].style.cursor = 'pointer';
+      }
+    }
+
+    // Report bounding rects to parent
+    reportRegionRects();
+  });
+
+  // Measure and report region rects to parent
+  function reportRegionRects() {
+    var highlighted = document.querySelectorAll('[data-region-highlight]');
+    var rects = [];
+    for (var i = 0; i < highlighted.length; i++) {
+      var el = highlighted[i];
+      var rect = el.getBoundingClientRect();
+      rects.push({
+        name: el.getAttribute('data-region') || '',
+        x: rect.left,
+        y: rect.top,
+        width: rect.width,
+        height: rect.height
+      });
+    }
+    window.parent.postMessage({ type: 'region-rects', rects: rects }, '*');
+  }
+
+  // Debounced re-report on scroll/resize
+  var debounceTimer = null;
+  function debouncedReport() {
+    if (debounceTimer) clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(function() {
+      var highlighted = document.querySelectorAll('[data-region-highlight]');
+      if (highlighted.length > 0) reportRegionRects();
+    }, 100);
+  }
+  window.addEventListener('scroll', debouncedReport, true);
+  window.addEventListener('resize', debouncedReport);
+
+  // Token override handler: parent sends CSS overrides to inject
+  window.addEventListener('message', function(e) {
+    if (!e.data || e.data.type !== 'token-overrides') return;
+    var styleId = 'prev-token-overrides';
+    var existing = document.getElementById(styleId);
+    if (e.data.css) {
+      if (!existing) {
+        existing = document.createElement('style');
+        existing.id = styleId;
+        document.head.appendChild(existing);
+      }
+      existing.textContent = e.data.css;
+    } else if (existing) {
+      existing.remove();
+    }
+  });
+})();
+`;
+
 // src/renderers/react/layout.schema.json
 var layout_schema_default;
 var init_layout_schema = __esm(() => {
@@ -440,37 +547,37 @@ function validateTemplate(template) {
     warnings
   };
 }
-function validateNode(node, path11, errors, warnings) {
+function validateNode(node, path16, errors, warnings) {
   if (typeof node === "string") {
-    validateLeafValue(node, path11, errors, warnings);
+    validateLeafValue(node, path16, errors, warnings);
     return;
   }
   if (typeof node === "object" && node !== null) {
     const nodeObj = node;
     if (!("type" in nodeObj)) {
       errors.push({
-        path: path11,
+        path: path16,
         message: 'Container node must have a "type" field'
       });
       return;
     }
     if (typeof nodeObj.type !== "string") {
       errors.push({
-        path: `${path11}/type`,
+        path: `${path16}/type`,
         message: "Node type must be a string"
       });
       return;
     }
     if (!isPrimitive(nodeObj.type)) {
       errors.push({
-        path: `${path11}/type`,
+        path: `${path16}/type`,
         message: `Node type must be a primitive (start with $): ${nodeObj.type}`
       });
     } else {
       const parseResult = parsePrimitive(nodeObj.type);
       if (!parseResult.success) {
         errors.push({
-          path: `${path11}/type`,
+          path: `${path16}/type`,
           message: parseResult.error.message
         });
       }
@@ -479,49 +586,49 @@ function validateNode(node, path11, errors, warnings) {
       const primitiveType = getPrimitiveType(nodeObj.type);
       if (primitiveType && !CONTAINER_TYPES.has(primitiveType)) {
         errors.push({
-          path: `${path11}/children`,
+          path: `${path16}/children`,
           message: `Primitive ${primitiveType} cannot have children. Only $col, $row, $box support children.`
         });
       }
       if (typeof nodeObj.children !== "object" || nodeObj.children === null) {
         errors.push({
-          path: `${path11}/children`,
+          path: `${path16}/children`,
           message: "Children must be an object"
         });
       } else {
         const children = nodeObj.children;
         for (const [childId, childNode] of Object.entries(children)) {
-          validateNode(childNode, `${path11}/children/${childId}`, errors, warnings);
+          validateNode(childNode, `${path16}/children/${childId}`, errors, warnings);
         }
       }
     }
     return;
   }
   errors.push({
-    path: path11,
+    path: path16,
     message: `Invalid node type: expected string or object, got ${typeof node}`
   });
 }
-function validateLeafValue(value, path11, errors, warnings) {
+function validateLeafValue(value, path16, errors, warnings) {
   if (isPrimitive(value)) {
     const parseResult = parsePrimitive(value);
     if (!parseResult.success) {
       errors.push({
-        path: path11,
+        path: path16,
         message: parseResult.error.message
       });
     }
   } else if (isRef(value)) {
     if (!REF_PATTERN.test(value)) {
       errors.push({
-        path: path11,
+        path: path16,
         message: `Invalid ref format: ${value}. Expected format: type/id (e.g., components/button)`
       });
     }
   } else {
     if (!value.match(/^[a-z][a-zA-Z0-9]*$/) && !value.startsWith('"') && !value.startsWith("'")) {
       warnings.push({
-        path: path11,
+        path: path16,
         message: `Ambiguous value: ${value}. Use $primitive, type/ref, or a valid prop name.`
       });
     }
@@ -1053,12 +1160,6 @@ var init_react = __esm(() => {
         js: `${config.id}.js`
       };
     },
-    renderAtlas(config) {
-      return {
-        html: `<div data-preview-atlas="${config.id}"><!-- React atlas: ${config.title} --></div>`,
-        js: `${config.id}.js`
-      };
-    },
     supportsHMR() {
       return true;
     }
@@ -1182,11 +1283,6 @@ var init_html = __esm(() => {
         html: `<div data-preview-flow="${config.id}" data-step="${currentStep?.id ?? "unknown"}"><!-- HTML flow: ${config.title} --></div>`
       };
     },
-    renderAtlas(config) {
-      return {
-        html: `<div data-preview-atlas="${config.id}"><!-- HTML atlas: ${config.title} --></div>`
-      };
-    },
     supportsHMR() {
       return false;
     }
@@ -1195,28 +1291,19 @@ var init_html = __esm(() => {
 
 // src/cli.ts
 import { parseArgs } from "util";
-import path13 from "path";
-import { existsSync as existsSync12, mkdirSync as mkdirSync4, writeFileSync as writeFileSync7, rmSync as rmSync4, readFileSync as readFileSync11 } from "fs";
+import path18 from "path";
+import { existsSync as existsSync19, mkdirSync as mkdirSync4, writeFileSync as writeFileSync7, rmSync as rmSync4, readFileSync as readFileSync14 } from "fs";
 import { fileURLToPath as fileURLToPath6 } from "url";
 
-// src/vite/start.ts
-import { createServer as createServer2, build as build4, preview } from "vite";
-
-// src/vite/config.ts
-import { createLogger, build as viteBuild } from "vite";
-import react from "@vitejs/plugin-react";
-import mdx from "@mdx-js/rollup";
-import remarkGfm from "remark-gfm";
-import rehypeHighlight from "rehype-highlight";
-import path9 from "path";
-import os from "os";
-import { fileURLToPath as fileURLToPath3 } from "url";
-import { existsSync as existsSync8, readFileSync as readFileSync7 } from "fs";
+// src/server/dev.ts
+import path12 from "path";
+import { existsSync as existsSync11, readFileSync as readFileSync6, statSync } from "fs";
+import { fileURLToPath } from "url";
 
-// src/vite/plugins/pages-plugin.ts
-import path2 from "path";
+// src/server/plugins/virtual-modules.ts
+import path4 from "path";
 
-// src/vite/pages.ts
+// src/content/pages.ts
 import fg from "fast-glob";
 import { readFile } from "fs/promises";
 import path from "path";
@@ -1423,291 +1510,207 @@ function buildSidebarTree(pages) {
   return tree;
 }
 
-// src/vite/plugins/pages-plugin.ts
-var VIRTUAL_MODULE_ID = "virtual:prev-pages";
-var RESOLVED_VIRTUAL_MODULE_ID = "\x00" + VIRTUAL_MODULE_ID;
-var VIRTUAL_MODULES_ID = "virtual:prev-page-modules";
-var RESOLVED_VIRTUAL_MODULES_ID = "\x00" + VIRTUAL_MODULES_ID;
-function pagesPlugin(rootDir, options = {}) {
-  const { include } = options;
-  let cachedPages = null;
-  async function getPages() {
-    if (!cachedPages) {
-      cachedPages = await scanPages(rootDir, { include });
-    }
-    return cachedPages;
-  }
-  return {
-    name: "prev-pages",
-    resolveId(id) {
-      if (id === VIRTUAL_MODULE_ID) {
-        return RESOLVED_VIRTUAL_MODULE_ID;
-      }
-      if (id === VIRTUAL_MODULES_ID) {
-        return RESOLVED_VIRTUAL_MODULES_ID;
-      }
-    },
-    async load(id) {
-      if (id === RESOLVED_VIRTUAL_MODULE_ID) {
-        const pages = await getPages();
-        const sidebar = buildSidebarTree(pages);
-        return `
-          export const pages = ${JSON.stringify(pages)};
-          export const sidebar = ${JSON.stringify(sidebar)};
-        `;
-      }
-      if (id === RESOLVED_VIRTUAL_MODULES_ID) {
-        const pages = await getPages();
-        const imports = pages.map((page, i) => {
-          const absolutePath = path2.join(rootDir, page.file);
-          return `import * as _page${i} from ${JSON.stringify(absolutePath)};`;
-        }).join(`
-`);
-        const entries = pages.map((page, i) => {
-          return `  ${JSON.stringify("/" + page.file)}: _page${i}`;
-        }).join(`,
-`);
-        return `${imports}
-
-export const pageModules = {
-${entries}
-};`;
-      }
-    },
-    handleHotUpdate({ file, server }) {
-      if (file.endsWith(".mdx") || file.endsWith(".md")) {
-        cachedPages = null;
-        const mod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_MODULE_ID);
-        const modulesMod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_MODULES_ID);
-        const mods = [];
-        if (mod) {
-          server.moduleGraph.invalidateModule(mod);
-          mods.push(mod);
-        }
-        if (modulesMod) {
-          server.moduleGraph.invalidateModule(modulesMod);
-          mods.push(modulesMod);
-        }
-        return mods.length > 0 ? mods : undefined;
-      }
-    }
-  };
-}
-
-// src/vite/plugins/entry-plugin.ts
-import path3 from "path";
-import { fileURLToPath } from "url";
-import { existsSync, readFileSync, writeFileSync, unlinkSync } from "fs";
-function findCliRoot() {
-  let dir = path3.dirname(fileURLToPath(import.meta.url));
-  for (let i = 0;i < 10; i++) {
-    const pkgPath = path3.join(dir, "package.json");
-    if (existsSync(pkgPath)) {
-      try {
-        const pkg = JSON.parse(readFileSync(pkgPath, "utf-8"));
-        if (pkg.name === "prev-cli") {
-          return dir;
-        }
-      } catch {}
-    }
-    const parent = path3.dirname(dir);
-    if (parent === dir)
-      break;
-    dir = parent;
-  }
-  return path3.dirname(path3.dirname(fileURLToPath(import.meta.url)));
-}
-var cliRoot = findCliRoot();
-var srcRoot = path3.join(cliRoot, "src");
-function getHtml(entryPath, forBuild = false) {
-  const scriptSrc = forBuild ? entryPath : `/@fs${entryPath}`;
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Documentation</title>
-  <!-- Preconnect to Google Fonts for faster loading -->
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <!-- Preload critical fonts -->
-  <link rel="preload" href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=IBM+Plex+Mono:wght@400;500&display=swap" as="style" />
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=IBM+Plex+Mono:wght@400;500&display=swap" />
-</head>
-<body>
-  <div id="root"></div>
-  <script type="module" src="${scriptSrc}"></script>
-</body>
-</html>`;
-}
-function entryPlugin(rootDir) {
-  const entryPath = path3.join(srcRoot, "theme/entry.tsx");
-  let tempHtmlPath = null;
-  return {
-    name: "prev-entry",
-    config(config, { command }) {
-      if (command === "build" && rootDir) {
-        tempHtmlPath = path3.join(rootDir, "index.html");
-        writeFileSync(tempHtmlPath, getHtml(entryPath, true));
-        const existingInput = config.build?.rollupOptions?.input || {};
-        const inputObj = typeof existingInput === "string" ? { _original: existingInput } : Array.isArray(existingInput) ? Object.fromEntries(existingInput.map((f, i) => [`entry${i}`, f])) : existingInput;
-        return {
-          build: {
-            rollupOptions: {
-              input: {
-                ...inputObj,
-                main: tempHtmlPath
-              }
-            }
-          }
-        };
-      }
-    },
-    buildEnd() {
-      if (tempHtmlPath && existsSync(tempHtmlPath)) {
-        unlinkSync(tempHtmlPath);
-        tempHtmlPath = null;
-      }
-    },
-    configureServer(server) {
-      const html = getHtml(entryPath, false);
-      server.middlewares.use(async (req, res, next) => {
-        const url = req.url || "/";
-        if (url === "/" || !url.includes(".") && !url.startsWith("/@") && !url.startsWith("/_preview")) {
-          try {
-            const transformed = await server.transformIndexHtml(url, html);
-            res.setHeader("Content-Type", "text/html");
-            res.statusCode = 200;
-            res.end(transformed);
-            return;
-          } catch (e) {
-            console.error("Entry plugin error:", e);
-            next();
-            return;
-          }
-        }
-        next();
-      });
-    }
-  };
-}
-
-// src/vite/previews.ts
+// src/content/previews.ts
 import fg2 from "fast-glob";
-import path4 from "path";
-import { existsSync as existsSync3, readFileSync as readFileSync3 } from "fs";
-
-// src/vite/config-parser.ts
+import path2 from "path";
 import { existsSync as existsSync2, readFileSync as readFileSync2 } from "fs";
+
+// src/content/config-parser.ts
+import { existsSync, readFileSync } from "fs";
 import * as yaml from "js-yaml";
 
-// src/vite/preview-types.ts
+// src/content/preview-types.ts
 import { z } from "zod";
-var configSchema = z.object({
+var refSchema = z.union([
+  z.string().regex(/^([a-z0-9-]+|(screens|components|flows)\/[a-z0-9-]+)$/),
+  z.object({
+    ref: z.string().regex(/^([a-z0-9-]+|(screens|components|flows)\/[a-z0-9-]+)$/),
+    state: z.string().optional(),
+    options: z.record(z.string(), z.unknown()).optional()
+  })
+]);
+var baseConfigSchema = z.object({
+  kind: z.enum(["component", "screen", "flow"]).optional(),
+  id: z.string().regex(/^[a-z0-9-]+$/).optional(),
+  title: z.string(),
+  description: z.string().optional(),
   tags: z.union([
     z.array(z.string()),
     z.string().transform((s) => [s])
   ]).optional(),
   category: z.string().optional(),
   status: z.enum(["draft", "stable", "deprecated"]).optional(),
+  schemaVersion: z.enum(["1.0", "2.0"]).optional(),
+  order: z.number().optional()
+});
+var componentConfigSchema = baseConfigSchema.extend({
+  kind: z.literal("component").optional(),
+  props: z.record(z.string(), z.object({
+    type: z.string().optional(),
+    required: z.boolean().optional(),
+    default: z.unknown().optional(),
+    enum: z.array(z.unknown()).optional()
+  })).optional(),
+  slots: z.record(z.string(), z.object({
+    description: z.string().optional()
+  })).optional()
+});
+var screenConfigSchema = baseConfigSchema.extend({
+  kind: z.literal("screen").optional(),
+  states: z.record(z.string(), z.object({
+    description: z.string().optional()
+  })).optional(),
+  layoutByRenderer: z.record(z.string(), z.array(z.unknown())).optional()
+});
+var regionGotoSchema = z.object({
+  goto: z.string()
+});
+var regionOutcomesSchema = z.object({
+  outcomes: z.record(z.string(), z.object({
+    goto: z.string(),
+    label: z.string().optional()
+  }))
+});
+var regionSchema = z.union([regionGotoSchema, regionOutcomesSchema]);
+var regionNamePattern = /^[a-z0-9-]+$/;
+var flowStepSchema = z.object({
+  id: z.string().optional(),
   title: z.string().optional(),
   description: z.string().optional(),
-  order: z.number().optional()
+  screen: refSchema,
+  state: z.string().optional(),
+  note: z.string().optional(),
+  trigger: z.string().optional(),
+  highlight: z.array(z.string()).optional(),
+  regions: z.record(z.string(), regionSchema).refine((r) => Object.keys(r).every((k) => regionNamePattern.test(k)), { message: "Region names must be lowercase alphanumeric with hyphens" }).optional(),
+  terminal: z.boolean().optional()
+});
+var flowTransitionSchema = z.object({
+  from: z.string(),
+  to: z.string(),
+  trigger: z.string()
 });
+var flowConfigSchema = baseConfigSchema.extend({
+  kind: z.literal("flow").optional(),
+  steps: z.array(flowStepSchema).optional(),
+  transitions: z.array(flowTransitionSchema).optional()
+});
+var configSchema = z.union([
+  componentConfigSchema,
+  screenConfigSchema,
+  flowConfigSchema,
+  baseConfigSchema
+]);
 
-// src/vite/config-parser.ts
-async function parsePreviewConfig(filePath) {
-  if (!existsSync2(filePath)) {
-    return null;
+// src/content/config-parser.ts
+async function parsePreviewConfig(filePath, options = {}) {
+  const result = {
+    data: null,
+    errors: [],
+    warnings: []
+  };
+  if (!existsSync(filePath)) {
+    result.errors.push(`Config file not found: ${filePath}`);
+    return result;
   }
   try {
-    const content = readFileSync2(filePath, "utf-8");
-    const parsed = yaml.load(content);
-    const result = configSchema.safeParse(parsed);
-    if (result.success) {
-      return result.data;
+    const content = readFileSync(filePath, "utf-8");
+    let parsed = yaml.load(content);
+    if (!parsed || typeof parsed !== "object") {
+      result.errors.push(`Invalid YAML in ${filePath}`);
+      return result;
+    }
+    if (options.injectId && options.folderName && !parsed.id) {
+      parsed = { ...parsed, id: options.folderName };
+    }
+    if (options.injectKind && options.previewType && !parsed.kind) {
+      parsed = { ...parsed, kind: options.previewType };
+      result.warnings.push(`Config missing 'kind' field, inferred as '${options.previewType}'`);
+    }
+    if (options.folderName && parsed.id && parsed.id !== options.folderName) {
+      result.errors.push(`Config id "${parsed.id}" does not match folder name "${options.folderName}"`);
+      return result;
+    }
+    const parseResult = configSchema.safeParse(parsed);
+    if (parseResult.success) {
+      result.data = parseResult.data;
+    } else {
+      result.errors.push(`Invalid config at ${filePath}: ${parseResult.error.message}`);
     }
-    console.warn(`Invalid config at ${filePath}:`, result.error.message);
-    return null;
+    return result;
   } catch (err) {
-    console.warn(`Error parsing config at ${filePath}:`, err);
-    return null;
+    result.errors.push(`Error parsing config at ${filePath}: ${err}`);
+    return result;
   }
 }
-async function parseFlowDefinition(filePath) {
-  if (!existsSync2(filePath)) {
-    return null;
+async function parseFlowConfig(configPath, options = {}) {
+  const result = {
+    data: null,
+    errors: [],
+    warnings: []
+  };
+  if (!existsSync(configPath)) {
+    result.errors.push(`Config file not found: ${configPath}`);
+    return result;
   }
   try {
-    const content = readFileSync2(filePath, "utf-8");
-    const parsed = yaml.load(content);
-    if (!parsed.name || !Array.isArray(parsed.steps)) {
-      return null;
+    const content = readFileSync(configPath, "utf-8");
+    let parsed = yaml.load(content);
+    if (!parsed || typeof parsed !== "object") {
+      result.errors.push(`Invalid YAML in ${configPath}`);
+      return result;
+    }
+    if (options.injectId && options.folderName && !parsed.id) {
+      parsed = { ...parsed, id: options.folderName };
+    }
+    if (options.injectKind && !parsed.kind) {
+      parsed = { ...parsed, kind: "flow" };
+      result.warnings.push(`Config missing 'kind' field, inferred as 'flow'`);
+    }
+    const parseResult = flowConfigSchema.safeParse(parsed);
+    if (parseResult.success) {
+      result.data = parseResult.data;
+    } else {
+      result.errors.push(`Invalid flow config: ${parseResult.error.message}`);
     }
-    return parsed;
+    return result;
   } catch (err) {
-    console.warn(`Error parsing flow at ${filePath}:`, err);
-    return null;
+    result.errors.push(`Error parsing flow config: ${err}`);
+    return result;
   }
 }
-async function parseAtlasDefinition(filePath) {
-  if (!existsSync2(filePath)) {
+async function parseFlowDefinition(filePath) {
+  if (!existsSync(filePath)) {
     return null;
   }
   try {
-    const content = readFileSync2(filePath, "utf-8");
+    const content = readFileSync(filePath, "utf-8");
     const parsed = yaml.load(content);
-    if (!parsed.name || !parsed.hierarchy?.root || !parsed.hierarchy?.areas) {
+    if (!parsed.name || !Array.isArray(parsed.steps)) {
       return null;
     }
     return parsed;
   } catch (err) {
-    console.warn(`Error parsing atlas at ${filePath}:`, err);
+    console.warn(`Error parsing flow at ${filePath}:`, err);
     return null;
   }
 }
 
-// src/vite/previews.ts
-var PREVIEW_TYPE_FOLDERS = ["components", "screens", "flows", "atlas"];
+// src/content/previews.ts
+var PREVIEW_TYPE_FOLDERS = ["components", "screens", "flows"];
 var TYPE_MAP = {
   components: "component",
   screens: "screen",
-  flows: "flow",
-  atlas: "atlas"
+  flows: "flow"
 };
-async function scanPreviews(rootDir) {
-  const previewsDir = path4.join(rootDir, "previews");
-  if (!existsSync3(previewsDir)) {
-    return [];
-  }
-  const entryFiles = await fg2.glob("**/{index.html,App.tsx,App.jsx,index.tsx,index.jsx}", {
-    cwd: previewsDir,
-    ignore: ["node_modules/**"]
-  });
-  const previewDirs = new Map;
-  for (const file of entryFiles) {
-    const dir = path4.dirname(file);
-    if (!previewDirs.has(dir)) {
-      previewDirs.set(dir, file);
-    }
-  }
-  return Array.from(previewDirs.entries()).map(([dir, file]) => {
-    const name = dir === "." ? path4.basename(previewsDir) : dir;
-    return {
-      name,
-      route: `/_preview/${name}`,
-      htmlPath: path4.join(previewsDir, file)
-    };
-  });
-}
 async function scanPreviewFiles(previewDir) {
   const files = await fg2.glob("**/*.{tsx,ts,jsx,js,css,json}", {
     cwd: previewDir,
     ignore: ["node_modules/**", "dist/**"]
   });
   return files.map((file) => {
-    const content = readFileSync3(path4.join(previewDir, file), "utf-8");
-    const ext = path4.extname(file).slice(1);
+    const content = readFileSync2(path2.join(previewDir, file), "utf-8");
+    const ext = path2.extname(file).slice(1);
     return {
       path: file,
       content,
@@ -1725,9 +1728,9 @@ function detectEntry(files) {
   const jsxFile = files.find((f) => f.type === "tsx" || f.type === "jsx");
   return jsxFile?.path || files[0]?.path || "App.tsx";
 }
-async function buildPreviewConfig(previewDir) {
+async function buildPreviewConfig(previewDir, entryOverride) {
   const files = await scanPreviewFiles(previewDir);
-  const entry = detectEntry(files);
+  const entry = entryOverride || detectEntry(files);
   return {
     files,
     entry,
@@ -1735,14 +1738,14 @@ async function buildPreviewConfig(previewDir) {
   };
 }
 async function scanPreviewUnits(rootDir) {
-  const previewsDir = path4.join(rootDir, "previews");
-  if (!existsSync3(previewsDir)) {
+  const previewsDir = path2.join(rootDir, "previews");
+  if (!existsSync2(previewsDir)) {
     return [];
   }
   const units = [];
   for (const typeFolder of PREVIEW_TYPE_FOLDERS) {
-    const typeDir = path4.join(previewsDir, typeFolder);
-    if (!existsSync3(typeDir))
+    const typeDir = path2.join(previewsDir, typeFolder);
+    if (!existsSync2(typeDir))
       continue;
     const type = TYPE_MAP[typeFolder];
     const entries = await fg2.glob("*/", {
@@ -1752,18 +1755,32 @@ async function scanPreviewUnits(rootDir) {
     });
     for (const entry of entries) {
       const name = entry.replace(/\/$/, "");
-      const unitDir = path4.join(typeDir, name);
+      const unitDir = path2.join(typeDir, name);
       const files = await detectUnitFiles(unitDir, type);
       if (!files.index)
         continue;
-      const configPath = existsSync3(path4.join(unitDir, "config.yaml")) ? path4.join(unitDir, "config.yaml") : path4.join(unitDir, "config.yml");
-      const config = await parsePreviewConfig(configPath);
+      const configPath = existsSync2(path2.join(unitDir, "config.yaml")) ? path2.join(unitDir, "config.yaml") : path2.join(unitDir, "config.yml");
+      const configResult = await parsePreviewConfig(configPath, {
+        injectId: true,
+        injectKind: true,
+        folderName: name,
+        previewType: type
+      });
+      for (const warning of configResult.warnings) {
+        console.warn(`[prev] Warning in ${typeFolder}/${name}: ${warning}`);
+      }
+      if (configResult.errors.length > 0) {
+        for (const error of configResult.errors) {
+          console.error(`[prev] Error in ${typeFolder}/${name}: ${error}`);
+        }
+        continue;
+      }
       units.push({
         type,
         name,
         path: unitDir,
         route: `/_preview/${typeFolder}/${name}`,
-        config,
+        config: configResult.data,
         files
       });
     }
@@ -1773,8 +1790,8 @@ async function scanPreviewUnits(rootDir) {
 async function detectUnitFiles(unitDir, type) {
   const allFiles = await fg2.glob("*", { cwd: unitDir });
   let index;
-  if (type === "flow" || type === "atlas") {
-    index = allFiles.find((f) => f === "index.yaml" || f === "index.yml");
+  if (type === "flow") {
+    index = allFiles.find((f) => f === "config.yaml" || f === "config.yml");
   } else {
     const priorities = [
       "index.tsx",
@@ -1807,337 +1824,90 @@ async function detectUnitFiles(unitDir, type) {
   return result;
 }
 
-// src/preview-runtime/vendors.ts
-import { build } from "esbuild";
-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 }
-      // Re-export React hooks as named exports (preview code imports them directly)
-      export {
-        useState, useEffect, useCallback, useMemo, useRef,
-        useContext, useReducer, useLayoutEffect, useInsertionEffect,
-        useTransition, useDeferredValue, useId, useSyncExternalStore,
-        useImperativeHandle, useDebugValue, memo, forwardRef,
-        createContext, createRef, lazy, Suspense, startTransition,
-        Children, cloneElement, isValidElement, createElement
-      } from 'react'
-      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" };
+// src/config/schema.ts
+var defaultConfig = {
+  theme: "system",
+  contentWidth: "constrained",
+  hidden: [],
+  include: [],
+  order: {},
+  port: undefined
+};
+function validateConfig(raw) {
+  const config = { ...defaultConfig };
+  if (raw && typeof raw === "object") {
+    const obj = raw;
+    if (obj.theme === "light" || obj.theme === "dark" || obj.theme === "system") {
+      config.theme = obj.theme;
+    }
+    if (obj.contentWidth === "constrained" || obj.contentWidth === "full") {
+      config.contentWidth = obj.contentWidth;
+    }
+    if (Array.isArray(obj.hidden)) {
+      config.hidden = obj.hidden.filter((h) => typeof h === "string");
+    }
+    if (Array.isArray(obj.include)) {
+      config.include = obj.include.filter((i) => typeof i === "string");
+    }
+    if (obj.order && typeof obj.order === "object") {
+      config.order = {};
+      for (const [key, value] of Object.entries(obj.order)) {
+        if (Array.isArray(value)) {
+          config.order[key] = value.filter((v) => typeof v === "string");
+        }
+      }
+    }
+    if (typeof obj.port === "number" && obj.port > 0 && obj.port < 65536) {
+      config.port = obj.port;
     }
-    return { success: true, code: jsFile.text };
-  } catch (err) {
-    return {
-      success: false,
-      code: "",
-      error: err instanceof Error ? err.message : String(err)
-    };
   }
+  return config;
 }
-
-// src/preview-runtime/build-optimized.ts
-import { build as build2 } from "esbuild";
-
-// src/preview-runtime/tailwind.ts
-var {$ } = globalThis.Bun;
-import { mkdtempSync, mkdirSync, writeFileSync as writeFileSync2, readFileSync as readFileSync4, rmSync, existsSync as existsSync4 } from "fs";
-import { join, dirname as dirname2 } from "path";
-import { tmpdir } from "os";
-function findTailwindBin() {
-  try {
-    const tailwindPkg = __require.resolve("tailwindcss/package.json");
-    const tailwindDir = dirname2(tailwindPkg);
-    const binPath = join(tailwindDir, "lib/cli.js");
-    if (existsSync4(binPath))
-      return binPath;
-  } catch {}
-  return "bunx tailwindcss@3";
-}
-var tailwindCmd = findTailwindBin();
-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");
-    if (tailwindCmd.startsWith("bunx")) {
-      await $`bunx tailwindcss@3 -c ${configPath} -i ${inputPath} -o ${outputPath} --minify`.quiet();
-    } else {
-      await $`bun ${tailwindCmd} -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/config/loader.ts
+import { readFileSync as readFileSync3, existsSync as existsSync3, writeFileSync } from "fs";
+import path3 from "path";
+import yaml2 from "js-yaml";
+function findConfigFile(rootDir) {
+  const yamlPath = path3.join(rootDir, ".prev.yaml");
+  const ymlPath = path3.join(rootDir, ".prev.yml");
+  if (existsSync3(yamlPath))
+    return yamlPath;
+  if (existsSync3(ymlPath))
+    return ymlPath;
+  return null;
 }
-
-// src/preview-runtime/build-optimized.ts
-async function buildOptimizedPreview(config, options) {
+function loadConfig(rootDir) {
+  const configPath = findConfigFile(rootDir);
+  if (!configPath) {
+    return defaultConfig;
+  }
   try {
-    const virtualFs = {};
-    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 = [];
-    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 build2({
-      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(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" };
-            });
-            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: "", 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;
-    }
-    let userCss = userCssCollected.join(`
-`);
-    if (config.tailwind) {
-      userCss = userCss.replace(/@import\s*["']tailwindcss["']\s*;?/g, "");
-    }
-    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>
-  <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) };
+    const content = readFileSync3(configPath, "utf-8");
+    const raw = yaml2.load(content);
+    return validateConfig(raw);
+  } catch (error) {
+    console.warn(`Warning: Failed to parse ${configPath}:`, error);
+    return defaultConfig;
   }
 }
-
-// src/vite/plugins/previews-plugin.ts
-import { existsSync as existsSync5, 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;
-function previewsPlugin(rootDir) {
-  let isBuild = false;
-  return {
-    name: "prev-previews",
-    config(_, { command }) {
-      isBuild = command === "build";
-    },
-    resolveId(id) {
-      if (id === VIRTUAL_MODULE_ID2) {
-        return RESOLVED_VIRTUAL_MODULE_ID2;
-      }
-    },
-    async load(id) {
-      if (id === RESOLVED_VIRTUAL_MODULE_ID2) {
-        const units = await scanPreviewUnits(rootDir);
-        const legacyPreviews = await scanPreviews(rootDir);
-        return `
-// Multi-type preview units
-export const previewUnits = ${JSON.stringify(units)};
-
-// Legacy flat previews (backwards compatibility)
-export const previews = ${JSON.stringify(legacyPreviews)};
-
-// Filtering helpers
-export function getByType(type) {
-  return previewUnits.filter(u => u.type === type);
-}
-
-export function getByTags(tags) {
-  return previewUnits.filter(u =>
-    u.config?.tags?.some(t => tags.includes(t))
-  );
-}
-
-export function getByCategory(category) {
-  return previewUnits.filter(u => u.config?.category === category);
-}
-
-export function getByStatus(status) {
-  return previewUnits.filter(u => u.config?.status === status);
+function saveConfig(rootDir, config) {
+  const configPath = findConfigFile(rootDir) || path3.join(rootDir, ".prev.yaml");
+  const content = yaml2.dump(config, {
+    indent: 2,
+    lineWidth: -1,
+    quotingType: '"',
+    forceQuotes: false
+  });
+  writeFileSync(configPath, content, "utf-8");
 }
-`;
-      }
-    },
-    handleHotUpdate({ file, server }) {
-      const previewsPath = path5.sep + "previews" + path5.sep;
-      if ((file.includes(previewsPath) || file.includes("/previews/")) && /\.(html|tsx|ts|jsx|js|css|yaml|yml|mdx)$/.test(file)) {
-        const mod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_MODULE_ID2);
-        if (mod) {
-          server.moduleGraph.invalidateModule(mod);
-          return [mod];
-        }
-      }
-    },
-    async closeBundle() {
-      if (!isBuild)
-        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 (existsSync5(oldPreviewsDir)) {
-        rmSync2(oldPreviewsDir, { recursive: true });
-      }
-      if (existsSync5(targetDir)) {
-        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(`    \u2717 Vendor bundle: ${vendorResult.error}`);
-        return;
-      }
-      writeFileSync3(path5.join(vendorsDir, "runtime.js"), vendorResult.code);
-      console.log("    \u2713 _vendors/runtime.js");
-      for (const preview of previews) {
-        const previewDir = path5.join(previewsDir, preview.name);
-        try {
-          const config = await buildPreviewConfig(previewDir);
-          const depth = preview.name.split("/").length;
-          const vendorPath = "../".repeat(depth) + "_vendors/runtime.js";
-          const result = await buildOptimizedPreview(config, { vendorPath });
-          if (!result.success) {
-            console.error(`    \u2717 ${preview.name}: ${result.error}`);
-            continue;
-          }
-          const outputDir = path5.join(targetDir, preview.name);
-          mkdirSync2(outputDir, { recursive: true });
-          writeFileSync3(path5.join(outputDir, "index.html"), result.html);
-          console.log(`    \u2713 ${preview.name}`);
-        } catch (err) {
-          console.error(`    \u2717 ${preview.name}: ${err}`);
-        }
-      }
-    }
-  };
+function updateOrder(rootDir, pathKey, order) {
+  const config = loadConfig(rootDir);
+  config.order[pathKey] = order;
+  saveConfig(rootDir, config);
 }
-
-// src/vite/plugins/tokens-plugin.ts
-import path6 from "path";
-import { existsSync as existsSync6 } from "fs";
-
 // src/tokens/resolver.ts
 import { load as parseYaml } from "js-yaml";
-import { readFileSync as readFileSync5 } from "fs";
+import { readFileSync as readFileSync4 } from "fs";
 
 // src/tokens/utils.ts
 function isPlainObject(value) {
@@ -2263,12 +2033,12 @@ function validateTokensConfig(parsed, filePath) {
   return parsed;
 }
 function loadTokens(filePath) {
-  const content = readFileSync5(filePath, "utf-8");
+  const content = readFileSync4(filePath, "utf-8");
   const parsed = parseYaml(content);
   return validateTokensConfig(parsed, filePath);
 }
 function loadPartialTokens(filePath) {
-  const content = readFileSync5(filePath, "utf-8");
+  const content = readFileSync4(filePath, "utf-8");
   const parsed = parseYaml(content);
   if (!parsed || typeof parsed !== "object") {
     throw new Error(`Invalid tokens file: ${filePath} - must contain a YAML object`);
@@ -2299,962 +2069,1621 @@ function resolveTokens(options = {}) {
   return resolved;
 }
 
-// src/vite/plugins/tokens-plugin.ts
-var VIRTUAL_MODULE_ID3 = "virtual:prev-tokens";
-var RESOLVED_VIRTUAL_MODULE_ID3 = "\x00" + VIRTUAL_MODULE_ID3;
-function tokensPlugin(rootDir) {
-  let cachedTokens = null;
-  function getTokens() {
-    if (!cachedTokens) {
-      const userTokensPath = path6.join(rootDir, "previews/tokens.yaml");
-      const options = existsSync6(userTokensPath) ? { userTokensPath } : {};
-      cachedTokens = resolveTokens(options);
+// src/server/plugins/virtual-modules.ts
+import { existsSync as existsSync4 } from "fs";
+function virtualModulesPlugin(options) {
+  const { rootDir, include } = options;
+  const config = options.config || loadConfig(rootDir);
+  let cachedPages = null;
+  async function getPages() {
+    if (!cachedPages) {
+      cachedPages = await scanPages(rootDir, { include });
     }
-    return cachedTokens;
+    return cachedPages;
   }
   return {
-    name: "prev-tokens",
-    configureServer(server) {
-      server.middlewares.use("/_prev/tokens.json", (req, res, next) => {
-        if (req.method !== "GET")
-          return next();
-        try {
-          const tokens = getTokens();
-          res.setHeader("Content-Type", "application/json");
-          res.setHeader("Cache-Control", "no-cache");
-          res.end(JSON.stringify(tokens));
-        } catch (err) {
-          console.error("Error serving tokens:", err);
-          res.statusCode = 500;
-          res.end(JSON.stringify({ error: String(err) }));
+    name: "prev-virtual-modules",
+    setup(build) {
+      build.onResolve({ filter: /^virtual:prev-/ }, (args) => ({
+        path: args.path,
+        namespace: "prev-virtual"
+      }));
+      build.onLoad({ filter: /.*/, namespace: "prev-virtual" }, async (args) => {
+        switch (args.path) {
+          case "virtual:prev-config":
+            return {
+              contents: `export const config = ${JSON.stringify(config)};`,
+              loader: "js"
+            };
+          case "virtual:prev-pages": {
+            const pages = await getPages();
+            const sidebar = buildSidebarTree(pages);
+            return {
+              contents: `export const pages = ${JSON.stringify(pages)};
+export const sidebar = ${JSON.stringify(sidebar)};`,
+              loader: "js"
+            };
+          }
+          case "virtual:prev-page-modules": {
+            const pages = await getPages();
+            const imports = pages.map((page, i) => {
+              const absolutePath = path4.join(rootDir, page.file);
+              return `import * as _page${i} from ${JSON.stringify(absolutePath)};`;
+            }).join(`
+`);
+            const entries = pages.map((page, i) => `  ${JSON.stringify("/" + page.file)}: _page${i}`).join(`,
+`);
+            return {
+              contents: `${imports}
+export const pageModules = {
+${entries}
+};`,
+              loader: "js"
+            };
+          }
+          case "virtual:prev-previews": {
+            const units = await scanPreviewUnits(rootDir);
+            return {
+              contents: `
+export const previewUnits = ${JSON.stringify(units)};
+export function getByType(type) { return previewUnits.filter(u => u.type === type); }
+export function getByTags(tags) { return previewUnits.filter(u => u.config?.tags?.some(t => tags.includes(t))); }
+export function getByCategory(category) { return previewUnits.filter(u => u.config?.category === category); }
+export function getByStatus(status) { return previewUnits.filter(u => u.config?.status === status); }
+`,
+              loader: "js"
+            };
+          }
+          case "virtual:prev-tokens": {
+            const userTokensPath = path4.join(rootDir, "previews/tokens.yaml");
+            const tokensOptions = existsSync4(userTokensPath) ? { userTokensPath } : {};
+            const tokens = resolveTokens(tokensOptions);
+            return {
+              contents: `export const tokens = ${JSON.stringify(tokens)};`,
+              loader: "js"
+            };
+          }
+          default:
+            return;
         }
       });
-    },
-    resolveId(id) {
-      if (id === VIRTUAL_MODULE_ID3) {
-        return RESOLVED_VIRTUAL_MODULE_ID3;
-      }
-    },
-    load(id) {
-      if (id === RESOLVED_VIRTUAL_MODULE_ID3) {
-        const tokens = getTokens();
-        return `export const tokens = ${JSON.stringify(tokens, null, 2)};`;
-      }
-    },
-    handleHotUpdate({ file, server }) {
-      if (file.endsWith("tokens.yaml")) {
-        cachedTokens = null;
-        const mod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_MODULE_ID3);
-        if (mod) {
-          server.moduleGraph.invalidateModule(mod);
-          return [mod];
-        }
-      }
     }
   };
 }
 
-// src/vite/plugins/config-plugin.ts
-var VIRTUAL_CONFIG_ID = "virtual:prev-config";
-var RESOLVED_CONFIG_ID = "\x00" + VIRTUAL_CONFIG_ID;
-function createConfigPlugin(config) {
+// src/server/plugins/mdx.ts
+function mdxPlugin(options) {
+  const { rootDir } = options;
   return {
-    name: "prev-config",
-    enforce: "pre",
-    resolveId(id) {
-      if (id === VIRTUAL_CONFIG_ID) {
-        return RESOLVED_CONFIG_ID;
-      }
-    },
-    load(id) {
-      if (id === RESOLVED_CONFIG_ID) {
-        return `export const config = ${JSON.stringify(config)};`;
-      }
+    name: "prev-mdx",
+    setup(build) {
+      build.onLoad({ filter: /\.(md|mdx)$/ }, async (args) => {
+        if (!args.path.startsWith(rootDir))
+          return;
+        const source = await Bun.file(args.path).text();
+        const { compile } = await import("@mdx-js/mdx");
+        const remarkGfm = (await import("remark-gfm")).default;
+        const rehypeHighlight = (await import("rehype-highlight")).default;
+        const compiled = await compile(source, {
+          remarkPlugins: [remarkGfm],
+          rehypePlugins: [rehypeHighlight],
+          providerImportSource: "@mdx-js/react",
+          development: false,
+          jsx: false
+        });
+        return {
+          contents: String(compiled),
+          loader: "jsx"
+        };
+      });
     }
   };
 }
 
-// src/vite/plugins/debug-plugin.ts
-function debugPlugin(collector) {
+// src/server/plugins/aliases.ts
+import path5 from "path";
+import { existsSync as existsSync5 } from "fs";
+function findNodeModules(cliRoot) {
+  const localNodeModules = path5.join(cliRoot, "node_modules");
+  if (existsSync5(path5.join(localNodeModules, "react"))) {
+    return localNodeModules;
+  }
+  let dir = cliRoot;
+  for (let i = 0;i < 10; i++) {
+    const parent = path5.dirname(dir);
+    if (parent === dir)
+      break;
+    if (path5.basename(parent) === "node_modules" && existsSync5(path5.join(parent, "react"))) {
+      return parent;
+    }
+    dir = parent;
+  }
+  return localNodeModules;
+}
+function aliasesPlugin(options) {
+  const { cliRoot } = options;
+  const nodeModules = findNodeModules(cliRoot);
+  const srcRoot = path5.join(cliRoot, "src");
+  const packages = [
+    "react",
+    "react-dom",
+    "@tanstack/react-router",
+    "@mdx-js/react",
+    "mermaid",
+    "dayjs",
+    "@terrastruct/d2",
+    "use-sync-external-store"
+  ];
   return {
-    name: "prev-debug",
-    enforce: "pre",
-    configResolved() {
-      collector.startPhase("configResolved");
-    },
-    buildStart() {
-      collector.startPhase("buildStart");
-    },
-    resolveId(id, importer) {
-      const start = performance.now();
-      collector.trackFile(id, "resolve", start);
-      if (importer) {
-        collector.trackFile(`${id} <- ${importer}`, "resolve", start);
-      }
-      return null;
-    },
-    load(id) {
-      const start = performance.now();
-      collector.trackFile(id, "load", start);
-      return null;
-    },
-    transform(_code, id) {
-      const start = performance.now();
-      collector.trackFile(id, "transform", start);
-      return null;
-    },
-    configureServer(server) {
-      collector.startPhase("configureServer");
-      server.httpServer?.once("listening", () => {
-        collector.startPhase("serverListening");
-      });
-      server.middlewares.use((req, _res, next) => {
-        if (req.url && !req.url.startsWith("/@") && !req.url.includes("__")) {
-          collector.trackFile(req.url, "resolve", performance.now());
+    name: "prev-aliases",
+    setup(build) {
+      build.onResolve({ filter: /^@prev\/(ui|theme)/ }, (args) => {
+        const relPath = args.path.replace("@prev/", "");
+        const resolved = path5.join(srcRoot, relPath);
+        try {
+          return { path: __require.resolve(resolved) };
+        } catch {
+          return { path: resolved };
         }
-        next();
       });
-    },
-    handleHotUpdate({ file }) {
-      collector.trackFile(file, "transform", performance.now());
-    },
-    buildEnd() {
-      collector.endPhase("build");
+      for (const pkg of packages) {
+        const esc = pkg.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+        build.onResolve({ filter: new RegExp(`^${esc}(/|$)`) }, (args) => {
+          try {
+            return { path: __require.resolve(args.path, { paths: [nodeModules] }) };
+          } catch {
+            return;
+          }
+        });
+      }
     }
   };
 }
 
-// src/vite/config.ts
-import * as esbuildLib from "esbuild";
-
-// src/config/schema.ts
-var defaultConfig = {
-  theme: "system",
-  contentWidth: "constrained",
-  hidden: [],
-  include: [],
-  order: {},
-  port: undefined
-};
-function validateConfig(raw) {
-  const config = { ...defaultConfig };
-  if (raw && typeof raw === "object") {
-    const obj = raw;
-    if (obj.theme === "light" || obj.theme === "dark" || obj.theme === "system") {
-      config.theme = obj.theme;
-    }
-    if (obj.contentWidth === "constrained" || obj.contentWidth === "full") {
-      config.contentWidth = obj.contentWidth;
-    }
-    if (Array.isArray(obj.hidden)) {
-      config.hidden = obj.hidden.filter((h) => typeof h === "string");
-    }
-    if (Array.isArray(obj.include)) {
-      config.include = obj.include.filter((i) => typeof i === "string");
+// src/server/routes/preview-bundle.ts
+import path6 from "path";
+import { existsSync as existsSync6 } from "fs";
+function createPreviewBundleHandler(rootDir) {
+  return async (req) => {
+    const url = new URL(req.url);
+    if (!url.pathname.startsWith("/_preview-bundle/"))
+      return null;
+    const startTime = performance.now();
+    const previewPath = decodeURIComponent(url.pathname.slice("/_preview-bundle/".length));
+    const previewDir = path6.join(rootDir, "previews", previewPath);
+    if (!previewDir.startsWith(path6.join(rootDir, "previews"))) {
+      return new Response("Forbidden", { status: 403 });
+    }
+    const state = url.searchParams.get("state");
+    let entryFile = "";
+    if (state) {
+      const stateFiles = [`${state}.tsx`, `${state}.jsx`, `${state}.ts`, `${state}.js`];
+      for (const f of stateFiles) {
+        if (existsSync6(path6.join(previewDir, f))) {
+          entryFile = path6.join(previewDir, f);
+          break;
+        }
+      }
     }
-    if (obj.order && typeof obj.order === "object") {
-      config.order = {};
-      for (const [key, value] of Object.entries(obj.order)) {
-        if (Array.isArray(value)) {
-          config.order[key] = value.filter((v) => typeof v === "string");
+    if (!entryFile) {
+      const defaultFiles = ["index.tsx", "index.ts", "index.jsx", "index.js", "App.tsx", "App.ts"];
+      for (const f of defaultFiles) {
+        if (existsSync6(path6.join(previewDir, f))) {
+          entryFile = path6.join(previewDir, f);
+          break;
         }
       }
     }
-    if (typeof obj.port === "number" && obj.port > 0 && obj.port < 65536) {
-      config.port = obj.port;
+    if (!entryFile) {
+      return new Response(JSON.stringify({ error: "No entry file found" }), {
+        status: 404,
+        headers: { "Content-Type": "application/json" }
+      });
     }
-  }
-  return config;
-}
-// src/config/loader.ts
-import { readFileSync as readFileSync6, existsSync as existsSync7, writeFileSync as writeFileSync4 } from "fs";
-import path7 from "path";
-import yaml2 from "js-yaml";
-function findConfigFile(rootDir) {
-  const yamlPath = path7.join(rootDir, ".prev.yaml");
-  const ymlPath = path7.join(rootDir, ".prev.yml");
-  if (existsSync7(yamlPath))
-    return yamlPath;
-  if (existsSync7(ymlPath))
-    return ymlPath;
-  return null;
-}
-function loadConfig(rootDir) {
-  const configPath = findConfigFile(rootDir);
-  if (!configPath) {
-    return defaultConfig;
-  }
-  try {
-    const content = readFileSync6(configPath, "utf-8");
-    const raw = yaml2.load(content);
-    return validateConfig(raw);
-  } catch (error) {
-    console.warn(`Warning: Failed to parse ${configPath}:`, error);
-    return defaultConfig;
-  }
-}
-function saveConfig(rootDir, config) {
-  const configPath = findConfigFile(rootDir) || path7.join(rootDir, ".prev.yaml");
-  const content = yaml2.dump(config, {
-    indent: 2,
-    lineWidth: -1,
-    quotingType: '"',
-    forceQuotes: false
-  });
-  writeFileSync4(configPath, content, "utf-8");
-}
-function updateOrder(rootDir, pathKey, order) {
-  const config = loadConfig(rootDir);
-  config.order[pathKey] = order;
-  saveConfig(rootDir, config);
+    try {
+      const result = await Bun.build({
+        entrypoints: [entryFile],
+        format: "esm",
+        target: "browser",
+        minify: false,
+        jsx: { runtime: "automatic", importSource: "react", development: false },
+        external: ["react", "react-dom", "react-dom/client", "react/jsx-runtime", "@prev/jsx", "fs", "path", "js-yaml"],
+        define: {
+          "process.env.NODE_ENV": '"production"'
+        },
+        plugins: [{
+          name: "esm-sh-aliases",
+          setup(build) {
+            build.onResolve({ filter: /^react(-dom)?(\/.*)?$/ }, (args) => {
+              const parts = args.path.split("/");
+              const pkg = parts[0];
+              const subpath = parts.slice(1).join("/");
+              const url2 = subpath ? `https://esm.sh/${pkg}@18/${subpath}` : `https://esm.sh/${pkg}@18`;
+              return { path: url2, external: true };
+            });
+          }
+        }]
+      });
+      if (!result.success) {
+        const errors = result.logs.map((l) => l.message).join(`
+`);
+        return new Response(JSON.stringify({ error: errors }), {
+          status: 500,
+          headers: { "Content-Type": "application/json" }
+        });
+      }
+      const code = result.outputs[0] ? await result.outputs[0].text() : "";
+      const bundleTime = Math.round(performance.now() - startTime);
+      return new Response(code, {
+        headers: {
+          "Content-Type": "application/javascript",
+          "X-Bundle-Time": String(bundleTime)
+        }
+      });
+    } catch (err) {
+      console.error("Bundle error:", err);
+      return new Response(JSON.stringify({ error: String(err) }), {
+        status: 500,
+        headers: { "Content-Type": "application/json" }
+      });
+    }
+  };
 }
-// src/utils/debug.ts
-import { mkdirSync as mkdirSync3, writeFileSync as writeFileSync5 } from "fs";
+
+// src/server/routes/preview-config.ts
 import path8 from "path";
+import { existsSync as existsSync8 } from "fs";
 
-class DebugCollector {
-  startTime;
-  files = [];
-  phases = {};
-  currentPhase = "init";
-  rootDir;
-  constructor(rootDir) {
-    this.startTime = performance.now();
-    this.rootDir = rootDir;
-    this.startPhase("init");
-  }
-  startPhase(name) {
-    const now = performance.now();
-    if (this.phases[this.currentPhase] && !this.phases[this.currentPhase].endMs) {
-      this.phases[this.currentPhase].endMs = Math.round(now - this.startTime);
-    }
-    this.currentPhase = name;
-    this.phases[name] = { startMs: Math.round(now - this.startTime) };
-  }
-  endPhase(name) {
-    const phaseName = name || this.currentPhase;
-    const now = performance.now();
-    if (this.phases[phaseName]) {
-      this.phases[phaseName].endMs = Math.round(now - this.startTime);
-    }
-  }
-  trackFile(filePath, event, startTime) {
-    const now = performance.now();
-    this.files.push({
-      path: filePath,
-      event,
-      ms: Math.round(now - startTime),
-      phase: this.currentPhase,
-      timestamp: Math.round(startTime - this.startTime)
-    });
+// src/content/flow-verifier.ts
+import { existsSync as existsSync7, readFileSync as readFileSync5 } from "fs";
+import path7 from "path";
+function extractRegions(source) {
+  const transpiler = new Bun.Transpiler({ loader: "tsx" });
+  const output = transpiler.transformSync(source);
+  const regions = new Set;
+  const re = /"data-region":\s*"([^"]+)"/g;
+  let match;
+  while ((match = re.exec(output)) !== null) {
+    regions.add(match[1]);
+  }
+  return [...regions];
+}
+function verifyFlow(config, rootDir) {
+  const errors = [];
+  const warnings = [];
+  const steps = config.steps ?? [];
+  if (steps.length === 0)
+    return { errors, warnings };
+  const stepIds = new Set;
+  for (const step of steps) {
+    const id = step.id ?? "";
+    if (id && stepIds.has(id)) {
+      errors.push(`Duplicate step ID: "${id}"`);
+    }
+    stepIds.add(id);
+  }
+  const gotoTargets = new Map;
+  for (const step of steps) {
+    const id = step.id ?? "";
+    const screenName = typeof step.screen === "string" ? step.screen : step.screen.ref;
+    const screenDir = path7.join(rootDir, "previews", "screens", screenName);
+    if (!existsSync7(screenDir)) {
+      errors.push(`Screen directory not found: screens/${screenName} (step "${id}")`);
+      continue;
+    }
+    if (step.state) {
+      const stateFile = path7.join(screenDir, `${step.state}.tsx`);
+      const stateFileJsx = path7.join(screenDir, `${step.state}.jsx`);
+      if (!existsSync7(stateFile) && !existsSync7(stateFileJsx)) {
+        errors.push(`State file not found: screens/${screenName}/${step.state}.tsx (step "${id}")`);
+      }
+    }
+    if (step.regions) {
+      const baseName = step.state || "index";
+      const tsxFile = path7.join(screenDir, `${baseName}.tsx`);
+      const jsxFile = path7.join(screenDir, `${baseName}.jsx`);
+      const sourceFile = existsSync7(tsxFile) ? tsxFile : jsxFile;
+      let screenRegions = [];
+      if (existsSync7(sourceFile)) {
+        const source = readFileSync5(sourceFile, "utf-8");
+        screenRegions = extractRegions(source);
+      }
+      const targets = new Set;
+      for (const [regionName, regionDef] of Object.entries(step.regions)) {
+        if (!screenRegions.includes(regionName)) {
+          errors.push(`Region "${regionName}" not found in screens/${screenName}/${baseName}.tsx (step "${id}")`);
+        }
+        if ("goto" in regionDef) {
+          if (!stepIds.has(regionDef.goto)) {
+            errors.push(`Region "${regionName}" in step "${id}" targets nonexistent step "${regionDef.goto}"`);
+          }
+          targets.add(regionDef.goto);
+        } else if ("outcomes" in regionDef) {
+          for (const [, outcome] of Object.entries(regionDef.outcomes)) {
+            if (!stepIds.has(outcome.goto)) {
+              errors.push(`Outcome in region "${regionName}" of step "${id}" targets nonexistent step "${outcome.goto}"`);
+            }
+            targets.add(outcome.goto);
+          }
+        }
+      }
+      gotoTargets.set(id, targets);
+    }
+    if (!step.regions && !step.terminal && step !== steps[0]) {
+      warnings.push(`Step "${id}" is a dead-end (no regions and not terminal)`);
+    }
+  }
+  const firstId = steps[0]?.id ?? "";
+  const reachable = new Set([firstId]);
+  const queue = [firstId];
+  while (queue.length > 0) {
+    const current = queue.shift();
+    const targets = gotoTargets.get(current);
+    if (targets) {
+      for (const target of targets) {
+        if (!reachable.has(target)) {
+          reachable.add(target);
+          queue.push(target);
+        }
+      }
+    }
   }
-  generateSummary() {
-    const byDirectory = {};
-    const byEvent = { resolve: 0, load: 0, transform: 0 };
-    const fileTimeAccum = {};
-    for (const file of this.files) {
-      byEvent[file.event] = (byEvent[file.event] || 0) + 1;
-      fileTimeAccum[file.path] = (fileTimeAccum[file.path] || 0) + file.ms;
-      const relativePath = file.path.startsWith(this.rootDir) ? file.path.slice(this.rootDir.length) : file.path;
-      let dir;
-      if (relativePath.includes("node_modules")) {
-        const nmIndex = relativePath.indexOf("node_modules");
-        const prefix = relativePath.slice(0, nmIndex + "node_modules".length);
-        const afterNm = relativePath.slice(nmIndex + "node_modules/".length);
-        const pkgName = afterNm.split("/")[0].startsWith("@") ? afterNm.split("/").slice(0, 2).join("/") : afterNm.split("/")[0];
-        dir = `${prefix}/${pkgName}`;
-      } else {
-        const parts = relativePath.split("/").filter(Boolean);
-        dir = parts.length > 1 ? `/${parts[0]}` : "/";
+  if (config.transitions) {
+    for (const t of config.transitions) {
+      if (reachable.has(t.from) && !reachable.has(t.to)) {
+        reachable.add(t.to);
+        const q2 = [t.to];
+        while (q2.length > 0) {
+          const c = q2.shift();
+          const tgts = gotoTargets.get(c);
+          if (tgts) {
+            for (const tgt of tgts) {
+              if (!reachable.has(tgt)) {
+                reachable.add(tgt);
+                q2.push(tgt);
+              }
+            }
+          }
+        }
       }
-      byDirectory[dir] = (byDirectory[dir] || 0) + 1;
     }
-    const slowest = Object.entries(fileTimeAccum).map(([path9, totalMs]) => ({ path: path9, totalMs })).sort((a, b) => b.totalMs - a.totalMs).slice(0, 20);
-    return {
-      totalFiles: this.files.length,
-      byDirectory,
-      byEvent,
-      slowest
-    };
   }
-  writeReport() {
-    const now = performance.now();
-    const totalStartupMs = Math.round(now - this.startTime);
-    this.endPhase();
-    const report = {
-      timestamp: new Date().toISOString(),
-      totalStartupMs,
-      phases: this.phases,
-      files: this.files,
-      summary: this.generateSummary()
-    };
-    const debugDir = path8.join(this.rootDir, ".prev-debug");
-    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 = path8.join(debugDir, filename);
-    writeFileSync5(filepath, JSON.stringify(report, null, 2));
-    return filepath;
+  for (const step of steps) {
+    const id = step.id ?? "";
+    if (id && !reachable.has(id) && step !== steps[0]) {
+      warnings.push(`Step "${id}" is unreachable (orphan)`);
+    }
   }
-}
-var currentCollector = null;
-function createDebugCollector(rootDir) {
-  currentCollector = new DebugCollector(rootDir);
-  return currentCollector;
-}
-function getDebugCollector() {
-  return currentCollector;
+  return { errors, warnings };
 }
 
-// src/vite/config.ts
-var TYPE_SINGULAR = {
-  components: "component",
-  screens: "screen",
-  flows: "flow",
-  atlas: "atlas"
-};
-function createFriendlyLogger() {
-  const logger = createLogger("info", { allowClearScreen: false });
-  const hiddenPatterns = [
-    /Re-optimizing dependencies/,
-    /new dependencies optimized/,
-    /optimized dependencies changed/,
-    /Dependencies bundled/,
-    /Pre-bundling dependencies/,
-    /\(client\) \u2728/
-  ];
-  const transformMessage = (msg) => {
-    for (const pattern of hiddenPatterns) {
-      if (pattern.test(msg))
-        return null;
-    }
-    if (msg.includes("hmr update")) {
-      const match = msg.match(/hmr update (.+)/);
-      if (match) {
-        return `  \u21BB Updated: ${match[1]}`;
+// src/server/routes/preview-config.ts
+function createPreviewConfigHandler(rootDir) {
+  return async (req) => {
+    const url = new URL(req.url);
+    if (!url.pathname.startsWith("/_preview-config/"))
+      return null;
+    const pathAfterConfig = decodeURIComponent(url.pathname.slice("/_preview-config/".length));
+    const previewsDir = path8.join(rootDir, "previews");
+    const multiTypeMatch = pathAfterConfig.match(/^(components|screens|flows)\/(.+)$/);
+    if (multiTypeMatch) {
+      const [, type, name] = multiTypeMatch;
+      const previewDir = path8.join(previewsDir, type, name);
+      if (!previewDir.startsWith(previewsDir)) {
+        return new Response("Forbidden", { status: 403 });
+      }
+      if (existsSync8(previewDir)) {
+        try {
+          if (type === "flows") {
+            const newConfigYaml = path8.join(previewDir, "config.yaml");
+            const newConfigYml = path8.join(previewDir, "config.yml");
+            const newConfigPath = existsSync8(newConfigYaml) ? newConfigYaml : newConfigYml;
+            if (existsSync8(newConfigPath)) {
+              const result = await parseFlowConfig(newConfigPath, {
+                injectId: true,
+                injectKind: true,
+                folderName: name
+              });
+              if (result.data) {
+                const verification = verifyFlow(result.data, rootDir);
+                return Response.json({
+                  name: result.data.title || name,
+                  description: result.data.description,
+                  steps: result.data.steps || [],
+                  _verification: verification
+                });
+              }
+            }
+            const configPathYaml = path8.join(previewDir, "index.yaml");
+            const configPathYml = path8.join(previewDir, "index.yml");
+            const configPath = existsSync8(configPathYaml) ? configPathYaml : configPathYml;
+            if (existsSync8(configPath)) {
+              const flow = await parseFlowDefinition(configPath);
+              if (flow) {
+                return Response.json(flow);
+              }
+            }
+          } else {
+            const config = await buildPreviewConfig(previewDir);
+            return Response.json(config);
+          }
+          return Response.json({ error: "Invalid config format" }, { status: 400 });
+        } catch (err) {
+          console.error("Error building preview config:", err);
+          return Response.json({ error: String(err) }, { status: 500 });
+        }
+      }
+    } else {
+      const previewDir = path8.resolve(previewsDir, pathAfterConfig);
+      if (!previewDir.startsWith(previewsDir)) {
+        return new Response("Forbidden", { status: 403 });
+      }
+      if (existsSync8(previewDir)) {
+        try {
+          const config = await buildPreviewConfig(previewDir);
+          return Response.json(config);
+        } catch (err) {
+          console.error("Error building preview config:", err);
+          return Response.json({ error: String(err) }, { status: 500 });
+        }
       }
     }
-    if (msg.includes("page reload")) {
-      return "  \u21BB Page reloaded";
+    return null;
+  };
+}
+
+// src/server/routes/jsx-bundle.ts
+import path9 from "path";
+function createJsxBundleHandler(cliRoot) {
+  let cachedBundle = null;
+  const srcRoot = path9.join(cliRoot, "src");
+  return async (req) => {
+    const url = new URL(req.url);
+    if (url.pathname !== "/_prev/jsx.js")
+      return null;
+    try {
+      if (!cachedBundle) {
+        const jsxEntry = path9.join(srcRoot, "jsx/index.ts");
+        const result = await Bun.build({
+          entrypoints: [jsxEntry],
+          format: "esm",
+          target: "browser",
+          minify: false,
+          jsx: { runtime: "automatic", importSource: "react", development: false },
+          external: ["react", "react-dom", "react/jsx-runtime", "zod"],
+          define: {
+            "process.env.NODE_ENV": '"production"'
+          }
+        });
+        if (result.success && result.outputs[0]) {
+          let code = await result.outputs[0].text();
+          code = code.replace(/from\s+['"]react\/jsx-runtime['"]/g, 'from "https://esm.sh/react@18/jsx-runtime"').replace(/from\s+['"]react['"]/g, 'from "https://esm.sh/react@18"').replace(/from\s+['"]react-dom['"]/g, 'from "https://esm.sh/react-dom@18"').replace(/from\s+['"]zod['"]/g, 'from "https://esm.sh/zod"');
+          cachedBundle = code;
+        }
+      }
+      if (cachedBundle) {
+        return new Response(cachedBundle, {
+          headers: {
+            "Content-Type": "application/javascript",
+            "Cache-Control": "no-cache"
+          }
+        });
+      }
+      return new Response("Failed to bundle jsx primitives", { status: 500 });
+    } catch (err) {
+      console.error("Error bundling jsx:", err);
+      return new Response(String(err), { status: 500 });
     }
-    return msg;
   };
-  return {
-    ...logger,
-    info(msg, options) {
-      const transformed = transformMessage(msg);
-      if (transformed)
-        logger.info(transformed, options);
-    },
-    warn(msg, options) {
-      if (!hiddenPatterns.some((p) => p.test(msg))) {
-        logger.warn(msg, options);
+}
+
+// src/server/routes/component-bundle.ts
+import path10 from "path";
+import { existsSync as existsSync9 } from "fs";
+function createComponentBundleHandler(rootDir) {
+  const componentCache = new Map;
+  return async (req) => {
+    const url = new URL(req.url);
+    const match = url.pathname.match(/^\/_prev\/components\/([^/]+)\.js$/);
+    if (!match)
+      return null;
+    const componentName = match[1];
+    const componentEntry = path10.join(rootDir, "previews/components", componentName, "index.tsx");
+    if (!existsSync9(componentEntry)) {
+      return new Response(`Component not found: ${componentName}`, { status: 404 });
+    }
+    try {
+      let bundledCode = componentCache.get(componentName);
+      if (!bundledCode) {
+        const result = await Bun.build({
+          entrypoints: [componentEntry],
+          format: "esm",
+          target: "browser",
+          minify: false,
+          jsx: { runtime: "automatic", importSource: "react", development: false },
+          external: ["react", "react-dom", "react/jsx-runtime", "@prev/jsx"],
+          define: {
+            "process.env.NODE_ENV": '"production"'
+          }
+        });
+        if (result.success && result.outputs[0]) {
+          let code = await result.outputs[0].text();
+          const origin = req.headers.get("origin") || "";
+          code = code.replace(/from\s+['"]react\/jsx-runtime['"]/g, 'from "https://esm.sh/react@18/jsx-runtime"').replace(/from\s+['"]react['"]/g, 'from "https://esm.sh/react@18"').replace(/from\s+['"]react-dom['"]/g, 'from "https://esm.sh/react-dom@18"').replace(/from\s+['"]@prev\/jsx['"]/g, `from "${origin}/_prev/jsx.js"`);
+          bundledCode = code;
+          componentCache.set(componentName, code);
+        }
       }
-    },
-    warnOnce(msg, options) {
-      if (!hiddenPatterns.some((p) => p.test(msg))) {
-        logger.warnOnce(msg, options);
+      if (bundledCode) {
+        return new Response(bundledCode, {
+          headers: {
+            "Content-Type": "application/javascript",
+            "Cache-Control": "no-cache"
+          }
+        });
       }
-    },
-    error(msg, options) {
-      logger.error(msg, options);
-    },
-    clearScreen() {},
-    hasErrorLogged(err) {
-      return logger.hasErrorLogged(err);
-    },
-    hasWarned: false
+      return new Response(`Failed to bundle component: ${componentName}`, { status: 500 });
+    } catch (err) {
+      console.error(`Error bundling component ${componentName}:`, err);
+      return new Response(String(err), { status: 500 });
+    }
   };
 }
-function findCliRoot2() {
-  let dir = path9.dirname(fileURLToPath3(import.meta.url));
+
+// src/server/routes/tokens.ts
+import path11 from "path";
+import { existsSync as existsSync10 } from "fs";
+function createTokensHandler(rootDir) {
+  let cachedTokens = null;
+  return async (req) => {
+    const url = new URL(req.url);
+    if (url.pathname !== "/_prev/tokens.json")
+      return null;
+    try {
+      if (!cachedTokens) {
+        const userTokensPath = path11.join(rootDir, "previews/tokens.yaml");
+        const options = existsSync10(userTokensPath) ? { userTokensPath } : {};
+        cachedTokens = resolveTokens(options);
+      }
+      return Response.json(cachedTokens, {
+        headers: { "Cache-Control": "no-cache" }
+      });
+    } catch (err) {
+      console.error("Error serving tokens:", err);
+      return Response.json({ error: String(err) }, { status: 500 });
+    }
+  };
+}
+
+// src/server/routes/og-image.ts
+var TYPE_ICONS = {
+  component: "\u25C7",
+  screen: "\u25A3",
+  flow: "\u21E2"
+};
+var TYPE_COLORS = {
+  component: "#6366f1",
+  screen: "#8b5cf6",
+  flow: "#06b6d4"
+};
+function generateOgImage(opts) {
+  const icon = TYPE_ICONS[opts.type] || "\u25C7";
+  const color = TYPE_COLORS[opts.type] || "#6366f1";
+  const subtitle = opts.step ? `Step: ${opts.step}` : opts.state ? `State: ${opts.state}` : opts.type;
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#1a1a2e"/>
+      <stop offset="100%" style="stop-color:#16213e"/>
+    </linearGradient>
+  </defs>
+  <rect width="1200" height="630" fill="url(#bg)"/>
+  <rect x="60" y="60" width="1080" height="510" rx="24" fill="#1e1e3f" stroke="${color}" stroke-width="2" opacity="0.6"/>
+  <text x="120" y="260" font-family="system-ui,sans-serif" font-size="96" fill="${color}">${icon}</text>
+  <text x="120" y="380" font-family="system-ui,sans-serif" font-size="48" font-weight="700" fill="#e2e8f0">${escapeXml(opts.title)}</text>
+  <text x="120" y="430" font-family="system-ui,sans-serif" font-size="24" fill="#94a3b8">${escapeXml(subtitle)}</text>
+  ${opts.description ? `<text x="120" y="480" font-family="system-ui,sans-serif" font-size="20" fill="#64748b">${escapeXml(opts.description.slice(0, 80))}</text>` : ""}
+  <text x="1080" y="530" font-family="system-ui,sans-serif" font-size="18" fill="#475569" text-anchor="end">prev-cli</text>
+</svg>`;
+}
+function escapeXml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function handleOgImageRequest(req, previewUnits) {
+  const url = new URL(req.url);
+  if (!url.pathname.startsWith("/_og/"))
+    return null;
+  const path12 = url.pathname.slice(5);
+  const state = url.searchParams.get("state") || undefined;
+  const step = url.searchParams.get("step") || undefined;
+  const unit = previewUnits.find((u) => `${u.type}s/${u.name}` === path12 || u.name === path12);
+  const title = unit?.config?.title || path12.split("/").pop() || "Preview";
+  const type = unit?.type || path12.split("/")[0]?.replace(/s$/, "") || "preview";
+  const svg = generateOgImage({
+    title,
+    type,
+    state,
+    step,
+    description: unit?.config?.description
+  });
+  return new Response(svg, {
+    headers: {
+      "Content-Type": "image/svg+xml",
+      "Cache-Control": "public, max-age=3600"
+    }
+  });
+}
+
+// src/server/dev.ts
+function findCliRoot() {
+  let dir = path12.dirname(fileURLToPath(import.meta.url));
   for (let i = 0;i < 10; i++) {
-    const pkgPath = path9.join(dir, "package.json");
-    if (existsSync8(pkgPath)) {
+    const pkgPath = path12.join(dir, "package.json");
+    if (existsSync11(pkgPath)) {
       try {
-        const pkg = JSON.parse(readFileSync7(pkgPath, "utf-8"));
-        if (pkg.name === "prev-cli") {
+        const pkg = JSON.parse(readFileSync6(pkgPath, "utf-8"));
+        if (pkg.name === "prev-cli")
           return dir;
-        }
       } catch {}
     }
-    const parent = path9.dirname(dir);
+    const parent = path12.dirname(dir);
     if (parent === dir)
       break;
     dir = parent;
   }
-  return path9.dirname(path9.dirname(fileURLToPath3(import.meta.url)));
+  return path12.dirname(path12.dirname(fileURLToPath(import.meta.url)));
 }
-function findNodeModules(cliRoot2) {
-  const localNodeModules = path9.join(cliRoot2, "node_modules");
-  if (existsSync8(path9.join(localNodeModules, "react"))) {
-    return localNodeModules;
+var cliRoot = findCliRoot();
+var srcRoot = path12.join(cliRoot, "src");
+async function buildThemeApp(rootDir, include, config) {
+  const entryPath = path12.join(srcRoot, "theme/entry.tsx");
+  const plugins = [
+    virtualModulesPlugin({ rootDir, include, config }),
+    mdxPlugin({ rootDir }),
+    aliasesPlugin({ cliRoot })
+  ];
+  const result = await Bun.build({
+    entrypoints: [entryPath],
+    format: "esm",
+    target: "browser",
+    plugins,
+    jsx: { runtime: "automatic", importSource: "react" },
+    define: {
+      "import.meta.env.DEV": "true",
+      "import.meta.env.BASE_URL": '"/"',
+      "process.env.NODE_ENV": '"development"'
+    }
+  });
+  if (!result.success) {
+    const errors = result.logs.filter((l) => l.level === "error").map((l) => l.message);
+    return { js: "", css: "", success: false, errors };
+  }
+  const jsOutput = result.outputs.find((o) => o.path.endsWith(".js"));
+  const cssOutput = result.outputs.find((o) => o.path.endsWith(".css"));
+  return {
+    js: jsOutput ? await jsOutput.text() : "",
+    css: cssOutput ? await cssOutput.text() : "",
+    success: true,
+    errors: []
+  };
+}
+var HTML_SHELL = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Documentation</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="preload" href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=IBM+Plex+Mono:wght@400;500&display=swap" as="style" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=IBM+Plex+Mono:wght@400;500&display=swap" />
+  <link rel="stylesheet" href="/__prev/app.css" />
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/__prev/app.js"></script>
+  <script>
+    if (typeof EventSource !== 'undefined') {
+      var es = new EventSource('/__prev/events');
+      es.onmessage = function() { location.reload(); };
+    }
+  </script>
+</body>
+</html>`;
+async function startDevServer(options) {
+  const { rootDir, port, include } = options;
+  const config = options.config || loadConfig(rootDir);
+  console.log("  Building theme...");
+  let appBundle = await buildThemeApp(rootDir, include, config);
+  if (!appBundle.success) {
+    console.error("  Build errors:", appBundle.errors.join(`
+`));
+  } else {
+    console.log("  \u2713 Theme built");
+  }
+  const sseControllers = new Set;
+  const encoder = new TextEncoder;
+  function notifyReload() {
+    const msg = encoder.encode(`data: reload
+
+`);
+    for (const ctrl of sseControllers) {
+      try {
+        ctrl.enqueue(msg);
+      } catch {
+        sseControllers.delete(ctrl);
+      }
+    }
+  }
+  const previewBundleHandler = createPreviewBundleHandler(rootDir);
+  const previewConfigHandler = createPreviewConfigHandler(rootDir);
+  const jsxBundleHandler = createJsxBundleHandler(cliRoot);
+  const componentBundleHandler = createComponentBundleHandler(rootDir);
+  const tokensHandler = createTokensHandler(rootDir);
+  const previewRuntimePath = path12.join(srcRoot, "preview-runtime/fast-template.html");
+  const server = Bun.serve({
+    port,
+    async fetch(req) {
+      const url = new URL(req.url);
+      const pathname = url.pathname;
+      if (pathname === "/__prev/events") {
+        let ctrl;
+        const stream = new ReadableStream({
+          start(controller) {
+            ctrl = controller;
+            sseControllers.add(controller);
+          },
+          cancel() {
+            sseControllers.delete(ctrl);
+          }
+        });
+        return new Response(stream, {
+          headers: {
+            "Content-Type": "text/event-stream",
+            "Cache-Control": "no-cache"
+          }
+        });
+      }
+      if (pathname === "/__prev/app.js") {
+        return new Response(appBundle.js, {
+          headers: { "Content-Type": "application/javascript" }
+        });
+      }
+      if (pathname === "/__prev/app.css") {
+        return new Response(appBundle.css, {
+          headers: { "Content-Type": "text/css" }
+        });
+      }
+      if (pathname === "/__prev/config" && req.method === "POST") {
+        try {
+          const body = await req.json();
+          updateOrder(rootDir, body.path, body.order);
+          return Response.json({ success: true });
+        } catch (e) {
+          return Response.json({ error: String(e) }, { status: 400 });
+        }
+      }
+      const bundleResponse = await previewBundleHandler(req);
+      if (bundleResponse)
+        return bundleResponse;
+      const configResponse = await previewConfigHandler(req);
+      if (configResponse)
+        return configResponse;
+      const jsxResponse = await jsxBundleHandler(req);
+      if (jsxResponse)
+        return jsxResponse;
+      const componentResponse = await componentBundleHandler(req);
+      if (componentResponse)
+        return componentResponse;
+      const tokensResponse = await tokensHandler(req);
+      if (tokensResponse)
+        return tokensResponse;
+      const ogResponse = handleOgImageRequest(req, []);
+      if (ogResponse)
+        return ogResponse;
+      if (pathname === "/_prev/region-bridge.js") {
+        const { REGION_BRIDGE_SCRIPT: REGION_BRIDGE_SCRIPT2 } = await Promise.resolve().then(() => exports_region_bridge);
+        return new Response(REGION_BRIDGE_SCRIPT2, {
+          headers: { "Content-Type": "application/javascript" }
+        });
+      }
+      if (pathname === "/_preview-runtime") {
+        if (existsSync11(previewRuntimePath)) {
+          const html = readFileSync6(previewRuntimePath, "utf-8");
+          return new Response(html, {
+            headers: { "Content-Type": "text/html" }
+          });
+        }
+      }
+      if (pathname.startsWith("/_preview/")) {
+        const relativePath = pathname.slice("/_preview/".length);
+        const previewsDir2 = path12.join(rootDir, "previews");
+        const filePath = path12.resolve(previewsDir2, relativePath);
+        if (filePath.startsWith(previewsDir2) && existsSync11(filePath) && statSync(filePath).isFile()) {
+          return new Response(Bun.file(filePath));
+        }
+      }
+      if (!pathname.includes(".") && !pathname.startsWith("/@") && !pathname.startsWith("/__") && !pathname.startsWith("/_preview") && !pathname.startsWith("/_prev")) {
+        if (pathname.startsWith("/previews/") && pathname !== "/previews") {
+          const previewPath = pathname.slice("/previews/".length);
+          const searchParams = new URL(req.url).searchParams;
+          const ogState = searchParams.get("state");
+          const ogStep = searchParams.get("step");
+          const ogTitle = previewPath.split("/").pop() || "Preview";
+          const ogParams = [
+            ogState ? `state=${ogState}` : "",
+            ogStep ? `step=${ogStep}` : ""
+          ].filter(Boolean).join("&");
+          const ogImageUrl = `/_og/${previewPath}${ogParams ? `?${ogParams}` : ""}`;
+          const ogHtml = HTML_SHELL.replace("<title>Documentation</title>", `<title>${ogTitle} - Preview</title>
+  <meta property="og:title" content="${ogTitle}" />
+  <meta property="og:description" content="${ogState ? `State: ${ogState}` : ogStep ? `Step: ${ogStep}` : "Preview"}" />
+  <meta property="og:image" content="${ogImageUrl}" />
+  <meta property="og:type" content="website" />
+  <meta name="twitter:card" content="summary_large_image" />`);
+          return new Response(ogHtml, {
+            headers: { "Content-Type": "text/html" }
+          });
+        }
+        return new Response(HTML_SHELL, {
+          headers: { "Content-Type": "text/html" }
+        });
+      }
+      return new Response("Not Found", { status: 404 });
+    }
+  });
+  const { watch } = await import("fs");
+  const watchers = [];
+  let rebuildTimer = null;
+  async function rebuild() {
+    appBundle = await buildThemeApp(rootDir, include, config);
+    if (appBundle.success) {
+      notifyReload();
+    }
+  }
+  function scheduleRebuild() {
+    if (rebuildTimer)
+      clearTimeout(rebuildTimer);
+    rebuildTimer = setTimeout(rebuild, 150);
+  }
+  const previewsDir = path12.join(rootDir, "previews");
+  if (existsSync11(previewsDir)) {
+    watchers.push(watch(previewsDir, { recursive: true }, (_, filename) => {
+      if (filename && /\.(tsx|ts|jsx|js|css|yaml|yml|mdx|md|html)$/.test(filename)) {
+        scheduleRebuild();
+      }
+    }));
   }
-  let dir = cliRoot2;
+  return {
+    server,
+    port: server.port,
+    url: `http://localhost:${server.port}/`,
+    stop: () => {
+      if (rebuildTimer)
+        clearTimeout(rebuildTimer);
+      watchers.forEach((w) => w.close());
+      server.stop();
+    }
+  };
+}
+
+// src/server/build.ts
+import path14 from "path";
+import { existsSync as existsSync15, readFileSync as readFileSync10, writeFileSync as writeFileSync5, mkdirSync as mkdirSync3, copyFileSync } from "fs";
+import { fileURLToPath as fileURLToPath3 } from "url";
+
+// src/preview-runtime/vendors.ts
+import { join, dirname } from "path";
+import { mkdtempSync, writeFileSync as writeFileSync2, rmSync, existsSync as existsSync12, readFileSync as readFileSync7 } from "fs";
+import { fileURLToPath as fileURLToPath2 } from "url";
+import { tmpdir } from "os";
+function findCliRoot2() {
+  let dir = dirname(fileURLToPath2(import.meta.url));
   for (let i = 0;i < 10; i++) {
-    const parent = path9.dirname(dir);
+    const pkgPath = join(dir, "package.json");
+    if (existsSync12(pkgPath)) {
+      try {
+        const pkg = JSON.parse(readFileSync7(pkgPath, "utf-8"));
+        if (pkg.name === "prev-cli")
+          return dir;
+      } catch {}
+    }
+    const parent = dirname(dir);
     if (parent === dir)
       break;
-    if (path9.basename(parent) === "node_modules" && existsSync8(path9.join(parent, "react"))) {
-      return parent;
-    }
     dir = parent;
   }
-  return localNodeModules;
+  return dirname(dirname(fileURLToPath2(import.meta.url)));
 }
 var cliRoot2 = findCliRoot2();
-var cliNodeModules = findNodeModules(cliRoot2);
-var srcRoot2 = path9.join(cliRoot2, "src");
-async function createViteConfig(options) {
-  const { rootDir, mode, port, include, base, debug } = options;
-  const config = loadConfig(rootDir);
-  const debugCollector = debug ? createDebugCollector(rootDir) : null;
-  if (debugCollector) {
-    debugCollector.startPhase("configLoad");
+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 { jsxDEV } from 'react/jsx-dev-runtime'
+      export { React, ReactDOM, createRoot }
+      // Re-export React hooks as named exports (preview code imports them directly)
+      export {
+        useState, useEffect, useCallback, useMemo, useRef,
+        useContext, useReducer, useLayoutEffect, useInsertionEffect,
+        useTransition, useDeferredValue, useId, useSyncExternalStore,
+        useImperativeHandle, useDebugValue, memo, forwardRef,
+        createContext, createRef, lazy, Suspense, startTransition,
+        Children, cloneElement, isValidElement, createElement
+      } from 'react'
+      export default React
+    `;
+    const tempDir = mkdtempSync(join(cliRoot2, ".tmp-vendor-"));
+    const entryPath = join(tempDir, "entry.ts");
+    try {
+      writeFileSync2(entryPath, entryCode);
+      const result = await Bun.build({
+        entrypoints: [entryPath],
+        format: "esm",
+        target: "browser",
+        minify: true
+      });
+      if (!result.success) {
+        const errors = result.logs.filter((l) => l.level === "error").map((l) => l.message).join("; ");
+        return { success: false, code: "", error: errors || "Build failed" };
+      }
+      const jsFile = result.outputs.find((f) => f.path.endsWith(".js")) || result.outputs[0];
+      if (!jsFile) {
+        return { success: false, code: "", error: "No output generated" };
+      }
+      return { success: true, code: await jsFile.text() };
+    } finally {
+      rmSync(tempDir, { recursive: true, force: true });
+    }
+  } catch (err) {
+    return {
+      success: false,
+      code: "",
+      error: err instanceof Error ? err.message : String(err)
+    };
   }
-  const globalCacheDir = path9.join(os.homedir(), ".cache/prev/deps");
-  return {
-    root: rootDir,
-    mode,
-    cacheDir: globalCacheDir,
-    base: base || "/",
-    customLogger: createFriendlyLogger(),
-    logLevel: mode === "production" ? "silent" : "info",
-    envDir: cliRoot2,
-    envPrefix: "PREV_",
-    plugins: [
-      ...debugCollector ? [debugPlugin(debugCollector)] : [],
-      mdx({
-        remarkPlugins: [remarkGfm],
-        rehypePlugins: [rehypeHighlight],
-        providerImportSource: "@mdx-js/react",
-        development: false,
-        include: [
-          path9.join(rootDir, "**/*.md"),
-          path9.join(rootDir, "**/*.mdx")
-        ],
-        exclude: [
-          "**/node_modules/**",
-          "**/.git/**"
-        ]
-      }),
-      react(),
-      createConfigPlugin(config),
-      pagesPlugin(rootDir, { include }),
-      entryPlugin(rootDir),
-      previewsPlugin(rootDir),
-      tokensPlugin(rootDir),
-      {
-        name: "prev-user-tokens",
-        configResolved() {
-          const userTokensPath = path9.join(rootDir, "previews/tokens.yaml");
-          if (existsSync8(userTokensPath)) {
-            globalThis.__PREV_USER_TOKENS_PATH = userTokensPath;
-          } else {
-            globalThis.__PREV_USER_TOKENS_PATH = null;
+}
+async function buildJsxBundle(vendorPath) {
+  try {
+    const minimalJsx = `
+      import * as React from 'react'
+
+      // Default token values for standalone preview rendering
+      const defaultTokens = {
+        background: {
+          primary: '#3b82f6',
+          secondary: '#f1f5f9',
+          destructive: '#ef4444',
+          muted: '#f1f5f9',
+          accent: '#f1f5f9',
+          transparent: 'transparent',
+        },
+        color: {
+          'primary-foreground': '#ffffff',
+          'secondary-foreground': '#0f172a',
+          'destructive-foreground': '#ffffff',
+          'muted-foreground': '#64748b',
+          'accent-foreground': '#0f172a',
+          foreground: '#0f172a',
+        },
+        spacing: {
+          xs: '4px',
+          sm: '8px',
+          md: '12px',
+          lg: '16px',
+          xl: '24px',
+        },
+        radius: {
+          none: '0',
+          sm: '4px',
+          md: '6px',
+          lg: '8px',
+          full: '9999px',
+        },
+        'typography.size': {
+          xs: '12px',
+          sm: '14px',
+          base: '16px',
+          lg: '18px',
+          xl: '20px',
+        },
+        'typography.weight': {
+          normal: '400',
+          medium: '500',
+          semibold: '600',
+          bold: '700',
+        },
+      }
+
+      // Token resolution
+      let tokensConfig = null
+      export function setTokensConfig(config) { tokensConfig = config }
+
+      function resolveToken(category, token) {
+        // Check custom config first, then defaults
+        const config = tokensConfig || defaultTokens
+        const cat = config[category]
+        return cat?.[token] ?? token
+      }
+
+      // VNode type
+      export class VNode {
+        constructor(type, props, children) {
+          this.type = type
+          this.props = props || {}
+          this.children = children || []
+        }
+      }
+
+      // Primitives - return VNodes
+      export function Box(props) { return new VNode('Box', props, props.children ? [props.children] : []) }
+      export function Text(props) { return new VNode('Text', props, props.children ? [props.children] : []) }
+      export function Col(props) { return new VNode('Col', props, props.children || []) }
+      export function Row(props) { return new VNode('Row', props, props.children || []) }
+      export function Spacer(props) { return new VNode('Spacer', props, []) }
+      export function Slot(props) { return new VNode('Slot', props, []) }
+      export function Icon(props) { return new VNode('Icon', props, []) }
+      export function Image(props) { return new VNode('Image', props, []) }
+      export const Fragment = React.Fragment
+
+      // Convert VNode to React element
+      export function toReact(vnode) {
+        if (!vnode || typeof vnode !== 'object') return vnode
+        if (!(vnode instanceof VNode)) return vnode
+
+        const { type, props, children } = vnode
+        const style = {}
+
+        // Map props to styles
+        if (props.bg) style.backgroundColor = resolveToken('background', props.bg)
+        if (props.padding) style.padding = resolveToken('spacing', props.padding)
+        if (props.radius) style.borderRadius = resolveToken('radius', props.radius)
+        if (props.color) style.color = resolveToken('color', props.color)
+        if (props.size) style.fontSize = resolveToken('typography.size', props.size)
+        if (props.weight) style.fontWeight = resolveToken('typography.weight', props.weight)
+        if (props.gap) style.gap = resolveToken('spacing', props.gap)
+
+        // Layout types
+        if (type === 'Col') { style.display = 'flex'; style.flexDirection = 'column' }
+        if (type === 'Row') { style.display = 'flex'; style.flexDirection = 'row' }
+        if (type === 'Spacer') { style.flex = 1 }
+
+        const childElements = children.map(c => toReact(c))
+
+        return React.createElement('div', { style }, ...childElements)
+      }
+    `;
+    const tempDir = mkdtempSync(join(tmpdir(), "prev-jsx-"));
+    const entryPath = join(tempDir, "entry.ts");
+    try {
+      writeFileSync2(entryPath, minimalJsx);
+      const result = await Bun.build({
+        entrypoints: [entryPath],
+        format: "esm",
+        target: "browser",
+        minify: true,
+        plugins: [
+          {
+            name: "jsx-externals",
+            setup(build) {
+              build.onResolve({ filter: /^react(-dom)?(\/.*)?$/ }, () => {
+                return { path: vendorPath, external: true };
+              });
+            }
           }
+        ]
+      });
+      if (!result.success) {
+        const errors = result.logs.filter((l) => l.level === "error").map((l) => l.message).join("; ");
+        return { success: false, code: "", error: errors || "Build failed" };
+      }
+      const jsFile = result.outputs.find((f) => f.path.endsWith(".js")) || result.outputs[0];
+      if (!jsFile) {
+        return { success: false, code: "", error: "No output generated" };
+      }
+      let code = await jsFile.text();
+      code = code.replace(/from\s*["']react["']/g, `from"${vendorPath}"`);
+      return { success: true, code };
+    } finally {
+      rmSync(tempDir, { recursive: true, force: true });
+    }
+  } catch (err) {
+    return {
+      success: false,
+      code: "",
+      error: err instanceof Error ? err.message : String(err)
+    };
+  }
+}
+
+// src/preview-runtime/tailwind.ts
+var {$ } = globalThis.Bun;
+import { mkdtempSync as mkdtempSync2, mkdirSync, writeFileSync as writeFileSync3, readFileSync as readFileSync8, rmSync as rmSync2, existsSync as existsSync13 } from "fs";
+import { join as join2, dirname as dirname2 } from "path";
+import { tmpdir as tmpdir2 } from "os";
+function findTailwindBin() {
+  try {
+    const tailwindPkg = __require.resolve("tailwindcss/package.json");
+    const tailwindDir = dirname2(tailwindPkg);
+    const binPath = join2(tailwindDir, "lib/cli.js");
+    if (existsSync13(binPath))
+      return binPath;
+  } catch {}
+  return "bunx tailwindcss@3";
+}
+var tailwindCmd = findTailwindBin();
+async function compileTailwind(files) {
+  const tempDir = mkdtempSync2(join2(tmpdir2(), "prev-tailwind-"));
+  try {
+    for (const file of files) {
+      const filePath = join2(tempDir, file.path);
+      const parentDir = dirname2(filePath);
+      mkdirSync(parentDir, { recursive: true });
+      writeFileSync3(filePath, file.content);
+    }
+    const configContent = `
+      module.exports = {
+        content: [${JSON.stringify(tempDir + "/**/*.{tsx,jsx,ts,js,html}")}],
+      }
+    `;
+    const configPath = join2(tempDir, "tailwind.config.cjs");
+    writeFileSync3(configPath, configContent);
+    const inputCss = `
+      @tailwind base;
+      @tailwind components;
+      @tailwind utilities;
+    `;
+    const inputPath = join2(tempDir, "input.css");
+    writeFileSync3(inputPath, inputCss);
+    const outputPath = join2(tempDir, "output.css");
+    if (tailwindCmd.startsWith("bunx")) {
+      await $`bunx tailwindcss@3 -c ${configPath} -i ${inputPath} -o ${outputPath} --minify`.quiet();
+    } else {
+      await $`bun ${tailwindCmd} -c ${configPath} -i ${inputPath} -o ${outputPath} --minify`.quiet();
+    }
+    const css = readFileSync8(outputPath, "utf-8");
+    return { success: true, css };
+  } catch (err) {
+    return {
+      success: false,
+      css: "",
+      error: err instanceof Error ? err.message : String(err)
+    };
+  } finally {
+    rmSync2(tempDir, { recursive: true, force: true });
+  }
+}
+
+// src/preview-runtime/build-optimized.ts
+import { existsSync as existsSync14, readFileSync as readFileSync9, mkdtempSync as mkdtempSync3, writeFileSync as writeFileSync4, rmSync as rmSync3, mkdirSync as mkdirSync2, statSync as statSync2 } from "fs";
+import path13 from "path";
+import { tmpdir as tmpdir3 } from "os";
+function existsAsFile(p) {
+  try {
+    return statSync2(p).isFile();
+  } catch {
+    return false;
+  }
+}
+async function buildOptimizedPreview(config, options) {
+  try {
+    const virtualFs = {};
+    const resolveDir = options.resolveDir || "/";
+    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 = [];
+    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 tempDir = mkdtempSync3(path13.join(tmpdir3(), "prev-optimized-"));
+    const entryPath = path13.join(tempDir, "__entry.tsx");
+    try {
+      writeFileSync4(entryPath, entryCode);
+      for (const [filePath, file] of Object.entries(virtualFs)) {
+        const targetPath = path13.join(tempDir, filePath);
+        const dir = path13.dirname(targetPath);
+        if (!existsSync14(dir)) {
+          mkdirSync2(dir, { recursive: true });
         }
-      },
-      {
-        name: "prev-config-api",
-        configureServer(server) {
-          server.middlewares.use("/__prev/config", async (req, res) => {
-            if (req.method === "POST") {
-              let body = "";
-              req.on("data", (chunk) => {
-                body += chunk;
+        writeFileSync4(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) {
+              build.onResolve({ filter: new RegExp(options.vendorPath.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")) }, (args) => {
+                return { path: args.path, external: true };
               });
-              req.on("end", () => {
-                try {
-                  const { path: pathKey, order } = JSON.parse(body);
-                  updateOrder(rootDir, pathKey, order);
-                  res.statusCode = 200;
-                  res.end(JSON.stringify({ success: true }));
-                } catch (e) {
-                  res.statusCode = 400;
-                  res.end(JSON.stringify({ error: String(e) }));
-                }
+              build.onResolve({ filter: /^react(-dom)?(\/.*)?$/ }, () => {
+                return { path: options.vendorPath, external: true };
               });
-              return;
-            }
-            res.statusCode = 405;
-            res.end();
-          });
-        }
-      },
-      {
-        name: "prev-spa-fallback",
-        configureServer(server) {
-          return () => {
-            server.middlewares.use((req, res, next) => {
-              const urlPath = req.url?.split("?")[0] || "";
-              if (urlPath.startsWith("/__") || urlPath.startsWith("/@") || urlPath.startsWith("/node_modules") || urlPath.includes(".")) {
-                return next();
-              }
-              const indexPath = path9.join(srcRoot2, "theme/index.html");
-              if (existsSync8(indexPath)) {
-                server.transformIndexHtml(req.url, readFileSync7(indexPath, "utf-8")).then((html) => {
-                  res.setHeader("Content-Type", "text/html");
-                  res.end(html);
-                }).catch(next);
-                return;
-              }
-              next();
-            });
-          };
-        }
-      },
-      {
-        name: "prev-jsx-bundle",
-        configureServer(server) {
-          let cachedBundle = null;
-          server.middlewares.use("/_prev/jsx.js", async (req, res, next) => {
-            if (req.method !== "GET")
-              return next();
-            try {
-              if (!cachedBundle) {
-                const jsxEntry = path9.join(srcRoot2, "jsx/index.ts");
-                const result = await viteBuild({
-                  logLevel: "silent",
-                  define: {
-                    "process.env.NODE_ENV": '"production"'
-                  },
-                  esbuild: {
-                    jsx: "automatic",
-                    jsxImportSource: "react",
-                    jsxDev: false
-                  },
-                  build: {
-                    write: false,
-                    lib: {
-                      entry: jsxEntry,
-                      formats: ["es"],
-                      fileName: "jsx"
-                    },
-                    rollupOptions: {
-                      external: ["react", "react-dom", "react/jsx-runtime", "zod"],
-                      output: {
-                        globals: {
-                          react: "React",
-                          "react-dom": "ReactDOM"
-                        }
-                      }
-                    },
-                    minify: false
-                  }
-                });
-                const output = Array.isArray(result) ? result[0] : result;
-                if (!("output" in output)) {
-                  throw new Error("Unexpected build result type");
-                }
-                const jsFile = output.output.find((f) => f.type === "chunk");
-                if (jsFile && "code" in jsFile) {
-                  cachedBundle = jsFile.code.replace(/from\s+['"]react\/jsx-runtime['"]/g, 'from "https://esm.sh/react@18/jsx-runtime"').replace(/from\s+['"]react['"]/g, 'from "https://esm.sh/react@18"').replace(/from\s+['"]react-dom['"]/g, 'from "https://esm.sh/react-dom@18"').replace(/from\s+['"]zod['"]/g, 'from "https://esm.sh/zod"');
-                }
-              }
-              if (cachedBundle) {
-                res.setHeader("Content-Type", "application/javascript");
-                res.setHeader("Cache-Control", "no-cache");
-                res.end(cachedBundle);
-                return;
-              }
-              res.statusCode = 500;
-              res.end("Failed to bundle jsx primitives");
-            } catch (err) {
-              console.error("Error bundling jsx:", err);
-              res.statusCode = 500;
-              res.end(String(err));
-            }
-          });
-          server.watcher.on("change", (file) => {
-            if (file.includes("/jsx/")) {
-              cachedBundle = null;
-            }
-          });
-        }
-      },
-      {
-        name: "prev-components-bundle",
-        configureServer(server) {
-          const componentCache = new Map;
-          server.middlewares.use(async (req, res, next) => {
-            const urlPath = req.url?.split("?")[0] || "";
-            const match = urlPath.match(/^\/_prev\/components\/([^/]+)\.js$/);
-            if (!match || req.method !== "GET")
-              return next();
-            const componentName = match[1];
-            const componentEntry = path9.join(rootDir, "previews/components", componentName, "index.tsx");
-            if (!existsSync8(componentEntry)) {
-              res.statusCode = 404;
-              res.end(`Component not found: ${componentName}`);
-              return;
-            }
-            try {
-              let bundledCode = componentCache.get(componentName);
-              if (!bundledCode) {
-                const result = await viteBuild({
-                  logLevel: "silent",
-                  define: {
-                    "process.env.NODE_ENV": '"production"'
-                  },
-                  esbuild: {
-                    jsx: "automatic",
-                    jsxImportSource: "react",
-                    jsxDev: false
-                  },
-                  build: {
-                    write: false,
-                    lib: {
-                      entry: componentEntry,
-                      formats: ["es"],
-                      fileName: componentName
-                    },
-                    rollupOptions: {
-                      external: ["react", "react-dom", "react/jsx-runtime", "@prev/jsx"],
-                      output: {
-                        globals: {
-                          react: "React",
-                          "react-dom": "ReactDOM"
-                        }
-                      }
-                    },
-                    minify: false
+              build.onResolve({ filter: /^@prev\/jsx$/ }, () => {
+                const jsxPath2 = options.jsxPath || options.vendorPath.replace("runtime.js", "jsx.js");
+                return { path: jsxPath2, external: true };
+              });
+              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 };
+              });
+              build.onLoad({ filter: /\.css$/ }, (args) => {
+                let content;
+                const tempPath = args.path;
+                if (existsSync14(tempPath)) {
+                  content = readFileSync9(tempPath, "utf-8");
+                } else {
+                  const diskPath = path13.resolve(resolveDir, path13.relative(tempDir, tempPath));
+                  if (existsSync14(diskPath)) {
+                    content = readFileSync9(diskPath, "utf-8");
+                  } else {
+                    return { contents: "", loader: "js" };
                   }
-                });
-                const output = Array.isArray(result) ? result[0] : result;
-                if (!("output" in output)) {
-                  throw new Error("Unexpected build result type");
-                }
-                const jsFile = output.output.find((f) => f.type === "chunk");
-                if (jsFile && "code" in jsFile) {
-                  bundledCode = jsFile.code.replace(/from\s+['"]react\/jsx-runtime['"]/g, 'from "https://esm.sh/react@18/jsx-runtime"').replace(/from\s+['"]react['"]/g, 'from "https://esm.sh/react@18"').replace(/from\s+['"]react-dom['"]/g, 'from "https://esm.sh/react-dom@18"').replace(/from\s+['"]@prev\/jsx['"]/g, `from "${req.headers.origin || ""}/_prev/jsx.js"`);
-                  componentCache.set(componentName, bundledCode);
-                }
-              }
-              if (bundledCode) {
-                res.setHeader("Content-Type", "application/javascript");
-                res.setHeader("Cache-Control", "no-cache");
-                res.end(bundledCode);
-                return;
-              }
-              res.statusCode = 500;
-              res.end(`Failed to bundle component: ${componentName}`);
-            } catch (err) {
-              console.error(`Error bundling component ${componentName}:`, err);
-              res.statusCode = 500;
-              res.end(String(err));
-            }
-          });
-          server.watcher.on("change", (file) => {
-            if (file.includes("/previews/components/")) {
-              const match = file.match(/\/previews\/components\/([^/]+)\//);
-              if (match) {
-                componentCache.delete(match[1]);
-              }
-            }
-          });
-        }
-      },
-      {
-        name: "prev-preview-server",
-        resolveId(id) {
-          if (id.startsWith("/_preview/")) {
-            const relativePath = id.slice("/_preview/".length);
-            const previewsDir = path9.join(rootDir, "previews");
-            const resolved = path9.resolve(previewsDir, relativePath);
-            if (resolved.startsWith(previewsDir)) {
-              return resolved;
-            }
-          }
-        },
-        configureServer(server) {
-          server.middlewares.use(async (req, res, next) => {
-            const urlPath = req.url?.split("?")[0] || "";
-            if (urlPath.startsWith("/_preview-bundle/")) {
-              const startTime = performance.now();
-              const previewPath = decodeURIComponent(urlPath.slice("/_preview-bundle/".length));
-              const previewDir = path9.join(rootDir, "previews", previewPath);
-              if (!previewDir.startsWith(path9.join(rootDir, "previews"))) {
-                res.statusCode = 403;
-                res.end("Forbidden");
-                return;
-              }
-              const entryFiles = ["index.tsx", "index.ts", "index.jsx", "index.js", "App.tsx", "App.ts"];
-              let entryFile = "";
-              for (const f of entryFiles) {
-                if (existsSync8(path9.join(previewDir, f))) {
-                  entryFile = path9.join(previewDir, f);
-                  break;
                 }
-              }
-              if (!entryFile) {
-                res.statusCode = 404;
-                res.end(JSON.stringify({ error: "No entry file found" }));
-                return;
-              }
-              try {
-                const result = await esbuildLib.build({
-                  entryPoints: [entryFile],
-                  bundle: true,
-                  write: false,
-                  format: "esm",
-                  jsx: "automatic",
-                  jsxImportSource: "react",
-                  jsxDev: false,
-                  target: "es2020",
-                  minify: false,
-                  sourcemap: false,
-                  external: ["react", "react-dom", "react-dom/client", "react/jsx-runtime", "@prev/jsx", "fs", "path", "js-yaml"],
-                  alias: {
-                    react: "https://esm.sh/react@18",
-                    "react-dom": "https://esm.sh/react-dom@18",
-                    "react-dom/client": "https://esm.sh/react-dom@18/client",
-                    "react/jsx-runtime": "https://esm.sh/react@18/jsx-runtime"
-                  },
-                  define: {
-                    "process.env.NODE_ENV": '"production"'
-                  }
-                });
-                const bundleTime = Math.round(performance.now() - startTime);
-                const code = result.outputFiles[0]?.text || "";
-                res.setHeader("Content-Type", "application/javascript");
-                res.setHeader("X-Bundle-Time", String(bundleTime));
-                res.end(code);
-                return;
-              } catch (err) {
-                console.error("Bundle error:", err);
-                res.statusCode = 500;
-                res.end(JSON.stringify({ error: String(err) }));
-                return;
-              }
-            }
-            if (urlPath === "/_preview-runtime") {
-              const templatePath = path9.join(srcRoot2, "preview-runtime/fast-template.html");
-              if (existsSync8(templatePath)) {
-                const html = readFileSync7(templatePath, "utf-8");
-                res.setHeader("Content-Type", "text/html");
-                res.end(html);
-                return;
-              }
-            }
-            if (urlPath.startsWith("/_preview-config/")) {
-              const pathAfterConfig = decodeURIComponent(urlPath.slice("/_preview-config/".length));
-              const previewsDir = path9.join(rootDir, "previews");
-              const multiTypeMatch = pathAfterConfig.match(/^(components|screens|flows|atlas)\/(.+)$/);
-              if (multiTypeMatch) {
-                const [, type, name] = multiTypeMatch;
-                const previewDir = path9.join(previewsDir, type, name);
-                if (!previewDir.startsWith(previewsDir)) {
-                  res.statusCode = 403;
-                  res.end("Forbidden");
+                userCssCollected.push(content);
+                return { contents: "", loader: "js" };
+              });
+              build.onResolve({ filter: /^\.\.?\// }, (args) => {
+                const resolved = path13.resolve(path13.dirname(args.importer), args.path);
+                const tryExts = [".tsx", ".ts", ".jsx", ".js", ".css"];
+                const tryIndex = ["/index.tsx", "/index.ts", "/index.jsx", "/index.js"];
+                if (existsAsFile(resolved))
                   return;
-                }
-                if (existsSync8(previewDir)) {
-                  try {
-                    if (type === "flows") {
-                      const configPathYaml = path9.join(previewDir, "index.yaml");
-                      const configPathYml = path9.join(previewDir, "index.yml");
-                      const configPath = existsSync8(configPathYaml) ? configPathYaml : configPathYml;
-                      if (existsSync8(configPath)) {
-                        const flow = await parseFlowDefinition(configPath);
-                        if (flow) {
-                          res.setHeader("Content-Type", "application/json");
-                          res.end(JSON.stringify(flow));
-                          return;
-                        }
-                      }
-                    } else if (type === "atlas") {
-                      const configPathYaml = path9.join(previewDir, "index.yaml");
-                      const configPathYml = path9.join(previewDir, "index.yml");
-                      const configPath = existsSync8(configPathYaml) ? configPathYaml : configPathYml;
-                      if (existsSync8(configPath)) {
-                        const atlas = await parseAtlasDefinition(configPath);
-                        if (atlas) {
-                          res.setHeader("Content-Type", "application/json");
-                          res.end(JSON.stringify(atlas));
-                          return;
-                        }
-                      }
-                    } else {
-                      const config2 = await buildPreviewConfig(previewDir);
-                      res.setHeader("Content-Type", "application/json");
-                      res.end(JSON.stringify(config2));
-                      return;
-                    }
-                    res.statusCode = 400;
-                    res.end(JSON.stringify({ error: "Invalid config format" }));
+                for (const ext of tryExts) {
+                  if (existsAsFile(resolved + ext))
                     return;
-                  } catch (err) {
-                    console.error("Error building preview config:", err);
-                    res.statusCode = 500;
-                    res.end(JSON.stringify({ error: String(err) }));
+                }
+                for (const idx of tryIndex) {
+                  if (existsAsFile(resolved + idx))
                     return;
-                  }
                 }
-              } else {
-                const previewDir = path9.resolve(previewsDir, pathAfterConfig);
-                if (!previewDir.startsWith(previewsDir)) {
-                  res.statusCode = 403;
-                  res.end("Forbidden");
-                  return;
+                const importerRelative = path13.relative(tempDir, args.importer);
+                const originalDir = path13.resolve(resolveDir, path13.dirname(importerRelative));
+                const diskPath = path13.resolve(originalDir, args.path);
+                if (existsAsFile(diskPath))
+                  return { path: diskPath };
+                for (const ext of tryExts) {
+                  if (existsAsFile(diskPath + ext)) {
+                    return { path: diskPath + ext };
+                  }
                 }
-                if (existsSync8(previewDir)) {
-                  try {
-                    const config2 = await buildPreviewConfig(previewDir);
-                    res.setHeader("Content-Type", "application/json");
-                    res.end(JSON.stringify(config2));
-                    return;
-                  } catch (err) {
-                    console.error("Error building preview config:", err);
-                    res.statusCode = 500;
-                    res.end(JSON.stringify({ error: String(err) }));
-                    return;
+                for (const idx of tryIndex) {
+                  if (existsAsFile(diskPath + idx)) {
+                    return { path: diskPath + idx };
                   }
                 }
-              }
+                return;
+              });
             }
-            if (urlPath.match(/^\/_preview\/(components|screens|flows|atlas)\/[^/]+\/?$/)) {
-              const routeMatch = urlPath.match(/^\/_preview\/(\w+)\/([^/]+)\/?$/);
-              if (routeMatch) {
-                const [, type, name] = routeMatch;
-                const singularType = TYPE_SINGULAR[type] || type;
-                const shellHtml = `<!DOCTYPE html>
-<html>
+          }
+        ]
+      });
+      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 jsFile = result.outputs.find((f) => f.path.endsWith(".js")) || result.outputs[0];
+      let jsCode = jsFile ? await jsFile.text() : "";
+      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;
+      }
+      let userCss = userCssCollected.join(`
+`);
+      if (config.tailwind) {
+        userCss = userCss.replace(/@import\s*["']tailwindcss["']\s*;?/g, "");
+      }
+      const allCss = css + `
+` + userCss;
+      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">
-  <title>Preview: ${name}</title>
-  <script type="module">
-    import { PreviewRouter } from '@prev/theme/previews'
-    import { createRoot } from 'react-dom/client'
-    import React from 'react'
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Preview</title>
+  <style>${allCss}</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 };
+    } finally {
+      rmSync3(tempDir, { recursive: true, force: true });
+    }
+  } catch (err) {
+    return { success: false, html: "", css: "", error: err instanceof Error ? err.message : String(err) };
+  }
+}
 
-    createRoot(document.getElementById('root')).render(
-      React.createElement(PreviewRouter, { type: '${singularType}', name: '${name}' })
-    )
-  </script>
+// src/server/build.ts
+function findCliRoot3() {
+  let dir = path14.dirname(fileURLToPath3(import.meta.url));
+  for (let i = 0;i < 10; i++) {
+    const pkgPath = path14.join(dir, "package.json");
+    if (existsSync15(pkgPath)) {
+      try {
+        const pkg = JSON.parse(readFileSync10(pkgPath, "utf-8"));
+        if (pkg.name === "prev-cli")
+          return dir;
+      } catch {}
+    }
+    const parent = path14.dirname(dir);
+    if (parent === dir)
+      break;
+    dir = parent;
+  }
+  return path14.dirname(path14.dirname(fileURLToPath3(import.meta.url)));
+}
+var cliRoot3 = findCliRoot3();
+var srcRoot2 = path14.join(cliRoot3, "src");
+async function buildProductionSite(options) {
+  const { rootDir, include, base = "/" } = options;
+  const config = loadConfig(rootDir);
+  const distDir = path14.join(rootDir, "dist");
+  const entryPath = path14.join(srcRoot2, "theme/entry.tsx");
+  const plugins = [
+    virtualModulesPlugin({ rootDir, include, config }),
+    mdxPlugin({ rootDir }),
+    aliasesPlugin({ cliRoot: cliRoot3 })
+  ];
+  const result = await Bun.build({
+    entrypoints: [entryPath],
+    outdir: distDir,
+    format: "esm",
+    target: "browser",
+    minify: true,
+    splitting: true,
+    plugins,
+    jsx: { runtime: "automatic", importSource: "react", development: false },
+    naming: {
+      entry: "assets/[name]-[hash].[ext]",
+      chunk: "assets/[name]-[hash].[ext]",
+      asset: "assets/[name]-[hash].[ext]"
+    },
+    define: {
+      "import.meta.env.DEV": "false",
+      "import.meta.env.BASE_URL": JSON.stringify(base),
+      "process.env.NODE_ENV": '"production"'
+    }
+  });
+  if (!result.success) {
+    const errors = result.logs.filter((l) => l.level === "error").map((l) => l.message);
+    throw new Error(`Build failed:
+${errors.join(`
+`)}`);
+  }
+  const entryOutput = result.outputs.find((o) => o.kind === "entry-point");
+  const cssOutputs = result.outputs.filter((o) => o.path.endsWith(".css"));
+  const entryJsPath = entryOutput ? base + path14.relative(distDir, entryOutput.path) : "";
+  const cssLinks = cssOutputs.map((o) => {
+    const href = base + path14.relative(distDir, o.path);
+    return `  <link rel="stylesheet" href="${href}" />`;
+  }).join(`
+`);
+  const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Documentation</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="preload" href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=IBM+Plex+Mono:wght@400;500&display=swap" as="style" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=IBM+Plex+Mono:wght@400;500&display=swap" />
+${cssLinks}
 </head>
 <body>
   <div id="root"></div>
+  <script type="module" src="${entryJsPath}"></script>
 </body>
 </html>`;
-                const transformed = await server.transformIndexHtml(req.url, shellHtml);
-                res.setHeader("Content-Type", "text/html");
-                res.end(transformed);
-                return;
-              }
-            }
-            if (urlPath.startsWith("/_preview/")) {
-              const isHtmlRequest = !path9.extname(urlPath) || urlPath.endsWith("/");
-              if (isHtmlRequest) {
-                const previewName = decodeURIComponent(urlPath.slice("/_preview/".length).replace(/\/$/, ""));
-                const previewsDir = path9.join(rootDir, "previews");
-                const htmlPath = path9.resolve(previewsDir, previewName, "index.html");
-                if (!htmlPath.startsWith(previewsDir)) {
-                  return next();
-                }
-                if (existsSync8(htmlPath)) {
-                  try {
-                    let html = readFileSync7(htmlPath, "utf-8");
-                    const previewBase = `/_preview/${previewName}/`;
-                    html = html.replace(/(src|href)=["']\.\/([^"']+)["']/g, `$1="${previewBase}$2"`);
-                    const transformed = await server.transformIndexHtml(req.url, html);
-                    res.setHeader("Content-Type", "text/html");
-                    res.end(transformed);
-                    return;
-                  } catch (err) {
-                    console.error("Error serving preview:", err);
-                    return next();
-                  }
-                }
-              }
-            }
-            next();
-          });
+  writeFileSync5(path14.join(distDir, "index.html"), html);
+  copyFileSync(path14.join(distDir, "index.html"), path14.join(distDir, "404.html"));
+  await buildPreviewHtmlFiles(rootDir, distDir);
+}
+async function buildPreviewHtmlFiles(rootDir, distDir) {
+  const units = await scanPreviewUnits(rootDir);
+  if (units.length === 0)
+    return;
+  const targetDir = path14.join(distDir, "_preview");
+  const vendorsDir = path14.join(targetDir, "_vendors");
+  const previewsDir = path14.join(rootDir, "previews");
+  let hasFlowErrors = false;
+  for (const unit of units) {
+    if (unit.type !== "flow" || !unit.config)
+      continue;
+    const result = verifyFlow(unit.config, rootDir);
+    for (const w of result.warnings) {
+      console.warn(`  \u26A0 flows/${unit.name}: ${w}`);
+    }
+    for (const e of result.errors) {
+      console.error(`  \u2717 flows/${unit.name}: ${e}`);
+      hasFlowErrors = true;
+    }
+  }
+  if (hasFlowErrors) {
+    throw new Error("Flow verification failed \u2014 fix errors above before building");
+  }
+  let totalBuilds = 0;
+  for (const unit of units) {
+    if (unit.type === "flow")
+      continue;
+    totalBuilds++;
+    if (unit.files.states)
+      totalBuilds += unit.files.states.length;
+  }
+  console.log(`
+  Building ${totalBuilds} preview(s)...`);
+  console.log("    Building shared vendor bundle...");
+  mkdirSync3(vendorsDir, { recursive: true });
+  const vendorResult = await buildVendorBundle();
+  if (!vendorResult.success) {
+    console.error(`    \u2717 Vendor bundle: ${vendorResult.error}`);
+    return;
+  }
+  writeFileSync5(path14.join(vendorsDir, "runtime.js"), vendorResult.code);
+  console.log("    \u2713 _vendors/runtime.js");
+  const jsxResult = await buildJsxBundle("../_vendors/runtime.js");
+  if (!jsxResult.success) {
+    console.error(`    \u2717 JSX bundle: ${jsxResult.error}`);
+    return;
+  }
+  writeFileSync5(path14.join(vendorsDir, "jsx.js"), jsxResult.code);
+  console.log("    \u2713 _vendors/jsx.js");
+  for (const unit of units) {
+    if (unit.type === "flow")
+      continue;
+    const previewDir = path14.join(previewsDir, unit.type + "s", unit.name);
+    const previewPath = `${unit.type}s/${unit.name}`;
+    const depth = previewPath.split("/").length;
+    const vendorPath = "../".repeat(depth) + "_vendors/runtime.js";
+    try {
+      const config = await buildPreviewConfig(previewDir);
+      const result = await buildOptimizedPreview(config, { vendorPath, resolveDir: previewDir });
+      if (!result.success) {
+        console.error(`    \u2717 ${previewPath}: ${result.error}`);
+      } else {
+        const outputDir = path14.join(targetDir, previewPath);
+        mkdirSync3(outputDir, { recursive: true });
+        writeFileSync5(path14.join(outputDir, "index.html"), result.html);
+        console.log(`    \u2713 ${previewPath}`);
+      }
+    } catch (err) {
+      console.error(`    \u2717 ${previewPath}: ${err}`);
+    }
+    if (unit.type === "screen" && unit.files.states) {
+      for (const stateFile of unit.files.states) {
+        const stateName = stateFile.replace(/\.(tsx|jsx)$/, "");
+        const stateVendorPath = "../".repeat(depth + 1) + "_vendors/runtime.js";
+        try {
+          const config = await buildPreviewConfig(previewDir, stateFile);
+          const result = await buildOptimizedPreview(config, { vendorPath: stateVendorPath, resolveDir: previewDir });
+          if (!result.success) {
+            console.error(`    \u2717 ${previewPath}/${stateName}: ${result.error}`);
+          } else {
+            const outputDir = path14.join(targetDir, previewPath, stateName);
+            mkdirSync3(outputDir, { recursive: true });
+            writeFileSync5(path14.join(outputDir, "index.html"), result.html);
+            console.log(`    \u2713 ${previewPath}/${stateName}`);
+          }
+        } catch (err) {
+          console.error(`    \u2717 ${previewPath}/${stateName}: ${err}`);
         }
       }
-    ],
-    resolve: {
-      alias: {
-        "@prev/ui": path9.join(srcRoot2, "ui"),
-        "@prev/theme": path9.join(srcRoot2, "theme"),
-        react: path9.join(cliNodeModules, "react"),
-        "react-dom": path9.join(cliNodeModules, "react-dom"),
-        "@tanstack/react-router": path9.join(cliNodeModules, "@tanstack/react-router"),
-        "@mdx-js/react": path9.join(cliNodeModules, "@mdx-js/react"),
-        mermaid: path9.join(cliNodeModules, "mermaid"),
-        dayjs: path9.join(cliNodeModules, "dayjs"),
-        "@terrastruct/d2": path9.join(cliNodeModules, "@terrastruct/d2"),
-        "use-sync-external-store": path9.join(cliNodeModules, "use-sync-external-store")
-      },
-      dedupe: [
-        "react",
-        "react-dom",
-        "@tanstack/react-router"
-      ]
-    },
-    esbuild: {
-      jsx: "automatic",
-      jsxImportSource: "react",
-      jsxDev: false
-    },
-    optimizeDeps: {
-      noDiscovery: true,
-      holdUntilCrawlEnd: false,
-      esbuildOptions: {
-        jsx: "automatic",
-        jsxImportSource: "react",
-        jsxDev: false
-      },
-      include: [
-        "react-dom/client",
-        "use-sync-external-store",
-        "use-sync-external-store/shim/with-selector.js",
-        "mermaid",
-        "dayjs",
-        "@terrastruct/d2"
-      ],
-      exclude: [
-        "virtual:prev-config",
-        "virtual:prev-previews",
-        "virtual:prev-pages",
-        "virtual:prev-page-modules",
-        "@prev/theme"
-      ]
-    },
-    ssr: {
-      noExternal: true
-    },
-    server: {
-      port,
-      strictPort: false,
-      fs: {
-        allow: [rootDir, cliRoot2]
-      },
-      warmup: {
-        clientFiles: [
-          path9.join(srcRoot2, "theme/entry.tsx"),
-          path9.join(srcRoot2, "theme/styles.css")
-        ]
+    }
+  }
+}
+
+// src/server/preview.ts
+import path15 from "path";
+import { existsSync as existsSync16, statSync as statSync3 } from "fs";
+async function startPreviewServer(options) {
+  const { rootDir, port } = options;
+  const distDir = path15.join(rootDir, "dist");
+  if (!existsSync16(distDir)) {
+    throw new Error(`No dist/ directory found. Run 'prev build' first.`);
+  }
+  const indexHtml = path15.join(distDir, "index.html");
+  const server = Bun.serve({
+    port,
+    async fetch(req) {
+      const url = new URL(req.url);
+      let pathname = url.pathname;
+      if (pathname !== "/" && pathname.endsWith("/")) {
+        pathname = pathname.slice(0, -1);
       }
-    },
-    preview: {
-      port,
-      strictPort: false
-    },
-    build: {
-      outDir: path9.join(rootDir, "dist"),
-      reportCompressedSize: false,
-      chunkSizeWarningLimit: 1e4,
-      rollupOptions: {
-        input: {
-          main: path9.join(srcRoot2, "theme/index.html")
-        }
+      const filePath = path15.join(distDir, pathname);
+      if (filePath.startsWith(distDir) && existsSync16(filePath)) {
+        try {
+          if (statSync3(filePath).isFile()) {
+            return new Response(Bun.file(filePath));
+          }
+        } catch {}
       }
-    },
-    assetsInclude: [
-      "**/node_modules/**/*.md",
-      "**/node_modules/**/*.mdx"
-    ]
+      const indexPath = path15.join(distDir, pathname, "index.html");
+      if (existsSync16(indexPath)) {
+        return new Response(Bun.file(indexPath));
+      }
+      if (!pathname.includes(".") && existsSync16(indexHtml)) {
+        return new Response(Bun.file(indexHtml));
+      }
+      return new Response("Not Found", { status: 404 });
+    }
+  });
+  return {
+    server,
+    port: server.port,
+    url: `http://localhost:${server.port}/`,
+    stop: () => server.stop()
   };
 }
 
@@ -3289,10 +3718,8 @@ async function findAvailablePort(minPort, maxPort) {
   throw new Error(`No available port found between ${minPort} and ${maxPort}`);
 }
 
-// src/vite/start.ts
+// src/server/start.ts
 import { exec } from "child_process";
-import { existsSync as existsSync9, rmSync as rmSync3, copyFileSync } from "fs";
-import path10 from "path";
 function printWelcome(type) {
   console.log();
   console.log("  \u2728 prev");
@@ -3307,7 +3734,6 @@ function printShortcuts() {
   console.log();
   console.log("  Shortcuts:");
   console.log("    o  \u2192  open in browser");
-  console.log("    c  \u2192  clear cache");
   console.log("    h  \u2192  show this help");
   console.log("    q  \u2192  quit");
   console.log();
@@ -3324,25 +3750,7 @@ function openBrowser(url) {
   exec(`${cmd} ${url}`);
   console.log(`  \u2197 Opened ${url}`);
 }
-function clearCache(rootDir) {
-  const viteCacheDir = path10.join(rootDir, ".vite");
-  const nodeModulesVite = path10.join(rootDir, "node_modules", ".vite");
-  let cleared = 0;
-  if (existsSync9(viteCacheDir)) {
-    rmSync3(viteCacheDir, { recursive: true });
-    cleared++;
-  }
-  if (existsSync9(nodeModulesVite)) {
-    rmSync3(nodeModulesVite, { recursive: true });
-    cleared++;
-  }
-  if (cleared === 0) {
-    console.log("  No cache to clear");
-  } else {
-    console.log(`  \u2713 Cleared Vite cache`);
-  }
-}
-function setupKeyboardShortcuts(rootDir, url, quit) {
+function setupKeyboardShortcuts(url, quit) {
   if (!process.stdin.isTTY)
     return () => {};
   process.stdin.setRawMode(true);
@@ -3353,9 +3761,6 @@ function setupKeyboardShortcuts(rootDir, url, quit) {
       case "o":
         openBrowser(url);
         break;
-      case "c":
-        clearCache(rootDir);
-        break;
       case "h":
         printShortcuts();
         break;
@@ -3376,27 +3781,13 @@ function setupKeyboardShortcuts(rootDir, url, quit) {
 }
 async function startDev(rootDir, options = {}) {
   const port = options.port ?? await getRandomPort();
-  const config = await createViteConfig({
+  const { server, url, stop } = await startDevServer({
     rootDir,
-    mode: "development",
     port,
-    include: options.include,
-    debug: options.debug
+    include: options.include
   });
-  const server = await createServer2(config);
-  await server.listen();
-  const warmupPort = server.config.server.port;
-  fetch(`http://localhost:${warmupPort}/`).catch(() => {});
-  const debugCollector = getDebugCollector();
-  if (debugCollector) {
-    debugCollector.startPhase("serverReady");
-    const reportPath = debugCollector.writeReport();
-    console.log(`  \uD83D\uDCCA Debug trace written to: ${reportPath}`);
-  }
-  const actualPort = server.config.server.port || port;
-  const url = `http://localhost:${actualPort}/`;
   printWelcome("dev");
-  server.printUrls();
+  console.log(`  \u279C  Local:   ${url}`);
   printReady();
   let isShuttingDown = false;
   let cleanupStdin = () => {};
@@ -3412,17 +3803,10 @@ async function startDev(rootDir, options = {}) {
   Shutting down...`);
     }
     cleanupStdin();
-    const closePromise = server.close();
-    const timeoutPromise = new Promise((resolve) => {
-      setTimeout(() => {
-        console.log("  Force closing (timeout)...");
-        resolve();
-      }, 3000);
-    });
-    await Promise.race([closePromise, timeoutPromise]);
+    stop();
     process.exit(0);
   };
-  cleanupStdin = setupKeyboardShortcuts(rootDir, url, () => shutdown());
+  cleanupStdin = setupKeyboardShortcuts(url, () => shutdown());
   process.on("SIGINT", () => shutdown("SIGINT"));
   process.on("SIGTERM", () => shutdown("SIGTERM"));
   process.on("uncaughtException", (err) => {
@@ -3437,26 +3821,11 @@ async function buildSite(rootDir, options = {}) {
   console.log("  \u2728 prev build");
   console.log();
   console.log("  Building your documentation site...");
-  const config = await createViteConfig({
+  await buildProductionSite({
     rootDir,
-    mode: "production",
     include: options.include,
-    base: options.base,
-    debug: options.debug
+    base: options.base
   });
-  await build4(config);
-  const debugCollector = getDebugCollector();
-  if (debugCollector) {
-    debugCollector.startPhase("buildComplete");
-    const reportPath = debugCollector.writeReport();
-    console.log(`  \uD83D\uDCCA Debug trace written to: ${reportPath}`);
-  }
-  const distDir = path10.join(rootDir, "dist");
-  const indexPath = path10.join(distDir, "index.html");
-  const notFoundPath = path10.join(distDir, "404.html");
-  if (existsSync9(indexPath)) {
-    copyFileSync(indexPath, notFoundPath);
-  }
   console.log();
   console.log("  Done! Your site is ready in ./dist");
   console.log("  You can deploy this folder anywhere.");
@@ -3464,31 +3833,18 @@ async function buildSite(rootDir, options = {}) {
 }
 async function previewSite(rootDir, options = {}) {
   const port = options.port ?? await getRandomPort();
-  const config = await createViteConfig({
-    rootDir,
-    mode: "production",
-    port,
-    include: options.include,
-    debug: options.debug
-  });
-  const server = await preview(config);
-  const debugCollector = getDebugCollector();
-  if (debugCollector) {
-    debugCollector.startPhase("previewReady");
-    const reportPath = debugCollector.writeReport();
-    console.log(`  \uD83D\uDCCA Debug trace written to: ${reportPath}`);
-  }
+  const { url, stop } = await startPreviewServer({ rootDir, port });
   printWelcome("preview");
-  server.printUrls();
+  console.log(`  \u279C  Local:   ${url}`);
   console.log();
   console.log("  Press Ctrl+C to stop.");
   console.log();
-  return server;
+  return { url, stop };
 }
 
 // src/validators/index.ts
-import { existsSync as existsSync10, readdirSync, readFileSync as readFileSync9 } from "fs";
-import { join as join3 } from "path";
+import { existsSync as existsSync17, readdirSync, readFileSync as readFileSync12 } from "fs";
+import { join as join4 } from "path";
 import * as yaml3 from "js-yaml";
 
 // src/renderers/registry.ts
@@ -3523,10 +3879,10 @@ async function initializeAdapters() {
 // src/validators/schema-validator.ts
 import Ajv from "ajv";
 import addFormats from "ajv-formats";
-import { readFileSync as readFileSync8 } from "fs";
-import { join as join2, dirname as dirname3 } from "path";
+import { readFileSync as readFileSync11 } from "fs";
+import { join as join3, dirname as dirname3 } from "path";
 import { fileURLToPath as fileURLToPath4 } from "url";
-var __dirname3 = dirname3(fileURLToPath4(import.meta.url));
+var __dirname2 = dirname3(fileURLToPath4(import.meta.url));
 var ajv = new Ajv({
   allErrors: true,
   strict: false,
@@ -3538,8 +3894,8 @@ function loadSchema(name) {
   if (schemaCache.has(name)) {
     return schemaCache.get(name);
   }
-  const schemaPath = join2(__dirname3, "..", "schemas", `${name}.schema.json`);
-  const schemaContent = readFileSync8(schemaPath, "utf-8");
+  const schemaPath = join3(__dirname2, "..", "schemas", `${name}.schema.json`);
+  const schemaContent = readFileSync11(schemaPath, "utf-8");
   const schema = JSON.parse(schemaContent);
   const validate = ajv.compile(schema);
   schemaCache.set(name, validate);
@@ -3641,7 +3997,7 @@ function validateAllLayouts(layoutByRenderer, targetRenderer) {
 init_primitives();
 function parseRef(ref) {
   const refStr = typeof ref === "string" ? ref : ref.ref;
-  const match = refStr.match(/^(screens|components|flows|atlas)\/([a-z0-9-]+)$/);
+  const match = refStr.match(/^(screens|components|flows)\/([a-z0-9-]+)$/);
   if (!match)
     return null;
   return { type: match[1], id: match[2] };
@@ -3661,22 +4017,22 @@ function detectCycle(edges, nodeIds) {
   }
   const visited = new Set;
   const recursionStack = new Set;
-  const path11 = [];
+  const path16 = [];
   function dfs(node) {
     visited.add(node);
     recursionStack.add(node);
-    path11.push(node);
+    path16.push(node);
     for (const neighbor of adjacency.get(node) || []) {
       if (!visited.has(neighbor)) {
         const cycle = dfs(neighbor);
         if (cycle)
           return cycle;
       } else if (recursionStack.has(neighbor)) {
-        const cycleStart = path11.indexOf(neighbor);
-        return [...path11.slice(cycleStart), neighbor];
+        const cycleStart = path16.indexOf(neighbor);
+        return [...path16.slice(cycleStart), neighbor];
       }
     }
-    path11.pop();
+    path16.pop();
     recursionStack.delete(node);
     return null;
   }
@@ -3689,13 +4045,13 @@ function detectCycle(edges, nodeIds) {
   }
   return null;
 }
-function validateRef(ref, context, path11) {
+function validateRef(ref, context, path16) {
   const errors = [];
   const warnings = [];
   const parsed = parseRef(ref);
   if (!parsed) {
     errors.push({
-      path: path11,
+      path: path16,
       message: `Invalid reference format: ${JSON.stringify(ref)}`,
       code: "INVALID_REF"
     });
@@ -3704,7 +4060,7 @@ function validateRef(ref, context, path11) {
   const knownSet = context.knownIds[parsed.type];
   if (!knownSet?.has(parsed.id)) {
     errors.push({
-      path: path11,
+      path: path16,
       message: `Reference "${parsed.type}/${parsed.id}" not found`,
       code: "INVALID_REF"
     });
@@ -3716,13 +4072,13 @@ function validateRef(ref, context, path11) {
       const screenStates = context.screenStates.get(parsed.id);
       if (!screenStates) {
         errors.push({
-          path: path11,
+          path: path16,
           message: `State "${state}" referenced but screen "${parsed.id}" has no states defined`,
           code: "INVALID_STATE_REF"
         });
       } else if (!screenStates.has(state)) {
         errors.push({
-          path: path11,
+          path: path16,
           message: `State "${state}" not found in screen "${parsed.id}". Available states: ${Array.from(screenStates).join(", ") || "none"}`,
           code: "INVALID_STATE_REF"
         });
@@ -3773,50 +4129,6 @@ function validateFlow(config, context, configPath) {
   }
   return { errors, warnings };
 }
-function validateAtlas(config, context, configPath) {
-  const errors = [];
-  const warnings = [];
-  if (!config.nodes || config.nodes.length === 0) {
-    return { errors, warnings };
-  }
-  const nodeIds = new Set(config.nodes.map((n) => n.id));
-  for (let i = 0;i < config.nodes.length; i++) {
-    const node = config.nodes[i];
-    if (node.ref) {
-      const result = validateRef(node.ref, context, `${configPath}/nodes/${i}/ref`);
-      errors.push(...result.errors);
-      warnings.push(...result.warnings);
-    }
-  }
-  if (config.relationships) {
-    for (let i = 0;i < config.relationships.length; i++) {
-      const rel = config.relationships[i];
-      if (!nodeIds.has(rel.from)) {
-        errors.push({
-          path: `${configPath}/relationships/${i}/from`,
-          message: `Relationship "from" references unknown node "${rel.from}". Available nodes: ${Array.from(nodeIds).join(", ")}`,
-          code: "INVALID_NODE_REF"
-        });
-      }
-      if (!nodeIds.has(rel.to)) {
-        errors.push({
-          path: `${configPath}/relationships/${i}/to`,
-          message: `Relationship "to" references unknown node "${rel.to}". Available nodes: ${Array.from(nodeIds).join(", ")}`,
-          code: "INVALID_NODE_REF"
-        });
-      }
-    }
-    const cycle = detectCycle(config.relationships, nodeIds);
-    if (cycle) {
-      errors.push({
-        path: `${configPath}/relationships`,
-        message: `Circular dependency detected in atlas relationships: ${cycle.join(" \u2192 ")}`,
-        code: "CIRCULAR_DEPENDENCY"
-      });
-    }
-  }
-  return { errors, warnings };
-}
 function validateScreenTemplate(template, slots, states, context, configPath) {
   const errors = [];
   const warnings = [];
@@ -3912,25 +4224,25 @@ function validateRendererKeys(layoutByRenderer, configPath) {
   }
   return { errors, warnings };
 }
-function extractComponentRefs(node, path11, refs) {
+function extractComponentRefs(node, path16, refs) {
   if (!node || typeof node !== "object")
     return;
   if (Array.isArray(node)) {
     node.forEach((item, index) => {
-      extractComponentRefs(item, `${path11}/${index}`, refs);
+      extractComponentRefs(item, `${path16}/${index}`, refs);
     });
     return;
   }
   const obj = node;
   if (obj.type === "ComponentRef" && typeof obj.ref === "string") {
-    refs.push({ ref: obj.ref, path: `${path11}/ref` });
+    refs.push({ ref: obj.ref, path: `${path16}/ref` });
   }
   if (obj.children) {
-    extractComponentRefs(obj.children, `${path11}/children`, refs);
+    extractComponentRefs(obj.children, `${path16}/children`, refs);
   }
   if (obj.props && typeof obj.props === "object") {
     for (const [key, value] of Object.entries(obj.props)) {
-      extractComponentRefs(value, `${path11}/props/${key}`, refs);
+      extractComponentRefs(value, `${path16}/props/${key}`, refs);
     }
   }
 }
@@ -3943,11 +4255,11 @@ function validateLayoutComponentRefs(layoutByRenderer, context, configPath) {
   for (const [rendererKey, layout] of Object.entries(layoutByRenderer)) {
     const refs = [];
     extractComponentRefs(layout, `${configPath}/layoutByRenderer/${rendererKey}`, refs);
-    for (const { ref, path: path11 } of refs) {
+    for (const { ref, path: path16 } of refs) {
       const match = ref.match(/^components\/([a-z0-9-]+)$/);
       if (!match) {
         errors.push({
-          path: path11,
+          path: path16,
           message: `Invalid ComponentRef format: "${ref}". Expected "components/<id>"`,
           code: "INVALID_REF"
         });
@@ -3956,7 +4268,7 @@ function validateLayoutComponentRefs(layoutByRenderer, context, configPath) {
       const componentId = match[1];
       if (!context.knownIds.components.has(componentId)) {
         errors.push({
-          path: path11,
+          path: path16,
           message: `ComponentRef references unknown component "${componentId}"`,
           code: "INVALID_REF"
         });
@@ -4004,11 +4316,6 @@ function validateSemantics(config, context, configPath = "") {
     errors.push(...result.errors);
     warnings.push(...result.warnings);
   }
-  if (config.kind === "atlas") {
-    const result = validateAtlas(config, context, configPath);
-    errors.push(...result.errors);
-    warnings.push(...result.warnings);
-  }
   return {
     valid: errors.length === 0,
     errors,
@@ -4021,8 +4328,7 @@ function createValidationContext(rootDir) {
     knownIds: {
       components: new Set,
       screens: new Set,
-      flows: new Set,
-      atlas: new Set
+      flows: new Set
     },
     screenStates: new Map
   };
@@ -4051,25 +4357,25 @@ function checkDuplicateIds(ids, type) {
 }
 
 // src/validators/index.ts
-var PREVIEW_TYPES = ["components", "screens", "flows", "atlas"];
+var PREVIEW_TYPES = ["components", "screens", "flows"];
 function findPreviewRoot(startDir) {
   let current = startDir;
   while (current !== "/") {
-    const previewsDir = join3(current, ".previews");
-    if (existsSync10(previewsDir)) {
+    const previewsDir = join4(current, ".previews");
+    if (existsSync17(previewsDir)) {
       return previewsDir;
     }
-    const previewsDirAlt = join3(current, "previews");
-    if (existsSync10(previewsDirAlt)) {
+    const previewsDirAlt = join4(current, "previews");
+    if (existsSync17(previewsDirAlt)) {
       return previewsDirAlt;
     }
-    current = join3(current, "..");
+    current = join4(current, "..");
   }
   return null;
 }
 function scanPreviewType(previewRoot, type) {
-  const typeDir = join3(previewRoot, type);
-  if (!existsSync10(typeDir)) {
+  const typeDir = join4(previewRoot, type);
+  if (!existsSync17(typeDir)) {
     return [];
   }
   const units = [];
@@ -4077,10 +4383,10 @@ function scanPreviewType(previewRoot, type) {
   for (const entry of entries) {
     if (!entry.isDirectory())
       continue;
-    const unitPath = join3(typeDir, entry.name);
-    const configYaml = join3(unitPath, "config.yaml");
-    const configYml = join3(unitPath, "config.yml");
-    const configPath = existsSync10(configYaml) ? configYaml : existsSync10(configYml) ? configYml : null;
+    const unitPath = join4(typeDir, entry.name);
+    const configYaml = join4(unitPath, "config.yaml");
+    const configYml = join4(unitPath, "config.yml");
+    const configPath = existsSync17(configYaml) ? configYaml : existsSync17(configYml) ? configYml : null;
     if (configPath) {
       units.push({
         id: entry.name,
@@ -4093,7 +4399,7 @@ function scanPreviewType(previewRoot, type) {
 }
 function loadConfig2(configPath) {
   try {
-    const content = readFileSync9(configPath, "utf-8");
+    const content = readFileSync12(configPath, "utf-8");
     const parsed = yaml3.load(content);
     if (parsed && typeof parsed === "object") {
       return parsed;
@@ -4144,8 +4450,7 @@ async function validate(rootDir = process.cwd(), options = {}) {
       summary: {
         components: { total: 0, valid: 0, invalid: 0 },
         screens: { total: 0, valid: 0, invalid: 0 },
-        flows: { total: 0, valid: 0, invalid: 0 },
-        atlas: { total: 0, valid: 0, invalid: 0 }
+        flows: { total: 0, valid: 0, invalid: 0 }
       },
       errors: [{
         file: rootDir,
@@ -4162,8 +4467,7 @@ async function validate(rootDir = process.cwd(), options = {}) {
     summary: {
       components: { total: 0, valid: 0, invalid: 0 },
       screens: { total: 0, valid: 0, invalid: 0 },
-      flows: { total: 0, valid: 0, invalid: 0 },
-      atlas: { total: 0, valid: 0, invalid: 0 }
+      flows: { total: 0, valid: 0, invalid: 0 }
     },
     errors: [],
     warnings: []
@@ -4295,7 +4599,7 @@ function formatValidationResult(result) {
 }
 
 // src/typecheck/index.ts
-import path11 from "path";
+import path16 from "path";
 import { fileURLToPath as fileURLToPath5 } from "url";
 import { spawn } from "child_process";
 function getTsgoPath() {
@@ -4304,9 +4608,9 @@ function getTsgoPath() {
   const platformPkg = `@typescript/native-preview-${platform}-${arch}`;
   try {
     const pkgJsonUrl = import.meta.resolve(`${platformPkg}/package.json`);
-    const pkgDir = path11.dirname(fileURLToPath5(pkgJsonUrl));
+    const pkgDir = path16.dirname(fileURLToPath5(pkgJsonUrl));
     const exe = platform === "win32" ? "tsgo.exe" : "tsgo";
-    return path11.join(pkgDir, "lib", exe);
+    return path16.join(pkgDir, "lib", exe);
   } catch {
     throw new Error(`Unable to find tsgo for ${platform}-${arch}. ` + `Package ${platformPkg} may not be installed or your platform is unsupported.`);
   }
@@ -4314,15 +4618,15 @@ function getTsgoPath() {
 function getTypeRootsPath() {
   try {
     const reactTypesUrl = import.meta.resolve("@types/react/package.json");
-    const reactTypesDir = path11.dirname(fileURLToPath5(reactTypesUrl));
-    return path11.dirname(reactTypesDir);
+    const reactTypesDir = path16.dirname(fileURLToPath5(reactTypesUrl));
+    return path16.dirname(reactTypesDir);
   } catch {
     throw new Error("Unable to find @types/react. Make sure prev-cli has @types/react in dependencies.");
   }
 }
 async function typecheck(rootDir, options = {}) {
   const {
-    previewsDir = path11.join(rootDir, "previews"),
+    previewsDir = path16.join(rootDir, "previews"),
     include = ["**/*.{ts,tsx}"],
     strict = true,
     verbose = false
@@ -4351,7 +4655,7 @@ async function typecheck(rootDir, options = {}) {
   }
   if (verbose) {
     console.log(`  files: ${files.length}`);
-    files.forEach((f) => console.log(`    - ${path11.relative(rootDir, f)}`));
+    files.forEach((f) => console.log(`    - ${path16.relative(rootDir, f)}`));
   }
   const args = [
     "--noEmit",
@@ -4432,8 +4736,8 @@ ${result.output}
 }
 
 // src/migrate.ts
-import { existsSync as existsSync11, readdirSync as readdirSync2, readFileSync as readFileSync10, writeFileSync as writeFileSync6 } from "fs";
-import { join as join4 } from "path";
+import { existsSync as existsSync18, readdirSync as readdirSync2, readFileSync as readFileSync13, writeFileSync as writeFileSync6 } from "fs";
+import { join as join5 } from "path";
 import * as yaml4 from "js-yaml";
 var PREVIEW_TYPE_FOLDERS2 = ["components", "screens", "flows", "atlas"];
 var KIND_MAP = {
@@ -4445,21 +4749,21 @@ var KIND_MAP = {
 function findPreviewRoot2(startDir) {
   let current = startDir;
   while (current !== "/") {
-    const previewsDir = join4(current, ".previews");
-    if (existsSync11(previewsDir)) {
+    const previewsDir = join5(current, ".previews");
+    if (existsSync18(previewsDir)) {
       return previewsDir;
     }
-    const previewsDirAlt = join4(current, "previews");
-    if (existsSync11(previewsDirAlt)) {
+    const previewsDirAlt = join5(current, "previews");
+    if (existsSync18(previewsDirAlt)) {
       return previewsDirAlt;
     }
-    current = join4(current, "..");
+    current = join5(current, "..");
   }
   return null;
 }
 function migrateConfig(configPath, folderId, kind) {
   try {
-    const content = readFileSync10(configPath, "utf-8");
+    const content = readFileSync13(configPath, "utf-8");
     const config = yaml4.load(content);
     if (!config || typeof config !== "object") {
       return { migrated: false, error: "Invalid YAML" };
@@ -4519,18 +4823,18 @@ async function migrateConfigs(rootDir = process.cwd()) {
     errors: []
   };
   for (const type of PREVIEW_TYPE_FOLDERS2) {
-    const typeDir = join4(previewRoot, type);
-    if (!existsSync11(typeDir))
+    const typeDir = join5(previewRoot, type);
+    if (!existsSync18(typeDir))
       continue;
     const kind = KIND_MAP[type];
     const entries = readdirSync2(typeDir, { withFileTypes: true });
     for (const entry of entries) {
       if (!entry.isDirectory())
         continue;
-      const unitPath = join4(typeDir, entry.name);
-      const configYaml = join4(unitPath, "config.yaml");
-      const configYml = join4(unitPath, "config.yml");
-      const configPath = existsSync11(configYaml) ? configYaml : existsSync11(configYml) ? configYml : null;
+      const unitPath = join5(typeDir, entry.name);
+      const configYaml = join5(unitPath, "config.yaml");
+      const configYml = join5(unitPath, "config.yml");
+      const configPath = existsSync18(configYaml) ? configYaml : existsSync18(configYml) ? configYml : null;
       if (!configPath) {
         result.skipped++;
         continue;
@@ -4578,14 +4882,14 @@ import { createHash } from "crypto";
 import { readdir, rm, stat, mkdir } from "fs/promises";
 import { exec as exec2 } from "child_process";
 import { promisify } from "util";
-import path12 from "path";
-import os2 from "os";
+import path17 from "path";
+import os from "os";
 var execAsync = promisify(exec2);
-var DEFAULT_CACHE_ROOT = path12.join(os2.homedir(), ".cache/prev");
+var DEFAULT_CACHE_ROOT = path17.join(os.homedir(), ".cache/prev");
 async function getCacheDir(rootDir, branch) {
   const resolvedBranch = branch ?? await getCurrentBranch(rootDir);
   const hash = createHash("sha1").update(`${rootDir}:${resolvedBranch}`).digest("hex").slice(0, 12);
-  return path12.join(DEFAULT_CACHE_ROOT, hash);
+  return path17.join(DEFAULT_CACHE_ROOT, hash);
 }
 async function getCurrentBranch(rootDir) {
   try {
@@ -4607,7 +4911,7 @@ async function cleanCache(options) {
   }
   let removed = 0;
   for (const dir of dirs) {
-    const fullPath = path12.join(cacheRoot, dir);
+    const fullPath = path17.join(cacheRoot, dir);
     try {
       const info = await stat(fullPath);
       if (info.isDirectory() && now - info.mtimeMs > maxAge) {
@@ -4623,15 +4927,15 @@ async function cleanCache(options) {
 import yaml5 from "js-yaml";
 function getVersion() {
   try {
-    let dir = path13.dirname(fileURLToPath6(import.meta.url));
+    let dir = path18.dirname(fileURLToPath6(import.meta.url));
     for (let i = 0;i < 5; i++) {
-      const pkgPath = path13.join(dir, "package.json");
-      if (existsSync12(pkgPath)) {
-        const pkg = JSON.parse(readFileSync11(pkgPath, "utf-8"));
+      const pkgPath = path18.join(dir, "package.json");
+      if (existsSync19(pkgPath)) {
+        const pkg = JSON.parse(readFileSync14(pkgPath, "utf-8"));
         if (pkg.name === "prev-cli")
           return pkg.version;
       }
-      dir = path13.dirname(dir);
+      dir = path18.dirname(dir);
     }
   } catch {}
   return "unknown";
@@ -4651,7 +4955,7 @@ var { values, positionals } = parseArgs({
   allowPositionals: true
 });
 var command = positionals[0] || "dev";
-var rootDir = path13.resolve(values.cwd || (command === "config" || command === "create" ? "." : positionals[1]) || ".");
+var rootDir = path18.resolve(values.cwd || (command === "config" || command === "create" ? "." : positionals[1]) || ".");
 function printHelp() {
   console.log(`
 prev - Zero-config documentation site generator
@@ -4665,7 +4969,7 @@ Usage:
   prev migrate                Migrate configs from v1 to v2 format
   prev create [name]          Create preview in previews/<name>/ (default: "example")
   prev config [subcommand]    Manage configuration
-  prev clearcache             Clear Vite cache (.vite directory)
+  prev clearcache             Clear build cache
   prev clean [options]        Remove old prev-cli caches
 
 Config subcommands:
@@ -4769,30 +5073,18 @@ Examples:
   prev clean -d 7            Remove caches older than 7 days
 `);
 }
-async function clearViteCache(rootDir2) {
+async function clearBuildCache(rootDir2) {
   let cleared = 0;
   try {
     const prevCacheDir = await getCacheDir(rootDir2);
-    if (existsSync12(prevCacheDir)) {
+    if (existsSync19(prevCacheDir)) {
       rmSync4(prevCacheDir, { recursive: true });
       cleared++;
       console.log(`  \u2713 Removed ${prevCacheDir}`);
     }
   } catch {}
-  const viteCacheDir = path13.join(rootDir2, ".vite");
-  const nodeModulesVite = path13.join(rootDir2, "node_modules", ".vite");
-  if (existsSync12(viteCacheDir)) {
-    rmSync4(viteCacheDir, { recursive: true });
-    cleared++;
-    console.log(`  \u2713 Removed .vite/`);
-  }
-  if (existsSync12(nodeModulesVite)) {
-    rmSync4(nodeModulesVite, { recursive: true });
-    cleared++;
-    console.log(`  \u2713 Removed node_modules/.vite/`);
-  }
   if (cleared === 0) {
-    console.log("  No Vite cache found");
+    console.log("  No build cache found");
   } else {
     console.log(`
   Cleared ${cleared} cache director${cleared === 1 ? "y" : "ies"}`);
@@ -4832,7 +5124,7 @@ function handleConfig(rootDir2, subcommand) {
       break;
     }
     case "init": {
-      const targetPath = path13.join(rootDir2, ".prev.yaml");
+      const targetPath = path18.join(rootDir2, ".prev.yaml");
       if (configPath) {
         console.log(`
   Config already exists: ${configPath}
@@ -4891,8 +5183,8 @@ Available subcommands: show, init, path`);
   }
 }
 function createPreview(rootDir2, name) {
-  const previewDir = path13.join(rootDir2, "previews", name);
-  if (existsSync12(previewDir)) {
+  const previewDir = path18.join(rootDir2, "previews", name);
+  if (existsSync19(previewDir)) {
     console.error(`Preview "${name}" already exists at: ${previewDir}`);
     process.exit(1);
   }
@@ -5017,8 +5309,8 @@ export default function App() {
   .dark\\:text-white { color: #fff; }
 }
 `;
-  writeFileSync7(path13.join(previewDir, "App.tsx"), appTsx);
-  writeFileSync7(path13.join(previewDir, "styles.css"), stylesCss);
+  writeFileSync7(path18.join(previewDir, "App.tsx"), appTsx);
+  writeFileSync7(path18.join(previewDir, "styles.css"), stylesCss);
   console.log(`
   \u2728 Created preview: previews/${name}/
 
@@ -5067,7 +5359,7 @@ async function main() {
         createPreview(rootDir, previewName);
         break;
       case "clearcache":
-        await clearViteCache(rootDir);
+        await clearBuildCache(rootDir);
         break;
       case "config":
         handleConfig(rootDir, positionals[1]);