@bluepic/embed 0.6.11 → 0.6.12

package/dist/bluepic-embed.iife.js

@@ -2135,7 +2135,7 @@ https://github.com/highlightjs/highlight.js/issues/2277`),i=e,r=t),n===void 0&&(
   background-color: #fff;
   color: #111111;
 }
-`;async function aV(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 oV({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 sV(e,t,n,r,i,a){let o=`${e}/api/public/temp-image?${new URLSearchParams({key:(0,B_.default)({field:n.field,templateId:t,timestamp:Date.now()})})}`,s=new FormData;s.append(`file`,r,i);let c=await oV({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 cV=`https://bx-studio-api-production.bluepic.workers.dev`,lV=`https://render.bluepic.io`,uV=class extends EventTarget{element;apiBaseUrl=(0,t.ref)(cV);remoteVideoRenderBaseUrl=(0,t.ref)(lV);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()}`;app;destroyed=!1;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=eV(`#${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 dV(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(WB(s))n=eV(`#${this.id}`,s.preset??`dark`,s);else if(r.config.customStyle)n=eV(void 0,pS(r?.config.customStyle[`editor-view-background-color`]).isDark()?`dark`:`light`,{...r?.config.customStyle});else{let e=pS(r?.config.customStyle?.[`editor-view-background-color`]).isDark();n=eV(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`))}destroy(){this.destroyed=!0,this.app?.unmount(),this.app=void 0,this.element.innerHTML=``}mount(){getComputedStyle(this.element).boxSizing===`content-box`&&(this.element.style.boxSizing=`border-box`);let e=document.createElement(`style`);e.textContent=`
+`;async function aV(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 oV({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 sV(e,t,n,r,i,a){let o=`${e}/api/public/temp-image?${new URLSearchParams({key:(0,B_.default)({field:n.field,templateId:t,timestamp:Date.now()})})}`,s=new FormData;s.append(`file`,r,i);let c=await oV({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 cV=`https://bx-studio-api-production.bluepic.workers.dev`,lV=`https://render.bluepic.io`,uV=class extends EventTarget{element;apiBaseUrl=(0,t.ref)(cV);remoteVideoRenderBaseUrl=(0,t.ref)(lV);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()}`;app;destroyed=!1;onClose;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.onClose=r?.onClose,this.mount(),this.bxThemeStyleVars=eV(`#${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 dV(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(WB(s))n=eV(`#${this.id}`,s.preset??`dark`,s);else if(r.config.customStyle)n=eV(void 0,pS(r?.config.customStyle[`editor-view-background-color`]).isDark()?`dark`:`light`,{...r?.config.customStyle});else{let e=pS(r?.config.customStyle?.[`editor-view-background-color`]).isDark();n=eV(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`))}destroy(){this.destroyed=!0,this.app?.unmount(),this.app=void 0,this.element.innerHTML=``}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%;
@@ -2202,21 +2202,33 @@ https://github.com/highlightjs/highlight.js/issues/2277`),i=e,r=t),n===void 0&&(
                 :env="VITE_STRIPE_ENV"
                 :enforce-server-side-rendering="enforceServerSideRendering"
                 :enforce-video-server-side-rendering="enforceVideoServerSideRendering"
-              />
+              >
+                <template v-if="onClose" #navbar-right>
+                  <bx-button secondary aria-label="Close" @click="onClose()">
+                    <template #icon>
+                      <bx-icon><close-outline /></bx-icon>
+                    </template>
+                  </bx-button>
+                </template>
+              </bx-template-editor>
             </div>
 
         </div>
-    `;let n=this;(0,t.nextTick)(()=>{n.destroyed||(n.app=(0,t.createApp)({components:{BxTemplateEditor:HF,BxSpin:Gv},setup(){let{createPopup:e}=Nx();return{bridge:{async handleUpload({blob:e,context:t,width:r,height:i,name:a,onProgress:o}){let s=await lC(e),c=s.width/s.height,l=r/i,u,d;c>l?d=i:u=r;let f=await new Promise((t,n)=>{new wi.default(e,{maxWidth:u,maxHeight:d,checkOrientation:!0,quality:.95,success(e){t(e)},error(){t(e)}})}),{url:p,key:m}=await sV(n.apiBaseUrl.value,n.templateId.value,t,f,a,(e,t)=>{o(e/t)}),h=p;if(!h)throw Error(`No public variant`);return{width:r,height:i,key:m,name:`Session Image #${m}`,src:h}},async handleSocialShare(e,t,n,r){return{status:`error`,message:`Social share failed`}}},templateName:n.templateName,editorRef:n.editorRef,campaignId:n.campaignId,campaign:n.campaign,allowPanAndZoom:n.allowPanAndZoom,templateId:n.templateId,serial:n.serial,preview:n.preview,apiBaseUrl:n.apiBaseUrl,data:n.data,bxCoreVersion:n.bxCoreVersion,bxThemeStyleVars:n.bxThemeStyleVars,stripeEnv:n.stripeEnv,remoteVideoRenderBaseUrl:n.remoteVideoRenderBaseUrl,exportOptions:(0,t.computed)(()=>{if(n.campaign.value)return n.campaign.value.config.export}),branding:n.branding,ready:(0,t.ref)(!1),watermark:!1,bearerToken:void 0,finalPassword:void 0,VITE_STUDIO_API_URL:n.apiBaseUrl.value,VITE_STRIPE_ENV:n.stripeEnv.value,enforceServerSideRendering:!1,enforceVideoServerSideRendering:!1}}}),n.app.mount(`#${this.id}`))})}setVariable(e,t){this.data.value||(this.data.value={}),this.data.value[e]=t}setData(e,t=!1){this.data.value=t?e:{...this.data.value,...e}}getTransform(){return this.editorRef.value?.templateViewRef?.transform}setTransform(e,t,n,r){let i=this.editorRef.value?.templateViewRef;i&&(i.transform={scale:e,translateX:t,translateY:n,rotate:r})}applyTransform(e,t,n){this.editorRef.value?.templateViewRef?.zoompinchRef?.applyTransform(e,t,n)}isMultiFrame(){return this.editorRef.value?.templateViewRef?.isMultiFrame}getCenteredFrame(){return this.editorRef.value?.templateViewRef?.currentlyFocusedFrame}centerFrame(e,t){this.editorRef.value?.templateViewRef?.focusFrame(e,t)}isReady(){return!!this.editorRef.value?.templateViewRef?.bxLiveTemplateRef?.ready}};async function dV(e,t,n,r,i){let a=0;for(;a<r;){try{let r=await fetch(`${e}/api/public/campaign?${new URLSearchParams({env:n,hostname:`template.bluepic.io`,slug:t.toString()})}`,{method:`GET`});if(!r.ok)throw Error(`Campaign fetch failed with status ${r.status}`);return await r.json()}catch(e){if(console.error(`[BluepicEmbed] campaign fetch attempt ${a+1} failed`,e),a<r-1)await new Promise(e=>setTimeout(e,i));else throw e}a++}throw Error(`Unknown error in fetchCampaignWithRetries`)}var fV=async()=>{let e=document.querySelectorAll(`.bluepic-embed[data-campaign-id]`);for(let t of e){let e=t.getAttribute(`data-campaign-id`);if(!e)continue;let n=t.getAttribute(`data-template-id`)??void 0,r=t.getAttribute(`data-stripe-env`)===`dev`?`dev`:`prod`,i=t.getAttribute(`data-init-data`),a=t.getAttribute(`data-api-base-url`)??`https://api.bluepic.io`,o=t.getAttribute(`data-remote-video-render-base-url`)??void 0,s=t.getAttribute(`data-bx-core-version`)??void 0,c=t.getAttribute(`data-theme`)??`auto`;new uV(t,e,{templateId:n,initData:i?JSON.parse(i):void 0,apiBaseUrl:a,remoteVideoRenderBaseUrl:o,bxCoreVersion:s,stripeEnv:r,theme:c})}};window.addEventListener(`load`,fV),window.BluepicEmbed=uV;var pV=`bluepic-campaign-popup-style`,mV=`
+    `;let n=this;(0,t.nextTick)(()=>{n.destroyed||(n.app=(0,t.createApp)({components:{BxTemplateEditor:HF,BxSpin:Gv,BxButton:Jv,BxIcon:vb,CloseOutline:My},setup(){let{createPopup:e}=Nx();return{bridge:{async handleUpload({blob:e,context:t,width:r,height:i,name:a,onProgress:o}){let s=await lC(e),c=s.width/s.height,l=r/i,u,d;c>l?d=i:u=r;let f=await new Promise((t,n)=>{new wi.default(e,{maxWidth:u,maxHeight:d,checkOrientation:!0,quality:.95,success(e){t(e)},error(){t(e)}})}),{url:p,key:m}=await sV(n.apiBaseUrl.value,n.templateId.value,t,f,a,(e,t)=>{o(e/t)}),h=p;if(!h)throw Error(`No public variant`);return{width:r,height:i,key:m,name:`Session Image #${m}`,src:h}},async handleSocialShare(e,t,n,r){return{status:`error`,message:`Social share failed`}}},templateName:n.templateName,editorRef:n.editorRef,campaignId:n.campaignId,campaign:n.campaign,allowPanAndZoom:n.allowPanAndZoom,templateId:n.templateId,serial:n.serial,preview:n.preview,apiBaseUrl:n.apiBaseUrl,data:n.data,bxCoreVersion:n.bxCoreVersion,bxThemeStyleVars:n.bxThemeStyleVars,stripeEnv:n.stripeEnv,remoteVideoRenderBaseUrl:n.remoteVideoRenderBaseUrl,exportOptions:(0,t.computed)(()=>{if(n.campaign.value)return n.campaign.value.config.export}),branding:n.branding,ready:(0,t.ref)(!1),watermark:!1,bearerToken:void 0,finalPassword:void 0,VITE_STUDIO_API_URL:n.apiBaseUrl.value,VITE_STRIPE_ENV:n.stripeEnv.value,enforceServerSideRendering:!1,enforceVideoServerSideRendering:!1,onClose:n.onClose}}}),n.app.mount(`#${this.id}`))})}setVariable(e,t){this.data.value||(this.data.value={}),this.data.value[e]=t}setData(e,t=!1){this.data.value=t?e:{...this.data.value,...e}}getTransform(){return this.editorRef.value?.templateViewRef?.transform}setTransform(e,t,n,r){let i=this.editorRef.value?.templateViewRef;i&&(i.transform={scale:e,translateX:t,translateY:n,rotate:r})}applyTransform(e,t,n){this.editorRef.value?.templateViewRef?.zoompinchRef?.applyTransform(e,t,n)}isMultiFrame(){return this.editorRef.value?.templateViewRef?.isMultiFrame}getCenteredFrame(){return this.editorRef.value?.templateViewRef?.currentlyFocusedFrame}centerFrame(e,t){this.editorRef.value?.templateViewRef?.focusFrame(e,t)}isReady(){return!!this.editorRef.value?.templateViewRef?.bxLiveTemplateRef?.ready}};async function dV(e,t,n,r,i){let a=0;for(;a<r;){try{let r=await fetch(`${e}/api/public/campaign?${new URLSearchParams({env:n,hostname:`template.bluepic.io`,slug:t.toString()})}`,{method:`GET`});if(!r.ok)throw Error(`Campaign fetch failed with status ${r.status}`);return await r.json()}catch(e){if(console.error(`[BluepicEmbed] campaign fetch attempt ${a+1} failed`,e),a<r-1)await new Promise(e=>setTimeout(e,i));else throw e}a++}throw Error(`Unknown error in fetchCampaignWithRetries`)}var fV=async()=>{let e=document.querySelectorAll(`.bluepic-embed[data-campaign-id]`);for(let t of e){let e=t.getAttribute(`data-campaign-id`);if(!e)continue;let n=t.getAttribute(`data-template-id`)??void 0,r=t.getAttribute(`data-stripe-env`)===`dev`?`dev`:`prod`,i=t.getAttribute(`data-init-data`),a=t.getAttribute(`data-api-base-url`)??`https://api.bluepic.io`,o=t.getAttribute(`data-remote-video-render-base-url`)??void 0,s=t.getAttribute(`data-bx-core-version`)??void 0,c=t.getAttribute(`data-theme`)??`auto`;new uV(t,e,{templateId:n,initData:i?JSON.parse(i):void 0,apiBaseUrl:a,remoteVideoRenderBaseUrl:o,bxCoreVersion:s,stripeEnv:r,theme:c})}};window.addEventListener(`load`,fV),window.BluepicEmbed=uV;var pV=`bluepic-campaign-popup-style`,mV=`
 .bluepic-campaign-popup-stage {
   width: min(1200px, calc(100vw - 48px));
-  height: min(820px, calc(100vh - 140px));
+  height: min(820px, calc(100vh - 64px));
   display: flex;
 }
 .bluepic-campaign-popup-stage > div { flex: 1; min-width: 0; min-height: 0; }
 @media (max-width: 640px) {
-  .bluepic-campaign-popup-stage { width: calc(100vw - 16px); height: calc(100vh - 110px); }
+  .bluepic-campaign-popup-stage { width: calc(100vw - 16px); height: calc(100vh - 32px); }
 }
-`;function hV(e){if(!document.getElementById(pV)){let e=document.createElement(`style`);e.id=pV,e.textContent=mV,document.head.appendChild(e)}let n,r=(0,t.defineComponent)({name:`BluepicCampaignPopupStage`,setup(){let r=(0,t.ref)();return(0,t.onMounted)(()=>{r.value&&(n=new uV(r.value,e.campaignId,{templateId:e.templateId,initData:e.data,theme:e.theme,apiBaseUrl:e.apiBaseUrl??`https://api.bluepic.io`,stripeEnv:e.stripeEnv}))}),(0,t.onBeforeUnmount)(()=>n?.destroy()),()=>(0,t.h)(`div`,{class:`bluepic-campaign-popup-stage`},[(0,t.h)(`div`,{ref:r})])}}),i=Mx({type:e.type??`frame`,title:e.title,draggable:!1,customClasses:[`bluepic-campaign-popup`],content:()=>(0,t.h)(r),onClose:e.onClose});return{close:()=>i.close(),get embed(){return n}}}if(typeof window<`u`){let e=window;e.Bluepic={...e.Bluepic??{},openPopup:hV,Embed:uV}}var gV={class:`user-info`},_V={class:`user-content`},vV={key:0,class:`user-name`},yV={key:1,class:`user-email`},bV={key:0,class:`user-extra`},xV={class:`actions`},SV=W((0,t.defineComponent)({__name:`UserInfo`,props:{user:{},showSettings:{type:Boolean,default:!1}},emits:[`logout`,`settings`],setup(e,{emit:n}){let r=n,i=(0,t.useSlots)();return(n,a)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,gV,[(0,t.createElementVNode)(`main`,null,[(0,t.createVNode)(wz,{user:e.user,width:40,height:40},null,8,[`user`]),(0,t.createElementVNode)(`div`,_V,[e.user.name?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,vV,(0,t.toDisplayString)(e.user.name),1)):(0,t.createCommentVNode)(``,!0),e.user.email?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,yV,(0,t.toDisplayString)(e.user.email),1)):(0,t.createCommentVNode)(``,!0)])]),i.default?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,bV,[(0,t.renderSlot)(n.$slots,`default`,{},void 0,!0)])):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`footer`,null,[(0,t.createElementVNode)(`div`,xV,[e.showSettings?((0,t.openBlock)(),(0,t.createBlock)(Jv,{key:0,size:`medium`,onClick:a[0]||=e=>r(`settings`)},{icon:(0,t.withCtx)(()=>[(0,t.createVNode)(vb,null,{default:(0,t.withCtx)(()=>[(0,t.createVNode)((0,t.unref)(Bte))]),_:1})]),default:(0,t.withCtx)(()=>[a[2]||=(0,t.createTextVNode)(` Settings `,-1)]),_:1})):(0,t.createCommentVNode)(``,!0),(0,t.createVNode)(Jv,{size:`medium`,onClick:a[1]||=e=>r(`logout`)},{icon:(0,t.withCtx)(()=>[(0,t.createVNode)(vb,null,{default:(0,t.withCtx)(()=>[(0,t.createVNode)((0,t.unref)(ub))]),_:1})]),default:(0,t.withCtx)(()=>[a[3]||=(0,t.createTextVNode)(` Logout `,-1)]),_:1})])])]))}}),[[`__scopeId`,`data-v-8e175b2d`]]),CV={class:`category-tabs`},wV={class:`tabs-wrapper`},TV=[`onClick`],EV=W((0,t.defineComponent)({__name:`Tabs`,props:(0,t.mergeModels)({tabs:{}},{activeTab:{required:!0},activeTabModifiers:{}}),emits:(0,t.mergeModels)([`click:category`],[`update:activeTab`]),setup(e,{emit:n}){let r=n,i=(0,t.useModel)(e,`activeTab`);function a(e){i.value=e,r(`click:category`,e)}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,CV,[(0,t.createElementVNode)(`div`,wV,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.tabs,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{key:e,class:(0,t.normalizeClass)({active:e===i.value}),onClick:t=>a(e)},[(0,t.createElementVNode)(`span`,null,(0,t.toDisplayString)(e),1)],10,TV))),128))])]))}}),[[`__scopeId`,`data-v-a1d3c812`]]),DV=[`A0`,`A1`,`A2`,`A3`,`A4`,`A5`,`A6`,`A7`,`A8`,`A9`,`A10`],OV={w:841,h:1189};function kV(){let e=[{w:OV.w,h:OV.h}];for(let t=1;t<=10;t++){let n=e[t-1],r=Math.round(n.h/2),i=n.w,a=r<=i?{w:r,h:i}:{w:i,h:r};e.push(a)}let t={};return DV.forEach((n,r)=>t[n]=e[r]),t}var AV=kV(),jV=25.4;function MV(e){return e/jV}function NV(e,t){return e*t}function PV(e,t){return e/t*jV}function FV(e,t){let n=AV[e],r=MV(n.w),i=MV(n.h),a=NV(r,t),o=NV(i,t);return{widthPx:Math.round(a),heightPx:Math.round(o),widthPxExact:a,heightPxExact:o,aspect:n.h/n.w,sizeMm:{w:n.w,h:n.h}}}function IV(e,t,n,r=2){let i=e>t,[a,o]=e<=t?[e,t]:[t,e],s=PV(a,n),c=PV(o,n),l=null;for(let e of DV){let t=AV[e],n=s-t.w,i=c-t.h;if(Math.abs(n)<=r&&Math.abs(i)<=r){let r=Math.abs(n)+Math.abs(i);(!l||r<l.score)&&(l={level:e,score:r,delta:{dw:n,dh:i},iso:t})}}if(!l)return null;let u=c/s,d=Math.abs(u/Math.SQRT2-1);return{level:l.level,matchedOrientation:i?`landscape`:`portrait`,measuredMm:{w:s,h:c},isoMm:{w:l.iso.w,h:l.iso.h},deltaMm:l.delta,aspectError:d}}function LV(e){let t=window.getSelection();if(!t)throw Error(`No selection descriptor`);if(!t.anchorNode)throw Error(`No anchor node`);if(!t.focusNode)throw Error(`No focus node`);if(t.anchorNode.textContent===null)throw Error(`Anchor node's text content: null`);if(t.focusNode.textContent===null)throw Error(`Focus node's text content: null`);let n=BV(e,e=>e===t.anchorNode),r=BV(e,e=>e===t.focusNode),i=n.length+t.anchorOffset;return{start:i,length:r.length+t.focusOffset-i}}function RV(e){let n=(0,t.ref)(null);function r(){let t=document.getSelection();if(e.value&&t&&t.rangeCount>0){let r=t.getRangeAt(0);if(e.value.contains(r.commonAncestorContainer))try{n.value=LV(e.value)}catch(e){console.error(`Failed to get selection`,e),n.value=null}}}return document.addEventListener(`selectionchange`,r),(0,t.onUnmounted)(()=>{document.removeEventListener(`selectionchange`,r)}),n}function zV({text:e,format:t},...n){return{text:e.slice(...n),format:t}}function BV(e,t){let n=document.createTreeWalker(e),r=n.nextNode(),i=``;for(;r;){if(t(r))return i;let e=n.nextNode();if(r.nodeType===Node.TEXT_NODE)i+=r.textContent??``;else if(r.nodeType===Node.ELEMENT_NODE){let e=r;(e.tagName===`BR`||e.tagName===`DIV`&&!i.endsWith(`
+/* Lean: no popup header (the editor's own toolbar carries the close button), no toolbar fill. */
+.bluepic-campaign-popup .popup-content > header { display: none !important; }
+.bluepic-campaign-popup .bx-template-editor > header { background-color: transparent !important; }
+.bluepic-campaign-popup .bluepic-app-wrapper { background: transparent !important; }
+`;function hV(e){if(!document.getElementById(pV)){let e=document.createElement(`style`);e.id=pV,e.textContent=mV,document.head.appendChild(e)}let n,r=(0,t.defineComponent)({name:`BluepicCampaignPopupStage`,setup(){let r=(0,t.ref)();return(0,t.onMounted)(()=>{r.value&&(n=new uV(r.value,e.campaignId,{onClose:()=>i.close(),templateId:e.templateId,initData:e.data,theme:e.theme,apiBaseUrl:e.apiBaseUrl??`https://api.bluepic.io`,stripeEnv:e.stripeEnv}))}),(0,t.onBeforeUnmount)(()=>n?.destroy()),()=>(0,t.h)(`div`,{class:`bluepic-campaign-popup-stage`},[(0,t.h)(`div`,{ref:r})])}}),i=Mx({type:e.type??`frame`,title:e.title,draggable:!1,transculent:!0,closeable:!1,customClasses:[`bluepic-campaign-popup`],content:()=>(0,t.h)(r),onClose:e.onClose});return{close:()=>i.close(),get embed(){return n}}}if(typeof window<`u`){let e=window;e.Bluepic={...e.Bluepic??{},openPopup:hV,Embed:uV}}var gV={class:`user-info`},_V={class:`user-content`},vV={key:0,class:`user-name`},yV={key:1,class:`user-email`},bV={key:0,class:`user-extra`},xV={class:`actions`},SV=W((0,t.defineComponent)({__name:`UserInfo`,props:{user:{},showSettings:{type:Boolean,default:!1}},emits:[`logout`,`settings`],setup(e,{emit:n}){let r=n,i=(0,t.useSlots)();return(n,a)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,gV,[(0,t.createElementVNode)(`main`,null,[(0,t.createVNode)(wz,{user:e.user,width:40,height:40},null,8,[`user`]),(0,t.createElementVNode)(`div`,_V,[e.user.name?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,vV,(0,t.toDisplayString)(e.user.name),1)):(0,t.createCommentVNode)(``,!0),e.user.email?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,yV,(0,t.toDisplayString)(e.user.email),1)):(0,t.createCommentVNode)(``,!0)])]),i.default?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,bV,[(0,t.renderSlot)(n.$slots,`default`,{},void 0,!0)])):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`footer`,null,[(0,t.createElementVNode)(`div`,xV,[e.showSettings?((0,t.openBlock)(),(0,t.createBlock)(Jv,{key:0,size:`medium`,onClick:a[0]||=e=>r(`settings`)},{icon:(0,t.withCtx)(()=>[(0,t.createVNode)(vb,null,{default:(0,t.withCtx)(()=>[(0,t.createVNode)((0,t.unref)(Bte))]),_:1})]),default:(0,t.withCtx)(()=>[a[2]||=(0,t.createTextVNode)(` Settings `,-1)]),_:1})):(0,t.createCommentVNode)(``,!0),(0,t.createVNode)(Jv,{size:`medium`,onClick:a[1]||=e=>r(`logout`)},{icon:(0,t.withCtx)(()=>[(0,t.createVNode)(vb,null,{default:(0,t.withCtx)(()=>[(0,t.createVNode)((0,t.unref)(ub))]),_:1})]),default:(0,t.withCtx)(()=>[a[3]||=(0,t.createTextVNode)(` Logout `,-1)]),_:1})])])]))}}),[[`__scopeId`,`data-v-8e175b2d`]]),CV={class:`category-tabs`},wV={class:`tabs-wrapper`},TV=[`onClick`],EV=W((0,t.defineComponent)({__name:`Tabs`,props:(0,t.mergeModels)({tabs:{}},{activeTab:{required:!0},activeTabModifiers:{}}),emits:(0,t.mergeModels)([`click:category`],[`update:activeTab`]),setup(e,{emit:n}){let r=n,i=(0,t.useModel)(e,`activeTab`);function a(e){i.value=e,r(`click:category`,e)}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,CV,[(0,t.createElementVNode)(`div`,wV,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.tabs,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{key:e,class:(0,t.normalizeClass)({active:e===i.value}),onClick:t=>a(e)},[(0,t.createElementVNode)(`span`,null,(0,t.toDisplayString)(e),1)],10,TV))),128))])]))}}),[[`__scopeId`,`data-v-a1d3c812`]]),DV=[`A0`,`A1`,`A2`,`A3`,`A4`,`A5`,`A6`,`A7`,`A8`,`A9`,`A10`],OV={w:841,h:1189};function kV(){let e=[{w:OV.w,h:OV.h}];for(let t=1;t<=10;t++){let n=e[t-1],r=Math.round(n.h/2),i=n.w,a=r<=i?{w:r,h:i}:{w:i,h:r};e.push(a)}let t={};return DV.forEach((n,r)=>t[n]=e[r]),t}var AV=kV(),jV=25.4;function MV(e){return e/jV}function NV(e,t){return e*t}function PV(e,t){return e/t*jV}function FV(e,t){let n=AV[e],r=MV(n.w),i=MV(n.h),a=NV(r,t),o=NV(i,t);return{widthPx:Math.round(a),heightPx:Math.round(o),widthPxExact:a,heightPxExact:o,aspect:n.h/n.w,sizeMm:{w:n.w,h:n.h}}}function IV(e,t,n,r=2){let i=e>t,[a,o]=e<=t?[e,t]:[t,e],s=PV(a,n),c=PV(o,n),l=null;for(let e of DV){let t=AV[e],n=s-t.w,i=c-t.h;if(Math.abs(n)<=r&&Math.abs(i)<=r){let r=Math.abs(n)+Math.abs(i);(!l||r<l.score)&&(l={level:e,score:r,delta:{dw:n,dh:i},iso:t})}}if(!l)return null;let u=c/s,d=Math.abs(u/Math.SQRT2-1);return{level:l.level,matchedOrientation:i?`landscape`:`portrait`,measuredMm:{w:s,h:c},isoMm:{w:l.iso.w,h:l.iso.h},deltaMm:l.delta,aspectError:d}}function LV(e){let t=window.getSelection();if(!t)throw Error(`No selection descriptor`);if(!t.anchorNode)throw Error(`No anchor node`);if(!t.focusNode)throw Error(`No focus node`);if(t.anchorNode.textContent===null)throw Error(`Anchor node's text content: null`);if(t.focusNode.textContent===null)throw Error(`Focus node's text content: null`);let n=BV(e,e=>e===t.anchorNode),r=BV(e,e=>e===t.focusNode),i=n.length+t.anchorOffset;return{start:i,length:r.length+t.focusOffset-i}}function RV(e){let n=(0,t.ref)(null);function r(){let t=document.getSelection();if(e.value&&t&&t.rangeCount>0){let r=t.getRangeAt(0);if(e.value.contains(r.commonAncestorContainer))try{n.value=LV(e.value)}catch(e){console.error(`Failed to get selection`,e),n.value=null}}}return document.addEventListener(`selectionchange`,r),(0,t.onUnmounted)(()=>{document.removeEventListener(`selectionchange`,r)}),n}function zV({text:e,format:t},...n){return{text:e.slice(...n),format:t}}function BV(e,t){let n=document.createTreeWalker(e),r=n.nextNode(),i=``;for(;r;){if(t(r))return i;let e=n.nextNode();if(r.nodeType===Node.TEXT_NODE)i+=r.textContent??``;else if(r.nodeType===Node.ELEMENT_NODE){let e=r;(e.tagName===`BR`||e.tagName===`DIV`&&!i.endsWith(`
 `)&&i!==``)&&(i+=`
 `)}r=e}return i.endsWith(`
 `)&&(i=i.slice(0,-1)),i}window.collectContentEditableText=BV;function VV(e,t){let n=``;function r(e){if(!e)return``;let n=``,i=e.previousSibling;for(;i;){if(i.nodeType===Node.TEXT_NODE)n=i.textContent+n;else if(i.nodeType===Node.ELEMENT_NODE){let e=i;n=e.tagName===`BR`?`

package/dist/bluepic-embed.umd.js

@@ -2135,7 +2135,7 @@ https://github.com/highlightjs/highlight.js/issues/2277`),i=e,r=t),n===void 0&&(
   background-color: #fff;
   color: #111111;
 }
-`;async function aV(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 oV({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 sV(e,t,n,r,i,a){let o=`${e}/api/public/temp-image?${new URLSearchParams({key:(0,B_.default)({field:n.field,templateId:t,timestamp:Date.now()})})}`,s=new FormData;s.append(`file`,r,i);let c=await oV({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 cV=`https://bx-studio-api-production.bluepic.workers.dev`,lV=`https://render.bluepic.io`,uV=class extends EventTarget{element;apiBaseUrl=(0,t.ref)(cV);remoteVideoRenderBaseUrl=(0,t.ref)(lV);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()}`;app;destroyed=!1;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=eV(`#${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 dV(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(WB(s))n=eV(`#${this.id}`,s.preset??`dark`,s);else if(r.config.customStyle)n=eV(void 0,pS(r?.config.customStyle[`editor-view-background-color`]).isDark()?`dark`:`light`,{...r?.config.customStyle});else{let e=pS(r?.config.customStyle?.[`editor-view-background-color`]).isDark();n=eV(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`))}destroy(){this.destroyed=!0,this.app?.unmount(),this.app=void 0,this.element.innerHTML=``}mount(){getComputedStyle(this.element).boxSizing===`content-box`&&(this.element.style.boxSizing=`border-box`);let e=document.createElement(`style`);e.textContent=`
+`;async function aV(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 oV({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 sV(e,t,n,r,i,a){let o=`${e}/api/public/temp-image?${new URLSearchParams({key:(0,B_.default)({field:n.field,templateId:t,timestamp:Date.now()})})}`,s=new FormData;s.append(`file`,r,i);let c=await oV({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 cV=`https://bx-studio-api-production.bluepic.workers.dev`,lV=`https://render.bluepic.io`,uV=class extends EventTarget{element;apiBaseUrl=(0,t.ref)(cV);remoteVideoRenderBaseUrl=(0,t.ref)(lV);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()}`;app;destroyed=!1;onClose;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.onClose=r?.onClose,this.mount(),this.bxThemeStyleVars=eV(`#${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 dV(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(WB(s))n=eV(`#${this.id}`,s.preset??`dark`,s);else if(r.config.customStyle)n=eV(void 0,pS(r?.config.customStyle[`editor-view-background-color`]).isDark()?`dark`:`light`,{...r?.config.customStyle});else{let e=pS(r?.config.customStyle?.[`editor-view-background-color`]).isDark();n=eV(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`))}destroy(){this.destroyed=!0,this.app?.unmount(),this.app=void 0,this.element.innerHTML=``}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%;
@@ -2202,21 +2202,33 @@ https://github.com/highlightjs/highlight.js/issues/2277`),i=e,r=t),n===void 0&&(
                 :env="VITE_STRIPE_ENV"
                 :enforce-server-side-rendering="enforceServerSideRendering"
                 :enforce-video-server-side-rendering="enforceVideoServerSideRendering"
-              />
+              >
+                <template v-if="onClose" #navbar-right>
+                  <bx-button secondary aria-label="Close" @click="onClose()">
+                    <template #icon>
+                      <bx-icon><close-outline /></bx-icon>
+                    </template>
+                  </bx-button>
+                </template>
+              </bx-template-editor>
             </div>
 
         </div>
-    `;let n=this;(0,t.nextTick)(()=>{n.destroyed||(n.app=(0,t.createApp)({components:{BxTemplateEditor:HF,BxSpin:Gv},setup(){let{createPopup:e}=Nx();return{bridge:{async handleUpload({blob:e,context:t,width:r,height:i,name:a,onProgress:o}){let s=await lC(e),c=s.width/s.height,l=r/i,u,d;c>l?d=i:u=r;let f=await new Promise((t,n)=>{new wi.default(e,{maxWidth:u,maxHeight:d,checkOrientation:!0,quality:.95,success(e){t(e)},error(){t(e)}})}),{url:p,key:m}=await sV(n.apiBaseUrl.value,n.templateId.value,t,f,a,(e,t)=>{o(e/t)}),h=p;if(!h)throw Error(`No public variant`);return{width:r,height:i,key:m,name:`Session Image #${m}`,src:h}},async handleSocialShare(e,t,n,r){return{status:`error`,message:`Social share failed`}}},templateName:n.templateName,editorRef:n.editorRef,campaignId:n.campaignId,campaign:n.campaign,allowPanAndZoom:n.allowPanAndZoom,templateId:n.templateId,serial:n.serial,preview:n.preview,apiBaseUrl:n.apiBaseUrl,data:n.data,bxCoreVersion:n.bxCoreVersion,bxThemeStyleVars:n.bxThemeStyleVars,stripeEnv:n.stripeEnv,remoteVideoRenderBaseUrl:n.remoteVideoRenderBaseUrl,exportOptions:(0,t.computed)(()=>{if(n.campaign.value)return n.campaign.value.config.export}),branding:n.branding,ready:(0,t.ref)(!1),watermark:!1,bearerToken:void 0,finalPassword:void 0,VITE_STUDIO_API_URL:n.apiBaseUrl.value,VITE_STRIPE_ENV:n.stripeEnv.value,enforceServerSideRendering:!1,enforceVideoServerSideRendering:!1}}}),n.app.mount(`#${this.id}`))})}setVariable(e,t){this.data.value||(this.data.value={}),this.data.value[e]=t}setData(e,t=!1){this.data.value=t?e:{...this.data.value,...e}}getTransform(){return this.editorRef.value?.templateViewRef?.transform}setTransform(e,t,n,r){let i=this.editorRef.value?.templateViewRef;i&&(i.transform={scale:e,translateX:t,translateY:n,rotate:r})}applyTransform(e,t,n){this.editorRef.value?.templateViewRef?.zoompinchRef?.applyTransform(e,t,n)}isMultiFrame(){return this.editorRef.value?.templateViewRef?.isMultiFrame}getCenteredFrame(){return this.editorRef.value?.templateViewRef?.currentlyFocusedFrame}centerFrame(e,t){this.editorRef.value?.templateViewRef?.focusFrame(e,t)}isReady(){return!!this.editorRef.value?.templateViewRef?.bxLiveTemplateRef?.ready}};async function dV(e,t,n,r,i){let a=0;for(;a<r;){try{let r=await fetch(`${e}/api/public/campaign?${new URLSearchParams({env:n,hostname:`template.bluepic.io`,slug:t.toString()})}`,{method:`GET`});if(!r.ok)throw Error(`Campaign fetch failed with status ${r.status}`);return await r.json()}catch(e){if(console.error(`[BluepicEmbed] campaign fetch attempt ${a+1} failed`,e),a<r-1)await new Promise(e=>setTimeout(e,i));else throw e}a++}throw Error(`Unknown error in fetchCampaignWithRetries`)}var fV=async()=>{let e=document.querySelectorAll(`.bluepic-embed[data-campaign-id]`);for(let t of e){let e=t.getAttribute(`data-campaign-id`);if(!e)continue;let n=t.getAttribute(`data-template-id`)??void 0,r=t.getAttribute(`data-stripe-env`)===`dev`?`dev`:`prod`,i=t.getAttribute(`data-init-data`),a=t.getAttribute(`data-api-base-url`)??`https://api.bluepic.io`,o=t.getAttribute(`data-remote-video-render-base-url`)??void 0,s=t.getAttribute(`data-bx-core-version`)??void 0,c=t.getAttribute(`data-theme`)??`auto`;new uV(t,e,{templateId:n,initData:i?JSON.parse(i):void 0,apiBaseUrl:a,remoteVideoRenderBaseUrl:o,bxCoreVersion:s,stripeEnv:r,theme:c})}};window.addEventListener(`load`,fV),window.BluepicEmbed=uV;var pV=`bluepic-campaign-popup-style`,mV=`
+    `;let n=this;(0,t.nextTick)(()=>{n.destroyed||(n.app=(0,t.createApp)({components:{BxTemplateEditor:HF,BxSpin:Gv,BxButton:Jv,BxIcon:vb,CloseOutline:My},setup(){let{createPopup:e}=Nx();return{bridge:{async handleUpload({blob:e,context:t,width:r,height:i,name:a,onProgress:o}){let s=await lC(e),c=s.width/s.height,l=r/i,u,d;c>l?d=i:u=r;let f=await new Promise((t,n)=>{new wi.default(e,{maxWidth:u,maxHeight:d,checkOrientation:!0,quality:.95,success(e){t(e)},error(){t(e)}})}),{url:p,key:m}=await sV(n.apiBaseUrl.value,n.templateId.value,t,f,a,(e,t)=>{o(e/t)}),h=p;if(!h)throw Error(`No public variant`);return{width:r,height:i,key:m,name:`Session Image #${m}`,src:h}},async handleSocialShare(e,t,n,r){return{status:`error`,message:`Social share failed`}}},templateName:n.templateName,editorRef:n.editorRef,campaignId:n.campaignId,campaign:n.campaign,allowPanAndZoom:n.allowPanAndZoom,templateId:n.templateId,serial:n.serial,preview:n.preview,apiBaseUrl:n.apiBaseUrl,data:n.data,bxCoreVersion:n.bxCoreVersion,bxThemeStyleVars:n.bxThemeStyleVars,stripeEnv:n.stripeEnv,remoteVideoRenderBaseUrl:n.remoteVideoRenderBaseUrl,exportOptions:(0,t.computed)(()=>{if(n.campaign.value)return n.campaign.value.config.export}),branding:n.branding,ready:(0,t.ref)(!1),watermark:!1,bearerToken:void 0,finalPassword:void 0,VITE_STUDIO_API_URL:n.apiBaseUrl.value,VITE_STRIPE_ENV:n.stripeEnv.value,enforceServerSideRendering:!1,enforceVideoServerSideRendering:!1,onClose:n.onClose}}}),n.app.mount(`#${this.id}`))})}setVariable(e,t){this.data.value||(this.data.value={}),this.data.value[e]=t}setData(e,t=!1){this.data.value=t?e:{...this.data.value,...e}}getTransform(){return this.editorRef.value?.templateViewRef?.transform}setTransform(e,t,n,r){let i=this.editorRef.value?.templateViewRef;i&&(i.transform={scale:e,translateX:t,translateY:n,rotate:r})}applyTransform(e,t,n){this.editorRef.value?.templateViewRef?.zoompinchRef?.applyTransform(e,t,n)}isMultiFrame(){return this.editorRef.value?.templateViewRef?.isMultiFrame}getCenteredFrame(){return this.editorRef.value?.templateViewRef?.currentlyFocusedFrame}centerFrame(e,t){this.editorRef.value?.templateViewRef?.focusFrame(e,t)}isReady(){return!!this.editorRef.value?.templateViewRef?.bxLiveTemplateRef?.ready}};async function dV(e,t,n,r,i){let a=0;for(;a<r;){try{let r=await fetch(`${e}/api/public/campaign?${new URLSearchParams({env:n,hostname:`template.bluepic.io`,slug:t.toString()})}`,{method:`GET`});if(!r.ok)throw Error(`Campaign fetch failed with status ${r.status}`);return await r.json()}catch(e){if(console.error(`[BluepicEmbed] campaign fetch attempt ${a+1} failed`,e),a<r-1)await new Promise(e=>setTimeout(e,i));else throw e}a++}throw Error(`Unknown error in fetchCampaignWithRetries`)}var fV=async()=>{let e=document.querySelectorAll(`.bluepic-embed[data-campaign-id]`);for(let t of e){let e=t.getAttribute(`data-campaign-id`);if(!e)continue;let n=t.getAttribute(`data-template-id`)??void 0,r=t.getAttribute(`data-stripe-env`)===`dev`?`dev`:`prod`,i=t.getAttribute(`data-init-data`),a=t.getAttribute(`data-api-base-url`)??`https://api.bluepic.io`,o=t.getAttribute(`data-remote-video-render-base-url`)??void 0,s=t.getAttribute(`data-bx-core-version`)??void 0,c=t.getAttribute(`data-theme`)??`auto`;new uV(t,e,{templateId:n,initData:i?JSON.parse(i):void 0,apiBaseUrl:a,remoteVideoRenderBaseUrl:o,bxCoreVersion:s,stripeEnv:r,theme:c})}};window.addEventListener(`load`,fV),window.BluepicEmbed=uV;var pV=`bluepic-campaign-popup-style`,mV=`
 .bluepic-campaign-popup-stage {
   width: min(1200px, calc(100vw - 48px));
-  height: min(820px, calc(100vh - 140px));
+  height: min(820px, calc(100vh - 64px));
   display: flex;
 }
 .bluepic-campaign-popup-stage > div { flex: 1; min-width: 0; min-height: 0; }
 @media (max-width: 640px) {
-  .bluepic-campaign-popup-stage { width: calc(100vw - 16px); height: calc(100vh - 110px); }
+  .bluepic-campaign-popup-stage { width: calc(100vw - 16px); height: calc(100vh - 32px); }
 }
-`;function hV(e){if(!document.getElementById(pV)){let e=document.createElement(`style`);e.id=pV,e.textContent=mV,document.head.appendChild(e)}let n,r=(0,t.defineComponent)({name:`BluepicCampaignPopupStage`,setup(){let r=(0,t.ref)();return(0,t.onMounted)(()=>{r.value&&(n=new uV(r.value,e.campaignId,{templateId:e.templateId,initData:e.data,theme:e.theme,apiBaseUrl:e.apiBaseUrl??`https://api.bluepic.io`,stripeEnv:e.stripeEnv}))}),(0,t.onBeforeUnmount)(()=>n?.destroy()),()=>(0,t.h)(`div`,{class:`bluepic-campaign-popup-stage`},[(0,t.h)(`div`,{ref:r})])}}),i=Mx({type:e.type??`frame`,title:e.title,draggable:!1,customClasses:[`bluepic-campaign-popup`],content:()=>(0,t.h)(r),onClose:e.onClose});return{close:()=>i.close(),get embed(){return n}}}if(typeof window<`u`){let e=window;e.Bluepic={...e.Bluepic??{},openPopup:hV,Embed:uV}}var gV={class:`user-info`},_V={class:`user-content`},vV={key:0,class:`user-name`},yV={key:1,class:`user-email`},bV={key:0,class:`user-extra`},xV={class:`actions`},SV=W((0,t.defineComponent)({__name:`UserInfo`,props:{user:{},showSettings:{type:Boolean,default:!1}},emits:[`logout`,`settings`],setup(e,{emit:n}){let r=n,i=(0,t.useSlots)();return(n,a)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,gV,[(0,t.createElementVNode)(`main`,null,[(0,t.createVNode)(wz,{user:e.user,width:40,height:40},null,8,[`user`]),(0,t.createElementVNode)(`div`,_V,[e.user.name?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,vV,(0,t.toDisplayString)(e.user.name),1)):(0,t.createCommentVNode)(``,!0),e.user.email?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,yV,(0,t.toDisplayString)(e.user.email),1)):(0,t.createCommentVNode)(``,!0)])]),i.default?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,bV,[(0,t.renderSlot)(n.$slots,`default`,{},void 0,!0)])):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`footer`,null,[(0,t.createElementVNode)(`div`,xV,[e.showSettings?((0,t.openBlock)(),(0,t.createBlock)(Jv,{key:0,size:`medium`,onClick:a[0]||=e=>r(`settings`)},{icon:(0,t.withCtx)(()=>[(0,t.createVNode)(vb,null,{default:(0,t.withCtx)(()=>[(0,t.createVNode)((0,t.unref)(Bte))]),_:1})]),default:(0,t.withCtx)(()=>[a[2]||=(0,t.createTextVNode)(` Settings `,-1)]),_:1})):(0,t.createCommentVNode)(``,!0),(0,t.createVNode)(Jv,{size:`medium`,onClick:a[1]||=e=>r(`logout`)},{icon:(0,t.withCtx)(()=>[(0,t.createVNode)(vb,null,{default:(0,t.withCtx)(()=>[(0,t.createVNode)((0,t.unref)(ub))]),_:1})]),default:(0,t.withCtx)(()=>[a[3]||=(0,t.createTextVNode)(` Logout `,-1)]),_:1})])])]))}}),[[`__scopeId`,`data-v-8e175b2d`]]),CV={class:`category-tabs`},wV={class:`tabs-wrapper`},TV=[`onClick`],EV=W((0,t.defineComponent)({__name:`Tabs`,props:(0,t.mergeModels)({tabs:{}},{activeTab:{required:!0},activeTabModifiers:{}}),emits:(0,t.mergeModels)([`click:category`],[`update:activeTab`]),setup(e,{emit:n}){let r=n,i=(0,t.useModel)(e,`activeTab`);function a(e){i.value=e,r(`click:category`,e)}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,CV,[(0,t.createElementVNode)(`div`,wV,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.tabs,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{key:e,class:(0,t.normalizeClass)({active:e===i.value}),onClick:t=>a(e)},[(0,t.createElementVNode)(`span`,null,(0,t.toDisplayString)(e),1)],10,TV))),128))])]))}}),[[`__scopeId`,`data-v-a1d3c812`]]),DV=[`A0`,`A1`,`A2`,`A3`,`A4`,`A5`,`A6`,`A7`,`A8`,`A9`,`A10`],OV={w:841,h:1189};function kV(){let e=[{w:OV.w,h:OV.h}];for(let t=1;t<=10;t++){let n=e[t-1],r=Math.round(n.h/2),i=n.w,a=r<=i?{w:r,h:i}:{w:i,h:r};e.push(a)}let t={};return DV.forEach((n,r)=>t[n]=e[r]),t}var AV=kV(),jV=25.4;function MV(e){return e/jV}function NV(e,t){return e*t}function PV(e,t){return e/t*jV}function FV(e,t){let n=AV[e],r=MV(n.w),i=MV(n.h),a=NV(r,t),o=NV(i,t);return{widthPx:Math.round(a),heightPx:Math.round(o),widthPxExact:a,heightPxExact:o,aspect:n.h/n.w,sizeMm:{w:n.w,h:n.h}}}function IV(e,t,n,r=2){let i=e>t,[a,o]=e<=t?[e,t]:[t,e],s=PV(a,n),c=PV(o,n),l=null;for(let e of DV){let t=AV[e],n=s-t.w,i=c-t.h;if(Math.abs(n)<=r&&Math.abs(i)<=r){let r=Math.abs(n)+Math.abs(i);(!l||r<l.score)&&(l={level:e,score:r,delta:{dw:n,dh:i},iso:t})}}if(!l)return null;let u=c/s,d=Math.abs(u/Math.SQRT2-1);return{level:l.level,matchedOrientation:i?`landscape`:`portrait`,measuredMm:{w:s,h:c},isoMm:{w:l.iso.w,h:l.iso.h},deltaMm:l.delta,aspectError:d}}function LV(e){let t=window.getSelection();if(!t)throw Error(`No selection descriptor`);if(!t.anchorNode)throw Error(`No anchor node`);if(!t.focusNode)throw Error(`No focus node`);if(t.anchorNode.textContent===null)throw Error(`Anchor node's text content: null`);if(t.focusNode.textContent===null)throw Error(`Focus node's text content: null`);let n=BV(e,e=>e===t.anchorNode),r=BV(e,e=>e===t.focusNode),i=n.length+t.anchorOffset;return{start:i,length:r.length+t.focusOffset-i}}function RV(e){let n=(0,t.ref)(null);function r(){let t=document.getSelection();if(e.value&&t&&t.rangeCount>0){let r=t.getRangeAt(0);if(e.value.contains(r.commonAncestorContainer))try{n.value=LV(e.value)}catch(e){console.error(`Failed to get selection`,e),n.value=null}}}return document.addEventListener(`selectionchange`,r),(0,t.onUnmounted)(()=>{document.removeEventListener(`selectionchange`,r)}),n}function zV({text:e,format:t},...n){return{text:e.slice(...n),format:t}}function BV(e,t){let n=document.createTreeWalker(e),r=n.nextNode(),i=``;for(;r;){if(t(r))return i;let e=n.nextNode();if(r.nodeType===Node.TEXT_NODE)i+=r.textContent??``;else if(r.nodeType===Node.ELEMENT_NODE){let e=r;(e.tagName===`BR`||e.tagName===`DIV`&&!i.endsWith(`
+/* Lean: no popup header (the editor's own toolbar carries the close button), no toolbar fill. */
+.bluepic-campaign-popup .popup-content > header { display: none !important; }
+.bluepic-campaign-popup .bx-template-editor > header { background-color: transparent !important; }
+.bluepic-campaign-popup .bluepic-app-wrapper { background: transparent !important; }
+`;function hV(e){if(!document.getElementById(pV)){let e=document.createElement(`style`);e.id=pV,e.textContent=mV,document.head.appendChild(e)}let n,r=(0,t.defineComponent)({name:`BluepicCampaignPopupStage`,setup(){let r=(0,t.ref)();return(0,t.onMounted)(()=>{r.value&&(n=new uV(r.value,e.campaignId,{onClose:()=>i.close(),templateId:e.templateId,initData:e.data,theme:e.theme,apiBaseUrl:e.apiBaseUrl??`https://api.bluepic.io`,stripeEnv:e.stripeEnv}))}),(0,t.onBeforeUnmount)(()=>n?.destroy()),()=>(0,t.h)(`div`,{class:`bluepic-campaign-popup-stage`},[(0,t.h)(`div`,{ref:r})])}}),i=Mx({type:e.type??`frame`,title:e.title,draggable:!1,transculent:!0,closeable:!1,customClasses:[`bluepic-campaign-popup`],content:()=>(0,t.h)(r),onClose:e.onClose});return{close:()=>i.close(),get embed(){return n}}}if(typeof window<`u`){let e=window;e.Bluepic={...e.Bluepic??{},openPopup:hV,Embed:uV}}var gV={class:`user-info`},_V={class:`user-content`},vV={key:0,class:`user-name`},yV={key:1,class:`user-email`},bV={key:0,class:`user-extra`},xV={class:`actions`},SV=W((0,t.defineComponent)({__name:`UserInfo`,props:{user:{},showSettings:{type:Boolean,default:!1}},emits:[`logout`,`settings`],setup(e,{emit:n}){let r=n,i=(0,t.useSlots)();return(n,a)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,gV,[(0,t.createElementVNode)(`main`,null,[(0,t.createVNode)(wz,{user:e.user,width:40,height:40},null,8,[`user`]),(0,t.createElementVNode)(`div`,_V,[e.user.name?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,vV,(0,t.toDisplayString)(e.user.name),1)):(0,t.createCommentVNode)(``,!0),e.user.email?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,yV,(0,t.toDisplayString)(e.user.email),1)):(0,t.createCommentVNode)(``,!0)])]),i.default?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,bV,[(0,t.renderSlot)(n.$slots,`default`,{},void 0,!0)])):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`footer`,null,[(0,t.createElementVNode)(`div`,xV,[e.showSettings?((0,t.openBlock)(),(0,t.createBlock)(Jv,{key:0,size:`medium`,onClick:a[0]||=e=>r(`settings`)},{icon:(0,t.withCtx)(()=>[(0,t.createVNode)(vb,null,{default:(0,t.withCtx)(()=>[(0,t.createVNode)((0,t.unref)(Bte))]),_:1})]),default:(0,t.withCtx)(()=>[a[2]||=(0,t.createTextVNode)(` Settings `,-1)]),_:1})):(0,t.createCommentVNode)(``,!0),(0,t.createVNode)(Jv,{size:`medium`,onClick:a[1]||=e=>r(`logout`)},{icon:(0,t.withCtx)(()=>[(0,t.createVNode)(vb,null,{default:(0,t.withCtx)(()=>[(0,t.createVNode)((0,t.unref)(ub))]),_:1})]),default:(0,t.withCtx)(()=>[a[3]||=(0,t.createTextVNode)(` Logout `,-1)]),_:1})])])]))}}),[[`__scopeId`,`data-v-8e175b2d`]]),CV={class:`category-tabs`},wV={class:`tabs-wrapper`},TV=[`onClick`],EV=W((0,t.defineComponent)({__name:`Tabs`,props:(0,t.mergeModels)({tabs:{}},{activeTab:{required:!0},activeTabModifiers:{}}),emits:(0,t.mergeModels)([`click:category`],[`update:activeTab`]),setup(e,{emit:n}){let r=n,i=(0,t.useModel)(e,`activeTab`);function a(e){i.value=e,r(`click:category`,e)}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,CV,[(0,t.createElementVNode)(`div`,wV,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.tabs,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{key:e,class:(0,t.normalizeClass)({active:e===i.value}),onClick:t=>a(e)},[(0,t.createElementVNode)(`span`,null,(0,t.toDisplayString)(e),1)],10,TV))),128))])]))}}),[[`__scopeId`,`data-v-a1d3c812`]]),DV=[`A0`,`A1`,`A2`,`A3`,`A4`,`A5`,`A6`,`A7`,`A8`,`A9`,`A10`],OV={w:841,h:1189};function kV(){let e=[{w:OV.w,h:OV.h}];for(let t=1;t<=10;t++){let n=e[t-1],r=Math.round(n.h/2),i=n.w,a=r<=i?{w:r,h:i}:{w:i,h:r};e.push(a)}let t={};return DV.forEach((n,r)=>t[n]=e[r]),t}var AV=kV(),jV=25.4;function MV(e){return e/jV}function NV(e,t){return e*t}function PV(e,t){return e/t*jV}function FV(e,t){let n=AV[e],r=MV(n.w),i=MV(n.h),a=NV(r,t),o=NV(i,t);return{widthPx:Math.round(a),heightPx:Math.round(o),widthPxExact:a,heightPxExact:o,aspect:n.h/n.w,sizeMm:{w:n.w,h:n.h}}}function IV(e,t,n,r=2){let i=e>t,[a,o]=e<=t?[e,t]:[t,e],s=PV(a,n),c=PV(o,n),l=null;for(let e of DV){let t=AV[e],n=s-t.w,i=c-t.h;if(Math.abs(n)<=r&&Math.abs(i)<=r){let r=Math.abs(n)+Math.abs(i);(!l||r<l.score)&&(l={level:e,score:r,delta:{dw:n,dh:i},iso:t})}}if(!l)return null;let u=c/s,d=Math.abs(u/Math.SQRT2-1);return{level:l.level,matchedOrientation:i?`landscape`:`portrait`,measuredMm:{w:s,h:c},isoMm:{w:l.iso.w,h:l.iso.h},deltaMm:l.delta,aspectError:d}}function LV(e){let t=window.getSelection();if(!t)throw Error(`No selection descriptor`);if(!t.anchorNode)throw Error(`No anchor node`);if(!t.focusNode)throw Error(`No focus node`);if(t.anchorNode.textContent===null)throw Error(`Anchor node's text content: null`);if(t.focusNode.textContent===null)throw Error(`Focus node's text content: null`);let n=BV(e,e=>e===t.anchorNode),r=BV(e,e=>e===t.focusNode),i=n.length+t.anchorOffset;return{start:i,length:r.length+t.focusOffset-i}}function RV(e){let n=(0,t.ref)(null);function r(){let t=document.getSelection();if(e.value&&t&&t.rangeCount>0){let r=t.getRangeAt(0);if(e.value.contains(r.commonAncestorContainer))try{n.value=LV(e.value)}catch(e){console.error(`Failed to get selection`,e),n.value=null}}}return document.addEventListener(`selectionchange`,r),(0,t.onUnmounted)(()=>{document.removeEventListener(`selectionchange`,r)}),n}function zV({text:e,format:t},...n){return{text:e.slice(...n),format:t}}function BV(e,t){let n=document.createTreeWalker(e),r=n.nextNode(),i=``;for(;r;){if(t(r))return i;let e=n.nextNode();if(r.nodeType===Node.TEXT_NODE)i+=r.textContent??``;else if(r.nodeType===Node.ELEMENT_NODE){let e=r;(e.tagName===`BR`||e.tagName===`DIV`&&!i.endsWith(`
 `)&&i!==``)&&(i+=`
 `)}r=e}return i.endsWith(`
 `)&&(i=i.slice(0,-1)),i}window.collectContentEditableText=BV;function VV(e,t){let n=``;function r(e){if(!e)return``;let n=``,i=e.previousSibling;for(;i;){if(i.nodeType===Node.TEXT_NODE)n=i.textContent+n;else if(i.nodeType===Node.ELEMENT_NODE){let e=i;n=e.tagName===`BR`?`

package/dist/embed/embed.d.ts

@@ -12621,6 +12621,7 @@ export declare class BluepicEmbed extends EventTarget {
     id: string;
     private app?;
     private destroyed;
+    private onClose?;
     constructor(elementOrSelector: string | HTMLElement, campaignId: number | string, opts?: {
         templateId?: string;
         initData?: {
@@ -12635,6 +12636,11 @@ export declare class BluepicEmbed extends EventTarget {
         customThemeVars?: Partial<z.infer<typeof EmbedV2.customStyleSchema>> | ThemeInput;
         bearerToken?: string;
         password?: string;
+        /**
+         * Show a close button in the editor's toolbar, right of Export, and call
+         * this when it is pressed. Used by `openPopup` (the popup has no header).
+         */
+        onClose?: () => void;
     });
     private loadCampaign;
     /** Unmount the editor and free the element (e.g. when its popup closes). */

package/dist/main.cjs

@@ -2121,7 +2121,7 @@ https://github.com/highlightjs/highlight.js/issues/2277`),i=e,r=t),n===void 0&&(
   background-color: #fff;
   color: #111111;
 }
-`;async function Lq(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 Rq({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 zq(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 Rq({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 Bq=`https://bx-studio-api-production.bluepic.workers.dev`,Vq=`https://render.bluepic.io`,Hq=class extends EventTarget{element;apiBaseUrl=(0,t.ref)(Bq);remoteVideoRenderBaseUrl=(0,t.ref)(Vq);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()}`;app;destroyed=!1;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=Mq(`#${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 Uq(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(Sq(s))n=Mq(`#${this.id}`,s.preset??`dark`,s);else if(r.config.customStyle)n=Mq(void 0,XT(r?.config.customStyle[`editor-view-background-color`]).isDark()?`dark`:`light`,{...r?.config.customStyle});else{let e=XT(r?.config.customStyle?.[`editor-view-background-color`]).isDark();n=Mq(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`))}destroy(){this.destroyed=!0,this.app?.unmount(),this.app=void 0,this.element.innerHTML=``}mount(){getComputedStyle(this.element).boxSizing===`content-box`&&(this.element.style.boxSizing=`border-box`);let e=document.createElement(`style`);e.textContent=`
+`;async function Lq(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 Rq({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 zq(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 Rq({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 Bq=`https://bx-studio-api-production.bluepic.workers.dev`,Vq=`https://render.bluepic.io`,Hq=class extends EventTarget{element;apiBaseUrl=(0,t.ref)(Bq);remoteVideoRenderBaseUrl=(0,t.ref)(Vq);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()}`;app;destroyed=!1;onClose;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.onClose=r?.onClose,this.mount(),this.bxThemeStyleVars=Mq(`#${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 Uq(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(Sq(s))n=Mq(`#${this.id}`,s.preset??`dark`,s);else if(r.config.customStyle)n=Mq(void 0,XT(r?.config.customStyle[`editor-view-background-color`]).isDark()?`dark`:`light`,{...r?.config.customStyle});else{let e=XT(r?.config.customStyle?.[`editor-view-background-color`]).isDark();n=Mq(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`))}destroy(){this.destroyed=!0,this.app?.unmount(),this.app=void 0,this.element.innerHTML=``}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%;
@@ -2188,21 +2188,33 @@ https://github.com/highlightjs/highlight.js/issues/2277`),i=e,r=t),n===void 0&&(
                 :env="VITE_STRIPE_ENV"
                 :enforce-server-side-rendering="enforceServerSideRendering"
                 :enforce-video-server-side-rendering="enforceVideoServerSideRendering"
-              />
+              >
+                <template v-if="onClose" #navbar-right>
+                  <bx-button secondary aria-label="Close" @click="onClose()">
+                    <template #icon>
+                      <bx-icon><close-outline /></bx-icon>
+                    </template>
+                  </bx-button>
+                </template>
+              </bx-template-editor>
             </div>
 
         </div>
-    `;let n=this;(0,t.nextTick)(()=>{n.destroyed||(n.app=(0,t.createApp)({components:{BxTemplateEditor:ZU,BxSpin:Wy},setup(){let{createPopup:e}=Bw();return{bridge:{async handleUpload({blob:e,context:t,width:r,height:i,name:a,onProgress:o}){let s=await gO(e),c=s.width/s.height,l=r/i,u,d;c>l?d=i:u=r;let f=await new Promise((t,n)=>{new _i.default(e,{maxWidth:u,maxHeight:d,checkOrientation:!0,quality:.95,success(e){t(e)},error(){t(e)}})}),{url:p,key:m}=await zq(n.apiBaseUrl.value,n.templateId.value,t,f,a,(e,t)=>{o(e/t)}),h=p;if(!h)throw Error(`No public variant`);return{width:r,height:i,key:m,name:`Session Image #${m}`,src:h}},async handleSocialShare(e,t,n,r){return{status:`error`,message:`Social share failed`}}},templateName:n.templateName,editorRef:n.editorRef,campaignId:n.campaignId,campaign:n.campaign,allowPanAndZoom:n.allowPanAndZoom,templateId:n.templateId,serial:n.serial,preview:n.preview,apiBaseUrl:n.apiBaseUrl,data:n.data,bxCoreVersion:n.bxCoreVersion,bxThemeStyleVars:n.bxThemeStyleVars,stripeEnv:n.stripeEnv,remoteVideoRenderBaseUrl:n.remoteVideoRenderBaseUrl,exportOptions:(0,t.computed)(()=>{if(n.campaign.value)return n.campaign.value.config.export}),branding:n.branding,ready:(0,t.ref)(!1),watermark:!1,bearerToken:void 0,finalPassword:void 0,VITE_STUDIO_API_URL:n.apiBaseUrl.value,VITE_STRIPE_ENV:n.stripeEnv.value,enforceServerSideRendering:!1,enforceVideoServerSideRendering:!1}}}),n.app.mount(`#${this.id}`))})}setVariable(e,t){this.data.value||(this.data.value={}),this.data.value[e]=t}setData(e,t=!1){this.data.value=t?e:{...this.data.value,...e}}getTransform(){return this.editorRef.value?.templateViewRef?.transform}setTransform(e,t,n,r){let i=this.editorRef.value?.templateViewRef;i&&(i.transform={scale:e,translateX:t,translateY:n,rotate:r})}applyTransform(e,t,n){this.editorRef.value?.templateViewRef?.zoompinchRef?.applyTransform(e,t,n)}isMultiFrame(){return this.editorRef.value?.templateViewRef?.isMultiFrame}getCenteredFrame(){return this.editorRef.value?.templateViewRef?.currentlyFocusedFrame}centerFrame(e,t){this.editorRef.value?.templateViewRef?.focusFrame(e,t)}isReady(){return!!this.editorRef.value?.templateViewRef?.bxLiveTemplateRef?.ready}};async function Uq(e,t,n,r,i){let a=0;for(;a<r;){try{let r=await fetch(`${e}/api/public/campaign?${new URLSearchParams({env:n,hostname:`template.bluepic.io`,slug:t.toString()})}`,{method:`GET`});if(!r.ok)throw Error(`Campaign fetch failed with status ${r.status}`);return await r.json()}catch(e){if(console.error(`[BluepicEmbed] campaign fetch attempt ${a+1} failed`,e),a<r-1)await new Promise(e=>setTimeout(e,i));else throw e}a++}throw Error(`Unknown error in fetchCampaignWithRetries`)}var Wq=async()=>{let e=document.querySelectorAll(`.bluepic-embed[data-campaign-id]`);for(let t of e){let e=t.getAttribute(`data-campaign-id`);if(!e)continue;let n=t.getAttribute(`data-template-id`)??void 0,r=t.getAttribute(`data-stripe-env`)===`dev`?`dev`:`prod`,i=t.getAttribute(`data-init-data`),a=t.getAttribute(`data-api-base-url`)??`https://api.bluepic.io`,o=t.getAttribute(`data-remote-video-render-base-url`)??void 0,s=t.getAttribute(`data-bx-core-version`)??void 0,c=t.getAttribute(`data-theme`)??`auto`;new Hq(t,e,{templateId:n,initData:i?JSON.parse(i):void 0,apiBaseUrl:a,remoteVideoRenderBaseUrl:o,bxCoreVersion:s,stripeEnv:r,theme:c})}};window.addEventListener(`load`,Wq),window.BluepicEmbed=Hq;var Gq=`bluepic-campaign-popup-style`,Kq=`
+    `;let n=this;(0,t.nextTick)(()=>{n.destroyed||(n.app=(0,t.createApp)({components:{BxTemplateEditor:ZU,BxSpin:Wy,BxButton:X,BxIcon:Z,CloseOutline:Ab},setup(){let{createPopup:e}=Bw();return{bridge:{async handleUpload({blob:e,context:t,width:r,height:i,name:a,onProgress:o}){let s=await gO(e),c=s.width/s.height,l=r/i,u,d;c>l?d=i:u=r;let f=await new Promise((t,n)=>{new _i.default(e,{maxWidth:u,maxHeight:d,checkOrientation:!0,quality:.95,success(e){t(e)},error(){t(e)}})}),{url:p,key:m}=await zq(n.apiBaseUrl.value,n.templateId.value,t,f,a,(e,t)=>{o(e/t)}),h=p;if(!h)throw Error(`No public variant`);return{width:r,height:i,key:m,name:`Session Image #${m}`,src:h}},async handleSocialShare(e,t,n,r){return{status:`error`,message:`Social share failed`}}},templateName:n.templateName,editorRef:n.editorRef,campaignId:n.campaignId,campaign:n.campaign,allowPanAndZoom:n.allowPanAndZoom,templateId:n.templateId,serial:n.serial,preview:n.preview,apiBaseUrl:n.apiBaseUrl,data:n.data,bxCoreVersion:n.bxCoreVersion,bxThemeStyleVars:n.bxThemeStyleVars,stripeEnv:n.stripeEnv,remoteVideoRenderBaseUrl:n.remoteVideoRenderBaseUrl,exportOptions:(0,t.computed)(()=>{if(n.campaign.value)return n.campaign.value.config.export}),branding:n.branding,ready:(0,t.ref)(!1),watermark:!1,bearerToken:void 0,finalPassword:void 0,VITE_STUDIO_API_URL:n.apiBaseUrl.value,VITE_STRIPE_ENV:n.stripeEnv.value,enforceServerSideRendering:!1,enforceVideoServerSideRendering:!1,onClose:n.onClose}}}),n.app.mount(`#${this.id}`))})}setVariable(e,t){this.data.value||(this.data.value={}),this.data.value[e]=t}setData(e,t=!1){this.data.value=t?e:{...this.data.value,...e}}getTransform(){return this.editorRef.value?.templateViewRef?.transform}setTransform(e,t,n,r){let i=this.editorRef.value?.templateViewRef;i&&(i.transform={scale:e,translateX:t,translateY:n,rotate:r})}applyTransform(e,t,n){this.editorRef.value?.templateViewRef?.zoompinchRef?.applyTransform(e,t,n)}isMultiFrame(){return this.editorRef.value?.templateViewRef?.isMultiFrame}getCenteredFrame(){return this.editorRef.value?.templateViewRef?.currentlyFocusedFrame}centerFrame(e,t){this.editorRef.value?.templateViewRef?.focusFrame(e,t)}isReady(){return!!this.editorRef.value?.templateViewRef?.bxLiveTemplateRef?.ready}};async function Uq(e,t,n,r,i){let a=0;for(;a<r;){try{let r=await fetch(`${e}/api/public/campaign?${new URLSearchParams({env:n,hostname:`template.bluepic.io`,slug:t.toString()})}`,{method:`GET`});if(!r.ok)throw Error(`Campaign fetch failed with status ${r.status}`);return await r.json()}catch(e){if(console.error(`[BluepicEmbed] campaign fetch attempt ${a+1} failed`,e),a<r-1)await new Promise(e=>setTimeout(e,i));else throw e}a++}throw Error(`Unknown error in fetchCampaignWithRetries`)}var Wq=async()=>{let e=document.querySelectorAll(`.bluepic-embed[data-campaign-id]`);for(let t of e){let e=t.getAttribute(`data-campaign-id`);if(!e)continue;let n=t.getAttribute(`data-template-id`)??void 0,r=t.getAttribute(`data-stripe-env`)===`dev`?`dev`:`prod`,i=t.getAttribute(`data-init-data`),a=t.getAttribute(`data-api-base-url`)??`https://api.bluepic.io`,o=t.getAttribute(`data-remote-video-render-base-url`)??void 0,s=t.getAttribute(`data-bx-core-version`)??void 0,c=t.getAttribute(`data-theme`)??`auto`;new Hq(t,e,{templateId:n,initData:i?JSON.parse(i):void 0,apiBaseUrl:a,remoteVideoRenderBaseUrl:o,bxCoreVersion:s,stripeEnv:r,theme:c})}};window.addEventListener(`load`,Wq),window.BluepicEmbed=Hq;var Gq=`bluepic-campaign-popup-style`,Kq=`
 .bluepic-campaign-popup-stage {
   width: min(1200px, calc(100vw - 48px));
-  height: min(820px, calc(100vh - 140px));
+  height: min(820px, calc(100vh - 64px));
   display: flex;
 }
 .bluepic-campaign-popup-stage > div { flex: 1; min-width: 0; min-height: 0; }
 @media (max-width: 640px) {
-  .bluepic-campaign-popup-stage { width: calc(100vw - 16px); height: calc(100vh - 110px); }
+  .bluepic-campaign-popup-stage { width: calc(100vw - 16px); height: calc(100vh - 32px); }
 }
-`;function qq(e){if(!document.getElementById(Gq)){let e=document.createElement(`style`);e.id=Gq,e.textContent=Kq,document.head.appendChild(e)}let n,r=(0,t.defineComponent)({name:`BluepicCampaignPopupStage`,setup(){let r=(0,t.ref)();return(0,t.onMounted)(()=>{r.value&&(n=new Hq(r.value,e.campaignId,{templateId:e.templateId,initData:e.data,theme:e.theme,apiBaseUrl:e.apiBaseUrl??`https://api.bluepic.io`,stripeEnv:e.stripeEnv}))}),(0,t.onBeforeUnmount)(()=>n?.destroy()),()=>(0,t.h)(`div`,{class:`bluepic-campaign-popup-stage`},[(0,t.h)(`div`,{ref:r})])}}),i=Pw({type:e.type??`frame`,title:e.title,draggable:!1,customClasses:[`bluepic-campaign-popup`],content:()=>(0,t.h)(r),onClose:e.onClose});return{close:()=>i.close(),get embed(){return n}}}if(typeof window<`u`){let e=window;e.Bluepic={...e.Bluepic??{},openPopup:qq,Embed:Hq}}var Jq={class:`user-info`},Yq={class:`user-content`},Xq={key:0,class:`user-name`},Zq={key:1,class:`user-email`},Qq={key:0,class:`user-extra`},$q={class:`actions`},eJ=V((0,t.defineComponent)({__name:`UserInfo`,props:{user:{},showSettings:{type:Boolean,default:!1}},emits:[`logout`,`settings`],setup(e,{emit:n}){let r=n,i=(0,t.useSlots)();return(n,a)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,Jq,[(0,t.createElementVNode)(`main`,null,[(0,t.createVNode)(nK,{user:e.user,width:40,height:40},null,8,[`user`]),(0,t.createElementVNode)(`div`,Yq,[e.user.name?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,Xq,(0,t.toDisplayString)(e.user.name),1)):(0,t.createCommentVNode)(``,!0),e.user.email?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,Zq,(0,t.toDisplayString)(e.user.email),1)):(0,t.createCommentVNode)(``,!0)])]),i.default?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,Qq,[(0,t.renderSlot)(n.$slots,`default`,{},void 0,!0)])):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`footer`,null,[(0,t.createElementVNode)(`div`,$q,[e.showSettings?((0,t.openBlock)(),(0,t.createBlock)(X,{key:0,size:`medium`,onClick:a[0]||=e=>r(`settings`)},{icon:(0,t.withCtx)(()=>[(0,t.createVNode)(Z,null,{default:(0,t.withCtx)(()=>[(0,t.createVNode)((0,t.unref)(Hx))]),_:1})]),default:(0,t.withCtx)(()=>[a[2]||=(0,t.createTextVNode)(` Settings `,-1)]),_:1})):(0,t.createCommentVNode)(``,!0),(0,t.createVNode)(X,{size:`medium`,onClick:a[1]||=e=>r(`logout`)},{icon:(0,t.withCtx)(()=>[(0,t.createVNode)(Z,null,{default:(0,t.withCtx)(()=>[(0,t.createVNode)((0,t.unref)(cx))]),_:1})]),default:(0,t.withCtx)(()=>[a[3]||=(0,t.createTextVNode)(` Logout `,-1)]),_:1})])])]))}}),[[`__scopeId`,`data-v-8e175b2d`]]),tJ={class:`category-tabs`},nJ={class:`tabs-wrapper`},rJ=[`onClick`],iJ=V((0,t.defineComponent)({__name:`Tabs`,props:(0,t.mergeModels)({tabs:{}},{activeTab:{required:!0},activeTabModifiers:{}}),emits:(0,t.mergeModels)([`click:category`],[`update:activeTab`]),setup(e,{emit:n}){let r=n,i=(0,t.useModel)(e,`activeTab`);function a(e){i.value=e,r(`click:category`,e)}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,tJ,[(0,t.createElementVNode)(`div`,nJ,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.tabs,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{key:e,class:(0,t.normalizeClass)({active:e===i.value}),onClick:t=>a(e)},[(0,t.createElementVNode)(`span`,null,(0,t.toDisplayString)(e),1)],10,rJ))),128))])]))}}),[[`__scopeId`,`data-v-a1d3c812`]]),aJ=[`A0`,`A1`,`A2`,`A3`,`A4`,`A5`,`A6`,`A7`,`A8`,`A9`,`A10`],oJ={w:841,h:1189};function sJ(){let e=[{w:oJ.w,h:oJ.h}];for(let t=1;t<=10;t++){let n=e[t-1],r=Math.round(n.h/2),i=n.w,a=r<=i?{w:r,h:i}:{w:i,h:r};e.push(a)}let t={};return aJ.forEach((n,r)=>t[n]=e[r]),t}var cJ=sJ(),lJ=25.4;function uJ(e){return e/lJ}function dJ(e,t){return e*t}function fJ(e,t){return e/t*lJ}function pJ(e,t){let n=cJ[e],r=uJ(n.w),i=uJ(n.h),a=dJ(r,t),o=dJ(i,t);return{widthPx:Math.round(a),heightPx:Math.round(o),widthPxExact:a,heightPxExact:o,aspect:n.h/n.w,sizeMm:{w:n.w,h:n.h}}}function mJ(e,t,n,r=2){let i=e>t,[a,o]=e<=t?[e,t]:[t,e],s=fJ(a,n),c=fJ(o,n),l=null;for(let e of aJ){let t=cJ[e],n=s-t.w,i=c-t.h;if(Math.abs(n)<=r&&Math.abs(i)<=r){let r=Math.abs(n)+Math.abs(i);(!l||r<l.score)&&(l={level:e,score:r,delta:{dw:n,dh:i},iso:t})}}if(!l)return null;let u=c/s,d=Math.abs(u/Math.SQRT2-1);return{level:l.level,matchedOrientation:i?`landscape`:`portrait`,measuredMm:{w:s,h:c},isoMm:{w:l.iso.w,h:l.iso.h},deltaMm:l.delta,aspectError:d}}function hJ(e){let t=window.getSelection();if(!t)throw Error(`No selection descriptor`);if(!t.anchorNode)throw Error(`No anchor node`);if(!t.focusNode)throw Error(`No focus node`);if(t.anchorNode.textContent===null)throw Error(`Anchor node's text content: null`);if(t.focusNode.textContent===null)throw Error(`Focus node's text content: null`);let n=vJ(e,e=>e===t.anchorNode),r=vJ(e,e=>e===t.focusNode),i=n.length+t.anchorOffset;return{start:i,length:r.length+t.focusOffset-i}}function gJ(e){let n=(0,t.ref)(null);function r(){let t=document.getSelection();if(e.value&&t&&t.rangeCount>0){let r=t.getRangeAt(0);if(e.value.contains(r.commonAncestorContainer))try{n.value=hJ(e.value)}catch(e){console.error(`Failed to get selection`,e),n.value=null}}}return document.addEventListener(`selectionchange`,r),(0,t.onUnmounted)(()=>{document.removeEventListener(`selectionchange`,r)}),n}function _J({text:e,format:t},...n){return{text:e.slice(...n),format:t}}function vJ(e,t){let n=document.createTreeWalker(e),r=n.nextNode(),i=``;for(;r;){if(t(r))return i;let e=n.nextNode();if(r.nodeType===Node.TEXT_NODE)i+=r.textContent??``;else if(r.nodeType===Node.ELEMENT_NODE){let e=r;(e.tagName===`BR`||e.tagName===`DIV`&&!i.endsWith(`
+/* Lean: no popup header (the editor's own toolbar carries the close button), no toolbar fill. */
+.bluepic-campaign-popup .popup-content > header { display: none !important; }
+.bluepic-campaign-popup .bx-template-editor > header { background-color: transparent !important; }
+.bluepic-campaign-popup .bluepic-app-wrapper { background: transparent !important; }
+`;function qq(e){if(!document.getElementById(Gq)){let e=document.createElement(`style`);e.id=Gq,e.textContent=Kq,document.head.appendChild(e)}let n,r=(0,t.defineComponent)({name:`BluepicCampaignPopupStage`,setup(){let r=(0,t.ref)();return(0,t.onMounted)(()=>{r.value&&(n=new Hq(r.value,e.campaignId,{onClose:()=>i.close(),templateId:e.templateId,initData:e.data,theme:e.theme,apiBaseUrl:e.apiBaseUrl??`https://api.bluepic.io`,stripeEnv:e.stripeEnv}))}),(0,t.onBeforeUnmount)(()=>n?.destroy()),()=>(0,t.h)(`div`,{class:`bluepic-campaign-popup-stage`},[(0,t.h)(`div`,{ref:r})])}}),i=Pw({type:e.type??`frame`,title:e.title,draggable:!1,transculent:!0,closeable:!1,customClasses:[`bluepic-campaign-popup`],content:()=>(0,t.h)(r),onClose:e.onClose});return{close:()=>i.close(),get embed(){return n}}}if(typeof window<`u`){let e=window;e.Bluepic={...e.Bluepic??{},openPopup:qq,Embed:Hq}}var Jq={class:`user-info`},Yq={class:`user-content`},Xq={key:0,class:`user-name`},Zq={key:1,class:`user-email`},Qq={key:0,class:`user-extra`},$q={class:`actions`},eJ=V((0,t.defineComponent)({__name:`UserInfo`,props:{user:{},showSettings:{type:Boolean,default:!1}},emits:[`logout`,`settings`],setup(e,{emit:n}){let r=n,i=(0,t.useSlots)();return(n,a)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,Jq,[(0,t.createElementVNode)(`main`,null,[(0,t.createVNode)(nK,{user:e.user,width:40,height:40},null,8,[`user`]),(0,t.createElementVNode)(`div`,Yq,[e.user.name?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,Xq,(0,t.toDisplayString)(e.user.name),1)):(0,t.createCommentVNode)(``,!0),e.user.email?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,Zq,(0,t.toDisplayString)(e.user.email),1)):(0,t.createCommentVNode)(``,!0)])]),i.default?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,Qq,[(0,t.renderSlot)(n.$slots,`default`,{},void 0,!0)])):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`footer`,null,[(0,t.createElementVNode)(`div`,$q,[e.showSettings?((0,t.openBlock)(),(0,t.createBlock)(X,{key:0,size:`medium`,onClick:a[0]||=e=>r(`settings`)},{icon:(0,t.withCtx)(()=>[(0,t.createVNode)(Z,null,{default:(0,t.withCtx)(()=>[(0,t.createVNode)((0,t.unref)(Hx))]),_:1})]),default:(0,t.withCtx)(()=>[a[2]||=(0,t.createTextVNode)(` Settings `,-1)]),_:1})):(0,t.createCommentVNode)(``,!0),(0,t.createVNode)(X,{size:`medium`,onClick:a[1]||=e=>r(`logout`)},{icon:(0,t.withCtx)(()=>[(0,t.createVNode)(Z,null,{default:(0,t.withCtx)(()=>[(0,t.createVNode)((0,t.unref)(cx))]),_:1})]),default:(0,t.withCtx)(()=>[a[3]||=(0,t.createTextVNode)(` Logout `,-1)]),_:1})])])]))}}),[[`__scopeId`,`data-v-8e175b2d`]]),tJ={class:`category-tabs`},nJ={class:`tabs-wrapper`},rJ=[`onClick`],iJ=V((0,t.defineComponent)({__name:`Tabs`,props:(0,t.mergeModels)({tabs:{}},{activeTab:{required:!0},activeTabModifiers:{}}),emits:(0,t.mergeModels)([`click:category`],[`update:activeTab`]),setup(e,{emit:n}){let r=n,i=(0,t.useModel)(e,`activeTab`);function a(e){i.value=e,r(`click:category`,e)}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,tJ,[(0,t.createElementVNode)(`div`,nJ,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.tabs,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{key:e,class:(0,t.normalizeClass)({active:e===i.value}),onClick:t=>a(e)},[(0,t.createElementVNode)(`span`,null,(0,t.toDisplayString)(e),1)],10,rJ))),128))])]))}}),[[`__scopeId`,`data-v-a1d3c812`]]),aJ=[`A0`,`A1`,`A2`,`A3`,`A4`,`A5`,`A6`,`A7`,`A8`,`A9`,`A10`],oJ={w:841,h:1189};function sJ(){let e=[{w:oJ.w,h:oJ.h}];for(let t=1;t<=10;t++){let n=e[t-1],r=Math.round(n.h/2),i=n.w,a=r<=i?{w:r,h:i}:{w:i,h:r};e.push(a)}let t={};return aJ.forEach((n,r)=>t[n]=e[r]),t}var cJ=sJ(),lJ=25.4;function uJ(e){return e/lJ}function dJ(e,t){return e*t}function fJ(e,t){return e/t*lJ}function pJ(e,t){let n=cJ[e],r=uJ(n.w),i=uJ(n.h),a=dJ(r,t),o=dJ(i,t);return{widthPx:Math.round(a),heightPx:Math.round(o),widthPxExact:a,heightPxExact:o,aspect:n.h/n.w,sizeMm:{w:n.w,h:n.h}}}function mJ(e,t,n,r=2){let i=e>t,[a,o]=e<=t?[e,t]:[t,e],s=fJ(a,n),c=fJ(o,n),l=null;for(let e of aJ){let t=cJ[e],n=s-t.w,i=c-t.h;if(Math.abs(n)<=r&&Math.abs(i)<=r){let r=Math.abs(n)+Math.abs(i);(!l||r<l.score)&&(l={level:e,score:r,delta:{dw:n,dh:i},iso:t})}}if(!l)return null;let u=c/s,d=Math.abs(u/Math.SQRT2-1);return{level:l.level,matchedOrientation:i?`landscape`:`portrait`,measuredMm:{w:s,h:c},isoMm:{w:l.iso.w,h:l.iso.h},deltaMm:l.delta,aspectError:d}}function hJ(e){let t=window.getSelection();if(!t)throw Error(`No selection descriptor`);if(!t.anchorNode)throw Error(`No anchor node`);if(!t.focusNode)throw Error(`No focus node`);if(t.anchorNode.textContent===null)throw Error(`Anchor node's text content: null`);if(t.focusNode.textContent===null)throw Error(`Focus node's text content: null`);let n=vJ(e,e=>e===t.anchorNode),r=vJ(e,e=>e===t.focusNode),i=n.length+t.anchorOffset;return{start:i,length:r.length+t.focusOffset-i}}function gJ(e){let n=(0,t.ref)(null);function r(){let t=document.getSelection();if(e.value&&t&&t.rangeCount>0){let r=t.getRangeAt(0);if(e.value.contains(r.commonAncestorContainer))try{n.value=hJ(e.value)}catch(e){console.error(`Failed to get selection`,e),n.value=null}}}return document.addEventListener(`selectionchange`,r),(0,t.onUnmounted)(()=>{document.removeEventListener(`selectionchange`,r)}),n}function _J({text:e,format:t},...n){return{text:e.slice(...n),format:t}}function vJ(e,t){let n=document.createTreeWalker(e),r=n.nextNode(),i=``;for(;r;){if(t(r))return i;let e=n.nextNode();if(r.nodeType===Node.TEXT_NODE)i+=r.textContent??``;else if(r.nodeType===Node.ELEMENT_NODE){let e=r;(e.tagName===`BR`||e.tagName===`DIV`&&!i.endsWith(`
 `)&&i!==``)&&(i+=`
 `)}r=e}return i.endsWith(`
 `)&&(i=i.slice(0,-1)),i}window.collectContentEditableText=vJ;function yJ(e,t){let n=``;function r(e){if(!e)return``;let n=``,i=e.previousSibling;for(;i;){if(i.nodeType===Node.TEXT_NODE)n=i.textContent+n;else if(i.nodeType===Node.ELEMENT_NODE){let e=i;n=e.tagName===`BR`?`

package/dist/main.mjs

@@ -73476,6 +73476,7 @@ var UJ = "https://bx-studio-api-production.bluepic.workers.dev", WJ = "https://r
 	id = `bluepic-app-${xe()}`;
 	app;
 	destroyed = !1;
+	onClose;
 	constructor(e, t, n) {
 		if (super(), typeof e == "string") {
 			let t = document.querySelector(e);
@@ -73485,7 +73486,7 @@ var UJ = "https://bx-studio-api-production.bluepic.workers.dev", WJ = "https://r
 		else throw Error("Invalid element or selector provided");
 		let r = typeof t == "string" ? Number(t) : t;
 		if (!Number.isFinite(r)) throw Error(`Invalid campaign id "${t}"`);
-		this.campaignId = B(r), this.templateId.value = n?.templateId, this.apiBaseUrl.value = n?.apiBaseUrl ?? this.apiBaseUrl.value, this.remoteVideoRenderBaseUrl.value = n?.remoteVideoRenderBaseUrl ?? this.remoteVideoRenderBaseUrl.value, this.bxCoreVersion.value = n?.bxCoreVersion, this.stripeEnv.value = n?.stripeEnv ?? this.stripeEnv.value, this.data.value = n?.initData, this.mount(), this.bxThemeStyleVars = FJ(`#${this.id}`, n?.theme ?? "auto", n?.customThemeVars), this.loadCampaign(n?.bearerToken, n?.password), W(this.data, () => {
+		this.campaignId = B(r), this.templateId.value = n?.templateId, this.apiBaseUrl.value = n?.apiBaseUrl ?? this.apiBaseUrl.value, this.remoteVideoRenderBaseUrl.value = n?.remoteVideoRenderBaseUrl ?? this.remoteVideoRenderBaseUrl.value, this.bxCoreVersion.value = n?.bxCoreVersion, this.stripeEnv.value = n?.stripeEnv ?? this.stripeEnv.value, this.data.value = n?.initData, this.onClose = n?.onClose, this.mount(), this.bxThemeStyleVars = FJ(`#${this.id}`, n?.theme ?? "auto", n?.customThemeVars), this.loadCampaign(n?.bearerToken, n?.password), W(this.data, () => {
 			this.dispatchEvent(new CustomEvent("data", { detail: U(this.data.value) }));
 		}, { deep: !0 });
 	}
@@ -73595,7 +73596,15 @@ var UJ = "https://bx-studio-api-production.bluepic.workers.dev", WJ = "https://r
                 :env="VITE_STRIPE_ENV"
                 :enforce-server-side-rendering="enforceServerSideRendering"
                 :enforce-video-server-side-rendering="enforceVideoServerSideRendering"
-              />
+              >
+                <template v-if="onClose" #navbar-right>
+                  <bx-button secondary aria-label="Close" @click="onClose()">
+                    <template #icon>
+                      <bx-icon><close-outline /></bx-icon>
+                    </template>
+                  </bx-button>
+                </template>
+              </bx-template-editor>
             </div>
 
         </div>
@@ -73605,7 +73614,10 @@ var UJ = "https://bx-studio-api-production.bluepic.workers.dev", WJ = "https://r
 			t.destroyed || (t.app = u({
 				components: {
 					BxTemplateEditor: tG,
-					BxSpin: Kb
+					BxSpin: Kb,
+					BxButton: Yb,
+					BxIcon: XS,
+					CloseOutline: Nx
 				},
 				setup() {
 					let { createPopup: e } = WT();
@@ -73671,7 +73683,8 @@ var UJ = "https://bx-studio-api-production.bluepic.workers.dev", WJ = "https://r
 						VITE_STUDIO_API_URL: t.apiBaseUrl.value,
 						VITE_STRIPE_ENV: t.stripeEnv.value,
 						enforceServerSideRendering: !1,
-						enforceVideoServerSideRendering: !1
+						enforceVideoServerSideRendering: !1,
+						onClose: t.onClose
 					};
 				}
 			}), t.app.mount(`#${this.id}`));
@@ -73753,7 +73766,7 @@ var qJ = async () => {
 window.addEventListener("load", qJ), window.BluepicEmbed = GJ;
 //#endregion
 //#region src/embed/popup.ts
-var JJ = "bluepic-campaign-popup-style", YJ = "\n.bluepic-campaign-popup-stage {\n  width: min(1200px, calc(100vw - 48px));\n  height: min(820px, calc(100vh - 140px));\n  display: flex;\n}\n.bluepic-campaign-popup-stage > div { flex: 1; min-width: 0; min-height: 0; }\n@media (max-width: 640px) {\n  .bluepic-campaign-popup-stage { width: calc(100vw - 16px); height: calc(100vh - 110px); }\n}\n";
+var JJ = "bluepic-campaign-popup-style", YJ = "\n.bluepic-campaign-popup-stage {\n  width: min(1200px, calc(100vw - 48px));\n  height: min(820px, calc(100vh - 64px));\n  display: flex;\n}\n.bluepic-campaign-popup-stage > div { flex: 1; min-width: 0; min-height: 0; }\n@media (max-width: 640px) {\n  .bluepic-campaign-popup-stage { width: calc(100vw - 16px); height: calc(100vh - 32px); }\n}\n/* Lean: no popup header (the editor's own toolbar carries the close button), no toolbar fill. */\n.bluepic-campaign-popup .popup-content > header { display: none !important; }\n.bluepic-campaign-popup .bx-template-editor > header { background-color: transparent !important; }\n.bluepic-campaign-popup .bluepic-app-wrapper { background: transparent !important; }\n";
 function XJ(e) {
 	if (!document.getElementById(JJ)) {
 		let e = document.createElement("style");
@@ -73765,6 +73778,7 @@ function XJ(e) {
 			let n = B();
 			return F(() => {
 				n.value && (t = new GJ(n.value, e.campaignId, {
+					onClose: () => r.close(),
 					templateId: e.templateId,
 					initData: e.data,
 					theme: e.theme,
@@ -73777,6 +73791,8 @@ function XJ(e) {
 		type: e.type ?? "frame",
 		title: e.title,
 		draggable: !1,
+		transculent: !0,
+		closeable: !1,
 		customClasses: ["bluepic-campaign-popup"],
 		content: () => C(n),
 		onClose: e.onClose

package/package.json

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