@bluepic/embed 0.6.1 → 0.6.2

package/dist/bluepic-embed.iife.js

@@ -2134,7 +2134,7 @@ https://github.com/highlightjs/highlight.js/issues/2277`),i=e,r=t),n===void 0&&(
   background-color: #fff;
   color: #111111;
 }
-`;async function EB(e,t,n=`unit8Array`,r){let i=await fetch(e,t);if(!i.body)throw Error(`Response body is undefined`);let a=Number(i.headers.get(`Content-Length`)),o=isNaN(a)?null:a,s=i.body.getReader(),c=0,l=[];for(;;){let{done:e,value:t}=await s.read();if(e)break;c+=t.length,l.push(t),r&&r(o,c)}let u=new Uint8Array(c),d=0;for(let e of l)u.set(e,d),d+=e.length;return{data:u,contentType:i.headers.get(`Content-Type`)}}function DB({url:e,method:t=`GET`,data:n=null,headers:r={},onUploadProgress:i,onDownloadProgress:a}){return new Promise((o,s)=>{let c=new XMLHttpRequest;c.responseType=`blob`,c.open(t,e);for(let[e,t]of Object.entries(r))c.setRequestHeader(e,t);i&&c.upload&&(c.upload.onprogress=e=>{i(e.loaded,e.total)}),a&&(c.onprogress=e=>{e.lengthComputable&&a(e.loaded,e.total)}),c.onload=async()=>{if(c.status>=200&&c.status<300)o(c.response);else try{s(Error(await c.response.text()))}catch{s(Error(`HTTP error: ${c.statusText}`))}},c.onerror=e=>{s(Error(`Network error`))},c.send(n)})}async function OB(e,t,n,r,i,a){let o=`${e}/api/public/temp-image?${new URLSearchParams({key:(0,K_.default)({field:n.field,templateId:t,timestamp:Date.now()})})}`,s=new FormData;s.append(`file`,r,i);let c=await DB({url:o,method:`POST`,data:s,onUploadProgress:a});if(c.type===`application/json`)return JSON.parse(await c.text());throw Error(`Invalid response from Cloudflare Images`)}var kB=`https://bx-studio-api-production.bluepic.workers.dev`,AB=`https://render.bluepic.io`,jB=class extends EventTarget{element;apiBaseUrl=(0,t.ref)(kB);remoteVideoRenderBaseUrl=(0,t.ref)(AB);editorRef=(0,t.ref)();campaignId;templateId=(0,t.ref)();data=(0,t.ref)();serial=(0,t.ref)();preview=(0,t.ref)();templateName=(0,t.ref)(``);campaign=(0,t.ref)();bxCoreVersion=(0,t.ref)(void 0);allowPanAndZoom=(0,t.ref)(!1);branding=(0,t.ref)(!0);stripeEnv=(0,t.ref)(`prod`);bxThemeStyleVars;id=`bluepic-app-${m()}`;constructor(e,n,r){if(super(),typeof e==`string`){let t=document.querySelector(e);if(!t||!(t instanceof HTMLElement))throw Error(`Element with selector "${e}" not found or not an HTMLElement`);this.element=t}else if(e instanceof HTMLElement)this.element=e;else throw Error(`Invalid element or selector provided`);let i=typeof n==`string`?Number(n):n;if(!Number.isFinite(i))throw Error(`Invalid campaign id "${n}"`);this.campaignId=(0,t.ref)(i),this.templateId.value=r?.templateId,this.apiBaseUrl.value=r?.apiBaseUrl??this.apiBaseUrl.value,this.remoteVideoRenderBaseUrl.value=r?.remoteVideoRenderBaseUrl??this.remoteVideoRenderBaseUrl.value,this.bxCoreVersion.value=r?.bxCoreVersion,this.stripeEnv.value=r?.stripeEnv??this.stripeEnv.value,this.data.value=r?.initData,this.mount(),this.bxThemeStyleVars=xB(`#${this.id}`,r?.theme??`auto`,r?.customThemeVars),this.loadCampaign(r?.bearerToken,r?.password),(0,t.watch)(this.data,()=>{this.dispatchEvent(new CustomEvent(`data`,{detail:(0,t.unref)(this.data.value)}))},{deep:!0})}async loadCampaign(e,t){let n,{campaign:r,isAllowedToDisableBranding:i,bxCoreVersion:a,templates:o}=await MB(this.apiBaseUrl.value,this.campaignId.value,this.stripeEnv.value,3,2e3);this.campaign.value=r,this.allowPanAndZoom.value=r.config.allowPanAndZoom,this.branding.value=!i||r.config.bluepicBranding,a&&!this.bxCoreVersion.value&&(this.bxCoreVersion.value=a);let s=r.config.theme;if(dB(s))n=xB(`#${this.id}`,s.preset??`dark`,s);else if(r.config.customStyle)n=xB(void 0,uS(r?.config.customStyle[`editor-view-background-color`]).isDark()?`dark`:`light`,{...r?.config.customStyle});else{let e=uS(r?.config.customStyle?.[`editor-view-background-color`]).isDark();n=xB(void 0,e?`dark`:`light`),n.value[`editor-view-background-color`]=r?.config.customStyle?.[`editor-view-background-color`]??(e?`#111111`:`#f0f0f0`)}let c=this.templateId.value??r.templates[0];if(!c){console.error(`[BluepicEmbed] Campaign has no templates`);return}this.templateId.value=c;let l=o?.[c],u=l?.canvases?.[0];if(l){this.templateName.value=l.name??``;let e=u?.preview;this.preview.value=(typeof e==`string`?e:e?.default)??void 0,u?.serial&&(this.serial.value=u.serial)}if(!this.serial.value)try{let e=u?`${this.apiBaseUrl.value}/api/public/campaign/serial/${c}/${ci.Template.canvasSizeToken(u.width,u.height)}?${new URLSearchParams({env:this.stripeEnv.value,...u.hash?{h:u.hash}:{}})}`:`${this.apiBaseUrl.value}/api/public/campaign/serial/${c}?${new URLSearchParams({env:this.stripeEnv.value})}`,t=await fetch(e);t.ok&&(this.serial.value=await t.json())}catch(e){console.error(`[BluepicEmbed] Failed to fetch serial`,e)}this.dispatchEvent(new CustomEvent(`ready`))}mount(){getComputedStyle(this.element).boxSizing===`content-box`&&(this.element.style.boxSizing=`border-box`);let e=document.createElement(`style`);e.textContent=`
+`;async function EB(e,t,n=`unit8Array`,r){let i=await fetch(e,t);if(!i.body)throw Error(`Response body is undefined`);let a=Number(i.headers.get(`Content-Length`)),o=isNaN(a)?null:a,s=i.body.getReader(),c=0,l=[];for(;;){let{done:e,value:t}=await s.read();if(e)break;c+=t.length,l.push(t),r&&r(o,c)}let u=new Uint8Array(c),d=0;for(let e of l)u.set(e,d),d+=e.length;return{data:u,contentType:i.headers.get(`Content-Type`)}}function DB({url:e,method:t=`GET`,data:n=null,headers:r={},onUploadProgress:i,onDownloadProgress:a}){return new Promise((o,s)=>{let c=new XMLHttpRequest;c.responseType=`blob`,c.open(t,e);for(let[e,t]of Object.entries(r))c.setRequestHeader(e,t);i&&c.upload&&(c.upload.onprogress=e=>{i(e.loaded,e.total)}),a&&(c.onprogress=e=>{e.lengthComputable&&a(e.loaded,e.total)}),c.onload=async()=>{if(c.status>=200&&c.status<300)o(c.response);else try{s(Error(await c.response.text()))}catch{s(Error(`HTTP error: ${c.statusText}`))}},c.onerror=e=>{s(Error(`Network error`))},c.send(n)})}async function OB(e,t,n,r,i,a){let o=`${e}/api/public/temp-image?${new URLSearchParams({key:(0,K_.default)({field:n.field,templateId:t,timestamp:Date.now()})})}`,s=new FormData;s.append(`file`,r,i);let c=await DB({url:o,method:`POST`,data:s,onUploadProgress:a});if(c.type===`application/json`)return JSON.parse(await c.text());throw Error(`Invalid response from Cloudflare Images`)}var kB=`https://bx-studio-api-production.bluepic.workers.dev`,AB=`https://render.bluepic.io`,jB=class extends EventTarget{element;apiBaseUrl=(0,t.ref)(kB);remoteVideoRenderBaseUrl=(0,t.ref)(AB);editorRef=(0,t.ref)();campaignId;templateId=(0,t.ref)();data=(0,t.ref)();serial=(0,t.ref)();preview=(0,t.ref)();templateName=(0,t.ref)(``);campaign=(0,t.ref)();bxCoreVersion=(0,t.ref)(void 0);allowPanAndZoom=(0,t.ref)(!1);branding=(0,t.ref)(!0);stripeEnv=(0,t.ref)(`prod`);bxThemeStyleVars;id=`bluepic-app-${m()}`;constructor(e,n,r){if(super(),typeof e==`string`){let t=document.querySelector(e);if(!t||!(t instanceof HTMLElement))throw Error(`Element with selector "${e}" not found or not an HTMLElement`);this.element=t}else if(e instanceof HTMLElement)this.element=e;else throw Error(`Invalid element or selector provided`);let i=typeof n==`string`?Number(n):n;if(!Number.isFinite(i))throw Error(`Invalid campaign id "${n}"`);this.campaignId=(0,t.ref)(i),this.templateId.value=r?.templateId,this.apiBaseUrl.value=r?.apiBaseUrl??this.apiBaseUrl.value,this.remoteVideoRenderBaseUrl.value=r?.remoteVideoRenderBaseUrl??this.remoteVideoRenderBaseUrl.value,this.bxCoreVersion.value=r?.bxCoreVersion,this.stripeEnv.value=r?.stripeEnv??this.stripeEnv.value,this.data.value=r?.initData,this.mount(),this.bxThemeStyleVars=xB(`#${this.id}`,r?.theme??`auto`,r?.customThemeVars),this.loadCampaign(r?.bearerToken,r?.password),(0,t.watch)(this.data,()=>{this.dispatchEvent(new CustomEvent(`data`,{detail:(0,t.unref)(this.data.value)}))},{deep:!0})}async loadCampaign(e,t){let n,{campaign:r,isAllowedToDisableBranding:i,bxCoreVersion:a,templates:o}=await MB(this.apiBaseUrl.value,this.campaignId.value,this.stripeEnv.value,3,2e3);this.campaign.value=r,this.allowPanAndZoom.value=r.config.allowPanAndZoom,this.branding.value=!i||r.config.bluepicBranding,a&&!this.bxCoreVersion.value&&(this.bxCoreVersion.value=a);let s=r.config.theme;if(dB(s))n=xB(`#${this.id}`,s.preset??`dark`,s);else if(r.config.customStyle)n=xB(void 0,uS(r?.config.customStyle[`editor-view-background-color`]).isDark()?`dark`:`light`,{...r?.config.customStyle});else{let e=uS(r?.config.customStyle?.[`editor-view-background-color`]).isDark();n=xB(void 0,e?`dark`:`light`),n.value[`editor-view-background-color`]=r?.config.customStyle?.[`editor-view-background-color`]??(e?`#111111`:`#f0f0f0`)}let c=this.templateId.value??r.templates[0];if(!c){console.error(`[BluepicEmbed] Campaign has no templates`);return}this.templateId.value=c;let l=o?.[c],u=l?.canvases?.[0];if(l){this.templateName.value=l.name??``;let e=u?.preview;this.preview.value=(typeof e==`string`?e:e?.placeholder??e?.src??e?.default)??void 0,u?.serial&&(this.serial.value=u.serial)}if(!this.serial.value)try{let e=u?`${this.apiBaseUrl.value}/api/public/campaign/serial/${c}/${ci.Template.canvasSizeToken(u.width,u.height)}?${new URLSearchParams({env:this.stripeEnv.value,...u.hash?{h:u.hash}:{}})}`:`${this.apiBaseUrl.value}/api/public/campaign/serial/${c}?${new URLSearchParams({env:this.stripeEnv.value})}`,t=await fetch(e);t.ok&&(this.serial.value=await t.json())}catch(e){console.error(`[BluepicEmbed] Failed to fetch serial`,e)}this.dispatchEvent(new CustomEvent(`ready`))}mount(){getComputedStyle(this.element).boxSizing===`content-box`&&(this.element.style.boxSizing=`border-box`);let e=document.createElement(`style`);e.textContent=`
       #${this.id} {
         position: relative;
         width: 100%;

package/dist/bluepic-embed.umd.js

@@ -2134,7 +2134,7 @@ https://github.com/highlightjs/highlight.js/issues/2277`),i=e,r=t),n===void 0&&(
   background-color: #fff;
   color: #111111;
 }
-`;async function EB(e,t,n=`unit8Array`,r){let i=await fetch(e,t);if(!i.body)throw Error(`Response body is undefined`);let a=Number(i.headers.get(`Content-Length`)),o=isNaN(a)?null:a,s=i.body.getReader(),c=0,l=[];for(;;){let{done:e,value:t}=await s.read();if(e)break;c+=t.length,l.push(t),r&&r(o,c)}let u=new Uint8Array(c),d=0;for(let e of l)u.set(e,d),d+=e.length;return{data:u,contentType:i.headers.get(`Content-Type`)}}function DB({url:e,method:t=`GET`,data:n=null,headers:r={},onUploadProgress:i,onDownloadProgress:a}){return new Promise((o,s)=>{let c=new XMLHttpRequest;c.responseType=`blob`,c.open(t,e);for(let[e,t]of Object.entries(r))c.setRequestHeader(e,t);i&&c.upload&&(c.upload.onprogress=e=>{i(e.loaded,e.total)}),a&&(c.onprogress=e=>{e.lengthComputable&&a(e.loaded,e.total)}),c.onload=async()=>{if(c.status>=200&&c.status<300)o(c.response);else try{s(Error(await c.response.text()))}catch{s(Error(`HTTP error: ${c.statusText}`))}},c.onerror=e=>{s(Error(`Network error`))},c.send(n)})}async function OB(e,t,n,r,i,a){let o=`${e}/api/public/temp-image?${new URLSearchParams({key:(0,K_.default)({field:n.field,templateId:t,timestamp:Date.now()})})}`,s=new FormData;s.append(`file`,r,i);let c=await DB({url:o,method:`POST`,data:s,onUploadProgress:a});if(c.type===`application/json`)return JSON.parse(await c.text());throw Error(`Invalid response from Cloudflare Images`)}var kB=`https://bx-studio-api-production.bluepic.workers.dev`,AB=`https://render.bluepic.io`,jB=class extends EventTarget{element;apiBaseUrl=(0,t.ref)(kB);remoteVideoRenderBaseUrl=(0,t.ref)(AB);editorRef=(0,t.ref)();campaignId;templateId=(0,t.ref)();data=(0,t.ref)();serial=(0,t.ref)();preview=(0,t.ref)();templateName=(0,t.ref)(``);campaign=(0,t.ref)();bxCoreVersion=(0,t.ref)(void 0);allowPanAndZoom=(0,t.ref)(!1);branding=(0,t.ref)(!0);stripeEnv=(0,t.ref)(`prod`);bxThemeStyleVars;id=`bluepic-app-${m()}`;constructor(e,n,r){if(super(),typeof e==`string`){let t=document.querySelector(e);if(!t||!(t instanceof HTMLElement))throw Error(`Element with selector "${e}" not found or not an HTMLElement`);this.element=t}else if(e instanceof HTMLElement)this.element=e;else throw Error(`Invalid element or selector provided`);let i=typeof n==`string`?Number(n):n;if(!Number.isFinite(i))throw Error(`Invalid campaign id "${n}"`);this.campaignId=(0,t.ref)(i),this.templateId.value=r?.templateId,this.apiBaseUrl.value=r?.apiBaseUrl??this.apiBaseUrl.value,this.remoteVideoRenderBaseUrl.value=r?.remoteVideoRenderBaseUrl??this.remoteVideoRenderBaseUrl.value,this.bxCoreVersion.value=r?.bxCoreVersion,this.stripeEnv.value=r?.stripeEnv??this.stripeEnv.value,this.data.value=r?.initData,this.mount(),this.bxThemeStyleVars=xB(`#${this.id}`,r?.theme??`auto`,r?.customThemeVars),this.loadCampaign(r?.bearerToken,r?.password),(0,t.watch)(this.data,()=>{this.dispatchEvent(new CustomEvent(`data`,{detail:(0,t.unref)(this.data.value)}))},{deep:!0})}async loadCampaign(e,t){let n,{campaign:r,isAllowedToDisableBranding:i,bxCoreVersion:a,templates:o}=await MB(this.apiBaseUrl.value,this.campaignId.value,this.stripeEnv.value,3,2e3);this.campaign.value=r,this.allowPanAndZoom.value=r.config.allowPanAndZoom,this.branding.value=!i||r.config.bluepicBranding,a&&!this.bxCoreVersion.value&&(this.bxCoreVersion.value=a);let s=r.config.theme;if(dB(s))n=xB(`#${this.id}`,s.preset??`dark`,s);else if(r.config.customStyle)n=xB(void 0,uS(r?.config.customStyle[`editor-view-background-color`]).isDark()?`dark`:`light`,{...r?.config.customStyle});else{let e=uS(r?.config.customStyle?.[`editor-view-background-color`]).isDark();n=xB(void 0,e?`dark`:`light`),n.value[`editor-view-background-color`]=r?.config.customStyle?.[`editor-view-background-color`]??(e?`#111111`:`#f0f0f0`)}let c=this.templateId.value??r.templates[0];if(!c){console.error(`[BluepicEmbed] Campaign has no templates`);return}this.templateId.value=c;let l=o?.[c],u=l?.canvases?.[0];if(l){this.templateName.value=l.name??``;let e=u?.preview;this.preview.value=(typeof e==`string`?e:e?.default)??void 0,u?.serial&&(this.serial.value=u.serial)}if(!this.serial.value)try{let e=u?`${this.apiBaseUrl.value}/api/public/campaign/serial/${c}/${ci.Template.canvasSizeToken(u.width,u.height)}?${new URLSearchParams({env:this.stripeEnv.value,...u.hash?{h:u.hash}:{}})}`:`${this.apiBaseUrl.value}/api/public/campaign/serial/${c}?${new URLSearchParams({env:this.stripeEnv.value})}`,t=await fetch(e);t.ok&&(this.serial.value=await t.json())}catch(e){console.error(`[BluepicEmbed] Failed to fetch serial`,e)}this.dispatchEvent(new CustomEvent(`ready`))}mount(){getComputedStyle(this.element).boxSizing===`content-box`&&(this.element.style.boxSizing=`border-box`);let e=document.createElement(`style`);e.textContent=`
+`;async function EB(e,t,n=`unit8Array`,r){let i=await fetch(e,t);if(!i.body)throw Error(`Response body is undefined`);let a=Number(i.headers.get(`Content-Length`)),o=isNaN(a)?null:a,s=i.body.getReader(),c=0,l=[];for(;;){let{done:e,value:t}=await s.read();if(e)break;c+=t.length,l.push(t),r&&r(o,c)}let u=new Uint8Array(c),d=0;for(let e of l)u.set(e,d),d+=e.length;return{data:u,contentType:i.headers.get(`Content-Type`)}}function DB({url:e,method:t=`GET`,data:n=null,headers:r={},onUploadProgress:i,onDownloadProgress:a}){return new Promise((o,s)=>{let c=new XMLHttpRequest;c.responseType=`blob`,c.open(t,e);for(let[e,t]of Object.entries(r))c.setRequestHeader(e,t);i&&c.upload&&(c.upload.onprogress=e=>{i(e.loaded,e.total)}),a&&(c.onprogress=e=>{e.lengthComputable&&a(e.loaded,e.total)}),c.onload=async()=>{if(c.status>=200&&c.status<300)o(c.response);else try{s(Error(await c.response.text()))}catch{s(Error(`HTTP error: ${c.statusText}`))}},c.onerror=e=>{s(Error(`Network error`))},c.send(n)})}async function OB(e,t,n,r,i,a){let o=`${e}/api/public/temp-image?${new URLSearchParams({key:(0,K_.default)({field:n.field,templateId:t,timestamp:Date.now()})})}`,s=new FormData;s.append(`file`,r,i);let c=await DB({url:o,method:`POST`,data:s,onUploadProgress:a});if(c.type===`application/json`)return JSON.parse(await c.text());throw Error(`Invalid response from Cloudflare Images`)}var kB=`https://bx-studio-api-production.bluepic.workers.dev`,AB=`https://render.bluepic.io`,jB=class extends EventTarget{element;apiBaseUrl=(0,t.ref)(kB);remoteVideoRenderBaseUrl=(0,t.ref)(AB);editorRef=(0,t.ref)();campaignId;templateId=(0,t.ref)();data=(0,t.ref)();serial=(0,t.ref)();preview=(0,t.ref)();templateName=(0,t.ref)(``);campaign=(0,t.ref)();bxCoreVersion=(0,t.ref)(void 0);allowPanAndZoom=(0,t.ref)(!1);branding=(0,t.ref)(!0);stripeEnv=(0,t.ref)(`prod`);bxThemeStyleVars;id=`bluepic-app-${m()}`;constructor(e,n,r){if(super(),typeof e==`string`){let t=document.querySelector(e);if(!t||!(t instanceof HTMLElement))throw Error(`Element with selector "${e}" not found or not an HTMLElement`);this.element=t}else if(e instanceof HTMLElement)this.element=e;else throw Error(`Invalid element or selector provided`);let i=typeof n==`string`?Number(n):n;if(!Number.isFinite(i))throw Error(`Invalid campaign id "${n}"`);this.campaignId=(0,t.ref)(i),this.templateId.value=r?.templateId,this.apiBaseUrl.value=r?.apiBaseUrl??this.apiBaseUrl.value,this.remoteVideoRenderBaseUrl.value=r?.remoteVideoRenderBaseUrl??this.remoteVideoRenderBaseUrl.value,this.bxCoreVersion.value=r?.bxCoreVersion,this.stripeEnv.value=r?.stripeEnv??this.stripeEnv.value,this.data.value=r?.initData,this.mount(),this.bxThemeStyleVars=xB(`#${this.id}`,r?.theme??`auto`,r?.customThemeVars),this.loadCampaign(r?.bearerToken,r?.password),(0,t.watch)(this.data,()=>{this.dispatchEvent(new CustomEvent(`data`,{detail:(0,t.unref)(this.data.value)}))},{deep:!0})}async loadCampaign(e,t){let n,{campaign:r,isAllowedToDisableBranding:i,bxCoreVersion:a,templates:o}=await MB(this.apiBaseUrl.value,this.campaignId.value,this.stripeEnv.value,3,2e3);this.campaign.value=r,this.allowPanAndZoom.value=r.config.allowPanAndZoom,this.branding.value=!i||r.config.bluepicBranding,a&&!this.bxCoreVersion.value&&(this.bxCoreVersion.value=a);let s=r.config.theme;if(dB(s))n=xB(`#${this.id}`,s.preset??`dark`,s);else if(r.config.customStyle)n=xB(void 0,uS(r?.config.customStyle[`editor-view-background-color`]).isDark()?`dark`:`light`,{...r?.config.customStyle});else{let e=uS(r?.config.customStyle?.[`editor-view-background-color`]).isDark();n=xB(void 0,e?`dark`:`light`),n.value[`editor-view-background-color`]=r?.config.customStyle?.[`editor-view-background-color`]??(e?`#111111`:`#f0f0f0`)}let c=this.templateId.value??r.templates[0];if(!c){console.error(`[BluepicEmbed] Campaign has no templates`);return}this.templateId.value=c;let l=o?.[c],u=l?.canvases?.[0];if(l){this.templateName.value=l.name??``;let e=u?.preview;this.preview.value=(typeof e==`string`?e:e?.placeholder??e?.src??e?.default)??void 0,u?.serial&&(this.serial.value=u.serial)}if(!this.serial.value)try{let e=u?`${this.apiBaseUrl.value}/api/public/campaign/serial/${c}/${ci.Template.canvasSizeToken(u.width,u.height)}?${new URLSearchParams({env:this.stripeEnv.value,...u.hash?{h:u.hash}:{}})}`:`${this.apiBaseUrl.value}/api/public/campaign/serial/${c}?${new URLSearchParams({env:this.stripeEnv.value})}`,t=await fetch(e);t.ok&&(this.serial.value=await t.json())}catch(e){console.error(`[BluepicEmbed] Failed to fetch serial`,e)}this.dispatchEvent(new CustomEvent(`ready`))}mount(){getComputedStyle(this.element).boxSizing===`content-box`&&(this.element.style.boxSizing=`border-box`);let e=document.createElement(`style`);e.textContent=`
       #${this.id} {
         position: relative;
         width: 100%;

package/dist/main.cjs

@@ -2120,7 +2120,7 @@ https://github.com/highlightjs/highlight.js/issues/2277`),i=e,r=t),n===void 0&&(
   background-color: #fff;
   color: #111111;
 }
-`;async function ZK(e,t,n=`unit8Array`,r){let i=await fetch(e,t);if(!i.body)throw Error(`Response body is undefined`);let a=Number(i.headers.get(`Content-Length`)),o=isNaN(a)?null:a,s=i.body.getReader(),c=0,l=[];for(;;){let{done:e,value:t}=await s.read();if(e)break;c+=t.length,l.push(t),r&&r(o,c)}let u=new Uint8Array(c),d=0;for(let e of l)u.set(e,d),d+=e.length;return{data:u,contentType:i.headers.get(`Content-Type`)}}function QK({url:e,method:t=`GET`,data:n=null,headers:r={},onUploadProgress:i,onDownloadProgress:a}){return new Promise((o,s)=>{let c=new XMLHttpRequest;c.responseType=`blob`,c.open(t,e);for(let[e,t]of Object.entries(r))c.setRequestHeader(e,t);i&&c.upload&&(c.upload.onprogress=e=>{i(e.loaded,e.total)}),a&&(c.onprogress=e=>{e.lengthComputable&&a(e.loaded,e.total)}),c.onload=async()=>{if(c.status>=200&&c.status<300)o(c.response);else try{s(Error(await c.response.text()))}catch{s(Error(`HTTP error: ${c.statusText}`))}},c.onerror=e=>{s(Error(`Network error`))},c.send(n)})}async function $K(e,t,n,r,i,a){let o=`${e}/api/public/temp-image?${new URLSearchParams({key:(0,zv.default)({field:n.field,templateId:t,timestamp:Date.now()})})}`,s=new FormData;s.append(`file`,r,i);let c=await QK({url:o,method:`POST`,data:s,onUploadProgress:a});if(c.type===`application/json`)return JSON.parse(await c.text());throw Error(`Invalid response from Cloudflare Images`)}var eq=`https://bx-studio-api-production.bluepic.workers.dev`,tq=`https://render.bluepic.io`,nq=class extends EventTarget{element;apiBaseUrl=(0,t.ref)(eq);remoteVideoRenderBaseUrl=(0,t.ref)(tq);editorRef=(0,t.ref)();campaignId;templateId=(0,t.ref)();data=(0,t.ref)();serial=(0,t.ref)();preview=(0,t.ref)();templateName=(0,t.ref)(``);campaign=(0,t.ref)();bxCoreVersion=(0,t.ref)(void 0);allowPanAndZoom=(0,t.ref)(!1);branding=(0,t.ref)(!0);stripeEnv=(0,t.ref)(`prod`);bxThemeStyleVars;id=`bluepic-app-${r()}`;constructor(e,n,r){if(super(),typeof e==`string`){let t=document.querySelector(e);if(!t||!(t instanceof HTMLElement))throw Error(`Element with selector "${e}" not found or not an HTMLElement`);this.element=t}else if(e instanceof HTMLElement)this.element=e;else throw Error(`Invalid element or selector provided`);let i=typeof n==`string`?Number(n):n;if(!Number.isFinite(i))throw Error(`Invalid campaign id "${n}"`);this.campaignId=(0,t.ref)(i),this.templateId.value=r?.templateId,this.apiBaseUrl.value=r?.apiBaseUrl??this.apiBaseUrl.value,this.remoteVideoRenderBaseUrl.value=r?.remoteVideoRenderBaseUrl??this.remoteVideoRenderBaseUrl.value,this.bxCoreVersion.value=r?.bxCoreVersion,this.stripeEnv.value=r?.stripeEnv??this.stripeEnv.value,this.data.value=r?.initData,this.mount(),this.bxThemeStyleVars=KK(`#${this.id}`,r?.theme??`auto`,r?.customThemeVars),this.loadCampaign(r?.bearerToken,r?.password),(0,t.watch)(this.data,()=>{this.dispatchEvent(new CustomEvent(`data`,{detail:(0,t.unref)(this.data.value)}))},{deep:!0})}async loadCampaign(e,t){let n,{campaign:r,isAllowedToDisableBranding:i,bxCoreVersion:a,templates:o}=await rq(this.apiBaseUrl.value,this.campaignId.value,this.stripeEnv.value,3,2e3);this.campaign.value=r,this.allowPanAndZoom.value=r.config.allowPanAndZoom,this.branding.value=!i||r.config.bluepicBranding,a&&!this.bxCoreVersion.value&&(this.bxCoreVersion.value=a);let s=r.config.theme;if(IK(s))n=KK(`#${this.id}`,s.preset??`dark`,s);else if(r.config.customStyle)n=KK(void 0,JT(r?.config.customStyle[`editor-view-background-color`]).isDark()?`dark`:`light`,{...r?.config.customStyle});else{let e=JT(r?.config.customStyle?.[`editor-view-background-color`]).isDark();n=KK(void 0,e?`dark`:`light`),n.value[`editor-view-background-color`]=r?.config.customStyle?.[`editor-view-background-color`]??(e?`#111111`:`#f0f0f0`)}let c=this.templateId.value??r.templates[0];if(!c){console.error(`[BluepicEmbed] Campaign has no templates`);return}this.templateId.value=c;let l=o?.[c],u=l?.canvases?.[0];if(l){this.templateName.value=l.name??``;let e=u?.preview;this.preview.value=(typeof e==`string`?e:e?.default)??void 0,u?.serial&&(this.serial.value=u.serial)}if(!this.serial.value)try{let e=u?`${this.apiBaseUrl.value}/api/public/campaign/serial/${c}/${ei.Template.canvasSizeToken(u.width,u.height)}?${new URLSearchParams({env:this.stripeEnv.value,...u.hash?{h:u.hash}:{}})}`:`${this.apiBaseUrl.value}/api/public/campaign/serial/${c}?${new URLSearchParams({env:this.stripeEnv.value})}`,t=await fetch(e);t.ok&&(this.serial.value=await t.json())}catch(e){console.error(`[BluepicEmbed] Failed to fetch serial`,e)}this.dispatchEvent(new CustomEvent(`ready`))}mount(){getComputedStyle(this.element).boxSizing===`content-box`&&(this.element.style.boxSizing=`border-box`);let e=document.createElement(`style`);e.textContent=`
+`;async function ZK(e,t,n=`unit8Array`,r){let i=await fetch(e,t);if(!i.body)throw Error(`Response body is undefined`);let a=Number(i.headers.get(`Content-Length`)),o=isNaN(a)?null:a,s=i.body.getReader(),c=0,l=[];for(;;){let{done:e,value:t}=await s.read();if(e)break;c+=t.length,l.push(t),r&&r(o,c)}let u=new Uint8Array(c),d=0;for(let e of l)u.set(e,d),d+=e.length;return{data:u,contentType:i.headers.get(`Content-Type`)}}function QK({url:e,method:t=`GET`,data:n=null,headers:r={},onUploadProgress:i,onDownloadProgress:a}){return new Promise((o,s)=>{let c=new XMLHttpRequest;c.responseType=`blob`,c.open(t,e);for(let[e,t]of Object.entries(r))c.setRequestHeader(e,t);i&&c.upload&&(c.upload.onprogress=e=>{i(e.loaded,e.total)}),a&&(c.onprogress=e=>{e.lengthComputable&&a(e.loaded,e.total)}),c.onload=async()=>{if(c.status>=200&&c.status<300)o(c.response);else try{s(Error(await c.response.text()))}catch{s(Error(`HTTP error: ${c.statusText}`))}},c.onerror=e=>{s(Error(`Network error`))},c.send(n)})}async function $K(e,t,n,r,i,a){let o=`${e}/api/public/temp-image?${new URLSearchParams({key:(0,zv.default)({field:n.field,templateId:t,timestamp:Date.now()})})}`,s=new FormData;s.append(`file`,r,i);let c=await QK({url:o,method:`POST`,data:s,onUploadProgress:a});if(c.type===`application/json`)return JSON.parse(await c.text());throw Error(`Invalid response from Cloudflare Images`)}var eq=`https://bx-studio-api-production.bluepic.workers.dev`,tq=`https://render.bluepic.io`,nq=class extends EventTarget{element;apiBaseUrl=(0,t.ref)(eq);remoteVideoRenderBaseUrl=(0,t.ref)(tq);editorRef=(0,t.ref)();campaignId;templateId=(0,t.ref)();data=(0,t.ref)();serial=(0,t.ref)();preview=(0,t.ref)();templateName=(0,t.ref)(``);campaign=(0,t.ref)();bxCoreVersion=(0,t.ref)(void 0);allowPanAndZoom=(0,t.ref)(!1);branding=(0,t.ref)(!0);stripeEnv=(0,t.ref)(`prod`);bxThemeStyleVars;id=`bluepic-app-${r()}`;constructor(e,n,r){if(super(),typeof e==`string`){let t=document.querySelector(e);if(!t||!(t instanceof HTMLElement))throw Error(`Element with selector "${e}" not found or not an HTMLElement`);this.element=t}else if(e instanceof HTMLElement)this.element=e;else throw Error(`Invalid element or selector provided`);let i=typeof n==`string`?Number(n):n;if(!Number.isFinite(i))throw Error(`Invalid campaign id "${n}"`);this.campaignId=(0,t.ref)(i),this.templateId.value=r?.templateId,this.apiBaseUrl.value=r?.apiBaseUrl??this.apiBaseUrl.value,this.remoteVideoRenderBaseUrl.value=r?.remoteVideoRenderBaseUrl??this.remoteVideoRenderBaseUrl.value,this.bxCoreVersion.value=r?.bxCoreVersion,this.stripeEnv.value=r?.stripeEnv??this.stripeEnv.value,this.data.value=r?.initData,this.mount(),this.bxThemeStyleVars=KK(`#${this.id}`,r?.theme??`auto`,r?.customThemeVars),this.loadCampaign(r?.bearerToken,r?.password),(0,t.watch)(this.data,()=>{this.dispatchEvent(new CustomEvent(`data`,{detail:(0,t.unref)(this.data.value)}))},{deep:!0})}async loadCampaign(e,t){let n,{campaign:r,isAllowedToDisableBranding:i,bxCoreVersion:a,templates:o}=await rq(this.apiBaseUrl.value,this.campaignId.value,this.stripeEnv.value,3,2e3);this.campaign.value=r,this.allowPanAndZoom.value=r.config.allowPanAndZoom,this.branding.value=!i||r.config.bluepicBranding,a&&!this.bxCoreVersion.value&&(this.bxCoreVersion.value=a);let s=r.config.theme;if(IK(s))n=KK(`#${this.id}`,s.preset??`dark`,s);else if(r.config.customStyle)n=KK(void 0,JT(r?.config.customStyle[`editor-view-background-color`]).isDark()?`dark`:`light`,{...r?.config.customStyle});else{let e=JT(r?.config.customStyle?.[`editor-view-background-color`]).isDark();n=KK(void 0,e?`dark`:`light`),n.value[`editor-view-background-color`]=r?.config.customStyle?.[`editor-view-background-color`]??(e?`#111111`:`#f0f0f0`)}let c=this.templateId.value??r.templates[0];if(!c){console.error(`[BluepicEmbed] Campaign has no templates`);return}this.templateId.value=c;let l=o?.[c],u=l?.canvases?.[0];if(l){this.templateName.value=l.name??``;let e=u?.preview;this.preview.value=(typeof e==`string`?e:e?.placeholder??e?.src??e?.default)??void 0,u?.serial&&(this.serial.value=u.serial)}if(!this.serial.value)try{let e=u?`${this.apiBaseUrl.value}/api/public/campaign/serial/${c}/${ei.Template.canvasSizeToken(u.width,u.height)}?${new URLSearchParams({env:this.stripeEnv.value,...u.hash?{h:u.hash}:{}})}`:`${this.apiBaseUrl.value}/api/public/campaign/serial/${c}?${new URLSearchParams({env:this.stripeEnv.value})}`,t=await fetch(e);t.ok&&(this.serial.value=await t.json())}catch(e){console.error(`[BluepicEmbed] Failed to fetch serial`,e)}this.dispatchEvent(new CustomEvent(`ready`))}mount(){getComputedStyle(this.element).boxSizing===`content-box`&&(this.element.style.boxSizing=`border-box`);let e=document.createElement(`style`);e.textContent=`
       #${this.id} {
         position: relative;
         width: 100%;

package/dist/main.mjs

@@ -72596,7 +72596,7 @@ var tJ = "https://bx-studio-api-production.bluepic.workers.dev", nJ = "https://r
 		if (l) {
 			this.templateName.value = l.name ?? "";
 			let e = u?.preview;
-			this.preview.value = (typeof e == "string" ? e : e?.default) ?? void 0, u?.serial && (this.serial.value = u.serial);
+			this.preview.value = (typeof e == "string" ? e : e?.placeholder ?? e?.src ?? e?.default) ?? void 0, u?.serial && (this.serial.value = u.serial);
 		}
 		if (!this.serial.value) try {
 			let e = u ? `${this.apiBaseUrl.value}/api/public/campaign/serial/${c}/${na.Template.canvasSizeToken(u.width, u.height)}?${new URLSearchParams({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bluepic/embed",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Bluepic embed sdk",
   "type": "module",
   "sideEffects": false,