@spiffcommerce/core 0.7.6 → 0.8.0

package/dist/module.js

@@ -1,4 +1,4 @@
-import{SpiffCommerce3DPreviewService as A}from"@spiffcommerce/preview";import{CommandContext as t,generate as e,CreateElementCommand as n,TextChangeCommand as a,FontAlignmentCommand as i,FontColorCommand as s,LayoutElementFactory as c,loadFontFromExternalUrl as o,getAttributesFromArrayBuffer as g,UnitOfMeasurement as B,LayoutElementType as r,TextAlgorithm as w,FontAlgorithmCommand as E,GroupCommand as Q,DeleteElementCommand as l,getAxisAlignedBoundingBox as C,isCloseToValue as h,mmPerPixel as d,cmPerPixel as D,MoveCommand as I,ScaleAxis as p,getElementVertices as M,rotateAroundPoint as f,calculateTextboxLines as u,defaultLineHeightFactor as F,findAngle as Y,ResizeCommand as m,RotateCommand as y,FontSizeCommand as N,currentDirection as H,rehydrateSerializedLayout as x,modifySVGWithElementProperties as R,IllustrationColorCommand as U,IllustrationCacheCommand as S,findElement as G,generateSVGWithUnknownColors as P,getSvgString as J,StepType as v,UpdateWorkflowStateCommand as k,StepAspectType as L,getFrameData as O,calculateOffsets as z,frameDataCache as b,UpdateFramePattern as T,generateDefaultRectangleFrameSvg as K,GetSVGDimensions as j,patternImageDataCache as V,fetchAsString as W,ShiftPatchworkCommand as X,Patchwork as q,sanitizeSvgTree as Z,FontSourceCommand as $,getFontMetrics as _,applyTextTransformations as AA,determineCorrectFontSizeAndLines as tA,loadFontFromDataUrl as eA,createElementNS as nA,createElement as aA,CreateLayoutCommand as iA,toBase64 as sA,getPatternImageData as cA,getVariant as oA,generateFrameSVG as gA,getDefaultVariant as BA,domParser as rA,traverse as wA,xmlSerializer as EA,fetchAsArrayBuffer as QA,arrayBufferToDataUrl as lA,loadFontFaceSet as CA}from"@spiffcommerce/papyrus";import hA from"swagger-client";import{createHttpLink as dA,InMemoryCache as DA,ApolloClient as IA,from as pA,gql as MA}from"@apollo/client";import{setContext as fA}from"@apollo/client/link/context";import{onError as uA}from"@apollo/client/link/error";import FA from"cross-fetch";import{createContext as YA,useContext as mA,useEffect as yA,useState as NA,useReducer as HA,useMemo as xA,useRef as RA,useCallback as UA}from"react";import{jsx as SA,jsxs as GA,Fragment as PA}from"react/jsx-runtime";import JA from"lodash.isequal";import{Canvg as vA}from"canvg";import kA from"lodash.clonedeep";import LA from"lodash.debounce";import{toString as OA}from"qrcode";import zA from"react-dom/server";import bA from"svg-path-bbox";const TA=new class{defaultServerUrl="https://api.spiff.com.au";defaultServicesApiUrl="https://services.spiff.com.au";defaultHubUrl="https://hub.spiff.com.au";constructor(){this.serverUrl=this.defaultServerUrl,this.servicesApiUrl=this.defaultServicesApiUrl,this.hubUrl=this.defaultHubUrl,this.serverUrlCallbacks=[]}getServerUrl(){return this.serverUrl}getServicesApiUrl(){return this.servicesApiUrl}getHubUrl(){return this.hubUrl}setServerUrl(A){this.serverUrl=A,this.serverUrlCallbacks.forEach((A=>A()))}setServicesApiUrl(A){this.servicesApiUrl=A}setHubUrl(A){this.hubUrl=A}addServerUrlCallback(A){this.serverUrlCallbacks.push(A)}};let KA;const jA=A=>{KA=A},VA=async()=>{const A={transactionOwnerId:KA};return window.location.href.includes("/workflows/product/")?{...await new Promise((A=>{const t=TA.getHubUrl();if(window.location.href.includes("localhost")||window.location.href.includes("ngrok"))return void A({});const e=n=>{n.origin===t&&(window.removeEventListener("message",e),A(n.data))};window.parent!==window&&(window.addEventListener("message",e,!1),window.parent.postMessage("ready",t))})),...A}:A};const WA=new class{uncachedOperations=[];constructor(){TA.addServerUrlCallback((async()=>{this.client=void 0,this.client=await this.constructClient()}))}setUncachedOperations(A){this.uncachedOperations=A}async execute(A,t){const e=this.uncachedOperations.includes(A)?A+"_private":A;return new Promise(((A,n)=>{this.getClient().then((a=>{a.execute({operationId:e,parameters:t}).then((t=>A(t))).catch((A=>{A.response&&A.response.status&&A.response.status>=500||(!A.response&&n(new Error(A)),A.response&&n(new Error(`${A.response.status} ${A.response.url}`)))}))})).catch((A=>{n(A)}))}))}async syncAuth(A){const t=await VA();if(t.bearer?A.authorizations={...A.authorizations,OAuth2:{token:{access_token:t.bearer,token_type:"Bearer"}}}:A.authorizations={...A.authorizations,OAuth2:{token:{access_token:"",token_type:"Bearer"}}},t.activeIntegration)A.authorizations={...A.authorizations,ActiveIntegration:t.activeIntegration};else{const t={...A.authorizations};delete t.ActiveIntegration,A.authorizations=t}if(t.partnerId)A.authorizations={...A.authorizations,PartnerId:t.partnerId};else{const t={...A.authorizations};delete t.PartnerId,A.authorizations=t}}async getClient(){return this.client||(this.client=await this.constructClient()),this.syncAuth(this.client),Promise.resolve(this.client)}async constructClient(){const A=await VA(),t=TA.getServerUrl()+"/v2/api-docs";return await hA(t,{authorizations:{OAuth2:{token:{access_token:A.bearer,token_type:"Bearer"}},PartnerId:A.partnerId}})}};const XA=new class{constructor(){this.shadowGraphqlClient=this.constructShadowGraphqlClient(),TA.addServerUrlCallback((()=>{this.shadowGraphqlClient=this.constructShadowGraphqlClient()}))}getShadowGraphqlClient(){return this.shadowGraphqlClient}constructShadowGraphqlClient(){const A=dA({uri:`${TA.getServerUrl()}/graphql`,fetch:FA}),t=fA((async(A,{headers:t})=>{const e=t||{},n=await VA();return n.bearer&&(e.Authorization=`Bearer ${n.bearer}`),n.partnerId&&(e.partnerId=n.partnerId),n.activeIntegration&&(e.activeIntegration=n.activeIntegration),n.transactionOwnerId&&(e.transactionOwnerId=n.transactionOwnerId),{headers:e}})),e=uA((({operation:A,graphQLErrors:t,networkError:e})=>{(t||[]).forEach((({message:t,locations:e,path:n})=>{console.log("[GraphQL Operation Error]"),console.log("Name:"+A.operationName),console.log("Query:"+JSON.stringify(A.query)),console.log(`Message: ${t}, Location: ${JSON.stringify(e,null,2)}, Path: ${n}`),console.log("Variables:"+JSON.stringify(A.variables))})),e&&console.log("GraphQL Network error")}));const n=new DA({typePolicies:{Transaction:{fields:{transactionOwnerId:{read:(A=null)=>A},customLogoLink:{read:(A=null)=>A},workflowFooterLogoLink:{read:(A=null)=>A},workflowState:{read:(A=null)=>A},bulkSourceUrl:{read:(A=null)=>A}}}}});return new IA({link:pA([e,t,A]),cache:n,name:"Core"})}};const qA=new class{cache=new Map;materialCache=new Map;constructor(){this.server=WA}async getLocalOrFromServer(A){if(this.cache.has(A))return this.cache.get(A);const t=(async()=>(await WA.execute("getAssetByKeyV2",{assetKey:A.replace(/\//g,"_")})).body)();return this.cache.set(A,t),t}async getMaterialLocalOrFromServer(A){if(this.materialCache.has(A))return this.materialCache.get(A);const t=(async()=>(await WA.execute("getMaterialV2",{id:A})).body)();return this.materialCache.set(A,t),t}async uploadAssetWithProgress(A,t,e,n,a,i){const s=await this.dispatchCreateAssetRequest(A,t,a,i);var c=new XMLHttpRequest;return c.open("PUT",s.assetResponse.uploadUrl,!0),c.setRequestHeader("Content-Type",s.mimeType),c.setRequestHeader("Cache-Control","public,max-age=31536000,immutable"),c.upload.onprogress=A=>{A.lengthComputable&&e(100*A.loaded/A.total)},c.onload=()=>{const A=s.assetResponse.asset;n(A)},c.onerror=()=>{console.warn("Asset upload failed")},c.send(A.blob),s.assetResponse.asset}loadImageAsFileInfo=async A=>{const t=await A.arrayBuffer(),e=await g(t);return{name:A.name.substring(A.name.lastIndexOf("/")+1),blob:((A,t)=>{let e=atob(A.split(",")[1]),n=[];for(let A=0;A<e.length;A++)n.push(e.charCodeAt(A));return new Blob([new Uint8Array(n)],{type:t})})(e.dataUrl,A.type)}};async dispatchCreateAssetRequest(A,t,e,n){const a=A.blob.type?A.blob.type:this.guessMIME(A.name);return{assetResponse:(await this.server.execute("createAsset",{assetDetails:{name:A.name,type:t,mimeType:a,storageOwnerId:n,userAnonymous:!0}},e)).body,mimeType:a}}guessMIME(A){const t=A.split(".").pop();switch(t){case"glb":return"model/gltf-binary";case"ttf":return"font/ttf";case"mkv":return"video/x-matroska";default:throw new Error("Unexpected mimetype: "+t)}}};const ZA=new class{cache=new Map;async cacheRequiredOptions(A){const t=A.steps.map((A=>A.optionId)).filter((A=>void 0!==A)),e=A.steps.map((A=>A.data.colourOptionId)).filter((A=>void 0!==A)),n=[...new Set([...t,...e])].map((async A=>{const t=await ZA.getLocalOrFromServer(WA,A);"Font"===t.data.type&&t.data.variants.forEach((async A=>{if(A.assetKey){const t=(await qA.getLocalOrFromServer(A.assetKey)).links.find((A=>"cdn"===A.rel))?.href;t&&await o(t)}}))}));await Promise.allSettled([...n])}async getLocalOrFromServer(A,t){if(this.cache.has(t))return this.cache.get(t);const e=(await A.execute("getOptionV2",{id:t})).body;return this.cache.set(t,e),e}getLocalOrUndefined(A){if(A)return this.cache.get(A)}async getAssetTileImageForVariant(A){if(A.thumbnailKey){const t=await qA.getLocalOrFromServer(A.thumbnailKey),e=t.links.find((A=>"thumbnail"===A.rel)),n=t.links.find((A=>"cdn"===A.rel));return e?.href||n?.href}const t=A.assetKey;if(t){const A=await qA.getLocalOrFromServer(t),e=A.links.find((A=>"thumbnail"===A.rel)),n=A.links.find((A=>"cdn"===A.rel));return e?.href||n?.href}return A.materialId?A.materialId:""}getDefaultVariant(A){const t=A.variants;return 1===t.length?t[0]:void 0!==A.defaultVariant?t.find((t=>t.id===A.defaultVariant)):void 0}getDisplayImageSource=A=>{if(A){const t=A.displayImage?.links.find((A=>"cdn"===A.rel));if(t)return t.href}};getSelectedVariant=(A,t)=>{if(A&&0!==t.length)return A.variants.find((A=>A.id===t[0]))};getSelectedVariants=(A,t)=>A?.variants.filter((A=>t.includes(A.id)))||[]},$A=YA(new t),_A=()=>{const A=mA($A);yA((()=>{A.registerStateCallback((()=>{e(new Date)}))}),[A]);const[t,e]=NA(new Date);return{commandDispatcher:t=>{A.apply(t)},getLayoutById:t=>A.getLayoutById(t),getAllLayouts:()=>A.getAllLayouts(),getReducerState:()=>{const t=A.getState();return t||{transaction:{layouts:{},serializableWorkflow:{steps:[]}}}},lastUpdated:t,flattenSequence:(t,e)=>{A.flattenSequence(t,e)}}};let At;var tt;(tt=At||(At={})).None="None",tt.FrameAdjustment="FrameAdjustment",tt.FinalizeDesign="FinalizeDesign";const et=(A,t)=>({layoutId:A()[0].layoutState.layout.id,selectedElement:void 0,zoom:t,maxZoom:5,units:B.Pixel,subMenu:At.None,activeModifierKeys:[],metaPressed:!1,elementEvent:void 0,scrolledMovement:!1}),nt=(A,t)=>JA(A,t.apply(A))?A:t.apply(A),at=YA({}),it=A=>{const{getAllLayouts:t}=_A(),[e,n]=HA(nt,et(t,A.defaultZoom||1)),a=xA((()=>({state:e,uiDispatcher:n})),[e,n]);return SA(at.Provider,{value:a,children:A.children})};class st{constructor(A){this.changes=A}apply(A){return{...A,...this.changes}}}const ct=()=>mA(at);let ot;var gt;(gt=ot||(ot={}))[gt.Orbit=0]="Orbit",gt[gt.Pan=1]="Pan";const Bt=7*window.devicePixelRatio,rt=(A,t,e,n)=>{const a=t.layout.width,i=t.layout.height,s=t.elements.filter((t=>t.id!==A.id&&!t.immutable&&!t.productOverlay)),c=s.map((A=>C(A.x,A.y,A.width,A.height,A.rotation))),o=[],g=new Set;c.forEach((A=>g.add(A.minX))),c.forEach((A=>g.add(A.maxX))),[0,a/2,a].forEach((A=>g.add(A)));const B=new Set;c.forEach((A=>B.add(A.minY))),c.forEach((A=>B.add(A.maxY))),[0,i/2,i].forEach((A=>B.add(A)));const r=s.map((A=>A.y));for(let A=-315;A<=315;A+=45)r.push(A);const w=C(A.x,A.y,A.width,A.height,A.rotation),E=[{value:w.minX,anchor:-1},{value:w.minX+(w.maxX-w.minX)/2,anchor:0},{value:w.minX+(w.maxX-w.minX),anchor:1}],Q=[{value:w.minY,anchor:-1},{value:w.minY+(w.maxY-w.minY)/2,anchor:0},{value:w.minY+(w.maxY-w.minY),anchor:1}],l=[{value:A.rotation,anchor:0}],d=(A,t,n,s)=>{const c=[];return t.forEach((t=>{const o=n.find((A=>h(t,A.value,2*e))),[g,B]=((A,t)=>[{x:"x"===A?t:0,y:"x"===A?0:t},{x:"x"===A?t:a,y:"x"===A?i:t}])(A,t),r="rotation"===A?null:SA("line",{x1:g.x,y1:g.y,x2:B.x,y2:B.y,stroke:s||"#D61B5C",strokeDasharray:5*e,strokeWidth:1.2*e,overflow:"overlay"},`${A}-${t}-${g.x}-${g.y}-${B.x}-${B.y}`);void 0!==o&&c.push({type:A,value:t,anchorPoint:o.anchor,svgNode:r,guidelineCoordinates:[g,B]})})),c};return o.push(...d("x",Array.from(g),E,n)),o.push(...d("y",Array.from(B),Q,n)),o.push(...d("rotation",r,l,n)),o};let wt;var Et;let Qt;var lt;(Et=wt||(wt={})).Translate="Translate",Et.Rotate="Rotate",Et.Resize="Resize",(lt=Qt||(Qt={})).ControlLeft="ControlLeft",lt.ControlRight="ControlRight",lt.Equal="Equal",lt.MetaLeft="MetaLeft",lt.MetaRight="MetaRight",lt.Minus="Minus",lt.ArrowLeft="ArrowLeft",lt.ArrowRight="ArrowRight",lt.ArrowUp="ArrowUp",lt.ArrowDown="ArrowDown",lt.AltLeft="AltLeft",lt.AltRight="AltRight",lt.Delete="Delete",lt.Backspace="Backspace";const Ct=(A,t,e,n)=>{const a=()=>{switch(e){case B.Pixel:return 1;case B.Millimeter:return d;case B.Centimeter:return D;default:throw new Error("Unknown unit of measurement")}};let i=t.x,s=t.y,c=t.x,o=t.y;switch(A){case Qt.ArrowLeft:c=t.x-1/a();break;case Qt.ArrowUp:o=t.y-1/a();break;case Qt.ArrowRight:c=t.x+1/a();break;case Qt.ArrowDown:o=t.y+1/a();break;default:throw new Error("Unhandled element interaction!")}const g=C(c,o,t.width,t.height,t.rotation);return(!n||g.minX>=n.left&&g.maxX<=n.left+n.width&&g.minY>=n.top&&g.maxY<=n.top+n.height)&&(i=c,s=o),new I(t.id,i,s)};var ht=0,dt=0,Dt=0;const It=(A,t,e,n,i,s,c)=>{const o=((A,t,e,n,a,i,s)=>{const c=n.width/t.width,o=n.height/t.height,g=A.movementX/c,B=A.movementY/o,w=e.rotation*Math.PI/180,E=Math.sin(w),Q=Math.cos(w);let l;switch(a.type){case wt.Resize:let t={top:e.y,left:e.x,width:e.width,height:e.height,rotation:e.rotation,fontSize:e.fontSize},h=t;switch(a.screenAxis){case p.North:{const A=-g*E+B*Q,n=e.y+A,a=e.height-A,i=M({...e}).center,s=M({...e,y:n,height:a}).center,c=f(s,i,w),o=c.x-e.width/2,r=c.y-a/2;h={...t,left:o,top:r,height:a}}break;case p.East:{const A=g*Q+B*E,n=e.width+A;let a=e.height;if(e.type===r.Textbox){const A=e;a=u(A.fontSize,A.fontData,A,A.input||A.text||"",A.lineHeight).requiredHeight}const i=M({...e}).center,s=M({...e,width:n,height:a}).center,c=f(s,i,w),o=c.x-n/2,l=c.y-a/2;h={...t,left:o,top:l,width:n,height:a}}break;case p.West:{const A=g*Q+B*E,n=e.x+A,a=e.width-A;let i=e.height;if(e.type===r.Textbox){const A=e;i=u(A.fontSize,A.fontData,A,A.input||A.text||"",A.lineHeight).requiredHeight}const s=M({...e}).center,c=M({...e,width:a,height:i,x:n}).center,o=f(c,s,w),l=o.x-a/2,C=o.y-i/2;h={...t,left:l,top:C,width:a,height:i}}break;case p.South:{const A=-g*E+B*Q,n=e.height+A,a=M({...e}).center,i=M({...e,height:n}).center,s=f(i,a,w),c=s.x-e.width/2,o=s.y-n/2;h={...t,left:c,top:o,height:n}}break;case p.Northeast:{const A=g*Q+B*E,n=e.width+A;let a=e.height+A,i=e.y-A,s=e.fontSize;if(e.type===r.Textbox){const t=e;s=t.fontSize+A/8,a=u(s,t.fontData,t,t.input||t.text||"",t.lineHeight).requiredHeight;const n=t.lineHeight||F;i=e.y-A*n/8}const c=M({...e}).center,o=M({...e,width:n,height:a,y:i}).center,l=f(o,c,w),C=l.x-n/2,d=l.y-a/2;h={...t,left:C,top:d,width:n,height:a,fontSize:s}}break;case p.Northwest:{const A=-g*Q+-B*E,n=e.x-A,a=e.width+A;let i=e.y-A,s=e.height+A,c=e.fontSize;if(e.type===r.Textbox){const t=e;c=t.fontSize+A/8,s=u(c,t.fontData,t,t.input||t.text||"",t.lineHeight).requiredHeight;const n=t.lineHeight||F;i=e.y-A*n/8}const o=M({...e}).center,l=M({...e,x:n,y:i,width:a,height:s}).center,C=f(l,o,w),d=C.x-a/2,D=C.y-s/2;h={...t,left:d,top:D,width:a,height:s,fontSize:c}}break;case p.Southeast:{const A=g*Q+B*E,n=e.width+A;let a=e.height+A,i=e.fontSize;if(e.type===r.Textbox){const t=e;i=t.fontSize+A/8,a=u(i,t.fontData,t,t.input||t.text||"",t.lineHeight).requiredHeight}const s=M({...e}).center,c=M({...e,width:n,height:a}).center,o=f(c,s,w),l=o.x-n/2,C=o.y-a/2;h={...t,left:l,top:C,width:n,height:a,fontSize:i}}break;case p.Southwest:{const A=-g*Q+-B*E,n=e.width+A;let a=e.x-A,i=e.height+A,s=e.fontSize;if(e.type===r.Textbox){const t=e;s=t.fontSize+A/8,i=u(s,t.fontData,t,t.input||t.text||"",t.lineHeight).requiredHeight}const c=M({...e}).center,o=M({...e,width:n,height:i,x:a}).center,l=f(o,c,w),C=l.x-n/2,d=l.y-i/2;h={...t,left:C,top:d,width:n,height:i,fontSize:s}}}return l=C(h.left,h.top,h.width,h.height,h.rotation),(!s||l.minX>=s.left&&l.maxX<=s.left+s.width&&l.minY>=s.top&&l.maxY<=s.top+s.height)&&(t=h),t;case wt.Rotate:const d={x:A.clientX,y:A.clientY};let D,I=e.rotation;const m=M(e,n,{x:c,y:o}),y=Y(d,m.c,m.d),N=Y(d,m.d,m.c);if(0===i.filter((A=>"rotation"===A.type)).length)Dt=0,D=(e.rotation+y-N)%360;else{Dt+=Math.sqrt(g**2+B**2);const A=Math.abs(Dt)>Bt/c;D=A?(e.rotation+y-N)%360:i.find((A=>"rotation"===A.type))?.value||0,A&&(Dt=0)}return l=C(e.x,e.y,e.width,e.height,D),(!s||l.minX>=s.left&&l.maxX<=s.left+s.width&&l.minY>=s.top&&l.maxY<=s.top+s.height)&&(I=D),{top:e.y,left:e.x,width:e.width,height:e.height,rotation:I};case wt.Translate:let H,x,R=e.x,U=e.y;if(0===i.filter((A=>"rotation"!==A.type)).length)ht=0,dt=0,H=e.x+g,x=e.y+B;else{const A=i.find((A=>"x"===A.type)),t=i.find((A=>"y"===A.type));A||(ht=0),t||(dt=0);const n=Math.abs(ht)>Bt/c,a=Math.abs(dt)>Bt/o;H=A?n?e.x+ht:e.x:e.x+g,x=t?a?e.y+dt:e.y:e.y+B,ht=n?0:ht+g,dt=a?0:dt+B}return l=C(H,x,e.width,e.height,e.rotation),(!s||l.minX>=s.left&&l.maxX<=s.left+s.width&&l.minY>=s.top&&l.maxY<=s.top+s.height)&&(R=H,U=x),{top:U,left:R,width:e.width,height:e.height,rotation:e.rotation}}})(A,t,e,n,i,s,c),g=[];if(e.type===r.Textbox){const A=e;g.push(new a(A.id,A.text||A.input||""))}if(g.push(new I(e.id,o.left,o.top),new m(e.id,o.width,o.height),new y(e.id,o.rotation)),e.type===r.Textbox){const A=e;o.fontSize&&A.fontSize!==o.fontSize&&g.push(new N(A.id,o.fontSize))}return g},pt=.5,Mt=(A,t,n,a,i,s,c)=>{const{state:o,uiDispatcher:g}=mA(at),{getLayoutById:B,getReducerState:r,flattenSequence:w}=_A(),[E,C]=NA(void 0),[h,d]=NA(void 0),D=B(o.layoutId);yA((()=>{if("adjustment"===i&&A?.current&&a){if(a<.5)return void g(new st({zoom:.5}));if(a>o.maxZoom)return void g(new st({zoom:o.maxZoom}));g(new st({zoom:a}))}}),[a,g,A,i,o.maxZoom]);const I=UA(((A,e)=>{g(new st({zoom:e}));const a=t?.current?.scrollWidth-t?.current?.clientWidth!=0,s=t?.current?.scrollHeight-t?.current?.clientHeight!=0;t.current&&n.current&&!o.scrolledMovement&&"advanced"===i&&(s&&(t.current.scrollTop=n.current.offsetTop+(t.current.scrollHeight-t.current.clientHeight)/2),a&&(t.current.scrollLeft=(n.current.offsetLeft+t.current.scrollWidth-t.current.clientWidth)/2))}),[g,t,n,o.scrolledMovement,i]);yA((()=>{o.zoom<=1&&g(new st({scrolledMovement:!1}))}),[g,o.zoom]);const p=t?.current?.getBoundingClientRect(),M=((p?.width||1)+(p?.height||1))/2,f=(D.layoutState.layout.width+D.layoutState.layout.height)/2/M/o.zoom,u=xA((()=>{const A=o.activeModifierKeys,t=o.elementEvent,e=A.includes(Qt.ControlLeft)||A.includes(Qt.MetaLeft)||A.includes(Qt.ControlRight)||A.includes(Qt.MetaRight);if(!o.selectedElement||!t||e)return[];const n=t&&t.type===wt.Translate,a=t&&t.type===wt.Rotate,i=D.layoutState.elements.find((A=>A.id===o.selectedElement));return(n||a)&&i?rt(i,D.layoutState,f,c):[]}),[o.selectedElement,o.elementEvent,o.activeModifierKeys,D.layoutState,f]),F=UA((()=>{const A=e();C(A),d(r().transaction)}),[r]),Y=UA((()=>{g(new st({selectedElement:void 0}))}),[g]),m=UA((()=>{g(new st({scrolledMovement:!0}))}),[g]),y=UA(((e,n)=>{const a=D.layoutState.elements.find((A=>A.id===o.selectedElement));if(!(o.elementEvent&&A.current&&t.current&&o.selectedElement&&a))return;t.current.hasPointerCapture(e.pointerId)||t.current.setPointerCapture(e.pointerId);const i=A.current.getBoundingClientRect(),c=new Q(It(e,D.layoutState.layout,a,i,o.elementEvent,u,n));c.sequenceId=E,s(c)}),[D.layoutState.elements,D.layoutState.layout,o.elementEvent,A,o.selectedElement,t,u,s]),N=UA((A=>{g(new st({elementEvent:A}))}),[g]),H=UA((()=>{g(new st({elementEvent:void 0})),E&&h&&(w(E,h),C(void 0),d(void 0))}),[g,E,h,w]),x=UA(((A,t)=>{let e=o.zoom;const n=o.maxZoom,a=o.selectedElement,c=o.activeModifierKeys;if((c.includes(Qt.AltLeft)||c.includes(Qt.AltRight))&&(A.code===Qt.Equal||A.code===Qt.Minus)){const t=.05*n;A.code===Qt.Equal?g(new st({zoom:e+t<=n?e+=t:e})):g(new st({zoom:e-t>=.5?e-t:e}))}const B=D.layoutState.elements.find((A=>A.id===a));if(a&&B){if(A.code===Qt.MetaLeft||A.code===Qt.ControlLeft||A.code===Qt.MetaRight||A.code===Qt.ControlRight){const t=A.code,e=o.activeModifierKeys;if(!e.includes(t))return g(new st({activeModifierKeys:e.concat(t)}))}if(A.code===Qt.ArrowDown||A.code===Qt.ArrowUp||A.code===Qt.ArrowLeft||A.code===Qt.ArrowRight){g(new st({elementEvent:{type:wt.Translate}}));const e=Ct(A.code,B,o.units,t);s(e),g(new st({elementEvent:void 0}))}A.code!==Qt.Delete&&A.code!==Qt.Backspace||"advanced"!==i||(g(new st({selectedElement:void 0})),s(new l(B.id)))}}),[s,g,D.layoutState.elements,i,o.activeModifierKeys,o.maxZoom,o.selectedElement,o.units,o.zoom]),R=UA((A=>{if(A.code===Qt.MetaLeft||A.code===Qt.ControlLeft||A.code===Qt.MetaRight||A.code===Qt.ControlRight){const t=o.activeModifierKeys,e=A.code;g(new st({activeModifierKeys:t.filter((A=>A!==e))}))}}),[g,o.activeModifierKeys]);return{guidelines:u,scale:f,zoomableElementRef:n,setElementEvent:N,handleZoom:I,handleKeyDown:x,handleKeyUp:R,handlePointerPressedBackground:Y,handlePointerReleased:H,handlePointerMove:y,handleScroll:m,handleSequenceStart:F}},ft=A=>{const{x:t,y:e,cursorStyle:n,onPointerDown:a,handleClass:i,cornerRadius:s,color:c,strokeWidth:o}=A;return SA("circle",{className:i,cx:t,cy:e,r:s,fill:"#ffffff",style:{cursor:n},stroke:c,strokeWidth:o,onPointerDown:a})},ut=A=>{const{x:t,y:e,width:n,height:a,cursorStyle:i,onPointerDown:s,edgeHandleRadius:c,color:o,strokeWidth:g}=A;return SA("rect",{x:t,y:e,width:n,height:a,rx:c,fill:"#ffffff",style:{cursor:i},stroke:o,strokeWidth:g,onPointerDown:s})},Ft=A=>{const{color:t,elementHeight:e,elementWidth:n,onBeginResize:a,rotation:i,scaleFactor:s,disableX:c,disableY:o}=A,g=7.5*s,B=3*s,r=28*s,w=6*s,E=1.2*s,Q=e-2*g,l=UA(((A,t,e)=>{A.stopPropagation(),a(t,e)}),[a]),C=UA((A=>l(A,H(p.West,360-i),p.West)),[l,i]),h=UA((A=>l(A,H(p.East,360-i),p.East)),[l,i]),d=UA((A=>l(A,H(p.North,360-i),p.North)),[l,i]),D=UA((A=>l(A,H(p.South,360-i),p.South)),[l,i]),I=UA((A=>l(A,p.Northwest,p.Northwest)),[l]),M=UA((A=>l(A,p.Northeast,p.Northeast)),[l]),f=UA((A=>l(A,p.Southwest,p.Southwest)),[l]),u=UA((A=>l(A,p.Northeast,p.Southeast)),[l]),F=r<=Q;return GA(PA,{children:[SA(ft,{x:0,y:0,cursorStyle:"nwse-resize",onPointerDown:I,handleClass:"cornerNorthWest",cornerRadius:g,color:t,strokeWidth:E}),F?SA(ft,{x:n,y:0,cursorStyle:"nesw-resize",onPointerDown:M,handleClass:"cornerNorthEast",cornerRadius:g,color:t,strokeWidth:E}):void 0,F?SA(ft,{x:n,y:e,cursorStyle:"nwse-resize",onPointerDown:u,handleClass:"cornerSouthEast",cornerRadius:g,color:t,strokeWidth:E}):void 0,F?SA(ft,{x:0,y:e,cursorStyle:"nesw-resize",onPointerDown:f,handleClass:"cornerSouthWest",cornerRadius:g,color:t,strokeWidth:E}):void 0,F&&!c?SA(ut,{x:-w/2,y:e/2-r/2,width:w,height:r,onPointerDown:C,edgeHandleRadius:B,cursorStyle:"ew-resize",color:t,strokeWidth:E}):void 0,F&&!o?SA(ut,{x:n/2-r/2,y:e-w/2,width:r,height:w,onPointerDown:D,edgeHandleRadius:B,cursorStyle:"ns-resize",color:t,strokeWidth:E}):void 0,c?void 0:SA(ut,{x:n-w/2,y:e/2-Math.min(r,.8*e)/2,width:w,height:Math.min(r,.8*e),onPointerDown:h,edgeHandleRadius:B,cursorStyle:"ew-resize",color:t,strokeWidth:E}),F&&!o?SA(ut,{x:n/2-r/2,y:-w/2,width:r,height:w,onPointerDown:d,edgeHandleRadius:B,cursorStyle:"ns-resize",color:t,strokeWidth:E}):void 0]})},Yt=A=>{const{color:t,elementWidth:e,onBeginRotate:n,scaleFactor:a}=A,i=UA((A=>{A.stopPropagation(),n()}),[n]),s=10*a,c=1.2*a;return GA("g",{children:[SA("circle",{cx:e/2,cy:-2.5*s,r:1.3*s,fill:"rgba(0, 0, 0, 0.5)",opacity:.4,style:{cursor:"ew-resize"},onPointerDown:i}),SA("circle",{cx:e/2,cy:-2.5*s,r:s,fill:"#fff",style:{cursor:"ew-resize"},stroke:t,strokeWidth:c,onPointerDown:i}),GA("svg",{x:e/2-s,y:-2.5*s-s,xmlns:"http://www.w3.org/2000/svg",style:{cursor:"ew-resize"},height:2*s,viewBox:"0 0 24 24",width:2*s,fill:t,onPointerDown:i,children:[SA("path",{d:"M0 0h24v24H0z",fill:"none"}),SA("path",{d:"M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"})]})]})},mt=A=>{const{color:t,height:e,highlighted:n,id:a,immutable:i,onBeginMove:s,onBeginResize:c,onBeginRotate:o,onPointerEnter:g,onPointerLeave:B,onSelected:r,pressed:w,rotation:E,scaleFactor:Q,selected:l,width:C,x:h,y:d,disableX:D,disableY:I}=A,p=1.2*Q,M=UA((A=>{2===A.button&&(A.stopPropagation(),r(a,A)),0===A.button&&(A.stopPropagation(),!l&&r(a,A),s())}),[a,l,r,s]),f=UA((()=>{g(a)}),[a,g]),u=UA((()=>{B(a)}),[a,B]);return GA("g",{transform:`translate(${h}, ${d}) rotate(${E} ${C/2} ${e/2})`,children:[SA("rect",{className:"interactableInnerRect",width:C,height:e,stroke:l||n?t:"none",pointerEvents:i?"none":"visibleFill",fill:"none",strokeWidth:p,style:{cursor:i?void 0:l?w?"grabbing":"grab":"pointer"},onPointerDown:i?void 0:M,onPointerEnter:i?void 0:f,onPointerLeave:i?void 0:u}),l&&GA(PA,{children:[SA(Yt,{color:t,elementWidth:C,onBeginRotate:o,scaleFactor:Q}),SA(Ft,{color:t,elementHeight:e,elementWidth:C,rotation:E,scaleFactor:Q,onBeginResize:c,disableX:D,disableY:I})]})]})},yt=({primaryColor:A,containerHeight:t,containerWidth:e,customViewbox:n,editorRef:a,elementEvent:i,guidelines:s,layoutHeight:c,layoutWidth:o,targetedElements:g,scale:B,selectedElement:w,onElementEvent:E,onElementSelected:Q,onSequenceStart:l})=>{const{state:C}=ct(),{getLayoutById:h}=_A(),d=h(C.layoutId),[D,I]=NA(void 0),p=UA((A=>{I(A)}),[]),M=UA((A=>{D===A&&I(void 0)}),[D]),f=UA((()=>{l(),E({type:wt.Translate})}),[E]),u=UA(((A,t)=>{l(),E({type:wt.Resize,relativeAxis:A,screenAxis:t})}),[E]),F=UA((()=>{l(),E({type:wt.Rotate})}),[E]),Y=n||{x:0,y:0,width:o,height:c},m=B*(Math.sqrt(Y.width*Y.height)/1e3)*(100/Math.sqrt(t*e))*Math.sqrt((y=e/t,Math.exp(Math.abs(Math.log(y)))));var y;const N=d.layoutState.elements.findIndex((({id:A})=>A===w)),H=[...d.layoutState.elements];return N>=0&&H.push(H.splice(N,1)[0]),GA("svg",{xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",xmlSpace:"preserve",version:"1.1",style:{touchAction:"none",position:"absolute",maxWidth:"100%",maxHeight:"100%"},width:"100%",height:"100%",viewBox:`${Y.x} ${Y.y} ${Y.width} ${Y.height}`,overflow:"overlay",children:[SA("rect",{fill:"none",stroke:"none",ref:a,width:o,height:c}),s.map((A=>A.svgNode)),H.map((t=>{const e=void 0!==w&&t.id===w,n=e&&void 0!==i,a=void 0!==D&&t.id===D;return SA(mt,{color:A,id:t.id,selected:e,highlighted:a,pressed:n,x:t.x,y:t.y,disableX:t.type===r.Frame,disableY:t.type===r.Textbox||t.type===r.Frame,width:t.width,height:t.height,rotation:t.rotation,immutable:t.immutable||g&&!g.includes(t.id),onSelected:Q,onBeginMove:f,onBeginResize:u,onBeginRotate:F,onPointerEnter:p,onPointerLeave:M,scaleFactor:m},t.id)}))]})},Nt=A=>{const{color:t,editorRef:e,zoomableElementRef:n,interactionElementRef:a,guidelines:i,isMakingAdjustments:s,viewmask:c,visibleLayoutId:o,xTranslation:g,yTranslation:B,targetedElements:r,borderRadius:w,handleContextMenu:E,handleKeyDown:Q,handleKeyUp:l,handlePointerMove:C,handlePointerPressedBackground:h,handlePointerReleased:d,handleScroll:D,onSequenceStart:I,setElementEvent:p,onElementSelected:M}=A,{getLayoutById:f}=_A(),u=f(o),F=u.layoutState,{state:Y}=ct(),m=UA((A=>{if(c){const t={left:c.x,top:c.y,width:c.width,height:c.height,panelId:"",rotation:0};return Q(A,t)}return Q(A)}),[Q,c]),y=UA((A=>{if(c){const t={left:c.x,top:c.y,width:c.width,height:c.height,panelId:"",rotation:0};return C(A,t)}return C(A)}),[C,c]);return SA("div",{style:{justifyContent:"center",position:"relative",height:"100%",width:"100%",scrollbarWidth:"none",outline:"none"},onContextMenu:E,onKeyDown:m,onKeyUp:l,onPointerDown:h,onPointerMoveCapture:y,onPointerUp:d,onWheelCapture:D,ref:a,tabIndex:-1,children:GA("div",{ref:n,style:{height:"100%",transform:`scale(${Y.zoom}) translate(${g}px, ${B}px)`,display:"grid",filter:"drop-shadow(rgba(0, 0, 0, 0.2) 0px 0px 6px)"},children:[A.children,u.getComponentWithProps({height:s?"100%":"auto",maxHeight:"100%",maxWidth:"100%",position:"absolute",viewmask:c,width:s?"100%":"auto",borderRadius:w}),SA(yt,{primaryColor:t,containerHeight:n.current?.offsetHeight||1024,containerWidth:n.current?.offsetWidth||1024,editorRef:e,elementEvent:Y.elementEvent,guidelines:i,layoutHeight:F.layout.height,layoutWidth:F.layout.width,onElementEvent:p,onSequenceStart:I,onElementSelected:M,scale:10/Y.zoom,selectedElement:Y.selectedElement,targetedElements:r})]})})},Ht=({color:A,borderRadius:t,guidelineColor:e,handleContextMenu:n,onElementSelected:a})=>{const{commandDispatcher:i,getLayoutById:s}=_A(),{state:c,uiDispatcher:o}=ct(),g=RA(null),B=RA(null),Q=RA(null),{guidelines:l,handleKeyDown:C,handleKeyUp:h,handlePointerMove:d,handlePointerPressedBackground:D,handlePointerReleased:I,handleScroll:p,handleSequenceStart:M,setElementEvent:f}=Mt(g,B,Q,void 0,"advanced",i,e),u=UA(((A,t)=>{const e=s(c.layoutId).layoutState.elements.find((t=>t.id===A));if(A&&e&&e.type===r.Textbox){const t=e.algorithm;(!t||t===w.Autosize)&&i(new E(A,w.Traditional))}a&&a(A,t),o(new st({selectedElement:A}))}),[i,s,c.layoutId,o]);return SA(Nt,{color:A,editorRef:g,interactionElementRef:B,zoomableElementRef:Q,guidelines:l,visibleLayoutId:c.layoutId,xTranslation:0,yTranslation:0,borderRadius:t,handleContextMenu:n,handleKeyDown:C,handleKeyUp:h,handlePointerMove:d,handlePointerPressedBackground:D,handlePointerReleased:I,handleScroll:p,onSequenceStart:M,setElementEvent:f,onElementSelected:u})};class xt{get(A){return localStorage.getItem(A)||void 0}set(A,t){localStorage.setItem(A,t)}remove(A){localStorage.removeItem(A)}getMap(A){const t=this.get(A);if(t)return new Map(JSON.parse(t))}setMap(A,t){const e=JSON.stringify([...t.entries()]);this.set(A,e)}}class Rt{storage=new Map;get(A){return this.storage.get(A)||void 0}set(A,t){this.storage.set(A,t)}remove(A){this.storage.delete(A)}getMap(A){const t=this.get(A);if(t)return new Map(JSON.parse(t))}setMap(A,t){const e=JSON.stringify([...t.entries()]);this.set(A,e)}}const Ut=(()=>{try{return localStorage?new xt:new Rt}catch{return console.warn("Local storage was unavilable due to browser security settings. Using in-memory storage instead."),new Rt}})(),St=MA`
+import{SpiffCommerce3DPreviewService as A}from"@spiffcommerce/preview";import{CommandContext as t,generate as e,CreateElementCommand as n,TextChangeCommand as a,FontAlignmentCommand as i,FontColorCommand as s,LayoutElementFactory as c,loadFontFromExternalUrl as o,getAttributesFromArrayBuffer as g,UnitOfMeasurement as B,LayoutElementType as r,TextAlgorithm as w,FontAlgorithmCommand as E,GroupCommand as Q,DeleteElementCommand as l,getAxisAlignedBoundingBox as C,isCloseToValue as h,mmPerPixel as d,cmPerPixel as D,MoveCommand as I,ScaleAxis as p,getElementVertices as M,rotateAroundPoint as f,calculateTextboxLines as u,defaultLineHeightFactor as F,findAngle as Y,ResizeCommand as m,RotateCommand as y,FontSizeCommand as N,currentDirection as H,rehydrateSerializedLayout as x,modifySVGWithElementProperties as R,IllustrationColorCommand as U,IllustrationCacheCommand as S,findElement as G,generateSVGWithUnknownColors as P,getSvgString as J,StepType as v,UpdateWorkflowStateCommand as k,StepAspectType as L,getFrameData as O,calculateOffsets as z,frameDataCache as b,UpdateFramePattern as T,generateDefaultRectangleFrameSvg as K,GetSVGDimensions as j,patternImageDataCache as V,fetchAsString as W,ShiftPatchworkCommand as X,Patchwork as q,sanitizeSvgTree as Z,FontSourceCommand as $,getFontMetrics as _,applyTextTransformations as AA,determineCorrectFontSizeAndLines as tA,loadFontFromDataUrl as eA,createElementNS as nA,createElement as aA,CreateLayoutCommand as iA,toBase64 as sA,getPatternImageData as cA,getVariant as oA,generateFrameSVG as gA,getDefaultVariant as BA,domParser as rA,traverse as wA,xmlSerializer as EA,fetchAsArrayBuffer as QA,arrayBufferToDataUrl as lA,loadFontFaceSet as CA}from"@spiffcommerce/papyrus";import hA from"swagger-client";import{createHttpLink as dA,InMemoryCache as DA,ApolloClient as IA,from as pA,gql as MA}from"@apollo/client";import{setContext as fA}from"@apollo/client/link/context";import{onError as uA}from"@apollo/client/link/error";import{fetch as FA}from"cross-fetch";import{createContext as YA,useContext as mA,useEffect as yA,useState as NA,useReducer as HA,useMemo as xA,useRef as RA,useCallback as UA}from"react";import{jsx as SA,jsxs as GA,Fragment as PA}from"react/jsx-runtime";import JA from"lodash.isequal";import{Canvg as vA}from"canvg";import kA from"lodash.clonedeep";import LA from"lodash.debounce";import{toString as OA}from"qrcode";import zA from"react-dom/server";import bA from"svg-path-bbox";const TA=new class{defaultServerUrl="https://api.spiff.com.au";defaultServicesApiUrl="https://services.spiff.com.au";defaultHubUrl="https://hub.spiff.com.au";constructor(){this.serverUrl=this.defaultServerUrl,this.servicesApiUrl=this.defaultServicesApiUrl,this.hubUrl=this.defaultHubUrl,this.serverUrlCallbacks=[]}getServerUrl(){return this.serverUrl}getServicesApiUrl(){return this.servicesApiUrl}getHubUrl(){return this.hubUrl}setServerUrl(A){this.serverUrl=A,this.serverUrlCallbacks.forEach((A=>A()))}setServicesApiUrl(A){this.servicesApiUrl=A}setHubUrl(A){this.hubUrl=A}addServerUrlCallback(A){this.serverUrlCallbacks.push(A)}};let KA;const jA=A=>{KA=A},VA=async()=>{const A={transactionOwnerId:KA};return window.location.href.includes("/workflows/product/")?{...await new Promise((A=>{const t=TA.getHubUrl();if(window.location.href.includes("localhost")||window.location.href.includes("ngrok"))return void A({});const e=n=>{n.origin===t&&(window.removeEventListener("message",e),A(n.data))};window.parent!==window&&(window.addEventListener("message",e,!1),window.parent.postMessage("ready",t))})),...A}:A};const WA=new class{uncachedOperations=[];constructor(){TA.addServerUrlCallback((async()=>{this.client=void 0,this.client=await this.constructClient()}))}setUncachedOperations(A){this.uncachedOperations=A}async execute(A,t){const e=this.uncachedOperations.includes(A)?A+"_private":A;return new Promise(((A,n)=>{this.getClient().then((a=>{a.execute({operationId:e,parameters:t}).then((t=>A(t))).catch((A=>{A.response&&A.response.status&&A.response.status>=500||(!A.response&&n(new Error(A)),A.response&&n(new Error(`${A.response.status} ${A.response.url}`)))}))})).catch((A=>{n(A)}))}))}async syncAuth(A){const t=await VA();if(t.bearer?A.authorizations={...A.authorizations,OAuth2:{token:{access_token:t.bearer,token_type:"Bearer"}}}:A.authorizations={...A.authorizations,OAuth2:{token:{access_token:"",token_type:"Bearer"}}},t.activeIntegration)A.authorizations={...A.authorizations,ActiveIntegration:t.activeIntegration};else{const t={...A.authorizations};delete t.ActiveIntegration,A.authorizations=t}if(t.partnerId)A.authorizations={...A.authorizations,PartnerId:t.partnerId};else{const t={...A.authorizations};delete t.PartnerId,A.authorizations=t}}async getClient(){return this.client||(this.client=await this.constructClient()),this.syncAuth(this.client),Promise.resolve(this.client)}async constructClient(){const A=await VA(),t=TA.getServerUrl()+"/v2/api-docs";return await hA(t,{authorizations:{OAuth2:{token:{access_token:A.bearer,token_type:"Bearer"}},PartnerId:A.partnerId}})}};const XA=new class{constructor(){this.shadowGraphqlClient=this.constructShadowGraphqlClient(),TA.addServerUrlCallback((()=>{this.shadowGraphqlClient=this.constructShadowGraphqlClient()}))}getShadowGraphqlClient(){return this.shadowGraphqlClient}constructShadowGraphqlClient(){const A=dA({uri:`${TA.getServerUrl()}/graphql`,fetch:FA}),t=fA((async(A,{headers:t})=>{const e=t||{},n=await VA();return n.bearer&&(e.Authorization=`Bearer ${n.bearer}`),n.partnerId&&(e.partnerId=n.partnerId),n.activeIntegration&&(e.activeIntegration=n.activeIntegration),n.transactionOwnerId&&(e.transactionOwnerId=n.transactionOwnerId),{headers:e}})),e=uA((({operation:A,graphQLErrors:t,networkError:e})=>{(t||[]).forEach((({message:t,locations:e,path:n})=>{console.log("[GraphQL Operation Error]"),console.log("Name:"+A.operationName),console.log("Query:"+JSON.stringify(A.query)),console.log(`Message: ${t}, Location: ${JSON.stringify(e,null,2)}, Path: ${n}`),console.log("Variables:"+JSON.stringify(A.variables))})),e&&console.log("GraphQL Network error")}));const n=new DA({typePolicies:{Transaction:{fields:{transactionOwnerId:{read:(A=null)=>A},customLogoLink:{read:(A=null)=>A},workflowFooterLogoLink:{read:(A=null)=>A},workflowState:{read:(A=null)=>A},bulkSourceUrl:{read:(A=null)=>A}}}}});return new IA({link:pA([e,t,A]),cache:n,name:"Core"})}};const qA=new class{cache=new Map;materialCache=new Map;constructor(){this.server=WA}async getLocalOrFromServer(A){if(this.cache.has(A))return this.cache.get(A);const t=(async()=>(await WA.execute("getAssetByKeyV2",{assetKey:A.replace(/\//g,"_")})).body)();return this.cache.set(A,t),t}async getMaterialLocalOrFromServer(A){if(this.materialCache.has(A))return this.materialCache.get(A);const t=(async()=>(await WA.execute("getMaterialV2",{id:A})).body)();return this.materialCache.set(A,t),t}async uploadAssetWithProgress(A,t,e,n,a,i){const s=await this.dispatchCreateAssetRequest(A,t,a,i);var c=new XMLHttpRequest;return c.open("PUT",s.assetResponse.uploadUrl,!0),c.setRequestHeader("Content-Type",s.mimeType),c.setRequestHeader("Cache-Control","public,max-age=31536000,immutable"),c.upload.onprogress=A=>{A.lengthComputable&&e(100*A.loaded/A.total)},c.onload=()=>{const A=s.assetResponse.asset;n(A)},c.onerror=()=>{console.warn("Asset upload failed")},c.send(A.blob),s.assetResponse.asset}loadImageAsFileInfo=async A=>{const t=await A.arrayBuffer(),e=await g(t);return{name:A.name.substring(A.name.lastIndexOf("/")+1),blob:((A,t)=>{let e=atob(A.split(",")[1]),n=[];for(let A=0;A<e.length;A++)n.push(e.charCodeAt(A));return new Blob([new Uint8Array(n)],{type:t})})(e.dataUrl,A.type)}};async dispatchCreateAssetRequest(A,t,e,n){const a=A.blob.type?A.blob.type:this.guessMIME(A.name);return{assetResponse:(await this.server.execute("createAsset",{assetDetails:{name:A.name,type:t,mimeType:a,storageOwnerId:n,userAnonymous:!0}},e)).body,mimeType:a}}guessMIME(A){const t=A.split(".").pop();switch(t){case"glb":return"model/gltf-binary";case"ttf":return"font/ttf";case"mkv":return"video/x-matroska";default:throw new Error("Unexpected mimetype: "+t)}}};const ZA=new class{cache=new Map;async cacheRequiredOptions(A){const t=A.steps.map((A=>A.optionId)).filter((A=>void 0!==A)),e=A.steps.map((A=>A.data.colourOptionId)).filter((A=>void 0!==A)),n=[...new Set([...t,...e])].map((async A=>{const t=await ZA.getLocalOrFromServer(WA,A);"Font"===t.data.type&&t.data.variants.forEach((async A=>{if(A.assetKey){const t=(await qA.getLocalOrFromServer(A.assetKey)).links.find((A=>"cdn"===A.rel))?.href;t&&await o(t)}}))}));await Promise.allSettled([...n])}async getLocalOrFromServer(A,t){if(this.cache.has(t))return this.cache.get(t);const e=(await A.execute("getOptionV2",{id:t})).body;return this.cache.set(t,e),e}getLocalOrUndefined(A){if(A)return this.cache.get(A)}async getAssetTileImageForVariant(A){if(A.thumbnailKey){const t=await qA.getLocalOrFromServer(A.thumbnailKey),e=t.links.find((A=>"thumbnail"===A.rel)),n=t.links.find((A=>"cdn"===A.rel));return e?.href||n?.href}const t=A.assetKey;if(t){const A=await qA.getLocalOrFromServer(t),e=A.links.find((A=>"thumbnail"===A.rel)),n=A.links.find((A=>"cdn"===A.rel));return e?.href||n?.href}return A.materialId?A.materialId:""}getDefaultVariant(A){const t=A.variants;return 1===t.length?t[0]:void 0!==A.defaultVariant?t.find((t=>t.id===A.defaultVariant)):void 0}getDisplayImageSource=A=>{if(A){const t=A.displayImage?.links.find((A=>"cdn"===A.rel));if(t)return t.href}};getSelectedVariant=(A,t)=>{if(A&&0!==t.length)return A.variants.find((A=>A.id===t[0]))};getSelectedVariants=(A,t)=>A?.variants.filter((A=>t.includes(A.id)))||[]},$A=YA(new t),_A=()=>{const A=mA($A);yA((()=>{A.registerStateCallback((()=>{e(new Date)}))}),[A]);const[t,e]=NA(new Date);return{commandDispatcher:t=>{A.apply(t)},getLayoutById:t=>A.getLayoutById(t),getAllLayouts:()=>A.getAllLayouts(),getReducerState:()=>{const t=A.getState();return t||{transaction:{layouts:{},serializableWorkflow:{steps:[]}}}},lastUpdated:t,flattenSequence:(t,e)=>{A.flattenSequence(t,e)}}};let At;var tt;(tt=At||(At={})).None="None",tt.FrameAdjustment="FrameAdjustment",tt.FinalizeDesign="FinalizeDesign";const et=(A,t)=>({layoutId:A()[0].layoutState.layout.id,selectedElement:void 0,zoom:t,maxZoom:5,units:B.Pixel,subMenu:At.None,activeModifierKeys:[],metaPressed:!1,elementEvent:void 0,scrolledMovement:!1}),nt=(A,t)=>JA(A,t.apply(A))?A:t.apply(A),at=YA({}),it=A=>{const{getAllLayouts:t}=_A(),[e,n]=HA(nt,et(t,A.defaultZoom||1)),a=xA((()=>({state:e,uiDispatcher:n})),[e,n]);return SA(at.Provider,{value:a,children:A.children})};class st{constructor(A){this.changes=A}apply(A){return{...A,...this.changes}}}const ct=()=>mA(at);let ot;var gt;(gt=ot||(ot={}))[gt.Orbit=0]="Orbit",gt[gt.Pan=1]="Pan";const Bt=7*window.devicePixelRatio,rt=(A,t,e,n)=>{const a=t.layout.width,i=t.layout.height,s=t.elements.filter((t=>t.id!==A.id&&!t.immutable&&!t.productOverlay)),c=s.map((A=>C(A.x,A.y,A.width,A.height,A.rotation))),o=[],g=new Set;c.forEach((A=>g.add(A.minX))),c.forEach((A=>g.add(A.maxX))),[0,a/2,a].forEach((A=>g.add(A)));const B=new Set;c.forEach((A=>B.add(A.minY))),c.forEach((A=>B.add(A.maxY))),[0,i/2,i].forEach((A=>B.add(A)));const r=s.map((A=>A.y));for(let A=-315;A<=315;A+=45)r.push(A);const w=C(A.x,A.y,A.width,A.height,A.rotation),E=[{value:w.minX,anchor:-1},{value:w.minX+(w.maxX-w.minX)/2,anchor:0},{value:w.minX+(w.maxX-w.minX),anchor:1}],Q=[{value:w.minY,anchor:-1},{value:w.minY+(w.maxY-w.minY)/2,anchor:0},{value:w.minY+(w.maxY-w.minY),anchor:1}],l=[{value:A.rotation,anchor:0}],d=(A,t,n,s)=>{const c=[];return t.forEach((t=>{const o=n.find((A=>h(t,A.value,2*e))),[g,B]=((A,t)=>[{x:"x"===A?t:0,y:"x"===A?0:t},{x:"x"===A?t:a,y:"x"===A?i:t}])(A,t),r="rotation"===A?null:SA("line",{x1:g.x,y1:g.y,x2:B.x,y2:B.y,stroke:s||"#D61B5C",strokeDasharray:5*e,strokeWidth:1.2*e,overflow:"overlay"},`${A}-${t}-${g.x}-${g.y}-${B.x}-${B.y}`);void 0!==o&&c.push({type:A,value:t,anchorPoint:o.anchor,svgNode:r,guidelineCoordinates:[g,B]})})),c};return o.push(...d("x",Array.from(g),E,n)),o.push(...d("y",Array.from(B),Q,n)),o.push(...d("rotation",r,l,n)),o};let wt;var Et;let Qt;var lt;(Et=wt||(wt={})).Translate="Translate",Et.Rotate="Rotate",Et.Resize="Resize",(lt=Qt||(Qt={})).ControlLeft="ControlLeft",lt.ControlRight="ControlRight",lt.Equal="Equal",lt.MetaLeft="MetaLeft",lt.MetaRight="MetaRight",lt.Minus="Minus",lt.ArrowLeft="ArrowLeft",lt.ArrowRight="ArrowRight",lt.ArrowUp="ArrowUp",lt.ArrowDown="ArrowDown",lt.AltLeft="AltLeft",lt.AltRight="AltRight",lt.Delete="Delete",lt.Backspace="Backspace";const Ct=(A,t,e,n)=>{const a=()=>{switch(e){case B.Pixel:return 1;case B.Millimeter:return d;case B.Centimeter:return D;default:throw new Error("Unknown unit of measurement")}};let i=t.x,s=t.y,c=t.x,o=t.y;switch(A){case Qt.ArrowLeft:c=t.x-1/a();break;case Qt.ArrowUp:o=t.y-1/a();break;case Qt.ArrowRight:c=t.x+1/a();break;case Qt.ArrowDown:o=t.y+1/a();break;default:throw new Error("Unhandled element interaction!")}const g=C(c,o,t.width,t.height,t.rotation);return(!n||g.minX>=n.left&&g.maxX<=n.left+n.width&&g.minY>=n.top&&g.maxY<=n.top+n.height)&&(i=c,s=o),new I(t.id,i,s)};var ht=0,dt=0,Dt=0;const It=(A,t,e,n,i,s,c)=>{const o=((A,t,e,n,a,i,s)=>{const c=n.width/t.width,o=n.height/t.height,g=A.movementX/c,B=A.movementY/o,w=e.rotation*Math.PI/180,E=Math.sin(w),Q=Math.cos(w);let l;switch(a.type){case wt.Resize:let t={top:e.y,left:e.x,width:e.width,height:e.height,rotation:e.rotation,fontSize:e.fontSize},h=t;switch(a.screenAxis){case p.North:{const A=-g*E+B*Q,n=e.y+A,a=e.height-A,i=M({...e}).center,s=M({...e,y:n,height:a}).center,c=f(s,i,w),o=c.x-e.width/2,r=c.y-a/2;h={...t,left:o,top:r,height:a}}break;case p.East:{const A=g*Q+B*E,n=e.width+A;let a=e.height;if(e.type===r.Textbox){const A=e;a=u(A.fontSize,A.fontData,A,A.input||A.text||"",A.lineHeight).requiredHeight}const i=M({...e}).center,s=M({...e,width:n,height:a}).center,c=f(s,i,w),o=c.x-n/2,l=c.y-a/2;h={...t,left:o,top:l,width:n,height:a}}break;case p.West:{const A=g*Q+B*E,n=e.x+A,a=e.width-A;let i=e.height;if(e.type===r.Textbox){const A=e;i=u(A.fontSize,A.fontData,A,A.input||A.text||"",A.lineHeight).requiredHeight}const s=M({...e}).center,c=M({...e,width:a,height:i,x:n}).center,o=f(c,s,w),l=o.x-a/2,C=o.y-i/2;h={...t,left:l,top:C,width:a,height:i}}break;case p.South:{const A=-g*E+B*Q,n=e.height+A,a=M({...e}).center,i=M({...e,height:n}).center,s=f(i,a,w),c=s.x-e.width/2,o=s.y-n/2;h={...t,left:c,top:o,height:n}}break;case p.Northeast:{const A=g*Q+B*E,n=e.width+A;let a=e.height+A,i=e.y-A,s=e.fontSize;if(e.type===r.Textbox){const t=e;s=t.fontSize+A/8,a=u(s,t.fontData,t,t.input||t.text||"",t.lineHeight).requiredHeight;const n=t.lineHeight||F;i=e.y-A*n/8}const c=M({...e}).center,o=M({...e,width:n,height:a,y:i}).center,l=f(o,c,w),C=l.x-n/2,d=l.y-a/2;h={...t,left:C,top:d,width:n,height:a,fontSize:s}}break;case p.Northwest:{const A=-g*Q+-B*E,n=e.x-A,a=e.width+A;let i=e.y-A,s=e.height+A,c=e.fontSize;if(e.type===r.Textbox){const t=e;c=t.fontSize+A/8,s=u(c,t.fontData,t,t.input||t.text||"",t.lineHeight).requiredHeight;const n=t.lineHeight||F;i=e.y-A*n/8}const o=M({...e}).center,l=M({...e,x:n,y:i,width:a,height:s}).center,C=f(l,o,w),d=C.x-a/2,D=C.y-s/2;h={...t,left:d,top:D,width:a,height:s,fontSize:c}}break;case p.Southeast:{const A=g*Q+B*E,n=e.width+A;let a=e.height+A,i=e.fontSize;if(e.type===r.Textbox){const t=e;i=t.fontSize+A/8,a=u(i,t.fontData,t,t.input||t.text||"",t.lineHeight).requiredHeight}const s=M({...e}).center,c=M({...e,width:n,height:a}).center,o=f(c,s,w),l=o.x-n/2,C=o.y-a/2;h={...t,left:l,top:C,width:n,height:a,fontSize:i}}break;case p.Southwest:{const A=-g*Q+-B*E,n=e.width+A;let a=e.x-A,i=e.height+A,s=e.fontSize;if(e.type===r.Textbox){const t=e;s=t.fontSize+A/8,i=u(s,t.fontData,t,t.input||t.text||"",t.lineHeight).requiredHeight}const c=M({...e}).center,o=M({...e,width:n,height:i,x:a}).center,l=f(o,c,w),C=l.x-n/2,d=l.y-i/2;h={...t,left:C,top:d,width:n,height:i,fontSize:s}}}return l=C(h.left,h.top,h.width,h.height,h.rotation),(!s||l.minX>=s.left&&l.maxX<=s.left+s.width&&l.minY>=s.top&&l.maxY<=s.top+s.height)&&(t=h),t;case wt.Rotate:const d={x:A.clientX,y:A.clientY};let D,I=e.rotation;const m=M(e,n,{x:c,y:o}),y=Y(d,m.c,m.d),N=Y(d,m.d,m.c);if(0===i.filter((A=>"rotation"===A.type)).length)Dt=0,D=(e.rotation+y-N)%360;else{Dt+=Math.sqrt(g**2+B**2);const A=Math.abs(Dt)>Bt/c;D=A?(e.rotation+y-N)%360:i.find((A=>"rotation"===A.type))?.value||0,A&&(Dt=0)}return l=C(e.x,e.y,e.width,e.height,D),(!s||l.minX>=s.left&&l.maxX<=s.left+s.width&&l.minY>=s.top&&l.maxY<=s.top+s.height)&&(I=D),{top:e.y,left:e.x,width:e.width,height:e.height,rotation:I};case wt.Translate:let H,x,R=e.x,U=e.y;if(0===i.filter((A=>"rotation"!==A.type)).length)ht=0,dt=0,H=e.x+g,x=e.y+B;else{const A=i.find((A=>"x"===A.type)),t=i.find((A=>"y"===A.type));A||(ht=0),t||(dt=0);const n=Math.abs(ht)>Bt/c,a=Math.abs(dt)>Bt/o;H=A?n?e.x+ht:e.x:e.x+g,x=t?a?e.y+dt:e.y:e.y+B,ht=n?0:ht+g,dt=a?0:dt+B}return l=C(H,x,e.width,e.height,e.rotation),(!s||l.minX>=s.left&&l.maxX<=s.left+s.width&&l.minY>=s.top&&l.maxY<=s.top+s.height)&&(R=H,U=x),{top:U,left:R,width:e.width,height:e.height,rotation:e.rotation}}})(A,t,e,n,i,s,c),g=[];if(e.type===r.Textbox){const A=e;g.push(new a(A.id,A.text||A.input||""))}if(g.push(new I(e.id,o.left,o.top),new m(e.id,o.width,o.height),new y(e.id,o.rotation)),e.type===r.Textbox){const A=e;o.fontSize&&A.fontSize!==o.fontSize&&g.push(new N(A.id,o.fontSize))}return g},pt=.5,Mt=(A,t,n,a,i,s,c)=>{const{state:o,uiDispatcher:g}=mA(at),{getLayoutById:B,getReducerState:r,flattenSequence:w}=_A(),[E,C]=NA(void 0),[h,d]=NA(void 0),D=B(o.layoutId);yA((()=>{if("adjustment"===i&&A?.current&&a){if(a<.5)return void g(new st({zoom:.5}));if(a>o.maxZoom)return void g(new st({zoom:o.maxZoom}));g(new st({zoom:a}))}}),[a,g,A,i,o.maxZoom]);const I=UA(((A,e)=>{g(new st({zoom:e}));const a=t?.current?.scrollWidth-t?.current?.clientWidth!=0,s=t?.current?.scrollHeight-t?.current?.clientHeight!=0;t.current&&n.current&&!o.scrolledMovement&&"advanced"===i&&(s&&(t.current.scrollTop=n.current.offsetTop+(t.current.scrollHeight-t.current.clientHeight)/2),a&&(t.current.scrollLeft=(n.current.offsetLeft+t.current.scrollWidth-t.current.clientWidth)/2))}),[g,t,n,o.scrolledMovement,i]);yA((()=>{o.zoom<=1&&g(new st({scrolledMovement:!1}))}),[g,o.zoom]);const p=t?.current?.getBoundingClientRect(),M=((p?.width||1)+(p?.height||1))/2,f=(D.layoutState.layout.width+D.layoutState.layout.height)/2/M/o.zoom,u=xA((()=>{const A=o.activeModifierKeys,t=o.elementEvent,e=A.includes(Qt.ControlLeft)||A.includes(Qt.MetaLeft)||A.includes(Qt.ControlRight)||A.includes(Qt.MetaRight);if(!o.selectedElement||!t||e)return[];const n=t&&t.type===wt.Translate,a=t&&t.type===wt.Rotate,i=D.layoutState.elements.find((A=>A.id===o.selectedElement));return(n||a)&&i?rt(i,D.layoutState,f,c):[]}),[o.selectedElement,o.elementEvent,o.activeModifierKeys,D.layoutState,f]),F=UA((()=>{const A=e();C(A),d(r().transaction)}),[r]),Y=UA((()=>{g(new st({selectedElement:void 0}))}),[g]),m=UA((()=>{g(new st({scrolledMovement:!0}))}),[g]),y=UA(((e,n)=>{const a=D.layoutState.elements.find((A=>A.id===o.selectedElement));if(!(o.elementEvent&&A.current&&t.current&&o.selectedElement&&a))return;t.current.hasPointerCapture(e.pointerId)||t.current.setPointerCapture(e.pointerId);const i=A.current.getBoundingClientRect(),c=new Q(It(e,D.layoutState.layout,a,i,o.elementEvent,u,n));c.sequenceId=E,s(c)}),[D.layoutState.elements,D.layoutState.layout,o.elementEvent,A,o.selectedElement,t,u,s]),N=UA((A=>{g(new st({elementEvent:A}))}),[g]),H=UA((()=>{g(new st({elementEvent:void 0})),E&&h&&(w(E,h),C(void 0),d(void 0))}),[g,E,h,w]),x=UA(((A,t)=>{let e=o.zoom;const n=o.maxZoom,a=o.selectedElement,c=o.activeModifierKeys;if((c.includes(Qt.AltLeft)||c.includes(Qt.AltRight))&&(A.code===Qt.Equal||A.code===Qt.Minus)){const t=.05*n;A.code===Qt.Equal?g(new st({zoom:e+t<=n?e+=t:e})):g(new st({zoom:e-t>=.5?e-t:e}))}const B=D.layoutState.elements.find((A=>A.id===a));if(a&&B){if(A.code===Qt.MetaLeft||A.code===Qt.ControlLeft||A.code===Qt.MetaRight||A.code===Qt.ControlRight){const t=A.code,e=o.activeModifierKeys;if(!e.includes(t))return g(new st({activeModifierKeys:e.concat(t)}))}if(A.code===Qt.ArrowDown||A.code===Qt.ArrowUp||A.code===Qt.ArrowLeft||A.code===Qt.ArrowRight){g(new st({elementEvent:{type:wt.Translate}}));const e=Ct(A.code,B,o.units,t);s(e),g(new st({elementEvent:void 0}))}A.code!==Qt.Delete&&A.code!==Qt.Backspace||"advanced"!==i||(g(new st({selectedElement:void 0})),s(new l(B.id)))}}),[s,g,D.layoutState.elements,i,o.activeModifierKeys,o.maxZoom,o.selectedElement,o.units,o.zoom]),R=UA((A=>{if(A.code===Qt.MetaLeft||A.code===Qt.ControlLeft||A.code===Qt.MetaRight||A.code===Qt.ControlRight){const t=o.activeModifierKeys,e=A.code;g(new st({activeModifierKeys:t.filter((A=>A!==e))}))}}),[g,o.activeModifierKeys]);return{guidelines:u,scale:f,zoomableElementRef:n,setElementEvent:N,handleZoom:I,handleKeyDown:x,handleKeyUp:R,handlePointerPressedBackground:Y,handlePointerReleased:H,handlePointerMove:y,handleScroll:m,handleSequenceStart:F}},ft=A=>{const{x:t,y:e,cursorStyle:n,onPointerDown:a,handleClass:i,cornerRadius:s,color:c,strokeWidth:o}=A;return SA("circle",{className:i,cx:t,cy:e,r:s,fill:"#ffffff",style:{cursor:n},stroke:c,strokeWidth:o,onPointerDown:a})},ut=A=>{const{x:t,y:e,width:n,height:a,cursorStyle:i,onPointerDown:s,edgeHandleRadius:c,color:o,strokeWidth:g}=A;return SA("rect",{x:t,y:e,width:n,height:a,rx:c,fill:"#ffffff",style:{cursor:i},stroke:o,strokeWidth:g,onPointerDown:s})},Ft=A=>{const{color:t,elementHeight:e,elementWidth:n,onBeginResize:a,rotation:i,scaleFactor:s,disableX:c,disableY:o}=A,g=7.5*s,B=3*s,r=28*s,w=6*s,E=1.2*s,Q=e-2*g,l=UA(((A,t,e)=>{A.stopPropagation(),a(t,e)}),[a]),C=UA((A=>l(A,H(p.West,360-i),p.West)),[l,i]),h=UA((A=>l(A,H(p.East,360-i),p.East)),[l,i]),d=UA((A=>l(A,H(p.North,360-i),p.North)),[l,i]),D=UA((A=>l(A,H(p.South,360-i),p.South)),[l,i]),I=UA((A=>l(A,p.Northwest,p.Northwest)),[l]),M=UA((A=>l(A,p.Northeast,p.Northeast)),[l]),f=UA((A=>l(A,p.Southwest,p.Southwest)),[l]),u=UA((A=>l(A,p.Northeast,p.Southeast)),[l]),F=r<=Q;return GA(PA,{children:[SA(ft,{x:0,y:0,cursorStyle:"nwse-resize",onPointerDown:I,handleClass:"cornerNorthWest",cornerRadius:g,color:t,strokeWidth:E}),F?SA(ft,{x:n,y:0,cursorStyle:"nesw-resize",onPointerDown:M,handleClass:"cornerNorthEast",cornerRadius:g,color:t,strokeWidth:E}):void 0,F?SA(ft,{x:n,y:e,cursorStyle:"nwse-resize",onPointerDown:u,handleClass:"cornerSouthEast",cornerRadius:g,color:t,strokeWidth:E}):void 0,F?SA(ft,{x:0,y:e,cursorStyle:"nesw-resize",onPointerDown:f,handleClass:"cornerSouthWest",cornerRadius:g,color:t,strokeWidth:E}):void 0,F&&!c?SA(ut,{x:-w/2,y:e/2-r/2,width:w,height:r,onPointerDown:C,edgeHandleRadius:B,cursorStyle:"ew-resize",color:t,strokeWidth:E}):void 0,F&&!o?SA(ut,{x:n/2-r/2,y:e-w/2,width:r,height:w,onPointerDown:D,edgeHandleRadius:B,cursorStyle:"ns-resize",color:t,strokeWidth:E}):void 0,c?void 0:SA(ut,{x:n-w/2,y:e/2-Math.min(r,.8*e)/2,width:w,height:Math.min(r,.8*e),onPointerDown:h,edgeHandleRadius:B,cursorStyle:"ew-resize",color:t,strokeWidth:E}),F&&!o?SA(ut,{x:n/2-r/2,y:-w/2,width:r,height:w,onPointerDown:d,edgeHandleRadius:B,cursorStyle:"ns-resize",color:t,strokeWidth:E}):void 0]})},Yt=A=>{const{color:t,elementWidth:e,onBeginRotate:n,scaleFactor:a}=A,i=UA((A=>{A.stopPropagation(),n()}),[n]),s=10*a,c=1.2*a;return GA("g",{children:[SA("circle",{cx:e/2,cy:-2.5*s,r:1.3*s,fill:"rgba(0, 0, 0, 0.5)",opacity:.4,style:{cursor:"ew-resize"},onPointerDown:i}),SA("circle",{cx:e/2,cy:-2.5*s,r:s,fill:"#fff",style:{cursor:"ew-resize"},stroke:t,strokeWidth:c,onPointerDown:i}),GA("svg",{x:e/2-s,y:-2.5*s-s,xmlns:"http://www.w3.org/2000/svg",style:{cursor:"ew-resize"},height:2*s,viewBox:"0 0 24 24",width:2*s,fill:t,onPointerDown:i,children:[SA("path",{d:"M0 0h24v24H0z",fill:"none"}),SA("path",{d:"M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"})]})]})},mt=A=>{const{color:t,height:e,highlighted:n,id:a,immutable:i,onBeginMove:s,onBeginResize:c,onBeginRotate:o,onPointerEnter:g,onPointerLeave:B,onSelected:r,pressed:w,rotation:E,scaleFactor:Q,selected:l,width:C,x:h,y:d,disableX:D,disableY:I}=A,p=1.2*Q,M=UA((A=>{2===A.button&&(A.stopPropagation(),r(a,A)),0===A.button&&(A.stopPropagation(),!l&&r(a,A),s())}),[a,l,r,s]),f=UA((()=>{g(a)}),[a,g]),u=UA((()=>{B(a)}),[a,B]);return GA("g",{transform:`translate(${h}, ${d}) rotate(${E} ${C/2} ${e/2})`,children:[SA("rect",{className:"interactableInnerRect",width:C,height:e,stroke:l||n?t:"none",pointerEvents:i?"none":"visibleFill",fill:"none",strokeWidth:p,style:{cursor:i?void 0:l?w?"grabbing":"grab":"pointer"},onPointerDown:i?void 0:M,onPointerEnter:i?void 0:f,onPointerLeave:i?void 0:u}),l&&GA(PA,{children:[SA(Yt,{color:t,elementWidth:C,onBeginRotate:o,scaleFactor:Q}),SA(Ft,{color:t,elementHeight:e,elementWidth:C,rotation:E,scaleFactor:Q,onBeginResize:c,disableX:D,disableY:I})]})]})},yt=({primaryColor:A,containerHeight:t,containerWidth:e,customViewbox:n,editorRef:a,elementEvent:i,guidelines:s,layoutHeight:c,layoutWidth:o,targetedElements:g,scale:B,selectedElement:w,onElementEvent:E,onElementSelected:Q,onSequenceStart:l})=>{const{state:C}=ct(),{getLayoutById:h}=_A(),d=h(C.layoutId),[D,I]=NA(void 0),p=UA((A=>{I(A)}),[]),M=UA((A=>{D===A&&I(void 0)}),[D]),f=UA((()=>{l(),E({type:wt.Translate})}),[E]),u=UA(((A,t)=>{l(),E({type:wt.Resize,relativeAxis:A,screenAxis:t})}),[E]),F=UA((()=>{l(),E({type:wt.Rotate})}),[E]),Y=n||{x:0,y:0,width:o,height:c},m=B*(Math.sqrt(Y.width*Y.height)/1e3)*(100/Math.sqrt(t*e))*Math.sqrt((y=e/t,Math.exp(Math.abs(Math.log(y)))));var y;const N=d.layoutState.elements.findIndex((({id:A})=>A===w)),H=[...d.layoutState.elements];return N>=0&&H.push(H.splice(N,1)[0]),GA("svg",{xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",xmlSpace:"preserve",version:"1.1",style:{touchAction:"none",position:"absolute",maxWidth:"100%",maxHeight:"100%"},width:"100%",height:"100%",viewBox:`${Y.x} ${Y.y} ${Y.width} ${Y.height}`,overflow:"overlay",children:[SA("rect",{fill:"none",stroke:"none",ref:a,width:o,height:c}),s.map((A=>A.svgNode)),H.map((t=>{const e=void 0!==w&&t.id===w,n=e&&void 0!==i,a=void 0!==D&&t.id===D;return SA(mt,{color:A,id:t.id,selected:e,highlighted:a,pressed:n,x:t.x,y:t.y,disableX:t.type===r.Frame,disableY:t.type===r.Textbox||t.type===r.Frame,width:t.width,height:t.height,rotation:t.rotation,immutable:t.immutable||g&&!g.includes(t.id),onSelected:Q,onBeginMove:f,onBeginResize:u,onBeginRotate:F,onPointerEnter:p,onPointerLeave:M,scaleFactor:m},t.id)}))]})},Nt=A=>{const{color:t,editorRef:e,zoomableElementRef:n,interactionElementRef:a,guidelines:i,isMakingAdjustments:s,viewmask:c,visibleLayoutId:o,xTranslation:g,yTranslation:B,targetedElements:r,borderRadius:w,handleContextMenu:E,handleKeyDown:Q,handleKeyUp:l,handlePointerMove:C,handlePointerPressedBackground:h,handlePointerReleased:d,handleScroll:D,onSequenceStart:I,setElementEvent:p,onElementSelected:M}=A,{getLayoutById:f}=_A(),u=f(o),F=u.layoutState,{state:Y}=ct(),m=UA((A=>{if(c){const t={left:c.x,top:c.y,width:c.width,height:c.height,panelId:"",rotation:0};return Q(A,t)}return Q(A)}),[Q,c]),y=UA((A=>{if(c){const t={left:c.x,top:c.y,width:c.width,height:c.height,panelId:"",rotation:0};return C(A,t)}return C(A)}),[C,c]);return SA("div",{style:{justifyContent:"center",position:"relative",height:"100%",width:"100%",scrollbarWidth:"none",outline:"none"},onContextMenu:E,onKeyDown:m,onKeyUp:l,onPointerDown:h,onPointerMoveCapture:y,onPointerUp:d,onWheelCapture:D,ref:a,tabIndex:-1,children:GA("div",{ref:n,style:{height:"100%",transform:`scale(${Y.zoom}) translate(${g}px, ${B}px)`,display:"grid",filter:"drop-shadow(rgba(0, 0, 0, 0.2) 0px 0px 6px)"},children:[A.children,u.getComponentWithProps({height:s?"100%":"auto",maxHeight:"100%",maxWidth:"100%",position:"absolute",viewmask:c,width:s?"100%":"auto",borderRadius:w}),SA(yt,{primaryColor:t,containerHeight:n.current?.offsetHeight||1024,containerWidth:n.current?.offsetWidth||1024,editorRef:e,elementEvent:Y.elementEvent,guidelines:i,layoutHeight:F.layout.height,layoutWidth:F.layout.width,onElementEvent:p,onSequenceStart:I,onElementSelected:M,scale:10/Y.zoom,selectedElement:Y.selectedElement,targetedElements:r})]})})},Ht=({color:A,borderRadius:t,guidelineColor:e,handleContextMenu:n,onElementSelected:a})=>{const{commandDispatcher:i,getLayoutById:s}=_A(),{state:c,uiDispatcher:o}=ct(),g=RA(null),B=RA(null),Q=RA(null),{guidelines:l,handleKeyDown:C,handleKeyUp:h,handlePointerMove:d,handlePointerPressedBackground:D,handlePointerReleased:I,handleScroll:p,handleSequenceStart:M,setElementEvent:f}=Mt(g,B,Q,void 0,"advanced",i,e),u=UA(((A,t)=>{const e=s(c.layoutId).layoutState.elements.find((t=>t.id===A));if(A&&e&&e.type===r.Textbox){const t=e.algorithm;(!t||t===w.Autosize)&&i(new E(A,w.Traditional))}a&&a(A,t),o(new st({selectedElement:A}))}),[i,s,c.layoutId,o]);return SA(Nt,{color:A,editorRef:g,interactionElementRef:B,zoomableElementRef:Q,guidelines:l,visibleLayoutId:c.layoutId,xTranslation:0,yTranslation:0,borderRadius:t,handleContextMenu:n,handleKeyDown:C,handleKeyUp:h,handlePointerMove:d,handlePointerPressedBackground:D,handlePointerReleased:I,handleScroll:p,onSequenceStart:M,setElementEvent:f,onElementSelected:u})};class xt{get(A){return localStorage.getItem(A)||void 0}set(A,t){localStorage.setItem(A,t)}remove(A){localStorage.removeItem(A)}getMap(A){const t=this.get(A);if(t)return new Map(JSON.parse(t))}setMap(A,t){const e=JSON.stringify([...t.entries()]);this.set(A,e)}}class Rt{storage=new Map;get(A){return this.storage.get(A)||void 0}set(A,t){this.storage.set(A,t)}remove(A){this.storage.delete(A)}getMap(A){const t=this.get(A);if(t)return new Map(JSON.parse(t))}setMap(A,t){const e=JSON.stringify([...t.entries()]);this.set(A,e)}}const Ut=(()=>{try{return localStorage?new xt:new Rt}catch{return console.warn("Local storage was unavilable due to browser security settings. Using in-memory storage instead."),new Rt}})(),St=MA`
     mutation CreateTransaction($integrationProductId: String!, $bulk: Boolean) {
         transactionCreate(integrationProductId: $integrationProductId, bulk: $bulk) {
             id

package/package.json

@@ -1,9 +1,8 @@
 {
     "name": "@spiffcommerce/core",
-    "version": "0.7.6",
+    "version": "0.8.0",
     "description": "Core client API for interacting with the Spiff Commerce backend.",
     "source": "src/index.ts",
-    "main": "dist/main.js",
     "module": "dist/module.js",
     "types": "dist/types.d.ts",
     "scripts": {
@@ -13,9 +12,7 @@
         "prepare": "yarn run build"
     },
     "targets": {
-        "main": {
-            "optimize": true
-        },
+        "main": false,
         "module": {
             "optimize": true
         }
@@ -60,18 +57,18 @@
         "react-dom": "^17.0.2"
     },
     "dependencies": {
-        "@apollo/client": "^3.6.0",
+        "@apollo/client": "^3.7.0",
         "@spiffcommerce/papyrus": "^1.3.1",
         "@spiffcommerce/preview": "^2.0.3",
         "canvg": "^4.0.1",
         "cross-fetch": "^3.1.5",
-        "graphql": "^16.4.0",
-        "opentype.js": "^1.3.1",
+        "graphql": "^16.6.0",
+        "opentype.js": "^1.3.4",
         "lodash.clonedeep": "^4.5.0",
         "lodash.debounce": "^4.0.8",
         "lodash.isequal": "^4.5.0",
-        "qrcode": "^1.4.4",
+        "qrcode": "^1.5.1",
         "svg-path-bbox": "^1.2.2",
-        "swagger-client": "spiffdev/swagger-js.git"
+        "swagger-client": "3.18.5"
     }
 }