@michaelyagi/kiri 0.1.0-alpha.2

package/dist/kiri.js

@@ -0,0 +1,779 @@
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports) : typeof define === "function" && define.amd ? define(["exports"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.Kiri = {}));
+})(this, function(exports2) {
+  "use strict";var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+  const DEFAULT_FILTERS = {
+    brightness: 1,
+    contrast: 1,
+    saturation: 1,
+    grayscale: false,
+    sepia: false
+  };
+  function mergeFilters(current, partial) {
+    return {
+      brightness: Math.max(0, partial.brightness ?? current.brightness),
+      contrast: Math.max(0, partial.contrast ?? current.contrast),
+      saturation: Math.max(0, partial.saturation ?? current.saturation),
+      grayscale: partial.grayscale ?? current.grayscale,
+      sepia: partial.sepia ?? current.sepia
+    };
+  }
+  function buildFilterString(filters) {
+    const parts = [
+      `brightness(${filters.brightness})`,
+      `contrast(${filters.contrast})`,
+      `saturate(${filters.saturation})`
+    ];
+    if (filters.grayscale) parts.push("grayscale(1)");
+    if (filters.sepia) parts.push("sepia(1)");
+    return parts.join(" ");
+  }
+  function createStage(container, frameShape, frameWidth, frameHeight, zoomer) {
+    container.innerHTML = "";
+    const stageEl = document.createElement("div");
+    stageEl.className = "kiri-stage";
+    const imageLayerEl = document.createElement("div");
+    imageLayerEl.className = "kiri-image-layer";
+    const imgEl = document.createElement("img");
+    imgEl.draggable = false;
+    imageLayerEl.appendChild(imgEl);
+    const frameEl = document.createElement("div");
+    frameEl.className = frameShape === "circle" ? "kiri-frame kiri-frame--circle" : "kiri-frame";
+    setFrameSize(frameEl, frameWidth, frameHeight);
+    stageEl.appendChild(imageLayerEl);
+    stageEl.appendChild(frameEl);
+    let zoomerEl = null;
+    if (zoomer.show) {
+      const rootEl = document.createElement("div");
+      rootEl.className = `kiri-root kiri-root--${zoomer.position}`;
+      zoomerEl = document.createElement("input");
+      zoomerEl.type = "range";
+      zoomerEl.className = "kiri-zoomer";
+      zoomerEl.min = String(zoomer.min);
+      zoomerEl.max = String(zoomer.max);
+      zoomerEl.step = "0.01";
+      zoomerEl.value = String(zoomer.value);
+      rootEl.appendChild(stageEl);
+      rootEl.appendChild(zoomerEl);
+      container.appendChild(rootEl);
+    } else {
+      container.appendChild(stageEl);
+    }
+    return { stageEl, frameEl, imageLayerEl, imgEl, zoomerEl };
+  }
+  function setFrameSize(frameEl, width, height) {
+    frameEl.style.width = `${width}px`;
+    frameEl.style.height = `${height}px`;
+  }
+  const STAGE_AUTO_SIZE_PADDING = 20;
+  function setStageSize(stageEl, width, height) {
+    stageEl.style.width = `${width}px`;
+    stageEl.style.height = `${height}px`;
+  }
+  function applyTransform(imageLayerEl, state, renderedScale) {
+    const scaleX = renderedScale * (state.flip.horizontal ? -1 : 1);
+    const scaleY = renderedScale * (state.flip.vertical ? -1 : 1);
+    imageLayerEl.style.transform = `translate(-50%, -50%) translate(${state.offset.x}px, ${state.offset.y}px) rotate(${state.rotation}deg) scale(${scaleX}, ${scaleY})`;
+  }
+  function applyFilters(imgEl, filters) {
+    imgEl.style.filter = buildFilterString(filters);
+  }
+  function effectiveNaturalSize(natural, rotationDeg) {
+    const swapped = (rotationDeg / 90 % 2 + 2) % 2 === 1;
+    return swapped ? { width: natural.height, height: natural.width } : { width: natural.width, height: natural.height };
+  }
+  function computeCoverScale(natural, frame, rotationDeg) {
+    const eff = effectiveNaturalSize(natural, rotationDeg);
+    if (eff.width <= 0 || eff.height <= 0) return 1;
+    return Math.max(frame.width / eff.width, frame.height / eff.height);
+  }
+  function effectiveRenderedSize(natural, frame, rotationDeg, zoom) {
+    const eff = effectiveNaturalSize(natural, rotationDeg);
+    const scale = computeCoverScale(natural, frame, rotationDeg) * zoom;
+    return { width: eff.width * scale, height: eff.height * scale };
+  }
+  function clampZoom(zoom, minZoom, maxZoom) {
+    return Math.min(Math.max(zoom, minZoom), maxZoom);
+  }
+  function clampOffset(offset, rendered, frame) {
+    const maxX = Math.max(0, (rendered.width - frame.width) / 2);
+    const maxY = Math.max(0, (rendered.height - frame.height) / 2);
+    return {
+      x: Math.min(Math.max(offset.x, -maxX), maxX) || 0,
+      y: Math.min(Math.max(offset.y, -maxY), maxY) || 0
+    };
+  }
+  function normalizeRotation(deg) {
+    return (deg % 360 + 360) % 360;
+  }
+  function pointerDistance(a, b) {
+    return Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY);
+  }
+  function attachGestures(stageEl, callbacks, options) {
+    const activePointers = /* @__PURE__ */ new Map();
+    let dragStart = null;
+    let pinchStartDistance = 0;
+    let pinchStartZoom = 1;
+    function applyClampedState(next) {
+      const { min, max } = callbacks.getMinMaxZoom();
+      const zoom = clampZoom(next.zoom, min, max);
+      const rendered = effectiveRenderedSize(
+        callbacks.getNaturalSize(),
+        callbacks.getFrameSize(),
+        next.rotation,
+        zoom
+      );
+      const offset = clampOffset(next.offset, rendered, callbacks.getFrameSize());
+      callbacks.setState({
+        zoom,
+        offset,
+        rotation: normalizeRotation(next.rotation),
+        flip: next.flip,
+        filters: next.filters
+      });
+    }
+    function onPointerDown(e) {
+      stageEl.setPointerCapture(e.pointerId);
+      activePointers.set(e.pointerId, e);
+      if (activePointers.size === 1) {
+        const state = callbacks.getState();
+        dragStart = { x: e.clientX, y: e.clientY, offset: state.offset };
+        stageEl.classList.add("kiri-dragging");
+      } else if (activePointers.size === 2) {
+        dragStart = null;
+        const [a, b] = [...activePointers.values()];
+        pinchStartDistance = pointerDistance(a, b);
+        pinchStartZoom = callbacks.getState().zoom;
+      }
+    }
+    function onPointerMove(e) {
+      if (!activePointers.has(e.pointerId)) return;
+      activePointers.set(e.pointerId, e);
+      if (activePointers.size === 2) {
+        const [a, b] = [...activePointers.values()];
+        const distance = pointerDistance(a, b);
+        if (pinchStartDistance > 0) {
+          const ratio = distance / pinchStartDistance;
+          const state = callbacks.getState();
+          applyClampedState({ ...state, zoom: pinchStartZoom * ratio });
+        }
+        return;
+      }
+      if (dragStart) {
+        const dx = e.clientX - dragStart.x;
+        const dy = e.clientY - dragStart.y;
+        const state = callbacks.getState();
+        applyClampedState({
+          ...state,
+          offset: { x: dragStart.offset.x + dx, y: dragStart.offset.y + dy }
+        });
+      }
+    }
+    function onPointerUp(e) {
+      activePointers.delete(e.pointerId);
+      if (activePointers.size < 2) pinchStartDistance = 0;
+      if (activePointers.size === 0) {
+        dragStart = null;
+        stageEl.classList.remove("kiri-dragging");
+      }
+    }
+    function onWheel(e) {
+      if (!options.mouseWheelZoom) return;
+      if (options.mouseWheelZoom === "ctrl" && !e.ctrlKey) return;
+      e.preventDefault();
+      const state = callbacks.getState();
+      const delta = -e.deltaY * 15e-4;
+      applyClampedState({ ...state, zoom: state.zoom * (1 + delta) });
+    }
+    stageEl.addEventListener("pointerdown", onPointerDown);
+    stageEl.addEventListener("pointermove", onPointerMove);
+    stageEl.addEventListener("pointerup", onPointerUp);
+    stageEl.addEventListener("pointercancel", onPointerUp);
+    stageEl.addEventListener("wheel", onWheel, { passive: false });
+    return {
+      destroy() {
+        stageEl.removeEventListener("pointerdown", onPointerDown);
+        stageEl.removeEventListener("pointermove", onPointerMove);
+        stageEl.removeEventListener("pointerup", onPointerUp);
+        stageEl.removeEventListener("pointercancel", onPointerUp);
+        stageEl.removeEventListener("wheel", onWheel);
+      }
+    };
+  }
+  function readExifOrientation(buffer) {
+    const view = new DataView(buffer);
+    if (view.byteLength < 4 || view.getUint16(0, false) !== 65496) return 1;
+    let offset = 2;
+    while (offset + 4 <= view.byteLength) {
+      const marker = view.getUint16(offset, false);
+      const size = view.getUint16(offset + 2, false);
+      if (marker === 65505) {
+        const exifOffset = offset + 4;
+        if (view.getUint32(exifOffset, false) !== 1165519206) return 1;
+        return readOrientationFromTiff(view, exifOffset + 6);
+      }
+      if ((marker & 65280) !== 65280) break;
+      offset += 2 + size;
+    }
+    return 1;
+  }
+  function readOrientationFromTiff(view, tiffStart) {
+    const littleEndian = view.getUint16(tiffStart, false) === 18761;
+    const firstIfdOffset = view.getUint32(tiffStart + 4, littleEndian);
+    const ifdStart = tiffStart + firstIfdOffset;
+    if (ifdStart + 2 > view.byteLength) return 1;
+    const entryCount = view.getUint16(ifdStart, littleEndian);
+    for (let i = 0; i < entryCount; i++) {
+      const entryOffset = ifdStart + 2 + i * 12;
+      if (entryOffset + 12 > view.byteLength) break;
+      const tag = view.getUint16(entryOffset, littleEndian);
+      if (tag === 274) {
+        const value = view.getUint16(entryOffset + 8, littleEndian);
+        return value >= 1 && value <= 8 ? value : 1;
+      }
+    }
+    return 1;
+  }
+  function orientationToTransform(orientation) {
+    switch (orientation) {
+      case 2:
+        return { rotation: 0, flipHorizontal: true };
+      case 3:
+        return { rotation: 180, flipHorizontal: false };
+      case 4:
+        return { rotation: 180, flipHorizontal: true };
+      case 5:
+        return { rotation: 90, flipHorizontal: true };
+      case 6:
+        return { rotation: 90, flipHorizontal: false };
+      case 7:
+        return { rotation: 270, flipHorizontal: true };
+      case 8:
+        return { rotation: 270, flipHorizontal: false };
+      default:
+        return { rotation: 0, flipHorizontal: false };
+    }
+  }
+  function resolveEnumOption(value, valid, fallback, optionName) {
+    if (value === void 0) return fallback;
+    if (valid.includes(value)) return value;
+    console.warn(
+      `Kiri: invalid ${optionName} "${value}" — defaulting to "${fallback}". Valid values: ${valid.join(", ")}.`
+    );
+    return fallback;
+  }
+  const VALID_EXPORT_TYPES = ["base64", "blob", "canvas"];
+  const VALID_EXPORT_FORMATS = ["image/jpeg", "image/png", "image/webp"];
+  function computeFrameSourceRect(rendered, offset, frame) {
+    return {
+      left: rendered.width / 2 - offset.x - frame.width / 2,
+      top: rendered.height / 2 - offset.y - frame.height / 2
+    };
+  }
+  function renderCropToCanvas(img, state, frame, outputWidth, outputHeight, frameShape) {
+    const natural = { width: img.naturalWidth, height: img.naturalHeight };
+    const scale = computeCoverScale(natural, frame, state.rotation) * state.zoom;
+    const rendered = effectiveRenderedSize(natural, frame, state.rotation, state.zoom);
+    const sourceCanvas = document.createElement("canvas");
+    sourceCanvas.width = Math.max(1, Math.round(rendered.width));
+    sourceCanvas.height = Math.max(1, Math.round(rendered.height));
+    const sctx = sourceCanvas.getContext("2d");
+    if (!sctx) throw new Error("Kiri: unable to get 2D canvas context");
+    sctx.translate(sourceCanvas.width / 2, sourceCanvas.height / 2);
+    sctx.rotate(state.rotation * Math.PI / 180);
+    sctx.scale(scale * (state.flip.horizontal ? -1 : 1), scale * (state.flip.vertical ? -1 : 1));
+    sctx.filter = buildFilterString(state.filters);
+    sctx.drawImage(img, -natural.width / 2, -natural.height / 2, natural.width, natural.height);
+    const { left: frameLeft, top: frameTop } = computeFrameSourceRect(
+      rendered,
+      state.offset,
+      frame
+    );
+    const outCanvas = document.createElement("canvas");
+    outCanvas.width = outputWidth;
+    outCanvas.height = outputHeight;
+    const octx = outCanvas.getContext("2d");
+    if (!octx) throw new Error("Kiri: unable to get 2D canvas context");
+    if (frameShape === "circle") {
+      octx.save();
+      octx.beginPath();
+      octx.ellipse(
+        outputWidth / 2,
+        outputHeight / 2,
+        outputWidth / 2,
+        outputHeight / 2,
+        0,
+        0,
+        Math.PI * 2
+      );
+      octx.clip();
+    }
+    octx.drawImage(
+      sourceCanvas,
+      frameLeft,
+      frameTop,
+      frame.width,
+      frame.height,
+      0,
+      0,
+      outputWidth,
+      outputHeight
+    );
+    if (frameShape === "circle") octx.restore();
+    return outCanvas;
+  }
+  async function exportCrop(img, state, frame, frameShape, options) {
+    const type = resolveEnumOption(options.type, VALID_EXPORT_TYPES, "base64", "export type");
+    const format = resolveEnumOption(options.format, VALID_EXPORT_FORMATS, "image/png", "export format");
+    const quality = options.quality;
+    const width = options.width ?? frame.width;
+    const height = options.height ?? frame.height;
+    if (frameShape === "circle" && format === "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 canvas = renderCropToCanvas(img, state, frame, width, height, frameShape);
+    if (type === "canvas") return canvas;
+    if (type === "base64") return canvas.toDataURL(format, quality);
+    return new Promise((resolve, reject) => {
+      canvas.toBlob(
+        (blob) => blob ? resolve(blob) : reject(new Error("Kiri: canvas.toBlob failed")),
+        format,
+        quality
+      );
+    });
+  }
+  async function uploadBlob(blob, options) {
+    const fieldName = options.fieldName ?? "file";
+    const fileName = options.fileName ?? `crop.${extensionFor(options.format ?? "image/png")}`;
+    const formData = new FormData();
+    formData.append(fieldName, blob, fileName);
+    for (const [key, value] of Object.entries(options.extraFields ?? {})) {
+      formData.append(key, value);
+    }
+    return fetch(options.url, {
+      ...options.fetchOptions,
+      method: "POST",
+      body: formData
+    });
+  }
+  function extensionFor(format) {
+    switch (format) {
+      case "image/jpeg":
+        return "jpg";
+      case "image/webp":
+        return "webp";
+      default:
+        return "png";
+    }
+  }
+  const DEFAULT_FRAME_SIZE = 200;
+  const MIN_FRAME_SIZE = 20;
+  const VALID_FRAME_SHAPES = ["rectangle", "circle"];
+  const VALID_ZOOMER_POSITIONS = ["top", "bottom", "left", "right"];
+  function resolveMouseWheelZoom(value) {
+    if (value === void 0) return true;
+    if (typeof value === "boolean" || value === "ctrl") return value;
+    console.warn(
+      `Kiri: invalid mouseWheelZoom "${String(value)}" — defaulting to true. Valid values: true, false, "ctrl".`
+    );
+    return true;
+  }
+  class Kiri {
+    /**
+     * @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(container, options = {}) {
+      __publicField(this, "container");
+      __publicField(this, "opts");
+      __publicField(this, "stage");
+      __publicField(this, "gestureHandle");
+      __publicField(this, "resizeHandle", null);
+      __publicField(this, "zoomerHandle", null);
+      __publicField(this, "naturalSize", { width: 0, height: 0 });
+      __publicField(this, "state", {
+        zoom: 1,
+        offset: { x: 0, y: 0 },
+        rotation: 0,
+        flip: { horizontal: false, vertical: false },
+        filters: DEFAULT_FILTERS
+      });
+      __publicField(this, "listeners", { change: [] });
+      var _a, _b, _c;
+      if (!container || typeof container.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 = container;
+      this.opts = {
+        frame: {
+          shape: resolveEnumOption(
+            (_a = options.frame) == null ? void 0 : _a.shape,
+            VALID_FRAME_SHAPES,
+            "rectangle",
+            "frame.shape"
+          ),
+          width: ((_b = options.frame) == null ? void 0 : _b.width) ?? DEFAULT_FRAME_SIZE,
+          height: ((_c = options.frame) == null ? void 0 : _c.height) ?? DEFAULT_FRAME_SIZE
+        },
+        minZoom: options.minZoom ?? 1,
+        maxZoom: options.maxZoom ?? 4,
+        rotatable: options.rotatable ?? true,
+        flippable: options.flippable ?? true,
+        resizableFrame: options.resizableFrame ?? false,
+        mouseWheelZoom: resolveMouseWheelZoom(options.mouseWheelZoom),
+        useExifOrientation: options.useExifOrientation ?? true,
+        uploader: options.uploader,
+        autoSizeStage: options.autoSizeStage ?? true,
+        showZoomer: options.showZoomer ?? false,
+        zoomerPosition: resolveEnumOption(
+          options.zoomerPosition,
+          VALID_ZOOMER_POSITIONS,
+          "bottom",
+          "zoomerPosition"
+        )
+      };
+      this.state.filters = mergeFilters(DEFAULT_FILTERS, options.filters ?? {});
+      this.stage = createStage(
+        this.container,
+        this.opts.frame.shape,
+        this.opts.frame.width,
+        this.opts.frame.height,
+        {
+          show: this.opts.showZoomer,
+          position: this.opts.zoomerPosition,
+          min: this.opts.minZoom,
+          max: this.opts.maxZoom,
+          value: this.state.zoom
+        }
+      );
+      if (this.opts.autoSizeStage) this.syncStageSize();
+      applyFilters(this.stage.imgEl, this.state.filters);
+      if (this.stage.zoomerEl) this.enableZoomer(this.stage.zoomerEl);
+      this.gestureHandle = attachGestures(
+        this.stage.stageEl,
+        {
+          getNaturalSize: () => this.naturalSize,
+          getFrameSize: () => this.getFrameSize(),
+          getState: () => this.state,
+          getMinMaxZoom: () => ({ min: this.opts.minZoom, max: this.opts.maxZoom }),
+          setState: (next) => this.commitState(next)
+        },
+        { mouseWheelZoom: this.opts.mouseWheelZoom }
+      );
+      if (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(source, loadOptions = {}) {
+      var _a, _b;
+      let rotation = normalizeRotation(loadOptions.rotation ?? 0);
+      let flipHorizontal = ((_a = loadOptions.flip) == null ? void 0 : _a.horizontal) ?? false;
+      const flipVertical = ((_b = loadOptions.flip) == null ? void 0 : _b.vertical) ?? false;
+      let objectUrl = null;
+      let url;
+      if (typeof source === "string") {
+        url = source;
+      } else {
+        if (this.opts.useExifOrientation) {
+          const buffer = await source.arrayBuffer();
+          const orientation = readExifOrientation(buffer);
+          const exifTransform = orientationToTransform(orientation);
+          rotation = normalizeRotation(rotation + exifTransform.rotation);
+          flipHorizontal = flipHorizontal !== exifTransform.flipHorizontal;
+        }
+        objectUrl = URL.createObjectURL(source);
+        url = objectUrl;
+      }
+      await new Promise((resolve, reject) => {
+        this.stage.imgEl.onload = () => resolve();
+        this.stage.imgEl.onerror = () => reject(new Error("Kiri: failed to load image"));
+        this.stage.imgEl.src = url;
+      });
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+      this.naturalSize = {
+        width: this.stage.imgEl.naturalWidth,
+        height: this.stage.imgEl.naturalHeight
+      };
+      const zoom = clampZoom(
+        loadOptions.zoom ?? this.opts.minZoom,
+        this.opts.minZoom,
+        this.opts.maxZoom
+      );
+      const rendered = effectiveRenderedSize(this.naturalSize, this.getFrameSize(), rotation, zoom);
+      const offset = clampOffset(loadOptions.offset ?? { x: 0, y: 0 }, rendered, this.getFrameSize());
+      this.commitState({
+        zoom,
+        offset,
+        rotation,
+        flip: { horizontal: flipHorizontal, vertical: flipVertical },
+        filters: this.state.filters
+      });
+    }
+    /** 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 }
+      };
+    }
+    /** Sets the zoom to an absolute value, clamped to `[minZoom, maxZoom]`. */
+    setZoom(zoom) {
+      const clamped = clampZoom(zoom, this.opts.minZoom, this.opts.maxZoom);
+      const rendered = effectiveRenderedSize(
+        this.naturalSize,
+        this.getFrameSize(),
+        this.state.rotation,
+        clamped
+      );
+      const offset = clampOffset(this.state.offset, rendered, this.getFrameSize());
+      this.commitState({ ...this.state, zoom: clamped, offset });
+    }
+    /**
+     * Rotates relative to the current rotation, snapped to the nearest 90°.
+     * No-op if `rotatable: false` was passed to the constructor.
+     */
+    rotate(deltaDeg) {
+      if (!this.opts.rotatable) return;
+      const snapped = Math.round(deltaDeg / 90) * 90;
+      const rotation = normalizeRotation(this.state.rotation + snapped);
+      const rendered = effectiveRenderedSize(
+        this.naturalSize,
+        this.getFrameSize(),
+        rotation,
+        this.state.zoom
+      );
+      const offset = clampOffset(this.state.offset, rendered, this.getFrameSize());
+      this.commitState({ ...this.state, rotation, offset });
+    }
+    /** Toggles horizontal flip, independent of rotation. No-op if `flippable: false`. */
+    flipHorizontal() {
+      if (!this.opts.flippable) return;
+      const flip = { ...this.state.flip, horizontal: !this.state.flip.horizontal };
+      this.commitState({ ...this.state, flip });
+    }
+    /** Toggles vertical flip, independent of rotation. No-op if `flippable: false`. */
+    flipVertical() {
+      if (!this.opts.flippable) return;
+      const flip = { ...this.state.flip, vertical: !this.state.flip.vertical };
+      this.commitState({ ...this.state, flip });
+    }
+    /**
+     * Resizes the frame. Also resizes the stage to match, if
+     * `autoSizeStage: true` (the default). Each axis is clamped to a 20px
+     * minimum.
+     */
+    setFrameSize(width, height) {
+      this.opts.frame.width = Math.max(MIN_FRAME_SIZE, width);
+      this.opts.frame.height = Math.max(MIN_FRAME_SIZE, height);
+      setFrameSize(this.stage.frameEl, this.opts.frame.width, this.opts.frame.height);
+      if (this.opts.autoSizeStage) this.syncStageSize();
+      const rendered = effectiveRenderedSize(
+        this.naturalSize,
+        this.getFrameSize(),
+        this.state.rotation,
+        this.state.zoom
+      );
+      const offset = clampOffset(this.state.offset, rendered, this.getFrameSize());
+      this.commitState({ ...this.state, offset });
+    }
+    /**
+     * Merges a partial update into the current filters (omitted fields are
+     * left as they are). Numeric values are clamped to `>= 0`.
+     */
+    setFilters(filters) {
+      this.commitState({ ...this.state, filters: mergeFilters(this.state.filters, filters) });
+    }
+    /**
+     * Renders the current crop. A circle frame is a real clip in the output
+     * (transparent corners on PNG/WebP); a circle 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(options = {}) {
+      return exportCrop(
+        this.stage.imgEl,
+        this.state,
+        this.getFrameSize(),
+        this.opts.frame.shape,
+        options
+      );
+    }
+    /**
+     * 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(url, options = {}) {
+      const blob = await this.export({ ...options, type: "blob" });
+      const uploader = options.uploader ?? this.opts.uploader ?? uploadBlob;
+      return uploader(blob, { ...options, url });
+    }
+    /** Subscribes to `"change"` — fires on every state update (drag/zoom/rotate/flip/filters), and once after `load()` resolves. */
+    on(event, callback) {
+      this.listeners[event].push(callback);
+    }
+    /** Unsubscribes a callback previously passed to {@link on}. */
+    off(event, callback) {
+      this.listeners[event] = this.listeners[event].filter((cb) => cb !== callback);
+    }
+    /**
+     * 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 _a, _b;
+      this.gestureHandle.destroy();
+      (_a = this.resizeHandle) == null ? void 0 : _a.destroy();
+      (_b = this.zoomerHandle) == null ? void 0 : _b.destroy();
+      this.container.innerHTML = "";
+      this.listeners.change = [];
+    }
+    getFrameSize() {
+      return { width: this.opts.frame.width, height: this.opts.frame.height };
+    }
+    syncStageSize() {
+      setStageSize(
+        this.stage.stageEl,
+        this.opts.frame.width + STAGE_AUTO_SIZE_PADDING * 2,
+        this.opts.frame.height + STAGE_AUTO_SIZE_PADDING * 2
+      );
+    }
+    commitState(next) {
+      this.state = next;
+      const scale = computeCoverScale(this.naturalSize, this.getFrameSize(), next.rotation) * next.zoom;
+      applyTransform(this.stage.imageLayerEl, next, scale);
+      applyFilters(this.stage.imgEl, next.filters);
+      if (this.stage.zoomerEl) this.stage.zoomerEl.value = String(next.zoom);
+      for (const cb of this.listeners.change) cb(this.getState());
+    }
+    enableZoomer(zoomerEl) {
+      const onInput = () => this.setZoom(Number(zoomerEl.value));
+      zoomerEl.addEventListener("input", onInput);
+      this.zoomerHandle = {
+        destroy() {
+          zoomerEl.removeEventListener("input", onInput);
+        }
+      };
+    }
+    enableFrameResize() {
+      const handle = document.createElement("div");
+      handle.className = "kiri-frame-handle";
+      handle.style.right = "-5px";
+      handle.style.bottom = "-5px";
+      this.stage.frameEl.appendChild(handle);
+      let start = null;
+      const onDown = (e) => {
+        e.stopPropagation();
+        handle.setPointerCapture(e.pointerId);
+        start = {
+          x: e.clientX,
+          y: e.clientY,
+          width: this.opts.frame.width,
+          height: this.opts.frame.height
+        };
+      };
+      const onMove = (e) => {
+        if (!start) return;
+        const dx = (e.clientX - start.x) * 2;
+        const dy = (e.clientY - start.y) * 2;
+        this.setFrameSize(start.width + dx, start.height + dy);
+      };
+      const onUp = () => {
+        start = null;
+      };
+      handle.addEventListener("pointerdown", onDown);
+      handle.addEventListener("pointermove", onMove);
+      handle.addEventListener("pointerup", onUp);
+      handle.addEventListener("pointercancel", onUp);
+      this.resizeHandle = {
+        destroy() {
+          handle.removeEventListener("pointerdown", onDown);
+          handle.removeEventListener("pointermove", onMove);
+          handle.removeEventListener("pointerup", onUp);
+          handle.removeEventListener("pointercancel", onUp);
+          handle.remove();
+        }
+      };
+    }
+  }
+  class KiriBatch {
+    /** @param items An initial queue; more can be added later via `add()`. */
+    constructor(container, options = {}, items = []) {
+      /** The shared `Kiri` instance. Use its normal methods (drag/zoom/rotate/filters/etc.) to adjust the currently-loaded item. */
+      __publicField(this, "cropper");
+      __publicField(this, "items");
+      __publicField(this, "index", -1);
+      __publicField(this, "captures", []);
+      this.cropper = new Kiri(container, options);
+      this.items = [...items];
+    }
+    /** Appends an item to the queue. */
+    add(item) {
+      this.items.push(item);
+    }
+    /** Total number of queued items. */
+    get length() {
+      return this.items.length;
+    }
+    /** Loads the next queued image into `cropper`. Returns false once the queue is exhausted. */
+    async next() {
+      if (this.index + 1 >= this.items.length) return false;
+      this.index += 1;
+      const item = this.items[this.index];
+      await this.cropper.load(item.source, item.loadOptions);
+      return true;
+    }
+    /** Metadata for the currently loaded item, or null before the first next() / after exhaustion. */
+    current() {
+      return this.items[this.index] ?? null;
+    }
+    /** Exports the current crop and stores it, indexed by item order. */
+    async capture(options) {
+      const result = await this.cropper.export(options);
+      this.captures[this.index] = result;
+      return result;
+    }
+    /** All captures made so far, in item order (sparse where an item hasn't been captured yet). */
+    results() {
+      return [...this.captures];
+    }
+    /** Tears down the shared `Kiri` instance. */
+    destroy() {
+      this.cropper.destroy();
+    }
+  }
+  exports2.Kiri = Kiri;
+  exports2.KiriBatch = KiriBatch;
+  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
+});
+//# sourceMappingURL=kiri.js.map
+
+(function(){
+  if (typeof globalThis !== "undefined" && globalThis.Kiri && globalThis.Kiri.Kiri) {
+    var __KiriBatch = globalThis.Kiri.KiriBatch;
+    globalThis.Kiri = globalThis.Kiri.Kiri;
+    globalThis.KiriBatch = __KiriBatch;
+  }
+})();