veo-sdk 0.5.31 → 0.5.33

package/dist/builder.cjs

@@ -11,7 +11,7 @@ function attachBlockDropTarget(options) {
   let spot = null;
   const contentEl = () => host.shadowRoot?.querySelector(".veo-guide-content") ?? null;
   const blockChildren = (container) => Array.from(container.children).filter(
-    (el) => el instanceof HTMLElement && el.dataset.veoIdx !== void 0
+    (el2) => el2 instanceof HTMLElement && el2.dataset.veoIdx !== void 0
   );
   const hideLine = () => {
     line?.remove();
@@ -283,6 +283,14 @@ function clearBuilderToken() {
   }
 }
 
+// src/plugins/guides/activation-devices.ts
+var MOBILE_MAX_WIDTH = 767;
+function isDeviceAllowed(devices, viewportWidth = typeof window === "undefined" ? 1024 : window.innerWidth) {
+  if (!devices || devices === "all") return true;
+  const mobile = viewportWidth <= MOBILE_MAX_WIDTH;
+  return devices === "mobile" ? mobile : !mobile;
+}
+
 // src/plugins/guides/constants.ts
 var GUIDE_Z_INDEX = 2147483640;
 var DEFAULT_ANCHOR_WAIT_MS = 5e3;
@@ -357,22 +365,22 @@ function rebuildNode(node, doc, depth, budget) {
     return doc.createTextNode(node.textContent ?? "");
   }
   if (node.nodeType !== Node.ELEMENT_NODE) return null;
-  const el = node;
-  if (DROP_TAGS.has(el.tagName)) return null;
-  const mapped = ALLOWED_TAGS[el.tagName];
+  const el2 = node;
+  if (DROP_TAGS.has(el2.tagName)) return null;
+  const mapped = ALLOWED_TAGS[el2.tagName];
   if (!mapped) {
     const frag = doc.createDocumentFragment();
-    for (const child of Array.from(el.childNodes)) {
+    for (const child of Array.from(el2.childNodes)) {
       const rebuilt2 = rebuildNode(child, doc, depth + 1, budget);
       if (rebuilt2) frag.appendChild(rebuilt2);
     }
     return frag;
   }
   if (mapped === "a") {
-    const href = el.getAttribute("href") ?? "";
+    const href = el2.getAttribute("href") ?? "";
     if (!isSafeUrl(href)) {
       const frag = doc.createDocumentFragment();
-      for (const child of Array.from(el.childNodes)) {
+      for (const child of Array.from(el2.childNodes)) {
         const rebuilt2 = rebuildNode(child, doc, depth + 1, budget);
         if (rebuilt2) frag.appendChild(rebuilt2);
       }
@@ -382,14 +390,14 @@ function rebuildNode(node, doc, depth, budget) {
     a.setAttribute("href", href);
     a.setAttribute("target", "_blank");
     a.setAttribute("rel", "noopener noreferrer nofollow");
-    for (const child of Array.from(el.childNodes)) {
+    for (const child of Array.from(el2.childNodes)) {
       const rebuilt2 = rebuildNode(child, doc, depth + 1, budget);
       if (rebuilt2) a.appendChild(rebuilt2);
     }
     return a;
   }
   const rebuilt = doc.createElement(mapped);
-  for (const child of Array.from(el.childNodes)) {
+  for (const child of Array.from(el2.childNodes)) {
     const childNode = rebuildNode(child, doc, depth + 1, budget);
     if (childNode) rebuilt.appendChild(childNode);
   }
@@ -523,31 +531,31 @@ function renderBlocks(container, blocks, doc, callbacks) {
 function buildContentBlock(block, doc) {
   switch (block.type) {
     case "title": {
-      const el = doc.createElement("h2");
-      el.className = "veo-guide-title";
-      el.textContent = typeof block.text === "string" ? block.text : "";
-      applyBlockStyle(el, block.style, "text");
-      return el;
+      const el2 = doc.createElement("h2");
+      el2.className = "veo-guide-title";
+      el2.textContent = typeof block.text === "string" ? block.text : "";
+      applyBlockStyle(el2, block.style, "text");
+      return el2;
     }
     case "text": {
-      const el = doc.createElement("div");
-      el.className = "veo-guide-text";
+      const el2 = doc.createElement("div");
+      el2.className = "veo-guide-text";
       if (typeof block.html === "string" && block.html) {
-        el.appendChild(renderRichText(block.html, doc));
+        el2.appendChild(renderRichText(block.html, doc));
       } else {
-        el.textContent = typeof block.text === "string" ? block.text : "";
+        el2.textContent = typeof block.text === "string" ? block.text : "";
       }
-      applyBlockStyle(el, block.style, "text");
-      return el;
+      applyBlockStyle(el2, block.style, "text");
+      return el2;
     }
     case "image": {
       if (typeof block.url !== "string" || !isSafeUrl(block.url)) return null;
-      const el = doc.createElement("img");
-      el.className = "veo-guide-image";
-      el.src = block.url;
-      el.alt = "";
-      applyBlockStyle(el, block.style, "image");
-      return el;
+      const el2 = doc.createElement("img");
+      el2.className = "veo-guide-image";
+      el2.src = block.url;
+      el2.alt = "";
+      applyBlockStyle(el2, block.style, "image");
+      return el2;
     }
     default:
       return null;
@@ -579,68 +587,74 @@ var BLOCK_ALIGN_SELF = {
 function clampNum(n, min, max) {
   return Math.min(max, Math.max(min, n));
 }
-function applyBlockStyle(el, style, kind) {
+function applyBlockStyle(el2, style, kind) {
   if (!style || typeof style !== "object") return;
   const s = style;
   if (kind === "image" && s.bleed === true) {
-    el.classList.add("veo-guide-image--bleed");
+    el2.classList.add("veo-guide-image--bleed");
     return;
   }
   const align = typeof s.align === "string" ? s.align : null;
   if (align && (align === "left" || align === "center" || align === "right")) {
-    if (kind === "text") el.style.textAlign = align;
-    else if (kind === "image") el.style.alignSelf = BLOCK_ALIGN_SELF[align];
+    if (kind === "text") el2.style.textAlign = align;
+    else if (kind === "image") el2.style.alignSelf = BLOCK_ALIGN_SELF[align];
   }
-  if (kind !== "image" && typeof s.color === "string") el.style.color = s.color;
+  if (kind !== "image" && typeof s.color === "string") el2.style.color = s.color;
   if (kind === "text" && typeof s.fontSize === "number" && Number.isFinite(s.fontSize)) {
-    el.style.fontSize = `${clampNum(s.fontSize, 8, 72)}px`;
+    el2.style.fontSize = `${clampNum(s.fontSize, 8, 72)}px`;
   }
   if (kind === "image" && typeof s.width === "number" && Number.isFinite(s.width)) {
-    el.style.width = `${clampNum(s.width, 10, 100)}%`;
+    el2.style.width = `${clampNum(s.width, 10, 100)}%`;
   }
   if (kind === "image" && typeof s.radius === "number" && Number.isFinite(s.radius)) {
-    el.style.borderRadius = `${clampNum(s.radius, 0, 48)}px`;
+    el2.style.borderRadius = `${clampNum(s.radius, 0, 48)}px`;
   }
   if (typeof s.marginTop === "number" && Number.isFinite(s.marginTop)) {
-    el.style.marginTop = `${clampNum(s.marginTop, 0, 64)}px`;
+    el2.style.marginTop = `${clampNum(s.marginTop, 0, 64)}px`;
   }
   if (typeof s.marginBottom === "number" && Number.isFinite(s.marginBottom)) {
-    el.style.marginBottom = `${clampNum(s.marginBottom, 0, 64)}px`;
+    el2.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`;
+      el2.style.fontSize = `${clampNum(s.fontSize, 8, 96)}px`;
     }
     if (typeof s.fontFamily === "string" && s.fontFamily && s.fontFamily !== "inherit") {
-      el.style.fontFamily = s.fontFamily;
+      el2.style.fontFamily = s.fontFamily;
     }
-    if (typeof s.fontWeight === "string" && s.fontWeight) el.style.fontWeight = s.fontWeight;
+    if (typeof s.fontWeight === "string" && s.fontWeight) el2.style.fontWeight = s.fontWeight;
     if (typeof s.textTransform === "string" && s.textTransform && s.textTransform !== "none") {
-      el.style.textTransform = s.textTransform;
+      el2.style.textTransform = s.textTransform;
     }
     if (typeof s.lineHeight === "number" && Number.isFinite(s.lineHeight)) {
-      el.style.lineHeight = `${clampNum(s.lineHeight, 50, 300)}%`;
+      el2.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`;
+      el2.style.letterSpacing = `${clampNum(s.letterSpacing, -5, 20)}px`;
     }
   }
-  if (typeof s.background === "string" && s.background) el.style.background = s.background;
+  if (typeof s.background === "string" && s.background) el2.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}`;
+    el2.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`;
+    el2.style.borderRadius = `${clampNum(s.radius, 0, 64)}px`;
+  }
+  if (typeof s.height === "number" && Number.isFinite(s.height) && s.height > 0) {
+    el2.style.height = `${clampNum(s.height, 1, 2e3)}px`;
+  }
+  if (kind !== "image" && typeof s.width === "number" && Number.isFinite(s.width) && s.width > 0) {
+    el2.style.width = `${clampNum(s.width, 1, 2e3)}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`);
+      el2.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`);
+      el2.style.setProperty(`margin-${side.toLowerCase()}`, `${clampNum(m, 0, 128)}px`);
     }
   }
 }
@@ -775,11 +789,11 @@ function applyDesignVars(host, style) {
     host.style.setProperty("--veo-pos-y", `${py * 100}%`);
   }
   if (s.elements && typeof s.elements === "object") {
-    const el = s.elements;
-    applyElementVars(host, "title", el.title);
-    applyElementVars(host, "text", el.text);
-    applyElementVars(host, "image", el.image);
-    applyCtaVars(host, el.cta);
+    const el2 = s.elements;
+    applyElementVars(host, "title", el2.title);
+    applyElementVars(host, "text", el2.text);
+    applyElementVars(host, "image", el2.image);
+    applyCtaVars(host, el2.cta);
   }
 }
 function applyCtaVars(host, raw) {
@@ -803,29 +817,29 @@ function applyCtaVars(host, raw) {
 }
 function applyElementVars(host, prefix, raw) {
   if (!raw || typeof raw !== "object") return;
-  const el = raw;
-  if (typeof el.align === "string" && (el.align === "left" || el.align === "center" || el.align === "right")) {
+  const el2 = raw;
+  if (typeof el2.align === "string" && (el2.align === "left" || el2.align === "center" || el2.align === "right")) {
     const mode = ELEMENT_ALIGN_MODE[prefix] ?? "text";
-    const value = mode === "self" ? ALIGN_SELF[el.align] : el.align;
+    const value = mode === "self" ? ALIGN_SELF[el2.align] : el2.align;
     host.style.setProperty(`--veo-${prefix}-align`, value);
   }
-  if (typeof el.color === "string" && COLOR_RE.test(el.color.trim())) {
-    host.style.setProperty(`--veo-${prefix}-color`, el.color.trim());
+  if (typeof el2.color === "string" && COLOR_RE.test(el2.color.trim())) {
+    host.style.setProperty(`--veo-${prefix}-color`, el2.color.trim());
   }
-  if (typeof el.fontSize === "number" && Number.isFinite(el.fontSize)) {
-    host.style.setProperty(`--veo-${prefix}-size`, `${clamp(el.fontSize, 8, 72)}px`);
+  if (typeof el2.fontSize === "number" && Number.isFinite(el2.fontSize)) {
+    host.style.setProperty(`--veo-${prefix}-size`, `${clamp(el2.fontSize, 8, 72)}px`);
   }
-  if (typeof el.width === "number" && Number.isFinite(el.width)) {
-    host.style.setProperty(`--veo-${prefix}-width`, `${clamp(el.width, 10, 100)}%`);
+  if (typeof el2.width === "number" && Number.isFinite(el2.width)) {
+    host.style.setProperty(`--veo-${prefix}-width`, `${clamp(el2.width, 10, 100)}%`);
   }
-  if (typeof el.radius === "number" && Number.isFinite(el.radius)) {
-    host.style.setProperty(`--veo-${prefix}-radius`, `${clamp(el.radius, 0, 48)}px`);
+  if (typeof el2.radius === "number" && Number.isFinite(el2.radius)) {
+    host.style.setProperty(`--veo-${prefix}-radius`, `${clamp(el2.radius, 0, 48)}px`);
   }
-  if (typeof el.marginTop === "number" && Number.isFinite(el.marginTop)) {
-    host.style.setProperty(`--veo-${prefix}-mt`, `${clamp(el.marginTop, 0, 64)}px`);
+  if (typeof el2.marginTop === "number" && Number.isFinite(el2.marginTop)) {
+    host.style.setProperty(`--veo-${prefix}-mt`, `${clamp(el2.marginTop, 0, 64)}px`);
   }
-  if (typeof el.marginBottom === "number" && Number.isFinite(el.marginBottom)) {
-    host.style.setProperty(`--veo-${prefix}-mb`, `${clamp(el.marginBottom, 0, 64)}px`);
+  if (typeof el2.marginBottom === "number" && Number.isFinite(el2.marginBottom)) {
+    host.style.setProperty(`--veo-${prefix}-mb`, `${clamp(el2.marginBottom, 0, 64)}px`);
   }
 }
 
@@ -875,16 +889,16 @@ function waitForElement(selector, timeoutMs = DEFAULT_ANCHOR_WAIT_MS) {
       return;
     }
     let resolved = false;
-    const finish = (el) => {
+    const finish = (el2) => {
       if (resolved) return;
       resolved = true;
       observer.disconnect();
       clearTimeout(timer);
-      resolve(el);
+      resolve(el2);
     };
     const observer = new MutationObserver(() => {
-      const el = safeQuery();
-      if (el) finish(el);
+      const el2 = safeQuery();
+      if (el2) finish(el2);
     });
     observer.observe(document.body, { childList: true, subtree: true });
     const timer = setTimeout(() => finish(null), timeoutMs);
@@ -1944,10 +1958,10 @@ function collectHostStyles() {
 function hostHtmlAttrs() {
   if (typeof document === "undefined") return "";
   try {
-    const el = document.documentElement;
+    const el2 = document.documentElement;
     const attrs = [];
     for (const name of ["class", "style", "data-theme", "data-mode", "data-color-mode"]) {
-      const v = el.getAttribute(name);
+      const v = el2.getAttribute(name);
       if (v && v.length <= 1e3 && !/["<>]/.test(v)) attrs.push(`${name}="${v}"`);
     }
     return attrs.join(" ");
@@ -2330,6 +2344,188 @@ function buildScale(wrapper, doc, min, max, btnClass, symbol) {
   wrapper.appendChild(row);
   return { wrapper, read: () => selected };
 }
+var 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";
+var QUESTION_GLYPH = "M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75";
+var STAR_GLYPH = "M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z";
+var CIRCLE = "M21 12a9 9 0 11-18 0 9 9 0 0118 0z";
+var TARGET_GLYPH = "M7.5 3.75H6A2.25 2.25 0 0 0 3.75 6v1.5M16.5 3.75H18A2.25 2.25 0 0 1 20.25 6v1.5m0 9V18A2.25 2.25 0 0 1 18 20.25h-1.5m-9 0H6A2.25 2.25 0 0 1 3.75 18v-1.5M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z";
+var BADGE_ICONS = {
+  info: { paths: [CIRCLE, INFO_GLYPH], dots: [[12, 8.25]] },
+  exclamation: { paths: [CIRCLE, "M12 8v4.5"], dots: [[12, 15.75]] },
+  question: { paths: [CIRCLE, QUESTION_GLYPH], dots: [[12, 17.25]] },
+  star: { paths: [STAR_GLYPH] },
+  "info-solid": { paths: [INFO_GLYPH], dots: [[12, 8.25]], solid: true, scale: 0.8 },
+  "exclamation-solid": { paths: ["M12 8v4.5"], dots: [[12, 15.75]], solid: true, scale: 0.8 },
+  "question-solid": { paths: [QUESTION_GLYPH], dots: [[12, 17.25]], solid: true, scale: 0.8 },
+  "star-solid": { paths: [STAR_GLYPH], solid: true, scale: 0.55 },
+  "target-solid": { paths: [TARGET_GLYPH], solid: true, scale: 0.6 },
+  new: { paths: [], text: "New" }
+};
+var DEFAULT_MARKER_SIZE = 14;
+var DEFAULT_MARKER_Z = 19e3;
+var SIDE_GAP = 8;
+function num(v, fallback) {
+  return typeof v === "number" && Number.isFinite(v) ? v : fallback;
+}
+function iconNode(doc, name, size, color) {
+  const def = BADGE_ICONS[name] ?? BADGE_ICONS.info;
+  if (def.text) {
+    const t = doc.createElement("span");
+    t.textContent = def.text;
+    t.style.font = `700 ${Math.round(size * 0.85)}px/1 system-ui, -apple-system, sans-serif`;
+    t.style.color = color;
+    return t;
+  }
+  const ns = "http://www.w3.org/2000/svg";
+  const svg2 = doc.createElementNS(ns, "svg");
+  svg2.setAttribute("viewBox", "0 0 24 24");
+  svg2.setAttribute("width", String(size));
+  svg2.setAttribute("height", String(size));
+  svg2.setAttribute("fill", "none");
+  svg2.setAttribute("aria-hidden", "true");
+  const glyphColor = def.solid ? "#ffffff" : color;
+  if (def.solid) {
+    const bg = doc.createElementNS(ns, "circle");
+    bg.setAttribute("cx", "12");
+    bg.setAttribute("cy", "12");
+    bg.setAttribute("r", "12");
+    bg.setAttribute("fill", color);
+    svg2.appendChild(bg);
+  }
+  const g = doc.createElementNS(ns, "g");
+  g.setAttribute("stroke", glyphColor);
+  g.setAttribute("stroke-width", def.solid ? "2" : "1.8");
+  g.setAttribute("stroke-linecap", "round");
+  g.setAttribute("stroke-linejoin", "round");
+  if (def.scale && def.scale !== 1) {
+    const k = def.scale;
+    const t = 12 - 12 * k;
+    g.setAttribute("transform", `translate(${t} ${t}) scale(${k})`);
+  }
+  for (const d of def.paths) {
+    const path = doc.createElementNS(ns, "path");
+    path.setAttribute("d", d);
+    g.appendChild(path);
+  }
+  for (const [cx, cy] of def.dots ?? []) {
+    const dot = doc.createElementNS(ns, "circle");
+    dot.setAttribute("cx", String(cx));
+    dot.setAttribute("cy", String(cy));
+    dot.setAttribute("r", "0.9");
+    dot.setAttribute("fill", glyphColor);
+    dot.setAttribute("stroke", "none");
+    g.appendChild(dot);
+  }
+  svg2.appendChild(g);
+  return svg2;
+}
+function buildMarkerElement(doc, marker) {
+  const size = num(marker.size, DEFAULT_MARKER_SIZE);
+  const color = marker.color || "#000000";
+  const el2 = doc.createElement("span");
+  el2.className = `veo-badge-marker veo-badge-marker-${marker.kind}`;
+  el2.style.display = "inline-flex";
+  el2.style.alignItems = "center";
+  el2.style.justifyContent = "center";
+  el2.style.boxSizing = "border-box";
+  el2.style.lineHeight = "1";
+  if (marker.kind === "image") {
+    const img = doc.createElement("img");
+    img.alt = "";
+    img.src = marker.imageUrl || "";
+    img.style.width = `${size}px`;
+    img.style.height = `${size}px`;
+    img.style.objectFit = "contain";
+    img.style.display = "block";
+    el2.appendChild(img);
+    return el2;
+  }
+  if (marker.kind === "icon-text") {
+    el2.style.gap = "6px";
+    el2.style.color = color;
+    el2.style.fontSize = `${size}px`;
+    el2.style.fontFamily = "inherit";
+    el2.style.fontWeight = "600";
+    el2.style.whiteSpace = "nowrap";
+    el2.style.background = marker.bgColor || "transparent";
+    const bw = num(marker.borderWidth, 0);
+    if (bw > 0) el2.style.border = `${bw}px solid ${marker.borderColor || color}`;
+    el2.style.padding = `${num(marker.paddingY, 6)}px ${num(marker.paddingX, 10)}px`;
+    el2.style.borderRadius = `${num(marker.radius, 999)}px`;
+    if (marker.showIcon !== false)
+      el2.appendChild(iconNode(doc, marker.icon || "star", size, color));
+    const text = doc.createElement("span");
+    text.textContent = marker.text || "";
+    el2.appendChild(text);
+    return el2;
+  }
+  el2.style.width = `${size}px`;
+  el2.style.height = `${size}px`;
+  el2.appendChild(iconNode(doc, marker.icon || "info", size, color));
+  return el2;
+}
+function markerOffset(anchor, marker, position, offset6) {
+  const right = anchor.left + anchor.width;
+  const bottom = anchor.top + anchor.height;
+  const midY = anchor.top + anchor.height / 2 - marker.height / 2;
+  const midX = anchor.left + anchor.width / 2 - marker.width / 2;
+  let x;
+  let y;
+  switch (position) {
+    case "top-left":
+      x = anchor.left - marker.width / 2;
+      y = anchor.top - marker.height / 2;
+      break;
+    case "bottom-left":
+      x = anchor.left - marker.width / 2;
+      y = bottom - marker.height / 2;
+      break;
+    case "bottom-right":
+      x = right - marker.width / 2;
+      y = bottom - marker.height / 2;
+      break;
+    case "left":
+      x = anchor.left - marker.width - SIDE_GAP;
+      y = midY;
+      break;
+    case "right":
+      x = right + SIDE_GAP;
+      y = midY;
+      break;
+    case "center":
+      x = midX;
+      y = midY;
+      break;
+    default:
+      x = right - marker.width / 2;
+      y = anchor.top - marker.height / 2;
+  }
+  return { x: x + offset6.x, y: y + offset6.y };
+}
+function attachMarker(anchor, host, marker) {
+  host.style.position = "absolute";
+  host.style.zIndex = String(num(marker.zIndex, DEFAULT_MARKER_Z));
+  host.style.margin = "0";
+  const update = () => {
+    const a = anchor.getBoundingClientRect();
+    const m = host.getBoundingClientRect();
+    const { x, y } = markerOffset(
+      {
+        left: a.left + window.scrollX,
+        top: a.top + window.scrollY,
+        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) }
+    );
+    host.style.left = `${Math.round(x)}px`;
+    host.style.top = `${Math.round(y)}px`;
+  };
+  update();
+  return dom.autoUpdate(anchor, host, update);
+}
 
 // src/plugins/guides/renderers/composite-renderer.ts
 var ROW_ALIGN = {
@@ -2625,7 +2821,9 @@ var CompositeRenderer = class extends BaseRenderer {
     badge.style.cursor = "pointer";
     badge.style.display = "inline-flex";
     badge.style.alignItems = "center";
-    this.buildContent(badge, step.badge?.blocks ?? [], doc, context, idx, [], host);
+    const marker = step.badge?.marker ?? null;
+    if (marker) badge.appendChild(buildMarkerElement(doc, marker));
+    else this.buildContent(badge, step.badge?.blocks ?? [], doc, context, idx, [], host);
     root.appendChild(badge);
     if (design.fullWidth === true) {
       card.style.width = "auto";
@@ -2640,10 +2838,17 @@ var CompositeRenderer = class extends BaseRenderer {
     if (caretEl) wrapper.appendChild(caretEl);
     wrapper.appendChild(card);
     root.appendChild(wrapper);
-    host.style.display = "inline-block";
-    const pos = inlinePosOf(step.inlinePosition);
-    insertHost(anchor, host, pos);
-    this.registerCleanup(keepHostAttached(host, anchorSelector, pos));
+    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);
+      insertHost(anchor, host, pos);
+      this.registerCleanup(keepHostAttached(host, anchorSelector, pos));
+    }
     let open = false;
     let stopFloat = null;
     let closeTimer = null;
@@ -2696,6 +2901,7 @@ var CompositeRenderer = class extends BaseRenderer {
       stopFloat?.();
       if (closeTimer !== null) clearTimeout(closeTimer);
     });
+    if (context.badgeOpen) openTip();
     return closeTip;
   }
 };
@@ -2749,14 +2955,14 @@ function makeCaret(doc, design) {
   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);
+  const el2 = anchor;
+  const prevPosition = el2.style.position;
+  const prevZ = el2.style.zIndex;
+  if (getComputedStyle(el2).position === "static") el2.style.position = "relative";
+  el2.style.zIndex = String(zIndex);
   return () => {
-    el.style.position = prevPosition;
-    el.style.zIndex = prevZ;
+    el2.style.position = prevPosition;
+    el2.style.zIndex = prevZ;
   };
 }
 async function anchorPosition(anchor, wrapper, caret, preferred = "bottom") {
@@ -3272,7 +3478,8 @@ var GuidePreviewController = class {
   }
   preview(input) {
     const nextStep = input.guideSteps[0];
-    if (this.singleStep && this.input && input.guideType === this.input.guideType && input.guideType !== "walkthrough" && nextStep && this.singleStep.updateStep(nextStep)) {
+    if (this.singleStep && this.input && input.guideType === this.input.guideType && input.guideType !== "walkthrough" && // Abrir/cerrar el tooltip del badge requiere remontar.
+    input.badgeOpen === true === (this.input.badgeOpen === true) && nextStep && this.singleStep.updateStep(nextStep)) {
       this.input = input;
       return {
         close: () => this.close(),
@@ -3302,7 +3509,8 @@ var GuidePreviewController = class {
     }
     return null;
   }
-  close() {
+  close(byUser = false) {
+    const onClosed = byUser ? this.input?.onClosed : void 0;
     if (this.singleStep) {
       safeDestroy(this.singleStep);
       this.singleStep = null;
@@ -3314,6 +3522,7 @@ var GuidePreviewController = class {
     this.walkthroughGuide = null;
     this.walkthroughIndex = 0;
     this.input = null;
+    onClosed?.();
   }
   async renderSingleStep(guide) {
     const renderer = createSingleStepRenderer(guide.guideType);
@@ -3326,7 +3535,8 @@ var GuidePreviewController = class {
         onInteraction: (event) => {
           if (event.action === "shown") shown = true;
         },
-        onClose: () => this.close(),
+        onClose: () => this.close(true),
+        badgeOpen: this.input?.badgeOpen === true,
         onTrack: () => {
         },
         // Encadenado en preview: no-op — el editor no puede montar otra guía
@@ -3392,7 +3602,7 @@ var GuidePreviewController = class {
           guide,
           onInteraction: () => {
           },
-          onClose: () => this.close(),
+          onClose: () => this.close(true),
           nav: { stepIndex: index, totalSteps: guide.guideSteps.length, callbacks }
         });
       } catch {
@@ -3486,15 +3696,27 @@ function safeDestroy(renderer) {
 }
 
 // src/plugins/guides/url-match.ts
+function urlCandidates(pageUrl) {
+  const out = [pageUrl];
+  try {
+    const u = new URL(pageUrl);
+    out.push(`${u.pathname}${u.search}${u.hash}`);
+    if (u.hash.startsWith("#/")) out.push(u.hash.slice(1));
+  } catch {
+  }
+  return out;
+}
 function matchesUrl(matcher, pageUrl) {
+  const candidates = urlCandidates(pageUrl);
   switch (matcher.type) {
     case "exact":
-      return matcher.pattern === pageUrl;
+      return candidates.some((c) => c === matcher.pattern);
     case "prefix":
-      return pageUrl.startsWith(matcher.pattern);
+      return candidates.some((c) => c.startsWith(matcher.pattern));
     case "regex":
       try {
-        return new RegExp(matcher.pattern).test(pageUrl);
+        const re = new RegExp(matcher.pattern);
+        return candidates.some((c) => re.test(c));
       } catch {
         return false;
       }
@@ -3508,17 +3730,375 @@ function stepMatchesPage(loc, pageUrl) {
 // src/plugins/builder/bridge-protocol.ts
 var VEO_BUILDER_SOURCE = "veo-builder";
 
+// src/plugins/builder/builder-chrome.ts
+var CHROME_TOPBAR_H = 64;
+var CHROME_STEPS_H = 128;
+var ICONS = {
+  bolt: '<path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"/>',
+  desktop: '<path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25"/>',
+  updown: '<path stroke-linecap="round" stroke-linejoin="round" d="M3 7.5 7.5 3m0 0L12 7.5M7.5 3v13.5m13.5 0L16.5 21m0 0L12 16.5m4.5 4.5V7.5"/>',
+  map: '<path stroke-linecap="round" stroke-linejoin="round" d="M9 6.75V15m6-6v8.25m.503 3.498 4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 0 0-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0Z"/>',
+  eye: '<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>',
+  chevronDown: '<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>',
+  chevronUp: '<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5"/>',
+  plus: '<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>',
+  cursor: '<path stroke-linecap="round" stroke-linejoin="round" d="M15.042 21.672 13.684 16.6m0 0-2.51 2.225.569-9.47 5.227 7.917-3.286-.672ZM12 2.25V4.5m5.834.166-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243-1.59-1.59"/>',
+  spinner: '<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182"/>'
+};
+function svg(name, size = 20) {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">${ICONS[name]}</svg>`;
+}
+function shortDate(iso) {
+  if (!iso) return "";
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return "";
+  return d.toLocaleDateString("es", { day: "numeric", month: "short" }).replace(".", "");
+}
+function el(tag, className, html) {
+  const node = document.createElement(tag);
+  node.className = className;
+  if (html !== void 0) node.innerHTML = html;
+  return node;
+}
+function iconButton(name, title, className = "") {
+  const b = el("button", `veo-tb-icon ${className}`.trim(), svg(name));
+  b.type = "button";
+  b.title = title;
+  b.setAttribute("aria-label", title);
+  return b;
+}
+function injectBuilderChrome(opts) {
+  if (!hasWindow() || !hasDocument()) {
+    return {
+      setState: () => {
+      },
+      height: () => 0,
+      dock: () => "top",
+      setPreview: () => {
+      },
+      setHidden: () => {
+      },
+      onHeightChange: () => {
+      },
+      teardown: () => {
+      }
+    };
+  }
+  const host = document.createElement("div");
+  host.setAttribute("data-veo-builder-chrome", "");
+  host.setAttribute("data-veo-ignore", "");
+  const shadow = host.attachShadow({ mode: "open" });
+  const style = document.createElement("style");
+  style.textContent = CHROME_CSS;
+  const root = el("div", "veo-chrome");
+  const topbar = el("div", "veo-tb");
+  const brand = el("div", "veo-tb-brand", svg("bolt", 18));
+  const nameEl = el("div", "veo-tb-name");
+  const statusEl = el("span", "veo-tb-status");
+  statusEl.hidden = true;
+  const sep = el("span", "veo-tb-sep");
+  const appEl = el("div", "veo-tb-app", `${svg("desktop", 16)}<span></span>`);
+  appEl.querySelector("span").textContent = opts.appLabel;
+  const left = el("div", "veo-tb-left");
+  left.append(brand, nameEl, statusEl, sep, appEl);
+  const right = el("div", "veo-tb-right");
+  const dockBtn = iconButton("updown", "Mover la barra abajo");
+  const showPanel = iconButton("map", "Mostrar el editor");
+  const preview = iconButton("eye", "Vista previa");
+  const exit = el("button", "veo-tb-text", "Salir");
+  exit.type = "button";
+  const saveGroup = el("div", "veo-tb-save");
+  const save = el("button", "veo-tb-save-main", "<span>Guardar</span>");
+  save.type = "button";
+  const saveMore = el("button", "veo-tb-save-more", svg("chevronDown", 16));
+  saveMore.type = "button";
+  saveMore.title = "M\xE1s opciones de guardado";
+  saveMore.setAttribute("aria-label", "M\xE1s opciones de guardado");
+  const saveMenu = el("div", "veo-tb-menu");
+  const saveExit = el("button", "veo-tb-menu-item", "Guardar y salir");
+  saveExit.type = "button";
+  saveMenu.append(saveExit);
+  saveMenu.hidden = true;
+  saveGroup.append(save, saveMore, saveMenu);
+  right.append(dockBtn, showPanel, preview, el("span", "veo-tb-vsep"), exit, saveGroup);
+  topbar.append(left, right);
+  const stepsBar = el("div", "veo-steps");
+  const stepsList = el("div", "veo-steps-list");
+  stepsBar.append(stepsList);
+  const togglePill = el("button", "veo-steps-toggle");
+  togglePill.type = "button";
+  root.append(topbar, stepsBar, togglePill);
+  const previewPill = el("div", "veo-preview-pill");
+  const previewLabel = el(
+    "span",
+    "veo-preview-label",
+    `${svg("eye", 18)}<span>Est\xE1s en vista previa</span>`
+  );
+  const previewExit = el("button", "veo-preview-exit", "Salir");
+  previewExit.type = "button";
+  previewPill.append(previewLabel, previewExit);
+  previewPill.hidden = true;
+  shadow.append(style, root, previewPill);
+  document.body.appendChild(host);
+  const html = document.documentElement;
+  const prevMarginTop = html.style.marginTop;
+  const prevMarginBottom = html.style.marginBottom;
+  let collapsed = false;
+  let dock = "top";
+  let previewOn = false;
+  let hiddenOn = false;
+  let heightCb = null;
+  const height = () => CHROME_TOPBAR_H + (collapsed ? 0 : CHROME_STEPS_H);
+  const applyHeight = () => {
+    const h = previewOn || hiddenOn ? 0 : height();
+    html.style.marginTop = dock === "top" ? `${h}px` : prevMarginTop;
+    html.style.marginBottom = dock === "bottom" ? `${h}px` : prevMarginBottom;
+    root.style.setProperty("--veo-chrome-h", `${height()}px`);
+    root.classList.toggle("is-bottom", dock === "bottom");
+    stepsBar.hidden = collapsed;
+    const open = dock === "top" ? "chevronUp" : "chevronDown";
+    const closedIcon = dock === "top" ? "chevronDown" : "chevronUp";
+    togglePill.innerHTML = `<span>${collapsed ? "Mostrar pasos" : "Ocultar pasos"}</span>${svg(
+      collapsed ? closedIcon : open,
+      16
+    )}`;
+    dockBtn.title = dock === "top" ? "Mover la barra abajo" : "Mover la barra arriba";
+    dockBtn.setAttribute("aria-label", dockBtn.title);
+    heightCb?.(h);
+  };
+  const setPreview = (on) => {
+    previewOn = on;
+    root.hidden = on || hiddenOn;
+    previewPill.hidden = !on;
+    applyHeight();
+  };
+  const setHidden = (on) => {
+    hiddenOn = on;
+    root.hidden = on || previewOn;
+    applyHeight();
+  };
+  togglePill.addEventListener("click", () => {
+    collapsed = !collapsed;
+    applyHeight();
+  });
+  const act = (a) => opts.onAction(a);
+  dockBtn.addEventListener("click", () => {
+    dock = dock === "top" ? "bottom" : "top";
+    applyHeight();
+    act({ action: "dock", position: dock });
+  });
+  showPanel.addEventListener("click", () => act({ action: "show-panel" }));
+  preview.addEventListener("click", () => act({ action: "preview" }));
+  previewExit.addEventListener("click", () => act({ action: "exit-preview" }));
+  exit.addEventListener("click", () => act({ action: "exit" }));
+  save.addEventListener("click", () => act({ action: "save", exit: false }));
+  saveMore.addEventListener("click", (e) => {
+    e.stopPropagation();
+    saveMenu.hidden = !saveMenu.hidden;
+  });
+  saveExit.addEventListener("click", () => {
+    saveMenu.hidden = true;
+    act({ action: "save", exit: true });
+  });
+  const closeMenu = () => {
+    saveMenu.hidden = true;
+  };
+  document.addEventListener("click", closeMenu);
+  let current = null;
+  const render = () => {
+    const s = current;
+    if (!s) return;
+    const date = shortDate(s.createdAt);
+    nameEl.textContent = `${s.guideName.trim() || "Sin nombre"}${date ? ` \xB7 ${date}` : ""}`;
+    if (s.status) {
+      statusEl.hidden = false;
+      statusEl.textContent = s.status.label;
+      statusEl.dataset.tone = s.status.tone;
+      statusEl.title = "Estado de la gu\xEDa (se cambia desde la lista de gu\xEDas)";
+    } else {
+      statusEl.hidden = true;
+    }
+    save.innerHTML = s.saving ? `${svg("spinner", 16)}<span>Guardando\u2026</span>` : "<span>Guardar</span>";
+    save.disabled = s.saving;
+    saveExit.disabled = s.saving;
+    stepsList.replaceChildren();
+    const activation = stepCard(svg("cursor", 22), "Activaci\xF3n", s.section === "activation");
+    activation.addEventListener("click", () => act({ action: "select-activation" }));
+    stepsList.append(activation);
+    s.steps.forEach((st, i) => {
+      const thumb = st.presentation === "inline" ? '<div class="veo-thumb veo-thumb-inline"><i></i><i></i><i></i></div>' : '<div class="veo-thumb"><i></i><i></i><b></b></div>';
+      const card = stepCard(thumb, st.label, s.section === "step" && s.activeStep === i);
+      card.addEventListener("click", () => act({ action: "select-step", index: i }));
+      stepsList.append(card);
+    });
+    const add = el("button", "veo-step-add", `${svg("plus", 18)}<span>Agregar paso</span>`);
+    add.type = "button";
+    add.addEventListener("click", () => act({ action: "add-step" }));
+    stepsList.append(add);
+  };
+  applyHeight();
+  return {
+    setState: (state) => {
+      current = state;
+      render();
+    },
+    height,
+    dock: () => dock,
+    setPreview,
+    setHidden,
+    onHeightChange: (cb) => {
+      heightCb = cb;
+    },
+    teardown: () => {
+      document.removeEventListener("click", closeMenu);
+      html.style.marginTop = prevMarginTop;
+      html.style.marginBottom = prevMarginBottom;
+      host.remove();
+    }
+  };
+}
+function stepCard(inner, label, active) {
+  const b = el(
+    "button",
+    `veo-step${active ? " is-active" : ""}`,
+    `<div class="veo-step-box">${inner}</div><span class="veo-step-label"></span>`
+  );
+  b.type = "button";
+  b.querySelector(".veo-step-label").textContent = label;
+  b.setAttribute("aria-pressed", active ? "true" : "false");
+  return b;
+}
+var CHROME_CSS = `
+:host { all: initial; }
+.veo-chrome {
+  position: fixed; top: 0; left: 0; right: 0;
+  display: flex; flex-direction: column;
+  z-index: 2147483646;
+  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+  font-size: 14px; color: #1c1917;
+}
+.veo-chrome[hidden] { display: none; }
+.veo-chrome.is-bottom { top: auto; bottom: 0; flex-direction: column-reverse; }
+.veo-chrome.is-bottom .veo-tb-menu { top: auto; bottom: calc(100% + 8px); }
+.veo-chrome.is-bottom .veo-steps { border-bottom: 0; border-top: 1px solid #d6cfc8; }
+.veo-chrome.is-bottom .veo-steps-toggle { top: auto; bottom: var(--veo-chrome-h, ${CHROME_TOPBAR_H + CHROME_STEPS_H}px); transform: translate(-50%, 50%); }
+.veo-preview-pill {
+  position: fixed; top: 28px; left: 50%; transform: translateX(-50%);
+  z-index: 2147483646;
+  display: inline-flex; align-items: center; gap: 12px;
+  background: #2b2623; color: #fff; border-radius: 999px; padding: 12px 20px;
+  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px; font-weight: 500;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
+}
+.veo-preview-pill[hidden] { display: none; }
+.veo-preview-label { display: inline-flex; align-items: center; gap: 10px; padding-right: 12px; border-right: 1px solid rgba(255,255,255,0.3); }
+.veo-preview-exit { border: 0; background: transparent; color: #fff; font: inherit; cursor: pointer; padding: 0 2px; }
+.veo-preview-exit:hover { text-decoration: underline; }
+.veo-tb {
+  height: ${CHROME_TOPBAR_H}px; box-sizing: border-box;
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 0 20px; gap: 16px;
+  background: #2b2623; color: #fff;
+}
+.veo-tb-left, .veo-tb-right { display: flex; align-items: center; gap: 12px; min-width: 0; }
+.veo-tb-brand {
+  width: 36px; height: 36px; border-radius: 999px; background: #b74d00;
+  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
+}
+.veo-tb-name { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.veo-tb-status { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; background: rgba(255,255,255,0.18); color: #fff; }
+.veo-tb-status[data-tone="live"] { background: #16a34a; }
+.veo-tb-status[data-tone="testing"] { background: #b45309; }
+.veo-tb-status[data-tone="review"] { background: #7c3aed; }
+.veo-tb-status[data-tone="draft"] { background: #0f766e; }
+.veo-tb-status[data-tone="paused"] { background: rgba(255,255,255,0.28); }
+.veo-tb-sep { width: 1px; height: 24px; background: rgba(255,255,255,0.25); }
+.veo-tb-vsep { width: 1px; height: 28px; background: rgba(255,255,255,0.25); margin: 0 4px; }
+.veo-tb-app { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.85); white-space: nowrap; }
+.veo-tb-icon {
+  width: 42px; height: 42px; border-radius: 10px; border: 0;
+  background: rgba(255,255,255,0.12); color: #fff; cursor: pointer;
+  display: inline-flex; align-items: center; justify-content: center;
+}
+.veo-tb-icon:hover { background: rgba(255,255,255,0.22); }
+.veo-tb-text { border: 0; background: transparent; color: #fff; font: inherit; font-size: 15px; cursor: pointer; padding: 8px 6px; }
+.veo-tb-text:hover { text-decoration: underline; }
+.veo-tb-save { position: relative; display: inline-flex; border-radius: 10px; overflow: visible; }
+.veo-tb-save-main, .veo-tb-save-more {
+  border: 0; background: #b74d00; color: #fff; font: inherit; font-weight: 600; font-size: 15px;
+  cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 42px;
+}
+.veo-tb-save-main { padding: 0 8px 0 18px; border-radius: 10px 0 0 10px; }
+.veo-tb-save-more { padding: 0 12px 0 6px; border-radius: 0 10px 10px 0; }
+.veo-tb-save-main:hover, .veo-tb-save-more:hover { background: #953c00; }
+.veo-tb-save-main:disabled { opacity: 0.7; cursor: default; }
+.veo-tb-menu {
+  position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px;
+  background: #fff; color: #1c1917; border-radius: 12px; padding: 6px;
+  box-shadow: 0 12px 32px rgba(0,0,0,0.22);
+}
+.veo-tb-menu-item {
+  display: block; width: 100%; text-align: left; border: 0; background: transparent;
+  font: inherit; font-size: 15px; padding: 10px 14px; border-radius: 8px; cursor: pointer;
+}
+.veo-tb-menu-item:hover { background: #f5efe9; }
+.veo-steps {
+  height: ${CHROME_STEPS_H}px; box-sizing: border-box;
+  background: #e7e1dc; border-bottom: 1px solid #d6cfc8;
+  padding: 16px 28px 0; overflow-x: auto;
+}
+.veo-steps[hidden] { display: none; }
+.veo-steps-list { display: flex; align-items: flex-start; gap: 20px; }
+.veo-step { border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; }
+.veo-step-box {
+  width: 116px; height: 64px; border-radius: 10px; background: #fff; border: 2px solid transparent;
+  display: flex; align-items: center; justify-content: center; color: #2b2623;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
+}
+.veo-step.is-active .veo-step-box { border-color: #b74d00; }
+.veo-step-label { font-size: 13px; color: #6b635d; }
+.veo-step.is-active .veo-step-label { color: #2b2623; font-weight: 600; }
+.veo-thumb { width: 72px; height: 36px; border: 1.5px solid #c9c2bb; border-radius: 6px; padding: 6px 7px; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; }
+.veo-thumb i { display: block; height: 3px; border-radius: 2px; background: #2b2623; width: 70%; }
+.veo-thumb i + i { width: 45%; background: #c9c2bb; }
+.veo-thumb b { display: block; height: 6px; width: 24px; border-radius: 2px; background: #b74d00; align-self: flex-end; }
+.veo-thumb-inline { border-style: dashed; }
+.veo-thumb-inline i { width: 100%; }
+.veo-step-add { border: 0; background: transparent; font: inherit; font-size: 15px; color: #6b635d; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 64px; padding: 0 8px; }
+.veo-step-add:hover { color: #2b2623; }
+.veo-steps-toggle {
+  position: absolute; left: 50%; top: var(--veo-chrome-h, ${CHROME_TOPBAR_H + CHROME_STEPS_H}px);
+  transform: translate(-50%, -50%);
+  border: 0; background: #2b2623; color: #fff; font: inherit; font-size: 14px; font-weight: 500;
+  border-radius: 999px; padding: 10px 18px; cursor: pointer;
+  display: inline-flex; align-items: center; gap: 8px;
+  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
+}
+`;
+
 // src/plugins/builder/builder-panel.ts
 var DEFAULT_PANEL_PATH = "/guides/design";
-var PANEL_W = 400;
-var PANEL_H = 640;
+var PANEL_W = 484;
+var PANEL_H = 660;
 var MIN_W = 320;
 var MIN_H = 320;
 var MARGIN = 16;
+var HEADER_H = 52;
 function injectBuilderPanel(opts) {
   if (!hasWindow() || !hasDocument()) {
-    return { target: () => null, frameRect: () => null, teardown: () => {
-    } };
+    return {
+      target: () => null,
+      frameRect: () => null,
+      teardown: () => {
+      },
+      setTitle: () => {
+      },
+      setVisible: () => {
+      },
+      isVisible: () => false,
+      setTopOffset: () => {
+      }
+    };
   }
   const panelUrl = buildPanelUrl(opts);
   const host = document.createElement("div");
@@ -3528,43 +4108,68 @@ function injectBuilderPanel(opts) {
   style.textContent = PANEL_CSS;
   const card = document.createElement("div");
   card.className = "veo-panel";
-  let left = Math.max(MARGIN, window.innerWidth - PANEL_W - MARGIN);
-  let top = MARGIN;
+  let topOffset = opts.topOffset ?? 0;
+  let left = 40;
+  let top = topOffset + MARGIN;
   card.style.left = `${left}px`;
   card.style.top = `${top}px`;
   card.style.width = `${PANEL_W}px`;
   card.style.height = `${PANEL_H}px`;
   const header = document.createElement("div");
   header.className = "veo-panel-header";
+  const grip = document.createElement("span");
+  grip.className = "veo-panel-grip";
+  grip.setAttribute("aria-hidden", "true");
+  grip.textContent = "\xB7\xB7\xB7";
   const title = document.createElement("span");
   title.className = "veo-panel-title";
   title.textContent = "OnUser \xB7 Editor";
   const actions = document.createElement("div");
   actions.className = "veo-panel-actions";
-  const popout = document.createElement("button");
-  popout.className = "veo-panel-btn";
-  popout.type = "button";
-  popout.title = "Abrir en ventana aparte";
-  popout.setAttribute("aria-label", "Abrir en ventana aparte");
-  popout.textContent = "\u29C9";
-  const close = document.createElement("button");
-  close.className = "veo-panel-btn veo-panel-close";
-  close.type = "button";
-  close.title = "Cerrar";
-  close.setAttribute("aria-label", "Cerrar");
-  close.textContent = "\u2715";
-  actions.append(popout, close);
-  header.append(title, actions);
+  const popout = panelButton(ICON_POPOUT, "Abrir en ventana aparte");
+  const maximize = panelButton(ICON_EXPAND, "Maximizar");
+  const minimize = panelButton(ICON_MINUS, "Minimizar");
+  actions.append(popout, maximize, minimize);
+  header.append(grip, title, actions);
   const iframe = document.createElement("iframe");
   iframe.className = "veo-panel-frame";
   iframe.title = "Editor de Veo";
   iframe.src = panelUrl;
-  const grip = document.createElement("div");
-  grip.className = "veo-panel-resize";
-  grip.setAttribute("aria-hidden", "true");
-  card.append(header, iframe, grip);
+  const resizeGrip = document.createElement("div");
+  resizeGrip.className = "veo-panel-resize";
+  resizeGrip.setAttribute("aria-hidden", "true");
+  card.append(header, iframe, resizeGrip);
   shadow.append(style, card);
   document.body.appendChild(host);
+  let visible = true;
+  let maximized = false;
+  let restore = null;
+  const setVisible = (next) => {
+    visible = next;
+    card.style.display = next && !(popped && !popped.closed) ? "" : "none";
+  };
+  minimize.addEventListener("click", () => setVisible(false));
+  maximize.addEventListener("click", () => {
+    maximized = !maximized;
+    if (maximized) {
+      restore = { left, top, w: card.offsetWidth, h: card.offsetHeight };
+      left = MARGIN;
+      top = topOffset + MARGIN;
+      card.style.left = `${left}px`;
+      card.style.top = `${top}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`;
+      maximize.title = "Restaurar";
+    } else if (restore) {
+      left = restore.left;
+      top = restore.top;
+      card.style.left = `${left}px`;
+      card.style.top = `${top}px`;
+      card.style.width = `${restore.w}px`;
+      card.style.height = `${restore.h}px`;
+      maximize.title = "Maximizar";
+    }
+  });
   let popped = null;
   let pollTimer;
   const stopPoll = () => {
@@ -3573,7 +4178,6 @@ function injectBuilderPanel(opts) {
       pollTimer = void 0;
     }
   };
-  close.addEventListener("click", () => opts.onClose());
   popout.addEventListener("click", () => {
     const win = window.open(
       panelUrl,
@@ -3591,7 +4195,7 @@ function injectBuilderPanel(opts) {
     }, 600);
   });
   header.addEventListener("mousedown", (e) => {
-    if (e.target?.classList.contains("veo-panel-btn")) return;
+    if (e.target?.closest(".veo-panel-btn")) return;
     e.preventDefault();
     const sx = e.clientX;
     const sy = e.clientY;
@@ -3600,7 +4204,7 @@ function injectBuilderPanel(opts) {
     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), 0, Math.max(0, window.innerHeight - 40));
+      top = clamp3(ot + (ev.clientY - sy), topOffset, Math.max(topOffset, window.innerHeight - 40));
       card.style.left = `${left}px`;
       card.style.top = `${top}px`;
     };
@@ -3612,7 +4216,7 @@ function injectBuilderPanel(opts) {
     window.addEventListener("mousemove", move);
     window.addEventListener("mouseup", up);
   });
-  grip.addEventListener("mousedown", (e) => {
+  resizeGrip.addEventListener("mousedown", (e) => {
     e.preventDefault();
     e.stopPropagation();
     const sx = e.clientX;
@@ -3639,9 +4243,33 @@ function injectBuilderPanel(opts) {
       stopPoll();
       if (popped && !popped.closed) popped.close();
       host.remove();
+    },
+    setTitle: (t) => {
+      title.textContent = t;
+    },
+    setVisible,
+    isVisible: () => visible,
+    setTopOffset: (px) => {
+      topOffset = px;
+      if (top < topOffset + MARGIN) {
+        top = topOffset + MARGIN;
+        card.style.top = `${top}px`;
+      }
     }
   };
 }
+var ICON_POPOUT = '<path stroke-linecap="round" stroke-linejoin="round" d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z"/>';
+var ICON_EXPAND = '<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"/>';
+var ICON_MINUS = '<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14"/>';
+function panelButton(iconPath, label) {
+  const b = document.createElement("button");
+  b.className = "veo-panel-btn";
+  b.type = "button";
+  b.title = label;
+  b.setAttribute("aria-label", label);
+  b.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">${iconPath}</svg>`;
+  return b;
+}
 function clamp3(v, min, max) {
   return Math.min(Math.max(v, min), max);
 }
@@ -3661,28 +4289,33 @@ var PANEL_CSS = `
   max-width: 96vw; max-height: 94vh;
   display: flex; flex-direction: column;
   background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 12px 40px rgba(0,0,0,0.28);
+  border-radius: 14px;
+  box-shadow: 0 12px 40px rgba(0,0,0,0.22);
   overflow: hidden;
   z-index: 2147483647;
   font-family: system-ui, -apple-system, sans-serif;
 }
 .veo-panel-header {
-  flex: 0 0 auto;
+  position: relative; flex: 0 0 auto; height: ${HEADER_H}px; box-sizing: border-box;
   display: flex; align-items: center; justify-content: space-between;
-  padding: 8px 10px 8px 12px;
-  background: #1b1714; color: #f7f1eb;
-  font-size: 13px; font-weight: 600;
+  padding: 10px 14px 0 22px;
+  background: #fbf8f5; color: #1c1917; border-bottom: 1px solid #e8e2dc;
+  font-size: 17px; font-weight: 700;
   cursor: grab;
 }
 .veo-panel-header:active { cursor: grabbing; }
+.veo-panel-grip {
+  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
+  color: #b5aca4; font-size: 14px; letter-spacing: 1px; line-height: 12px;
+}
+.veo-panel-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .veo-panel-actions { display: flex; gap: 2px; }
 .veo-panel-btn {
-  border: 0; background: transparent; color: #fff;
-  font-size: 14px; cursor: pointer; line-height: 1;
-  padding: 4px 7px; border-radius: 6px;
+  border: 0; background: transparent; color: #4b4540;
+  cursor: pointer; line-height: 1; display: inline-flex; align-items: center;
+  padding: 6px; border-radius: 8px;
 }
-.veo-panel-btn:hover { background: rgba(255,255,255,0.15); }
+.veo-panel-btn:hover { background: rgba(0,0,0,0.06); color: #1c1917; }
 .veo-panel-frame { flex: 1 1 auto; width: 100%; border: 0; background: #fff; }
 .veo-panel-resize {
   position: absolute; right: 0; bottom: 0;
@@ -4022,9 +4655,9 @@ var PICKER_STYLES = `
   z-index: ${PICKER_Z};
   pointer-events: none;
   box-sizing: border-box;
-  background: rgba(99, 102, 241, 0.22);
-  border: 1px dashed rgba(99, 102, 241, 0.95);
-  border-radius: 2px;
+  background: transparent;
+  border: 3px dashed #b74d00;
+  border-radius: 8px;
   transition: top 60ms ease-out, left 60ms ease-out, width 60ms ease-out, height 60ms ease-out;
 }
 .veo-pick-label {
@@ -4032,30 +4665,48 @@ var PICKER_STYLES = `
   z-index: ${PICKER_Z};
   pointer-events: none;
   max-width: 360px;
-  background: #1e1b4b;
-  color: #e0e7ff;
+  background: #2b2623;
+  color: #f5efe9;
   font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
   padding: 6px 9px;
   border-radius: 6px;
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
 }
-.veo-pick-label .veo-pick-sel { color: #c7d2fe; word-break: break-all; }
-.veo-pick-label .veo-pick-dim { color: #a5b4fc; margin-top: 3px; }
+.veo-pick-label .veo-pick-sel { color: #ffd1ad; word-break: break-all; }
+.veo-pick-label .veo-pick-dim { color: #c9c2bb; margin-top: 3px; }
 .veo-pick-hint {
   position: fixed;
-  top: 12px;
+  top: 28px;
   left: 50%;
   transform: translateX(-50%);
   z-index: ${PICKER_Z};
   pointer-events: none;
-  background: #4338ca;
+  display: flex; align-items: center; gap: 16px;
+  max-width: min(760px, calc(100vw - 32px));
+  background: #2b2623;
   color: #fff;
-  font: 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  padding: 8px 14px;
-  border-radius: 999px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
+  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  padding: 14px 18px 14px 16px;
+  border-radius: 14px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+}
+.veo-pick-hint-icon {
+  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 999px;
+  background: rgba(255,255,255,0.12);
+  display: inline-flex; align-items: center; justify-content: center;
+}
+.veo-pick-hint-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.veo-pick-hint-title { font-weight: 700; }
+.veo-pick-hint-sub { font-size: 13px; color: rgba(255,255,255,0.75); }
+.veo-pick-cancel {
+  flex: 0 0 auto; pointer-events: auto;
+  border: 0; border-radius: 10px; padding: 12px 18px;
+  background: rgba(255,255,255,0.14); color: #fff;
+  font: inherit; font-weight: 600; cursor: pointer;
 }
+.veo-pick-cancel:hover { background: rgba(255,255,255,0.24); }
 `;
+var HINT_ICON = '<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 3.75H6A2.25 2.25 0 0 0 3.75 6v1.5M16.5 3.75H18A2.25 2.25 0 0 1 20.25 6v1.5m0 9V18A2.25 2.25 0 0 1 18 20.25h-1.5m-9 0H6A2.25 2.25 0 0 1 3.75 18v-1.5M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>';
 var ElementPicker = class {
   constructor() {
     this.host = null;
@@ -4072,6 +4723,7 @@ var ElementPicker = class {
       this.draw(target);
     };
     this.onClick = (event) => {
+      if (event.altKey) return;
       const target = this.current ?? (event.target instanceof Element ? event.target : null);
       if (!target || this.isOwn(target)) return;
       event.preventDefault();
@@ -4092,7 +4744,7 @@ var ElementPicker = class {
     };
     /** Traga mousedown/mouseup durante el picking (evita focus/active de la app). */
     this.swallow = (event) => {
-      if (this.isOwn(event.target)) return;
+      if (event.altKey || this.isOwn(event.target)) return;
       event.preventDefault();
       event.stopPropagation();
     };
@@ -4118,7 +4770,29 @@ var ElementPicker = class {
     this.label.style.display = "none";
     const hint = document.createElement("div");
     hint.className = "veo-pick-hint";
-    hint.textContent = options.hint ?? "Selecciona un elemento \xB7 Esc para cancelar";
+    const icon = document.createElement("span");
+    icon.className = "veo-pick-hint-icon";
+    icon.innerHTML = HINT_ICON;
+    const text = document.createElement("div");
+    text.className = "veo-pick-hint-text";
+    const title = document.createElement("span");
+    title.className = "veo-pick-hint-title";
+    title.textContent = options.hint ?? "Selecciona un elemento existente para colocar la gu\xEDa.";
+    const sub = document.createElement("span");
+    sub.className = "veo-pick-hint-sub";
+    sub.textContent = options.subhint ?? "Usa Alt + clic u Opci\xF3n + clic para abrir men\xFAs y desplegables.";
+    text.append(title, sub);
+    const cancel = document.createElement("button");
+    cancel.className = "veo-pick-cancel";
+    cancel.type = "button";
+    cancel.textContent = "Cancelar";
+    cancel.addEventListener("click", (e) => {
+      e.stopPropagation();
+      const cb = this.onCancel;
+      this.stop();
+      cb?.();
+    });
+    hint.append(icon, text, cancel);
     shadow.append(style, this.box, this.label, hint);
     document.body.appendChild(host);
     this.host = host;
@@ -4216,6 +4890,7 @@ function initBuilderMode() {
   if (!dashboardOrigin) return null;
   let picker = null;
   let panel = null;
+  let chrome = null;
   let staticTarget = null;
   let manipulator = null;
   let dropTarget = null;
@@ -4223,26 +4898,89 @@ function initBuilderMode() {
   let previewStepIndex = 0;
   let pendingPreview = null;
   let lastPreview = null;
+  let previewMode = false;
+  let previewTrigger = null;
+  let previewFired = false;
+  let previewDelay = null;
+  let panelWasVisible = true;
   const getTarget = () => panel ? panel.target() : staticTarget;
   const post = (event) => {
     getTarget()?.postMessage({ source: VEO_BUILDER_SOURCE, token, ...event }, dashboardOrigin);
   };
-  const previewMatchesPage = (cmd) => {
+  const previewStep = (cmd) => {
     const steps = cmd.guide.guideSteps;
-    const step = steps?.[cmd.guide.startStepIndex ?? 0];
-    return stepMatchesPage(step?.pageLocation, window.location.href);
+    return steps?.[cmd.guide.startStepIndex ?? 0];
+  };
+  const previewMatchesPage = (cmd) => stepMatchesPage(previewStep(cmd)?.pageLocation, window.location.href);
+  const postPreviewStatus = (payload) => post({ type: "preview-status", payload });
+  const withholdPreview = () => {
+    manipulator?.detach();
+    manipulator = null;
+    dropTarget?.detach();
+    dropTarget = null;
+    closeGuidePreview();
   };
   const applyPreviewGated = (cmd) => {
     lastPreview = cmd;
-    if (previewMatchesPage(cmd)) {
-      applyPreview(cmd);
-    } else {
-      manipulator?.detach();
-      manipulator = null;
-      dropTarget?.detach();
-      dropTarget = null;
-      closeGuidePreview();
+    if (!previewMatchesPage(cmd)) {
+      cancelPreviewDelay();
+      withholdPreview();
+      postPreviewStatus({
+        state: "page-mismatch",
+        pattern: previewStep(cmd)?.pageLocation?.pattern ?? ""
+      });
+      return;
+    }
+    const devices = cmd.guide.activationRules?.devices;
+    if (cmd.honorTrigger && !previewMode && devices && !isDeviceAllowed(devices)) {
+      cancelPreviewDelay();
+      withholdPreview();
+      postPreviewStatus({ state: "device-mismatch", devices });
+      return;
     }
+    applyPreview(cmd);
+  };
+  const disarmPreviewTrigger = () => {
+    previewTrigger?.();
+    previewTrigger = null;
+  };
+  const cancelPreviewDelay = () => {
+    if (previewDelay) clearTimeout(previewDelay);
+    previewDelay = null;
+  };
+  const armPreviewTrigger = (selector, trigger) => {
+    disarmPreviewTrigger();
+    const onFire = (e) => {
+      const target = e.target;
+      if (!(target instanceof Element)) return;
+      if (target.closest("[data-veo-builder-chrome],[data-veo-builder-panel],[data-veo-picker]")) {
+        return;
+      }
+      try {
+        if (!target.closest(selector)) return;
+      } catch {
+        return;
+      }
+      disarmPreviewTrigger();
+      previewFired = true;
+      if (lastPreview) applyPreviewGated(lastPreview);
+    };
+    document.addEventListener("click", onFire, true);
+    if (trigger === "on_hover") document.addEventListener("mouseover", onFire, true);
+    previewTrigger = () => {
+      document.removeEventListener("click", onFire, true);
+      document.removeEventListener("mouseover", onFire, true);
+    };
+    postPreviewStatus({ state: "waiting-trigger", trigger, selector });
+  };
+  const armPreviewDelay = (delayMs) => {
+    cancelPreviewDelay();
+    previewDelay = setTimeout(() => {
+      previewDelay = null;
+      previewFired = true;
+      if (lastPreview) applyPreviewGated(lastPreview);
+    }, delayMs);
+    postPreviewStatus({ state: "waiting-delay", delayMs });
   };
   const applyPreview = (cmd) => {
     manipulator?.detach();
@@ -4250,8 +4988,38 @@ function initBuilderMode() {
     dropTarget?.detach();
     dropTarget = null;
     previewStepIndex = cmd.guide.startStepIndex ?? 0;
-    const handle = previewGuide(cmd.guide);
-    if (!cmd.editable) return;
+    const rules = cmd.guide.activationRules;
+    const trig = rules?.trigger;
+    const sel = rules?.selector?.trim();
+    const gate = cmd.honorTrigger && !previewFired && !previewMode;
+    if (gate && (trig === "on_click" || trig === "on_hover") && sel) {
+      cancelPreviewDelay();
+      closeGuidePreview();
+      armPreviewTrigger(sel, trig);
+      return;
+    }
+    const delayMs = trig === "delayed" ? rules?.delayMs ?? 0 : 0;
+    if (gate && delayMs > 0) {
+      disarmPreviewTrigger();
+      closeGuidePreview();
+      if (!previewDelay) armPreviewDelay(delayMs);
+      return;
+    }
+    disarmPreviewTrigger();
+    cancelPreviewDelay();
+    const handle = previewGuide({
+      ...cmd.guide,
+      onClosed: () => {
+        manipulator?.detach();
+        manipulator = null;
+        dropTarget?.detach();
+        dropTarget = null;
+        previewFired = false;
+        if (lastPreview) applyPreviewGated(lastPreview);
+      }
+    });
+    if (cmd.honorTrigger) postPreviewStatus({ state: "shown" });
+    if (!cmd.editable || previewMode) return;
     void handle.ready.then((result) => {
       if (!result.rendered) return;
       const host = handle.host();
@@ -4319,26 +5087,57 @@ function initBuilderMode() {
   const handleCommand = (cmd) => {
     switch (cmd.type) {
       case "panel-ready":
-        post({ type: "ready" });
+        post(chrome ? { type: "ready", chrome: true } : { type: "ready" });
+        break;
+      case "editor-state":
+        chrome?.setState(cmd.state);
+        panel?.setTitle(
+          cmd.state.section === "activation" ? "Ajustes de activaci\xF3n" : cmd.state.section === "badge" ? "Ajustes de badge" : cmd.state.section === "target" ? "Ajustes del elemento objetivo" : cmd.state.steps[cmd.state.activeStep]?.label ?? "Paso"
+        );
+        break;
+      case "panel-visibility":
+        panel?.setVisible(cmd.visible);
         break;
-      case "start-picker":
+      case "start-picker": {
         picker?.stop();
+        const panelWasShown = panel?.isVisible() ?? false;
+        if (panelWasShown) panel?.setVisible(false);
+        chrome?.setHidden(true);
+        const previewToRestore = lastPreview;
+        if (previewToRestore) {
+          manipulator?.detach();
+          manipulator = null;
+          dropTarget?.detach();
+          dropTarget = null;
+          closeGuidePreview();
+        }
+        const restorePanel = () => {
+          chrome?.setHidden(false);
+          if (panelWasShown) panel?.setVisible(true);
+          if (previewToRestore && lastPreview === previewToRestore) {
+            applyPreviewGated(previewToRestore);
+          }
+        };
         picker = startElementPicker({
           onPick: (payload) => {
             picker = null;
+            restorePanel();
             post({ type: "picked", payload });
           },
           onCancel: () => {
             picker = null;
+            restorePanel();
             post({ type: "pick-cancelled" });
           },
           ...cmd.maxAncestors !== void 0 ? { maxAncestors: cmd.maxAncestors } : {},
           ...cmd.hint !== void 0 ? { hint: cmd.hint } : {}
         });
         break;
+      }
       case "stop-picker":
         picker?.stop();
         picker = null;
+        chrome?.setHidden(false);
         break;
       case "preview":
         if (!cmd.guide) break;
@@ -4356,6 +5155,9 @@ function initBuilderMode() {
         hideDragGhost();
         pendingPreview = null;
         lastPreview = null;
+        disarmPreviewTrigger();
+        cancelPreviewDelay();
+        previewFired = false;
         closeGuidePreview();
         break;
       case "teardown":
@@ -4407,21 +5209,62 @@ function initBuilderMode() {
     dropTarget = null;
     hideDragGhost();
     pendingPreview = null;
+    disarmPreviewTrigger();
+    cancelPreviewDelay();
     closeGuidePreview();
     post({ type: "closed" });
     panel?.teardown();
     panel = null;
+    chrome?.teardown();
+    chrome = null;
     clearBuilderToken();
   };
   if (ctx.panel) {
+    chrome = injectBuilderChrome({
+      appLabel: window.location.hostname,
+      onAction: (action) => {
+        switch (action.action) {
+          // Controles que resuelve el SDK solo (no van al panel).
+          case "dock":
+            panel?.setTopOffset(action.position === "top" ? chrome?.height() ?? 0 : 0);
+            return;
+          case "show-panel":
+            panel?.setVisible(true);
+            return;
+          case "preview":
+            if (previewMode) return;
+            previewMode = true;
+            panelWasVisible = panel?.isVisible() ?? true;
+            panel?.setVisible(false);
+            chrome?.setPreview(true);
+            if (lastPreview) applyPreviewGated(lastPreview);
+            return;
+          case "exit-preview":
+            if (!previewMode) return;
+            previewMode = false;
+            chrome?.setPreview(false);
+            panel?.setVisible(panelWasVisible);
+            if (lastPreview) applyPreviewGated(lastPreview);
+            return;
+          case "select-activation":
+          case "select-step":
+          case "add-step":
+            panel?.setVisible(true);
+            break;
+        }
+        post({ type: "chrome-action", payload: action });
+      }
+    });
     panel = injectBuilderPanel({
       dashboardOrigin,
       token,
       appOrigin: window.location.origin,
       guide: ctx.guide,
       panelPath: ctx.panelPath,
-      onClose: () => teardown()
+      onClose: () => teardown(),
+      topOffset: chrome.height()
     });
+    chrome.onHeightChange((h) => panel?.setTopOffset(chrome?.dock() === "top" ? h : 0));
   } else {
     staticTarget = resolveTarget();
     if (!staticTarget) return null;