@bitovi/vybit 0.12.0 → 0.13.0

package/overlay/dist/overlay.js

@@ -44,11 +44,6 @@
   function sendTo(role, data) {
     send({ ...data, to: role });
   }
-  window.addEventListener("message", (event) => {
-    if (event.data?.type === "STORYBOOK_STORY_RENDERED") {
-      send({ type: "RESET_SELECTION" });
-    }
-  });
 
   // overlay/src/context.ts
   function buildContext(target, oldClass, newClass, originalClassMap) {
@@ -686,6 +681,73 @@ ${pad}</${tag}>`;
   }
   .msg-send svg { width: 12px; height: 12px; }
 
+  /* \u2500\u2500 Mic button (voice messages) \u2500\u2500 */
+  .mic-btn {
+    width: 24px;
+    height: 24px;
+    border-radius: 5px;
+    border: none;
+    background: transparent;
+    color: #888;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: all 120ms ease-out;
+    padding: 0;
+  }
+  .mic-btn:hover { color: #e5e5e5; background: rgba(255,255,255,0.06); }
+  .mic-btn svg { width: 13px; height: 13px; }
+  .mic-btn.listening {
+    background: #F5532D;
+    color: white;
+    animation: mic-pulse 1.5s ease-in-out infinite;
+  }
+  .mic-btn.error { color: #F5532D; }
+  @keyframes mic-pulse {
+    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 83, 45, 0.4); }
+    50% { box-shadow: 0 0 0 4px rgba(245, 83, 45, 0); }
+  }
+  /* \u2500\u2500 Mic-blocked banner \u2500\u2500 */
+  .mic-banner {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 9999999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    padding: 10px 16px;
+    background: #F5532D;
+    color: white;
+    font-family: 'Inter', system-ui, sans-serif;
+    font-size: 13px;
+    font-weight: 500;
+    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
+    opacity: 0;
+    transform: translateY(-100%);
+    transition: opacity 0.25s ease-out, transform 0.25s ease-out;
+  }
+  .mic-banner.visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  .mic-banner-dismiss {
+    background: none;
+    border: none;
+    color: white;
+    font-size: 18px;
+    cursor: pointer;
+    padding: 0 4px;
+    line-height: 1;
+    opacity: 0.8;
+    flex-shrink: 0;
+  }
+  .mic-banner-dismiss:hover { opacity: 1; }
+
   /* \u2500\u2500 Text editing action bar \u2500\u2500 */
   .text-action-bar {
     position: fixed;
@@ -1524,6 +1586,9 @@ ${pad}</${tag}>`;
     bottom: "top",
     top: "bottom"
   };
+  function clamp(start, value, end) {
+    return max(start, min(value, end));
+  }
   function evaluate(value, param) {
     return typeof value === "function" ? value(param) : value;
   }
@@ -2011,6 +2076,79 @@ ${pad}</${tag}>`;
       }
     };
   };
+  var shift = function(options) {
+    if (options === void 0) {
+      options = {};
+    }
+    return {
+      name: "shift",
+      options,
+      async fn(state2) {
+        const {
+          x,
+          y,
+          placement,
+          platform: platform2
+        } = state2;
+        const {
+          mainAxis: checkMainAxis = true,
+          crossAxis: checkCrossAxis = false,
+          limiter = {
+            fn: (_ref) => {
+              let {
+                x: x2,
+                y: y2
+              } = _ref;
+              return {
+                x: x2,
+                y: y2
+              };
+            }
+          },
+          ...detectOverflowOptions
+        } = evaluate(options, state2);
+        const coords = {
+          x,
+          y
+        };
+        const overflow = await platform2.detectOverflow(state2, detectOverflowOptions);
+        const crossAxis = getSideAxis(getSide(placement));
+        const mainAxis = getOppositeAxis(crossAxis);
+        let mainAxisCoord = coords[mainAxis];
+        let crossAxisCoord = coords[crossAxis];
+        if (checkMainAxis) {
+          const minSide = mainAxis === "y" ? "top" : "left";
+          const maxSide = mainAxis === "y" ? "bottom" : "right";
+          const min2 = mainAxisCoord + overflow[minSide];
+          const max2 = mainAxisCoord - overflow[maxSide];
+          mainAxisCoord = clamp(min2, mainAxisCoord, max2);
+        }
+        if (checkCrossAxis) {
+          const minSide = crossAxis === "y" ? "top" : "left";
+          const maxSide = crossAxis === "y" ? "bottom" : "right";
+          const min2 = crossAxisCoord + overflow[minSide];
+          const max2 = crossAxisCoord - overflow[maxSide];
+          crossAxisCoord = clamp(min2, crossAxisCoord, max2);
+        }
+        const limitedCoords = limiter.fn({
+          ...state2,
+          [mainAxis]: mainAxisCoord,
+          [crossAxis]: crossAxisCoord
+        });
+        return {
+          ...limitedCoords,
+          data: {
+            x: limitedCoords.x - x,
+            y: limitedCoords.y - y,
+            enabled: {
+              [mainAxis]: checkMainAxis,
+              [crossAxis]: checkCrossAxis
+            }
+          }
+        };
+      }
+    };
+  };
 
   // node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
   function hasWindow() {
@@ -2761,6 +2899,7 @@ ${pad}</${tag}>`;
     };
   }
   var offset2 = offset;
+  var shift2 = shift;
   var flip2 = flip;
   var computePosition2 = (reference, floating, options) => {
     const cache2 = /* @__PURE__ */ new Map();
@@ -3239,6 +3378,117 @@ ${pad}</${tag}>`;
     }
   };
 
+  // overlay/src/angular-detect.ts
+  function getNgApi() {
+    const ng = window.ng;
+    if (ng?.getComponent && ng?.getOwningComponent) return ng;
+    return null;
+  }
+  function isAngularElement(el) {
+    if ("__ngContext__" in el) return true;
+    return Array.from(el.attributes).some(
+      (a) => a.name.startsWith("_nghost-") || a.name.startsWith("_ngcontent-")
+    );
+  }
+  function findAngularComponentBoundary(el) {
+    const ng = getNgApi();
+    if (ng) {
+      const component = ng.getComponent(el) ?? ng.getOwningComponent(el);
+      if (component) {
+        const raw = component.constructor?.name || "Unknown";
+        const name = raw.replace(/^_+/, "");
+        return {
+          componentType: component.constructor,
+          componentName: name,
+          componentFiber: component
+          // reuse field for the component instance
+        };
+      }
+    }
+    const hostAttr = findAttrStartingWith(el, "_nghost-");
+    if (hostAttr) {
+      return {
+        componentType: el.tagName.toLowerCase(),
+        componentName: formatTagAsComponentName(el.tagName),
+        componentFiber: el
+      };
+    }
+    const contentAttr = findAttrStartingWith(el, "_ngcontent-");
+    if (contentAttr) {
+      const suffix = contentAttr.name.replace("_ngcontent-", "");
+      const host = el.closest(`[_nghost-${suffix}]`);
+      if (host) {
+        return {
+          componentType: host.tagName.toLowerCase(),
+          componentName: formatTagAsComponentName(host.tagName),
+          componentFiber: host
+        };
+      }
+    }
+    return null;
+  }
+  function findAllAngularInstances(tagOrType) {
+    const ng = getNgApi();
+    if (ng && typeof tagOrType === "function") {
+      const sampleEl = document.querySelector(tagOrType.\u0275cmp?.selectors?.[0]?.[0] ?? "");
+      if (!sampleEl) {
+        return findAllAngularInstancesByClass(ng, tagOrType);
+      }
+      return Array.from(document.querySelectorAll(sampleEl.tagName.toLowerCase()));
+    }
+    if (typeof tagOrType === "string") {
+      return Array.from(document.querySelectorAll(tagOrType));
+    }
+    return [];
+  }
+  function findAllAngularInstancesByClass(ng, componentClass) {
+    const results = [];
+    const allCustomElements = document.querySelectorAll("*");
+    for (const el of allCustomElements) {
+      const comp = ng.getComponent(el);
+      if (comp instanceof componentClass) {
+        results.push(el);
+      }
+    }
+    return results;
+  }
+  function collectAngularComponentDOMNodes(hostEl, tagName) {
+    const hostAttr = findAttrStartingWith(hostEl, "_nghost-");
+    if (!hostAttr) {
+      return Array.from(hostEl.querySelectorAll(tagName.toLowerCase()));
+    }
+    const suffix = hostAttr.name.replace("_nghost-", "");
+    return Array.from(
+      document.querySelectorAll(
+        `${tagName.toLowerCase()}[_ngcontent-${suffix}]`
+      )
+    );
+  }
+  function findAttrStartingWith(el, prefix) {
+    return Array.from(el.attributes).find((a) => a.name.startsWith(prefix)) ?? null;
+  }
+  function formatTagAsComponentName(tagName) {
+    const lower = tagName.toLowerCase();
+    const stripped = lower.replace(/^app-/, "");
+    const pascal = stripped.split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join("");
+    return pascal + "Component";
+  }
+
+  // overlay/src/framework-detect.ts
+  var cachedFramework = null;
+  function detectComponent(el) {
+    const fiber = getFiber(el);
+    if (fiber) {
+      cachedFramework = "react";
+      return findComponentBoundary(fiber);
+    }
+    if (isAngularElement(el)) {
+      cachedFramework = "angular";
+      return findAngularComponentBoundary(el);
+    }
+    return null;
+  }
+
   // overlay/src/design-canvas/vb-design-canvas.ts
   var VbDesignCanvas = class extends HTMLElement {
     static observedAttributes = ["src", "width", "height", "min-height"];
@@ -3286,6 +3536,7 @@ ${pad}</${tag}>`;
       this.iframe.allow = "microphone";
       this.iframe.style.cssText = css(DESIGN_CANVAS_IFRAME);
       this.iframe.addEventListener("load", () => {
+        console.log("[tw-debug] vb-design-canvas iframe load event fired, src=", this.iframe.src);
         this.dispatchEvent(new CustomEvent("vb-canvas-ready", {
           bubbles: true,
           detail: { iframe: this.iframe }
@@ -3338,7 +3589,9 @@ ${pad}</${tag}>`;
     /** Sync observed attributes to internal DOM. */
     syncAttributes() {
       const src = this.getAttribute("src");
+      console.log("[tw-debug] vb-design-canvas syncAttributes, src=", src, "current iframe.src=", this.iframe.src);
       if (src && this.iframe.src !== src) {
+        console.log("[tw-debug] vb-design-canvas setting iframe.src =", src);
         this.iframe.src = src;
       }
       const w = this.getAttribute("width");
@@ -3379,6 +3632,7 @@ ${pad}</${tag}>`;
   var TEXT_SVG = `<svg viewBox="0 0 16 16" fill="currentColor"><path d="M14.895,2.553l-1-2c-.169-.339-.516-.553-.895-.553H3c-.379,0-.725,.214-.895,.553L1.105,2.553c-.247,.494-.047,1.095,.447,1.342,.496,.248,1.095,.046,1.342-.447l.724-1.447h3.382V14h-2c-.552,0-1,.448-1,1s.448,1,1,1h6c.552,0,1-.448,1-1s-.448-1-1-1h-2V2h3.382l.724,1.447c.175,.351,.528,.553,.896,.553,.15,0,.303-.034,.446-.105,.494-.247,.694-.848,.447-1.342Z"/></svg>`;
   var REPLACE_SVG = `<svg viewBox="0 0 16 16" fill="currentColor"><path d="M6,15H1a1,1,0,0,1-1-1V2A1,1,0,0,1,1,1H6A1,1,0,0,1,7,2V14A1,1,0,0,1,6,15Z"/><rect x="9" y="6" width="2" height="4"/><path d="M14,13H11V12H9v2a1,1,0,0,0,1,1h5a1,1,0,0,0,1-1V12H14Z"/><path d="M15,1H10A1,1,0,0,0,9,2V4h2V3h3V4h2V2A1,1,0,0,0,15,1Z"/><rect x="14" y="6" width="2" height="4"/></svg>`;
   var SEND_SVG = `<svg viewBox="0 0 16 16" fill="currentColor"><path d="M15.7,7.3l-14-7C1.4,0.1,1.1,0.1,0.8,0.3C0.6,0.4,0.5,0.7,0.5,1l1.8,6H9v2H2.3L0.5,15c-0.1,0.3,0,0.6,0.2,0.7C0.8,15.9,1,16,1.1,16c0.1,0,0.3,0,0.4-0.1l14-7C15.8,8.7,16,8.4,16,8S15.8,7.3,15.7,7.3z"/></svg>`;
+  var MIC_SVG = `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 1a4 4 0 0 1 4 4v7a4 4 0 0 1-8 0V5a4 4 0 0 1 4-4zm-1.5 4v7a1.5 1.5 0 0 0 3 0V5a1.5 1.5 0 0 0-3 0zM6 11a1 1 0 0 1 1 1 5 5 0 0 0 10 0 1 1 0 1 1 2 0 7 7 0 0 1-6 6.93V21h2a1 1 0 1 1 0 2H9a1 1 0 1 1 0-2h2v-2.07A7 7 0 0 1 5 12a1 1 0 0 1 1-1z"/></svg>`;
   var VYBIT_LOGO_SVG = `<svg width="26" height="27" viewBox="0 0 210 221" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path class="eb-fill" d="M141.54 137.71L103.87 140.38C102.98 140.44 102.2 140.97 101.8 141.77C101.41 142.57 101.47 143.51 101.96 144.25C102.27 144.72 109.46 155.39 121.96 155.39C122.3 155.39 122.65 155.39 123 155.37C138.61 154.64 143.83 141.66 144.05 141.11C144.36 140.31 144.24 139.41 143.73 138.72C143.22 138.03 142.4 137.65 141.54 137.71Z"/>
     <path class="eb-eye-l eb-fill" d="M80.6401 93.03C76.7801 93.22 73.8 96.5 73.99 100.36L74.7501 115.96C74.9401 119.85 78.2701 122.84 82.1501 122.61C85.9801 122.38 88.9101 119.11 88.7301 115.28L87.9701 99.68C87.7801 95.82 84.5001 92.84 80.6401 93.03Z"/>
@@ -3422,13 +3676,23 @@ ${pad}</${tag}>`;
   function findExactMatches(clickedEl, shadowHost) {
     const classes = parseClassList(typeof clickedEl.className === "string" ? clickedEl.className : "");
     const tag = clickedEl.tagName;
-    const fiber = getFiber(clickedEl);
-    const boundary = fiber ? findComponentBoundary(fiber) : null;
+    const boundary = detectComponent(clickedEl);
     const componentName = boundary?.componentName ?? null;
+    const fiber = getFiber(clickedEl);
+    const reactBoundary = fiber ? findComponentBoundary(fiber) : null;
     let exactMatches;
-    if (boundary) {
-      const rootFiber = getRootFiberFrom(boundary.componentFiber) ?? getRootFiber();
-      const allNodes = rootFiber ? collectComponentDOMNodes(rootFiber, boundary.componentType, tag) : [];
+    if (reactBoundary) {
+      const rootFiber = getRootFiberFrom(reactBoundary.componentFiber) ?? getRootFiber();
+      const allNodes = rootFiber ? collectComponentDOMNodes(rootFiber, reactBoundary.componentType, tag) : [];
+      exactMatches = allNodes.filter(
+        (n) => n.tagName === tag && n.className === clickedEl.className
+      );
+    } else if (boundary && isAngularElement(clickedEl)) {
+      const instances = findAllAngularInstances(boundary.componentType);
+      const allNodes = [];
+      for (const host of instances) {
+        allNodes.push(...collectAngularComponentDOMNodes(host, tag));
+      }
       exactMatches = allNodes.filter(
         (n) => n.tagName === tag && n.className === clickedEl.className
       );
@@ -3464,14 +3728,23 @@ ${pad}</${tag}>`;
     const tag = clickedEl.tagName;
     const refSet = new Set(classes);
     if (classes.length === 0) return [];
+    const boundary = detectComponent(clickedEl);
     const fiber = getFiber(clickedEl);
-    const boundary = fiber ? findComponentBoundary(fiber) : null;
+    const reactBoundary = fiber ? findComponentBoundary(fiber) : null;
     let candidates;
-    if (boundary) {
-      const rootFiber = getRootFiberFrom(boundary.componentFiber) ?? getRootFiber();
-      candidates = rootFiber ? collectComponentDOMNodes(rootFiber, boundary.componentType, tag) : [];
+    if (reactBoundary) {
+      const rootFiber = getRootFiberFrom(reactBoundary.componentFiber) ?? getRootFiber();
+      candidates = rootFiber ? collectComponentDOMNodes(rootFiber, reactBoundary.componentType, tag) : [];
       candidates = candidates.filter((n) => !exactMatchSet.has(n));
-      console.log("[grouping] React path \u2014 component:", boundary.componentName, "tag:", tag, "candidates:", candidates.length, candidates.map((n) => n.className.split(" ")[0]));
+      console.log("[grouping] React path \u2014 component:", reactBoundary.componentName, "tag:", tag, "candidates:", candidates.length, candidates.map((n) => n.className.split(" ")[0]));
+    } else if (boundary && isAngularElement(clickedEl)) {
+      const instances = findAllAngularInstances(boundary.componentType);
+      const allNodes = [];
+      for (const host of instances) {
+        allNodes.push(...collectAngularComponentDOMNodes(host, tag));
+      }
+      candidates = allNodes.filter((n) => !exactMatchSet.has(n));
+      console.log("[grouping] Angular path \u2014 component:", boundary.componentName, "tag:", tag, "candidates:", candidates.length);
     } else {
       const seen = new Set(exactMatchSet);
       candidates = [];
@@ -3544,21 +3817,42 @@ ${pad}</${tag}>`;
   }
   function findSamePathElements(clickedEl) {
     const fiber = getFiber(clickedEl);
-    if (!fiber) return null;
-    const boundary = findComponentBoundary(fiber);
-    if (!boundary) return null;
-    const { label, path } = buildPathLabel(fiber, boundary);
-    const rootFiber = getRootFiberFrom(boundary.componentFiber) ?? getRootFiber();
-    if (!rootFiber) return null;
-    const instances = findAllInstances(rootFiber, boundary.componentType);
-    const elements = [];
-    for (const inst of instances) {
-      const node = resolvePathToDOM(inst, path);
-      if (node && !elements.includes(node)) {
-        elements.push(node);
+    if (fiber) {
+      const boundary = findComponentBoundary(fiber);
+      if (!boundary) return null;
+      const { label, path } = buildPathLabel(fiber, boundary);
+      const rootFiber = getRootFiberFrom(boundary.componentFiber) ?? getRootFiber();
+      if (!rootFiber) return null;
+      const instances = findAllInstances(rootFiber, boundary.componentType);
+      const elements = [];
+      for (const inst of instances) {
+        const node = resolvePathToDOM(inst, path);
+        if (node && !elements.includes(node)) {
+          elements.push(node);
+        }
+      }
+      return elements.length > 0 ? { elements, label } : null;
+    }
+    if (isAngularElement(clickedEl)) {
+      const boundary = detectComponent(clickedEl);
+      if (!boundary) return null;
+      const instances = findAllAngularInstances(boundary.componentType);
+      if (instances.length < 2) return null;
+      const tag = clickedEl.tagName;
+      const elements = [];
+      for (const host of instances) {
+        const nodes = collectAngularComponentDOMNodes(host, tag);
+        const match = nodes.find(
+          (n) => n.tagName === clickedEl.tagName && n.className === clickedEl.className
+        );
+        if (match && !elements.includes(match)) {
+          elements.push(match);
+        }
       }
+      const label = `${boundary.componentName} > ${tag.toLowerCase()}`;
+      return elements.length > 0 ? { elements, label } : null;
     }
-    return elements.length > 0 ? { elements, label } : null;
+    return null;
   }
 
   // overlay/src/patcher.ts
@@ -3811,13 +4105,52 @@ ${pad}</${tag}>`;
       clearHoverPreview();
       return;
     }
-    const fiber = getFiber(target);
-    const boundary = fiber ? findComponentBoundary(fiber) : null;
+    const boundary = detectComponent(target);
     const label = boundary?.componentName ?? target.tagName.toLowerCase();
     showHoverPreview(target, label);
   }
 
   // overlay/src/element-toolbar.ts
+  var SpeechRecognitionAPI = typeof window !== "undefined" ? window.SpeechRecognition ?? window.webkitSpeechRecognition ?? null : null;
+  var activeBanner = null;
+  var bannerTimeout = null;
+  function showMicBanner(message) {
+    if (activeBanner) {
+      activeBanner.remove();
+      activeBanner = null;
+    }
+    if (bannerTimeout) {
+      clearTimeout(bannerTimeout);
+      bannerTimeout = null;
+    }
+    const banner = document.createElement("div");
+    banner.className = "mic-banner";
+    const text = document.createElement("span");
+    text.textContent = message;
+    banner.appendChild(text);
+    const dismiss = document.createElement("button");
+    dismiss.className = "mic-banner-dismiss";
+    dismiss.textContent = "\xD7";
+    dismiss.addEventListener("click", () => {
+      banner.classList.remove("visible");
+      setTimeout(() => banner.remove(), 250);
+      activeBanner = null;
+      if (bannerTimeout) {
+        clearTimeout(bannerTimeout);
+        bannerTimeout = null;
+      }
+    });
+    banner.appendChild(dismiss);
+    state.shadowRoot.appendChild(banner);
+    activeBanner = banner;
+    requestAnimationFrame(() => banner.classList.add("visible"));
+    bannerTimeout = setTimeout(() => {
+      banner.classList.remove("visible");
+      setTimeout(() => banner.remove(), 250);
+      activeBanner = null;
+      bannerTimeout = null;
+    }, 8e3);
+  }
   var setSelectMode;
   var showToast;
   var onBrowseLocked;
@@ -3830,10 +4163,11 @@ ${pad}</${tag}>`;
     rebuildSelectionFromSources = deps2.rebuildSelectionFromSources;
     setAddMode = deps2.setAddMode;
   }
-  async function positionWithFlip(anchor, floating, placement = "top-start") {
+  async function positionWithFlip(anchor, floating, placement = "top-start", options) {
+    const middleware = options?.disableFlip ? [offset2(6)] : [offset2(6), flip2()];
     const { x, y, placement: resolved } = await computePosition2(anchor, floating, {
       placement,
-      middleware: [offset2(6), flip2()]
+      middleware
     });
     floating.style.left = `${x}px`;
     floating.style.top = `${y}px`;
@@ -3844,9 +4178,9 @@ ${pad}</${tag}>`;
     if (!msgRow) return;
     const msgPlacement = await positionWithFlip(targetEl, msgRow, "bottom-start");
     if (toolbarPlacement === "bottom-start" && msgPlacement === "bottom-start") {
-      await positionWithFlip(toolbar, msgRow, "bottom-start");
+      await positionWithFlip(toolbar, msgRow, "bottom-start", { disableFlip: true });
     } else if (toolbarPlacement === "top-start" && msgPlacement === "top-start") {
-      await positionWithFlip(toolbar, msgRow, "top-start");
+      await positionWithFlip(toolbar, msgRow, "top-start", { disableFlip: true });
     }
   }
   function showDrawButton(targetEl) {
@@ -3878,10 +4212,8 @@ ${pad}</${tag}>`;
         state.cachedExactMatches = null;
         state.manuallyAddedNodes = /* @__PURE__ */ new Set();
         state.addMode = false;
-        state.currentMode = "select";
-        state.currentTab = resolveTab();
-        sendTo("panel", { type: "MODE_CHANGED", mode: "select" });
-        setSelectMode(true);
+        setSelectMode(false);
+        sendTo("panel", { type: "MODE_CHANGED", mode: null });
       });
       selectGroup.appendChild(selectBtn);
       const innerSep = document.createElement("div");
@@ -3950,6 +4282,7 @@ ${pad}</${tag}>`;
       clearLockedInsert();
       revertPreview();
       clearHighlights();
+      setSelectMode(false);
       state.currentEquivalentNodes = [];
       state.currentTargetEl = null;
       state.currentBoundary = null;
@@ -3957,6 +4290,10 @@ ${pad}</${tag}>`;
       state.cachedExactMatches = null;
       state.manuallyAddedNodes = /* @__PURE__ */ new Set();
       state.addMode = false;
+      if (state.currentMode === "insert") {
+        sendTo("panel", { type: "MODE_CHANGED", mode: null });
+        return;
+      }
       state.currentMode = "insert";
       if (state.tabPreference === "design") state.tabPreference = "component";
       state.currentTab = resolveTab();
@@ -4008,20 +4345,79 @@ ${pad}</${tag}>`;
       placeBtn.innerHTML = `Place`;
       toolbar.appendChild(placeBtn);
     }
+    let msgRow;
+    msgRow = createMsgRow(state.currentBoundary, () => positionBothMenus(targetEl, toolbar, msgRow));
+    state.shadowRoot.appendChild(msgRow);
+    state.msgRowEl = msgRow;
+    positionBothMenus(targetEl, toolbar, msgRow);
+  }
+  function getCanvasMessageText() {
+    const textarea = canvasMsgRow?.querySelector("textarea");
+    return textarea?.value.trim() ?? "";
+  }
+  function createMsgRow(boundary, onReposition, options) {
+    const showSendButton = options?.showSendButton ?? true;
     const msgRow = document.createElement("div");
     msgRow.className = "msg-row";
     msgRow.style.left = "0px";
     msgRow.style.top = "0px";
-    state.shadowRoot.appendChild(msgRow);
-    state.msgRowEl = msgRow;
     const msgInput = document.createElement("textarea");
     msgInput.rows = 1;
     msgInput.placeholder = "add your message";
     msgRow.appendChild(msgInput);
-    const msgSendBtn = document.createElement("button");
-    msgSendBtn.className = "msg-send";
-    msgSendBtn.innerHTML = SEND_SVG;
-    msgRow.appendChild(msgSendBtn);
+    let recognition = null;
+    let micBtn = null;
+    if (SpeechRecognitionAPI) {
+      micBtn = document.createElement("button");
+      micBtn.className = "mic-btn";
+      micBtn.title = "Record voice message";
+      micBtn.innerHTML = MIC_SVG;
+      msgRow.appendChild(micBtn);
+      micBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        if (recognition) {
+          recognition.stop();
+          return;
+        }
+        const baseText = msgInput.value;
+        recognition = new SpeechRecognitionAPI();
+        recognition.continuous = false;
+        recognition.interimResults = true;
+        recognition.lang = navigator.language || "en-US";
+        recognition.onresult = (event) => {
+          let transcript = "";
+          for (let i = 0; i < event.results.length; i++) {
+            transcript += event.results[i][0].transcript;
+          }
+          const separator = baseText && !baseText.endsWith("\n") ? "\n" : "";
+          msgInput.value = baseText + separator + transcript;
+          msgInput.style.height = "auto";
+          msgInput.style.height = msgInput.scrollHeight + "px";
+          onReposition();
+        };
+        recognition.onend = () => {
+          micBtn.classList.remove("listening");
+          recognition = null;
+        };
+        recognition.onerror = (event) => {
+          micBtn.classList.remove("listening");
+          if (event.error === "not-allowed" || event.error === "service-not-allowed") {
+            micBtn.classList.add("error");
+            showMicBanner("Microphone blocked \u2014 allow access in your browser's address bar");
+          }
+          recognition = null;
+        };
+        micBtn.classList.remove("error");
+        micBtn.classList.add("listening");
+        recognition.start();
+      });
+    }
+    const msgSendBtn = showSendButton ? document.createElement("button") : null;
+    if (msgSendBtn) {
+      msgSendBtn.className = "msg-send";
+      msgSendBtn.innerHTML = SEND_SVG;
+      msgRow.appendChild(msgSendBtn);
+    }
     function sendMessage() {
       const text = msgInput.value.trim();
       if (!text) return;
@@ -4030,15 +4426,15 @@ ${pad}</${tag}>`;
         type: "MESSAGE_STAGE",
         id,
         message: text,
-        elementKey: state.currentBoundary?.componentName ?? "",
-        component: state.currentBoundary ? { name: state.currentBoundary.componentName } : void 0
+        elementKey: boundary?.componentName ?? "",
+        component: boundary ? { name: boundary.componentName } : void 0
       });
       msgInput.value = "";
       msgInput.style.height = "auto";
-      positionBothMenus(targetEl, toolbar, msgRow);
+      onReposition();
       showToast("Message staged");
     }
-    msgSendBtn.addEventListener("click", (e) => {
+    msgSendBtn?.addEventListener("click", (e) => {
       e.stopPropagation();
       sendMessage();
     });
@@ -4054,10 +4450,45 @@ ${pad}</${tag}>`;
     msgInput.addEventListener("input", () => {
       msgInput.style.height = "auto";
       msgInput.style.height = msgInput.scrollHeight + "px";
-      positionBothMenus(targetEl, toolbar, msgRow);
+      onReposition();
     });
     msgRow.addEventListener("click", (e) => e.stopPropagation());
-    positionBothMenus(targetEl, toolbar, msgRow);
+    return msgRow;
+  }
+  var canvasMsgRow = null;
+  var canvasMsgRowObserver = null;
+  function showCanvasMessageRow(canvasWrapper, boundary, shadowRoot) {
+    hideCanvasMessageRow();
+    const msgRow = createMsgRow(boundary, () => positionCanvasMsgRow(canvasWrapper, msgRow), { showSendButton: false });
+    msgRow.setAttribute("data-canvas-anchor", "true");
+    shadowRoot.appendChild(msgRow);
+    canvasMsgRow = msgRow;
+    positionCanvasMsgRow(canvasWrapper, msgRow);
+    canvasMsgRowObserver = new ResizeObserver(() => {
+      positionCanvasMsgRow(canvasWrapper, msgRow);
+    });
+    canvasMsgRowObserver.observe(canvasWrapper);
+  }
+  function hideCanvasMessageRow() {
+    canvasMsgRowObserver?.disconnect();
+    canvasMsgRowObserver = null;
+    canvasMsgRow?.remove();
+    canvasMsgRow = null;
+  }
+  function positionCanvasMsgRow(canvasWrapper, msgRow) {
+    computePosition2(canvasWrapper, msgRow, {
+      placement: "bottom-start",
+      middleware: [
+        shift2({ padding: 8 }),
+        flip2()
+      ]
+    }).then(({ x, y }) => {
+      Object.assign(msgRow.style, {
+        position: "fixed",
+        left: `${x}px`,
+        top: `${y}px`
+      });
+    });
   }
   function showGroupPicker(anchorBtn, onClose, onCountChange) {
     if (state.pickerCloseHandler) {
@@ -5151,6 +5582,7 @@ ${pad}</${tag}>`;
     showToastFn = deps2.showToast;
   }
   function injectDesignCanvas(insertMode) {
+    console.log("[tw-debug] injectDesignCanvas called, insertMode=", insertMode, "currentTargetEl=", state.currentTargetEl, "currentBoundary=", state.currentBoundary);
     if (!state.currentTargetEl || !state.currentBoundary) {
       showToastFn("Select an element first");
       return;
@@ -5158,7 +5590,9 @@ ${pad}</${tag}>`;
     clearHighlights();
     const targetEl = state.currentTargetEl;
     const canvas = document.createElement("vb-design-canvas");
-    canvas.setAttribute("src", `${serverOrigin}/panel/?mode=design`);
+    const canvasSrc = `${serverOrigin}/panel/?mode=design`;
+    console.log("[tw-debug] creating vb-design-canvas, src=", canvasSrc, "targetEl=", targetEl, "insertMode=", insertMode);
+    canvas.setAttribute("src", canvasSrc);
     const wrapper = canvas.getWrapper();
     let replacedNodes = null;
     let replacedParent = null;
@@ -5193,7 +5627,10 @@ ${pad}</${tag}>`;
       parent: replacedParent,
       anchor: replacedAnchor
     });
+    requestAnimationFrame(() => showCanvasMessageRow(canvas.getWrapper(), state.currentBoundary, state.shadowRoot));
+    console.log("[tw-debug] canvas inserted into DOM, listening for vb-canvas-ready...");
     canvas.addEventListener("vb-canvas-ready", () => {
+      console.log("[tw-debug] vb-canvas-ready fired!");
       const contextMsg = {
         type: "ELEMENT_CONTEXT",
         componentName: state.currentBoundary?.componentName ?? "",
@@ -5276,6 +5713,7 @@ ${pad}</${tag}>`;
     parent.insertBefore(canvas, marker);
     marker.remove();
     state.designCanvasWrappers.push({ wrapper: canvas, replacedNodes, parent, anchor: canvas.nextSibling });
+    requestAnimationFrame(() => showCanvasMessageRow(canvas.getWrapper(), state.currentBoundary, state.shadowRoot));
     canvas.addEventListener("vb-canvas-ready", () => {
       const contextMsg = {
         type: "ELEMENT_CONTEXT",
@@ -5299,6 +5737,12 @@ ${pad}</${tag}>`;
       setTimeout(trySend, 200);
     });
   }
+  function removeAllDesignCanvases() {
+    for (const entry of state.designCanvasWrappers) {
+      entry.wrapper.remove();
+    }
+    state.designCanvasWrappers.length = 0;
+  }
   function handleDesignSubmitted(msg) {
     const lastEntry = state.designCanvasWrappers[state.designCanvasWrappers.length - 1];
     const last = lastEntry?.wrapper;
@@ -5315,6 +5759,11 @@ ${pad}</${tag}>`;
         last.appendChild(img);
       }
     }
+    const messageText = getCanvasMessageText();
+    if (messageText && msg.patchId) {
+      send({ type: "CANVAS_MESSAGE_ATTACH", patchId: msg.patchId, message: messageText });
+    }
+    hideCanvasMessageRow();
   }
   function handleDesignClose() {
     const last = state.designCanvasWrappers.pop();
@@ -5326,6 +5775,7 @@ ${pad}</${tag}>`;
       }
       last.wrapper.remove();
     }
+    hideCanvasMessageRow();
   }
 
   // overlay/src/recording/console-interceptor/console-interceptor.ts
@@ -6825,8 +7275,7 @@ ${pad}</${tag}>`;
   function onBrowseLocked2(target) {
     state.currentTargetEl = target;
     state.currentEquivalentNodes = [target];
-    const fiber = getFiber(target);
-    const boundary = fiber ? findComponentBoundary(fiber) : null;
+    const boundary = detectComponent(target);
     state.currentBoundary = boundary ? { componentName: boundary.componentName } : { componentName: target.tagName.toLowerCase() };
     state.cachedNearGroups = null;
     showDrawButton(target);
@@ -7088,6 +7537,24 @@ ${pad}</${tag}>`;
       setTimeout(() => toast.remove(), 200);
     }, duration);
   }
+  function resetOnNavigation() {
+    if (isTextEditing()) endTextEdit(false);
+    revertPreview();
+    clearHighlights();
+    cancelInsert();
+    clearLockedInsert();
+    removeAllDesignCanvases();
+    state.currentEquivalentNodes = [];
+    state.currentTargetEl = null;
+    state.currentBoundary = null;
+    state.cachedNearGroups = null;
+    state.cachedExactMatches = null;
+    state.manuallyAddedNodes = /* @__PURE__ */ new Set();
+    state.addMode = false;
+    setSelectMode2(false);
+    sendTo("panel", { type: "RESET_SELECTION" });
+    sendTo("panel", { type: "COMPONENT_DISARMED" });
+  }
   function getDefaultContainer() {
     try {
       const stored = localStorage.getItem("tw-panel-container");
@@ -7099,6 +7566,8 @@ ${pad}</${tag}>`;
     return "popover";
   }
   function init() {
+    const params = new URLSearchParams(location.search);
+    if (params.get("viewMode") === "story" || 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);
@@ -7125,6 +7594,16 @@ ${pad}</${tag}>`;
       btn.style.display = "none";
     }
     state.shadowRoot.appendChild(btn);
+    createNavigationInterceptor(() => {
+      if (state.active) resetOnNavigation();
+    });
+    window.addEventListener("message", (event) => {
+      if (event.data?.type === "STORYBOOK_STORY_RENDERED") {
+        if (state.active) {
+          resetOnNavigation();
+        }
+      }
+    });
     document.addEventListener("keydown", (e) => {
       if (e.key === "Escape") {
         if (state.addMode) {
@@ -7141,11 +7620,14 @@ ${pad}</${tag}>`;
           state.cachedExactMatches = null;
           state.manuallyAddedNodes = /* @__PURE__ */ new Set();
           state.addMode = false;
-          sendTo("panel", { type: "RESET_SELECTION" });
           if (state.currentMode === "select") {
             setSelectMode2(true);
+            sendTo("panel", { type: "DESELECT_ELEMENT" });
           } else if (state.currentMode === "insert") {
+            sendTo("panel", { type: "DESELECT_ELEMENT" });
             startBrowse(state.shadowHost, onBrowseLocked2);
+          } else {
+            sendTo("panel", { type: "RESET_SELECTION" });
           }
         } else if (state.selectModeOn) {
           setSelectMode2(false);
@@ -7162,6 +7644,8 @@ ${pad}</${tag}>`;
     onMessage((msg) => {
       if (msg.type === "TOGGLE_SELECT_MODE") {
         if (msg.active) {
+          state.active = true;
+          sessionStorage.setItem(PANEL_OPEN_KEY, "1");
           setSelectMode2(true);
           if (!insideStorybook) {
             const panelUrl = `${SERVER_ORIGIN}/panel`;
@@ -7171,6 +7655,10 @@ ${pad}</${tag}>`;
           setSelectMode2(false);
         }
       } else if (msg.type === "MODE_CHANGED") {
+        if (msg.mode) {
+          state.active = true;
+          sessionStorage.setItem(PANEL_OPEN_KEY, "1");
+        }
         revertPreview();
         clearHighlights();
         cancelInsert();
@@ -7181,6 +7669,7 @@ ${pad}</${tag}>`;
         state.cachedNearGroups = null;
         state.currentMode = msg.mode;
         if (msg.mode === "insert") {
+          setSelectMode2(false);
           if (state.tabPreference === "design") state.tabPreference = "component";
           state.currentTab = resolveTab();
           startBrowse(state.shadowHost, onBrowseLocked2);
@@ -7295,22 +7784,36 @@ ${pad}</${tag}>`;
           }
         } else {
           const locked2 = getLockedInsert();
+          console.log("[tw-debug] INSERT_DESIGN_CANVAS else branch, locked=", locked2, "currentTargetEl=", state.currentTargetEl);
           if (locked2) {
             state.currentTargetEl = locked2.target;
-            const fiber = getFiber(locked2.target);
-            const boundary = fiber ? findComponentBoundary(fiber) : null;
+            const boundary = detectComponent(locked2.target);
             state.currentBoundary = boundary ? { componentName: boundary.componentName } : { componentName: locked2.target.tagName.toLowerCase() };
             state.currentEquivalentNodes = [locked2.target];
             clearLockedInsert();
+            console.log("[tw-debug] locked path \u2014 calling injectDesignCanvas, position=", locked2.position, "boundary=", state.currentBoundary);
             injectDesignCanvas(locked2.position);
           } else {
+            console.log("[tw-debug] arming generic insert...");
             armGenericInsert("Place: Canvas", state.shadowHost, (target, position) => {
-              state.currentTargetEl = target;
-              const fiber = getFiber(target);
-              const boundary = fiber ? findComponentBoundary(fiber) : null;
-              state.currentBoundary = boundary ? { componentName: boundary.componentName } : { componentName: target.tagName.toLowerCase() };
-              state.currentEquivalentNodes = [target];
-              injectDesignCanvas(position);
+              console.log("[tw-debug] armGenericInsert callback fired, target=", target, "position=", position);
+              try {
+                console.log("[tw-debug] step 1: setting currentTargetEl");
+                state.currentTargetEl = target;
+                console.log("[tw-debug] step 2: calling detectComponent");
+                const boundary = detectComponent(target);
+                console.log("[tw-debug] step 3: boundary=", boundary);
+                state.currentBoundary = boundary ? { componentName: boundary.componentName } : { componentName: target.tagName.toLowerCase() };
+                state.currentEquivalentNodes = [target];
+                console.log("[tw-debug] step 4: state set, currentBoundary=", state.currentBoundary, "\u2014 calling injectDesignCanvas");
+                injectDesignCanvas(position);
+                console.log("[tw-debug] injectDesignCanvas returned OK");
+              } catch (err) {
+                console.error("[tw-debug] CALLBACK THREW (this is the real error):", err);
+                if (err instanceof Error) {
+                  console.error("[tw-debug] message:", err.message, "stack:", err.stack);
+                }
+              }
             });
           }
         }
@@ -7439,8 +7942,7 @@ ${pad}</${tag}>`;
       if (!target || target === state.shadowHost || e.composedPath().some((el) => el === state.shadowHost)) {
         return;
       }
-      const fiber = getFiber(target);
-      const boundary = fiber ? findComponentBoundary(fiber) : null;
+      const boundary = detectComponent(target);
       const selectorPath = buildSelectorPath2(target);
       const rect = target.getBoundingClientRect();
       const element = {