@ibanzajoe/uploader 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1494 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  DropPane: () => DropPane,
+  ImageEditor: () => ImageEditor,
+  PickerOverlay: () => PickerOverlay,
+  UploaderClient: () => UploaderClient,
+  crop: () => crop,
+  editImage: () => editImage,
+  flip: () => flip,
+  flop: () => flop,
+  output: () => output,
+  quality: () => quality,
+  resize: () => resize,
+  rotate: () => rotate,
+  transformUrl: () => transformUrl,
+  usePicker: () => usePicker
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/core/errors.ts
+var UploaderError = class extends Error {
+  code;
+  /** HTTP status code when available (undefined for ABORTED / NETWORK_ERROR). */
+  statusCode;
+  constructor(code, message, statusCode) {
+    super(message);
+    this.name = "UploaderError";
+    this.code = code;
+    this.statusCode = statusCode;
+  }
+};
+
+// src/core/chunk.ts
+var MULTIPART_THRESHOLD = 5 * 1024 * 1024;
+var DEFAULT_CHUNK_SIZE = 5 * 1024 * 1024;
+function planChunks(file, chunkSize = DEFAULT_CHUNK_SIZE) {
+  if (file.size <= MULTIPART_THRESHOLD) {
+    return { mode: "single" };
+  }
+  const parts = [];
+  let offset = 0;
+  while (offset < file.size) {
+    parts.push(file.slice(offset, offset + chunkSize));
+    offset += chunkSize;
+  }
+  return { mode: "multipart", parts, partSize: chunkSize };
+}
+
+// src/core/client.ts
+var MAX_RETRIES = 3;
+var RETRY_BASE_MS = 200;
+function sleep(ms, signal) {
+  return new Promise((resolve, reject) => {
+    if (signal?.aborted) {
+      reject(new UploaderError("ABORTED", "Upload aborted"));
+      return;
+    }
+    const timer = setTimeout(resolve, ms);
+    signal?.addEventListener("abort", () => {
+      clearTimeout(timer);
+      reject(new UploaderError("ABORTED", "Upload aborted"));
+    }, { once: true });
+  });
+}
+function checkAbort(signal) {
+  if (signal?.aborted) {
+    throw new UploaderError("ABORTED", "Upload aborted");
+  }
+}
+async function fetchWithRetry(url, init, signal, maxRetries = MAX_RETRIES) {
+  let lastErr;
+  for (let attempt = 0; attempt < maxRetries; attempt++) {
+    checkAbort(signal);
+    try {
+      const res = await fetch(url, { ...init, signal });
+      if (res.status >= 400 && res.status < 500) {
+        const body = await res.text().catch(() => "");
+        throw new UploaderError(
+          "CLIENT_ERROR",
+          `HTTP ${res.status}: ${body}`,
+          res.status
+        );
+      }
+      if (res.status >= 500) {
+        lastErr = new UploaderError(
+          "SERVER_ERROR",
+          `HTTP ${res.status}`,
+          res.status
+        );
+        if (attempt < maxRetries - 1) {
+          await sleep(RETRY_BASE_MS * 2 ** attempt, signal);
+        }
+        continue;
+      }
+      return res;
+    } catch (err) {
+      if (err instanceof UploaderError) {
+        if (err.code === "CLIENT_ERROR" || err.code === "ABORTED") throw err;
+        lastErr = err;
+      } else {
+        lastErr = new UploaderError(
+          "NETWORK_ERROR",
+          err instanceof Error ? err.message : String(err)
+        );
+      }
+      if (attempt < maxRetries - 1) {
+        await sleep(RETRY_BASE_MS * 2 ** attempt, signal);
+      }
+    }
+  }
+  throw lastErr;
+}
+var UploaderClient = class {
+  apikey;
+  apiUrl;
+  security;
+  constructor(options) {
+    this.apikey = options.apikey;
+    this.apiUrl = (options.apiUrl ?? "https://api.uploaderhq.io").replace(/\/$/, "");
+    this.security = options.security;
+  }
+  // ─── Auth headers ──────────────────────────────────────────────────────────
+  /**
+   * Build the auth headers shared by all requests.
+   * Attaches the API key and, when present, the signed policy pair.
+   */
+  #authHeaders() {
+    const headers = {
+      "X-Uploader-Key": this.apikey
+    };
+    if (this.security) {
+      headers["X-Uploader-Policy"] = this.security.policy;
+      headers["X-Uploader-Signature"] = this.security.signature;
+    }
+    return headers;
+  }
+  // ─── Single-shot upload ────────────────────────────────────────────────────
+  /**
+   * POST /api/store — multipart/form-data for files ≤ MULTIPART_THRESHOLD.
+   */
+  async #uploadSingleShot(file, opts) {
+    const { onProgress, filename, signal } = opts;
+    onProgress?.(0);
+    checkAbort(signal);
+    const form = new FormData();
+    form.append("file", file, filename ?? (file instanceof File ? file.name : "upload"));
+    if (filename) form.append("filename", filename);
+    const res = await fetchWithRetry(
+      `${this.apiUrl}/api/store`,
+      {
+        method: "POST",
+        headers: this.#authHeaders(),
+        body: form
+      },
+      signal
+    );
+    const body = await res.json();
+    onProgress?.(100);
+    return this.#parseFileResult(body);
+  }
+  // ─── Multipart upload ──────────────────────────────────────────────────────
+  /**
+   * start → parts (parallel with progress) → complete for files > MULTIPART_THRESHOLD.
+   */
+  async #uploadMultipart(file, parts, opts) {
+    const { onProgress, filename, signal } = opts;
+    const name = filename ?? (file instanceof File ? file.name : "upload");
+    const mime = file instanceof File ? file.type : "application/octet-stream";
+    onProgress?.(0);
+    checkAbort(signal);
+    const startRes = await fetchWithRetry(
+      `${this.apiUrl}/api/upload/start`,
+      {
+        method: "POST",
+        headers: { ...this.#authHeaders(), "Content-Type": "application/json" },
+        body: JSON.stringify({ filename: name, mimetype: mime, size: file.size })
+      },
+      signal
+    );
+    const { uploadId } = await startRes.json();
+    const etags = [];
+    let uploadedBytes = 0;
+    for (let i = 0; i < parts.length; i++) {
+      checkAbort(signal);
+      const partBlob = parts[i];
+      const partNumber = i + 1;
+      const partForm = new FormData();
+      partForm.append("uploadId", uploadId);
+      partForm.append("partNumber", String(partNumber));
+      partForm.append("part", partBlob);
+      const partRes = await fetchWithRetry(
+        `${this.apiUrl}/api/upload/part`,
+        {
+          method: "POST",
+          headers: this.#authHeaders(),
+          body: partForm
+        },
+        signal
+      );
+      const { etag } = await partRes.json();
+      etags.push({ partNumber, etag });
+      uploadedBytes += partBlob.size;
+      onProgress?.(Math.round(uploadedBytes / file.size * 95));
+    }
+    checkAbort(signal);
+    const completeRes = await fetchWithRetry(
+      `${this.apiUrl}/api/upload/complete`,
+      {
+        method: "POST",
+        headers: { ...this.#authHeaders(), "Content-Type": "application/json" },
+        body: JSON.stringify({ uploadId, parts: etags })
+      },
+      signal
+    );
+    const body = await completeRes.json();
+    onProgress?.(100);
+    return this.#parseFileResult(body);
+  }
+  // ─── Response parser ───────────────────────────────────────────────────────
+  #parseFileResult(body) {
+    if (typeof body !== "object" || body === null || typeof body["handle"] !== "string" || typeof body["url"] !== "string") {
+      throw new UploaderError("INVALID_RESPONSE", "Unexpected response shape from upload API");
+    }
+    return body;
+  }
+  // ─── Public API ───────────────────────────────────────────────────────────
+  /**
+   * Upload a single file.
+   *
+   * Automatically selects single-shot vs multipart upload based on file size.
+   * Emits progress via `opts.onProgress` (0–100). Respects `opts.signal` for
+   * cancellation. Retries network errors and 5xx responses up to 3 times with
+   * exponential backoff; 4xx errors are surfaced immediately.
+   *
+   * @throws {UploaderError} with code ABORTED | NETWORK_ERROR | SERVER_ERROR |
+   *   CLIENT_ERROR | INVALID_RESPONSE
+   */
+  async upload(file, opts = {}) {
+    const plan = planChunks(file, opts.chunkSize);
+    if (plan.mode === "single") {
+      return this.#uploadSingleShot(file, opts);
+    }
+    return this.#uploadMultipart(file, plan.parts, opts);
+  }
+  /**
+   * Upload multiple files with concurrency limiting.
+   *
+   * Resolves once all uploads settle (fulfilled or rejected). The returned
+   * array preserves input order. `opts.concurrency` caps simultaneous
+   * in-flight uploads (default 3). Each file shares the same opts
+   * (including onProgress — the callback fires per-file, not aggregate).
+   *
+   * @returns Array of PromiseSettledResult in input order.
+   */
+  async uploadAll(files, opts = {}) {
+    const concurrency = opts.concurrency ?? 3;
+    const results = new Array(files.length);
+    let index = 0;
+    async function worker(client) {
+      while (index < files.length) {
+        const i = index++;
+        const file = files[i];
+        try {
+          results[i] = { status: "fulfilled", value: await client.upload(file, opts) };
+        } catch (err) {
+          results[i] = { status: "rejected", reason: err };
+        }
+      }
+    }
+    const workers = Array.from(
+      { length: Math.min(concurrency, files.length) },
+      () => worker(this)
+    );
+    await Promise.all(workers);
+    return results;
+  }
+};
+
+// src/core/transform.ts
+var resize = (params) => ({ name: "resize", params });
+var crop = (rect) => ({
+  name: "crop",
+  params: { dim: `${rect.x},${rect.y},${rect.w},${rect.h}`, ...rect }
+});
+var rotate = (params) => ({ name: "rotate", params });
+var flip = () => ({ name: "flip", params: {} });
+var flop = () => ({ name: "flop", params: {} });
+var quality = (params) => ({ name: "quality", params });
+var output = (params) => ({ name: "output", params });
+function serializeOp(op) {
+  switch (op.name) {
+    case "resize": {
+      const parts = [];
+      if (op.params.w !== void 0) parts.push(`w:${op.params.w}`);
+      if (op.params.h !== void 0) parts.push(`h:${op.params.h}`);
+      if (op.params.fit !== void 0) parts.push(`fit:${op.params.fit}`);
+      return `resize=${parts.join(",")}`;
+    }
+    case "crop":
+      return `crop=dim:${op.params.dim}`;
+    case "rotate":
+      return `rotate=deg:${op.params.deg}`;
+    case "flip":
+      return "flip";
+    case "flop":
+      return "flop";
+    case "quality":
+      return `quality=n:${op.params.n}`;
+    case "output":
+      return `output=format:${op.params.format}`;
+  }
+}
+function transformUrl({ handle, ops, apiUrl = "" }) {
+  const base = apiUrl.replace(/\/$/, "");
+  const chain = ops.map(serializeOp).join("/");
+  return chain ? `${base}/${chain}/${handle}` : `${base}/${handle}`;
+}
+
+// src/react/PickerOverlay.tsx
+var import_react3 = require("react");
+
+// src/react/usePicker.ts
+var import_react = require("react");
+var _idCounter = 0;
+function nextId() {
+  return `pf-${++_idCounter}`;
+}
+function usePicker(opts) {
+  const [files, setFiles] = (0, import_react.useState)([]);
+  const clientRef = (0, import_react.useRef)(null);
+  if (!clientRef.current || clientRef.current.apikey !== opts.apikey || clientRef.current.apiUrl !== (opts.apiUrl ?? "https://api.uploaderhq.io")) {
+    clientRef.current = new UploaderClient({
+      apikey: opts.apikey,
+      apiUrl: opts.apiUrl,
+      security: opts.security
+    });
+  }
+  const addFiles = (0, import_react.useCallback)(
+    (incoming) => {
+      const list = Array.from(incoming);
+      const { maxFiles, maxSize } = opts.pickerOptions ?? {};
+      setFiles((prev) => {
+        const remaining = maxFiles != null ? maxFiles - prev.length : Infinity;
+        const toAdd = list.slice(0, remaining).filter((f) => {
+          if (maxSize != null && f.size > maxSize) return false;
+          return true;
+        });
+        const newEntries = toAdd.map((f) => ({
+          file: f,
+          id: nextId(),
+          state: "pending",
+          progress: null,
+          previewUrl: f.type.startsWith("image/") ? URL.createObjectURL(f) : void 0
+        }));
+        return [...prev, ...newEntries];
+      });
+    },
+    [opts.pickerOptions]
+  );
+  const removeFile = (0, import_react.useCallback)((id) => {
+    setFiles((prev) => {
+      const entry = prev.find((f) => f.id === id);
+      if (entry?.previewUrl) URL.revokeObjectURL(entry.previewUrl);
+      return prev.filter((f) => f.id !== id);
+    });
+  }, []);
+  const editFile = (0, import_react.useCallback)((id, newFile) => {
+    setFiles(
+      (prev) => prev.map((f) => {
+        if (f.id !== id) return f;
+        if (f.previewUrl) URL.revokeObjectURL(f.previewUrl);
+        return {
+          ...f,
+          file: newFile,
+          state: "pending",
+          progress: null,
+          error: void 0,
+          result: void 0,
+          previewUrl: newFile.type.startsWith("image/") ? URL.createObjectURL(newFile) : void 0
+        };
+      })
+    );
+  }, []);
+  const retryFile = (0, import_react.useCallback)((id) => {
+    setFiles(
+      (prev) => prev.map(
+        (f) => f.id === id ? { ...f, state: "pending", progress: null, error: void 0 } : f
+      )
+    );
+  }, []);
+  const upload = (0, import_react.useCallback)(async () => {
+    const client = clientRef.current;
+    const snapshot = files.filter((f) => f.state === "pending");
+    const uploaded = [];
+    const failed = [];
+    for (const entry of snapshot) {
+      setFiles(
+        (prev) => prev.map((f) => f.id === entry.id ? { ...f, state: "uploading", progress: 0 } : f)
+      );
+      try {
+        const result = await client.upload(entry.file, {
+          onProgress: (pct) => {
+            setFiles(
+              (prev) => prev.map((f) => f.id === entry.id ? { ...f, progress: pct } : f)
+            );
+          }
+        });
+        setFiles(
+          (prev) => prev.map(
+            (f) => f.id === entry.id ? { ...f, state: "done", progress: 100, result } : f
+          )
+        );
+        opts.onFileUploadFinished?.(result);
+        uploaded.push(result);
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error(String(err));
+        setFiles(
+          (prev) => prev.map(
+            (f) => f.id === entry.id ? { ...f, state: "error", progress: null, error: error.message } : f
+          )
+        );
+        opts.onFileUploadFailed?.(entry.file, error);
+        failed.push({
+          handle: "",
+          url: "",
+          filename: entry.file.name,
+          mimetype: entry.file.type,
+          size: entry.file.size,
+          status: "Stored"
+        });
+      }
+    }
+    if (snapshot.length > 0) {
+      opts.onUploadDone?.({ filesUploaded: uploaded, filesFailed: failed });
+    }
+  }, [files, opts]);
+  const activeFiles = files.filter((f) => f.state === "uploading" || f.state === "done");
+  const progress = activeFiles.length === 0 ? 0 : Math.round(
+    activeFiles.reduce((sum, f) => sum + (f.progress ?? 0), 0) / activeFiles.length
+  );
+  const isUploading = files.some((f) => f.state === "uploading");
+  const isDone = files.length > 0 && files.every((f) => f.state === "done" || f.state === "error");
+  return { files, addFiles, removeFile, editFile, retryFile, upload, progress, isUploading, isDone };
+}
+
+// src/react/ImageEditor.tsx
+var import_react2 = require("react");
+
+// src/react/editImage.ts
+var ENCODABLE = /* @__PURE__ */ new Set(["image/jpeg", "image/png", "image/webp"]);
+function mimeToExtension(mime) {
+  switch (mime) {
+    case "image/jpeg":
+      return "jpg";
+    case "image/png":
+      return "png";
+    case "image/webp":
+      return "webp";
+    default:
+      return "png";
+  }
+}
+function pickOutputType(sourceType, override) {
+  if (override) return override;
+  return ENCODABLE.has(sourceType) ? sourceType : "image/png";
+}
+function rotatedBoundingBox(width, height, deg) {
+  const rad = deg * Math.PI / 180;
+  return {
+    width: Math.abs(Math.cos(rad) * width) + Math.abs(Math.sin(rad) * height),
+    height: Math.abs(Math.sin(rad) * width) + Math.abs(Math.cos(rad) * height)
+  };
+}
+function fitScale(width, height, maxDimension) {
+  if (!maxDimension) return 1;
+  const longest = Math.max(width, height);
+  return longest > maxDimension ? maxDimension / longest : 1;
+}
+function withExtension(name, ext) {
+  const dot = name.lastIndexOf(".");
+  const base = dot > 0 ? name.slice(0, dot) : name;
+  return `${base}.${ext}`;
+}
+function loadImage(url) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = () => reject(new Error("Failed to load image for editing"));
+    img.src = url;
+  });
+}
+async function editImage(file, opts = {}) {
+  const {
+    rotation = 0,
+    flip: flip2 = { horizontal: false, vertical: false },
+    crop: crop2,
+    maxDimension
+  } = opts;
+  const url = URL.createObjectURL(file);
+  try {
+    const image = await loadImage(url);
+    const iw = image.naturalWidth || image.width;
+    const ih = image.naturalHeight || image.height;
+    const box = rotatedBoundingBox(iw, ih, rotation);
+    const boxCanvas = document.createElement("canvas");
+    boxCanvas.width = Math.max(1, Math.round(box.width));
+    boxCanvas.height = Math.max(1, Math.round(box.height));
+    const boxCtx = boxCanvas.getContext("2d");
+    if (!boxCtx) throw new Error("Canvas 2D context unavailable");
+    boxCtx.translate(boxCanvas.width / 2, boxCanvas.height / 2);
+    boxCtx.rotate(rotation * Math.PI / 180);
+    boxCtx.scale(flip2.horizontal ? -1 : 1, flip2.vertical ? -1 : 1);
+    boxCtx.drawImage(image, -iw / 2, -ih / 2);
+    const region = crop2 ?? {
+      x: 0,
+      y: 0,
+      width: boxCanvas.width,
+      height: boxCanvas.height
+    };
+    const scale = fitScale(region.width, region.height, maxDimension);
+    const outW = Math.max(1, Math.round(region.width * scale));
+    const outH = Math.max(1, Math.round(region.height * scale));
+    const outCanvas = document.createElement("canvas");
+    outCanvas.width = outW;
+    outCanvas.height = outH;
+    const outCtx = outCanvas.getContext("2d");
+    if (!outCtx) throw new Error("Canvas 2D context unavailable");
+    if (opts.circle) {
+      outCtx.beginPath();
+      outCtx.ellipse(outW / 2, outH / 2, outW / 2, outH / 2, 0, 0, Math.PI * 2);
+      outCtx.clip();
+    }
+    outCtx.drawImage(boxCanvas, region.x, region.y, region.width, region.height, 0, 0, outW, outH);
+    const outputType = opts.circle ? "image/png" : pickOutputType(file.type, opts.outputType);
+    const quality2 = opts.quality ?? 0.92;
+    const blob = await new Promise((resolve, reject) => {
+      outCanvas.toBlob(
+        (b) => b ? resolve(b) : reject(new Error("Canvas toBlob returned null")),
+        outputType,
+        quality2
+      );
+    });
+    const name = opts.fileName ?? withExtension(file.name, mimeToExtension(outputType));
+    return new File([blob], name, { type: outputType, lastModified: Date.now() });
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+}
+
+// src/react/ImageEditor.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var clampNum = (n, min, max) => Math.min(max, Math.max(min, n));
+var MIN_CROP = 48;
+var MAX_ZOOM = 8;
+var ASPECTS = [
+  { label: "Free", value: void 0 },
+  { label: "1:1", value: 1 },
+  { label: "4:3", value: 4 / 3 },
+  { label: "16:9", value: 16 / 9 },
+  { label: "3:2", value: 3 / 2 }
+];
+var HANDLES = [
+  { id: "nw", pos: { left: -7, top: -7, cursor: "nwse-resize" } },
+  { id: "ne", pos: { right: -7, top: -7, cursor: "nesw-resize" } },
+  { id: "sw", pos: { left: -7, bottom: -7, cursor: "nesw-resize" } },
+  { id: "se", pos: { right: -7, bottom: -7, cursor: "nwse-resize" } }
+];
+function ImageEditor({
+  file,
+  onApply,
+  onCancel,
+  outputType,
+  quality: quality2,
+  maxDimensionDefault = 1920,
+  className,
+  style
+}) {
+  const [rotation, setRotation] = (0, import_react2.useState)(0);
+  const [flip2, setFlip] = (0, import_react2.useState)({ horizontal: false, vertical: false });
+  const [aspect, setAspect] = (0, import_react2.useState)(void 0);
+  const [cropShape, setCropShape] = (0, import_react2.useState)("rect");
+  const [resizeEnabled, setResizeEnabled] = (0, import_react2.useState)(false);
+  const [maxDimension, setMaxDimension] = (0, import_react2.useState)(maxDimensionDefault);
+  const [busy, setBusy] = (0, import_react2.useState)(false);
+  const [error, setError] = (0, import_react2.useState)(null);
+  const [workingFile, setWorkingFile] = (0, import_react2.useState)(file);
+  (0, import_react2.useEffect)(() => {
+    let cancelled = false;
+    if (rotation === 0 && !flip2.horizontal && !flip2.vertical) {
+      setWorkingFile(file);
+      return;
+    }
+    editImage(file, { rotation, flip: flip2 }).then((f) => {
+      if (!cancelled) setWorkingFile(f);
+    }).catch(() => {
+      if (!cancelled) setError("Failed to render the rotated preview");
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [file, rotation, flip2]);
+  const [workingUrl, setWorkingUrl] = (0, import_react2.useState)("");
+  (0, import_react2.useEffect)(() => {
+    const url = URL.createObjectURL(workingFile);
+    setWorkingUrl(url);
+    return () => URL.revokeObjectURL(url);
+  }, [workingFile]);
+  const viewportRef = (0, import_react2.useRef)(null);
+  const [vp, setVp] = (0, import_react2.useState)({ w: 0, h: 0 });
+  const [nat, setNat] = (0, import_react2.useState)({ w: 0, h: 0 });
+  const [view, setView] = (0, import_react2.useState)({ scale: 1, x: 0, y: 0 });
+  const [crop2, setCrop] = (0, import_react2.useState)({ w: 0, h: 0 });
+  const ready = nat.w > 0 && vp.w > 0;
+  (0, import_react2.useEffect)(() => {
+    const el = viewportRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const measure = () => {
+      const r = el.getBoundingClientRect();
+      setVp({ w: r.width, h: r.height });
+    };
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const normalize = (0, import_react2.useCallback)(
+    (scaleRaw, xRaw, yRaw, cw, ch) => {
+      if (!nat.w || !vp.w) return { scale: scaleRaw, x: xRaw, y: yRaw };
+      const fitS = Math.min(vp.w / nat.w, vp.h / nat.h);
+      const coverMin = Math.max(cw / nat.w, ch / nat.h);
+      const scale = clampNum(scaleRaw, coverMin, Math.max(fitS, coverMin) * MAX_ZOOM);
+      const cbX2 = (vp.w - cw) / 2;
+      const cbY2 = (vp.h - ch) / 2;
+      const x = clampNum(xRaw, cbX2 + cw - scale * nat.w, cbX2);
+      const y = clampNum(yRaw, cbY2 + ch - scale * nat.h, cbY2);
+      return { scale, x, y };
+    },
+    [nat, vp]
+  );
+  (0, import_react2.useEffect)(() => {
+    if (!nat.w || !vp.w) return;
+    const fitS = Math.min(vp.w / nat.w, vp.h / nat.h);
+    const baseline = Math.min(vp.w, vp.h) * 0.7;
+    let cw = baseline;
+    let ch = baseline;
+    if (cropShape === "round") {
+      cw = ch = baseline;
+    } else if (aspect) {
+      if (aspect >= 1) ch = baseline / aspect;
+      else cw = baseline * aspect;
+    }
+    cw = clampNum(cw, MIN_CROP, vp.w);
+    ch = clampNum(ch, MIN_CROP, vp.h);
+    setCrop({ w: cw, h: ch });
+    setView(normalize(fitS, (vp.w - fitS * nat.w) / 2, (vp.h - fitS * nat.h) / 2, cw, ch));
+  }, [nat, vp]);
+  (0, import_react2.useEffect)(() => {
+    if (!nat.w || !vp.w) return;
+    let cw = crop2.w;
+    let ch = crop2.h;
+    if (cropShape === "round") {
+      cw = ch = Math.min(cw, ch);
+    } else if (aspect) {
+      ch = cw / aspect;
+      if (ch > vp.h) {
+        ch = vp.h;
+        cw = ch * aspect;
+      }
+    }
+    cw = clampNum(cw, MIN_CROP, vp.w);
+    ch = clampNum(ch, MIN_CROP, vp.h);
+    setCrop({ w: cw, h: ch });
+    setView((v) => normalize(v.scale, v.x, v.y, cw, ch));
+  }, [aspect, cropShape]);
+  const onImageLoad = (0, import_react2.useCallback)((e) => {
+    setNat({ w: e.currentTarget.naturalWidth, h: e.currentTarget.naturalHeight });
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    const el = viewportRef.current;
+    if (!el) return;
+    const onWheel = (e) => {
+      e.preventDefault();
+      const rect = el.getBoundingClientRect();
+      const fx = e.clientX - rect.left;
+      const fy = e.clientY - rect.top;
+      const factor = Math.exp(-e.deltaY * 15e-4);
+      setView((v) => {
+        const next = normalize(v.scale * factor, v.x, v.y, crop2.w, crop2.h);
+        const ratio = next.scale / v.scale;
+        return normalize(next.scale, fx - ratio * (fx - v.x), fy - ratio * (fy - v.y), crop2.w, crop2.h);
+      });
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
+  }, [normalize, crop2.w, crop2.h]);
+  const dragRef = (0, import_react2.useRef)(null);
+  const onPointerDown = (0, import_react2.useCallback)(
+    (e) => {
+      if (!ready) return;
+      const handle = e.target.dataset.handle;
+      e.currentTarget.setPointerCapture(e.pointerId);
+      if (handle) {
+        dragRef.current = { mode: "resize", corner: handle };
+      } else {
+        dragRef.current = { mode: "pan", downX: e.clientX, downY: e.clientY, startX: view.x, startY: view.y };
+      }
+    },
+    [ready, view.x, view.y]
+  );
+  const onPointerMove = (0, import_react2.useCallback)(
+    (e) => {
+      const d = dragRef.current;
+      if (!d) return;
+      const rect = e.currentTarget.getBoundingClientRect();
+      if (d.mode === "pan") {
+        setView((v) => normalize(v.scale, d.startX + (e.clientX - d.downX), d.startY + (e.clientY - d.downY), crop2.w, crop2.h));
+      } else {
+        const hx = Math.abs(e.clientX - rect.left - rect.width / 2);
+        const hy = Math.abs(e.clientY - rect.top - rect.height / 2);
+        let cw;
+        let ch;
+        if (cropShape === "round") {
+          cw = ch = 2 * Math.max(hx, hy);
+        } else if (aspect) {
+          cw = Math.max(2 * hx, 2 * hy * aspect);
+          ch = cw / aspect;
+        } else {
+          cw = 2 * hx;
+          ch = 2 * hy;
+        }
+        cw = clampNum(cw, MIN_CROP, rect.width);
+        ch = clampNum(ch, MIN_CROP, rect.height);
+        if (cropShape === "round") cw = ch = Math.min(cw, ch);
+        setCrop({ w: cw, h: ch });
+        setView((v) => normalize(v.scale, v.x, v.y, cw, ch));
+      }
+    },
+    [normalize, crop2.w, crop2.h, cropShape, aspect]
+  );
+  const onPointerUp = (0, import_react2.useCallback)((e) => {
+    dragRef.current = null;
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) e.currentTarget.releasePointerCapture(e.pointerId);
+  }, []);
+  const handleApply = (0, import_react2.useCallback)(async () => {
+    if (!ready) {
+      onApply(workingFile);
+      return;
+    }
+    setBusy(true);
+    setError(null);
+    try {
+      const cbX2 = (vp.w - crop2.w) / 2;
+      const cbY2 = (vp.h - crop2.h) / 2;
+      const region = {
+        x: (cbX2 - view.x) / view.scale,
+        y: (cbY2 - view.y) / view.scale,
+        width: crop2.w / view.scale,
+        height: crop2.h / view.scale
+      };
+      const edited = await editImage(workingFile, {
+        crop: region,
+        circle: cropShape === "round",
+        maxDimension: resizeEnabled ? maxDimension : void 0,
+        outputType,
+        quality: quality2
+      });
+      onApply(edited);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to apply edits");
+    } finally {
+      setBusy(false);
+    }
+  }, [ready, vp, crop2, view, workingFile, cropShape, resizeEnabled, maxDimension, outputType, quality2, onApply]);
+  const cbX = (vp.w - crop2.w) / 2;
+  const cbY = (vp.h - crop2.h) / 2;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: ["uploader-editor", className ?? ""].filter(Boolean).join(" "),
+      style,
+      "data-testid": "image-editor",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            ref: viewportRef,
+            className: "uploader-editor-canvas",
+            onPointerDown,
+            onPointerMove,
+            onPointerUp,
+            onPointerCancel: onPointerUp,
+            children: [
+              workingUrl && /* eslint-disable-next-line @next/next/no-img-element */
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "img",
+                {
+                  src: workingUrl,
+                  alt: "Edit preview",
+                  onLoad: onImageLoad,
+                  draggable: false,
+                  className: "uploader-editor-image",
+                  style: {
+                    width: nat.w || void 0,
+                    height: nat.h || void 0,
+                    transform: `translate(${view.x}px, ${view.y}px) scale(${view.scale})`,
+                    opacity: ready ? 1 : 0
+                  }
+                }
+              ),
+              ready && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  className: `uploader-editor-cropbox${cropShape === "round" ? " uploader-editor-cropbox-round" : ""}`,
+                  style: { left: cbX, top: cbY, width: crop2.w, height: crop2.h },
+                  children: HANDLES.map((h) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "data-handle": h.id, className: "uploader-editor-handle", style: h.pos }, h.id))
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "uploader-editor-hint", children: "Drag the image to move it \xB7 scroll to zoom \xB7 drag a corner to resize the crop." }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uploader-editor-controls", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uploader-editor-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "uploader-editor-tool",
+                "aria-label": "Rotate left",
+                onClick: () => setRotation((r) => (r - 90 + 360) % 360),
+                children: "\u27F2"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "uploader-editor-tool",
+                "aria-label": "Rotate right",
+                onClick: () => setRotation((r) => (r + 90) % 360),
+                children: "\u27F3"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                className: `uploader-editor-tool${flip2.horizontal ? " uploader-editor-tool-active" : ""}`,
+                "aria-pressed": flip2.horizontal,
+                "aria-label": "Flip horizontal",
+                onClick: () => setFlip((f) => ({ ...f, horizontal: !f.horizontal })),
+                children: "\u21CB"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                className: `uploader-editor-tool${flip2.vertical ? " uploader-editor-tool-active" : ""}`,
+                "aria-pressed": flip2.vertical,
+                "aria-label": "Flip vertical",
+                onClick: () => setFlip((f) => ({ ...f, vertical: !f.vertical })),
+                children: "\u21C5"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uploader-editor-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uploader-editor-label", children: "Shape" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                className: `uploader-editor-chip${cropShape === "rect" ? " uploader-editor-chip-active" : ""}`,
+                onClick: () => setCropShape("rect"),
+                children: "Rectangle"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                className: `uploader-editor-chip${cropShape === "round" ? " uploader-editor-chip-active" : ""}`,
+                onClick: () => {
+                  setCropShape("round");
+                  setAspect(1);
+                },
+                children: "Circle"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uploader-editor-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uploader-editor-label", children: "Ratio" }),
+            ASPECTS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                disabled: cropShape === "round",
+                className: `uploader-editor-chip${cropShape === "rect" && aspect === a.value ? " uploader-editor-chip-active" : ""}`,
+                onClick: () => setAspect(a.value),
+                children: a.label
+              },
+              a.label
+            ))
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uploader-editor-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "uploader-editor-label", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: resizeEnabled,
+                  onChange: (e) => setResizeEnabled(e.target.checked)
+                }
+              ),
+              " ",
+              "Resize to"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "input",
+              {
+                type: "number",
+                min: 16,
+                value: maxDimension,
+                disabled: !resizeEnabled,
+                "aria-label": "Maximum longest side in pixels",
+                className: "uploader-editor-number",
+                onChange: (e) => setMaxDimension(Number(e.target.value))
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uploader-editor-label", children: "px (longest side)" })
+          ] }),
+          error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uploader-editor-error", role: "alert", children: error })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uploader-editor-actions", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: "uploader-btn-cancel", onClick: onCancel, disabled: busy, children: "Cancel" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: "uploader-btn-upload", onClick: handleApply, disabled: busy, children: busy ? "Applying\u2026" : "Apply" })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/react/PickerOverlay.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function PickerOverlay({
+  open,
+  onClose,
+  apikey,
+  apiUrl,
+  security,
+  pickerOptions,
+  onUploadDone,
+  onFileUploadFinished,
+  onFileUploadFailed,
+  onCancel,
+  className,
+  style
+}) {
+  const titleId = (0, import_react3.useId)();
+  const inputRef = (0, import_react3.useRef)(null);
+  const panelRef = (0, import_react3.useRef)(null);
+  const [isDragOver, setIsDragOver] = (0, import_react3.useState)(false);
+  const [editingId, setEditingId] = (0, import_react3.useState)(null);
+  const { files, addFiles, removeFile, editFile, retryFile, upload, progress, isUploading, isDone } = usePicker({
+    apikey,
+    apiUrl,
+    security,
+    pickerOptions,
+    onUploadDone,
+    onFileUploadFinished,
+    onFileUploadFailed
+  });
+  (0, import_react3.useEffect)(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (e.key === "Escape") {
+        onCancel?.();
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [open, onClose, onCancel]);
+  (0, import_react3.useEffect)(() => {
+    if (!open || !panelRef.current) return;
+    const panel = panelRef.current;
+    const focusable = panel.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+    if (focusable.length === 0) return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    first.focus();
+    const trap = (e) => {
+      if (e.key !== "Tab") return;
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+    document.addEventListener("keydown", trap);
+    return () => document.removeEventListener("keydown", trap);
+  }, [open, files, editingId]);
+  (0, import_react3.useEffect)(() => {
+    if (!open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [open]);
+  const handleDragEnter = (0, import_react3.useCallback)((e) => {
+    e.preventDefault();
+    setIsDragOver(true);
+  }, []);
+  const handleDragLeave = (0, import_react3.useCallback)((e) => {
+    e.preventDefault();
+    setIsDragOver(false);
+  }, []);
+  const handleDragOver = (0, import_react3.useCallback)((e) => {
+    e.preventDefault();
+  }, []);
+  const handleDrop = (0, import_react3.useCallback)(
+    (e) => {
+      e.preventDefault();
+      setIsDragOver(false);
+      if (e.dataTransfer.files.length > 0) {
+        addFiles(e.dataTransfer.files);
+      }
+    },
+    [addFiles]
+  );
+  const openFileDialog = (0, import_react3.useCallback)(() => inputRef.current?.click(), []);
+  const handleInputChange = (0, import_react3.useCallback)(
+    (e) => {
+      if (e.target.files && e.target.files.length > 0) {
+        addFiles(e.target.files);
+        e.target.value = "";
+      }
+    },
+    [addFiles]
+  );
+  const handleClose = (0, import_react3.useCallback)(() => {
+    onCancel?.();
+    onClose();
+  }, [onCancel, onClose]);
+  const hasPending = files.some((f) => f.state === "pending");
+  const accept = pickerOptions?.accept?.join(",");
+  const editingEntry = files.find((f) => f.id === editingId) ?? null;
+  if (!open) return null;
+  return (
+    /* Backdrop — clicking outside the panel dismisses the modal */
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        className: "uploader-backdrop",
+        "data-testid": "picker-backdrop",
+        onClick: handleClose,
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "div",
+          {
+            ref: panelRef,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": titleId,
+            className: ["uploader-picker-panel", className ?? ""].filter(Boolean).join(" "),
+            style,
+            "data-testid": "picker-panel",
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "uploader-picker-header", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { id: titleId, className: "uploader-picker-title", children: editingEntry ? "Edit Image" : "Upload Files" }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "uploader-btn-close",
+                    "aria-label": "Close picker",
+                    onClick: handleClose,
+                    children: "\xD7"
+                  }
+                )
+              ] }),
+              editingEntry ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                ImageEditor,
+                {
+                  file: editingEntry.file,
+                  onCancel: () => setEditingId(null),
+                  onApply: (edited) => {
+                    editFile(editingEntry.id, edited);
+                    setEditingId(null);
+                  }
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                  "div",
+                  {
+                    className: [
+                      "uploader-dropzone",
+                      isDragOver ? "uploader-drag-over" : ""
+                    ].filter(Boolean).join(" "),
+                    role: "button",
+                    tabIndex: 0,
+                    "aria-label": "Drop files here or click to browse",
+                    onDragEnter: handleDragEnter,
+                    onDragLeave: handleDragLeave,
+                    onDragOver: handleDragOver,
+                    onDrop: handleDrop,
+                    onClick: openFileDialog,
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        openFileDialog();
+                      }
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "uploader-dropzone-icon", "aria-hidden": "true", children: "\u2191" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "uploader-dropzone-label", children: "Drag & drop files here" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        "button",
+                        {
+                          type: "button",
+                          className: "uploader-btn-browse",
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            openFileDialog();
+                          },
+                          children: "Browse files"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "input",
+                  {
+                    ref: inputRef,
+                    type: "file",
+                    multiple: !pickerOptions?.maxFiles || pickerOptions.maxFiles > 1,
+                    accept,
+                    className: "uploader-file-input",
+                    "aria-hidden": "true",
+                    tabIndex: -1,
+                    onChange: handleInputChange
+                  }
+                ),
+                files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { className: "uploader-file-list", role: "list", "aria-label": "Selected files", children: files.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("li", { className: `uploader-file-item uploader-file-${entry.state}`, children: [
+                  entry.previewUrl && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "img",
+                    {
+                      src: entry.previewUrl,
+                      alt: "",
+                      "aria-hidden": "true",
+                      className: "uploader-file-thumb"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "uploader-file-info", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "uploader-file-name", children: entry.file.name }),
+                    entry.state === "error" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "uploader-file-error", role: "alert", children: entry.error ?? "Upload failed" }),
+                    entry.state === "done" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "uploader-file-done", children: "Uploaded" })
+                  ] }),
+                  entry.state === "uploading" && entry.progress != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "progress",
+                    {
+                      className: "uploader-file-progress",
+                      value: entry.progress,
+                      max: 100,
+                      "aria-label": `${entry.file.name} upload progress`
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "uploader-file-actions", children: [
+                    entry.previewUrl && (entry.state === "pending" || entry.state === "error") && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        className: "uploader-btn-edit",
+                        "aria-label": `Edit ${entry.file.name}`,
+                        onClick: () => setEditingId(entry.id),
+                        children: "Edit"
+                      }
+                    ),
+                    entry.state === "error" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        className: "uploader-btn-retry",
+                        "aria-label": `Retry uploading ${entry.file.name}`,
+                        onClick: () => retryFile(entry.id),
+                        children: "Retry"
+                      }
+                    ),
+                    entry.state !== "uploading" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        className: "uploader-btn-remove",
+                        "aria-label": `Remove ${entry.file.name}`,
+                        onClick: () => removeFile(entry.id),
+                        children: "\xD7"
+                      }
+                    )
+                  ] })
+                ] }, entry.id)) }),
+                isUploading && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "uploader-aggregate-progress", role: "status", "aria-live": "polite", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("progress", { value: progress, max: 100, "aria-label": "Overall upload progress" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { "aria-live": "polite", children: [
+                    progress,
+                    "%"
+                  ] })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "uploader-picker-footer", children: [
+                  hasPending && !isUploading && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                    "button",
+                    {
+                      type: "button",
+                      className: "uploader-btn-upload",
+                      disabled: isUploading || !hasPending,
+                      onClick: () => void upload(),
+                      children: [
+                        "Upload ",
+                        files.filter((f) => f.state === "pending").length,
+                        " file",
+                        files.filter((f) => f.state === "pending").length !== 1 ? "s" : ""
+                      ]
+                    }
+                  ),
+                  isDone && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      className: "uploader-btn-done",
+                      onClick: onClose,
+                      children: "Done"
+                    }
+                  ),
+                  !isDone && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      className: "uploader-btn-cancel",
+                      disabled: isUploading,
+                      onClick: handleClose,
+                      children: "Cancel"
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  );
+}
+
+// src/react/DropPane.tsx
+var import_react4 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function DropPane({
+  apikey,
+  apiUrl,
+  security,
+  pickerOptions,
+  onUploadDone,
+  onFileUploadFinished,
+  onFileUploadFailed,
+  onCancel,
+  className,
+  style
+}) {
+  const inputId = (0, import_react4.useId)();
+  const inputRef = (0, import_react4.useRef)(null);
+  const [isDragOver, setIsDragOver] = (0, import_react4.useState)(false);
+  const { files, addFiles, removeFile, retryFile, upload, progress, isUploading, isDone } = usePicker({
+    apikey,
+    apiUrl,
+    security,
+    pickerOptions,
+    onUploadDone,
+    onFileUploadFinished,
+    onFileUploadFailed
+  });
+  const handleDragEnter = (0, import_react4.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(true);
+  }, []);
+  const handleDragLeave = (0, import_react4.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+  }, []);
+  const handleDragOver = (0, import_react4.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+  const handleDrop = (0, import_react4.useCallback)(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragOver(false);
+      if (e.dataTransfer.files.length > 0) {
+        addFiles(e.dataTransfer.files);
+      }
+    },
+    [addFiles]
+  );
+  const handleInputChange = (0, import_react4.useCallback)(
+    (e) => {
+      if (e.target.files && e.target.files.length > 0) {
+        addFiles(e.target.files);
+        e.target.value = "";
+      }
+    },
+    [addFiles]
+  );
+  const openFileDialog = (0, import_react4.useCallback)(() => {
+    inputRef.current?.click();
+  }, []);
+  const hasPending = files.some((f) => f.state === "pending");
+  const accept = pickerOptions?.accept?.join(",");
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: ["uploader-drop-pane", isDragOver ? "uploader-drag-over" : "", className ?? ""].filter(Boolean).join(" "),
+      style,
+      "data-testid": "drop-pane",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "div",
+          {
+            className: "uploader-dropzone",
+            role: "button",
+            tabIndex: 0,
+            "aria-label": "Drop files here or click to browse",
+            onDragEnter: handleDragEnter,
+            onDragLeave: handleDragLeave,
+            onDragOver: handleDragOver,
+            onDrop: handleDrop,
+            onClick: openFileDialog,
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                openFileDialog();
+              }
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "uploader-dropzone-icon", "aria-hidden": "true", children: "\u2191" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "uploader-dropzone-label", children: [
+                "Drag & drop files here or",
+                " ",
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { htmlFor: inputId, className: "uploader-browse-link", children: "browse" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "input",
+          {
+            id: inputId,
+            ref: inputRef,
+            type: "file",
+            multiple: !pickerOptions?.maxFiles || pickerOptions.maxFiles > 1,
+            accept,
+            className: "uploader-file-input",
+            "aria-hidden": "true",
+            tabIndex: -1,
+            onChange: handleInputChange
+          }
+        ),
+        files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { className: "uploader-file-list", role: "list", "aria-label": "Selected files", children: files.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("li", { className: `uploader-file-item uploader-file-${entry.state}`, children: [
+          entry.previewUrl && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "img",
+            {
+              src: entry.previewUrl,
+              alt: "",
+              "aria-hidden": "true",
+              className: "uploader-file-thumb"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "uploader-file-info", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "uploader-file-name", children: entry.file.name }),
+            entry.state === "error" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "uploader-file-error", role: "alert", children: entry.error ?? "Upload failed" }),
+            entry.state === "done" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "uploader-file-done", children: "Uploaded" })
+          ] }),
+          entry.state === "uploading" && entry.progress != null && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "progress",
+            {
+              className: "uploader-file-progress",
+              value: entry.progress,
+              max: 100,
+              "aria-label": `${entry.file.name} upload progress`
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "uploader-file-actions", children: [
+            entry.state === "error" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "uploader-btn-retry",
+                "aria-label": `Retry uploading ${entry.file.name}`,
+                onClick: () => retryFile(entry.id),
+                children: "Retry"
+              }
+            ),
+            entry.state !== "uploading" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "uploader-btn-remove",
+                "aria-label": `Remove ${entry.file.name}`,
+                onClick: () => removeFile(entry.id),
+                children: "\xD7"
+              }
+            )
+          ] })
+        ] }, entry.id)) }),
+        isUploading && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "uploader-aggregate-progress", role: "status", "aria-live": "polite", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("progress", { value: progress, max: 100, "aria-label": "Overall upload progress" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
+            progress,
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "uploader-actions", children: [
+          hasPending && !isUploading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "uploader-btn-upload",
+              disabled: isUploading,
+              onClick: () => void upload(),
+              children: "Upload"
+            }
+          ),
+          !isDone && !isUploading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "uploader-btn-cancel",
+              onClick: onCancel,
+              children: "Cancel"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DropPane,
+  ImageEditor,
+  PickerOverlay,
+  UploaderClient,
+  crop,
+  editImage,
+  flip,
+  flop,
+  output,
+  quality,
+  resize,
+  rotate,
+  transformUrl,
+  usePicker
+});
+//# sourceMappingURL=index.cjs.map