@devultur/convex 1.4.3 → 1.5.1

package/dist/react.js

@@ -24,39 +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 React22 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/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/media-fetch.ts
-import { SESSION_HEADER } from "@devultur/core";
 
 // src/image-recovery.ts
 async function isSessionMismatch(response) {
@@ -68,104 +63,6 @@ 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 React2 from "react";
-import {
-  buildMediaUrl,
-  mediaCaptionPath,
-  mediaUrl,
-  SESSION_HEADER as SESSION_HEADER2
-} from "@devultur/core";
-import { useAction } from "convex/react";
-
 // src/viewer-token.ts
 import React from "react";
 import { DEFAULT_TOKEN_EXPIRY_SECONDS } from "@devultur/core";
@@ -193,21 +90,25 @@ function sortKeys(json) {
 function tokenArgsKey(tokenArgs) {
   return JSON.stringify(sortKeys(convexToJson(tokenArgs ?? {})));
 }
-function useViewerToken({ issueViewerToken, sessionSecret, tokenArgs }) {
+function useViewerToken({ issueViewerToken, sessionSecret, tokenArgs, isLazy = false }) {
   const argsKey = tokenArgsKey(tokenArgs);
   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 = React.useRef(argsKey);
   const refreshTimerRef = React.useRef(null);
   const inFlightRef = React.useRef(null);
+  const isMountedRef = React.useRef(true);
   React.useEffect(() => {
     currentArgsKeyRef.current = argsKey;
   }, [argsKey]);
   React.useEffect(() => {
+    isMountedRef.current = true;
     return () => {
+      isMountedRef.current = false;
       if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
     };
   }, []);
@@ -216,7 +117,7 @@ function useViewerToken({ issueViewerToken, sessionSecret, tokenArgs }) {
       request().catch((error) => console.warn("Devultur: could not renew the viewer token", error));
     };
     const result = await issueViewerToken({ ...stableArgs, sessionSecret });
-    if (currentArgsKeyRef.current !== argsKey) return null;
+    if (!isMountedRef.current || currentArgsKeyRef.current !== argsKey) return null;
     const { tokenValue, ttlMs } = extractTokenResult(result);
     setIssued({ token: tokenValue, argsKey });
     setAttempt(null);
@@ -241,10 +142,11 @@ function useViewerToken({ issueViewerToken, sessionSecret, tokenArgs }) {
   }, [request, argsKey]);
   const hasAttempt = currentAttempt !== null;
   React.useEffect(() => {
-    if (token || hasAttempt) return;
+    if (!isRequested || token || hasAttempt) return;
     issueOnce().catch(() => {
     });
-  }, [token, hasAttempt, issueOnce]);
+  }, [isRequested, token, hasAttempt, issueOnce]);
+  const requestToken = React.useCallback(() => setIsRequested(true), []);
   const reissueToken = React.useCallback(
     () => issueOnce().catch(() => {
       setIssued((current) => current?.argsKey === argsKey ? null : current);
@@ -252,27 +154,37 @@ function useViewerToken({ issueViewerToken, sessionSecret, tokenArgs }) {
     }),
     [issueOnce, argsKey]
   );
-  const retryToken = React.useCallback(() => issueOnce().catch(() => null), [issueOnce]);
+  const retryToken = React.useCallback(() => {
+    setIsRequested(true);
+    return issueOnce().catch(() => null);
+  }, [issueOnce]);
   const tokenStatus = token ? "ready" : currentAttempt?.status ?? "idle";
   const tokenError = !token && currentAttempt?.status === "error" ? currentAttempt.error : null;
-  return { token, tokenStatus, tokenError, reissueToken, retryToken };
+  return { token, tokenStatus, tokenError, reissueToken, retryToken, requestToken };
 }
 
 // src/media-session.ts
-function useMediaSession({ issueViewerToken, tokenArgs, baseUrl }) {
+function useMediaSession({ issueViewerToken, tokenArgs, baseUrl, isLazy }) {
   const [sessionSecret] = React2.useState(() => typeof crypto !== "undefined" ? crypto.randomUUID() : "");
-  const issueViewerTokenAction = useAction(issueViewerToken);
-  const { token, tokenStatus, tokenError, reissueToken, retryToken } = useViewerToken({
-    issueViewerToken: issueViewerTokenAction,
+  const { token, tokenStatus, tokenError, reissueToken, retryToken, requestToken } = useViewerToken({
+    issueViewerToken,
     sessionSecret,
-    tokenArgs
+    tokenArgs,
+    isLazy
   });
+  const hasRequestedRef = React2.useRef(!isLazy);
+  const requestTokenAfterRender = React2.useCallback(() => {
+    if (hasRequestedRef.current) return;
+    hasRequestedRef.current = true;
+    queueMicrotask(requestToken);
+  }, [requestToken]);
   const url = React2.useCallback(
     (media, options) => {
       if (!baseUrl) throw new Error("Devultur `url()` requires `baseUrl` on <DevulturProvider>");
+      if (media.visibility === "private" && !token) requestTokenAfterRender();
       return mediaUrl(baseUrl, media, { ...options, token: token ?? void 0 });
     },
-    [baseUrl, token]
+    [baseUrl, token, requestTokenAfterRender]
   );
   const getCaptionsText = React2.useCallback(
     async (media, locale) => {
@@ -280,10 +192,11 @@ function useMediaSession({ issueViewerToken, tokenArgs, baseUrl }) {
       const path = mediaCaptionPath(media, locale);
       if (!path) throw new Error("getCaptionsText: the reference is not a video");
       const isPrivate = media.visibility === "private";
-      const fetchWith = (viewerToken) => fetch(buildMediaUrl(baseUrl, path, { token: viewerToken }), {
-        headers: sessionSecret ? { [SESSION_HEADER2]: sessionSecret } : void 0
+      const fetchWith = (viewerToken2) => fetch(buildMediaUrl(baseUrl, path, { token: viewerToken2 }), {
+        headers: sessionSecret ? { [SESSION_HEADER]: sessionSecret } : void 0
       });
-      let response = await fetchWith(isPrivate ? token ?? void 0 : void 0);
+      const viewerToken = isPrivate ? token ?? await retryToken() : null;
+      let response = await fetchWith(viewerToken ?? void 0);
       if (isPrivate && response.status === 401 && await isSessionMismatch(response)) {
         const fresh = await reissueToken();
         if (fresh) response = await fetchWith(fresh);
@@ -291,7 +204,7 @@ function useMediaSession({ issueViewerToken, tokenArgs, baseUrl }) {
       if (!response.ok) throw new Error(`Captions fetch failed: ${response.status}`);
       return response.text();
     },
-    [baseUrl, token, reissueToken, sessionSecret]
+    [baseUrl, token, reissueToken, retryToken, sessionSecret]
   );
   return React2.useMemo(
     () => ({
@@ -299,137 +212,424 @@ function useMediaSession({ issueViewerToken, tokenArgs, baseUrl }) {
       tokenStatus,
       tokenError,
       retryToken,
+      requestToken,
       baseUrl: baseUrl ?? null,
       sessionSecret,
       url,
       getCaptionsText,
       reissueToken
     }),
-    [token, tokenStatus, tokenError, retryToken, baseUrl, sessionSecret, url, getCaptionsText, reissueToken]
+    [
+      token,
+      tokenStatus,
+      tokenError,
+      retryToken,
+      requestToken,
+      baseUrl,
+      sessionSecret,
+      url,
+      getCaptionsText,
+      reissueToken
+    ]
   );
 }
 
-// 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
-    };
+// 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);
   }
-  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 };
+}
+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/crop-upload.tsx
-import React3 from "react";
+import React5 from "react";
 import { ImageCropper } from "@devultur/react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var DEFAULT_LABELS = {
-  zoom: "Zoom",
-  confirm: "Crop and upload",
-  processing: "Processing\u2026",
-  cancel: "Cancel"
-};
-function CropUpload({
-  aspectRatio,
-  visibility,
-  outputFormat,
-  maxWidth,
-  minSourceWidth,
-  replaces,
-  onComplete,
-  onReject,
-  accept = ["image/*"],
-  cropperClassName,
-  labels,
-  children
-}) {
-  const text = { ...DEFAULT_LABELS, ...labels };
-  const [pendingFile, setPendingFile] = React3.useState(null);
-  const inputRef = React3.useRef(null);
-  const { upload, state, cancel, reset } = useMediaUpload({ visibility, replaces, onComplete });
-  const pickFile = React3.useCallback(() => inputRef.current?.click(), []);
-  const handleCrop = React3.useCallback(
-    (baked) => {
-      setPendingFile(null);
-      upload(baked);
-    },
-    [upload]
-  );
-  const resetAll = React3.useCallback(() => {
-    setPendingFile(null);
-    reset();
-  }, [reset]);
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        ref: inputRef,
-        type: "file",
-        accept: accept.join(","),
-        hidden: true,
-        onChange: (event) => {
-          const file = event.target.files?.[0];
-          if (file) setPendingFile(file);
-          event.target.value = "";
-        }
-      }
-    ),
-    pendingFile && /* @__PURE__ */ jsx(
-      ImageCropper,
-      {
-        file: pendingFile,
-        aspectRatio,
-        outputFormat,
-        maxWidth,
-        minSourceWidth,
-        onCrop: handleCrop,
-        onReject,
-        className: cropperClassName,
-        children: ({ zoom, setZoom, confirm, isBaking }) => /* @__PURE__ */ jsxs("div", { className: "dv-crop-controls", children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "range",
-              min: 1,
-              max: 3,
-              step: 0.01,
-              value: zoom,
-              onChange: (event) => setZoom(Number(event.target.value)),
-              "aria-label": text.zoom
-            }
-          ),
+
+// 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 {
+      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 React3.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, 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 { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_LABELS = {
+  zoom: "Zoom",
+  confirm: "Crop and upload",
+  processing: "Processing\u2026",
+  cancel: "Cancel"
+};
+function CropUpload({
+  aspectRatio,
+  visibility,
+  outputFormat,
+  maxWidth,
+  minSourceWidth,
+  replaces,
+  onComplete,
+  onReject,
+  accept = ["image/*"],
+  cropperClassName,
+  labels,
+  children
+}) {
+  const text = { ...DEFAULT_LABELS, ...labels };
+  const [pendingFile, setPendingFile] = React5.useState(null);
+  const inputRef = React5.useRef(null);
+  const { upload, state, cancel, reset } = useMediaUpload({ visibility, replaces, onComplete });
+  const pickFile = React5.useCallback(() => inputRef.current?.click(), []);
+  const handleCrop = React5.useCallback(
+    (baked) => {
+      setPendingFile(null);
+      upload(baked);
+    },
+    [upload]
+  );
+  const resetAll = React5.useCallback(() => {
+    setPendingFile(null);
+    reset();
+  }, [reset]);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept: accept.join(","),
+        hidden: true,
+        onChange: (event) => {
+          const file = event.target.files?.[0];
+          if (file) setPendingFile(file);
+          event.target.value = "";
+        }
+      }
+    ),
+    pendingFile && /* @__PURE__ */ jsx(
+      ImageCropper,
+      {
+        file: pendingFile,
+        aspectRatio,
+        outputFormat,
+        maxWidth,
+        minSourceWidth,
+        onCrop: handleCrop,
+        onReject,
+        className: cropperClassName,
+        children: ({ zoom, setZoom, confirm, isBaking }) => /* @__PURE__ */ jsxs("div", { className: "dv-crop-controls", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "range",
+              min: 1,
+              max: 3,
+              step: 0.01,
+              value: zoom,
+              onChange: (event) => setZoom(Number(event.target.value)),
+              "aria-label": text.zoom
+            }
+          ),
           /* @__PURE__ */ jsx("button", { type: "button", onClick: confirm, disabled: isBaking, children: isBaking ? text.processing : text.confirm }),
           /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setPendingFile(null), children: text.cancel })
         ] })
@@ -439,51 +639,182 @@ function CropUpload({
   ] });
 }
 
-// src/document-renderers.tsx
-import React4 from "react";
-
-// src/attachment-icons.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var SHEET = "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z M14 3v5h5";
-var ICON_PATHS = {
-  file: SHEET,
-  text: `${SHEET} M9 13h6 M9 17h6`,
-  pdf: `${SHEET} M8.5 13.5h2a1 1 0 0 1 0 2h-2v-2 M8.5 15.5V17 M13.5 13.5V17h1a1.5 1.5 0 0 0 0-3.5z`,
-  image: "M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z M21 15l-5-5L5 21 M8.5 10a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z",
-  video: "M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z M10 9l5 3-5 3z",
-  audio: "M9 18V5l12-2v13 M6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M18 19a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
-};
-function AttachmentIcon({ kind }) {
-  return /* @__PURE__ */ jsx2(
-    "svg",
-    {
-      "aria-hidden": "true",
-      focusable: "false",
-      width: "24",
-      height: "24",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "data-part": "icon",
-      "data-kind": kind,
-      children: /* @__PURE__ */ jsx2("path", { d: ICON_PATHS[kind] })
-    }
+// src/document-renderers.tsx
+import React7 from "react";
+
+// src/attachment-icons.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var SHEET = "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z M14 3v5h5";
+var ICON_PATHS = {
+  file: SHEET,
+  text: `${SHEET} M9 13h6 M9 17h6`,
+  pdf: `${SHEET} M8.5 13.5h2a1 1 0 0 1 0 2h-2v-2 M8.5 15.5V17 M13.5 13.5V17h1a1.5 1.5 0 0 0 0-3.5z`,
+  image: "M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z M21 15l-5-5L5 21 M8.5 10a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z",
+  video: "M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z M10 9l5 3-5 3z",
+  audio: "M9 18V5l12-2v13 M6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M18 19a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
+};
+function AttachmentIcon({ kind }) {
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      "aria-hidden": "true",
+      focusable: "false",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "data-part": "icon",
+      "data-kind": kind,
+      children: /* @__PURE__ */ jsx2("path", { d: ICON_PATHS[kind] })
+    }
+  );
+}
+
+// src/download-link.tsx
+import React6 from "react";
+import { mediaUrl as mediaUrl2 } from "@devultur/core";
+
+// 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 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_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 jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+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__ */ jsx3(DownloadLink, { media, ...anchorProps, children: text });
+    return /* @__PURE__ */ jsx4(DownloadLink, { media, ...anchorProps, children: text });
   }
-  return /* @__PURE__ */ jsx3("a", { href: url(media), ...anchorProps, children: text });
+  return /* @__PURE__ */ jsx4("a", { href: url(media), ...anchorProps, children: text });
 }
 function AttachmentCard({
   media,
@@ -495,26 +826,26 @@ function AttachmentCard({
   labels,
   ...articleProps
 }) {
-  const headingId = React4.useId();
+  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__ */ 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 ") }),
+    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__ */ 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 })
+      /* @__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 React5 from "react";
-import { mediaUrl as mediaUrl2 } from "@devultur/core";
+import React8 from "react";
+import { mediaUrl as mediaUrl3 } from "@devultur/core";
 
 // src/responsive-image.ts
 function normalizeWidths(widths) {
@@ -558,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,
@@ -605,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 React5.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,
@@ -627,26 +958,28 @@ function Image({
   );
 }
 function usePrivateImage(media, transforms, onLoadError) {
-  const { token, tokenStatus, tokenError, baseUrl, reissueToken, sessionSecret } = useDevultur();
-  const [isFailed, setIsFailed] = React5.useState(false);
-  const [blobSrc, setBlobSrc] = React5.useState(null);
-  const sessionRef = React5.useRef({ token, reissueToken, onLoadError });
-  React5.useEffect(() => {
+  const devultur = useDevultur();
+  const { token, tokenStatus, tokenError, baseUrl, reissueToken, sessionSecret } = devultur;
+  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";
+  useRequestTokenWhen(devultur, isPrivate);
   const hasToken = token !== null;
   const isTokenUnavailable = isPrivate && tokenStatus === "error";
   const { width, height, fit, format, quality } = transforms;
-  React5.useEffect(() => {
+  React8.useEffect(() => {
     setIsFailed(false);
     setBlobSrc(null);
   }, [media]);
-  React5.useEffect(() => {
+  React8.useEffect(() => {
     if (!isTokenUnavailable || !media) return;
     sessionRef.current.onLoadError?.(tokenUnavailableError(tokenError));
   }, [isTokenUnavailable, media, tokenError]);
-  React5.useEffect(() => {
+  React8.useEffect(() => {
     if (!isPrivate || isFailed || !media || !hasToken) return;
     let cancelled = false;
     let objectUrl = null;
@@ -660,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
@@ -685,41 +1018,42 @@ function usePrivateImage(media, transforms, onLoadError) {
       if (objectUrl) URL.revokeObjectURL(objectUrl);
     };
   }, [isPrivate, isFailed, media, hasToken, baseUrl, sessionSecret, width, height, fit, format, quality]);
-  const handleError = React5.useCallback(() => setIsFailed(true), []);
+  const handleError = React8.useCallback(() => setIsFailed(true), []);
   return { blobSrc, isFailed: isFailed || isTokenUnavailable, handleError };
 }
 
 // src/media-library.tsx
-import React14 from "react";
+import React17 from "react";
 
 // src/media-library-item.tsx
-import React11 from "react";
+import React14 from "react";
 
 // src/pdf-thumbnail.tsx
-import React10 from "react";
+import React13 from "react";
 
 // src/media-resource.ts
-import React6 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) {
   const devultur = useDevultur();
   const { isEnabled, maxBytes, contentType } = options;
   const isPrivate = media?.visibility === "private";
+  useRequestTokenWhen(devultur, isPrivate && isEnabled);
   const isReady = !isPrivate || devultur.token !== null;
   const isTokenUnavailable = isPrivate && devultur.tokenStatus === "error";
-  const tokenFailure = React6.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] = React6.useState(null);
-  const inputsRef = React6.useRef({ media, devultur, options });
-  React6.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 };
   });
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     if (!requestKey || !isReady) return;
     const { media: target, devultur: context, options: current } = inputsRef.current;
     if (!target || !context.baseUrl) return;
@@ -727,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,
@@ -757,7 +1091,7 @@ function useMediaResource(media, options) {
 }
 
 // src/pdf-context.tsx
-import React7 from "react";
+import React10 from "react";
 
 // src/preview-labels.ts
 var ERROR_TEXT = {
@@ -792,16 +1126,16 @@ function mergePreviewLabels(...sources) {
 }
 
 // src/pdf-context.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-var PdfPreviewContext = /* @__PURE__ */ React7.createContext({});
+import { jsx as jsx6 } from "react/jsx-runtime";
+var PdfPreviewContext = /* @__PURE__ */ React10.createContext({});
 function PdfPreviewProvider({
   pdfjs,
   workerSrc,
   labels,
   children
 }) {
-  const config = React7.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) {
@@ -812,9 +1146,9 @@ function loadOnce(loader) {
   return loading;
 }
 function usePdfjs(workerSrcOverride) {
-  const { pdfjs: loader, workerSrc } = React7.useContext(PdfPreviewContext);
-  const [loaded, setLoaded] = React7.useState(null);
-  React7.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) => {
@@ -830,8 +1164,8 @@ function usePdfjs(workerSrcOverride) {
   return { status: "ready", pdfjs: loaded.pdfjs, workerSrc: workerSrcOverride ?? workerSrc };
 }
 function usePdfPageCounter() {
-  const { pdfjs: loader, workerSrc } = React7.useContext(PdfPreviewContext);
-  return React7.useMemo(() => {
+  const { pdfjs: loader, workerSrc } = React10.useContext(PdfPreviewContext);
+  return React10.useMemo(() => {
     if (!loader) return null;
     return async (file) => {
       const pdfjs = await loadOnce(loader);
@@ -841,15 +1175,15 @@ function usePdfPageCounter() {
   }, [loader, workerSrc]);
 }
 function usePreviewLabels(labels) {
-  const providerLabels = React7.useContext(PdfPreviewContext).labels;
+  const providerLabels = React10.useContext(PdfPreviewContext).labels;
   return mergePreviewLabels(providerLabels, labels);
 }
 
 // src/pdf-hooks.ts
-import React8 from "react";
+import React11 from "react";
 function useIsVisible(ref, rootMargin = "200px") {
-  const [isVisible, setIsVisible] = React8.useState(false);
-  React8.useEffect(() => {
+  const [isVisible, setIsVisible] = React11.useState(false);
+  React11.useEffect(() => {
     const element = ref.current;
     if (isVisible || !element) return;
     if (typeof IntersectionObserver === "undefined") {
@@ -870,12 +1204,12 @@ function useIsVisible(ref, rootMargin = "200px") {
   return isVisible;
 }
 function usePdfDocument({ pdfjs, bytes, workerSrc }) {
-  const [state, setState] = React8.useState({
+  const [state, setState] = React11.useState({
     bytes: null,
     document: null,
     error: null
   });
-  React8.useEffect(() => {
+  React11.useEffect(() => {
     let isCurrent = true;
     const loadingTask = openPdf(pdfjs, bytes, workerSrc);
     loadingTask.promise.then((document2) => {
@@ -894,8 +1228,8 @@ function usePdfDocument({ pdfjs, bytes, workerSrc }) {
 }
 function usePageRender(options) {
   const { document: document2, pageNumber, canvasRef, width, isEnabled, shouldExtractText = false } = options;
-  const [state, setState] = React8.useState({ isRendered: false, text: "" });
-  React8.useEffect(() => {
+  const [state, setState] = React11.useState({ isRendered: false, text: "" });
+  React11.useEffect(() => {
     const canvas = canvasRef.current;
     if (!document2 || !isEnabled || !canvas) return;
     let isCurrent = true;
@@ -925,8 +1259,8 @@ function usePageRender(options) {
 }
 
 // src/pdf-preview.tsx
-import React9 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,
@@ -949,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,
@@ -971,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 = React9.useRef(null);
-  const [width, setWidth] = React9.useState(null);
-  React9.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);
@@ -989,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,
@@ -1009,8 +1343,8 @@ function PdfCanvasDocument(props) {
   );
 }
 function PdfPageView({ document: document2, pageNumber, width, label }) {
-  const pageRef = React9.useRef(null);
-  const canvasRef = React9.useRef(null);
+  const pageRef = React12.useRef(null);
+  const canvasRef = React12.useRef(null);
   const isVisible = useIsVisible(pageRef);
   const { isRendered, text } = usePageRender({
     document: document2,
@@ -1022,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] = React9.useState(null);
-  React9.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 = React10.useRef(null);
+  const containerRef = React13.useRef(null);
   const isVisible = useIsVisible(containerRef);
   const pdfjsState = usePdfjs(props.pdfWorkerSrc);
   const labels = usePreviewLabels(props.labels);
@@ -1060,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,
@@ -1073,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 = React10.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) {
@@ -1107,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,
@@ -1125,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 = {
@@ -1144,13 +1478,13 @@ var ITEM_STYLE = {
 };
 function MediaLibraryItem(props) {
   const { ref, record, isSelected, isActive, tabIndex, classNames, renderItem, onChoose, onFocus } = props;
-  const media = React11.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,
@@ -1167,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,
@@ -1207,13 +1541,13 @@ function mergeMediaLibraryLabels(labels) {
 }
 
 // src/use-media-library.ts
-import React12 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] = React12.useState(value);
-  React12.useEffect(() => {
+  const [debounced, setDebounced] = React15.useState(value);
+  React15.useEffect(() => {
     if (value === "") {
       setDebounced("");
       return;
@@ -1238,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 = React12.useCallback(
+  const loadMore = React15.useCallback(
     (numItems) => resultLoadMore(numItems ?? pageSize),
     [resultLoadMore, pageSize]
   );
@@ -1253,7 +1587,7 @@ function useMediaLibrary(options = {}) {
 }
 
 // src/use-roving-focus.ts
-import React13 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);
@@ -1281,16 +1615,16 @@ function columnCount(items) {
   return Math.max(inFirstRow.length, 1);
 }
 function useRovingFocus(count) {
-  const [activeIndex, setActiveIndex] = React13.useState(0);
-  const itemsRef = React13.useRef([]);
+  const [activeIndex, setActiveIndex] = React16.useState(0);
+  const itemsRef = React16.useRef([]);
   const currentIndex = Math.min(activeIndex, Math.max(count - 1, 0));
-  const itemRef = React13.useCallback(
+  const itemRef = React16.useCallback(
     (index) => (element) => {
       itemsRef.current[index] = element;
     },
     []
   );
-  const handleKeyDown = React13.useCallback(
+  const handleKeyDown = React16.useCallback(
     (event) => {
       if (count === 0) return;
       const items = itemsRef.current.slice(0, count);
@@ -1307,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",
@@ -1322,16 +1656,16 @@ var LIST_STYLE = {
   padding: 0
 };
 function MediaLibrary(props) {
-  const labels = React14.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] = React14.useState("");
-  const [chosenType, setChosenType] = React14.useState("");
-  const [selectedKey, setSelectedKey] = React14.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 = React14.useCallback(
+  const handleChoose = React17.useCallback(
     (record) => {
       if (isSelectable) setSelectedKey(record.key);
       onSelect(record, mediaFromRecord(record));
@@ -1339,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",
@@ -1358,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,
@@ -1394,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",
@@ -1412,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),
@@ -1431,7 +1765,7 @@ function LibraryResults(props) {
         ))
       }
     ),
-    canLoadMore && /* @__PURE__ */ jsx9(
+    canLoadMore && /* @__PURE__ */ jsx10(
       "button",
       {
         type: "button",
@@ -1443,7 +1777,7 @@ function LibraryResults(props) {
     )
   ] });
 }
-var LibraryErrorBoundary = class extends React14.Component {
+var LibraryErrorBoundary = class extends React17.Component {
   state = { hasError: false, error: null };
   static getDerivedStateFromError(error) {
     return { hasError: true, error };
@@ -1485,7 +1819,7 @@ function useMediaObjectUrl(media, options) {
 }
 
 // src/media-picker.tsx
-import React21 from "react";
+import React24 from "react";
 
 // src/media-picker-accept.ts
 function matchesAccept(candidate, accept) {
@@ -1525,10 +1859,10 @@ function recordMatchesAccept(record, accept) {
 }
 
 // src/media-picker-context.ts
-import React15 from "react";
-var MediaPickerContext = /* @__PURE__ */ React15.createContext(null);
+import React18 from "react";
+var MediaPickerContext = /* @__PURE__ */ React18.createContext(null);
 function useMediaPicker() {
-  const picker = React15.use(MediaPickerContext);
+  const picker = React18.use(MediaPickerContext);
   if (!picker) throw new Error("useMediaPicker must be used within <MediaPicker>");
   return picker;
 }
@@ -1569,17 +1903,17 @@ function mergeMediaPickerLabels(labels) {
 }
 
 // src/media-picker-library.tsx
-import React16 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 = React16.useMemo(
+  const filter = React19.useMemo(
     () => accept ? (record) => recordMatchesAccept(record, accept) : void 0,
     [accept]
   );
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     MediaLibrary,
     {
       ...props,
@@ -1596,15 +1930,15 @@ function MediaPickerLibrary(props) {
 }
 
 // src/media-picker-selection.tsx
-import React18 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 React17 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) {
@@ -1616,13 +1950,13 @@ function fetchErrorOf(error) {
   if (HLS_NETWORK_FAILURE.test(error.details)) return networkError(error);
   return renderFailedError(error);
 }
-function VideoPreview({ media, renderFallback, className }) {
-  const { tokenStatus, tokenError, reissueToken } = useDevultur();
+function VideoPreview({ media, renderFallback, loading, metrics, className }) {
+  const { token, tokenStatus, tokenError, reissueToken } = useDevultur();
   const videoProps = useVideoProps(media);
-  const [failure, setFailure] = React17.useState(null);
-  const hasReissuedRef = React17.useRef(false);
+  const [failure, setFailure] = React20.useState(null);
+  const hasReissuedRef = React20.useRef(false);
   const playerToken = videoProps?.token;
-  const handleError = React17.useCallback(
+  const handleError = React20.useCallback(
     (error) => {
       const isFirstMismatch = error.code === "session_mismatch" && !hasReissuedRef.current;
       if (isFirstMismatch) {
@@ -1635,52 +1969,54 @@ function VideoPreview({ media, renderFallback, className }) {
     [reissueToken, playerToken]
   );
   if (!videoProps) return null;
-  if (media.visibility === "private" && tokenStatus === "error") {
-    return /* @__PURE__ */ jsx11(Fragment6, { children: renderFallback(tokenUnavailableError(tokenError)) });
-  }
-  if (failure && failure.token === playerToken) return /* @__PURE__ */ jsx11(Fragment6, { children: renderFallback(failure.error) });
-  return /* @__PURE__ */ jsx11(VideoPlayer, { ...videoProps, className, onError: handleError });
+  const isPrivate = media.visibility === "private";
+  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, ...viewProps }) {
+function Preview({ media, contentType, fallback, loading, labels, metrics, ...viewProps }) {
   const text = usePreviewLabels(labels);
   if (!media) return null;
   const renderFallback = (error) => {
     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__ */ jsx13(LoadingStatus, { text: text.loading }) : loading;
   if (media.kind === "video") {
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       VideoPreview,
       {
         media,
         renderFallback,
+        loading: loadingNode,
+        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)) });
-  const loadingNode = loading === void 0 ? /* @__PURE__ */ jsx12(LoadingStatus, { text: text.loading }) : loading;
+  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,
@@ -1697,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({
@@ -1721,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 = React18.useId();
-  const [previewedId, setPreviewedId] = React18.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";
@@ -1746,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",
@@ -1770,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,
@@ -1793,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 React19 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] = React19.useState(false);
+  const [isDragging, setIsDragging] = React22.useState(false);
   const handleDragOver = (event) => {
     event.preventDefault();
     setIsDragging(true);
@@ -1831,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)) })
         ]
       }
     )
@@ -1845,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 React20 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;
@@ -1872,18 +2208,18 @@ async function pageCountOf(file, countPdfPages) {
 }
 function useMediaPickerUploads(options) {
   const { upload } = useDevultur();
-  const [uploads, setUploads] = React20.useState([]);
-  const controllers = React20.useRef(/* @__PURE__ */ new Map());
-  const optionsRef = React20.useRef(options);
+  const [uploads, setUploads] = React23.useState([]);
+  const controllers = React23.useRef(/* @__PURE__ */ new Map());
+  const optionsRef = React23.useRef(options);
   optionsRef.current = options;
-  const patch = React20.useCallback((id, changes) => {
+  const patch = React23.useCallback((id, changes) => {
     setUploads((current) => current.map((entry) => entry.id === id ? { ...entry, ...changes } : entry));
   }, []);
-  const drop = React20.useCallback((id) => {
+  const drop = React23.useCallback((id) => {
     controllers.current.delete(id);
     setUploads((current) => current.filter((entry) => entry.id !== id));
   }, []);
-  const run = React20.useCallback(
+  const run = React23.useCallback(
     async (id, file) => {
       const { labels, announce } = optionsRef.current;
       const controller = new AbortController();
@@ -1913,7 +2249,7 @@ function useMediaPickerUploads(options) {
     },
     [upload, patch, drop]
   );
-  const start = React20.useCallback(
+  const start = React23.useCallback(
     (files) => {
       const { accept, multiple, labels } = optionsRef.current;
       const chosen = multiple ? [...files] : [...files].slice(0, 1);
@@ -1935,8 +2271,8 @@ function useMediaPickerUploads(options) {
     },
     [run]
   );
-  const cancel = React20.useCallback((id) => controllers.current.get(id)?.abort(), []);
-  const retry = React20.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;
@@ -1944,7 +2280,7 @@ function useMediaPickerUploads(options) {
     },
     [uploads, run]
   );
-  React20.useEffect(() => {
+  React23.useEffect(() => {
     const active = controllers.current;
     return () => {
       for (const controller of active.values()) controller.abort();
@@ -1954,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;
@@ -1971,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 = React21.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] = React21.useState("");
-  const inputRef = React21.useRef(null);
-  const selectionRef = React21.useRef(null);
-  const [ownSelection, setOwnSelection] = React21.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 = React21.useRef(selected);
+  const selectedRef = React24.useRef(selected);
   selectedRef.current = selected;
-  const propsRef = React21.useRef(props);
+  const propsRef = React24.useRef(props);
   propsRef.current = props;
   const isControlled = controlledSelection !== void 0;
-  const commit = React21.useCallback(
+  const commit = React24.useCallback(
     (next) => {
       selectedRef.current = next;
       if (!isControlled) setOwnSelection(next);
@@ -1994,15 +2330,15 @@ function MediaPickerRoot(props) {
     },
     [isControlled]
   );
-  const announce = React21.useCallback((message) => setAnnouncement(message), []);
-  const select = React21.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 = React21.useCallback(
+  const remove = React24.useCallback(
     (media) => {
       commit(selectedRef.current.filter((item) => !isSame(item, media)));
       announce(labels.removed(mediaName(media)));
@@ -2010,7 +2346,7 @@ function MediaPickerRoot(props) {
     },
     [commit, announce, labels]
   );
-  const toggle = React21.useCallback(
+  const toggle = React24.useCallback(
     (media) => {
       const isSelected = selectedRef.current.some((item) => isSame(item, media));
       if (isMultiple && isSelected) {
@@ -2022,12 +2358,12 @@ function MediaPickerRoot(props) {
     },
     [isMultiple, remove, select, announce, labels]
   );
-  const clear = React21.useCallback(() => {
+  const clear = React24.useCallback(() => {
     commit([]);
     announce(labels.cleared);
     selectionRef.current?.focus();
   }, [commit, announce, labels]);
-  const handleUploaded = React21.useCallback(
+  const handleUploaded = React24.useCallback(
     (media) => {
       select(media);
       selectionRef.current?.focus();
@@ -2065,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,
@@ -2086,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, {
@@ -2096,25 +2432,58 @@ var MediaPicker = /* @__PURE__ */ Object.assign(MediaPickerRoot, {
   Selection: MediaPickerSelection
 });
 
+// src/viewer-provider.tsx
+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")),
+  deleteMedia: () => {
+    throw new DevulturCapabilityError("deleteMedia");
+  }
+};
+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__ */ jsx17(ViewerSession, { ...props, issueViewerToken: NO_TOKEN_ACTION, lazyToken: true });
+  return /* @__PURE__ */ jsx17(ConvexViewerSession, { ...props, issueViewerToken });
+}
+function ConvexViewerSession({
+  issueViewerToken,
+  ...props
+}) {
+  const issueViewerTokenAction = useAction2(issueViewerToken);
+  return /* @__PURE__ */ jsx17(ViewerSession, { issueViewerToken: issueViewerTokenAction, ...props });
+}
+function ViewerSession({
+  baseUrl,
+  issueViewerToken,
+  tokenArgs,
+  lazyToken = false,
+  children
+}) {
+  const session = useMediaSession({ issueViewerToken, tokenArgs, baseUrl, isLazy: lazyToken });
+  const devulturValue = React25.useMemo(() => ({ ...session, ...VIEWER_ACTIONS }), [session]);
+  return /* @__PURE__ */ jsx17(DevulturContext, { value: devulturValue, children });
+}
+
 // src/react.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
-var DevulturContext = /* @__PURE__ */ React22.createContext(null);
-var DevulturApiContext = /* @__PURE__ */ React22.createContext(null);
-var ProgressContext = /* @__PURE__ */ React22.createContext(null);
+import { jsx as jsx18 } from "react/jsx-runtime";
 function DevulturProvider({ api, baseUrl, tokenArgs, issueViewerToken, children }) {
-  const session = useMediaSession({ issueViewerToken: issueViewerToken ?? api.issueViewerToken, 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 = React22.useCallback(
+  const issueViewerTokenAction = useAction3(issueViewerToken ?? api.issueViewerToken);
+  const session = useMediaSession({ issueViewerToken: issueViewerTokenAction, tokenArgs, baseUrl });
+  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 = React22.useCallback(
+  const upload = React26.useCallback(
     async (file, options) => {
       const dimensions = await readImageDimensions(file);
       options?.signal?.throwIfAborted();
@@ -2123,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 } : {} };
@@ -2139,432 +2508,89 @@ function DevulturProvider({ api, baseUrl, tokenArgs, issueViewerToken, children
       };
     },
     [createUploadUrlAction, confirmUploadAction, api.confirmUpload]
-  );
-  const deleteMedia = React22.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, deleteVideoAction, api.deleteVideo]
-  );
-  const devulturValue = React22.useMemo(
-    () => ({ ...session, uploadUrl, upload, deleteMedia }),
-    [session, uploadUrl, upload, deleteMedia]
-  );
-  let content = /* @__PURE__ */ jsx16(DevulturApiContext, { value: api, children: /* @__PURE__ */ jsx16(DevulturContext, { value: devulturValue, children }) });
-  if (api.saveProgress && api.loadProgress && api.markComplete && api.resetProgress) {
-    content = /* @__PURE__ */ jsx16(
-      ProgressBridge,
-      {
-        save: api.saveProgress,
-        load: api.loadProgress,
-        markComplete: api.markComplete,
-        reset: api.resetProgress,
-        children: content
-      }
-    );
-  }
-  return content;
-}
-function ProgressBridge({
-  save,
-  load,
-  markComplete,
-  reset,
-  children
-}) {
-  const convex = useConvex();
-  const saveMutation = useMutation(save);
-  const markCompleteMutation = useMutation(markComplete);
-  const resetMutation = useMutation(reset);
-  const onSave = React22.useCallback(
-    async (videoId, position) => {
-      await saveMutation({ videoId, position });
-    },
-    [saveMutation]
-  );
-  const onLoad = React22.useCallback(
-    async (videoId) => {
-      const result = await convex.query(load, { videoId });
-      if (!result) return null;
-      return {
-        lastPosition: result.lastPosition,
-        completedAt: result.completedAt ? new Date(result.completedAt) : null
-      };
-    },
-    [convex, load]
-  );
-  const onMarkComplete = React22.useCallback(
-    async (videoId) => {
-      await markCompleteMutation({ videoId });
-    },
-    [markCompleteMutation]
-  );
-  const onReset = React22.useCallback(
-    async (videoId) => {
-      await resetMutation({ videoId });
-    },
-    [resetMutation]
-  );
-  const value = React22.useMemo(
-    () => ({ save: onSave, load: onLoad, markComplete: onMarkComplete, reset: onReset }),
-    [onSave, onLoad, onMarkComplete, onReset]
-  );
-  return /* @__PURE__ */ jsx16(ProgressContext, { value, children });
-}
-function useDevultur() {
-  const context = React22.use(DevulturContext);
-  if (!context) throw new Error("useDevultur must be used within <DevulturProvider> or <DevulturViewerProvider>");
-  return context;
-}
-function useDevulturApi() {
-  const api = React22.use(DevulturApiContext);
-  if (api) return api;
-  if (React22.use(DevulturContext)) throw new DevulturCapabilityError("api");
-  throw new Error("useDevulturApi must be used within <DevulturProvider>");
-}
-var VIEWER_ACTIONS = {
-  uploadUrl: () => Promise.reject(new DevulturCapabilityError("uploadUrl")),
-  upload: () => Promise.reject(new DevulturCapabilityError("upload")),
-  deleteMedia: () => {
-    throw new DevulturCapabilityError("deleteMedia");
-  }
-};
-function DevulturViewerProvider({
-  baseUrl,
-  issueViewerToken,
-  tokenArgs,
-  children
-}) {
-  const session = useMediaSession({ issueViewerToken, tokenArgs, baseUrl });
-  const devulturValue = React22.useMemo(() => ({ ...session, ...VIEWER_ACTIONS }), [session]);
-  return /* @__PURE__ */ jsx16(DevulturContext, { value: devulturValue, children });
-}
-function useDevulturProgress() {
-  const context = React22.use(ProgressContext);
-  if (!context) throw new Error("useDevulturProgress requires progress API in DevulturProvider");
-  return context;
-}
-function useMediaUrl(key, options) {
-  const { token, baseUrl } = useDevultur();
-  return React22.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 { token, baseUrl, sessionSecret } = useDevultur();
-  const locales = options?.locales;
-  return React22.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 { url, token, tokenStatus, tokenError, baseUrl, sessionSecret, reissueToken } = useDevultur();
-  const handleClick = React22.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));
+  );
+  const deleteMedia = React26.useCallback(
+    (media) => {
+      if (media.kind === "video" && api.deleteVideo) {
+        deleteVideoAction({ videoId: media.id, visibility: media.visibility }).catch(console.error);
         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);
+      deleteMediaAction({ key: mediaPath5(media) }).catch(console.error);
     },
-    [media, baseUrl, token, tokenStatus, tokenError, filename, sessionSecret, reissueToken, onDownloadError]
+    [deleteMediaAction, deleteVideoAction, api.deleteVideo]
   );
-  if (!media) return null;
-  return /* @__PURE__ */ jsx16("a", { href: url(media, { download: filename ?? true }), download: true, ...anchorProps, onClick: handleClick, children });
-}
-function useDevulturMedia(key) {
-  const apiCtx = React22.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 devulturValue = React26.useMemo(
+    () => ({ ...session, uploadUrl, upload, deleteMedia }),
+    [session, uploadUrl, upload, deleteMedia]
+  );
+  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__ */ jsx18(
+      ProgressBridge,
+      {
+        save: api.saveProgress,
+        load: api.loadProgress,
+        markComplete: api.markComplete,
+        reset: api.resetProgress,
+        children: content
+      }
+    );
   }
-  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
-  };
+  return content;
 }
-function useVideoState(media, options) {
-  const { token, baseUrl, sessionSecret } = useDevultur();
-  const status = useDevulturMedia(media?.kind === "video" ? media.id : null);
-  const locales = options?.locales;
-  return React22.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 }) }];
-      });
+function ProgressBridge({
+  save,
+  load,
+  markComplete,
+  reset,
+  children
+}) {
+  const convex = useConvex();
+  const saveMutation = useMutation(save);
+  const markCompleteMutation = useMutation(markComplete);
+  const resetMutation = useMutation(reset);
+  const onSave = React26.useCallback(
+    async (videoId, position) => {
+      await saveMutation({ videoId, position });
+    },
+    [saveMutation]
+  );
+  const onLoad = React26.useCallback(
+    async (videoId) => {
+      const result = await convex.query(load, { videoId });
+      if (!result) return null;
       return {
-        phase: "ready",
-        media,
-        playlist,
-        duration: status.duration ?? 0,
-        captions,
-        playerProps: {
-          src: playlist,
-          token: viewerToken,
-          captions,
-          sessionSecret: media.visibility === "private" ? sessionSecret : void 0
-        }
+        lastPosition: result.lastPosition,
+        completedAt: result.completedAt ? new Date(result.completedAt) : null
       };
-    }
-    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] = React22.useState("idle");
-  const [percent, setPercent] = React22.useState(0);
-  const [currentFile, setCurrentFile] = React22.useState(null);
-  const [media, setMedia] = React22.useState(null);
-  const [uploadFailure, setUploadFailure] = React22.useState(null);
-  const [processRequested, setProcessRequested] = React22.useState(false);
-  const abortRef = React22.useRef(null);
-  const lastFileRef = React22.useRef(null);
-  const lastKeyRef = React22.useRef(null);
-  const videoState = useVideoState(media, { locales });
-  const triggerProcess = React22.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]
+    [convex, load]
   );
-  const runUpload = React22.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;
+  const onMarkComplete = React26.useCallback(
+    async (videoId) => {
+      await markCompleteMutation({ videoId });
     },
-    [
-      createUploadUrlAction,
-      confirmUploadAction,
-      api.confirmUpload,
-      deleteMediaAction,
-      triggerProcess,
-      visibility,
-      replaces,
-      process,
-      onComplete,
-      onError
-    ]
+    [markCompleteMutation]
   );
-  const cancel = React22.useCallback(() => {
-    abortRef.current?.abort();
-  }, []);
-  const reset = React22.useCallback(() => {
-    abortRef.current?.abort();
-    setPhase("idle");
-    setPercent(0);
-    setCurrentFile(null);
-    setMedia(null);
-    setUploadFailure(null);
-    setProcessRequested(false);
-  }, []);
-  const retry = React22.useCallback(() => {
-    if (phase === "upload-failed" && lastFileRef.current) {
-      runUpload(lastFileRef.current);
-      return;
-    }
-    if (lastKeyRef.current) triggerProcess(lastKeyRef.current);
-  }, [phase, runUpload, triggerProcess]);
-  React22.useEffect(() => () => abortRef.current?.abort(), []);
-  const state = React22.useMemo(
-    () => deriveUploadState(
-      { phase, percent, file: currentFile, failure: uploadFailure, media, processRequested },
-      videoState,
-      retry
-    ),
-    [phase, percent, currentFile, uploadFailure, media, processRequested, videoState, retry]
+  const onReset = React26.useCallback(
+    async (videoId) => {
+      await resetMutation({ videoId });
+    },
+    [resetMutation]
   );
-  const upload = React22.useCallback((file) => runUpload(file), [runUpload]);
-  return { upload, state, cancel, reset };
+  const value = React26.useMemo(
+    () => ({ save: onSave, load: onLoad, markComplete: onMarkComplete, reset: onReset }),
+    [onSave, onLoad, onMarkComplete, onReset]
+  );
+  return /* @__PURE__ */ jsx18(DevulturProgressContext, { value, children });
 }
 export {
   AttachmentCard,
   CropUpload,
+  DevulturApiContext,
   DevulturCapabilityError,
+  DevulturContext,
+  DevulturProgressContext,
   DevulturProvider,
   DevulturViewerProvider,
   DocumentLink,
@@ -2586,6 +2612,7 @@ export {
   useDevultur,
   useDevulturApi,
   useDevulturMedia,
+  useDevulturOptional,
   useDevulturProgress,
   useMediaLibrary,
   useMediaObjectUrl,