veo-sdk 0.3.2 → 0.3.4

package/dist/builder-LXIR3WMJ.mjs

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

package/dist/{builder-AGIBF67L.mjs.map → builder-LXIR3WMJ.mjs.map}

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

package/dist/builder.cjs

@@ -1594,42 +1594,140 @@ var VEO_BUILDER_SOURCE = "veo-builder";
 
 // src/plugins/builder/builder-panel.ts
 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" });
   const style = document.createElement("style");
   style.textContent = PANEL_CSS;
-  const container = document.createElement("div");
-  container.className = "veo-panel";
+  const card = document.createElement("div");
+  card.className = "veo-panel";
+  let left = Math.max(MARGIN, window.innerWidth - PANEL_W - MARGIN);
+  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);
-  container.append(header, iframe);
-  shadow.append(style, container);
+  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);
+  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 sx = e.clientX;
+    const sy = e.clientY;
+    const ol = left;
+    const ot = top;
+    iframe.style.pointerEvents = "none";
+    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 up = () => {
+      window.removeEventListener("mousemove", move);
+      window.removeEventListener("mouseup", up);
+      iframe.style.pointerEvents = "";
+    };
+    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) {
+  return Math.min(Math.max(v, min), max);
+}
 function buildPanelUrl(opts) {
   const path = opts.panelPath ?? DEFAULT_PANEL_PATH;
   const url = new URL(path, opts.dashboardOrigin);
@@ -1641,28 +1739,42 @@ function buildPanelUrl(opts) {
 var PANEL_CSS = `
 :host { all: initial; }
 .veo-panel {
-  position: fixed; top: 0; right: 0; bottom: 0;
-  width: 420px; max-width: 100vw;
+  position: fixed;
+  min-width: ${MIN_W}px; min-height: ${MIN_H}px;
+  max-width: 96vw; max-height: 94vh;
   display: flex; flex-direction: column;
   background: #fff;
-  box-shadow: -8px 0 30px rgba(0,0,0,0.18);
+  border-radius: 12px;
+  box-shadow: 0 12px 40px rgba(0,0,0,0.28);
+  overflow: hidden;
   z-index: 2147483647;
   font-family: system-ui, -apple-system, sans-serif;
 }
 .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-close {
+.veo-panel-header:active { cursor: grabbing; }
+.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