veo-sdk 0.6.2 → 0.6.3

package/dist/{chunk-4QZDNJJE.mjs → chunk-DU6I4ZU2.mjs}

@@ -1,4 +1,4 @@
-import { hasDocument, hasWindow, resolveBuilderContext, closeGuidePreview, clearBuilderToken, buildSelectorPath, filterHumanClasses, groupLayout, stepMatchesPage, isAutomaticActivation, activationDelayMs, previewGuide, applyBlockStyle, buildContentBlock, RAW_BLOCK_ATTR, GUIDE_STYLES, isDeviceAllowed } from './chunk-ZILDR4YE.mjs';
+import { hasDocument, hasWindow, resolveBuilderContext, closeGuidePreview, clearBuilderToken, buildSelectorPath, filterHumanClasses, groupLayout, stepMatchesPage, isAutomaticActivation, activationDelayMs, previewGuide, applyBlockStyle, buildContentBlock, RAW_BLOCK_ATTR, GUIDE_STYLES, isDeviceAllowed } from './chunk-SZCIXA5X.mjs';
 import { BUILDER_TOKEN_PARAM, BUILDER_ORIGIN_PARAM } from './chunk-PTG3BTJE.mjs';
 
 // src/plugins/builder/block-drop-target.ts
@@ -231,14 +231,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(
@@ -291,8 +296,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;
@@ -391,6 +401,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; }
@@ -1010,6 +1022,60 @@ function attachBanner(opts, shadow, banner) {
   };
 }
 
+// src/plugins/builder/interactive-elements.ts
+var INTERACTIVE_ROLES = [
+  "button",
+  "link",
+  "tab",
+  "menuitem",
+  "menuitemcheckbox",
+  "menuitemradio",
+  "checkbox",
+  "radio",
+  "switch",
+  "option",
+  "combobox",
+  "textbox",
+  "searchbox",
+  "slider",
+  "spinbutton"
+];
+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 isInteractiveElement(element) {
+  try {
+    return element.matches(INTERACTIVE_SELECTOR);
+  } catch {
+    return false;
+  }
+}
+function closestInteractive(element) {
+  try {
+    return element.closest(INTERACTIVE_SELECTOR);
+  } catch {
+    return null;
+  }
+}
+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
 var PICKER_Z = 2147483646;
 var PICKER_HOST_ATTR = "data-veo-picker";
@@ -1080,21 +1146,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();
@@ -1121,6 +1190,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");
@@ -1183,9 +1253,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);
@@ -1222,7 +1302,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),
@@ -1247,6 +1327,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();
@@ -2228,7 +2343,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":
@@ -2266,7 +2381,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;
       }
@@ -2275,6 +2391,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;
@@ -2359,10 +2484,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,
@@ -2610,6 +2879,6 @@ function noopSession() {
   };
 }
 
-export { VEO_BLOCK_MIME, attachBlockDropTarget, attachDesignManipulator, createBuilderSession, initBuilderMode, startElementPicker, stopElementPicker };
-//# sourceMappingURL=chunk-4QZDNJJE.mjs.map
-//# sourceMappingURL=chunk-4QZDNJJE.mjs.map
+export { INTERACTIVE_SELECTOR, VEO_BLOCK_MIME, attachBlockDropTarget, attachDesignManipulator, closestInteractive, createBuilderSession, elementLabelText, initBuilderMode, isInteractiveElement, startElementPicker, stopElementPicker };
+//# sourceMappingURL=chunk-DU6I4ZU2.mjs.map
+//# sourceMappingURL=chunk-DU6I4ZU2.mjs.map