@bitovi/vybit 0.10.3 → 0.11.0

package/README.md

@@ -157,7 +157,7 @@ Once you have the changes you want to make, you can click the drafts button. Thi
 
 ## Storybook Integrations
 
-VyBit offers two separate Storybook integrations. Each requires its own setup.
+VyBit offers two separate Storybook integrations. Each requires its own setup. Both work with **Storybook 8** and **Storybook 10**.
 
 ### 1. Drag Components from Storybook into Your Page
 
@@ -171,7 +171,9 @@ 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. 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.
+You can embed the VyBit editor panel as a tab directly inside your Storybook UI. The addon auto-detects whether you're running Storybook 8 or 10 and loads the correct entry points.
+
+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):
 
@@ -187,7 +189,7 @@ export default {
 };
 ```
 
-The VyBit editor panel will now appear as a tab inside your Storybook.
+The VyBit editor panel will now appear as a "Vybit" tab inside your Storybook.
 
 ## MCP Tools
 

package/overlay/dist/overlay.js

@@ -4309,6 +4309,9 @@ ${pad}</${tag}>`;
     <path class="eb-fill" d="M203.62 90.36C200.83 87.64 198.15 86.1 195.79 84.75C194 83.73 192.46 82.84 190.96 81.51C189.22 79.95 187.1 75.74 186.15 73.24C186.14 73.21 186.12 73.17 186.11 73.14C180.84 57.81 173.51 43.77 164.58 32.13C148.57 11.27 129.15 0.16 108.42 0C108.28 0 108.13 0 107.99 0C85.65 0 64.34 13.17 47.95 37.12C42.28 45.4 37.04 56.95 33.2 65.38C32.31 67.35 31.51 69.09 30.84 70.52C29.88 72.54 28.87 74.32 27.74 75.95L21.06 15.98C24.27 14.61 26.42 11.74 26.24 8.54C26 4.26 21.69 1.03 16.61 1.31C11.53 1.59 7.61002 5.29 7.85002 9.57C8.04002 12.85 10.61 15.51 14.09 16.45L16.67 85.85L16.29 86.08C13.19 87.96 9.98002 89.9 7.71002 92.09C4.65002 95.04 2.40002 99.48 1.21002 104.92C-1.62998 117.95 0.120019 138.77 10.82 143.95C18.87 147.85 25.1 154.71 28.83 163.79C42.17 198.91 71.91 219.98 108.4 220.16C108.56 220.16 108.71 220.16 108.87 220.16C133.9 220.16 156.3 210.08 171.97 191.74C183.26 178.53 190.59 161.68 193.54 142.92C194.26 139.76 197.48 136.44 200.62 133.23C204.14 129.62 207.78 125.89 209.22 121.16C210.85 115.82 209.93 96.53 203.62 90.36ZM173.3 73.25C176.99 83.04 179.72 93.27 181.36 103.35C183.29 115.23 183.53 126.81 182.18 137.69C180.99 142.99 176.46 157.5 161.58 165.93C141.26 177.45 110.38 180.84 88.16 174.01C63.16 166.32 48.04 142.7 47.72 110.85C47.39 78.09 63.77 70.45 80.58 65.42C101.92 59.04 133.9 57.44 153.39 61.79C163.19 63.98 168.32 67.53 170.9 70.13C172.08 71.32 172.83 72.4 173.3 73.25ZM162.85 183.94C149.31 199.79 130.66 208.15 108.89 208.15C108.75 208.15 108.61 208.15 108.46 208.15C77.09 207.99 51.5 189.77 40 159.41C39.96 159.32 39.93 159.22 39.89 159.13C36.77 151.59 32.28 145.21 26.65 140.22C26.61 140.17 26.57 140.13 26.53 140.08C23.64 137.25 24.55 133.1 24.74 131.41C26.16 118.65 22.59 108.63 21.57 106.52C20.4 104.1 19.23 105.15 19.49 106.56C19.78 108.18 20.09 110.5 20.28 112.89C21.07 122.72 19.28 131.47 17.02 133.03C16.74 133.22 16.46 133.27 16.16 133.19C16.12 133.17 16.08 133.15 16.04 133.13C13.44 131.87 10.36 119.2 12.92 107.46C13.86 103.16 15.4 101.31 16.02 100.71C17.32 99.45 19.95 97.87 22.48 96.33L23.24 95.87C32.05 90.52 37.38 84.66 41.66 75.64C42.36 74.17 43.18 72.36 44.1 70.33C47.54 62.75 52.75 51.3 57.82 43.89C71.91 23.31 89.7 12 107.96 12C108.07 12 108.18 12 108.29 12C133.67 12.19 154.63 33.4 167.85 60.64C164.47 58.82 160.16 57.16 154.65 55.93C134.31 51.39 101 53.03 78.82 59.67C59.32 65.5 41.33 75.74 41.68 110.91C42.03 145.51 58.73 171.25 86.35 179.75C94.55 182.27 103.85 183.49 113.4 183.49C131.42 183.49 150.35 179.17 164.49 171.16C169.1 168.55 172.84 165.45 175.87 162.21C172.6 170.28 168.23 177.61 162.81 183.95L162.85 183.94ZM197.75 117.65C197.4 118.8 196.34 120.21 195.01 121.7C194.91 115.06 194.32 108.28 193.21 101.43C192.95 99.84 192.67 98.26 192.37 96.69C193.34 97.32 194.27 98.01 195.19 98.9C196.86 101.11 198.85 113.73 197.76 117.66L197.75 117.65Z"/>
   </svg>`;
     btn.addEventListener("click", () => toggleInspect(btn));
+    if (insideStorybook) {
+      btn.style.display = "none";
+    }
     shadowRoot.appendChild(btn);
     document.addEventListener("keydown", (e) => {
       if (e.key === "Escape" && currentTargetEl) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitovi/vybit",
-  "version": "0.10.3",
+  "version": "0.11.0",
   "description": "Browser overlay + inspector panel + MCP server for visually editing Tailwind CSS classes on a running React app",
   "keywords": [
     "tailwind",

package/storybook-addon/manager-v10.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { addons, types } from 'storybook/manager-api';
+import { AddonPanel } from 'storybook/internal/components';
+
+const ADDON_ID = 'vybit';
+const PANEL_ID = `${ADDON_ID}/panel`;
+
+addons.register(ADDON_ID, (api) => {
+  addons.add(PANEL_ID, {
+    type: types.PANEL,
+    title: 'VyBit',
+    paramKey: 'vybit',
+    render: ({ active }) => {
+      const serverUrl =
+        api.getCurrentParameter<{ serverUrl?: string }>('vybit')?.serverUrl
+        ?? 'http://localhost:3333';
+
+      if (active) {
+        api.togglePanelPosition('right');
+      }
+
+      return (
+        <AddonPanel active={active ?? false}>
+          <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
+            <iframe
+              src={`${serverUrl}/panel/`}
+              style={{ width: '100%', height: '100%', border: 'none' }}
+              title="Vybit Panel"
+            />
+          </div>
+        </AddonPanel>
+      );
+    },
+  });
+});

package/storybook-addon/manager.tsx

@@ -8,7 +8,7 @@ const PANEL_ID = `${ADDON_ID}/panel`;
 addons.register(ADDON_ID, (api) => {
   addons.add(PANEL_ID, {
     type: types.PANEL,
-    title: 'Vybit',
+    title: 'VyBit',
     paramKey: 'vybit',
     render: ({ active }) => {
       const serverUrl =
@@ -21,7 +21,7 @@ addons.register(ADDON_ID, (api) => {
 
       return (
         <AddonPanel active={active ?? false}>
-          <div style={{ height: '100%', width: '100%' }}>
+          <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
             <iframe
               src={`${serverUrl}/panel/`}
               style={{ width: '100%', height: '100%', border: 'none' }}

package/storybook-addon/package.json

@@ -5,6 +5,6 @@
   "type": "commonjs",
   "description": "Storybook addon wiring for Vybit — overlay injection + panel registration",
   "peerDependencies": {
-    "storybook": "^8.0.0"
+    "storybook": "^8.0.0 || ^10.0.0"
   }
 }

package/storybook-addon/preset.js

@@ -1,10 +1,22 @@
 const { join } = require('path');
 
+// Detect SB major version to choose the right entry points.
+// SB10 consolidates imports under 'storybook/*'; SB8 uses '@storybook/*'.
+let sbMajor = 8;
+try {
+  const sbPkgPath = require.resolve('storybook/package.json', { paths: [process.cwd()] });
+  const ver = require(sbPkgPath).version;
+  sbMajor = parseInt(ver.split('.')[0], 10);
+} catch { /* default to 8 */ }
+
+const managerFile = sbMajor >= 10 ? './manager-v10.tsx' : './manager.tsx';
+const previewFile = sbMajor >= 10 ? './preview-v10.ts' : './preview.ts';
+
 module.exports = {
   managerEntries(entry = []) {
-    return [...entry, join(__dirname, './manager.tsx')];
+    return [...entry, join(__dirname, managerFile)];
   },
   previewAnnotations(entry = []) {
-    return [...entry, join(__dirname, './preview.ts')];
+    return [...entry, join(__dirname, previewFile)];
   },
 };

package/storybook-addon/preview-v10.ts

@@ -0,0 +1,32 @@
+import { addons } from 'storybook/preview-api';
+
+let injected = false;
+
+export const decorators = [
+  (StoryFn: any, context: any) => {
+    const serverUrl =
+      context.parameters?.vybit?.serverUrl ?? 'http://localhost:3333';
+
+    if (!injected) {
+      console.log('[vybit-addon] Injecting overlay script from', serverUrl);
+      const script = document.createElement('script');
+      script.src = `${serverUrl}/overlay.js`;
+      script.onload = () => console.log('[vybit-addon] overlay.js loaded successfully');
+      script.onerror = (err) => console.error('[vybit-addon] overlay.js FAILED to load', err);
+      document.head.appendChild(script);
+      injected = true;
+    }
+
+    return StoryFn();
+  },
+];
+
+const channel = addons.getChannel();
+let lastStoryId: string | undefined;
+
+channel.on('storyRendered', (storyId?: string) => {
+  // Only reset selection on actual story navigation, not HMR updates
+  if (storyId && storyId === lastStoryId) return;
+  lastStoryId = storyId;
+  window.postMessage({ type: 'STORYBOOK_STORY_RENDERED' }, '*');
+});