@onlook/storybook-plugin 0.4.0-beta.1 → 0.4.0-beta.11

package/dist/index.js

@@ -1,97 +1,309 @@
+import { createRequire } from 'node:module';
+import path7, { dirname, join, relative } from 'path';
+import crypto, { createHash } from 'crypto';
 import fs5, { existsSync } from 'fs';
-import path, { dirname, join, relative } from 'path';
 import { fileURLToPath } from 'url';
-import autoStoryGenerator from '@takuma-ru/auto-story-generator';
-import { withDefaultConfig } from 'react-docgen-typescript';
 import generateModule from '@babel/generator';
 import { parse } from '@babel/parser';
 import traverseModule from '@babel/traverse';
 import * as t from '@babel/types';
-import crypto from 'crypto';
+import { execFile } from 'child_process';
+import { createRequire as createRequire$1 } from 'module';
+import { promisify } from 'util';
 import { chromium } from 'playwright';
+import { readCsf } from 'storybook/internal/csf-tools';
 
-// src/storybook-onlook-plugin.ts
-var FIXED_MARKER = "// @onlook-fixed";
-var parser = withDefaultConfig({
-  shouldExtractLiteralValuesFromEnum: true,
-  shouldRemoveUndefinedFromOptional: true,
-  propFilter: (prop) => {
-    if (prop.parent?.fileName.includes("node_modules")) return false;
-    return true;
-  }
-});
-function resolveComponentPath(storyFilePath) {
-  const dir = path.dirname(storyFilePath);
-  const parentDir = path.dirname(dir);
-  const storyName = path.basename(storyFilePath);
-  const componentName = storyName.replace(".stories.tsx", ".tsx");
-  const componentPath = path.join(parentDir, componentName);
-  return fs5.existsSync(componentPath) ? componentPath : null;
-}
-function generateArgTypes(componentPath) {
-  try {
-    const docs = parser.parse(componentPath);
-    if (docs.length === 0) return null;
-    const doc = docs[0];
-    if (!doc) return null;
-    const argTypes = {};
-    for (const [name, prop] of Object.entries(doc.props)) {
-      if (prop.type.name.includes("=>") || prop.type.name === "Function") {
-        continue;
-      }
-      const argType = {};
-      if (prop.description) {
-        argType.description = prop.description;
+globalThis.require = createRequire(import.meta.url);
+
+// src/containment-contract/containment-contract.ts
+var ONLOOK_CONTAINMENT_CONTRACT_VERSION = 1;
+var ONLOOK_CONTAINED_MODULES_GLOBAL = "__ONLOOK_CONTAINED_MODULES__";
+var ONLOOK_CONTAINED_PROP = "__onlookContained";
+var ONLOOK_CONTAINMENT_CONTRACT_GLOBAL = "__ONLOOK_CONTAINMENT_CONTRACT__";
+var ONLOOK_CONTAINED_EVENT = "onlook/contained";
+var ONLOOK_RENDERED_EVENT = "onlook/rendered";
+var ONLOOK_UNCONTAINED_ERROR_EVENT = "onlook/uncontained-error";
+var ONLOOK_RENDER_STATE_ATTR = "data-onlook-render-state";
+var ONLOOK_RENDER_STORY_ATTR = "data-onlook-story-id";
+var ONLOOK_CONTAINED_CARD_ATTR = "data-onlook-contained-card";
+var ENV_CONTAINMENT_PLUGIN_NAME = "onlook-env-containment";
+var ENV_CONTAINMENT_VIRTUAL_PREFIX = "\0onlook-env-containment:";
+var VALID_IDENT_RE = /^[A-Za-z_$][\w$]*$/;
+var MATCH_SUFFIXES = ["", ".ts", ".tsx", ".js", ".jsx", ".mjs", ".cjs"];
+function normalizeSlashes(p) {
+  return p.replace(/\\/g, "/");
+}
+function stripQuery(id) {
+  const q = id.indexOf("?");
+  return q === -1 ? id : id.slice(0, q);
+}
+function envContainmentPlugin(options) {
+  const substitutions = (options?.substitute ?? []).filter(
+    (s) => typeof s.module === "string" && s.module.length > 0
+  );
+  const defineEntries = options?.define ?? {};
+  if (substitutions.length === 0 && Object.keys(defineEntries).length === 0) {
+    return null;
+  }
+  const byModule = /* @__PURE__ */ new Map();
+  for (const sub of substitutions) {
+    byModule.set(normalizeSlashes(sub.module).replace(/^\.\//, ""), sub);
+  }
+  const targetBasenames = /* @__PURE__ */ new Set();
+  for (const rel of byModule.keys()) {
+    const base = rel.slice(rel.lastIndexOf("/") + 1);
+    targetBasenames.add(base.replace(/\.[^.]+$/, ""));
+  }
+  const specifierMightMatch = (cleaned) => {
+    const segment = cleaned.slice(cleaned.lastIndexOf("/") + 1);
+    return targetBasenames.has(segment.replace(/\.[^.]+$/, ""));
+  };
+  const resolveOutcomes = /* @__PURE__ */ new Map();
+  const roots = /* @__PURE__ */ new Set([normalizeSlashes(process.cwd())]);
+  const matchTarget = (absPath) => {
+    const norm = normalizeSlashes(path7.normalize(absPath));
+    for (const rel of byModule.keys()) {
+      for (const root of roots) {
+        const target = `${root}/${rel}`;
+        for (const suffix of MATCH_SUFFIXES) {
+          if (`${norm}${suffix}` === target) return rel;
+        }
       }
-      if (prop.type.name === "enum" && prop.type.value) {
-        argType.control = { type: "select" };
-        argType.options = prop.type.value.map(
-          (v) => v.value
-        );
+    }
+    return null;
+  };
+  return {
+    name: ENV_CONTAINMENT_PLUGIN_NAME,
+    // `pre` so we see specifiers before Vite's alias/resolve pipeline and
+    // before other resolveId hooks (e.g. tsconfig-paths) claim them.
+    enforce: "pre",
+    config() {
+      const keys = Object.entries(defineEntries);
+      if (keys.length === 0) return {};
+      const define = {};
+      for (const [key, value] of keys) {
+        const serialized = JSON.stringify(value);
+        define[`process.env.${key}`] = serialized;
+        define[`import.meta.env.${key}`] = serialized;
       }
-      if (prop.type.name === "boolean") {
-        argType.control = { type: "boolean" };
+      return { define };
+    },
+    configResolved(config) {
+      if (config.root) roots.add(normalizeSlashes(config.root));
+    },
+    async resolveId(source, importer) {
+      if (byModule.size === 0) return null;
+      if (source.startsWith("\0")) return null;
+      const cleaned = stripQuery(source);
+      let direct = null;
+      if (path7.isAbsolute(cleaned)) {
+        direct = cleaned;
+      } else if (importer && (cleaned.startsWith("./") || cleaned.startsWith("../"))) {
+        direct = path7.resolve(path7.dirname(stripQuery(importer)), cleaned);
       }
-      if (prop.type.name === "number") {
-        argType.control = { type: "number" };
+      if (direct) {
+        const rel = matchTarget(direct);
+        if (rel) return ENV_CONTAINMENT_VIRTUAL_PREFIX + rel;
+        return null;
       }
-      if (Object.keys(argType).length > 0) {
-        argTypes[name] = argType;
+      if (!specifierMightMatch(cleaned)) return null;
+      if (typeof this.resolve !== "function") return null;
+      const importerDir = importer ? path7.dirname(stripQuery(importer)) : "";
+      const outcomeKey = `${importerDir}|${source}`;
+      const memoized = resolveOutcomes.get(outcomeKey);
+      if (memoized !== void 0) return memoized;
+      const resolved = await this.resolve(source, importer, { skipSelf: true });
+      let outcome = null;
+      if (resolved?.id && !resolved.external) {
+        const rel = matchTarget(stripQuery(resolved.id));
+        if (rel) outcome = ENV_CONTAINMENT_VIRTUAL_PREFIX + rel;
       }
+      resolveOutcomes.set(outcomeKey, outcome);
+      return outcome;
+    },
+    load(id) {
+      if (!id.startsWith(ENV_CONTAINMENT_VIRTUAL_PREFIX)) return null;
+      const rel = id.slice(ENV_CONTAINMENT_VIRTUAL_PREFIX.length);
+      const sub = byModule.get(rel);
+      if (!sub) return null;
+      return buildStandInSource(sub);
     }
-    return Object.keys(argTypes).length > 0 ? argTypes : null;
-  } catch (err) {
-    console.error(`[AutoStories] Failed to parse component: ${componentPath}`, err);
-    return null;
-  }
+  };
 }
-function enrichStoryFile(storyFilePath) {
+function buildStandInSource(sub) {
+  const marker = {
+    modulePath: sub.module,
+    reason: "env-validation",
+    envKeys: sub.envKeys ?? [],
+    ...sub.schemaKind ? { schemaKind: sub.schemaKind } : {}
+  };
+  const named = Array.from(
+    new Set(
+      (sub.exports ?? []).filter(
+        (name) => VALID_IDENT_RE.test(name) && name !== "default"
+      )
+    )
+  );
+  return [
+    "// Generated by @onlook/storybook-plugin (env containment).",
+    `// The real module (${sub.module}) validates environment variables at`,
+    "// module scope and throws on import when keys are missing. This stand-in",
+    "// defers the throw to property access so Storybook can boot and the",
+    "// Onlook error boundary can attribute the failure to the module.",
+    `const __onlookMarker = ${JSON.stringify(marker)};`,
+    "const __onlookGlobal = globalThis;",
+    `__onlookGlobal.${ONLOOK_CONTAINED_MODULES_GLOBAL} =`,
+    `  __onlookGlobal.${ONLOOK_CONTAINED_MODULES_GLOBAL} || {};`,
+    `__onlookGlobal.${ONLOOK_CONTAINED_MODULES_GLOBAL}[__onlookMarker.modulePath] = __onlookMarker;`,
+    "function __onlookContainedError(access) {",
+    "  const keys = __onlookMarker.envKeys.length",
+    "    ? ' Missing env keys: ' + __onlookMarker.envKeys.join(', ') + '.'",
+    "    : '';",
+    "  const err = new Error(",
+    "    '[onlook] ' + __onlookMarker.modulePath +",
+    "      ' was contained: it validates environment variables at module scope' +",
+    "      ' and the required keys are not set. Accessed: ' + access + '.' + keys,",
+    "  );",
+    `  err.${ONLOOK_CONTAINED_PROP} = __onlookMarker;`,
+    "  return err;",
+    "}",
+    "function __onlookStandIn(exportName) {",
+    "  return new Proxy(function () {}, {",
+    "    get(_target, prop) {",
+    `      if (prop === '${ONLOOK_CONTAINED_PROP}') return __onlookMarker;`,
+    "      if (typeof prop === 'symbol' || prop === 'then') return undefined;",
+    "      throw __onlookContainedError(exportName + '.' + String(prop));",
+    "    },",
+    "    apply() {",
+    "      throw __onlookContainedError(exportName + '()');",
+    "    },",
+    "    construct() {",
+    "      throw __onlookContainedError('new ' + exportName + '()');",
+    "    },",
+    "  });",
+    "}",
+    "export default __onlookStandIn('default');",
+    ...named.map(
+      (name) => `export const ${name} = __onlookStandIn(${JSON.stringify(name)});`
+    ),
+    ""
+  ].join("\n");
+}
+
+// src/module-load-catch-all/module-load-catch-all.ts
+var STORYBOOK_VIRTUAL_STORIES_ID = "virtual:/@storybook/builder-vite/storybook-stories.js";
+var RESOLVED_STORYBOOK_VIRTUAL_STORIES_ID = `\0${STORYBOOK_VIRTUAL_STORIES_ID}`;
+var MODULE_LOAD_CATCH_ALL_PLUGIN_NAME = "onlook-module-load-catch-all";
+var IMPORT_FN_CALL = "return await importers[path]();";
+var INJECTED_BINDING = "__onlookSyntheticCsfModule";
+async function onlookSyntheticCsfModule(importPath, loadError, containedProp) {
+  const original = loadError instanceof Error ? loadError : new Error(String(loadError));
+  const synthetic = new Error(
+    `Story module failed to load: ${importPath}
+${original.message}`
+  );
+  const marker = original[containedProp];
+  if (marker !== void 0) {
+    synthetic[containedProp] = marker;
+  }
+  synthetic.cause = original;
   try {
-    const content = fs5.readFileSync(storyFilePath, "utf-8");
-    if (content.includes(FIXED_MARKER)) {
-      return;
-    }
-    if (content.includes("argTypes:")) {
-      return;
-    }
-    const componentPath = resolveComponentPath(storyFilePath);
-    if (!componentPath) return;
-    const argTypes = generateArgTypes(componentPath);
-    if (!argTypes) return;
-    const argTypesStr = JSON.stringify(argTypes, null, 2).split("\n").map((line, i) => i === 0 ? line : `  ${line}`).join("\n");
-    const enriched = content.replace(
-      /};\s*\nexport default meta;/,
-      `  argTypes: ${argTypesStr},
-};
-export default meta;`
+    console.error(
+      "[ONLOOK] Story module failed to load \u2014 serving contained synthetic stories.",
+      { importPath, error: original }
     );
-    if (enriched !== content) {
-      fs5.writeFileSync(storyFilePath, enriched);
-      console.log(`[AutoStories] Enriched ${path.basename(storyFilePath)} with argTypes`);
+  } catch {
+  }
+  const stories = [];
+  try {
+    const response = await fetch("./index.json");
+    if (response?.ok) {
+      const index = await response.json();
+      for (const entry of Object.values(index.entries ?? {})) {
+        if (!entry || entry.type !== "story") continue;
+        if (entry.importPath !== importPath) continue;
+        if (typeof entry.id !== "string") continue;
+        stories.push({
+          id: entry.id,
+          name: typeof entry.name === "string" ? entry.name : entry.id
+        });
+      }
     }
-  } catch (err) {
-    console.error(`[AutoStories] Failed to enrich story: ${storyFilePath}`, err);
+  } catch {
+  }
+  if (stories.length === 0) {
+    try {
+      const search = typeof window !== "undefined" && window.location ? window.location.search : "";
+      const urlId = new URLSearchParams(search).get("id");
+      if (urlId) stories.push({ id: urlId, name: "Needs setup" });
+    } catch {
+    }
+  }
+  const moduleExports = { default: {} };
+  const render = () => {
+    throw synthetic;
+  };
+  if (stories.length === 0) {
+    moduleExports.OnlookContained = { name: "Needs setup", render };
+    return moduleExports;
   }
+  let i = 0;
+  for (const story of stories) {
+    moduleExports[`OnlookContained${i}`] = {
+      name: story.name,
+      // Forces the exact index story id — export names can't be recovered
+      // from a module that never evaluated.
+      parameters: { __id: story.id },
+      render
+    };
+    i += 1;
+  }
+  return moduleExports;
+}
+function wrapImportFn(code) {
+  if (code.includes(INJECTED_BINDING)) return null;
+  if (!code.includes(IMPORT_FN_CALL)) return null;
+  const wrappedCall = [
+    "try {",
+    "    return await importers[path]();",
+    "  } catch (__onlookLoadError) {",
+    `    return await ${INJECTED_BINDING}(path, __onlookLoadError, ${JSON.stringify(ONLOOK_CONTAINED_PROP)});`,
+    "  }"
+  ].join("\n");
+  const body = code.replace(IMPORT_FN_CALL, wrappedCall);
+  return [
+    body,
+    "",
+    "// Injected by @onlook/storybook-plugin (module-load catch-all, U7).",
+    `const ${INJECTED_BINDING} = ${onlookSyntheticCsfModule.toString()};`,
+    ""
+  ].join("\n");
+}
+function moduleLoadCatchAllPlugin() {
+  let warnedDrift = false;
+  return {
+    name: MODULE_LOAD_CATCH_ALL_PLUGIN_NAME,
+    // 'pre' so the wrap sees builder-vite's raw codegen (served from its
+    // `load` hook) before normal-phase transforms (e.g. plugin-react, whose
+    // default filter matches the virtual id's `.js` suffix) reshape it.
+    enforce: "pre",
+    transform(code, id) {
+      if (id !== RESOLVED_STORYBOOK_VIRTUAL_STORIES_ID && id !== STORYBOOK_VIRTUAL_STORIES_ID) {
+        return null;
+      }
+      const wrapped = wrapImportFn(code);
+      if (wrapped === null) {
+        if (!warnedDrift && !code.includes(INJECTED_BINDING)) {
+          warnedDrift = true;
+          console.warn(
+            "[STORYBOOK_PLUGIN] module-load-catch-all: unrecognized importFn codegen \u2014 passing through (module-load failures will surface as raw Storybook overlays)."
+          );
+        }
+        return null;
+      }
+      return { code: wrapped, map: null };
+    }
+  };
 }
 function componentLocPlugin(options = {}) {
   const include = options.include ?? /\.(jsx|tsx)$/;
@@ -109,13 +321,14 @@ function componentLocPlugin(options = {}) {
       const filepath = id.split("?", 1)[0];
       if (!filepath || filepath.includes("node_modules")) return null;
       if (!include.test(filepath)) return null;
+      if (/\.stories\.(jsx?|tsx?)$/.test(filepath)) return null;
       const ast = parse(code, {
         sourceType: "module",
         plugins: ["jsx", "typescript"],
         sourceFilename: filepath
       });
       let mutated = false;
-      const relativePath = path.relative(root, filepath);
+      const relativePath = path7.relative(root, filepath);
       traverse(ast, {
         JSXElement(nodePath) {
           const opening = nodePath.node.openingElement;
@@ -152,9 +365,31 @@ function componentLocPlugin(options = {}) {
     }
   };
 }
-var CACHE_DIR = path.join(process.cwd(), ".storybook-cache");
-var SCREENSHOTS_DIR = path.join(CACHE_DIR, "screenshots");
-var MANIFEST_PATH = path.join(CACHE_DIR, "manifest.json");
+
+// src/fast-refresh-tolerant-exports/fast-refresh-tolerant-exports.ts
+function fastRefreshTolerantExportsPlugin() {
+  const REGISTER_CALL_RE = /(\w+)\.registerExportsForReactRefresh\((["'])([^"'\n]+)\2,\s*([A-Za-z_$][\w$]*)\)/;
+  return {
+    name: "onbook-fast-refresh-tolerant-exports",
+    enforce: "post",
+    apply: "serve",
+    transform(code, id) {
+      if (!/\.(tsx|jsx)$/.test(id)) return null;
+      if (id.includes("node_modules")) return null;
+      const m = code.match(REGISTER_CALL_RE);
+      if (!m) return null;
+      const [fullMatch, , , idValue, exportsVar] = m;
+      if (!idValue || !exportsVar) return null;
+      const idLiteral = JSON.stringify(idValue);
+      const postRegister = `;(()=>{if(typeof window==='undefined')return;const M=(window.__onl1176_nonComponentExports||=Object.create(null));const isLikelyComponentType=(t)=>{switch(typeof t){case 'function':{if(t.prototype!=null){if(t.prototype.isReactComponent)return true;const o=Object.getOwnPropertyNames(t.prototype);if(o.length>1||o[0]!=='constructor')return false;if(Object.getPrototypeOf(t.prototype)!==Object.prototype)return false;}const n=t.name||t.displayName;return typeof n==='string'&&/^[A-Z]/.test(n);}case 'object':{if(t==null)return false;const s=t.$$typeof;return s===Symbol.for('react.forward_ref')||s===Symbol.for('react.memo');}default:return false;}};const isPlainObject=(o)=>Object.prototype.toString.call(o)==='[object Object]'&&(o.constructor===Object||o.constructor===undefined);const isCompoundComponent=(t)=>{if(!isPlainObject(t))return false;for(const k in t)if(!isLikelyComponentType(t[k]))return false;return true;};const isComp=(v)=>isLikelyComponentType(v)||isCompoundComponent(v);const ig=[];for(const k in ${exportsVar}){if(k==='__esModule')continue;if(!isComp(${exportsVar}[k]))ig.push(k);}M[` + idLiteral + "]=ig;if(!window.__getReactRefreshIgnoredExports){window.__getReactRefreshIgnoredExports=({id})=>window.__onl1176_nonComponentExports?.[id]||[];}})();";
+      const out = code.replace(fullMatch, fullMatch + postRegister);
+      return out === code ? null : { code: out, map: null };
+    }
+  };
+}
+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 VIEWPORT_WIDTH = 1920;
 var VIEWPORT_HEIGHT = 1080;
 var MIN_COMPONENT_WIDTH = 420;
@@ -201,22 +436,86 @@ function updateManifest(storyId, sourcePath, fileHash, boundingBox) {
   };
   saveManifest(manifest);
 }
-var browser = null;
+var execFileAsync = promisify(execFile);
+var require2 = createRequire$1(import.meta.url);
+var browserPromise = null;
+var installPromise = null;
+var isMissingExecutableError = (err) => {
+  const msg = err instanceof Error ? err.message : String(err);
+  return msg.includes("Executable doesn't exist") || msg.includes("Please run the following command to download new browsers") || // Older playwright revisions phrase the version-mismatch case differently.
+  /chromium-\d+\/chrome-linux\/chrome/i.test(msg);
+};
+function resolvePlaywrightCli() {
+  const pkgJson = require2.resolve("playwright-core/package.json");
+  return join(dirname(pkgJson), "cli.js");
+}
+async function installChromium() {
+  if (!installPromise) {
+    installPromise = (async () => {
+      const cliPath = resolvePlaywrightCli();
+      console.log(
+        `[STORYBOOK_PLUGIN] chromium binary missing \u2014 installing via ${cliPath}`
+      );
+      try {
+        const { stdout, stderr } = await execFileAsync(
+          process.execPath,
+          [cliPath, "install", "--force", "chromium"],
+          { timeout: 5 * 60 * 1e3, maxBuffer: 32 * 1024 * 1024 }
+        );
+        if (stdout)
+          console.log(`[STORYBOOK_PLUGIN] playwright install: ${stdout.slice(-1e3)}`);
+        if (stderr)
+          console.log(
+            `[STORYBOOK_PLUGIN] playwright install stderr: ${stderr.slice(-1e3)}`
+          );
+        console.log("[STORYBOOK_PLUGIN] chromium installed");
+      } catch (err) {
+        const detail = err instanceof Error ? err.message : String(err);
+        console.error(`[STORYBOOK_PLUGIN] chromium install FAILED: ${detail}`);
+        throw new Error(`Playwright chromium install failed: ${detail}`);
+      } finally {
+        installPromise = null;
+      }
+    })();
+  }
+  return installPromise;
+}
+async function launchWithSelfHeal() {
+  try {
+    return await chromium.launch({ headless: true });
+  } catch (err) {
+    if (!isMissingExecutableError(err)) throw err;
+    console.log("[STORYBOOK_PLUGIN] launch failed, attempting self-heal install");
+    await installChromium();
+    try {
+      return await chromium.launch({ headless: true });
+    } catch (postInstallErr) {
+      const detail = postInstallErr instanceof Error ? postInstallErr.message : String(postInstallErr);
+      console.error(
+        `[STORYBOOK_PLUGIN] launch still failing after install \u2014 likely path or libs issue: ${detail}`
+      );
+      throw new Error(
+        `Playwright chromium is unavailable in this sandbox (install ran but launch still failed): ${detail}`
+      );
+    }
+  }
+}
 async function getBrowser() {
-  if (!browser) {
-    browser = await chromium.launch({
-      headless: true
+  if (!browserPromise) {
+    browserPromise = launchWithSelfHeal().catch((err) => {
+      browserPromise = null;
+      throw err;
     });
   }
-  return browser;
+  return browserPromise;
 }
 function getScreenshotPath(storyId, theme) {
-  const storyDir = path.join(SCREENSHOTS_DIR, storyId);
-  return path.join(storyDir, `${theme}.png`);
+  const storyDir = path7.join(SCREENSHOTS_DIR, storyId);
+  return path7.join(storyDir, `${theme}.png`);
 }
 async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, height = VIEWPORT_HEIGHT, storybookUrl = "http://localhost:6006", timeoutMs = 3e4) {
-  const browser2 = await getBrowser();
-  const context = await browser2.newContext({
+  const browser = await getBrowser();
+  const context = await browser.newContext({
     viewport: { width, height },
     deviceScaleFactor: 2
   });
@@ -299,7 +598,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 = path.join(SCREENSHOTS_DIR, storyId);
+    const storyDir = path7.join(SCREENSHOTS_DIR, storyId);
     if (!fs5.existsSync(storyDir)) {
       fs5.mkdirSync(storyDir, { recursive: true });
     }
@@ -320,12 +619,93 @@ async function generateScreenshot(storyId, theme, storybookUrl = "http://localho
   }
 }
 
+// src/screenshot-service/screenshot-service.ts
+process.env.ONBOOK_PROXY_TOKEN ?? null;
+process.env.ONBOOK_BROADCAST_URL ?? null;
+
+// src/utils/notifyOnbookIndexChanged/notifyOnbookIndexChanged.ts
+var DEBOUNCE_MS = 300;
+var REQUEST_TIMEOUT_MS = 5e3;
+var pending = null;
+var inFlight = false;
+var pendingTrailingCall = false;
+function notifyOnbookIndexChanged() {
+  const proxyToken = process.env.ONBOOK_PROXY_TOKEN;
+  const broadcastUrl = process.env.ONBOOK_BROADCAST_URL;
+  if (!proxyToken || !broadcastUrl) return;
+  if (pending) clearTimeout(pending);
+  pending = setTimeout(() => {
+    pending = null;
+    if (inFlight) {
+      pendingTrailingCall = true;
+      return;
+    }
+    void fire(proxyToken, broadcastUrl);
+  }, DEBOUNCE_MS);
+}
+async function fire(proxyToken, broadcastUrl) {
+  inFlight = true;
+  try {
+    const res = await fetch(broadcastUrl, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${proxyToken}`,
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({ event: { type: "STORYBOOK_INDEX_CHANGED" } }),
+      signal: AbortSignal.timeout(REQUEST_TIMEOUT_MS)
+    });
+    if (!res.ok) {
+      console.warn("[STORYBOOK_PLUGIN] broadcast non-2xx", {
+        status: res.status,
+        statusText: res.statusText
+      });
+    }
+  } catch (err) {
+    console.warn(
+      "[STORYBOOK_PLUGIN] index-changed broadcast failed",
+      err instanceof Error ? err.message : String(err)
+    );
+  } finally {
+    inFlight = false;
+    if (pendingTrailingCall) {
+      pendingTrailingCall = false;
+      notifyOnbookIndexChanged();
+    }
+  }
+}
+
+// src/utils/notifyOnbookIndexChanged/waitForIndexAndBroadcast.ts
+var PROBE_INTERVAL_MS = 500;
+var PROBE_CEILING_MS = 5 * 60 * 1e3;
+async function waitForIndexAndBroadcast(port = 6006) {
+  const url = `http://localhost:${port}/onbook-index.json`;
+  const deadline = Date.now() + PROBE_CEILING_MS;
+  while (Date.now() < deadline) {
+    try {
+      const res = await fetch(url, {
+        signal: AbortSignal.timeout(2e3)
+      });
+      if (res.ok) {
+        notifyOnbookIndexChanged();
+        return;
+      }
+    } catch {
+    }
+    await new Promise((r) => setTimeout(r, PROBE_INTERVAL_MS));
+  }
+  console.warn("[STORYBOOK_PLUGIN] waitForIndexAndBroadcast hit ceiling without a 2xx", {
+    url,
+    ceilingMs: PROBE_CEILING_MS
+  });
+}
+
 // src/handlers/handleStoryFileChange/handleStoryFileChange.ts
 var cachedIndex = null;
 var indexFetchPromise = null;
 var pendingFiles = /* @__PURE__ */ new Set();
 var debounceTimer = null;
-var DEBOUNCE_MS = 500;
+var DEBOUNCE_MS2 = 500;
 async function fetchStorybookIndex() {
   try {
     const response = await fetch("http://localhost:6006/index.json");
@@ -339,7 +719,7 @@ async function fetchStorybookIndex() {
 }
 function getStoriesForFile(filePath) {
   if (!cachedIndex) return [];
-  const fileName = path.basename(filePath);
+  const fileName = path7.basename(filePath);
   return Object.values(cachedIndex.entries).filter((entry) => entry.type === "story" && entry.importPath.endsWith(fileName)).map((entry) => entry.id);
 }
 async function regenerateScreenshotsForFiles(files) {
@@ -384,6 +764,7 @@ async function regenerateScreenshotsForFiles(files) {
 function handleStoryFileChange({ file, modules }) {
   if (file.endsWith(".stories.tsx") || file.endsWith(".stories.ts")) {
     console.log(`[Screenshots] Story file changed: ${file}`);
+    notifyOnbookIndexChanged();
     if (!cachedIndex && !indexFetchPromise) {
       indexFetchPromise = fetchStorybookIndex();
     }
@@ -400,10 +781,225 @@ function handleStoryFileChange({ file, modules }) {
       } catch (error) {
         console.error("[Screenshots] Error regenerating screenshots:", error);
       }
-    }, DEBOUNCE_MS);
+    }, DEBOUNCE_MS2);
     return modules;
   }
 }
+
+// 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 = [];
+  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);
+  });
+  const url = `${storybookUrl}/iframe.html?id=${storyId}&viewMode=story&globals=theme:${theme}`;
+  try {
+    await page.goto(url, { timeout: timeoutMs });
+    await page.waitForLoadState("domcontentloaded", { timeout: timeoutMs });
+    await page.waitForLoadState("load", { timeout: timeoutMs });
+    try {
+      await page.waitForLoadState("networkidle", { timeout: 5e3 });
+    } catch {
+    }
+    await new Promise((r) => setTimeout(r, 1e3));
+    return { logs, pageErrors, url };
+  } finally {
+    await context.close();
+  }
+}
+
+// src/soft-story-rerender/soft-story-rerender.ts
+function softStoryRerenderPlugin() {
+  let warnedOnce = false;
+  return {
+    name: "onbook-soft-story-rerender",
+    enforce: "post",
+    apply: "serve",
+    transform(code, _id) {
+      if (!code.includes("__STORYBOOK_PREVIEW__.onStoriesChanged")) return null;
+      const pattern = /import\.meta\.hot\.accept\((['"`])([^'"`\n]+)\1,\s*(?:async\s+)?\(?\s*newModule\s*\)?\s*=>\s*\{[\s\S]*?window\.__STORYBOOK_PREVIEW__\.onStoriesChanged\(\{\s*importFn:\s*newModule\.importFn\s*\}\);?\s*\}\);/;
+      if (!pattern.test(code)) {
+        if (!warnedOnce) {
+          warnedOnce = true;
+          console.warn(
+            "[onbook soft-story-rerender] preview bootstrap matched the file but the stories-accept-handler pattern did not \u2014 soft rerender disabled for this build of @storybook/builder-vite. Story edits will still work, just with the default Storybook flash."
+          );
+        }
+        return null;
+      }
+      const replacement = `import.meta.hot.accept($QUOTE$$PATH$$QUOTE$, async (newModule) => {
+  // ONL-1176 soft rerender \u2014 call rerender() on each active StoryRender
+  // instead of preview.onStoriesChanged() (which tears down + remounts).
+  // This accept handler fires in EVERY canvas iframe whenever ANY story
+  // file changes (every iframe's preview bundle imports the same virtual
+  // stories index). We identity-check each render's unboundStoryFn so
+  // iframes whose underlying story file didn't change stay perfectly
+  // still \u2014 no 1-frame no-op tick.
+  const preview = window.__STORYBOOK_PREVIEW__;
+  if (!preview || !preview.storyStoreValue) {
+    window.__STORYBOOK_PREVIEW__?.onStoriesChanged({ importFn: newModule.importFn });
+    return;
+  }
+  try {
+    await preview.storyStoreValue.onStoriesChanged({ importFn: newModule.importFn });
+    const renders = preview.storyRenders || [];
+    if (renders.length === 0) {
+      preview.onStoriesChanged({ importFn: newModule.importFn });
+      return;
+    }
+    await Promise.all(
+      renders.map(async (r) => {
+        try {
+          const nextStory = await preview.storyStoreValue.loadStory({ storyId: r.id });
+          if (!nextStory) return;
+          const prev = r.story;
+          const unchanged =
+            prev &&
+            prev.unboundStoryFn === nextStory.unboundStoryFn &&
+            prev.storyFn === nextStory.storyFn &&
+            prev.moduleExport === nextStory.moduleExport &&
+            prev.playFunction === nextStory.playFunction;
+          if (unchanged) return;
+          r.story = nextStory;
+          // Stories using the \`mount\` API can't be rerendered in place
+          // (their play function owns mounting), so fall back to remount.
+          if (nextStory.usesMount && r.remount) {
+            return r.remount();
+          }
+          return r.rerender();
+        } catch (innerErr) {
+          console.warn('[onbook] rerender failed for story', r.id, innerErr);
+        }
+      }),
+    );
+  } catch (err) {
+    console.warn('[onbook] soft rerender failed, falling back', err);
+    preview.onStoriesChanged({ importFn: newModule.importFn });
+  }
+});`;
+      const out = code.replace(pattern, (_match, quote, path8) => {
+        return replacement.replace("$QUOTE$$PATH$$QUOTE$", `${quote}${path8}${quote}`);
+      });
+      return out === code ? null : { code: out, map: null };
+    }
+  };
+}
+var TSCONFIG_CANDIDATES = ["tsconfig.json", "tsconfig.app.json", "tsconfig.base.json"];
+function resolveTsconfigAliases(root) {
+  try {
+    const config = readTsconfigAliasConfig(root);
+    if (!config) return [];
+    const base = path7.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));
+        aliases.push({
+          find: new RegExp(`^${escapeRegExp(findPrefix)}`),
+          replacement: `${targetDir}/`
+        });
+      } else if (!key.includes("*") && !target.includes("*")) {
+        aliases.push({
+          find: new RegExp(`^${escapeRegExp(key)}$`),
+          replacement: path7.resolve(base, target)
+        });
+      }
+    }
+    return aliases.sort((a, b) => b.find.source.length - a.find.source.length);
+  } catch {
+    return [];
+  }
+}
+function readTsconfigAliasConfig(root) {
+  for (const candidate of TSCONFIG_CANDIDATES) {
+    const abs = path7.join(root, candidate);
+    let text;
+    try {
+      text = fs5.readFileSync(abs, "utf-8");
+    } catch {
+      continue;
+    }
+    let parsed;
+    try {
+      parsed = JSON.parse(stripJsonComments(text));
+    } catch {
+      continue;
+    }
+    const paths = parsed.compilerOptions?.paths;
+    if (paths && typeof paths === "object" && Object.keys(paths).length > 0) {
+      const baseUrl = parsed.compilerOptions?.baseUrl;
+      return typeof baseUrl === "string" ? { baseUrl, paths } : { paths };
+    }
+  }
+  return null;
+}
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function stripJsonComments(text) {
+  let out = "";
+  let inString = false;
+  let inLine = false;
+  let inBlock = false;
+  for (let i = 0; i < text.length; i++) {
+    const c = text.charAt(i);
+    const next = text.charAt(i + 1);
+    if (inLine) {
+      if (c === "\n") {
+        inLine = false;
+        out += c;
+      }
+      continue;
+    }
+    if (inBlock) {
+      if (c === "*" && next === "/") {
+        inBlock = false;
+        i++;
+      }
+      continue;
+    }
+    if (inString) {
+      out += c;
+      if (c === "\\") {
+        out += next;
+        i++;
+      } else if (c === '"') {
+        inString = false;
+      }
+      continue;
+    }
+    if (c === '"') {
+      inString = true;
+      out += c;
+    } else if (c === "/" && next === "/") {
+      inLine = true;
+      i++;
+    } else if (c === "/" && next === "*") {
+      inBlock = true;
+      i++;
+    } else {
+      out += c;
+    }
+  }
+  return out;
+}
 function findGitRoot(startPath) {
   let currentPath = startPath;
   while (currentPath !== dirname(currentPath)) {
@@ -422,86 +1018,71 @@ var gitRoot = findGitRoot(storybookDir);
 var storybookLocation = gitRoot ? relative(gitRoot, storybookDir) : "";
 var repoRoot = gitRoot || process.cwd();
 var DEFAULT_ALLOWED_ORIGINS = [
-  "https://app.onlook.ai",
+  "https://app.onlook.com",
   "http://localhost:3000",
   "http://localhost:6006"
 ];
-var AUTO_STORIES_FOLDER = ".onlook-stories";
-var storyRuntimeErrors = /* @__PURE__ */ new Map();
-var serveMetadataAndScreenshots = (req, res, next) => {
-  if (req.url === "/onbook-health.json") {
-    const cacheBuster = Date.now();
-    fetch(`http://localhost:6006/index.json?_t=${cacheBuster}`, {
-      cache: "no-store"
-    }).then((response) => response.json()).then((indexData) => {
-      const entries = indexData.entries || {};
-      const autoStories = [];
-      const userStories = [];
-      for (const [storyId, entry] of Object.entries(entries)) {
-        const importPath = entry.importPath || "";
-        if (importPath.includes(AUTO_STORIES_FOLDER)) {
-          autoStories.push(storyId);
-        } else {
-          userStories.push(storyId);
-        }
-      }
-      const healthy = autoStories.filter((id) => !storyRuntimeErrors.has(id));
-      const broken = autoStories.filter((id) => storyRuntimeErrors.has(id)).map((id) => ({
-        storyId: id,
-        // biome-ignore lint/style/noNonNullAssertion: filtered above
-        error: storyRuntimeErrors.get(id)
-      }));
-      res.setHeader("Content-Type", "application/json");
-      res.setHeader("Access-Control-Allow-Origin", "*");
-      res.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
-      res.end(
-        JSON.stringify({
-          autoStoryCount: autoStories.length,
-          userStoryCount: userStories.length,
-          healthy,
-          broken
-        })
-      );
-    }).catch((error) => {
-      res.statusCode = 500;
-      res.setHeader("Content-Type", "application/json");
-      res.end(
-        JSON.stringify({
-          error: "Failed to fetch story index",
-          details: String(error)
-        })
-      );
+var manifestCache = null;
+var manifestHash = null;
+function readManifestFromDisk(filePath) {
+  try {
+    if (!fs5.existsSync(filePath)) return null;
+    const raw = fs5.readFileSync(filePath, "utf-8");
+    const hash = createHash("sha1").update(raw).digest("hex");
+    const manifest = JSON.parse(raw);
+    return { manifest, hash };
+  } catch (err) {
+    console.warn("[STORYBOOK_PLUGIN] Failed to read manifest", {
+      filePath,
+      error: err instanceof Error ? err.message : String(err)
     });
-    return;
+    return null;
   }
-  if (req.url === "/onbook-report-error" && req.method === "POST") {
-    let body = "";
-    req.on("data", (chunk) => {
-      body += chunk.toString();
-    });
-    req.on("end", () => {
-      try {
-        const { storyId, error } = JSON.parse(body);
-        if (storyId && error) {
-          storyRuntimeErrors.set(storyId, error);
-          console.log(
-            `[STORYBOOK_PLUGIN] Story runtime error reported: ${storyId}`,
-            error
-          );
-        }
-        res.setHeader("Access-Control-Allow-Origin", "*");
-        res.statusCode = 200;
-        res.end("ok");
-      } catch {
-        res.statusCode = 400;
-        res.end("Invalid JSON");
-      }
-    });
-    return;
+}
+function refreshManifest(filePath) {
+  const result = readManifestFromDisk(filePath);
+  if (!result) {
+    return false;
+  }
+  if (result.hash === manifestHash) return false;
+  manifestCache = result.manifest;
+  manifestHash = result.hash;
+  console.log("[STORYBOOK_PLUGIN] Manifest cache refreshed", {
+    filePath,
+    hash: result.hash.slice(0, 8),
+    storyCount: Object.keys(result.manifest.stories ?? {}).length
+  });
+  return true;
+}
+var TAILWIND_ENTRY_CANDIDATES = [
+  "src/app/globals.css",
+  "app/globals.css",
+  "src/index.css",
+  "src/main.css",
+  "src/styles.css",
+  "src/styles/globals.css",
+  "src/styles/index.css",
+  "styles/globals.css",
+  "styles/index.css",
+  "app.css",
+  "index.css"
+];
+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);
+    try {
+      if (!fs5.existsSync(abs)) continue;
+      const head = fs5.readFileSync(abs, "utf-8").slice(0, 2048);
+      if (TAILWIND_DIRECTIVE_PATTERN.test(head)) return abs;
+    } catch {
+    }
   }
+  return null;
+}
+var serveMetadataAndScreenshots = (req, res, next) => {
   if (req.url === "/onbook-index.json") {
     console.log("[STORYBOOK_PLUGIN] Serving /onbook-index.json endpoint");
-    const manifestPath = path.join(process.cwd(), ".storybook-cache", "manifest.json");
     const cacheBuster = Date.now();
     console.log("[STORYBOOK_PLUGIN] Fetching http://localhost:6006/index.json");
     fetch(`http://localhost:6006/index.json?_t=${cacheBuster}`, {
@@ -518,7 +1099,7 @@ var serveMetadataAndScreenshots = (req, res, next) => {
       });
       return response.json();
     }).then((indexData) => {
-      const manifest = fs5.existsSync(manifestPath) ? JSON.parse(fs5.readFileSync(manifestPath, "utf-8")) : { stories: {} };
+      const manifest = manifestCache ?? { stories: {} };
       const defaultBoundingBox = { width: 1920, height: 1080 };
       for (const [storyId, entry] of Object.entries(indexData.entries || {})) {
         const manifestEntry = manifest.stories?.[storyId];
@@ -585,8 +1166,42 @@ var serveMetadataAndScreenshots = (req, res, next) => {
     });
     return;
   }
+  if (req.url?.startsWith("/api/console-logs")) {
+    const url = new URL(req.url, "http://localhost");
+    const storyId = url.searchParams.get("storyId");
+    const theme = url.searchParams.get("theme") || "light";
+    if (!storyId) {
+      res.statusCode = 400;
+      res.setHeader("Content-Type", "application/json");
+      res.end(JSON.stringify({ error: "storyId is required" }));
+      return;
+    }
+    if (theme !== "light" && theme !== "dark") {
+      res.statusCode = 400;
+      res.setHeader("Content-Type", "application/json");
+      res.end(JSON.stringify({ error: 'theme must be "light" or "dark"' }));
+      return;
+    }
+    captureConsoleLogs(storyId, theme).then((result) => {
+      res.setHeader("Content-Type", "application/json");
+      res.setHeader("Access-Control-Allow-Origin", "*");
+      res.setHeader("Cache-Control", "no-cache");
+      res.end(JSON.stringify(result));
+    }).catch((error) => {
+      console.error("Console log capture error:", error);
+      res.statusCode = 500;
+      res.setHeader("Content-Type", "application/json");
+      res.end(
+        JSON.stringify({
+          error: "Failed to capture console logs",
+          details: String(error)
+        })
+      );
+    });
+    return;
+  }
   if (req.url?.startsWith("/screenshots/")) {
-    const screenshotPath = path.join(
+    const screenshotPath = path7.join(
       process.cwd(),
       ".storybook-cache",
       req.url.replace("/screenshots/", "screenshots/")
@@ -607,7 +1222,7 @@ var serveMetadataAndScreenshots = (req, res, next) => {
         `[STORYBOOK_PLUGIN] Generating screenshot on-demand: ${storyId}/${theme}`
       );
       captureScreenshotBuffer(storyId, theme).then(({ buffer }) => {
-        const storyDir = path.join(
+        const storyDir = path7.join(
           process.cwd(),
           ".storybook-cache",
           "screenshots",
@@ -628,6 +1243,8 @@ var serveMetadataAndScreenshots = (req, res, next) => {
         );
         res.statusCode = 500;
         res.setHeader("Content-Type", "application/json");
+        res.setHeader("Access-Control-Allow-Origin", "*");
+        res.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
         res.end(
           JSON.stringify({
             error: "Failed to generate screenshot",
@@ -638,11 +1255,41 @@ var serveMetadataAndScreenshots = (req, res, next) => {
       return;
     }
     res.statusCode = 404;
+    res.setHeader("Access-Control-Allow-Origin", "*");
+    res.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
     res.end("Screenshot not found");
     return;
   }
   next();
 };
+var ONLOOK_PLUGIN_CLAIMS_GLOBAL = "__ONLOOK_STORYBOOK_PLUGIN_CLAIMS__";
+function claimRegistry() {
+  const g = globalThis;
+  let registry = g[ONLOOK_PLUGIN_CLAIMS_GLOBAL];
+  if (!registry) {
+    registry = /* @__PURE__ */ new WeakMap();
+    g[ONLOOK_PLUGIN_CLAIMS_GLOBAL] = registry;
+  }
+  return registry;
+}
+function withDedupeApply(plugins, instanceId) {
+  for (const plugin of plugins) {
+    const prior = plugin.apply;
+    plugin.apply = (config, env) => {
+      const priorOk = prior === void 0 ? true : typeof prior === "string" ? env.command === prior : prior(config, env);
+      if (!priorOk) return false;
+      if (env === null || typeof env !== "object") return true;
+      const registry = claimRegistry();
+      const claimed = registry.get(env);
+      if (claimed === void 0) {
+        registry.set(env, instanceId);
+        return true;
+      }
+      return claimed === instanceId;
+    };
+  }
+  return plugins;
+}
 function storybookOnlookPlugin(options = {}) {
   if (process.env.CHROMATIC || process.env.CI) {
     console.log("[STORYBOOK_PLUGIN] Disabled in CI/Chromatic environment");
@@ -650,25 +1297,38 @@ function storybookOnlookPlugin(options = {}) {
   }
   const port = options.port ?? 6006;
   const allowedOrigins = [...DEFAULT_ALLOWED_ORIGINS, ...options.allowedOrigins ?? []];
+  const hmrOverride = options.hmr;
   console.log("[STORYBOOK_PLUGIN] Plugin initialized", {
     port,
     allowedOrigins,
     storybookLocation,
-    repoRoot
+    repoRoot,
+    hmr: hmrOverride ?? null
   });
+  const aliasEntries = options.resolveAliases === false ? [] : resolveTsconfigAliases(process.cwd());
+  if (aliasEntries.length > 0) {
+    console.log("[STORYBOOK_PLUGIN] Resolved tsconfig path aliases", {
+      count: aliasEntries.length,
+      aliases: aliasEntries.map((a) => a.find.source)
+    });
+  }
   const mainPlugin = {
     name: "storybook-onlook-plugin",
     config() {
       return {
+        ...aliasEntries.length > 0 && {
+          resolve: { alias: aliasEntries }
+        },
         server: {
-          // E2B sandbox HMR configuration
-          hmr: {
-            // E2B sandboxes use HTTPS, so we need secure WebSocket
-            protocol: "wss",
-            // E2B routes through standard HTTPS port 443
-            clientPort: 443,
-            // The actual Storybook server port inside the sandbox
-            port
+          // HMR override applies only when the caller explicitly opts in
+          // (typically: Storybook fronted over HTTPS by a reverse proxy).
+          // Locally, omitting this lets Vite use defaults
+          // (ws://localhost:<port>) and HMR works as expected.
+          ...hmrOverride && {
+            hmr: {
+              ...hmrOverride,
+              port
+            }
           },
           cors: {
             origin: allowedOrigins
@@ -679,60 +1339,112 @@ function storybookOnlookPlugin(options = {}) {
     configureServer(server) {
       console.log("[STORYBOOK_PLUGIN] Configuring server middleware");
       server.middlewares.use(serveMetadataAndScreenshots);
+      const cachedManifestPath = path7.join(
+        process.cwd(),
+        ".storybook-cache",
+        "manifest.json"
+      );
+      refreshManifest(cachedManifestPath);
+      let pending2;
+      const scheduleRefresh = (file) => {
+        if (file !== cachedManifestPath) return;
+        if (pending2) clearTimeout(pending2);
+        pending2 = setTimeout(() => {
+          pending2 = void 0;
+          refreshManifest(cachedManifestPath);
+        }, 100);
+      };
+      server.watcher.on("add", scheduleRefresh);
+      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)
+      );
+      if (resolvedStoryGlobs.length > 0) {
+        server.watcher.add(resolvedStoryGlobs);
+        console.log("[STORYBOOK_PLUGIN] Extended watcher coverage", {
+          storyGlobs: resolvedStoryGlobs
+        });
+      }
+      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 detectTailwindEntryCss(process.cwd());
+      })();
+      if (tailwindEntryPath) {
+        console.log("[STORYBOOK_PLUGIN] Tailwind rescan watcher enabled", {
+          entry: tailwindEntryPath,
+          autoDetected: options.tailwindEntryCss === void 0
+        });
+        const seenDirs = /* @__PURE__ */ new Set();
+        let watcherReady = false;
+        server.watcher.once("ready", () => {
+          watcherReady = true;
+        });
+        server.watcher.on("add", (file) => {
+          if (!/\.tsx?$/.test(file)) return;
+          const dir = path7.dirname(file);
+          const isNewDir = !seenDirs.has(dir);
+          seenDirs.add(dir);
+          if (!watcherReady || !isNewDir) return;
+          try {
+            const now = /* @__PURE__ */ new Date();
+            fs5.utimesSync(tailwindEntryPath, now, now);
+            console.log("[STORYBOOK_PLUGIN] Tailwind rescan for new dir", {
+              dir,
+              entry: tailwindEntryPath
+            });
+          } catch (err) {
+            console.warn("[STORYBOOK_PLUGIN] Tailwind rescan: utimes failed", {
+              entry: tailwindEntryPath,
+              error: err instanceof Error ? err.message : String(err)
+            });
+          }
+        });
+      }
       server.httpServer?.once("listening", () => {
+        const probePort = server.config.server.port ?? port;
         console.log("[STORYBOOK_PLUGIN] Server is listening", {
-          port: server.config.server.port,
+          port: probePort,
           host: server.config.server.host
         });
+        void waitForIndexAndBroadcast(probePort);
       });
     },
     configurePreviewServer(server) {
       console.log("[STORYBOOK_PLUGIN] Configuring preview server middleware");
       server.middlewares.use(serveMetadataAndScreenshots);
+      refreshManifest(path7.join(process.cwd(), ".storybook-cache", "manifest.json"));
     },
-    handleHotUpdate(ctx) {
-      if (ctx.file.includes(AUTO_STORIES_FOLDER) && ctx.file.endsWith(".stories.tsx")) {
-        enrichStoryFile(ctx.file);
-      }
-      return handleStoryFileChange(ctx);
-    }
+    handleHotUpdate: handleStoryFileChange
   };
-  const plugins = [componentLocPlugin(), mainPlugin];
-  if (options.autoStories !== false) {
-    const imports = options.autoStories ?? ["src/**/*.tsx"];
-    const ignores = options.autoStoriesIgnore ?? [
-      "src/**/*.stories.tsx",
-      "src/**/*.stories.ts",
-      "src/**/*.test.tsx",
-      "src/**/*.test.ts",
-      "src/**/*.spec.tsx",
-      "src/**/*.spec.ts",
-      "node_modules/**",
-      "**/.onlook-stories/**"
-    ];
-    console.log("[STORYBOOK_PLUGIN] Auto-story generation enabled", {
-      imports,
-      ignores,
-      storiesFolder: AUTO_STORIES_FOLDER
-    });
+  const envContainment = envContainmentPlugin(options.envContainment);
+  const moduleLoadCatchAll = options.moduleLoadCatchAll === false ? null : moduleLoadCatchAllPlugin();
+  return withDedupeApply(
+    [
+      ...envContainment ? [envContainment] : [],
+      ...moduleLoadCatchAll ? [moduleLoadCatchAll] : [],
+      componentLocPlugin(),
+      mainPlugin,
+      fastRefreshTolerantExportsPlugin(),
+      softStoryRerenderPlugin()
+    ],
+    /* @__PURE__ */ Symbol("onlook-storybook-plugin-instance")
+  );
+}
+var tolerantCsfIndexer = {
+  test: /(stories|story)\.(m?js|ts)x?$/,
+  createIndex: async (fileName, options) => {
     try {
-      plugins.push(
-        autoStoryGenerator.vite({
-          preset: "react",
-          imports,
-          ignores,
-          storiesFolder: AUTO_STORIES_FOLDER,
-          isGenerateStoriesFileAtBuild: true
-        })
-      );
+      return (await readCsf(fileName, options)).parse().indexInputs;
     } catch (err) {
-      console.error(
-        "[STORYBOOK_PLUGIN] ASG plugin failed to initialize, continuing without auto-stories",
-        err
-      );
+      const msg = err instanceof Error ? err.message : String(err);
+      console.warn("[onbook] Skipping broken story file:", fileName, msg);
+      return [];
     }
   }
-  return plugins;
-}
+};
 
-export { AUTO_STORIES_FOLDER, storybookOnlookPlugin };
+export { MODULE_LOAD_CATCH_ALL_PLUGIN_NAME, ONLOOK_CONTAINED_CARD_ATTR, ONLOOK_CONTAINED_EVENT, ONLOOK_CONTAINED_MODULES_GLOBAL, ONLOOK_CONTAINED_PROP, ONLOOK_CONTAINMENT_CONTRACT_GLOBAL, ONLOOK_CONTAINMENT_CONTRACT_VERSION, ONLOOK_RENDERED_EVENT, ONLOOK_RENDER_STATE_ATTR, ONLOOK_RENDER_STORY_ATTR, ONLOOK_UNCONTAINED_ERROR_EVENT, RESOLVED_STORYBOOK_VIRTUAL_STORIES_ID, STORYBOOK_VIRTUAL_STORIES_ID, envContainmentPlugin, moduleLoadCatchAllPlugin, storybookOnlookPlugin, tolerantCsfIndexer };