uploaderkit 1.0.0 → 2.0.0

package/dist/ui.cjs

@@ -0,0 +1,2325 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var reactDom = require('react-dom');
+
+// src/react/UploaderProvider.tsx
+
+// 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 });
+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/ui/cn.ts
+var cn = (...values) => values.filter(Boolean).join(" ");
+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 ConfirmDialog = ({
+  open,
+  title,
+  message,
+  variant = "danger",
+  confirmLabel,
+  cancelLabel,
+  onConfirm,
+  onCancel,
+  labels
+}) => {
+  const copy = useUploaderLabels(labels);
+  const panelRef = react.useRef(null);
+  const { mounted, entered } = useOverlayTransition(open);
+  const layer = useOverlayLayer(open);
+  useFocusTrap(open, panelRef);
+  const cancelRef = react.useRef(onCancel);
+  cancelRef.current = onCancel;
+  react.useEffect(() => {
+    if (!open) return;
+    const onKey = (event) => {
+      if (event.key === "Escape") {
+        if (!layer.isTopmost()) return;
+        event.stopPropagation();
+        cancelRef.current();
+      }
+    };
+    window.addEventListener("keydown", onKey, true);
+    lockBodyScroll();
+    return () => {
+      window.removeEventListener("keydown", onKey, true);
+      unlockBodyScroll();
+    };
+  }, [open, layer]);
+  if (!mounted) return null;
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "fixed inset-0 z-1000 flex items-end justify-center p-4 sm:items-center",
+          !open && "pointer-events-none"
+        ),
+        onClick: onCancel,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: cn(
+                "bg-ui-overlay fixed inset-0 transition-opacity duration-200 ease-out",
+                entered ? "opacity-100" : "opacity-0"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              ref: panelRef,
+              role: "alertdialog",
+              "aria-modal": "true",
+              "aria-label": title,
+              tabIndex: -1,
+              onClick: (event) => event.stopPropagation(),
+              className: cn(
+                "bg-ui-surface rounded-ui-xl relative w-full max-w-md p-6 shadow-2xl outline-none",
+                "transition duration-200 ease-out",
+                entered ? "translate-y-0 scale-100 opacity-100" : "translate-y-3 scale-[0.97] opacity-0"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-4", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "flex size-11 shrink-0 items-center justify-center rounded-full",
+                        variant === "danger" ? "bg-ui-danger-soft" : "bg-ui-primary-soft"
+                      ),
+                      children: /* @__PURE__ */ jsxRuntime.jsxs(
+                        "svg",
+                        {
+                          viewBox: "0 0 24 24",
+                          className: cn(
+                            "size-6",
+                            variant === "danger" ? "text-ui-danger" : "text-ui-primary"
+                          ),
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          "aria-hidden": true,
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+                            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+                            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+                          ]
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-ui-fg text-base font-semibold", children: title }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-ui-muted mt-1 text-sm", children: message })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "data-autofocus": true,
+                      onClick: onCancel,
+                      className: "border-ui-border-strong text-ui-fg hover:bg-ui-surface-muted focus-visible:ring-ui-ring rounded-ui h-10 cursor-pointer border px-4 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none sm:w-auto",
+                      children: cancelLabel ?? copy.cancel
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: onConfirm,
+                      className: cn(
+                        "focus-visible:ring-ui-ring rounded-ui h-10 cursor-pointer px-4 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none sm:w-auto",
+                        variant === "danger" ? "bg-ui-danger text-ui-danger-fg hover:bg-ui-danger-hover" : "bg-ui-primary text-ui-primary-fg hover:bg-ui-primary-hover"
+                      ),
+                      children: confirmLabel ?? copy.confirm
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    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;
+};
+
+// 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/ui/useShortcut.ts
+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) }) })
+      ]
+    }
+  );
+};
+
+// 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]}`;
+};
+var toAcceptAttribute = (extensions) => extensions.length === 0 ? "*/*" : extensions.map((extension) => `.${extension}`).join(",");
+var FileTypeBadge = ({
+  fileName,
+  preview,
+  size = "md"
+}) => {
+  const box = size === "sm" ? "h-8 w-8" : "h-10 w-10";
+  if (!fileName) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn(
+          "border-ui-border rounded-ui shrink-0 border border-dashed",
+          box
+        )
+      }
+    );
+  }
+  return preview ? /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src: preview,
+      alt: "",
+      className: cn("rounded-ui shrink-0 object-cover", box)
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: cn(
+        "bg-ui-surface-muted text-ui-muted rounded-ui flex shrink-0 items-center justify-center font-medium uppercase",
+        size === "sm" ? "text-[10px]" : "text-xs",
+        box
+      ),
+      children: getFileExtension(fileName)
+    }
+  );
+};
+var ProgressBar = ({ percent, className }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    className: cn(
+      "bg-ui-surface-muted mt-1 h-1 w-full overflow-hidden rounded",
+      className
+    ),
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "bg-ui-primary h-full transition-all",
+        style: { width: `${percent}%` }
+      }
+    )
+  }
+);
+var FileItem = ({
+  file,
+  onRemove,
+  onAbort,
+  onView,
+  size = "md",
+  labels
+}) => {
+  const copy = useUploaderLabels(labels);
+  const uploading = file.status === "uploading";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-ui animate-ui-fade-in flex items-center gap-3 border text-sm transition-colors",
+        size === "sm" ? "p-1.5" : "p-2",
+        file.status === "error" ? "border-ui-danger-soft-fg/20 bg-ui-danger-soft" : "border-ui-border bg-ui-surface"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FileTypeBadge,
+          {
+            fileName: file.file.name,
+            preview: file.preview,
+            size
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-fg truncate font-medium", children: file.file.name }),
+          file.status === "error" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-danger text-xs", children: file.error }) : /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-ui-muted text-xs", children: [
+            formatFileSize(file.file.size),
+            file.status === "success" && ` \xB7 ${copy.ready}`,
+            file.status === "idle" && ` \xB7 ${copy.staged}`
+          ] }),
+          uploading && /* @__PURE__ */ jsxRuntime.jsx(ProgressBar, { percent: file.progress })
+        ] }),
+        onView && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onView,
+            className: "text-ui-primary hover:bg-ui-primary-soft focus-visible:ring-ui-ring rounded-ui shrink-0 cursor-pointer px-2 py-1 text-xs transition-colors focus-visible:ring-2 focus-visible:outline-none",
+            children: copy.view
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: uploading ? onAbort : onRemove,
+            className: "text-ui-muted hover:bg-ui-surface-muted hover:text-ui-fg focus-visible:ring-ui-ring rounded-ui shrink-0 cursor-pointer px-2 py-1 text-xs transition-colors focus-visible:ring-2 focus-visible:outline-none",
+            children: uploading ? copy.cancel : copy.remove
+          }
+        )
+      ]
+    }
+  );
+};
+var UploadCloudIcon = ({ 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: "M4 14.9A7 7 0 1 1 15.7 8h1.8a4.5 4.5 0 0 1 2.5 8.2" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 12v9" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m8 16 4-4 4 4" })
+    ]
+  }
+);
+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 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
+  );
+};
+
+// 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/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)}`;
+
+// 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
+  });
+};
+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
+  };
+};
+var SlotRow = ({
+  slot,
+  onPick,
+  onRemove,
+  onAbort,
+  onView,
+  size = "md",
+  labels
+}) => {
+  const copy = useUploaderLabels(labels);
+  const inputRef = react.useRef(null);
+  const [dropping, setDropping] = react.useState(false);
+  const depth = react.useRef(0);
+  const { definition, filled, pending } = slot;
+  const uploading = pending?.status === "uploading";
+  const staged = pending?.status === "idle";
+  const occupied = Boolean(filled) || staged;
+  const droppable = !uploading;
+  const onDrop = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    depth.current = 0;
+    setDropping(false);
+    if (!droppable) return;
+    const file = event.dataTransfer.files[0];
+    if (file) onPick(file);
+  };
+  const action = "focus-visible:ring-ui-ring rounded-ui shrink-0 cursor-pointer px-2 py-1 text-xs transition-colors focus-visible:ring-2 focus-visible:outline-none";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      onDragEnter: () => {
+        depth.current += 1;
+        if (droppable) setDropping(true);
+      },
+      onDragOver: (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+      },
+      onDragLeave: () => {
+        depth.current = Math.max(0, depth.current - 1);
+        if (depth.current === 0) setDropping(false);
+      },
+      onDrop,
+      className: cn(
+        "rounded-ui animate-ui-fade-in flex items-center gap-3 border text-sm transition-all duration-200",
+        size === "sm" ? "p-1.5" : "p-2",
+        dropping ? "border-ui-primary bg-ui-primary-soft ring-ui-ring scale-[1.01] ring-2" : "border-ui-border"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "h-2.5 w-2.5 shrink-0 rounded-full transition-colors",
+              pending?.status === "error" ? "bg-ui-danger" : uploading ? "bg-ui-primary animate-pulse" : staged ? "bg-ui-warning" : filled ? "bg-ui-success" : "bg-ui-border-strong"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FileTypeBadge,
+          {
+            fileName: pending?.file.name ?? filled?.stored.fileName,
+            preview: pending?.preview,
+            size
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-fg truncate font-medium", children: definition.label }),
+          pending?.status === "error" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-danger text-xs", children: pending.error }) : pending ? (
+            // The name is the STORAGE one: `assign` renames the pick to
+            // `{slot}.{ext}` before it reaches the machine.
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-ui-muted truncate text-xs", children: [
+              pending.file.name,
+              " \xB7 ",
+              formatFileSize(pending.file.size),
+              staged && ` \xB7 ${copy.staged}`
+            ] })
+          ) : filled ? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onView,
+              className: "text-ui-muted hover:text-ui-primary block max-w-full cursor-pointer truncate text-left text-xs hover:underline",
+              children: filled.stored.fileName
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-placeholder text-xs", children: definition.hint ?? definition.extensions.map((e) => `.${e}`).join(" \xB7 ") }),
+          uploading && /* @__PURE__ */ jsxRuntime.jsx(ProgressBar, { percent: pending.progress })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            accept: definition.extensions.map((e) => `.${e}`).join(","),
+            className: "hidden",
+            onChange: (event) => {
+              const file = event.target.files?.[0];
+              if (file) onPick(file);
+              event.target.value = "";
+            }
+          }
+        ),
+        dropping && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-ui-primary text-ui-primary-fg rounded-full px-2.5 py-1 text-[11px] font-medium whitespace-nowrap", children: occupied ? copy.dropToReplace : copy.upload }),
+        !dropping && filled && !uploading && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onView,
+            className: cn(action, "text-ui-primary hover:bg-ui-primary-soft"),
+            children: copy.view
+          }
+        ),
+        uploading ? /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onAbort,
+            className: cn(action, "text-ui-muted hover:bg-ui-surface-muted"),
+            children: copy.cancel
+          }
+        ) : dropping ? null : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => inputRef.current?.click(),
+              className: cn(action, "text-ui-primary hover:bg-ui-primary-soft"),
+              children: occupied ? copy.replace : copy.upload
+            }
+          ),
+          occupied && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onRemove,
+              className: cn(action, "text-ui-muted hover:bg-ui-surface-muted"),
+              children: copy.remove
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var useFileViewer = ({
+  resolveUrl
+} = {}) => {
+  const [viewing, setViewing] = react.useState(null);
+  const close = react.useCallback(() => setViewing(null), []);
+  const open = react.useCallback((file) => setViewing(file), []);
+  return {
+    viewing,
+    open,
+    close,
+    viewerProps: react.useMemo(
+      () => ({ file: viewing, onClose: close, resolveUrl }),
+      [viewing, close, resolveUrl]
+    )
+  };
+};
+var SlottedUploader = ({
+  uploadOn = "select",
+  title,
+  description,
+  hideDropzone = false,
+  confirmRemove,
+  confirmReplace,
+  removeStrategy,
+  resolveViewUrl,
+  size = "md",
+  icon,
+  shortcut,
+  controllerRef,
+  onPendingChange,
+  className,
+  ...options
+}) => {
+  const slotted = useSlottedUploader({
+    ...options,
+    uploadOn: uploadOn === "select" ? "select" : "manual"
+  });
+  if (uploadOn === "submit" && !controllerRef) {
+    warnDev(
+      "slotted-submit-without-controller",
+      "uploadOn: 'submit' has no send of its own here \u2014 pass `controllerRef` and call upload() from the form's submit, or staged slots never leave."
+    );
+  }
+  const copy = useUploaderLabels(options.labels);
+  const coarse = useCoarsePointer();
+  const viewer = useFileViewer({ resolveUrl: resolveViewUrl });
+  const [pending, setPending] = react.useState(null);
+  const { upload, hasPending, isUploading } = slotted;
+  react.useEffect(() => {
+    if (!controllerRef) return;
+    controllerRef.current = { upload, hasPending, isUploading };
+    return () => {
+      controllerRef.current = null;
+    };
+  }, [controllerRef, upload, hasPending, isUploading]);
+  react.useEffect(() => {
+    onPendingChange?.(hasPending);
+  }, [onPendingChange, hasPending]);
+  const pick = (slot, file) => {
+    if (slot.filled && confirmReplace) {
+      setPending({ kind: "replace", slot, file });
+      return;
+    }
+    void slotted.addToSlot(slot.definition.id, file);
+  };
+  const forgetSlot = (slot) => {
+    const stored = slot.filled?.stored;
+    if (stored && removeStrategy && !options.scopes.get(options.scope).keepOnRemove) {
+      removeStrategy(stored, options.scope, options.entityId).then((deleted) => {
+        if (!deleted) options.onError?.(copy.removeFailed);
+      }).catch(() => options.onError?.(copy.removeFailed));
+    }
+    slotted.removeSlot(slot.definition.id);
+  };
+  const remove = (slot) => {
+    if (slot.filled && confirmRemove) {
+      setPending({ kind: "remove", slot });
+      return;
+    }
+    forgetSlot(slot);
+  };
+  const override = pending?.kind === "replace" ? typeof confirmReplace === "object" ? confirmReplace : {} : typeof confirmRemove === "object" ? confirmRemove : {};
+  const dialogTitle = override.title ?? (pending?.kind === "replace" ? copy.confirmReplaceTitle : copy.confirmRemoveTitle);
+  const dialogMessage = override.message ?? (pending?.kind === "replace" ? copy.confirmReplaceMessage(
+    pending.slot.filled?.stored.fileName ?? "",
+    pending.file.name
+  ) : copy.confirmRemoveMessage(pending?.slot.filled?.stored.fileName ?? ""));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-2", className), children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-fg text-sm font-medium", children: title }),
+    description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-muted text-xs", children: description }),
+    slotted.slots.map((slot) => /* @__PURE__ */ jsxRuntime.jsx(
+      SlotRow,
+      {
+        slot,
+        onPick: (file) => pick(slot, file),
+        onRemove: () => remove(slot),
+        onAbort: () => slotted.abort(slot.definition.id),
+        onView: () => slot.filled && viewer.open(slot.filled.stored),
+        size,
+        labels: options.labels
+      },
+      slot.definition.id
+    )),
+    !hideDropzone && /* @__PURE__ */ jsxRuntime.jsxs(
+      Dropzone,
+      {
+        accept: slotted.accept,
+        multiple: true,
+        disabled: slotted.isUploading,
+        size,
+        shortcut,
+        onFiles: (files) => void slotted.addFiles(files),
+        children: [
+          icon !== null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-placeholder group-hover/dz:text-ui-primary group-data-dragging/dz:text-ui-primary mb-1.5 inline-flex justify-center transition-all duration-200 group-hover/dz:-translate-y-0.5 group-data-dragging/dz:-translate-y-1 group-data-dragging/dz:scale-110", children: icon ?? /* @__PURE__ */ jsxRuntime.jsx(
+            UploadCloudIcon,
+            {
+              className: size === "sm" ? "h-5 w-5" : "h-7 w-7"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-muted group-hover/dz:text-ui-fg text-sm font-medium transition-colors duration-200", children: coarse ? copy.bulkTapPrompt : copy.bulkDropPrompt })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(FileViewer, { ...viewer.viewerProps, labels: options.labels }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ConfirmDialog,
+      {
+        open: pending !== null,
+        title: dialogTitle,
+        message: dialogMessage,
+        onConfirm: () => {
+          if (pending?.kind === "replace") {
+            void slotted.addToSlot(pending.slot.definition.id, pending.file);
+          } else if (pending) {
+            forgetSlot(pending.slot);
+          }
+          setPending(null);
+        },
+        onCancel: () => setPending(null),
+        labels: options.labels
+      }
+    )
+  ] });
+};
+var StoredFileItem = ({
+  file,
+  onView,
+  onRemove,
+  size = "md",
+  labels
+}) => {
+  const copy = useUploaderLabels(labels);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "border-ui-border bg-ui-surface-subtle rounded-ui animate-ui-fade-in flex items-center gap-3 border text-sm",
+        size === "sm" ? "p-1.5" : "p-2"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(FileTypeBadge, { fileName: file.fileName, size }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-fg truncate font-medium", children: file.fileName }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-muted text-xs", children: formatFileSize(file.size) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onView,
+            className: "text-ui-primary hover:bg-ui-primary-soft focus-visible:ring-ui-ring rounded-ui shrink-0 cursor-pointer px-2 py-1 text-xs transition-colors focus-visible:ring-2 focus-visible:outline-none",
+            children: copy.view
+          }
+        ),
+        onRemove && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onRemove(file),
+            className: "text-ui-muted hover:bg-ui-surface-muted hover:text-ui-fg focus-visible:ring-ui-ring rounded-ui shrink-0 cursor-pointer px-2 py-1 text-xs transition-colors focus-visible:ring-2 focus-visible:outline-none",
+            children: copy.remove
+          }
+        )
+      ]
+    }
+  );
+};
+var Uploader = ({
+  uploadOn = "select",
+  label,
+  description,
+  stored = [],
+  filesPosition = "above",
+  renderFiles,
+  onRemoveStored,
+  confirmRemove,
+  resolveViewUrl,
+  capture,
+  size = "md",
+  icon,
+  shortcut,
+  controllerRef,
+  onPendingChange,
+  removeStrategy,
+  disabled = false,
+  className,
+  ...options
+}) => {
+  const uploader = useUploader({
+    ...options,
+    uploadOn: uploadOn === "select" ? "select" : "manual"
+  });
+  const copy = useUploaderLabels(options.labels);
+  const viewer = useFileViewer({ resolveUrl: resolveViewUrl });
+  const [removing, setRemoving] = react.useState(null);
+  const { files, removeFile } = uploader;
+  const manual = uploadOn === "manual";
+  if (uploadOn === "submit" && !controllerRef) {
+    warnDev(
+      "uploader-submit-without-controller",
+      "uploadOn: 'submit' has no send of its own \u2014 pass `controllerRef` and call upload() from the form's submit, or use 'manual' for the zone's button."
+    );
+  }
+  const coarse = useCoarsePointer();
+  react.useEffect(() => {
+    if (stored.length === 0) return;
+    const keys = new Set(stored.map((file) => file.key));
+    files.filter((f) => f.status === "success" && f.stored && keys.has(f.stored.key)).forEach((f) => removeFile(f.id));
+  }, [stored, files, removeFile]);
+  const { upload, hasPending, isUploading } = uploader;
+  react.useEffect(() => {
+    if (!controllerRef) return;
+    controllerRef.current = { upload, hasPending, isUploading };
+    return () => {
+      controllerRef.current = null;
+    };
+  }, [controllerRef, upload, hasPending, isUploading]);
+  react.useEffect(() => {
+    onPendingChange?.(hasPending);
+  }, [onPendingChange, hasPending]);
+  const forgetStored = (file) => {
+    if (removeStrategy && !options.scopes.get(options.scope).keepOnRemove) {
+      removeStrategy(file, options.scope, options.entityId).then((deleted) => {
+        if (!deleted) options.onError?.(copy.removeFailed);
+      }).catch(() => options.onError?.(copy.removeFailed));
+    }
+    onRemoveStored?.(file);
+  };
+  const requestRemove = onRemoveStored || removeStrategy ? (file) => confirmRemove ? setRemoving(file) : forgetStored(file) : void 0;
+  const confirmCopy = typeof confirmRemove === "object" ? confirmRemove : {};
+  const defaultRows = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    stored.map((file) => /* @__PURE__ */ jsxRuntime.jsx(
+      StoredFileItem,
+      {
+        file,
+        onView: () => viewer.open(file),
+        onRemove: requestRemove,
+        size,
+        labels: options.labels
+      },
+      file.key
+    )),
+    files.map((file) => {
+      const { stored: settled } = file;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        FileItem,
+        {
+          file,
+          onRemove: () => removeFile(file.id),
+          onAbort: () => uploader.abort(file.id),
+          onView: settled ? () => viewer.open(settled) : void 0,
+          size,
+          labels: options.labels
+        },
+        file.id
+      );
+    })
+  ] });
+  const fileList = renderFiles ? renderFiles({
+    stored,
+    staged: files,
+    nodes: defaultRows,
+    isEmpty: stored.length === 0 && files.length === 0,
+    view: viewer.open,
+    remove: removeFile,
+    removeStored: requestRemove
+  }) : defaultRows;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-2", className), children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-fg text-sm font-medium", children: label }),
+    filesPosition === "above" && fileList,
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Dropzone,
+      {
+        accept: uploader.accept,
+        multiple: options.multiple,
+        disabled: disabled || uploader.isUploading,
+        capture,
+        size,
+        shortcut,
+        onFiles: (incoming) => void uploader.addFiles(incoming),
+        children: [
+          icon !== null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-placeholder group-hover/dz:text-ui-primary group-data-dragging/dz:text-ui-primary mb-1.5 inline-flex justify-center transition-all duration-200 group-hover/dz:-translate-y-0.5 group-data-dragging/dz:-translate-y-1 group-data-dragging/dz:scale-110", children: icon ?? /* @__PURE__ */ jsxRuntime.jsx(
+            UploadCloudIcon,
+            {
+              className: size === "sm" ? "h-5 w-5" : "h-7 w-7"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-muted group-hover/dz:text-ui-fg text-sm font-medium transition-colors duration-200", children: coarse ? copy.tapPrompt : copy.dropPrompt }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-placeholder mt-1 text-xs", children: description ?? uploader.accept.replaceAll(",", " \xB7 ") })
+        ]
+      }
+    ),
+    filesPosition === "below" && fileList,
+    manual && uploader.hasPending && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => void uploader.upload(),
+        disabled: disabled || uploader.isUploading,
+        className: "bg-ui-primary text-ui-primary-fg hover:bg-ui-primary-hover focus-visible:ring-ui-ring rounded-ui h-10 w-full cursor-pointer px-4 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        children: copy.uploadAll
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(FileViewer, { ...viewer.viewerProps, labels: options.labels }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ConfirmDialog,
+      {
+        open: removing !== null,
+        title: confirmCopy.title ?? copy.confirmRemoveTitle,
+        message: confirmCopy.message ?? copy.confirmRemoveMessage(removing?.fileName ?? ""),
+        onConfirm: () => {
+          if (removing) forgetStored(removing);
+          setRemoving(null);
+        },
+        onCancel: () => setRemoving(null),
+        labels: options.labels
+      }
+    )
+  ] });
+};
+
+exports.ConfirmDialog = ConfirmDialog;
+exports.Dropzone = Dropzone;
+exports.FileItem = FileItem;
+exports.FileViewer = FileViewer;
+exports.SlottedUploader = SlottedUploader;
+exports.Uploader = Uploader;
+exports.UploaderProvider = UploaderProvider;
+exports.cn = cn;
+exports.useFileViewer = useFileViewer;
+exports.useUploaderLabels = useUploaderLabels;
+//# sourceMappingURL=ui.cjs.map
+//# sourceMappingURL=ui.cjs.map