react-img-cutout 1.1.0 → 1.3.0

package/dist/index.js

@@ -1,286 +1,454 @@
-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 = {};
+import Ct, { useState as O, useRef as N, useCallback as M, useMemo as V, useEffect as W, useContext as Y, createContext as lt } from "react";
+var st = { exports: {} }, tt = {};
 var ut;
-function Et() {
-  if (ut) return G;
+function Mt() {
+  if (ut) return tt;
   ut = 1;
   var t = /* @__PURE__ */ Symbol.for("react.transitional.element"), r = /* @__PURE__ */ Symbol.for("react.fragment");
-  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, {
+  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: n,
-      key: a,
-      ref: i !== void 0 ? i : null,
-      props: c
+      type: e,
+      key: s,
+      ref: c !== void 0 ? c : null,
+      props: i
     };
   }
-  return G.Fragment = r, G.jsx = o, G.jsxs = o, G;
+  return tt.Fragment = r, tt.jsx = n, tt.jsxs = n, tt;
 }
-var q = {};
-var ft;
+var et = {};
+var ht;
 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 === R ? null : e.displayName || e.name || null;
-      if (typeof e == "string") return e;
-      switch (e) {
-        case x:
+  return ht || (ht = 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 d:
           return "Fragment";
-        case u:
+        case f:
           return "Profiler";
-        case w:
+        case h:
           return "StrictMode";
-        case M:
+        case A:
           return "Suspense";
-        case D:
-          return "SuspenseList";
         case _:
+          return "SuspenseList";
+        case U:
           return "Activity";
       }
-      if (typeof e == "object")
-        switch (typeof e.tag == "number" && console.error(
+      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."
-        ), e.$$typeof) {
-          case E:
+        ), a.$$typeof) {
+          case y:
             return "Portal";
-          case v:
-            return e.displayName || "Context";
+          case k:
+            return a.displayName || "Context";
+          case w:
+            return (a._context.displayName || "Context") + ".Consumer";
           case b:
-            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 p = e.displayName || null, p !== null ? p : t(e.type) || "Memo";
-          case j:
-            p = e._payload, e = e._init;
+            var E = a.render;
+            return a = a.displayName, a || (a = E.displayName || E.name || "", a = a !== "" ? "ForwardRef(" + a + ")" : "ForwardRef"), a;
+          case X:
+            return E = a.displayName || null, E !== null ? E : t(a.type) || "Memo";
+          case D:
+            E = a._payload, a = a._init;
             try {
-              return t(e(p));
+              return t(a(E));
             } catch {
             }
         }
       return null;
     }
-    function r(e) {
-      return "" + e;
+    function r(a) {
+      return "" + a;
     }
-    function o(e) {
+    function n(a) {
       try {
-        r(e);
-        var p = !1;
+        r(a);
+        var E = !1;
       } catch {
-        p = !0;
+        E = !0;
       }
-      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,
+      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.",
-          T
-        ), r(e);
+          $
+        ), r(a);
       }
     }
-    function n(e) {
-      if (e === x) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === j)
+    function e(a) {
+      if (a === d) return "<>";
+      if (typeof a == "object" && a !== null && a.$$typeof === D)
         return "<...>";
       try {
-        var p = t(e);
-        return p ? "<" + p + ">" : "<...>";
+        var E = t(a);
+        return E ? "<" + E + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function i() {
-      var e = A.A;
-      return e === null ? null : e.getOwner();
-    }
     function c() {
+      var a = B.A;
+      return a === null ? null : a.getOwner();
+    }
+    function i() {
       return Error("react-stack-top-frame");
     }
-    function a(e) {
-      if (W.call(e, "key")) {
-        var p = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (p && p.isReactWarning) return !1;
+    function s(a) {
+      if (q.call(a, "key")) {
+        var E = Object.getOwnPropertyDescriptor(a, "key").get;
+        if (E && E.isReactWarning) return !1;
       }
-      return e.key !== void 0;
+      return a.key !== void 0;
     }
-    function s(e, p) {
-      function C() {
-        N || (N = !0, console.error(
+    function o(a, E) {
+      function j() {
+        P || (P = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-          p
+          E
         ));
       }
-      C.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: C,
+      j.isReactWarning = !0, Object.defineProperty(a, "key", {
+        get: j,
         configurable: !0
       });
     }
-    function f() {
-      var e = t(this.type);
-      return Y[e] || (Y[e] = !0, console.error(
+    function l() {
+      var a = t(this.type);
+      return I[a] || (I[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."
-      )), e = this.props.ref, e !== void 0 ? e : null;
+      )), a = this.props.ref, a !== void 0 ? a : null;
     }
-    function l(e, p, C, T, et, ot) {
-      var S = C.ref;
-      return e = {
-        $$typeof: y,
-        type: e,
-        key: p,
-        props: C,
-        _owner: T
-      }, (S !== void 0 ? S : null) !== null ? Object.defineProperty(e, "ref", {
+    function u(a, E, j, $, ot, it) {
+      var T = j.ref;
+      return a = {
+        $$typeof: g,
+        type: a,
+        key: E,
+        props: j,
+        _owner: $
+      }, (T !== void 0 ? T : null) !== null ? Object.defineProperty(a, "ref", {
         enumerable: !1,
-        get: f
-      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        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(e, "_debugInfo", {
+      }), Object.defineProperty(a, "_debugInfo", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: null
-      }), Object.defineProperty(e, "_debugStack", {
+      }), Object.defineProperty(a, "_debugStack", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: et
-      }), Object.defineProperty(e, "_debugTask", {
+        value: ot
+      }), Object.defineProperty(a, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: ot
-      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+        value: it
+      }), Object.freeze && (Object.freeze(a.props), Object.freeze(a)), 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);
+    function p(a, E, j, $, ot, it) {
+      var T = E.children;
+      if (T !== void 0)
+        if ($)
+          if (S(T)) {
+            for ($ = 0; $ < T.length; $++)
+              m(T[$]);
+            Object.freeze && Object.freeze(T);
           } 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 k(S);
-      if (W.call(p, "key")) {
-        S = t(e);
-        var L = Object.keys(p).filter(function(wt) {
-          return wt !== "key";
+        else m(T);
+      if (q.call(E, "key")) {
+        T = t(a);
+        var K = Object.keys(E).filter(function(Et) {
+          return Et !== "key";
         });
-        T = 0 < L.length ? "{key: someKey, " + L.join(": ..., ") + ": ...}" : "{key: someKey}", ct[S + T] || (L = 0 < L.length ? "{" + L.join(": ..., ") + ": ...}" : "{}", console.error(
+        $ = 0 < K.length ? "{key: someKey, " + K.join(": ..., ") + ": ...}" : "{key: someKey}", G[T + $] || (K = 0 < K.length ? "{" + K.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} />`,
+          $,
           T,
-          S,
-          L,
-          S
-        ), ct[S + T] = !0);
+          K,
+          T
+        ), G[T + $] = !0);
       }
-      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
-      ), l(
-        e,
-        S,
-        C,
-        i(),
-        et,
-        ot
+      if (T = null, j !== void 0 && (n(j), T = "" + j), s(E) && (n(E.key), T = "" + E.key), "key" in E) {
+        j = {};
+        for (var at in E)
+          at !== "key" && (j[at] = E[at]);
+      } else j = E;
+      return T && o(
+        j,
+        typeof a == "function" ? a.displayName || a.name || "Unknown" : a
+      ), u(
+        a,
+        T,
+        j,
+        c(),
+        ot,
+        it
       );
     }
-    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 m(a) {
+      v(a) ? a._store && (a._store.validated = 1) : typeof a == "object" && a !== null && a.$$typeof === D && (a._payload.status === "fulfilled" ? v(a._payload.value) && a._payload.value._store && (a._payload.value._store.validated = 1) : a._store && (a._store.validated = 1));
     }
-    function g(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === y;
+    function v(a) {
+      return typeof a == "object" && a !== null && a.$$typeof === g;
     }
-    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() {
+    var x = Ct, g = /* @__PURE__ */ Symbol.for("react.transitional.element"), y = /* @__PURE__ */ Symbol.for("react.portal"), d = /* @__PURE__ */ Symbol.for("react.fragment"), h = /* @__PURE__ */ Symbol.for("react.strict_mode"), f = /* @__PURE__ */ Symbol.for("react.profiler"), w = /* @__PURE__ */ Symbol.for("react.consumer"), k = /* @__PURE__ */ Symbol.for("react.context"), b = /* @__PURE__ */ Symbol.for("react.forward_ref"), A = /* @__PURE__ */ Symbol.for("react.suspense"), _ = /* @__PURE__ */ Symbol.for("react.suspense_list"), X = /* @__PURE__ */ Symbol.for("react.memo"), D = /* @__PURE__ */ Symbol.for("react.lazy"), U = /* @__PURE__ */ Symbol.for("react.activity"), Q = /* @__PURE__ */ Symbol.for("react.client.reference"), B = x.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, q = Object.prototype.hasOwnProperty, S = Array.isArray, R = console.createTask ? console.createTask : function() {
       return null;
     };
-    h = {
-      react_stack_bottom_frame: function(e) {
-        return e();
+    x = {
+      react_stack_bottom_frame: function(a) {
+        return a();
       }
     };
-    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,
-        p,
-        C,
+    var P, I = {}, z = x.react_stack_bottom_frame.bind(
+      x,
+      i
+    )(), L = R(e(i)), G = {};
+    et.Fragment = d, et.jsx = function(a, E, j) {
+      var $ = 1e4 > B.recentlyCreatedOwnerStacks++;
+      return p(
+        a,
+        E,
+        j,
         !1,
-        T ? Error("react-stack-top-frame") : X,
-        T ? $(n(e)) : lt
+        $ ? Error("react-stack-top-frame") : z,
+        $ ? R(e(a)) : L
       );
-    }, q.jsxs = function(e, p, C) {
-      var T = 1e4 > A.recentlyCreatedOwnerStacks++;
-      return d(
-        e,
-        p,
-        C,
+    }, et.jsxs = function(a, E, j) {
+      var $ = 1e4 > B.recentlyCreatedOwnerStacks++;
+      return p(
+        a,
+        E,
+        j,
         !0,
-        T ? Error("react-stack-top-frame") : X,
-        T ? $(n(e)) : lt
+        $ ? Error("react-stack-top-frame") : z,
+        $ ? R(e(a)) : L
       );
     };
-  })()), q;
+  })()), et;
 }
-var dt;
+var ft;
 function Rt() {
-  return dt || (dt = 1, process.env.NODE_ENV === "production" ? rt.exports = Et() : rt.exports = It()), rt.exports;
+  return ft || (ft = 1, process.env.NODE_ENV === "production" ? st.exports = Mt() : st.exports = It()), st.exports;
+}
+var C = Rt();
+const At = 400;
+function Pt(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 ct(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 = Pt(t[s], c, i);
+    o > n && (n = o, e = s);
+  }
+  if (n > r) {
+    const s = ct(t.slice(0, e + 1), r), o = ct(t.slice(e), r);
+    return s.slice(0, -1).concat(o);
+  }
+  return [c, i];
+}
+function dt(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 * 0.5;
+}
+function St(t, r) {
+  if (t.length <= 3 || r <= 0) return t;
+  const n = t.concat([t[0]]), e = ct(n, r);
+  return e.length < 4 ? t : (e.pop(), e.length >= 3 ? e : t);
+}
+const jt = [
+  [],
+  // 0   (0000)
+  [[3, 0]],
+  // 1   (0001) TL
+  [[0, 1]],
+  // 2   (0010) TR
+  [[3, 1]],
+  // 3   (0011) TL TR
+  [[1, 2]],
+  // 4   (0100) BR
+  [[3, 0], [1, 2]],
+  // 5   (0101) TL BR  (saddle)
+  [[0, 2]],
+  // 6   (0110) TR BR
+  [[3, 2]],
+  // 7   (0111) TL TR BR
+  [[2, 3]],
+  // 8   (1000) BL
+  [[2, 0]],
+  // 9   (1001) TL BL
+  [[0, 1], [2, 3]],
+  // 10  (1010) TR BL  (saddle)
+  [[2, 1]],
+  // 11  (1011) TL TR BL
+  [[1, 3]],
+  // 12  (1100) BR BL
+  [[1, 0]],
+  // 13  (1101) TL BR BL
+  [[0, 3]],
+  // 14  (1110) TR BR BL
+  []
+  // 15  (1111)
+];
+function _t(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], u = t[(i + 1) * r + s + 1], p = t[(i + 1) * r + s];
+      let m = 0;
+      if (o >= e && (m |= 1), l >= e && (m |= 2), u >= e && (m |= 4), p >= e && (m |= 8), m === 0 || m === 15) continue;
+      const v = (x) => {
+        switch (x) {
+          case 0: {
+            const g = l - o, y = Math.abs(g) < 1e-10 ? 0.5 : Math.max(0, Math.min(1, (e - o) / g));
+            return [s + y, i];
+          }
+          case 1: {
+            const g = u - l, y = Math.abs(g) < 1e-10 ? 0.5 : Math.max(0, Math.min(1, (e - l) / g));
+            return [s + 1, i + y];
+          }
+          case 2: {
+            const g = u - p, y = Math.abs(g) < 1e-10 ? 0.5 : Math.max(0, Math.min(1, (e - p) / g));
+            return [s + y, i + 1];
+          }
+          case 3: {
+            const g = p - o, y = Math.abs(g) < 1e-10 ? 0.5 : Math.max(0, Math.min(1, (e - o) / g));
+            return [s, i + y];
+          }
+          default:
+            return [s + 0.5, i + 0.5];
+        }
+      };
+      for (const [x, g] of jt[m])
+        c.push([v(x), v(g)]);
+    }
+  return c;
+}
+function $t(t) {
+  if (t.length === 0) return [];
+  const r = (i) => `${Math.round(i[0] * 1e4)},${Math.round(i[1] * 1e4)}`, n = /* @__PURE__ */ 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, u = 0;
+    const p = t.length + 1;
+    for (; u++ < p && !e[o]; ) {
+      e[o] = 1;
+      const m = l === 1 ? 0 : 1;
+      s.push(t[o][m]);
+      const v = t[o][l], x = r(v), g = n.get(x);
+      if (!g) break;
+      const y = g.find((d) => !e[d.idx]);
+      if (!y) break;
+      o = y.idx, l = y.end === 0 ? 1 : 0;
+    }
+    s.length >= 3 && c.push(s);
+  }
+  return c;
+}
+function Tt(t, r, n, e = 30, c = 2e-3) {
+  if (r <= 0 || n <= 0 || t.length === 0) return [];
+  const i = Math.min(1, At / Math.max(r, n)), s = Math.max(1, Math.round(r * i)), o = Math.max(1, Math.round(n * i)), l = s + 2, u = o + 2, p = new Float32Array(l * u);
+  for (let h = 0; h < o; h++) {
+    const f = Math.min(n - 1, Math.floor(h / i));
+    for (let w = 0; w < s; w++) {
+      const k = Math.min(r - 1, Math.floor(w / i));
+      p[(h + 1) * l + (w + 1)] = t[f * r + k];
+    }
+  }
+  const m = _t(p, l, u, e), v = $t(m);
+  if (v.length === 0) return [];
+  let x = v[0], g = Math.abs(dt(x));
+  for (let h = 1; h < v.length; h++) {
+    const f = Math.abs(dt(v[h]));
+    f > g && (x = v[h], g = f);
+  }
+  const y = x.map(([h, f]) => [
+    (h - 1) / s,
+    (f - 1) / o
+  ]), d = St(y, c);
+  return d.length >= 3 ? d : y;
 }
-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 Dt(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, u = i[1] + (s[1] - c[1]) / 6, p = s[0] - (o[0] - i[0]) / 6, m = s[1] - (o[1] - i[1]) / 6;
+    n.push(`C${l},${u} ${p},${m} ${s[0]},${s[1]}`);
+  }
+  return n.push("Z"), n.join("");
 }
-function Ct(t, r, o, n) {
-  if (r <= 0 || o <= 0) return { x: 0, y: 0, w: 1, h: 1 };
-  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
+function Wt(t, r) {
+  const n = new Uint8Array(r);
+  for (let e = 0; e < r; e++)
+    n[e] = t[e * 4 + 3];
+  return n;
+}
+function zt(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 u = 0; u < n; u++)
+    for (let p = 0; p < r; p++)
+      t[u * r + p] > e && (p < c && (c = p), p > s && (s = p), u < i && (i = u), u > o && (o = u), 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 _t {
+class Ot {
   id;
   bounds = { x: 0, y: 0, w: 1, h: 1 };
+  contour = [];
   /** URL of the cutout mask image */
   src;
   /** Alpha value (0-255) a pixel must exceed to be considered "visible" */
@@ -290,8 +458,8 @@ class _t {
   /** Source image dimensions (pixels) — needed to map normalized coords to pixel indices */
   width = 0;
   height = 0;
-  constructor(r, o) {
-    this.id = r.id, this.src = r.src, this.threshold = o;
+  constructor(r, n) {
+    this.id = r.id, this.src = r.src, this.threshold = n;
   }
   /**
    * Loads the cutout image and pre-computes the alpha buffer + bounding box.
@@ -309,19 +477,19 @@ class _t {
    */
   async prepare() {
     const r = new Image();
-    r.crossOrigin = "anonymous", r.src = this.src, await new Promise((a) => {
-      r.onload = () => a(), r.onerror = () => a();
+    r.crossOrigin = "anonymous", r.src = this.src, await new Promise((s) => {
+      r.onload = () => s(), r.onerror = () => s();
     });
-    const o = r.naturalWidth, n = r.naturalHeight;
-    if (o <= 0 || n <= 0) return;
-    const i = document.createElement("canvas");
-    i.width = o, i.height = n;
-    const c = i.getContext("2d", { willReadFrequently: !0 });
-    if (c)
+    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 {
-        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);
+        i.drawImage(r, 0, 0);
+        const s = i.getImageData(0, 0, n, e);
+        this.alpha = Wt(s.data, n * e), this.width = n, this.height = e, this.bounds = zt(this.alpha, n, e, this.threshold), this.contour = Tt(this.alpha, n, e, this.threshold);
       } catch {
         this.alpha = new Uint8Array(0);
       }
@@ -341,50 +509,50 @@ class _t {
    * @param nx - normalized x-coordinate (0-1, relative to the image width)
    * @param ny - normalized y-coordinate (0-1, relative to the image height)
    */
-  hitTest(r, o) {
+  hitTest(r, n) {
     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 i = Math.min(this.width - 1, Math.max(0, Math.floor(r * this.width))), c = Math.min(
+    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(o * this.height))
+      Math.max(0, Math.floor(n * this.height))
     );
-    return this.alpha[c * this.width + i] > this.threshold;
+    return this.alpha[i * this.width + c] > this.threshold;
   }
 }
-class jt {
+class Lt {
   id;
   bounds;
   constructor(r) {
     this.id = r.id, this.bounds = { ...r.bounds };
   }
-  hitTest(r, o) {
-    const n = this.bounds;
-    return r >= n.x && r <= n.x + n.w && o >= n.y && o <= n.y + n.h;
+  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 Tt(t, r, o) {
-  let n = !1;
-  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);
+function Yt(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], u = n[i][1];
+    o > r != u > r && t < (l - s) * (r - o) / (u - o) + s && (e = !e);
   }
-  return n;
+  return e;
 }
-class St {
+class Nt {
   id;
   bounds;
   points;
   constructor(r) {
     this.id = r.id, this.points = r.points;
-    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);
+    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: o,
-      y: n,
-      w: i - o,
-      h: c - n
+      x: n,
+      y: e,
+      w: c - n,
+      h: i - e
     };
   }
   /**
@@ -399,22 +567,47 @@ class St {
    * @param nx - normalized x-coordinate (0-1, relative to the image width)
    * @param ny - normalized y-coordinate (0-1, relative to the image height)
    */
-  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 : Tt(r, o, this.points);
+  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 : Yt(r, n, this.points);
+  }
+}
+class Vt {
+  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 Pt(t, r) {
+function Bt(t, r, n) {
   switch (t.type) {
     case "image":
-      return new _t(t, r);
+      return new Ot(t, r);
     case "bbox":
-      return new jt(t);
+      return new Lt(t);
     case "polygon":
-      return new St(t);
+      return new Nt(t);
+    case "circle":
+      return new Vt(t, n?.viewportWidth, n?.viewportHeight);
   }
 }
-function $t(t) {
+function Ht(t) {
   switch (t.type) {
     case "image":
       return `${t.id}:image:${t.src}:${t.label ?? ""}`;
@@ -422,122 +615,142 @@ function $t(t) {
       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 Mt(t, r = !0, o = 30, n = 150) {
-  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(() => {
+function Ft(t, r = !0, n = 30, e = 150) {
+  const [c, i] = O(null), [s, o] = O(null), l = N(null), u = N([]), [p, m] = O({}), [v, x] = O({ width: 1, height: 1 }), [g, y] = O({}), d = Math.min(255, Math.max(0, n)), h = N(null), f = M(() => {
     h.current === null && (h.current = setTimeout(() => {
-      h.current = null, c(null);
-    }, n));
-  }, [n]), E = P(() => {
+      h.current = null, i(null);
+    }, e));
+  }, [e]), w = M(() => {
     h.current !== null && (clearTimeout(h.current), h.current = null);
-  }, []), x = t.map($t).join("|"), w = B(() => t, [x]);
-  O(() => {
+  }, []), k = t.map(Ht).join("|"), b = V(() => t, [k]);
+  W(() => {
+    const S = l.current;
+    if (!S) return;
+    const R = () => {
+      const I = S.getBoundingClientRect();
+      x({
+        width: Math.max(1, I.width),
+        height: Math.max(1, I.height)
+      });
+    };
+    R();
+    const P = new ResizeObserver(R);
+    return P.observe(S), () => P.disconnect();
+  }, []), W(() => {
     if (!r) {
-      l.current = [];
+      u.current = [];
       return;
     }
-    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;
+    let S = !1, R = [];
+    async function P() {
+      const I = [], z = {}, L = {};
+      for (const G of b) {
+        const a = Bt(G, d, {
+          viewportWidth: v.width,
+          viewportHeight: v.height
+        });
+        if (a.prepare && await a.prepare(), S) return;
+        I.push(a), z[a.id] = a.bounds, a.contour && a.contour.length >= 3 && (L[a.id] = a.contour);
       }
-      j || (_ = A, l.current = A, k(W));
+      S || (R = I, u.current = I, m(z), y(L));
     }
-    return R(), () => {
-      j = !0;
-      for (const A of _)
-        A.dispose?.();
+    return P(), () => {
+      S = !0;
+      for (const I of R)
+        I.dispose?.();
     };
-  }, [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;
+  }, [b, r, d, v.width, v.height]);
+  const A = M(
+    (S, R) => {
+      const P = u.current;
+      for (let I = P.length - 1; I >= 0; I--)
+        if (P[I].hitTest(S, R))
+          return P[I].id;
       return null;
     },
     []
-  ), 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 };
+  ), _ = M(
+    (S) => {
+      const R = l.current;
+      if (!R) return null;
+      const P = R.getBoundingClientRect(), I = (S.clientX - P.left) / P.width, z = (S.clientY - P.top) / P.height;
+      return I < 0 || I > 1 || z < 0 || z > 1 ? null : { nx: I, ny: z };
     },
     []
-  ), v = P(
-    (j) => {
+  ), X = M(
+    (S) => {
       if (!r) return;
-      const _ = b(j);
-      if (!_) {
-        y();
+      const R = _(S);
+      if (!R) {
+        f();
         return;
       }
-      const R = u(_.nx, _.ny);
-      if (R === null) {
-        if (j.target?.closest('[data-cutout-overlay="true"]')) {
-          E();
+      const P = A(R.nx, R.ny);
+      if (P === null) {
+        if (S.target?.closest('[data-cutout-overlay="true"]')) {
+          w();
           return;
         }
-        y();
+        f();
         return;
       }
-      E(), c(R);
+      w(), i(P);
     },
-    [r, b, u, y, E]
-  ), m = P(() => {
-    y();
-  }, [y]), M = P(
-    (j) => {
+    [r, _, A, f, w]
+  ), D = M(() => {
+    f();
+  }, [f]), U = M(
+    (S) => {
       if (!r) return;
-      const _ = b(j);
-      if (!_) {
-        s(null);
+      const R = _(S);
+      if (!R) {
+        o(null);
         return;
       }
-      const R = u(_.nx, _.ny);
-      s(R === a || R === null ? null : R);
+      const P = A(R.nx, R.ny);
+      o(P === s || P === null ? null : P);
     },
-    [r, b, u, a]
-  ), D = a ?? i, z = r ? d : {};
-  return O(() => () => {
-    E();
-  }, [E]), {
-    hoveredId: i,
-    selectedId: a,
-    activeId: D,
-    boundsMap: z,
-    containerRef: f,
+    [r, _, A, s]
+  ), Q = s ?? c, B = r ? p : {}, q = r ? g : {};
+  return W(() => () => {
+    w();
+  }, [w]), {
+    hoveredId: c,
+    selectedId: s,
+    activeId: Q,
+    viewportSize: v,
+    boundsMap: B,
+    contourMap: q,
+    containerRef: l,
     containerProps: {
-      onPointerMove: v,
-      onPointerLeave: m,
-      onClick: M
+      onPointerMove: X,
+      onPointerLeave: D,
+      onClick: U
     }
   };
 }
-function at(t, r) {
+function bt(t, r) {
   return { name: t, css: r };
 }
-const pt = /* @__PURE__ */ new Set();
-function Wt(t) {
+const gt = /* @__PURE__ */ new Set();
+function Xt(t) {
   if (!(!t.keyframes?.length || typeof document > "u"))
     for (const r of t.keyframes) {
-      if (pt.has(r.name)) continue;
-      pt.add(r.name);
-      const o = document.createElement("style");
-      o.setAttribute("data-ricut-kf", r.name), o.textContent = `@keyframes ${r.name} {
+      if (gt.has(r.name)) continue;
+      gt.add(r.name);
+      const n = document.createElement("style");
+      n.setAttribute("data-ricut-kf", r.name), n.textContent = `@keyframes ${r.name} {
 ${r.css}
-}`, document.head.appendChild(o);
+}`, document.head.appendChild(n);
     }
 }
-const K = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Ot = {
+const rt = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Ut = {
   name: "elevate",
-  transition: K,
+  transition: rt,
   mainImageHovered: {
     filter: "brightness(0.45) saturate(0.7)"
   },
@@ -562,7 +775,7 @@ const K = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Ot = {
   geometryActive: {
     fill: "rgba(130, 190, 255, 0.2)",
     stroke: "rgba(130, 190, 255, 0.9)",
-    strokeWidth: 2,
+    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: {
@@ -575,9 +788,9 @@ const K = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Ot = {
     stroke: "transparent",
     strokeWidth: 1
   }
-}, Dt = {
+}, qt = {
   name: "glow",
-  transition: K,
+  transition: rt,
   mainImageHovered: {
     filter: "brightness(0.55) saturate(0.8)"
   },
@@ -602,7 +815,7 @@ const K = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Ot = {
   geometryActive: {
     fill: "rgba(255, 200, 100, 0.15)",
     stroke: "rgba(255, 200, 100, 0.85)",
-    strokeWidth: 2,
+    strokeWidth: 0,
     glow: "0 0 20px rgba(255, 200, 100, 0.5), 0 0 56px rgba(255, 200, 100, 0.2)"
   },
   geometryInactive: {
@@ -615,9 +828,9 @@ const K = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Ot = {
     stroke: "transparent",
     strokeWidth: 1
   }
-}, Nt = {
+}, Gt = {
   name: "lift",
-  transition: K,
+  transition: rt,
   mainImageHovered: {
     filter: "brightness(0.4)"
   },
@@ -642,7 +855,7 @@ const K = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Ot = {
   geometryActive: {
     fill: "rgba(255, 255, 255, 0.1)",
     stroke: "rgba(255, 255, 255, 0.7)",
-    strokeWidth: 2,
+    strokeWidth: 0,
     glow: "0 20px 56px rgba(0, 0, 0, 0.6), 0 0 16px rgba(255, 255, 255, 0.1)"
   },
   geometryInactive: {
@@ -655,7 +868,7 @@ const K = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Ot = {
     stroke: "transparent",
     strokeWidth: 1
   }
-}, Yt = {
+}, Kt = {
   name: "subtle",
   transition: "all 0.3s ease",
   mainImageHovered: {
@@ -682,7 +895,7 @@ const K = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Ot = {
   geometryActive: {
     fill: "rgba(255, 255, 255, 0.08)",
     stroke: "rgba(255, 255, 255, 0.5)",
-    strokeWidth: 1
+    strokeWidth: 0
   },
   geometryInactive: {
     fill: "transparent",
@@ -694,21 +907,14 @@ const K = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Ot = {
     stroke: "transparent",
     strokeWidth: 1
   }
-}, ht = at(
+}, pt = bt(
   "_ricut-trace-stroke",
   `from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -1; }`
-), 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)); }
-   50%  { filter: drop-shadow(3px 3px 6px rgba(255,255,255,0.6)) drop-shadow(0 0 2px rgba(255,255,255,0.15)); }
-   75%  { filter: drop-shadow(-3px 3px 6px rgba(255,255,255,0.6)) drop-shadow(0 0 2px rgba(255,255,255,0.15)); }
-   100% { filter: drop-shadow(-3px -3px 6px rgba(255,255,255,0.6)) drop-shadow(0 0 2px rgba(255,255,255,0.15)); }`
-), Vt = {
+), Jt = {
   name: "trace",
-  transition: K,
-  keyframes: [ht, gt],
+  transition: rt,
+  keyframes: [pt],
   mainImageHovered: {
     filter: "brightness(0.35) saturate(0.5)"
   },
@@ -717,9 +923,8 @@ const K = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Ot = {
   },
   cutoutActive: {
     transform: "scale(1)",
-    filter: "drop-shadow(-3px -3px 6px rgba(255,255,255,0.6)) drop-shadow(0 0 2px rgba(255,255,255,0.15))",
-    opacity: 1,
-    animation: `${gt.name} 3s linear infinite`
+    filter: "drop-shadow(0 0 8px rgba(255,255,255,0.15))",
+    opacity: 1
   },
   cutoutInactive: {
     transform: "scale(1)",
@@ -734,9 +939,9 @@ const K = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Ot = {
   geometryActive: {
     fill: "rgba(255, 255, 255, 0.03)",
     stroke: "rgba(255, 255, 255, 0.9)",
-    strokeWidth: 2.5,
+    strokeWidth: 2,
     strokeDasharray: "0.15 0.85",
-    animation: `${ht.name} 3s linear infinite`,
+    animation: `${pt.name} 3s linear infinite`,
     glow: "0 0 10px rgba(255, 255, 255, 0.25)"
   },
   geometryInactive: {
@@ -749,7 +954,7 @@ const K = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Ot = {
     stroke: "transparent",
     strokeWidth: 1
   }
-}, mt = at(
+}, yt = bt(
   "_ricut-shimmer",
   `0%, 100% {
     filter: brightness(1.05) contrast(1.02)
@@ -766,10 +971,10 @@ const K = "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));
   }`
-), Bt = {
+), Zt = {
   name: "shimmer",
-  transition: K,
-  keyframes: [mt],
+  transition: rt,
+  keyframes: [yt],
   mainImageHovered: {
     filter: "brightness(0.35) saturate(0.6)"
   },
@@ -782,7 +987,7 @@ const K = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Ot = {
        we set it here so there's a graceful look before the first frame. */
     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: `${mt.name} 2.4s ease-in-out infinite`
+    animation: `${yt.name} 2.4s ease-in-out infinite`
   },
   cutoutInactive: {
     transform: "scale(1)",
@@ -797,7 +1002,7 @@ const K = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Ot = {
   geometryActive: {
     fill: "rgba(255, 255, 255, 0.1)",
     stroke: "rgba(255, 255, 255, 0.7)",
-    strokeWidth: 2,
+    strokeWidth: 0,
     glow: "0 0 14px rgba(255, 255, 255, 0.35), 0 12px 32px rgba(0, 0, 0, 0.4)"
   },
   geometryInactive: {
@@ -811,47 +1016,51 @@ const K = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Ot = {
     strokeWidth: 1
   }
 }, J = {
-  elevate: Ot,
-  glow: Dt,
-  lift: Nt,
-  subtle: Yt,
-  trace: Vt,
-  shimmer: Bt
-}, Z = it(null), xt = it(null);
+  elevate: Ut,
+  glow: qt,
+  lift: Gt,
+  subtle: Kt,
+  trace: Jt,
+  shimmer: Zt
+}, H = lt(null), kt = lt(null);
 function nt() {
-  const t = H(xt);
+  const t = Y(kt);
   if (!t) throw new Error("Must be used inside <CutoutViewer>");
   return t;
 }
-const Q = it(null);
-function Kt() {
-  const t = H(Q);
+const Z = lt(null);
+function de() {
+  const t = Y(Z);
   if (!t)
     throw new Error("useCutout must be used inside <CutoutViewer.Cutout>");
   return t;
 }
-function Ht({ id: t, src: r, label: o, effect: n, children: i, renderLayer: c }) {
-  const a = H(Z), s = nt();
-  if (!a)
+function Qt({ id: t, src: r, label: n, effect: e, children: c, renderLayer: i }) {
+  const s = Y(H), o = nt();
+  if (!s)
     throw new Error("<CutoutViewer.Cutout> must be used inside <CutoutViewer>");
-  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(
+  W(() => (s.registerCutout({ type: "image", id: t, src: r, label: n }), () => s.unregisterCutout(t)), [t, r, n, s]);
+  const l = e ? typeof e == "string" ? J[e] ?? o.effect : e : o.effect, u = o.contourMap[t] ?? null, p = V(() => {
+    if (!u) return null;
+    const w = o.viewportSize.width || 1, k = o.viewportSize.height || 1, b = u.map(([A, _]) => [A * w, _ * k]);
+    return Dt(b);
+  }, [u, o.viewportSize.width, o.viewportSize.height]), m = o.activeId === t, v = o.hoveredId === t, x = o.selectedId === t, g = { x: 0, y: 0, w: 1, h: 1 }, y = o.boundsMap[t] ?? g;
+  let d, h;
+  !o.enabled || !o.isAnyActive && !o.showAll ? (d = l.cutoutIdle, h = l.geometryIdle) : o.showAll || m ? (d = l.cutoutActive, h = l.geometryActive) : (d = l.cutoutInactive, h = l.geometryInactive);
+  const f = V(
     () => ({
       id: t,
-      label: o,
-      bounds: h,
-      isActive: l,
-      isHovered: d,
-      isSelected: k,
-      effect: f
+      label: n,
+      bounds: y,
+      isActive: m,
+      isHovered: v,
+      isSelected: x,
+      effect: l
     }),
-    [t, o, h, l, d, k, f]
+    [t, n, y, m, v, x, l]
   );
-  return /* @__PURE__ */ I.jsxs(Q.Provider, { value: E, children: [
-    /* @__PURE__ */ I.jsx(
+  return /* @__PURE__ */ C.jsxs(Z.Provider, { value: f, children: [
+    /* @__PURE__ */ C.jsxs(
       "div",
       {
         "data-cutout-id": t,
@@ -859,69 +1068,103 @@ function Ht({ id: t, src: r, label: o, effect: n, children: i, renderLayer: c })
           pointerEvents: "none",
           position: "absolute",
           inset: 0,
-          zIndex: l ? 20 : 10,
-          transition: f.transition,
-          ...y
+          zIndex: m ? 20 : 10,
+          transition: l.transition,
+          ...d
         },
-        children: c ? c({ isActive: l, isHovered: d, isSelected: k, bounds: h, effect: f }) : /* @__PURE__ */ I.jsx(
-          "img",
-          {
-            src: r,
-            alt: o || t,
-            draggable: !1,
-            style: {
-              width: "100%",
-              height: "100%",
-              objectFit: "fill",
-              userSelect: "none"
+        children: [
+          i ? i({ isActive: m, isHovered: v, isSelected: x, bounds: y, effect: l }) : /* @__PURE__ */ C.jsx(
+            "img",
+            {
+              src: r,
+              alt: n || t,
+              draggable: !1,
+              style: {
+                width: "100%",
+                height: "100%",
+                objectFit: "fill",
+                userSelect: "none"
+              }
             }
-          }
-        )
+          ),
+          p && h && /* @__PURE__ */ C.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: /* @__PURE__ */ C.jsx(
+                "path",
+                {
+                  d: p,
+                  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
+                  }
+                }
+              )
+            }
+          )
+        ]
       }
     ),
-    i
+    c
   ] });
 }
-function yt(t) {
-  const { filter: r, ...o } = t;
-  return o;
+function mt(t) {
+  const { filter: r, ...n } = t;
+  return n;
 }
-function Lt({
+function te({
   id: t,
   bounds: r,
-  label: o,
-  effect: n,
-  children: i,
-  renderLayer: c
+  label: n,
+  effect: e,
+  children: c,
+  renderLayer: i
 }) {
-  const a = H(Z), s = nt();
-  if (!a)
+  const s = Y(H), o = nt();
+  if (!s)
     throw new Error(
       "<CutoutViewer.BBoxCutout> must be used inside <CutoutViewer>"
     );
-  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 ?? {
+  const { x: l, y: u, w: p, h: m } = r;
+  W(() => (s.registerCutout({ type: "bbox", id: t, bounds: { x: l, y: u, w: p, h: m }, label: n }), () => s.unregisterCutout(t)), [t, l, u, p, m, n, s]);
+  const v = e ? typeof e == "string" ? J[e] ?? o.effect : e : o.effect, x = o.activeId === t, g = o.hoveredId === t, y = o.selectedId === t, d = { x: 0, y: 0, w: 1, h: 1 }, h = o.boundsMap[t] ?? d;
+  let f, w;
+  !o.enabled || !o.isAnyActive && !o.showAll ? (w = { ...v.cutoutIdle, filter: "none", opacity: 0 }, f = v.geometryIdle) : o.showAll || x ? (w = mt(v.cutoutActive), f = v.geometryActive) : (w = mt(v.cutoutInactive), f = v.geometryInactive);
+  const b = f ?? {
     fill: "rgba(37, 99, 235, 0.15)",
     stroke: "rgba(37, 99, 235, 0.6)",
     strokeWidth: 2
-  }, M = B(
+  }, A = V(
     () => ({
       id: t,
-      label: o,
-      bounds: w,
-      isActive: h,
-      isHovered: y,
-      isSelected: E,
-      effect: g
+      label: n,
+      bounds: h,
+      isActive: x,
+      isHovered: g,
+      isSelected: y,
+      effect: v
     }),
-    [t, o, w, h, y, E, g]
+    [t, n, h, x, g, y, v]
   );
-  return /* @__PURE__ */ I.jsxs(Q.Provider, { value: M, children: [
-    /* @__PURE__ */ I.jsx(
+  return /* @__PURE__ */ C.jsxs(Z.Provider, { value: A, children: [
+    /* @__PURE__ */ C.jsx(
       "div",
       {
         "data-cutout-id": t,
@@ -929,11 +1172,11 @@ function Lt({
           pointerEvents: "none",
           position: "absolute",
           inset: 0,
-          zIndex: h ? 20 : 10,
-          transition: g.transition,
-          ...b
+          zIndex: x ? 20 : 10,
+          transition: v.transition,
+          ...w
         },
-        children: c ? c({ isActive: h, isHovered: y, isSelected: E, bounds: w, effect: g }) : /* @__PURE__ */ I.jsx(
+        children: i ? i({ isActive: x, isHovered: g, isSelected: y, bounds: h, effect: v }) : /* @__PURE__ */ C.jsx(
           "svg",
           {
             viewBox: "0 0 1 1",
@@ -944,25 +1187,25 @@ function Lt({
               width: "100%",
               height: "100%",
               overflow: "visible",
-              filter: m.glow ? `drop-shadow(${m.glow.split(",")[0]?.trim() ?? ""})` : "none"
+              filter: b.glow ? `drop-shadow(${b.glow.split(",")[0]?.trim() ?? ""})` : "none"
             },
-            children: /* @__PURE__ */ I.jsx(
+            children: /* @__PURE__ */ C.jsx(
               "rect",
               {
-                x: w.x,
-                y: w.y,
-                width: w.w,
-                height: w.h,
+                x: h.x,
+                y: h.y,
+                width: h.w,
+                height: h.h,
                 rx: 4e-3,
-                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,
+                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,
                 style: {
-                  transition: g.transition,
-                  animation: m.animation
+                  transition: v.transition,
+                  animation: b.animation
                 }
               }
             )
@@ -970,49 +1213,49 @@ function Lt({
         )
       }
     ),
-    i
+    c
   ] });
 }
-function bt(t) {
-  const { filter: r, ...o } = t;
-  return o;
+function vt(t) {
+  const { filter: r, ...n } = t;
+  return n;
 }
-function Ft({
+function ee({
   id: t,
   points: r,
-  label: o,
-  effect: n,
-  children: i,
-  renderLayer: c
+  label: n,
+  effect: e,
+  children: c,
+  renderLayer: i
 }) {
-  const a = H(Z), s = nt();
-  if (!a)
+  const s = Y(H), o = nt();
+  if (!s)
     throw new Error(
       "<CutoutViewer.PolygonCutout> must be used inside <CutoutViewer>"
     );
-  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 ?? {
+  const l = r.flat().join(",");
+  W(() => (s.registerCutout({ type: "polygon", id: t, points: r, label: n }), () => s.unregisterCutout(t)), [t, l, n, s]);
+  const u = e ? typeof e == "string" ? J[e] ?? o.effect : e : o.effect, p = o.activeId === t, m = o.hoveredId === t, v = o.selectedId === t, x = { x: 0, y: 0, w: 1, h: 1 }, g = o.boundsMap[t] ?? x;
+  let y, d;
+  !o.enabled || !o.isAnyActive && !o.showAll ? (d = { ...u.cutoutIdle, filter: "none", opacity: 0 }, y = u.geometryIdle) : o.showAll || p ? (d = vt(u.cutoutActive), y = u.geometryActive) : (d = vt(u.cutoutInactive), y = u.geometryInactive);
+  const f = y ?? {
     fill: "rgba(37, 99, 235, 0.15)",
     stroke: "rgba(37, 99, 235, 0.6)",
     strokeWidth: 2
-  }, b = B(
+  }, w = V(
     () => ({
       id: t,
-      label: o,
-      bounds: y,
-      isActive: d,
-      isHovered: k,
-      isSelected: g,
-      effect: l
+      label: n,
+      bounds: g,
+      isActive: p,
+      isHovered: m,
+      isSelected: v,
+      effect: u
     }),
-    [t, o, y, d, k, g, l]
+    [t, n, g, p, m, v, u]
   );
-  return /* @__PURE__ */ I.jsxs(Q.Provider, { value: b, children: [
-    /* @__PURE__ */ I.jsx(
+  return /* @__PURE__ */ C.jsxs(Z.Provider, { value: w, children: [
+    /* @__PURE__ */ C.jsx(
       "div",
       {
         "data-cutout-id": t,
@@ -1020,11 +1263,11 @@ function Ft({
           pointerEvents: "none",
           position: "absolute",
           inset: 0,
-          zIndex: d ? 20 : 10,
-          transition: l.transition,
-          ...x
+          zIndex: p ? 20 : 10,
+          transition: u.transition,
+          ...d
         },
-        children: c ? c({ isActive: d, isHovered: k, isSelected: g, bounds: y, effect: l }) : /* @__PURE__ */ I.jsx(
+        children: i ? i({ isActive: p, isHovered: m, isSelected: v, bounds: g, effect: u }) : /* @__PURE__ */ C.jsx(
           "svg",
           {
             viewBox: "0 0 1 1",
@@ -1035,22 +1278,113 @@ function Ft({
               width: "100%",
               height: "100%",
               overflow: "visible",
-              filter: u.glow ? `drop-shadow(${u.glow.split(",")[0]?.trim() ?? ""})` : "none"
+              filter: f.glow ? `drop-shadow(${f.glow.split(",")[0]?.trim() ?? ""})` : "none"
             },
-            children: /* @__PURE__ */ I.jsx(
+            children: /* @__PURE__ */ C.jsx(
               "polygon",
               {
-                points: r.map(([v, m]) => `${v},${m}`).join(" "),
-                fill: u.fill,
-                stroke: u.stroke,
-                strokeWidth: (u.strokeWidth ?? 2) * 15e-4,
+                points: r.map(([k, b]) => `${k},${b}`).join(" "),
+                fill: f.fill,
+                stroke: f.stroke,
+                strokeWidth: (f.strokeWidth ?? 2) * 15e-4,
                 strokeLinejoin: "round",
-                strokeLinecap: u.strokeDasharray ? "round" : void 0,
-                strokeDasharray: u.strokeDasharray,
-                pathLength: u.strokeDasharray ? 1 : void 0,
+                strokeLinecap: f.strokeDasharray ? "round" : void 0,
+                strokeDasharray: f.strokeDasharray,
+                pathLength: f.strokeDasharray ? 1 : void 0,
+                style: {
+                  transition: u.transition,
+                  animation: f.animation
+                }
+              }
+            )
+          }
+        )
+      }
+    ),
+    c
+  ] });
+}
+function wt(t) {
+  const { filter: r, ...n } = t;
+  return n;
+}
+function re({
+  id: t,
+  center: r,
+  radius: n,
+  label: e,
+  effect: c,
+  children: i,
+  renderLayer: s
+}) {
+  const o = Y(H), l = nt();
+  if (!o)
+    throw new Error(
+      "<CutoutViewer.CircleCutout> must be used inside <CutoutViewer>"
+    );
+  const { x: u, y: p } = r;
+  W(() => (o.registerCutout({ type: "circle", id: t, center: { x: u, y: p }, radius: n, label: e }), () => o.unregisterCutout(t)), [t, u, p, n, e, o]);
+  const m = c ? typeof c == "string" ? J[c] ?? l.effect : c : l.effect, v = l.activeId === t, x = l.hoveredId === t, g = l.selectedId === t, y = { x: 0, y: 0, w: 1, h: 1 }, d = l.boundsMap[t] ?? y, h = Math.max(1, l.viewportSize.width), f = Math.max(1, l.viewportSize.height), w = Math.min(h, f), k = n * w / h, b = n * w / f;
+  let A, _;
+  !l.enabled || !l.isAnyActive && !l.showAll ? (_ = { ...m.cutoutIdle, filter: "none", opacity: 0 }, A = m.geometryIdle) : l.showAll || v ? (_ = wt(m.cutoutActive), A = m.geometryActive) : (_ = wt(m.cutoutInactive), A = m.geometryInactive);
+  const D = A ?? {
+    fill: "rgba(37, 99, 235, 0.15)",
+    stroke: "rgba(37, 99, 235, 0.6)",
+    strokeWidth: 2
+  }, U = V(
+    () => ({
+      id: t,
+      label: e,
+      bounds: d,
+      isActive: v,
+      isHovered: x,
+      isSelected: g,
+      effect: m
+    }),
+    [t, e, d, v, x, g, m]
+  );
+  return /* @__PURE__ */ C.jsxs(Z.Provider, { value: U, children: [
+    /* @__PURE__ */ C.jsx(
+      "div",
+      {
+        "data-cutout-id": t,
+        style: {
+          pointerEvents: "none",
+          position: "absolute",
+          inset: 0,
+          zIndex: v ? 20 : 10,
+          transition: m.transition,
+          ..._
+        },
+        children: s ? s({ isActive: v, isHovered: x, isSelected: g, bounds: d, effect: m }) : /* @__PURE__ */ C.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: /* @__PURE__ */ C.jsx(
+              "ellipse",
+              {
+                cx: r.x,
+                cy: r.y,
+                rx: k,
+                ry: b,
+                fill: D.fill,
+                stroke: D.stroke,
+                strokeWidth: (D.strokeWidth ?? 2) * 15e-4,
+                strokeLinecap: D.strokeDasharray ? "round" : void 0,
+                strokeDasharray: D.strokeDasharray,
+                pathLength: D.strokeDasharray ? 1 : void 0,
                 style: {
-                  transition: l.transition,
-                  animation: u.animation
+                  transition: m.transition,
+                  animation: D.animation
                 }
               }
             )
@@ -1061,163 +1395,163 @@ function Ft({
     i
   ] });
 }
-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%"), {
+function ne(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, u;
+  return t.startsWith("top") ? (l = `${e * 100}%`, u = "-100%") : t.startsWith("bottom") ? (l = `${(e + i) * 100}%`, u = "0") : (l = `${(e + i / 2) * 100}%`, u = "-50%"), {
     position: "absolute",
-    left: a,
-    top: f,
-    transform: `translate(${s}, ${l})`
+    left: s,
+    top: l,
+    transform: `translate(${o}, ${u})`
   };
 }
-function Ut({
+function oe({
   placement: t = "top-center",
   children: r,
-  className: o = "",
-  style: n
+  className: n = "",
+  style: e
 }) {
-  const i = H(Q), c = nt();
-  if (!i)
+  const c = Y(Z), i = nt();
+  if (!c)
     throw new Error(
       "<CutoutViewer.Overlay> must be used inside <CutoutViewer.Cutout>"
     );
-  const a = c.enabled && (c.showAll || i.isActive), s = zt(t, i.bounds);
-  return /* @__PURE__ */ I.jsx(
+  const s = i.enabled && (i.showAll || c.isActive), o = ne(t, c.bounds);
+  return /* @__PURE__ */ C.jsx(
     "div",
     {
       "data-cutout-overlay": "true",
-      className: o,
+      className: n,
       style: {
         zIndex: 30,
-        transition: i.effect.transition,
-        opacity: a ? 1 : 0,
-        pointerEvents: a ? "auto" : "none",
-        ...s,
-        ...n
+        transition: c.effect.transition,
+        opacity: s ? 1 : 0,
+        pointerEvents: s ? "auto" : "none",
+        ...o,
+        ...e
       },
       children: r
     }
   );
 }
-function Xt({
+function se({
   onComplete: t,
   minPoints: r = 3,
-  closeThreshold: o = 0.03
+  closeThreshold: n = 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];
+  const [e, c] = O([]), [i, s] = O(null), o = N(null), l = M(
+    (f, w) => {
+      const k = o.current;
+      if (!k) return null;
+      const b = k.getBoundingClientRect(), A = (f - b.left) / b.width, _ = (w - b.top) / b.height;
+      return A < 0 || A > 1 || _ < 0 || _ > 1 ? null : [A, _];
     },
     []
-  ), 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;
+  ), u = M(
+    (f, w) => {
+      if (w.length < r) return !1;
+      const k = f[0] - w[0][0], b = f[1] - w[0][1];
+      return Math.sqrt(k * k + b * b) < n;
     },
-    [r, o]
-  ), d = P(
-    (u) => {
-      u.length < r || (t(u), i([]), a(null));
+    [r, n]
+  ), p = M(
+    (f) => {
+      f.length < r || (t(f), c([]), s(null));
     },
     [t, r]
-  ), k = P(() => {
-    i([]), a(null);
-  }, []), g = P(
-    (u) => {
-      a(f(u.clientX, u.clientY));
+  ), m = M(() => {
+    c([]), s(null);
+  }, []), v = M(
+    (f) => {
+      s(l(f.clientX, f.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]);
+    [l]
+  ), x = M(() => {
+    s(null);
+  }, []), g = M(
+    (f) => {
+      f.stopPropagation();
+      const w = l(f.clientX, f.clientY);
+      w && c((k) => u(w, k) ? (p(k), []) : [...k, w]);
     },
-    [f, l, d]
-  ), E = P(
-    (u) => {
-      u.stopPropagation(), i((b) => {
-        const v = b.slice(0, -1);
-        return v.length >= r ? (d(v), []) : v;
+    [l, u, p]
+  ), y = M(
+    (f) => {
+      f.stopPropagation(), c((w) => {
+        const k = w.slice(0, -1);
+        return k.length >= r ? (p(k), []) : k;
       });
     },
-    [r, d]
-  ), x = P(
-    (u) => {
-      u.preventDefault(), i((b) => b.slice(0, -1));
+    [r, p]
+  ), d = M(
+    (f) => {
+      f.preventDefault(), c((w) => w.slice(0, -1));
     },
     []
-  ), w = c !== null && l(c, n);
+  ), h = i !== null && u(i, e);
   return {
-    points: n,
-    previewPoint: c,
-    willClose: w,
-    reset: k,
-    containerRef: s,
+    points: e,
+    previewPoint: i,
+    willClose: h,
+    reset: m,
+    containerRef: o,
     containerProps: {
-      onPointerMove: g,
-      onPointerLeave: h,
-      onClick: y,
-      onDoubleClick: E,
-      onContextMenu: x
+      onPointerMove: v,
+      onPointerLeave: x,
+      onClick: g,
+      onDoubleClick: y,
+      onContextMenu: d
     }
   };
 }
-function Gt({
+function ie({
   onComplete: t,
   minPoints: r = 3,
-  closeThreshold: o = 0.03,
-  strokeColor: n = "#3b82f6",
-  enabled: i = !0,
-  style: c,
-  className: a = ""
+  closeThreshold: n = 0.03,
+  strokeColor: e = "#3b82f6",
+  enabled: c = !0,
+  style: i,
+  className: s = ""
 }) {
-  if (!H(Z))
+  if (!Y(H))
     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();
+    points: l,
+    previewPoint: u,
+    willClose: p,
+    reset: m,
+    containerRef: v,
+    containerProps: x
+  } = se({ onComplete: t, minPoints: r, closeThreshold: n });
+  W(() => {
+    function d(h) {
+      h.key === "Escape" && m();
     }
-    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(
+    return document.addEventListener("keydown", d), () => document.removeEventListener("keydown", d);
+  }, [m]), W(() => {
+    c || m();
+  }, [c, m]);
+  const g = u ? [...l, u] : l, y = g.map(([d, h]) => `${d},${h}`).join(" ");
+  return /* @__PURE__ */ C.jsx(
     "div",
     {
-      ref: g,
+      ref: v,
       "data-draw-polygon": "true",
-      className: a,
+      className: s,
       style: {
         position: "absolute",
         inset: 0,
-        cursor: i ? d ? "cell" : "crosshair" : "default",
+        cursor: c ? p ? "cell" : "crosshair" : "default",
         zIndex: 30,
-        pointerEvents: i ? "auto" : "none",
-        ...c
+        pointerEvents: c ? "auto" : "none",
+        ...i
       },
-      ...i ? h : {},
-      children: f.length > 0 && /* @__PURE__ */ I.jsxs(
+      ...c ? x : {},
+      children: l.length > 0 && /* @__PURE__ */ C.jsxs(
         "svg",
         {
           viewBox: "0 0 1 1",
@@ -1231,61 +1565,61 @@ function Gt({
             pointerEvents: "none"
           },
           children: [
-            f.length >= 3 && /* @__PURE__ */ I.jsx(
+            l.length >= 3 && /* @__PURE__ */ C.jsx(
               "polygon",
               {
-                points: f.map(([x, w]) => `${x},${w}`).join(" "),
-                fill: n,
+                points: l.map(([d, h]) => `${d},${h}`).join(" "),
+                fill: e,
                 fillOpacity: 0.15,
                 stroke: "none"
               }
             ),
-            y.length >= 2 && /* @__PURE__ */ I.jsx(
+            g.length >= 2 && /* @__PURE__ */ C.jsx(
               "polyline",
               {
-                points: E,
+                points: y,
                 fill: "none",
-                stroke: n,
+                stroke: e,
                 strokeWidth: 3e-3,
                 strokeLinecap: "round",
                 strokeLinejoin: "round",
-                strokeDasharray: l ? "0.015 0.008" : void 0
+                strokeDasharray: u ? "0.015 0.008" : void 0
               }
             ),
-            l && f.length >= 1 && /* @__PURE__ */ I.jsx(
+            u && l.length >= 1 && /* @__PURE__ */ C.jsx(
               "line",
               {
-                x1: l[0],
-                y1: l[1],
-                x2: f[0][0],
-                y2: f[0][1],
-                stroke: n,
+                x1: u[0],
+                y1: u[1],
+                x2: l[0][0],
+                y2: l[0][1],
+                stroke: e,
                 strokeWidth: 2e-3,
                 strokeDasharray: "0.015 0.008",
                 strokeLinecap: "round",
-                opacity: d ? 0.9 : 0.35
+                opacity: p ? 0.9 : 0.35
               }
             ),
-            f.map(([x, w], u) => /* @__PURE__ */ I.jsx(
+            l.map(([d, h], f) => /* @__PURE__ */ C.jsx(
               "circle",
               {
-                cx: x,
-                cy: w,
-                r: u === 0 ? 0.012 : 7e-3,
-                fill: u === 0 && d ? n : "white",
-                stroke: n,
+                cx: d,
+                cy: h,
+                r: f === 0 ? 0.012 : 7e-3,
+                fill: f === 0 && p ? e : "white",
+                stroke: e,
                 strokeWidth: 2e-3
               },
-              u
+              f
             )),
-            l && /* @__PURE__ */ I.jsx(
+            u && /* @__PURE__ */ C.jsx(
               "circle",
               {
-                cx: l[0],
-                cy: l[1],
+                cx: u[0],
+                cy: u[1],
                 r: 5e-3,
-                fill: d ? n : "white",
-                stroke: n,
+                fill: p ? e : "white",
+                stroke: e,
                 strokeWidth: 2e-3,
                 opacity: 0.8
               }
@@ -1296,7 +1630,298 @@ function Gt({
     }
   );
 }
-function vt(t) {
+function ae({
+  onComplete: t,
+  minSize: r = 0.01
+}) {
+  const [n, e] = O(null), [c, i] = O(null), s = N(null), o = M(
+    (g, y) => {
+      const d = s.current;
+      if (!d) return null;
+      const h = d.getBoundingClientRect(), f = (g - h.left) / h.width, w = (y - h.top) / h.height;
+      return {
+        x: Math.max(0, Math.min(1, f)),
+        y: Math.max(0, Math.min(1, w))
+      };
+    },
+    []
+  ), l = M(
+    (g, y) => {
+      const d = Math.min(g.x, y.x), h = Math.min(g.y, y.y), f = Math.abs(y.x - g.x), w = Math.abs(y.y - g.y);
+      return { x: d, y: h, w: f, h: w };
+    },
+    []
+  ), u = M(() => {
+    e(null), i(null);
+  }, []);
+  W(() => {
+    function g(y) {
+      y.key === "Escape" && u();
+    }
+    return document.addEventListener("keydown", g), () => document.removeEventListener("keydown", g);
+  }, [u]);
+  const p = M(
+    (g) => {
+      g.currentTarget.setPointerCapture(g.pointerId);
+      const y = o(g.clientX, g.clientY);
+      y && (e(y), i({ x: y.x, y: y.y, w: 0, h: 0 }));
+    },
+    [o]
+  ), m = M(
+    (g) => {
+      if (!n) return;
+      const y = o(g.clientX, g.clientY);
+      y && i(l(n, y));
+    },
+    [n, o, l]
+  ), v = M(
+    (g) => {
+      if (!n) return;
+      const y = o(g.clientX, g.clientY);
+      if (y) {
+        const d = l(n, y);
+        d.w >= r && d.h >= r && t(d);
+      }
+      e(null), i(null);
+    },
+    [n, o, l, r, t]
+  ), x = M(() => {
+  }, []);
+  return {
+    rect: c,
+    isDragging: n !== null,
+    reset: u,
+    containerRef: s,
+    containerProps: {
+      onPointerDown: p,
+      onPointerMove: m,
+      onPointerUp: v,
+      onPointerLeave: x
+    }
+  };
+}
+function ce({
+  onComplete: t,
+  minSize: r,
+  strokeColor: n = "#3b82f6",
+  enabled: e = !0,
+  style: c,
+  className: i = ""
+}) {
+  if (!Y(H))
+    throw new Error(
+      "<CutoutViewer.DrawRectangle> must be used inside <CutoutViewer>"
+    );
+  const { rect: o, reset: l, containerRef: u, containerProps: p } = ae({
+    onComplete: t,
+    minSize: r
+  });
+  return W(() => {
+    e || l();
+  }, [e, l]), /* @__PURE__ */ C.jsx(
+    "div",
+    {
+      ref: u,
+      "data-draw-rectangle": "true",
+      className: i,
+      style: {
+        position: "absolute",
+        inset: 0,
+        cursor: e ? "crosshair" : "default",
+        zIndex: 30,
+        pointerEvents: e ? "auto" : "none",
+        ...c
+      },
+      ...e ? p : {},
+      children: o && o.w > 0 && o.h > 0 && /* @__PURE__ */ C.jsx(
+        "svg",
+        {
+          viewBox: "0 0 1 1",
+          preserveAspectRatio: "none",
+          style: {
+            position: "absolute",
+            inset: 0,
+            width: "100%",
+            height: "100%",
+            overflow: "visible",
+            pointerEvents: "none"
+          },
+          children: /* @__PURE__ */ C.jsx(
+            "rect",
+            {
+              x: o.x,
+              y: o.y,
+              width: o.w,
+              height: o.h,
+              fill: n,
+              fillOpacity: 0.15,
+              stroke: n,
+              strokeWidth: 3e-3,
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeDasharray: "0.015 0.008"
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function le({
+  onComplete: t,
+  minRadius: r = 0.01
+}) {
+  const [n, e] = O(null), [c, i] = O(null), [s, o] = O({ width: 1, height: 1 }), l = N(null);
+  W(() => {
+    const d = l.current;
+    if (!d) return;
+    const h = () => {
+      const w = d.getBoundingClientRect();
+      o({
+        width: Math.max(1, w.width),
+        height: Math.max(1, w.height)
+      });
+    };
+    h();
+    const f = new ResizeObserver(h);
+    return f.observe(d), () => f.disconnect();
+  }, []);
+  const u = M(
+    (d, h) => {
+      const f = l.current;
+      if (!f) return null;
+      const w = f.getBoundingClientRect(), k = (d - w.left) / w.width, b = (h - w.top) / w.height;
+      return {
+        x: Math.max(0, Math.min(1, k)),
+        y: Math.max(0, Math.min(1, b))
+      };
+    },
+    []
+  ), p = M(
+    (d, h) => {
+      const f = (d.x - h.x) * s.width, w = (d.y - h.y) * s.height, k = Math.sqrt(f * f + w * w), b = Math.min(s.width, s.height);
+      return k / b;
+    },
+    [s.height, s.width]
+  ), m = M(() => {
+    e(null), i(null);
+  }, []);
+  W(() => {
+    function d(h) {
+      h.key === "Escape" && m();
+    }
+    return document.addEventListener("keydown", d), () => document.removeEventListener("keydown", d);
+  }, [m]);
+  const v = M(
+    (d) => {
+      d.currentTarget.setPointerCapture(d.pointerId);
+      const h = u(d.clientX, d.clientY);
+      h && (e(h), i({ center: h, radius: 0 }));
+    },
+    [u]
+  ), x = M(
+    (d) => {
+      if (!n) return;
+      const h = u(d.clientX, d.clientY);
+      if (!h) return;
+      const f = p(h, n);
+      i({ center: n, radius: f });
+    },
+    [n, u, p]
+  ), g = M(
+    (d) => {
+      if (!n) return;
+      const h = u(d.clientX, d.clientY);
+      if (h) {
+        const f = p(h, n);
+        f >= r && t({ center: n, radius: f });
+      }
+      e(null), i(null);
+    },
+    [n, u, p, r, t]
+  ), y = M(() => {
+  }, []);
+  return {
+    circle: c,
+    viewportSize: s,
+    isDragging: n !== null,
+    reset: m,
+    containerRef: l,
+    containerProps: {
+      onPointerDown: v,
+      onPointerMove: x,
+      onPointerUp: g,
+      onPointerLeave: y
+    }
+  };
+}
+function ue({
+  onComplete: t,
+  minRadius: r,
+  strokeColor: n = "#3b82f6",
+  enabled: e = !0,
+  style: c,
+  className: i = ""
+}) {
+  if (!Y(H))
+    throw new Error(
+      "<CutoutViewer.DrawCircle> must be used inside <CutoutViewer>"
+    );
+  const { circle: o, viewportSize: l, reset: u, containerRef: p, containerProps: m } = le({
+    onComplete: t,
+    minRadius: r
+  }), v = Math.max(1, l.width), x = Math.max(1, l.height), g = Math.min(v, x);
+  return W(() => {
+    e || u();
+  }, [e, u]), /* @__PURE__ */ C.jsx(
+    "div",
+    {
+      ref: p,
+      "data-draw-circle": "true",
+      className: i,
+      style: {
+        position: "absolute",
+        inset: 0,
+        cursor: e ? "crosshair" : "default",
+        zIndex: 30,
+        pointerEvents: e ? "auto" : "none",
+        ...c
+      },
+      ...e ? m : {},
+      children: o && o.radius > 0 && /* @__PURE__ */ C.jsx(
+        "svg",
+        {
+          viewBox: "0 0 1 1",
+          preserveAspectRatio: "none",
+          style: {
+            position: "absolute",
+            inset: 0,
+            width: "100%",
+            height: "100%",
+            overflow: "visible",
+            pointerEvents: "none"
+          },
+          children: /* @__PURE__ */ C.jsx(
+            "ellipse",
+            {
+              cx: o.center.x,
+              cy: o.center.y,
+              rx: o.radius * g / v,
+              ry: o.radius * g / x,
+              fill: n,
+              fillOpacity: 0.15,
+              stroke: n,
+              strokeWidth: 3e-3,
+              strokeLinecap: "round",
+              strokeDasharray: "0.015 0.008"
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function xt(t) {
   switch (t.type) {
     case "image":
       return `image:${t.src}:${t.label ?? ""}`;
@@ -1304,83 +1929,87 @@ function vt(t) {
       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 qt({
+function he({
   mainImage: t,
   mainImageAlt: r = "Main image",
-  effect: o = "elevate",
-  enabled: n = !0,
-  showAll: i = !1,
-  alphaThreshold: c = 30,
-  hoverLeaveDelay: a = 150,
-  children: s,
-  className: f = "",
-  style: l,
-  onHover: d,
-  onActiveChange: k,
-  onSelect: g
+  effect: n = "elevate",
+  enabled: e = !0,
+  showAll: c = !1,
+  alphaThreshold: i = 30,
+  hoverLeaveDelay: s = 150,
+  children: o,
+  className: l = "",
+  style: u,
+  onHover: p,
+  onActiveChange: m,
+  onSelect: v
 }) {
-  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;
+  const x = typeof n == "string" ? J[n] ?? J.elevate : n;
+  W(() => {
+    Xt(x);
+  }, [x]);
+  const [g, y] = O(() => /* @__PURE__ */ new Map()), d = M(
+    (I) => {
+      y((z) => {
+        const L = z.get(I.id);
+        if (L && xt(L) === xt(I))
+          return z;
+        const G = new Map(z);
+        return G.set(I.id, I), G;
       });
     },
     []
-  ), w = P(($) => {
-    E((N) => {
-      if (!N.has($)) return N;
-      const Y = new Map(N);
-      return Y.delete($), Y;
+  ), h = M((I) => {
+    y((z) => {
+      if (!z.has(I)) return z;
+      const L = new Map(z);
+      return L.delete(I), L;
     });
-  }, []), 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(
+  }, []), f = V(
+    () => ({ registerCutout: d, unregisterCutout: h }),
+    [d, h]
+  ), w = V(() => Array.from(g.values()), [g]), { activeId: k, selectedId: b, hoveredId: A, viewportSize: _, boundsMap: X, contourMap: D, containerRef: U, containerProps: Q } = Ft(w, e, i, s), B = N(null), q = N(null), S = N(null);
+  W(() => {
+    A !== B.current && (B.current = A, p?.(A));
+  }, [A, p]), W(() => {
+    k !== q.current && (q.current = k, m?.(k));
+  }, [k, m]), W(() => {
+    b !== S.current && (S.current = b, v?.(b));
+  }, [b, v]);
+  const R = c || k !== null, P = V(
     () => ({
-      activeId: v,
-      selectedId: m,
-      hoveredId: M,
-      effect: h,
-      enabled: n,
-      showAll: i,
-      boundsMap: D,
-      isAnyActive: W
+      activeId: k,
+      selectedId: b,
+      hoveredId: A,
+      viewportSize: _,
+      effect: x,
+      enabled: e,
+      showAll: c,
+      boundsMap: X,
+      contourMap: D,
+      isAnyActive: R
     }),
-    [v, m, M, h, n, i, D, W]
+    [k, b, A, _, x, e, c, X, D, R]
   );
-  return /* @__PURE__ */ I.jsx(Z.Provider, { value: u, children: /* @__PURE__ */ I.jsx(xt.Provider, { value: U, children: /* @__PURE__ */ I.jsxs(
+  return /* @__PURE__ */ C.jsx(H.Provider, { value: f, children: /* @__PURE__ */ C.jsx(kt.Provider, { value: P, children: /* @__PURE__ */ C.jsxs(
     "div",
     {
-      ref: z,
-      className: f,
+      ref: U,
+      className: l,
       style: {
         position: "relative",
         width: "100%",
         overflow: "hidden",
-        cursor: W && n ? "pointer" : "default",
-        ...l
+        cursor: R && e ? "pointer" : "default",
+        ...u
       },
-      ...j,
+      ...Q,
       children: [
-        /* @__PURE__ */ I.jsx(
+        /* @__PURE__ */ C.jsx(
           "img",
           {
             src: t,
@@ -1391,52 +2020,60 @@ function qt({
               width: "100%",
               height: "auto",
               userSelect: "none",
-              transition: h.transition,
-              ...W && n ? h.mainImageHovered : {}
+              transition: x.transition,
+              ...R && e ? x.mainImageHovered : {}
             }
           }
         ),
-        /* @__PURE__ */ I.jsx(
+        /* @__PURE__ */ C.jsx(
           "div",
           {
             style: {
               pointerEvents: "none",
               position: "absolute",
               inset: 0,
-              transition: h.transition,
-              opacity: W && n ? 1 : 0,
-              ...h.vignetteStyle
+              transition: x.transition,
+              opacity: R && e ? 1 : 0,
+              ...x.vignetteStyle
             }
           }
         ),
-        s
+        o
       ]
     }
   ) }) });
 }
-const tt = qt;
-tt.Cutout = Ht;
-tt.BBoxCutout = Lt;
-tt.PolygonCutout = Ft;
-tt.Overlay = Ut;
-tt.DrawPolygon = Gt;
+const F = he;
+F.Cutout = Qt;
+F.BBoxCutout = te;
+F.PolygonCutout = ee;
+F.CircleCutout = re;
+F.Overlay = oe;
+F.DrawPolygon = ie;
+F.DrawRectangle = ce;
+F.DrawCircle = ue;
 export {
-  Ut as CutoutOverlay,
-  tt as CutoutViewer,
-  Gt as DrawPolygon,
-  _t as ImageHitTestStrategy,
-  St as PolygonHitTestStrategy,
-  jt as RectHitTestStrategy,
-  Pt as createHitTestStrategy,
-  at as defineKeyframes,
-  Ot as elevateEffect,
-  Dt as glowEffect,
+  Vt as CircleHitTestStrategy,
+  oe as CutoutOverlay,
+  F as CutoutViewer,
+  ue as DrawCircle,
+  ie as DrawPolygon,
+  ce as DrawRectangle,
+  Ot as ImageHitTestStrategy,
+  Nt as PolygonHitTestStrategy,
+  Lt as RectHitTestStrategy,
+  Bt as createHitTestStrategy,
+  bt as defineKeyframes,
+  Ut as elevateEffect,
+  qt as glowEffect,
   J as hoverEffects,
-  Nt as liftEffect,
-  Bt as shimmerEffect,
-  Yt as subtleEffect,
-  Vt as traceEffect,
-  Kt as useCutout,
-  Mt as useCutoutHitTest,
-  Xt as useDrawPolygon
+  Gt as liftEffect,
+  Zt as shimmerEffect,
+  Kt as subtleEffect,
+  Jt as traceEffect,
+  de as useCutout,
+  Ft as useCutoutHitTest,
+  le as useDrawCircle,
+  se as useDrawPolygon,
+  ae as useDrawRectangle
 };