uploaderkit 1.0.0 → 2.0.0

package/dist/react.cjs

@@ -0,0 +1,981 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/react/compressImage.ts
+var COMPRESSIBLE = /* @__PURE__ */ new Set(["image/jpeg", "image/png", "image/webp"]);
+var compressImage = async (file, { maxWidth, maxHeight, quality = 0.8 }) => {
+  if (!COMPRESSIBLE.has(file.type)) return file;
+  if (typeof createImageBitmap !== "function") return file;
+  try {
+    const bitmap = await createImageBitmap(file);
+    const scale = Math.min(
+      1,
+      (maxWidth ?? Infinity) / bitmap.width,
+      (maxHeight ?? Infinity) / bitmap.height
+    );
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.max(1, Math.round(bitmap.width * scale));
+    canvas.height = Math.max(1, Math.round(bitmap.height * scale));
+    const context = canvas.getContext("2d");
+    if (!context) return file;
+    context.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
+    bitmap.close();
+    const blob = await new Promise(
+      (resolve) => canvas.toBlob(resolve, file.type, quality)
+    );
+    if (!blob || blob.size >= file.size) return file;
+    return new File([blob], file.name, { type: file.type });
+  } catch {
+    return file;
+  }
+};
+
+// src/constants.ts
+var KB = 1024;
+var MB = 1024 * KB;
+var MAGIC_NUMBERS = {
+  png: [137, 80, 78, 71, 13, 10, 26, 10],
+  jpg: [255, 216, 255],
+  jpeg: [255, 216, 255],
+  gif: [71, 73, 70, 56],
+  webp: [82, 73, 70, 70],
+  // RIFF; bytes 8-11 spell WEBP
+  ico: [0, 0, 1, 0],
+  pdf: [37, 80, 68, 70],
+  // %PDF
+  // OOXML files are ZIP containers, so docx/xlsx share the PK signature.
+  docx: [80, 75, 3, 4],
+  xlsx: [80, 75, 3, 4],
+  doc: [208, 207, 17, 224],
+  xls: [208, 207, 17, 224],
+  // DER/ASN.1 sequence header.
+  cer: [48, 130],
+  crt: [48, 130],
+  key: [48, 130],
+  pem: [45, 45, 45, 45, 45],
+  // -----
+  webm: [26, 69, 223, 163],
+  avi: [82, 73, 70, 70],
+  mp3: [73, 68, 51],
+  // ID3
+  wav: [82, 73, 70, 70],
+  ogg: [79, 103, 103, 83],
+  aac: [255, 241]
+};
+var MIME_TYPES = {
+  png: "image/png",
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  svg: "image/svg+xml",
+  webp: "image/webp",
+  gif: "image/gif",
+  ico: "image/x-icon",
+  heic: "image/heic",
+  cer: "application/x-x509-ca-cert",
+  crt: "application/x-x509-ca-cert",
+  pem: "application/x-pem-file",
+  key: "application/x-pem-file",
+  pdf: "application/pdf",
+  doc: "application/msword",
+  docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  xls: "application/vnd.ms-excel",
+  xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  csv: "text/csv",
+  txt: "text/plain",
+  xml: "application/xml",
+  json: "application/json",
+  mp4: "video/mp4",
+  mov: "video/quicktime",
+  avi: "video/x-msvideo",
+  webm: "video/webm",
+  mp3: "audio/mpeg",
+  wav: "audio/wav",
+  ogg: "audio/ogg",
+  aac: "audio/aac"
+};
+var FILE_CATEGORY_CONFIG = {
+  image: {
+    extensions: ["png", "jpg", "jpeg", "svg", "webp", "gif"],
+    maxBytes: 5 * MB,
+    validateMagicNumbers: true,
+    label: "image",
+    accept: "image/*"
+  },
+  certificate: {
+    extensions: ["cer", "crt", "pem"],
+    maxBytes: 50 * KB,
+    validateMagicNumbers: true,
+    label: "certificate",
+    accept: ".cer,.crt,.pem"
+  },
+  key: {
+    extensions: ["key"],
+    maxBytes: 50 * KB,
+    validateMagicNumbers: true,
+    label: "private key",
+    accept: ".key"
+  },
+  pdf: {
+    extensions: ["pdf"],
+    maxBytes: 20 * MB,
+    validateMagicNumbers: true,
+    label: "PDF",
+    accept: ".pdf"
+  },
+  document: {
+    extensions: ["pdf", "doc", "docx", "xls", "xlsx", "csv", "txt"],
+    maxBytes: 20 * MB,
+    validateMagicNumbers: false,
+    label: "document",
+    accept: ".pdf,.doc,.docx,.xls,.xlsx,.csv,.txt"
+  },
+  data: {
+    extensions: ["xml", "json"],
+    maxBytes: 5 * MB,
+    validateMagicNumbers: false,
+    label: "data file",
+    accept: ".xml,.json"
+  },
+  video: {
+    extensions: ["mp4", "mov", "avi", "webm"],
+    maxBytes: 100 * MB,
+    validateMagicNumbers: false,
+    label: "video",
+    accept: "video/*"
+  },
+  audio: {
+    extensions: ["mp3", "wav", "ogg", "aac"],
+    maxBytes: 20 * MB,
+    validateMagicNumbers: false,
+    label: "audio",
+    accept: "audio/*"
+  },
+  any: {
+    extensions: [],
+    maxBytes: 20 * MB,
+    validateMagicNumbers: false,
+    label: "file",
+    accept: "*/*"
+  }
+};
+
+// src/file.ts
+var getFileExtension = (fileName) => {
+  const dot = fileName.lastIndexOf(".");
+  if (dot < 1 || dot === fileName.length - 1) return "";
+  return fileName.slice(dot + 1).toLowerCase();
+};
+var isKnownExtension = (value) => value in MIME_TYPES;
+var formatFileSize = (bytes) => {
+  if (bytes < 1024) return `${bytes} B`;
+  const units = ["KB", "MB", "GB", "TB"];
+  let size = bytes / 1024;
+  let unit = 0;
+  while (size >= 1024 && unit < units.length - 1) {
+    size /= 1024;
+    unit++;
+  }
+  return `${size.toFixed(size >= 10 ? 0 : 1)} ${units[unit]}`;
+};
+var toAcceptAttribute = (extensions) => extensions.length === 0 ? "*/*" : extensions.map((extension) => `.${extension}`).join(",");
+
+// src/react/slots.ts
+var matchSlotByExtension = (filled) => (slots, fileName) => {
+  const extension = getFileExtension(fileName);
+  const candidates = slots.filter((slot) => slot.extensions.includes(extension));
+  if (candidates.length === 0) return null;
+  return (candidates.find((slot) => !filled.has(slot.id)) ?? candidates[0]).id;
+};
+var matchSlotByName = (slots, fileName) => {
+  const base = fileName.toLowerCase();
+  return slots.find((slot) => base.startsWith(slot.id.toLowerCase()))?.id ?? null;
+};
+var slotFileName = (slotId, originalName) => `${slotId}.${getFileExtension(originalName)}`;
+var slotOfStored = (slots, stored) => slots.find((slot) => stored.fileName.startsWith(`${slot.id}.`))?.id ?? null;
+
+// src/labels.ts
+var ES_LABELS = {
+  dropPrompt: "Selecciona un archivo o arr\xE1stralo aqu\xED",
+  tapPrompt: "Toca para elegir un archivo",
+  bulkDropPrompt: "Arrastra varios archivos \u2014 cada uno cae en su documento",
+  bulkTapPrompt: "Toca para agregar varios archivos",
+  uploadAll: "Subir archivos",
+  view: "Ver",
+  remove: "Quitar",
+  cancel: "Cancelar",
+  ready: "Listo",
+  staged: "Listo para subir",
+  upload: "Subir",
+  replace: "Reemplazar",
+  dropToReplace: "Suelta para reemplazar",
+  previous: "Anterior",
+  next: "Siguiente",
+  uploadFailed: "No se pudo subir el archivo",
+  uploadNetworkFailed: "No se pudo subir el archivo. Revisa tu conexi\xF3n",
+  removeFailed: "No se pudo borrar el archivo del almacenamiento",
+  readFailed: "No se pudo cargar el archivo",
+  maxFilesReached: (max) => `M\xE1ximo ${max} archivo(s)`,
+  slotFormatNotAllowed: (slotLabel, extensions) => `${slotLabel}: formato no permitido. Se aceptan: ${extensions.join(", ")}`,
+  fileWithoutSlot: (fileName) => `"${fileName}" no corresponde a ning\xFAn documento`,
+  viewerLoading: "Cargando\u2026",
+  viewerError: "No se pudo cargar la vista previa",
+  viewerErrorHint: "El archivo puede haberse movido o el enlace expir\xF3. Puedes reintentar o descargarlo.",
+  viewerRetry: "Reintentar",
+  openInTab: "Abrir en pesta\xF1a",
+  downloadShort: "Descargar",
+  close: "Cerrar",
+  noPreview: "Este formato no tiene vista previa",
+  download: (fileName) => `Descargar ${fileName}`,
+  filePreview: "Archivo",
+  confirm: "Confirmar",
+  confirmRemoveTitle: "Quitar archivo",
+  confirmRemoveMessage: (fileName) => `\xBFQuitar "${fileName}"? Podr\xE1s subir otro despu\xE9s.`,
+  confirmReplaceTitle: "Reemplazar archivo",
+  confirmReplaceMessage: (current, incoming) => `\xBFReemplazar "${current}" por "${incoming}"?`,
+  dropAnywhereTitle: "Suelta los archivos aqu\xED",
+  dropAnywhereHint: "Cualquier lugar de la pantalla cuenta",
+  avatarChange: "Cambiar foto",
+  avatarDropHere: "Suelta aqu\xED",
+  avatarRemove: "Quitar foto",
+  galleryAdd: "Agregar",
+  fileHasNoExtension: "El archivo no tiene extensi\xF3n",
+  formatNotAllowed: (extensions) => `Formato no permitido. Se aceptan: ${extensions.join(", ")}`,
+  fileIsEmpty: "El archivo est\xE1 vac\xEDo",
+  fileTooLarge: (size, max) => `El archivo pesa ${size} y el m\xE1ximo es ${max}`,
+  fileIncomplete: "El archivo est\xE1 incompleto",
+  contentDoesNotMatchExtension: "El contenido del archivo no corresponde a su extensi\xF3n",
+  requestIncomplete: "Solicitud incompleta",
+  unauthorized: "No autorizado",
+  fileRequired: "Archivo requerido",
+  unknownScope: "Destino de archivo no v\xE1lido",
+  processingFailed: "No se pudo procesar el archivo",
+  unnamedFile: "archivo"
+};
+var DEFAULT_LABELS = {
+  dropPrompt: "Choose a file or drag it here",
+  tapPrompt: "Tap to choose a file",
+  bulkDropPrompt: "Drop several files \u2014 each lands on its document",
+  bulkTapPrompt: "Tap to add several files",
+  uploadAll: "Upload files",
+  view: "View",
+  remove: "Remove",
+  cancel: "Cancel",
+  ready: "Done",
+  staged: "Ready to upload",
+  upload: "Upload",
+  replace: "Replace",
+  dropToReplace: "Drop to replace",
+  previous: "Previous",
+  next: "Next",
+  uploadFailed: "The file could not be uploaded",
+  uploadNetworkFailed: "The file could not be uploaded. Check your connection",
+  removeFailed: "The file could not be removed from storage",
+  readFailed: "The file could not be loaded",
+  maxFilesReached: (max) => `At most ${max} file(s)`,
+  slotFormatNotAllowed: (slotLabel, extensions) => `${slotLabel}: format not allowed. Accepted: ${extensions.join(", ")}`,
+  fileWithoutSlot: (fileName) => `"${fileName}" does not match any document`,
+  viewerLoading: "Loading\u2026",
+  viewerError: "The preview could not be loaded",
+  viewerErrorHint: "The file may have moved or the link expired. You can retry or download it.",
+  viewerRetry: "Retry",
+  openInTab: "Open in tab",
+  downloadShort: "Download",
+  close: "Close",
+  noPreview: "This format has no preview",
+  download: (fileName) => `Download ${fileName}`,
+  filePreview: "File",
+  confirm: "Confirm",
+  confirmRemoveTitle: "Remove file",
+  confirmRemoveMessage: (fileName) => `Remove "${fileName}"? You can upload another one later.`,
+  confirmReplaceTitle: "Replace file",
+  confirmReplaceMessage: (current, incoming) => `Replace "${current}" with "${incoming}"?`,
+  dropAnywhereTitle: "Drop the files here",
+  dropAnywhereHint: "Anywhere on the screen counts",
+  avatarChange: "Change photo",
+  avatarDropHere: "Drop here",
+  avatarRemove: "Remove photo",
+  galleryAdd: "Add",
+  fileHasNoExtension: "The file has no extension",
+  formatNotAllowed: (extensions) => `Format not allowed. Accepted: ${extensions.join(", ")}`,
+  fileIsEmpty: "The file is empty",
+  fileTooLarge: (size, max) => `The file weighs ${size} and the maximum is ${max}`,
+  fileIncomplete: "The file is incomplete",
+  contentDoesNotMatchExtension: "The file contents do not match its extension",
+  requestIncomplete: "Incomplete request",
+  unauthorized: "Unauthorized",
+  fileRequired: "A file is required",
+  unknownScope: "Unknown file destination",
+  processingFailed: "The file could not be processed",
+  unnamedFile: "file"
+};
+var resolveLabels = (labels, base = DEFAULT_LABELS) => labels ? { ...base, ...labels } : base;
+({ ...DEFAULT_LABELS });
+
+// src/react/strategy.ts
+var createXhrUploadStrategy = ({
+  endpoint,
+  headers,
+  fieldName = "file",
+  credentials,
+  labels
+}) => (file, scope, entityId, { onProgress, signal }) => new Promise((resolve, reject) => {
+  const copy = resolveLabels(labels);
+  const xhr = new XMLHttpRequest();
+  const url = `${endpoint.replace(/\/$/, "")}/${encodeURIComponent(scope)}/${encodeURIComponent(entityId)}/upload`;
+  xhr.open("POST", url);
+  xhr.responseType = "json";
+  xhr.withCredentials = credentials === "include";
+  for (const [name, value] of Object.entries(headers?.() ?? {})) {
+    xhr.setRequestHeader(name, value);
+  }
+  const abort = () => xhr.abort();
+  signal.addEventListener("abort", abort, { once: true });
+  xhr.upload.onprogress = (event) => {
+    if (event.lengthComputable) {
+      onProgress(Math.round(event.loaded / event.total * 100));
+    }
+  };
+  xhr.onload = () => {
+    signal.removeEventListener("abort", abort);
+    if (xhr.status >= 200 && xhr.status < 300) {
+      resolve(xhr.response);
+      return;
+    }
+    const message = xhr.response?.message ?? copy.uploadFailed;
+    reject(new Error(message));
+  };
+  xhr.onerror = () => {
+    signal.removeEventListener("abort", abort);
+    reject(new Error(copy.uploadNetworkFailed));
+  };
+  xhr.onabort = () => {
+    signal.removeEventListener("abort", abort);
+    const error = new Error("Upload cancelled");
+    error.name = "AbortError";
+    reject(error);
+  };
+  const form = new FormData();
+  form.append(fieldName, file);
+  xhr.send(form);
+});
+var createRemoveStrategy = ({ endpoint, headers, credentials }) => async (stored, scope, entityId) => {
+  const url = `${endpoint.replace(/\/$/, "")}/${encodeURIComponent(scope)}/${encodeURIComponent(entityId)}`;
+  const response = await fetch(url, {
+    method: "DELETE",
+    credentials,
+    headers: { "Content-Type": "application/json", ...headers?.() },
+    body: JSON.stringify({ key: stored.key })
+  });
+  if (!response.ok) return false;
+  const body = await response.json().catch(() => null);
+  return body?.deleted === true;
+};
+var LabelsContext = react.createContext(DEFAULT_LABELS);
+var UploaderProvider = ({
+  children,
+  language = "en",
+  labels
+}) => {
+  const value = react.useMemo(
+    () => resolveLabels(labels, language === "es" ? ES_LABELS : DEFAULT_LABELS),
+    [language, labels]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(LabelsContext.Provider, { value, children });
+};
+var useUploaderLabels = (overrides) => {
+  const base = react.useContext(LabelsContext);
+  return react.useMemo(
+    () => overrides ? { ...base, ...overrides } : base,
+    [base, overrides]
+  );
+};
+
+// src/validation.ts
+var ok = { valid: true };
+var fail = (code, message) => ({ valid: false, code, message });
+var validateExtension = (fileName, allowed, labels) => {
+  if (allowed.length === 0) return ok;
+  const copy = resolveLabels(labels);
+  const extension = getFileExtension(fileName);
+  if (!extension) {
+    return fail("extension-not-allowed", copy.fileHasNoExtension);
+  }
+  if (!allowed.includes(extension)) {
+    return fail("extension-not-allowed", copy.formatNotAllowed(allowed));
+  }
+  return ok;
+};
+var validateSize = (size, maxBytes, labels) => {
+  const copy = resolveLabels(labels);
+  if (size === 0) return fail("empty-file", copy.fileIsEmpty);
+  if (size > maxBytes) {
+    return fail(
+      "too-large",
+      copy.fileTooLarge(formatFileSize(size), formatFileSize(maxBytes))
+    );
+  }
+  return ok;
+};
+var validateMagicNumbers = async (file, labels) => {
+  const copy = resolveLabels(labels);
+  const extension = getFileExtension(file.name);
+  if (!isKnownExtension(extension)) return ok;
+  const expected = MAGIC_NUMBERS[extension];
+  if (!expected) return ok;
+  const head = new Uint8Array(await file.arrayBuffer()).slice(
+    0,
+    expected.length
+  );
+  if (head.length < expected.length) {
+    return fail("magic-number-mismatch", copy.fileIncomplete);
+  }
+  const matches = expected.every((byte, index) => head[index] === byte);
+  return matches ? ok : fail("magic-number-mismatch", copy.contentDoesNotMatchExtension);
+};
+var validateFile = async (file, options = {}) => {
+  const {
+    maxBytes = Infinity,
+    allowedExtensions = [],
+    validateMagicNumbers: checkMagic = false,
+    labels,
+    customValidation
+  } = options;
+  const size = validateSize(file.size, maxBytes, labels);
+  if (!size.valid) return size;
+  const extension = validateExtension(file.name, allowedExtensions, labels);
+  if (!extension.valid) return extension;
+  if (checkMagic) {
+    const magic = await validateMagicNumbers(file, labels);
+    if (!magic.valid) return magic;
+  }
+  if (customValidation) return customValidation(file);
+  return ok;
+};
+
+// src/scopes.ts
+var ScopeError = class extends Error {
+  name = "ScopeError";
+};
+var PROBE_ENTITY = "__entity__";
+var probeFile = (name) => ({
+  name,
+  size: 0,
+  type: "",
+  arrayBuffer: async () => new ArrayBuffer(0)
+});
+var hasStableKey = (scope) => scope.path(PROBE_ENTITY, probeFile("a.png")) === scope.path(PROBE_ENTITY, probeFile("b.png"));
+var resolveReplaceMode = (scope) => {
+  if (scope.replace !== void 0) return scope.replace;
+  if ((scope.maxFiles ?? 1) > 1) return "key";
+  return hasStableKey(scope) ? "key" : "entity";
+};
+var validateForScope = async (registry, name, file, labels) => {
+  const scope = registry.get(name);
+  const category = scope.category ? FILE_CATEGORY_CONFIG[scope.category] : void 0;
+  return validateFile(file, {
+    maxBytes: scope.maxBytes,
+    allowedExtensions: scope.accept,
+    validateMagicNumbers: category?.validateMagicNumbers ?? true,
+    labels
+  });
+};
+
+// src/warn.ts
+var seen = /* @__PURE__ */ new Set();
+var warnDev = (key, message) => {
+  if (process.env.NODE_ENV === "production") return;
+  if (seen.has(key)) return;
+  seen.add(key);
+  console.warn(`[uploaderkit] ${message}`);
+};
+var createId = () => typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : Math.random().toString(36).slice(2);
+var previewOf = (file) => file.type.startsWith("image/") && typeof URL !== "undefined" && typeof URL.createObjectURL === "function" ? URL.createObjectURL(file) : void 0;
+var revokePreview = (file) => {
+  if (file.preview) URL.revokeObjectURL(file.preview);
+};
+var normalizeRetry = (retry) => {
+  const options = typeof retry === "number" ? { attempts: retry } : retry ?? {};
+  return {
+    attempts: Math.max(1, options.attempts ?? 1),
+    backoffMs: options.backoffMs ?? 500
+  };
+};
+var wait = (ms, signal) => new Promise((resolve, reject) => {
+  const abort = () => {
+    clearTimeout(timer);
+    const error = new Error("Upload cancelled");
+    error.name = "AbortError";
+    reject(error);
+  };
+  const timer = setTimeout(() => {
+    signal.removeEventListener("abort", abort);
+    resolve();
+  }, ms);
+  signal.addEventListener("abort", abort, { once: true });
+});
+var runPool = async (items, limit, run) => {
+  const results = new Array(items.length);
+  let cursor = 0;
+  const workers = Array.from(
+    { length: Math.min(Math.max(1, limit), items.length) },
+    async () => {
+      while (cursor < items.length) {
+        const index = cursor++;
+        results[index] = await run(items[index]);
+      }
+    }
+  );
+  await Promise.all(workers);
+  return results;
+};
+var useUploader = ({
+  scopes,
+  scope,
+  entityId,
+  strategy,
+  multiple: multipleOption,
+  maxFiles: maxFilesOption,
+  uploadOn = "manual",
+  onUploadStart,
+  onUploaded,
+  onError,
+  retry,
+  concurrency = Infinity,
+  rename,
+  labels
+}) => {
+  const scopeMaxFiles = scopes.get(scope).maxFiles;
+  const maxFiles = maxFilesOption ?? scopeMaxFiles;
+  const multiple = multipleOption ?? (maxFiles !== void 0 && maxFiles > 1);
+  const [files, setFiles] = react.useState([]);
+  const controllers = react.useRef(/* @__PURE__ */ new Map());
+  const filesRef = react.useRef([]);
+  filesRef.current = files;
+  const copy = useUploaderLabels(labels);
+  const { attempts, backoffMs } = normalizeRetry(retry);
+  const patch = react.useCallback((id, changes) => {
+    setFiles(
+      (previous) => previous.map((file) => file.id === id ? { ...file, ...changes } : file)
+    );
+  }, []);
+  const uploadOne = react.useCallback(
+    async (target) => {
+      if (!strategy) {
+        warnDev(
+          "upload-without-strategy",
+          "upload() ran without a `strategy` \u2014 files stay local. Pass `strategy` (e.g. createXhrUploadStrategy) to useUploader."
+        );
+        return null;
+      }
+      const config = scopes.get(scope);
+      const controller = new AbortController();
+      controllers.current.set(target.id, controller);
+      patch(target.id, { status: "uploading", progress: 0 });
+      try {
+        const payload = config.compress ? await compressImage(target.file, config.compress) : target.file;
+        for (let attempt = 1; ; attempt++) {
+          try {
+            const stored = await strategy(payload, scope, entityId, {
+              onProgress: (percent) => patch(target.id, { progress: percent }),
+              signal: controller.signal
+            });
+            patch(target.id, { status: "success", progress: 100, stored });
+            return stored;
+          } catch (error) {
+            const aborted = error instanceof Error && error.name === "AbortError";
+            if (aborted || attempt >= attempts) throw error;
+            patch(target.id, { progress: 0 });
+            await wait(backoffMs * 2 ** (attempt - 1), controller.signal);
+          }
+        }
+      } catch (error) {
+        const aborted = error instanceof Error && error.name === "AbortError";
+        const message = error instanceof Error && error.message ? error.message : copy.uploadFailed;
+        patch(target.id, {
+          status: aborted ? "idle" : "error",
+          progress: 0,
+          ...aborted ? {} : { error: message }
+        });
+        if (!aborted) onError?.(message);
+        return null;
+      } finally {
+        controllers.current.delete(target.id);
+      }
+    },
+    [
+      strategy,
+      scopes,
+      scope,
+      entityId,
+      patch,
+      onError,
+      attempts,
+      backoffMs,
+      copy
+    ]
+  );
+  const uploadBatch = react.useCallback(
+    async (targets) => {
+      if (targets.length === 0) return [];
+      onUploadStart?.(targets);
+      const results = await runPool(targets, concurrency, uploadOne);
+      const stored = results.filter((r) => r !== null);
+      if (stored.length > 0) onUploaded?.(stored);
+      return stored;
+    },
+    [uploadOne, onUploadStart, onUploaded, concurrency]
+  );
+  const addFiles = react.useCallback(
+    async (incoming) => {
+      let batch = Array.from(incoming);
+      if (!multiple && batch.length > 1) {
+        warnDev(
+          "single-mode-multi-drop",
+          `addFiles received ${batch.length} files but \`multiple\` is false \u2014 only the first is kept. Pass multiple: true if that is not what you meant.`
+        );
+      }
+      if (!multiple) batch = batch.slice(0, 1);
+      if (maxFiles !== void 0) {
+        const room = maxFiles - (multiple ? filesRef.current.length : 0);
+        if (batch.length > room) {
+          batch = batch.slice(0, Math.max(0, room));
+          onError?.(copy.maxFilesReached(maxFiles));
+        }
+      }
+      if (batch.length === 0) return;
+      if (rename) {
+        batch = batch.map(
+          (file) => new File([file], rename(file), { type: file.type })
+        );
+      }
+      const next = [];
+      for (const file of batch) {
+        const result = await validateForScope(scopes, scope, file, copy);
+        next.push({
+          id: createId(),
+          file,
+          status: result.valid ? "idle" : "error",
+          progress: 0,
+          ...result.valid ? { preview: previewOf(file) } : { error: result.message }
+        });
+        if (!result.valid) onError?.(next[next.length - 1].error);
+      }
+      setFiles((previous) => {
+        if (multiple) return [...previous, ...next];
+        previous.forEach(revokePreview);
+        return next;
+      });
+      if (uploadOn === "select") {
+        await uploadBatch(next.filter((file) => file.status === "idle"));
+      }
+    },
+    [
+      multiple,
+      maxFiles,
+      scopes,
+      scope,
+      uploadOn,
+      uploadBatch,
+      onError,
+      rename,
+      copy
+    ]
+  );
+  const upload = react.useCallback(
+    () => uploadBatch(filesRef.current.filter((f) => f.status === "idle")),
+    [uploadBatch]
+  );
+  const abort = react.useCallback((id) => {
+    if (id) {
+      controllers.current.get(id)?.abort();
+      return;
+    }
+    controllers.current.forEach((controller) => controller.abort());
+  }, []);
+  const removeFile = react.useCallback(
+    (id) => {
+      abort(id);
+      setFiles((previous) => {
+        const target = previous.find((file) => file.id === id);
+        if (target) revokePreview(target);
+        return previous.filter((file) => file.id !== id);
+      });
+    },
+    [abort]
+  );
+  const clear = react.useCallback(() => {
+    abort();
+    setFiles((previous) => {
+      previous.forEach(revokePreview);
+      return [];
+    });
+  }, [abort]);
+  react.useEffect(
+    () => () => {
+      filesRef.current.forEach(revokePreview);
+      controllers.current.forEach((controller) => controller.abort());
+    },
+    []
+  );
+  const accept = react.useMemo(() => scopes.accept(scope), [scopes, scope]);
+  return {
+    files,
+    accept,
+    isUploading: files.some((file) => file.status === "uploading"),
+    hasPending: files.some((file) => file.status === "idle"),
+    addFiles,
+    upload,
+    abort,
+    removeFile,
+    clear
+  };
+};
+
+// src/react/useSlottedUploader.ts
+var useSlottedUploader = ({
+  scopes,
+  scope,
+  entityId,
+  strategy,
+  slots,
+  value,
+  onChange,
+  matchBy = "extension",
+  match,
+  uploadOn = "select",
+  onUploadStart,
+  removeStrategy,
+  onRemoveStored,
+  onError,
+  retry,
+  concurrency,
+  labels
+}) => {
+  const copy = useUploaderLabels(labels);
+  react.useMemo(() => {
+    const ids = /* @__PURE__ */ new Set();
+    for (const slot of slots) {
+      if (ids.has(slot.id)) {
+        throw new ScopeError(
+          `useSlottedUploader: duplicate slot id "${slot.id}" \u2014 slot ids are storage keys and must be unique`
+        );
+      }
+      ids.add(slot.id);
+    }
+    if (slots.length > 1 && resolveReplaceMode(scopes.get(scope)) === "entity") {
+      throw new ScopeError(
+        `useSlottedUploader: scope "${scope}" replaces per entity, so filling one of its ${slots.length} slots would delete the others. Declare "maxFiles" on the scope (one per slot, at least), or set replace: 'key'.`
+      );
+    }
+    const accepted = scopes.get(scope).accept;
+    for (const slot of slots) {
+      const outside = slot.extensions.filter(
+        (extension) => !accepted.includes(extension)
+      );
+      if (outside.length > 0) {
+        warnDev(
+          `slot-outside-scope:${slot.id}`,
+          `slot "${slot.id}" accepts ${outside.join(", ")} but scope "${scope}" does not \u2014 those uploads will be rejected by validation. Align the slot's extensions with the scope's accept list.`
+        );
+      }
+    }
+  }, [slots, scopes, scope]);
+  const valueRef = react.useRef(value);
+  valueRef.current = value;
+  const onChangeRef = react.useRef(onChange);
+  onChangeRef.current = onChange;
+  const landedRef = react.useRef(/* @__PURE__ */ new Map());
+  for (const [slot, item] of landedRef.current) {
+    const absorbed = value.some(
+      (entry) => entry.slot === slot && entry.stored.key === item.stored.key && entry.stored.uploadedAt === item.stored.uploadedAt
+    );
+    if (absorbed) landedRef.current.delete(slot);
+  }
+  const uploader = useUploader({
+    scopes,
+    scope,
+    entityId,
+    strategy,
+    multiple: true,
+    uploadOn,
+    onUploadStart,
+    onError,
+    ...retry !== void 0 ? { retry } : {},
+    ...concurrency !== void 0 ? { concurrency } : {},
+    ...labels ? { labels } : {},
+    onUploaded: (stored) => {
+      for (const item of stored) {
+        const slot = slots.find((s) => item.fileName.startsWith(`${s.id}.`));
+        if (slot)
+          landedRef.current.set(slot.id, { slot: slot.id, stored: item });
+      }
+      const merged = new Map(valueRef.current.map((entry) => [entry.slot, entry]));
+      landedRef.current.forEach((entry, slot) => merged.set(slot, entry));
+      void onChangeRef.current([...merged.values()]);
+    }
+  });
+  const resolveSlot = react.useMemo(() => {
+    if (match) return match;
+    if (matchBy === "name") return matchSlotByName;
+    return (all, fileName) => matchSlotByExtension(new Set(valueRef.current.map((item) => item.slot)))(
+      all,
+      fileName
+    );
+  }, [match, matchBy]);
+  const assign = react.useCallback(
+    (slotId, file) => {
+      const slot = slots.find((s) => s.id === slotId);
+      if (!slot) return null;
+      const extension = getFileExtension(file.name);
+      if (!slot.extensions.includes(extension)) {
+        onError?.(copy.slotFormatNotAllowed(slot.label, slot.extensions));
+        return null;
+      }
+      return new File([file], slotFileName(slotId, file.name), {
+        type: file.type
+      });
+    },
+    [slots, onError, copy]
+  );
+  const addToSlot = react.useCallback(
+    async (slotId, file) => {
+      const renamed = assign(slotId, file);
+      if (renamed) await uploader.addFiles([renamed]);
+    },
+    [assign, uploader]
+  );
+  const addFiles = react.useCallback(
+    async (incoming) => {
+      const batch = [];
+      for (const file of Array.from(incoming)) {
+        const slotId = resolveSlot(slots, file.name);
+        if (!slotId) {
+          onError?.(copy.fileWithoutSlot(file.name));
+          continue;
+        }
+        const renamed = assign(slotId, file);
+        if (renamed) batch.push(renamed);
+      }
+      if (batch.length > 0) await uploader.addFiles(batch);
+    },
+    [slots, resolveSlot, assign, uploader, onError, copy]
+  );
+  const removeSlot = react.useCallback(
+    (slotId) => {
+      uploader.files.filter((file) => file.file.name.startsWith(`${slotId}.`)).forEach((file) => uploader.removeFile(file.id));
+      landedRef.current.delete(slotId);
+      const forgotten = valueRef.current.find((item) => item.slot === slotId);
+      if (forgotten) {
+        if (removeStrategy && !scopes.get(scope).keepOnRemove) {
+          removeStrategy(forgotten.stored, scope, entityId).then((deleted) => {
+            if (!deleted) onError?.(copy.removeFailed);
+          }).catch(() => onError?.(copy.removeFailed));
+        }
+        onRemoveStored?.(forgotten);
+      }
+      void onChangeRef.current(
+        valueRef.current.filter((item) => item.slot !== slotId)
+      );
+    },
+    [
+      uploader,
+      removeStrategy,
+      scopes,
+      scope,
+      entityId,
+      onRemoveStored,
+      onError,
+      copy
+    ]
+  );
+  const abort = react.useCallback(
+    (slotId) => {
+      if (!slotId) {
+        uploader.abort();
+        return;
+      }
+      uploader.files.filter((file) => file.file.name.startsWith(`${slotId}.`)).forEach((file) => uploader.abort(file.id));
+    },
+    [uploader]
+  );
+  const slotStates = react.useMemo(
+    () => slots.map((definition) => ({
+      definition,
+      filled: value.find((item) => item.slot === definition.id),
+      pending: uploader.files.find(
+        (file) => file.file.name.startsWith(`${definition.id}.`) && file.status !== "success"
+      )
+    })),
+    [slots, value, uploader.files]
+  );
+  const accept = react.useMemo(
+    () => toAcceptAttribute([...new Set(slots.flatMap((s) => s.extensions))]),
+    [slots]
+  );
+  const upload = react.useCallback(async () => {
+    await uploader.upload();
+  }, [uploader]);
+  return {
+    slots: slotStates,
+    accept,
+    isUploading: uploader.isUploading,
+    hasPending: uploader.hasPending,
+    addFiles,
+    addToSlot,
+    removeSlot,
+    abort,
+    upload
+  };
+};
+
+// src/react/viewResolver.ts
+var isOwnUrl = (url, baseUrl) => {
+  if (url.startsWith("/")) return true;
+  try {
+    return new URL(url).origin === new URL(baseUrl).origin;
+  } catch {
+    return false;
+  }
+};
+var fetchStored = async (url, { baseUrl, headers, credentials, labels }) => {
+  const own = isOwnUrl(url, baseUrl);
+  const response = await fetch(
+    url.startsWith("/") ? `${baseUrl.replace(/\/$/, "")}${url}` : url,
+    own ? { headers: headers?.(), credentials } : void 0
+  );
+  if (!response.ok) {
+    throw new Error(resolveLabels(labels).readFailed);
+  }
+  return response;
+};
+var retyped = (blob, mimeType) => mimeType && (!blob.type || blob.type === "application/octet-stream") ? new Blob([blob], { type: mimeType }) : blob;
+var createBlobUrlResolver = (options) => async (file) => {
+  if (!isOwnUrl(file.url, options.baseUrl)) return file.url;
+  const blob = await (await fetchStored(file.url, options)).blob();
+  return URL.createObjectURL(retyped(blob, file.mimeType));
+};
+var createBytesResolver = (options) => async (url) => new Uint8Array(await (await fetchStored(url, options)).arrayBuffer());
+var viewUrlFileName = (url) => {
+  const query = url.split("?")[1];
+  const key = query ? new URLSearchParams(query).get("key") : null;
+  return (key ?? url.split("?")[0]).split("/").pop() || void 0;
+};
+
+exports.UploaderProvider = UploaderProvider;
+exports.compressImage = compressImage;
+exports.createBlobUrlResolver = createBlobUrlResolver;
+exports.createBytesResolver = createBytesResolver;
+exports.createRemoveStrategy = createRemoveStrategy;
+exports.createXhrUploadStrategy = createXhrUploadStrategy;
+exports.matchSlotByExtension = matchSlotByExtension;
+exports.matchSlotByName = matchSlotByName;
+exports.slotFileName = slotFileName;
+exports.slotOfStored = slotOfStored;
+exports.useSlottedUploader = useSlottedUploader;
+exports.useUploader = useUploader;
+exports.useUploaderLabels = useUploaderLabels;
+exports.viewUrlFileName = viewUrlFileName;
+//# sourceMappingURL=react.cjs.map
+//# sourceMappingURL=react.cjs.map