@onlook/storybook-plugin 0.1.0 → 0.3.0

package/README.md

@@ -61,10 +61,16 @@ Generate screenshots for all stories:
 
 ```bash
 # With Storybook already running
-npx onlook-storybook generate-screenshots
+npx generate-screenshots
 
-# Specify a custom Storybook directory
-npx onlook-storybook generate-screenshots -d ./path/to/storybook
+# Start Storybook automatically
+npx generate-screenshots --start
+
+# Custom Storybook URL
+npx generate-screenshots --url http://localhost:9009
+
+# Custom start command
+npx generate-screenshots --start --cmd "bun run storybook"
 ```
 
 Screenshots are saved to `.storybook-cache/screenshots/`.

package/dist/cli/index.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { command, string, run } from '@drizzle-team/brocli';
+import { command, string, boolean, run } from '@drizzle-team/brocli';
 import { spawn } from 'child_process';
 import path, { resolve, join, dirname } from 'path';
 import crypto from 'crypto';
@@ -79,7 +79,11 @@ function getScreenshotPath(storyId, theme) {
   const storyDir = path.join(SCREENSHOTS_DIR, storyId);
   return path.join(storyDir, `${theme}.png`);
 }
-async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, height = VIEWPORT_HEIGHT, storybookUrl = "http://localhost:6006") {
+function screenshotExists(storyId, theme) {
+  const screenshotPath = getScreenshotPath(storyId, theme);
+  return fs.existsSync(screenshotPath);
+}
+async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, height = VIEWPORT_HEIGHT, storybookUrl = "http://localhost:6006", timeoutMs = 3e4) {
   const browser2 = await getBrowser();
   const context = await browser2.newContext({
     viewport: { width, height },
@@ -88,10 +92,10 @@ async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, h
   const page = await context.newPage();
   try {
     const url = `${storybookUrl}/iframe.html?id=${storyId}&viewMode=story&globals=theme:${theme}`;
-    await page.goto(url, { timeout: 15e3 });
-    await page.waitForLoadState("domcontentloaded");
-    await page.waitForLoadState("load");
-    await page.waitForLoadState("networkidle");
+    await page.goto(url, { timeout: timeoutMs });
+    await page.waitForLoadState("domcontentloaded", { timeout: timeoutMs });
+    await page.waitForLoadState("load", { timeout: timeoutMs });
+    await page.waitForLoadState("networkidle", { timeout: timeoutMs });
     await page.evaluate(() => document.fonts.ready);
     await page.evaluate(async () => {
       const images = document.querySelectorAll("img");
@@ -154,7 +158,7 @@ async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, h
     await context.close();
   }
 }
-async function generateScreenshot(storyId, theme, storybookUrl = "http://localhost:6006") {
+async function generateScreenshot(storyId, theme, storybookUrl = "http://localhost:6006", timeoutMs = 3e4) {
   try {
     ensureCacheDirectories();
     const storyDir = path.join(SCREENSHOTS_DIR, storyId);
@@ -167,7 +171,8 @@ async function generateScreenshot(storyId, theme, storybookUrl = "http://localho
       theme,
       VIEWPORT_WIDTH,
       VIEWPORT_HEIGHT,
-      storybookUrl
+      storybookUrl,
+      timeoutMs
     );
     fs.writeFileSync(screenshotPath, buffer);
     return { path: screenshotPath, boundingBox };
@@ -178,9 +183,12 @@ async function generateScreenshot(storyId, theme, storybookUrl = "http://localho
 }
 
 // src/screenshot-service/screenshot-service.ts
-async function generateAllScreenshots(stories, storybookUrl = "http://localhost:6006") {
-  console.log(`Generating screenshots for ${stories.length} stories...`);
-  const BATCH_SIZE = 10;
+async function generateAllScreenshots(stories, storybookUrl = "http://localhost:6006", concurrency = 10, offset = 0, total, skipExisting = false, timeoutMs = 3e4) {
+  const displayTotal = total ?? offset + stories.length;
+  console.log(
+    `Generating screenshots for ${stories.length} stories (concurrency: ${concurrency})...`
+  );
+  const BATCH_SIZE = concurrency;
   const batches = [];
   for (let i = 0; i < stories.length; i += BATCH_SIZE) {
     batches.push(stories.slice(i, i + BATCH_SIZE));
@@ -189,17 +197,24 @@ async function generateAllScreenshots(stories, storybookUrl = "http://localhost:
   for (const batch of batches) {
     await Promise.all(
       batch.map(async (story) => {
+        if (skipExisting && screenshotExists(story.id, "light") && screenshotExists(story.id, "dark")) {
+          completed++;
+          const absoluteIndex2 = offset + completed;
+          console.log(`[${absoluteIndex2}/${displayTotal}] Skipped (exists) ${story.id}`);
+          return;
+        }
         const [lightResult, darkResult] = await Promise.all([
-          generateScreenshot(story.id, "light", storybookUrl),
-          generateScreenshot(story.id, "dark", storybookUrl)
+          generateScreenshot(story.id, "light", storybookUrl, timeoutMs),
+          generateScreenshot(story.id, "dark", storybookUrl, timeoutMs)
         ]);
         if (lightResult && darkResult) {
           const fileHash = computeFileHash(story.importPath);
           updateManifest(story.id, story.importPath, fileHash, lightResult.boundingBox);
         }
         completed++;
+        const absoluteIndex = offset + completed;
         console.log(
-          `[${completed}/${stories.length}] Generated screenshots for ${story.id}`
+          `[${absoluteIndex}/${displayTotal}] Generated screenshots for ${story.id}`
         );
       })
     );
@@ -277,7 +292,9 @@ async function startStorybook(command2, args, storybookDir) {
   const storybookProcess = spawn(command2, args, {
     cwd: storybookDir,
     stdio: "pipe",
-    shell: true
+    shell: true,
+    detached: true
+    // Create new process group so we can kill all children
   });
   return new Promise((resolve3, reject) => {
     let started = false;
@@ -342,11 +359,20 @@ async function generateScreenshots(options = {}) {
       storybookProcess = await startStorybook(command2, args, storybookDir);
       weStartedStorybook = true;
     }
-    const stories = await fetchStoryIndex(url);
-    console.log(`Found ${stories.length} stories`);
+    const allStories = await fetchStoryIndex(url);
+    const total = allStories.length;
+    console.log(`Found ${total} stories`);
+    const skipN = options.skip ?? 0;
+    const end = options.limit ? skipN + options.limit : total;
+    const stories = allStories.slice(skipN, end);
+    if (skipN > 0 || options.limit) {
+      console.log(
+        `Processing stories ${skipN + 1}\u2013${skipN + stories.length} of ${total}`
+      );
+    }
     const firstStory = stories[0];
     if (!firstStory) {
-      throw new Error("No stories found");
+      throw new Error("No stories found in selected range");
     }
     await warmupStorybook(url, firstStory.id);
     await generateAllScreenshots(
@@ -354,14 +380,32 @@ async function generateScreenshots(options = {}) {
         id: story.id,
         importPath: story.importPath
       })),
-      url
+      url,
+      options.concurrency,
+      skipN,
+      total,
+      options.skipExisting,
+      options.timeout
     );
     console.log("\u2705 Screenshot generation complete!");
+  } catch (error) {
+    console.error("\u274C Screenshot generation failed:", error);
+    process.exit(1);
   } finally {
-    if (storybookProcess && weStartedStorybook) {
+    await closeBrowser();
+    if (storybookProcess && weStartedStorybook && storybookProcess.pid) {
       console.log("\u{1F6D1} Stopping Storybook...");
-      storybookProcess.kill();
+      try {
+        process.kill(-storybookProcess.pid, "SIGKILL");
+      } catch {
+        try {
+          storybookProcess.kill("SIGKILL");
+        } catch {
+        }
+      }
     }
+    console.log("\u2705 Cleanup complete, exiting...");
+    process.exit(0);
   }
 }
 
@@ -370,13 +414,25 @@ var generateScreenshotsCommand = command({
   name: "generate-screenshots",
   desc: "Generate screenshots for all Storybook stories",
   options: {
-    storybookDir: string().alias("d").desc("Directory containing Storybook (defaults to current directory)")
+    storybookDir: string().alias("d").desc("Directory containing Storybook (defaults to current directory)"),
+    limit: string().alias("l").desc("Limit number of stories to process"),
+    skip: string().alias("s").desc("Skip first N stories"),
+    concurrency: string().alias("c").desc("Number of concurrent screenshots (default: 10)"),
+    skipExisting: boolean().alias("e").desc("Skip stories that already have screenshots on disk"),
+    timeout: string().alias("t").desc("Timeout per screenshot in ms (default: 30000)")
   },
   handler: async (opts) => {
-    await generateScreenshots({ storybookDir: opts.storybookDir });
+    await generateScreenshots({
+      storybookDir: opts.storybookDir,
+      limit: opts.limit ? Number.parseInt(opts.limit, 10) : void 0,
+      skip: opts.skip ? Number.parseInt(opts.skip, 10) : void 0,
+      concurrency: opts.concurrency ? Number.parseInt(opts.concurrency, 10) : void 0,
+      skipExisting: opts.skipExisting ?? false,
+      timeout: opts.timeout ? Number.parseInt(opts.timeout, 10) : void 0
+    });
   }
 });
 run([generateScreenshotsCommand], {
   name: "onlook-storybook",
-  description: "Storybook plugin for Onlook - generate screenshots and more"
+  description: "Storybook plugin for Onbook - generate screenshots and more"
 });

package/dist/index.js

@@ -1,4 +1,4 @@
-import fs, { existsSync } from 'fs';
+import fs4, { existsSync } from 'fs';
 import path2, { dirname, join, relative } from 'path';
 import { fileURLToPath } from 'url';
 import generateModule from '@babel/generator';
@@ -78,30 +78,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 (!fs4.existsSync(CACHE_DIR)) {
+    fs4.mkdirSync(CACHE_DIR, { recursive: true });
   }
-  if (!fs.existsSync(SCREENSHOTS_DIR)) {
-    fs.mkdirSync(SCREENSHOTS_DIR, { recursive: true });
+  if (!fs4.existsSync(SCREENSHOTS_DIR)) {
+    fs4.mkdirSync(SCREENSHOTS_DIR, { recursive: true });
   }
 }
 function computeFileHash(filePath) {
-  if (!fs.existsSync(filePath)) {
+  if (!fs4.existsSync(filePath)) {
     return "";
   }
-  const content = fs.readFileSync(filePath, "utf-8");
+  const content = fs4.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 (fs4.existsSync(MANIFEST_PATH)) {
+    const content = fs4.readFileSync(MANIFEST_PATH, "utf-8");
     return JSON.parse(content);
   }
   return { stories: {} };
 }
 function saveManifest(manifest) {
   ensureCacheDirectories();
-  fs.writeFileSync(MANIFEST_PATH, JSON.stringify(manifest, null, 2));
+  fs4.writeFileSync(MANIFEST_PATH, JSON.stringify(manifest, null, 2));
 }
 function updateManifest(storyId, sourcePath, fileHash, boundingBox) {
   const manifest = loadManifest();
@@ -130,7 +130,7 @@ function getScreenshotPath(storyId, theme) {
   const storyDir = path2.join(SCREENSHOTS_DIR, storyId);
   return path2.join(storyDir, `${theme}.png`);
 }
-async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, height = VIEWPORT_HEIGHT, storybookUrl = "http://localhost:6006") {
+async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, height = VIEWPORT_HEIGHT, storybookUrl = "http://localhost:6006", timeoutMs = 3e4) {
   const browser2 = await getBrowser();
   const context = await browser2.newContext({
     viewport: { width, height },
@@ -139,10 +139,10 @@ async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, h
   const page = await context.newPage();
   try {
     const url = `${storybookUrl}/iframe.html?id=${storyId}&viewMode=story&globals=theme:${theme}`;
-    await page.goto(url, { timeout: 15e3 });
-    await page.waitForLoadState("domcontentloaded");
-    await page.waitForLoadState("load");
-    await page.waitForLoadState("networkidle");
+    await page.goto(url, { timeout: timeoutMs });
+    await page.waitForLoadState("domcontentloaded", { timeout: timeoutMs });
+    await page.waitForLoadState("load", { timeout: timeoutMs });
+    await page.waitForLoadState("networkidle", { timeout: timeoutMs });
     await page.evaluate(() => document.fonts.ready);
     await page.evaluate(async () => {
       const images = document.querySelectorAll("img");
@@ -205,12 +205,12 @@ async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, h
     await context.close();
   }
 }
-async function generateScreenshot(storyId, theme, storybookUrl = "http://localhost:6006") {
+async function generateScreenshot(storyId, theme, storybookUrl = "http://localhost:6006", timeoutMs = 3e4) {
   try {
     ensureCacheDirectories();
     const storyDir = path2.join(SCREENSHOTS_DIR, storyId);
-    if (!fs.existsSync(storyDir)) {
-      fs.mkdirSync(storyDir, { recursive: true });
+    if (!fs4.existsSync(storyDir)) {
+      fs4.mkdirSync(storyDir, { recursive: true });
     }
     const screenshotPath = getScreenshotPath(storyId, theme);
     const { buffer, boundingBox } = await captureScreenshotBuffer(
@@ -218,9 +218,10 @@ async function generateScreenshot(storyId, theme, storybookUrl = "http://localho
       theme,
       VIEWPORT_WIDTH,
       VIEWPORT_HEIGHT,
-      storybookUrl
+      storybookUrl,
+      timeoutMs
     );
-    fs.writeFileSync(screenshotPath, buffer);
+    fs4.writeFileSync(screenshotPath, buffer);
     return { path: screenshotPath, boundingBox };
   } catch (error) {
     console.error(`Error generating screenshot for ${storyId} (${theme}):`, error);
@@ -336,20 +337,47 @@ var DEFAULT_ALLOWED_ORIGINS = [
 ];
 var serveMetadataAndScreenshots = (req, res, next) => {
   if (req.url === "/onbook-index.json") {
+    console.log("[STORYBOOK_PLUGIN] Serving /onbook-index.json endpoint");
     const manifestPath = path2.join(process.cwd(), ".storybook-cache", "manifest.json");
-    fetch("http://localhost:6006/index.json").then((response) => response.json()).then((indexData) => {
-      const manifest = fs.existsSync(manifestPath) ? JSON.parse(fs.readFileSync(manifestPath, "utf-8")) : { stories: {} };
+    const cacheBuster = Date.now();
+    console.log("[STORYBOOK_PLUGIN] Fetching http://localhost:6006/index.json");
+    fetch(`http://localhost:6006/index.json?_t=${cacheBuster}`, {
+      cache: "no-store",
+      headers: {
+        "Cache-Control": "no-cache",
+        Pragma: "no-cache"
+      }
+    }).then((response) => {
+      console.log("[STORYBOOK_PLUGIN] Storybook index fetch response", {
+        status: response.status,
+        ok: response.ok,
+        statusText: response.statusText
+      });
+      return response.json();
+    }).then((indexData) => {
+      const manifest = fs4.existsSync(manifestPath) ? JSON.parse(fs4.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];
         entry.boundingBox = manifestEntry?.boundingBox || defaultBoundingBox;
       }
       indexData.meta = { storybookLocation, repoRoot };
+      console.log("[STORYBOOK_PLUGIN] Successfully enriched index.json", {
+        entryCount: Object.keys(indexData.entries || {}).length,
+        hasMetadata: !!indexData.meta
+      });
       res.setHeader("Content-Type", "application/json");
       res.setHeader("Access-Control-Allow-Origin", "*");
+      res.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
+      res.setHeader("Pragma", "no-cache");
+      res.setHeader("Expires", "0");
       res.end(JSON.stringify(indexData));
     }).catch((error) => {
-      console.error("Failed to fetch/extend index.json:", 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
+      });
       res.statusCode = 500;
       res.setHeader("Content-Type", "application/json");
       res.end(
@@ -400,25 +428,71 @@ var serveMetadataAndScreenshots = (req, res, next) => {
       ".storybook-cache",
       req.url.replace("/screenshots/", "screenshots/")
     );
-    if (fs.existsSync(screenshotPath)) {
+    const urlParts = req.url.replace("/screenshots/", "").split("/");
+    const storyId = urlParts[0];
+    const themeFile = urlParts[1];
+    const theme = themeFile?.replace(".png", "");
+    if (fs4.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);
-    } else {
-      res.statusCode = 404;
-      res.end("Screenshot not found");
+      fs4.createReadStream(screenshotPath).pipe(res);
+      return;
     }
+    if (storyId && theme && (theme === "light" || theme === "dark")) {
+      console.log(
+        `[STORYBOOK_PLUGIN] Generating screenshot on-demand: ${storyId}/${theme}`
+      );
+      captureScreenshotBuffer(storyId, theme).then(({ buffer }) => {
+        const storyDir = path2.join(
+          process.cwd(),
+          ".storybook-cache",
+          "screenshots",
+          storyId
+        );
+        if (!fs4.existsSync(storyDir)) {
+          fs4.mkdirSync(storyDir, { recursive: true });
+        }
+        fs4.writeFileSync(screenshotPath, buffer);
+        res.setHeader("Content-Type", "image/png");
+        res.setHeader("Access-Control-Allow-Origin", "*");
+        res.setHeader("Cache-Control", "public, max-age=3600");
+        res.end(buffer);
+      }).catch((error) => {
+        console.error(
+          `[STORYBOOK_PLUGIN] Failed to generate screenshot: ${storyId}/${theme}`,
+          error
+        );
+        res.statusCode = 500;
+        res.setHeader("Content-Type", "application/json");
+        res.end(
+          JSON.stringify({
+            error: "Failed to generate screenshot",
+            details: String(error)
+          })
+        );
+      });
+      return;
+    }
+    res.statusCode = 404;
+    res.end("Screenshot not found");
     return;
   }
   next();
 };
 function storybookOnlookPlugin(options = {}) {
   if (process.env.CHROMATIC || process.env.CI) {
+    console.log("[STORYBOOK_PLUGIN] Disabled in CI/Chromatic environment");
     return [];
   }
   const port = options.port ?? 6006;
   const allowedOrigins = [...DEFAULT_ALLOWED_ORIGINS, ...options.allowedOrigins ?? []];
+  console.log("[STORYBOOK_PLUGIN] Plugin initialized", {
+    port,
+    allowedOrigins,
+    storybookLocation,
+    repoRoot
+  });
   const mainPlugin = {
     name: "storybook-onlook-plugin",
     config() {
@@ -440,9 +514,17 @@ function storybookOnlookPlugin(options = {}) {
       };
     },
     configureServer(server) {
+      console.log("[STORYBOOK_PLUGIN] Configuring server middleware");
       server.middlewares.use(serveMetadataAndScreenshots);
+      server.httpServer?.once("listening", () => {
+        console.log("[STORYBOOK_PLUGIN] Server is listening", {
+          port: server.config.server.port,
+          host: server.config.server.host
+        });
+      });
     },
     configurePreviewServer(server) {
+      console.log("[STORYBOOK_PLUGIN] Configuring preview server middleware");
       server.middlewares.use(serveMetadataAndScreenshots);
     },
     handleHotUpdate: handleStoryFileChange

package/dist/screenshot-service/index.d.ts

@@ -3,11 +3,14 @@ import 'playwright';
 
 /**
  * Generate screenshots for all stories (parallelized for speed)
+ *
+ * @param offset - Absolute index offset for logging (e.g. skip=200 → offset=200)
+ * @param total - Total number of stories across all runs (for [n/total] logging)
  */
 declare function generateAllScreenshots(stories: Array<{
     id: string;
     importPath: string;
-}>, storybookUrl?: string): Promise<void>;
+}>, storybookUrl?: string, concurrency?: number, offset?: number, total?: number, skipExisting?: boolean, timeoutMs?: number): Promise<void>;
 
 interface BoundingBox {
     width: number;
@@ -42,6 +45,6 @@ declare function screenshotExists(storyId: string, theme: 'light' | 'dark'): boo
 /**
  * Generate a screenshot for a story and save to disk
  */
-declare function generateScreenshot(storyId: string, theme: 'light' | 'dark', storybookUrl?: string): Promise<GenerateScreenshotResult | null>;
+declare function generateScreenshot(storyId: string, theme: 'light' | 'dark', storybookUrl?: string, timeoutMs?: number): Promise<GenerateScreenshotResult | null>;
 
 export { type Manifest, type ScreenshotMetadata, generateAllScreenshots, generateScreenshot, getScreenshotPath, screenshotExists };

package/dist/screenshot-service/index.js

@@ -81,7 +81,7 @@ function screenshotExists(storyId, theme) {
   const screenshotPath = getScreenshotPath(storyId, theme);
   return fs.existsSync(screenshotPath);
 }
-async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, height = VIEWPORT_HEIGHT, storybookUrl = "http://localhost:6006") {
+async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, height = VIEWPORT_HEIGHT, storybookUrl = "http://localhost:6006", timeoutMs = 3e4) {
   const browser2 = await getBrowser();
   const context = await browser2.newContext({
     viewport: { width, height },
@@ -90,10 +90,10 @@ async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, h
   const page = await context.newPage();
   try {
     const url = `${storybookUrl}/iframe.html?id=${storyId}&viewMode=story&globals=theme:${theme}`;
-    await page.goto(url, { timeout: 15e3 });
-    await page.waitForLoadState("domcontentloaded");
-    await page.waitForLoadState("load");
-    await page.waitForLoadState("networkidle");
+    await page.goto(url, { timeout: timeoutMs });
+    await page.waitForLoadState("domcontentloaded", { timeout: timeoutMs });
+    await page.waitForLoadState("load", { timeout: timeoutMs });
+    await page.waitForLoadState("networkidle", { timeout: timeoutMs });
     await page.evaluate(() => document.fonts.ready);
     await page.evaluate(async () => {
       const images = document.querySelectorAll("img");
@@ -156,7 +156,7 @@ async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, h
     await context.close();
   }
 }
-async function generateScreenshot(storyId, theme, storybookUrl = "http://localhost:6006") {
+async function generateScreenshot(storyId, theme, storybookUrl = "http://localhost:6006", timeoutMs = 3e4) {
   try {
     ensureCacheDirectories();
     const storyDir = path.join(SCREENSHOTS_DIR, storyId);
@@ -169,7 +169,8 @@ async function generateScreenshot(storyId, theme, storybookUrl = "http://localho
       theme,
       VIEWPORT_WIDTH,
       VIEWPORT_HEIGHT,
-      storybookUrl
+      storybookUrl,
+      timeoutMs
     );
     fs.writeFileSync(screenshotPath, buffer);
     return { path: screenshotPath, boundingBox };
@@ -180,9 +181,12 @@ async function generateScreenshot(storyId, theme, storybookUrl = "http://localho
 }
 
 // src/screenshot-service/screenshot-service.ts
-async function generateAllScreenshots(stories, storybookUrl = "http://localhost:6006") {
-  console.log(`Generating screenshots for ${stories.length} stories...`);
-  const BATCH_SIZE = 10;
+async function generateAllScreenshots(stories, storybookUrl = "http://localhost:6006", concurrency = 10, offset = 0, total, skipExisting = false, timeoutMs = 3e4) {
+  const displayTotal = total ?? offset + stories.length;
+  console.log(
+    `Generating screenshots for ${stories.length} stories (concurrency: ${concurrency})...`
+  );
+  const BATCH_SIZE = concurrency;
   const batches = [];
   for (let i = 0; i < stories.length; i += BATCH_SIZE) {
     batches.push(stories.slice(i, i + BATCH_SIZE));
@@ -191,17 +195,24 @@ async function generateAllScreenshots(stories, storybookUrl = "http://localhost:
   for (const batch of batches) {
     await Promise.all(
       batch.map(async (story) => {
+        if (skipExisting && screenshotExists(story.id, "light") && screenshotExists(story.id, "dark")) {
+          completed++;
+          const absoluteIndex2 = offset + completed;
+          console.log(`[${absoluteIndex2}/${displayTotal}] Skipped (exists) ${story.id}`);
+          return;
+        }
         const [lightResult, darkResult] = await Promise.all([
-          generateScreenshot(story.id, "light", storybookUrl),
-          generateScreenshot(story.id, "dark", storybookUrl)
+          generateScreenshot(story.id, "light", storybookUrl, timeoutMs),
+          generateScreenshot(story.id, "dark", storybookUrl, timeoutMs)
         ]);
         if (lightResult && darkResult) {
           const fileHash = computeFileHash(story.importPath);
           updateManifest(story.id, story.importPath, fileHash, lightResult.boundingBox);
         }
         completed++;
+        const absoluteIndex = offset + completed;
         console.log(
-          `[${completed}/${stories.length}] Generated screenshots for ${story.id}`
+          `[${absoluteIndex}/${displayTotal}] Generated screenshots for ${story.id}`
         );
       })
     );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onlook/storybook-plugin",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "type": "module",
   "bin": {
     "onlook-storybook": "./dist/cli/index.js"
@@ -29,7 +29,7 @@
     "typecheck": "tsc --noEmit",
     "prepublishOnly": "bun run build && bun scripts/prepublish.ts",
     "postpublish": "bun scripts/postpublish.ts",
-    "publish-pkg": "npm publish --access public"
+    "publish-pkg": "npm publish"
   },
   "dependencies": {
     "@babel/generator": "^7.26.9",
@@ -49,6 +49,9 @@
     "typescript": "5.8.3",
     "vite": "^6.3.5"
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "peerDependencies": {
     "vite": "^5.0.0 || ^6.0.0"
   }