storybook-onbook-plugin 0.1.0

package/README.md

@@ -0,0 +1,64 @@
+# storybook-onbook-plugin
+
+Vite plugin for Storybook that adds component location tracking, E2B sandbox HMR support, and screenshot capture APIs.
+
+## Installation
+
+```bash
+npm install storybook-onbook-plugin
+```
+
+## Usage
+
+Add to your `.storybook/main.ts`:
+
+```ts
+import { storybookOnlookPlugin } from 'storybook-onbook-plugin';
+
+export default {
+  // ... your config
+  async viteFinal(config) {
+    const { mergeConfig } = await import('vite');
+    return mergeConfig(config, {
+      plugins: [storybookOnlookPlugin()],
+    });
+  },
+};
+```
+
+## Features
+
+### Component Location Tracking
+
+Adds `data-component-file` attributes to React components with their source file paths, enabling click-to-source functionality.
+
+### E2B Sandbox HMR
+
+Configures Vite HMR for E2B sandboxes (WSS protocol, port 443 routing).
+
+### Screenshot API
+
+- `GET /api/capture-screenshot?storyId=<id>&theme=light|dark&width=800&height=600` - Capture on-demand screenshots
+- `GET /screenshots/<path>` - Serve cached screenshots
+- `GET /onbook-index.json` - Extended Storybook index with bounding box metadata
+
+### CORS
+
+Pre-configured for `https://app.onlook.ai`, `localhost:3000`, and `localhost:6006`.
+
+## Options
+
+```ts
+storybookOnlookPlugin({
+  port: 6006,              // Storybook port (default: 6006)
+  allowedOrigins: [],      // Additional CORS origins
+});
+```
+
+## CI/Chromatic
+
+The plugin auto-disables when `CHROMATIC` or `CI` environment variables are set.
+
+## License
+
+MIT

package/dist/component-loc/component-loc.d.ts

@@ -0,0 +1,7 @@
+import type { Plugin } from 'vite';
+type ComponentLocPluginOptions = {
+    include?: RegExp;
+};
+export declare function componentLocPlugin(options?: ComponentLocPluginOptions): Plugin;
+export default componentLocPlugin;
+//# sourceMappingURL=component-loc.d.ts.map

package/dist/component-loc/component-loc.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-loc.d.ts","sourceRoot":"","sources":["../../src/component-loc/component-loc.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAEnC,KAAK,yBAAyB,GAAG;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,OAAO,GAAE,yBAA8B,GAAG,MAAM,CAgFlF;AAED,eAAe,kBAAkB,CAAC"}

package/dist/component-loc/component-loc.js

@@ -0,0 +1,58 @@
+import path from 'node:path';
+import generateModule from '@babel/generator';
+import { parse } from '@babel/parser';
+import traverseModule from '@babel/traverse';
+import * as t from '@babel/types';
+export function componentLocPlugin(options = {}) {
+    const include = options.include ?? /\.(jsx|tsx)$/;
+    // @babel/traverse and @babel/generator are CommonJS modules with default exports.
+    // When imported in an ESM context, the default export may be on `.default` or directly on the module.
+    // This workaround handles both cases to ensure compatibility across different bundler configurations.
+    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;
+            const ast = parse(code, {
+                sourceType: 'module',
+                plugins: ['jsx', 'typescript'],
+                sourceFilename: filepath,
+            });
+            let mutated = false;
+            // Get relative path from project root
+            const relativePath = path.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 };
+        },
+    };
+}
+export default componentLocPlugin;

package/dist/component-loc/index.d.ts

@@ -0,0 +1,2 @@
+export { componentLocPlugin } from './component-loc';
+//# sourceMappingURL=index.d.ts.map

package/dist/component-loc/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/component-loc/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/component-loc/index.js

@@ -0,0 +1 @@
+export { componentLocPlugin } from './component-loc';

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { storybookOnlookPlugin, type OnlookPluginOptions } from './onlook-plugin/index';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,KAAK,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+export { storybookOnlookPlugin } from './onlook-plugin/index';

package/dist/onlook-plugin/handlers/handleStoryFileChange/handleStoryFileChange.d.ts

@@ -0,0 +1,3 @@
+import type { HmrContext } from 'vite';
+export declare function handleStoryFileChange({ file, modules }: HmrContext): import("vite").ModuleNode[] | undefined;
+//# sourceMappingURL=handleStoryFileChange.d.ts.map

package/dist/onlook-plugin/handlers/handleStoryFileChange/handleStoryFileChange.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"handleStoryFileChange.d.ts","sourceRoot":"","sources":["../../../../src/onlook-plugin/handlers/handleStoryFileChange/handleStoryFileChange.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AA4FvC,wBAAgB,qBAAqB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,UAAU,2CAiClE"}

package/dist/onlook-plugin/handlers/handleStoryFileChange/handleStoryFileChange.js

@@ -0,0 +1,100 @@
+import path from 'node:path';
+import { generateScreenshot } from '../../screenshot-service/index';
+import { computeFileHash } from '../../utils/fileSystem/index';
+import { updateManifest } from '../../utils/manifest/index';
+// Cache for Storybook's index.json
+let cachedIndex = null;
+let indexFetchPromise = null;
+// Debounce state
+const pendingFiles = new Set();
+let debounceTimer = null;
+const DEBOUNCE_MS = 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 [];
+    // Normalize the file path to match Storybook's importPath format
+    const fileName = path.basename(filePath);
+    return Object.values(cachedIndex.entries)
+        .filter((entry) => entry.type === 'story' && entry.importPath.endsWith(fileName))
+        .map((entry) => entry.id);
+}
+async function regenerateScreenshotsForFiles(files) {
+    // Refresh index before regenerating (in case new stories were added)
+    await fetchStorybookIndex();
+    const allStoryIds = new Set();
+    const fileToStories = 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';
+    // Regenerate screenshots for each story (both themes) and collect bounding boxes
+    const storyBoundingBoxes = 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),
+        ]);
+        // Use bounding box from light theme
+        if (lightResult) {
+            storyBoundingBoxes.set(storyId, lightResult.boundingBox);
+        }
+    }));
+    // Update manifest with new hashes and bounding boxes
+    for (const [file, storyIds] of fileToStories) {
+        const fileHash = computeFileHash(file);
+        storyIds.forEach((storyId) => {
+            updateManifest(storyId, file, fileHash, storyBoundingBoxes.get(storyId));
+        });
+    }
+    console.log(`[Screenshots] ✓ Regenerated ${allStoryIds.size} stories`);
+}
+export function handleStoryFileChange({ file, modules }) {
+    // Detect story file changes
+    if (file.endsWith('.stories.tsx') || file.endsWith('.stories.ts')) {
+        console.log(`[Screenshots] Story file changed: ${file}`);
+        // Initialize index cache on first change
+        if (!cachedIndex && !indexFetchPromise) {
+            indexFetchPromise = fetchStorybookIndex();
+        }
+        // Add to pending files
+        pendingFiles.add(file);
+        // Debounce regeneration
+        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_MS);
+        // Return modules to trigger HMR update in Storybook
+        return modules;
+    }
+}

package/dist/onlook-plugin/handlers/handleStoryFileChange/index.d.ts

@@ -0,0 +1,2 @@
+export { handleStoryFileChange } from './handleStoryFileChange';
+//# sourceMappingURL=index.d.ts.map

package/dist/onlook-plugin/handlers/handleStoryFileChange/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/onlook-plugin/handlers/handleStoryFileChange/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/onlook-plugin/handlers/handleStoryFileChange/index.js

@@ -0,0 +1 @@
+export { handleStoryFileChange } from './handleStoryFileChange';

package/dist/onlook-plugin/index.d.ts

@@ -0,0 +1,2 @@
+export { storybookOnlookPlugin, type OnlookPluginOptions } from './storybook-onlook-plugin';
+//# sourceMappingURL=index.d.ts.map

package/dist/onlook-plugin/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/onlook-plugin/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,KAAK,mBAAmB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/onlook-plugin/index.js

@@ -0,0 +1 @@
+export { storybookOnlookPlugin } from './storybook-onlook-plugin';

package/dist/onlook-plugin/screenshot-service/constants.d.ts

@@ -0,0 +1,8 @@
+export declare const CACHE_DIR: string;
+export declare const SCREENSHOTS_DIR: string;
+export declare const MANIFEST_PATH: string;
+export declare const VIEWPORT_WIDTH = 1920;
+export declare const VIEWPORT_HEIGHT = 1080;
+export declare const MIN_COMPONENT_WIDTH = 420;
+export declare const MIN_COMPONENT_HEIGHT = 280;
+//# sourceMappingURL=constants.d.ts.map

package/dist/onlook-plugin/screenshot-service/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/onlook-plugin/screenshot-service/constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,QAA+C,CAAC;AACtE,eAAO,MAAM,eAAe,QAAsC,CAAC;AACnE,eAAO,MAAM,aAAa,QAAwC,CAAC;AAInE,eAAO,MAAM,cAAc,OAAO,CAAC;AACnC,eAAO,MAAM,eAAe,OAAO,CAAC;AAGpC,eAAO,MAAM,mBAAmB,MAAM,CAAC;AACvC,eAAO,MAAM,oBAAoB,MAAM,CAAC"}

package/dist/onlook-plugin/screenshot-service/constants.js

@@ -0,0 +1,11 @@
+import path from 'node:path';
+export const CACHE_DIR = path.join(process.cwd(), '.storybook-cache');
+export const SCREENSHOTS_DIR = path.join(CACHE_DIR, 'screenshots');
+export const MANIFEST_PATH = path.join(CACHE_DIR, 'manifest.json');
+// Full HD viewport so page-level mocks render correctly
+// Screenshot clips to actual component size, so this doesn't affect file size
+export const VIEWPORT_WIDTH = 1920;
+export const VIEWPORT_HEIGHT = 1080;
+// Minimum dimensions for components on canvas
+export const MIN_COMPONENT_WIDTH = 420;
+export const MIN_COMPONENT_HEIGHT = 280;

package/dist/onlook-plugin/screenshot-service/index.d.ts

@@ -0,0 +1,5 @@
+export { generateAllScreenshots } from './screenshot-service';
+export type { Manifest, ScreenshotMetadata } from './types';
+export { closeBrowser } from './utils/browser/index';
+export { generateScreenshot, getScreenshotPath, screenshotExists, } from './utils/screenshot/index';
+//# sourceMappingURL=index.d.ts.map

package/dist/onlook-plugin/screenshot-service/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/onlook-plugin/screenshot-service/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAE9D,YAAY,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE5D,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,0BAA0B,CAAC"}

package/dist/onlook-plugin/screenshot-service/index.js

@@ -0,0 +1,5 @@
+// Main API
+export { generateAllScreenshots } from './screenshot-service';
+// Re-export screenshot utilities
+export { closeBrowser } from './utils/browser/index';
+export { generateScreenshot, getScreenshotPath, screenshotExists, } from './utils/screenshot/index';

package/dist/onlook-plugin/screenshot-service/screenshot-service.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Generate screenshots for all stories (parallelized for speed)
+ */
+export declare function generateAllScreenshots(stories: Array<{
+    id: string;
+    importPath: string;
+}>, storybookUrl?: string): Promise<void>;
+//# sourceMappingURL=screenshot-service.d.ts.map

package/dist/onlook-plugin/screenshot-service/screenshot-service.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"screenshot-service.d.ts","sourceRoot":"","sources":["../../../src/onlook-plugin/screenshot-service/screenshot-service.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,wBAAsB,sBAAsB,CAC1C,OAAO,EAAE,KAAK,CAAC;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE,CAAC,EAClD,YAAY,GAAE,MAAgC,GAC7C,OAAO,CAAC,IAAI,CAAC,CAsCf"}

package/dist/onlook-plugin/screenshot-service/screenshot-service.js

@@ -0,0 +1,36 @@
+import { computeFileHash } from '../utils/fileSystem/index';
+import { updateManifest } from '../utils/manifest/index';
+import { closeBrowser } from './utils/browser/index';
+import { generateScreenshot } from './utils/screenshot/index';
+/**
+ * Generate screenshots for all stories (parallelized for speed)
+ */
+export async function generateAllScreenshots(stories, storybookUrl = 'http://localhost:6006') {
+    console.log(`Generating screenshots for ${stories.length} stories...`);
+    // Process stories in batches for better performance
+    // Higher than CPU count since work is I/O-bound (waiting for page render)
+    const BATCH_SIZE = 10;
+    const batches = [];
+    for (let i = 0; i < stories.length; i += BATCH_SIZE) {
+        batches.push(stories.slice(i, i + BATCH_SIZE));
+    }
+    let completed = 0;
+    for (const batch of batches) {
+        await Promise.all(batch.map(async (story) => {
+            // Generate both light and dark in parallel for each story
+            const [lightResult, darkResult] = await Promise.all([
+                generateScreenshot(story.id, 'light', storybookUrl),
+                generateScreenshot(story.id, 'dark', storybookUrl),
+            ]);
+            if (lightResult && darkResult) {
+                const fileHash = computeFileHash(story.importPath);
+                // Use bounding box from light theme (should be same for both)
+                updateManifest(story.id, story.importPath, fileHash, lightResult.boundingBox);
+            }
+            completed++;
+            console.log(`[${completed}/${stories.length}] Generated screenshots for ${story.id}`);
+        }));
+    }
+    await closeBrowser();
+    console.log('Screenshot generation complete!');
+}

package/dist/onlook-plugin/screenshot-service/types.d.ts

@@ -0,0 +1,18 @@
+export interface BoundingBox {
+    width: number;
+    height: number;
+}
+export interface ScreenshotMetadata {
+    fileHash: string;
+    lastGenerated: string;
+    sourcePath: string;
+    screenshots: {
+        light: string;
+        dark: string;
+    };
+    boundingBox?: BoundingBox;
+}
+export interface Manifest {
+    stories: Record<string, ScreenshotMetadata>;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/onlook-plugin/screenshot-service/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/onlook-plugin/screenshot-service/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE;QACX,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,MAAM,WAAW,QAAQ;IACvB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;CAC7C"}

package/dist/onlook-plugin/screenshot-service/utils/browser/browser.d.ts

@@ -0,0 +1,10 @@
+import { type Browser } from 'playwright';
+/**
+ * Initialize browser instance
+ */
+export declare function getBrowser(): Promise<Browser>;
+/**
+ * Close browser instance
+ */
+export declare function closeBrowser(): Promise<void>;
+//# sourceMappingURL=browser.d.ts.map

package/dist/onlook-plugin/screenshot-service/utils/browser/browser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser.d.ts","sourceRoot":"","sources":["../../../../../src/onlook-plugin/screenshot-service/utils/browser/browser.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAY,MAAM,YAAY,CAAC;AAIpD;;GAEG;AACH,wBAAsB,UAAU,IAAI,OAAO,CAAC,OAAO,CAAC,CAOnD;AAED;;GAEG;AACH,wBAAsB,YAAY,kBAUjC"}

package/dist/onlook-plugin/screenshot-service/utils/browser/browser.js

@@ -0,0 +1,29 @@
+import { chromium } from 'playwright';
+let browser = null;
+/**
+ * Initialize browser instance
+ */
+export async function getBrowser() {
+    if (!browser) {
+        browser = await chromium.launch({
+            headless: true,
+        });
+    }
+    return browser;
+}
+/**
+ * Close browser instance
+ */
+export async function closeBrowser() {
+    if (browser) {
+        try {
+            await browser.close();
+        }
+        catch (error) {
+            console.error('Error closing browser:', error);
+        }
+        finally {
+            browser = null;
+        }
+    }
+}

package/dist/onlook-plugin/screenshot-service/utils/browser/index.d.ts

@@ -0,0 +1,2 @@
+export { closeBrowser, getBrowser } from './browser';
+//# sourceMappingURL=index.d.ts.map

package/dist/onlook-plugin/screenshot-service/utils/browser/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/onlook-plugin/screenshot-service/utils/browser/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC"}

package/dist/onlook-plugin/screenshot-service/utils/browser/index.js

@@ -0,0 +1 @@
+export { closeBrowser, getBrowser } from './browser';

package/dist/onlook-plugin/screenshot-service/utils/screenshot/index.d.ts

@@ -0,0 +1,2 @@
+export { captureScreenshotBuffer, generateScreenshot, getScreenshotPath, screenshotExists, } from './screenshot';
+//# sourceMappingURL=index.d.ts.map

package/dist/onlook-plugin/screenshot-service/utils/screenshot/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/onlook-plugin/screenshot-service/utils/screenshot/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,cAAc,CAAC"}

package/dist/onlook-plugin/screenshot-service/utils/screenshot/index.js

@@ -0,0 +1 @@
+export { captureScreenshotBuffer, generateScreenshot, getScreenshotPath, screenshotExists, } from './screenshot';

package/dist/onlook-plugin/screenshot-service/utils/screenshot/screenshot.d.ts

@@ -0,0 +1,26 @@
+import type { BoundingBox } from '../../types';
+export interface ScreenshotResult {
+    buffer: Buffer;
+    boundingBox: BoundingBox | null;
+}
+export interface GenerateScreenshotResult {
+    path: string;
+    boundingBox: BoundingBox | null;
+}
+/**
+ * Get screenshot file path
+ */
+export declare function getScreenshotPath(storyId: string, theme: 'light' | 'dark'): string;
+/**
+ * Check if screenshot exists
+ */
+export declare function screenshotExists(storyId: string, theme: 'light' | 'dark'): boolean;
+/**
+ * Capture a screenshot and return it as a Buffer with bounding box info
+ */
+export declare function captureScreenshotBuffer(storyId: string, theme: 'light' | 'dark', width?: number, height?: number, storybookUrl?: string): Promise<ScreenshotResult>;
+/**
+ * Generate a screenshot for a story and save to disk
+ */
+export declare function generateScreenshot(storyId: string, theme: 'light' | 'dark', storybookUrl?: string): Promise<GenerateScreenshotResult | null>;
+//# sourceMappingURL=screenshot.d.ts.map

package/dist/onlook-plugin/screenshot-service/utils/screenshot/screenshot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"screenshot.d.ts","sourceRoot":"","sources":["../../../../../src/onlook-plugin/screenshot-service/utils/screenshot/screenshot.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,WAAW,GAAG,IAAI,CAAC;CACjC;AAED,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,WAAW,GAAG,IAAI,CAAC;CACjC;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAGlF;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAGlF;AAED;;GAEG;AACH,wBAAsB,uBAAuB,CAC3C,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,OAAO,GAAG,MAAM,EACvB,KAAK,GAAE,MAAuB,EAC9B,MAAM,GAAE,MAAwB,EAChC,YAAY,GAAE,MAAgC,GAC7C,OAAO,CAAC,gBAAgB,CAAC,CAiG3B;AAED;;GAEG;AACH,wBAAsB,kBAAkB,CACtC,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,OAAO,GAAG,MAAM,EACvB,YAAY,GAAE,MAAgC,GAC7C,OAAO,CAAC,wBAAwB,GAAG,IAAI,CAAC,CAwB1C"}

package/dist/onlook-plugin/screenshot-service/utils/screenshot/screenshot.js

@@ -0,0 +1,128 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { ensureCacheDirectories } from '../../../utils/fileSystem/index';
+import { MIN_COMPONENT_HEIGHT, MIN_COMPONENT_WIDTH, SCREENSHOTS_DIR, VIEWPORT_HEIGHT, VIEWPORT_WIDTH, } from '../../constants';
+import { getBrowser } from '../browser/index';
+/**
+ * Get screenshot file path
+ */
+export function getScreenshotPath(storyId, theme) {
+    const storyDir = path.join(SCREENSHOTS_DIR, storyId);
+    return path.join(storyDir, `${theme}.png`);
+}
+/**
+ * Check if screenshot exists
+ */
+export function screenshotExists(storyId, theme) {
+    const screenshotPath = getScreenshotPath(storyId, theme);
+    return fs.existsSync(screenshotPath);
+}
+/**
+ * Capture a screenshot and return it as a Buffer with bounding box info
+ */
+export async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, height = VIEWPORT_HEIGHT, storybookUrl = 'http://localhost:6006') {
+    const browser = await getBrowser();
+    const context = await browser.newContext({
+        viewport: { width, height },
+        deviceScaleFactor: 2,
+    });
+    const page = await context.newPage();
+    try {
+        // Navigate to story iframe URL
+        const url = `${storybookUrl}/iframe.html?id=${storyId}&viewMode=story&globals=theme:${theme}`;
+        await page.goto(url, { timeout: 15000 });
+        // Wait for page to be fully ready (matching @storybook/test-runner's waitForPageReady)
+        await page.waitForLoadState('domcontentloaded');
+        await page.waitForLoadState('load');
+        await page.waitForLoadState('networkidle');
+        await page.evaluate(() => document.fonts.ready);
+        // Wait for all images to be fully loaded and decoded
+        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);
+                });
+            }));
+        });
+        // Calculate the bounding box of all content inside #storybook-root
+        const contentBounds = await page.evaluate(() => {
+            const root = document.querySelector('#storybook-root');
+            if (!root)
+                return null;
+            // Get the bounding rect of all children combined
+            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; // 10px each side
+            const clippedWidth = Math.min(width, contentBounds.width + PADDING);
+            const clippedHeight = Math.min(height, contentBounds.height + PADDING);
+            // Store dimensions that match the actual screenshot (including 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();
+    }
+}
+/**
+ * Generate a screenshot for a story and save to disk
+ */
+export async function generateScreenshot(storyId, theme, storybookUrl = 'http://localhost:6006') {
+    try {
+        ensureCacheDirectories();
+        const storyDir = path.join(SCREENSHOTS_DIR, storyId);
+        if (!fs.existsSync(storyDir)) {
+            fs.mkdirSync(storyDir, { recursive: true });
+        }
+        const screenshotPath = getScreenshotPath(storyId, theme);
+        const { buffer, boundingBox } = await captureScreenshotBuffer(storyId, theme, VIEWPORT_WIDTH, VIEWPORT_HEIGHT, storybookUrl);
+        fs.writeFileSync(screenshotPath, buffer);
+        return { path: screenshotPath, boundingBox };
+    }
+    catch (error) {
+        console.error(`Error generating screenshot for ${storyId} (${theme}):`, error);
+        return null;
+    }
+}

package/dist/onlook-plugin/storybook-onlook-plugin.d.ts

@@ -0,0 +1,9 @@
+import type { PluginOption } from 'vite';
+export type OnlookPluginOptions = {
+    /** Storybook port (default: 6006) */
+    port?: number;
+    /** Additional allowed origins for CORS (merged with defaults) */
+    allowedOrigins?: string[];
+};
+export declare function storybookOnlookPlugin(options?: OnlookPluginOptions): PluginOption[];
+//# sourceMappingURL=storybook-onlook-plugin.d.ts.map

package/dist/onlook-plugin/storybook-onlook-plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"storybook-onlook-plugin.d.ts","sourceRoot":"","sources":["../../src/onlook-plugin/storybook-onlook-plugin.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAU,YAAY,EAAiB,MAAM,MAAM,CAAC;AAoBhE,MAAM,MAAM,mBAAmB,GAAG;IAChC,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B,CAAC;AAqHF,wBAAgB,qBAAqB,CAAC,OAAO,GAAE,mBAAwB,GAAG,YAAY,EAAE,CA2CvF"}

package/dist/onlook-plugin/storybook-onlook-plugin.js

@@ -0,0 +1,151 @@
+import fs from 'node:fs';
+import path, { dirname, join, relative } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { componentLocPlugin } from '../component-loc/index';
+import { handleStoryFileChange } from './handlers/handleStoryFileChange/index';
+import { captureScreenshotBuffer } from './screenshot-service/utils/screenshot/index';
+import { findGitRoot } from './utils/findGitRoot/index';
+// Calculate storybook location relative to git root
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const storybookDir = join(__dirname, '..');
+const gitRoot = findGitRoot(storybookDir);
+const storybookLocation = gitRoot ? relative(gitRoot, storybookDir) : '';
+const repoRoot = gitRoot || process.cwd();
+// Default allowed origins for CORS
+const DEFAULT_ALLOWED_ORIGINS = [
+    'https://app.onlook.ai',
+    'http://localhost:3000',
+    'http://localhost:6006',
+];
+const serveMetadataAndScreenshots = (req, res, next) => {
+    // Consolidated endpoint: Storybook index + metadata + boundingBox
+    if (req.url === '/onbook-index.json') {
+        const manifestPath = path.join(process.cwd(), '.storybook-cache', 'manifest.json');
+        // Fetch Storybook's index.json and enrich it
+        fetch('http://localhost:6006/index.json')
+            .then((response) => response.json())
+            // biome-ignore lint/suspicious/noExplicitAny: Storybook index.json structure
+            .then((indexData) => {
+            // Load manifest for bounding box data
+            const manifest = fs.existsSync(manifestPath)
+                ? JSON.parse(fs.readFileSync(manifestPath, 'utf-8'))
+                : { stories: {} };
+            // Default viewport size as fallback
+            const defaultBoundingBox = { width: 1920, height: 1080 };
+            // Add boundingBox to each entry
+            for (const [storyId, entry] of Object.entries(indexData.entries || {})) {
+                const manifestEntry = manifest.stories?.[storyId];
+                // biome-ignore lint/suspicious/noExplicitAny: extending Storybook entry
+                entry.boundingBox = manifestEntry?.boundingBox || defaultBoundingBox;
+            }
+            // Add metadata
+            indexData.meta = { storybookLocation, repoRoot };
+            res.setHeader('Content-Type', 'application/json');
+            res.setHeader('Access-Control-Allow-Origin', '*');
+            res.end(JSON.stringify(indexData));
+        })
+            .catch((error) => {
+            console.error('Failed to fetch/extend index.json:', error);
+            res.statusCode = 500;
+            res.setHeader('Content-Type', 'application/json');
+            res.end(JSON.stringify({ error: 'Failed to fetch index', details: String(error) }));
+        });
+        return;
+    }
+    // On-demand screenshot capture API
+    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;
+        }
+        // Validate theme
+        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;
+        }
+        // Capture screenshot asynchronously
+        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;
+    }
+    // Serve screenshots from cache
+    if (req.url?.startsWith('/screenshots/')) {
+        const screenshotPath = path.join(process.cwd(), '.storybook-cache', req.url.replace('/screenshots/', 'screenshots/'));
+        if (fs.existsSync(screenshotPath)) {
+            res.setHeader('Content-Type', 'image/png');
+            res.setHeader('Access-Control-Allow-Origin', '*');
+            res.setHeader('Cache-Control', 'public, max-age=3600');
+            fs.createReadStream(screenshotPath).pipe(res);
+        }
+        else {
+            res.statusCode = 404;
+            res.end('Screenshot not found');
+        }
+        return;
+    }
+    next();
+};
+export function storybookOnlookPlugin(options = {}) {
+    // Auto-disable in CI/Chromatic static builds
+    if (process.env.CHROMATIC || process.env.CI) {
+        return [];
+    }
+    const port = options.port ?? 6006;
+    const allowedOrigins = [
+        ...DEFAULT_ALLOWED_ORIGINS,
+        ...(options.allowedOrigins ?? []),
+    ];
+    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,
+                    },
+                    cors: {
+                        origin: allowedOrigins,
+                    },
+                },
+            };
+        },
+        configureServer(server) {
+            server.middlewares.use(serveMetadataAndScreenshots);
+        },
+        configurePreviewServer(server) {
+            server.middlewares.use(serveMetadataAndScreenshots);
+        },
+        handleHotUpdate: handleStoryFileChange,
+    };
+    // componentLocPlugin has enforce: 'pre' so it runs before other transforms
+    return [componentLocPlugin(), mainPlugin];
+}

package/dist/onlook-plugin/utils/fileSystem/fileSystem.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Ensure cache directories exist
+ */
+export declare function ensureCacheDirectories(): void;
+/**
+ * Compute file hash
+ */
+export declare function computeFileHash(filePath: string): string;
+//# sourceMappingURL=fileSystem.d.ts.map

package/dist/onlook-plugin/utils/fileSystem/fileSystem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fileSystem.d.ts","sourceRoot":"","sources":["../../../../src/onlook-plugin/utils/fileSystem/fileSystem.ts"],"names":[],"mappings":"AAIA;;GAEG;AACH,wBAAgB,sBAAsB,SAOrC;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAMxD"}

package/dist/onlook-plugin/utils/fileSystem/fileSystem.js

@@ -0,0 +1,24 @@
+import crypto from 'node:crypto';
+import fs from 'node:fs';
+import { CACHE_DIR, SCREENSHOTS_DIR } from '../../screenshot-service/constants';
+/**
+ * Ensure cache directories exist
+ */
+export function ensureCacheDirectories() {
+    if (!fs.existsSync(CACHE_DIR)) {
+        fs.mkdirSync(CACHE_DIR, { recursive: true });
+    }
+    if (!fs.existsSync(SCREENSHOTS_DIR)) {
+        fs.mkdirSync(SCREENSHOTS_DIR, { recursive: true });
+    }
+}
+/**
+ * Compute file hash
+ */
+export function computeFileHash(filePath) {
+    if (!fs.existsSync(filePath)) {
+        return '';
+    }
+    const content = fs.readFileSync(filePath, 'utf-8');
+    return crypto.createHash('sha256').update(content).digest('hex');
+}

package/dist/onlook-plugin/utils/fileSystem/index.d.ts

@@ -0,0 +1,2 @@
+export { computeFileHash, ensureCacheDirectories } from './fileSystem';
+//# sourceMappingURL=index.d.ts.map

package/dist/onlook-plugin/utils/fileSystem/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/onlook-plugin/utils/fileSystem/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC"}

package/dist/onlook-plugin/utils/fileSystem/index.js

@@ -0,0 +1 @@
+export { computeFileHash, ensureCacheDirectories } from './fileSystem';

package/dist/onlook-plugin/utils/findGitRoot/findGitRoot.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Find the git repository root by walking up the directory tree
+ */
+export declare function findGitRoot(startPath: string): string | null;
+//# sourceMappingURL=findGitRoot.d.ts.map

package/dist/onlook-plugin/utils/findGitRoot/findGitRoot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"findGitRoot.d.ts","sourceRoot":"","sources":["../../../../src/onlook-plugin/utils/findGitRoot/findGitRoot.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,wBAAgB,WAAW,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAW5D"}

package/dist/onlook-plugin/utils/findGitRoot/findGitRoot.js

@@ -0,0 +1,15 @@
+import { existsSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+/**
+ * Find the git repository root by walking up the directory tree
+ */
+export function findGitRoot(startPath) {
+    let currentPath = startPath;
+    while (currentPath !== dirname(currentPath)) {
+        if (existsSync(join(currentPath, '.git'))) {
+            return currentPath;
+        }
+        currentPath = dirname(currentPath);
+    }
+    return null;
+}

package/dist/onlook-plugin/utils/findGitRoot/index.d.ts

@@ -0,0 +1,2 @@
+export { findGitRoot } from './findGitRoot';
+//# sourceMappingURL=index.d.ts.map

package/dist/onlook-plugin/utils/findGitRoot/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/onlook-plugin/utils/findGitRoot/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/onlook-plugin/utils/findGitRoot/index.js

@@ -0,0 +1 @@
+export { findGitRoot } from './findGitRoot';

package/dist/onlook-plugin/utils/manifest/index.d.ts

@@ -0,0 +1,2 @@
+export { getManifestEntry, loadManifest, saveManifest, updateManifest } from './manifest';
+//# sourceMappingURL=index.d.ts.map

package/dist/onlook-plugin/utils/manifest/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/onlook-plugin/utils/manifest/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC"}

package/dist/onlook-plugin/utils/manifest/index.js

@@ -0,0 +1 @@
+export { getManifestEntry, loadManifest, saveManifest, updateManifest } from './manifest';

package/dist/onlook-plugin/utils/manifest/manifest.d.ts

@@ -0,0 +1,21 @@
+import type { Manifest, ScreenshotMetadata } from '../../screenshot-service/types';
+/**
+ * Load manifest from disk
+ */
+export declare function loadManifest(): Manifest;
+/**
+ * Save manifest to disk
+ */
+export declare function saveManifest(manifest: Manifest): void;
+/**
+ * Get manifest entry for a story
+ */
+export declare function getManifestEntry(storyId: string): ScreenshotMetadata | null;
+/**
+ * Update manifest for a story
+ */
+export declare function updateManifest(storyId: string, sourcePath: string, fileHash: string, boundingBox?: {
+    width: number;
+    height: number;
+} | null): void;
+//# sourceMappingURL=manifest.d.ts.map

package/dist/onlook-plugin/utils/manifest/manifest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"manifest.d.ts","sourceRoot":"","sources":["../../../../src/onlook-plugin/utils/manifest/manifest.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGnF;;GAEG;AACH,wBAAgB,YAAY,IAAI,QAAQ,CAMvC;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,QAAQ,QAG9C;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,GAAG,kBAAkB,GAAG,IAAI,CAG3E;AAED;;GAEG;AACH,wBAAgB,cAAc,CAC5B,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,EAChB,WAAW,CAAC,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,QAgBvD"}

package/dist/onlook-plugin/utils/manifest/manifest.js

@@ -0,0 +1,44 @@
+import fs from 'node:fs';
+import { MANIFEST_PATH } from '../../screenshot-service/constants';
+import { ensureCacheDirectories } from '../fileSystem/index';
+/**
+ * Load manifest from disk
+ */
+export function loadManifest() {
+    if (fs.existsSync(MANIFEST_PATH)) {
+        const content = fs.readFileSync(MANIFEST_PATH, 'utf-8');
+        return JSON.parse(content);
+    }
+    return { stories: {} };
+}
+/**
+ * Save manifest to disk
+ */
+export function saveManifest(manifest) {
+    ensureCacheDirectories();
+    fs.writeFileSync(MANIFEST_PATH, JSON.stringify(manifest, null, 2));
+}
+/**
+ * Get manifest entry for a story
+ */
+export function getManifestEntry(storyId) {
+    const manifest = loadManifest();
+    return manifest.stories[storyId] || null;
+}
+/**
+ * Update manifest for a story
+ */
+export function updateManifest(storyId, sourcePath, fileHash, boundingBox) {
+    const manifest = loadManifest();
+    manifest.stories[storyId] = {
+        fileHash,
+        lastGenerated: new Date().toISOString(),
+        sourcePath,
+        screenshots: {
+            light: `screenshots/${storyId}/light.png`,
+            dark: `screenshots/${storyId}/dark.png`,
+        },
+        boundingBox: boundingBox ?? undefined,
+    };
+    saveManifest(manifest);
+}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "storybook-onbook-plugin",
+  "version": "0.1.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "clean": "git clean -xdf .cache .turbo dist node_modules",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "bun run build",
+    "publish-pkg": "npm publish --access public"
+  },
+  "dependencies": {
+    "@babel/generator": "^7.26.9",
+    "@babel/parser": "^7.26.9",
+    "@babel/traverse": "^7.26.9",
+    "@babel/types": "^7.26.9",
+    "playwright": "^1.52.0"
+  },
+  "devDependencies": {
+    "@onbook/tsconfig": "workspace:*",
+    "@types/babel__generator": "^7.6.8",
+    "@types/babel__traverse": "^7.20.6",
+    "@types/node": "^22.15.32",
+    "typescript": "5.8.3",
+    "vite": "^6.3.5"
+  },
+  "peerDependencies": {
+    "vite": "^5.0.0 || ^6.0.0"
+  }
+}