@onlook/storybook-plugin 0.4.0-beta.6 → 0.4.0-beta.9

package/dist/index.js

@@ -1,671 +1,310 @@
-import fs2, { existsSync } from 'fs';
-import path4, { dirname, join, relative } from 'path';
+import { createRequire } from 'node:module';
+import path6, { dirname, join, relative } from 'path';
+import crypto, { createHash } from 'crypto';
+import fs4, { existsSync } from 'fs';
 import { fileURLToPath } from 'url';
-import { minimatch } from 'minimatch';
-import { Project, ts, TypeFlags } from 'ts-morph';
-import { glob } from 'glob';
-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
-function getComponentInfo(componentDir, projectRootDir) {
-  const fileParseInfo = path4.parse(componentDir);
-  const prefixExtRegex = new RegExp(`(\\.\\w+)+(?=\\${fileParseInfo.ext}$)`);
-  const prefixExtRegexMatch = fileParseInfo.base.match(prefixExtRegex);
-  const prefixExt = prefixExtRegexMatch ? prefixExtRegexMatch[0] : void 0;
-  const fileName = fileParseInfo.name.replace(prefixExt || "", "");
-  const componentName = fileName === "index" ? fileParseInfo.dir.split("/").pop() : fileName;
-  let relativeSourceFilePath = componentDir.replace(projectRootDir, "");
-  if (relativeSourceFilePath.startsWith("/") || relativeSourceFilePath.startsWith("\\")) {
-    relativeSourceFilePath = componentDir.replace(projectRootDir, "").slice(1);
-  }
-  return {
-    fileBase: fileParseInfo.base,
-    fileExt: fileParseInfo.ext,
-    fileName,
-    filePrefixExt: prefixExt,
-    componentName,
-    relativeSourceFilePath
-  };
-}
-function pascalCase(str) {
-  return str.replace(/[_\-.\s]+(.)?/g, (_, c) => c ? c.toUpperCase() : "").replace(/^(.)/, (_, c) => c.toUpperCase());
-}
-function removeQuotesAndWrapWithDoubleQuotes(str) {
-  const quoteRemovedStr = str.replace(/"/g, "").replace(/'/g, "");
-  return quoteRemovedStr;
+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 getTypeFlagsName(flags) {
-  const keys = Object.keys(TypeFlags);
-  const setFlags = keys.find((key) => flags === TypeFlags[key]);
-  return setFlags || "err";
+function stripQuery(id) {
+  const q = id.indexOf("?");
+  return q === -1 ? id : id.slice(0, q);
 }
-function getReactPropTypes({
-  sourceFile,
-  componentName
-}) {
-  if (!componentName) {
-    return {
-      propTypes: void 0
-    };
-  }
-  let propsPattern = "component-props";
-  const pascalComponentName = pascalCase(componentName);
-  const propsType = sourceFile.getTypeAlias(`${pascalComponentName}Props`);
-  const propsInterface = sourceFile.getInterface(`${pascalComponentName}Props`);
-  const propsOnlyType = sourceFile.getTypeAlias("Props");
-  const propsOnlyInterface = sourceFile.getInterface("Props");
-  const propsInline = sourceFile.getVariableDeclaration(pascalComponentName)?.getInitializerIfKindOrThrow(ts.SyntaxKind.ArrowFunction);
-  const props = propsType?.getType() || propsInterface?.getType() || propsOnlyType?.getType() || propsOnlyInterface?.getType() || propsInline?.getParameters()[0]?.getType();
-  if (!props) {
-    return {
-      propTypes: []
-    };
-  }
-  let propsProperties = [];
-  const isPropsIntersection = props.isIntersection();
-  if (isPropsIntersection) {
-    propsProperties = [];
-    const intersectionTypes = props.getIntersectionTypes();
-    intersectionTypes.forEach((intersectionType) => {
-      const intersectionTypeText = intersectionType.getText();
-      if (intersectionTypeText.includes("HTMLAttributes")) return;
-      return propsProperties.push(...intersectionType.getProperties());
-    });
-  } else {
-    propsProperties = props.getProperties();
-  }
-  if (propsOnlyType || propsOnlyInterface) propsPattern = "props";
-  if (propsInline) propsPattern = "inline";
-  const propTypes = propsProperties.map((prop) => {
-    const propName = prop.getName();
-    const propType = prop.getValueDeclaration()?.getType();
-    if (!propType) {
-      return {
-        name: propName,
-        type: ["err"],
-        isOptional: prop.isOptional(),
-        value: []
-      };
-    }
-    if (propType.isUnion() && !propType.isBoolean()) {
-      const unionTypes = propType.getUnionTypes();
-      const type = Array.from(
-        new Set(unionTypes.map((union) => getTypeFlagsName(union.getFlags().valueOf())))
-      );
-      return {
-        name: propName,
-        type,
-        isOptional: prop.isOptional(),
-        value: unionTypes.map(
-          (union) => removeQuotesAndWrapWithDoubleQuotes(union.getText())
-        )
-      };
-    }
-    return {
-      name: propName,
-      type: [prop.getValueDeclaration().getType().getText()],
-      isOptional: prop.isOptional(),
-      value: []
-    };
-  });
-  return {
-    propsPattern,
-    propTypes
-  };
-}
-var errorDefinition = {
-  // Common
-  EC00: {
-    title: "Unknown error",
-    isCustomDetail: true
-  },
-  EC01: {
-    title: "Not yet supported",
-    detail: "This preset name is included in the preset bust not yet supported. Please wait for support.",
-    isCustomDetail: false
-  },
-  EC02: {
-    title: "Preset is not supported",
-    isCustomDetail: true
-  },
-  EC03: {
-    title: "Unable to get component name or file path correctly.",
-    detail: "Please check the file path and try again.",
-    isCustomDetail: false
-  },
-  EC04: {
-    title: "Could not find argTypes",
-    detail: "Error in genReactStoryFile.",
-    isCustomDetail: false
-  },
-  EC05: {
-    title: "Could not find meta",
-    isCustomDetail: true
-  },
-  EC06: {
-    title: "Could not find initializer",
-    detail: "Could not get initializer of ObjectLiteralExpression.",
-    isCustomDetail: false
-  },
-  EC07: {
-    title: "Could not find component",
-    isCustomDetail: true
-  },
-  EC08: {
-    title: "Could not scan directory",
-    isCustomDetail: true
-  },
-  EC09: {
-    title: "Reading directory failed",
-    isCustomDetail: true
-  },
-  EC10: {
-    title: "Could not get property from stories",
-    isCustomDetail: true
-  },
-  EC11: {
-    title: "File is defective.",
-    detail: "An error occurred during abstract syntax tree parsing.\nPlease check your file for problems.",
-    isCustomDetail: false
-  },
-  // Lit
-  EL01: {
-    title: "Failed to save file",
-    isCustomDetail: true
-  }
-};
-var throwErr = (params) => {
-  const { errorCode, detail } = params;
-  const detailText = errorDefinition[errorCode].isCustomDetail ? detail : errorDefinition[errorCode].detail;
-  console.error(`[ASG:${errorCode}] ${errorDefinition[errorCode].title}
-${detailText}`);
-};
-function genReactStoryFile(input) {
-  const {
-    componentName,
-    fileBase,
-    fileName,
-    filePrefixExt,
-    relativeSourceFilePath,
-    sourceFile,
-    storiesFolder
-  } = input;
-  if (!componentName || !fileBase) {
-    throwErr({ errorCode: "EC03" });
+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 { propTypes } = getReactPropTypes({ sourceFile, componentName });
-  const pascalComponentName = pascalCase(componentName);
-  if (!propTypes) {
-    throwErr({ errorCode: "EC04" });
-    return null;
+  const byModule = /* @__PURE__ */ new Map();
+  for (const sub of substitutions) {
+    byModule.set(normalizeSlashes(sub.module).replace(/^\.\//, ""), sub);
   }
-  const exportedDeclarations = sourceFile.getExportedDeclarations();
-  let isDefaultExportComponent = false;
-  exportedDeclarations.forEach((declaration, exportName) => {
-    if (exportName === "default") {
-      const defaultExportName = declaration[0]?.getSymbol()?.getName();
-      isDefaultExportComponent = defaultExportName === pascalComponentName;
-    }
-  });
-  const pathToComponent = storiesFolder ? "../" : "./";
-  const importSuffix = filePrefixExt || "";
-  const importStatement = isDefaultExportComponent ? `import ${pascalComponentName} from "${pathToComponent}${fileName}${importSuffix}";` : `import { ${pascalComponentName} } from "${pathToComponent}${fileName}${importSuffix}";`;
-  const args = {};
-  for (const prop of propTypes) {
-    if (prop.isOptional) {
-      args[prop.name] = "undefined";
-      continue;
-    }
-    if (prop.type.includes("boolean")) {
-      args[prop.name] = "false";
-    } else if (prop.value.length > 0) {
-      args[prop.name] = `"${prop.value[0]}"`;
-    } else if (prop.type.includes("string") || prop.type.includes("String")) {
-      args[prop.name] = `"${prop.name}"`;
-    } else if (prop.type.includes("number") || prop.type.includes("Number")) {
-      args[prop.name] = "0";
-    } else {
-      args[prop.name] = "undefined";
-    }
+  const targetBasenames = /* @__PURE__ */ new Set();
+  for (const rel of byModule.keys()) {
+    const base = rel.slice(rel.lastIndexOf("/") + 1);
+    targetBasenames.add(base.replace(/\.[^.]+$/, ""));
   }
-  const argTypes = {};
-  for (const prop of propTypes) {
-    if (prop.type[0] === "boolean") {
-      argTypes[prop.name] = '{ control: "boolean" }';
-    } else if (prop.type[0] === "object") {
-      argTypes[prop.name] = '{ control: "object" }';
-    } else if (prop.value.length > 1) {
-      const options = prop.value.map((v) => `"${v}"`).join(", ");
-      argTypes[prop.name] = `{ control: "select", options: [${options}] }`;
-    } else if (prop.type[0] === "string") {
-      argTypes[prop.name] = '{ control: "text" }';
-    } else if (prop.type[0] === "number") {
-      argTypes[prop.name] = '{ control: "number" }';
+  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(path6.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;
+        }
+      }
     }
-  }
-  const argsStr = formatObjectEntries(args, "  ");
-  const argTypesStr = formatObjectEntries(argTypes, "  ");
-  const storyTitle = buildStoryTitle(relativeSourceFilePath, pascalComponentName);
-  return `import * as _React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-${importStatement}
-
-// Inline error boundary \u2014 catches render crashes from missing providers/context
-class _StoryErrorBoundary extends _React.Component<
-  { children: _React.ReactNode },
-  { error: Error | null }
-> {
-  state: { error: Error | null } = { error: null };
-  static getDerivedStateFromError(error: Error) { return { error }; }
-  render() {
-    if (this.state.error) {
-      return (
-        <div style={{ padding: 24, fontFamily: "system-ui", color: "#888", fontSize: 13 }}>
-          <div style={{ fontWeight: 600, marginBottom: 8, color: "#c44" }}>
-            Cannot render in isolation
-          </div>
-          <div style={{ fontSize: 12, opacity: 0.7 }}>
-            {this.state.error.message}
-          </div>
-        </div>
-      );
+    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;
+      }
+      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 (path6.isAbsolute(cleaned)) {
+        direct = cleaned;
+      } else if (importer && (cleaned.startsWith("./") || cleaned.startsWith("../"))) {
+        direct = path6.resolve(path6.dirname(stripQuery(importer)), cleaned);
+      }
+      if (direct) {
+        const rel = matchTarget(direct);
+        if (rel) return ENV_CONTAINMENT_VIRTUAL_PREFIX + rel;
+        return null;
+      }
+      if (!specifierMightMatch(cleaned)) return null;
+      if (typeof this.resolve !== "function") return null;
+      const importerDir = importer ? path6.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 this.props.children;
-  }
+  };
 }
-
-const meta: Meta<typeof ${pascalComponentName}> = {
-  title: "${storyTitle}",
-  component: ${pascalComponentName},
-  tags: ["autodocs"],
-  args: {${argsStr}},
-  argTypes: {${argTypesStr}},
-  decorators: [
-    (Story) => (
-      <_StoryErrorBoundary>
-        <_React.Suspense fallback={<div style={{ padding: 24, color: "#888" }}>Loading...</div>}>
-          <Story />
-        </_React.Suspense>
-      </_StoryErrorBoundary>
+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)});`
     ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {};
-`;
+    ""
+  ].join("\n");
 }
-function buildStoryTitle(relPath, componentName) {
-  let p = relPath.replace(/^src\//, "");
-  const lastSlash = p.lastIndexOf("/");
-  if (lastSlash !== -1) {
-    p = p.substring(0, lastSlash);
-  } else {
-    p = "";
+
+// 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;
   }
-  p = p.replace(/\(([^)]+)\)/g, "$1");
-  p = p.replace(/\/+/g, "/").replace(/^\/|\/$/g, "");
-  return p ? `${p}/${componentName}` : componentName;
-}
-function formatObjectEntries(obj, indent) {
-  const entries = Object.entries(obj);
-  if (entries.length === 0) return "";
-  const lines = entries.map(([key, value]) => `${indent}${key}: ${value},`);
-  return `
-${lines.join("\n")}
-`;
-}
-function createLightProject() {
-  return new Project({
-    compilerOptions: { allowJs: true },
-    useInMemoryFileSystem: true
-  });
-}
-async function genStoryFile({
-  options,
-  id,
-  projectRootDir
-}) {
-  if (id.includes(".stories")) return null;
-  const {
-    fileBase,
-    fileName,
-    fileExt,
-    filePrefixExt,
-    componentName,
-    relativeSourceFilePath
-  } = getComponentInfo(id, projectRootDir);
+  synthetic.cause = original;
   try {
-    const sourceCode = fs2.readFileSync(id, "utf-8");
-    const sourceProject = createLightProject();
-    const sourceFile = sourceProject.createSourceFile(fileBase || "temp.tsx", sourceCode);
-    if (options.preset !== "react") {
-      throwErr({
-        errorCode: "EC02",
-        detail: `Preset ${options.preset} is not supported in this fork. Only "react" is supported.`
-      });
-      return;
-    }
-    const storyCode = genReactStoryFile({
-      componentName,
-      fileBase,
-      fileName,
-      path: id,
-      fileExt,
-      filePrefixExt,
-      relativeSourceFilePath,
-      sourceFile,
-      storiesFolder: options.storiesFolder
-    });
-    if (!storyCode) return null;
-    const parsed = path4.parse(id);
-    const storyFileName = `${fileName}.stories.tsx`;
-    let storiesFilePath;
-    if (options.storiesFolder) {
-      const storiesFolderPath = path4.join(parsed.dir, options.storiesFolder);
-      fs2.mkdirSync(storiesFolderPath, { recursive: true });
-      storiesFilePath = path4.join(storiesFolderPath, storyFileName);
-    } else {
-      storiesFilePath = path4.join(parsed.dir, storyFileName);
-    }
-    if (!fs2.existsSync(storiesFilePath)) {
-      fs2.writeFileSync(storiesFilePath, storyCode);
-    }
-    return storiesFilePath;
-  } catch (err) {
-    console.warn(`[ASG] Failed to generate story for ${id}:`, err);
-    return null;
+    console.error(
+      "[ONLOOK] Story module failed to load \u2014 serving contained synthetic stories.",
+      { importPath, error: original }
+    );
+  } catch {
   }
-}
-async function getAllFilePaths({
-  patterns,
-  ignorePatterns,
-  projectRootDir
-}) {
-  const fullPatterns = patterns.map(
-    (p) => path4.join(projectRootDir, p).replace(/\\/g, "/")
-  );
-  const ignoreFullPatterns = ignorePatterns?.map(
-    (p) => path4.join(projectRootDir, p).replace(/\\/g, "/")
-  );
-  const filePaths = await glob(fullPatterns, {
-    ignore: ignoreFullPatterns,
-    nodir: true
-  });
-  return filePaths.map((p) => p.replace(/\\/g, "/"));
-}
-var PLUGIN_NAME = "auto-story-generator";
-var DEFAULT_BATCH_SIZE = 50;
-var DEFAULT_CONCURRENCY = 8;
-var CACHE_FILE_NAME = ".asg-cache.json";
-var mtimeCache = /* @__PURE__ */ new Map();
-function loadDiskCache(projectRootDir) {
+  const stories = [];
   try {
-    const cachePath = path4.join(projectRootDir, CACHE_FILE_NAME);
-    if (fs2.existsSync(cachePath)) {
-      const data = JSON.parse(fs2.readFileSync(cachePath, "utf-8"));
-      for (const [key, value] of Object.entries(data)) {
-        mtimeCache.set(key, value);
+    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
+        });
       }
-      console.log(`[ASG] Loaded ${mtimeCache.size} entries from disk cache`);
     }
   } catch {
   }
-}
-function saveDiskCache(projectRootDir) {
-  try {
-    const cachePath = path4.join(projectRootDir, CACHE_FILE_NAME);
-    const data = {};
-    for (const [key, value] of mtimeCache) {
-      data[key] = value;
+  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 {
     }
-    fs2.writeFileSync(cachePath, JSON.stringify(data));
-  } catch {
   }
-}
-function hasFileChanged(filePath) {
-  try {
-    const stat = fs2.statSync(filePath);
-    const mtime = stat.mtimeMs;
-    const cached = mtimeCache.get(filePath);
-    if (cached === mtime) return false;
-    mtimeCache.set(filePath, mtime);
-    return true;
-  } catch {
-    mtimeCache.delete(filePath);
-    return true;
+  const moduleExports = { default: {} };
+  const render = () => {
+    throw synthetic;
+  };
+  if (stories.length === 0) {
+    moduleExports.OnlookContained = { name: "Needs setup", render };
+    return moduleExports;
   }
-}
-function getStoryFilePath(filePath, storiesFolder) {
-  const parsed = path4.parse(filePath);
-  const storyName = `${parsed.name}.stories.tsx`;
-  if (storiesFolder) {
-    return path4.join(parsed.dir, storiesFolder, storyName);
+  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 path4.join(parsed.dir, storyName);
+  return moduleExports;
 }
-async function processBatch(files, options, projectRootDir, concurrency, generatedFiles) {
-  let processed = 0;
-  for (let i = 0; i < files.length; i += concurrency) {
-    const chunk = files.slice(i, i + concurrency);
-    await Promise.all(
-      chunk.map(async (filePath) => {
-        const result = await genStoryFile({
-          options,
-          id: filePath,
-          projectRootDir
-        });
-        if (result) generatedFiles.push(result);
-        processed++;
-      })
-    );
-  }
-  return processed;
+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 createAutoStoryPlugin(options) {
-  const projectRootDir = (options.projectRoot ?? process.cwd()).replace(/\\/g, "/");
-  const batchSize = options.batchSize ?? DEFAULT_BATCH_SIZE;
-  const concurrency = options.concurrency ?? DEFAULT_CONCURRENCY;
-  let hasRun = false;
-  const allGeneratedFiles = [];
-  console.log("[ASG] Plugin created", {
-    preset: options.preset,
-    imports: options.imports,
-    isGenerateStoriesFileAtBuild: options.isGenerateStoriesFileAtBuild,
-    storiesFolder: options.storiesFolder,
-    projectRoot: projectRootDir,
-    cwd: process.cwd()
-  });
-  async function generateAllStories() {
-    if (hasRun) return;
-    hasRun = true;
-    if (!options.isGenerateStoriesFileAtBuild) {
-      console.log("[ASG] Skipping \u2014 isGenerateStoriesFileAtBuild is false");
-      return;
-    }
-    loadDiskCache(projectRootDir);
-    const patterns = options.imports ?? ["src/**/*.tsx"];
-    const ignorePatterns = options.ignores ?? [];
-    console.log(`[ASG] Scanning for components: ${patterns.join(", ")}`);
-    const allFiles = await getAllFilePaths({
-      patterns,
-      ignorePatterns,
-      projectRootDir
-    });
-    const filesToProcess = allFiles.filter((filePath) => {
-      if (filePath.includes(".stories")) return false;
-      if (options.cacheEnabled !== false) {
-        const storyPath = getStoryFilePath(filePath, options.storiesFolder);
-        const storyExists = fs2.existsSync(storyPath);
-        if (!hasFileChanged(filePath) && storyExists) return false;
-      }
-      return true;
-    });
-    console.log(
-      `[ASG] Found ${allFiles.length} files, ${filesToProcess.length} need processing`
-    );
-    let totalProcessed = 0;
-    for (let i = 0; i < filesToProcess.length; i += batchSize) {
-      const batch = filesToProcess.slice(i, i + batchSize);
-      const count = await processBatch(
-        batch,
-        options,
-        projectRootDir,
-        concurrency,
-        allGeneratedFiles
-      );
-      totalProcessed += count;
-      if (options.onProgress) {
-        options.onProgress(totalProcessed, filesToProcess.length);
-      }
-      if (i + batchSize < filesToProcess.length) {
-        await new Promise((r) => setTimeout(r, 0));
-      }
-    }
-    saveDiskCache(projectRootDir);
-    console.log(`[ASG] Generated stories for ${totalProcessed} components`);
-  }
+function moduleLoadCatchAllPlugin() {
+  let warnedDrift = false;
   return {
-    name: PLUGIN_NAME,
-    // configureServer fires for Vite dev server (Storybook's use case)
-    // biome-ignore lint/suspicious/noExplicitAny: Vite server type varies across versions
-    async configureServer(server) {
-      console.log("[ASG] configureServer hook fired");
-      const beforeCount = allGeneratedFiles.length;
-      await generateAllStories();
-      if (allGeneratedFiles.length > beforeCount && allGeneratedFiles.length > 0) {
-        const firstFile = allGeneratedFiles[0];
-        if (firstFile && server?.watcher?.emit) {
-          console.log(
-            `[ASG] Triggering Storybook rescan (${allGeneratedFiles.length} stories)`
+    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)."
           );
-          server.watcher.emit("change", firstFile);
         }
+        return null;
       }
-    },
-    // buildStart fires for builds (fallback)
-    async buildStart() {
-      console.log("[ASG] buildStart hook fired");
-      await generateAllStories();
-    },
-    async watchChange(id, change) {
-      if (change.event === "delete") return;
-      const normalizedId = id.replace(/\\/g, "/");
-      if (options.imports) {
-        const relativePath = normalizedId.replace(projectRootDir, "").replace(/^\//, "");
-        const matches = options.imports.some(
-          (pattern) => minimatch(relativePath, pattern)
-        );
-        if (!matches) return;
-      }
-      if (options.ignores) {
-        const relativePath = normalizedId.replace(projectRootDir, "").replace(/^\//, "");
-        const ignored = options.ignores.some(
-          (pattern) => minimatch(relativePath, pattern)
-        );
-        if (ignored) return;
-      }
-      mtimeCache.delete(normalizedId);
-      await genStoryFile({
-        options,
-        id: normalizedId,
-        projectRootDir
-      });
+      return { code: wrapped, map: null };
     }
   };
 }
-var index_default = { vite: createAutoStoryPlugin };
-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 = path4.dirname(storyFilePath);
-  const parentDir = path4.dirname(dir);
-  const storyName = path4.basename(storyFilePath);
-  const componentName = storyName.replace(".stories.tsx", ".tsx");
-  const componentPath = path4.join(parentDir, componentName);
-  return fs2.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;
-      }
-      if (prop.type.name === "enum" && prop.type.value) {
-        argType.control = { type: "select" };
-        argType.options = prop.type.value.map(
-          (v) => v.value
-        );
-      }
-      if (prop.type.name === "boolean") {
-        argType.control = { type: "boolean" };
-      }
-      if (prop.type.name === "number") {
-        argType.control = { type: "number" };
-      }
-      if (Object.keys(argType).length > 0) {
-        argTypes[name] = argType;
-      }
-    }
-    return Object.keys(argTypes).length > 0 ? argTypes : null;
-  } catch (err) {
-    console.error(`[AutoStories] Failed to parse component: ${componentPath}`, err);
-    return null;
-  }
-}
-function enrichStoryFile(storyFilePath) {
-  try {
-    const content = fs2.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;`
-    );
-    if (enriched !== content) {
-      fs2.writeFileSync(storyFilePath, enriched);
-      console.log(`[AutoStories] Enriched ${path4.basename(storyFilePath)} with argTypes`);
-    }
-  } catch (err) {
-    console.error(`[AutoStories] Failed to enrich story: ${storyFilePath}`, err);
-  }
-}
 function componentLocPlugin(options = {}) {
   const include = options.include ?? /\.(jsx|tsx)$/;
   const traverse = traverseModule.default ?? traverseModule;
@@ -682,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 = path4.relative(root, filepath);
+      const relativePath = path6.relative(root, filepath);
       traverse(ast, {
         JSXElement(nodePath) {
           const opening = nodePath.node.openingElement;
@@ -725,9 +365,31 @@ function componentLocPlugin(options = {}) {
     }
   };
 }
-var CACHE_DIR = path4.join(process.cwd(), ".storybook-cache");
-var SCREENSHOTS_DIR = path4.join(CACHE_DIR, "screenshots");
-var MANIFEST_PATH = path4.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 = path6.join(process.cwd(), ".storybook-cache");
+var SCREENSHOTS_DIR = path6.join(CACHE_DIR, "screenshots");
+var MANIFEST_PATH = path6.join(CACHE_DIR, "manifest.json");
 var VIEWPORT_WIDTH = 1920;
 var VIEWPORT_HEIGHT = 1080;
 var MIN_COMPONENT_WIDTH = 420;
@@ -735,30 +397,30 @@ var MIN_COMPONENT_HEIGHT = 280;
 
 // src/utils/fileSystem/fileSystem.ts
 function ensureCacheDirectories() {
-  if (!fs2.existsSync(CACHE_DIR)) {
-    fs2.mkdirSync(CACHE_DIR, { recursive: true });
+  if (!fs4.existsSync(CACHE_DIR)) {
+    fs4.mkdirSync(CACHE_DIR, { recursive: true });
   }
-  if (!fs2.existsSync(SCREENSHOTS_DIR)) {
-    fs2.mkdirSync(SCREENSHOTS_DIR, { recursive: true });
+  if (!fs4.existsSync(SCREENSHOTS_DIR)) {
+    fs4.mkdirSync(SCREENSHOTS_DIR, { recursive: true });
   }
 }
 function computeFileHash(filePath) {
-  if (!fs2.existsSync(filePath)) {
+  if (!fs4.existsSync(filePath)) {
     return "";
   }
-  const content = fs2.readFileSync(filePath, "utf-8");
+  const content = fs4.readFileSync(filePath, "utf-8");
   return crypto.createHash("sha256").update(content).digest("hex");
 }
 function loadManifest() {
-  if (fs2.existsSync(MANIFEST_PATH)) {
-    const content = fs2.readFileSync(MANIFEST_PATH, "utf-8");
+  if (fs4.existsSync(MANIFEST_PATH)) {
+    const content = fs4.readFileSync(MANIFEST_PATH, "utf-8");
     return JSON.parse(content);
   }
   return { stories: {} };
 }
 function saveManifest(manifest) {
   ensureCacheDirectories();
-  fs2.writeFileSync(MANIFEST_PATH, JSON.stringify(manifest, null, 2));
+  fs4.writeFileSync(MANIFEST_PATH, JSON.stringify(manifest, null, 2));
 }
 function updateManifest(storyId, sourcePath, fileHash, boundingBox) {
   const manifest = loadManifest();
@@ -774,22 +436,82 @@ 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);
+};
+async function installChromium() {
+  if (!installPromise) {
+    installPromise = (async () => {
+      const cliPath = require2.resolve("playwright-core/cli.js");
+      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 = path4.join(SCREENSHOTS_DIR, storyId);
-  return path4.join(storyDir, `${theme}.png`);
+  const storyDir = path6.join(SCREENSHOTS_DIR, storyId);
+  return path6.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
   });
@@ -872,9 +594,9 @@ async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, h
 async function generateScreenshot(storyId, theme, storybookUrl = "http://localhost:6006", timeoutMs = 3e4) {
   try {
     ensureCacheDirectories();
-    const storyDir = path4.join(SCREENSHOTS_DIR, storyId);
-    if (!fs2.existsSync(storyDir)) {
-      fs2.mkdirSync(storyDir, { recursive: true });
+    const storyDir = path6.join(SCREENSHOTS_DIR, storyId);
+    if (!fs4.existsSync(storyDir)) {
+      fs4.mkdirSync(storyDir, { recursive: true });
     }
     const screenshotPath = getScreenshotPath(storyId, theme);
     const { buffer, boundingBox } = await captureScreenshotBuffer(
@@ -885,7 +607,7 @@ async function generateScreenshot(storyId, theme, storybookUrl = "http://localho
       storybookUrl,
       timeoutMs
     );
-    fs2.writeFileSync(screenshotPath, buffer);
+    fs4.writeFileSync(screenshotPath, buffer);
     return { path: screenshotPath, boundingBox };
   } catch (error) {
     console.error(`Error generating screenshot for ${storyId} (${theme}):`, error);
@@ -893,12 +615,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");
@@ -912,7 +715,7 @@ async function fetchStorybookIndex() {
 }
 function getStoriesForFile(filePath) {
   if (!cachedIndex) return [];
-  const fileName = path4.basename(filePath);
+  const fileName = path6.basename(filePath);
   return Object.values(cachedIndex.entries).filter((entry) => entry.type === "story" && entry.importPath.endsWith(fileName)).map((entry) => entry.id);
 }
 async function regenerateScreenshotsForFiles(files) {
@@ -957,6 +760,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();
     }
@@ -973,10 +777,123 @@ 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, path7) => {
+        return replacement.replace("$QUOTE$$PATH$$QUOTE$", `${quote}${path7}${quote}`);
+      });
+      return out === code ? null : { code: out, map: null };
+    }
+  };
+}
 function findGitRoot(startPath) {
   let currentPath = startPath;
   while (currentPath !== dirname(currentPath)) {
@@ -995,86 +912,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 (!fs4.existsSync(filePath)) return null;
+    const raw = fs4.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 = path6.join(cwd, rel);
+    try {
+      if (!fs4.existsSync(abs)) continue;
+      const head = fs4.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 = path4.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}`, {
@@ -1089,20 +991,9 @@ var serveMetadataAndScreenshots = (req, res, next) => {
         ok: response.ok,
         statusText: response.statusText
       });
-      if (!response.ok) {
-        console.log("[STORYBOOK_PLUGIN] Index not ready yet", {
-          status: response.status
-        });
-        res.statusCode = 503;
-        res.setHeader("Content-Type", "application/json");
-        res.setHeader("Retry-After", "10");
-        res.end(JSON.stringify({ code: "INDEX_NOT_READY" }));
-        return null;
-      }
       return response.json();
     }).then((indexData) => {
-      if (!indexData) return;
-      const manifest = fs2.existsSync(manifestPath) ? JSON.parse(fs2.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];
@@ -1120,17 +1011,15 @@ var serveMetadataAndScreenshots = (req, res, next) => {
       res.setHeader("Expires", "0");
       res.end(JSON.stringify(indexData));
     }).catch((error) => {
-      console.log("[STORYBOOK_PLUGIN] Index not available", {
-        error: error instanceof Error ? error.message : String(error)
+      console.error("[STORYBOOK_PLUGIN] Failed to fetch/extend index.json", {
+        error: error instanceof Error ? error.message : String(error),
+        errorType: error instanceof Error ? error.constructor.name : typeof error,
+        stack: error instanceof Error ? error.stack : void 0
       });
-      res.statusCode = 503;
+      res.statusCode = 500;
       res.setHeader("Content-Type", "application/json");
-      res.setHeader("Retry-After", "10");
       res.end(
-        JSON.stringify({
-          code: "INDEX_NOT_READY",
-          details: String(error)
-        })
+        JSON.stringify({ error: "Failed to fetch index", details: String(error) })
       );
     });
     return;
@@ -1171,8 +1060,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 = path4.join(
+    const screenshotPath = path6.join(
       process.cwd(),
       ".storybook-cache",
       req.url.replace("/screenshots/", "screenshots/")
@@ -1181,11 +1104,11 @@ var serveMetadataAndScreenshots = (req, res, next) => {
     const storyId = urlParts[0];
     const themeFile = urlParts[1];
     const theme = themeFile?.replace(".png", "");
-    if (fs2.existsSync(screenshotPath)) {
+    if (fs4.existsSync(screenshotPath)) {
       res.setHeader("Content-Type", "image/png");
       res.setHeader("Access-Control-Allow-Origin", "*");
       res.setHeader("Cache-Control", "public, max-age=3600");
-      fs2.createReadStream(screenshotPath).pipe(res);
+      fs4.createReadStream(screenshotPath).pipe(res);
       return;
     }
     if (storyId && theme && (theme === "light" || theme === "dark")) {
@@ -1193,16 +1116,16 @@ var serveMetadataAndScreenshots = (req, res, next) => {
         `[STORYBOOK_PLUGIN] Generating screenshot on-demand: ${storyId}/${theme}`
       );
       captureScreenshotBuffer(storyId, theme).then(({ buffer }) => {
-        const storyDir = path4.join(
+        const storyDir = path6.join(
           process.cwd(),
           ".storybook-cache",
           "screenshots",
           storyId
         );
-        if (!fs2.existsSync(storyDir)) {
-          fs2.mkdirSync(storyDir, { recursive: true });
+        if (!fs4.existsSync(storyDir)) {
+          fs4.mkdirSync(storyDir, { recursive: true });
         }
-        fs2.writeFileSync(screenshotPath, buffer);
+        fs4.writeFileSync(screenshotPath, buffer);
         res.setHeader("Content-Type", "image/png");
         res.setHeader("Access-Control-Allow-Origin", "*");
         res.setHeader("Cache-Control", "public, max-age=3600");
@@ -1214,6 +1137,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",
@@ -1224,11 +1149,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");
@@ -1236,25 +1191,28 @@ 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 mainPlugin = {
     name: "storybook-onlook-plugin",
     config() {
       return {
         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
@@ -1265,67 +1223,112 @@ function storybookOnlookPlugin(options = {}) {
     configureServer(server) {
       console.log("[STORYBOOK_PLUGIN] Configuring server middleware");
       server.middlewares.use(serveMetadataAndScreenshots);
+      const cachedManifestPath = path6.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) => path6.isAbsolute(glob) ? glob : path6.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 path6.isAbsolute(options.tailwindEntryCss) ? options.tailwindEntryCss : path6.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 = path6.dirname(file);
+          const isNewDir = !seenDirs.has(dir);
+          seenDirs.add(dir);
+          if (!watcherReady || !isNewDir) return;
+          try {
+            const now = /* @__PURE__ */ new Date();
+            fs4.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(path6.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/**",
-      // Next.js route files (not renderable as Storybook stories)
-      "src/**/page.tsx",
-      "src/**/layout.tsx",
-      "src/**/loading.tsx",
-      "src/**/error.tsx",
-      "src/**/not-found.tsx",
-      "src/**/template.tsx"
-    ];
-    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(
-        index_default.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 };