veo-sdk 0.6.1 → 0.6.3

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) {
@@ -756,6 +842,10 @@ var TEXT_PRESETS = {
   small: { size: 12, weight: 400, lineHeight: 1.5 }
 };
 function applyBlockStyle(el2, style, kind) {
+  if (kind === "text") {
+    const explicit = style && typeof style === "object" ? style.preset : void 0;
+    el2.dataset.veoPreset = typeof explicit === "string" ? explicit : el2.classList.contains("veo-guide-title") ? "title" : "paragraph";
+  }
   if (!style || typeof style !== "object") return;
   const s = style;
   if (kind === "image" && s.bleed === true) {
@@ -772,8 +862,9 @@ function applyBlockStyle(el2, style, kind) {
   if (kind === "text" && typeof s.preset === "string" && s.preset in TEXT_PRESETS) {
     const preset = TEXT_PRESETS[s.preset];
     if (preset) {
-      el2.style.fontSize = `${preset.size}px`;
-      el2.style.fontWeight = String(preset.weight);
+      const token = s.preset === "small" ? null : `--veo-t-${s.preset}`;
+      el2.style.fontSize = token ? `var(${token}-size, ${preset.size}px)` : `${preset.size}px`;
+      el2.style.fontWeight = token ? `var(${token}-weight, ${preset.weight})` : String(preset.weight);
       el2.style.lineHeight = String(preset.lineHeight);
     }
   }
@@ -1710,20 +1801,92 @@ var GUIDE_STYLES = `
 .veo-guide-actions {
   display: flex; gap: 8px; justify-content: var(--veo-actions-justify);
 }
+/* Tema del workspace (design system): cada preset de texto toma sus tokens de
+   las variables que publica \`applyThemeVars\` en la tarjeta. Las reglas solo
+   existen bajo .veo-card--themed; los estilos inline del bloque las pisan. El
+   \`*\` cubre el rich text (la regla global de fuente aplica a cada hijo). */
+.veo-card--themed [data-veo-preset="title"] {
+  color: var(--veo-t-title-color); font-size: var(--veo-t-title-size);
+  font-weight: var(--veo-t-title-weight); text-align: var(--veo-t-title-align);
+}
+.veo-card--themed [data-veo-preset="subtitle"] {
+  color: var(--veo-t-subtitle-color); font-size: var(--veo-t-subtitle-size);
+  font-weight: var(--veo-t-subtitle-weight); text-align: var(--veo-t-subtitle-align);
+}
+.veo-card--themed [data-veo-preset="paragraph"] {
+  color: var(--veo-t-paragraph-color); font-size: var(--veo-t-paragraph-size);
+  font-weight: var(--veo-t-paragraph-weight); text-align: var(--veo-t-paragraph-align);
+}
+.veo-card--themed [data-veo-preset="small"] { color: var(--veo-t-paragraph-color); }
+.veo-card--themed [data-veo-preset="title"], .veo-card--themed [data-veo-preset="title"] * {
+  font-family: var(--veo-t-title-font, var(--veo-font));
+}
+.veo-card--themed [data-veo-preset="subtitle"], .veo-card--themed [data-veo-preset="subtitle"] * {
+  font-family: var(--veo-t-subtitle-font, var(--veo-font));
+}
+.veo-card--themed [data-veo-preset="paragraph"], .veo-card--themed [data-veo-preset="paragraph"] *,
+.veo-card--themed [data-veo-preset="small"], .veo-card--themed [data-veo-preset="small"] * {
+  font-family: var(--veo-t-paragraph-font, var(--veo-font));
+}
+/* Formulario del tema (pesta\xF1a Formulario). Dentro de un .veo-form los tokens
+   de texto \`--veo-t-*\` se REDEFINEN con \xABTexto principal\xBB: la pregunta es un
+   bloque con preset (su tama\xF1o va inline con esas variables), as\xED toma los del
+   formulario y no los del modal. Etiquetas y opciones = \xABTexto secundario\xBB. */
+.veo-card--themed-form .veo-form {
+  background: var(--veo-f-bg); padding: var(--veo-f-pad);
+  border: var(--veo-f-border, none); border-radius: var(--veo-f-radius, 8px);
+  box-shadow: var(--veo-f-shadow, none);
+  --veo-t-title-color: var(--veo-f-primary-color); --veo-t-title-size: var(--veo-f-primary-size);
+  --veo-t-title-weight: var(--veo-f-primary-weight); --veo-t-title-align: var(--veo-f-primary-align);
+  --veo-t-title-font: var(--veo-f-primary-font);
+  --veo-t-subtitle-color: var(--veo-f-primary-color); --veo-t-subtitle-size: var(--veo-f-primary-size);
+  --veo-t-subtitle-weight: var(--veo-f-primary-weight); --veo-t-subtitle-align: var(--veo-f-primary-align);
+  --veo-t-subtitle-font: var(--veo-f-primary-font);
+  --veo-t-paragraph-color: var(--veo-f-primary-color); --veo-t-paragraph-size: var(--veo-f-primary-size);
+  --veo-t-paragraph-weight: var(--veo-f-primary-weight); --veo-t-paragraph-align: var(--veo-f-primary-align);
+  --veo-t-paragraph-font: var(--veo-f-primary-font);
+}
+.veo-card--themed-form .veo-form-label,
+.veo-card--themed-form .veo-form-option,
+.veo-card--themed-form .veo-scale-label {
+  color: var(--veo-f-secondary-color); font-weight: var(--veo-f-secondary-weight);
+  font-family: var(--veo-f-secondary-font, var(--veo-font));
+}
+.veo-card--themed-form .veo-form-label,
+.veo-card--themed-form .veo-form-option {
+  font-size: var(--veo-f-secondary-size); text-align: var(--veo-f-secondary-align);
+}
+.veo-card--themed-form .veo-form-input:focus { outline-color: var(--veo-f-accent); }
+.veo-card--themed-form .veo-form-option input { accent-color: var(--veo-f-accent); }
+.veo-card--themed-form .veo-nps-btn:hover { border-color: var(--veo-scale-color, var(--veo-f-accent)); }
+.veo-card--themed-form .veo-scale-active.veo-nps-btn {
+  background: var(--veo-scale-color, var(--veo-f-accent)); color: var(--veo-f-on-accent);
+  border-color: var(--veo-scale-color, var(--veo-f-accent));
+}
 .veo-guide-cta {
   background: var(--veo-cta-bg, var(--veo-primary));
-  color: var(--veo-cta-color, #fff); border: none;
-  padding: 9px 18px; border-radius: var(--veo-cta-radius, 8px);
-  font-size: var(--veo-cta-size, 14px); font-weight: 500; cursor: pointer;
+  color: var(--veo-cta-color, #fff); border: var(--veo-cta-border, none);
+  padding: var(--veo-cta-pad, 9px 18px); border-radius: var(--veo-cta-radius, 8px);
+  font-size: var(--veo-cta-size, 14px); font-weight: var(--veo-cta-weight, 500); cursor: pointer;
   transition: opacity 120ms ease;
 }
 .veo-guide-cta:hover { opacity: 0.9; }
 /* Presets del boton (editor): secundario = contorno; enlace = solo texto. */
 .veo-guide-cta--secondary {
-  background: transparent; color: var(--veo-primary);
-  border: 1px solid var(--veo-primary);
+  background: var(--veo-cta2-bg, transparent); color: var(--veo-cta2-color, var(--veo-primary));
+  border: var(--veo-cta2-border, 1px solid var(--veo-primary));
+  padding: var(--veo-cta2-pad, var(--veo-cta-pad, 9px 18px));
+  border-radius: var(--veo-cta2-radius, var(--veo-cta-radius, 8px));
+  font-size: var(--veo-cta2-size, var(--veo-cta-size, 14px));
+  font-weight: var(--veo-cta2-weight, var(--veo-cta-weight, 500));
+}
+.veo-guide-cta--link {
+  background: transparent; color: var(--veo-cta3-color, var(--veo-primary));
+  border: var(--veo-cta3-border, none); padding: var(--veo-cta3-pad, 0);
+  border-radius: var(--veo-cta3-radius, 0);
+  font-size: var(--veo-cta3-size, var(--veo-cta-size, 14px));
+  font-weight: var(--veo-cta3-weight, var(--veo-cta-weight, 500));
 }
-.veo-guide-cta--link { background: transparent; color: var(--veo-primary); padding: 0; }
 .veo-guide-cta--link:hover { opacity: 1; text-decoration: underline; }
 .veo-guide-cta:active { transform: translateY(1px); }
 .veo-guide-close {
@@ -2093,6 +2256,12 @@ var STATIC_SIDE = {
   left: "right",
   right: "left"
 };
+var OUTER_EDGES = {
+  top: ["top", "left"],
+  right: ["top", "right"],
+  bottom: ["bottom", "right"],
+  left: ["bottom", "left"]
+};
 function positionArrow(arrowEl, placement, data) {
   const side = STATIC_SIDE[placement.split("-")[0] ?? "bottom"] ?? "top";
   for (const prop of ["top", "bottom", "left", "right"]) {
@@ -2101,6 +2270,16 @@ function positionArrow(arrowEl, placement, data) {
   if (data?.x != null) arrowEl.style.setProperty("left", `${data.x}px`);
   if (data?.y != null) arrowEl.style.setProperty("top", `${data.y}px`);
   arrowEl.style.setProperty(side, "-6px");
+  const width = arrowEl.dataset.veoBorder;
+  if (width) {
+    for (const edge of ["top", "right", "bottom", "left"]) {
+      arrowEl.style.setProperty(
+        `border-${edge}-width`,
+        OUTER_EDGES[side].includes(edge) ? `${width}px` : "0"
+      );
+    }
+    arrowEl.style.zIndex = "1";
+  }
 }
 
 // src/plugins/guides/renderers/badge-renderer.ts
@@ -2989,6 +3168,168 @@ function buildScale(wrapper, doc, min, max, btnClass, symbol, opts = { labels: [
   return { wrapper, read: () => selected };
 }
 
+// src/plugins/guides/guide-theme.ts
+var WORKSPACE_THEME_ID = "workspace";
+var SHADOW_SPEC = {
+  soft: { y: 4, blur: 14, alpha: 0.12 },
+  medium: { y: 12, blur: 32, alpha: 0.22 },
+  strong: { y: 24, blur: 64, alpha: 0.38 }
+};
+var JUSTIFY = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end",
+  distribute: "space-between"
+};
+function channels(hex) {
+  const h = hex.replace("#", "");
+  const full = h.length === 3 ? [...h].map((x) => x + x).join("") : h.slice(0, 6);
+  const ch = (i) => Number.parseInt(full.slice(i, i + 2), 16) || 0;
+  return [ch(0), ch(2), ch(4)];
+}
+function boxShadow(shadow, hex) {
+  if (shadow === "none") return "none";
+  const spec = SHADOW_SPEC[shadow];
+  const [r, g, b] = channels(hex);
+  return `0 ${spec.y}px ${spec.blur}px rgba(${r}, ${g}, ${b}, ${spec.alpha})`;
+}
+function readableOn(hex) {
+  const [r, g, b] = channels(hex);
+  return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255 > 0.6 ? "#111827" : "#ffffff";
+}
+function themeModeFor(theme, design) {
+  if (!theme || design.theme !== WORKSPACE_THEME_ID) return null;
+  return (design.colorMode === "dark" ? theme.dark : theme.light) ?? null;
+}
+function themeRowJustify(mode, inline, preset) {
+  const box = inline ? mode.embedded : mode.overlay;
+  if (box.align === "distribute") return null;
+  const button = preset === "secondary" ? mode.buttons?.secondary : preset === "link" ? mode.buttons?.tertiary : preset === void 0 || preset === null || preset === "primary" ? mode.buttons?.primary : void 0;
+  return button ? JUSTIFY[button.align] ?? null : null;
+}
+function appFont(ref, doc) {
+  const view = doc.defaultView;
+  if (!view) return null;
+  if (ref === "inherit") return view.getComputedStyle(doc.body).fontFamily || null;
+  if (ref === "app-heading") {
+    const heading = Array.from(doc.querySelectorAll("h1,h2,h3")).find(
+      (el2) => el2.getClientRects().length > 0
+    );
+    return view.getComputedStyle(heading ?? doc.body).fontFamily || null;
+  }
+  return ref;
+}
+function themeContainerDesign(mode, inline, tooltip = false) {
+  const box = inline ? mode.embedded : mode.overlay;
+  const tip = tooltip ? mode.tooltip : void 0;
+  const padding = tip?.padding ?? box.padding;
+  const out = {
+    // El embebido va en el flujo de la página: sin fondo propio.
+    background: tip ? tip.background : inline ? "transparent" : box.background ?? mode.colors.background,
+    color: mode.colors.text,
+    paddingTop: padding.top,
+    paddingRight: padding.right,
+    paddingBottom: padding.bottom,
+    paddingLeft: padding.left,
+    borderColor: tip?.borderColor ?? box.borderColor,
+    borderWidth: tip?.borderWidth ?? box.borderWidth,
+    radius: tip?.borderRadius ?? box.borderRadius
+  };
+  const shadow = tip?.shadow ?? box.shadow;
+  const shadowColor = tip?.shadowColor ?? box.shadowColor;
+  if (shadow === "none") {
+    Object.assign(out, { shadowColor: "transparent", shadowBlur: 0 });
+  } else {
+    const spec = SHADOW_SPEC[shadow];
+    const [r, g, b] = channels(shadowColor);
+    Object.assign(out, {
+      shadowX: 0,
+      shadowY: spec.y,
+      shadowBlur: spec.blur,
+      shadowSpread: 0,
+      shadowColor: `rgba(${r}, ${g}, ${b}, ${spec.alpha})`
+    });
+  }
+  return out;
+}
+function applyThemeVars(card, mode, inline, tooltip = false) {
+  const doc = card.ownerDocument ?? document;
+  const box = inline ? mode.embedded : mode.overlay;
+  const set = (name, value) => {
+    if (value) card.style.setProperty(name, value);
+  };
+  card.classList.add("veo-card--themed");
+  set("--veo-primary", mode.colors.accent);
+  set("--veo-cta-color", readableOn(mode.colors.accent));
+  const primary = mode.buttons?.primary;
+  const publish = (prefix, b) => {
+    if (!b) return;
+    const p = b.padding;
+    set(`${prefix}-bg`, b.background);
+    set(`${prefix}-color`, b.color);
+    set(`${prefix}-pad`, `${p.top}px ${p.right}px ${p.bottom}px ${p.left}px`);
+    set(`${prefix}-size`, `${b.fontSize}px`);
+    set(`${prefix}-weight`, String(b.fontWeight));
+    set(`${prefix}-radius`, `${b.borderRadius}px`);
+    set(
+      `${prefix}-border`,
+      b.borderWidth > 0 ? `${b.borderWidth}px solid ${b.borderColor}` : "none"
+    );
+  };
+  publish("--veo-cta", primary);
+  publish("--veo-cta2", mode.buttons?.secondary);
+  publish("--veo-cta3", mode.buttons?.tertiary);
+  set("--veo-text", mode.colors.text);
+  set("--veo-text-secondary", mode.colors.textMuted);
+  set("--veo-font", appFont("inherit", doc));
+  set(
+    "--veo-actions-justify",
+    box.align === "distribute" || !primary ? JUSTIFY[box.align] : JUSTIFY[primary.align]
+  );
+  const form = mode.form;
+  if (form) {
+    card.classList.add("veo-card--themed-form");
+    const fp = form.padding;
+    set("--veo-f-bg", form.background);
+    set("--veo-f-accent", form.accent);
+    set("--veo-f-on-accent", form.onAccent);
+    set("--veo-f-pad", `${fp.top}px ${fp.right}px ${fp.bottom}px ${fp.left}px`);
+    if (typeof form.borderWidth === "number" && form.borderColor) {
+      set(
+        "--veo-f-border",
+        form.borderWidth > 0 ? `${form.borderWidth}px solid ${form.borderColor}` : "none"
+      );
+    }
+    if (typeof form.borderRadius === "number") set("--veo-f-radius", `${form.borderRadius}px`);
+    if (form.shadow && form.shadowColor) {
+      set("--veo-f-shadow", boxShadow(form.shadow, form.shadowColor));
+    }
+    for (const [name, t] of [
+      ["primary", form.text.primary],
+      ["secondary", form.text.secondary]
+    ]) {
+      set(`--veo-f-${name}-color`, t.color);
+      set(`--veo-f-${name}-size`, `${t.fontSize}px`);
+      set(`--veo-f-${name}-weight`, String(t.fontWeight));
+      set(`--veo-f-${name}-align`, t.align);
+      set(`--veo-f-${name}-font`, appFont(t.fontFamily, doc));
+    }
+  }
+  const tip = tooltip ? mode.tooltip?.text : void 0;
+  const tokens = [
+    ["title", tip?.primary ?? mode.text.title],
+    ["subtitle", tip?.secondary ?? mode.text.subtitle],
+    ["paragraph", tip?.secondary ?? mode.text.paragraph]
+  ];
+  for (const [name, t] of tokens) {
+    set(`--veo-t-${name}-color`, t.color);
+    set(`--veo-t-${name}-size`, `${t.fontSize}px`);
+    set(`--veo-t-${name}-weight`, String(t.fontWeight));
+    set(`--veo-t-${name}-align`, t.align);
+    set(`--veo-t-${name}-font`, appFont(t.fontFamily, doc));
+  }
+}
+
 // src/plugins/guides/layout.ts
 function groupLayout(blocks) {
   const rows = /* @__PURE__ */ new Map();
@@ -3370,6 +3711,11 @@ function applyRowStyle(rowEl, style) {
   if (style.valign && ROW_VALIGN[style.valign]) s.alignItems = ROW_VALIGN[style.valign];
 }
 var CompositeRenderer = class extends BaseRenderer {
+  constructor() {
+    super(...arguments);
+    /** Alineación de filas de botones según el tema del workspace (null = sin tema). */
+    this.themeRowJustify = null;
+  }
   async render(context) {
     const idx = context.nav?.stepIndex ?? 0;
     const step = context.guide.guideSteps[idx];
@@ -3400,7 +3746,13 @@ var CompositeRenderer = class extends BaseRenderer {
     if (typeof design.zIndex === "number") host.style.zIndex = String(design.zIndex);
     const card = doc.createElement("div");
     card.className = "veo-card";
-    applyCompositeDesign(card, design);
+    const themeMode = themeModeFor(context.guide.theme, design);
+    const inline = step.presentation === "inline";
+    const tooltipLike = !inline && (badgeMode || step.position === "relative-to-element");
+    if (themeMode) applyThemeVars(card, themeMode, inline, tooltipLike);
+    this.themeRowJustify = themeMode ? (preset) => themeRowJustify(themeMode, inline, preset) : null;
+    const cardDesign = themeMode ? { ...themeContainerDesign(themeMode, inline, tooltipLike), ...design } : design;
+    applyCompositeDesign(card, cardDesign);
     if (typeof design.ariaLabel === "string" && design.ariaLabel.trim()) {
       card.setAttribute("role", "dialog");
       card.setAttribute("aria-label", design.ariaLabel.trim());
@@ -3471,7 +3823,7 @@ var CompositeRenderer = class extends BaseRenderer {
         });
       }
       card.appendChild(closeBtn);
-      reserveCloseSpace(card, blocks, closePos, design);
+      reserveCloseSpace(card, blocks, closePos, cardDesign);
     }
     if (badgeMode && anchor) {
       closeTooltip = this.renderBadgeMode(
@@ -3484,7 +3836,8 @@ var CompositeRenderer = class extends BaseRenderer {
         doc,
         context,
         idx,
-        design
+        // Con el tema ya fundido: la flecha del tooltip toma su fondo y borde.
+        cardDesign
       );
       return;
     }
@@ -3507,7 +3860,7 @@ var CompositeRenderer = class extends BaseRenderer {
       }
       const wrapper = doc.createElement("div");
       wrapper.className = "veo-composite-anchored";
-      const caretEl = design.caret === false ? null : makeCaret(doc, design);
+      const caretEl = design.caret === false ? null : makeCaret(doc, cardDesign);
       if (caretEl) wrapper.appendChild(caretEl);
       wrapper.appendChild(card);
       root.appendChild(wrapper);
@@ -3567,6 +3920,7 @@ var CompositeRenderer = class extends BaseRenderer {
           const row = doc.createElement("div");
           row.className = "veo-guide-actions";
           let rowAlign;
+          const firstPreset = b.style?.preset;
           while (i < cell.length && cell[i]?.block.type === "button") {
             const { block: bb, index: bi } = cell[i];
             if (!rowAlign) {
@@ -3577,6 +3931,10 @@ var CompositeRenderer = class extends BaseRenderer {
             i++;
           }
           if (rowAlign) row.style.justifyContent = ROW_ALIGN[rowAlign] ?? "flex-end";
+          else {
+            const themed = this.themeRowJustify?.(firstPreset);
+            if (themed) row.style.justifyContent = themed;
+          }
           container.appendChild(row);
           continue;
         }
@@ -3989,6 +4347,7 @@ function makeCaret(doc, design) {
   if (typeof design.borderWidth === "number" && design.borderWidth > 0) {
     const bc = typeof design.borderColor === "string" ? design.borderColor : "#bbbbbb";
     s.border = `${design.borderWidth}px solid ${bc}`;
+    caret.dataset.veoBorder = String(design.borderWidth);
   }
   return caret;
 }
@@ -4723,7 +5082,8 @@ function normalize(input) {
     guideSteps: input.guideSteps,
     activationRules,
     displayFrequency: "always",
-    displayPriority: 0
+    displayPriority: 0,
+    ...input.theme ? { theme: input.theme } : {}
   };
 }
 function createSingleStepRenderer(type) {
@@ -4943,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(
@@ -5003,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;
@@ -5103,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; }
@@ -5722,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/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"
+// 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 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}`;
+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;
   }
-  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
@@ -5878,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();
@@ -5919,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");
@@ -5981,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);
@@ -6020,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),
@@ -6045,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();
@@ -7026,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":
@@ -7064,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;
       }
@@ -7073,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;
@@ -7157,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,