@michaelyagi/kiri 0.1.0-alpha.10

package/dist/kiri.mjs

@@ -0,0 +1,867 @@
+var B = Object.defineProperty;
+var G = (i, t, e) => t in i ? B(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
+var z = (i, t, e) => G(i, typeof t != "symbol" ? t + "" : t, e);
+const $ = {
+  brightness: 1,
+  contrast: 1,
+  saturation: 1,
+  sharpness: 1,
+  grayscale: !1,
+  sepia: !1
+};
+function O(i, t) {
+  return {
+    brightness: Math.max(0, t.brightness ?? i.brightness),
+    contrast: Math.max(0, t.contrast ?? i.contrast),
+    saturation: Math.max(0, t.saturation ?? i.saturation),
+    sharpness: Math.max(0, t.sharpness ?? i.sharpness),
+    grayscale: t.grayscale ?? i.grayscale,
+    sepia: t.sepia ?? i.sepia
+  };
+}
+function Y(i) {
+  const t = i > 1 ? (i - 1) / 4.5 : 0, e = 1 + 4 * t, s = -t;
+  return `0 ${s} 0 ${s} ${e} ${s} 0 ${s} 0`;
+}
+function X(i, t) {
+  const e = [];
+  return i.sharpness > 1 && e.push(`url(#${t})`), e.push(
+    `brightness(${i.brightness})`,
+    `contrast(${i.contrast})`,
+    `saturate(${i.saturation})`
+  ), i.grayscale && e.push("grayscale(1)"), i.sepia && e.push("sepia(1)"), e.join(" ");
+}
+const Z = "http://www.w3.org/2000/svg";
+let T = 0;
+function W() {
+  T += 1;
+  const i = `kiri-sharpen-${T}`, t = document.createElementNS(Z, "svg");
+  t.setAttribute("width", "0"), t.setAttribute("height", "0"), t.style.position = "absolute";
+  const e = document.createElementNS(Z, "filter");
+  e.setAttribute("id", i), e.setAttribute("color-interpolation-filters", "sRGB");
+  const s = document.createElementNS(Z, "feConvolveMatrix");
+  return s.setAttribute("order", "3"), s.setAttribute("divisor", "1"), s.setAttribute("edgeMode", "duplicate"), s.setAttribute("preserveAlpha", "true"), s.setAttribute("kernelMatrix", Y(1)), e.appendChild(s), t.appendChild(e), { svg: t, filterId: i, kernelEl: s };
+}
+function q(i, t, e, s, o, n, l) {
+  i.innerHTML = "";
+  const h = document.createElement("div");
+  h.className = "kiri-stage", h.tabIndex = 0, h.setAttribute("role", "application"), h.setAttribute(
+    "aria-label",
+    n ? "Image cropper. Drag or use arrow keys to move the crop frame over the fixed image. 0 resets." : "Image cropper. Drag to pan. Arrow keys to pan, plus/minus to zoom, 0 to reset."
+  );
+  const m = document.createElement("div");
+  m.className = "kiri-image-layer";
+  const f = document.createElement("img");
+  f.draggable = !1, m.appendChild(f);
+  const g = document.createElement("div");
+  g.className = t === "circle" ? "kiri-frame kiri-frame--circle" : t === "rounded-rectangle" ? "kiri-frame kiri-frame--rounded-rectangle" : "kiri-frame", j(g, e, s), t === "rounded-rectangle" && (g.style.borderRadius = `${o}px`);
+  const { svg: p, filterId: c, kernelEl: u } = W();
+  h.appendChild(m), h.appendChild(g), h.appendChild(p);
+  let r = null;
+  if (l.show) {
+    const a = document.createElement("div");
+    a.className = `kiri-root kiri-root--${l.position}`, r = document.createElement("input"), r.type = "range", r.className = "kiri-zoomer", r.min = String(l.min), r.max = String(l.max), r.step = "0.01", r.value = String(l.value), n && (r.disabled = !0), a.appendChild(h), a.appendChild(r), i.appendChild(a);
+  } else
+    i.appendChild(h);
+  return { stageEl: h, frameEl: g, imageLayerEl: m, imgEl: f, zoomerEl: r, sharpenFilterId: c, sharpenKernelEl: u };
+}
+function j(i, t, e) {
+  i.style.width = `${t}px`, i.style.height = `${e}px`;
+}
+const D = 20;
+function N(i, t, e) {
+  i.style.width = `${t}px`, i.style.height = `${e}px`;
+}
+function J(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) scale(${s}, ${o}) rotate(${t.rotation}deg)`;
+}
+function U(i, t, e, s) {
+  e.setAttribute("kernelMatrix", Y(t.sharpness)), i.style.filter = X(t, s);
+}
+function Q(i, t) {
+  i.style.transform = `translate(-50%, -50%) translate(${t.x}px, ${t.y}px)`;
+}
+function F(i, t) {
+  return (t / 90 % 2 + 2) % 2 === 1 ? { width: i.height, height: i.width } : { width: i.width, height: i.height };
+}
+function L(i, t, e) {
+  const s = F(i, e);
+  return s.width <= 0 || s.height <= 0 ? 1 : Math.max(t.width / s.width, t.height / s.height);
+}
+function v(i, t, e, s) {
+  const o = F(i, e), n = L(i, t, e) * s;
+  return { width: o.width * n, height: o.height * n };
+}
+function C(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);
+  return {
+    x: Math.min(Math.max(i.x, -s), s) || 0,
+    y: Math.min(Math.max(i.y, -o), o) || 0
+  };
+}
+function I(i) {
+  return (i % 360 + 360) % 360;
+}
+const y = 15, _ = 0.1;
+function k(i, t) {
+  return Math.hypot(i.clientX - t.clientX, i.clientY - t.clientY);
+}
+function tt(i, t, e) {
+  const s = /* @__PURE__ */ new Map();
+  let o = null, n = 0, l = 1;
+  function h(r) {
+    const { min: a, max: d } = t.getMinMaxZoom(), S = C(r.zoom, a, d), b = v(
+      t.getNaturalSize(),
+      t.getFrameSize(),
+      r.rotation,
+      S
+    ), x = w(r.offset, b, t.getFrameSize());
+    t.setState({
+      zoom: S,
+      offset: x,
+      rotation: I(r.rotation),
+      flip: r.flip,
+      filters: r.filters,
+      framePosition: r.framePosition
+    });
+  }
+  function m(r) {
+    const a = t.getState(), d = w(r, t.getFixedImageSize(), t.getFrameSize());
+    t.setState({ ...a, framePosition: d });
+  }
+  function f(r) {
+    if (i.setPointerCapture(r.pointerId), s.set(r.pointerId, r), s.size === 1) {
+      const a = t.getState();
+      o = {
+        x: r.clientX,
+        y: r.clientY,
+        offset: e.movableFrame ? a.framePosition : a.offset
+      }, i.classList.add("kiri-dragging");
+    } else if (s.size === 2) {
+      o = null;
+      const [a, d] = [...s.values()];
+      n = k(a, d), l = t.getState().zoom;
+    }
+  }
+  function g(r) {
+    if (s.has(r.pointerId)) {
+      if (s.set(r.pointerId, r), s.size === 2) {
+        if (e.movableFrame) return;
+        const [a, d] = [...s.values()], S = k(a, d);
+        if (n > 0) {
+          const b = S / n, x = t.getState();
+          h({ ...x, zoom: l * b });
+        }
+        return;
+      }
+      if (o) {
+        const a = r.clientX - o.x, d = r.clientY - o.y;
+        if (e.movableFrame) {
+          m({ x: o.offset.x + a, y: o.offset.y + d });
+          return;
+        }
+        const S = t.getState();
+        h({
+          ...S,
+          offset: { x: o.offset.x + a, y: o.offset.y + d }
+        });
+      }
+    }
+  }
+  function p(r) {
+    s.delete(r.pointerId), s.size < 2 && (n = 0), s.size === 0 && (o = null, i.classList.remove("kiri-dragging"));
+  }
+  function c(r) {
+    if (e.movableFrame || !e.mouseWheelZoom || e.mouseWheelZoom === "ctrl" && !r.ctrlKey) return;
+    r.preventDefault();
+    const a = t.getState(), d = -r.deltaY * 15e-4;
+    h({ ...a, zoom: a.zoom * (1 + d) });
+  }
+  function u(r) {
+    const a = t.getState();
+    if (e.movableFrame)
+      switch (r.key) {
+        case "ArrowLeft":
+          r.preventDefault(), m({ ...a.framePosition, x: a.framePosition.x - y });
+          return;
+        case "ArrowRight":
+          r.preventDefault(), m({ ...a.framePosition, x: a.framePosition.x + y });
+          return;
+        case "ArrowUp":
+          r.preventDefault(), m({ ...a.framePosition, y: a.framePosition.y - y });
+          return;
+        case "ArrowDown":
+          r.preventDefault(), m({ ...a.framePosition, y: a.framePosition.y + y });
+          return;
+        case "0":
+          r.preventDefault(), t.reset();
+          return;
+        default:
+          return;
+      }
+    switch (r.key) {
+      case "ArrowLeft":
+        r.preventDefault(), h({ ...a, offset: { ...a.offset, x: a.offset.x + y } });
+        break;
+      case "ArrowRight":
+        r.preventDefault(), h({ ...a, offset: { ...a.offset, x: a.offset.x - y } });
+        break;
+      case "ArrowUp":
+        r.preventDefault(), h({ ...a, offset: { ...a.offset, y: a.offset.y + y } });
+        break;
+      case "ArrowDown":
+        r.preventDefault(), h({ ...a, offset: { ...a.offset, y: a.offset.y - y } });
+        break;
+      case "+":
+      case "=":
+        r.preventDefault(), h({ ...a, zoom: a.zoom + _ });
+        break;
+      case "-":
+      case "_":
+        r.preventDefault(), h({ ...a, zoom: a.zoom - _ });
+        break;
+      case "0":
+        r.preventDefault(), t.reset();
+        break;
+    }
+  }
+  return i.addEventListener("pointerdown", f), i.addEventListener("pointermove", g), i.addEventListener("pointerup", p), i.addEventListener("pointercancel", p), i.addEventListener("wheel", c, { passive: !1 }), i.addEventListener("keydown", u), {
+    destroy() {
+      i.removeEventListener("pointerdown", f), i.removeEventListener("pointermove", g), i.removeEventListener("pointerup", p), i.removeEventListener("pointercancel", p), i.removeEventListener("wheel", c), i.removeEventListener("keydown", u);
+    }
+  };
+}
+function et(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 n = e + 4;
+      return t.getUint32(n, !1) !== 1165519206 ? 1 : it(t, n + 6);
+    }
+    if ((s & 65280) !== 65280) break;
+    e += 2 + o;
+  }
+  return 1;
+}
+function it(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 l = 0; l < n; l++) {
+    const h = o + 2 + l * 12;
+    if (h + 12 > i.byteLength) break;
+    if (i.getUint16(h, e) === 274) {
+      const f = i.getUint16(h + 8, e);
+      return f >= 1 && f <= 8 ? f : 1;
+    }
+  }
+  return 1;
+}
+function st(i) {
+  switch (i) {
+    case 2:
+      return { rotation: 0, flipHorizontal: !0 };
+    case 3:
+      return { rotation: 180, flipHorizontal: !1 };
+    case 4:
+      return { rotation: 180, flipHorizontal: !0 };
+    case 5:
+      return { rotation: 270, flipHorizontal: !0 };
+    case 6:
+      return { rotation: 90, flipHorizontal: !1 };
+    case 7:
+      return { rotation: 90, flipHorizontal: !0 };
+    case 8:
+      return { rotation: 270, flipHorizontal: !1 };
+    default:
+      return { rotation: 0, flipHorizontal: !1 };
+  }
+}
+function R(i, t, e, s) {
+  return i === void 0 ? e : t.includes(i) ? i : (console.warn(
+    `Kiri: invalid ${s} "${i}" — defaulting to "${e}". Valid values: ${t.join(", ")}.`
+  ), e);
+}
+function P(i, t, e) {
+  return Math.min(Math.max(i, t), e);
+}
+const ot = ["base64", "blob", "canvas"], rt = ["image/jpeg", "image/png", "image/webp"];
+function V(i, t, e) {
+  return {
+    left: i.width / 2 - t.x - e.width / 2,
+    top: i.height / 2 - t.y - e.height / 2
+  };
+}
+function at(i, t, e) {
+  const s = L(i, t, e.rotation) * e.zoom, o = v(i, t, e.rotation, e.zoom), { left: n, top: l } = V(o, e.offset, t), h = { x: o.width / 2, y: o.height / 2 }, m = { x: i.width / 2, y: i.height / 2 }, f = I(e.rotation), g = [
+    { 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: S, y: b }) => {
+    const x = (S - h.x) / s, A = (b - h.y) / s;
+    let E, M;
+    return f === 90 ? (E = A, M = -x) : f === 180 ? (E = -x, M = -A) : f === 270 ? (E = -A, M = x) : (E = x, M = A), { x: E + m.x, y: M + m.y };
+  }), p = g.map((S) => S.x), c = g.map((S) => S.y), u = P(Math.min(...p), 0, i.width), r = P(Math.min(...c), 0, i.height), a = P(Math.max(...p), 0, i.width), d = P(Math.max(...c), 0, i.height);
+  return {
+    x: Math.round(u),
+    y: Math.round(r),
+    width: Math.round(a - u),
+    height: Math.round(d - r),
+    rotation: f,
+    flip: { ...e.flip }
+  };
+}
+function nt(i, t, e, s, o, n, l, h) {
+  const m = { width: i.naturalWidth, height: i.naturalHeight }, f = L(m, e, t.rotation) * t.zoom, g = v(m, e, t.rotation, t.zoom), p = document.createElement("canvas");
+  p.width = Math.max(1, Math.round(g.width)), p.height = Math.max(1, Math.round(g.height));
+  const c = p.getContext("2d");
+  if (!c) throw new Error("Kiri: unable to get 2D canvas context");
+  c.translate(p.width / 2, p.height / 2), c.scale(f * (t.flip.horizontal ? -1 : 1), f * (t.flip.vertical ? -1 : 1)), c.rotate(t.rotation * Math.PI / 180), c.filter = X(t.filters, h), c.drawImage(i, -m.width / 2, -m.height / 2, m.width, m.height);
+  const { left: u, top: r } = V(
+    g,
+    t.offset,
+    e
+  ), a = document.createElement("canvas");
+  a.width = s, a.height = o;
+  const d = a.getContext("2d");
+  if (!d) throw new Error("Kiri: unable to get 2D canvas context");
+  if (n === "circle")
+    d.save(), d.beginPath(), d.ellipse(
+      s / 2,
+      o / 2,
+      s / 2,
+      o / 2,
+      0,
+      0,
+      Math.PI * 2
+    ), d.clip();
+  else if (n === "rounded-rectangle") {
+    const S = s / e.width, b = P(l * S, 0, Math.min(s, o) / 2);
+    d.save(), d.beginPath(), d.roundRect(0, 0, s, o, b), d.clip();
+  }
+  return d.drawImage(
+    p,
+    u,
+    r,
+    e.width,
+    e.height,
+    0,
+    0,
+    s,
+    o
+  ), (n === "circle" || n === "rounded-rectangle") && d.restore(), a;
+}
+async function ht(i, t, e, s, o, n, l) {
+  const h = R(l.type, ot, "base64", "export type"), m = R(l.format, rt, "image/png", "export format"), f = l.quality, g = l.width ?? e.width, p = l.height ?? e.height;
+  (s === "circle" || s === "rounded-rectangle") && m === "image/jpeg" && console.warn(
+    `Kiri: exporting a ${s}-shaped frame as image/jpeg — JPEG has no alpha channel, so the area outside the shape will render as solid black instead of transparent. Use image/png or image/webp instead.`
+  );
+  const c = nt(
+    i,
+    t,
+    e,
+    g,
+    p,
+    s,
+    o,
+    n
+  );
+  return h === "canvas" ? c : h === "base64" ? c.toDataURL(m, f) : new Promise((u, r) => {
+    c.toBlob(
+      (a) => a ? u(a) : r(new Error("Kiri: canvas.toBlob failed")),
+      m,
+      f
+    );
+  });
+}
+async function lt(i, t) {
+  const e = t.fieldName ?? "file", s = t.fileName ?? `crop.${mt(t.format ?? "image/png")}`, o = new FormData();
+  o.append(e, i, s);
+  for (const [n, l] of Object.entries(t.extraFields ?? {}))
+    o.append(n, l);
+  return fetch(t.url, {
+    ...t.fetchOptions,
+    method: "POST",
+    body: o
+  });
+}
+function mt(i) {
+  switch (i) {
+    case "image/jpeg":
+      return "jpg";
+    case "image/webp":
+      return "webp";
+    default:
+      return "png";
+  }
+}
+const H = 200, K = 20, ft = 20, ct = ["rectangle", "circle", "rounded-rectangle"], dt = ["top", "bottom", "left", "right"];
+function pt(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 ut {
+  /**
+   * @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 = {}) {
+    z(this, "container");
+    z(this, "opts");
+    z(this, "stage");
+    z(this, "gestureHandle");
+    z(this, "resizeHandle", null);
+    z(this, "zoomerHandle", null);
+    z(this, "naturalSize", { width: 0, height: 0 });
+    z(this, "state", {
+      zoom: 1,
+      offset: { x: 0, y: 0 },
+      rotation: 0,
+      flip: { horizontal: !1, vertical: !1 },
+      filters: $,
+      framePosition: { x: 0, y: 0 }
+    });
+    /**
+     * `movableFrame` mode only: the image's fixed on-screen size, frozen at
+     * `load()` time and recomputed on `rotate()` — see `getFixedImageSize()`.
+     */
+    z(this, "fixedImageSize", { width: 0, height: 0 });
+    /** Snapshot taken right after `load()` resolves, so `reset()` has something to revert to. */
+    z(this, "initialState", null);
+    z(this, "listeners", { change: [] });
+    var s, o, n, l;
+    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: R(
+          (s = e.frame) == null ? void 0 : s.shape,
+          ct,
+          "rectangle",
+          "frame.shape"
+        ),
+        width: ((o = e.frame) == null ? void 0 : o.width) ?? H,
+        height: ((n = e.frame) == null ? void 0 : n.height) ?? H,
+        cornerRadius: ((l = e.frame) == null ? void 0 : l.cornerRadius) ?? ft
+      },
+      minZoom: e.minZoom ?? 1,
+      maxZoom: e.maxZoom ?? 4,
+      rotatable: e.rotatable ?? !0,
+      flippable: e.flippable ?? !0,
+      resizableFrame: e.resizableFrame ?? !1,
+      lockAspectRatio: e.lockAspectRatio ?? !1,
+      movableFrame: e.movableFrame ?? !1,
+      mouseWheelZoom: pt(e.mouseWheelZoom),
+      useExifOrientation: e.useExifOrientation ?? !0,
+      uploader: e.uploader,
+      autoSizeStage: e.autoSizeStage ?? !0,
+      showZoomer: e.showZoomer ?? !1,
+      zoomerPosition: R(
+        e.zoomerPosition,
+        dt,
+        "bottom",
+        "zoomerPosition"
+      )
+    }, this.state.filters = O($, e.filters ?? {}), this.stage = q(
+      this.container,
+      this.opts.frame.shape,
+      this.opts.frame.width,
+      this.opts.frame.height,
+      this.opts.frame.cornerRadius,
+      this.opts.movableFrame,
+      {
+        show: this.opts.showZoomer,
+        position: this.opts.zoomerPosition,
+        min: this.opts.minZoom,
+        max: this.opts.maxZoom,
+        value: this.state.zoom
+      }
+    ), this.opts.autoSizeStage && this.syncStageSize(), U(this.stage.imgEl, this.state.filters, this.stage.sharpenKernelEl, this.stage.sharpenFilterId), this.stage.zoomerEl && this.enableZoomer(this.stage.zoomerEl), this.gestureHandle = tt(
+      this.stage.stageEl,
+      {
+        getNaturalSize: () => this.naturalSize,
+        getFrameSize: () => this.getFrameSize(),
+        getState: () => this.state,
+        getMinMaxZoom: () => ({ min: this.opts.minZoom, max: this.opts.maxZoom }),
+        setState: (h) => this.commitState(h),
+        reset: () => this.reset(),
+        getFixedImageSize: () => this.fixedImageSize
+      },
+      { mouseWheelZoom: this.opts.mouseWheelZoom, movableFrame: this.opts.movableFrame }
+    ), this.opts.resizableFrame && this.enableFrameResize();
+  }
+  /**
+   * Loads an image, replacing whatever was loaded before. EXIF orientation
+   * (rotation + horizontal flip) is corrected automatically unless
+   * `useExifOrientation: false` was passed to the constructor — only for
+   * `File`/`Blob` sources, since a plain URL string can't be read for EXIF
+   * data without an extra fetch.
+   * @param source A `File` (e.g. from a file input), a `Blob`, or a URL string.
+   * @param loadOptions Initial `zoom`/`offset`/`rotation`/`flip`.
+   */
+  async load(t, e = {}) {
+    var p, c;
+    let s = I(e.rotation ?? 0), o = ((p = e.flip) == null ? void 0 : p.horizontal) ?? !1;
+    const n = ((c = e.flip) == null ? void 0 : c.vertical) ?? !1;
+    let l = null, h;
+    if (typeof t == "string")
+      h = t;
+    else {
+      if (this.opts.useExifOrientation) {
+        const u = await t.arrayBuffer(), r = et(u), a = st(r);
+        s = I(s + a.rotation), o = o !== a.flipHorizontal;
+      }
+      l = URL.createObjectURL(t), h = l;
+    }
+    try {
+      await new Promise((u, r) => {
+        this.stage.imgEl.onload = () => u(), this.stage.imgEl.onerror = () => r(new Error("Kiri: failed to load image")), this.stage.imgEl.src = h;
+      });
+    } finally {
+      l && URL.revokeObjectURL(l);
+    }
+    this.naturalSize = {
+      width: this.stage.imgEl.naturalWidth,
+      height: this.stage.imgEl.naturalHeight
+    };
+    const m = this.opts.movableFrame ? 1 : C(e.zoom ?? this.opts.minZoom, this.opts.minZoom, this.opts.maxZoom), f = v(this.naturalSize, this.getFrameSize(), s, m), g = this.opts.movableFrame ? { x: 0, y: 0 } : w(e.offset ?? { x: 0, y: 0 }, f, this.getFrameSize());
+    this.fixedImageSize = v(this.naturalSize, this.getFrameSize(), s, 1), this.opts.movableFrame && this.opts.autoSizeStage && this.syncStageSizeToFixedImage(), this.commitState({
+      zoom: m,
+      offset: g,
+      rotation: s,
+      flip: { horizontal: o, vertical: n },
+      filters: this.state.filters,
+      framePosition: { x: 0, y: 0 }
+    }), this.initialState = this.getState();
+  }
+  /** A snapshot of the current state — mutating the returned object has no effect. */
+  getState() {
+    return {
+      zoom: this.state.zoom,
+      offset: { ...this.state.offset },
+      rotation: this.state.rotation,
+      flip: { ...this.state.flip },
+      filters: { ...this.state.filters },
+      framePosition: { ...this.state.framePosition }
+    };
+  }
+  /**
+   * Sets the zoom to an absolute value, clamped to `[minZoom, maxZoom]`.
+   * No-op if `movableFrame: true` — the image never zooms in that mode.
+   */
+  setZoom(t) {
+    if (this.opts.movableFrame) return;
+    const e = C(t, this.opts.minZoom, this.opts.maxZoom), s = v(
+      this.naturalSize,
+      this.getFrameSize(),
+      this.state.rotation,
+      e
+    ), o = w(this.state.offset, s, this.getFrameSize());
+    this.commitState({ ...this.state, zoom: e, offset: o });
+  }
+  /**
+   * 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. No-op if `movableFrame: true` — the image never
+   * pans in that mode; see `setFramePosition()` instead.
+   */
+  setOffset(t) {
+    if (this.opts.movableFrame) return;
+    const e = v(
+      this.naturalSize,
+      this.getFrameSize(),
+      this.state.rotation,
+      this.state.zoom
+    ), s = w(t, e, this.getFrameSize());
+    this.commitState({ ...this.state, offset: s });
+  }
+  /**
+   * Sets the frame's position to an absolute value (offset from stage
+   * center, in stage pixels), clamped so the frame stays fully within the
+   * image's fixed bounds. Only meaningful — and only takes effect — when
+   * `movableFrame: true`; a no-op otherwise, since the frame always stays
+   * centered in the default mode.
+   */
+  setFramePosition(t) {
+    if (!this.opts.movableFrame) return;
+    const e = w(t, this.fixedImageSize, this.getFrameSize());
+    this.commitState({ ...this.state, framePosition: e });
+  }
+  /**
+   * Reverts zoom/offset/rotation/flip/filters/framePosition 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 },
+      framePosition: { ...this.initialState.framePosition }
+    });
+  }
+  /**
+   * Rotates relative to the current rotation, snapped to the nearest 90°.
+   * No-op if `rotatable: false` was passed to the constructor.
+   */
+  rotate(t) {
+    if (!this.opts.rotatable) return;
+    const e = Math.round(t / 90) * 90, s = I(this.state.rotation + e);
+    if (this.opts.movableFrame) {
+      const l = this.fixedImageSize.width / F(this.naturalSize, this.state.rotation).width, h = F(this.naturalSize, s);
+      this.fixedImageSize = {
+        width: h.width * l,
+        height: h.height * l
+      }, this.opts.autoSizeStage && this.syncStageSizeToFixedImage();
+      const m = w(this.state.framePosition, this.fixedImageSize, this.getFrameSize());
+      this.commitState({ ...this.state, rotation: s, framePosition: m });
+      return;
+    }
+    const o = v(
+      this.naturalSize,
+      this.getFrameSize(),
+      s,
+      this.state.zoom
+    ), n = w(this.state.offset, o, this.getFrameSize());
+    this.commitState({ ...this.state, rotation: s, offset: n });
+  }
+  /**
+   * Toggles horizontal flip. Always mirrors left-right as currently
+   * displayed on screen, regardless of the current `rotation` — not the
+   * image's own pre-rotation axes, so the visible effect stays "horizontal"
+   * no matter how the image is rotated. No-op if `flippable: false`.
+   */
+  flipHorizontal() {
+    if (!this.opts.flippable) return;
+    const t = { ...this.state.flip, horizontal: !this.state.flip.horizontal };
+    this.commitState({ ...this.state, flip: t });
+  }
+  /**
+   * Toggles vertical flip. Always mirrors top-to-bottom as currently
+   * displayed on screen, regardless of the current `rotation`. No-op if
+   * `flippable: false`.
+   */
+  flipVertical() {
+    if (!this.opts.flippable) return;
+    const t = { ...this.state.flip, vertical: !this.state.flip.vertical };
+    this.commitState({ ...this.state, flip: t });
+  }
+  /**
+   * Resizes the frame. Also resizes the stage to match, if
+   * `autoSizeStage: true` (the default) — except in `movableFrame` mode,
+   * where the stage stays pinned to the fixed image's own size (see
+   * `fixedImageSize`'s doc comment) instead of following the frame; letting
+   * the stage shrink along with the frame there would clip the (unchanged,
+   * still full-size) image down to whatever's left, visually reading as the
+   * picture itself shrinking even though its actual rendered size never
+   * changes. Each axis is clamped to a 20px minimum.
+   */
+  setFrameSize(t, e) {
+    if (this.opts.frame.width = Math.max(K, t), this.opts.frame.height = Math.max(K, e), this.opts.movableFrame && (this.opts.frame.width = Math.min(this.opts.frame.width, this.fixedImageSize.width), this.opts.frame.height = Math.min(this.opts.frame.height, this.fixedImageSize.height)), j(this.stage.frameEl, this.opts.frame.width, this.opts.frame.height), this.opts.autoSizeStage && !this.opts.movableFrame && this.syncStageSize(), this.opts.movableFrame) {
+      const n = w(this.state.framePosition, this.fixedImageSize, this.getFrameSize());
+      this.commitState({ ...this.state, framePosition: n });
+      return;
+    }
+    const s = v(
+      this.naturalSize,
+      this.getFrameSize(),
+      this.state.rotation,
+      this.state.zoom
+    ), o = w(this.state.offset, s, this.getFrameSize());
+    this.commitState({ ...this.state, offset: o });
+  }
+  /**
+   * 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: O(this.state.filters, t) });
+  }
+  /**
+   * Renders the current crop. A circle or rounded-rectangle frame is a real
+   * clip in the output (transparent corners on PNG/WebP); either shape
+   * exported as JPEG warns and renders solid black corners instead, since
+   * JPEG has no alpha channel.
+   * @returns A data URL string (`type: "base64"`, the default), a `Blob`, or an `HTMLCanvasElement`.
+   */
+  async export(t = {}) {
+    return ht(
+      this.stage.imgEl,
+      this.getEffectiveStateForCrop(),
+      this.getFrameSize(),
+      this.opts.frame.shape,
+      this.opts.frame.cornerRadius,
+      this.stage.sharpenFilterId,
+      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 at(this.naturalSize, this.getFrameSize(), this.getEffectiveStateForCrop());
+  }
+  /**
+   * 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 ?? lt)(s, { ...e, url: t });
+  }
+  /** Subscribes to `"change"` — fires on every state update (drag/zoom/rotate/flip/filters), and once after `load()` resolves. */
+  on(t, e) {
+    this.listeners[t].push(e);
+  }
+  /** Unsubscribes a callback previously passed to {@link on}. */
+  off(t, e) {
+    this.listeners[t] = this.listeners[t].filter((s) => s !== e);
+  }
+  /**
+   * Tears the instance down: removes all pointer/wheel event listeners
+   * (drag/zoom gestures), the resize-handle listener (if `resizableFrame`),
+   * and the zoom-slider listener (if `showZoomer`); clears the container's
+   * `innerHTML`, leaving an empty container element; and clears all
+   * `"change"` listeners. Call this when you're done with an instance (e.g.
+   * unmounting) to avoid leaking listeners.
+   */
+  destroy() {
+    var t, e;
+    this.gestureHandle.destroy(), (t = this.resizeHandle) == null || t.destroy(), (e = this.zoomerHandle) == null || e.destroy(), this.container.innerHTML = "", this.listeners.change = [];
+  }
+  getFrameSize() {
+    return { width: this.opts.frame.width, height: this.opts.frame.height };
+  }
+  /**
+   * `computeCropRegion()`/`renderCropToCanvas()` only know one model: an
+   * image shifted by `offset` under a frame fixed at center, scaled by
+   * `computeCoverScale(natural, frame, rotation) * zoom` — where `frame` is
+   * whatever's passed in, i.e. the *current* frame size. In `movableFrame`
+   * mode neither of those assumptions holds as-is: it's the frame that
+   * shifts (by `framePosition`, image fixed at center), and the image's
+   * scale must stay pinned to `fixedImageSize` regardless of how the frame
+   * has since been resized — not recomputed from the current frame size,
+   * which is exactly what those functions would otherwise do internally.
+   *
+   * Both are fixed by substituting two `state` fields before calling them,
+   * rather than changing either function:
+   * - `offset = -framePosition` — "frame moved right by d" and "image moved
+   *   left by d" describe the identical relative geometry, so this alone
+   *   carries the frame's position into the existing math unmodified.
+   *   (`state.offset` is always `{0,0}` in this mode already, since
+   *   `setOffset()`/gesture panning are no-ops here — this substitution is
+   *   what actually does the work, not a redundant no-op.)
+   * - `zoom` = a value chosen so that
+   *   `computeCoverScale(natural, currentFrame, rotation) * zoom` evaluates
+   *   to exactly `fixedImageSize`'s own scale, whatever the current frame
+   *   size is — i.e. `zoom = frozenScale / computeCoverScale(natural,
+   *   currentFrame, rotation)`, which cancels the current-frame-size term
+   *   out algebraically. Caught by an actual pixel test (a moved+resized
+   *   frame exported as fully transparent) before trusting the offset
+   *   substitution was sufficient on its own — it wasn't.
+   */
+  getEffectiveStateForCrop() {
+    if (!this.opts.movableFrame) return this.state;
+    const t = this.fixedImageSize.width / F(this.naturalSize, this.state.rotation).width, e = L(this.naturalSize, this.getFrameSize(), this.state.rotation);
+    return {
+      ...this.state,
+      offset: { x: -this.state.framePosition.x, y: -this.state.framePosition.y },
+      zoom: t / e
+    };
+  }
+  syncStageSize() {
+    N(
+      this.stage.stageEl,
+      this.opts.frame.width + D * 2,
+      this.opts.frame.height + D * 2
+    );
+  }
+  // movableFrame's stage-sizing counterpart to syncStageSize() above: pins
+  // the stage to the fixed image's own size (so the whole image stays
+  // visible/on-screen) instead of the frame's, which may since have been
+  // resized independently. Called after load() and rotate() establish/
+  // recompute fixedImageSize — never from setFrameSize(), which is the
+  // entire point of this mode.
+  syncStageSizeToFixedImage() {
+    N(
+      this.stage.stageEl,
+      this.fixedImageSize.width + D * 2,
+      this.fixedImageSize.height + D * 2
+    );
+  }
+  commitState(t) {
+    this.state = t;
+    const e = this.opts.movableFrame ? this.fixedImageSize.width / F(this.naturalSize, t.rotation).width : L(this.naturalSize, this.getFrameSize(), t.rotation) * t.zoom;
+    J(this.stage.imageLayerEl, t, e), U(this.stage.imgEl, t.filters, this.stage.sharpenKernelEl, this.stage.sharpenFilterId), this.opts.movableFrame && Q(this.stage.frameEl, t.framePosition), this.stage.zoomerEl && (this.stage.zoomerEl.value = String(t.zoom));
+    for (const s of this.listeners.change) s(this.getState());
+  }
+  enableZoomer(t) {
+    const e = () => this.setZoom(Number(t.value));
+    t.addEventListener("input", e), this.zoomerHandle = {
+      destroy() {
+        t.removeEventListener("input", e);
+      }
+    };
+  }
+  enableFrameResize() {
+    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 s of t) {
+      const o = document.createElement("div");
+      o.className = `kiri-frame-handle kiri-frame-handle--${s.name}`, Object.assign(o.style, s.edge), this.stage.frameEl.appendChild(o);
+      let n = null;
+      const l = (f) => {
+        f.stopPropagation(), o.setPointerCapture(f.pointerId), n = {
+          x: f.clientX,
+          y: f.clientY,
+          width: this.opts.frame.width,
+          height: this.opts.frame.height
+        };
+      }, h = (f) => {
+        if (!n) return;
+        const g = (f.clientX - n.x) * 2 * s.signX, p = (f.clientY - n.y) * 2 * s.signY, c = n.width + g, u = n.height + p;
+        if (this.opts.lockAspectRatio) {
+          const r = n.width / n.height;
+          Math.abs(c - n.width) >= Math.abs(u - n.height) * r ? this.setFrameSize(c, c / r) : this.setFrameSize(u * r, u);
+        } else
+          this.setFrameSize(c, u);
+      }, m = () => {
+        n = null;
+      };
+      o.addEventListener("pointerdown", l), o.addEventListener("pointermove", h), o.addEventListener("pointerup", m), o.addEventListener("pointercancel", m), e.push(() => {
+        o.removeEventListener("pointerdown", l), o.removeEventListener("pointermove", h), o.removeEventListener("pointerup", m), o.removeEventListener("pointercancel", m), o.remove();
+      });
+    }
+    this.resizeHandle = {
+      destroy() {
+        for (const s of e) s();
+      }
+    };
+  }
+}
+export {
+  ut as Kiri
+};
+//# sourceMappingURL=kiri.mjs.map