veo-sdk 0.3.11 → 0.3.14

package/dist/builder-4YBB3RSZ.mjs

@@ -0,0 +1,5 @@
+export { createBuilderSession, initBuilderMode, startElementPicker, stopElementPicker } from './chunk-B6S4V5Q5.mjs';
+import './chunk-3WJDFE7Q.mjs';
+import './chunk-PTG3BTJE.mjs';
+//# sourceMappingURL=builder-4YBB3RSZ.mjs.map
+//# sourceMappingURL=builder-4YBB3RSZ.mjs.map

package/dist/{builder-V4OZGEVP.mjs.map → builder-4YBB3RSZ.mjs.map}

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

package/dist/builder.cjs

@@ -455,6 +455,15 @@ function applyDesignVars(host, style) {
       host.style.setProperty(key, value);
     }
   }
+  if (typeof s.background === "string" && COLOR_RE.test(s.background.trim())) {
+    host.style.setProperty("--veo-bg", s.background.trim());
+  }
+  if (typeof s.textColor === "string" && COLOR_RE.test(s.textColor.trim())) {
+    host.style.setProperty("--veo-text", s.textColor.trim());
+  }
+  if (typeof s.textSecondaryColor === "string" && COLOR_RE.test(s.textSecondaryColor.trim())) {
+    host.style.setProperty("--veo-text-secondary", s.textSecondaryColor.trim());
+  }
   if (typeof s.radius === "number" && Number.isFinite(s.radius)) {
     host.style.setProperty("--veo-radius", `${clamp(s.radius, 0, 48)}px`);
   }
@@ -496,10 +505,26 @@ function applyDesignVars(host, style) {
     applyElementVars(host, "title", el.title);
     applyElementVars(host, "text", el.text);
     applyElementVars(host, "image", el.image);
-    const cta = el.cta;
-    if (cta && typeof cta.align === "string" && ALIGN_JUSTIFY[cta.align]) {
-      host.style.setProperty("--veo-actions-justify", ALIGN_JUSTIFY[cta.align]);
-    }
+    applyCtaVars(host, el.cta);
+  }
+}
+function applyCtaVars(host, raw) {
+  if (!raw || typeof raw !== "object") return;
+  const cta = raw;
+  if (typeof cta.align === "string" && ALIGN_JUSTIFY[cta.align]) {
+    host.style.setProperty("--veo-actions-justify", ALIGN_JUSTIFY[cta.align]);
+  }
+  if (typeof cta.background === "string" && COLOR_RE.test(cta.background.trim())) {
+    host.style.setProperty("--veo-cta-bg", cta.background.trim());
+  }
+  if (typeof cta.color === "string" && COLOR_RE.test(cta.color.trim())) {
+    host.style.setProperty("--veo-cta-color", cta.color.trim());
+  }
+  if (typeof cta.fontSize === "number" && Number.isFinite(cta.fontSize)) {
+    host.style.setProperty("--veo-cta-size", `${clamp(cta.fontSize, 10, 24)}px`);
+  }
+  if (typeof cta.radius === "number" && Number.isFinite(cta.radius)) {
+    host.style.setProperty("--veo-cta-radius", `${clamp(cta.radius, 0, 48)}px`);
   }
 }
 function applyElementVars(host, prefix, raw) {
@@ -533,7 +558,7 @@ function applyElementVars(host, prefix, raw) {
 // src/plugins/guides/styles.ts
 var GUIDE_STYLES = `
 :host {
-  --veo-primary: #4f46e5;
+  --veo-primary: #FF5B35;
   --veo-text: #1f2937;
   --veo-text-secondary: #4b5563;
   --veo-bg: #ffffff;
@@ -651,9 +676,10 @@ var GUIDE_STYLES = `
   display: flex; gap: 8px; justify-content: var(--veo-actions-justify);
 }
 .veo-guide-cta {
-  background: var(--veo-primary); color: #fff; border: none;
-  padding: 9px 18px; border-radius: 8px;
-  font-size: 14px; font-weight: 500; cursor: pointer;
+  background: var(--veo-cta-bg, var(--veo-primary));
+  color: var(--veo-cta-color, #fff); border: none;
+  padding: 9px 18px; border-radius: var(--veo-cta-radius, 8px);
+  font-size: var(--veo-cta-size, 14px); font-weight: 500; cursor: pointer;
   transition: opacity 120ms ease;
 }
 .veo-guide-cta:hover { opacity: 0.9; }
@@ -958,7 +984,7 @@ function mountCustomFrame(doc, step, context, opts) {
   const iframe = doc.createElement("iframe");
   iframe.className = "veo-custom-frame";
   iframe.setAttribute("sandbox", "allow-scripts");
-  iframe.setAttribute("title", context.guide.guideName || "Veo");
+  iframe.setAttribute("title", context.guide.guideName || "OnUser");
   iframe.style.width = opts.width;
   const hasFixedHeight = opts.fixedHeight !== void 0 && opts.fixedHeight !== null;
   if (hasFixedHeight) iframe.style.height = toCssSize(opts.fixedHeight);
@@ -1069,7 +1095,11 @@ function buildSrcdoc(html, css, js, token, opts) {
     // html{height:100%}, fondo del layout…) que en un iframe embebido lo estirarían a
     // toda la pantalla (caja negra) en vez de ajustarse al contenido. Neutralizamos
     // tamaño/fondo/overflow (mantenemos color y fuente heredados de la app).
-    "<style>html,body{margin:0!important;padding:0!important;background:transparent!important;height:auto!important;min-height:0!important;max-height:none!important;width:auto!important;min-width:0!important;overflow:visible!important;}</style>" + tailwind + // Inline en <body>: gana incluso sobre reglas `!important` de la app (p. ej.
+    // `color-scheme:normal` es CLAVE para la transparencia: si el CSS de la app
+    // declara `:root{color-scheme:dark}` y no coincide con el del elemento iframe
+    // del host (normal), el navegador pinta el canvas OPACO (negro) en vez de
+    // transparente — igualamos ambos lados para conservar el fondo transparente.
+    "<style>html,body{margin:0!important;padding:0!important;background:transparent!important;height:auto!important;min-height:0!important;max-height:none!important;width:auto!important;min-width:0!important;overflow:visible!important;color-scheme:normal!important;}</style>" + tailwind + // Inline en <body>: gana incluso sobre reglas `!important` de la app (p. ej.
     // `.dark body{background:#000!important}`) porque el estilo inline tiene la
     // mayor especificidad dentro de la capa important-author.
     `<style>${escapeClosing(css, "style")}</style></head><body style="margin:0!important;background:transparent!important;min-height:0!important;height:auto!important;"><div id="__veo_root">${html}</div><script>${bridge}</script>` + (js ? `<script>${escapeClosing(js, "script")}</script>` : "") + "</body></html>"
@@ -1973,7 +2003,7 @@ function injectBuilderPanel(opts) {
   header.className = "veo-panel-header";
   const title = document.createElement("span");
   title.className = "veo-panel-title";
-  title.textContent = "Veo \xB7 Editor";
+  title.textContent = "OnUser \xB7 Editor";
   const actions = document.createElement("div");
   actions.className = "veo-panel-actions";
   const popout = document.createElement("button");
@@ -2105,7 +2135,7 @@ var PANEL_CSS = `
   flex: 0 0 auto;
   display: flex; align-items: center; justify-content: space-between;
   padding: 8px 10px 8px 12px;
-  background: #0f172a; color: #fff;
+  background: #1b1714; color: #f7f1eb;
   font-size: 13px; font-weight: 600;
   cursor: grab;
 }