@onlook/storybook-plugin 0.4.0-beta.17 → 0.4.0-beta.19

package/dist/index.js

@@ -514,52 +514,6 @@ async function getBrowser() {
   }
   return browserPromise;
 }
-
-// src/screenshot-service/utils/capture-semaphore/capture-semaphore.ts
-function createSemaphore(limit) {
-  const max = Number.isFinite(limit) ? Math.max(1, Math.floor(limit)) : 1;
-  let active = 0;
-  const waiters = [];
-  const acquire = () => {
-    if (active < max) {
-      active += 1;
-      return Promise.resolve();
-    }
-    return new Promise((resolve) => {
-      waiters.push(() => {
-        active += 1;
-        resolve();
-      });
-    });
-  };
-  const release = () => {
-    active -= 1;
-    const next = waiters.shift();
-    if (next) next();
-  };
-  return {
-    async run(fn) {
-      await acquire();
-      try {
-        return await fn();
-      } finally {
-        release();
-      }
-    }
-  };
-}
-var DEFAULT_CAPTURE_CONCURRENCY = 3;
-function resolveConcurrency(raw) {
-  if (!raw) return DEFAULT_CAPTURE_CONCURRENCY;
-  const parsed = Number.parseInt(raw, 10);
-  if (!Number.isInteger(parsed) || parsed < 1) return DEFAULT_CAPTURE_CONCURRENCY;
-  return parsed;
-}
-var captureSemaphore = createSemaphore(
-  resolveConcurrency(process.env.ONLOOK_CAPTURE_CONCURRENCY)
-);
-
-// src/screenshot-service/utils/screenshot/screenshot.ts
 function classifyPreviewSnapshot(s) {
   if (s.text.includes("Sorry, something went wrong")) return "errored";
   if (s.text.includes("Couldn't find story")) return "errored";
@@ -630,89 +584,87 @@ function getScreenshotPath(storyId, theme) {
   return path8.join(storyDir, `${theme}.png`);
 }
 async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, height = VIEWPORT_HEIGHT, storybookUrl = "http://localhost:6006", loadTimeoutMs = 9e4, renderTimeoutMs = 2e4) {
-  return captureSemaphore.run(async () => {
-    const browser = await getBrowser();
-    const context = await browser.newContext({
-      viewport: { width, height },
-      deviceScaleFactor: 2
-    });
-    const page = await context.newPage();
+  const browser = await getBrowser();
+  const context = await browser.newContext({
+    viewport: { width, height },
+    deviceScaleFactor: 2
+  });
+  const page = await context.newPage();
+  try {
+    const url = `${storybookUrl}/iframe.html?id=${storyId}&viewMode=story&globals=theme:${theme}`;
+    await page.goto(url, { timeout: loadTimeoutMs });
+    await page.waitForLoadState("domcontentloaded", { timeout: loadTimeoutMs });
+    await page.waitForLoadState("load", { timeout: loadTimeoutMs });
     try {
-      const url = `${storybookUrl}/iframe.html?id=${storyId}&viewMode=story&globals=theme:${theme}`;
-      await page.goto(url, { timeout: loadTimeoutMs });
-      await page.waitForLoadState("domcontentloaded", { timeout: loadTimeoutMs });
-      await page.waitForLoadState("load", { timeout: loadTimeoutMs });
-      try {
-        await page.waitForLoadState("networkidle", { timeout: 5e3 });
-      } catch {
-      }
-      const renderState = await detectRenderState(page, { hardCapMs: renderTimeoutMs });
-      await page.evaluate(() => document.fonts.ready);
-      try {
-        await page.evaluate(async () => {
-          const images = document.querySelectorAll("img");
-          await Promise.all(
-            Array.from(images).map((img) => {
-              if (img.complete) return Promise.resolve();
-              return new Promise((resolve) => {
-                img.addEventListener("load", resolve);
-                img.addEventListener("error", resolve);
-                setTimeout(resolve, 3e3);
-              });
-            })
-          );
-        });
-      } catch {
-      }
-      const contentBounds = await page.evaluate(() => {
-        const root = document.querySelector("#storybook-root");
-        if (!root) return null;
-        const children = root.querySelectorAll("*");
-        if (children.length === 0) return null;
-        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-        children.forEach((child) => {
-          const rect = child.getBoundingClientRect();
-          if (rect.width === 0 || rect.height === 0) return;
-          minX = Math.min(minX, rect.left);
-          minY = Math.min(minY, rect.top);
-          maxX = Math.max(maxX, rect.right);
-          maxY = Math.max(maxY, rect.bottom);
-        });
-        if (minX === Infinity) return null;
-        return {
-          x: minX,
-          y: minY,
-          width: maxX - minX,
-          height: maxY - minY
-        };
+      await page.waitForLoadState("networkidle", { timeout: 5e3 });
+    } catch {
+    }
+    const renderState = await detectRenderState(page, { hardCapMs: renderTimeoutMs });
+    await page.evaluate(() => document.fonts.ready);
+    try {
+      await page.evaluate(async () => {
+        const images = document.querySelectorAll("img");
+        await Promise.all(
+          Array.from(images).map((img) => {
+            if (img.complete) return Promise.resolve();
+            return new Promise((resolve) => {
+              img.addEventListener("load", resolve);
+              img.addEventListener("error", resolve);
+              setTimeout(resolve, 3e3);
+            });
+          })
+        );
       });
-      let screenshotBuffer;
-      let resultBoundingBox = null;
-      if (contentBounds && contentBounds.width > 0 && contentBounds.height > 0) {
-        const PADDING = 20;
-        const clippedWidth = Math.min(width, contentBounds.width + PADDING);
-        const clippedHeight = Math.min(height, contentBounds.height + PADDING);
-        resultBoundingBox = {
-          width: Math.max(MIN_COMPONENT_WIDTH, Math.round(clippedWidth)),
-          height: Math.max(MIN_COMPONENT_HEIGHT, Math.round(clippedHeight))
-        };
-        screenshotBuffer = await page.screenshot({
-          type: "png",
-          clip: {
-            x: Math.max(0, contentBounds.x - 10),
-            y: Math.max(0, contentBounds.y - 10),
-            width: clippedWidth,
-            height: clippedHeight
-          }
-        });
-      } else {
-        screenshotBuffer = await page.screenshot({ type: "png" });
-      }
-      return { buffer: screenshotBuffer, boundingBox: resultBoundingBox, renderState };
-    } finally {
-      await context.close();
+    } catch {
     }
-  });
+    const contentBounds = await page.evaluate(() => {
+      const root = document.querySelector("#storybook-root");
+      if (!root) return null;
+      const children = root.querySelectorAll("*");
+      if (children.length === 0) return null;
+      let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+      children.forEach((child) => {
+        const rect = child.getBoundingClientRect();
+        if (rect.width === 0 || rect.height === 0) return;
+        minX = Math.min(minX, rect.left);
+        minY = Math.min(minY, rect.top);
+        maxX = Math.max(maxX, rect.right);
+        maxY = Math.max(maxY, rect.bottom);
+      });
+      if (minX === Infinity) return null;
+      return {
+        x: minX,
+        y: minY,
+        width: maxX - minX,
+        height: maxY - minY
+      };
+    });
+    let screenshotBuffer;
+    let resultBoundingBox = null;
+    if (contentBounds && contentBounds.width > 0 && contentBounds.height > 0) {
+      const PADDING = 20;
+      const clippedWidth = Math.min(width, contentBounds.width + PADDING);
+      const clippedHeight = Math.min(height, contentBounds.height + PADDING);
+      resultBoundingBox = {
+        width: Math.max(MIN_COMPONENT_WIDTH, Math.round(clippedWidth)),
+        height: Math.max(MIN_COMPONENT_HEIGHT, Math.round(clippedHeight))
+      };
+      screenshotBuffer = await page.screenshot({
+        type: "png",
+        clip: {
+          x: Math.max(0, contentBounds.x - 10),
+          y: Math.max(0, contentBounds.y - 10),
+          width: clippedWidth,
+          height: clippedHeight
+        }
+      });
+    } else {
+      screenshotBuffer = await page.screenshot({ type: "png" });
+    }
+    return { buffer: screenshotBuffer, boundingBox: resultBoundingBox, renderState };
+  } finally {
+    await context.close();
+  }
 }
 async function generateScreenshot(storyId, theme, storybookUrl = "http://localhost:6006", timeoutMs = 3e4) {
   try {
@@ -819,39 +771,7 @@ async function waitForIndexAndBroadcast(port = 6006) {
   });
 }
 
-// src/handlers/handleStoryFileChange/captureCoalescer/captureCoalescer.ts
-function createCaptureCoalescer(runCapture) {
-  const inFlight2 = /* @__PURE__ */ new Map();
-  const trailing = /* @__PURE__ */ new Set();
-  const start = (storyId) => {
-    const done = (async () => {
-      try {
-        await runCapture(storyId);
-      } finally {
-        inFlight2.delete(storyId);
-        if (trailing.has(storyId)) {
-          trailing.delete(storyId);
-          await start(storyId);
-        }
-      }
-    })();
-    inFlight2.set(storyId, done);
-    return done;
-  };
-  return {
-    capture(storyId) {
-      const existing = inFlight2.get(storyId);
-      if (existing) {
-        trailing.add(storyId);
-        return existing;
-      }
-      return start(storyId);
-    }
-  };
-}
-
 // src/handlers/handleStoryFileChange/handleStoryFileChange.ts
-var STORYBOOK_URL = "http://localhost:6006";
 var cachedIndex = null;
 var indexFetchPromise = null;
 var pendingFiles = /* @__PURE__ */ new Set();
@@ -873,43 +793,44 @@ function getStoriesForFile(filePath) {
   const fileName = path8.basename(filePath);
   return Object.values(cachedIndex.entries).filter((entry) => entry.type === "story" && entry.importPath.endsWith(fileName)).map((entry) => entry.id);
 }
-var latestStoryFiles = /* @__PURE__ */ new Map();
-async function captureStoryAndUpdateManifest(storyId) {
-  const [lightResult] = await Promise.all([
-    generateScreenshot(storyId, "light", STORYBOOK_URL),
-    generateScreenshot(storyId, "dark", STORYBOOK_URL)
-  ]);
-  const boundingBox = lightResult?.boundingBox ?? void 0;
-  for (const file of latestStoryFiles.get(storyId) ?? []) {
-    const fileHash = computeFileHash(file);
-    updateManifest(storyId, file, fileHash, boundingBox);
-  }
-}
-var captureCoalescer = createCaptureCoalescer(captureStoryAndUpdateManifest);
 async function regenerateScreenshotsForFiles(files) {
   await fetchStorybookIndex();
-  const storyToFiles = /* @__PURE__ */ new Map();
+  const allStoryIds = /* @__PURE__ */ new Set();
+  const fileToStories = /* @__PURE__ */ new Map();
   for (const file of files) {
-    for (const storyId of getStoriesForFile(file)) {
-      const arr = storyToFiles.get(storyId) ?? [];
-      arr.push(file);
-      storyToFiles.set(storyId, arr);
+    const storyIds = getStoriesForFile(file);
+    fileToStories.set(file, storyIds);
+    for (const id of storyIds) {
+      allStoryIds.add(id);
     }
   }
-  if (storyToFiles.size === 0) {
+  if (allStoryIds.size === 0) {
     console.log("[Screenshots] No stories found for changed files");
     return;
   }
   console.log(
-    `[Screenshots] Regenerating ${storyToFiles.size} stories from ${files.length} files`
+    `[Screenshots] Regenerating ${allStoryIds.size} stories from ${files.length} files`
   );
-  for (const [storyId, storyFiles] of storyToFiles) {
-    latestStoryFiles.set(storyId, storyFiles);
-  }
+  const storybookUrl = "http://localhost:6006";
+  const storyBoundingBoxes = /* @__PURE__ */ new Map();
   await Promise.all(
-    Array.from(storyToFiles.keys()).map((storyId) => captureCoalescer.capture(storyId))
+    Array.from(allStoryIds).map(async (storyId) => {
+      const [lightResult, _darkResult] = await Promise.all([
+        generateScreenshot(storyId, "light", storybookUrl),
+        generateScreenshot(storyId, "dark", storybookUrl)
+      ]);
+      if (lightResult) {
+        storyBoundingBoxes.set(storyId, lightResult.boundingBox);
+      }
+    })
   );
-  console.log(`[Screenshots] \u2713 Regenerated ${storyToFiles.size} stories`);
+  for (const [file, storyIds] of fileToStories) {
+    const fileHash = computeFileHash(file);
+    storyIds.forEach((storyId) => {
+      updateManifest(storyId, file, fileHash, storyBoundingBoxes.get(storyId));
+    });
+  }
+  console.log(`[Screenshots] \u2713 Regenerated ${allStoryIds.size} stories`);
 }
 function handleStoryFileChange({ file, modules }) {
   if (file.endsWith(".stories.tsx") || file.endsWith(".stories.ts")) {
@@ -936,9 +857,139 @@ function handleStoryFileChange({ file, modules }) {
   }
 }
 
-// src/package-mock/clerk-mock.ts
+// src/package-mock/convex-mock.ts
 var VALID_IDENT_RE2 = /^[A-Za-z_$][\w$]*$/;
 var RESERVED_HELPER_NAMES = /* @__PURE__ */ new Set([
+  "__pass",
+  "__null",
+  "__asyncNoop",
+  "__noop",
+  "__convexClient",
+  "createElement",
+  "Fragment"
+]);
+var SHARED_PREAMBLE = [
+  "import { createElement, Fragment } from 'react';",
+  "const __asyncNoop = async () => {};",
+  "const __noop = () => {};",
+  // No `: any` param annotation — the virtual module is parsed as PLAIN JS.
+  "const __pass = (props) => createElement(Fragment, null, props ? props.children : undefined);",
+  "const __null = () => null;"
+];
+var CONVEX_CLIENT_PREAMBLE = [
+  "const __convexClient = {",
+  "  setAuth: __noop,",
+  "  clearAuth: __noop,",
+  "  close: __asyncNoop,",
+  "  connectionState: () => ({ hasInflightRequests: false, isWebSocketConnected: false }),",
+  "  watchQuery: () => ({",
+  "    onUpdate: () => __noop,",
+  "    localQueryResult: () => undefined,",
+  "    journal: () => undefined,",
+  "  }),",
+  "  mutation: __asyncNoop,",
+  "  action: __asyncNoop,",
+  "  query: __asyncNoop,",
+  "};"
+];
+var CONVEX_KNOWN_HOOKS = {
+  useQuery: "undefined",
+  useQueries: "({})",
+  useMutation: "__asyncNoop",
+  useAction: "__asyncNoop",
+  usePaginatedQuery: "({ results: [], status: 'LoadingFirstPage', isLoading: true, loadMore: __noop })",
+  useConvex: "__convexClient",
+  useConvexAuth: "({ isLoading: false, isAuthenticated: true })"
+};
+var CONVEX_CHILDREN_COMPONENTS = /* @__PURE__ */ new Set([
+  "ConvexProvider",
+  "ConvexProviderWithAuth",
+  "ConvexProviderWithClerk",
+  "Authenticated"
+]);
+var CONVEX_NULL_COMPONENTS = /* @__PURE__ */ new Set(["Unauthenticated", "AuthLoading"]);
+function convexExportLine(name) {
+  if (name in CONVEX_KNOWN_HOOKS) {
+    return `export const ${name} = () => ${CONVEX_KNOWN_HOOKS[name]};`;
+  }
+  if (name === "ConvexReactClient") {
+    return "export function ConvexReactClient() { return __convexClient; }";
+  }
+  if (CONVEX_CHILDREN_COMPONENTS.has(name)) return `export const ${name} = __pass;`;
+  if (CONVEX_NULL_COMPONENTS.has(name)) return `export const ${name} = __null;`;
+  if (/^use[A-Z]/.test(name)) return `export const ${name} = () => undefined;`;
+  if (/^[A-Z]/.test(name)) return `export const ${name} = __pass;`;
+  return `export const ${name} = undefined;`;
+}
+function buildConvexReactMockSource(usedExports) {
+  const names = dedupeNames([
+    ...usedExports,
+    ...Object.keys(CONVEX_KNOWN_HOOKS),
+    ...CONVEX_CHILDREN_COMPONENTS,
+    ...CONVEX_NULL_COMPONENTS,
+    "ConvexReactClient"
+  ]);
+  return [
+    "// Auto-generated by @onlook/storybook-plugin (package mock). Zero-backend",
+    "// Convex stand-in: queries stay in the loading state (`useQuery` returns",
+    "// `undefined`), mutations/actions no-op, auth reads signed-in. Swap back to",
+    "// the real convex package (with a deployment URL) for live data.",
+    ...SHARED_PREAMBLE,
+    ...CONVEX_CLIENT_PREAMBLE,
+    "",
+    ...names.map(convexExportLine),
+    "",
+    "export default {};",
+    ""
+  ].join("\n");
+}
+var CONVEX_AUTH_KNOWN_HOOKS = {
+  useAuthActions: "({ signIn: __asyncNoop, signOut: __asyncNoop })",
+  useAuthToken: "null"
+};
+var CONVEX_AUTH_CHILDREN_COMPONENTS = /* @__PURE__ */ new Set(["ConvexAuthProvider"]);
+function convexAuthExportLine(name) {
+  if (name in CONVEX_AUTH_KNOWN_HOOKS) {
+    return `export const ${name} = () => ${CONVEX_AUTH_KNOWN_HOOKS[name]};`;
+  }
+  if (CONVEX_AUTH_CHILDREN_COMPONENTS.has(name)) {
+    return `export const ${name} = __pass;`;
+  }
+  if (/^use[A-Z]/.test(name)) return `export const ${name} = () => undefined;`;
+  if (/^[A-Z]/.test(name)) return `export const ${name} = __pass;`;
+  return `export const ${name} = undefined;`;
+}
+function buildConvexAuthMockSource(usedExports) {
+  const names = dedupeNames([
+    ...usedExports,
+    ...Object.keys(CONVEX_AUTH_KNOWN_HOOKS),
+    ...CONVEX_AUTH_CHILDREN_COMPONENTS
+  ]);
+  return [
+    "// Auto-generated by @onlook/storybook-plugin (package mock). Zero-backend",
+    "// @convex-dev/auth stand-in: auth actions no-op, no token. Swap back to the",
+    "// real package for live auth flows.",
+    ...SHARED_PREAMBLE,
+    "",
+    ...names.map(convexAuthExportLine),
+    "",
+    "export default {};",
+    ""
+  ].join("\n");
+}
+function dedupeNames(usedExports) {
+  return Array.from(
+    new Set(
+      usedExports.filter(
+        (n) => VALID_IDENT_RE2.test(n) && n !== "default" && !RESERVED_HELPER_NAMES.has(n)
+      )
+    )
+  ).sort();
+}
+
+// src/package-mock/clerk-mock.ts
+var VALID_IDENT_RE3 = /^[A-Za-z_$][\w$]*$/;
+var RESERVED_HELPER_NAMES2 = /* @__PURE__ */ new Set([
   "__user",
   "__pass",
   "__null",
@@ -951,7 +1002,9 @@ var RESERVED_HELPER_NAMES = /* @__PURE__ */ new Set([
 ]);
 var BUILDERS = {
   "@clerk/nextjs": buildClerkMockSource,
-  "@clerk/clerk-react": buildClerkMockSource
+  "@clerk/clerk-react": buildClerkMockSource,
+  "convex/react": buildConvexReactMockSource,
+  "@convex-dev/auth/react": buildConvexAuthMockSource
 };
 function isKnownMockPackage(pkg) {
   return pkg in BUILDERS;
@@ -1075,7 +1128,7 @@ function buildClerkMockSource(usedExports) {
   const names = Array.from(
     new Set(
       usedExports.filter(
-        (n) => VALID_IDENT_RE2.test(n) && n !== "default" && !RESERVED_HELPER_NAMES.has(n)
+        (n) => VALID_IDENT_RE3.test(n) && n !== "default" && !RESERVED_HELPER_NAMES2.has(n)
       )
     )
   ).sort();
@@ -1131,63 +1184,61 @@ function packageMockPlugin(options) {
 
 // src/screenshot-service/utils/console-logs/console-logs.ts
 async function captureConsoleLogs(storyId, theme = "light", storybookUrl = "http://localhost:6006", timeoutMs = 3e4) {
-  return captureSemaphore.run(async () => {
-    const browser = await getBrowser();
-    const context = await browser.newContext({
-      viewport: { width: VIEWPORT_WIDTH, height: VIEWPORT_HEIGHT }
-    });
-    const page = await context.newPage();
-    const logs = [];
-    const pageErrors = [];
-    const failedRequests = [];
-    page.on("console", (msg) => {
-      const level = msg.type();
-      logs.push({
-        level: level === "warning" ? "warn" : level,
-        text: msg.text(),
-        timestamp: Date.now()
-      });
-    });
-    page.on("pageerror", (err) => {
-      pageErrors.push(err.message);
-    });
-    page.on("response", (res) => {
-      const status = res.status();
-      if (status >= 400) {
-        const req = res.request();
-        failedRequests.push({
-          url: res.url(),
-          status,
-          method: req.method(),
-          resourceType: req.resourceType(),
-          failure: null
-        });
-      }
+  const browser = await getBrowser();
+  const context = await browser.newContext({
+    viewport: { width: VIEWPORT_WIDTH, height: VIEWPORT_HEIGHT }
+  });
+  const page = await context.newPage();
+  const logs = [];
+  const pageErrors = [];
+  const failedRequests = [];
+  page.on("console", (msg) => {
+    const level = msg.type();
+    logs.push({
+      level: level === "warning" ? "warn" : level,
+      text: msg.text(),
+      timestamp: Date.now()
     });
-    page.on("requestfailed", (req) => {
+  });
+  page.on("pageerror", (err) => {
+    pageErrors.push(err.message);
+  });
+  page.on("response", (res) => {
+    const status = res.status();
+    if (status >= 400) {
+      const req = res.request();
       failedRequests.push({
-        url: req.url(),
-        status: null,
+        url: res.url(),
+        status,
         method: req.method(),
         resourceType: req.resourceType(),
-        failure: req.failure()?.errorText ?? "request failed"
+        failure: null
       });
+    }
+  });
+  page.on("requestfailed", (req) => {
+    failedRequests.push({
+      url: req.url(),
+      status: null,
+      method: req.method(),
+      resourceType: req.resourceType(),
+      failure: req.failure()?.errorText ?? "request failed"
     });
-    const url = `${storybookUrl}/iframe.html?id=${storyId}&viewMode=story&globals=theme:${theme}`;
+  });
+  const url = `${storybookUrl}/iframe.html?id=${storyId}&viewMode=story&globals=theme:${theme}`;
+  try {
+    await page.goto(url, { timeout: timeoutMs });
+    await page.waitForLoadState("domcontentloaded", { timeout: timeoutMs });
+    await page.waitForLoadState("load", { timeout: timeoutMs });
     try {
-      await page.goto(url, { timeout: timeoutMs });
-      await page.waitForLoadState("domcontentloaded", { timeout: timeoutMs });
-      await page.waitForLoadState("load", { timeout: timeoutMs });
-      try {
-        await page.waitForLoadState("networkidle", { timeout: 5e3 });
-      } catch {
-      }
-      await new Promise((r) => setTimeout(r, 1e3));
-      return { logs, pageErrors, failedRequests, url };
-    } finally {
-      await context.close();
+      await page.waitForLoadState("networkidle", { timeout: 5e3 });
+    } catch {
     }
-  });
+    await new Promise((r) => setTimeout(r, 1e3));
+    return { logs, pageErrors, failedRequests, url };
+  } finally {
+    await context.close();
+  }
 }
 
 // src/soft-story-rerender/soft-story-rerender.ts
@@ -1378,17 +1429,6 @@ function findGitRoot(startPath) {
   }
   return null;
 }
-function ifNoneMatchHits(header, etag) {
-  if (!header) return false;
-  return header.split(",").some((raw) => {
-    const token = raw.trim();
-    return token === etag || token === `W/${etag}`;
-  });
-}
-function decideIndexResponse(body, ifNoneMatch) {
-  const etag = `"${createHash("sha1").update(body).digest("hex")}"`;
-  return { etag, notModified: ifNoneMatchHits(ifNoneMatch, etag) };
-}
 var STORY_FILE_PATTERN = /\.stories\.(js|jsx|mjs|ts|tsx|mdx)$/;
 function isStoryFile(file) {
   return STORY_FILE_PATTERN.test(file);
@@ -1421,7 +1461,8 @@ function portFromArgv(argv) {
 }
 async function defaultFetchIndex(port) {
   try {
-    const res = await fetch(`http://localhost:${port}/index.json`, {
+    const res = await fetch(`http://localhost:${port}/index.json?_t=${Date.now()}`, {
+      cache: "no-store",
       signal: AbortSignal.timeout(2e3)
     });
     if (!res.ok) return null;
@@ -1581,8 +1622,15 @@ function detectTailwindEntryCss(cwd) {
 var serveMetadataAndScreenshots = (req, res, next) => {
   if (req.url === "/onbook-index.json") {
     console.log("[STORYBOOK_PLUGIN] Serving /onbook-index.json endpoint");
+    const cacheBuster = Date.now();
     console.log("[STORYBOOK_PLUGIN] Fetching http://localhost:6006/index.json");
-    fetch("http://localhost:6006/index.json").then((response) => {
+    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,
@@ -1601,21 +1649,12 @@ var serveMetadataAndScreenshots = (req, res, next) => {
         entryCount: Object.keys(indexData.entries || {}).length,
         hasMetadata: !!indexData.meta
       });
-      const body = JSON.stringify(indexData);
-      const { etag, notModified } = decideIndexResponse(
-        body,
-        req.headers["if-none-match"]
-      );
-      res.setHeader("Access-Control-Allow-Origin", "*");
-      res.setHeader("ETag", etag);
-      res.setHeader("Cache-Control", "no-cache");
-      if (notModified) {
-        res.statusCode = 304;
-        res.end();
-        return;
-      }
       res.setHeader("Content-Type", "application/json");
-      res.end(body);
+      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("[STORYBOOK_PLUGIN] Failed to fetch/extend index.json", {
         error: error instanceof Error ? error.message : String(error),

package/dist/preset/index.d.ts

@@ -1,4 +1,4 @@
-import { O as OnlookPluginOptions } from '../storybook-onlook-plugin-BvrvMhRF.js';
+import { O as OnlookPluginOptions } from '../storybook-onlook-plugin-J4qj72mN.js';
 import 'vite';
 
 declare function pluginOptionsFromPresetOptions(options: Record<string, unknown> | undefined): OnlookPluginOptions;