@scaleflex/crop 2.0.1

package/dist/chunks/sfx-crop-1LGASewd.cjs

@@ -0,0 +1,353 @@
+"use strict";const K=require("lit"),C=require("lit/decorators.js"),Et=require("lit/directives/class-map.js"),Zt=80,Ot={src:"",variant:"classic",cropShape:"16:9",initialCrop:null,initialRotation:0,initialScale:1,customAspectRatios:[],minCropSize:20,availableShapes:["free","square","16:9","4:3","3:2","5:4","2:1","9:16","3:4","2:3","4:5","1:2"],minScale:.5,maxScale:5,theme:"light",showGrid:"interaction",showRotateSlider:!0,showZoomSlider:!0,showShapeSelector:!0,showRotateButton:!0,showFlipButton:!0,toolbarPosition:"top",showToolbar:!0,overlayColor:"rgba(0, 0, 0, 0.55)",handleSize:12,handleColor:"#ffffff",borderRadius:20,outputType:"image/png",outputQuality:.92,maxOutputWidth:0,maxOutputHeight:0,showBleedMargin:!1,bleedMarginSize:10,bleedMarginColor:"rgba(255, 0, 0, 0.5)",enableAnimations:!0,animationSpeed:1,keyboard:!0,pinchZoom:!0,wheelZoom:!0};function vt(t){return{...Ot,...t}}function z(t,e,o){return Math.min(Math.max(t,e),o)}function Z(t,e,o){return t+(e-t)*o}function at(t){return t*Math.PI/180}function Ut(t,e,o,i){const n=o-t,r=i-e;return Math.sqrt(n*n+r*r)}function St(t){const e=/^(\d+(?:\.\d+)?):(\d+(?:\.\d+)?)$/.exec(t.trim());if(!e)return null;const o=Number(e[1]),i=Number(e[2]);return!Number.isFinite(o)||!Number.isFinite(i)||o<=0||i<=0?null:o/i}function lt(t){switch(t){case"free":return null;case"rounded-rect":return null;case"square":case"circle":return 1;default:return St(t)}}function Gt(t,e,o,i,n,r){if(e===null)return jt(t,r,i,n);const p=i/n,l=e/p;let{x:a,y:c,width:u,height:y}=t;const m=o.includes("e")||o.includes("w"),d=o.includes("n")||o.includes("s");m&&!d?y=u/l:d&&!m?u=y*l:y=u/l;const s=t.x+t.width,f=t.y+t.height,x=t.x+t.width/2,S=t.y+t.height/2;let v;o.includes("w")?v=s:o.includes("e")?v=1-t.x:v=2*Math.min(x,1-x);let b;o.includes("n")?b=f:o.includes("s")?b=1-t.y:b=2*Math.min(S,1-S);const H=Math.min(1,v/u,b/y);H<1&&(u*=H,y*=H);const I=r/i,q=r/n;return u<I&&(u=I,y=u/l),y<q&&(y=q,u=y*l),o.includes("w")?a=s-u:o.includes("e")?a=t.x:a=x-u/2,o.includes("n")?c=f-y:o.includes("s")?c=t.y:c=S-y/2,a=z(a,0,1-u),c=z(c,0,1-y),{x:a,y:c,width:u,height:y}}function jt(t,e,o,i){const n=e/o,r=e/i;return{...t,width:Math.max(t.width,n),height:Math.max(t.height,r)}}function Qt(t,e,o,i,n,r,p){const l=t.rotation*Math.PI/180,a=Math.abs(Math.cos(l)),c=Math.abs(Math.sin(l)),u=i.width*a+i.height*c,y=i.width*c+i.height*a,m=Math.max(u/n,y/r),d=Math.min(m,p),s=z(t.scale,d,p),f=e/2-(i.x+i.width/2),x=o/2-(i.y+i.height/2),S=Math.max(0,(n*s-u)/2),v=Math.max(0,(r*s-y)/2);return{scale:s,panX:z(t.panX,(-S-f)/s,(S-f)/s),panY:z(t.panY,(-v-x)/s,(v-x)/s),minScale:d}}const _=.8;function zt(t,e,o){return!e||!o?t:t/(e/o)}function It(t="free",e=1,o=1){const i=lt(t);let n;if(i!==null){const r=zt(i,e,o);let p,l;r>=1?(p=_,l=p/r,l>_&&(l=_,p=l*r)):(l=_,p=l*r,p>_&&(p=_,l=p/r)),n={x:(1-p)/2,y:(1-l)/2,width:p,height:l}}else{const r=_;n={x:(1-r)/2,y:(1-r)/2,width:r,height:r}}return{quarterTurns:0,rotation:0,flipH:!1,flipV:!1,scale:1,panX:0,panY:0,cropRect:n}}function Jt(t){const e=t.quarterTurns-90;return{...t,quarterTurns:e,panX:0,panY:0}}function te(t){return{...t,flipH:!t.flipH}}function yt(t,e){const o=z(e,-45,45);let i=t.rotationPivot;if(o===0)i=void 0;else if(!i){const n=t.cropRect;i={x:n.x+n.width/2,y:n.y+n.height/2}}return{...t,rotation:o,rotationPivot:i}}function ot(t,e,o,i){return{...t,scale:z(e,o,i)}}function et(t,e){return{...t,cropRect:{x:z(e.x,0,1-e.width),y:z(e.y,0,1-e.height),width:z(e.width,0,1),height:z(e.height,0,1)}}}function mt(t,e,o=1,i=1){const n=lt(e);let r;if(n===null)r={...t.cropRect};else{const p=zt(n,o,i),{cropRect:l}=t,a=l.x+l.width/2,c=l.y+l.height/2;let u,y;p>=1?(u=_,y=u/p,y>_&&(y=_,u=y*p)):(y=_,u=y*p,u>_&&(u=_,y=u/p)),r={x:z(a-u/2,0,1-u),y:z(c-y/2,0,1-y),width:u,height:y}}return{...t,cropRect:r}}function Dt(t,e,o){return{...t,panX:t.panX+e,panY:t.panY+o}}function pt(t,e,o,i,n){const r=Math.round(n/90)%2!==0,p=r?e:t,l=r?t:e,a=Math.max(p/o,l/i);return{drawW:o*a,drawH:i*a}}function ee(t,e,o,i,n=!1){const{x:r,y:p,w:l,h:a}=o,c=r+l/2,u=p+a/2;t.save();const y=r+(i.cropRect.x+i.cropRect.width/2)*l,m=p+(i.cropRect.y+i.cropRect.height/2)*a,d=i.rotationPivot??{x:i.cropRect.x+i.cropRect.width/2,y:i.cropRect.y+i.cropRect.height/2},s=r+d.x*l,f=p+d.y*a;i.rotation!==0&&(t.translate(s,f),t.rotate(at(i.rotation)),t.translate(-s,-f)),(i.flipH!==1||i.flipV!==1)&&(t.translate(y,m),t.scale(i.flipH,i.flipV),t.translate(-y,-m)),t.translate(c,u),t.scale(i.scale,i.scale),t.translate(i.panX,i.panY),i.quarterTurns!==0&&t.rotate(at(i.quarterTurns));let x,S;if(n){const v=pt(l,a,e.naturalWidth,e.naturalHeight,i.quarterTurns);x=v.drawW,S=v.drawH}else{const b=Math.round(i.quarterTurns/90)%2!==0?Math.min(l,a)/Math.max(l,a):1;x=l*b,S=a*b}t.drawImage(e,-x/2,-S/2,x,S),t.restore()}let j=null;function re(t,e){j||(j=document.createElement("canvas")),(j.width!==t||j.height!==e)&&(j.width=t,j.height=e);const o=j.getContext("2d");return o.clearRect(0,0,t,e),o}function oe(t,e,o,i,n="rect",r=20,p="rgba(0, 0, 0, 0.55)"){const l=re(e,o);if(l.fillStyle=p,l.fillRect(0,0,e,o),l.globalCompositeOperation="destination-out",l.fillStyle="rgba(0, 0, 0, 1)",n==="circle"){const a=i.x+i.width/2,c=i.y+i.height/2,u=i.width/2,y=i.height/2;l.beginPath(),l.ellipse(a,c,u,y,0,0,Math.PI*2),l.fill()}else if(n==="rounded-rect"){const{x:a,y:c,width:u,height:y}=i,m=Math.min(r,u/2,y/2);l.beginPath(),l.moveTo(a+m,c),l.lineTo(a+u-m,c),l.arcTo(a+u,c,a+u,c+m,m),l.lineTo(a+u,c+y-m),l.arcTo(a+u,c+y,a+u-m,c+y,m),l.lineTo(a+m,c+y),l.arcTo(a,c+y,a,c+y-m,m),l.lineTo(a,c+m),l.arcTo(a,c,a+m,c,m),l.closePath(),l.fill()}else l.fillRect(i.x,i.y,i.width,i.height);l.globalCompositeOperation="source-over",t.drawImage(j,0,0)}const ie=12,ne=22,ut=11,ht=9,ae={frame:"#ffffff",frameShadow:"rgba(0, 0, 0, 0.3)",handleFill:"#ffffff",handleStroke:"rgba(0, 0, 0, 0.25)"};function se(t,e,o="rect",i=20,n=ae,r=!0){const p=o==="circle",l=o==="rounded-rect",{x:a,y:c,width:u,height:y}=e;if(t.save(),t.strokeStyle=n.frameShadow,t.lineWidth=1,p){const x=a+u/2,S=c+y/2,v=u/2-1,b=y/2-1;t.beginPath(),t.ellipse(x,S,v,b,0,0,Math.PI*2),t.stroke()}else l?(Ft(t,a+1,c+1,u-2,y-2,Math.min(i,u/2,y/2)),t.stroke()):t.strokeRect(a+1,c+1,u-2,y-2);if(t.strokeStyle=n.frame,t.lineWidth=2,p){const x=a+u/2,S=c+y/2,v=u/2,b=y/2;t.beginPath(),t.ellipse(x,S,v,b,0,0,Math.PI*2),t.stroke(),t.setLineDash([4,4]),t.strokeStyle=n.frameShadow,t.lineWidth=1,t.beginPath(),t.ellipse(x,S,v-1,b-1,0,0,Math.PI*2),t.stroke(),t.setLineDash([])}else if(l){const x=Math.min(i,u/2,y/2);Ft(t,a,c,u,y,x),t.stroke()}else t.strokeRect(a,c,u,y);if(!r){t.restore();return}t.fillStyle=n.handleFill,t.strokeStyle=n.handleStroke,t.lineWidth=1;const m=Math.min(ie/2,u/6,y/6),d=[{cx:a,cy:c},{cx:a+u,cy:c},{cx:a+u,cy:c+y},{cx:a,cy:c+y}];for(const x of d)t.beginPath(),t.arc(x.cx,x.cy,m,0,Math.PI*2),t.fill(),t.stroke();const s=a-ut,f=c-ut;t.beginPath(),t.arc(s,f,m,0,Math.PI*2),t.fill(),t.stroke(),t.fillStyle=n.handleStroke,t.beginPath(),t.arc(s,f,Math.max(2,m*.35),0,Math.PI*2),t.fill(),t.restore()}function Ft(t,e,o,i,n,r){r=Math.min(r,i/2,n/2),t.beginPath(),t.moveTo(e+r,o),t.lineTo(e+i-r,o),t.arcTo(e+i,o,e+i,o+r,r),t.lineTo(e+i,o+n-r),t.arcTo(e+i,o+n,e+i-r,o+n,r),t.lineTo(e+r,o+n),t.arcTo(e,o+n,e,o+n-r,r),t.lineTo(e,o+r),t.arcTo(e,o,e+r,o,r),t.closePath()}function le(t){const{x:e,y:o,width:i,height:n}=t,r=ne;return[{target:"move-handle",rect:{x:e-ut-ht,y:o-ut-ht,w:ht*2,h:ht*2}},{target:"handle-nw",rect:{x:e-r,y:o-r,w:r*2,h:r*2}},{target:"handle-ne",rect:{x:e+i-r,y:o-r,w:r*2,h:r*2}},{target:"handle-se",rect:{x:e+i-r,y:o+n-r,w:r*2,h:r*2}},{target:"handle-sw",rect:{x:e-r,y:o+n-r,w:r*2,h:r*2}},{target:"handle-n",rect:{x:e+r,y:o-r,w:i-r*2,h:r*2}},{target:"handle-s",rect:{x:e+r,y:o+n-r,w:i-r*2,h:r*2}},{target:"handle-e",rect:{x:e+i-r,y:o+r,w:r*2,h:n-r*2}},{target:"handle-w",rect:{x:e-r,y:o+r,w:r*2,h:n-r*2}}]}function ce(t,e,o){const{x:i,y:n,width:r,height:p}=e;t.save(),t.strokeStyle=`rgba(255, 255, 255, ${.35*o})`,t.lineWidth=.5;for(let l=1;l<=2;l++){const a=i+r*l/3;t.beginPath(),t.moveTo(a,n),t.lineTo(a,n+p),t.stroke()}for(let l=1;l<=2;l++){const a=n+p*l/3;t.beginPath(),t.moveTo(i,a),t.lineTo(i+r,a),t.stroke()}t.restore()}function he(t,e,o,i){o*2>=e.width||o*2>=e.height||(t.save(),t.strokeStyle=i,t.lineWidth=1,t.setLineDash([6,4]),t.strokeRect(e.x+o,e.y+o,e.width-o*2,e.height-o*2),t.setLineDash([]),t.restore())}function pe(t,e,o,i=20,n=!1,r){const p=t.getContext("2d");if(!p)throw new Error("2D canvas context unavailable");const l=p;function a(){if(r)return r;if(t.parentElement)return t.parentElement;let w=t.getRootNode();for(;w&&w!==document&&w instanceof ShadowRoot;){const P=w.host;if(P instanceof HTMLElement)return P;w=P.getRootNode()}return null}let c=!0,u=null,y=!1,m=!1,d=0;const s={quarterTurns:0,rotation:0,flipH:1,flipV:1,scale:1,panX:0,panY:0,cropRect:{x:0,y:0,width:1,height:1},gridOpacity:0,interactive:!1},f={...s},x={quarterTurns:0,flipH:0,flipV:0};let S={show:!1,size:10,color:"rgba(255, 0, 0, 0.5)"},v=0,b=.5,H=5,I=!1;function q(){if(y)return;const w=a();if(!w)return;const P=window.devicePixelRatio,W=Math.min(Number.isFinite(P)&&P>0?P:1,2),A=w.getBoundingClientRect();A.width<=0||A.height<=0||(t.width=Math.max(0,Math.floor(A.width*W)),t.height=Math.max(0,Math.floor(A.height*W)),t.style.width=`${A.width}px`,t.style.height=`${A.height}px`,l.setTransform(W,0,0,W,0,0),c=!0)}function N(){const w=a();return w?{x:0,y:0,w:w.clientWidth,h:w.clientHeight}:{x:0,y:0,w:0,h:0}}function Y(){const w=N(),P=s.cropRect;return{x:w.x+P.x*w.w,y:w.y+P.y*w.h,width:P.width*w.w,height:P.height*w.h}}function U(w,P){return 1-Math.pow(1-w,P*60)}function Q(w){if(n){s.quarterTurns=f.quarterTurns,s.rotation=f.rotation,s.flipH=f.flipH,s.flipV=f.flipV,s.scale=f.scale,s.panX=f.panX,s.panY=f.panY,s.cropRect={...f.cropRect},s.gridOpacity=f.gridOpacity,s.interactive=f.interactive,c=!0;return}let P=!1;if(Math.abs(s.quarterTurns-f.quarterTurns)>.01){const k=-180*(s.quarterTurns-f.quarterTurns),B=-22*x.quarterTurns;x.quarterTurns+=(k+B)*w,s.quarterTurns+=x.quarterTurns*w,Math.abs(s.quarterTurns-f.quarterTurns)<.01&&Math.abs(x.quarterTurns)<.01&&(s.quarterTurns=f.quarterTurns,x.quarterTurns=0),P=!0,c=!0}if(Math.abs(s.flipH-f.flipH)>.01){const k=-400*(s.flipH-f.flipH),B=-28*x.flipH;x.flipH+=(k+B)*w,s.flipH+=x.flipH*w,Math.abs(s.flipH-f.flipH)<.01&&Math.abs(x.flipH)<.01&&(s.flipH=f.flipH,x.flipH=0),P=!0,c=!0}if(Math.abs(s.flipV-f.flipV)>.01){const k=-400*(s.flipV-f.flipV),B=-28*x.flipV;x.flipV+=(k+B)*w,s.flipV+=x.flipV*w,Math.abs(s.flipV-f.flipV)<.01&&Math.abs(x.flipV)<.01&&(s.flipV=f.flipV,x.flipV=0),P=!0,c=!0}const W=U(.15,w),A=U(.12,w),V=U(.12,w);if(Math.abs(s.rotation-f.rotation)>.01&&(s.rotation=Z(s.rotation,f.rotation,W),P=!0,c=!0),Math.abs(s.scale-f.scale)>.001&&(s.scale=Z(s.scale,f.scale,W),P=!0,c=!0),!!f.interactive){(s.panX!==f.panX||s.panY!==f.panY)&&(s.panX=f.panX,s.panY=f.panY,c=!0);const E=f.cropRect,k=s.cropRect;(k.x!==E.x||k.y!==E.y||k.width!==E.width||k.height!==E.height)&&(s.cropRect={...E},c=!0)}else{Math.abs(s.panX-f.panX)>.1&&(s.panX=Z(s.panX,f.panX,W),P=!0,c=!0),Math.abs(s.panY-f.panY)>.1&&(s.panY=Z(s.panY,f.panY,W),P=!0,c=!0);const E=s.cropRect,k=f.cropRect;(Math.abs(E.x-k.x)>1e-4||Math.abs(E.y-k.y)>1e-4||Math.abs(E.width-k.width)>1e-4||Math.abs(E.height-k.height)>1e-4)&&(s.cropRect={x:Z(E.x,k.x,A),y:Z(E.y,k.y,A),width:Z(E.width,k.width,A),height:Z(E.height,k.height,A)},P=!0,c=!0)}if(Math.abs(s.gridOpacity-f.gridOpacity)>.01&&(s.gridOpacity=Z(s.gridOpacity,f.gridOpacity,V),P=!0,c=!0),s.scale<b){const k=-400*(s.scale-b),B=-28*v;v+=(k+B)*w,s.scale+=v*w,Math.abs(s.scale-b)<.001&&Math.abs(v)<.001&&(s.scale=b,v=0),P=!0,c=!0}else if(s.scale>H){const k=-400*(s.scale-H),B=-28*v;v+=(k+B)*w,s.scale+=v*w,Math.abs(s.scale-H)<.001&&Math.abs(v)<.001&&(s.scale=H,v=0),P=!0,c=!0}P||(s.rotation=f.rotation,s.scale=f.scale,s.panX=f.panX,s.panY=f.panY,s.cropRect={...f.cropRect},s.gridOpacity=f.gridOpacity,s.interactive=f.interactive)}function G(w){if(y||!m){u=null;return}const P=typeof w=="number"?w:performance.now(),W=d===0?1/60:Math.min(.25,Math.max(0,(P-d)/1e3));if(d=P,u=requestAnimationFrame(G),Q(W),!c)return;const A=a();if(!A)return;const V=A.clientWidth,D=A.clientHeight;if(V===0||D===0)return;c=!1,l.clearRect(0,0,V,D);const E=N();ee(l,e,E,s,I);const k=Y(),B=o(),ft=a()??t,J=(tt,ct)=>getComputedStyle(ft).getPropertyValue(tt).trim()||ct;if(!(I&&B==="rect")){const tt=J("--sfx-cr-overlay-color","rgba(0, 0, 0, 0.55)");oe(l,V,D,k,B,i,tt)}I&&B==="rect"||se(l,k,B,i,{frame:J("--sfx-cr-frame-color","#ffffff"),frameShadow:J("--sfx-cr-frame-shadow","rgba(0, 0, 0, 0.3)"),handleFill:J("--sfx-cr-handle-fill","#ffffff"),handleStroke:J("--sfx-cr-handle-stroke","rgba(0, 0, 0, 0.25)")},!I),S.show&&he(l,k,S.size,S.color),s.gridOpacity>.01&&ce(l,k,s.gridOpacity)}return q(),{markDirty(){c=!0},startLoop(){m||y||(m=!0,d=0,G())},stopLoop(){m=!1,u!==null&&(cancelAnimationFrame(u),u=null)},setDisplayState(w){Object.assign(f,w),s.rotationPivot=w.rotationPivot,c=!0},getDisplayState(){return{...s}},getCanvasCropRect:Y,setScaleBounds(w,P){b=w,H=P},setBleedConfig(w){S=w,c=!0},setFixedFrame(w){I=w,c=!0},resize:q,destroy(){y=!0,m=!1,u!==null&&(cancelAnimationFrame(u),u=null)}}}const ue=["nw","ne","sw","se","n","s","e","w"];function fe(t){return ue.includes(t)?t:null}function de(t,e,o){return t>=o.x&&t<=o.x+o.w&&e>=o.y&&e<=o.y+o.h}function gt(t,e,o){const i=le(o);for(const{target:n,rect:r}of i)if(de(t,e,r)){if(n==="move-handle")return{type:"move-handle"};const p=fe(n.replace("handle-",""));if(p)return{type:"handle",position:p}}return t>=o.x&&t<=o.x+o.width&&e>=o.y&&e<=o.y+o.height?{type:"crop-area"}:{type:"outside"}}function Lt(t,e){if(t.type==="move-handle")return"move";switch(t.type){case"crop-area":return"move";case"outside":return"crosshair";case"handle":switch(t.position){case"nw":case"se":return"nwse-resize";case"ne":case"sw":return"nesw-resize";case"n":case"s":return"ns-resize";case"e":case"w":return"ew-resize";default:return"default"}default:return"default"}}function ye(t,e){const o=new Map;let i=0,n=!1;function r(d){return d==="touch"||d==="pen"?d:"mouse"}function p(d){const s=t.getBoundingClientRect();return{x:d.clientX-s.left,y:d.clientY-s.top}}function l(){return[...o.values()]}function a(d){if(d.pointerType==="mouse"&&d.button!==0)return;try{t.setPointerCapture(d.pointerId)}catch{}const s=p(d),f={id:d.pointerId,x:s.x,y:s.y,startX:s.x,startY:s.y,pressure:d.pressure,pointerType:r(d.pointerType),shiftKey:d.shiftKey,altKey:d.altKey};o.set(d.pointerId,f),e.onPointerDown(f,l())}function c(d){const s=o.get(d.pointerId);if(!s){if(e.onHover){const S=p(d);e.onHover({id:d.pointerId,x:S.x,y:S.y,startX:S.x,startY:S.y,pressure:0,pointerType:r(d.pointerType),shiftKey:d.shiftKey,altKey:d.altKey})}return}const f=p(d);s.x=f.x,s.y=f.y,s.pressure=d.pressure,s.shiftKey=d.shiftKey,s.altKey=d.altKey;const x=l();if(e.onPointerMove(s,x),x.length===2&&e.onPinch){const[S,v]=x,b=Math.sqrt((v.x-S.x)**2+(v.y-S.y)**2);!n&&b>10&&(i=b,n=!0),n&&e.onPinch({centerX:(S.x+v.x)/2,centerY:(S.y+v.y)/2,scale:b/i,distance:b})}}function u(d){const s=o.get(d.pointerId);if(s){o.delete(d.pointerId);try{t.releasePointerCapture(d.pointerId)}catch{}l().length<2&&(n=!1,i=0),e.onPointerUp(s,l())}}function y(d){e.onWheel&&e.onWheel(d)}t.addEventListener("pointerdown",a),t.addEventListener("pointermove",c),t.addEventListener("pointerup",u),t.addEventListener("pointercancel",u),t.addEventListener("wheel",y,{passive:!1});const m=d=>d.preventDefault();return t.addEventListener("contextmenu",m),t.style.touchAction="none",{destroy(){t.removeEventListener("pointerdown",a),t.removeEventListener("pointermove",c),t.removeEventListener("pointerup",u),t.removeEventListener("pointercancel",u),t.removeEventListener("wheel",y),t.removeEventListener("contextmenu",m),t.style.touchAction="",o.clear()}}}function me(t,e,o,i,n){const r=(e-t.startX)/i,p=(o-t.startY)/n,{startCrop:l}=t;return{x:z(l.x-r,0,1-l.width),y:z(l.y-p,0,1-l.height),width:l.width,height:l.height}}function ge(t,e,o,i){return{handle:t.startsWith("handle-")?t.slice(7):t,startCrop:{...e},startX:o,startY:i}}function xe(t,e,o,i,n,r,p,l={shiftKey:!1,altKey:!1}){const a=(e-t.startX)/i,c=(o-t.startY)/n,{startCrop:u,handle:y}=t;let m=u.x,d=u.y,s=u.width,f=u.height;const x=p/i,S=p/n;if(y.includes("w")){const H=z(m+a,0,m+s-x);s=s-(H-m),m=H}if(y.includes("e")&&(s=z(s+a,x,1-m)),y.includes("n")){const H=z(d+c,0,d+f-S);f=f-(H-d),d=H}if(y.includes("s")&&(f=z(f+c,S,1-d)),s=Math.max(s,x),f=Math.max(f,S),l.altKey){const H=u.x+u.width/2,I=u.y+u.height/2,q=s/2,N=f/2;m=z(H-q,0,1-s),d=z(I-N,0,1-f)}let v={x:m,y:d,width:s,height:f},b=lt(r);return l.shiftKey&&r==="free"&&(b=u.width/u.height),b!==null&&(v=Gt(v,b,y,i,n,p)),v}function we(t,e){if(t.length<2)return null;const[o,i]=t,n=Ut(o.x,o.y,i.x,i.y);return n<10?null:{initialDistance:n,initialScale:e,initialCenterX:(o.x+i.x)/2,initialCenterY:(o.y+i.y)/2}}function be(t,e,o,i,n,r,p){const l=1-t*o.sensitivity*.001,a=z(e*l,o.minScale,o.maxScale);let c=0,u=0;if(i!==void 0&&r!==void 0){const y=1-a/e;c=(i-r)*y,u=(n-p)*y}return{scale:a,panDeltaX:c,panDeltaY:u}}function ve(t,e){function o(i){if(!((typeof i.composedPath=="function"?i.composedPath():[]).includes(t)||t.contains(document.activeElement)||document.activeElement===t)||i.ctrlKey||i.metaKey||i.altKey)return;const p=i.shiftKey?.01:.005;switch(i.key){case"ArrowLeft":i.preventDefault(),e.onMoveCrop(-p,0);break;case"ArrowRight":i.preventDefault(),e.onMoveCrop(p,0);break;case"ArrowUp":i.preventDefault(),e.onMoveCrop(0,-p);break;case"ArrowDown":i.preventDefault(),e.onMoveCrop(0,p);break;case"r":case"R":i.preventDefault(),e.onRotateLeft();break;case"f":case"F":i.preventDefault(),e.onFlipH();break;case"+":case"=":i.preventDefault(),e.onZoomIn();break;case"-":case"_":i.preventDefault(),e.onZoomOut();break;case"0":i.preventDefault(),e.onResetZoom();break;case"[":i.preventDefault(),e.onRotateFine(-1);break;case"]":i.preventDefault(),e.onRotateFine(1);break}}return t.addEventListener("keydown",o),{destroy(){t.removeEventListener("keydown",o)}}}function Se(t){t.setAttribute("role","application"),t.setAttribute("aria-roledescription","image crop tool"),t.setAttribute("aria-label","Image crop tool — use arrow keys to move crop, R to rotate, F to flip horizontal, +/- to zoom"),t.setAttribute("tabindex","0")}function xt(t,e,o="free"){let i=t.querySelector(".sfx-cr-sr-only[aria-live]");i||(i=document.createElement("div"),i.className="sfx-cr-sr-only",i.setAttribute("aria-live","polite"),t.appendChild(i));const n=e.quarterTurns+e.rotation,r=Math.round(e.scale*100),p=o,l=e.flipH?", flipped horizontal":"";i.textContent=`Crop: ${p}, rotation ${n.toFixed(1)}°${l}, zoom ${r}%`}function Rt(t){const e=t.getContext("2d");if(!e)throw new Error("2D canvas context unavailable");return e}function Re(t,e,o){const i=t.quarterTurns+t.rotation,n=Math.round(t.cropRect.width*e),r=Math.round(t.cropRect.height*o),p=Math.round(t.quarterTurns/90)%2!==0;return{rotation:i,flipH:t.flipH,flipV:t.flipV,scale:t.scale,crop:{x:Math.round(t.cropRect.x*e),y:Math.round(t.cropRect.y*o),width:n,height:r},outputWidth:p?r:n,outputHeight:p?n:r}}function Ce(t,e,o,i,n="free",r=20,p=0,l=0,a="classic"){const c=t.naturalWidth,u=t.naturalHeight,y=a==="fixed"&&p>0&&l>0;let m,d,s,f;if(y){const A=pt(p,l,c,u,e.quarterTurns),V=Math.max(c/A.drawW,u/A.drawH);m=Math.max(1,Math.round(p*V)),d=Math.max(1,Math.round(l*V));const D=pt(m,d,c,u,e.quarterTurns);s=D.drawW,f=D.drawH}else{m=c,d=u;const V=Math.round(e.quarterTurns/90)%2!==0?Math.min(m,d)/Math.max(m,d):1;s=m*V,f=d*V}const x=e.cropRect.x*m,S=e.cropRect.y*d,v=e.cropRect.width*m,b=e.cropRect.height*d;let H=Math.max(1,Math.round(v)),I=Math.max(1,Math.round(b));o>0&&H>o&&(I=Math.max(1,Math.round(I*(o/H))),H=o),i>0&&I>i&&(H=Math.max(1,Math.round(H*(i/I))),I=i);const q=v>1e-6?H/v:1,N=document.createElement("canvas");N.width=H,N.height=I;const Y=Rt(N);Y.save(),Y.scale(q,q),Y.translate(-x,-S);const U=(e.cropRect.x+e.cropRect.width/2)*m,Q=(e.cropRect.y+e.cropRect.height/2)*d,G=e.rotationPivot??{x:e.cropRect.x+e.cropRect.width/2,y:e.cropRect.y+e.cropRect.height/2},w=G.x*m,P=G.y*d;e.rotation!==0&&(Y.translate(w,P),Y.rotate(at(e.rotation)),Y.translate(-w,-P)),(e.flipH||e.flipV)&&(Y.translate(U,Q),Y.scale(e.flipH?-1:1,e.flipV?-1:1),Y.translate(-U,-Q)),Y.translate(m/2,d/2),Y.scale(e.scale,e.scale);const W=p>0?m/p:1;return Y.translate(e.panX*W,e.panY*W),e.quarterTurns!==0&&Y.rotate(at(e.quarterTurns)),Y.drawImage(t,-s/2,-f/2,s,f),Y.restore(),n==="circle"?Te(N):n==="rounded-rect"&&Me(N,r),N}function Me(t,e){const o=Rt(t),i=t.width,n=t.height,r=Math.min(e,i/2,n/2);o.globalCompositeOperation="destination-in",o.beginPath(),o.moveTo(r,0),o.lineTo(i-r,0),o.arcTo(i,0,i,r,r),o.lineTo(i,n-r),o.arcTo(i,n,i-r,n,r),o.lineTo(r,n),o.arcTo(0,n,0,n-r,r),o.lineTo(0,r),o.arcTo(0,0,r,0,r),o.closePath(),o.fill(),o.globalCompositeOperation="source-over"}function Te(t){const e=Rt(t),o=t.width,i=t.height;e.globalCompositeOperation="destination-in",e.beginPath(),e.ellipse(o/2,i/2,o/2,i/2,0,0,Math.PI*2),e.fill(),e.globalCompositeOperation="source-over"}async function ke(t,e,o){return new Promise((i,n)=>{let r=!1;try{t.toBlob(p=>{r||(r=!0,p?i(p):n(new Error("Failed to create blob (canvas may be empty or tainted)")))},e,o)}catch(p){r||(r=!0,n(p instanceof Error?p:new Error(String(p))))}})}function Yt(t){const{canvas:e,host:o,layoutContainer:i,callbacks:n={}}=t;let r={...t.config},p=r.cropShape,l=null,a=It(r.cropShape),c=null,u=null,y=null,m=null,d=null,s=!1,f=!1,x=0,S=null,v=null,b=null,H=null,I=null,q=0,N=0,Y=0;r.initialCrop&&(a=et(a,r.initialCrop)),r.initialRotation&&(a=yt(a,r.initialRotation)),r.initialScale&&r.initialScale!==1&&(a=ot(a,r.initialScale,r.minScale,r.maxScale));function U(){return p==="circle"?"circle":p==="rounded-rect"?"rounded-rect":"rect"}function Q(){return{...a,cropRect:{...a.cropRect}}}function G(){if(!l)return{...a.cropRect};const h=l.naturalWidth,g=l.naturalHeight;return{x:Math.round(a.cropRect.x*h),y:Math.round(a.cropRect.y*g),width:Math.round(a.cropRect.width*h),height:Math.round(a.cropRect.height*g)}}const w={x:0,y:0,width:1,height:1};let P=0,W=0;function A(){const h=i.clientWidth,g=i.clientHeight;return h>0&&g>0&&(P=h,W=g),{w:h>0?h:P,h:g>0?g:W}}function V(){if(!l||!c)return;const{w:h,h:g}=A();if(h<=0||g<=0)return;let T,F,L;if(r.variant==="fixed"){T={x:0,y:0,width:h,height:g};const O=pt(h,g,l.naturalWidth,l.naturalHeight,a.quarterTurns);F=O.drawW,L=O.drawH}else{if(Math.round(a.quarterTurns/90)%2!==0){c.setScaleBounds(r.minScale,r.maxScale);return}const O=a.cropRect;T={x:O.x*h,y:O.y*g,width:O.width*h,height:O.height*g},F=h,L=g}const X=Qt(a,h,g,T,F,L,r.maxScale);a={...a,scale:X.scale,panX:X.panX,panY:X.panY},c.setScaleBounds(X.minScale,r.maxScale)}function D(){if(!c)return;V();const h={quarterTurns:a.quarterTurns,rotation:a.rotation,flipH:a.flipH?-1:1,flipV:a.flipV?-1:1,scale:a.scale,panX:a.panX,panY:a.panY,cropRect:{...a.cropRect},rotationPivot:a.rotationPivot,gridOpacity:f||r.showGrid===!0?1:0,interactive:f};c.setDisplayState(h)}function E(){var h;(h=n.onChange)==null||h.call(n,Q())}function k(){var h;(h=n.onCropChange)==null||h.call(n,G())}m=new ResizeObserver(()=>{s||(d&&clearTimeout(d),d=setTimeout(()=>{d=null,!s&&(c==null||c.resize(),D(),c==null||c.markDirty())},16))}),m.observe(i);async function B(h){var T,F,L,X,O;if(s)return;const g=++x;(T=n.onLoadingChange)==null||T.call(n,!0,null);try{const $=new Image;if($.crossOrigin="anonymous",await new Promise((rt,$t)=>{$.onload=()=>rt(),$.onerror=()=>$t(new Error(`Failed to load image: ${h}`)),$.src=h}),s||g!==x)return;l=$,(F=n.onLoadingChange)==null||F.call(n,!1,null),(L=n.onImageLoad)==null||L.call(n,$),ft()}catch($){if(s||g!==x)return;const rt=$.message;(X=n.onLoadingChange)==null||X.call(n,!1,rt),(O=n.onError)==null||O.call(n,$)}}function ft(){var g,T;if(!l)return;r.variant==="fixed"?a={...a,cropRect:{...w}}:r.initialCrop||(a=mt(a,p,l.naturalWidth,l.naturalHeight));const h=!r.enableAnimations||typeof window<"u"&&((g=window.matchMedia)==null?void 0:g.call(window,"(prefers-reduced-motion: reduce)").matches);c=pe(e,l,U,r.borderRadius,h,i),c.setScaleBounds(r.minScale,r.maxScale),c.setFixedFrame(r.variant==="fixed"),c.setBleedConfig({show:r.showBleedMargin,size:r.bleedMarginSize,color:r.bleedMarginColor}),D(),c.startLoop(),J(),r.keyboard&&(y=ve(o,{onRotateLeft:()=>kt(),onFlipH:()=>Ht(),onZoomIn:()=>it(a.scale+.1),onZoomOut:()=>it(a.scale-.1),onResetZoom:()=>it(1),onMoveCrop:(F,L)=>{if(r.variant==="fixed")return;const X=a.cropRect;a=et(a,{x:X.x+F,y:X.y+L,width:X.width,height:X.height}),D(),E(),k()},onRotateFine:F=>Pt(a.rotation+F)})),(T=n.onReady)==null||T.call(n)}function J(){u=ye(e,{onPointerDown:(h,g)=>{const T=Date.now(),F=T-q,L=Math.sqrt((h.x-N)**2+(h.y-Y)**2);if(F<300&&L<20&&g.length===1){it(1),q=0;return}if(q=T,N=h.x,Y=h.y,g.length===2){I=we(g,a.scale),S=null,H=null;return}const X=c.getCanvasCropRect();let O=gt(h.x,h.y,X);r.variant==="fixed"&&(O.type==="handle"||O.type==="move-handle")&&(O={type:"crop-area"}),f=!0,O.type==="move-handle"?b={startX:h.x,startY:h.y,startRect:{...a.cropRect}}:O.type==="crop-area"?v={startX:h.x,startY:h.y,startPanX:a.panX,startPanY:a.panY}:O.type==="handle"&&O.position&&(H=ge("handle-"+O.position,a.cropRect,h.x,h.y)),D()},onPointerMove:h=>{if(!l)return;const g=c.getCanvasCropRect();if(b){const{displayW:T,displayH:F}=tt();if(T>0&&F>0){const L=(h.x-b.startX)/T,X=(h.y-b.startY)/F;a=et(a,{x:b.startRect.x+L,y:b.startRect.y+X,width:b.startRect.width,height:b.startRect.height}),D(),E(),k()}return}if(v){const T=h.x-v.startX,F=h.y-v.startY,L=a.flipH?-1:1,X=a.flipV?-1:1;a={...a,panX:v.startPanX+L*T/a.scale,panY:v.startPanY+X*F/a.scale},D(),E();return}if(S){const{displayW:T,displayH:F}=tt(),L=me(S,h.x,h.y,T,F);a=et(a,L),D(),E(),k();return}if(H){const{displayW:T,displayH:F}=tt(),L=xe(H,h.x,h.y,T,F,p,r.minCropSize,{shiftKey:h.shiftKey,altKey:h.altKey});a=et(a,L),D(),E(),k();return}if(r.variant==="fixed")e.style.cursor="grab";else{const T=gt(h.x,h.y,g);e.style.cursor=Lt(T)}},onHover:h=>{if(!c)return;if(r.variant==="fixed"){e.style.cursor="grab";return}const g=c.getCanvasCropRect(),T=gt(h.x,h.y,g);e.style.cursor=Lt(T)},onPointerUp:(h,g)=>{g.length<2&&(I=null),g.length===0&&(S=null,v=null,b=null,H=null,f=!1,N=0,Y=0,D())},onPinch:h=>{var L;I||(I={initialDistance:h.distance,initialScale:a.scale,initialCenterX:h.centerX,initialCenterY:h.centerY});const g=a.scale*(h.distance/I.initialDistance),T=h.centerX-I.initialCenterX,F=h.centerY-I.initialCenterY;a=ot(a,g,r.minScale,r.maxScale),a=Dt(a,T,F),(L=n.onScaleSync)==null||L.call(n,a.scale),D(),E()},onWheel:h=>{var $,rt;if(!r.wheelZoom)return;h.preventDefault();const g=e.getBoundingClientRect(),T=h.clientX-g.left,F=h.clientY-g.top,L=g.width/2,X=g.height/2,O=be(h.deltaY,a.scale,{minScale:r.minScale,maxScale:r.maxScale,sensitivity:1},T,F,L,X);a=ot(a,O.scale,r.minScale,r.maxScale),a=Dt(a,O.panDeltaX,O.panDeltaY),($=n.onScaleSync)==null||$.call(n,a.scale),(rt=n.onWheelZoomActivity)==null||rt.call(n),D(),E()}})}function tt(){return{displayW:i.clientWidth,displayH:i.clientHeight}}function ct(h){var g;s||p!==h&&(p=h,r.variant==="fixed"?a={...a,cropRect:{...w}}:a=mt(a,h,(l==null?void 0:l.naturalWidth)??1,(l==null?void 0:l.naturalHeight)??1),(g=n.onShapeSync)==null||g.call(n,h),D(),E(),k())}function Wt(h){s||(a=et(a,h),D(),E(),k())}function kt(){s||(a=Jt(a),D(),xt(o,a,p),E(),k())}function Ht(){s||(a=te(a),D(),xt(o,a,p),E(),k())}function Pt(h){var g;s||(a=yt(a,h),(g=n.onRotationSync)==null||g.call(n,h),D(),E())}function it(h){var g;s||(a=ot(a,h,r.minScale,r.maxScale),(g=n.onScaleSync)==null||g.call(n,a.scale),D(),E())}function Bt(){var h,g,T;s||(p=r.cropShape,a=It(r.cropShape,(l==null?void 0:l.naturalWidth)??1,(l==null?void 0:l.naturalHeight)??1),r.variant==="fixed"?a={...a,cropRect:{...w}}:r.initialCrop&&(a=et(a,r.initialCrop)),r.initialRotation&&(a=yt(a,r.initialRotation)),r.initialScale!==void 0&&r.initialScale!==1&&(a=ot(a,r.initialScale,r.minScale,r.maxScale)),(h=n.onRotationSync)==null||h.call(n,a.rotation),(g=n.onShapeSync)==null||g.call(n,r.cropShape),(T=n.onScaleSync)==null||T.call(n,a.scale),D(),xt(o,a,p),E(),k())}function dt(){if(!l)throw new Error("No image loaded");const{w:h,h:g}=A();return Ce(l,a,r.maxOutputWidth,r.maxOutputHeight,p,r.borderRadius,h,g,r.variant)}async function Nt(h,g){const T=dt();return ke(T,h||r.outputType,g??r.outputQuality)}function qt(h,g){try{return dt().toDataURL(h||r.outputType,g??r.outputQuality)}catch(T){const F=T instanceof Error?T:new Error(String(T));throw new Error(`Failed to export data URL: ${F.message}`)}}function Vt(){if(!l)throw new Error("No image loaded");return Re(a,l.naturalWidth,l.naturalHeight)}function _t(h){if(s)return;const g=r.src,T=r.variant;r=vt({...r,...h}),h.cropShape!==void 0&&ct(h.cropShape),h.variant!==void 0&&h.variant!==T&&(c==null||c.setFixedFrame(r.variant==="fixed"),r.variant==="fixed"?a={...a,cropRect:{...w}}:(c==null||c.setScaleBounds(r.minScale,r.maxScale),a=mt(a,p,(l==null?void 0:l.naturalWidth)??1,(l==null?void 0:l.naturalHeight)??1),a=ot({...a,panX:0,panY:0},r.initialScale??1,r.minScale,r.maxScale)),D(),E(),k()),h.src!==void 0&&h.src!==g&&B(h.src).catch(()=>{}),(h.showBleedMargin!==void 0||h.bleedMarginSize!==void 0||h.bleedMarginColor!==void 0)&&(c==null||c.setBleedConfig({show:r.showBleedMargin,size:r.bleedMarginSize,color:r.bleedMarginColor})),h.showGrid!==void 0&&D(),c==null||c.markDirty()}function Kt(){s||(s=!0,x++,c==null||c.destroy(),u==null||u.destroy(),y==null||y.destroy(),m==null||m.disconnect(),d&&(clearTimeout(d),d=null))}return{loadImage:B,getTransformState:Q,getCropRect:G,setCropShape:ct,setCropRect:Wt,rotateLeft:kt,flipHorizontal:Ht,setRotation:Pt,setScale:it,reset:Bt,toCanvas:dt,toBlob:Nt,toDataURL:qt,toTransformParams:Vt,update:_t,destroy:Kt}}class Ct extends K.LitElement{}function He(t,e){typeof customElements>"u"||customElements.get(t)||customElements.define(t,e)}const Pe=K.css`
+  :host {
+    display: block;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    /* Single source of clipping is .sfx-cr-container (overflow:hidden +
+       border-radius). Don't add a second mask here: this host is sized
+       by JS to the full outer rect (displayW×displayH), which is 4px
+       wider than the container's content-box, so its own border-radius
+       wouldn't align with the container's effective inner radius
+       (radius - border-width) and you'd see two stepped curves at the
+       corner. Transparent bg lets the container surface show through
+       in the rounded corner sliver. */
+    background: transparent;
+  }
+
+  canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+    outline: none;
+    touch-action: none;
+  }
+`;var Ee=Object.defineProperty,Ie=(t,e,o,i)=>{for(var n=void 0,r=t.length-1,p;r>=0;r--)(p=t[r])&&(n=p(e,o,n)||n);return n&&Ee(e,o,n),n};const Mt=class Mt extends Ct{render(){return K.html`<canvas part="canvas"></canvas>`}};Mt.styles=[Pe];let st=Mt;Ie([C.query("canvas")],st.prototype,"canvasEl");const bt=["free","square","16:9","4:3","3:2","5:4","2:1","9:16","3:4","2:3","4:5","1:2"],De=["free","square","circle","rounded-rect"];function wt(t){return typeof t!="string"?!1:De.includes(t)?!0:St(t)!==null}function At(t){if(t==null)return;if(Array.isArray(t))return t.filter(wt);if(typeof t!="string")return;const e=t.trim();if(e){if(e.startsWith("["))try{const o=JSON.parse(e);if(Array.isArray(o))return o.filter(wt)}catch{}return e.split(/[\s,]+/).filter(Boolean).filter(wt)}}const Fe=K.css`
+  :host {
+    /* Palette — light theme (matches ui-tw :root) */
+    --sfx-cr-primary: oklch(0.578 0.198 268.129);
+    --sfx-cr-primary-hover: oklch(0.5 0.198 268.129);
+    --sfx-cr-primary-mid: oklch(0.62 0.198 268.129);
+    --sfx-cr-primary-bg: oklch(0.578 0.198 268.129 / 0.07);
+    --sfx-cr-primary-glow: oklch(0.578 0.198 268.129 / 0.18);
+
+    --sfx-cr-success: oklch(0.637 0.17 151.295);
+    --sfx-cr-error: oklch(0.577 0.215 27.325);
+
+    --sfx-cr-text: oklch(0.37 0.022 248.413);
+    --sfx-cr-text-secondary: oklch(53.03% 0.039 249.89);
+    --sfx-cr-text-muted: oklch(0.685 0.033 249.82);
+    /* Fine-tilt ruler ink + halo. The ruler floats directly over the photo,
+       whose brightness is unknown, so its colour can't track the theme. We
+       render a bright (near-white) core wrapped in a dark halo: the white core
+       reads over dark images, the dark halo reads over bright ones — the same
+       trick subtitles use to stay legible over arbitrary footage. */
+    --sfx-cr-ruler-ink: oklch(1 0 0);
+    --sfx-cr-ruler-halo: oklch(0 0 0 / 0.85);
+
+    --sfx-cr-border: oklch(92.86% 0.009 247.92);
+    --sfx-cr-border-light: oklch(0.974 0.006 239.819);
+
+    --sfx-cr-bg: oklch(1 0 0);
+    --sfx-cr-surface: oklch(0.974 0.006 239.819);
+    --sfx-cr-canvas-bg: oklch(0.974 0.006 239.819);
+    /* Dimming overlay for pixels outside the crop rect. Light theme uses a
+       very soft, near-white tint so the whole surround stays bright; dark
+       theme keeps the classic black dim for contrast against the photo. */
+    --sfx-cr-overlay-color: oklch(1 0 0 / 0.52);
+    /* Crop frame + handle colors, theme-aware so the rectangle reads
+       against both a washed-out light background and a dimmed dark one. */
+    --sfx-cr-frame-color: oklch(0.37 0.022 248.413);
+    --sfx-cr-frame-shadow: oklch(1 0 0 / 0.7);
+    --sfx-cr-handle-fill: oklch(0.37 0.022 248.413);
+    --sfx-cr-handle-stroke: oklch(1 0 0 / 0.95);
+
+    --sfx-cr-ring: oklch(0.578 0.198 268.129 / 0.7);
+    --sfx-cr-shadow: oklch(26.18% 0.024 256.43 / 0.1);
+
+    /* Derived — kept for internal reuse */
+    --sfx-cr-toolbar-bg: oklch(1 0 0 / 0.85);
+    --sfx-cr-toolbar-color: var(--sfx-cr-text);
+    --sfx-cr-toolbar-border: oklch(92.86% 0.009 247.92 / 0.6);
+    /* shadow-sm + soft primary tint */
+    --sfx-cr-toolbar-shadow: 0 1px 3px 0 oklch(0 0 0 / 0.1), 0 1px 2px -1px oklch(0 0 0 / 0.1);
+    --sfx-cr-btn-size: 36px;
+    --sfx-cr-btn-radius: 6px;
+    --sfx-cr-btn-hover-bg: var(--sfx-cr-primary-bg);
+    --sfx-cr-btn-active-bg: oklch(0.578 0.198 268.129 / 0.14);
+    --sfx-cr-separator-color: var(--sfx-cr-border-light);
+    --sfx-cr-slider-track: var(--sfx-cr-border);
+    --sfx-cr-slider-fill: var(--sfx-cr-primary);
+    --sfx-cr-slider-thumb: var(--sfx-cr-primary);
+    /* Translucent so the dropdown picks up whatever sits behind it
+       (image, overlay) when paired with backdrop-filter. */
+    --sfx-cr-dropdown-bg: oklch(0.974 0.006 239.819 / 0.8);
+    --sfx-cr-dropdown-hover: var(--sfx-cr-primary-bg);
+    /* shadow-md + shadow-lg blend */
+    --sfx-cr-dropdown-shadow: 0 10px 15px -3px oklch(0 0 0 / 0.1), 0 4px 6px -4px oklch(0 0 0 / 0.1);
+    --sfx-cr-zoom-bar-bg: oklch(1 0 0 / 0.85);
+    --sfx-cr-transition: 0.15s ease;
+    --sfx-cr-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+
+    /* Border-radius scale — mirrors ui-tw --radius-sm/md/lg/xl */
+    --sfx-cr-radius-sm: 4px;
+    --sfx-cr-radius-md: 6px;
+    --sfx-cr-radius-lg: 8px;
+    --sfx-cr-radius-xl: 12px;
+    /* Outer card (when <sfx-crop> fills the host) */
+    --sfx-cr-radius: var(--sfx-cr-radius-xl);
+    --sfx-cr-card-shadow: 0 28px 80px oklch(0 0 0 / 0.2), 0 4px 16px oklch(0 0 0 / 0.06);
+  }
+
+  /* Dark variant — mirrors ui-tw :root.dark. */
+  :host([theme="dark"]) {
+    --sfx-cr-primary: oklch(0.6 0.2 268.129);
+    --sfx-cr-primary-hover: oklch(0.55 0.2 268.129);
+    --sfx-cr-primary-mid: oklch(0.65 0.2 268.129);
+    --sfx-cr-primary-bg: oklch(0.6 0.2 268.129 / 0.07);
+    --sfx-cr-primary-glow: oklch(0.6 0.2 268.129 / 0.22);
+
+    --sfx-cr-success: oklch(0.6 0.2 154.83);
+    --sfx-cr-error: oklch(0.55 0.2 27.325);
+
+    --sfx-cr-text: oklch(0.95 0.01 264.55);
+    --sfx-cr-text-secondary: oklch(0.9 0.01 264.55);
+    --sfx-cr-text-muted: oklch(0.75 0.01 249.82);
+    /* Ruler keeps the white core + dark halo over the photo (see light theme);
+       --sfx-cr-ruler-halo is inherited from the base :host. */
+    --sfx-cr-ruler-ink: oklch(1 0 0);
+
+    --sfx-cr-border: oklch(0.3 0.01 247.92);
+    --sfx-cr-border-light: oklch(0.3 0.01 285);
+
+    --sfx-cr-bg: oklch(0.13 0.027 261.692);
+    --sfx-cr-surface: oklch(0.25 0.01 264.55);
+    --sfx-cr-canvas-bg: oklch(0.13 0.027 261.692);
+    --sfx-cr-overlay-color: oklch(0 0 0 / 0.35);
+    --sfx-cr-frame-color: oklch(0.95 0.01 264.55);
+    --sfx-cr-frame-shadow: oklch(0 0 0 / 0.6);
+    --sfx-cr-handle-fill: oklch(0.95 0.01 264.55);
+    --sfx-cr-handle-stroke: oklch(0 0 0 / 0.25);
+
+    --sfx-cr-ring: oklch(0.6 0.2 268.129 / 0.7);
+    --sfx-cr-shadow: oklch(0 0 0 / 0.2);
+
+    --sfx-cr-toolbar-bg: oklch(0.13 0.027 261.692 / 0.85);
+    --sfx-cr-toolbar-color: oklch(0.95 0.01 264.55);
+    --sfx-cr-toolbar-border: oklch(0.3 0.01 247.92 / 0.5);
+    --sfx-cr-toolbar-shadow: 0 4px 20px oklch(0 0 0 / 0.4);
+
+    --sfx-cr-btn-hover-bg: oklch(0.6 0.2 268.129 / 0.22);
+    --sfx-cr-btn-active-bg: oklch(0.6 0.2 268.129 / 0.32);
+
+    --sfx-cr-slider-track: oklch(0.3 0.01 247.92);
+
+    --sfx-cr-dropdown-bg: oklch(0.13 0.027 261.692 / 0.82);
+    --sfx-cr-dropdown-hover: oklch(0.6 0.2 268.129 / 0.22);
+    --sfx-cr-dropdown-shadow: 0 10px 15px -3px oklch(0 0 0 / 0.5), 0 4px 6px -4px oklch(0 0 0 / 0.3);
+    --sfx-cr-zoom-bar-bg: oklch(0.13 0.027 261.692 / 0.85);
+
+    --sfx-cr-card-shadow: 0 28px 80px oklch(0 0 0 / 0.55), 0 4px 16px oklch(0 0 0 / 0.2);
+  }
+`,Xt=K.css`
+  .sfx-cr-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host, :host *, :host *::before, :host *::after {
+      transition-duration: 0.01ms !important;
+      animation-duration: 0.01ms !important;
+    }
+  }
+`,Le=K.css`
+  @keyframes sfx-cr-spin { to { transform: rotate(360deg); } }
+`,Oe=K.css`
+  @keyframes sfx-cr-toolbar-enter {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`;K.css`
+  @keyframes sfx-cr-zoom-enter {
+    from {
+      opacity: 0;
+      transform: translateX(-50%) translateY(12px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+    }
+  }
+`;K.css`
+  @keyframes sfx-cr-card-in {
+    from {
+      opacity: 0;
+      transform: translateY(10px) scale(0.98);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+`;K.css`
+  input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--sfx-cr-slider-thumb);
+    cursor: pointer;
+    box-shadow: 0 1px 4px var(--sfx-cr-primary-glow);
+    transition: transform 150ms ease, box-shadow 150ms ease;
+  }
+  input[type="range"]::-webkit-slider-thumb:hover {
+    transform: scale(1.15);
+    box-shadow: 0 0 0 5px var(--sfx-cr-primary-glow);
+  }
+  input[type="range"]::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--sfx-cr-slider-thumb);
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 1px 4px var(--sfx-cr-primary-glow);
+  }
+`;const ze=K.css`
+  :host {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    font-family: var(--sfx-cr-font);
+    color: var(--sfx-cr-text);
+    /* Establish a named inline-size container so the toolbar / shapes /
+       zoom / rotate sub-elements can switch to their compact left-rail
+       layout based on the editor's own width — independent of the page
+       viewport. A narrow column on a wide desktop (sidebar preview,
+       split view) gets the same compact UI as a phone. */
+    container-type: inline-size;
+    container-name: sfxcrop;
+  }
+
+  :host([hidden]) { display: none; }
+
+  :host(:focus-visible) {
+    outline: 2px solid var(--sfx-cr-ring);
+    outline-offset: 2px;
+  }
+
+  .sfx-cr-container {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    background: var(--sfx-cr-bg);
+    border-radius: var(--sfx-cr-radius);
+    /* Editor card frame: shadow-only (no border). A border draws two
+       visible curves at the corners (outer + inner padding edge),
+       reading as a "double ring"; a slightly stronger shadow gives the
+       same elevation feel with a single clean rounded silhouette. */
+    /* shadow-xs ring + shadow-md elevation, sourced from ui-tw scale */
+    box-shadow:
+      0 0 0 1px oklch(0 0 0 / 0.05),
+      0 4px 6px -1px oklch(0 0 0 / 0.1),
+      0 2px 4px -2px oklch(0 0 0 / 0.1);
+    font-family: var(--sfx-cr-font);
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  /* ====== Loading ====== */
+  .sfx-cr-loading {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+    background: var(--sfx-cr-bg);
+    z-index: 10;
+    transition: opacity 280ms ease;
+  }
+  .sfx-cr-loading--hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .sfx-cr-loading-spinner {
+    width: 36px;
+    height: 36px;
+    border: 3px solid var(--sfx-cr-border);
+    border-top-color: var(--sfx-cr-primary);
+    border-radius: 50%;
+    animation: sfx-cr-spin 0.8s linear infinite;
+  }
+
+  .sfx-cr-loading-text {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--sfx-cr-text-secondary);
+    letter-spacing: 0.2px;
+  }
+
+  /* ====== Error ====== */
+  .sfx-cr-error {
+    position: absolute;
+    inset: 0;
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    padding: 32px;
+    background: var(--sfx-cr-bg);
+    z-index: 10;
+    color: var(--sfx-cr-error);
+    font-size: 14px;
+    font-weight: 500;
+    text-align: center;
+  }
+  .sfx-cr-error--visible { display: flex; }
+`;var Ye=Object.defineProperty,M=(t,e,o,i)=>{for(var n=void 0,r=t.length-1,p;r>=0;r--)(p=t[r])&&(n=p(e,o,n)||n);return n&&Ye(e,o,n),n};const Ae={fromAttribute(t){return t===null?"interaction":t==="true"||t===""?!0:t==="false"?!1:"interaction"},toAttribute(t){return t===!0?"true":t===!1?"false":"interaction"}},Tt=class Tt extends Ct{constructor(){super(...arguments),this.src="",this.cropShape="16:9",this.theme="light",this.initialRotation=0,this.initialScale=1,this.minScale=.5,this.maxScale=5,this.minCropSize=20,this.handleSize=12,this.borderRadius=20,this.outputQuality=.92,this.maxOutputWidth=0,this.maxOutputHeight=0,this.bleedMarginSize=10,this.animationSpeed=1,this.handleColor="#ffffff",this.overlayColor="rgba(0, 0, 0, 0.55)",this.bleedMarginColor="rgba(255, 0, 0, 0.5)",this.outputType="image/png",this.toolbarPosition="top",this.variant="classic",this.showGrid="interaction",this.showToolbar=!0,this.showRotateSlider=!0,this.showZoomSlider=!0,this.showShapeSelector=!0,this.showRotateButton=!0,this.showFlipButton=!0,this.showBleedMargin=!1,this.enableAnimations=!0,this.keyboard=!0,this.pinchZoom=!0,this.wheelZoom=!0,this.availableShapes=[...bt],this.initialCrop=null,this.icons={},this.loading=!1,this.errorMessage=null,this.controller=null,this.currentImage=null,this.parentResizeObserver=null,this.onToolbarCommand=e=>{if(!this.controller)return;const o=e.detail;switch(o.type){case"reset":this.controller.reset();break;case"rotate-left":this.controller.rotateLeft();break;case"flip-h":this.controller.flipHorizontal();break;case"rotation":this.controller.setRotation(o.value);break;case"scale":this.controller.setScale(o.value);break;case"shape":this.cropShape=o.value;break;case"save":this.save();break}}}async firstUpdated(){if(Se(this),!(this.canvasHost instanceof st))throw new Error("<sfx-crop>: custom elements not registered. Import '@scaleflex/crop/define' before using the tag.");if(await this.canvasHost.updateComplete,!this.isConnected)return;const e=this.canvasHost.canvasEl,o=vt(this.buildConfig());this.controller=Yt({canvas:e,host:this,layoutContainer:this.canvasHost,config:o,callbacks:{onReady:()=>this.dispatch("sfx-crop-ready",{element:this}),onImageLoad:n=>{this.currentImage=n,this.fitHostToImage(),this.dispatch("sfx-crop-image-load",{image:n})},onError:n=>this.dispatch("sfx-crop-error",{error:n}),onChange:n=>{this.dispatch("sfx-crop-change",n)},onCropChange:n=>this.dispatch("sfx-crop-crop-change",n),onRotationSync:n=>{var r;return(r=this.toolbarHost)==null?void 0:r.setRotationValue(n)},onShapeSync:n=>{var r;this.cropShape=n,(r=this.toolbarHost)==null||r.setShapeValue(n)},onScaleSync:()=>{},onLoadingChange:(n,r)=>{this.loading=n,this.errorMessage=r}}});const i=this.parentElement;i&&(this.parentResizeObserver=new ResizeObserver(()=>this.fitHostToImage()),this.parentResizeObserver.observe(i)),this.src&&this.controller.loadImage(this.src)}updated(e){if(!this.controller)return;const o={};let i=!1;for(const n of Xe)e.has(n)&&(o[n]=this[n],i=!0);i&&this.controller.update(o),(e.has("variant")||e.has("cropShape"))&&this.fitHostToImage()}disconnectedCallback(){var e,o;super.disconnectedCallback(),(e=this.parentResizeObserver)==null||e.disconnect(),this.parentResizeObserver=null,(o=this.controller)==null||o.destroy(),this.controller=null}render(){return K.html`
+      <div class="sfx-cr-container" part="container">
+        <sfx-crop-canvas part="canvas-host"></sfx-crop-canvas>
+        ${this.showToolbar?K.html`
+          <sfx-crop-toolbar
+            part="toolbar"
+            .shape=${this.cropShape}
+            ?show-rotate-button=${this.showRotateButton}
+            ?show-flip-button=${this.showFlipButton}
+            ?show-rotate-slider=${this.showRotateSlider}
+            ?show-shape-selector=${this.showShapeSelector}
+            toolbar-position=${this.toolbarPosition}
+            variant=${this.variant}
+            .availableShapes=${this.availableShapes}
+            .icons=${this.icons}
+            @sfx-crop-toolbar-command=${this.onToolbarCommand}
+          ></sfx-crop-toolbar>
+        `:null}
+        <div class=${Et.classMap({"sfx-cr-loading":!0,"sfx-cr-loading--hidden":!this.loading})} part="loading">
+          <div class="sfx-cr-loading-spinner"></div>
+          <div class="sfx-cr-loading-text">Loading…</div>
+        </div>
+        <div class=${Et.classMap({"sfx-cr-error":!0,"sfx-cr-error--visible":!!this.errorMessage})} part="error">
+          ${this.errorMessage??"Failed to load image"}
+        </div>
+      </div>
+    `}loadImage(e){return this.ensure().loadImage(e)}getTransformState(){return this.ensure().getTransformState()}setCropShape(e){this.ensure(),this.cropShape=e}setCropRect(e){this.ensure().setCropRect(e)}getCropRect(){return this.ensure().getCropRect()}rotateLeft(){this.ensure().rotateLeft()}flipHorizontal(){this.ensure().flipHorizontal()}setRotation(e){this.ensure().setRotation(e)}setScale(e){this.ensure().setScale(e)}reset(){this.ensure().reset()}toCanvas(){return this.ensure().toCanvas()}toBlob(e,o){return this.ensure().toBlob(e,o)}toDataURL(e,o){return this.ensure().toDataURL(e,o)}toTransformParams(){return this.ensure().toTransformParams()}async save(e,o){const i=await this.toBlob(e,o),n=this.toDataURL(e,o),r=this.toTransformParams();this.dispatch("sfx-crop-save",{blob:i,dataURL:n,params:r})}cancel(){this.dispatch("sfx-crop-cancel",void 0)}ensure(){if(!this.controller)throw new Error('<sfx-crop> not connected — wait for "sfx-crop-ready" or firstUpdated().');return this.controller}fitHostToImage(){if(!this.currentImage||!this.isConnected||!this.canvasHost)return;const e=this.currentImage.naturalWidth,o=this.currentImage.naturalHeight,i=this.style.width,n=this.style.height;this.style.width="",this.style.height="";const r=b=>{if(!b||b==="none")return Number.POSITIVE_INFINITY;const H=nt(b);return Number.isFinite(H)&&H>0?H:Number.POSITIVE_INFINITY},p=getComputedStyle(this);let l=r(p.maxWidth),a=r(p.maxHeight);const c=this.parentElement,u=c?getComputedStyle(c):null;if(c&&u&&(u.display==="none"||c.clientWidth===0)){this.style.width=i,this.style.height=n;return}const m=(()=>{if(!c||!u)return 0;const b=c.clientWidth;return Math.max(0,b-(nt(u.paddingLeft)||0)-(nt(u.paddingRight)||0))})();m>0?l=Math.min(l,m):Number.isFinite(l)||(l=window.innerWidth),Number.isFinite(a)||(a=window.innerHeight),this.style.width=i,this.style.height=n;const d=l,s=a;if(d<=0||s<=0)return;let f,x;if(this.variant==="fixed"){const b=this.fixedFrameAspect(d/s);let H=d,I=d/b;I>s&&(I=s,H=s*b),f=Math.floor(H),x=Math.floor(I)}else{const b=Math.min(d/e,s/o,1);f=Math.floor(e*b),x=Math.floor(o*b)}const S=nt(i),v=nt(n);(Number.isNaN(S)||Math.abs(S-f)>=1||Math.abs(v-x)>=1)&&(this.style.width=`${f}px`,this.style.height=`${x}px`)}fixedFrameAspect(e){const o=this.cropShape;if(o==="free")return e;if(o==="rounded-rect")return 1;const i=lt(o);return i&&i>0?i:e}dispatch(e,o){this.dispatchEvent(new CustomEvent(e,{detail:o,bubbles:!0,composed:!0}))}parseInitialCrop(){const e=this.initialCrop;if(!e)return null;const o=typeof e=="object"?e:We(e);if(!o||typeof o!="object")return null;const i=o;return typeof i.x!="number"||typeof i.y!="number"||typeof i.width!="number"||typeof i.height!="number"?null:{x:i.x,y:i.y,width:i.width,height:i.height}}buildConfig(){return{src:this.src,variant:this.variant,cropShape:this.cropShape,theme:this.theme,initialRotation:this.initialRotation,initialScale:this.initialScale,initialCrop:this.parseInitialCrop(),minScale:this.minScale,maxScale:this.maxScale,minCropSize:this.minCropSize,availableShapes:At(this.availableShapes)??[...bt],handleSize:this.handleSize,handleColor:this.handleColor,borderRadius:this.borderRadius,outputType:this.outputType,outputQuality:this.outputQuality,maxOutputWidth:this.maxOutputWidth,maxOutputHeight:this.maxOutputHeight,overlayColor:this.overlayColor,showGrid:this.showGrid,showToolbar:this.showToolbar,showRotateSlider:this.showRotateSlider,showZoomSlider:this.showZoomSlider,showShapeSelector:this.showShapeSelector,showRotateButton:this.showRotateButton,showFlipButton:this.showFlipButton,toolbarPosition:this.toolbarPosition,showBleedMargin:this.showBleedMargin,bleedMarginSize:this.bleedMarginSize,bleedMarginColor:this.bleedMarginColor,enableAnimations:this.enableAnimations,animationSpeed:this.animationSpeed,keyboard:this.keyboard,pinchZoom:this.pinchZoom,wheelZoom:this.wheelZoom}}};Tt.styles=[Fe,Xt,Le,ze];let R=Tt;M([C.property({type:String,reflect:!0})],R.prototype,"src");M([C.property({type:String,attribute:"crop-shape",reflect:!0})],R.prototype,"cropShape");M([C.property({type:String,reflect:!0})],R.prototype,"theme");M([C.property({type:Number,attribute:"initial-rotation"})],R.prototype,"initialRotation");M([C.property({type:Number,attribute:"initial-scale"})],R.prototype,"initialScale");M([C.property({type:Number,attribute:"min-scale"})],R.prototype,"minScale");M([C.property({type:Number,attribute:"max-scale"})],R.prototype,"maxScale");M([C.property({type:Number,attribute:"min-crop-size"})],R.prototype,"minCropSize");M([C.property({type:Number,attribute:"handle-size"})],R.prototype,"handleSize");M([C.property({type:Number,attribute:"border-radius"})],R.prototype,"borderRadius");M([C.property({type:Number,attribute:"output-quality"})],R.prototype,"outputQuality");M([C.property({type:Number,attribute:"max-output-width"})],R.prototype,"maxOutputWidth");M([C.property({type:Number,attribute:"max-output-height"})],R.prototype,"maxOutputHeight");M([C.property({type:Number,attribute:"bleed-margin-size"})],R.prototype,"bleedMarginSize");M([C.property({type:Number,attribute:"animation-speed"})],R.prototype,"animationSpeed");M([C.property({type:String,attribute:"handle-color"})],R.prototype,"handleColor");M([C.property({type:String,attribute:"overlay-color"})],R.prototype,"overlayColor");M([C.property({type:String,attribute:"bleed-margin-color"})],R.prototype,"bleedMarginColor");M([C.property({type:String,attribute:"output-type"})],R.prototype,"outputType");M([C.property({type:String,attribute:"toolbar-position",reflect:!0})],R.prototype,"toolbarPosition");M([C.property({type:String,reflect:!0})],R.prototype,"variant");M([C.property({attribute:"show-grid",converter:Ae})],R.prototype,"showGrid");M([C.property({type:Boolean,attribute:"show-toolbar"})],R.prototype,"showToolbar");M([C.property({type:Boolean,attribute:"show-rotate-slider"})],R.prototype,"showRotateSlider");M([C.property({type:Boolean,attribute:"show-zoom-slider"})],R.prototype,"showZoomSlider");M([C.property({type:Boolean,attribute:"show-shape-selector"})],R.prototype,"showShapeSelector");M([C.property({type:Boolean,attribute:"show-rotate-button"})],R.prototype,"showRotateButton");M([C.property({type:Boolean,attribute:"show-flip-button"})],R.prototype,"showFlipButton");M([C.property({type:Boolean,attribute:"show-bleed-margin"})],R.prototype,"showBleedMargin");M([C.property({type:Boolean,attribute:"enable-animations"})],R.prototype,"enableAnimations");M([C.property({type:Boolean})],R.prototype,"keyboard");M([C.property({type:Boolean,attribute:"pinch-zoom"})],R.prototype,"pinchZoom");M([C.property({type:Boolean,attribute:"wheel-zoom"})],R.prototype,"wheelZoom");M([C.property({attribute:"available-shapes"})],R.prototype,"availableShapes");M([C.property({attribute:"initial-crop"})],R.prototype,"initialCrop");M([C.property({attribute:!1})],R.prototype,"icons");M([C.state()],R.prototype,"loading");M([C.state()],R.prototype,"errorMessage");M([C.query("sfx-crop-canvas")],R.prototype,"canvasHost");M([C.query("sfx-crop-toolbar")],R.prototype,"toolbarHost");M([C.query(".sfx-cr-container")],R.prototype,"containerEl");const Xe=["src","variant","cropShape","theme","minScale","maxScale","minCropSize","borderRadius","handleSize","handleColor","overlayColor","showGrid","showBleedMargin","bleedMarginSize","bleedMarginColor","enableAnimations","animationSpeed","keyboard","pinchZoom","wheelZoom"];function nt(t){if(!t)return NaN;const e=parseFloat(t);return Number.isFinite(e)?/^-?\d*\.?\d+(?:px)?$/.test(t.trim())?e:NaN:NaN}function We(t){try{return JSON.parse(t)}catch{return null}}exports.DEFAULT_CONFIG=Ot;exports.DEFAULT_SHAPES=bt;exports.SfxCropBaseElement=Ct;exports.SfxCropCanvasElement=st;exports.SfxCropElement=R;exports.TOOLBAR_RESERVE_PX=Zt;exports.baseStyles=Xt;exports.clamp=z;exports.createCropController=Yt;exports.degreesToRadians=at;exports.getAspectRatio=lt;exports.mergeConfig=vt;exports.parseAvailableShapes=At;exports.parseRatio=St;exports.safeDefine=He;exports.toolbarEnterKeyframes=Oe;
+//# sourceMappingURL=sfx-crop-1LGASewd.cjs.map