@ibanzajoe/uploader 0.1.0

package/dist/index.js

@@ -0,0 +1,1173 @@
+import {
+  UploaderClient,
+  crop,
+  flip,
+  flop,
+  output,
+  quality,
+  resize,
+  rotate,
+  transformUrl
+} from "./chunk-EM6NZZSU.js";
+
+// src/react/PickerOverlay.tsx
+import {
+  useRef as useRef3,
+  useState as useState3,
+  useCallback as useCallback3,
+  useEffect as useEffect2,
+  useId
+} from "react";
+
+// src/react/usePicker.ts
+import { useState, useCallback, useRef } from "react";
+var _idCounter = 0;
+function nextId() {
+  return `pf-${++_idCounter}`;
+}
+function usePicker(opts) {
+  const [files, setFiles] = useState([]);
+  const clientRef = 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 = 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 = 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 = 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 = useCallback((id) => {
+    setFiles(
+      (prev) => prev.map(
+        (f) => f.id === id ? { ...f, state: "pending", progress: null, error: void 0 } : f
+      )
+    );
+  }, []);
+  const upload = 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
+import { useCallback as useCallback2, useEffect, useRef as useRef2, useState as useState2 } from "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
+import { jsx, jsxs } from "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] = useState2(0);
+  const [flip2, setFlip] = useState2({ horizontal: false, vertical: false });
+  const [aspect, setAspect] = useState2(void 0);
+  const [cropShape, setCropShape] = useState2("rect");
+  const [resizeEnabled, setResizeEnabled] = useState2(false);
+  const [maxDimension, setMaxDimension] = useState2(maxDimensionDefault);
+  const [busy, setBusy] = useState2(false);
+  const [error, setError] = useState2(null);
+  const [workingFile, setWorkingFile] = useState2(file);
+  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] = useState2("");
+  useEffect(() => {
+    const url = URL.createObjectURL(workingFile);
+    setWorkingUrl(url);
+    return () => URL.revokeObjectURL(url);
+  }, [workingFile]);
+  const viewportRef = useRef2(null);
+  const [vp, setVp] = useState2({ w: 0, h: 0 });
+  const [nat, setNat] = useState2({ w: 0, h: 0 });
+  const [view, setView] = useState2({ scale: 1, x: 0, y: 0 });
+  const [crop2, setCrop] = useState2({ w: 0, h: 0 });
+  const ready = nat.w > 0 && vp.w > 0;
+  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 = useCallback2(
+    (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]
+  );
+  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]);
+  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 = useCallback2((e) => {
+    setNat({ w: e.currentTarget.naturalWidth, h: e.currentTarget.naturalHeight });
+  }, []);
+  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 = useRef2(null);
+  const onPointerDown = useCallback2(
+    (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 = useCallback2(
+    (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 = useCallback2((e) => {
+    dragRef.current = null;
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) e.currentTarget.releasePointerCapture(e.pointerId);
+  }, []);
+  const handleApply = useCallback2(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__ */ jsxs(
+    "div",
+    {
+      className: ["uploader-editor", className ?? ""].filter(Boolean).join(" "),
+      style,
+      "data-testid": "image-editor",
+      children: [
+        /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("span", { "data-handle": h.id, className: "uploader-editor-handle", style: h.pos }, h.id))
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ 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__ */ jsxs("div", { className: "uploader-editor-controls", children: [
+          /* @__PURE__ */ jsxs("div", { className: "uploader-editor-row", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "uploader-editor-tool",
+                "aria-label": "Rotate left",
+                onClick: () => setRotation((r) => (r - 90 + 360) % 360),
+                children: "\u27F2"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "uploader-editor-tool",
+                "aria-label": "Rotate right",
+                onClick: () => setRotation((r) => (r + 90) % 360),
+                children: "\u27F3"
+              }
+            ),
+            /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "uploader-editor-row", children: [
+            /* @__PURE__ */ jsx("span", { className: "uploader-editor-label", children: "Shape" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: `uploader-editor-chip${cropShape === "rect" ? " uploader-editor-chip-active" : ""}`,
+                onClick: () => setCropShape("rect"),
+                children: "Rectangle"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: `uploader-editor-chip${cropShape === "round" ? " uploader-editor-chip-active" : ""}`,
+                onClick: () => {
+                  setCropShape("round");
+                  setAspect(1);
+                },
+                children: "Circle"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "uploader-editor-row", children: [
+            /* @__PURE__ */ jsx("span", { className: "uploader-editor-label", children: "Ratio" }),
+            ASPECTS.map((a) => /* @__PURE__ */ 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__ */ jsxs("div", { className: "uploader-editor-row", children: [
+            /* @__PURE__ */ jsxs("label", { className: "uploader-editor-label", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: resizeEnabled,
+                  onChange: (e) => setResizeEnabled(e.target.checked)
+                }
+              ),
+              " ",
+              "Resize to"
+            ] }),
+            /* @__PURE__ */ 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__ */ jsx("span", { className: "uploader-editor-label", children: "px (longest side)" })
+          ] }),
+          error && /* @__PURE__ */ jsx("div", { className: "uploader-editor-error", role: "alert", children: error })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "uploader-editor-actions", children: [
+          /* @__PURE__ */ jsx("button", { type: "button", className: "uploader-btn-cancel", onClick: onCancel, disabled: busy, children: "Cancel" }),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "uploader-btn-upload", onClick: handleApply, disabled: busy, children: busy ? "Applying\u2026" : "Apply" })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/react/PickerOverlay.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function PickerOverlay({
+  open,
+  onClose,
+  apikey,
+  apiUrl,
+  security,
+  pickerOptions,
+  onUploadDone,
+  onFileUploadFinished,
+  onFileUploadFailed,
+  onCancel,
+  className,
+  style
+}) {
+  const titleId = useId();
+  const inputRef = useRef3(null);
+  const panelRef = useRef3(null);
+  const [isDragOver, setIsDragOver] = useState3(false);
+  const [editingId, setEditingId] = useState3(null);
+  const { files, addFiles, removeFile, editFile, retryFile, upload, progress, isUploading, isDone } = usePicker({
+    apikey,
+    apiUrl,
+    security,
+    pickerOptions,
+    onUploadDone,
+    onFileUploadFinished,
+    onFileUploadFailed
+  });
+  useEffect2(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (e.key === "Escape") {
+        onCancel?.();
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [open, onClose, onCancel]);
+  useEffect2(() => {
+    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]);
+  useEffect2(() => {
+    if (!open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [open]);
+  const handleDragEnter = useCallback3((e) => {
+    e.preventDefault();
+    setIsDragOver(true);
+  }, []);
+  const handleDragLeave = useCallback3((e) => {
+    e.preventDefault();
+    setIsDragOver(false);
+  }, []);
+  const handleDragOver = useCallback3((e) => {
+    e.preventDefault();
+  }, []);
+  const handleDrop = useCallback3(
+    (e) => {
+      e.preventDefault();
+      setIsDragOver(false);
+      if (e.dataTransfer.files.length > 0) {
+        addFiles(e.dataTransfer.files);
+      }
+    },
+    [addFiles]
+  );
+  const openFileDialog = useCallback3(() => inputRef.current?.click(), []);
+  const handleInputChange = useCallback3(
+    (e) => {
+      if (e.target.files && e.target.files.length > 0) {
+        addFiles(e.target.files);
+        e.target.value = "";
+      }
+    },
+    [addFiles]
+  );
+  const handleClose = useCallback3(() => {
+    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__ */ jsx2(
+      "div",
+      {
+        className: "uploader-backdrop",
+        "data-testid": "picker-backdrop",
+        onClick: handleClose,
+        children: /* @__PURE__ */ jsxs2(
+          "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__ */ jsxs2("div", { className: "uploader-picker-header", children: [
+                /* @__PURE__ */ jsx2("h2", { id: titleId, className: "uploader-picker-title", children: editingEntry ? "Edit Image" : "Upload Files" }),
+                /* @__PURE__ */ jsx2(
+                  "button",
+                  {
+                    type: "button",
+                    className: "uploader-btn-close",
+                    "aria-label": "Close picker",
+                    onClick: handleClose,
+                    children: "\xD7"
+                  }
+                )
+              ] }),
+              editingEntry ? /* @__PURE__ */ jsx2(
+                ImageEditor,
+                {
+                  file: editingEntry.file,
+                  onCancel: () => setEditingId(null),
+                  onApply: (edited) => {
+                    editFile(editingEntry.id, edited);
+                    setEditingId(null);
+                  }
+                }
+              ) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+                /* @__PURE__ */ jsxs2(
+                  "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__ */ jsx2("span", { className: "uploader-dropzone-icon", "aria-hidden": "true", children: "\u2191" }),
+                      /* @__PURE__ */ jsx2("p", { className: "uploader-dropzone-label", children: "Drag & drop files here" }),
+                      /* @__PURE__ */ jsx2(
+                        "button",
+                        {
+                          type: "button",
+                          className: "uploader-btn-browse",
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            openFileDialog();
+                          },
+                          children: "Browse files"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  "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__ */ jsx2("ul", { className: "uploader-file-list", role: "list", "aria-label": "Selected files", children: files.map((entry) => /* @__PURE__ */ jsxs2("li", { className: `uploader-file-item uploader-file-${entry.state}`, children: [
+                  entry.previewUrl && /* @__PURE__ */ jsx2(
+                    "img",
+                    {
+                      src: entry.previewUrl,
+                      alt: "",
+                      "aria-hidden": "true",
+                      className: "uploader-file-thumb"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs2("div", { className: "uploader-file-info", children: [
+                    /* @__PURE__ */ jsx2("span", { className: "uploader-file-name", children: entry.file.name }),
+                    entry.state === "error" && /* @__PURE__ */ jsx2("span", { className: "uploader-file-error", role: "alert", children: entry.error ?? "Upload failed" }),
+                    entry.state === "done" && /* @__PURE__ */ jsx2("span", { className: "uploader-file-done", children: "Uploaded" })
+                  ] }),
+                  entry.state === "uploading" && entry.progress != null && /* @__PURE__ */ jsx2(
+                    "progress",
+                    {
+                      className: "uploader-file-progress",
+                      value: entry.progress,
+                      max: 100,
+                      "aria-label": `${entry.file.name} upload progress`
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs2("div", { className: "uploader-file-actions", children: [
+                    entry.previewUrl && (entry.state === "pending" || entry.state === "error") && /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        type: "button",
+                        className: "uploader-btn-edit",
+                        "aria-label": `Edit ${entry.file.name}`,
+                        onClick: () => setEditingId(entry.id),
+                        children: "Edit"
+                      }
+                    ),
+                    entry.state === "error" && /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        type: "button",
+                        className: "uploader-btn-retry",
+                        "aria-label": `Retry uploading ${entry.file.name}`,
+                        onClick: () => retryFile(entry.id),
+                        children: "Retry"
+                      }
+                    ),
+                    entry.state !== "uploading" && /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        type: "button",
+                        className: "uploader-btn-remove",
+                        "aria-label": `Remove ${entry.file.name}`,
+                        onClick: () => removeFile(entry.id),
+                        children: "\xD7"
+                      }
+                    )
+                  ] })
+                ] }, entry.id)) }),
+                isUploading && /* @__PURE__ */ jsxs2("div", { className: "uploader-aggregate-progress", role: "status", "aria-live": "polite", children: [
+                  /* @__PURE__ */ jsx2("progress", { value: progress, max: 100, "aria-label": "Overall upload progress" }),
+                  /* @__PURE__ */ jsxs2("span", { "aria-live": "polite", children: [
+                    progress,
+                    "%"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs2("div", { className: "uploader-picker-footer", children: [
+                  hasPending && !isUploading && /* @__PURE__ */ jsxs2(
+                    "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__ */ jsx2(
+                    "button",
+                    {
+                      type: "button",
+                      className: "uploader-btn-done",
+                      onClick: onClose,
+                      children: "Done"
+                    }
+                  ),
+                  !isDone && /* @__PURE__ */ jsx2(
+                    "button",
+                    {
+                      type: "button",
+                      className: "uploader-btn-cancel",
+                      disabled: isUploading,
+                      onClick: handleClose,
+                      children: "Cancel"
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  );
+}
+
+// src/react/DropPane.tsx
+import { useRef as useRef4, useState as useState4, useCallback as useCallback4, useId as useId2 } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function DropPane({
+  apikey,
+  apiUrl,
+  security,
+  pickerOptions,
+  onUploadDone,
+  onFileUploadFinished,
+  onFileUploadFailed,
+  onCancel,
+  className,
+  style
+}) {
+  const inputId = useId2();
+  const inputRef = useRef4(null);
+  const [isDragOver, setIsDragOver] = useState4(false);
+  const { files, addFiles, removeFile, retryFile, upload, progress, isUploading, isDone } = usePicker({
+    apikey,
+    apiUrl,
+    security,
+    pickerOptions,
+    onUploadDone,
+    onFileUploadFinished,
+    onFileUploadFailed
+  });
+  const handleDragEnter = useCallback4((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(true);
+  }, []);
+  const handleDragLeave = useCallback4((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+  }, []);
+  const handleDragOver = useCallback4((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+  const handleDrop = useCallback4(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragOver(false);
+      if (e.dataTransfer.files.length > 0) {
+        addFiles(e.dataTransfer.files);
+      }
+    },
+    [addFiles]
+  );
+  const handleInputChange = useCallback4(
+    (e) => {
+      if (e.target.files && e.target.files.length > 0) {
+        addFiles(e.target.files);
+        e.target.value = "";
+      }
+    },
+    [addFiles]
+  );
+  const openFileDialog = useCallback4(() => {
+    inputRef.current?.click();
+  }, []);
+  const hasPending = files.some((f) => f.state === "pending");
+  const accept = pickerOptions?.accept?.join(",");
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: ["uploader-drop-pane", isDragOver ? "uploader-drag-over" : "", className ?? ""].filter(Boolean).join(" "),
+      style,
+      "data-testid": "drop-pane",
+      children: [
+        /* @__PURE__ */ jsxs3(
+          "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__ */ jsx3("span", { className: "uploader-dropzone-icon", "aria-hidden": "true", children: "\u2191" }),
+              /* @__PURE__ */ jsxs3("span", { className: "uploader-dropzone-label", children: [
+                "Drag & drop files here or",
+                " ",
+                /* @__PURE__ */ jsx3("label", { htmlFor: inputId, className: "uploader-browse-link", children: "browse" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "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__ */ jsx3("ul", { className: "uploader-file-list", role: "list", "aria-label": "Selected files", children: files.map((entry) => /* @__PURE__ */ jsxs3("li", { className: `uploader-file-item uploader-file-${entry.state}`, children: [
+          entry.previewUrl && /* @__PURE__ */ jsx3(
+            "img",
+            {
+              src: entry.previewUrl,
+              alt: "",
+              "aria-hidden": "true",
+              className: "uploader-file-thumb"
+            }
+          ),
+          /* @__PURE__ */ jsxs3("div", { className: "uploader-file-info", children: [
+            /* @__PURE__ */ jsx3("span", { className: "uploader-file-name", children: entry.file.name }),
+            entry.state === "error" && /* @__PURE__ */ jsx3("span", { className: "uploader-file-error", role: "alert", children: entry.error ?? "Upload failed" }),
+            entry.state === "done" && /* @__PURE__ */ jsx3("span", { className: "uploader-file-done", children: "Uploaded" })
+          ] }),
+          entry.state === "uploading" && entry.progress != null && /* @__PURE__ */ jsx3(
+            "progress",
+            {
+              className: "uploader-file-progress",
+              value: entry.progress,
+              max: 100,
+              "aria-label": `${entry.file.name} upload progress`
+            }
+          ),
+          /* @__PURE__ */ jsxs3("div", { className: "uploader-file-actions", children: [
+            entry.state === "error" && /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                className: "uploader-btn-retry",
+                "aria-label": `Retry uploading ${entry.file.name}`,
+                onClick: () => retryFile(entry.id),
+                children: "Retry"
+              }
+            ),
+            entry.state !== "uploading" && /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                className: "uploader-btn-remove",
+                "aria-label": `Remove ${entry.file.name}`,
+                onClick: () => removeFile(entry.id),
+                children: "\xD7"
+              }
+            )
+          ] })
+        ] }, entry.id)) }),
+        isUploading && /* @__PURE__ */ jsxs3("div", { className: "uploader-aggregate-progress", role: "status", "aria-live": "polite", children: [
+          /* @__PURE__ */ jsx3("progress", { value: progress, max: 100, "aria-label": "Overall upload progress" }),
+          /* @__PURE__ */ jsxs3("span", { children: [
+            progress,
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "uploader-actions", children: [
+          hasPending && !isUploading && /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: "uploader-btn-upload",
+              disabled: isUploading,
+              onClick: () => void upload(),
+              children: "Upload"
+            }
+          ),
+          !isDone && !isUploading && /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: "uploader-btn-cancel",
+              onClick: onCancel,
+              children: "Cancel"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  DropPane,
+  ImageEditor,
+  PickerOverlay,
+  UploaderClient,
+  crop,
+  editImage,
+  flip,
+  flop,
+  output,
+  quality,
+  resize,
+  rotate,
+  transformUrl,
+  usePicker
+};
+//# sourceMappingURL=index.js.map