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

package/dist/preset/index.js

@@ -394,6 +394,52 @@ 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";
@@ -464,87 +510,89 @@ 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) {
-  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 {
-      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
-      };
+  return captureSemaphore.run(async () => {
+    const browser = await getBrowser();
+    const context = await browser.newContext({
+      viewport: { width, height },
+      deviceScaleFactor: 2
     });
-    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
-        }
+    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 {
+        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
+        };
       });
-    } else {
-      screenshotBuffer = await page.screenshot({ type: "png" });
+      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();
     }
-    return { buffer: screenshotBuffer, boundingBox: resultBoundingBox, renderState };
-  } finally {
-    await context.close();
-  }
+  });
 }
 async function generateScreenshot(storyId, theme, storybookUrl = "http://localhost:6006", timeoutMs = 3e4) {
   try {
@@ -651,7 +699,39 @@ async function waitForIndexAndBroadcast(port = 6006) {
   });
 }
 
+// src/handlers/handleStoryFileChange/captureCoalescer/captureCoalescer.ts
+function createCaptureCoalescer(runCapture) {
+  const inFlight3 = /* @__PURE__ */ new Map();
+  const trailing2 = /* @__PURE__ */ new Set();
+  const start = (storyId) => {
+    const done = (async () => {
+      try {
+        await runCapture(storyId);
+      } finally {
+        inFlight3.delete(storyId);
+        if (trailing2.has(storyId)) {
+          trailing2.delete(storyId);
+          await start(storyId);
+        }
+      }
+    })();
+    inFlight3.set(storyId, done);
+    return done;
+  };
+  return {
+    capture(storyId) {
+      const existing = inFlight3.get(storyId);
+      if (existing) {
+        trailing2.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();
@@ -673,44 +753,43 @@ 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 allStoryIds = /* @__PURE__ */ new Set();
-  const fileToStories = /* @__PURE__ */ new Map();
+  const storyToFiles = /* @__PURE__ */ new Map();
   for (const file of files) {
-    const storyIds = getStoriesForFile(file);
-    fileToStories.set(file, storyIds);
-    for (const id of storyIds) {
-      allStoryIds.add(id);
+    for (const storyId of getStoriesForFile(file)) {
+      const arr = storyToFiles.get(storyId) ?? [];
+      arr.push(file);
+      storyToFiles.set(storyId, arr);
     }
   }
-  if (allStoryIds.size === 0) {
+  if (storyToFiles.size === 0) {
     console.log("[Screenshots] No stories found for changed files");
     return;
   }
   console.log(
-    `[Screenshots] Regenerating ${allStoryIds.size} stories from ${files.length} files`
+    `[Screenshots] Regenerating ${storyToFiles.size} stories from ${files.length} files`
   );
-  const storybookUrl = "http://localhost:6006";
-  const storyBoundingBoxes = /* @__PURE__ */ new Map();
+  for (const [storyId, storyFiles] of storyToFiles) {
+    latestStoryFiles.set(storyId, storyFiles);
+  }
   await Promise.all(
-    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);
-      }
-    })
+    Array.from(storyToFiles.keys()).map((storyId) => captureCoalescer.capture(storyId))
   );
-  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`);
+  console.log(`[Screenshots] \u2713 Regenerated ${storyToFiles.size} stories`);
 }
 function handleStoryFileChange({ file, modules }) {
   if (file.endsWith(".stories.tsx") || file.endsWith(".stories.ts")) {
@@ -853,63 +932,258 @@ function moduleLoadCatchAllPlugin() {
   };
 }
 
+// src/package-mock/clerk-mock.ts
+var VALID_IDENT_RE2 = /^[A-Za-z_$][\w$]*$/;
+var RESERVED_HELPER_NAMES = /* @__PURE__ */ new Set([
+  "__user",
+  "__pass",
+  "__null",
+  "__clerk",
+  "__sessionId",
+  "__asyncNoop",
+  "__noop",
+  "createElement",
+  "Fragment"
+]);
+var BUILDERS = {
+  "@clerk/nextjs": buildClerkMockSource,
+  "@clerk/clerk-react": buildClerkMockSource
+};
+function isKnownMockPackage(pkg) {
+  return pkg in BUILDERS;
+}
+function buildPackageMockSource(pkg, usedExports) {
+  const build = BUILDERS[pkg];
+  if (!build) throw new Error(`no package mock for '${pkg}'`);
+  return build(usedExports);
+}
+var CLERK_KNOWN_HOOKS = {
+  useAuth: "({ isLoaded: true, isSignedIn: true, userId: __user.id, sessionId: __sessionId, actor: null, orgId: null, orgRole: null, orgSlug: null, has: () => true, signOut: __asyncNoop, getToken: async () => null })",
+  useUser: "({ isLoaded: true, isSignedIn: true, user: __user })",
+  useSession: '({ isLoaded: true, isSignedIn: true, session: { id: __sessionId, status: "active", user: __user } })',
+  useSessionList: "({ isLoaded: true, sessions: [], setActive: __asyncNoop })",
+  useClerk: "__clerk",
+  useOrganization: "({ isLoaded: true, organization: null, membership: null, memberships: undefined })",
+  useOrganizationList: "({ isLoaded: true, userMemberships: undefined, setActive: __asyncNoop })",
+  useSignIn: "({ isLoaded: true, signIn: undefined, setActive: __asyncNoop })",
+  useSignUp: "({ isLoaded: true, signUp: undefined, setActive: __asyncNoop })"
+};
+var CLERK_CHILDREN_COMPONENTS = /* @__PURE__ */ new Set([
+  "ClerkProvider",
+  "ClerkLoaded",
+  "SignedIn",
+  "Protect",
+  "SignInButton",
+  "SignUpButton",
+  "SignOutButton",
+  "SignInWithMetamaskButton"
+]);
+var CLERK_NULL_COMPONENTS = /* @__PURE__ */ new Set([
+  "SignedOut",
+  "ClerkLoading",
+  "RedirectToSignIn",
+  "RedirectToSignUp",
+  "RedirectToUserProfile",
+  "RedirectToOrganizationProfile",
+  "RedirectToCreateOrganization",
+  "AuthenticateWithRedirectCallback",
+  "UserButton",
+  "UserProfile",
+  "OrganizationSwitcher",
+  "OrganizationProfile",
+  "OrganizationList",
+  "CreateOrganization",
+  "SignIn",
+  "SignUp",
+  "Waitlist",
+  "GoogleOneTap"
+]);
+var CLERK_PREAMBLE = [
+  "// Auto-generated by @onlook/storybook-plugin (package mock). Zero-backend,",
+  "// signed-in Clerk stand-in so components that call useUser()/useAuth() render",
+  "// authenticated content in the canvas without a publishable key, clerk-js, or",
+  "// a network round-trip. Swap back to the real @clerk/* package for live data.",
+  "import { createElement, Fragment } from 'react';",
+  "const __asyncNoop = async () => {};",
+  "const __noop = () => {};",
+  // No `: any` param annotation: the virtual module is served extensionless
+  // (see header) so Vite parses it as PLAIN JS — a TS type annotation here is a
+  // runtime `Unexpected token ':'` that breaks every story importing the package.
+  "const __pass = (props) => createElement(Fragment, null, props ? props.children : undefined);",
+  "const __null = () => null;",
+  "const __sessionId = 'sess_onlookMock';",
+  "// A plausible signed-in Clerk user. Fields cover the common UserResource",
+  "// surface components read at render; no image URL (avoids a network fetch).",
+  "const __user = {",
+  "  id: 'user_onlookMock',",
+  "  firstName: 'Ada',",
+  "  lastName: 'Lovelace',",
+  "  fullName: 'Ada Lovelace',",
+  "  username: 'ada',",
+  "  imageUrl: '',",
+  "  hasImage: false,",
+  "  primaryEmailAddressId: 'idn_onlookMock',",
+  "  primaryEmailAddress: { id: 'idn_onlookMock', emailAddress: 'ada@example.com' },",
+  "  emailAddresses: [{ id: 'idn_onlookMock', emailAddress: 'ada@example.com' }],",
+  "  primaryPhoneNumber: null,",
+  "  phoneNumbers: [],",
+  "  externalAccounts: [],",
+  "  organizationMemberships: [],",
+  "  publicMetadata: {},",
+  "  unsafeMetadata: {},",
+  "  reload: __asyncNoop,",
+  "  update: __asyncNoop,",
+  "};",
+  "const __clerk = {",
+  "  loaded: true,",
+  "  user: __user,",
+  "  session: { id: __sessionId, status: 'active', user: __user },",
+  "  organization: null,",
+  "  openSignIn: __noop,",
+  "  openSignUp: __noop,",
+  "  openUserProfile: __noop,",
+  "  openOrganizationProfile: __noop,",
+  "  closeSignIn: __noop,",
+  "  closeSignUp: __noop,",
+  "  signOut: __asyncNoop,",
+  "  setActive: __asyncNoop,",
+  "};"
+];
+function clerkExportLine(name) {
+  if (name in CLERK_KNOWN_HOOKS) {
+    return `export const ${name} = () => ${CLERK_KNOWN_HOOKS[name]};`;
+  }
+  if (CLERK_CHILDREN_COMPONENTS.has(name)) {
+    return `export const ${name} = __pass;`;
+  }
+  if (CLERK_NULL_COMPONENTS.has(name)) {
+    return `export const ${name} = __null;`;
+  }
+  if (/^use[A-Z]/.test(name)) {
+    return `export const ${name} = () => ({ isLoaded: true, isSignedIn: true });`;
+  }
+  if (/^[A-Z]/.test(name)) {
+    return `export const ${name} = __pass;`;
+  }
+  return `export const ${name} = undefined;`;
+}
+function buildClerkMockSource(usedExports) {
+  const names = Array.from(
+    new Set(
+      usedExports.filter(
+        (n) => VALID_IDENT_RE2.test(n) && n !== "default" && !RESERVED_HELPER_NAMES.has(n)
+      )
+    )
+  ).sort();
+  const lines = [
+    ...CLERK_PREAMBLE,
+    "",
+    ...names.map(clerkExportLine),
+    "",
+    "// Rarely used, but `import Clerk from ...` must not fail: an inert object.",
+    "export default {};",
+    ""
+  ];
+  return lines.join("\n");
+}
+
+// src/package-mock/package-mock.ts
+var PACKAGE_MOCK_PLUGIN_NAME = "onlook-package-mock";
+var PACKAGE_MOCK_VIRTUAL_PREFIX = "\0onlook-package-mock:";
+function stripQuery2(id) {
+  const q = id.indexOf("?");
+  return q === -1 ? id : id.slice(0, q);
+}
+function packageMockPlugin(options) {
+  const entries = (options?.packages ?? []).filter(
+    (e) => e && typeof e.package === "string" && e.package.length > 0 && // Only known auth packages get a functional mock — an unknown package
+    // has no source builder, so silently drop it (honest skip) rather than
+    // intercept it into a broken module.
+    isKnownMockPackage(e.package)
+  );
+  if (entries.length === 0) return null;
+  const usedByPackage = /* @__PURE__ */ new Map();
+  for (const e of entries) usedByPackage.set(e.package, e.usedExports ?? []);
+  return {
+    name: PACKAGE_MOCK_PLUGIN_NAME,
+    // `pre` so we intercept the specifier before Vite's resolve pipeline (and
+    // before tsconfig-paths / node resolution) claims it.
+    enforce: "pre",
+    resolveId(source) {
+      if (source.startsWith("\0")) return null;
+      const cleaned = stripQuery2(source);
+      if (!usedByPackage.has(cleaned)) return null;
+      return PACKAGE_MOCK_VIRTUAL_PREFIX + cleaned;
+    },
+    load(id) {
+      if (!id.startsWith(PACKAGE_MOCK_VIRTUAL_PREFIX)) return null;
+      const pkg = id.slice(PACKAGE_MOCK_VIRTUAL_PREFIX.length);
+      const used = usedByPackage.get(pkg);
+      if (used === void 0) return null;
+      return buildPackageMockSource(pkg, used);
+    }
+  };
+}
+
 // src/screenshot-service/utils/console-logs/console-logs.ts
 async function captureConsoleLogs(storyId, theme = "light", storybookUrl = "http://localhost:6006", timeoutMs = 3e4) {
-  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()
+  return captureSemaphore.run(async () => {
+    const browser = await getBrowser();
+    const context = await browser.newContext({
+      viewport: { width: VIEWPORT_WIDTH, height: VIEWPORT_HEIGHT }
     });
-  });
-  page.on("pageerror", (err) => {
-    pageErrors.push(err.message);
-  });
-  page.on("response", (res) => {
-    const status = res.status();
-    if (status >= 400) {
-      const req = res.request();
+    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
+        });
+      }
+    });
+    page.on("requestfailed", (req) => {
       failedRequests.push({
-        url: res.url(),
-        status,
+        url: req.url(),
+        status: null,
         method: req.method(),
         resourceType: req.resourceType(),
-        failure: null
+        failure: req.failure()?.errorText ?? "request failed"
       });
-    }
-  });
-  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}`;
-  try {
-    await page.goto(url, { timeout: timeoutMs });
-    await page.waitForLoadState("domcontentloaded", { timeout: timeoutMs });
-    await page.waitForLoadState("load", { timeout: timeoutMs });
+    const url = `${storybookUrl}/iframe.html?id=${storyId}&viewMode=story&globals=theme:${theme}`;
     try {
-      await page.waitForLoadState("networkidle", { timeout: 5e3 });
-    } catch {
+      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 new Promise((r) => setTimeout(r, 1e3));
-    return { logs, pageErrors, failedRequests, url };
-  } finally {
-    await context.close();
-  }
+  });
 }
 
 // src/soft-story-rerender/soft-story-rerender.ts
@@ -1100,6 +1374,17 @@ 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);
@@ -1132,8 +1417,7 @@ function portFromArgv(argv) {
 }
 async function defaultFetchIndex(port) {
   try {
-    const res = await fetch(`http://localhost:${port}/index.json?_t=${Date.now()}`, {
-      cache: "no-store",
+    const res = await fetch(`http://localhost:${port}/index.json`, {
       signal: AbortSignal.timeout(2e3)
     });
     if (!res.ok) return null;
@@ -1293,15 +1577,8 @@ 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?_t=${cacheBuster}`, {
-      cache: "no-store",
-      headers: {
-        "Cache-Control": "no-cache",
-        Pragma: "no-cache"
-      }
-    }).then((response) => {
+    fetch("http://localhost:6006/index.json").then((response) => {
       console.log("[STORYBOOK_PLUGIN] Storybook index fetch response", {
         status: response.status,
         ok: response.ok,
@@ -1320,12 +1597,21 @@ var serveMetadataAndScreenshots = (req, res, next) => {
         entryCount: Object.keys(indexData.entries || {}).length,
         hasMetadata: !!indexData.meta
       });
-      res.setHeader("Content-Type", "application/json");
+      const body = JSON.stringify(indexData);
+      const { etag, notModified } = decideIndexResponse(
+        body,
+        req.headers["if-none-match"]
+      );
       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));
+      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);
     }).catch((error) => {
       console.error("[STORYBOOK_PLUGIN] Failed to fetch/extend index.json", {
         error: error instanceof Error ? error.message : String(error),
@@ -1665,10 +1951,12 @@ function storybookOnlookPlugin(options = {}) {
     handleHotUpdate: handleStoryFileChange
   };
   const envContainment = envContainmentPlugin(options.envContainment);
+  const packageMock = packageMockPlugin(options.packageMock);
   const moduleLoadCatchAll = options.moduleLoadCatchAll === false ? null : moduleLoadCatchAllPlugin();
   return withDedupeApply(
     [
       ...envContainment ? [envContainment] : [],
+      ...packageMock ? [packageMock] : [],
       ...moduleLoadCatchAll ? [moduleLoadCatchAll] : [],
       componentLocPlugin(),
       mainPlugin,
@@ -1749,6 +2037,7 @@ var OPTION_KEY_MAP = {
   storyGlobs: true,
   tailwindEntryCss: true,
   envContainment: true,
+  packageMock: true,
   moduleLoadCatchAll: true,
   resolveAliases: true
 };