react-img-cutout 1.0.0

package/dist/index.js

@@ -0,0 +1,1245 @@
+import kt, { useState as tt, useRef as B, useCallback as O, useMemo as D, useEffect as N, useContext as F, createContext as at } from "react";
+var Q = { exports: {} }, G = {};
+var ct;
+function Et() {
+  if (ct) return G;
+  ct = 1;
+  var t = /* @__PURE__ */ Symbol.for("react.transitional.element"), r = /* @__PURE__ */ Symbol.for("react.fragment");
+  function o(n, a, l) {
+    var i = null;
+    if (l !== void 0 && (i = "" + l), a.key !== void 0 && (i = "" + a.key), "key" in a) {
+      l = {};
+      for (var s in a)
+        s !== "key" && (l[s] = a[s]);
+    } else l = a;
+    return a = l.ref, {
+      $$typeof: t,
+      type: n,
+      key: i,
+      ref: a !== void 0 ? a : null,
+      props: l
+    };
+  }
+  return G.Fragment = r, G.jsx = o, G.jsxs = o, G;
+}
+var X = {};
+var ft;
+function It() {
+  return ft || (ft = 1, process.env.NODE_ENV !== "production" && (function() {
+    function t(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === y ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case S:
+          return "Fragment";
+        case m:
+          return "Profiler";
+        case T:
+          return "StrictMode";
+        case M:
+          return "Suspense";
+        case V:
+          return "SuspenseList";
+        case k:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case w:
+            return "Portal";
+          case P:
+            return e.displayName || "Context";
+          case j:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case b:
+            var c = e.render;
+            return e = e.displayName, e || (e = c.displayName || c.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case z:
+            return c = e.displayName || null, c !== null ? c : t(e.type) || "Memo";
+          case E:
+            c = e._payload, e = e._init;
+            try {
+              return t(e(c));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function r(e) {
+      return "" + e;
+    }
+    function o(e) {
+      try {
+        r(e);
+        var c = !1;
+      } catch {
+        c = !0;
+      }
+      if (c) {
+        c = console;
+        var x = c.error, I = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return x.call(
+          c,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          I
+        ), r(e);
+      }
+    }
+    function n(e) {
+      if (e === S) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === E)
+        return "<...>";
+      try {
+        var c = t(e);
+        return c ? "<" + c + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function a() {
+      var e = v.A;
+      return e === null ? null : e.getOwner();
+    }
+    function l() {
+      return Error("react-stack-top-frame");
+    }
+    function i(e) {
+      if ($.call(e, "key")) {
+        var c = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (c && c.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function s(e, c) {
+      function x() {
+        W || (W = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          c
+        ));
+      }
+      x.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: x,
+        configurable: !0
+      });
+    }
+    function d() {
+      var e = t(this.type);
+      return Y[e] || (Y[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function u(e, c, x, I, Z, nt) {
+      var A = x.ref;
+      return e = {
+        $$typeof: g,
+        type: e,
+        key: c,
+        props: x,
+        _owner: I
+      }, (A !== void 0 ? A : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: d
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: Z
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: nt
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function p(e, c, x, I, Z, nt) {
+      var A = c.children;
+      if (A !== void 0)
+        if (I)
+          if (L(A)) {
+            for (I = 0; I < A.length; I++)
+              R(A[I]);
+            Object.freeze && Object.freeze(A);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else R(A);
+      if ($.call(c, "key")) {
+        A = t(e);
+        var H = Object.keys(c).filter(function(wt) {
+          return wt !== "key";
+        });
+        I = 0 < H.length ? "{key: someKey, " + H.join(": ..., ") + ": ...}" : "{key: someKey}", ut[A + I] || (H = 0 < H.length ? "{" + H.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          I,
+          A,
+          H,
+          A
+        ), ut[A + I] = !0);
+      }
+      if (A = null, x !== void 0 && (o(x), A = "" + x), i(c) && (o(c.key), A = "" + c.key), "key" in c) {
+        x = {};
+        for (var st in c)
+          st !== "key" && (x[st] = c[st]);
+      } else x = c;
+      return A && s(
+        x,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), u(
+        e,
+        A,
+        x,
+        a(),
+        Z,
+        nt
+      );
+    }
+    function R(e) {
+      h(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === E && (e._payload.status === "fulfilled" ? h(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function h(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === g;
+    }
+    var f = kt, g = /* @__PURE__ */ Symbol.for("react.transitional.element"), w = /* @__PURE__ */ Symbol.for("react.portal"), S = /* @__PURE__ */ Symbol.for("react.fragment"), T = /* @__PURE__ */ Symbol.for("react.strict_mode"), m = /* @__PURE__ */ Symbol.for("react.profiler"), j = /* @__PURE__ */ Symbol.for("react.consumer"), P = /* @__PURE__ */ Symbol.for("react.context"), b = /* @__PURE__ */ Symbol.for("react.forward_ref"), M = /* @__PURE__ */ Symbol.for("react.suspense"), V = /* @__PURE__ */ Symbol.for("react.suspense_list"), z = /* @__PURE__ */ Symbol.for("react.memo"), E = /* @__PURE__ */ Symbol.for("react.lazy"), k = /* @__PURE__ */ Symbol.for("react.activity"), y = /* @__PURE__ */ Symbol.for("react.client.reference"), v = f.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, $ = Object.prototype.hasOwnProperty, L = Array.isArray, _ = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    f = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var W, Y = {}, U = f.react_stack_bottom_frame.bind(
+      f,
+      l
+    )(), lt = _(n(l)), ut = {};
+    X.Fragment = S, X.jsx = function(e, c, x) {
+      var I = 1e4 > v.recentlyCreatedOwnerStacks++;
+      return p(
+        e,
+        c,
+        x,
+        !1,
+        I ? Error("react-stack-top-frame") : U,
+        I ? _(n(e)) : lt
+      );
+    }, X.jsxs = function(e, c, x) {
+      var I = 1e4 > v.recentlyCreatedOwnerStacks++;
+      return p(
+        e,
+        c,
+        x,
+        !0,
+        I ? Error("react-stack-top-frame") : U,
+        I ? _(n(e)) : lt
+      );
+    };
+  })()), X;
+}
+var dt;
+function At() {
+  return dt || (dt = 1, process.env.NODE_ENV === "production" ? Q.exports = Et() : Q.exports = It()), Q.exports;
+}
+var C = At();
+function Rt(t, r) {
+  const o = new Uint8Array(r);
+  for (let n = 0; n < r; n++)
+    o[n] = t[n * 4 + 3];
+  return o;
+}
+function _t(t, r, o, n) {
+  if (r <= 0 || o <= 0) return { x: 0, y: 0, w: 1, h: 1 };
+  let a = r, l = o, i = 0, s = 0, d = !1;
+  for (let u = 0; u < o; u++)
+    for (let p = 0; p < r; p++)
+      t[u * r + p] > n && (p < a && (a = p), p > i && (i = p), u < l && (l = u), u > s && (s = u), d = !0);
+  return d ? {
+    x: a / r,
+    y: l / o,
+    w: (i - a + 1) / r,
+    h: (s - l + 1) / o
+  } : { x: 0, y: 0, w: 1, h: 1 };
+}
+class Ct {
+  id;
+  bounds = { x: 0, y: 0, w: 1, h: 1 };
+  /** URL of the cutout mask image */
+  src;
+  /** Alpha value (0-255) a pixel must exceed to be considered "visible" */
+  threshold;
+  /** Pre-extracted alpha channel — one byte per pixel, for fast lookups */
+  alpha = new Uint8Array(0);
+  /** 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;
+  }
+  /**
+   * Loads the cutout image and pre-computes the alpha buffer + bounding box.
+   *
+   * Steps:
+   * 1. Create an <img> element and wait for it to load.
+   * 2. Draw the image onto a temporary offscreen <canvas>.
+   * 3. Read the raw RGBA pixel data from the canvas.
+   * 4. Extract only the alpha channel into a compact buffer (see `extractAlpha`).
+   * 5. Compute the tight bounding box of visible pixels (see `computeBoundsFromAlpha`).
+   *
+   * If the canvas is CORS-tainted (image from a different origin without proper
+   * headers), reading pixel data will throw. In that case we fall back to an
+   * empty alpha buffer, which means hitTest will always return false.
+   */
+  async prepare() {
+    const r = new Image();
+    r.crossOrigin = "anonymous", r.src = this.src, await new Promise((i) => {
+      r.onload = () => i(), r.onerror = () => i();
+    });
+    const o = r.naturalWidth, n = r.naturalHeight;
+    if (o <= 0 || n <= 0) return;
+    const a = document.createElement("canvas");
+    a.width = o, a.height = n;
+    const l = a.getContext("2d", { willReadFrequently: !0 });
+    if (l)
+      try {
+        l.drawImage(r, 0, 0);
+        const i = l.getImageData(0, 0, o, n);
+        this.alpha = Rt(i.data, o * n), this.width = o, this.height = n, this.bounds = _t(this.alpha, o, n, this.threshold);
+      } catch {
+        this.alpha = new Uint8Array(0);
+      }
+  }
+  /**
+   * Tests whether the normalized point (nx, ny) is over a visible pixel.
+   *
+   * Three-phase approach:
+   * 1. **Alpha buffer check** — if the buffer is empty (image failed to load or
+   *    was CORS-tainted), return false immediately.
+   * 2. **Bounding-box check** — reject points outside the pre-computed AABB of
+   *    visible pixels (very cheap).
+   * 3. **Per-pixel alpha lookup** — convert the normalized coordinates to pixel
+   *    indices, look up the alpha value in the pre-extracted buffer, and compare
+   *    it against the threshold.
+   *
+   * @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) {
+    if (this.alpha.length === 0) return !1;
+    const n = this.bounds;
+    if (r < n.x || r > n.x + n.w || o < n.y || o > n.y + n.h) return !1;
+    const a = Math.min(this.width - 1, Math.max(0, Math.floor(r * this.width))), l = Math.min(
+      this.height - 1,
+      Math.max(0, Math.floor(o * this.height))
+    );
+    return this.alpha[l * this.width + a] > this.threshold;
+  }
+}
+class Tt {
+  id;
+  bounds;
+  constructor(r) {
+    this.id = r.id, this.bounds = { ...r.bounds };
+  }
+  hitTest(r, o) {
+    const n = this.bounds;
+    return r >= n.x && r <= n.x + n.w && o >= n.y && o <= n.y + n.h;
+  }
+}
+function St(t, r, o) {
+  let n = !1;
+  for (let a = 0, l = o.length - 1; a < o.length; l = a++) {
+    const i = o[a][0], s = o[a][1], d = o[l][0], u = o[l][1];
+    s > r != u > r && t < (d - i) * (r - s) / (u - s) + i && (n = !n);
+  }
+  return n;
+}
+class jt {
+  id;
+  bounds;
+  points;
+  constructor(r) {
+    this.id = r.id, this.points = r.points;
+    let o = 1 / 0, n = 1 / 0, a = -1 / 0, l = -1 / 0;
+    for (const [i, s] of r.points)
+      i < o && (o = i), i > a && (a = i), s < n && (n = s), s > l && (l = s);
+    this.bounds = {
+      x: o,
+      y: n,
+      w: a - o,
+      h: l - n
+    };
+  }
+  /**
+   * Tests whether the normalized point (nx, ny) is inside this polygon.
+   *
+   * Two-phase approach for performance:
+   * 1. **Bounding-box check** — if the point is outside the AABB, return false
+   *    immediately (very cheap).
+   * 2. **Ray-cast check** — run the full point-in-polygon algorithm for precise
+   *    hit detection only if the point passed the bounding-box check.
+   *
+   * @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 : St(r, o, this.points);
+  }
+}
+function $t(t, r) {
+  switch (t.type) {
+    case "image":
+      return new Ct(t, r);
+    case "bbox":
+      return new Tt(t);
+    case "polygon":
+      return new jt(t);
+  }
+}
+function Pt(t) {
+  switch (t.type) {
+    case "image":
+      return `${t.id}:image:${t.src}:${t.label ?? ""}`;
+    case "bbox":
+      return `${t.id}:bbox:${t.bounds.x},${t.bounds.y},${t.bounds.w},${t.bounds.h}:${t.label ?? ""}`;
+    case "polygon":
+      return `${t.id}:polygon:${t.points.flat().join(",")}:${t.label ?? ""}`;
+  }
+}
+function Mt(t, r = !0, o = 30, n = 150) {
+  const [a, l] = tt(null), [i, s] = tt(null), d = B(null), u = B([]), [p, R] = tt({}), h = Math.min(255, Math.max(0, o)), f = B(null), g = O(() => {
+    f.current === null && (f.current = setTimeout(() => {
+      f.current = null, l(null);
+    }, n));
+  }, [n]), w = O(() => {
+    f.current !== null && (clearTimeout(f.current), f.current = null);
+  }, []), S = t.map(Pt).join("|"), T = D(() => t, [S]);
+  N(() => {
+    if (!r) {
+      u.current = [];
+      return;
+    }
+    let E = !1, k = [];
+    async function y() {
+      const v = [], $ = {};
+      for (const L of T) {
+        const _ = $t(L, h);
+        if (_.prepare && await _.prepare(), E) return;
+        v.push(_), $[_.id] = _.bounds;
+      }
+      E || (k = v, u.current = v, R($));
+    }
+    return y(), () => {
+      E = !0;
+      for (const v of k)
+        v.dispose?.();
+    };
+  }, [T, r, h]);
+  const m = O(
+    (E, k) => {
+      const y = u.current;
+      for (let v = y.length - 1; v >= 0; v--)
+        if (y[v].hitTest(E, k))
+          return y[v].id;
+      return null;
+    },
+    []
+  ), j = O(
+    (E) => {
+      const k = d.current;
+      if (!k) return null;
+      const y = k.getBoundingClientRect(), v = (E.clientX - y.left) / y.width, $ = (E.clientY - y.top) / y.height;
+      return v < 0 || v > 1 || $ < 0 || $ > 1 ? null : { nx: v, ny: $ };
+    },
+    []
+  ), P = O(
+    (E) => {
+      if (!r) return;
+      const k = j(E);
+      if (!k) {
+        g();
+        return;
+      }
+      const y = m(k.nx, k.ny);
+      if (y === null) {
+        if (E.target?.closest('[data-cutout-overlay="true"]')) {
+          w();
+          return;
+        }
+        g();
+        return;
+      }
+      w(), l(y);
+    },
+    [r, j, m, g, w]
+  ), b = O(() => {
+    g();
+  }, [g]), M = O(
+    (E) => {
+      if (!r) return;
+      const k = j(E);
+      if (!k) {
+        s(null);
+        return;
+      }
+      const y = m(k.nx, k.ny);
+      s(y === i || y === null ? null : y);
+    },
+    [r, j, m, i]
+  ), V = i ?? a, z = r ? p : {};
+  return N(() => () => {
+    w();
+  }, [w]), {
+    hoveredId: a,
+    selectedId: i,
+    activeId: V,
+    boundsMap: z,
+    containerRef: d,
+    containerProps: {
+      onPointerMove: P,
+      onPointerLeave: b,
+      onClick: M
+    }
+  };
+}
+function it(t, r) {
+  return { name: t, css: r };
+}
+const pt = /* @__PURE__ */ new Set();
+function Wt(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} {
+${r.css}
+}`, document.head.appendChild(o);
+    }
+}
+const J = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Ot = {
+  name: "elevate",
+  transition: J,
+  mainImageHovered: {
+    filter: "brightness(0.45) saturate(0.7)"
+  },
+  vignetteStyle: {
+    background: "radial-gradient(ellipse at center, transparent 20%, rgba(0,0,0,0.4) 100%)"
+  },
+  cutoutActive: {
+    transform: "scale(1.04) translateY(-6px)",
+    filter: "drop-shadow(0 0 28px rgba(130, 190, 255, 0.5)) drop-shadow(0 16px 48px rgba(0, 0, 0, 0.55))",
+    opacity: 1
+  },
+  cutoutInactive: {
+    transform: "scale(1)",
+    filter: "brightness(0.45) saturate(0.6)",
+    opacity: 0.55
+  },
+  cutoutIdle: {
+    transform: "scale(1)",
+    filter: "drop-shadow(0 1px 4px rgba(0, 0, 0, 0.12))",
+    opacity: 1
+  },
+  geometryActive: {
+    fill: "rgba(130, 190, 255, 0.2)",
+    stroke: "rgba(130, 190, 255, 0.9)",
+    strokeWidth: 2,
+    glow: "0 0 24px rgba(130, 190, 255, 0.5), 0 0 56px rgba(130, 190, 255, 0.2), 0 12px 40px rgba(0, 0, 0, 0.4)"
+  },
+  geometryInactive: {
+    fill: "rgba(100, 150, 200, 0.06)",
+    stroke: "rgba(100, 150, 200, 0.2)",
+    strokeWidth: 1
+  },
+  geometryIdle: {
+    fill: "transparent",
+    stroke: "transparent",
+    strokeWidth: 1
+  }
+}, Nt = {
+  name: "glow",
+  transition: J,
+  mainImageHovered: {
+    filter: "brightness(0.55) saturate(0.8)"
+  },
+  vignetteStyle: {
+    background: "radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.3) 100%)"
+  },
+  cutoutActive: {
+    transform: "scale(1)",
+    filter: "drop-shadow(0 0 20px rgba(255, 200, 100, 0.6)) drop-shadow(0 0 60px rgba(255, 200, 100, 0.25))",
+    opacity: 1
+  },
+  cutoutInactive: {
+    transform: "scale(1)",
+    filter: "brightness(0.5) saturate(0.5)",
+    opacity: 0.5
+  },
+  cutoutIdle: {
+    transform: "scale(1)",
+    filter: "none",
+    opacity: 1
+  },
+  geometryActive: {
+    fill: "rgba(255, 200, 100, 0.15)",
+    stroke: "rgba(255, 200, 100, 0.85)",
+    strokeWidth: 2,
+    glow: "0 0 20px rgba(255, 200, 100, 0.5), 0 0 56px rgba(255, 200, 100, 0.2)"
+  },
+  geometryInactive: {
+    fill: "rgba(200, 160, 80, 0.05)",
+    stroke: "rgba(200, 160, 80, 0.2)",
+    strokeWidth: 1
+  },
+  geometryIdle: {
+    fill: "transparent",
+    stroke: "transparent",
+    strokeWidth: 1
+  }
+}, Yt = {
+  name: "lift",
+  transition: J,
+  mainImageHovered: {
+    filter: "brightness(0.4)"
+  },
+  vignetteStyle: {
+    background: "rgba(0,0,0,0.25)"
+  },
+  cutoutActive: {
+    transform: "scale(1.06) translateY(-10px)",
+    filter: "drop-shadow(0 24px 64px rgba(0, 0, 0, 0.7))",
+    opacity: 1
+  },
+  cutoutInactive: {
+    transform: "scale(0.97)",
+    filter: "brightness(0.35)",
+    opacity: 0.4
+  },
+  cutoutIdle: {
+    transform: "scale(1)",
+    filter: "none",
+    opacity: 1
+  },
+  geometryActive: {
+    fill: "rgba(255, 255, 255, 0.1)",
+    stroke: "rgba(255, 255, 255, 0.7)",
+    strokeWidth: 2,
+    glow: "0 20px 56px rgba(0, 0, 0, 0.6), 0 0 16px rgba(255, 255, 255, 0.1)"
+  },
+  geometryInactive: {
+    fill: "rgba(255, 255, 255, 0.02)",
+    stroke: "rgba(255, 255, 255, 0.1)",
+    strokeWidth: 1
+  },
+  geometryIdle: {
+    fill: "transparent",
+    stroke: "transparent",
+    strokeWidth: 1
+  }
+}, Dt = {
+  name: "subtle",
+  transition: "all 0.3s ease",
+  mainImageHovered: {
+    filter: "brightness(0.7)"
+  },
+  vignetteStyle: {
+    background: "transparent"
+  },
+  cutoutActive: {
+    transform: "scale(1)",
+    filter: "none",
+    opacity: 1
+  },
+  cutoutInactive: {
+    transform: "scale(1)",
+    filter: "none",
+    opacity: 0.35
+  },
+  cutoutIdle: {
+    transform: "scale(1)",
+    filter: "none",
+    opacity: 1
+  },
+  geometryActive: {
+    fill: "rgba(255, 255, 255, 0.08)",
+    stroke: "rgba(255, 255, 255, 0.5)",
+    strokeWidth: 1
+  },
+  geometryInactive: {
+    fill: "transparent",
+    stroke: "rgba(255, 255, 255, 0.1)",
+    strokeWidth: 1
+  },
+  geometryIdle: {
+    fill: "transparent",
+    stroke: "transparent",
+    strokeWidth: 1
+  }
+}, ht = it(
+  "_ricut-trace-stroke",
+  `from { stroke-dashoffset: 0; }
+   to   { stroke-dashoffset: -1; }`
+), gt = it(
+  "_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 = {
+  name: "trace",
+  transition: J,
+  keyframes: [ht, gt],
+  mainImageHovered: {
+    filter: "brightness(0.35) saturate(0.5)"
+  },
+  vignetteStyle: {
+    background: "radial-gradient(ellipse at center, transparent 20%, rgba(0,0,0,0.5) 100%)"
+  },
+  cutoutActive: {
+    transform: "scale(1)",
+    filter: "drop-shadow(-3px -3px 6px rgba(255,255,255,0.6)) drop-shadow(0 0 2px rgba(255,255,255,0.15))",
+    opacity: 1,
+    animation: `${gt.name} 3s linear infinite`
+  },
+  cutoutInactive: {
+    transform: "scale(1)",
+    filter: "brightness(0.35) saturate(0.4)",
+    opacity: 0.4
+  },
+  cutoutIdle: {
+    transform: "scale(1)",
+    filter: "none",
+    opacity: 1
+  },
+  geometryActive: {
+    fill: "rgba(255, 255, 255, 0.03)",
+    stroke: "rgba(255, 255, 255, 0.9)",
+    strokeWidth: 2.5,
+    strokeDasharray: "0.15 0.85",
+    animation: `${ht.name} 3s linear infinite`,
+    glow: "0 0 10px rgba(255, 255, 255, 0.25)"
+  },
+  geometryInactive: {
+    fill: "transparent",
+    stroke: "rgba(255, 255, 255, 0.15)",
+    strokeWidth: 1
+  },
+  geometryIdle: {
+    fill: "transparent",
+    stroke: "transparent",
+    strokeWidth: 1
+  }
+}, mt = it(
+  "_ricut-shimmer",
+  `0%, 100% {
+    filter: brightness(1.05) contrast(1.02)
+            drop-shadow(0 0 6px rgba(255, 255, 255, 0.12))
+            drop-shadow(0 12px 32px rgba(0, 0, 0, 0.4));
+  }
+  18% {
+    filter: brightness(1.4) contrast(1.08)
+            drop-shadow(0 0 14px rgba(255, 255, 255, 0.4))
+            drop-shadow(0 12px 32px rgba(0, 0, 0, 0.4));
+  }
+  36% {
+    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));
+  }`
+), Ht = {
+  name: "shimmer",
+  transition: J,
+  keyframes: [mt],
+  mainImageHovered: {
+    filter: "brightness(0.35) saturate(0.6)"
+  },
+  vignetteStyle: {
+    background: "radial-gradient(ellipse at center, transparent 20%, rgba(0,0,0,0.5) 100%)"
+  },
+  cutoutActive: {
+    transform: "scale(1.04) translateY(-6px)",
+    /* The resting filter is overridden by the animation keyframes, but
+       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`
+  },
+  cutoutInactive: {
+    transform: "scale(1)",
+    filter: "brightness(0.35) saturate(0.5)",
+    opacity: 0.4
+  },
+  cutoutIdle: {
+    transform: "scale(1)",
+    filter: "drop-shadow(0 1px 4px rgba(0, 0, 0, 0.1))",
+    opacity: 1
+  },
+  geometryActive: {
+    fill: "rgba(255, 255, 255, 0.1)",
+    stroke: "rgba(255, 255, 255, 0.7)",
+    strokeWidth: 2,
+    glow: "0 0 14px rgba(255, 255, 255, 0.35), 0 12px 32px rgba(0, 0, 0, 0.4)"
+  },
+  geometryInactive: {
+    fill: "rgba(255, 255, 255, 0.02)",
+    stroke: "rgba(255, 255, 255, 0.1)",
+    strokeWidth: 1
+  },
+  geometryIdle: {
+    fill: "transparent",
+    stroke: "transparent",
+    strokeWidth: 1
+  }
+}, q = {
+  elevate: Ot,
+  glow: Nt,
+  lift: Yt,
+  subtle: Dt,
+  trace: Vt,
+  shimmer: Ht
+}, et = at(null), xt = at(null);
+function rt() {
+  const t = F(xt);
+  if (!t) throw new Error("Must be used inside <CutoutViewer>");
+  return t;
+}
+const K = at(null);
+function qt() {
+  const t = F(K);
+  if (!t)
+    throw new Error("useCutout must be used inside <CutoutViewer.Cutout>");
+  return t;
+}
+function Bt({ id: t, src: r, label: o, effect: n, children: a, renderLayer: l }) {
+  const i = F(et), s = rt();
+  if (!i)
+    throw new Error("<CutoutViewer.Cutout> must be used inside <CutoutViewer>");
+  N(() => (i.registerCutout({ type: "image", id: t, src: r, label: o }), () => i.unregisterCutout(t)), [t, r, o, i]);
+  const d = n ? typeof n == "string" ? q[n] ?? s.effect : n : s.effect, u = s.activeId === t, p = s.hoveredId === t, R = s.selectedId === t, h = { x: 0, y: 0, w: 1, h: 1 }, f = s.boundsMap[t] ?? h;
+  let g;
+  !s.enabled || !s.isAnyActive && !s.showAll ? g = d.cutoutIdle : s.showAll || u ? g = d.cutoutActive : g = d.cutoutInactive;
+  const w = D(
+    () => ({
+      id: t,
+      label: o,
+      bounds: f,
+      isActive: u,
+      isHovered: p,
+      isSelected: R,
+      effect: d
+    }),
+    [t, o, f, u, p, R, d]
+  );
+  return /* @__PURE__ */ C.jsxs(K.Provider, { value: w, children: [
+    /* @__PURE__ */ C.jsx(
+      "div",
+      {
+        "data-cutout-id": t,
+        style: {
+          pointerEvents: "none",
+          position: "absolute",
+          inset: 0,
+          zIndex: u ? 20 : 10,
+          transition: d.transition,
+          ...g
+        },
+        children: l ? l({ isActive: u, isHovered: p, isSelected: R, bounds: f, effect: d }) : /* @__PURE__ */ C.jsx(
+          "img",
+          {
+            src: r,
+            alt: o || t,
+            draggable: !1,
+            style: {
+              width: "100%",
+              height: "100%",
+              objectFit: "fill",
+              userSelect: "none"
+            }
+          }
+        )
+      }
+    ),
+    a
+  ] });
+}
+function bt(t) {
+  const { filter: r, ...o } = t;
+  return o;
+}
+function Ft({
+  id: t,
+  bounds: r,
+  label: o,
+  effect: n,
+  children: a,
+  renderLayer: l
+}) {
+  const i = F(et), s = rt();
+  if (!i)
+    throw new Error(
+      "<CutoutViewer.BBoxCutout> must be used inside <CutoutViewer>"
+    );
+  const { x: d, y: u, w: p, h: R } = r;
+  N(() => (i.registerCutout({ type: "bbox", id: t, bounds: { x: d, y: u, w: p, h: R }, label: o }), () => i.unregisterCutout(t)), [t, d, u, p, R, o, i]);
+  const h = n ? typeof n == "string" ? q[n] ?? s.effect : n : s.effect, f = s.activeId === t, g = s.hoveredId === t, w = s.selectedId === t, S = { x: 0, y: 0, w: 1, h: 1 }, T = s.boundsMap[t] ?? S;
+  let m, j;
+  !s.enabled || !s.isAnyActive && !s.showAll ? (j = { ...h.cutoutIdle, filter: "none", opacity: 0 }, m = h.geometryIdle) : s.showAll || f ? (j = bt(h.cutoutActive), m = h.geometryActive) : (j = bt(h.cutoutInactive), m = h.geometryInactive);
+  const b = m ?? {
+    fill: "rgba(37, 99, 235, 0.15)",
+    stroke: "rgba(37, 99, 235, 0.6)",
+    strokeWidth: 2
+  }, M = D(
+    () => ({
+      id: t,
+      label: o,
+      bounds: T,
+      isActive: f,
+      isHovered: g,
+      isSelected: w,
+      effect: h
+    }),
+    [t, o, T, f, g, w, h]
+  );
+  return /* @__PURE__ */ C.jsxs(K.Provider, { value: M, children: [
+    /* @__PURE__ */ C.jsx(
+      "div",
+      {
+        "data-cutout-id": t,
+        style: {
+          pointerEvents: "none",
+          position: "absolute",
+          inset: 0,
+          zIndex: f ? 20 : 10,
+          transition: h.transition,
+          ...j
+        },
+        children: l ? l({ isActive: f, isHovered: g, isSelected: w, bounds: T, effect: h }) : /* @__PURE__ */ C.jsx(
+          "svg",
+          {
+            viewBox: "0 0 1 1",
+            preserveAspectRatio: "none",
+            style: {
+              position: "absolute",
+              inset: 0,
+              width: "100%",
+              height: "100%",
+              overflow: "visible",
+              filter: b.glow ? `drop-shadow(${b.glow.split(",")[0]?.trim() ?? ""})` : "none"
+            },
+            children: /* @__PURE__ */ C.jsx(
+              "rect",
+              {
+                x: T.x,
+                y: T.y,
+                width: T.w,
+                height: T.h,
+                rx: 4e-3,
+                fill: b.fill,
+                stroke: b.stroke,
+                strokeWidth: (b.strokeWidth ?? 2) * 15e-4,
+                strokeLinecap: b.strokeDasharray ? "round" : void 0,
+                strokeDasharray: b.strokeDasharray,
+                pathLength: b.strokeDasharray ? 1 : void 0,
+                style: {
+                  transition: h.transition,
+                  animation: b.animation
+                }
+              }
+            )
+          }
+        )
+      }
+    ),
+    a
+  ] });
+}
+function yt(t) {
+  const { filter: r, ...o } = t;
+  return o;
+}
+function zt({
+  id: t,
+  points: r,
+  label: o,
+  effect: n,
+  children: a,
+  renderLayer: l
+}) {
+  const i = F(et), s = rt();
+  if (!i)
+    throw new Error(
+      "<CutoutViewer.PolygonCutout> must be used inside <CutoutViewer>"
+    );
+  const d = r.flat().join(",");
+  N(() => (i.registerCutout({ type: "polygon", id: t, points: r, label: o }), () => i.unregisterCutout(t)), [t, d, o, i]);
+  const u = n ? typeof n == "string" ? q[n] ?? s.effect : n : s.effect, p = s.activeId === t, R = s.hoveredId === t, h = s.selectedId === t, f = { x: 0, y: 0, w: 1, h: 1 }, g = s.boundsMap[t] ?? f;
+  let w, S;
+  !s.enabled || !s.isAnyActive && !s.showAll ? (S = { ...u.cutoutIdle, filter: "none", opacity: 0 }, w = u.geometryIdle) : s.showAll || p ? (S = yt(u.cutoutActive), w = u.geometryActive) : (S = yt(u.cutoutInactive), w = u.geometryInactive);
+  const m = w ?? {
+    fill: "rgba(37, 99, 235, 0.15)",
+    stroke: "rgba(37, 99, 235, 0.6)",
+    strokeWidth: 2
+  }, j = D(
+    () => ({
+      id: t,
+      label: o,
+      bounds: g,
+      isActive: p,
+      isHovered: R,
+      isSelected: h,
+      effect: u
+    }),
+    [t, o, g, p, R, h, u]
+  );
+  return /* @__PURE__ */ C.jsxs(K.Provider, { value: j, children: [
+    /* @__PURE__ */ C.jsx(
+      "div",
+      {
+        "data-cutout-id": t,
+        style: {
+          pointerEvents: "none",
+          position: "absolute",
+          inset: 0,
+          zIndex: p ? 20 : 10,
+          transition: u.transition,
+          ...S
+        },
+        children: l ? l({ isActive: p, isHovered: R, isSelected: h, bounds: g, effect: u }) : /* @__PURE__ */ C.jsx(
+          "svg",
+          {
+            viewBox: "0 0 1 1",
+            preserveAspectRatio: "none",
+            style: {
+              position: "absolute",
+              inset: 0,
+              width: "100%",
+              height: "100%",
+              overflow: "visible",
+              filter: m.glow ? `drop-shadow(${m.glow.split(",")[0]?.trim() ?? ""})` : "none"
+            },
+            children: /* @__PURE__ */ C.jsx(
+              "polygon",
+              {
+                points: r.map(([P, b]) => `${P},${b}`).join(" "),
+                fill: m.fill,
+                stroke: m.stroke,
+                strokeWidth: (m.strokeWidth ?? 2) * 15e-4,
+                strokeLinejoin: "round",
+                strokeLinecap: m.strokeDasharray ? "round" : void 0,
+                strokeDasharray: m.strokeDasharray,
+                pathLength: m.strokeDasharray ? 1 : void 0,
+                style: {
+                  transition: u.transition,
+                  animation: m.animation
+                }
+              }
+            )
+          }
+        )
+      }
+    ),
+    a
+  ] });
+}
+function Lt(t, r) {
+  const { x: o, y: n, w: a, h: l } = r;
+  let i, s;
+  t.includes("left") ? (i = `${o * 100}%`, s = "0") : t.includes("right") ? (i = `${(o + a) * 100}%`, s = "-100%") : (i = `${(o + a / 2) * 100}%`, s = "-50%");
+  let d, u;
+  return t.startsWith("top") ? (d = `${n * 100}%`, u = "-100%") : t.startsWith("bottom") ? (d = `${(n + l) * 100}%`, u = "0") : (d = `${(n + l / 2) * 100}%`, u = "-50%"), {
+    position: "absolute",
+    left: i,
+    top: d,
+    transform: `translate(${s}, ${u})`
+  };
+}
+function Ut({
+  placement: t = "top-center",
+  children: r,
+  className: o = "",
+  style: n
+}) {
+  const a = F(K), l = rt();
+  if (!a)
+    throw new Error(
+      "<CutoutViewer.Overlay> must be used inside <CutoutViewer.Cutout>"
+    );
+  const i = l.enabled && (l.showAll || a.isActive), s = Lt(t, a.bounds);
+  return /* @__PURE__ */ C.jsx(
+    "div",
+    {
+      "data-cutout-overlay": "true",
+      className: o,
+      style: {
+        zIndex: 30,
+        transition: a.effect.transition,
+        opacity: i ? 1 : 0,
+        pointerEvents: i ? "auto" : "none",
+        ...s,
+        ...n
+      },
+      children: r
+    }
+  );
+}
+function vt(t) {
+  switch (t.type) {
+    case "image":
+      return `image:${t.src}:${t.label ?? ""}`;
+    case "bbox":
+      return `bbox:${t.bounds.x},${t.bounds.y},${t.bounds.w},${t.bounds.h}:${t.label ?? ""}`;
+    case "polygon":
+      return `polygon:${t.points.flat().join(",")}:${t.label ?? ""}`;
+  }
+}
+function Gt({
+  mainImage: t,
+  mainImageAlt: r = "Main image",
+  effect: o = "elevate",
+  enabled: n = !0,
+  showAll: a = !1,
+  alphaThreshold: l = 30,
+  hoverLeaveDelay: i = 150,
+  children: s,
+  className: d = "",
+  style: u,
+  onHover: p,
+  onActiveChange: R,
+  onSelect: h
+}) {
+  const f = typeof o == "string" ? q[o] ?? q.elevate : o;
+  N(() => {
+    Wt(f);
+  }, [f]);
+  const [g, w] = tt(() => /* @__PURE__ */ new Map()), S = O(
+    (_) => {
+      w((W) => {
+        const Y = W.get(_.id);
+        if (Y && vt(Y) === vt(_))
+          return W;
+        const U = new Map(W);
+        return U.set(_.id, _), U;
+      });
+    },
+    []
+  ), T = O((_) => {
+    w((W) => {
+      if (!W.has(_)) return W;
+      const Y = new Map(W);
+      return Y.delete(_), Y;
+    });
+  }, []), m = D(
+    () => ({ registerCutout: S, unregisterCutout: T }),
+    [S, T]
+  ), j = D(() => Array.from(g.values()), [g]), { activeId: P, selectedId: b, hoveredId: M, boundsMap: V, containerRef: z, containerProps: E } = Mt(j, n, l, i), k = B(null), y = B(null), v = B(null);
+  N(() => {
+    M !== k.current && (k.current = M, p?.(M));
+  }, [M, p]), N(() => {
+    P !== y.current && (y.current = P, R?.(P));
+  }, [P, R]), N(() => {
+    b !== v.current && (v.current = b, h?.(b));
+  }, [b, h]);
+  const $ = a || P !== null, L = D(
+    () => ({
+      activeId: P,
+      selectedId: b,
+      hoveredId: M,
+      effect: f,
+      enabled: n,
+      showAll: a,
+      boundsMap: V,
+      isAnyActive: $
+    }),
+    [P, b, M, f, n, a, V, $]
+  );
+  return /* @__PURE__ */ C.jsx(et.Provider, { value: m, children: /* @__PURE__ */ C.jsx(xt.Provider, { value: L, children: /* @__PURE__ */ C.jsxs(
+    "div",
+    {
+      ref: z,
+      className: d,
+      style: {
+        position: "relative",
+        width: "100%",
+        overflow: "hidden",
+        cursor: $ && n ? "pointer" : "default",
+        ...u
+      },
+      ...E,
+      children: [
+        /* @__PURE__ */ C.jsx(
+          "img",
+          {
+            src: t,
+            alt: r,
+            draggable: !1,
+            style: {
+              display: "block",
+              width: "100%",
+              height: "auto",
+              userSelect: "none",
+              transition: f.transition,
+              ...$ && n ? f.mainImageHovered : {}
+            }
+          }
+        ),
+        /* @__PURE__ */ C.jsx(
+          "div",
+          {
+            style: {
+              pointerEvents: "none",
+              position: "absolute",
+              inset: 0,
+              transition: f.transition,
+              opacity: $ && n ? 1 : 0,
+              ...f.vignetteStyle
+            }
+          }
+        ),
+        s
+      ]
+    }
+  ) }) });
+}
+const ot = Gt;
+ot.Cutout = Bt;
+ot.BBoxCutout = Ft;
+ot.PolygonCutout = zt;
+ot.Overlay = Ut;
+export {
+  Ut as CutoutOverlay,
+  ot as CutoutViewer,
+  Ct as ImageHitTestStrategy,
+  jt as PolygonHitTestStrategy,
+  Tt as RectHitTestStrategy,
+  $t as createHitTestStrategy,
+  it as defineKeyframes,
+  Ot as elevateEffect,
+  Nt as glowEffect,
+  q as hoverEffects,
+  Yt as liftEffect,
+  Ht as shimmerEffect,
+  Dt as subtleEffect,
+  Vt as traceEffect,
+  qt as useCutout,
+  Mt as useCutoutHitTest
+};