veo-sdk 0.5.6 → 0.5.10

package/dist/builder.cjs

@@ -569,6 +569,42 @@ function applyBlockStyle(el, style, kind) {
   if (typeof s.marginBottom === "number" && Number.isFinite(s.marginBottom)) {
     el.style.marginBottom = `${clampNum(s.marginBottom, 0, 64)}px`;
   }
+  if (kind !== "image") {
+    if (typeof s.fontSize === "number" && Number.isFinite(s.fontSize)) {
+      el.style.fontSize = `${clampNum(s.fontSize, 8, 96)}px`;
+    }
+    if (typeof s.fontFamily === "string" && s.fontFamily && s.fontFamily !== "inherit") {
+      el.style.fontFamily = s.fontFamily;
+    }
+    if (typeof s.fontWeight === "string" && s.fontWeight) el.style.fontWeight = s.fontWeight;
+    if (typeof s.textTransform === "string" && s.textTransform && s.textTransform !== "none") {
+      el.style.textTransform = s.textTransform;
+    }
+    if (typeof s.lineHeight === "number" && Number.isFinite(s.lineHeight)) {
+      el.style.lineHeight = `${clampNum(s.lineHeight, 50, 300)}%`;
+    }
+    if (typeof s.letterSpacing === "number" && Number.isFinite(s.letterSpacing)) {
+      el.style.letterSpacing = `${clampNum(s.letterSpacing, -5, 20)}px`;
+    }
+  }
+  if (typeof s.background === "string" && s.background) el.style.background = s.background;
+  if (typeof s.borderWidth === "number" && s.borderWidth > 0) {
+    const bc = typeof s.borderColor === "string" && s.borderColor ? s.borderColor : "#bbbbbb";
+    el.style.border = `${clampNum(s.borderWidth, 0, 20)}px solid ${bc}`;
+  }
+  if (kind !== "image" && typeof s.radius === "number" && Number.isFinite(s.radius)) {
+    el.style.borderRadius = `${clampNum(s.radius, 0, 64)}px`;
+  }
+  for (const side of ["Top", "Right", "Bottom", "Left"]) {
+    const p = s[`padding${side}`];
+    if (typeof p === "number" && Number.isFinite(p)) {
+      el.style.setProperty(`padding-${side.toLowerCase()}`, `${clampNum(p, 0, 128)}px`);
+    }
+    const m = s[`margin${side}`];
+    if (typeof m === "number" && Number.isFinite(m)) {
+      el.style.setProperty(`margin-${side.toLowerCase()}`, `${clampNum(m, 0, 128)}px`);
+    }
+  }
 }
 function createCloseButton(doc, onClose, className = "veo-guide-close") {
   const closeBtn = doc.createElement("button");
@@ -1754,182 +1790,6 @@ var BannerRenderer = class extends BaseRenderer {
 function bannerClassOf(position, embedded) {
   return embedded ? "veo-banner veo-banner-embedded" : `veo-banner veo-banner-${position}`;
 }
-var CompositeRenderer = class extends BaseRenderer {
-  async render(context) {
-    const idx = context.nav?.stepIndex ?? 0;
-    const step = context.guide.guideSteps[idx];
-    if (!step) return;
-    const anchorSelector = step.position === "relative-to-element" || step.presentation === "inline" ? step.anchorSelector?.trim() || void 0 : void 0;
-    let anchor = null;
-    if (anchorSelector) {
-      anchor = await waitForElement(anchorSelector);
-      if (!anchor) return;
-    }
-    const { host, root } = this.createHost();
-    const doc = root.ownerDocument ?? document;
-    const card = doc.createElement("div");
-    card.className = "veo-card";
-    applyCompositeDesign(card, step.design ?? {});
-    const dismiss = (action, meta) => {
-      context.onInteraction({
-        guideId: context.guide.guideId,
-        stepIndex: idx,
-        action,
-        ...meta?.id ? { metadata: { buttonId: meta.id } } : {}
-      });
-    };
-    const synthetic = { blocks: step.blocks ?? [] };
-    for (const node of buildContentNodes(synthetic, doc)) card.appendChild(node);
-    const buttons = (step.blocks ?? []).filter((b) => b.type === "button");
-    if (buttons.length) {
-      const row = doc.createElement("div");
-      row.className = "veo-guide-actions";
-      for (const b of buttons) row.appendChild(this.buildButton(b, doc, context, dismiss));
-      card.appendChild(row);
-    }
-    card.appendChild(
-      createCloseButton(doc, () => {
-        dismiss("dismissed");
-        this.closeOrSkip(context);
-      })
-    );
-    if (step.presentation === "inline" && anchor) {
-      host.style.display = "block";
-      const pos = inlinePosOf(step.inlinePosition);
-      root.appendChild(card);
-      insertHost(anchor, host, pos);
-      this.registerCleanup(keepHostAttached(host, anchorSelector, pos));
-    } else if (step.position === "relative-to-element" && anchor) {
-      const wrapper = doc.createElement("div");
-      wrapper.className = "veo-composite-anchored";
-      wrapper.appendChild(card);
-      root.appendChild(wrapper);
-      this.registerCleanup(await anchorPosition(anchor, wrapper));
-    } else {
-      const overlay = doc.createElement("div");
-      overlay.className = "veo-composite-overlay";
-      if (step.position === "center" && step.design?.backdrop !== false) {
-        overlay.classList.add("veo-composite-overlay--dim");
-        overlay.addEventListener("click", (e) => {
-          if (e.target === overlay) {
-            dismiss("dismissed");
-            this.closeOrSkip(context);
-          }
-        });
-      }
-      applyViewportPosition(card, step.position);
-      overlay.appendChild(card);
-      root.appendChild(overlay);
-    }
-    context.onInteraction({ guideId: context.guide.guideId, stepIndex: idx, action: "shown" });
-  }
-  /** Botón con enrutado de acción (navegación / cierre / url / guía). */
-  buildButton(block, doc, context, emit) {
-    const btn = doc.createElement("button");
-    btn.type = "button";
-    btn.className = "veo-guide-cta";
-    btn.textContent = block.text?.trim() || "OK";
-    btn.addEventListener("click", () => {
-      emit("cta_clicked", block);
-      const nav = context.nav?.callbacks;
-      switch (block.action) {
-        case "next":
-        case "submit-forms":
-        case "submit-forms-advance":
-          if (nav) nav.onNext();
-          else context.onClose();
-          break;
-        case "prev":
-          nav?.onBack();
-          break;
-        case "url":
-          if (typeof block.url === "string" && isSafeUrl(block.url)) {
-            window.open(block.url, "_blank", "noopener,noreferrer");
-          }
-          break;
-        case "guide":
-          if (block.targetGuideId) context.onOpenGuide?.(block.targetGuideId);
-          this.closeOrSkip(context);
-          break;
-        default:
-          this.closeOrSkip(context);
-      }
-    });
-    return btn;
-  }
-  closeOrSkip(context) {
-    if (context.nav?.callbacks) context.nav.callbacks.onSkip();
-    else context.onClose();
-  }
-};
-function inlinePosOf(p) {
-  return p === "before" || p === "prepend" || p === "append" ? p : "after";
-}
-function applyViewportPosition(card, position) {
-  const s = card.style;
-  s.position = "fixed";
-  const M = "16px";
-  const v = position.includes("top") ? "top" : position.includes("bottom") ? "bottom" : "middle";
-  const h = position.includes("left") ? "left" : position.includes("right") ? "right" : "middle";
-  if (position === "center") {
-    s.top = "50%";
-    s.left = "50%";
-    s.transform = "translate(-50%, -50%)";
-    return;
-  }
-  if (v === "top") s.top = M;
-  else if (v === "bottom") s.bottom = M;
-  else {
-    s.top = "50%";
-    s.transform = "translateY(-50%)";
-  }
-  if (h === "left") s.left = M;
-  else if (h === "right") s.right = M;
-  else {
-    s.left = "50%";
-    s.transform = `${s.transform} translateX(-50%)`.trim();
-  }
-}
-async function anchorPosition(anchor, wrapper) {
-  const update = async () => {
-    const { x, y } = await dom.computePosition(anchor, wrapper, {
-      placement: "bottom",
-      strategy: "fixed",
-      middleware: [dom.offset(8), dom.flip(), dom.shift({ padding: 8 })]
-    });
-    wrapper.style.left = `${x}px`;
-    wrapper.style.top = `${y}px`;
-  };
-  await update();
-  const reposition = () => void update();
-  window.addEventListener("scroll", reposition, true);
-  window.addEventListener("resize", reposition);
-  return () => {
-    window.removeEventListener("scroll", reposition, true);
-    window.removeEventListener("resize", reposition);
-  };
-}
-function applyCompositeDesign(card, design) {
-  const s = card.style;
-  const px = (v) => typeof v === "number" && Number.isFinite(v) ? `${v}px` : null;
-  const strv = (v) => typeof v === "string" && v ? v : null;
-  if (strv(design.background)) s.background = design.background;
-  if (strv(design.textColor)) s.color = design.textColor;
-  if (px(design.fontSize)) s.fontSize = px(design.fontSize);
-  if (strv(design.fontWeight)) s.fontWeight = design.fontWeight;
-  if (strv(design.align)) s.textAlign = design.align;
-  if (typeof design.lineHeight === "number") s.lineHeight = `${design.lineHeight}%`;
-  if (px(design.radius)) s.borderRadius = px(design.radius);
-  if (px(design.width)) s.width = px(design.width);
-  const bw = px(design.borderWidth);
-  if (bw) s.border = `${bw} solid ${strv(design.borderColor) ?? "#e5e5e5"}`;
-  for (const side of ["Top", "Right", "Bottom", "Left"]) {
-    const p = px(design[`padding${side}`]);
-    if (p) s.setProperty(`padding-${side.toLowerCase()}`, p);
-    const m = px(design[`margin${side}`]);
-    if (m) s.setProperty(`margin-${side.toLowerCase()}`, m);
-  }
-}
 
 // src/utils/uuid.ts
 function uuidv7() {
@@ -2086,85 +1946,53 @@ function escapeClosing(code, tag) {
   return code.replace(rx, `<\\/${tag}`);
 }
 
-// src/plugins/guides/renderers/custom-renderer.ts
-var DEFAULT_PLACEMENT = { mode: "floating", position: "bottom-right" };
-var DEFAULT_OFFSET = 16;
-var DEFAULT_WIDTH = 360;
-var CustomRenderer = class extends BaseRenderer {
-  async render(context) {
-    const step = context.guide.guideSteps[0];
-    if (!step || typeof step.html !== "string" || step.html.length === 0) return;
-    const placement = step.placement ?? DEFAULT_PLACEMENT;
-    let anchor = null;
-    if (placement.mode === "anchored") {
-      const selector = placement.selector ?? step.selector ?? context.guide.activationRules.selector;
-      if (typeof selector !== "string" || selector.length === 0) return;
-      anchor = await waitForElement(selector);
-      if (!anchor) return;
-    }
-    const { root } = this.createHost();
-    const doc = root.ownerDocument ?? document;
+// src/plugins/guides/code-block.ts
+function mountCodeBlock(block, doc, context) {
+  if (block.sandboxed) {
+    const step = { html: block.html ?? "", css: block.css, js: block.js };
+    const { iframe, cleanup } = mountCustomFrame(doc, step, context, { width: "100%" });
     const wrapper = doc.createElement("div");
-    wrapper.className = placement.mode === "anchored" ? "veo-custom-anchored" : "veo-custom-floating";
-    const { iframe, cleanup } = mountCustomFrame(doc, step, context, {
-      width: toCssSize(placement.width ?? DEFAULT_WIDTH),
-      fixedHeight: placement.height ?? null
-    });
-    this.registerCleanup(cleanup);
+    wrapper.className = "veo-code-sandbox";
     wrapper.appendChild(iframe);
-    root.appendChild(wrapper);
-    if (placement.mode === "floating") {
-      applyFloatingPosition(wrapper, placement);
-    } else if (anchor) {
-      this.registerCleanup(await this.setupAnchoredPosition(anchor, wrapper, placement));
+    return { node: wrapper, cleanup };
+  }
+  const hostDoc = doc;
+  const injected = [];
+  if (typeof block.css === "string" && block.css.trim()) {
+    const style = hostDoc.createElement("style");
+    style.textContent = block.css;
+    hostDoc.head.appendChild(style);
+    injected.push(style);
+  }
+  let node = null;
+  if (typeof block.html === "string" && block.html.trim()) {
+    node = doc.createElement("div");
+    node.className = "veo-code-html";
+    node.innerHTML = block.html;
+    for (const old of Array.from(node.querySelectorAll("script"))) {
+      injected.push(runScript(old, hostDoc));
+      old.remove();
     }
-    context.onInteraction({ guideId: context.guide.guideId, stepIndex: 0, action: "shown" });
   }
-  async setupAnchoredPosition(anchor, wrapper, placement) {
-    const side = placement.side ?? "bottom";
-    const update = async () => {
-      const { x, y } = await dom.computePosition(anchor, wrapper, {
-        placement: side,
-        strategy: "fixed",
-        middleware: [dom.offset(placement.offsetY ?? 8), dom.flip(), dom.shift({ padding: 8 })]
-      });
-      wrapper.style.left = `${x}px`;
-      wrapper.style.top = `${y}px`;
-    };
-    await update();
-    const reposition = () => {
-      void update();
-    };
-    window.addEventListener("scroll", reposition, true);
-    window.addEventListener("resize", reposition);
-    return () => {
-      window.removeEventListener("scroll", reposition, true);
-      window.removeEventListener("resize", reposition);
-    };
-  }
-};
-function applyFloatingPosition(wrapper, placement) {
-  const position = placement.position ?? "bottom-right";
-  const ox = `${placement.offsetX ?? DEFAULT_OFFSET}px`;
-  const oy = `${placement.offsetY ?? DEFAULT_OFFSET}px`;
-  const s = wrapper.style;
-  if (position === "center") {
-    s.top = "50%";
-    s.left = "50%";
-    s.transform = "translate(-50%, -50%)";
-    return;
-  }
-  const [vertical, horizontal] = position.split("-");
-  if (vertical === "top") s.top = oy;
-  else s.bottom = oy;
-  if (horizontal === "left") {
-    s.left = ox;
-  } else if (horizontal === "right") {
-    s.right = ox;
-  } else {
-    s.left = "50%";
-    s.transform = "translateX(-50%)";
+  if (typeof block.js === "string" && block.js.trim()) {
+    const s = hostDoc.createElement("script");
+    s.textContent = block.js;
+    hostDoc.body.appendChild(s);
+    injected.push(s);
   }
+  return {
+    node,
+    cleanup: () => {
+      for (const n of injected) n.parentNode?.removeChild(n);
+    }
+  };
+}
+function runScript(old, hostDoc) {
+  const s = hostDoc.createElement("script");
+  for (const attr of Array.from(old.attributes)) s.setAttribute(attr.name, attr.value);
+  if (!old.src) s.textContent = old.textContent;
+  hostDoc.body.appendChild(s);
+  return s;
 }
 
 // src/plugins/guides/form-content.ts
@@ -2432,6 +2260,430 @@ function buildScale(wrapper, doc, min, max, btnClass, symbol) {
   return { wrapper, read: () => selected };
 }
 
+// src/plugins/guides/renderers/composite-renderer.ts
+var CompositeRenderer = class extends BaseRenderer {
+  async render(context) {
+    const idx = context.nav?.stepIndex ?? 0;
+    const step = context.guide.guideSteps[idx];
+    if (!step) return;
+    const anchorSelector = step.position === "relative-to-element" || step.presentation === "inline" ? step.anchorSelector?.trim() || void 0 : void 0;
+    let anchor = null;
+    if (anchorSelector) {
+      anchor = await waitForElement(anchorSelector);
+      if (!anchor) return;
+    }
+    const { host, root } = this.createHost();
+    const doc = root.ownerDocument ?? document;
+    const design = step.design ?? {};
+    if (typeof design.zIndex === "number") host.style.zIndex = String(design.zIndex);
+    const card = doc.createElement("div");
+    card.className = "veo-card";
+    applyCompositeDesign(card, design);
+    const dismiss = (action, meta) => {
+      context.onInteraction({
+        guideId: context.guide.guideId,
+        stepIndex: idx,
+        action,
+        ...{}
+      });
+    };
+    const readers = [];
+    this.buildContent(card, step.blocks ?? [], doc, context, idx, readers);
+    if (design.closeButton !== false) {
+      const closeBtn = createCloseButton(doc, () => {
+        dismiss("dismissed");
+        this.closeOrSkip(context);
+      });
+      const closeColor = typeof design.closeColor === "string" ? design.closeColor : null;
+      const hoverColor = typeof design.closeHoverColor === "string" ? design.closeHoverColor : null;
+      if (closeColor) closeBtn.style.color = closeColor;
+      if (hoverColor) {
+        closeBtn.addEventListener("mouseenter", () => {
+          closeBtn.style.color = hoverColor;
+        });
+        closeBtn.addEventListener("mouseleave", () => {
+          closeBtn.style.color = closeColor ?? "";
+        });
+      }
+      card.appendChild(closeBtn);
+    }
+    if (step.presentation === "inline" && anchor) {
+      host.style.display = "block";
+      const pos = inlinePosOf(step.inlinePosition);
+      root.appendChild(card);
+      insertHost(anchor, host, pos);
+      this.registerCleanup(keepHostAttached(host, anchorSelector, pos));
+    } else if (step.position === "relative-to-element" && anchor) {
+      if (design.backdrop === true) {
+        const bg = doc.createElement("div");
+        bg.className = "veo-composite-overlay veo-composite-overlay--dim";
+        if (typeof design.backdropColor === "string") bg.style.background = design.backdropColor;
+        const bz = typeof design.backdropZIndex === "number" ? design.backdropZIndex : 2e5;
+        bg.style.zIndex = String(bz);
+        root.appendChild(bg);
+        if (design.targetAbove === true) this.registerCleanup(liftTarget(anchor, bz + 1));
+      }
+      const wrapper = doc.createElement("div");
+      wrapper.className = "veo-composite-anchored";
+      const caretEl = design.caret === false ? null : makeCaret(doc, design);
+      if (caretEl) wrapper.appendChild(caretEl);
+      wrapper.appendChild(card);
+      root.appendChild(wrapper);
+      this.registerCleanup(await anchorPosition(anchor, wrapper, caretEl));
+    } else {
+      const overlay = doc.createElement("div");
+      overlay.className = "veo-composite-overlay";
+      if (step.position === "center" && design.backdrop !== false) {
+        overlay.classList.add("veo-composite-overlay--dim");
+        if (typeof design.backdropColor === "string") {
+          overlay.style.background = design.backdropColor;
+        }
+        if (typeof design.backdropZIndex === "number") {
+          overlay.style.zIndex = String(design.backdropZIndex);
+        }
+        overlay.addEventListener("click", (e) => {
+          if (e.target === overlay) {
+            dismiss("dismissed");
+            this.closeOrSkip(context);
+          }
+        });
+      }
+      applyViewportPosition(card, step.position, design);
+      overlay.appendChild(card);
+      root.appendChild(overlay);
+    }
+    context.onInteraction({ guideId: context.guide.guideId, stepIndex: idx, action: "shown" });
+  }
+  /** Recorre los bloques en orden y los pinta en la card. */
+  buildContent(card, blocks, doc, context, idx, readers) {
+    const emit = (block) => {
+      context.onInteraction({
+        guideId: context.guide.guideId,
+        stepIndex: idx,
+        action: "cta_clicked",
+        ...block.id ? { metadata: { buttonId: block.id } } : {}
+      });
+    };
+    let i = 0;
+    while (i < blocks.length) {
+      const b = blocks[i];
+      if (!b) {
+        i++;
+        continue;
+      }
+      if (b.type === "button") {
+        const row = doc.createElement("div");
+        row.className = "veo-guide-actions";
+        while (i < blocks.length && blocks[i]?.type === "button") {
+          row.appendChild(
+            this.buildButton(blocks[i], doc, context, idx, readers, emit)
+          );
+          i++;
+        }
+        card.appendChild(row);
+        continue;
+      }
+      if (b.type === "code") {
+        const { node: node2, cleanup } = mountCodeBlock(b, doc, context);
+        if (node2) card.appendChild(node2);
+        this.registerCleanup(cleanup);
+        i++;
+        continue;
+      }
+      if (b.type === "form") {
+        const form = doc.createElement("div");
+        form.className = "veo-form";
+        for (const field of b.fields ?? []) {
+          const { wrapper, read } = buildField(field, doc);
+          readers.push({ field, read });
+          form.appendChild(wrapper);
+        }
+        card.appendChild(form);
+        i++;
+        continue;
+      }
+      const node = buildContentBlock(b, doc);
+      if (node) card.appendChild(node);
+      i++;
+    }
+  }
+  /** Botón con enrutado de acción (navegación / cierre / url / guía / envío de forms). */
+  buildButton(block, doc, context, idx, readers, emit) {
+    const btn = doc.createElement("button");
+    btn.type = "button";
+    btn.className = "veo-guide-cta";
+    btn.textContent = block.text?.trim() || "OK";
+    const nav = context.nav?.callbacks;
+    btn.addEventListener("click", () => {
+      switch (block.action) {
+        case "next":
+          emit(block);
+          if (nav) nav.onNext();
+          else context.onClose();
+          break;
+        case "prev":
+          emit(block);
+          nav?.onBack();
+          break;
+        case "url":
+          emit(block);
+          if (typeof block.url === "string" && isSafeUrl(block.url)) {
+            window.open(block.url, "_blank", "noopener,noreferrer");
+          }
+          break;
+        case "guide":
+          emit(block);
+          if (block.targetGuideId) context.onOpenGuide?.(block.targetGuideId);
+          this.closeOrSkip(context);
+          break;
+        case "submit-forms":
+        case "submit-forms-advance":
+        case "submit-forms-goto":
+          this.submitForms(readers, context, idx, btn, () => {
+            emit(block);
+            if (block.action === "submit-forms" || !nav) {
+              context.onClose();
+            } else if (block.action === "submit-forms-goto" && typeof block.targetStep === "number" && nav.onGoto) {
+              nav.onGoto(block.targetStep);
+            } else {
+              nav.onNext();
+            }
+          });
+          break;
+        default:
+          emit(block);
+          this.closeOrSkip(context);
+      }
+    });
+    return btn;
+  }
+  /** Recoge respuestas de todos los form-blocks del paso, valida y envía. */
+  submitForms(readers, context, idx, btn, onDone) {
+    const answers = {};
+    for (const { field, read } of readers) {
+      const value = read();
+      const empty = value === void 0 || value === null || value === "";
+      if (empty) {
+        if (field.required) {
+          btn.textContent = `Completa "${field.label}"`;
+          return;
+        }
+        continue;
+      }
+      answers[field.key] = value;
+    }
+    if (readers.length > 0 && Object.keys(answers).length === 0) return;
+    btn.disabled = true;
+    const submitFn = context.onFormSubmit ?? (() => Promise.resolve(true));
+    void submitFn(answers).then((ok) => {
+      btn.disabled = false;
+      if (!ok) return;
+      context.onInteraction({
+        guideId: context.guide.guideId,
+        stepIndex: idx,
+        action: "completed"
+      });
+      onDone();
+    });
+  }
+  closeOrSkip(context) {
+    if (context.nav?.callbacks) context.nav.callbacks.onSkip();
+    else context.onClose();
+  }
+};
+function inlinePosOf(p) {
+  return p === "before" || p === "prepend" || p === "append" ? p : "after";
+}
+function applyViewportPosition(card, position, design) {
+  const s = card.style;
+  s.position = "fixed";
+  const M = "16px";
+  const hAlign = design.hAlign === "left" ? "left" : design.hAlign === "right" ? "right" : null;
+  const v = position.includes("top") ? "top" : position.includes("bottom") ? "bottom" : "middle";
+  const h = hAlign ?? (position.includes("left") ? "left" : position.includes("right") ? "right" : "middle");
+  if (v === "top") s.top = M;
+  else if (v === "bottom") s.bottom = M;
+  else s.top = "50%";
+  if (h === "left") s.left = M;
+  else if (h === "right") s.right = M;
+  else s.left = "50%";
+  const tx = h === "middle" ? "-50%" : "0";
+  const ty = v === "middle" ? "-50%" : "0";
+  s.transform = tx === "0" && ty === "0" ? "" : `translate(${tx}, ${ty})`;
+}
+function makeCaret(doc, design) {
+  const caret = doc.createElement("div");
+  caret.className = "veo-composite-caret";
+  const w = typeof design.caretWidth === "number" ? design.caretWidth : 12;
+  const h = typeof design.caretHeight === "number" ? design.caretHeight : 12;
+  const s = caret.style;
+  s.position = "absolute";
+  s.width = `${w}px`;
+  s.height = `${h}px`;
+  s.transform = "rotate(45deg)";
+  s.background = typeof design.background === "string" ? design.background : "#ffffff";
+  if (typeof design.borderWidth === "number" && design.borderWidth > 0) {
+    const bc = typeof design.borderColor === "string" ? design.borderColor : "#bbbbbb";
+    s.border = `${design.borderWidth}px solid ${bc}`;
+  }
+  return caret;
+}
+function liftTarget(anchor, zIndex) {
+  const el = anchor;
+  const prevPosition = el.style.position;
+  const prevZ = el.style.zIndex;
+  if (getComputedStyle(el).position === "static") el.style.position = "relative";
+  el.style.zIndex = String(zIndex);
+  return () => {
+    el.style.position = prevPosition;
+    el.style.zIndex = prevZ;
+  };
+}
+async function anchorPosition(anchor, wrapper, caret) {
+  const update = async () => {
+    const { x, y, placement, middlewareData } = await dom.computePosition(anchor, wrapper, {
+      placement: "bottom",
+      strategy: "fixed",
+      middleware: [
+        dom.offset(caret ? 10 : 8),
+        dom.flip(),
+        dom.shift({ padding: 8 }),
+        ...caret ? [dom.arrow({ element: caret })] : []
+      ]
+    });
+    wrapper.style.left = `${x}px`;
+    wrapper.style.top = `${y}px`;
+    if (caret) positionArrow(caret, placement, middlewareData.arrow);
+  };
+  await update();
+  const reposition = () => void update();
+  window.addEventListener("scroll", reposition, true);
+  window.addEventListener("resize", reposition);
+  return () => {
+    window.removeEventListener("scroll", reposition, true);
+    window.removeEventListener("resize", reposition);
+  };
+}
+function applyCompositeDesign(card, design) {
+  const s = card.style;
+  const px = (v) => typeof v === "number" && Number.isFinite(v) ? `${v}px` : null;
+  const strv = (v) => typeof v === "string" && v ? v : null;
+  if (strv(design.background)) s.background = design.background;
+  const textColor = strv(design.color) ?? strv(design.textColor);
+  if (textColor) s.color = textColor;
+  if (px(design.fontSize)) s.fontSize = px(design.fontSize);
+  if (strv(design.fontWeight)) s.fontWeight = design.fontWeight;
+  if (strv(design.fontFamily) && design.fontFamily !== "inherit") {
+    s.fontFamily = design.fontFamily;
+  }
+  if (strv(design.textTransform) && design.textTransform !== "none") {
+    s.textTransform = design.textTransform;
+  }
+  if (typeof design.letterSpacing === "number") s.letterSpacing = `${design.letterSpacing}px`;
+  if (strv(design.align)) s.textAlign = design.align;
+  if (typeof design.lineHeight === "number") s.lineHeight = `${design.lineHeight}%`;
+  if (px(design.radius)) s.borderRadius = px(design.radius);
+  const bw = px(design.borderWidth);
+  if (bw) s.border = `${bw} solid ${strv(design.borderColor) ?? "#e5e5e5"}`;
+  if (strv(design.shadowColor) || typeof design.shadowBlur === "number") {
+    const n = (k) => typeof design[k] === "number" ? design[k] : 0;
+    s.boxShadow = `${n("shadowX")}px ${n("shadowY")}px ${n("shadowBlur")}px ${n("shadowSpread")}px ${strv(design.shadowColor) ?? "rgba(0,0,0,0.2)"}`;
+  }
+  if (design.fullWidth === true) {
+    s.width = "100%";
+  } else if (design.widthType === "fluid") {
+    s.width = "auto";
+    if (px(design.width)) s.maxWidth = px(design.width);
+  } else if (px(design.width)) {
+    s.width = px(design.width);
+  }
+  for (const side of ["Top", "Right", "Bottom", "Left"]) {
+    const p = px(design[`padding${side}`]);
+    if (p) s.setProperty(`padding-${side.toLowerCase()}`, p);
+    const m = px(design[`margin${side}`]);
+    if (m) s.setProperty(`margin-${side.toLowerCase()}`, m);
+  }
+}
+var DEFAULT_PLACEMENT = { mode: "floating", position: "bottom-right" };
+var DEFAULT_OFFSET = 16;
+var DEFAULT_WIDTH = 360;
+var CustomRenderer = class extends BaseRenderer {
+  async render(context) {
+    const step = context.guide.guideSteps[0];
+    if (!step || typeof step.html !== "string" || step.html.length === 0) return;
+    const placement = step.placement ?? DEFAULT_PLACEMENT;
+    let anchor = null;
+    if (placement.mode === "anchored") {
+      const selector = placement.selector ?? step.selector ?? context.guide.activationRules.selector;
+      if (typeof selector !== "string" || selector.length === 0) return;
+      anchor = await waitForElement(selector);
+      if (!anchor) return;
+    }
+    const { root } = this.createHost();
+    const doc = root.ownerDocument ?? document;
+    const wrapper = doc.createElement("div");
+    wrapper.className = placement.mode === "anchored" ? "veo-custom-anchored" : "veo-custom-floating";
+    const { iframe, cleanup } = mountCustomFrame(doc, step, context, {
+      width: toCssSize(placement.width ?? DEFAULT_WIDTH),
+      fixedHeight: placement.height ?? null
+    });
+    this.registerCleanup(cleanup);
+    wrapper.appendChild(iframe);
+    root.appendChild(wrapper);
+    if (placement.mode === "floating") {
+      applyFloatingPosition(wrapper, placement);
+    } else if (anchor) {
+      this.registerCleanup(await this.setupAnchoredPosition(anchor, wrapper, placement));
+    }
+    context.onInteraction({ guideId: context.guide.guideId, stepIndex: 0, action: "shown" });
+  }
+  async setupAnchoredPosition(anchor, wrapper, placement) {
+    const side = placement.side ?? "bottom";
+    const update = async () => {
+      const { x, y } = await dom.computePosition(anchor, wrapper, {
+        placement: side,
+        strategy: "fixed",
+        middleware: [dom.offset(placement.offsetY ?? 8), dom.flip(), dom.shift({ padding: 8 })]
+      });
+      wrapper.style.left = `${x}px`;
+      wrapper.style.top = `${y}px`;
+    };
+    await update();
+    const reposition = () => {
+      void update();
+    };
+    window.addEventListener("scroll", reposition, true);
+    window.addEventListener("resize", reposition);
+    return () => {
+      window.removeEventListener("scroll", reposition, true);
+      window.removeEventListener("resize", reposition);
+    };
+  }
+};
+function applyFloatingPosition(wrapper, placement) {
+  const position = placement.position ?? "bottom-right";
+  const ox = `${placement.offsetX ?? DEFAULT_OFFSET}px`;
+  const oy = `${placement.offsetY ?? DEFAULT_OFFSET}px`;
+  const s = wrapper.style;
+  if (position === "center") {
+    s.top = "50%";
+    s.left = "50%";
+    s.transform = "translate(-50%, -50%)";
+    return;
+  }
+  const [vertical, horizontal] = position.split("-");
+  if (vertical === "top") s.top = oy;
+  else s.bottom = oy;
+  if (horizontal === "left") {
+    s.left = ox;
+  } else if (horizontal === "right") {
+    s.right = ox;
+  } else {
+    s.left = "50%";
+    s.transform = "translateX(-50%)";
+  }
+}
+
 // src/plugins/guides/renderers/form-renderer.ts
 var FormRenderer = class extends BaseRenderer {
   render(context) {