uploaderkit 1.0.0 → 2.0.0

package/dist/presets.cjs

@@ -0,0 +1,1665 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var reactDom = require('react-dom');
+
+// src/presets/AvatarUploader.tsx
+
+// src/labels.ts
+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 });
+var LabelsContext = react.createContext(DEFAULT_LABELS);
+var useUploaderLabels = (overrides) => {
+  const base = react.useContext(LabelsContext);
+  return react.useMemo(
+    () => overrides ? { ...base, ...overrides } : base,
+    [base, overrides]
+  );
+};
+
+// 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 getMimeType = (fileName) => {
+  const ext = getFileExtension(fileName);
+  return MIME_TYPES[ext] ?? "application/octet-stream";
+};
+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]}`;
+};
+
+// 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 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}`);
+};
+
+// 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/react/useUploader.ts
+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/ui/cn.ts
+var cn = (...values) => values.filter(Boolean).join(" ");
+var AvatarUploader = ({
+  scopes,
+  scope,
+  entityId,
+  strategy,
+  rename,
+  src,
+  fallback,
+  size = 96,
+  onUploaded,
+  onRemove,
+  onError,
+  alt = "",
+  disabled = false,
+  labels,
+  className
+}) => {
+  const copy = useUploaderLabels(labels);
+  const input = react.useRef(null);
+  const [dropping, setDropping] = react.useState(false);
+  const depth = react.useRef(0);
+  const uploader = useUploader({
+    scopes,
+    scope,
+    entityId,
+    strategy,
+    uploadOn: "select",
+    maxFiles: 1,
+    ...rename ? { rename } : {},
+    onUploaded: (stored) => {
+      if (stored[0]) onUploaded(stored[0]);
+    },
+    onError,
+    labels
+  });
+  const current = uploader.files[0];
+  const uploading = current?.status === "uploading";
+  const failed = current?.status === "error" ? current.error : void 0;
+  const shown = current?.preview ?? src ?? null;
+  const locked = disabled || uploading;
+  const onDrop = (event) => {
+    event.preventDefault();
+    depth.current = 0;
+    setDropping(false);
+    if (locked) return;
+    const file = event.dataTransfer.files[0];
+    if (file) void uploader.addFiles([file]);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("inline-flex flex-col items-center gap-2", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", style: { width: size, height: size }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => !locked && input.current?.click(),
+          onDragEnter: () => {
+            depth.current += 1;
+            if (!locked) setDropping(true);
+          },
+          onDragOver: (event) => event.preventDefault(),
+          onDragLeave: () => {
+            depth.current = Math.max(0, depth.current - 1);
+            if (depth.current === 0) setDropping(false);
+          },
+          onDrop,
+          disabled: locked,
+          "aria-busy": uploading,
+          "aria-label": copy.avatarChange,
+          className: cn(
+            "group ring-ui-border focus-visible:ring-ui-ring relative flex h-full w-full overflow-hidden rounded-full ring-2 ring-offset-2 transition-all duration-200 outline-none",
+            locked ? "cursor-not-allowed" : "hover:ring-ui-primary cursor-pointer",
+            dropping && "ring-ui-primary cursor-copy ring-4"
+          ),
+          children: [
+            shown ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: shown, alt, className: "h-full w-full object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-ui-surface-muted text-ui-muted flex h-full w-full items-center justify-center text-xl font-semibold", children: fallback }),
+            dropping ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-ui-primary/70 text-ui-primary-fg absolute inset-0 flex items-center justify-center text-xs font-semibold", children: copy.avatarDropHere }) : uploading ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "absolute inset-0 flex items-center justify-center bg-black/50 text-xs font-medium text-white", children: [
+              current.progress,
+              "%"
+            ] }) : locked ? null : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 flex items-center justify-center bg-black/50 text-xs font-medium text-white opacity-0 transition-opacity duration-200 group-hover:opacity-100", children: copy.avatarChange })
+          ]
+        }
+      ),
+      uploading ? /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          viewBox: "0 0 100 100",
+          className: "pointer-events-none absolute -inset-1.5 -rotate-90",
+          "aria-hidden": true,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              cx: "50",
+              cy: "50",
+              r: "48",
+              pathLength: 100,
+              fill: "none",
+              strokeWidth: 4,
+              strokeLinecap: "round",
+              strokeDasharray: 100,
+              strokeDashoffset: 100 - (current?.progress ?? 0),
+              className: "stroke-ui-primary transition-[stroke-dashoffset] duration-200"
+            }
+          )
+        }
+      ) : null
+    ] }),
+    failed ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-danger max-w-[16rem] text-center text-xs", children: failed }) : onRemove && src && !uploading && !disabled ? /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onRemove,
+        className: "text-ui-danger cursor-pointer text-xs hover:underline",
+        children: copy.avatarRemove
+      }
+    ) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref: input,
+        type: "file",
+        accept: uploader.accept,
+        className: "hidden",
+        disabled: locked,
+        onChange: (event) => {
+          const file = event.target.files?.[0];
+          if (file) void uploader.addFiles([file]);
+          event.target.value = "";
+        }
+      }
+    )
+  ] });
+};
+var DocumentGlyph = () => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    width: "40",
+    height: "40",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.6",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 3v5h5" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 18v-6" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9.5 14.5 2.5-2.5 2.5 2.5" })
+    ]
+  }
+);
+var DropAnywhereOverlay = ({
+  open,
+  icon,
+  title,
+  hint,
+  labels,
+  className
+}) => {
+  const copy = useUploaderLabels(labels);
+  if (!open || typeof document === "undefined") return null;
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        className: "animate-ui-fade-in bg-ui-overlay pointer-events-none fixed inset-0 z-1010 flex items-center justify-center p-6",
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "border-ui-primary bg-ui-surface text-ui-fg rounded-ui-xl flex flex-col items-center gap-2 border-2 border-dashed px-10 py-8 shadow-2xl",
+              className
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-primary", children: icon ?? /* @__PURE__ */ jsxRuntime.jsx(DocumentGlyph, {}) }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base font-semibold", children: title ?? copy.dropAnywhereTitle }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-muted text-sm", children: hint ?? copy.dropAnywhereHint })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+};
+var Kbd = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "border-ui-border bg-ui-surface text-ui-muted rounded-md border px-1.5 py-0.5 font-sans text-[10px] font-medium shadow-sm", children });
+var useCoarsePointer = () => {
+  const [coarse, setCoarse] = react.useState(false);
+  react.useEffect(() => {
+    const query = window.matchMedia("(pointer: coarse)");
+    setCoarse(query.matches);
+    const onChange = (event) => setCoarse(event.matches);
+    query.addEventListener("change", onChange);
+    return () => query.removeEventListener("change", onChange);
+  }, []);
+  return coarse;
+};
+var parseShortcut = (combo) => {
+  const parts = combo.toLowerCase().split("+");
+  return {
+    mod: parts.includes("mod"),
+    shift: parts.includes("shift"),
+    alt: parts.includes("alt"),
+    key: parts[parts.length - 1]
+  };
+};
+var IS_MAC = typeof navigator !== "undefined" && /mac/i.test(navigator.platform);
+var formatShortcut = (combo) => {
+  const spec = parseShortcut(combo);
+  const key = spec.key.length === 1 ? spec.key.toUpperCase() : spec.key;
+  const parts = [];
+  if (spec.mod) parts.push(IS_MAC ? "\u2318" : "Ctrl");
+  if (spec.alt) parts.push(IS_MAC ? "\u2325" : "Alt");
+  if (spec.shift) parts.push(IS_MAC ? "\u21E7" : "Shift");
+  parts.push(key);
+  return parts.join(IS_MAC ? "" : "+");
+};
+var active = /* @__PURE__ */ new Map();
+var useShortcut = (combo, handler, disabled = false) => {
+  const handlerRef = react.useRef(handler);
+  handlerRef.current = handler;
+  react.useEffect(() => {
+    if (!combo || disabled) return;
+    const spec = parseShortcut(combo);
+    active.set(combo, (active.get(combo) ?? 0) + 1);
+    if ((active.get(combo) ?? 0) > 1) {
+      warnDev(
+        `shortcut-collision:${combo}`,
+        `two surfaces registered the shortcut "${combo}" at the same time \u2014 give each its own combo or scope one out.`
+      );
+    }
+    const onKey = (event) => {
+      if (event.repeat) return;
+      const target = event.target;
+      if (target instanceof Element && target.closest("input, textarea, select, [contenteditable]")) {
+        return;
+      }
+      if (event.key.toLowerCase() !== spec.key) return;
+      if (spec.mod !== (event.metaKey || event.ctrlKey)) return;
+      if (spec.shift !== event.shiftKey) return;
+      if (spec.alt !== event.altKey) return;
+      event.preventDefault();
+      handlerRef.current();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      const count = (active.get(combo) ?? 1) - 1;
+      if (count <= 0) active.delete(combo);
+      else active.set(combo, count);
+    };
+  }, [combo, disabled]);
+};
+var Dropzone = ({
+  accept,
+  multiple = false,
+  disabled = false,
+  capture,
+  size = "md",
+  shortcut,
+  onFiles,
+  children,
+  className
+}) => {
+  const inputRef = react.useRef(null);
+  const [dragging, setDragging] = react.useState(false);
+  const depth = react.useRef(0);
+  const coarse = useCoarsePointer();
+  useShortcut(shortcut, () => inputRef.current?.click(), disabled);
+  const emit = react.useCallback(
+    (list) => {
+      if (disabled || !list || list.length === 0) return;
+      onFiles(Array.from(list));
+    },
+    [disabled, onFiles]
+  );
+  const onDrop = react.useCallback(
+    (event) => {
+      event.preventDefault();
+      depth.current = 0;
+      setDragging(false);
+      emit(event.dataTransfer.files);
+    },
+    [emit]
+  );
+  const onPaste = react.useCallback(
+    (event) => {
+      if (event.clipboardData.files.length === 0) return;
+      event.preventDefault();
+      emit(event.clipboardData.files);
+    },
+    [emit]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      "aria-disabled": disabled,
+      "data-dragging": dragging || void 0,
+      onClick: () => !disabled && inputRef.current?.click(),
+      onKeyDown: (event) => {
+        if (disabled) return;
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          inputRef.current?.click();
+        }
+      },
+      onDragEnter: () => {
+        depth.current += 1;
+        if (!disabled) setDragging(true);
+      },
+      onDragOver: (event) => event.preventDefault(),
+      onDragLeave: () => {
+        depth.current = Math.max(0, depth.current - 1);
+        if (depth.current === 0) setDragging(false);
+      },
+      onDrop,
+      onPaste,
+      className: cn(
+        // `group/dz` + `data-dragging` let the children (the icon, the
+        // prompt) react to hover and drag without owning any state.
+        // `touch-manipulation` kills the 300ms tap delay; the active scale
+        // is the press feedback a touch screen needs in place of hover.
+        "group/dz rounded-ui-lg focus-visible:ring-ui-ring block w-full cursor-pointer touch-manipulation border-2 border-dashed text-center transition-all duration-200 focus-visible:ring-2 focus-visible:outline-none",
+        size === "sm" ? "p-3" : "p-5",
+        dragging ? "border-ui-primary bg-ui-primary-soft shadow-ui-primary/15 scale-[1.02] shadow-lg" : "border-ui-border-strong hover:border-ui-primary/60 hover:bg-ui-primary-soft/40 hover:shadow-ui-primary/10 bg-ui-surface-subtle/50 hover:shadow-md",
+        !disabled && "active:scale-[0.98]",
+        disabled && "cursor-not-allowed opacity-50",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            accept,
+            multiple,
+            disabled,
+            ...capture ? { capture } : {},
+            className: "hidden",
+            onClick: (event) => event.stopPropagation(),
+            onChange: (event) => {
+              emit(event.target.files);
+              event.target.value = "";
+            }
+          }
+        ),
+        children,
+        shortcut && !coarse && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-2 block", children: /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: formatShortcut(shortcut) }) })
+      ]
+    }
+  );
+};
+var DownloadIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.75",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    "aria-hidden": true,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 3v12" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m7 11 5 5 5-5" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 20h16" })
+    ]
+  }
+);
+var ExternalLinkIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.75",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    "aria-hidden": true,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 4h6v6" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 4 10 14" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5" })
+    ]
+  }
+);
+var FileWarningIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    "aria-hidden": true,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 3v5h5" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 11v4" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 18h.01" })
+    ]
+  }
+);
+var sequence = 0;
+var stack = [];
+var useOverlayLayer = (active2) => {
+  const idRef = react.useRef(0);
+  if (idRef.current === 0) idRef.current = ++sequence;
+  react.useEffect(() => {
+    if (!active2) return;
+    const id = idRef.current;
+    stack.push(id);
+    return () => {
+      const at = stack.lastIndexOf(id);
+      if (at !== -1) stack.splice(at, 1);
+    };
+  }, [active2]);
+  return react.useMemo(
+    () => ({ isTopmost: () => stack[stack.length - 1] === idRef.current }),
+    []
+  );
+};
+
+// src/ui/scrollLock.ts
+var KEY = /* @__PURE__ */ Symbol.for("uploaderkit.bodyScrollLock");
+var state = () => {
+  const host = globalThis;
+  return host[KEY] ??= { count: 0, saved: "" };
+};
+var lockBodyScroll = () => {
+  const lock = state();
+  if (lock.count === 0) {
+    lock.saved = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+  }
+  lock.count += 1;
+};
+var unlockBodyScroll = () => {
+  const lock = state();
+  if (lock.count === 0) return;
+  lock.count -= 1;
+  if (lock.count === 0) document.body.style.overflow = lock.saved;
+};
+var FOCUSABLE = 'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])';
+var useFocusTrap = (active2, ref) => {
+  react.useEffect(() => {
+    if (!active2) return;
+    const restoreTo = document.activeElement;
+    const panel = ref.current;
+    const initial = panel?.querySelector("[data-autofocus]") ?? panel;
+    initial?.focus({ preventScroll: true });
+    const onKeyDown = (event) => {
+      if (event.key !== "Tab" || !ref.current) return;
+      const focusables = Array.from(
+        ref.current.querySelectorAll(FOCUSABLE)
+      ).filter((el) => el.offsetParent !== null);
+      if (focusables.length === 0) {
+        event.preventDefault();
+        return;
+      }
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      restoreTo?.focus({ preventScroll: true });
+    };
+  }, [active2, ref]);
+};
+var OVERLAY_ANIMATION_MS = 200;
+var useOverlayTransition = (open) => {
+  const [entered, setEntered] = react.useState(false);
+  const [exiting, setExiting] = react.useState(false);
+  const wasOpen = react.useRef(false);
+  react.useEffect(() => {
+    if (open) {
+      wasOpen.current = true;
+      setExiting(false);
+      const raf = requestAnimationFrame(() => setEntered(true));
+      return () => cancelAnimationFrame(raf);
+    }
+    setEntered(false);
+    if (!wasOpen.current) return;
+    wasOpen.current = false;
+    setExiting(true);
+    const timer = setTimeout(() => setExiting(false), OVERLAY_ANIMATION_MS);
+    return () => clearTimeout(timer);
+  }, [open]);
+  return { mounted: open || exiting, entered };
+};
+var EMPTY_STATE_CLASS = "mx-4 flex max-w-sm flex-col items-center text-center";
+var EMPTY_TITLE_CLASS = "text-sm font-medium text-white";
+var EMPTY_HINT_CLASS = "mt-1.5 text-xs leading-relaxed text-white/60";
+var EMPTY_PRIMARY_CLASS = "focus-visible:ring-ui-ring rounded-ui cursor-pointer bg-white/20 px-4 py-2 text-sm text-white transition-colors hover:bg-white/30 focus-visible:ring-2 focus-visible:outline-none";
+var EMPTY_SECONDARY_CLASS = "focus-visible:ring-ui-ring rounded-ui cursor-pointer border border-white/20 px-4 py-2 text-sm text-white/80 transition-colors hover:bg-white/10 hover:text-white focus-visible:ring-2 focus-visible:outline-none";
+var ACTION_CLASS = "focus-visible:ring-ui-ring rounded-ui inline-flex shrink-0 cursor-pointer items-center gap-1.5 bg-white/10 px-3 py-1.5 text-xs whitespace-nowrap text-white transition-colors hover:bg-white/20 focus-visible:ring-2 focus-visible:outline-none";
+var kindOf = (file) => {
+  const mime = file.mimeType || getMimeType(file.fileName ?? file.url);
+  if (mime.startsWith("image/")) return "image";
+  if (mime === "application/pdf") return "pdf";
+  return "other";
+};
+var isIosWebkit = () => {
+  const ua = navigator.userAgent;
+  return /iPad|iPhone|iPod/.test(ua) || ua.includes("Macintosh") && navigator.maxTouchPoints > 1;
+};
+var browserEmbedsPdf = () => {
+  if (typeof navigator === "undefined") return false;
+  if (navigator.pdfViewerEnabled === false) return false;
+  return !isIosWebkit();
+};
+var Chevron = ({ direction }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "h-5 w-5",
+    "aria-hidden": true,
+    children: direction === "left" ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m15 18-6-6 6-6" }) : /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9 18 6-6-6-6" })
+  }
+);
+var FileViewer = ({
+  file,
+  onClose,
+  files,
+  resolveUrl,
+  renderError,
+  labels
+}) => {
+  const copy = useUploaderLabels(labels);
+  const coarse = useCoarsePointer();
+  const [url, setUrl] = react.useState(null);
+  const [failed, setFailed] = react.useState(false);
+  const [attempt, setAttempt] = react.useState(0);
+  const retry = react.useCallback(() => setAttempt((previous) => previous + 1), []);
+  const panelRef = react.useRef(null);
+  const open = file !== null;
+  const { mounted, entered } = useOverlayTransition(open);
+  const layer = useOverlayLayer(open);
+  useFocusTrap(open, panelRef);
+  const list = files && files.length > 0 ? files : null;
+  const [cursor, setCursor] = react.useState(0);
+  react.useEffect(() => {
+    if (!file || !list) return;
+    const index = list.findIndex((entry) => entry.url === file.url);
+    setCursor(index >= 0 ? index : 0);
+  }, [file]);
+  const current = open ? list ? list[cursor] ?? file : file : null;
+  const lastViewRef = react.useRef(null);
+  if (current) lastViewRef.current = current;
+  const navigate = react.useCallback(
+    (delta) => {
+      if (!list) return;
+      setCursor(
+        (previous) => Math.min(list.length - 1, Math.max(0, previous + delta))
+      );
+    },
+    [list]
+  );
+  const objectUrlRef = react.useRef(null);
+  const releaseObjectUrl = react.useCallback(() => {
+    if (objectUrlRef.current) URL.revokeObjectURL(objectUrlRef.current);
+    objectUrlRef.current = null;
+  }, []);
+  const resolveRef = react.useRef(resolveUrl);
+  resolveRef.current = resolveUrl;
+  const currentUrl = current?.url;
+  react.useEffect(() => {
+    releaseObjectUrl();
+    if (!current) {
+      setUrl(null);
+      setFailed(false);
+      return;
+    }
+    let alive = true;
+    setUrl(null);
+    setFailed(false);
+    void (async () => {
+      try {
+        const resolve = resolveRef.current;
+        const resolved = resolve ? await resolve(current) : current.url;
+        const minted = resolved.startsWith("blob:");
+        if (!alive) {
+          if (minted) URL.revokeObjectURL(resolved);
+          return;
+        }
+        if (minted) objectUrlRef.current = resolved;
+        setUrl(resolved);
+      } catch {
+        if (alive) {
+          setUrl(null);
+          setFailed(true);
+        }
+      }
+    })();
+    return () => {
+      alive = false;
+    };
+  }, [currentUrl, attempt]);
+  react.useEffect(() => releaseObjectUrl, [releaseObjectUrl]);
+  const closeRef = react.useRef(onClose);
+  closeRef.current = onClose;
+  const downloadRef = react.useRef(null);
+  const openTabRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!open) return;
+    const onKey = (event) => {
+      if (event.metaKey || event.ctrlKey || event.altKey) return;
+      if (event.key === "Escape") {
+        if (!layer.isTopmost()) return;
+        event.stopPropagation();
+        closeRef.current();
+        return;
+      }
+      if (event.key === "ArrowLeft") navigate(-1);
+      if (event.key === "ArrowRight") navigate(1);
+      const key = event.key.toLowerCase();
+      if (key === "d") downloadRef.current?.click();
+      if (key === "o") openTabRef.current?.click();
+    };
+    window.addEventListener("keydown", onKey, true);
+    lockBodyScroll();
+    return () => {
+      window.removeEventListener("keydown", onKey, true);
+      unlockBodyScroll();
+    };
+  }, [open, navigate, layer]);
+  const [canEmbedPdf] = react.useState(browserEmbedsPdf);
+  const view = current ?? lastViewRef.current;
+  if (!mounted || !view) return null;
+  const kind = kindOf(view);
+  const showsPdf = kind === "pdf" && canEmbedPdf && !failed && !!url;
+  const hasGallery = list !== null && list.length > 1;
+  const arrow = "absolute top-1/2 z-10 flex h-11 w-11 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full bg-white/10 text-white backdrop-blur-sm transition-all duration-200 hover:bg-white/25 focus-visible:ring-2 focus-visible:ring-ui-ring focus-visible:outline-none disabled:pointer-events-none disabled:opacity-25";
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "fixed inset-0 z-1000 flex flex-col bg-black/85 transition-opacity duration-200 ease-out",
+          entered ? "opacity-100" : "opacity-0",
+          !open && "pointer-events-none"
+        ),
+        onClick: onClose,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": view.fileName ?? copy.filePreview,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "flex items-center justify-between gap-2 px-3 py-2.5 sm:gap-3 sm:px-4 sm:py-3",
+              onClick: (event) => event.stopPropagation(),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "min-w-0 flex-1 truncate text-xs font-medium text-white sm:text-sm", children: view.fileName ?? copy.filePreview }),
+                hasGallery && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "shrink-0 rounded-full bg-white/10 px-2.5 py-1 text-[11px] font-medium text-white tabular-nums", children: [
+                  cursor + 1,
+                  " / ",
+                  list.length
+                ] }),
+                url && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "a",
+                    {
+                      ref: downloadRef,
+                      href: url,
+                      download: view.fileName,
+                      "aria-label": copy.downloadShort,
+                      title: copy.downloadShort,
+                      className: ACTION_CLASS,
+                      children: coarse ? /* @__PURE__ */ jsxRuntime.jsx(DownloadIcon, { className: "h-4 w-4" }) : copy.downloadShort
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "a",
+                    {
+                      ref: openTabRef,
+                      href: url,
+                      target: "_blank",
+                      rel: "noreferrer",
+                      "aria-label": copy.openInTab,
+                      title: copy.openInTab,
+                      className: ACTION_CLASS,
+                      children: coarse ? /* @__PURE__ */ jsxRuntime.jsx(ExternalLinkIcon, { className: "h-4 w-4" }) : copy.openInTab
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onClose,
+                    "aria-label": copy.close,
+                    title: copy.close,
+                    className: ACTION_CLASS,
+                    children: coarse ? "\u2715" : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      "\u2715 ",
+                      copy.close
+                    ] })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              ref: panelRef,
+              tabIndex: -1,
+              className: cn(
+                "relative flex min-h-0 flex-1 items-center justify-center p-3 outline-none sm:p-4",
+                showsPdf && "items-stretch"
+              ),
+              onClick: (event) => event.stopPropagation(),
+              children: [
+                hasGallery && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => navigate(-1),
+                      disabled: cursor === 0,
+                      "aria-label": copy.previous,
+                      className: cn(arrow, "left-2 sm:left-4"),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(Chevron, { direction: "left" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => navigate(1),
+                      disabled: cursor === list.length - 1,
+                      "aria-label": copy.next,
+                      className: cn(arrow, "right-2 sm:right-4"),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(Chevron, { direction: "right" })
+                    }
+                  )
+                ] }),
+                failed ? renderError?.({ file: view, retry }) ?? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: EMPTY_STATE_CLASS, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-white/5 text-white/70 ring-1 ring-white/10", children: /* @__PURE__ */ jsxRuntime.jsx(FileWarningIcon, { className: "h-8 w-8" }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: EMPTY_TITLE_CLASS, children: copy.viewerError }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: EMPTY_HINT_CLASS, children: copy.viewerErrorHint }),
+                  view.fileName && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 max-w-full truncate font-mono text-[11px] text-white/40", children: view.fileName }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-5 flex flex-wrap justify-center gap-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: retry,
+                        className: EMPTY_PRIMARY_CLASS,
+                        children: copy.viewerRetry
+                      }
+                    ),
+                    url && /* @__PURE__ */ jsxRuntime.jsx(
+                      "a",
+                      {
+                        href: url,
+                        download: view.fileName,
+                        className: EMPTY_SECONDARY_CLASS,
+                        children: copy.downloadShort
+                      }
+                    )
+                  ] })
+                ] }) : !url ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-white/70", children: copy.viewerLoading }) : kind === "image" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: url,
+                    alt: view.fileName ?? "",
+                    onError: () => setFailed(true),
+                    className: cn(
+                      "rounded-ui-lg max-h-full max-w-full object-contain shadow-2xl",
+                      "transition-transform duration-200 ease-out",
+                      entered ? "scale-100" : "scale-[0.97]"
+                    )
+                  }
+                ) : showsPdf ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "iframe",
+                  {
+                    src: url,
+                    title: view.fileName ?? "PDF",
+                    onError: () => setFailed(true),
+                    className: "rounded-ui-lg h-full w-full max-w-4xl bg-white shadow-2xl"
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: EMPTY_STATE_CLASS, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-white/5 text-white/70 ring-1 ring-white/10", children: /* @__PURE__ */ jsxRuntime.jsx(FileWarningIcon, { className: "h-8 w-8" }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: EMPTY_TITLE_CLASS, children: copy.noPreview }),
+                  view.fileName && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 max-w-full truncate font-mono text-[11px] text-white/40", children: view.fileName }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "a",
+                    {
+                      href: url,
+                      download: view.fileName,
+                      target: "_blank",
+                      rel: "noreferrer",
+                      className: cn(EMPTY_PRIMARY_CLASS, "mt-5 inline-block"),
+                      children: copy.download(view.fileName ?? copy.filePreview)
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          !coarse && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "flex items-center justify-center gap-4 pb-3 text-[11px] text-white/60",
+              onClick: (event) => event.stopPropagation(),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: "Esc" }),
+                  " ",
+                  copy.close
+                ] }),
+                url && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: "D" }),
+                    " ",
+                    copy.downloadShort
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: "O" }),
+                    " ",
+                    copy.openInTab
+                  ] })
+                ] }),
+                hasGallery && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: "\u2190" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: "\u2192" }),
+                  " ",
+                  copy.previous,
+                  " / ",
+                  copy.next
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+};
+var GalleryUploader = ({
+  scopes,
+  scope,
+  entityId,
+  strategy,
+  maxFiles,
+  rename,
+  stored = [],
+  onUploaded,
+  onRemoveStored,
+  onError,
+  resolveViewUrl,
+  columnsClassName = "grid-cols-2 sm:grid-cols-3 md:grid-cols-4",
+  disabled = false,
+  labels,
+  className
+}) => {
+  const copy = useUploaderLabels(labels);
+  const [viewing, setViewing] = react.useState(null);
+  const uploader = useUploader({
+    scopes,
+    scope,
+    entityId,
+    strategy,
+    multiple: true,
+    ...maxFiles !== void 0 ? { maxFiles } : {},
+    ...rename ? { rename } : {},
+    uploadOn: "select",
+    onUploaded,
+    onError,
+    labels
+  });
+  const storedKeys = new Set(stored.map((file) => file.key));
+  const inFlight = uploader.files.filter(
+    (file) => !(file.stored && storedKeys.has(file.stored.key))
+  );
+  const viewable = [
+    ...stored,
+    ...inFlight.flatMap((file) => file.stored ? [file.stored] : [])
+  ];
+  const tile = "group animate-ui-fade-in border-ui-border bg-ui-surface-muted rounded-ui-lg relative aspect-square overflow-hidden border shadow-sm transition-shadow duration-200 hover:shadow-md";
+  const action = "bg-ui-surface/90 text-ui-fg hover:bg-ui-surface rounded-ui cursor-pointer px-2 py-1 text-[11px] font-medium shadow-sm transition-colors";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-3", columnsClassName), children: [
+      stored.map((file) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tile, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: file.url,
+            alt: file.fileName,
+            className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-x-0 bottom-0 flex justify-between gap-1 bg-gradient-to-t from-black/60 to-transparent p-2 opacity-0 transition-opacity duration-200 group-hover:opacity-100", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setViewing(file),
+              className: action,
+              children: copy.view
+            }
+          ),
+          onRemoveStored && !disabled ? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onRemoveStored(file),
+              className: cn(action, "text-ui-danger"),
+              children: copy.remove
+            }
+          ) : null
+        ] })
+      ] }, file.key)),
+      inFlight.map((file) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tile, children: [
+        file.preview ? /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: file.preview,
+            alt: file.file.name,
+            className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+          }
+        ) : null,
+        file.status === "uploading" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-2 bg-black/45", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-semibold text-white", children: [
+            file.progress,
+            "%"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1 w-2/3 overflow-hidden rounded-full bg-white/30", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "h-full bg-white transition-all duration-150",
+              style: { width: `${file.progress}%` }
+            }
+          ) })
+        ] }) : null,
+        file.status === "error" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-ui-danger/70 absolute inset-0 flex items-center justify-center p-2", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-[11px] leading-tight text-white", children: file.error }) }) : null,
+        file.status !== "uploading" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-x-0 bottom-0 flex justify-between gap-1 bg-gradient-to-t from-black/60 to-transparent p-2 opacity-0 transition-opacity duration-200 group-hover:opacity-100", children: [
+          file.stored ? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => file.stored && setViewing(file.stored),
+              className: action,
+              children: copy.view
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => uploader.removeFile(file.id),
+              className: cn(action, "text-ui-danger"),
+              children: copy.remove
+            }
+          )
+        ] }) : null
+      ] }, file.id)),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Dropzone,
+        {
+          accept: uploader.accept,
+          multiple: true,
+          size: "sm",
+          disabled,
+          onFiles: (files) => void uploader.addFiles(files),
+          className: "flex aspect-square flex-col items-center justify-center",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-muted text-3xl leading-none font-light", children: "+" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-muted mt-1 text-xs", children: copy.galleryAdd })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FileViewer,
+      {
+        file: viewing,
+        files: viewable,
+        onClose: () => setViewing(null),
+        ...resolveViewUrl ? { resolveUrl: resolveViewUrl } : {}
+      }
+    )
+  ] });
+};
+var matchesAccept = (file, accept) => {
+  const tokens = accept.split(",").map((token) => token.trim().toLowerCase()).filter(Boolean);
+  if (tokens.length === 0) return true;
+  const name = file.name.toLowerCase();
+  const type = file.type.toLowerCase();
+  return tokens.some((token) => {
+    if (token.startsWith(".")) return name.endsWith(token);
+    if (token.endsWith("/*")) return type.startsWith(token.slice(0, -1));
+    return type === token;
+  });
+};
+var useDropAnywhere = ({
+  enabled = true,
+  onFiles,
+  accept,
+  onRejected
+}) => {
+  const [dragging, setDragging] = react.useState(false);
+  const onFilesRef = react.useRef(onFiles);
+  onFilesRef.current = onFiles;
+  const onRejectedRef = react.useRef(onRejected);
+  onRejectedRef.current = onRejected;
+  react.useEffect(() => {
+    if (!enabled) {
+      setDragging(false);
+      return;
+    }
+    let depth = 0;
+    const onEnter = (event) => {
+      if (!event.dataTransfer?.types.includes("Files")) return;
+      depth += 1;
+      setDragging(true);
+    };
+    const onLeave = () => {
+      depth = Math.max(0, depth - 1);
+      if (depth === 0) setDragging(false);
+    };
+    const onOver = (event) => event.preventDefault();
+    const onDrop = (event) => {
+      event.preventDefault();
+      depth = 0;
+      setDragging(false);
+      const files = Array.from(event.dataTransfer?.files ?? []);
+      if (files.length === 0) return;
+      const accepted = accept ? files.filter((file) => matchesAccept(file, accept)) : files;
+      const rejected = files.filter((file) => !accepted.includes(file));
+      if (accepted.length > 0) onFilesRef.current(accepted);
+      if (rejected.length > 0) onRejectedRef.current?.(rejected);
+    };
+    window.addEventListener("dragenter", onEnter);
+    window.addEventListener("dragleave", onLeave);
+    window.addEventListener("dragover", onOver);
+    window.addEventListener("drop", onDrop);
+    return () => {
+      window.removeEventListener("dragenter", onEnter);
+      window.removeEventListener("dragleave", onLeave);
+      window.removeEventListener("dragover", onOver);
+      window.removeEventListener("drop", onDrop);
+    };
+  }, [enabled, accept]);
+  return { dragging };
+};
+
+exports.AvatarUploader = AvatarUploader;
+exports.DropAnywhereOverlay = DropAnywhereOverlay;
+exports.GalleryUploader = GalleryUploader;
+exports.useDropAnywhere = useDropAnywhere;
+//# sourceMappingURL=presets.cjs.map
+//# sourceMappingURL=presets.cjs.map