@spiffcommerce/core 0.9.5 → 0.9.6

package/dist/module.js

@@ -1,4 +1,4 @@
-import{CommandContext as A,AssetType as t,BringForwardCommand as e,CanvasCommand as n,CreateElementCommand as a,CreateLayoutCommand as i,DeleteElementCommand as s,FontAlignmentCommand as o,FontColorCommand as c,FontSizeCommand as r,FontSourceCommand as g,GroupCommand as B,LayoutElementFactory as w,LayoutElementType as E,MoveCommand as l,ResizeCommand as Q,RotateCommand as C,SendBackwardsCommand as h,StepAspectType as d,StepType as D,TextChangeCommand as I,UnitOfMeasurement as u,dataUrlFromExternalUrl as p,findElement as f,frameDataCache as m,generate as M,generateSVGWithUnknownColors as F,getAttributesFromArrayBuffer as Y,rehydrateSerializedLayout as y,getFrameData as N,getSvgString as x,loadFontFromDataUrl as H,loadFontFromExternalUrl as R,determineCorrectFontSizeAndLines as U,patternImageDataCache as S,registerJSDOM as G,TextAlgorithm as v,FontAlgorithmCommand as P,getAxisAlignedBoundingBox as J,isCloseToValue as k,mmPerPixel as L,cmPerPixel as O,ScaleAxis as b,getElementVertices as z,rotateAroundPoint as T,calculateTextboxLines as K,defaultLineHeightFactor as j,findAngle as V,currentDirection as W,modifySVGWithElementProperties as X,IllustrationColorCommand as q,IllustrationCacheCommand as Z,getFontMetrics as $,applyTextTransformations as _,UpdateWorkflowStateCommand as AA,calculateOffsets as tA,UpdateFramePattern as eA,generateDefaultRectangleFrameSvg as nA,fetchAsString as aA,GetSVGDimensions as iA,ShiftPatchworkCommand as sA,Patchwork as oA,sanitizeSvgTree as cA,createElementNS as rA,createElement as gA,sortElementsByLayersWithIndex as BA,toBase64 as wA,getPatternImageData as EA,getVariant as lA,generateFrameSVG as QA,getDefaultVariant as CA,domParser as hA,traverse as dA,xmlSerializer as DA,fetchAsArrayBuffer as IA,arrayBufferToDataUrl as uA,loadFontFaceSet as pA}from"@spiffcommerce/papyrus";import fA from"swagger-client";import{createHttpLink as mA,InMemoryCache as MA,ApolloClient as FA,from as YA,gql as yA}from"@apollo/client";import{setContext as NA}from"@apollo/client/link/context";import{onError as xA}from"@apollo/client/link/error";import{fetch as HA}from"cross-fetch";import{createContext as RA,useContext as UA,useEffect as SA,useState as GA,useReducer as vA,useMemo as PA,useRef as JA,useCallback as kA}from"react";import{jsx as LA,jsxs as OA,Fragment as bA}from"react/jsx-runtime";import zA from"lodash.isequal";import{Canvg as TA}from"canvg";import KA from"lodash.clonedeep";import jA from"lodash.debounce";import{toString as VA}from"qrcode";import WA from"react-dom/server";import XA from"svg-path-bbox";function qA(A,t,e){return t in A?Object.defineProperty(A,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):A[t]=e,A}const ZA=new class{constructor(){qA(this,"defaultServerUrl","https://api.spiff.com.au"),qA(this,"defaultServicesApiUrl","https://services.spiff.com.au"),qA(this,"defaultHubUrl","https://hub.spiff.com.au"),qA(this,"serverUrl",void 0),qA(this,"servicesApiUrl",void 0),qA(this,"hubUrl",void 0),qA(this,"serverUrlCallbacks",void 0),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)}};function $A(A,t,e){return t in A?Object.defineProperty(A,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):A[t]=e,A}let _A;const At=A=>{_A=A},tt=async()=>{const A={transactionOwnerId:_A};return window.location.href.includes("/workflows/product/")?{...await new Promise((A=>{const t=ZA.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 et=new class{constructor(){$A(this,"client",void 0),$A(this,"uncachedOperations",[]),ZA.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 tt();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 tt(),t=ZA.getServerUrl()+"/v2/api-docs";return await fA(t,{authorizations:{OAuth2:{token:{access_token:A.bearer,token_type:"Bearer"}},PartnerId:A.partnerId}})}};const nt=new class{constructor(){$A(this,"shadowGraphqlClient",void 0),this.shadowGraphqlClient=this.constructShadowGraphqlClient(),ZA.addServerUrlCallback((()=>{this.shadowGraphqlClient=this.constructShadowGraphqlClient()}))}getShadowGraphqlClient(){return this.shadowGraphqlClient}constructShadowGraphqlClient(){const A=mA({uri:`${ZA.getServerUrl()}/graphql`,fetch:HA}),t=NA((async(A,{headers:t})=>{const e=t||{},n=await tt();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=xA((({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 MA({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 FA({link:YA([e,t,A]),cache:n,name:"Core"})}};function at(A,t,e){return t in A?Object.defineProperty(A,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):A[t]=e,A}const it=new class{constructor(){at(this,"server",void 0),at(this,"cache",new Map),at(this,"materialCache",new Map),at(this,"loadImageAsFileInfo",(async A=>{const t=await A.arrayBuffer(),e=await Y(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)}})),this.server=et}async getLocalOrFromServer(A){if(this.cache.has(A))return this.cache.get(A);const t=(async()=>(await et.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 et.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 o=new XMLHttpRequest;return o.open("PUT",s.assetResponse.uploadUrl,!0),o.setRequestHeader("Content-Type",s.mimeType),o.setRequestHeader("Cache-Control","public,max-age=31536000,immutable"),o.upload.onprogress=A=>{A.lengthComputable&&e(100*A.loaded/A.total)},o.onload=()=>{const A=s.assetResponse.asset;n(A)},o.onerror=()=>{console.warn("Asset upload failed")},o.send(A.blob),s.assetResponse.asset}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)}}};function st(A,t,e){return t in A?Object.defineProperty(A,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):A[t]=e,A}const ot=new class{constructor(){st(this,"cache",new Map),st(this,"getDisplayImageSource",(A=>{if(A){const t=A.displayImage?.links.find((A=>"cdn"===A.rel));if(t)return t.href}})),st(this,"getSelectedVariant",((A,t)=>{if(A&&0!==t.length)return A.variants.find((A=>A.id===t[0]))})),st(this,"getSelectedVariants",((A,t)=>A?.variants.filter((A=>t.includes(A.id)))||[]))}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 ot.getLocalOrFromServer(et,A);"Font"===t.data.type&&t.data.variants.forEach((async A=>{if(A.assetKey){const t=(await it.getLocalOrFromServer(A.assetKey)).links.find((A=>"cdn"===A.rel))?.href;t&&await R(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 it.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 it.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}},ct=RA(new A),rt=()=>{const A=UA(ct);SA((()=>{A.registerStateCallback((()=>{e(new Date)}))}),[A]);const[t,e]=GA(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 gt;var Bt;(Bt=gt||(gt={})).None="None",Bt.FrameAdjustment="FrameAdjustment",Bt.FinalizeDesign="FinalizeDesign";const wt=(A,t)=>({layoutId:A()[0].layoutState.layout.id,selectedElement:void 0,zoom:t,maxZoom:5,units:u.Pixel,subMenu:gt.None,activeModifierKeys:[],metaPressed:!1,elementEvent:void 0,scrolledMovement:!1}),Et=(A,t)=>zA(A,t.apply(A))?A:t.apply(A),lt=RA({}),Qt=A=>{const{getAllLayouts:t}=rt(),[e,n]=vA(Et,wt(t,A.defaultZoom||1)),a=PA((()=>({state:e,uiDispatcher:n})),[e,n]);return LA(lt.Provider,{value:a,children:A.children})};class Ct{constructor(A){var t,e,n;n=void 0,(e="changes")in(t=this)?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,this.changes=A}apply(A){return{...A,...this.changes}}}const ht=()=>UA(lt);let dt;var Dt;(Dt=dt||(dt={}))[Dt.Orbit=0]="Orbit",Dt[Dt.Pan=1]="Pan";const It=(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)),o=s.map((A=>J(A.x,A.y,A.width,A.height,A.rotation))),c=[],r=new Set;o.forEach((A=>r.add(A.minX))),o.forEach((A=>r.add(A.maxX))),[0,a/2,a].forEach((A=>r.add(A)));const g=new Set;o.forEach((A=>g.add(A.minY))),o.forEach((A=>g.add(A.maxY))),[0,i/2,i].forEach((A=>g.add(A)));const B=s.map((A=>A.y));for(let A=-315;A<=315;A+=45)B.push(A);const w=J(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}],l=[{value:w.minY,anchor:-1},{value:w.minY+(w.maxY-w.minY)/2,anchor:0},{value:w.minY+(w.maxY-w.minY),anchor:1}],Q=[{value:A.rotation,anchor:0}],C=(A,t,n,s)=>{const o=[];return t.forEach((t=>{const c=n.find((A=>k(t,A.value,2*e))),[r,g]=((A,t)=>[{x:"x"===A?t:0,y:"x"===A?0:t},{x:"x"===A?t:a,y:"x"===A?i:t}])(A,t),B="rotation"===A?null:LA("line",{x1:r.x,y1:r.y,x2:g.x,y2:g.y,stroke:s||"#D61B5C",strokeDasharray:5*e,strokeWidth:1.2*e,overflow:"overlay"},`${A}-${t}-${r.x}-${r.y}-${g.x}-${g.y}`);void 0!==c&&o.push({type:A,value:t,anchorPoint:c.anchor,svgNode:B,guidelineCoordinates:[r,g]})})),o};return c.push(...C("x",Array.from(r),E,n)),c.push(...C("y",Array.from(g),l,n)),c.push(...C("rotation",B,Q,n)),c};let ut;var pt;let ft;var mt;(pt=ut||(ut={})).Translate="Translate",pt.Rotate="Rotate",pt.Resize="Resize",(mt=ft||(ft={})).ControlLeft="ControlLeft",mt.ControlRight="ControlRight",mt.Equal="Equal",mt.MetaLeft="MetaLeft",mt.MetaRight="MetaRight",mt.Minus="Minus",mt.ArrowLeft="ArrowLeft",mt.ArrowRight="ArrowRight",mt.ArrowUp="ArrowUp",mt.ArrowDown="ArrowDown",mt.AltLeft="AltLeft",mt.AltRight="AltRight",mt.Delete="Delete",mt.Backspace="Backspace";const Mt=(A,t,e,n)=>{const a=()=>{switch(e){case u.Pixel:return 1;case u.Millimeter:return L;case u.Centimeter:return O;default:throw new Error("Unknown unit of measurement")}};let i=t.x,s=t.y,o=t.x,c=t.y;switch(A){case ft.ArrowLeft:o=t.x-1/a();break;case ft.ArrowUp:c=t.y-1/a();break;case ft.ArrowRight:o=t.x+1/a();break;case ft.ArrowDown:c=t.y+1/a();break;default:throw new Error("Unhandled element interaction!")}const r=J(o,c,t.width,t.height,t.rotation);return(!n||r.minX>=n.left&&r.maxX<=n.left+n.width&&r.minY>=n.top&&r.maxY<=n.top+n.height)&&(i=o,s=c),new l(t.id,i,s)};var Ft=0,Yt=0,yt=0;const Nt=(A,t,e,n,a,i,s)=>{const o=((A,t,e,n,a,i,s)=>{const o=n.width/t.width,c=n.height/t.height,r=A.movementX/o,g=A.movementY/c,B=e.rotation*Math.PI/180,w=Math.sin(B),l=Math.cos(B);let Q;switch(a.type){case ut.Resize:let t={top:e.y,left:e.x,width:e.width,height:e.height,rotation:e.rotation,fontSize:e.fontSize},C=t;switch(a.screenAxis){case b.North:{const A=-r*w+g*l,n=e.y+A,a=e.height-A,i=z({...e}).center,s=z({...e,y:n,height:a}).center,o=T(s,i,B),c=o.x-e.width/2,E=o.y-a/2;C={...t,left:c,top:E,height:a}}break;case b.East:{const A=r*l+g*w,n=e.width+A;let a=e.height;if(e.type===E.Textbox){const A=e;a=K(A.fontSize,A.fontData,A,A.input||A.text||"",A.lineHeight).requiredHeight}const i=z({...e}).center,s=z({...e,width:n,height:a}).center,o=T(s,i,B),c=o.x-n/2,Q=o.y-a/2;C={...t,left:c,top:Q,width:n,height:a}}break;case b.West:{const A=r*l+g*w,n=e.x+A,a=e.width-A;let i=e.height;if(e.type===E.Textbox){const A=e;i=K(A.fontSize,A.fontData,A,A.input||A.text||"",A.lineHeight).requiredHeight}const s=z({...e}).center,o=z({...e,width:a,height:i,x:n}).center,c=T(o,s,B),Q=c.x-a/2,h=c.y-i/2;C={...t,left:Q,top:h,width:a,height:i}}break;case b.South:{const A=-r*w+g*l,n=e.height+A,a=z({...e}).center,i=z({...e,height:n}).center,s=T(i,a,B),o=s.x-e.width/2,c=s.y-n/2;C={...t,left:o,top:c,height:n}}break;case b.Northeast:{const A=r*l+g*w,n=e.width+A;let a=e.height+A,i=e.y-A,s=e.fontSize;if(e.type===E.Textbox){const t=e;s=t.fontSize+A/8,a=K(s,t.fontData,t,t.input||t.text||"",t.lineHeight).requiredHeight;const n=t.lineHeight||j;i=e.y-A*n/8}const o=z({...e}).center,c=z({...e,width:n,height:a,y:i}).center,Q=T(c,o,B),h=Q.x-n/2,d=Q.y-a/2;C={...t,left:h,top:d,width:n,height:a,fontSize:s}}break;case b.Northwest:{const A=-r*l+-g*w,n=e.x-A,a=e.width+A;let i=e.y-A,s=e.height+A,o=e.fontSize;if(e.type===E.Textbox){const t=e;o=t.fontSize+A/8,s=K(o,t.fontData,t,t.input||t.text||"",t.lineHeight).requiredHeight;const n=t.lineHeight||j;i=e.y-A*n/8}const c=z({...e}).center,Q=z({...e,x:n,y:i,width:a,height:s}).center,h=T(Q,c,B),d=h.x-a/2,D=h.y-s/2;C={...t,left:d,top:D,width:a,height:s,fontSize:o}}break;case b.Southeast:{const A=r*l+g*w,n=e.width+A;let a=e.height+A,i=e.fontSize;if(e.type===E.Textbox){const t=e;i=t.fontSize+A/8,a=K(i,t.fontData,t,t.input||t.text||"",t.lineHeight).requiredHeight}const s=z({...e}).center,o=z({...e,width:n,height:a}).center,c=T(o,s,B),Q=c.x-n/2,h=c.y-a/2;C={...t,left:Q,top:h,width:n,height:a,fontSize:i}}break;case b.Southwest:{const A=-r*l+-g*w,n=e.width+A;let a=e.x-A,i=e.height+A,s=e.fontSize;if(e.type===E.Textbox){const t=e;s=t.fontSize+A/8,i=K(s,t.fontData,t,t.input||t.text||"",t.lineHeight).requiredHeight}const o=z({...e}).center,c=z({...e,width:n,height:i,x:a}).center,Q=T(c,o,B),h=Q.x-n/2,d=Q.y-i/2;C={...t,left:h,top:d,width:n,height:i,fontSize:s}}}return Q=J(C.left,C.top,C.width,C.height,C.rotation),(!s||Q.minX>=s.left&&Q.maxX<=s.left+s.width&&Q.minY>=s.top&&Q.maxY<=s.top+s.height)&&(t=C),t;case ut.Rotate:const h={x:A.clientX,y:A.clientY};let d,D=e.rotation;const I=z(e,n,{x:o,y:c}),u=V(h,I.c,I.d),p=V(h,I.d,I.c);if(0===i.filter((A=>"rotation"===A.type)).length)yt=0,d=(e.rotation+u-p)%360;else{yt+=Math.sqrt(r**2+g**2);const A=Math.abs(yt)>7*window.devicePixelRatio/o;d=A?(e.rotation+u-p)%360:i.find((A=>"rotation"===A.type))?.value||0,A&&(yt=0)}return Q=J(e.x,e.y,e.width,e.height,d),(!s||Q.minX>=s.left&&Q.maxX<=s.left+s.width&&Q.minY>=s.top&&Q.maxY<=s.top+s.height)&&(D=d),{top:e.y,left:e.x,width:e.width,height:e.height,rotation:D};case ut.Translate:let f,m,M=e.x,F=e.y;if(0===i.filter((A=>"rotation"!==A.type)).length)Ft=0,Yt=0,f=e.x+r,m=e.y+g;else{const A=i.find((A=>"x"===A.type)),t=i.find((A=>"y"===A.type));A||(Ft=0),t||(Yt=0);const n=Math.abs(Ft)>7*window.devicePixelRatio/o,a=Math.abs(Yt)>7*window.devicePixelRatio/c;f=A?n?e.x+Ft:e.x:e.x+r,m=t?a?e.y+Yt:e.y:e.y+g,Ft=n?0:Ft+r,Yt=a?0:Yt+g}return Q=J(f,m,e.width,e.height,e.rotation),(!s||Q.minX>=s.left&&Q.maxX<=s.left+s.width&&Q.minY>=s.top&&Q.maxY<=s.top+s.height)&&(M=f,F=m),{top:F,left:M,width:e.width,height:e.height,rotation:e.rotation}}})(A,t,e,n,a,i,s),c=[];if(e.type===E.Textbox){const A=e;c.push(new I(A.id,A.text||A.input||""))}if(c.push(new l(e.id,o.left,o.top),new Q(e.id,o.width,o.height),new C(e.id,o.rotation)),e.type===E.Textbox){const A=e;o.fontSize&&A.fontSize!==o.fontSize&&c.push(new r(A.id,o.fontSize))}return c},xt=.5,Ht=(A,t,e,n,a,i,o)=>{const{state:c,uiDispatcher:r}=UA(lt),{getLayoutById:g,getReducerState:w,flattenSequence:E}=rt(),[l,Q]=GA(void 0),[C,h]=GA(void 0),d=g(c.layoutId);SA((()=>{if("adjustment"===a&&A?.current&&n){if(n<.5)return void r(new Ct({zoom:.5}));if(n>c.maxZoom)return void r(new Ct({zoom:c.maxZoom}));r(new Ct({zoom:n}))}}),[n,r,A,a,c.maxZoom]);const D=kA(((A,n)=>{r(new Ct({zoom:n}));const i=t?.current?.scrollWidth-t?.current?.clientWidth!=0,s=t?.current?.scrollHeight-t?.current?.clientHeight!=0;t.current&&e.current&&!c.scrolledMovement&&"advanced"===a&&(s&&(t.current.scrollTop=e.current.offsetTop+(t.current.scrollHeight-t.current.clientHeight)/2),i&&(t.current.scrollLeft=(e.current.offsetLeft+t.current.scrollWidth-t.current.clientWidth)/2))}),[r,t,e,c.scrolledMovement,a]);SA((()=>{c.zoom<=1&&r(new Ct({scrolledMovement:!1}))}),[r,c.zoom]);const I=t?.current?.getBoundingClientRect(),u=((I?.width||1)+(I?.height||1))/2,p=(d.layoutState.layout.width+d.layoutState.layout.height)/2/u/c.zoom,f=PA((()=>{const A=c.activeModifierKeys,t=c.elementEvent,e=A.includes(ft.ControlLeft)||A.includes(ft.MetaLeft)||A.includes(ft.ControlRight)||A.includes(ft.MetaRight);if(!c.selectedElement||!t||e)return[];const n=t&&t.type===ut.Translate,a=t&&t.type===ut.Rotate,i=d.layoutState.elements.find((A=>A.id===c.selectedElement));return(n||a)&&i?It(i,d.layoutState,p,o):[]}),[c.selectedElement,c.elementEvent,c.activeModifierKeys,d.layoutState,p]),m=kA((()=>{const A=M();Q(A),h(w().transaction)}),[w]),F=kA((()=>{r(new Ct({selectedElement:void 0}))}),[r]),Y=kA((()=>{r(new Ct({scrolledMovement:!0}))}),[r]),y=kA(((e,n)=>{const a=d.layoutState.elements.find((A=>A.id===c.selectedElement));if(!(c.elementEvent&&A.current&&t.current&&c.selectedElement&&a))return;t.current.hasPointerCapture(e.pointerId)||t.current.setPointerCapture(e.pointerId);const s=A.current.getBoundingClientRect(),o=new B(Nt(e,d.layoutState.layout,a,s,c.elementEvent,f,n));o.sequenceId=l,i(o)}),[d.layoutState.elements,d.layoutState.layout,c.elementEvent,A,c.selectedElement,t,f,i]),N=kA((A=>{r(new Ct({elementEvent:A}))}),[r]),x=kA((()=>{r(new Ct({elementEvent:void 0})),l&&C&&(E(l,C),Q(void 0),h(void 0))}),[r,l,C,E]),H=kA(((A,t)=>{let e=c.zoom;const n=c.maxZoom,o=c.selectedElement,g=c.activeModifierKeys;if((g.includes(ft.AltLeft)||g.includes(ft.AltRight))&&(A.code===ft.Equal||A.code===ft.Minus)){const t=.05*n;A.code===ft.Equal?r(new Ct({zoom:e+t<=n?e+=t:e})):r(new Ct({zoom:e-t>=.5?e-t:e}))}const B=d.layoutState.elements.find((A=>A.id===o));if(o&&B){if(A.code===ft.MetaLeft||A.code===ft.ControlLeft||A.code===ft.MetaRight||A.code===ft.ControlRight){const t=A.code,e=c.activeModifierKeys;if(!e.includes(t))return r(new Ct({activeModifierKeys:e.concat(t)}))}if(A.code===ft.ArrowDown||A.code===ft.ArrowUp||A.code===ft.ArrowLeft||A.code===ft.ArrowRight){r(new Ct({elementEvent:{type:ut.Translate}}));const e=Mt(A.code,B,c.units,t);i(e),r(new Ct({elementEvent:void 0}))}A.code!==ft.Delete&&A.code!==ft.Backspace||"advanced"!==a||(r(new Ct({selectedElement:void 0})),i(new s(B.id)))}}),[i,r,d.layoutState.elements,a,c.activeModifierKeys,c.maxZoom,c.selectedElement,c.units,c.zoom]),R=kA((A=>{if(A.code===ft.MetaLeft||A.code===ft.ControlLeft||A.code===ft.MetaRight||A.code===ft.ControlRight){const t=c.activeModifierKeys,e=A.code;r(new Ct({activeModifierKeys:t.filter((A=>A!==e))}))}}),[r,c.activeModifierKeys]);return{guidelines:f,scale:p,zoomableElementRef:e,setElementEvent:N,handleZoom:D,handleKeyDown:H,handleKeyUp:R,handlePointerPressedBackground:F,handlePointerReleased:x,handlePointerMove:y,handleScroll:Y,handleSequenceStart:m}},Rt=A=>{const{x:t,y:e,cursorStyle:n,onPointerDown:a,handleClass:i,cornerRadius:s,color:o,strokeWidth:c}=A;return LA("circle",{className:i,cx:t,cy:e,r:s,fill:"#ffffff",style:{cursor:n},stroke:o,strokeWidth:c,onPointerDown:a})},Ut=A=>{const{x:t,y:e,width:n,height:a,cursorStyle:i,onPointerDown:s,edgeHandleRadius:o,color:c,strokeWidth:r}=A;return LA("rect",{x:t,y:e,width:n,height:a,rx:o,fill:"#ffffff",style:{cursor:i},stroke:c,strokeWidth:r,onPointerDown:s})},St=A=>{const{color:t,elementHeight:e,elementWidth:n,onBeginResize:a,rotation:i,scaleFactor:s,disableX:o,disableY:c}=A,r=7.5*s,g=3*s,B=28*s,w=6*s,E=1.2*s,l=e-2*r,Q=kA(((A,t,e)=>{A.stopPropagation(),a(t,e)}),[a]),C=kA((A=>Q(A,W(b.West,360-i),b.West)),[Q,i]),h=kA((A=>Q(A,W(b.East,360-i),b.East)),[Q,i]),d=kA((A=>Q(A,W(b.North,360-i),b.North)),[Q,i]),D=kA((A=>Q(A,W(b.South,360-i),b.South)),[Q,i]),I=kA((A=>Q(A,b.Northwest,b.Northwest)),[Q]),u=kA((A=>Q(A,b.Northeast,b.Northeast)),[Q]),p=kA((A=>Q(A,b.Southwest,b.Southwest)),[Q]),f=kA((A=>Q(A,b.Northeast,b.Southeast)),[Q]),m=B<=l;return OA(bA,{children:[LA(Rt,{x:0,y:0,cursorStyle:"nwse-resize",onPointerDown:I,handleClass:"cornerNorthWest",cornerRadius:r,color:t,strokeWidth:E}),m?LA(Rt,{x:n,y:0,cursorStyle:"nesw-resize",onPointerDown:u,handleClass:"cornerNorthEast",cornerRadius:r,color:t,strokeWidth:E}):void 0,m?LA(Rt,{x:n,y:e,cursorStyle:"nwse-resize",onPointerDown:f,handleClass:"cornerSouthEast",cornerRadius:r,color:t,strokeWidth:E}):void 0,m?LA(Rt,{x:0,y:e,cursorStyle:"nesw-resize",onPointerDown:p,handleClass:"cornerSouthWest",cornerRadius:r,color:t,strokeWidth:E}):void 0,m&&!o?LA(Ut,{x:-w/2,y:e/2-B/2,width:w,height:B,onPointerDown:C,edgeHandleRadius:g,cursorStyle:"ew-resize",color:t,strokeWidth:E}):void 0,m&&!c?LA(Ut,{x:n/2-B/2,y:e-w/2,width:B,height:w,onPointerDown:D,edgeHandleRadius:g,cursorStyle:"ns-resize",color:t,strokeWidth:E}):void 0,o?void 0:LA(Ut,{x:n-w/2,y:e/2-Math.min(B,.8*e)/2,width:w,height:Math.min(B,.8*e),onPointerDown:h,edgeHandleRadius:g,cursorStyle:"ew-resize",color:t,strokeWidth:E}),m&&!c?LA(Ut,{x:n/2-B/2,y:-w/2,width:B,height:w,onPointerDown:d,edgeHandleRadius:g,cursorStyle:"ns-resize",color:t,strokeWidth:E}):void 0]})},Gt=A=>{const{color:t,elementWidth:e,onBeginRotate:n,scaleFactor:a}=A,i=kA((A=>{A.stopPropagation(),n()}),[n]),s=10*a,o=1.2*a;return OA("g",{children:[LA("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}),LA("circle",{cx:e/2,cy:-2.5*s,r:s,fill:"#fff",style:{cursor:"ew-resize"},stroke:t,strokeWidth:o,onPointerDown:i}),OA("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:[LA("path",{d:"M0 0h24v24H0z",fill:"none"}),LA("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"})]})]})},vt=A=>{const{color:t,height:e,highlighted:n,id:a,immutable:i,onBeginMove:s,onBeginResize:o,onBeginRotate:c,onPointerEnter:r,onPointerLeave:g,onSelected:B,pressed:w,rotation:E,scaleFactor:l,selected:Q,width:C,x:h,y:d,disableX:D,disableY:I}=A,u=1.2*l,p=kA((A=>{2===A.button&&(A.stopPropagation(),B(a,A)),0===A.button&&(A.stopPropagation(),!Q&&B(a,A),s())}),[a,Q,B,s]),f=kA((()=>{r(a)}),[a,r]),m=kA((()=>{g(a)}),[a,g]);return OA("g",{transform:`translate(${h}, ${d}) rotate(${E} ${C/2} ${e/2})`,children:[LA("rect",{className:"interactableInnerRect",width:C,height:e,stroke:Q||n?t:"none",pointerEvents:i?"none":"visibleFill",fill:"none",strokeWidth:u,style:{cursor:i?void 0:Q?w?"grabbing":"grab":"pointer"},onPointerDown:i?void 0:p,onPointerEnter:i?void 0:f,onPointerLeave:i?void 0:m}),Q&&OA(bA,{children:[LA(Gt,{color:t,elementWidth:C,onBeginRotate:c,scaleFactor:l}),LA(St,{color:t,elementHeight:e,elementWidth:C,rotation:E,scaleFactor:l,onBeginResize:o,disableX:D,disableY:I})]})]})},Pt=({primaryColor:A,containerHeight:t,containerWidth:e,customViewbox:n,editorRef:a,elementEvent:i,guidelines:s,layoutHeight:o,layoutWidth:c,targetedElements:r,scale:g,selectedElement:B,onElementEvent:w,onElementSelected:l,onSequenceStart:Q})=>{const{state:C}=ht(),{getLayoutById:h}=rt(),d=h(C.layoutId),[D,I]=GA(void 0),u=kA((A=>{I(A)}),[]),p=kA((A=>{D===A&&I(void 0)}),[D]),f=kA((()=>{Q(),w({type:ut.Translate})}),[w]),m=kA(((A,t)=>{Q(),w({type:ut.Resize,relativeAxis:A,screenAxis:t})}),[w]),M=kA((()=>{Q(),w({type:ut.Rotate})}),[w]),F=n||{x:0,y:0,width:c,height:o},Y=g*(Math.sqrt(F.width*F.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===B)),x=[...d.layoutState.elements];return N>=0&&x.push(x.splice(N,1)[0]),OA("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:`${F.x} ${F.y} ${F.width} ${F.height}`,overflow:"overlay",children:[LA("rect",{fill:"none",stroke:"none",ref:a,width:c,height:o}),s.map((A=>A.svgNode)),x.map((t=>{const e=void 0!==B&&t.id===B,n=e&&void 0!==i,a=void 0!==D&&t.id===D;return LA(vt,{color:A,id:t.id,selected:e,highlighted:a,pressed:n,x:t.x,y:t.y,disableX:t.type===E.Frame,disableY:t.type===E.Textbox||t.type===E.Frame,width:t.width,height:t.height,rotation:t.rotation,immutable:t.immutable||r&&!r.includes(t.id),onSelected:l,onBeginMove:f,onBeginResize:m,onBeginRotate:M,onPointerEnter:u,onPointerLeave:p,scaleFactor:Y},t.id)}))]})},Jt=A=>{const{color:t,editorRef:e,zoomableElementRef:n,interactionElementRef:a,guidelines:i,isMakingAdjustments:s,viewmask:o,visibleLayoutId:c,xTranslation:r,yTranslation:g,targetedElements:B,borderRadius:w,handleContextMenu:E,handleKeyDown:l,handleKeyUp:Q,handlePointerMove:C,handlePointerPressedBackground:h,handlePointerReleased:d,handleScroll:D,onSequenceStart:I,setElementEvent:u,onElementSelected:p}=A,{getLayoutById:f}=rt(),m=f(c),M=m.layoutState,{state:F}=ht(),Y=kA((A=>{if(o){const t={left:o.x,top:o.y,width:o.width,height:o.height,panelId:"",rotation:0};return l(A,t)}return l(A)}),[l,o]),y=kA((A=>{if(o){const t={left:o.x,top:o.y,width:o.width,height:o.height,panelId:"",rotation:0};return C(A,t)}return C(A)}),[C,o]);return LA("div",{style:{justifyContent:"center",position:"relative",height:"100%",width:"100%",scrollbarWidth:"none",outline:"none"},onContextMenu:E,onKeyDown:Y,onKeyUp:Q,onPointerDown:h,onPointerMoveCapture:y,onPointerUp:d,onWheelCapture:D,ref:a,tabIndex:-1,children:OA("div",{ref:n,style:{height:"100%",transform:`scale(${F.zoom}) translate(${r}px, ${g}px)`,display:"flex",justifyContent:"center",filter:"drop-shadow(rgba(0, 0, 0, 0.2) 0px 0px 6px)"},children:[A.children,m.getComponentWithProps({height:s?"100%":"auto",maxHeight:"100%",maxWidth:"100%",position:"absolute",viewmask:o,width:s?"100%":"auto",borderRadius:w}),LA(Pt,{primaryColor:t,containerHeight:n.current?.offsetHeight||1024,containerWidth:n.current?.offsetWidth||1024,editorRef:e,elementEvent:F.elementEvent,guidelines:i,layoutHeight:M.layout.height,layoutWidth:M.layout.width,onElementEvent:u,onSequenceStart:I,onElementSelected:p,scale:10/F.zoom,selectedElement:F.selectedElement,targetedElements:B})]})})},kt=({color:A,borderRadius:t,guidelineColor:e,handleContextMenu:n,onElementSelected:a})=>{const{commandDispatcher:i,getLayoutById:s}=rt(),{state:o,uiDispatcher:c}=ht(),r=JA(null),g=JA(null),B=JA(null),{guidelines:w,handleKeyDown:l,handleKeyUp:Q,handlePointerMove:C,handlePointerPressedBackground:h,handlePointerReleased:d,handleScroll:D,handleSequenceStart:I,setElementEvent:u}=Ht(r,g,B,void 0,"advanced",i,e),p=kA(((A,t)=>{const e=s(o.layoutId).layoutState.elements.find((t=>t.id===A));if(A&&e&&e.type===E.Textbox){const t=e.algorithm;(!t||t===v.Autosize)&&i(new P(A,v.Traditional))}a&&a(A,t),c(new Ct({selectedElement:A}))}),[i,s,o.layoutId,c]);return LA(Jt,{color:A,editorRef:r,interactionElementRef:g,zoomableElementRef:B,guidelines:w,visibleLayoutId:o.layoutId,xTranslation:0,yTranslation:0,borderRadius:t,handleContextMenu:n,handleKeyDown:l,handleKeyUp:Q,handlePointerMove:C,handlePointerPressedBackground:h,handlePointerReleased:d,handleScroll:D,onSequenceStart:I,setElementEvent:u,onElementSelected:p})};class Lt{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 Ot{constructor(){var A,t,e;A=this,t="storage",e=new Map,t in A?Object.defineProperty(A,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):A[t]=e}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 bt=(()=>{try{return localStorage?new Lt:new Ot}catch{return console.warn("Local storage was unavilable due to browser security settings. Using in-memory storage instead."),new Ot}})(),zt=yA`
+import{CommandContext as A,AssetType as t,BringForwardCommand as e,CanvasCommand as n,CreateElementCommand as a,CreateLayoutCommand as i,DeleteElementCommand as s,FontAlignmentCommand as o,FontColorCommand as c,FontSizeCommand as r,FontSourceCommand as g,GroupCommand as B,LayoutElementFactory as w,LayoutElementType as E,MoveCommand as l,ResizeCommand as Q,RotateCommand as C,SendBackwardsCommand as h,StepAspectType as d,StepType as D,TextChangeCommand as I,UnitOfMeasurement as u,dataUrlFromExternalUrl as p,findElement as f,frameDataCache as m,generate as M,generateSVGWithUnknownColors as F,getAttributesFromArrayBuffer as Y,rehydrateSerializedLayout as y,getFrameData as N,getSvgString as x,loadFontFromDataUrl as H,loadFontFromExternalUrl as R,determineCorrectFontSizeAndLines as U,patternImageDataCache as S,registerJSDOM as G,TextAlgorithm as v,FontAlgorithmCommand as P,getAxisAlignedBoundingBox as J,isCloseToValue as k,mmPerPixel as L,cmPerPixel as O,ScaleAxis as b,getElementVertices as z,rotateAroundPoint as T,calculateTextboxLines as K,defaultLineHeightFactor as j,findAngle as V,currentDirection as W,modifySVGWithElementProperties as X,IllustrationColorCommand as q,IllustrationCacheCommand as Z,getFontMetrics as $,applyTextTransformations as _,UpdateWorkflowStateCommand as AA,calculateOffsets as tA,UpdateFramePattern as eA,generateDefaultRectangleFrameSvg as nA,fetchAsString as aA,GetSVGDimensions as iA,ShiftPatchworkCommand as sA,Patchwork as oA,sanitizeSvgTree as cA,createElementNS as rA,createElement as gA,sortElementsByLayersWithIndex as BA,toBase64 as wA,getPatternImageData as EA,getVariant as lA,generateFrameSVG as QA,getDefaultVariant as CA,domParser as hA,traverse as dA,xmlSerializer as DA,fetchAsArrayBuffer as IA,arrayBufferToDataUrl as uA,loadFontFaceSet as pA}from"@spiffcommerce/papyrus";import fA from"swagger-client";import{createHttpLink as mA,InMemoryCache as MA,ApolloClient as FA,from as YA,gql as yA}from"@apollo/client";import{setContext as NA}from"@apollo/client/link/context";import{onError as xA}from"@apollo/client/link/error";import{fetch as HA}from"cross-fetch";import{createContext as RA,useContext as UA,useEffect as SA,useState as GA,useReducer as vA,useMemo as PA,useRef as JA,useCallback as kA}from"react";import{jsx as LA,jsxs as OA,Fragment as bA}from"react/jsx-runtime";import zA from"lodash.isequal";import{Canvg as TA}from"canvg";import KA from"lodash.clonedeep";import jA from"lodash.debounce";import{toString as VA}from"qrcode";import WA from"react-dom/server";import XA from"svg-path-bbox";function qA(A,t,e){return t in A?Object.defineProperty(A,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):A[t]=e,A}const ZA=new class{constructor(){qA(this,"defaultServerUrl","https://api.spiff.com.au"),qA(this,"defaultServicesApiUrl","https://services.spiff.com.au"),qA(this,"defaultHubUrl","https://hub.spiff.com.au"),qA(this,"serverUrl",void 0),qA(this,"servicesApiUrl",void 0),qA(this,"hubUrl",void 0),qA(this,"serverUrlCallbacks",void 0),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)}};function $A(A,t,e){return t in A?Object.defineProperty(A,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):A[t]=e,A}let _A;const At=A=>{_A=A},tt=async()=>{const A={transactionOwnerId:_A};return window.location.href.includes("/workflows/product/")?{...await new Promise((A=>{const t=ZA.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 et=new class{constructor(){$A(this,"client",void 0),$A(this,"uncachedOperations",[]),ZA.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 tt();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 tt(),t=ZA.getServerUrl()+"/v2/api-docs";return await fA(t,{authorizations:{OAuth2:{token:{access_token:A.bearer,token_type:"Bearer"}},PartnerId:A.partnerId}})}};const nt=new class{constructor(){$A(this,"shadowGraphqlClient",void 0),this.shadowGraphqlClient=this.constructShadowGraphqlClient(),ZA.addServerUrlCallback((()=>{this.shadowGraphqlClient=this.constructShadowGraphqlClient()}))}getShadowGraphqlClient(){return this.shadowGraphqlClient}constructShadowGraphqlClient(){const A=mA({uri:`${ZA.getServerUrl()}/graphql`,fetch:HA}),t=NA((async(A,{headers:t})=>{const e=t||{},n=await tt();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=xA((({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 MA({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 FA({link:YA([e,t,A]),cache:n,name:"Core"})}};function at(A,t,e){return t in A?Object.defineProperty(A,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):A[t]=e,A}const it=new class{constructor(){at(this,"server",void 0),at(this,"cache",new Map),at(this,"materialCache",new Map),at(this,"loadImageAsFileInfo",(async A=>{const t=await A.arrayBuffer(),e=await Y(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)}})),this.server=et}async getLocalOrFromServer(A){if(this.cache.has(A))return this.cache.get(A);const t=(async()=>(await et.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 et.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 o=new XMLHttpRequest;return o.open("PUT",s.assetResponse.uploadUrl,!0),o.setRequestHeader("Content-Type",s.mimeType),o.setRequestHeader("Cache-Control","public,max-age=31536000,immutable"),o.upload.onprogress=A=>{A.lengthComputable&&e(100*A.loaded/A.total)},o.onload=()=>{const A=s.assetResponse.asset;n(A)},o.onerror=()=>{console.warn("Asset upload failed")},o.send(A.blob),s.assetResponse.asset}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)}}};function st(A,t,e){return t in A?Object.defineProperty(A,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):A[t]=e,A}const ot=new class{constructor(){st(this,"cache",new Map),st(this,"getDisplayImageSource",(A=>{if(A){const t=A.displayImage?.links.find((A=>"cdn"===A.rel));if(t)return t.href}})),st(this,"getSelectedVariant",((A,t)=>{if(A&&0!==t.length)return A.variants.find((A=>A.id===t[0]))})),st(this,"getSelectedVariants",((A,t)=>A?.variants.filter((A=>t.includes(A.id)))||[]))}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 ot.getLocalOrFromServer(et,A);"Font"===t.data.type&&t.data.variants.forEach((async A=>{if(A.assetKey){const t=(await it.getLocalOrFromServer(A.assetKey)).links.find((A=>"cdn"===A.rel))?.href;t&&await R(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 it.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 it.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}},ct=RA(new A),rt=()=>{const A=UA(ct);SA((()=>{A.registerStateCallback((()=>{e(new Date)}))}),[A]);const[t,e]=GA(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 gt;var Bt;(Bt=gt||(gt={})).None="None",Bt.FrameAdjustment="FrameAdjustment",Bt.FinalizeDesign="FinalizeDesign";const wt=(A,t)=>({layoutId:A()[0].layoutState.layout.id,selectedElement:void 0,zoom:t,maxZoom:5,units:u.Pixel,subMenu:gt.None,activeModifierKeys:[],metaPressed:!1,elementEvent:void 0,scrolledMovement:!1}),Et=(A,t)=>zA(A,t.apply(A))?A:t.apply(A),lt=RA({}),Qt=A=>{const{getAllLayouts:t}=rt(),[e,n]=vA(Et,wt(t,A.defaultZoom||1)),a=PA((()=>({state:e,uiDispatcher:n})),[e,n]);return LA(lt.Provider,{value:a,children:A.children})};class Ct{constructor(A){var t,e,n;n=void 0,(e="changes")in(t=this)?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,this.changes=A}apply(A){return{...A,...this.changes}}}const ht=()=>UA(lt);let dt;var Dt;(Dt=dt||(dt={}))[Dt.Orbit=0]="Orbit",Dt[Dt.Pan=1]="Pan";const It=(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)),o=s.map((A=>J(A.x,A.y,A.width,A.height,A.rotation))),c=[],r=new Set;o.forEach((A=>r.add(A.minX))),o.forEach((A=>r.add(A.maxX))),[0,a/2,a].forEach((A=>r.add(A)));const g=new Set;o.forEach((A=>g.add(A.minY))),o.forEach((A=>g.add(A.maxY))),[0,i/2,i].forEach((A=>g.add(A)));const B=s.map((A=>A.y));for(let A=-315;A<=315;A+=45)B.push(A);const w=J(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}],l=[{value:w.minY,anchor:-1},{value:w.minY+(w.maxY-w.minY)/2,anchor:0},{value:w.minY+(w.maxY-w.minY),anchor:1}],Q=[{value:A.rotation,anchor:0}],C=(A,t,n,s)=>{const o=[];return t.forEach((t=>{const c=n.find((A=>k(t,A.value,2*e))),[r,g]=((A,t)=>[{x:"x"===A?t:0,y:"x"===A?0:t},{x:"x"===A?t:a,y:"x"===A?i:t}])(A,t),B="rotation"===A?null:LA("line",{x1:r.x,y1:r.y,x2:g.x,y2:g.y,stroke:s||"#D61B5C",strokeDasharray:5*e,strokeWidth:1.2*e,overflow:"overlay"},`${A}-${t}-${r.x}-${r.y}-${g.x}-${g.y}`);void 0!==c&&o.push({type:A,value:t,anchorPoint:c.anchor,svgNode:B,guidelineCoordinates:[r,g]})})),o};return c.push(...C("x",Array.from(r),E,n)),c.push(...C("y",Array.from(g),l,n)),c.push(...C("rotation",B,Q,n)),c};let ut;var pt;let ft;var mt;(pt=ut||(ut={})).Translate="Translate",pt.Rotate="Rotate",pt.Resize="Resize",(mt=ft||(ft={})).ControlLeft="ControlLeft",mt.ControlRight="ControlRight",mt.Equal="Equal",mt.MetaLeft="MetaLeft",mt.MetaRight="MetaRight",mt.Minus="Minus",mt.ArrowLeft="ArrowLeft",mt.ArrowRight="ArrowRight",mt.ArrowUp="ArrowUp",mt.ArrowDown="ArrowDown",mt.AltLeft="AltLeft",mt.AltRight="AltRight",mt.Delete="Delete",mt.Backspace="Backspace";const Mt=(A,t,e,n)=>{const a=()=>{switch(e){case u.Pixel:return 1;case u.Millimeter:return L;case u.Centimeter:return O;default:throw new Error("Unknown unit of measurement")}};let i=t.x,s=t.y,o=t.x,c=t.y;switch(A){case ft.ArrowLeft:o=t.x-1/a();break;case ft.ArrowUp:c=t.y-1/a();break;case ft.ArrowRight:o=t.x+1/a();break;case ft.ArrowDown:c=t.y+1/a();break;default:throw new Error("Unhandled element interaction!")}const r=J(o,c,t.width,t.height,t.rotation);return(!n||r.minX>=n.left&&r.maxX<=n.left+n.width&&r.minY>=n.top&&r.maxY<=n.top+n.height)&&(i=o,s=c),new l(t.id,i,s)};var Ft=0,Yt=0,yt=0;const Nt=(A,t,e,n,a,i,s)=>{const o=((A,t,e,n,a,i,s)=>{const o=n.width/t.width,c=n.height/t.height,r=A.mX/o,g=A.mY/c,B=e.rotation*Math.PI/180,w=Math.sin(B),l=Math.cos(B),Q=e.type===E.Textbox?1:e.width/e.height;let C;switch(a.type){case ut.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 b.North:{const A=-r*w+g*l,n=e.y+A,a=e.height-A,i=z({...e}).center,s=z({...e,y:n,height:a}).center,o=T(s,i,B),c=o.x-e.width/2,E=o.y-a/2;h={...t,left:c,top:E,height:a}}break;case b.East:{const A=r*l+g*w,n=e.width+A;let a=e.height;if(e.type===E.Textbox){const A=e;a=K(A.fontSize,A.fontData,A,A.input||A.text||"",A.lineHeight).requiredHeight}const i=z({...e}).center,s=z({...e,width:n,height:a}).center,o=T(s,i,B),c=o.x-n/2,Q=o.y-a/2;h={...t,left:c,top:Q,width:n,height:a}}break;case b.West:{const A=r*l+g*w,n=e.x+A,a=e.width-A;let i=e.height;if(e.type===E.Textbox){const A=e;i=K(A.fontSize,A.fontData,A,A.input||A.text||"",A.lineHeight).requiredHeight}const s=z({...e}).center,o=z({...e,width:a,height:i,x:n}).center,c=T(o,s,B),Q=c.x-a/2,C=c.y-i/2;h={...t,left:Q,top:C,width:a,height:i}}break;case b.South:{const A=-r*w+g*l,n=e.height+A,a=z({...e}).center,i=z({...e,height:n}).center,s=T(i,a,B),o=s.x-e.width/2,c=s.y-n/2;h={...t,left:o,top:c,height:n}}break;case b.Northeast:{const A=r*l+g*w,n=e.width+A*Q;let a=e.height+A,i=e.y-A,s=e.fontSize;if(e.type===E.Textbox){const t=e;s=t.fontSize+A/8,a=K(s,t.fontData,t,t.input||t.text||"",t.lineHeight).requiredHeight;const n=t.lineHeight||j;i=e.y-A*n/8}const o=z({...e}).center,c=z({...e,width:n,height:a,y:i}).center,C=T(c,o,B),d=C.x-n/2,D=C.y-a/2;h={...t,left:d,top:D,width:n,height:a,fontSize:s}}break;case b.Northwest:{const A=-r*l+-g*w,n=e.x-A*Q,a=e.width+A*Q;let i=e.y-A,s=e.height+A,o=e.fontSize;if(e.type===E.Textbox){const t=e;o=t.fontSize+A/8,s=K(o,t.fontData,t,t.input||t.text||"",t.lineHeight).requiredHeight;const n=t.lineHeight||j;i=e.y-A*n/8}const c=z({...e}).center,C=z({...e,x:n,y:i,width:a,height:s}).center,d=T(C,c,B),D=d.x-a/2,I=d.y-s/2;h={...t,left:D,top:I,width:a,height:s,fontSize:o}}break;case b.Southeast:{const A=r*l+g*w,n=e.width+A*Q;let a=e.height+A,i=e.fontSize;if(e.type===E.Textbox){const t=e;i=t.fontSize+A/8,a=K(i,t.fontData,t,t.input||t.text||"",t.lineHeight).requiredHeight}const s=z({...e}).center,o=z({...e,width:n,height:a}).center,c=T(o,s,B),C=c.x-n/2,d=c.y-a/2;h={...t,left:C,top:d,width:n,height:a,fontSize:i}}break;case b.Southwest:{const A=-r*l+-g*w,n=e.width+A*Q;let a=e.x-A*Q,i=e.height+A,s=e.fontSize;if(e.type===E.Textbox){const t=e;s=t.fontSize+A/8,i=K(s,t.fontData,t,t.input||t.text||"",t.lineHeight).requiredHeight}const o=z({...e}).center,c=z({...e,width:n,height:i,x:a}).center,C=T(c,o,B),d=C.x-n/2,D=C.y-i/2;h={...t,left:d,top:D,width:n,height:i,fontSize:s}}}return C=J(h.left,h.top,h.width,h.height,h.rotation),(!s||C.minX>=s.left&&C.maxX<=s.left+s.width&&C.minY>=s.top&&C.maxY<=s.top+s.height)&&(t=h),t;case ut.Rotate:const d={x:A.clientX,y:A.clientY};let D,I=e.rotation;const u=z(e,n,{x:o,y:c}),p=V(d,u.c,u.d),f=V(d,u.d,u.c);if(0===i.filter((A=>"rotation"===A.type)).length)yt=0,D=(e.rotation+p-f)%360;else{yt+=Math.sqrt(r**2+g**2);const A=Math.abs(yt)>7*window.devicePixelRatio/o;D=A?(e.rotation+p-f)%360:i.find((A=>"rotation"===A.type))?.value||0,A&&(yt=0)}return C=J(e.x,e.y,e.width,e.height,D),(!s||C.minX>=s.left&&C.maxX<=s.left+s.width&&C.minY>=s.top&&C.maxY<=s.top+s.height)&&(I=D),{top:e.y,left:e.x,width:e.width,height:e.height,rotation:I};case ut.Translate:let m,M,F=e.x,Y=e.y;if(0===i.filter((A=>"rotation"!==A.type)).length)Ft=0,Yt=0,m=e.x+r,M=e.y+g;else{const A=i.find((A=>"x"===A.type)),t=i.find((A=>"y"===A.type));A||(Ft=0),t||(Yt=0);const n=Math.abs(Ft)>7*window.devicePixelRatio/o,a=Math.abs(Yt)>7*window.devicePixelRatio/c;m=A?n?e.x+Ft:e.x:e.x+r,M=t?a?e.y+Yt:e.y:e.y+g,Ft=n?0:Ft+r,Yt=a?0:Yt+g}return C=J(m,M,e.width,e.height,e.rotation),(!s||C.minX>=s.left&&C.maxX<=s.left+s.width&&C.minY>=s.top&&C.maxY<=s.top+s.height)&&(F=m,Y=M),{top:Y,left:F,width:e.width,height:e.height,rotation:e.rotation}}})(A,t,e,n,a,i,s),c=[];if(e.type===E.Textbox){const A=e;c.push(new I(A.id,A.text||A.input||""))}if(c.push(new l(e.id,o.left,o.top),new Q(e.id,o.width,o.height),new C(e.id,o.rotation)),e.type===E.Textbox){const A=e;o.fontSize&&A.fontSize!==o.fontSize&&c.push(new r(A.id,o.fontSize))}return c},xt=.5,Ht=(A,t,e,n,a,i,o)=>{const{state:c,uiDispatcher:r}=UA(lt),{getLayoutById:g,getReducerState:w,flattenSequence:E}=rt(),[l,Q]=GA(void 0),[C,h]=GA(void 0),[d,D]=GA(void 0),I=g(c.layoutId);SA((()=>{if("adjustment"===a&&A?.current&&n){if(n<.5)return void r(new Ct({zoom:.5}));if(n>c.maxZoom)return void r(new Ct({zoom:c.maxZoom}));r(new Ct({zoom:n}))}}),[n,r,A,a,c.maxZoom]);const u=kA(((A,n)=>{r(new Ct({zoom:n}));const i=t?.current?.scrollWidth-t?.current?.clientWidth!=0,s=t?.current?.scrollHeight-t?.current?.clientHeight!=0;t.current&&e.current&&!c.scrolledMovement&&"advanced"===a&&(s&&(t.current.scrollTop=e.current.offsetTop+(t.current.scrollHeight-t.current.clientHeight)/2),i&&(t.current.scrollLeft=(e.current.offsetLeft+t.current.scrollWidth-t.current.clientWidth)/2))}),[r,t,e,c.scrolledMovement,a]);SA((()=>{c.zoom<=1&&r(new Ct({scrolledMovement:!1}))}),[r,c.zoom]);const p=t?.current?.getBoundingClientRect(),f=((p?.width||1)+(p?.height||1))/2,m=(I.layoutState.layout.width+I.layoutState.layout.height)/2/f/c.zoom,F=PA((()=>{const A=c.activeModifierKeys,t=c.elementEvent,e=A.includes(ft.ControlLeft)||A.includes(ft.MetaLeft)||A.includes(ft.ControlRight)||A.includes(ft.MetaRight);if(!c.selectedElement||!t||e)return[];const n=t&&t.type===ut.Translate,a=t&&t.type===ut.Rotate,i=I.layoutState.elements.find((A=>A.id===c.selectedElement));return(n||a)&&i?It(i,I.layoutState,m,o):[]}),[c.selectedElement,c.elementEvent,c.activeModifierKeys,I.layoutState,m]),Y=kA((()=>{const A=M();Q(A),h(w().transaction)}),[w]),y=kA((()=>{r(new Ct({selectedElement:void 0}))}),[r]),N=kA((()=>{r(new Ct({scrolledMovement:!0}))}),[r]),x=kA(((e,n)=>{const a=I.layoutState.elements.find((A=>A.id===c.selectedElement));if(!(c.elementEvent&&A.current&&t.current&&c.selectedElement&&a))return;t.current.hasPointerCapture(e.pointerId)||t.current.setPointerCapture(e.pointerId);const s=A.current.getBoundingClientRect(),o=new B(Nt({mX:d?e.screenX-d.screenX:0,mY:d?e.screenY-d.screenY:0,clientX:e.clientX,clientY:e.clientY},I.layoutState.layout,a,s,c.elementEvent,F,n));o.sequenceId=l,i(o),D({screenX:e.screenX,screenY:e.screenY})}),[I.layoutState.elements,I.layoutState.layout,c.elementEvent,A,c.selectedElement,t,F,i,d]),H=kA((A=>{r(new Ct({elementEvent:A}))}),[r]),R=kA((()=>{r(new Ct({elementEvent:void 0})),l&&C&&(E(l,C),Q(void 0),h(void 0)),D(void 0)}),[r,l,C,E]),U=kA(((A,t)=>{let e=c.zoom;const n=c.maxZoom,o=c.selectedElement,g=c.activeModifierKeys;if((g.includes(ft.AltLeft)||g.includes(ft.AltRight))&&(A.code===ft.Equal||A.code===ft.Minus)){const t=.05*n;A.code===ft.Equal?r(new Ct({zoom:e+t<=n?e+=t:e})):r(new Ct({zoom:e-t>=.5?e-t:e}))}const B=I.layoutState.elements.find((A=>A.id===o));if(o&&B){if(A.code===ft.MetaLeft||A.code===ft.ControlLeft||A.code===ft.MetaRight||A.code===ft.ControlRight){const t=A.code,e=c.activeModifierKeys;if(!e.includes(t))return r(new Ct({activeModifierKeys:e.concat(t)}))}if(A.code===ft.ArrowDown||A.code===ft.ArrowUp||A.code===ft.ArrowLeft||A.code===ft.ArrowRight){r(new Ct({elementEvent:{type:ut.Translate}}));const e=Mt(A.code,B,c.units,t);i(e),r(new Ct({elementEvent:void 0}))}A.code!==ft.Delete&&A.code!==ft.Backspace||"advanced"!==a||(r(new Ct({selectedElement:void 0})),i(new s(B.id)))}}),[i,r,I.layoutState.elements,a,c.activeModifierKeys,c.maxZoom,c.selectedElement,c.units,c.zoom]),S=kA((A=>{if(A.code===ft.MetaLeft||A.code===ft.ControlLeft||A.code===ft.MetaRight||A.code===ft.ControlRight){const t=c.activeModifierKeys,e=A.code;r(new Ct({activeModifierKeys:t.filter((A=>A!==e))}))}}),[r,c.activeModifierKeys]);return{guidelines:F,scale:m,zoomableElementRef:e,setElementEvent:H,handleZoom:u,handleKeyDown:U,handleKeyUp:S,handlePointerPressedBackground:y,handlePointerReleased:R,handlePointerMove:x,handleScroll:N,handleSequenceStart:Y}},Rt=A=>{const{x:t,y:e,cursorStyle:n,onPointerDown:a,handleClass:i,cornerRadius:s,color:o,strokeWidth:c}=A;return LA("circle",{className:i,cx:t,cy:e,r:s,fill:"#ffffff",style:{cursor:n},stroke:o,strokeWidth:c,onPointerDown:a})},Ut=A=>{const{x:t,y:e,width:n,height:a,cursorStyle:i,onPointerDown:s,edgeHandleRadius:o,color:c,strokeWidth:r}=A;return LA("rect",{x:t,y:e,width:n,height:a,rx:o,fill:"#ffffff",style:{cursor:i},stroke:c,strokeWidth:r,onPointerDown:s})},St=A=>{const{color:t,elementHeight:e,elementWidth:n,onBeginResize:a,rotation:i,scaleFactor:s,disableX:o,disableY:c}=A,r=7.5*s,g=3*s,B=28*s,w=6*s,E=1.2*s,l=e-2*r,Q=kA(((A,t,e)=>{A.stopPropagation(),a(t,e)}),[a]),C=kA((A=>Q(A,W(b.West,360-i),b.West)),[Q,i]),h=kA((A=>Q(A,W(b.East,360-i),b.East)),[Q,i]),d=kA((A=>Q(A,W(b.North,360-i),b.North)),[Q,i]),D=kA((A=>Q(A,W(b.South,360-i),b.South)),[Q,i]),I=kA((A=>Q(A,b.Northwest,b.Northwest)),[Q]),u=kA((A=>Q(A,b.Northeast,b.Northeast)),[Q]),p=kA((A=>Q(A,b.Southwest,b.Southwest)),[Q]),f=kA((A=>Q(A,b.Northeast,b.Southeast)),[Q]),m=B<=l;return OA(bA,{children:[LA(Rt,{x:0,y:0,cursorStyle:"nwse-resize",onPointerDown:I,handleClass:"cornerNorthWest",cornerRadius:r,color:t,strokeWidth:E}),m?LA(Rt,{x:n,y:0,cursorStyle:"nesw-resize",onPointerDown:u,handleClass:"cornerNorthEast",cornerRadius:r,color:t,strokeWidth:E}):void 0,m?LA(Rt,{x:n,y:e,cursorStyle:"nwse-resize",onPointerDown:f,handleClass:"cornerSouthEast",cornerRadius:r,color:t,strokeWidth:E}):void 0,m?LA(Rt,{x:0,y:e,cursorStyle:"nesw-resize",onPointerDown:p,handleClass:"cornerSouthWest",cornerRadius:r,color:t,strokeWidth:E}):void 0,m&&!o?LA(Ut,{x:-w/2,y:e/2-B/2,width:w,height:B,onPointerDown:C,edgeHandleRadius:g,cursorStyle:"ew-resize",color:t,strokeWidth:E}):void 0,m&&!c?LA(Ut,{x:n/2-B/2,y:e-w/2,width:B,height:w,onPointerDown:D,edgeHandleRadius:g,cursorStyle:"ns-resize",color:t,strokeWidth:E}):void 0,o?void 0:LA(Ut,{x:n-w/2,y:e/2-Math.min(B,.8*e)/2,width:w,height:Math.min(B,.8*e),onPointerDown:h,edgeHandleRadius:g,cursorStyle:"ew-resize",color:t,strokeWidth:E}),m&&!c?LA(Ut,{x:n/2-B/2,y:-w/2,width:B,height:w,onPointerDown:d,edgeHandleRadius:g,cursorStyle:"ns-resize",color:t,strokeWidth:E}):void 0]})},Gt=A=>{const{color:t,elementWidth:e,onBeginRotate:n,scaleFactor:a}=A,i=kA((A=>{A.stopPropagation(),n()}),[n]),s=10*a,o=1.2*a;return OA("g",{children:[LA("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}),LA("circle",{cx:e/2,cy:-2.5*s,r:s,fill:"#fff",style:{cursor:"ew-resize"},stroke:t,strokeWidth:o,onPointerDown:i}),OA("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:[LA("path",{d:"M0 0h24v24H0z",fill:"none"}),LA("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"})]})]})},vt=A=>{const{color:t,height:e,highlighted:n,id:a,immutable:i,onBeginMove:s,onBeginResize:o,onBeginRotate:c,onPointerEnter:r,onPointerLeave:g,onSelected:B,pressed:w,rotation:E,scaleFactor:l,selected:Q,width:C,x:h,y:d,disableX:D,disableY:I}=A,u=1.2*l,p=kA((A=>{console.log(A),2===A.button&&(A.stopPropagation(),B(a,A)),0===A.button&&(A.stopPropagation(),!Q&&B(a,A),s())}),[a,Q,B,s]),f=kA((()=>{r(a)}),[a,r]),m=kA((()=>{g(a)}),[a,g]);return OA("g",{transform:`translate(${h}, ${d}) rotate(${E} ${C/2} ${e/2})`,children:[LA("rect",{className:"interactableInnerRect",width:C,height:e,stroke:Q||n?t:"none",pointerEvents:i?"none":"visibleFill",fill:"none",strokeWidth:u,style:{cursor:i?void 0:Q?w?"grabbing":"grab":"pointer"},onPointerDown:i?void 0:p,onPointerEnter:i?void 0:f,onPointerLeave:i?void 0:m}),Q&&OA(bA,{children:[LA(Gt,{color:t,elementWidth:C,onBeginRotate:c,scaleFactor:l}),LA(St,{color:t,elementHeight:e,elementWidth:C,rotation:E,scaleFactor:l,onBeginResize:o,disableX:D,disableY:I})]})]})},Pt=({primaryColor:A,containerHeight:t,containerWidth:e,customViewbox:n,editorRef:a,elementEvent:i,guidelines:s,layoutHeight:o,layoutWidth:c,targetedElements:r,scale:g,selectedElement:B,onElementEvent:w,onElementSelected:l,onSequenceStart:Q})=>{const{state:C}=ht(),{getLayoutById:h}=rt(),d=h(C.layoutId),[D,I]=GA(void 0),u=kA((A=>{I(A)}),[]),p=kA((A=>{D===A&&I(void 0)}),[D]),f=kA((()=>{Q(),w({type:ut.Translate})}),[w]),m=kA(((A,t)=>{Q(),w({type:ut.Resize,relativeAxis:A,screenAxis:t})}),[w]),M=kA((()=>{Q(),w({type:ut.Rotate})}),[w]),F=n||{x:0,y:0,width:c,height:o},Y=g*(Math.sqrt(F.width*F.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===B)),x=[...d.layoutState.elements];return N>=0&&x.push(x.splice(N,1)[0]),OA("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:"auto",height:"auto",viewBox:`${F.x} ${F.y} ${F.width} ${F.height}`,overflow:"overlay",children:[LA("rect",{fill:"none",stroke:"none",ref:a,width:c,height:o}),s.map((A=>A.svgNode)),x.map((t=>{const e=void 0!==B&&t.id===B,n=e&&void 0!==i,a=void 0!==D&&t.id===D;return LA(vt,{color:A,id:t.id,selected:e,highlighted:a,pressed:n,x:t.x,y:t.y,disableX:t.type===E.Frame||t.type===E.Illustration,disableY:t.type===E.Textbox||t.type===E.Frame||t.type===E.Illustration,width:t.width,height:t.height,rotation:t.rotation,immutable:t.immutable||r&&!r.includes(t.id),onSelected:l,onBeginMove:f,onBeginResize:m,onBeginRotate:M,onPointerEnter:u,onPointerLeave:p,scaleFactor:Y},t.id)}))]})},Jt=A=>{const{color:t,editorRef:e,zoomableElementRef:n,interactionElementRef:a,guidelines:i,isMakingAdjustments:s,viewmask:o,visibleLayoutId:c,xTranslation:r,yTranslation:g,targetedElements:B,borderRadius:w,handleContextMenu:E,handleKeyDown:l,handleKeyUp:Q,handlePointerMove:C,handlePointerPressedBackground:h,handlePointerReleased:d,handleScroll:D,onSequenceStart:I,setElementEvent:u,onElementSelected:p}=A,{getLayoutById:f}=rt(),m=f(c),M=m.layoutState,{state:F}=ht(),Y=kA((A=>{if(o){const t={left:o.x,top:o.y,width:o.width,height:o.height,panelId:"",rotation:0};return l(A,t)}return l(A)}),[l,o]),y=kA((A=>{if(o){const t={left:o.x,top:o.y,width:o.width,height:o.height,panelId:"",rotation:0};return C(A,t)}return C(A)}),[C,o]);return LA("div",{style:{justifyContent:"center",position:"relative",height:"100%",width:"100%",scrollbarWidth:"none",outline:"none"},onContextMenu:E,onKeyDown:Y,onKeyUp:Q,onPointerDown:h,onPointerMoveCapture:y,onPointerUp:d,onWheelCapture:D,ref:a,tabIndex:-1,children:OA("div",{ref:n,style:{height:"100%",transform:`scale(${F.zoom}) translate(${r}px, ${g}px)`,display:"flex",justifyContent:"center",filter:"drop-shadow(rgba(0, 0, 0, 0.2) 0px 0px 6px)"},children:[A.children,m.getComponentWithProps({height:s?"100%":"auto",maxHeight:"100%",maxWidth:"100%",position:"absolute",viewmask:o,width:s?"100%":"auto",borderRadius:w}),LA(Pt,{primaryColor:t,containerHeight:n.current?.offsetHeight||1024,containerWidth:n.current?.offsetWidth||1024,editorRef:e,elementEvent:F.elementEvent,guidelines:i,layoutHeight:M.layout.height,layoutWidth:M.layout.width,onElementEvent:u,onSequenceStart:I,onElementSelected:p,scale:10/F.zoom,selectedElement:F.selectedElement,targetedElements:B})]})})},kt=({color:A,borderRadius:t,guidelineColor:e,handleContextMenu:n,onElementSelected:a})=>{const{commandDispatcher:i,getLayoutById:s}=rt(),{state:o,uiDispatcher:c}=ht(),r=JA(null),g=JA(null),B=JA(null),{guidelines:w,handleKeyDown:l,handleKeyUp:Q,handlePointerMove:C,handlePointerPressedBackground:h,handlePointerReleased:d,handleScroll:D,handleSequenceStart:I,setElementEvent:u}=Ht(r,g,B,void 0,"advanced",i,e),p=kA(((A,t)=>{const e=s(o.layoutId).layoutState.elements.find((t=>t.id===A));if(A&&e&&e.type===E.Textbox){const t=e.algorithm;(!t||t===v.Autosize)&&i(new P(A,v.Traditional))}a&&a(A,t),c(new Ct({selectedElement:A}))}),[i,s,o.layoutId,c]);return LA(Jt,{color:A,editorRef:r,interactionElementRef:g,zoomableElementRef:B,guidelines:w,visibleLayoutId:o.layoutId,xTranslation:0,yTranslation:0,borderRadius:t,handleContextMenu:n,handleKeyDown:l,handleKeyUp:Q,handlePointerMove:C,handlePointerPressedBackground:h,handlePointerReleased:d,handleScroll:D,onSequenceStart:I,setElementEvent:u,onElementSelected:p})};class Lt{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 Ot{constructor(){var A,t,e;A=this,t="storage",e=new Map,t in A?Object.defineProperty(A,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):A[t]=e}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 bt=(()=>{try{return localStorage?new Lt:new Ot}catch{return console.warn("Local storage was unavilable due to browser security settings. Using in-memory storage instead."),new Ot}})(),zt=yA`
     mutation CreateTransaction($integrationProductId: String!, $bulk: Boolean) {
         transactionCreate(integrationProductId: $integrationProductId, bulk: $bulk) {
             id

package/dist/types.d.ts

@@ -966,7 +966,7 @@ export const useEditorInteraction: (editorRef: RefObject<SVGRectElement>, intera
     handleKeyUp: (event: KeyboardEvent) => void;
     handlePointerPressedBackground: () => void;
     handlePointerReleased: () => void;
-    handlePointerMove: (e: PointerEvent, adjustmentBoundary?: Region) => void;
+    handlePointerMove: (event: PointerEvent, adjustmentBoundary?: Region) => void;
     handleScroll: () => void;
     handleSequenceStart: () => void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spiffcommerce/core",
-    "version": "0.9.5",
+    "version": "0.9.6",
     "description": "Core client API for interacting with the Spiff Commerce backend.",
     "source": "src/index.ts",
     "main": "dist/main.js",
@@ -8,7 +8,7 @@
     "types": "dist/types.d.ts",
     "scripts": {
         "build": "parcel build",
-        "watch": "parcel watch",
+        "dev": "ladle serve",
         "test": "jest && tsc --noEmit --isolatedModules",
         "prepare": "yarn run build"
     },
@@ -37,6 +37,8 @@
     "author": "Spiff Commerce",
     "devDependencies": {
         "@babel/plugin-proposal-class-properties": "^7.18.6",
+        "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
+        "@ladle/react": "^2.4.5",
         "@parcel/packager-ts": "2.7.0",
         "@parcel/transformer-typescript-tsc": "^2.7.0",
         "@parcel/transformer-typescript-types": "^2.7.0",
@@ -50,15 +52,26 @@
         "@types/react": "^17.0.9",
         "@types/react-dom": "^17.0.9",
         "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
+        "agent-base": "^6.0.2",
+        "assert": "^2.0.0",
+        "buffer": "^6.0.3",
         "enzyme": "^3.11.0",
+        "events": "^3.3.0",
+        "https-browserify": "^1.0.0",
         "husky": "^8.0.1",
         "jest": "^29.0.3",
         "jest-environment-jsdom": "^29.0.3",
         "parcel": "^2.7.0",
+        "path-browserify": "^1.0.1",
+        "process": "^0.11.10",
+        "querystring-es3": "^0.2.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
+        "stream-browserify": "^3.0.0",
+        "stream-http": "^3.2.0",
         "ts-jest": "^29.0.2",
-        "typescript": "4.7.2"
+        "typescript": "4.7.2",
+        "util": "^0.12.5"
     },
     "peerDependencies": {
         "react": "^17.0.2",
@@ -66,7 +79,7 @@
     },
     "dependencies": {
         "@apollo/client": "^3.7.0",
-        "@spiffcommerce/papyrus": "^1.5.3",
+        "@spiffcommerce/papyrus": "^1.5.4",
         "canvg": "https://github.com/spiffdev/canvg.git#03bcd151b12441e88ecb552bb658356f5bbe92c4",
         "cross-fetch": "^3.1.5",
         "graphql": "^16.6.0",