veo-sdk 0.3.3 → 0.3.5

package/dist/builder-FBNBSKCL.mjs

@@ -0,0 +1,5 @@
+export { createBuilderSession, initBuilderMode, startElementPicker, stopElementPicker } from './chunk-TAZXRQYY.mjs';
+import './chunk-GHP7ZJCW.mjs';
+import './chunk-PTG3BTJE.mjs';
+//# sourceMappingURL=builder-FBNBSKCL.mjs.map
+//# sourceMappingURL=builder-FBNBSKCL.mjs.map

package/dist/{builder-VPQDAUIL.mjs.map → builder-FBNBSKCL.mjs.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"builder-VPQDAUIL.mjs"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"builder-FBNBSKCL.mjs"}

package/dist/builder.cjs

@@ -1596,12 +1596,15 @@ var VEO_BUILDER_SOURCE = "veo-builder";
 var DEFAULT_PANEL_PATH = "/guides/design";
 var PANEL_W = 400;
 var PANEL_H = 640;
+var MIN_W = 320;
+var MIN_H = 320;
 var MARGIN = 16;
 function injectBuilderPanel(opts) {
   if (!hasWindow() || !hasDocument()) {
     return { target: () => null, teardown: () => {
     } };
   }
+  const panelUrl = buildPanelUrl(opts);
   const host = document.createElement("div");
   host.setAttribute("data-veo-builder-panel", "");
   const shadow = host.attachShadow({ mode: "open" });
@@ -1613,55 +1616,113 @@ function injectBuilderPanel(opts) {
   let top = 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 title = document.createElement("span");
   title.className = "veo-panel-title";
   title.textContent = "Veo \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-close";
+  close.className = "veo-panel-btn veo-panel-close";
   close.type = "button";
+  close.title = "Cerrar";
   close.setAttribute("aria-label", "Cerrar");
   close.textContent = "\u2715";
-  close.addEventListener("click", () => opts.onClose());
-  header.append(title, close);
+  actions.append(popout, close);
+  header.append(title, actions);
   const iframe = document.createElement("iframe");
   iframe.className = "veo-panel-frame";
   iframe.title = "Editor de Veo";
-  iframe.src = buildPanelUrl(opts);
-  card.append(header, iframe);
+  iframe.src = panelUrl;
+  const grip = document.createElement("div");
+  grip.className = "veo-panel-resize";
+  grip.setAttribute("aria-hidden", "true");
+  card.append(header, iframe, grip);
   shadow.append(style, card);
   document.body.appendChild(host);
-  const onHeaderDown = (e) => {
-    if (e.target?.classList.contains("veo-panel-close")) return;
+  let popped = null;
+  let pollTimer;
+  const stopPoll = () => {
+    if (pollTimer !== void 0) {
+      clearInterval(pollTimer);
+      pollTimer = void 0;
+    }
+  };
+  close.addEventListener("click", () => opts.onClose());
+  popout.addEventListener("click", () => {
+    const win = window.open(
+      panelUrl,
+      "veo-editor",
+      `popup,width=${Math.round(card.offsetWidth)},height=${Math.round(card.offsetHeight) + 60}`
+    );
+    if (!win) return;
+    popped = win;
+    card.style.display = "none";
+    pollTimer = setInterval(() => {
+      if (popped?.closed) {
+        stopPoll();
+        opts.onClose();
+      }
+    }, 600);
+  });
+  header.addEventListener("mousedown", (e) => {
+    if (e.target?.classList.contains("veo-panel-btn")) return;
     e.preventDefault();
-    const startX = e.clientX;
-    const startY = e.clientY;
-    const origLeft = left;
-    const origTop = top;
+    const sx = e.clientX;
+    const sy = e.clientY;
+    const ol = left;
+    const ot = top;
     iframe.style.pointerEvents = "none";
-    card.classList.add("dragging");
-    const onMove = (ev) => {
-      const maxLeft = window.innerWidth - card.offsetWidth;
-      const maxTop = window.innerHeight - 40;
-      left = clamp2(origLeft + (ev.clientX - startX), 0, Math.max(0, maxLeft));
-      top = clamp2(origTop + (ev.clientY - startY), 0, Math.max(0, maxTop));
+    const move = (ev) => {
+      left = clamp2(ol + (ev.clientX - sx), 0, Math.max(0, window.innerWidth - card.offsetWidth));
+      top = clamp2(ot + (ev.clientY - sy), 0, Math.max(0, window.innerHeight - 40));
       card.style.left = `${left}px`;
       card.style.top = `${top}px`;
     };
-    const onUp = () => {
-      window.removeEventListener("mousemove", onMove);
-      window.removeEventListener("mouseup", onUp);
+    const up = () => {
+      window.removeEventListener("mousemove", move);
+      window.removeEventListener("mouseup", up);
       iframe.style.pointerEvents = "";
-      card.classList.remove("dragging");
     };
-    window.addEventListener("mousemove", onMove);
-    window.addEventListener("mouseup", onUp);
-  };
-  header.addEventListener("mousedown", onHeaderDown);
+    window.addEventListener("mousemove", move);
+    window.addEventListener("mouseup", up);
+  });
+  grip.addEventListener("mousedown", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const sx = e.clientX;
+    const sy = e.clientY;
+    const sw = card.offsetWidth;
+    const sh = card.offsetHeight;
+    iframe.style.pointerEvents = "none";
+    const move = (ev) => {
+      card.style.width = `${clamp2(sw + (ev.clientX - sx), MIN_W, window.innerWidth)}px`;
+      card.style.height = `${clamp2(sh + (ev.clientY - sy), MIN_H, window.innerHeight)}px`;
+    };
+    const up = () => {
+      window.removeEventListener("mousemove", move);
+      window.removeEventListener("mouseup", up);
+      iframe.style.pointerEvents = "";
+    };
+    window.addEventListener("mousemove", move);
+    window.addEventListener("mouseup", up);
+  });
   return {
-    target: () => iframe.contentWindow,
-    teardown: () => host.remove()
+    target: () => popped && !popped.closed ? popped : iframe.contentWindow,
+    teardown: () => {
+      stopPoll();
+      if (popped && !popped.closed) popped.close();
+      host.remove();
+    }
   };
 }
 function clamp2(v, min, max) {
@@ -1679,35 +1740,41 @@ var PANEL_CSS = `
 :host { all: initial; }
 .veo-panel {
   position: fixed;
-  width: ${PANEL_W}px; height: ${PANEL_H}px;
-  min-width: 320px; min-height: 320px;
+  min-width: ${MIN_W}px; min-height: ${MIN_H}px;
   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);
   overflow: hidden;
-  resize: both;
   z-index: 2147483647;
   font-family: system-ui, -apple-system, sans-serif;
 }
-.veo-panel.dragging { user-select: none; }
 .veo-panel-header {
   flex: 0 0 auto;
   display: flex; align-items: center; justify-content: space-between;
-  padding: 8px 12px;
+  padding: 8px 10px 8px 12px;
   background: #0f172a; color: #fff;
   font-size: 13px; font-weight: 600;
   cursor: grab;
 }
 .veo-panel-header:active { cursor: grabbing; }
-.veo-panel-close {
+.veo-panel-actions { display: flex; gap: 2px; }
+.veo-panel-btn {
   border: 0; background: transparent; color: #fff;
-  font-size: 15px; cursor: pointer; line-height: 1;
-  padding: 4px 6px; border-radius: 6px;
+  font-size: 14px; cursor: pointer; line-height: 1;
+  padding: 4px 7px; border-radius: 6px;
 }
-.veo-panel-close:hover { background: rgba(255,255,255,0.15); }
+.veo-panel-btn:hover { background: rgba(255,255,255,0.15); }
 .veo-panel-frame { flex: 1 1 auto; width: 100%; border: 0; background: #fff; }
+.veo-panel-resize {
+  position: absolute; right: 0; bottom: 0;
+  width: 16px; height: 16px;
+  cursor: nwse-resize;
+  background:
+    linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.25) 60%,
+    transparent 60%, transparent 72%, rgba(0,0,0,0.25) 72%, rgba(0,0,0,0.25) 82%, transparent 82%);
+}
 `;
 
 // src/plugins/autocapture/constants.ts
@@ -2078,7 +2145,7 @@ function initBuilderMode() {
     if (!ctx.panel) post({ type: "ready" });
   };
   const cfg = window.__veoBuilder;
-  if (cfg?.apiKey && cfg?.apiUrl) {
+  if (!ctx.panel && cfg?.apiKey && cfg?.apiUrl) {
     void verifyBuilderToken(cfg.apiUrl, cfg.apiKey, token).then((ok) => {
       if (ok) activate();
       else if (window.console) console.warn("[veo] token de builder inv\xE1lido \u2014 modo no activado");