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

package/dist/preset/index.js

@@ -0,0 +1,1458 @@
+import { createRequire } from 'node:module';
+import crypto, { createHash } from 'crypto';
+import fs5, { existsSync } from 'fs';
+import path7, { dirname, join, relative } from 'path';
+import { fileURLToPath } from 'url';
+import generateModule from '@babel/generator';
+import { parse } from '@babel/parser';
+import traverseModule from '@babel/traverse';
+import * as t from '@babel/types';
+import { execFile } from 'child_process';
+import { createRequire as createRequire$1 } from 'module';
+import { promisify } from 'util';
+import { chromium } from 'playwright';
+
+globalThis.require = createRequire(import.meta.url);
+function componentLocPlugin(options = {}) {
+  const include = options.include ?? /\.(jsx|tsx)$/;
+  const traverse = traverseModule.default ?? traverseModule;
+  const generate = generateModule.default ?? generateModule;
+  let root;
+  return {
+    name: "onbook-component-loc",
+    enforce: "pre",
+    apply: "serve",
+    configResolved(config) {
+      root = config.root;
+    },
+    transform(code, id) {
+      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 = path7.relative(root, filepath);
+      traverse(ast, {
+        JSXElement(nodePath) {
+          const opening = nodePath.node.openingElement;
+          const element = nodePath.node;
+          if (!opening.loc || !element.loc) return;
+          const alreadyTagged = opening.attributes.some(
+            (attribute) => t.isJSXAttribute(attribute) && attribute.name.name === "data-component-file"
+          );
+          if (alreadyTagged) return;
+          opening.attributes.push(
+            t.jsxAttribute(
+              t.jsxIdentifier("data-component-file"),
+              t.stringLiteral(relativePath)
+            ),
+            t.jsxAttribute(
+              t.jsxIdentifier("data-component-start"),
+              t.stringLiteral(`${element.loc.start.line}:${element.loc.start.column}`)
+            ),
+            t.jsxAttribute(
+              t.jsxIdentifier("data-component-end"),
+              t.stringLiteral(`${element.loc.end.line}:${element.loc.end.column}`)
+            )
+          );
+          mutated = true;
+        }
+      });
+      if (!mutated) return null;
+      const output = generate(
+        ast,
+        { retainLines: true, sourceMaps: true, sourceFileName: id },
+        code
+      );
+      return { code: output.code, map: output.map };
+    }
+  };
+}
+
+// src/containment-contract/containment-contract.ts
+var ONLOOK_CONTAINED_MODULES_GLOBAL = "__ONLOOK_CONTAINED_MODULES__";
+var ONLOOK_CONTAINED_PROP = "__onlookContained";
+
+// src/env-containment/env-containment.ts
+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;
+        }
+      }
+    }
+    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 (path7.isAbsolute(cleaned)) {
+        direct = cleaned;
+      } else if (importer && (cleaned.startsWith("./") || cleaned.startsWith("../"))) {
+        direct = path7.resolve(path7.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 ? 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);
+    }
+  };
+}
+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/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;
+var MIN_COMPONENT_HEIGHT = 280;
+
+// src/utils/fileSystem/fileSystem.ts
+function ensureCacheDirectories() {
+  if (!fs5.existsSync(CACHE_DIR)) {
+    fs5.mkdirSync(CACHE_DIR, { recursive: true });
+  }
+  if (!fs5.existsSync(SCREENSHOTS_DIR)) {
+    fs5.mkdirSync(SCREENSHOTS_DIR, { recursive: true });
+  }
+}
+function computeFileHash(filePath) {
+  if (!fs5.existsSync(filePath)) {
+    return "";
+  }
+  const content = fs5.readFileSync(filePath, "utf-8");
+  return crypto.createHash("sha256").update(content).digest("hex");
+}
+function loadManifest() {
+  if (fs5.existsSync(MANIFEST_PATH)) {
+    const content = fs5.readFileSync(MANIFEST_PATH, "utf-8");
+    return JSON.parse(content);
+  }
+  return { stories: {} };
+}
+function saveManifest(manifest) {
+  ensureCacheDirectories();
+  fs5.writeFileSync(MANIFEST_PATH, JSON.stringify(manifest, null, 2));
+}
+function updateManifest(storyId, sourcePath, fileHash, boundingBox) {
+  const manifest = loadManifest();
+  manifest.stories[storyId] = {
+    fileHash,
+    lastGenerated: (/* @__PURE__ */ new Date()).toISOString(),
+    sourcePath,
+    screenshots: {
+      light: `screenshots/${storyId}/light.png`,
+      dark: `screenshots/${storyId}/dark.png`
+    },
+    boundingBox: boundingBox ?? void 0
+  };
+  saveManifest(manifest);
+}
+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 (!browserPromise) {
+    browserPromise = launchWithSelfHeal().catch((err) => {
+      browserPromise = null;
+      throw err;
+    });
+  }
+  return browserPromise;
+}
+function getScreenshotPath(storyId, theme) {
+  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 browser = await getBrowser();
+  const context = await browser.newContext({
+    viewport: { width, height },
+    deviceScaleFactor: 2
+  });
+  const page = await context.newPage();
+  try {
+    const url = `${storybookUrl}/iframe.html?id=${storyId}&viewMode=story&globals=theme:${theme}`;
+    await page.goto(url, { timeout: timeoutMs });
+    await page.waitForLoadState("domcontentloaded", { timeout: timeoutMs });
+    await page.waitForLoadState("load", { timeout: timeoutMs });
+    try {
+      await page.waitForLoadState("networkidle", { timeout: 5e3 });
+    } catch {
+    }
+    await page.evaluate(() => document.fonts.ready);
+    try {
+      await page.evaluate(async () => {
+        const images = document.querySelectorAll("img");
+        await Promise.all(
+          Array.from(images).map((img) => {
+            if (img.complete) return Promise.resolve();
+            return new Promise((resolve) => {
+              img.addEventListener("load", resolve);
+              img.addEventListener("error", resolve);
+              setTimeout(resolve, 3e3);
+            });
+          })
+        );
+      });
+    } catch {
+    }
+    const contentBounds = await page.evaluate(() => {
+      const root = document.querySelector("#storybook-root");
+      if (!root) return null;
+      const children = root.querySelectorAll("*");
+      if (children.length === 0) return null;
+      let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+      children.forEach((child) => {
+        const rect = child.getBoundingClientRect();
+        if (rect.width === 0 || rect.height === 0) return;
+        minX = Math.min(minX, rect.left);
+        minY = Math.min(minY, rect.top);
+        maxX = Math.max(maxX, rect.right);
+        maxY = Math.max(maxY, rect.bottom);
+      });
+      if (minX === Infinity) return null;
+      return {
+        x: minX,
+        y: minY,
+        width: maxX - minX,
+        height: maxY - minY
+      };
+    });
+    let screenshotBuffer;
+    let resultBoundingBox = null;
+    if (contentBounds && contentBounds.width > 0 && contentBounds.height > 0) {
+      const PADDING = 20;
+      const clippedWidth = Math.min(width, contentBounds.width + PADDING);
+      const clippedHeight = Math.min(height, contentBounds.height + PADDING);
+      resultBoundingBox = {
+        width: Math.max(MIN_COMPONENT_WIDTH, Math.round(clippedWidth)),
+        height: Math.max(MIN_COMPONENT_HEIGHT, Math.round(clippedHeight))
+      };
+      screenshotBuffer = await page.screenshot({
+        type: "png",
+        clip: {
+          x: Math.max(0, contentBounds.x - 10),
+          y: Math.max(0, contentBounds.y - 10),
+          width: clippedWidth,
+          height: clippedHeight
+        }
+      });
+    } else {
+      screenshotBuffer = await page.screenshot({ type: "png" });
+    }
+    return { buffer: screenshotBuffer, boundingBox: resultBoundingBox };
+  } finally {
+    await context.close();
+  }
+}
+async function generateScreenshot(storyId, theme, storybookUrl = "http://localhost:6006", timeoutMs = 3e4) {
+  try {
+    ensureCacheDirectories();
+    const storyDir = path7.join(SCREENSHOTS_DIR, storyId);
+    if (!fs5.existsSync(storyDir)) {
+      fs5.mkdirSync(storyDir, { recursive: true });
+    }
+    const screenshotPath = getScreenshotPath(storyId, theme);
+    const { buffer, boundingBox } = await captureScreenshotBuffer(
+      storyId,
+      theme,
+      VIEWPORT_WIDTH,
+      VIEWPORT_HEIGHT,
+      storybookUrl,
+      timeoutMs
+    );
+    fs5.writeFileSync(screenshotPath, buffer);
+    return { path: screenshotPath, boundingBox };
+  } catch (error) {
+    console.error(`Error generating screenshot for ${storyId} (${theme}):`, error);
+    return null;
+  }
+}
+
+// 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_MS2 = 500;
+async function fetchStorybookIndex() {
+  try {
+    const response = await fetch("http://localhost:6006/index.json");
+    if (response.ok) {
+      cachedIndex = await response.json();
+      console.log("[Screenshots] Cached Storybook index");
+    }
+  } catch (error) {
+    console.error("[Screenshots] Failed to fetch Storybook index:", error);
+  }
+}
+function getStoriesForFile(filePath) {
+  if (!cachedIndex) return [];
+  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) {
+  await fetchStorybookIndex();
+  const allStoryIds = /* @__PURE__ */ new Set();
+  const fileToStories = /* @__PURE__ */ new Map();
+  for (const file of files) {
+    const storyIds = getStoriesForFile(file);
+    fileToStories.set(file, storyIds);
+    for (const id of storyIds) {
+      allStoryIds.add(id);
+    }
+  }
+  if (allStoryIds.size === 0) {
+    console.log("[Screenshots] No stories found for changed files");
+    return;
+  }
+  console.log(
+    `[Screenshots] Regenerating ${allStoryIds.size} stories from ${files.length} files`
+  );
+  const storybookUrl = "http://localhost:6006";
+  const storyBoundingBoxes = /* @__PURE__ */ new Map();
+  await Promise.all(
+    Array.from(allStoryIds).map(async (storyId) => {
+      const [lightResult, _darkResult] = await Promise.all([
+        generateScreenshot(storyId, "light", storybookUrl),
+        generateScreenshot(storyId, "dark", storybookUrl)
+      ]);
+      if (lightResult) {
+        storyBoundingBoxes.set(storyId, lightResult.boundingBox);
+      }
+    })
+  );
+  for (const [file, storyIds] of fileToStories) {
+    const fileHash = computeFileHash(file);
+    storyIds.forEach((storyId) => {
+      updateManifest(storyId, file, fileHash, storyBoundingBoxes.get(storyId));
+    });
+  }
+  console.log(`[Screenshots] \u2713 Regenerated ${allStoryIds.size} stories`);
+}
+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();
+    }
+    pendingFiles.add(file);
+    if (debounceTimer) {
+      clearTimeout(debounceTimer);
+    }
+    debounceTimer = setTimeout(async () => {
+      const files = Array.from(pendingFiles);
+      pendingFiles.clear();
+      debounceTimer = null;
+      try {
+        await regenerateScreenshotsForFiles(files);
+      } catch (error) {
+        console.error("[Screenshots] Error regenerating screenshots:", error);
+      }
+    }, DEBOUNCE_MS2);
+    return modules;
+  }
+}
+
+// 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 {
+    console.error(
+      "[ONLOOK] Story module failed to load \u2014 serving contained synthetic stories.",
+      { importPath, error: original }
+    );
+  } 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 {
+  }
+  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 };
+    }
+  };
+}
+
+// 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)) {
+    if (existsSync(join(currentPath, ".git"))) {
+      return currentPath;
+    }
+    currentPath = dirname(currentPath);
+  }
+  return null;
+}
+
+// src/storybook-onlook-plugin.ts
+var __dirname$1 = dirname(fileURLToPath(import.meta.url));
+var storybookDir = join(__dirname$1, "..");
+var gitRoot = findGitRoot(storybookDir);
+var storybookLocation = gitRoot ? relative(gitRoot, storybookDir) : "";
+var repoRoot = gitRoot || process.cwd();
+var DEFAULT_ALLOWED_ORIGINS = [
+  "https://app.onlook.com",
+  "http://localhost:3000",
+  "http://localhost:6006"
+];
+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 null;
+  }
+}
+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 cacheBuster = Date.now();
+    console.log("[STORYBOOK_PLUGIN] Fetching http://localhost:6006/index.json");
+    fetch(`http://localhost:6006/index.json?_t=${cacheBuster}`, {
+      cache: "no-store",
+      headers: {
+        "Cache-Control": "no-cache",
+        Pragma: "no-cache"
+      }
+    }).then((response) => {
+      console.log("[STORYBOOK_PLUGIN] Storybook index fetch response", {
+        status: response.status,
+        ok: response.ok,
+        statusText: response.statusText
+      });
+      return response.json();
+    }).then((indexData) => {
+      const manifest = manifestCache ?? { stories: {} };
+      const defaultBoundingBox = { width: 1920, height: 1080 };
+      for (const [storyId, entry] of Object.entries(indexData.entries || {})) {
+        const manifestEntry = manifest.stories?.[storyId];
+        entry.boundingBox = manifestEntry?.boundingBox || defaultBoundingBox;
+      }
+      indexData.meta = { storybookLocation, repoRoot };
+      console.log("[STORYBOOK_PLUGIN] Successfully enriched index.json", {
+        entryCount: Object.keys(indexData.entries || {}).length,
+        hasMetadata: !!indexData.meta
+      });
+      res.setHeader("Content-Type", "application/json");
+      res.setHeader("Access-Control-Allow-Origin", "*");
+      res.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
+      res.setHeader("Pragma", "no-cache");
+      res.setHeader("Expires", "0");
+      res.end(JSON.stringify(indexData));
+    }).catch((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 = 500;
+      res.setHeader("Content-Type", "application/json");
+      res.end(
+        JSON.stringify({ error: "Failed to fetch index", details: String(error) })
+      );
+    });
+    return;
+  }
+  if (req.url?.startsWith("/api/capture-screenshot")) {
+    const url = new URL(req.url, "http://localhost");
+    const storyId = url.searchParams.get("storyId");
+    const theme = url.searchParams.get("theme") || "light";
+    const width = parseInt(url.searchParams.get("width") || "800", 10);
+    const height = parseInt(url.searchParams.get("height") || "600", 10);
+    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;
+    }
+    captureScreenshotBuffer(storyId, theme, width, height).then(({ buffer }) => {
+      res.setHeader("Content-Type", "image/png");
+      res.setHeader("Access-Control-Allow-Origin", "*");
+      res.setHeader("Cache-Control", "no-cache");
+      res.end(buffer);
+    }).catch((error) => {
+      console.error("Screenshot capture error:", error);
+      res.statusCode = 500;
+      res.setHeader("Content-Type", "application/json");
+      res.end(
+        JSON.stringify({
+          error: "Failed to capture screenshot",
+          details: String(error)
+        })
+      );
+    });
+    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 = path7.join(
+      process.cwd(),
+      ".storybook-cache",
+      req.url.replace("/screenshots/", "screenshots/")
+    );
+    const urlParts = req.url.replace("/screenshots/", "").split("/");
+    const storyId = urlParts[0];
+    const themeFile = urlParts[1];
+    const theme = themeFile?.replace(".png", "");
+    if (fs5.existsSync(screenshotPath)) {
+      res.setHeader("Content-Type", "image/png");
+      res.setHeader("Access-Control-Allow-Origin", "*");
+      res.setHeader("Cache-Control", "public, max-age=3600");
+      fs5.createReadStream(screenshotPath).pipe(res);
+      return;
+    }
+    if (storyId && theme && (theme === "light" || theme === "dark")) {
+      console.log(
+        `[STORYBOOK_PLUGIN] Generating screenshot on-demand: ${storyId}/${theme}`
+      );
+      captureScreenshotBuffer(storyId, theme).then(({ buffer }) => {
+        const storyDir = path7.join(
+          process.cwd(),
+          ".storybook-cache",
+          "screenshots",
+          storyId
+        );
+        if (!fs5.existsSync(storyDir)) {
+          fs5.mkdirSync(storyDir, { recursive: true });
+        }
+        fs5.writeFileSync(screenshotPath, buffer);
+        res.setHeader("Content-Type", "image/png");
+        res.setHeader("Access-Control-Allow-Origin", "*");
+        res.setHeader("Cache-Control", "public, max-age=3600");
+        res.end(buffer);
+      }).catch((error) => {
+        console.error(
+          `[STORYBOOK_PLUGIN] Failed to generate screenshot: ${storyId}/${theme}`,
+          error
+        );
+        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",
+            details: String(error)
+          })
+        );
+      });
+      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");
+    return [];
+  }
+  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,
+    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: {
+          // 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
+          }
+        }
+      };
+    },
+    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: 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: handleStoryFileChange
+  };
+  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")
+  );
+}
+
+// src/preset/preset.ts
+var OPTION_KEY_MAP = {
+  port: true,
+  allowedOrigins: true,
+  hmr: true,
+  storyGlobs: true,
+  tailwindEntryCss: true,
+  envContainment: true,
+  moduleLoadCatchAll: true,
+  resolveAliases: true
+};
+var OPTION_KEYS = Object.keys(OPTION_KEY_MAP);
+function pluginOptionsFromPresetOptions(options) {
+  const picked = {};
+  if (options) {
+    for (const key of OPTION_KEYS) {
+      if (options[key] !== void 0) picked[key] = options[key];
+    }
+  }
+  return picked;
+}
+async function viteFinal(config, options = {}) {
+  const plugins = storybookOnlookPlugin(pluginOptionsFromPresetOptions(options));
+  if (plugins.length === 0) return config;
+  return { ...config, plugins: [...config.plugins ?? [], ...plugins] };
+}
+
+export { pluginOptionsFromPresetOptions, viteFinal };