@ibanzajoe/uploader 0.1.0 → 0.3.0

package/dist/index.js

@@ -12,10 +12,10 @@ import {
 
 // src/react/PickerOverlay.tsx
 import {
-  useRef as useRef3,
-  useState as useState3,
-  useCallback as useCallback3,
-  useEffect as useEffect2,
+  useRef as useRef5,
+  useState as useState4,
+  useCallback as useCallback5,
+  useEffect as useEffect3,
   useId
 } from "react";
 
@@ -640,8 +640,495 @@ function ImageEditor({
   );
 }
 
+// src/react/Dropzone.tsx
+import { useRef as useRef3, useCallback as useCallback3 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Dropzone({
+  onFiles,
+  isDragOver,
+  onDragEnter,
+  onDragLeave,
+  onDragOver,
+  onDrop,
+  accept,
+  multiple = true,
+  onCamera,
+  hint,
+  className,
+  style
+}) {
+  const inputRef = useRef3(null);
+  const openFileDialog = useCallback3(() => inputRef.current?.click(), []);
+  const handleInputChange = useCallback3(
+    (e) => {
+      if (e.target.files && e.target.files.length > 0) {
+        onFiles(e.target.files);
+        e.target.value = "";
+      }
+    },
+    [onFiles]
+  );
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: ["uploader-dropzone", className ?? ""].filter(Boolean).join(" "),
+      "data-drag-over": isDragOver ? "true" : void 0,
+      role: "button",
+      tabIndex: 0,
+      "aria-label": "Drop files here or click to browse",
+      style,
+      onDragEnter,
+      onDragLeave,
+      onDragOver,
+      onDrop,
+      onClick: openFileDialog,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          openFileDialog();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx2("div", { className: "uploader-dropzone-icon-wrap", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("div", { className: "uploader-dropzone-icon" }) }),
+        /* @__PURE__ */ jsx2("p", { className: "uploader-dropzone-label", children: "Drag & drop files here" }),
+        /* @__PURE__ */ jsx2("p", { className: "uploader-dropzone-sublabel", children: "or" }),
+        /* @__PURE__ */ jsxs2("div", { className: "uploader-dropzone-actions", children: [
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              className: "uploader-btn-browse",
+              onClick: (e) => {
+                e.stopPropagation();
+                openFileDialog();
+              },
+              children: "Browse files"
+            }
+          ),
+          onCamera && /* @__PURE__ */ jsxs2(
+            "button",
+            {
+              type: "button",
+              className: "uploader-btn-camera",
+              onClick: (e) => {
+                e.stopPropagation();
+                onCamera();
+              },
+              children: [
+                /* @__PURE__ */ jsxs2(
+                  "svg",
+                  {
+                    className: "uploader-btn-camera-icon",
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    "aria-hidden": "true",
+                    children: [
+                      /* @__PURE__ */ jsx2(
+                        "path",
+                        {
+                          d: "M4 8.5A2.5 2.5 0 0 1 6.5 6h1.2a1 1 0 0 0 .83-.45l.74-1.1A1 1 0 0 1 10.1 4h3.8a1 1 0 0 1 .83.45l.74 1.1a1 1 0 0 0 .83.45h1.2A2.5 2.5 0 0 1 20 8.5v8A2.5 2.5 0 0 1 17.5 19h-11A2.5 2.5 0 0 1 4 16.5v-8Z",
+                          stroke: "currentColor",
+                          strokeWidth: "1.6",
+                          strokeLinejoin: "round"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12.5", r: "3.2", stroke: "currentColor", strokeWidth: "1.6" })
+                    ]
+                  }
+                ),
+                "Take photo"
+              ]
+            }
+          )
+        ] }),
+        hint && /* @__PURE__ */ jsx2("p", { className: "uploader-dropzone-hint", children: hint }),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            multiple,
+            accept,
+            className: "uploader-file-input",
+            "aria-hidden": "true",
+            tabIndex: -1,
+            onChange: handleInputChange
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/react/CameraCapture.tsx
+import { useCallback as useCallback4, useEffect as useEffect2, useRef as useRef4, useState as useState3 } from "react";
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function isCameraSupported() {
+  return typeof navigator !== "undefined" && !!navigator.mediaDevices && typeof navigator.mediaDevices.getUserMedia === "function" && typeof document !== "undefined" && typeof HTMLCanvasElement !== "undefined";
+}
+var IMAGE_EXT = /\.(png|jpe?g|gif|webp|bmp|svg|avif|heic|heif)$/i;
+function acceptsImages(accept) {
+  if (!accept || accept.length === 0) return true;
+  return accept.some((a) => a.startsWith("image/") || a === "image/*" || IMAGE_EXT.test(a.trim()));
+}
+function shouldOfferCamera(options) {
+  if (!isCameraSupported()) return false;
+  if (!acceptsImages(options?.accept)) return false;
+  const sources = options?.fromSources;
+  if (sources && !sources.includes("camera")) return false;
+  return true;
+}
+function extForType(mime) {
+  switch (mime) {
+    case "image/png":
+      return "png";
+    case "image/webp":
+      return "webp";
+    default:
+      return "jpg";
+  }
+}
+function describeCameraError(err) {
+  const name = err instanceof DOMException ? err.name : "";
+  switch (name) {
+    case "NotAllowedError":
+    case "SecurityError":
+      return "Camera access was blocked. Allow camera permission and try again.";
+    case "NotFoundError":
+    case "OverconstrainedError":
+      return "No camera was found on this device.";
+    case "NotReadableError":
+      return "The camera is already in use by another application.";
+    default:
+      return "Could not start the camera.";
+  }
+}
+function CameraCapture({
+  onCapture,
+  onCancel,
+  facingMode = "user",
+  outputType = "image/jpeg",
+  quality: quality2 = 0.92,
+  fileNamePrefix = "camera-photo",
+  className,
+  style
+}) {
+  const videoRef = useRef4(null);
+  const streamRef = useRef4(null);
+  const blobRef = useRef4(null);
+  const [status, setStatus] = useState3("initializing");
+  const [error, setError] = useState3(null);
+  const [stillUrl, setStillUrl] = useState3("");
+  const mirror = facingMode === "user";
+  const stopStream = useCallback4(() => {
+    streamRef.current?.getTracks().forEach((t) => t.stop());
+    streamRef.current = null;
+    if (videoRef.current) videoRef.current.srcObject = null;
+  }, []);
+  const startStream = useCallback4(async () => {
+    setError(null);
+    setStatus("initializing");
+    if (!isCameraSupported()) {
+      setError("Camera capture is not supported in this browser.");
+      setStatus("error");
+      return;
+    }
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: { facingMode },
+        audio: false
+      });
+      if (videoRef.current == null) {
+        stream.getTracks().forEach((t) => t.stop());
+        return;
+      }
+      streamRef.current = stream;
+      videoRef.current.srcObject = stream;
+      setStatus("live");
+    } catch (err) {
+      setError(describeCameraError(err));
+      setStatus("error");
+    }
+  }, [facingMode]);
+  useEffect2(() => {
+    void startStream();
+    return () => {
+      stopStream();
+    };
+  }, [startStream, stopStream]);
+  useEffect2(() => {
+    if (!stillUrl) return;
+    return () => URL.revokeObjectURL(stillUrl);
+  }, [stillUrl]);
+  const capture = useCallback4(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    const w = video.videoWidth;
+    const h = video.videoHeight;
+    if (!w || !h) {
+      setError("The camera is still warming up \u2014 try again in a moment.");
+      return;
+    }
+    const canvas = document.createElement("canvas");
+    canvas.width = w;
+    canvas.height = h;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      setError("Canvas is unavailable for capturing.");
+      return;
+    }
+    if (mirror) {
+      ctx.translate(w, 0);
+      ctx.scale(-1, 1);
+    }
+    ctx.drawImage(video, 0, 0, w, h);
+    canvas.toBlob(
+      (blob) => {
+        if (!blob) {
+          setError("Failed to capture the photo.");
+          return;
+        }
+        blobRef.current = blob;
+        setStillUrl(URL.createObjectURL(blob));
+        setStatus("captured");
+        stopStream();
+      },
+      outputType,
+      quality2
+    );
+  }, [mirror, outputType, quality2, stopStream]);
+  const retake = useCallback4(() => {
+    blobRef.current = null;
+    setStillUrl("");
+    void startStream();
+  }, [startStream]);
+  const confirm = useCallback4(() => {
+    const blob = blobRef.current;
+    if (!blob) return;
+    const name = `${fileNamePrefix}-${Date.now()}.${extForType(outputType)}`;
+    const file = new File([blob], name, { type: outputType, lastModified: Date.now() });
+    onCapture(file);
+  }, [fileNamePrefix, outputType, onCapture]);
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: ["uploader-camera", className ?? ""].filter(Boolean).join(" "),
+      style,
+      "data-testid": "camera-capture",
+      children: [
+        /* @__PURE__ */ jsxs3("div", { className: "uploader-camera-stage", children: [
+          status === "error" ? /* @__PURE__ */ jsx3("div", { className: "uploader-camera-error", role: "alert", children: error }) : status === "captured" ? (
+            /* eslint-disable-next-line @next/next/no-img-element */
+            /* @__PURE__ */ jsx3("img", { src: stillUrl, alt: "Captured preview", className: "uploader-camera-still" })
+          ) : /* @__PURE__ */ jsx3(
+            "video",
+            {
+              ref: videoRef,
+              className: "uploader-camera-video",
+              autoPlay: true,
+              playsInline: true,
+              muted: true,
+              "data-mirror": mirror ? "true" : void 0
+            }
+          ),
+          status === "initializing" && /* @__PURE__ */ jsx3("div", { className: "uploader-camera-status", "aria-live": "polite", children: "Starting camera\u2026" })
+        ] }),
+        status === "live" && /* @__PURE__ */ jsx3("p", { className: "uploader-camera-hint", children: "Frame your shot, then tap the shutter to capture." }),
+        /* @__PURE__ */ jsx3("div", { className: "uploader-camera-actions", children: status === "captured" ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+          /* @__PURE__ */ jsx3("button", { type: "button", className: "uploader-btn-secondary", onClick: retake, children: "Retake" }),
+          /* @__PURE__ */ jsx3("button", { type: "button", className: "uploader-btn-primary", onClick: confirm, children: "Use photo" })
+        ] }) : status === "error" ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+          /* @__PURE__ */ jsx3("button", { type: "button", className: "uploader-btn-secondary", onClick: onCancel, children: "Back" }),
+          /* @__PURE__ */ jsx3("button", { type: "button", className: "uploader-btn-primary", onClick: () => void startStream(), children: "Try again" })
+        ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
+          /* @__PURE__ */ jsx3("button", { type: "button", className: "uploader-btn-secondary", onClick: onCancel, children: "Back" }),
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: "uploader-camera-shutter",
+              "aria-label": "Capture photo",
+              disabled: status !== "live",
+              onClick: capture,
+              children: /* @__PURE__ */ jsx3("span", { className: "uploader-camera-shutter-ring", "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ jsx3("div", { className: "uploader-camera-actions-spacer", "aria-hidden": "true", children: /* @__PURE__ */ jsx3("span", { className: "uploader-btn-secondary", children: "Back" }) })
+        ] }) })
+      ]
+    }
+  );
+}
+
+// src/react/ProgressBar.tsx
+import "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function ProgressBar({ value, label, size = "sm", className, style }) {
+  const clamped = Math.max(0, Math.min(100, value));
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      role: "progressbar",
+      "aria-valuenow": clamped,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-label": label,
+      "data-size": size,
+      className: ["uploader-progress-bar", className ?? ""].filter(Boolean).join(" "),
+      style,
+      children: /* @__PURE__ */ jsx4(
+        "div",
+        {
+          className: "uploader-progress-bar-fill",
+          style: { width: `${clamped}%` }
+        }
+      )
+    }
+  );
+}
+
+// src/react/FileQueueRow.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function statusLabel(entry) {
+  switch (entry.state) {
+    case "uploading":
+      return entry.progress != null ? `${entry.progress}%` : "Uploading\u2026";
+    case "done":
+      return "Done";
+    case "error":
+      return entry.error ?? "Failed";
+    default:
+      return "Ready";
+  }
+}
+function FileQueueRow({ entry, onRemove, onRetry, onEdit }) {
+  const { id, file, state, progress, previewUrl } = entry;
+  const isUploading = state === "uploading";
+  return /* @__PURE__ */ jsxs4("li", { className: `uploader-file-item uploader-file-${state}`, children: [
+    previewUrl ? /* @__PURE__ */ jsx5(
+      "img",
+      {
+        src: previewUrl,
+        alt: "",
+        "aria-hidden": "true",
+        className: "uploader-file-thumb"
+      }
+    ) : /* @__PURE__ */ jsx5("div", { className: "uploader-file-thumb-placeholder", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs4("div", { className: "uploader-file-info", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "uploader-file-info-row", children: [
+        /* @__PURE__ */ jsx5("span", { className: "uploader-file-name", children: file.name }),
+        /* @__PURE__ */ jsx5(
+          "span",
+          {
+            className: "uploader-file-status",
+            "data-state": state,
+            role: state === "error" ? "alert" : void 0,
+            children: statusLabel(entry)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx5(
+        ProgressBar,
+        {
+          value: isUploading && progress != null ? progress : state === "done" ? 100 : 0,
+          label: `${file.name} upload progress`
+        }
+      )
+    ] }),
+    state === "done" && /* @__PURE__ */ jsx5("div", { className: "uploader-file-done-badge", "aria-hidden": "true", children: /* @__PURE__ */ jsx5("svg", { width: "9", height: "7", viewBox: "0 0 9 7", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx5(
+      "path",
+      {
+        d: "M1 3.5L3.5 6L8 1",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ) }) }),
+    !isUploading && /* @__PURE__ */ jsxs4("div", { className: "uploader-file-actions", children: [
+      onEdit && previewUrl && (state === "pending" || state === "error") && /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          className: "uploader-btn-edit",
+          "aria-label": `Edit ${file.name}`,
+          onClick: () => onEdit(id),
+          children: "Edit"
+        }
+      ),
+      state === "error" && /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          className: "uploader-btn-retry",
+          "aria-label": `Retry uploading ${file.name}`,
+          onClick: () => onRetry(id),
+          children: "Retry"
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          className: "uploader-btn-remove",
+          "aria-label": `Remove ${file.name}`,
+          onClick: () => onRemove(id),
+          children: "\xD7"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/react/theme.ts
+var VAR_MAP = {
+  accent: "--uploader-accent",
+  accentHover: "--uploader-accent-hover",
+  accentSoft: "--uploader-accent-soft",
+  accentRing: "--uploader-accent-ring",
+  radius: "--uploader-radius",
+  background: "--uploader-bg",
+  surface: "--uploader-surface",
+  surfaceHover: "--uploader-surface-hover",
+  border: "--uploader-border",
+  borderSubtle: "--uploader-border-subtle",
+  text: "--uploader-text",
+  textMuted: "--uploader-text-muted",
+  textXMuted: "--uploader-text-xmuted",
+  error: "--uploader-error",
+  errorSoft: "--uploader-error-soft",
+  success: "--uploader-success",
+  shadowSm: "--uploader-shadow-sm",
+  shadow: "--uploader-shadow",
+  shadowLg: "--uploader-shadow-lg",
+  font: "--uploader-font",
+  transition: "--uploader-transition",
+  zBackdrop: "--uploader-z-backdrop",
+  zPanel: "--uploader-z-panel"
+};
+function themeToVars(theme) {
+  if (!theme) return {};
+  const vars = {};
+  for (const key of Object.keys(theme)) {
+    const value = theme[key];
+    if (value === void 0 || value === null) continue;
+    vars[VAR_MAP[key]] = String(value);
+  }
+  return vars;
+}
+
 // src/react/PickerOverlay.tsx
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function dialogTitle(isUploading, isDone, totalFiles, doneCount, errorCount, editingId, cameraOpen) {
+  if (editingId) return "Edit Image";
+  if (cameraOpen) return "Take a photo";
+  if (isDone && errorCount === 0) return "All files uploaded";
+  if (isDone && errorCount > 0) return `${doneCount} of ${totalFiles} uploaded`;
+  if (isUploading) return `Uploading ${totalFiles} file${totalFiles !== 1 ? "s" : ""}`;
+  return "Upload files";
+}
 function PickerOverlay({
   open,
   onClose,
@@ -653,14 +1140,15 @@ function PickerOverlay({
   onFileUploadFinished,
   onFileUploadFailed,
   onCancel,
+  theme,
   className,
   style
 }) {
   const titleId = useId();
-  const inputRef = useRef3(null);
-  const panelRef = useRef3(null);
-  const [isDragOver, setIsDragOver] = useState3(false);
-  const [editingId, setEditingId] = useState3(null);
+  const panelRef = useRef5(null);
+  const [isDragOver, setIsDragOver] = useState4(false);
+  const [editingId, setEditingId] = useState4(null);
+  const [cameraOpen, setCameraOpen] = useState4(false);
   const { files, addFiles, removeFile, editFile, retryFile, upload, progress, isUploading, isDone } = usePicker({
     apikey,
     apiUrl,
@@ -670,7 +1158,7 @@ function PickerOverlay({
     onFileUploadFinished,
     onFileUploadFailed
   });
-  useEffect2(() => {
+  useEffect3(() => {
     if (!open) return;
     const handler = (e) => {
       if (e.key === "Escape") {
@@ -681,7 +1169,7 @@ function PickerOverlay({
     document.addEventListener("keydown", handler);
     return () => document.removeEventListener("keydown", handler);
   }, [open, onClose, onCancel]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!open || !panelRef.current) return;
     const panel = panelRef.current;
     const focusable = panel.querySelectorAll(
@@ -707,8 +1195,8 @@ function PickerOverlay({
     };
     document.addEventListener("keydown", trap);
     return () => document.removeEventListener("keydown", trap);
-  }, [open, files, editingId]);
-  useEffect2(() => {
+  }, [open, files, editingId, cameraOpen]);
+  useEffect3(() => {
     if (!open) return;
     const prev = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -716,18 +1204,18 @@ function PickerOverlay({
       document.body.style.overflow = prev;
     };
   }, [open]);
-  const handleDragEnter = useCallback3((e) => {
+  const handleDragEnter = useCallback5((e) => {
     e.preventDefault();
     setIsDragOver(true);
   }, []);
-  const handleDragLeave = useCallback3((e) => {
+  const handleDragLeave = useCallback5((e) => {
     e.preventDefault();
     setIsDragOver(false);
   }, []);
-  const handleDragOver = useCallback3((e) => {
+  const handleDragOver = useCallback5((e) => {
     e.preventDefault();
   }, []);
-  const handleDrop = useCallback3(
+  const handleDrop = useCallback5(
     (e) => {
       e.preventDefault();
       setIsDragOver(false);
@@ -737,58 +1225,64 @@ function PickerOverlay({
     },
     [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(() => {
+  const handleClose = useCallback5(() => {
     onCancel?.();
     onClose();
   }, [onCancel, onClose]);
   const hasPending = files.some((f) => f.state === "pending");
+  const pendingCount = files.filter((f) => f.state === "pending").length;
+  const doneCount = files.filter((f) => f.state === "done").length;
+  const errorCount = files.filter((f) => f.state === "error").length;
   const accept = pickerOptions?.accept?.join(",");
+  const multiple = !pickerOptions?.maxFiles || pickerOptions.maxFiles > 1;
   const editingEntry = files.find((f) => f.id === editingId) ?? null;
+  const offerCamera = shouldOfferCamera(pickerOptions);
+  const title = dialogTitle(
+    isUploading,
+    isDone,
+    files.length,
+    doneCount,
+    errorCount,
+    editingId,
+    cameraOpen
+  );
   if (!open) return null;
   return (
     /* Backdrop — clicking outside the panel dismisses the modal */
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx6(
       "div",
       {
         className: "uploader-backdrop",
         "data-testid": "picker-backdrop",
+        style: themeToVars(theme),
         onClick: handleClose,
-        children: /* @__PURE__ */ jsxs2(
+        children: /* @__PURE__ */ jsxs5(
           "div",
           {
             ref: panelRef,
             role: "dialog",
             "aria-modal": "true",
             "aria-labelledby": titleId,
+            "data-drag-over": isDragOver && !editingEntry && files.length === 0 ? "true" : void 0,
             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(
+              /* @__PURE__ */ jsxs5("div", { className: "uploader-picker-header", children: [
+                /* @__PURE__ */ jsx6("h2", { id: titleId, className: "uploader-picker-title", children: title }),
+                /* @__PURE__ */ jsx6(
                   "button",
                   {
                     type: "button",
                     className: "uploader-btn-close",
                     "aria-label": "Close picker",
                     onClick: handleClose,
-                    children: "\xD7"
+                    children: "\u2715"
                   }
                 )
               ] }),
-              editingEntry ? /* @__PURE__ */ jsx2(
+              editingEntry ? /* @__PURE__ */ jsx6(
                 ImageEditor,
                 {
                   file: editingEntry.file,
@@ -798,160 +1292,134 @@ function PickerOverlay({
                     setEditingId(null);
                   }
                 }
-              ) : /* @__PURE__ */ jsxs2(Fragment, { children: [
-                /* @__PURE__ */ jsxs2(
-                  "div",
+              ) : cameraOpen ? (
+                /* ── Camera capture view ───────────────────────────────────────── */
+                /* @__PURE__ */ jsx6(
+                  CameraCapture,
                   {
-                    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"
+                    facingMode: pickerOptions?.cameraFacingMode,
+                    onCancel: () => setCameraOpen(false),
+                    onCapture: (file) => {
+                      addFiles([file]);
+                      setCameraOpen(false);
                     }
-                  ),
-                  /* @__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" })
+                  }
+                )
+              ) : isDone ? (
+                /* ── Done state ─────────────────────────────────────────────────── */
+                /* @__PURE__ */ jsxs5("div", { className: "uploader-done-body", children: [
+                  /* @__PURE__ */ jsxs5("p", { className: "uploader-done-subtitle", children: [
+                    files.length,
+                    " file",
+                    files.length !== 1 ? "s" : "",
+                    " delivered to your bucket"
                   ] }),
-                  entry.state === "uploading" && entry.progress != null && /* @__PURE__ */ jsx2(
-                    "progress",
+                  /* @__PURE__ */ jsx6("ul", { className: "uploader-file-list uploader-done-list", role: "list", "aria-label": "Uploaded files", children: files.map((entry) => /* @__PURE__ */ jsx6(
+                    FileQueueRow,
                     {
-                      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(
+                      entry,
+                      onRemove: removeFile,
+                      onRetry: retryFile
+                    },
+                    entry.id
+                  )) }),
+                  /* @__PURE__ */ jsx6(
                     "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" : ""
-                      ]
+                      className: "uploader-btn-primary uploader-btn-done-full",
+                      onClick: onClose,
+                      children: "Done"
+                    }
+                  )
+                ] })
+              ) : (
+                /* ── Normal (idle / uploading / error) view ─────────────────────── */
+                /* @__PURE__ */ jsxs5(Fragment2, { children: [
+                  files.length === 0 && /* @__PURE__ */ jsx6(
+                    Dropzone,
+                    {
+                      onFiles: addFiles,
+                      isDragOver,
+                      onDragEnter: handleDragEnter,
+                      onDragLeave: handleDragLeave,
+                      onDragOver: handleDragOver,
+                      onDrop: handleDrop,
+                      accept,
+                      multiple,
+                      onCamera: offerCamera ? () => setCameraOpen(true) : void 0,
+                      hint: "PNG, JPG, PDF, ZIP \xB7 up to 50 MB"
                     }
                   ),
-                  isDone && /* @__PURE__ */ jsx2(
-                    "button",
+                  files.length > 0 && /* @__PURE__ */ jsx6(
+                    "ul",
                     {
-                      type: "button",
-                      className: "uploader-btn-done",
-                      onClick: onClose,
-                      children: "Done"
+                      className: "uploader-file-list",
+                      role: "list",
+                      "aria-label": "Selected files",
+                      "aria-live": "polite",
+                      children: files.map((entry) => /* @__PURE__ */ jsx6(
+                        FileQueueRow,
+                        {
+                          entry,
+                          onRemove: removeFile,
+                          onRetry: retryFile,
+                          onEdit: setEditingId
+                        },
+                        entry.id
+                      ))
                     }
                   ),
-                  !isDone && /* @__PURE__ */ jsx2(
-                    "button",
+                  isUploading && /* @__PURE__ */ jsxs5(
+                    "div",
                     {
-                      type: "button",
-                      className: "uploader-btn-cancel",
-                      disabled: isUploading,
-                      onClick: handleClose,
-                      children: "Cancel"
+                      className: "uploader-aggregate-progress",
+                      role: "status",
+                      "aria-live": "polite",
+                      children: [
+                        /* @__PURE__ */ jsx6("span", { className: "uploader-aggregate-progress-label", children: "Total progress" }),
+                        /* @__PURE__ */ jsx6(
+                          ProgressBar,
+                          {
+                            value: progress,
+                            label: "Overall upload progress",
+                            size: "lg"
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs5("span", { className: "uploader-aggregate-progress-pct", children: [
+                          progress,
+                          "%"
+                        ] })
+                      ]
                     }
-                  )
+                  ),
+                  /* @__PURE__ */ jsxs5("div", { className: "uploader-picker-footer", children: [
+                    /* @__PURE__ */ jsx6("span", { className: "uploader-picker-footer-esc", children: "Esc to close" }),
+                    /* @__PURE__ */ jsxs5("div", { className: "uploader-picker-footer-actions", children: [
+                      /* @__PURE__ */ jsx6(
+                        "button",
+                        {
+                          type: "button",
+                          className: "uploader-btn-secondary uploader-btn-cancel",
+                          disabled: isUploading,
+                          onClick: handleClose,
+                          children: "Cancel"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx6(
+                        "button",
+                        {
+                          type: "button",
+                          className: "uploader-btn-primary uploader-btn-upload",
+                          disabled: isUploading || !hasPending,
+                          onClick: () => void upload(),
+                          children: isUploading ? "Uploading\u2026" : `Upload${pendingCount > 0 ? ` ${pendingCount} file${pendingCount !== 1 ? "s" : ""}` : ""}`
+                        }
+                      )
+                    ] })
+                  ] })
                 ] })
-              ] })
+              )
             ]
           }
         )
@@ -961,8 +1429,8 @@ function PickerOverlay({
 }
 
 // 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";
+import { useState as useState5, useCallback as useCallback6 } from "react";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function DropPane({
   apikey,
   apiUrl,
@@ -972,12 +1440,14 @@ function DropPane({
   onFileUploadFinished,
   onFileUploadFailed,
   onCancel,
+  hint = "or click to browse \xB7 max 50 MB",
+  theme,
   className,
   style
 }) {
-  const inputId = useId2();
-  const inputRef = useRef4(null);
-  const [isDragOver, setIsDragOver] = useState4(false);
+  const [isDragOver, setIsDragOver] = useState5(false);
+  const [cameraOpen, setCameraOpen] = useState5(false);
+  const rootStyle = { ...themeToVars(theme), ...style };
   const { files, addFiles, removeFile, retryFile, upload, progress, isUploading, isDone } = usePicker({
     apikey,
     apiUrl,
@@ -987,21 +1457,21 @@ function DropPane({
     onFileUploadFinished,
     onFileUploadFailed
   });
-  const handleDragEnter = useCallback4((e) => {
+  const handleDragEnter = useCallback6((e) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragOver(true);
   }, []);
-  const handleDragLeave = useCallback4((e) => {
+  const handleDragLeave = useCallback6((e) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragOver(false);
   }, []);
-  const handleDragOver = useCallback4((e) => {
+  const handleDragOver = useCallback6((e) => {
     e.preventDefault();
     e.stopPropagation();
   }, []);
-  const handleDrop = useCallback4(
+  const handleDrop = useCallback6(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -1012,141 +1482,126 @@ function DropPane({
     },
     [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 pendingCount = files.filter((f) => f.state === "pending").length;
   const accept = pickerOptions?.accept?.join(",");
-  return /* @__PURE__ */ jsxs3(
+  const multiple = !pickerOptions?.maxFiles || pickerOptions.maxFiles > 1;
+  const offerCamera = shouldOfferCamera(pickerOptions);
+  if (cameraOpen) {
+    return /* @__PURE__ */ jsx7(
+      "div",
+      {
+        className: ["uploader-drop-pane", className ?? ""].filter(Boolean).join(" "),
+        "data-testid": "drop-pane",
+        style: rootStyle,
+        children: /* @__PURE__ */ jsx7(
+          CameraCapture,
+          {
+            facingMode: pickerOptions?.cameraFacingMode,
+            onCancel: () => setCameraOpen(false),
+            onCapture: (file) => {
+              addFiles([file]);
+              setCameraOpen(false);
+            }
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
-      className: ["uploader-drop-pane", isDragOver ? "uploader-drag-over" : "", className ?? ""].filter(Boolean).join(" "),
-      style,
+      className: ["uploader-drop-pane", className ?? ""].filter(Boolean).join(" "),
+      "data-drag-over": isDragOver ? "true" : void 0,
       "data-testid": "drop-pane",
+      style: rootStyle,
       children: [
-        /* @__PURE__ */ jsxs3(
-          "div",
+        files.length === 0 && /* @__PURE__ */ jsx7(
+          Dropzone,
           {
-            className: "uploader-dropzone",
-            role: "button",
-            tabIndex: 0,
-            "aria-label": "Drop files here or click to browse",
+            onFiles: addFiles,
+            isDragOver,
             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" })
-              ] })
-            ]
+            accept,
+            multiple,
+            onCamera: offerCamera ? () => setCameraOpen(true) : void 0,
+            hint
           }
         ),
-        /* @__PURE__ */ jsx3(
-          "input",
+        files.length > 0 && isDragOver && /* @__PURE__ */ jsx7(
+          "div",
           {
-            id: inputId,
-            ref: inputRef,
-            type: "file",
-            multiple: !pickerOptions?.maxFiles || pickerOptions.maxFiles > 1,
-            accept,
-            className: "uploader-file-input",
+            className: "uploader-drop-pane-drag-overlay",
+            onDragEnter: handleDragEnter,
+            onDragLeave: handleDragLeave,
+            onDragOver: handleDragOver,
+            onDrop: handleDrop,
             "aria-hidden": "true",
-            tabIndex: -1,
-            onChange: handleInputChange
+            children: /* @__PURE__ */ jsx7("span", { className: "uploader-drop-pane-drag-label", children: "Drop to add files" })
           }
         ),
-        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",
+        files.length > 0 && /* @__PURE__ */ jsx7(
+          "ul",
+          {
+            className: "uploader-file-list uploader-drop-pane-file-list",
+            role: "list",
+            "aria-label": "Selected files",
+            "aria-live": "polite",
+            children: files.map((entry) => /* @__PURE__ */ jsx7(
+              FileQueueRow,
               {
-                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(
+                entry,
+                onRemove: removeFile,
+                onRetry: retryFile
+              },
+              entry.id
+            ))
+          }
+        ),
+        isUploading && /* @__PURE__ */ jsxs6(
+          "div",
+          {
+            className: "uploader-aggregate-progress",
+            role: "status",
+            "aria-live": "polite",
+            children: [
+              /* @__PURE__ */ jsx7(
+                ProgressBar,
+                {
+                  value: progress,
+                  label: "Overall upload progress",
+                  size: "lg"
+                }
+              ),
+              /* @__PURE__ */ jsxs6("span", { className: "uploader-aggregate-progress-pct", children: [
+                progress,
+                "%"
+              ] })
+            ]
+          }
+        ),
+        files.length > 0 && !isDone && /* @__PURE__ */ jsxs6("div", { className: "uploader-drop-pane-actions", children: [
+          /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
-              className: "uploader-btn-upload",
+              className: "uploader-btn-secondary uploader-btn-cancel",
               disabled: isUploading,
-              onClick: () => void upload(),
-              children: "Upload"
+              onClick: onCancel,
+              children: "Cancel"
             }
           ),
-          !isDone && !isUploading && /* @__PURE__ */ jsx3(
+          hasPending && /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
-              className: "uploader-btn-cancel",
-              onClick: onCancel,
-              children: "Cancel"
+              className: "uploader-btn-primary uploader-btn-upload",
+              disabled: isUploading,
+              onClick: () => void upload(),
+              children: isUploading ? "Uploading\u2026" : `Upload${pendingCount > 0 ? ` ${pendingCount} file${pendingCount !== 1 ? "s" : ""}` : ""}`
             }
           )
         ] })
@@ -1155,6 +1610,7 @@ function DropPane({
   );
 }
 export {
+  CameraCapture,
   DropPane,
   ImageEditor,
   PickerOverlay,
@@ -1163,10 +1619,13 @@ export {
   editImage,
   flip,
   flop,
+  isCameraSupported,
   output,
   quality,
   resize,
   rotate,
+  shouldOfferCamera,
+  themeToVars,
   transformUrl,
   usePicker
 };