veo-sdk 0.3.0 → 0.3.3

package/dist/index.cjs

@@ -39,11 +39,14 @@ var init_safe_env = __esm({
 });
 
 // src/core/builder-constants.ts
-var BUILDER_TOKEN_PARAM, BUILDER_ORIGIN_PARAM;
+var BUILDER_TOKEN_PARAM, BUILDER_ORIGIN_PARAM, BUILDER_PANEL_PARAM, BUILDER_PANEL_PATH_PARAM, BUILDER_GUIDE_PARAM;
 var init_builder_constants = __esm({
   "src/core/builder-constants.ts"() {
     BUILDER_TOKEN_PARAM = "veoBuilder";
     BUILDER_ORIGIN_PARAM = "veoBuilderOrigin";
+    BUILDER_PANEL_PARAM = "veoBuilderPanel";
+    BUILDER_PANEL_PATH_PARAM = "veoBuilderPanelPath";
+    BUILDER_GUIDE_PARAM = "veoGuide";
   }
 });
 
@@ -62,56 +65,51 @@ function urlParams() {
     return null;
   }
 }
-function resolveBuilderToken() {
+function resolveBuilderContext() {
   if (!hasWindow()) return null;
   const params = urlParams();
   const fromUrl = params?.get(BUILDER_TOKEN_PARAM);
   if (fromUrl) {
-    const store = session();
+    const ctx = {
+      token: fromUrl,
+      origin: params?.get(BUILDER_ORIGIN_PARAM) ?? null,
+      panel: params?.get(BUILDER_PANEL_PARAM) === "1",
+      guide: params?.get(BUILDER_GUIDE_PARAM) ?? null,
+      panelPath: params?.get(BUILDER_PANEL_PATH_PARAM) ?? null
+    };
     try {
-      store?.setItem(TOKEN_KEY, fromUrl);
-      const origin = params?.get(BUILDER_ORIGIN_PARAM);
-      if (origin) store?.setItem(ORIGIN_KEY, origin);
+      session()?.setItem(CTX_KEY, JSON.stringify(ctx));
     } catch {
     }
-    return fromUrl;
+    return ctx;
   }
   try {
-    return session()?.getItem(TOKEN_KEY) ?? null;
+    const raw = session()?.getItem(CTX_KEY);
+    return raw ? JSON.parse(raw) : null;
   } catch {
     return null;
   }
 }
-function resolveBuilderOrigin() {
-  if (!hasWindow()) return null;
-  const fromUrl = urlParams()?.get(BUILDER_ORIGIN_PARAM);
-  if (fromUrl) return fromUrl;
-  try {
-    return session()?.getItem(ORIGIN_KEY) ?? null;
-  } catch {
-    return null;
-  }
+function resolveBuilderToken() {
+  return resolveBuilderContext()?.token ?? null;
 }
 function isBuilderMode() {
-  return resolveBuilderToken() !== null;
+  return resolveBuilderContext() !== null;
 }
 function clearBuilderToken() {
   if (!hasWindow()) return;
   try {
-    const store = session();
-    store?.removeItem(TOKEN_KEY);
-    store?.removeItem(ORIGIN_KEY);
+    session()?.removeItem(CTX_KEY);
   } catch {
   }
 }
-var TOKEN_KEY, ORIGIN_KEY;
+var CTX_KEY;
 var init_builder_token = __esm({
   "src/core/builder-token.ts"() {
     init_safe_env();
     init_builder_constants();
     init_builder_constants();
-    TOKEN_KEY = "veo:builder_token";
-    ORIGIN_KEY = "veo:builder_origin";
+    CTX_KEY = "veo:builder_ctx";
   }
 });
 
@@ -1940,6 +1938,130 @@ var init_bridge_protocol = __esm({
   }
 });
 
+// src/plugins/builder/builder-panel.ts
+function injectBuilderPanel(opts) {
+  if (!hasWindow() || !hasDocument()) {
+    return { target: () => null, teardown: () => {
+    } };
+  }
+  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 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");
+  title.className = "veo-panel-title";
+  title.textContent = "Veo \xB7 Editor";
+  const close = document.createElement("button");
+  close.className = "veo-panel-close";
+  close.type = "button";
+  close.setAttribute("aria-label", "Cerrar");
+  close.textContent = "\u2715";
+  close.addEventListener("click", () => opts.onClose());
+  header.append(title, close);
+  const iframe = document.createElement("iframe");
+  iframe.className = "veo-panel-frame";
+  iframe.title = "Editor de Veo";
+  iframe.src = buildPanelUrl(opts);
+  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);
+  url.searchParams.set("veoToken", opts.token);
+  url.searchParams.set("veoApp", opts.appOrigin);
+  if (opts.guide) url.searchParams.set("veoGuide", opts.guide);
+  return url.toString();
+}
+var DEFAULT_PANEL_PATH, PANEL_W, PANEL_H, MARGIN, PANEL_CSS;
+var init_builder_panel = __esm({
+  "src/plugins/builder/builder-panel.ts"() {
+    init_safe_env();
+    DEFAULT_PANEL_PATH = "/guides/design";
+    PANEL_W = 400;
+    PANEL_H = 640;
+    MARGIN = 16;
+    PANEL_CSS = `
+:host { all: initial; }
+.veo-panel {
+  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;
+  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;
+  padding: 4px 6px; border-radius: 6px;
+}
+.veo-panel-close:hover { background: rgba(255,255,255,0.15); }
+.veo-panel-frame { flex: 1 1 auto; width: 100%; border: 0; background: #fff; }
+`;
+  }
+});
+
 // src/plugins/builder/element-picker.ts
 function startElementPicker(options) {
   if (!hasDocument()) {
@@ -2145,18 +2267,23 @@ var init_element_picker = __esm({
 // src/plugins/builder/builder-mode.ts
 function initBuilderMode() {
   if (!hasWindow() || !hasDocument()) return null;
-  const token = resolveBuilderToken();
-  if (!token) return null;
-  const dashboardOrigin = resolveDashboardOrigin();
+  const ctx = resolveBuilderContext();
+  if (!ctx) return null;
+  const token = ctx.token;
+  const dashboardOrigin = resolveDashboardOrigin(ctx.origin);
   if (!dashboardOrigin) return null;
-  const target = resolveTarget();
-  if (!target) return null;
   let picker = null;
+  let panel = null;
+  let staticTarget = null;
+  const getTarget = () => panel ? panel.target() : staticTarget;
   const post = (event) => {
-    target.postMessage({ source: VEO_BUILDER_SOURCE, token, ...event }, dashboardOrigin);
+    getTarget()?.postMessage({ source: VEO_BUILDER_SOURCE, token, ...event }, dashboardOrigin);
   };
   const handleCommand = (cmd) => {
     switch (cmd.type) {
+      case "panel-ready":
+        post({ type: "ready" });
+        break;
       case "start-picker":
         picker?.stop();
         picker = startElementPicker({
@@ -2200,13 +2327,28 @@ function initBuilderMode() {
     picker?.stop();
     picker = null;
     closeGuidePreview();
-    clearBuilderToken();
     post({ type: "closed" });
+    panel?.teardown();
+    panel = null;
+    clearBuilderToken();
   };
+  if (ctx.panel) {
+    panel = injectBuilderPanel({
+      dashboardOrigin,
+      token,
+      appOrigin: window.location.origin,
+      guide: ctx.guide,
+      panelPath: ctx.panelPath,
+      onClose: () => teardown()
+    });
+  } else {
+    staticTarget = resolveTarget();
+    if (!staticTarget) return null;
+  }
   const activate = () => {
     window.addEventListener("message", onMessage);
     window.addEventListener("pagehide", onPageHide);
-    post({ type: "ready" });
+    if (!ctx.panel) post({ type: "ready" });
   };
   const cfg = window.__veoBuilder;
   if (cfg?.apiKey && cfg?.apiUrl) {
@@ -2239,11 +2381,10 @@ function resolveTarget() {
   if (window.parent && window.parent !== window) return window.parent;
   return null;
 }
-function resolveDashboardOrigin() {
-  const stored = resolveBuilderOrigin();
-  if (stored) {
+function resolveDashboardOrigin(originHint) {
+  if (originHint) {
     try {
-      return new URL(stored).origin;
+      return new URL(originHint).origin;
     } catch {
       return null;
     }
@@ -2263,6 +2404,7 @@ var init_builder_mode = __esm({
     init_safe_env();
     init_guide_preview();
     init_bridge_protocol();
+    init_builder_panel();
     init_element_picker();
   }
 });