react-img-cutout 1.2.0 → 1.4.0

package/dist/index.js

@@ -1,352 +1,451 @@
-import kt, { useState as L, useRef as B, useCallback as P, useMemo as F, useEffect as O, useContext as z, createContext as lt } from "react";
-var nt = { exports: {} }, G = {};
+import Ct, { useState as L, useRef as V, useCallback as M, useMemo as B, useEffect as W, useContext as N, 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"), e = /* @__PURE__ */ Symbol.for("react.fragment");
-  function n(r, i, l) {
-    var a = null;
-    if (l !== void 0 && (a = "" + l), i.key !== void 0 && (a = "" + i.key), "key" in i) {
-      l = {};
-      for (var s in i)
-        s !== "key" && (l[s] = i[s]);
-    } else l = i;
-    return i = l.ref, {
+  var t = /* @__PURE__ */ Symbol.for("react.transitional.element"), r = /* @__PURE__ */ Symbol.for("react.fragment");
+  function n(e, l, s) {
+    var i = null;
+    if (s !== void 0 && (i = "" + s), l.key !== void 0 && (i = "" + l.key), "key" in l) {
+      s = {};
+      for (var o in l)
+        o !== "key" && (s[o] = l[o]);
+    } else s = l;
+    return l = s.ref, {
       $$typeof: t,
-      type: r,
-      key: a,
-      ref: i !== void 0 ? i : null,
-      props: l
+      type: e,
+      key: i,
+      ref: l !== void 0 ? l : null,
+      props: s
     };
   }
-  return G.Fragment = e, G.jsx = n, G.jsxs = n, G;
+  return tt.Fragment = r, tt.jsx = n, tt.jsxs = n, tt;
 }
-var J = {};
-var ft;
+var et = {};
+var ht;
 function It() {
-  return ft || (ft = 1, process.env.NODE_ENV !== "production" && (function() {
-    function t(o) {
-      if (o == null) return null;
-      if (typeof o == "function")
-        return o.$$typeof === X ? null : o.displayName || o.name || null;
-      if (typeof o == "string") return o;
-      switch (o) {
-        case f:
+  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 g:
           return "Fragment";
-        case h:
+        case d:
           return "Profiler";
-        case b:
+        case h:
           return "StrictMode";
-        case $:
+        case R:
           return "Suspense";
-        case N:
+        case P:
           return "SuspenseList";
-        case q:
+        case H:
           return "Activity";
       }
-      if (typeof o == "object")
-        switch (typeof o.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."
-        ), o.$$typeof) {
-          case v:
+        ), a.$$typeof) {
+          case y:
             return "Portal";
+          case C:
+            return a.displayName || "Context";
           case w:
-            return o.displayName || "Context";
-          case E:
-            return (o._context.displayName || "Context") + ".Consumer";
-          case x:
-            var y = o.render;
-            return o = o.displayName, o || (o = y.displayName || y.name || "", o = o !== "" ? "ForwardRef(" + o + ")" : "ForwardRef"), o;
-          case H:
-            return y = o.displayName || null, y !== null ? y : t(o.type) || "Memo";
-          case V:
-            y = o._payload, o = o._init;
+            return (a._context.displayName || "Context") + ".Consumer";
+          case b:
+            var k = a.render;
+            return a = a.displayName, a || (a = k.displayName || k.name || "", a = a !== "" ? "ForwardRef(" + a + ")" : "ForwardRef"), a;
+          case U:
+            return k = a.displayName || null, k !== null ? k : t(a.type) || "Memo";
+          case D:
+            k = a._payload, a = a._init;
             try {
-              return t(o(y));
+              return t(a(k));
             } catch {
             }
         }
       return null;
     }
-    function e(o) {
-      return "" + o;
+    function r(a) {
+      return "" + a;
     }
-    function n(o) {
+    function n(a) {
       try {
-        e(o);
-        var y = !1;
+        r(a);
+        var k = !1;
       } catch {
-        y = !0;
+        k = !0;
       }
-      if (y) {
-        y = console;
-        var A = y.error, S = typeof Symbol == "function" && Symbol.toStringTag && o[Symbol.toStringTag] || o.constructor.name || "Object";
-        return A.call(
-          y,
+      if (k) {
+        k = console;
+        var _ = k.error, $ = typeof Symbol == "function" && Symbol.toStringTag && a[Symbol.toStringTag] || a.constructor.name || "Object";
+        return _.call(
+          k,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          S
-        ), e(o);
+          $
+        ), r(a);
       }
     }
-    function r(o) {
-      if (o === f) return "<>";
-      if (typeof o == "object" && o !== null && o.$$typeof === V)
+    function e(a) {
+      if (a === g) return "<>";
+      if (typeof a == "object" && a !== null && a.$$typeof === D)
         return "<...>";
       try {
-        var y = t(o);
-        return y ? "<" + y + ">" : "<...>";
+        var k = t(a);
+        return k ? "<" + k + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function i() {
-      var o = j.A;
-      return o === null ? null : o.getOwner();
-    }
     function l() {
+      var a = q.A;
+      return a === null ? null : a.getOwner();
+    }
+    function s() {
       return Error("react-stack-top-frame");
     }
-    function a(o) {
-      if (R.call(o, "key")) {
-        var y = Object.getOwnPropertyDescriptor(o, "key").get;
-        if (y && y.isReactWarning) return !1;
+    function i(a) {
+      if (G.call(a, "key")) {
+        var k = Object.getOwnPropertyDescriptor(a, "key").get;
+        if (k && k.isReactWarning) return !1;
       }
-      return o.key !== void 0;
+      return a.key !== void 0;
     }
-    function s(o, y) {
-      function A() {
-        M || (M = !0, console.error(
+    function o(a, k) {
+      function _() {
+        I || (I = !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)",
-          y
+          k
         ));
       }
-      A.isReactWarning = !0, Object.defineProperty(o, "key", {
-        get: A,
+      _.isReactWarning = !0, Object.defineProperty(a, "key", {
+        get: _,
         configurable: !0
       });
     }
-    function u() {
-      var o = t(this.type);
-      return W[o] || (W[o] = !0, console.error(
+    function c() {
+      var a = t(this.type);
+      return S[a] || (S[a] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
-      )), o = this.props.ref, o !== void 0 ? o : null;
+      )), a = this.props.ref, a !== void 0 ? a : null;
     }
-    function c(o, y, A, S, rt, st) {
-      var T = A.ref;
-      return o = {
-        $$typeof: m,
-        type: o,
-        key: y,
-        props: A,
-        _owner: S
-      }, (T !== void 0 ? T : null) !== null ? Object.defineProperty(o, "ref", {
+    function u(a, k, _, $, ot, it) {
+      var T = _.ref;
+      return a = {
+        $$typeof: f,
+        type: a,
+        key: k,
+        props: _,
+        _owner: $
+      }, (T !== void 0 ? T : null) !== null ? Object.defineProperty(a, "ref", {
         enumerable: !1,
-        get: u
-      }) : Object.defineProperty(o, "ref", { enumerable: !1, value: null }), o._store = {}, Object.defineProperty(o._store, "validated", {
+        get: c
+      }) : 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(o, "_debugInfo", {
+      }), Object.defineProperty(a, "_debugInfo", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: null
-      }), Object.defineProperty(o, "_debugStack", {
+      }), Object.defineProperty(a, "_debugStack", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: rt
-      }), Object.defineProperty(o, "_debugTask", {
+        value: ot
+      }), Object.defineProperty(a, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: st
-      }), Object.freeze && (Object.freeze(o.props), Object.freeze(o)), o;
+        value: it
+      }), Object.freeze && (Object.freeze(a.props), Object.freeze(a)), a;
     }
-    function d(o, y, A, S, rt, st) {
-      var T = y.children;
+    function p(a, k, _, $, ot, it) {
+      var T = k.children;
       if (T !== void 0)
-        if (S)
-          if (C(T)) {
-            for (S = 0; S < T.length; S++)
-              k(T[S]);
+        if ($)
+          if (j(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(T);
-      if (R.call(y, "key")) {
-        T = t(o);
-        var U = Object.keys(y).filter(function(wt) {
-          return wt !== "key";
+        else m(T);
+      if (G.call(k, "key")) {
+        T = t(a);
+        var K = Object.keys(k).filter(function(Et) {
+          return Et !== "key";
         });
-        S = 0 < U.length ? "{key: someKey, " + U.join(": ..., ") + ": ...}" : "{key: someKey}", ct[T + S] || (U = 0 < U.length ? "{" + U.join(": ..., ") + ": ...}" : "{}", console.error(
+        $ = 0 < K.length ? "{key: someKey, " + K.join(": ..., ") + ": ...}" : "{key: someKey}", Y[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} />`,
-          S,
+          $,
           T,
-          U,
+          K,
           T
-        ), ct[T + S] = !0);
+        ), Y[T + $] = !0);
       }
-      if (T = null, A !== void 0 && (n(A), T = "" + A), a(y) && (n(y.key), T = "" + y.key), "key" in y) {
-        A = {};
-        for (var it in y)
-          it !== "key" && (A[it] = y[it]);
-      } else A = y;
-      return T && s(
-        A,
-        typeof o == "function" ? o.displayName || o.name || "Unknown" : o
-      ), c(
-        o,
+      if (T = null, _ !== void 0 && (n(_), T = "" + _), i(k) && (n(k.key), T = "" + k.key), "key" in k) {
+        _ = {};
+        for (var at in k)
+          at !== "key" && (_[at] = k[at]);
+      } else _ = k;
+      return T && o(
+        _,
+        typeof a == "function" ? a.displayName || a.name || "Unknown" : a
+      ), u(
+        a,
         T,
-        A,
-        i(),
-        rt,
-        st
+        _,
+        l(),
+        ot,
+        it
       );
     }
-    function k(o) {
-      p(o) ? o._store && (o._store.validated = 1) : typeof o == "object" && o !== null && o.$$typeof === V && (o._payload.status === "fulfilled" ? p(o._payload.value) && o._payload.value._store && (o._payload.value._store.validated = 1) : o._store && (o._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 p(o) {
-      return typeof o == "object" && o !== null && o.$$typeof === m;
+    function v(a) {
+      return typeof a == "object" && a !== null && a.$$typeof === f;
     }
-    var g = kt, m = /* @__PURE__ */ Symbol.for("react.transitional.element"), v = /* @__PURE__ */ Symbol.for("react.portal"), f = /* @__PURE__ */ Symbol.for("react.fragment"), b = /* @__PURE__ */ Symbol.for("react.strict_mode"), h = /* @__PURE__ */ Symbol.for("react.profiler"), E = /* @__PURE__ */ Symbol.for("react.consumer"), w = /* @__PURE__ */ Symbol.for("react.context"), x = /* @__PURE__ */ Symbol.for("react.forward_ref"), $ = /* @__PURE__ */ Symbol.for("react.suspense"), N = /* @__PURE__ */ Symbol.for("react.suspense_list"), H = /* @__PURE__ */ Symbol.for("react.memo"), V = /* @__PURE__ */ Symbol.for("react.lazy"), q = /* @__PURE__ */ Symbol.for("react.activity"), X = /* @__PURE__ */ Symbol.for("react.client.reference"), j = g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, R = Object.prototype.hasOwnProperty, C = Array.isArray, _ = console.createTask ? console.createTask : function() {
+    var x = Ct, f = /* @__PURE__ */ Symbol.for("react.transitional.element"), y = /* @__PURE__ */ Symbol.for("react.portal"), g = /* @__PURE__ */ Symbol.for("react.fragment"), h = /* @__PURE__ */ Symbol.for("react.strict_mode"), d = /* @__PURE__ */ Symbol.for("react.profiler"), w = /* @__PURE__ */ Symbol.for("react.consumer"), C = /* @__PURE__ */ Symbol.for("react.context"), b = /* @__PURE__ */ Symbol.for("react.forward_ref"), R = /* @__PURE__ */ Symbol.for("react.suspense"), P = /* @__PURE__ */ Symbol.for("react.suspense_list"), U = /* @__PURE__ */ Symbol.for("react.memo"), D = /* @__PURE__ */ Symbol.for("react.lazy"), H = /* @__PURE__ */ Symbol.for("react.activity"), Q = /* @__PURE__ */ Symbol.for("react.client.reference"), q = x.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, G = Object.prototype.hasOwnProperty, j = Array.isArray, A = console.createTask ? console.createTask : function() {
       return null;
     };
-    g = {
-      react_stack_bottom_frame: function(o) {
-        return o();
+    x = {
+      react_stack_bottom_frame: function(a) {
+        return a();
       }
     };
-    var M, W = {}, Y = g.react_stack_bottom_frame.bind(
-      g,
-      l
-    )(), D = _(r(l)), ct = {};
-    J.Fragment = f, J.jsx = function(o, y, A) {
-      var S = 1e4 > j.recentlyCreatedOwnerStacks++;
-      return d(
-        o,
-        y,
-        A,
+    var I, S = {}, O = x.react_stack_bottom_frame.bind(
+      x,
+      s
+    )(), z = A(e(s)), Y = {};
+    et.Fragment = g, et.jsx = function(a, k, _) {
+      var $ = 1e4 > q.recentlyCreatedOwnerStacks++;
+      return p(
+        a,
+        k,
+        _,
         !1,
-        S ? Error("react-stack-top-frame") : Y,
-        S ? _(r(o)) : D
+        $ ? Error("react-stack-top-frame") : O,
+        $ ? A(e(a)) : z
       );
-    }, J.jsxs = function(o, y, A) {
-      var S = 1e4 > j.recentlyCreatedOwnerStacks++;
-      return d(
-        o,
-        y,
-        A,
+    }, et.jsxs = function(a, k, _) {
+      var $ = 1e4 > q.recentlyCreatedOwnerStacks++;
+      return p(
+        a,
+        k,
+        _,
         !0,
-        S ? Error("react-stack-top-frame") : Y,
-        S ? _(r(o)) : D
+        $ ? Error("react-stack-top-frame") : O,
+        $ ? A(e(a)) : z
       );
     };
-  })()), J;
+  })()), et;
 }
-var dt;
-function Ct() {
-  return dt || (dt = 1, process.env.NODE_ENV === "production" ? nt.exports = Et() : nt.exports = It()), nt.exports;
+var ft;
+function Rt() {
+  return ft || (ft = 1, process.env.NODE_ENV === "production" ? st.exports = Mt() : st.exports = It()), st.exports;
 }
-var I = Ct();
-const At = 200;
-function Rt(t, e, n) {
-  const r = n[0] - e[0], i = n[1] - e[1], l = r * r + i * i;
-  if (l === 0) {
-    const s = t[0] - e[0], u = t[1] - e[1];
-    return Math.sqrt(s * s + u * u);
+var E = Rt();
+const At = 400;
+function Pt(t, r, n) {
+  const e = n[0] - r[0], l = n[1] - r[1], s = e * e + l * l;
+  if (s === 0) {
+    const o = t[0] - r[0], c = t[1] - r[1];
+    return Math.sqrt(o * o + c * c);
   }
-  return Math.abs(r * (e[1] - t[1]) - i * (e[0] - t[0])) / Math.sqrt(l);
+  return Math.abs(e * (r[1] - t[1]) - l * (r[0] - t[0])) / Math.sqrt(s);
 }
-function at(t, e) {
+function ct(t, r) {
   if (t.length <= 2) return t;
-  let n = 0, r = 0;
-  const i = t[0], l = t[t.length - 1];
-  for (let a = 1; a < t.length - 1; a++) {
-    const s = Rt(t[a], i, l);
-    s > n && (n = s, r = a);
+  let n = 0, e = 0;
+  const l = t[0], s = t[t.length - 1];
+  for (let i = 1; i < t.length - 1; i++) {
+    const o = Pt(t[i], l, s);
+    o > n && (n = o, e = i);
   }
-  if (n > e) {
-    const a = at(t.slice(0, r + 1), e), s = at(t.slice(r), e);
-    return a.slice(0, -1).concat(s);
+  if (n > r) {
+    const i = ct(t.slice(0, e + 1), r), o = ct(t.slice(e), r);
+    return i.slice(0, -1).concat(o);
   }
-  return [i, l];
+  return [l, s];
 }
-function _t(t, e, n) {
-  let r = -1, i = -1;
-  t: for (let g = 0; g < n; g++)
-    for (let m = 0; m < e; m++)
-      if (t[g * e + m]) {
-        r = m, i = g;
-        break t;
-      }
-  if (r < 0) return [];
-  const l = [1, 1, 0, -1, -1, -1, 0, 1], a = [0, 1, 1, 1, 0, -1, -1, -1], s = [];
-  let u = r, c = i, d = 5;
-  const k = e * n * 4;
-  let p = 0;
-  do {
-    s.push([u, c]);
-    let g = !1;
-    for (let m = 0; m < 8; m++) {
-      const v = (d + m) % 8, f = u + l[v], b = c + a[v];
-      if (f >= 0 && f < e && b >= 0 && b < n && t[b * e + f]) {
-        u = f, c = b, d = ((v + 4) % 8 + 1) % 8, g = !0;
-        break;
-      }
+function dt(t) {
+  let r = 0;
+  const n = t.length;
+  for (let e = 0; e < n; e++) {
+    const [l, s] = t[e], [i, o] = t[(e + 1) % n];
+    r += l * o - i * s;
+  }
+  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 l = [];
+  for (let s = 0; s < n - 1; s++)
+    for (let i = 0; i < r - 1; i++) {
+      const o = t[s * r + i], c = t[s * r + i + 1], u = t[(s + 1) * r + i + 1], p = t[(s + 1) * r + i];
+      let m = 0;
+      if (o >= e && (m |= 1), c >= e && (m |= 2), u >= e && (m |= 4), p >= e && (m |= 8), m === 0 || m === 15) continue;
+      const v = (x) => {
+        switch (x) {
+          case 0: {
+            const f = c - o, y = Math.abs(f) < 1e-10 ? 0.5 : Math.max(0, Math.min(1, (e - o) / f));
+            return [i + y, s];
+          }
+          case 1: {
+            const f = u - c, y = Math.abs(f) < 1e-10 ? 0.5 : Math.max(0, Math.min(1, (e - c) / f));
+            return [i + 1, s + y];
+          }
+          case 2: {
+            const f = u - p, y = Math.abs(f) < 1e-10 ? 0.5 : Math.max(0, Math.min(1, (e - p) / f));
+            return [i + y, s + 1];
+          }
+          case 3: {
+            const f = p - o, y = Math.abs(f) < 1e-10 ? 0.5 : Math.max(0, Math.min(1, (e - o) / f));
+            return [i, s + y];
+          }
+          default:
+            return [i + 0.5, s + 0.5];
+        }
+      };
+      for (const [x, f] of jt[m])
+        l.push([v(x), v(f)]);
     }
-    if (!g || ++p > k) break;
-  } while (u !== r || c !== i);
-  return s;
+  return l;
 }
-function jt(t, e, n, r = 30, i = 3e-3) {
-  if (e <= 0 || n <= 0 || t.length === 0) return [];
-  const l = Math.min(1, At / Math.max(e, n)), a = Math.max(1, Math.round(e * l)), s = Math.max(1, Math.round(n * l)), u = new Uint8Array(a * s);
-  for (let p = 0; p < s; p++) {
-    const g = Math.min(n - 1, Math.floor(p / l));
-    for (let m = 0; m < a; m++) {
-      const v = Math.min(e - 1, Math.floor(m / l));
-      u[p * a + m] = t[g * e + v] > r ? 1 : 0;
+function $t(t) {
+  if (t.length === 0) return [];
+  const r = (s) => `${Math.round(s[0] * 1e4)},${Math.round(s[1] * 1e4)}`, n = /* @__PURE__ */ new Map();
+  for (let s = 0; s < t.length; s++)
+    for (const i of [0, 1]) {
+      const o = r(t[s][i]);
+      let c = n.get(o);
+      c || (c = [], n.set(o, c)), c.push({ idx: s, end: i });
+    }
+  const e = new Uint8Array(t.length), l = [];
+  for (let s = 0; s < t.length; s++) {
+    if (e[s]) continue;
+    const i = [];
+    let o = s, c = 1, u = 0;
+    const p = t.length + 1;
+    for (; u++ < p && !e[o]; ) {
+      e[o] = 1;
+      const m = c === 1 ? 0 : 1;
+      i.push(t[o][m]);
+      const v = t[o][c], x = r(v), f = n.get(x);
+      if (!f) break;
+      const y = f.find((g) => !e[g.idx]);
+      if (!y) break;
+      o = y.idx, c = y.end === 0 ? 1 : 0;
     }
+    i.length >= 3 && l.push(i);
   }
-  const c = _t(u, a, s);
-  if (c.length < 3) return [];
-  const d = c.map(([p, g]) => [
-    (p + 0.5) / a,
-    (g + 0.5) / s
-  ]), k = at(d, i);
-  return k.length >= 3 ? k : d;
+  return l;
 }
-function St(t, e) {
-  const n = new Uint8Array(e);
-  for (let r = 0; r < e; r++)
-    n[r] = t[r * 4 + 3];
+function Tt(t, r, n, e = 30, l = 2e-3) {
+  if (r <= 0 || n <= 0 || t.length === 0) return [];
+  const s = Math.min(1, At / Math.max(r, n)), i = Math.max(1, Math.round(r * s)), o = Math.max(1, Math.round(n * s)), c = i + 2, u = o + 2, p = new Float32Array(c * u);
+  for (let h = 0; h < o; h++) {
+    const d = Math.min(n - 1, Math.floor(h / s));
+    for (let w = 0; w < i; w++) {
+      const C = Math.min(r - 1, Math.floor(w / s));
+      p[(h + 1) * c + (w + 1)] = t[d * r + C];
+    }
+  }
+  const m = _t(p, c, u, e), v = $t(m);
+  if (v.length === 0) return [];
+  let x = v[0], f = Math.abs(dt(x));
+  for (let h = 1; h < v.length; h++) {
+    const d = Math.abs(dt(v[h]));
+    d > f && (x = v[h], f = d);
+  }
+  const y = x.map(([h, d]) => [
+    (h - 1) / i,
+    (d - 1) / o
+  ]), g = St(y, l);
+  return g.length >= 3 ? g : y;
+}
+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 l = t[(e - 1 + r) % r], s = t[e], i = t[(e + 1) % r], o = t[(e + 2) % r], c = s[0] + (i[0] - l[0]) / 6, u = s[1] + (i[1] - l[1]) / 6, p = i[0] - (o[0] - s[0]) / 6, m = i[1] - (o[1] - s[1]) / 6;
+    n.push(`C${c},${u} ${p},${m} ${i[0]},${i[1]}`);
+  }
+  return n.push("Z"), n.join("");
+}
+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 Tt(t, e, n, r) {
-  if (e <= 0 || n <= 0) return { x: 0, y: 0, w: 1, h: 1 };
-  let i = e, l = n, a = 0, s = 0, u = !1;
-  for (let c = 0; c < n; c++)
-    for (let d = 0; d < e; d++)
-      t[c * e + d] > r && (d < i && (i = d), d > a && (a = d), c < l && (l = c), c > s && (s = c), u = !0);
-  return u ? {
-    x: i / e,
-    y: l / n,
-    w: (a - i + 1) / e,
-    h: (s - l + 1) / n
+function Ot(t, r, n, e) {
+  if (r <= 0 || n <= 0) return { x: 0, y: 0, w: 1, h: 1 };
+  let l = r, s = n, i = 0, o = 0, c = !1;
+  for (let u = 0; u < n; u++)
+    for (let p = 0; p < r; p++)
+      t[u * r + p] > e && (p < l && (l = p), p > i && (i = p), u < s && (s = u), u > o && (o = u), c = !0);
+  return c ? {
+    x: l / r,
+    y: s / n,
+    w: (i - l + 1) / r,
+    h: (o - s + 1) / n
   } : { x: 0, y: 0, w: 1, h: 1 };
 }
-class Pt {
+class zt {
   id;
   bounds = { x: 0, y: 0, w: 1, h: 1 };
   contour = [];
@@ -359,8 +458,8 @@ class Pt {
   /** Source image dimensions (pixels) — needed to map normalized coords to pixel indices */
   width = 0;
   height = 0;
-  constructor(e, n) {
-    this.id = e.id, this.src = e.src, this.threshold = n;
+  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.
@@ -377,20 +476,20 @@ class Pt {
    * empty alpha buffer, which means hitTest will always return false.
    */
   async prepare() {
-    const e = new Image();
-    e.crossOrigin = "anonymous", e.src = this.src, await new Promise((a) => {
-      e.onload = () => a(), e.onerror = () => a();
+    const r = new Image();
+    r.crossOrigin = "anonymous", r.src = this.src, await new Promise((i) => {
+      r.onload = () => i(), r.onerror = () => i();
     });
-    const n = e.naturalWidth, r = e.naturalHeight;
-    if (n <= 0 || r <= 0) return;
-    const i = document.createElement("canvas");
-    i.width = n, i.height = r;
-    const l = i.getContext("2d", { willReadFrequently: !0 });
-    if (l)
+    const n = r.naturalWidth, e = r.naturalHeight;
+    if (n <= 0 || e <= 0) return;
+    const l = document.createElement("canvas");
+    l.width = n, l.height = e;
+    const s = l.getContext("2d", { willReadFrequently: !0 });
+    if (s)
       try {
-        l.drawImage(e, 0, 0);
-        const a = l.getImageData(0, 0, n, r);
-        this.alpha = St(a.data, n * r), this.width = n, this.height = r, this.bounds = Tt(this.alpha, n, r, this.threshold), this.contour = jt(this.alpha, n, r, this.threshold);
+        s.drawImage(r, 0, 0);
+        const i = s.getImageData(0, 0, n, e);
+        this.alpha = Wt(i.data, n * e), this.width = n, this.height = e, this.bounds = Ot(this.alpha, n, e, this.threshold), this.contour = Tt(this.alpha, n, e, this.threshold);
       } catch {
         this.alpha = new Uint8Array(0);
       }
@@ -410,50 +509,50 @@ class Pt {
    * @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(e, n) {
+  hitTest(r, n) {
     if (this.alpha.length === 0) return !1;
-    const r = this.bounds;
-    if (e < r.x || e > r.x + r.w || n < r.y || n > r.y + r.h) return !1;
-    const i = Math.min(this.width - 1, Math.max(0, Math.floor(e * this.width))), l = Math.min(
+    const e = this.bounds;
+    if (r < e.x || r > e.x + e.w || n < e.y || n > e.y + e.h) return !1;
+    const l = Math.min(this.width - 1, Math.max(0, Math.floor(r * this.width))), s = Math.min(
       this.height - 1,
       Math.max(0, Math.floor(n * this.height))
     );
-    return this.alpha[l * this.width + i] > this.threshold;
+    return this.alpha[s * this.width + l] > this.threshold;
   }
 }
-class Mt {
+class Lt {
   id;
   bounds;
-  constructor(e) {
-    this.id = e.id, this.bounds = { ...e.bounds };
+  constructor(r) {
+    this.id = r.id, this.bounds = { ...r.bounds };
   }
-  hitTest(e, n) {
-    const r = this.bounds;
-    return e >= r.x && e <= r.x + r.w && n >= r.y && n <= r.y + r.h;
+  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 $t(t, e, n) {
-  let r = !1;
-  for (let i = 0, l = n.length - 1; i < n.length; l = i++) {
-    const a = n[i][0], s = n[i][1], u = n[l][0], c = n[l][1];
-    s > e != c > e && t < (u - a) * (e - s) / (c - s) + a && (r = !r);
+function Yt(t, r, n) {
+  let e = !1;
+  for (let l = 0, s = n.length - 1; l < n.length; s = l++) {
+    const i = n[l][0], o = n[l][1], c = n[s][0], u = n[s][1];
+    o > r != u > r && t < (c - i) * (r - o) / (u - o) + i && (e = !e);
   }
-  return r;
+  return e;
 }
-class Dt {
+class Nt {
   id;
   bounds;
   points;
-  constructor(e) {
-    this.id = e.id, this.points = e.points;
-    let n = 1 / 0, r = 1 / 0, i = -1 / 0, l = -1 / 0;
-    for (const [a, s] of e.points)
-      a < n && (n = a), a > i && (i = a), s < r && (r = s), s > l && (l = s);
+  constructor(r) {
+    this.id = r.id, this.points = r.points;
+    let n = 1 / 0, e = 1 / 0, l = -1 / 0, s = -1 / 0;
+    for (const [i, o] of r.points)
+      i < n && (n = i), i > l && (l = i), o < e && (e = o), o > s && (s = o);
     this.bounds = {
       x: n,
-      y: r,
-      w: i - n,
-      h: l - r
+      y: e,
+      w: l - n,
+      h: s - e
     };
   }
   /**
@@ -468,22 +567,47 @@ class Dt {
    * @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(e, n) {
-    const r = this.bounds;
-    return e < r.x || e > r.x + r.w || n < r.y || n > r.y + r.h ? !1 : $t(e, n, 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);
   }
 }
-function Wt(t, e) {
+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 l = Math.max(1, n), s = Math.max(1, e), i = Math.min(l, s);
+    this.rx = r.radius * i / l, this.ry = r.radius * i / s, 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, l = (n - this.cy) / this.ry;
+    return e * e + l * l <= 1;
+  }
+}
+function Bt(t, r, n) {
   switch (t.type) {
     case "image":
-      return new Pt(t, e);
+      return new zt(t, r);
     case "bbox":
-      return new Mt(t);
+      return new Lt(t);
     case "polygon":
-      return new Dt(t);
+      return new Nt(t);
+    case "circle":
+      return new Vt(t, n?.viewportWidth, n?.viewportHeight);
   }
 }
-function Ot(t) {
+function Ht(t) {
   switch (t.type) {
     case "image":
       return `${t.id}:image:${t.src}:${t.label ?? ""}`;
@@ -491,123 +615,142 @@ function Ot(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 Nt(t, e = !0, n = 30, r = 150) {
-  const [i, l] = L(null), [a, s] = L(null), u = B(null), c = B([]), [d, k] = L({}), [p, g] = L({}), m = Math.min(255, Math.max(0, n)), v = B(null), f = P(() => {
-    v.current === null && (v.current = setTimeout(() => {
-      v.current = null, l(null);
-    }, r));
-  }, [r]), b = P(() => {
-    v.current !== null && (clearTimeout(v.current), v.current = null);
-  }, []), h = t.map(Ot).join("|"), E = F(() => t, [h]);
-  O(() => {
-    if (!e) {
-      c.current = [];
+function Ft(t, r = !0, n = 30, e = 150) {
+  const [l, s] = L(null), [i, o] = L(null), c = V(null), u = V([]), [p, m] = L({}), [v, x] = L({ width: 1, height: 1 }), [f, y] = L({}), g = Math.min(255, Math.max(0, n)), h = V(null), d = M(() => {
+    h.current === null && (h.current = setTimeout(() => {
+      h.current = null, s(null);
+    }, e));
+  }, [e]), w = M(() => {
+    h.current !== null && (clearTimeout(h.current), h.current = null);
+  }, []), C = t.map(Ht).join("|"), b = B(() => t, [C]);
+  W(() => {
+    const j = c.current;
+    if (!j) return;
+    const A = () => {
+      const S = j.getBoundingClientRect();
+      x({
+        width: Math.max(1, S.width),
+        height: Math.max(1, S.height)
+      });
+    };
+    A();
+    const I = new ResizeObserver(A);
+    return I.observe(j), () => I.disconnect();
+  }, []), W(() => {
+    if (!r) {
+      u.current = [];
       return;
     }
-    let j = !1, R = [];
-    async function C() {
-      const _ = [], M = {}, W = {};
-      for (const Y of E) {
-        const D = Wt(Y, m);
-        if (D.prepare && await D.prepare(), j) return;
-        _.push(D), M[D.id] = D.bounds, D.contour && D.contour.length >= 3 && (W[D.id] = D.contour);
+    let j = !1, A = [];
+    async function I() {
+      const S = [], O = {}, z = {};
+      for (const Y of b) {
+        const a = Bt(Y, g, {
+          viewportWidth: v.width,
+          viewportHeight: v.height
+        });
+        if (a.prepare && await a.prepare(), j) return;
+        S.push(a), O[a.id] = a.bounds, a.contour && a.contour.length >= 3 && (z[a.id] = a.contour);
       }
-      j || (R = _, c.current = _, k(M), g(W));
+      j || (A = S, u.current = S, m(O), y(z));
     }
-    return C(), () => {
+    return I(), () => {
       j = !0;
-      for (const _ of R)
-        _.dispose?.();
+      for (const S of A)
+        S.dispose?.();
     };
-  }, [E, e, m]);
-  const w = P(
-    (j, R) => {
-      const C = c.current;
-      for (let _ = C.length - 1; _ >= 0; _--)
-        if (C[_].hitTest(j, R))
-          return C[_].id;
+  }, [b, r, g, v.width, v.height]);
+  const R = M(
+    (j, A) => {
+      const I = u.current;
+      for (let S = I.length - 1; S >= 0; S--)
+        if (I[S].hitTest(j, A))
+          return I[S].id;
       return null;
     },
     []
-  ), x = P(
+  ), P = M(
     (j) => {
-      const R = u.current;
-      if (!R) return null;
-      const C = R.getBoundingClientRect(), _ = (j.clientX - C.left) / C.width, M = (j.clientY - C.top) / C.height;
-      return _ < 0 || _ > 1 || M < 0 || M > 1 ? null : { nx: _, ny: M };
+      const A = c.current;
+      if (!A) return null;
+      const I = A.getBoundingClientRect(), S = (j.clientX - I.left) / I.width, O = (j.clientY - I.top) / I.height;
+      return S < 0 || S > 1 || O < 0 || O > 1 ? null : { nx: S, ny: O };
     },
     []
-  ), $ = P(
+  ), U = M(
     (j) => {
-      if (!e) return;
-      const R = x(j);
-      if (!R) {
-        f();
+      if (!r) return;
+      const A = P(j);
+      if (!A) {
+        d();
         return;
       }
-      const C = w(R.nx, R.ny);
-      if (C === null) {
+      const I = R(A.nx, A.ny);
+      if (I === null) {
         if (j.target?.closest('[data-cutout-overlay="true"]')) {
-          b();
+          w();
           return;
         }
-        f();
+        d();
         return;
       }
-      b(), l(C);
+      w(), s(I);
     },
-    [e, x, w, f, b]
-  ), N = P(() => {
-    f();
-  }, [f]), H = P(
+    [r, P, R, d, w]
+  ), D = M(() => {
+    d();
+  }, [d]), H = M(
     (j) => {
-      if (!e) return;
-      const R = x(j);
-      if (!R) {
-        s(null);
+      if (!r) return;
+      const A = P(j);
+      if (!A) {
+        o(null);
         return;
       }
-      const C = w(R.nx, R.ny);
-      s(C === a || C === null ? null : C);
+      const I = R(A.nx, A.ny);
+      o(I === i || I === null ? null : I);
     },
-    [e, x, w, a]
-  ), V = a ?? i, q = e ? d : {}, X = e ? p : {};
-  return O(() => () => {
-    b();
-  }, [b]), {
-    hoveredId: i,
-    selectedId: a,
-    activeId: V,
+    [r, P, R, i]
+  ), Q = i ?? l, q = r ? p : {}, G = r ? f : {};
+  return W(() => () => {
+    w();
+  }, [w]), {
+    hoveredId: l,
+    selectedId: i,
+    activeId: Q,
+    viewportSize: v,
     boundsMap: q,
-    contourMap: X,
-    containerRef: u,
+    contourMap: G,
+    containerRef: c,
     containerProps: {
-      onPointerMove: $,
-      onPointerLeave: N,
+      onPointerMove: U,
+      onPointerLeave: D,
       onClick: H
     }
   };
 }
-function vt(t, e) {
-  return { name: t, css: e };
+function bt(t, r) {
+  return { name: t, css: r };
 }
-const ht = /* @__PURE__ */ new Set();
-function Yt(t) {
+const gt = /* @__PURE__ */ new Set();
+function Xt(t) {
   if (!(!t.keyframes?.length || typeof document > "u"))
-    for (const e of t.keyframes) {
-      if (ht.has(e.name)) continue;
-      ht.add(e.name);
+    for (const r of t.keyframes) {
+      if (gt.has(r.name)) continue;
+      gt.add(r.name);
       const n = document.createElement("style");
-      n.setAttribute("data-ricut-kf", e.name), n.textContent = `@keyframes ${e.name} {
-${e.css}
+      n.setAttribute("data-ricut-kf", r.name), n.textContent = `@keyframes ${r.name} {
+${r.css}
 }`, document.head.appendChild(n);
     }
 }
-const Z = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Vt = {
+const rt = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Ut = {
   name: "elevate",
-  transition: Z,
+  transition: rt,
   mainImageHovered: {
     filter: "brightness(0.45) saturate(0.7)"
   },
@@ -632,7 +775,7 @@ const Z = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Vt = {
   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: {
@@ -645,9 +788,9 @@ const Z = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Vt = {
     stroke: "transparent",
     strokeWidth: 1
   }
-}, Lt = {
+}, qt = {
   name: "glow",
-  transition: Z,
+  transition: rt,
   mainImageHovered: {
     filter: "brightness(0.55) saturate(0.8)"
   },
@@ -672,7 +815,7 @@ const Z = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Vt = {
   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: {
@@ -685,9 +828,9 @@ const Z = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Vt = {
     stroke: "transparent",
     strokeWidth: 1
   }
-}, Bt = {
+}, Gt = {
   name: "lift",
-  transition: Z,
+  transition: rt,
   mainImageHovered: {
     filter: "brightness(0.4)"
   },
@@ -712,7 +855,7 @@ const Z = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Vt = {
   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: {
@@ -725,7 +868,7 @@ const Z = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Vt = {
     stroke: "transparent",
     strokeWidth: 1
   }
-}, Ft = {
+}, Kt = {
   name: "subtle",
   transition: "all 0.3s ease",
   mainImageHovered: {
@@ -752,7 +895,7 @@ const Z = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Vt = {
   geometryActive: {
     fill: "rgba(255, 255, 255, 0.08)",
     stroke: "rgba(255, 255, 255, 0.5)",
-    strokeWidth: 1
+    strokeWidth: 0
   },
   geometryInactive: {
     fill: "transparent",
@@ -764,14 +907,14 @@ const Z = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Vt = {
     stroke: "transparent",
     strokeWidth: 1
   }
-}, gt = vt(
+}, pt = bt(
   "_ricut-trace-stroke",
   `from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -1; }`
-), zt = {
+), Jt = {
   name: "trace",
-  transition: Z,
-  keyframes: [gt],
+  transition: rt,
+  keyframes: [pt],
   mainImageHovered: {
     filter: "brightness(0.35) saturate(0.5)"
   },
@@ -796,9 +939,9 @@ const Z = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Vt = {
   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: `${gt.name} 3s linear infinite`,
+    animation: `${pt.name} 3s linear infinite`,
     glow: "0 0 10px rgba(255, 255, 255, 0.25)"
   },
   geometryInactive: {
@@ -811,7 +954,7 @@ const Z = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Vt = {
     stroke: "transparent",
     strokeWidth: 1
   }
-}, pt = vt(
+}, yt = bt(
   "_ricut-shimmer",
   `0%, 100% {
     filter: brightness(1.05) contrast(1.02)
@@ -828,10 +971,10 @@ const Z = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Vt = {
             drop-shadow(0 0 6px rgba(255, 255, 255, 0.12))
             drop-shadow(0 12px 32px rgba(0, 0, 0, 0.4));
   }`
-), Ht = {
+), Zt = {
   name: "shimmer",
-  transition: Z,
-  keyframes: [pt],
+  transition: rt,
+  keyframes: [yt],
   mainImageHovered: {
     filter: "brightness(0.35) saturate(0.6)"
   },
@@ -844,7 +987,7 @@ const Z = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Vt = {
        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: `${pt.name} 2.4s ease-in-out infinite`
+    animation: `${yt.name} 2.4s ease-in-out infinite`
   },
   cutoutInactive: {
     transform: "scale(1)",
@@ -859,7 +1002,7 @@ const Z = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Vt = {
   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: {
@@ -872,48 +1015,52 @@ const Z = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Vt = {
     stroke: "transparent",
     strokeWidth: 1
   }
-}, K = {
-  elevate: Vt,
-  glow: Lt,
-  lift: Bt,
-  subtle: Ft,
-  trace: zt,
-  shimmer: Ht
-}, Q = lt(null), xt = lt(null);
-function ot() {
-  const t = z(xt);
+}, J = {
+  elevate: Ut,
+  glow: qt,
+  lift: Gt,
+  subtle: Kt,
+  trace: Jt,
+  shimmer: Zt
+}, F = lt(null), kt = lt(null);
+function nt() {
+  const t = N(kt);
   if (!t) throw new Error("Must be used inside <CutoutViewer>");
   return t;
 }
-const tt = lt(null);
-function ee() {
-  const t = z(tt);
+const Z = lt(null);
+function de() {
+  const t = N(Z);
   if (!t)
     throw new Error("useCutout must be used inside <CutoutViewer.Cutout>");
   return t;
 }
-function Xt({ id: t, src: e, label: n, effect: r, children: i, renderLayer: l }) {
-  const a = z(Q), s = ot();
-  if (!a)
+function Qt({ id: t, src: r, label: n, effect: e, children: l, renderLayer: s }) {
+  const i = N(F), o = nt();
+  if (!i)
     throw new Error("<CutoutViewer.Cutout> must be used inside <CutoutViewer>");
-  O(() => (a.registerCutout({ type: "image", id: t, src: e, label: n }), () => a.unregisterCutout(t)), [t, e, n, a]);
-  const u = r ? typeof r == "string" ? K[r] ?? s.effect : r : s.effect, c = s.contourMap[t] ?? null, d = s.activeId === t, k = s.hoveredId === t, p = s.selectedId === t, g = { x: 0, y: 0, w: 1, h: 1 }, m = s.boundsMap[t] ?? g;
-  let v, f;
-  !s.enabled || !s.isAnyActive && !s.showAll ? (v = u.cutoutIdle, f = u.geometryIdle) : s.showAll || d ? (v = u.cutoutActive, f = u.geometryActive) : (v = u.cutoutInactive, f = u.geometryInactive);
-  const b = F(
+  W(() => (i.registerCutout({ type: "image", id: t, src: r, label: n }), () => i.unregisterCutout(t)), [t, r, n, i]);
+  const c = e ? typeof e == "string" ? J[e] ?? o.effect : e : o.effect, u = o.contourMap[t] ?? null, p = B(() => {
+    if (!u) return null;
+    const w = o.viewportSize.width || 1, C = o.viewportSize.height || 1, b = u.map(([R, P]) => [R * w, P * C]);
+    return Dt(b);
+  }, [u, o.viewportSize.width, o.viewportSize.height]), m = o.activeId === t, v = o.hoveredId === t, x = o.selectedId === t, f = { x: 0, y: 0, w: 1, h: 1 }, y = o.boundsMap[t] ?? f;
+  let g, h;
+  !o.enabled || !o.isAnyActive && !o.showAll ? (g = c.cutoutIdle, h = c.geometryIdle) : o.showAll || m ? (g = c.cutoutActive, h = c.geometryActive) : (g = c.cutoutInactive, h = c.geometryInactive);
+  const d = B(
     () => ({
       id: t,
       label: n,
-      bounds: m,
-      isActive: d,
-      isHovered: k,
-      isSelected: p,
-      effect: u
+      bounds: y,
+      isActive: m,
+      isHovered: v,
+      isSelected: x,
+      effect: c
     }),
-    [t, n, m, d, k, p, u]
+    [t, n, y, m, v, x, c]
   );
-  return /* @__PURE__ */ I.jsxs(tt.Provider, { value: b, children: [
-    /* @__PURE__ */ I.jsxs(
+  return /* @__PURE__ */ E.jsxs(Z.Provider, { value: d, children: [
+    /* @__PURE__ */ E.jsxs(
       "div",
       {
         "data-cutout-id": t,
@@ -921,15 +1068,15 @@ function Xt({ id: t, src: e, label: n, effect: r, children: i, renderLayer: l })
           pointerEvents: "none",
           position: "absolute",
           inset: 0,
-          zIndex: d ? 20 : 10,
-          transition: u.transition,
-          ...v
+          zIndex: m ? 20 : 10,
+          transition: c.transition,
+          ...g
         },
         children: [
-          l ? l({ isActive: d, isHovered: k, isSelected: p, bounds: m, effect: u }) : /* @__PURE__ */ I.jsx(
+          s ? s({ isActive: m, isHovered: v, isSelected: x, bounds: y, effect: c }) : /* @__PURE__ */ E.jsx(
             "img",
             {
-              src: e,
+              src: r,
               alt: n || t,
               draggable: !1,
               style: {
@@ -940,10 +1087,10 @@ function Xt({ id: t, src: e, label: n, effect: r, children: i, renderLayer: l })
               }
             }
           ),
-          c && f && /* @__PURE__ */ I.jsx(
+          p && h && /* @__PURE__ */ E.jsx(
             "svg",
             {
-              viewBox: "0 0 1 1",
+              viewBox: `0 0 ${o.viewportSize.width || 1} ${o.viewportSize.height || 1}`,
               preserveAspectRatio: "none",
               style: {
                 position: "absolute",
@@ -951,22 +1098,22 @@ function Xt({ id: t, src: e, label: n, effect: r, children: i, renderLayer: l })
                 width: "100%",
                 height: "100%",
                 overflow: "visible",
-                filter: f.glow ? `drop-shadow(${f.glow.split(",")[0]?.trim() ?? ""})` : "none"
+                filter: h.glow ? `drop-shadow(${h.glow.split(",")[0]?.trim() ?? ""})` : "none"
               },
-              children: /* @__PURE__ */ I.jsx(
-                "polygon",
+              children: /* @__PURE__ */ E.jsx(
+                "path",
                 {
-                  points: c.map(([h, E]) => `${h},${E}`).join(" "),
-                  fill: f.fill,
-                  stroke: f.stroke,
-                  strokeWidth: (f.strokeWidth ?? 2) * 15e-4,
+                  d: p,
+                  fill: h.fill,
+                  stroke: h.stroke,
+                  strokeWidth: h.strokeWidth ?? 2,
                   strokeLinejoin: "round",
-                  strokeLinecap: f.strokeDasharray ? "round" : void 0,
-                  strokeDasharray: f.strokeDasharray,
-                  pathLength: f.strokeDasharray ? 1 : void 0,
+                  strokeLinecap: h.strokeDasharray ? "round" : void 0,
+                  strokeDasharray: h.strokeDasharray,
+                  pathLength: h.strokeDasharray ? 1 : void 0,
                   style: {
-                    transition: u.transition,
-                    animation: f.animation
+                    transition: c.transition,
+                    animation: h.animation
                   }
                 }
               )
@@ -975,49 +1122,49 @@ function Xt({ id: t, src: e, label: n, effect: r, children: i, renderLayer: l })
         ]
       }
     ),
-    i
+    l
   ] });
 }
 function mt(t) {
-  const { filter: e, ...n } = t;
+  const { filter: r, ...n } = t;
   return n;
 }
-function Ut({
+function te({
   id: t,
-  bounds: e,
+  bounds: r,
   label: n,
-  effect: r,
-  children: i,
-  renderLayer: l
+  effect: e,
+  children: l,
+  renderLayer: s
 }) {
-  const a = z(Q), s = ot();
-  if (!a)
+  const i = N(F), o = nt();
+  if (!i)
     throw new Error(
       "<CutoutViewer.BBoxCutout> must be used inside <CutoutViewer>"
     );
-  const { x: u, y: c, w: d, h: k } = e;
-  O(() => (a.registerCutout({ type: "bbox", id: t, bounds: { x: u, y: c, w: d, h: k }, label: n }), () => a.unregisterCutout(t)), [t, u, c, d, k, n, a]);
-  const p = r ? typeof r == "string" ? K[r] ?? s.effect : r : s.effect, g = s.activeId === t, m = s.hoveredId === t, v = s.selectedId === t, f = { x: 0, y: 0, w: 1, h: 1 }, b = s.boundsMap[t] ?? f;
-  let h, E;
-  !s.enabled || !s.isAnyActive && !s.showAll ? (E = { ...p.cutoutIdle, filter: "none", opacity: 0 }, h = p.geometryIdle) : s.showAll || g ? (E = mt(p.cutoutActive), h = p.geometryActive) : (E = mt(p.cutoutInactive), h = p.geometryInactive);
-  const x = h ?? {
+  const { x: c, y: u, w: p, h: m } = r;
+  W(() => (i.registerCutout({ type: "bbox", id: t, bounds: { x: c, y: u, w: p, h: m }, label: n }), () => i.unregisterCutout(t)), [t, c, u, p, m, n, i]);
+  const v = e ? typeof e == "string" ? J[e] ?? o.effect : e : o.effect, x = o.activeId === t, f = o.hoveredId === t, y = o.selectedId === t, g = { x: 0, y: 0, w: 1, h: 1 }, h = o.boundsMap[t] ?? g;
+  let d, w;
+  !o.enabled || !o.isAnyActive && !o.showAll ? (w = { ...v.cutoutIdle, filter: "none", opacity: 0 }, d = v.geometryIdle) : o.showAll || x ? (w = mt(v.cutoutActive), d = v.geometryActive) : (w = mt(v.cutoutInactive), d = v.geometryInactive);
+  const b = d ?? {
     fill: "rgba(37, 99, 235, 0.15)",
     stroke: "rgba(37, 99, 235, 0.6)",
     strokeWidth: 2
-  }, $ = F(
+  }, R = B(
     () => ({
       id: t,
       label: n,
-      bounds: b,
-      isActive: g,
-      isHovered: m,
-      isSelected: v,
-      effect: p
+      bounds: h,
+      isActive: x,
+      isHovered: f,
+      isSelected: y,
+      effect: v
     }),
-    [t, n, b, g, m, v, p]
+    [t, n, h, x, f, y, v]
   );
-  return /* @__PURE__ */ I.jsxs(tt.Provider, { value: $, children: [
-    /* @__PURE__ */ I.jsx(
+  return /* @__PURE__ */ E.jsxs(Z.Provider, { value: R, children: [
+    /* @__PURE__ */ E.jsx(
       "div",
       {
         "data-cutout-id": t,
@@ -1025,11 +1172,11 @@ function Ut({
           pointerEvents: "none",
           position: "absolute",
           inset: 0,
-          zIndex: g ? 20 : 10,
-          transition: p.transition,
-          ...E
+          zIndex: x ? 20 : 10,
+          transition: v.transition,
+          ...w
         },
-        children: l ? l({ isActive: g, isHovered: m, isSelected: v, bounds: b, effect: p }) : /* @__PURE__ */ I.jsx(
+        children: s ? s({ isActive: x, isHovered: f, isSelected: y, bounds: h, effect: v }) : /* @__PURE__ */ E.jsx(
           "svg",
           {
             viewBox: "0 0 1 1",
@@ -1040,25 +1187,25 @@ function Ut({
               width: "100%",
               height: "100%",
               overflow: "visible",
-              filter: x.glow ? `drop-shadow(${x.glow.split(",")[0]?.trim() ?? ""})` : "none"
+              filter: b.glow ? `drop-shadow(${b.glow.split(",")[0]?.trim() ?? ""})` : "none"
             },
-            children: /* @__PURE__ */ I.jsx(
+            children: /* @__PURE__ */ E.jsx(
               "rect",
               {
-                x: b.x,
-                y: b.y,
-                width: b.w,
-                height: b.h,
+                x: h.x,
+                y: h.y,
+                width: h.w,
+                height: h.h,
                 rx: 4e-3,
-                fill: x.fill,
-                stroke: x.stroke,
-                strokeWidth: (x.strokeWidth ?? 2) * 15e-4,
-                strokeLinecap: x.strokeDasharray ? "round" : void 0,
-                strokeDasharray: x.strokeDasharray,
-                pathLength: x.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: p.transition,
-                  animation: x.animation
+                  transition: v.transition,
+                  animation: b.animation
                 }
               }
             )
@@ -1066,49 +1213,49 @@ function Ut({
         )
       }
     ),
-    i
+    l
   ] });
 }
-function yt(t) {
-  const { filter: e, ...n } = t;
+function vt(t) {
+  const { filter: r, ...n } = t;
   return n;
 }
-function qt({
+function ee({
   id: t,
-  points: e,
+  points: r,
   label: n,
-  effect: r,
-  children: i,
-  renderLayer: l
+  effect: e,
+  children: l,
+  renderLayer: s
 }) {
-  const a = z(Q), s = ot();
-  if (!a)
+  const i = N(F), o = nt();
+  if (!i)
     throw new Error(
       "<CutoutViewer.PolygonCutout> must be used inside <CutoutViewer>"
     );
-  const u = e.flat().join(",");
-  O(() => (a.registerCutout({ type: "polygon", id: t, points: e, label: n }), () => a.unregisterCutout(t)), [t, u, n, a]);
-  const c = r ? typeof r == "string" ? K[r] ?? s.effect : r : s.effect, d = s.activeId === t, k = s.hoveredId === t, p = s.selectedId === t, g = { x: 0, y: 0, w: 1, h: 1 }, m = s.boundsMap[t] ?? g;
-  let v, f;
-  !s.enabled || !s.isAnyActive && !s.showAll ? (f = { ...c.cutoutIdle, filter: "none", opacity: 0 }, v = c.geometryIdle) : s.showAll || d ? (f = yt(c.cutoutActive), v = c.geometryActive) : (f = yt(c.cutoutInactive), v = c.geometryInactive);
-  const h = v ?? {
+  const c = r.flat().join(",");
+  W(() => (i.registerCutout({ type: "polygon", id: t, points: r, label: n }), () => i.unregisterCutout(t)), [t, c, n, i]);
+  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 }, f = o.boundsMap[t] ?? x;
+  let y, g;
+  !o.enabled || !o.isAnyActive && !o.showAll ? (g = { ...u.cutoutIdle, filter: "none", opacity: 0 }, y = u.geometryIdle) : o.showAll || p ? (g = vt(u.cutoutActive), y = u.geometryActive) : (g = vt(u.cutoutInactive), y = u.geometryInactive);
+  const d = y ?? {
     fill: "rgba(37, 99, 235, 0.15)",
     stroke: "rgba(37, 99, 235, 0.6)",
     strokeWidth: 2
-  }, E = F(
+  }, w = B(
     () => ({
       id: t,
       label: n,
-      bounds: m,
-      isActive: d,
-      isHovered: k,
-      isSelected: p,
-      effect: c
+      bounds: f,
+      isActive: p,
+      isHovered: m,
+      isSelected: v,
+      effect: u
     }),
-    [t, n, m, d, k, p, c]
+    [t, n, f, p, m, v, u]
   );
-  return /* @__PURE__ */ I.jsxs(tt.Provider, { value: E, children: [
-    /* @__PURE__ */ I.jsx(
+  return /* @__PURE__ */ E.jsxs(Z.Provider, { value: w, children: [
+    /* @__PURE__ */ E.jsx(
       "div",
       {
         "data-cutout-id": t,
@@ -1116,11 +1263,11 @@ function qt({
           pointerEvents: "none",
           position: "absolute",
           inset: 0,
-          zIndex: d ? 20 : 10,
-          transition: c.transition,
-          ...f
+          zIndex: p ? 20 : 10,
+          transition: u.transition,
+          ...g
         },
-        children: l ? l({ isActive: d, isHovered: k, isSelected: p, bounds: m, effect: c }) : /* @__PURE__ */ I.jsx(
+        children: s ? s({ isActive: p, isHovered: m, isSelected: v, bounds: f, effect: u }) : /* @__PURE__ */ E.jsx(
           "svg",
           {
             viewBox: "0 0 1 1",
@@ -1131,22 +1278,113 @@ function qt({
               width: "100%",
               height: "100%",
               overflow: "visible",
-              filter: h.glow ? `drop-shadow(${h.glow.split(",")[0]?.trim() ?? ""})` : "none"
+              filter: d.glow ? `drop-shadow(${d.glow.split(",")[0]?.trim() ?? ""})` : "none"
             },
-            children: /* @__PURE__ */ I.jsx(
+            children: /* @__PURE__ */ E.jsx(
               "polygon",
               {
-                points: e.map(([w, x]) => `${w},${x}`).join(" "),
-                fill: h.fill,
-                stroke: h.stroke,
-                strokeWidth: (h.strokeWidth ?? 2) * 15e-4,
+                points: r.map(([C, b]) => `${C},${b}`).join(" "),
+                fill: d.fill,
+                stroke: d.stroke,
+                strokeWidth: (d.strokeWidth ?? 2) * 15e-4,
                 strokeLinejoin: "round",
-                strokeLinecap: h.strokeDasharray ? "round" : void 0,
-                strokeDasharray: h.strokeDasharray,
-                pathLength: h.strokeDasharray ? 1 : void 0,
+                strokeLinecap: d.strokeDasharray ? "round" : void 0,
+                strokeDasharray: d.strokeDasharray,
+                pathLength: d.strokeDasharray ? 1 : void 0,
+                style: {
+                  transition: u.transition,
+                  animation: d.animation
+                }
+              }
+            )
+          }
+        )
+      }
+    ),
+    l
+  ] });
+}
+function wt(t) {
+  const { filter: r, ...n } = t;
+  return n;
+}
+function re({
+  id: t,
+  center: r,
+  radius: n,
+  label: e,
+  effect: l,
+  children: s,
+  renderLayer: i
+}) {
+  const o = N(F), c = 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 = l ? typeof l == "string" ? J[l] ?? c.effect : l : c.effect, v = c.activeId === t, x = c.hoveredId === t, f = c.selectedId === t, y = { x: 0, y: 0, w: 1, h: 1 }, g = c.boundsMap[t] ?? y, h = Math.max(1, c.viewportSize.width), d = Math.max(1, c.viewportSize.height), w = Math.min(h, d), C = n * w / h, b = n * w / d;
+  let R, P;
+  !c.enabled || !c.isAnyActive && !c.showAll ? (P = { ...m.cutoutIdle, filter: "none", opacity: 0 }, R = m.geometryIdle) : c.showAll || v ? (P = wt(m.cutoutActive), R = m.geometryActive) : (P = wt(m.cutoutInactive), R = m.geometryInactive);
+  const D = R ?? {
+    fill: "rgba(37, 99, 235, 0.15)",
+    stroke: "rgba(37, 99, 235, 0.6)",
+    strokeWidth: 2
+  }, H = B(
+    () => ({
+      id: t,
+      label: e,
+      bounds: g,
+      isActive: v,
+      isHovered: x,
+      isSelected: f,
+      effect: m
+    }),
+    [t, e, g, v, x, f, m]
+  );
+  return /* @__PURE__ */ E.jsxs(Z.Provider, { value: H, children: [
+    /* @__PURE__ */ E.jsx(
+      "div",
+      {
+        "data-cutout-id": t,
+        style: {
+          pointerEvents: "none",
+          position: "absolute",
+          inset: 0,
+          zIndex: v ? 20 : 10,
+          transition: m.transition,
+          ...P
+        },
+        children: i ? i({ isActive: v, isHovered: x, isSelected: f, bounds: g, effect: m }) : /* @__PURE__ */ E.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__ */ E.jsx(
+              "ellipse",
+              {
+                cx: r.x,
+                cy: r.y,
+                rx: C,
+                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: c.transition,
-                  animation: h.animation
+                  transition: m.transition,
+                  animation: D.animation
                 }
               }
             )
@@ -1154,166 +1392,167 @@ function qt({
         )
       }
     ),
-    i
+    s
   ] });
 }
-function Gt(t, e) {
-  const { x: n, y: r, w: i, h: l } = e;
-  let a, s;
-  t.includes("left") ? (a = `${n * 100}%`, s = "0") : t.includes("right") ? (a = `${(n + i) * 100}%`, s = "-100%") : (a = `${(n + i / 2) * 100}%`, s = "-50%");
-  let u, c;
-  return t.startsWith("top") ? (u = `${r * 100}%`, c = "-100%") : t.startsWith("bottom") ? (u = `${(r + l) * 100}%`, c = "0") : (u = `${(r + l / 2) * 100}%`, c = "-50%"), {
+function ne(t, r) {
+  const { x: n, y: e, w: l, h: s } = r;
+  let i, o;
+  t.includes("left") ? (i = `${n * 100}%`, o = "0") : t.includes("right") ? (i = `${(n + l) * 100}%`, o = "-100%") : (i = `${(n + l / 2) * 100}%`, o = "-50%");
+  let c, u;
+  return t.startsWith("top") ? (c = `${e * 100}%`, u = "-100%") : t.startsWith("bottom") ? (c = `${(e + s) * 100}%`, u = "0") : (c = `${(e + s / 2) * 100}%`, u = "-50%"), {
     position: "absolute",
-    left: a,
-    top: u,
-    transform: `translate(${s}, ${c})`
+    left: i,
+    top: c,
+    transform: `translate(${o}, ${u})`
   };
 }
-function Jt({
+function oe({
   placement: t = "top-center",
-  children: e,
+  children: r,
   className: n = "",
-  style: r
+  style: e,
+  showOverlay: l = void 0
 }) {
-  const i = z(tt), l = ot();
-  if (!i)
+  const s = N(Z), i = nt();
+  if (!s)
     throw new Error(
       "<CutoutViewer.Overlay> must be used inside <CutoutViewer.Cutout>"
     );
-  const a = l.enabled && (l.showAll || i.isActive), s = Gt(t, i.bounds);
-  return /* @__PURE__ */ I.jsx(
+  const o = l ?? i.showOverlays, c = i.enabled && (i.showAll || o || s.isActive), u = ne(t, s.bounds);
+  return /* @__PURE__ */ E.jsx(
     "div",
     {
       "data-cutout-overlay": "true",
       className: n,
       style: {
         zIndex: 30,
-        transition: i.effect.transition,
-        opacity: a ? 1 : 0,
-        pointerEvents: a ? "auto" : "none",
-        ...s,
-        ...r
+        transition: s.effect.transition,
+        opacity: c ? 1 : 0,
+        pointerEvents: c ? "auto" : "none",
+        ...u,
+        ...e
       },
-      children: e
+      children: r
     }
   );
 }
-function Kt({
+function se({
   onComplete: t,
-  minPoints: e = 3,
+  minPoints: r = 3,
   closeThreshold: n = 0.03
 }) {
-  const [r, i] = L([]), [l, a] = L(null), s = B(null), u = P(
-    (h, E) => {
-      const w = s.current;
-      if (!w) return null;
-      const x = w.getBoundingClientRect(), $ = (h - x.left) / x.width, N = (E - x.top) / x.height;
-      return $ < 0 || $ > 1 || N < 0 || N > 1 ? null : [$, N];
+  const [e, l] = L([]), [s, i] = L(null), o = V(null), c = M(
+    (d, w) => {
+      const C = o.current;
+      if (!C) return null;
+      const b = C.getBoundingClientRect(), R = (d - b.left) / b.width, P = (w - b.top) / b.height;
+      return R < 0 || R > 1 || P < 0 || P > 1 ? null : [R, P];
     },
     []
-  ), c = P(
-    (h, E) => {
-      if (E.length < e) return !1;
-      const w = h[0] - E[0][0], x = h[1] - E[0][1];
-      return Math.sqrt(w * w + x * x) < n;
+  ), u = M(
+    (d, w) => {
+      if (w.length < r) return !1;
+      const C = d[0] - w[0][0], b = d[1] - w[0][1];
+      return Math.sqrt(C * C + b * b) < n;
     },
-    [e, n]
-  ), d = P(
-    (h) => {
-      h.length < e || (t(h), i([]), a(null));
+    [r, n]
+  ), p = M(
+    (d) => {
+      d.length < r || (t(d), l([]), i(null));
     },
-    [t, e]
-  ), k = P(() => {
-    i([]), a(null);
-  }, []), p = P(
-    (h) => {
-      a(u(h.clientX, h.clientY));
+    [t, r]
+  ), m = M(() => {
+    l([]), i(null);
+  }, []), v = M(
+    (d) => {
+      i(c(d.clientX, d.clientY));
     },
-    [u]
-  ), g = P(() => {
-    a(null);
-  }, []), m = P(
-    (h) => {
-      h.stopPropagation();
-      const E = u(h.clientX, h.clientY);
-      E && i((w) => c(E, w) ? (d(w), []) : [...w, E]);
+    [c]
+  ), x = M(() => {
+    i(null);
+  }, []), f = M(
+    (d) => {
+      d.stopPropagation();
+      const w = c(d.clientX, d.clientY);
+      w && l((C) => u(w, C) ? (p(C), []) : [...C, w]);
     },
-    [u, c, d]
-  ), v = P(
-    (h) => {
-      h.stopPropagation(), i((E) => {
-        const w = E.slice(0, -1);
-        return w.length >= e ? (d(w), []) : w;
+    [c, u, p]
+  ), y = M(
+    (d) => {
+      d.stopPropagation(), l((w) => {
+        const C = w.slice(0, -1);
+        return C.length >= r ? (p(C), []) : C;
       });
     },
-    [e, d]
-  ), f = P(
-    (h) => {
-      h.preventDefault(), i((E) => E.slice(0, -1));
+    [r, p]
+  ), g = M(
+    (d) => {
+      d.preventDefault(), l((w) => w.slice(0, -1));
     },
     []
-  ), b = l !== null && c(l, r);
+  ), h = s !== null && u(s, e);
   return {
-    points: r,
-    previewPoint: l,
-    willClose: b,
-    reset: k,
-    containerRef: s,
+    points: e,
+    previewPoint: s,
+    willClose: h,
+    reset: m,
+    containerRef: o,
     containerProps: {
-      onPointerMove: p,
-      onPointerLeave: g,
-      onClick: m,
-      onDoubleClick: v,
-      onContextMenu: f
+      onPointerMove: v,
+      onPointerLeave: x,
+      onClick: f,
+      onDoubleClick: y,
+      onContextMenu: g
     }
   };
 }
-function Zt({
+function ie({
   onComplete: t,
-  minPoints: e = 3,
+  minPoints: r = 3,
   closeThreshold: n = 0.03,
-  strokeColor: r = "#3b82f6",
-  enabled: i = !0,
-  style: l,
-  className: a = ""
+  strokeColor: e = "#3b82f6",
+  enabled: l = !0,
+  style: s,
+  className: i = ""
 }) {
-  if (!z(Q))
+  if (!N(F))
     throw new Error(
       "<CutoutViewer.DrawPolygon> must be used inside <CutoutViewer>"
     );
   const {
-    points: u,
-    previewPoint: c,
-    willClose: d,
-    reset: k,
-    containerRef: p,
-    containerProps: g
-  } = Kt({ onComplete: t, minPoints: e, closeThreshold: n });
-  O(() => {
-    function f(b) {
-      b.key === "Escape" && k();
+    points: c,
+    previewPoint: u,
+    willClose: p,
+    reset: m,
+    containerRef: v,
+    containerProps: x
+  } = se({ onComplete: t, minPoints: r, closeThreshold: n });
+  W(() => {
+    function g(h) {
+      h.key === "Escape" && m();
     }
-    return document.addEventListener("keydown", f), () => document.removeEventListener("keydown", f);
-  }, [k]), O(() => {
-    i || k();
-  }, [i, k]);
-  const m = c ? [...u, c] : u, v = m.map(([f, b]) => `${f},${b}`).join(" ");
-  return /* @__PURE__ */ I.jsx(
+    return document.addEventListener("keydown", g), () => document.removeEventListener("keydown", g);
+  }, [m]), W(() => {
+    l || m();
+  }, [l, m]);
+  const f = u ? [...c, u] : c, y = f.map(([g, h]) => `${g},${h}`).join(" ");
+  return /* @__PURE__ */ E.jsx(
     "div",
     {
-      ref: p,
+      ref: v,
       "data-draw-polygon": "true",
-      className: a,
+      className: i,
       style: {
         position: "absolute",
         inset: 0,
-        cursor: i ? d ? "cell" : "crosshair" : "default",
+        cursor: l ? p ? "cell" : "crosshair" : "default",
         zIndex: 30,
-        pointerEvents: i ? "auto" : "none",
-        ...l
+        pointerEvents: l ? "auto" : "none",
+        ...s
       },
-      ...i ? g : {},
-      children: u.length > 0 && /* @__PURE__ */ I.jsxs(
+      ...l ? x : {},
+      children: c.length > 0 && /* @__PURE__ */ E.jsxs(
         "svg",
         {
           viewBox: "0 0 1 1",
@@ -1327,61 +1566,61 @@ function Zt({
             pointerEvents: "none"
           },
           children: [
-            u.length >= 3 && /* @__PURE__ */ I.jsx(
+            c.length >= 3 && /* @__PURE__ */ E.jsx(
               "polygon",
               {
-                points: u.map(([f, b]) => `${f},${b}`).join(" "),
-                fill: r,
+                points: c.map(([g, h]) => `${g},${h}`).join(" "),
+                fill: e,
                 fillOpacity: 0.15,
                 stroke: "none"
               }
             ),
-            m.length >= 2 && /* @__PURE__ */ I.jsx(
+            f.length >= 2 && /* @__PURE__ */ E.jsx(
               "polyline",
               {
-                points: v,
+                points: y,
                 fill: "none",
-                stroke: r,
+                stroke: e,
                 strokeWidth: 3e-3,
                 strokeLinecap: "round",
                 strokeLinejoin: "round",
-                strokeDasharray: c ? "0.015 0.008" : void 0
+                strokeDasharray: u ? "0.015 0.008" : void 0
               }
             ),
-            c && u.length >= 1 && /* @__PURE__ */ I.jsx(
+            u && c.length >= 1 && /* @__PURE__ */ E.jsx(
               "line",
               {
-                x1: c[0],
-                y1: c[1],
-                x2: u[0][0],
-                y2: u[0][1],
-                stroke: r,
+                x1: u[0],
+                y1: u[1],
+                x2: c[0][0],
+                y2: c[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
               }
             ),
-            u.map(([f, b], h) => /* @__PURE__ */ I.jsx(
+            c.map(([g, h], d) => /* @__PURE__ */ E.jsx(
               "circle",
               {
-                cx: f,
-                cy: b,
-                r: h === 0 ? 0.012 : 7e-3,
-                fill: h === 0 && d ? r : "white",
-                stroke: r,
+                cx: g,
+                cy: h,
+                r: d === 0 ? 0.012 : 7e-3,
+                fill: d === 0 && p ? e : "white",
+                stroke: e,
                 strokeWidth: 2e-3
               },
-              h
+              d
             )),
-            c && /* @__PURE__ */ I.jsx(
+            u && /* @__PURE__ */ E.jsx(
               "circle",
               {
-                cx: c[0],
-                cy: c[1],
+                cx: u[0],
+                cy: u[1],
                 r: 5e-3,
-                fill: d ? r : "white",
-                stroke: r,
+                fill: p ? e : "white",
+                stroke: e,
                 strokeWidth: 2e-3,
                 opacity: 0.8
               }
@@ -1392,7 +1631,298 @@ function Zt({
     }
   );
 }
-function bt(t) {
+function ae({
+  onComplete: t,
+  minSize: r = 0.01
+}) {
+  const [n, e] = L(null), [l, s] = L(null), i = V(null), o = M(
+    (f, y) => {
+      const g = i.current;
+      if (!g) return null;
+      const h = g.getBoundingClientRect(), d = (f - h.left) / h.width, w = (y - h.top) / h.height;
+      return {
+        x: Math.max(0, Math.min(1, d)),
+        y: Math.max(0, Math.min(1, w))
+      };
+    },
+    []
+  ), c = M(
+    (f, y) => {
+      const g = Math.min(f.x, y.x), h = Math.min(f.y, y.y), d = Math.abs(y.x - f.x), w = Math.abs(y.y - f.y);
+      return { x: g, y: h, w: d, h: w };
+    },
+    []
+  ), u = M(() => {
+    e(null), s(null);
+  }, []);
+  W(() => {
+    function f(y) {
+      y.key === "Escape" && u();
+    }
+    return document.addEventListener("keydown", f), () => document.removeEventListener("keydown", f);
+  }, [u]);
+  const p = M(
+    (f) => {
+      f.currentTarget.setPointerCapture(f.pointerId);
+      const y = o(f.clientX, f.clientY);
+      y && (e(y), s({ x: y.x, y: y.y, w: 0, h: 0 }));
+    },
+    [o]
+  ), m = M(
+    (f) => {
+      if (!n) return;
+      const y = o(f.clientX, f.clientY);
+      y && s(c(n, y));
+    },
+    [n, o, c]
+  ), v = M(
+    (f) => {
+      if (!n) return;
+      const y = o(f.clientX, f.clientY);
+      if (y) {
+        const g = c(n, y);
+        g.w >= r && g.h >= r && t(g);
+      }
+      e(null), s(null);
+    },
+    [n, o, c, r, t]
+  ), x = M(() => {
+  }, []);
+  return {
+    rect: l,
+    isDragging: n !== null,
+    reset: u,
+    containerRef: i,
+    containerProps: {
+      onPointerDown: p,
+      onPointerMove: m,
+      onPointerUp: v,
+      onPointerLeave: x
+    }
+  };
+}
+function ce({
+  onComplete: t,
+  minSize: r,
+  strokeColor: n = "#3b82f6",
+  enabled: e = !0,
+  style: l,
+  className: s = ""
+}) {
+  if (!N(F))
+    throw new Error(
+      "<CutoutViewer.DrawRectangle> must be used inside <CutoutViewer>"
+    );
+  const { rect: o, reset: c, containerRef: u, containerProps: p } = ae({
+    onComplete: t,
+    minSize: r
+  });
+  return W(() => {
+    e || c();
+  }, [e, c]), /* @__PURE__ */ E.jsx(
+    "div",
+    {
+      ref: u,
+      "data-draw-rectangle": "true",
+      className: s,
+      style: {
+        position: "absolute",
+        inset: 0,
+        cursor: e ? "crosshair" : "default",
+        zIndex: 30,
+        pointerEvents: e ? "auto" : "none",
+        ...l
+      },
+      ...e ? p : {},
+      children: o && o.w > 0 && o.h > 0 && /* @__PURE__ */ E.jsx(
+        "svg",
+        {
+          viewBox: "0 0 1 1",
+          preserveAspectRatio: "none",
+          style: {
+            position: "absolute",
+            inset: 0,
+            width: "100%",
+            height: "100%",
+            overflow: "visible",
+            pointerEvents: "none"
+          },
+          children: /* @__PURE__ */ E.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] = L(null), [l, s] = L(null), [i, o] = L({ width: 1, height: 1 }), c = V(null);
+  W(() => {
+    const g = c.current;
+    if (!g) return;
+    const h = () => {
+      const w = g.getBoundingClientRect();
+      o({
+        width: Math.max(1, w.width),
+        height: Math.max(1, w.height)
+      });
+    };
+    h();
+    const d = new ResizeObserver(h);
+    return d.observe(g), () => d.disconnect();
+  }, []);
+  const u = M(
+    (g, h) => {
+      const d = c.current;
+      if (!d) return null;
+      const w = d.getBoundingClientRect(), C = (g - w.left) / w.width, b = (h - w.top) / w.height;
+      return {
+        x: Math.max(0, Math.min(1, C)),
+        y: Math.max(0, Math.min(1, b))
+      };
+    },
+    []
+  ), p = M(
+    (g, h) => {
+      const d = (g.x - h.x) * i.width, w = (g.y - h.y) * i.height, C = Math.sqrt(d * d + w * w), b = Math.min(i.width, i.height);
+      return C / b;
+    },
+    [i.height, i.width]
+  ), m = M(() => {
+    e(null), s(null);
+  }, []);
+  W(() => {
+    function g(h) {
+      h.key === "Escape" && m();
+    }
+    return document.addEventListener("keydown", g), () => document.removeEventListener("keydown", g);
+  }, [m]);
+  const v = M(
+    (g) => {
+      g.currentTarget.setPointerCapture(g.pointerId);
+      const h = u(g.clientX, g.clientY);
+      h && (e(h), s({ center: h, radius: 0 }));
+    },
+    [u]
+  ), x = M(
+    (g) => {
+      if (!n) return;
+      const h = u(g.clientX, g.clientY);
+      if (!h) return;
+      const d = p(h, n);
+      s({ center: n, radius: d });
+    },
+    [n, u, p]
+  ), f = M(
+    (g) => {
+      if (!n) return;
+      const h = u(g.clientX, g.clientY);
+      if (h) {
+        const d = p(h, n);
+        d >= r && t({ center: n, radius: d });
+      }
+      e(null), s(null);
+    },
+    [n, u, p, r, t]
+  ), y = M(() => {
+  }, []);
+  return {
+    circle: l,
+    viewportSize: i,
+    isDragging: n !== null,
+    reset: m,
+    containerRef: c,
+    containerProps: {
+      onPointerDown: v,
+      onPointerMove: x,
+      onPointerUp: f,
+      onPointerLeave: y
+    }
+  };
+}
+function ue({
+  onComplete: t,
+  minRadius: r,
+  strokeColor: n = "#3b82f6",
+  enabled: e = !0,
+  style: l,
+  className: s = ""
+}) {
+  if (!N(F))
+    throw new Error(
+      "<CutoutViewer.DrawCircle> must be used inside <CutoutViewer>"
+    );
+  const { circle: o, viewportSize: c, reset: u, containerRef: p, containerProps: m } = le({
+    onComplete: t,
+    minRadius: r
+  }), v = Math.max(1, c.width), x = Math.max(1, c.height), f = Math.min(v, x);
+  return W(() => {
+    e || u();
+  }, [e, u]), /* @__PURE__ */ E.jsx(
+    "div",
+    {
+      ref: p,
+      "data-draw-circle": "true",
+      className: s,
+      style: {
+        position: "absolute",
+        inset: 0,
+        cursor: e ? "crosshair" : "default",
+        zIndex: 30,
+        pointerEvents: e ? "auto" : "none",
+        ...l
+      },
+      ...e ? m : {},
+      children: o && o.radius > 0 && /* @__PURE__ */ E.jsx(
+        "svg",
+        {
+          viewBox: "0 0 1 1",
+          preserveAspectRatio: "none",
+          style: {
+            position: "absolute",
+            inset: 0,
+            width: "100%",
+            height: "100%",
+            overflow: "visible",
+            pointerEvents: "none"
+          },
+          children: /* @__PURE__ */ E.jsx(
+            "ellipse",
+            {
+              cx: o.center.x,
+              cy: o.center.y,
+              rx: o.radius * f / v,
+              ry: o.radius * f / 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 ?? ""}`;
@@ -1400,140 +1930,153 @@ function bt(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: e = "Main image",
+  mainImageAlt: r = "Main image",
   effect: n = "elevate",
-  enabled: r = !0,
-  showAll: i = !1,
-  alphaThreshold: l = 30,
-  hoverLeaveDelay: a = 150,
-  children: s,
+  enabled: e = !0,
+  showAll: l = !1,
+  showOverlays: s = !1,
+  alphaThreshold: i = 30,
+  hoverLeaveDelay: o = 150,
+  children: c,
   className: u = "",
-  style: c,
-  onHover: d,
-  onActiveChange: k,
-  onSelect: p
+  style: p,
+  onHover: m,
+  onActiveChange: v,
+  onSelect: x
 }) {
-  const g = typeof n == "string" ? K[n] ?? K.elevate : n;
-  O(() => {
-    Yt(g);
-  }, [g]);
-  const [m, v] = L(() => /* @__PURE__ */ new Map()), f = P(
-    (M) => {
-      v((W) => {
-        const Y = W.get(M.id);
-        if (Y && bt(Y) === bt(M))
-          return W;
-        const D = new Map(W);
-        return D.set(M.id, M), D;
+  const f = typeof n == "string" ? J[n] ?? J.elevate : n;
+  W(() => {
+    Xt(f);
+  }, [f]);
+  const [y, g] = L(() => /* @__PURE__ */ new Map()), h = M(
+    (O) => {
+      g((z) => {
+        const Y = z.get(O.id);
+        if (Y && xt(Y) === xt(O))
+          return z;
+        const a = new Map(z);
+        return a.set(O.id, O), a;
       });
     },
     []
-  ), b = P((M) => {
-    v((W) => {
-      if (!W.has(M)) return W;
-      const Y = new Map(W);
-      return Y.delete(M), Y;
+  ), d = M((O) => {
+    g((z) => {
+      if (!z.has(O)) return z;
+      const Y = new Map(z);
+      return Y.delete(O), Y;
     });
-  }, []), h = F(
-    () => ({ registerCutout: f, unregisterCutout: b }),
-    [f, b]
-  ), E = F(() => Array.from(m.values()), [m]), { activeId: w, selectedId: x, hoveredId: $, boundsMap: N, contourMap: H, containerRef: V, containerProps: q } = Nt(E, r, l, a), X = B(null), j = B(null), R = B(null);
-  O(() => {
-    $ !== X.current && (X.current = $, d?.($));
-  }, [$, d]), O(() => {
-    w !== j.current && (j.current = w, k?.(w));
-  }, [w, k]), O(() => {
-    x !== R.current && (R.current = x, p?.(x));
-  }, [x, p]);
-  const C = i || w !== null, _ = F(
+  }, []), w = B(
+    () => ({ registerCutout: h, unregisterCutout: d }),
+    [h, d]
+  ), C = B(() => Array.from(y.values()), [y]), { activeId: b, selectedId: R, hoveredId: P, viewportSize: U, boundsMap: D, contourMap: H, containerRef: Q, containerProps: q } = Ft(C, e, i, o), G = V(null), j = V(null), A = V(null);
+  W(() => {
+    P !== G.current && (G.current = P, m?.(P));
+  }, [P, m]), W(() => {
+    b !== j.current && (j.current = b, v?.(b));
+  }, [b, v]), W(() => {
+    R !== A.current && (A.current = R, x?.(R));
+  }, [R, x]);
+  const I = l || b !== null, S = B(
     () => ({
-      activeId: w,
-      selectedId: x,
-      hoveredId: $,
-      effect: g,
-      enabled: r,
-      showAll: i,
-      boundsMap: N,
+      activeId: b,
+      selectedId: R,
+      hoveredId: P,
+      viewportSize: U,
+      effect: f,
+      enabled: e,
+      showAll: l,
+      showOverlays: s,
+      boundsMap: D,
       contourMap: H,
-      isAnyActive: C
+      isAnyActive: I
     }),
-    [w, x, $, g, r, i, N, H, C]
+    [b, R, P, U, f, e, l, s, D, H, I]
   );
-  return /* @__PURE__ */ I.jsx(Q.Provider, { value: h, children: /* @__PURE__ */ I.jsx(xt.Provider, { value: _, children: /* @__PURE__ */ I.jsxs(
+  return /* @__PURE__ */ E.jsx(F.Provider, { value: w, children: /* @__PURE__ */ E.jsx(kt.Provider, { value: S, children: /* @__PURE__ */ E.jsxs(
     "div",
     {
-      ref: V,
+      ref: Q,
       className: u,
       style: {
         position: "relative",
         width: "100%",
         overflow: "hidden",
-        cursor: C && r ? "pointer" : "default",
-        ...c
+        cursor: I && e ? "pointer" : "default",
+        ...p
       },
       ...q,
       children: [
-        /* @__PURE__ */ I.jsx(
+        /* @__PURE__ */ E.jsx(
           "img",
           {
             src: t,
-            alt: e,
+            alt: r,
             draggable: !1,
             style: {
               display: "block",
               width: "100%",
               height: "auto",
               userSelect: "none",
-              transition: g.transition,
-              ...C && r ? g.mainImageHovered : {}
+              transition: f.transition,
+              ...I && e ? f.mainImageHovered : {}
             }
           }
         ),
-        /* @__PURE__ */ I.jsx(
+        /* @__PURE__ */ E.jsx(
           "div",
           {
             style: {
               pointerEvents: "none",
               position: "absolute",
               inset: 0,
-              transition: g.transition,
-              opacity: C && r ? 1 : 0,
-              ...g.vignetteStyle
+              transition: f.transition,
+              opacity: I && e ? 1 : 0,
+              ...f.vignetteStyle
             }
           }
         ),
-        s
+        c
       ]
     }
   ) }) });
 }
-const et = Qt;
-et.Cutout = Xt;
-et.BBoxCutout = Ut;
-et.PolygonCutout = qt;
-et.Overlay = Jt;
-et.DrawPolygon = Zt;
+const X = he;
+X.Cutout = Qt;
+X.BBoxCutout = te;
+X.PolygonCutout = ee;
+X.CircleCutout = re;
+X.Overlay = oe;
+X.DrawPolygon = ie;
+X.DrawRectangle = ce;
+X.DrawCircle = ue;
 export {
-  Jt as CutoutOverlay,
-  et as CutoutViewer,
-  Zt as DrawPolygon,
-  Pt as ImageHitTestStrategy,
-  Dt as PolygonHitTestStrategy,
-  Mt as RectHitTestStrategy,
-  Wt as createHitTestStrategy,
-  vt as defineKeyframes,
-  Vt as elevateEffect,
-  Lt as glowEffect,
-  K as hoverEffects,
-  Bt as liftEffect,
-  Ht as shimmerEffect,
-  Ft as subtleEffect,
-  zt as traceEffect,
-  ee as useCutout,
-  Nt as useCutoutHitTest,
-  Kt as useDrawPolygon
+  Vt as CircleHitTestStrategy,
+  oe as CutoutOverlay,
+  X as CutoutViewer,
+  ue as DrawCircle,
+  ie as DrawPolygon,
+  ce as DrawRectangle,
+  zt as ImageHitTestStrategy,
+  Nt as PolygonHitTestStrategy,
+  Lt as RectHitTestStrategy,
+  Bt as createHitTestStrategy,
+  bt as defineKeyframes,
+  Ut as elevateEffect,
+  qt as glowEffect,
+  J as hoverEffects,
+  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
 };