veo-sdk 0.6.0 → 0.6.2

package/dist/index.cjs

@@ -902,6 +902,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 +922,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 +1640,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 +2107,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 +2127,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 +3306,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();
@@ -3470,13 +3730,68 @@ function markerOffset(anchor, marker, position, offset6) {
   }
   return { x: x + offset6.x, y: y + offset6.y };
 }
+function canNest(anchor) {
+  const win = anchor.ownerDocument.defaultView;
+  if (!win || !(anchor instanceof win.HTMLElement)) return false;
+  if (NO_CHILDREN.has(anchor.tagName.toLowerCase())) return false;
+  const cs = win.getComputedStyle(anchor);
+  if (cs.display === "contents") return false;
+  const tokens = `${cs.overflow} ${cs.overflowX} ${cs.overflowY}`.split(/\s+/).filter(Boolean);
+  return tokens.every((t) => t === "visible");
+}
 function attachMarker(anchor, host, marker) {
   host.style.position = "absolute";
   host.style.zIndex = String(num(marker.zIndex, DEFAULT_MARKER_Z));
   host.style.margin = "0";
+  const position = marker.position ?? "top-right";
+  const offset6 = { x: num(marker.offsetX, 0), y: num(marker.offsetY, 0) };
+  const markerSize = () => {
+    const m = host.getBoundingClientRect();
+    return { width: m.width, height: m.height };
+  };
+  if (canNest(anchor)) {
+    const win = anchor.ownerDocument.defaultView;
+    const prevPosition = anchor.style.position;
+    const computed = win.getComputedStyle(anchor).position;
+    if (!computed || computed === "static") anchor.style.position = "relative";
+    anchor.appendChild(host);
+    const swallowClick = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    const swallow = (e) => e.stopPropagation();
+    host.addEventListener("click", swallowClick);
+    host.addEventListener("pointerdown", swallow);
+    host.addEventListener("mousedown", swallow);
+    const update2 = () => {
+      const { x, y } = markerOffset(
+        {
+          left: -anchor.clientLeft,
+          top: -anchor.clientTop,
+          width: anchor.offsetWidth,
+          height: anchor.offsetHeight
+        },
+        markerSize(),
+        position,
+        offset6
+      );
+      host.style.left = `${Math.round(x)}px`;
+      host.style.top = `${Math.round(y)}px`;
+    };
+    update2();
+    const stop2 = dom.autoUpdate(anchor, host, update2, { ancestorScroll: false, layoutShift: false });
+    return () => {
+      stop2();
+      host.removeEventListener("click", swallowClick);
+      host.removeEventListener("pointerdown", swallow);
+      host.removeEventListener("mousedown", swallow);
+      host.remove();
+      anchor.style.position = prevPosition;
+    };
+  }
+  anchor.ownerDocument.body.appendChild(host);
   const update = () => {
     const a = anchor.getBoundingClientRect();
-    const m = host.getBoundingClientRect();
     const { x, y } = markerOffset(
       {
         left: a.left + window.scrollX,
@@ -3484,17 +3799,21 @@ function attachMarker(anchor, host, marker) {
         width: a.width,
         height: a.height
       },
-      { width: m.width, height: m.height },
-      marker.position ?? "top-right",
-      { x: num(marker.offsetX, 0), y: num(marker.offsetY, 0) }
+      markerSize(),
+      position,
+      offset6
     );
     host.style.left = `${Math.round(x)}px`;
     host.style.top = `${Math.round(y)}px`;
   };
   update();
-  return dom.autoUpdate(anchor, host, update);
+  const stop = dom.autoUpdate(anchor, host, update);
+  return () => {
+    stop();
+    host.remove();
+  };
 }
-var INFO_GLYPH, QUESTION_GLYPH, STAR_GLYPH, CIRCLE, TARGET_GLYPH, BADGE_ICONS, DEFAULT_MARKER_SIZE, DEFAULT_MARKER_Z, SIDE_GAP;
+var INFO_GLYPH, QUESTION_GLYPH, STAR_GLYPH, CIRCLE, TARGET_GLYPH, BADGE_ICONS, DEFAULT_MARKER_SIZE, DEFAULT_MARKER_Z, SIDE_GAP, NO_CHILDREN;
 var init_badge_marker = __esm({
   "src/plugins/guides/renderers/badge-marker.ts"() {
     INFO_GLYPH = "M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021";
@@ -3517,6 +3836,21 @@ var init_badge_marker = __esm({
     DEFAULT_MARKER_SIZE = 14;
     DEFAULT_MARKER_Z = 19e3;
     SIDE_GAP = 8;
+    NO_CHILDREN = /* @__PURE__ */ new Set([
+      "img",
+      "input",
+      "textarea",
+      "select",
+      "iframe",
+      "video",
+      "audio",
+      "canvas",
+      "br",
+      "hr",
+      "svg",
+      "object",
+      "embed"
+    ]);
   }
 });
 function applyRowStyle(rowEl, style) {
@@ -3599,6 +3933,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;
 }
@@ -3691,6 +4026,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();
@@ -3712,6 +4048,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];
@@ -3742,7 +4083,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());
@@ -3813,7 +4160,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(
@@ -3826,7 +4173,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;
         }
@@ -3849,7 +4197,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);
@@ -3909,6 +4257,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) {
@@ -3919,6 +4268,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;
             }
@@ -4205,9 +4558,7 @@ var init_composite_renderer = __esm({
         root.appendChild(wrapper);
         if (marker) {
           host.style.display = "inline-block";
-          (anchor.ownerDocument ?? document).body.appendChild(host);
           this.registerCleanup(attachMarker(anchor, host, marker));
-          this.registerCleanup(() => host.remove());
         } else {
           host.style.display = "inline-block";
           const pos = inlinePosOf(step.inlinePosition);
@@ -4887,7 +5238,8 @@ function normalize(input) {
     guideSteps: input.guideSteps,
     activationRules,
     displayFrequency: "always",
-    displayPriority: 0
+    displayPriority: 0,
+    ...input.theme ? { theme: input.theme } : {}
   };
 }
 function createSingleStepRenderer(type) {
@@ -5669,9 +6021,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");
@@ -5715,7 +6067,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`;
@@ -5726,19 +6078,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";
@@ -5774,13 +6126,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);
@@ -5826,9 +6178,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`;
       }
     }
   };
@@ -6009,9 +6361,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;
@@ -7806,6 +8158,471 @@ var init_builder = __esm({
   }
 });
 
+// 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;
+  }
+});
+
 // src/contract/v1.ts
 var SDK_VERSION = "0.0.1";
 var DEFAULT_FLUSH_INTERVAL_MS = 5e3;
@@ -8114,6 +8931,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();
@@ -8266,26 +9196,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);
   }
@@ -8296,7 +9226,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));
@@ -8307,19 +9237,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));
       }
     }
   }
@@ -8609,13 +9539,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;
@@ -10319,7 +11259,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))
   );
 }