prev-cli 0.24.11 → 0.24.13

package/dist/cli.js

@@ -3,11 +3,11 @@
 // src/cli.ts
 import { parseArgs } from "util";
 import path11 from "path";
-import { existsSync as existsSync7, mkdirSync as mkdirSync3, writeFileSync as writeFileSync5, rmSync as rmSync3, readFileSync as readFileSync5 } from "fs";
-import { fileURLToPath as fileURLToPath3 } from "url";
+import { existsSync as existsSync8, mkdirSync as mkdirSync4, writeFileSync as writeFileSync6, rmSync as rmSync4, readFileSync as readFileSync7 } from "fs";
+import { fileURLToPath as fileURLToPath4 } from "url";
 
 // src/vite/start.ts
-import { createServer as createServer2, build as build2, preview } from "vite";
+import { createServer as createServer2, build as build3, preview } from "vite";
 
 // src/vite/config.ts
 import { createLogger } from "vite";
@@ -17,8 +17,8 @@ import remarkGfm from "remark-gfm";
 import rehypeHighlight from "rehype-highlight";
 import path8 from "path";
 import os from "os";
-import { fileURLToPath as fileURLToPath2 } from "url";
-import { existsSync as existsSync5, readFileSync as readFileSync4 } from "fs";
+import { fileURLToPath as fileURLToPath3 } from "url";
+import { existsSync as existsSync6, readFileSync as readFileSync6 } from "fs";
 
 // src/vite/plugins/pages-plugin.ts
 import path2 from "path";
@@ -402,10 +402,89 @@ function entryPlugin(rootDir) {
 // src/vite/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 { existsSync as existsSync2, readFileSync as readFileSync2 } from "fs";
+import * as yaml from "js-yaml";
+
+// src/vite/preview-types.ts
+import { z } from "zod";
+var configSchema = z.object({
+  tags: z.union([
+    z.array(z.string()),
+    z.string().transform((s) => [s])
+  ]).optional(),
+  category: z.string().optional(),
+  status: z.enum(["draft", "stable", "deprecated"]).optional(),
+  title: z.string().optional(),
+  description: z.string().optional(),
+  order: z.number().optional()
+});
+
+// src/vite/config-parser.ts
+async function parsePreviewConfig(filePath) {
+  if (!existsSync2(filePath)) {
+    return null;
+  }
+  try {
+    const content = readFileSync2(filePath, "utf-8");
+    const parsed = yaml.load(content);
+    const result = configSchema.safeParse(parsed);
+    if (result.success) {
+      return result.data;
+    }
+    console.warn(`Invalid config at ${filePath}:`, result.error.message);
+    return null;
+  } catch (err) {
+    console.warn(`Error parsing config at ${filePath}:`, err);
+    return null;
+  }
+}
+async function parseFlowDefinition(filePath) {
+  if (!existsSync2(filePath)) {
+    return null;
+  }
+  try {
+    const content = readFileSync2(filePath, "utf-8");
+    const parsed = yaml.load(content);
+    if (!parsed.name || !Array.isArray(parsed.steps)) {
+      return null;
+    }
+    return parsed;
+  } catch (err) {
+    console.warn(`Error parsing flow at ${filePath}:`, err);
+    return null;
+  }
+}
+async function parseAtlasDefinition(filePath) {
+  if (!existsSync2(filePath)) {
+    return null;
+  }
+  try {
+    const content = readFileSync2(filePath, "utf-8");
+    const parsed = yaml.load(content);
+    if (!parsed.name || !parsed.hierarchy?.root || !parsed.hierarchy?.areas) {
+      return null;
+    }
+    return parsed;
+  } catch (err) {
+    console.warn(`Error parsing atlas at ${filePath}:`, err);
+    return null;
+  }
+}
+
+// src/vite/previews.ts
+var PREVIEW_TYPE_FOLDERS = ["components", "screens", "flows", "atlas"];
+var TYPE_MAP = {
+  components: "component",
+  screens: "screen",
+  flows: "flow",
+  atlas: "atlas"
+};
 async function scanPreviews(rootDir) {
   const previewsDir = path4.join(rootDir, "previews");
-  if (!existsSync2(previewsDir)) {
+  if (!existsSync3(previewsDir)) {
     return [];
   }
   const entryFiles = await fg2.glob("**/{index.html,App.tsx,App.jsx,index.tsx,index.jsx}", {
@@ -434,7 +513,7 @@ async function scanPreviewFiles(previewDir) {
     ignore: ["node_modules/**", "dist/**"]
   });
   return files.map((file) => {
-    const content = readFileSync2(path4.join(previewDir, file), "utf-8");
+    const content = readFileSync3(path4.join(previewDir, file), "utf-8");
     const ext = path4.extname(file).slice(1);
     return {
       path: file,
@@ -462,10 +541,168 @@ async function buildPreviewConfig(previewDir) {
     tailwind: true
   };
 }
+async function scanPreviewUnits(rootDir) {
+  const previewsDir = path4.join(rootDir, "previews");
+  if (!existsSync3(previewsDir)) {
+    return [];
+  }
+  const units = [];
+  for (const typeFolder of PREVIEW_TYPE_FOLDERS) {
+    const typeDir = path4.join(previewsDir, typeFolder);
+    if (!existsSync3(typeDir))
+      continue;
+    const type = TYPE_MAP[typeFolder];
+    const entries = await fg2.glob("*/", {
+      cwd: typeDir,
+      onlyDirectories: true,
+      deep: 1
+    });
+    for (const entry of entries) {
+      const name = entry.replace(/\/$/, "");
+      const unitDir = path4.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);
+      units.push({
+        type,
+        name,
+        path: unitDir,
+        route: `/_preview/${typeFolder}/${name}`,
+        config,
+        files
+      });
+    }
+  }
+  return units;
+}
+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");
+  } else {
+    const priorities = [
+      "index.tsx",
+      "index.jsx",
+      "index.ts",
+      "index.js",
+      "App.tsx",
+      "App.jsx",
+      "index.html"
+    ];
+    index = priorities.find((p) => allFiles.includes(p));
+  }
+  const result = {
+    index: index || ""
+  };
+  if (type === "screen" && index) {
+    const stateFiles = allFiles.filter((f) => (f.endsWith(".tsx") || f.endsWith(".jsx")) && f !== index).sort();
+    if (stateFiles.length > 0) {
+      result.states = stateFiles;
+    }
+  }
+  if (type === "component") {
+    if (allFiles.includes("schema.ts")) {
+      result.schema = "schema.ts";
+    }
+  }
+  if (allFiles.includes("docs.mdx") || allFiles.includes("README.mdx")) {
+    result.docs = allFiles.find((f) => f.endsWith(".mdx"));
+  }
+  return result;
+}
 
-// src/preview-runtime/build.ts
+// src/preview-runtime/vendors.ts
 import { build } from "esbuild";
-async function buildPreviewHtml(config) {
+import { dirname } from "path";
+import { fileURLToPath as fileURLToPath2 } from "url";
+var __dirname2 = dirname(fileURLToPath2(import.meta.url));
+async function buildVendorBundle() {
+  try {
+    const entryCode = `
+      import * as React from 'react'
+      import * as ReactDOM from 'react-dom'
+      import { createRoot } from 'react-dom/client'
+      export { jsx, jsxs, Fragment } from 'react/jsx-runtime'
+      export { React, ReactDOM, createRoot }
+      export default React
+    `;
+    const result = await build({
+      stdin: {
+        contents: entryCode,
+        loader: "ts",
+        resolveDir: __dirname2
+      },
+      bundle: true,
+      write: false,
+      format: "esm",
+      target: "es2020",
+      minify: true
+    });
+    const jsFile = result.outputFiles?.find((f) => f.path.endsWith(".js")) || result.outputFiles?.[0];
+    if (!jsFile) {
+      return { success: false, code: "", error: "No output generated" };
+    }
+    return { success: true, code: jsFile.text };
+  } catch (err) {
+    return {
+      success: false,
+      code: "",
+      error: err instanceof Error ? err.message : String(err)
+    };
+  }
+}
+
+// src/preview-runtime/build-optimized.ts
+import { build as build2 } from "esbuild";
+
+// src/preview-runtime/tailwind.ts
+import { $ } from "bun";
+import { mkdtempSync, mkdirSync, writeFileSync as writeFileSync2, readFileSync as readFileSync4, rmSync } from "fs";
+import { join, dirname as dirname2 } from "path";
+import { tmpdir } from "os";
+async function compileTailwind(files) {
+  const tempDir = mkdtempSync(join(tmpdir(), "prev-tailwind-"));
+  try {
+    for (const file of files) {
+      const filePath = join(tempDir, file.path);
+      const parentDir = dirname2(filePath);
+      mkdirSync(parentDir, { recursive: true });
+      writeFileSync2(filePath, file.content);
+    }
+    const configContent = `
+      module.exports = {
+        content: [${JSON.stringify(tempDir + "/**/*.{tsx,jsx,ts,js,html}")}],
+      }
+    `;
+    const configPath = join(tempDir, "tailwind.config.cjs");
+    writeFileSync2(configPath, configContent);
+    const inputCss = `
+      @tailwind base;
+      @tailwind components;
+      @tailwind utilities;
+    `;
+    const inputPath = join(tempDir, "input.css");
+    writeFileSync2(inputPath, inputCss);
+    const outputPath = join(tempDir, "output.css");
+    await $`bunx tailwindcss -c ${configPath} -i ${inputPath} -o ${outputPath} --minify`.quiet();
+    const css = readFileSync4(outputPath, "utf-8");
+    return { success: true, css };
+  } catch (err) {
+    return {
+      success: false,
+      css: "",
+      error: err instanceof Error ? err.message : String(err)
+    };
+  } finally {
+    rmSync(tempDir, { recursive: true, force: true });
+  }
+}
+
+// src/preview-runtime/build-optimized.ts
+async function buildOptimizedPreview(config, options) {
   try {
     const virtualFs = {};
     for (const file of config.files) {
@@ -475,25 +712,18 @@ async function buildPreviewHtml(config) {
     }
     const entryFile = config.files.find((f) => f.path === config.entry);
     if (!entryFile) {
-      return { html: "", error: `Entry file not found: ${config.entry}` };
+      return { success: false, html: "", css: "", error: `Entry file not found: ${config.entry}` };
     }
     const hasDefaultExport = /export\s+default/.test(entryFile.content);
+    const userCssCollected = [];
     const entryCode = hasDefaultExport ? `
-      import React from 'react'
-      import { createRoot } from 'react-dom/client'
+      import React, { createRoot } from '${options.vendorPath}'
       import App from './${config.entry}'
-
       const root = createRoot(document.getElementById('root'))
       root.render(React.createElement(App))
-    ` : `
-      import './${config.entry}'
-    `;
-    const result = await build({
-      stdin: {
-        contents: entryCode,
-        loader: "tsx",
-        resolveDir: "/"
-      },
+    ` : `import './${config.entry}'`;
+    const result = await build2({
+      stdin: { contents: entryCode, loader: "tsx", resolveDir: "/" },
       bundle: true,
       write: false,
       format: "esm",
@@ -501,84 +731,78 @@ async function buildPreviewHtml(config) {
       jsxImportSource: "react",
       target: "es2020",
       minify: true,
-      plugins: [{
-        name: "virtual-fs",
-        setup(build2) {
-          build2.onResolve({ filter: /^react(-dom)?(\/.*)?$/ }, (args) => {
-            const parts = args.path.split("/");
-            const pkg = parts[0];
-            const subpath = parts.slice(1).join("/");
-            const url = subpath ? `https://esm.sh/${pkg}@18/${subpath}` : `https://esm.sh/${pkg}@18`;
-            return { path: url, external: true };
-          });
-          build2.onResolve({ filter: /^[^./]/ }, (args) => {
-            if (args.path.startsWith("https://"))
-              return;
-            return { path: `https://esm.sh/${args.path}`, external: true };
-          });
-          build2.onResolve({ filter: /^\./ }, (args) => {
-            let resolved = args.path.replace(/^\.\//, "");
-            if (!resolved.includes(".")) {
-              for (const ext of [".tsx", ".ts", ".jsx", ".js", ".css"]) {
-                if (virtualFs[resolved + ext]) {
-                  resolved = resolved + ext;
-                  break;
+      plugins: [
+        {
+          name: "optimized-preview",
+          setup(build3) {
+            build3.onResolve({ filter: new RegExp(options.vendorPath.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")) }, (args) => {
+              return { path: args.path, external: true };
+            });
+            build3.onResolve({ filter: /^react(-dom)?(\/.*)?$/ }, () => {
+              return { path: options.vendorPath, external: true };
+            });
+            build3.onResolve({ filter: /^\./ }, (args) => {
+              let resolved = args.path.replace(/^\.\//, "");
+              if (!resolved.includes(".")) {
+                for (const ext of [".tsx", ".ts", ".jsx", ".js", ".css"]) {
+                  if (virtualFs[resolved + ext]) {
+                    resolved = resolved + ext;
+                    break;
+                  }
                 }
               }
-            }
-            return { path: resolved, namespace: "virtual" };
-          });
-          build2.onLoad({ filter: /.*/, namespace: "virtual" }, (args) => {
-            const file = virtualFs[args.path];
-            if (file) {
-              if (file.loader === "css") {
-                const css = file.contents.replace(/`/g, "\\`").replace(/\$/g, "\\$");
-                return {
-                  contents: `
-                    const style = document.createElement('style');
-                    style.textContent = \`${css}\`;
-                    document.head.appendChild(style);
-                  `,
-                  loader: "js"
-                };
+              return { path: resolved, namespace: "virtual" };
+            });
+            build3.onLoad({ filter: /.*/, namespace: "virtual" }, (args) => {
+              const file = virtualFs[args.path];
+              if (file) {
+                if (file.loader === "css") {
+                  userCssCollected.push(file.contents);
+                  return { contents: "", loader: "js" };
+                }
+                return { contents: file.contents, loader: file.loader };
               }
-              return { contents: file.contents, loader: file.loader };
-            }
-            return { contents: "", loader: "empty" };
-          });
+              return { contents: "", loader: "empty" };
+            });
+          }
         }
-      }]
+      ]
     });
-    const jsFile = result.outputFiles.find((f) => f.path.endsWith(".js")) || result.outputFiles[0];
+    const jsFile = result.outputFiles?.find((f) => f.path.endsWith(".js")) || result.outputFiles?.[0];
     const jsCode = jsFile?.text || "";
+    let css = "";
+    if (config.tailwind) {
+      const tailwindResult = await compileTailwind(config.files.map((f) => ({ path: f.path, content: f.content })));
+      if (tailwindResult.success)
+        css = tailwindResult.css;
+    }
+    const userCss = userCssCollected.join(`
+`);
+    const allCss = css + `
+` + userCss;
     const html = `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Preview</title>
-  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
-  <style>
-    body { margin: 0; }
-    #root { min-height: 100vh; }
-  </style>
+  <style>${allCss}</style>
+  <style>body { margin: 0; } #root { min-height: 100vh; }</style>
 </head>
 <body>
   <div id="root"></div>
+  <script type="module" src="${options.vendorPath}"></script>
   <script type="module">${jsCode}</script>
 </body>
 </html>`;
-    return { html };
+    return { success: true, html, css: allCss };
   } catch (err) {
-    return {
-      html: "",
-      error: err instanceof Error ? err.message : String(err)
-    };
+    return { success: false, html: "", css: "", error: err instanceof Error ? err.message : String(err) };
   }
 }
 
 // src/vite/plugins/previews-plugin.ts
-import { existsSync as existsSync3, mkdirSync, rmSync, writeFileSync as writeFileSync2 } from "fs";
+import { existsSync as existsSync4, mkdirSync as mkdirSync2, rmSync as rmSync2, writeFileSync as writeFileSync3 } from "fs";
 import path5 from "path";
 var VIRTUAL_MODULE_ID2 = "virtual:prev-previews";
 var RESOLVED_VIRTUAL_MODULE_ID2 = "\x00" + VIRTUAL_MODULE_ID2;
@@ -596,12 +820,39 @@ function previewsPlugin(rootDir) {
     },
     async load(id) {
       if (id === RESOLVED_VIRTUAL_MODULE_ID2) {
-        const previews = await scanPreviews(rootDir);
-        return `export const previews = ${JSON.stringify(previews)};`;
+        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);
+}
+`;
       }
     },
     handleHotUpdate({ file, server }) {
-      if (file.includes("/previews/") && /\.(html|tsx|ts|jsx|js|css)$/.test(file)) {
+      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);
@@ -614,31 +865,43 @@ function previewsPlugin(rootDir) {
         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 (existsSync3(oldPreviewsDir)) {
-        rmSync(oldPreviewsDir, { recursive: true });
+      if (existsSync4(oldPreviewsDir)) {
+        rmSync2(oldPreviewsDir, { recursive: true });
       }
-      if (existsSync3(targetDir)) {
-        rmSync(targetDir, { recursive: true });
+      if (existsSync4(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(`    ✗ Vendor bundle: ${vendorResult.error}`);
+        return;
+      }
+      writeFileSync3(path5.join(vendorsDir, "runtime.js"), vendorResult.code);
+      console.log("    ✓ _vendors/runtime.js");
       for (const preview of previews) {
         const previewDir = path5.join(previewsDir, preview.name);
         try {
           const config = await buildPreviewConfig(previewDir);
-          const result = await buildPreviewHtml(config);
-          if (result.error) {
+          const depth = preview.name.split("/").length;
+          const vendorPath = "../".repeat(depth) + "_vendors/runtime.js";
+          const result = await buildOptimizedPreview(config, { vendorPath });
+          if (!result.success) {
             console.error(`    ✗ ${preview.name}: ${result.error}`);
             continue;
           }
           const outputDir = path5.join(targetDir, preview.name);
-          mkdirSync(outputDir, { recursive: true });
-          writeFileSync2(path5.join(outputDir, "index.html"), result.html);
+          mkdirSync2(outputDir, { recursive: true });
+          writeFileSync3(path5.join(outputDir, "index.html"), result.html);
           console.log(`    ✓ ${preview.name}`);
         } catch (err) {
           console.error(`    ✗ ${preview.name}: ${err}`);
@@ -758,15 +1021,15 @@ function validateConfig(raw) {
   return config;
 }
 // src/config/loader.ts
-import { readFileSync as readFileSync3, existsSync as existsSync4, writeFileSync as writeFileSync3 } from "fs";
+import { readFileSync as readFileSync5, existsSync as existsSync5, writeFileSync as writeFileSync4 } from "fs";
 import path6 from "path";
-import yaml from "js-yaml";
+import yaml2 from "js-yaml";
 function findConfigFile(rootDir) {
   const yamlPath = path6.join(rootDir, ".prev.yaml");
   const ymlPath = path6.join(rootDir, ".prev.yml");
-  if (existsSync4(yamlPath))
+  if (existsSync5(yamlPath))
     return yamlPath;
-  if (existsSync4(ymlPath))
+  if (existsSync5(ymlPath))
     return ymlPath;
   return null;
 }
@@ -776,8 +1039,8 @@ function loadConfig(rootDir) {
     return defaultConfig;
   }
   try {
-    const content = readFileSync3(configPath, "utf-8");
-    const raw = yaml.load(content);
+    const content = readFileSync5(configPath, "utf-8");
+    const raw = yaml2.load(content);
     return validateConfig(raw);
   } catch (error) {
     console.warn(`Warning: Failed to parse ${configPath}:`, error);
@@ -786,13 +1049,13 @@ function loadConfig(rootDir) {
 }
 function saveConfig(rootDir, config) {
   const configPath = findConfigFile(rootDir) || path6.join(rootDir, ".prev.yaml");
-  const content = yaml.dump(config, {
+  const content = yaml2.dump(config, {
     indent: 2,
     lineWidth: -1,
     quotingType: '"',
     forceQuotes: false
   });
-  writeFileSync3(configPath, content, "utf-8");
+  writeFileSync4(configPath, content, "utf-8");
 }
 function updateOrder(rootDir, pathKey, order) {
   const config = loadConfig(rootDir);
@@ -800,7 +1063,7 @@ function updateOrder(rootDir, pathKey, order) {
   saveConfig(rootDir, config);
 }
 // src/utils/debug.ts
-import { mkdirSync as mkdirSync2, writeFileSync as writeFileSync4 } from "fs";
+import { mkdirSync as mkdirSync3, writeFileSync as writeFileSync5 } from "fs";
 import path7 from "path";
 
 class DebugCollector {
@@ -880,11 +1143,11 @@ class DebugCollector {
       summary: this.generateSummary()
     };
     const debugDir = path7.join(this.rootDir, ".prev-debug");
-    mkdirSync2(debugDir, { recursive: true });
+    mkdirSync3(debugDir, { recursive: true });
     const date = new Date;
     const filename = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}-${String(date.getHours()).padStart(2, "0")}-${String(date.getMinutes()).padStart(2, "0")}-${String(date.getSeconds()).padStart(2, "0")}.json`;
     const filepath = path7.join(debugDir, filename);
-    writeFileSync4(filepath, JSON.stringify(report, null, 2));
+    writeFileSync5(filepath, JSON.stringify(report, null, 2));
     return filepath;
   }
 }
@@ -898,6 +1161,12 @@ function getDebugCollector() {
 }
 
 // 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 = [
@@ -952,12 +1221,12 @@ function createFriendlyLogger() {
   };
 }
 function findCliRoot2() {
-  let dir = path8.dirname(fileURLToPath2(import.meta.url));
+  let dir = path8.dirname(fileURLToPath3(import.meta.url));
   for (let i = 0;i < 10; i++) {
     const pkgPath = path8.join(dir, "package.json");
-    if (existsSync5(pkgPath)) {
+    if (existsSync6(pkgPath)) {
       try {
-        const pkg = JSON.parse(readFileSync4(pkgPath, "utf-8"));
+        const pkg = JSON.parse(readFileSync6(pkgPath, "utf-8"));
         if (pkg.name === "prev-cli") {
           return dir;
         }
@@ -968,11 +1237,11 @@ function findCliRoot2() {
       break;
     dir = parent;
   }
-  return path8.dirname(path8.dirname(fileURLToPath2(import.meta.url)));
+  return path8.dirname(path8.dirname(fileURLToPath3(import.meta.url)));
 }
 function findNodeModules(cliRoot2) {
   const localNodeModules = path8.join(cliRoot2, "node_modules");
-  if (existsSync5(path8.join(localNodeModules, "react"))) {
+  if (existsSync6(path8.join(localNodeModules, "react"))) {
     return localNodeModules;
   }
   let dir = cliRoot2;
@@ -980,7 +1249,7 @@ function findNodeModules(cliRoot2) {
     const parent = path8.dirname(dir);
     if (parent === dir)
       break;
-    if (path8.basename(parent) === "node_modules" && existsSync5(path8.join(parent, "react"))) {
+    if (path8.basename(parent) === "node_modules" && existsSync6(path8.join(parent, "react"))) {
       return parent;
     }
     dir = parent;
@@ -1064,8 +1333,8 @@ async function createViteConfig(options) {
                 return next();
               }
               const indexPath = path8.join(srcRoot2, "theme/index.html");
-              if (existsSync5(indexPath)) {
-                server.transformIndexHtml(req.url, readFileSync4(indexPath, "utf-8")).then((html) => {
+              if (existsSync6(indexPath)) {
+                server.transformIndexHtml(req.url, readFileSync6(indexPath, "utf-8")).then((html) => {
                   res.setHeader("Content-Type", "text/html");
                   res.end(html);
                 }).catch(next);
@@ -1093,34 +1362,110 @@ async function createViteConfig(options) {
             const urlPath = req.url?.split("?")[0] || "";
             if (urlPath === "/_preview-runtime") {
               const templatePath = path8.join(srcRoot2, "preview-runtime/template.html");
-              if (existsSync5(templatePath)) {
-                const html = readFileSync4(templatePath, "utf-8");
+              if (existsSync6(templatePath)) {
+                const html = readFileSync6(templatePath, "utf-8");
                 res.setHeader("Content-Type", "text/html");
                 res.end(html);
                 return;
               }
             }
             if (urlPath.startsWith("/_preview-config/")) {
-              const previewName = decodeURIComponent(urlPath.slice("/_preview-config/".length));
+              const pathAfterConfig = decodeURIComponent(urlPath.slice("/_preview-config/".length));
               const previewsDir = path8.join(rootDir, "previews");
-              const previewDir = path8.resolve(previewsDir, previewName);
-              if (!previewDir.startsWith(previewsDir)) {
-                res.statusCode = 403;
-                res.end("Forbidden");
-                return;
-              }
-              if (existsSync5(previewDir)) {
-                try {
-                  const config2 = await buildPreviewConfig(previewDir);
-                  res.setHeader("Content-Type", "application/json");
-                  res.end(JSON.stringify(config2));
+              const multiTypeMatch = pathAfterConfig.match(/^(components|screens|flows|atlas)\/(.+)$/);
+              if (multiTypeMatch) {
+                const [, type, name] = multiTypeMatch;
+                const configPathYaml = path8.join(previewsDir, type, name, "index.yaml");
+                const configPathYml = path8.join(previewsDir, type, name, "index.yml");
+                const configPath = existsSync6(configPathYaml) ? configPathYaml : configPathYml;
+                if (!configPath.startsWith(previewsDir)) {
+                  res.statusCode = 403;
+                  res.end("Forbidden");
                   return;
-                } catch (err) {
-                  console.error("Error building preview config:", err);
-                  res.statusCode = 500;
-                  res.end(JSON.stringify({ error: String(err) }));
+                }
+                if (existsSync6(configPath)) {
+                  try {
+                    if (type === "flows") {
+                      const flow = await parseFlowDefinition(configPath);
+                      if (flow) {
+                        res.setHeader("Content-Type", "application/json");
+                        res.end(JSON.stringify(flow));
+                        return;
+                      }
+                    } else if (type === "atlas") {
+                      const atlas = await parseAtlasDefinition(configPath);
+                      if (atlas) {
+                        res.setHeader("Content-Type", "application/json");
+                        res.end(JSON.stringify(atlas));
+                        return;
+                      }
+                    } else {
+                      const previewDir = path8.join(previewsDir, type, name);
+                      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" }));
+                    return;
+                  } catch (err) {
+                    console.error("Error building preview config:", err);
+                    res.statusCode = 500;
+                    res.end(JSON.stringify({ error: String(err) }));
+                    return;
+                  }
+                }
+              } else {
+                const previewDir = path8.resolve(previewsDir, pathAfterConfig);
+                if (!previewDir.startsWith(previewsDir)) {
+                  res.statusCode = 403;
+                  res.end("Forbidden");
                   return;
                 }
+                if (existsSync6(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;
+                  }
+                }
+              }
+            }
+            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>
+<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'
+
+    createRoot(document.getElementById('root')).render(
+      React.createElement(PreviewRouter, { type: '${singularType}', name: '${name}' })
+    )
+  </script>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>`;
+                const transformed = await server.transformIndexHtml(req.url, shellHtml);
+                res.setHeader("Content-Type", "text/html");
+                res.end(transformed);
+                return;
               }
             }
             if (urlPath.startsWith("/_preview/")) {
@@ -1132,9 +1477,9 @@ async function createViteConfig(options) {
                 if (!htmlPath.startsWith(previewsDir)) {
                   return next();
                 }
-                if (existsSync5(htmlPath)) {
+                if (existsSync6(htmlPath)) {
                   try {
-                    let html = readFileSync4(htmlPath, "utf-8");
+                    let html = readFileSync6(htmlPath, "utf-8");
                     const previewBase = `/_preview/${previewName}/`;
                     html = html.replace(/(src|href)=["']\.\/([^"']+)["']/g, `$1="${previewBase}$2"`);
                     const transformed = await server.transformIndexHtml(req.url, html);
@@ -1261,7 +1606,7 @@ async function findAvailablePort(minPort, maxPort) {
 
 // src/vite/start.ts
 import { exec } from "child_process";
-import { existsSync as existsSync6, rmSync as rmSync2, copyFileSync } from "fs";
+import { existsSync as existsSync7, rmSync as rmSync3, copyFileSync } from "fs";
 import path9 from "path";
 function printWelcome(type) {
   console.log();
@@ -1298,12 +1643,12 @@ function clearCache(rootDir) {
   const viteCacheDir = path9.join(rootDir, ".vite");
   const nodeModulesVite = path9.join(rootDir, "node_modules", ".vite");
   let cleared = 0;
-  if (existsSync6(viteCacheDir)) {
-    rmSync2(viteCacheDir, { recursive: true });
+  if (existsSync7(viteCacheDir)) {
+    rmSync3(viteCacheDir, { recursive: true });
     cleared++;
   }
-  if (existsSync6(nodeModulesVite)) {
-    rmSync2(nodeModulesVite, { recursive: true });
+  if (existsSync7(nodeModulesVite)) {
+    rmSync3(nodeModulesVite, { recursive: true });
     cleared++;
   }
   if (cleared === 0) {
@@ -1414,7 +1759,7 @@ async function buildSite(rootDir, options = {}) {
     base: options.base,
     debug: options.debug
   });
-  await build2(config);
+  await build3(config);
   const debugCollector = getDebugCollector();
   if (debugCollector) {
     debugCollector.startPhase("buildComplete");
@@ -1424,7 +1769,7 @@ async function buildSite(rootDir, options = {}) {
   const distDir = path9.join(rootDir, "dist");
   const indexPath = path9.join(distDir, "index.html");
   const notFoundPath = path9.join(distDir, "404.html");
-  if (existsSync6(indexPath)) {
+  if (existsSync7(indexPath)) {
     copyFileSync(indexPath, notFoundPath);
   }
   console.log();
@@ -1503,14 +1848,14 @@ async function cleanCache(options) {
 }
 
 // src/cli.ts
-import yaml2 from "js-yaml";
+import yaml3 from "js-yaml";
 function getVersion() {
   try {
-    let dir = path11.dirname(fileURLToPath3(import.meta.url));
+    let dir = path11.dirname(fileURLToPath4(import.meta.url));
     for (let i = 0;i < 5; i++) {
       const pkgPath = path11.join(dir, "package.json");
-      if (existsSync7(pkgPath)) {
-        const pkg = JSON.parse(readFileSync5(pkgPath, "utf-8"));
+      if (existsSync8(pkgPath)) {
+        const pkg = JSON.parse(readFileSync7(pkgPath, "utf-8"));
         if (pkg.name === "prev-cli")
           return pkg.version;
       }
@@ -1637,21 +1982,21 @@ async function clearViteCache(rootDir2) {
   let cleared = 0;
   try {
     const prevCacheDir = await getCacheDir(rootDir2);
-    if (existsSync7(prevCacheDir)) {
-      rmSync3(prevCacheDir, { recursive: true });
+    if (existsSync8(prevCacheDir)) {
+      rmSync4(prevCacheDir, { recursive: true });
       cleared++;
       console.log(`  ✓ Removed ${prevCacheDir}`);
     }
   } catch {}
   const viteCacheDir = path11.join(rootDir2, ".vite");
   const nodeModulesVite = path11.join(rootDir2, "node_modules", ".vite");
-  if (existsSync7(viteCacheDir)) {
-    rmSync3(viteCacheDir, { recursive: true });
+  if (existsSync8(viteCacheDir)) {
+    rmSync4(viteCacheDir, { recursive: true });
     cleared++;
     console.log(`  ✓ Removed .vite/`);
   }
-  if (existsSync7(nodeModulesVite)) {
-    rmSync3(nodeModulesVite, { recursive: true });
+  if (existsSync8(nodeModulesVite)) {
+    rmSync4(nodeModulesVite, { recursive: true });
     cleared++;
     console.log(`  ✓ Removed node_modules/.vite/`);
   }
@@ -1678,7 +2023,7 @@ function handleConfig(rootDir2, subcommand) {
         console.log(`  File: (none - using defaults)
 `);
       }
-      const yamlOutput = yaml2.dump(config, {
+      const yamlOutput = yaml3.dump(config, {
         indent: 2,
         lineWidth: -1,
         quotingType: '"',
@@ -1732,7 +2077,7 @@ order: {}
   #   - "getting-started.md"
   #   - "guides/"
 `;
-      writeFileSync5(targetPath, configContent, "utf-8");
+      writeFileSync6(targetPath, configContent, "utf-8");
       console.log(`
   ✨ Created ${targetPath}
 `);
@@ -1756,11 +2101,11 @@ Available subcommands: show, init, path`);
 }
 function createPreview(rootDir2, name) {
   const previewDir = path11.join(rootDir2, "previews", name);
-  if (existsSync7(previewDir)) {
+  if (existsSync8(previewDir)) {
     console.error(`Preview "${name}" already exists at: ${previewDir}`);
     process.exit(1);
   }
-  mkdirSync3(previewDir, { recursive: true });
+  mkdirSync4(previewDir, { recursive: true });
   const appTsx = `import { useState } from 'react'
 import './styles.css'
 
@@ -1881,8 +2226,8 @@ export default function App() {
   .dark\\:text-white { color: #fff; }
 }
 `;
-  writeFileSync5(path11.join(previewDir, "App.tsx"), appTsx);
-  writeFileSync5(path11.join(previewDir, "styles.css"), stylesCss);
+  writeFileSync6(path11.join(previewDir, "App.tsx"), appTsx);
+  writeFileSync6(path11.join(previewDir, "styles.css"), stylesCss);
   console.log(`
   ✨ Created preview: previews/${name}/