@bitovi/vybit 0.8.2 → 0.9.1

package/shared/types.ts

@@ -1,9 +1,34 @@
 // Shared types for the PATCH protocol.
 // Imported by overlay (esbuild), panel (Vite), and server (tsx).
 
+/** Cached ghost HTML + host styles for instant component preview placeholders. */
+export interface GhostCacheEntry {
+  storyId: string;
+  argsHash: string;
+  ghostHtml: string;
+  hostStyles: Record<string, string>;
+  storyBackground?: string;
+  componentName: string;
+  componentPath?: string;
+  extractedAt: number;
+}
+
 export type ContainerName = 'modal' | 'popover' | 'sidebar' | 'popup';
 
-export type PatchKind = 'class-change' | 'message' | 'design';
+/** A component placed on the Fabric.js design canvas */
+export interface CanvasComponent {
+  componentName: string;
+  componentPath?: string;       // e.g. './src/components/Button.tsx'
+  storyId?: string;
+  args?: Record<string, unknown>;
+  // Position/size on the canvas (px, relative to canvas top-left)
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export type PatchKind = 'class-change' | 'message' | 'design' | 'component-drop';
 
 export type PatchStatus = 'staged' | 'committed' | 'implementing' | 'implemented' | 'error';
 
@@ -30,6 +55,15 @@ export interface Patch {
   insertMode?: string;       // before | after | first-child | last-child
   canvasWidth?: number;
   canvasHeight?: number;
+  canvasComponents?: CanvasComponent[]; // Components placed on the design canvas
+  // Component-drop fields (used when kind === 'component-drop'):
+  ghostHtml?: string;        // HTML of the dropped component (overlay preview only — stripped from MCP response)
+  componentStoryId?: string; // Storybook story ID
+  componentPath?: string;    // Source file of the component, e.g. './src/components/Button.tsx'
+  componentArgs?: Record<string, unknown>; // Props the user configured before dropping
+  parentComponent?: { name: string }; // React component that contains the drop target
+  targetPatchId?: string;    // If target is a ghost from an earlier drop, references that patch
+  targetComponentName?: string; // Name of the ghost component being referenced
   // Commit reference:
   commitId?: string;         // Set when committed into a Commit
 }
@@ -57,6 +91,12 @@ export interface PatchSummary {
   errorMessage?: string;
   message?: string;
   image?: string;
+  canvasComponents?: CanvasComponent[];
+  // Component-drop display fields:
+  insertMode?: string;
+  parentComponent?: { name: string };
+  targetComponentName?: string;
+  targetPatchId?: string;
 }
 
 export interface CommitSummary {
@@ -270,6 +310,7 @@ export interface DesignSubmitMessage {
   insertMode: InsertMode;
   canvasWidth: number;
   canvasHeight: number;
+  canvasComponents?: CanvasComponent[];
 }
 
 /** Design iframe → Overlay: close the canvas wrapper */
@@ -282,6 +323,44 @@ export interface ClosePanelMessage {
   type: 'CLOSE_PANEL';
 }
 
+/** Overlay → Server: story changed in Storybook, clear panel selection */
+export interface ResetSelectionMessage {
+  type: 'RESET_SELECTION';
+}
+
+// ---------------------------------------------------------------------------
+// Component arm-and-place messages
+// ---------------------------------------------------------------------------
+
+/** Panel → Overlay: user armed a component for placement from the Draw tab */
+export interface ComponentArmMessage {
+  type: 'COMPONENT_ARM';
+  to: 'overlay';
+  componentName: string;
+  storyId: string;
+  ghostHtml: string;
+  componentPath?: string;  // Source file path from Storybook index, e.g. './src/components/Button.tsx'
+  args?: Record<string, unknown>; // Current prop values from ArgsForm
+}
+
+/** Panel → Overlay: user cancelled the armed state (panel click or escape) */
+export interface ComponentDisarmMessage {
+  type: 'COMPONENT_DISARM';
+  to: 'overlay';
+}
+
+/** Overlay → Panel: overlay has disarmed (user placed or pressed Escape in app) */
+export interface ComponentDisarmedMessage {
+  type: 'COMPONENT_DISARMED';
+  to: 'panel';
+}
+
+/** Overlay → Server: component was placed, stage a patch */
+export interface ComponentDroppedMessage {
+  type: 'COMPONENT_DROPPED';
+  patch: Patch;
+}
+
 // ---------------------------------------------------------------------------
 // Union types
 // ---------------------------------------------------------------------------
@@ -296,8 +375,10 @@ export type PanelToOverlay =
   | SwitchContainerMessage
   | InsertDesignCanvasMessage
   | CaptureScreenshotMessage
-  | ClosePanelMessage;
-export type OverlayToServer = PatchStagedMessage;
+  | ClosePanelMessage
+  | ComponentArmMessage
+  | ComponentDisarmMessage;
+export type OverlayToServer = PatchStagedMessage | ComponentDroppedMessage | ResetSelectionMessage;
 export type PanelToServer = PatchCommitMessage | MessageStageMessage;
 export type ClientToServer =
   | RegisterMessage
@@ -306,10 +387,13 @@ export type ClientToServer =
   | MessageStageMessage
   | DesignSubmitMessage
   | DesignCloseMessage
+  | ComponentDroppedMessage
+  | ResetSelectionMessage
   | PingMessage;
 export type ServerToClient =
   | PongMessage
   | QueueUpdateMessage
+  | ResetSelectionMessage
   | PatchUpdateMessage
   | PatchImplementingMessage
   | PatchImplementedMessage
@@ -336,5 +420,10 @@ export type AnyMessage =
   | DesignSubmitMessage
   | DesignCloseMessage
   | ClosePanelMessage
+  | ComponentArmMessage
+  | ComponentDisarmMessage
+  | ComponentDisarmedMessage
+  | ComponentDroppedMessage
+  | ResetSelectionMessage
   | PingMessage
   | PongMessage;

package/storybook-addon/index.js

@@ -0,0 +1 @@
+module.exports = require('./preset');

package/storybook-addon/manager.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { addons, types } from '@storybook/manager-api';
+import { AddonPanel } from '@storybook/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}>
+          <iframe
+            src={`${serverUrl}/panel/`}
+            style={{ width: '100%', height: '100%', border: 'none' }}
+            title="Vybit Panel"
+          />
+        </AddonPanel>
+      );
+    },
+  });
+});

package/storybook-addon/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@bitovi/vybit-storybook-addon",
+  "version": "0.0.0",
+  "private": true,
+  "type": "commonjs",
+  "description": "Storybook addon wiring for Vybit — overlay injection + panel registration",
+  "peerDependencies": {
+    "storybook": "^8.0.0"
+  }
+}

package/storybook-addon/preset.js

@@ -0,0 +1,10 @@
+const { join } = require('path');
+
+module.exports = {
+  previewAnnotations(entry = []) {
+    return [...entry, join(__dirname, './preview.ts')];
+  },
+  managerEntries(entry = []) {
+    return [...entry, join(__dirname, './manager.tsx')];
+  },
+};

package/storybook-addon/preview.ts

@@ -0,0 +1,29 @@
+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) {
+      const script = document.createElement('script');
+      script.src = `${serverUrl}/overlay.js`;
+      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' }, '*');
+});