@onlook/storybook-plugin 0.4.0-beta.5 → 0.4.0-beta.6

package/dist/index.js

@@ -1,9 +1,8 @@
-import fs, { existsSync } from 'fs';
-import path3, { dirname, join, relative } from 'path';
+import fs2, { existsSync } from 'fs';
+import path4, { dirname, join, relative } from 'path';
 import { fileURLToPath } from 'url';
 import { minimatch } from 'minimatch';
-import * as prettier from 'prettier';
-import { Project, SyntaxKind, ts, TypeFlags } from 'ts-morph';
+import { Project, ts, TypeFlags } from 'ts-morph';
 import { glob } from 'glob';
 import { withDefaultConfig } from 'react-docgen-typescript';
 import generateModule from '@babel/generator';
@@ -15,7 +14,7 @@ import { chromium } from 'playwright';
 
 // src/storybook-onlook-plugin.ts
 function getComponentInfo(componentDir, projectRootDir) {
-  const fileParseInfo = path3.parse(componentDir);
+  const fileParseInfo = path4.parse(componentDir);
   const prefixExtRegex = new RegExp(`(\\.\\w+)+(?=\\${fileParseInfo.ext}$)`);
   const prefixExtRegexMatch = fileParseInfo.base.match(prefixExtRegex);
   const prefixExt = prefixExtRegexMatch ? prefixExtRegexMatch[0] : void 0;
@@ -187,55 +186,116 @@ var throwErr = (params) => {
   console.error(`[ASG:${errorCode}] ${errorDefinition[errorCode].title}
 ${detailText}`);
 };
-async function genReactStoryFile({
-  componentName,
-  fileBase,
-  fileName,
-  filePrefixExt,
-  path: path42,
-  fileExt,
-  relativeSourceFilePath,
-  sourceFile,
-  prettierConfigPath,
-  storiesFolder
-}) {
+function genReactStoryFile(input) {
+  const {
+    componentName,
+    fileBase,
+    fileName,
+    filePrefixExt,
+    relativeSourceFilePath,
+    sourceFile,
+    storiesFolder
+  } = input;
   if (!componentName || !fileBase) {
-    throwErr({
-      errorCode: "EC03"
-    });
-    return;
+    throwErr({ errorCode: "EC03" });
+    return null;
   }
-  const { propTypes } = getReactPropTypes({
-    sourceFile,
-    componentName
-  });
+  const { propTypes } = getReactPropTypes({ sourceFile, componentName });
   const pascalComponentName = pascalCase(componentName);
   if (!propTypes) {
-    throwErr({
-      errorCode: "EC04"
-    });
-    return;
+    throwErr({ errorCode: "EC04" });
+    return null;
   }
-  const defaultExportDeclaration = sourceFile.getExportedDeclarations();
+  const exportedDeclarations = sourceFile.getExportedDeclarations();
   let isDefaultExportComponent = false;
-  defaultExportDeclaration.forEach((declaration, exportName) => {
+  exportedDeclarations.forEach((declaration, exportName) => {
     if (exportName === "default") {
       const defaultExportName = declaration[0]?.getSymbol()?.getName();
       isDefaultExportComponent = defaultExportName === pascalComponentName;
     }
   });
   const pathToComponent = storiesFolder ? "../" : "./";
-  const initialCode = `
+  const importSuffix = filePrefixExt || "";
+  const importStatement = isDefaultExportComponent ? `import ${pascalComponentName} from "${pathToComponent}${fileName}${importSuffix}";` : `import { ${pascalComponentName} } from "${pathToComponent}${fileName}${importSuffix}";`;
+  const args = {};
+  for (const prop of propTypes) {
+    if (prop.isOptional) {
+      args[prop.name] = "undefined";
+      continue;
+    }
+    if (prop.type.includes("boolean")) {
+      args[prop.name] = "false";
+    } else if (prop.value.length > 0) {
+      args[prop.name] = `"${prop.value[0]}"`;
+    } else if (prop.type.includes("string") || prop.type.includes("String")) {
+      args[prop.name] = `"${prop.name}"`;
+    } else if (prop.type.includes("number") || prop.type.includes("Number")) {
+      args[prop.name] = "0";
+    } else {
+      args[prop.name] = "undefined";
+    }
+  }
+  const argTypes = {};
+  for (const prop of propTypes) {
+    if (prop.type[0] === "boolean") {
+      argTypes[prop.name] = '{ control: "boolean" }';
+    } else if (prop.type[0] === "object") {
+      argTypes[prop.name] = '{ control: "object" }';
+    } else if (prop.value.length > 1) {
+      const options = prop.value.map((v) => `"${v}"`).join(", ");
+      argTypes[prop.name] = `{ control: "select", options: [${options}] }`;
+    } else if (prop.type[0] === "string") {
+      argTypes[prop.name] = '{ control: "text" }';
+    } else if (prop.type[0] === "number") {
+      argTypes[prop.name] = '{ control: "number" }';
+    }
+  }
+  const argsStr = formatObjectEntries(args, "  ");
+  const argTypesStr = formatObjectEntries(argTypes, "  ");
+  const storyTitle = buildStoryTitle(relativeSourceFilePath, pascalComponentName);
+  return `import * as _React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
+${importStatement}
 
-${isDefaultExportComponent ? `import ${pascalComponentName} from "${pathToComponent}${fileName}${filePrefixExt || ""}";` : `import { ${pascalComponentName} } from "${pathToComponent}${fileName}${filePrefixExt || ""}";`}
+// Inline error boundary \u2014 catches render crashes from missing providers/context
+class _StoryErrorBoundary extends _React.Component<
+  { children: _React.ReactNode },
+  { error: Error | null }
+> {
+  state: { error: Error | null } = { error: null };
+  static getDerivedStateFromError(error: Error) { return { error }; }
+  render() {
+    if (this.state.error) {
+      return (
+        <div style={{ padding: 24, fontFamily: "system-ui", color: "#888", fontSize: 13 }}>
+          <div style={{ fontWeight: 600, marginBottom: 8, color: "#c44" }}>
+            Cannot render in isolation
+          </div>
+          <div style={{ fontSize: 12, opacity: 0.7 }}>
+            {this.state.error.message}
+          </div>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
 
 const meta: Meta<typeof ${pascalComponentName}> = {
-  title: "components/${pascalComponentName}",
-  component: (args) => <${componentName} {...args} />,
+  title: "${storyTitle}",
+  component: ${pascalComponentName},
   tags: ["autodocs"],
-  args: {},
-  argTypes: {},
+  args: {${argsStr}},
+  argTypes: {${argTypesStr}},
+  decorators: [
+    (Story) => (
+      <_StoryErrorBoundary>
+        <_React.Suspense fallback={<div style={{ padding: 24, color: "#888" }}>Loading...</div>}>
+          <Story />
+        </_React.Suspense>
+      </_StoryErrorBoundary>
+    ),
+  ],
 };
 
 export default meta;
@@ -243,66 +303,26 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {};
 `;
-  const componentCode = `${pascalComponentName}`;
-  const args = {};
-  propTypes.forEach((prop) => {
-    if (prop.isOptional) return args[prop.name] = "undefined";
-    let value = prop.value.length > 0 ? `"${prop.value[0]}"` : "undefined";
-    if (prop.type.includes("boolean")) value = true;
-    args[prop.name] = value;
-  });
-  const argTypes = {};
-  propTypes.forEach((prop) => {
-    if (prop.type[0] === "boolean") {
-      return argTypes[prop.name] = {
-        control: "boolean"
-      };
-    }
-    if (prop.type[0] === "object") {
-      return argTypes[prop.name] = {
-        control: "object"
-      };
-    }
-    if (prop.value.length > 1) {
-      return argTypes[prop.name] = {
-        control: "select",
-        options: prop.value
-      };
-    } else {
-      if (prop.type[0] === "string") {
-        return argTypes[prop.name] = {
-          control: "text"
-        };
-      }
-      if (prop.type[0] === "number") {
-        return argTypes[prop.name] = {
-          control: "number"
-        };
-      }
-    }
-  });
-  return {
-    fileOptions: {
-      componentName,
-      fileBase,
-      fileName,
-      filePrefixExt,
-      path: path42,
-      fileExt,
-      relativeSourceFilePath,
-      sourceFile,
-      prettierConfigPath
-    },
-    generateOptions: {
-      fileExt: ".stories.tsx",
-      initialCode,
-      meta: {
-        component: componentCode,
-        args,
-        argTypes
-      }
-    }
-  };
+}
+function buildStoryTitle(relPath, componentName) {
+  let p = relPath.replace(/^src\//, "");
+  const lastSlash = p.lastIndexOf("/");
+  if (lastSlash !== -1) {
+    p = p.substring(0, lastSlash);
+  } else {
+    p = "";
+  }
+  p = p.replace(/\(([^)]+)\)/g, "$1");
+  p = p.replace(/\/+/g, "/").replace(/^\/|\/$/g, "");
+  return p ? `${p}/${componentName}` : componentName;
+}
+function formatObjectEntries(obj, indent) {
+  const entries = Object.entries(obj);
+  if (entries.length === 0) return "";
+  const lines = entries.map(([key, value]) => `${indent}${key}: ${value},`);
+  return `
+${lines.join("\n")}
+`;
 }
 function createLightProject() {
   return new Project({
@@ -310,25 +330,12 @@ function createLightProject() {
     useInMemoryFileSystem: true
   });
 }
-var resolvedPrettierConfig = null;
-async function getPrettierConfig(prettierConfigPath) {
-  if (resolvedPrettierConfig) return resolvedPrettierConfig;
-  resolvedPrettierConfig = prettierConfigPath ? await prettier.resolveConfig(prettierConfigPath) : {
-    semi: true,
-    trailingComma: "all",
-    singleQuote: false,
-    printWidth: 80,
-    tabWidth: 2,
-    endOfLine: "lf"
-  };
-  return resolvedPrettierConfig ?? {};
-}
 async function genStoryFile({
   options,
   id,
   projectRootDir
 }) {
-  if (id.includes(".stories")) return;
+  if (id.includes(".stories")) return null;
   const {
     fileBase,
     fileName,
@@ -338,145 +345,45 @@ async function genStoryFile({
     relativeSourceFilePath
   } = getComponentInfo(id, projectRootDir);
   try {
-    const sourceCode = fs.readFileSync(id, "utf-8");
+    const sourceCode = fs2.readFileSync(id, "utf-8");
     const sourceProject = createLightProject();
     const sourceFile = sourceProject.createSourceFile(fileBase || "temp.tsx", sourceCode);
-    let genStoryFileOptions;
-    if (options.preset === "react") {
-      genStoryFileOptions = await genReactStoryFile({
-        componentName,
-        fileBase,
-        fileName,
-        path: id,
-        fileExt,
-        filePrefixExt,
-        relativeSourceFilePath,
-        sourceFile,
-        prettierConfigPath: options.prettierConfigPath,
-        storiesFolder: options.storiesFolder
-      });
-    } else {
+    if (options.preset !== "react") {
       throwErr({
         errorCode: "EC02",
         detail: `Preset ${options.preset} is not supported in this fork. Only "react" is supported.`
       });
       return;
     }
-    if (!genStoryFileOptions) {
-      return;
-    }
-    const storiesFilePath = genStoryFileOptions.fileOptions.path.replace(
-      genStoryFileOptions.fileOptions.filePrefixExt ? genStoryFileOptions.fileOptions.filePrefixExt : `${genStoryFileOptions.fileOptions.fileExt}`,
-      genStoryFileOptions.generateOptions.fileExt
-    );
-    let storiesFolderPath = "";
-    let storiesFilePathWithStoriesFolder = "";
+    const storyCode = genReactStoryFile({
+      componentName,
+      fileBase,
+      fileName,
+      path: id,
+      fileExt,
+      filePrefixExt,
+      relativeSourceFilePath,
+      sourceFile,
+      storiesFolder: options.storiesFolder
+    });
+    if (!storyCode) return null;
+    const parsed = path4.parse(id);
+    const storyFileName = `${fileName}.stories.tsx`;
+    let storiesFilePath;
     if (options.storiesFolder) {
-      const splitStoriesFilePath = storiesFilePath.split("/");
-      const fileNameWithStoriesFolder = `${options.storiesFolder}/${splitStoriesFilePath[splitStoriesFilePath.length - 1]}`;
-      storiesFilePathWithStoriesFolder = storiesFilePath.replace(
-        `${genStoryFileOptions.fileOptions.fileName}${genStoryFileOptions.generateOptions.fileExt}`,
-        fileNameWithStoriesFolder
-      );
-      storiesFolderPath = storiesFilePath.replace(
-        `${genStoryFileOptions.fileOptions.fileName}${genStoryFileOptions.generateOptions.fileExt}`,
-        options.storiesFolder || ""
-      );
-    }
-    const storiesFilePathFinal = options.storiesFolder ? storiesFilePathWithStoriesFolder : storiesFilePath;
-    const storyExists = fs.existsSync(storiesFilePathFinal);
-    if (!storyExists) {
-      if (options.storiesFolder) {
-        fs.mkdirSync(storiesFolderPath, { recursive: true });
-      }
-      fs.writeFileSync(
-        storiesFilePathFinal,
-        genStoryFileOptions.generateOptions.initialCode
-      );
-    }
-    const storiesProject = new Project();
-    const storiesSourceFile = storiesProject.addSourceFileAtPath(storiesFilePathFinal);
-    const meta = storiesSourceFile.getVariableDeclaration("meta");
-    if (!meta || !meta.getInitializerIfKind(SyntaxKind.ObjectLiteralExpression)) {
-      throwErr({
-        errorCode: "EC05",
-        detail: `Could not find meta in file ${storiesSourceFile.getFilePath()}`
-      });
-      return;
-    }
-    const initializer = meta.getInitializerIfKindOrThrow(
-      SyntaxKind.ObjectLiteralExpression
-    );
-    if (!initializer) {
-      throwErr({ errorCode: "EC06" });
-      return;
-    }
-    if (genStoryFileOptions.generateOptions.meta.render) {
-      let renderProperty = initializer.getProperty("render");
-      while (!renderProperty) {
-        initializer.addPropertyAssignment({
-          name: "render",
-          initializer: "() => {}"
-        });
-        renderProperty = initializer.getProperty("render");
-      }
-      renderProperty.set({
-        initializer: genStoryFileOptions.generateOptions.meta.render
-      });
-    }
-    if (genStoryFileOptions.generateOptions.meta.component) {
-      let componentProperty = initializer.getProperty("component");
-      while (!componentProperty) {
-        initializer.addPropertyAssignment({
-          name: "component",
-          initializer: "null"
-        });
-        componentProperty = initializer.getProperty("component");
-      }
-      componentProperty.set({
-        initializer: genStoryFileOptions.generateOptions.meta.component
-      });
-    }
-    if (genStoryFileOptions.generateOptions.meta.args) {
-      let argsProperty = initializer.getProperty("args");
-      while (!argsProperty) {
-        initializer.addPropertyAssignment({
-          name: "args",
-          initializer: "{}"
-        });
-        argsProperty = initializer.getProperty("args");
-      }
-      const argText = Object.entries(genStoryFileOptions.generateOptions.meta.args).map((x) => x.join(":")).join(", ");
-      argsProperty.set({ initializer: `{ ${argText} }` });
+      const storiesFolderPath = path4.join(parsed.dir, options.storiesFolder);
+      fs2.mkdirSync(storiesFolderPath, { recursive: true });
+      storiesFilePath = path4.join(storiesFolderPath, storyFileName);
+    } else {
+      storiesFilePath = path4.join(parsed.dir, storyFileName);
     }
-    if (genStoryFileOptions.generateOptions.meta.argTypes) {
-      let argTypesProperty = initializer.getProperty("argTypes");
-      while (!argTypesProperty) {
-        initializer.addPropertyAssignment({
-          name: "argTypes",
-          initializer: "{}"
-        });
-        argTypesProperty = initializer.getProperty("argTypes");
-      }
-      const argTypesText = JSON.stringify(
-        genStoryFileOptions.generateOptions.meta.argTypes,
-        null,
-        ""
-      );
-      argTypesProperty.set({ initializer: `${argTypesText}` });
+    if (!fs2.existsSync(storiesFilePath)) {
+      fs2.writeFileSync(storiesFilePath, storyCode);
     }
-    await storiesSourceFile.save();
-    const fileContent = fs.readFileSync(storiesFilePathFinal, "utf-8");
-    const config = await getPrettierConfig(
-      genStoryFileOptions.fileOptions.prettierConfigPath
-    );
-    const formattedContent = await prettier.format(fileContent, {
-      ...config,
-      parser: "typescript"
-    });
-    fs.writeFileSync(storiesFilePathFinal, formattedContent);
+    return storiesFilePath;
   } catch (err) {
     console.warn(`[ASG] Failed to generate story for ${id}:`, err);
+    return null;
   }
 }
 async function getAllFilePaths({
@@ -485,10 +392,10 @@ async function getAllFilePaths({
   projectRootDir
 }) {
   const fullPatterns = patterns.map(
-    (p) => path3.join(projectRootDir, p).replace(/\\/g, "/")
+    (p) => path4.join(projectRootDir, p).replace(/\\/g, "/")
   );
   const ignoreFullPatterns = ignorePatterns?.map(
-    (p) => path3.join(projectRootDir, p).replace(/\\/g, "/")
+    (p) => path4.join(projectRootDir, p).replace(/\\/g, "/")
   );
   const filePaths = await glob(fullPatterns, {
     ignore: ignoreFullPatterns,
@@ -497,12 +404,37 @@ async function getAllFilePaths({
   return filePaths.map((p) => p.replace(/\\/g, "/"));
 }
 var PLUGIN_NAME = "auto-story-generator";
-var DEFAULT_BATCH_SIZE = 20;
-var DEFAULT_CONCURRENCY = 4;
+var DEFAULT_BATCH_SIZE = 50;
+var DEFAULT_CONCURRENCY = 8;
+var CACHE_FILE_NAME = ".asg-cache.json";
 var mtimeCache = /* @__PURE__ */ new Map();
+function loadDiskCache(projectRootDir) {
+  try {
+    const cachePath = path4.join(projectRootDir, CACHE_FILE_NAME);
+    if (fs2.existsSync(cachePath)) {
+      const data = JSON.parse(fs2.readFileSync(cachePath, "utf-8"));
+      for (const [key, value] of Object.entries(data)) {
+        mtimeCache.set(key, value);
+      }
+      console.log(`[ASG] Loaded ${mtimeCache.size} entries from disk cache`);
+    }
+  } catch {
+  }
+}
+function saveDiskCache(projectRootDir) {
+  try {
+    const cachePath = path4.join(projectRootDir, CACHE_FILE_NAME);
+    const data = {};
+    for (const [key, value] of mtimeCache) {
+      data[key] = value;
+    }
+    fs2.writeFileSync(cachePath, JSON.stringify(data));
+  } catch {
+  }
+}
 function hasFileChanged(filePath) {
   try {
-    const stat = fs.statSync(filePath);
+    const stat = fs2.statSync(filePath);
     const mtime = stat.mtimeMs;
     const cached = mtimeCache.get(filePath);
     if (cached === mtime) return false;
@@ -514,24 +446,25 @@ function hasFileChanged(filePath) {
   }
 }
 function getStoryFilePath(filePath, storiesFolder) {
-  const parsed = path3.parse(filePath);
+  const parsed = path4.parse(filePath);
   const storyName = `${parsed.name}.stories.tsx`;
   if (storiesFolder) {
-    return path3.join(parsed.dir, storiesFolder, storyName);
+    return path4.join(parsed.dir, storiesFolder, storyName);
   }
-  return path3.join(parsed.dir, storyName);
+  return path4.join(parsed.dir, storyName);
 }
-async function processBatch(files, options, projectRootDir, concurrency) {
+async function processBatch(files, options, projectRootDir, concurrency, generatedFiles) {
   let processed = 0;
   for (let i = 0; i < files.length; i += concurrency) {
     const chunk = files.slice(i, i + concurrency);
     await Promise.all(
       chunk.map(async (filePath) => {
-        await genStoryFile({
+        const result = await genStoryFile({
           options,
           id: filePath,
           projectRootDir
         });
+        if (result) generatedFiles.push(result);
         processed++;
       })
     );
@@ -543,6 +476,7 @@ function createAutoStoryPlugin(options) {
   const batchSize = options.batchSize ?? DEFAULT_BATCH_SIZE;
   const concurrency = options.concurrency ?? DEFAULT_CONCURRENCY;
   let hasRun = false;
+  const allGeneratedFiles = [];
   console.log("[ASG] Plugin created", {
     preset: options.preset,
     imports: options.imports,
@@ -558,6 +492,7 @@ function createAutoStoryPlugin(options) {
       console.log("[ASG] Skipping \u2014 isGenerateStoriesFileAtBuild is false");
       return;
     }
+    loadDiskCache(projectRootDir);
     const patterns = options.imports ?? ["src/**/*.tsx"];
     const ignorePatterns = options.ignores ?? [];
     console.log(`[ASG] Scanning for components: ${patterns.join(", ")}`);
@@ -570,7 +505,7 @@ function createAutoStoryPlugin(options) {
       if (filePath.includes(".stories")) return false;
       if (options.cacheEnabled !== false) {
         const storyPath = getStoryFilePath(filePath, options.storiesFolder);
-        const storyExists = fs.existsSync(storyPath);
+        const storyExists = fs2.existsSync(storyPath);
         if (!hasFileChanged(filePath) && storyExists) return false;
       }
       return true;
@@ -581,7 +516,13 @@ function createAutoStoryPlugin(options) {
     let totalProcessed = 0;
     for (let i = 0; i < filesToProcess.length; i += batchSize) {
       const batch = filesToProcess.slice(i, i + batchSize);
-      const count = await processBatch(batch, options, projectRootDir, concurrency);
+      const count = await processBatch(
+        batch,
+        options,
+        projectRootDir,
+        concurrency,
+        allGeneratedFiles
+      );
       totalProcessed += count;
       if (options.onProgress) {
         options.onProgress(totalProcessed, filesToProcess.length);
@@ -590,14 +531,26 @@ function createAutoStoryPlugin(options) {
         await new Promise((r) => setTimeout(r, 0));
       }
     }
+    saveDiskCache(projectRootDir);
     console.log(`[ASG] Generated stories for ${totalProcessed} components`);
   }
   return {
     name: PLUGIN_NAME,
     // configureServer fires for Vite dev server (Storybook's use case)
-    async configureServer() {
+    // biome-ignore lint/suspicious/noExplicitAny: Vite server type varies across versions
+    async configureServer(server) {
       console.log("[ASG] configureServer hook fired");
+      const beforeCount = allGeneratedFiles.length;
       await generateAllStories();
+      if (allGeneratedFiles.length > beforeCount && allGeneratedFiles.length > 0) {
+        const firstFile = allGeneratedFiles[0];
+        if (firstFile && server?.watcher?.emit) {
+          console.log(
+            `[ASG] Triggering Storybook rescan (${allGeneratedFiles.length} stories)`
+          );
+          server.watcher.emit("change", firstFile);
+        }
+      }
     },
     // buildStart fires for builds (fallback)
     async buildStart() {
@@ -641,12 +594,12 @@ var parser = withDefaultConfig({
   }
 });
 function resolveComponentPath(storyFilePath) {
-  const dir = path3.dirname(storyFilePath);
-  const parentDir = path3.dirname(dir);
-  const storyName = path3.basename(storyFilePath);
+  const dir = path4.dirname(storyFilePath);
+  const parentDir = path4.dirname(dir);
+  const storyName = path4.basename(storyFilePath);
   const componentName = storyName.replace(".stories.tsx", ".tsx");
-  const componentPath = path3.join(parentDir, componentName);
-  return fs.existsSync(componentPath) ? componentPath : null;
+  const componentPath = path4.join(parentDir, componentName);
+  return fs2.existsSync(componentPath) ? componentPath : null;
 }
 function generateArgTypes(componentPath) {
   try {
@@ -687,7 +640,7 @@ function generateArgTypes(componentPath) {
 }
 function enrichStoryFile(storyFilePath) {
   try {
-    const content = fs.readFileSync(storyFilePath, "utf-8");
+    const content = fs2.readFileSync(storyFilePath, "utf-8");
     if (content.includes(FIXED_MARKER)) {
       return;
     }
@@ -706,8 +659,8 @@ function enrichStoryFile(storyFilePath) {
 export default meta;`
     );
     if (enriched !== content) {
-      fs.writeFileSync(storyFilePath, enriched);
-      console.log(`[AutoStories] Enriched ${path3.basename(storyFilePath)} with argTypes`);
+      fs2.writeFileSync(storyFilePath, enriched);
+      console.log(`[AutoStories] Enriched ${path4.basename(storyFilePath)} with argTypes`);
     }
   } catch (err) {
     console.error(`[AutoStories] Failed to enrich story: ${storyFilePath}`, err);
@@ -735,7 +688,7 @@ function componentLocPlugin(options = {}) {
         sourceFilename: filepath
       });
       let mutated = false;
-      const relativePath = path3.relative(root, filepath);
+      const relativePath = path4.relative(root, filepath);
       traverse(ast, {
         JSXElement(nodePath) {
           const opening = nodePath.node.openingElement;
@@ -772,9 +725,9 @@ function componentLocPlugin(options = {}) {
     }
   };
 }
-var CACHE_DIR = path3.join(process.cwd(), ".storybook-cache");
-var SCREENSHOTS_DIR = path3.join(CACHE_DIR, "screenshots");
-var MANIFEST_PATH = path3.join(CACHE_DIR, "manifest.json");
+var CACHE_DIR = path4.join(process.cwd(), ".storybook-cache");
+var SCREENSHOTS_DIR = path4.join(CACHE_DIR, "screenshots");
+var MANIFEST_PATH = path4.join(CACHE_DIR, "manifest.json");
 var VIEWPORT_WIDTH = 1920;
 var VIEWPORT_HEIGHT = 1080;
 var MIN_COMPONENT_WIDTH = 420;
@@ -782,30 +735,30 @@ var MIN_COMPONENT_HEIGHT = 280;
 
 // src/utils/fileSystem/fileSystem.ts
 function ensureCacheDirectories() {
-  if (!fs.existsSync(CACHE_DIR)) {
-    fs.mkdirSync(CACHE_DIR, { recursive: true });
+  if (!fs2.existsSync(CACHE_DIR)) {
+    fs2.mkdirSync(CACHE_DIR, { recursive: true });
   }
-  if (!fs.existsSync(SCREENSHOTS_DIR)) {
-    fs.mkdirSync(SCREENSHOTS_DIR, { recursive: true });
+  if (!fs2.existsSync(SCREENSHOTS_DIR)) {
+    fs2.mkdirSync(SCREENSHOTS_DIR, { recursive: true });
   }
 }
 function computeFileHash(filePath) {
-  if (!fs.existsSync(filePath)) {
+  if (!fs2.existsSync(filePath)) {
     return "";
   }
-  const content = fs.readFileSync(filePath, "utf-8");
+  const content = fs2.readFileSync(filePath, "utf-8");
   return crypto.createHash("sha256").update(content).digest("hex");
 }
 function loadManifest() {
-  if (fs.existsSync(MANIFEST_PATH)) {
-    const content = fs.readFileSync(MANIFEST_PATH, "utf-8");
+  if (fs2.existsSync(MANIFEST_PATH)) {
+    const content = fs2.readFileSync(MANIFEST_PATH, "utf-8");
     return JSON.parse(content);
   }
   return { stories: {} };
 }
 function saveManifest(manifest) {
   ensureCacheDirectories();
-  fs.writeFileSync(MANIFEST_PATH, JSON.stringify(manifest, null, 2));
+  fs2.writeFileSync(MANIFEST_PATH, JSON.stringify(manifest, null, 2));
 }
 function updateManifest(storyId, sourcePath, fileHash, boundingBox) {
   const manifest = loadManifest();
@@ -831,8 +784,8 @@ async function getBrowser() {
   return browser;
 }
 function getScreenshotPath(storyId, theme) {
-  const storyDir = path3.join(SCREENSHOTS_DIR, storyId);
-  return path3.join(storyDir, `${theme}.png`);
+  const storyDir = path4.join(SCREENSHOTS_DIR, storyId);
+  return path4.join(storyDir, `${theme}.png`);
 }
 async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, height = VIEWPORT_HEIGHT, storybookUrl = "http://localhost:6006", timeoutMs = 3e4) {
   const browser2 = await getBrowser();
@@ -919,9 +872,9 @@ async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, h
 async function generateScreenshot(storyId, theme, storybookUrl = "http://localhost:6006", timeoutMs = 3e4) {
   try {
     ensureCacheDirectories();
-    const storyDir = path3.join(SCREENSHOTS_DIR, storyId);
-    if (!fs.existsSync(storyDir)) {
-      fs.mkdirSync(storyDir, { recursive: true });
+    const storyDir = path4.join(SCREENSHOTS_DIR, storyId);
+    if (!fs2.existsSync(storyDir)) {
+      fs2.mkdirSync(storyDir, { recursive: true });
     }
     const screenshotPath = getScreenshotPath(storyId, theme);
     const { buffer, boundingBox } = await captureScreenshotBuffer(
@@ -932,7 +885,7 @@ async function generateScreenshot(storyId, theme, storybookUrl = "http://localho
       storybookUrl,
       timeoutMs
     );
-    fs.writeFileSync(screenshotPath, buffer);
+    fs2.writeFileSync(screenshotPath, buffer);
     return { path: screenshotPath, boundingBox };
   } catch (error) {
     console.error(`Error generating screenshot for ${storyId} (${theme}):`, error);
@@ -959,7 +912,7 @@ async function fetchStorybookIndex() {
 }
 function getStoriesForFile(filePath) {
   if (!cachedIndex) return [];
-  const fileName = path3.basename(filePath);
+  const fileName = path4.basename(filePath);
   return Object.values(cachedIndex.entries).filter((entry) => entry.type === "story" && entry.importPath.endsWith(fileName)).map((entry) => entry.id);
 }
 async function regenerateScreenshotsForFiles(files) {
@@ -1121,7 +1074,7 @@ var serveMetadataAndScreenshots = (req, res, next) => {
   }
   if (req.url === "/onbook-index.json") {
     console.log("[STORYBOOK_PLUGIN] Serving /onbook-index.json endpoint");
-    const manifestPath = path3.join(process.cwd(), ".storybook-cache", "manifest.json");
+    const manifestPath = path4.join(process.cwd(), ".storybook-cache", "manifest.json");
     const cacheBuster = Date.now();
     console.log("[STORYBOOK_PLUGIN] Fetching http://localhost:6006/index.json");
     fetch(`http://localhost:6006/index.json?_t=${cacheBuster}`, {
@@ -1136,9 +1089,20 @@ var serveMetadataAndScreenshots = (req, res, next) => {
         ok: response.ok,
         statusText: response.statusText
       });
+      if (!response.ok) {
+        console.log("[STORYBOOK_PLUGIN] Index not ready yet", {
+          status: response.status
+        });
+        res.statusCode = 503;
+        res.setHeader("Content-Type", "application/json");
+        res.setHeader("Retry-After", "10");
+        res.end(JSON.stringify({ code: "INDEX_NOT_READY" }));
+        return null;
+      }
       return response.json();
     }).then((indexData) => {
-      const manifest = fs.existsSync(manifestPath) ? JSON.parse(fs.readFileSync(manifestPath, "utf-8")) : { stories: {} };
+      if (!indexData) return;
+      const manifest = fs2.existsSync(manifestPath) ? JSON.parse(fs2.readFileSync(manifestPath, "utf-8")) : { stories: {} };
       const defaultBoundingBox = { width: 1920, height: 1080 };
       for (const [storyId, entry] of Object.entries(indexData.entries || {})) {
         const manifestEntry = manifest.stories?.[storyId];
@@ -1156,15 +1120,17 @@ var serveMetadataAndScreenshots = (req, res, next) => {
       res.setHeader("Expires", "0");
       res.end(JSON.stringify(indexData));
     }).catch((error) => {
-      console.error("[STORYBOOK_PLUGIN] Failed to fetch/extend index.json", {
-        error: error instanceof Error ? error.message : String(error),
-        errorType: error instanceof Error ? error.constructor.name : typeof error,
-        stack: error instanceof Error ? error.stack : void 0
+      console.log("[STORYBOOK_PLUGIN] Index not available", {
+        error: error instanceof Error ? error.message : String(error)
       });
-      res.statusCode = 500;
+      res.statusCode = 503;
       res.setHeader("Content-Type", "application/json");
+      res.setHeader("Retry-After", "10");
       res.end(
-        JSON.stringify({ error: "Failed to fetch index", details: String(error) })
+        JSON.stringify({
+          code: "INDEX_NOT_READY",
+          details: String(error)
+        })
       );
     });
     return;
@@ -1206,7 +1172,7 @@ var serveMetadataAndScreenshots = (req, res, next) => {
     return;
   }
   if (req.url?.startsWith("/screenshots/")) {
-    const screenshotPath = path3.join(
+    const screenshotPath = path4.join(
       process.cwd(),
       ".storybook-cache",
       req.url.replace("/screenshots/", "screenshots/")
@@ -1215,11 +1181,11 @@ var serveMetadataAndScreenshots = (req, res, next) => {
     const storyId = urlParts[0];
     const themeFile = urlParts[1];
     const theme = themeFile?.replace(".png", "");
-    if (fs.existsSync(screenshotPath)) {
+    if (fs2.existsSync(screenshotPath)) {
       res.setHeader("Content-Type", "image/png");
       res.setHeader("Access-Control-Allow-Origin", "*");
       res.setHeader("Cache-Control", "public, max-age=3600");
-      fs.createReadStream(screenshotPath).pipe(res);
+      fs2.createReadStream(screenshotPath).pipe(res);
       return;
     }
     if (storyId && theme && (theme === "light" || theme === "dark")) {
@@ -1227,16 +1193,16 @@ var serveMetadataAndScreenshots = (req, res, next) => {
         `[STORYBOOK_PLUGIN] Generating screenshot on-demand: ${storyId}/${theme}`
       );
       captureScreenshotBuffer(storyId, theme).then(({ buffer }) => {
-        const storyDir = path3.join(
+        const storyDir = path4.join(
           process.cwd(),
           ".storybook-cache",
           "screenshots",
           storyId
         );
-        if (!fs.existsSync(storyDir)) {
-          fs.mkdirSync(storyDir, { recursive: true });
+        if (!fs2.existsSync(storyDir)) {
+          fs2.mkdirSync(storyDir, { recursive: true });
         }
-        fs.writeFileSync(screenshotPath, buffer);
+        fs2.writeFileSync(screenshotPath, buffer);
         res.setHeader("Content-Type", "image/png");
         res.setHeader("Access-Control-Allow-Origin", "*");
         res.setHeader("Cache-Control", "public, max-age=3600");
@@ -1328,7 +1294,14 @@ function storybookOnlookPlugin(options = {}) {
       "src/**/*.spec.tsx",
       "src/**/*.spec.ts",
       "node_modules/**",
-      "**/.onlook-stories/**"
+      "**/.onlook-stories/**",
+      // Next.js route files (not renderable as Storybook stories)
+      "src/**/page.tsx",
+      "src/**/layout.tsx",
+      "src/**/loading.tsx",
+      "src/**/error.tsx",
+      "src/**/not-found.tsx",
+      "src/**/template.tsx"
     ];
     console.log("[STORYBOOK_PLUGIN] Auto-story generation enabled", {
       imports,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onlook/storybook-plugin",
-  "version": "0.4.0-beta.5",
+  "version": "0.4.0-beta.6",
   "type": "module",
   "bin": {
     "onlook-storybook": "./dist/cli/index.js"
@@ -40,7 +40,6 @@
     "glob": "^10.3.10",
     "minimatch": "^9.0.3",
     "playwright": "^1.52.0",
-    "prettier": "^3.2.5",
     "react-docgen-typescript": "^2.4.0",
     "ts-morph": "^21.0.1"
   },