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

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;
@@ -580,8 +580,8 @@ 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();
@@ -669,7 +669,7 @@ async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, h
 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 });
     }
@@ -790,7 +790,7 @@ 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);
 }
 async function regenerateScreenshotsForFiles(files) {
@@ -985,8 +985,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 +997,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 +1012,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 +1023,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 +1104,120 @@ function findGitRoot(startPath) {
   }
   return null;
 }
+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?_t=${Date.now()}`, {
+      cache: "no-store",
+      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 +1284,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);
@@ -1307,7 +1421,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 +1442,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 +1561,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 +1580,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 +1588,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 +1633,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,7 +1664,7 @@ 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
   };

package/dist/preset/index.js

@@ -1,7 +1,7 @@
 import { createRequire } from 'node:module';
 import crypto, { createHash } from 'crypto';
 import fs5, { existsSync } from 'fs';
-import path7, { dirname, join, relative } from 'path';
+import path8, { dirname, join, relative } from 'path';
 import { fileURLToPath } from 'url';
 import generateModule from '@babel/generator';
 import { parse } from '@babel/parser';
@@ -45,7 +45,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;
@@ -117,7 +117,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}`;
@@ -152,10 +152,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);
@@ -164,7 +164,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;
@@ -267,9 +267,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;
@@ -460,8 +460,8 @@ 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();
@@ -549,7 +549,7 @@ async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, h
 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 });
     }
@@ -670,7 +670,7 @@ 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);
 }
 async function regenerateScreenshotsForFiles(files) {
@@ -981,8 +981,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 };
     }
@@ -993,14 +993,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}/`
@@ -1008,7 +1008,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)
         });
       }
     }
@@ -1019,7 +1019,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");
@@ -1100,6 +1100,120 @@ function findGitRoot(startPath) {
   }
   return null;
 }
+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?_t=${Date.now()}`, {
+      cache: "no-store",
+      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) {
@@ -1166,7 +1280,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);
@@ -1303,7 +1417,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/")
@@ -1324,7 +1438,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",
@@ -1443,7 +1557,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"
@@ -1462,7 +1576,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);
@@ -1470,10 +1584,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());
       })();
@@ -1489,7 +1629,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;
@@ -1520,7 +1660,7 @@ 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
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onlook/storybook-plugin",
-  "version": "0.4.0-beta.15",
+  "version": "0.4.0-beta.16",
   "type": "module",
   "bin": {
     "onlook-storybook": "./dist/cli/index.js"
@@ -52,7 +52,7 @@
     "storybook": "^10.1.11"
   },
   "devDependencies": {
-    "@onbook/tsconfig": "0.1.0",
+    "@onbook/tsconfig": "workspace:*",
     "@types/babel__generator": "^7.6.8",
     "@types/babel__traverse": "^7.20.6",
     "@types/node": "^22.15.32",