react-img-cutout 1.2.0 → 1.4.0

package/dist/index.cjs

@@ -1,12 +1,12 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react");var Z={exports:{}},X={};var st;function Tt(){if(st)return X;st=1;var t=Symbol.for("react.transitional.element"),e=Symbol.for("react.fragment");function n(r,i,l){var a=null;if(l!==void 0&&(a=""+l),i.key!==void 0&&(a=""+i.key),"key"in i){l={};for(var s in i)s!=="key"&&(l[s]=i[s])}else l=i;return i=l.ref,{$$typeof:t,type:r,key:a,ref:i!==void 0?i:null,props:l}}return X.Fragment=e,X.jsx=n,X.jsxs=n,X}var q={};var it;function jt(){return it||(it=1,process.env.NODE_ENV!=="production"&&(function(){function t(o){if(o==null)return null;if(typeof o=="function")return o.$$typeof===L?null:o.displayName||o.name||null;if(typeof o=="string")return o;switch(o){case d:return"Fragment";case g:return"Profiler";case v:return"StrictMode";case $:return"Suspense";case W:return"SuspenseList";case z:return"Activity"}if(typeof o=="object")switch(typeof o.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),o.$$typeof){case x:return"Portal";case k:return o.displayName||"Context";case C:return(o._context.displayName||"Context")+".Consumer";case w:var b=o.render;return o=o.displayName,o||(o=b.displayName||b.name||"",o=o!==""?"ForwardRef("+o+")":"ForwardRef"),o;case V:return b=o.displayName||null,b!==null?b:t(o.type)||"Memo";case Y:b=o._payload,o=o._init;try{return t(o(b))}catch{}}return null}function e(o){return""+o}function n(o){try{e(o);var b=!1}catch{b=!0}if(b){b=console;var A=b.error,j=typeof Symbol=="function"&&Symbol.toStringTag&&o[Symbol.toStringTag]||o.constructor.name||"Object";return A.call(b,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",j),e(o)}}function r(o){if(o===d)return"<>";if(typeof o=="object"&&o!==null&&o.$$typeof===Y)return"<...>";try{var b=t(o);return b?"<"+b+">":"<...>"}catch{return"<...>"}}function i(){var o=T.A;return o===null?null:o.getOwner()}function l(){return Error("react-stack-top-frame")}function a(o){if(S.call(o,"key")){var b=Object.getOwnPropertyDescriptor(o,"key").get;if(b&&b.isReactWarning)return!1}return o.key!==void 0}function s(o,b){function A(){M||(M=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",b))}A.isReactWarning=!0,Object.defineProperty(o,"key",{get:A,configurable:!0})}function f(){var o=t(this.type);return O[o]||(O[o]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),o=this.props.ref,o!==void 0?o:null}function c(o,b,A,j,K,tt){var P=A.ref;return o={$$typeof:m,type:o,key:b,props:A,_owner:j},(P!==void 0?P:null)!==null?Object.defineProperty(o,"ref",{enumerable:!1,get:f}):Object.defineProperty(o,"ref",{enumerable:!1,value:null}),o._store={},Object.defineProperty(o._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(o,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(o,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:K}),Object.defineProperty(o,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:tt}),Object.freeze&&(Object.freeze(o.props),Object.freeze(o)),o}function h(o,b,A,j,K,tt){var P=b.children;if(P!==void 0)if(j)if(R(P)){for(j=0;j<P.length;j++)E(P[j]);Object.freeze&&Object.freeze(P)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else E(P);if(S.call(b,"key")){P=t(o);var H=Object.keys(b).filter(function(_t){return _t!=="key"});j=0<H.length?"{key: someKey, "+H.join(": ..., ")+": ...}":"{key: someKey}",ot[P+j]||(H=0<H.length?"{"+H.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react");var tt={exports:{}},G={};var st;function Ot(){if(st)return G;st=1;var t=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function n(e,l,s){var i=null;if(s!==void 0&&(i=""+s),l.key!==void 0&&(i=""+l.key),"key"in l){s={};for(var o in l)o!=="key"&&(s[o]=l[o])}else s=l;return l=s.ref,{$$typeof:t,type:e,key:i,ref:l!==void 0?l:null,props:s}}return G.Fragment=r,G.jsx=n,G.jsxs=n,G}var K={};var it;function zt(){return it||(it=1,process.env.NODE_ENV!=="production"&&(function(){function t(a){if(a==null)return null;if(typeof a=="function")return a.$$typeof===q?null:a.displayName||a.name||null;if(typeof a=="string")return a;switch(a){case p:return"Fragment";case g:return"Profiler";case h:return"StrictMode";case R:return"Suspense";case A:return"SuspenseList";case Y:return"Activity"}if(typeof a=="object")switch(typeof a.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),a.$$typeof){case m:return"Portal";case M:return a.displayName||"Context";case x:return(a._context.displayName||"Context")+".Consumer";case k:var C=a.render;return a=a.displayName,a||(a=C.displayName||C.name||"",a=a!==""?"ForwardRef("+a+")":"ForwardRef"),a;case V:return C=a.displayName||null,C!==null?C:t(a.type)||"Memo";case D:C=a._payload,a=a._init;try{return t(a(C))}catch{}}return null}function r(a){return""+a}function n(a){try{r(a);var C=!1}catch{C=!0}if(C){C=console;var T=C.error,_=typeof Symbol=="function"&&Symbol.toStringTag&&a[Symbol.toStringTag]||a.constructor.name||"Object";return T.call(C,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",_),r(a)}}function e(a){if(a===p)return"<>";if(typeof a=="object"&&a!==null&&a.$$typeof===D)return"<...>";try{var C=t(a);return C?"<"+C+">":"<...>"}catch{return"<...>"}}function l(){var a=B.A;return a===null?null:a.getOwner()}function s(){return Error("react-stack-top-frame")}function i(a){if(H.call(a,"key")){var C=Object.getOwnPropertyDescriptor(a,"key").get;if(C&&C.isReactWarning)return!1}return a.key!==void 0}function o(a,C){function T(){S||(S=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",C))}T.isReactWarning=!0,Object.defineProperty(a,"key",{get:T,configurable:!0})}function c(){var a=t(this.type);return P[a]||(P[a]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),a=this.props.ref,a!==void 0?a:null}function f(a,C,T,_,Q,et){var $=T.ref;return a={$$typeof:d,type:a,key:C,props:T,_owner:_},($!==void 0?$:null)!==null?Object.defineProperty(a,"ref",{enumerable:!1,get:c}):Object.defineProperty(a,"ref",{enumerable:!1,value:null}),a._store={},Object.defineProperty(a._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(a,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(a,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:Q}),Object.defineProperty(a,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:et}),Object.freeze&&(Object.freeze(a.props),Object.freeze(a)),a}function y(a,C,T,_,Q,et){var $=C.children;if($!==void 0)if(_)if(j($)){for(_=0;_<$.length;_++)v($[_]);Object.freeze&&Object.freeze($)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else v($);if(H.call(C,"key")){$=t(a);var X=Object.keys(C).filter(function(Wt){return Wt!=="key"});_=0<X.length?"{key: someKey, "+X.join(": ..., ")+": ...}":"{key: someKey}",z[$+_]||(X=0<X.length?"{"+X.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,j,P,H,P),ot[P+j]=!0)}if(P=null,A!==void 0&&(n(A),P=""+A),a(b)&&(n(b.key),P=""+b.key),"key"in b){A={};for(var et in b)et!=="key"&&(A[et]=b[et])}else A=b;return P&&s(A,typeof o=="function"?o.displayName||o.name||"Unknown":o),c(o,P,A,i(),K,tt)}function E(o){y(o)?o._store&&(o._store.validated=1):typeof o=="object"&&o!==null&&o.$$typeof===Y&&(o._payload.status==="fulfilled"?y(o._payload.value)&&o._payload.value._store&&(o._payload.value._store.validated=1):o._store&&(o._store.validated=1))}function y(o){return typeof o=="object"&&o!==null&&o.$$typeof===m}var p=u,m=Symbol.for("react.transitional.element"),x=Symbol.for("react.portal"),d=Symbol.for("react.fragment"),v=Symbol.for("react.strict_mode"),g=Symbol.for("react.profiler"),C=Symbol.for("react.consumer"),k=Symbol.for("react.context"),w=Symbol.for("react.forward_ref"),$=Symbol.for("react.suspense"),W=Symbol.for("react.suspense_list"),V=Symbol.for("react.memo"),Y=Symbol.for("react.lazy"),z=Symbol.for("react.activity"),L=Symbol.for("react.client.reference"),T=p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,S=Object.prototype.hasOwnProperty,R=Array.isArray,_=console.createTask?console.createTask:function(){return null};p={react_stack_bottom_frame:function(o){return o()}};var M,O={},N=p.react_stack_bottom_frame.bind(p,l)(),D=_(r(l)),ot={};q.Fragment=d,q.jsx=function(o,b,A){var j=1e4>T.recentlyCreatedOwnerStacks++;return h(o,b,A,!1,j?Error("react-stack-top-frame"):N,j?_(r(o)):D)},q.jsxs=function(o,b,A){var j=1e4>T.recentlyCreatedOwnerStacks++;return h(o,b,A,!0,j?Error("react-stack-top-frame"):N,j?_(r(o)):D)}})()),q}var at;function Pt(){return at||(at=1,process.env.NODE_ENV==="production"?Z.exports=Tt():Z.exports=jt()),Z.exports}var I=Pt();const Mt=200;function $t(t,e,n){const r=n[0]-e[0],i=n[1]-e[1],l=r*r+i*i;if(l===0){const s=t[0]-e[0],f=t[1]-e[1];return Math.sqrt(s*s+f*f)}return Math.abs(r*(e[1]-t[1])-i*(e[0]-t[0]))/Math.sqrt(l)}function rt(t,e){if(t.length<=2)return t;let n=0,r=0;const i=t[0],l=t[t.length-1];for(let a=1;a<t.length-1;a++){const s=$t(t[a],i,l);s>n&&(n=s,r=a)}if(n>e){const a=rt(t.slice(0,r+1),e),s=rt(t.slice(r),e);return a.slice(0,-1).concat(s)}return[i,l]}function Dt(t,e,n){let r=-1,i=-1;t:for(let p=0;p<n;p++)for(let m=0;m<e;m++)if(t[p*e+m]){r=m,i=p;break t}if(r<0)return[];const l=[1,1,0,-1,-1,-1,0,1],a=[0,1,1,1,0,-1,-1,-1],s=[];let f=r,c=i,h=5;const E=e*n*4;let y=0;do{s.push([f,c]);let p=!1;for(let m=0;m<8;m++){const x=(h+m)%8,d=f+l[x],v=c+a[x];if(d>=0&&d<e&&v>=0&&v<n&&t[v*e+d]){f=d,c=v,h=((x+4)%8+1)%8,p=!0;break}}if(!p||++y>E)break}while(f!==r||c!==i);return s}function Ot(t,e,n,r=30,i=.003){if(e<=0||n<=0||t.length===0)return[];const l=Math.min(1,Mt/Math.max(e,n)),a=Math.max(1,Math.round(e*l)),s=Math.max(1,Math.round(n*l)),f=new Uint8Array(a*s);for(let y=0;y<s;y++){const p=Math.min(n-1,Math.floor(y/l));for(let m=0;m<a;m++){const x=Math.min(e-1,Math.floor(m/l));f[y*a+m]=t[p*e+x]>r?1:0}}const c=Dt(f,a,s);if(c.length<3)return[];const h=c.map(([y,p])=>[(y+.5)/a,(p+.5)/s]),E=rt(h,i);return E.length>=3?E:h}function Wt(t,e){const n=new Uint8Array(e);for(let r=0;r<e;r++)n[r]=t[r*4+3];return n}function Nt(t,e,n,r){if(e<=0||n<=0)return{x:0,y:0,w:1,h:1};let i=e,l=n,a=0,s=0,f=!1;for(let c=0;c<n;c++)for(let h=0;h<e;h++)t[c*e+h]>r&&(h<i&&(i=h),h>a&&(a=h),c<l&&(l=c),c>s&&(s=c),f=!0);return f?{x:i/e,y:l/n,w:(a-i+1)/e,h:(s-l+1)/n}:{x:0,y:0,w:1,h:1}}class gt{id;bounds={x:0,y:0,w:1,h:1};contour=[];src;threshold;alpha=new Uint8Array(0);width=0;height=0;constructor(e,n){this.id=e.id,this.src=e.src,this.threshold=n}async prepare(){const e=new Image;e.crossOrigin="anonymous",e.src=this.src,await new Promise(a=>{e.onload=()=>a(),e.onerror=()=>a()});const n=e.naturalWidth,r=e.naturalHeight;if(n<=0||r<=0)return;const i=document.createElement("canvas");i.width=n,i.height=r;const l=i.getContext("2d",{willReadFrequently:!0});if(l)try{l.drawImage(e,0,0);const a=l.getImageData(0,0,n,r);this.alpha=Wt(a.data,n*r),this.width=n,this.height=r,this.bounds=Nt(this.alpha,n,r,this.threshold),this.contour=Ot(this.alpha,n,r,this.threshold)}catch{this.alpha=new Uint8Array(0)}}hitTest(e,n){if(this.alpha.length===0)return!1;const r=this.bounds;if(e<r.x||e>r.x+r.w||n<r.y||n>r.y+r.h)return!1;const i=Math.min(this.width-1,Math.max(0,Math.floor(e*this.width))),l=Math.min(this.height-1,Math.max(0,Math.floor(n*this.height)));return this.alpha[l*this.width+i]>this.threshold}}class pt{id;bounds;constructor(e){this.id=e.id,this.bounds={...e.bounds}}hitTest(e,n){const r=this.bounds;return e>=r.x&&e<=r.x+r.w&&n>=r.y&&n<=r.y+r.h}}function Yt(t,e,n){let r=!1;for(let i=0,l=n.length-1;i<n.length;l=i++){const a=n[i][0],s=n[i][1],f=n[l][0],c=n[l][1];s>e!=c>e&&t<(f-a)*(e-s)/(c-s)+a&&(r=!r)}return r}class yt{id;bounds;points;constructor(e){this.id=e.id,this.points=e.points;let n=1/0,r=1/0,i=-1/0,l=-1/0;for(const[a,s]of e.points)a<n&&(n=a),a>i&&(i=a),s<r&&(r=s),s>l&&(l=s);this.bounds={x:n,y:r,w:i-n,h:l-r}}hitTest(e,n){const r=this.bounds;return e<r.x||e>r.x+r.w||n<r.y||n>r.y+r.h?!1:Yt(e,n,this.points)}}function mt(t,e){switch(t.type){case"image":return new gt(t,e);case"bbox":return new pt(t);case"polygon":return new yt(t)}}function Vt(t){switch(t.type){case"image":return`${t.id}:image:${t.src}:${t.label??""}`;case"bbox":return`${t.id}:bbox:${t.bounds.x},${t.bounds.y},${t.bounds.w},${t.bounds.h}:${t.label??""}`;case"polygon":return`${t.id}:polygon:${t.points.flat().join(",")}:${t.label??""}`}}function bt(t,e=!0,n=30,r=150){const[i,l]=u.useState(null),[a,s]=u.useState(null),f=u.useRef(null),c=u.useRef([]),[h,E]=u.useState({}),[y,p]=u.useState({}),m=Math.min(255,Math.max(0,n)),x=u.useRef(null),d=u.useCallback(()=>{x.current===null&&(x.current=setTimeout(()=>{x.current=null,l(null)},r))},[r]),v=u.useCallback(()=>{x.current!==null&&(clearTimeout(x.current),x.current=null)},[]),g=t.map(Vt).join("|"),C=u.useMemo(()=>t,[g]);u.useEffect(()=>{if(!e){c.current=[];return}let T=!1,S=[];async function R(){const _=[],M={},O={};for(const N of C){const D=mt(N,m);if(D.prepare&&await D.prepare(),T)return;_.push(D),M[D.id]=D.bounds,D.contour&&D.contour.length>=3&&(O[D.id]=D.contour)}T||(S=_,c.current=_,E(M),p(O))}return R(),()=>{T=!0;for(const _ of S)_.dispose?.()}},[C,e,m]);const k=u.useCallback((T,S)=>{const R=c.current;for(let _=R.length-1;_>=0;_--)if(R[_].hitTest(T,S))return R[_].id;return null},[]),w=u.useCallback(T=>{const S=f.current;if(!S)return null;const R=S.getBoundingClientRect(),_=(T.clientX-R.left)/R.width,M=(T.clientY-R.top)/R.height;return _<0||_>1||M<0||M>1?null:{nx:_,ny:M}},[]),$=u.useCallback(T=>{if(!e)return;const S=w(T);if(!S){d();return}const R=k(S.nx,S.ny);if(R===null){if(T.target?.closest('[data-cutout-overlay="true"]')){v();return}d();return}v(),l(R)},[e,w,k,d,v]),W=u.useCallback(()=>{d()},[d]),V=u.useCallback(T=>{if(!e)return;const S=w(T);if(!S){s(null);return}const R=k(S.nx,S.ny);s(R===a||R===null?null:R)},[e,w,k,a]),Y=a??i,z=e?h:{},L=e?y:{};return u.useEffect(()=>()=>{v()},[v]),{hoveredId:i,selectedId:a,activeId:Y,boundsMap:z,contourMap:L,containerRef:f,containerProps:{onPointerMove:$,onPointerLeave:W,onClick:V}}}function nt(t,e){return{name:t,css:e}}const lt=new Set;function Lt(t){if(!(!t.keyframes?.length||typeof document>"u"))for(const e of t.keyframes){if(lt.has(e.name))continue;lt.add(e.name);const n=document.createElement("style");n.setAttribute("data-ricut-kf",e.name),n.textContent=`@keyframes ${e.name} {
-${e.css}
-}`,document.head.appendChild(n)}}const U="all 0.5s cubic-bezier(0.22, 1, 0.36, 1)",vt={name:"elevate",transition:U,mainImageHovered:{filter:"brightness(0.45) saturate(0.7)"},vignetteStyle:{background:"radial-gradient(ellipse at center, transparent 20%, rgba(0,0,0,0.4) 100%)"},cutoutActive:{transform:"scale(1.04) translateY(-6px)",filter:"drop-shadow(0 0 28px rgba(130, 190, 255, 0.5)) drop-shadow(0 16px 48px rgba(0, 0, 0, 0.55))",opacity:1},cutoutInactive:{transform:"scale(1)",filter:"brightness(0.45) saturate(0.6)",opacity:.55},cutoutIdle:{transform:"scale(1)",filter:"drop-shadow(0 1px 4px rgba(0, 0, 0, 0.12))",opacity:1},geometryActive:{fill:"rgba(130, 190, 255, 0.2)",stroke:"rgba(130, 190, 255, 0.9)",strokeWidth:2,glow:"0 0 24px rgba(130, 190, 255, 0.5), 0 0 56px rgba(130, 190, 255, 0.2), 0 12px 40px rgba(0, 0, 0, 0.4)"},geometryInactive:{fill:"rgba(100, 150, 200, 0.06)",stroke:"rgba(100, 150, 200, 0.2)",strokeWidth:1},geometryIdle:{fill:"transparent",stroke:"transparent",strokeWidth:1}},xt={name:"glow",transition:U,mainImageHovered:{filter:"brightness(0.55) saturate(0.8)"},vignetteStyle:{background:"radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.3) 100%)"},cutoutActive:{transform:"scale(1)",filter:"drop-shadow(0 0 20px rgba(255, 200, 100, 0.6)) drop-shadow(0 0 60px rgba(255, 200, 100, 0.25))",opacity:1},cutoutInactive:{transform:"scale(1)",filter:"brightness(0.5) saturate(0.5)",opacity:.5},cutoutIdle:{transform:"scale(1)",filter:"none",opacity:1},geometryActive:{fill:"rgba(255, 200, 100, 0.15)",stroke:"rgba(255, 200, 100, 0.85)",strokeWidth:2,glow:"0 0 20px rgba(255, 200, 100, 0.5), 0 0 56px rgba(255, 200, 100, 0.2)"},geometryInactive:{fill:"rgba(200, 160, 80, 0.05)",stroke:"rgba(200, 160, 80, 0.2)",strokeWidth:1},geometryIdle:{fill:"transparent",stroke:"transparent",strokeWidth:1}},wt={name:"lift",transition:U,mainImageHovered:{filter:"brightness(0.4)"},vignetteStyle:{background:"rgba(0,0,0,0.25)"},cutoutActive:{transform:"scale(1.06) translateY(-10px)",filter:"drop-shadow(0 24px 64px rgba(0, 0, 0, 0.7))",opacity:1},cutoutInactive:{transform:"scale(0.97)",filter:"brightness(0.35)",opacity:.4},cutoutIdle:{transform:"scale(1)",filter:"none",opacity:1},geometryActive:{fill:"rgba(255, 255, 255, 0.1)",stroke:"rgba(255, 255, 255, 0.7)",strokeWidth:2,glow:"0 20px 56px rgba(0, 0, 0, 0.6), 0 0 16px rgba(255, 255, 255, 0.1)"},geometryInactive:{fill:"rgba(255, 255, 255, 0.02)",stroke:"rgba(255, 255, 255, 0.1)",strokeWidth:1},geometryIdle:{fill:"transparent",stroke:"transparent",strokeWidth:1}},kt={name:"subtle",transition:"all 0.3s ease",mainImageHovered:{filter:"brightness(0.7)"},vignetteStyle:{background:"transparent"},cutoutActive:{transform:"scale(1)",filter:"none",opacity:1},cutoutInactive:{transform:"scale(1)",filter:"none",opacity:.35},cutoutIdle:{transform:"scale(1)",filter:"none",opacity:1},geometryActive:{fill:"rgba(255, 255, 255, 0.08)",stroke:"rgba(255, 255, 255, 0.5)",strokeWidth:1},geometryInactive:{fill:"transparent",stroke:"rgba(255, 255, 255, 0.1)",strokeWidth:1},geometryIdle:{fill:"transparent",stroke:"transparent",strokeWidth:1}},ct=nt("_ricut-trace-stroke",`from { stroke-dashoffset: 0; }
-   to   { stroke-dashoffset: -1; }`),Et={name:"trace",transition:U,keyframes:[ct],mainImageHovered:{filter:"brightness(0.35) saturate(0.5)"},vignetteStyle:{background:"radial-gradient(ellipse at center, transparent 20%, rgba(0,0,0,0.5) 100%)"},cutoutActive:{transform:"scale(1)",filter:"drop-shadow(0 0 8px rgba(255,255,255,0.15))",opacity:1},cutoutInactive:{transform:"scale(1)",filter:"brightness(0.35) saturate(0.4)",opacity:.4},cutoutIdle:{transform:"scale(1)",filter:"none",opacity:1},geometryActive:{fill:"rgba(255, 255, 255, 0.03)",stroke:"rgba(255, 255, 255, 0.9)",strokeWidth:2.5,strokeDasharray:"0.15 0.85",animation:`${ct.name} 3s linear infinite`,glow:"0 0 10px rgba(255, 255, 255, 0.25)"},geometryInactive:{fill:"transparent",stroke:"rgba(255, 255, 255, 0.15)",strokeWidth:1},geometryIdle:{fill:"transparent",stroke:"transparent",strokeWidth:1}},ut=nt("_ricut-shimmer",`0%, 100% {
+  <%s key={someKey} {...props} />`,_,$,X,$),z[$+_]=!0)}if($=null,T!==void 0&&(n(T),$=""+T),i(C)&&(n(C.key),$=""+C.key),"key"in C){T={};for(var rt in C)rt!=="key"&&(T[rt]=C[rt])}else T=C;return $&&o(T,typeof a=="function"?a.displayName||a.name||"Unknown":a),f(a,$,T,l(),Q,et)}function v(a){w(a)?a._store&&(a._store.validated=1):typeof a=="object"&&a!==null&&a.$$typeof===D&&(a._payload.status==="fulfilled"?w(a._payload.value)&&a._payload.value._store&&(a._payload.value._store.validated=1):a._store&&(a._store.validated=1))}function w(a){return typeof a=="object"&&a!==null&&a.$$typeof===d}var b=u,d=Symbol.for("react.transitional.element"),m=Symbol.for("react.portal"),p=Symbol.for("react.fragment"),h=Symbol.for("react.strict_mode"),g=Symbol.for("react.profiler"),x=Symbol.for("react.consumer"),M=Symbol.for("react.context"),k=Symbol.for("react.forward_ref"),R=Symbol.for("react.suspense"),A=Symbol.for("react.suspense_list"),V=Symbol.for("react.memo"),D=Symbol.for("react.lazy"),Y=Symbol.for("react.activity"),q=Symbol.for("react.client.reference"),B=b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,H=Object.prototype.hasOwnProperty,j=Array.isArray,I=console.createTask?console.createTask:function(){return null};b={react_stack_bottom_frame:function(a){return a()}};var S,P={},W=b.react_stack_bottom_frame.bind(b,s)(),O=I(e(s)),z={};K.Fragment=p,K.jsx=function(a,C,T){var _=1e4>B.recentlyCreatedOwnerStacks++;return y(a,C,T,!1,_?Error("react-stack-top-frame"):W,_?I(e(a)):O)},K.jsxs=function(a,C,T){var _=1e4>B.recentlyCreatedOwnerStacks++;return y(a,C,T,!0,_?Error("react-stack-top-frame"):W,_?I(e(a)):O)}})()),K}var at;function Lt(){return at||(at=1,process.env.NODE_ENV==="production"?tt.exports=Ot():tt.exports=zt()),tt.exports}var E=Lt();const Yt=400;function Nt(t,r,n){const e=n[0]-r[0],l=n[1]-r[1],s=e*e+l*l;if(s===0){const o=t[0]-r[0],c=t[1]-r[1];return Math.sqrt(o*o+c*c)}return Math.abs(e*(r[1]-t[1])-l*(r[0]-t[0]))/Math.sqrt(s)}function nt(t,r){if(t.length<=2)return t;let n=0,e=0;const l=t[0],s=t[t.length-1];for(let i=1;i<t.length-1;i++){const o=Nt(t[i],l,s);o>n&&(n=o,e=i)}if(n>r){const i=nt(t.slice(0,e+1),r),o=nt(t.slice(e),r);return i.slice(0,-1).concat(o)}return[l,s]}function ct(t){let r=0;const n=t.length;for(let e=0;e<n;e++){const[l,s]=t[e],[i,o]=t[(e+1)%n];r+=l*o-i*s}return r*.5}function Vt(t,r){if(t.length<=3||r<=0)return t;const n=t.concat([t[0]]),e=nt(n,r);return e.length<4?t:(e.pop(),e.length>=3?e:t)}const Bt=[[],[[3,0]],[[0,1]],[[3,1]],[[1,2]],[[3,0],[1,2]],[[0,2]],[[3,2]],[[2,3]],[[2,0]],[[0,1],[2,3]],[[2,1]],[[1,3]],[[1,0]],[[0,3]],[]];function Ht(t,r,n,e){const l=[];for(let s=0;s<n-1;s++)for(let i=0;i<r-1;i++){const o=t[s*r+i],c=t[s*r+i+1],f=t[(s+1)*r+i+1],y=t[(s+1)*r+i];let v=0;if(o>=e&&(v|=1),c>=e&&(v|=2),f>=e&&(v|=4),y>=e&&(v|=8),v===0||v===15)continue;const w=b=>{switch(b){case 0:{const d=c-o,m=Math.abs(d)<1e-10?.5:Math.max(0,Math.min(1,(e-o)/d));return[i+m,s]}case 1:{const d=f-c,m=Math.abs(d)<1e-10?.5:Math.max(0,Math.min(1,(e-c)/d));return[i+1,s+m]}case 2:{const d=f-y,m=Math.abs(d)<1e-10?.5:Math.max(0,Math.min(1,(e-y)/d));return[i+m,s+1]}case 3:{const d=y-o,m=Math.abs(d)<1e-10?.5:Math.max(0,Math.min(1,(e-o)/d));return[i,s+m]}default:return[i+.5,s+.5]}};for(const[b,d]of Bt[v])l.push([w(b),w(d)])}return l}function Ft(t){if(t.length===0)return[];const r=s=>`${Math.round(s[0]*1e4)},${Math.round(s[1]*1e4)}`,n=new Map;for(let s=0;s<t.length;s++)for(const i of[0,1]){const o=r(t[s][i]);let c=n.get(o);c||(c=[],n.set(o,c)),c.push({idx:s,end:i})}const e=new Uint8Array(t.length),l=[];for(let s=0;s<t.length;s++){if(e[s])continue;const i=[];let o=s,c=1,f=0;const y=t.length+1;for(;f++<y&&!e[o];){e[o]=1;const v=c===1?0:1;i.push(t[o][v]);const w=t[o][c],b=r(w),d=n.get(b);if(!d)break;const m=d.find(p=>!e[p.idx]);if(!m)break;o=m.idx,c=m.end===0?1:0}i.length>=3&&l.push(i)}return l}function Xt(t,r,n,e=30,l=.002){if(r<=0||n<=0||t.length===0)return[];const s=Math.min(1,Yt/Math.max(r,n)),i=Math.max(1,Math.round(r*s)),o=Math.max(1,Math.round(n*s)),c=i+2,f=o+2,y=new Float32Array(c*f);for(let h=0;h<o;h++){const g=Math.min(n-1,Math.floor(h/s));for(let x=0;x<i;x++){const M=Math.min(r-1,Math.floor(x/s));y[(h+1)*c+(x+1)]=t[g*r+M]}}const v=Ht(y,c,f,e),w=Ft(v);if(w.length===0)return[];let b=w[0],d=Math.abs(ct(b));for(let h=1;h<w.length;h++){const g=Math.abs(ct(w[h]));g>d&&(b=w[h],d=g)}const m=b.map(([h,g])=>[(h-1)/i,(g-1)/o]),p=Vt(m,l);return p.length>=3?p:m}function Ut(t){const r=t.length;if(r<3)return"";const n=[`M${t[0][0]},${t[0][1]}`];for(let e=0;e<r;e++){const l=t[(e-1+r)%r],s=t[e],i=t[(e+1)%r],o=t[(e+2)%r],c=s[0]+(i[0]-l[0])/6,f=s[1]+(i[1]-l[1])/6,y=i[0]-(o[0]-s[0])/6,v=i[1]-(o[1]-s[1])/6;n.push(`C${c},${f} ${y},${v} ${i[0]},${i[1]}`)}return n.push("Z"),n.join("")}function qt(t,r){const n=new Uint8Array(r);for(let e=0;e<r;e++)n[e]=t[e*4+3];return n}function Gt(t,r,n,e){if(r<=0||n<=0)return{x:0,y:0,w:1,h:1};let l=r,s=n,i=0,o=0,c=!1;for(let f=0;f<n;f++)for(let y=0;y<r;y++)t[f*r+y]>e&&(y<l&&(l=y),y>i&&(i=y),f<s&&(s=f),f>o&&(o=f),c=!0);return c?{x:l/r,y:s/n,w:(i-l+1)/r,h:(o-s+1)/n}:{x:0,y:0,w:1,h:1}}class yt{id;bounds={x:0,y:0,w:1,h:1};contour=[];src;threshold;alpha=new Uint8Array(0);width=0;height=0;constructor(r,n){this.id=r.id,this.src=r.src,this.threshold=n}async prepare(){const r=new Image;r.crossOrigin="anonymous",r.src=this.src,await new Promise(i=>{r.onload=()=>i(),r.onerror=()=>i()});const n=r.naturalWidth,e=r.naturalHeight;if(n<=0||e<=0)return;const l=document.createElement("canvas");l.width=n,l.height=e;const s=l.getContext("2d",{willReadFrequently:!0});if(s)try{s.drawImage(r,0,0);const i=s.getImageData(0,0,n,e);this.alpha=qt(i.data,n*e),this.width=n,this.height=e,this.bounds=Gt(this.alpha,n,e,this.threshold),this.contour=Xt(this.alpha,n,e,this.threshold)}catch{this.alpha=new Uint8Array(0)}}hitTest(r,n){if(this.alpha.length===0)return!1;const e=this.bounds;if(r<e.x||r>e.x+e.w||n<e.y||n>e.y+e.h)return!1;const l=Math.min(this.width-1,Math.max(0,Math.floor(r*this.width))),s=Math.min(this.height-1,Math.max(0,Math.floor(n*this.height)));return this.alpha[s*this.width+l]>this.threshold}}class mt{id;bounds;constructor(r){this.id=r.id,this.bounds={...r.bounds}}hitTest(r,n){const e=this.bounds;return r>=e.x&&r<=e.x+e.w&&n>=e.y&&n<=e.y+e.h}}function Kt(t,r,n){let e=!1;for(let l=0,s=n.length-1;l<n.length;s=l++){const i=n[l][0],o=n[l][1],c=n[s][0],f=n[s][1];o>r!=f>r&&t<(c-i)*(r-o)/(f-o)+i&&(e=!e)}return e}class vt{id;bounds;points;constructor(r){this.id=r.id,this.points=r.points;let n=1/0,e=1/0,l=-1/0,s=-1/0;for(const[i,o]of r.points)i<n&&(n=i),i>l&&(l=i),o<e&&(e=o),o>s&&(s=o);this.bounds={x:n,y:e,w:l-n,h:s-e}}hitTest(r,n){const e=this.bounds;return r<e.x||r>e.x+e.w||n<e.y||n>e.y+e.h?!1:Kt(r,n,this.points)}}class wt{id;bounds;cx;cy;rx;ry;constructor(r,n=1,e=1){this.id=r.id,this.cx=r.center.x,this.cy=r.center.y;const l=Math.max(1,n),s=Math.max(1,e),i=Math.min(l,s);this.rx=r.radius*i/l,this.ry=r.radius*i/s,this.bounds={x:r.center.x-this.rx,y:r.center.y-this.ry,w:this.rx*2,h:this.ry*2}}hitTest(r,n){if(this.rx<=0||this.ry<=0)return!1;const e=(r-this.cx)/this.rx,l=(n-this.cy)/this.ry;return e*e+l*l<=1}}function xt(t,r,n){switch(t.type){case"image":return new yt(t,r);case"bbox":return new mt(t);case"polygon":return new vt(t);case"circle":return new wt(t,n?.viewportWidth,n?.viewportHeight)}}function Jt(t){switch(t.type){case"image":return`${t.id}:image:${t.src}:${t.label??""}`;case"bbox":return`${t.id}:bbox:${t.bounds.x},${t.bounds.y},${t.bounds.w},${t.bounds.h}:${t.label??""}`;case"polygon":return`${t.id}:polygon:${t.points.flat().join(",")}:${t.label??""}`;case"circle":return`${t.id}:circle:${t.center.x},${t.center.y},${t.radius}:${t.label??""}`}}function bt(t,r=!0,n=30,e=150){const[l,s]=u.useState(null),[i,o]=u.useState(null),c=u.useRef(null),f=u.useRef([]),[y,v]=u.useState({}),[w,b]=u.useState({width:1,height:1}),[d,m]=u.useState({}),p=Math.min(255,Math.max(0,n)),h=u.useRef(null),g=u.useCallback(()=>{h.current===null&&(h.current=setTimeout(()=>{h.current=null,s(null)},e))},[e]),x=u.useCallback(()=>{h.current!==null&&(clearTimeout(h.current),h.current=null)},[]),M=t.map(Jt).join("|"),k=u.useMemo(()=>t,[M]);u.useEffect(()=>{const j=c.current;if(!j)return;const I=()=>{const P=j.getBoundingClientRect();b({width:Math.max(1,P.width),height:Math.max(1,P.height)})};I();const S=new ResizeObserver(I);return S.observe(j),()=>S.disconnect()},[]),u.useEffect(()=>{if(!r){f.current=[];return}let j=!1,I=[];async function S(){const P=[],W={},O={};for(const z of k){const a=xt(z,p,{viewportWidth:w.width,viewportHeight:w.height});if(a.prepare&&await a.prepare(),j)return;P.push(a),W[a.id]=a.bounds,a.contour&&a.contour.length>=3&&(O[a.id]=a.contour)}j||(I=P,f.current=P,v(W),m(O))}return S(),()=>{j=!0;for(const P of I)P.dispose?.()}},[k,r,p,w.width,w.height]);const R=u.useCallback((j,I)=>{const S=f.current;for(let P=S.length-1;P>=0;P--)if(S[P].hitTest(j,I))return S[P].id;return null},[]),A=u.useCallback(j=>{const I=c.current;if(!I)return null;const S=I.getBoundingClientRect(),P=(j.clientX-S.left)/S.width,W=(j.clientY-S.top)/S.height;return P<0||P>1||W<0||W>1?null:{nx:P,ny:W}},[]),V=u.useCallback(j=>{if(!r)return;const I=A(j);if(!I){g();return}const S=R(I.nx,I.ny);if(S===null){if(j.target?.closest('[data-cutout-overlay="true"]')){x();return}g();return}x(),s(S)},[r,A,R,g,x]),D=u.useCallback(()=>{g()},[g]),Y=u.useCallback(j=>{if(!r)return;const I=A(j);if(!I){o(null);return}const S=R(I.nx,I.ny);o(S===i||S===null?null:S)},[r,A,R,i]),q=i??l,B=r?y:{},H=r?d:{};return u.useEffect(()=>()=>{x()},[x]),{hoveredId:l,selectedId:i,activeId:q,viewportSize:w,boundsMap:B,contourMap:H,containerRef:c,containerProps:{onPointerMove:V,onPointerLeave:D,onClick:Y}}}function ot(t,r){return{name:t,css:r}}const lt=new Set;function Zt(t){if(!(!t.keyframes?.length||typeof document>"u"))for(const r of t.keyframes){if(lt.has(r.name))continue;lt.add(r.name);const n=document.createElement("style");n.setAttribute("data-ricut-kf",r.name),n.textContent=`@keyframes ${r.name} {
+${r.css}
+}`,document.head.appendChild(n)}}const J="all 0.5s cubic-bezier(0.22, 1, 0.36, 1)",kt={name:"elevate",transition:J,mainImageHovered:{filter:"brightness(0.45) saturate(0.7)"},vignetteStyle:{background:"radial-gradient(ellipse at center, transparent 20%, rgba(0,0,0,0.4) 100%)"},cutoutActive:{transform:"scale(1.04) translateY(-6px)",filter:"drop-shadow(0 0 28px rgba(130, 190, 255, 0.5)) drop-shadow(0 16px 48px rgba(0, 0, 0, 0.55))",opacity:1},cutoutInactive:{transform:"scale(1)",filter:"brightness(0.45) saturate(0.6)",opacity:.55},cutoutIdle:{transform:"scale(1)",filter:"drop-shadow(0 1px 4px rgba(0, 0, 0, 0.12))",opacity:1},geometryActive:{fill:"rgba(130, 190, 255, 0.2)",stroke:"rgba(130, 190, 255, 0.9)",strokeWidth:0,glow:"0 0 24px rgba(130, 190, 255, 0.5), 0 0 56px rgba(130, 190, 255, 0.2), 0 12px 40px rgba(0, 0, 0, 0.4)"},geometryInactive:{fill:"rgba(100, 150, 200, 0.06)",stroke:"rgba(100, 150, 200, 0.2)",strokeWidth:1},geometryIdle:{fill:"transparent",stroke:"transparent",strokeWidth:1}},Ct={name:"glow",transition:J,mainImageHovered:{filter:"brightness(0.55) saturate(0.8)"},vignetteStyle:{background:"radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.3) 100%)"},cutoutActive:{transform:"scale(1)",filter:"drop-shadow(0 0 20px rgba(255, 200, 100, 0.6)) drop-shadow(0 0 60px rgba(255, 200, 100, 0.25))",opacity:1},cutoutInactive:{transform:"scale(1)",filter:"brightness(0.5) saturate(0.5)",opacity:.5},cutoutIdle:{transform:"scale(1)",filter:"none",opacity:1},geometryActive:{fill:"rgba(255, 200, 100, 0.15)",stroke:"rgba(255, 200, 100, 0.85)",strokeWidth:0,glow:"0 0 20px rgba(255, 200, 100, 0.5), 0 0 56px rgba(255, 200, 100, 0.2)"},geometryInactive:{fill:"rgba(200, 160, 80, 0.05)",stroke:"rgba(200, 160, 80, 0.2)",strokeWidth:1},geometryIdle:{fill:"transparent",stroke:"transparent",strokeWidth:1}},Et={name:"lift",transition:J,mainImageHovered:{filter:"brightness(0.4)"},vignetteStyle:{background:"rgba(0,0,0,0.25)"},cutoutActive:{transform:"scale(1.06) translateY(-10px)",filter:"drop-shadow(0 24px 64px rgba(0, 0, 0, 0.7))",opacity:1},cutoutInactive:{transform:"scale(0.97)",filter:"brightness(0.35)",opacity:.4},cutoutIdle:{transform:"scale(1)",filter:"none",opacity:1},geometryActive:{fill:"rgba(255, 255, 255, 0.1)",stroke:"rgba(255, 255, 255, 0.7)",strokeWidth:0,glow:"0 20px 56px rgba(0, 0, 0, 0.6), 0 0 16px rgba(255, 255, 255, 0.1)"},geometryInactive:{fill:"rgba(255, 255, 255, 0.02)",stroke:"rgba(255, 255, 255, 0.1)",strokeWidth:1},geometryIdle:{fill:"transparent",stroke:"transparent",strokeWidth:1}},Mt={name:"subtle",transition:"all 0.3s ease",mainImageHovered:{filter:"brightness(0.7)"},vignetteStyle:{background:"transparent"},cutoutActive:{transform:"scale(1)",filter:"none",opacity:1},cutoutInactive:{transform:"scale(1)",filter:"none",opacity:.35},cutoutIdle:{transform:"scale(1)",filter:"none",opacity:1},geometryActive:{fill:"rgba(255, 255, 255, 0.08)",stroke:"rgba(255, 255, 255, 0.5)",strokeWidth:0},geometryInactive:{fill:"transparent",stroke:"rgba(255, 255, 255, 0.1)",strokeWidth:1},geometryIdle:{fill:"transparent",stroke:"transparent",strokeWidth:1}},ut=ot("_ricut-trace-stroke",`from { stroke-dashoffset: 0; }
+   to   { stroke-dashoffset: -1; }`),St={name:"trace",transition:J,keyframes:[ut],mainImageHovered:{filter:"brightness(0.35) saturate(0.5)"},vignetteStyle:{background:"radial-gradient(ellipse at center, transparent 20%, rgba(0,0,0,0.5) 100%)"},cutoutActive:{transform:"scale(1)",filter:"drop-shadow(0 0 8px rgba(255,255,255,0.15))",opacity:1},cutoutInactive:{transform:"scale(1)",filter:"brightness(0.35) saturate(0.4)",opacity:.4},cutoutIdle:{transform:"scale(1)",filter:"none",opacity:1},geometryActive:{fill:"rgba(255, 255, 255, 0.03)",stroke:"rgba(255, 255, 255, 0.9)",strokeWidth:2,strokeDasharray:"0.15 0.85",animation:`${ut.name} 3s linear infinite`,glow:"0 0 10px rgba(255, 255, 255, 0.25)"},geometryInactive:{fill:"transparent",stroke:"rgba(255, 255, 255, 0.15)",strokeWidth:1},geometryIdle:{fill:"transparent",stroke:"transparent",strokeWidth:1}},ft=ot("_ricut-shimmer",`0%, 100% {
     filter: brightness(1.05) contrast(1.02)
             drop-shadow(0 0 6px rgba(255, 255, 255, 0.12))
             drop-shadow(0 12px 32px rgba(0, 0, 0, 0.4));
@@ -20,4 +20,4 @@ ${e.css}
     filter: brightness(1.05) contrast(1.02)
             drop-shadow(0 0 6px rgba(255, 255, 255, 0.12))
             drop-shadow(0 12px 32px rgba(0, 0, 0, 0.4));
-  }`),Ct={name:"shimmer",transition:U,keyframes:[ut],mainImageHovered:{filter:"brightness(0.35) saturate(0.6)"},vignetteStyle:{background:"radial-gradient(ellipse at center, transparent 20%, rgba(0,0,0,0.5) 100%)"},cutoutActive:{transform:"scale(1.04) translateY(-6px)",filter:"brightness(1.05) contrast(1.02) drop-shadow(0 0 6px rgba(255,255,255,0.12)) drop-shadow(0 12px 32px rgba(0,0,0,0.4))",opacity:1,animation:`${ut.name} 2.4s ease-in-out infinite`},cutoutInactive:{transform:"scale(1)",filter:"brightness(0.35) saturate(0.5)",opacity:.4},cutoutIdle:{transform:"scale(1)",filter:"drop-shadow(0 1px 4px rgba(0, 0, 0, 0.1))",opacity:1},geometryActive:{fill:"rgba(255, 255, 255, 0.1)",stroke:"rgba(255, 255, 255, 0.7)",strokeWidth:2,glow:"0 0 14px rgba(255, 255, 255, 0.35), 0 12px 32px rgba(0, 0, 0, 0.4)"},geometryInactive:{fill:"rgba(255, 255, 255, 0.02)",stroke:"rgba(255, 255, 255, 0.1)",strokeWidth:1},geometryIdle:{fill:"transparent",stroke:"transparent",strokeWidth:1}},B={elevate:vt,glow:xt,lift:wt,subtle:kt,trace:Et,shimmer:Ct},G=u.createContext(null),It=u.createContext(null);function Q(){const t=u.useContext(It);if(!t)throw new Error("Must be used inside <CutoutViewer>");return t}const J=u.createContext(null);function Ht(){const t=u.useContext(J);if(!t)throw new Error("useCutout must be used inside <CutoutViewer.Cutout>");return t}function Bt({id:t,src:e,label:n,effect:r,children:i,renderLayer:l}){const a=u.useContext(G),s=Q();if(!a)throw new Error("<CutoutViewer.Cutout> must be used inside <CutoutViewer>");u.useEffect(()=>(a.registerCutout({type:"image",id:t,src:e,label:n}),()=>a.unregisterCutout(t)),[t,e,n,a]);const f=r?typeof r=="string"?B[r]??s.effect:r:s.effect,c=s.contourMap[t]??null,h=s.activeId===t,E=s.hoveredId===t,y=s.selectedId===t,p={x:0,y:0,w:1,h:1},m=s.boundsMap[t]??p;let x,d;!s.enabled||!s.isAnyActive&&!s.showAll?(x=f.cutoutIdle,d=f.geometryIdle):s.showAll||h?(x=f.cutoutActive,d=f.geometryActive):(x=f.cutoutInactive,d=f.geometryInactive);const v=u.useMemo(()=>({id:t,label:n,bounds:m,isActive:h,isHovered:E,isSelected:y,effect:f}),[t,n,m,h,E,y,f]);return I.jsxs(J.Provider,{value:v,children:[I.jsxs("div",{"data-cutout-id":t,style:{pointerEvents:"none",position:"absolute",inset:0,zIndex:h?20:10,transition:f.transition,...x},children:[l?l({isActive:h,isHovered:E,isSelected:y,bounds:m,effect:f}):I.jsx("img",{src:e,alt:n||t,draggable:!1,style:{width:"100%",height:"100%",objectFit:"fill",userSelect:"none"}}),c&&d&&I.jsx("svg",{viewBox:"0 0 1 1",preserveAspectRatio:"none",style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",filter:d.glow?`drop-shadow(${d.glow.split(",")[0]?.trim()??""})`:"none"},children:I.jsx("polygon",{points:c.map(([g,C])=>`${g},${C}`).join(" "),fill:d.fill,stroke:d.stroke,strokeWidth:(d.strokeWidth??2)*.0015,strokeLinejoin:"round",strokeLinecap:d.strokeDasharray?"round":void 0,strokeDasharray:d.strokeDasharray,pathLength:d.strokeDasharray?1:void 0,style:{transition:f.transition,animation:d.animation}})})]}),i]})}function ft(t){const{filter:e,...n}=t;return n}function Ft({id:t,bounds:e,label:n,effect:r,children:i,renderLayer:l}){const a=u.useContext(G),s=Q();if(!a)throw new Error("<CutoutViewer.BBoxCutout> must be used inside <CutoutViewer>");const{x:f,y:c,w:h,h:E}=e;u.useEffect(()=>(a.registerCutout({type:"bbox",id:t,bounds:{x:f,y:c,w:h,h:E},label:n}),()=>a.unregisterCutout(t)),[t,f,c,h,E,n,a]);const y=r?typeof r=="string"?B[r]??s.effect:r:s.effect,p=s.activeId===t,m=s.hoveredId===t,x=s.selectedId===t,d={x:0,y:0,w:1,h:1},v=s.boundsMap[t]??d;let g,C;!s.enabled||!s.isAnyActive&&!s.showAll?(C={...y.cutoutIdle,filter:"none",opacity:0},g=y.geometryIdle):s.showAll||p?(C=ft(y.cutoutActive),g=y.geometryActive):(C=ft(y.cutoutInactive),g=y.geometryInactive);const w=g??{fill:"rgba(37, 99, 235, 0.15)",stroke:"rgba(37, 99, 235, 0.6)",strokeWidth:2},$=u.useMemo(()=>({id:t,label:n,bounds:v,isActive:p,isHovered:m,isSelected:x,effect:y}),[t,n,v,p,m,x,y]);return I.jsxs(J.Provider,{value:$,children:[I.jsx("div",{"data-cutout-id":t,style:{pointerEvents:"none",position:"absolute",inset:0,zIndex:p?20:10,transition:y.transition,...C},children:l?l({isActive:p,isHovered:m,isSelected:x,bounds:v,effect:y}):I.jsx("svg",{viewBox:"0 0 1 1",preserveAspectRatio:"none",style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",filter:w.glow?`drop-shadow(${w.glow.split(",")[0]?.trim()??""})`:"none"},children:I.jsx("rect",{x:v.x,y:v.y,width:v.w,height:v.h,rx:.004,fill:w.fill,stroke:w.stroke,strokeWidth:(w.strokeWidth??2)*.0015,strokeLinecap:w.strokeDasharray?"round":void 0,strokeDasharray:w.strokeDasharray,pathLength:w.strokeDasharray?1:void 0,style:{transition:y.transition,animation:w.animation}})})}),i]})}function dt(t){const{filter:e,...n}=t;return n}function zt({id:t,points:e,label:n,effect:r,children:i,renderLayer:l}){const a=u.useContext(G),s=Q();if(!a)throw new Error("<CutoutViewer.PolygonCutout> must be used inside <CutoutViewer>");const f=e.flat().join(",");u.useEffect(()=>(a.registerCutout({type:"polygon",id:t,points:e,label:n}),()=>a.unregisterCutout(t)),[t,f,n,a]);const c=r?typeof r=="string"?B[r]??s.effect:r:s.effect,h=s.activeId===t,E=s.hoveredId===t,y=s.selectedId===t,p={x:0,y:0,w:1,h:1},m=s.boundsMap[t]??p;let x,d;!s.enabled||!s.isAnyActive&&!s.showAll?(d={...c.cutoutIdle,filter:"none",opacity:0},x=c.geometryIdle):s.showAll||h?(d=dt(c.cutoutActive),x=c.geometryActive):(d=dt(c.cutoutInactive),x=c.geometryInactive);const g=x??{fill:"rgba(37, 99, 235, 0.15)",stroke:"rgba(37, 99, 235, 0.6)",strokeWidth:2},C=u.useMemo(()=>({id:t,label:n,bounds:m,isActive:h,isHovered:E,isSelected:y,effect:c}),[t,n,m,h,E,y,c]);return I.jsxs(J.Provider,{value:C,children:[I.jsx("div",{"data-cutout-id":t,style:{pointerEvents:"none",position:"absolute",inset:0,zIndex:h?20:10,transition:c.transition,...d},children:l?l({isActive:h,isHovered:E,isSelected:y,bounds:m,effect:c}):I.jsx("svg",{viewBox:"0 0 1 1",preserveAspectRatio:"none",style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",filter:g.glow?`drop-shadow(${g.glow.split(",")[0]?.trim()??""})`:"none"},children:I.jsx("polygon",{points:e.map(([k,w])=>`${k},${w}`).join(" "),fill:g.fill,stroke:g.stroke,strokeWidth:(g.strokeWidth??2)*.0015,strokeLinejoin:"round",strokeLinecap:g.strokeDasharray?"round":void 0,strokeDasharray:g.strokeDasharray,pathLength:g.strokeDasharray?1:void 0,style:{transition:c.transition,animation:g.animation}})})}),i]})}function Xt(t,e){const{x:n,y:r,w:i,h:l}=e;let a,s;t.includes("left")?(a=`${n*100}%`,s="0"):t.includes("right")?(a=`${(n+i)*100}%`,s="-100%"):(a=`${(n+i/2)*100}%`,s="-50%");let f,c;return t.startsWith("top")?(f=`${r*100}%`,c="-100%"):t.startsWith("bottom")?(f=`${(r+l)*100}%`,c="0"):(f=`${(r+l/2)*100}%`,c="-50%"),{position:"absolute",left:a,top:f,transform:`translate(${s}, ${c})`}}function Rt({placement:t="top-center",children:e,className:n="",style:r}){const i=u.useContext(J),l=Q();if(!i)throw new Error("<CutoutViewer.Overlay> must be used inside <CutoutViewer.Cutout>");const a=l.enabled&&(l.showAll||i.isActive),s=Xt(t,i.bounds);return I.jsx("div",{"data-cutout-overlay":"true",className:n,style:{zIndex:30,transition:i.effect.transition,opacity:a?1:0,pointerEvents:a?"auto":"none",...s,...r},children:e})}function At({onComplete:t,minPoints:e=3,closeThreshold:n=.03}){const[r,i]=u.useState([]),[l,a]=u.useState(null),s=u.useRef(null),f=u.useCallback((g,C)=>{const k=s.current;if(!k)return null;const w=k.getBoundingClientRect(),$=(g-w.left)/w.width,W=(C-w.top)/w.height;return $<0||$>1||W<0||W>1?null:[$,W]},[]),c=u.useCallback((g,C)=>{if(C.length<e)return!1;const k=g[0]-C[0][0],w=g[1]-C[0][1];return Math.sqrt(k*k+w*w)<n},[e,n]),h=u.useCallback(g=>{g.length<e||(t(g),i([]),a(null))},[t,e]),E=u.useCallback(()=>{i([]),a(null)},[]),y=u.useCallback(g=>{a(f(g.clientX,g.clientY))},[f]),p=u.useCallback(()=>{a(null)},[]),m=u.useCallback(g=>{g.stopPropagation();const C=f(g.clientX,g.clientY);C&&i(k=>c(C,k)?(h(k),[]):[...k,C])},[f,c,h]),x=u.useCallback(g=>{g.stopPropagation(),i(C=>{const k=C.slice(0,-1);return k.length>=e?(h(k),[]):k})},[e,h]),d=u.useCallback(g=>{g.preventDefault(),i(C=>C.slice(0,-1))},[]),v=l!==null&&c(l,r);return{points:r,previewPoint:l,willClose:v,reset:E,containerRef:s,containerProps:{onPointerMove:y,onPointerLeave:p,onClick:m,onDoubleClick:x,onContextMenu:d}}}function St({onComplete:t,minPoints:e=3,closeThreshold:n=.03,strokeColor:r="#3b82f6",enabled:i=!0,style:l,className:a=""}){if(!u.useContext(G))throw new Error("<CutoutViewer.DrawPolygon> must be used inside <CutoutViewer>");const{points:f,previewPoint:c,willClose:h,reset:E,containerRef:y,containerProps:p}=At({onComplete:t,minPoints:e,closeThreshold:n});u.useEffect(()=>{function d(v){v.key==="Escape"&&E()}return document.addEventListener("keydown",d),()=>document.removeEventListener("keydown",d)},[E]),u.useEffect(()=>{i||E()},[i,E]);const m=c?[...f,c]:f,x=m.map(([d,v])=>`${d},${v}`).join(" ");return I.jsx("div",{ref:y,"data-draw-polygon":"true",className:a,style:{position:"absolute",inset:0,cursor:i?h?"cell":"crosshair":"default",zIndex:30,pointerEvents:i?"auto":"none",...l},...i?p:{},children:f.length>0&&I.jsxs("svg",{viewBox:"0 0 1 1",preserveAspectRatio:"none",style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},children:[f.length>=3&&I.jsx("polygon",{points:f.map(([d,v])=>`${d},${v}`).join(" "),fill:r,fillOpacity:.15,stroke:"none"}),m.length>=2&&I.jsx("polyline",{points:x,fill:"none",stroke:r,strokeWidth:.003,strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:c?"0.015 0.008":void 0}),c&&f.length>=1&&I.jsx("line",{x1:c[0],y1:c[1],x2:f[0][0],y2:f[0][1],stroke:r,strokeWidth:.002,strokeDasharray:"0.015 0.008",strokeLinecap:"round",opacity:h?.9:.35}),f.map(([d,v],g)=>I.jsx("circle",{cx:d,cy:v,r:g===0?.012:.007,fill:g===0&&h?r:"white",stroke:r,strokeWidth:.002},g)),c&&I.jsx("circle",{cx:c[0],cy:c[1],r:.005,fill:h?r:"white",stroke:r,strokeWidth:.002,opacity:.8})]})})}function ht(t){switch(t.type){case"image":return`image:${t.src}:${t.label??""}`;case"bbox":return`bbox:${t.bounds.x},${t.bounds.y},${t.bounds.w},${t.bounds.h}:${t.label??""}`;case"polygon":return`polygon:${t.points.flat().join(",")}:${t.label??""}`}}function qt({mainImage:t,mainImageAlt:e="Main image",effect:n="elevate",enabled:r=!0,showAll:i=!1,alphaThreshold:l=30,hoverLeaveDelay:a=150,children:s,className:f="",style:c,onHover:h,onActiveChange:E,onSelect:y}){const p=typeof n=="string"?B[n]??B.elevate:n;u.useEffect(()=>{Lt(p)},[p]);const[m,x]=u.useState(()=>new Map),d=u.useCallback(M=>{x(O=>{const N=O.get(M.id);if(N&&ht(N)===ht(M))return O;const D=new Map(O);return D.set(M.id,M),D})},[]),v=u.useCallback(M=>{x(O=>{if(!O.has(M))return O;const N=new Map(O);return N.delete(M),N})},[]),g=u.useMemo(()=>({registerCutout:d,unregisterCutout:v}),[d,v]),C=u.useMemo(()=>Array.from(m.values()),[m]),{activeId:k,selectedId:w,hoveredId:$,boundsMap:W,contourMap:V,containerRef:Y,containerProps:z}=bt(C,r,l,a),L=u.useRef(null),T=u.useRef(null),S=u.useRef(null);u.useEffect(()=>{$!==L.current&&(L.current=$,h?.($))},[$,h]),u.useEffect(()=>{k!==T.current&&(T.current=k,E?.(k))},[k,E]),u.useEffect(()=>{w!==S.current&&(S.current=w,y?.(w))},[w,y]);const R=i||k!==null,_=u.useMemo(()=>({activeId:k,selectedId:w,hoveredId:$,effect:p,enabled:r,showAll:i,boundsMap:W,contourMap:V,isAnyActive:R}),[k,w,$,p,r,i,W,V,R]);return I.jsx(G.Provider,{value:g,children:I.jsx(It.Provider,{value:_,children:I.jsxs("div",{ref:Y,className:f,style:{position:"relative",width:"100%",overflow:"hidden",cursor:R&&r?"pointer":"default",...c},...z,children:[I.jsx("img",{src:t,alt:e,draggable:!1,style:{display:"block",width:"100%",height:"auto",userSelect:"none",transition:p.transition,...R&&r?p.mainImageHovered:{}}}),I.jsx("div",{style:{pointerEvents:"none",position:"absolute",inset:0,transition:p.transition,opacity:R&&r?1:0,...p.vignetteStyle}}),s]})})})}const F=qt;F.Cutout=Bt;F.BBoxCutout=Ft;F.PolygonCutout=zt;F.Overlay=Rt;F.DrawPolygon=St;exports.CutoutOverlay=Rt;exports.CutoutViewer=F;exports.DrawPolygon=St;exports.ImageHitTestStrategy=gt;exports.PolygonHitTestStrategy=yt;exports.RectHitTestStrategy=pt;exports.createHitTestStrategy=mt;exports.defineKeyframes=nt;exports.elevateEffect=vt;exports.glowEffect=xt;exports.hoverEffects=B;exports.liftEffect=wt;exports.shimmerEffect=Ct;exports.subtleEffect=kt;exports.traceEffect=Et;exports.useCutout=Ht;exports.useCutoutHitTest=bt;exports.useDrawPolygon=At;
+  }`),Rt={name:"shimmer",transition:J,keyframes:[ft],mainImageHovered:{filter:"brightness(0.35) saturate(0.6)"},vignetteStyle:{background:"radial-gradient(ellipse at center, transparent 20%, rgba(0,0,0,0.5) 100%)"},cutoutActive:{transform:"scale(1.04) translateY(-6px)",filter:"brightness(1.05) contrast(1.02) drop-shadow(0 0 6px rgba(255,255,255,0.12)) drop-shadow(0 12px 32px rgba(0,0,0,0.4))",opacity:1,animation:`${ft.name} 2.4s ease-in-out infinite`},cutoutInactive:{transform:"scale(1)",filter:"brightness(0.35) saturate(0.5)",opacity:.4},cutoutIdle:{transform:"scale(1)",filter:"drop-shadow(0 1px 4px rgba(0, 0, 0, 0.1))",opacity:1},geometryActive:{fill:"rgba(255, 255, 255, 0.1)",stroke:"rgba(255, 255, 255, 0.7)",strokeWidth:0,glow:"0 0 14px rgba(255, 255, 255, 0.35), 0 12px 32px rgba(0, 0, 0, 0.4)"},geometryInactive:{fill:"rgba(255, 255, 255, 0.02)",stroke:"rgba(255, 255, 255, 0.1)",strokeWidth:1},geometryIdle:{fill:"transparent",stroke:"transparent",strokeWidth:1}},F={elevate:kt,glow:Ct,lift:Et,subtle:Mt,trace:St,shimmer:Rt},N=u.createContext(null),It=u.createContext(null);function Z(){const t=u.useContext(It);if(!t)throw new Error("Must be used inside <CutoutViewer>");return t}const U=u.createContext(null);function Qt(){const t=u.useContext(U);if(!t)throw new Error("useCutout must be used inside <CutoutViewer.Cutout>");return t}function te({id:t,src:r,label:n,effect:e,children:l,renderLayer:s}){const i=u.useContext(N),o=Z();if(!i)throw new Error("<CutoutViewer.Cutout> must be used inside <CutoutViewer>");u.useEffect(()=>(i.registerCutout({type:"image",id:t,src:r,label:n}),()=>i.unregisterCutout(t)),[t,r,n,i]);const c=e?typeof e=="string"?F[e]??o.effect:e:o.effect,f=o.contourMap[t]??null,y=u.useMemo(()=>{if(!f)return null;const x=o.viewportSize.width||1,M=o.viewportSize.height||1,k=f.map(([R,A])=>[R*x,A*M]);return Ut(k)},[f,o.viewportSize.width,o.viewportSize.height]),v=o.activeId===t,w=o.hoveredId===t,b=o.selectedId===t,d={x:0,y:0,w:1,h:1},m=o.boundsMap[t]??d;let p,h;!o.enabled||!o.isAnyActive&&!o.showAll?(p=c.cutoutIdle,h=c.geometryIdle):o.showAll||v?(p=c.cutoutActive,h=c.geometryActive):(p=c.cutoutInactive,h=c.geometryInactive);const g=u.useMemo(()=>({id:t,label:n,bounds:m,isActive:v,isHovered:w,isSelected:b,effect:c}),[t,n,m,v,w,b,c]);return E.jsxs(U.Provider,{value:g,children:[E.jsxs("div",{"data-cutout-id":t,style:{pointerEvents:"none",position:"absolute",inset:0,zIndex:v?20:10,transition:c.transition,...p},children:[s?s({isActive:v,isHovered:w,isSelected:b,bounds:m,effect:c}):E.jsx("img",{src:r,alt:n||t,draggable:!1,style:{width:"100%",height:"100%",objectFit:"fill",userSelect:"none"}}),y&&h&&E.jsx("svg",{viewBox:`0 0 ${o.viewportSize.width||1} ${o.viewportSize.height||1}`,preserveAspectRatio:"none",style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",filter:h.glow?`drop-shadow(${h.glow.split(",")[0]?.trim()??""})`:"none"},children:E.jsx("path",{d:y,fill:h.fill,stroke:h.stroke,strokeWidth:h.strokeWidth??2,strokeLinejoin:"round",strokeLinecap:h.strokeDasharray?"round":void 0,strokeDasharray:h.strokeDasharray,pathLength:h.strokeDasharray?1:void 0,style:{transition:c.transition,animation:h.animation}})})]}),l]})}function ht(t){const{filter:r,...n}=t;return n}function ee({id:t,bounds:r,label:n,effect:e,children:l,renderLayer:s}){const i=u.useContext(N),o=Z();if(!i)throw new Error("<CutoutViewer.BBoxCutout> must be used inside <CutoutViewer>");const{x:c,y:f,w:y,h:v}=r;u.useEffect(()=>(i.registerCutout({type:"bbox",id:t,bounds:{x:c,y:f,w:y,h:v},label:n}),()=>i.unregisterCutout(t)),[t,c,f,y,v,n,i]);const w=e?typeof e=="string"?F[e]??o.effect:e:o.effect,b=o.activeId===t,d=o.hoveredId===t,m=o.selectedId===t,p={x:0,y:0,w:1,h:1},h=o.boundsMap[t]??p;let g,x;!o.enabled||!o.isAnyActive&&!o.showAll?(x={...w.cutoutIdle,filter:"none",opacity:0},g=w.geometryIdle):o.showAll||b?(x=ht(w.cutoutActive),g=w.geometryActive):(x=ht(w.cutoutInactive),g=w.geometryInactive);const k=g??{fill:"rgba(37, 99, 235, 0.15)",stroke:"rgba(37, 99, 235, 0.6)",strokeWidth:2},R=u.useMemo(()=>({id:t,label:n,bounds:h,isActive:b,isHovered:d,isSelected:m,effect:w}),[t,n,h,b,d,m,w]);return E.jsxs(U.Provider,{value:R,children:[E.jsx("div",{"data-cutout-id":t,style:{pointerEvents:"none",position:"absolute",inset:0,zIndex:b?20:10,transition:w.transition,...x},children:s?s({isActive:b,isHovered:d,isSelected:m,bounds:h,effect:w}):E.jsx("svg",{viewBox:"0 0 1 1",preserveAspectRatio:"none",style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",filter:k.glow?`drop-shadow(${k.glow.split(",")[0]?.trim()??""})`:"none"},children:E.jsx("rect",{x:h.x,y:h.y,width:h.w,height:h.h,rx:.004,fill:k.fill,stroke:k.stroke,strokeWidth:(k.strokeWidth??2)*.0015,strokeLinecap:k.strokeDasharray?"round":void 0,strokeDasharray:k.strokeDasharray,pathLength:k.strokeDasharray?1:void 0,style:{transition:w.transition,animation:k.animation}})})}),l]})}function dt(t){const{filter:r,...n}=t;return n}function re({id:t,points:r,label:n,effect:e,children:l,renderLayer:s}){const i=u.useContext(N),o=Z();if(!i)throw new Error("<CutoutViewer.PolygonCutout> must be used inside <CutoutViewer>");const c=r.flat().join(",");u.useEffect(()=>(i.registerCutout({type:"polygon",id:t,points:r,label:n}),()=>i.unregisterCutout(t)),[t,c,n,i]);const f=e?typeof e=="string"?F[e]??o.effect:e:o.effect,y=o.activeId===t,v=o.hoveredId===t,w=o.selectedId===t,b={x:0,y:0,w:1,h:1},d=o.boundsMap[t]??b;let m,p;!o.enabled||!o.isAnyActive&&!o.showAll?(p={...f.cutoutIdle,filter:"none",opacity:0},m=f.geometryIdle):o.showAll||y?(p=dt(f.cutoutActive),m=f.geometryActive):(p=dt(f.cutoutInactive),m=f.geometryInactive);const g=m??{fill:"rgba(37, 99, 235, 0.15)",stroke:"rgba(37, 99, 235, 0.6)",strokeWidth:2},x=u.useMemo(()=>({id:t,label:n,bounds:d,isActive:y,isHovered:v,isSelected:w,effect:f}),[t,n,d,y,v,w,f]);return E.jsxs(U.Provider,{value:x,children:[E.jsx("div",{"data-cutout-id":t,style:{pointerEvents:"none",position:"absolute",inset:0,zIndex:y?20:10,transition:f.transition,...p},children:s?s({isActive:y,isHovered:v,isSelected:w,bounds:d,effect:f}):E.jsx("svg",{viewBox:"0 0 1 1",preserveAspectRatio:"none",style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",filter:g.glow?`drop-shadow(${g.glow.split(",")[0]?.trim()??""})`:"none"},children:E.jsx("polygon",{points:r.map(([M,k])=>`${M},${k}`).join(" "),fill:g.fill,stroke:g.stroke,strokeWidth:(g.strokeWidth??2)*.0015,strokeLinejoin:"round",strokeLinecap:g.strokeDasharray?"round":void 0,strokeDasharray:g.strokeDasharray,pathLength:g.strokeDasharray?1:void 0,style:{transition:f.transition,animation:g.animation}})})}),l]})}function gt(t){const{filter:r,...n}=t;return n}function ne({id:t,center:r,radius:n,label:e,effect:l,children:s,renderLayer:i}){const o=u.useContext(N),c=Z();if(!o)throw new Error("<CutoutViewer.CircleCutout> must be used inside <CutoutViewer>");const{x:f,y}=r;u.useEffect(()=>(o.registerCutout({type:"circle",id:t,center:{x:f,y},radius:n,label:e}),()=>o.unregisterCutout(t)),[t,f,y,n,e,o]);const v=l?typeof l=="string"?F[l]??c.effect:l:c.effect,w=c.activeId===t,b=c.hoveredId===t,d=c.selectedId===t,m={x:0,y:0,w:1,h:1},p=c.boundsMap[t]??m,h=Math.max(1,c.viewportSize.width),g=Math.max(1,c.viewportSize.height),x=Math.min(h,g),M=n*x/h,k=n*x/g;let R,A;!c.enabled||!c.isAnyActive&&!c.showAll?(A={...v.cutoutIdle,filter:"none",opacity:0},R=v.geometryIdle):c.showAll||w?(A=gt(v.cutoutActive),R=v.geometryActive):(A=gt(v.cutoutInactive),R=v.geometryInactive);const D=R??{fill:"rgba(37, 99, 235, 0.15)",stroke:"rgba(37, 99, 235, 0.6)",strokeWidth:2},Y=u.useMemo(()=>({id:t,label:e,bounds:p,isActive:w,isHovered:b,isSelected:d,effect:v}),[t,e,p,w,b,d,v]);return E.jsxs(U.Provider,{value:Y,children:[E.jsx("div",{"data-cutout-id":t,style:{pointerEvents:"none",position:"absolute",inset:0,zIndex:w?20:10,transition:v.transition,...A},children:i?i({isActive:w,isHovered:b,isSelected:d,bounds:p,effect:v}):E.jsx("svg",{viewBox:"0 0 1 1",preserveAspectRatio:"none",style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",filter:D.glow?`drop-shadow(${D.glow.split(",")[0]?.trim()??""})`:"none"},children:E.jsx("ellipse",{cx:r.x,cy:r.y,rx:M,ry:k,fill:D.fill,stroke:D.stroke,strokeWidth:(D.strokeWidth??2)*.0015,strokeLinecap:D.strokeDasharray?"round":void 0,strokeDasharray:D.strokeDasharray,pathLength:D.strokeDasharray?1:void 0,style:{transition:v.transition,animation:D.animation}})})}),s]})}function oe(t,r){const{x:n,y:e,w:l,h:s}=r;let i,o;t.includes("left")?(i=`${n*100}%`,o="0"):t.includes("right")?(i=`${(n+l)*100}%`,o="-100%"):(i=`${(n+l/2)*100}%`,o="-50%");let c,f;return t.startsWith("top")?(c=`${e*100}%`,f="-100%"):t.startsWith("bottom")?(c=`${(e+s)*100}%`,f="0"):(c=`${(e+s/2)*100}%`,f="-50%"),{position:"absolute",left:i,top:c,transform:`translate(${o}, ${f})`}}function At({placement:t="top-center",children:r,className:n="",style:e,showOverlay:l=void 0}){const s=u.useContext(U),i=Z();if(!s)throw new Error("<CutoutViewer.Overlay> must be used inside <CutoutViewer.Cutout>");const o=l??i.showOverlays,c=i.enabled&&(i.showAll||o||s.isActive),f=oe(t,s.bounds);return E.jsx("div",{"data-cutout-overlay":"true",className:n,style:{zIndex:30,transition:s.effect.transition,opacity:c?1:0,pointerEvents:c?"auto":"none",...f,...e},children:r})}function Pt({onComplete:t,minPoints:r=3,closeThreshold:n=.03}){const[e,l]=u.useState([]),[s,i]=u.useState(null),o=u.useRef(null),c=u.useCallback((g,x)=>{const M=o.current;if(!M)return null;const k=M.getBoundingClientRect(),R=(g-k.left)/k.width,A=(x-k.top)/k.height;return R<0||R>1||A<0||A>1?null:[R,A]},[]),f=u.useCallback((g,x)=>{if(x.length<r)return!1;const M=g[0]-x[0][0],k=g[1]-x[0][1];return Math.sqrt(M*M+k*k)<n},[r,n]),y=u.useCallback(g=>{g.length<r||(t(g),l([]),i(null))},[t,r]),v=u.useCallback(()=>{l([]),i(null)},[]),w=u.useCallback(g=>{i(c(g.clientX,g.clientY))},[c]),b=u.useCallback(()=>{i(null)},[]),d=u.useCallback(g=>{g.stopPropagation();const x=c(g.clientX,g.clientY);x&&l(M=>f(x,M)?(y(M),[]):[...M,x])},[c,f,y]),m=u.useCallback(g=>{g.stopPropagation(),l(x=>{const M=x.slice(0,-1);return M.length>=r?(y(M),[]):M})},[r,y]),p=u.useCallback(g=>{g.preventDefault(),l(x=>x.slice(0,-1))},[]),h=s!==null&&f(s,e);return{points:e,previewPoint:s,willClose:h,reset:v,containerRef:o,containerProps:{onPointerMove:w,onPointerLeave:b,onClick:d,onDoubleClick:m,onContextMenu:p}}}function jt({onComplete:t,minPoints:r=3,closeThreshold:n=.03,strokeColor:e="#3b82f6",enabled:l=!0,style:s,className:i=""}){if(!u.useContext(N))throw new Error("<CutoutViewer.DrawPolygon> must be used inside <CutoutViewer>");const{points:c,previewPoint:f,willClose:y,reset:v,containerRef:w,containerProps:b}=Pt({onComplete:t,minPoints:r,closeThreshold:n});u.useEffect(()=>{function p(h){h.key==="Escape"&&v()}return document.addEventListener("keydown",p),()=>document.removeEventListener("keydown",p)},[v]),u.useEffect(()=>{l||v()},[l,v]);const d=f?[...c,f]:c,m=d.map(([p,h])=>`${p},${h}`).join(" ");return E.jsx("div",{ref:w,"data-draw-polygon":"true",className:i,style:{position:"absolute",inset:0,cursor:l?y?"cell":"crosshair":"default",zIndex:30,pointerEvents:l?"auto":"none",...s},...l?b:{},children:c.length>0&&E.jsxs("svg",{viewBox:"0 0 1 1",preserveAspectRatio:"none",style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},children:[c.length>=3&&E.jsx("polygon",{points:c.map(([p,h])=>`${p},${h}`).join(" "),fill:e,fillOpacity:.15,stroke:"none"}),d.length>=2&&E.jsx("polyline",{points:m,fill:"none",stroke:e,strokeWidth:.003,strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:f?"0.015 0.008":void 0}),f&&c.length>=1&&E.jsx("line",{x1:f[0],y1:f[1],x2:c[0][0],y2:c[0][1],stroke:e,strokeWidth:.002,strokeDasharray:"0.015 0.008",strokeLinecap:"round",opacity:y?.9:.35}),c.map(([p,h],g)=>E.jsx("circle",{cx:p,cy:h,r:g===0?.012:.007,fill:g===0&&y?e:"white",stroke:e,strokeWidth:.002},g)),f&&E.jsx("circle",{cx:f[0],cy:f[1],r:.005,fill:y?e:"white",stroke:e,strokeWidth:.002,opacity:.8})]})})}function Tt({onComplete:t,minSize:r=.01}){const[n,e]=u.useState(null),[l,s]=u.useState(null),i=u.useRef(null),o=u.useCallback((d,m)=>{const p=i.current;if(!p)return null;const h=p.getBoundingClientRect(),g=(d-h.left)/h.width,x=(m-h.top)/h.height;return{x:Math.max(0,Math.min(1,g)),y:Math.max(0,Math.min(1,x))}},[]),c=u.useCallback((d,m)=>{const p=Math.min(d.x,m.x),h=Math.min(d.y,m.y),g=Math.abs(m.x-d.x),x=Math.abs(m.y-d.y);return{x:p,y:h,w:g,h:x}},[]),f=u.useCallback(()=>{e(null),s(null)},[]);u.useEffect(()=>{function d(m){m.key==="Escape"&&f()}return document.addEventListener("keydown",d),()=>document.removeEventListener("keydown",d)},[f]);const y=u.useCallback(d=>{d.currentTarget.setPointerCapture(d.pointerId);const m=o(d.clientX,d.clientY);m&&(e(m),s({x:m.x,y:m.y,w:0,h:0}))},[o]),v=u.useCallback(d=>{if(!n)return;const m=o(d.clientX,d.clientY);m&&s(c(n,m))},[n,o,c]),w=u.useCallback(d=>{if(!n)return;const m=o(d.clientX,d.clientY);if(m){const p=c(n,m);p.w>=r&&p.h>=r&&t(p)}e(null),s(null)},[n,o,c,r,t]),b=u.useCallback(()=>{},[]);return{rect:l,isDragging:n!==null,reset:f,containerRef:i,containerProps:{onPointerDown:y,onPointerMove:v,onPointerUp:w,onPointerLeave:b}}}function _t({onComplete:t,minSize:r,strokeColor:n="#3b82f6",enabled:e=!0,style:l,className:s=""}){if(!u.useContext(N))throw new Error("<CutoutViewer.DrawRectangle> must be used inside <CutoutViewer>");const{rect:o,reset:c,containerRef:f,containerProps:y}=Tt({onComplete:t,minSize:r});return u.useEffect(()=>{e||c()},[e,c]),E.jsx("div",{ref:f,"data-draw-rectangle":"true",className:s,style:{position:"absolute",inset:0,cursor:e?"crosshair":"default",zIndex:30,pointerEvents:e?"auto":"none",...l},...e?y:{},children:o&&o.w>0&&o.h>0&&E.jsx("svg",{viewBox:"0 0 1 1",preserveAspectRatio:"none",style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},children:E.jsx("rect",{x:o.x,y:o.y,width:o.w,height:o.h,fill:n,fillOpacity:.15,stroke:n,strokeWidth:.003,strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"0.015 0.008"})})})}function $t({onComplete:t,minRadius:r=.01}){const[n,e]=u.useState(null),[l,s]=u.useState(null),[i,o]=u.useState({width:1,height:1}),c=u.useRef(null);u.useEffect(()=>{const p=c.current;if(!p)return;const h=()=>{const x=p.getBoundingClientRect();o({width:Math.max(1,x.width),height:Math.max(1,x.height)})};h();const g=new ResizeObserver(h);return g.observe(p),()=>g.disconnect()},[]);const f=u.useCallback((p,h)=>{const g=c.current;if(!g)return null;const x=g.getBoundingClientRect(),M=(p-x.left)/x.width,k=(h-x.top)/x.height;return{x:Math.max(0,Math.min(1,M)),y:Math.max(0,Math.min(1,k))}},[]),y=u.useCallback((p,h)=>{const g=(p.x-h.x)*i.width,x=(p.y-h.y)*i.height,M=Math.sqrt(g*g+x*x),k=Math.min(i.width,i.height);return M/k},[i.height,i.width]),v=u.useCallback(()=>{e(null),s(null)},[]);u.useEffect(()=>{function p(h){h.key==="Escape"&&v()}return document.addEventListener("keydown",p),()=>document.removeEventListener("keydown",p)},[v]);const w=u.useCallback(p=>{p.currentTarget.setPointerCapture(p.pointerId);const h=f(p.clientX,p.clientY);h&&(e(h),s({center:h,radius:0}))},[f]),b=u.useCallback(p=>{if(!n)return;const h=f(p.clientX,p.clientY);if(!h)return;const g=y(h,n);s({center:n,radius:g})},[n,f,y]),d=u.useCallback(p=>{if(!n)return;const h=f(p.clientX,p.clientY);if(h){const g=y(h,n);g>=r&&t({center:n,radius:g})}e(null),s(null)},[n,f,y,r,t]),m=u.useCallback(()=>{},[]);return{circle:l,viewportSize:i,isDragging:n!==null,reset:v,containerRef:c,containerProps:{onPointerDown:w,onPointerMove:b,onPointerUp:d,onPointerLeave:m}}}function Dt({onComplete:t,minRadius:r,strokeColor:n="#3b82f6",enabled:e=!0,style:l,className:s=""}){if(!u.useContext(N))throw new Error("<CutoutViewer.DrawCircle> must be used inside <CutoutViewer>");const{circle:o,viewportSize:c,reset:f,containerRef:y,containerProps:v}=$t({onComplete:t,minRadius:r}),w=Math.max(1,c.width),b=Math.max(1,c.height),d=Math.min(w,b);return u.useEffect(()=>{e||f()},[e,f]),E.jsx("div",{ref:y,"data-draw-circle":"true",className:s,style:{position:"absolute",inset:0,cursor:e?"crosshair":"default",zIndex:30,pointerEvents:e?"auto":"none",...l},...e?v:{},children:o&&o.radius>0&&E.jsx("svg",{viewBox:"0 0 1 1",preserveAspectRatio:"none",style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},children:E.jsx("ellipse",{cx:o.center.x,cy:o.center.y,rx:o.radius*d/w,ry:o.radius*d/b,fill:n,fillOpacity:.15,stroke:n,strokeWidth:.003,strokeLinecap:"round",strokeDasharray:"0.015 0.008"})})})}function pt(t){switch(t.type){case"image":return`image:${t.src}:${t.label??""}`;case"bbox":return`bbox:${t.bounds.x},${t.bounds.y},${t.bounds.w},${t.bounds.h}:${t.label??""}`;case"polygon":return`polygon:${t.points.flat().join(",")}:${t.label??""}`;case"circle":return`circle:${t.center.x},${t.center.y},${t.radius}:${t.label??""}`}}function se({mainImage:t,mainImageAlt:r="Main image",effect:n="elevate",enabled:e=!0,showAll:l=!1,showOverlays:s=!1,alphaThreshold:i=30,hoverLeaveDelay:o=150,children:c,className:f="",style:y,onHover:v,onActiveChange:w,onSelect:b}){const d=typeof n=="string"?F[n]??F.elevate:n;u.useEffect(()=>{Zt(d)},[d]);const[m,p]=u.useState(()=>new Map),h=u.useCallback(W=>{p(O=>{const z=O.get(W.id);if(z&&pt(z)===pt(W))return O;const a=new Map(O);return a.set(W.id,W),a})},[]),g=u.useCallback(W=>{p(O=>{if(!O.has(W))return O;const z=new Map(O);return z.delete(W),z})},[]),x=u.useMemo(()=>({registerCutout:h,unregisterCutout:g}),[h,g]),M=u.useMemo(()=>Array.from(m.values()),[m]),{activeId:k,selectedId:R,hoveredId:A,viewportSize:V,boundsMap:D,contourMap:Y,containerRef:q,containerProps:B}=bt(M,e,i,o),H=u.useRef(null),j=u.useRef(null),I=u.useRef(null);u.useEffect(()=>{A!==H.current&&(H.current=A,v?.(A))},[A,v]),u.useEffect(()=>{k!==j.current&&(j.current=k,w?.(k))},[k,w]),u.useEffect(()=>{R!==I.current&&(I.current=R,b?.(R))},[R,b]);const S=l||k!==null,P=u.useMemo(()=>({activeId:k,selectedId:R,hoveredId:A,viewportSize:V,effect:d,enabled:e,showAll:l,showOverlays:s,boundsMap:D,contourMap:Y,isAnyActive:S}),[k,R,A,V,d,e,l,s,D,Y,S]);return E.jsx(N.Provider,{value:x,children:E.jsx(It.Provider,{value:P,children:E.jsxs("div",{ref:q,className:f,style:{position:"relative",width:"100%",overflow:"hidden",cursor:S&&e?"pointer":"default",...y},...B,children:[E.jsx("img",{src:t,alt:r,draggable:!1,style:{display:"block",width:"100%",height:"auto",userSelect:"none",transition:d.transition,...S&&e?d.mainImageHovered:{}}}),E.jsx("div",{style:{pointerEvents:"none",position:"absolute",inset:0,transition:d.transition,opacity:S&&e?1:0,...d.vignetteStyle}}),c]})})})}const L=se;L.Cutout=te;L.BBoxCutout=ee;L.PolygonCutout=re;L.CircleCutout=ne;L.Overlay=At;L.DrawPolygon=jt;L.DrawRectangle=_t;L.DrawCircle=Dt;exports.CircleHitTestStrategy=wt;exports.CutoutOverlay=At;exports.CutoutViewer=L;exports.DrawCircle=Dt;exports.DrawPolygon=jt;exports.DrawRectangle=_t;exports.ImageHitTestStrategy=yt;exports.PolygonHitTestStrategy=vt;exports.RectHitTestStrategy=mt;exports.createHitTestStrategy=xt;exports.defineKeyframes=ot;exports.elevateEffect=kt;exports.glowEffect=Ct;exports.hoverEffects=F;exports.liftEffect=Et;exports.shimmerEffect=Rt;exports.subtleEffect=Mt;exports.traceEffect=St;exports.useCutout=Qt;exports.useCutoutHitTest=bt;exports.useDrawCircle=$t;exports.useDrawPolygon=Pt;exports.useDrawRectangle=Tt;