@devultur/convex 1.5.0 → 1.5.1

package/dist/react.js

@@ -24,57 +24,34 @@ import {
 import {
   describeDevulturError
 } from "./chunk-YYOZ3PDH.js";
+import {
+  DevulturApiContext,
+  DevulturCapabilityError,
+  DevulturContext,
+  DevulturProgressContext,
+  useDevultur,
+  useDevulturApi,
+  useDevulturOptional,
+  useDevulturProgress,
+  useMediaUrl,
+  useRequestTokenWhen,
+  useVideoProps
+} from "./chunk-BDEO67OT.js";
 
 // src/react.tsx
-import React24 from "react";
+import React26 from "react";
+import { mediaPath as mediaPath5 } from "@devultur/core";
+import { uploadFileWithProgress as uploadFileWithProgress2 } from "@devultur/react";
+import { useAction as useAction3, useConvex, useMutation } from "convex/react";
+
+// src/media-session.ts
+import React2 from "react";
 import {
-  buildMediaUrl as buildMediaUrl2,
-  CaptionLocaleLabel,
-  MediaStatus,
-  mediaCaptionPath as mediaCaptionPath2,
-  mediaPath as mediaPath3,
-  mediaUrl as mediaUrl4,
-  visibilityFromKey
+  buildMediaUrl,
+  mediaCaptionPath,
+  mediaUrl,
+  SESSION_HEADER
 } from "@devultur/core";
-import { UploadHttpError, uploadFileWithProgress } from "@devultur/react";
-import { useAction as useAction2, useConvex, useMutation, useQuery } from "convex/react";
-
-// src/devultur-context.ts
-import React from "react";
-
-// src/capability-error.ts
-var DevulturCapabilityError = class extends Error {
-  code = "capability_unavailable";
-  capability;
-  constructor(capability) {
-    super(
-      `Devultur: \`${capability}\` isn't available under <DevulturViewerProvider>. Use <DevulturProvider api> with the actions it needs.`
-    );
-    this.name = "DevulturCapabilityError";
-    this.capability = capability;
-  }
-};
-
-// src/devultur-context.ts
-var DevulturContext = /* @__PURE__ */ React.createContext(null);
-var DevulturApiContext = /* @__PURE__ */ React.createContext(null);
-function useDevultur() {
-  const context = React.use(DevulturContext);
-  if (!context) throw new Error("useDevultur must be used within <DevulturProvider> or <DevulturViewerProvider>");
-  return context;
-}
-function useDevulturOptional() {
-  return React.use(DevulturContext);
-}
-function useDevulturApi() {
-  const api = React.use(DevulturApiContext);
-  if (api) return api;
-  if (React.use(DevulturContext)) throw new DevulturCapabilityError("api");
-  throw new Error("useDevulturApi must be used within <DevulturProvider>");
-}
-
-// src/media-fetch.ts
-import { SESSION_HEADER } from "@devultur/core";
 
 // src/image-recovery.ts
 async function isSessionMismatch(response) {
@@ -86,105 +63,8 @@ async function isSessionMismatch(response) {
   }
 }
 
-// src/media-fetch.ts
-var MediaFetchError = class extends Error {
-  code;
-  /** HTTP status, for `http_error` when the delivery answered. */
-  status;
-  /** The code's extra fields, e.g. `page_cap`'s `{ shown, total }`. */
-  details;
-  constructor(code, message, status, options) {
-    super(message, options);
-    this.name = "MediaFetchError";
-    this.code = code;
-    this.status = status;
-    this.details = options?.details;
-  }
-};
-function networkError(cause) {
-  return new MediaFetchError("http_error", "Media fetch failed: no response", void 0, { cause });
-}
-function pageCapError(shown, total) {
-  const message = `Showing the first ${shown} of ${total} pages`;
-  return new MediaFetchError("page_cap", message, void 0, { details: { shown, total } });
-}
-function renderFailedError(cause) {
-  return new MediaFetchError("render_failed", "The media couldn't be rendered", void 0, { cause });
-}
-function tokenUnavailableError(cause) {
-  return new MediaFetchError("token_unavailable", "No viewer token: its issuance failed", void 0, { cause });
-}
-async function fetchMedia(request) {
-  const { buildUrl, token, sessionSecret, reissueToken, signal, isPrivate = true, canReissue = true } = request;
-  const headers = isPrivate && sessionSecret ? { [SESSION_HEADER]: sessionSecret } : void 0;
-  const response = await fetch(buildUrl(isPrivate ? token ?? void 0 : void 0), { headers, signal });
-  if (!isPrivate || !canReissue || response.status !== 401) return response;
-  if (!await isSessionMismatch(response)) return response;
-  request.onReissue?.();
-  const freshToken = await reissueToken();
-  if (!freshToken) return response;
-  return fetch(buildUrl(freshToken), { headers, signal });
-}
-async function loadMedia(request) {
-  const response = await fetchMedia(request);
-  if (!response.ok) {
-    throw new MediaFetchError("http_error", `Media fetch failed: ${response.status}`, response.status);
-  }
-  const trusted = trustedContentType(request.contentType, response.headers.get("content-type"));
-  if (!trusted.ok) {
-    await response.body?.cancel();
-    throw new MediaFetchError(trusted.reason, `Refusing to preview: ${trusted.reason}`);
-  }
-  const bytes = await readMediaBody(response, request.maxBytes);
-  return { bytes, contentType: trusted.contentType };
-}
-function tooLarge(maxBytes) {
-  return new MediaFetchError("too_large", `Media is larger than ${maxBytes} bytes`);
-}
-async function readMediaBody(response, maxBytes) {
-  if (maxBytes === void 0) return new Uint8Array(await response.arrayBuffer());
-  const declaredBytes = Number(response.headers.get("content-length") ?? Number.NaN);
-  if (declaredBytes > maxBytes) {
-    await response.body?.cancel();
-    throw tooLarge(maxBytes);
-  }
-  if (!response.body) return new Uint8Array(0);
-  return readCapped(response.body, maxBytes);
-}
-async function readCapped(body, maxBytes) {
-  const reader = body.getReader();
-  const chunks = [];
-  let byteCount = 0;
-  for (; ; ) {
-    const { done, value } = await reader.read();
-    if (done) break;
-    byteCount += value.byteLength;
-    if (byteCount > maxBytes) {
-      await reader.cancel();
-      throw tooLarge(maxBytes);
-    }
-    chunks.push(value);
-  }
-  const bytes = new Uint8Array(byteCount);
-  let offset = 0;
-  for (const chunk of chunks) {
-    bytes.set(chunk, offset);
-    offset += chunk.byteLength;
-  }
-  return bytes;
-}
-
-// src/media-session.ts
-import React3 from "react";
-import {
-  buildMediaUrl,
-  mediaCaptionPath,
-  mediaUrl,
-  SESSION_HEADER as SESSION_HEADER2
-} from "@devultur/core";
-
 // src/viewer-token.ts
-import React2 from "react";
+import React from "react";
 import { DEFAULT_TOKEN_EXPIRY_SECONDS } from "@devultur/core";
 import { convexToJson } from "convex/values";
 var REFRESH_BUFFER_MS = 5 * 60 * 1e3;
@@ -212,27 +92,27 @@ function tokenArgsKey(tokenArgs) {
 }
 function useViewerToken({ issueViewerToken, sessionSecret, tokenArgs, isLazy = false }) {
   const argsKey = tokenArgsKey(tokenArgs);
-  const stableArgs = React2.useMemo(() => tokenArgs ?? {}, [argsKey]);
-  const [issued, setIssued] = React2.useState(null);
-  const [attempt, setAttempt] = React2.useState(null);
-  const [isRequested, setIsRequested] = React2.useState(!isLazy);
+  const stableArgs = React.useMemo(() => tokenArgs ?? {}, [argsKey]);
+  const [issued, setIssued] = React.useState(null);
+  const [attempt, setAttempt] = React.useState(null);
+  const [isRequested, setIsRequested] = React.useState(!isLazy);
   const token = issued?.argsKey === argsKey ? issued.token : null;
   const currentAttempt = attempt?.argsKey === argsKey ? attempt : null;
-  const currentArgsKeyRef = React2.useRef(argsKey);
-  const refreshTimerRef = React2.useRef(null);
-  const inFlightRef = React2.useRef(null);
-  const isMountedRef = React2.useRef(true);
-  React2.useEffect(() => {
+  const currentArgsKeyRef = React.useRef(argsKey);
+  const refreshTimerRef = React.useRef(null);
+  const inFlightRef = React.useRef(null);
+  const isMountedRef = React.useRef(true);
+  React.useEffect(() => {
     currentArgsKeyRef.current = argsKey;
   }, [argsKey]);
-  React2.useEffect(() => {
+  React.useEffect(() => {
     isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
       if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
     };
   }, []);
-  const request = React2.useCallback(async () => {
+  const request = React.useCallback(async () => {
     const renew = () => {
       request().catch((error) => console.warn("Devultur: could not renew the viewer token", error));
     };
@@ -245,7 +125,7 @@ function useViewerToken({ issueViewerToken, sessionSecret, tokenArgs, isLazy = f
     refreshTimerRef.current = setTimeout(renew, Math.max(ttlMs - REFRESH_BUFFER_MS, MIN_REFRESH_MS));
     return tokenValue;
   }, [issueViewerToken, stableArgs, argsKey, sessionSecret]);
-  const issueOnce = React2.useCallback(() => {
+  const issueOnce = React.useCallback(() => {
     const inFlight = inFlightRef.current;
     if (inFlight?.argsKey === argsKey) return inFlight.promise;
     setAttempt({ argsKey, status: "loading" });
@@ -261,20 +141,20 @@ function useViewerToken({ issueViewerToken, sessionSecret, tokenArgs, isLazy = f
     return promise;
   }, [request, argsKey]);
   const hasAttempt = currentAttempt !== null;
-  React2.useEffect(() => {
+  React.useEffect(() => {
     if (!isRequested || token || hasAttempt) return;
     issueOnce().catch(() => {
     });
   }, [isRequested, token, hasAttempt, issueOnce]);
-  const requestToken = React2.useCallback(() => setIsRequested(true), []);
-  const reissueToken = React2.useCallback(
+  const requestToken = React.useCallback(() => setIsRequested(true), []);
+  const reissueToken = React.useCallback(
     () => issueOnce().catch(() => {
       setIssued((current) => current?.argsKey === argsKey ? null : current);
       return null;
     }),
     [issueOnce, argsKey]
   );
-  const retryToken = React2.useCallback(() => {
+  const retryToken = React.useCallback(() => {
     setIsRequested(true);
     return issueOnce().catch(() => null);
   }, [issueOnce]);
@@ -285,20 +165,20 @@ function useViewerToken({ issueViewerToken, sessionSecret, tokenArgs, isLazy = f
 
 // src/media-session.ts
 function useMediaSession({ issueViewerToken, tokenArgs, baseUrl, isLazy }) {
-  const [sessionSecret] = React3.useState(() => typeof crypto !== "undefined" ? crypto.randomUUID() : "");
+  const [sessionSecret] = React2.useState(() => typeof crypto !== "undefined" ? crypto.randomUUID() : "");
   const { token, tokenStatus, tokenError, reissueToken, retryToken, requestToken } = useViewerToken({
     issueViewerToken,
     sessionSecret,
     tokenArgs,
     isLazy
   });
-  const hasRequestedRef = React3.useRef(!isLazy);
-  const requestTokenAfterRender = React3.useCallback(() => {
+  const hasRequestedRef = React2.useRef(!isLazy);
+  const requestTokenAfterRender = React2.useCallback(() => {
     if (hasRequestedRef.current) return;
     hasRequestedRef.current = true;
     queueMicrotask(requestToken);
   }, [requestToken]);
-  const url = React3.useCallback(
+  const url = React2.useCallback(
     (media, options) => {
       if (!baseUrl) throw new Error("Devultur `url()` requires `baseUrl` on <DevulturProvider>");
       if (media.visibility === "private" && !token) requestTokenAfterRender();
@@ -306,14 +186,14 @@ function useMediaSession({ issueViewerToken, tokenArgs, baseUrl, isLazy }) {
     },
     [baseUrl, token, requestTokenAfterRender]
   );
-  const getCaptionsText = React3.useCallback(
+  const getCaptionsText = React2.useCallback(
     async (media, locale) => {
       if (!baseUrl) throw new Error("Devultur `getCaptionsText()` requires `baseUrl` on <DevulturProvider>");
       const path = mediaCaptionPath(media, locale);
       if (!path) throw new Error("getCaptionsText: the reference is not a video");
       const isPrivate = media.visibility === "private";
       const fetchWith = (viewerToken2) => fetch(buildMediaUrl(baseUrl, path, { token: viewerToken2 }), {
-        headers: sessionSecret ? { [SESSION_HEADER2]: sessionSecret } : void 0
+        headers: sessionSecret ? { [SESSION_HEADER]: sessionSecret } : void 0
       });
       const viewerToken = isPrivate ? token ?? await retryToken() : null;
       let response = await fetchWith(viewerToken ?? void 0);
@@ -326,7 +206,7 @@ function useMediaSession({ issueViewerToken, tokenArgs, baseUrl, isLazy }) {
     },
     [baseUrl, token, reissueToken, retryToken, sessionSecret]
   );
-  return React3.useMemo(
+  return React2.useMemo(
     () => ({
       token,
       tokenStatus,
@@ -353,59 +233,327 @@ function useMediaSession({ issueViewerToken, tokenArgs, baseUrl, isLazy }) {
     ]
   );
 }
-function useRequestTokenWhen(session, isNeeded) {
-  const { requestToken, token } = session;
-  const hasToken = token !== null;
-  React3.useEffect(() => {
-    if (isNeeded && !hasToken) requestToken();
-  }, [isNeeded, hasToken, requestToken]);
+
+// src/upload-hints.ts
+async function confirmUploadBestEffort(confirmUpload, key, file, hints) {
+  try {
+    await confirmUpload({ key, filename: file.name, ...hints });
+  } catch (error) {
+    console.warn("Devultur: could not record the upload; it is recorded later", error);
+  }
+}
+async function readImageDimensions(file) {
+  if (typeof createImageBitmap !== "function" || !file.type.startsWith("image/")) return {};
+  try {
+    const bitmap = await createImageBitmap(file);
+    const dimensions = { width: bitmap.width, height: bitmap.height };
+    bitmap.close();
+    return dimensions;
+  } catch {
+    return {};
+  }
 }
 
-// src/media-upload-derive.ts
-function deriveUploadState(local, videoState, retry) {
-  const { phase, percent, file, failure, media, processRequested } = local;
-  if (phase === "uploading") return { phase: "uploading", percent, file };
-  if (phase === "upload-failed" && failure) {
+// src/crop-upload.tsx
+import React5 from "react";
+import { ImageCropper } from "@devultur/react";
+
+// src/use-media-upload.ts
+import React4 from "react";
+import { mediaPath as mediaPath2 } from "@devultur/core";
+import { UploadHttpError, uploadFileWithProgress } from "@devultur/react";
+import { useAction } from "convex/react";
+
+// src/media-hooks.ts
+import React3 from "react";
+import {
+  buildMediaUrl as buildMediaUrl2,
+  CaptionLocaleLabel,
+  MediaStatus,
+  mediaCaptionPath as mediaCaptionPath2,
+  mediaPath
+} from "@devultur/core";
+import { useQuery } from "convex/react";
+function useDevulturMedia(key) {
+  const apiCtx = React3.use(DevulturApiContext);
+  if (!apiCtx?.getMedia) {
+    throw new Error("useDevulturMedia requires getMedia in DevulturProvider api");
+  }
+  const record = useQuery(apiCtx.getMedia, key ? { key } : "skip");
+  if (!record) {
     return {
-      phase: "failed",
-      stage: "upload",
-      reason: failure.reason,
-      retriable: failure.retriable,
-      message: failure.message,
-      retry
+      status: MediaStatus.IDLE,
+      progress: null,
+      error: null,
+      failureReason: null,
+      retriable: null,
+      isQueued: false,
+      isTranscoding: false,
+      isCaptioning: false,
+      isReady: false,
+      isFailed: false,
+      playlistUrl: null,
+      thumbnailKey: null,
+      captionLocales: [],
+      duration: null,
+      isLoading: record === void 0
     };
   }
-  if (phase === "idle" || !media) return { phase: "idle" };
-  if (media.kind !== "video" || !processRequested) return { phase: "ready", media };
-  switch (videoState.phase) {
-    case "processing":
-      return { phase: "processing", media, step: videoState.step, percent: videoState.percent };
-    case "ready":
-      return {
-        phase: "ready",
-        media,
-        playlist: videoState.playlist,
-        duration: videoState.duration,
-        captions: videoState.captions,
-        playerProps: videoState.playerProps
-      };
-    case "failed":
+  const status = record.transcodeStatus ?? MediaStatus.IDLE;
+  const isReady = status === MediaStatus.READY;
+  const isFailed = status === MediaStatus.FAILED;
+  const progress = record.transcodeProgress ? {
+    current: record.transcodeProgress.current,
+    total: record.transcodeProgress.total,
+    percent: record.transcodeProgress.total > 0 ? Math.round(
+      record.transcodeProgress.current / record.transcodeProgress.total * 100
+    ) : 0,
+    phase: record.transcodeProgress.phase
+  } : null;
+  return {
+    status,
+    progress,
+    error: record.transcodeError ?? null,
+    failureReason: isFailed ? record.failureReason ?? "internal" : null,
+    retriable: isFailed ? record.retriable ?? true : null,
+    isQueued: status === MediaStatus.QUEUED,
+    isTranscoding: status === MediaStatus.TRANSCODING,
+    isCaptioning: status === MediaStatus.CAPTIONING,
+    isReady,
+    isFailed,
+    playlistUrl: record.playlistUrl ?? null,
+    thumbnailKey: record.thumbnailKey ?? null,
+    captionLocales: record.captionLocales ?? [],
+    duration: record.duration ?? null,
+    isLoading: false
+  };
+}
+function useVideoState(media, options) {
+  const devultur = useDevultur();
+  const { token, baseUrl, sessionSecret } = devultur;
+  useRequestTokenWhen(devultur, media?.kind === "video" && media.visibility === "private");
+  const status = useDevulturMedia(media?.kind === "video" ? media.id : null);
+  const locales = options?.locales;
+  return React3.useMemo(() => {
+    if (media?.kind !== "video") return { phase: "idle" };
+    if (status.isFailed) {
       return {
         phase: "failed",
-        stage: "transcode",
-        reason: videoState.reason,
-        retriable: videoState.retriable,
-        message: videoState.message,
-        retry
+        reason: status.failureReason ?? "internal",
+        message: status.error ?? "Video processing failed",
+        retriable: status.retriable ?? true
       };
-    default:
-      return { phase: "queued", media };
-  }
+    }
+    if (status.isReady) {
+      if (!baseUrl) throw new Error("useVideoState requires `baseUrl` on <DevulturProvider>");
+      const viewerToken = media.visibility === "private" ? token ?? void 0 : void 0;
+      const playlist = buildMediaUrl2(baseUrl, mediaPath(media), { token: viewerToken });
+      const captions = (locales ?? status.captionLocales).flatMap((locale) => {
+        const path = mediaCaptionPath2(media, locale);
+        if (!path) return [];
+        const label = CaptionLocaleLabel[locale] ?? locale;
+        return [{ locale, label, src: buildMediaUrl2(baseUrl, path, { token: viewerToken }) }];
+      });
+      return {
+        phase: "ready",
+        media,
+        playlist,
+        duration: status.duration ?? 0,
+        captions,
+        playerProps: {
+          src: playlist,
+          token: viewerToken,
+          captions,
+          sessionSecret: media.visibility === "private" ? sessionSecret : void 0
+        }
+      };
+    }
+    if (status.isQueued) return { phase: "queued" };
+    if (status.isTranscoding || status.isCaptioning) {
+      const step = status.progress?.phase ?? (status.isCaptioning ? "captioning" : "encoding");
+      return { phase: "processing", step, percent: status.progress?.percent ?? 0 };
+    }
+    return { phase: "idle" };
+  }, [media, status, baseUrl, token, locales, sessionSecret]);
+}
+
+// src/media-upload-derive.ts
+function deriveUploadState(local, videoState, retry) {
+  const { phase, percent, file, failure, media, processRequested } = local;
+  if (phase === "uploading") return { phase: "uploading", percent, file };
+  if (phase === "upload-failed" && failure) {
+    return {
+      phase: "failed",
+      stage: "upload",
+      reason: failure.reason,
+      retriable: failure.retriable,
+      message: failure.message,
+      retry
+    };
+  }
+  if (phase === "idle" || !media) return { phase: "idle" };
+  if (media.kind !== "video" || !processRequested) return { phase: "ready", media };
+  switch (videoState.phase) {
+    case "processing":
+      return { phase: "processing", media, step: videoState.step, percent: videoState.percent };
+    case "ready":
+      return {
+        phase: "ready",
+        media,
+        playlist: videoState.playlist,
+        duration: videoState.duration,
+        captions: videoState.captions,
+        playerProps: videoState.playerProps
+      };
+    case "failed":
+      return {
+        phase: "failed",
+        stage: "transcode",
+        reason: videoState.reason,
+        retriable: videoState.retriable,
+        message: videoState.message,
+        retry
+      };
+    default:
+      return { phase: "queued", media };
+  }
+}
+
+// src/use-media-upload.ts
+function useMediaUpload(options) {
+  const { visibility, onComplete, onError, replaces, process, locales } = options ?? {};
+  const api = useDevulturApi();
+  const createUploadUrlAction = useAction(api.createUploadUrl);
+  const deleteMediaAction = useAction(api.deleteMedia);
+  const confirmUploadAction = useAction(api.confirmUpload ?? api.createUploadUrl);
+  const processVideoAction = useAction(api.processVideo ?? api.createUploadUrl);
+  const [phase, setPhase] = React4.useState("idle");
+  const [percent, setPercent] = React4.useState(0);
+  const [currentFile, setCurrentFile] = React4.useState(null);
+  const [media, setMedia] = React4.useState(null);
+  const [uploadFailure, setUploadFailure] = React4.useState(null);
+  const [processRequested, setProcessRequested] = React4.useState(false);
+  const abortRef = React4.useRef(null);
+  const lastFileRef = React4.useRef(null);
+  const lastKeyRef = React4.useRef(null);
+  const videoState = useVideoState(media, { locales });
+  const triggerProcess = React4.useCallback(
+    (key) => {
+      if (!api.processVideo) {
+        throw new Error("useMediaUpload: processing a video requires `processVideo` in the <DevulturProvider> api");
+      }
+      lastKeyRef.current = key;
+      setProcessRequested(true);
+      processVideoAction({ key }).catch((err) => {
+        console.error("useMediaUpload: could not request the transcode", err);
+      });
+    },
+    [api.processVideo, processVideoAction]
+  );
+  const runUpload = React4.useCallback(
+    async (file) => {
+      const controller = new AbortController();
+      abortRef.current = controller;
+      lastFileRef.current = file;
+      setUploadFailure(null);
+      setMedia(null);
+      setProcessRequested(false);
+      setCurrentFile(file);
+      setPercent(0);
+      setPhase("uploading");
+      const fail = (reason, message) => {
+        const failure = { stage: "upload", reason, retriable: true, message };
+        setUploadFailure(failure);
+        setPhase("upload-failed");
+        onError?.(failure);
+        return null;
+      };
+      let result;
+      try {
+        result = await createUploadUrlAction({
+          filename: file.name,
+          contentType: file.type,
+          visibility
+        });
+      } catch (err) {
+        return fail("rejected", err instanceof Error ? err.message : "Could not start the upload");
+      }
+      const dimensions = await readImageDimensions(file);
+      try {
+        await uploadFileWithProgress(result.url, file, { onProgress: setPercent, signal: controller.signal });
+      } catch (err) {
+        if (err instanceof DOMException && err.name === "AbortError") {
+          setPhase("idle");
+          setCurrentFile(null);
+          setPercent(0);
+          return null;
+        }
+        const rejected = err instanceof UploadHttpError && (err.status === 413 || err.status === 415);
+        return fail(rejected ? "rejected" : "network", err instanceof Error ? err.message : "The upload failed");
+      }
+      if (api.confirmUpload) await confirmUploadBestEffort(confirmUploadAction, result.key, file, dimensions);
+      const uploaded = {
+        id: result.id,
+        kind: result.kind,
+        visibility: result.visibility,
+        filename: file.name,
+        key: result.key,
+        ...dimensions
+      };
+      setMedia(uploaded);
+      setPhase("uploaded");
+      if (replaces) deleteMediaAction({ key: mediaPath2(replaces) }).catch(() => {
+      });
+      onComplete?.(uploaded);
+      if ((process ?? true) && uploaded.kind === "video") triggerProcess(result.key);
+      return uploaded;
+    },
+    [
+      createUploadUrlAction,
+      confirmUploadAction,
+      api.confirmUpload,
+      deleteMediaAction,
+      triggerProcess,
+      visibility,
+      replaces,
+      process,
+      onComplete,
+      onError
+    ]
+  );
+  const cancel = React4.useCallback(() => {
+    abortRef.current?.abort();
+  }, []);
+  const reset = React4.useCallback(() => {
+    abortRef.current?.abort();
+    setPhase("idle");
+    setPercent(0);
+    setCurrentFile(null);
+    setMedia(null);
+    setUploadFailure(null);
+    setProcessRequested(false);
+  }, []);
+  const retry = React4.useCallback(() => {
+    if (phase === "upload-failed" && lastFileRef.current) {
+      runUpload(lastFileRef.current);
+      return;
+    }
+    if (lastKeyRef.current) triggerProcess(lastKeyRef.current);
+  }, [phase, runUpload, triggerProcess]);
+  React4.useEffect(() => () => abortRef.current?.abort(), []);
+  const state = React4.useMemo(
+    () => deriveUploadState(
+      { phase, percent, file: currentFile, failure: uploadFailure, media, processRequested },
+      videoState,
+      retry
+    ),
+    [phase, percent, currentFile, uploadFailure, media, processRequested, videoState, retry]
+  );
+  const upload = React4.useCallback((file) => runUpload(file), [runUpload]);
+  return { upload, state, cancel, reset };
 }
 
 // src/crop-upload.tsx
-import React4 from "react";
-import { ImageCropper } from "@devultur/react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var DEFAULT_LABELS = {
   zoom: "Zoom",
@@ -428,18 +576,18 @@ function CropUpload({
   children
 }) {
   const text = { ...DEFAULT_LABELS, ...labels };
-  const [pendingFile, setPendingFile] = React4.useState(null);
-  const inputRef = React4.useRef(null);
+  const [pendingFile, setPendingFile] = React5.useState(null);
+  const inputRef = React5.useRef(null);
   const { upload, state, cancel, reset } = useMediaUpload({ visibility, replaces, onComplete });
-  const pickFile = React4.useCallback(() => inputRef.current?.click(), []);
-  const handleCrop = React4.useCallback(
+  const pickFile = React5.useCallback(() => inputRef.current?.click(), []);
+  const handleCrop = React5.useCallback(
     (baked) => {
       setPendingFile(null);
       upload(baked);
     },
     [upload]
   );
-  const resetAll = React4.useCallback(() => {
+  const resetAll = React5.useCallback(() => {
     setPendingFile(null);
     reset();
   }, [reset]);
@@ -492,7 +640,7 @@ function CropUpload({
 }
 
 // src/document-renderers.tsx
-import React5 from "react";
+import React7 from "react";
 
 // src/attachment-icons.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
@@ -526,65 +674,196 @@ function AttachmentIcon({ kind }) {
   );
 }
 
-// src/document-renderers.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function DocumentLink({ media, download = false, children, labels, ...anchorProps }) {
-  const { url } = useDevultur();
-  if (!media) return null;
-  const text = children ?? attachmentName(media, mergeAttachmentLabels(labels).untitled);
-  if (download || media.visibility === "private") {
-    return /* @__PURE__ */ jsx3(DownloadLink, { media, ...anchorProps, children: text });
-  }
-  return /* @__PURE__ */ jsx3("a", { href: url(media), ...anchorProps, children: text });
-}
-function AttachmentCard({
-  media,
-  contentType,
-  onOpen,
-  preview,
-  headingLevel = 3,
-  locale,
-  labels,
-  ...articleProps
-}) {
-  const headingId = React5.useId();
-  if (!media) return null;
-  const text = mergeAttachmentLabels(labels);
-  const kind = attachmentKindOf(media, contentType);
-  const details = attachmentDetails(media, kind, text, locale ?? text.locale);
-  const Heading = `h${headingLevel}`;
-  return /* @__PURE__ */ jsxs2("article", { "aria-labelledby": headingId, "data-kind": kind, ...articleProps, children: [
-    preview ?? /* @__PURE__ */ jsx3(AttachmentIcon, { kind }),
-    /* @__PURE__ */ jsx3(Heading, { id: headingId, "data-part": "name", children: attachmentName(media, text.untitled) }),
-    /* @__PURE__ */ jsx3("p", { "data-part": "details", children: details.join(" \xB7 ") }),
-    /* @__PURE__ */ jsxs2("div", { "data-part": "actions", children: [
-      /* @__PURE__ */ jsx3(DownloadLink, { media, "aria-describedby": headingId, "data-part": "download", children: text.download }),
-      onOpen && /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => onOpen(media), "aria-describedby": headingId, "data-part": "open", children: text.open })
-    ] })
-  ] });
-}
-
-// src/image.tsx
+// src/download-link.tsx
 import React6 from "react";
 import { mediaUrl as mediaUrl2 } from "@devultur/core";
 
-// src/responsive-image.ts
-function normalizeWidths(widths) {
-  const validWidths = widths.filter((width) => Number.isInteger(width) && width > 0);
-  return [...new Set(validWidths)].sort((a, b) => a - b);
+// src/media-fetch.ts
+import { SESSION_HEADER as SESSION_HEADER2 } from "@devultur/core";
+var MediaFetchError = class extends Error {
+  code;
+  /** HTTP status, for `http_error` when the delivery answered. */
+  status;
+  /** The code's extra fields, e.g. `page_cap`'s `{ shown, total }`. */
+  details;
+  constructor(code, message, status, options) {
+    super(message, options);
+    this.name = "MediaFetchError";
+    this.code = code;
+    this.status = status;
+    this.details = options?.details;
+  }
+};
+function networkError(cause) {
+  return new MediaFetchError("http_error", "Media fetch failed: no response", void 0, { cause });
 }
-function buildSrcSet(widths, urlForWidth) {
-  return widths.map((width) => `${urlForWidth(width)} ${width}w`).join(", ");
+function pageCapError(shown, total) {
+  const message = `Showing the first ${shown} of ${total} pages`;
+  return new MediaFetchError("page_cap", message, void 0, { details: { shown, total } });
 }
-function scaledHeight(targetWidth, width, height) {
-  if (!width || !height) return void 0;
-  return Math.round(targetWidth * height / width);
+function renderFailedError(cause) {
+  return new MediaFetchError("render_failed", "The media couldn't be rendered", void 0, { cause });
 }
-function pickWidth(widths, renderedWidth) {
-  const ascending = normalizeWidths(widths);
-  if (renderedWidth === null) return ascending.at(-1);
-  const fitting = ascending.filter((width) => width <= renderedWidth * 2);
-  return fitting.at(-1) ?? ascending[0];
+function tokenUnavailableError(cause) {
+  return new MediaFetchError("token_unavailable", "No viewer token: its issuance failed", void 0, { cause });
+}
+async function fetchMedia(request) {
+  const { buildUrl, token, sessionSecret, reissueToken, signal, isPrivate = true, canReissue = true } = request;
+  const headers = isPrivate && sessionSecret ? { [SESSION_HEADER2]: sessionSecret } : void 0;
+  const response = await fetch(buildUrl(isPrivate ? token ?? void 0 : void 0), { headers, signal });
+  if (!isPrivate || !canReissue || response.status !== 401) return response;
+  if (!await isSessionMismatch(response)) return response;
+  request.onReissue?.();
+  const freshToken = await reissueToken();
+  if (!freshToken) return response;
+  return fetch(buildUrl(freshToken), { headers, signal });
+}
+async function loadMedia(request) {
+  const response = await fetchMedia(request);
+  if (!response.ok) {
+    throw new MediaFetchError("http_error", `Media fetch failed: ${response.status}`, response.status);
+  }
+  const trusted = trustedContentType(request.contentType, response.headers.get("content-type"));
+  if (!trusted.ok) {
+    await response.body?.cancel();
+    throw new MediaFetchError(trusted.reason, `Refusing to preview: ${trusted.reason}`);
+  }
+  const bytes = await readMediaBody(response, request.maxBytes);
+  return { bytes, contentType: trusted.contentType };
+}
+function tooLarge(maxBytes) {
+  return new MediaFetchError("too_large", `Media is larger than ${maxBytes} bytes`);
+}
+async function readMediaBody(response, maxBytes) {
+  if (maxBytes === void 0) return new Uint8Array(await response.arrayBuffer());
+  const declaredBytes = Number(response.headers.get("content-length") ?? Number.NaN);
+  if (declaredBytes > maxBytes) {
+    await response.body?.cancel();
+    throw tooLarge(maxBytes);
+  }
+  if (!response.body) return new Uint8Array(0);
+  return readCapped(response.body, maxBytes);
+}
+async function readCapped(body, maxBytes) {
+  const reader = body.getReader();
+  const chunks = [];
+  let byteCount = 0;
+  for (; ; ) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    byteCount += value.byteLength;
+    if (byteCount > maxBytes) {
+      await reader.cancel();
+      throw tooLarge(maxBytes);
+    }
+    chunks.push(value);
+  }
+  const bytes = new Uint8Array(byteCount);
+  let offset = 0;
+  for (const chunk of chunks) {
+    bytes.set(chunk, offset);
+    offset += chunk.byteLength;
+  }
+  return bytes;
+}
+
+// src/download-link.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function DownloadLink({ media, filename, onDownloadError, children, ...anchorProps }) {
+  const devultur = useDevultur();
+  const { url, token, tokenStatus, tokenError, baseUrl, sessionSecret, reissueToken } = devultur;
+  useRequestTokenWhen(devultur, media?.visibility === "private");
+  const handleClick = React6.useCallback(
+    async (event) => {
+      if (media?.visibility !== "private" || !baseUrl) return;
+      event.preventDefault();
+      if (tokenStatus === "error") {
+        onDownloadError?.(tokenUnavailableError(tokenError));
+        return;
+      }
+      const response = await fetchMedia({
+        buildUrl: (viewerToken) => mediaUrl2(baseUrl, media, { download: filename ?? true, token: viewerToken }),
+        token,
+        sessionSecret,
+        reissueToken
+      });
+      if (!response.ok) {
+        const status = response.status;
+        onDownloadError?.(new MediaFetchError("http_error", `Media fetch failed: ${status}`, status));
+        return;
+      }
+      const objectUrl = URL.createObjectURL(await response.blob());
+      const anchor = document.createElement("a");
+      anchor.href = objectUrl;
+      anchor.download = filename ?? media.filename ?? "download";
+      anchor.click();
+      URL.revokeObjectURL(objectUrl);
+    },
+    [media, baseUrl, token, tokenStatus, tokenError, filename, sessionSecret, reissueToken, onDownloadError]
+  );
+  if (!media) return null;
+  return /* @__PURE__ */ jsx3("a", { href: url(media, { download: filename ?? true }), download: true, ...anchorProps, onClick: handleClick, children });
+}
+
+// src/document-renderers.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function DocumentLink({ media, download = false, children, labels, ...anchorProps }) {
+  const { url } = useDevultur();
+  if (!media) return null;
+  const text = children ?? attachmentName(media, mergeAttachmentLabels(labels).untitled);
+  if (download || media.visibility === "private") {
+    return /* @__PURE__ */ jsx4(DownloadLink, { media, ...anchorProps, children: text });
+  }
+  return /* @__PURE__ */ jsx4("a", { href: url(media), ...anchorProps, children: text });
+}
+function AttachmentCard({
+  media,
+  contentType,
+  onOpen,
+  preview,
+  headingLevel = 3,
+  locale,
+  labels,
+  ...articleProps
+}) {
+  const headingId = React7.useId();
+  if (!media) return null;
+  const text = mergeAttachmentLabels(labels);
+  const kind = attachmentKindOf(media, contentType);
+  const details = attachmentDetails(media, kind, text, locale ?? text.locale);
+  const Heading = `h${headingLevel}`;
+  return /* @__PURE__ */ jsxs2("article", { "aria-labelledby": headingId, "data-kind": kind, ...articleProps, children: [
+    preview ?? /* @__PURE__ */ jsx4(AttachmentIcon, { kind }),
+    /* @__PURE__ */ jsx4(Heading, { id: headingId, "data-part": "name", children: attachmentName(media, text.untitled) }),
+    /* @__PURE__ */ jsx4("p", { "data-part": "details", children: details.join(" \xB7 ") }),
+    /* @__PURE__ */ jsxs2("div", { "data-part": "actions", children: [
+      /* @__PURE__ */ jsx4(DownloadLink, { media, "aria-describedby": headingId, "data-part": "download", children: text.download }),
+      onOpen && /* @__PURE__ */ jsx4("button", { type: "button", onClick: () => onOpen(media), "aria-describedby": headingId, "data-part": "open", children: text.open })
+    ] })
+  ] });
+}
+
+// src/image.tsx
+import React8 from "react";
+import { mediaUrl as mediaUrl3 } from "@devultur/core";
+
+// src/responsive-image.ts
+function normalizeWidths(widths) {
+  const validWidths = widths.filter((width) => Number.isInteger(width) && width > 0);
+  return [...new Set(validWidths)].sort((a, b) => a - b);
+}
+function buildSrcSet(widths, urlForWidth) {
+  return widths.map((width) => `${urlForWidth(width)} ${width}w`).join(", ");
+}
+function scaledHeight(targetWidth, width, height) {
+  if (!width || !height) return void 0;
+  return Math.round(targetWidth * height / width);
+}
+function pickWidth(widths, renderedWidth) {
+  const ascending = normalizeWidths(widths);
+  if (renderedWidth === null) return ascending.at(-1);
+  const fitting = ascending.filter((width) => width <= renderedWidth * 2);
+  return fitting.at(-1) ?? ascending[0];
 }
 var LENGTH = /^(\d+(?:\.\d+)?)(px|vw)$/;
 function lengthInPixels(length, viewportWidth) {
@@ -610,7 +889,7 @@ function renderedWidthFromSizes(sizes) {
 }
 
 // src/image.tsx
-import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5 } from "react/jsx-runtime";
 function Image({
   media,
   width,
@@ -657,14 +936,14 @@ function Image({
   } else {
     src = url(media, transforms);
   }
-  if (!src) return /* @__PURE__ */ jsx4(Fragment, { children: fallback });
+  if (!src) return /* @__PURE__ */ jsx5(Fragment, { children: fallback });
   if (render) {
-    return React6.cloneElement(render, {
+    return React8.cloneElement(render, {
       style: { ...render.props.style, backgroundImage: `url("${src}")` }
     });
   }
   const lazyProps = responsiveWidths ? { loading: "lazy", decoding: "async" } : {};
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     "img",
     {
       src,
@@ -681,10 +960,10 @@ function Image({
 function usePrivateImage(media, transforms, onLoadError) {
   const devultur = useDevultur();
   const { token, tokenStatus, tokenError, baseUrl, reissueToken, sessionSecret } = devultur;
-  const [isFailed, setIsFailed] = React6.useState(false);
-  const [blobSrc, setBlobSrc] = React6.useState(null);
-  const sessionRef = React6.useRef({ token, reissueToken, onLoadError });
-  React6.useEffect(() => {
+  const [isFailed, setIsFailed] = React8.useState(false);
+  const [blobSrc, setBlobSrc] = React8.useState(null);
+  const sessionRef = React8.useRef({ token, reissueToken, onLoadError });
+  React8.useEffect(() => {
     sessionRef.current = { token, reissueToken, onLoadError };
   });
   const isPrivate = media?.visibility === "private";
@@ -692,15 +971,15 @@ function usePrivateImage(media, transforms, onLoadError) {
   const hasToken = token !== null;
   const isTokenUnavailable = isPrivate && tokenStatus === "error";
   const { width, height, fit, format, quality } = transforms;
-  React6.useEffect(() => {
+  React8.useEffect(() => {
     setIsFailed(false);
     setBlobSrc(null);
   }, [media]);
-  React6.useEffect(() => {
+  React8.useEffect(() => {
     if (!isTokenUnavailable || !media) return;
     sessionRef.current.onLoadError?.(tokenUnavailableError(tokenError));
   }, [isTokenUnavailable, media, tokenError]);
-  React6.useEffect(() => {
+  React8.useEffect(() => {
     if (!isPrivate || isFailed || !media || !hasToken) return;
     let cancelled = false;
     let objectUrl = null;
@@ -714,7 +993,7 @@ function usePrivateImage(media, transforms, onLoadError) {
     (async () => {
       try {
         const response = await fetchMedia({
-          buildUrl: (viewerToken) => mediaUrl2(baseUrl, media, { ...fetchTransforms, token: viewerToken }),
+          buildUrl: (viewerToken) => mediaUrl3(baseUrl, media, { ...fetchTransforms, token: viewerToken }),
           token: sessionRef.current.token,
           sessionSecret,
           reissueToken: sessionRef.current.reissueToken
@@ -739,22 +1018,22 @@ function usePrivateImage(media, transforms, onLoadError) {
       if (objectUrl) URL.revokeObjectURL(objectUrl);
     };
   }, [isPrivate, isFailed, media, hasToken, baseUrl, sessionSecret, width, height, fit, format, quality]);
-  const handleError = React6.useCallback(() => setIsFailed(true), []);
+  const handleError = React8.useCallback(() => setIsFailed(true), []);
   return { blobSrc, isFailed: isFailed || isTokenUnavailable, handleError };
 }
 
 // src/media-library.tsx
-import React15 from "react";
+import React17 from "react";
 
 // src/media-library-item.tsx
-import React12 from "react";
+import React14 from "react";
 
 // src/pdf-thumbnail.tsx
-import React11 from "react";
+import React13 from "react";
 
 // src/media-resource.ts
-import React7 from "react";
-import { mediaPath, mediaUrl as mediaUrl3 } from "@devultur/core";
+import React9 from "react";
+import { mediaPath as mediaPath3, mediaUrl as mediaUrl4 } from "@devultur/core";
 var IDLE = { value: null, contentType: null, isLoading: false, error: null };
 var LOADING = { value: null, contentType: null, isLoading: true, error: null };
 function useMediaResource(media, options) {
@@ -764,17 +1043,17 @@ function useMediaResource(media, options) {
   useRequestTokenWhen(devultur, isPrivate && isEnabled);
   const isReady = !isPrivate || devultur.token !== null;
   const isTokenUnavailable = isPrivate && devultur.tokenStatus === "error";
-  const tokenFailure = React7.useMemo(
+  const tokenFailure = React9.useMemo(
     () => isTokenUnavailable ? tokenUnavailableError(devultur.tokenError) : null,
     [isTokenUnavailable, devultur.tokenError]
   );
-  const requestKey = media && isEnabled ? [devultur.baseUrl, media.visibility, mediaPath(media), contentType ?? "", maxBytes ?? ""].join("|") : null;
-  const [settled, setSettled] = React7.useState(null);
-  const inputsRef = React7.useRef({ media, devultur, options });
-  React7.useEffect(() => {
+  const requestKey = media && isEnabled ? [devultur.baseUrl, media.visibility, mediaPath3(media), contentType ?? "", maxBytes ?? ""].join("|") : null;
+  const [settled, setSettled] = React9.useState(null);
+  const inputsRef = React9.useRef({ media, devultur, options });
+  React9.useEffect(() => {
     inputsRef.current = { media, devultur, options };
   });
-  React7.useEffect(() => {
+  React9.useEffect(() => {
     if (!requestKey || !isReady) return;
     const { media: target, devultur: context, options: current } = inputsRef.current;
     if (!target || !context.baseUrl) return;
@@ -782,7 +1061,7 @@ function useMediaResource(media, options) {
     const controller = new AbortController();
     let value = null;
     loadMedia({
-      buildUrl: (viewerToken) => mediaUrl3(baseUrl, target, { token: viewerToken }),
+      buildUrl: (viewerToken) => mediaUrl4(baseUrl, target, { token: viewerToken }),
       token: context.token,
       sessionSecret: context.sessionSecret,
       reissueToken: context.reissueToken,
@@ -812,7 +1091,7 @@ function useMediaResource(media, options) {
 }
 
 // src/pdf-context.tsx
-import React8 from "react";
+import React10 from "react";
 
 // src/preview-labels.ts
 var ERROR_TEXT = {
@@ -847,16 +1126,16 @@ function mergePreviewLabels(...sources) {
 }
 
 // src/pdf-context.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-var PdfPreviewContext = /* @__PURE__ */ React8.createContext({});
+import { jsx as jsx6 } from "react/jsx-runtime";
+var PdfPreviewContext = /* @__PURE__ */ React10.createContext({});
 function PdfPreviewProvider({
   pdfjs,
   workerSrc,
   labels,
   children
 }) {
-  const config = React8.useMemo(() => ({ pdfjs, workerSrc, labels }), [pdfjs, workerSrc, labels]);
-  return /* @__PURE__ */ jsx5(PdfPreviewContext.Provider, { value: config, children });
+  const config = React10.useMemo(() => ({ pdfjs, workerSrc, labels }), [pdfjs, workerSrc, labels]);
+  return /* @__PURE__ */ jsx6(PdfPreviewContext.Provider, { value: config, children });
 }
 var loadedModules = /* @__PURE__ */ new WeakMap();
 function loadOnce(loader) {
@@ -867,9 +1146,9 @@ function loadOnce(loader) {
   return loading;
 }
 function usePdfjs(workerSrcOverride) {
-  const { pdfjs: loader, workerSrc } = React8.useContext(PdfPreviewContext);
-  const [loaded, setLoaded] = React8.useState(null);
-  React8.useEffect(() => {
+  const { pdfjs: loader, workerSrc } = React10.useContext(PdfPreviewContext);
+  const [loaded, setLoaded] = React10.useState(null);
+  React10.useEffect(() => {
     if (!loader) return;
     let isCurrent = true;
     loadOnce(loader).then((pdfjs) => {
@@ -885,8 +1164,8 @@ function usePdfjs(workerSrcOverride) {
   return { status: "ready", pdfjs: loaded.pdfjs, workerSrc: workerSrcOverride ?? workerSrc };
 }
 function usePdfPageCounter() {
-  const { pdfjs: loader, workerSrc } = React8.useContext(PdfPreviewContext);
-  return React8.useMemo(() => {
+  const { pdfjs: loader, workerSrc } = React10.useContext(PdfPreviewContext);
+  return React10.useMemo(() => {
     if (!loader) return null;
     return async (file) => {
       const pdfjs = await loadOnce(loader);
@@ -896,15 +1175,15 @@ function usePdfPageCounter() {
   }, [loader, workerSrc]);
 }
 function usePreviewLabels(labels) {
-  const providerLabels = React8.useContext(PdfPreviewContext).labels;
+  const providerLabels = React10.useContext(PdfPreviewContext).labels;
   return mergePreviewLabels(providerLabels, labels);
 }
 
 // src/pdf-hooks.ts
-import React9 from "react";
+import React11 from "react";
 function useIsVisible(ref, rootMargin = "200px") {
-  const [isVisible, setIsVisible] = React9.useState(false);
-  React9.useEffect(() => {
+  const [isVisible, setIsVisible] = React11.useState(false);
+  React11.useEffect(() => {
     const element = ref.current;
     if (isVisible || !element) return;
     if (typeof IntersectionObserver === "undefined") {
@@ -925,12 +1204,12 @@ function useIsVisible(ref, rootMargin = "200px") {
   return isVisible;
 }
 function usePdfDocument({ pdfjs, bytes, workerSrc }) {
-  const [state, setState] = React9.useState({
+  const [state, setState] = React11.useState({
     bytes: null,
     document: null,
     error: null
   });
-  React9.useEffect(() => {
+  React11.useEffect(() => {
     let isCurrent = true;
     const loadingTask = openPdf(pdfjs, bytes, workerSrc);
     loadingTask.promise.then((document2) => {
@@ -949,8 +1228,8 @@ function usePdfDocument({ pdfjs, bytes, workerSrc }) {
 }
 function usePageRender(options) {
   const { document: document2, pageNumber, canvasRef, width, isEnabled, shouldExtractText = false } = options;
-  const [state, setState] = React9.useState({ isRendered: false, text: "" });
-  React9.useEffect(() => {
+  const [state, setState] = React11.useState({ isRendered: false, text: "" });
+  React11.useEffect(() => {
     const canvas = canvasRef.current;
     if (!document2 || !isEnabled || !canvas) return;
     let isCurrent = true;
@@ -980,8 +1259,8 @@ function usePageRender(options) {
 }
 
 // src/pdf-preview.tsx
-import React10 from "react";
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import React12 from "react";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var VISUALLY_HIDDEN = {
   position: "absolute",
   width: 1,
@@ -1004,11 +1283,11 @@ function PdfPreview(props) {
     contentType: expectedType,
     decode: keepBytes
   });
-  if (error) return /* @__PURE__ */ jsx6(Fragment2, { children: renderFallback(error) });
-  if (!bytes || pdfjsState.status === "loading") return /* @__PURE__ */ jsx6(Fragment2, { children: loading });
+  if (error) return /* @__PURE__ */ jsx7(Fragment2, { children: renderFallback(error) });
+  if (!bytes || pdfjsState.status === "loading") return /* @__PURE__ */ jsx7(Fragment2, { children: loading });
   const label = title ?? media.filename ?? labels.untitledPdf;
-  if (pdfjsState.status === "unavailable") return /* @__PURE__ */ jsx6(PdfFrame, { bytes, label, className });
-  return /* @__PURE__ */ jsx6(
+  if (pdfjsState.status === "unavailable") return /* @__PURE__ */ jsx7(PdfFrame, { bytes, label, className });
+  return /* @__PURE__ */ jsx7(
     PdfCanvasDocument,
     {
       pdfjs: pdfjsState.pdfjs,
@@ -1026,13 +1305,13 @@ function PdfPreview(props) {
 function PdfCanvasDocument(props) {
   const { pdfjs, workerSrc, bytes, label, className, renderFallback, loading, labels, maxPages } = props;
   const { document: document2, error } = usePdfDocument({ pdfjs, bytes, workerSrc });
-  const containerRef = React10.useRef(null);
-  const [width, setWidth] = React10.useState(null);
-  React10.useLayoutEffect(() => {
+  const containerRef = React12.useRef(null);
+  const [width, setWidth] = React12.useState(null);
+  React12.useLayoutEffect(() => {
     if (document2) setWidth(containerRef.current?.clientWidth ?? 0);
   }, [document2]);
-  if (error) return /* @__PURE__ */ jsx6(Fragment2, { children: renderFallback(renderFailedError(error)) });
-  if (!document2) return /* @__PURE__ */ jsx6(Fragment2, { children: loading });
+  if (error) return /* @__PURE__ */ jsx7(Fragment2, { children: renderFallback(renderFailedError(error)) });
+  if (!document2) return /* @__PURE__ */ jsx7(Fragment2, { children: loading });
   const shownPageCount = Math.min(document2.numPages, Math.max(1, maxPages));
   const isTruncated = shownPageCount < document2.numPages;
   const pageNumbers = Array.from({ length: shownPageCount }, (_, index) => index + 1);
@@ -1044,7 +1323,7 @@ function PdfCanvasDocument(props) {
       "aria-label": labels.document(label, document2.numPages),
       className,
       children: [
-        width !== null && pageNumbers.map((pageNumber) => /* @__PURE__ */ jsx6(
+        width !== null && pageNumbers.map((pageNumber) => /* @__PURE__ */ jsx7(
           PdfPageView,
           {
             document: document2,
@@ -1064,8 +1343,8 @@ function PdfCanvasDocument(props) {
   );
 }
 function PdfPageView({ document: document2, pageNumber, width, label }) {
-  const pageRef = React10.useRef(null);
-  const canvasRef = React10.useRef(null);
+  const pageRef = React12.useRef(null);
+  const canvasRef = React12.useRef(null);
   const isVisible = useIsVisible(pageRef);
   const { isRendered, text } = usePageRender({
     document: document2,
@@ -1077,28 +1356,28 @@ function PdfPageView({ document: document2, pageNumber, width, label }) {
   });
   const placeholderStyle = isRendered ? void 0 : { aspectRatio: "1 / 1.4142", maxWidth: "100%" };
   return /* @__PURE__ */ jsxs3("section", { ref: pageRef, "aria-label": label, style: placeholderStyle, children: [
-    /* @__PURE__ */ jsx6("canvas", { ref: canvasRef, style: { display: "block", maxWidth: "100%" } }),
-    text && /* @__PURE__ */ jsx6("p", { style: VISUALLY_HIDDEN, children: text })
+    /* @__PURE__ */ jsx7("canvas", { ref: canvasRef, style: { display: "block", maxWidth: "100%" } }),
+    text && /* @__PURE__ */ jsx7("p", { style: VISUALLY_HIDDEN, children: text })
   ] });
 }
 function PdfFrame({ bytes, label, className }) {
-  const [objectUrl, setObjectUrl] = React10.useState(null);
-  React10.useEffect(() => {
+  const [objectUrl, setObjectUrl] = React12.useState(null);
+  React12.useEffect(() => {
     const url = URL.createObjectURL(new Blob([bytes], { type: "application/pdf" }));
     setObjectUrl(url);
     return () => URL.revokeObjectURL(url);
   }, [bytes]);
   if (!objectUrl) return null;
-  return /* @__PURE__ */ jsx6("iframe", { src: objectUrl, title: label, referrerPolicy: "no-referrer", className });
+  return /* @__PURE__ */ jsx7("iframe", { src: objectUrl, title: label, referrerPolicy: "no-referrer", className });
 }
 
 // src/pdf-thumbnail.tsx
-import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var DEFAULT_THUMBNAIL_WIDTH = 96;
 var DEFAULT_THUMBNAIL_MAX_BYTES = 50 * 1024 * 1024;
 function PdfThumbnail(props) {
   const { media, contentType, width = DEFAULT_THUMBNAIL_WIDTH, fallback = null, loading = null } = props;
-  const containerRef = React11.useRef(null);
+  const containerRef = React13.useRef(null);
   const isVisible = useIsVisible(containerRef);
   const pdfjsState = usePdfjs(props.pdfWorkerSrc);
   const labels = usePreviewLabels(props.labels);
@@ -1115,7 +1394,7 @@ function PdfThumbnail(props) {
   const content = () => {
     if (isUnavailable) return fallback;
     if (!bytes || pdfjsState.status !== "ready") return loading;
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(
       ThumbnailCanvas,
       {
         pdfjs: pdfjsState.pdfjs,
@@ -1128,21 +1407,21 @@ function PdfThumbnail(props) {
       }
     );
   };
-  return /* @__PURE__ */ jsx7("div", { ref: containerRef, className: props.className, style: { width }, children: content() });
+  return /* @__PURE__ */ jsx8("div", { ref: containerRef, className: props.className, style: { width }, children: content() });
 }
 function ThumbnailCanvas({ pdfjs, workerSrc, bytes, width, label, fallback, loading }) {
-  const canvasRef = React11.useRef(null);
+  const canvasRef = React13.useRef(null);
   const { document: document2, error } = usePdfDocument({ pdfjs, bytes, workerSrc });
   const { isRendered } = usePageRender({ document: document2, pageNumber: 1, canvasRef, width, isEnabled: true });
-  if (error) return /* @__PURE__ */ jsx7(Fragment3, { children: fallback });
+  if (error) return /* @__PURE__ */ jsx8(Fragment3, { children: fallback });
   return /* @__PURE__ */ jsxs4(Fragment3, { children: [
     !isRendered && loading,
-    /* @__PURE__ */ jsx7("canvas", { ref: canvasRef, role: "img", "aria-label": label, style: { display: "block" } })
+    /* @__PURE__ */ jsx8("canvas", { ref: canvasRef, role: "img", "aria-label": label, style: { display: "block" } })
   ] });
 }
 
 // src/media-library-item.tsx
-import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var THUMBNAIL_WIDTH = 160;
 var THUMBNAIL_WIDTHS = [THUMBNAIL_WIDTH, THUMBNAIL_WIDTH * 2];
 function partClass(part, classNames) {
@@ -1162,10 +1441,10 @@ function kindOf(record) {
 }
 function Thumbnail({ record, media, pdfThumbnails }) {
   const kind = kindOf(record);
-  const icon = /* @__PURE__ */ jsx8(AttachmentIcon, { kind });
+  const icon = /* @__PURE__ */ jsx9(AttachmentIcon, { kind });
   if (!media) return icon;
   if (record.type === "image") {
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx9(
       Image,
       {
         media,
@@ -1180,14 +1459,14 @@ function Thumbnail({ record, media, pdfThumbnails }) {
     );
   }
   if (kind !== "pdf" || !pdfThumbnails) return icon;
-  return /* @__PURE__ */ jsx8(PdfThumbnail, { media, contentType: record.contentType, width: THUMBNAIL_WIDTH, fallback: icon });
+  return /* @__PURE__ */ jsx9(PdfThumbnail, { media, contentType: record.contentType, width: THUMBNAIL_WIDTH, fallback: icon });
 }
 function DefaultContent({ record, media, pdfThumbnails, labels, classNames }) {
   const name = record.title ?? record.filename;
   return /* @__PURE__ */ jsxs5(Fragment4, { children: [
-    /* @__PURE__ */ jsx8("span", { className: partClass("thumbnail", classNames), children: /* @__PURE__ */ jsx8(Thumbnail, { record, media, pdfThumbnails }) }),
-    /* @__PURE__ */ jsx8("span", { className: partClass("name", classNames), children: name }),
-    record.sizeBytes > 0 && /* @__PURE__ */ jsx8("span", { className: partClass("size", classNames), children: labels.size(record.sizeBytes) })
+    /* @__PURE__ */ jsx9("span", { className: partClass("thumbnail", classNames), children: /* @__PURE__ */ jsx9(Thumbnail, { record, media, pdfThumbnails }) }),
+    /* @__PURE__ */ jsx9("span", { className: partClass("name", classNames), children: name }),
+    record.sizeBytes > 0 && /* @__PURE__ */ jsx9("span", { className: partClass("size", classNames), children: labels.size(record.sizeBytes) })
   ] });
 }
 var ITEM_STYLE = {
@@ -1199,13 +1478,13 @@ var ITEM_STYLE = {
 };
 function MediaLibraryItem(props) {
   const { ref, record, isSelected, isActive, tabIndex, classNames, renderItem, onChoose, onFocus } = props;
-  const media = React12.useMemo(() => mediaFromRecord(record), [record]);
+  const media = React14.useMemo(() => mediaFromRecord(record), [record]);
   const handleKeyDown = (event) => {
     if (event.key !== "Enter" && event.key !== " ") return;
     event.preventDefault();
     onChoose();
   };
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
       ref,
@@ -1222,7 +1501,7 @@ function MediaLibraryItem(props) {
       onClick: onChoose,
       onKeyDown: handleKeyDown,
       onFocus,
-      children: renderItem ? renderItem(record, { media, isSelected, isActive }) : /* @__PURE__ */ jsx8(
+      children: renderItem ? renderItem(record, { media, isSelected, isActive }) : /* @__PURE__ */ jsx9(
         DefaultContent,
         {
           record,
@@ -1262,13 +1541,13 @@ function mergeMediaLibraryLabels(labels) {
 }
 
 // src/use-media-library.ts
-import React13 from "react";
+import React15 from "react";
 import { usePaginatedQuery } from "convex/react";
 var SEARCH_DEBOUNCE_MS = 250;
 var DEFAULT_PAGE_SIZE = 24;
 function useDebouncedSearch(value, delayMs) {
-  const [debounced, setDebounced] = React13.useState(value);
-  React13.useEffect(() => {
+  const [debounced, setDebounced] = React15.useState(value);
+  React15.useEffect(() => {
     if (value === "") {
       setDebounced("");
       return;
@@ -1293,7 +1572,7 @@ function useMediaLibrary(options = {}) {
   const args = isSearching ? { search, ...typeArg } : typeArg;
   const result = usePaginatedQuery(reference, args, { initialNumItems: pageSize });
   const resultLoadMore = result.loadMore;
-  const loadMore = React13.useCallback(
+  const loadMore = React15.useCallback(
     (numItems) => resultLoadMore(numItems ?? pageSize),
     [resultLoadMore, pageSize]
   );
@@ -1308,7 +1587,7 @@ function useMediaLibrary(options = {}) {
 }
 
 // src/use-roving-focus.ts
-import React14 from "react";
+import React16 from "react";
 function nextIndex(key, current, count, columns) {
   const last = count - 1;
   const clamp = (index) => Math.min(Math.max(index, 0), last);
@@ -1336,16 +1615,16 @@ function columnCount(items) {
   return Math.max(inFirstRow.length, 1);
 }
 function useRovingFocus(count) {
-  const [activeIndex, setActiveIndex] = React14.useState(0);
-  const itemsRef = React14.useRef([]);
+  const [activeIndex, setActiveIndex] = React16.useState(0);
+  const itemsRef = React16.useRef([]);
   const currentIndex = Math.min(activeIndex, Math.max(count - 1, 0));
-  const itemRef = React14.useCallback(
+  const itemRef = React16.useCallback(
     (index) => (element) => {
       itemsRef.current[index] = element;
     },
     []
   );
-  const handleKeyDown = React14.useCallback(
+  const handleKeyDown = React16.useCallback(
     (event) => {
       if (count === 0) return;
       const items = itemsRef.current.slice(0, count);
@@ -1362,7 +1641,7 @@ function useRovingFocus(count) {
 }
 
 // src/media-library.tsx
-import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var MEDIA_TYPES = ["image", "video", "file"];
 var ROOT_STYLE = {
   display: "flex",
@@ -1377,16 +1656,16 @@ var LIST_STYLE = {
   padding: 0
 };
 function MediaLibrary(props) {
-  const labels = React15.useMemo(() => mergeMediaLibraryLabels(props.labels), [props.labels]);
+  const labels = React17.useMemo(() => mergeMediaLibraryLabels(props.labels), [props.labels]);
   const classNames = { ...props.classNames, root: props.className ?? props.classNames?.root };
-  const [search, setSearch] = React15.useState("");
-  const [chosenType, setChosenType] = React15.useState("");
-  const [selectedKey, setSelectedKey] = React15.useState(null);
+  const [search, setSearch] = React17.useState("");
+  const [chosenType, setChosenType] = React17.useState("");
+  const [selectedKey, setSelectedKey] = React17.useState(null);
   const type = props.type ?? (chosenType === "" ? void 0 : chosenType);
   const { onSelect } = props;
   const isSelectable = props.selectable ?? props.selectedKeys !== void 0;
   const selectedKeys = props.selectedKeys ?? (selectedKey === null ? [] : [selectedKey]);
-  const handleChoose = React15.useCallback(
+  const handleChoose = React17.useCallback(
     (record) => {
       if (isSelectable) setSelectedKey(record.key);
       onSelect(record, mediaFromRecord(record));
@@ -1394,7 +1673,7 @@ function MediaLibrary(props) {
     [isSelectable, onSelect]
   );
   return /* @__PURE__ */ jsxs6("div", { className: partClass("root", classNames), style: ROOT_STYLE, children: [
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10(
       "input",
       {
         type: "search",
@@ -1413,20 +1692,20 @@ function MediaLibrary(props) {
         value: chosenType,
         onChange: (event) => setChosenType(event.target.value),
         children: [
-          /* @__PURE__ */ jsx9("option", { value: "", children: labels.allTypes }),
-          MEDIA_TYPES.map((mediaType) => /* @__PURE__ */ jsx9("option", { value: mediaType, children: labels.types[mediaType] }, mediaType))
+          /* @__PURE__ */ jsx10("option", { value: "", children: labels.allTypes }),
+          MEDIA_TYPES.map((mediaType) => /* @__PURE__ */ jsx10("option", { value: mediaType, children: labels.types[mediaType] }, mediaType))
         ]
       }
     ),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10(
       LibraryErrorBoundary,
       {
         resetKey: `${type ?? ""}\0${search}`,
         renderError: (error, retry) => /* @__PURE__ */ jsxs6("div", { role: "alert", className: partClass("status", classNames), children: [
-          /* @__PURE__ */ jsx9("p", { children: labels.error(error) }),
-          /* @__PURE__ */ jsx9("button", { type: "button", className: partClass("more", classNames), onClick: retry, children: labels.retry })
+          /* @__PURE__ */ jsx10("p", { children: labels.error(error) }),
+          /* @__PURE__ */ jsx10("button", { type: "button", className: partClass("more", classNames), onClick: retry, children: labels.retry })
         ] }),
-        children: /* @__PURE__ */ jsx9(
+        children: /* @__PURE__ */ jsx10(
           LibraryResults,
           {
             ...props,
@@ -1449,15 +1728,15 @@ function LibraryResults(props) {
   const items = props.filter ? library.items.filter(props.filter) : library.items;
   const roving = useRovingFocus(items.length);
   if (library.status === "LoadingFirstPage") {
-    return /* @__PURE__ */ jsx9("p", { role: "status", className: partClass("status", classNames), children: labels.loading });
+    return /* @__PURE__ */ jsx10("p", { role: "status", className: partClass("status", classNames), children: labels.loading });
   }
   if (items.length === 0) {
-    return /* @__PURE__ */ jsx9("p", { role: "status", className: partClass("status", classNames), children: library.search ? labels.noResults(library.search) : labels.empty });
+    return /* @__PURE__ */ jsx10("p", { role: "status", className: partClass("status", classNames), children: library.search ? labels.noResults(library.search) : labels.empty });
   }
   const isLoadingMore = library.status === "LoadingMore";
   const canLoadMore = library.status === "CanLoadMore" || isLoadingMore;
   return /* @__PURE__ */ jsxs6(Fragment5, { children: [
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10(
       "div",
       {
         role: "listbox",
@@ -1467,7 +1746,7 @@ function LibraryResults(props) {
         className: partClass("list", classNames),
         style: LIST_STYLE,
         onKeyDown: roving.handleKeyDown,
-        children: items.map((record, index) => /* @__PURE__ */ jsx9(
+        children: items.map((record, index) => /* @__PURE__ */ jsx10(
           MediaLibraryItem,
           {
             ref: roving.itemRef(index),
@@ -1486,7 +1765,7 @@ function LibraryResults(props) {
         ))
       }
     ),
-    canLoadMore && /* @__PURE__ */ jsx9(
+    canLoadMore && /* @__PURE__ */ jsx10(
       "button",
       {
         type: "button",
@@ -1498,7 +1777,7 @@ function LibraryResults(props) {
     )
   ] });
 }
-var LibraryErrorBoundary = class extends React15.Component {
+var LibraryErrorBoundary = class extends React17.Component {
   state = { hasError: false, error: null };
   static getDerivedStateFromError(error) {
     return { hasError: true, error };
@@ -1540,7 +1819,7 @@ function useMediaObjectUrl(media, options) {
 }
 
 // src/media-picker.tsx
-import React22 from "react";
+import React24 from "react";
 
 // src/media-picker-accept.ts
 function matchesAccept(candidate, accept) {
@@ -1580,10 +1859,10 @@ function recordMatchesAccept(record, accept) {
 }
 
 // src/media-picker-context.ts
-import React16 from "react";
-var MediaPickerContext = /* @__PURE__ */ React16.createContext(null);
+import React18 from "react";
+var MediaPickerContext = /* @__PURE__ */ React18.createContext(null);
 function useMediaPicker() {
-  const picker = React16.use(MediaPickerContext);
+  const picker = React18.use(MediaPickerContext);
   if (!picker) throw new Error("useMediaPicker must be used within <MediaPicker>");
   return picker;
 }
@@ -1624,17 +1903,17 @@ function mergeMediaPickerLabels(labels) {
 }
 
 // src/media-picker-library.tsx
-import React17 from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import React19 from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function MediaPickerLibrary(props) {
   const picker = useMediaPicker();
   const { accept, toggle } = picker;
   const selectedKeys = picker.selected.map((media) => media.id);
-  const filter = React17.useMemo(
+  const filter = React19.useMemo(
     () => accept ? (record) => recordMatchesAccept(record, accept) : void 0,
     [accept]
   );
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     MediaLibrary,
     {
       ...props,
@@ -1651,15 +1930,15 @@ function MediaPickerLibrary(props) {
 }
 
 // src/media-picker-selection.tsx
-import React19 from "react";
+import React21 from "react";
 
 // src/preview.tsx
-import { mediaPath as mediaPath2 } from "@devultur/core";
+import { mediaPath as mediaPath4 } from "@devultur/core";
 
 // src/video-preview.tsx
-import React18 from "react";
+import React20 from "react";
 import { VideoPlayer } from "@devultur/react";
-import { Fragment as Fragment6, jsx as jsx11 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx12 } from "react/jsx-runtime";
 var UNAUTHORIZED = 401;
 var HLS_NETWORK_FAILURE = /Load(Error|TimeOut)$/;
 function fetchErrorOf(error) {
@@ -1674,10 +1953,10 @@ function fetchErrorOf(error) {
 function VideoPreview({ media, renderFallback, loading, metrics, className }) {
   const { token, tokenStatus, tokenError, reissueToken } = useDevultur();
   const videoProps = useVideoProps(media);
-  const [failure, setFailure] = React18.useState(null);
-  const hasReissuedRef = React18.useRef(false);
+  const [failure, setFailure] = React20.useState(null);
+  const hasReissuedRef = React20.useRef(false);
   const playerToken = videoProps?.token;
-  const handleError = React18.useCallback(
+  const handleError = React20.useCallback(
     (error) => {
       const isFirstMismatch = error.code === "session_mismatch" && !hasReissuedRef.current;
       if (isFirstMismatch) {
@@ -1691,14 +1970,14 @@ function VideoPreview({ media, renderFallback, loading, metrics, className }) {
   );
   if (!videoProps) return null;
   const isPrivate = media.visibility === "private";
-  if (isPrivate && tokenStatus === "error") return /* @__PURE__ */ jsx11(Fragment6, { children: renderFallback(tokenUnavailableError(tokenError)) });
-  if (isPrivate && !token) return /* @__PURE__ */ jsx11(Fragment6, { children: loading });
-  if (failure && failure.token === playerToken) return /* @__PURE__ */ jsx11(Fragment6, { children: renderFallback(failure.error) });
-  return /* @__PURE__ */ jsx11(VideoPlayer, { ...videoProps, className, metrics, onError: handleError });
+  if (isPrivate && tokenStatus === "error") return /* @__PURE__ */ jsx12(Fragment6, { children: renderFallback(tokenUnavailableError(tokenError)) });
+  if (isPrivate && !token) return /* @__PURE__ */ jsx12(Fragment6, { children: loading });
+  if (failure && failure.token === playerToken) return /* @__PURE__ */ jsx12(Fragment6, { children: renderFallback(failure.error) });
+  return /* @__PURE__ */ jsx12(VideoPlayer, { ...videoProps, className, metrics, onError: handleError });
 }
 
 // src/preview.tsx
-import { Fragment as Fragment7, jsx as jsx12 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx13 } from "react/jsx-runtime";
 var DEFAULT_MAX_TEXT_BYTES = 1024 * 1024;
 var DEFAULT_MAX_BYTES = 50 * 1024 * 1024;
 function Preview({ media, contentType, fallback, loading, labels, metrics, ...viewProps }) {
@@ -1708,11 +1987,11 @@ function Preview({ media, contentType, fallback, loading, labels, metrics, ...vi
     const fetchError = error instanceof MediaFetchError ? error : networkError(error);
     if (typeof fallback === "function") return fallback(fetchError);
     if (fallback !== void 0) return fallback;
-    return /* @__PURE__ */ jsx12(DefaultFallback, { media, error: fetchError, labels: text });
+    return /* @__PURE__ */ jsx13(DefaultFallback, { media, error: fetchError, labels: text });
   };
-  const loadingNode = loading === void 0 ? /* @__PURE__ */ jsx12(LoadingStatus, { text: text.loading }) : loading;
+  const loadingNode = loading === void 0 ? /* @__PURE__ */ jsx13(LoadingStatus, { text: text.loading }) : loading;
   if (media.kind === "video") {
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       VideoPreview,
       {
         media,
@@ -1721,23 +2000,23 @@ function Preview({ media, contentType, fallback, loading, labels, metrics, ...vi
         metrics,
         className: viewProps.className
       },
-      mediaPath2(media)
+      mediaPath4(media)
     );
   }
   const expectedType = expectedContentType(media, contentType);
   const kind = previewKindOf(expectedType);
-  if (!expectedType || !kind) return /* @__PURE__ */ jsx12(Fragment7, { children: renderFallback(unsupportedType(expectedType)) });
+  if (!expectedType || !kind) return /* @__PURE__ */ jsx13(Fragment7, { children: renderFallback(unsupportedType(expectedType)) });
   const props = { ...viewProps, media, expectedType, renderFallback, loading: loadingNode, labels: text };
-  if (kind === "text") return /* @__PURE__ */ jsx12(TextPreview, { ...props });
-  if (kind === "pdf") return /* @__PURE__ */ jsx12(PdfPreview, { ...props, maxBytes: props.maxBytes ?? DEFAULT_MAX_BYTES });
-  return /* @__PURE__ */ jsx12(BinaryPreview, { ...props, kind });
+  if (kind === "text") return /* @__PURE__ */ jsx13(TextPreview, { ...props });
+  if (kind === "pdf") return /* @__PURE__ */ jsx13(PdfPreview, { ...props, maxBytes: props.maxBytes ?? DEFAULT_MAX_BYTES });
+  return /* @__PURE__ */ jsx13(BinaryPreview, { ...props, kind });
 }
 var unsupportedType = (contentType) => new MediaFetchError("unsupported_type", `Can't preview ${contentType ?? "an unknown type"} inline`);
 function DefaultFallback({ media, error, labels }) {
-  return /* @__PURE__ */ jsx12(DownloadLink, { media, title: labels.error(error.code), children: media.filename ?? labels.download });
+  return /* @__PURE__ */ jsx13(DownloadLink, { media, title: labels.error(error.code), children: media.filename ?? labels.download });
 }
 function LoadingStatus({ text }) {
-  return /* @__PURE__ */ jsx12("span", { role: "status", style: VISUALLY_HIDDEN, children: text });
+  return /* @__PURE__ */ jsx13("span", { role: "status", style: VISUALLY_HIDDEN, children: text });
 }
 function BinaryPreview({
   media,
@@ -1754,13 +2033,13 @@ function BinaryPreview({
   const isPublicImage = kind === "image" && media.visibility === "public";
   const verified = useMediaObjectUrl(media, { enabled: !isPublicImage, contentType: expectedType, maxBytes });
   const objectUrl = isPublicImage ? url(media) : verified.objectUrl;
-  if (verified.error) return /* @__PURE__ */ jsx12(Fragment7, { children: renderFallback(verified.error) });
-  if (!objectUrl) return /* @__PURE__ */ jsx12(Fragment7, { children: loading });
+  if (verified.error) return /* @__PURE__ */ jsx13(Fragment7, { children: renderFallback(verified.error) });
+  if (!objectUrl) return /* @__PURE__ */ jsx13(Fragment7, { children: loading });
   const label = title ?? media.filename ?? labels.untitledMedia;
   if (kind === "image") {
-    return /* @__PURE__ */ jsx12("img", { src: objectUrl, alt: label, width: media.width, height: media.height, className });
+    return /* @__PURE__ */ jsx13("img", { src: objectUrl, alt: label, width: media.width, height: media.height, className });
   }
-  return /* @__PURE__ */ jsx12("audio", { src: objectUrl, controls: true, "aria-label": label, className });
+  return /* @__PURE__ */ jsx13("audio", { src: objectUrl, controls: true, "aria-label": label, className });
 }
 var decodeText = (bytes) => new TextDecoder().decode(bytes);
 function TextPreview({
@@ -1778,19 +2057,19 @@ function TextPreview({
     contentType: expectedType,
     decode: decodeText
   });
-  if (error) return /* @__PURE__ */ jsx12(Fragment7, { children: renderFallback(error) });
-  if (text === null) return /* @__PURE__ */ jsx12(Fragment7, { children: loading });
-  return /* @__PURE__ */ jsx12("pre", { title, className, children: text });
+  if (error) return /* @__PURE__ */ jsx13(Fragment7, { children: renderFallback(error) });
+  if (text === null) return /* @__PURE__ */ jsx13(Fragment7, { children: loading });
+  return /* @__PURE__ */ jsx13("pre", { title, className, children: text });
 }
 
 // src/media-picker-selection.tsx
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
 var THUMBNAIL_WIDTH2 = 96;
 function MediaPickerSelection({ renderItem, headingLevel = 3, className }) {
   const picker = useMediaPicker();
   const { labels, selected } = picker;
-  const headingId = React19.useId();
-  const [previewedId, setPreviewedId] = React19.useState(null);
+  const headingId = React21.useId();
+  const [previewedId, setPreviewedId] = React21.useState(null);
   const Heading = `h${headingLevel}`;
   const cardHeadingLevel = headingLevel + 1;
   const regionClass = className ? `devultur-media-picker__selection ${className}` : "devultur-media-picker__selection";
@@ -1803,21 +2082,21 @@ function MediaPickerSelection({ renderItem, headingLevel = 3, className }) {
       "aria-labelledby": headingId,
       className: regionClass,
       children: [
-        /* @__PURE__ */ jsx13(Heading, { id: headingId, children: labels.selection }),
-        selected.length === 0 && /* @__PURE__ */ jsx13("p", { "data-part": "empty", children: labels.empty }),
-        selected.length > 0 && /* @__PURE__ */ jsx13("ul", { "data-part": "items", children: selected.map((media) => /* @__PURE__ */ jsxs7("li", { "data-kind": media.kind, children: [
-          renderItem ? renderItem(media) : /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(Heading, { id: headingId, children: labels.selection }),
+        selected.length === 0 && /* @__PURE__ */ jsx14("p", { "data-part": "empty", children: labels.empty }),
+        selected.length > 0 && /* @__PURE__ */ jsx14("ul", { "data-part": "items", children: selected.map((media) => /* @__PURE__ */ jsxs7("li", { "data-kind": media.kind, children: [
+          renderItem ? renderItem(media) : /* @__PURE__ */ jsx14(
             AttachmentCard,
             {
               media,
               headingLevel: cardHeadingLevel,
               labels: picker.attachmentLabels,
-              preview: media.kind === "image" ? /* @__PURE__ */ jsx13(Thumbnail2, { media }) : void 0,
+              preview: media.kind === "image" ? /* @__PURE__ */ jsx14(Thumbnail2, { media }) : void 0,
               onOpen: handleOpen
             }
           ),
-          previewedId === media.id && /* @__PURE__ */ jsx13(Preview, { media, title: mediaName(media) }),
-          /* @__PURE__ */ jsx13(
+          previewedId === media.id && /* @__PURE__ */ jsx14(Preview, { media, title: mediaName(media) }),
+          /* @__PURE__ */ jsx14(
             "button",
             {
               type: "button",
@@ -1827,13 +2106,13 @@ function MediaPickerSelection({ renderItem, headingLevel = 3, className }) {
             }
           )
         ] }, media.id)) }),
-        /* @__PURE__ */ jsx13(SelectionActions, {})
+        /* @__PURE__ */ jsx14(SelectionActions, {})
       ]
     }
   );
 }
 function Thumbnail2({ media }) {
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     Image,
     {
       media,
@@ -1850,18 +2129,18 @@ function SelectionActions() {
   const { labels } = picker;
   if (picker.selected.length === 0) return null;
   return /* @__PURE__ */ jsxs7("div", { "data-part": "actions", children: [
-    !picker.multiple && /* @__PURE__ */ jsx13("button", { type: "button", "data-part": "replace", onClick: picker.openFileDialog, children: labels.replace }),
-    /* @__PURE__ */ jsx13("button", { type: "button", "data-part": "clear", onClick: picker.clear, children: labels.clear })
+    !picker.multiple && /* @__PURE__ */ jsx14("button", { type: "button", "data-part": "replace", onClick: picker.openFileDialog, children: labels.replace }),
+    /* @__PURE__ */ jsx14("button", { type: "button", "data-part": "clear", onClick: picker.clear, children: labels.clear })
   ] });
 }
 
 // src/media-picker-upload.tsx
-import React20 from "react";
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import React22 from "react";
+import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 function MediaPickerUpload({ className }) {
   const picker = useMediaPicker();
   const { labels, multiple } = picker;
-  const [isDragging, setIsDragging] = React20.useState(false);
+  const [isDragging, setIsDragging] = React22.useState(false);
   const handleDragOver = (event) => {
     event.preventDefault();
     setIsDragging(true);
@@ -1888,9 +2167,9 @@ function MediaPickerUpload({ className }) {
         onDragLeave: handleDragLeave,
         onDrop: handleDrop,
         children: [
-          /* @__PURE__ */ jsx14("button", { type: "button", "data-part": "upload", onClick: picker.openFileDialog, children: labels.upload(multiple) }),
-          /* @__PURE__ */ jsx14("span", { "data-part": "drop-hint", children: labels.dropHint(multiple) }),
-          picker.uploads.length > 0 && /* @__PURE__ */ jsx14("ul", { "aria-label": labels.uploads, "data-part": "uploads", children: picker.uploads.map((upload) => /* @__PURE__ */ jsx14(UploadRow, { upload }, upload.id)) })
+          /* @__PURE__ */ jsx15("button", { type: "button", "data-part": "upload", onClick: picker.openFileDialog, children: labels.upload(multiple) }),
+          /* @__PURE__ */ jsx15("span", { "data-part": "drop-hint", children: labels.dropHint(multiple) }),
+          picker.uploads.length > 0 && /* @__PURE__ */ jsx15("ul", { "aria-label": labels.uploads, "data-part": "uploads", children: picker.uploads.map((upload) => /* @__PURE__ */ jsx15(UploadRow, { upload }, upload.id)) })
         ]
       }
     )
@@ -1902,23 +2181,23 @@ function UploadRow({ upload }) {
   const filename = upload.file.name;
   if (upload.status === "failed") {
     return /* @__PURE__ */ jsxs8("li", { "data-status": "failed", children: [
-      /* @__PURE__ */ jsx14("span", { "data-part": "filename", children: filename }),
-      /* @__PURE__ */ jsx14("span", { role: "alert", "data-part": "error", children: upload.error }),
-      upload.canRetry && /* @__PURE__ */ jsx14("button", { type: "button", onClick: () => picker.retry(upload.id), children: labels.retry }),
-      /* @__PURE__ */ jsx14("button", { type: "button", onClick: () => picker.dismiss(upload.id), children: labels.dismiss })
+      /* @__PURE__ */ jsx15("span", { "data-part": "filename", children: filename }),
+      /* @__PURE__ */ jsx15("span", { role: "alert", "data-part": "error", children: upload.error }),
+      upload.canRetry && /* @__PURE__ */ jsx15("button", { type: "button", onClick: () => picker.retry(upload.id), children: labels.retry }),
+      /* @__PURE__ */ jsx15("button", { type: "button", onClick: () => picker.dismiss(upload.id), children: labels.dismiss })
     ] });
   }
   const percent = Math.round(upload.fraction * 100);
   return /* @__PURE__ */ jsxs8("li", { "data-status": "uploading", children: [
-    /* @__PURE__ */ jsx14("span", { "data-part": "filename", children: filename }),
-    /* @__PURE__ */ jsx14("progress", { max: 100, value: percent, "aria-label": labels.progress(filename) }),
-    /* @__PURE__ */ jsx14("span", { "data-part": "percent", children: labels.percent(percent) }),
-    /* @__PURE__ */ jsx14("button", { type: "button", "aria-label": labels.cancelUpload(filename), onClick: () => picker.cancel(upload.id), children: labels.cancel })
+    /* @__PURE__ */ jsx15("span", { "data-part": "filename", children: filename }),
+    /* @__PURE__ */ jsx15("progress", { max: 100, value: percent, "aria-label": labels.progress(filename) }),
+    /* @__PURE__ */ jsx15("span", { "data-part": "percent", children: labels.percent(percent) }),
+    /* @__PURE__ */ jsx15("button", { type: "button", "aria-label": labels.cancelUpload(filename), onClick: () => picker.cancel(upload.id), children: labels.cancel })
   ] });
 }
 
 // src/use-media-picker-uploads.ts
-import React21 from "react";
+import React23 from "react";
 var isAbortError = (error) => typeof error === "object" && error !== null && error.name === "AbortError";
 var isPdf = (file) => file.type === "application/pdf" || file.name.toLowerCase().endsWith(".pdf");
 var nextUploadId = 0;
@@ -1929,18 +2208,18 @@ async function pageCountOf(file, countPdfPages) {
 }
 function useMediaPickerUploads(options) {
   const { upload } = useDevultur();
-  const [uploads, setUploads] = React21.useState([]);
-  const controllers = React21.useRef(/* @__PURE__ */ new Map());
-  const optionsRef = React21.useRef(options);
+  const [uploads, setUploads] = React23.useState([]);
+  const controllers = React23.useRef(/* @__PURE__ */ new Map());
+  const optionsRef = React23.useRef(options);
   optionsRef.current = options;
-  const patch = React21.useCallback((id, changes) => {
+  const patch = React23.useCallback((id, changes) => {
     setUploads((current) => current.map((entry) => entry.id === id ? { ...entry, ...changes } : entry));
   }, []);
-  const drop = React21.useCallback((id) => {
+  const drop = React23.useCallback((id) => {
     controllers.current.delete(id);
     setUploads((current) => current.filter((entry) => entry.id !== id));
   }, []);
-  const run = React21.useCallback(
+  const run = React23.useCallback(
     async (id, file) => {
       const { labels, announce } = optionsRef.current;
       const controller = new AbortController();
@@ -1970,7 +2249,7 @@ function useMediaPickerUploads(options) {
     },
     [upload, patch, drop]
   );
-  const start = React21.useCallback(
+  const start = React23.useCallback(
     (files) => {
       const { accept, multiple, labels } = optionsRef.current;
       const chosen = multiple ? [...files] : [...files].slice(0, 1);
@@ -1992,8 +2271,8 @@ function useMediaPickerUploads(options) {
     },
     [run]
   );
-  const cancel = React21.useCallback((id) => controllers.current.get(id)?.abort(), []);
-  const retry = React21.useCallback(
+  const cancel = React23.useCallback((id) => controllers.current.get(id)?.abort(), []);
+  const retry = React23.useCallback(
     (id) => {
       const entry = uploads.find((candidate) => candidate.id === id);
       if (!entry?.canRetry) return;
@@ -2001,7 +2280,7 @@ function useMediaPickerUploads(options) {
     },
     [uploads, run]
   );
-  React21.useEffect(() => {
+  React23.useEffect(() => {
     const active = controllers.current;
     return () => {
       for (const controller of active.values()) controller.abort();
@@ -2011,7 +2290,7 @@ function useMediaPickerUploads(options) {
 }
 
 // src/media-picker.tsx
-import { Fragment as Fragment8, jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 var EMPTY = [];
 function selectionOf(props) {
   if (props.value === void 0) return void 0;
@@ -2028,22 +2307,22 @@ function emit(props, next) {
 var isSame = (a, b) => a.id === b.id;
 function MediaPickerRoot(props) {
   const isMultiple = props.multiple ?? false;
-  const labels = React22.useMemo(() => mergeMediaPickerLabels(props.labels), [props.labels]);
+  const labels = React24.useMemo(() => mergeMediaPickerLabels(props.labels), [props.labels]);
   const accept = uploadAcceptOf(props.accept, props.type);
   const libraryType = props.type ?? mediaTypeOfAccept(props.accept);
   const countPdfPages = usePdfPageCounter();
-  const [announcement, setAnnouncement] = React22.useState("");
-  const inputRef = React22.useRef(null);
-  const selectionRef = React22.useRef(null);
-  const [ownSelection, setOwnSelection] = React22.useState(EMPTY);
+  const [announcement, setAnnouncement] = React24.useState("");
+  const inputRef = React24.useRef(null);
+  const selectionRef = React24.useRef(null);
+  const [ownSelection, setOwnSelection] = React24.useState(EMPTY);
   const controlledSelection = selectionOf(props);
   const selected = controlledSelection ?? ownSelection;
-  const selectedRef = React22.useRef(selected);
+  const selectedRef = React24.useRef(selected);
   selectedRef.current = selected;
-  const propsRef = React22.useRef(props);
+  const propsRef = React24.useRef(props);
   propsRef.current = props;
   const isControlled = controlledSelection !== void 0;
-  const commit = React22.useCallback(
+  const commit = React24.useCallback(
     (next) => {
       selectedRef.current = next;
       if (!isControlled) setOwnSelection(next);
@@ -2051,15 +2330,15 @@ function MediaPickerRoot(props) {
     },
     [isControlled]
   );
-  const announce = React22.useCallback((message) => setAnnouncement(message), []);
-  const select = React22.useCallback(
+  const announce = React24.useCallback((message) => setAnnouncement(message), []);
+  const select = React24.useCallback(
     (media) => {
       const current = selectedRef.current.filter((item) => !isSame(item, media));
       commit(isMultiple ? [...current, media] : [media]);
     },
     [commit, isMultiple]
   );
-  const remove = React22.useCallback(
+  const remove = React24.useCallback(
     (media) => {
       commit(selectedRef.current.filter((item) => !isSame(item, media)));
       announce(labels.removed(mediaName(media)));
@@ -2067,7 +2346,7 @@ function MediaPickerRoot(props) {
     },
     [commit, announce, labels]
   );
-  const toggle = React22.useCallback(
+  const toggle = React24.useCallback(
     (media) => {
       const isSelected = selectedRef.current.some((item) => isSame(item, media));
       if (isMultiple && isSelected) {
@@ -2079,12 +2358,12 @@ function MediaPickerRoot(props) {
     },
     [isMultiple, remove, select, announce, labels]
   );
-  const clear = React22.useCallback(() => {
+  const clear = React24.useCallback(() => {
     commit([]);
     announce(labels.cleared);
     selectionRef.current?.focus();
   }, [commit, announce, labels]);
-  const handleUploaded = React22.useCallback(
+  const handleUploaded = React24.useCallback(
     (media) => {
       select(media);
       selectionRef.current?.focus();
@@ -2122,13 +2401,13 @@ function MediaPickerRoot(props) {
     selectionRef
   };
   const content = typeof props.children === "function" ? props.children(picker) : props.children ?? /* @__PURE__ */ jsxs9(Fragment8, { children: [
-    /* @__PURE__ */ jsx15(MediaPickerUpload, {}),
-    /* @__PURE__ */ jsx15(MediaPickerLibrary, {}),
-    /* @__PURE__ */ jsx15(MediaPickerSelection, {})
+    /* @__PURE__ */ jsx16(MediaPickerUpload, {}),
+    /* @__PURE__ */ jsx16(MediaPickerLibrary, {}),
+    /* @__PURE__ */ jsx16(MediaPickerSelection, {})
   ] });
   const rootClass = props.className ? `devultur-media-picker ${props.className}` : "devultur-media-picker";
-  return /* @__PURE__ */ jsx15(MediaPickerContext, { value: picker, children: /* @__PURE__ */ jsxs9("div", { className: rootClass, children: [
-    /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(MediaPickerContext, { value: picker, children: /* @__PURE__ */ jsxs9("div", { className: rootClass, children: [
+    /* @__PURE__ */ jsx16(
       "input",
       {
         ref: inputRef,
@@ -2143,7 +2422,7 @@ function MediaPickerRoot(props) {
       }
     ),
     content,
-    /* @__PURE__ */ jsx15("div", { role: "status", "aria-live": "polite", style: VISUALLY_HIDDEN, children: announcement })
+    /* @__PURE__ */ jsx16("div", { role: "status", "aria-live": "polite", style: VISUALLY_HIDDEN, children: announcement })
   ] }) });
 }
 var MediaPicker = /* @__PURE__ */ Object.assign(MediaPickerRoot, {
@@ -2154,9 +2433,9 @@ var MediaPicker = /* @__PURE__ */ Object.assign(MediaPickerRoot, {
 });
 
 // src/viewer-provider.tsx
-import React23 from "react";
-import { useAction } from "convex/react";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import React25 from "react";
+import { useAction as useAction2 } from "convex/react";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var VIEWER_ACTIONS = {
   uploadUrl: () => Promise.reject(new DevulturCapabilityError("uploadUrl")),
   upload: () => Promise.reject(new DevulturCapabilityError("upload")),
@@ -2166,15 +2445,15 @@ var VIEWER_ACTIONS = {
 };
 var NO_TOKEN_ACTION = () => Promise.reject(new Error("<DevulturViewerProvider> has no `issueViewerToken`: private media can't be shown"));
 function DevulturViewerProvider({ issueViewerToken, ...props }) {
-  if (!issueViewerToken) return /* @__PURE__ */ jsx16(ViewerSession, { ...props, issueViewerToken: NO_TOKEN_ACTION, lazyToken: true });
-  return /* @__PURE__ */ jsx16(ConvexViewerSession, { ...props, issueViewerToken });
+  if (!issueViewerToken) return /* @__PURE__ */ jsx17(ViewerSession, { ...props, issueViewerToken: NO_TOKEN_ACTION, lazyToken: true });
+  return /* @__PURE__ */ jsx17(ConvexViewerSession, { ...props, issueViewerToken });
 }
 function ConvexViewerSession({
   issueViewerToken,
   ...props
 }) {
-  const issueViewerTokenAction = useAction(issueViewerToken);
-  return /* @__PURE__ */ jsx16(ViewerSession, { issueViewerToken: issueViewerTokenAction, ...props });
+  const issueViewerTokenAction = useAction2(issueViewerToken);
+  return /* @__PURE__ */ jsx17(ViewerSession, { issueViewerToken: issueViewerTokenAction, ...props });
 }
 function ViewerSession({
   baseUrl,
@@ -2184,28 +2463,27 @@ function ViewerSession({
   children
 }) {
   const session = useMediaSession({ issueViewerToken, tokenArgs, baseUrl, isLazy: lazyToken });
-  const devulturValue = React23.useMemo(() => ({ ...session, ...VIEWER_ACTIONS }), [session]);
-  return /* @__PURE__ */ jsx16(DevulturContext, { value: devulturValue, children });
+  const devulturValue = React25.useMemo(() => ({ ...session, ...VIEWER_ACTIONS }), [session]);
+  return /* @__PURE__ */ jsx17(DevulturContext, { value: devulturValue, children });
 }
 
 // src/react.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
-var ProgressContext = /* @__PURE__ */ React24.createContext(null);
+import { jsx as jsx18 } from "react/jsx-runtime";
 function DevulturProvider({ api, baseUrl, tokenArgs, issueViewerToken, children }) {
-  const issueViewerTokenAction = useAction2(issueViewerToken ?? api.issueViewerToken);
+  const issueViewerTokenAction = useAction3(issueViewerToken ?? api.issueViewerToken);
   const session = useMediaSession({ issueViewerToken: issueViewerTokenAction, tokenArgs, baseUrl });
-  const createUploadUrlAction = useAction2(api.createUploadUrl);
-  const deleteMediaAction = useAction2(api.deleteMedia);
-  const confirmUploadAction = useAction2(api.confirmUpload ?? api.createUploadUrl);
-  const deleteVideoAction = useAction2(api.deleteVideo ?? api.deleteMedia);
-  const uploadUrl = React24.useCallback(
+  const createUploadUrlAction = useAction3(api.createUploadUrl);
+  const deleteMediaAction = useAction3(api.deleteMedia);
+  const confirmUploadAction = useAction3(api.confirmUpload ?? api.createUploadUrl);
+  const deleteVideoAction = useAction3(api.deleteVideo ?? api.deleteMedia);
+  const uploadUrl = React26.useCallback(
     async (file) => {
       const result = await createUploadUrlAction({ filename: file.name, contentType: file.type });
       return { url: result.url, key: result.key };
     },
     [createUploadUrlAction]
   );
-  const upload = React24.useCallback(
+  const upload = React26.useCallback(
     async (file, options) => {
       const dimensions = await readImageDimensions(file);
       options?.signal?.throwIfAborted();
@@ -2214,7 +2492,7 @@ function DevulturProvider({ api, baseUrl, tokenArgs, issueViewerToken, children
         contentType: file.type,
         visibility: options?.visibility
       });
-      await uploadFileWithProgress(target.url, file, { onBytes: options?.onProgress, signal: options?.signal });
+      await uploadFileWithProgress2(target.url, file, { onBytes: options?.onProgress, signal: options?.signal });
       if (api.confirmUpload) {
         const pageCount = options?.pageCount;
         const hints = { ...dimensions, ...pageCount !== void 0 ? { pageCount } : {} };
@@ -2231,23 +2509,23 @@ function DevulturProvider({ api, baseUrl, tokenArgs, issueViewerToken, children
     },
     [createUploadUrlAction, confirmUploadAction, api.confirmUpload]
   );
-  const deleteMedia = React24.useCallback(
+  const deleteMedia = React26.useCallback(
     (media) => {
       if (media.kind === "video" && api.deleteVideo) {
         deleteVideoAction({ videoId: media.id, visibility: media.visibility }).catch(console.error);
         return;
       }
-      deleteMediaAction({ key: mediaPath3(media) }).catch(console.error);
+      deleteMediaAction({ key: mediaPath5(media) }).catch(console.error);
     },
     [deleteMediaAction, deleteVideoAction, api.deleteVideo]
   );
-  const devulturValue = React24.useMemo(
+  const devulturValue = React26.useMemo(
     () => ({ ...session, uploadUrl, upload, deleteMedia }),
     [session, uploadUrl, upload, deleteMedia]
   );
-  let content = /* @__PURE__ */ jsx17(DevulturApiContext, { value: api, children: /* @__PURE__ */ jsx17(DevulturContext, { value: devulturValue, children }) });
+  let content = /* @__PURE__ */ jsx18(DevulturApiContext, { value: api, children: /* @__PURE__ */ jsx18(DevulturContext, { value: devulturValue, children }) });
   if (api.saveProgress && api.loadProgress && api.markComplete && api.resetProgress) {
-    content = /* @__PURE__ */ jsx17(
+    content = /* @__PURE__ */ jsx18(
       ProgressBridge,
       {
         save: api.saveProgress,
@@ -2271,13 +2549,13 @@ function ProgressBridge({
   const saveMutation = useMutation(save);
   const markCompleteMutation = useMutation(markComplete);
   const resetMutation = useMutation(reset);
-  const onSave = React24.useCallback(
+  const onSave = React26.useCallback(
     async (videoId, position) => {
       await saveMutation({ videoId, position });
     },
     [saveMutation]
   );
-  const onLoad = React24.useCallback(
+  const onLoad = React26.useCallback(
     async (videoId) => {
       const result = await convex.query(load, { videoId });
       if (!result) return null;
@@ -2288,354 +2566,31 @@ function ProgressBridge({
     },
     [convex, load]
   );
-  const onMarkComplete = React24.useCallback(
+  const onMarkComplete = React26.useCallback(
     async (videoId) => {
       await markCompleteMutation({ videoId });
     },
     [markCompleteMutation]
   );
-  const onReset = React24.useCallback(
+  const onReset = React26.useCallback(
     async (videoId) => {
       await resetMutation({ videoId });
     },
     [resetMutation]
   );
-  const value = React24.useMemo(
+  const value = React26.useMemo(
     () => ({ save: onSave, load: onLoad, markComplete: onMarkComplete, reset: onReset }),
     [onSave, onLoad, onMarkComplete, onReset]
   );
-  return /* @__PURE__ */ jsx17(ProgressContext, { value, children });
-}
-function useDevulturProgress() {
-  const context = React24.use(ProgressContext);
-  if (!context) throw new Error("useDevulturProgress requires progress API in DevulturProvider");
-  return context;
-}
-function useMediaUrl(key, options) {
-  const devultur = useDevultur();
-  const { token, baseUrl } = devultur;
-  useRequestTokenWhen(devultur, Boolean(key) && visibilityFromKey(key ?? "") !== "public");
-  return React24.useMemo(() => {
-    if (!key) return null;
-    if (!baseUrl) throw new Error("useMediaUrl requires `baseUrl` on <DevulturProvider>");
-    const isPublic = visibilityFromKey(key) === "public";
-    return buildMediaUrl2(baseUrl, key, { ...options, token: isPublic ? void 0 : token ?? void 0 });
-  }, [key, baseUrl, token, options]);
-}
-async function confirmUploadBestEffort(confirmUpload, key, file, hints) {
-  try {
-    await confirmUpload({ key, filename: file.name, ...hints });
-  } catch (error) {
-    console.warn("Devultur: could not record the upload; it is recorded later", error);
-  }
-}
-async function readImageDimensions(file) {
-  if (typeof createImageBitmap !== "function" || !file.type.startsWith("image/")) return {};
-  try {
-    const bitmap = await createImageBitmap(file);
-    const dimensions = { width: bitmap.width, height: bitmap.height };
-    bitmap.close();
-    return dimensions;
-  } catch {
-    return {};
-  }
-}
-function useVideoProps(media, options) {
-  const devultur = useDevultur();
-  const { token, baseUrl, sessionSecret } = devultur;
-  useRequestTokenWhen(devultur, media?.kind === "video" && media.visibility === "private");
-  const locales = options?.locales;
-  return React24.useMemo(() => {
-    if (media?.kind !== "video") return null;
-    if (!baseUrl) throw new Error("useVideoProps requires `baseUrl` on <DevulturProvider>");
-    const viewerToken = media.visibility === "private" ? token ?? void 0 : void 0;
-    const captions = (locales ?? []).flatMap((locale) => {
-      const path = mediaCaptionPath2(media, locale);
-      if (!path) return [];
-      const label = CaptionLocaleLabel[locale] ?? locale;
-      return [{ locale, label, src: buildMediaUrl2(baseUrl, path, { token: viewerToken }) }];
-    });
-    return {
-      src: buildMediaUrl2(baseUrl, mediaPath3(media), { token: viewerToken }),
-      token: viewerToken,
-      captions,
-      sessionSecret: media.visibility === "private" ? sessionSecret : void 0
-    };
-  }, [media, baseUrl, token, locales, sessionSecret]);
-}
-function DownloadLink({ media, filename, onDownloadError, children, ...anchorProps }) {
-  const devultur = useDevultur();
-  const { url, token, tokenStatus, tokenError, baseUrl, sessionSecret, reissueToken } = devultur;
-  useRequestTokenWhen(devultur, media?.visibility === "private");
-  const handleClick = React24.useCallback(
-    async (event) => {
-      if (media?.visibility !== "private" || !baseUrl) return;
-      event.preventDefault();
-      if (tokenStatus === "error") {
-        onDownloadError?.(tokenUnavailableError(tokenError));
-        return;
-      }
-      const response = await fetchMedia({
-        buildUrl: (viewerToken) => mediaUrl4(baseUrl, media, { download: filename ?? true, token: viewerToken }),
-        token,
-        sessionSecret,
-        reissueToken
-      });
-      if (!response.ok) {
-        const status = response.status;
-        onDownloadError?.(new MediaFetchError("http_error", `Media fetch failed: ${status}`, status));
-        return;
-      }
-      const objectUrl = URL.createObjectURL(await response.blob());
-      const anchor = document.createElement("a");
-      anchor.href = objectUrl;
-      anchor.download = filename ?? media.filename ?? "download";
-      anchor.click();
-      URL.revokeObjectURL(objectUrl);
-    },
-    [media, baseUrl, token, tokenStatus, tokenError, filename, sessionSecret, reissueToken, onDownloadError]
-  );
-  if (!media) return null;
-  return /* @__PURE__ */ jsx17("a", { href: url(media, { download: filename ?? true }), download: true, ...anchorProps, onClick: handleClick, children });
-}
-function useDevulturMedia(key) {
-  const apiCtx = React24.use(DevulturApiContext);
-  if (!apiCtx?.getMedia) {
-    throw new Error("useDevulturMedia requires getMedia in DevulturProvider api");
-  }
-  const record = useQuery(apiCtx.getMedia, key ? { key } : "skip");
-  if (!record) {
-    return {
-      status: MediaStatus.IDLE,
-      progress: null,
-      error: null,
-      failureReason: null,
-      retriable: null,
-      isQueued: false,
-      isTranscoding: false,
-      isCaptioning: false,
-      isReady: false,
-      isFailed: false,
-      playlistUrl: null,
-      thumbnailKey: null,
-      captionLocales: [],
-      duration: null,
-      isLoading: record === void 0
-    };
-  }
-  const status = record.transcodeStatus ?? MediaStatus.IDLE;
-  const isReady = status === MediaStatus.READY;
-  const isFailed = status === MediaStatus.FAILED;
-  const progress = record.transcodeProgress ? {
-    current: record.transcodeProgress.current,
-    total: record.transcodeProgress.total,
-    percent: record.transcodeProgress.total > 0 ? Math.round(
-      record.transcodeProgress.current / record.transcodeProgress.total * 100
-    ) : 0,
-    phase: record.transcodeProgress.phase
-  } : null;
-  return {
-    status,
-    progress,
-    error: record.transcodeError ?? null,
-    failureReason: isFailed ? record.failureReason ?? "internal" : null,
-    retriable: isFailed ? record.retriable ?? true : null,
-    isQueued: status === MediaStatus.QUEUED,
-    isTranscoding: status === MediaStatus.TRANSCODING,
-    isCaptioning: status === MediaStatus.CAPTIONING,
-    isReady,
-    isFailed,
-    playlistUrl: record.playlistUrl ?? null,
-    thumbnailKey: record.thumbnailKey ?? null,
-    captionLocales: record.captionLocales ?? [],
-    duration: record.duration ?? null,
-    isLoading: false
-  };
-}
-function useVideoState(media, options) {
-  const devultur = useDevultur();
-  const { token, baseUrl, sessionSecret } = devultur;
-  useRequestTokenWhen(devultur, media?.kind === "video" && media.visibility === "private");
-  const status = useDevulturMedia(media?.kind === "video" ? media.id : null);
-  const locales = options?.locales;
-  return React24.useMemo(() => {
-    if (media?.kind !== "video") return { phase: "idle" };
-    if (status.isFailed) {
-      return {
-        phase: "failed",
-        reason: status.failureReason ?? "internal",
-        message: status.error ?? "Video processing failed",
-        retriable: status.retriable ?? true
-      };
-    }
-    if (status.isReady) {
-      if (!baseUrl) throw new Error("useVideoState requires `baseUrl` on <DevulturProvider>");
-      const viewerToken = media.visibility === "private" ? token ?? void 0 : void 0;
-      const playlist = buildMediaUrl2(baseUrl, mediaPath3(media), { token: viewerToken });
-      const captions = (locales ?? status.captionLocales).flatMap((locale) => {
-        const path = mediaCaptionPath2(media, locale);
-        if (!path) return [];
-        const label = CaptionLocaleLabel[locale] ?? locale;
-        return [{ locale, label, src: buildMediaUrl2(baseUrl, path, { token: viewerToken }) }];
-      });
-      return {
-        phase: "ready",
-        media,
-        playlist,
-        duration: status.duration ?? 0,
-        captions,
-        playerProps: {
-          src: playlist,
-          token: viewerToken,
-          captions,
-          sessionSecret: media.visibility === "private" ? sessionSecret : void 0
-        }
-      };
-    }
-    if (status.isQueued) return { phase: "queued" };
-    if (status.isTranscoding || status.isCaptioning) {
-      const step = status.progress?.phase ?? (status.isCaptioning ? "captioning" : "encoding");
-      return { phase: "processing", step, percent: status.progress?.percent ?? 0 };
-    }
-    return { phase: "idle" };
-  }, [media, status, baseUrl, token, locales, sessionSecret]);
-}
-function useMediaUpload(options) {
-  const { visibility, onComplete, onError, replaces, process, locales } = options ?? {};
-  const api = useDevulturApi();
-  const createUploadUrlAction = useAction2(api.createUploadUrl);
-  const deleteMediaAction = useAction2(api.deleteMedia);
-  const confirmUploadAction = useAction2(api.confirmUpload ?? api.createUploadUrl);
-  const processVideoAction = useAction2(api.processVideo ?? api.createUploadUrl);
-  const [phase, setPhase] = React24.useState("idle");
-  const [percent, setPercent] = React24.useState(0);
-  const [currentFile, setCurrentFile] = React24.useState(null);
-  const [media, setMedia] = React24.useState(null);
-  const [uploadFailure, setUploadFailure] = React24.useState(null);
-  const [processRequested, setProcessRequested] = React24.useState(false);
-  const abortRef = React24.useRef(null);
-  const lastFileRef = React24.useRef(null);
-  const lastKeyRef = React24.useRef(null);
-  const videoState = useVideoState(media, { locales });
-  const triggerProcess = React24.useCallback(
-    (key) => {
-      if (!api.processVideo) {
-        throw new Error("useMediaUpload: processing a video requires `processVideo` in the <DevulturProvider> api");
-      }
-      lastKeyRef.current = key;
-      setProcessRequested(true);
-      processVideoAction({ key }).catch((err) => {
-        console.error("useMediaUpload: could not request the transcode", err);
-      });
-    },
-    [api.processVideo, processVideoAction]
-  );
-  const runUpload = React24.useCallback(
-    async (file) => {
-      const controller = new AbortController();
-      abortRef.current = controller;
-      lastFileRef.current = file;
-      setUploadFailure(null);
-      setMedia(null);
-      setProcessRequested(false);
-      setCurrentFile(file);
-      setPercent(0);
-      setPhase("uploading");
-      const fail = (reason, message) => {
-        const failure = { stage: "upload", reason, retriable: true, message };
-        setUploadFailure(failure);
-        setPhase("upload-failed");
-        onError?.(failure);
-        return null;
-      };
-      let result;
-      try {
-        result = await createUploadUrlAction({
-          filename: file.name,
-          contentType: file.type,
-          visibility
-        });
-      } catch (err) {
-        return fail("rejected", err instanceof Error ? err.message : "Could not start the upload");
-      }
-      const dimensions = await readImageDimensions(file);
-      try {
-        await uploadFileWithProgress(result.url, file, { onProgress: setPercent, signal: controller.signal });
-      } catch (err) {
-        if (err instanceof DOMException && err.name === "AbortError") {
-          setPhase("idle");
-          setCurrentFile(null);
-          setPercent(0);
-          return null;
-        }
-        const rejected = err instanceof UploadHttpError && (err.status === 413 || err.status === 415);
-        return fail(rejected ? "rejected" : "network", err instanceof Error ? err.message : "The upload failed");
-      }
-      if (api.confirmUpload) await confirmUploadBestEffort(confirmUploadAction, result.key, file, dimensions);
-      const uploaded = {
-        id: result.id,
-        kind: result.kind,
-        visibility: result.visibility,
-        filename: file.name,
-        key: result.key,
-        ...dimensions
-      };
-      setMedia(uploaded);
-      setPhase("uploaded");
-      if (replaces) deleteMediaAction({ key: mediaPath3(replaces) }).catch(() => {
-      });
-      onComplete?.(uploaded);
-      if ((process ?? true) && uploaded.kind === "video") triggerProcess(result.key);
-      return uploaded;
-    },
-    [
-      createUploadUrlAction,
-      confirmUploadAction,
-      api.confirmUpload,
-      deleteMediaAction,
-      triggerProcess,
-      visibility,
-      replaces,
-      process,
-      onComplete,
-      onError
-    ]
-  );
-  const cancel = React24.useCallback(() => {
-    abortRef.current?.abort();
-  }, []);
-  const reset = React24.useCallback(() => {
-    abortRef.current?.abort();
-    setPhase("idle");
-    setPercent(0);
-    setCurrentFile(null);
-    setMedia(null);
-    setUploadFailure(null);
-    setProcessRequested(false);
-  }, []);
-  const retry = React24.useCallback(() => {
-    if (phase === "upload-failed" && lastFileRef.current) {
-      runUpload(lastFileRef.current);
-      return;
-    }
-    if (lastKeyRef.current) triggerProcess(lastKeyRef.current);
-  }, [phase, runUpload, triggerProcess]);
-  React24.useEffect(() => () => abortRef.current?.abort(), []);
-  const state = React24.useMemo(
-    () => deriveUploadState(
-      { phase, percent, file: currentFile, failure: uploadFailure, media, processRequested },
-      videoState,
-      retry
-    ),
-    [phase, percent, currentFile, uploadFailure, media, processRequested, videoState, retry]
-  );
-  const upload = React24.useCallback((file) => runUpload(file), [runUpload]);
-  return { upload, state, cancel, reset };
+  return /* @__PURE__ */ jsx18(DevulturProgressContext, { value, children });
 }
 export {
   AttachmentCard,
   CropUpload,
+  DevulturApiContext,
   DevulturCapabilityError,
+  DevulturContext,
+  DevulturProgressContext,
   DevulturProvider,
   DevulturViewerProvider,
   DocumentLink,