react-img-cutout 1.1.0 → 1.3.0

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

@@ -3,8 +3,11 @@ import { type HoverEffectPreset, type HoverEffect } from "./hover-effects";
 import { Cutout } from "./cutouts/image/cutout";
 import { BBoxCutout } from "./cutouts/bbox/bbox-cutout";
 import { PolygonCutout } from "./cutouts/polygon/polygon-cutout";
+import { CircleCutout } from "./cutouts/circle/circle-cutout";
 import { CutoutOverlay } from "./cutouts/cutout-overlay";
 import { DrawPolygon } from "./drawing/draw-polygon";
+import { DrawRectangle } from "./drawing/draw-rectangle";
+import { DrawCircle } from "./drawing/draw-circle";
 export interface CutoutViewerProps {
     /** URL of the main background image */
     mainImage: string;
@@ -40,8 +43,11 @@ type CutoutViewerComponent = ((props: CutoutViewerProps) => ReactElement) & {
     Cutout: typeof Cutout;
     BBoxCutout: typeof BBoxCutout;
     PolygonCutout: typeof PolygonCutout;
+    CircleCutout: typeof CircleCutout;
     Overlay: typeof CutoutOverlay;
     DrawPolygon: typeof DrawPolygon;
+    DrawRectangle: typeof DrawRectangle;
+    DrawCircle: typeof DrawCircle;
 };
 export declare const CutoutViewer: CutoutViewerComponent;
 export {};

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

@@ -0,0 +1,23 @@
+import { type ReactNode } from "react";
+import { type HoverEffect, type HoverEffectPreset } from "../../hover-effects";
+import type { RenderLayerProps } from "../image/cutout";
+export interface CircleCutoutProps {
+    /** Unique identifier for this cutout */
+    id: string;
+    /** Normalized 0-1 center coordinate */
+    center: {
+        x: number;
+        y: number;
+    };
+    /** Normalized 0-1 radius as a fraction of min(viewerWidth, viewerHeight) */
+    radius: number;
+    /** Human-readable label */
+    label?: string;
+    /** Override the viewer-level hover effect for this specific cutout */
+    effect?: HoverEffectPreset | HoverEffect;
+    /** Children rendered inside this cutout's context (e.g. `<Overlay>`) */
+    children?: ReactNode;
+    /** Custom renderer for the cutout layer. When provided, replaces the default rendering. */
+    renderLayer?: (props: RenderLayerProps) => ReactNode;
+}
+export declare function CircleCutout({ id, center: defCenter, radius: defRadius, label, effect: effectOverride, children, renderLayer, }: CircleCutoutProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,11 @@
+import type { CutoutBounds, HitTestStrategy, CircleCutoutDefinition } from "../../hit-test-strategy";
+export declare class CircleHitTestStrategy implements HitTestStrategy {
+    id: string;
+    bounds: CutoutBounds;
+    private cx;
+    private cy;
+    private rx;
+    private ry;
+    constructor(def: CircleCutoutDefinition, viewportWidth?: number, viewportHeight?: number);
+    hitTest(nx: number, ny: number): boolean;
+}

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

@@ -0,0 +1,29 @@
+/**
+ * Contour-tracing utilities for extracting smooth polygon outlines
+ * from alpha data.
+ *
+ * Used by the trace effect to render image cutouts with SVG stroke
+ * animations that closely follow the subject silhouette.
+ *
+ * Pipeline:
+ * 1. Downscale alpha buffer to a working resolution for performance
+ * 2. Marching Squares with linear interpolation for sub-pixel contours
+ * 3. Stitch edge segments into closed loops
+ * 4. Simplify with Ramer-Douglas-Peucker
+ * 5. Return normalized [0-1] coordinate pairs
+ */
+type Point = [number, number];
+/**
+ * Extract a smooth polygon contour from a pre-computed alpha buffer
+ * using Marching Squares with linear interpolation for sub-pixel accuracy.
+ */
+export declare function traceContour(alpha: Uint8Array, srcW: number, srcH: number, alphaThreshold?: number, epsilon?: number): Point[];
+/**
+ * Convert a closed contour to a smooth SVG path using
+ * Catmull-Rom to Cubic Bezier conversion.
+ *
+ * Produces curves that pass through every control point with smooth
+ * tangent continuity, eliminating the angular straight-line look.
+ */
+export declare function contourToSmoothPath(points: Point[]): string;
+export {};

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-circle.d.ts

@@ -0,0 +1,35 @@
+import { type CSSProperties } from "react";
+import { type UseDrawCircleOptions } from "./use-draw-circle";
+export interface DrawCircleProps extends UseDrawCircleOptions {
+    /**
+     * Stroke / accent color used for the in-progress circle 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 circle
+ * regions directly on the main image via click-and-drag.
+ *
+ * ### Interactions
+ * - **Pointer down** — set the center point
+ * - **Drag** — preview the circle in real time (radius = distance from center)
+ * - **Pointer up** — complete the circle and call `onComplete`
+ * - **Escape** — cancel and reset the in-progress drawing
+ *
+ * All coordinates passed to `onComplete` are normalized (0–1), matching the
+ * convention used by `<CutoutViewer.CircleCutout>`.
+ */
+export declare function DrawCircle({ onComplete, minRadius, strokeColor, enabled, style, className, }: DrawCircleProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,35 @@
+import { type CSSProperties } from "react";
+import { type UseDrawRectangleOptions } from "./use-draw-rectangle";
+export interface DrawRectangleProps extends UseDrawRectangleOptions {
+    /**
+     * Stroke / accent color used for the in-progress rectangle 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 rectangle
+ * regions directly on the main image via click-and-drag.
+ *
+ * ### Interactions
+ * - **Pointer down** — anchor the first corner
+ * - **Drag** — preview the rectangle in real time
+ * - **Pointer up** — complete the rectangle and call `onComplete`
+ * - **Escape** — cancel and reset the in-progress drawing
+ *
+ * All coordinates passed to `onComplete` are normalized (0–1), matching the
+ * convention used by `<CutoutViewer.BBoxCutout>`.
+ */
+export declare function DrawRectangle({ onComplete, minSize, strokeColor, enabled, style, className, }: DrawRectangleProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,41 @@
+export interface UseDrawCircleOptions {
+    /** Called when the user finishes drawing a circle */
+    onComplete: (circle: {
+        center: {
+            x: number;
+            y: number;
+        };
+        radius: number;
+    }) => void;
+    /** Minimum radius required to complete a circle (default: 0.01) */
+    minRadius?: number;
+}
+export interface UseDrawCircleReturn {
+    /** The in-progress circle, or null when not dragging */
+    circle: {
+        center: {
+            x: number;
+            y: number;
+        };
+        radius: number;
+    } | null;
+    /** Current drawing viewport size in pixels */
+    viewportSize: {
+        width: number;
+        height: number;
+    };
+    /** True while the user is dragging */
+    isDragging: 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: {
+        onPointerDown: (e: React.PointerEvent<HTMLDivElement>) => void;
+        onPointerMove: (e: React.PointerEvent<HTMLDivElement>) => void;
+        onPointerUp: (e: React.PointerEvent<HTMLDivElement>) => void;
+        onPointerLeave: () => void;
+    };
+}
+export declare function useDrawCircle({ onComplete, minRadius, }: UseDrawCircleOptions): UseDrawCircleReturn;

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

@@ -0,0 +1,34 @@
+export interface UseDrawRectangleOptions {
+    /** Called when the user finishes drawing a rectangle */
+    onComplete: (bounds: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    }) => void;
+    /** Minimum size (width or height) required to complete a rectangle (default: 0.01) */
+    minSize?: number;
+}
+export interface UseDrawRectangleReturn {
+    /** The in-progress rectangle, or null when not dragging */
+    rect: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    } | null;
+    /** True while the user is dragging */
+    isDragging: 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: {
+        onPointerDown: (e: React.PointerEvent<HTMLDivElement>) => void;
+        onPointerMove: (e: React.PointerEvent<HTMLDivElement>) => void;
+        onPointerUp: (e: React.PointerEvent<HTMLDivElement>) => void;
+        onPointerLeave: () => void;
+    };
+}
+export declare function useDrawRectangle({ onComplete, minSize, }: UseDrawRectangleOptions): UseDrawRectangleReturn;

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

@@ -36,7 +36,17 @@ export interface PolygonCutoutDefinition extends BaseCutoutDefinition {
     /** Array of [x, y] normalized points forming a closed path */
     points: [number, number][];
 }
-export type CutoutDefinition = ImageCutoutDefinition | BoundingBoxCutoutDefinition | PolygonCutoutDefinition;
+export interface CircleCutoutDefinition extends BaseCutoutDefinition {
+    type: "circle";
+    /** Normalized 0-1 center coordinate */
+    center: {
+        x: number;
+        y: number;
+    };
+    /** Normalized 0-1 radius as a fraction of min(viewerWidth, viewerHeight) */
+    radius: number;
+}
+export type CutoutDefinition = ImageCutoutDefinition | BoundingBoxCutoutDefinition | PolygonCutoutDefinition | CircleCutoutDefinition;
 export interface HitTestStrategy {
     /** Cutout identifier */
     id: string;
@@ -44,6 +54,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 */
@@ -52,4 +64,9 @@ export interface HitTestStrategy {
 export { ImageHitTestStrategy } from "./cutouts/image/image-hit-test-strategy";
 export { RectHitTestStrategy } from "./cutouts/bbox/bbox-hit-test-strategy";
 export { PolygonHitTestStrategy } from "./cutouts/polygon/polygon-hit-test-strategy";
-export declare function createHitTestStrategy(def: CutoutDefinition, alphaThreshold: number): HitTestStrategy;
+export { CircleHitTestStrategy } from "./cutouts/circle/circle-hit-test-strategy";
+export interface HitTestViewportOptions {
+    viewportWidth?: number;
+    viewportHeight?: number;
+}
+export declare function createHitTestStrategy(def: CutoutDefinition, alphaThreshold: number, options?: HitTestViewportOptions): HitTestStrategy;

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,14 +5,23 @@ 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 type { CircleCutoutProps } from "./cutouts/circle/circle-cutout";
 export { DrawPolygon } from "./drawing/draw-polygon";
 export type { DrawPolygonProps } from "./drawing/draw-polygon";
+export { DrawRectangle } from "./drawing/draw-rectangle";
+export type { DrawRectangleProps } from "./drawing/draw-rectangle";
+export { DrawCircle } from "./drawing/draw-circle";
+export type { DrawCircleProps } from "./drawing/draw-circle";
 export { useDrawPolygon } from "./drawing/use-draw-polygon";
 export type { UseDrawPolygonOptions, UseDrawPolygonReturn, } from "./drawing/use-draw-polygon";
+export { useDrawRectangle } from "./drawing/use-draw-rectangle";
+export type { UseDrawRectangleOptions, UseDrawRectangleReturn, } from "./drawing/use-draw-rectangle";
+export { useDrawCircle } from "./drawing/use-draw-circle";
+export type { UseDrawCircleOptions, UseDrawCircleReturn, } from "./drawing/use-draw-circle";
 export { useCutout } from "./cutouts/cutout-context";
 export { useCutoutHitTest } from "./use-cutout-hit-test";
 export type { CutoutImage, CutoutBounds } from "./use-cutout-hit-test";
-export type { CutoutDefinition, ImageCutoutDefinition, BoundingBoxCutoutDefinition, PolygonCutoutDefinition, HitTestStrategy, } from "./hit-test-strategy";
-export { ImageHitTestStrategy, RectHitTestStrategy, PolygonHitTestStrategy, createHitTestStrategy, } from "./hit-test-strategy";
+export type { CutoutDefinition, ImageCutoutDefinition, BoundingBoxCutoutDefinition, PolygonCutoutDefinition, CircleCutoutDefinition, HitTestStrategy, } from "./hit-test-strategy";
+export { ImageHitTestStrategy, RectHitTestStrategy, PolygonHitTestStrategy, CircleHitTestStrategy, createHitTestStrategy, } from "./hit-test-strategy";
 export { hoverEffects, elevateEffect, glowEffect, liftEffect, subtleEffect, traceEffect, shimmerEffect, defineKeyframes, } from "./hover-effects";
 export type { HoverEffect, HoverEffectPreset, GeometryStyle, KeyframeAnimation, } from "./hover-effects";

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

@@ -1,6 +1,6 @@
 import { type CutoutDefinition, type CutoutBounds } from "./hit-test-strategy";
 export type { CutoutBounds } from "./hit-test-strategy";
-export type { CutoutDefinition, ImageCutoutDefinition, BoundingBoxCutoutDefinition, PolygonCutoutDefinition, HitTestStrategy, } from "./hit-test-strategy";
+export type { CutoutDefinition, ImageCutoutDefinition, BoundingBoxCutoutDefinition, PolygonCutoutDefinition, CircleCutoutDefinition, HitTestStrategy, } from "./hit-test-strategy";
 /** @deprecated Use `ImageCutoutDefinition` instead */
 export interface CutoutImage {
     id: string;
@@ -19,7 +19,12 @@ export declare function useCutoutHitTest(definitions: CutoutDefinition[], enable
     hoveredId: string | null;
     selectedId: string | null;
     activeId: string | null;
+    viewportSize: {
+        width: number;
+        height: number;
+    };
     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

@@ -9,10 +9,15 @@ export interface CutoutViewerContextValue {
     activeId: string | null;
     selectedId: string | null;
     hoveredId: string | null;
+    viewportSize: {
+        width: number;
+        height: number;
+    };
     effect: HoverEffect;
     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 i=require("react");var K={exports:{}},z={};var ot;function Tt(){if(ot)return z;ot=1;var t=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function o(n,a,c){var l=null;if(c!==void 0&&(l=""+c),a.key!==void 0&&(l=""+a.key),"key"in a){c={};for(var s in a)s!=="key"&&(c[s]=a[s])}else c=a;return a=c.ref,{$$typeof:t,type:n,key:l,ref:a!==void 0?a:null,props:c}}return z.Fragment=r,z.jsx=o,z.jsxs=o,z}var U={};var st;function jt(){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===I?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case w:return"Fragment";case f:return"Profiler";case k:return"StrictMode";case M:return"Suspense";case O:return"SuspenseList";case S: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 C:return"Portal";case x:return e.displayName||"Context";case v:return(e._context.displayName||"Context")+".Consumer";case m:var p=e.render;return e=e.displayName,e||(e=p.displayName||p.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case B:return p=e.displayName||null,p!==null?p:t(e.type)||"Memo";case T:p=e._payload,e=e._init;try{return t(e(p))}catch{}}return null}function r(e){return""+e}function o(e){try{r(e);var p=!1}catch{p=!0}if(p){p=console;var _=p.error,j=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return _.call(p,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",j),r(e)}}function n(e){if(e===w)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===T)return"<...>";try{var p=t(e);return p?"<"+p+">":"<...>"}catch{return"<...>"}}function a(){var e=A.A;return e===null?null:e.getOwner()}function c(){return Error("react-stack-top-frame")}function l(e){if(W.call(e,"key")){var p=Object.getOwnPropertyDescriptor(e,"key").get;if(p&&p.isReactWarning)return!1}return e.key!==void 0}function s(e,p){function _(){D||(D=!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)",p))}_.isReactWarning=!0,Object.defineProperty(e,"key",{get:_,configurable:!0})}function d(){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 u(e,p,_,j,J,tt){var P=_.ref;return e={$$typeof:b,type:e,key:p,props:_,_owner:j},(P!==void 0?P:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:d}):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:J}),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,p,_,j,J,tt){var P=p.children;if(P!==void 0)if(j)if(L(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(W.call(p,"key")){P=t(e);var Y=Object.keys(p).filter(function(St){return St!=="key"});j=0<Y.length?"{key: someKey, "+Y.join(": ..., ")+": ...}":"{key: someKey}",nt[P+j]||(Y=0<Y.length?"{"+Y.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,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:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,j,P,Y,P),nt[P+j]=!0)}if(P=null,_!==void 0&&(o(_),P=""+_),l(p)&&(o(p.key),P=""+p.key),"key"in p){_={};for(var et in p)et!=="key"&&(_[et]=p[et])}else _=p;return P&&s(_,typeof e=="function"?e.displayName||e.name||"Unknown":e),u(e,P,_,a(),J,tt)}function E(e){y(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===T&&(e._payload.status==="fulfilled"?y(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function y(e){return typeof e=="object"&&e!==null&&e.$$typeof===b}var g=i,b=Symbol.for("react.transitional.element"),C=Symbol.for("react.portal"),w=Symbol.for("react.fragment"),k=Symbol.for("react.strict_mode"),f=Symbol.for("react.profiler"),v=Symbol.for("react.consumer"),x=Symbol.for("react.context"),m=Symbol.for("react.forward_ref"),M=Symbol.for("react.suspense"),O=Symbol.for("react.suspense_list"),B=Symbol.for("react.memo"),T=Symbol.for("react.lazy"),S=Symbol.for("react.activity"),I=Symbol.for("react.client.reference"),A=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,W=Object.prototype.hasOwnProperty,L=Array.isArray,$=console.createTask?console.createTask:function(){return null};g={react_stack_bottom_frame:function(e){return e()}};var D,N={},F=g.react_stack_bottom_frame.bind(g,c)(),rt=$(n(c)),nt={};U.Fragment=w,U.jsx=function(e,p,_){var j=1e4>A.recentlyCreatedOwnerStacks++;return h(e,p,_,!1,j?Error("react-stack-top-frame"):F,j?$(n(e)):rt)},U.jsxs=function(e,p,_){var j=1e4>A.recentlyCreatedOwnerStacks++;return h(e,p,_,!0,j?Error("react-stack-top-frame"):F,j?$(n(e)):rt)}})()),U}var at;function Pt(){return at||(at=1,process.env.NODE_ENV==="production"?K.exports=Tt():K.exports=jt()),K.exports}var R=Pt();function $t(t,r){const o=new Uint8Array(r);for(let n=0;n<r;n++)o[n]=t[n*4+3];return o}function Mt(t,r,o,n){if(r<=0||o<=0)return{x:0,y:0,w:1,h:1};let a=r,c=o,l=0,s=0,d=!1;for(let u=0;u<o;u++)for(let h=0;h<r;h++)t[u*r+h]>n&&(h<a&&(a=h),h>l&&(l=h),u<c&&(c=u),u>s&&(s=u),d=!0);return d?{x:a/r,y:c/o,w:(l-a+1)/r,h:(s-c+1)/o}:{x:0,y:0,w:1,h:1}}class pt{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(l=>{r.onload=()=>l(),r.onerror=()=>l()});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 c=a.getContext("2d",{willReadFrequently:!0});if(c)try{c.drawImage(r,0,0);const l=c.getImageData(0,0,o,n);this.alpha=$t(l.data,o*n),this.width=o,this.height=n,this.bounds=Mt(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))),c=Math.min(this.height-1,Math.max(0,Math.floor(o*this.height)));return this.alpha[c*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 Wt(t,r,o){let n=!1;for(let a=0,c=o.length-1;a<o.length;c=a++){const l=o[a][0],s=o[a][1],d=o[c][0],u=o[c][1];s>r!=u>r&&t<(d-l)*(r-s)/(u-s)+l&&(n=!n)}return n}class yt{id;bounds;points;constructor(r){this.id=r.id,this.points=r.points;let o=1/0,n=1/0,a=-1/0,c=-1/0;for(const[l,s]of r.points)l<o&&(o=l),l>a&&(a=l),s<n&&(n=s),s>c&&(c=s);this.bounds={x:o,y:n,w:a-o,h:c-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:Wt(r,o,this.points)}}function mt(t,r){switch(t.type){case"image":return new pt(t,r);case"bbox":return new gt(t);case"polygon":return new yt(t)}}function Ot(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,r=!0,o=30,n=150){const[a,c]=i.useState(null),[l,s]=i.useState(null),d=i.useRef(null),u=i.useRef([]),[h,E]=i.useState({}),y=Math.min(255,Math.max(0,o)),g=i.useRef(null),b=i.useCallback(()=>{g.current===null&&(g.current=setTimeout(()=>{g.current=null,c(null)},n))},[n]),C=i.useCallback(()=>{g.current!==null&&(clearTimeout(g.current),g.current=null)},[]),w=t.map(Ot).join("|"),k=i.useMemo(()=>t,[w]);i.useEffect(()=>{if(!r){u.current=[];return}let T=!1,S=[];async function I(){const A=[],W={};for(const L of k){const $=mt(L,y);if($.prepare&&await $.prepare(),T)return;A.push($),W[$.id]=$.bounds}T||(S=A,u.current=A,E(W))}return I(),()=>{T=!0;for(const A of S)A.dispose?.()}},[k,r,y]);const f=i.useCallback((T,S)=>{const I=u.current;for(let A=I.length-1;A>=0;A--)if(I[A].hitTest(T,S))return I[A].id;return null},[]),v=i.useCallback(T=>{const S=d.current;if(!S)return null;const I=S.getBoundingClientRect(),A=(T.clientX-I.left)/I.width,W=(T.clientY-I.top)/I.height;return A<0||A>1||W<0||W>1?null:{nx:A,ny:W}},[]),x=i.useCallback(T=>{if(!r)return;const S=v(T);if(!S){b();return}const I=f(S.nx,S.ny);if(I===null){if(T.target?.closest('[data-cutout-overlay="true"]')){C();return}b();return}C(),c(I)},[r,v,f,b,C]),m=i.useCallback(()=>{b()},[b]),M=i.useCallback(T=>{if(!r)return;const S=v(T);if(!S){s(null);return}const I=f(S.nx,S.ny);s(I===l||I===null?null:I)},[r,v,f,l]),O=l??a,B=r?h:{};return i.useEffect(()=>()=>{C()},[C]),{hoveredId:a,selectedId:l,activeId:O,boundsMap:B,containerRef:d,containerProps:{onPointerMove:x,onPointerLeave:m,onClick:M}}}function Z(t,r){return{name:t,css:r}}const it=new Set;function Dt(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} {
+  <%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} {
 ${r.css}
-}`,document.head.appendChild(o)}}const X="all 0.5s cubic-bezier(0.22, 1, 0.36, 1)",vt={name:"elevate",transition:X,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:X,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:X,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}},lt=Z("_ricut-trace-stroke",`from { stroke-dashoffset: 0; }
-   to   { stroke-dashoffset: -1; }`),ut=Z("_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:X,keyframes:[lt,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(-3px -3px 6px rgba(255,255,255,0.6)) drop-shadow(0 0 2px rgba(255,255,255,0.15))",opacity:1,animation:`${ut.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:`${lt.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=Z("_ricut-shimmer",`0%, 100% {
+}`,document.head.appendChild(n)}}const J="all 0.5s cubic-bezier(0.22, 1, 0.36, 1)",kt={name:"elevate",transition:J,mainImageHovered:{filter:"brightness(0.45) saturate(0.7)"},vignetteStyle:{background:"radial-gradient(ellipse at center, transparent 20%, rgba(0,0,0,0.4) 100%)"},cutoutActive:{transform:"scale(1.04) translateY(-6px)",filter:"drop-shadow(0 0 28px rgba(130, 190, 255, 0.5)) drop-shadow(0 16px 48px rgba(0, 0, 0, 0.55))",opacity:1},cutoutInactive:{transform:"scale(1)",filter:"brightness(0.45) saturate(0.6)",opacity:.55},cutoutIdle:{transform:"scale(1)",filter:"drop-shadow(0 1px 4px rgba(0, 0, 0, 0.12))",opacity:1},geometryActive:{fill:"rgba(130, 190, 255, 0.2)",stroke:"rgba(130, 190, 255, 0.9)",strokeWidth:0,glow:"0 0 24px rgba(130, 190, 255, 0.5), 0 0 56px rgba(130, 190, 255, 0.2), 0 12px 40px rgba(0, 0, 0, 0.4)"},geometryInactive:{fill:"rgba(100, 150, 200, 0.06)",stroke:"rgba(100, 150, 200, 0.2)",strokeWidth:1},geometryIdle:{fill:"transparent",stroke:"transparent",strokeWidth:1}},Ct={name:"glow",transition:J,mainImageHovered:{filter:"brightness(0.55) saturate(0.8)"},vignetteStyle:{background:"radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.3) 100%)"},cutoutActive:{transform:"scale(1)",filter:"drop-shadow(0 0 20px rgba(255, 200, 100, 0.6)) drop-shadow(0 0 60px rgba(255, 200, 100, 0.25))",opacity:1},cutoutInactive:{transform:"scale(1)",filter:"brightness(0.5) saturate(0.5)",opacity:.5},cutoutIdle:{transform:"scale(1)",filter:"none",opacity:1},geometryActive:{fill:"rgba(255, 200, 100, 0.15)",stroke:"rgba(255, 200, 100, 0.85)",strokeWidth:0,glow:"0 0 20px rgba(255, 200, 100, 0.5), 0 0 56px rgba(255, 200, 100, 0.2)"},geometryInactive:{fill:"rgba(200, 160, 80, 0.05)",stroke:"rgba(200, 160, 80, 0.2)",strokeWidth:1},geometryIdle:{fill:"transparent",stroke:"transparent",strokeWidth:1}},Et={name:"lift",transition:J,mainImageHovered:{filter:"brightness(0.4)"},vignetteStyle:{background:"rgba(0,0,0,0.25)"},cutoutActive:{transform:"scale(1.06) translateY(-10px)",filter:"drop-shadow(0 24px 64px rgba(0, 0, 0, 0.7))",opacity:1},cutoutInactive:{transform:"scale(0.97)",filter:"brightness(0.35)",opacity:.4},cutoutIdle:{transform:"scale(1)",filter:"none",opacity:1},geometryActive:{fill:"rgba(255, 255, 255, 0.1)",stroke:"rgba(255, 255, 255, 0.7)",strokeWidth:0,glow:"0 20px 56px rgba(0, 0, 0, 0.6), 0 0 16px rgba(255, 255, 255, 0.1)"},geometryInactive:{fill:"rgba(255, 255, 255, 0.02)",stroke:"rgba(255, 255, 255, 0.1)",strokeWidth:1},geometryIdle:{fill:"transparent",stroke:"transparent",strokeWidth:1}},Mt={name:"subtle",transition:"all 0.3s ease",mainImageHovered:{filter:"brightness(0.7)"},vignetteStyle:{background:"transparent"},cutoutActive:{transform:"scale(1)",filter:"none",opacity:1},cutoutInactive:{transform:"scale(1)",filter:"none",opacity:.35},cutoutIdle:{transform:"scale(1)",filter:"none",opacity:1},geometryActive:{fill:"rgba(255, 255, 255, 0.08)",stroke:"rgba(255, 255, 255, 0.5)",strokeWidth:0},geometryInactive:{fill:"transparent",stroke:"rgba(255, 255, 255, 0.1)",strokeWidth:1},geometryIdle:{fill:"transparent",stroke:"transparent",strokeWidth:1}},ut=ot("_ricut-trace-stroke",`from { stroke-dashoffset: 0; }
+   to   { stroke-dashoffset: -1; }`),St={name:"trace",transition:J,keyframes:[ut],mainImageHovered:{filter:"brightness(0.35) saturate(0.5)"},vignetteStyle:{background:"radial-gradient(ellipse at center, transparent 20%, rgba(0,0,0,0.5) 100%)"},cutoutActive:{transform:"scale(1)",filter:"drop-shadow(0 0 8px rgba(255,255,255,0.15))",opacity:1},cutoutInactive:{transform:"scale(1)",filter:"brightness(0.35) saturate(0.4)",opacity:.4},cutoutIdle:{transform:"scale(1)",filter:"none",opacity:1},geometryActive:{fill:"rgba(255, 255, 255, 0.03)",stroke:"rgba(255, 255, 255, 0.9)",strokeWidth:2,strokeDasharray:"0.15 0.85",animation:`${ut.name} 3s linear infinite`,glow:"0 0 10px rgba(255, 255, 255, 0.25)"},geometryInactive:{fill:"transparent",stroke:"rgba(255, 255, 255, 0.15)",strokeWidth:1},geometryIdle:{fill:"transparent",stroke:"transparent",strokeWidth:1}},ft=ot("_ricut-shimmer",`0%, 100% {
     filter: brightness(1.05) contrast(1.02)
             drop-shadow(0 0 6px rgba(255, 255, 255, 0.12))
             drop-shadow(0 12px 32px rgba(0, 0, 0, 0.4));
@@ -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:X,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}},V={elevate:vt,glow:xt,lift:wt,subtle:kt,trace:Et,shimmer:Ct},G=i.createContext(null),Rt=i.createContext(null);function Q(){const t=i.useContext(Rt);if(!t)throw new Error("Must be used inside <CutoutViewer>");return t}const q=i.createContext(null);function Nt(){const t=i.useContext(q);if(!t)throw new Error("useCutout must be used inside <CutoutViewer.Cutout>");return t}function Yt({id:t,src:r,label:o,effect:n,children:a,renderLayer:c}){const l=i.useContext(G),s=Q();if(!l)throw new Error("<CutoutViewer.Cutout> must be used inside <CutoutViewer>");i.useEffect(()=>(l.registerCutout({type:"image",id:t,src:r,label:o}),()=>l.unregisterCutout(t)),[t,r,o,l]);const d=n?typeof n=="string"?V[n]??s.effect:n:s.effect,u=s.activeId===t,h=s.hoveredId===t,E=s.selectedId===t,y={x:0,y:0,w:1,h:1},g=s.boundsMap[t]??y;let b;!s.enabled||!s.isAnyActive&&!s.showAll?b=d.cutoutIdle:s.showAll||u?b=d.cutoutActive:b=d.cutoutInactive;const C=i.useMemo(()=>({id:t,label:o,bounds:g,isActive:u,isHovered:h,isSelected:E,effect:d}),[t,o,g,u,h,E,d]);return R.jsxs(q.Provider,{value:C,children:[R.jsx("div",{"data-cutout-id":t,style:{pointerEvents:"none",position:"absolute",inset:0,zIndex:u?20:10,transition:d.transition,...b},children:c?c({isActive:u,isHovered:h,isSelected:E,bounds:g,effect:d}):R.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 Vt({id:t,bounds:r,label:o,effect:n,children:a,renderLayer:c}){const l=i.useContext(G),s=Q();if(!l)throw new Error("<CutoutViewer.BBoxCutout> must be used inside <CutoutViewer>");const{x:d,y:u,w:h,h:E}=r;i.useEffect(()=>(l.registerCutout({type:"bbox",id:t,bounds:{x:d,y:u,w:h,h:E},label:o}),()=>l.unregisterCutout(t)),[t,d,u,h,E,o,l]);const y=n?typeof n=="string"?V[n]??s.effect:n:s.effect,g=s.activeId===t,b=s.hoveredId===t,C=s.selectedId===t,w={x:0,y:0,w:1,h:1},k=s.boundsMap[t]??w;let f,v;!s.enabled||!s.isAnyActive&&!s.showAll?(v={...y.cutoutIdle,filter:"none",opacity:0},f=y.geometryIdle):s.showAll||g?(v=ft(y.cutoutActive),f=y.geometryActive):(v=ft(y.cutoutInactive),f=y.geometryInactive);const m=f??{fill:"rgba(37, 99, 235, 0.15)",stroke:"rgba(37, 99, 235, 0.6)",strokeWidth:2},M=i.useMemo(()=>({id:t,label:o,bounds:k,isActive:g,isHovered:b,isSelected:C,effect:y}),[t,o,k,g,b,C,y]);return R.jsxs(q.Provider,{value:M,children:[R.jsx("div",{"data-cutout-id":t,style:{pointerEvents:"none",position:"absolute",inset:0,zIndex:g?20:10,transition:y.transition,...v},children:c?c({isActive:g,isHovered:b,isSelected:C,bounds:k,effect:y}):R.jsx("svg",{viewBox:"0 0 1 1",preserveAspectRatio:"none",style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",filter:m.glow?`drop-shadow(${m.glow.split(",")[0]?.trim()??""})`:"none"},children:R.jsx("rect",{x:k.x,y:k.y,width:k.w,height:k.h,rx:.004,fill:m.fill,stroke:m.stroke,strokeWidth:(m.strokeWidth??2)*.0015,strokeLinecap:m.strokeDasharray?"round":void 0,strokeDasharray:m.strokeDasharray,pathLength:m.strokeDasharray?1:void 0,style:{transition:y.transition,animation:m.animation}})})}),a]})}function dt(t){const{filter:r,...o}=t;return o}function Ht({id:t,points:r,label:o,effect:n,children:a,renderLayer:c}){const l=i.useContext(G),s=Q();if(!l)throw new Error("<CutoutViewer.PolygonCutout> must be used inside <CutoutViewer>");const d=r.flat().join(",");i.useEffect(()=>(l.registerCutout({type:"polygon",id:t,points:r,label:o}),()=>l.unregisterCutout(t)),[t,d,o,l]);const u=n?typeof n=="string"?V[n]??s.effect:n:s.effect,h=s.activeId===t,E=s.hoveredId===t,y=s.selectedId===t,g={x:0,y:0,w:1,h:1},b=s.boundsMap[t]??g;let C,w;!s.enabled||!s.isAnyActive&&!s.showAll?(w={...u.cutoutIdle,filter:"none",opacity:0},C=u.geometryIdle):s.showAll||h?(w=dt(u.cutoutActive),C=u.geometryActive):(w=dt(u.cutoutInactive),C=u.geometryInactive);const f=C??{fill:"rgba(37, 99, 235, 0.15)",stroke:"rgba(37, 99, 235, 0.6)",strokeWidth:2},v=i.useMemo(()=>({id:t,label:o,bounds:b,isActive:h,isHovered:E,isSelected:y,effect:u}),[t,o,b,h,E,y,u]);return R.jsxs(q.Provider,{value:v,children:[R.jsx("div",{"data-cutout-id":t,style:{pointerEvents:"none",position:"absolute",inset:0,zIndex:h?20:10,transition:u.transition,...w},children:c?c({isActive:h,isHovered:E,isSelected:y,bounds:b,effect:u}):R.jsx("svg",{viewBox:"0 0 1 1",preserveAspectRatio:"none",style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",filter:f.glow?`drop-shadow(${f.glow.split(",")[0]?.trim()??""})`:"none"},children:R.jsx("polygon",{points:r.map(([x,m])=>`${x},${m}`).join(" "),fill:f.fill,stroke:f.stroke,strokeWidth:(f.strokeWidth??2)*.0015,strokeLinejoin:"round",strokeLinecap:f.strokeDasharray?"round":void 0,strokeDasharray:f.strokeDasharray,pathLength:f.strokeDasharray?1:void 0,style:{transition:u.transition,animation:f.animation}})})}),a]})}function Bt(t,r){const{x:o,y:n,w:a,h:c}=r;let l,s;t.includes("left")?(l=`${o*100}%`,s="0"):t.includes("right")?(l=`${(o+a)*100}%`,s="-100%"):(l=`${(o+a/2)*100}%`,s="-50%");let d,u;return t.startsWith("top")?(d=`${n*100}%`,u="-100%"):t.startsWith("bottom")?(d=`${(n+c)*100}%`,u="0"):(d=`${(n+c/2)*100}%`,u="-50%"),{position:"absolute",left:l,top:d,transform:`translate(${s}, ${u})`}}function It({placement:t="top-center",children:r,className:o="",style:n}){const a=i.useContext(q),c=Q();if(!a)throw new Error("<CutoutViewer.Overlay> must be used inside <CutoutViewer.Cutout>");const l=c.enabled&&(c.showAll||a.isActive),s=Bt(t,a.bounds);return R.jsx("div",{"data-cutout-overlay":"true",className:o,style:{zIndex:30,transition:a.effect.transition,opacity:l?1:0,pointerEvents:l?"auto":"none",...s,...n},children:r})}function At({onComplete:t,minPoints:r=3,closeThreshold:o=.03}){const[n,a]=i.useState([]),[c,l]=i.useState(null),s=i.useRef(null),d=i.useCallback((f,v)=>{const x=s.current;if(!x)return null;const m=x.getBoundingClientRect(),M=(f-m.left)/m.width,O=(v-m.top)/m.height;return M<0||M>1||O<0||O>1?null:[M,O]},[]),u=i.useCallback((f,v)=>{if(v.length<r)return!1;const x=f[0]-v[0][0],m=f[1]-v[0][1];return Math.sqrt(x*x+m*m)<o},[r,o]),h=i.useCallback(f=>{f.length<r||(t(f),a([]),l(null))},[t,r]),E=i.useCallback(()=>{a([]),l(null)},[]),y=i.useCallback(f=>{l(d(f.clientX,f.clientY))},[d]),g=i.useCallback(()=>{l(null)},[]),b=i.useCallback(f=>{f.stopPropagation();const v=d(f.clientX,f.clientY);v&&a(x=>u(v,x)?(h(x),[]):[...x,v])},[d,u,h]),C=i.useCallback(f=>{f.stopPropagation(),a(v=>{const x=v.slice(0,-1);return x.length>=r?(h(x),[]):x})},[r,h]),w=i.useCallback(f=>{f.preventDefault(),a(v=>v.slice(0,-1))},[]),k=c!==null&&u(c,n);return{points:n,previewPoint:c,willClose:k,reset:E,containerRef:s,containerProps:{onPointerMove:y,onPointerLeave:g,onClick:b,onDoubleClick:C,onContextMenu:w}}}function _t({onComplete:t,minPoints:r=3,closeThreshold:o=.03,strokeColor:n="#3b82f6",enabled:a=!0,style:c,className:l=""}){if(!i.useContext(G))throw new Error("<CutoutViewer.DrawPolygon> must be used inside <CutoutViewer>");const{points:d,previewPoint:u,willClose:h,reset:E,containerRef:y,containerProps:g}=At({onComplete:t,minPoints:r,closeThreshold:o});i.useEffect(()=>{function w(k){k.key==="Escape"&&E()}return document.addEventListener("keydown",w),()=>document.removeEventListener("keydown",w)},[E]),i.useEffect(()=>{a||E()},[a,E]);const b=u?[...d,u]:d,C=b.map(([w,k])=>`${w},${k}`).join(" ");return R.jsx("div",{ref:y,"data-draw-polygon":"true",className:l,style:{position:"absolute",inset:0,cursor:a?h?"cell":"crosshair":"default",zIndex:30,pointerEvents:a?"auto":"none",...c},...a?g:{},children:d.length>0&&R.jsxs("svg",{viewBox:"0 0 1 1",preserveAspectRatio:"none",style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},children:[d.length>=3&&R.jsx("polygon",{points:d.map(([w,k])=>`${w},${k}`).join(" "),fill:n,fillOpacity:.15,stroke:"none"}),b.length>=2&&R.jsx("polyline",{points:C,fill:"none",stroke:n,strokeWidth:.003,strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:u?"0.015 0.008":void 0}),u&&d.length>=1&&R.jsx("line",{x1:u[0],y1:u[1],x2:d[0][0],y2:d[0][1],stroke:n,strokeWidth:.002,strokeDasharray:"0.015 0.008",strokeLinecap:"round",opacity:h?.9:.35}),d.map(([w,k],f)=>R.jsx("circle",{cx:w,cy:k,r:f===0?.012:.007,fill:f===0&&h?n:"white",stroke:n,strokeWidth:.002},f)),u&&R.jsx("circle",{cx:u[0],cy:u[1],r:.005,fill:h?n:"white",stroke:n,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 Lt({mainImage:t,mainImageAlt:r="Main image",effect:o="elevate",enabled:n=!0,showAll:a=!1,alphaThreshold:c=30,hoverLeaveDelay:l=150,children:s,className:d="",style:u,onHover:h,onActiveChange:E,onSelect:y}){const g=typeof o=="string"?V[o]??V.elevate:o;i.useEffect(()=>{Dt(g)},[g]);const[b,C]=i.useState(()=>new Map),w=i.useCallback($=>{C(D=>{const N=D.get($.id);if(N&&ht(N)===ht($))return D;const F=new Map(D);return F.set($.id,$),F})},[]),k=i.useCallback($=>{C(D=>{if(!D.has($))return D;const N=new Map(D);return N.delete($),N})},[]),f=i.useMemo(()=>({registerCutout:w,unregisterCutout:k}),[w,k]),v=i.useMemo(()=>Array.from(b.values()),[b]),{activeId:x,selectedId:m,hoveredId:M,boundsMap:O,containerRef:B,containerProps:T}=bt(v,n,c,l),S=i.useRef(null),I=i.useRef(null),A=i.useRef(null);i.useEffect(()=>{M!==S.current&&(S.current=M,h?.(M))},[M,h]),i.useEffect(()=>{x!==I.current&&(I.current=x,E?.(x))},[x,E]),i.useEffect(()=>{m!==A.current&&(A.current=m,y?.(m))},[m,y]);const W=a||x!==null,L=i.useMemo(()=>({activeId:x,selectedId:m,hoveredId:M,effect:g,enabled:n,showAll:a,boundsMap:O,isAnyActive:W}),[x,m,M,g,n,a,O,W]);return R.jsx(G.Provider,{value:f,children:R.jsx(Rt.Provider,{value:L,children:R.jsxs("div",{ref:B,className:d,style:{position:"relative",width:"100%",overflow:"hidden",cursor:W&&n?"pointer":"default",...u},...T,children:[R.jsx("img",{src:t,alt:r,draggable:!1,style:{display:"block",width:"100%",height:"auto",userSelect:"none",transition:g.transition,...W&&n?g.mainImageHovered:{}}}),R.jsx("div",{style:{pointerEvents:"none",position:"absolute",inset:0,transition:g.transition,opacity:W&&n?1:0,...g.vignetteStyle}}),s]})})})}const H=Lt;H.Cutout=Yt;H.BBoxCutout=Vt;H.PolygonCutout=Ht;H.Overlay=It;H.DrawPolygon=_t;exports.CutoutOverlay=It;exports.CutoutViewer=H;exports.DrawPolygon=_t;exports.ImageHitTestStrategy=pt;exports.PolygonHitTestStrategy=yt;exports.RectHitTestStrategy=gt;exports.createHitTestStrategy=mt;exports.defineKeyframes=Z;exports.elevateEffect=vt;exports.glowEffect=xt;exports.hoverEffects=V;exports.liftEffect=wt;exports.shimmerEffect=Ct;exports.subtleEffect=kt;exports.traceEffect=Et;exports.useCutout=Nt;exports.useCutoutHitTest=bt;exports.useDrawPolygon=At;
+  }`),Rt={name:"shimmer",transition:J,keyframes:[ft],mainImageHovered:{filter:"brightness(0.35) saturate(0.6)"},vignetteStyle:{background:"radial-gradient(ellipse at center, transparent 20%, rgba(0,0,0,0.5) 100%)"},cutoutActive:{transform:"scale(1.04) translateY(-6px)",filter:"brightness(1.05) contrast(1.02) drop-shadow(0 0 6px rgba(255,255,255,0.12)) drop-shadow(0 12px 32px rgba(0,0,0,0.4))",opacity:1,animation:`${ft.name} 2.4s ease-in-out infinite`},cutoutInactive:{transform:"scale(1)",filter:"brightness(0.35) saturate(0.5)",opacity:.4},cutoutIdle:{transform:"scale(1)",filter:"drop-shadow(0 1px 4px rgba(0, 0, 0, 0.1))",opacity:1},geometryActive:{fill:"rgba(255, 255, 255, 0.1)",stroke:"rgba(255, 255, 255, 0.7)",strokeWidth:0,glow:"0 0 14px rgba(255, 255, 255, 0.35), 0 12px 32px rgba(0, 0, 0, 0.4)"},geometryInactive:{fill:"rgba(255, 255, 255, 0.02)",stroke:"rgba(255, 255, 255, 0.1)",strokeWidth:1},geometryIdle:{fill:"transparent",stroke:"transparent",strokeWidth:1}},F={elevate:kt,glow:Ct,lift:Et,subtle:Mt,trace:St,shimmer:Rt},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;