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

package/dist/index.js

@@ -1,5 +1,5 @@
 import { createRequire } from 'node:module';
-import path7, { dirname, join, relative } from 'path';
+import path8, { dirname, join, relative } from 'path';
 import crypto, { createHash } from 'crypto';
 import fs5, { existsSync } from 'fs';
 import { fileURLToPath } from 'url';
@@ -61,7 +61,7 @@ function envContainmentPlugin(options) {
   const resolveOutcomes = /* @__PURE__ */ new Map();
   const roots = /* @__PURE__ */ new Set([normalizeSlashes(process.cwd())]);
   const matchTarget = (absPath) => {
-    const norm = normalizeSlashes(path7.normalize(absPath));
+    const norm = normalizeSlashes(path8.normalize(absPath));
     for (const rel of byModule.keys()) {
       for (const root of roots) {
         const target = `${root}/${rel}`;
@@ -96,10 +96,10 @@ function envContainmentPlugin(options) {
       if (source.startsWith("\0")) return null;
       const cleaned = stripQuery(source);
       let direct = null;
-      if (path7.isAbsolute(cleaned)) {
+      if (path8.isAbsolute(cleaned)) {
         direct = cleaned;
       } else if (importer && (cleaned.startsWith("./") || cleaned.startsWith("../"))) {
-        direct = path7.resolve(path7.dirname(stripQuery(importer)), cleaned);
+        direct = path8.resolve(path8.dirname(stripQuery(importer)), cleaned);
       }
       if (direct) {
         const rel = matchTarget(direct);
@@ -108,7 +108,7 @@ function envContainmentPlugin(options) {
       }
       if (!specifierMightMatch(cleaned)) return null;
       if (typeof this.resolve !== "function") return null;
-      const importerDir = importer ? path7.dirname(stripQuery(importer)) : "";
+      const importerDir = importer ? path8.dirname(stripQuery(importer)) : "";
       const outcomeKey = `${importerDir}|${source}`;
       const memoized = resolveOutcomes.get(outcomeKey);
       if (memoized !== void 0) return memoized;
@@ -328,7 +328,7 @@ function componentLocPlugin(options = {}) {
         sourceFilename: filepath
       });
       let mutated = false;
-      const relativePath = path7.relative(root, filepath);
+      const relativePath = path8.relative(root, filepath);
       traverse(ast, {
         JSXElement(nodePath) {
           const opening = nodePath.node.openingElement;
@@ -387,9 +387,9 @@ function fastRefreshTolerantExportsPlugin() {
     }
   };
 }
-var CACHE_DIR = path7.join(process.cwd(), ".storybook-cache");
-var SCREENSHOTS_DIR = path7.join(CACHE_DIR, "screenshots");
-var MANIFEST_PATH = path7.join(CACHE_DIR, "manifest.json");
+var CACHE_DIR = path8.join(process.cwd(), ".storybook-cache");
+var SCREENSHOTS_DIR = path8.join(CACHE_DIR, "screenshots");
+var MANIFEST_PATH = path8.join(CACHE_DIR, "manifest.json");
 var VIEWPORT_WIDTH = 1920;
 var VIEWPORT_HEIGHT = 1080;
 var MIN_COMPONENT_WIDTH = 420;
@@ -514,6 +514,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";
@@ -580,96 +626,98 @@ async function detectRenderState(page, opts = {}) {
   }
 }
 function getScreenshotPath(storyId, theme) {
-  const storyDir = path7.join(SCREENSHOTS_DIR, storyId);
-  return path7.join(storyDir, `${theme}.png`);
+  const storyDir = path8.join(SCREENSHOTS_DIR, storyId);
+  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 {
     ensureCacheDirectories();
-    const storyDir = path7.join(SCREENSHOTS_DIR, storyId);
+    const storyDir = path8.join(SCREENSHOTS_DIR, storyId);
     if (!fs5.existsSync(storyDir)) {
       fs5.mkdirSync(storyDir, { recursive: true });
     }
@@ -771,7 +819,39 @@ 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();
@@ -790,47 +870,46 @@ async function fetchStorybookIndex() {
 }
 function getStoriesForFile(filePath) {
   if (!cachedIndex) return [];
-  const fileName = path7.basename(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")) {
@@ -857,63 +936,258 @@ function handleStoryFileChange({ file, modules }) {
   }
 }
 
+// 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
@@ -985,8 +1259,8 @@ function softStoryRerenderPlugin() {
     preview.onStoriesChanged({ importFn: newModule.importFn });
   }
 });`;
-      const out = code.replace(pattern, (_match, quote, path8) => {
-        return replacement.replace("$QUOTE$$PATH$$QUOTE$", `${quote}${path8}${quote}`);
+      const out = code.replace(pattern, (_match, quote, path9) => {
+        return replacement.replace("$QUOTE$$PATH$$QUOTE$", `${quote}${path9}${quote}`);
       });
       return out === code ? null : { code: out, map: null };
     }
@@ -997,14 +1271,14 @@ function resolveTsconfigAliases(root) {
   try {
     const config = readTsconfigAliasConfig(root);
     if (!config) return [];
-    const base = path7.resolve(root, config.baseUrl ?? ".");
+    const base = path8.resolve(root, config.baseUrl ?? ".");
     const aliases = [];
     for (const [key, targets] of Object.entries(config.paths)) {
       const target = targets[0];
       if (!target) continue;
       if (key.endsWith("/*") && target.endsWith("/*")) {
         const findPrefix = key.slice(0, -1);
-        const targetDir = path7.resolve(base, target.slice(0, -2));
+        const targetDir = path8.resolve(base, target.slice(0, -2));
         aliases.push({
           find: new RegExp(`^${escapeRegExp(findPrefix)}`),
           replacement: `${targetDir}/`
@@ -1012,7 +1286,7 @@ function resolveTsconfigAliases(root) {
       } else if (!key.includes("*") && !target.includes("*")) {
         aliases.push({
           find: new RegExp(`^${escapeRegExp(key)}$`),
-          replacement: path7.resolve(base, target)
+          replacement: path8.resolve(base, target)
         });
       }
     }
@@ -1023,7 +1297,7 @@ function resolveTsconfigAliases(root) {
 }
 function readTsconfigAliasConfig(root) {
   for (const candidate of TSCONFIG_CANDIDATES) {
-    const abs = path7.join(root, candidate);
+    const abs = path8.join(root, candidate);
     let text;
     try {
       text = fs5.readFileSync(abs, "utf-8");
@@ -1104,6 +1378,130 @@ 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);
+}
+function missingFromIndex(index, files) {
+  const importPaths = [];
+  for (const entry of Object.values(index.entries ?? {})) {
+    if (typeof entry.importPath === "string") importPaths.push(entry.importPath);
+  }
+  return files.filter((file) => {
+    const base = path8.basename(file);
+    return !importPaths.some((importPath) => importPath.endsWith(base));
+  });
+}
+function portFromArgv(argv) {
+  for (let i = 0; i < argv.length; i += 1) {
+    const arg = argv[i];
+    if (arg === void 0) continue;
+    let raw;
+    if (arg === "-p" || arg === "--port") {
+      raw = argv[i + 1];
+    } else {
+      raw = /^(?:-p|--port)=(\d+)$/.exec(arg)?.[1];
+    }
+    if (raw === void 0) continue;
+    const parsed = Number.parseInt(raw, 10);
+    if (Number.isInteger(parsed) && parsed > 0 && parsed < 65536) return parsed;
+  }
+  return null;
+}
+async function defaultFetchIndex(port) {
+  try {
+    const res = await fetch(`http://localhost:${port}/index.json`, {
+      signal: AbortSignal.timeout(2e3)
+    });
+    if (!res.ok) return null;
+    return await res.json();
+  } catch {
+    return null;
+  }
+}
+var sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+function createStoryIndexBroadcaster({
+  ports,
+  notify,
+  fetchIndex = defaultFetchIndex,
+  debounceMs = 500,
+  probeIntervalMs = 500,
+  probeCeilingMs = 15e3
+}) {
+  const candidatePorts = [...new Set(ports)];
+  const pendingAdds = /* @__PURE__ */ new Set();
+  let addDebounce = null;
+  let unlinkDebounce = null;
+  let probing = false;
+  const scheduleProbe = () => {
+    if (addDebounce) clearTimeout(addDebounce);
+    addDebounce = setTimeout(() => {
+      addDebounce = null;
+      void probeThenNotify();
+    }, debounceMs);
+  };
+  const probeThenNotify = async () => {
+    if (probing) return;
+    probing = true;
+    const files = Array.from(pendingAdds);
+    const deadline = Date.now() + probeCeilingMs;
+    try {
+      if (files.length === 0) return;
+      while (Date.now() < deadline) {
+        for (const candidate of candidatePorts) {
+          const index = await fetchIndex(candidate);
+          if (index && missingFromIndex(index, files).length === 0) {
+            console.log(
+              "[STORYBOOK_PLUGIN] Index caught up with new story files \u2014 broadcasting",
+              { files, port: candidate }
+            );
+            for (const file of files) pendingAdds.delete(file);
+            notify();
+            return;
+          }
+        }
+        await sleep(probeIntervalMs);
+      }
+      console.warn("[STORYBOOK_PLUGIN] Index probe hit ceiling \u2014 broadcasting anyway", {
+        files,
+        probeCeilingMs
+      });
+      for (const file of files) pendingAdds.delete(file);
+      notify();
+    } finally {
+      probing = false;
+      if (pendingAdds.size > 0) scheduleProbe();
+    }
+  };
+  return {
+    onStoryFileAdded(file) {
+      if (!isStoryFile(file)) return;
+      pendingAdds.add(file);
+      scheduleProbe();
+    },
+    onStoryFileRemoved(file) {
+      if (!isStoryFile(file)) return;
+      pendingAdds.delete(file);
+      if (unlinkDebounce) clearTimeout(unlinkDebounce);
+      unlinkDebounce = setTimeout(() => {
+        unlinkDebounce = null;
+        console.log("[STORYBOOK_PLUGIN] Story file removed \u2014 broadcasting", { file });
+        notify();
+      }, debounceMs);
+    }
+  };
+}
 
 // src/storybook-onlook-plugin.ts
 function errorCode(error) {
@@ -1170,7 +1568,7 @@ var TAILWIND_ENTRY_CANDIDATES = [
 var TAILWIND_DIRECTIVE_PATTERN = /@import\s+['"](?:tailwindcss|tailwindcss\/.+)['"]|@tailwind\s+(?:base|components|utilities)/;
 function detectTailwindEntryCss(cwd) {
   for (const rel of TAILWIND_ENTRY_CANDIDATES) {
-    const abs = path7.join(cwd, rel);
+    const abs = path8.join(cwd, rel);
     try {
       if (!fs5.existsSync(abs)) continue;
       const head = fs5.readFileSync(abs, "utf-8").slice(0, 2048);
@@ -1183,15 +1581,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,
@@ -1210,12 +1601,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),
@@ -1307,7 +1707,7 @@ var serveMetadataAndScreenshots = (req, res, next) => {
     return;
   }
   if (req.url?.startsWith("/screenshots/")) {
-    const screenshotPath = path7.join(
+    const screenshotPath = path8.join(
       process.cwd(),
       ".storybook-cache",
       req.url.replace("/screenshots/", "screenshots/")
@@ -1328,7 +1728,7 @@ var serveMetadataAndScreenshots = (req, res, next) => {
         `[STORYBOOK_PLUGIN] Generating screenshot on-demand: ${storyId}/${theme}`
       );
       captureScreenshotBuffer(storyId, theme).then(({ buffer }) => {
-        const storyDir = path7.join(
+        const storyDir = path8.join(
           process.cwd(),
           ".storybook-cache",
           "screenshots",
@@ -1447,7 +1847,7 @@ function storybookOnlookPlugin(options = {}) {
     configureServer(server) {
       console.log("[STORYBOOK_PLUGIN] Configuring server middleware");
       server.middlewares.use(serveMetadataAndScreenshots);
-      const cachedManifestPath = path7.join(
+      const cachedManifestPath = path8.join(
         process.cwd(),
         ".storybook-cache",
         "manifest.json"
@@ -1466,7 +1866,7 @@ function storybookOnlookPlugin(options = {}) {
       server.watcher.on("change", scheduleRefresh);
       const storyGlobs = options.storyGlobs ?? ["**/*.stories.@(js|jsx|mjs|ts|tsx|mdx)"];
       const resolvedStoryGlobs = storyGlobs.map(
-        (glob) => path7.isAbsolute(glob) ? glob : path7.join(process.cwd(), glob)
+        (glob) => path8.isAbsolute(glob) ? glob : path8.join(process.cwd(), glob)
       );
       if (resolvedStoryGlobs.length > 0) {
         server.watcher.add(resolvedStoryGlobs);
@@ -1474,10 +1874,36 @@ function storybookOnlookPlugin(options = {}) {
           storyGlobs: resolvedStoryGlobs
         });
       }
+      const probeCandidatePorts = [
+        ...new Set(
+          [portFromArgv(process.argv), port, server.config.server.port].filter(
+            (p) => typeof p === "number"
+          )
+        )
+      ];
+      console.log("[STORYBOOK_PLUGIN] Story add/unlink index broadcast enabled", {
+        probeCandidatePorts
+      });
+      const indexBroadcaster = createStoryIndexBroadcaster({
+        ports: probeCandidatePorts,
+        notify: notifyOnbookIndexChanged
+      });
+      let indexBroadcastWatcherReady = false;
+      server.watcher.once("ready", () => {
+        indexBroadcastWatcherReady = true;
+      });
+      server.watcher.on("add", (file) => {
+        if (!indexBroadcastWatcherReady) return;
+        indexBroadcaster.onStoryFileAdded(file);
+      });
+      server.watcher.on("unlink", (file) => {
+        if (!indexBroadcastWatcherReady) return;
+        indexBroadcaster.onStoryFileRemoved(file);
+      });
       const tailwindEntryPath = (() => {
         if (options.tailwindEntryCss === false) return null;
         if (typeof options.tailwindEntryCss === "string") {
-          return path7.isAbsolute(options.tailwindEntryCss) ? options.tailwindEntryCss : path7.join(process.cwd(), options.tailwindEntryCss);
+          return path8.isAbsolute(options.tailwindEntryCss) ? options.tailwindEntryCss : path8.join(process.cwd(), options.tailwindEntryCss);
         }
         return detectTailwindEntryCss(process.cwd());
       })();
@@ -1493,7 +1919,7 @@ function storybookOnlookPlugin(options = {}) {
         });
         server.watcher.on("add", (file) => {
           if (!/\.tsx?$/.test(file)) return;
-          const dir = path7.dirname(file);
+          const dir = path8.dirname(file);
           const isNewDir = !seenDirs.has(dir);
           seenDirs.add(dir);
           if (!watcherReady || !isNewDir) return;
@@ -1524,15 +1950,17 @@ function storybookOnlookPlugin(options = {}) {
     configurePreviewServer(server) {
       console.log("[STORYBOOK_PLUGIN] Configuring preview server middleware");
       server.middlewares.use(serveMetadataAndScreenshots);
-      refreshManifest(path7.join(process.cwd(), ".storybook-cache", "manifest.json"));
+      refreshManifest(path8.join(process.cwd(), ".storybook-cache", "manifest.json"));
     },
     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,