veo-sdk 0.6.2 → 0.6.3

package/dist/builder-PPLIAUCM.mjs

@@ -0,0 +1,5 @@
+export { INTERACTIVE_SELECTOR, VEO_BLOCK_MIME, attachBlockDropTarget, attachDesignManipulator, closestInteractive, createBuilderSession, elementLabelText, initBuilderMode, isInteractiveElement, startElementPicker, stopElementPicker } from './chunk-DU6I4ZU2.mjs';
+import './chunk-SZCIXA5X.mjs';
+import './chunk-PTG3BTJE.mjs';
+//# sourceMappingURL=builder-PPLIAUCM.mjs.map
+//# sourceMappingURL=builder-PPLIAUCM.mjs.map

package/dist/{builder-ENKEIVF2.mjs.map → builder-PPLIAUCM.mjs.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"builder-ENKEIVF2.mjs"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"builder-PPLIAUCM.mjs"}

package/dist/builder.cjs

@@ -283,6 +283,92 @@ function clearBuilderToken() {
   }
 }
 
+// src/plugins/autocapture/constants.ts
+var HASHED_CLASS_PATTERNS = [
+  /^css-[a-z0-9]{4,}$/i,
+  // emotion, styled-components nuevas
+  /^_[a-z0-9]+_[a-z0-9]{4,}_\d+$/,
+  // CSS Modules con hash
+  /^[a-z]{2,4}-[a-z0-9]{6,}$/i,
+  // Tailwind JIT (a veces)
+  /^[a-f0-9]{6,}$/i,
+  // hashes hex puros
+  /^sc-[a-z0-9]+$/i
+  // styled-components legacy
+];
+
+// src/plugins/autocapture/selector-builder.ts
+function isHashedClass(className) {
+  return HASHED_CLASS_PATTERNS.some((pattern) => pattern.test(className));
+}
+function filterHumanClasses(element) {
+  return Array.from(element.classList).filter((c) => !isHashedClass(c) && c.length < 64);
+}
+var STABLE_ATTRIBUTES = [
+  "data-testid",
+  "data-test",
+  "data-cy",
+  "name",
+  "aria-label",
+  "placeholder",
+  "alt",
+  "title",
+  // `href` identifica muy bien a los links (`<a>`), un target frecuente de
+  // autocapture; va después de los atributos semánticos pero antes de los
+  // genéricos. Valores largos (URLs absolutas con query) se descartan por
+  // MAX_ATTR_VALUE_LENGTH.
+  "href",
+  "role",
+  "type"
+];
+var MAX_ATTR_VALUE_LENGTH = 100;
+function cssEscape(value) {
+  if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+    return CSS.escape(value);
+  }
+  return value.replace(/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
+}
+function escapeAttrValue(value) {
+  return value.replace(/[\\"]/g, "\\$&");
+}
+function stableAttributeSelector(element, tag) {
+  for (const attr of STABLE_ATTRIBUTES) {
+    const value = element.getAttribute(attr);
+    if (value && value.length > 0 && value.length <= MAX_ATTR_VALUE_LENGTH) {
+      return `${tag}[${attr}="${escapeAttrValue(value)}"]`;
+    }
+  }
+  return null;
+}
+function buildElementSelector(element) {
+  const tag = element.tagName.toLowerCase();
+  const veoTag = element.getAttribute("data-veo-tag");
+  if (veoTag) {
+    return `${tag}[data-veo-tag="${escapeAttrValue(veoTag)}"]`;
+  }
+  if (element.id) {
+    const classes2 = filterHumanClasses(element);
+    const classPart2 = classes2.length > 0 ? `.${classes2.map(cssEscape).join(".")}` : "";
+    return `${tag}#${cssEscape(element.id)}${classPart2}`;
+  }
+  const attrSelector = stableAttributeSelector(element, tag);
+  if (attrSelector) return attrSelector;
+  const classes = filterHumanClasses(element);
+  const classPart = classes.length > 0 ? `.${classes.map(cssEscape).join(".")}` : "";
+  return `${tag}${classPart}`;
+}
+function buildSelectorPath(element, maxAncestors = 5) {
+  const parts = [];
+  let current = element;
+  let depth = 0;
+  while (current && current !== document.documentElement && depth <= maxAncestors) {
+    parts.unshift(buildElementSelector(current));
+    current = current.parentElement;
+    depth++;
+  }
+  return parts.join(" > ");
+}
+
 // src/plugins/guides/activation-devices.ts
 var MOBILE_MAX_WIDTH = 767;
 function isDeviceAllowed(devices, viewportWidth = typeof window === "undefined" ? 1024 : window.innerWidth) {
@@ -5217,14 +5303,19 @@ function injectBuilderChrome(opts) {
   let previewOn = false;
   let hiddenOn = false;
   let heightCb = null;
-  const height = () => CHROME_TOPBAR_H + (collapsed ? 0 : CHROME_STEPS_H);
+  let tagging = false;
+  const height = () => CHROME_TOPBAR_H + (collapsed || tagging ? 0 : CHROME_STEPS_H);
   const applyHeight = () => {
     const h = previewOn || hiddenOn ? 0 : height();
     html.style.marginTop = dock === "top" ? `${h}px` : prevMarginTop;
     html.style.marginBottom = dock === "bottom" ? `${h}px` : prevMarginBottom;
     root.style.setProperty("--veo-chrome-h", `${height()}px`);
     root.classList.toggle("is-bottom", dock === "bottom");
-    stepsBar.hidden = collapsed;
+    stepsBar.hidden = collapsed || tagging;
+    togglePill.hidden = tagging;
+    preview.hidden = tagging;
+    saveGroup.hidden = tagging;
+    showPanel.title = tagging ? "Mostrar el panel" : "Mostrar el editor";
     const open = dock === "top" ? "chevronUp" : "chevronDown";
     const closedIcon = dock === "top" ? "chevronDown" : "chevronUp";
     togglePill.innerHTML = `<span>${collapsed ? "Mostrar pasos" : "Ocultar pasos"}</span>${svg(
@@ -5277,8 +5368,13 @@ function injectBuilderChrome(opts) {
   const render = () => {
     const s = current;
     if (!s) return;
+    const nextTagging = s.variant === "tagging";
+    if (nextTagging !== tagging) {
+      tagging = nextTagging;
+      applyHeight();
+    }
     const date = shortDate(s.createdAt);
-    nameEl.textContent = `${s.guideName.trim() || "Sin nombre"}${date ? ` \xB7 ${date}` : ""}`;
+    nameEl.textContent = tagging ? s.guideName.trim() || "Modo tagging" : `${s.guideName.trim() || "Sin nombre"}${date ? ` \xB7 ${date}` : ""}`;
     if (s.status) {
       statusEl.hidden = false;
       statusEl.textContent = s.status.label;
@@ -5377,6 +5473,8 @@ var CHROME_CSS = `
   font-size: 14px; color: #1c1917;
 }
 .veo-chrome[hidden] { display: none; }
+/* Modo tagging oculta controles por atributo: gana a los display de sus clases. */
+.veo-chrome [hidden], .veo-steps-toggle[hidden] { display: none !important; }
 .veo-chrome.is-bottom { top: auto; bottom: 0; flex-direction: column-reverse; }
 .veo-chrome.is-bottom .veo-tb-menu { top: auto; bottom: calc(100% + 8px); }
 .veo-chrome.is-bottom .veo-steps { border-bottom: 0; border-top: 1px solid #d6cfc8; }
@@ -5996,90 +6094,51 @@ function attachBanner(opts, shadow, banner) {
   };
 }
 
-// src/plugins/autocapture/constants.ts
-var HASHED_CLASS_PATTERNS = [
-  /^css-[a-z0-9]{4,}$/i,
-  // emotion, styled-components nuevas
-  /^_[a-z0-9]+_[a-z0-9]{4,}_\d+$/,
-  // CSS Modules con hash
-  /^[a-z]{2,4}-[a-z0-9]{6,}$/i,
-  // Tailwind JIT (a veces)
-  /^[a-f0-9]{6,}$/i,
-  // hashes hex puros
-  /^sc-[a-z0-9]+$/i
-  // styled-components legacy
+// src/plugins/builder/interactive-elements.ts
+var INTERACTIVE_ROLES = [
+  "button",
+  "link",
+  "tab",
+  "menuitem",
+  "menuitemcheckbox",
+  "menuitemradio",
+  "checkbox",
+  "radio",
+  "switch",
+  "option",
+  "combobox",
+  "textbox",
+  "searchbox",
+  "slider",
+  "spinbutton"
 ];
-
-// src/plugins/autocapture/selector-builder.ts
-function isHashedClass(className) {
-  return HASHED_CLASS_PATTERNS.some((pattern) => pattern.test(className));
-}
-function filterHumanClasses(element) {
-  return Array.from(element.classList).filter((c) => !isHashedClass(c) && c.length < 64);
-}
-var STABLE_ATTRIBUTES = [
-  "data-testid",
-  "data-test",
-  "data-cy",
-  "name",
-  "aria-label",
-  "placeholder",
-  "alt",
-  "title",
-  // `href` identifica muy bien a los links (`<a>`), un target frecuente de
-  // autocapture; va después de los atributos semánticos pero antes de los
-  // genéricos. Valores largos (URLs absolutas con query) se descartan por
-  // MAX_ATTR_VALUE_LENGTH.
-  "href",
-  "role",
-  "type"
-];
-var MAX_ATTR_VALUE_LENGTH = 100;
-function cssEscape(value) {
-  if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
-    return CSS.escape(value);
-  }
-  return value.replace(/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
-}
-function escapeAttrValue(value) {
-  return value.replace(/[\\"]/g, "\\$&");
-}
-function stableAttributeSelector(element, tag) {
-  for (const attr of STABLE_ATTRIBUTES) {
-    const value = element.getAttribute(attr);
-    if (value && value.length > 0 && value.length <= MAX_ATTR_VALUE_LENGTH) {
-      return `${tag}[${attr}="${escapeAttrValue(value)}"]`;
-    }
+var INTERACTIVE_SELECTOR = [
+  "button",
+  "a[href]",
+  'input:not([type="hidden"])',
+  "select",
+  "textarea",
+  "form",
+  "summary",
+  '[contenteditable="true"]',
+  "[onclick]",
+  "[data-veo-tag]",
+  ...INTERACTIVE_ROLES.map((r) => `[role="${r}"]`)
+].join(", ");
+function closestInteractive(element) {
+  try {
+    return element.closest(INTERACTIVE_SELECTOR);
+  } catch {
+    return null;
   }
-  return null;
 }
-function buildElementSelector(element) {
-  const tag = element.tagName.toLowerCase();
-  const veoTag = element.getAttribute("data-veo-tag");
-  if (veoTag) {
-    return `${tag}[data-veo-tag="${escapeAttrValue(veoTag)}"]`;
-  }
-  if (element.id) {
-    const classes2 = filterHumanClasses(element);
-    const classPart2 = classes2.length > 0 ? `.${classes2.map(cssEscape).join(".")}` : "";
-    return `${tag}#${cssEscape(element.id)}${classPart2}`;
-  }
-  const attrSelector = stableAttributeSelector(element, tag);
-  if (attrSelector) return attrSelector;
-  const classes = filterHumanClasses(element);
-  const classPart = classes.length > 0 ? `.${classes.map(cssEscape).join(".")}` : "";
-  return `${tag}${classPart}`;
-}
-function buildSelectorPath(element, maxAncestors = 5) {
-  const parts = [];
-  let current = element;
-  let depth = 0;
-  while (current && current !== document.documentElement && depth <= maxAncestors) {
-    parts.unshift(buildElementSelector(current));
-    current = current.parentElement;
-    depth++;
-  }
-  return parts.join(" > ");
+var EMOJI_RE = /\p{Extended_Pictographic}|\p{Emoji_Modifier}|\u{FE0F}|\u{200D}|\u{20E3}/gu;
+function elementLabelText(element, max = 120) {
+  const clean = (raw) => (raw ?? "").replace(EMOJI_RE, "").replace(/\s+/g, " ").trim();
+  const text = clean(element.textContent);
+  if (text) return text.slice(0, max);
+  const fallback = clean(element.getAttribute("aria-label")) || clean(element.getAttribute("title"));
+  return fallback.slice(0, max);
 }
 
 // src/plugins/builder/element-picker.ts
@@ -6152,21 +6211,24 @@ var ElementPicker = class {
     this.label = null;
     this.current = null;
     this.maxAncestors = DEFAULT_MAX_ANCESTORS;
+    this.only = null;
     this.onPick = null;
     this.onCancel = null;
     this.onMove = (event) => {
-      const target = event.target;
-      if (!(target instanceof Element) || this.isOwn(target)) return;
+      if (!(event.target instanceof Element) || this.isOwn(event.target)) return;
+      const target = this.resolveTarget(event.target);
       this.current = target;
-      this.draw(target);
+      if (target) this.draw(target);
+      else this.hideBox();
     };
     this.onClick = (event) => {
       if (event.altKey) return;
-      const target = this.current ?? (event.target instanceof Element ? event.target : null);
-      if (!target || this.isOwn(target)) return;
+      if (this.isOwn(event.target)) return;
       event.preventDefault();
       event.stopPropagation();
       event.stopImmediatePropagation();
+      const target = this.current ?? this.resolveTarget(event.target);
+      if (!target) return;
       const picked = this.describe(target);
       const cb = this.onPick;
       this.stop();
@@ -6193,6 +6255,7 @@ var ElementPicker = class {
   start(options) {
     this.stop();
     this.maxAncestors = options.maxAncestors ?? DEFAULT_MAX_ANCESTORS;
+    this.only = options.only ?? null;
     this.onPick = options.onPick;
     this.onCancel = options.onCancel ?? null;
     const host = document.createElement("div");
@@ -6255,9 +6318,19 @@ var ElementPicker = class {
     this.box = null;
     this.label = null;
     this.current = null;
+    this.only = null;
     this.onPick = null;
     this.onCancel = null;
   }
+  /** Elemento que se elegiría para el nodo bajo el cursor (o null si no hay). */
+  resolveTarget(target) {
+    if (!(target instanceof Element) || this.isOwn(target)) return null;
+    return this.only === "interactive" ? closestInteractive(target) : target;
+  }
+  hideBox() {
+    if (this.box) this.box.style.display = "none";
+    if (this.label) this.label.style.display = "none";
+  }
   /** ¿Es un nodo de nuestro propio overlay? (no debe ser seleccionable). */
   isOwn(target) {
     return target instanceof Node && this.host !== null && this.host.contains(target);
@@ -6294,7 +6367,7 @@ var ElementPicker = class {
       tag: element.tagName.toLowerCase(),
       id: element.id || null,
       classes: filterHumanClasses(element),
-      text: (element.textContent ?? "").trim().slice(0, 120),
+      text: elementLabelText(element),
       rect: {
         x: Math.round(rect.left),
         y: Math.round(rect.top),
@@ -6319,6 +6392,41 @@ function stopElementPicker() {
 }
 
 // src/plugins/builder/builder-mode.ts
+var CONFIRMATION_STYLES = `
+:host { all: initial; }
+.veo-confirm-backdrop {
+  position: fixed; inset: 0; z-index: 2147483645;
+  background: rgba(20, 16, 14, 0.45);
+}
+.veo-confirm {
+  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
+  z-index: 2147483646; box-sizing: border-box;
+  width: min(432px, calc(100vw - 32px)); padding: 28px 24px 24px;
+  border-radius: 16px; background: #fff; color: #1d1917;
+  box-shadow: 0 24px 64px rgba(0,0,0,0.28);
+  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+  text-align: center;
+}
+.veo-confirm-check {
+  width: 64px; height: 64px; margin: 0 auto; border-radius: 50%;
+  background: #e6f6df; color: #2f9a4e; display: flex; align-items: center; justify-content: center;
+}
+.veo-confirm-check svg { width: 30px; height: 30px; }
+.veo-confirm-title { margin: 18px 0 0; font-size: 17px; font-weight: 600; }
+.veo-confirm-msg { margin: 8px 0 0; font-size: 13px; color: #6b6461; }
+.veo-confirm-rows {
+  margin: 18px 0 0; padding: 12px 14px; border-radius: 12px; background: #f6f2ef; text-align: left;
+}
+.veo-confirm-row { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; padding: 4px 0; }
+.veo-confirm-row dt { color: #6b6461; margin: 0; }
+.veo-confirm-row dd { margin: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.veo-confirm-btn {
+  display: block; width: 100%; margin-top: 18px; height: 44px; border: 0; border-radius: 10px;
+  background: #b74d00; color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
+}
+.veo-confirm-btn:hover { background: #953c00; }
+.veo-confirm-btn:focus-visible { outline: 3px solid rgba(183,77,0,0.35); outline-offset: 2px; }
+`;
 function initBuilderMode() {
   if (!hasWindow() || !hasDocument()) return null;
   const ctx = resolveBuilderContext();
@@ -7300,7 +7408,7 @@ function initBuilderMode() {
           if (h && hoverCard && !previewMode) renderCardChrome(h, previewStepIndex);
         }
         panel?.setTitle(
-          cmd.state.section === "activation" ? "Ajustes de activaci\xF3n" : cmd.state.section === "badge" ? "Ajustes de badge" : cmd.state.section === "target" ? "Ajustes del elemento objetivo" : cmd.state.section === "row" ? "Editar fila" : cmd.state.blockLabel ? `Editor \xB7 ${cmd.state.blockLabel}` : cmd.state.steps[cmd.state.activeStep]?.label ?? "Paso"
+          cmd.state.panelTitle ?? (cmd.state.section === "activation" ? "Ajustes de activaci\xF3n" : cmd.state.section === "badge" ? "Ajustes de badge" : cmd.state.section === "target" ? "Ajustes del elemento objetivo" : cmd.state.section === "row" ? "Editar fila" : cmd.state.blockLabel ? `Editor \xB7 ${cmd.state.blockLabel}` : cmd.state.steps[cmd.state.activeStep]?.label ?? "Paso")
         );
         break;
       case "panel-visibility":
@@ -7338,7 +7446,8 @@ function initBuilderMode() {
             post({ type: "pick-cancelled" });
           },
           ...cmd.maxAncestors !== void 0 ? { maxAncestors: cmd.maxAncestors } : {},
-          ...cmd.hint !== void 0 ? { hint: cmd.hint } : {}
+          ...cmd.hint !== void 0 ? { hint: cmd.hint } : {},
+          ...cmd.only !== void 0 ? { only: cmd.only } : {}
         });
         break;
       }
@@ -7347,6 +7456,15 @@ function initBuilderMode() {
         picker = null;
         chrome?.setHidden(false);
         break;
+      case "scan-page":
+        post({ type: "page-scan", payload: scanPage(cmd.selectors) });
+        break;
+      case "highlight":
+        setHighlight(cmd.selector);
+        break;
+      case "show-confirmation":
+        showConfirmation(cmd.payload);
+        break;
       case "preview":
         if (!cmd.guide) break;
         if (manipulator?.isDragging()) pendingPreview = cmd;
@@ -7431,10 +7549,154 @@ function initBuilderMode() {
     post({ type: "closed" });
     panel?.teardown();
     panel = null;
+    highlightBox?.remove();
+    highlightBox = null;
+    confirmation?.remove();
+    confirmation = null;
+    if (confirmationKey) document.removeEventListener("keydown", confirmationKey, true);
+    confirmationKey = null;
     chrome?.teardown();
     chrome = null;
     clearBuilderToken();
   };
+  const scanPage = (selectors) => {
+    const present = selectors.filter((sel) => {
+      try {
+        return document.querySelector(sel) !== null;
+      } catch {
+        return false;
+      }
+    });
+    const taggedEls = /* @__PURE__ */ new Set();
+    for (const sel of present) {
+      try {
+        for (const e of Array.from(document.querySelectorAll(sel))) taggedEls.add(e);
+      } catch {
+      }
+    }
+    const seen = /* @__PURE__ */ new Set();
+    const candidates = [];
+    const nodes = document.querySelectorAll(INTERACTIVE_SELECTOR);
+    for (const element of Array.from(nodes)) {
+      if (candidates.length >= 200) break;
+      if (element.closest("[data-veo-builder-chrome],[data-veo-builder-panel],[data-veo-picker]")) {
+        continue;
+      }
+      if (element.getClientRects().length === 0) continue;
+      let tagged = false;
+      for (let n = element; n; n = n.parentElement) {
+        if (taggedEls.has(n)) {
+          tagged = true;
+          break;
+        }
+      }
+      if (tagged) continue;
+      const selector = buildSelectorPath(element, 5);
+      if (!selector || seen.has(selector)) continue;
+      seen.add(selector);
+      candidates.push({
+        selector,
+        shortSelector: buildSelectorPath(element, 0),
+        tag: element.tagName.toLowerCase(),
+        id: element.id || null,
+        classes: filterHumanClasses(element),
+        text: elementLabelText(element)
+      });
+    }
+    const { pathname, hash } = window.location;
+    const routePath = /^#\/./.test(hash) ? `${pathname}${hash}` : pathname;
+    return { pagePath: pathname, routePath, candidates, present };
+  };
+  let confirmation = null;
+  let confirmationKey = null;
+  const closeConfirmation = () => {
+    if (!confirmation) return;
+    confirmation.remove();
+    confirmation = null;
+    if (confirmationKey) document.removeEventListener("keydown", confirmationKey, true);
+    confirmationKey = null;
+    panel?.setVisible(true);
+    post({ type: "confirmation-closed" });
+  };
+  const showConfirmation = (card) => {
+    if (confirmation) {
+      confirmation.remove();
+      confirmation = null;
+    }
+    panel?.setVisible(false);
+    const host = document.createElement("div");
+    host.setAttribute("data-veo-builder-chrome", "");
+    host.setAttribute("data-veo-confirmation", "");
+    const shadow = host.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = CONFIRMATION_STYLES;
+    const backdrop = document.createElement("div");
+    backdrop.className = "veo-confirm-backdrop";
+    const dialog = document.createElement("div");
+    dialog.className = "veo-confirm";
+    dialog.setAttribute("role", "dialog");
+    dialog.setAttribute("aria-modal", "true");
+    dialog.setAttribute("aria-label", card.title);
+    const badge = document.createElement("div");
+    badge.className = "veo-confirm-check";
+    badge.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>';
+    const title = document.createElement("h2");
+    title.className = "veo-confirm-title";
+    title.textContent = card.title;
+    const message = document.createElement("p");
+    message.className = "veo-confirm-msg";
+    message.textContent = card.message;
+    const rows = document.createElement("dl");
+    rows.className = "veo-confirm-rows";
+    for (const r of card.rows) {
+      const row = document.createElement("div");
+      row.className = "veo-confirm-row";
+      const dt = document.createElement("dt");
+      dt.textContent = r.label;
+      const dd = document.createElement("dd");
+      dd.textContent = r.value;
+      row.append(dt, dd);
+      rows.appendChild(row);
+    }
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "veo-confirm-btn";
+    button.textContent = card.buttonLabel ?? "Listo";
+    button.addEventListener("click", closeConfirmation);
+    dialog.append(badge, title, message);
+    if (card.rows.length > 0) dialog.appendChild(rows);
+    dialog.appendChild(button);
+    shadow.append(style, backdrop, dialog);
+    document.body.appendChild(host);
+    confirmation = host;
+    confirmationKey = (e) => {
+      if (e.key !== "Escape") return;
+      e.preventDefault();
+      e.stopPropagation();
+      closeConfirmation();
+    };
+    document.addEventListener("keydown", confirmationKey, true);
+    button.focus();
+  };
+  let highlightBox = null;
+  const setHighlight = (selector) => {
+    highlightBox?.remove();
+    highlightBox = null;
+    if (!selector) return;
+    let target = null;
+    try {
+      target = document.querySelector(selector);
+    } catch {
+      return;
+    }
+    if (!target) return;
+    const r = target.getBoundingClientRect();
+    const box = document.createElement("div");
+    box.setAttribute("data-veo-builder-chrome", "");
+    box.style.cssText = `position:fixed;left:${r.left - 3}px;top:${r.top - 3}px;width:${r.width + 6}px;height:${r.height + 6}px;border:2px solid #FF5B35;border-radius:6px;background:rgba(255,91,53,0.10);pointer-events:none;z-index:2147483646;`;
+    document.body.appendChild(box);
+    highlightBox = box;
+  };
   if (ctx.panel) {
     chrome = injectBuilderChrome({
       appLabel: window.location.hostname,