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

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { E as EnvContainmentOptions, a as EnvContainmentSubstitution, O as OnlookPluginOptions, e as envContainmentPlugin, s as storybookOnlookPlugin } from './storybook-onlook-plugin-CigILdDb.js';
+export { E as EnvContainmentOptions, a as EnvContainmentSubstitution, O as OnlookPluginOptions, e as envContainmentPlugin, s as storybookOnlookPlugin } from './storybook-onlook-plugin-B9Eo_OIq.js';
 import { Plugin } from 'vite';
 import { Indexer } from 'storybook/internal/types';
 

package/dist/index.js

@@ -1,7 +1,7 @@
 import { createRequire } from 'node:module';
-import path6, { dirname, join, relative } from 'path';
+import path7, { dirname, join, relative } from 'path';
 import crypto, { createHash } from 'crypto';
-import fs4, { existsSync } from 'fs';
+import fs5, { existsSync } from 'fs';
 import { fileURLToPath } from 'url';
 import generateModule from '@babel/generator';
 import { parse } from '@babel/parser';
@@ -61,7 +61,7 @@ function envContainmentPlugin(options) {
   const resolveOutcomes = /* @__PURE__ */ new Map();
   const roots = /* @__PURE__ */ new Set([normalizeSlashes(process.cwd())]);
   const matchTarget = (absPath) => {
-    const norm = normalizeSlashes(path6.normalize(absPath));
+    const norm = normalizeSlashes(path7.normalize(absPath));
     for (const rel of byModule.keys()) {
       for (const root of roots) {
         const target = `${root}/${rel}`;
@@ -96,10 +96,10 @@ function envContainmentPlugin(options) {
       if (source.startsWith("\0")) return null;
       const cleaned = stripQuery(source);
       let direct = null;
-      if (path6.isAbsolute(cleaned)) {
+      if (path7.isAbsolute(cleaned)) {
         direct = cleaned;
       } else if (importer && (cleaned.startsWith("./") || cleaned.startsWith("../"))) {
-        direct = path6.resolve(path6.dirname(stripQuery(importer)), cleaned);
+        direct = path7.resolve(path7.dirname(stripQuery(importer)), cleaned);
       }
       if (direct) {
         const rel = matchTarget(direct);
@@ -108,7 +108,7 @@ function envContainmentPlugin(options) {
       }
       if (!specifierMightMatch(cleaned)) return null;
       if (typeof this.resolve !== "function") return null;
-      const importerDir = importer ? path6.dirname(stripQuery(importer)) : "";
+      const importerDir = importer ? path7.dirname(stripQuery(importer)) : "";
       const outcomeKey = `${importerDir}|${source}`;
       const memoized = resolveOutcomes.get(outcomeKey);
       if (memoized !== void 0) return memoized;
@@ -328,7 +328,7 @@ function componentLocPlugin(options = {}) {
         sourceFilename: filepath
       });
       let mutated = false;
-      const relativePath = path6.relative(root, filepath);
+      const relativePath = path7.relative(root, filepath);
       traverse(ast, {
         JSXElement(nodePath) {
           const opening = nodePath.node.openingElement;
@@ -387,9 +387,9 @@ function fastRefreshTolerantExportsPlugin() {
     }
   };
 }
-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 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;
@@ -397,30 +397,30 @@ var MIN_COMPONENT_HEIGHT = 280;
 
 // src/utils/fileSystem/fileSystem.ts
 function ensureCacheDirectories() {
-  if (!fs4.existsSync(CACHE_DIR)) {
-    fs4.mkdirSync(CACHE_DIR, { recursive: true });
+  if (!fs5.existsSync(CACHE_DIR)) {
+    fs5.mkdirSync(CACHE_DIR, { recursive: true });
   }
-  if (!fs4.existsSync(SCREENSHOTS_DIR)) {
-    fs4.mkdirSync(SCREENSHOTS_DIR, { recursive: true });
+  if (!fs5.existsSync(SCREENSHOTS_DIR)) {
+    fs5.mkdirSync(SCREENSHOTS_DIR, { recursive: true });
   }
 }
 function computeFileHash(filePath) {
-  if (!fs4.existsSync(filePath)) {
+  if (!fs5.existsSync(filePath)) {
     return "";
   }
-  const content = fs4.readFileSync(filePath, "utf-8");
+  const content = fs5.readFileSync(filePath, "utf-8");
   return crypto.createHash("sha256").update(content).digest("hex");
 }
 function loadManifest() {
-  if (fs4.existsSync(MANIFEST_PATH)) {
-    const content = fs4.readFileSync(MANIFEST_PATH, "utf-8");
+  if (fs5.existsSync(MANIFEST_PATH)) {
+    const content = fs5.readFileSync(MANIFEST_PATH, "utf-8");
     return JSON.parse(content);
   }
   return { stories: {} };
 }
 function saveManifest(manifest) {
   ensureCacheDirectories();
-  fs4.writeFileSync(MANIFEST_PATH, JSON.stringify(manifest, null, 2));
+  fs5.writeFileSync(MANIFEST_PATH, JSON.stringify(manifest, null, 2));
 }
 function updateManifest(storyId, sourcePath, fileHash, boundingBox) {
   const manifest = loadManifest();
@@ -510,8 +510,8 @@ async function getBrowser() {
   return browserPromise;
 }
 function getScreenshotPath(storyId, theme) {
-  const storyDir = path6.join(SCREENSHOTS_DIR, storyId);
-  return path6.join(storyDir, `${theme}.png`);
+  const storyDir = path7.join(SCREENSHOTS_DIR, storyId);
+  return path7.join(storyDir, `${theme}.png`);
 }
 async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, height = VIEWPORT_HEIGHT, storybookUrl = "http://localhost:6006", timeoutMs = 3e4) {
   const browser = await getBrowser();
@@ -598,9 +598,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 = path6.join(SCREENSHOTS_DIR, storyId);
-    if (!fs4.existsSync(storyDir)) {
-      fs4.mkdirSync(storyDir, { recursive: true });
+    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(
@@ -611,7 +611,7 @@ async function generateScreenshot(storyId, theme, storybookUrl = "http://localho
       storybookUrl,
       timeoutMs
     );
-    fs4.writeFileSync(screenshotPath, buffer);
+    fs5.writeFileSync(screenshotPath, buffer);
     return { path: screenshotPath, boundingBox };
   } catch (error) {
     console.error(`Error generating screenshot for ${storyId} (${theme}):`, error);
@@ -719,7 +719,7 @@ async function fetchStorybookIndex() {
 }
 function getStoriesForFile(filePath) {
   if (!cachedIndex) return [];
-  const fileName = path6.basename(filePath);
+  const fileName = path7.basename(filePath);
   return Object.values(cachedIndex.entries).filter((entry) => entry.type === "story" && entry.importPath.endsWith(fileName)).map((entry) => entry.id);
 }
 async function regenerateScreenshotsForFiles(files) {
@@ -891,13 +891,115 @@ function softStoryRerenderPlugin() {
     preview.onStoriesChanged({ importFn: newModule.importFn });
   }
 });`;
-      const out = code.replace(pattern, (_match, quote, path7) => {
-        return replacement.replace("$QUOTE$$PATH$$QUOTE$", `${quote}${path7}${quote}`);
+      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)) {
@@ -924,8 +1026,8 @@ var manifestCache = null;
 var manifestHash = null;
 function readManifestFromDisk(filePath) {
   try {
-    if (!fs4.existsSync(filePath)) return null;
-    const raw = fs4.readFileSync(filePath, "utf-8");
+    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 };
@@ -968,10 +1070,10 @@ var TAILWIND_ENTRY_CANDIDATES = [
 var TAILWIND_DIRECTIVE_PATTERN = /@import\s+['"](?:tailwindcss|tailwindcss\/.+)['"]|@tailwind\s+(?:base|components|utilities)/;
 function detectTailwindEntryCss(cwd) {
   for (const rel of TAILWIND_ENTRY_CANDIDATES) {
-    const abs = path6.join(cwd, rel);
+    const abs = path7.join(cwd, rel);
     try {
-      if (!fs4.existsSync(abs)) continue;
-      const head = fs4.readFileSync(abs, "utf-8").slice(0, 2048);
+      if (!fs5.existsSync(abs)) continue;
+      const head = fs5.readFileSync(abs, "utf-8").slice(0, 2048);
       if (TAILWIND_DIRECTIVE_PATTERN.test(head)) return abs;
     } catch {
     }
@@ -1099,7 +1201,7 @@ var serveMetadataAndScreenshots = (req, res, next) => {
     return;
   }
   if (req.url?.startsWith("/screenshots/")) {
-    const screenshotPath = path6.join(
+    const screenshotPath = path7.join(
       process.cwd(),
       ".storybook-cache",
       req.url.replace("/screenshots/", "screenshots/")
@@ -1108,11 +1210,11 @@ var serveMetadataAndScreenshots = (req, res, next) => {
     const storyId = urlParts[0];
     const themeFile = urlParts[1];
     const theme = themeFile?.replace(".png", "");
-    if (fs4.existsSync(screenshotPath)) {
+    if (fs5.existsSync(screenshotPath)) {
       res.setHeader("Content-Type", "image/png");
       res.setHeader("Access-Control-Allow-Origin", "*");
       res.setHeader("Cache-Control", "public, max-age=3600");
-      fs4.createReadStream(screenshotPath).pipe(res);
+      fs5.createReadStream(screenshotPath).pipe(res);
       return;
     }
     if (storyId && theme && (theme === "light" || theme === "dark")) {
@@ -1120,16 +1222,16 @@ var serveMetadataAndScreenshots = (req, res, next) => {
         `[STORYBOOK_PLUGIN] Generating screenshot on-demand: ${storyId}/${theme}`
       );
       captureScreenshotBuffer(storyId, theme).then(({ buffer }) => {
-        const storyDir = path6.join(
+        const storyDir = path7.join(
           process.cwd(),
           ".storybook-cache",
           "screenshots",
           storyId
         );
-        if (!fs4.existsSync(storyDir)) {
-          fs4.mkdirSync(storyDir, { recursive: true });
+        if (!fs5.existsSync(storyDir)) {
+          fs5.mkdirSync(storyDir, { recursive: true });
         }
-        fs4.writeFileSync(screenshotPath, buffer);
+        fs5.writeFileSync(screenshotPath, buffer);
         res.setHeader("Content-Type", "image/png");
         res.setHeader("Access-Control-Allow-Origin", "*");
         res.setHeader("Cache-Control", "public, max-age=3600");
@@ -1203,10 +1305,20 @@ function storybookOnlookPlugin(options = {}) {
     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).
@@ -1227,7 +1339,7 @@ function storybookOnlookPlugin(options = {}) {
     configureServer(server) {
       console.log("[STORYBOOK_PLUGIN] Configuring server middleware");
       server.middlewares.use(serveMetadataAndScreenshots);
-      const cachedManifestPath = path6.join(
+      const cachedManifestPath = path7.join(
         process.cwd(),
         ".storybook-cache",
         "manifest.json"
@@ -1246,7 +1358,7 @@ function storybookOnlookPlugin(options = {}) {
       server.watcher.on("change", scheduleRefresh);
       const storyGlobs = options.storyGlobs ?? ["**/*.stories.@(js|jsx|mjs|ts|tsx|mdx)"];
       const resolvedStoryGlobs = storyGlobs.map(
-        (glob) => path6.isAbsolute(glob) ? glob : path6.join(process.cwd(), glob)
+        (glob) => path7.isAbsolute(glob) ? glob : path7.join(process.cwd(), glob)
       );
       if (resolvedStoryGlobs.length > 0) {
         server.watcher.add(resolvedStoryGlobs);
@@ -1257,7 +1369,7 @@ function storybookOnlookPlugin(options = {}) {
       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 path7.isAbsolute(options.tailwindEntryCss) ? options.tailwindEntryCss : path7.join(process.cwd(), options.tailwindEntryCss);
         }
         return detectTailwindEntryCss(process.cwd());
       })();
@@ -1273,13 +1385,13 @@ function storybookOnlookPlugin(options = {}) {
         });
         server.watcher.on("add", (file) => {
           if (!/\.tsx?$/.test(file)) return;
-          const dir = path6.dirname(file);
+          const dir = path7.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);
+            fs5.utimesSync(tailwindEntryPath, now, now);
             console.log("[STORYBOOK_PLUGIN] Tailwind rescan for new dir", {
               dir,
               entry: tailwindEntryPath
@@ -1304,7 +1416,7 @@ function storybookOnlookPlugin(options = {}) {
     configurePreviewServer(server) {
       console.log("[STORYBOOK_PLUGIN] Configuring preview server middleware");
       server.middlewares.use(serveMetadataAndScreenshots);
-      refreshManifest(path6.join(process.cwd(), ".storybook-cache", "manifest.json"));
+      refreshManifest(path7.join(process.cwd(), ".storybook-cache", "manifest.json"));
     },
     handleHotUpdate: handleStoryFileChange
   };

package/dist/preset/index.d.ts

@@ -1,4 +1,4 @@
-import { O as OnlookPluginOptions } from '../storybook-onlook-plugin-CigILdDb.js';
+import { O as OnlookPluginOptions } from '../storybook-onlook-plugin-B9Eo_OIq.js';
 import 'vite';
 
 declare function pluginOptionsFromPresetOptions(options: Record<string, unknown> | undefined): OnlookPluginOptions;

package/dist/preset/index.js

@@ -1,7 +1,7 @@
 import { createRequire } from 'node:module';
 import crypto, { createHash } from 'crypto';
-import fs4, { existsSync } from 'fs';
-import path6, { dirname, join, relative } from 'path';
+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';
@@ -36,7 +36,7 @@ function componentLocPlugin(options = {}) {
         sourceFilename: filepath
       });
       let mutated = false;
-      const relativePath = path6.relative(root, filepath);
+      const relativePath = path7.relative(root, filepath);
       traverse(ast, {
         JSXElement(nodePath) {
           const opening = nodePath.node.openingElement;
@@ -114,7 +114,7 @@ function envContainmentPlugin(options) {
   const resolveOutcomes = /* @__PURE__ */ new Map();
   const roots = /* @__PURE__ */ new Set([normalizeSlashes(process.cwd())]);
   const matchTarget = (absPath) => {
-    const norm = normalizeSlashes(path6.normalize(absPath));
+    const norm = normalizeSlashes(path7.normalize(absPath));
     for (const rel of byModule.keys()) {
       for (const root of roots) {
         const target = `${root}/${rel}`;
@@ -149,10 +149,10 @@ function envContainmentPlugin(options) {
       if (source.startsWith("\0")) return null;
       const cleaned = stripQuery(source);
       let direct = null;
-      if (path6.isAbsolute(cleaned)) {
+      if (path7.isAbsolute(cleaned)) {
         direct = cleaned;
       } else if (importer && (cleaned.startsWith("./") || cleaned.startsWith("../"))) {
-        direct = path6.resolve(path6.dirname(stripQuery(importer)), cleaned);
+        direct = path7.resolve(path7.dirname(stripQuery(importer)), cleaned);
       }
       if (direct) {
         const rel = matchTarget(direct);
@@ -161,7 +161,7 @@ function envContainmentPlugin(options) {
       }
       if (!specifierMightMatch(cleaned)) return null;
       if (typeof this.resolve !== "function") return null;
-      const importerDir = importer ? path6.dirname(stripQuery(importer)) : "";
+      const importerDir = importer ? path7.dirname(stripQuery(importer)) : "";
       const outcomeKey = `${importerDir}|${source}`;
       const memoized = resolveOutcomes.get(outcomeKey);
       if (memoized !== void 0) return memoized;
@@ -264,9 +264,9 @@ function fastRefreshTolerantExportsPlugin() {
     }
   };
 }
-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 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;
@@ -274,30 +274,30 @@ var MIN_COMPONENT_HEIGHT = 280;
 
 // src/utils/fileSystem/fileSystem.ts
 function ensureCacheDirectories() {
-  if (!fs4.existsSync(CACHE_DIR)) {
-    fs4.mkdirSync(CACHE_DIR, { recursive: true });
+  if (!fs5.existsSync(CACHE_DIR)) {
+    fs5.mkdirSync(CACHE_DIR, { recursive: true });
   }
-  if (!fs4.existsSync(SCREENSHOTS_DIR)) {
-    fs4.mkdirSync(SCREENSHOTS_DIR, { recursive: true });
+  if (!fs5.existsSync(SCREENSHOTS_DIR)) {
+    fs5.mkdirSync(SCREENSHOTS_DIR, { recursive: true });
   }
 }
 function computeFileHash(filePath) {
-  if (!fs4.existsSync(filePath)) {
+  if (!fs5.existsSync(filePath)) {
     return "";
   }
-  const content = fs4.readFileSync(filePath, "utf-8");
+  const content = fs5.readFileSync(filePath, "utf-8");
   return crypto.createHash("sha256").update(content).digest("hex");
 }
 function loadManifest() {
-  if (fs4.existsSync(MANIFEST_PATH)) {
-    const content = fs4.readFileSync(MANIFEST_PATH, "utf-8");
+  if (fs5.existsSync(MANIFEST_PATH)) {
+    const content = fs5.readFileSync(MANIFEST_PATH, "utf-8");
     return JSON.parse(content);
   }
   return { stories: {} };
 }
 function saveManifest(manifest) {
   ensureCacheDirectories();
-  fs4.writeFileSync(MANIFEST_PATH, JSON.stringify(manifest, null, 2));
+  fs5.writeFileSync(MANIFEST_PATH, JSON.stringify(manifest, null, 2));
 }
 function updateManifest(storyId, sourcePath, fileHash, boundingBox) {
   const manifest = loadManifest();
@@ -387,8 +387,8 @@ async function getBrowser() {
   return browserPromise;
 }
 function getScreenshotPath(storyId, theme) {
-  const storyDir = path6.join(SCREENSHOTS_DIR, storyId);
-  return path6.join(storyDir, `${theme}.png`);
+  const storyDir = path7.join(SCREENSHOTS_DIR, storyId);
+  return path7.join(storyDir, `${theme}.png`);
 }
 async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, height = VIEWPORT_HEIGHT, storybookUrl = "http://localhost:6006", timeoutMs = 3e4) {
   const browser = await getBrowser();
@@ -475,9 +475,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 = path6.join(SCREENSHOTS_DIR, storyId);
-    if (!fs4.existsSync(storyDir)) {
-      fs4.mkdirSync(storyDir, { recursive: true });
+    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(
@@ -488,7 +488,7 @@ async function generateScreenshot(storyId, theme, storybookUrl = "http://localho
       storybookUrl,
       timeoutMs
     );
-    fs4.writeFileSync(screenshotPath, buffer);
+    fs5.writeFileSync(screenshotPath, buffer);
     return { path: screenshotPath, boundingBox };
   } catch (error) {
     console.error(`Error generating screenshot for ${storyId} (${theme}):`, error);
@@ -596,7 +596,7 @@ async function fetchStorybookIndex() {
 }
 function getStoriesForFile(filePath) {
   if (!cachedIndex) return [];
-  const fileName = path6.basename(filePath);
+  const fileName = path7.basename(filePath);
   return Object.values(cachedIndex.entries).filter((entry) => entry.type === "story" && entry.importPath.endsWith(fileName)).map((entry) => entry.id);
 }
 async function regenerateScreenshotsForFiles(files) {
@@ -884,13 +884,115 @@ function softStoryRerenderPlugin() {
     preview.onStoriesChanged({ importFn: newModule.importFn });
   }
 });`;
-      const out = code.replace(pattern, (_match, quote, path7) => {
-        return replacement.replace("$QUOTE$$PATH$$QUOTE$", `${quote}${path7}${quote}`);
+      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)) {
@@ -917,8 +1019,8 @@ var manifestCache = null;
 var manifestHash = null;
 function readManifestFromDisk(filePath) {
   try {
-    if (!fs4.existsSync(filePath)) return null;
-    const raw = fs4.readFileSync(filePath, "utf-8");
+    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 };
@@ -961,10 +1063,10 @@ var TAILWIND_ENTRY_CANDIDATES = [
 var TAILWIND_DIRECTIVE_PATTERN = /@import\s+['"](?:tailwindcss|tailwindcss\/.+)['"]|@tailwind\s+(?:base|components|utilities)/;
 function detectTailwindEntryCss(cwd) {
   for (const rel of TAILWIND_ENTRY_CANDIDATES) {
-    const abs = path6.join(cwd, rel);
+    const abs = path7.join(cwd, rel);
     try {
-      if (!fs4.existsSync(abs)) continue;
-      const head = fs4.readFileSync(abs, "utf-8").slice(0, 2048);
+      if (!fs5.existsSync(abs)) continue;
+      const head = fs5.readFileSync(abs, "utf-8").slice(0, 2048);
       if (TAILWIND_DIRECTIVE_PATTERN.test(head)) return abs;
     } catch {
     }
@@ -1092,7 +1194,7 @@ var serveMetadataAndScreenshots = (req, res, next) => {
     return;
   }
   if (req.url?.startsWith("/screenshots/")) {
-    const screenshotPath = path6.join(
+    const screenshotPath = path7.join(
       process.cwd(),
       ".storybook-cache",
       req.url.replace("/screenshots/", "screenshots/")
@@ -1101,11 +1203,11 @@ var serveMetadataAndScreenshots = (req, res, next) => {
     const storyId = urlParts[0];
     const themeFile = urlParts[1];
     const theme = themeFile?.replace(".png", "");
-    if (fs4.existsSync(screenshotPath)) {
+    if (fs5.existsSync(screenshotPath)) {
       res.setHeader("Content-Type", "image/png");
       res.setHeader("Access-Control-Allow-Origin", "*");
       res.setHeader("Cache-Control", "public, max-age=3600");
-      fs4.createReadStream(screenshotPath).pipe(res);
+      fs5.createReadStream(screenshotPath).pipe(res);
       return;
     }
     if (storyId && theme && (theme === "light" || theme === "dark")) {
@@ -1113,16 +1215,16 @@ var serveMetadataAndScreenshots = (req, res, next) => {
         `[STORYBOOK_PLUGIN] Generating screenshot on-demand: ${storyId}/${theme}`
       );
       captureScreenshotBuffer(storyId, theme).then(({ buffer }) => {
-        const storyDir = path6.join(
+        const storyDir = path7.join(
           process.cwd(),
           ".storybook-cache",
           "screenshots",
           storyId
         );
-        if (!fs4.existsSync(storyDir)) {
-          fs4.mkdirSync(storyDir, { recursive: true });
+        if (!fs5.existsSync(storyDir)) {
+          fs5.mkdirSync(storyDir, { recursive: true });
         }
-        fs4.writeFileSync(screenshotPath, buffer);
+        fs5.writeFileSync(screenshotPath, buffer);
         res.setHeader("Content-Type", "image/png");
         res.setHeader("Access-Control-Allow-Origin", "*");
         res.setHeader("Cache-Control", "public, max-age=3600");
@@ -1196,10 +1298,20 @@ function storybookOnlookPlugin(options = {}) {
     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).
@@ -1220,7 +1332,7 @@ function storybookOnlookPlugin(options = {}) {
     configureServer(server) {
       console.log("[STORYBOOK_PLUGIN] Configuring server middleware");
       server.middlewares.use(serveMetadataAndScreenshots);
-      const cachedManifestPath = path6.join(
+      const cachedManifestPath = path7.join(
         process.cwd(),
         ".storybook-cache",
         "manifest.json"
@@ -1239,7 +1351,7 @@ function storybookOnlookPlugin(options = {}) {
       server.watcher.on("change", scheduleRefresh);
       const storyGlobs = options.storyGlobs ?? ["**/*.stories.@(js|jsx|mjs|ts|tsx|mdx)"];
       const resolvedStoryGlobs = storyGlobs.map(
-        (glob) => path6.isAbsolute(glob) ? glob : path6.join(process.cwd(), glob)
+        (glob) => path7.isAbsolute(glob) ? glob : path7.join(process.cwd(), glob)
       );
       if (resolvedStoryGlobs.length > 0) {
         server.watcher.add(resolvedStoryGlobs);
@@ -1250,7 +1362,7 @@ function storybookOnlookPlugin(options = {}) {
       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 path7.isAbsolute(options.tailwindEntryCss) ? options.tailwindEntryCss : path7.join(process.cwd(), options.tailwindEntryCss);
         }
         return detectTailwindEntryCss(process.cwd());
       })();
@@ -1266,13 +1378,13 @@ function storybookOnlookPlugin(options = {}) {
         });
         server.watcher.on("add", (file) => {
           if (!/\.tsx?$/.test(file)) return;
-          const dir = path6.dirname(file);
+          const dir = path7.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);
+            fs5.utimesSync(tailwindEntryPath, now, now);
             console.log("[STORYBOOK_PLUGIN] Tailwind rescan for new dir", {
               dir,
               entry: tailwindEntryPath
@@ -1297,7 +1409,7 @@ function storybookOnlookPlugin(options = {}) {
     configurePreviewServer(server) {
       console.log("[STORYBOOK_PLUGIN] Configuring preview server middleware");
       server.middlewares.use(serveMetadataAndScreenshots);
-      refreshManifest(path6.join(process.cwd(), ".storybook-cache", "manifest.json"));
+      refreshManifest(path7.join(process.cwd(), ".storybook-cache", "manifest.json"));
     },
     handleHotUpdate: handleStoryFileChange
   };
@@ -1324,7 +1436,8 @@ var OPTION_KEY_MAP = {
   storyGlobs: true,
   tailwindEntryCss: true,
   envContainment: true,
-  moduleLoadCatchAll: true
+  moduleLoadCatchAll: true,
+  resolveAliases: true
 };
 var OPTION_KEYS = Object.keys(OPTION_KEY_MAP);
 function pluginOptionsFromPresetOptions(options) {

package/dist/{storybook-onlook-plugin-CigILdDb.d.ts → storybook-onlook-plugin-B9Eo_OIq.d.ts}

@@ -55,6 +55,7 @@ type OnlookPluginOptions = {
     tailwindEntryCss?: string | false;
     envContainment?: EnvContainmentOptions;
     moduleLoadCatchAll?: boolean;
+    resolveAliases?: boolean;
 };
 declare function storybookOnlookPlugin(options?: OnlookPluginOptions): PluginOption[];
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onlook/storybook-plugin",
-  "version": "0.4.0-beta.10",
+  "version": "0.4.0-beta.11",
   "type": "module",
   "bin": {
     "onlook-storybook": "./dist/cli/index.js"