kritzel-stencil 0.4.4 → 0.4.6

package/dist/components/p-Ka7OWbnk.js

@@ -1 +1,2304 @@
-import{p as t,H as s,h as i,d as e,t as h}from"./p-B43upypT.js";import{O as n}from"./p-Dd-pMvlr.js";import{a as r}from"./p-BmyTdQGy.js";class o{static doPolygonsIntersect(t,s){const i=[t.bottomLeft,t.bottomRight,t.topRight,t.topLeft],e=[s.bottomLeft,s.bottomRight,s.topRight,s.topLeft];for(const t of i)if(this.isPointInPolygon(t,e))return!0;for(const t of e)if(this.isPointInPolygon(t,i))return!0;for(let t=0;t<i.length;t++){const s=i[t],h=i[(t+1)%i.length];for(let t=0;t<e.length;t++)if(this.intersectLines(s,h,e[t],e[(t+1)%e.length]))return!0}return!1}static isPointInPolygon(t,s){let i=!1;for(let e=0,h=s.length-1;e<s.length;h=e++){const n=s[e].x,r=s[e].y,o=s[h].y;r>t.y!=o>t.y&&t.x<(s[h].x-n)*(t.y-r)/(o-r)+n&&(i=!i)}return i}static intersectLines(t,s,i,e){const h=(s.x-t.x)*(e.y-i.y)-(s.y-t.y)*(e.x-i.x);if(0===h)return!1;const n=((i.x-t.x)*(e.y-i.y)-(i.y-t.y)*(e.x-i.x))/h,r=-((t.x-i.x)*(s.y-t.y)-(t.y-i.y)*(s.x-t.x))/h;return n>=0&&n<=1&&r>=0&&r<=1}static getLineIntersectionPoint(t,s,i,e){const h=(s.x-t.x)*(e.y-i.y)-(s.y-t.y)*(e.x-i.x);if(0===h)return null;const n=((i.x-t.x)*(e.y-i.y)-(i.y-t.y)*(e.x-i.x))/h,r=-((t.x-i.x)*(s.y-t.y)-(t.y-i.y)*(s.x-t.x))/h;return n>=0&&n<=1&&r>=0&&r<=1?{x:t.x+n*(s.x-t.x),y:t.y+n*(s.y-t.y)}:null}static getLinePolygonIntersection(t,s,i){const e=[i.topLeft,i.topRight,i.bottomRight,i.bottomLeft];let h=null,n=1/0;for(let i=0;i<e.length;i++){const r=this.getLineIntersectionPoint(t,s,e[i],e[(i+1)%e.length]);if(r){const s=Math.sqrt(Math.pow(r.x-t.x,2)+Math.pow(r.y-t.y,2));s<n&&(n=s,h=r)}}return h}static getEllipsePolygonApproximation(t,s,i,e,h=32,n=0){const r=[],o=Math.cos(n),a=Math.sin(n);for(let n=0;n<h;n++){const l=2*Math.PI*n/h,c=i*Math.cos(l),u=e*Math.sin(l);r.push({x:t+c*o-u*a,y:s+c*a+u*o})}return r}static getLinePointsArrayIntersection(t,s,i){let e=null,h=1/0;for(let n=0;n<i.length;n++){const r=this.getLineIntersectionPoint(t,s,i[n],i[(n+1)%i.length]);if(r){const s=Math.sqrt(Math.pow(r.x-t.x,2)+Math.pow(r.y-t.y,2));s<h&&(h=s,e=r)}}return e}static isPointInPolygonPoints(t,s){return this.isPointInPolygon(t,s)}}class a{__class__="KritzelBaseObject";_core;_elementRef;id;workspaceId;x;y;translateX;translateY;height;width;backgroundColor;borderColor;borderWidth=0;opacity=1;padding=0;scale;resizing=!1;rotation=0;markedForRemoval=!1;zIndex=0;userId;isVisible=!0;isSelected=!1;isHovered=!1;isMounted=!1;isEditable=!1;isInteractive=!1;isResizable=!0;isRotatable=!0;get totalWidth(){return this.width+2*this.padding}get totalHeight(){return this.height+2*this.padding}set elementRef(t){this._elementRef=t}get elementRef(){return this._elementRef}get boundingBox(){return{x:this.translateX,y:this.translateY,z:this.scale,width:this.totalWidth/this.scale,height:this.totalHeight/this.scale}}get rotatedBoundingBox(){const t=this.rotatedPolygon,s=[t.topLeft.x,t.topRight.x,t.bottomRight.x,t.bottomLeft.x],i=[t.topLeft.y,t.topRight.y,t.bottomRight.y,t.bottomLeft.y],e=Math.min(...s),h=Math.max(...s),n=Math.min(...i),r=Math.max(...i);return{x:e,y:n,z:this.scale,width:h-e,height:r-n}}get rotatedPolygon(){const t=this.translateX+this.totalWidth/2/this.scale,s=this.translateY+this.totalHeight/2/this.scale,i=this.rotation,e=Math.cos(i),h=Math.sin(i),n=this.translateX,r=this.translateY,o=n+this.totalWidth/this.scale,a=r+this.totalHeight/this.scale,l=(i,n)=>({x:e*(i-t)-h*(n-s)+t,y:h*(i-t)+e*(n-s)+s});return{topLeft:l(n,r),topRight:l(o,r),bottomRight:l(o,a),bottomLeft:l(n,a)}}get minXRotated(){return Math.min(this.rotatedPolygon.topLeft.x,this.rotatedPolygon.topRight.x,this.rotatedPolygon.bottomRight.x,this.rotatedPolygon.bottomLeft.x)}get minYRotated(){return Math.min(this.rotatedPolygon.topLeft.y,this.rotatedPolygon.topRight.y,this.rotatedPolygon.bottomRight.y,this.rotatedPolygon.bottomLeft.y)}get maxXRotated(){return Math.max(this.rotatedPolygon.topLeft.x,this.rotatedPolygon.topRight.x,this.rotatedPolygon.bottomRight.x,this.rotatedPolygon.bottomLeft.x)}get maxYRotated(){return Math.max(this.rotatedPolygon.topLeft.y,this.rotatedPolygon.topRight.y,this.rotatedPolygon.bottomRight.y,this.rotatedPolygon.bottomLeft.y)}get transformationMatrix(){const t=1/this.scale;return`matrix(${t}, 0, 0, ${t}, ${this.translateX}, ${this.translateY})`}get rotationDegrees(){return this.rotation*(180/Math.PI)}get centerX(){return this.translateX+this.totalWidth/2/this.scale}get centerY(){return this.translateY+this.totalHeight/2/this.scale}constructor(){this.id=this.generateId()}static create(t){const s=new a;return s._core=t,s.zIndex=t.store.currentZIndex,s.workspaceId=t.store.state.activeWorkspace.id,s.userId=t.user?.id,s}mount(t){this.isMounted||(this.elementRef=t,this.isMounted=!0)}generateId(){return n.generateUUID()}isInViewport(){const t=this._core.store.state.scale;if(this.boundingBox.width*t*(this.boundingBox.height*t)<.5)return!1;const s=-this._core.store.state.translateX/this._core.store.state.scale,i=-this._core.store.state.translateY/this._core.store.state.scale;return this.rotatedBoundingBox.x<s+this._core.store.state.viewportWidth/this._core.store.state.scale&&this.rotatedBoundingBox.x+this.rotatedBoundingBox.width>s&&this.rotatedBoundingBox.y<i+this._core.store.state.viewportHeight/this._core.store.state.scale&&this.rotatedBoundingBox.y+this.rotatedBoundingBox.height>i}centerInViewport(){const{viewportWidth:t,viewportHeight:s,translateX:i,translateY:e,scale:h}=this._core.store.state,{x:n,y:r,width:o,height:a}=this.rotatedBoundingBox;this.updatePosition(this.translateX+((t/2-i)/h-(n+o/2)),this.translateY+((s/2-e)/h-(r+a/2)))}update(){this._core.store.objects.update(this)}move(t,s,i,e){const h=(s-e)/this._core.store.state.scale;this.translateX+=(t-i)/this._core.store.state.scale,this.translateY+=h,this._core.store.objects.update(this)}resize(t,s,i,e){i<=1||e<=1||(this.width=i,this.height=e,this.translateX=t,this.translateY=s,this._core.store.objects.update(this),this._core.anchorManager.updateAnchorsForObject(this.id))}rotate(t){this.rotation=t,this._core.store.objects.update(this)}clone(){const t=Object.create(Object.getPrototypeOf(this));return Object.assign(t,this),t.id=this.id,t}copy(){const t=Object.create(Object.getPrototypeOf(this));return Object.assign(t,this),t.id=this.generateId(),t.isMounted=!1,t.isSelected=!1,t.isHovered=!1,t.isInteractive=!1,t.resizing=!1,t.markedForRemoval=!1,t.isVisible=!0,t}serialize(){const{_core:t,_elementRef:s,element:i,totalWidth:e,totalHeight:h,isSelected:n,isHovered:r,isMounted:o,isInteractive:a,resizing:l,markedForRemoval:c,isVisible:u,...f}=this;return structuredClone(f)}deserialize(t){return Object.assign(this,t),this.isSelected=!1,this.isHovered=!1,this.isMounted=!1,this.isInteractive=!1,this.resizing=!1,this.markedForRemoval=!1,this.isVisible=!0,"_adjustedPoints"in this&&(this._adjustedPoints=null),"_clipInfo"in this&&(this._clipInfo=null),this}adoptTransientStateFrom(t){}isClass(t){return this.__class__===t}edit(t){}onAfterUpdate(t){}hitTest(t,s){return!0}hitTestPolygon(t){return o.doPolygonsIntersect(this.rotatedPolygon,t)}updatePosition(t,s){this.translateX=t,this.translateY=s,this._core.store.objects.update(this)}}class l{static average(t,s){return(t+s)/2}static degreesToRadians(t){return t*(Math.PI/180)}}var c,u={},f=(c||(c=1,function(t){Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const{PI:s}=Math,i=s+1e-4,e=[1,1];function h(t,s,i,e=t=>t){return t*e(.5-s*(.5-i))}const{min:n}=Math;function r(t,s,i){let e=n(1,s/i);return n(1,t+(n(1,1-e)-t)*(.275*e))}function o(t,s){return[t[0]+s[0],t[1]+s[1]]}function a(t,s,i){return t[0]=s[0]+i[0],t[1]=s[1]+i[1],t}function l(t,s){return[t[0]-s[0],t[1]-s[1]]}function c(t,s,i){return t[0]=s[0]-i[0],t[1]=s[1]-i[1],t}function u(t,s){return[t[0]*s,t[1]*s]}function f(t,s,i){return t[0]=s[0]*i,t[1]=s[1]*i,t}function d(t){return[t[1],-t[0]]}function g(t,s){let i=s[0];return t[0]=s[1],t[1]=-i,t}function p(t,s){return t[0]*s[0]+t[1]*s[1]}function m(t,s){return t[0]===s[0]&&t[1]===s[1]}function M(t,s){let i=t[0]-s[0],e=t[1]-s[1];return i*i+e*e}function x(t){return function(t,s){return[t[0]/s,t[1]/s]}(t,function(t){return Math.hypot(t[0],t[1])}(t))}function y(t,s){return Math.hypot(t[1]-s[1],t[0]-s[0])}function w(t,s,i){let e=Math.sin(i),h=Math.cos(i),n=t[0]-s[0],r=t[1]-s[1];return[n*h-r*e+s[0],n*e+r*h+s[1]]}function b(t,s,i,e){let h=Math.sin(e),n=Math.cos(e),r=s[0]-i[0],o=s[1]-i[1],a=r*h+o*n;return t[0]=r*n-o*h+i[0],t[1]=a+i[1],t}function v(t,s,i){return o(t,u(l(s,t),i))}function k(t,s,i,e){let h=i[1]-s[1];return t[0]=s[0]+(i[0]-s[0])*e,t[1]=s[1]+h*e,t}function $(t,s,i){return o(t,u(s,i))}const z=[0,0],I=[0,0],P=[0,0];function j(t,s){let e=$(t,x(d(l(t,o(t,[1,1])))),-s),h=[],n=1/13;for(let s=n;s<=1;s+=n)h.push(w(e,t,2*i*s));return h}function L(t,s,e){let h=[],n=1/e;for(let e=n;e<=1;e+=n)h.push(w(s,t,i*e));return h}function C(t,s,i){let e=l(s,i),h=u(e,.5),n=u(e,.51);return[l(t,h),l(t,n),o(t,n),o(t,h)]}function A(t,s,e,h){let n=[],r=$(t,s,e),o=1/h;for(let s=o;s<1;s+=o)n.push(w(r,t,3*i*s));return n}function B(t,s,i){return[o(t,u(s,i)),o(t,u(s,.99*i)),l(t,u(s,.99*i)),l(t,u(s,i))]}function _(t,s,i){return!1===t||void 0===t?0:!0===t?Math.max(s,i):t}function R(t,s={}){let{size:e=16,smoothing:n=.5,thinning:u=.5,simulatePressure:m=!0,easing:x=t=>t,start:y={},end:w={},last:v=!1}=s,{cap:$=!0,easing:R=t=>t*(2-t)}=y,{cap:S=!0,easing:T=t=>--t*t*t+1}=w;if(0===t.length||e<=0)return[];let X,Y=t[t.length-1].runningLength,D=_(y.taper,e,Y),O=_(w.taper,e,Y),E=(e*n)**2,V=[],F=[],W=function(t,s,i){return t.slice(0,10).reduce(((t,e)=>{let h=e.pressure;return s&&(h=r(t,e.distance,i)),(t+h)/2}),t[0].pressure)}(t,m,e),H=h(e,u,t[t.length-1].pressure,x),U=t[0].vector,K=t[0].point,Q=K,Z=K,q=Q,G=!1;for(let s=0;s<t.length;s++){let{pressure:n}=t[s],{point:d,vector:y,distance:w,runningLength:v}=t[s],$=s===t.length-1;if(!$&&Y-v<3)continue;u?(m&&(n=r(W,w,e)),H=h(e,u,n,x)):H=e/2,void 0===X&&(X=H);let j=v<D?R(v/D):1,L=Y-v<O?T((Y-v)/O):1;H=Math.max(.01,H*Math.min(j,L));let C=($?t[s]:t[s+1]).vector,A=$?1:p(y,C),B=null!==A&&A<0;if(p(y,U)<0&&!G||B){g(z,U),f(z,z,H);for(let t=0;t<=1;t+=.07692307692307693)c(I,d,z),b(I,I,d,i*t),Z=[I[0],I[1]],V.push(Z),a(P,d,z),b(P,P,d,i*-t),q=[P[0],P[1]],F.push(q);K=Z,Q=q,B&&(G=!0)}else G=!1,$?(g(z,y),f(z,z,H),V.push(l(d,z)),F.push(o(d,z))):(k(z,C,y,A),g(z,z),f(z,z,H),c(I,d,z),Z=[I[0],I[1]],(s<=1||M(K,Z)>E)&&(V.push(Z),K=Z),a(P,d,z),q=[P[0],P[1]],(s<=1||M(Q,q)>E)&&(F.push(q),Q=q),W=n,U=y)}let N=[t[0].point[0],t[0].point[1]],J=t.length>1?[t[t.length-1].point[0],t[t.length-1].point[1]]:o(t[0].point,[1,1]),tt=[],st=[];if(1===t.length){if(!D&&!O||v)return j(N,X||H)}else{D||O&&1===t.length||($?tt.push(...L(N,F[0],13)):tt.push(...C(N,V[0],F[0])));let s=d(function(t){return[-t[0],-t[1]]}(t[t.length-1].vector));O||D&&1===t.length?st.push(J):S?st.push(...A(J,s,H,29)):st.push(...B(J,s,H))}return V.concat(st,F.reverse(),tt)}const S=[0,0];function T(t){return null!=t&&t>=0}function X(t,s={}){let{streamline:i=.5,size:h=16,last:n=!1}=s;if(0===t.length)return[];let r=.15+.85*(1-i),a=Array.isArray(t[0])?t:t.map((({x:t,y:s,pressure:i=.5})=>[t,s,i]));if(2===a.length){let t=a[1];a=a.slice(0,-1);for(let s=1;s<5;s++)a.push(v(a[0],t,s/4))}1===a.length&&(a=[...a,[...o(a[0],e),...a[0].slice(2)]]);let l=[{point:[a[0][0],a[0][1]],pressure:T(a[0][2])?a[0][2]:.25,vector:[...e],distance:0,runningLength:0}],u=!1,f=0,d=l[0],g=a.length-1;for(let t=1;t<a.length;t++){let s=n&&t===g?[a[t][0],a[t][1]]:v(d.point,a[t],r);if(m(d.point,s))continue;let i=y(s,d.point);if(f+=i,t<g&&!u){if(f<h)continue;u=!0}c(S,d.point,s),d={point:s,pressure:T(a[t][2])?a[t][2]:.5,vector:x(S),distance:i,runningLength:f},l.push(d)}return l[0].vector=l[1]?.vector||[0,0],l}function Y(t,s={}){return R(X(t,s),s)}t.default=Y,t.getStroke=Y,t.getStrokeOutlinePoints=R,t.getStrokePoints=X}(u)),u);class d extends a{__class__="KritzelPath";points;d;stroke={light:"none",dark:"none"};strokeWidth;lineSlack=.5;fill;x=0;y=0;height=0;width=0;scale=1;options;isVisible=!0;isDebugInfoVisible=!0;isCompleted=!1;_adjustedPoints=null;get viewBox(){return`0 0 ${this.width} ${this.height}`}constructor(t){super(),this.options=t,this.points=t?.points??[],this.translateX=t?.translateX??0,this.translateY=t?.translateY??0,this.rotation=l.degreesToRadians(t?.rotation??0),this.scale=t?.scale??1,this.strokeWidth=t?.strokeWidth??8,this.fill=t?.fill??{light:"#000000",dark:"#ffffff"},this.d=this.generateSvgPath(),this.updateDimensions()}static create(t,s){const i=new d;return i._core=t,i.id=i.generateId(),i.workspaceId=t.store.state.activeWorkspace.id,i.userId=t.user?.id,i.options=s,i.points=s?.points??[],i.translateX=s?.translateX??0,i.translateY=s?.translateY??0,i.rotation=l.degreesToRadians(s?.rotation??0),i.scale=s?.scale??1,i.strokeWidth=s?.strokeWidth??8,i.fill=s?.fill??{light:"#000000",dark:"#ffffff"},i.opacity=s?.opacity??1,i.zIndex=t.store.currentZIndex,i.d=i.generateSvgPath(),i.updateDimensions(),i}copy(){const t=super.copy();return this.points&&(t.points=this.points.map((t=>[...t]))),t}deserialize(t){const s=super.deserialize(t);return this.d=this.generateSvgPath(),s}resize(t,s,i,e){if(i<=1||e<=1)return;const h=i/this.width,n=e/this.height;if(this.width=i,this.height=e,1===this.points.length){const t=this.points[0],s=Math.max(0,i-this.strokeWidth)/h,r=Math.max(0,e-this.strokeWidth)/n;this.points.push([t[0]+s,t[1]+r])}this.points=this.points.map((([t,s])=>[t*h,s*n])),this.d=this.generateSvgPath(),this.width=Math.max(...this.points.map((t=>t[0])))-Math.min(...this.points.map((t=>t[0])))+this.strokeWidth,this.height=Math.max(...this.points.map((t=>t[1])))-Math.min(...this.points.map((t=>t[1])))+this.strokeWidth,this.x=Math.min(...this.points.map((t=>t[0])))-this.strokeWidth/2,this.y=Math.min(...this.points.map((t=>t[1])))-this.strokeWidth/2,null!==t&&(this.translateX=t),null!==s&&(this.translateY=s),this._adjustedPoints=null,this._core.store.objects.update(this)}rotate(t){this.rotation=t,this._adjustedPoints=null,this._core.store.objects.update(this)}move(t,s,i,e){const h=(s-e)/this._core.store.state.scale;this.translateX+=(t-i)/this._core.store.state.scale,this.translateY+=h,this._adjustedPoints=null,this._core.store.objects.update(this)}hitTest(t,s){const i=this.strokeWidth/this.scale/2;if(null===this._adjustedPoints&&(this._adjustedPoints=this.computeAdjustedPoints()),1===this._adjustedPoints.length){const e=this._adjustedPoints[0];return this.pointToLineSegmentDistance(t,s,e[0],e[1],e[0],e[1])<=i}for(let e=0;e<this._adjustedPoints.length-1;e++){const h=this._adjustedPoints[e],n=this._adjustedPoints[e+1];if(this.pointToLineSegmentDistance(t,s,h[0],h[1],n[0],n[1])<=i)return!0}return!1}hitTestPolygon(t){const s=this.strokeWidth/this.scale/2;null===this._adjustedPoints&&(this._adjustedPoints=this.computeAdjustedPoints());const i=[{x:t.bottomLeft.x,y:t.bottomLeft.y},{x:t.bottomRight.x,y:t.bottomRight.y},{x:t.topRight.x,y:t.topRight.y},{x:t.topLeft.x,y:t.topLeft.y}];for(const[t,s]of this._adjustedPoints)if(o.isPointInPolygon({x:t,y:s},i))return!0;for(const t of i)if(this.hitTest(t.x,t.y))return!0;for(let t=0;t<this._adjustedPoints.length-1;t++){const s={x:this._adjustedPoints[t][0],y:this._adjustedPoints[t][1]},e={x:this._adjustedPoints[t+1][0],y:this._adjustedPoints[t+1][1]};for(let t=0;t<i.length;t++)if(o.intersectLines(s,e,i[t],i[(t+1)%i.length]))return!0}for(let t=0;t<this._adjustedPoints.length-1;t++){const e=this._adjustedPoints[t],h=this._adjustedPoints[t+1];for(let t=0;t<i.length;t++){const n=i[t],r=i[(t+1)%i.length],o=this.pointToLineSegmentDistance(n.x,n.y,e[0],e[1],h[0],h[1]),a=this.pointToLineSegmentDistance(r.x,r.y,e[0],e[1],h[0],h[1]),l=this.pointToLineSegmentDistance(e[0],e[1],n.x,n.y,r.x,r.y),c=this.pointToLineSegmentDistance(h[0],h[1],n.x,n.y,r.x,r.y);if(Math.min(o,a,l,c)<=s)return!0}}return!1}updatePosition(t,s){this.translateX=t,this.translateY=s,this._adjustedPoints=null,this._core.store.objects.update(this)}onAfterUpdate(t){t.includes("strokeWidth")&&(this.d=this.generateSvgPath(),this.updateBoundingBox(),this._adjustedPoints=null)}computeAdjustedPoints(){if(!this.points?.length)return[];const t=this.rotation,s=Math.cos(t),i=Math.sin(t),e=this.points.map((t=>t[0])),h=this.points.map((t=>t[1])),n={x:(Math.min(...e)+Math.max(...e))/2,y:(Math.min(...h)+Math.max(...h))/2},{x:r,y:o}=n;return this.points.map((([t,e])=>{const h=t-r,n=e-o;return[r+h*s-n*i,o+h*i+n*s]})).map((([t,s])=>[Math.abs(t-this.x)/this.scale+this.translateX,Math.abs(s-this.y)/this.scale+this.translateY]))}pointToLineSegmentDistance(t,s,i,e,h,n){const r=h-i,o=n-e,a=r*r+o*o;let l,c,u=-1;0!==a&&(u=((t-i)*r+(s-e)*o)/a),u<0?(l=i,c=e):u>1?(l=h,c=n):(l=i+u*r,c=e+u*o);const f=t-l,d=s-c;return Math.sqrt(f*f+d*d)}updateDimensions(){const t=Math.min(...this.points.map((t=>t[0])))-this.strokeWidth/2,s=Math.min(...this.points.map((t=>t[1])))-this.strokeWidth/2,i=Math.max(...this.points.map((t=>t[0])))+this.strokeWidth/2,e=Math.max(...this.points.map((t=>t[1])))+this.strokeWidth/2;this.width=i-t+this.lineSlack,this.height=e-s+this.lineSlack,this.x=t,this.y=s,this.translateX=(this.x+this.translateX)/this.scale,this.translateY=(this.y+this.translateY)/this.scale}updateBoundingBox(){const t=Math.min(...this.points.map((t=>t[0])))-this.strokeWidth/2,s=Math.min(...this.points.map((t=>t[1])))-this.strokeWidth/2,i=Math.max(...this.points.map((t=>t[0])))+this.strokeWidth/2,e=Math.max(...this.points.map((t=>t[1])))+this.strokeWidth/2;this.width=i-t+this.lineSlack,this.height=e-s+this.lineSlack,this.x=t,this.y=s}generateSvgPath(){const t=this.getStrokeFromPoints(this.points,this.strokeWidth),s=this.points.length?Math.min(...this.points.map((t=>t[0])))-this.strokeWidth/2:0,i=this.points.length?Math.min(...this.points.map((t=>t[1])))-this.strokeWidth/2:0;return this.getSvgPathFromStroke(t,s,i)}getStrokeFromPoints(t,s){return f.getStroke(t,{size:s,thinning:.5,smoothing:.5,streamline:.5,easing:t=>t,simulatePressure:!0,last:!0,start:{cap:!0,taper:0,easing:t=>t},end:{cap:!0,taper:0,easing:t=>t}})}getSvgPathFromStroke(t,s=0,i=0,e=!0){const h=t.length;if(h<4)return"";const n=t[0],r=t[1],o=t[2],a=n[1]-i,c=r[0]-s,u=r[1]-i,f=o[0]-s,d=o[1]-i;let g=`M${(n[0]-s).toFixed(2)},${a.toFixed(2)} Q${c.toFixed(2)},${u.toFixed(2)} ${l.average(c,f).toFixed(2)},${l.average(u,d).toFixed(2)} T`;for(let e=2,n=h-1;e<n;e++){const h=t[e],n=t[e+1],r=h[1]-i,o=n[1]-i;g+=`${l.average(h[0]-s,n[0]-s).toFixed(2)},${l.average(r,o).toFixed(2)} `}return e&&(g+="Z"),g}isLowRes(){if(!this._core)return!1;const t=this._core.store.state.scale;return this.boundingBox.width*t*(this.boundingBox.height*t)<500}getClipPoint(t){const s=this.centerX,i=this.centerY,e=this.strokeWidth/this.scale/2;if(null===this._adjustedPoints&&(this._adjustedPoints=this.computeAdjustedPoints()),this._adjustedPoints.length<1)return null;let h=!0;for(let n=1;n<=32;n++){const r=n/32,o=t.x+(s-t.x)*r,a=t.y+(i-t.y)*r;let l=1/0;if(1===this._adjustedPoints.length){const t=this._adjustedPoints[0],s=o-t[0],i=a-t[1];l=Math.sqrt(s*s+i*i)}else for(let t=0;t<this._adjustedPoints.length-1;t++){const s=this._adjustedPoints[t],i=this._adjustedPoints[t+1],e=this.pointToLineSegmentDistance(o,a,s[0],s[1],i[0],i[1]);e<l&&(l=e)}const c=l<=e;if(h&&c){let h=(n-1)/32,o=r;for(let n=0;n<8;n++){const n=(h+o)/2,r=t.x+(s-t.x)*n,a=t.y+(i-t.y)*n;let l=1/0;if(1===this._adjustedPoints.length){const t=this._adjustedPoints[0],s=r-t[0],i=a-t[1];l=Math.sqrt(s*s+i*i)}else for(let t=0;t<this._adjustedPoints.length-1;t++){const s=this._adjustedPoints[t],i=this._adjustedPoints[t+1],e=this.pointToLineSegmentDistance(r,a,s[0],s[1],i[0],i[1]);e<l&&(l=e)}l<=e?o=n:h=n}const a=(h+o)/2;return{x:t.x+(s-t.x)*a,y:t.y+(i-t.y)*a}}h=!c}return null}}class g extends a{__class__="KritzelLine";startX;startY;endX;endY;controlX;controlY;stroke;strokeWidth;scale=1;options;startAnchor;endAnchor;arrows;isVisible=!0;isDebugInfoVisible=!0;isCompleted=!1;_adjustedPoints=null;_clipInfo=null;get d(){return void 0!==this.controlX&&void 0!==this.controlY?`M ${this.startX} ${this.startY} Q ${this.controlX} ${this.controlY} ${this.endX} ${this.endY}`:`M ${this.startX} ${this.startY} L ${this.endX} ${this.endY}`}get viewBox(){return`${this.x} ${this.y} ${this.width} ${this.height}`}constructor(t){super(),this.options=t,this.startX=t?.startX??0,this.startY=t?.startY??0,this.endX=t?.endX??0,this.endY=t?.endY??0,this.controlX=t?.controlX,this.controlY=t?.controlY,this.translateX=t?.translateX??0,this.translateY=t?.translateY??0,this.rotation=l.degreesToRadians(t?.rotation??0),this.scale=t?.scale??1,this.strokeWidth=t?.strokeWidth??4,this.stroke=t?.stroke??{light:"#000000",dark:"#ffffff"},this.startAnchor=t?.startAnchor,this.endAnchor=t?.endAnchor,this.arrows=t?.arrows,this.updateDimensions()}static create(t,s){const i=new g;return i._core=t,i.id=i.generateId(),i.workspaceId=t.store.state.activeWorkspace.id,i.userId=t.user?.id,i.options=s,i.startX=s?.startX??0,i.startY=s?.startY??0,i.endX=s?.endX??0,i.endY=s?.endY??0,i.controlX=s?.controlX,i.controlY=s?.controlY,i.translateX=s?.translateX??0,i.translateY=s?.translateY??0,i.rotation=l.degreesToRadians(s?.rotation??0),i.scale=s?.scale??1,i.strokeWidth=s?.strokeWidth??4,i.stroke=s?.stroke??{light:"#000000",dark:"#ffffff"},i.opacity=s?.opacity??1,i.startAnchor=s?.startAnchor,i.endAnchor=s?.endAnchor,i.arrows=s?.arrows,i.zIndex=t.store.currentZIndex,i.updateDimensions(),i}resize(t,s,i,e){if(i<=1||e<=1)return;const h=i/this.width,n=e/this.height;this.startX=this.startX*h,this.startY=this.startY*n,this.endX=this.endX*h,this.endY=this.endY*n,void 0!==this.controlX&&void 0!==this.controlY&&(this.controlX=this.controlX*h,this.controlY=this.controlY*n);const{minX:r,minY:o,maxX:a,maxY:l}=this.calculateBoundingBox();this.width=a-r,this.height=l-o,this.x=r,this.y=o,this.translateX=t,this.translateY=s,this._adjustedPoints=null,this._clipInfo=null,this._core.store.objects.update(this),this._core.anchorManager.updateAnchorsForObject(this.id),this.startAnchor&&this._core.anchorManager.updateAnchorsForObject(this.startAnchor.objectId),this.endAnchor&&this._core.anchorManager.updateAnchorsForObject(this.endAnchor.objectId)}rotate(t){this.rotation=t,this._adjustedPoints=null,this._clipInfo=null,this._core.store.objects.update(this)}move(t,s,i,e){const h=(s-e)/this._core.store.state.scale;this.translateX+=(t-i)/this._core.store.state.scale,this.translateY+=h,this.startAnchor&&this._core.anchorManager.updateAnchorsForObject(this.startAnchor.objectId),this.endAnchor&&this._core.anchorManager.updateAnchorsForObject(this.endAnchor.objectId),this._adjustedPoints=null,this._clipInfo=null,this._core.store.objects.update(this)}hitTest(t,s){const i=Math.max(this.strokeWidth,20)/this.scale/2;if(null===this._adjustedPoints&&(this._adjustedPoints=this.computeAdjustedPoints()),void 0!==this.controlX&&void 0!==this.controlY){const e=this.getClipInfo();return this.pointToBezierDistance(t,s,e.start?.t??0,e.end?.t??1)<=i}const e=this.getClipInfo(),h=e.start?[e.start.x,e.start.y]:this._adjustedPoints[0],n=e.end?[e.end.x,e.end.y]:this._adjustedPoints[1];return this.pointToLineSegmentDistance(t,s,h[0],h[1],n[0],n[1])<=i}hitTestPolygon(t){const s=this.strokeWidth/this.scale/2;null===this._adjustedPoints&&(this._adjustedPoints=this.computeAdjustedPoints());const i=this.getClipInfo(),e=[{x:t.bottomLeft.x,y:t.bottomLeft.y},{x:t.bottomRight.x,y:t.bottomRight.y},{x:t.topRight.x,y:t.topRight.y},{x:t.topLeft.x,y:t.topLeft.y}],h=i.start?[i.start.x,i.start.y]:this._adjustedPoints[0],n=i.end?[i.end.x,i.end.y]:this._adjustedPoints[1],r=[h,n];for(const[t,s]of r)if(o.isPointInPolygon({x:t,y:s},e))return!0;for(const t of e)if(this.hitTest(t.x,t.y))return!0;if(void 0!==this.controlX&&void 0!==this.controlY){const t=this._adjustedPoints[0],h=this._adjustedPoints[1],n=this.computeAdjustedControlPoint(),r=i.start?.t??0,a=i.end?.t??1,l=20;for(let i=0;i<=l;i++){const c=r+i/l*(a-r),u=1-c,f=u*u*t[0]+2*u*c*n[0]+c*c*h[0],d=u*u*t[1]+2*u*c*n[1]+c*c*h[1];if(o.isPointInPolygon({x:f,y:d},e))return!0;for(let t=0;t<e.length;t++){const i=e[t],h=e[(t+1)%e.length];if(this.pointToLineSegmentDistance(f,d,i.x,i.y,h.x,h.y)<=s)return!0}}return!1}const a={x:h[0],y:h[1]},l={x:n[0],y:n[1]};for(let t=0;t<e.length;t++){const i=e[t],h=e[(t+1)%e.length];if(o.intersectLines(a,l,i,h))return!0;const n=this.pointToLineSegmentDistance(i.x,i.y,a.x,a.y,l.x,l.y),r=this.pointToLineSegmentDistance(h.x,h.y,a.x,a.y,l.x,l.y),c=this.pointToLineSegmentDistance(a.x,a.y,i.x,i.y,h.x,h.y),u=this.pointToLineSegmentDistance(l.x,l.y,i.x,i.y,h.x,h.y);if(Math.min(n,r,c,u)<=s)return!0}return!1}updatePosition(t,s){this.translateX=t,this.translateY=s,this._adjustedPoints=null,this._clipInfo=null,this._core.store.objects.update(this)}updateEndpoint(t,s,i){"start"===t?(this.startX=s,this.startY=i):(this.endX=s,this.endY=i);const e=this.width,h=this.height,{minX:n,minY:r,maxX:o,maxY:a}=this.calculateBoundingBox(),l=n-this.x,c=r-this.y,u=o-n,f=a-r,d=(u-e)/2,g=(f-h)/2;this.x=n,this.y=r,this.width=u,this.height=f;const p=Math.cos(this.rotation),m=Math.sin(this.rotation),M=l+d,x=c+g,y=M*m+x*p-g;this.translateX+=(M*p-x*m-d)/this.scale,this.translateY+=y/this.scale,this._adjustedPoints=null,this._clipInfo=null,this._core.store.objects.update(this)}updateControlPoint(t,s){this.controlX=t,this.controlY=s;const i=this.width,e=this.height,{minX:h,minY:n,maxX:r,maxY:o}=this.calculateBoundingBox(),a=h-this.x,l=n-this.y,c=r-h,u=o-n,f=(c-i)/2,d=(u-e)/2;this.x=h,this.y=n,this.width=c,this.height=u;const g=Math.cos(this.rotation),p=Math.sin(this.rotation),m=a+f,M=l+d,x=m*p+M*g-d;this.translateX+=(m*g-M*p-f)/this.scale,this.translateY+=x/this.scale,this._adjustedPoints=null,this._clipInfo=null,this._core.store.objects.update(this)}computeAdjustedPoints(){const t=[[this.startX,this.startY],[this.endX,this.endY]],s=this.rotation,i=Math.cos(s),e=Math.sin(s),h=t.map((t=>t[0])),n=t.map((t=>t[1])),r={x:(Math.min(...h)+Math.max(...h))/2,y:(Math.min(...n)+Math.max(...n))/2},{x:o,y:a}=r;return t.map((([t,s])=>{const h=t-o,n=s-a;return[o+h*i-n*e,a+h*e+n*i]})).map((([t,s])=>[(t-this.x)/this.scale+this.translateX,(s-this.y)/this.scale+this.translateY]))}pointToLineSegmentDistance(t,s,i,e,h,n){const r=h-i,o=n-e,a=r*r+o*o;let l,c,u=-1;0!==a&&(u=((t-i)*r+(s-e)*o)/a),u<0?(l=i,c=e):u>1?(l=h,c=n):(l=i+u*r,c=e+u*o);const f=t-l,d=s-c;return Math.sqrt(f*f+d*d)}pointToBezierDistance(t,s,i=0,e=1){null===this._adjustedPoints&&(this._adjustedPoints=this.computeAdjustedPoints());const h=this._adjustedPoints[0],n=this._adjustedPoints[1],r=this.computeAdjustedControlPoint();let o=1/0;for(let a=0;a<=20;a++){const l=i+a/20*(e-i),c=1-l,u=t-(c*c*h[0]+2*c*l*r[0]+l*l*n[0]),f=s-(c*c*h[1]+2*c*l*r[1]+l*l*n[1]),d=Math.sqrt(u*u+f*f);d<o&&(o=d)}return o}getClipInfo(){if(this._clipInfo)return this._clipInfo;const t=this.endAnchor,s={};if(this.startAnchor){const t=this._core.anchorManager.findAnchorTarget(this,"start");if(t){const i=this._core.anchorManager.computeAnchorClipInfo(this,"start",t);i&&(s.start={x:i.worldX,y:i.worldY,t:i.t})}}if(t){const t=this._core.anchorManager.findAnchorTarget(this,"end");if(t){const i=this._core.anchorManager.computeAnchorClipInfo(this,"end",t);i&&(s.end={x:i.worldX,y:i.worldY,t:i.t})}}return this._clipInfo=s,s}computeAdjustedControlPoint(){if(void 0===this.controlX||void 0===this.controlY)return[(this.startX+this.endX)/2,(this.startY+this.endY)/2];const t=this.rotation,s=Math.cos(t),i=Math.sin(t),e=[this.startX,this.endX],h=[this.startY,this.endY],n={x:(Math.min(...e)+Math.max(...e))/2,y:(Math.min(...h)+Math.max(...h))/2},{x:r,y:o}=n,a=this.controlX-r,l=this.controlY-o;return[(r+a*s-l*i-this.x)/this.scale+this.translateX,(o+a*i+l*s-this.y)/this.scale+this.translateY]}get rotatedPolygon(){const t=this.padding,{minX:s,minY:i,maxX:e,maxY:h}=g.calculateBoundingBox(this.startX,this.startY,this.endX,this.endY,this.controlX,this.controlY,this.strokeWidth),n=s-this.x+t,r=i-this.y+t,o=e-this.x+t,a=h-this.y+t,l={x:n,y:r},c={x:o,y:r},u={x:o,y:a},f={x:n,y:a},d=this.totalWidth/2,p=this.totalHeight/2,m=this.rotation,M=Math.cos(m),x=Math.sin(m),y=t=>({x:((t.x-d)*M-(t.y-p)*x+d)/this.scale+this.translateX,y:((t.x-d)*x+(t.y-p)*M+p)/this.scale+this.translateY});return{topLeft:y(l),topRight:y(c),bottomRight:y(u),bottomLeft:y(f)}}static calculateBoundingBox(t,s,i,e,h,n,r){let o=Math.min(t,i),a=Math.min(s,e),l=Math.max(t,i),c=Math.max(s,e);if(void 0!==h&&void 0!==n){const r=t-2*h+i;if(0!==r){const s=(t-h)/r;if(s>0&&s<1){const e=(1-s)*(1-s)*t+2*(1-s)*s*h+s*s*i;o=Math.min(o,e),l=Math.max(l,e)}}const u=s-2*n+e;if(0!==u){const t=(s-n)/u;if(t>0&&t<1){const i=(1-t)*(1-t)*s+2*(1-t)*t*n+t*t*e;a=Math.min(a,i),c=Math.max(c,i)}}}const u=r/2;return{minX:o-u,minY:a-u,maxX:l+u,maxY:c+u}}calculateBoundingBox(){return g.calculateBoundingBox(this.startX,this.startY,this.endX,this.endY,this.controlX,this.controlY,this.strokeWidth)}serialize(){const t=super.serialize();return delete t._adjustedPoints,delete t._clipInfo,t}deserialize(t){const s=super.deserialize(t);return this._adjustedPoints=null,this._clipInfo=null,s}updateDimensions(){const{minX:t,minY:s,maxX:i,maxY:e}=this.calculateBoundingBox();this.width=i-t,this.height=e-s,this.x=t,this.y=s,this.translateX=(this.x+this.translateX)/this.scale,this.translateY=(this.y+this.translateY)/this.scale}get startMarkerId(){return`arrow-start-${this.id}`}get endMarkerId(){return`arrow-end-${this.id}`}getArrowSize(t){const s="start"===t?this.arrows?.start:this.arrows?.end;return s?.size??3*this.strokeWidth}getArrowFill(t){const s="start"===t?this.arrows?.start:this.arrows?.end;return r.resolveThemeColor(s?.fill??this.stroke)}getArrowPath(t="triangle"){switch(t){case"triangle":default:return"M 0 0 L 10 5 L 0 10 z";case"open":return"M 0 0 L 10 5 L 0 10";case"diamond":return"M 0 5 L 5 0 L 10 5 L 5 10 z";case"circle":return"M 5,0 A 5,5 0 1,1 5,10 A 5,5 0 1,1 5,0"}}get hasStartArrow(){return!0===this.arrows?.start?.enabled}get hasEndArrow(){return!0===this.arrows?.end?.enabled}}const p=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}core;showEdgeIndicators=!0;edgeIndicatorPadding=8;remoteCursors=new Map;objectVersion=0;cleanupIntervalId;objectChangeRafId=null;removeAwarenessChangeListener;removeObjectsChangeListener;componentDidLoad(){this.removeAwarenessChangeListener=this.core.store.objects?.onAwarenessChange((t=>{this.handleAwarenessChange(t)})),this.removeObjectsChangeListener=this.core.store.objects?.onObjectsChange((()=>{this.handleRemoteObjectChange()})),this.cleanupIntervalId=setInterval((()=>{this.cleanupStaleCursors()}),3e3),this.cleanupIntervalId&&"function"==typeof this.cleanupIntervalId.unref&&this.cleanupIntervalId.unref()}disconnectedCallback(){this.removeAwarenessChangeListener&&(this.removeAwarenessChangeListener(),this.removeAwarenessChangeListener=void 0),this.removeObjectsChangeListener&&(this.removeObjectsChangeListener(),this.removeObjectsChangeListener=void 0),this.cleanupIntervalId&&"function"==typeof globalThis.clearInterval&&(globalThis.clearInterval(this.cleanupIntervalId),this.cleanupIntervalId=void 0),null!==this.objectChangeRafId&&"function"==typeof globalThis.cancelAnimationFrame&&(globalThis.cancelAnimationFrame(this.objectChangeRafId),this.objectChangeRafId=null)}handleAwarenessChange(t){const s=this.core.store.objects?.localClientId,i=Date.now(),e=new Map(this.remoteCursors),h=new Set;t.forEach(((t,n)=>{if(n===s)return;if(!t.user)return;h.add(n);const r=t.user,o=t.cursor,a=t.activeObjectId||null,l=t.selectionBox||null,c=e.get(n);e.set(n,{clientId:n,user:r,cursor:o,activeObjectId:a,selectionBox:l,lastUpdated:i,lastCursorMove:!c||!c.cursor!=!o||o&&c.cursor&&(o.x!==c.cursor.x||o.y!==c.cursor.y)?i:c?.lastCursorMove??i})}));for(const t of e.keys())h.has(t)||e.delete(t);this.remoteCursors=e}cleanupStaleCursors(){const t=Date.now();let s=!1;const i=new Map(this.remoteCursors);for(const[e,h]of i)t-h.lastUpdated>3e4?(i.delete(e),s=!0):!s&&t-h.lastCursorMove>1e4&&(s=!0);s&&(this.remoteCursors=i)}isStale(t){return Date.now()-t.lastCursorMove>1e4}hasActiveDrawingCursors(){for(const t of this.remoteCursors.values())if(t.activeObjectId)return!0;return!1}handleRemoteObjectChange(){this.hasActiveDrawingCursors()&&null===this.objectChangeRafId&&(this.objectChangeRafId=requestAnimationFrame((()=>{this.objectChangeRafId=null,this.objectVersion++})))}getActiveObjectTip(t){const s=this.core.store.objects?.findById(t);if(!s)return null;if(s instanceof d&&!s.isCompleted){const t=s.points[s.points.length-1];return t?{x:(t[0]-s.x)/s.scale+s.translateX,y:(t[1]-s.y)/s.scale+s.translateY}:null}return s instanceof g&&!s.isCompleted?{x:(s.endX-s.x)/s.scale+s.translateX,y:(s.endY-s.y)/s.scale+s.translateY}:null}worldToScreen(t,s){const{scale:i,translateX:e,translateY:h}=this.core.store.state;return{x:t*i+e,y:s*i+h}}isInViewport(t,s){const{viewportWidth:i,viewportHeight:e}=this.core.store.state;return t>=0&&t<=i&&s>=0&&s<=e}clampToEdge(t,s){const{viewportWidth:i,viewportHeight:e}=this.core.store.state,h=this.edgeIndicatorPadding,n=Math.max(h,Math.min(i-h,t)),r=Math.max(h,Math.min(e-h,s)),o=n-h,a=i-h-n,l=r-h;let c="top";const u=Math.min(o,a,l,e-h-r);return c=u===o?"left":u===a?"right":u===l?"top":"bottom",{x:n,y:r,angle:Math.atan2(s-r,t-n),edge:c}}getUserDisplayName(t){return t.displayName?t.displayName:t.firstName||t.lastName?[t.firstName,t.lastName].filter(Boolean).join(" "):"Unknown"}getInitials(t){const s=t.trim().split(/\s+/);return 0===s.length||1===s.length&&s[0].length<=1?t:1===s.length?s[0][0].toUpperCase():(s[0][0]+s[s.length-1][0]).toUpperCase()}render(){const t=Array.from(this.remoteCursors.values());return i(e,{key:"9be6694250bafe011be27301d1c7a53fc7957657"},t.map((t=>{if(!t.cursor)return null;let s,i=!1;if(t.activeObjectId){const e=this.getActiveObjectTip(t.activeObjectId);e?(i=!0,s=this.worldToScreen(e.x,e.y)):s=this.worldToScreen(t.cursor.x,t.cursor.y)}else s=this.worldToScreen(t.cursor.x,t.cursor.y);const e=this.isInViewport(s.x,s.y),h=this.isStale(t),n=t.user.color||"#6B7280";return e?this.renderCursor(t,s.x,s.y,n,h,i):this.showEdgeIndicators?this.renderEdgeIndicator(t,s.x,s.y,n,h,i):null})),t.map((t=>{if(!t.selectionBox)return null;const s=t.user.color||"#6B7280",e=t.selectionBox,h=this.worldToScreen(e.x,e.y),{scale:n}=this.core.store.state;return i("div",{key:`selection-box-${t.clientId}`,class:"remote-selection-box",style:{transform:`translate(${h.x}px, ${h.y}px)`,width:e.width*n+"px",height:e.height*n+"px",backgroundColor:`color-mix(in srgb, ${s} 20%, transparent)`,borderColor:`color-mix(in srgb, ${s} 50%, transparent)`}})})))}renderCursor(t,s,e,h,n,r){return i("div",{key:`cursor-${t.clientId}`,class:{"awareness-cursor":!0,stale:n,"tracking-object":r},style:{transform:`translate(${s}px, ${e}px)`}},i("svg",{class:"cursor-arrow",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},i("path",{d:"M5 3L19 12L12 13L9 20L5 3Z",fill:h,stroke:"#ffffff","stroke-width":"1.5","stroke-linejoin":"round"})),i("span",{class:"cursor-label",style:{backgroundColor:h}},this.getUserDisplayName(t.user)))}renderEdgeIndicator(t,s,e,h,n,r){const o=this.clampToEdge(s,e),a=180*o.angle/Math.PI+90;let l=0,c=0;"left"===o.edge?l=20:"right"===o.edge?l=-20:"top"===o.edge?c=20:"bottom"===o.edge&&(c=-20);const u=this.getUserDisplayName(t.user);return i("div",{key:`edge-${t.clientId}`,class:{"edge-indicator":!0,stale:n,"tracking-object":r},style:{transform:`translate(${o.x}px, ${o.y}px)`}},i("svg",{class:{"edge-arrow":!0,stale:n},width:"16",height:"16",viewBox:"0 0 16 16",style:{transform:`rotate(${a}deg)`}},i("path",{d:"M8 1L14 13H2L8 1Z",fill:h,stroke:"#ffffff","stroke-width":"1.5","stroke-linejoin":"round"})),i("span",{class:"edge-label",style:{backgroundColor:h,transform:`translate(${l}px, ${c}px)`}},this.getInitials(u)))}static get style(){return":host{display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:1}.awareness-cursor{position:absolute;top:0;left:0;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,               opacity 300ms ease;will-change:transform}.awareness-cursor.stale{opacity:0}.awareness-cursor.tracking-object{transition-duration:0ms}.cursor-arrow{filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}.cursor-label{position:absolute;left:16px;top:16px;white-space:nowrap;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;user-select:none}.edge-indicator{position:absolute;top:-12px;left:-12px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,               opacity 300ms ease;will-change:transform;pointer-events:auto;user-select:none;cursor:pointer}.edge-indicator.stale{opacity:0}.edge-indicator.tracking-object{transition-duration:0ms}.edge-arrow{position:absolute;filter:drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));transition:opacity 300ms ease}.edge-arrow.stale{opacity:0}.edge-label{position:absolute;white-space:nowrap;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;opacity:0;transform-origin:center;transition:opacity 150ms ease}.edge-indicator:hover .edge-label{opacity:1}.remote-selection-box{position:absolute;top:0;left:0;border-width:2px;border-style:solid;pointer-events:none;will-change:transform, width, height;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,               width var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,               height var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out}"}},[513,"kritzel-awareness-cursors",{core:[16],showEdgeIndicators:[4,"show-edge-indicators"],edgeIndicatorPadding:[2,"edge-indicator-padding"],remoteCursors:[32],objectVersion:[32]}]);function m(){"undefined"!=typeof customElements&&["kritzel-awareness-cursors"].forEach((t=>{"kritzel-awareness-cursors"===t&&(customElements.get(h(t))||customElements.define(h(t),p))}))}export{a as K,d as a,g as b,p as c,m as d,l as e,o as f}
+import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-B43upypT.js';
+import { O as ObjectHelper } from './p-Dd-pMvlr.js';
+import { a as KritzelColorHelper } from './p-BmyTdQGy.js';
+
+class KritzelGeometryHelper {
+    static doPolygonsIntersect(polygon1, polygon2) {
+        // 1. Convert polygons to array of points for easier processing
+        const points1 = [polygon1.bottomLeft, polygon1.bottomRight, polygon1.topRight, polygon1.topLeft];
+        const points2 = [polygon2.bottomLeft, polygon2.bottomRight, polygon2.topRight, polygon2.topLeft];
+        // 2. Check if any point of polygon1 is inside polygon2
+        for (const point of points1) {
+            if (this.isPointInPolygon(point, points2)) {
+                return true;
+            }
+        }
+        // 3. Check if any point of polygon2 is inside polygon1
+        for (const point of points2) {
+            if (this.isPointInPolygon(point, points1)) {
+                return true;
+            }
+        }
+        // 4. Check for edge intersections (more complex)
+        for (let i = 0; i < points1.length; i++) {
+            const p1a = points1[i];
+            const p1b = points1[(i + 1) % points1.length]; // Wrap around to the first point
+            for (let j = 0; j < points2.length; j++) {
+                const p2a = points2[j];
+                const p2b = points2[(j + 1) % points2.length];
+                if (this.intersectLines(p1a, p1b, p2a, p2b)) {
+                    return true;
+                }
+            }
+        }
+        return false; // No intersection found
+    }
+    static isPointInPolygon(point, polygon) {
+        let inside = false;
+        for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+            const xi = polygon[i].x, yi = polygon[i].y;
+            const xj = polygon[j].x, yj = polygon[j].y;
+            const intersect = yi > point.y !== yj > point.y && point.x < ((xj - xi) * (point.y - yi)) / (yj - yi) + xi;
+            if (intersect)
+                inside = !inside;
+        }
+        return inside;
+    }
+    static intersectLines(p1a, p1b, p2a, p2b) {
+        const det = (p1b.x - p1a.x) * (p2b.y - p2a.y) - (p1b.y - p1a.y) * (p2b.x - p2a.x);
+        if (det === 0) {
+            return false; // Lines are parallel
+        }
+        const t = ((p2a.x - p1a.x) * (p2b.y - p2a.y) - (p2a.y - p1a.y) * (p2b.x - p2a.x)) / det;
+        const u = -((p1a.x - p2a.x) * (p1b.y - p1a.y) - (p1a.y - p2a.y) * (p1b.x - p1a.x)) / det;
+        return t >= 0 && t <= 1 && u >= 0 && u <= 1;
+    }
+    /**
+     * Finds the intersection point between a line segment and a line segment.
+     * Returns the intersection point or null if no intersection.
+     */
+    static getLineIntersectionPoint(p1a, p1b, p2a, p2b) {
+        const det = (p1b.x - p1a.x) * (p2b.y - p2a.y) - (p1b.y - p1a.y) * (p2b.x - p2a.x);
+        if (det === 0) {
+            return null; // Lines are parallel
+        }
+        const t = ((p2a.x - p1a.x) * (p2b.y - p2a.y) - (p2a.y - p1a.y) * (p2b.x - p2a.x)) / det;
+        const u = -((p1a.x - p2a.x) * (p1b.y - p1a.y) - (p1a.y - p2a.y) * (p1b.x - p1a.x)) / det;
+        if (t >= 0 && t <= 1 && u >= 0 && u <= 1) {
+            return {
+                x: p1a.x + t * (p1b.x - p1a.x),
+                y: p1a.y + t * (p1b.y - p1a.y)
+            };
+        }
+        return null;
+    }
+    /**
+     * Finds the closest intersection point between a line segment (from lineStart to lineEnd)
+     * and a polygon. Returns the intersection point closest to lineStart, or null if no intersection.
+     */
+    static getLinePolygonIntersection(lineStart, lineEnd, polygon) {
+        const points = [polygon.topLeft, polygon.topRight, polygon.bottomRight, polygon.bottomLeft];
+        let closestIntersection = null;
+        let closestDistance = Infinity;
+        for (let i = 0; i < points.length; i++) {
+            const edgeStart = points[i];
+            const edgeEnd = points[(i + 1) % points.length];
+            const intersection = this.getLineIntersectionPoint(lineStart, lineEnd, edgeStart, edgeEnd);
+            if (intersection) {
+                const distance = Math.sqrt(Math.pow(intersection.x - lineStart.x, 2) +
+                    Math.pow(intersection.y - lineStart.y, 2));
+                if (distance < closestDistance) {
+                    closestDistance = distance;
+                    closestIntersection = intersection;
+                }
+            }
+        }
+        return closestIntersection;
+    }
+    /**
+     * Generates a polygon approximation of an ellipse.
+     * @param centerX - X coordinate of ellipse center
+     * @param centerY - Y coordinate of ellipse center
+     * @param rx - Horizontal radius
+     * @param ry - Vertical radius
+     * @param segments - Number of segments (more = smoother approximation)
+     * @param rotation - Optional rotation angle in radians
+     */
+    static getEllipsePolygonApproximation(centerX, centerY, rx, ry, segments = 32, rotation = 0) {
+        const points = [];
+        const cos = Math.cos(rotation);
+        const sin = Math.sin(rotation);
+        for (let i = 0; i < segments; i++) {
+            const angle = (2 * Math.PI * i) / segments;
+            // Point on unrotated ellipse
+            const px = rx * Math.cos(angle);
+            const py = ry * Math.sin(angle);
+            // Apply rotation around center
+            const rotatedX = centerX + px * cos - py * sin;
+            const rotatedY = centerY + px * sin + py * cos;
+            points.push({ x: rotatedX, y: rotatedY });
+        }
+        return points;
+    }
+    /**
+     * Finds the closest intersection point between a line segment and a polygon
+     * defined as an array of points. Returns the intersection closest to lineStart,
+     * or null if no intersection.
+     */
+    static getLinePointsArrayIntersection(lineStart, lineEnd, polygonPoints) {
+        let closestIntersection = null;
+        let closestDistance = Infinity;
+        for (let i = 0; i < polygonPoints.length; i++) {
+            const edgeStart = polygonPoints[i];
+            const edgeEnd = polygonPoints[(i + 1) % polygonPoints.length];
+            const intersection = this.getLineIntersectionPoint(lineStart, lineEnd, edgeStart, edgeEnd);
+            if (intersection) {
+                const distance = Math.sqrt(Math.pow(intersection.x - lineStart.x, 2) +
+                    Math.pow(intersection.y - lineStart.y, 2));
+                if (distance < closestDistance) {
+                    closestDistance = distance;
+                    closestIntersection = intersection;
+                }
+            }
+        }
+        return closestIntersection;
+    }
+    /**
+     * Checks if a point is inside a polygon defined as an array of points.
+     * This is a convenience wrapper that works with arbitrary polygon point arrays.
+     */
+    static isPointInPolygonPoints(point, polygonPoints) {
+        return this.isPointInPolygon(point, polygonPoints);
+    }
+}
+
+/**
+ * Base class for all objects that can be rendered on the Kritzel canvas.
+ * Provides common functionality for positioning, transformation, hit testing,
+ * serialization, and lifecycle management.
+ * @template T - The type of the underlying DOM element (HTMLElement or SVGElement)
+ */
+class KritzelBaseObject {
+    __class__ = 'KritzelBaseObject';
+    _core;
+    _elementRef;
+    id;
+    workspaceId;
+    x;
+    y;
+    translateX;
+    translateY;
+    height;
+    width;
+    backgroundColor;
+    borderColor;
+    borderWidth = 0;
+    opacity = 1;
+    padding = 0;
+    scale;
+    resizing = false;
+    rotation = 0;
+    markedForRemoval = false;
+    zIndex = 0;
+    userId;
+    isVisible = true;
+    isSelected = false;
+    isHovered = false;
+    isMounted = false;
+    isEditable = false;
+    isInteractive = false;
+    isResizable = true;
+    isRotatable = true;
+    /**
+     * Gets the total width of the object including padding.
+     * @returns The width plus double the padding value
+     */
+    get totalWidth() {
+        return this.width + this.padding * 2;
+    }
+    /**
+     * Gets the total height of the object including padding.
+     * @returns The height plus double the padding value
+     */
+    get totalHeight() {
+        return this.height + this.padding * 2;
+    }
+    /**
+     * Sets the underlying DOM element reference for this object.
+     * @param element - The DOM element to associate with this object
+     */
+    set elementRef(element) {
+        this._elementRef = element;
+    }
+    /**
+     * Gets the underlying DOM element reference for this object.
+     * @returns The associated DOM element
+     */
+    get elementRef() {
+        return this._elementRef;
+    }
+    /**
+     * Gets the axis-aligned bounding box of the object without rotation.
+     * @returns The bounding box with position, scale, and dimensions
+     */
+    get boundingBox() {
+        return {
+            x: this.translateX,
+            y: this.translateY,
+            z: this.scale,
+            width: this.totalWidth / this.scale,
+            height: this.totalHeight / this.scale,
+        };
+    }
+    /**
+     * Gets the axis-aligned bounding box that encompasses the rotated object.
+     * Calculates the smallest rectangle that contains all four rotated corners.
+     * @returns The bounding box accounting for rotation
+     */
+    get rotatedBoundingBox() {
+        const polygon = this.rotatedPolygon;
+        const xValues = [polygon.topLeft.x, polygon.topRight.x, polygon.bottomRight.x, polygon.bottomLeft.x];
+        const yValues = [polygon.topLeft.y, polygon.topRight.y, polygon.bottomRight.y, polygon.bottomLeft.y];
+        const minX = Math.min(...xValues);
+        const maxX = Math.max(...xValues);
+        const minY = Math.min(...yValues);
+        const maxY = Math.max(...yValues);
+        return {
+            x: minX,
+            y: minY,
+            z: this.scale,
+            width: maxX - minX,
+            height: maxY - minY,
+        };
+    }
+    /**
+     * Gets the four corners of the object as a polygon, accounting for rotation.
+     * Uses optimized trigonometric calculations with precomputed cos/sin values.
+     * @returns A polygon with topLeft, topRight, bottomRight, and bottomLeft coordinates
+     */
+    get rotatedPolygon() {
+        const cx = this.translateX + this.totalWidth / 2 / this.scale;
+        const cy = this.translateY + this.totalHeight / 2 / this.scale;
+        const angle = this.rotation;
+        // Optimization: Precomputes cos/sin once
+        const cos = Math.cos(angle);
+        const sin = Math.sin(angle);
+        const adjustedWidth = this.totalWidth / this.scale;
+        const adjustedHeight = this.totalHeight / this.scale;
+        const x1 = this.translateX;
+        const y1 = this.translateY;
+        const x2 = x1 + adjustedWidth;
+        const y2 = y1 + adjustedHeight;
+        // Helper to rotate a point around center
+        const rotate = (x, y) => ({
+            x: cos * (x - cx) - sin * (y - cy) + cx,
+            y: sin * (x - cx) + cos * (y - cy) + cy,
+        });
+        return {
+            topLeft: rotate(x1, y1),
+            topRight: rotate(x2, y1),
+            bottomRight: rotate(x2, y2),
+            bottomLeft: rotate(x1, y2),
+        };
+    }
+    /**
+     * Gets the minimum X coordinate among all rotated corners.
+     * @returns The leftmost X coordinate of the rotated object
+     */
+    get minXRotated() {
+        const corners = [this.rotatedPolygon.topLeft.x, this.rotatedPolygon.topRight.x, this.rotatedPolygon.bottomRight.x, this.rotatedPolygon.bottomLeft.x];
+        return Math.min(...corners);
+    }
+    /**
+     * Gets the minimum Y coordinate among all rotated corners.
+     * @returns The topmost Y coordinate of the rotated object
+     */
+    get minYRotated() {
+        const corners = [this.rotatedPolygon.topLeft.y, this.rotatedPolygon.topRight.y, this.rotatedPolygon.bottomRight.y, this.rotatedPolygon.bottomLeft.y];
+        return Math.min(...corners);
+    }
+    /**
+     * Gets the maximum X coordinate among all rotated corners.
+     * @returns The rightmost X coordinate of the rotated object
+     */
+    get maxXRotated() {
+        const corners = [this.rotatedPolygon.topLeft.x, this.rotatedPolygon.topRight.x, this.rotatedPolygon.bottomRight.x, this.rotatedPolygon.bottomLeft.x];
+        return Math.max(...corners);
+    }
+    /**
+     * Gets the maximum Y coordinate among all rotated corners.
+     * @returns The bottommost Y coordinate of the rotated object
+     */
+    get maxYRotated() {
+        const corners = [this.rotatedPolygon.topLeft.y, this.rotatedPolygon.topRight.y, this.rotatedPolygon.bottomRight.y, this.rotatedPolygon.bottomLeft.y];
+        return Math.max(...corners);
+    }
+    /**
+     * Gets the CSS transformation matrix string for positioning and scaling.
+     * @returns A CSS matrix() function string combining scale and translation
+     */
+    get transformationMatrix() {
+        const scale = 1 / this.scale;
+        const translateX = this.translateX;
+        const translateY = this.translateY;
+        return `matrix(${scale}, 0, 0, ${scale}, ${translateX}, ${translateY})`;
+    }
+    /**
+     * Gets the rotation angle converted from radians to degrees.
+     * @returns The rotation angle in degrees
+     */
+    get rotationDegrees() {
+        return this.rotation * (180 / Math.PI);
+    }
+    /**
+     * Gets the X coordinate of the object's center point.
+     * @returns The center X position in world coordinates
+     */
+    get centerX() {
+        return this.translateX + this.totalWidth / 2 / this.scale;
+    }
+    /**
+     * Gets the Y coordinate of the object's center point.
+     * @returns The center Y position in world coordinates
+     */
+    get centerY() {
+        return this.translateY + this.totalHeight / 2 / this.scale;
+    }
+    /**
+     * Creates a new KritzelBaseObject instance with a generated unique ID.
+     */
+    constructor() {
+        this.id = this.generateId();
+    }
+    /**
+     * Factory method to create a new KritzelBaseObject with core context.
+     * Automatically assigns the current z-index and active workspace ID.
+     * @param core - The KritzelCore instance providing context and state
+     * @returns A new KritzelBaseObject instance configured with core context
+     */
+    static create(core) {
+        const object = new KritzelBaseObject();
+        object._core = core;
+        object.zIndex = core.store.currentZIndex;
+        object.workspaceId = core.store.state.activeWorkspace.id;
+        object.userId = core.user?.id;
+        return object;
+    }
+    /**
+     * Mounts the object to a DOM element. Only executes once; subsequent calls are ignored.
+     * Sets the element reference and marks the object as mounted.
+     * @param element - The DOM element to mount this object to
+     */
+    mount(element) {
+        if (this.isMounted) {
+            return;
+        }
+        this.elementRef = element;
+        this.isMounted = true;
+    }
+    /**
+     * Generates a unique identifier for the object.
+     * @returns A UUID string
+     */
+    generateId() {
+        return ObjectHelper.generateUUID();
+    }
+    /**
+     * Checks whether the object is currently visible within the viewport.
+     * Objects smaller than 0.5 square pixels (when scaled) are considered invisible.
+     * Uses the rotated bounding box for accurate intersection testing.
+     * @returns True if the object intersects with the visible viewport area
+     */
+    isInViewport() {
+        const viewportScale = this._core.store.state.scale;
+        const scaledWidth = this.boundingBox.width * viewportScale;
+        const scaledHeight = this.boundingBox.height * viewportScale;
+        if (scaledWidth * scaledHeight < 0.5) {
+            return false;
+        }
+        const viewportBounds = {
+            x: -this._core.store.state.translateX / this._core.store.state.scale,
+            y: -this._core.store.state.translateY / this._core.store.state.scale,
+            width: this._core.store.state.viewportWidth / this._core.store.state.scale,
+            height: this._core.store.state.viewportHeight / this._core.store.state.scale,
+        };
+        return (this.rotatedBoundingBox.x < viewportBounds.x + viewportBounds.width &&
+            this.rotatedBoundingBox.x + this.rotatedBoundingBox.width > viewportBounds.x &&
+            this.rotatedBoundingBox.y < viewportBounds.y + viewportBounds.height &&
+            this.rotatedBoundingBox.y + this.rotatedBoundingBox.height > viewportBounds.y);
+    }
+    /**
+     * Moves the object to the center of the current viewport.
+     * Calculates the offset needed to align the object's center with the viewport's center.
+     */
+    centerInViewport() {
+        const { viewportWidth, viewportHeight, translateX: viewportTranslateX, translateY: viewportTranslateY, scale: viewportScale } = this._core.store.state;
+        const { x, y, width, height } = this.rotatedBoundingBox;
+        const objectCenterX = x + width / 2;
+        const objectCenterY = y + height / 2;
+        const targetCenterX = (viewportWidth / 2 - viewportTranslateX) / viewportScale;
+        const targetCenterY = (viewportHeight / 2 - viewportTranslateY) / viewportScale;
+        const deltaX = targetCenterX - objectCenterX;
+        const deltaY = targetCenterY - objectCenterY;
+        this.updatePosition(this.translateX + deltaX, this.translateY + deltaY);
+    }
+    /**
+     * Notifies the store that this object has been updated.
+     * Triggers a re-render of the object in the canvas.
+     */
+    update() {
+        this._core.store.objects.update(this);
+    }
+    /**
+     * Moves the object based on the delta between start and end coordinates.
+     * The movement is scaled according to the current viewport scale.
+     * @param startX - The starting X coordinate in screen space
+     * @param startY - The starting Y coordinate in screen space
+     * @param endX - The ending X coordinate in screen space
+     * @param endY - The ending Y coordinate in screen space
+     */
+    move(startX, startY, endX, endY) {
+        const deltaX = (startX - endX) / this._core.store.state.scale;
+        const deltaY = (startY - endY) / this._core.store.state.scale;
+        this.translateX += deltaX;
+        this.translateY += deltaY;
+        this._core.store.objects.update(this);
+    }
+    /**
+     * Resizes the object to new dimensions and position.
+     * Ignores resize requests that would make the object smaller than 1x1 pixels.
+     * Also updates any lines anchored to this object after resizing.
+     * @param x - The new X position (translateX)
+     * @param y - The new Y position (translateY)
+     * @param width - The new width (must be > 1)
+     * @param height - The new height (must be > 1)
+     */
+    resize(x, y, width, height) {
+        if (width <= 1 || height <= 1) {
+            return;
+        }
+        this.width = width;
+        this.height = height;
+        this.translateX = x;
+        this.translateY = y;
+        this._core.store.objects.update(this);
+        // Update any lines that are anchored to this object (after position is updated)
+        this._core.anchorManager.updateAnchorsForObject(this.id);
+    }
+    /**
+     * Sets the rotation angle of the object.
+     * @param value - The rotation angle in radians
+     */
+    rotate(value) {
+        this.rotation = value;
+        this._core.store.objects.update(this);
+    }
+    /**
+     * Creates a shallow clone of this object with the same ID.
+     * The clone shares the same prototype and copies all properties.
+     * @returns A new instance with identical properties including the same ID
+     */
+    clone() {
+        const clone = Object.create(Object.getPrototypeOf(this));
+        Object.assign(clone, this);
+        clone.id = this.id;
+        return clone;
+    }
+    /**
+     * Creates a copy of this object with a new unique ID.
+     * Unlike clone(), this creates an independent object suitable for duplication.
+     * The copied object is not mounted by default.
+     * @returns A new instance with copied properties and a new unique ID
+     */
+    copy() {
+        const copiedObject = Object.create(Object.getPrototypeOf(this));
+        Object.assign(copiedObject, this);
+        copiedObject.id = this.generateId();
+        copiedObject.isMounted = false;
+        copiedObject.isSelected = false;
+        copiedObject.isHovered = false;
+        copiedObject.isInteractive = false;
+        copiedObject.resizing = false;
+        copiedObject.markedForRemoval = false;
+        copiedObject.isVisible = true;
+        return copiedObject;
+    }
+    /**
+     * Serializes the object to a plain JavaScript object for persistence.
+     * Excludes internal references (_core, _elementRef) and computed properties.
+     * Subclasses should override to handle domain-specific serialization (e.g., HTML elements).
+     * @returns A serializable object containing all persistent properties
+     */
+    serialize() {
+        const { _core, _elementRef, element, totalWidth, totalHeight, isSelected, isHovered, isMounted, isInteractive, resizing, markedForRemoval, isVisible, ...remainingProps } = this;
+        // No longer clone raw elements—let subclasses handle serializable payloads
+        return structuredClone(remainingProps);
+    }
+    /**
+     * Restores the object's state from a serialized plain object.
+     * Merges all properties from the input object into this instance.
+     * @template T - The expected return type
+     * @param object - The serialized object data to restore from
+     * @returns This instance cast to type T
+     */
+    deserialize(object) {
+        Object.assign(this, object);
+        // Selection/interactivity state is transient UI state and must not survive revival.
+        this.isSelected = false;
+        this.isHovered = false;
+        this.isMounted = false;
+        this.isInteractive = false;
+        this.resizing = false;
+        this.markedForRemoval = false;
+        this.isVisible = true;
+        // Reset known transient geometry caches if present on subclasses.
+        if ('_adjustedPoints' in this) {
+            this._adjustedPoints = null;
+        }
+        if ('_clipInfo' in this) {
+            this._clipInfo = null;
+        }
+        return this;
+    }
+    /**
+     * Copies transient (non-persisted) state from a previous local instance
+     * onto this freshly-revived instance. Called when a remote Yjs update
+     * replaces an existing object so that local-only fields (e.g. asset
+     * load state, resolved blob URLs) survive across remote position
+     * updates and don't visually flicker.
+     *
+     * Default implementation is a no-op; subclasses with transient fields
+     * should override.
+     * @param previous - The previous local instance being replaced.
+     */
+    adoptTransientStateFrom(_previous) {
+        // no-op by default
+    }
+    /**
+     * Type guard to check if this object is of a specific class type.
+     * Compares against the __class__ property.
+     * @template T - The expected class type extending KritzelBaseObject
+     * @param className - The class name to check against
+     * @returns True if this object's __class__ matches the given class name
+     */
+    isClass(className) {
+        return this.__class__ === className;
+    }
+    /**
+     * Handles edit actions on the object. Override in subclasses to implement
+     * custom edit behavior (e.g., entering text edit mode).
+     * @param _event - Optional pointer event that triggered the edit
+     */
+    edit(_event) {
+        // This method can be overridden by subclasses to handle edit actions.
+    }
+    /**
+     * Lifecycle hook called after properties are updated via updateObject.
+     * Override in subclasses to perform custom logic when specific properties change.
+     * @param _changedProperties - Array of property names that were changed
+     */
+    onAfterUpdate(_changedProperties) {
+        // Default implementation does nothing
+    }
+    /**
+     * Tests if a point intersects with this object.
+     * Override in subclasses for precise hit detection (e.g., path-based objects).
+     * @param _x - The X coordinate to test in world space
+     * @param _y - The Y coordinate to test in world space
+     * @returns True if the point hits the object (default always returns true)
+     */
+    hitTest(_x, _y) {
+        return true; // Default implementation, can be overridden by subclasses
+    }
+    /**
+     * Tests if this object's rotated polygon intersects with another polygon.
+     * Useful for lasso selection and collision detection.
+     * @param polygon - The polygon to test intersection against
+     * @returns True if the polygons intersect
+     */
+    hitTestPolygon(polygon) {
+        const objectPolygon = this.rotatedPolygon;
+        return KritzelGeometryHelper.doPolygonsIntersect(objectPolygon, polygon);
+    }
+    /**
+     * Updates the object's position and notifies the store.
+     * @param x - The new X position (translateX)
+     * @param y - The new Y position (translateY)
+     */
+    updatePosition(x, y) {
+        this.translateX = x;
+        this.translateY = y;
+        this._core.store.objects.update(this);
+    }
+}
+
+class KritzelMathHelper {
+    static average(a, b) {
+        return (a + b) / 2;
+    }
+    static degreesToRadians(degrees) {
+        return degrees * (Math.PI / 180);
+    }
+}
+
+var cjs = {};
+
+var hasRequiredCjs;
+
+function requireCjs () {
+	if (hasRequiredCjs) return cjs;
+	hasRequiredCjs = 1;
+	(function (exports) {
+		Object.defineProperties(exports,{__esModule:{value:true},[Symbol.toStringTag]:{value:`Module`}});const{PI:e}=Math,t=e+1e-4,n=.5,r=[1,1];function i(e,t,n,r=e=>e){return e*r(.5-t*(.5-n))}const{min:a}=Math;function o(e,t,n){let r=a(1,t/n);return a(1,e+(a(1,1-r)-e)*(r*.275))}function s(e){return [-e[0],-e[1]]}function c(e,t){return [e[0]+t[0],e[1]+t[1]]}function l(e,t,n){return e[0]=t[0]+n[0],e[1]=t[1]+n[1],e}function u(e,t){return [e[0]-t[0],e[1]-t[1]]}function d(e,t,n){return e[0]=t[0]-n[0],e[1]=t[1]-n[1],e}function f(e,t){return [e[0]*t,e[1]*t]}function p(e,t,n){return e[0]=t[0]*n,e[1]=t[1]*n,e}function m(e,t){return [e[0]/t,e[1]/t]}function h(e){return [e[1],-e[0]]}function g(e,t){let n=t[0];return e[0]=t[1],e[1]=-n,e}function ee(e,t){return e[0]*t[0]+e[1]*t[1]}function _(e,t){return e[0]===t[0]&&e[1]===t[1]}function v(e){return Math.hypot(e[0],e[1])}function y(e,t){let n=e[0]-t[0],r=e[1]-t[1];return n*n+r*r}function b(e){return m(e,v(e))}function x(e,t){return Math.hypot(e[1]-t[1],e[0]-t[0])}function S(e,t,n){let r=Math.sin(n),i=Math.cos(n),a=e[0]-t[0],o=e[1]-t[1],s=a*i-o*r,c=a*r+o*i;return [s+t[0],c+t[1]]}function C(e,t,n,r){let i=Math.sin(r),a=Math.cos(r),o=t[0]-n[0],s=t[1]-n[1],c=o*a-s*i,l=o*i+s*a;return e[0]=c+n[0],e[1]=l+n[1],e}function w(e,t,n){return c(e,f(u(t,e),n))}function te(e,t,n,r){let i=n[0]-t[0],a=n[1]-t[1];return e[0]=t[0]+i*r,e[1]=t[1]+a*r,e}function T(e,t,n){return c(e,f(t,n))}const E=[0,0],D=[0,0],O=[0,0];function k(e,n){let r=T(e,b(h(u(e,c(e,[1,1])))),-n),i=[],a=1/13;for(let n=a;n<=1;n+=a)i.push(S(r,e,t*2*n));return i}function A(e,n,r){let i=[],a=1/r;for(let r=a;r<=1;r+=a)i.push(S(n,e,t*r));return i}function j(e,t,n){let r=u(t,n),i=f(r,.5),a=f(r,.51);return [u(e,i),u(e,a),c(e,a),c(e,i)]}function M(e,n,r,i){let a=[],o=T(e,n,r),s=1/i;for(let n=s;n<1;n+=s)a.push(S(o,e,t*3*n));return a}function ne(e,t,n){return [c(e,f(t,n)),c(e,f(t,n*.99)),u(e,f(t,n*.99)),u(e,f(t,n))]}function N(e,t,n){return e===false||e===void 0?0:e===true?Math.max(t,n):e}function re(e,t,n){return e.slice(0,10).reduce((e,r)=>{let i=r.pressure;return t&&(i=o(e,r.distance,n)),(e+i)/2},e[0].pressure)}function P(e,n={}){let{size:r=16,smoothing:a=.5,thinning:f=.5,simulatePressure:m=true,easing:_=e=>e,start:v={},end:b={},last:x=false}=n,{cap:S=true,easing:w=e=>e*(2-e)}=v,{cap:T=true,easing:P=e=>--e*e*e+1}=b;if(e.length===0||r<=0)return [];let F=e[e.length-1].runningLength,I=N(v.taper,r,F),L=N(b.taper,r,F),R=(r*a)**2,z=[],B=[],V=re(e,m,r),H=i(r,f,e[e.length-1].pressure,_),U,W=e[0].vector,G=e[0].point,K=G,q=G,J=K,Y=false;for(let n=0;n<e.length;n++){let{pressure:a}=e[n],{point:s,vector:h,distance:v,runningLength:b}=e[n],x=n===e.length-1;if(!x&&F-b<3)continue;f?(m&&(a=o(V,v,r)),H=i(r,f,a,_)):H=r/2,U===void 0&&(U=H);let S=b<I?w(b/I):1,T=F-b<L?P((F-b)/L):1;H=Math.max(.01,H*Math.min(S,T));let k=(x?e[n]:e[n+1]).vector,A=x?1:ee(h,k),j=ee(h,W)<0&&!Y,M=A!==null&&A<0;if(j||M){g(E,W),p(E,E,H);for(let e=0;e<=1;e+=.07692307692307693)d(D,s,E),C(D,D,s,t*e),q=[D[0],D[1]],z.push(q),l(O,s,E),C(O,O,s,t*-e),J=[O[0],O[1]],B.push(J);G=q,K=J,M&&(Y=true);continue}if(Y=false,x){g(E,h),p(E,E,H),z.push(u(s,E)),B.push(c(s,E));continue}te(E,k,h,A),g(E,E),p(E,E,H),d(D,s,E),q=[D[0],D[1]],(n<=1||y(G,q)>R)&&(z.push(q),G=q),l(O,s,E),J=[O[0],O[1]],(n<=1||y(K,J)>R)&&(B.push(J),K=J),V=a,W=h;}let X=[e[0].point[0],e[0].point[1]],Z=e.length>1?[e[e.length-1].point[0],e[e.length-1].point[1]]:c(e[0].point,[1,1]),Q=[],$=[];if(e.length===1){if(!(I||L)||x)return k(X,U||H)}else {I||L&&e.length===1||(S?Q.push(...A(X,B[0],13)):Q.push(...j(X,z[0],B[0])));let t=h(s(e[e.length-1].vector));L||I&&e.length===1?$.push(Z):T?$.push(...M(Z,t,H,29)):$.push(...ne(Z,t,H));}return z.concat($,B.reverse(),Q)}const F=[0,0];function I(e){return e!=null&&e>=0}function L(e,t={}){let{streamline:i=.5,size:a=16,last:o=false}=t;if(e.length===0)return [];let s=.15+(1-i)*.85,l=Array.isArray(e[0])?e:e.map(({x:e,y:t,pressure:r=n})=>[e,t,r]);if(l.length===2){let e=l[1];l=l.slice(0,-1);for(let t=1;t<5;t++)l.push(w(l[0],e,t/4));}l.length===1&&(l=[...l,[...c(l[0],r),...l[0].slice(2)]]);let u=[{point:[l[0][0],l[0][1]],pressure:I(l[0][2])?l[0][2]:.25,vector:[...r],distance:0,runningLength:0}],f=false,p=0,m=u[0],h=l.length-1;for(let e=1;e<l.length;e++){let t=o&&e===h?[l[e][0],l[e][1]]:w(m.point,l[e],s);if(_(m.point,t))continue;let r=x(t,m.point);if(p+=r,e<h&&!f){if(p<a)continue;f=true;}d(F,m.point,t),m={point:t,pressure:I(l[e][2])?l[e][2]:n,vector:b(F),distance:r,runningLength:p},u.push(m);}return u[0].vector=u[1]?.vector||[0,0],u}function R(e,t={}){return P(L(e,t),t)}var z=R;exports.default=z,exports.getStroke=R,exports.getStrokeOutlinePoints=P,exports.getStrokePoints=L;
+		
+	} (cjs));
+	return cjs;
+}
+
+var cjsExports = requireCjs();
+
+class KritzelPath extends KritzelBaseObject {
+    __class__ = 'KritzelPath';
+    points;
+    d;
+    stroke = { light: 'none', dark: 'none' };
+    strokeWidth;
+    lineSlack = 0.5;
+    fill;
+    x = 0;
+    y = 0;
+    height = 0;
+    width = 0;
+    scale = 1;
+    options;
+    isVisible = true;
+    isDebugInfoVisible = true;
+    isCompleted = false;
+    _adjustedPoints = null;
+    /**
+     * Gets the SVG viewBox string for local (object-relative) rendering.
+     *
+     * The path's `d` string is generated in local coordinates (offset so the
+     * object's top-left origin is at 0,0), so the viewBox always starts at 0,0.
+     * Keeping the SVG's internal coordinates small — independent of the object's
+     * world position — avoids float32 precision loss in the browser's SVG
+     * rasterizer (Skia), which otherwise fails to paint paths whose absolute
+     * world coordinates exceed ~2^24 (e.g. far from the origin at extreme zoom).
+     * @returns The viewBox attribute value in the format "0 0 width height"
+     */
+    get viewBox() {
+        return `0 0 ${this.width} ${this.height}`;
+    }
+    /**
+     * Creates a new KritzelPath instance.
+     * @param config - Optional configuration object for the path
+     * @param config.points - Array of [x, y] coordinate pairs defining the path
+     * @param config.translateX - Horizontal translation offset (default: 0)
+     * @param config.translateY - Vertical translation offset (default: 0)
+     * @param config.scale - Scale factor for the path (default: 1)
+     * @param config.strokeWidth - Width of the stroke in pixels (default: 8)
+     * @param config.fill - Theme-aware fill color with light and dark variants
+     * @param config.lineSlack - Additional padding for bounding box calculations (default: 0.5)
+     */
+    constructor(config) {
+        super();
+        this.options = config;
+        this.points = config?.points ?? [];
+        this.translateX = config?.translateX ?? 0;
+        this.translateY = config?.translateY ?? 0;
+        this.rotation = KritzelMathHelper.degreesToRadians(config?.rotation ?? 0);
+        this.scale = config?.scale ?? 1;
+        this.strokeWidth = config?.strokeWidth ?? 8;
+        this.fill = config?.fill ?? { light: '#000000', dark: '#ffffff' };
+        this.d = this.generateSvgPath();
+        this.updateDimensions();
+    }
+    /**
+     * Factory method to create a new KritzelPath instance with a core reference.
+     * This is the preferred way to create paths that will be managed by the canvas.
+     * @param core - The KritzelCore instance that will manage this path
+     * @param options - Optional configuration options for the path
+     * @returns A new KritzelPath instance configured with the provided options
+     */
+    static create(core, options) {
+        const object = new KritzelPath();
+        object._core = core;
+        object.id = object.generateId();
+        object.workspaceId = core.store.state.activeWorkspace.id;
+        object.userId = core.user?.id;
+        object.options = options;
+        object.points = options?.points ?? [];
+        object.translateX = options?.translateX ?? 0;
+        object.translateY = options?.translateY ?? 0;
+        object.rotation = KritzelMathHelper.degreesToRadians(options?.rotation ?? 0);
+        object.scale = options?.scale ?? 1;
+        object.strokeWidth = options?.strokeWidth ?? 8;
+        object.fill = options?.fill ?? { light: '#000000', dark: '#ffffff' };
+        object.opacity = options?.opacity ?? 1;
+        object.zIndex = core.store.currentZIndex;
+        object.d = object.generateSvgPath();
+        object.updateDimensions();
+        return object;
+    }
+    /**
+     * Creates a deep copy of this path object.
+     * The points array is cloned to ensure the copy is independent.
+     * @returns A new KritzelPath instance with copied properties
+     */
+    copy() {
+        const copiedObject = super.copy();
+        if (this.points) {
+            copiedObject.points = this.points.map(p => [...p]);
+        }
+        return copiedObject;
+    }
+    /**
+     * Restores the path from a serialized object, then regenerates the SVG `d`
+     * string from the restored points.
+     *
+     * Regeneration is required because the `d` string is now emitted in local
+     * (object-relative) coordinates paired with a "0 0 width height" viewBox.
+     * Older persisted paths stored `d` in absolute world coordinates, which
+     * would be inconsistent with the local-coordinate viewBox and fail to
+     * rasterize far from the origin at extreme zoom. Recomputing `d` here makes
+     * both freshly created and previously persisted paths render identically.
+     * @param object - The serialized path data to restore from
+     * @returns This instance cast to type T
+     */
+    deserialize(object) {
+        const result = super.deserialize(object);
+        this.d = this.generateSvgPath();
+        return result;
+    }
+    /**
+     * Resizes the path to fit within the specified dimensions.
+     * Scales all points proportionally and updates the SVG path.
+     * @param x - New X position for the path, or null to keep current
+     * @param y - New Y position for the path, or null to keep current
+     * @param width - New width for the path (must be > 1)
+     * @param height - New height for the path (must be > 1)
+     */
+    resize(x, y, width, height) {
+        if (width <= 1 || height <= 1) {
+            return;
+        }
+        const scaleX = width / this.width;
+        const scaleY = height / this.height;
+        this.width = width;
+        this.height = height;
+        if (this.points.length === 1) {
+            const p = this.points[0];
+            const spreadX = Math.max(0, width - this.strokeWidth) / scaleX;
+            const spreadY = Math.max(0, height - this.strokeWidth) / scaleY;
+            this.points.push([p[0] + spreadX, p[1] + spreadY]);
+        }
+        this.points = this.points.map(([x, y]) => [x * scaleX, y * scaleY]);
+        this.d = this.generateSvgPath();
+        this.width = Math.max(...this.points.map(p => p[0])) - Math.min(...this.points.map(p => p[0])) + this.strokeWidth;
+        this.height = Math.max(...this.points.map(p => p[1])) - Math.min(...this.points.map(p => p[1])) + this.strokeWidth;
+        this.x = Math.min(...this.points.map(p => p[0])) - this.strokeWidth / 2;
+        this.y = Math.min(...this.points.map(p => p[1])) - this.strokeWidth / 2;
+        if (x !== null) {
+            this.translateX = x;
+        }
+        if (y !== null) {
+            this.translateY = y;
+        }
+        this._adjustedPoints = null;
+        this._core.store.objects.update(this);
+    }
+    /**
+     * Rotates the path by the specified angle.
+     * Invalidates cached adjusted points to force recalculation.
+     * @param value - Rotation angle in radians
+     */
+    rotate(value) {
+        this.rotation = value;
+        this._adjustedPoints = null;
+        this._core.store.objects.update(this);
+    }
+    /**
+     * Moves the path by calculating the delta between start and end positions.
+     * The delta is adjusted for the current viewport scale.
+     * @param startX - Starting X coordinate in screen space
+     * @param startY - Starting Y coordinate in screen space
+     * @param endX - Ending X coordinate in screen space
+     * @param endY - Ending Y coordinate in screen space
+     */
+    move(startX, startY, endX, endY) {
+        const deltaX = (startX - endX) / this._core.store.state.scale;
+        const deltaY = (startY - endY) / this._core.store.state.scale;
+        this.translateX += deltaX;
+        this.translateY += deltaY;
+        this._adjustedPoints = null;
+        this._core.store.objects.update(this);
+    }
+    /**
+     * Tests whether a point intersects with the path's stroke.
+     * Uses distance-to-line-segment calculations for accurate hit detection.
+     * @param x - X coordinate to test in world space
+     * @param y - Y coordinate to test in world space
+     * @returns True if the point is within the stroke width of the path
+     */
+    hitTest(x, y) {
+        const halfStroke = this.strokeWidth / this.scale / 2;
+        if (this._adjustedPoints === null) {
+            this._adjustedPoints = this.computeAdjustedPoints();
+        }
+        if (this._adjustedPoints.length === 1) {
+            const p1 = this._adjustedPoints[0];
+            const distance = this.pointToLineSegmentDistance(x, y, p1[0], p1[1], p1[0], p1[1]);
+            return distance <= halfStroke;
+        }
+        for (let i = 0; i < this._adjustedPoints.length - 1; i++) {
+            const p1 = this._adjustedPoints[i];
+            const p2 = this._adjustedPoints[i + 1];
+            const distance = this.pointToLineSegmentDistance(x, y, p1[0], p1[1], p2[0], p2[1]);
+            if (distance <= halfStroke) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Tests whether a polygon intersects with the path.
+     * Checks for point containment, edge intersections, and proximity to stroke.
+     * @param polygon - The polygon to test against, defined by its corner points
+     * @returns True if any part of the polygon overlaps with the path's stroke
+     */
+    hitTestPolygon(polygon) {
+        const halfStroke = this.strokeWidth / this.scale / 2;
+        if (this._adjustedPoints === null) {
+            this._adjustedPoints = this.computeAdjustedPoints();
+        }
+        const polyPoints = [
+            { x: polygon.bottomLeft.x, y: polygon.bottomLeft.y },
+            { x: polygon.bottomRight.x, y: polygon.bottomRight.y },
+            { x: polygon.topRight.x, y: polygon.topRight.y },
+            { x: polygon.topLeft.x, y: polygon.topLeft.y },
+        ];
+        for (const [px, py] of this._adjustedPoints) {
+            if (KritzelGeometryHelper.isPointInPolygon({ x: px, y: py }, polyPoints)) {
+                return true;
+            }
+        }
+        for (const pt of polyPoints) {
+            if (this.hitTest(pt.x, pt.y)) {
+                return true;
+            }
+        }
+        for (let i = 0; i < this._adjustedPoints.length - 1; i++) {
+            const p1 = { x: this._adjustedPoints[i][0], y: this._adjustedPoints[i][1] };
+            const p2 = { x: this._adjustedPoints[i + 1][0], y: this._adjustedPoints[i + 1][1] };
+            for (let j = 0; j < polyPoints.length; j++) {
+                const q1 = polyPoints[j];
+                const q2 = polyPoints[(j + 1) % polyPoints.length];
+                if (KritzelGeometryHelper.intersectLines(p1, p2, q1, q2)) {
+                    return true;
+                }
+            }
+        }
+        for (let i = 0; i < this._adjustedPoints.length - 1; i++) {
+            const p1 = this._adjustedPoints[i];
+            const p2 = this._adjustedPoints[i + 1];
+            for (let j = 0; j < polyPoints.length; j++) {
+                const q1 = polyPoints[j];
+                const q2 = polyPoints[(j + 1) % polyPoints.length];
+                const d1 = this.pointToLineSegmentDistance(q1.x, q1.y, p1[0], p1[1], p2[0], p2[1]);
+                const d2 = this.pointToLineSegmentDistance(q2.x, q2.y, p1[0], p1[1], p2[0], p2[1]);
+                const d3 = this.pointToLineSegmentDistance(p1[0], p1[1], q1.x, q1.y, q2.x, q2.y);
+                const d4 = this.pointToLineSegmentDistance(p2[0], p2[1], q1.x, q1.y, q2.x, q2.y);
+                const minD = Math.min(d1, d2, d3, d4);
+                if (minD <= halfStroke) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    /**
+     * Updates the path's position to the specified coordinates.
+     * Invalidates cached adjusted points and triggers a store update.
+     * @param x - New X position in world space
+     * @param y - New Y position in world space
+     */
+    updatePosition(x, y) {
+        this.translateX = x;
+        this.translateY = y;
+        this._adjustedPoints = null;
+        this._core.store.objects.update(this);
+    }
+    /**
+     * Lifecycle hook called after properties have been updated.
+     * Regenerates the SVG path and bounding box when strokeWidth changes.
+     * @param changedProperties - Array of property names that were modified
+     */
+    onAfterUpdate(changedProperties) {
+        if (changedProperties.includes('strokeWidth')) {
+            this.d = this.generateSvgPath();
+            this.updateBoundingBox();
+            this._adjustedPoints = null;
+        }
+    }
+    /**
+     * Computes the world-space coordinates of all path points.
+     * Applies rotation around the path's center and adjusts for translation and scale.
+     * Results are cached in _adjustedPoints for performance.
+     * @returns Array of [x, y] coordinate pairs in world space
+     */
+    computeAdjustedPoints() {
+        if (!this.points?.length) {
+            return [];
+        }
+        const angle = this.rotation;
+        const cos = Math.cos(angle);
+        const sin = Math.sin(angle);
+        const xs = this.points.map(p => p[0]);
+        const ys = this.points.map(p => p[1]);
+        const pivot = {
+            x: (Math.min(...xs) + Math.max(...xs)) / 2,
+            y: (Math.min(...ys) + Math.max(...ys)) / 2,
+        };
+        const { x: cx, y: cy } = pivot;
+        const rotatedPoints = this.points.map(([x, y]) => {
+            const dx = x - cx;
+            const dy = y - cy;
+            return [cx + dx * cos - dy * sin, cy + dx * sin + dy * cos];
+        });
+        return rotatedPoints.map(([px, py]) => [Math.abs(px - this.x) / this.scale + this.translateX, Math.abs(py - this.y) / this.scale + this.translateY]);
+    }
+    /**
+     * Calculates the shortest distance from a point to a line segment.
+     * Uses projection to find the closest point on the segment.
+     * @param x - X coordinate of the test point
+     * @param y - Y coordinate of the test point
+     * @param x1 - X coordinate of the line segment start
+     * @param y1 - Y coordinate of the line segment start
+     * @param x2 - X coordinate of the line segment end
+     * @param y2 - Y coordinate of the line segment end
+     * @returns The shortest distance from the point to the line segment
+     */
+    pointToLineSegmentDistance(x, y, x1, y1, x2, y2) {
+        const A = x - x1;
+        const B = y - y1;
+        const C = x2 - x1;
+        const D = y2 - y1;
+        const dot = A * C + B * D;
+        const len_sq = C * C + D * D;
+        let param = -1;
+        if (len_sq !== 0) {
+            // in case of 0 length line
+            param = dot / len_sq;
+        }
+        let xx, yy;
+        if (param < 0) {
+            xx = x1;
+            yy = y1;
+        }
+        else if (param > 1) {
+            xx = x2;
+            yy = y2;
+        }
+        else {
+            xx = x1 + param * C;
+            yy = y1 + param * D;
+        }
+        const dx = x - xx;
+        const dy = y - yy;
+        return Math.sqrt(dx * dx + dy * dy);
+    }
+    /**
+     * Updates width, height, x, y, translateX, and translateY based on current points.
+     * Uses the unrotated local points and stroke width for base dimensions.
+     * Called during initial setup to establish the path's dimensions and position.
+     */
+    updateDimensions() {
+        const minX = Math.min(...this.points.map(p => p[0])) - this.strokeWidth / 2;
+        const minY = Math.min(...this.points.map(p => p[1])) - this.strokeWidth / 2;
+        const maxX = Math.max(...this.points.map(p => p[0])) + this.strokeWidth / 2;
+        const maxY = Math.max(...this.points.map(p => p[1])) + this.strokeWidth / 2;
+        this.width = maxX - minX + this.lineSlack;
+        this.height = maxY - minY + this.lineSlack;
+        this.x = minX;
+        this.y = minY;
+        this.translateX = (this.x + this.translateX) / this.scale;
+        this.translateY = (this.y + this.translateY) / this.scale;
+    }
+    /**
+     * Updates width, height, x, y based on current points and strokeWidth.
+     * Does NOT modify translateX/translateY (use updateDimensions for initial setup).
+     */
+    updateBoundingBox() {
+        const minX = Math.min(...this.points.map(p => p[0])) - this.strokeWidth / 2;
+        const minY = Math.min(...this.points.map(p => p[1])) - this.strokeWidth / 2;
+        const maxX = Math.max(...this.points.map(p => p[0])) + this.strokeWidth / 2;
+        const maxY = Math.max(...this.points.map(p => p[1])) + this.strokeWidth / 2;
+        this.width = maxX - minX + this.lineSlack;
+        this.height = maxY - minY + this.lineSlack;
+        this.x = minX;
+        this.y = minY;
+    }
+    /**
+     * Generates the SVG path data string from the current points.
+     * Uses perfect-freehand to create a smooth, pressure-sensitive stroke.
+     * @returns SVG path data string (d attribute value)
+     */
+    generateSvgPath() {
+        const stroke = this.getStrokeFromPoints(this.points, this.strokeWidth);
+        const offsetX = this.points.length ? Math.min(...this.points.map(p => p[0])) - this.strokeWidth / 2 : 0;
+        const offsetY = this.points.length ? Math.min(...this.points.map(p => p[1])) - this.strokeWidth / 2 : 0;
+        return this.getSvgPathFromStroke(stroke, offsetX, offsetY);
+    }
+    /**
+     * Converts raw input points into a smooth stroke outline using perfect-freehand.
+     * Applies pressure simulation and smoothing for a natural pen-like appearance.
+     * @param points - Array of [x, y] coordinate pairs representing the input path
+     * @param strokeWidth - The desired stroke width in pixels
+     * @returns Array of [x, y] coordinate pairs forming the stroke outline polygon
+     */
+    getStrokeFromPoints(points, strokeWidth) {
+        return cjsExports.getStroke(points, {
+            size: strokeWidth,
+            thinning: 0.5,
+            smoothing: 0.5,
+            streamline: 0.5,
+            easing: t => t,
+            simulatePressure: true,
+            last: true,
+            start: {
+                cap: true,
+                taper: 0,
+                easing: t => t,
+            },
+            end: {
+                cap: true,
+                taper: 0,
+                easing: t => t,
+            },
+        });
+    }
+    /**
+     * Converts stroke outline points into an SVG path data string.
+     * Uses quadratic bezier curves for smooth rendering.
+     * Coordinates are emitted relative to (offsetX, offsetY) so the resulting
+     * path lives in the object's local coordinate space (paired with a
+     * "0 0 width height" viewBox). This keeps SVG-internal coordinates small
+     * regardless of the object's world position, avoiding float32 rasterizer
+     * precision failures far from the origin.
+     * @param points - Array of [x, y] coordinate pairs forming the stroke outline
+     * @param offsetX - X origin to subtract from every coordinate (default 0)
+     * @param offsetY - Y origin to subtract from every coordinate (default 0)
+     * @param closed - Whether to close the path with 'Z' command (default: true)
+     * @returns SVG path data string with M, Q, and T commands
+     */
+    getSvgPathFromStroke(points, offsetX = 0, offsetY = 0, closed = true) {
+        const len = points.length;
+        if (len < 4) {
+            return ``;
+        }
+        const a = points[0];
+        const b = points[1];
+        const c = points[2];
+        const ax = a[0] - offsetX;
+        const ay = a[1] - offsetY;
+        const bx = b[0] - offsetX;
+        const by = b[1] - offsetY;
+        const cx = c[0] - offsetX;
+        const cy = c[1] - offsetY;
+        let result = `M${ax.toFixed(2)},${ay.toFixed(2)} Q${bx.toFixed(2)},${by.toFixed(2)} ${KritzelMathHelper.average(bx, cx).toFixed(2)},${KritzelMathHelper.average(by, cy).toFixed(2)} T`;
+        for (let i = 2, max = len - 1; i < max; i++) {
+            const p = points[i];
+            const q = points[i + 1];
+            const px = p[0] - offsetX;
+            const py = p[1] - offsetY;
+            const qx = q[0] - offsetX;
+            const qy = q[1] - offsetY;
+            result += `${KritzelMathHelper.average(px, qx).toFixed(2)},${KritzelMathHelper.average(py, qy).toFixed(2)} `;
+        }
+        if (closed) {
+            result += 'Z';
+        }
+        return result;
+    }
+    /**
+     * Determines if the path appears too small on screen for detailed rendering.
+     * Used for level-of-detail optimizations.
+     * @returns True if the path's screen area is less than 500 square pixels
+     */
+    isLowRes() {
+        if (!this._core) {
+            return false;
+        }
+        const viewportScale = this._core.store.state.scale;
+        const scaledWidth = this.boundingBox.width * viewportScale;
+        const scaledHeight = this.boundingBox.height * viewportScale;
+        return (scaledWidth * scaledHeight) < 500;
+    }
+    /**
+     * Finds the point where a line from outsidePoint to the path's center
+     * intersects the stroke edge. Used for arrow clipping at the actual stroke edge.
+     * Uses binary search refinement for accurate intersection detection.
+     * @param outsidePoint - A point outside the path to trace from
+     * @returns The intersection point on the stroke edge, or null if no intersection found
+     */
+    getClipPoint(outsidePoint) {
+        const centerX = this.centerX;
+        const centerY = this.centerY;
+        const halfStroke = this.strokeWidth / this.scale / 2;
+        // Ensure adjusted points are computed
+        if (this._adjustedPoints === null) {
+            this._adjustedPoints = this.computeAdjustedPoints();
+        }
+        if (this._adjustedPoints.length < 1) {
+            return null;
+        }
+        // Sample along the line from outsidePoint to center to find stroke edge
+        const steps = 32;
+        let prevOutside = true;
+        for (let i = 1; i <= steps; i++) {
+            const t = i / steps;
+            const sampleX = outsidePoint.x + (centerX - outsidePoint.x) * t;
+            const sampleY = outsidePoint.y + (centerY - outsidePoint.y) * t;
+            // Check distance to path stroke
+            let minDistance = Infinity;
+            if (this._adjustedPoints.length === 1) {
+                const p = this._adjustedPoints[0];
+                const dx = sampleX - p[0];
+                const dy = sampleY - p[1];
+                minDistance = Math.sqrt(dx * dx + dy * dy);
+            }
+            else {
+                for (let j = 0; j < this._adjustedPoints.length - 1; j++) {
+                    const p1 = this._adjustedPoints[j];
+                    const p2 = this._adjustedPoints[j + 1];
+                    const dist = this.pointToLineSegmentDistance(sampleX, sampleY, p1[0], p1[1], p2[0], p2[1]);
+                    if (dist < minDistance) {
+                        minDistance = dist;
+                    }
+                }
+            }
+            const isInside = minDistance <= halfStroke;
+            // Found the edge: transition from outside to inside
+            if (prevOutside && isInside) {
+                // Refine the intersection point using binary search
+                let tLow = (i - 1) / steps;
+                let tHigh = t;
+                for (let k = 0; k < 8; k++) {
+                    const tMid = (tLow + tHigh) / 2;
+                    const midX = outsidePoint.x + (centerX - outsidePoint.x) * tMid;
+                    const midY = outsidePoint.y + (centerY - outsidePoint.y) * tMid;
+                    let midDist = Infinity;
+                    if (this._adjustedPoints.length === 1) {
+                        const p = this._adjustedPoints[0];
+                        const dx = midX - p[0];
+                        const dy = midY - p[1];
+                        midDist = Math.sqrt(dx * dx + dy * dy);
+                    }
+                    else {
+                        for (let j = 0; j < this._adjustedPoints.length - 1; j++) {
+                            const p1 = this._adjustedPoints[j];
+                            const p2 = this._adjustedPoints[j + 1];
+                            const dist = this.pointToLineSegmentDistance(midX, midY, p1[0], p1[1], p2[0], p2[1]);
+                            if (dist < midDist) {
+                                midDist = dist;
+                            }
+                        }
+                    }
+                    if (midDist <= halfStroke) {
+                        tHigh = tMid;
+                    }
+                    else {
+                        tLow = tMid;
+                    }
+                }
+                const finalT = (tLow + tHigh) / 2;
+                return {
+                    x: outsidePoint.x + (centerX - outsidePoint.x) * finalT,
+                    y: outsidePoint.y + (centerY - outsidePoint.y) * finalT,
+                };
+            }
+            prevOutside = !isInside;
+        }
+        return null;
+    }
+}
+
+class KritzelLine extends KritzelBaseObject {
+    __class__ = 'KritzelLine';
+    startX;
+    startY;
+    endX;
+    endY;
+    controlX;
+    controlY;
+    stroke;
+    strokeWidth;
+    scale = 1;
+    options;
+    /** Anchor connection for the start point of the line */
+    startAnchor;
+    /** Anchor connection for the end point of the line */
+    endAnchor;
+    /** Arrow head configuration for start and end of line */
+    arrows;
+    isVisible = true;
+    isDebugInfoVisible = true;
+    isCompleted = false;
+    /** Cached adjusted points for hit testing, accounting for rotation and translation */
+    _adjustedPoints = null;
+    /** Cached clip information for anchored line endpoints */
+    _clipInfo = null;
+    /**
+     * Generates the SVG path data string for the line.
+     * Returns a quadratic Bezier curve path if control point exists, otherwise a straight line.
+     * @returns SVG path data string in the format "M x y Q cx cy ex ey" or "M x y L ex ey"
+     */
+    get d() {
+        if (this.controlX !== undefined && this.controlY !== undefined) {
+            return `M ${this.startX} ${this.startY} Q ${this.controlX} ${this.controlY} ${this.endX} ${this.endY}`;
+        }
+        return `M ${this.startX} ${this.startY} L ${this.endX} ${this.endY}`;
+    }
+    /**
+     * Generates the SVG viewBox attribute string for rendering the line.
+     * @returns ViewBox string in the format "x y width height"
+     */
+    get viewBox() {
+        return `${this.x} ${this.y} ${this.width} ${this.height}`;
+    }
+    /**
+     * Creates a new KritzelLine instance.
+     * @param config - Optional configuration options for the line including start/end points,
+     *                 control point for curves, stroke settings, anchors, and arrow configuration
+     */
+    constructor(config) {
+        super();
+        this.options = config;
+        this.startX = config?.startX ?? 0;
+        this.startY = config?.startY ?? 0;
+        this.endX = config?.endX ?? 0;
+        this.endY = config?.endY ?? 0;
+        this.controlX = config?.controlX;
+        this.controlY = config?.controlY;
+        this.translateX = config?.translateX ?? 0;
+        this.translateY = config?.translateY ?? 0;
+        this.rotation = KritzelMathHelper.degreesToRadians(config?.rotation ?? 0);
+        this.scale = config?.scale ?? 1;
+        this.strokeWidth = config?.strokeWidth ?? 4;
+        this.stroke = config?.stroke ?? { light: '#000000', dark: '#ffffff' };
+        this.startAnchor = config?.startAnchor;
+        this.endAnchor = config?.endAnchor;
+        this.arrows = config?.arrows;
+        this.updateDimensions();
+    }
+    /**
+     * Factory method to create a new KritzelLine with a core reference and unique ID.
+     * This is the preferred way to create lines that will be managed by the core.
+     * @param core - The KritzelCore instance that will manage this line
+     * @param options - Optional configuration options for the line
+     * @returns A fully initialized KritzelLine instance with generated ID and workspace assignment
+     */
+    static create(core, options) {
+        const object = new KritzelLine();
+        object._core = core;
+        object.id = object.generateId();
+        object.workspaceId = core.store.state.activeWorkspace.id;
+        object.userId = core.user?.id;
+        object.options = options;
+        object.startX = options?.startX ?? 0;
+        object.startY = options?.startY ?? 0;
+        object.endX = options?.endX ?? 0;
+        object.endY = options?.endY ?? 0;
+        object.controlX = options?.controlX;
+        object.controlY = options?.controlY;
+        object.translateX = options?.translateX ?? 0;
+        object.translateY = options?.translateY ?? 0;
+        object.rotation = KritzelMathHelper.degreesToRadians(options?.rotation ?? 0);
+        object.scale = options?.scale ?? 1;
+        object.strokeWidth = options?.strokeWidth ?? 4;
+        object.stroke = options?.stroke ?? { light: '#000000', dark: '#ffffff' };
+        object.opacity = options?.opacity ?? 1;
+        object.startAnchor = options?.startAnchor;
+        object.endAnchor = options?.endAnchor;
+        object.arrows = options?.arrows;
+        object.zIndex = core.store.currentZIndex;
+        object.updateDimensions();
+        return object;
+    }
+    /**
+     * Resizes the line to fit within the specified dimensions.
+     * Scales both endpoints and control point proportionally, then repositions the line.
+     * @param x - New X position for the line (or null to keep current)
+     * @param y - New Y position for the line (or null to keep current)
+     * @param width - New width to scale the line to (must be > 1)
+     * @param height - New height to scale the line to (must be > 1)
+     */
+    resize(x, y, width, height) {
+        if (width <= 1 || height <= 1) {
+            return;
+        }
+        const scaleX = width / this.width;
+        const scaleY = height / this.height;
+        // Scale the line endpoints
+        this.startX = this.startX * scaleX;
+        this.startY = this.startY * scaleY;
+        this.endX = this.endX * scaleX;
+        this.endY = this.endY * scaleY;
+        if (this.controlX !== undefined && this.controlY !== undefined) {
+            this.controlX = this.controlX * scaleX;
+            this.controlY = this.controlY * scaleY;
+        }
+        // Recalculate dimensions from scaled endpoints
+        const { minX, minY, maxX, maxY } = this.calculateBoundingBox();
+        this.width = maxX - minX;
+        this.height = maxY - minY;
+        this.x = minX;
+        this.y = minY;
+        // Set the new position
+        this.translateX = x;
+        this.translateY = y;
+        this._adjustedPoints = null;
+        this._clipInfo = null;
+        this._core.store.objects.update(this);
+        // Update anchors after the line is updated
+        this._core.anchorManager.updateAnchorsForObject(this.id);
+        if (this.startAnchor) {
+            this._core.anchorManager.updateAnchorsForObject(this.startAnchor.objectId);
+        }
+        if (this.endAnchor) {
+            this._core.anchorManager.updateAnchorsForObject(this.endAnchor.objectId);
+        }
+    }
+    /**
+     * Sets the rotation angle of the line around its center.
+     * Invalidates cached adjusted points and clip info.
+     * @param value - Rotation angle in radians
+     */
+    rotate(value) {
+        this.rotation = value;
+        this._adjustedPoints = null;
+        this._clipInfo = null;
+        this._core.store.objects.update(this);
+    }
+    /**
+     * Moves the line by calculating the delta between start and end positions.
+     * Updates anchored objects if the line has anchor connections.
+     * @param startX - Starting X position of the drag in screen coordinates
+     * @param startY - Starting Y position of the drag in screen coordinates
+     * @param endX - Ending X position of the drag in screen coordinates
+     * @param endY - Ending Y position of the drag in screen coordinates
+     */
+    move(startX, startY, endX, endY) {
+        const deltaX = (startX - endX) / this._core.store.state.scale;
+        const deltaY = (startY - endY) / this._core.store.state.scale;
+        this.translateX += deltaX;
+        this.translateY += deltaY;
+        // If the line is anchored, we need to ensure the anchored endpoints stay at the target
+        if (this.startAnchor) {
+            this._core.anchorManager.updateAnchorsForObject(this.startAnchor.objectId);
+        }
+        if (this.endAnchor) {
+            this._core.anchorManager.updateAnchorsForObject(this.endAnchor.objectId);
+        }
+        this._adjustedPoints = null;
+        this._clipInfo = null;
+        this._core.store.objects.update(this);
+    }
+    /**
+     * Tests if a point intersects with the line within the stroke tolerance.
+     * Uses distance to line segment for straight lines, or distance to Bezier curve for curved lines.
+     * @param x - X coordinate of the point to test in world coordinates
+     * @param y - Y coordinate of the point to test in world coordinates
+     * @returns True if the point is within the stroke width tolerance of the line
+     */
+    hitTest(x, y) {
+        const minHitThreshold = 20;
+        const strokeWidth = Math.max(this.strokeWidth, minHitThreshold);
+        const halfStroke = strokeWidth / this.scale / 2;
+        if (this._adjustedPoints === null) {
+            this._adjustedPoints = this.computeAdjustedPoints();
+        }
+        // For curved lines, use distance to the Bezier curve
+        if (this.controlX !== undefined && this.controlY !== undefined) {
+            const clip = this.getClipInfo();
+            const startT = clip.start?.t ?? 0;
+            const endT = clip.end?.t ?? 1;
+            const distance = this.pointToBezierDistance(x, y, startT, endT);
+            return distance <= halfStroke;
+        }
+        // For straight lines, use distance to line segment
+        const clip = this.getClipInfo();
+        const p1 = clip.start ? [clip.start.x, clip.start.y] : this._adjustedPoints[0];
+        const p2 = clip.end ? [clip.end.x, clip.end.y] : this._adjustedPoints[1];
+        const distance = this.pointToLineSegmentDistance(x, y, p1[0], p1[1], p2[0], p2[1]);
+        return distance <= halfStroke;
+    }
+    /**
+     * Tests if the line intersects with or is contained within a polygon.
+     * Checks endpoint containment, polygon vertex proximity, curve sampling for Bezier curves,
+     * and line-edge intersections for straight lines.
+     * @param polygon - The polygon to test intersection with, defined by four corner points
+     * @returns True if any part of the line intersects with the polygon
+     */
+    hitTestPolygon(polygon) {
+        const halfStroke = this.strokeWidth / this.scale / 2;
+        if (this._adjustedPoints === null) {
+            this._adjustedPoints = this.computeAdjustedPoints();
+        }
+        const clip = this.getClipInfo();
+        const polyPoints = [
+            { x: polygon.bottomLeft.x, y: polygon.bottomLeft.y },
+            { x: polygon.bottomRight.x, y: polygon.bottomRight.y },
+            { x: polygon.topRight.x, y: polygon.topRight.y },
+            { x: polygon.topLeft.x, y: polygon.topLeft.y },
+        ];
+        // Check if any endpoint is inside the polygon
+        // Use clipped endpoints
+        const p1 = clip.start ? [clip.start.x, clip.start.y] : this._adjustedPoints[0];
+        const p2 = clip.end ? [clip.end.x, clip.end.y] : this._adjustedPoints[1];
+        const endpoints = [p1, p2];
+        for (const [px, py] of endpoints) {
+            if (KritzelGeometryHelper.isPointInPolygon({ x: px, y: py }, polyPoints)) {
+                return true;
+            }
+        }
+        // Check if any polygon vertex is on the line/curve
+        for (const pt of polyPoints) {
+            if (this.hitTest(pt.x, pt.y)) {
+                return true;
+            }
+        }
+        // For curved lines, sample points along the curve and check if any are inside the polygon
+        if (this.controlX !== undefined && this.controlY !== undefined) {
+            const p0 = this._adjustedPoints[0];
+            const p2 = this._adjustedPoints[1];
+            const controlAdjusted = this.computeAdjustedControlPoint();
+            const startT = clip.start?.t ?? 0;
+            const endT = clip.end?.t ?? 1;
+            const samples = 20;
+            for (let i = 0; i <= samples; i++) {
+                const fraction = i / samples;
+                const t = startT + fraction * (endT - startT);
+                const oneMinusT = 1 - t;
+                const bx = oneMinusT * oneMinusT * p0[0] + 2 * oneMinusT * t * controlAdjusted[0] + t * t * p2[0];
+                const by = oneMinusT * oneMinusT * p0[1] + 2 * oneMinusT * t * controlAdjusted[1] + t * t * p2[1];
+                if (KritzelGeometryHelper.isPointInPolygon({ x: bx, y: by }, polyPoints)) {
+                    return true;
+                }
+                // Also check if curve point is within stroke distance of polygon edges
+                for (let j = 0; j < polyPoints.length; j++) {
+                    const q1 = polyPoints[j];
+                    const q2 = polyPoints[(j + 1) % polyPoints.length];
+                    const d = this.pointToLineSegmentDistance(bx, by, q1.x, q1.y, q2.x, q2.y);
+                    if (d <= halfStroke) {
+                        return true;
+                    }
+                }
+            }
+            return false;
+        }
+        // For straight lines, check if line intersects any polygon edge
+        const checkP1 = { x: p1[0], y: p1[1] };
+        const checkP2 = { x: p2[0], y: p2[1] };
+        for (let j = 0; j < polyPoints.length; j++) {
+            const q1 = polyPoints[j];
+            const q2 = polyPoints[(j + 1) % polyPoints.length];
+            if (KritzelGeometryHelper.intersectLines(checkP1, checkP2, q1, q2)) {
+                return true;
+            }
+            // Check distance from polygon edges to line segment
+            const d1 = this.pointToLineSegmentDistance(q1.x, q1.y, checkP1.x, checkP1.y, checkP2.x, checkP2.y);
+            const d2 = this.pointToLineSegmentDistance(q2.x, q2.y, checkP1.x, checkP1.y, checkP2.x, checkP2.y);
+            const d3 = this.pointToLineSegmentDistance(checkP1.x, checkP1.y, q1.x, q1.y, q2.x, q2.y);
+            const d4 = this.pointToLineSegmentDistance(checkP2.x, checkP2.y, q1.x, q1.y, q2.x, q2.y);
+            const minD = Math.min(d1, d2, d3, d4);
+            if (minD <= halfStroke) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Updates the translation position of the line without recalculating dimensions.
+     * Invalidates cached adjusted points and clip info.
+     * @param x - New X translation in world coordinates
+     * @param y - New Y translation in world coordinates
+     */
+    updatePosition(x, y) {
+        this.translateX = x;
+        this.translateY = y;
+        this._adjustedPoints = null;
+        this._clipInfo = null;
+        this._core.store.objects.update(this);
+    }
+    /**
+     * Updates a specific endpoint of the line (start or end).
+     * Recalculates the bounding box dimensions and adjusts translation to maintain
+     * the visual position after the origin shift, accounting for rotation.
+     * @param handleType - Which endpoint to update: 'start' or 'end'
+     * @param newX - New X coordinate in viewBox-local space (relative to x, y origin)
+     * @param newY - New Y coordinate in viewBox-local space (relative to x, y origin)
+     */
+    updateEndpoint(handleType, newX, newY) {
+        // Update the appropriate endpoint
+        if (handleType === 'start') {
+            this.startX = newX;
+            this.startY = newY;
+        }
+        else {
+            this.endX = newX;
+            this.endY = newY;
+        }
+        const oldWidth = this.width;
+        const oldHeight = this.height;
+        // Recalculate the bounding box (viewBox dimensions)
+        const { minX, minY, maxX, maxY } = this.calculateBoundingBox();
+        // Calculate the change in origin (in local coordinates)
+        const deltaX = minX - this.x;
+        const deltaY = minY - this.y;
+        const newWidth = maxX - minX;
+        const newHeight = maxY - minY;
+        const deltaWidth = newWidth - oldWidth;
+        const deltaHeight = newHeight - oldHeight;
+        const deltaCx = deltaWidth / 2;
+        const deltaCy = deltaHeight / 2;
+        // Update viewBox dimensions
+        this.x = minX;
+        this.y = minY;
+        this.width = newWidth;
+        this.height = newHeight;
+        // Rotate the delta to world coordinates before applying to translate
+        const cos = Math.cos(this.rotation);
+        const sin = Math.sin(this.rotation);
+        // We need to compensate for:
+        // 1. The shift of the top-left corner (deltaX, deltaY)
+        // 2. The shift of the center point (deltaCx, deltaCy) which affects rotation pivot
+        // Formula: DeltaT = R(DeltaPos + DeltaCenter) - DeltaCenter
+        const vx = deltaX + deltaCx;
+        const vy = deltaY + deltaCy;
+        const rotatedVx = vx * cos - vy * sin;
+        const rotatedVy = vx * sin + vy * cos;
+        const correctionX = rotatedVx - deltaCx;
+        const correctionY = rotatedVy - deltaCy;
+        // Adjust translateX/Y to compensate for the origin shift
+        // so the line stays visually in the same position
+        this.translateX += correctionX / this.scale;
+        this.translateY += correctionY / this.scale;
+        // Clear cached adjusted points
+        this._adjustedPoints = null;
+        this._clipInfo = null;
+        this._core.store.objects.update(this);
+    }
+    /**
+     * Updates the control point for a quadratic Bezier curve.
+     * Recalculates bounding box and adjusts translation to maintain visual position.
+     * Pass undefined for both parameters to convert the line back to a straight line.
+     * @param newX - New X coordinate for the control point, or undefined to remove
+     * @param newY - New Y coordinate for the control point, or undefined to remove
+     */
+    updateControlPoint(newX, newY) {
+        this.controlX = newX;
+        this.controlY = newY;
+        const oldWidth = this.width;
+        const oldHeight = this.height;
+        // Recalculate the bounding box (viewBox dimensions)
+        const { minX, minY, maxX, maxY } = this.calculateBoundingBox();
+        // Calculate the change in origin (in local coordinates)
+        const deltaX = minX - this.x;
+        const deltaY = minY - this.y;
+        const newWidth = maxX - minX;
+        const newHeight = maxY - minY;
+        const deltaWidth = newWidth - oldWidth;
+        const deltaHeight = newHeight - oldHeight;
+        const deltaCx = deltaWidth / 2;
+        const deltaCy = deltaHeight / 2;
+        // Update viewBox dimensions
+        this.x = minX;
+        this.y = minY;
+        this.width = newWidth;
+        this.height = newHeight;
+        // Rotate the delta to world coordinates before applying to translate
+        const cos = Math.cos(this.rotation);
+        const sin = Math.sin(this.rotation);
+        // We need to compensate for:
+        // 1. The shift of the top-left corner (deltaX, deltaY)
+        // 2. The shift of the center point (deltaCx, deltaCy) which affects rotation pivot
+        // Formula: DeltaT = R(DeltaPos + DeltaCenter) - DeltaCenter
+        const vx = deltaX + deltaCx;
+        const vy = deltaY + deltaCy;
+        const rotatedVx = vx * cos - vy * sin;
+        const rotatedVy = vx * sin + vy * cos;
+        const correctionX = rotatedVx - deltaCx;
+        const correctionY = rotatedVy - deltaCy;
+        // Adjust translateX/Y to compensate for the origin shift
+        // so the line stays visually in the same position
+        this.translateX += correctionX / this.scale;
+        this.translateY += correctionY / this.scale;
+        // Clear cached adjusted points
+        this._adjustedPoints = null;
+        this._clipInfo = null;
+        this._core.store.objects.update(this);
+    }
+    /**
+     * Computes the line endpoints in world coordinates, accounting for rotation,
+     * scale, and translation transformations.
+     * @returns Array of two points [[startX, startY], [endX, endY]] in world coordinates
+     */
+    computeAdjustedPoints() {
+        const points = [
+            [this.startX, this.startY],
+            [this.endX, this.endY],
+        ];
+        const angle = this.rotation;
+        const cos = Math.cos(angle);
+        const sin = Math.sin(angle);
+        const xs = points.map(p => p[0]);
+        const ys = points.map(p => p[1]);
+        const pivot = {
+            x: (Math.min(...xs) + Math.max(...xs)) / 2,
+            y: (Math.min(...ys) + Math.max(...ys)) / 2,
+        };
+        const { x: cx, y: cy } = pivot;
+        const rotatedPoints = points.map(([x, y]) => {
+            const dx = x - cx;
+            const dy = y - cy;
+            return [cx + dx * cos - dy * sin, cy + dx * sin + dy * cos];
+        });
+        return rotatedPoints.map(([px, py]) => [(px - this.x) / this.scale + this.translateX, (py - this.y) / this.scale + this.translateY]);
+    }
+    /**
+     * Calculates the minimum distance from a point to a line segment.
+     * Uses parametric projection to find the closest point on the segment.
+     * @param x - X coordinate of the test point
+     * @param y - Y coordinate of the test point
+     * @param x1 - X coordinate of the segment start
+     * @param y1 - Y coordinate of the segment start
+     * @param x2 - X coordinate of the segment end
+     * @param y2 - Y coordinate of the segment end
+     * @returns The minimum distance from the point to the line segment
+     */
+    pointToLineSegmentDistance(x, y, x1, y1, x2, y2) {
+        const A = x - x1;
+        const B = y - y1;
+        const C = x2 - x1;
+        const D = y2 - y1;
+        const dot = A * C + B * D;
+        const len_sq = C * C + D * D;
+        let param = -1;
+        if (len_sq !== 0) {
+            param = dot / len_sq;
+        }
+        let xx, yy;
+        if (param < 0) {
+            xx = x1;
+            yy = y1;
+        }
+        else if (param > 1) {
+            xx = x2;
+            yy = y2;
+        }
+        else {
+            xx = x1 + param * C;
+            yy = y1 + param * D;
+        }
+        const dx = x - xx;
+        const dy = y - yy;
+        return Math.sqrt(dx * dx + dy * dy);
+    }
+    /**
+     * Calculates the minimum distance from a point to a quadratic Bezier curve.
+     * Uses sampling along the curve (20 samples) to approximate the closest point.
+     * @param x - X coordinate of the test point in world coordinates
+     * @param y - Y coordinate of the test point in world coordinates
+     * @param startT - Start parameter for curve sampling (0-1), used for clipped curves
+     * @param endT - End parameter for curve sampling (0-1), used for clipped curves
+     * @returns The minimum distance from the point to the sampled curve
+     */
+    pointToBezierDistance(x, y, startT = 0, endT = 1) {
+        if (this._adjustedPoints === null) {
+            this._adjustedPoints = this.computeAdjustedPoints();
+        }
+        const p0 = this._adjustedPoints[0];
+        const p2 = this._adjustedPoints[1];
+        // Calculate the adjusted control point
+        const controlAdjusted = this.computeAdjustedControlPoint();
+        let minDistance = Infinity;
+        const samples = 20; // Number of samples along the curve
+        for (let i = 0; i <= samples; i++) {
+            const fraction = i / samples;
+            const t = startT + fraction * (endT - startT);
+            const oneMinusT = 1 - t;
+            // Quadratic Bezier: B(t) = (1-t)²P₀ + 2(1-t)tP₁ + t²P₂
+            const bx = oneMinusT * oneMinusT * p0[0] + 2 * oneMinusT * t * controlAdjusted[0] + t * t * p2[0];
+            const by = oneMinusT * oneMinusT * p0[1] + 2 * oneMinusT * t * controlAdjusted[1] + t * t * p2[1];
+            const dx = x - bx;
+            const dy = y - by;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            if (distance < minDistance) {
+                minDistance = distance;
+            }
+        }
+        return minDistance;
+    }
+    /**
+     * Retrieves or computes the clip information for anchored line endpoints.
+     * Caches the result to avoid recalculation on subsequent calls.
+     * @returns Object containing optional start and end clip points with world coordinates
+     *          and parametric t values for curve clipping
+     */
+    getClipInfo() {
+        if (this._clipInfo)
+            return this._clipInfo;
+        const startAnchor = this.startAnchor;
+        const endAnchor = this.endAnchor;
+        const result = {};
+        if (startAnchor) {
+            const target = this._core.anchorManager.findAnchorTarget(this, 'start');
+            if (target) {
+                const clip = this._core.anchorManager.computeAnchorClipInfo(this, 'start', target);
+                if (clip) {
+                    result.start = { x: clip.worldX, y: clip.worldY, t: clip.t };
+                }
+            }
+        }
+        if (endAnchor) {
+            const target = this._core.anchorManager.findAnchorTarget(this, 'end');
+            if (target) {
+                const clip = this._core.anchorManager.computeAnchorClipInfo(this, 'end', target);
+                if (clip) {
+                    result.end = { x: clip.worldX, y: clip.worldY, t: clip.t };
+                }
+            }
+        }
+        this._clipInfo = result;
+        return result;
+    }
+    /**
+     * Computes the adjusted control point in world coordinates.
+     * Applies rotation around the bounding box center, then scale and translation transforms.
+     * @returns Array [x, y] representing the control point in world coordinates,
+     *          or the midpoint of the line if no control point is defined
+     */
+    computeAdjustedControlPoint() {
+        if (this.controlX === undefined || this.controlY === undefined) {
+            // Return midpoint if no control point
+            return [(this.startX + this.endX) / 2, (this.startY + this.endY) / 2];
+        }
+        const angle = this.rotation;
+        const cos = Math.cos(angle);
+        const sin = Math.sin(angle);
+        // Calculate pivot (center of bounding box for endpoints)
+        const xs = [this.startX, this.endX];
+        const ys = [this.startY, this.endY];
+        const pivot = {
+            x: (Math.min(...xs) + Math.max(...xs)) / 2,
+            y: (Math.min(...ys) + Math.max(...ys)) / 2,
+        };
+        const { x: cx, y: cy } = pivot;
+        // Rotate control point around pivot
+        const dx = this.controlX - cx;
+        const dy = this.controlY - cy;
+        const rotatedX = cx + dx * cos - dy * sin;
+        const rotatedY = cy + dx * sin + dy * cos;
+        // Transform to world coordinates
+        return [(rotatedX - this.x) / this.scale + this.translateX, (rotatedY - this.y) / this.scale + this.translateY];
+    }
+    /**
+     * Gets the bounding polygon of the line in world coordinates, accounting for rotation.
+     * Used for selection bounds and intersection testing.
+     * @returns A polygon with four corner points (topLeft, topRight, bottomRight, bottomLeft)
+     *          transformed to world coordinates with rotation applied
+     */
+    get rotatedPolygon() {
+        const padding = this.padding;
+        // Use the bounding box which accounts for curve extrema
+        const { minX, minY, maxX, maxY } = KritzelLine.calculateBoundingBox(this.startX, this.startY, this.endX, this.endY, this.controlX, this.controlY, this.strokeWidth);
+        // Convert to local coordinates (relative to this.x, this.y)
+        const localMinX = minX - this.x + padding;
+        const localMinY = minY - this.y + padding;
+        const localMaxX = maxX - this.x + padding;
+        const localMaxY = maxY - this.y + padding;
+        const c1 = { x: localMinX, y: localMinY }; // top-left
+        const c2 = { x: localMaxX, y: localMinY }; // top-right
+        const c3 = { x: localMaxX, y: localMaxY }; // bottom-right
+        const c4 = { x: localMinX, y: localMaxY }; // bottom-left
+        const cx = this.totalWidth / 2;
+        const cy = this.totalHeight / 2;
+        const angle = this.rotation;
+        const cos = Math.cos(angle);
+        const sin = Math.sin(angle);
+        const transform = (p) => {
+            const rx = (p.x - cx) * cos - (p.y - cy) * sin + cx;
+            const ry = (p.x - cx) * sin + (p.y - cy) * cos + cy;
+            return {
+                x: rx / this.scale + this.translateX,
+                y: ry / this.scale + this.translateY,
+            };
+        };
+        return {
+            topLeft: transform(c1),
+            topRight: transform(c2),
+            bottomRight: transform(c3),
+            bottomLeft: transform(c4),
+        };
+    }
+    /**
+     * Calculates the tight bounding box for a quadratic Bezier curve or straight line.
+     * For curves, finds extrema points where the derivative equals zero to ensure
+     * the bounding box encompasses the entire curve arc.
+     * @param startX - X coordinate of the line start point
+     * @param startY - Y coordinate of the line start point
+     * @param endX - X coordinate of the line end point
+     * @param endY - Y coordinate of the line end point
+     * @param controlX - X coordinate of the control point (undefined for straight lines)
+     * @param controlY - Y coordinate of the control point (undefined for straight lines)
+     * @param strokeWidth - Width of the line stroke for padding calculation
+     * @returns Object with minX, minY, maxX, maxY including stroke width padding
+     */
+    static calculateBoundingBox(startX, startY, endX, endY, controlX, controlY, strokeWidth) {
+        let minX = Math.min(startX, endX);
+        let minY = Math.min(startY, endY);
+        let maxX = Math.max(startX, endX);
+        let maxY = Math.max(startY, endY);
+        if (controlX !== undefined && controlY !== undefined) {
+            // For a quadratic Bezier: B(t) = (1-t)²P₀ + 2(1-t)tP₁ + t²P₂
+            // Derivative: B'(t) = 2(1-t)(P₁-P₀) + 2t(P₂-P₁) = 0
+            // Solving for t: t = (P₀ - P₁) / (P₀ - 2P₁ + P₂)
+            // Find extrema for X
+            const aX = startX - 2 * controlX + endX;
+            if (aX !== 0) {
+                const tX = (startX - controlX) / aX;
+                if (tX > 0 && tX < 1) {
+                    const extremaX = (1 - tX) * (1 - tX) * startX + 2 * (1 - tX) * tX * controlX + tX * tX * endX;
+                    minX = Math.min(minX, extremaX);
+                    maxX = Math.max(maxX, extremaX);
+                }
+            }
+            // Find extrema for Y
+            const aY = startY - 2 * controlY + endY;
+            if (aY !== 0) {
+                const tY = (startY - controlY) / aY;
+                if (tY > 0 && tY < 1) {
+                    const extremaY = (1 - tY) * (1 - tY) * startY + 2 * (1 - tY) * tY * controlY + tY * tY * endY;
+                    minY = Math.min(minY, extremaY);
+                    maxY = Math.max(maxY, extremaY);
+                }
+            }
+        }
+        const halfStroke = strokeWidth / 2;
+        return {
+            minX: minX - halfStroke,
+            minY: minY - halfStroke,
+            maxX: maxX + halfStroke,
+            maxY: maxY + halfStroke,
+        };
+    }
+    /**
+     * Calculates the bounding box for this line instance using the current endpoint,
+     * control point, and stroke width values.
+     * @returns Object with minX, minY, maxX, maxY bounds including stroke width padding
+     */
+    calculateBoundingBox() {
+        return KritzelLine.calculateBoundingBox(this.startX, this.startY, this.endX, this.endY, this.controlX, this.controlY, this.strokeWidth);
+    }
+    /**
+     * Serializes the line while excluding transient cache fields.
+     * @returns A serializable line object without runtime caches
+     */
+    serialize() {
+        const serialized = super.serialize();
+        delete serialized._adjustedPoints;
+        delete serialized._clipInfo;
+        return serialized;
+    }
+    /**
+     * Deserializes and resets transient caches so geometry is recomputed lazily.
+     * @param object - The serialized line object
+     * @returns This instance cast to type T
+     */
+    deserialize(object) {
+        const result = super.deserialize(object);
+        this._adjustedPoints = null;
+        this._clipInfo = null;
+        return result;
+    }
+    /**
+     * Recalculates and updates the width, height, x, y, and translation properties
+     * based on the current endpoint positions and stroke width.
+     * Called during construction and after endpoint changes.
+     */
+    updateDimensions() {
+        const { minX, minY, maxX, maxY } = this.calculateBoundingBox();
+        this.width = maxX - minX;
+        this.height = maxY - minY;
+        this.x = minX;
+        this.y = minY;
+        this.translateX = (this.x + this.translateX) / this.scale;
+        this.translateY = (this.y + this.translateY) / this.scale;
+    }
+    /**
+     * Gets the unique SVG marker ID for the arrow head at the start of the line.
+     * Used in SVG defs for marker-start attribute.
+     * @returns A unique marker ID string in the format "arrow-start-{lineId}"
+     */
+    get startMarkerId() {
+        return `arrow-start-${this.id}`;
+    }
+    /**
+     * Gets the unique SVG marker ID for the arrow head at the end of the line.
+     * Used in SVG defs for marker-end attribute.
+     * @returns A unique marker ID string in the format "arrow-end-{lineId}"
+     */
+    get endMarkerId() {
+        return `arrow-end-${this.id}`;
+    }
+    /**
+     * Gets the arrow head size for the specified end of the line.
+     * @param end - Which end to get the arrow size for: 'start' or 'end'
+     * @returns The configured arrow size, or strokeWidth * 3 as default
+     */
+    getArrowSize(end) {
+        const config = end === 'start' ? this.arrows?.start : this.arrows?.end;
+        return config?.size ?? this.strokeWidth * 3;
+    }
+    /**
+     * Gets the resolved fill color for the arrow head at the specified end.
+     * Resolves theme-aware colors to the appropriate value for the current theme.
+     * @param end - Which end to get the arrow fill for: 'start' or 'end'
+     * @returns The resolved CSS color string for the arrow fill
+     */
+    getArrowFill(end) {
+        const config = end === 'start' ? this.arrows?.start : this.arrows?.end;
+        const color = config?.fill ?? this.stroke;
+        return KritzelColorHelper.resolveThemeColor(color);
+    }
+    /**
+     * Generates SVG path data for an arrow head based on the given style.
+     * All paths are designed to fit in a 10x10 viewBox with the tip at (10, 5).
+     * @param style - The arrow head style: 'triangle' (filled), 'open' (outline),
+     *                'diamond' (rhombus), or 'circle'. Defaults to 'triangle'.
+     * @returns SVG path data string for use in a marker element
+     */
+    getArrowPath(style = 'triangle') {
+        switch (style) {
+            case 'triangle':
+                return 'M 0 0 L 10 5 L 0 10 z';
+            case 'open':
+                return 'M 0 0 L 10 5 L 0 10';
+            case 'diamond':
+                return 'M 0 5 L 5 0 L 10 5 L 5 10 z';
+            case 'circle':
+                return 'M 5,0 A 5,5 0 1,1 5,10 A 5,5 0 1,1 5,0';
+            default:
+                return 'M 0 0 L 10 5 L 0 10 z';
+        }
+    }
+    /**
+     * Checks if an arrow head is enabled at the start of the line.
+     * @returns True if the start arrow configuration exists and is enabled
+     */
+    get hasStartArrow() {
+        return this.arrows?.start?.enabled === true;
+    }
+    /**
+     * Checks if an arrow head is enabled at the end of the line.
+     * @returns True if the end arrow configuration exists and is enabled
+     */
+    get hasEndArrow() {
+        return this.arrows?.end?.enabled === true;
+    }
+}
+
+const kritzelAwarenessCursorsCss = () => `:host{display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:1}.awareness-cursor{position:absolute;top:0;left:0;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,               opacity 300ms ease;will-change:transform}.awareness-cursor.stale{opacity:0}.awareness-cursor.tracking-object{transition-duration:0ms}.cursor-arrow{filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}.cursor-label{position:absolute;left:16px;top:16px;white-space:nowrap;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;user-select:none}.edge-indicator{position:absolute;top:-12px;left:-12px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,               opacity 300ms ease;will-change:transform;pointer-events:auto;user-select:none;cursor:pointer}.edge-indicator.stale{opacity:0}.edge-indicator.tracking-object{transition-duration:0ms}.edge-arrow{position:absolute;filter:drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));transition:opacity 300ms ease}.edge-arrow.stale{opacity:0}.edge-label{position:absolute;white-space:nowrap;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;opacity:0;transform-origin:center;transition:opacity 150ms ease}.edge-indicator:hover .edge-label{opacity:1}.remote-selection-box{position:absolute;top:0;left:0;border-width:2px;border-style:solid;pointer-events:none;will-change:transform, width, height;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,               width var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,               height var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out}`;
+
+const STALE_THRESHOLD_MS = 10_000;
+const REMOVE_THRESHOLD_MS = 30_000;
+const CLEANUP_INTERVAL_MS = 3_000;
+const KritzelAwarenessCursors = /*@__PURE__*/ proxyCustomElement(class KritzelAwarenessCursors extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    core;
+    showEdgeIndicators = true;
+    edgeIndicatorPadding = 8;
+    remoteCursors = new Map();
+    objectVersion = 0;
+    cleanupIntervalId;
+    objectChangeRafId = null;
+    removeAwarenessChangeListener;
+    removeObjectsChangeListener;
+    componentDidLoad() {
+        this.removeAwarenessChangeListener = this.core.store.objects?.onAwarenessChange(states => {
+            this.handleAwarenessChange(states);
+        });
+        this.removeObjectsChangeListener = this.core.store.objects?.onObjectsChange(() => {
+            this.handleRemoteObjectChange();
+        });
+        this.cleanupIntervalId = setInterval(() => {
+            this.cleanupStaleCursors();
+        }, CLEANUP_INTERVAL_MS);
+        if (this.cleanupIntervalId && typeof this.cleanupIntervalId.unref === 'function') {
+            this.cleanupIntervalId.unref();
+        }
+    }
+    disconnectedCallback() {
+        if (this.removeAwarenessChangeListener) {
+            this.removeAwarenessChangeListener();
+            this.removeAwarenessChangeListener = undefined;
+        }
+        if (this.removeObjectsChangeListener) {
+            this.removeObjectsChangeListener();
+            this.removeObjectsChangeListener = undefined;
+        }
+        if (this.cleanupIntervalId && typeof globalThis.clearInterval === 'function') {
+            globalThis.clearInterval(this.cleanupIntervalId);
+            this.cleanupIntervalId = undefined;
+        }
+        if (this.objectChangeRafId !== null && typeof globalThis.cancelAnimationFrame === 'function') {
+            globalThis.cancelAnimationFrame(this.objectChangeRafId);
+            this.objectChangeRafId = null;
+        }
+    }
+    handleAwarenessChange(states) {
+        const localClientId = this.core.store.objects?.localClientId;
+        const now = Date.now();
+        const updated = new Map(this.remoteCursors);
+        // Track which clientIds are still present
+        const activeClientIds = new Set();
+        states.forEach((state, clientId) => {
+            if (clientId === localClientId)
+                return;
+            if (!state.user)
+                return;
+            activeClientIds.add(clientId);
+            const user = state.user;
+            const cursor = state.cursor;
+            const activeObjectId = state.activeObjectId || null;
+            const selectionBox = state.selectionBox || null;
+            const existing = updated.get(clientId);
+            const cursorMoved = !existing ||
+                !existing.cursor !== !cursor ||
+                (cursor && existing.cursor && (cursor.x !== existing.cursor.x || cursor.y !== existing.cursor.y));
+            updated.set(clientId, {
+                clientId,
+                user,
+                cursor,
+                activeObjectId,
+                selectionBox,
+                lastUpdated: now,
+                lastCursorMove: cursorMoved ? now : (existing?.lastCursorMove ?? now),
+            });
+        });
+        // Remove cursors for disconnected clients
+        for (const clientId of updated.keys()) {
+            if (!activeClientIds.has(clientId)) {
+                updated.delete(clientId);
+            }
+        }
+        this.remoteCursors = updated;
+    }
+    cleanupStaleCursors() {
+        const now = Date.now();
+        let changed = false;
+        const updated = new Map(this.remoteCursors);
+        for (const [clientId, cursor] of updated) {
+            if (now - cursor.lastUpdated > REMOVE_THRESHOLD_MS) {
+                updated.delete(clientId);
+                changed = true;
+            }
+            else if (!changed && now - cursor.lastCursorMove > STALE_THRESHOLD_MS) {
+                changed = true;
+            }
+        }
+        if (changed) {
+            this.remoteCursors = updated;
+        }
+    }
+    isStale(cursor) {
+        return Date.now() - cursor.lastCursorMove > STALE_THRESHOLD_MS;
+    }
+    hasActiveDrawingCursors() {
+        for (const cursor of this.remoteCursors.values()) {
+            if (cursor.activeObjectId)
+                return true;
+        }
+        return false;
+    }
+    handleRemoteObjectChange() {
+        if (!this.hasActiveDrawingCursors())
+            return;
+        // Debounce via rAF to batch multiple rapid Yjs updates into a single re-render
+        if (this.objectChangeRafId !== null)
+            return;
+        this.objectChangeRafId = requestAnimationFrame(() => {
+            this.objectChangeRafId = null;
+            this.objectVersion++;
+        });
+    }
+    getActiveObjectTip(objectId) {
+        const obj = this.core.store.objects?.findById(objectId);
+        if (!obj)
+            return null;
+        if (obj instanceof KritzelPath && !obj.isCompleted) {
+            const lastPoint = obj.points[obj.points.length - 1];
+            if (!lastPoint)
+                return null;
+            return {
+                x: (lastPoint[0] - obj.x) / obj.scale + obj.translateX,
+                y: (lastPoint[1] - obj.y) / obj.scale + obj.translateY,
+            };
+        }
+        if (obj instanceof KritzelLine && !obj.isCompleted) {
+            return {
+                x: (obj.endX - obj.x) / obj.scale + obj.translateX,
+                y: (obj.endY - obj.y) / obj.scale + obj.translateY,
+            };
+        }
+        // Shapes normalize their bounding box (x/y always top-left, width/height
+        // always positive), so we can't determine which corner the user is actively
+        // dragging. Fall back to the throttled awareness cursor position instead.
+        return null;
+    }
+    worldToScreen(worldX, worldY) {
+        const { scale, translateX, translateY } = this.core.store.state;
+        return {
+            x: worldX * scale + translateX,
+            y: worldY * scale + translateY,
+        };
+    }
+    isInViewport(screenX, screenY) {
+        const { viewportWidth, viewportHeight } = this.core.store.state;
+        return screenX >= 0 && screenX <= viewportWidth && screenY >= 0 && screenY <= viewportHeight;
+    }
+    clampToEdge(screenX, screenY) {
+        const { viewportWidth, viewportHeight } = this.core.store.state;
+        const padding = this.edgeIndicatorPadding; // 8px
+        // Clamp symmetrically
+        const clampedX = Math.max(padding, Math.min(viewportWidth - padding, screenX));
+        const clampedY = Math.max(padding, Math.min(viewportHeight - padding, screenY));
+        // Determine nearest edge to position avatar inside
+        const distLeft = clampedX - padding;
+        const distRight = (viewportWidth - padding) - clampedX;
+        const distTop = clampedY - padding;
+        const distBottom = (viewportHeight - padding) - clampedY;
+        let edge = 'top';
+        const minDist = Math.min(distLeft, distRight, distTop, distBottom);
+        if (minDist === distLeft)
+            edge = 'left';
+        else if (minDist === distRight)
+            edge = 'right';
+        else if (minDist === distTop)
+            edge = 'top';
+        else
+            edge = 'bottom';
+        const angle = Math.atan2(screenY - clampedY, screenX - clampedX);
+        return { x: clampedX, y: clampedY, angle, edge };
+    }
+    getUserDisplayName(user) {
+        if (user.displayName)
+            return user.displayName;
+        if (user.firstName || user.lastName) {
+            return [user.firstName, user.lastName].filter(Boolean).join(' ');
+        }
+        return 'Unknown';
+    }
+    getInitials(name) {
+        const parts = name.trim().split(/\s+/);
+        if (parts.length === 0 || (parts.length === 1 && parts[0].length <= 1)) {
+            return name;
+        }
+        if (parts.length === 1) {
+            return parts[0][0].toUpperCase();
+        }
+        return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+    }
+    render() {
+        const cursors = Array.from(this.remoteCursors.values());
+        return (h(Host, { key: '9be6694250bafe011be27301d1c7a53fc7957657' }, cursors.map(remoteCursor => {
+            if (!remoteCursor.cursor)
+                return null;
+            // When a remote user is actively drawing, derive cursor position from
+            // the object's latest coordinates (synced via Yjs) instead of the
+            // throttled awareness cursor position
+            let screen;
+            let trackingObject = false;
+            if (remoteCursor.activeObjectId) {
+                const tip = this.getActiveObjectTip(remoteCursor.activeObjectId);
+                if (tip) {
+                    trackingObject = true;
+                    screen = this.worldToScreen(tip.x, tip.y);
+                }
+                else {
+                    screen = this.worldToScreen(remoteCursor.cursor.x, remoteCursor.cursor.y);
+                }
+            }
+            else {
+                screen = this.worldToScreen(remoteCursor.cursor.x, remoteCursor.cursor.y);
+            }
+            const inViewport = this.isInViewport(screen.x, screen.y);
+            const stale = this.isStale(remoteCursor);
+            const color = remoteCursor.user.color || '#6B7280';
+            if (inViewport) {
+                return this.renderCursor(remoteCursor, screen.x, screen.y, color, stale, trackingObject);
+            }
+            if (this.showEdgeIndicators) {
+                return this.renderEdgeIndicator(remoteCursor, screen.x, screen.y, color, stale, trackingObject);
+            }
+            return null;
+        }), cursors.map(remoteCursor => {
+            if (!remoteCursor.selectionBox)
+                return null;
+            const color = remoteCursor.user.color || '#6B7280';
+            const box = remoteCursor.selectionBox;
+            const topLeft = this.worldToScreen(box.x, box.y);
+            const { scale } = this.core.store.state;
+            const screenWidth = box.width * scale;
+            const screenHeight = box.height * scale;
+            return (h("div", { key: `selection-box-${remoteCursor.clientId}`, class: "remote-selection-box", style: {
+                    transform: `translate(${topLeft.x}px, ${topLeft.y}px)`,
+                    width: `${screenWidth}px`,
+                    height: `${screenHeight}px`,
+                    backgroundColor: `color-mix(in srgb, ${color} 20%, transparent)`,
+                    borderColor: `color-mix(in srgb, ${color} 50%, transparent)`,
+                } }));
+        })));
+    }
+    renderCursor(cursor, screenX, screenY, color, stale, trackingObject) {
+        return (h("div", { key: `cursor-${cursor.clientId}`, class: { 'awareness-cursor': true, stale, 'tracking-object': trackingObject }, style: { transform: `translate(${screenX}px, ${screenY}px)` } }, h("svg", { class: "cursor-arrow", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M5 3L19 12L12 13L9 20L5 3Z", fill: color, stroke: "#ffffff", "stroke-width": "1.5", "stroke-linejoin": "round" })), h("span", { class: "cursor-label", style: { backgroundColor: color } }, this.getUserDisplayName(cursor.user))));
+    }
+    renderEdgeIndicator(cursor, screenX, screenY, color, stale, trackingObject) {
+        const clamped = this.clampToEdge(screenX, screenY);
+        const arrowDeg = (clamped.angle * 180) / Math.PI + 90;
+        // Position the username label opposite to the edge
+        const labelOffset = 20;
+        let labelX = 0;
+        let labelY = 0;
+        // Default transform origin is somewhat arbitrary without explicit layout
+        // We'll calculate simple translations relative to center point
+        if (clamped.edge === 'left') {
+            labelX = labelOffset;
+        }
+        else if (clamped.edge === 'right') {
+            labelX = -labelOffset;
+        }
+        else if (clamped.edge === 'top') {
+            labelY = labelOffset;
+        }
+        else if (clamped.edge === 'bottom') {
+            labelY = -labelOffset;
+        }
+        const displayName = this.getUserDisplayName(cursor.user);
+        return (h("div", { key: `edge-${cursor.clientId}`, class: { 'edge-indicator': true, stale, 'tracking-object': trackingObject }, style: {
+                transform: `translate(${clamped.x}px, ${clamped.y}px)`,
+            } }, h("svg", { class: { 'edge-arrow': true, stale }, width: "16", height: "16", viewBox: "0 0 16 16", style: { transform: `rotate(${arrowDeg}deg)` } }, h("path", { d: "M8 1L14 13H2L8 1Z", fill: color, stroke: "#ffffff", "stroke-width": "1.5", "stroke-linejoin": "round" })), h("span", { class: "edge-label", style: {
+                backgroundColor: color,
+                transform: `translate(${labelX}px, ${labelY}px)`,
+            } }, this.getInitials(displayName))));
+    }
+    static get style() { return kritzelAwarenessCursorsCss(); }
+}, [513, "kritzel-awareness-cursors", {
+        "core": [16],
+        "showEdgeIndicators": [4, "show-edge-indicators"],
+        "edgeIndicatorPadding": [2, "edge-indicator-padding"],
+        "remoteCursors": [32],
+        "objectVersion": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-awareness-cursors"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-awareness-cursors":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelAwarenessCursors);
+            }
+            break;
+    } });
+}
+
+export { KritzelBaseObject as K, KritzelPath as a, KritzelLine as b, KritzelAwarenessCursors as c, defineCustomElement as d, KritzelMathHelper as e, KritzelGeometryHelper as f };