react-img-cutout 1.3.0 → 1.4.0

package/README.md

@@ -1,4 +1,5 @@
 # react-img-cutout
+[![npm version](https://img.shields.io/npm/v/react-img-cutout.svg)](https://www.npmjs.com/package/react-img-cutout)
 
 `react-img-cutout` provides a simple, composable component for creating interactive image regions. 
 It enables pixel-perfect interaction using transparent PNG cutouts, while also supporting standard bounding boxes and polygons for geometric shapes. 

package/dist/components/cutout-viewer/cutout-viewer.d.ts

@@ -19,6 +19,8 @@ export interface CutoutViewerProps {
     enabled?: boolean;
     /** When true, all cutouts show their active/hovered state simultaneously */
     showAll?: boolean;
+    /** When true, forces all overlays to be visible regardless of hover or selected state (default: false) */
+    showOverlays?: boolean;
     /** Minimum alpha value 0-255 for pixel hit-testing (default: 30) */
     alphaThreshold?: number;
     /** Delay in ms before the hover state clears after leaving a cutout (default: 150) */

package/dist/components/cutout-viewer/cutouts/cutout-overlay.d.ts

@@ -12,6 +12,8 @@ export interface CutoutOverlayProps {
     className?: string;
     /** Additional inline styles (merged after placement styles) */
     style?: CSSProperties;
+    /** When true, forces the overlay to be visible regardless of hover or selected state. This overrides the CutoutViewer's `showOverlays` setting if set. */
+    showOverlay?: boolean;
 }
 /**
  * Renders custom UI positioned relative to the parent `<CutoutViewer.Cutout>`'s
@@ -25,4 +27,4 @@ export interface CutoutOverlayProps {
  *   </CutoutViewer.Overlay>
  * </CutoutViewer.Cutout>
  */
-export declare function CutoutOverlay({ placement, children, className, style, }: CutoutOverlayProps): import("react/jsx-runtime").JSX.Element;
+export declare function CutoutOverlay({ placement, children, className, style, showOverlay, }: CutoutOverlayProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/cutout-viewer/viewer-context.d.ts

@@ -16,6 +16,7 @@ export interface CutoutViewerContextValue {
     effect: HoverEffect;
     enabled: boolean;
     showAll: boolean;
+    showOverlays: boolean;
     boundsMap: Record<string, CutoutBounds>;
     contourMap: Record<string, [number, number][]>;
     isAnyActive: boolean;

package/dist/index.cjs

@@ -1,9 +1,9 @@
-"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,c,i){var s=null;if(i!==void 0&&(s=""+i),c.key!==void 0&&(s=""+c.key),"key"in c){i={};for(var o in c)o!=="key"&&(i[o]=c[o])}else i=c;return c=i.ref,{$$typeof:t,type:e,key:s,ref:c!==void 0?c:null,props:i}}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 g:return"Fragment";case d:return"Profiler";case h:return"StrictMode";case I:return"Suspense";case T:return"SuspenseList";case V: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 C:return a.displayName||"Context";case x:return(a._context.displayName||"Context")+".Consumer";case k:var E=a.render;return a=a.displayName,a||(a=E.displayName||E.name||"",a=a!==""?"ForwardRef("+a+")":"ForwardRef"),a;case N:return E=a.displayName||null,E!==null?E:t(a.type)||"Memo";case D:E=a._payload,a=a._init;try{return t(a(E))}catch{}}return null}function r(a){return""+a}function n(a){try{r(a);var E=!1}catch{E=!0}if(E){E=console;var j=E.error,_=typeof Symbol=="function"&&Symbol.toStringTag&&a[Symbol.toStringTag]||a.constructor.name||"Object";return j.call(E,"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===g)return"<>";if(typeof a=="object"&&a!==null&&a.$$typeof===D)return"<...>";try{var E=t(a);return E?"<"+E+">":"<...>"}catch{return"<...>"}}function c(){var a=L.A;return a===null?null:a.getOwner()}function i(){return Error("react-stack-top-frame")}function s(a){if(B.call(a,"key")){var E=Object.getOwnPropertyDescriptor(a,"key").get;if(E&&E.isReactWarning)return!1}return a.key!==void 0}function o(a,E){function j(){A||(A=!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)",E))}j.isReactWarning=!0,Object.defineProperty(a,"key",{get:j,configurable:!0})}function l(){var a=t(this.type);return S[a]||(S[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,E,j,_,Q,et){var $=j.ref;return a={$$typeof:p,type:a,key:E,props:j,_owner:_},($!==void 0?$:null)!==null?Object.defineProperty(a,"ref",{enumerable:!1,get:l}):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,E,j,_,Q,et){var $=E.children;if($!==void 0)if(_)if(P($)){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(B.call(E,"key")){$=t(a);var X=Object.keys(E).filter(function(Wt){return Wt!=="key"});_=0<X.length?"{key: someKey, "+X.join(": ..., ")+": ...}":"{key: someKey}",H[$+_]||(X=0<X.length?"{"+X.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} />`,_,$,X,$),H[$+_]=!0)}if($=null,j!==void 0&&(n(j),$=""+j),s(E)&&(n(E.key),$=""+E.key),"key"in E){j={};for(var rt in E)rt!=="key"&&(j[rt]=E[rt])}else j=E;return $&&o(j,typeof a=="function"?a.displayName||a.name||"Unknown":a),f(a,$,j,c(),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===p}var b=u,p=Symbol.for("react.transitional.element"),m=Symbol.for("react.portal"),g=Symbol.for("react.fragment"),h=Symbol.for("react.strict_mode"),d=Symbol.for("react.profiler"),x=Symbol.for("react.consumer"),C=Symbol.for("react.context"),k=Symbol.for("react.forward_ref"),I=Symbol.for("react.suspense"),T=Symbol.for("react.suspense_list"),N=Symbol.for("react.memo"),D=Symbol.for("react.lazy"),V=Symbol.for("react.activity"),q=Symbol.for("react.client.reference"),L=b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,B=Object.prototype.hasOwnProperty,P=Array.isArray,R=console.createTask?console.createTask:function(){return null};b={react_stack_bottom_frame:function(a){return a()}};var A,S={},W=b.react_stack_bottom_frame.bind(b,i)(),O=R(e(i)),H={};K.Fragment=g,K.jsx=function(a,E,j){var _=1e4>L.recentlyCreatedOwnerStacks++;return y(a,E,j,!1,_?Error("react-stack-top-frame"):W,_?R(e(a)):O)},K.jsxs=function(a,E,j){var _=1e4>L.recentlyCreatedOwnerStacks++;return y(a,E,j,!0,_?Error("react-stack-top-frame"):W,_?R(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 M=Lt();const Yt=400;function Nt(t,r,n){const e=n[0]-r[0],c=n[1]-r[1],i=e*e+c*c;if(i===0){const o=t[0]-r[0],l=t[1]-r[1];return Math.sqrt(o*o+l*l)}return Math.abs(e*(r[1]-t[1])-c*(r[0]-t[0]))/Math.sqrt(i)}function nt(t,r){if(t.length<=2)return t;let n=0,e=0;const c=t[0],i=t[t.length-1];for(let s=1;s<t.length-1;s++){const o=Nt(t[s],c,i);o>n&&(n=o,e=s)}if(n>r){const s=nt(t.slice(0,e+1),r),o=nt(t.slice(e),r);return s.slice(0,-1).concat(o)}return[c,i]}function ct(t){let r=0;const n=t.length;for(let e=0;e<n;e++){const[c,i]=t[e],[s,o]=t[(e+1)%n];r+=c*o-s*i}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 c=[];for(let i=0;i<n-1;i++)for(let s=0;s<r-1;s++){const o=t[i*r+s],l=t[i*r+s+1],f=t[(i+1)*r+s+1],y=t[(i+1)*r+s];let v=0;if(o>=e&&(v|=1),l>=e&&(v|=2),f>=e&&(v|=4),y>=e&&(v|=8),v===0||v===15)continue;const w=b=>{switch(b){case 0:{const p=l-o,m=Math.abs(p)<1e-10?.5:Math.max(0,Math.min(1,(e-o)/p));return[s+m,i]}case 1:{const p=f-l,m=Math.abs(p)<1e-10?.5:Math.max(0,Math.min(1,(e-l)/p));return[s+1,i+m]}case 2:{const p=f-y,m=Math.abs(p)<1e-10?.5:Math.max(0,Math.min(1,(e-y)/p));return[s+m,i+1]}case 3:{const p=y-o,m=Math.abs(p)<1e-10?.5:Math.max(0,Math.min(1,(e-o)/p));return[s,i+m]}default:return[s+.5,i+.5]}};for(const[b,p]of Bt[v])c.push([w(b),w(p)])}return c}function Ft(t){if(t.length===0)return[];const r=i=>`${Math.round(i[0]*1e4)},${Math.round(i[1]*1e4)}`,n=new Map;for(let i=0;i<t.length;i++)for(const s of[0,1]){const o=r(t[i][s]);let l=n.get(o);l||(l=[],n.set(o,l)),l.push({idx:i,end:s})}const e=new Uint8Array(t.length),c=[];for(let i=0;i<t.length;i++){if(e[i])continue;const s=[];let o=i,l=1,f=0;const y=t.length+1;for(;f++<y&&!e[o];){e[o]=1;const v=l===1?0:1;s.push(t[o][v]);const w=t[o][l],b=r(w),p=n.get(b);if(!p)break;const m=p.find(g=>!e[g.idx]);if(!m)break;o=m.idx,l=m.end===0?1:0}s.length>=3&&c.push(s)}return c}function Xt(t,r,n,e=30,c=.002){if(r<=0||n<=0||t.length===0)return[];const i=Math.min(1,Yt/Math.max(r,n)),s=Math.max(1,Math.round(r*i)),o=Math.max(1,Math.round(n*i)),l=s+2,f=o+2,y=new Float32Array(l*f);for(let h=0;h<o;h++){const d=Math.min(n-1,Math.floor(h/i));for(let x=0;x<s;x++){const C=Math.min(r-1,Math.floor(x/i));y[(h+1)*l+(x+1)]=t[d*r+C]}}const v=Ht(y,l,f,e),w=Ft(v);if(w.length===0)return[];let b=w[0],p=Math.abs(ct(b));for(let h=1;h<w.length;h++){const d=Math.abs(ct(w[h]));d>p&&(b=w[h],p=d)}const m=b.map(([h,d])=>[(h-1)/s,(d-1)/o]),g=Vt(m,c);return g.length>=3?g: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 c=t[(e-1+r)%r],i=t[e],s=t[(e+1)%r],o=t[(e+2)%r],l=i[0]+(s[0]-c[0])/6,f=i[1]+(s[1]-c[1])/6,y=s[0]-(o[0]-i[0])/6,v=s[1]-(o[1]-i[1])/6;n.push(`C${l},${f} ${y},${v} ${s[0]},${s[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 c=r,i=n,s=0,o=0,l=!1;for(let f=0;f<n;f++)for(let y=0;y<r;y++)t[f*r+y]>e&&(y<c&&(c=y),y>s&&(s=y),f<i&&(i=f),f>o&&(o=f),l=!0);return l?{x:c/r,y:i/n,w:(s-c+1)/r,h:(o-i+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(s=>{r.onload=()=>s(),r.onerror=()=>s()});const n=r.naturalWidth,e=r.naturalHeight;if(n<=0||e<=0)return;const c=document.createElement("canvas");c.width=n,c.height=e;const i=c.getContext("2d",{willReadFrequently:!0});if(i)try{i.drawImage(r,0,0);const s=i.getImageData(0,0,n,e);this.alpha=qt(s.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 c=Math.min(this.width-1,Math.max(0,Math.floor(r*this.width))),i=Math.min(this.height-1,Math.max(0,Math.floor(n*this.height)));return this.alpha[i*this.width+c]>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 c=0,i=n.length-1;c<n.length;i=c++){const s=n[c][0],o=n[c][1],l=n[i][0],f=n[i][1];o>r!=f>r&&t<(l-s)*(r-o)/(f-o)+s&&(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,c=-1/0,i=-1/0;for(const[s,o]of r.points)s<n&&(n=s),s>c&&(c=s),o<e&&(e=o),o>i&&(i=o);this.bounds={x:n,y:e,w:c-n,h:i-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 c=Math.max(1,n),i=Math.max(1,e),s=Math.min(c,i);this.rx=r.radius*s/c,this.ry=r.radius*s/i,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,c=(n-this.cy)/this.ry;return e*e+c*c<=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[c,i]=u.useState(null),[s,o]=u.useState(null),l=u.useRef(null),f=u.useRef([]),[y,v]=u.useState({}),[w,b]=u.useState({width:1,height:1}),[p,m]=u.useState({}),g=Math.min(255,Math.max(0,n)),h=u.useRef(null),d=u.useCallback(()=>{h.current===null&&(h.current=setTimeout(()=>{h.current=null,i(null)},e))},[e]),x=u.useCallback(()=>{h.current!==null&&(clearTimeout(h.current),h.current=null)},[]),C=t.map(Jt).join("|"),k=u.useMemo(()=>t,[C]);u.useEffect(()=>{const P=l.current;if(!P)return;const R=()=>{const S=P.getBoundingClientRect();b({width:Math.max(1,S.width),height:Math.max(1,S.height)})};R();const A=new ResizeObserver(R);return A.observe(P),()=>A.disconnect()},[]),u.useEffect(()=>{if(!r){f.current=[];return}let P=!1,R=[];async function A(){const S=[],W={},O={};for(const H of k){const a=xt(H,g,{viewportWidth:w.width,viewportHeight:w.height});if(a.prepare&&await a.prepare(),P)return;S.push(a),W[a.id]=a.bounds,a.contour&&a.contour.length>=3&&(O[a.id]=a.contour)}P||(R=S,f.current=S,v(W),m(O))}return A(),()=>{P=!0;for(const S of R)S.dispose?.()}},[k,r,g,w.width,w.height]);const I=u.useCallback((P,R)=>{const A=f.current;for(let S=A.length-1;S>=0;S--)if(A[S].hitTest(P,R))return A[S].id;return null},[]),T=u.useCallback(P=>{const R=l.current;if(!R)return null;const A=R.getBoundingClientRect(),S=(P.clientX-A.left)/A.width,W=(P.clientY-A.top)/A.height;return S<0||S>1||W<0||W>1?null:{nx:S,ny:W}},[]),N=u.useCallback(P=>{if(!r)return;const R=T(P);if(!R){d();return}const A=I(R.nx,R.ny);if(A===null){if(P.target?.closest('[data-cutout-overlay="true"]')){x();return}d();return}x(),i(A)},[r,T,I,d,x]),D=u.useCallback(()=>{d()},[d]),V=u.useCallback(P=>{if(!r)return;const R=T(P);if(!R){o(null);return}const A=I(R.nx,R.ny);o(A===s||A===null?null:A)},[r,T,I,s]),q=s??c,L=r?y:{},B=r?p:{};return u.useEffect(()=>()=>{x()},[x]),{hoveredId:c,selectedId:s,activeId:q,viewportSize:w,boundsMap:L,contourMap:B,containerRef:l,containerProps:{onPointerMove:N,onPointerLeave:D,onClick:V}}}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} {
+  <%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% {
@@ -20,4 +20,4 @@ ${r.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));
-  }`),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},Y=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:c,renderLayer:i}){const s=u.useContext(Y),o=Z();if(!s)throw new Error("<CutoutViewer.Cutout> must be used inside <CutoutViewer>");u.useEffect(()=>(s.registerCutout({type:"image",id:t,src:r,label:n}),()=>s.unregisterCutout(t)),[t,r,n,s]);const l=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,C=o.viewportSize.height||1,k=f.map(([I,T])=>[I*x,T*C]);return Ut(k)},[f,o.viewportSize.width,o.viewportSize.height]),v=o.activeId===t,w=o.hoveredId===t,b=o.selectedId===t,p={x:0,y:0,w:1,h:1},m=o.boundsMap[t]??p;let g,h;!o.enabled||!o.isAnyActive&&!o.showAll?(g=l.cutoutIdle,h=l.geometryIdle):o.showAll||v?(g=l.cutoutActive,h=l.geometryActive):(g=l.cutoutInactive,h=l.geometryInactive);const d=u.useMemo(()=>({id:t,label:n,bounds:m,isActive:v,isHovered:w,isSelected:b,effect:l}),[t,n,m,v,w,b,l]);return M.jsxs(U.Provider,{value:d,children:[M.jsxs("div",{"data-cutout-id":t,style:{pointerEvents:"none",position:"absolute",inset:0,zIndex:v?20:10,transition:l.transition,...g},children:[i?i({isActive:v,isHovered:w,isSelected:b,bounds:m,effect:l}):M.jsx("img",{src:r,alt:n||t,draggable:!1,style:{width:"100%",height:"100%",objectFit:"fill",userSelect:"none"}}),y&&h&&M.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:M.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:l.transition,animation:h.animation}})})]}),c]})}function ht(t){const{filter:r,...n}=t;return n}function ee({id:t,bounds:r,label:n,effect:e,children:c,renderLayer:i}){const s=u.useContext(Y),o=Z();if(!s)throw new Error("<CutoutViewer.BBoxCutout> must be used inside <CutoutViewer>");const{x:l,y:f,w:y,h:v}=r;u.useEffect(()=>(s.registerCutout({type:"bbox",id:t,bounds:{x:l,y:f,w:y,h:v},label:n}),()=>s.unregisterCutout(t)),[t,l,f,y,v,n,s]);const w=e?typeof e=="string"?F[e]??o.effect:e:o.effect,b=o.activeId===t,p=o.hoveredId===t,m=o.selectedId===t,g={x:0,y:0,w:1,h:1},h=o.boundsMap[t]??g;let d,x;!o.enabled||!o.isAnyActive&&!o.showAll?(x={...w.cutoutIdle,filter:"none",opacity:0},d=w.geometryIdle):o.showAll||b?(x=ht(w.cutoutActive),d=w.geometryActive):(x=ht(w.cutoutInactive),d=w.geometryInactive);const k=d??{fill:"rgba(37, 99, 235, 0.15)",stroke:"rgba(37, 99, 235, 0.6)",strokeWidth:2},I=u.useMemo(()=>({id:t,label:n,bounds:h,isActive:b,isHovered:p,isSelected:m,effect:w}),[t,n,h,b,p,m,w]);return M.jsxs(U.Provider,{value:I,children:[M.jsx("div",{"data-cutout-id":t,style:{pointerEvents:"none",position:"absolute",inset:0,zIndex:b?20:10,transition:w.transition,...x},children:i?i({isActive:b,isHovered:p,isSelected:m,bounds:h,effect:w}):M.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:M.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}})})}),c]})}function dt(t){const{filter:r,...n}=t;return n}function re({id:t,points:r,label:n,effect:e,children:c,renderLayer:i}){const s=u.useContext(Y),o=Z();if(!s)throw new Error("<CutoutViewer.PolygonCutout> must be used inside <CutoutViewer>");const l=r.flat().join(",");u.useEffect(()=>(s.registerCutout({type:"polygon",id:t,points:r,label:n}),()=>s.unregisterCutout(t)),[t,l,n,s]);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},p=o.boundsMap[t]??b;let m,g;!o.enabled||!o.isAnyActive&&!o.showAll?(g={...f.cutoutIdle,filter:"none",opacity:0},m=f.geometryIdle):o.showAll||y?(g=dt(f.cutoutActive),m=f.geometryActive):(g=dt(f.cutoutInactive),m=f.geometryInactive);const d=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:p,isActive:y,isHovered:v,isSelected:w,effect:f}),[t,n,p,y,v,w,f]);return M.jsxs(U.Provider,{value:x,children:[M.jsx("div",{"data-cutout-id":t,style:{pointerEvents:"none",position:"absolute",inset:0,zIndex:y?20:10,transition:f.transition,...g},children:i?i({isActive:y,isHovered:v,isSelected:w,bounds:p,effect:f}):M.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:M.jsx("polygon",{points:r.map(([C,k])=>`${C},${k}`).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}})})}),c]})}function gt(t){const{filter:r,...n}=t;return n}function ne({id:t,center:r,radius:n,label:e,effect:c,children:i,renderLayer:s}){const o=u.useContext(Y),l=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=c?typeof c=="string"?F[c]??l.effect:c:l.effect,w=l.activeId===t,b=l.hoveredId===t,p=l.selectedId===t,m={x:0,y:0,w:1,h:1},g=l.boundsMap[t]??m,h=Math.max(1,l.viewportSize.width),d=Math.max(1,l.viewportSize.height),x=Math.min(h,d),C=n*x/h,k=n*x/d;let I,T;!l.enabled||!l.isAnyActive&&!l.showAll?(T={...v.cutoutIdle,filter:"none",opacity:0},I=v.geometryIdle):l.showAll||w?(T=gt(v.cutoutActive),I=v.geometryActive):(T=gt(v.cutoutInactive),I=v.geometryInactive);const D=I??{fill:"rgba(37, 99, 235, 0.15)",stroke:"rgba(37, 99, 235, 0.6)",strokeWidth:2},V=u.useMemo(()=>({id:t,label:e,bounds:g,isActive:w,isHovered:b,isSelected:p,effect:v}),[t,e,g,w,b,p,v]);return M.jsxs(U.Provider,{value:V,children:[M.jsx("div",{"data-cutout-id":t,style:{pointerEvents:"none",position:"absolute",inset:0,zIndex:w?20:10,transition:v.transition,...T},children:s?s({isActive:w,isHovered:b,isSelected:p,bounds:g,effect:v}):M.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:M.jsx("ellipse",{cx:r.x,cy:r.y,rx:C,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}})})}),i]})}function oe(t,r){const{x:n,y:e,w:c,h:i}=r;let s,o;t.includes("left")?(s=`${n*100}%`,o="0"):t.includes("right")?(s=`${(n+c)*100}%`,o="-100%"):(s=`${(n+c/2)*100}%`,o="-50%");let l,f;return t.startsWith("top")?(l=`${e*100}%`,f="-100%"):t.startsWith("bottom")?(l=`${(e+i)*100}%`,f="0"):(l=`${(e+i/2)*100}%`,f="-50%"),{position:"absolute",left:s,top:l,transform:`translate(${o}, ${f})`}}function At({placement:t="top-center",children:r,className:n="",style:e}){const c=u.useContext(U),i=Z();if(!c)throw new Error("<CutoutViewer.Overlay> must be used inside <CutoutViewer.Cutout>");const s=i.enabled&&(i.showAll||c.isActive),o=oe(t,c.bounds);return M.jsx("div",{"data-cutout-overlay":"true",className:n,style:{zIndex:30,transition:c.effect.transition,opacity:s?1:0,pointerEvents:s?"auto":"none",...o,...e},children:r})}function Pt({onComplete:t,minPoints:r=3,closeThreshold:n=.03}){const[e,c]=u.useState([]),[i,s]=u.useState(null),o=u.useRef(null),l=u.useCallback((d,x)=>{const C=o.current;if(!C)return null;const k=C.getBoundingClientRect(),I=(d-k.left)/k.width,T=(x-k.top)/k.height;return I<0||I>1||T<0||T>1?null:[I,T]},[]),f=u.useCallback((d,x)=>{if(x.length<r)return!1;const C=d[0]-x[0][0],k=d[1]-x[0][1];return Math.sqrt(C*C+k*k)<n},[r,n]),y=u.useCallback(d=>{d.length<r||(t(d),c([]),s(null))},[t,r]),v=u.useCallback(()=>{c([]),s(null)},[]),w=u.useCallback(d=>{s(l(d.clientX,d.clientY))},[l]),b=u.useCallback(()=>{s(null)},[]),p=u.useCallback(d=>{d.stopPropagation();const x=l(d.clientX,d.clientY);x&&c(C=>f(x,C)?(y(C),[]):[...C,x])},[l,f,y]),m=u.useCallback(d=>{d.stopPropagation(),c(x=>{const C=x.slice(0,-1);return C.length>=r?(y(C),[]):C})},[r,y]),g=u.useCallback(d=>{d.preventDefault(),c(x=>x.slice(0,-1))},[]),h=i!==null&&f(i,e);return{points:e,previewPoint:i,willClose:h,reset:v,containerRef:o,containerProps:{onPointerMove:w,onPointerLeave:b,onClick:p,onDoubleClick:m,onContextMenu:g}}}function jt({onComplete:t,minPoints:r=3,closeThreshold:n=.03,strokeColor:e="#3b82f6",enabled:c=!0,style:i,className:s=""}){if(!u.useContext(Y))throw new Error("<CutoutViewer.DrawPolygon> must be used inside <CutoutViewer>");const{points:l,previewPoint:f,willClose:y,reset:v,containerRef:w,containerProps:b}=Pt({onComplete:t,minPoints:r,closeThreshold:n});u.useEffect(()=>{function g(h){h.key==="Escape"&&v()}return document.addEventListener("keydown",g),()=>document.removeEventListener("keydown",g)},[v]),u.useEffect(()=>{c||v()},[c,v]);const p=f?[...l,f]:l,m=p.map(([g,h])=>`${g},${h}`).join(" ");return M.jsx("div",{ref:w,"data-draw-polygon":"true",className:s,style:{position:"absolute",inset:0,cursor:c?y?"cell":"crosshair":"default",zIndex:30,pointerEvents:c?"auto":"none",...i},...c?b:{},children:l.length>0&&M.jsxs("svg",{viewBox:"0 0 1 1",preserveAspectRatio:"none",style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},children:[l.length>=3&&M.jsx("polygon",{points:l.map(([g,h])=>`${g},${h}`).join(" "),fill:e,fillOpacity:.15,stroke:"none"}),p.length>=2&&M.jsx("polyline",{points:m,fill:"none",stroke:e,strokeWidth:.003,strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:f?"0.015 0.008":void 0}),f&&l.length>=1&&M.jsx("line",{x1:f[0],y1:f[1],x2:l[0][0],y2:l[0][1],stroke:e,strokeWidth:.002,strokeDasharray:"0.015 0.008",strokeLinecap:"round",opacity:y?.9:.35}),l.map(([g,h],d)=>M.jsx("circle",{cx:g,cy:h,r:d===0?.012:.007,fill:d===0&&y?e:"white",stroke:e,strokeWidth:.002},d)),f&&M.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),[c,i]=u.useState(null),s=u.useRef(null),o=u.useCallback((p,m)=>{const g=s.current;if(!g)return null;const h=g.getBoundingClientRect(),d=(p-h.left)/h.width,x=(m-h.top)/h.height;return{x:Math.max(0,Math.min(1,d)),y:Math.max(0,Math.min(1,x))}},[]),l=u.useCallback((p,m)=>{const g=Math.min(p.x,m.x),h=Math.min(p.y,m.y),d=Math.abs(m.x-p.x),x=Math.abs(m.y-p.y);return{x:g,y:h,w:d,h:x}},[]),f=u.useCallback(()=>{e(null),i(null)},[]);u.useEffect(()=>{function p(m){m.key==="Escape"&&f()}return document.addEventListener("keydown",p),()=>document.removeEventListener("keydown",p)},[f]);const y=u.useCallback(p=>{p.currentTarget.setPointerCapture(p.pointerId);const m=o(p.clientX,p.clientY);m&&(e(m),i({x:m.x,y:m.y,w:0,h:0}))},[o]),v=u.useCallback(p=>{if(!n)return;const m=o(p.clientX,p.clientY);m&&i(l(n,m))},[n,o,l]),w=u.useCallback(p=>{if(!n)return;const m=o(p.clientX,p.clientY);if(m){const g=l(n,m);g.w>=r&&g.h>=r&&t(g)}e(null),i(null)},[n,o,l,r,t]),b=u.useCallback(()=>{},[]);return{rect:c,isDragging:n!==null,reset:f,containerRef:s,containerProps:{onPointerDown:y,onPointerMove:v,onPointerUp:w,onPointerLeave:b}}}function _t({onComplete:t,minSize:r,strokeColor:n="#3b82f6",enabled:e=!0,style:c,className:i=""}){if(!u.useContext(Y))throw new Error("<CutoutViewer.DrawRectangle> must be used inside <CutoutViewer>");const{rect:o,reset:l,containerRef:f,containerProps:y}=Tt({onComplete:t,minSize:r});return u.useEffect(()=>{e||l()},[e,l]),M.jsx("div",{ref:f,"data-draw-rectangle":"true",className:i,style:{position:"absolute",inset:0,cursor:e?"crosshair":"default",zIndex:30,pointerEvents:e?"auto":"none",...c},...e?y:{},children:o&&o.w>0&&o.h>0&&M.jsx("svg",{viewBox:"0 0 1 1",preserveAspectRatio:"none",style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},children:M.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),[c,i]=u.useState(null),[s,o]=u.useState({width:1,height:1}),l=u.useRef(null);u.useEffect(()=>{const g=l.current;if(!g)return;const h=()=>{const x=g.getBoundingClientRect();o({width:Math.max(1,x.width),height:Math.max(1,x.height)})};h();const d=new ResizeObserver(h);return d.observe(g),()=>d.disconnect()},[]);const f=u.useCallback((g,h)=>{const d=l.current;if(!d)return null;const x=d.getBoundingClientRect(),C=(g-x.left)/x.width,k=(h-x.top)/x.height;return{x:Math.max(0,Math.min(1,C)),y:Math.max(0,Math.min(1,k))}},[]),y=u.useCallback((g,h)=>{const d=(g.x-h.x)*s.width,x=(g.y-h.y)*s.height,C=Math.sqrt(d*d+x*x),k=Math.min(s.width,s.height);return C/k},[s.height,s.width]),v=u.useCallback(()=>{e(null),i(null)},[]);u.useEffect(()=>{function g(h){h.key==="Escape"&&v()}return document.addEventListener("keydown",g),()=>document.removeEventListener("keydown",g)},[v]);const w=u.useCallback(g=>{g.currentTarget.setPointerCapture(g.pointerId);const h=f(g.clientX,g.clientY);h&&(e(h),i({center:h,radius:0}))},[f]),b=u.useCallback(g=>{if(!n)return;const h=f(g.clientX,g.clientY);if(!h)return;const d=y(h,n);i({center:n,radius:d})},[n,f,y]),p=u.useCallback(g=>{if(!n)return;const h=f(g.clientX,g.clientY);if(h){const d=y(h,n);d>=r&&t({center:n,radius:d})}e(null),i(null)},[n,f,y,r,t]),m=u.useCallback(()=>{},[]);return{circle:c,viewportSize:s,isDragging:n!==null,reset:v,containerRef:l,containerProps:{onPointerDown:w,onPointerMove:b,onPointerUp:p,onPointerLeave:m}}}function Dt({onComplete:t,minRadius:r,strokeColor:n="#3b82f6",enabled:e=!0,style:c,className:i=""}){if(!u.useContext(Y))throw new Error("<CutoutViewer.DrawCircle> must be used inside <CutoutViewer>");const{circle:o,viewportSize:l,reset:f,containerRef:y,containerProps:v}=$t({onComplete:t,minRadius:r}),w=Math.max(1,l.width),b=Math.max(1,l.height),p=Math.min(w,b);return u.useEffect(()=>{e||f()},[e,f]),M.jsx("div",{ref:y,"data-draw-circle":"true",className:i,style:{position:"absolute",inset:0,cursor:e?"crosshair":"default",zIndex:30,pointerEvents:e?"auto":"none",...c},...e?v:{},children:o&&o.radius>0&&M.jsx("svg",{viewBox:"0 0 1 1",preserveAspectRatio:"none",style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},children:M.jsx("ellipse",{cx:o.center.x,cy:o.center.y,rx:o.radius*p/w,ry:o.radius*p/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:c=!1,alphaThreshold:i=30,hoverLeaveDelay:s=150,children:o,className:l="",style:f,onHover:y,onActiveChange:v,onSelect:w}){const b=typeof n=="string"?F[n]??F.elevate:n;u.useEffect(()=>{Zt(b)},[b]);const[p,m]=u.useState(()=>new Map),g=u.useCallback(S=>{m(W=>{const O=W.get(S.id);if(O&&pt(O)===pt(S))return W;const H=new Map(W);return H.set(S.id,S),H})},[]),h=u.useCallback(S=>{m(W=>{if(!W.has(S))return W;const O=new Map(W);return O.delete(S),O})},[]),d=u.useMemo(()=>({registerCutout:g,unregisterCutout:h}),[g,h]),x=u.useMemo(()=>Array.from(p.values()),[p]),{activeId:C,selectedId:k,hoveredId:I,viewportSize:T,boundsMap:N,contourMap:D,containerRef:V,containerProps:q}=bt(x,e,i,s),L=u.useRef(null),B=u.useRef(null),P=u.useRef(null);u.useEffect(()=>{I!==L.current&&(L.current=I,y?.(I))},[I,y]),u.useEffect(()=>{C!==B.current&&(B.current=C,v?.(C))},[C,v]),u.useEffect(()=>{k!==P.current&&(P.current=k,w?.(k))},[k,w]);const R=c||C!==null,A=u.useMemo(()=>({activeId:C,selectedId:k,hoveredId:I,viewportSize:T,effect:b,enabled:e,showAll:c,boundsMap:N,contourMap:D,isAnyActive:R}),[C,k,I,T,b,e,c,N,D,R]);return M.jsx(Y.Provider,{value:d,children:M.jsx(It.Provider,{value:A,children:M.jsxs("div",{ref:V,className:l,style:{position:"relative",width:"100%",overflow:"hidden",cursor:R&&e?"pointer":"default",...f},...q,children:[M.jsx("img",{src:t,alt:r,draggable:!1,style:{display:"block",width:"100%",height:"auto",userSelect:"none",transition:b.transition,...R&&e?b.mainImageHovered:{}}}),M.jsx("div",{style:{pointerEvents:"none",position:"absolute",inset:0,transition:b.transition,opacity:R&&e?1:0,...b.vignetteStyle}}),o]})})})}const z=se;z.Cutout=te;z.BBoxCutout=ee;z.PolygonCutout=re;z.CircleCutout=ne;z.Overlay=At;z.DrawPolygon=jt;z.DrawRectangle=_t;z.DrawCircle=Dt;exports.CircleHitTestStrategy=wt;exports.CutoutOverlay=At;exports.CutoutViewer=z;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;
+  }`),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;