@bitovi/vybit 0.10.1 → 0.10.2

package/README.md

@@ -171,18 +171,21 @@ STORYBOOK_URL=http://localhost:7000 npx @bitovi/vybit
 
 ### 2. Use the VyBit Panel Inside Storybook
 
-You can embed the VyBit editor panel as a tab directly inside your Storybook UI. This requires installing the addon separately:
-
-1. Install the addon in your project:
-   ```bash
-   npm install --save-dev @bitovi/vybit-storybook-addon
-   ```
-2. Register it in `.storybook/main.ts`:
-   ```ts
-   export default {
-     addons: ['@bitovi/vybit-storybook-addon'],
-   };
-   ```
+You can embed the VyBit editor panel as a tab directly inside your Storybook UI. Because VyBit is typically run via `npx` in the MCP config (not installed locally), you need to add it as a dev dependency so Storybook can resolve the addon.
+
+Install it in the same package where Storybook is a dependency (this may be a subdirectory in a monorepo):
+
+```bash
+npm install --save-dev @bitovi/vybit
+```
+
+Then register the addon in `.storybook/main.ts`:
+
+```ts
+export default {
+  addons: ['@bitovi/vybit/storybook-addon'],
+};
+```
 
 The VyBit editor panel will now appear as a tab inside your Storybook.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitovi/vybit",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "description": "Browser overlay + inspector panel + MCP server for visually editing Tailwind CSS classes on a running React app",
   "keywords": [
     "tailwind",
@@ -23,7 +23,7 @@
   },
   "exports": {
     ".": "./loader.mjs",
-    "./storybook-addon": "./storybook-addon/index.ts"
+    "./storybook-addon": "./storybook-addon/index.js"
   },
   "files": [
     "loader.mjs",