uploaderkit 1.0.0 → 2.0.0

package/dist/chunk-PDKAF4GX.js

@@ -0,0 +1,707 @@
+import { useUploaderLabels, warnDev } from './chunk-H7BRW5IY.js';
+import { getMimeType } from './chunk-T5YZG6JW.js';
+import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
+
+// src/ui/cn.ts
+var cn = (...values) => values.filter(Boolean).join(" ");
+var Kbd = ({ children }) => /* @__PURE__ */ 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] = useState(false);
+  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 = useRef(handler);
+  handlerRef.current = handler;
+  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 = useRef(null);
+  const [dragging, setDragging] = useState(false);
+  const depth = useRef(0);
+  const coarse = useCoarsePointer();
+  useShortcut(shortcut, () => inputRef.current?.click(), disabled);
+  const emit = useCallback(
+    (list) => {
+      if (disabled || !list || list.length === 0) return;
+      onFiles(Array.from(list));
+    },
+    [disabled, onFiles]
+  );
+  const onDrop = useCallback(
+    (event) => {
+      event.preventDefault();
+      depth.current = 0;
+      setDragging(false);
+      emit(event.dataTransfer.files);
+    },
+    [emit]
+  );
+  const onPaste = useCallback(
+    (event) => {
+      if (event.clipboardData.files.length === 0) return;
+      event.preventDefault();
+      emit(event.clipboardData.files);
+    },
+    [emit]
+  );
+  return /* @__PURE__ */ 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__ */ 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__ */ jsx("span", { className: "mt-2 block", children: /* @__PURE__ */ jsx(Kbd, { children: formatShortcut(shortcut) }) })
+      ]
+    }
+  );
+};
+var UploadCloudIcon = ({ className }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.75",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    "aria-hidden": true,
+    children: [
+      /* @__PURE__ */ 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__ */ jsx("path", { d: "M12 12v9" }),
+      /* @__PURE__ */ jsx("path", { d: "m8 16 4-4 4 4" })
+    ]
+  }
+);
+var DownloadIcon = ({ className }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.75",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    "aria-hidden": true,
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M12 3v12" }),
+      /* @__PURE__ */ jsx("path", { d: "m7 11 5 5 5-5" }),
+      /* @__PURE__ */ jsx("path", { d: "M4 20h16" })
+    ]
+  }
+);
+var ExternalLinkIcon = ({ className }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.75",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    "aria-hidden": true,
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M14 4h6v6" }),
+      /* @__PURE__ */ jsx("path", { d: "M20 4 10 14" }),
+      /* @__PURE__ */ 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__ */ jsxs(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    "aria-hidden": true,
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" }),
+      /* @__PURE__ */ jsx("path", { d: "M14 3v5h5" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 11v4" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 18h.01" })
+    ]
+  }
+);
+var sequence = 0;
+var stack = [];
+var useOverlayLayer = (active2) => {
+  const idRef = useRef(0);
+  if (idRef.current === 0) idRef.current = ++sequence;
+  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 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) => {
+  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] = useState(false);
+  const [exiting, setExiting] = useState(false);
+  const wasOpen = useRef(false);
+  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__ */ 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__ */ jsx("path", { d: "m15 18-6-6 6-6" }) : /* @__PURE__ */ 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] = useState(null);
+  const [failed, setFailed] = useState(false);
+  const [attempt, setAttempt] = useState(0);
+  const retry = useCallback(() => setAttempt((previous) => previous + 1), []);
+  const panelRef = 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] = useState(0);
+  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 = useRef(null);
+  if (current) lastViewRef.current = current;
+  const navigate = useCallback(
+    (delta) => {
+      if (!list) return;
+      setCursor(
+        (previous) => Math.min(list.length - 1, Math.max(0, previous + delta))
+      );
+    },
+    [list]
+  );
+  const objectUrlRef = useRef(null);
+  const releaseObjectUrl = useCallback(() => {
+    if (objectUrlRef.current) URL.revokeObjectURL(objectUrlRef.current);
+    objectUrlRef.current = null;
+  }, []);
+  const resolveRef = useRef(resolveUrl);
+  resolveRef.current = resolveUrl;
+  const currentUrl = current?.url;
+  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]);
+  useEffect(() => releaseObjectUrl, [releaseObjectUrl]);
+  const closeRef = useRef(onClose);
+  closeRef.current = onClose;
+  const downloadRef = useRef(null);
+  const openTabRef = useRef(null);
+  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] = 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 createPortal(
+    /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "a",
+                    {
+                      ref: downloadRef,
+                      href: url,
+                      download: view.fileName,
+                      "aria-label": copy.downloadShort,
+                      title: copy.downloadShort,
+                      className: ACTION_CLASS,
+                      children: coarse ? /* @__PURE__ */ jsx(DownloadIcon, { className: "h-4 w-4" }) : copy.downloadShort
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "a",
+                    {
+                      ref: openTabRef,
+                      href: url,
+                      target: "_blank",
+                      rel: "noreferrer",
+                      "aria-label": copy.openInTab,
+                      title: copy.openInTab,
+                      className: ACTION_CLASS,
+                      children: coarse ? /* @__PURE__ */ jsx(ExternalLinkIcon, { className: "h-4 w-4" }) : copy.openInTab
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onClose,
+                    "aria-label": copy.close,
+                    title: copy.close,
+                    className: ACTION_CLASS,
+                    children: coarse ? "\u2715" : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      "\u2715 ",
+                      copy.close
+                    ] })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => navigate(-1),
+                      disabled: cursor === 0,
+                      "aria-label": copy.previous,
+                      className: cn(arrow, "left-2 sm:left-4"),
+                      children: /* @__PURE__ */ jsx(Chevron, { direction: "left" })
+                    }
+                  ),
+                  /* @__PURE__ */ 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__ */ jsx(Chevron, { direction: "right" })
+                    }
+                  )
+                ] }),
+                failed ? renderError?.({ file: view, retry }) ?? /* @__PURE__ */ jsxs("div", { className: EMPTY_STATE_CLASS, children: [
+                  /* @__PURE__ */ 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__ */ jsx(FileWarningIcon, { className: "h-8 w-8" }) }),
+                  /* @__PURE__ */ jsx("p", { className: EMPTY_TITLE_CLASS, children: copy.viewerError }),
+                  /* @__PURE__ */ jsx("p", { className: EMPTY_HINT_CLASS, children: copy.viewerErrorHint }),
+                  view.fileName && /* @__PURE__ */ jsx("p", { className: "mt-3 max-w-full truncate font-mono text-[11px] text-white/40", children: view.fileName }),
+                  /* @__PURE__ */ jsxs("div", { className: "mt-5 flex flex-wrap justify-center gap-2", children: [
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: retry,
+                        className: EMPTY_PRIMARY_CLASS,
+                        children: copy.viewerRetry
+                      }
+                    ),
+                    url && /* @__PURE__ */ jsx(
+                      "a",
+                      {
+                        href: url,
+                        download: view.fileName,
+                        className: EMPTY_SECONDARY_CLASS,
+                        children: copy.downloadShort
+                      }
+                    )
+                  ] })
+                ] }) : !url ? /* @__PURE__ */ jsx("p", { className: "text-sm text-white/70", children: copy.viewerLoading }) : kind === "image" ? /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: EMPTY_STATE_CLASS, children: [
+                  /* @__PURE__ */ 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__ */ jsx(FileWarningIcon, { className: "h-8 w-8" }) }),
+                  /* @__PURE__ */ jsx("p", { className: EMPTY_TITLE_CLASS, children: copy.noPreview }),
+                  view.fileName && /* @__PURE__ */ jsx("p", { className: "mt-3 max-w-full truncate font-mono text-[11px] text-white/40", children: view.fileName }),
+                  /* @__PURE__ */ 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__ */ jsxs(
+            "div",
+            {
+              className: "flex items-center justify-center gap-4 pb-3 text-[11px] text-white/60",
+              onClick: (event) => event.stopPropagation(),
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+                  /* @__PURE__ */ jsx(Kbd, { children: "Esc" }),
+                  " ",
+                  copy.close
+                ] }),
+                url && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsx(Kbd, { children: "D" }),
+                    " ",
+                    copy.downloadShort
+                  ] }),
+                  /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsx(Kbd, { children: "O" }),
+                    " ",
+                    copy.openInTab
+                  ] })
+                ] }),
+                hasGallery && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+                  /* @__PURE__ */ jsx(Kbd, { children: "\u2190" }),
+                  /* @__PURE__ */ jsx(Kbd, { children: "\u2192" }),
+                  " ",
+                  copy.previous,
+                  " / ",
+                  copy.next
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+};
+
+export { Dropzone, FileViewer, UploadCloudIcon, cn, lockBodyScroll, unlockBodyScroll, useCoarsePointer, useFocusTrap, useOverlayLayer, useOverlayTransition };
+//# sourceMappingURL=chunk-PDKAF4GX.js.map
+//# sourceMappingURL=chunk-PDKAF4GX.js.map