react-img-cutout 1.0.1 → 1.2.0

package/README.md

@@ -3,9 +3,7 @@
 `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. 
 
-
-
-https://github.com/user-attachments/assets/4e4413b6-362a-4023-91f1-44452ea0c605
+![Demo](https://github.com/user-attachments/assets/5c59024a-9027-4da0-a47f-6bf6d5576530)
 
 
 
@@ -156,6 +154,68 @@ as segmentation masks or hand-drawn annotations.
 | `renderLayer` | `(props: RenderLayerProps) => ReactNode?` | Custom renderer replacing the default SVG polygon |
 | `children` | `ReactNode?` | Overlay content |
 
+### Draw Polygon (`CutoutViewer.DrawPolygon`)
+
+Adds an interactive drawing layer over the viewer so users can define their own polygon regions directly on the image. Completed polygons are returned via `onComplete` as normalized `[x, y][]` coordinates, ready for direct use with `PolygonCutout`.
+
+```tsx
+const [regions, setRegions] = useState<[number, number][][]>([])
+const [drawing, setDrawing] = useState(true)
+
+<CutoutViewer mainImage="/photo.png">
+  <CutoutViewer.DrawPolygon
+    enabled={drawing}
+    onComplete={(points) => setRegions((prev) => [...prev, points])}
+    strokeColor="#3b82f6"
+    minPoints={3}
+    closeThreshold={0.03}
+  />
+  {regions.map((pts, i) => (
+    <CutoutViewer.PolygonCutout key={i} id={`region-${i}`} points={pts} />
+  ))}
+</CutoutViewer>
+```
+
+| Interaction | Effect |
+|---|---|
+| Click | Add a vertex |
+| Click near first vertex (≥ `minPoints`) | Snap-close → fires `onComplete` |
+| Double-click | Complete the polygon immediately |
+| Right-click | Remove the last vertex |
+| Esc | Cancel and reset the in-progress drawing |
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `onComplete` | `(points: [number, number][]) => void` | — | Called with normalized points when a polygon is finished |
+| `enabled` | `boolean` | `true` | Toggle drawing on/off without unmounting. When `false`, pointer events pass through to the viewer and any in-progress drawing is cleared |
+| `strokeColor` | `string` | `"#3b82f6"` | Accent color for the in-progress polygon overlay |
+| `minPoints` | `number` | `3` | Minimum vertices required before snap-close or double-click complete |
+| `closeThreshold` | `number` | `0.03` | Normalized (0–1) snap radius for closing near the first vertex |
+| `style` | `CSSProperties?` | — | Additional styles for the overlay container |
+| `className` | `string?` | — | Additional class name for the overlay container |
+
+#### `useDrawPolygon` (headless hook)
+
+For building completely custom drawing UIs without the built-in SVG overlay:
+
+```tsx
+import { useDrawPolygon } from "react-img-cutout"
+
+const { points, previewPoint, willClose, reset, containerRef, containerProps } =
+  useDrawPolygon({
+    onComplete: (pts) => console.log(pts),
+    minPoints: 3,
+    closeThreshold: 0.03,
+  })
+
+return (
+  <div ref={containerRef} style={{ position: "relative" }} {...containerProps}>
+    <img src="/main.png" style={{ width: "100%" }} />
+    {/* render your own SVG overlay using points / previewPoint / willClose */}
+  </div>
+)
+```
+
 ## Public API
 
 - `CutoutViewer`
@@ -164,10 +224,14 @@ as segmentation masks or hand-drawn annotations.
 - `CutoutViewer.Cutout` — image-based cutout (alpha hit-testing)
 - `CutoutViewer.BBoxCutout` — bounding-box cutout (rectangular region)
 - `CutoutViewer.PolygonCutout` — polygon cutout (arbitrary closed shape)
+- `CutoutViewer.DrawPolygon` — interactive polygon drawing overlay
+  - Props: `onComplete`, `enabled`, `strokeColor`, `minPoints`, `closeThreshold`, `style`, `className`
 - `CutoutViewer.Overlay`
   - Props: `placement`, `className`, `style`
 - `useCutout()`
   - Read nearest cutout state (`id`, `bounds`, `isActive`, `isHovered`, `isSelected`, `effect`)
+- `useDrawPolygon(options)`
+  - Headless hook; returns `points`, `previewPoint`, `willClose`, `reset`, `containerRef`, `containerProps`
 - `hoverEffects`
   - Built-in presets: `elevate`, `glow`, `lift`, `subtle`, `trace`, `shimmer`
 - `defineKeyframes(name, css)` — helper for declaring CSS `@keyframes` in custom effects

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

@@ -4,6 +4,7 @@ import { Cutout } from "./cutouts/image/cutout";
 import { BBoxCutout } from "./cutouts/bbox/bbox-cutout";
 import { PolygonCutout } from "./cutouts/polygon/polygon-cutout";
 import { CutoutOverlay } from "./cutouts/cutout-overlay";
+import { DrawPolygon } from "./drawing/draw-polygon";
 export interface CutoutViewerProps {
     /** URL of the main background image */
     mainImage: string;
@@ -40,6 +41,7 @@ type CutoutViewerComponent = ((props: CutoutViewerProps) => ReactElement) & {
     BBoxCutout: typeof BBoxCutout;
     PolygonCutout: typeof PolygonCutout;
     Overlay: typeof CutoutOverlay;
+    DrawPolygon: typeof DrawPolygon;
 };
 export declare const CutoutViewer: CutoutViewerComponent;
 export {};

package/dist/components/cutout-viewer/cutouts/image/alpha-contour.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Contour-tracing utilities for extracting polygon outlines from alpha data.
+ *
+ * Used by the trace effect to render image cutouts with the same SVG
+ * stroke-dasharray animation that geometric shapes use.
+ *
+ * Pipeline:
+ * 1. Downscale alpha buffer to a working resolution for performance
+ * 2. Build binary grid from alpha threshold
+ * 3. Trace the outer boundary using Moore-Neighbor contour tracing
+ * 4. Simplify with Ramer–Douglas–Peucker
+ * 5. Return normalized [0-1] coordinate pairs
+ */
+/**
+ * Extract a simplified polygon contour from a pre-computed alpha buffer.
+ *
+ * Accepts the alpha data already extracted by the hit-test strategy,
+ * avoiding a redundant image load.
+ *
+ * @param alpha          Compact alpha buffer (one byte per pixel)
+ * @param srcW           Source image width in pixels
+ * @param srcH           Source image height in pixels
+ * @param alphaThreshold Minimum alpha value (0-255) to consider opaque
+ * @param epsilon        RDP simplification tolerance in normalized coords
+ *                       (default: 0.003 — roughly 0.3 % of image size)
+ */
+export declare function traceContour(alpha: Uint8Array, srcW: number, srcH: number, alphaThreshold?: number, epsilon?: number): [number, number][];

package/dist/components/cutout-viewer/cutouts/image/image-hit-test-strategy.d.ts

@@ -17,6 +17,7 @@ import type { CutoutBounds, HitTestStrategy, ImageCutoutDefinition } from "../..
 export declare class ImageHitTestStrategy implements HitTestStrategy {
     id: string;
     bounds: CutoutBounds;
+    contour: [number, number][];
     /** URL of the cutout mask image */
     private src;
     /** Alpha value (0-255) a pixel must exceed to be considered "visible" */

package/dist/components/cutout-viewer/drawing/draw-polygon.d.ts

@@ -0,0 +1,58 @@
+import { type CSSProperties } from "react";
+import { type UseDrawPolygonOptions } from "./use-draw-polygon";
+export interface DrawPolygonProps extends UseDrawPolygonOptions {
+    /**
+     * Stroke / accent color used for the in-progress polygon visualization.
+     * Accepts any CSS color string.
+     * @default "#3b82f6"
+     */
+    strokeColor?: string;
+    /**
+     * When `false`, the drawing overlay becomes fully transparent to pointer
+     * events and any in-progress drawing is cleared. Useful for toggling draw
+     * mode on/off without unmounting the component.
+     * @default true
+     */
+    enabled?: boolean;
+    /** Additional inline styles applied to the drawing overlay container */
+    style?: CSSProperties;
+    /** Additional class name applied to the drawing overlay container */
+    className?: string;
+}
+/**
+ * Composable sub-component of `<CutoutViewer>` that lets users draw freeform
+ * polygon regions directly on the main image.
+ *
+ * ### Interactions
+ * - **Click** — add a vertex
+ * - **Click near the first vertex** (≥ `minPoints` vertices drawn) — snap-close
+ *   and call `onComplete`
+ * - **Double-click** — complete the polygon immediately
+ * - **Right-click** — remove the last vertex
+ * - **Escape** — cancel and reset the in-progress drawing
+ *
+ * All coordinates passed to `onComplete` are normalized (0–1), matching the
+ * convention used by `<CutoutViewer.PolygonCutout>`.
+ *
+ * @example
+ * ```tsx
+ * const [drawnRegions, setDrawnRegions] = useState<[number,number][][]>([])
+ *
+ * <CutoutViewer mainImage="/photo.png">
+ *   <CutoutViewer.DrawPolygon
+ *     onComplete={(points) =>
+ *       setDrawnRegions((prev) => [...prev, points])
+ *     }
+ *   />
+ *   {drawnRegions.map((points, i) => (
+ *     <CutoutViewer.PolygonCutout
+ *       key={i}
+ *       id={`region-${i}`}
+ *       points={points}
+ *       label={`Region ${i + 1}`}
+ *     />
+ *   ))}
+ * </CutoutViewer>
+ * ```
+ */
+export declare function DrawPolygon({ onComplete, minPoints, closeThreshold, strokeColor, enabled, style, className, }: DrawPolygonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/cutout-viewer/drawing/use-draw-polygon.d.ts

@@ -0,0 +1,56 @@
+export interface UseDrawPolygonOptions {
+    /** Called when the user finishes drawing a polygon */
+    onComplete: (points: [number, number][]) => void;
+    /** Minimum number of points required to complete a polygon (default: 3) */
+    minPoints?: number;
+    /**
+     * Normalized (0–1) distance threshold to snap-close the polygon by clicking
+     * near the first point (default: 0.03).
+     */
+    closeThreshold?: number;
+}
+export interface UseDrawPolygonReturn {
+    /** Points drawn so far, in normalized 0–1 coordinates */
+    points: [number, number][];
+    /** Current live cursor preview point, or null when the cursor is outside */
+    previewPoint: [number, number] | null;
+    /** True when the cursor is close enough to the first point to snap-close */
+    willClose: boolean;
+    /** Reset (cancel) the current in-progress drawing */
+    reset: () => void;
+    /** Ref to attach to the drawing container element */
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    /** Event handlers to spread onto the drawing container element */
+    containerProps: {
+        onPointerMove: (e: React.PointerEvent<HTMLDivElement>) => void;
+        onPointerLeave: () => void;
+        onClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+        onDoubleClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+        onContextMenu: (e: React.MouseEvent<HTMLDivElement>) => void;
+    };
+}
+/**
+ * Headless hook for drawing a freeform polygon on an image.
+ *
+ * - **Single-click**: add a vertex
+ * - **Click near first point** (≥ `minPoints` vertices): snap-close and complete
+ * - **Double-click**: complete with the current vertices (removes duplicate from
+ *   the second single-click that fired before the `dblclick` event)
+ * - **Right-click / context-menu**: remove the last vertex
+ *
+ * All coordinates are normalized (0–1) so they are independent of the rendered
+ * image dimensions, matching the convention used by `PolygonCutout`.
+ *
+ * @example
+ * ```tsx
+ * const { points, previewPoint, willClose, reset, containerRef, containerProps } =
+ *   useDrawPolygon({ onComplete: (pts) => console.log(pts) })
+ *
+ * return (
+ *   <div ref={containerRef} style={{ position: "relative" }} {...containerProps}>
+ *     <img src="/main.png" style={{ width: "100%" }} />
+ *   </div>
+ * )
+ * ```
+ */
+export declare function useDrawPolygon({ onComplete, minPoints, closeThreshold, }: UseDrawPolygonOptions): UseDrawPolygonReturn;

package/dist/components/cutout-viewer/hit-test-strategy.d.ts

@@ -44,6 +44,8 @@ export interface HitTestStrategy {
     hitTest(nx: number, ny: number): boolean;
     /** Pre-computed bounding box (normalized 0-1) */
     bounds: CutoutBounds;
+    /** Pre-computed contour polygon (normalized 0-1), if available */
+    contour?: [number, number][];
     /** Optional async setup (e.g., image loading) */
     prepare?(): Promise<void>;
     /** Cleanup */

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

@@ -166,8 +166,9 @@ export declare const liftEffect: HoverEffect;
 export declare const subtleEffect: HoverEffect;
 /**
  * Trace effect — a short white dash endlessly travels around the cutout
- * border, tracing its outline. For image-based cutouts a white drop-shadow
- * highlight sweeps around the silhouette edge.
+ * border, tracing its outline. For image-based cutouts, the alpha channel
+ * is converted to a polygon outline and rendered with the same SVG
+ * stroke-dasharray animation used on geometric shapes.
  */
 export declare const traceEffect: HoverEffect;
 /**

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

@@ -5,6 +5,10 @@ export type { CutoutOverlayProps, Placement } from "./cutouts/cutout-overlay";
 export type { CutoutProps, RenderLayerProps } from "./cutouts/image/cutout";
 export type { BBoxCutoutProps } from "./cutouts/bbox/bbox-cutout";
 export type { PolygonCutoutProps } from "./cutouts/polygon/polygon-cutout";
+export { DrawPolygon } from "./drawing/draw-polygon";
+export type { DrawPolygonProps } from "./drawing/draw-polygon";
+export { useDrawPolygon } from "./drawing/use-draw-polygon";
+export type { UseDrawPolygonOptions, UseDrawPolygonReturn, } from "./drawing/use-draw-polygon";
 export { useCutout } from "./cutouts/cutout-context";
 export { useCutoutHitTest } from "./use-cutout-hit-test";
 export type { CutoutImage, CutoutBounds } from "./use-cutout-hit-test";

package/dist/components/cutout-viewer/use-cutout-hit-test.d.ts

@@ -20,6 +20,7 @@ export declare function useCutoutHitTest(definitions: CutoutDefinition[], enable
     selectedId: string | null;
     activeId: string | null;
     boundsMap: Record<string, CutoutBounds>;
+    contourMap: Record<string, [number, number][]>;
     containerRef: import("react").RefObject<HTMLDivElement | null>;
     containerProps: {
         onPointerMove: (e: React.PointerEvent<HTMLDivElement>) => void;

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

@@ -13,6 +13,7 @@ export interface CutoutViewerContextValue {
     enabled: boolean;
     showAll: boolean;
     boundsMap: Record<string, CutoutBounds>;
+    contourMap: Record<string, [number, number][]>;
     isAnyActive: boolean;
 }
 export declare const CutoutViewerContext: import("react").Context<CutoutViewerContextValue | null>;

package/dist/index.cjs

@@ -1,16 +1,12 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react");var J={exports:{}},z={};var nt;function _t(){if(nt)return z;nt=1;var t=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function o(n,a,u){var i=null;if(u!==void 0&&(i=""+u),a.key!==void 0&&(i=""+a.key),"key"in a){u={};for(var s in a)s!=="key"&&(u[s]=a[s])}else u=a;return a=u.ref,{$$typeof:t,type:n,key:i,ref:a!==void 0?a:null,props:u}}return z.Fragment=r,z.jsx=o,z.jsxs=o,z}var L={};var st;function St(){return st||(st=1,process.env.NODE_ENV!=="production"&&(function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===v?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case j:return"Fragment";case b:return"Profiler";case T:return"StrictMode";case O:return"Suspense";case Y:return"SuspenseList";case E:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case k:return"Portal";case M:return e.displayName||"Context";case $:return(e._context.displayName||"Context")+".Consumer";case y:var f=e.render;return e=e.displayName,e||(e=f.displayName||f.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case V:return f=e.displayName||null,f!==null?f:t(e.type)||"Memo";case C:f=e._payload,e=e._init;try{return t(e(f))}catch{}}return null}function r(e){return""+e}function o(e){try{r(e);var f=!1}catch{f=!0}if(f){f=console;var w=f.error,I=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return w.call(f,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",I),r(e)}}function n(e){if(e===j)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===C)return"<...>";try{var f=t(e);return f?"<"+f+">":"<...>"}catch{return"<...>"}}function a(){var e=x.A;return e===null?null:e.getOwner()}function u(){return Error("react-stack-top-frame")}function i(e){if(P.call(e,"key")){var f=Object.getOwnPropertyDescriptor(e,"key").get;if(f&&f.isReactWarning)return!1}return e.key!==void 0}function s(e,f){function w(){W||(W=!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)",f))}w.isReactWarning=!0,Object.defineProperty(e,"key",{get:w,configurable:!0})}function p(){var e=t(this.type);return N[e]||(N[e]=!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.")),e=this.props.ref,e!==void 0?e:null}function c(e,f,w,I,q,tt){var R=w.ref;return e={$$typeof:m,type:e,key:f,props:w,_owner:I},(R!==void 0?R:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:p}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:q}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:tt}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function h(e,f,w,I,q,tt){var R=f.children;if(R!==void 0)if(I)if(B(R)){for(I=0;I<R.length;I++)A(R[I]);Object.freeze&&Object.freeze(R)}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 A(R);if(P.call(f,"key")){R=t(e);var D=Object.keys(f).filter(function(At){return At!=="key"});I=0<D.length?"{key: someKey, "+D.join(": ..., ")+": ...}":"{key: someKey}",ot[R+I]||(D=0<D.length?"{"+D.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 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:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,I,R,D,R),ot[R+I]=!0)}if(R=null,w!==void 0&&(o(w),R=""+w),i(f)&&(o(f.key),R=""+f.key),"key"in f){w={};for(var et in f)et!=="key"&&(w[et]=f[et])}else w=f;return R&&s(w,typeof e=="function"?e.displayName||e.name||"Unknown":e),c(e,R,w,a(),q,tt)}function A(e){g(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===C&&(e._payload.status==="fulfilled"?g(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function g(e){return typeof e=="object"&&e!==null&&e.$$typeof===m}var d=l,m=Symbol.for("react.transitional.element"),k=Symbol.for("react.portal"),j=Symbol.for("react.fragment"),T=Symbol.for("react.strict_mode"),b=Symbol.for("react.profiler"),$=Symbol.for("react.consumer"),M=Symbol.for("react.context"),y=Symbol.for("react.forward_ref"),O=Symbol.for("react.suspense"),Y=Symbol.for("react.suspense_list"),V=Symbol.for("react.memo"),C=Symbol.for("react.lazy"),E=Symbol.for("react.activity"),v=Symbol.for("react.client.reference"),x=d.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,P=Object.prototype.hasOwnProperty,B=Array.isArray,_=console.createTask?console.createTask:function(){return null};d={react_stack_bottom_frame:function(e){return e()}};var W,N={},F=d.react_stack_bottom_frame.bind(d,u)(),rt=_(n(u)),ot={};L.Fragment=j,L.jsx=function(e,f,w){var I=1e4>x.recentlyCreatedOwnerStacks++;return h(e,f,w,!1,I?Error("react-stack-top-frame"):F,I?_(n(e)):rt)},L.jsxs=function(e,f,w){var I=1e4>x.recentlyCreatedOwnerStacks++;return h(e,f,w,!0,I?Error("react-stack-top-frame"):F,I?_(n(e)):rt)}})()),L}var at;function Tt(){return at||(at=1,process.env.NODE_ENV==="production"?J.exports=_t():J.exports=St()),J.exports}var S=Tt();function jt(t,r){const o=new Uint8Array(r);for(let n=0;n<r;n++)o[n]=t[n*4+3];return o}function $t(t,r,o,n){if(r<=0||o<=0)return{x:0,y:0,w:1,h:1};let a=r,u=o,i=0,s=0,p=!1;for(let c=0;c<o;c++)for(let h=0;h<r;h++)t[c*r+h]>n&&(h<a&&(a=h),h>i&&(i=h),c<u&&(u=c),c>s&&(s=c),p=!0);return p?{x:a/r,y:u/o,w:(i-a+1)/r,h:(s-u+1)/o}:{x:0,y:0,w:1,h:1}}class ht{id;bounds={x:0,y:0,w:1,h:1};src;threshold;alpha=new Uint8Array(0);width=0;height=0;constructor(r,o){this.id=r.id,this.src=r.src,this.threshold=o}async prepare(){const r=new Image;r.crossOrigin="anonymous",r.src=this.src,await new Promise(i=>{r.onload=()=>i(),r.onerror=()=>i()});const o=r.naturalWidth,n=r.naturalHeight;if(o<=0||n<=0)return;const a=document.createElement("canvas");a.width=o,a.height=n;const u=a.getContext("2d",{willReadFrequently:!0});if(u)try{u.drawImage(r,0,0);const i=u.getImageData(0,0,o,n);this.alpha=jt(i.data,o*n),this.width=o,this.height=n,this.bounds=$t(this.alpha,o,n,this.threshold)}catch{this.alpha=new Uint8Array(0)}}hitTest(r,o){if(this.alpha.length===0)return!1;const n=this.bounds;if(r<n.x||r>n.x+n.w||o<n.y||o>n.y+n.h)return!1;const a=Math.min(this.width-1,Math.max(0,Math.floor(r*this.width))),u=Math.min(this.height-1,Math.max(0,Math.floor(o*this.height)));return this.alpha[u*this.width+a]>this.threshold}}class gt{id;bounds;constructor(r){this.id=r.id,this.bounds={...r.bounds}}hitTest(r,o){const n=this.bounds;return r>=n.x&&r<=n.x+n.w&&o>=n.y&&o<=n.y+n.h}}function Pt(t,r,o){let n=!1;for(let a=0,u=o.length-1;a<o.length;u=a++){const i=o[a][0],s=o[a][1],p=o[u][0],c=o[u][1];s>r!=c>r&&t<(p-i)*(r-s)/(c-s)+i&&(n=!n)}return n}class mt{id;bounds;points;constructor(r){this.id=r.id,this.points=r.points;let o=1/0,n=1/0,a=-1/0,u=-1/0;for(const[i,s]of r.points)i<o&&(o=i),i>a&&(a=i),s<n&&(n=s),s>u&&(u=s);this.bounds={x:o,y:n,w:a-o,h:u-n}}hitTest(r,o){const n=this.bounds;return r<n.x||r>n.x+n.w||o<n.y||o>n.y+n.h?!1:Pt(r,o,this.points)}}function bt(t,r){switch(t.type){case"image":return new ht(t,r);case"bbox":return new gt(t);case"polygon":return new mt(t)}}function Mt(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 yt(t,r=!0,o=30,n=150){const[a,u]=l.useState(null),[i,s]=l.useState(null),p=l.useRef(null),c=l.useRef([]),[h,A]=l.useState({}),g=Math.min(255,Math.max(0,o)),d=l.useRef(null),m=l.useCallback(()=>{d.current===null&&(d.current=setTimeout(()=>{d.current=null,u(null)},n))},[n]),k=l.useCallback(()=>{d.current!==null&&(clearTimeout(d.current),d.current=null)},[]),j=t.map(Mt).join("|"),T=l.useMemo(()=>t,[j]);l.useEffect(()=>{if(!r){c.current=[];return}let C=!1,E=[];async function v(){const x=[],P={};for(const B of T){const _=bt(B,g);if(_.prepare&&await _.prepare(),C)return;x.push(_),P[_.id]=_.bounds}C||(E=x,c.current=x,A(P))}return v(),()=>{C=!0;for(const x of E)x.dispose?.()}},[T,r,g]);const b=l.useCallback((C,E)=>{const v=c.current;for(let x=v.length-1;x>=0;x--)if(v[x].hitTest(C,E))return v[x].id;return null},[]),$=l.useCallback(C=>{const E=p.current;if(!E)return null;const v=E.getBoundingClientRect(),x=(C.clientX-v.left)/v.width,P=(C.clientY-v.top)/v.height;return x<0||x>1||P<0||P>1?null:{nx:x,ny:P}},[]),M=l.useCallback(C=>{if(!r)return;const E=$(C);if(!E){m();return}const v=b(E.nx,E.ny);if(v===null){if(C.target?.closest('[data-cutout-overlay="true"]')){k();return}m();return}k(),u(v)},[r,$,b,m,k]),y=l.useCallback(()=>{m()},[m]),O=l.useCallback(C=>{if(!r)return;const E=$(C);if(!E){s(null);return}const v=b(E.nx,E.ny);s(v===i||v===null?null:v)},[r,$,b,i]),Y=i??a,V=r?h:{};return l.useEffect(()=>()=>{k()},[k]),{hoveredId:a,selectedId:i,activeId:Y,boundsMap:V,containerRef:p,containerProps:{onPointerMove:M,onPointerLeave:y,onClick:O}}}function K(t,r){return{name:t,css:r}}const it=new Set;function Ot(t){if(!(!t.keyframes?.length||typeof document>"u"))for(const r of t.keyframes){if(it.has(r.name))continue;it.add(r.name);const o=document.createElement("style");o.setAttribute("data-ricut-kf",r.name),o.textContent=`@keyframes ${r.name} {
-${r.css}
-}`,document.head.appendChild(o)}}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}},ut=K("_ricut-trace-stroke",`from { stroke-dashoffset: 0; }
-   to   { stroke-dashoffset: -1; }`),lt=K("_ricut-trace-glow",`0%   { filter: drop-shadow(-3px -3px 6px rgba(255,255,255,0.6)) drop-shadow(0 0 2px rgba(255,255,255,0.15)); }
-   25%  { filter: drop-shadow(3px -3px 6px rgba(255,255,255,0.6)) drop-shadow(0 0 2px rgba(255,255,255,0.15)); }
-   50%  { filter: drop-shadow(3px 3px 6px rgba(255,255,255,0.6)) drop-shadow(0 0 2px rgba(255,255,255,0.15)); }
-   75%  { filter: drop-shadow(-3px 3px 6px rgba(255,255,255,0.6)) drop-shadow(0 0 2px rgba(255,255,255,0.15)); }
-   100% { filter: drop-shadow(-3px -3px 6px rgba(255,255,255,0.6)) drop-shadow(0 0 2px rgba(255,255,255,0.15)); }`),Et={name:"trace",transition:U,keyframes:[ut,lt],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(-3px -3px 6px rgba(255,255,255,0.6)) drop-shadow(0 0 2px rgba(255,255,255,0.15))",opacity:1,animation:`${lt.name} 3s linear infinite`},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:`${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}},ct=K("_ricut-shimmer",`0%, 100% {
+  <%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% {
     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));
@@ -24,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));
-  }`),Ct={name:"shimmer",transition:U,keyframes:[ct],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:`${ct.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}},H={elevate:vt,glow:xt,lift:wt,subtle:kt,trace:Et,shimmer:Ct},Z=l.createContext(null),It=l.createContext(null);function Q(){const t=l.useContext(It);if(!t)throw new Error("Must be used inside <CutoutViewer>");return t}const G=l.createContext(null);function Wt(){const t=l.useContext(G);if(!t)throw new Error("useCutout must be used inside <CutoutViewer.Cutout>");return t}function Nt({id:t,src:r,label:o,effect:n,children:a,renderLayer:u}){const i=l.useContext(Z),s=Q();if(!i)throw new Error("<CutoutViewer.Cutout> must be used inside <CutoutViewer>");l.useEffect(()=>(i.registerCutout({type:"image",id:t,src:r,label:o}),()=>i.unregisterCutout(t)),[t,r,o,i]);const p=n?typeof n=="string"?H[n]??s.effect:n:s.effect,c=s.activeId===t,h=s.hoveredId===t,A=s.selectedId===t,g={x:0,y:0,w:1,h:1},d=s.boundsMap[t]??g;let m;!s.enabled||!s.isAnyActive&&!s.showAll?m=p.cutoutIdle:s.showAll||c?m=p.cutoutActive:m=p.cutoutInactive;const k=l.useMemo(()=>({id:t,label:o,bounds:d,isActive:c,isHovered:h,isSelected:A,effect:p}),[t,o,d,c,h,A,p]);return S.jsxs(G.Provider,{value:k,children:[S.jsx("div",{"data-cutout-id":t,style:{pointerEvents:"none",position:"absolute",inset:0,zIndex:c?20:10,transition:p.transition,...m},children:u?u({isActive:c,isHovered:h,isSelected:A,bounds:d,effect:p}):S.jsx("img",{src:r,alt:o||t,draggable:!1,style:{width:"100%",height:"100%",objectFit:"fill",userSelect:"none"}})}),a]})}function ft(t){const{filter:r,...o}=t;return o}function Yt({id:t,bounds:r,label:o,effect:n,children:a,renderLayer:u}){const i=l.useContext(Z),s=Q();if(!i)throw new Error("<CutoutViewer.BBoxCutout> must be used inside <CutoutViewer>");const{x:p,y:c,w:h,h:A}=r;l.useEffect(()=>(i.registerCutout({type:"bbox",id:t,bounds:{x:p,y:c,w:h,h:A},label:o}),()=>i.unregisterCutout(t)),[t,p,c,h,A,o,i]);const g=n?typeof n=="string"?H[n]??s.effect:n:s.effect,d=s.activeId===t,m=s.hoveredId===t,k=s.selectedId===t,j={x:0,y:0,w:1,h:1},T=s.boundsMap[t]??j;let b,$;!s.enabled||!s.isAnyActive&&!s.showAll?($={...g.cutoutIdle,filter:"none",opacity:0},b=g.geometryIdle):s.showAll||d?($=ft(g.cutoutActive),b=g.geometryActive):($=ft(g.cutoutInactive),b=g.geometryInactive);const y=b??{fill:"rgba(37, 99, 235, 0.15)",stroke:"rgba(37, 99, 235, 0.6)",strokeWidth:2},O=l.useMemo(()=>({id:t,label:o,bounds:T,isActive:d,isHovered:m,isSelected:k,effect:g}),[t,o,T,d,m,k,g]);return S.jsxs(G.Provider,{value:O,children:[S.jsx("div",{"data-cutout-id":t,style:{pointerEvents:"none",position:"absolute",inset:0,zIndex:d?20:10,transition:g.transition,...$},children:u?u({isActive:d,isHovered:m,isSelected:k,bounds:T,effect:g}):S.jsx("svg",{viewBox:"0 0 1 1",preserveAspectRatio:"none",style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",filter:y.glow?`drop-shadow(${y.glow.split(",")[0]?.trim()??""})`:"none"},children:S.jsx("rect",{x:T.x,y:T.y,width:T.w,height:T.h,rx:.004,fill:y.fill,stroke:y.stroke,strokeWidth:(y.strokeWidth??2)*.0015,strokeLinecap:y.strokeDasharray?"round":void 0,strokeDasharray:y.strokeDasharray,pathLength:y.strokeDasharray?1:void 0,style:{transition:g.transition,animation:y.animation}})})}),a]})}function dt(t){const{filter:r,...o}=t;return o}function Dt({id:t,points:r,label:o,effect:n,children:a,renderLayer:u}){const i=l.useContext(Z),s=Q();if(!i)throw new Error("<CutoutViewer.PolygonCutout> must be used inside <CutoutViewer>");const p=r.flat().join(",");l.useEffect(()=>(i.registerCutout({type:"polygon",id:t,points:r,label:o}),()=>i.unregisterCutout(t)),[t,p,o,i]);const c=n?typeof n=="string"?H[n]??s.effect:n:s.effect,h=s.activeId===t,A=s.hoveredId===t,g=s.selectedId===t,d={x:0,y:0,w:1,h:1},m=s.boundsMap[t]??d;let k,j;!s.enabled||!s.isAnyActive&&!s.showAll?(j={...c.cutoutIdle,filter:"none",opacity:0},k=c.geometryIdle):s.showAll||h?(j=dt(c.cutoutActive),k=c.geometryActive):(j=dt(c.cutoutInactive),k=c.geometryInactive);const b=k??{fill:"rgba(37, 99, 235, 0.15)",stroke:"rgba(37, 99, 235, 0.6)",strokeWidth:2},$=l.useMemo(()=>({id:t,label:o,bounds:m,isActive:h,isHovered:A,isSelected:g,effect:c}),[t,o,m,h,A,g,c]);return S.jsxs(G.Provider,{value:$,children:[S.jsx("div",{"data-cutout-id":t,style:{pointerEvents:"none",position:"absolute",inset:0,zIndex:h?20:10,transition:c.transition,...j},children:u?u({isActive:h,isHovered:A,isSelected:g,bounds:m,effect:c}):S.jsx("svg",{viewBox:"0 0 1 1",preserveAspectRatio:"none",style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",filter:b.glow?`drop-shadow(${b.glow.split(",")[0]?.trim()??""})`:"none"},children:S.jsx("polygon",{points:r.map(([M,y])=>`${M},${y}`).join(" "),fill:b.fill,stroke:b.stroke,strokeWidth:(b.strokeWidth??2)*.0015,strokeLinejoin:"round",strokeLinecap:b.strokeDasharray?"round":void 0,strokeDasharray:b.strokeDasharray,pathLength:b.strokeDasharray?1:void 0,style:{transition:c.transition,animation:b.animation}})})}),a]})}function Ht(t,r){const{x:o,y:n,w:a,h:u}=r;let i,s;t.includes("left")?(i=`${o*100}%`,s="0"):t.includes("right")?(i=`${(o+a)*100}%`,s="-100%"):(i=`${(o+a/2)*100}%`,s="-50%");let p,c;return t.startsWith("top")?(p=`${n*100}%`,c="-100%"):t.startsWith("bottom")?(p=`${(n+u)*100}%`,c="0"):(p=`${(n+u/2)*100}%`,c="-50%"),{position:"absolute",left:i,top:p,transform:`translate(${s}, ${c})`}}function Rt({placement:t="top-center",children:r,className:o="",style:n}){const a=l.useContext(G),u=Q();if(!a)throw new Error("<CutoutViewer.Overlay> must be used inside <CutoutViewer.Cutout>");const i=u.enabled&&(u.showAll||a.isActive),s=Ht(t,a.bounds);return S.jsx("div",{"data-cutout-overlay":"true",className:o,style:{zIndex:30,transition:a.effect.transition,opacity:i?1:0,pointerEvents:i?"auto":"none",...s,...n},children:r})}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??""}`}}function Vt({mainImage:t,mainImageAlt:r="Main image",effect:o="elevate",enabled:n=!0,showAll:a=!1,alphaThreshold:u=30,hoverLeaveDelay:i=150,children:s,className:p="",style:c,onHover:h,onActiveChange:A,onSelect:g}){const d=typeof o=="string"?H[o]??H.elevate:o;l.useEffect(()=>{Ot(d)},[d]);const[m,k]=l.useState(()=>new Map),j=l.useCallback(_=>{k(W=>{const N=W.get(_.id);if(N&&pt(N)===pt(_))return W;const F=new Map(W);return F.set(_.id,_),F})},[]),T=l.useCallback(_=>{k(W=>{if(!W.has(_))return W;const N=new Map(W);return N.delete(_),N})},[]),b=l.useMemo(()=>({registerCutout:j,unregisterCutout:T}),[j,T]),$=l.useMemo(()=>Array.from(m.values()),[m]),{activeId:M,selectedId:y,hoveredId:O,boundsMap:Y,containerRef:V,containerProps:C}=yt($,n,u,i),E=l.useRef(null),v=l.useRef(null),x=l.useRef(null);l.useEffect(()=>{O!==E.current&&(E.current=O,h?.(O))},[O,h]),l.useEffect(()=>{M!==v.current&&(v.current=M,A?.(M))},[M,A]),l.useEffect(()=>{y!==x.current&&(x.current=y,g?.(y))},[y,g]);const P=a||M!==null,B=l.useMemo(()=>({activeId:M,selectedId:y,hoveredId:O,effect:d,enabled:n,showAll:a,boundsMap:Y,isAnyActive:P}),[M,y,O,d,n,a,Y,P]);return S.jsx(Z.Provider,{value:b,children:S.jsx(It.Provider,{value:B,children:S.jsxs("div",{ref:V,className:p,style:{position:"relative",width:"100%",overflow:"hidden",cursor:P&&n?"pointer":"default",...c},...C,children:[S.jsx("img",{src:t,alt:r,draggable:!1,style:{display:"block",width:"100%",height:"auto",userSelect:"none",transition:d.transition,...P&&n?d.mainImageHovered:{}}}),S.jsx("div",{style:{pointerEvents:"none",position:"absolute",inset:0,transition:d.transition,opacity:P&&n?1:0,...d.vignetteStyle}}),s]})})})}const X=Vt;X.Cutout=Nt;X.BBoxCutout=Yt;X.PolygonCutout=Dt;X.Overlay=Rt;exports.CutoutOverlay=Rt;exports.CutoutViewer=X;exports.ImageHitTestStrategy=ht;exports.PolygonHitTestStrategy=mt;exports.RectHitTestStrategy=gt;exports.createHitTestStrategy=bt;exports.defineKeyframes=K;exports.elevateEffect=vt;exports.glowEffect=xt;exports.hoverEffects=H;exports.liftEffect=wt;exports.shimmerEffect=Ct;exports.subtleEffect=kt;exports.traceEffect=Et;exports.useCutout=Wt;exports.useCutoutHitTest=yt;
+  }`),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;