@michaelyagi/kiri 0.1.0-alpha.2 → 0.1.0-alpha.4

package/dist/kiri.mjs

@@ -1,14 +1,14 @@
-var T = Object.defineProperty;
-var U = (i, t, e) => t in i ? T(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
-var p = (i, t, e) => U(i, typeof t != "symbol" ? t + "" : t, e);
-const L = {
+var K = Object.defineProperty;
+var X = (i, t, e) => t in i ? K(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
+var d = (i, t, e) => X(i, typeof t != "symbol" ? t + "" : t, e);
+const A = {
   brightness: 1,
   contrast: 1,
   saturation: 1,
   grayscale: !1,
   sepia: !1
 };
-function M(i, t) {
+function I(i, t) {
   return {
     brightness: Math.max(0, t.brightness ?? i.brightness),
     contrast: Math.max(0, t.contrast ?? i.contrast),
@@ -17,7 +17,7 @@ function M(i, t) {
     sepia: t.sepia ?? i.sepia
   };
 }
-function C(i) {
+function $(i) {
   const t = [
     `brightness(${i.brightness})`,
     `contrast(${i.contrast})`,
@@ -25,148 +25,180 @@ function C(i) {
   ];
   return i.grayscale && t.push("grayscale(1)"), i.sepia && t.push("sepia(1)"), t.join(" ");
 }
-function $(i, t, e, s, o) {
+function j(i, t, e, o, s) {
   i.innerHTML = "";
   const n = document.createElement("div");
-  n.className = "kiri-stage";
-  const r = document.createElement("div");
-  r.className = "kiri-image-layer";
+  n.className = "kiri-stage", n.tabIndex = 0, n.setAttribute("role", "application"), n.setAttribute(
+    "aria-label",
+    "Image cropper. Drag to pan. Arrow keys to pan, plus/minus to zoom, 0 to reset."
+  );
+  const l = document.createElement("div");
+  l.className = "kiri-image-layer";
   const c = document.createElement("img");
-  c.draggable = !1, r.appendChild(c);
-  const d = document.createElement("div");
-  d.className = t === "circle" ? "kiri-frame kiri-frame--circle" : "kiri-frame", H(d, e, s), n.appendChild(r), n.appendChild(d);
+  c.draggable = !1, l.appendChild(c);
+  const m = document.createElement("div");
+  m.className = t === "circle" ? "kiri-frame kiri-frame--circle" : "kiri-frame", k(m, e, o), n.appendChild(l), n.appendChild(m);
   let h = null;
-  if (o.show) {
-    const m = document.createElement("div");
-    m.className = `kiri-root kiri-root--${o.position}`, h = document.createElement("input"), h.type = "range", h.className = "kiri-zoomer", h.min = String(o.min), h.max = String(o.max), h.step = "0.01", h.value = String(o.value), m.appendChild(n), m.appendChild(h), i.appendChild(m);
+  if (s.show) {
+    const f = document.createElement("div");
+    f.className = `kiri-root kiri-root--${s.position}`, h = document.createElement("input"), h.type = "range", h.className = "kiri-zoomer", h.min = String(s.min), h.max = String(s.max), h.step = "0.01", h.value = String(s.value), f.appendChild(n), f.appendChild(h), i.appendChild(f);
   } else
     i.appendChild(n);
-  return { stageEl: n, frameEl: d, imageLayerEl: r, imgEl: c, zoomerEl: h };
+  return { stageEl: n, frameEl: m, imageLayerEl: l, imgEl: c, zoomerEl: h };
 }
-function H(i, t, e) {
+function k(i, t, e) {
   i.style.width = `${t}px`, i.style.height = `${e}px`;
 }
-const F = 20;
-function R(i, t, e) {
+const C = 20;
+function V(i, t, e) {
   i.style.width = `${t}px`, i.style.height = `${e}px`;
 }
-function N(i, t, e) {
-  const s = e * (t.flip.horizontal ? -1 : 1), o = e * (t.flip.vertical ? -1 : 1);
-  i.style.transform = `translate(-50%, -50%) translate(${t.offset.x}px, ${t.offset.y}px) rotate(${t.rotation}deg) scale(${s}, ${o})`;
+function W(i, t, e) {
+  const o = e * (t.flip.horizontal ? -1 : 1), s = e * (t.flip.vertical ? -1 : 1);
+  i.style.transform = `translate(-50%, -50%) translate(${t.offset.x}px, ${t.offset.y}px) rotate(${t.rotation}deg) scale(${o}, ${s})`;
 }
-function Z(i, t) {
-  i.style.filter = C(t);
+function R(i, t) {
+  i.style.filter = $(t);
 }
-function D(i, t) {
+function N(i, t) {
   return (t / 90 % 2 + 2) % 2 === 1 ? { width: i.height, height: i.width } : { width: i.width, height: i.height };
 }
-function b(i, t, e) {
-  const s = D(i, e);
-  return s.width <= 0 || s.height <= 0 ? 1 : Math.max(t.width / s.width, t.height / s.height);
+function O(i, t, e) {
+  const o = N(i, e);
+  return o.width <= 0 || o.height <= 0 ? 1 : Math.max(t.width / o.width, t.height / o.height);
 }
-function z(i, t, e, s) {
-  const o = D(i, e), n = b(i, t, e) * s;
-  return { width: o.width * n, height: o.height * n };
+function S(i, t, e, o) {
+  const s = N(i, e), n = O(i, t, e) * o;
+  return { width: s.width * n, height: s.height * n };
 }
-function E(i, t, e) {
+function P(i, t, e) {
   return Math.min(Math.max(i, t), e);
 }
-function w(i, t, e) {
-  const s = Math.max(0, (t.width - e.width) / 2), o = Math.max(0, (t.height - e.height) / 2);
+function x(i, t, e) {
+  const o = Math.max(0, (t.width - e.width) / 2), s = Math.max(0, (t.height - e.height) / 2);
   return {
-    x: Math.min(Math.max(i.x, -s), s) || 0,
-    y: Math.min(Math.max(i.y, -o), o) || 0
+    x: Math.min(Math.max(i.x, -o), o) || 0,
+    y: Math.min(Math.max(i.y, -s), s) || 0
   };
 }
-function S(i) {
+function b(i) {
   return (i % 360 + 360) % 360;
 }
-function I(i, t) {
+const F = 15, T = 0.1;
+function H(i, t) {
   return Math.hypot(i.clientX - t.clientX, i.clientY - t.clientY);
 }
-function _(i, t, e) {
-  const s = /* @__PURE__ */ new Map();
-  let o = null, n = 0, r = 1;
-  function c(a) {
-    const { min: l, max: f } = t.getMinMaxZoom(), g = E(a.zoom, l, f), v = z(
+function B(i, t, e) {
+  const o = /* @__PURE__ */ new Map();
+  let s = null, n = 0, l = 1;
+  function c(r) {
+    const { min: a, max: g } = t.getMinMaxZoom(), w = P(r.zoom, a, g), z = S(
       t.getNaturalSize(),
       t.getFrameSize(),
-      a.rotation,
-      g
-    ), x = w(a.offset, v, t.getFrameSize());
+      r.rotation,
+      w
+    ), y = x(r.offset, z, t.getFrameSize());
     t.setState({
-      zoom: g,
-      offset: x,
-      rotation: S(a.rotation),
-      flip: a.flip,
-      filters: a.filters
+      zoom: w,
+      offset: y,
+      rotation: b(r.rotation),
+      flip: r.flip,
+      filters: r.filters
     });
   }
-  function d(a) {
-    if (i.setPointerCapture(a.pointerId), s.set(a.pointerId, a), s.size === 1) {
-      const l = t.getState();
-      o = { x: a.clientX, y: a.clientY, offset: l.offset }, i.classList.add("kiri-dragging");
-    } else if (s.size === 2) {
-      o = null;
-      const [l, f] = [...s.values()];
-      n = I(l, f), r = t.getState().zoom;
+  function m(r) {
+    if (i.setPointerCapture(r.pointerId), o.set(r.pointerId, r), o.size === 1) {
+      const a = t.getState();
+      s = { x: r.clientX, y: r.clientY, offset: a.offset }, i.classList.add("kiri-dragging");
+    } else if (o.size === 2) {
+      s = null;
+      const [a, g] = [...o.values()];
+      n = H(a, g), l = t.getState().zoom;
     }
   }
-  function h(a) {
-    if (s.has(a.pointerId)) {
-      if (s.set(a.pointerId, a), s.size === 2) {
-        const [l, f] = [...s.values()], g = I(l, f);
+  function h(r) {
+    if (o.has(r.pointerId)) {
+      if (o.set(r.pointerId, r), o.size === 2) {
+        const [a, g] = [...o.values()], w = H(a, g);
         if (n > 0) {
-          const v = g / n, x = t.getState();
-          c({ ...x, zoom: r * v });
+          const z = w / n, y = t.getState();
+          c({ ...y, zoom: l * z });
         }
         return;
       }
-      if (o) {
-        const l = a.clientX - o.x, f = a.clientY - o.y, g = t.getState();
+      if (s) {
+        const a = r.clientX - s.x, g = r.clientY - s.y, w = t.getState();
         c({
-          ...g,
-          offset: { x: o.offset.x + l, y: o.offset.y + f }
+          ...w,
+          offset: { x: s.offset.x + a, y: s.offset.y + g }
         });
       }
     }
   }
-  function m(a) {
-    s.delete(a.pointerId), s.size < 2 && (n = 0), s.size === 0 && (o = null, i.classList.remove("kiri-dragging"));
-  }
-  function u(a) {
-    if (!e.mouseWheelZoom || e.mouseWheelZoom === "ctrl" && !a.ctrlKey) return;
-    a.preventDefault();
-    const l = t.getState(), f = -a.deltaY * 15e-4;
-    c({ ...l, zoom: l.zoom * (1 + f) });
+  function f(r) {
+    o.delete(r.pointerId), o.size < 2 && (n = 0), o.size === 0 && (s = null, i.classList.remove("kiri-dragging"));
+  }
+  function u(r) {
+    if (!e.mouseWheelZoom || e.mouseWheelZoom === "ctrl" && !r.ctrlKey) return;
+    r.preventDefault();
+    const a = t.getState(), g = -r.deltaY * 15e-4;
+    c({ ...a, zoom: a.zoom * (1 + g) });
+  }
+  function p(r) {
+    const a = t.getState();
+    switch (r.key) {
+      case "ArrowLeft":
+        r.preventDefault(), c({ ...a, offset: { ...a.offset, x: a.offset.x + F } });
+        break;
+      case "ArrowRight":
+        r.preventDefault(), c({ ...a, offset: { ...a.offset, x: a.offset.x - F } });
+        break;
+      case "ArrowUp":
+        r.preventDefault(), c({ ...a, offset: { ...a.offset, y: a.offset.y + F } });
+        break;
+      case "ArrowDown":
+        r.preventDefault(), c({ ...a, offset: { ...a.offset, y: a.offset.y - F } });
+        break;
+      case "+":
+      case "=":
+        r.preventDefault(), c({ ...a, zoom: a.zoom + T });
+        break;
+      case "-":
+      case "_":
+        r.preventDefault(), c({ ...a, zoom: a.zoom - T });
+        break;
+      case "0":
+        r.preventDefault(), t.reset();
+        break;
+    }
   }
-  return i.addEventListener("pointerdown", d), i.addEventListener("pointermove", h), i.addEventListener("pointerup", m), i.addEventListener("pointercancel", m), i.addEventListener("wheel", u, { passive: !1 }), {
+  return i.addEventListener("pointerdown", m), i.addEventListener("pointermove", h), i.addEventListener("pointerup", f), i.addEventListener("pointercancel", f), i.addEventListener("wheel", u, { passive: !1 }), i.addEventListener("keydown", p), {
     destroy() {
-      i.removeEventListener("pointerdown", d), i.removeEventListener("pointermove", h), i.removeEventListener("pointerup", m), i.removeEventListener("pointercancel", m), i.removeEventListener("wheel", u);
+      i.removeEventListener("pointerdown", m), i.removeEventListener("pointermove", h), i.removeEventListener("pointerup", f), i.removeEventListener("pointercancel", f), i.removeEventListener("wheel", u), i.removeEventListener("keydown", p);
     }
   };
 }
-function A(i) {
+function G(i) {
   const t = new DataView(i);
   if (t.byteLength < 4 || t.getUint16(0, !1) !== 65496) return 1;
   let e = 2;
   for (; e + 4 <= t.byteLength; ) {
-    const s = t.getUint16(e, !1), o = t.getUint16(e + 2, !1);
-    if (s === 65505) {
+    const o = t.getUint16(e, !1), s = t.getUint16(e + 2, !1);
+    if (o === 65505) {
       const n = e + 4;
-      return t.getUint32(n, !1) !== 1165519206 ? 1 : K(t, n + 6);
+      return t.getUint32(n, !1) !== 1165519206 ? 1 : q(t, n + 6);
     }
-    if ((s & 65280) !== 65280) break;
-    e += 2 + o;
+    if ((o & 65280) !== 65280) break;
+    e += 2 + s;
   }
   return 1;
 }
-function K(i, t) {
-  const e = i.getUint16(t, !1) === 18761, s = i.getUint32(t + 4, e), o = t + s;
-  if (o + 2 > i.byteLength) return 1;
-  const n = i.getUint16(o, e);
-  for (let r = 0; r < n; r++) {
-    const c = o + 2 + r * 12;
+function q(i, t) {
+  const e = i.getUint16(t, !1) === 18761, o = i.getUint32(t + 4, e), s = t + o;
+  if (s + 2 > i.byteLength) return 1;
+  const n = i.getUint16(s, e);
+  for (let l = 0; l < n; l++) {
+    const c = s + 2 + l * 12;
     if (c + 12 > i.byteLength) break;
     if (i.getUint16(c, e) === 274) {
       const h = i.getUint16(c + 8, e);
@@ -175,7 +207,7 @@ function K(i, t) {
   }
   return 1;
 }
-function j(i) {
+function J(i) {
   switch (i) {
     case 2:
       return { rotation: 0, flipHorizontal: !0 };
@@ -195,78 +227,101 @@ function j(i) {
       return { rotation: 0, flipHorizontal: !1 };
   }
 }
-function y(i, t, e, s) {
+function D(i, t, e, o) {
   return i === void 0 ? e : t.includes(i) ? i : (console.warn(
-    `Kiri: invalid ${s} "${i}" — defaulting to "${e}". Valid values: ${t.join(", ")}.`
+    `Kiri: invalid ${o} "${i}" — defaulting to "${e}". Valid values: ${t.join(", ")}.`
   ), e);
 }
-const X = ["base64", "blob", "canvas"], Y = ["image/jpeg", "image/png", "image/webp"];
-function V(i, t, e) {
+function Z(i, t, e) {
+  return Math.min(Math.max(i, t), e);
+}
+const Q = ["base64", "blob", "canvas"], tt = ["image/jpeg", "image/png", "image/webp"];
+function Y(i, t, e) {
   return {
     left: i.width / 2 - t.x - e.width / 2,
     top: i.height / 2 - t.y - e.height / 2
   };
 }
-function W(i, t, e, s, o, n) {
-  const r = { width: i.naturalWidth, height: i.naturalHeight }, c = b(r, e, t.rotation) * t.zoom, d = z(r, e, t.rotation, t.zoom), h = document.createElement("canvas");
-  h.width = Math.max(1, Math.round(d.width)), h.height = Math.max(1, Math.round(d.height));
-  const m = h.getContext("2d");
-  if (!m) throw new Error("Kiri: unable to get 2D canvas context");
-  m.translate(h.width / 2, h.height / 2), m.rotate(t.rotation * Math.PI / 180), m.scale(c * (t.flip.horizontal ? -1 : 1), c * (t.flip.vertical ? -1 : 1)), m.filter = C(t.filters), m.drawImage(i, -r.width / 2, -r.height / 2, r.width, r.height);
-  const { left: u, top: a } = V(
-    d,
+function et(i, t, e) {
+  const o = O(i, t, e.rotation) * e.zoom, s = S(i, t, e.rotation, e.zoom), { left: n, top: l } = Y(s, e.offset, t), c = { x: s.width / 2, y: s.height / 2 }, m = { x: i.width / 2, y: i.height / 2 }, h = b(e.rotation), f = [
+    { x: n, y: l },
+    { x: n + t.width, y: l },
+    { x: n, y: l + t.height },
+    { x: n + t.width, y: l + t.height }
+  ].map(({ x: z, y }) => {
+    const M = (z - c.x) / o, L = (y - c.y) / o;
+    let v, E;
+    return h === 90 ? (v = L, E = -M) : h === 180 ? (v = -M, E = -L) : h === 270 ? (v = -L, E = M) : (v = M, E = L), { x: v + m.x, y: E + m.y };
+  }), u = f.map((z) => z.x), p = f.map((z) => z.y), r = Z(Math.min(...u), 0, i.width), a = Z(Math.min(...p), 0, i.height), g = Z(Math.max(...u), 0, i.width), w = Z(Math.max(...p), 0, i.height);
+  return {
+    x: Math.round(r),
+    y: Math.round(a),
+    width: Math.round(g - r),
+    height: Math.round(w - a),
+    rotation: h,
+    flip: { ...e.flip }
+  };
+}
+function it(i, t, e, o, s, n) {
+  const l = { width: i.naturalWidth, height: i.naturalHeight }, c = O(l, e, t.rotation) * t.zoom, m = S(l, e, t.rotation, t.zoom), h = document.createElement("canvas");
+  h.width = Math.max(1, Math.round(m.width)), h.height = Math.max(1, Math.round(m.height));
+  const f = h.getContext("2d");
+  if (!f) throw new Error("Kiri: unable to get 2D canvas context");
+  f.translate(h.width / 2, h.height / 2), f.rotate(t.rotation * Math.PI / 180), f.scale(c * (t.flip.horizontal ? -1 : 1), c * (t.flip.vertical ? -1 : 1)), f.filter = $(t.filters), f.drawImage(i, -l.width / 2, -l.height / 2, l.width, l.height);
+  const { left: u, top: p } = Y(
+    m,
     t.offset,
     e
-  ), l = document.createElement("canvas");
-  l.width = s, l.height = o;
-  const f = l.getContext("2d");
-  if (!f) throw new Error("Kiri: unable to get 2D canvas context");
-  return n === "circle" && (f.save(), f.beginPath(), f.ellipse(
-    s / 2,
+  ), r = document.createElement("canvas");
+  r.width = o, r.height = s;
+  const a = r.getContext("2d");
+  if (!a) throw new Error("Kiri: unable to get 2D canvas context");
+  return n === "circle" && (a.save(), a.beginPath(), a.ellipse(
     o / 2,
     s / 2,
     o / 2,
+    s / 2,
     0,
     0,
     Math.PI * 2
-  ), f.clip()), f.drawImage(
+  ), a.clip()), a.drawImage(
     h,
     u,
-    a,
+    p,
     e.width,
     e.height,
     0,
     0,
-    s,
-    o
-  ), n === "circle" && f.restore(), l;
+    o,
+    s
+  ), n === "circle" && a.restore(), r;
 }
-async function k(i, t, e, s, o) {
-  const n = y(o.type, X, "base64", "export type"), r = y(o.format, Y, "image/png", "export format"), c = o.quality, d = o.width ?? e.width, h = o.height ?? e.height;
-  s === "circle" && r === "image/jpeg" && console.warn(
+async function ot(i, t, e, o, s) {
+  const n = D(s.type, Q, "base64", "export type"), l = D(s.format, tt, "image/png", "export format"), c = s.quality, m = s.width ?? e.width, h = s.height ?? e.height;
+  o === "circle" && l === "image/jpeg" && console.warn(
     "Kiri: exporting a circle-shaped frame as image/jpeg — JPEG has no alpha channel, so the area outside the circle will render as solid black instead of transparent. Use image/png or image/webp instead."
   );
-  const m = W(i, t, e, d, h, s);
-  return n === "canvas" ? m : n === "base64" ? m.toDataURL(r, c) : new Promise((u, a) => {
-    m.toBlob(
-      (l) => l ? u(l) : a(new Error("Kiri: canvas.toBlob failed")),
-      r,
+  const f = it(i, t, e, m, h, o);
+  return n === "canvas" ? f : n === "base64" ? f.toDataURL(l, c) : new Promise((u, p) => {
+    f.toBlob(
+      (r) => r ? u(r) : p(new Error("Kiri: canvas.toBlob failed")),
+      l,
       c
     );
   });
 }
-async function B(i, t) {
-  const e = t.fieldName ?? "file", s = t.fileName ?? `crop.${G(t.format ?? "image/png")}`, o = new FormData();
-  o.append(e, i, s);
-  for (const [n, r] of Object.entries(t.extraFields ?? {}))
-    o.append(n, r);
+async function st(i, t) {
+  const e = t.fieldName ?? "file", o = t.fileName ?? `crop.${nt(t.format ?? "image/png")}`, s = new FormData();
+  s.append(e, i, o);
+  for (const [n, l] of Object.entries(t.extraFields ?? {}))
+    s.append(n, l);
   return fetch(t.url, {
     ...t.fetchOptions,
     method: "POST",
-    body: o
+    body: s
   });
 }
-function G(i) {
+function nt(i) {
   switch (i) {
     case "image/jpeg":
       return "jpg";
@@ -276,67 +331,70 @@ function G(i) {
       return "png";
   }
 }
-const P = 200, O = 20, q = ["rectangle", "circle"], J = ["top", "bottom", "left", "right"];
-function Q(i) {
+const U = 200, _ = 20, rt = ["rectangle", "circle"], at = ["top", "bottom", "left", "right"];
+function ht(i) {
   return i === void 0 ? !0 : typeof i == "boolean" || i === "ctrl" ? i : (console.warn(
     `Kiri: invalid mouseWheelZoom "${String(i)}" — defaulting to true. Valid values: true, false, "ctrl".`
   ), !0);
 }
-class tt {
+class lt {
   /**
    * @param container An element already present in the DOM. Passing
    * `null`/`undefined`, or an element that isn't in the DOM yet, throws.
    * @param options See the {@link KiriOptions} fields for defaults.
    */
   constructor(t, e = {}) {
-    p(this, "container");
-    p(this, "opts");
-    p(this, "stage");
-    p(this, "gestureHandle");
-    p(this, "resizeHandle", null);
-    p(this, "zoomerHandle", null);
-    p(this, "naturalSize", { width: 0, height: 0 });
-    p(this, "state", {
+    d(this, "container");
+    d(this, "opts");
+    d(this, "stage");
+    d(this, "gestureHandle");
+    d(this, "resizeHandle", null);
+    d(this, "zoomerHandle", null);
+    d(this, "naturalSize", { width: 0, height: 0 });
+    d(this, "state", {
       zoom: 1,
       offset: { x: 0, y: 0 },
       rotation: 0,
       flip: { horizontal: !1, vertical: !1 },
-      filters: L
+      filters: A
     });
-    p(this, "listeners", { change: [] });
-    var s, o, n;
+    /** Snapshot taken right after `load()` resolves, so `reset()` has something to revert to. */
+    d(this, "initialState", null);
+    d(this, "listeners", { change: [] });
+    var o, s, n;
     if (!t || typeof t.appendChild != "function")
       throw new Error(
         "Kiri: container element is null/undefined or not a DOM element. This usually means the element wasn't in the DOM yet when `new Kiri(...)` ran — e.g. document.getElementById() was called before the element existed. Place the <script> after the element, or construct inside a DOMContentLoaded listener."
       );
     this.container = t, this.opts = {
       frame: {
-        shape: y(
-          (s = e.frame) == null ? void 0 : s.shape,
-          q,
+        shape: D(
+          (o = e.frame) == null ? void 0 : o.shape,
+          rt,
           "rectangle",
           "frame.shape"
         ),
-        width: ((o = e.frame) == null ? void 0 : o.width) ?? P,
-        height: ((n = e.frame) == null ? void 0 : n.height) ?? P
+        width: ((s = e.frame) == null ? void 0 : s.width) ?? U,
+        height: ((n = e.frame) == null ? void 0 : n.height) ?? U
       },
       minZoom: e.minZoom ?? 1,
       maxZoom: e.maxZoom ?? 4,
       rotatable: e.rotatable ?? !0,
       flippable: e.flippable ?? !0,
       resizableFrame: e.resizableFrame ?? !1,
-      mouseWheelZoom: Q(e.mouseWheelZoom),
+      lockAspectRatio: e.lockAspectRatio ?? !1,
+      mouseWheelZoom: ht(e.mouseWheelZoom),
       useExifOrientation: e.useExifOrientation ?? !0,
       uploader: e.uploader,
       autoSizeStage: e.autoSizeStage ?? !0,
       showZoomer: e.showZoomer ?? !1,
-      zoomerPosition: y(
+      zoomerPosition: D(
         e.zoomerPosition,
-        J,
+        at,
         "bottom",
         "zoomerPosition"
       )
-    }, this.state.filters = M(L, e.filters ?? {}), this.stage = $(
+    }, this.state.filters = I(A, e.filters ?? {}), this.stage = j(
       this.container,
       this.opts.frame.shape,
       this.opts.frame.width,
@@ -348,14 +406,15 @@ class tt {
         max: this.opts.maxZoom,
         value: this.state.zoom
       }
-    ), this.opts.autoSizeStage && this.syncStageSize(), Z(this.stage.imgEl, this.state.filters), this.stage.zoomerEl && this.enableZoomer(this.stage.zoomerEl), this.gestureHandle = _(
+    ), this.opts.autoSizeStage && this.syncStageSize(), R(this.stage.imgEl, this.state.filters), this.stage.zoomerEl && this.enableZoomer(this.stage.zoomerEl), this.gestureHandle = B(
       this.stage.stageEl,
       {
         getNaturalSize: () => this.naturalSize,
         getFrameSize: () => this.getFrameSize(),
         getState: () => this.state,
         getMinMaxZoom: () => ({ min: this.opts.minZoom, max: this.opts.maxZoom }),
-        setState: (r) => this.commitState(r)
+        setState: (l) => this.commitState(l),
+        reset: () => this.reset()
       },
       { mouseWheelZoom: this.opts.mouseWheelZoom }
     ), this.opts.resizableFrame && this.enableFrameResize();
@@ -370,37 +429,37 @@ class tt {
    * @param loadOptions Initial `zoom`/`offset`/`rotation`/`flip`.
    */
   async load(t, e = {}) {
-    var u, a;
-    let s = S(e.rotation ?? 0), o = ((u = e.flip) == null ? void 0 : u.horizontal) ?? !1;
-    const n = ((a = e.flip) == null ? void 0 : a.vertical) ?? !1;
-    let r = null, c;
+    var u, p;
+    let o = b(e.rotation ?? 0), s = ((u = e.flip) == null ? void 0 : u.horizontal) ?? !1;
+    const n = ((p = e.flip) == null ? void 0 : p.vertical) ?? !1;
+    let l = null, c;
     if (typeof t == "string")
       c = t;
     else {
       if (this.opts.useExifOrientation) {
-        const l = await t.arrayBuffer(), f = A(l), g = j(f);
-        s = S(s + g.rotation), o = o !== g.flipHorizontal;
+        const r = await t.arrayBuffer(), a = G(r), g = J(a);
+        o = b(o + g.rotation), s = s !== g.flipHorizontal;
       }
-      r = URL.createObjectURL(t), c = r;
+      l = URL.createObjectURL(t), c = l;
     }
-    await new Promise((l, f) => {
-      this.stage.imgEl.onload = () => l(), this.stage.imgEl.onerror = () => f(new Error("Kiri: failed to load image")), this.stage.imgEl.src = c;
-    }), r && URL.revokeObjectURL(r), this.naturalSize = {
+    await new Promise((r, a) => {
+      this.stage.imgEl.onload = () => r(), this.stage.imgEl.onerror = () => a(new Error("Kiri: failed to load image")), this.stage.imgEl.src = c;
+    }), l && URL.revokeObjectURL(l), this.naturalSize = {
       width: this.stage.imgEl.naturalWidth,
       height: this.stage.imgEl.naturalHeight
     };
-    const d = E(
+    const m = P(
       e.zoom ?? this.opts.minZoom,
       this.opts.minZoom,
       this.opts.maxZoom
-    ), h = z(this.naturalSize, this.getFrameSize(), s, d), m = w(e.offset ?? { x: 0, y: 0 }, h, this.getFrameSize());
+    ), h = S(this.naturalSize, this.getFrameSize(), o, m), f = x(e.offset ?? { x: 0, y: 0 }, h, this.getFrameSize());
     this.commitState({
-      zoom: d,
-      offset: m,
-      rotation: s,
-      flip: { horizontal: o, vertical: n },
+      zoom: m,
+      offset: f,
+      rotation: o,
+      flip: { horizontal: s, vertical: n },
       filters: this.state.filters
-    });
+    }), this.initialState = this.getState();
   }
   /** A snapshot of the current state — mutating the returned object has no effect. */
   getState() {
@@ -414,13 +473,41 @@ class tt {
   }
   /** Sets the zoom to an absolute value, clamped to `[minZoom, maxZoom]`. */
   setZoom(t) {
-    const e = E(t, this.opts.minZoom, this.opts.maxZoom), s = z(
+    const e = P(t, this.opts.minZoom, this.opts.maxZoom), o = S(
       this.naturalSize,
       this.getFrameSize(),
       this.state.rotation,
       e
-    ), o = w(this.state.offset, s, this.getFrameSize());
-    this.commitState({ ...this.state, zoom: e, offset: o });
+    ), s = x(this.state.offset, o, this.getFrameSize());
+    this.commitState({ ...this.state, zoom: e, offset: s });
+  }
+  /**
+   * Sets the pan offset to an absolute value (image-center offset from the
+   * frame center, in stage pixels), clamped so the frame stays fully covered
+   * by the rendered image.
+   */
+  setOffset(t) {
+    const e = S(
+      this.naturalSize,
+      this.getFrameSize(),
+      this.state.rotation,
+      this.state.zoom
+    ), o = x(t, e, this.getFrameSize());
+    this.commitState({ ...this.state, offset: o });
+  }
+  /**
+   * Reverts zoom/offset/rotation/flip/filters to what they were right after
+   * `load()` resolved (including any `loadOptions` passed to it). No-op if
+   * nothing has been loaded yet.
+   */
+  reset() {
+    this.initialState && this.commitState({
+      zoom: this.initialState.zoom,
+      offset: { ...this.initialState.offset },
+      rotation: this.initialState.rotation,
+      flip: { ...this.initialState.flip },
+      filters: { ...this.initialState.filters }
+    });
   }
   /**
    * Rotates relative to the current rotation, snapped to the nearest 90°.
@@ -428,13 +515,13 @@ class tt {
    */
   rotate(t) {
     if (!this.opts.rotatable) return;
-    const e = Math.round(t / 90) * 90, s = S(this.state.rotation + e), o = z(
+    const e = Math.round(t / 90) * 90, o = b(this.state.rotation + e), s = S(
       this.naturalSize,
       this.getFrameSize(),
-      s,
+      o,
       this.state.zoom
-    ), n = w(this.state.offset, o, this.getFrameSize());
-    this.commitState({ ...this.state, rotation: s, offset: n });
+    ), n = x(this.state.offset, s, this.getFrameSize());
+    this.commitState({ ...this.state, rotation: o, offset: n });
   }
   /** Toggles horizontal flip, independent of rotation. No-op if `flippable: false`. */
   flipHorizontal() {
@@ -454,21 +541,21 @@ class tt {
    * minimum.
    */
   setFrameSize(t, e) {
-    this.opts.frame.width = Math.max(O, t), this.opts.frame.height = Math.max(O, e), H(this.stage.frameEl, this.opts.frame.width, this.opts.frame.height), this.opts.autoSizeStage && this.syncStageSize();
-    const s = z(
+    this.opts.frame.width = Math.max(_, t), this.opts.frame.height = Math.max(_, e), k(this.stage.frameEl, this.opts.frame.width, this.opts.frame.height), this.opts.autoSizeStage && this.syncStageSize();
+    const o = S(
       this.naturalSize,
       this.getFrameSize(),
       this.state.rotation,
       this.state.zoom
-    ), o = w(this.state.offset, s, this.getFrameSize());
-    this.commitState({ ...this.state, offset: o });
+    ), s = x(this.state.offset, o, this.getFrameSize());
+    this.commitState({ ...this.state, offset: s });
   }
   /**
    * Merges a partial update into the current filters (omitted fields are
    * left as they are). Numeric values are clamped to `>= 0`.
    */
   setFilters(t) {
-    this.commitState({ ...this.state, filters: M(this.state.filters, t) });
+    this.commitState({ ...this.state, filters: I(this.state.filters, t) });
   }
   /**
    * Renders the current crop. A circle frame is a real clip in the output
@@ -477,7 +564,7 @@ class tt {
    * @returns A data URL string (`type: "base64"`, the default), a `Blob`, or an `HTMLCanvasElement`.
    */
   async export(t = {}) {
-    return k(
+    return ot(
       this.stage.imgEl,
       this.state,
       this.getFrameSize(),
@@ -485,14 +572,23 @@ class tt {
       t
     );
   }
+  /**
+   * The current crop selection as a rectangle in the original, unrotated,
+   * unflipped source image's own pixel coordinates — for sending to a server
+   * that will crop the full-resolution original itself instead of uploading
+   * a client-re-encoded image. See {@link CropRegion}.
+   */
+  getCropRegion() {
+    return et(this.naturalSize, this.getFrameSize(), this.state);
+  }
   /**
    * Exports the current crop as a blob, then uploads it — a default
    * FormData/`fetch` POST, or a custom `uploader` (per-call `options.uploader`
    * wins over the constructor's, which wins over the built-in default).
    */
   async upload(t, e = {}) {
-    const s = await this.export({ ...e, type: "blob" });
-    return (e.uploader ?? this.opts.uploader ?? B)(s, { ...e, url: t });
+    const o = await this.export({ ...e, type: "blob" });
+    return (e.uploader ?? this.opts.uploader ?? st)(o, { ...e, url: t });
   }
   /** Subscribes to `"change"` — fires on every state update (drag/zoom/rotate/flip/filters), and once after `load()` resolves. */
   on(t, e) {
@@ -500,7 +596,7 @@ class tt {
   }
   /** Unsubscribes a callback previously passed to {@link on}. */
   off(t, e) {
-    this.listeners[t] = this.listeners[t].filter((s) => s !== e);
+    this.listeners[t] = this.listeners[t].filter((o) => o !== e);
   }
   /**
    * Tears the instance down: removes all pointer/wheel event listeners
@@ -518,17 +614,17 @@ class tt {
     return { width: this.opts.frame.width, height: this.opts.frame.height };
   }
   syncStageSize() {
-    R(
+    V(
       this.stage.stageEl,
-      this.opts.frame.width + F * 2,
-      this.opts.frame.height + F * 2
+      this.opts.frame.width + C * 2,
+      this.opts.frame.height + C * 2
     );
   }
   commitState(t) {
     this.state = t;
-    const e = b(this.naturalSize, this.getFrameSize(), t.rotation) * t.zoom;
-    N(this.stage.imageLayerEl, t, e), Z(this.stage.imgEl, t.filters), this.stage.zoomerEl && (this.stage.zoomerEl.value = String(t.zoom));
-    for (const s of this.listeners.change) s(this.getState());
+    const e = O(this.naturalSize, this.getFrameSize(), t.rotation) * t.zoom;
+    W(this.stage.imageLayerEl, t, e), R(this.stage.imgEl, t.filters), this.stage.zoomerEl && (this.stage.zoomerEl.value = String(t.zoom));
+    for (const o of this.listeners.change) o(this.getState());
   }
   enableZoomer(t) {
     const e = () => this.setZoom(Number(t.value));
@@ -539,39 +635,54 @@ class tt {
     };
   }
   enableFrameResize() {
-    const t = document.createElement("div");
-    t.className = "kiri-frame-handle", t.style.right = "-5px", t.style.bottom = "-5px", this.stage.frameEl.appendChild(t);
-    let e = null;
-    const s = (r) => {
-      r.stopPropagation(), t.setPointerCapture(r.pointerId), e = {
-        x: r.clientX,
-        y: r.clientY,
-        width: this.opts.frame.width,
-        height: this.opts.frame.height
+    const t = [
+      { name: "top-left", edge: { left: "-5px", top: "-5px" }, signX: -1, signY: -1 },
+      { name: "top-right", edge: { right: "-5px", top: "-5px" }, signX: 1, signY: -1 },
+      { name: "bottom-left", edge: { left: "-5px", bottom: "-5px" }, signX: -1, signY: 1 },
+      { name: "bottom-right", edge: { right: "-5px", bottom: "-5px" }, signX: 1, signY: 1 }
+    ], e = [];
+    for (const o of t) {
+      const s = document.createElement("div");
+      s.className = `kiri-frame-handle kiri-frame-handle--${o.name}`, Object.assign(s.style, o.edge), this.stage.frameEl.appendChild(s);
+      let n = null;
+      const l = (h) => {
+        h.stopPropagation(), s.setPointerCapture(h.pointerId), n = {
+          x: h.clientX,
+          y: h.clientY,
+          width: this.opts.frame.width,
+          height: this.opts.frame.height
+        };
+      }, c = (h) => {
+        if (!n) return;
+        const f = (h.clientX - n.x) * 2 * o.signX, u = (h.clientY - n.y) * 2 * o.signY, p = n.width + f, r = n.height + u;
+        if (this.opts.lockAspectRatio) {
+          const a = n.width / n.height;
+          Math.abs(p - n.width) >= Math.abs(r - n.height) * a ? this.setFrameSize(p, p / a) : this.setFrameSize(r * a, r);
+        } else
+          this.setFrameSize(p, r);
+      }, m = () => {
+        n = null;
       };
-    }, o = (r) => {
-      if (!e) return;
-      const c = (r.clientX - e.x) * 2, d = (r.clientY - e.y) * 2;
-      this.setFrameSize(e.width + c, e.height + d);
-    }, n = () => {
-      e = null;
-    };
-    t.addEventListener("pointerdown", s), t.addEventListener("pointermove", o), t.addEventListener("pointerup", n), t.addEventListener("pointercancel", n), this.resizeHandle = {
+      s.addEventListener("pointerdown", l), s.addEventListener("pointermove", c), s.addEventListener("pointerup", m), s.addEventListener("pointercancel", m), e.push(() => {
+        s.removeEventListener("pointerdown", l), s.removeEventListener("pointermove", c), s.removeEventListener("pointerup", m), s.removeEventListener("pointercancel", m), s.remove();
+      });
+    }
+    this.resizeHandle = {
       destroy() {
-        t.removeEventListener("pointerdown", s), t.removeEventListener("pointermove", o), t.removeEventListener("pointerup", n), t.removeEventListener("pointercancel", n), t.remove();
+        for (const o of e) o();
       }
     };
   }
 }
-class it {
+class ft {
   /** @param items An initial queue; more can be added later via `add()`. */
-  constructor(t, e = {}, s = []) {
+  constructor(t, e = {}, o = []) {
     /** The shared `Kiri` instance. Use its normal methods (drag/zoom/rotate/filters/etc.) to adjust the currently-loaded item. */
-    p(this, "cropper");
-    p(this, "items");
-    p(this, "index", -1);
-    p(this, "captures", []);
-    this.cropper = new tt(t, e), this.items = [...s];
+    d(this, "cropper");
+    d(this, "items");
+    d(this, "index", -1);
+    d(this, "captures", []);
+    this.cropper = new lt(t, e), this.items = [...o];
   }
   /** Appends an item to the queue. */
   add(t) {
@@ -588,6 +699,13 @@ class it {
     const t = this.items[this.index];
     return await this.cropper.load(t.source, t.loadOptions), !0;
   }
+  /** Loads the previous queued image into `cropper`. Returns false when already at the first item (or nothing loaded yet). */
+  async previous() {
+    if (this.index <= 0) return !1;
+    this.index -= 1;
+    const t = this.items[this.index];
+    return await this.cropper.load(t.source, t.loadOptions), !0;
+  }
   /** Metadata for the currently loaded item, or null before the first next() / after exhaustion. */
   current() {
     return this.items[this.index] ?? null;
@@ -607,7 +725,7 @@ class it {
   }
 }
 export {
-  tt as Kiri,
-  it as KiriBatch
+  lt as Kiri,
+  ft as KiriBatch
 };
 //# sourceMappingURL=kiri.mjs.map