react-img-cutout 1.2.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

@@ -1,27 +1,29 @@
 /**
- * Contour-tracing utilities for extracting polygon outlines from alpha data.
+ * Contour-tracing utilities for extracting smooth 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.
+ * 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. Build binary grid from alpha threshold
- * 3. Trace the outer boundary using Moore-Neighbor contour tracing
- * 4. Simplify with Ramer–Douglas–Peucker
+ * 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 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.
+ * 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.
  *
- * @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)
+ * Produces curves that pass through every control point with smooth
+ * tangent continuity, eliminating the angular straight-line look.
  */
-export declare function traceContour(alpha: Uint8Array, srcW: number, srcH: number, alphaThreshold?: number, epsilon?: number): [number, number][];
+export declare function contourToSmoothPath(points: Point[]): string;
+export {};

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;
@@ -54,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/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,6 +19,10 @@ 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>;

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

@@ -9,6 +9,10 @@ export interface CutoutViewerContextValue {
     activeId: string | null;
     selectedId: string | null;
     hoveredId: string | null;
+    viewportSize: {
+        width: number;
+        height: number;
+    };
     effect: HoverEffect;
     enabled: boolean;
     showAll: boolean;

package/dist/index.cjs

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