veo-sdk 0.6.1 → 0.6.2

package/dist/{chunk-NGP7IJVE.mjs → chunk-ZILDR4YE.mjs}

@@ -668,6 +668,10 @@ var TEXT_PRESETS = {
   small: { size: 12, weight: 400, lineHeight: 1.5 }
 };
 function applyBlockStyle(el, style, kind) {
+  if (kind === "text") {
+    const explicit = style && typeof style === "object" ? style.preset : void 0;
+    el.dataset.veoPreset = typeof explicit === "string" ? explicit : el.classList.contains("veo-guide-title") ? "title" : "paragraph";
+  }
   if (!style || typeof style !== "object") return;
   const s = style;
   if (kind === "image" && s.bleed === true) {
@@ -684,8 +688,9 @@ function applyBlockStyle(el, style, kind) {
   if (kind === "text" && typeof s.preset === "string" && s.preset in TEXT_PRESETS) {
     const preset = TEXT_PRESETS[s.preset];
     if (preset) {
-      el.style.fontSize = `${preset.size}px`;
-      el.style.fontWeight = String(preset.weight);
+      const token = s.preset === "small" ? null : `--veo-t-${s.preset}`;
+      el.style.fontSize = token ? `var(${token}-size, ${preset.size}px)` : `${preset.size}px`;
+      el.style.fontWeight = token ? `var(${token}-weight, ${preset.weight})` : String(preset.weight);
       el.style.lineHeight = String(preset.lineHeight);
     }
   }
@@ -1363,20 +1368,92 @@ var GUIDE_STYLES = `
 .veo-guide-actions {
   display: flex; gap: 8px; justify-content: var(--veo-actions-justify);
 }
+/* Tema del workspace (design system): cada preset de texto toma sus tokens de
+   las variables que publica \`applyThemeVars\` en la tarjeta. Las reglas solo
+   existen bajo .veo-card--themed; los estilos inline del bloque las pisan. El
+   \`*\` cubre el rich text (la regla global de fuente aplica a cada hijo). */
+.veo-card--themed [data-veo-preset="title"] {
+  color: var(--veo-t-title-color); font-size: var(--veo-t-title-size);
+  font-weight: var(--veo-t-title-weight); text-align: var(--veo-t-title-align);
+}
+.veo-card--themed [data-veo-preset="subtitle"] {
+  color: var(--veo-t-subtitle-color); font-size: var(--veo-t-subtitle-size);
+  font-weight: var(--veo-t-subtitle-weight); text-align: var(--veo-t-subtitle-align);
+}
+.veo-card--themed [data-veo-preset="paragraph"] {
+  color: var(--veo-t-paragraph-color); font-size: var(--veo-t-paragraph-size);
+  font-weight: var(--veo-t-paragraph-weight); text-align: var(--veo-t-paragraph-align);
+}
+.veo-card--themed [data-veo-preset="small"] { color: var(--veo-t-paragraph-color); }
+.veo-card--themed [data-veo-preset="title"], .veo-card--themed [data-veo-preset="title"] * {
+  font-family: var(--veo-t-title-font, var(--veo-font));
+}
+.veo-card--themed [data-veo-preset="subtitle"], .veo-card--themed [data-veo-preset="subtitle"] * {
+  font-family: var(--veo-t-subtitle-font, var(--veo-font));
+}
+.veo-card--themed [data-veo-preset="paragraph"], .veo-card--themed [data-veo-preset="paragraph"] *,
+.veo-card--themed [data-veo-preset="small"], .veo-card--themed [data-veo-preset="small"] * {
+  font-family: var(--veo-t-paragraph-font, var(--veo-font));
+}
+/* Formulario del tema (pesta\xF1a Formulario). Dentro de un .veo-form los tokens
+   de texto \`--veo-t-*\` se REDEFINEN con \xABTexto principal\xBB: la pregunta es un
+   bloque con preset (su tama\xF1o va inline con esas variables), as\xED toma los del
+   formulario y no los del modal. Etiquetas y opciones = \xABTexto secundario\xBB. */
+.veo-card--themed-form .veo-form {
+  background: var(--veo-f-bg); padding: var(--veo-f-pad);
+  border: var(--veo-f-border, none); border-radius: var(--veo-f-radius, 8px);
+  box-shadow: var(--veo-f-shadow, none);
+  --veo-t-title-color: var(--veo-f-primary-color); --veo-t-title-size: var(--veo-f-primary-size);
+  --veo-t-title-weight: var(--veo-f-primary-weight); --veo-t-title-align: var(--veo-f-primary-align);
+  --veo-t-title-font: var(--veo-f-primary-font);
+  --veo-t-subtitle-color: var(--veo-f-primary-color); --veo-t-subtitle-size: var(--veo-f-primary-size);
+  --veo-t-subtitle-weight: var(--veo-f-primary-weight); --veo-t-subtitle-align: var(--veo-f-primary-align);
+  --veo-t-subtitle-font: var(--veo-f-primary-font);
+  --veo-t-paragraph-color: var(--veo-f-primary-color); --veo-t-paragraph-size: var(--veo-f-primary-size);
+  --veo-t-paragraph-weight: var(--veo-f-primary-weight); --veo-t-paragraph-align: var(--veo-f-primary-align);
+  --veo-t-paragraph-font: var(--veo-f-primary-font);
+}
+.veo-card--themed-form .veo-form-label,
+.veo-card--themed-form .veo-form-option,
+.veo-card--themed-form .veo-scale-label {
+  color: var(--veo-f-secondary-color); font-weight: var(--veo-f-secondary-weight);
+  font-family: var(--veo-f-secondary-font, var(--veo-font));
+}
+.veo-card--themed-form .veo-form-label,
+.veo-card--themed-form .veo-form-option {
+  font-size: var(--veo-f-secondary-size); text-align: var(--veo-f-secondary-align);
+}
+.veo-card--themed-form .veo-form-input:focus { outline-color: var(--veo-f-accent); }
+.veo-card--themed-form .veo-form-option input { accent-color: var(--veo-f-accent); }
+.veo-card--themed-form .veo-nps-btn:hover { border-color: var(--veo-scale-color, var(--veo-f-accent)); }
+.veo-card--themed-form .veo-scale-active.veo-nps-btn {
+  background: var(--veo-scale-color, var(--veo-f-accent)); color: var(--veo-f-on-accent);
+  border-color: var(--veo-scale-color, var(--veo-f-accent));
+}
 .veo-guide-cta {
   background: var(--veo-cta-bg, var(--veo-primary));
-  color: var(--veo-cta-color, #fff); border: none;
-  padding: 9px 18px; border-radius: var(--veo-cta-radius, 8px);
-  font-size: var(--veo-cta-size, 14px); font-weight: 500; cursor: pointer;
+  color: var(--veo-cta-color, #fff); border: var(--veo-cta-border, none);
+  padding: var(--veo-cta-pad, 9px 18px); border-radius: var(--veo-cta-radius, 8px);
+  font-size: var(--veo-cta-size, 14px); font-weight: var(--veo-cta-weight, 500); cursor: pointer;
   transition: opacity 120ms ease;
 }
 .veo-guide-cta:hover { opacity: 0.9; }
 /* Presets del boton (editor): secundario = contorno; enlace = solo texto. */
 .veo-guide-cta--secondary {
-  background: transparent; color: var(--veo-primary);
-  border: 1px solid var(--veo-primary);
+  background: var(--veo-cta2-bg, transparent); color: var(--veo-cta2-color, var(--veo-primary));
+  border: var(--veo-cta2-border, 1px solid var(--veo-primary));
+  padding: var(--veo-cta2-pad, var(--veo-cta-pad, 9px 18px));
+  border-radius: var(--veo-cta2-radius, var(--veo-cta-radius, 8px));
+  font-size: var(--veo-cta2-size, var(--veo-cta-size, 14px));
+  font-weight: var(--veo-cta2-weight, var(--veo-cta-weight, 500));
+}
+.veo-guide-cta--link {
+  background: transparent; color: var(--veo-cta3-color, var(--veo-primary));
+  border: var(--veo-cta3-border, none); padding: var(--veo-cta3-pad, 0);
+  border-radius: var(--veo-cta3-radius, 0);
+  font-size: var(--veo-cta3-size, var(--veo-cta-size, 14px));
+  font-weight: var(--veo-cta3-weight, var(--veo-cta-weight, 500));
 }
-.veo-guide-cta--link { background: transparent; color: var(--veo-primary); padding: 0; }
 .veo-guide-cta--link:hover { opacity: 1; text-decoration: underline; }
 .veo-guide-cta:active { transform: translateY(1px); }
 .veo-guide-close {
@@ -1746,6 +1823,12 @@ var STATIC_SIDE = {
   left: "right",
   right: "left"
 };
+var OUTER_EDGES = {
+  top: ["top", "left"],
+  right: ["top", "right"],
+  bottom: ["bottom", "right"],
+  left: ["bottom", "left"]
+};
 function positionArrow(arrowEl, placement, data) {
   const side = STATIC_SIDE[placement.split("-")[0] ?? "bottom"] ?? "top";
   for (const prop of ["top", "bottom", "left", "right"]) {
@@ -1754,6 +1837,16 @@ function positionArrow(arrowEl, placement, data) {
   if (data?.x != null) arrowEl.style.setProperty("left", `${data.x}px`);
   if (data?.y != null) arrowEl.style.setProperty("top", `${data.y}px`);
   arrowEl.style.setProperty(side, "-6px");
+  const width = arrowEl.dataset.veoBorder;
+  if (width) {
+    for (const edge of ["top", "right", "bottom", "left"]) {
+      arrowEl.style.setProperty(
+        `border-${edge}-width`,
+        OUTER_EDGES[side].includes(edge) ? `${width}px` : "0"
+      );
+    }
+    arrowEl.style.zIndex = "1";
+  }
 }
 
 // src/plugins/guides/renderers/badge-renderer.ts
@@ -2901,6 +2994,168 @@ function buildScale(wrapper, doc, min, max, btnClass, symbol, opts = { labels: [
   return { wrapper, read: () => selected };
 }
 
+// src/plugins/guides/guide-theme.ts
+var WORKSPACE_THEME_ID = "workspace";
+var SHADOW_SPEC = {
+  soft: { y: 4, blur: 14, alpha: 0.12 },
+  medium: { y: 12, blur: 32, alpha: 0.22 },
+  strong: { y: 24, blur: 64, alpha: 0.38 }
+};
+var JUSTIFY = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end",
+  distribute: "space-between"
+};
+function channels(hex) {
+  const h = hex.replace("#", "");
+  const full = h.length === 3 ? [...h].map((x) => x + x).join("") : h.slice(0, 6);
+  const ch = (i) => Number.parseInt(full.slice(i, i + 2), 16) || 0;
+  return [ch(0), ch(2), ch(4)];
+}
+function boxShadow(shadow, hex) {
+  if (shadow === "none") return "none";
+  const spec = SHADOW_SPEC[shadow];
+  const [r, g, b] = channels(hex);
+  return `0 ${spec.y}px ${spec.blur}px rgba(${r}, ${g}, ${b}, ${spec.alpha})`;
+}
+function readableOn(hex) {
+  const [r, g, b] = channels(hex);
+  return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255 > 0.6 ? "#111827" : "#ffffff";
+}
+function themeModeFor(theme, design) {
+  if (!theme || design.theme !== WORKSPACE_THEME_ID) return null;
+  return (design.colorMode === "dark" ? theme.dark : theme.light) ?? null;
+}
+function themeRowJustify(mode, inline, preset) {
+  const box = inline ? mode.embedded : mode.overlay;
+  if (box.align === "distribute") return null;
+  const button = preset === "secondary" ? mode.buttons?.secondary : preset === "link" ? mode.buttons?.tertiary : preset === void 0 || preset === null || preset === "primary" ? mode.buttons?.primary : void 0;
+  return button ? JUSTIFY[button.align] ?? null : null;
+}
+function appFont(ref, doc) {
+  const view = doc.defaultView;
+  if (!view) return null;
+  if (ref === "inherit") return view.getComputedStyle(doc.body).fontFamily || null;
+  if (ref === "app-heading") {
+    const heading = Array.from(doc.querySelectorAll("h1,h2,h3")).find(
+      (el) => el.getClientRects().length > 0
+    );
+    return view.getComputedStyle(heading ?? doc.body).fontFamily || null;
+  }
+  return ref;
+}
+function themeContainerDesign(mode, inline, tooltip = false) {
+  const box = inline ? mode.embedded : mode.overlay;
+  const tip = tooltip ? mode.tooltip : void 0;
+  const padding = tip?.padding ?? box.padding;
+  const out = {
+    // El embebido va en el flujo de la página: sin fondo propio.
+    background: tip ? tip.background : inline ? "transparent" : box.background ?? mode.colors.background,
+    color: mode.colors.text,
+    paddingTop: padding.top,
+    paddingRight: padding.right,
+    paddingBottom: padding.bottom,
+    paddingLeft: padding.left,
+    borderColor: tip?.borderColor ?? box.borderColor,
+    borderWidth: tip?.borderWidth ?? box.borderWidth,
+    radius: tip?.borderRadius ?? box.borderRadius
+  };
+  const shadow = tip?.shadow ?? box.shadow;
+  const shadowColor = tip?.shadowColor ?? box.shadowColor;
+  if (shadow === "none") {
+    Object.assign(out, { shadowColor: "transparent", shadowBlur: 0 });
+  } else {
+    const spec = SHADOW_SPEC[shadow];
+    const [r, g, b] = channels(shadowColor);
+    Object.assign(out, {
+      shadowX: 0,
+      shadowY: spec.y,
+      shadowBlur: spec.blur,
+      shadowSpread: 0,
+      shadowColor: `rgba(${r}, ${g}, ${b}, ${spec.alpha})`
+    });
+  }
+  return out;
+}
+function applyThemeVars(card, mode, inline, tooltip = false) {
+  const doc = card.ownerDocument ?? document;
+  const box = inline ? mode.embedded : mode.overlay;
+  const set = (name, value) => {
+    if (value) card.style.setProperty(name, value);
+  };
+  card.classList.add("veo-card--themed");
+  set("--veo-primary", mode.colors.accent);
+  set("--veo-cta-color", readableOn(mode.colors.accent));
+  const primary = mode.buttons?.primary;
+  const publish = (prefix, b) => {
+    if (!b) return;
+    const p = b.padding;
+    set(`${prefix}-bg`, b.background);
+    set(`${prefix}-color`, b.color);
+    set(`${prefix}-pad`, `${p.top}px ${p.right}px ${p.bottom}px ${p.left}px`);
+    set(`${prefix}-size`, `${b.fontSize}px`);
+    set(`${prefix}-weight`, String(b.fontWeight));
+    set(`${prefix}-radius`, `${b.borderRadius}px`);
+    set(
+      `${prefix}-border`,
+      b.borderWidth > 0 ? `${b.borderWidth}px solid ${b.borderColor}` : "none"
+    );
+  };
+  publish("--veo-cta", primary);
+  publish("--veo-cta2", mode.buttons?.secondary);
+  publish("--veo-cta3", mode.buttons?.tertiary);
+  set("--veo-text", mode.colors.text);
+  set("--veo-text-secondary", mode.colors.textMuted);
+  set("--veo-font", appFont("inherit", doc));
+  set(
+    "--veo-actions-justify",
+    box.align === "distribute" || !primary ? JUSTIFY[box.align] : JUSTIFY[primary.align]
+  );
+  const form = mode.form;
+  if (form) {
+    card.classList.add("veo-card--themed-form");
+    const fp = form.padding;
+    set("--veo-f-bg", form.background);
+    set("--veo-f-accent", form.accent);
+    set("--veo-f-on-accent", form.onAccent);
+    set("--veo-f-pad", `${fp.top}px ${fp.right}px ${fp.bottom}px ${fp.left}px`);
+    if (typeof form.borderWidth === "number" && form.borderColor) {
+      set(
+        "--veo-f-border",
+        form.borderWidth > 0 ? `${form.borderWidth}px solid ${form.borderColor}` : "none"
+      );
+    }
+    if (typeof form.borderRadius === "number") set("--veo-f-radius", `${form.borderRadius}px`);
+    if (form.shadow && form.shadowColor) {
+      set("--veo-f-shadow", boxShadow(form.shadow, form.shadowColor));
+    }
+    for (const [name, t] of [
+      ["primary", form.text.primary],
+      ["secondary", form.text.secondary]
+    ]) {
+      set(`--veo-f-${name}-color`, t.color);
+      set(`--veo-f-${name}-size`, `${t.fontSize}px`);
+      set(`--veo-f-${name}-weight`, String(t.fontWeight));
+      set(`--veo-f-${name}-align`, t.align);
+      set(`--veo-f-${name}-font`, appFont(t.fontFamily, doc));
+    }
+  }
+  const tip = tooltip ? mode.tooltip?.text : void 0;
+  const tokens = [
+    ["title", tip?.primary ?? mode.text.title],
+    ["subtitle", tip?.secondary ?? mode.text.subtitle],
+    ["paragraph", tip?.secondary ?? mode.text.paragraph]
+  ];
+  for (const [name, t] of tokens) {
+    set(`--veo-t-${name}-color`, t.color);
+    set(`--veo-t-${name}-size`, `${t.fontSize}px`);
+    set(`--veo-t-${name}-weight`, String(t.fontWeight));
+    set(`--veo-t-${name}-align`, t.align);
+    set(`--veo-t-${name}-font`, appFont(t.fontFamily, doc));
+  }
+}
+
 // src/plugins/guides/layout.ts
 function groupLayout(blocks) {
   const rows = /* @__PURE__ */ new Map();
@@ -3296,6 +3551,11 @@ function applyRowStyle(rowEl, style) {
   if (style.valign && ROW_VALIGN[style.valign]) s.alignItems = ROW_VALIGN[style.valign];
 }
 var CompositeRenderer = class extends BaseRenderer {
+  constructor() {
+    super(...arguments);
+    /** Alineación de filas de botones según el tema del workspace (null = sin tema). */
+    this.themeRowJustify = null;
+  }
   async render(context) {
     const idx = context.nav?.stepIndex ?? 0;
     const step = context.guide.guideSteps[idx];
@@ -3326,7 +3586,13 @@ var CompositeRenderer = class extends BaseRenderer {
     if (typeof design.zIndex === "number") host.style.zIndex = String(design.zIndex);
     const card = doc.createElement("div");
     card.className = "veo-card";
-    applyCompositeDesign(card, design);
+    const themeMode = themeModeFor(context.guide.theme, design);
+    const inline = step.presentation === "inline";
+    const tooltipLike = !inline && (badgeMode || step.position === "relative-to-element");
+    if (themeMode) applyThemeVars(card, themeMode, inline, tooltipLike);
+    this.themeRowJustify = themeMode ? (preset) => themeRowJustify(themeMode, inline, preset) : null;
+    const cardDesign = themeMode ? { ...themeContainerDesign(themeMode, inline, tooltipLike), ...design } : design;
+    applyCompositeDesign(card, cardDesign);
     if (typeof design.ariaLabel === "string" && design.ariaLabel.trim()) {
       card.setAttribute("role", "dialog");
       card.setAttribute("aria-label", design.ariaLabel.trim());
@@ -3397,7 +3663,7 @@ var CompositeRenderer = class extends BaseRenderer {
         });
       }
       card.appendChild(closeBtn);
-      reserveCloseSpace(card, blocks, closePos, design);
+      reserveCloseSpace(card, blocks, closePos, cardDesign);
     }
     if (badgeMode && anchor) {
       closeTooltip = this.renderBadgeMode(
@@ -3410,7 +3676,8 @@ var CompositeRenderer = class extends BaseRenderer {
         doc,
         context,
         idx,
-        design
+        // Con el tema ya fundido: la flecha del tooltip toma su fondo y borde.
+        cardDesign
       );
       return;
     }
@@ -3433,7 +3700,7 @@ var CompositeRenderer = class extends BaseRenderer {
       }
       const wrapper = doc.createElement("div");
       wrapper.className = "veo-composite-anchored";
-      const caretEl = design.caret === false ? null : makeCaret(doc, design);
+      const caretEl = design.caret === false ? null : makeCaret(doc, cardDesign);
       if (caretEl) wrapper.appendChild(caretEl);
       wrapper.appendChild(card);
       root.appendChild(wrapper);
@@ -3493,6 +3760,7 @@ var CompositeRenderer = class extends BaseRenderer {
           const row = doc.createElement("div");
           row.className = "veo-guide-actions";
           let rowAlign;
+          const firstPreset = b.style?.preset;
           while (i < cell.length && cell[i]?.block.type === "button") {
             const { block: bb, index: bi } = cell[i];
             if (!rowAlign) {
@@ -3503,6 +3771,10 @@ var CompositeRenderer = class extends BaseRenderer {
             i++;
           }
           if (rowAlign) row.style.justifyContent = ROW_ALIGN[rowAlign] ?? "flex-end";
+          else {
+            const themed = this.themeRowJustify?.(firstPreset);
+            if (themed) row.style.justifyContent = themed;
+          }
           container.appendChild(row);
           continue;
         }
@@ -3915,6 +4187,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;
 }
@@ -4649,7 +4922,8 @@ function normalize(input) {
     guideSteps: input.guideSteps,
     activationRules,
     displayFrequency: "always",
-    displayPriority: 0
+    displayPriority: 0,
+    ...input.theme ? { theme: input.theme } : {}
   };
 }
 function createSingleStepRenderer(type) {
@@ -4887,5 +5161,5 @@ function buildSelectorPath(element, maxAncestors = 5) {
 }
 
 export { ALWAYS_BLOCK_SELECTORS, BadgeRenderer, BannerRenderer, CompositeRenderer, CustomRenderer, DEFAULT_AUTOCAPTURE_CONFIG, DEFAULT_TRACKER_BATCH_SIZE, DEFAULT_TRACKER_FLUSH_INTERVAL_MS, DEFAULT_TRACKER_MAX_RETRIES, FREQUENCY_CACHE_KEY_PREFIX, FREQUENCY_CACHE_MAX_ENTRIES, FREQUENCY_CACHE_TTL_MS, FormRenderer, GUIDE_STYLES, InlineCustomRenderer, InlineFormRenderer, InlineRenderer, MAX_ANCESTORS, ModalRenderer, PRIORITY_ATTRIBUTES, RAW_BLOCK_ATTR, SENSITIVE_ATTRIBUTES, TooltipRenderer, WALKTHROUGH_ABANDONMENT_TIMEOUT_MS, WALKTHROUGH_STATE_KEY_PREFIX, WalkthroughRenderer, activationDelayMs, applyBlockStyle, buildContentBlock, buildSelectorPath, clearBuilderToken, clearPreviewToken, closeGuidePreview, filterHumanClasses, getPreviewToken, groupLayout, hasDocument, hasLocalStorage, hasNavigatorSendBeacon, hasWindow, isAutomaticActivation, isBuilderMode, isDeviceAllowed, isSnoozed, previewGuide, resolveBuilderContext, resolveBuilderToken, stepMatchesPage, uuidv7 };
-//# sourceMappingURL=chunk-NGP7IJVE.mjs.map
-//# sourceMappingURL=chunk-NGP7IJVE.mjs.map
+//# sourceMappingURL=chunk-ZILDR4YE.mjs.map
+//# sourceMappingURL=chunk-ZILDR4YE.mjs.map