@scaleflex/crop 2.0.1

package/dist/react/index-CktjrogS.js

@@ -0,0 +1,1468 @@
+import { forwardRef as Ot, useRef as tt, useImperativeHandle as At, useEffect as ot, createElement as Wt, useState as J, useCallback as B, useMemo as Rt } from "react";
+typeof customElements < "u" && import("./define-t4Z6KaLY.js");
+function Ct(t, r, i) {
+  if (i === void 0) return;
+  if (r in t) {
+    t[r] = i;
+    return;
+  }
+  const o = r.replace(/[A-Z]/g, (a) => "-" + a.toLowerCase());
+  i === null || i === !1 ? t.removeAttribute(o) : i === !0 ? t.setAttribute(o, "") : t.setAttribute(o, String(i));
+}
+const Vt = [
+  "variant",
+  "cropShape",
+  "theme",
+  "initialRotation",
+  "initialScale",
+  "initialCrop",
+  "minScale",
+  "maxScale",
+  "minCropSize",
+  "availableShapes",
+  "handleSize",
+  "handleColor",
+  "borderRadius",
+  "overlayColor",
+  "outputType",
+  "outputQuality",
+  "maxOutputWidth",
+  "maxOutputHeight",
+  "showGrid",
+  "showToolbar",
+  "showRotateSlider",
+  "showZoomSlider",
+  "showShapeSelector",
+  "showRotateButton",
+  "showFlipButton",
+  "toolbarPosition",
+  "showBleedMargin",
+  "bleedMarginSize",
+  "bleedMarginColor",
+  "enableAnimations",
+  "animationSpeed",
+  "keyboard",
+  "pinchZoom",
+  "wheelZoom",
+  "icons"
+], xe = Ot(function(r, i) {
+  const o = tt(null), a = tt(r);
+  return a.current = r, At(i, () => o.current, []), ot(() => {
+    const e = o.current;
+    if (!e) return;
+    const h = [
+      ["sfx-crop-ready", (s) => {
+        var n, l;
+        return (l = (n = a.current).onReady) == null ? void 0 : l.call(n, s.detail);
+      }],
+      ["sfx-crop-image-load", (s) => {
+        var n, l;
+        return (l = (n = a.current).onImageLoad) == null ? void 0 : l.call(n, s.detail);
+      }],
+      ["sfx-crop-change", (s) => {
+        var n, l;
+        return (l = (n = a.current).onChange) == null ? void 0 : l.call(n, s.detail);
+      }],
+      ["sfx-crop-crop-change", (s) => {
+        var n, l;
+        return (l = (n = a.current).onCropChange) == null ? void 0 : l.call(n, s.detail);
+      }],
+      ["sfx-crop-save", (s) => {
+        var n, l;
+        return (l = (n = a.current).onSave) == null ? void 0 : l.call(n, s.detail);
+      }],
+      ["sfx-crop-cancel", () => {
+        var s, n;
+        return (n = (s = a.current).onCancel) == null ? void 0 : n.call(s);
+      }],
+      ["sfx-crop-error", (s) => {
+        var n, l;
+        return (l = (n = a.current).onError) == null ? void 0 : l.call(n, s.detail);
+      }]
+    ];
+    for (const [s, n] of h) e.addEventListener(s, n);
+    return () => {
+      for (const [s, n] of h) e.removeEventListener(s, n);
+    };
+  }, []), ot(() => {
+    const e = o.current;
+    if (e) {
+      for (const h of Vt) Ct(e, h, r[h]);
+      Ct(e, "src", r.src);
+    }
+  }), Wt("sfx-crop", {
+    ref: o,
+    className: r.className,
+    style: r.style,
+    id: r.id
+  });
+});
+typeof customElements < "u" && import("./define-t4Z6KaLY.js");
+function Me() {
+  const t = tt(null), [r, i] = J(!1);
+  ot(() => {
+    const u = t.current;
+    if (!u) return;
+    const m = () => i(!0);
+    return u.addEventListener("sfx-crop-ready", m), () => {
+      u.removeEventListener("sfx-crop-ready", m), i(!1);
+    };
+  }, []);
+  const o = B((u) => t.current ? t.current.loadImage(u) : Promise.resolve(), []), a = B(() => {
+    var u;
+    return (u = t.current) == null ? void 0 : u.rotateLeft();
+  }, []), e = B(() => {
+    var u;
+    return (u = t.current) == null ? void 0 : u.flipHorizontal();
+  }, []), h = B((u) => {
+    var m;
+    return (m = t.current) == null ? void 0 : m.setRotation(u);
+  }, []), s = B((u) => {
+    var m;
+    return (m = t.current) == null ? void 0 : m.setScale(u);
+  }, []), n = B((u) => {
+    var m;
+    return (m = t.current) == null ? void 0 : m.setCropShape(u);
+  }, []), l = B((u) => {
+    var m;
+    return (m = t.current) == null ? void 0 : m.setCropRect(u);
+  }, []), d = B(() => {
+    var u;
+    return ((u = t.current) == null ? void 0 : u.getCropRect()) ?? null;
+  }, []), g = B(() => {
+    var u;
+    return ((u = t.current) == null ? void 0 : u.getTransformState()) ?? null;
+  }, []), w = B(() => {
+    var u;
+    return (u = t.current) == null ? void 0 : u.reset();
+  }, []), y = B(() => {
+    var u;
+    return ((u = t.current) == null ? void 0 : u.toCanvas()) ?? null;
+  }, []), c = B(async (u, m) => t.current ? t.current.toBlob(u, m) : null, []), p = B((u, m) => {
+    var H;
+    return ((H = t.current) == null ? void 0 : H.toDataURL(u, m)) ?? null;
+  }, []), S = B(() => {
+    var u;
+    return ((u = t.current) == null ? void 0 : u.toTransformParams()) ?? null;
+  }, []), x = B((u, m) => t.current ? t.current.save(u, m) : Promise.resolve(), []), C = B(() => {
+    var u;
+    return (u = t.current) == null ? void 0 : u.cancel();
+  }, []);
+  return {
+    ref: t,
+    ready: r,
+    loadImage: o,
+    rotateLeft: a,
+    flipHorizontal: e,
+    setRotation: h,
+    setScale: s,
+    setCropShape: n,
+    setCropRect: l,
+    getCropRect: d,
+    getTransformState: g,
+    reset: w,
+    toCanvas: y,
+    toBlob: c,
+    toDataURL: p,
+    toTransformParams: S,
+    save: x,
+    cancel: C
+  };
+}
+const zt = {
+  src: "",
+  variant: "classic",
+  cropShape: "16:9",
+  initialCrop: null,
+  initialRotation: 0,
+  initialScale: 1,
+  customAspectRatios: [],
+  minCropSize: 20,
+  availableShapes: [
+    "free",
+    "square",
+    "16:9",
+    "4:3",
+    "3:2",
+    "5:4",
+    "2:1",
+    "9:16",
+    "3:4",
+    "2:3",
+    "4:5",
+    "1:2"
+  ],
+  minScale: 0.5,
+  maxScale: 5,
+  theme: "light",
+  showGrid: "interaction",
+  showRotateSlider: !0,
+  showZoomSlider: !0,
+  showShapeSelector: !0,
+  showRotateButton: !0,
+  showFlipButton: !0,
+  toolbarPosition: "top",
+  showToolbar: !0,
+  overlayColor: "rgba(0, 0, 0, 0.55)",
+  handleSize: 12,
+  handleColor: "#ffffff",
+  borderRadius: 20,
+  outputType: "image/png",
+  outputQuality: 0.92,
+  maxOutputWidth: 0,
+  maxOutputHeight: 0,
+  showBleedMargin: !1,
+  bleedMarginSize: 10,
+  bleedMarginColor: "rgba(255, 0, 0, 0.5)",
+  enableAnimations: !0,
+  animationSpeed: 1,
+  keyboard: !0,
+  pinchZoom: !0,
+  wheelZoom: !0
+};
+function Ht(t) {
+  return { ...zt, ...t };
+}
+function I(t, r, i) {
+  return Math.min(Math.max(t, r), i);
+}
+function U(t, r, i) {
+  return t + (r - t) * i;
+}
+function st(t) {
+  return t * Math.PI / 180;
+}
+function Bt(t, r, i, o) {
+  const a = i - t, e = o - r;
+  return Math.sqrt(a * a + e * e);
+}
+function Kt(t) {
+  const r = /^(\d+(?:\.\d+)?):(\d+(?:\.\d+)?)$/.exec(t.trim());
+  if (!r) return null;
+  const i = Number(r[1]), o = Number(r[2]);
+  return !Number.isFinite(i) || !Number.isFinite(o) || i <= 0 || o <= 0 ? null : i / o;
+}
+function gt(t) {
+  switch (t) {
+    case "free":
+      return null;
+    case "rounded-rect":
+      return null;
+    case "square":
+    case "circle":
+      return 1;
+    // Everything else — `"16:9"`, `"4:3"`, `"7:2"`, `"2.35:1"` — goes
+    // through `parseRatio`. The switch intentionally doesn't enumerate
+    // the named ratios so the library stays a parser, not a catalog.
+    default:
+      return Kt(t);
+  }
+}
+function Nt(t, r, i, o, a, e) {
+  if (r === null)
+    return Zt(t, e, o, a);
+  const h = o / a, s = r / h;
+  let { x: n, y: l, width: d, height: g } = t;
+  const w = i.includes("e") || i.includes("w"), y = i.includes("n") || i.includes("s");
+  w && !y ? g = d / s : y && !w ? d = g * s : g = d / s;
+  const c = t.x + t.width, p = t.y + t.height, S = t.x + t.width / 2, x = t.y + t.height / 2;
+  let C;
+  i.includes("w") ? C = c : i.includes("e") ? C = 1 - t.x : C = 2 * Math.min(S, 1 - S);
+  let u;
+  i.includes("n") ? u = p : i.includes("s") ? u = 1 - t.y : u = 2 * Math.min(x, 1 - x);
+  const m = Math.min(1, C / d, u / g);
+  m < 1 && (d *= m, g *= m);
+  const H = e / o, V = e / a;
+  return d < H && (d = H, g = d / s), g < V && (g = V, d = g * s), i.includes("w") ? n = c - d : i.includes("e") ? n = t.x : n = S - d / 2, i.includes("n") ? l = p - g : i.includes("s") ? l = t.y : l = x - g / 2, n = I(n, 0, 1 - d), l = I(l, 0, 1 - g), { x: n, y: l, width: d, height: g };
+}
+function Zt(t, r, i, o) {
+  const a = r / i, e = r / o;
+  return {
+    ...t,
+    width: Math.max(t.width, a),
+    height: Math.max(t.height, e)
+  };
+}
+function _t(t, r, i, o, a, e, h) {
+  const s = t.rotation * Math.PI / 180, n = Math.abs(Math.cos(s)), l = Math.abs(Math.sin(s)), d = o.width * n + o.height * l, g = o.width * l + o.height * n, w = Math.max(d / a, g / e), y = Math.min(w, h), c = I(t.scale, y, h), p = r / 2 - (o.x + o.width / 2), S = i / 2 - (o.y + o.height / 2), x = Math.max(0, (a * c - d) / 2), C = Math.max(0, (e * c - g) / 2);
+  return {
+    scale: c,
+    panX: I(t.panX, (-x - p) / c, (x - p) / c),
+    panY: I(t.panY, (-C - S) / c, (C - S) / c),
+    minScale: y
+  };
+}
+const N = 0.8;
+function bt(t, r, i) {
+  return !r || !i ? t : t / (r / i);
+}
+function xt(t = "free", r = 1, i = 1) {
+  const o = gt(t);
+  let a;
+  if (o !== null) {
+    const e = bt(o, r, i);
+    let h, s;
+    e >= 1 ? (h = N, s = h / e, s > N && (s = N, h = s * e)) : (s = N, h = s * e, h > N && (h = N, s = h / e)), a = {
+      x: (1 - h) / 2,
+      y: (1 - s) / 2,
+      width: h,
+      height: s
+    };
+  } else {
+    const e = N;
+    a = { x: (1 - e) / 2, y: (1 - e) / 2, width: e, height: e };
+  }
+  return {
+    quarterTurns: 0,
+    rotation: 0,
+    flipH: !1,
+    flipV: !1,
+    scale: 1,
+    panX: 0,
+    panY: 0,
+    cropRect: a
+  };
+}
+function Ut(t) {
+  const r = t.quarterTurns - 90;
+  return {
+    ...t,
+    quarterTurns: r,
+    panX: 0,
+    panY: 0
+  };
+}
+function $t(t) {
+  return { ...t, flipH: !t.flipH };
+}
+function ht(t, r) {
+  const i = I(r, -45, 45);
+  let o = t.rotationPivot;
+  if (i === 0)
+    o = void 0;
+  else if (!o) {
+    const a = t.cropRect;
+    o = { x: a.x + a.width / 2, y: a.y + a.height / 2 };
+  }
+  return { ...t, rotation: i, rotationPivot: o };
+}
+function nt(t, r, i, o) {
+  return {
+    ...t,
+    scale: I(r, i, o)
+  };
+}
+function k(t, r) {
+  return {
+    ...t,
+    cropRect: {
+      x: I(r.x, 0, 1 - r.width),
+      y: I(r.y, 0, 1 - r.height),
+      width: I(r.width, 0, 1),
+      height: I(r.height, 0, 1)
+    }
+  };
+}
+function dt(t, r, i = 1, o = 1) {
+  const a = gt(r);
+  let e;
+  if (a === null)
+    e = { ...t.cropRect };
+  else {
+    const h = bt(a, i, o), { cropRect: s } = t, n = s.x + s.width / 2, l = s.y + s.height / 2;
+    let d, g;
+    h >= 1 ? (d = N, g = d / h, g > N && (g = N, d = g * h)) : (g = N, d = g * h, d > N && (d = N, g = d / h)), e = {
+      x: I(n - d / 2, 0, 1 - d),
+      y: I(l - g / 2, 0, 1 - g),
+      width: d,
+      height: g
+    };
+  }
+  return {
+    ...t,
+    cropRect: e
+  };
+}
+function Mt(t, r, i) {
+  return {
+    ...t,
+    panX: t.panX + r,
+    panY: t.panY + i
+  };
+}
+function ct(t, r, i, o, a) {
+  const e = Math.round(a / 90) % 2 !== 0, h = e ? r : t, s = e ? t : r, n = Math.max(h / i, s / o);
+  return { drawW: i * n, drawH: o * n };
+}
+function Gt(t, r, i, o, a = !1) {
+  const { x: e, y: h, w: s, h: n } = i, l = e + s / 2, d = h + n / 2;
+  t.save();
+  const g = e + (o.cropRect.x + o.cropRect.width / 2) * s, w = h + (o.cropRect.y + o.cropRect.height / 2) * n, y = o.rotationPivot ?? {
+    x: o.cropRect.x + o.cropRect.width / 2,
+    y: o.cropRect.y + o.cropRect.height / 2
+  }, c = e + y.x * s, p = h + y.y * n;
+  o.rotation !== 0 && (t.translate(c, p), t.rotate(st(o.rotation)), t.translate(-c, -p)), (o.flipH !== 1 || o.flipV !== 1) && (t.translate(g, w), t.scale(o.flipH, o.flipV), t.translate(-g, -w)), t.translate(l, d), t.scale(o.scale, o.scale), t.translate(o.panX, o.panY), o.quarterTurns !== 0 && t.rotate(st(o.quarterTurns));
+  let S, x;
+  if (a) {
+    const C = ct(s, n, r.naturalWidth, r.naturalHeight, o.quarterTurns);
+    S = C.drawW, x = C.drawH;
+  } else {
+    const u = Math.round(o.quarterTurns / 90) % 2 !== 0 ? Math.min(s, n) / Math.max(s, n) : 1;
+    S = s * u, x = n * u;
+  }
+  t.drawImage(r, -S / 2, -x / 2, S, x), t.restore();
+}
+let G = null;
+function Qt(t, r) {
+  G || (G = document.createElement("canvas")), (G.width !== t || G.height !== r) && (G.width = t, G.height = r);
+  const i = G.getContext("2d");
+  return i.clearRect(0, 0, t, r), i;
+}
+function jt(t, r, i, o, a = "rect", e = 20, h = "rgba(0, 0, 0, 0.55)") {
+  const s = Qt(r, i);
+  if (s.fillStyle = h, s.fillRect(0, 0, r, i), s.globalCompositeOperation = "destination-out", s.fillStyle = "rgba(0, 0, 0, 1)", a === "circle") {
+    const n = o.x + o.width / 2, l = o.y + o.height / 2, d = o.width / 2, g = o.height / 2;
+    s.beginPath(), s.ellipse(n, l, d, g, 0, 0, Math.PI * 2), s.fill();
+  } else if (a === "rounded-rect") {
+    const { x: n, y: l, width: d, height: g } = o, w = Math.min(e, d / 2, g / 2);
+    s.beginPath(), s.moveTo(n + w, l), s.lineTo(n + d - w, l), s.arcTo(n + d, l, n + d, l + w, w), s.lineTo(n + d, l + g - w), s.arcTo(n + d, l + g, n + d - w, l + g, w), s.lineTo(n + w, l + g), s.arcTo(n, l + g, n, l + g - w, w), s.lineTo(n, l + w), s.arcTo(n, l, n + w, l, w), s.closePath(), s.fill();
+  } else
+    s.fillRect(o.x, o.y, o.width, o.height);
+  s.globalCompositeOperation = "source-over", t.drawImage(G, 0, 0);
+}
+const kt = 12, Jt = 22, lt = 11, at = 9, te = {
+  frame: "#ffffff",
+  frameShadow: "rgba(0, 0, 0, 0.3)",
+  handleFill: "#ffffff",
+  handleStroke: "rgba(0, 0, 0, 0.25)"
+};
+function ee(t, r, i = "rect", o = 20, a = te, e = !0) {
+  const h = i === "circle", s = i === "rounded-rect", { x: n, y: l, width: d, height: g } = r;
+  if (t.save(), t.strokeStyle = a.frameShadow, t.lineWidth = 1, h) {
+    const S = n + d / 2, x = l + g / 2, C = d / 2 - 1, u = g / 2 - 1;
+    t.beginPath(), t.ellipse(S, x, C, u, 0, 0, Math.PI * 2), t.stroke();
+  } else s ? (Tt(t, n + 1, l + 1, d - 2, g - 2, Math.min(o, d / 2, g / 2)), t.stroke()) : t.strokeRect(n + 1, l + 1, d - 2, g - 2);
+  if (t.strokeStyle = a.frame, t.lineWidth = 2, h) {
+    const S = n + d / 2, x = l + g / 2, C = d / 2, u = g / 2;
+    t.beginPath(), t.ellipse(S, x, C, u, 0, 0, Math.PI * 2), t.stroke(), t.setLineDash([4, 4]), t.strokeStyle = a.frameShadow, t.lineWidth = 1, t.beginPath(), t.ellipse(S, x, C - 1, u - 1, 0, 0, Math.PI * 2), t.stroke(), t.setLineDash([]);
+  } else if (s) {
+    const S = Math.min(o, d / 2, g / 2);
+    Tt(t, n, l, d, g, S), t.stroke();
+  } else
+    t.strokeRect(n, l, d, g);
+  if (!e) {
+    t.restore();
+    return;
+  }
+  t.fillStyle = a.handleFill, t.strokeStyle = a.handleStroke, t.lineWidth = 1;
+  const w = Math.min(kt / 2, d / 6, g / 6), y = [
+    { cx: n, cy: l },
+    { cx: n + d, cy: l },
+    { cx: n + d, cy: l + g },
+    { cx: n, cy: l + g }
+  ];
+  for (const S of y)
+    t.beginPath(), t.arc(S.cx, S.cy, w, 0, Math.PI * 2), t.fill(), t.stroke();
+  const c = n - lt, p = l - lt;
+  t.beginPath(), t.arc(c, p, w, 0, Math.PI * 2), t.fill(), t.stroke(), t.fillStyle = a.handleStroke, t.beginPath(), t.arc(c, p, Math.max(2, w * 0.35), 0, Math.PI * 2), t.fill(), t.restore();
+}
+function Tt(t, r, i, o, a, e) {
+  e = Math.min(e, o / 2, a / 2), t.beginPath(), t.moveTo(r + e, i), t.lineTo(r + o - e, i), t.arcTo(r + o, i, r + o, i + e, e), t.lineTo(r + o, i + a - e), t.arcTo(r + o, i + a, r + o - e, i + a, e), t.lineTo(r + e, i + a), t.arcTo(r, i + a, r, i + a - e, e), t.lineTo(r, i + e), t.arcTo(r, i, r + e, i, e), t.closePath();
+}
+function ne(t) {
+  const { x: r, y: i, width: o, height: a } = t, e = Jt;
+  return [
+    // Move-handle (NW diagonal) — checked first so it wins over the NW
+    // corner's hit area where they overlap.
+    {
+      target: "move-handle",
+      rect: {
+        x: r - lt - at,
+        y: i - lt - at,
+        w: at * 2,
+        h: at * 2
+      }
+    },
+    // Corner handles (highest priority — checked first)
+    { target: "handle-nw", rect: { x: r - e, y: i - e, w: e * 2, h: e * 2 } },
+    { target: "handle-ne", rect: { x: r + o - e, y: i - e, w: e * 2, h: e * 2 } },
+    { target: "handle-se", rect: { x: r + o - e, y: i + a - e, w: e * 2, h: e * 2 } },
+    { target: "handle-sw", rect: { x: r - e, y: i + a - e, w: e * 2, h: e * 2 } },
+    // Edge hit zones (no visual handle, but cursor + resize still work)
+    { target: "handle-n", rect: { x: r + e, y: i - e, w: o - e * 2, h: e * 2 } },
+    { target: "handle-s", rect: { x: r + e, y: i + a - e, w: o - e * 2, h: e * 2 } },
+    { target: "handle-e", rect: { x: r + o - e, y: i + e, w: e * 2, h: a - e * 2 } },
+    { target: "handle-w", rect: { x: r - e, y: i + e, w: e * 2, h: a - e * 2 } }
+  ];
+}
+function re(t, r, i) {
+  const { x: o, y: a, width: e, height: h } = r;
+  t.save(), t.strokeStyle = `rgba(255, 255, 255, ${0.35 * i})`, t.lineWidth = 0.5;
+  for (let s = 1; s <= 2; s++) {
+    const n = o + e * s / 3;
+    t.beginPath(), t.moveTo(n, a), t.lineTo(n, a + h), t.stroke();
+  }
+  for (let s = 1; s <= 2; s++) {
+    const n = a + h * s / 3;
+    t.beginPath(), t.moveTo(o, n), t.lineTo(o + e, n), t.stroke();
+  }
+  t.restore();
+}
+function oe(t, r, i, o) {
+  i * 2 >= r.width || i * 2 >= r.height || (t.save(), t.strokeStyle = o, t.lineWidth = 1, t.setLineDash([6, 4]), t.strokeRect(
+    r.x + i,
+    r.y + i,
+    r.width - i * 2,
+    r.height - i * 2
+  ), t.setLineDash([]), t.restore());
+}
+function ie(t, r, i, o = 20, a = !1, e) {
+  const h = t.getContext("2d");
+  if (!h) throw new Error("2D canvas context unavailable");
+  const s = h;
+  function n() {
+    if (e) return e;
+    if (t.parentElement) return t.parentElement;
+    let R = t.getRootNode();
+    for (; R && R !== document && R instanceof ShadowRoot; ) {
+      const P = R.host;
+      if (P instanceof HTMLElement) return P;
+      R = P.getRootNode();
+    }
+    return null;
+  }
+  let l = !0, d = null, g = !1, w = !1, y = 0;
+  const c = {
+    quarterTurns: 0,
+    rotation: 0,
+    flipH: 1,
+    flipV: 1,
+    scale: 1,
+    panX: 0,
+    panY: 0,
+    cropRect: { x: 0, y: 0, width: 1, height: 1 },
+    gridOpacity: 0,
+    interactive: !1
+  }, p = { ...c }, S = {
+    quarterTurns: 0,
+    flipH: 0,
+    flipV: 0
+  };
+  let x = { show: !1, size: 10, color: "rgba(255, 0, 0, 0.5)" }, C = 0, u = 0.5, m = 5, H = !1;
+  function V() {
+    if (g) return;
+    const R = n();
+    if (!R) return;
+    const P = window.devicePixelRatio, A = Math.min(Number.isFinite(P) && P > 0 ? P : 1, 2), F = R.getBoundingClientRect();
+    F.width <= 0 || F.height <= 0 || (t.width = Math.max(0, Math.floor(F.width * A)), t.height = Math.max(0, Math.floor(F.height * A)), t.style.width = `${F.width}px`, t.style.height = `${F.height}px`, s.setTransform(A, 0, 0, A, 0, 0), l = !0);
+  }
+  function z() {
+    const R = n();
+    return R ? { x: 0, y: 0, w: R.clientWidth, h: R.clientHeight } : { x: 0, y: 0, w: 0, h: 0 };
+  }
+  function E() {
+    const R = z(), P = c.cropRect;
+    return {
+      x: R.x + P.x * R.w,
+      y: R.y + P.y * R.h,
+      width: P.width * R.w,
+      height: P.height * R.h
+    };
+  }
+  function O(R, P) {
+    return 1 - Math.pow(1 - R, P * 60);
+  }
+  function _(R) {
+    if (a) {
+      c.quarterTurns = p.quarterTurns, c.rotation = p.rotation, c.flipH = p.flipH, c.flipV = p.flipV, c.scale = p.scale, c.panX = p.panX, c.panY = p.panY, c.cropRect = { ...p.cropRect }, c.gridOpacity = p.gridOpacity, c.interactive = p.interactive, l = !0;
+      return;
+    }
+    let P = !1;
+    if (Math.abs(c.quarterTurns - p.quarterTurns) > 0.01) {
+      const T = -180 * (c.quarterTurns - p.quarterTurns), W = -22 * S.quarterTurns;
+      S.quarterTurns += (T + W) * R, c.quarterTurns += S.quarterTurns * R, Math.abs(c.quarterTurns - p.quarterTurns) < 0.01 && Math.abs(S.quarterTurns) < 0.01 && (c.quarterTurns = p.quarterTurns, S.quarterTurns = 0), P = !0, l = !0;
+    }
+    if (Math.abs(c.flipH - p.flipH) > 0.01) {
+      const T = -400 * (c.flipH - p.flipH), W = -28 * S.flipH;
+      S.flipH += (T + W) * R, c.flipH += S.flipH * R, Math.abs(c.flipH - p.flipH) < 0.01 && Math.abs(S.flipH) < 0.01 && (c.flipH = p.flipH, S.flipH = 0), P = !0, l = !0;
+    }
+    if (Math.abs(c.flipV - p.flipV) > 0.01) {
+      const T = -400 * (c.flipV - p.flipV), W = -28 * S.flipV;
+      S.flipV += (T + W) * R, c.flipV += S.flipV * R, Math.abs(c.flipV - p.flipV) < 0.01 && Math.abs(S.flipV) < 0.01 && (c.flipV = p.flipV, S.flipV = 0), P = !0, l = !0;
+    }
+    const A = O(0.15, R), F = O(0.12, R), K = O(0.12, R);
+    if (Math.abs(c.rotation - p.rotation) > 0.01 && (c.rotation = U(c.rotation, p.rotation, A), P = !0, l = !0), Math.abs(c.scale - p.scale) > 1e-3 && (c.scale = U(c.scale, p.scale, A), P = !0, l = !0), !!p.interactive) {
+      (c.panX !== p.panX || c.panY !== p.panY) && (c.panX = p.panX, c.panY = p.panY, l = !0);
+      const b = p.cropRect, T = c.cropRect;
+      (T.x !== b.x || T.y !== b.y || T.width !== b.width || T.height !== b.height) && (c.cropRect = { ...b }, l = !0);
+    } else {
+      Math.abs(c.panX - p.panX) > 0.1 && (c.panX = U(c.panX, p.panX, A), P = !0, l = !0), Math.abs(c.panY - p.panY) > 0.1 && (c.panY = U(c.panY, p.panY, A), P = !0, l = !0);
+      const b = c.cropRect, T = p.cropRect;
+      (Math.abs(b.x - T.x) > 1e-4 || Math.abs(b.y - T.y) > 1e-4 || Math.abs(b.width - T.width) > 1e-4 || Math.abs(b.height - T.height) > 1e-4) && (c.cropRect = {
+        x: U(b.x, T.x, F),
+        y: U(b.y, T.y, F),
+        width: U(b.width, T.width, F),
+        height: U(b.height, T.height, F)
+      }, P = !0, l = !0);
+    }
+    if (Math.abs(c.gridOpacity - p.gridOpacity) > 0.01 && (c.gridOpacity = U(c.gridOpacity, p.gridOpacity, K), P = !0, l = !0), c.scale < u) {
+      const T = -400 * (c.scale - u), W = -28 * C;
+      C += (T + W) * R, c.scale += C * R, Math.abs(c.scale - u) < 1e-3 && Math.abs(C) < 1e-3 && (c.scale = u, C = 0), P = !0, l = !0;
+    } else if (c.scale > m) {
+      const T = -400 * (c.scale - m), W = -28 * C;
+      C += (T + W) * R, c.scale += C * R, Math.abs(c.scale - m) < 1e-3 && Math.abs(C) < 1e-3 && (c.scale = m, C = 0), P = !0, l = !0;
+    }
+    P || (c.rotation = p.rotation, c.scale = p.scale, c.panX = p.panX, c.panY = p.panY, c.cropRect = { ...p.cropRect }, c.gridOpacity = p.gridOpacity, c.interactive = p.interactive);
+  }
+  function $(R) {
+    if (g || !w) {
+      d = null;
+      return;
+    }
+    const P = typeof R == "number" ? R : performance.now(), A = y === 0 ? 1 / 60 : Math.min(0.25, Math.max(0, (P - y) / 1e3));
+    if (y = P, d = requestAnimationFrame($), _(A), !l) return;
+    const F = n();
+    if (!F) return;
+    const K = F.clientWidth, D = F.clientHeight;
+    if (K === 0 || D === 0) return;
+    l = !1, s.clearRect(0, 0, K, D);
+    const b = z();
+    Gt(s, r, b, c, H);
+    const T = E(), W = i(), ut = n() ?? t, Q = (j, it) => getComputedStyle(ut).getPropertyValue(j).trim() || it;
+    if (!(H && W === "rect")) {
+      const j = Q("--sfx-cr-overlay-color", "rgba(0, 0, 0, 0.55)");
+      jt(s, K, D, T, W, o, j);
+    }
+    H && W === "rect" || ee(s, T, W, o, {
+      frame: Q("--sfx-cr-frame-color", "#ffffff"),
+      frameShadow: Q("--sfx-cr-frame-shadow", "rgba(0, 0, 0, 0.3)"),
+      handleFill: Q("--sfx-cr-handle-fill", "#ffffff"),
+      handleStroke: Q("--sfx-cr-handle-stroke", "rgba(0, 0, 0, 0.25)")
+    }, !H), x.show && oe(s, T, x.size, x.color), c.gridOpacity > 0.01 && re(s, T, c.gridOpacity);
+  }
+  return V(), {
+    markDirty() {
+      l = !0;
+    },
+    startLoop() {
+      w || g || (w = !0, y = 0, $());
+    },
+    stopLoop() {
+      w = !1, d !== null && (cancelAnimationFrame(d), d = null);
+    },
+    setDisplayState(R) {
+      Object.assign(p, R), c.rotationPivot = R.rotationPivot, l = !0;
+    },
+    getDisplayState() {
+      return { ...c };
+    },
+    getCanvasCropRect: E,
+    setScaleBounds(R, P) {
+      u = R, m = P;
+    },
+    setBleedConfig(R) {
+      x = R, l = !0;
+    },
+    setFixedFrame(R) {
+      H = R, l = !0;
+    },
+    resize: V,
+    destroy() {
+      g = !0, w = !1, d !== null && (cancelAnimationFrame(d), d = null);
+    }
+  };
+}
+const ae = [
+  "nw",
+  "ne",
+  "sw",
+  "se",
+  "n",
+  "s",
+  "e",
+  "w"
+];
+function se(t) {
+  return ae.includes(t) ? t : null;
+}
+function ce(t, r, i) {
+  return t >= i.x && t <= i.x + i.w && r >= i.y && r <= i.y + i.h;
+}
+function pt(t, r, i) {
+  const o = ne(i);
+  for (const { target: a, rect: e } of o)
+    if (ce(t, r, e)) {
+      if (a === "move-handle") return { type: "move-handle" };
+      const h = se(a.replace("handle-", ""));
+      if (h) return { type: "handle", position: h };
+    }
+  return t >= i.x && t <= i.x + i.width && r >= i.y && r <= i.y + i.height ? { type: "crop-area" } : { type: "outside" };
+}
+function Pt(t, r) {
+  if (t.type === "move-handle") return "move";
+  switch (t.type) {
+    case "crop-area":
+      return "move";
+    case "outside":
+      return "crosshair";
+    case "handle":
+      switch (t.position) {
+        case "nw":
+        case "se":
+          return "nwse-resize";
+        case "ne":
+        case "sw":
+          return "nesw-resize";
+        case "n":
+        case "s":
+          return "ns-resize";
+        case "e":
+        case "w":
+          return "ew-resize";
+        default:
+          return "default";
+      }
+    default:
+      return "default";
+  }
+}
+function le(t, r) {
+  const i = /* @__PURE__ */ new Map();
+  let o = 0, a = !1;
+  function e(y) {
+    return y === "touch" || y === "pen" ? y : "mouse";
+  }
+  function h(y) {
+    const c = t.getBoundingClientRect();
+    return {
+      x: y.clientX - c.left,
+      y: y.clientY - c.top
+    };
+  }
+  function s() {
+    return [...i.values()];
+  }
+  function n(y) {
+    if (y.pointerType === "mouse" && y.button !== 0) return;
+    try {
+      t.setPointerCapture(y.pointerId);
+    } catch {
+    }
+    const c = h(y), p = {
+      id: y.pointerId,
+      x: c.x,
+      y: c.y,
+      startX: c.x,
+      startY: c.y,
+      pressure: y.pressure,
+      pointerType: e(y.pointerType),
+      shiftKey: y.shiftKey,
+      altKey: y.altKey
+    };
+    i.set(y.pointerId, p), r.onPointerDown(p, s());
+  }
+  function l(y) {
+    const c = i.get(y.pointerId);
+    if (!c) {
+      if (r.onHover) {
+        const x = h(y);
+        r.onHover({
+          id: y.pointerId,
+          x: x.x,
+          y: x.y,
+          startX: x.x,
+          startY: x.y,
+          pressure: 0,
+          pointerType: e(y.pointerType),
+          shiftKey: y.shiftKey,
+          altKey: y.altKey
+        });
+      }
+      return;
+    }
+    const p = h(y);
+    c.x = p.x, c.y = p.y, c.pressure = y.pressure, c.shiftKey = y.shiftKey, c.altKey = y.altKey;
+    const S = s();
+    if (r.onPointerMove(c, S), S.length === 2 && r.onPinch) {
+      const [x, C] = S, u = Math.sqrt((C.x - x.x) ** 2 + (C.y - x.y) ** 2);
+      !a && u > 10 && (o = u, a = !0), a && r.onPinch({
+        centerX: (x.x + C.x) / 2,
+        centerY: (x.y + C.y) / 2,
+        scale: u / o,
+        distance: u
+      });
+    }
+  }
+  function d(y) {
+    const c = i.get(y.pointerId);
+    if (c) {
+      i.delete(y.pointerId);
+      try {
+        t.releasePointerCapture(y.pointerId);
+      } catch {
+      }
+      s().length < 2 && (a = !1, o = 0), r.onPointerUp(c, s());
+    }
+  }
+  function g(y) {
+    r.onWheel && r.onWheel(y);
+  }
+  t.addEventListener("pointerdown", n), t.addEventListener("pointermove", l), t.addEventListener("pointerup", d), t.addEventListener("pointercancel", d), t.addEventListener("wheel", g, { passive: !1 });
+  const w = (y) => y.preventDefault();
+  return t.addEventListener("contextmenu", w), t.style.touchAction = "none", {
+    destroy() {
+      t.removeEventListener("pointerdown", n), t.removeEventListener("pointermove", l), t.removeEventListener("pointerup", d), t.removeEventListener("pointercancel", d), t.removeEventListener("wheel", g), t.removeEventListener("contextmenu", w), t.style.touchAction = "", i.clear();
+    }
+  };
+}
+function ue(t, r, i, o, a) {
+  const e = (r - t.startX) / o, h = (i - t.startY) / a, { startCrop: s } = t;
+  return {
+    x: I(s.x - e, 0, 1 - s.width),
+    y: I(s.y - h, 0, 1 - s.height),
+    width: s.width,
+    height: s.height
+  };
+}
+function fe(t, r, i, o) {
+  return {
+    handle: t.startsWith("handle-") ? t.slice(7) : t,
+    startCrop: { ...r },
+    startX: i,
+    startY: o
+  };
+}
+function he(t, r, i, o, a, e, h, s = { shiftKey: !1, altKey: !1 }) {
+  const n = (r - t.startX) / o, l = (i - t.startY) / a, { startCrop: d, handle: g } = t;
+  let w = d.x, y = d.y, c = d.width, p = d.height;
+  const S = h / o, x = h / a;
+  if (g.includes("w")) {
+    const m = I(w + n, 0, w + c - S);
+    c = c - (m - w), w = m;
+  }
+  if (g.includes("e") && (c = I(c + n, S, 1 - w)), g.includes("n")) {
+    const m = I(y + l, 0, y + p - x);
+    p = p - (m - y), y = m;
+  }
+  if (g.includes("s") && (p = I(p + l, x, 1 - y)), c = Math.max(c, S), p = Math.max(p, x), s.altKey) {
+    const m = d.x + d.width / 2, H = d.y + d.height / 2, V = c / 2, z = p / 2;
+    w = I(m - V, 0, 1 - c), y = I(H - z, 0, 1 - p);
+  }
+  let C = { x: w, y, width: c, height: p }, u = gt(e);
+  return s.shiftKey && e === "free" && (u = d.width / d.height), u !== null && (C = Nt(C, u, g, o, a, h)), C;
+}
+function de(t, r) {
+  if (t.length < 2) return null;
+  const [i, o] = t, a = Bt(i.x, i.y, o.x, o.y);
+  return a < 10 ? null : {
+    initialDistance: a,
+    initialScale: r,
+    initialCenterX: (i.x + o.x) / 2,
+    initialCenterY: (i.y + o.y) / 2
+  };
+}
+function pe(t, r, i, o, a, e, h) {
+  const s = 1 - t * i.sensitivity * 1e-3, n = I(r * s, i.minScale, i.maxScale);
+  let l = 0, d = 0;
+  if (o !== void 0 && e !== void 0) {
+    const g = 1 - n / r;
+    l = (o - e) * g, d = (a - h) * g;
+  }
+  return { scale: n, panDeltaX: l, panDeltaY: d };
+}
+function ye(t, r) {
+  function i(o) {
+    if (!((typeof o.composedPath == "function" ? o.composedPath() : []).includes(t) || t.contains(document.activeElement) || document.activeElement === t) || o.ctrlKey || o.metaKey || o.altKey) return;
+    const h = o.shiftKey ? 0.01 : 5e-3;
+    switch (o.key) {
+      case "ArrowLeft":
+        o.preventDefault(), r.onMoveCrop(-h, 0);
+        break;
+      case "ArrowRight":
+        o.preventDefault(), r.onMoveCrop(h, 0);
+        break;
+      case "ArrowUp":
+        o.preventDefault(), r.onMoveCrop(0, -h);
+        break;
+      case "ArrowDown":
+        o.preventDefault(), r.onMoveCrop(0, h);
+        break;
+      case "r":
+      case "R":
+        o.preventDefault(), r.onRotateLeft();
+        break;
+      case "f":
+      case "F":
+        o.preventDefault(), r.onFlipH();
+        break;
+      case "+":
+      case "=":
+        o.preventDefault(), r.onZoomIn();
+        break;
+      case "-":
+      case "_":
+        o.preventDefault(), r.onZoomOut();
+        break;
+      case "0":
+        o.preventDefault(), r.onResetZoom();
+        break;
+      case "[":
+        o.preventDefault(), r.onRotateFine(-1);
+        break;
+      case "]":
+        o.preventDefault(), r.onRotateFine(1);
+        break;
+    }
+  }
+  return t.addEventListener("keydown", i), {
+    destroy() {
+      t.removeEventListener("keydown", i);
+    }
+  };
+}
+function Te(t) {
+  t.setAttribute("role", "application"), t.setAttribute("aria-roledescription", "image crop tool"), t.setAttribute("aria-label", "Image crop tool — use arrow keys to move crop, R to rotate, F to flip horizontal, +/- to zoom"), t.setAttribute("tabindex", "0");
+}
+function yt(t, r, i = "free") {
+  let o = t.querySelector(".sfx-cr-sr-only[aria-live]");
+  o || (o = document.createElement("div"), o.className = "sfx-cr-sr-only", o.setAttribute("aria-live", "polite"), t.appendChild(o));
+  const a = r.quarterTurns + r.rotation, e = Math.round(r.scale * 100), h = i, s = r.flipH ? ", flipped horizontal" : "";
+  o.textContent = `Crop: ${h}, rotation ${a.toFixed(1)}°${s}, zoom ${e}%`;
+}
+function mt(t) {
+  const r = t.getContext("2d");
+  if (!r) throw new Error("2D canvas context unavailable");
+  return r;
+}
+function ge(t, r, i) {
+  const o = t.quarterTurns + t.rotation, a = Math.round(t.cropRect.width * r), e = Math.round(t.cropRect.height * i), h = Math.round(t.quarterTurns / 90) % 2 !== 0;
+  return {
+    rotation: o,
+    flipH: t.flipH,
+    flipV: t.flipV,
+    scale: t.scale,
+    crop: {
+      x: Math.round(t.cropRect.x * r),
+      y: Math.round(t.cropRect.y * i),
+      width: a,
+      height: e
+    },
+    outputWidth: h ? e : a,
+    outputHeight: h ? a : e
+  };
+}
+function me(t, r, i, o, a = "free", e = 20, h = 0, s = 0, n = "classic") {
+  const l = t.naturalWidth, d = t.naturalHeight, g = n === "fixed" && h > 0 && s > 0;
+  let w, y, c, p;
+  if (g) {
+    const F = ct(h, s, l, d, r.quarterTurns), K = Math.max(l / F.drawW, d / F.drawH);
+    w = Math.max(1, Math.round(h * K)), y = Math.max(1, Math.round(s * K));
+    const D = ct(w, y, l, d, r.quarterTurns);
+    c = D.drawW, p = D.drawH;
+  } else {
+    w = l, y = d;
+    const K = Math.round(r.quarterTurns / 90) % 2 !== 0 ? Math.min(w, y) / Math.max(w, y) : 1;
+    c = w * K, p = y * K;
+  }
+  const S = r.cropRect.x * w, x = r.cropRect.y * y, C = r.cropRect.width * w, u = r.cropRect.height * y;
+  let m = Math.max(1, Math.round(C)), H = Math.max(1, Math.round(u));
+  i > 0 && m > i && (H = Math.max(1, Math.round(H * (i / m))), m = i), o > 0 && H > o && (m = Math.max(1, Math.round(m * (o / H))), H = o);
+  const V = C > 1e-6 ? m / C : 1, z = document.createElement("canvas");
+  z.width = m, z.height = H;
+  const E = mt(z);
+  E.save(), E.scale(V, V), E.translate(-S, -x);
+  const O = (r.cropRect.x + r.cropRect.width / 2) * w, _ = (r.cropRect.y + r.cropRect.height / 2) * y, $ = r.rotationPivot ?? {
+    x: r.cropRect.x + r.cropRect.width / 2,
+    y: r.cropRect.y + r.cropRect.height / 2
+  }, R = $.x * w, P = $.y * y;
+  r.rotation !== 0 && (E.translate(R, P), E.rotate(st(r.rotation)), E.translate(-R, -P)), (r.flipH || r.flipV) && (E.translate(O, _), E.scale(r.flipH ? -1 : 1, r.flipV ? -1 : 1), E.translate(-O, -_)), E.translate(w / 2, y / 2), E.scale(r.scale, r.scale);
+  const A = h > 0 ? w / h : 1;
+  return E.translate(r.panX * A, r.panY * A), r.quarterTurns !== 0 && E.rotate(st(r.quarterTurns)), E.drawImage(t, -c / 2, -p / 2, c, p), E.restore(), a === "circle" ? ve(z) : a === "rounded-rect" && we(z, e), z;
+}
+function we(t, r) {
+  const i = mt(t), o = t.width, a = t.height, e = Math.min(r, o / 2, a / 2);
+  i.globalCompositeOperation = "destination-in", i.beginPath(), i.moveTo(e, 0), i.lineTo(o - e, 0), i.arcTo(o, 0, o, e, e), i.lineTo(o, a - e), i.arcTo(o, a, o - e, a, e), i.lineTo(e, a), i.arcTo(0, a, 0, a - e, e), i.lineTo(0, e), i.arcTo(0, 0, e, 0, e), i.closePath(), i.fill(), i.globalCompositeOperation = "source-over";
+}
+function ve(t) {
+  const r = mt(t), i = t.width, o = t.height;
+  r.globalCompositeOperation = "destination-in", r.beginPath(), r.ellipse(i / 2, o / 2, i / 2, o / 2, 0, 0, Math.PI * 2), r.fill(), r.globalCompositeOperation = "source-over";
+}
+async function Se(t, r, i) {
+  return new Promise((o, a) => {
+    let e = !1;
+    try {
+      t.toBlob(
+        (h) => {
+          e || (e = !0, h ? o(h) : a(new Error("Failed to create blob (canvas may be empty or tainted)")));
+        },
+        r,
+        i
+      );
+    } catch (h) {
+      e || (e = !0, a(h instanceof Error ? h : new Error(String(h))));
+    }
+  });
+}
+function Re(t) {
+  const { canvas: r, host: i, layoutContainer: o, callbacks: a = {} } = t;
+  let e = { ...t.config }, h = e.cropShape, s = null, n = xt(e.cropShape), l = null, d = null, g = null, w = null, y = null, c = !1, p = !1, S = 0, x = null, C = null, u = null, m = null, H = null, V = 0, z = 0, E = 0;
+  e.initialCrop && (n = k(n, e.initialCrop)), e.initialRotation && (n = ht(n, e.initialRotation)), e.initialScale && e.initialScale !== 1 && (n = nt(n, e.initialScale, e.minScale, e.maxScale));
+  function O() {
+    return h === "circle" ? "circle" : h === "rounded-rect" ? "rounded-rect" : "rect";
+  }
+  function _() {
+    return { ...n, cropRect: { ...n.cropRect } };
+  }
+  function $() {
+    if (!s) return { ...n.cropRect };
+    const f = s.naturalWidth, v = s.naturalHeight;
+    return {
+      x: Math.round(n.cropRect.x * f),
+      y: Math.round(n.cropRect.y * v),
+      width: Math.round(n.cropRect.width * f),
+      height: Math.round(n.cropRect.height * v)
+    };
+  }
+  const R = { x: 0, y: 0, width: 1, height: 1 };
+  let P = 0, A = 0;
+  function F() {
+    const f = o.clientWidth, v = o.clientHeight;
+    return f > 0 && v > 0 && (P = f, A = v), { w: f > 0 ? f : P, h: v > 0 ? v : A };
+  }
+  function K() {
+    if (!s || !l) return;
+    const { w: f, h: v } = F();
+    if (f <= 0 || v <= 0) return;
+    let M, L, Y;
+    if (e.variant === "fixed") {
+      M = { x: 0, y: 0, width: f, height: v };
+      const X = ct(f, v, s.naturalWidth, s.naturalHeight, n.quarterTurns);
+      L = X.drawW, Y = X.drawH;
+    } else {
+      if (Math.round(n.quarterTurns / 90) % 2 !== 0) {
+        l.setScaleBounds(e.minScale, e.maxScale);
+        return;
+      }
+      const X = n.cropRect;
+      M = { x: X.x * f, y: X.y * v, width: X.width * f, height: X.height * v }, L = f, Y = v;
+    }
+    const q = _t(n, f, v, M, L, Y, e.maxScale);
+    n = { ...n, scale: q.scale, panX: q.panX, panY: q.panY }, l.setScaleBounds(q.minScale, e.maxScale);
+  }
+  function D() {
+    if (!l) return;
+    K();
+    const f = {
+      quarterTurns: n.quarterTurns,
+      rotation: n.rotation,
+      flipH: n.flipH ? -1 : 1,
+      flipV: n.flipV ? -1 : 1,
+      scale: n.scale,
+      panX: n.panX,
+      panY: n.panY,
+      cropRect: { ...n.cropRect },
+      rotationPivot: n.rotationPivot,
+      gridOpacity: p || e.showGrid === !0 ? 1 : 0,
+      interactive: p
+    };
+    l.setDisplayState(f);
+  }
+  function b() {
+    var f;
+    (f = a.onChange) == null || f.call(a, _());
+  }
+  function T() {
+    var f;
+    (f = a.onCropChange) == null || f.call(a, $());
+  }
+  w = new ResizeObserver(() => {
+    c || (y && clearTimeout(y), y = setTimeout(() => {
+      y = null, !c && (l == null || l.resize(), D(), l == null || l.markDirty());
+    }, 16));
+  }), w.observe(o);
+  async function W(f) {
+    var M, L, Y, q, X;
+    if (c) return;
+    const v = ++S;
+    (M = a.onLoadingChange) == null || M.call(a, !0, null);
+    try {
+      const Z = new Image();
+      if (Z.crossOrigin = "anonymous", await new Promise((et, qt) => {
+        Z.onload = () => et(), Z.onerror = () => qt(new Error(`Failed to load image: ${f}`)), Z.src = f;
+      }), c || v !== S) return;
+      s = Z, (L = a.onLoadingChange) == null || L.call(a, !1, null), (Y = a.onImageLoad) == null || Y.call(a, Z), ut();
+    } catch (Z) {
+      if (c || v !== S) return;
+      const et = Z.message;
+      (q = a.onLoadingChange) == null || q.call(a, !1, et), (X = a.onError) == null || X.call(a, Z);
+    }
+  }
+  function ut() {
+    var v, M;
+    if (!s) return;
+    e.variant === "fixed" ? n = { ...n, cropRect: { ...R } } : e.initialCrop || (n = dt(n, h, s.naturalWidth, s.naturalHeight));
+    const f = !e.enableAnimations || typeof window < "u" && ((v = window.matchMedia) == null ? void 0 : v.call(window, "(prefers-reduced-motion: reduce)").matches);
+    l = ie(
+      r,
+      s,
+      O,
+      e.borderRadius,
+      f,
+      // Pass the layout container explicitly: the canvas lives in its own
+      // shadow root and `canvas.parentElement` returns null there.
+      o
+    ), l.setScaleBounds(e.minScale, e.maxScale), l.setFixedFrame(e.variant === "fixed"), l.setBleedConfig({
+      show: e.showBleedMargin,
+      size: e.bleedMarginSize,
+      color: e.bleedMarginColor
+    }), D(), l.startLoop(), Q(), e.keyboard && (g = ye(i, {
+      onRotateLeft: () => wt(),
+      onFlipH: () => vt(),
+      onZoomIn: () => rt(n.scale + 0.1),
+      onZoomOut: () => rt(n.scale - 0.1),
+      onResetZoom: () => rt(1),
+      onMoveCrop: (L, Y) => {
+        if (e.variant === "fixed") return;
+        const q = n.cropRect;
+        n = k(n, { x: q.x + L, y: q.y + Y, width: q.width, height: q.height }), D(), b(), T();
+      },
+      onRotateFine: (L) => St(n.rotation + L)
+    })), (M = a.onReady) == null || M.call(a);
+  }
+  function Q() {
+    d = le(r, {
+      onPointerDown: (f, v) => {
+        const M = Date.now(), L = M - V, Y = Math.sqrt((f.x - z) ** 2 + (f.y - E) ** 2);
+        if (L < 300 && Y < 20 && v.length === 1) {
+          rt(1), V = 0;
+          return;
+        }
+        if (V = M, z = f.x, E = f.y, v.length === 2) {
+          H = de(v, n.scale), x = null, m = null;
+          return;
+        }
+        const q = l.getCanvasCropRect();
+        let X = pt(f.x, f.y, q);
+        e.variant === "fixed" && (X.type === "handle" || X.type === "move-handle") && (X = { type: "crop-area" }), p = !0, X.type === "move-handle" ? u = {
+          startX: f.x,
+          startY: f.y,
+          startRect: { ...n.cropRect }
+        } : X.type === "crop-area" ? C = { startX: f.x, startY: f.y, startPanX: n.panX, startPanY: n.panY } : X.type === "handle" && X.position && (m = fe("handle-" + X.position, n.cropRect, f.x, f.y)), D();
+      },
+      onPointerMove: (f) => {
+        if (!s) return;
+        const v = l.getCanvasCropRect();
+        if (u) {
+          const { displayW: M, displayH: L } = j();
+          if (M > 0 && L > 0) {
+            const Y = (f.x - u.startX) / M, q = (f.y - u.startY) / L;
+            n = k(n, {
+              x: u.startRect.x + Y,
+              y: u.startRect.y + q,
+              width: u.startRect.width,
+              height: u.startRect.height
+            }), D(), b(), T();
+          }
+          return;
+        }
+        if (C) {
+          const M = f.x - C.startX, L = f.y - C.startY, Y = n.flipH ? -1 : 1, q = n.flipV ? -1 : 1;
+          n = {
+            ...n,
+            panX: C.startPanX + Y * M / n.scale,
+            panY: C.startPanY + q * L / n.scale
+          }, D(), b();
+          return;
+        }
+        if (x) {
+          const { displayW: M, displayH: L } = j(), Y = ue(x, f.x, f.y, M, L);
+          n = k(n, Y), D(), b(), T();
+          return;
+        }
+        if (m) {
+          const { displayW: M, displayH: L } = j(), Y = he(
+            m,
+            f.x,
+            f.y,
+            M,
+            L,
+            h,
+            e.minCropSize,
+            { shiftKey: f.shiftKey, altKey: f.altKey }
+          );
+          n = k(n, Y), D(), b(), T();
+          return;
+        }
+        if (e.variant === "fixed")
+          r.style.cursor = "grab";
+        else {
+          const M = pt(f.x, f.y, v);
+          r.style.cursor = Pt(M);
+        }
+      },
+      onHover: (f) => {
+        if (!l) return;
+        if (e.variant === "fixed") {
+          r.style.cursor = "grab";
+          return;
+        }
+        const v = l.getCanvasCropRect(), M = pt(f.x, f.y, v);
+        r.style.cursor = Pt(M);
+      },
+      onPointerUp: (f, v) => {
+        v.length < 2 && (H = null), v.length === 0 && (x = null, C = null, u = null, m = null, p = !1, z = 0, E = 0, D());
+      },
+      onPinch: (f) => {
+        var Y;
+        H || (H = { initialDistance: f.distance, initialScale: n.scale, initialCenterX: f.centerX, initialCenterY: f.centerY });
+        const v = n.scale * (f.distance / H.initialDistance), M = f.centerX - H.initialCenterX, L = f.centerY - H.initialCenterY;
+        n = nt(n, v, e.minScale, e.maxScale), n = Mt(n, M, L), (Y = a.onScaleSync) == null || Y.call(a, n.scale), D(), b();
+      },
+      onWheel: (f) => {
+        var Z, et;
+        if (!e.wheelZoom) return;
+        f.preventDefault();
+        const v = r.getBoundingClientRect(), M = f.clientX - v.left, L = f.clientY - v.top, Y = v.width / 2, q = v.height / 2, X = pe(f.deltaY, n.scale, {
+          minScale: e.minScale,
+          maxScale: e.maxScale,
+          sensitivity: 1
+        }, M, L, Y, q);
+        n = nt(n, X.scale, e.minScale, e.maxScale), n = Mt(n, X.panDeltaX, X.panDeltaY), (Z = a.onScaleSync) == null || Z.call(a, n.scale), (et = a.onWheelZoomActivity) == null || et.call(a), D(), b();
+      }
+    });
+  }
+  function j() {
+    return { displayW: o.clientWidth, displayH: o.clientHeight };
+  }
+  function it(f) {
+    var v;
+    c || h !== f && (h = f, e.variant === "fixed" ? n = { ...n, cropRect: { ...R } } : n = dt(
+      n,
+      f,
+      (s == null ? void 0 : s.naturalWidth) ?? 1,
+      (s == null ? void 0 : s.naturalHeight) ?? 1
+    ), (v = a.onShapeSync) == null || v.call(a, f), D(), b(), T());
+  }
+  function Dt(f) {
+    c || (n = k(n, f), D(), b(), T());
+  }
+  function wt() {
+    c || (n = Ut(n), D(), yt(i, n, h), b(), T());
+  }
+  function vt() {
+    c || (n = $t(n), D(), yt(i, n, h), b(), T());
+  }
+  function St(f) {
+    var v;
+    c || (n = ht(n, f), (v = a.onRotationSync) == null || v.call(a, f), D(), b());
+  }
+  function rt(f) {
+    var v;
+    c || (n = nt(n, f, e.minScale, e.maxScale), (v = a.onScaleSync) == null || v.call(a, n.scale), D(), b());
+  }
+  function Lt() {
+    var f, v, M;
+    c || (h = e.cropShape, n = xt(
+      e.cropShape,
+      (s == null ? void 0 : s.naturalWidth) ?? 1,
+      (s == null ? void 0 : s.naturalHeight) ?? 1
+    ), e.variant === "fixed" ? n = { ...n, cropRect: { ...R } } : e.initialCrop && (n = k(n, e.initialCrop)), e.initialRotation && (n = ht(n, e.initialRotation)), e.initialScale !== void 0 && e.initialScale !== 1 && (n = nt(n, e.initialScale, e.minScale, e.maxScale)), (f = a.onRotationSync) == null || f.call(a, n.rotation), (v = a.onShapeSync) == null || v.call(a, e.cropShape), (M = a.onScaleSync) == null || M.call(a, n.scale), D(), yt(i, n, h), b(), T());
+  }
+  function ft() {
+    if (!s) throw new Error("No image loaded");
+    const { w: f, h: v } = F();
+    return me(
+      s,
+      n,
+      e.maxOutputWidth,
+      e.maxOutputHeight,
+      h,
+      e.borderRadius,
+      // Pan is stored in the renderer's CSS-px container space; pass the
+      // container dims so the exporter can rescale pan into display space.
+      // The height + variant drive the fixed variant's cover-fit export.
+      f,
+      v,
+      e.variant
+    );
+  }
+  async function Et(f, v) {
+    const M = ft();
+    return Se(M, f || e.outputType, v ?? e.outputQuality);
+  }
+  function Yt(f, v) {
+    try {
+      return ft().toDataURL(f || e.outputType, v ?? e.outputQuality);
+    } catch (M) {
+      const L = M instanceof Error ? M : new Error(String(M));
+      throw new Error(`Failed to export data URL: ${L.message}`);
+    }
+  }
+  function Xt() {
+    if (!s) throw new Error("No image loaded");
+    return ge(n, s.naturalWidth, s.naturalHeight);
+  }
+  function Ft(f) {
+    if (c) return;
+    const v = e.src, M = e.variant;
+    e = Ht({ ...e, ...f }), f.cropShape !== void 0 && it(f.cropShape), f.variant !== void 0 && f.variant !== M && (l == null || l.setFixedFrame(e.variant === "fixed"), e.variant === "fixed" ? n = { ...n, cropRect: { ...R } } : (l == null || l.setScaleBounds(e.minScale, e.maxScale), n = dt(n, h, (s == null ? void 0 : s.naturalWidth) ?? 1, (s == null ? void 0 : s.naturalHeight) ?? 1), n = nt({ ...n, panX: 0, panY: 0 }, e.initialScale ?? 1, e.minScale, e.maxScale)), D(), b(), T()), f.src !== void 0 && f.src !== v && W(f.src).catch(() => {
+    }), (f.showBleedMargin !== void 0 || f.bleedMarginSize !== void 0 || f.bleedMarginColor !== void 0) && (l == null || l.setBleedConfig({
+      show: e.showBleedMargin,
+      size: e.bleedMarginSize,
+      color: e.bleedMarginColor
+    })), f.showGrid !== void 0 && D(), l == null || l.markDirty();
+  }
+  function It() {
+    c || (c = !0, S++, l == null || l.destroy(), d == null || d.destroy(), g == null || g.destroy(), w == null || w.disconnect(), y && (clearTimeout(y), y = null));
+  }
+  return {
+    loadImage: W,
+    getTransformState: _,
+    getCropRect: $,
+    setCropShape: it,
+    setCropRect: Dt,
+    rotateLeft: wt,
+    flipHorizontal: vt,
+    setRotation: St,
+    setScale: rt,
+    reset: Lt,
+    toCanvas: ft,
+    toBlob: Et,
+    toDataURL: Yt,
+    toTransformParams: Xt,
+    update: Ft,
+    destroy: It
+  };
+}
+function Pe(t = {}) {
+  const r = tt(null), i = tt(null), o = tt(null), a = tt(t);
+  a.current = t;
+  const [e, h] = J(() => ({
+    quarterTurns: 0,
+    rotation: 0,
+    flipH: !1,
+    flipV: !1,
+    scale: 1,
+    panX: 0,
+    panY: 0,
+    cropRect: { x: 0, y: 0, width: 1, height: 1 }
+  })), [s, n] = J({ x: 0, y: 0, width: 1, height: 1 }), [l, d] = J(t.cropShape ?? "free"), [g, w] = J(!1), [y, c] = J(null), [p, S] = J(!1);
+  ot(() => {
+    const u = r.current, m = i.current;
+    if (!u || !m) return;
+    const H = a.current, V = Ht(H), E = Re({
+      canvas: u,
+      host: m,
+      layoutContainer: m,
+      config: V,
+      callbacks: {
+        onReady: () => S(!0),
+        onImageLoad: () => {
+        },
+        onError: (O) => c(O.message),
+        onChange: (O) => h(O),
+        onCropChange: (O) => n(O),
+        onShapeSync: (O) => d(O),
+        onLoadingChange: (O, _) => {
+          w(O), c(_);
+        }
+      }
+    });
+    return o.current = E, H.src && E.loadImage(H.src).catch(() => {
+    }), () => {
+      S(!1), E.destroy(), o.current = null;
+    };
+  }, [t.src]), ot(() => {
+    const u = o.current;
+    if (!u) return;
+    const { src: m, ...H } = t;
+    u.update(H);
+  }, [
+    t.cropShape,
+    t.minScale,
+    t.maxScale,
+    t.minCropSize,
+    t.theme,
+    t.showGrid,
+    t.showBleedMargin,
+    t.bleedMarginSize,
+    t.bleedMarginColor,
+    t.enableAnimations,
+    t.keyboard,
+    t.pinchZoom,
+    t.wheelZoom
+  ]);
+  const x = Rt(() => ({
+    loadImage: (u) => o.current ? o.current.loadImage(u) : Promise.resolve(),
+    rotateLeft: () => {
+      var u;
+      return (u = o.current) == null ? void 0 : u.rotateLeft();
+    },
+    flipHorizontal: () => {
+      var u;
+      return (u = o.current) == null ? void 0 : u.flipHorizontal();
+    },
+    setRotation: (u) => {
+      var m;
+      return (m = o.current) == null ? void 0 : m.setRotation(u);
+    },
+    setScale: (u) => {
+      var m;
+      return (m = o.current) == null ? void 0 : m.setScale(u);
+    },
+    setCropShape: (u) => {
+      var m;
+      return (m = o.current) == null ? void 0 : m.setCropShape(u);
+    },
+    setCropRect: (u) => {
+      var m;
+      return (m = o.current) == null ? void 0 : m.setCropRect(u);
+    },
+    reset: () => {
+      var u;
+      return (u = o.current) == null ? void 0 : u.reset();
+    }
+  }), []), C = Rt(() => ({
+    toCanvas: () => {
+      var u;
+      return ((u = o.current) == null ? void 0 : u.toCanvas()) ?? null;
+    },
+    toBlob: (u, m) => o.current ? o.current.toBlob(u, m) : Promise.resolve(null),
+    toDataURL: (u, m) => {
+      var H;
+      return ((H = o.current) == null ? void 0 : H.toDataURL(u, m)) ?? null;
+    },
+    toTransformParams: () => {
+      var u;
+      return ((u = o.current) == null ? void 0 : u.toTransformParams()) ?? null;
+    },
+    getController: () => o.current
+  }), []);
+  return {
+    canvasRef: r,
+    containerRef: i,
+    state: e,
+    cropRect: s,
+    cropShape: l,
+    scale: e.scale,
+    rotation: e.rotation,
+    loading: g,
+    error: y,
+    ready: p,
+    actions: x,
+    api: C
+  };
+}
+export {
+  zt as D,
+  xe as S,
+  I as a,
+  Pe as b,
+  Re as c,
+  gt as g,
+  Ht as m,
+  Kt as p,
+  Te as s,
+  Me as u
+};
+//# sourceMappingURL=index-CktjrogS.js.map