veo-sdk 0.3.2 → 0.3.3

package/dist/builder-VPQDAUIL.mjs

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

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

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

package/dist/builder.cjs

@@ -1594,6 +1594,9 @@ 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 MARGIN = 16;
 function injectBuilderPanel(opts) {
   if (!hasWindow() || !hasDocument()) {
     return { target: () => null, teardown: () => {
@@ -1604,8 +1607,12 @@ function injectBuilderPanel(opts) {
   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`;
   const header = document.createElement("div");
   header.className = "veo-panel-header";
   const title = document.createElement("span");
@@ -1622,14 +1629,44 @@ function injectBuilderPanel(opts) {
   iframe.className = "veo-panel-frame";
   iframe.title = "Editor de Veo";
   iframe.src = buildPanelUrl(opts);
-  container.append(header, iframe);
-  shadow.append(style, container);
+  card.append(header, iframe);
+  shadow.append(style, card);
   document.body.appendChild(host);
+  const onHeaderDown = (e) => {
+    if (e.target?.classList.contains("veo-panel-close")) return;
+    e.preventDefault();
+    const startX = e.clientX;
+    const startY = e.clientY;
+    const origLeft = left;
+    const origTop = 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));
+      card.style.left = `${left}px`;
+      card.style.top = `${top}px`;
+    };
+    const onUp = () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+      iframe.style.pointerEvents = "";
+      card.classList.remove("dragging");
+    };
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  };
+  header.addEventListener("mousedown", onHeaderDown);
   return {
     target: () => iframe.contentWindow,
     teardown: () => 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,21 +1678,29 @@ 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;
+  width: ${PANEL_W}px; height: ${PANEL_H}px;
+  min-width: 320px; min-height: 320px;
+  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;
+  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;
   background: #0f172a; color: #fff;
   font-size: 13px; font-weight: 600;
+  cursor: grab;
 }
+.veo-panel-header:active { cursor: grabbing; }
 .veo-panel-close {
   border: 0; background: transparent; color: #fff;
   font-size: 15px; cursor: pointer; line-height: 1;