var qt=Object.defineProperty,Qt=Object.defineProperties;var Jt=Object.getOwnPropertyDescriptors;var Ce=Object.getOwnPropertySymbols;var Ze=Object.prototype.hasOwnProperty,qe=Object.prototype.propertyIsEnumerable;var Oe=(r,e,t)=>e in r?qt(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,g=(r,e)=>{for(var t in e||(e={}))Ze.call(e,t)&&Oe(r,t,e[t]);if(Ce)for(var t of Ce(e))qe.call(e,t)&&Oe(r,t,e[t]);return r},U=(r,e)=>Qt(r,Jt(e));var O=(r,e)=>{var t={};for(var n in r)Ze.call(r,n)&&e.indexOf(n)<0&&(t[n]=r[n]);if(r!=null&&Ce)for(var n of Ce(r))e.indexOf(n)<0&&qe.call(r,n)&&(t[n]=r[n]);return t};var E=(r,e,t)=>(Oe(r,typeof e!="symbol"?e+"":e,t),t);import*as N from"react";import*as D from"react";import*as z from"react";import*as Ye from"react";import*as Se from"react";var Le=Se.createContext({});function R(){return Se.useContext(Le)}import{Vec as Ve}from"@tldraw/vec";import{useGesture as en}from"@use-gesture/react";import*as V from"react";import{Vec as h}from"@tldraw/vec";var Qe=(o=>(o.TransformSelected="transform_selected",o.TranslateSelected="translate_selected",o.TransformAll="transform_all",o.TranslateAll="translate_all",o))(Qe||{}),we=(o=>(o.Top="top_edge",o.Right="right_edge",o.Bottom="bottom_edge",o.Left="left_edge",o))(we||{}),He=(o=>(o.TopLeft="top_left_corner",o.TopRight="top_right_corner",o.BottomRight="bottom_right_corner",o.BottomLeft="bottom_left_corner",o))(He||{}),Je=(s=>(s.minX="minX",s.midX="midX",s.maxX="maxX",s.minY="minY",s.midY="midY",s.maxY="maxY",s))(Je||{});String.prototype.replaceAll||(String.prototype.replaceAll=function(r,e){return Object.prototype.toString.call(r).toLowerCase()==="[object regexp]"?this.replace(r,e):this.replace(new RegExp(r,"g"),e)});var Ie=Math.PI*2,k=class{static lerp(e,t,n){return n=k.clamp(n,0,1),e*(1-n)+t*n}static lerpColor(e,t,n=.5){function o(l){let c=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(l);return[parseInt(c[1],16),parseInt(c[2],16),parseInt(c[3],16)]}function i(l){return"#"+((1<<24)+(l[0]<<16)+(l[1]<<8)+l[2]).toString(16).slice(1)}let s=o(e)||[0,0,0],a=o(t)||[0,0,0],d=s.slice();for(let l=0;l<3;l++)d[l]=Math.round(d[l]+n*(a[l]-s[l]));return i(d)}static modulate(e,t,n,o=!1){let[i,s]=t,[a,d]=n,l=a+(e-i)/(s-i)*(d-a);return o?a<d?Math.max(Math.min(l,d),a):Math.max(Math.min(l,a),d):l}static clamp(e,t,n){return Math.max(t,typeof n!="undefined"?Math.min(e,n):e)}static deepClone(e){if(e===null)return e;if(Array.isArray(e))return[...e];if(typeof e=="object"){let t=g({},e);return Object.keys(t).forEach(n=>t[n]=typeof e[n]=="object"?k.deepClone(e[n]):e[n]),t}return e}static rng(e=""){let t=0,n=0,o=0,i=0;function s(){let a=t^t<<11;return t=n,n=o,o=i,i^=(i>>>19^a^a>>>8)>>>0,i/4294967296}for(let a=0;a<e.length+64;a++)t^=e.charCodeAt(a)|0,s();return s}static pointsToLineSegments(e,t=!1){let n=[];for(let o=1;o<e.length;o++)n.push([e[o-1],e[o]]);return t&&n.push([e[e.length-1],e[0]]),n}static getRectangleSides(e,t,n=0){let o=[e[0]+t[0]/2,e[1]+t[1]/2],i=h.rotWith(e,o,n),s=h.rotWith(h.add(e,[t[0],0]),o,n),a=h.rotWith(h.add(e,t),o,n),d=h.rotWith(h.add(e,[0,t[1]]),o,n);return[["top",[i,s]],["right",[s,a]],["bottom",[a,d]],["left",[d,i]]]}static circleFromThreePoints(e,t,n){let[o,i]=e,[s,a]=t,[d,l]=n,c=o*(a-l)-i*(s-d)+s*l-d*a,m=(o*o+i*i)*(l-a)+(s*s+a*a)*(i-l)+(d*d+l*l)*(a-i),p=(o*o+i*i)*(s-d)+(s*s+a*a)*(d-o)+(d*d+l*l)*(o-s),u=-m/(2*c),y=-p/(2*c);return[u,y,Math.hypot(u-o,y-i)]}static perimeterOfEllipse(e,t){let n=Math.pow(e-t,2)/Math.pow(e+t,2);return Math.PI*(e+t)*(1+3*n/(10+Math.sqrt(4-3*n)))}static shortAngleDist(e,t){let n=Math.PI*2,o=(t-e)%n;return 2*o%n-o}static longAngleDist(e,t){return Math.PI*2-k.shortAngleDist(e,t)}static lerpAngles(e,t,n){return e+k.shortAngleDist(e,t)*n}static angleDelta(e,t){return k.shortAngleDist(e,t)}static getSweep(e,t,n){return k.angleDelta(h.angle(e,t),h.angle(e,n))}static clampRadians(e){return(Math.PI*2+e)%(Math.PI*2)}static snapAngleToSegments(e,t){let n=Math.PI*2/t;return Math.floor((k.clampRadians(e)+n/2)/n)*n}static isAngleBetween(e,t,n){if(n===e||n===t)return!0;let o=(t-e+Ie)%Ie,i=(n-e+Ie)%Ie;return o<=Math.PI!=i>o}static degreesToRadians(e){return e*Math.PI/180}static radiansToDegrees(e){return e*180/Math.PI}static getArcLength(e,t,n,o){let i=k.getSweep(e,n,o);return t*(2*Math.PI)*(i/(2*Math.PI))}static getSweepFlag(e,t,n){let o=h.angle(e,n);return(h.angle(e,t)-o+3*Math.PI)%(2*Math.PI)-Math.PI>0?0:1}static getLargeArcFlag(e,t,n){let o=h.angle(n,e),s=(h.angle(n,t)-o+3*Math.PI)%(2*Math.PI)-Math.PI;return Math.abs(s)>Math.PI/2?0:1}static getArcDashOffset(e,t,n,o,i){let s=k.getSweepFlag(e,n,o),a=k.getArcLength(e,t,n,o);return-(s<0?a:2*Math.PI*e[2]-a)/2+i}static getEllipseDashOffset(e,t){return-(2*Math.PI*e[2])/2+-t}static pointInCircle(e,t,n){return h.dist(e,t)<=n}static pointInEllipse(e,t,n,o,i=0){i=i||0;let s=Math.cos(i),a=Math.sin(i),d=h.sub(e,t),l=s*d[0]+a*d[1],c=a*d[0]-s*d[1];return l*l/(n*n)+c*c/(o*o)<=1}static pointInRect(e,t){return!(e[0]<t[0]||e[0]>e[0]+t[0]||e[1]<t[1]||e[1]>e[1]+t[1])}static pointInPolygon(e,t){let n=0;return t.forEach((o,i)=>{let s=t[(i+1)%t.length];o[1]<=e[1]?s[1]>e[1]&&h.cross(o,s,e)>0&&(n+=1):s[1]<=e[1]&&h.cross(o,s,e)<0&&(n-=1)}),n!==0}static pointInBounds(e,t){return!(e[0]<t.minX||e[0]>t.maxX||e[1]<t.minY||e[1]>t.maxY)}static pointInPolyline(e,t,n=3){for(let o=1;o<t.length;o++)if(h.distanceToLineSegment(t[o-1],t[o],e)<n)return!0;return!1}static getBoundsSides(e){return this.getRectangleSides([e.minX,e.minY],[e.width,e.height])}static expandBounds(e,t){return{minX:e.minX-t,minY:e.minY-t,maxX:e.maxX+t,maxY:e.maxY+t,width:e.width+t*2,height:e.height+t*2}}static boundsCollide(e,t){return!(e.maxX<t.minX||e.minX>t.maxX||e.maxY<t.minY||e.minY>t.maxY)}static boundsContain(e,t){return e.minX<t.minX&&e.minY<t.minY&&e.maxY>t.maxY&&e.maxX>t.maxX}static boundsContained(e,t){return k.boundsContain(t,e)}static boundsAreEqual(e,t){return!(t.maxX!==e.maxX||t.minX!==e.minX||t.maxY!==e.maxY||t.minY!==e.minY)}static getBoundsFromPoints(e,t=0){let n=1/0,o=1/0,i=-1/0,s=-1/0;if(e.length<2)n=0,o=0,i=1,s=1;else for(let[a,d]of e)n=Math.min(a,n),o=Math.min(d,o),i=Math.max(a,i),s=Math.max(d,s);return t!==0?k.getBoundsFromPoints(e.map(a=>h.rotWith(a,[(n+i)/2,(o+s)/2],t))):{minX:n,minY:o,maxX:i,maxY:s,width:Math.max(1,i-n),height:Math.max(1,s-o)}}static centerBounds(e,t){let n=this.getBoundsCenter(e),o=t[0]-n[0],i=t[1]-n[1];return this.translateBounds(e,[o,i])}static snapBoundsToGrid(e,t){let n=Math.round(e.minX/t)*t,o=Math.round(e.minY/t)*t,i=Math.round(e.maxX/t)*t,s=Math.round(e.maxY/t)*t;return{minX:n,minY:o,maxX:i,maxY:s,width:Math.max(1,i-n),height:Math.max(1,s-o)}}static translateBounds(e,t){return{minX:e.minX+t[0],minY:e.minY+t[1],maxX:e.maxX+t[0],maxY:e.maxY+t[1],width:e.width,height:e.height}}static rotateBounds(e,t,n){let[o,i]=h.rotWith([e.minX,e.minY],t,n),[s,a]=h.rotWith([e.maxX,e.maxY],t,n);return{minX:o,minY:i,maxX:s,maxY:a,width:e.width,height:e.height}}static getRotatedEllipseBounds(e,t,n,o,i=0){let s=Math.cos(i),a=Math.sin(i),d=Math.hypot(n*s,o*a),l=Math.hypot(n*a,o*s);return{minX:e+n-d,minY:t+o-l,maxX:e+n+d,maxY:t+o+l,width:d*2,height:l*2}}static getExpandedBounds(e,t){let n=Math.min(e.minX,t.minX),o=Math.min(e.minY,t.minY),i=Math.max(e.maxX,t.maxX),s=Math.max(e.maxY,t.maxY),a=Math.abs(i-n),d=Math.abs(s-o);return{minX:n,minY:o,maxX:i,maxY:s,width:a,height:d}}static getCommonBounds(e){if(e.length<2)return e[0];let t=e[0];for(let n=1;n<e.length;n++)t=k.getExpandedBounds(t,e[n]);return t}static getRotatedCorners(e,t=0){let n=[e.minX+e.width/2,e.minY+e.height/2];return[[e.minX,e.minY],[e.maxX,e.minY],[e.maxX,e.maxY],[e.minX,e.maxY]].map(o=>h.rotWith(o,n,t))}static getTransformedBoundingBox(e,t,n,o=0,i=!1){let[s,a]=[e.minX,e.minY],[d,l]=[e.maxX,e.maxY],[c,m]=[e.minX,e.minY],[p,u]=[e.maxX,e.maxY];if(t==="center")return{minX:c+n[0],minY:m+n[1],maxX:p+n[0],maxY:u+n[1],width:p-c,height:u-m,scaleX:1,scaleY:1};let[y,T]=h.rot(n,-o);switch(t){case"top_edge":case"top_left_corner":case"top_right_corner":{m+=T;break}case"bottom_edge":case"bottom_left_corner":case"bottom_right_corner":{u+=T;break}}switch(t){case"left_edge":case"top_left_corner":case"bottom_left_corner":{c+=y;break}case"right_edge":case"top_right_corner":case"bottom_right_corner":{p+=y;break}}let v=d-s,x=l-a,f=(p-c)/v,L=(u-m)/x,Y=f<0,X=L<0,S=Math.abs(p-c),b=Math.abs(u-m);if(i){let P=v/x,B=P<S/b,M=S*(L<0?1:-1)*(1/P),I=b*(f<0?1:-1)*P;switch(t){case"top_left_corner":{B?m=u+M:c=p+I;break}case"top_right_corner":{B?m=u+M:p=c-I;break}case"bottom_right_corner":{B?u=m-M:p=c-I;break}case"bottom_left_corner":{B?u=m-M:c=p+I;break}case"bottom_edge":case"top_edge":{let A=(c+p)/2,J=b*P;c=A-J/2,p=A+J/2;break}case"left_edge":case"right_edge":{let A=(m+u)/2,J=S/P;m=A-J/2,u=A+J/2;break}}}if(o%(Math.PI*2)!==0){let P=[0,0],B=h.med([s,a],[d,l]),M=h.med([c,m],[p,u]);switch(t){case"top_left_corner":{P=h.sub(h.rotWith([p,u],M,o),h.rotWith([d,l],B,o));break}case"top_right_corner":{P=h.sub(h.rotWith([c,u],M,o),h.rotWith([s,l],B,o));break}case"bottom_right_corner":{P=h.sub(h.rotWith([c,m],M,o),h.rotWith([s,a],B,o));break}case"bottom_left_corner":{P=h.sub(h.rotWith([p,m],M,o),h.rotWith([d,a],B,o));break}case"top_edge":{P=h.sub(h.rotWith(h.med([c,u],[p,u]),M,o),h.rotWith(h.med([s,l],[d,l]),B,o));break}case"left_edge":{P=h.sub(h.rotWith(h.med([p,m],[p,u]),M,o),h.rotWith(h.med([d,a],[d,l]),B,o));break}case"bottom_edge":{P=h.sub(h.rotWith(h.med([c,m],[p,m]),M,o),h.rotWith(h.med([s,a],[d,a]),B,o));break}case"right_edge":{P=h.sub(h.rotWith(h.med([c,m],[c,u]),M,o),h.rotWith(h.med([s,a],[s,l]),B,o));break}}[c,m]=h.sub([c,m],P),[p,u]=h.sub([p,u],P)}return p<c&&([p,c]=[c,p]),u<m&&([u,m]=[m,u]),{minX:c,minY:m,maxX:p,maxY:u,width:p-c,height:u-m,scaleX:(p-c)/(d-s||1)*(Y?-1:1),scaleY:(u-m)/(l-a||1)*(X?-1:1)}}static getTransformAnchor(e,t,n){let o=e;switch(e){case"top_left_corner":{t&&n?o="bottom_right_corner":t?o="top_right_corner":n?o="bottom_left_corner":o="bottom_right_corner";break}case"top_right_corner":{t&&n?o="bottom_left_corner":t?o="top_left_corner":n?o="bottom_right_corner":o="bottom_left_corner";break}case"bottom_right_corner":{t&&n?o="top_left_corner":t?o="bottom_left_corner":n?o="top_right_corner":o="top_left_corner";break}case"bottom_left_corner":{t&&n?o="top_right_corner":t?o="bottom_right_corner":n?o="top_left_corner":o="top_right_corner";break}}return o}static getRelativeTransformedBoundingBox(e,t,n,o,i){let s=(o?t.maxX-n.maxX:n.minX-t.minX)/t.width,a=(i?t.maxY-n.maxY:n.minY-t.minY)/t.height,d=n.width/t.width,l=n.height/t.height,c=e.minX+e.width*s,m=e.minY+e.height*a,p=e.width*d,u=e.height*l;return{minX:c,minY:m,maxX:c+p,maxY:m+u,width:p,height:u}}static getRotatedSize(e,t){let n=h.div(e,2),o=[[0,0],[e[0],0],e,[0,e[1]]].map(s=>h.rotWith(s,n,t)),i=k.getBoundsFromPoints(o);return[i.width,i.height]}static getBoundsCenter(e){return[e.minX+e.width/2,e.minY+e.height/2]}static getBoundsWithCenter(e){let t=k.getBoundsCenter(e);return U(g({},e),{midX:t[0],midY:t[1]})}static getCommonTopLeft(e){let t=[1/0,1/0];return e.forEach(n=>{t[0]=Math.min(t[0],n[0]),t[1]=Math.min(t[1],n[1])}),t}static getFromCache(e,t,n){let o=e.get(t);if(o===void 0&&(e.set(t,n()),o=e.get(t),o===void 0))throw Error("Cache did not include item!");return o}static uniqueId(e=""){return e?((Number(e)^Math.random()*16)>>Number(e)/4).toString(16):`${1e7}-${1e3}-${4e3}-${8e3}-${1e11}`.replace(/[018]/g,k.uniqueId)}static rotateArray(e,t){return e.map((n,o)=>e[(o+t)%e.length])}static debounce(e,t=0){let n;return function(...o){clearTimeout(n),n=setTimeout(()=>e.apply(o),t)}}static getSvgPathFromStroke(e,t=!0){let n=e.length;if(n<4)return"";let o=e[0],i=e[1],s=e[2],a=`M${o[0].toFixed(2)},${o[1].toFixed(2)} Q${i[0].toFixed(2)},${i[1].toFixed(2)} ${ee(i[0],s[0]).toFixed(2)},${ee(i[1],s[1]).toFixed(2)} T`;for(let d=2,l=n-1;d<l;d++)o=e[d],i=e[d+1],a+=`${ee(o[0],i[0]).toFixed(2)},${ee(o[1],i[1]).toFixed(2)} `;return t&&(a+="Z"),a}static getSvgPathFromStrokePoints(e,t=!1){let n=e.length;if(n<4)return"";let o=e[0].point,i=e[1].point,s=e[2].point,a=`M${o[0].toFixed(2)},${o[1].toFixed(2)} Q${i[0].toFixed(2)},${i[1].toFixed(2)} ${ee(i[0],s[0]).toFixed(2)},${ee(i[1],s[1]).toFixed(2)} T`;for(let d=2,l=n-1;d<l;d++)o=e[d].point,i=e[d+1].point,a+=`${ee(o[0],i[0]).toFixed(2)},${ee(o[1],i[1]).toFixed(2)} `;return t&&(a+="Z"),a}static getPerfectDashProps(e,t,n,o=1,i=!0,s=2){let a,d,l;if(n.toLowerCase()==="dashed")a=t*s,l=1,d=i?(a/2).toString():"0";else if(n.toLowerCase()==="dotted")a=t/100,l=100,d="0";else return{strokeDasharray:"none",strokeDashoffset:"none"};let c=Math.floor(e/a/(2*l));c-=c%o,c=Math.max(c,4);let m=Math.max(a,(e-c*a)/(i?c:c-1));return{strokeDasharray:[a,m].join(" "),strokeDashoffset:d}}static isMobileSafari(){if(typeof window=="undefined")return!1;let e=window.navigator.userAgent,t=!!e.match(/iPad/i)||!!e.match(/iPhone/i),n=!!e.match(/WebKit/i);return t&&n&&!e.match(/CriOS/i)}static throttle(e,t){let n,o;return function(...i){return n||(n=!0,setTimeout(()=>n=!1,t),o=e(...i)),o}}static isDarwin(){return/Mac|iPod|iPhone|iPad/.test(window.navigator.platform)}static metaKey(e){return k.isDarwin()?e.metaKey:e.ctrlKey}static lns(e){let t=e.split("");return t.push(...t.splice(0,Math.round(t.length/5))),t.push(...t.splice(0,Math.round(t.length/4))),t.push(...t.splice(0,Math.round(t.length/3))),t.push(...t.splice(0,Math.round(t.length/2))),t.reverse().map(n=>+n?+n<5?5+ +n:+n>5?+n-5:n:n).join("")}},C=k;E(C,"getSnapPoints",(e,t,n)=>{let o=g({},e),i=[0,0],s=[],a={["minX"]:{id:"minX",isSnapped:!1},["midX"]:{id:"midX",isSnapped:!1},["maxX"]:{id:"maxX",isSnapped:!1},["minY"]:{id:"minY",isSnapped:!1},["midY"]:{id:"midY",isSnapped:!1},["maxY"]:{id:"maxY",isSnapped:!1}},d=["midX","minX","maxX"],l=["midY","minY","maxY"],c=t.map(T=>{let v=d.flatMap((f,L)=>d.map((Y,X)=>{let S=o[f]-T[Y],b=Math.abs(S);return{f,t:Y,gap:S,distance:b,isCareful:L===0||L+X===3}})),x=l.flatMap((f,L)=>l.map((Y,X)=>{let S=o[f]-T[Y],b=Math.abs(S);return{f,t:Y,gap:S,distance:b,isCareful:L===0||L+X===3}}));return[T,v,x]}),m=1/0,p=1/0,u=1/0,y=1/0;return c.forEach(([T,v,x])=>{v.forEach(f=>{f.distance<n&&f.distance<u&&(u=f.distance,m=f.gap)}),x.forEach(f=>{f.distance<n&&f.distance<y&&(y=f.distance,p=f.gap)})}),c.forEach(([T,v,x])=>{m!==1/0&&v.forEach(f=>{Math.abs(f.gap-m)<2&&(a[f.f]=U(g({},a[f.f]),{isSnapped:!0,to:T[f.t],B:T,distance:f.distance}))}),p!==1/0&&x.forEach(f=>{Math.abs(f.gap-p)<2&&(a[f.f]=U(g({},a[f.f]),{isSnapped:!0,to:T[f.t],B:T,distance:f.distance}))})}),i[0]=m===1/0?0:m,i[1]=p===1/0?0:p,o.minX-=i[0],o.midX-=i[0],o.maxX-=i[0],o.minY-=i[1],o.midY-=i[1],o.maxY-=i[1],d.forEach(T=>{let v=a[T];if(!v.isSnapped)return;let{id:x,B:f}=v,L=o[x];s.push(x==="minX"?[[L,o.midY],[L,f.minY],[L,f.maxY]]:[[L,o.minY],[L,o.maxY],[L,f.minY],[L,f.maxY]])}),l.forEach(T=>{let v=a[T];if(!v.isSnapped)return;let{id:x,B:f}=v,L=o[x];s.push(x==="midY"?[[o.midX,L],[f.minX,L],[f.maxX,L]]:[[o.minX,L],[o.maxX,L],[f.minX,L],[f.maxX,L]])}),{offset:i,snapLines:s}}),E(C,"deepMerge",(e,t)=>{let n=g({},e),o=Object.entries(t);for(let[i,s]of o)n[i]=s===Object(s)&&!Array.isArray(s)?k.deepMerge(n[i],s):s;return n});function ee(r,e){return(r+e)/2}var w=C;function tt(r,e){let t=V.useRef(void 0),n=V.useRef(void 0),o=V.useRef([0,0]),i=V.useRef(0),{inputs:s,bounds:a,callbacks:d}=R();V.useEffect(()=>{let u=y=>y.preventDefault();return document.addEventListener("gesturestart",u),document.addEventListener("gesturechange",u),()=>{document.removeEventListener("gesturestart",u),document.removeEventListener("gesturechange",u)}},[]);let l=V.useCallback(({event:u})=>{var L,Y,X,S;if(u.preventDefault(),s.isPinching||u.timeStamp<=i.current)return;i.current=u.timeStamp;let[y,T,v]=tn(u);if((u.altKey||u.ctrlKey||u.metaKey)&&u.buttons===0){let P=[...(Y=(L=s.pointer)==null?void 0:L.point)!=null?Y:[a.width/2,a.height/2],v*.618],B=s.pan(P,u);(X=d.onZoom)==null||X.call(d,U(g({},B),{delta:P}),u);return}let x=Ve.mul(u.shiftKey&&!w.isDarwin()?[T,0]:[y,T],.5);if(Ve.isEqual(x,[0,0]))return;let f=s.pan(x,u);(S=d.onPan)==null||S.call(d,f,u)},[d,s,a]),c=V.useCallback(({origin:u,event:y})=>{var x;if(y instanceof WheelEvent)return;let T=e.current;if(!T||!(y.target===T||T.contains(y.target)))return;let v=s.pinch(u,u);s.isPinching=!0,(x=d.onPinchStart)==null||x.call(d,v,y),n.current=v.point,t.current=v.origin,o.current=[0,0]},[d,s,a]),m=V.useCallback(({origin:u,offset:y,event:T})=>{var L;if(T instanceof WheelEvent)return;let v=e.current;if(!(T.target===v||(v==null?void 0:v.contains(T.target)))||!t.current)return;let x=s.pinch(u,t.current),f=Ve.sub(x.delta,o.current);o.current=x.delta,(L=d.onPinch)==null||L.call(d,U(g({},x),{point:x.point,origin:t.current,delta:[...f,y[0]]}),T),n.current=u},[d,s,a]),p=V.useCallback(({origin:u,event:y})=>{var x;let T=e.current;if(!(y.target===T||(T==null?void 0:T.contains(y.target))))return;let v=s.pinch(u,u);s.isPinching=!1,(x=d.onPinchEnd)==null||x.call(d,v,y),n.current=void 0,t.current=void 0,o.current=[0,0]},[]);en({onWheel:l,onPinchStart:c,onPinch:m,onPinchEnd:p},{target:e,eventOptions:{passive:!1},pinch:{from:[r.current,0],scaleBounds:()=>({from:r.current,max:5,min:.1})}})}var et=10;function tn(r){let{deltaY:e,deltaX:t}=r,n=0;if(r.ctrlKey||r.metaKey){let o=Math.sign(r.deltaY),i=Math.abs(r.deltaY),s=e;i>et&&(s=et*o),n=s}return[t,e,n]}import{useEffect as nn}from"react";function nt(){let{callbacks:r}=R();nn(()=>{function e(){var t;(t=r.onShapeBlur)==null||t.call(r)}return w.isMobileSafari()?(document.addEventListener("focusout",e),()=>document.removeEventListener("focusout",e)):()=>null},[r])}import*as ot from"react";function rt(){let{callbacks:r,inputs:e}=R();return ot.useMemo(()=>({onPointerDown:t=>{var o,i,s;if(t.dead||(t.dead=!0,!e.pointerIsValid(t)))return;if(t.currentTarget.setPointerCapture(t.pointerId),t.button===2){(o=r.onRightPointCanvas)==null||o.call(r,e.pointerDown(t,"canvas"),t);return}let n=e.pointerDown(t,"canvas");t.button===0&&((i=r.onPointCanvas)==null||i.call(r,n,t)),(s=r.onPointerDown)==null||s.call(r,n,t)},onPointerMove:t=>{var o,i;if(t.dead||(t.dead=!0,!e.pointerIsValid(t)))return;let n=e.pointerMove(t,"canvas");t.buttons===1&&t.currentTarget.hasPointerCapture(t.pointerId)&&((o=r.onDragCanvas)==null||o.call(r,n,t)),(i=r.onPointerMove)==null||i.call(r,n,t)},onPointerUp:t=>{var i,s,a,d,l;if(t.dead||(t.dead=!0,e.activePointer=void 0,!e.pointerIsValid(t)))return;let n=e.isDoubleClick(),o=e.pointerUp(t,"canvas");if(t.button===2){(i=r.onPointerUp)==null||i.call(r,o,t);return}t.currentTarget.hasPointerCapture(t.pointerId)&&((s=t.currentTarget)==null||s.releasePointerCapture(t.pointerId)),t.button===0&&(n&&!(o.altKey||o.metaKey)&&((a=r.onDoubleClickCanvas)==null||a.call(r,o,t)),(d=r.onReleaseCanvas)==null||d.call(r,o,t)),(l=r.onPointerUp)==null||l.call(r,o,t)},onDrop:r.onDrop,onDragOver:r.onDragOver}),[r,e])}import*as Me from"react";function it(r){let{rPageState:e,rSelectionBounds:t,callbacks:n,inputs:o}=Me.useContext(Le);return Me.useMemo(()=>({onPointerDown:i=>{var a,d,l,c,m,p,u;if(i.dead||(i.dead=!0,!o.pointerIsValid(i)))return;if(i.button===2){(a=n.onRightPointShape)==null||a.call(n,o.pointerDown(i,r),i);return}let s=o.pointerDown(i,r);if((d=i.currentTarget)==null||d.setPointerCapture(i.pointerId),t.current&&C.pointInBounds(s.point,t.current)&&!e.current.selectedIds.includes(r)){i.button===0&&((l=n.onPointBounds)==null||l.call(n,o.pointerDown(i,"bounds"),i),(c=n.onPointShape)==null||c.call(n,s,i)),(m=n.onPointerDown)==null||m.call(n,s,i);return}i.button===0&&((p=n.onPointShape)==null||p.call(n,s,i)),(u=n.onPointerDown)==null||u.call(n,s,i)},onPointerUp:i=>{var d,l,c,m;if(i.dead||(i.dead=!0,!o.pointerIsValid(i))||i.button===2)return;o.activePointer=void 0;let s=o.isDoubleClick(),a=o.pointerUp(i,r);i.pointerId&&i.currentTarget.hasPointerCapture(i.pointerId)&&((d=i.currentTarget)==null||d.releasePointerCapture(i.pointerId)),i.button===0&&(s&&!(a.altKey||a.metaKey)&&((l=n.onDoubleClickShape)==null||l.call(n,a,i)),(c=n.onReleaseShape)==null||c.call(n,a,i)),(m=n.onPointerUp)==null||m.call(n,a,i)},onPointerMove:i=>{var a,d;if(i.dead||(i.dead=!0,i.buttons===2||!o.pointerIsValid(i)||o.pointer&&i.pointerId!==o.pointer.pointerId))return;let s=o.pointerMove(i,r);i.buttons===1&&i.currentTarget.hasPointerCapture(i.pointerId)&&((a=n.onDragShape)==null||a.call(n,s,i)),(d=n.onPointerMove)==null||d.call(n,s,i)},onPointerEnter:i=>{var a;if(!o.pointerIsValid(i))return;let s=o.pointerEnter(i,r);(a=n.onHoverShape)==null||a.call(n,s,i)},onPointerLeave:i=>{var a;if(!o.pointerIsValid(i))return;let s=o.pointerEnter(i,r);(a=n.onUnhoverShape)==null||a.call(n,s,i)}}),[o,n,r])}import{Vec as ke}from"@tldraw/vec";import*as ye from"react";function st(r,e,t,n,o,i=!1,s=!1,a,d){let l={shape:r,asset:r.assetId?o[r.assetId]:void 0,meta:a,isChildOfSelected:s,isGhost:r.isGhost||i,isEditing:n.editingId===r.id,isBinding:d===r.id,isSelected:n.selectedIds.includes(r.id),isHovered:n.hoveredId===r.id||r.children!==void 0&&(n.hoveredId&&r.children.includes(n.hoveredId)||r.children.some(c=>n.selectedIds.includes(c)))};e.push(l),r.children&&(l.children=[],r.children.map(c=>t[c]).filter(c=>t[c.id]).sort((c,m)=>c.childIndex-m.childIndex).forEach(c=>st(c,l.children,t,n,o,l.isGhost,l.isSelected||l.isChildOfSelected,a)))}function on(r,e){return C.boundsContain(e,r)||C.boundsCollide(e,r)}function at(r,e,t,n){let{callbacks:o,shapeUtils:i,bounds:s}=R(),a=ye.useRef(),d=ye.useRef(-1),l=ye.useRef(new Set),c=ye.useRef(new Set),{selectedIds:m,camera:p}=e,[u,y]=ke.sub(ke.div([0,0],p.zoom),p.point),[T,v]=ke.sub(ke.div([s.width,s.height],p.zoom),p.point),x={minX:u,minY:y,maxX:T,maxY:v,height:T-u,width:v-y},f=c.current,L=l.current;f.clear(),L.clear(),Object.values(r.shapes).filter(b=>i[b.type].isStateful||m.includes(b.id)||on(i[b.type].getBounds(b),x)).forEach(b=>{if(b.parentId===r.id){L.add(b.id),f.add(b);return}let P=r.shapes[b.parentId];if(P===void 0)throw Error(`A shape (${b.id}) has a parent (${b.parentId}) that does not exist!`);L.add(P.id),f.add(P)}),f.size!==d.current&&(a.current&&clearTimeout(a.current),a.current=requestAnimationFrame(()=>{var b;(b=o.onRenderCountChange)==null||b.call(o,Array.from(L.values()))}),d.current=f.size);let X=e.bindingId?r.bindings[e.bindingId].toId:void 0,S=[];return f.forEach(b=>{if(b===void 0)throw Error("Rendered shapes included a missing shape");st(b,S,r.shapes,e,t,b.isGhost,!1,n,X)}),S.sort((b,P)=>b.shape.childIndex-P.shape.childIndex),S}import*as ve from"react";var ze=new Map;function rn(r,e){return Object.keys(e).reduce((t,n)=>{let o=e[n];return o?t+`${`--${r}-${n}`}: ${o};
`:t},"")}function sn(r,e,t=":root"){ve.useLayoutEffect(()=>{let n=document.createElement("style"),o=rn(r,e);return n.setAttribute("id",`${r}-theme`),n.setAttribute("data-selector",t),n.innerHTML=`
        ${t} {
          ${o}
        }
      `,document.head.appendChild(n),()=>{n&&document.head.contains(n)&&document.head.removeChild(n)}},[r,e,t])}function an(r,e){ve.useLayoutEffect(()=>{if(ze.get(r))return()=>{};let t=document.createElement("style");return t.innerHTML=e,t.setAttribute("id",r),document.head.appendChild(t),ze.set(r,t),()=>{t&&document.head.contains(t)&&(document.head.removeChild(t),ze.delete(r))}},[r,e])}var dn=(r,...e)=>r.reduce((t,n,o)=>t+n+(o<e.length?e[o]:""),""),ln={accent:"rgb(255, 0, 0)",brushFill:"rgba(0,0,0,.05)",brushStroke:"rgba(0,0,0,.25)",brushDashStroke:"rgba(0,0,0,.6)",selectStroke:"rgb(66, 133, 244)",selectFill:"rgba(65, 132, 244, 0.05)",binding:"rgba(65, 132, 244, 0.12)",background:"rgb(248, 249, 250)",foreground:"rgb(51, 51, 51)",grid:"rgba(144, 144, 144, 1)"},cn=dn`
  .tl-container {
    --tl-zoom: 1;
    --tl-scale: calc(1 / var(--tl-zoom));
    --tl-padding: calc(64px * max(1, var(--tl-scale)));
    --tl-performance-all: auto;
    --tl-performance-selected: auto;
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
    z-index: 100;
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: none;
    background-color: var(--tl-background);
  }
  .tl-container * {
    box-sizing: border-box;
  }
  .tl-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    touch-action: none;
    pointer-events: none;
  }
  .tl-grid {
    position: absolute;
    width: 100%;
    height: 100%;
    touch-action: none;
    pointer-events: none;
    user-select: none;
  }
  .tl-snap-line {
    stroke: var(--tl-accent);
    stroke-width: calc(1px * var(--tl-scale));
  }
  .tl-snap-point {
    stroke: var(--tl-accent);
    stroke-width: calc(1px * var(--tl-scale));
  }
  .tl-canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    touch-action: none;
    pointer-events: all;
    overflow: clip;
  }
  .tl-layer {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 0px;
    width: 0px;
    contain: layout style size;
  }
  .tl-absolute {
    position: absolute;
    top: 0px;
    left: 0px;
    transform-origin: center center;
    contain: layout style size;
  }
  .tl-positioned {
    position: absolute;
    top: 0px;
    left: 0px;
    transform-origin: center center;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    contain: layout style size;
    will-change: var(--tl-performance-all);
  }
  .tl-positioned-svg {
    width: 100%;
    height: 100%;
    overflow: hidden;
    contain: layout style size;
  }
  .tl-positioned-div {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: var(--tl-padding);
    overflow: hidden;
    contain: layout style size;
  }
  .tl-positioned-selected {
    will-change: var(--tl-performance-selected);
  }
  .tl-inner-div {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .tl-stroke-hitarea {
    fill: none;
    stroke: transparent;
    stroke-width: calc(24px * var(--tl-scale));
    pointer-events: stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .tl-fill-hitarea {
    fill: transparent;
    stroke: transparent;
    stroke-width: calc(24px * var(--tl-scale));
    pointer-events: all;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .tl-counter-scaled {
    transform: scale(var(--tl-scale));
  }
  .tl-dashed {
    stroke-dasharray: calc(2px * var(--tl-scale)), calc(2px * var(--tl-scale));
  }
  .tl-transparent {
    fill: transparent;
    stroke: transparent;
  }
  .tl-cursor-ns {
    cursor: ns-resize;
  }
  .tl-cursor-ew {
    cursor: ew-resize;
  }
  .tl-cursor-nesw {
    cursor: nesw-resize;
  }
  .tl-cursor-nwse {
    cursor: nwse-resize;
  }
  .tl-corner-handle {
    stroke: var(--tl-selectStroke);
    fill: var(--tl-background);
    stroke-width: calc(1.5px * var(--tl-scale));
  }
  .tl-rotate-handle {
    stroke: var(--tl-selectStroke);
    fill: var(--tl-background);
    stroke-width: calc(1.5px * var(--tl-scale));
    cursor: grab;
  }
  .tl-binding {
    fill: var(--tl-selectFill);
    stroke: var(--tl-selectStroke);
    stroke-width: calc(1px * var(--tl-scale));
    pointer-events: none;
  }
  .tl-user {
    left: calc(-15px * var(--tl-scale));
    top: calc(-15px * var(--tl-scale));
    height: calc(35px * var(--tl-scale));
    width: calc(35px * var(--tl-scale));
    transform: scale(var(--tl-scale));
    pointer-events: none;
    will-change: transform;
  }
  .tl-animated {
    transition: transform 200ms linear;
  }
  .tl-indicator {
    fill: transparent;
    stroke-width: calc(1.5px * var(--tl-scale));
    pointer-events: none;
  }
  .tl-user-indicator-bounds {
    border-style: solid;
    border-width: calc(1px * var(--tl-scale));
  }
  .tl-hovered {
    stroke: var(--tl-selectStroke);
  }
  .tl-selected {
    stroke: var(--tl-selectStroke);
  }
  .tl-locked {
    stroke-dasharray: calc(3px * var(--tl-scale)) calc(3px * var(--tl-scale));
  }
  .tl-editing {
    stroke-width: calc(2.5px * min(5, var(--tl-scale)));
  }
  .tl-performance {
    will-change: transform, contents;
  }
  .tl-clone-target {
    pointer-events: all;
  }
  .tl-clone-target:hover .tl-clone-button {
    opacity: 1;
  }
  .tl-clone-button-target {
    cursor: pointer;
    pointer-events: all;
  }
  .tl-clone-button-target:hover .tl-clone-button {
    fill: var(--tl-selectStroke);
  }
  .tl-clone-button {
    opacity: 0;
    r: calc(8px * var(--tl-scale));
    stroke-width: calc(1.5px * var(--tl-scale));
    stroke: var(--tl-selectStroke);
    fill: var(--tl-background);
  }
  .tl-bounds {
    pointer-events: none;
    contain: layout style size;
  }
  .tl-bounds-bg {
    stroke: none;
    fill: var(--tl-selectFill);
    pointer-events: all;
    contain: layout style size;
  }
  .tl-bounds-center {
    fill: transparent;
    stroke: var(--tl-selectStroke);
    stroke-width: calc(1.5px * var(--tl-scale));
  }
  .tl-brush {
    fill: var(--tl-brushFill);
    stroke: var(--tl-brushStroke);
    stroke-width: calc(1px * var(--tl-scale));
    pointer-events: none;
    contain: layout style size;
  }
  .tl-dashed-brush-line {
    fill: none;
    stroke: var(--tl-brushDashStroke);
    stroke-width: calc(1px * var(--tl-scale));
    pointer-events: none;
  }
  .tl-brush.dashed {
    stroke: none;
  }
  .tl-handle {
    pointer-events: all;
    cursor: grab;
  }
  .tl-handle:hover .tl-handle-bg {
    fill: var(--tl-selectFill);
  }
  .tl-handle:hover .tl-handle-bg > * {
    stroke: var(--tl-selectFill);
  }
  .tl-handle:active .tl-handle-bg {
    cursor: grabbing;
    fill: var(--tl-selectFill);
  }
  .tl-handle:active .tl-handle-bg > * {
    stroke: var(--tl-selectFill);
  }
  .tl-handle {
    fill: var(--tl-background);
    stroke: var(--tl-selectStroke);
    stroke-width: 1.5px;
  }
  .tl-handle-bg {
    fill: transparent;
    stroke: none;
    pointer-events: all;
    r: calc(16px / max(1, var(--tl-zoom)));
  }
  .tl-binding-indicator {
    fill: transparent;
    stroke: var(--tl-binding);
  }
  .tl-centered-g {
    transform: translate(var(--tl-padding), var(--tl-padding));
  }
  .tl-current-parent > *[data-shy='true'] {
    opacity: 1;
  }
  .tl-binding {
    fill: none;
    stroke: var(--tl-selectStroke);
    stroke-width: calc(2px * var(--tl-scale));
  }
  .tl-grid-dot {
    fill: var(--tl-grid);
  }
  .tl-erase-line {
    stroke-linejoin: round;
    stroke-linecap: round;
    pointer-events: none;
    fill: var(--tl-grid);
    opacity: 0.32;
  }
`;function dt(r,e){let t=ve.useMemo(()=>g(g({},ln),r),[r]);sn("tl",t,e),an("tl-canvas",cn)}import*as pe from"react";function _(r){let{callbacks:e,inputs:t}=R(),n=pe.useCallback(d=>{var c,m,p,u;if(d.dead||(d.dead=!0,!t.pointerIsValid(d)))return;(c=d.currentTarget)==null||c.setPointerCapture(d.pointerId);let l=t.pointerDown(d,r);if(d.button===2){(m=e.onRightPointBoundsHandle)==null||m.call(e,l,d);return}d.button===0&&((p=e.onPointBoundsHandle)==null||p.call(e,l,d)),(u=e.onPointerDown)==null||u.call(e,l,d)},[t,e,r]),o=pe.useCallback(d=>{var m,p,u;if(d.dead||(d.dead=!0,d.button===2||!t.pointerIsValid(d)))return;let l=t.pointerUp(d,r),c=t.isDoubleClick();d.button===0&&(c&&!(l.altKey||l.metaKey)&&((m=e.onDoubleClickBoundsHandle)==null||m.call(e,l,d)),(p=e.onReleaseBoundsHandle)==null||p.call(e,l,d)),(u=e.onPointerUp)==null||u.call(e,l,d)},[t,e,r]),i=pe.useCallback(d=>{var c,m;if(d.dead||(d.dead=!0,!t.pointerIsValid(d))||d.buttons===2)return;let l=t.pointerMove(d,r);d.buttons===1&&d.currentTarget.hasPointerCapture(d.pointerId)&&((c=e.onDragBoundsHandle)==null||c.call(e,l,d)),(m=e.onPointerMove)==null||m.call(e,l,d)},[t,e,r]),s=pe.useCallback(d=>{var l;!t.pointerIsValid(d)||(l=e.onHoverBoundsHandle)==null||l.call(e,t.pointerEnter(d,r),d)},[t,e,r]),a=pe.useCallback(d=>{var l;!t.pointerIsValid(d)||(l=e.onUnhoverBoundsHandle)==null||l.call(e,t.pointerEnter(d,r),d)},[t,e,r]);return{onPointerDown:n,onPointerUp:o,onPointerEnter:s,onPointerMove:i,onPointerLeave:a}}import*as xe from"react";function lt(r,e,t){let n=xe.useRef(),o=xe.useRef();xe.useLayoutEffect(()=>{let{zoom:i,point:s}=t.camera,a=i!==n.current,d=s!==o.current;if(n.current=i,o.current=s,a||d){let l=r.current;if(e&&"current"in e){let c=e.current;a&&c&&c.style.setProperty("--tl-zoom",i.toString()),l&&l.style.setProperty("transform",`scale(${i}) translateX(${s[0]}px) translateY(${s[1]}px)`)}}},[t.camera.zoom,t.camera.point])}import*as ut from"react";function ct(r,e){return[(r[0]+e.point[0])*e.zoom,(r[1]+e.point[1])*e.zoom]}function Fe(r,e){return r[e.type]}function mt(r,e,t){let{rSelectionBounds:n}=R(),{selectedIds:o}=e,i=ut.useRef(),s,a=0,d=!1,l=!1;if(o.length===1){let m=o[0],p=r.shapes[m];if(!p)throw Error(`selectedIds is set to the id of a shape that doesn't exist: ${m}`);a=p.rotation||0,d=p.isLocked||!1;let u=Fe(t,p);s=u.hideBounds?void 0:u.getBounds(p)}else if(o.length>1){let m=o.map(p=>r.shapes[p]);a=0,d=m.every(p=>p.isLocked),s=m.reduce((p,u,y)=>y===0?Fe(t,u).getRotatedBounds(u):w.getExpandedBounds(p,Fe(t,u).getRotatedBounds(u)),{})}if(s){let[m,p]=ct([s.minX,s.minY],e.camera),[u,y]=ct([s.maxX,s.maxY],e.camera);l=!!Object.values(r.bindings).find(T=>o.includes(T.toId)||o.includes(T.fromId)),n.current={minX:m,minY:p,maxX:u,maxY:y,width:u-m,height:y-p}}else n.current=null;let c=i.current;return!c||!s?i.current=s:s&&c.minX===s.minX&&c.minY===s.minY&&c.maxX===s.maxX&&c.maxY===s.maxY&&(s=i.current),{bounds:s,rotation:a,isLocked:d,isLinked:l}}import*as pt from"react";function ht(r){let{inputs:e,callbacks:t}=R();return pt.useMemo(()=>({onPointerDown:n=>{var i,s,a;if(n.dead||(n.dead=!0,!e.pointerIsValid(n))||n.button===2)return;(i=n.currentTarget)==null||i.setPointerCapture(n.pointerId);let o=e.pointerDown(n,r);n.button===0&&((s=t.onPointHandle)==null||s.call(t,o,n)),(a=t.onPointerDown)==null||a.call(t,o,n)},onPointerUp:n=>{var s,a,d,l;if(n.dead||(n.dead=!0,!e.pointerIsValid(n))||n.button===2)return;let o=e.isDoubleClick(),i=e.pointerUp(n,r);n.currentTarget.hasPointerCapture(n.pointerId)&&((s=n.currentTarget)==null||s.releasePointerCapture(n.pointerId),n.button===0&&(o&&!(i.altKey||i.metaKey)&&((a=t.onDoubleClickHandle)==null||a.call(t,i,n)),(d=t.onReleaseHandle)==null||d.call(t,i,n))),(l=t.onPointerUp)==null||l.call(t,i,n)},onPointerMove:n=>{var i,s;if(n.dead||(n.dead=!0,!e.pointerIsValid(n))||n.buttons===2)return;let o=e.pointerMove(n,r);n.buttons===1&&n.currentTarget.hasPointerCapture(n.pointerId)&&((i=t.onDragHandle)==null||i.call(t,o,n)),(s=t.onPointerMove)==null||s.call(t,o,n)},onPointerEnter:n=>{var i;if(!e.pointerIsValid(n))return;let o=e.pointerEnter(n,r);(i=t.onHoverHandle)==null||i.call(t,o,n)},onPointerLeave:n=>{var i;if(!e.pointerIsValid(n))return;let o=e.pointerEnter(n,r);(i=t.onUnhoverHandle)==null||i.call(t,o,n)}}),[e,t,r])}import*as ft from"react";function Tt(r){let{bounds:e}=R();ft.useEffect(()=>{let t=i=>{i.preventDefault()},n=i=>{let s=i.touches[0].pageX,a=i.touches[0].radiusX||0;(s-a<10||s+a>e.width-10)&&i.preventDefault()},o=r.current;return o?(o.addEventListener("gestureend",t),o.addEventListener("gesturechange",t),o.addEventListener("gesturestart",t),o.addEventListener("touchstart",n),()=>{o&&(o.removeEventListener("gestureend",t),o.removeEventListener("gesturechange",t),o.removeEventListener("gesturestart",t),o.removeEventListener("touchstart",n))}):()=>{}},[r,e.width])}import*as gt from"react";function Lt(){let{callbacks:r,inputs:e}=R();return gt.useMemo(()=>({onPointerDown:t=>{var o,i,s,a;if(t.dead||(t.dead=!0,!e.pointerIsValid(t)))return;if(t.button===2){(o=r.onRightPointBounds)==null||o.call(r,e.pointerDown(t,"bounds"),t);return}let n=e.pointerDown(t,"bounds");(i=t.currentTarget)==null||i.setPointerCapture(t.pointerId),t.button===0&&((s=r.onPointBounds)==null||s.call(r,n,t)),(a=r.onPointerDown)==null||a.call(r,n,t)},onPointerUp:t=>{var i,s,a,d;if(t.dead||(t.dead=!0,t.button===2)||(e.activePointer=void 0,!e.pointerIsValid(t)))return;let n=e.isDoubleClick(),o=e.pointerUp(t,"bounds");t.currentTarget.hasPointerCapture(t.pointerId)&&((i=t.currentTarget)==null||i.releasePointerCapture(t.pointerId)),t.button===0&&(n&&!(o.altKey||o.metaKey)&&((s=r.onDoubleClickBounds)==null||s.call(r,o,t)),(a=r.onReleaseBounds)==null||a.call(r,o,t)),(d=r.onPointerUp)==null||d.call(r,o,t)},onPointerMove:t=>{var o,i;if(t.dead||(t.dead=!0,!e.pointerIsValid(t)))return;t.buttons===1&&t.currentTarget.hasPointerCapture(t.pointerId)&&((o=r.onDragBounds)==null||o.call(r,e.pointerMove(t,"bounds"),t));let n=e.pointerMove(t,"bounds");(i=r.onPointerMove)==null||i.call(r,n,t)},onPointerEnter:t=>{var n;!e.pointerIsValid(t)||(n=r.onHoverBounds)==null||n.call(r,e.pointerEnter(t,"bounds"),t)},onPointerLeave:t=>{var n;!e.pointerIsValid(t)||(n=r.onUnhoverBounds)==null||n.call(r,e.pointerEnter(t,"bounds"),t)}}),[e,r])}import*as Ke from"react";function De(r,e=0){let t=Ke.useRef(null);return Ke.useLayoutEffect(()=>{let n=t.current,o=`
    translate(
      calc(${r.minX}px - var(--tl-padding)),
      calc(${r.minY}px - var(--tl-padding))
    )
    rotate(${e+(r.rotation||0)}rad)`;n.style.setProperty("transform",o),n.style.setProperty("width",`calc(${Math.floor(r.width)}px + (var(--tl-padding) * 2))`),n.style.setProperty("height",`calc(${Math.floor(r.height)}px + (var(--tl-padding) * 2))`)},[r,e]),t}import*as yt from"react";function vt(){let{inputs:r,callbacks:e}=R();yt.useEffect(()=>{let t=o=>{var i;(i=e.onKeyDown)==null||i.call(e,o.key,r.keydown(o),o)},n=o=>{var i;r.keyup(o),(i=e.onKeyUp)==null||i.call(e,o.key,r.keyup(o),o)};return window.addEventListener("keydown",t),window.addEventListener("keyup",n),()=>{window.removeEventListener("keydown",t),window.removeEventListener("keyup",n)}},[r,e])}import*as xt from"react";function bt(r,e){xt.useLayoutEffect(()=>{if(e&&"current"in e){let t=e==null?void 0:e.current;if(!t)return;switch(r){case"transform_selected":{t.style.setProperty("--tl-performance-all","auto"),t.style.setProperty("--tl-performance-selected","transform, contents");break}case"transform_all":{t.style.setProperty("--tl-performance-all","transform, contents"),t.style.setProperty("--tl-performance-selected","transform, contents");break}case"translate_selected":{t.style.setProperty("--tl-performance-all","auto"),t.style.setProperty("--tl-performance-selected","transform");break}case"translate_all":{t.style.setProperty("--tl-performance-all","transform"),t.style.setProperty("--tl-performance-selected","transform");break}default:t.style.setProperty("--tl-performance-all","auto"),t.style.setProperty("--tl-performance-selected","auto")}}},[r])}function un(a){var d=a,{id:r,bounds:e,rotation:t=0,isGhost:n=!1,isSelected:o=!1,children:i}=d,s=O(d,["id","bounds","rotation","isGhost","isSelected","children"]);let l=De(e,t);return Ye.createElement("div",g({id:r,ref:l,className:`tl-positioned${n?" tl-ghost":""}${o?" tl-positioned-selected":""}`,"aria-label":"container","data-testid":"container"},s),i)}var Z=Ye.memo(un);function mn({brush:r,zoom:e,dashed:t}){return z.createElement(Z,{bounds:r,rotation:0},z.createElement(te,null,z.createElement("rect",{className:"tl-brush"+(t?" dashed":""),opacity:1,x:0,y:0,width:r.width,height:r.height,"aria-label":"brush"}),t&&z.createElement("g",{className:"tl-dashed-brush-line"},z.createElement(Xe,{x1:0,y1:0,x2:r.width,y2:0,zoom:e}),z.createElement(Xe,{x1:r.width,y1:0,x2:r.width,y2:r.height,zoom:e}),z.createElement(Xe,{x1:0,y1:r.height,x2:r.width,y2:r.height,zoom:e}),z.createElement(Xe,{x1:0,y1:0,x2:0,y2:r.height,zoom:e}))))}var Pt=z.memo(mn);function Xe({x1:r,y1:e,x2:t,y2:n,zoom:o}){let i=w.getPerfectDashProps(Math.hypot(t-r,n-e),1/o,"dashed",1,!0,3);return z.createElement("line",{x1:r,y1:e,x2:t,y2:n,strokeWidth:1/o,strokeDasharray:i.strokeDasharray,strokeDashoffset:i.strokeDashoffset})}import*as W from"react";var Rt=W.memo(({color:r})=>W.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 35 35",fill:"none",fillRule:"evenodd"},W.createElement("g",{fill:"rgba(0,0,0,.2)",transform:"translate(1,1)"},W.createElement("path",{d:"m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z"}),W.createElement("path",{d:"m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z"})),W.createElement("g",{fill:"white"},W.createElement("path",{d:"m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z"}),W.createElement("path",{d:"m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z"})),W.createElement("g",{fill:r},W.createElement("path",{d:"m19.751 24.4155-1.844.774-3.1-7.374 1.841-.775z"}),W.createElement("path",{d:"m13 10.814v11.188l2.969-2.866.428-.139h4.768z"}))));import pn from"perfect-freehand";import*as Ue from"react";function hn({points:r,zoom:e}){if(r.length===0)return null;let t=w.getSvgPathFromStroke(pn(r,{size:16/e,start:{taper:!0}}));return Ue.createElement("path",{d:t,className:"tl-erase-line"})}var Et=Ue.memo(hn);import*as he from"react";var Bt=[[-1,.15,64],[.05,.375,16],[.15,1,4],[.7,2.5,1]];function Ct({grid:r,camera:e}){return he.createElement("svg",{className:"tl-grid",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},he.createElement("defs",null,Bt.map(([t,n,o],i)=>{let s=o*r*e.zoom,a=e.point[0]*e.zoom,d=e.point[1]*e.zoom,l=a>0?a%s:s+a%s,c=d>0?d%s:s+d%s,m=e.zoom<n?w.modulate(e.zoom,[t,n],[0,1]):1;return he.createElement("pattern",{key:`grid-pattern-${i}`,id:`grid-${i}`,width:s,height:s,patternUnits:"userSpaceOnUse"},he.createElement("circle",{className:"tl-grid-dot",cx:l,cy:c,r:1,opacity:m}))})),Bt.map((t,n)=>he.createElement("rect",{key:`grid-rect-${n}`,width:"100%",height:"100%",fill:`url(#grid-${n})`})))}import*as ne from"react";function fn({camera:{zoom:r,point:e},children:t}){let n=2.5/r;return ne.createElement("svg",{className:"tl-overlay"},ne.createElement("defs",null,ne.createElement("g",{id:"tl-snap-point"},ne.createElement("path",{className:"tl-snap-point",d:`M ${-n},${-n} L ${n},${n} M ${-n},${n} L ${n},${-n}`}))),ne.createElement("g",{transform:`scale(${r}) translate(${e})`},t))}var St=ne.memo(fn);import*as G from"react";import*as K from"react";import*as ae from"react";var te=ae.memo(ae.forwardRef(function(s,i){var a=s,{id:e,className:t="",children:n}=a,o=O(a,["id","className","children"]);return ae.createElement("svg",g({ref:i,className:`tl-positioned-svg ${t}`},o),ae.createElement("g",{id:e,className:"tl-centered-g"},n))}));import*as $e from"react";function Tn({bounds:r,isLocked:e,isHidden:t}){return $e.createElement("rect",{className:["tl-bounds-center",e?"tl-dashed":""].join(" "),x:-1,y:-1,width:r.width+2,height:r.height+2,opacity:t?0:1,pointerEvents:"none","aria-label":"center handle"})}var wt=$e.memo(Tn);import*as $ from"react";import*as q from"react";var gn={right:0,bottomRight:45,bottom:90,bottomLeft:135,left:180,topLeft:225,top:270,topRight:315};function Ln({bounds:r,side:e,targetSize:t,size:n}){let o=t*2,i={left:-o,topLeft:-o,bottomLeft:-o,right:r.width,topRight:r.width,bottomRight:r.width,top:r.width/2-o/2,bottom:r.width/2-o/2}[e],s={left:r.height/2-o/2,right:r.height/2-o/2,top:-o*2,topLeft:-o,topRight:-o,bottom:r.height,bottomLeft:r.height,bottomRight:r.height}[e],{callbacks:a,inputs:d}=R(),l=q.useCallback(c=>{var p;c.stopPropagation();let m=d.pointerDown(c,e);(p=a.onShapeClone)==null||p.call(a,m,c)},[a.onShapeClone]);return q.createElement("g",{className:"tl-clone-target",transform:`translate(${i}, ${s})`,"aria-label":"clone button"},q.createElement("rect",{className:"tl-transparent",width:t*2,height:t*2}),q.createElement("g",{className:"tl-clone-button-target",onPointerDown:l,transform:`translate(${t}, ${t}) rotate(${gn[e]})`},q.createElement("circle",{className:"tl-transparent ",r:t}),q.createElement("path",{className:"tl-clone-button",d:`M -${n/2},-${n/2} L ${n/2},0 -${n/2},${n/2} Z`,strokeLinejoin:"round"})))}var Q=q.memo(Ln);function yn({targetSize:r,size:e,bounds:t}){return $.createElement($.Fragment,null,$.createElement(Q,{targetSize:r,size:e,bounds:t,side:"top"}),$.createElement(Q,{targetSize:r,size:e,bounds:t,side:"right"}),$.createElement(Q,{targetSize:r,size:e,bounds:t,side:"bottom"}),$.createElement(Q,{targetSize:r,size:e,bounds:t,side:"left"}),$.createElement(Q,{targetSize:r,size:e,bounds:t,side:"topLeft"}),$.createElement(Q,{targetSize:r,size:e,bounds:t,side:"topRight"}),$.createElement(Q,{targetSize:r,size:e,bounds:t,side:"bottomLeft"}),$.createElement(Q,{targetSize:r,size:e,bounds:t,side:"bottomRight"}))}var Ht=$.memo(yn);import*as fe from"react";var vn={["top_left_corner"]:"tl-cursor-nwse",["top_right_corner"]:"tl-cursor-nesw",["bottom_right_corner"]:"tl-cursor-nwse",["bottom_left_corner"]:"tl-cursor-nesw"};function xn({size:r,targetSize:e,isHidden:t,corner:n,bounds:o}){let i=_(n),s=n==="top_left_corner"||n==="top_right_corner",a=n==="top_left_corner"||n==="bottom_left_corner";return fe.createElement("g",{opacity:t?0:1},fe.createElement("rect",g({className:"tl-transparent "+(t?"":vn[n]),"aria-label":"corner transparent",x:(a?-1:o.width+1)-e,y:(s?-1:o.height+1)-e,width:e*2,height:e*2,pointerEvents:t?"none":"all"},i)),fe.createElement("rect",{className:"tl-corner-handle","aria-label":"corner handle",x:(a?-1:o.width+1)-r/2,y:(s?-1:o.height+1)-r/2,width:r,height:r,pointerEvents:"none"}))}var be=fe.memo(xn);import*as Ne from"react";var bn={["top_edge"]:"tl-cursor-ns",["right_edge"]:"tl-cursor-ew",["bottom_edge"]:"tl-cursor-ns",["left_edge"]:"tl-cursor-ew"};function Pn({size:r,isHidden:e,bounds:t,edge:n}){let o=_(n),i=n==="top_edge"||n==="bottom_edge",s=n==="right_edge"||n==="bottom_edge",{height:a,width:d}=t;return Ne.createElement("rect",g({pointerEvents:e?"none":"all",className:"tl-transparent tl-edge-handle "+(e?"":bn[n]),"aria-label":`${n} handle`,opacity:e?0:1,x:i?r/2:(s?d+1:-1)-r/2,y:i?(s?a+1:-1)-r/2:r/2,width:i?Math.max(0,d+1-r):r,height:i?r:Math.max(0,a+1-r)},o))}var Pe=Ne.memo(Pn);import*as F from"react";function Rn({size:r,bounds:e,isHidden:t}){let n=_("left"),o=_("center"),i=_("right");return F.createElement("g",{cursor:"grab",transform:`translate(${e.width/2-r*4}, ${e.height+r*2})`,"aria-label":"link handle"},F.createElement("g",{className:"tl-transparent",pointerEvents:t?"none":"all"},F.createElement("rect",g({x:0,y:0,width:r*2,height:r*2},n)),F.createElement("rect",g({x:r*3,y:0,width:r*2,height:r*2},o)),F.createElement("rect",g({x:r*6,y:0,width:r*2,height:r*2},i))),F.createElement("g",{className:"tl-rotate-handle",transform:`translate(${r/2}, ${r/2})`,"aria-label":"link rotate handle"},F.createElement("path",{d:`M 0,${r/2} L ${r},${r} ${r},0 Z`,pointerEvents:"none",opacity:t?0:1}),F.createElement("path",{transform:`translate(${r*3}, 0)`,d:`M 0,0 L ${r},0 ${r/2},${r} Z`,pointerEvents:"none",opacity:t?0:1}),F.createElement("path",{transform:`translate(${r*6}, 0)`,d:`M ${r},${r/2} L 0,0 0,${r} Z`,pointerEvents:"none",opacity:t?0:1})))}var It=F.memo(Rn);import*as Te from"react";function En({bounds:r,targetSize:e,size:t,isHidden:n}){let o=_("rotate");return Te.createElement("g",{cursor:"grab",opacity:n?0:1},Te.createElement("circle",g({className:"tl-transparent","aria-label":"rotate handle transparent",cx:r.width/2,cy:t*-2,r:e,pointerEvents:n?"none":"all"},o)),Te.createElement("circle",{className:"tl-rotate-handle","aria-label":"rotate handle",cx:r.width/2,cy:t*-2,r:t/2,pointerEvents:"none"}))}var Mt=Te.memo(En);var Bn=function({zoom:e,bounds:t,viewportWidth:n,rotation:o,isHidden:i,isLocked:s,hideCloneHandles:a,hideResizeHandles:d,hideRotateHandle:l,hideBindingHandles:c}){let m=(n<768?16:8)/e,p=8/e,u=Math.min(t.width,t.height)*e,y=!l&&!i&&!s&&u>32,T=!i&&!s&&u>24,v=!i&&!s&&u>20,x=!a&&u>24;return K.createElement(Z,{bounds:t,rotation:o},K.createElement(te,null,K.createElement(wt,{bounds:t,isLocked:s,isHidden:i}),!d&&!s?K.createElement(K.Fragment,null,K.createElement(Pe,{targetSize:m,size:p,bounds:t,edge:"top_edge",isHidden:!T}),K.createElement(Pe,{targetSize:m,size:p,bounds:t,edge:"right_edge",isHidden:!T}),K.createElement(Pe,{targetSize:m,size:p,bounds:t,edge:"bottom_edge",isHidden:!T}),K.createElement(Pe,{targetSize:m,size:p,bounds:t,edge:"left_edge",isHidden:!T}),K.createElement(be,{targetSize:m,size:p,bounds:t,isHidden:i||!v,corner:"top_left_corner"}),K.createElement(be,{targetSize:m,size:p,bounds:t,isHidden:i||!v,corner:"top_right_corner"}),K.createElement(be,{targetSize:m,size:p,bounds:t,isHidden:i||!v,corner:"bottom_right_corner"}),K.createElement(be,{targetSize:m,size:p,bounds:t,isHidden:i||!v,corner:"bottom_left_corner"})):null,y&&K.createElement(Mt,{targetSize:m,size:p,bounds:t,isHidden:!T}),x&&K.createElement(Ht,{bounds:t,targetSize:m,size:p}),!c&&K.createElement(It,{targetSize:m,size:p,bounds:t,isHidden:!T})))},kt=K.memo(Bn);import*as ge from"react";function Cn({bounds:r,rotation:e,isHidden:t}){let n=Lt();return ge.createElement(Z,{bounds:r,rotation:e},ge.createElement(te,null,ge.createElement("rect",g({className:"tl-bounds-bg","aria-label":"bounds bg",width:r.width,height:r.height,opacity:t?0:1},n))))}var Kt=ge.memo(Cn);import{Vec as Ge}from"@tldraw/vec";import*as de from"react";import*as oe from"react";function Sn({id:r,point:e}){let t=ht(r);return oe.createElement(Z,{bounds:w.translateBounds({minX:0,minY:0,maxX:0,maxY:0,width:0,height:0},e)},oe.createElement(te,null,oe.createElement("g",g({className:"tl-handle","aria-label":"handle"},t),oe.createElement("circle",{className:"tl-handle-bg",pointerEvents:"all"}),oe.createElement("circle",{className:"tl-counter-scaled tl-handle",pointerEvents:"none",r:4}))))}var Dt=oe.memo(Sn);function wn({shape:r,zoom:e}){if(r.handles===void 0)return null;let t=null,n=Object.values(r.handles).reduce((o,i)=>{let s=Ge.add(i.point,r.point);return(!t||Ge.dist(s,t)*e>=32)&&(o.push(i),t=s),o},[]);return n.length===1?null:de.createElement(de.Fragment,null,n.map(o=>de.createElement(Dt,{key:r.id+"_"+o.id,id:o.id,point:Ge.add(o.point,r.point)})))}var Yt=de.memo(wn);import*as re from"react";import*as Re from"react";import*as We from"react";function Hn(r){let e=r.utils.getRef(r.shape);return We.createElement(r.utils.Component,g({ref:e},r))}var Xt=We.memo(Hn,(r,e)=>r.isHovered!==e.isHovered||r.isSelected!==e.isSelected||r.isEditing!==e.isEditing||r.isBinding!==e.isBinding||r.isGhost!==e.isGhost||r.meta!==e.meta?!1:e.shape!==r.shape?!e.utils.shouldRender(e.shape,r.shape):!0);function In(o){var i=o,{shape:r,utils:e,meta:t}=i,n=O(i,["shape","utils","meta"]);let{callbacks:s}=R(),a=e.getBounds(r),d=it(r.id);return Re.createElement(Z,{id:r.id,bounds:a,rotation:r.rotation,"data-shape":r.type,isGhost:n.isGhost,isSelected:n.isSelected},Re.createElement(Xt,g({shape:r,utils:e,meta:t,events:d,bounds:a,onShapeChange:s.onShapeChange,onShapeBlur:s.onShapeBlur},n)))}var Ut=Re.memo(In);function Mn(i){var s=i,{shape:r,utils:e,meta:t,children:n}=s,o=O(s,["shape","utils","meta","children"]);return re.createElement(re.Fragment,null,re.createElement(Ut,g({shape:r,utils:e[r.type],meta:t},o)),n&&n.map(a=>re.createElement(je,g({key:a.shape.id,utils:e},a))))}var je=re.memo(Mn);import*as le from"react";function kn({isHovered:r=!1,isSelected:e=!1,isEditing:t=!1,shape:n,user:o,meta:i}){let{shapeUtils:s}=R(),a=s[n.type],d=a.getBounds(n),l=De(d,n.rotation);return le.createElement("div",{ref:l,draggable:!1,className:["tl-indicator","tl-absolute",e&&!o?"tl-selected":"tl-hovered",t?"tl-editing":"",n.isLocked?"tl-locked":""].join(" ")},le.createElement("svg",{width:"100%",height:"100%"},le.createElement("g",{className:"tl-centered-g",stroke:o==null?void 0:o.color},le.createElement(a.Indicator,{shape:n,meta:i,user:o,bounds:d,isSelected:e,isHovered:r}))))}var Ee=le.memo(kn);function Kn({page:r,pageState:e,assets:t,hideBounds:n,hideHandles:o,hideIndicators:i,hideBindingHandles:s,hideCloneHandles:a,hideRotateHandle:d,hideResizeHandles:l,meta:c}){let{bounds:m,shapeUtils:p}=R(),u=at(r,e,t,c),{bounds:y,isLinked:T,isLocked:v,rotation:x}=mt(r,e,p),{selectedIds:f,hoveredId:L,editingId:Y,camera:{zoom:X}}=e,S=i,b=!0,P=!1,B,M=f.map(I=>r.shapes[I]);if(M.length===1){let I=M[0];P=Y===I.id,P&&(S=!0);let A=p[I.type];b=a||!A.showCloneHandles,I.handles!==void 0&&!P&&(B=I)}return G.createElement(G.Fragment,null,y&&G.createElement(Kt,{bounds:y,rotation:x,isHidden:n}),u.map(I=>G.createElement(je,g({key:I.shape.id,utils:p},I))),!S&&M.map(I=>G.createElement(Ee,{key:"selected_"+I.id,shape:I,meta:c,isSelected:!0,isEditing:P})),!S&&L&&L!==Y&&G.createElement(Ee,{key:"hovered_"+L,shape:r.shapes[L],meta:c,isHovered:!0}),y&&G.createElement(kt,{zoom:X,bounds:y,viewportWidth:m.width,isLocked:v,rotation:x,isHidden:n,hideRotateHandle:d,hideResizeHandles:l,hideBindingHandles:s||!T,hideCloneHandles:b}),!o&&B&&G.createElement(Yt,{shape:B,zoom:X}))}var $t=G.memo(Kn);import*as j from"react";function Dn({snapLines:r}){return j.createElement(j.Fragment,null,r.map((e,t)=>j.createElement(Xn,{key:t,snapLine:e})))}function Yn({snapLine:r}){let e=w.getBoundsFromPoints(r);return j.createElement(j.Fragment,null,j.createElement("line",{className:"tl-snap-line",x1:e.minX,y1:e.minY,x2:e.maxX,y2:e.maxY}),r.map(([t,n],o)=>j.createElement("use",{key:o,href:"#tl-snap-point",x:t,y:n})))}var Xn=j.memo(Yn),Nt=j.memo(Dn);import*as Be from"react";import*as ce from"react";function Wt({user:r,Cursor:e}){let t=ce.useRef(null);return ce.useLayoutEffect(()=>{t.current&&(t.current.style.transform=`translate(${r.point[0]}px, ${r.point[1]}px)`)},[r.point]),ce.createElement("div",{ref:t,className:`tl-absolute tl-user tl-counter-scaled ${r.session?"":"tl-animated"}`},ce.createElement(e,{id:r.id,color:r.color,metadata:r.metadata}))}function At({userId:r,users:e,Cursor:t}){return Be.createElement(Be.Fragment,null,Object.values(e).filter(n=>n&&n.id!==r).map(n=>Be.createElement(Wt,{key:n.id,user:n,Cursor:t})))}import*as ie from"react";function Ot({userId:r,users:e,meta:t,page:n}){let{shapeUtils:o}=R();return ie.createElement(ie.Fragment,null,Object.values(e).filter(Boolean).filter(i=>i.id!==r&&i.selectedIds.length>0).map(i=>{let s=i.selectedIds.map(d=>n.shapes[d]).filter(Boolean);if(s.length===0)return null;let a=w.getCommonBounds(s.map(d=>o[d.type].getBounds(d)));return ie.createElement(ie.Fragment,{key:i.id+"_shapes"},ie.createElement("div",{className:"tl-absolute tl-user-indicator-bounds",style:{backgroundColor:i.color+"0d",borderColor:i.color+"78",transform:`translate(${a.minX}px, ${a.minY}px)`,width:a.width,height:a.height,pointerEvents:"none"}}),s.map(d=>ie.createElement(Ee,{key:`${i.id}_${d.id}_indicator`,shape:d,user:i,meta:t,isHovered:!0})))}))}import*as se from"react";var Un=r=>{let e=r.parentElement;for(;e;){if(e===document.body)return document;let{overflowY:t}=window.getComputedStyle(e);if(e.scrollHeight>e.clientHeight&&(t==="auto"||t==="scroll"||t==="overlay"))return e;e=e.parentElement}return document};function Vt(r,e){let{inputs:t,callbacks:n}=R(),o=se.useRef(!1),i=se.useCallback(()=>{var s,a;if(o.current){let d=(s=r.current)==null?void 0:s.getBoundingClientRect();if(d){let l={minX:d.left,maxX:d.left+d.width,minY:d.top,maxY:d.top+d.height,width:d.width,height:d.height};t.bounds=l,e(l),(a=n.onBoundsChange)==null||a.call(n,l)}}else o.current=!0},[r,t,n.onBoundsChange]);se.useEffect(()=>{let s=r.current?Un(r.current):document,a=C.debounce(i,100);return s.addEventListener("scroll",a),window.addEventListener("resize",a),()=>{s.removeEventListener("scroll",a),window.removeEventListener("resize",a)}},[]),se.useEffect(()=>{let s=new ResizeObserver(a=>{t.isPinching||a[0].contentRect&&i()});return r.current&&s.observe(r.current),()=>{s.disconnect()}},[r,t]),se.useEffect(()=>{i()},[r])}function $n({id:r,page:e,pageState:t,assets:n,snapLines:o,eraseLine:i,grid:s,users:a,userId:d,components:l={},meta:c,performanceMode:m,showDashedBrush:p,hideHandles:u,hideBounds:y,hideIndicators:T,hideBindingHandles:v,hideCloneHandles:x,hideResizeHandles:f,hideRotateHandle:L,hideGrid:Y,onBoundsChange:X,hideCursors:S}){var A;let b=D.useRef(null),P=D.useRef(t.camera.zoom);P.current=t.camera.zoom,tt(P,b),Vt(b,X),nt(),Tt(b);let B=D.useRef(null),M=D.useRef(null);lt(M,B,t),bt(m,B),vt();let I=rt();return D.createElement("div",{id:r,className:"tl-container",ref:B},D.createElement("div",g({id:"canvas",className:"tl-absolute tl-canvas",ref:b},I),!Y&&s&&D.createElement(Ct,{grid:s,camera:t.camera}),D.createElement("div",{ref:M,className:"tl-absolute tl-layer","data-testid":"layer"},D.createElement($t,{page:e,pageState:t,assets:n,hideBounds:y,hideIndicators:T,hideHandles:u,hideBindingHandles:v,hideCloneHandles:x,hideResizeHandles:f,hideRotateHandle:L,meta:c}),a&&d&&D.createElement(Ot,{userId:d,users:a,page:e,meta:c}),t.brush&&D.createElement(Pt,{brush:t.brush,dashed:p,zoom:t.camera.zoom}),a&&!S&&D.createElement(At,{userId:d,users:a,Cursor:(A=l==null?void 0:l.Cursor)!=null?A:Rt})),D.createElement(St,{camera:t.camera},i&&D.createElement(Et,{points:i,zoom:t.camera.zoom}),o&&D.createElement(Nt,{snapLines:o}))))}var zt=D.memo($n);import{Vec as ue}from"@tldraw/vec";var Nn=250,H=class{constructor(){E(this,"pointer");E(this,"keyboard");E(this,"keys",{});E(this,"isPinching",!1);E(this,"bounds",{minX:0,maxX:640,minY:0,maxY:480,width:640,height:480});E(this,"pointerUpTime",0);E(this,"activePointer");E(this,"panStart",e=>{var a,d;let{shiftKey:t,ctrlKey:n,metaKey:o,altKey:i}=e,s={target:"wheel",pointerId:((a=this.pointer)==null?void 0:a.pointerId)||0,origin:((d=this.pointer)==null?void 0:d.origin)||[0,0],delta:[0,0],pressure:.5,point:H.getPoint(e,this.bounds),shiftKey:t,ctrlKey:n,metaKey:o,altKey:i,spaceKey:this.keys[" "]};return this.pointer=s,s});E(this,"pan",(e,t)=>{if(!this.pointer||this.pointer.target!=="wheel")return this.panStart(t);let{shiftKey:n,ctrlKey:o,metaKey:i,altKey:s}=t,a=this.pointer,d=H.getPoint(t,this.bounds),l=U(g({},a),{target:"wheel",delta:e,point:d,shiftKey:n,ctrlKey:o,metaKey:i,altKey:s,spaceKey:this.keys[" "]});return this.pointer=l,l});E(this,"keydown",e=>{var s,a;let{shiftKey:t,ctrlKey:n,metaKey:o,altKey:i}=e;return this.keys[e.key]=!0,{point:((s=this.pointer)==null?void 0:s.point)||[0,0],origin:((a=this.pointer)==null?void 0:a.origin)||[0,0],key:e.key,keys:Object.keys(this.keys),shiftKey:t,ctrlKey:n,metaKey:C.isDarwin()?o:n,altKey:i}});E(this,"keyup",e=>{var s,a;let{shiftKey:t,ctrlKey:n,metaKey:o,altKey:i}=e;return delete this.keys[e.key],{point:((s=this.pointer)==null?void 0:s.point)||[0,0],origin:((a=this.pointer)==null?void 0:a.origin)||[0,0],key:e.key,keys:Object.keys(this.keys),shiftKey:t,ctrlKey:n,metaKey:C.isDarwin()?o:n,altKey:i}})}pointerIsValid(e){if("pointerId"in e&&this.activePointer&&this.activePointer!==e.pointerId)return!1;if("touches"in e){let t=e.changedTouches[0];if(this.activePointer&&this.activePointer!==t.identifier)return!1}return!0}touchStart(e,t){let{shiftKey:n,ctrlKey:o,metaKey:i,altKey:s}=e,a=e.changedTouches[0];this.activePointer=a.identifier;let d={target:t,pointerId:a.identifier,origin:H.getPoint(a,this.bounds),delta:[0,0],point:H.getPoint(a,this.bounds),pressure:H.getPressure(a),shiftKey:n,ctrlKey:o,metaKey:C.isDarwin()?i:o,altKey:s,spaceKey:this.keys[" "]};return this.pointer=d,d}touchEnd(e,t){let{shiftKey:n,ctrlKey:o,metaKey:i,altKey:s}=e,a=e.changedTouches[0],d={target:t,pointerId:a.identifier,origin:H.getPoint(a,this.bounds),delta:[0,0],point:H.getPoint(a,this.bounds),pressure:H.getPressure(a),shiftKey:n,ctrlKey:o,metaKey:C.isDarwin()?i:o,altKey:s,spaceKey:this.keys[" "]};return this.pointer=d,this.activePointer=void 0,d}touchMove(e,t){let{shiftKey:n,ctrlKey:o,metaKey:i,altKey:s}=e,a=e.changedTouches[0],d=this.pointer,l=H.getPoint(a,this.bounds),c=(d==null?void 0:d.point)?ue.sub(l,d.point):[0,0],m=U(g({origin:l},d),{target:t,pointerId:a.identifier,point:l,delta:c,pressure:H.getPressure(a),shiftKey:n,ctrlKey:o,metaKey:C.isDarwin()?i:o,altKey:s,spaceKey:this.keys[" "]});return this.pointer=m,m}pointerDown(e,t){let{shiftKey:n,ctrlKey:o,metaKey:i,altKey:s}=e,a=H.getPoint(e,this.bounds);this.activePointer=e.pointerId;let d={target:t,pointerId:e.pointerId,origin:a,point:a,delta:[0,0],pressure:H.getPressure(e),shiftKey:n,ctrlKey:o,metaKey:C.isDarwin()?i:o,altKey:s,spaceKey:this.keys[" "]};return this.pointer=d,d}pointerEnter(e,t){let{shiftKey:n,ctrlKey:o,metaKey:i,altKey:s}=e,a=H.getPoint(e,this.bounds),d={target:t,pointerId:e.pointerId,origin:a,delta:[0,0],point:a,pressure:H.getPressure(e),shiftKey:n,ctrlKey:o,metaKey:C.isDarwin()?i:o,altKey:s,spaceKey:this.keys[" "]};return this.pointer=d,d}pointerMove(e,t){let{shiftKey:n,ctrlKey:o,metaKey:i,altKey:s}=e,a=this.pointer,d=H.getPoint(e,this.bounds),l=(a==null?void 0:a.point)?ue.sub(d,a.point):[0,0],c=U(g({origin:d},a),{target:t,pointerId:e.pointerId,point:d,delta:l,pressure:H.getPressure(e),shiftKey:n,ctrlKey:o,metaKey:C.isDarwin()?i:o,altKey:s,spaceKey:this.keys[" "]});return this.pointer=c,c}pointerUp(e,t){let{shiftKey:n,ctrlKey:o,metaKey:i,altKey:s}=e,a=this.pointer,d=H.getPoint(e,this.bounds),l=(a==null?void 0:a.point)?ue.sub(d,a.point):[0,0];this.activePointer=void 0;let c=U(g({origin:d},a),{target:t,pointerId:e.pointerId,point:d,delta:l,pressure:H.getPressure(e),shiftKey:n,ctrlKey:o,metaKey:C.isDarwin()?i:o,altKey:s,spaceKey:this.keys[" "]});return this.pointer=c,this.pointerUpTime=performance.now(),c}isDoubleClick(){if(!this.pointer)return!1;let{origin:e,point:t}=this.pointer,n=performance.now()-this.pointerUpTime<Nn&&ue.dist(e,t)<4;return n&&(this.activePointer=void 0),n}clear(){this.pointer=void 0}resetDoubleClick(){this.pointerUpTime=0}pinch(e,t){let{shiftKey:n,ctrlKey:o,metaKey:i,altKey:s}=this.keys,a=ue.sub(t,e),d={pointerId:0,target:"pinch",origin:t,delta:a,point:ue.sub(ue.toFixed(e),[this.bounds.minX,this.bounds.minY]),pressure:.5,shiftKey:n,ctrlKey:o,metaKey:C.isDarwin()?i:o,altKey:s,spaceKey:this.keys[" "]};return this.pointer=d,d}reset(){this.pointerUpTime=0,this.pointer=void 0,this.keyboard=void 0,this.activePointer=void 0,this.keys={}}static getPoint(e,t){return[+e.clientX.toFixed(2)-t.minX,+e.clientY.toFixed(2)-t.minY]}static getPressure(e){return"pressure"in e&&+e.pressure.toFixed(2)||.5}static commandKey(){return C.isDarwin()?"\u2318":"Ctrl"}},Cs=new H;var Wn=Object.freeze({});function An(M){var I=M,{id:r="tl",shapeUtils:e,page:t,pageState:n,assets:o=Wn,users:i,userId:s,theme:a,meta:d,snapLines:l,eraseLine:c,grid:m,containerRef:p,performanceMode:u,components:y,hideHandles:T=!1,hideIndicators:v=!1,hideCloneHandles:x=!1,hideBindingHandles:f=!1,hideResizeHandles:L=!1,hideRotateHandles:Y=!1,hideBounds:X=!1,hideGrid:S=!0,showDashedBrush:b=!1,hideCursors:P}=I,B=O(I,["id","shapeUtils","page","pageState","assets","users","userId","theme","meta","snapLines","eraseLine","grid","containerRef","performanceMode","components","hideHandles","hideIndicators","hideCloneHandles","hideBindingHandles","hideResizeHandles","hideRotateHandles","hideBounds","hideGrid","showDashedBrush","hideCursors"]);dt(a,"#"+r);let A=N.useRef(null),J=N.useRef(n);N.useEffect(()=>{J.current=n},[n]);let[Ft,Gt]=N.useState(()=>({callbacks:B,shapeUtils:e,rSelectionBounds:A,rPageState:J,bounds:{minX:0,minY:0,maxX:1/0,maxY:1/0,width:1/0,height:1/0},inputs:new H})),jt=N.useCallback(_t=>{Gt(Zt=>U(g({},Zt),{bounds:_t}))},[]);return N.createElement(Le.Provider,{value:Ft},N.createElement(zt,{id:r,page:t,pageState:n,assets:o,snapLines:l,eraseLine:c,grid:m,users:i,userId:s,externalContainerRef:p,hideBounds:X,hideIndicators:v,hideHandles:T,hideCloneHandles:x,hideBindingHandles:f,hideRotateHandle:Y,hideResizeHandles:L,hideGrid:S,showDashedBrush:b,onBoundsChange:jt,performanceMode:u,components:y,meta:d,hideCursors:P}))}var ks=N.memo(An);import*as me from"react";var Xs=me.memo(me.forwardRef(function(i,o){var s=i,{children:e,className:t=""}=s,n=O(s,["children","className"]);return me.createElement("div",g({ref:o,className:`tl-positioned-div ${t}`,draggable:!1},n),me.createElement("div",{className:"tl-inner-div"},e))}));import{intersectPolygonBounds as On}from"@tldraw/intersect";import*as Ae from"react";var _e=class{constructor(){E(this,"refMap",new Map);E(this,"boundsCache",new WeakMap);E(this,"showCloneHandles",!1);E(this,"hideBounds",!1);E(this,"isStateful",!1);E(this,"shouldRender",(e,t)=>!0);E(this,"getRef",e=>(this.refMap.has(e.id)||this.refMap.set(e.id,Ae.createRef()),this.refMap.get(e.id)));E(this,"hitTestBounds",(e,t)=>{let n=this.getBounds(e),o=w.getRotatedCorners(n,e.rotation);return o.every(i=>w.pointInBounds(i,t))||On(o,t).length>0});E(this,"getRotatedBounds",e=>w.getBoundsFromPoints(w.getRotatedCorners(this.getBounds(e),e.rotation)))}};E(_e,"Component",e=>Ae.forwardRef(e)),E(_e,"Indicator",e=>e);export{Rt as Cursor,Xs as HTMLContainer,H as Inputs,ks as Renderer,te as SVGContainer,Je as SnapPoints,He as TLBoundsCorner,we as TLBoundsEdge,Qe as TLPerformanceMode,_e as TLShapeUtil,C as Utils,Cs as inputs};
/**
 * String.prototype.replaceAll() polyfill
 * https://gomakethings.com/how-to-replace-a-section-of-a-string-with-another-one-with-vanilla-js/
 * @author Chris Ferdinandi
 * @license MIT
 */
//# sourceMappingURL=index.mjs.map