@bitovi/vybit 0.13.2 → 0.13.4

package/README.md

@@ -2,7 +2,10 @@
 
 Change designs, draw mockups, provide suggestions, and report bugs __in your browser__ and send them to your favorite coding agent (Claude, Cursor, Copilot, etc) to be implemented. VyBit works with React or Angular apps built with Tailwind v3 or v4. 
 
-<img width="1453" height="903" alt="Cursor_and_Carton_Case_Management" src="https://github.com/user-attachments/assets/59b8e280-a827-4fa0-95e3-6c350afacbc9" />
+[Watch a video going over its features](https://www.youtube.com/watch?v=dE2rYcyC2xk)
+
+[![Watch the video](https://github.com/user-attachments/assets/99961c66-e2c9-48e3-9e7d-c23d6eda37ca)](https://www.youtube.com/watch?v=dE2rYcyC2xk)
+
 
 `VyBit` changes how you can design and build an app or website. Instead of building your design system and page designs in Sketch or Figma and then implementing it in code, you:
 
@@ -12,12 +15,13 @@ Change designs, draw mockups, provide suggestions, and report bugs __in your bro
 | 2    | __Use VyBit to fine-tune your design system in Storybook__ - Adjust colors, spacing, shadows, layout and more | <img  alt="image" src="https://github.com/user-attachments/assets/79ca04be-db8f-458f-8632-87cc040875db" />    |
 | 3a   | __Use VyBit to design features__ - drop your design system components into pages | <img width="1481" height="922" alt="image" src="https://github.com/user-attachments/assets/415acdb7-102a-4c31-910b-10536c59ee4a" /> |
 | 3b  | __Use VyBit to design features__ -  sketch a feature with the design canvas | <img width="1482" height="924" alt="image" src="https://github.com/user-attachments/assets/924e9733-baf6-4492-b9da-05fd27c2df93" /> | 
-| 3c | __Use VyBit to report bugs__ - send recent errors, console.logs, DOM snapshots, and events | Image Coming Soon |
+| 3c | __Use VyBit to report bugs__ - send recent errors, console.logs, DOM snapshots, and events | <img width="1482" height="1080" alt="Untitled Project" src="https://github.com/user-attachments/assets/7754ccb4-0d4c-4f02-8ea3-dca45943fd9a" /> |
 | 4 | Add text or voice messages for extra context | <img width="376" height="261" alt="image" src="https://github.com/user-attachments/assets/546ea987-a0ad-4809-85c6-52fb91fb987e" /> | 
 
 Plus, VyBit always knows what page, components, and elements you're editing, making it easier for agents to know exactly what you want!
 
 
+
 ## Installation
 
 To use VyBit:

package/overlay/dist/overlay.js

@@ -1041,6 +1041,7 @@ ${pad}</${tag}>`;
         componentName: msg.componentName,
         storyId: msg.storyId,
         ghostHtml: msg.ghostHtml,
+        ghostCss: msg.ghostCss ?? "",
         componentPath: msg.componentPath ?? "",
         componentArgs: msg.args ?? {}
       },
@@ -1048,6 +1049,71 @@ ${pad}</${tag}>`;
       `Place: ${msg.componentName}`
     );
   }
+  function placeAtLockedInsert(msg) {
+    if (!locked.target || !locked.position) return false;
+    const target = locked.target;
+    const position = locked.position;
+    const template = document.createElement("template");
+    template.innerHTML = msg.ghostHtml.trim();
+    const inserted = template.content.firstElementChild;
+    if (!inserted) return false;
+    inserted.dataset.twDroppedComponent = msg.componentName;
+    switch (position) {
+      case "before":
+        target.insertAdjacentElement("beforebegin", inserted);
+        break;
+      case "after":
+        target.insertAdjacentElement("afterend", inserted);
+        break;
+      case "first-child":
+        target.insertAdjacentElement("afterbegin", inserted);
+        break;
+      case "last-child":
+        target.appendChild(inserted);
+        break;
+    }
+    if (msg.ghostCss) injectGhostCss(msg.componentName, msg.ghostCss);
+    const targetSelector = buildSelector(target);
+    const isGhostTarget = !!target.dataset.twDroppedComponent;
+    const ghostTargetPatchId = target.dataset.twDroppedPatchId;
+    const ghostTargetName = target.dataset.twDroppedComponent;
+    const ghostAncestor = !isGhostTarget ? findGhostAncestor(target) : null;
+    const effectiveGhostName = isGhostTarget ? ghostTargetName : ghostAncestor?.dataset.twDroppedComponent;
+    const effectiveGhostPatchId = isGhostTarget ? ghostTargetPatchId : ghostAncestor?.dataset.twDroppedPatchId;
+    const context = effectiveGhostName ? `Place "${msg.componentName}" ${position} the <${effectiveGhostName} /> component (pending insertion from an earlier drop)` : buildContext(target, "", "", /* @__PURE__ */ new Map());
+    let parentComponent;
+    const fiber = getFiber(target);
+    if (fiber) {
+      const boundary = findComponentBoundary(fiber);
+      if (boundary) parentComponent = { name: boundary.componentName };
+    }
+    const patch = {
+      id: crypto.randomUUID(),
+      kind: "component-drop",
+      elementKey: targetSelector,
+      status: "staged",
+      originalClass: "",
+      newClass: "",
+      property: "component-drop",
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      component: { name: msg.componentName },
+      target: isGhostTarget ? { tag: ghostTargetName?.toLowerCase() ?? "unknown", classes: "", innerText: "" } : { tag: target.tagName.toLowerCase(), classes: target.className, innerText: target.innerText.slice(0, 100) },
+      ghostHtml: msg.ghostHtml,
+      ghostCss: msg.ghostCss || void 0,
+      componentStoryId: msg.storyId,
+      componentPath: msg.componentPath || void 0,
+      componentArgs: Object.keys(msg.args ?? {}).length > 0 ? msg.args : void 0,
+      parentComponent,
+      insertMode: position,
+      context,
+      ...effectiveGhostPatchId ? { targetPatchId: effectiveGhostPatchId, targetComponentName: effectiveGhostName } : {}
+    };
+    inserted.dataset.twDroppedPatchId = patch.id;
+    send({ type: "COMPONENT_DROPPED", patch });
+    sendTo("panel", { type: "COMPONENT_DISARMED" });
+    clearLockedInsert();
+    return true;
+  }
   function cancelInsert() {
     cleanup();
   }
@@ -1059,6 +1125,9 @@ ${pad}</${tag}>`;
     inserted.dataset.twDroppedComponent = msg.componentName;
     target.insertAdjacentElement("beforebegin", inserted);
     target.style.display = "none";
+    if (msg.ghostCss) {
+      injectGhostCss(msg.componentName, msg.ghostCss);
+    }
     const targetSelector = buildSelector(target);
     const isGhostTarget = !!target.dataset.twDroppedComponent;
     const ghostTargetPatchId = target.dataset.twDroppedPatchId;
@@ -1089,6 +1158,7 @@ ${pad}</${tag}>`;
         innerText: target.innerText.slice(0, 100)
       },
       ghostHtml: msg.ghostHtml,
+      ghostCss: msg.ghostCss || void 0,
       componentStoryId: msg.storyId,
       componentPath: msg.componentPath || void 0,
       componentArgs: Object.keys(msg.args ?? {}).length > 0 ? msg.args : void 0,
@@ -1487,7 +1557,7 @@ ${pad}</${tag}>`;
     e.preventDefault();
     e.stopPropagation();
     if (mode.kind !== "component-insert") return;
-    const { componentName: cName, storyId: sId, ghostHtml: gHtml, componentPath: cPath, componentArgs: cArgs } = mode;
+    const { componentName: cName, storyId: sId, ghostHtml: gHtml, ghostCss: gCss, componentPath: cPath, componentArgs: cArgs } = mode;
     const template = document.createElement("template");
     template.innerHTML = gHtml.trim();
     const inserted = template.content.firstElementChild;
@@ -1513,6 +1583,9 @@ ${pad}</${tag}>`;
         target.appendChild(inserted);
         break;
     }
+    if (gCss) {
+      injectGhostCss(cName, gCss);
+    }
     const targetSelector = buildSelector(target);
     const isGhostTarget = !!target.dataset.twDroppedComponent;
     const ghostTargetPatchId = target.dataset.twDroppedPatchId;
@@ -1543,6 +1616,7 @@ ${pad}</${tag}>`;
         innerText: target.innerText.slice(0, 100)
       },
       ghostHtml: gHtml,
+      ghostCss: gCss || void 0,
       componentStoryId: sId,
       componentPath: cPath || void 0,
       componentArgs: Object.keys(cArgs).length > 0 ? cArgs : void 0,
@@ -1594,6 +1668,15 @@ ${pad}</${tag}>`;
     dom.currentTarget = null;
     dom.currentPosition = null;
   }
+  function injectGhostCss(componentName, css2) {
+    const id = `vybit-ghost-css-${componentName}`;
+    const existing = document.getElementById(id);
+    if (existing) existing.remove();
+    const style = document.createElement("style");
+    style.id = id;
+    style.textContent = css2;
+    document.head.appendChild(style);
+  }
 
   // node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
   var min = Math.min;
@@ -6882,7 +6965,7 @@ ${pad}</${tag}>`;
         req.onsuccess = () => resolve(req.result);
         req.onerror = () => reject(req.error);
       });
-      await this.pruneIfNeeded();
+      await this.pruneIfNeeded().catch((err) => console.warn("[SnapshotStore] pruneIfNeeded failed:", err));
       return id;
     }
     /** Get a single snapshot by ID. */
@@ -7416,8 +7499,10 @@ ${pad}</${tag}>`;
     return hex;
   }
   async function clickHandler(e) {
+    console.log("[overlay-debug] clickHandler fired", { target: e.target?.tagName, selectModeOn: state.selectModeOn, active: state.active });
     const composed = e.composedPath();
     if (composed.some((el) => el === state.shadowHost)) {
+      console.log("[overlay-debug] click ignored: shadowHost");
       return;
     }
     if (isActive()) return;
@@ -7539,6 +7624,7 @@ ${pad}</${tag}>`;
     }
   }
   function setSelectMode2(on) {
+    console.log("[overlay-debug] setSelectMode", on, "active:", state.active, "currentMode:", state.currentMode);
     state.selectModeOn = on;
     if (on) {
       document.documentElement.style.cursor = "crosshair";
@@ -7626,7 +7712,7 @@ ${pad}</${tag}>`;
   }
   function init() {
     const params = new URLSearchParams(location.search);
-    if (params.get("viewMode") === "story" || params.get("vybit-ghost") === "1") return;
+    if (params.get("vybit-ghost") === "1") return;
     state.shadowHost = document.createElement("div");
     state.shadowHost.id = "tw-visual-editor-host";
     state.shadowHost.style.cssText = css(SHADOW_HOST);
@@ -7695,6 +7781,7 @@ ${pad}</${tag}>`;
     const wsUrl = SERVER_ORIGIN.replace(/^http/, "ws");
     connect(wsUrl);
     onMessage((msg) => {
+      console.log("[overlay-debug] WS message from panel:", msg.type, msg);
       if (msg.type === "TOGGLE_SELECT_MODE") {
         if (msg.active) {
           state.active = true;
@@ -7894,8 +7981,11 @@ ${pad}</${tag}>`;
           } else {
             armElementSelect(`Replace: ${msg.componentName}`, state.shadowHost, doReplace);
           }
-        } else {
+        } else if (!placeAtLockedInsert(msg)) {
           armInsert(msg, state.shadowHost);
+        } else {
+          clearHighlights();
+          clearSelectionState();
         }
       } else if (msg.type === "COMPONENT_DISARM") {
         cancelInsert();

package/package.json

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