react-img-cutout 1.0.0 → 1.1.0

package/dist/index.js

@@ -1,69 +1,69 @@
-import kt, { useState as tt, useRef as B, useCallback as O, useMemo as D, useEffect as N, useContext as F, createContext as at } from "react";
-var Q = { exports: {} }, G = {};
-var ct;
+import kt, { useState as F, useRef as V, useCallback as P, useMemo as B, useEffect as O, useContext as H, createContext as it } from "react";
+var rt = { exports: {} }, G = {};
+var ut;
 function Et() {
-  if (ct) return G;
-  ct = 1;
+  if (ut) return G;
+  ut = 1;
   var t = /* @__PURE__ */ Symbol.for("react.transitional.element"), r = /* @__PURE__ */ Symbol.for("react.fragment");
-  function o(n, a, l) {
-    var i = null;
-    if (l !== void 0 && (i = "" + l), a.key !== void 0 && (i = "" + a.key), "key" in a) {
-      l = {};
-      for (var s in a)
-        s !== "key" && (l[s] = a[s]);
-    } else l = a;
-    return a = l.ref, {
+  function o(n, i, c) {
+    var a = null;
+    if (c !== void 0 && (a = "" + c), i.key !== void 0 && (a = "" + i.key), "key" in i) {
+      c = {};
+      for (var s in i)
+        s !== "key" && (c[s] = i[s]);
+    } else c = i;
+    return i = c.ref, {
       $$typeof: t,
       type: n,
-      key: i,
-      ref: a !== void 0 ? a : null,
-      props: l
+      key: a,
+      ref: i !== void 0 ? i : null,
+      props: c
     };
   }
   return G.Fragment = r, G.jsx = o, G.jsxs = o, G;
 }
-var X = {};
+var q = {};
 var ft;
 function It() {
   return ft || (ft = 1, process.env.NODE_ENV !== "production" && (function() {
     function t(e) {
       if (e == null) return null;
       if (typeof e == "function")
-        return e.$$typeof === y ? null : e.displayName || e.name || null;
+        return e.$$typeof === R ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
-        case S:
+        case x:
           return "Fragment";
-        case m:
+        case u:
           return "Profiler";
-        case T:
+        case w:
           return "StrictMode";
         case M:
           return "Suspense";
-        case V:
+        case D:
           return "SuspenseList";
-        case k:
+        case _:
           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 w:
+          case E:
             return "Portal";
-          case P:
+          case v:
             return e.displayName || "Context";
-          case j:
-            return (e._context.displayName || "Context") + ".Consumer";
           case b:
-            var c = e.render;
-            return e = e.displayName, e || (e = c.displayName || c.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+            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 z:
-            return c = e.displayName || null, c !== null ? c : t(e.type) || "Memo";
-          case E:
-            c = e._payload, e = e._init;
+            return p = e.displayName || null, p !== null ? p : t(e.type) || "Memo";
+          case j:
+            p = e._payload, e = e._init;
             try {
-              return t(e(c));
+              return t(e(p));
             } catch {
             }
         }
@@ -75,74 +75,74 @@ function It() {
     function o(e) {
       try {
         r(e);
-        var c = !1;
+        var p = !1;
       } catch {
-        c = !0;
+        p = !0;
       }
-      if (c) {
-        c = console;
-        var x = c.error, I = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return x.call(
-          c,
+      if (p) {
+        p = console;
+        var C = p.error, T = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return C.call(
+          p,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          I
+          T
         ), r(e);
       }
     }
     function n(e) {
-      if (e === S) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === E)
+      if (e === x) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === j)
         return "<...>";
       try {
-        var c = t(e);
-        return c ? "<" + c + ">" : "<...>";
+        var p = t(e);
+        return p ? "<" + p + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function a() {
-      var e = v.A;
+    function i() {
+      var e = A.A;
       return e === null ? null : e.getOwner();
     }
-    function l() {
+    function c() {
       return Error("react-stack-top-frame");
     }
-    function i(e) {
-      if ($.call(e, "key")) {
-        var c = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (c && c.isReactWarning) return !1;
+    function a(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, c) {
-      function x() {
-        W || (W = !0, console.error(
+    function s(e, p) {
+      function C() {
+        N || (N = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-          c
+          p
         ));
       }
-      x.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: x,
+      C.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: C,
         configurable: !0
       });
     }
-    function d() {
+    function f() {
       var e = t(this.type);
       return Y[e] || (Y[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, c, x, I, Z, nt) {
-      var A = x.ref;
+    function l(e, p, C, T, et, ot) {
+      var S = C.ref;
       return e = {
-        $$typeof: g,
+        $$typeof: y,
         type: e,
-        key: c,
-        props: x,
-        _owner: I
-      }, (A !== void 0 ? A : null) !== null ? Object.defineProperty(e, "ref", {
+        key: p,
+        props: C,
+        _owner: T
+      }, (S !== void 0 ? S : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
-        get: d
+        get: f
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -157,128 +157,128 @@ function It() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: Z
+        value: et
       }), Object.defineProperty(e, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: nt
+        value: ot
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function p(e, c, x, I, Z, nt) {
-      var A = c.children;
-      if (A !== void 0)
-        if (I)
-          if (L(A)) {
-            for (I = 0; I < A.length; I++)
-              R(A[I]);
-            Object.freeze && Object.freeze(A);
+    function d(e, p, C, T, et, ot) {
+      var S = p.children;
+      if (S !== void 0)
+        if (T)
+          if (U(S)) {
+            for (T = 0; T < S.length; T++)
+              k(S[T]);
+            Object.freeze && Object.freeze(S);
           } 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 R(A);
-      if ($.call(c, "key")) {
-        A = t(e);
-        var H = Object.keys(c).filter(function(wt) {
+        else k(S);
+      if (W.call(p, "key")) {
+        S = t(e);
+        var L = Object.keys(p).filter(function(wt) {
           return wt !== "key";
         });
-        I = 0 < H.length ? "{key: someKey, " + H.join(": ..., ") + ": ...}" : "{key: someKey}", ut[A + I] || (H = 0 < H.length ? "{" + H.join(": ..., ") + ": ...}" : "{}", console.error(
+        T = 0 < L.length ? "{key: someKey, " + L.join(": ..., ") + ": ...}" : "{key: someKey}", ct[S + T] || (L = 0 < L.length ? "{" + L.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
-          I,
-          A,
-          H,
-          A
-        ), ut[A + I] = !0);
+          T,
+          S,
+          L,
+          S
+        ), ct[S + T] = !0);
       }
-      if (A = null, x !== void 0 && (o(x), A = "" + x), i(c) && (o(c.key), A = "" + c.key), "key" in c) {
-        x = {};
-        for (var st in c)
-          st !== "key" && (x[st] = c[st]);
-      } else x = c;
-      return A && s(
-        x,
+      if (S = null, C !== void 0 && (o(C), S = "" + C), a(p) && (o(p.key), S = "" + p.key), "key" in p) {
+        C = {};
+        for (var st in p)
+          st !== "key" && (C[st] = p[st]);
+      } else C = p;
+      return S && s(
+        C,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), u(
+      ), l(
         e,
-        A,
-        x,
-        a(),
-        Z,
-        nt
+        S,
+        C,
+        i(),
+        et,
+        ot
       );
     }
-    function R(e) {
-      h(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === E && (e._payload.status === "fulfilled" ? h(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    function k(e) {
+      g(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === j && (e._payload.status === "fulfilled" ? g(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
     }
-    function h(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === g;
+    function g(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === y;
     }
-    var f = kt, g = /* @__PURE__ */ Symbol.for("react.transitional.element"), w = /* @__PURE__ */ Symbol.for("react.portal"), S = /* @__PURE__ */ Symbol.for("react.fragment"), T = /* @__PURE__ */ Symbol.for("react.strict_mode"), m = /* @__PURE__ */ Symbol.for("react.profiler"), j = /* @__PURE__ */ Symbol.for("react.consumer"), P = /* @__PURE__ */ Symbol.for("react.context"), b = /* @__PURE__ */ Symbol.for("react.forward_ref"), M = /* @__PURE__ */ Symbol.for("react.suspense"), V = /* @__PURE__ */ Symbol.for("react.suspense_list"), z = /* @__PURE__ */ Symbol.for("react.memo"), E = /* @__PURE__ */ Symbol.for("react.lazy"), k = /* @__PURE__ */ Symbol.for("react.activity"), y = /* @__PURE__ */ Symbol.for("react.client.reference"), v = f.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, $ = Object.prototype.hasOwnProperty, L = Array.isArray, _ = console.createTask ? console.createTask : function() {
+    var h = kt, y = /* @__PURE__ */ Symbol.for("react.transitional.element"), E = /* @__PURE__ */ Symbol.for("react.portal"), x = /* @__PURE__ */ Symbol.for("react.fragment"), w = /* @__PURE__ */ Symbol.for("react.strict_mode"), u = /* @__PURE__ */ Symbol.for("react.profiler"), b = /* @__PURE__ */ Symbol.for("react.consumer"), v = /* @__PURE__ */ Symbol.for("react.context"), m = /* @__PURE__ */ Symbol.for("react.forward_ref"), M = /* @__PURE__ */ Symbol.for("react.suspense"), D = /* @__PURE__ */ Symbol.for("react.suspense_list"), z = /* @__PURE__ */ Symbol.for("react.memo"), j = /* @__PURE__ */ Symbol.for("react.lazy"), _ = /* @__PURE__ */ Symbol.for("react.activity"), R = /* @__PURE__ */ Symbol.for("react.client.reference"), A = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, W = Object.prototype.hasOwnProperty, U = Array.isArray, $ = console.createTask ? console.createTask : function() {
       return null;
     };
-    f = {
+    h = {
       react_stack_bottom_frame: function(e) {
         return e();
       }
     };
-    var W, Y = {}, U = f.react_stack_bottom_frame.bind(
-      f,
-      l
-    )(), lt = _(n(l)), ut = {};
-    X.Fragment = S, X.jsx = function(e, c, x) {
-      var I = 1e4 > v.recentlyCreatedOwnerStacks++;
-      return p(
+    var N, Y = {}, X = h.react_stack_bottom_frame.bind(
+      h,
+      c
+    )(), lt = $(n(c)), ct = {};
+    q.Fragment = x, q.jsx = function(e, p, C) {
+      var T = 1e4 > A.recentlyCreatedOwnerStacks++;
+      return d(
         e,
-        c,
-        x,
+        p,
+        C,
         !1,
-        I ? Error("react-stack-top-frame") : U,
-        I ? _(n(e)) : lt
+        T ? Error("react-stack-top-frame") : X,
+        T ? $(n(e)) : lt
       );
-    }, X.jsxs = function(e, c, x) {
-      var I = 1e4 > v.recentlyCreatedOwnerStacks++;
-      return p(
+    }, q.jsxs = function(e, p, C) {
+      var T = 1e4 > A.recentlyCreatedOwnerStacks++;
+      return d(
         e,
-        c,
-        x,
+        p,
+        C,
         !0,
-        I ? Error("react-stack-top-frame") : U,
-        I ? _(n(e)) : lt
+        T ? Error("react-stack-top-frame") : X,
+        T ? $(n(e)) : lt
       );
     };
-  })()), X;
+  })()), q;
 }
 var dt;
-function At() {
-  return dt || (dt = 1, process.env.NODE_ENV === "production" ? Q.exports = Et() : Q.exports = It()), Q.exports;
+function Rt() {
+  return dt || (dt = 1, process.env.NODE_ENV === "production" ? rt.exports = Et() : rt.exports = It()), rt.exports;
 }
-var C = At();
-function Rt(t, r) {
+var I = Rt();
+function At(t, r) {
   const o = new Uint8Array(r);
   for (let n = 0; n < r; n++)
     o[n] = t[n * 4 + 3];
   return o;
 }
-function _t(t, r, o, n) {
+function Ct(t, r, o, n) {
   if (r <= 0 || o <= 0) return { x: 0, y: 0, w: 1, h: 1 };
-  let a = r, l = o, i = 0, s = 0, d = !1;
-  for (let u = 0; u < o; u++)
-    for (let p = 0; p < r; p++)
-      t[u * r + p] > n && (p < a && (a = p), p > i && (i = p), u < l && (l = u), u > s && (s = u), d = !0);
-  return d ? {
-    x: a / r,
-    y: l / o,
-    w: (i - a + 1) / r,
-    h: (s - l + 1) / o
+  let i = r, c = o, a = 0, s = 0, f = !1;
+  for (let l = 0; l < o; l++)
+    for (let d = 0; d < r; d++)
+      t[l * r + d] > n && (d < i && (i = d), d > a && (a = d), l < c && (c = l), l > s && (s = l), f = !0);
+  return f ? {
+    x: i / r,
+    y: c / o,
+    w: (a - i + 1) / r,
+    h: (s - c + 1) / o
   } : { x: 0, y: 0, w: 1, h: 1 };
 }
-class Ct {
+class _t {
   id;
   bounds = { x: 0, y: 0, w: 1, h: 1 };
   /** URL of the cutout mask image */
@@ -309,19 +309,19 @@ class Ct {
    */
   async prepare() {
     const r = new Image();
-    r.crossOrigin = "anonymous", r.src = this.src, await new Promise((i) => {
-      r.onload = () => i(), r.onerror = () => i();
+    r.crossOrigin = "anonymous", r.src = this.src, await new Promise((a) => {
+      r.onload = () => a(), r.onerror = () => a();
     });
     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 l = a.getContext("2d", { willReadFrequently: !0 });
-    if (l)
+    const i = document.createElement("canvas");
+    i.width = o, i.height = n;
+    const c = i.getContext("2d", { willReadFrequently: !0 });
+    if (c)
       try {
-        l.drawImage(r, 0, 0);
-        const i = l.getImageData(0, 0, o, n);
-        this.alpha = Rt(i.data, o * n), this.width = o, this.height = n, this.bounds = _t(this.alpha, o, n, this.threshold);
+        c.drawImage(r, 0, 0);
+        const a = c.getImageData(0, 0, o, n);
+        this.alpha = At(a.data, o * n), this.width = o, this.height = n, this.bounds = Ct(this.alpha, o, n, this.threshold);
       } catch {
         this.alpha = new Uint8Array(0);
       }
@@ -345,14 +345,14 @@ class Ct {
     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))), l = Math.min(
+    const i = 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[l * this.width + a] > this.threshold;
+    return this.alpha[c * this.width + i] > this.threshold;
   }
 }
-class Tt {
+class jt {
   id;
   bounds;
   constructor(r) {
@@ -363,28 +363,28 @@ class Tt {
     return r >= n.x && r <= n.x + n.w && o >= n.y && o <= n.y + n.h;
   }
 }
-function St(t, r, o) {
+function Tt(t, r, o) {
   let n = !1;
-  for (let a = 0, l = o.length - 1; a < o.length; l = a++) {
-    const i = o[a][0], s = o[a][1], d = o[l][0], u = o[l][1];
-    s > r != u > r && t < (d - i) * (r - s) / (u - s) + i && (n = !n);
+  for (let i = 0, c = o.length - 1; i < o.length; c = i++) {
+    const a = o[i][0], s = o[i][1], f = o[c][0], l = o[c][1];
+    s > r != l > r && t < (f - a) * (r - s) / (l - s) + a && (n = !n);
   }
   return n;
 }
-class jt {
+class St {
   id;
   bounds;
   points;
   constructor(r) {
     this.id = r.id, this.points = r.points;
-    let o = 1 / 0, n = 1 / 0, a = -1 / 0, l = -1 / 0;
-    for (const [i, s] of r.points)
-      i < o && (o = i), i > a && (a = i), s < n && (n = s), s > l && (l = s);
+    let o = 1 / 0, n = 1 / 0, i = -1 / 0, c = -1 / 0;
+    for (const [a, s] of r.points)
+      a < o && (o = a), a > i && (i = a), s < n && (n = s), s > c && (c = s);
     this.bounds = {
       x: o,
       y: n,
-      w: a - o,
-      h: l - n
+      w: i - o,
+      h: c - n
     };
   }
   /**
@@ -401,20 +401,20 @@ class jt {
    */
   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 : St(r, o, this.points);
+    return r < n.x || r > n.x + n.w || o < n.y || o > n.y + n.h ? !1 : Tt(r, o, this.points);
   }
 }
-function $t(t, r) {
+function Pt(t, r) {
   switch (t.type) {
     case "image":
-      return new Ct(t, r);
+      return new _t(t, r);
     case "bbox":
-      return new Tt(t);
-    case "polygon":
       return new jt(t);
+    case "polygon":
+      return new St(t);
   }
 }
-function Pt(t) {
+function $t(t) {
   switch (t.type) {
     case "image":
       return `${t.id}:image:${t.src}:${t.label ?? ""}`;
@@ -425,102 +425,102 @@ function Pt(t) {
   }
 }
 function Mt(t, r = !0, o = 30, n = 150) {
-  const [a, l] = tt(null), [i, s] = tt(null), d = B(null), u = B([]), [p, R] = tt({}), h = Math.min(255, Math.max(0, o)), f = B(null), g = O(() => {
-    f.current === null && (f.current = setTimeout(() => {
-      f.current = null, l(null);
+  const [i, c] = F(null), [a, s] = F(null), f = V(null), l = V([]), [d, k] = F({}), g = Math.min(255, Math.max(0, o)), h = V(null), y = P(() => {
+    h.current === null && (h.current = setTimeout(() => {
+      h.current = null, c(null);
     }, n));
-  }, [n]), w = O(() => {
-    f.current !== null && (clearTimeout(f.current), f.current = null);
-  }, []), S = t.map(Pt).join("|"), T = D(() => t, [S]);
-  N(() => {
+  }, [n]), E = P(() => {
+    h.current !== null && (clearTimeout(h.current), h.current = null);
+  }, []), x = t.map($t).join("|"), w = B(() => t, [x]);
+  O(() => {
     if (!r) {
-      u.current = [];
+      l.current = [];
       return;
     }
-    let E = !1, k = [];
-    async function y() {
-      const v = [], $ = {};
-      for (const L of T) {
-        const _ = $t(L, h);
-        if (_.prepare && await _.prepare(), E) return;
-        v.push(_), $[_.id] = _.bounds;
+    let j = !1, _ = [];
+    async function R() {
+      const A = [], W = {};
+      for (const U of w) {
+        const $ = Pt(U, g);
+        if ($.prepare && await $.prepare(), j) return;
+        A.push($), W[$.id] = $.bounds;
       }
-      E || (k = v, u.current = v, R($));
+      j || (_ = A, l.current = A, k(W));
     }
-    return y(), () => {
-      E = !0;
-      for (const v of k)
-        v.dispose?.();
+    return R(), () => {
+      j = !0;
+      for (const A of _)
+        A.dispose?.();
     };
-  }, [T, r, h]);
-  const m = O(
-    (E, k) => {
-      const y = u.current;
-      for (let v = y.length - 1; v >= 0; v--)
-        if (y[v].hitTest(E, k))
-          return y[v].id;
+  }, [w, r, g]);
+  const u = P(
+    (j, _) => {
+      const R = l.current;
+      for (let A = R.length - 1; A >= 0; A--)
+        if (R[A].hitTest(j, _))
+          return R[A].id;
       return null;
     },
     []
-  ), j = O(
-    (E) => {
-      const k = d.current;
-      if (!k) return null;
-      const y = k.getBoundingClientRect(), v = (E.clientX - y.left) / y.width, $ = (E.clientY - y.top) / y.height;
-      return v < 0 || v > 1 || $ < 0 || $ > 1 ? null : { nx: v, ny: $ };
+  ), b = P(
+    (j) => {
+      const _ = f.current;
+      if (!_) return null;
+      const R = _.getBoundingClientRect(), A = (j.clientX - R.left) / R.width, W = (j.clientY - R.top) / R.height;
+      return A < 0 || A > 1 || W < 0 || W > 1 ? null : { nx: A, ny: W };
     },
     []
-  ), P = O(
-    (E) => {
+  ), v = P(
+    (j) => {
       if (!r) return;
-      const k = j(E);
-      if (!k) {
-        g();
+      const _ = b(j);
+      if (!_) {
+        y();
         return;
       }
-      const y = m(k.nx, k.ny);
-      if (y === null) {
-        if (E.target?.closest('[data-cutout-overlay="true"]')) {
-          w();
+      const R = u(_.nx, _.ny);
+      if (R === null) {
+        if (j.target?.closest('[data-cutout-overlay="true"]')) {
+          E();
           return;
         }
-        g();
+        y();
         return;
       }
-      w(), l(y);
+      E(), c(R);
     },
-    [r, j, m, g, w]
-  ), b = O(() => {
-    g();
-  }, [g]), M = O(
-    (E) => {
+    [r, b, u, y, E]
+  ), m = P(() => {
+    y();
+  }, [y]), M = P(
+    (j) => {
       if (!r) return;
-      const k = j(E);
-      if (!k) {
+      const _ = b(j);
+      if (!_) {
         s(null);
         return;
       }
-      const y = m(k.nx, k.ny);
-      s(y === i || y === null ? null : y);
+      const R = u(_.nx, _.ny);
+      s(R === a || R === null ? null : R);
     },
-    [r, j, m, i]
-  ), V = i ?? a, z = r ? p : {};
-  return N(() => () => {
-    w();
-  }, [w]), {
-    hoveredId: a,
-    selectedId: i,
-    activeId: V,
+    [r, b, u, a]
+  ), D = a ?? i, z = r ? d : {};
+  return O(() => () => {
+    E();
+  }, [E]), {
+    hoveredId: i,
+    selectedId: a,
+    activeId: D,
     boundsMap: z,
-    containerRef: d,
+    containerRef: f,
     containerProps: {
-      onPointerMove: P,
-      onPointerLeave: b,
+      onPointerMove: v,
+      onPointerLeave: m,
       onClick: M
     }
   };
 }
-function it(t, r) {
+function at(t, r) {
   return { name: t, css: r };
 }
 const pt = /* @__PURE__ */ new Set();
@@ -535,9 +535,9 @@ ${r.css}
 }`, document.head.appendChild(o);
     }
 }
-const J = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Ot = {
+const K = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Ot = {
   name: "elevate",
-  transition: J,
+  transition: K,
   mainImageHovered: {
     filter: "brightness(0.45) saturate(0.7)"
   },
@@ -575,9 +575,9 @@ const J = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Ot = {
     stroke: "transparent",
     strokeWidth: 1
   }
-}, Nt = {
+}, Dt = {
   name: "glow",
-  transition: J,
+  transition: K,
   mainImageHovered: {
     filter: "brightness(0.55) saturate(0.8)"
   },
@@ -615,9 +615,9 @@ const J = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Ot = {
     stroke: "transparent",
     strokeWidth: 1
   }
-}, Yt = {
+}, Nt = {
   name: "lift",
-  transition: J,
+  transition: K,
   mainImageHovered: {
     filter: "brightness(0.4)"
   },
@@ -655,7 +655,7 @@ const J = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Ot = {
     stroke: "transparent",
     strokeWidth: 1
   }
-}, Dt = {
+}, Yt = {
   name: "subtle",
   transition: "all 0.3s ease",
   mainImageHovered: {
@@ -694,11 +694,11 @@ const J = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Ot = {
     stroke: "transparent",
     strokeWidth: 1
   }
-}, ht = it(
+}, ht = at(
   "_ricut-trace-stroke",
   `from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -1; }`
-), gt = it(
+), gt = at(
   "_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)); }
@@ -707,7 +707,7 @@ const J = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Ot = {
    100% { filter: drop-shadow(-3px -3px 6px rgba(255,255,255,0.6)) drop-shadow(0 0 2px rgba(255,255,255,0.15)); }`
 ), Vt = {
   name: "trace",
-  transition: J,
+  transition: K,
   keyframes: [ht, gt],
   mainImageHovered: {
     filter: "brightness(0.35) saturate(0.5)"
@@ -749,7 +749,7 @@ const J = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Ot = {
     stroke: "transparent",
     strokeWidth: 1
   }
-}, mt = it(
+}, mt = at(
   "_ricut-shimmer",
   `0%, 100% {
     filter: brightness(1.05) contrast(1.02)
@@ -766,9 +766,9 @@ const J = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Ot = {
             drop-shadow(0 0 6px rgba(255, 255, 255, 0.12))
             drop-shadow(0 12px 32px rgba(0, 0, 0, 0.4));
   }`
-), Ht = {
+), Bt = {
   name: "shimmer",
-  transition: J,
+  transition: K,
   keyframes: [mt],
   mainImageHovered: {
     filter: "brightness(0.35) saturate(0.6)"
@@ -810,48 +810,48 @@ const J = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Ot = {
     stroke: "transparent",
     strokeWidth: 1
   }
-}, q = {
+}, J = {
   elevate: Ot,
-  glow: Nt,
-  lift: Yt,
-  subtle: Dt,
+  glow: Dt,
+  lift: Nt,
+  subtle: Yt,
   trace: Vt,
-  shimmer: Ht
-}, et = at(null), xt = at(null);
-function rt() {
-  const t = F(xt);
+  shimmer: Bt
+}, Z = it(null), xt = it(null);
+function nt() {
+  const t = H(xt);
   if (!t) throw new Error("Must be used inside <CutoutViewer>");
   return t;
 }
-const K = at(null);
-function qt() {
-  const t = F(K);
+const Q = it(null);
+function Kt() {
+  const t = H(Q);
   if (!t)
     throw new Error("useCutout must be used inside <CutoutViewer.Cutout>");
   return t;
 }
-function Bt({ id: t, src: r, label: o, effect: n, children: a, renderLayer: l }) {
-  const i = F(et), s = rt();
-  if (!i)
+function Ht({ id: t, src: r, label: o, effect: n, children: i, renderLayer: c }) {
+  const a = H(Z), s = nt();
+  if (!a)
     throw new Error("<CutoutViewer.Cutout> must be used inside <CutoutViewer>");
-  N(() => (i.registerCutout({ type: "image", id: t, src: r, label: o }), () => i.unregisterCutout(t)), [t, r, o, i]);
-  const d = n ? typeof n == "string" ? q[n] ?? s.effect : n : s.effect, u = s.activeId === t, p = s.hoveredId === t, R = s.selectedId === t, h = { x: 0, y: 0, w: 1, h: 1 }, f = s.boundsMap[t] ?? h;
-  let g;
-  !s.enabled || !s.isAnyActive && !s.showAll ? g = d.cutoutIdle : s.showAll || u ? g = d.cutoutActive : g = d.cutoutInactive;
-  const w = D(
+  O(() => (a.registerCutout({ type: "image", id: t, src: r, label: o }), () => a.unregisterCutout(t)), [t, r, o, a]);
+  const f = n ? typeof n == "string" ? J[n] ?? s.effect : n : s.effect, l = s.activeId === t, d = s.hoveredId === t, k = s.selectedId === t, g = { x: 0, y: 0, w: 1, h: 1 }, h = s.boundsMap[t] ?? g;
+  let y;
+  !s.enabled || !s.isAnyActive && !s.showAll ? y = f.cutoutIdle : s.showAll || l ? y = f.cutoutActive : y = f.cutoutInactive;
+  const E = B(
     () => ({
       id: t,
       label: o,
-      bounds: f,
-      isActive: u,
-      isHovered: p,
-      isSelected: R,
-      effect: d
+      bounds: h,
+      isActive: l,
+      isHovered: d,
+      isSelected: k,
+      effect: f
     }),
-    [t, o, f, u, p, R, d]
+    [t, o, h, l, d, k, f]
   );
-  return /* @__PURE__ */ C.jsxs(K.Provider, { value: w, children: [
-    /* @__PURE__ */ C.jsx(
+  return /* @__PURE__ */ I.jsxs(Q.Provider, { value: E, children: [
+    /* @__PURE__ */ I.jsx(
       "div",
       {
         "data-cutout-id": t,
@@ -859,11 +859,11 @@ function Bt({ id: t, src: r, label: o, effect: n, children: a, renderLayer: l })
           pointerEvents: "none",
           position: "absolute",
           inset: 0,
-          zIndex: u ? 20 : 10,
-          transition: d.transition,
-          ...g
+          zIndex: l ? 20 : 10,
+          transition: f.transition,
+          ...y
         },
-        children: l ? l({ isActive: u, isHovered: p, isSelected: R, bounds: f, effect: d }) : /* @__PURE__ */ C.jsx(
+        children: c ? c({ isActive: l, isHovered: d, isSelected: k, bounds: h, effect: f }) : /* @__PURE__ */ I.jsx(
           "img",
           {
             src: r,
@@ -879,49 +879,49 @@ function Bt({ id: t, src: r, label: o, effect: n, children: a, renderLayer: l })
         )
       }
     ),
-    a
+    i
   ] });
 }
-function bt(t) {
+function yt(t) {
   const { filter: r, ...o } = t;
   return o;
 }
-function Ft({
+function Lt({
   id: t,
   bounds: r,
   label: o,
   effect: n,
-  children: a,
-  renderLayer: l
+  children: i,
+  renderLayer: c
 }) {
-  const i = F(et), s = rt();
-  if (!i)
+  const a = H(Z), s = nt();
+  if (!a)
     throw new Error(
       "<CutoutViewer.BBoxCutout> must be used inside <CutoutViewer>"
     );
-  const { x: d, y: u, w: p, h: R } = r;
-  N(() => (i.registerCutout({ type: "bbox", id: t, bounds: { x: d, y: u, w: p, h: R }, label: o }), () => i.unregisterCutout(t)), [t, d, u, p, R, o, i]);
-  const h = n ? typeof n == "string" ? q[n] ?? s.effect : n : s.effect, f = s.activeId === t, g = s.hoveredId === t, w = s.selectedId === t, S = { x: 0, y: 0, w: 1, h: 1 }, T = s.boundsMap[t] ?? S;
-  let m, j;
-  !s.enabled || !s.isAnyActive && !s.showAll ? (j = { ...h.cutoutIdle, filter: "none", opacity: 0 }, m = h.geometryIdle) : s.showAll || f ? (j = bt(h.cutoutActive), m = h.geometryActive) : (j = bt(h.cutoutInactive), m = h.geometryInactive);
-  const b = m ?? {
+  const { x: f, y: l, w: d, h: k } = r;
+  O(() => (a.registerCutout({ type: "bbox", id: t, bounds: { x: f, y: l, w: d, h: k }, label: o }), () => a.unregisterCutout(t)), [t, f, l, d, k, o, a]);
+  const g = n ? typeof n == "string" ? J[n] ?? s.effect : n : s.effect, h = s.activeId === t, y = s.hoveredId === t, E = s.selectedId === t, x = { x: 0, y: 0, w: 1, h: 1 }, w = s.boundsMap[t] ?? x;
+  let u, b;
+  !s.enabled || !s.isAnyActive && !s.showAll ? (b = { ...g.cutoutIdle, filter: "none", opacity: 0 }, u = g.geometryIdle) : s.showAll || h ? (b = yt(g.cutoutActive), u = g.geometryActive) : (b = yt(g.cutoutInactive), u = g.geometryInactive);
+  const m = u ?? {
     fill: "rgba(37, 99, 235, 0.15)",
     stroke: "rgba(37, 99, 235, 0.6)",
     strokeWidth: 2
-  }, M = D(
+  }, M = B(
     () => ({
       id: t,
       label: o,
-      bounds: T,
-      isActive: f,
-      isHovered: g,
-      isSelected: w,
-      effect: h
+      bounds: w,
+      isActive: h,
+      isHovered: y,
+      isSelected: E,
+      effect: g
     }),
-    [t, o, T, f, g, w, h]
+    [t, o, w, h, y, E, g]
   );
-  return /* @__PURE__ */ C.jsxs(K.Provider, { value: M, children: [
-    /* @__PURE__ */ C.jsx(
+  return /* @__PURE__ */ I.jsxs(Q.Provider, { value: M, children: [
+    /* @__PURE__ */ I.jsx(
       "div",
       {
         "data-cutout-id": t,
@@ -929,11 +929,11 @@ function Ft({
           pointerEvents: "none",
           position: "absolute",
           inset: 0,
-          zIndex: f ? 20 : 10,
-          transition: h.transition,
-          ...j
+          zIndex: h ? 20 : 10,
+          transition: g.transition,
+          ...b
         },
-        children: l ? l({ isActive: f, isHovered: g, isSelected: w, bounds: T, effect: h }) : /* @__PURE__ */ C.jsx(
+        children: c ? c({ isActive: h, isHovered: y, isSelected: E, bounds: w, effect: g }) : /* @__PURE__ */ I.jsx(
           "svg",
           {
             viewBox: "0 0 1 1",
@@ -944,25 +944,25 @@ function Ft({
               width: "100%",
               height: "100%",
               overflow: "visible",
-              filter: b.glow ? `drop-shadow(${b.glow.split(",")[0]?.trim() ?? ""})` : "none"
+              filter: m.glow ? `drop-shadow(${m.glow.split(",")[0]?.trim() ?? ""})` : "none"
             },
-            children: /* @__PURE__ */ C.jsx(
+            children: /* @__PURE__ */ I.jsx(
               "rect",
               {
-                x: T.x,
-                y: T.y,
-                width: T.w,
-                height: T.h,
+                x: w.x,
+                y: w.y,
+                width: w.w,
+                height: w.h,
                 rx: 4e-3,
-                fill: b.fill,
-                stroke: b.stroke,
-                strokeWidth: (b.strokeWidth ?? 2) * 15e-4,
-                strokeLinecap: b.strokeDasharray ? "round" : void 0,
-                strokeDasharray: b.strokeDasharray,
-                pathLength: b.strokeDasharray ? 1 : void 0,
+                fill: m.fill,
+                stroke: m.stroke,
+                strokeWidth: (m.strokeWidth ?? 2) * 15e-4,
+                strokeLinecap: m.strokeDasharray ? "round" : void 0,
+                strokeDasharray: m.strokeDasharray,
+                pathLength: m.strokeDasharray ? 1 : void 0,
                 style: {
-                  transition: h.transition,
-                  animation: b.animation
+                  transition: g.transition,
+                  animation: m.animation
                 }
               }
             )
@@ -970,49 +970,49 @@ function Ft({
         )
       }
     ),
-    a
+    i
   ] });
 }
-function yt(t) {
+function bt(t) {
   const { filter: r, ...o } = t;
   return o;
 }
-function zt({
+function Ft({
   id: t,
   points: r,
   label: o,
   effect: n,
-  children: a,
-  renderLayer: l
+  children: i,
+  renderLayer: c
 }) {
-  const i = F(et), s = rt();
-  if (!i)
+  const a = H(Z), s = nt();
+  if (!a)
     throw new Error(
       "<CutoutViewer.PolygonCutout> must be used inside <CutoutViewer>"
     );
-  const d = r.flat().join(",");
-  N(() => (i.registerCutout({ type: "polygon", id: t, points: r, label: o }), () => i.unregisterCutout(t)), [t, d, o, i]);
-  const u = n ? typeof n == "string" ? q[n] ?? s.effect : n : s.effect, p = s.activeId === t, R = s.hoveredId === t, h = s.selectedId === t, f = { x: 0, y: 0, w: 1, h: 1 }, g = s.boundsMap[t] ?? f;
-  let w, S;
-  !s.enabled || !s.isAnyActive && !s.showAll ? (S = { ...u.cutoutIdle, filter: "none", opacity: 0 }, w = u.geometryIdle) : s.showAll || p ? (S = yt(u.cutoutActive), w = u.geometryActive) : (S = yt(u.cutoutInactive), w = u.geometryInactive);
-  const m = w ?? {
+  const f = r.flat().join(",");
+  O(() => (a.registerCutout({ type: "polygon", id: t, points: r, label: o }), () => a.unregisterCutout(t)), [t, f, o, a]);
+  const l = n ? typeof n == "string" ? J[n] ?? s.effect : n : s.effect, d = s.activeId === t, k = s.hoveredId === t, g = s.selectedId === t, h = { x: 0, y: 0, w: 1, h: 1 }, y = s.boundsMap[t] ?? h;
+  let E, x;
+  !s.enabled || !s.isAnyActive && !s.showAll ? (x = { ...l.cutoutIdle, filter: "none", opacity: 0 }, E = l.geometryIdle) : s.showAll || d ? (x = bt(l.cutoutActive), E = l.geometryActive) : (x = bt(l.cutoutInactive), E = l.geometryInactive);
+  const u = E ?? {
     fill: "rgba(37, 99, 235, 0.15)",
     stroke: "rgba(37, 99, 235, 0.6)",
     strokeWidth: 2
-  }, j = D(
+  }, b = B(
     () => ({
       id: t,
       label: o,
-      bounds: g,
-      isActive: p,
-      isHovered: R,
-      isSelected: h,
-      effect: u
+      bounds: y,
+      isActive: d,
+      isHovered: k,
+      isSelected: g,
+      effect: l
     }),
-    [t, o, g, p, R, h, u]
+    [t, o, y, d, k, g, l]
   );
-  return /* @__PURE__ */ C.jsxs(K.Provider, { value: j, children: [
-    /* @__PURE__ */ C.jsx(
+  return /* @__PURE__ */ I.jsxs(Q.Provider, { value: b, children: [
+    /* @__PURE__ */ I.jsx(
       "div",
       {
         "data-cutout-id": t,
@@ -1020,11 +1020,11 @@ function zt({
           pointerEvents: "none",
           position: "absolute",
           inset: 0,
-          zIndex: p ? 20 : 10,
-          transition: u.transition,
-          ...S
+          zIndex: d ? 20 : 10,
+          transition: l.transition,
+          ...x
         },
-        children: l ? l({ isActive: p, isHovered: R, isSelected: h, bounds: g, effect: u }) : /* @__PURE__ */ C.jsx(
+        children: c ? c({ isActive: d, isHovered: k, isSelected: g, bounds: y, effect: l }) : /* @__PURE__ */ I.jsx(
           "svg",
           {
             viewBox: "0 0 1 1",
@@ -1035,22 +1035,22 @@ function zt({
               width: "100%",
               height: "100%",
               overflow: "visible",
-              filter: m.glow ? `drop-shadow(${m.glow.split(",")[0]?.trim() ?? ""})` : "none"
+              filter: u.glow ? `drop-shadow(${u.glow.split(",")[0]?.trim() ?? ""})` : "none"
             },
-            children: /* @__PURE__ */ C.jsx(
+            children: /* @__PURE__ */ I.jsx(
               "polygon",
               {
-                points: r.map(([P, b]) => `${P},${b}`).join(" "),
-                fill: m.fill,
-                stroke: m.stroke,
-                strokeWidth: (m.strokeWidth ?? 2) * 15e-4,
+                points: r.map(([v, m]) => `${v},${m}`).join(" "),
+                fill: u.fill,
+                stroke: u.stroke,
+                strokeWidth: (u.strokeWidth ?? 2) * 15e-4,
                 strokeLinejoin: "round",
-                strokeLinecap: m.strokeDasharray ? "round" : void 0,
-                strokeDasharray: m.strokeDasharray,
-                pathLength: m.strokeDasharray ? 1 : void 0,
+                strokeLinecap: u.strokeDasharray ? "round" : void 0,
+                strokeDasharray: u.strokeDasharray,
+                pathLength: u.strokeDasharray ? 1 : void 0,
                 style: {
-                  transition: u.transition,
-                  animation: m.animation
+                  transition: l.transition,
+                  animation: u.animation
                 }
               }
             )
@@ -1058,19 +1058,19 @@ function zt({
         )
       }
     ),
-    a
+    i
   ] });
 }
-function Lt(t, r) {
-  const { x: o, y: n, w: a, h: l } = r;
-  let i, s;
-  t.includes("left") ? (i = `${o * 100}%`, s = "0") : t.includes("right") ? (i = `${(o + a) * 100}%`, s = "-100%") : (i = `${(o + a / 2) * 100}%`, s = "-50%");
-  let d, u;
-  return t.startsWith("top") ? (d = `${n * 100}%`, u = "-100%") : t.startsWith("bottom") ? (d = `${(n + l) * 100}%`, u = "0") : (d = `${(n + l / 2) * 100}%`, u = "-50%"), {
+function zt(t, r) {
+  const { x: o, y: n, w: i, h: c } = r;
+  let a, s;
+  t.includes("left") ? (a = `${o * 100}%`, s = "0") : t.includes("right") ? (a = `${(o + i) * 100}%`, s = "-100%") : (a = `${(o + i / 2) * 100}%`, s = "-50%");
+  let f, l;
+  return t.startsWith("top") ? (f = `${n * 100}%`, l = "-100%") : t.startsWith("bottom") ? (f = `${(n + c) * 100}%`, l = "0") : (f = `${(n + c / 2) * 100}%`, l = "-50%"), {
     position: "absolute",
-    left: i,
-    top: d,
-    transform: `translate(${s}, ${u})`
+    left: a,
+    top: f,
+    transform: `translate(${s}, ${l})`
   };
 }
 function Ut({
@@ -1079,22 +1079,22 @@ function Ut({
   className: o = "",
   style: n
 }) {
-  const a = F(K), l = rt();
-  if (!a)
+  const i = H(Q), c = nt();
+  if (!i)
     throw new Error(
       "<CutoutViewer.Overlay> must be used inside <CutoutViewer.Cutout>"
     );
-  const i = l.enabled && (l.showAll || a.isActive), s = Lt(t, a.bounds);
-  return /* @__PURE__ */ C.jsx(
+  const a = c.enabled && (c.showAll || i.isActive), s = zt(t, i.bounds);
+  return /* @__PURE__ */ I.jsx(
     "div",
     {
       "data-cutout-overlay": "true",
       className: o,
       style: {
         zIndex: 30,
-        transition: a.effect.transition,
-        opacity: i ? 1 : 0,
-        pointerEvents: i ? "auto" : "none",
+        transition: i.effect.transition,
+        opacity: a ? 1 : 0,
+        pointerEvents: a ? "auto" : "none",
         ...s,
         ...n
       },
@@ -1102,6 +1102,200 @@ function Ut({
     }
   );
 }
+function Xt({
+  onComplete: t,
+  minPoints: r = 3,
+  closeThreshold: o = 0.03
+}) {
+  const [n, i] = F([]), [c, a] = F(null), s = V(null), f = P(
+    (u, b) => {
+      const v = s.current;
+      if (!v) return null;
+      const m = v.getBoundingClientRect(), M = (u - m.left) / m.width, D = (b - m.top) / m.height;
+      return M < 0 || M > 1 || D < 0 || D > 1 ? null : [M, D];
+    },
+    []
+  ), l = P(
+    (u, b) => {
+      if (b.length < r) return !1;
+      const v = u[0] - b[0][0], m = u[1] - b[0][1];
+      return Math.sqrt(v * v + m * m) < o;
+    },
+    [r, o]
+  ), d = P(
+    (u) => {
+      u.length < r || (t(u), i([]), a(null));
+    },
+    [t, r]
+  ), k = P(() => {
+    i([]), a(null);
+  }, []), g = P(
+    (u) => {
+      a(f(u.clientX, u.clientY));
+    },
+    [f]
+  ), h = P(() => {
+    a(null);
+  }, []), y = P(
+    (u) => {
+      u.stopPropagation();
+      const b = f(u.clientX, u.clientY);
+      b && i((v) => l(b, v) ? (d(v), []) : [...v, b]);
+    },
+    [f, l, d]
+  ), E = P(
+    (u) => {
+      u.stopPropagation(), i((b) => {
+        const v = b.slice(0, -1);
+        return v.length >= r ? (d(v), []) : v;
+      });
+    },
+    [r, d]
+  ), x = P(
+    (u) => {
+      u.preventDefault(), i((b) => b.slice(0, -1));
+    },
+    []
+  ), w = c !== null && l(c, n);
+  return {
+    points: n,
+    previewPoint: c,
+    willClose: w,
+    reset: k,
+    containerRef: s,
+    containerProps: {
+      onPointerMove: g,
+      onPointerLeave: h,
+      onClick: y,
+      onDoubleClick: E,
+      onContextMenu: x
+    }
+  };
+}
+function Gt({
+  onComplete: t,
+  minPoints: r = 3,
+  closeThreshold: o = 0.03,
+  strokeColor: n = "#3b82f6",
+  enabled: i = !0,
+  style: c,
+  className: a = ""
+}) {
+  if (!H(Z))
+    throw new Error(
+      "<CutoutViewer.DrawPolygon> must be used inside <CutoutViewer>"
+    );
+  const {
+    points: f,
+    previewPoint: l,
+    willClose: d,
+    reset: k,
+    containerRef: g,
+    containerProps: h
+  } = Xt({ onComplete: t, minPoints: r, closeThreshold: o });
+  O(() => {
+    function x(w) {
+      w.key === "Escape" && k();
+    }
+    return document.addEventListener("keydown", x), () => document.removeEventListener("keydown", x);
+  }, [k]), O(() => {
+    i || k();
+  }, [i, k]);
+  const y = l ? [...f, l] : f, E = y.map(([x, w]) => `${x},${w}`).join(" ");
+  return /* @__PURE__ */ I.jsx(
+    "div",
+    {
+      ref: g,
+      "data-draw-polygon": "true",
+      className: a,
+      style: {
+        position: "absolute",
+        inset: 0,
+        cursor: i ? d ? "cell" : "crosshair" : "default",
+        zIndex: 30,
+        pointerEvents: i ? "auto" : "none",
+        ...c
+      },
+      ...i ? h : {},
+      children: f.length > 0 && /* @__PURE__ */ 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 && /* @__PURE__ */ I.jsx(
+              "polygon",
+              {
+                points: f.map(([x, w]) => `${x},${w}`).join(" "),
+                fill: n,
+                fillOpacity: 0.15,
+                stroke: "none"
+              }
+            ),
+            y.length >= 2 && /* @__PURE__ */ I.jsx(
+              "polyline",
+              {
+                points: E,
+                fill: "none",
+                stroke: n,
+                strokeWidth: 3e-3,
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeDasharray: l ? "0.015 0.008" : void 0
+              }
+            ),
+            l && f.length >= 1 && /* @__PURE__ */ I.jsx(
+              "line",
+              {
+                x1: l[0],
+                y1: l[1],
+                x2: f[0][0],
+                y2: f[0][1],
+                stroke: n,
+                strokeWidth: 2e-3,
+                strokeDasharray: "0.015 0.008",
+                strokeLinecap: "round",
+                opacity: d ? 0.9 : 0.35
+              }
+            ),
+            f.map(([x, w], u) => /* @__PURE__ */ I.jsx(
+              "circle",
+              {
+                cx: x,
+                cy: w,
+                r: u === 0 ? 0.012 : 7e-3,
+                fill: u === 0 && d ? n : "white",
+                stroke: n,
+                strokeWidth: 2e-3
+              },
+              u
+            )),
+            l && /* @__PURE__ */ I.jsx(
+              "circle",
+              {
+                cx: l[0],
+                cy: l[1],
+                r: 5e-3,
+                fill: d ? n : "white",
+                stroke: n,
+                strokeWidth: 2e-3,
+                opacity: 0.8
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
 function vt(t) {
   switch (t.type) {
     case "image":
@@ -1112,81 +1306,81 @@ function vt(t) {
       return `polygon:${t.points.flat().join(",")}:${t.label ?? ""}`;
   }
 }
-function Gt({
+function qt({
   mainImage: t,
   mainImageAlt: r = "Main image",
   effect: o = "elevate",
   enabled: n = !0,
-  showAll: a = !1,
-  alphaThreshold: l = 30,
-  hoverLeaveDelay: i = 150,
+  showAll: i = !1,
+  alphaThreshold: c = 30,
+  hoverLeaveDelay: a = 150,
   children: s,
-  className: d = "",
-  style: u,
-  onHover: p,
-  onActiveChange: R,
-  onSelect: h
+  className: f = "",
+  style: l,
+  onHover: d,
+  onActiveChange: k,
+  onSelect: g
 }) {
-  const f = typeof o == "string" ? q[o] ?? q.elevate : o;
-  N(() => {
-    Wt(f);
-  }, [f]);
-  const [g, w] = tt(() => /* @__PURE__ */ new Map()), S = O(
-    (_) => {
-      w((W) => {
-        const Y = W.get(_.id);
-        if (Y && vt(Y) === vt(_))
-          return W;
-        const U = new Map(W);
-        return U.set(_.id, _), U;
+  const h = typeof o == "string" ? J[o] ?? J.elevate : o;
+  O(() => {
+    Wt(h);
+  }, [h]);
+  const [y, E] = F(() => /* @__PURE__ */ new Map()), x = P(
+    ($) => {
+      E((N) => {
+        const Y = N.get($.id);
+        if (Y && vt(Y) === vt($))
+          return N;
+        const X = new Map(N);
+        return X.set($.id, $), X;
       });
     },
     []
-  ), T = O((_) => {
-    w((W) => {
-      if (!W.has(_)) return W;
-      const Y = new Map(W);
-      return Y.delete(_), Y;
+  ), w = P(($) => {
+    E((N) => {
+      if (!N.has($)) return N;
+      const Y = new Map(N);
+      return Y.delete($), Y;
     });
-  }, []), m = D(
-    () => ({ registerCutout: S, unregisterCutout: T }),
-    [S, T]
-  ), j = D(() => Array.from(g.values()), [g]), { activeId: P, selectedId: b, hoveredId: M, boundsMap: V, containerRef: z, containerProps: E } = Mt(j, n, l, i), k = B(null), y = B(null), v = B(null);
-  N(() => {
-    M !== k.current && (k.current = M, p?.(M));
-  }, [M, p]), N(() => {
-    P !== y.current && (y.current = P, R?.(P));
-  }, [P, R]), N(() => {
-    b !== v.current && (v.current = b, h?.(b));
-  }, [b, h]);
-  const $ = a || P !== null, L = D(
+  }, []), u = B(
+    () => ({ registerCutout: x, unregisterCutout: w }),
+    [x, w]
+  ), b = B(() => Array.from(y.values()), [y]), { activeId: v, selectedId: m, hoveredId: M, boundsMap: D, containerRef: z, containerProps: j } = Mt(b, n, c, a), _ = V(null), R = V(null), A = V(null);
+  O(() => {
+    M !== _.current && (_.current = M, d?.(M));
+  }, [M, d]), O(() => {
+    v !== R.current && (R.current = v, k?.(v));
+  }, [v, k]), O(() => {
+    m !== A.current && (A.current = m, g?.(m));
+  }, [m, g]);
+  const W = i || v !== null, U = B(
     () => ({
-      activeId: P,
-      selectedId: b,
+      activeId: v,
+      selectedId: m,
       hoveredId: M,
-      effect: f,
+      effect: h,
       enabled: n,
-      showAll: a,
-      boundsMap: V,
-      isAnyActive: $
+      showAll: i,
+      boundsMap: D,
+      isAnyActive: W
     }),
-    [P, b, M, f, n, a, V, $]
+    [v, m, M, h, n, i, D, W]
   );
-  return /* @__PURE__ */ C.jsx(et.Provider, { value: m, children: /* @__PURE__ */ C.jsx(xt.Provider, { value: L, children: /* @__PURE__ */ C.jsxs(
+  return /* @__PURE__ */ I.jsx(Z.Provider, { value: u, children: /* @__PURE__ */ I.jsx(xt.Provider, { value: U, children: /* @__PURE__ */ I.jsxs(
     "div",
     {
       ref: z,
-      className: d,
+      className: f,
       style: {
         position: "relative",
         width: "100%",
         overflow: "hidden",
-        cursor: $ && n ? "pointer" : "default",
-        ...u
+        cursor: W && n ? "pointer" : "default",
+        ...l
       },
-      ...E,
+      ...j,
       children: [
-        /* @__PURE__ */ C.jsx(
+        /* @__PURE__ */ I.jsx(
           "img",
           {
             src: t,
@@ -1197,21 +1391,21 @@ function Gt({
               width: "100%",
               height: "auto",
               userSelect: "none",
-              transition: f.transition,
-              ...$ && n ? f.mainImageHovered : {}
+              transition: h.transition,
+              ...W && n ? h.mainImageHovered : {}
             }
           }
         ),
-        /* @__PURE__ */ C.jsx(
+        /* @__PURE__ */ I.jsx(
           "div",
           {
             style: {
               pointerEvents: "none",
               position: "absolute",
               inset: 0,
-              transition: f.transition,
-              opacity: $ && n ? 1 : 0,
-              ...f.vignetteStyle
+              transition: h.transition,
+              opacity: W && n ? 1 : 0,
+              ...h.vignetteStyle
             }
           }
         ),
@@ -1220,26 +1414,29 @@ function Gt({
     }
   ) }) });
 }
-const ot = Gt;
-ot.Cutout = Bt;
-ot.BBoxCutout = Ft;
-ot.PolygonCutout = zt;
-ot.Overlay = Ut;
+const tt = qt;
+tt.Cutout = Ht;
+tt.BBoxCutout = Lt;
+tt.PolygonCutout = Ft;
+tt.Overlay = Ut;
+tt.DrawPolygon = Gt;
 export {
   Ut as CutoutOverlay,
-  ot as CutoutViewer,
-  Ct as ImageHitTestStrategy,
-  jt as PolygonHitTestStrategy,
-  Tt as RectHitTestStrategy,
-  $t as createHitTestStrategy,
-  it as defineKeyframes,
+  tt as CutoutViewer,
+  Gt as DrawPolygon,
+  _t as ImageHitTestStrategy,
+  St as PolygonHitTestStrategy,
+  jt as RectHitTestStrategy,
+  Pt as createHitTestStrategy,
+  at as defineKeyframes,
   Ot as elevateEffect,
-  Nt as glowEffect,
-  q as hoverEffects,
-  Yt as liftEffect,
-  Ht as shimmerEffect,
-  Dt as subtleEffect,
+  Dt as glowEffect,
+  J as hoverEffects,
+  Nt as liftEffect,
+  Bt as shimmerEffect,
+  Yt as subtleEffect,
   Vt as traceEffect,
-  qt as useCutout,
-  Mt as useCutoutHitTest
+  Kt as useCutout,
+  Mt as useCutoutHitTest,
+  Xt as useDrawPolygon
 };