react-sync-board 1.1.4 → 1.1.6

package/dist/react-sync-board.umd.cjs

@@ -56,7 +56,7 @@ Check the top-level render call using <`+O+">.")}return y}}function nr(i,y){{if(
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var Et;function br(){return Et||(Et=1,process.env.NODE_ENV!=="production"&&function(){typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error);var e=f,t=bt();function r(d,c){return d===c&&(d!==0||1/d===1/c)||d!==d&&c!==c}var n=typeof Object.is=="function"?Object.is:r,o=t.useSyncExternalStore,s=e.useRef,a=e.useEffect,u=e.useMemo,l=e.useDebugValue;function m(d,c,_,b,C){var h=s(null),S;h.current===null?(S={hasValue:!1,value:null},h.current=S):S=h.current;var E=u(function(){var I=!1,w,g,P=function(Y){if(!I){I=!0,w=Y;var N=b(Y);if(C!==void 0&&S.hasValue){var H=S.value;if(C(H,N))return g=H,H}return g=N,N}var T=w,D=g;if(n(T,Y))return D;var A=b(Y);return C!==void 0&&C(D,A)?D:(w=Y,g=A,A)},M=_===void 0?null:_,j=function(){return P(c())},$=M===null?void 0:function(){return P(M())};return[j,$]},[c,_,b,C]),x=E[0],v=E[1],p=o(d,x,v);return a(function(){S.hasValue=!0,S.value=p},[p]),l(p),p}Je.useSyncExternalStoreWithSelector=m,typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error)}()),Je}(function(e){process.env.NODE_ENV==="production"?e.exports=Sr():e.exports=br()})(gr);const _r=pe(Ke),{useSyncExternalStoreWithSelector:Er}=_r;function $e(e,t=e.getState,r){const n=Er(e.subscribe,e.getState,e.getServerState||e.getState,t,r);return f.useDebugValue(n),n}const ye=(e,t)=>e.classList&&e.classList.contains(t),Oe=(e,t)=>ye(e,t)?e:e.parentNode?Oe(e.parentNode,t):!1,wt=(e,t)=>e.x>t.left&&e.x<t.left+t.width&&e.y>t.top&&e.y<t.top+t.height,wr=(e,t)=>Array.from(e.querySelectorAll(".corner")).every(n=>{const{top:o,left:s}=n.getBoundingClientRect();return wt({x:s,y:o},t)}),Cr=(e,t)=>{const r=t.getBoundingClientRect();return wr(e,r)},Ze=(e,t)=>{const n=e.getElementsByClassName(`item ${t}`)[0];return n||console.error(`Missing item ${t}`),n},Te=e=>{var r,n;const t=(r=e==null?void 0:e.dataset)==null?void 0:r.id;return t||console.error("getIdFromElem call fails",e,JSON.stringify(e==null?void 0:e.dataset),(n=e==null?void 0:e.dataset)==null?void 0:n.id),t},Ct=(e,t=document)=>{const r=e.reduce((n,o)=>{const s=Ze(t,o);if(!s)return null;const{left:a,right:u,top:l,bottom:m}=s.getBoundingClientRect();let d;return n?d=n:d={left:a,top:l,right:u,bottom:m},d.left=Math.min(a,d.left),d.top=Math.min(l,d.top),d.right=Math.max(u,d.right),d.bottom=Math.max(m,d.bottom),d},null);return r&&(r.width=r.right-r.left,r.height=r.bottom-r.top,r)},xr=({x:e,y:t,width:r,height:n},{type:o="grid",size:s=1,offset:a={x:0,y:0}})=>{const[u,l]=[e+r/2-a.x,t+n/2-a.y];let m,d,c,_,b,C,h,S,E,x;const v=s/1.1547;switch(o){case"grid":m=Math.round(u/s)*s,d=Math.round(l/s)*s;break;case"hexH":c=2*v,_=3*s,b=Math.round(u/c)*c,h=Math.round(l/_)*_,C=b>u?b-v:b+v,S=h>l?h-1.5*s:h+1.5*s,E=Math.hypot(b-u,h-l),x=Math.hypot(C-u,S-l),E<x?(m=b,d=h):(m=C,d=S);break;case"hexV":c=3*s,_=2*v,b=Math.round(u/c)*c,h=Math.round(l/_)*_,C=b>u?b-1.5*s:b+1.5*s,S=h>l?h-v:h+v,E=Math.hypot(b-u,h-l),x=Math.hypot(C-u,S-l),E<x?(m=b,d=h):(m=C,d=S);break;default:m=e+r/2,d=t+n/2}return{x:m+a.x-r/2,y:d+a.y-n/2}},xt=["#037758","#99092a","#067070","#c6650f","#008726","#3d7004","#348402","#057f58","#b58612","#c44c01","#0a7704","#0e910e","#027377","#c99e02","#054160","#157a01","#b10de2","#0d6289","#bc5d03","#ba0cd1","#d39f10","#0c4c7a","#460782","#a51f10","#cecb10","#9b0943","#607f0c","#007a4b","#bf0daa","#af0ad8"],It=()=>xt[Math.floor(Math.random()*xt.length)],Ir=!1,Qe=({wire:e,storeName:t,noSync:r=[],defaultValue:n},o)=>(s,a,u)=>{s({ready:!1});const l=[];(async()=>{try{const b=await e.call(`${t}_getValue`);Ir&&console.log("init from peer with value",b),s(C=>({...C,...b}))}catch{n!==void 0&&s(n)}l.push(await e.register(`${t}_getValue`,()=>Object.fromEntries(Object.entries(a()).filter(([b,C])=>typeof C!="function"&&!r.includes(b))),{invoke:"first"})),l.push(e.subscribe(`${t}_call`,([b,C])=>{c[b](...C)})),s({ready:!0})})();const d=o(s,a,u),c={...d},_=Object.fromEntries(Object.entries(d).map(([b,C])=>typeof C=="function"&&!b.startsWith("get")&&!r.includes(b)?[b,(...S)=>{const E=C(...S);return e.publish(`${t}_call`,[b,S]),E}]:[b,C]));return _.unsub=()=>{l.forEach(b=>b())},_};function Ae(e,t){if(Object.is(e,t))return!0;if(typeof e!="object"||e===null||typeof t!="object"||t===null)return!1;if(e instanceof Map&&t instanceof Map){if(e.size!==t.size)return!1;for(const[n,o]of e)if(!Object.is(o,t.get(n)))return!1;return!0}if(e instanceof Set&&t instanceof Set){if(e.size!==t.size)return!1;for(const n of e)if(!t.has(n))return!1;return!0}const r=Object.keys(e);if(r.length!==Object.keys(t).length)return!1;for(let n=0;n<r.length;n++)if(!Object.prototype.hasOwnProperty.call(t,r[n])||!Object.is(e[r[n]],t[r[n]]))return!1;return!0}const Ot=f.createContext(),Or=(e,t)=>({items:{},getItems:()=>t().items,setItems:r=>e({items:r}),updateItems:r=>e(n=>({items:{...n.items,...r}})),moveItems:(r,n)=>e(({items:o})=>{const s={...o};return r.forEach(a=>{const u=o[a];u&&(s[a]={...u,x:(u.x||0)+n.x,y:(u.y||0)+n.y,moving:!0})}),{items:s}})}),Tr=(e,t)=>({itemIds:[],setItemIds:r=>e({itemIds:r}),getItemIds:()=>t().itemIds,insert:(r,n)=>e(o=>{const s=[...o.itemIds];return s.splice(r,0,n),{itemIds:s}}),remove:r=>e(n=>{const o=[...n.itemIds];return o.splice(r,1),{itemIds:o}}),updateItemIds:(r,n)=>e(o=>{const s=[...o.itemIds];return s[r]=n,{items:s}}),updateManyItemIds:r=>e(n=>({items:n.itemIds.map((o,s)=>r[s]!==void 0?r[s]:o)}))}),kr=(e,t)=>({removeItemsById:r=>e(n=>({itemIds:n.itemIds.filter(o=>!r.includes(o)),items:Object.fromEntries(Object.entries(n.items).filter(([o])=>!r.includes(o)))})),getItemList:()=>{const r=t().items;return t().itemIds.map(n=>r[n])},setItemList:r=>e({items:Object.fromEntries(r.map(n=>[n.id,n])),itemIds:r.map(({id:n})=>n)}),insertItems:(r,n)=>e(o=>{let s;const a=r.map(({id:u})=>u);if(n){const u=o.itemIds.findIndex(l=>l===n);s=[...o.itemIds],s.splice(u,0,...a)}else s=[...o.itemIds,...a];return{items:{...o.items,...Object.fromEntries(r.map(u=>[u.id,u]))},itemIds:s}})}),Pr=(e,t)=>({boardConfig:{},getBoardConfig:()=>t().boardConfig,setBoardConfig:r=>e({boardConfig:r}),updateBoardConfig:r=>e(n=>({boardConfig:{...n.boardConfig,...r}}))}),Mr=(e,t)=>({session:{},getSessionInfo:()=>t().session,setSessionInfo:r=>e({session:r}),updateSessionInfo:r=>e(n=>({session:{...n.session,...r}}))}),Tt=({storeName:e,children:t,defaultValue:r})=>{const{wire:n}=Ie("room"),[o,s]=f.useState(!1),[a]=f.useState(()=>Re(Qe({wire:n,storeName:e,defaultValue:r},(...u)=>({...Or(...u),...Tr(...u),...kr(...u),...Pr(...u),...Mr(...u)}))));return console.log(a),f.useEffect(()=>{const u=a.subscribe(l=>{l.ready&&(u(),s(!0))})},[a]),o?k(Ot.Provider,{value:a,children:t}):null},ie=(e,t)=>{const r=f.useContext(Ot);return $e(r,e,t||Ae)},jr=()=>{const[e,t]=ie(n=>[n.itemIds,n.items]);return f.useMemo(()=>e.map(n=>t[n]),[e,t])},Rr=()=>{const[e,t,r]=ie(a=>[a.items,a.itemIds,a.getItemList]),[n,o]=f.useState(r()),[,s]=f.useTransition();return f.useEffect(()=>{const a=r();s(()=>{o(a)})},[e,t,r]),n},kt=5e4,Pt=f.createContext(),Dr=(e,t)=>({config:{itemTemplates:{},actions:{},uid:null,itemExtent:{},boardWrapperRect:{},boardSize:kt},updateConfiguration:r=>e(n=>({config:{...n.config,...r}})),getConfiguration:()=>t().config}),$r=(e,t)=>({boardState:{movingItems:!1,selecting:!1,zooming:!1,panning:!1,translateX:0,translateY:0,scale:1},updateBoardState:r=>e(n=>({boardState:{...n.boardState,...r}})),getBoardState:()=>t().boardState}),Ar=(e,t)=>({interactions:{},getInteractions:()=>t().interactions,register:(r,n)=>e(o=>{const s=[...o.interactions[r]||[]];return s.push(n),{interactions:{...o.interaction,[r]:s}}}),unregister:(r,n)=>e(o=>{const s=(o.interactions[r]||[]).filter(a=>a!==n);return{interactions:{...o.interaction,[r]:s}}}),callInteractions:(r,n)=>{t().interactions[r]&&t().interactions[r].forEach(o=>{o(n)})}}),Lr=(e,t)=>({selection:[],setSelection:r=>e(n=>JSON.stringify(n.selection)!==JSON.stringify(r)?{selection:r}:{}),getSelection:()=>t().selection,select:r=>e(n=>({selection:[...n.selection,...r]})),unselect:r=>e(n=>({selection:n.selection.filter(o=>!r.includes(o))})),clear:()=>e(r=>r.selection.length>0?{selection:[]}:{}),reverse:()=>e(r=>{const n=[...r.selection];return n.reverse(),{selection:n}}),selectionBox:null,setSelectionBox:r=>e(n=>{const o=n.selectionBox;return!o||!r||o.top!==r.top||o.left!==r.left||o.width!==r.width||o.height!==r.height?{selectionBox:r}:{}})}),Mt=({children:e})=>{const[t]=f.useState(()=>Re((...r)=>({...Dr(...r),...$r(...r),...Ar(...r),...Lr(...r)})));return k(Pt.Provider,{value:t,children:e})},Q=(e,t)=>{const r=f.useContext(Pt);return $e(r,e,t||Ae)},zr=()=>{const[e]=Q(t=>[t.selection]);return e};function et(e){const t=f.useRef(e);return t.current=e,f.useMemo(()=>Object.freeze({get current(){return t.current}}),[])}function Br(e){const t=et(e);f.useEffect(()=>()=>{t.current()},[])}function tt(e,t,r,n=0){const o=f.useRef(),s=f.useRef(),a=f.useRef(),u=()=>{o.current&&(clearTimeout(o.current),o.current=void 0),s.current&&(clearTimeout(s.current),s.current=void 0)};return Br(u),f.useMemo(()=>{const l=()=>{if(!a.current)return;const d=a.current;a.current=void 0,e.apply(d.this,d.args),u()},m=function(...d){o.current&&clearTimeout(o.current),a.current={args:d,this:this},o.current=setTimeout(l,r),n>0&&!s.current&&(s.current=setTimeout(l,n))};return Object.defineProperties(m,{length:{value:e.length},name:{value:`${e.name||"anonymous"}__debounced__${r}`}}),m},[r,n,...t])}const Le=100,Se=1e3,Yr=.8,jt=({x:e,y:t,scale:r,itemExtent:{right:n,left:o,top:s,bottom:a},boardWrapperRect:u,boardSize:l})=>{const m={left:-n*r+Le*r,right:u.width-o*r-Le*r,top:-a*r+Le*r,bottom:u.height-s*r-Le*r,maxRight:u.width-l*r,maxLeft:u.height-l*r},d=Math.min(Math.max(e,m.left,m.maxRight),m.right,0),c=Math.min(Math.max(t,m.top,m.maxLeft),m.bottom,0);return[d,c]},ze=()=>{const[e,t,r,n,o]=Q(h=>[h.getBoardState,h.updateBoardState,h.config.itemExtent,h.getConfiguration,h.updateConfiguration]),s=f.useRef([.1,8]),[a]=ie(h=>[h.getItemList]),u=f.useCallback(()=>{const{translateX:h,translateY:S,scale:E}=e();return{translateX:h,translateY:S,scale:E}},[e]),l=f.useCallback(h=>{const{itemExtent:S,boardWrapperRect:E,boardSize:x}=n(),v=e(),{translateX:p,translateY:I,scale:w}={...v,...h(v)};let g=w;w!==v.scale&&(g>s.current[1]&&([,g]=s.current),g<s.current[0]&&([g]=s.current));let[P,M]=[p,I];(p!==v.translateX||I!==v.translateY)&&([P,M]=jt({x:p,y:I,scale:g,itemExtent:S,boardWrapperRect:E,boardSize:x})),t({translateX:P,translateY:M,scale:g})},[e,n,t]),m=f.useCallback((h,S)=>{const{itemExtent:E,boardWrapperRect:x,boardSize:v}=n();let p=S;p||(p={x:x.width/2,y:x.height/2});const I=e();let w=I.scale*h;w>s.current[1]&&([,w]=s.current),w<s.current[0]&&([w]=s.current);const g=p.x-x.left,P=p.y-x.top,M=g-(g-I.translateX)*w/I.scale,j=P-(P-I.translateY)*w/I.scale,[$,Y]=jt({x:M,y:j,scale:w,itemExtent:E,boardWrapperRect:x,boardSize:v});t({scale:w,translateX:$,translateY:Y})},[e,n,t]),d=f.useCallback(({left:h,top:S,width:E,height:x})=>{const{boardWrapperRect:v}=n(),p=v.width/E,I=v.height/x,g=Math.min(p,I)*Yr,P=v.width/2-(h+E/2)*g,M=v.height/2-(S+x/2)*g;t({translateX:P,translateY:M,scale:g})},[n,t]),c=f.useCallback(async()=>{const{itemExtent:{width:h,height:S},boardWrapperRect:E}=n(),x=E.width/h,v=E.height/S,p=Math.min(x,v);s.current=[Math.max(p*.5,.05),Math.max(p*10,10)]},[n]),_=f.useCallback(()=>{const{boardWrapperRect:h,boardSize:S}=n(),{translateX:E,translateY:x,scale:v}=e();return{x:(h.width/2-E)/v-S/2,y:(h.height/2-x)/v-S/2}},[e,n]),b=f.useCallback(()=>{const h=a(),{boardWrapperRect:S,boardWrapper:E,boardSize:x}=n(),{scale:v,translateX:p,translateY:I}=e(),{left:w,top:g,width:P,height:M}=Ct(h.map(({id:$})=>$),E)||{left:x/2*v+S.left+p,top:x/2*v+S.top+I,width:0,height:0},j={left:(w-S.left-p)/v,top:(g-S.top-I)/v,width:P/v,height:M/v};if(j.right=j.left+j.width,j.bottom=j.top+j.height,j.width<Se){const $=(Se-j.width)/2;j.left-=$,j.right+=$,j.width=Se}if(j.height<Se){const $=(Se-j.height)/2;j.top-=$,j.bottom+=$,j.height=Se}o({itemExtent:j})},[e,n,a,o]),C=tt(()=>b(),[b],200);return f.useEffect(()=>{r.left&&c()},[c,r]),{setDim:l,getDim:u,zoomTo:m,zoomToCenter:m,zoomToExtent:d,getCenter:_,updateItemExtent:C}},Rt=e=>{const[t,r,n]=Q(({register:a,unregister:u,callInteractions:l})=>[a,u,l]),o=f.useCallback(a=>(t(e,a),()=>{r(e,a)}),[e,t,r]),s=f.useCallback(a=>{n(e,a)},[n,e]);return{register:o,call:s}},Be=()=>{const{call:e}=Rt("place"),{getCenter:t,updateItemExtent:r}=ze(),[n,o,s,a]=Q(T=>[T.clear,T.reverse,T.unselect,T.getConfiguration]),{getItems:u,getItemIds:l,setItemIds:m,updateItems:d,moveItems:c,removeItemsById:_,getItemList:b,insertItems:C,setItemList:h}=ie(({getItems:T,getItemIds:D,setItemIds:A,updateItems:W,moveItems:z,removeItemsById:K,getItemList:G,insertItems:re,setItemList:ne})=>({getItems:T,getItemIds:D,setItemIds:A,updateItems:W,moveItems:z,removeItemsById:K,getItemList:G,insertItems:re,setItemList:ne})),S=f.useCallback((T,D)=>{let A=D;typeof D=="object"&&(A=()=>D);const W=l().filter(G=>T.includes(G)),z=u(),K=Object.fromEntries(W.map(G=>[G,A({...z[G]})]));d(K),r()},[l,u,r,d]),E=f.useCallback(T=>{h(T),n(),r()},[n,h,r]),x=f.useCallback((T,D)=>{S([T],D)},[S]),v=f.useCallback((T,D)=>{c(T,D),r()},[c,r]),p=f.useCallback(T=>{const D=l(),A=D.filter(z=>!T.includes(z)),W=D.filter(z=>T.includes(z));m([...A,...W])},[l,m]),I=f.useCallback((T,{type:D,size:A}={})=>{const{boardWrapper:W}=a(),z={},K=u();T.forEach(G=>{const re=K[G],ne=Ze(W,G);if(!ne)return;const oe={type:D||"grid",size:A||1,offset:{x:0,y:0},...re.grid},F=xr({x:re.x,y:re.y,width:ne.clientWidth,height:ne.clientHeight},oe);z[G]={...re,...F}}),d(z)},[a,u,d]),w=f.useCallback((T,D)=>{p(T),S(T,A=>{const W={...A};return delete W.moving,W}),I(T,D),e(T),r()},[S,e,p,I,r]),g=f.useCallback(T=>{m(T)},[m]),P=f.useCallback(T=>{const D=l(),A=D.filter(z=>T.includes(z)),W=D.map(z=>T.includes(z)?A.pop():z);m(W),o()},[l,o,m]),M=f.useCallback((T,D)=>{const A=u(),W=T.map(F=>A[F]),z=D.map(F=>A[F]),K=D.reduce((F,te)=>(F[te]=W.shift(),F),{}),G=z.reduce((F,te)=>{const me=K[te.id],be={...te,x:me.x,y:me.y};return F[te.id]=be,F},{});d(G);const re=T.reduce((F,te)=>(F[te]=D.shift(),F),{}),oe=l().map(F=>T.includes(F)?re[F]:F);m(oe)},[u,d,l,m]),j=f.useCallback((T,D)=>{const A=t(),W=T.map((z,K)=>!z.x||!z.y?{...z,x:A.x+2*K,y:A.y+2*K}:z);C(W,D),r()},[t,C,r]),$=f.useCallback((T,D)=>{j([T],D)},[j]),Y=f.useCallback(T=>{s(T),_(T)},[s,_]),N=f.useCallback(T=>{const D=u();return T.map(A=>D[A])},[u]),H=f.useCallback(({target:T,clientX:D,clientY:A},{returnLocked:W=!1,passLocked:z=!1}={})=>{if(["INPUT","TEXTAREA"].includes(T.tagName))return null;const K=Oe(T,"item");if(K){if(ye(K,"selected"))return K;if(!z&&ye(K,"locked")&&!ye(T,"passthrough"))return W?K:null;if(ye(T,"passthrough")){const G=l(),{boardWrapper:re}=a(),ne=G.reduce((oe,F)=>{const te=Ze(re,F),me=te.getBoundingClientRect();return wt({x:D,y:A},me)&&oe.unshift(te),oe},[]);for(let oe=0;oe<ne.length;oe+=1){const F=ne[oe];if(F!==K&&(z||!ye(F,"locked")))return F}return null}}return K},[a,l]);return{putItemsOnTop:p,batchUpdateItems:S,updateItemOrder:g,moveItems:v,placeItems:w,updateItem:x,swapItems:M,reverseItemsOrder:P,setItemList:E,pushItem:$,pushItems:j,removeItems:Y,getItemList:b,findElementUnderPointer:H,getItems:N}};var Nr=function e(t,r){if(t===r)return!0;if(t&&r&&typeof t=="object"&&typeof r=="object"){if(t.constructor!==r.constructor)return!1;var n,o,s;if(Array.isArray(t)){if(n=t.length,n!=r.length)return!1;for(o=n;o--!==0;)if(!e(t[o],r[o]))return!1;return!0}if(t instanceof Map&&r instanceof Map){if(t.size!==r.size)return!1;for(o of t.entries())if(!r.has(o[0]))return!1;for(o of t.entries())if(!e(o[1],r.get(o[0])))return!1;return!0}if(t instanceof Set&&r instanceof Set){if(t.size!==r.size)return!1;for(o of t.entries())if(!r.has(o[0]))return!1;return!0}if(ArrayBuffer.isView(t)&&ArrayBuffer.isView(r)){if(n=t.length,n!=r.length)return!1;for(o=n;o--!==0;)if(t[o]!==r[o])return!1;return!0}if(t.constructor===RegExp)return t.source===r.source&&t.flags===r.flags;if(t.valueOf!==Object.prototype.valueOf)return t.valueOf()===r.valueOf();if(t.toString!==Object.prototype.toString)return t.toString()===r.toString();if(s=Object.keys(t),n=s.length,n!==Object.keys(r).length)return!1;for(o=n;o--!==0;)if(!Object.prototype.hasOwnProperty.call(r,s[o]))return!1;for(o=n;o--!==0;){var a=s[o];if(!e(t[a],r[a]))return!1}return!0}return t!==t&&r!==r};function Ur(e,t,r,n=0){f.useEffect(tt(e,t,r,n),t)}const Xr=(e,t)=>{if(e.type in t){const r=t[e.type].defaultActions;return typeof r=="function"?r(e):r}return[]},Dt=(e,t)=>{const{actions:r=Xr(e,t)}=e;return r.map(n=>typeof n=="string"?{name:n}:n)},Wr=()=>{const[e,t]=ie(c=>[c.items,c.getItems]),[r,n,o]=Q(c=>[c.config.itemTemplates,c.selection,c.getSelection]),[s,a]=f.useState([]),u=f.useRef(!1),[,l]=f.useTransition();f.useEffect(()=>(u.current=!0,()=>{u.current=!1}),[]);const m=f.useCallback(c=>{const _=t();if(c)return[c,c.map(C=>_[C])];const b=o();return[b,b.map(C=>_[C])]},[t,o]),d=f.useCallback(()=>{const[c,_]=m();if(c.length>0){if(!u.current)return;const b=_.reduce((C,h)=>{const S=Dt(h,r);return C.filter(E=>S.some(x=>Nr(E,x)))},Dt(_[0],r));l(()=>{a(b)})}else l(()=>{a([])})},[m,r]);return Ur(()=>d(),[e,n,d],100),{availableActions:s}},Vr=()=>{const[e]=Q(t=>[t.selectionBox]);return e};let ge=(e=21)=>crypto.getRandomValues(new Uint8Array(e)).reduce((t,r)=>(r&=63,r<36?t+=r.toString(36):r<62?t+=(r-26).toString(36).toUpperCase():r>62?t+="-":t+="_",t),"");const $t=f.createContext(),rt=e=>{localStorage.setItem("user",JSON.stringify(e))},Fr=()=>{if(localStorage.user){const t={name:"Player",color:It(),uid:ge(),...JSON.parse(localStorage.user)};return rt(t),t}const e={name:"Player",color:It(),uid:ge()};return rt(e),e},Kr=e=>(t,r)=>({isSpaceMaster:!1,users:{},getUser:()=>r().users[e],getUsers:()=>r().users,getUserList:()=>Object.values(r().users),getLocalUsers:()=>{if(!r().users[e])return[];const{space:n}=r().users[e];return r().getUserList().filter(({space:o})=>o===n)},addUser:n=>t(o=>({users:{...o.users,[n.id]:n}})),updateUser:(n,o)=>t(s=>{if(!s.users[n])return{};const a={...s.users[n],...o,id:n,uid:s.users[n].uid};return a.id===e&&rt(a),setTimeout(()=>r().electSpaceMaster(),100),{users:{...s.users,[n]:a}}}),removeUser:n=>t(o=>{const s={...o.users};return delete s[n],setTimeout(()=>r().electSpaceMaster(),100),{users:s}}),updateCurrentUser:n=>r().updateUser(e,n),joinSpace:n=>r().updateUser(e,{space:n,spaceJoinedTimestamp:Date.now()}),electSpaceMaster:()=>{const n=r().getLocalUsers(),o={uid:null,timestamp:Date.now()};Object.values(n).forEach(({spaceJoinedTimestamp:s,id:a})=>{s<o.timestamp&&(o.id=a,o.timestamp=s)}),t({isSpaceMaster:o.id===e})}}),Hr=e=>({cursors:{},moveCursor:(t,r)=>e(n=>({cursors:{...n.cursors,[t]:r}})),removeCursor:t=>e(r=>{const n={...r.cursors};return delete n[t],{cursors:n}})}),At=({storeName:e,children:t})=>{const{wire:r,isMaster:n}=Ie("room"),[o,s]=f.useState(null),[a,u]=f.useState(!1),l=f.useRef(!1);return f.useEffect(()=>{let m=!0;const d=[];if(!o&&!l.current)return l.current=!0,(()=>{const _=Re(Qe({wire:r,storeName:e,noSync:["updateCurrentUser","joinSpace","isSpaceMaster","electSpaceMaster"]},(...C)=>({...Kr(r.userId)(...C),...Hr(...C)}))),b=_.subscribe(C=>{C.ready&&(b(),m&&s(_))})})(),()=>{m=!1,l.current=!1,d.forEach(_=>_())}},[o,e,r,r.userId]),f.useEffect(()=>{if(o)return o.getState().addUser({...Fr(),id:r.userId}),u(!0),()=>{o.getState().removeUser(r.userId)}},[n,o,r]),f.useEffect(()=>{if(o){const m=r.subscribe("userLeave",d=>{o.getState().removeUser(d)});return()=>{m()}}},[n,o,r]),f.useEffect(()=>{n&&o&&o.getState().updateCurrentUser({isMaster:n})},[n,o,r]),a?k($t.Provider,{value:o,children:t}):null},he=(e,t)=>{const r=f.useContext($t);return $e(r,e,t||Ae)},qr=()=>{const[e,t,r,n,o]=he(u=>[u.isSpaceMaster,u.getUser(),u.users,u.updateCurrentUser,u.joinSpace]),s=f.useMemo(()=>Object.values(r),[r]),a=f.useMemo(()=>{const{space:u}=t;return s.filter(({space:l})=>l===u)},[t,s]);return{isSpaceMaster:e,currentUser:t,updateCurrentUser:n,users:s,localUsers:a,joinSpace:o}},Gr=()=>{const[e,t,r]=ie(o=>[o.boardConfig,o.getBoardConfig,o.setBoardConfig]),n=f.useCallback(o=>{let s=o;typeof o=="object"&&(s=()=>o);const a=t(),u=s(a);r(u)},[t,r]);return[e,n]},Jr=()=>{const[e]=Q(t=>[t.boardState]);return e},Zr=()=>{const[e,t,r,n]=ie(o=>[o.getSessionInfo,o.setSessionInfo,o.updateSessionInfo,o.session]);return{getSessionInfo:e,setSessionInfo:t,sessionInfo:n,updateSessionInfo:r}},Lt=f.createContext(),Qr=({user:{name:e,uid:t,color:r},content:n})=>({type:"message",user:{name:e,uid:t,color:r},content:n,uid:ge(),timestamp:new Date().toISOString()}),en=(e,t)=>({messages:[],setMessages:r=>e({messages:r.map(n=>({...n,timestamp:Date.parse(n.timestamp)}))}),addMessage:r=>e(n=>({messages:[...n.messages,{...r,timestamp:Date.parse(r.timestamp)}]})),sendMessage:(r,n)=>{const o=Qr({user:r,content:n});o&&t().addMessage(o)}}),zt=({storeName:e,children:t,defaultValue:r=[]})=>{const{wire:n}=Ie("room"),[o]=f.useState(()=>Re(Qe({wire:n,storeName:e,defaultValue:r,noSync:["sendMessage"]},(...s)=>({...en(...s)}))));return k(Lt.Provider,{value:o,children:t})},tn=(e,t)=>{const r=f.useContext(Lt);return $e(r,e,t||Ae)},rn=()=>{},nn=(e=rn)=>{const t=he(a=>a.getUser()),[r,n,o]=tn(a=>[a.messages,a.setMessages,a.sendMessage]);f.useEffect(()=>{r.length&&e()},[r,e]);const s=f.useCallback(a=>{o(t,a)},[t,o]);return{messages:r,setMessages:n,sendMessage:s}},Bt=({children:e,session:t})=>{const r=he(n=>n.joinSpace);return f.useEffect(()=>(r(t),()=>{r(null)}),[r,t]),e},on=({socket:e,room:t,session:r,items:n=[],messages:o=[],LoadingComponent:s,...a})=>{const[u]=f.useState(t||ge()),[l]=f.useState(r||ge()),[m]=f.useState(()=>({itemIds:n.map(({id:c})=>c),items:Object.fromEntries(n.map(c=>[c.id,c]))}));return Ie("room")?k(zt,{storeName:`${l}_messages`,defaultValue:o,children:k(Mt,{children:k(Tt,{storeName:`${l}_item`,defaultValue:m,children:k(Bt,{...a,session:l})})})}):k(gt,{room:u,channel:"room",socket:e,LoadingComponent:s,children:k(At,{storeName:`${u}_users`,children:k(zt,{storeName:`${l}_messages`,defaultValue:o,children:k(Mt,{children:k(Tt,{storeName:`${l}_item`,defaultValue:m,children:k(Bt,{...a,session:l})})})})})})},sn=({socket:e,room:t,children:r,LoadingComponent:n})=>{const[o]=f.useState(t||ge());return k(gt,{room:o,channel:"room",socket:e,LoadingComponent:n,children:k(At,{storeName:`${o}_users`,children:r})})},nt=()=>{const e=navigator.userAgent.toLowerCase();return/mac os ?x 10/.test(e)},an=(()=>{const e=document.createElement("iframe");e.src="#",document.body.appendChild(e);const t=e.contentWindow.document;t.open(),t.write("<!DOCTYPE html><html><head></head><body><span>a</span></body></html>"),t.close();const r=t.body.firstElementChild.offsetHeight;return document.body.removeChild(e),r})(),cn=800,Yt=(e,t)=>{const r=Object.keys(e).map(n=>Number(n)).find(n=>n!==t);return e[r]},Nt=([e,t],[r,n])=>{const o=Math.abs(e-r),s=Math.abs(t-n);return Math.hypot(o,s)},ve=()=>{},un=e=>t=>{const{event:r}=t;return r.isPropagationStopped()?null:e(t)},ln=e=>async(...t)=>{try{await e(...t)}catch(r){console.error(r)}};class fn{constructor(){ar(this,"lastPromise",Promise.resolve(!0))}add(t,...r){return new Promise((n,o)=>{this.lastPromise=this.lastPromise.then(()=>un(ln(t))(...r)).then(n).catch(o)})}}const ae=new fn,Ye=({children:e,onDrag:t=ve,onDragStart:r=ve,onDragEnd:n=ve,onPan:o=ve,onTap:s=ve,onLongTap:a=ve,onDoubleTap:u=ve,onZoom:l,mainAction:m="drag"})=>{const d=f.useRef(null),c=f.useRef({moving:!1,pointers:{},mainPointer:void 0}),_=E=>{const{deltaX:x,deltaY:v,clientX:p,clientY:I,deltaMode:w,ctrlKey:g,altKey:P,metaKey:M,target:j}=E;if(!(P||g&&!nt()))if(nt()&&!g)ae.add(o,{deltaX:-2*x,deltaY:-2*v,button:1,ctrlKey:g,metaKey:M,target:j,event:E});else{if(l===void 0||!v)return;let $=v;switch(w){case 1:$*=an;break;case 2:$*=cn;break}nt()&&($*=2),ae.add(l,{scale:$,clientX:p,clientY:I,event:E})}},b=E=>{const{target:x,button:v,clientX:p,clientY:I,pointerId:w,altKey:g,ctrlKey:P,metaKey:M,isPrimary:j}=E;if(c.current.pointers[w]={clientX:p,clientY:I},j&&(c.current.mainPointer=void 0),c.current.mainPointer!==void 0){if(c.current.mainPointer!==w)try{const{clientX:$,clientY:Y}=Yt(c.current.pointers,w),N=($+p)/2,H=(Y+I)/2,T=Nt([$,Y],[p,I]);Object.assign(c.current,{pressed:!0,moving:!1,gestureStart:!1,startX:p,startY:I,prevX:N,prevY:H,startDistance:T,prevDistance:T})}catch($){console.log("Error while getting other pointer. Ignoring",$),c.current.mainPointer}return}c.current.mainPointer=w,Object.assign(c.current,{pressed:!0,moving:!1,gestureStart:!1,startX:p,startY:I,prevX:p,prevY:I,currentButton:v,pointerDownEvent:E,target:x,timeStart:Date.now(),longTapTimeout:setTimeout(async()=>{c.current.noTap=!0,ae.add(a,{clientX:p,clientY:I,altKey:g,ctrlKey:P,metaKey:M,target:x,event:E})},750)});try{x.setPointerCapture(w)}catch($){console.log("Fail to capture pointer",$)}},C=E=>{if(c.current.pressed){const{pointerId:x,clientX:v,clientY:p,altKey:I,shiftKey:w,ctrlKey:g,metaKey:P,buttons:M,pointerType:j}=E;c.current.pointers[x]={clientX:v,clientY:p},c.current.moving=!0;const $=Object.keys(c.current.pointers).length===2;let Y,N,H;if($){const{clientX:W,clientY:z}=Yt(c.current.pointers,x);Y=(W+v)/2,N=(z+p)/2,H=Nt([W,z],[v,p])}else Y=v,N=p;let T=w||I||g||P||M!==1;m!=="drag"&&(T=!T);const D=!T,A=T;if(D){c.current.gestureStart||(d.current.style.cursor="move",c.current.gestureStart=!0,clearTimeout(c.current.longTapTimeout),ae.add(r,{deltaX:0,deltaY:0,startX:c.current.startX,startY:c.current.startY,clientX:c.current.startX,clientY:c.current.startY,distanceX:0,distanceY:0,button:c.current.currentButton,altKey:I,shiftKey:w,ctrlKey:g,metaKey:P,target:c.current.target,event:c.current.pointerDownEvent}));const W=Y-c.current.prevX,z=N-c.current.prevY,K=Y-c.current.startX,G=N-c.current.startY;ae.add(t,{deltaX:W,deltaY:z,startX:c.current.startX,startY:c.current.startY,clientX:Y,clientY:N,distanceX:K,distanceY:G,button:c.current.currentButton,altKey:I,shiftKey:w,ctrlKey:g,metaKey:P,target:c.current.target,event:E})}if(A){c.current.gestureStart||(d.current.style.cursor="move",c.current.gestureStart=!0,clearTimeout(c.current.longTapTimeout));const W=Y-c.current.prevX,z=N-c.current.prevY,{target:K}=c.current;if(ae.add(o,{deltaX:W,deltaY:z,button:c.current.currentButton,altKey:I,shiftKey:w,ctrlKey:g,metaKey:P,target:K,event:E}),H!==c.current.prevDistance&&l){const G=c.current.prevDistance-H;Math.abs(G)>0&&(ae.add(l,{scale:G*3,clientX:Y,clientY:N,event:E}),c.current.prevDistance=H)}}c.current.prevX=Y,c.current.prevY=N}},h=E=>{const{clientX:x,clientY:v,altKey:p,shiftKey:I,ctrlKey:w,metaKey:g,target:P,pointerId:M}=E;if(c.current.pointers[M]&&(delete c.current.pointers[M],c.current.mainPointer===M)){for(;Object.keys(c.current.pointers).length>0;){c.current.mainPointer=Number(Object.keys(c.current.pointers)[0]);try{c.current.target.setPointerCapture(c.current.mainPointer);return}catch(j){console.log("Fails to set pointer capture",j),c.current.mainPointer=void 0,delete c.current.pointers[Object.keys(c.current.pointers)[0]]}}if(c.current.mainPointer=void 0,c.current.pressed=!1,clearTimeout(c.current.longTapTimeout),c.current.moving)c.current.moving=!1,ae.add(n,{deltaX:x-c.current.prevX,deltaY:v-c.current.prevY,startX:c.current.startX,startY:c.current.startY,clientX:x,clientY:v,distanceX:x-c.current.startX,distanceY:v-c.current.startY,button:c.current.currentButton,altKey:p,shiftKey:I,ctrlKey:w,metaKey:g,event:E}),d.current.style.cursor="auto";else{const j=Date.now();c.current.noTap?c.current.noTap=!1:c.current.timeStart-j<300&&ae.add(s,{clientX:x,clientY:v,altKey:p,shiftKey:I,ctrlKey:w,metaKey:g,target:P,event:E})}}};return k("div",{onWheel:_,onPointerDown:b,onPointerMove:C,onPointerUp:h,onPointerOut:h,onPointerLeave:h,onPointerCancel:h,onDoubleClick:E=>{const{clientX:x,clientY:v,altKey:p,shiftKey:I,ctrlKey:w,metaKey:g,target:P}=E;ae.add(u,{clientX:x,clientY:v,altKey:p,shiftKey:I,ctrlKey:w,metaKey:g,target:P,event:E})},style:{touchAction:"none"},ref:d,children:e})},ot=({onResize:e,...t})=>{const[r]=Q(o=>[o.getBoardState]);return k(Ye,{onDrag:({deltaX:o,deltaY:s,event:a})=>{a.stopPropagation();const{scale:u}=r();e({width:o/u,height:s/u})},children:k("div",{...t})})};let dn={data:""},mn=e=>typeof window=="object"?((e?e.querySelector("#_goober"):window._goober)||Object.assign((e||document.head).appendChild(document.createElement("style")),{innerHTML:" ",id:"_goober"})).firstChild:e||dn,pn=/(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g,gn=/\/\*[^]*?\*\/|  +/g,Ut=/\n+/g,de=(e,t)=>{let r="",n="",o="";for(let s in e){let a=e[s];s[0]=="@"?s[1]=="i"?r=s+" "+a+";":n+=s[1]=="f"?de(a,s):s+"{"+de(a,s[1]=="k"?"":t)+"}":typeof a=="object"?n+=de(a,t?t.replace(/([^,])+/g,u=>s.replace(/(^:.*)|([^,])+/g,l=>/&/.test(l)?l.replace(/&/g,u):u?u+" "+l:l)):s):a!=null&&(s=/^--/.test(s)?s:s.replace(/[A-Z]/g,"-$&").toLowerCase(),o+=de.p?de.p(s,a):s+":"+a+";")}return r+(t&&o?t+"{"+o+"}":o)+n},ue={},Xt=e=>{if(typeof e=="object"){let t="";for(let r in e)t+=r+Xt(e[r]);return t}return e},hn=(e,t,r,n,o)=>{let s=Xt(e),a=ue[s]||(ue[s]=(l=>{let m=0,d=11;for(;m<l.length;)d=101*d+l.charCodeAt(m++)>>>0;return"go"+d})(s));if(!ue[a]){let l=s!==e?e:(m=>{let d,c,_=[{}];for(;d=pn.exec(m.replace(gn,""));)d[4]?_.shift():d[3]?(c=d[3].replace(Ut," ").trim(),_.unshift(_[0][c]=_[0][c]||{})):_[0][d[1]]=d[2].replace(Ut," ").trim();return _[0]})(e);ue[a]=de(o?{["@keyframes "+a]:l}:l,r?"":"."+a)}let u=r&&ue.g?ue.g:null;return r&&(ue.g=ue[a]),((l,m,d,c)=>{c?m.data=m.data.replace(c,l):m.data.indexOf(l)===-1&&(m.data=d?l+m.data:m.data+l)})(ue[a],t,n,u),a},vn=(e,t,r)=>e.reduce((n,o,s)=>{let a=t[s];if(a&&a.call){let u=a(r),l=u&&u.props&&u.props.className||/^go/.test(u)&&u;a=l?"."+l:u&&typeof u=="object"?u.props?"":de(u,""):u===!1?"":u}return n+o+(a??"")},"");function q(e){let t=this||{},r=e.call?e(t.p):e;return hn(r.unshift?r.raw?vn(r,[].slice.call(arguments,1),t.p):r.reduce((n,o)=>Object.assign(n,o&&o.call?o(t.p):o),{}):r,mn(t.target),t.g,t.o,t.k)}q.bind({g:1}),q.bind({k:1});function yn(e,t,r,n){de.p=t}var Sn=function e(t,r){if(t===r)return!0;if(t&&r&&typeof t=="object"&&typeof r=="object"){if(t.constructor!==r.constructor)return!1;var n,o,s;if(Array.isArray(t)){if(n=t.length,n!=r.length)return!1;for(o=n;o--!==0;)if(!e(t[o],r[o]))return!1;return!0}if(t.constructor===RegExp)return t.source===r.source&&t.flags===r.flags;if(t.valueOf!==Object.prototype.valueOf)return t.valueOf()===r.valueOf();if(t.toString!==Object.prototype.toString)return t.toString()===r.toString();if(s=Object.keys(t),n=s.length,n!==Object.keys(r).length)return!1;for(o=n;o--!==0;)if(!Object.prototype.hasOwnProperty.call(r,s[o]))return!1;for(o=n;o--!==0;){var a=s[o];if(!e(t[a],r[a]))return!1}return!0}return t!==t&&r!==r};const bn=q`
+ */var Et;function br(){return Et||(Et=1,process.env.NODE_ENV!=="production"&&function(){typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error);var e=f,t=bt();function r(d,c){return d===c&&(d!==0||1/d===1/c)||d!==d&&c!==c}var n=typeof Object.is=="function"?Object.is:r,o=t.useSyncExternalStore,s=e.useRef,a=e.useEffect,u=e.useMemo,l=e.useDebugValue;function m(d,c,_,b,C){var h=s(null),S;h.current===null?(S={hasValue:!1,value:null},h.current=S):S=h.current;var E=u(function(){var I=!1,w,g,P=function(Y){if(!I){I=!0,w=Y;var N=b(Y);if(C!==void 0&&S.hasValue){var H=S.value;if(C(H,N))return g=H,H}return g=N,N}var T=w,D=g;if(n(T,Y))return D;var A=b(Y);return C!==void 0&&C(D,A)?D:(w=Y,g=A,A)},M=_===void 0?null:_,j=function(){return P(c())},$=M===null?void 0:function(){return P(M())};return[j,$]},[c,_,b,C]),x=E[0],v=E[1],p=o(d,x,v);return a(function(){S.hasValue=!0,S.value=p},[p]),l(p),p}Je.useSyncExternalStoreWithSelector=m,typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error)}()),Je}(function(e){process.env.NODE_ENV==="production"?e.exports=Sr():e.exports=br()})(gr);const _r=pe(Ke),{useSyncExternalStoreWithSelector:Er}=_r;function $e(e,t=e.getState,r){const n=Er(e.subscribe,e.getState,e.getServerState||e.getState,t,r);return f.useDebugValue(n),n}const ye=(e,t)=>e.classList&&e.classList.contains(t),Oe=(e,t)=>ye(e,t)?e:e.parentNode?Oe(e.parentNode,t):!1,wt=(e,t)=>e.x>t.left&&e.x<t.left+t.width&&e.y>t.top&&e.y<t.top+t.height,wr=(e,t)=>Array.from(e.querySelectorAll(".corner")).every(n=>{const{top:o,left:s}=n.getBoundingClientRect();return wt({x:s,y:o},t)}),Cr=(e,t)=>{const r=t.getBoundingClientRect();return wr(e,r)},Ze=(e,t)=>{const n=e.getElementsByClassName(`item ${t}`)[0];return n||console.error(`Missing item ${t}`),n},Te=e=>{var r,n;const t=(r=e==null?void 0:e.dataset)==null?void 0:r.id;return t||console.error("getIdFromElem call fails",e,JSON.stringify(e==null?void 0:e.dataset),(n=e==null?void 0:e.dataset)==null?void 0:n.id),t},Ct=(e,t=document)=>{const r=e.reduce((n,o)=>{const s=Ze(t,o);if(!s)return null;const{left:a,right:u,top:l,bottom:m}=s.getBoundingClientRect();let d;return n?d=n:d={left:a,top:l,right:u,bottom:m},d.left=Math.min(a,d.left),d.top=Math.min(l,d.top),d.right=Math.max(u,d.right),d.bottom=Math.max(m,d.bottom),d},null);return r&&(r.width=r.right-r.left,r.height=r.bottom-r.top,r)},xr=({x:e,y:t,width:r,height:n},{type:o="grid",size:s=1,offset:a={x:0,y:0}})=>{const[u,l]=[e+r/2-a.x,t+n/2-a.y];let m,d,c,_,b,C,h,S,E,x;const v=s/1.1547;switch(o){case"grid":m=Math.round(u/s)*s,d=Math.round(l/s)*s;break;case"hexH":c=2*v,_=3*s,b=Math.round(u/c)*c,h=Math.round(l/_)*_,C=b>u?b-v:b+v,S=h>l?h-1.5*s:h+1.5*s,E=Math.hypot(b-u,h-l),x=Math.hypot(C-u,S-l),E<x?(m=b,d=h):(m=C,d=S);break;case"hexV":c=3*s,_=2*v,b=Math.round(u/c)*c,h=Math.round(l/_)*_,C=b>u?b-1.5*s:b+1.5*s,S=h>l?h-v:h+v,E=Math.hypot(b-u,h-l),x=Math.hypot(C-u,S-l),E<x?(m=b,d=h):(m=C,d=S);break;default:m=e+r/2,d=t+n/2}return{x:m+a.x-r/2,y:d+a.y-n/2}},xt=["#037758","#99092a","#067070","#c6650f","#008726","#3d7004","#348402","#057f58","#b58612","#c44c01","#0a7704","#0e910e","#027377","#c99e02","#054160","#157a01","#b10de2","#0d6289","#bc5d03","#ba0cd1","#d39f10","#0c4c7a","#460782","#a51f10","#cecb10","#9b0943","#607f0c","#007a4b","#bf0daa","#af0ad8"],It=()=>xt[Math.floor(Math.random()*xt.length)],Ir=!1,Qe=({wire:e,storeName:t,noSync:r=[],defaultValue:n},o)=>(s,a,u)=>{s({ready:!1});const l=[];(async()=>{try{const b=await e.call(`${t}_getValue`);Ir&&console.log("init from peer with value",b),s(C=>({...C,...b}))}catch{n!==void 0&&s(n)}l.push(await e.register(`${t}_getValue`,()=>Object.fromEntries(Object.entries(a()).filter(([b,C])=>typeof C!="function"&&!r.includes(b))),{invoke:"first"})),l.push(e.subscribe(`${t}_call`,([b,C])=>{c[b](...C)})),s({ready:!0})})();const d=o(s,a,u),c={...d},_=Object.fromEntries(Object.entries(d).map(([b,C])=>typeof C=="function"&&!b.startsWith("get")&&!r.includes(b)?[b,(...S)=>{const E=C(...S);return e.publish(`${t}_call`,[b,S]),E}]:[b,C]));return _.unsub=()=>{l.forEach(b=>b())},_};function Ae(e,t){if(Object.is(e,t))return!0;if(typeof e!="object"||e===null||typeof t!="object"||t===null)return!1;if(e instanceof Map&&t instanceof Map){if(e.size!==t.size)return!1;for(const[n,o]of e)if(!Object.is(o,t.get(n)))return!1;return!0}if(e instanceof Set&&t instanceof Set){if(e.size!==t.size)return!1;for(const n of e)if(!t.has(n))return!1;return!0}const r=Object.keys(e);if(r.length!==Object.keys(t).length)return!1;for(let n=0;n<r.length;n++)if(!Object.prototype.hasOwnProperty.call(t,r[n])||!Object.is(e[r[n]],t[r[n]]))return!1;return!0}const Ot=f.createContext(),Or=(e,t)=>({items:{},getItems:()=>t().items,setItems:r=>e({items:r}),updateItems:r=>e(n=>({items:{...n.items,...r}})),moveItems:(r,n)=>e(({items:o})=>{const s={...o};return r.forEach(a=>{const u=o[a];u&&(s[a]={...u,x:(u.x||0)+n.x,y:(u.y||0)+n.y,moving:!0})}),{items:s}})}),Tr=(e,t)=>({itemIds:[],setItemIds:r=>e({itemIds:r}),getItemIds:()=>t().itemIds,insert:(r,n)=>e(o=>{const s=[...o.itemIds];return s.splice(r,0,n),{itemIds:s}}),remove:r=>e(n=>{const o=[...n.itemIds];return o.splice(r,1),{itemIds:o}}),updateItemIds:(r,n)=>e(o=>{const s=[...o.itemIds];return s[r]=n,{items:s}}),updateManyItemIds:r=>e(n=>({items:n.itemIds.map((o,s)=>r[s]!==void 0?r[s]:o)}))}),kr=(e,t)=>({removeItemsById:r=>e(n=>({itemIds:n.itemIds.filter(o=>!r.includes(o)),items:Object.fromEntries(Object.entries(n.items).filter(([o])=>!r.includes(o)))})),getItemList:()=>{const r=t().items;return t().itemIds.map(n=>r[n])},setItemList:r=>e({items:Object.fromEntries(r.map(n=>[n.id,n])),itemIds:r.map(({id:n})=>n)}),insertItems:(r,n)=>e(o=>{let s;const a=r.map(({id:u})=>u);if(n){const u=o.itemIds.findIndex(l=>l===n);s=[...o.itemIds],s.splice(u,0,...a)}else s=[...o.itemIds,...a];return{items:{...o.items,...Object.fromEntries(r.map(u=>[u.id,u]))},itemIds:s}})}),Pr=(e,t)=>({boardConfig:{},getBoardConfig:()=>t().boardConfig,setBoardConfig:r=>e({boardConfig:r}),updateBoardConfig:r=>e(n=>({boardConfig:{...n.boardConfig,...r}}))}),Mr=(e,t)=>({session:{},getSessionInfo:()=>t().session,setSessionInfo:r=>e({session:r}),updateSessionInfo:r=>e(n=>({session:{...n.session,...r}}))}),Tt=({storeName:e,children:t,defaultValue:r})=>{const{wire:n}=Ie("room"),[o,s]=f.useState(!1),[a]=f.useState(()=>Re(Qe({wire:n,storeName:e,defaultValue:r},(...u)=>({...Or(...u),...Tr(...u),...kr(...u),...Pr(...u),...Mr(...u)}))));return f.useEffect(()=>{const u=a.subscribe(l=>{l.ready&&(u(),s(!0))})},[a]),o?k(Ot.Provider,{value:a,children:t}):null},ie=(e,t)=>{const r=f.useContext(Ot);return $e(r,e,t||Ae)},jr=()=>{const[e,t]=ie(n=>[n.itemIds,n.items]);return f.useMemo(()=>e.map(n=>t[n]),[e,t])},Rr=()=>{const[e,t,r]=ie(a=>[a.items,a.itemIds,a.getItemList]),[n,o]=f.useState(r()),[,s]=f.useTransition();return f.useEffect(()=>{const a=r();s(()=>{o(a)})},[e,t,r]),n},kt=5e4,Pt=f.createContext(),Dr=(e,t)=>({config:{itemTemplates:{},actions:{},uid:null,itemExtent:{},boardWrapperRect:{},boardSize:kt},updateConfiguration:r=>e(n=>({config:{...n.config,...r}})),getConfiguration:()=>t().config}),$r=(e,t)=>({boardState:{movingItems:!1,selecting:!1,zooming:!1,panning:!1,translateX:0,translateY:0,scale:1},updateBoardState:r=>e(n=>({boardState:{...n.boardState,...r}})),getBoardState:()=>t().boardState}),Ar=(e,t)=>({interactions:{},getInteractions:()=>t().interactions,register:(r,n)=>e(o=>{const s=[...o.interactions[r]||[]];return s.push(n),{interactions:{...o.interaction,[r]:s}}}),unregister:(r,n)=>e(o=>{const s=(o.interactions[r]||[]).filter(a=>a!==n);return{interactions:{...o.interaction,[r]:s}}}),callInteractions:(r,n)=>{t().interactions[r]&&t().interactions[r].forEach(o=>{o(n)})}}),Lr=(e,t)=>({selection:[],setSelection:r=>e(n=>JSON.stringify(n.selection)!==JSON.stringify(r)?{selection:r}:{}),getSelection:()=>t().selection,select:r=>e(n=>({selection:[...n.selection,...r]})),unselect:r=>e(n=>({selection:n.selection.filter(o=>!r.includes(o))})),clear:()=>e(r=>r.selection.length>0?{selection:[]}:{}),reverse:()=>e(r=>{const n=[...r.selection];return n.reverse(),{selection:n}}),selectionBox:null,setSelectionBox:r=>e(n=>{const o=n.selectionBox;return!o||!r||o.top!==r.top||o.left!==r.left||o.width!==r.width||o.height!==r.height?{selectionBox:r}:{}})}),Mt=({children:e})=>{const[t]=f.useState(()=>Re((...r)=>({...Dr(...r),...$r(...r),...Ar(...r),...Lr(...r)})));return k(Pt.Provider,{value:t,children:e})},Q=(e,t)=>{const r=f.useContext(Pt);return $e(r,e,t||Ae)},zr=()=>{const[e]=Q(t=>[t.selection]);return e};function et(e){const t=f.useRef(e);return t.current=e,f.useMemo(()=>Object.freeze({get current(){return t.current}}),[])}function Br(e){const t=et(e);f.useEffect(()=>()=>{t.current()},[])}function tt(e,t,r,n=0){const o=f.useRef(),s=f.useRef(),a=f.useRef(),u=()=>{o.current&&(clearTimeout(o.current),o.current=void 0),s.current&&(clearTimeout(s.current),s.current=void 0)};return Br(u),f.useMemo(()=>{const l=()=>{if(!a.current)return;const d=a.current;a.current=void 0,e.apply(d.this,d.args),u()},m=function(...d){o.current&&clearTimeout(o.current),a.current={args:d,this:this},o.current=setTimeout(l,r),n>0&&!s.current&&(s.current=setTimeout(l,n))};return Object.defineProperties(m,{length:{value:e.length},name:{value:`${e.name||"anonymous"}__debounced__${r}`}}),m},[r,n,...t])}const Le=100,Se=1e3,Yr=.8,jt=({x:e,y:t,scale:r,itemExtent:{right:n,left:o,top:s,bottom:a},boardWrapperRect:u,boardSize:l})=>{const m={left:-n*r+Le*r,right:u.width-o*r-Le*r,top:-a*r+Le*r,bottom:u.height-s*r-Le*r,maxRight:u.width-l*r,maxLeft:u.height-l*r},d=Math.min(Math.max(e,m.left,m.maxRight),m.right,0),c=Math.min(Math.max(t,m.top,m.maxLeft),m.bottom,0);return[d,c]},ze=()=>{const[e,t,r,n,o]=Q(h=>[h.getBoardState,h.updateBoardState,h.config.itemExtent,h.getConfiguration,h.updateConfiguration]),s=f.useRef([.1,8]),[a]=ie(h=>[h.getItemList]),u=f.useCallback(()=>{const{translateX:h,translateY:S,scale:E}=e();return{translateX:h,translateY:S,scale:E}},[e]),l=f.useCallback(h=>{const{itemExtent:S,boardWrapperRect:E,boardSize:x}=n(),v=e(),{translateX:p,translateY:I,scale:w}={...v,...h(v)};let g=w;w!==v.scale&&(g>s.current[1]&&([,g]=s.current),g<s.current[0]&&([g]=s.current));let[P,M]=[p,I];(p!==v.translateX||I!==v.translateY)&&([P,M]=jt({x:p,y:I,scale:g,itemExtent:S,boardWrapperRect:E,boardSize:x})),t({translateX:P,translateY:M,scale:g})},[e,n,t]),m=f.useCallback((h,S)=>{const{itemExtent:E,boardWrapperRect:x,boardSize:v}=n();let p=S;p||(p={x:x.width/2,y:x.height/2});const I=e();let w=I.scale*h;w>s.current[1]&&([,w]=s.current),w<s.current[0]&&([w]=s.current);const g=p.x-x.left,P=p.y-x.top,M=g-(g-I.translateX)*w/I.scale,j=P-(P-I.translateY)*w/I.scale,[$,Y]=jt({x:M,y:j,scale:w,itemExtent:E,boardWrapperRect:x,boardSize:v});t({scale:w,translateX:$,translateY:Y})},[e,n,t]),d=f.useCallback(({left:h,top:S,width:E,height:x})=>{const{boardWrapperRect:v}=n(),p=v.width/E,I=v.height/x,g=Math.min(p,I)*Yr,P=v.width/2-(h+E/2)*g,M=v.height/2-(S+x/2)*g;t({translateX:P,translateY:M,scale:g})},[n,t]),c=f.useCallback(async()=>{const{itemExtent:{width:h,height:S},boardWrapperRect:E}=n(),x=E.width/h,v=E.height/S,p=Math.min(x,v);s.current=[Math.max(p*.5,.05),Math.max(p*10,10)]},[n]),_=f.useCallback(()=>{const{boardWrapperRect:h,boardSize:S}=n(),{translateX:E,translateY:x,scale:v}=e();return{x:(h.width/2-E)/v-S/2,y:(h.height/2-x)/v-S/2}},[e,n]),b=f.useCallback(()=>{const h=a(),{boardWrapperRect:S,boardWrapper:E,boardSize:x}=n(),{scale:v,translateX:p,translateY:I}=e(),{left:w,top:g,width:P,height:M}=Ct(h.map(({id:$})=>$),E)||{left:x/2*v+S.left+p,top:x/2*v+S.top+I,width:0,height:0},j={left:(w-S.left-p)/v,top:(g-S.top-I)/v,width:P/v,height:M/v};if(j.right=j.left+j.width,j.bottom=j.top+j.height,j.width<Se){const $=(Se-j.width)/2;j.left-=$,j.right+=$,j.width=Se}if(j.height<Se){const $=(Se-j.height)/2;j.top-=$,j.bottom+=$,j.height=Se}o({itemExtent:j})},[e,n,a,o]),C=tt(()=>b(),[b],200);return f.useEffect(()=>{r.left&&c()},[c,r]),{setDim:l,getDim:u,zoomTo:m,zoomToCenter:m,zoomToExtent:d,getCenter:_,updateItemExtent:C}},Rt=e=>{const[t,r,n]=Q(({register:a,unregister:u,callInteractions:l})=>[a,u,l]),o=f.useCallback(a=>(t(e,a),()=>{r(e,a)}),[e,t,r]),s=f.useCallback(a=>{n(e,a)},[n,e]);return{register:o,call:s}},Be=()=>{const{call:e}=Rt("place"),{getCenter:t,updateItemExtent:r}=ze(),[n,o,s,a]=Q(T=>[T.clear,T.reverse,T.unselect,T.getConfiguration]),{getItems:u,getItemIds:l,setItemIds:m,updateItems:d,moveItems:c,removeItemsById:_,getItemList:b,insertItems:C,setItemList:h}=ie(({getItems:T,getItemIds:D,setItemIds:A,updateItems:W,moveItems:z,removeItemsById:K,getItemList:G,insertItems:re,setItemList:ne})=>({getItems:T,getItemIds:D,setItemIds:A,updateItems:W,moveItems:z,removeItemsById:K,getItemList:G,insertItems:re,setItemList:ne})),S=f.useCallback((T,D)=>{let A=D;typeof D=="object"&&(A=()=>D);const W=l().filter(G=>T.includes(G)),z=u(),K=Object.fromEntries(W.map(G=>[G,A({...z[G]})]));d(K),r()},[l,u,r,d]),E=f.useCallback(T=>{h(T),n(),r()},[n,h,r]),x=f.useCallback((T,D)=>{S([T],D)},[S]),v=f.useCallback((T,D)=>{c(T,D),r()},[c,r]),p=f.useCallback(T=>{const D=l(),A=D.filter(z=>!T.includes(z)),W=D.filter(z=>T.includes(z));m([...A,...W])},[l,m]),I=f.useCallback((T,{type:D,size:A}={})=>{const{boardWrapper:W}=a(),z={},K=u();T.forEach(G=>{const re=K[G],ne=Ze(W,G);if(!ne)return;const oe={type:D||"grid",size:A||1,offset:{x:0,y:0},...re.grid},F=xr({x:re.x,y:re.y,width:ne.clientWidth,height:ne.clientHeight},oe);z[G]={...re,...F}}),d(z)},[a,u,d]),w=f.useCallback((T,D)=>{p(T),S(T,A=>{const W={...A};return delete W.moving,W}),I(T,D),e(T),r()},[S,e,p,I,r]),g=f.useCallback(T=>{m(T)},[m]),P=f.useCallback(T=>{const D=l(),A=D.filter(z=>T.includes(z)),W=D.map(z=>T.includes(z)?A.pop():z);m(W),o()},[l,o,m]),M=f.useCallback((T,D)=>{const A=u(),W=T.map(F=>A[F]),z=D.map(F=>A[F]),K=D.reduce((F,te)=>(F[te]=W.shift(),F),{}),G=z.reduce((F,te)=>{const me=K[te.id],be={...te,x:me.x,y:me.y};return F[te.id]=be,F},{});d(G);const re=T.reduce((F,te)=>(F[te]=D.shift(),F),{}),oe=l().map(F=>T.includes(F)?re[F]:F);m(oe)},[u,d,l,m]),j=f.useCallback((T,D)=>{const A=t(),W=T.map((z,K)=>!z.x||!z.y?{...z,x:A.x+2*K,y:A.y+2*K}:z);C(W,D),r()},[t,C,r]),$=f.useCallback((T,D)=>{j([T],D)},[j]),Y=f.useCallback(T=>{s(T),_(T)},[s,_]),N=f.useCallback(T=>{const D=u();return T.map(A=>D[A])},[u]),H=f.useCallback(({target:T,clientX:D,clientY:A},{returnLocked:W=!1,passLocked:z=!1}={})=>{if(["INPUT","TEXTAREA"].includes(T.tagName))return null;const K=Oe(T,"item");if(K){if(ye(K,"selected"))return K;if(!z&&ye(K,"locked")&&!ye(T,"passthrough"))return W?K:null;if(ye(T,"passthrough")){const G=l(),{boardWrapper:re}=a(),ne=G.reduce((oe,F)=>{const te=Ze(re,F),me=te.getBoundingClientRect();return wt({x:D,y:A},me)&&oe.unshift(te),oe},[]);for(let oe=0;oe<ne.length;oe+=1){const F=ne[oe];if(F!==K&&(z||!ye(F,"locked")))return F}return null}}return K},[a,l]);return{putItemsOnTop:p,batchUpdateItems:S,updateItemOrder:g,moveItems:v,placeItems:w,updateItem:x,swapItems:M,reverseItemsOrder:P,setItemList:E,pushItem:$,pushItems:j,removeItems:Y,getItemList:b,findElementUnderPointer:H,getItems:N}};var Nr=function e(t,r){if(t===r)return!0;if(t&&r&&typeof t=="object"&&typeof r=="object"){if(t.constructor!==r.constructor)return!1;var n,o,s;if(Array.isArray(t)){if(n=t.length,n!=r.length)return!1;for(o=n;o--!==0;)if(!e(t[o],r[o]))return!1;return!0}if(t instanceof Map&&r instanceof Map){if(t.size!==r.size)return!1;for(o of t.entries())if(!r.has(o[0]))return!1;for(o of t.entries())if(!e(o[1],r.get(o[0])))return!1;return!0}if(t instanceof Set&&r instanceof Set){if(t.size!==r.size)return!1;for(o of t.entries())if(!r.has(o[0]))return!1;return!0}if(ArrayBuffer.isView(t)&&ArrayBuffer.isView(r)){if(n=t.length,n!=r.length)return!1;for(o=n;o--!==0;)if(t[o]!==r[o])return!1;return!0}if(t.constructor===RegExp)return t.source===r.source&&t.flags===r.flags;if(t.valueOf!==Object.prototype.valueOf)return t.valueOf()===r.valueOf();if(t.toString!==Object.prototype.toString)return t.toString()===r.toString();if(s=Object.keys(t),n=s.length,n!==Object.keys(r).length)return!1;for(o=n;o--!==0;)if(!Object.prototype.hasOwnProperty.call(r,s[o]))return!1;for(o=n;o--!==0;){var a=s[o];if(!e(t[a],r[a]))return!1}return!0}return t!==t&&r!==r};function Ur(e,t,r,n=0){f.useEffect(tt(e,t,r,n),t)}const Xr=(e,t)=>{if(e.type in t){const r=t[e.type].defaultActions;return typeof r=="function"?r(e):r}return[]},Dt=(e,t)=>{const{actions:r=Xr(e,t)}=e;return r.map(n=>typeof n=="string"?{name:n}:n)},Wr=()=>{const[e,t]=ie(c=>[c.items,c.getItems]),[r,n,o]=Q(c=>[c.config.itemTemplates,c.selection,c.getSelection]),[s,a]=f.useState([]),u=f.useRef(!1),[,l]=f.useTransition();f.useEffect(()=>(u.current=!0,()=>{u.current=!1}),[]);const m=f.useCallback(c=>{const _=t();if(c)return[c,c.map(C=>_[C])];const b=o();return[b,b.map(C=>_[C])]},[t,o]),d=f.useCallback(()=>{const[c,_]=m();if(c.length>0){if(!u.current)return;const b=_.reduce((C,h)=>{const S=Dt(h,r);return C.filter(E=>S.some(x=>Nr(E,x)))},Dt(_[0],r));l(()=>{a(b)})}else l(()=>{a([])})},[m,r]);return Ur(()=>d(),[e,n,d],100),{availableActions:s}},Vr=()=>{const[e]=Q(t=>[t.selectionBox]);return e};let ge=(e=21)=>crypto.getRandomValues(new Uint8Array(e)).reduce((t,r)=>(r&=63,r<36?t+=r.toString(36):r<62?t+=(r-26).toString(36).toUpperCase():r>62?t+="-":t+="_",t),"");const $t=f.createContext(),rt=e=>{localStorage.setItem("user",JSON.stringify(e))},Fr=()=>{if(localStorage.user){const t={name:"Player",color:It(),uid:ge(),...JSON.parse(localStorage.user)};return rt(t),t}const e={name:"Player",color:It(),uid:ge()};return rt(e),e},Kr=e=>(t,r)=>({isSpaceMaster:!1,users:{},getUser:()=>r().users[e],getUsers:()=>r().users,getUserList:()=>Object.values(r().users),getLocalUsers:()=>{if(!r().users[e])return[];const{space:n}=r().users[e];return r().getUserList().filter(({space:o})=>o===n)},addUser:n=>t(o=>({users:{...o.users,[n.id]:n}})),updateUser:(n,o)=>t(s=>{if(!s.users[n])return{};const a={...s.users[n],...o,id:n,uid:s.users[n].uid};return a.id===e&&rt(a),setTimeout(()=>r().electSpaceMaster(),100),{users:{...s.users,[n]:a}}}),removeUser:n=>t(o=>{const s={...o.users};return delete s[n],setTimeout(()=>r().electSpaceMaster(),100),{users:s}}),updateCurrentUser:n=>r().updateUser(e,n),joinSpace:n=>r().updateUser(e,{space:n,spaceJoinedTimestamp:Date.now()}),electSpaceMaster:()=>{const n=r().getLocalUsers(),o={uid:null,timestamp:Date.now()};Object.values(n).forEach(({spaceJoinedTimestamp:s,id:a})=>{s<o.timestamp&&(o.id=a,o.timestamp=s)}),t({isSpaceMaster:o.id===e})}}),Hr=e=>({cursors:{},moveCursor:(t,r)=>e(n=>({cursors:{...n.cursors,[t]:r}})),removeCursor:t=>e(r=>{const n={...r.cursors};return delete n[t],{cursors:n}})}),At=({storeName:e,children:t})=>{const{wire:r,isMaster:n}=Ie("room"),[o,s]=f.useState(null),[a,u]=f.useState(!1),l=f.useRef(!1);return f.useEffect(()=>{let m=!0;const d=[];if(!o&&!l.current)return l.current=!0,(()=>{const _=Re(Qe({wire:r,storeName:e,noSync:["updateCurrentUser","joinSpace","isSpaceMaster","electSpaceMaster"]},(...C)=>({...Kr(r.userId)(...C),...Hr(...C)}))),b=_.subscribe(C=>{C.ready&&(b(),m&&s(_))})})(),()=>{m=!1,l.current=!1,d.forEach(_=>_())}},[o,e,r,r.userId]),f.useEffect(()=>{if(o)return o.getState().addUser({...Fr(),id:r.userId}),u(!0),()=>{o.getState().removeUser(r.userId)}},[n,o,r]),f.useEffect(()=>{if(o){const m=r.subscribe("userLeave",d=>{o.getState().removeUser(d)});return()=>{m()}}},[n,o,r]),f.useEffect(()=>{n&&o&&o.getState().updateCurrentUser({isMaster:n})},[n,o,r]),a?k($t.Provider,{value:o,children:t}):null},he=(e,t)=>{const r=f.useContext($t);return $e(r,e,t||Ae)},qr=()=>{const[e,t,r,n,o]=he(u=>[u.isSpaceMaster,u.getUser(),u.users,u.updateCurrentUser,u.joinSpace]),s=f.useMemo(()=>Object.values(r),[r]),a=f.useMemo(()=>{const{space:u}=t;return s.filter(({space:l})=>l===u)},[t,s]);return{isSpaceMaster:e,currentUser:t,updateCurrentUser:n,users:s,localUsers:a,joinSpace:o}},Gr=()=>{const[e,t,r]=ie(o=>[o.boardConfig,o.getBoardConfig,o.setBoardConfig]),n=f.useCallback(o=>{let s=o;typeof o=="object"&&(s=()=>o);const a=t(),u=s(a);r(u)},[t,r]);return[e,n]},Jr=()=>{const[e]=Q(t=>[t.boardState]);return e},Zr=()=>{const[e,t,r,n]=ie(o=>[o.getSessionInfo,o.setSessionInfo,o.updateSessionInfo,o.session]);return{getSessionInfo:e,setSessionInfo:t,sessionInfo:n,updateSessionInfo:r}},Lt=f.createContext(),Qr=({user:{name:e,uid:t,color:r},content:n})=>({type:"message",user:{name:e,uid:t,color:r},content:n,uid:ge(),timestamp:new Date().toISOString()}),en=(e,t)=>({messages:[],setMessages:r=>e({messages:r.map(n=>({...n,timestamp:Date.parse(n.timestamp)}))}),addMessage:r=>e(n=>({messages:[...n.messages,{...r,timestamp:Date.parse(r.timestamp)}]})),sendMessage:(r,n)=>{const o=Qr({user:r,content:n});o&&t().addMessage(o)}}),zt=({storeName:e,children:t,defaultValue:r=[]})=>{const{wire:n}=Ie("room"),[o]=f.useState(()=>Re(Qe({wire:n,storeName:e,defaultValue:r,noSync:["sendMessage"]},(...s)=>({...en(...s)}))));return k(Lt.Provider,{value:o,children:t})},tn=(e,t)=>{const r=f.useContext(Lt);return $e(r,e,t||Ae)},rn=()=>{},nn=(e=rn)=>{const t=he(a=>a.getUser()),[r,n,o]=tn(a=>[a.messages,a.setMessages,a.sendMessage]);f.useEffect(()=>{r.length&&e()},[r,e]);const s=f.useCallback(a=>{o(t,a)},[t,o]);return{messages:r,setMessages:n,sendMessage:s}},Bt=({children:e,session:t})=>{const r=he(n=>n.joinSpace);return f.useEffect(()=>(r(t),()=>{r(null)}),[r,t]),e},on=({socket:e,room:t,session:r,items:n=[],messages:o=[],LoadingComponent:s,...a})=>{const[u]=f.useState(t||ge()),[l]=f.useState(r||ge()),[m]=f.useState(()=>({itemIds:n.map(({id:c})=>c),items:Object.fromEntries(n.map(c=>[c.id,c]))}));return Ie("room")?k(zt,{storeName:`${l}_messages`,defaultValue:o,children:k(Mt,{children:k(Tt,{storeName:`${l}_item`,defaultValue:m,children:k(Bt,{...a,session:l})})})}):k(gt,{room:u,channel:"room",socket:e,LoadingComponent:s,children:k(At,{storeName:`${u}_users`,children:k(zt,{storeName:`${l}_messages`,defaultValue:o,children:k(Mt,{children:k(Tt,{storeName:`${l}_item`,defaultValue:m,children:k(Bt,{...a,session:l})})})})})})},sn=({socket:e,room:t,children:r,LoadingComponent:n})=>{const[o]=f.useState(t||ge());return k(gt,{room:o,channel:"room",socket:e,LoadingComponent:n,children:k(At,{storeName:`${o}_users`,children:r})})},nt=()=>{const e=navigator.userAgent.toLowerCase();return/mac os ?x 10/.test(e)},an=(()=>{const e=document.createElement("iframe");e.src="#",document.body.appendChild(e);const t=e.contentWindow.document;t.open(),t.write("<!DOCTYPE html><html><head></head><body><span>a</span></body></html>"),t.close();const r=t.body.firstElementChild.offsetHeight;return document.body.removeChild(e),r})(),cn=800,Yt=(e,t)=>{const r=Object.keys(e).map(n=>Number(n)).find(n=>n!==t);return e[r]},Nt=([e,t],[r,n])=>{const o=Math.abs(e-r),s=Math.abs(t-n);return Math.hypot(o,s)},ve=()=>{},un=e=>t=>{const{event:r}=t;return r.isPropagationStopped()?null:e(t)},ln=e=>async(...t)=>{try{await e(...t)}catch(r){console.error(r)}};class fn{constructor(){ar(this,"lastPromise",Promise.resolve(!0))}add(t,...r){return new Promise((n,o)=>{this.lastPromise=this.lastPromise.then(()=>un(ln(t))(...r)).then(n).catch(o)})}}const ae=new fn,Ye=({children:e,onDrag:t=ve,onDragStart:r=ve,onDragEnd:n=ve,onPan:o=ve,onTap:s=ve,onLongTap:a=ve,onDoubleTap:u=ve,onZoom:l,mainAction:m="drag"})=>{const d=f.useRef(null),c=f.useRef({moving:!1,pointers:{},mainPointer:void 0}),_=E=>{const{deltaX:x,deltaY:v,clientX:p,clientY:I,deltaMode:w,ctrlKey:g,altKey:P,metaKey:M,target:j}=E;if(!(P||g&&!nt()))if(nt()&&!g)ae.add(o,{deltaX:-2*x,deltaY:-2*v,button:1,ctrlKey:g,metaKey:M,target:j,event:E});else{if(l===void 0||!v)return;let $=v;switch(w){case 1:$*=an;break;case 2:$*=cn;break}nt()&&($*=2),ae.add(l,{scale:$,clientX:p,clientY:I,event:E})}},b=E=>{const{target:x,button:v,clientX:p,clientY:I,pointerId:w,altKey:g,ctrlKey:P,metaKey:M,isPrimary:j}=E;if(c.current.pointers[w]={clientX:p,clientY:I},j&&(c.current.mainPointer=void 0),c.current.mainPointer!==void 0){if(c.current.mainPointer!==w)try{const{clientX:$,clientY:Y}=Yt(c.current.pointers,w),N=($+p)/2,H=(Y+I)/2,T=Nt([$,Y],[p,I]);Object.assign(c.current,{pressed:!0,moving:!1,gestureStart:!1,startX:p,startY:I,prevX:N,prevY:H,startDistance:T,prevDistance:T})}catch($){console.log("Error while getting other pointer. Ignoring",$),c.current.mainPointer}return}c.current.mainPointer=w,Object.assign(c.current,{pressed:!0,moving:!1,gestureStart:!1,startX:p,startY:I,prevX:p,prevY:I,currentButton:v,pointerDownEvent:E,target:x,timeStart:Date.now(),longTapTimeout:setTimeout(async()=>{c.current.noTap=!0,ae.add(a,{clientX:p,clientY:I,altKey:g,ctrlKey:P,metaKey:M,target:x,event:E})},750)});try{x.setPointerCapture(w)}catch($){console.log("Fail to capture pointer",$)}},C=E=>{if(c.current.pressed){const{pointerId:x,clientX:v,clientY:p,altKey:I,shiftKey:w,ctrlKey:g,metaKey:P,buttons:M,pointerType:j}=E;c.current.pointers[x]={clientX:v,clientY:p},c.current.moving=!0;const $=Object.keys(c.current.pointers).length===2;let Y,N,H;if($){const{clientX:W,clientY:z}=Yt(c.current.pointers,x);Y=(W+v)/2,N=(z+p)/2,H=Nt([W,z],[v,p])}else Y=v,N=p;let T=w||I||g||P||M!==1;m!=="drag"&&(T=!T);const D=!T,A=T;if(D){c.current.gestureStart||(d.current.style.cursor="move",c.current.gestureStart=!0,clearTimeout(c.current.longTapTimeout),ae.add(r,{deltaX:0,deltaY:0,startX:c.current.startX,startY:c.current.startY,clientX:c.current.startX,clientY:c.current.startY,distanceX:0,distanceY:0,button:c.current.currentButton,altKey:I,shiftKey:w,ctrlKey:g,metaKey:P,target:c.current.target,event:c.current.pointerDownEvent}));const W=Y-c.current.prevX,z=N-c.current.prevY,K=Y-c.current.startX,G=N-c.current.startY;ae.add(t,{deltaX:W,deltaY:z,startX:c.current.startX,startY:c.current.startY,clientX:Y,clientY:N,distanceX:K,distanceY:G,button:c.current.currentButton,altKey:I,shiftKey:w,ctrlKey:g,metaKey:P,target:c.current.target,event:E})}if(A){c.current.gestureStart||(d.current.style.cursor="move",c.current.gestureStart=!0,clearTimeout(c.current.longTapTimeout));const W=Y-c.current.prevX,z=N-c.current.prevY,{target:K}=c.current;if(ae.add(o,{deltaX:W,deltaY:z,button:c.current.currentButton,altKey:I,shiftKey:w,ctrlKey:g,metaKey:P,target:K,event:E}),H!==c.current.prevDistance&&l){const G=c.current.prevDistance-H;Math.abs(G)>0&&(ae.add(l,{scale:G*3,clientX:Y,clientY:N,event:E}),c.current.prevDistance=H)}}c.current.prevX=Y,c.current.prevY=N}},h=E=>{const{clientX:x,clientY:v,altKey:p,shiftKey:I,ctrlKey:w,metaKey:g,target:P,pointerId:M}=E;if(c.current.pointers[M]&&(delete c.current.pointers[M],c.current.mainPointer===M)){for(;Object.keys(c.current.pointers).length>0;){c.current.mainPointer=Number(Object.keys(c.current.pointers)[0]);try{c.current.target.setPointerCapture(c.current.mainPointer);return}catch(j){console.log("Fails to set pointer capture",j),c.current.mainPointer=void 0,delete c.current.pointers[Object.keys(c.current.pointers)[0]]}}if(c.current.mainPointer=void 0,c.current.pressed=!1,clearTimeout(c.current.longTapTimeout),c.current.moving)c.current.moving=!1,ae.add(n,{deltaX:x-c.current.prevX,deltaY:v-c.current.prevY,startX:c.current.startX,startY:c.current.startY,clientX:x,clientY:v,distanceX:x-c.current.startX,distanceY:v-c.current.startY,button:c.current.currentButton,altKey:p,shiftKey:I,ctrlKey:w,metaKey:g,event:E}),d.current.style.cursor="auto";else{const j=Date.now();c.current.noTap?c.current.noTap=!1:c.current.timeStart-j<300&&ae.add(s,{clientX:x,clientY:v,altKey:p,shiftKey:I,ctrlKey:w,metaKey:g,target:P,event:E})}}};return k("div",{onWheel:_,onPointerDown:b,onPointerMove:C,onPointerUp:h,onPointerOut:h,onPointerLeave:h,onPointerCancel:h,onDoubleClick:E=>{const{clientX:x,clientY:v,altKey:p,shiftKey:I,ctrlKey:w,metaKey:g,target:P}=E;ae.add(u,{clientX:x,clientY:v,altKey:p,shiftKey:I,ctrlKey:w,metaKey:g,target:P,event:E})},style:{touchAction:"none"},ref:d,children:e})},ot=({onResize:e,...t})=>{const[r]=Q(o=>[o.getBoardState]);return k(Ye,{onDrag:({deltaX:o,deltaY:s,event:a})=>{a.stopPropagation();const{scale:u}=r();e({width:o/u,height:s/u})},children:k("div",{...t})})};let dn={data:""},mn=e=>typeof window=="object"?((e?e.querySelector("#_goober"):window._goober)||Object.assign((e||document.head).appendChild(document.createElement("style")),{innerHTML:" ",id:"_goober"})).firstChild:e||dn,pn=/(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g,gn=/\/\*[^]*?\*\/|  +/g,Ut=/\n+/g,de=(e,t)=>{let r="",n="",o="";for(let s in e){let a=e[s];s[0]=="@"?s[1]=="i"?r=s+" "+a+";":n+=s[1]=="f"?de(a,s):s+"{"+de(a,s[1]=="k"?"":t)+"}":typeof a=="object"?n+=de(a,t?t.replace(/([^,])+/g,u=>s.replace(/(^:.*)|([^,])+/g,l=>/&/.test(l)?l.replace(/&/g,u):u?u+" "+l:l)):s):a!=null&&(s=/^--/.test(s)?s:s.replace(/[A-Z]/g,"-$&").toLowerCase(),o+=de.p?de.p(s,a):s+":"+a+";")}return r+(t&&o?t+"{"+o+"}":o)+n},ue={},Xt=e=>{if(typeof e=="object"){let t="";for(let r in e)t+=r+Xt(e[r]);return t}return e},hn=(e,t,r,n,o)=>{let s=Xt(e),a=ue[s]||(ue[s]=(l=>{let m=0,d=11;for(;m<l.length;)d=101*d+l.charCodeAt(m++)>>>0;return"go"+d})(s));if(!ue[a]){let l=s!==e?e:(m=>{let d,c,_=[{}];for(;d=pn.exec(m.replace(gn,""));)d[4]?_.shift():d[3]?(c=d[3].replace(Ut," ").trim(),_.unshift(_[0][c]=_[0][c]||{})):_[0][d[1]]=d[2].replace(Ut," ").trim();return _[0]})(e);ue[a]=de(o?{["@keyframes "+a]:l}:l,r?"":"."+a)}let u=r&&ue.g?ue.g:null;return r&&(ue.g=ue[a]),((l,m,d,c)=>{c?m.data=m.data.replace(c,l):m.data.indexOf(l)===-1&&(m.data=d?l+m.data:m.data+l)})(ue[a],t,n,u),a},vn=(e,t,r)=>e.reduce((n,o,s)=>{let a=t[s];if(a&&a.call){let u=a(r),l=u&&u.props&&u.props.className||/^go/.test(u)&&u;a=l?"."+l:u&&typeof u=="object"?u.props?"":de(u,""):u===!1?"":u}return n+o+(a??"")},"");function q(e){let t=this||{},r=e.call?e(t.p):e;return hn(r.unshift?r.raw?vn(r,[].slice.call(arguments,1),t.p):r.reduce((n,o)=>Object.assign(n,o&&o.call?o(t.p):o),{}):r,mn(t.target),t.g,t.o,t.k)}q.bind({g:1}),q.bind({k:1});function yn(e,t,r,n){de.p=t}var Sn=function e(t,r){if(t===r)return!0;if(t&&r&&typeof t=="object"&&typeof r=="object"){if(t.constructor!==r.constructor)return!1;var n,o,s;if(Array.isArray(t)){if(n=t.length,n!=r.length)return!1;for(o=n;o--!==0;)if(!e(t[o],r[o]))return!1;return!0}if(t.constructor===RegExp)return t.source===r.source&&t.flags===r.flags;if(t.valueOf!==Object.prototype.valueOf)return t.valueOf()===r.valueOf();if(t.toString!==Object.prototype.toString)return t.toString()===r.toString();if(s=Object.keys(t),n=s.length,n!==Object.keys(r).length)return!1;for(o=n;o--!==0;)if(!Object.prototype.hasOwnProperty.call(r,s[o]))return!1;for(o=n;o--!==0;){var a=s[o];if(!e(t[a],r[a]))return!1}return!0}return t!==t&&r!==r};const bn=q`
   display: inline-block;
   transition: transform 150ms;
   user-select: none;
@@ -105,5 +105,5 @@ Check the top-level render call using <`+O+">.")}return y}}function nr(i,y){{if(
   cursor: nwse-resize;
   bottom: -6px;
   right: -6px;
-`,Pn=({onReload:e})=>ce("div",{className:`syncboard-error-item ${q({width:"100px",display:"flex",flexDirection:"column",justifyContent:"center",textAlign:"center",color:"red"})}`,children:["Sorry, this item seems broken.",k("button",{onClick:e,children:"Reload it"})]});class Mn extends f.Component{constructor(t){super(t),this.state={hasError:!1,itemId:t.itemId},this.onReload=this.onReload.bind(this)}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(t){console.error(`Error for item ${this.state.itemId}`,t,this.props.state)}onReload(){this.setState({hasError:!1})}render(){const{ErrorComponent:t}=this.props;return this.state.hasError?k(t,{onReload:this.onReload}):this.props.children}}const jn=e=>{e.target.className=""},Rn=({width:e,height:t,actualWidth:r,actualHeight:n,prevState:o,keepRatio:s})=>{let{width:a,height:u}=o;if([a,u]=[parseFloat(a),parseFloat(u)],(!a||Number.isNaN(Number(a)))&&(a=r),(!u||Number.isNaN(Number(u)))&&(u=n),s){const l=a/u;return{...o,width:(a+e).toFixed(1),height:(u+t/l).toFixed(1)}}return{...o,width:(a+e).toFixed(1),height:(u+t).toFixed(1)}},Dn={w:!0,h:!0,b:!0},$n=({setState:e,state:{type:t,rotation:r=0,id:n,locked:o,extraClasses:s,...a}={},animate:u="hvr-pop",isSelected:l,itemMap:m,showResizeHandle:d=!0})=>{var w;const c=f.useRef(null),{component:_=()=>null,resizeDirections:b=Dn,resize:C=Rn}=m[t],h=f.useCallback(g=>e(n,g),[e,n]);f.useEffect(()=>{c.current.className=u},[u]);const S=["item",n,bn];o&&S.push("locked"),l&&(S.push("selected"),S.push(_n));const E=S.join(" "),x=({width:g=0,height:P=0,keepRatio:M})=>{h(j=>{const{offsetWidth:$,offsetHeight:Y}=c.current;return C({prevState:j,width:g,height:P,actualHeight:Y,actualWidth:$,keepRatio:M})})},v=({width:g})=>{x({width:g})},p=({height:g})=>{x({height:g})},I=({width:g})=>{x({height:g,width:g,keepRatio:!0})};return k("div",{style:{transform:`rotate(${r}deg`},"data-id":n,className:E,children:ce("div",{style:{display:"flex"},ref:c,onAnimationEnd:jn,onKeyDown:g=>g.stopPropagation(),onKeyUp:g=>g.stopPropagation(),children:[k(Mn,{itemId:n,state:a,ErrorComponent:((w=m==null?void 0:m.error)==null?void 0:w.component)||Pn,children:k(_,{...a,id:n,setState:h})}),k("div",{className:`corner ${ke} ${En}`}),k("div",{className:`corner ${ke} ${wn}`}),k("div",{className:`corner ${ke} ${xn}`}),k("div",{className:`corner ${ke} ${Cn}`}),k("div",{className:`${ke} ${In}`}),d&&ce(pt,{children:[b.b&&k(ot,{className:`${st} ${kn}`,onResize:I}),b.h&&k(ot,{className:`${st} ${Tn}`,onResize:p}),b.w&&k(ot,{className:`${st} ${On}`,onResize:v})]})]})})},An=f.memo($n,({state:e,setState:t,isSelected:r,showResizeHandle:n},{state:o,setState:s,isSelected:a,showResizeHandle:u})=>r===a&&n===u&&t===s&&Sn(e,o)),Ln=e=>e,zn=({state:e={},getCurrentUser:t,className:r,...n})=>{if(!n.itemMap[e.type])return null;const{stateHook:o=Ln}=n.itemMap[e.type],{x:s=0,y:a=0,layer:u=0,moving:l,...m}=o(e,{getCurrentUser:t}),d=(u+4)*10+100+(l?5:0);return k("div",{className:r,style:{transform:`translate(${s}px, ${a}px)`,zIndex:d},children:k(An,{...n,showResizeHandle:n.isSelected&&n.showResizeHandle,state:m})})},Bn=f.memo(zn),Yn=()=>{const{updateItem:e}=Be(),[t,r]=ie(m=>[m.itemIds,m.items]),[n,o,s,a]=Q(m=>[m.config.boardSize,m.config.showResizeHandle,m.config.itemTemplates,m.selection]),[u]=he(m=>[m.getUser]),l=q({position:"absolute",top:`${n/2}px`,left:`${n/2}px`,display:"inline-block"});return t.map(m=>k(Bn,{state:r[m],setState:e,isSelected:a.includes(m),itemMap:s,boardSize:n,getCurrentUser:u,showResizeHandle:o,className:l},m))};function Nn(e=!1){const t=f.useRef(e),r=f.useCallback(()=>t.current,[]);return f.useEffect(()=>(t.current=!0,()=>{t.current=!1}),[]),r}function Un(e,...t){e&&e.addEventListener&&e.addEventListener(...t)}function Xn(e,...t){e&&e.removeEventListener&&e.removeEventListener(...t)}const Wn=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);function le(e,...t){const r=Nn(),n=et(t[1]),o=f.useMemo(()=>function(...s){r()&&(typeof n.current=="function"?n.current.apply(this,s):typeof n.current.handleEvent=="function"&&n.current.handleEvent.apply(this,s))},[]);f.useEffect(()=>{const s=e&&Wn(e,"current")?e.current:e;if(!s)return;const a=t.slice(2);return Un(s,t[0],o,...a),()=>Xn(s,t[0],o,...a)},[e,t[0]])}const Vn=q({zIndex:210,position:"absolute",backgroundColor:"hsla(0, 40%, 50%, 10%)",border:"2px solid hsl(0, 55%, 40%)"}),Fn=(e,t,r=!1)=>{const n=t.getElementsByClassName("selector");if(!n.length)return[];const o=n[0];return Array.from(t.getElementsByClassName("item")).filter(s=>{const a=Te(s),u=e[a];return!u||!r&&u.locked?!1:Cr(s,o)}).map(s=>Te(s))},Kn=({children:e,moveFirst:t})=>{const[r,n,o,s,a,u,l]=Q(g=>[g.getSelection,g.clear,g.setSelection,g.select,g.getConfiguration,g.getBoardState,g.updateBoardState]),{findElementUnderPointer:m}=Be(),[d]=ie(g=>[g.getItems]),[c,_]=f.useState({}),[,b]=f.useTransition(),[C,h]=f.useState(!1),S=f.useRef(null),E=f.useRef({moving:!1});return le(document,"keydown",g=>{g.key==="l"&&h(!0)}),le(document,"keyup",g=>{g.key==="l"&&h(!1)}),f.useEffect(()=>(n(),()=>{n()}),[n]),f.useEffect(()=>{if(E.current.moving){const g=d(),{boardWrapper:P}=a(),M=Fn(g,P,C);b(()=>{o(M)})}},[a,d,c,o,C]),k(Ye,{onDragStart:async g=>{await m(g)||(E.current.moving=!0,b(()=>{l({selecting:!0})}),S.current.style.cursor="crosshair")},onDrag:({distanceY:g,distanceX:P,startX:M,startY:j})=>{if(E.current.moving){const{top:$,left:Y}=S.current.getBoundingClientRect(),{scale:N}=u(),H=(M-Y)/N,T=(j-$)/N,D=P/N,A=g/N;D>0?(E.current.left=H,E.current.width=D):(E.current.left=H+D,E.current.width=-D),A>0?(E.current.top=T,E.current.height=A):(E.current.top=T+A,E.current.height=-A),_({...E.current,moving:!0})}},onDragEnd:()=>{E.current.moving&&(b(()=>{l({selecting:!1})}),E.current.moving=!1,_({moving:!1}),S.current.style.cursor="auto")},onTap:g=>{const{target:P,ctrlKey:M,metaKey:j}=g,$=m(g);if(!$&&Oe(P,"board"))n();else{const Y=Te($);if(!Y){n();return}const N=r();$&&!N.includes(Y)&&(M||j?s([Y]):o([Y]))}},onLongTap:({target:g})=>{const P=Oe(g,"item");if(P){const M=Te(P);o([M])}},mainAction:t?"pan":"drag",children:ce("div",{ref:S,children:[c.moving&&k("div",{style:{transform:`translate(${c.left}px, ${c.top}px)`,height:`${c.height}px`,width:`${c.width}px`},className:`selector ${Vn}`}),e]})})},Hn=({children:e})=>{const{moveItems:t,placeItems:r,findElementUnderPointer:n}=Be(),[o,s,a,u,l]=Q(S=>[S.select,S.setSelection,S.getSelection,S.getBoardState,S.updateBoardState]),[m]=ie(S=>[S.getBoardConfig]),d=f.useRef({}),c=f.useRef({items:[]}),_=S=>{const{ctrlKey:E,metaKey:x,event:v}=S,p=n(S);if(p){v.stopPropagation();const I=a();c.current.items=I;const w=Te(p);I.includes(w)||(E||x?(c.current.items=[...I,w],o([w])):(c.current.items=[w],s([w]))),Object.assign(d.current,{moving:!0,remainX:0,remainY:0})}},b=({deltaX:S,deltaY:E,event:x})=>{if(d.current.moving){x.stopPropagation();const{scale:v,movingItems:p}=u(),I=d.current.remainX+S/v,w=d.current.remainY+E/v;t(c.current.items,{x:I,y:w},!0),p||l({movingItems:!0})}},C=()=>{if(d.current.moving){const{gridSize:S=1}=m(),E=S||1;d.current={moving:!1},r(c.current.items,{type:"grid",size:E}),l({movingItems:!1})}};return le(document,"keydown",S=>{if(["INPUT","TEXTAREA"].includes(S.target.tagName))return;const E=a();if(E.length){const{gridSize:x=1}=m();let v=0,p=0;switch(S.key){case"ArrowLeft":v=-10;break;case"ArrowRight":v=10;break;case"ArrowUp":p=-10;break;case"ArrowDown":p=10;break}(v||p)&&(S.shiftKey&&(v*=5,p*=5),(S.ctrlKey||S.altKey||S.metaKey)&&(v/=10,p/=10),t(E,{x:v,y:p},!0),r(E,{type:"grid",size:x||1}),S.preventDefault())}}),k(Ye,{onDragStart:_,onDrag:b,onDragEnd:C,children:e})},qn=e=>{const t=f.useRef({hover:!1,x:0,y:0});return le(e.current,"mousemove",n=>{const{clientX:o,clientY:s}=n;t.current.x=o,t.current.y=s}),le(e.current,"mouseenter",()=>{t.current.hover=!0}),le(e.current,"mouseleave",()=>{t.current.hover=!1}),f.useCallback(()=>t.current,[])},Gn=[...Array(5).keys()].map(e=>`Digit${e+1}`),Jn=()=>{const[e,t]=f.useState({}),[r,n]=Q(o=>[o.getBoardState,o.updateBoardState]);return le(document,"keydown",o=>{if(!["INPUT","TEXTAREA"].includes(o.target.tagName)&&Gn.includes(o.code)){const s=o.code,{translateX:a,translateY:u,scale:l}=r();o.altKey||o.metaKey||o.ctrlKey||o.shiftKey?t(m=>({...m,[s]:{translateX:a,translateY:u,scale:l}})):e[s]&&n(e[s]),o.preventDefault()}}),null},Zn=({children:e,moveFirst:t=!1})=>{const r=f.useRef(null),[n,o,s,a,u]=Q(p=>[{translateX:p.boardState.translateX,translateY:p.boardState.translateY,scale:p.boardState.scale},p.config.itemExtent,p.getConfiguration,p.updateBoardState,p.getSelection]),{setDim:l,zoomToCenter:m,zoomToExtent:d}=ze(),[c,_]=f.useState(!1),b=f.useRef({}),C=qn(r);Jn();const h=f.useCallback(()=>{const{itemExtent:p}=s();d(p)},[s,d]);f.useEffect(()=>{!c&&o.left&&(h(),_(!0))},[h,c,o]);const S=({clientX:p,clientY:I,scale:w})=>{m(1-w/500,{x:p,y:I}),clearTimeout(b.current.zoom),b.current.zoom=setTimeout(()=>{a({zooming:!1})},200),a({zooming:!0})},E=({deltaX:p,deltaY:I})=>{l(w=>({...w,translateX:w.translateX+p,translateY:w.translateY+I})),clearTimeout(b.current.pan),b.current.pan=setTimeout(()=>{a({panning:!1})},200),a({panning:!0})},x=p=>{if(["INPUT","TEXTAREA"].includes(p.target.tagName))return;let I=0,w=0,g=1;switch(p.key){case"ArrowLeft":I=-10;break;case"ArrowRight":I=10;break;case"ArrowUp":w=-10;break;case"ArrowDown":w=10;break;case"PageUp":g=1.2;break;case"PageDown":g=.8;break}if(I||w||g!==1){const P=u();if(g===1&&P.length)return;p.shiftKey&&(I*=5,w*=5),(p.ctrlKey||p.altKey||p.metaKey)&&(I/=5,w/=5),l(M=>({...M,translateY:M.translateY+w,translateX:M.translateX+I})),m(g),p.preventDefault()}p.key===" "&&!p.repeat&&C().hover&&m(3,C())},v=p=>{["INPUT","TEXTAREA"].includes(p.target.tagName)||p.key===" "&&C().hover&&m(1/3,C())};return le(document,"keydown",x),le(document,"keyup",v),k(Ye,{onPan:E,onZoom:S,mainAction:t?"pan":"drag",children:k("div",{style:{display:"inline-block",transformOrigin:"top left",transform:`translate(${n.translateX}px, ${n.translateY}px) scale(${n.scale})`},className:`board-pane${n.scale<.5?" board-pane__far":""}`,ref:r,children:e})})},Qn=q({position:"absolute",top:0,left:0,zIndex:210,backgroundColor:"hsla(0, 40%, 50%, 0%)",border:"2px dashed hsl(20, 55%, 40%)",pointerEvents:"none"}),eo=()=>{const[e,t,r,n,o,{translateX:s,translateY:a,scale:u}]=Q(c=>[c.selection,c.getSelection,c.selectionBox,c.setSelectionBox,c.getConfiguration,{translateX:c.boardState.translateX,translateY:c.boardState.translateY,scale:c.boardState.scale}]),[l]=ie(c=>[c.items]),m=f.useCallback(()=>{const c=t(),{boardWrapperRect:_,boardWrapper:b}=o();if(c.length===0){n(null);return}const C=Ct(c,b);if(!C){n(null);return}const{left:h,top:S,width:E,height:x}=C,v={left:h-_.left,top:S-_.top,height:x,width:E};n(v)},[o,t,n]),d=tt(m,[m],300);return f.useEffect(()=>{m(),d()},[e,l,s,a,u,m,d]),!r||e.length<2?null:k("div",{style:{transform:`translate(${r.left}px, ${r.top}px)`,height:`${r.height}px`,width:`${r.width}px`},className:`selection ${Qn}`})},to=()=>{const[e]=Q(t=>[t.boardState.movingItems]);return e?null:k(eo,{})},ro=typeof window<"u"&&typeof navigator<"u"&&typeof document<"u";let Ne;function no(){if(!ro)return;if(Ne)return Ne;const e=new Map,t=new ResizeObserver(r=>{r.forEach(n=>{var o;return(o=e.get(n.target))==null?void 0:o.forEach(s=>setTimeout(()=>s(n),0))})});return Ne={observer:t,subscribe:(r,n)=>{let o=e.get(r);o||(o=new Set,e.set(r,o),t.observe(r)),o.add(n)},unsubscribe:(r,n)=>{const o=e.get(r);o&&(o.delete(n),o.size||(e.delete(r),t.unobserve(r)))}},Ne}function oo(e,t,r=!0){const n=r&&no(),o=et(t),s=e&&"current"in e?e.current:e;f.useEffect(()=>{const a=e&&"current"in e?e.current:e;if(!n||!a)return;let u=!0;const l=(...m)=>{u&&o.current(...m)};return n.subscribe(a,l),()=>{u=!1,n.unsubscribe(a,l)}},[s,n])}function Wt(e,t,r){return Math.min(Math.max(e,r),t)}class so extends Error{constructor(t){super(`Failed to parse color: "${t}"`)}}var Pe=so;function io(e){if(typeof e!="string")throw new Pe(e);if(e.trim().toLowerCase()==="transparent")return[0,0,0,0];let t=e.trim();t=go.test(e)?uo(e):e;const r=lo.exec(t);if(r){const a=Array.from(r).slice(1);return[...a.slice(0,3).map(u=>parseInt(Me(u,2),16)),parseInt(Me(a[3]||"f",2),16)/255]}const n=fo.exec(t);if(n){const a=Array.from(n).slice(1);return[...a.slice(0,3).map(u=>parseInt(u,16)),parseInt(a[3]||"ff",16)/255]}const o=mo.exec(t);if(o){const a=Array.from(o).slice(1);return[...a.slice(0,3).map(u=>parseInt(u,10)),parseFloat(a[3]||"1")]}const s=po.exec(t);if(s){const[a,u,l,m]=Array.from(s).slice(1).map(parseFloat);if(Wt(0,100,u)!==u)throw new Pe(e);if(Wt(0,100,l)!==l)throw new Pe(e);return[...ho(a,u,l),Number.isNaN(m)?1:m]}throw new Pe(e)}function ao(e){let t=5381,r=e.length;for(;r;)t=t*33^e.charCodeAt(--r);return(t>>>0)%2341}const Vt=e=>parseInt(e.replace(/_/g,""),36),co="1q29ehhb 1n09sgk7 1kl1ekf_ _yl4zsno 16z9eiv3 1p29lhp8 _bd9zg04 17u0____ _iw9zhe5 _to73___ _r45e31e _7l6g016 _jh8ouiv _zn3qba8 1jy4zshs 11u87k0u 1ro9yvyo 1aj3xael 1gz9zjz0 _3w8l4xo 1bf1ekf_ _ke3v___ _4rrkb__ 13j776yz _646mbhl _nrjr4__ _le6mbhl 1n37ehkb _m75f91n _qj3bzfz 1939yygw 11i5z6x8 _1k5f8xs 1509441m 15t5lwgf _ae2th1n _tg1ugcv 1lp1ugcv 16e14up_ _h55rw7n _ny9yavn _7a11xb_ 1ih442g9 _pv442g9 1mv16xof 14e6y7tu 1oo9zkds 17d1cisi _4v9y70f _y98m8kc 1019pq0v 12o9zda8 _348j4f4 1et50i2o _8epa8__ _ts6senj 1o350i2o 1mi9eiuo 1259yrp0 1ln80gnw _632xcoy 1cn9zldc _f29edu4 1n490c8q _9f9ziet 1b94vk74 _m49zkct 1kz6s73a 1eu9dtog _q58s1rz 1dy9sjiq __u89jo3 _aj5nkwg _ld89jo3 13h9z6wx _qa9z2ii _l119xgq _bs5arju 1hj4nwk9 1qt4nwk9 1ge6wau6 14j9zlcw 11p1edc_ _ms1zcxe _439shk6 _jt9y70f _754zsow 1la40eju _oq5p___ _x279qkz 1fa5r3rv _yd2d9ip _424tcku _8y1di2_ _zi2uabw _yy7rn9h 12yz980_ __39ljp6 1b59zg0x _n39zfzp 1fy9zest _b33k___ _hp9wq92 1il50hz4 _io472ub _lj9z3eo 19z9ykg0 _8t8iu3a 12b9bl4a 1ak5yw0o _896v4ku _tb8k8lv _s59zi6t _c09ze0p 1lg80oqn 1id9z8wb _238nba5 1kq6wgdi _154zssg _tn3zk49 _da9y6tc 1sg7cv4f _r12jvtt 1gq5fmkz 1cs9rvci _lp9jn1c _xw1tdnb 13f9zje6 16f6973h _vo7ir40 _bt5arjf _rc45e4t _hr4e100 10v4e100 _hc9zke2 _w91egv_ _sj2r1kk 13c87yx8 _vqpds__ _ni8ggk8 _tj9yqfb 1ia2j4r4 _7x9b10u 1fc9ld4j 1eq9zldr _5j9lhpx _ez9zl6o _md61fzm".split(" ").reduce((e,t)=>{const r=Vt(t.substring(0,3)),n=Vt(t.substring(3)).toString(16);let o="";for(let s=0;s<6-n.length;s++)o+="0";return e[r]=`${o}${n}`,e},{});function uo(e){const t=e.toLowerCase().trim(),r=co[ao(t)];if(!r)throw new Pe(e);return`#${r}`}const Me=(e,t)=>Array.from(Array(t)).map(()=>e).join(""),lo=new RegExp(`^#${Me("([a-f0-9])",3)}([a-f0-9])?$`,"i"),fo=new RegExp(`^#${Me("([a-f0-9]{2})",3)}([a-f0-9]{2})?$`,"i"),mo=new RegExp(`^rgba?\\(\\s*(\\d+)\\s*${Me(",\\s*(\\d+)\\s*",2)}(?:,\\s*([\\d.]+))?\\s*\\)$`,"i"),po=/^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i,go=/^[a-z]+$/i,Ft=e=>Math.round(e*255),ho=(e,t,r)=>{let n=r/100;if(t===0)return[n,n,n].map(Ft);const o=(e%360+360)%360/60,s=(1-Math.abs(2*n-1))*(t/100),a=s*(1-Math.abs(o%2-1));let u=0,l=0,m=0;o>=0&&o<1?(u=s,l=a):o>=1&&o<2?(u=a,l=s):o>=2&&o<3?(l=s,m=a):o>=3&&o<4?(l=a,m=s):o>=4&&o<5?(u=a,m=s):o>=5&&o<6&&(u=s,m=a);const d=n-s/2,c=u+d,_=l+d,b=m+d;return[c,_,b].map(Ft)};function vo(e){if(e==="transparent")return 0;function t(s){const a=s/255;return a<=.03928?a/12.92:Math.pow((a+.055)/1.055,2.4)}const[r,n,o]=io(e);return .2126*t(r)+.7152*t(n)+.0722*t(o)}function yo(e){return vo(e)>.179}const So=q({display:"flex",flexDirection:"row",alignItems:"center",zIndex:210,pointerEvents:"none"}),bo=q({fontWeight:"bold",padding:"0 0.5em",borderRadius:"2px",maxWidth:"5em",overflow:"hidden",textOverflow:"ellipsis",marginLeft:"-0.5em",marginTop:"1.7em",whitespace:"nowrap",pointerEvents:"none"}),_o=({color:e="#666",size:t=40,text:r})=>{const n=yo(e)?"#222":"#EEE";return ce("div",{className:So,children:[ce("svg",{version:"1.1",xmlns:"http://www.w3.org/2000/svg",viewBox:"1064.7701 445.5539 419.8101 717.0565",width:t,height:t,children:[k("path",{d:"m 1197.1015,869.718 -62.2719,-154.49286 133.3276,-9.05842 -257.6915,-253.12748 1.2392,356.98609 88.2465,-79.47087 61.702,152.78366 z",style:{fill:n}}),k("path",{d:"m 1193.0939,861.12419 -62.2719,-154.49286 133.3276,-9.05842 -257.6915,-253.12748 1.2392,356.98609 88.2465,-79.47087 61.702,152.78366 z",style:{fill:"white",stroke:"#111",strokeWidth:20}})]}),k("div",{style:{color:n,backgroundColor:e},className:bo,children:r})]})},Eo=f.memo(_o),wo=q({top:0,left:0,zIndex:210,position:"fixed",pointerEvents:"none"}),Co=({pos:e,...t})=>k("div",{className:wo,style:{transform:`translate(${e.x-5}px, ${e.y-3}px)`},children:k(Eo,{...t})}),xo=()=>{const[e,t,r,n]=he(s=>[s.getUser(),s.getLocalUsers(),s.cursors,s.users]),o=t.reduce((s,a)=>(a.id!==e.id&&r[a.id]&&(s[a.id]=r[a.id]),s),{});return k(pt,{children:Object.entries(o).map(([s,a])=>k(Co,{pos:a,text:n[s].name,color:n[s].color},s))})},Io=({children:e})=>{const t=he(l=>l.getUser()),[r,n]=he(l=>[l.moveCursor,l.removeCursor]),[o,s]=Q(l=>[l.getConfiguration,l.getBoardState]);return ce("div",{onPointerMove:({clientX:l,clientY:m})=>{const{scale:d,translateX:c,translateY:_}=s(),{boardWrapperRect:{left:b,top:C}}=o(),h={x:(l-b-c)/d,y:(m-C-_)/d};r(t.id,h)},onPointerLeave:()=>{n(t.id)},children:[e,k(xo,{})]})},Oo=({children:e})=>e,To={overflow:"hidden",position:"absolute",inset:0},ko=({moveFirst:e=!0,style:t,wrapperStyle:r,itemTemplates:n={},boardSize:o=kt,children:s,showResizeHandle:a=!1,Wrapper:u=Oo})=>{const l=f.useRef(null),[m,d]=Q(C=>[C.config.uid,C.updateConfiguration]),{updateItemExtent:c}=ze(),_={userSelect:"none",width:`${o}px`,height:`${o}px`,backgroundColor:"#333",...t};f.useEffect(()=>{const C=h=>{Oe(h.target,"board")&&h.preventDefault()};return document.body.addEventListener("wheel",C,{passive:!1}),()=>{document.body.removeEventListener("wheel",C)}},[]),f.useEffect(()=>{d({boardWrapper:l.current})},[d]),f.useEffect(()=>{m||d({uid:ge()})},[m,d]),f.useEffect(()=>{d({itemTemplates:n,boardSize:o,showResizeHandle:a})},[n,o,a,d]),f.useEffect(()=>{d({boardWrapperRect:l.current.getBoundingClientRect()}),c(),setTimeout(c,2e3)},[d,c]),oo(l,()=>{l.current&&d({boardWrapperRect:l.current.getBoundingClientRect()})});const b=q({...To,...r});return ce("div",{ref:l,id:m,className:`sync-board ${b}`,children:[k(Zn,{moveFirst:e,children:k(Kn,{moveFirst:e,children:k(Hn,{moveFirst:e,children:k(Io,{children:k(u,{children:ce("div",{onContextMenu:C=>{C.preventDefault()},style:_,className:"board",children:[k(Yn,{}),s]})})})})})}),k(to,{})]})};yn(f.createElement),X.Board=ko,X.BoardWrapper=on,X.RoomWrapper=sn,X.useAvailableActions=Wr,X.useBoardConfig=Gr,X.useBoardPosition=ze,X.useBoardState=Jr,X.useDebouncedItems=Rr,X.useItemActions=Be,X.useItemInteraction=Rt,X.useItems=jr,X.useMessage=nn,X.useSelectedItems=zr,X.useSelectionBox=Vr,X.useSessionInfo=Zr,X.useUsers=qr,X.useWire=Ie,Object.defineProperty(X,Symbol.toStringTag,{value:"Module"})});
+`,Pn=({onReload:e})=>ce("div",{className:`syncboard-error-item ${q({width:"100px",display:"flex",flexDirection:"column",justifyContent:"center",textAlign:"center",color:"red"})}`,children:["Sorry, this item seems broken.",k("button",{onClick:e,children:"Reload it"})]});class Mn extends f.Component{constructor(t){super(t),this.state={hasError:!1,itemId:t.itemId},this.onReload=this.onReload.bind(this)}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(t){console.error(`Error for item ${this.state.itemId}`,t,this.props.state)}onReload(){this.setState({hasError:!1})}render(){const{ErrorComponent:t}=this.props;return this.state.hasError?k(t,{onReload:this.onReload}):this.props.children}}const jn=e=>{e.target.className=""},Rn=({width:e,height:t,actualWidth:r,actualHeight:n,prevState:o,keepRatio:s})=>{let{width:a,height:u}=o;if([a,u]=[parseFloat(a),parseFloat(u)],(!a||Number.isNaN(Number(a)))&&(a=r),(!u||Number.isNaN(Number(u)))&&(u=n),s){const l=a/u;return{...o,width:(a+e).toFixed(1),height:(u+t/l).toFixed(1)}}return{...o,width:(a+e).toFixed(1),height:(u+t).toFixed(1)}},Dn={w:!0,h:!0,b:!0},$n=({setState:e,state:{type:t,rotation:r=0,id:n,locked:o,extraClasses:s,...a}={},animate:u="hvr-pop",isSelected:l,itemMap:m,showResizeHandle:d=!0})=>{var w;const c=f.useRef(null),{component:_=()=>null,resizeDirections:b=Dn,resize:C=Rn}=m[t],h=f.useCallback(g=>e(n,g),[e,n]);f.useEffect(()=>{c.current.className=u},[u]);const S=["item",n,bn];o&&S.push("locked"),l&&(S.push("selected"),S.push(_n));const E=S.join(" "),x=({width:g=0,height:P=0,keepRatio:M})=>{h(j=>{const{offsetWidth:$,offsetHeight:Y}=c.current;return C({prevState:j,width:g,height:P,actualHeight:Y,actualWidth:$,keepRatio:M})})},v=({width:g})=>{x({width:g})},p=({height:g})=>{x({height:g})},I=({width:g})=>{x({height:g,width:g,keepRatio:!0})};return k("div",{style:{transform:`rotate(${r}deg`},"data-id":n,className:E,children:ce("div",{style:{display:"flex"},ref:c,onAnimationEnd:jn,onKeyDown:g=>g.stopPropagation(),onKeyUp:g=>g.stopPropagation(),children:[k(Mn,{itemId:n,state:a,ErrorComponent:((w=m==null?void 0:m.error)==null?void 0:w.component)||Pn,children:k(_,{...a,id:n,setState:h})}),k("div",{className:`corner ${ke} ${En}`}),k("div",{className:`corner ${ke} ${wn}`}),k("div",{className:`corner ${ke} ${xn}`}),k("div",{className:`corner ${ke} ${Cn}`}),k("div",{className:`center ${ke} ${In}`}),d&&ce(pt,{children:[b.b&&k(ot,{className:`${st} ${kn}`,onResize:I}),b.h&&k(ot,{className:`${st} ${Tn}`,onResize:p}),b.w&&k(ot,{className:`${st} ${On}`,onResize:v})]})]})})},An=f.memo($n,({state:e,setState:t,isSelected:r,showResizeHandle:n},{state:o,setState:s,isSelected:a,showResizeHandle:u})=>r===a&&n===u&&t===s&&Sn(e,o)),Ln=e=>e,zn=({state:e={},getCurrentUser:t,className:r,...n})=>{if(!n.itemMap[e.type])return null;const{stateHook:o=Ln}=n.itemMap[e.type],{x:s=0,y:a=0,layer:u=0,moving:l,...m}=o(e,{getCurrentUser:t}),d=(u+4)*10+100+(l?5:0);return k("div",{className:r,style:{transform:`translate(${s}px, ${a}px)`,zIndex:d},children:k(An,{...n,showResizeHandle:n.isSelected&&n.showResizeHandle,state:m})})},Bn=f.memo(zn),Yn=()=>{const{updateItem:e}=Be(),[t,r]=ie(m=>[m.itemIds,m.items]),[n,o,s,a]=Q(m=>[m.config.boardSize,m.config.showResizeHandle,m.config.itemTemplates,m.selection]),[u]=he(m=>[m.getUser]),l=q({position:"absolute",top:`${n/2}px`,left:`${n/2}px`,display:"inline-block"});return t.map(m=>k(Bn,{state:r[m],setState:e,isSelected:a.includes(m),itemMap:s,boardSize:n,getCurrentUser:u,showResizeHandle:o,className:l},m))};function Nn(e=!1){const t=f.useRef(e),r=f.useCallback(()=>t.current,[]);return f.useEffect(()=>(t.current=!0,()=>{t.current=!1}),[]),r}function Un(e,...t){e&&e.addEventListener&&e.addEventListener(...t)}function Xn(e,...t){e&&e.removeEventListener&&e.removeEventListener(...t)}const Wn=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);function le(e,...t){const r=Nn(),n=et(t[1]),o=f.useMemo(()=>function(...s){r()&&(typeof n.current=="function"?n.current.apply(this,s):typeof n.current.handleEvent=="function"&&n.current.handleEvent.apply(this,s))},[]);f.useEffect(()=>{const s=e&&Wn(e,"current")?e.current:e;if(!s)return;const a=t.slice(2);return Un(s,t[0],o,...a),()=>Xn(s,t[0],o,...a)},[e,t[0]])}const Vn=q({zIndex:210,position:"absolute",backgroundColor:"hsla(0, 40%, 50%, 10%)",border:"2px solid hsl(0, 55%, 40%)"}),Fn=(e,t,r=!1)=>{const n=t.getElementsByClassName("selector");if(!n.length)return[];const o=n[0];return Array.from(t.getElementsByClassName("item")).filter(s=>{const a=Te(s),u=e[a];return!u||!r&&u.locked?!1:Cr(s,o)}).map(s=>Te(s))},Kn=({children:e,moveFirst:t})=>{const[r,n,o,s,a,u,l]=Q(g=>[g.getSelection,g.clear,g.setSelection,g.select,g.getConfiguration,g.getBoardState,g.updateBoardState]),{findElementUnderPointer:m}=Be(),[d]=ie(g=>[g.getItems]),[c,_]=f.useState({}),[,b]=f.useTransition(),[C,h]=f.useState(!1),S=f.useRef(null),E=f.useRef({moving:!1});return le(document,"keydown",g=>{g.key==="l"&&h(!0)}),le(document,"keyup",g=>{g.key==="l"&&h(!1)}),f.useEffect(()=>(n(),()=>{n()}),[n]),f.useEffect(()=>{if(E.current.moving){const g=d(),{boardWrapper:P}=a(),M=Fn(g,P,C);b(()=>{o(M)})}},[a,d,c,o,C]),k(Ye,{onDragStart:async g=>{await m(g)||(E.current.moving=!0,b(()=>{l({selecting:!0})}),S.current.style.cursor="crosshair")},onDrag:({distanceY:g,distanceX:P,startX:M,startY:j})=>{if(E.current.moving){const{top:$,left:Y}=S.current.getBoundingClientRect(),{scale:N}=u(),H=(M-Y)/N,T=(j-$)/N,D=P/N,A=g/N;D>0?(E.current.left=H,E.current.width=D):(E.current.left=H+D,E.current.width=-D),A>0?(E.current.top=T,E.current.height=A):(E.current.top=T+A,E.current.height=-A),_({...E.current,moving:!0})}},onDragEnd:()=>{E.current.moving&&(b(()=>{l({selecting:!1})}),E.current.moving=!1,_({moving:!1}),S.current.style.cursor="auto")},onTap:g=>{const{target:P,ctrlKey:M,metaKey:j}=g,$=m(g);if(!$&&Oe(P,"board"))n();else{const Y=Te($);if(!Y){n();return}const N=r();$&&!N.includes(Y)&&(M||j?s([Y]):o([Y]))}},onLongTap:({target:g})=>{const P=Oe(g,"item");if(P){const M=Te(P);o([M])}},mainAction:t?"pan":"drag",children:ce("div",{ref:S,children:[c.moving&&k("div",{style:{transform:`translate(${c.left}px, ${c.top}px)`,height:`${c.height}px`,width:`${c.width}px`},className:`selector ${Vn}`}),e]})})},Hn=({children:e})=>{const{moveItems:t,placeItems:r,findElementUnderPointer:n}=Be(),[o,s,a,u,l]=Q(S=>[S.select,S.setSelection,S.getSelection,S.getBoardState,S.updateBoardState]),[m]=ie(S=>[S.getBoardConfig]),d=f.useRef({}),c=f.useRef({items:[]}),_=S=>{const{ctrlKey:E,metaKey:x,event:v}=S,p=n(S);if(p){v.stopPropagation();const I=a();c.current.items=I;const w=Te(p);I.includes(w)||(E||x?(c.current.items=[...I,w],o([w])):(c.current.items=[w],s([w]))),Object.assign(d.current,{moving:!0,remainX:0,remainY:0})}},b=({deltaX:S,deltaY:E,event:x})=>{if(d.current.moving){x.stopPropagation();const{scale:v,movingItems:p}=u(),I=d.current.remainX+S/v,w=d.current.remainY+E/v;t(c.current.items,{x:I,y:w},!0),p||l({movingItems:!0})}},C=()=>{if(d.current.moving){const{gridSize:S=1}=m(),E=S||1;d.current={moving:!1},r(c.current.items,{type:"grid",size:E}),l({movingItems:!1})}};return le(document,"keydown",S=>{if(["INPUT","TEXTAREA"].includes(S.target.tagName))return;const E=a();if(E.length){const{gridSize:x=1}=m();let v=0,p=0;switch(S.key){case"ArrowLeft":v=-10;break;case"ArrowRight":v=10;break;case"ArrowUp":p=-10;break;case"ArrowDown":p=10;break}(v||p)&&(S.shiftKey&&(v*=5,p*=5),(S.ctrlKey||S.altKey||S.metaKey)&&(v/=10,p/=10),t(E,{x:v,y:p},!0),r(E,{type:"grid",size:x||1}),S.preventDefault())}}),k(Ye,{onDragStart:_,onDrag:b,onDragEnd:C,children:e})},qn=e=>{const t=f.useRef({hover:!1,x:0,y:0});return le(e.current,"mousemove",n=>{const{clientX:o,clientY:s}=n;t.current.x=o,t.current.y=s}),le(e.current,"mouseenter",()=>{t.current.hover=!0}),le(e.current,"mouseleave",()=>{t.current.hover=!1}),f.useCallback(()=>t.current,[])},Gn=[...Array(5).keys()].map(e=>`Digit${e+1}`),Jn=()=>{const[e,t]=f.useState({}),[r,n]=Q(o=>[o.getBoardState,o.updateBoardState]);return le(document,"keydown",o=>{if(!["INPUT","TEXTAREA"].includes(o.target.tagName)&&Gn.includes(o.code)){const s=o.code,{translateX:a,translateY:u,scale:l}=r();o.altKey||o.metaKey||o.ctrlKey||o.shiftKey?t(m=>({...m,[s]:{translateX:a,translateY:u,scale:l}})):e[s]&&n(e[s]),o.preventDefault()}}),null},Zn=({children:e,moveFirst:t=!1})=>{const r=f.useRef(null),[n,o,s,a,u]=Q(p=>[{translateX:p.boardState.translateX,translateY:p.boardState.translateY,scale:p.boardState.scale},p.config.itemExtent,p.getConfiguration,p.updateBoardState,p.getSelection]),{setDim:l,zoomToCenter:m,zoomToExtent:d}=ze(),[c,_]=f.useState(!1),b=f.useRef({}),C=qn(r);Jn();const h=f.useCallback(()=>{const{itemExtent:p}=s();d(p)},[s,d]);f.useEffect(()=>{!c&&o.left&&(h(),_(!0))},[h,c,o]);const S=({clientX:p,clientY:I,scale:w})=>{m(1-w/500,{x:p,y:I}),clearTimeout(b.current.zoom),b.current.zoom=setTimeout(()=>{a({zooming:!1})},200),a({zooming:!0})},E=({deltaX:p,deltaY:I})=>{l(w=>({...w,translateX:w.translateX+p,translateY:w.translateY+I})),clearTimeout(b.current.pan),b.current.pan=setTimeout(()=>{a({panning:!1})},200),a({panning:!0})},x=p=>{if(["INPUT","TEXTAREA"].includes(p.target.tagName))return;let I=0,w=0,g=1;switch(p.key){case"ArrowLeft":I=-10;break;case"ArrowRight":I=10;break;case"ArrowUp":w=-10;break;case"ArrowDown":w=10;break;case"PageUp":g=1.2;break;case"PageDown":g=.8;break}if(I||w||g!==1){const P=u();if(g===1&&P.length)return;p.shiftKey&&(I*=5,w*=5),(p.ctrlKey||p.altKey||p.metaKey)&&(I/=5,w/=5),l(M=>({...M,translateY:M.translateY+w,translateX:M.translateX+I})),m(g),p.preventDefault()}p.key===" "&&!p.repeat&&C().hover&&m(3,C())},v=p=>{["INPUT","TEXTAREA"].includes(p.target.tagName)||p.key===" "&&C().hover&&m(1/3,C())};return le(document,"keydown",x),le(document,"keyup",v),k(Ye,{onPan:E,onZoom:S,mainAction:t?"pan":"drag",children:k("div",{style:{display:"inline-block",transformOrigin:"top left",transform:`translate(${n.translateX}px, ${n.translateY}px) scale(${n.scale})`},className:`board-pane${n.scale<.5?" board-pane__far":""}`,ref:r,children:e})})},Qn=q({position:"absolute",top:0,left:0,zIndex:210,backgroundColor:"hsla(0, 40%, 50%, 0%)",border:"2px dashed hsl(20, 55%, 40%)",pointerEvents:"none"}),eo=()=>{const[e,t,r,n,o,{translateX:s,translateY:a,scale:u}]=Q(c=>[c.selection,c.getSelection,c.selectionBox,c.setSelectionBox,c.getConfiguration,{translateX:c.boardState.translateX,translateY:c.boardState.translateY,scale:c.boardState.scale}]),[l]=ie(c=>[c.items]),m=f.useCallback(()=>{const c=t(),{boardWrapperRect:_,boardWrapper:b}=o();if(c.length===0){n(null);return}const C=Ct(c,b);if(!C){n(null);return}const{left:h,top:S,width:E,height:x}=C,v={left:h-_.left,top:S-_.top,height:x,width:E};n(v)},[o,t,n]),d=tt(m,[m],300);return f.useEffect(()=>{m(),d()},[e,l,s,a,u,m,d]),!r||e.length<2?null:k("div",{style:{transform:`translate(${r.left}px, ${r.top}px)`,height:`${r.height}px`,width:`${r.width}px`},className:`selection ${Qn}`})},to=()=>{const[e]=Q(t=>[t.boardState.movingItems]);return e?null:k(eo,{})},ro=typeof window<"u"&&typeof navigator<"u"&&typeof document<"u";let Ne;function no(){if(!ro)return;if(Ne)return Ne;const e=new Map,t=new ResizeObserver(r=>{r.forEach(n=>{var o;return(o=e.get(n.target))==null?void 0:o.forEach(s=>setTimeout(()=>s(n),0))})});return Ne={observer:t,subscribe:(r,n)=>{let o=e.get(r);o||(o=new Set,e.set(r,o),t.observe(r)),o.add(n)},unsubscribe:(r,n)=>{const o=e.get(r);o&&(o.delete(n),o.size||(e.delete(r),t.unobserve(r)))}},Ne}function oo(e,t,r=!0){const n=r&&no(),o=et(t),s=e&&"current"in e?e.current:e;f.useEffect(()=>{const a=e&&"current"in e?e.current:e;if(!n||!a)return;let u=!0;const l=(...m)=>{u&&o.current(...m)};return n.subscribe(a,l),()=>{u=!1,n.unsubscribe(a,l)}},[s,n])}function Wt(e,t,r){return Math.min(Math.max(e,r),t)}class so extends Error{constructor(t){super(`Failed to parse color: "${t}"`)}}var Pe=so;function io(e){if(typeof e!="string")throw new Pe(e);if(e.trim().toLowerCase()==="transparent")return[0,0,0,0];let t=e.trim();t=go.test(e)?uo(e):e;const r=lo.exec(t);if(r){const a=Array.from(r).slice(1);return[...a.slice(0,3).map(u=>parseInt(Me(u,2),16)),parseInt(Me(a[3]||"f",2),16)/255]}const n=fo.exec(t);if(n){const a=Array.from(n).slice(1);return[...a.slice(0,3).map(u=>parseInt(u,16)),parseInt(a[3]||"ff",16)/255]}const o=mo.exec(t);if(o){const a=Array.from(o).slice(1);return[...a.slice(0,3).map(u=>parseInt(u,10)),parseFloat(a[3]||"1")]}const s=po.exec(t);if(s){const[a,u,l,m]=Array.from(s).slice(1).map(parseFloat);if(Wt(0,100,u)!==u)throw new Pe(e);if(Wt(0,100,l)!==l)throw new Pe(e);return[...ho(a,u,l),Number.isNaN(m)?1:m]}throw new Pe(e)}function ao(e){let t=5381,r=e.length;for(;r;)t=t*33^e.charCodeAt(--r);return(t>>>0)%2341}const Vt=e=>parseInt(e.replace(/_/g,""),36),co="1q29ehhb 1n09sgk7 1kl1ekf_ _yl4zsno 16z9eiv3 1p29lhp8 _bd9zg04 17u0____ _iw9zhe5 _to73___ _r45e31e _7l6g016 _jh8ouiv _zn3qba8 1jy4zshs 11u87k0u 1ro9yvyo 1aj3xael 1gz9zjz0 _3w8l4xo 1bf1ekf_ _ke3v___ _4rrkb__ 13j776yz _646mbhl _nrjr4__ _le6mbhl 1n37ehkb _m75f91n _qj3bzfz 1939yygw 11i5z6x8 _1k5f8xs 1509441m 15t5lwgf _ae2th1n _tg1ugcv 1lp1ugcv 16e14up_ _h55rw7n _ny9yavn _7a11xb_ 1ih442g9 _pv442g9 1mv16xof 14e6y7tu 1oo9zkds 17d1cisi _4v9y70f _y98m8kc 1019pq0v 12o9zda8 _348j4f4 1et50i2o _8epa8__ _ts6senj 1o350i2o 1mi9eiuo 1259yrp0 1ln80gnw _632xcoy 1cn9zldc _f29edu4 1n490c8q _9f9ziet 1b94vk74 _m49zkct 1kz6s73a 1eu9dtog _q58s1rz 1dy9sjiq __u89jo3 _aj5nkwg _ld89jo3 13h9z6wx _qa9z2ii _l119xgq _bs5arju 1hj4nwk9 1qt4nwk9 1ge6wau6 14j9zlcw 11p1edc_ _ms1zcxe _439shk6 _jt9y70f _754zsow 1la40eju _oq5p___ _x279qkz 1fa5r3rv _yd2d9ip _424tcku _8y1di2_ _zi2uabw _yy7rn9h 12yz980_ __39ljp6 1b59zg0x _n39zfzp 1fy9zest _b33k___ _hp9wq92 1il50hz4 _io472ub _lj9z3eo 19z9ykg0 _8t8iu3a 12b9bl4a 1ak5yw0o _896v4ku _tb8k8lv _s59zi6t _c09ze0p 1lg80oqn 1id9z8wb _238nba5 1kq6wgdi _154zssg _tn3zk49 _da9y6tc 1sg7cv4f _r12jvtt 1gq5fmkz 1cs9rvci _lp9jn1c _xw1tdnb 13f9zje6 16f6973h _vo7ir40 _bt5arjf _rc45e4t _hr4e100 10v4e100 _hc9zke2 _w91egv_ _sj2r1kk 13c87yx8 _vqpds__ _ni8ggk8 _tj9yqfb 1ia2j4r4 _7x9b10u 1fc9ld4j 1eq9zldr _5j9lhpx _ez9zl6o _md61fzm".split(" ").reduce((e,t)=>{const r=Vt(t.substring(0,3)),n=Vt(t.substring(3)).toString(16);let o="";for(let s=0;s<6-n.length;s++)o+="0";return e[r]=`${o}${n}`,e},{});function uo(e){const t=e.toLowerCase().trim(),r=co[ao(t)];if(!r)throw new Pe(e);return`#${r}`}const Me=(e,t)=>Array.from(Array(t)).map(()=>e).join(""),lo=new RegExp(`^#${Me("([a-f0-9])",3)}([a-f0-9])?$`,"i"),fo=new RegExp(`^#${Me("([a-f0-9]{2})",3)}([a-f0-9]{2})?$`,"i"),mo=new RegExp(`^rgba?\\(\\s*(\\d+)\\s*${Me(",\\s*(\\d+)\\s*",2)}(?:,\\s*([\\d.]+))?\\s*\\)$`,"i"),po=/^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i,go=/^[a-z]+$/i,Ft=e=>Math.round(e*255),ho=(e,t,r)=>{let n=r/100;if(t===0)return[n,n,n].map(Ft);const o=(e%360+360)%360/60,s=(1-Math.abs(2*n-1))*(t/100),a=s*(1-Math.abs(o%2-1));let u=0,l=0,m=0;o>=0&&o<1?(u=s,l=a):o>=1&&o<2?(u=a,l=s):o>=2&&o<3?(l=s,m=a):o>=3&&o<4?(l=a,m=s):o>=4&&o<5?(u=a,m=s):o>=5&&o<6&&(u=s,m=a);const d=n-s/2,c=u+d,_=l+d,b=m+d;return[c,_,b].map(Ft)};function vo(e){if(e==="transparent")return 0;function t(s){const a=s/255;return a<=.03928?a/12.92:Math.pow((a+.055)/1.055,2.4)}const[r,n,o]=io(e);return .2126*t(r)+.7152*t(n)+.0722*t(o)}function yo(e){return vo(e)>.179}const So=q({display:"flex",flexDirection:"row",alignItems:"center",zIndex:210,pointerEvents:"none"}),bo=q({fontWeight:"bold",padding:"0 0.5em",borderRadius:"2px",maxWidth:"5em",overflow:"hidden",textOverflow:"ellipsis",marginLeft:"-0.5em",marginTop:"1.7em",whitespace:"nowrap",pointerEvents:"none"}),_o=({color:e="#666",size:t=40,text:r})=>{const n=yo(e)?"#222":"#EEE";return ce("div",{className:So,children:[ce("svg",{version:"1.1",xmlns:"http://www.w3.org/2000/svg",viewBox:"1064.7701 445.5539 419.8101 717.0565",width:t,height:t,children:[k("path",{d:"m 1197.1015,869.718 -62.2719,-154.49286 133.3276,-9.05842 -257.6915,-253.12748 1.2392,356.98609 88.2465,-79.47087 61.702,152.78366 z",style:{fill:n}}),k("path",{d:"m 1193.0939,861.12419 -62.2719,-154.49286 133.3276,-9.05842 -257.6915,-253.12748 1.2392,356.98609 88.2465,-79.47087 61.702,152.78366 z",style:{fill:"white",stroke:"#111",strokeWidth:20}})]}),k("div",{style:{color:n,backgroundColor:e},className:bo,children:r})]})},Eo=f.memo(_o),wo=q({top:0,left:0,zIndex:210,position:"fixed",pointerEvents:"none"}),Co=({pos:e,...t})=>k("div",{className:wo,style:{transform:`translate(${e.x-5}px, ${e.y-3}px)`},children:k(Eo,{...t})}),xo=()=>{const[e,t,r,n]=he(s=>[s.getUser(),s.getLocalUsers(),s.cursors,s.users]),o=t.reduce((s,a)=>(a.id!==e.id&&r[a.id]&&(s[a.id]=r[a.id]),s),{});return k(pt,{children:Object.entries(o).map(([s,a])=>k(Co,{pos:a,text:n[s].name,color:n[s].color},s))})},Io=({children:e})=>{const t=he(l=>l.getUser()),[r,n]=he(l=>[l.moveCursor,l.removeCursor]),[o,s]=Q(l=>[l.getConfiguration,l.getBoardState]);return ce("div",{onPointerMove:({clientX:l,clientY:m})=>{const{scale:d,translateX:c,translateY:_}=s(),{boardWrapperRect:{left:b,top:C}}=o(),h={x:(l-b-c)/d,y:(m-C-_)/d};r(t.id,h)},onPointerLeave:()=>{n(t.id)},children:[e,k(xo,{})]})},Oo=({children:e})=>e,To={overflow:"hidden",position:"absolute",inset:0},ko=({moveFirst:e=!0,style:t,wrapperStyle:r,itemTemplates:n={},boardSize:o=kt,children:s,showResizeHandle:a=!1,Wrapper:u=Oo})=>{const l=f.useRef(null),[m,d]=Q(C=>[C.config.uid,C.updateConfiguration]),{updateItemExtent:c}=ze(),_={userSelect:"none",width:`${o}px`,height:`${o}px`,backgroundColor:"#333",...t};f.useEffect(()=>{const C=h=>{Oe(h.target,"board")&&h.preventDefault()};return document.body.addEventListener("wheel",C,{passive:!1}),()=>{document.body.removeEventListener("wheel",C)}},[]),f.useEffect(()=>{d({boardWrapper:l.current})},[d]),f.useEffect(()=>{m||d({uid:ge()})},[m,d]),f.useEffect(()=>{d({itemTemplates:n,boardSize:o,showResizeHandle:a})},[n,o,a,d]),f.useEffect(()=>{d({boardWrapperRect:l.current.getBoundingClientRect()}),c(),setTimeout(c,2e3)},[d,c]),oo(l,()=>{l.current&&d({boardWrapperRect:l.current.getBoundingClientRect()})});const b=q({...To,...r});return ce("div",{ref:l,id:m,className:`sync-board ${b}`,children:[k(Zn,{moveFirst:e,children:k(Kn,{moveFirst:e,children:k(Hn,{moveFirst:e,children:k(Io,{children:k(u,{children:ce("div",{onContextMenu:C=>{C.preventDefault()},style:_,className:"board",children:[k(Yn,{}),s]})})})})})}),k(to,{})]})};yn(f.createElement),X.Board=ko,X.BoardWrapper=on,X.RoomWrapper=sn,X.useAvailableActions=Wr,X.useBoardConfig=Gr,X.useBoardPosition=ze,X.useBoardState=Jr,X.useDebouncedItems=Rr,X.useItemActions=Be,X.useItemInteraction=Rt,X.useItems=jr,X.useMessage=nn,X.useSelectedItems=zr,X.useSelectionBox=Vr,X.useSessionInfo=Zr,X.useUsers=qr,X.useWire=Ie,Object.defineProperty(X,Symbol.toStringTag,{value:"Module"})});
 //# sourceMappingURL=react-sync-board.umd.cjs.map