veo-sdk 0.6.1 → 0.6.3

package/dist/index.cjs

@@ -251,7 +251,8 @@ var init_constants = __esm({
       throttleMs: 100,
       maxTextLength: 200,
       captureElementMetadata: true,
-      captureAncestors: 5
+      captureAncestors: 5,
+      captureClickQuality: true
     };
     MAX_ANCESTORS = 10;
     ALWAYS_BLOCK_SELECTORS = [
@@ -902,6 +903,10 @@ function clampNum(n, min, max) {
   return Math.min(max, Math.max(min, n));
 }
 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) {
@@ -918,8 +923,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);
     }
   }
@@ -1635,20 +1641,92 @@ var init_styles = __esm({
 .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 {
@@ -2030,8 +2108,18 @@ 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";
+  }
 }
-var STATIC_SIDE;
+var STATIC_SIDE, OUTER_EDGES;
 var init_floating_arrow = __esm({
   "src/plugins/guides/renderers/floating-arrow.ts"() {
     STATIC_SIDE = {
@@ -2040,6 +2128,12 @@ var init_floating_arrow = __esm({
       left: "right",
       right: "left"
     };
+    OUTER_EDGES = {
+      top: ["top", "left"],
+      right: ["top", "right"],
+      bottom: ["bottom", "right"],
+      left: ["bottom", "left"]
+    };
   }
 });
 function readBadgeConfig(step) {
@@ -3213,6 +3307,173 @@ var init_form_content = __esm({
   }
 });
 
+// src/plugins/guides/guide-theme.ts
+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));
+  }
+}
+var WORKSPACE_THEME_ID, SHADOW_SPEC, JUSTIFY;
+var init_guide_theme = __esm({
+  "src/plugins/guides/guide-theme.ts"() {
+    WORKSPACE_THEME_ID = "workspace";
+    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 }
+    };
+    JUSTIFY = {
+      left: "flex-start",
+      center: "center",
+      right: "flex-end",
+      distribute: "space-between"
+    };
+  }
+});
+
 // src/plugins/guides/layout.ts
 function groupLayout(blocks) {
   const rows = /* @__PURE__ */ new Map();
@@ -3673,6 +3934,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;
 }
@@ -3765,6 +4027,7 @@ var init_composite_renderer = __esm({
     init_checklist_block();
     init_code_block();
     init_form_content();
+    init_guide_theme();
     init_inline_host();
     init_layout();
     init_rich_text();
@@ -3786,6 +4049,11 @@ var init_composite_renderer = __esm({
       bottom: "flex-end"
     };
     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];
@@ -3816,7 +4084,13 @@ var init_composite_renderer = __esm({
         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());
@@ -3887,7 +4161,7 @@ var init_composite_renderer = __esm({
             });
           }
           card.appendChild(closeBtn);
-          reserveCloseSpace(card, blocks, closePos, design);
+          reserveCloseSpace(card, blocks, closePos, cardDesign);
         }
         if (badgeMode && anchor) {
           closeTooltip = this.renderBadgeMode(
@@ -3900,7 +4174,8 @@ var init_composite_renderer = __esm({
             doc,
             context,
             idx,
-            design
+            // Con el tema ya fundido: la flecha del tooltip toma su fondo y borde.
+            cardDesign
           );
           return;
         }
@@ -3923,7 +4198,7 @@ var init_composite_renderer = __esm({
           }
           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);
@@ -3983,6 +4258,7 @@ var init_composite_renderer = __esm({
               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) {
@@ -3993,6 +4269,10 @@ var init_composite_renderer = __esm({
                 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;
             }
@@ -4959,7 +5239,8 @@ function normalize(input) {
     guideSteps: input.guideSteps,
     activationRules,
     displayFrequency: "always",
-    displayPriority: 0
+    displayPriority: 0,
+    ...input.theme ? { theme: input.theme } : {}
   };
 }
 function createSingleStepRenderer(type) {
@@ -5410,14 +5691,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(
@@ -5470,8 +5756,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;
@@ -5591,6 +5882,8 @@ var init_builder_chrome = __esm({
   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; }
@@ -5741,9 +6034,9 @@ function injectBuilderPanel(opts) {
   card.className = "veo-panel";
   let topOffset = opts.topOffset ?? 0;
   let left = 40;
-  let top = topOffset + MARGIN;
+  let top2 = topOffset + MARGIN;
   card.style.left = `${left}px`;
-  card.style.top = `${top}px`;
+  card.style.top = `${top2}px`;
   card.style.width = `${PANEL_W}px`;
   card.style.height = `${PANEL_H}px`;
   const header = document.createElement("div");
@@ -5787,7 +6080,7 @@ function injectBuilderPanel(opts) {
       if (!compactRestore) compactRestore = { w: card.offsetWidth, h: card.offsetHeight };
       card.style.minHeight = "0";
       card.style.width = `${clamp3(Math.round(size.width), MIN_W, window.innerWidth - MARGIN * 2)}px`;
-      card.style.height = `${clamp3(Math.round(size.height) + HEADER_H, HEADER_H + 80, window.innerHeight - top - MARGIN)}px`;
+      card.style.height = `${clamp3(Math.round(size.height) + HEADER_H, HEADER_H + 80, window.innerHeight - top2 - MARGIN)}px`;
     } else if (compactRestore) {
       card.style.minHeight = "";
       card.style.width = `${compactRestore.w}px`;
@@ -5798,19 +6091,19 @@ function injectBuilderPanel(opts) {
   maximize.addEventListener("click", () => {
     maximized = !maximized;
     if (maximized) {
-      restore = { left, top, w: card.offsetWidth, h: card.offsetHeight };
+      restore = { left, top: top2, w: card.offsetWidth, h: card.offsetHeight };
       left = MARGIN;
-      top = topOffset + MARGIN;
+      top2 = topOffset + MARGIN;
       card.style.left = `${left}px`;
-      card.style.top = `${top}px`;
+      card.style.top = `${top2}px`;
       card.style.width = `${Math.max(MIN_W, window.innerWidth - MARGIN * 2)}px`;
-      card.style.height = `${Math.max(MIN_H, window.innerHeight - top - MARGIN)}px`;
+      card.style.height = `${Math.max(MIN_H, window.innerHeight - top2 - MARGIN)}px`;
       maximize.title = "Restaurar";
     } else if (restore) {
       left = restore.left;
-      top = restore.top;
+      top2 = restore.top;
       card.style.left = `${left}px`;
-      card.style.top = `${top}px`;
+      card.style.top = `${top2}px`;
       card.style.width = `${restore.w}px`;
       card.style.height = `${restore.h}px`;
       maximize.title = "Maximizar";
@@ -5846,13 +6139,13 @@ function injectBuilderPanel(opts) {
     const sx = e.clientX;
     const sy = e.clientY;
     const ol = left;
-    const ot = top;
+    const ot = top2;
     iframe.style.pointerEvents = "none";
     const move = (ev) => {
       left = clamp3(ol + (ev.clientX - sx), 0, Math.max(0, window.innerWidth - card.offsetWidth));
-      top = clamp3(ot + (ev.clientY - sy), topOffset, Math.max(topOffset, window.innerHeight - 40));
+      top2 = clamp3(ot + (ev.clientY - sy), topOffset, Math.max(topOffset, window.innerHeight - 40));
       card.style.left = `${left}px`;
-      card.style.top = `${top}px`;
+      card.style.top = `${top2}px`;
     };
     const up = () => {
       window.removeEventListener("mousemove", move);
@@ -5898,9 +6191,9 @@ function injectBuilderPanel(opts) {
     isVisible: () => visible,
     setTopOffset: (px) => {
       topOffset = px;
-      if (top < topOffset + MARGIN) {
-        top = topOffset + MARGIN;
-        card.style.top = `${top}px`;
+      if (top2 < topOffset + MARGIN) {
+        top2 = topOffset + MARGIN;
+        card.style.top = `${top2}px`;
       }
     }
   };
@@ -6081,9 +6374,9 @@ function attachModal(opts, shadow, card) {
     const span = window.innerWidth - w;
     return span <= 0 ? 0.5 : round3(clamp4(left / span, 0, 1));
   };
-  const posYFor = (top, h) => {
+  const posYFor = (top2, h) => {
     const span = window.innerHeight - h;
-    return span <= 0 ? 0.5 : round3(clamp4(top / span, 0, 1));
+    return span <= 0 ? 0.5 : round3(clamp4(top2 / span, 0, 1));
   };
   const onCardDown = (e) => {
     if (isInteractive(e.target)) return;
@@ -6223,6 +6516,65 @@ var init_design_manipulator = __esm({
   }
 });
 
+// src/plugins/builder/interactive-elements.ts
+function isInteractiveElement(element) {
+  try {
+    return element.matches(INTERACTIVE_SELECTOR);
+  } catch {
+    return false;
+  }
+}
+function closestInteractive(element) {
+  try {
+    return element.closest(INTERACTIVE_SELECTOR);
+  } catch {
+    return null;
+  }
+}
+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);
+}
+var INTERACTIVE_ROLES, INTERACTIVE_SELECTOR, EMOJI_RE;
+var init_interactive_elements = __esm({
+  "src/plugins/builder/interactive-elements.ts"() {
+    INTERACTIVE_ROLES = [
+      "button",
+      "link",
+      "tab",
+      "menuitem",
+      "menuitemcheckbox",
+      "menuitemradio",
+      "checkbox",
+      "radio",
+      "switch",
+      "option",
+      "combobox",
+      "textbox",
+      "searchbox",
+      "slider",
+      "spinbutton"
+    ];
+    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(", ");
+    EMOJI_RE = /\p{Extended_Pictographic}|\p{Emoji_Modifier}|\u{FE0F}|\u{200D}|\u{20E3}/gu;
+  }
+});
+
 // src/plugins/builder/element-picker.ts
 function startElementPicker(options) {
   if (!hasDocument()) {
@@ -6241,6 +6593,7 @@ var init_element_picker = __esm({
   "src/plugins/builder/element-picker.ts"() {
     init_safe_env();
     init_selector_builder();
+    init_interactive_elements();
     PICKER_Z = 2147483646;
     PICKER_HOST_ATTR = "data-veo-picker";
     DEFAULT_MAX_ANCESTORS = 5;
@@ -6310,21 +6663,24 @@ var init_element_picker = __esm({
         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();
@@ -6351,6 +6707,7 @@ var init_element_picker = __esm({
       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");
@@ -6413,9 +6770,19 @@ var init_element_picker = __esm({
         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);
@@ -6452,7 +6819,7 @@ var init_element_picker = __esm({
           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),
@@ -7448,7 +7815,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":
@@ -7486,7 +7853,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;
       }
@@ -7495,6 +7863,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;
@@ -7579,10 +7956,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,
@@ -7710,10 +8231,12 @@ function previewProgressFetcher() {
     return data.items ?? [];
   };
 }
+var CONFIRMATION_STYLES;
 var init_builder_mode = __esm({
   "src/plugins/builder/builder-mode.ts"() {
     init_builder_token();
     init_safe_env();
+    init_selector_builder();
     init_activation_devices();
     init_activation_rules();
     init_block_builder();
@@ -7728,6 +8251,42 @@ var init_builder_mode = __esm({
     init_builder_panel();
     init_design_manipulator();
     init_element_picker();
+    init_interactive_elements();
+    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; }
+`;
   }
 });
 
@@ -7860,11 +8419,15 @@ var init_builder_session = __esm({
 // src/plugins/builder/index.ts
 var builder_exports = {};
 __export(builder_exports, {
+  INTERACTIVE_SELECTOR: () => INTERACTIVE_SELECTOR,
   VEO_BLOCK_MIME: () => VEO_BLOCK_MIME,
   attachBlockDropTarget: () => attachBlockDropTarget,
   attachDesignManipulator: () => attachDesignManipulator,
+  closestInteractive: () => closestInteractive,
   createBuilderSession: () => createBuilderSession,
+  elementLabelText: () => elementLabelText,
   initBuilderMode: () => initBuilderMode,
+  isInteractiveElement: () => isInteractiveElement,
   startElementPicker: () => startElementPicker,
   stopElementPicker: () => stopElementPicker
 });
@@ -7875,6 +8438,472 @@ var init_builder = __esm({
     init_builder_session();
     init_design_manipulator();
     init_element_picker();
+    init_interactive_elements();
+  }
+});
+
+// src/plugins/theme-detect/color.ts
+function parseRgb(value) {
+  const m = RGB_RX.exec(value.trim());
+  if (!m) return null;
+  const a = m[4] === void 0 ? 1 : m[4].endsWith("%") ? Number.parseFloat(m[4]) / 100 : +m[4];
+  return [+m[1], +m[2], +m[3], a];
+}
+function toCssColor(raw) {
+  const v = raw.trim();
+  const parts = v.split(/[\s,/]+/).filter(Boolean);
+  const bare = parts.length >= 3 && parts.every((p) => /^-?[\d.]+(%|deg)?$/.test(p));
+  if (!bare) return v;
+  return v.includes("%") ? `hsl(${v})` : `rgb(${v})`;
+}
+function looksLikeColor(raw) {
+  const v = raw.trim();
+  if (!v || v.length > 64) return false;
+  return /^(#|rgb|hsl|hwb|lab|lch|oklab|oklch|color\(|color-mix|light-dark)/i.test(v) || toCssColor(v) !== v;
+}
+function flatten(c, bg) {
+  if (c[3] >= 1) return c;
+  const mix = (i) => Math.round(c[i] * c[3] + bg[i] * (1 - c[3]));
+  return [mix(0), mix(1), mix(2), 1];
+}
+function toHex(c) {
+  const h = (n) => Math.round(n).toString(16).padStart(2, "0");
+  return `#${h(c[0])}${h(c[1])}${h(c[2])}`.toUpperCase();
+}
+function luminance(c) {
+  return (0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2]) / 255;
+}
+function saturation(c) {
+  const mx = Math.max(c[0], c[1], c[2]) / 255;
+  const mn = Math.min(c[0], c[1], c[2]) / 255;
+  const l = (mx + mn) / 2;
+  return mx === mn ? 0 : (mx - mn) / (1 - Math.abs(2 * l - 1));
+}
+function createColorResolver(doc) {
+  const probe = doc.createElement("span");
+  probe.style.display = "none";
+  doc.body.appendChild(probe);
+  const view = doc.defaultView;
+  let ctx;
+  const cache = /* @__PURE__ */ new Map();
+  const viaCanvas = (computed) => {
+    if (ctx === void 0) {
+      try {
+        const canvas = doc.createElement("canvas");
+        canvas.width = 1;
+        canvas.height = 1;
+        ctx = canvas.getContext("2d", { willReadFrequently: true });
+      } catch {
+        ctx = null;
+      }
+    }
+    if (!ctx) return null;
+    ctx.clearRect(0, 0, 1, 1);
+    ctx.fillStyle = "#000";
+    ctx.fillStyle = computed;
+    ctx.fillRect(0, 0, 1, 1);
+    const d = ctx.getImageData(0, 0, 1, 1).data;
+    return [d[0] ?? 0, d[1] ?? 0, d[2] ?? 0, (d[3] ?? 255) / 255];
+  };
+  return {
+    resolve(raw) {
+      const key = raw.trim();
+      if (!key || !view) return null;
+      const hit = cache.get(key);
+      if (hit !== void 0) return hit;
+      let out = null;
+      probe.style.color = "";
+      probe.style.color = toCssColor(key);
+      if (probe.style.color) {
+        const computed = view.getComputedStyle(probe).color;
+        out = parseRgb(computed) ?? viaCanvas(computed);
+      }
+      cache.set(key, out);
+      return out;
+    },
+    dispose() {
+      probe.remove();
+    }
+  };
+}
+var RGB_RX;
+var init_color = __esm({
+  "src/plugins/theme-detect/color.ts"() {
+    RGB_RX = /^rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)(?:\s*[,/]\s*([\d.]+%?))?\s*\)$/;
+  }
+});
+
+// src/plugins/theme-detect/fonts.ts
+function cleanFamily(name) {
+  return name.trim().replace(/^["']|["']$/g, "");
+}
+function primaryFamily(stack) {
+  const families = stack.split(",").map(cleanFamily).filter(Boolean);
+  return families.find((f) => !GENERIC.test(f) && !/fallback/i.test(f)) ?? families[0] ?? "";
+}
+function prettyFamily(family) {
+  return family.replace(/^__/, "").replace(/_Fallback_[0-9a-f]+$/i, " Fallback").replace(/_[0-9a-f]{6,}$/i, "").replace(/_/g, " ").trim();
+}
+function describeFont(doc, el2, faces) {
+  const view = doc.defaultView;
+  if (!el2 || !view) return void 0;
+  const family = primaryFamily(view.getComputedStyle(el2).fontFamily);
+  if (!family) return void 0;
+  const font = {
+    name: prettyFamily(family).slice(0, 80),
+    family: family.slice(0, 120)
+  };
+  const weights = /* @__PURE__ */ new Set();
+  try {
+    for (const face of Array.from(doc.fonts ?? [])) {
+      if (cleanFamily(face.family) === family && face.status === "loaded") weights.add(face.weight);
+    }
+  } catch {
+  }
+  if (weights.size > 0) font.weights = [...weights].sort().join(" ").slice(0, 80);
+  const own = faces.filter((f) => f.family === family);
+  const url = own.find((f) => f.url)?.url ?? null;
+  let origin = null;
+  try {
+    origin = url ? new URL(url, doc.baseURI).origin : null;
+  } catch {
+    origin = null;
+  }
+  const links = Array.from(doc.querySelectorAll("link[href]")).map((l) => l.href);
+  if (origin) {
+    font.hosting = origin.includes("fonts.gstatic.com") ? "google" : origin === view.location.origin ? "self" : "external";
+  } else if (own.length > 0) {
+    font.hosting = "self";
+  } else if (links.some((h) => h.includes("fonts.googleapis.com"))) {
+    font.hosting = "google";
+  } else if (links.some((h) => h.includes("use.typekit.net"))) {
+    font.hosting = "adobe";
+  } else {
+    font.hosting = "system";
+  }
+  return font;
+}
+var GENERIC;
+var init_fonts = __esm({
+  "src/plugins/theme-detect/fonts.ts"() {
+    GENERIC = /^(serif|sans-serif|monospace|cursive|fantasy|system-ui|ui-sans-serif|ui-serif|ui-monospace|ui-rounded|emoji|math|fangsong|inherit|initial|-apple-system|BlinkMacSystemFont|Segoe UI|Roboto|Helvetica|Helvetica Neue|Arial|Noto Sans|Apple Color Emoji|Segoe UI Emoji|Segoe UI Symbol|Noto Color Emoji)$/i;
+  }
+});
+
+// src/plugins/theme-detect/detect-theme.ts
+var detect_theme_exports = {};
+__export(detect_theme_exports, {
+  detectTheme: () => detectTheme,
+  snapshotHash: () => snapshotHash
+});
+function scanSheets(doc) {
+  const scan = {
+    names: /* @__PURE__ */ new Set(),
+    byMode: { light: /* @__PURE__ */ new Map(), dark: /* @__PURE__ */ new Map() },
+    faces: []
+  };
+  const walk = (rules, inDarkMedia) => {
+    for (const rule of Array.from(rules)) {
+      const style = rule.style;
+      const selector = rule.selectorText;
+      if (rule.constructor.name === "CSSFontFaceRule" && style) {
+        const src = style.getPropertyValue("src");
+        const url = /url\(["']?([^"')]+)["']?\)/.exec(src)?.[1] ?? null;
+        scan.faces.push({ family: cleanFamily(style.getPropertyValue("font-family")), url });
+      } else if (style && typeof selector === "string") {
+        const selectors = selector.split(",").map((s) => s.trim());
+        const mode = selectors.some((s) => DARK_SELECTOR.test(s)) ? "dark" : selectors.some((s) => LIGHT_SELECTOR.test(s)) ? inDarkMedia ? "dark" : "light" : null;
+        for (const prop of Array.from(style)) {
+          if (!prop.startsWith("--")) continue;
+          scan.names.add(prop);
+          if (mode) scan.byMode[mode].set(prop, style.getPropertyValue(prop).trim());
+        }
+      }
+      const nested = rule.cssRules;
+      if (nested) {
+        const media = rule.conditionText ?? "";
+        walk(nested, inDarkMedia || /prefers-color-scheme:\s*dark/.test(media));
+      }
+    }
+  };
+  for (const sheet of Array.from(doc.styleSheets)) {
+    try {
+      walk(sheet.cssRules, false);
+    } catch {
+    }
+  }
+  return scan;
+}
+function top(counts) {
+  let best = null;
+  let max = 0;
+  for (const [hex, n] of counts) {
+    if (n > max) {
+      max = n;
+      best = hex;
+    }
+  }
+  return best;
+}
+function detectTheme(doc = document) {
+  const view = doc.defaultView;
+  const body = doc.body;
+  if (!view || !body) return null;
+  const html = doc.documentElement;
+  const colors = createColorResolver(doc);
+  const modeProbe = doc.createElement("div");
+  try {
+    const bodyCs = view.getComputedStyle(body);
+    let bg = [255, 255, 255, 1];
+    for (const el2 of [body, html]) {
+      const c = colors.resolve(view.getComputedStyle(el2).backgroundColor);
+      if (c && c[3] > 0) {
+        bg = flatten(c, [255, 255, 255, 1]);
+        break;
+      }
+    }
+    const text = flatten(colors.resolve(bodyCs.color) ?? [0, 0, 0, 1], bg);
+    const textHex = toHex(text);
+    const muted = /* @__PURE__ */ new Map();
+    const border = /* @__PURE__ */ new Map();
+    const accent = /* @__PURE__ */ new Map();
+    const link = /* @__PURE__ */ new Map();
+    const bump = (m, k) => {
+      m.set(k, (m.get(k) ?? 0) + 1);
+    };
+    const contrast = Math.abs(luminance(text) - luminance(bg));
+    const elements = Array.from(body.querySelectorAll("*")).slice(0, MAX_ELEMENTS);
+    for (const el2 of elements) {
+      if (el2.getClientRects().length === 0) continue;
+      const cs = view.getComputedStyle(el2);
+      const hasText = Array.from(el2.childNodes).some(
+        (n) => n.nodeType === 3 && (n.textContent ?? "").trim() !== ""
+      );
+      if (hasText) {
+        const c = colors.resolve(cs.color);
+        if (c && c[3] > 0) {
+          const flat = flatten(c, bg);
+          const hex = toHex(flat);
+          const softer = Math.abs(luminance(flat) - luminance(bg)) < contrast;
+          if (hex !== textHex && saturation(flat) < 0.3 && softer) bump(muted, hex);
+          if (el2.closest("a") && saturation(flat) >= 0.3) bump(link, hex);
+        }
+      }
+      if (Number.parseFloat(cs.borderTopWidth) > 0 && cs.borderTopStyle !== "none") {
+        const c = colors.resolve(cs.borderTopColor);
+        if (c && c[3] > 0) {
+          const flat = flatten(c, bg);
+          if (saturation(flat) < 0.3 && toHex(flat) !== textHex) bump(border, toHex(flat));
+        }
+      }
+      if (el2.matches('button,[role="button"],input[type="submit"],a[class*="btn"],a[class*="button"]')) {
+        const c = colors.resolve(cs.backgroundColor);
+        if (c && c[3] > 0.5 && saturation(c) >= 0.3) bump(accent, toHex(c));
+      }
+    }
+    const meta = doc.querySelector('meta[name="theme-color"]');
+    const metaColor = meta ? colors.resolve(meta.content) : null;
+    const sampled = {
+      background: toHex(bg),
+      text: textHex
+    };
+    const sampledAccent = top(accent) ?? top(link) ?? (metaColor ? toHex(metaColor) : null);
+    if (sampledAccent) sampled.accent = sampledAccent;
+    const sampledMuted = top(muted);
+    if (sampledMuted) sampled.textMuted = sampledMuted;
+    const sampledBorder = top(border);
+    if (sampledBorder) sampled.border = sampledBorder;
+    const hints = [
+      html.className,
+      html.dataset.theme,
+      html.dataset.mode,
+      body.className,
+      body.dataset.theme
+    ].join(" ").toLowerCase();
+    const mode = /\bdark\b/.test(hints) ? "dark" : /\blight\b/.test(hints) ? "light" : view.getComputedStyle(html).colorScheme === "dark" || luminance(bg) < 0.4 ? "dark" : "light";
+    const other = mode === "dark" ? "light" : "dark";
+    modeProbe.className = other;
+    modeProbe.dataset.theme = other;
+    modeProbe.dataset.mode = other;
+    modeProbe.style.cssText = `display:none;color-scheme:${other}`;
+    body.appendChild(modeProbe);
+    const probeCs = view.getComputedStyle(modeProbe);
+    const hexOf = (raw, over) => {
+      if (!looksLikeColor(raw)) return null;
+      const c = colors.resolve(raw);
+      if (!c || c[3] === 0) return null;
+      if (c[3] > 0.98) return toHex(c);
+      return over ? toHex(flatten(c, over)) : null;
+    };
+    const scan = scanSheets(doc);
+    const roleVar = {};
+    const current = {};
+    for (const role of ROLES) {
+      for (const name of KNOWN_VARS[role]) {
+        const hex = hexOf(bodyCs.getPropertyValue(name), bg);
+        if (hex) {
+          roleVar[role] = { name, confidence: 3 };
+          current[role] = { hex, confidence: 3 };
+          break;
+        }
+      }
+    }
+    const missing = ROLES.filter((r) => !roleVar[r] && sampled[r]);
+    if (missing.length > 0) {
+      const candidates = [];
+      for (const name of Array.from(scan.names).slice(0, MAX_VARS)) {
+        const cur = hexOf(bodyCs.getPropertyValue(name));
+        if (cur) candidates.push({ name, cur, oth: hexOf(probeCs.getPropertyValue(name)) });
+      }
+      for (const role of missing) {
+        let best = null;
+        for (const c of candidates) {
+          if (c.cur !== sampled[role]) continue;
+          const score = (ROLE_NAME[role].test(c.name) ? 2 : 0) + (c.oth && c.oth !== c.cur ? 2 : 0) - (PALETTE_NAME.test(c.name) ? 1 : 0);
+          if (!best || score > best.score) best = { name: c.name, score };
+        }
+        if (best && best.score >= 2) roleVar[role] = { name: best.name, confidence: 2 };
+      }
+    }
+    for (const role of ROLES) {
+      const hex = sampled[role];
+      if (!current[role] && hex) current[role] = { hex, confidence: roleVar[role] ? 2 : 1 };
+    }
+    const otherPalette = {};
+    let differs = false;
+    const otherOrder = ["background", "accent", "text", "textMuted", "border"];
+    let otherBg = null;
+    const noteBg = (role, hex) => {
+      if (role === "background") otherBg = colors.resolve(hex);
+    };
+    for (const role of otherOrder) {
+      const ref = roleVar[role];
+      if (!ref) continue;
+      const hex = hexOf(probeCs.getPropertyValue(ref.name), otherBg);
+      if (!hex) continue;
+      noteBg(role, hex);
+      otherPalette[role] = { hex, confidence: ref.confidence };
+      if (hex !== current[role]?.hex) differs = true;
+    }
+    if (!differs) {
+      for (const role of ROLES) delete otherPalette[role];
+      otherBg = null;
+      const sheet = scan.byMode[other];
+      const resolveVar = (value, depth = 0) => depth > 6 ? value : value.replace(
+        /var\(\s*(--[\w-]+)\s*(?:,\s*([^()]*))?\)/g,
+        (_m, name, fb) => resolveVar(
+          sheet.get(name) ?? scan.byMode.light.get(name) ?? (bodyCs.getPropertyValue(name).trim() || fb || ""),
+          depth + 1
+        )
+      );
+      for (const role of otherOrder) {
+        const ref = roleVar[role];
+        const raw = ref ? sheet.get(ref.name) : void 0;
+        const hex = raw ? hexOf(resolveVar(raw), otherBg) : null;
+        if (!hex) continue;
+        noteBg(role, hex);
+        otherPalette[role] = { hex, confidence: 2 };
+        if (hex !== current[role]?.hex) differs = true;
+      }
+    }
+    const palettes = { [mode]: current };
+    if (differs) palettes[other] = otherPalette;
+    const firstVisible = (selector) => Array.from(doc.querySelectorAll(selector)).find(
+      (el2) => el2.getClientRects().length > 0 && (el2.textContent ?? "").trim() !== ""
+    ) ?? null;
+    const bodyFont = describeFont(doc, body, scan.faces);
+    const headingFont = describeFont(doc, firstVisible("h1,h2,h3"), scan.faces);
+    const fonts = {};
+    if (bodyFont) fonts.body = bodyFont;
+    if (headingFont) fonts.heading = headingFont;
+    const snapshot = { host: view.location.host, mode, palettes };
+    const appName = doc.title.trim().slice(0, 120);
+    if (appName) snapshot.appName = appName;
+    if (fonts.body || fonts.heading) snapshot.fonts = fonts;
+    return snapshot;
+  } finally {
+    colors.dispose();
+    modeProbe.remove();
+  }
+}
+function snapshotHash(snapshot) {
+  const colorsOf = (p) => ROLES.map((r) => {
+    const c = p?.[r];
+    return c ? `${c.hex}${c.confidence}` : "-";
+  }).join("");
+  return [
+    snapshot.host,
+    colorsOf(snapshot.palettes.light),
+    colorsOf(snapshot.palettes.dark),
+    snapshot.fonts?.body?.family ?? "",
+    snapshot.fonts?.heading?.family ?? ""
+  ].join("|");
+}
+var ROLES, KNOWN_VARS, ROLE_NAME, PALETTE_NAME, DARK_SELECTOR, LIGHT_SELECTOR, MAX_ELEMENTS, MAX_VARS;
+var init_detect_theme = __esm({
+  "src/plugins/theme-detect/detect-theme.ts"() {
+    init_color();
+    init_fonts();
+    ROLES = ["accent", "text", "textMuted", "background", "border"];
+    KNOWN_VARS = {
+      accent: [
+        "--primary",
+        "--color-primary",
+        "--brand",
+        "--color-brand",
+        "--brand-primary",
+        "--mui-palette-primary-main",
+        "--bs-primary",
+        "--ant-color-primary",
+        "--chakra-colors-brand-500",
+        "--accent-color",
+        "--accent"
+      ],
+      text: [
+        "--foreground",
+        "--color-foreground",
+        "--text",
+        "--color-text",
+        "--text-primary",
+        "--bs-body-color",
+        "--mui-palette-text-primary"
+      ],
+      textMuted: [
+        "--muted-foreground",
+        "--color-muted-foreground",
+        "--text-muted",
+        "--text-secondary",
+        "--bs-secondary-color",
+        "--mui-palette-text-secondary"
+      ],
+      background: [
+        "--background",
+        "--color-background",
+        "--bg",
+        "--color-bg",
+        "--bs-body-bg",
+        "--mui-palette-background-default"
+      ],
+      border: [
+        "--border",
+        "--color-border",
+        "--border-color",
+        "--bs-border-color",
+        "--mui-palette-divider"
+      ]
+    };
+    ROLE_NAME = {
+      accent: /brand|primary|accent|main/i,
+      text: /text|foreground|\bfg\b|-fg|ink|content|body/i,
+      textMuted: /muted|secondary|subtle|soft|hint|placeholder|text|-fg/i,
+      background: /background|\bbg\b|-bg|surface|canvas|page|base/i,
+      border: /border|line|divider|stroke|outline|separator/i
+    };
+    PALETTE_NAME = /-(50|[1-9]00|950)$|white|black/i;
+    DARK_SELECTOR = /\.dark\b|\[data-(theme|mode|color-scheme)=["']?dark|\.theme-dark|\.dark-theme/i;
+    LIGHT_SELECTOR = /^(:root|html|:host|body)$|\.light\b|\[data-(theme|mode)=["']?light/i;
+    MAX_ELEMENTS = 1500;
+    MAX_VARS = 600;
   }
 });
 
@@ -7949,6 +8978,298 @@ function definePlugin(plugin) {
 
 // src/plugins/autocapture/dom-listener.ts
 init_safe_env();
+
+// src/plugins/autocapture/click-quality.ts
+init_safe_env();
+init_selector_builder();
+var NO_DEAD_TAGS = /* @__PURE__ */ new Set(["input", "textarea", "select", "option", "label"]);
+var MAX_ERROR_MESSAGE = 200;
+var HISTORY_MS = 3e3;
+var DEFAULTS = {
+  reactionWindowMs: 1e3,
+  errorWindowMs: 2e3,
+  rageClicks: 3,
+  rageWindowMs: 1e3,
+  rageClicksSlow: 5,
+  rageWindowSlowMs: 3e3,
+  maxPerElement: 50
+};
+function describeError(value) {
+  let text;
+  if (value instanceof Error) text = `${value.name}: ${value.message}`;
+  else if (typeof value === "string") text = value;
+  else {
+    try {
+      text = JSON.stringify(value) ?? String(value);
+    } catch {
+      text = String(value);
+    }
+  }
+  return text.slice(0, MAX_ERROR_MESSAGE);
+}
+var ClickQualityTracker = class {
+  constructor(emit, options = {}) {
+    this.emit = emit;
+    this.installed = false;
+    this.cleanups = [];
+    // Sensores globales (contadores: cada observación compara su foto inicial).
+    this.netCount = 0;
+    this.navCount = 0;
+    this.focusCount = 0;
+    this.unloading = false;
+    this.errors = [];
+    this.history = /* @__PURE__ */ new Map();
+    this.bursts = /* @__PURE__ */ new Map();
+    this.emitted = /* @__PURE__ */ new Map();
+    this.opts = { ...DEFAULTS, ...options };
+  }
+  install() {
+    if (this.installed || !hasWindow()) return;
+    this.installed = true;
+    const on = (type, handler, capture = true) => {
+      window.addEventListener(type, handler, capture);
+      this.cleanups.push(() => window.removeEventListener(type, handler, capture));
+    };
+    on("error", (e) => {
+      const err = e;
+      this.pushError("error", err.error ?? err.message ?? "error");
+    });
+    on("unhandledrejection", (e) => {
+      this.pushError("unhandledrejection", e.reason ?? "rejection");
+    });
+    on("popstate", () => this.navCount++);
+    on("hashchange", () => this.navCount++);
+    on("focusin", () => this.focusCount++);
+    on("pagehide", () => {
+      this.unloading = true;
+    });
+    on("beforeunload", () => {
+      this.unloading = true;
+    });
+    this.patchHistory();
+    this.patchConsole();
+    this.patchFetch();
+    this.patchXhr();
+  }
+  destroy() {
+    for (const c of this.cleanups) c();
+    this.cleanups = [];
+    for (const b of this.bursts.values()) window.clearTimeout(b.timer);
+    this.bursts.clear();
+    this.history.clear();
+    this.installed = false;
+  }
+  /** Llamar por cada clic real sobre un elemento interactivo, ANTES del throttle. */
+  onClick(element, event) {
+    if (!this.installed) return;
+    const now = Date.now();
+    const obs = { at: now, reacted: false };
+    this.remember(element, obs);
+    this.observeReaction(element, obs, event);
+    this.observeErrors(element, now);
+    this.trackRage(element, now);
+  }
+  // ---------------------------------------------------------------- dead ----
+  observeReaction(element, obs, event) {
+    const netAtClick = this.netCount;
+    const navAtClick = this.navCount;
+    const focusAtClick = this.focusCount;
+    const hrefAtClick = window.location.href;
+    const skipDead = this.isDeadExempt(element, event);
+    let observer = null;
+    if (typeof MutationObserver !== "undefined") {
+      observer = new MutationObserver(() => {
+        obs.reacted = true;
+        observer?.disconnect();
+        observer = null;
+      });
+      observer.observe(document.documentElement, {
+        childList: true,
+        attributes: true,
+        characterData: true,
+        subtree: true
+      });
+    }
+    window.setTimeout(() => {
+      observer?.disconnect();
+      const reacted = obs.reacted || this.unloading || this.netCount !== netAtClick || this.navCount !== navAtClick || this.focusCount !== focusAtClick || window.location.href !== hrefAtClick;
+      obs.reacted = reacted;
+      if (!reacted && !skipDead) this.report("$dead_click", element, {});
+    }, this.opts.reactionWindowMs);
+  }
+  isDeadExempt(element, event) {
+    if (event && (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey)) return true;
+    if (event && typeof event.button === "number" && event.button !== 0) return true;
+    const tag = element.tagName.toLowerCase();
+    if (NO_DEAD_TAGS.has(tag)) return true;
+    if (element.closest('[contenteditable=""],[contenteditable="true"]')) return true;
+    const anchor = element.closest("a");
+    if (anchor) {
+      if (anchor.target === "_blank" || anchor.hasAttribute("download")) return true;
+      const href = anchor.getAttribute("href") ?? "";
+      if (/^(mailto|tel|sms):/i.test(href)) return true;
+    }
+    return false;
+  }
+  // --------------------------------------------------------------- error ----
+  observeErrors(element, clickedAt) {
+    const deadline = clickedAt + this.opts.errorWindowMs;
+    const check = () => {
+      const err = this.errors.find((e) => e.at >= clickedAt && e.at <= deadline);
+      if (err) {
+        this.report("$click_error", element, {
+          $error_source: err.source,
+          $error_message: err.message
+        });
+        return;
+      }
+      if (Date.now() < deadline) window.setTimeout(check, 250);
+    };
+    window.setTimeout(check, 250);
+  }
+  pushError(source, value) {
+    const message = describeError(value);
+    if (message.startsWith("[veo]")) return;
+    this.errors.push({ at: Date.now(), source, message });
+    const cutoff = Date.now() - this.opts.errorWindowMs - 1e3;
+    while (this.errors.length > 0 && this.errors[0].at < cutoff) {
+      this.errors.shift();
+    }
+    if (this.errors.length > 50) this.errors.splice(0, this.errors.length - 50);
+  }
+  // ---------------------------------------------------------------- rage ----
+  remember(element, obs) {
+    const list = this.history.get(element) ?? [];
+    const cutoff = obs.at - HISTORY_MS;
+    const kept = list.filter((o) => o.at >= cutoff);
+    kept.push(obs);
+    this.history.set(element, kept);
+    if (this.history.size > 100) {
+      for (const [el2, obsList] of this.history) {
+        if (obsList.every((o) => o.at < cutoff)) this.history.delete(el2);
+      }
+    }
+  }
+  trackRage(element, now) {
+    const list = this.history.get(element) ?? [];
+    const fast = list.filter((o) => o.at >= now - this.opts.rageWindowMs).length;
+    const slow = list.filter((o) => o.at >= now - this.opts.rageWindowSlowMs).length;
+    const existing = this.bursts.get(element);
+    const isRage = fast >= this.opts.rageClicks || slow >= this.opts.rageClicksSlow;
+    if (!existing && !isRage) return;
+    const burst = existing ?? {
+      startedAt: (list.find((o) => o.at >= now - this.opts.rageWindowSlowMs) ?? { at: now }).at,
+      count: 0,
+      timer: 0
+    };
+    burst.count = list.filter((o) => o.at >= burst.startedAt).length;
+    window.clearTimeout(burst.timer);
+    burst.timer = window.setTimeout(() => {
+      this.bursts.delete(element);
+      const clicks = (this.history.get(element) ?? []).filter((o) => o.at >= burst.startedAt);
+      this.report("$rage_click", element, {
+        $click_count: Math.max(clicks.length, burst.count),
+        $reacted_clicks: clicks.filter((o) => o.reacted).length
+      });
+    }, this.opts.reactionWindowMs + 50);
+    this.bursts.set(element, burst);
+  }
+  // ---------------------------------------------------------------- emit ----
+  report(kind, element, extra) {
+    const key = buildSelectorPath(element, 5);
+    const counts = this.emitted.get(key) ?? { $dead_click: 0, $rage_click: 0, $click_error: 0 };
+    if (counts[kind] >= this.opts.maxPerElement) return;
+    counts[kind]++;
+    this.emitted.set(key, counts);
+    try {
+      this.emit(kind, element, extra);
+    } catch {
+    }
+  }
+  // ------------------------------------------------------------- patches ----
+  patchHistory() {
+    const h = window.history;
+    if (!h) return;
+    const origPush = h.pushState;
+    const origReplace = h.replaceState;
+    const self = this;
+    h.pushState = function(...args) {
+      self.navCount++;
+      return origPush.apply(this, args);
+    };
+    h.replaceState = function(...args) {
+      self.navCount++;
+      return origReplace.apply(this, args);
+    };
+    this.cleanups.push(() => {
+      h.pushState = origPush;
+      h.replaceState = origReplace;
+    });
+  }
+  patchConsole() {
+    const orig = console.error;
+    const self = this;
+    console.error = function(...args) {
+      try {
+        self.pushError("console", args.map(describeError).join(" "));
+      } catch {
+      }
+      return orig.apply(this, args);
+    };
+    this.cleanups.push(() => {
+      console.error = orig;
+    });
+  }
+  /**
+   * `fetch`: cuenta la petición (reacción) y registra respuestas ≥500 o
+   * rechazos como error. Se observa con `.then(ok, err)` sobre la promesa
+   * original: eso marca el rechazo como manejado para el navegador, así que
+   * un fetch fallido sin catch de la app no dispara `unhandledrejection` —
+   * lo registramos nosotros como error de red.
+   */
+  patchFetch() {
+    if (typeof window.fetch !== "function") return;
+    const orig = window.fetch;
+    const self = this;
+    window.fetch = function(...args) {
+      self.netCount++;
+      const p = orig.apply(this, args);
+      if (p && typeof p.then === "function") {
+        p.then(
+          (res) => {
+            if (res && res.status >= 500) self.pushError("fetch", `${res.status} ${res.url}`);
+          },
+          (err) => self.pushError("fetch", err)
+        );
+      }
+      return p;
+    };
+    this.cleanups.push(() => {
+      window.fetch = orig;
+    });
+  }
+  patchXhr() {
+    const proto = typeof XMLHttpRequest !== "undefined" ? XMLHttpRequest.prototype : null;
+    if (!proto) return;
+    const origSend = proto.send;
+    const self = this;
+    proto.send = function(...args) {
+      self.netCount++;
+      try {
+        this.addEventListener("loadend", () => {
+          if (this.status >= 500) self.pushError("xhr", `${this.status} ${this.responseURL}`);
+        });
+      } catch {
+      }
+      return origSend.apply(this, args);
+    };
+    this.cleanups.push(() => {
+      proto.send = origSend;
+    });
+  }
+};
+
+// src/plugins/autocapture/dom-listener.ts
 init_constants();
 
 // src/plugins/autocapture/element-serializer.ts
@@ -8059,6 +9380,7 @@ var DomListener = class {
   constructor(client, config) {
     this.client = client;
     this.cleanups = [];
+    this.quality = null;
     const d = DEFAULT_AUTOCAPTURE_CONFIG;
     this.config = {
       enabled: config.enabled ?? d.enabled,
@@ -8071,12 +9393,20 @@ var DomListener = class {
       throttleMs: config.throttleMs ?? d.throttleMs,
       maxTextLength: config.maxTextLength ?? d.maxTextLength,
       captureElementMetadata: config.captureElementMetadata ?? d.captureElementMetadata,
-      captureAncestors: Math.min(config.captureAncestors ?? d.captureAncestors, MAX_ANCESTORS)
+      captureAncestors: Math.min(config.captureAncestors ?? d.captureAncestors, MAX_ANCESTORS),
+      captureClickQuality: config.captureClickQuality ?? d.captureClickQuality
     };
     this.throttle = new ElementThrottle(this.config.throttleMs);
   }
   install() {
     if (!hasDocument() || !this.config.enabled) return;
+    if (this.config.captureClicks && this.config.captureClickQuality) {
+      this.quality = new ClickQualityTracker((kind, element, extra) => {
+        const payload = buildAutocapturePayload("click", element, this.config);
+        this.client.track(kind, { ...payload, ...extra });
+      });
+      this.quality.install();
+    }
     if (this.config.captureClicks) this.attach("click", (e) => this.handleClick(e));
     if (this.config.captureSubmits) this.attach("submit", (e) => this.handleSubmit(e), true);
     if (this.config.captureChanges) this.attach("change", (e) => this.handleChange(e), true);
@@ -8084,6 +9414,8 @@ var DomListener = class {
   destroy() {
     for (const cleanup of this.cleanups) cleanup();
     this.cleanups = [];
+    this.quality?.destroy();
+    this.quality = null;
   }
   attach(eventName, handler, useCapture = false) {
     const listener = (e) => {
@@ -8102,6 +9434,7 @@ var DomListener = class {
     const meaningful = this.findMeaningfulAncestor(target);
     if (!meaningful) return;
     if (isElementBlocked(meaningful, this.config.blockSelectors)) return;
+    this.quality?.onClick(meaningful, event);
     if (!this.throttle.shouldFire(meaningful)) return;
     this.emit("click", meaningful);
   }
@@ -8186,6 +9519,119 @@ function spaRouterPlugin() {
   });
 }
 
+// src/plugins/theme-detect/index.ts
+init_safe_env();
+var STORAGE_PREFIX = "veo_theme_";
+var RESEND_AFTER_MS = 24 * 60 * 60 * 1e3;
+var SETTLE_MS = 4e3;
+var MAX_RUNS_PER_PAGE = 4;
+function readState(key) {
+  try {
+    const raw = localStorage.getItem(key);
+    const parsed = raw ? JSON.parse(raw) : null;
+    return parsed && typeof parsed === "object" ? parsed : {};
+  } catch {
+    return {};
+  }
+}
+function writeState(key, state) {
+  try {
+    localStorage.setItem(key, JSON.stringify(state));
+  } catch {
+  }
+}
+function guessMode(doc, prefersDark) {
+  const hints = [
+    doc.documentElement.className,
+    doc.documentElement.dataset.theme,
+    doc.documentElement.dataset.mode,
+    doc.body?.className
+  ].join(" ").toLowerCase();
+  if (/\bdark\b/.test(hints)) return "dark";
+  if (/\blight\b/.test(hints)) return "light";
+  return prefersDark ? "dark" : "light";
+}
+function isFresh(state, mode, now) {
+  const last = state[mode];
+  return last !== void 0 && now - last.at < RESEND_AFTER_MS;
+}
+function shouldSendSnapshot(state, mode, hash, now) {
+  const last = state[mode];
+  return !last || last.hash !== hash || now - last.at >= RESEND_AFTER_MS;
+}
+function themeDetectPlugin(config) {
+  const storageKey = `${STORAGE_PREFIX}${config.apiKey.slice(-16) || "default"}`;
+  let observer = null;
+  let timer = null;
+  let destroyed = false;
+  let runs = 0;
+  const run = async () => {
+    if (destroyed || runs >= MAX_RUNS_PER_PAGE) return;
+    const prefersDark = typeof window.matchMedia === "function" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+    const guess = guessMode(document, prefersDark);
+    if (isFresh(readState(storageKey), guess, Date.now())) return;
+    runs++;
+    try {
+      const detector = await config.loadDetector();
+      if (!detector || destroyed) return;
+      const snapshot = detector.detectTheme();
+      if (!snapshot) return;
+      const hash = detector.snapshotHash(snapshot);
+      const state = readState(storageKey);
+      const now = Date.now();
+      const mark = () => {
+        const record = { hash, at: Date.now() };
+        state[snapshot.mode] = record;
+        state[guess] = state[guess] && guess !== snapshot.mode ? state[guess] : record;
+        writeState(storageKey, state);
+      };
+      if (!shouldSendSnapshot(state, snapshot.mode, hash, now)) {
+        mark();
+        return;
+      }
+      if (config.debug) console.log("[veo] theme snapshot", snapshot);
+      const res = await fetch(`${config.apiUrl}/v1/workspaces/theme-snapshot`, {
+        method: "POST",
+        headers: { "X-Api-Key": config.apiKey, "Content-Type": "application/json" },
+        body: JSON.stringify(snapshot),
+        credentials: "omit"
+      });
+      if (res.ok) mark();
+    } catch (err) {
+      if (config.debug) console.warn("[veo] theme detect failed", err);
+    }
+  };
+  const schedule = (delayMs) => {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      timer = null;
+      const idle = window.requestIdleCallback;
+      if (typeof idle === "function") idle(() => void run());
+      else void run();
+    }, delayMs);
+  };
+  return {
+    name: "theme-detect",
+    install() {
+      if (!hasWindow() || !hasDocument()) return;
+      if (document.readyState === "complete") schedule(SETTLE_MS);
+      else window.addEventListener("load", () => schedule(SETTLE_MS), { once: true });
+      if (typeof MutationObserver === "function") {
+        observer = new MutationObserver(() => schedule(1500));
+        observer.observe(document.documentElement, {
+          attributes: true,
+          attributeFilter: ["class", "data-theme", "data-mode"]
+        });
+      }
+    },
+    destroy() {
+      destroyed = true;
+      observer?.disconnect();
+      if (timer) clearTimeout(timer);
+    }
+  };
+}
+
 // src/core/client.ts
 init_safe_env();
 init_uuid();
@@ -8338,26 +9784,26 @@ var Session = class {
 
 // src/core/storage.ts
 init_safe_env();
-var STORAGE_PREFIX = "veo:";
+var STORAGE_PREFIX2 = "veo:";
 var ONE_YEAR_MS = 365 * 24 * 60 * 60 * 1e3;
 var LocalStorageAdapter = class {
   get(key) {
-    return localStorage.getItem(STORAGE_PREFIX + key);
+    return localStorage.getItem(STORAGE_PREFIX2 + key);
   }
   set(key, value) {
     try {
-      localStorage.setItem(STORAGE_PREFIX + key, value);
+      localStorage.setItem(STORAGE_PREFIX2 + key, value);
     } catch {
     }
   }
   remove(key) {
-    localStorage.removeItem(STORAGE_PREFIX + key);
+    localStorage.removeItem(STORAGE_PREFIX2 + key);
   }
   clear() {
     const toRemove = [];
     for (let i = 0; i < localStorage.length; i++) {
       const key = localStorage.key(i);
-      if (key?.startsWith(STORAGE_PREFIX)) toRemove.push(key);
+      if (key?.startsWith(STORAGE_PREFIX2)) toRemove.push(key);
     }
     for (const key of toRemove) localStorage.removeItem(key);
   }
@@ -8368,7 +9814,7 @@ function readCookies() {
 }
 var CookieAdapter = class {
   get(key) {
-    const name = `${STORAGE_PREFIX}${key}=`;
+    const name = `${STORAGE_PREFIX2}${key}=`;
     for (const cookie of readCookies()) {
       if (cookie.startsWith(name)) {
         return decodeURIComponent(cookie.slice(name.length));
@@ -8379,19 +9825,19 @@ var CookieAdapter = class {
   set(key, value, options) {
     const maxAgeSec = Math.floor((options?.ttlMs ?? ONE_YEAR_MS) / 1e3);
     const secure = typeof location !== "undefined" && location.protocol === "https:" ? "; Secure" : "";
-    document.cookie = `${STORAGE_PREFIX}${key}=${encodeURIComponent(
+    document.cookie = `${STORAGE_PREFIX2}${key}=${encodeURIComponent(
       value
     )}; Path=/; Max-Age=${maxAgeSec}; SameSite=Lax${secure}`;
   }
   remove(key) {
-    document.cookie = `${STORAGE_PREFIX}${key}=; Path=/; Max-Age=0; SameSite=Lax`;
+    document.cookie = `${STORAGE_PREFIX2}${key}=; Path=/; Max-Age=0; SameSite=Lax`;
   }
   clear() {
     for (const cookie of readCookies()) {
       const eq = cookie.indexOf("=");
       const name = eq === -1 ? cookie : cookie.slice(0, eq);
-      if (name.startsWith(STORAGE_PREFIX)) {
-        this.remove(name.slice(STORAGE_PREFIX.length));
+      if (name.startsWith(STORAGE_PREFIX2)) {
+        this.remove(name.slice(STORAGE_PREFIX2.length));
       }
     }
   }
@@ -8681,13 +10127,23 @@ var Client = class {
 };
 
 // src/core/setup.ts
-function setupClient(config, onGuides, loadBuilder) {
+function setupClient(config, onGuides, loadBuilder, loadThemeDetector) {
   const client = new Client(config);
   client.use(spaRouterPlugin());
   if (config.autocapture !== false) {
     const autocaptureConfig = typeof config.autocapture === "object" ? config.autocapture : {};
     client.use(autocapturePlugin(autocaptureConfig));
   }
+  if (config.detectTheme !== false && loadThemeDetector && !isBuilderMode()) {
+    client.use(
+      themeDetectPlugin({
+        apiUrl: resolveApiUrl(config),
+        apiKey: config.apiKey,
+        loadDetector: loadThemeDetector,
+        ...config.debug !== void 0 ? { debug: config.debug } : {}
+      })
+    );
+  }
   onGuides(client);
   if (typeof window !== "undefined") {
     const stub = window.veo;
@@ -10391,7 +11847,10 @@ function init(config) {
     // Fallback de carga del builder para bundlers: `import()` dinámico → el bundler
     // lo code-splitea (solo se descarga en modo builder). Así el consumidor por
     // bundler NO necesita copiar `veo-builder.js` ni setear `builderUrl`.
-    () => Promise.resolve().then(() => (init_builder(), builder_exports)).then((m) => m.initBuilderMode())
+    () => Promise.resolve().then(() => (init_builder(), builder_exports)).then((m) => m.initBuilderMode()),
+    // Detector de tema: también por `import()` dinámico → chunk aparte que el
+    // bundler solo descarga cuando toca detectar (como mucho una vez al día).
+    () => Promise.resolve().then(() => (init_detect_theme(), detect_theme_exports))
   );
 }