@cropvue/core 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1183 @@
+'use strict';
+
+const vue = require('vue');
+
+const MIN_SCALE = 0.1;
+const MAX_SCALE = 10;
+const MIN_CROP_SIZE = 32;
+const SNAP_THRESHOLD_DEGREES = 3;
+
+function createTransformState(overrides = {}) {
+  return {
+    x: 0,
+    y: 0,
+    scale: 1,
+    rotation: 0,
+    flipX: false,
+    flipY: false,
+    ...overrides
+  };
+}
+function createCropState(dimensions, overrides = {}) {
+  const state = {
+    x: 0,
+    y: 0,
+    width: dimensions.width,
+    height: dimensions.height,
+    stencil: "rectangle",
+    ...overrides
+  };
+  if (state.stencil === "circle") {
+    state.aspectRatio = 1;
+    const size = Math.min(state.width, state.height);
+    if (state.width !== state.height) {
+      state.x = state.x + (state.width - size) / 2;
+      state.y = state.y + (state.height - size) / 2;
+      state.width = size;
+      state.height = size;
+    }
+  }
+  return state;
+}
+function normalizeAngle(degrees) {
+  let result = degrees % 360;
+  if (result > 180) result -= 360;
+  if (result < -180) result += 360;
+  return result;
+}
+function snapRotation(degrees) {
+  const snaps = [0, 90, 180, 270, 360];
+  const normalized = (degrees % 360 + 360) % 360;
+  for (const snap of snaps) {
+    if (Math.abs(normalized - snap) <= SNAP_THRESHOLD_DEGREES) {
+      return snap === 360 ? 0 : snap;
+    }
+  }
+  return degrees;
+}
+function applyRotation(state, degrees) {
+  const raw = state.rotation + degrees;
+  const rotation = normalizeAngle(raw);
+  return { ...state, rotation };
+}
+function applyFlip(state, axis) {
+  if (axis === "x") {
+    return { ...state, flipX: !state.flipX };
+  }
+  return { ...state, flipY: !state.flipY };
+}
+function applyZoom(state, delta) {
+  const scale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, state.scale + delta));
+  return { ...state, scale: Math.round(scale * 1e3) / 1e3 };
+}
+function applyPan(state, dx, dy) {
+  return { ...state, x: state.x + dx, y: state.y + dy };
+}
+function clampTransform(state, bounds) {
+  return {
+    ...state,
+    x: Math.min(bounds.maxX, Math.max(bounds.minX, state.x)),
+    y: Math.min(bounds.maxY, Math.max(bounds.minY, state.y))
+  };
+}
+function resetTransform(_state) {
+  return createTransformState();
+}
+
+function renderCrop(canvas, image, crop, transform, options = {}) {
+  let outWidth = crop.width;
+  let outHeight = crop.height;
+  if (options.maxWidth || options.maxHeight) {
+    const maxW = options.maxWidth ?? Infinity;
+    const maxH = options.maxHeight ?? Infinity;
+    const ratio = Math.min(maxW / outWidth, maxH / outHeight, 1);
+    outWidth = Math.round(outWidth * ratio);
+    outHeight = Math.round(outHeight * ratio);
+  }
+  canvas.width = outWidth;
+  canvas.height = outHeight;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return;
+  ctx.clearRect(0, 0, outWidth, outHeight);
+  if (crop.stencil === "circle") {
+    ctx.beginPath();
+    ctx.arc(outWidth / 2, outHeight / 2, Math.min(outWidth, outHeight) / 2, 0, Math.PI * 2);
+    ctx.closePath();
+    ctx.clip();
+  }
+  if (crop.stencil === "freeform" && crop.points && crop.points.length >= 3) {
+    const scaleX2 = outWidth / crop.width;
+    const scaleY2 = outHeight / crop.height;
+    ctx.beginPath();
+    ctx.moveTo(
+      (crop.points[0].x - crop.x) * scaleX2,
+      (crop.points[0].y - crop.y) * scaleY2
+    );
+    for (let i = 1; i < crop.points.length; i++) {
+      ctx.lineTo(
+        (crop.points[i].x - crop.x) * scaleX2,
+        (crop.points[i].y - crop.y) * scaleY2
+      );
+    }
+    ctx.closePath();
+    ctx.clip();
+  }
+  const scaleX = outWidth / crop.width;
+  const scaleY = outHeight / crop.height;
+  const imgW = image.naturalWidth;
+  const imgH = image.naturalHeight;
+  ctx.save();
+  ctx.scale(scaleX, scaleY);
+  ctx.translate(-crop.x, -crop.y);
+  ctx.translate(imgW / 2, imgH / 2);
+  ctx.translate(transform.x, transform.y);
+  ctx.scale(
+    transform.flipX ? -transform.scale : transform.scale,
+    transform.flipY ? -transform.scale : transform.scale
+  );
+  ctx.rotate(transform.rotation * Math.PI / 180);
+  ctx.translate(-imgW / 2, -imgH / 2);
+  ctx.drawImage(image, 0, 0);
+  ctx.restore();
+}
+function exportCrop(canvas, options) {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => {
+        if (blob) {
+          resolve(blob);
+        } else {
+          reject(new Error(`Canvas export failed: toBlob returned null (canvas size: ${canvas.width}x${canvas.height}, format: ${options.format})`));
+        }
+      },
+      options.format,
+      options.quality
+    );
+  });
+}
+
+const EXTENSION_MAP = {
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  png: "image/png",
+  webp: "image/webp",
+  gif: "image/gif",
+  bmp: "image/bmp",
+  avif: "image/avif"
+};
+function detectMimeType(file) {
+  if (file.type && file.type.startsWith("image/")) {
+    return file.type;
+  }
+  const ext = file.name.split(".").pop()?.toLowerCase() ?? "";
+  return EXTENSION_MAP[ext] ?? "image/jpeg";
+}
+let webpSupported = null;
+function supportsWebP() {
+  if (webpSupported !== null) return webpSupported;
+  if (typeof document === "undefined") {
+    webpSupported = false;
+    return false;
+  }
+  const canvas = document.createElement("canvas");
+  canvas.width = 1;
+  canvas.height = 1;
+  webpSupported = canvas.toDataURL("image/webp").startsWith("data:image/webp");
+  canvas.width = 0;
+  canvas.height = 0;
+  return webpSupported;
+}
+function getMimeForFormat(format) {
+  switch (format) {
+    case "jpeg":
+      return "image/jpeg";
+    case "png":
+      return "image/png";
+    case "webp":
+      return "image/webp";
+    case "auto":
+      return supportsWebP() ? "image/webp" : "image/jpeg";
+  }
+}
+function hasTransparency(mime) {
+  return mime === "image/png" || mime === "image/webp" || mime === "image/avif";
+}
+
+function chooseOutputFormat(format, inputMime) {
+  if (format === "auto" && hasTransparency(inputMime) && inputMime === "image/png") {
+    return "image/png";
+  }
+  return getMimeForFormat(format);
+}
+async function compressBlob(canvas, options) {
+  const outputMime = chooseOutputFormat(options.format, options.inputMime);
+  let quality = options.quality;
+  let blob = await exportCrop(canvas, { format: outputMime, quality });
+  if (options.maxInputSize && blob.size > options.maxInputSize) {
+    const maxAttempts = 3;
+    for (let i = 0; i < maxAttempts && blob.size > options.maxInputSize; i++) {
+      quality = Math.max(0.1, quality - 0.15);
+      blob = await exportCrop(canvas, { format: outputMime, quality });
+    }
+  }
+  return blob;
+}
+function useCompressor(options = {}) {
+  const isCompressing = vue.ref(false);
+  async function compress(canvas, inputFile) {
+    isCompressing.value = true;
+    try {
+      const inputMime = inputFile ? detectMimeType(inputFile) : "image/jpeg";
+      return await compressBlob(canvas, {
+        format: options.format ?? "auto",
+        quality: options.quality ?? 0.85,
+        inputMime,
+        maxInputSize: inputFile?.size
+      });
+    } finally {
+      isCompressing.value = false;
+    }
+  }
+  return { compress, isCompressing };
+}
+
+let cachedMaxSize = null;
+function getMaxCanvasSize() {
+  if (cachedMaxSize !== null) return cachedMaxSize;
+  if (typeof document === "undefined") {
+    cachedMaxSize = 4096;
+    return cachedMaxSize;
+  }
+  const canvas = document.createElement("canvas");
+  let low = 1024;
+  let high = 16384;
+  while (low < high) {
+    const mid = Math.floor((low + high + 1) / 2);
+    canvas.width = mid;
+    canvas.height = 1;
+    const ctx = canvas.getContext("2d");
+    if (ctx) {
+      ctx.fillRect(0, 0, 1, 1);
+      const pixel = ctx.getImageData(0, 0, 1, 1).data;
+      if (pixel[3] > 0) {
+        low = mid;
+      } else {
+        high = mid - 1;
+      }
+    } else {
+      high = mid - 1;
+    }
+  }
+  cachedMaxSize = low;
+  canvas.width = 0;
+  canvas.height = 0;
+  return cachedMaxSize;
+}
+function downsampleDimensions(width, height, maxDimension) {
+  if (width <= maxDimension && height <= maxDimension) {
+    return { width, height };
+  }
+  const ratio = Math.min(maxDimension / width, maxDimension / height);
+  return {
+    width: Math.round(width * ratio),
+    height: Math.round(height * ratio)
+  };
+}
+
+function loadImageFromFile(file) {
+  return new Promise((resolve, reject) => {
+    const url = URL.createObjectURL(file);
+    const img = new Image();
+    img.onload = () => {
+      URL.revokeObjectURL(url);
+      resolve({
+        element: img,
+        naturalWidth: img.naturalWidth,
+        naturalHeight: img.naturalHeight,
+        originalFile: file,
+        originalSize: file.size
+      });
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error(`Failed to load image: ${file.name}`));
+    };
+    img.src = url;
+  });
+}
+async function loadImageFromUrl(url) {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch image: ${url} (${response.status})`);
+  }
+  const blob = await response.blob();
+  const blobUrl = URL.createObjectURL(blob);
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      URL.revokeObjectURL(blobUrl);
+      resolve({
+        element: img,
+        naturalWidth: img.naturalWidth,
+        naturalHeight: img.naturalHeight,
+        originalSize: blob.size
+      });
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(blobUrl);
+      reject(new Error(`Failed to load image: ${url}`));
+    };
+    img.src = blobUrl;
+  });
+}
+function needsDownsample(width, height) {
+  const maxSize = getMaxCanvasSize();
+  return width > maxSize || height > maxSize;
+}
+function getSafeDimensions(width, height) {
+  const maxSize = getMaxCanvasSize();
+  return downsampleDimensions(width, height, maxSize);
+}
+
+function useCropper(options = {}) {
+  const transform = vue.ref(createTransformState());
+  const crop = vue.ref(
+    createCropState({ width: 0, height: 0 }, {
+      stencil: options.stencil ?? "rectangle",
+      aspectRatio: options.aspectRatio ?? void 0,
+      minWidth: options.minWidth,
+      minHeight: options.minHeight,
+      maxWidth: options.maxWidth,
+      maxHeight: options.maxHeight
+    })
+  );
+  const image = vue.ref(null);
+  const isReady = vue.ref(false);
+  const canvasRef = vue.ref(null);
+  function initCropForImage(img) {
+    const stencil = crop.value.stencil ?? options.stencil ?? "rectangle";
+    const aspectRatio = stencil === "circle" ? 1 : crop.value.aspectRatio ?? options.aspectRatio;
+    crop.value = createCropState(
+      { width: img.naturalWidth, height: img.naturalHeight },
+      {
+        stencil,
+        aspectRatio,
+        minWidth: options.minWidth,
+        minHeight: options.minHeight,
+        maxWidth: options.maxWidth,
+        maxHeight: options.maxHeight
+      }
+    );
+    transform.value = createTransformState();
+  }
+  async function loadFile(file) {
+    image.value = await loadImageFromFile(file);
+    initCropForImage(image.value);
+    isReady.value = true;
+  }
+  async function loadUrl(url) {
+    image.value = await loadImageFromUrl(url);
+    initCropForImage(image.value);
+    isReady.value = true;
+  }
+  function rotateLeft() {
+    transform.value = applyRotation(transform.value, -90);
+  }
+  function rotateRight() {
+    transform.value = applyRotation(transform.value, 90);
+  }
+  function rotateTo(degrees) {
+    transform.value = { ...transform.value, rotation: degrees };
+  }
+  function flipX() {
+    transform.value = applyFlip(transform.value, "x");
+  }
+  function flipY() {
+    transform.value = applyFlip(transform.value, "y");
+  }
+  function zoomTo(scale) {
+    transform.value = { ...transform.value, scale: Math.max(0.1, Math.min(10, scale)) };
+  }
+  function zoomBy(delta) {
+    transform.value = applyZoom(transform.value, delta);
+  }
+  function panTo(x, y) {
+    transform.value = { ...transform.value, x, y };
+  }
+  function reset() {
+    transform.value = resetTransform(transform.value);
+  }
+  function setCropArea(area) {
+    crop.value = { ...crop.value, ...area };
+  }
+  function setStencil(stencil) {
+    const prev = crop.value;
+    if (stencil === "circle") {
+      const size = Math.min(prev.width, prev.height);
+      const x = prev.x + (prev.width - size) / 2;
+      const y = prev.y + (prev.height - size) / 2;
+      crop.value = { ...prev, stencil, aspectRatio: 1, x, y, width: size, height: size };
+    } else {
+      const aspectRatio = prev.aspectRatio === 1 && prev.stencil === "circle" ? void 0 : prev.aspectRatio;
+      crop.value = { ...prev, stencil, aspectRatio };
+    }
+  }
+  function setAspectRatio(ratio) {
+    crop.value = { ...crop.value, aspectRatio: ratio ?? void 0 };
+  }
+  async function getResult(opts) {
+    const canvas = canvasRef.value ?? document.createElement("canvas");
+    const img = image.value;
+    if (!img) throw new Error("No image loaded");
+    renderCrop(canvas, img.element, crop.value, transform.value, {
+      maxWidth: opts?.maxWidth ?? options.outputMaxWidth,
+      maxHeight: opts?.maxHeight ?? options.outputMaxHeight
+    });
+    const inputMime = img.originalFile ? detectMimeType(img.originalFile) : "image/jpeg";
+    const blob = await compressBlob(canvas, {
+      format: opts?.format ?? options.outputFormat ?? "auto",
+      quality: opts?.quality ?? options.outputQuality ?? 0.85,
+      inputMime,
+      maxInputSize: img.originalSize
+    });
+    const url = URL.createObjectURL(blob);
+    const file = new File([blob], `cropped.${blob.type.split("/")[1] ?? "jpg"}`, {
+      type: blob.type
+    });
+    return {
+      blob,
+      file,
+      url,
+      coords: {
+        x: crop.value.x,
+        y: crop.value.y,
+        width: crop.value.width,
+        height: crop.value.height,
+        rotation: transform.value.rotation,
+        flipX: transform.value.flipX,
+        flipY: transform.value.flipY,
+        scale: transform.value.scale
+      },
+      width: canvas.width,
+      height: canvas.height,
+      originalWidth: img.naturalWidth,
+      originalHeight: img.naturalHeight
+    };
+  }
+  function getPreviewUrl() {
+    const canvas = canvasRef.value;
+    if (!canvas) return "";
+    return canvas.toDataURL();
+  }
+  function renderToCanvas() {
+    const canvas = canvasRef.value;
+    if (!canvas || !image.value) return;
+    renderCrop(canvas, image.value.element, crop.value, transform.value, {
+      maxWidth: options.outputMaxWidth,
+      maxHeight: options.outputMaxHeight
+    });
+  }
+  return {
+    // State
+    image,
+    transform,
+    crop,
+    isReady,
+    // Image loading
+    loadFile,
+    loadUrl,
+    // Manipulation
+    rotateLeft,
+    rotateRight,
+    rotateTo,
+    flipX,
+    flipY,
+    zoomTo,
+    zoomBy,
+    panTo,
+    reset,
+    // Crop area
+    setCropArea,
+    setStencil,
+    setAspectRatio,
+    // Output
+    getResult,
+    getPreviewUrl,
+    // Canvas
+    canvasRef,
+    renderToCanvas
+  };
+}
+
+const IMAGE_EXTENSIONS = /* @__PURE__ */ new Set([
+  ".jpg",
+  ".jpeg",
+  ".png",
+  ".gif",
+  ".webp",
+  ".bmp",
+  ".svg",
+  ".avif",
+  ".ico",
+  ".tiff",
+  ".tif"
+]);
+function hasImageExtension(filename) {
+  const ext = filename.lastIndexOf(".") !== -1 ? filename.slice(filename.lastIndexOf(".")).toLowerCase() : "";
+  return IMAGE_EXTENSIONS.has(ext);
+}
+function validateFile(file, options) {
+  if (file.size > options.maxSize) {
+    return {
+      type: "file-too-large",
+      maxSize: options.maxSize,
+      actualSize: file.size
+    };
+  }
+  const accepted = options.accept.some((pattern) => {
+    if (pattern === "image/*") {
+      if (file.type) return file.type.startsWith("image/");
+      return hasImageExtension(file.name);
+    }
+    if (file.type) return file.type === pattern;
+    const ext = file.name.lastIndexOf(".") !== -1 ? file.name.slice(file.name.lastIndexOf(".") + 1).toLowerCase() : "";
+    return pattern.endsWith(`/${ext}`);
+  });
+  if (!accepted) {
+    return {
+      type: "invalid-type",
+      accepted: options.accept,
+      actual: file.type
+    };
+  }
+  return null;
+}
+function useDropzone(options = {}) {
+  const isDragging = vue.ref(false);
+  const files = vue.ref([]);
+  const dropzoneRef = vue.ref(null);
+  const accept = options.accept ?? ["image/*"];
+  const maxSize = options.maxSize ?? Infinity;
+  const multiple = options.multiple ?? false;
+  function processFiles(fileList) {
+    const incoming = Array.from(fileList);
+    const valid = [];
+    for (const file of incoming) {
+      const error = validateFile(file, { accept, maxSize });
+      if (error) {
+        options.onError?.(error);
+      } else {
+        valid.push(file);
+      }
+    }
+    const result = multiple ? valid : valid.slice(0, 1);
+    if (result.length > 0) {
+      files.value = result;
+      options.onFiles?.(result);
+    }
+  }
+  function open() {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = accept.join(",");
+    input.multiple = multiple;
+    input.onchange = () => {
+      if (input.files) processFiles(input.files);
+    };
+    input.click();
+  }
+  function onDragOver(e) {
+    e.preventDefault();
+    isDragging.value = true;
+  }
+  function onDragLeave(e) {
+    e.preventDefault();
+    isDragging.value = false;
+  }
+  function onDrop(e) {
+    e.preventDefault();
+    isDragging.value = false;
+    if (e.dataTransfer?.files) {
+      processFiles(e.dataTransfer.files);
+    }
+  }
+  let currentEl = null;
+  function attachListeners(el) {
+    el.addEventListener("dragover", onDragOver);
+    el.addEventListener("dragleave", onDragLeave);
+    el.addEventListener("drop", onDrop);
+  }
+  function detachListeners(el) {
+    el.removeEventListener("dragover", onDragOver);
+    el.removeEventListener("dragleave", onDragLeave);
+    el.removeEventListener("drop", onDrop);
+  }
+  vue.watch(dropzoneRef, (newEl, oldEl) => {
+    if (oldEl) detachListeners(oldEl);
+    if (newEl) attachListeners(newEl);
+    currentEl = newEl;
+  }, { flush: "post" });
+  vue.onMounted(() => {
+    const el = dropzoneRef.value;
+    if (el && el !== currentEl) {
+      attachListeners(el);
+      currentEl = el;
+    }
+  });
+  vue.onUnmounted(() => {
+    if (currentEl) {
+      detachListeners(currentEl);
+      currentEl = null;
+    }
+  });
+  return { isDragging, files, dropzoneRef, open };
+}
+
+let nextId = 0;
+function generateId() {
+  return `cropvue-${++nextId}-${Date.now()}`;
+}
+function createQueue() {
+  const state = {
+    items: [],
+    currentIndex: -1
+  };
+  function add(files) {
+    const newItems = files.map((file) => ({
+      id: generateId(),
+      file,
+      thumbnail: URL.createObjectURL(file),
+      status: "pending"
+    }));
+    state.items.push(...newItems);
+    if (state.currentIndex === -1 && state.items.length > 0) {
+      state.currentIndex = 0;
+    }
+  }
+  function remove(index) {
+    if (index < 0 || index >= state.items.length) return;
+    const item = state.items[index];
+    URL.revokeObjectURL(item.thumbnail);
+    state.items.splice(index, 1);
+    if (state.items.length === 0) {
+      state.currentIndex = -1;
+    } else if (state.currentIndex >= state.items.length) {
+      state.currentIndex = state.items.length - 1;
+    }
+  }
+  function select(index) {
+    if (index >= 0 && index < state.items.length) {
+      state.currentIndex = index;
+    }
+  }
+  function next() {
+    if (state.currentIndex < state.items.length - 1) {
+      state.currentIndex++;
+    }
+  }
+  function previous() {
+    if (state.currentIndex > 0) {
+      state.currentIndex--;
+    }
+  }
+  function clear() {
+    for (const item of state.items) {
+      URL.revokeObjectURL(item.thumbnail);
+    }
+    state.items.length = 0;
+    state.currentIndex = -1;
+  }
+  function setResult(index, result) {
+    if (index >= 0 && index < state.items.length) {
+      state.items[index].result = result;
+      state.items[index].status = "done";
+    }
+  }
+  Object.assign(state, { add, remove, select, next, previous, clear, setResult });
+  return state;
+}
+function useImageQueue() {
+  const queue = createQueue();
+  const images = vue.ref(queue.items);
+  const current = vue.ref(queue.currentIndex);
+  function sync() {
+    images.value = [...queue.items];
+    current.value = queue.currentIndex;
+  }
+  function add(files) {
+    queue.add(files);
+    sync();
+  }
+  function remove(index) {
+    queue.remove(index);
+    sync();
+  }
+  function select(index) {
+    queue.select(index);
+    sync();
+  }
+  function next() {
+    queue.next();
+    sync();
+  }
+  function previous() {
+    queue.previous();
+    sync();
+  }
+  function clear() {
+    queue.clear();
+    sync();
+  }
+  const results = vue.computed(
+    () => queue.items.filter((i) => i.result).map((i) => i.result)
+  );
+  vue.onUnmounted(() => {
+    queue.clear();
+  });
+  return { images, current, add, remove, select, next, previous, clear, results };
+}
+
+function createUploadHandler(options) {
+  if (options.handler) {
+    return options.handler;
+  }
+  if (options.url) {
+    const url = options.url;
+    const fieldName = options.fieldName ?? "file";
+    const headers = options.headers ?? {};
+    return async (file, { onProgress, signal }) => {
+      const formData = new FormData();
+      formData.append(fieldName, file);
+      const xhr = new XMLHttpRequest();
+      return new Promise((resolve, reject) => {
+        xhr.upload.addEventListener("progress", (e) => {
+          if (e.lengthComputable) {
+            onProgress(Math.round(e.loaded / e.total * 100));
+          }
+        });
+        xhr.addEventListener("load", () => {
+          if (xhr.status >= 200 && xhr.status < 300) {
+            try {
+              resolve(JSON.parse(xhr.responseText));
+            } catch {
+              resolve({});
+            }
+          } else {
+            reject(new Error(`Upload failed: ${xhr.status} ${xhr.statusText}`));
+          }
+        });
+        xhr.addEventListener("error", () => reject(new Error("Upload failed: network error")));
+        xhr.addEventListener("abort", () => reject(new Error("Upload aborted")));
+        signal.addEventListener("abort", () => xhr.abort());
+        xhr.open("POST", url);
+        for (const [key, value] of Object.entries(headers)) {
+          xhr.setRequestHeader(key, value);
+        }
+        xhr.send(formData);
+      });
+    };
+  }
+  throw new Error("useUploader requires either a handler function or a url");
+}
+function useUploader(options = {}) {
+  const isUploading = vue.ref(false);
+  const progress = vue.ref(0);
+  const error = vue.ref(null);
+  let abortController = null;
+  async function upload(file) {
+    const handler = createUploadHandler(options);
+    isUploading.value = true;
+    progress.value = 0;
+    error.value = null;
+    abortController = new AbortController();
+    const uploadFile = file instanceof File ? file : new File([file], "cropped-image", { type: file.type });
+    try {
+      const result = await handler(uploadFile, {
+        onProgress: (p) => {
+          progress.value = p;
+        },
+        signal: abortController.signal
+      });
+      progress.value = 100;
+      return result;
+    } catch (e) {
+      if (e instanceof Error && e.name === "AbortError") {
+        error.value = "Upload cancelled";
+      } else {
+        error.value = e instanceof Error ? e.message : "Upload failed";
+      }
+      throw e;
+    } finally {
+      isUploading.value = false;
+      abortController = null;
+    }
+  }
+  function abort() {
+    abortController?.abort();
+  }
+  return { upload, isUploading, progress, error, abort };
+}
+
+function usePointerHandler(element, options) {
+  let dragMode = null;
+  let activeHandle = null;
+  let lastX = 0;
+  let lastY = 0;
+  let activePointerId = null;
+  function onPointerDown(e) {
+    if (e.button !== 0) return;
+    if (activePointerId !== null) return;
+    activePointerId = e.pointerId;
+    lastX = e.clientX;
+    lastY = e.clientY;
+    const handle = options.getHandleAtPoint(e);
+    if (handle) {
+      dragMode = "resize";
+      activeHandle = handle;
+    } else if (options.isInsideCropArea(e)) {
+      dragMode = "crop-move";
+      activeHandle = null;
+    } else {
+      dragMode = "pan";
+      activeHandle = null;
+    }
+    try {
+      element.setPointerCapture(e.pointerId);
+    } catch {
+    }
+    e.preventDefault();
+  }
+  function onPointerMove(e) {
+    if (activePointerId !== e.pointerId) return;
+    if (!dragMode) return;
+    const scale = options.displayScale();
+    const dx = (e.clientX - lastX) / scale;
+    const dy = (e.clientY - lastY) / scale;
+    lastX = e.clientX;
+    lastY = e.clientY;
+    if (dragMode === "pan") {
+      options.onPan(dx, dy);
+    } else if (dragMode === "resize" && activeHandle) {
+      options.onCropResize(activeHandle, dx, dy);
+    } else if (dragMode === "crop-move") {
+      options.onCropMove(dx, dy);
+    }
+  }
+  function onPointerUp(e) {
+    if (activePointerId !== e.pointerId) return;
+    endDrag(e);
+  }
+  function onPointerCancel(e) {
+    if (activePointerId !== e.pointerId) return;
+    endDrag(e);
+  }
+  function endDrag(e) {
+    if (activePointerId !== null) {
+      try {
+        element.releasePointerCapture(e.pointerId);
+      } catch {
+      }
+    }
+    dragMode = null;
+    activeHandle = null;
+    activePointerId = null;
+  }
+  function onWheel(e) {
+    e.preventDefault();
+    const rect = element.getBoundingClientRect();
+    const centerX = (e.clientX - rect.left) / options.displayScale();
+    const centerY = (e.clientY - rect.top) / options.displayScale();
+    const delta = -e.deltaY * 1e-3;
+    options.onZoom(delta, centerX, centerY);
+  }
+  function onKeyDown(e) {
+    const handled = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "+", "=", "-", "_"];
+    if (handled.includes(e.key)) {
+      e.preventDefault();
+      options.onKeyboard(e.key, e.shiftKey);
+    }
+  }
+  element.addEventListener("pointerdown", onPointerDown);
+  element.addEventListener("pointermove", onPointerMove);
+  element.addEventListener("pointerup", onPointerUp);
+  element.addEventListener("pointercancel", onPointerCancel);
+  element.addEventListener("wheel", onWheel, { passive: false });
+  element.addEventListener("keydown", onKeyDown);
+  function destroy() {
+    element.removeEventListener("pointerdown", onPointerDown);
+    element.removeEventListener("pointermove", onPointerMove);
+    element.removeEventListener("pointerup", onPointerUp);
+    element.removeEventListener("pointercancel", onPointerCancel);
+    element.removeEventListener("wheel", onWheel);
+    element.removeEventListener("keydown", onKeyDown);
+  }
+  return { destroy };
+}
+
+function constrainCropSize(crop, bounds) {
+  let { width, height } = crop;
+  const minW = crop.minWidth ?? MIN_CROP_SIZE;
+  const minH = crop.minHeight ?? MIN_CROP_SIZE;
+  const maxW = Math.min(crop.maxWidth ?? Infinity, bounds.containerWidth);
+  const maxH = Math.min(crop.maxHeight ?? Infinity, bounds.containerHeight);
+  width = Math.max(minW, Math.min(maxW, width));
+  height = Math.max(minH, Math.min(maxH, height));
+  return { ...crop, width, height };
+}
+function constrainAspectRatio(crop) {
+  if (!crop.aspectRatio) return crop;
+  const ratio = crop.aspectRatio;
+  let { width, height } = crop;
+  const targetHeight = width / ratio;
+  if (targetHeight <= height) {
+    height = Math.round(targetHeight);
+  } else {
+    width = Math.round(height * ratio);
+  }
+  return { ...crop, width, height };
+}
+function constrainCropPosition(crop, bounds) {
+  let { x, y } = crop;
+  x = Math.max(0, Math.min(bounds.containerWidth - crop.width, x));
+  y = Math.max(0, Math.min(bounds.containerHeight - crop.height, y));
+  return { ...crop, x, y };
+}
+
+function handlePan(state, dx, dy) {
+  return {
+    ...state,
+    x: state.x + dx,
+    y: state.y + dy
+  };
+}
+function handleZoom(state, delta, centerX, centerY) {
+  const newScale = Math.max(MIN_SCALE, Math.min(MAX_SCALE, state.scale + delta));
+  const ratio = newScale / state.scale;
+  const newX = centerX - (centerX - state.x) * ratio;
+  const newY = centerY - (centerY - state.y) * ratio;
+  return {
+    ...state,
+    scale: newScale,
+    x: newX,
+    y: newY
+  };
+}
+function handleCropResize(crop, handle, dx, dy, bounds) {
+  let { x, y, width, height } = crop;
+  if (crop.stencil === "circle") {
+    if (handle !== "ne") return crop;
+    const delta = (dx + -dy) / 2;
+    const anchorBottom = y + height;
+    width += delta;
+    height += delta;
+    y = anchorBottom - height;
+    if (width < MIN_CROP_SIZE) {
+      width = MIN_CROP_SIZE;
+      height = MIN_CROP_SIZE;
+      y = anchorBottom - MIN_CROP_SIZE;
+    }
+    x = Math.max(0, x);
+    y = Math.max(0, y);
+    if (x + width > bounds.width) {
+      const maxSize = bounds.width - x;
+      width = maxSize;
+      height = maxSize;
+      y = anchorBottom - height;
+    }
+    if (y < 0) {
+      const maxSize = anchorBottom;
+      width = maxSize;
+      height = maxSize;
+      y = 0;
+    }
+    if (y + height > bounds.height) {
+      const maxSize = bounds.height - y;
+      width = maxSize;
+      height = maxSize;
+    }
+    return { ...crop, x, y, width, height };
+  }
+  switch (handle) {
+    case "se":
+      width += dx;
+      height += dy;
+      break;
+    case "nw":
+      x += dx;
+      y += dy;
+      width -= dx;
+      height -= dy;
+      break;
+    case "ne":
+      y += dy;
+      width += dx;
+      height -= dy;
+      break;
+    case "sw":
+      x += dx;
+      width -= dx;
+      height += dy;
+      break;
+    case "n":
+      y += dy;
+      height -= dy;
+      break;
+    case "s":
+      height += dy;
+      break;
+    case "e":
+      width += dx;
+      break;
+    case "w":
+      x += dx;
+      width -= dx;
+      break;
+  }
+  if (width < MIN_CROP_SIZE) {
+    if (handle === "nw" || handle === "sw" || handle === "w") {
+      x = crop.x + crop.width - MIN_CROP_SIZE;
+    }
+    width = MIN_CROP_SIZE;
+  }
+  if (height < MIN_CROP_SIZE) {
+    if (handle === "nw" || handle === "ne" || handle === "n") {
+      y = crop.y + crop.height - MIN_CROP_SIZE;
+    }
+    height = MIN_CROP_SIZE;
+  }
+  x = Math.max(0, x);
+  y = Math.max(0, y);
+  if (x + width > bounds.width) width = bounds.width - x;
+  if (y + height > bounds.height) height = bounds.height - y;
+  return { ...crop, x, y, width, height };
+}
+function handleCropMove(crop, dx, dy, bounds) {
+  let x = crop.x + dx;
+  let y = crop.y + dy;
+  x = Math.max(0, Math.min(x, bounds.width - crop.width));
+  y = Math.max(0, Math.min(y, bounds.height - crop.height));
+  return { ...crop, x, y };
+}
+const STEP = 1;
+const SHIFT_STEP = 10;
+const ZOOM_STEP = 0.05;
+function handleKeyboard(state, key, shiftKey) {
+  const step = shiftKey ? SHIFT_STEP : STEP;
+  switch (key) {
+    case "ArrowLeft":
+      return { ...state, x: state.x - step };
+    case "ArrowRight":
+      return { ...state, x: state.x + step };
+    case "ArrowUp":
+      return { ...state, y: state.y - step };
+    case "ArrowDown":
+      return { ...state, y: state.y + step };
+    case "+":
+    case "=":
+      return {
+        ...state,
+        scale: Math.min(MAX_SCALE, state.scale + ZOOM_STEP)
+      };
+    case "-":
+    case "_":
+      return {
+        ...state,
+        scale: Math.max(MIN_SCALE, state.scale - ZOOM_STEP)
+      };
+    default:
+      return state;
+  }
+}
+
+function getRectangleClipPath(rect, container) {
+  const top = rect.y;
+  const right = container.containerWidth - (rect.x + rect.width);
+  const bottom = container.containerHeight - (rect.y + rect.height);
+  const left = rect.x;
+  return `inset(${top}px ${right}px ${bottom}px ${left}px)`;
+}
+function getCircleClipPath(rect, _container) {
+  const radius = Math.min(rect.width, rect.height) / 2;
+  const cx = rect.x + rect.width / 2;
+  const cy = rect.y + rect.height / 2;
+  return `circle(${radius}px at ${cx}px ${cy}px)`;
+}
+function getFreeformClipPath(points) {
+  if (points.length < 3) return "";
+  const coords = points.map((p) => `${p.x}px ${p.y}px`).join(", ");
+  return `polygon(${coords})`;
+}
+function isPointInsideStencil(px, py, crop) {
+  if (crop.stencil === "rectangle") {
+    return px >= crop.x && px <= crop.x + crop.width && py >= crop.y && py <= crop.y + crop.height;
+  }
+  if (crop.stencil === "circle") {
+    const cx = crop.x + crop.width / 2;
+    const cy = crop.y + crop.height / 2;
+    const r = Math.min(crop.width, crop.height) / 2;
+    const dx = px - cx;
+    const dy = py - cy;
+    return dx * dx + dy * dy <= r * r;
+  }
+  if (crop.stencil === "freeform" && crop.points && crop.points.length >= 3) {
+    return isPointInsidePolygon(px, py, crop.points);
+  }
+  return false;
+}
+function isPointInsidePolygon(px, py, polygon) {
+  let inside = false;
+  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+    const xi = polygon[i].x;
+    const yi = polygon[i].y;
+    const xj = polygon[j].x;
+    const yj = polygon[j].y;
+    const intersect = yi > py !== yj > py && px < (xj - xi) * (py - yi) / (yj - yi) + xi;
+    if (intersect) inside = !inside;
+  }
+  return inside;
+}
+
+exports.applyFlip = applyFlip;
+exports.applyPan = applyPan;
+exports.applyRotation = applyRotation;
+exports.applyZoom = applyZoom;
+exports.chooseOutputFormat = chooseOutputFormat;
+exports.clampTransform = clampTransform;
+exports.compressBlob = compressBlob;
+exports.constrainAspectRatio = constrainAspectRatio;
+exports.constrainCropPosition = constrainCropPosition;
+exports.constrainCropSize = constrainCropSize;
+exports.createCropState = createCropState;
+exports.createQueue = createQueue;
+exports.createTransformState = createTransformState;
+exports.createUploadHandler = createUploadHandler;
+exports.detectMimeType = detectMimeType;
+exports.downsampleDimensions = downsampleDimensions;
+exports.exportCrop = exportCrop;
+exports.getCircleClipPath = getCircleClipPath;
+exports.getFreeformClipPath = getFreeformClipPath;
+exports.getMaxCanvasSize = getMaxCanvasSize;
+exports.getMimeForFormat = getMimeForFormat;
+exports.getRectangleClipPath = getRectangleClipPath;
+exports.getSafeDimensions = getSafeDimensions;
+exports.handleCropMove = handleCropMove;
+exports.handleCropResize = handleCropResize;
+exports.handleKeyboard = handleKeyboard;
+exports.handlePan = handlePan;
+exports.handleZoom = handleZoom;
+exports.hasTransparency = hasTransparency;
+exports.isPointInsideStencil = isPointInsideStencil;
+exports.loadImageFromFile = loadImageFromFile;
+exports.loadImageFromUrl = loadImageFromUrl;
+exports.needsDownsample = needsDownsample;
+exports.renderCrop = renderCrop;
+exports.resetTransform = resetTransform;
+exports.snapRotation = snapRotation;
+exports.supportsWebP = supportsWebP;
+exports.useCompressor = useCompressor;
+exports.useCropper = useCropper;
+exports.useDropzone = useDropzone;
+exports.useImageQueue = useImageQueue;
+exports.usePointerHandler = usePointerHandler;
+exports.useUploader = useUploader;
+exports.validateFile = validateFile;