veo-sdk 0.5.32 → 0.5.33

package/dist/{chunk-AFU5ZG6Z.mjs → chunk-3ZOKCQ54.mjs}

@@ -1,4 +1,4 @@
-import { hasDocument, hasWindow, resolveBuilderContext, closeGuidePreview, clearBuilderToken, buildSelectorPath, filterHumanClasses, stepMatchesPage, previewGuide } from './chunk-X27GD7IT.mjs';
+import { hasDocument, hasWindow, resolveBuilderContext, closeGuidePreview, clearBuilderToken, buildSelectorPath, filterHumanClasses, isDeviceAllowed, stepMatchesPage, previewGuide } from './chunk-M6PB5UMW.mjs';
 import { BUILDER_TOKEN_PARAM, BUILDER_ORIGIN_PARAM } from './chunk-PTG3BTJE.mjs';
 
 // src/plugins/builder/block-drop-target.ts
@@ -10,7 +10,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();
@@ -110,17 +110,375 @@ function attachBlockDropTarget(options) {
 // 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");
@@ -130,43 +488,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 = () => {
@@ -175,7 +558,6 @@ function injectBuilderPanel(opts) {
       pollTimer = void 0;
     }
   };
-  close.addEventListener("click", () => opts.onClose());
   popout.addEventListener("click", () => {
     const win = window.open(
       panelUrl,
@@ -193,7 +575,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;
@@ -202,7 +584,7 @@ function injectBuilderPanel(opts) {
     iframe.style.pointerEvents = "none";
     const move = (ev) => {
       left = clamp(ol + (ev.clientX - sx), 0, Math.max(0, window.innerWidth - card.offsetWidth));
-      top = clamp(ot + (ev.clientY - sy), 0, Math.max(0, window.innerHeight - 40));
+      top = clamp(ot + (ev.clientY - sy), topOffset, Math.max(topOffset, window.innerHeight - 40));
       card.style.left = `${left}px`;
       card.style.top = `${top}px`;
     };
@@ -214,7 +596,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;
@@ -241,9 +623,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 clamp(v, min, max) {
   return Math.min(Math.max(v, min), max);
 }
@@ -263,28 +669,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;
@@ -538,9 +949,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 {
@@ -548,30 +959,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;
@@ -588,6 +1017,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();
@@ -608,7 +1038,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();
     };
@@ -634,7 +1064,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;
@@ -732,6 +1184,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;
@@ -739,26 +1192,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();
@@ -766,8 +1282,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();
@@ -835,26 +1381,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 "start-picker":
+      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": {
         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;
@@ -872,6 +1449,9 @@ function initBuilderMode() {
         hideDragGhost();
         pendingPreview = null;
         lastPreview = null;
+        disarmPreviewTrigger();
+        cancelPreviewDelay();
+        previewFired = false;
         closeGuidePreview();
         break;
       case "teardown":
@@ -923,21 +1503,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;
@@ -1117,5 +1738,5 @@ function noopSession() {
 }
 
 export { VEO_BLOCK_MIME, attachBlockDropTarget, attachDesignManipulator, createBuilderSession, initBuilderMode, startElementPicker, stopElementPicker };
-//# sourceMappingURL=chunk-AFU5ZG6Z.mjs.map
-//# sourceMappingURL=chunk-AFU5ZG6Z.mjs.map
+//# sourceMappingURL=chunk-3ZOKCQ54.mjs.map
+//# sourceMappingURL=chunk-3ZOKCQ54.mjs.map