@techzyapp/ui-library 1.0.43 → 1.0.45

package/dist/ImageEditor-BwrG1fk7.js

@@ -0,0 +1,2729 @@
+import { jsxs as X, jsx as v, Fragment as ue } from "react/jsx-runtime";
+import { forwardRef as Ke, useRef as F, useState as Q, useEffect as j, useLayoutEffect as de, useMemo as mn, useImperativeHandle as fn, useSyncExternalStore as pn, useCallback as gn } from "react";
+import { clsx as W } from "clsx";
+import { B as ye } from "./Button-C415LPw_.js";
+import { b as et } from "./Icon-B7DJn8Tw.js";
+import { I as kt } from "./IconButton-re6xITGO.js";
+import { L as _n } from "./Loader-7v1QBvHY.js";
+import { O as wn } from "./Overlay-DiL0ZARH.js";
+import { g as vn, a as oe } from "./ConfigProvider-DVDGtCUc.js";
+import { D as bn } from "./Dropdown-D-D_Z1Jo.js";
+import { L as De } from "./ListItem-Ezmdk7q-.js";
+const Ae = [
+  1,
+  0,
+  0,
+  0,
+  0,
+  0,
+  1,
+  0,
+  0,
+  0,
+  0,
+  0,
+  1,
+  0,
+  0,
+  0,
+  0,
+  0,
+  1,
+  0
+], me = 0.2126, fe = 0.7152, pe = 0.0722;
+function xn(t, e) {
+  const n = new Array(20);
+  for (let i = 0; i < 4; i++)
+    for (let o = 0; o < 5; o++) {
+      let r = 0;
+      for (let a = 0; a < 4; a++) r += t[i * 5 + a] * e[a * 5 + o];
+      o === 4 && (r += t[i * 5 + 4]), n[i * 5 + o] = r;
+    }
+  return n;
+}
+function ot(...t) {
+  return t.reduce((e, n) => xn(n, e), Ae);
+}
+function Mn(t) {
+  return !t || t.every((e, n) => Math.abs(e - Ae[n]) < 1e-6);
+}
+const He = (t) => [
+  1,
+  0,
+  0,
+  0,
+  t,
+  0,
+  1,
+  0,
+  0,
+  t,
+  0,
+  0,
+  1,
+  0,
+  t,
+  0,
+  0,
+  0,
+  1,
+  0
+], bt = (t) => {
+  const e = 0.5 * (1 - t);
+  return [t, 0, 0, 0, e, 0, t, 0, 0, e, 0, 0, t, 0, e, 0, 0, 0, 1, 0];
+}, Rt = (t) => {
+  const e = 1 - t;
+  return [
+    me * e + t,
+    fe * e,
+    pe * e,
+    0,
+    0,
+    me * e,
+    fe * e + t,
+    pe * e,
+    0,
+    0,
+    me * e,
+    fe * e,
+    pe * e + t,
+    0,
+    0,
+    0,
+    0,
+    0,
+    1,
+    0
+  ];
+}, Ct = (t, e, n, i = 0, o = 0, r = 0) => [
+  t,
+  0,
+  0,
+  0,
+  i,
+  0,
+  e,
+  0,
+  0,
+  o,
+  0,
+  0,
+  n,
+  0,
+  r,
+  0,
+  0,
+  0,
+  1,
+  0
+], ge = (t, e) => {
+  const n = e - t;
+  return [n, 0, 0, 0, t, 0, n, 0, 0, t, 0, 0, n, 0, t, 0, 0, 0, 1, 0];
+}, Ue = [
+  0.393,
+  0.769,
+  0.189,
+  0,
+  0,
+  0.349,
+  0.686,
+  0.168,
+  0,
+  0,
+  0.272,
+  0.534,
+  0.131,
+  0,
+  0,
+  0,
+  0,
+  0,
+  1,
+  0
+], Ee = [
+  ["default"],
+  ["chrome", "fade", "cold", "warm", "pastel"],
+  ["mono", "noir", "stark", "wash"],
+  ["sepia", "rust", "blues", "color"]
+], Ft = Rt(0), Re = {
+  default: null,
+  // more contrast + saturation
+  chrome: ot(Rt(1.3), bt(1.15)),
+  // lifted blacks, softer whites, desaturated
+  fade: ot(Rt(0.7), ge(0.12, 0.92)),
+  // a blue shift
+  cold: ot(Ct(0.9, 0.98, 1.12, 0, 0.01, 0.03), bt(1.04)),
+  // a red / yellow shift
+  warm: ot(Ct(1.1, 1.03, 0.86, 0.03, 0.01, 0), bt(1.04)),
+  // brightened + desaturated
+  pastel: ot(Rt(0.6), ge(0.16, 1)),
+  // luminance grayscale
+  mono: Ft,
+  // high-contrast grayscale
+  noir: ot(Ft, bt(1.45), He(-0.04)),
+  // very high-contrast grayscale
+  stark: ot(Ft, bt(2.1)),
+  // low-contrast, bright grayscale
+  wash: ot(Ft, ge(0.22, 0.98)),
+  sepia: Ue,
+  // a warm, strong sepia
+  rust: ot(Ue, Ct(1.12, 0.9, 0.7), bt(1.12)),
+  // blue-tinted monochrome
+  blues: ot(Ft, Ct(0.72, 0.88, 1.08, 0, 0.02, 0.08)),
+  // boosted, vivid color
+  color: ot(Rt(1.65), bt(1.06))
+}, yn = [
+  "brightness",
+  "contrast",
+  "saturation",
+  "exposure",
+  "temperature",
+  "gamma",
+  "clarity",
+  "vignette"
+], Qe = {
+  brightness: 0,
+  contrast: 0,
+  saturation: 0,
+  exposure: 0,
+  temperature: 0,
+  gamma: 0,
+  clarity: 0,
+  vignette: 0
+}, ut = {
+  /** additive: −0.25…+0.25 */
+  brightness: (t) => t / 100 * 0.25,
+  /** multiply around the midpoint: 0.5…1.5 */
+  contrast: (t) => 1 + t / 100 * 0.5,
+  /** 0 (grayscale)…2 */
+  saturation: (t) => 1 + t / 100,
+  /** multiply: 0.5…1.5 */
+  exposure: (t) => 1 + t / 100 * 0.5,
+  /** −1…1, shifts R and B in opposite directions */
+  temperature: (t) => t / 100,
+  /** exponent 0.5…1.5 (applied as x^(1/γ), so positive brightens the midtones) */
+  gamma: (t) => 1 + t / 100 * 0.5,
+  /** −1…1 local-contrast amount (negative softens) */
+  clarity: (t) => t / 100,
+  /** −1…1 (positive darkens the edges, negative lightens them) */
+  vignette: (t) => t / 100
+};
+function En(t) {
+  const e = ut.temperature(t.temperature);
+  return ot(
+    Ct(
+      ut.exposure(t.exposure),
+      ut.exposure(t.exposure),
+      ut.exposure(t.exposure)
+    ),
+    He(ut.brightness(t.brightness)),
+    bt(ut.contrast(t.contrast)),
+    Rt(ut.saturation(t.saturation)),
+    Ct(1 + 0.12 * e, 1 + 0.02 * e, 1 - 0.12 * e)
+  );
+}
+function kn(t, e) {
+  return ot(t ?? Ae, En(e));
+}
+const re = Math.PI / 2, Ze = 1e-6, ae = ([t, e], n) => {
+  const i = Math.cos(n), o = Math.sin(n);
+  return [t * i - e * o, t * o + e * i];
+};
+function Je(t, e, n) {
+  const i = Math.abs(Math.cos(n)), o = Math.abs(Math.sin(n));
+  return [t / 2 * i + e / 2 * o, t / 2 * o + e / 2 * i];
+}
+const $t = (t) => [
+  t.x + t.width / 2,
+  t.y + t.height / 2
+];
+function se(t, e, n, i) {
+  const [o, r] = Je(t, e, n);
+  return Math.max(2 * o / i.width, 2 * r / i.height);
+}
+function jt(t, e) {
+  const [n, i] = $t(t.crop), [o, r] = ae([n - e.width / 2, i - e.height / 2], -t.rotation);
+  return [o / t.scale, r / t.scale];
+}
+function Wt([t, e], n, i, o, r, a) {
+  const [s, _] = Je(n, i, o), c = Math.max(0, a.width / 2 - s / r), M = Math.max(0, a.height / 2 - _ / r);
+  return [Math.min(c, Math.max(-c, t)), Math.min(M, Math.max(-M, e))];
+}
+function Kt(t, e, n, i, o, r) {
+  const [a, s] = ae([t[0] * o, t[1] * o], i), _ = r.width / 2 + a, c = r.height / 2 + s;
+  return { x: _ - e / 2, y: c - n / 2, width: e, height: n };
+}
+function Tn(t, e, n, i) {
+  const o = [
+    [t.x, t.y],
+    [t.x + t.width, t.y],
+    [t.x, t.y + t.height],
+    [t.x + t.width, t.y + t.height]
+  ], r = 1e-6 * Math.max(i.width, i.height);
+  return o.every(([a, s]) => {
+    const [_, c] = ae([a - i.width / 2, s - i.height / 2], -e);
+    return Math.abs(_ / n) <= i.width / 2 + r / n && Math.abs(c / n) <= i.height / 2 + r / n;
+  });
+}
+function In(t, e) {
+  const { width: n, height: i } = t.crop, o = Math.max(t.scale, se(n, i, t.rotation, e)), r = Wt(jt({ ...t, scale: o }, e), n, i, t.rotation, o, e);
+  return { ...t, scale: o, crop: Kt(r, n, i, t.rotation, o, e) };
+}
+function qt(t) {
+  return {
+    width: Math.max(1, Math.round(t.crop.width / t.scale)),
+    height: Math.max(1, Math.round(t.crop.height / t.scale))
+  };
+}
+function Lt(t) {
+  const e = qt(t);
+  return t.resize ? {
+    width: Math.max(1, Math.min(e.width, Math.round(t.resize.width))),
+    height: Math.max(1, Math.min(e.height, Math.round(t.resize.height)))
+  } : e;
+}
+function Yt(t) {
+  const { crop: e } = t, n = t.resize;
+  if (!n) return e;
+  const i = n.width / n.height, o = e.width / e.height;
+  if (Math.abs(o - i) < 1e-9 * Math.max(o, i)) return e;
+  if (o > i) {
+    const a = e.height * i;
+    return { ...e, x: e.x + (e.width - a) / 2, width: a };
+  }
+  const r = e.width / i;
+  return { ...e, y: e.y + (e.height - r) / 2, height: r };
+}
+function Sn(t, e) {
+  if (!e) return { ...t, resize: null };
+  const n = qt(t), i = Math.max(1, Math.min(n.width, Math.round(e.width))), o = Math.max(1, Math.min(n.height, Math.round(e.height))), r = Math.round(i * n.height / n.width) === o || Math.round(o * n.width / n.height) === i;
+  let a = t;
+  if (!r) {
+    const c = Yt({ ...t, resize: { width: i, height: o } });
+    a = { ...t, crop: c, cropRatio: null };
+  }
+  const s = qt(a), _ = i >= s.width && o >= s.height ? null : { width: Math.min(i, s.width), height: Math.min(o, s.height) };
+  return { ...a, resize: _ };
+}
+function An(t, e) {
+  const n = e.resize;
+  if (!n) return n;
+  const i = qt(t), o = qt(e);
+  if (i.width === o.width && i.height === o.height) return n;
+  const r = Math.max(
+    1,
+    Math.min(o.width, Math.round(n.width * o.width / i.width))
+  ), a = Math.max(
+    1,
+    Math.min(o.height, Math.round(n.height * o.height / i.height))
+  );
+  return r === o.width && a === o.height ? null : { width: r, height: a };
+}
+function Rn(t, e) {
+  let n = t.width, i = t.height;
+  return e && e > 0 && (n / i > e ? n = i * e : i = n / e), { x: (t.width - n) / 2, y: (t.height - i) / 2, width: n, height: i };
+}
+function Cn(t, e) {
+  return {
+    crop: Rn(t, e),
+    cropRatio: e && e > 0 ? e : null,
+    resize: null,
+    rotation: 0,
+    flipX: !1,
+    flipY: !1,
+    scale: 1,
+    filter: null,
+    colorMatrix: null,
+    finetune: { ...Qe },
+    redact: { effect: "blur", amount: 0 }
+  };
+}
+function _e(t, e) {
+  const n = (Math.round(t / re) % 4 + 4) % 4, i = e ?? n * re;
+  let o = t - i;
+  return o = Math.atan2(Math.sin(o), Math.cos(o)), { quarter: ke(i), fine: o };
+}
+const ke = (t) => {
+  const e = t % (2 * Math.PI), n = e < 0 ? e + 2 * Math.PI : e;
+  return Math.abs(n - 2 * Math.PI) < Ze ? 0 : n;
+};
+function Fe(t, e, n) {
+  const { width: i, height: o } = t.crop, r = jt(t, n), a = Math.max(t.scale, se(i, o, e, n)), s = Wt(r, i, o, e, a, n);
+  return { ...t, rotation: e, scale: a, crop: Kt(s, i, o, e, a, n) };
+}
+function Ln(t, e) {
+  const [n, i] = $t(t.crop), o = e.width / 2, r = e.height / 2, [a, s] = ae([n - o, i - r], -re), _ = t.crop.height, c = t.crop.width;
+  return {
+    ...t,
+    rotation: t.rotation - re,
+    crop: { x: o + a - _ / 2, y: r + s - c / 2, width: _, height: c },
+    cropRatio: t.cropRatio ? 1 / t.cropRatio : t.cropRatio
+  };
+}
+function Nn(t, e) {
+  return {
+    ...t,
+    rotation: -t.rotation,
+    flipX: !t.flipX,
+    crop: { ...t.crop, x: e.width - t.crop.x - t.crop.width }
+  };
+}
+function Bt(t, e) {
+  return t.scale / se(t.crop.width, t.crop.height, t.rotation, e);
+}
+const Vt = 5;
+function Gt(t, e, n) {
+  const { width: i, height: o } = t.crop, r = jt(t, n), a = se(i, o, t.rotation, n) * Math.min(Vt, Math.max(1, e)), s = Wt(r, i, o, t.rotation, a, n);
+  return { ...t, scale: a, crop: Kt(s, i, o, t.rotation, a, n) };
+}
+function qn(t, e, n, i) {
+  const { width: o, height: r } = t.crop, a = { ...t, crop: { ...t.crop, x: t.crop.x + e, y: t.crop.y + n } }, s = Wt(jt(a, i), o, r, t.rotation, t.scale, i);
+  return { ...t, crop: Kt(s, o, r, t.rotation, t.scale, i) };
+}
+function Pn(t, e, n) {
+  if (!e || e <= 0) return { ...t, cropRatio: null };
+  const i = Math.abs(Math.cos(t.rotation)), o = Math.abs(Math.sin(t.rotation)), r = Math.min(
+    n.width * t.scale / (e * i + o),
+    n.height * t.scale / (e * o + i)
+  ), a = r * e, s = Wt(jt(t, n), a, r, t.rotation, t.scale, n);
+  return {
+    ...t,
+    cropRatio: e,
+    crop: Kt(s, a, r, t.rotation, t.scale, n)
+  };
+}
+function zn(t, e, n, i, o, { aspectRatio: r, minSize: a }) {
+  const s = t.crop;
+  let _ = s.x, c = s.y, M = s.x + s.width, m = s.y + s.height;
+  const k = e.includes("n"), f = e.includes("s"), I = e.includes("w"), S = e.includes("e");
+  if (k && (c = Math.min(c + i, m - a)), f && (m = Math.max(m + i, c + a)), I && (_ = Math.min(_ + n, M - a)), S && (M = Math.max(M + n, _ + a)), r && r > 0) {
+    let b = M - _, N = m - c;
+    if ((k || f) && (I || S))
+      b / N > r ? N = b / r : b = N * r, I ? _ = M - b : M = _ + b, k ? c = m - N : m = c + N;
+    else if (k || f) {
+      b = N * r;
+      const G = s.x + s.width / 2;
+      _ = G - b / 2, M = G + b / 2;
+    } else {
+      N = b / r;
+      const G = s.y + s.height / 2;
+      c = G - N / 2, m = G + N / 2;
+    }
+  }
+  const y = { x: _, y: c, width: M - _, height: m - c }, x = (b) => Tn(b, t.rotation, t.scale, o);
+  if (x(y)) return { ...t, crop: y };
+  if (!(!(r && r > 0) && (k || f) && (I || S))) return { ...t, crop: Ot(s, y, x) };
+  const A = (b) => ({ ...b, x: _, width: M - _ }), u = (b) => ({ ...b, y: c, height: m - c }), R = Ot(Ot(s, A(s), x), u, x), d = Ot(Ot(s, u(s), x), A, x), E = (b) => Math.abs(b.x - y.x) + Math.abs(b.y - y.y) + Math.abs(b.width - y.width) + Math.abs(b.height - y.height);
+  return { ...t, crop: E(R) <= E(d) ? R : d };
+}
+function Ot(t, e, n) {
+  const i = typeof e == "function" ? e(t) : e;
+  if (n(i)) return i;
+  let o = 0, r = 1;
+  for (let a = 0; a < 24; a++) {
+    const s = (o + r) / 2;
+    n(Oe(t, i, s)) ? o = s : r = s;
+  }
+  return Oe(t, i, o);
+}
+const Oe = (t, e, n) => ({
+  x: t.x + (e.x - t.x) * n,
+  y: t.y + (e.y - t.y) * n,
+  width: t.width + (e.width - t.width) * n,
+  height: t.height + (e.height - t.height) * n
+});
+function Xe(t, e) {
+  const n = {
+    ...t.crop,
+    width: Math.max(1, t.crop.width),
+    height: Math.max(1, t.crop.height)
+  };
+  return In({ ...t, crop: n, scale: Math.max(Ze, t.scale || 1) }, e);
+}
+const tn = 0.85, Dn = (t, e, n) => {
+  const i = Math.min(1, Math.max(0, (n - t) / (e - t)));
+  return i * i * (3 - 2 * i);
+}, Un = (t, e) => Dn(0.3, 1, Math.hypot(t, e) / Math.SQRT2);
+function Ce(t, e, n, i, o, r) {
+  const a = i.matrix, s = 1 / i.gamma, _ = Math.abs(i.gamma - 1) > 1e-4, c = Math.abs(i.clarity) > 1e-4 && !!o, M = Math.abs(i.vignette) > 1e-4 && !!r;
+  for (let m = 0; m < n; m++)
+    for (let k = 0; k < e; k++) {
+      const f = (m * e + k) * 4, I = t[f + 3] / 255;
+      if (I === 0) continue;
+      const S = t[f] / 255, y = t[f + 1] / 255, x = t[f + 2] / 255;
+      let l = a[0] * S + a[1] * y + a[2] * x + a[3] * I + a[4], A = a[5] * S + a[6] * y + a[7] * x + a[8] * I + a[9], u = a[10] * S + a[11] * y + a[12] * x + a[13] * I + a[14];
+      if (c) {
+        const R = o[f] / 255, d = o[f + 1] / 255, E = o[f + 2] / 255, b = o[f + 3] / 255, N = a[0] * R + a[1] * d + a[2] * E + a[3] * b + a[4], $ = a[5] * R + a[6] * d + a[7] * E + a[8] * b + a[9], G = a[10] * R + a[11] * d + a[12] * E + a[13] * b + a[14];
+        l += i.clarity * (l - N), A += i.clarity * (A - $), u += i.clarity * (u - G);
+      }
+      if (_ && (l = Math.pow(Math.max(0, l), s), A = Math.pow(Math.max(0, A), s), u = Math.pow(Math.max(0, u), s)), M) {
+        const R = k + 0.5, d = m + 0.5, E = r[0] * R + r[1] * d + r[2], b = r[3] * R + r[4] * d + r[5], N = Un(E, b) * tn * Math.abs(i.vignette);
+        i.vignette > 0 ? (l *= 1 - N, A *= 1 - N, u *= 1 - N) : (l += (1 - l) * N, A += (1 - A) * N, u += (1 - u) * N);
+      }
+      t[f] = l * 255, t[f + 1] = A * 255, t[f + 2] = u * 255;
+    }
+}
+function Le(t, e, n, i) {
+  const o = Math.max(1, Math.round(i)), r = new Uint8ClampedArray(t), a = new Uint8ClampedArray(t.length);
+  for (let _ = 0; _ < 3; _++)
+    s(r, a, e, n, o, !0), s(a, r, e, n, o, !1);
+  return r;
+  function s(_, c, M, m, k, f) {
+    const I = f ? m : M, S = f ? M : m, y = f ? 4 : M * 4, x = k * 2 + 1;
+    for (let l = 0; l < I; l++) {
+      const A = f ? l * M * 4 : l * 4;
+      for (let u = 0; u < 4; u++) {
+        let R = 0;
+        for (let d = -k; d <= k; d++) {
+          const E = Math.min(S - 1, Math.max(0, d));
+          R += _[A + E * y + u];
+        }
+        for (let d = 0; d < S; d++) {
+          c[A + d * y + u] = R / x;
+          const E = Math.max(0, d - k), b = Math.min(S - 1, d + k + 1);
+          R += _[A + b * y + u] - _[A + E * y + u];
+        }
+      }
+    }
+  }
+}
+const Ne = 0.012, en = (t, e) => {
+  const n = document.createElement("canvas");
+  return n.width = Math.max(1, Math.round(t)), n.height = Math.max(1, Math.round(e)), n;
+};
+async function Be(t) {
+  if (typeof createImageBitmap == "function")
+    try {
+      return await createImageBitmap(t, { imageOrientation: "from-image" });
+    } catch {
+    }
+  const e = URL.createObjectURL(t);
+  try {
+    return await nn(e, !1);
+  } finally {
+    URL.revokeObjectURL(e);
+  }
+}
+function nn(t, e) {
+  return new Promise((n, i) => {
+    const o = new Image();
+    e && (o.crossOrigin = "anonymous"), o.decoding = "async", o.onload = () => n(o), o.onerror = () => i(new Error(`Could not load image: ${t.slice(0, 80)}`)), o.src = t;
+  });
+}
+const Fn = (t) => t instanceof HTMLImageElement ? { width: t.naturalWidth, height: t.naturalHeight } : { width: t.width, height: t.height };
+async function On(t) {
+  let e, n = "";
+  if (typeof t == "string")
+    try {
+      const r = await fetch(t);
+      if (!r.ok) throw new Error(String(r.status));
+      const a = await r.blob();
+      n = a.type, e = await Be(a);
+    } catch {
+      e = await nn(t, !t.startsWith("data:") && !t.startsWith("blob:"));
+      const r = /^data:([^;,]+)/.exec(t) ?? /\.(png|jpe?g|webp|gif|avif)(?:[?#]|$)/i.exec(t);
+      r && (n = r[1].includes("/") ? r[1] : `image/${r[1].toLowerCase().replace("jpg", "jpeg")}`);
+    }
+  else
+    n = t.type, e = await Be(t);
+  const { width: i, height: o } = Fn(e);
+  if (!i || !o) throw new Error("The image has no size");
+  return { image: e, width: i, height: o, type: n };
+}
+function ne(t, e, n, i) {
+  const o = Math.min(1, i / Math.max(e, n));
+  if (o >= 1) return { canvas: t, width: e, height: n };
+  const r = en(e * o, n * o), a = r.getContext("2d");
+  return a && (a.imageSmoothingQuality = "high", a.drawImage(t, 0, 0, r.width, r.height)), { canvas: r, width: r.width, height: r.height };
+}
+function rn(t, e, n, i, o = 384) {
+  const r = Math.min(1, o / Math.max(e, n)), a = en(e * r, n * r), s = a.getContext("2d", { willReadFrequently: !0 });
+  if (!s) return a;
+  s.drawImage(t, 0, 0, a.width, a.height);
+  try {
+    const _ = s.getImageData(0, 0, a.width, a.height);
+    _.data.set(Le(_.data, a.width, a.height, Math.max(1, i * r))), s.putImageData(_, 0, 0);
+  } catch {
+  }
+  return a;
+}
+function Xn(t, e) {
+  return t || (["image/jpeg", "image/png", "image/webp"].includes(e) ? e : "image/png");
+}
+const Bn = [1, 0, 0, 0, 1, 0], st = (t, e) => [1, 0, t, 0, 1, e], nt = (t, e = t) => [t, 0, 0, 0, e, 0], on = (t) => {
+  const e = Math.cos(t), n = Math.sin(t);
+  return [e, -n, 0, n, e, 0];
+};
+function Yn(t, e) {
+  return [
+    t[0] * e[0] + t[1] * e[3],
+    t[0] * e[1] + t[1] * e[4],
+    t[0] * e[2] + t[1] * e[5] + t[2],
+    t[3] * e[0] + t[4] * e[3],
+    t[3] * e[1] + t[4] * e[4],
+    t[3] * e[2] + t[4] * e[5] + t[5]
+  ];
+}
+const at = (...t) => t.reduce((e, n) => Yn(n, e), Bn);
+function Nt([t, e, n, i, o, r]) {
+  const a = t * o - e * i, s = Math.abs(a) < 1e-12 ? 1e12 : 1 / a;
+  return [o * s, -e * s, (e * r - n * o) * s, -i * s, t * s, (n * i - t * r) * s];
+}
+const ie = ([t, e, n, i, o, r], a, s) => [
+  t * a + e * s + n,
+  i * a + o * s + r
+], Vn = { blur: 0.015, pixelate: 0.05 };
+function Te(t, e) {
+  var o, r;
+  const n = ((o = t.redact) == null ? void 0 : o.effect) ?? "blur";
+  return Math.max(0, Math.min(100, ((r = t.redact) == null ? void 0 : r.amount) ?? 0)) / 100 * (Vn[n] ?? 0) * Math.max(e.width, e.height);
+}
+function an(t, e) {
+  const n = Math.max(1e-6, e);
+  return {
+    cols: Math.max(1, Math.round(t.width / n)),
+    rows: Math.max(1, Math.round(t.height / n))
+  };
+}
+const Gn = 4, ce = (t, e) => {
+  const n = document.createElement("canvas");
+  return n.width = Math.max(1, Math.round(t)), n.height = Math.max(1, Math.round(e)), n;
+};
+function sn(t, e, n, i, o) {
+  const r = Math.min(1, Gn / Math.max(1, i), o / Math.max(e, n)), a = ce(e * r, n * r), s = a.getContext("2d", { willReadFrequently: !0 });
+  if (!s) return a;
+  s.imageSmoothingQuality = "high", s.drawImage(t, 0, 0, a.width, a.height);
+  try {
+    const _ = s.getImageData(0, 0, a.width, a.height);
+    _.data.set(Le(_.data, a.width, a.height, Math.max(1, i * r))), s.putImageData(_, 0, 0);
+  } catch {
+  }
+  return a;
+}
+function $n(t, e, n, i) {
+  const o = ce(e, n), r = o.getContext("2d");
+  return r && (r.imageSmoothingQuality = "high", r.drawImage(sn(t, e, n, i, 1024), 0, 0, e, n)), o;
+}
+function cn(t, e, n) {
+  const i = ce(e, n), o = i.getContext("2d"), r = t.getContext("2d");
+  !o || !r || (o.imageSmoothingQuality = "high", o.drawImage(t, 0, 0, i.width, i.height), r.save(), r.setTransform(1, 0, 0, 1, 0, 0), r.globalCompositeOperation = "copy", r.imageSmoothingEnabled = !1, r.drawImage(i, 0, 0, t.width, t.height), r.restore());
+}
+function jn(t, e, n, i) {
+  const o = ce(e, n), r = o.getContext("2d");
+  return r && (r.drawImage(t, 0, 0, e, n), cn(
+    o,
+    Math.max(1, Math.round(e / Math.max(2, i))),
+    Math.max(1, Math.round(n / Math.max(2, i)))
+  )), o;
+}
+const ln = (t) => t.area ? [t.area.x + t.area.width / 2, t.area.y + t.area.height / 2] : [t.width / 2, t.height / 2];
+function qe(t, e) {
+  const n = e.width / 2, i = e.height / 2;
+  return at(
+    st(-n, -i),
+    nt(t.flipX ? -1 : 1, t.flipY ? -1 : 1),
+    on(t.rotation),
+    nt(t.scale),
+    st(n, i)
+  );
+}
+function hn(t, e) {
+  const n = Math.abs(t.flip) < 0.02 ? 0.02 * Math.sign(t.flip || 1) : t.flip, [i, o] = ln(e);
+  return at(
+    st(-t.center[0], -t.center[1]),
+    on(t.rotation),
+    nt(t.scale * n, t.scale),
+    st(i, o)
+  );
+}
+function Wn(t) {
+  const [e, n] = $t(t);
+  return at(st(-e, -n), nt(2 / t.width, 2 / t.height));
+}
+function Kn(t, e, n, i) {
+  const o = at(nt(1 / i.dpr), Nt(hn(n, i))), r = at(
+    o,
+    Nt(qe(t, e)),
+    nt(1 / e.width, 1 / e.height)
+  );
+  return { toUV: r, toBlurUV: r, toCrop: at(o, Wn(t.crop)) };
+}
+function Ye(t, e, n) {
+  const i = Math.max(1, e.width - n * 2), o = Math.max(1, e.height - n * 2);
+  return {
+    center: $t(t),
+    scale: Math.min(i / t.width, o / t.height),
+    rotation: 0,
+    flip: 1
+  };
+}
+const Hn = `
+attribute vec2 a_pos;
+void main() { gl_Position = vec4(a_pos, 0.0, 1.0); }
+`, Qn = `
+#ifdef GL_FRAGMENT_PRECISION_HIGH
+precision highp float;
+#else
+precision mediump float;
+#endif
+uniform sampler2D u_image;
+uniform sampler2D u_blur;
+uniform vec2 u_size;
+uniform vec3 u_uvX; uniform vec3 u_uvY;
+uniform vec3 u_blurX; uniform vec3 u_blurY;
+uniform vec3 u_cropX; uniform vec3 u_cropY;
+uniform bool u_clip;
+uniform float u_dim;
+uniform vec3 u_dimColor;
+uniform mat4 u_cm; uniform vec4 u_co;
+uniform float u_gamma; uniform float u_clarity; uniform float u_vignette;
+uniform vec2 u_pixel; uniform vec3 u_cuvX; uniform vec3 u_cuvY;
+
+vec3 grade(vec4 c) { return (u_cm * c + u_co).rgb; }
+
+void main() {
+  vec3 px = vec3(gl_FragCoord.x, u_size.y - gl_FragCoord.y, 1.0);
+  vec2 cn = vec2(dot(u_cropX, px), dot(u_cropY, px));
+  // the pixel's own place in the crop (before a pixelation snaps cn to its block) — for the clip
+  bool outsideCrop = abs(cn.x) > 1.0 || abs(cn.y) > 1.0;
+  vec2 uv = vec2(dot(u_uvX, px), dot(u_uvY, px));
+  vec2 buv = vec2(dot(u_blurX, px), dot(u_blurY, px));
+  if (u_pixel.x > 0.0) {
+    // the center of this pixel's block (whole blocks across the crop; the edge pixel stays in the last)
+    vec2 cell = 2.0 / u_pixel;
+    vec2 idx = floor((cn + 1.0) / cell);
+    if (abs(cn.x) <= 1.0) idx.x = min(idx.x, u_pixel.x - 1.0);
+    if (abs(cn.y) <= 1.0) idx.y = min(idx.y, u_pixel.y - 1.0);
+    cn = (idx + 0.5) * cell - 1.0;
+    vec3 q = vec3(cn, 1.0);
+    uv = vec2(dot(u_cuvX, q), dot(u_cuvY, q));
+    buv = uv;
+  }
+  // sample BEFORE any early return: a texture read in a branch only some pixels of a 2×2 quad take has no
+  // defined derivatives, so at the image's edge the GPU picked a far too coarse mip level — a blurred
+  // copy of the content showed through as a faint line along a transparent image's sides
+  vec4 c = texture2D(u_image, uv);
+  vec4 bl = texture2D(u_blur, buv);
+  if ((u_clip && outsideCrop) || uv.x < 0.0 || uv.y < 0.0 || uv.x > 1.0 || uv.y > 1.0 || c.a <= 0.0) {
+    gl_FragColor = vec4(0.0);
+    return;
+  }
+  vec3 rgb = grade(c);
+  if (u_clarity != 0.0) rgb += u_clarity * (rgb - grade(bl));
+  if (u_gamma != 1.0) rgb = pow(max(rgb, 0.0), vec3(1.0 / u_gamma));
+  if (u_vignette != 0.0) {
+    float f = smoothstep(0.3, 1.0, length(cn) / 1.41421356) * ${tn.toFixed(2)} * abs(u_vignette);
+    rgb = u_vignette > 0.0 ? rgb * (1.0 - f) : rgb + (1.0 - rgb) * f;
+  }
+  rgb = clamp(rgb, 0.0, 1.0);
+  if (outsideCrop) rgb = mix(u_dimColor, rgb, u_dim);
+  gl_FragColor = vec4(rgb * c.a, c.a);
+}
+`;
+class le {
+  constructor(e, n) {
+    this.loc = {}, this.canvas = e, this.gl = n, this.maxTextureSize = n.getParameter(n.MAX_TEXTURE_SIZE), this.program = this.link(), n.useProgram(this.program);
+    const i = n.createBuffer();
+    n.bindBuffer(n.ARRAY_BUFFER, i), n.bufferData(n.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), n.STATIC_DRAW);
+    const o = n.getAttribLocation(this.program, "a_pos");
+    n.enableVertexAttribArray(o), n.vertexAttribPointer(o, 2, n.FLOAT, !1, 0, 0);
+    for (const r of [
+      "u_image",
+      "u_blur",
+      "u_size",
+      "u_uvX",
+      "u_uvY",
+      "u_blurX",
+      "u_blurY",
+      "u_cropX",
+      "u_cropY",
+      "u_clip",
+      "u_dim",
+      "u_dimColor",
+      "u_cm",
+      "u_co",
+      "u_gamma",
+      "u_clarity",
+      "u_vignette",
+      "u_pixel",
+      "u_cuvX",
+      "u_cuvY"
+    ])
+      this.loc[r] = n.getUniformLocation(this.program, r);
+    this.image = this.texture(), this.blur = this.texture(), n.uniform1i(this.loc.u_image, 0), n.uniform1i(this.loc.u_blur, 1);
+  }
+  /** Create a renderer on `canvas`, or `null` when WebGL is unavailable. */
+  static create(e) {
+    try {
+      const n = {
+        premultipliedAlpha: !0,
+        alpha: !0,
+        antialias: !1,
+        preserveDrawingBuffer: !0
+      }, i = e.getContext("webgl2", n) ?? e.getContext("webgl", n);
+      return i ? new le(e, i) : null;
+    } catch {
+      return null;
+    }
+  }
+  link() {
+    const e = this.gl, n = (o, r) => {
+      const a = e.createShader(o);
+      if (e.shaderSource(a, r), e.compileShader(a), !e.getShaderParameter(a, e.COMPILE_STATUS))
+        throw new Error(e.getShaderInfoLog(a) ?? "shader compile failed");
+      return a;
+    }, i = e.createProgram();
+    if (e.attachShader(i, n(e.VERTEX_SHADER, Hn)), e.attachShader(i, n(e.FRAGMENT_SHADER, Qn)), e.linkProgram(i), !e.getProgramParameter(i, e.LINK_STATUS))
+      throw new Error(e.getProgramInfoLog(i) ?? "program link failed");
+    return i;
+  }
+  texture() {
+    const e = this.gl, n = e.createTexture();
+    return e.bindTexture(e.TEXTURE_2D, n), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_S, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_T, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MIN_FILTER, e.LINEAR), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MAG_FILTER, e.LINEAR), n;
+  }
+  upload(e, n, i, o) {
+    const r = this.gl;
+    r.activeTexture(r.TEXTURE0 + e), r.bindTexture(r.TEXTURE_2D, n), r.pixelStorei(r.UNPACK_PREMULTIPLY_ALPHA_WEBGL, !1), r.texImage2D(r.TEXTURE_2D, 0, r.RGBA, r.RGBA, r.UNSIGNED_BYTE, i);
+    const a = typeof WebGL2RenderingContext < "u" && r instanceof WebGL2RenderingContext;
+    o && a ? (r.generateMipmap(r.TEXTURE_2D), r.texParameteri(r.TEXTURE_2D, r.TEXTURE_MIN_FILTER, r.LINEAR_MIPMAP_LINEAR)) : r.texParameteri(r.TEXTURE_2D, r.TEXTURE_MIN_FILTER, r.LINEAR);
+  }
+  /** Upload the image (and its blurred copy for clarity). */
+  setImage(e, n, i = !0) {
+    this.upload(0, this.image, e, i), this.upload(1, this.blur, n, !1);
+  }
+  /**
+   * Swap just the image texture (e.g. for a coarser copy) — the blurred copy stays. `mipmap: false` for
+   * a pixelation's texture: its blocks sample one point each, and mip levels would seam their borders.
+   */
+  setSource(e, n = !0) {
+    this.upload(0, this.image, e, n);
+  }
+  /** Draw one frame at the canvas's current pixel size. */
+  render(e) {
+    const n = this.gl, { width: i, height: o } = this.canvas;
+    n.viewport(0, 0, i, o), n.clearColor(0, 0, 0, 0), n.clear(n.COLOR_BUFFER_BIT), n.uniform2f(this.loc.u_size, i, o);
+    const r = (f, I, S) => {
+      n.uniform3f(this.loc[I], f[0], f[1], f[2]), n.uniform3f(this.loc[S], f[3], f[4], f[5]);
+    };
+    r(e.toUV, "u_uvX", "u_uvY"), r(e.toBlurUV, "u_blurX", "u_blurY"), r(e.toCrop, "u_cropX", "u_cropY"), n.uniform1i(this.loc.u_clip, e.clip ? 1 : 0), n.uniform1f(this.loc.u_dim, e.dim ?? 1);
+    const [a, s, _] = e.dimColor ?? [0, 0, 0];
+    n.uniform3f(this.loc.u_dimColor, a, s, _);
+    const c = e.matrix, M = new Float32Array(16);
+    for (let f = 0; f < 4; f++)
+      for (let I = 0; I < 4; I++) M[I * 4 + f] = c[f * 5 + I];
+    n.uniformMatrix4fv(this.loc.u_cm, !1, M), n.uniform4f(this.loc.u_co, c[4], c[9], c[14], c[19]), n.uniform1f(this.loc.u_gamma, e.gamma), n.uniform1f(this.loc.u_clarity, e.clarity), n.uniform1f(this.loc.u_vignette, e.vignette);
+    const [m, k] = e.pixel ?? [0, 0];
+    n.uniform2f(this.loc.u_pixel, m, k), e.pixel && e.cropToUV && r(e.cropToUV, "u_cuvX", "u_cuvY"), n.drawArrays(n.TRIANGLE_STRIP, 0, 4);
+  }
+  /**
+   * Release the GPU resources. `loseContext` also drops the context itself (a throwaway export canvas —
+   * browsers cap live contexts); a canvas that will be drawn on again keeps it.
+   */
+  dispose(e = !0) {
+    var i;
+    const n = this.gl;
+    n.deleteTexture(this.image), n.deleteTexture(this.blur), n.deleteProgram(this.program), e && ((i = n.getExtension("WEBGL_lose_context")) == null || i.loseContext());
+  }
+}
+function Pe(t, e = t.colorMatrix) {
+  const n = t.finetune;
+  return {
+    matrix: kn(e, n),
+    gamma: ut.gamma(n.gamma),
+    clarity: ut.clarity(n.clarity),
+    vignette: ut.vignette(n.vignette)
+  };
+}
+const un = (t) => !Mn(t.matrix) || t.gamma !== 1 || t.clarity !== 0 || t.vignette !== 0, ze = (t, e) => {
+  const n = document.createElement("canvas");
+  return n.width = Math.max(1, Math.round(t)), n.height = Math.max(1, Math.round(e)), n;
+};
+function Zn(t, e, n, i, o, r) {
+  const a = t.getContext("2d", { willReadFrequently: !0 });
+  if (!a) return;
+  const { width: s, height: _ } = t;
+  a.setTransform(1, 0, 0, 1, 0, 0), a.clearRect(0, 0, s, _);
+  const c = (m, k, f, I) => {
+    const S = at(nt(1 / f.width, 1 / f.height), Nt(I));
+    if (m.save(), r.clip) {
+      const y = Nt(r.toCrop);
+      m.beginPath(), [
+        [-1, -1],
+        [1, -1],
+        [1, 1],
+        [-1, 1]
+      ].forEach(([x, l], A) => {
+        const [u, R] = ie(y, x, l);
+        A === 0 ? m.moveTo(u, R) : m.lineTo(u, R);
+      }), m.closePath(), m.clip();
+    }
+    m.setTransform(S[0], S[3], S[1], S[4], S[2], S[5]), m.imageSmoothingQuality = "high", m.drawImage(k, 0, 0, f.width, f.height), m.restore();
+  };
+  if (c(a, e, n, r.toUV), un(r) && M(), r.dim != null && r.dim < 1) {
+    const m = Nt(r.toCrop);
+    a.save(), a.globalCompositeOperation = "source-atop", a.beginPath(), a.rect(0, 0, s, _), [
+      [-1, -1],
+      [1, -1],
+      [1, 1],
+      [-1, 1]
+    ].forEach(([S, y], x) => {
+      const [l, A] = ie(m, S, y);
+      x === 0 ? a.moveTo(l, A) : a.lineTo(l, A);
+    }), a.closePath();
+    const [k, f, I] = (r.dimColor ?? [0, 0, 0]).map((S) => Math.round(S * 255));
+    a.fillStyle = `rgba(${k}, ${f}, ${I}, ${1 - r.dim})`, a.fill("evenodd"), a.restore();
+  }
+  function M() {
+    if (a)
+      try {
+        const m = a.getImageData(0, 0, s, _);
+        let k = null;
+        if (r.clarity !== 0) {
+          const I = ze(s, _).getContext("2d", { willReadFrequently: !0 });
+          I && (c(I, i, o, r.toBlurUV), k = I.getImageData(0, 0, s, _).data);
+        }
+        Ce(m.data, s, _, r, k, r.toCrop), a.putImageData(m, 0, 0);
+      } catch {
+      }
+  }
+}
+const Jn = 16384, tr = 16384 * 16384, er = (t, e, n) => new Promise((i, o) => {
+  try {
+    t.toBlob(
+      (r) => r ? i(r) : o(new Error("Encoding failed")),
+      e,
+      n
+    );
+  } catch (r) {
+    o(r);
+  }
+});
+async function nr(t, e, n, i, o) {
+  var x;
+  const r = Lt(n), a = Yt(n), s = Math.min(
+    1,
+    Jn / Math.max(r.width, r.height),
+    Math.sqrt(tr / (r.width * r.height))
+  ), _ = Math.max(1, Math.round(r.width * s)), c = Math.max(1, Math.round(r.height * s)), M = ze(_, c), m = M.getContext("2d");
+  if (!m) throw new Error("Canvas 2D is unavailable");
+  const k = at(
+    qe(n, e),
+    st(-a.x, -a.y),
+    nt(_ / a.width, c / a.height)
+  );
+  i === "image/jpeg" && (m.fillStyle = "#fff", m.fillRect(0, 0, _, c)), m.setTransform(k[0], k[3], k[1], k[4], k[2], k[5]), m.imageSmoothingEnabled = !0, m.imageSmoothingQuality = "high";
+  const f = Te(n, e), I = (x = n.redact) == null ? void 0 : x.effect, S = f > 0 && I === "blur" ? $n(t, e.width, e.height, f) : t;
+  m.drawImage(S, 0, 0, e.width, e.height), m.setTransform(1, 0, 0, 1, 0, 0);
+  const y = Pe(n);
+  if (un(y)) {
+    const l = Ne * Math.max(e.width, e.height) * (_ / a.width) * n.scale, A = rn(M, _, c, l);
+    rr(M, A, y);
+  }
+  if (f > 0 && I === "pixelate") {
+    const { cols: l, rows: A } = an(a, f * n.scale);
+    cn(M, l, A);
+  }
+  return er(M, i, o);
+}
+function rr(t, e, n) {
+  const { width: i, height: o } = t, r = t.getContext("2d", { willReadFrequently: !0 }), a = document.createElement("canvas"), s = le.create(a), _ = s ? Math.min(2048, s.maxTextureSize) : 1024, c = ze(_, _), M = c.getContext("2d", { willReadFrequently: !0 });
+  try {
+    for (let m = 0; m < o; m += _)
+      for (let k = 0; k < i; k += _) {
+        const f = Math.min(_, i - k), I = Math.min(_, o - m), S = at(st(k, m), nt(2 / i, 2 / o), st(-1, -1)), y = at(st(k, m), nt(1 / i, 1 / o));
+        if (s)
+          c.width = f, c.height = I, M.clearRect(0, 0, f, I), M.drawImage(t, k, m, f, I, 0, 0, f, I), a.width = f, a.height = I, s.setImage(c, e, !1), s.render({ ...n, toUV: nt(1 / f, 1 / I), toBlurUV: y, toCrop: S, clip: !1 }), r.clearRect(k, m, f, I), r.drawImage(a, k, m);
+        else {
+          const x = r.getImageData(k, m, f, I);
+          let l = null;
+          n.clarity !== 0 && (c.width = f, c.height = I, M.drawImage(
+            e,
+            k / i * e.width,
+            m / o * e.height,
+            f / i * e.width,
+            I / o * e.height,
+            0,
+            0,
+            f,
+            I
+          ), l = M.getImageData(0, 0, f, I).data), Ce(x.data, f, I, n, l, S), r.putImageData(x, k, m);
+        }
+      }
+  } finally {
+    s == null || s.dispose();
+  }
+}
+const ir = 50, we = (t, e) => JSON.stringify(t) === JSON.stringify(e), or = (t, e) => t === e || !!t && !!e && t.width === e.width && t.height === e.height, _t = (t) => JSON.parse(JSON.stringify(t));
+class dn {
+  constructor() {
+    this.snapshot = {
+      status: "idle",
+      error: null,
+      state: null,
+      ui: { util: "crop", cropTab: "rotation", finetuneTab: "brightness", resizeLocked: !0 },
+      size: null,
+      canUndo: !1,
+      canRedo: !1,
+      canRevert: !1
+    }, this.storeListeners = /* @__PURE__ */ new Set(), this.events = /* @__PURE__ */ new Map(), this.history = [], this.index = -1, this.initial = null, this.loaded = null, this.options = null, this.openToken = 0, this.subscribe = (e) => (this.storeListeners.add(e), () => {
+      this.storeListeners.delete(e);
+    }), this.getSnapshot = () => this.snapshot;
+  }
+  patch(e) {
+    const n = e.state !== void 0 ? e.state : this.snapshot.state;
+    this.snapshot = {
+      ...this.snapshot,
+      ...e,
+      canUndo: this.index > 0,
+      canRedo: this.index < this.history.length - 1,
+      canRevert: !!n && !!this.initial && !we(n, this.initial)
+    }, this.storeListeners.forEach((i) => i());
+  }
+  on(e, n) {
+    let i = this.events.get(e);
+    return i || this.events.set(e, i = /* @__PURE__ */ new Set()), i.add(n), () => {
+      i.delete(n);
+    };
+  }
+  emit(e, n) {
+    var i;
+    (i = this.events.get(e)) == null || i.forEach((o) => o(n));
+  }
+  // ── lifecycle ────────────────────────────────────────────────────────────────────────────────
+  /** The loaded image (full resolution) — for renderers. */
+  get image() {
+    return this.loaded;
+  }
+  /** The `open()` options. */
+  get openOptions() {
+    return this.options;
+  }
+  async open(e) {
+    const n = ++this.openToken;
+    this.options = e, this.history = [], this.index = -1, this.initial = null, this.loaded = null, this.patch({
+      status: "loading",
+      error: null,
+      state: null,
+      size: null,
+      ui: { ...this.snapshot.ui, util: e.util ?? "crop" }
+    });
+    try {
+      const i = await On(e.src);
+      if (n !== this.openToken) return;
+      this.loaded = i;
+      const o = { width: i.width, height: i.height }, r = Cn(o, e.cropAspectRatio), a = e.initialState ?? {}, s = {
+        ...r,
+        ...a,
+        crop: { ...r.crop, ...a.crop },
+        finetune: { ...Qe, ...a.finetune },
+        redact: { ...r.redact, ...a.redact }
+      };
+      s.filter && s.filter !== "default" && !s.colorMatrix && (s.colorMatrix = Re[s.filter] ?? null);
+      const _ = Xe(s, o);
+      this.initial = Xe(r, o), this.history = [_t(_)], this.index = 0, this.patch({ status: "ready", state: _, size: o }), this.emit("load", { size: o });
+    } catch (i) {
+      if (n !== this.openToken) return;
+      throw this.patch({ status: "error", error: i }), i;
+    }
+  }
+  close() {
+    var n;
+    this.openToken++;
+    const e = (n = this.loaded) == null ? void 0 : n.image;
+    e && "close" in e && typeof e.close == "function" && e.close(), this.loaded = null, this.emit("close");
+  }
+  // ── state ────────────────────────────────────────────────────────────────────────────────────
+  getState() {
+    if (!this.snapshot.state) throw new Error("No image is open");
+    return _t(this.snapshot.state);
+  }
+  /** Replace part of the state and commit it (one undo step). */
+  setState(e) {
+    this.preview(e), this.commit();
+  }
+  /** Apply a live (uncommitted) change — e.g. while dragging. Call `commit()` when the interaction ends. */
+  preview(e) {
+    const n = this.snapshot.state, i = this.snapshot.size;
+    if (!n || !i) return;
+    const o = { ...n, ...e }, r = this.index >= 0 ? this.history[this.index] : n;
+    "resize" in e && !or(e.resize ?? null, r.resize) || (o.resize = An(r, { ...o, resize: r.resize })), this.patch({ state: o });
+  }
+  /** Push the current state onto the history (if it changed) and emit `update`. */
+  commit() {
+    const e = this.snapshot.state;
+    e && (this.index >= 0 && we(e, this.history[this.index]) || (this.history = this.history.slice(0, this.index + 1), this.history.push(_t(e)), this.history.length > ir && this.history.shift(), this.index = this.history.length - 1, this.patch({}), this.emit("update", _t(e))));
+  }
+  undo() {
+    this.index <= 0 || (this.index--, this.patch({ state: _t(this.history[this.index]) }), this.emit("undo", this.getState()), this.emit("update", this.getState()));
+  }
+  redo() {
+    this.index >= this.history.length - 1 || (this.index++, this.patch({ state: _t(this.history[this.index]) }), this.emit("redo", this.getState()), this.emit("update", this.getState()));
+  }
+  /**
+   * Back to the original image — every edit dropped, including the ones an `initialState` re-opened with.
+   * It's one history step, so Undo brings the edits back.
+   */
+  revert() {
+    const e = this.snapshot.state;
+    !this.initial || !e || we(e, this.initial) || (this.patch({ state: _t(this.initial) }), this.commit(), this.emit("revert", this.getState()));
+  }
+  setUi(e) {
+    e.util && e.util !== this.snapshot.ui.util && this.commit(), this.patch({ ui: { ...this.snapshot.ui, ...e } });
+  }
+  /** Render the current state at full resolution. */
+  async process() {
+    var a, s;
+    const e = this.loaded, n = this.snapshot.state;
+    if (!e || !n) throw new Error("No image is open");
+    const i = Xn((a = this.options) == null ? void 0 : a.outputType, e.type), r = { dest: await nr(
+      e.image,
+      { width: e.width, height: e.height },
+      n,
+      i,
+      ((s = this.options) == null ? void 0 : s.outputQuality) ?? 0.92
+    ), imageState: _t(n) };
+    return this.emit("process", r), r;
+  }
+}
+const _o = () => new dn(), ar = () => typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+function Ve(t, e, n, { stiffness: i = 240, damping: o = 30 } = {}, r) {
+  if (ar() || typeof requestAnimationFrame != "function") {
+    n(e), r == null || r();
+    const S = (() => {
+    });
+    return S.retarget = (y) => n(y), S;
+  }
+  const a = [...e], s = [...t], _ = t.map(() => 0), c = t.map((S, y) => Math.max(1e-5, Math.abs(a[y] - S) * 1e-3));
+  let M = performance.now(), m = 0, k = !1;
+  const f = (S) => {
+    if (k) return;
+    let y = Math.min(0.064, (S - M) / 1e3);
+    for (M = S; y > 0; ) {
+      const l = Math.min(y, 0.008333333333333333);
+      for (let A = 0; A < s.length; A++) {
+        const u = -i * (s[A] - a[A]) - o * _[A];
+        _[A] += u * l, s[A] += _[A] * l;
+      }
+      y -= l;
+    }
+    if (s.every(
+      (l, A) => Math.abs(l - a[A]) < c[A] && Math.abs(_[A]) < c[A] * 10
+    )) {
+      n(a), r == null || r();
+      return;
+    }
+    n([...s]), m = requestAnimationFrame(f);
+  };
+  m = requestAnimationFrame(f);
+  const I = (() => {
+    k = !0, cancelAnimationFrame(m);
+  });
+  return I.retarget = (S) => {
+    for (let y = 0; y < a.length; y++)
+      a[y] = S[y], c[y] = Math.max(c[y], 1e-5);
+  }, I;
+}
+const sr = "_overlay_1kmqm_6", cr = "_editor_1kmqm_11", lr = "_header_1kmqm_61", hr = "_headerStart_1kmqm_70", ur = "_headerCenter_1kmqm_74", dr = "_headerEnd_1kmqm_79", mr = "_group_1kmqm_84", fr = "_zoomLabel_1kmqm_97", pr = "_done_1kmqm_105", gr = "_closeIcon_1kmqm_116", _r = "_groupDivider_1kmqm_120", wr = "_zoomReadout_1kmqm_140", vr = "_main_1kmqm_155", br = "_nav_1kmqm_166", xr = "_stage_1kmqm_167", Mr = "_toolbar_1kmqm_168", yr = "_canvasArea_1kmqm_169", Er = "_footer_1kmqm_170", kr = "_footerInner_1kmqm_171", Tr = "_navList_1kmqm_176", Ir = "_toolbarRow_1kmqm_177", Sr = "_tool_1kmqm_168", Ar = "_toolActive_1kmqm_224", Rr = "_shapeSlot_1kmqm_270", Cr = "_shapePreview_1kmqm_277", Lr = "_shapeCustom_1kmqm_283", Nr = "_shapeOrientation_1kmqm_288", qr = "_orientButton_1kmqm_297", Pr = "_orientActive_1kmqm_320", zr = "_viewport_1kmqm_337", Dr = "_viewportCrop_1kmqm_346", Ur = "_viewportPannable_1kmqm_349", Fr = "_canvas_1kmqm_169", Or = "_scene_1kmqm_362", Xr = "_cropBox_1kmqm_369", Br = "_grid_1kmqm_381", Yr = "_cropInteracting_1kmqm_410", Vr = "_sizeBadge_1kmqm_420", Gr = "_sizeBadgeActive_1kmqm_446", $r = "_sizeTimes_1kmqm_449", jr = "_sizeUnit_1kmqm_450", Wr = "_handle_1kmqm_460", Kr = "_handle_nw_1kmqm_464", Hr = "_handle_ne_1kmqm_465", Qr = "_handle_sw_1kmqm_466", Zr = "_handle_se_1kmqm_467", Jr = "_handle_n_1kmqm_464", ti = "_handle_s_1kmqm_466", ei = "_handle_w_1kmqm_530", ni = "_handle_e_1kmqm_531", ri = "_status_1kmqm_546", ii = "_toastError_1kmqm_557", oi = "_tabs_1kmqm_590", ai = "_tab_1kmqm_590", si = "_tabActive_1kmqm_625", ci = "_tabDot_1kmqm_636", li = "_resizePanel_1kmqm_647", hi = "_resizeFields_1kmqm_653", ui = "_dimField_1kmqm_659", di = "_dimLabel_1kmqm_677", mi = "_dimLabelShort_1kmqm_681", fi = "_dimInput_1kmqm_684", pi = "_dimUnit_1kmqm_700", gi = "_lockButton_1kmqm_705", _i = "_lockActive_1kmqm_722", wi = "_strip_1kmqm_734", vi = "_fadeStart_1kmqm_749", bi = "_fadeEnd_1kmqm_753", xi = "_stripGroup_1kmqm_773", Mi = "_filterTile_1kmqm_778", yi = "_filterThumb_1kmqm_792", Ei = "_filterActive_1kmqm_823", ki = "_filterLabel_1kmqm_833", Ti = "_fadeIn_1kmqm_838", Ii = "_toolbarIconOnPhone_1kmqm_880", Si = "_toolbarLabel_1kmqm_892", Ai = "_dimLabelFull_1kmqm_901", Ri = "_toolLabel_1kmqm_937", w = {
+  overlay: sr,
+  editor: cr,
+  header: lr,
+  headerStart: hr,
+  headerCenter: ur,
+  headerEnd: dr,
+  group: mr,
+  zoomLabel: fr,
+  done: pr,
+  closeIcon: gr,
+  groupDivider: _r,
+  zoomReadout: wr,
+  main: vr,
+  nav: br,
+  stage: xr,
+  toolbar: Mr,
+  canvasArea: yr,
+  footer: Er,
+  footerInner: kr,
+  navList: Tr,
+  toolbarRow: Ir,
+  tool: Sr,
+  toolActive: Ar,
+  shapeSlot: Rr,
+  shapePreview: Cr,
+  shapeCustom: Lr,
+  shapeOrientation: Nr,
+  orientButton: qr,
+  orientActive: Pr,
+  viewport: zr,
+  viewportCrop: Dr,
+  viewportPannable: Ur,
+  canvas: Fr,
+  scene: Or,
+  cropBox: Xr,
+  grid: Br,
+  cropInteracting: Yr,
+  sizeBadge: Vr,
+  "tz-ie-fade": "_tz-ie-fade_1kmqm_1",
+  sizeBadgeActive: Gr,
+  sizeTimes: $r,
+  sizeUnit: jr,
+  handle: Wr,
+  handle_nw: Kr,
+  handle_ne: Hr,
+  handle_sw: Qr,
+  handle_se: Zr,
+  handle_n: Jr,
+  handle_s: ti,
+  handle_w: ei,
+  handle_e: ni,
+  status: ri,
+  toastError: ii,
+  tabs: oi,
+  tab: ai,
+  tabActive: si,
+  tabDot: ci,
+  resizePanel: li,
+  resizeFields: hi,
+  dimField: ui,
+  dimLabel: di,
+  dimLabelShort: mi,
+  dimInput: fi,
+  dimUnit: pi,
+  lockButton: gi,
+  lockActive: _i,
+  strip: wi,
+  fadeStart: vi,
+  fadeEnd: bi,
+  stripGroup: xi,
+  filterTile: Mi,
+  filterThumb: yi,
+  filterActive: Ei,
+  filterLabel: ki,
+  fadeIn: Ti,
+  toolbarIconOnPhone: Ii,
+  toolbarLabel: Si,
+  dimLabelFull: Ai,
+  toolLabel: Ri
+}, Ci = 24, Li = 12, Ge = 4096, Ni = 320, qi = 768, $e = 0.35;
+function Pi(t) {
+  const e = t ? getComputedStyle(t).getPropertyValue("--tz-color-background-rgb") : "", [n, i, o] = e.split(",").map((r) => Number(r.trim()) / 255);
+  return [n, i, o].every((r) => Number.isFinite(r)) ? [n, i, o] : [0, 0, 0];
+}
+const zi = 40, Di = ["nw", "ne", "sw", "se", "n", "s", "w", "e"], Xt = (t) => [t.center[0], t.center[1], Math.log(t.scale), t.rotation, t.flip], Ui = (t) => ({
+  center: [t[0], t[1]],
+  scale: Math.exp(t[2]),
+  rotation: t[3],
+  flip: t[4]
+}), Fi = Ke(function({ core: e, snapshot: n, cropAspectRatio: i, viewZoom: o, onViewZoom: r, onZoomReport: a, areaRef: s }, _) {
+  const { state: c, size: M, ui: m } = n, k = vn(), f = m.util, I = F(null), S = F(null), [y, x] = Q(null), [l, A] = Q(null), u = F(null);
+  u.current = l;
+  const [R, d] = Q([0, 0]), [E, b] = Q(!1), [N, $] = Q(0), G = F(!1), K = F(null), Y = F(null), ct = F(null), Z = F(/* @__PURE__ */ new Map()), dt = F(void 0);
+  j(() => {
+    const g = I.current;
+    if (!g) return;
+    const p = () => {
+      var U;
+      const z = g.getBoundingClientRect(), B = (U = s == null ? void 0 : s.current) == null ? void 0 : U.getBoundingClientRect();
+      x({
+        width: z.width,
+        height: z.height,
+        dpr: window.devicePixelRatio || 1,
+        // horizontally the area is mirrored to the wider side, so the crop sits in the middle of the
+        // screen (not of the space right of the tool menu); vertically it's the space between the bars
+        area: B ? Oi(z, B) : void 0
+      });
+    };
+    if (p(), L.current = p, typeof ResizeObserver > "u") return;
+    const P = new ResizeObserver(p);
+    return P.observe(g), s != null && s.current && P.observe(s.current), () => P.disconnect();
+  }, [s]);
+  const L = F(null);
+  de(() => {
+    var g;
+    (g = L.current) == null || g.call(L);
+  }, [f, n.status]);
+  const q = n.status === "ready" ? e.image : null, [C, V] = Q(null);
+  j(() => {
+    const g = S.current;
+    if (!q || !g) return;
+    const p = le.create(g), P = Math.min(Ge, (p == null ? void 0 : p.maxTextureSize) ?? Ge), z = ne(q.image, q.width, q.height, P), B = Ne * Math.max(q.width, q.height) * (z.width / q.width), U = rn(z.canvas, z.width, z.height, B);
+    return p == null || p.setImage(z.canvas, U), V({ gl: p, tex: z, blur: U }), () => {
+      p == null || p.dispose(!1), V(null);
+    };
+  }, [q]);
+  const H = c && M ? Lt(c).width * c.scale / Yt(c).width : 1, mt = M ? Math.max(1, Math.round(M.width * H)) : 0, lt = (c == null ? void 0 : c.redact.effect) ?? "blur", xt = (c == null ? void 0 : c.redact.amount) ?? 0, [J, rt] = Q(null);
+  j(() => {
+    if (!C || !M) {
+      rt(null);
+      return;
+    }
+    const g = requestAnimationFrame(() => {
+      let p = { ...C.tex, mipmap: !0, pixelate: !1 };
+      mt < p.width && (p = {
+        ...ne(
+          p.canvas,
+          p.width,
+          p.height,
+          Math.max(1, Math.round(Math.max(M.width, M.height) * H))
+        ),
+        mipmap: !0,
+        pixelate: !1
+      });
+      const P = Te({ redact: { effect: lt, amount: xt } }, M);
+      if (P <= 0) return rt(p);
+      const z = P * (p.width / M.width);
+      if (lt === "blur") {
+        const U = sn(p.canvas, p.width, p.height, z, qi);
+        return rt({
+          canvas: U,
+          width: U.width,
+          height: U.height,
+          mipmap: !0,
+          pixelate: !1
+        });
+      }
+      if (!C.gl) {
+        const U = jn(p.canvas, p.width, p.height, z);
+        return rt({
+          canvas: U,
+          width: U.width,
+          height: U.height,
+          mipmap: !1,
+          pixelate: !1
+        });
+      }
+      const B = ne(
+        p.canvas,
+        p.width,
+        p.height,
+        Math.max(p.width, p.height) / Math.max(1, z)
+      );
+      rt({ ...B, mipmap: !1, pixelate: !0 });
+    });
+    return () => cancelAnimationFrame(g);
+  }, [C, mt, lt, xt]), de(() => {
+    C != null && C.gl && J && C.gl.setSource(J.canvas, J.mipmap);
+  }, [C, J]);
+  const tt = mn(() => {
+    if (!c || !y) return null;
+    const g = y.area ?? y;
+    if (f === "crop") {
+      const Dt = Ye(c.crop, g, Math.min(Ci, g.width * 0.06)), Et = M ? Bt(c, M) / c.scale : 1 / c.scale, Ut = Ni / Math.max(c.crop.width, c.crop.height);
+      return { ...Dt, scale: Math.min(Dt.scale, Math.max(Et, Ut)) };
+    }
+    const p = Yt(c), P = Ye(p, g, Li), z = { ...P, scale: Math.min(P.scale, Lt(c).width / p.width) };
+    if (o == null) return z;
+    const B = o / c.scale, U = Math.max(0, p.width / 2 - g.width / 2 / B), it = Math.max(0, p.height / 2 - g.height / 2 / B), ht = Math.max(-U, Math.min(U, R[0])), yt = Math.max(-it, Math.min(it, R[1]));
+    return { ...z, scale: B, center: [z.center[0] + ht, z.center[1] + yt] };
+  }, [c, y, f, o, R, N]), Ht = F(f), It = F(!1), Mt = F({
+    stage: y,
+    state: c
+  }), Pt = (g, p) => {
+    var P;
+    (P = Y.current) == null || P.call(Y), It.current = !0, Y.current = Ve(
+      Xt(g),
+      Xt(p),
+      (z) => A(Ui(z)),
+      void 0,
+      () => {
+        It.current = !1;
+      }
+    );
+  }, [ft, he] = Q(f === "crop" ? $e : 0), Qt = F(ft);
+  Qt.current = ft, j(() => {
+    const g = f === "crop" ? $e : 0;
+    return Ve([Qt.current], [g], ([p]) => he(Math.max(0, p)));
+  }, [f]), de(() => {
+    var it, ht, yt, Dt;
+    if (!tt) return;
+    Ht.current !== f && (Ht.current = f, u.current && !K.current && (K.current = "jump"));
+    const g = y !== Mt.current.stage && c === Mt.current.state, p = (it = Mt.current.state) == null ? void 0 : it.resize, P = f === "resize" && (((ht = c == null ? void 0 : c.resize) == null ? void 0 : ht.width) !== (p == null ? void 0 : p.width) || ((yt = c == null ? void 0 : c.resize) == null ? void 0 : yt.height) !== (p == null ? void 0 : p.height)), z = Mt.current.target, B = !!z && Xt(z).every((Et, Ut) => Math.abs(Et - Xt(tt)[Ut]) < 1e-9);
+    Mt.current = { stage: y, state: c, target: tt };
+    const U = K.current;
+    if (U) {
+      K.current = null;
+      const Et = u.current ?? tt, Ut = U === "rotate" ? { center: tt.center, scale: Et.scale, rotation: Math.PI / 2, flip: 1 } : U === "flip" ? { center: tt.center, scale: Et.scale, rotation: 0, flip: -1 } : Et;
+      Pt(Ut, tt);
+      return;
+    }
+    if ((g || P || B) && It.current && Y.current) {
+      Y.current.retarget(Xt(tt));
+      return;
+    }
+    if (P && u.current && !G.current) {
+      Pt(u.current, tt);
+      return;
+    }
+    G.current || ((Dt = Y.current) == null || Dt.call(Y), Y.current = null, It.current = !1, A(tt));
+  }, [tt]), j(() => () => {
+    var g;
+    return (g = Y.current) == null ? void 0 : g.call(Y);
+  }, []), j(() => {
+    l && c && a(l.scale * c.scale);
+  }, [l, c, a]), j(() => {
+    const g = S.current;
+    if (!g || !y) return;
+    const p = Math.max(1, Math.round(y.width * y.dpr)), P = Math.max(1, Math.round(y.height * y.dpr));
+    g.width !== p && (g.width = p), g.height !== P && (g.height = P);
+  }, [y]), j(() => {
+    if (!C || !J || !c || !M || !l || !y) return;
+    const g = f === "crop" ? c : { ...c, crop: Yt(c) }, p = Kn(g, M, l, y), P = J.pixelate ? Te(c, M) : 0, z = P > 0 ? {
+      pixel: ((U) => [U.cols, U.rows])(
+        an(g.crop, P * c.scale)
+      ),
+      cropToUV: at(Nt(p.toCrop), p.toUV)
+    } : null, B = requestAnimationFrame(() => {
+      const U = {
+        ...Pe(c),
+        ...p,
+        ...z,
+        // the image around the crop: dimmed in the Crop view, gone (faded into the background) in the
+        // others — `surround` springs between the two on a tool switch
+        clip: ft <= 1e-3,
+        dim: ft,
+        dimColor: Pi(I.current)
+      };
+      C.gl ? C.gl.render(U) : S.current && Zn(S.current, J.canvas, J, C.blur, C.blur, U);
+    });
+    return () => cancelAnimationFrame(B);
+  }, [C, J, c, M, l, y, ft, k, f]), fn(_, () => ({
+    transition(g) {
+      K.current = g;
+    }
+  }));
+  const pt = (l == null ? void 0 : l.scale) ?? 1, Zt = F(r);
+  Zt.current = r;
+  const zt = () => {
+    const [g, p] = [...Z.current.values()];
+    return g && p ? Math.hypot(g.x - p.x, g.y - p.y) : 0;
+  }, gt = (g) => {
+    var P, z;
+    if (!c || !M || g.pointerType === "mouse" && g.button !== 0 || g.target.closest("button")) return;
+    if (g.currentTarget.setPointerCapture(g.pointerId), Z.current.set(g.pointerId, { x: g.clientX, y: g.clientY }), (P = Y.current) == null || P.call(Y), Z.current.size === 2) {
+      ct.current = {
+        kind: "pinch",
+        dist: zt(),
+        base: c,
+        zoom: Bt(c, M),
+        viewZoom: ((l == null ? void 0 : l.scale) ?? 1) * c.scale
+      };
+      return;
+    }
+    const p = (z = g.target.closest("[data-handle]")) == null ? void 0 : z.dataset.handle;
+    f === "crop" ? (ct.current = p ? { kind: "resize", id: g.pointerId, x: g.clientX, y: g.clientY, base: c, handle: p } : { kind: "pan", id: g.pointerId, x: g.clientX, y: g.clientY, base: c }, p && (G.current = !0), b(!0)) : o != null && (ct.current = { kind: "viewPan", id: g.pointerId, x: g.clientX, y: g.clientY, pan: R });
+  }, St = (g) => {
+    if (!Z.current.has(g.pointerId) || !M) return;
+    Z.current.set(g.pointerId, { x: g.clientX, y: g.clientY });
+    const p = ct.current;
+    if (!p) return;
+    if (p.kind === "pinch") {
+      const B = zt() / Math.max(1, p.dist);
+      f === "crop" ? e.preview(Gt(p.base, Math.min(Vt, p.zoom * B), M)) : r(ve(p.viewZoom * B));
+      return;
+    }
+    if (p.id !== g.pointerId) return;
+    const P = (g.clientX - p.x) / pt, z = (g.clientY - p.y) / pt;
+    if (p.kind === "pan") e.preview(qn(p.base, -P, -z, M));
+    else if (p.kind === "resize") {
+      const B = p.base.crop, it = i || p.base.cropRatio || g.shiftKey ? B.width / B.height : null;
+      e.preview(
+        zn(p.base, p.handle, P, z, M, {
+          aspectRatio: it,
+          minSize: Math.max(p.base.scale, zi / pt)
+        })
+      );
+    } else p.kind === "viewPan" && d([p.pan[0] - P, p.pan[1] - z]);
+  }, Jt = (g) => {
+    if (!Z.current.has(g.pointerId)) return;
+    Z.current.delete(g.pointerId);
+    const p = ct.current;
+    if (p) {
+      if (p.kind === "pinch") {
+        Z.current.size === 0 && (ct.current = null, f === "crop" && e.commit());
+        return;
+      }
+      p.id === g.pointerId && (ct.current = null, b(!1), p.kind === "resize" ? (G.current = !1, K.current = "jump", e.commit(), $((P) => P + 1)) : p.kind === "pan" && e.commit());
+    }
+  }, h = (g) => {
+    if (!c || !M) return;
+    const p = g.ctrlKey || g.metaKey;
+    if (!(p && T.current)) {
+      if (f === "crop") {
+        const P = Math.exp(-g.deltaY * (p ? 0.01 : 2e-3));
+        e.preview(Gt(c, Math.min(Vt, Bt(c, M) * P), M)), clearTimeout(dt.current), dt.current = setTimeout(() => e.commit(), 250);
+        return;
+      }
+      if (p) {
+        const P = ((l == null ? void 0 : l.scale) ?? 1) * c.scale;
+        r(ve(P * Math.exp(-g.deltaY * 0.01)));
+      } else o != null && d(([P, z]) => [P + g.deltaX / pt, z + g.deltaY / pt]);
+    }
+  };
+  j(() => () => clearTimeout(dt.current), []);
+  const T = F(null), D = F({ state: c, size: M, util: f, view: l });
+  D.current = { state: c, size: M, util: f, view: l }, j(() => {
+    const g = I.current;
+    if (!g) return;
+    const p = (B) => {
+      const { state: U, size: it, view: ht } = D.current;
+      B.preventDefault(), !(!U || !it || Z.current.size > 0) && (T.current = { base: U, zoom: Bt(U, it), viewZoom: ((ht == null ? void 0 : ht.scale) ?? 1) * U.scale });
+    }, P = (B) => {
+      const U = T.current, { size: it, util: ht } = D.current;
+      if (!U || !it) return;
+      B.preventDefault();
+      const yt = B.scale || 1;
+      ht === "crop" ? e.preview(Gt(U.base, Math.min(Vt, U.zoom * yt), it)) : Zt.current(ve(U.viewZoom * yt));
+    }, z = (B) => {
+      T.current && (B.preventDefault(), T.current = null, D.current.util === "crop" && e.commit());
+    };
+    return g.addEventListener("gesturestart", p), g.addEventListener("gesturechange", P), g.addEventListener("gestureend", z), () => {
+      g.removeEventListener("gesturestart", p), g.removeEventListener("gesturechange", P), g.removeEventListener("gestureend", z);
+    };
+  }, [e]);
+  let O = null;
+  if (f === "crop" && c && y && l) {
+    const g = hn({ ...l, rotation: 0, flip: 1 }, y), [p, P] = ie(g, c.crop.x, c.crop.y), [z, B] = ie(
+      g,
+      c.crop.x + c.crop.width,
+      c.crop.y + c.crop.height
+    );
+    O = { left: p, top: P, width: z - p, height: B - P };
+  }
+  const At = l && y ? {
+    transform: `scaleX(${l.flip}) rotate(${l.rotation}rad)`,
+    transformOrigin: ln(y).map((g) => `${g}px`).join(" ")
+  } : void 0;
+  return /* @__PURE__ */ X(
+    "div",
+    {
+      ref: I,
+      className: W(
+        w.viewport,
+        f === "crop" ? w.viewportCrop : o != null && w.viewportPannable
+      ),
+      "data-part": "viewport",
+      onPointerDown: gt,
+      onPointerMove: St,
+      onPointerUp: Jt,
+      onPointerCancel: Jt,
+      onWheel: h,
+      children: [
+        /* @__PURE__ */ v("canvas", { ref: S, className: w.canvas, "data-part": "canvas" }),
+        O && /* @__PURE__ */ v("div", { className: W(w.scene, w.fadeIn), style: At, children: /* @__PURE__ */ X(
+          "div",
+          {
+            className: W(w.cropBox, E && w.cropInteracting),
+            style: O,
+            "data-part": "crop",
+            children: [
+              /* @__PURE__ */ v("span", { className: w.grid, "aria-hidden": "true" }),
+              Di.map((g) => /* @__PURE__ */ v(
+                "span",
+                {
+                  className: W(w.handle, w[`handle_${g}`]),
+                  "data-handle": g,
+                  "aria-hidden": "true"
+                },
+                g
+              ))
+            ]
+          }
+        ) }),
+        O && c && l && l.rotation === 0 && l.flip === 1 && /* @__PURE__ */ X(
+          "div",
+          {
+            className: W(w.sizeBadge, E && w.sizeBadgeActive),
+            style: {
+              left: O.left + O.width / 2,
+              top: O.top + O.height
+            },
+            "data-part": "size",
+            children: [
+              Lt(c).width,
+              /* @__PURE__ */ v("span", { className: w.sizeTimes, children: "×" }),
+              Lt(c).height,
+              /* @__PURE__ */ v("span", { className: w.sizeUnit, children: "px" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+function Oi(t, e) {
+  const n = Math.max(0, e.left - t.left, t.right - e.right);
+  return {
+    x: n,
+    y: e.top - t.top,
+    width: Math.max(1, t.width - n * 2),
+    height: e.height
+  };
+}
+const Ie = 0.02, Se = 8, ve = (t) => Math.min(Se, Math.max(Ie, t)), Xi = [
+  { label: "1:1", ratio: 1 },
+  { label: "2:1", ratio: 2 },
+  { label: "3:2", ratio: 3 / 2 },
+  { label: "4:3", ratio: 4 / 3 },
+  { label: "5:4", ratio: 5 / 4 },
+  { label: "16:10", ratio: 16 / 10 },
+  { label: "16:9", ratio: 16 / 9 }
+], te = (t, e) => Math.abs(t - e) < 1e-3, Bi = (t) => t.split(":").reverse().join(":");
+function je({ ratio: t }) {
+  const n = t == null || t >= 1 ? 16 : Math.max(6, 16 * t), i = t == null || t <= 1 ? 16 : Math.max(6, 16 / t);
+  return /* @__PURE__ */ v("span", { className: w.shapeSlot, children: /* @__PURE__ */ v(
+    "span",
+    {
+      className: W(w.shapePreview, t == null && w.shapeCustom),
+      style: { width: n, height: i }
+    }
+  ) });
+}
+function Yi({ ratio: t, options: e, onChange: n }) {
+  const i = oe(), [o, r] = Q(!1), [a, s] = Q(!1), _ = t != null && !te(t, 1) ? t < 1 : a, c = (m) => {
+    n(m), r(!1);
+  }, M = (m) => {
+    s(m), t != null && !te(t, 1) && t < 1 !== m && n(1 / t);
+  };
+  return /* @__PURE__ */ X(
+    bn,
+    {
+      open: o,
+      onOpenChange: r,
+      closeOnSelect: !1,
+      placement: "bottom-start",
+      size: "sm",
+      trigger: /* @__PURE__ */ v(
+        ye,
+        {
+          variant: "text",
+          color: "primary",
+          size: "sm",
+          startIcon: /* @__PURE__ */ v(et, { name: "MaximizeFormat" }),
+          title: i("imageEditor.cropShape"),
+          "aria-label": i("imageEditor.cropShape"),
+          className: w.toolbarIconOnPhone,
+          children: /* @__PURE__ */ v("span", { className: w.toolbarLabel, children: i("imageEditor.cropShape") })
+        }
+      ),
+      children: [
+        /* @__PURE__ */ v(
+          "div",
+          {
+            className: w.shapeOrientation,
+            role: "group",
+            "aria-label": i("imageEditor.orientation"),
+            children: [!1, !0].map((m) => /* @__PURE__ */ v(
+              "button",
+              {
+                type: "button",
+                className: W(w.orientButton, _ === m && w.orientActive),
+                "aria-pressed": _ === m,
+                "aria-label": i(m ? "imageEditor.portrait" : "imageEditor.landscape"),
+                title: i(m ? "imageEditor.portrait" : "imageEditor.landscape"),
+                onClick: () => M(m),
+                children: /* @__PURE__ */ v(et, { name: m ? "Mobile" : "Monitor", size: "sm" })
+              },
+              String(m)
+            ))
+          }
+        ),
+        /* @__PURE__ */ v(
+          De,
+          {
+            icon: /* @__PURE__ */ v(je, { ratio: null }),
+            clickable: !0,
+            selected: t == null,
+            onClick: () => c(null),
+            children: i("imageEditor.custom")
+          }
+        ),
+        e.map((m) => {
+          const k = _ ? 1 / m.ratio : m.ratio;
+          return /* @__PURE__ */ v(
+            De,
+            {
+              icon: /* @__PURE__ */ v(je, { ratio: k }),
+              clickable: !0,
+              selected: t != null && te(t, k),
+              onClick: () => c(k),
+              children: _ && !te(m.ratio, 1) ? Bi(m.label) : m.label
+            },
+            m.label
+          );
+        })
+      ]
+    }
+  );
+}
+const Vi = 52;
+function Gi(t, e, n) {
+  const i = Math.min(2, typeof window < "u" && window.devicePixelRatio || 1), o = Math.round(Vi * i), r = document.createElement("canvas");
+  r.width = r.height = o;
+  const a = r.getContext("2d", { willReadFrequently: !0 });
+  if (!a) return null;
+  const { crop: s } = n, _ = o / Math.min(s.width, s.height), [c, M] = $t(s), m = at(
+    qe(n, e),
+    st(-c, -M),
+    nt(_),
+    st(o / 2, o / 2)
+  );
+  a.setTransform(m[0], m[3], m[1], m[4], m[2], m[5]), a.imageSmoothingQuality = "high", a.drawImage(t, 0, 0, e.width, e.height), a.setTransform(1, 0, 0, 1, 0, 0);
+  let k;
+  try {
+    k = a.getImageData(0, 0, o, o);
+  } catch {
+    return null;
+  }
+  const f = Ne * Math.max(e.width, e.height) * n.scale * _, I = n.finetune.clarity ? Le(k.data, o, o, f) : null, S = at(
+    st(-o / 2, -o / 2),
+    nt(1 / _),
+    nt(2 / s.width, 2 / s.height)
+  ), y = {};
+  for (const x of Ee.flat()) {
+    const l = new ImageData(new Uint8ClampedArray(k.data), o, o);
+    Ce(l.data, o, o, Pe(n, Re[x]), I, S), a.putImageData(l, 0, 0), y[x] = r.toDataURL();
+  }
+  return y;
+}
+function $i({ image: t, size: e, state: n, onSelect: i }) {
+  var R;
+  const o = oe(), r = F(null), [a, s] = Q({}), [_, c] = Q({ start: !1, end: !1 }), M = n.filter ?? "default", m = F(null);
+  ((R = m.current) == null ? void 0 : R.image) !== t && (m.current = { image: t, source: ne(t, e.width, e.height, 512).canvas });
+  const k = JSON.stringify([
+    n.crop,
+    n.rotation,
+    n.flipX,
+    n.flipY,
+    n.scale,
+    n.finetune
+  ]);
+  j(() => {
+    const d = setTimeout(() => {
+      var N;
+      const E = (N = m.current) == null ? void 0 : N.source;
+      if (!E) return;
+      const b = Gi(E, e, n);
+      b && s(b);
+    }, 120);
+    return () => clearTimeout(d);
+  }, [k, t]);
+  const f = () => {
+    const d = r.current;
+    d && c({
+      start: d.scrollLeft > 2,
+      end: d.scrollLeft + d.clientWidth < d.scrollWidth - 2
+    });
+  };
+  j(() => {
+    f();
+    const d = r.current;
+    if (!d || typeof ResizeObserver > "u") return;
+    const E = new ResizeObserver(f);
+    return E.observe(d), () => E.disconnect();
+  }, []), j(() => {
+    var d, E, b;
+    (b = (E = (d = r.current) == null ? void 0 : d.querySelector(`[data-filter="${M}"]`)) == null ? void 0 : E.scrollIntoView) == null || b.call(E, { block: "nearest", inline: "nearest", behavior: "smooth" });
+  }, [M]), j(() => {
+    const d = r.current;
+    if (!d) return;
+    const E = (b) => {
+      Math.abs(b.deltaY) <= Math.abs(b.deltaX) || (b.preventDefault(), d.scrollLeft += b.deltaY);
+    };
+    return d.addEventListener("wheel", E, { passive: !1 }), () => d.removeEventListener("wheel", E);
+  }, []);
+  const I = F(
+    null
+  ), S = F(0), y = (d) => {
+    if (d.pointerType !== "mouse" || d.button !== 0) return;
+    cancelAnimationFrame(S.current);
+    const E = r.current;
+    I.current = { x: d.clientX, left: E.scrollLeft, v: 0, t: performance.now(), moved: !1 };
+  }, x = (d) => {
+    const E = I.current;
+    if (!E) return;
+    const b = r.current, N = d.clientX - E.x;
+    if (Math.abs(N) > 4 && !E.moved && (E.moved = !0, b.setPointerCapture(d.pointerId)), !E.moved) return;
+    const $ = performance.now(), G = E.left - N;
+    E.v = (b.scrollLeft - G) / Math.max(1, $ - E.t), E.t = $, b.scrollLeft = G;
+  }, l = () => {
+    const d = I.current;
+    if (I.current = null, !(d != null && d.moved)) return;
+    const E = r.current;
+    let b = -d.v, N = performance.now();
+    const $ = (K) => {
+      const Y = K - N;
+      N = K, E.scrollLeft += b * Y, b *= Math.pow(0.995, Y), Math.abs(b) > 0.02 && (S.current = requestAnimationFrame($));
+    };
+    S.current = requestAnimationFrame($);
+    const G = (K) => {
+      K.stopPropagation(), K.preventDefault();
+    };
+    E.addEventListener("click", G, { capture: !0, once: !0 }), setTimeout(() => E.removeEventListener("click", G, { capture: !0 }), 0);
+  };
+  j(() => () => cancelAnimationFrame(S.current), []);
+  const A = Ee.flat(), u = (d) => {
+    var N, $;
+    if (d.key !== "ArrowLeft" && d.key !== "ArrowRight") return;
+    const E = A.indexOf(d.target.dataset.filter);
+    if (E === -1) return;
+    d.preventDefault();
+    const b = A[Math.min(A.length - 1, Math.max(0, E + (d.key === "ArrowRight" ? 1 : -1)))];
+    ($ = (N = r.current) == null ? void 0 : N.querySelector(`[data-filter="${b}"]`)) == null || $.focus();
+  };
+  return /* @__PURE__ */ v(
+    "div",
+    {
+      ref: r,
+      className: W(w.strip, _.start && w.fadeStart, _.end && w.fadeEnd),
+      "data-part": "filters",
+      role: "group",
+      "aria-label": o("imageEditor.filters"),
+      onScroll: f,
+      onPointerDown: y,
+      onPointerMove: x,
+      onPointerUp: l,
+      onPointerCancel: l,
+      onKeyDown: u,
+      children: Ee.map((d, E) => /* @__PURE__ */ v("div", { className: w.stripGroup, children: d.map((b) => /* @__PURE__ */ X(
+        "button",
+        {
+          type: "button",
+          className: W(w.filterTile, b === M && w.filterActive),
+          "data-filter": b,
+          "aria-pressed": b === M,
+          onClick: () => i(b),
+          children: [
+            /* @__PURE__ */ v("span", { className: w.filterThumb, children: a[b] && /* @__PURE__ */ v("img", { src: a[b], alt: "", draggable: !1 }) }),
+            /* @__PURE__ */ v("span", { className: w.filterLabel, children: o(`imageEditor.filter.${b}`) })
+          ]
+        },
+        b
+      )) }, E))
+    }
+  );
+}
+const ji = [1, 0.75, 0.5, 0.25], wt = (t, e) => Math.max(1, Math.min(e, Math.round(t)));
+function Wi({
+  max: t,
+  value: e,
+  locked: n,
+  onLockedChange: i,
+  onInput: o,
+  onChange: r
+}) {
+  const a = oe(), s = e, [_, c] = Q({ w: String(s.width), h: String(s.height) });
+  j(() => {
+    c({ w: String(s.width), h: String(s.height) });
+  }, [s.width, s.height]);
+  const m = Math.round(s.width * t.height / t.width) === s.height || Math.round(s.height * t.width / t.height) === s.width ? t.width / t.height : s.width / s.height, k = F(null), f = k.current ?? m, I = (u, R) => {
+    const d = Number(R);
+    if (!R || !Number.isFinite(d) || d <= 0) return null;
+    if (u === "w") {
+      let N = wt(d, t.width);
+      if (!n) return { width: N, height: s.height };
+      const $ = wt(N / f, t.height);
+      return $ < N / f - 0.5 && (N = wt($ * f, t.width)), { width: N, height: $ };
+    }
+    let E = wt(d, t.height);
+    if (!n) return { width: s.width, height: E };
+    const b = wt(E * f, t.width);
+    return b < E * f - 0.5 && (E = wt(b / f, t.height)), { width: b, height: E };
+  }, S = (u) => u.width === t.width && u.height === t.height ? null : u, y = (u, R) => {
+    const d = R.replace(/[^\d]/g, ""), E = I(u, d);
+    c(
+      (b) => E ? {
+        w: u === "w" ? d : String(E.width),
+        h: u === "h" ? d : String(E.height)
+      } : { ...b, [u]: d }
+    ), E && o(S(E));
+  }, x = () => {
+    const u = Number(_.w), R = Number(_.h);
+    let d = s;
+    u > 0 && R > 0 && (d = n ? I("w", _.w) ?? s : { width: wt(u, t.width), height: wt(R, t.height) }), c({ w: String(d.width), h: String(d.height) }), r(S(d));
+  }, l = (u, R) => {
+    if (u.key === "Enter") {
+      u.preventDefault(), x();
+      return;
+    }
+    if (u.key !== "ArrowUp" && u.key !== "ArrowDown") return;
+    u.preventDefault();
+    const d = (u.shiftKey ? 10 : 1) * (u.key === "ArrowUp" ? 1 : -1), E = R === "w" ? s.width : s.height, b = I(R, String(E + d));
+    b && (c({ w: String(b.width), h: String(b.height) }), r(S(b)));
+  }, A = (u) => s.width === Math.max(1, Math.round(t.width * u)) && s.height === Math.max(1, Math.round(t.height * u));
+  return /* @__PURE__ */ X("div", { className: w.resizePanel, "data-part": "resize", children: [
+    /* @__PURE__ */ X("div", { className: w.resizeFields, children: [
+      /* @__PURE__ */ X("label", { className: w.dimField, children: [
+        /* @__PURE__ */ X("span", { className: w.dimLabel, children: [
+          /* @__PURE__ */ v("span", { className: w.dimLabelFull, children: a("imageEditor.width") }),
+          /* @__PURE__ */ v("span", { className: w.dimLabelShort, "aria-hidden": "true", children: a("imageEditor.width").charAt(0) })
+        ] }),
+        /* @__PURE__ */ v(
+          "input",
+          {
+            className: w.dimInput,
+            inputMode: "numeric",
+            value: _.w,
+            "aria-label": a("imageEditor.width"),
+            onChange: (u) => y("w", u.target.value),
+            onBlur: () => {
+              x(), k.current = null;
+            },
+            onKeyDown: (u) => l(u, "w"),
+            onFocus: (u) => {
+              k.current = m, u.target.select();
+            }
+          }
+        ),
+        /* @__PURE__ */ v("span", { className: w.dimUnit, children: "px" })
+      ] }),
+      /* @__PURE__ */ v(
+        "button",
+        {
+          type: "button",
+          className: W(w.lockButton, n && w.lockActive),
+          "aria-pressed": n,
+          "aria-label": a("imageEditor.lockRatio"),
+          title: a("imageEditor.lockRatio"),
+          onClick: () => i(!n),
+          children: /* @__PURE__ */ v(et, { name: n ? "Unlock" : "LockSlash", size: "sm" })
+        }
+      ),
+      /* @__PURE__ */ X("label", { className: w.dimField, children: [
+        /* @__PURE__ */ X("span", { className: w.dimLabel, children: [
+          /* @__PURE__ */ v("span", { className: w.dimLabelFull, children: a("imageEditor.height") }),
+          /* @__PURE__ */ v("span", { className: w.dimLabelShort, "aria-hidden": "true", children: a("imageEditor.height").charAt(0) })
+        ] }),
+        /* @__PURE__ */ v(
+          "input",
+          {
+            className: w.dimInput,
+            inputMode: "numeric",
+            value: _.h,
+            "aria-label": a("imageEditor.height"),
+            onChange: (u) => y("h", u.target.value),
+            onBlur: () => {
+              x(), k.current = null;
+            },
+            onKeyDown: (u) => l(u, "h"),
+            onFocus: (u) => {
+              k.current = m, u.target.select();
+            }
+          }
+        ),
+        /* @__PURE__ */ v("span", { className: w.dimUnit, children: "px" })
+      ] })
+    ] }),
+    /* @__PURE__ */ v(
+      "div",
+      {
+        className: w.tabs,
+        role: "group",
+        "aria-label": a("imageEditor.resize"),
+        "data-part": "tabs",
+        children: ji.map((u) => /* @__PURE__ */ v(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": A(u),
+            className: W(w.tab, A(u) && w.tabActive),
+            onClick: () => r(
+              S({
+                width: Math.max(1, Math.round(t.width * u)),
+                height: Math.max(1, Math.round(t.height * u))
+              })
+            ),
+            children: u === 1 ? a("imageEditor.original") : `${Math.round(u * 100)}%`
+          },
+          u
+        ))
+      }
+    )
+  ] });
+}
+const Ki = "_ruler_j6c34_4", Hi = "_viewport_j6c34_21", Qi = "_value_j6c34_26", Zi = "_track_j6c34_50", Ji = "_tick_j6c34_57", to = "_major_j6c34_66", eo = "_origin_j6c34_73", no = "_indicator_j6c34_78", vt = {
+  ruler: Ki,
+  viewport: Hi,
+  value: Qi,
+  track: Zi,
+  tick: Ji,
+  major: to,
+  origin: eo,
+  indicator: no
+}, be = 9;
+function ee({
+  min: t,
+  max: e,
+  value: n,
+  step: i = 1,
+  keyStep: o = 1,
+  snapPoints: r = [0],
+  snapThreshold: a = (e - t) * 0.02,
+  tickStep: s = (e - t) / 20,
+  majorEvery: _ = 5,
+  resetValue: c = 0,
+  format: M = (S) => String(Math.round(S)),
+  onInput: m,
+  onChange: k,
+  "aria-label": f,
+  className: I
+}) {
+  const S = be / s, y = F(null), x = F(0), l = F(void 0), A = F(n);
+  A.current = n;
+  const u = F(!1), R = F(k);
+  R.current = k;
+  const d = (L) => {
+    u.current = !1, k(L);
+  };
+  j(
+    () => () => {
+      cancelAnimationFrame(x.current), clearTimeout(l.current), u.current && (u.current = !1, R.current(A.current));
+    },
+    []
+  );
+  const E = (L, q = !0) => {
+    let C = Math.min(e, Math.max(t, L));
+    if (C = Math.round(C / i) * i, q) {
+      for (const V of r)
+        if (Math.abs(C - V) <= a) {
+          C = V;
+          break;
+        }
+    }
+    return Number(C.toFixed(6));
+  }, b = (L) => {
+    L !== A.current && (A.current = L, u.current = !0, m(L));
+  }, N = (L) => {
+    L.button === 0 && (cancelAnimationFrame(x.current), L.currentTarget.setPointerCapture(L.pointerId), y.current = {
+      id: L.pointerId,
+      startX: L.clientX,
+      startValue: n,
+      lastX: L.clientX,
+      lastT: performance.now(),
+      velocity: 0,
+      moved: !1
+    });
+  }, $ = (L) => {
+    const q = y.current;
+    if (!q || q.id !== L.pointerId) return;
+    const C = performance.now(), V = Math.max(1, C - q.lastT);
+    q.velocity = 0.7 * (-(L.clientX - q.lastX) / S / V) + 0.3 * q.velocity, q.lastX = L.clientX, q.lastT = C, Math.abs(L.clientX - q.startX) > 2 && (q.moved = !0), b(E(q.startValue - (L.clientX - q.startX) / S));
+  }, G = (L) => {
+    const q = y.current;
+    if (!q || q.id !== L.pointerId) return;
+    y.current = null;
+    let C = A.current;
+    const V = (e - t) / 1500;
+    let H = performance.now() - q.lastT < 80 ? Math.max(-V, Math.min(V, q.velocity)) : 0;
+    if (!q.moved || Math.abs(H) < V / 20) return d(E(C));
+    let mt = performance.now();
+    const lt = (xt) => {
+      const J = Math.min(32, Math.max(0, xt - mt));
+      mt = xt, C += H * J, H *= Math.pow(0.99, J);
+      const rt = E(C, Math.abs(H) < V / 6);
+      if (b(rt), Math.abs(H) < V / 40 || rt <= t || rt >= e) return d(rt);
+      x.current = requestAnimationFrame(lt);
+    };
+    x.current = requestAnimationFrame(lt);
+  }, K = (L) => {
+    const q = Math.abs(L.deltaX) > Math.abs(L.deltaY) ? L.deltaX : L.deltaY;
+    if (!q) return;
+    const C = E(A.current + q / S / 2);
+    b(C), clearTimeout(l.current), l.current = setTimeout(() => d(A.current), 220);
+  }, Y = (L) => {
+    const q = L.shiftKey ? 10 : 1;
+    let C = null;
+    const V = A.current;
+    if (L.key === "ArrowRight" || L.key === "ArrowUp" ? C = V + o * q : L.key === "ArrowLeft" || L.key === "ArrowDown" ? C = V - o * q : L.key === "Home" ? C = t : L.key === "End" && (C = e), C == null) return;
+    L.preventDefault();
+    const H = E(C, !1);
+    b(H), d(H);
+  }, ct = () => {
+    cancelAnimationFrame(x.current);
+    const L = E(c, !1);
+    b(L), d(L);
+  }, Z = Math.floor((e - t) / s), dt = M(n);
+  return /* @__PURE__ */ X(
+    "div",
+    {
+      role: "slider",
+      tabIndex: 0,
+      "aria-label": f,
+      "aria-valuemin": t,
+      "aria-valuemax": e,
+      "aria-valuenow": n,
+      "aria-valuetext": dt,
+      "aria-orientation": "horizontal",
+      className: W(vt.ruler, I),
+      "data-part": "ruler",
+      onPointerDown: N,
+      onPointerMove: $,
+      onPointerUp: G,
+      onPointerCancel: G,
+      onWheel: K,
+      onKeyDown: Y,
+      onDoubleClick: ct,
+      children: [
+        /* @__PURE__ */ v("span", { className: vt.value, "aria-hidden": "true", children: dt }),
+        /* @__PURE__ */ X("span", { className: vt.viewport, "aria-hidden": "true", children: [
+          /* @__PURE__ */ v(
+            "span",
+            {
+              className: vt.track,
+              style: {
+                width: Z * be,
+                transform: `translateX(${-(n - t) * S}px)`
+              },
+              children: Array.from({ length: Z + 1 }, (L, q) => {
+                const C = t + q * s;
+                return /* @__PURE__ */ v(
+                  "span",
+                  {
+                    className: W(
+                      vt.tick,
+                      q % _ === 0 && vt.major,
+                      Math.abs(C - c) < 1e-9 && vt.origin
+                    ),
+                    style: { left: q * be }
+                  },
+                  q
+                );
+              })
+            }
+          ),
+          /* @__PURE__ */ v("span", { className: vt.indicator })
+        ] })
+      ]
+    }
+  );
+}
+const Tt = [
+  { id: "crop", icon: "Crop" },
+  { id: "filter", icon: "Colorfilter" },
+  { id: "finetune", icon: "Brush" },
+  { id: "redact", icon: "Blur" },
+  { id: "resize", icon: "Maximize3" }
+], ro = ["blur", "pixelate"], We = [0.05, 0.1, 0.15, 0.2, 0.25, 0.33, 0.5, 0.67, 0.75, 1, 1.5, 2, 3, 4, 6, 8], io = 'a[href]:not([tabindex="-1"]), button:not(:disabled):not([tabindex="-1"]), input:not(:disabled):not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])', xe = Math.PI / 180, wo = Ke(function({
+  open: e,
+  src: n,
+  initialState: i,
+  util: o = "crop",
+  cropAspectRatio: r,
+  cropRatioOptions: a,
+  outputType: s,
+  outputQuality: _,
+  onLoad: c,
+  onUpdate: M,
+  onProcess: m,
+  onClose: k,
+  className: f,
+  onKeyDown: I,
+  ...S
+}, y) {
+  const x = oe(), [l] = Q(() => new dn()), A = pn(l.subscribe, l.getSnapshot, l.getSnapshot), { state: u, size: R, ui: d, status: E } = A, b = F(null), N = F(null), $ = F(null), [G, K] = Q(null), [Y, ct] = Q(1), [Z, dt] = Q(!1), [L, q] = Q(!1), C = F(0), V = F(null), H = F(null), mt = F(null);
+  d.util !== "resize" || !u ? H.current = null : (!H.current || u !== mt.current && u !== H.current) && (H.current = u);
+  const lt = F({ onLoad: c, onUpdate: M });
+  lt.current = { onLoad: c, onUpdate: M }, j(() => {
+    const h = [
+      l.on(
+        "load",
+        (T) => {
+          var D, O;
+          return (O = (D = lt.current).onLoad) == null ? void 0 : O.call(D, T.size);
+        }
+      ),
+      l.on("update", (T) => {
+        var D, O;
+        return (O = (D = lt.current).onUpdate) == null ? void 0 : O.call(D, T);
+      }),
+      // a rotation drag's base is stale once history moves under it
+      ...["undo", "redo", "revert"].map(
+        (T) => l.on(T, () => {
+          V.current = null;
+        })
+      )
+    ];
+    return () => h.forEach((T) => T());
+  }, [l]), j(() => {
+    if (!(!e || !n))
+      return K(null), q(!1), l.open({ src: n, initialState: i, util: o, cropAspectRatio: r, outputType: s, outputQuality: _ }).then(() => {
+        const h = l.getSnapshot().state;
+        h && (C.current = _e(h.rotation).quarter);
+      }).catch(() => {
+      }), () => l.close();
+  }, [e, n, l]), j(() => {
+    if (!e) return;
+    const h = (O) => {
+      (O.ctrlKey || O.metaKey) && O.preventDefault();
+    }, T = (O) => O.preventDefault(), D = ["gesturestart", "gesturechange", "gestureend"];
+    return window.addEventListener("wheel", h, { passive: !1 }), D.forEach((O) => document.addEventListener(O, T)), () => {
+      window.removeEventListener("wheel", h), D.forEach((O) => document.removeEventListener(O, T));
+    };
+  }, [e]), j(() => {
+    if (!e) return;
+    const h = document.activeElement, T = requestAnimationFrame(() => {
+      var D;
+      return (D = N.current) == null ? void 0 : D.focus();
+    });
+    return () => {
+      var D;
+      cancelAnimationFrame(T), (D = h == null ? void 0 : h.focus) == null || D.call(h);
+    };
+  }, [e]);
+  const xt = (h) => {
+    N.current = h, typeof y == "function" ? y(h) : y && (y.current = h);
+  }, J = () => {
+    const h = l.getSnapshot().state;
+    h && (C.current = _e(h.rotation).quarter);
+  }, rt = () => {
+    var h;
+    (h = b.current) == null || h.transition("jump"), l.undo(), J();
+  }, tt = () => {
+    var h;
+    (h = b.current) == null || h.transition("jump"), l.redo(), J();
+  }, Ht = () => {
+    var h;
+    (h = b.current) == null || h.transition("jump"), l.revert(), J();
+  }, It = () => {
+    var h;
+    !u || !R || ((h = b.current) == null || h.transition("rotate"), C.current = ke(C.current - Math.PI / 2), l.setState(Ln(u, R)));
+  }, Mt = () => {
+    var h;
+    !u || !R || ((h = b.current) == null || h.transition("flip"), C.current = ke(-C.current), l.setState(Nn(u, R)));
+  }, Pt = gn(() => k(), [k]), ft = () => {
+    Z || Pt();
+  }, he = async () => {
+    if (!(!u || Z)) {
+      dt(!0), q(!1);
+      try {
+        const h = await l.process();
+        m == null || m(h), Pt();
+      } catch {
+        q(!0);
+      } finally {
+        dt(!1);
+      }
+    }
+  }, Qt = (h) => {
+    if (I == null || I(h), h.defaultPrevented) return;
+    const T = h.metaKey || h.ctrlKey;
+    if (T && h.key.toLowerCase() === "z") {
+      h.preventDefault(), h.shiftKey ? tt() : rt();
+      return;
+    }
+    if (T && h.key.toLowerCase() === "y") {
+      h.preventDefault(), tt();
+      return;
+    }
+    if (h.key !== "Tab" || !N.current) return;
+    const D = [...N.current.querySelectorAll(io)].filter(
+      (g) => g.offsetParent !== null
+    );
+    if (D.length === 0) return;
+    const O = D[0], At = D[D.length - 1];
+    h.shiftKey && (document.activeElement === O || document.activeElement === N.current) ? (h.preventDefault(), At.focus()) : !h.shiftKey && document.activeElement === At && (h.preventDefault(), O.focus());
+  }, pt = (h) => {
+    const T = Y, D = h > 0 ? We.find((O) => O > T * 1.01) ?? Se : [...We].reverse().find((O) => O < T * 0.99) ?? Ie;
+    K(D);
+  }, Zt = u ? _e(u.rotation, C.current).fine / xe : 0, zt = (h) => {
+    const T = H.current ?? l.getSnapshot().state;
+    T && (l.preview(Sn(T, h)), mt.current = l.getSnapshot().state);
+  };
+  let gt = null;
+  if (u && R) {
+    if (d.util === "crop")
+      gt = /* @__PURE__ */ X(ue, { children: [
+        d.cropTab === "rotation" ? /* @__PURE__ */ v(
+          ee,
+          {
+            "aria-label": x("imageEditor.rotation"),
+            min: -45,
+            max: 45,
+            step: 0.1,
+            tickStep: 1,
+            majorEvery: 5,
+            snapThreshold: 0.6,
+            value: Number(Zt.toFixed(1)),
+            format: (h) => `${Number(h.toFixed(1))}°`,
+            onInput: (h) => {
+              const T = l.getSnapshot().state;
+              T && (V.current ?? (V.current = T), l.preview(Fe(V.current, C.current + h * xe, R)));
+            },
+            onChange: (h) => {
+              const T = V.current ?? l.getSnapshot().state;
+              V.current = null, T && (l.preview(Fe(T, C.current + h * xe, R)), l.commit());
+            }
+          },
+          "rotation"
+        ) : /* @__PURE__ */ v(
+          ee,
+          {
+            "aria-label": x("imageEditor.scale"),
+            min: 100,
+            max: Vt * 100,
+            step: 1,
+            tickStep: 10,
+            majorEvery: 5,
+            snapPoints: [100],
+            snapThreshold: 4,
+            resetValue: 100,
+            value: Math.round(Bt(u, R) * 100),
+            format: (h) => `${Math.round(h)}%`,
+            onInput: (h) => {
+              const T = l.getSnapshot().state;
+              T && l.preview(Gt(T, h / 100, R));
+            },
+            onChange: (h) => {
+              const T = l.getSnapshot().state;
+              T && (l.preview(Gt(T, h / 100, R)), l.commit());
+            }
+          },
+          "scale"
+        ),
+        /* @__PURE__ */ v(
+          Me,
+          {
+            label: x("imageEditor.crop"),
+            value: d.cropTab,
+            options: [
+              { id: "rotation", label: x("imageEditor.rotation") },
+              { id: "scale", label: x("imageEditor.scale") }
+            ],
+            onChange: (h) => l.setUi({ cropTab: h })
+          }
+        )
+      ] });
+    else if (d.util === "filter" && l.image)
+      gt = /* @__PURE__ */ v(
+        $i,
+        {
+          image: l.image.image,
+          size: R,
+          state: u,
+          onSelect: (h) => l.setState({
+            filter: h === "default" ? null : h,
+            colorMatrix: Re[h]
+          })
+        }
+      );
+    else if (d.util === "resize")
+      gt = /* @__PURE__ */ v(
+        Wi,
+        {
+          max: qt(H.current ?? u),
+          value: Lt(u),
+          locked: d.resizeLocked,
+          onLockedChange: (h) => l.setUi({ resizeLocked: h }),
+          onInput: zt,
+          onChange: (h) => {
+            zt(h), l.commit();
+          }
+        }
+      );
+    else if (d.util === "redact") {
+      const h = u.redact;
+      gt = /* @__PURE__ */ X(ue, { children: [
+        /* @__PURE__ */ v(
+          ee,
+          {
+            "aria-label": x(`imageEditor.redact.${h.effect}`),
+            min: 0,
+            max: 100,
+            step: 1,
+            tickStep: 2.5,
+            majorEvery: 4,
+            snapThreshold: 0,
+            value: h.amount,
+            format: (T) => String(Math.round(T)),
+            onInput: (T) => l.preview({ redact: { ...h, amount: T } }),
+            onChange: (T) => {
+              l.preview({ redact: { ...h, amount: T } }), l.commit();
+            }
+          },
+          h.effect
+        ),
+        /* @__PURE__ */ v(
+          Me,
+          {
+            label: x("imageEditor.redact"),
+            value: h.effect,
+            options: ro.map((T) => ({
+              id: T,
+              label: x(`imageEditor.redact.${T}`)
+            })),
+            onChange: (T) => l.setState({ redact: { ...h, effect: T } })
+          }
+        )
+      ] });
+    } else if (d.util === "finetune") {
+      const h = d.finetuneTab;
+      gt = /* @__PURE__ */ X(ue, { children: [
+        /* @__PURE__ */ v(
+          ee,
+          {
+            "aria-label": x(`imageEditor.finetune.${h}`),
+            min: -100,
+            max: 100,
+            step: 1,
+            tickStep: 5,
+            majorEvery: 4,
+            snapThreshold: 3,
+            value: u.finetune[h],
+            format: (T) => String(Math.round(T)),
+            onInput: (T) => {
+              const D = l.getSnapshot().state;
+              D && l.preview({ finetune: { ...D.finetune, [h]: T } });
+            },
+            onChange: (T) => {
+              const D = l.getSnapshot().state;
+              D && (l.preview({ finetune: { ...D.finetune, [h]: T } }), l.commit());
+            }
+          },
+          h
+        ),
+        /* @__PURE__ */ v(
+          Me,
+          {
+            label: x("imageEditor.finetune"),
+            value: h,
+            options: yn.map((T) => ({
+              id: T,
+              label: x(`imageEditor.finetune.${T}`),
+              dot: u.finetune[T] !== 0
+            })),
+            onChange: (T) => l.setUi({ finetuneTab: T })
+          }
+        )
+      ] });
+    }
+  }
+  const St = E === "ready" && !!u, Jt = St && d.util !== "crop";
+  return /* @__PURE__ */ v(
+    wn,
+    {
+      open: e,
+      onClose: ft,
+      closeOnBackdrop: !1,
+      dim: 0,
+      className: w.overlay,
+      children: /* @__PURE__ */ X(
+        "div",
+        {
+          ref: xt,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": x("imageEditor.title"),
+          tabIndex: -1,
+          className: W(w.editor, f),
+          "data-part": "editor",
+          onKeyDown: Qt,
+          ...S,
+          children: [
+            /* @__PURE__ */ v(
+              Fi,
+              {
+                ref: b,
+                core: l,
+                snapshot: A,
+                cropAspectRatio: r,
+                viewZoom: d.util === "crop" ? null : G,
+                onViewZoom: K,
+                onZoomReport: ct,
+                areaRef: $
+              }
+            ),
+            /* @__PURE__ */ X("header", { className: w.header, "data-part": "header", children: [
+              /* @__PURE__ */ v("div", { className: w.headerStart, children: /* @__PURE__ */ X("div", { className: w.group, children: [
+                /* @__PURE__ */ v(
+                  kt,
+                  {
+                    variant: "text",
+                    color: "primary",
+                    size: "sm",
+                    "aria-label": x("imageEditor.close"),
+                    title: x("imageEditor.close"),
+                    onClick: ft,
+                    children: /* @__PURE__ */ v(et, { name: "Close", className: w.closeIcon })
+                  }
+                ),
+                /* @__PURE__ */ v("span", { className: w.groupDivider, "aria-hidden": "true" }),
+                /* @__PURE__ */ v(
+                  kt,
+                  {
+                    variant: "text",
+                    color: "primary",
+                    size: "sm",
+                    "aria-label": x("imageEditor.revert"),
+                    title: x("imageEditor.revert"),
+                    disabled: !A.canRevert,
+                    onClick: Ht,
+                    children: /* @__PURE__ */ v(et, { name: "ReverseTimeArrow" })
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ X("div", { className: w.headerCenter, children: [
+                /* @__PURE__ */ X("div", { className: w.group, children: [
+                  /* @__PURE__ */ v(
+                    kt,
+                    {
+                      variant: "text",
+                      color: "primary",
+                      size: "sm",
+                      "aria-label": x("imageEditor.undo"),
+                      title: x("imageEditor.undo"),
+                      disabled: !A.canUndo,
+                      onClick: rt,
+                      children: /* @__PURE__ */ v(et, { name: "UndoArrow" })
+                    }
+                  ),
+                  /* @__PURE__ */ v("span", { className: w.groupDivider, "aria-hidden": "true" }),
+                  /* @__PURE__ */ v(
+                    kt,
+                    {
+                      variant: "text",
+                      color: "primary",
+                      size: "sm",
+                      "aria-label": x("imageEditor.redo"),
+                      title: x("imageEditor.redo"),
+                      disabled: !A.canRedo,
+                      onClick: tt,
+                      children: /* @__PURE__ */ v(et, { name: "RedoArrow" })
+                    }
+                  )
+                ] }),
+                St && d.util === "crop" && /* @__PURE__ */ v("div", { className: W(w.group, w.fadeIn), children: /* @__PURE__ */ X(
+                  "span",
+                  {
+                    className: W(w.zoomLabel, w.zoomReadout),
+                    role: "status",
+                    "aria-label": x("imageEditor.zoom"),
+                    children: [
+                      Math.round(Y * 100),
+                      "%"
+                    ]
+                  }
+                ) }),
+                Jt && /* @__PURE__ */ X("div", { className: W(w.group, w.fadeIn), children: [
+                  /* @__PURE__ */ v(
+                    kt,
+                    {
+                      variant: "text",
+                      color: "primary",
+                      size: "sm",
+                      "aria-label": x("imageEditor.zoomOut"),
+                      title: x("imageEditor.zoomOut"),
+                      disabled: Y <= Ie * 1.01,
+                      onClick: () => pt(-1),
+                      children: /* @__PURE__ */ v(et, { name: "Minus" })
+                    }
+                  ),
+                  /* @__PURE__ */ v("span", { className: w.groupDivider, "aria-hidden": "true" }),
+                  /* @__PURE__ */ X(
+                    "button",
+                    {
+                      type: "button",
+                      className: w.zoomLabel,
+                      "aria-label": x("imageEditor.zoom"),
+                      title: x("imageEditor.zoomFit"),
+                      onClick: () => K(null),
+                      children: [
+                        Math.round(Y * 100),
+                        "%"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ v("span", { className: w.groupDivider, "aria-hidden": "true" }),
+                  /* @__PURE__ */ v(
+                    kt,
+                    {
+                      variant: "text",
+                      color: "primary",
+                      size: "sm",
+                      "aria-label": x("imageEditor.zoomIn"),
+                      title: x("imageEditor.zoomIn"),
+                      disabled: Y >= Se * 0.99,
+                      onClick: () => pt(1),
+                      children: /* @__PURE__ */ v(et, { name: "Add" })
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ v("div", { className: w.headerEnd, children: /* @__PURE__ */ v(
+                kt,
+                {
+                  variant: "contained",
+                  color: "accent",
+                  size: "sm",
+                  loading: Z,
+                  disabled: !St,
+                  "aria-label": x("imageEditor.done"),
+                  title: x("imageEditor.done"),
+                  onClick: he,
+                  className: w.done,
+                  children: /* @__PURE__ */ v(et, { name: "CheckMarkTick" })
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ X("div", { className: w.main, "data-part": "main", children: [
+              /* @__PURE__ */ v("nav", { className: w.nav, "data-part": "nav", children: /* @__PURE__ */ v(
+                "div",
+                {
+                  role: "tablist",
+                  "aria-label": x("imageEditor.tools"),
+                  "aria-orientation": "vertical",
+                  className: w.navList,
+                  onKeyDown: (h) => {
+                    var O;
+                    const T = Tt.findIndex((At) => At.id === d.util), D = h.key === "ArrowDown" || h.key === "ArrowRight" ? Tt[(T + 1) % Tt.length] : h.key === "ArrowUp" || h.key === "ArrowLeft" ? Tt[(T + Tt.length - 1) % Tt.length] : null;
+                    D && (h.preventDefault(), l.setUi({ util: D.id }), (O = h.currentTarget.querySelector(`[data-util="${D.id}"]`)) == null || O.focus());
+                  },
+                  children: Tt.map((h) => {
+                    const T = d.util === h.id;
+                    return /* @__PURE__ */ X(
+                      "button",
+                      {
+                        type: "button",
+                        role: "tab",
+                        id: `tz-ie-tab-${h.id}`,
+                        "aria-selected": T,
+                        "aria-controls": "tz-ie-panel",
+                        tabIndex: T ? 0 : -1,
+                        title: x(`imageEditor.${h.id}`),
+                        className: W(w.tool, T && w.toolActive),
+                        "data-util": h.id,
+                        onClick: () => l.setUi({ util: h.id }),
+                        children: [
+                          /* @__PURE__ */ v(et, { name: h.icon, size: "sm" }),
+                          /* @__PURE__ */ v("span", { className: w.toolLabel, children: x(`imageEditor.${h.id}`) })
+                        ]
+                      },
+                      h.id
+                    );
+                  })
+                }
+              ) }),
+              /* @__PURE__ */ X(
+                "section",
+                {
+                  className: w.stage,
+                  id: "tz-ie-panel",
+                  role: "tabpanel",
+                  "aria-labelledby": `tz-ie-tab-${d.util}`,
+                  "data-part": "stage",
+                  "data-util": d.util,
+                  children: [
+                    /* @__PURE__ */ v("div", { className: w.toolbar, "data-part": "toolbar", children: St && d.util === "crop" && /* @__PURE__ */ X("div", { className: W(w.toolbarRow, w.fadeIn), children: [
+                      /* @__PURE__ */ v(
+                        ye,
+                        {
+                          variant: "text",
+                          color: "primary",
+                          size: "sm",
+                          startIcon: /* @__PURE__ */ v(et, { name: "RotateLeft" }),
+                          title: x("imageEditor.rotateLeft"),
+                          "aria-label": x("imageEditor.rotateLeft"),
+                          onClick: It,
+                          className: w.toolbarIconOnPhone,
+                          children: /* @__PURE__ */ v("span", { className: w.toolbarLabel, children: x("imageEditor.rotateLeft") })
+                        }
+                      ),
+                      /* @__PURE__ */ v(
+                        ye,
+                        {
+                          variant: "text",
+                          color: "primary",
+                          size: "sm",
+                          startIcon: /* @__PURE__ */ v(et, { name: "FlipHorizontal" }),
+                          title: x("imageEditor.flipHorizontal"),
+                          "aria-label": x("imageEditor.flipHorizontal"),
+                          onClick: Mt,
+                          className: w.toolbarIconOnPhone,
+                          children: /* @__PURE__ */ v("span", { className: w.toolbarLabel, children: x("imageEditor.flipHorizontal") })
+                        }
+                      ),
+                      !r && u && /* @__PURE__ */ v(
+                        Yi,
+                        {
+                          ratio: u.cropRatio,
+                          options: a ?? Xi,
+                          onChange: (h) => {
+                            var D;
+                            const T = l.getSnapshot().state;
+                            !T || !R || ((D = b.current) == null || D.transition("jump"), l.setState(Pn(T, h, R)));
+                          }
+                        }
+                      )
+                    ] }, "crop-toolbar") }),
+                    /* @__PURE__ */ X("div", { ref: $, className: w.canvasArea, "data-part": "area", children: [
+                      E === "loading" && /* @__PURE__ */ X("div", { className: w.status, role: "status", children: [
+                        /* @__PURE__ */ v(_n, { size: "lg" }),
+                        /* @__PURE__ */ v("span", { children: x("imageEditor.loading") })
+                      ] }),
+                      E === "error" && /* @__PURE__ */ X("div", { className: w.status, role: "alert", children: [
+                        /* @__PURE__ */ v(et, { name: "Gallery", size: "lg" }),
+                        /* @__PURE__ */ v("span", { children: x("imageEditor.loadError") })
+                      ] }),
+                      L && /* @__PURE__ */ v("div", { className: w.toastError, role: "alert", children: x("imageEditor.processError") })
+                    ] }),
+                    /* @__PURE__ */ v("div", { className: w.footer, "data-part": "footer", children: /* @__PURE__ */ v("div", { className: W(w.footerInner, w.fadeIn), children: gt }, d.util) })
+                  ]
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+});
+function Me({
+  label: t,
+  value: e,
+  options: n,
+  onChange: i
+}) {
+  const o = F(null);
+  return j(() => {
+    var r, a, s;
+    (s = (a = (r = o.current) == null ? void 0 : r.querySelector(`[data-tab="${e}"]`)) == null ? void 0 : a.scrollIntoView) == null || s.call(a, { block: "nearest", inline: "nearest", behavior: "smooth" });
+  }, [e]), /* @__PURE__ */ v(
+    "div",
+    {
+      ref: o,
+      role: "tablist",
+      "aria-label": t,
+      className: w.tabs,
+      "data-part": "tabs",
+      onKeyDown: (r) => {
+        var c;
+        const a = n.findIndex((M) => M.id === e), s = r.key === "ArrowRight" ? 1 : r.key === "ArrowLeft" ? -1 : 0;
+        if (!s) return;
+        r.preventDefault();
+        const _ = n[(a + s + n.length) % n.length];
+        i(_.id), (c = r.currentTarget.querySelector(`[data-tab="${_.id}"]`)) == null || c.focus();
+      },
+      children: n.map((r) => /* @__PURE__ */ X(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "aria-selected": r.id === e,
+          tabIndex: r.id === e ? 0 : -1,
+          className: W(w.tab, r.id === e && w.tabActive),
+          "data-tab": r.id,
+          onClick: () => i(r.id),
+          children: [
+            r.label,
+            r.dot && /* @__PURE__ */ v("span", { className: w.tabDot, "aria-hidden": "true" })
+          ]
+        },
+        r.id
+      ))
+    }
+  );
+}
+export {
+  Re as F,
+  wo as I,
+  dn as a,
+  _o as c
+};
+//# sourceMappingURL=ImageEditor-BwrG1fk7.js.map