@devultur/convex 1.3.1 → 1.4.0

package/dist/react.js

@@ -1,23 +1,62 @@
 "use client";
+import {
+  mediaFromRecord
+} from "./chunk-KAIVI7RB.js";
+import {
+  countPages,
+  isRenderCancelled,
+  openPdf,
+  pageText,
+  renderPage
+} from "./chunk-HOFTKJWT.js";
+import {
+  attachmentDetails,
+  attachmentKindOf,
+  attachmentName,
+  defaultAttachmentLabels,
+  expectedContentType,
+  formatDuration,
+  formatFileSize,
+  mergeAttachmentLabels,
+  previewKindOf,
+  trustedContentType
+} from "./chunk-QBHIZBOQ.js";
+import {
+  describeDevulturError
+} from "./chunk-EX3W77VY.js";
 
 // src/react.tsx
-import React7 from "react";
+import React22 from "react";
 import {
-  buildMediaUrl,
+  buildMediaUrl as buildMediaUrl2,
   CaptionLocaleLabel,
-  DEFAULT_TOKEN_EXPIRY_SECONDS,
   MediaStatus,
-  mediaCaptionPath,
-  mediaPath as mediaPath2,
-  mediaUrl as mediaUrl2,
-  SESSION_HEADER as SESSION_HEADER2,
+  mediaCaptionPath as mediaCaptionPath2,
+  mediaPath as mediaPath3,
+  mediaUrl as mediaUrl4,
   visibilityFromKey
 } from "@devultur/core";
 import {
   UploadHttpError,
   uploadFileWithProgress
 } from "@devultur/react";
-import { useAction, useConvex, useMutation, useQuery } from "convex/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) {
@@ -29,89 +68,21 @@ async function isSessionMismatch(response) {
   }
 }
 
-// src/media-fetch.ts
-import { SESSION_HEADER } from "@devultur/core";
-
-// src/preview-type.ts
-var PREVIEW_KIND_BY_TYPE = /* @__PURE__ */ new Map([
-  ["image/png", "image"],
-  ["image/jpeg", "image"],
-  ["image/webp", "image"],
-  ["image/gif", "image"],
-  ["image/avif", "image"],
-  ["application/pdf", "pdf"],
-  ["audio/mpeg", "audio"],
-  ["audio/mp4", "audio"],
-  ["audio/aac", "audio"],
-  ["audio/ogg", "audio"],
-  ["audio/wav", "audio"],
-  ["audio/webm", "audio"],
-  ["audio/flac", "audio"],
-  ["text/plain", "text"],
-  ["text/csv", "text"],
-  ["application/json", "text"]
-]);
-var TYPE_BY_EXTENSION = /* @__PURE__ */ new Map([
-  ["png", "image/png"],
-  ["jpg", "image/jpeg"],
-  ["jpeg", "image/jpeg"],
-  ["webp", "image/webp"],
-  ["gif", "image/gif"],
-  ["avif", "image/avif"],
-  ["pdf", "application/pdf"],
-  ["mp3", "audio/mpeg"],
-  ["m4a", "audio/mp4"],
-  ["aac", "audio/aac"],
-  ["ogg", "audio/ogg"],
-  ["oga", "audio/ogg"],
-  ["opus", "audio/ogg"],
-  ["wav", "audio/wav"],
-  ["weba", "audio/webm"],
-  ["flac", "audio/flac"],
-  ["txt", "text/plain"],
-  ["csv", "text/csv"],
-  ["json", "application/json"]
-]);
-var OPAQUE_CONTENT_TYPE = "application/octet-stream";
-function normalizeContentType(value) {
-  const essence = value?.split(";")[0]?.trim().toLowerCase();
-  return essence || null;
-}
-function previewKindOf(contentType) {
-  const normalized = normalizeContentType(contentType);
-  if (!normalized) return null;
-  return PREVIEW_KIND_BY_TYPE.get(normalized) ?? null;
-}
-function expectedContentType(media, declaredType) {
-  if (declaredType) return normalizeContentType(declaredType);
-  const extension = media.filename?.split(".").pop()?.toLowerCase();
-  if (!extension || extension === media.filename?.toLowerCase()) return null;
-  return TYPE_BY_EXTENSION.get(extension) ?? null;
-}
-function trustedContentType(expectedType, responseType) {
-  const receivedKind = previewKindOf(responseType);
-  if (!expectedType) {
-    const contentType = receivedKind ? normalizeContentType(responseType) : null;
-    return { ok: true, contentType: contentType ?? OPAQUE_CONTENT_TYPE };
-  }
-  const expectedKind = previewKindOf(expectedType);
-  if (!expectedKind) return { ok: false, reason: "unsupported_type" };
-  if (receivedKind !== expectedKind) return { ok: false, reason: "type_mismatch" };
-  return { ok: true, contentType: normalizeContentType(expectedType) ?? OPAQUE_CONTENT_TYPE };
-}
-
 // src/media-fetch.ts
 var MediaFetchError = class extends Error {
   code;
   /** HTTP status, for `http_error`. */
   status;
-  constructor(code, message, status) {
-    super(message);
+  constructor(code, message, status, options) {
+    super(message, options);
     this.name = "MediaFetchError";
     this.code = code;
     this.status = status;
   }
 };
+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;
@@ -172,6 +143,159 @@ async function readCapped(body, maxBytes) {
   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";
+import { convexToJson } from "convex/values";
+var REFRESH_BUFFER_MS = 5 * 60 * 1e3;
+var MIN_REFRESH_MS = 6e4;
+var DEFAULT_TTL_MS = DEFAULT_TOKEN_EXPIRY_SECONDS * 1e3;
+function extractTokenResult(result) {
+  const tokenValue = typeof result === "string" ? result : result?.token;
+  if (typeof tokenValue !== "string" || tokenValue === "") {
+    throw new Error("The viewer token action returned no token");
+  }
+  const expiresIn = typeof result === "object" ? result?.expiresIn : void 0;
+  const ttlMs = typeof expiresIn === "number" ? expiresIn * 1e3 : DEFAULT_TTL_MS;
+  return { tokenValue, ttlMs };
+}
+var asError = (error) => error instanceof Error ? error : new Error(String(error));
+function sortKeys(json) {
+  if (Array.isArray(json)) return json.map(sortKeys);
+  if (json === null || typeof json !== "object") return json;
+  return Object.fromEntries(
+    Object.keys(json).sort().map((name) => [name, sortKeys(json[name])])
+  );
+}
+function tokenArgsKey(tokenArgs) {
+  return JSON.stringify(sortKeys(convexToJson(tokenArgs ?? {})));
+}
+function useViewerToken({ issueViewerToken, sessionSecret, tokenArgs }) {
+  const argsKey = tokenArgsKey(tokenArgs);
+  const stableArgs = React.useMemo(() => tokenArgs ?? {}, [argsKey]);
+  const [issued, setIssued] = React.useState(null);
+  const [attempt, setAttempt] = React.useState(null);
+  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);
+  React.useEffect(() => {
+    currentArgsKeyRef.current = argsKey;
+  }, [argsKey]);
+  React.useEffect(() => {
+    return () => {
+      if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
+    };
+  }, []);
+  const request = React.useCallback(async () => {
+    const renew = () => {
+      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;
+    const { tokenValue, ttlMs } = extractTokenResult(result);
+    setIssued({ token: tokenValue, argsKey });
+    setAttempt(null);
+    if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
+    refreshTimerRef.current = setTimeout(renew, Math.max(ttlMs - REFRESH_BUFFER_MS, MIN_REFRESH_MS));
+    return tokenValue;
+  }, [issueViewerToken, stableArgs, argsKey, sessionSecret]);
+  const issueOnce = React.useCallback(() => {
+    const inFlight = inFlightRef.current;
+    if (inFlight?.argsKey === argsKey) return inFlight.promise;
+    setAttempt({ argsKey, status: "loading" });
+    const promise = request().catch((error) => {
+      if (currentArgsKeyRef.current === argsKey) setAttempt({ argsKey, status: "error", error: asError(error) });
+      throw error;
+    });
+    const settle = () => {
+      if (inFlightRef.current?.promise === promise) inFlightRef.current = null;
+    };
+    promise.then(settle, settle);
+    inFlightRef.current = { argsKey, promise };
+    return promise;
+  }, [request, argsKey]);
+  const hasAttempt = currentAttempt !== null;
+  React.useEffect(() => {
+    if (token || hasAttempt) return;
+    issueOnce().catch(() => {
+    });
+  }, [token, hasAttempt, issueOnce]);
+  const reissueToken = React.useCallback(
+    () => issueOnce().catch(() => {
+      setIssued((current) => current?.argsKey === argsKey ? null : current);
+      return null;
+    }),
+    [issueOnce, argsKey]
+  );
+  const retryToken = React.useCallback(() => 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 };
+}
+
+// src/media-session.ts
+function useMediaSession({ issueViewerToken, tokenArgs, baseUrl }) {
+  const [sessionSecret] = React2.useState(() => typeof crypto !== "undefined" ? crypto.randomUUID() : "");
+  const issueViewerTokenAction = useAction(issueViewerToken);
+  const { token, tokenStatus, tokenError, reissueToken, retryToken } = useViewerToken({
+    issueViewerToken: issueViewerTokenAction,
+    sessionSecret,
+    tokenArgs
+  });
+  const url = React2.useCallback(
+    (media, options) => {
+      if (!baseUrl) throw new Error("Devultur `url()` requires `baseUrl` on <DevulturProvider>");
+      return mediaUrl(baseUrl, media, { ...options, token: token ?? void 0 });
+    },
+    [baseUrl, token]
+  );
+  const getCaptionsText = React2.useCallback(
+    async (media, locale) => {
+      if (!baseUrl) throw new Error("Devultur `getCaptionsText()` requires `baseUrl` on <DevulturProvider>");
+      const path = mediaCaptionPath(media, locale);
+      if (!path) throw new Error("getCaptionsText: the reference is not a video");
+      const isPrivate = media.visibility === "private";
+      const fetchWith = (viewerToken) => fetch(buildMediaUrl(baseUrl, path, { token: viewerToken }), {
+        headers: sessionSecret ? { [SESSION_HEADER2]: sessionSecret } : void 0
+      });
+      let response = await fetchWith(isPrivate ? token ?? void 0 : void 0);
+      if (isPrivate && response.status === 401 && await isSessionMismatch(response)) {
+        const fresh = await reissueToken();
+        if (fresh) response = await fetchWith(fresh);
+      }
+      if (!response.ok) throw new Error(`Captions fetch failed: ${response.status}`);
+      return response.text();
+    },
+    [baseUrl, token, reissueToken, sessionSecret]
+  );
+  return React2.useMemo(
+    () => ({
+      token,
+      tokenStatus,
+      tokenError,
+      retryToken,
+      baseUrl: baseUrl ?? null,
+      sessionSecret,
+      url,
+      getCaptionsText,
+      reissueToken
+    }),
+    [token, tokenStatus, tokenError, retryToken, baseUrl, sessionSecret, url, getCaptionsText, reissueToken]
+  );
+}
+
 // src/media-upload-derive.ts
 function deriveUploadState(local, videoState, retry) {
   const { phase, percent, file, failure, media, processRequested } = local;
@@ -215,7 +339,7 @@ function deriveUploadState(local, videoState, retry) {
 }
 
 // src/crop-upload.tsx
-import React from "react";
+import React3 from "react";
 import { ImageCropper } from "@devultur/react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var DEFAULT_LABELS = {
@@ -239,18 +363,18 @@ function CropUpload({
   children
 }) {
   const text = { ...DEFAULT_LABELS, ...labels };
-  const [pendingFile, setPendingFile] = React.useState(null);
-  const inputRef = React.useRef(null);
+  const [pendingFile, setPendingFile] = React3.useState(null);
+  const inputRef = React3.useRef(null);
   const { upload, state, cancel, reset } = useMediaUpload({ visibility, replaces, onComplete });
-  const pickFile = React.useCallback(() => inputRef.current?.click(), []);
-  const handleCrop = React.useCallback(
+  const pickFile = React3.useCallback(() => inputRef.current?.click(), []);
+  const handleCrop = React3.useCallback(
     (baked) => {
       setPendingFile(null);
       upload(baked);
     },
     [upload]
   );
-  const resetAll = React.useCallback(() => {
+  const resetAll = React3.useCallback(() => {
     setPendingFile(null);
     reset();
   }, [reset]);
@@ -302,9 +426,268 @@ 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 { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function DocumentLink({ media, download = false, children, labels, ...anchorProps }) {
+  const { url } = useDevultur();
+  if (!media) return null;
+  const text = children ?? attachmentName(media, mergeAttachmentLabels(labels).untitled);
+  if (download || media.visibility === "private") {
+    return /* @__PURE__ */ jsx3(DownloadLink, { media, ...anchorProps, children: text });
+  }
+  return /* @__PURE__ */ jsx3("a", { href: url(media), ...anchorProps, children: text });
+}
+function AttachmentCard({
+  media,
+  contentType,
+  onOpen,
+  preview,
+  headingLevel = 3,
+  locale,
+  labels,
+  ...articleProps
+}) {
+  const headingId = React4.useId();
+  if (!media) return null;
+  const text = mergeAttachmentLabels(labels);
+  const kind = attachmentKindOf(media, contentType);
+  const details = attachmentDetails(media, kind, text, locale ?? text.locale);
+  const Heading = `h${headingLevel}`;
+  return /* @__PURE__ */ jsxs2("article", { "aria-labelledby": headingId, "data-kind": kind, ...articleProps, children: [
+    preview ?? /* @__PURE__ */ jsx3(AttachmentIcon, { kind }),
+    /* @__PURE__ */ jsx3(Heading, { id: headingId, "data-part": "name", children: attachmentName(media, text.untitled) }),
+    /* @__PURE__ */ jsx3("p", { "data-part": "details", children: details.join(" \xB7 ") }),
+    /* @__PURE__ */ jsxs2("div", { "data-part": "actions", children: [
+      /* @__PURE__ */ jsx3(DownloadLink, { media, "aria-describedby": headingId, "data-part": "download", children: text.download }),
+      onOpen && /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => onOpen(media), "aria-describedby": headingId, "data-part": "open", children: text.open })
+    ] })
+  ] });
+}
+
+// src/image.tsx
+import React5 from "react";
+import { mediaUrl as mediaUrl2 } from "@devultur/core";
+
+// src/responsive-image.ts
+function normalizeWidths(widths) {
+  const validWidths = widths.filter((width) => Number.isInteger(width) && width > 0);
+  return [...new Set(validWidths)].sort((a, b) => a - b);
+}
+function buildSrcSet(widths, urlForWidth) {
+  return widths.map((width) => `${urlForWidth(width)} ${width}w`).join(", ");
+}
+function scaledHeight(targetWidth, width, height) {
+  if (!width || !height) return void 0;
+  return Math.round(targetWidth * height / width);
+}
+function pickWidth(widths, renderedWidth) {
+  const ascending = normalizeWidths(widths);
+  if (renderedWidth === null) return ascending.at(-1);
+  const fitting = ascending.filter((width) => width <= renderedWidth * 2);
+  return fitting.at(-1) ?? ascending[0];
+}
+var LENGTH = /^(\d+(?:\.\d+)?)(px|vw)$/;
+function lengthInPixels(length, viewportWidth) {
+  const match = LENGTH.exec(length.trim());
+  if (!match) return null;
+  const amount = Number(match[1]);
+  return match[2] === "vw" ? amount * viewportWidth / 100 : amount;
+}
+function matchesMedia(condition) {
+  if (typeof window.matchMedia !== "function") return false;
+  return window.matchMedia(condition).matches;
+}
+function renderedWidthFromSizes(sizes) {
+  if (!sizes || typeof window === "undefined") return null;
+  const entries = sizes.split(",").map((entry) => entry.trim());
+  for (const entry of entries) {
+    const lengthStart = entry.lastIndexOf(" ") + 1;
+    const condition = entry.slice(0, lengthStart).trim();
+    if (condition && !matchesMedia(condition)) continue;
+    return lengthInPixels(entry.slice(lengthStart), window.innerWidth);
+  }
+  return null;
+}
+
+// src/image.tsx
+import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
+function Image({
+  media,
+  width,
+  height,
+  fit,
+  format,
+  quality,
+  widths,
+  sizes,
+  fallback = null,
+  externalFallback,
+  render,
+  alt,
+  onLoadError,
+  ...imgProps
+}) {
+  const { url } = useDevultur();
+  const isPrivate = media?.visibility === "private";
+  const responsiveWidths = widths?.length ? normalizeWidths(widths) : null;
+  const variantOf = (variantWidth) => ({
+    width: variantWidth,
+    height: scaledHeight(variantWidth, width, height),
+    fit,
+    format,
+    quality
+  });
+  let transforms = { width, height, fit, format, quality };
+  if (responsiveWidths && isPrivate) {
+    const pickedWidth = pickWidth(responsiveWidths, renderedWidthFromSizes(sizes) ?? width ?? null);
+    if (pickedWidth) transforms = variantOf(pickedWidth);
+  }
+  const { blobSrc, isFailed, handleError } = usePrivateImage(media, transforms, onLoadError);
+  let src;
+  let responsiveProps = {};
+  if (isFailed || !media) {
+    src = externalFallback ?? null;
+  } else if (isPrivate) {
+    src = blobSrc;
+  } else if (responsiveWidths) {
+    const largestWidth = responsiveWidths.at(-1);
+    src = url(media, variantOf(largestWidth));
+    const srcSet = buildSrcSet(responsiveWidths, (variantWidth) => url(media, variantOf(variantWidth)));
+    responsiveProps = { srcSet, sizes };
+  } else {
+    src = url(media, transforms);
+  }
+  if (!src) return /* @__PURE__ */ jsx4(Fragment, { children: fallback });
+  if (render) {
+    return React5.cloneElement(render, {
+      style: { ...render.props.style, backgroundImage: `url("${src}")` }
+    });
+  }
+  const lazyProps = responsiveWidths ? { loading: "lazy", decoding: "async" } : {};
+  return /* @__PURE__ */ jsx4(
+    "img",
+    {
+      src,
+      alt: alt ?? media?.alt,
+      width: width ?? media?.width,
+      height: height ?? media?.height,
+      onError: handleError,
+      ...lazyProps,
+      ...responsiveProps,
+      ...imgProps
+    }
+  );
+}
+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(() => {
+    sessionRef.current = { token, reissueToken, onLoadError };
+  });
+  const isPrivate = media?.visibility === "private";
+  const hasToken = token !== null;
+  const isTokenUnavailable = isPrivate && tokenStatus === "error";
+  const { width, height, fit, format, quality } = transforms;
+  React5.useEffect(() => {
+    setIsFailed(false);
+    setBlobSrc(null);
+  }, [media]);
+  React5.useEffect(() => {
+    if (!isTokenUnavailable || !media) return;
+    sessionRef.current.onLoadError?.(tokenUnavailableError(tokenError));
+  }, [isTokenUnavailable, media, tokenError]);
+  React5.useEffect(() => {
+    if (!isPrivate || isFailed || !media || !hasToken) return;
+    let cancelled = false;
+    let objectUrl = null;
+    if (!baseUrl) throw new Error("Devultur `url()` requires `baseUrl` on <DevulturProvider>");
+    const fetchTransforms = { width, height, fit, format, quality };
+    const fail = (error) => {
+      if (cancelled) return;
+      setIsFailed(true);
+      sessionRef.current.onLoadError?.(error);
+    };
+    (async () => {
+      try {
+        const response = await fetchMedia({
+          buildUrl: (viewerToken) => mediaUrl2(baseUrl, media, { ...fetchTransforms, token: viewerToken }),
+          token: sessionRef.current.token,
+          sessionSecret,
+          reissueToken: sessionRef.current.reissueToken
+        });
+        if (!response.ok) {
+          const status = response.status;
+          fail(new MediaFetchError("http_error", `Media fetch failed: ${status}`, status));
+          return;
+        }
+        objectUrl = URL.createObjectURL(await response.blob());
+        if (cancelled) {
+          URL.revokeObjectURL(objectUrl);
+          return;
+        }
+        setBlobSrc(objectUrl);
+      } catch (error) {
+        fail(error instanceof Error ? error : new Error(String(error)));
+      }
+    })();
+    return () => {
+      cancelled = true;
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    };
+  }, [isPrivate, isFailed, media, hasToken, baseUrl, sessionSecret, width, height, fit, format, quality]);
+  const handleError = React5.useCallback(() => setIsFailed(true), []);
+  return { blobSrc, isFailed: isFailed || isTokenUnavailable, handleError };
+}
+
+// src/media-library.tsx
+import React14 from "react";
+
+// src/media-library-item.tsx
+import React11 from "react";
+
+// src/pdf-thumbnail.tsx
+import React10 from "react";
+
 // src/media-resource.ts
-import React2 from "react";
-import { mediaPath, mediaUrl } from "@devultur/core";
+import React6 from "react";
+import { mediaPath, mediaUrl as mediaUrl3 } 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) {
@@ -312,13 +695,18 @@ function useMediaResource(media, options) {
   const { isEnabled, maxBytes, contentType } = options;
   const isPrivate = media?.visibility === "private";
   const isReady = !isPrivate || devultur.token !== null;
+  const isTokenUnavailable = isPrivate && devultur.tokenStatus === "error";
+  const tokenFailure = React6.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] = React2.useState(null);
-  const inputsRef = React2.useRef({ media, devultur, options });
-  React2.useEffect(() => {
+  const [settled, setSettled] = React6.useState(null);
+  const inputsRef = React6.useRef({ media, devultur, options });
+  React6.useEffect(() => {
     inputsRef.current = { media, devultur, options };
   });
-  React2.useEffect(() => {
+  React6.useEffect(() => {
     if (!requestKey || !isReady) return;
     const { media: target, devultur: context, options: current } = inputsRef.current;
     if (!target || !context.baseUrl) return;
@@ -326,7 +714,7 @@ function useMediaResource(media, options) {
     const controller = new AbortController();
     let value = null;
     loadMedia({
-      buildUrl: (viewerToken) => mediaUrl(baseUrl, target, { token: viewerToken }),
+      buildUrl: (viewerToken) => mediaUrl3(baseUrl, target, { token: viewerToken }),
       token: context.token,
       sessionSecret: context.sessionSecret,
       reissueToken: context.reissueToken,
@@ -350,44 +738,22 @@ function useMediaResource(media, options) {
   }, [requestKey, isReady]);
   if (!requestKey) return IDLE;
   if (!devultur.baseUrl) throw new Error("Devultur media previews require `baseUrl` on <DevulturProvider>");
+  if (tokenFailure) return { value: null, contentType: null, isLoading: false, error: tokenFailure };
   if (settled?.requestKey !== requestKey) return LOADING;
   return { value: settled.value, contentType: settled.contentType, isLoading: false, error: settled.error };
 }
 
-// src/media-object-url.ts
-var createObjectUrl = (bytes, contentType) => URL.createObjectURL(new Blob([bytes], { type: contentType }));
-var revokeObjectUrl = (objectUrl) => URL.revokeObjectURL(objectUrl);
-function useMediaObjectUrl(media, options) {
-  const { url } = useDevultur();
-  const isEnabled = (options?.enabled ?? true) && Boolean(media);
-  const isUnverifiedPublic = media?.visibility === "public" && !options?.contentType;
-  const resource = useMediaResource(media, {
-    isEnabled: isEnabled && !isUnverifiedPublic,
-    maxBytes: options?.maxBytes,
-    contentType: options?.contentType,
-    decode: createObjectUrl,
-    release: revokeObjectUrl
-  });
-  if (media && isEnabled && isUnverifiedPublic) {
-    return { objectUrl: url(media), contentType: null, isLoading: false, error: null };
-  }
-  return {
-    objectUrl: resource.value,
-    contentType: resource.contentType,
-    isLoading: resource.isLoading,
-    error: resource.error
-  };
-}
-
 // src/pdf-context.tsx
-import React3 from "react";
+import React7 from "react";
 
 // src/preview-labels.ts
 var ERROR_TEXT = {
   http_error: "The file couldn't be loaded.",
   too_large: "The file is too large to preview.",
   unsupported_type: "This file type can't be previewed.",
-  type_mismatch: "The file's content doesn't match its type."
+  type_mismatch: "The file's content doesn't match its type.",
+  token_unavailable: "Access to this file couldn't be granted. Try again.",
+  session_mismatch: "Your session changed. Reload the page."
 };
 var defaultPreviewLabels = {
   document: (title, pageCount) => `${title}, ${pageCount === 1 ? "1 page" : `${pageCount} pages`}`,
@@ -411,16 +777,16 @@ function mergePreviewLabels(...sources) {
 }
 
 // src/pdf-context.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var PdfPreviewContext = React3.createContext({});
+import { jsx as jsx5 } from "react/jsx-runtime";
+var PdfPreviewContext = React7.createContext({});
 function PdfPreviewProvider({
   pdfjs,
   workerSrc,
   labels,
   children
 }) {
-  const config = React3.useMemo(() => ({ pdfjs, workerSrc, labels }), [pdfjs, workerSrc, labels]);
-  return /* @__PURE__ */ jsx2(PdfPreviewContext.Provider, { value: config, children });
+  const config = React7.useMemo(() => ({ pdfjs, workerSrc, labels }), [pdfjs, workerSrc, labels]);
+  return /* @__PURE__ */ jsx5(PdfPreviewContext.Provider, { value: config, children });
 }
 var loadedModules = /* @__PURE__ */ new WeakMap();
 function loadOnce(loader) {
@@ -431,9 +797,9 @@ function loadOnce(loader) {
   return loading;
 }
 function usePdfjs(workerSrcOverride) {
-  const { pdfjs: loader, workerSrc } = React3.useContext(PdfPreviewContext);
-  const [loaded, setLoaded] = React3.useState(null);
-  React3.useEffect(() => {
+  const { pdfjs: loader, workerSrc } = React7.useContext(PdfPreviewContext);
+  const [loaded, setLoaded] = React7.useState(null);
+  React7.useEffect(() => {
     if (!loader) return;
     let isCurrent = true;
     loadOnce(loader).then((pdfjs) => {
@@ -448,61 +814,27 @@ function usePdfjs(workerSrcOverride) {
   if (!loaded.pdfjs) return { status: "unavailable" };
   return { status: "ready", pdfjs: loaded.pdfjs, workerSrc: workerSrcOverride ?? workerSrc };
 }
+function usePdfPageCounter() {
+  const { pdfjs: loader, workerSrc } = React7.useContext(PdfPreviewContext);
+  return React7.useMemo(() => {
+    if (!loader) return null;
+    return async (file) => {
+      const pdfjs = await loadOnce(loader);
+      if (!pdfjs) return null;
+      return countPages(pdfjs, file, workerSrc);
+    };
+  }, [loader, workerSrc]);
+}
 function usePreviewLabels(labels) {
-  const providerLabels = React3.useContext(PdfPreviewContext).labels;
+  const providerLabels = React7.useContext(PdfPreviewContext).labels;
   return mergePreviewLabels(providerLabels, labels);
 }
 
-// src/pdf-thumbnail.tsx
-import React6 from "react";
-
-// src/pdf-hooks.ts
-import React4 from "react";
-
-// src/pdf-render.ts
-var MOBILE_MAX_CANVAS_PIXELS = 5242880;
-var DESKTOP_MAX_CANVAS_PIXELS = 2 ** 25;
-function openPdf(pdfjs, bytes, workerSrc) {
-  if (workerSrc) pdfjs.GlobalWorkerOptions.workerSrc = workerSrc;
-  const source = { data: bytes.slice(), enableScripting: false, isEvalSupported: false };
-  return pdfjs.getDocument(source);
-}
-function isMobileDevice() {
-  if (typeof navigator === "undefined") return false;
-  return /Android|iPhone|iPad|iPod/.test(navigator.userAgent) || navigator.maxTouchPoints > 1;
-}
-function maxCanvasPixels() {
-  return isMobileDevice() ? MOBILE_MAX_CANVAS_PIXELS : DESKTOP_MAX_CANVAS_PIXELS;
-}
-function outputScale(cssWidth, cssHeight, maxPixels) {
-  const devicePixelRatio = typeof window !== "undefined" && window.devicePixelRatio || 1;
-  const cssPixels = cssWidth * cssHeight;
-  if (cssPixels <= 0) return devicePixelRatio;
-  if (cssPixels * devicePixelRatio ** 2 <= maxPixels) return devicePixelRatio;
-  return Math.sqrt(maxPixels / cssPixels);
-}
-function renderPage(page, canvas, cssWidth) {
-  const naturalViewport = page.getViewport({ scale: 1 });
-  const cssScale = cssWidth > 0 ? cssWidth / naturalViewport.width : 1;
-  const cssViewport = page.getViewport({ scale: cssScale });
-  const scale = outputScale(cssViewport.width, cssViewport.height, maxCanvasPixels());
-  const viewport = page.getViewport({ scale: cssScale * scale });
-  canvas.width = Math.floor(viewport.width);
-  canvas.height = Math.floor(viewport.height);
-  canvas.style.width = `${Math.floor(cssViewport.width)}px`;
-  canvas.style.height = `${Math.floor(cssViewport.height)}px`;
-  return page.render({ canvas, viewport });
-}
-async function pageText(page) {
-  const { items } = await page.getTextContent();
-  return items.map((item) => "str" in item && typeof item.str === "string" ? item.str : "").join(" ").replace(/\s+/g, " ").trim();
-}
-var isRenderCancelled = (error) => error instanceof Error && error.name === "RenderingCancelledException";
-
 // src/pdf-hooks.ts
+import React8 from "react";
 function useIsVisible(ref, rootMargin = "200px") {
-  const [isVisible, setIsVisible] = React4.useState(false);
-  React4.useEffect(() => {
+  const [isVisible, setIsVisible] = React8.useState(false);
+  React8.useEffect(() => {
     const element = ref.current;
     if (isVisible || !element) return;
     if (typeof IntersectionObserver === "undefined") {
@@ -523,12 +855,12 @@ function useIsVisible(ref, rootMargin = "200px") {
   return isVisible;
 }
 function usePdfDocument({ pdfjs, bytes, workerSrc }) {
-  const [state, setState] = React4.useState({
+  const [state, setState] = React8.useState({
     bytes: null,
     document: null,
     error: null
   });
-  React4.useEffect(() => {
+  React8.useEffect(() => {
     let isCurrent = true;
     const loadingTask = openPdf(pdfjs, bytes, workerSrc);
     loadingTask.promise.then((document2) => {
@@ -547,8 +879,8 @@ function usePdfDocument({ pdfjs, bytes, workerSrc }) {
 }
 function usePageRender(options) {
   const { document: document2, pageNumber, canvasRef, width, isEnabled, shouldExtractText = false } = options;
-  const [state, setState] = React4.useState({ isRendered: false, text: "" });
-  React4.useEffect(() => {
+  const [state, setState] = React8.useState({ isRendered: false, text: "" });
+  React8.useEffect(() => {
     const canvas = canvasRef.current;
     if (!document2 || !isEnabled || !canvas) return;
     let isCurrent = true;
@@ -578,8 +910,8 @@ function usePageRender(options) {
 }
 
 // src/pdf-preview.tsx
-import React5 from "react";
-import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import React9 from "react";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var VISUALLY_HIDDEN = {
   position: "absolute",
   width: 1,
@@ -602,11 +934,11 @@ function PdfPreview(props) {
     contentType: expectedType,
     decode: keepBytes
   });
-  if (error) return /* @__PURE__ */ jsx3(Fragment, { children: renderFallback(error) });
-  if (!bytes || pdfjsState.status === "loading") return /* @__PURE__ */ jsx3(Fragment, { children: loading });
+  if (error) return /* @__PURE__ */ jsx6(Fragment2, { children: renderFallback(error) });
+  if (!bytes || pdfjsState.status === "loading") return /* @__PURE__ */ jsx6(Fragment2, { children: loading });
   const label = title ?? media.filename ?? labels.untitledPdf;
-  if (pdfjsState.status === "unavailable") return /* @__PURE__ */ jsx3(PdfFrame, { bytes, label, className });
-  return /* @__PURE__ */ jsx3(
+  if (pdfjsState.status === "unavailable") return /* @__PURE__ */ jsx6(PdfFrame, { bytes, label, className });
+  return /* @__PURE__ */ jsx6(
     PdfCanvasDocument,
     {
       pdfjs: pdfjsState.pdfjs,
@@ -624,17 +956,17 @@ 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 = React5.useRef(null);
-  const [width, setWidth] = React5.useState(null);
-  React5.useLayoutEffect(() => {
+  const containerRef = React9.useRef(null);
+  const [width, setWidth] = React9.useState(null);
+  React9.useLayoutEffect(() => {
     if (document2) setWidth(containerRef.current?.clientWidth ?? 0);
   }, [document2]);
-  if (error) return /* @__PURE__ */ jsx3(Fragment, { children: renderFallback(error) });
-  if (!document2) return /* @__PURE__ */ jsx3(Fragment, { children: loading });
+  if (error) return /* @__PURE__ */ jsx6(Fragment2, { children: renderFallback(error) });
+  if (!document2) return /* @__PURE__ */ jsx6(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);
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       ref: containerRef,
@@ -642,7 +974,7 @@ function PdfCanvasDocument(props) {
       "aria-label": labels.document(label, document2.numPages),
       className,
       children: [
-        width !== null && pageNumbers.map((pageNumber) => /* @__PURE__ */ jsx3(
+        width !== null && pageNumbers.map((pageNumber) => /* @__PURE__ */ jsx6(
           PdfPageView,
           {
             document: document2,
@@ -652,7 +984,7 @@ function PdfCanvasDocument(props) {
           },
           pageNumber
         )),
-        isTruncated && /* @__PURE__ */ jsxs2("p", { children: [
+        isTruncated && /* @__PURE__ */ jsxs3("p", { children: [
           labels.pageCap(shownPageCount, document2.numPages),
           " ",
           renderFallback(null)
@@ -662,8 +994,8 @@ function PdfCanvasDocument(props) {
   );
 }
 function PdfPageView({ document: document2, pageNumber, width, label }) {
-  const pageRef = React5.useRef(null);
-  const canvasRef = React5.useRef(null);
+  const pageRef = React9.useRef(null);
+  const canvasRef = React9.useRef(null);
   const isVisible = useIsVisible(pageRef);
   const { isRendered, text } = usePageRender({
     document: document2,
@@ -674,46 +1006,46 @@ function PdfPageView({ document: document2, pageNumber, width, label }) {
     shouldExtractText: true
   });
   const placeholderStyle = isRendered ? void 0 : { aspectRatio: "1 / 1.4142", maxWidth: "100%" };
-  return /* @__PURE__ */ jsxs2("section", { ref: pageRef, "aria-label": label, style: placeholderStyle, children: [
-    /* @__PURE__ */ jsx3("canvas", { ref: canvasRef, style: { display: "block", maxWidth: "100%" } }),
-    text && /* @__PURE__ */ jsx3("p", { style: VISUALLY_HIDDEN, children: text })
+  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 })
   ] });
 }
 function PdfFrame({ bytes, label, className }) {
-  const [objectUrl, setObjectUrl] = React5.useState(null);
-  React5.useEffect(() => {
+  const [objectUrl, setObjectUrl] = React9.useState(null);
+  React9.useEffect(() => {
     const url = URL.createObjectURL(new Blob([bytes], { type: "application/pdf" }));
     setObjectUrl(url);
     return () => URL.revokeObjectURL(url);
   }, [bytes]);
   if (!objectUrl) return null;
-  return /* @__PURE__ */ jsx3("iframe", { src: objectUrl, title: label, referrerPolicy: "no-referrer", className });
+  return /* @__PURE__ */ jsx6("iframe", { src: objectUrl, title: label, referrerPolicy: "no-referrer", className });
 }
 
 // src/pdf-thumbnail.tsx
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx7, 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 = React6.useRef(null);
+  const containerRef = React10.useRef(null);
   const isVisible = useIsVisible(containerRef);
   const pdfjsState = usePdfjs(props.pdfWorkerSrc);
   const labels = usePreviewLabels(props.labels);
   const expectedType = media ? expectedContentType(media, contentType) : null;
-  const isPdf = previewKindOf(expectedType) === "pdf";
+  const isPdf2 = previewKindOf(expectedType) === "pdf";
   const { value: bytes, error } = useMediaResource(media, {
-    isEnabled: isVisible && isPdf && pdfjsState.status === "ready",
+    isEnabled: isVisible && isPdf2 && pdfjsState.status === "ready",
     maxBytes: props.maxBytes ?? DEFAULT_THUMBNAIL_MAX_BYTES,
     contentType: expectedType ?? void 0,
     decode: keepBytes
   });
   if (!media) return null;
-  const isUnavailable = !isPdf || pdfjsState.status === "unavailable" || error !== null;
+  const isUnavailable = !isPdf2 || pdfjsState.status === "unavailable" || error !== null;
   const content = () => {
     if (isUnavailable) return fallback;
     if (!bytes || pdfjsState.status !== "ready") return loading;
-    return /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx7(
       ThumbnailCanvas,
       {
         pdfjs: pdfjsState.pdfjs,
@@ -726,54 +1058,612 @@ function PdfThumbnail(props) {
       }
     );
   };
-  return /* @__PURE__ */ jsx4("div", { ref: containerRef, className: props.className, style: { width }, children: content() });
+  return /* @__PURE__ */ jsx7("div", { ref: containerRef, className: props.className, style: { width }, children: content() });
 }
 function ThumbnailCanvas({ pdfjs, workerSrc, bytes, width, label, fallback, loading }) {
-  const canvasRef = React6.useRef(null);
+  const canvasRef = React10.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__ */ jsx4(Fragment2, { children: fallback });
-  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+  if (error) return /* @__PURE__ */ jsx7(Fragment3, { children: fallback });
+  return /* @__PURE__ */ jsxs4(Fragment3, { children: [
     !isRendered && loading,
-    /* @__PURE__ */ jsx4("canvas", { ref: canvasRef, role: "img", "aria-label": label, style: { display: "block" } })
+    /* @__PURE__ */ jsx7("canvas", { ref: canvasRef, role: "img", "aria-label": label, style: { display: "block" } })
   ] });
 }
 
-// src/preview.tsx
-import { VideoPlayer } from "@devultur/react";
-import { Fragment as Fragment3, jsx as jsx5 } 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 }) {
-  const text = usePreviewLabels(labels);
-  if (!media) return null;
-  if (media.kind === "video") return /* @__PURE__ */ jsx5(VideoPreview, { media, className: viewProps.className });
-  const renderFallback = (error) => {
-    const fetchError = error instanceof MediaFetchError ? error : null;
-    if (typeof fallback === "function") return fallback(fetchError);
-    if (fallback !== void 0) return fallback;
-    return /* @__PURE__ */ jsx5(DefaultFallback, { media, error: fetchError, labels: text });
-  };
-  const expectedType = expectedContentType(media, contentType);
-  const kind = previewKindOf(expectedType);
-  if (!expectedType || !kind) return /* @__PURE__ */ jsx5(Fragment3, { children: renderFallback(unsupportedType(expectedType)) });
-  const loadingNode = loading === void 0 ? /* @__PURE__ */ jsx5(LoadingStatus, { text: text.loading }) : loading;
-  const props = { ...viewProps, media, expectedType, renderFallback, loading: loadingNode, labels: text };
-  if (kind === "text") return /* @__PURE__ */ jsx5(TextPreview, { ...props });
-  if (kind === "pdf") return /* @__PURE__ */ jsx5(PdfPreview, { ...props, maxBytes: props.maxBytes ?? DEFAULT_MAX_BYTES });
-  return /* @__PURE__ */ jsx5(BinaryPreview, { ...props, kind });
+// src/media-library-item.tsx
+import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var THUMBNAIL_WIDTH = 160;
+var THUMBNAIL_WIDTHS = [THUMBNAIL_WIDTH, THUMBNAIL_WIDTH * 2];
+function partClass(part, classNames) {
+  const own = part === "root" ? "devultur-media-library" : `devultur-media-library__${part}`;
+  const extra = classNames[part];
+  return extra ? `${own} ${extra}` : own;
 }
-var unsupportedType = (contentType) => new MediaFetchError("unsupported_type", `Can't preview ${contentType ?? "an unknown type"} inline`);
-function DefaultFallback({ media, error, labels }) {
-  return /* @__PURE__ */ jsx5(DownloadLink, { media, title: error ? labels.error(error.code) : void 0, children: media.filename ?? labels.download });
+var THUMBNAIL_STYLE = {
+  display: "block",
+  width: "100%",
+  height: "var(--devultur-library-thumbnail-height, 120px)",
+  objectFit: "cover"
+};
+function kindOf(record) {
+  if (record.type !== "file") return record.type;
+  return previewKindOf(record.contentType) ?? "file";
 }
-function LoadingStatus({ text }) {
-  return /* @__PURE__ */ jsx5("span", { role: "status", style: VISUALLY_HIDDEN, children: text });
+function Thumbnail({ record, media, pdfThumbnails }) {
+  const kind = kindOf(record);
+  const icon = /* @__PURE__ */ jsx8(AttachmentIcon, { kind });
+  if (!media) return icon;
+  if (record.type === "image") {
+    return /* @__PURE__ */ jsx8(
+      Image,
+      {
+        media,
+        width: THUMBNAIL_WIDTH,
+        widths: THUMBNAIL_WIDTHS,
+        sizes: `${THUMBNAIL_WIDTH}px`,
+        format: "auto",
+        alt: "",
+        style: THUMBNAIL_STYLE,
+        fallback: icon
+      }
+    );
+  }
+  if (kind !== "pdf" || !pdfThumbnails) return icon;
+  return /* @__PURE__ */ jsx8(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) })
+  ] });
+}
+var ITEM_STYLE = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "var(--devultur-library-item-gap, 0.25rem)",
+  cursor: "pointer",
+  overflowWrap: "anywhere"
+};
+function MediaLibraryItem(props) {
+  const { ref, record, isSelected, isActive, tabIndex, classNames, renderItem, onChoose, onFocus } = props;
+  const media = React11.useMemo(() => mediaFromRecord(record), [record]);
+  const handleKeyDown = (event) => {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    onChoose();
+  };
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      ref,
+      role: "option",
+      "aria-selected": isSelected,
+      tabIndex,
+      "data-selected": isSelected || void 0,
+      "data-type": record.type,
+      className: partClass("item", classNames),
+      style: {
+        ...ITEM_STYLE,
+        boxShadow: isSelected ? "0 0 0 2px var(--devultur-library-accent, currentColor)" : void 0
+      },
+      onClick: onChoose,
+      onKeyDown: handleKeyDown,
+      onFocus,
+      children: renderItem ? renderItem(record, { media, isSelected, isActive }) : /* @__PURE__ */ jsx8(
+        DefaultContent,
+        {
+          record,
+          media,
+          pdfThumbnails: props.pdfThumbnails,
+          labels: props.labels,
+          classNames
+        }
+      )
+    }
+  );
+}
+
+// src/media-library-labels.ts
+var defaultMediaLibraryLabels = {
+  search: "Search media",
+  searchPlaceholder: "Search by title or filename",
+  typeFilter: "Type",
+  allTypes: "All types",
+  types: { image: "Images", video: "Videos", file: "Files" },
+  results: "Media",
+  loading: "Loading media\u2026",
+  empty: "No media yet.",
+  noResults: (search) => `Nothing matches \u201C${search}\u201D.`,
+  loadMore: "Load more",
+  loadingMore: "Loading\u2026",
+  error: (error) => describeDevulturError(error) ?? "The media couldn't be loaded.",
+  retry: "Try again",
+  size: (bytes) => formatFileSize(bytes, "en")
+};
+function mergeMediaLibraryLabels(labels) {
+  const merged = { ...defaultMediaLibraryLabels };
+  for (const [key, value] of Object.entries(labels ?? {})) {
+    if (value !== void 0) merged[key] = value;
+  }
+  return merged;
+}
+
+// src/use-media-library.ts
+import React12 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(() => {
+    if (value === "") {
+      setDebounced("");
+      return;
+    }
+    const timer = setTimeout(() => setDebounced(value), delayMs);
+    return () => clearTimeout(timer);
+  }, [value, delayMs]);
+  return value === "" ? "" : debounced;
+}
+function useMediaLibrary(options = {}) {
+  const api = useDevulturApi();
+  const pageSize = options.pageSize ?? DEFAULT_PAGE_SIZE;
+  const requestedSearch = (options.search ?? "").trim();
+  const search = useDebouncedSearch(requestedSearch, SEARCH_DEBOUNCE_MS);
+  const isSearching = search !== "";
+  const typeArg = options.type ? { type: options.type } : {};
+  const reference = isSearching ? api.searchMedia : api.listMediaPage;
+  if (!reference) {
+    const missing = isSearching ? "searchMedia" : "listMediaPage";
+    throw new Error(`useMediaLibrary requires ${missing} in DevulturProvider api`);
+  }
+  const args = isSearching ? { search, ...typeArg } : typeArg;
+  const result = usePaginatedQuery(reference, args, { initialNumItems: pageSize });
+  const resultLoadMore = result.loadMore;
+  const loadMore = React12.useCallback(
+    (numItems) => resultLoadMore(numItems ?? pageSize),
+    [resultLoadMore, pageSize]
+  );
+  return {
+    items: result.results,
+    status: result.status,
+    loadMore,
+    isLoading: result.isLoading,
+    search,
+    isSearchPending: requestedSearch !== search
+  };
+}
+
+// src/use-roving-focus.ts
+import React13 from "react";
+function nextIndex(key, current, count, columns) {
+  const last = count - 1;
+  const clamp = (index) => Math.min(Math.max(index, 0), last);
+  switch (key) {
+    case "ArrowRight":
+      return clamp(current + 1);
+    case "ArrowLeft":
+      return clamp(current - 1);
+    case "ArrowDown":
+      return current + columns > last ? current : current + columns;
+    case "ArrowUp":
+      return current - columns < 0 ? current : current - columns;
+    case "Home":
+      return 0;
+    case "End":
+      return last;
+    default:
+      return null;
+  }
+}
+function columnCount(items) {
+  const firstTop = items[0]?.getBoundingClientRect();
+  if (!firstTop || firstTop.height === 0) return 1;
+  const inFirstRow = items.filter((item) => item?.getBoundingClientRect().top === firstTop.top);
+  return Math.max(inFirstRow.length, 1);
+}
+function useRovingFocus(count) {
+  const [activeIndex, setActiveIndex] = React13.useState(0);
+  const itemsRef = React13.useRef([]);
+  const currentIndex = Math.min(activeIndex, Math.max(count - 1, 0));
+  const itemRef = React13.useCallback(
+    (index) => (element) => {
+      itemsRef.current[index] = element;
+    },
+    []
+  );
+  const handleKeyDown = React13.useCallback(
+    (event) => {
+      if (count === 0) return;
+      const items = itemsRef.current.slice(0, count);
+      const target = nextIndex(event.key, currentIndex, count, columnCount(items));
+      if (target === null) return;
+      event.preventDefault();
+      setActiveIndex(target);
+      items[target]?.focus();
+    },
+    [count, currentIndex]
+  );
+  const tabIndex = (index) => index === currentIndex ? 0 : -1;
+  return { activeIndex: currentIndex, setActiveIndex, itemRef, handleKeyDown, tabIndex };
+}
+
+// src/media-library.tsx
+import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var MEDIA_TYPES = ["image", "video", "file"];
+var ROOT_STYLE = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "var(--devultur-library-gap, 0.75rem)"
+};
+var LIST_STYLE = {
+  display: "grid",
+  gridTemplateColumns: "repeat(auto-fill, minmax(var(--devultur-library-item-width, 160px), 1fr))",
+  gap: "var(--devultur-library-gap, 0.75rem)",
+  margin: 0,
+  padding: 0
+};
+function MediaLibrary(props) {
+  const labels = React14.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 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(
+    (record) => {
+      if (isSelectable) setSelectedKey(record.key);
+      onSelect(record, mediaFromRecord(record));
+    },
+    [isSelectable, onSelect]
+  );
+  return /* @__PURE__ */ jsxs6("div", { className: partClass("root", classNames), style: ROOT_STYLE, children: [
+    /* @__PURE__ */ jsx9(
+      "input",
+      {
+        type: "search",
+        className: partClass("search", classNames),
+        "aria-label": labels.search,
+        placeholder: labels.searchPlaceholder,
+        value: search,
+        onChange: (event) => setSearch(event.target.value)
+      }
+    ),
+    !props.type && /* @__PURE__ */ jsxs6(
+      "select",
+      {
+        className: partClass("filter", classNames),
+        "aria-label": labels.typeFilter,
+        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__ */ jsx9(
+      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 })
+        ] }),
+        children: /* @__PURE__ */ jsx9(
+          LibraryResults,
+          {
+            ...props,
+            type,
+            search,
+            labels,
+            classNames,
+            isSelectable,
+            selectedKeys,
+            onChoose: handleChoose
+          }
+        )
+      }
+    )
+  ] });
 }
-function VideoPreview({ media, className }) {
+function LibraryResults(props) {
+  const { labels, classNames } = props;
+  const library = useMediaLibrary({ type: props.type, search: props.search, pageSize: props.pageSize });
+  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 });
+  }
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx9("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(
+      "div",
+      {
+        role: "listbox",
+        "aria-label": labels.results,
+        "aria-busy": isLoadingMore || void 0,
+        "aria-multiselectable": props.multiple || void 0,
+        className: partClass("list", classNames),
+        style: LIST_STYLE,
+        onKeyDown: roving.handleKeyDown,
+        children: items.map((record, index) => /* @__PURE__ */ jsx9(
+          MediaLibraryItem,
+          {
+            ref: roving.itemRef(index),
+            record,
+            isSelected: props.isSelectable && props.selectedKeys.includes(record.key),
+            isActive: index === roving.activeIndex,
+            tabIndex: roving.tabIndex(index),
+            pdfThumbnails: props.pdfThumbnails ?? false,
+            labels,
+            classNames,
+            renderItem: props.renderItem,
+            onChoose: () => props.onChoose(record),
+            onFocus: () => roving.setActiveIndex(index)
+          },
+          record.key
+        ))
+      }
+    ),
+    canLoadMore && /* @__PURE__ */ jsx9(
+      "button",
+      {
+        type: "button",
+        className: partClass("more", classNames),
+        disabled: isLoadingMore,
+        onClick: () => library.loadMore(),
+        children: isLoadingMore ? labels.loadingMore : labels.loadMore
+      }
+    )
+  ] });
+}
+var LibraryErrorBoundary = class extends React14.Component {
+  state = { hasError: false, error: null };
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidUpdate(previous) {
+    if (previous.resetKey === this.props.resetKey || !this.state.hasError) return;
+    this.setState({ hasError: false, error: null });
+  }
+  retry = () => this.setState({ hasError: false, error: null });
+  render() {
+    if (this.state.hasError) return this.props.renderError(this.state.error, this.retry);
+    return this.props.children;
+  }
+};
+
+// src/media-object-url.ts
+var createObjectUrl = (bytes, contentType) => URL.createObjectURL(new Blob([bytes], { type: contentType }));
+var revokeObjectUrl = (objectUrl) => URL.revokeObjectURL(objectUrl);
+function useMediaObjectUrl(media, options) {
+  const { url } = useDevultur();
+  const isEnabled = (options?.enabled ?? true) && Boolean(media);
+  const isUnverifiedPublic = media?.visibility === "public" && !options?.contentType;
+  const resource = useMediaResource(media, {
+    isEnabled: isEnabled && !isUnverifiedPublic,
+    maxBytes: options?.maxBytes,
+    contentType: options?.contentType,
+    decode: createObjectUrl,
+    release: revokeObjectUrl
+  });
+  if (media && isEnabled && isUnverifiedPublic) {
+    return { objectUrl: url(media), contentType: null, isLoading: false, error: null };
+  }
+  return {
+    objectUrl: resource.value,
+    contentType: resource.contentType,
+    isLoading: resource.isLoading,
+    error: resource.error
+  };
+}
+
+// src/media-picker.tsx
+import React21 from "react";
+
+// src/media-picker-accept.ts
+function matchesAccept(candidate, accept) {
+  if (!accept || accept.length === 0) return true;
+  const type = candidate.type.toLowerCase();
+  const name = candidate.name.toLowerCase();
+  return accept.some((rawPattern) => {
+    const pattern = rawPattern.trim().toLowerCase();
+    if (pattern.startsWith(".")) return name.endsWith(pattern);
+    if (pattern.endsWith("/*")) return type.startsWith(pattern.slice(0, -1));
+    return type === pattern;
+  });
+}
+function mediaTypeOfPattern(pattern) {
+  const normalized = pattern.trim().toLowerCase();
+  if (normalized.startsWith("image/")) return "image";
+  if (normalized.startsWith("video/")) return "video";
+  return "file";
+}
+function mediaTypeOfAccept(accept) {
+  if (!accept || accept.length === 0) return void 0;
+  const types = new Set(accept.map(mediaTypeOfPattern));
+  if (types.size !== 1) return void 0;
+  return [...types][0];
+}
+var ACCEPT_OF_TYPE = {
+  image: ["image/*"],
+  video: ["video/*"],
+  file: void 0
+};
+function uploadAcceptOf(accept, type) {
+  if (accept && accept.length > 0) return accept;
+  return type ? ACCEPT_OF_TYPE[type] : void 0;
+}
+function recordMatchesAccept(record, accept) {
+  return matchesAccept({ name: record.filename, type: record.contentType }, accept);
+}
+
+// src/media-picker-context.ts
+import React15 from "react";
+var MediaPickerContext = React15.createContext(null);
+function useMediaPicker() {
+  const picker = React15.use(MediaPickerContext);
+  if (!picker) throw new Error("useMediaPicker must be used within <MediaPicker>");
+  return picker;
+}
+var mediaName = (media) => media.title ?? media.filename ?? media.id;
+
+// src/media-picker-labels.ts
+var defaultMediaPickerLabels = {
+  upload: (multiple) => multiple ? "Upload files" : "Upload a file",
+  dropHint: (multiple) => multiple ? "or drop files here" : "or drop a file here",
+  uploads: "Uploads",
+  progress: (filename) => `Uploading ${filename}`,
+  percent: (percent) => `${percent}%`,
+  uploading: (filename) => `Uploading ${filename}.`,
+  uploaded: (filename) => `${filename} uploaded and selected.`,
+  cancel: "Cancel",
+  cancelUpload: (filename) => `Cancel uploading ${filename}`,
+  cancelled: (filename) => `Upload of ${filename} cancelled.`,
+  notAccepted: (filename) => `${filename} isn't a file type you can pick here.`,
+  uploadError: (error) => describeDevulturError(error) ?? "The upload failed. Try again.",
+  retry: "Try again",
+  dismiss: "Dismiss",
+  selection: "Selected media",
+  empty: "Nothing selected.",
+  remove: "Remove",
+  removeItem: (name) => `Remove ${name}`,
+  clear: "Clear",
+  replace: "Replace",
+  selected: (name) => `${name} selected.`,
+  removed: (name) => `${name} removed.`,
+  cleared: "Selection cleared."
+};
+function mergeMediaPickerLabels(labels) {
+  const merged = { ...defaultMediaPickerLabels };
+  for (const [key, value] of Object.entries(labels ?? {})) {
+    if (value !== void 0) merged[key] = value;
+  }
+  return merged;
+}
+
+// src/media-picker-library.tsx
+import React16 from "react";
+import { jsx as jsx10 } 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(
+    () => accept ? (record) => recordMatchesAccept(record, accept) : void 0,
+    [accept]
+  );
+  return /* @__PURE__ */ jsx10(
+    MediaLibrary,
+    {
+      ...props,
+      type: picker.libraryType,
+      labels: picker.libraryLabels,
+      selectedKeys,
+      multiple: picker.multiple,
+      filter,
+      onSelect: (_record, media) => {
+        if (media) toggle(media);
+      }
+    }
+  );
+}
+
+// src/media-picker-selection.tsx
+import React18 from "react";
+
+// src/preview.tsx
+import { mediaPath as mediaPath2 } from "@devultur/core";
+
+// src/video-preview.tsx
+import React17 from "react";
+import { VideoPlayer } from "@devultur/react";
+import { Fragment as Fragment6, jsx as jsx11 } from "react/jsx-runtime";
+var UNAUTHORIZED = 401;
+function fetchErrorOf(error) {
+  if (error.status === UNAUTHORIZED && error.code === "session_mismatch") {
+    return new MediaFetchError("session_mismatch", "The delivery refused this session's token", UNAUTHORIZED);
+  }
+  if (error.status === UNAUTHORIZED) return tokenUnavailableError();
+  if (error.status) return new MediaFetchError("http_error", `Video fetch failed: ${error.status}`, error.status);
+  return null;
+}
+function VideoPreview({ media, renderFallback, className }) {
+  const { tokenStatus, tokenError, reissueToken } = useDevultur();
   const videoProps = useVideoProps(media);
+  const [failure, setFailure] = React17.useState(null);
+  const hasReissuedRef = React17.useRef(false);
+  const playerToken = videoProps?.token;
+  const handleError = React17.useCallback(
+    (error) => {
+      const isFirstMismatch = error.code === "session_mismatch" && !hasReissuedRef.current;
+      if (isFirstMismatch) {
+        hasReissuedRef.current = true;
+        void reissueToken();
+        return;
+      }
+      setFailure({ token: playerToken, error: fetchErrorOf(error) });
+    },
+    [reissueToken, playerToken]
+  );
   if (!videoProps) return null;
-  return /* @__PURE__ */ jsx5(VideoPlayer, { ...videoProps, className });
+  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 });
+}
+
+// src/preview.tsx
+import { Fragment as Fragment7, jsx as jsx12 } 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 }) {
+  const text = usePreviewLabels(labels);
+  if (!media) return null;
+  const renderFallback = (error) => {
+    const fetchError = error instanceof MediaFetchError ? error : null;
+    if (typeof fallback === "function") return fallback(fetchError);
+    if (fallback !== void 0) return fallback;
+    return /* @__PURE__ */ jsx12(DefaultFallback, { media, error: fetchError, labels: text });
+  };
+  if (media.kind === "video") {
+    return /* @__PURE__ */ jsx12(
+      VideoPreview,
+      {
+        media,
+        renderFallback,
+        className: viewProps.className
+      },
+      mediaPath2(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;
+  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 });
+}
+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: error ? labels.error(error.code) : void 0, children: media.filename ?? labels.download });
+}
+function LoadingStatus({ text }) {
+  return /* @__PURE__ */ jsx12("span", { role: "status", style: VISUALLY_HIDDEN, children: text });
 }
 function BinaryPreview({
   media,
@@ -790,13 +1680,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__ */ jsx5(Fragment3, { children: renderFallback(verified.error) });
-  if (!objectUrl) return /* @__PURE__ */ jsx5(Fragment3, { children: loading });
+  if (verified.error) return /* @__PURE__ */ jsx12(Fragment7, { children: renderFallback(verified.error) });
+  if (!objectUrl) return /* @__PURE__ */ jsx12(Fragment7, { children: loading });
   const label = title ?? media.filename ?? labels.untitledMedia;
   if (kind === "image") {
-    return /* @__PURE__ */ jsx5("img", { src: objectUrl, alt: label, width: media.width, height: media.height, className });
+    return /* @__PURE__ */ jsx12("img", { src: objectUrl, alt: label, width: media.width, height: media.height, className });
   }
-  return /* @__PURE__ */ jsx5("audio", { src: objectUrl, controls: true, "aria-label": label, className });
+  return /* @__PURE__ */ jsx12("audio", { src: objectUrl, controls: true, "aria-label": label, className });
 }
 var decodeText = (bytes) => new TextDecoder().decode(bytes);
 function TextPreview({
@@ -814,93 +1704,411 @@ function TextPreview({
     contentType: expectedType,
     decode: decodeText
   });
-  if (error) return /* @__PURE__ */ jsx5(Fragment3, { children: renderFallback(error) });
-  if (text === null) return /* @__PURE__ */ jsx5(Fragment3, { children: loading });
-  return /* @__PURE__ */ jsx5("pre", { title, className, children: text });
+  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 });
 }
 
-// src/react.tsx
-import { Fragment as Fragment4, jsx as jsx6 } from "react/jsx-runtime";
-var DevulturContext = React7.createContext(null);
-var DevulturApiContext = React7.createContext(null);
-var ProgressContext = React7.createContext(null);
-var REFRESH_BUFFER_MS = 5 * 60 * 1e3;
-var MIN_REFRESH_MS = 6e4;
-var DEFAULT_TTL_MS = DEFAULT_TOKEN_EXPIRY_SECONDS * 1e3;
-function extractTokenResult(result) {
-  const tokenValue = typeof result === "string" ? result : result.token;
-  const ttlMs = typeof result === "string" ? DEFAULT_TTL_MS : result.expiresIn * 1e3;
-  return { tokenValue, ttlMs };
+// src/media-picker-selection.tsx
+import { jsx as jsx13, 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 Heading = `h${headingLevel}`;
+  const cardHeadingLevel = headingLevel + 1;
+  const regionClass = className ? `devultur-media-picker__selection ${className}` : "devultur-media-picker__selection";
+  const handleOpen = (media) => setPreviewedId((current) => current === media.id ? null : media.id);
+  return /* @__PURE__ */ jsxs7(
+    "section",
+    {
+      ref: picker.selectionRef,
+      tabIndex: -1,
+      "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(
+            AttachmentCard,
+            {
+              media,
+              headingLevel: cardHeadingLevel,
+              labels: picker.attachmentLabels,
+              preview: media.kind === "image" ? /* @__PURE__ */ jsx13(Thumbnail2, { media }) : void 0,
+              onOpen: handleOpen
+            }
+          ),
+          previewedId === media.id && /* @__PURE__ */ jsx13(Preview, { media, title: mediaName(media) }),
+          /* @__PURE__ */ jsx13(
+            "button",
+            {
+              type: "button",
+              "aria-label": labels.removeItem(mediaName(media)),
+              onClick: () => picker.remove(media),
+              children: labels.remove
+            }
+          )
+        ] }, media.id)) }),
+        /* @__PURE__ */ jsx13(SelectionActions, {})
+      ]
+    }
+  );
 }
-function DevulturProvider({ api, baseUrl, children }) {
-  const [token, setToken] = React7.useState(null);
-  const [sessionSecret] = React7.useState(() => typeof crypto !== "undefined" ? crypto.randomUUID() : "");
-  const issueViewerToken = useAction(api.issueViewerToken);
-  const createUploadUrlAction = useAction(api.createUploadUrl);
-  const deleteMediaAction = useAction(api.deleteMedia);
-  const confirmUploadAction = useAction(api.confirmUpload ?? api.createUploadUrl);
-  const deleteVideoAction = useAction(api.deleteVideo ?? api.deleteMedia);
-  const refreshTimerRef = React7.useRef(null);
-  const reissueInFlightRef = React7.useRef(null);
-  const scheduleRefresh = React7.useCallback(
-    (ttlMs) => {
-      if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
-      const refreshIn = Math.max(ttlMs - REFRESH_BUFFER_MS, MIN_REFRESH_MS);
-      refreshTimerRef.current = setTimeout(() => {
-        issueViewerToken({ sessionSecret }).then((result) => {
-          const { tokenValue, ttlMs: nextTtl } = extractTokenResult(result);
-          setToken(tokenValue);
-          scheduleRefresh(nextTtl);
+function Thumbnail2({ media }) {
+  return /* @__PURE__ */ jsx13(
+    Image,
+    {
+      media,
+      width: THUMBNAIL_WIDTH2,
+      widths: [THUMBNAIL_WIDTH2, THUMBNAIL_WIDTH2 * 2],
+      sizes: `${THUMBNAIL_WIDTH2}px`,
+      format: "auto",
+      alt: ""
+    }
+  );
+}
+function SelectionActions() {
+  const picker = useMediaPicker();
+  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 })
+  ] });
+}
+
+// src/media-picker-upload.tsx
+import React19 from "react";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+function MediaPickerUpload({ className }) {
+  const picker = useMediaPicker();
+  const { labels, multiple } = picker;
+  const [isDragging, setIsDragging] = React19.useState(false);
+  const handleDragOver = (event) => {
+    event.preventDefault();
+    setIsDragging(true);
+  };
+  const handleDragLeave = (event) => {
+    if (event.currentTarget.contains(event.relatedTarget)) return;
+    setIsDragging(false);
+  };
+  const handleDrop = (event) => {
+    event.preventDefault();
+    setIsDragging(false);
+    const files = event.dataTransfer.files;
+    if (files.length > 0) picker.start(files);
+  };
+  const zoneClass = className ? `devultur-media-picker__upload ${className}` : "devultur-media-picker__upload";
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: dropping is a pointer shortcut; the button is the keyboard path.
+    /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        className: zoneClass,
+        "data-dragging": isDragging || void 0,
+        onDragOver: handleDragOver,
+        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)) })
+        ]
+      }
+    )
+  );
+}
+function UploadRow({ upload }) {
+  const picker = useMediaPicker();
+  const { labels } = picker;
+  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 })
+    ] });
+  }
+  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 })
+  ] });
+}
+
+// src/use-media-picker-uploads.ts
+import React20 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;
+async function pageCountOf(file, countPdfPages) {
+  if (!countPdfPages || !isPdf(file)) return void 0;
+  const pageCount = await countPdfPages(file).catch(() => null);
+  return pageCount ?? void 0;
+}
+function useMediaPickerUploads(options) {
+  const { upload } = useDevultur();
+  const [uploads, setUploads] = React20.useState([]);
+  const controllers = React20.useRef(/* @__PURE__ */ new Map());
+  const optionsRef = React20.useRef(options);
+  optionsRef.current = options;
+  const patch = React20.useCallback((id, changes) => {
+    setUploads((current) => current.map((entry) => entry.id === id ? { ...entry, ...changes } : entry));
+  }, []);
+  const drop = React20.useCallback((id) => {
+    controllers.current.delete(id);
+    setUploads((current) => current.filter((entry) => entry.id !== id));
+  }, []);
+  const run = React20.useCallback(
+    async (id, file) => {
+      const { labels, announce } = optionsRef.current;
+      const controller = new AbortController();
+      controllers.current.set(id, controller);
+      patch(id, { status: "uploading", fraction: 0, error: null });
+      announce(labels.uploading(file.name));
+      try {
+        const pageCount = await pageCountOf(file, optionsRef.current.countPdfPages);
+        const uploaded = await upload(file, {
+          pageCount,
+          signal: controller.signal,
+          onProgress: ({ fraction }) => patch(id, { fraction })
         });
-      }, refreshIn);
+        drop(id);
+        const media = { ...uploaded, sizeBytes: file.size, ...pageCount ? { pageCount } : {} };
+        optionsRef.current.onUploaded(media);
+        announce(labels.uploaded(file.name));
+      } catch (error) {
+        if (isAbortError(error)) {
+          drop(id);
+          announce(labels.cancelled(file.name));
+          return;
+        }
+        controllers.current.delete(id);
+        patch(id, { status: "failed", error: labels.uploadError(error), canRetry: true });
+      }
     },
-    [issueViewerToken, sessionSecret]
+    [upload, patch, drop]
   );
-  React7.useEffect(() => {
-    if (token) return;
-    issueViewerToken({ sessionSecret }).then((result) => {
-      const { tokenValue, ttlMs } = extractTokenResult(result);
-      setToken(tokenValue);
-      scheduleRefresh(ttlMs);
-    });
-  }, [token, issueViewerToken, scheduleRefresh, sessionSecret]);
-  const reissueToken = React7.useCallback(() => {
-    if (reissueInFlightRef.current) return reissueInFlightRef.current;
-    const pending = issueViewerToken({ sessionSecret }).then((result) => {
-      const { tokenValue, ttlMs } = extractTokenResult(result);
-      setToken(tokenValue);
-      scheduleRefresh(ttlMs);
-      reissueInFlightRef.current = null;
-      return tokenValue;
-    }).catch(() => {
-      reissueInFlightRef.current = null;
-      return null;
-    });
-    reissueInFlightRef.current = pending;
-    return pending;
-  }, [issueViewerToken, scheduleRefresh, sessionSecret]);
-  React7.useEffect(() => {
+  const start = React20.useCallback(
+    (files) => {
+      const { accept, multiple, labels } = optionsRef.current;
+      const chosen = multiple ? [...files] : [...files].slice(0, 1);
+      const entries = chosen.map((file) => {
+        const isAccepted = matchesAccept(file, accept);
+        return {
+          id: `upload-${nextUploadId++}`,
+          file,
+          fraction: 0,
+          status: isAccepted ? "uploading" : "failed",
+          error: isAccepted ? null : labels.notAccepted(file.name),
+          canRetry: false
+        };
+      });
+      setUploads((current) => [...current, ...entries]);
+      for (const entry of entries) {
+        if (entry.status === "uploading") run(entry.id, entry.file);
+      }
+    },
+    [run]
+  );
+  const cancel = React20.useCallback((id) => controllers.current.get(id)?.abort(), []);
+  const retry = React20.useCallback(
+    (id) => {
+      const entry = uploads.find((candidate) => candidate.id === id);
+      if (!entry?.canRetry) return;
+      run(id, entry.file);
+    },
+    [uploads, run]
+  );
+  React20.useEffect(() => {
+    const active = controllers.current;
     return () => {
-      if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
+      for (const controller of active.values()) controller.abort();
     };
   }, []);
-  const uploadUrl = React7.useCallback(
+  return { uploads, start, cancel, retry, dismiss: drop };
+}
+
+// src/media-picker.tsx
+import { Fragment as Fragment8, jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+var EMPTY = [];
+function selectionOf(props) {
+  if (props.value === void 0) return void 0;
+  if (props.multiple) return props.value;
+  return props.value ? [props.value] : EMPTY;
+}
+function emit(props, next) {
+  if (props.multiple) {
+    props.onChange(next);
+    return;
+  }
+  props.onChange(next[0] ?? null);
+}
+var isSame = (a, b) => a.id === b.id;
+function MediaPicker(props) {
+  const isMultiple = props.multiple ?? false;
+  const labels = React21.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 controlledSelection = selectionOf(props);
+  const selected = controlledSelection ?? ownSelection;
+  const selectedRef = React21.useRef(selected);
+  selectedRef.current = selected;
+  const propsRef = React21.useRef(props);
+  propsRef.current = props;
+  const isControlled = controlledSelection !== void 0;
+  const commit = React21.useCallback(
+    (next) => {
+      selectedRef.current = next;
+      if (!isControlled) setOwnSelection(next);
+      emit(propsRef.current, next);
+    },
+    [isControlled]
+  );
+  const announce = React21.useCallback((message) => setAnnouncement(message), []);
+  const select = React21.useCallback(
+    (media) => {
+      const current = selectedRef.current.filter((item) => !isSame(item, media));
+      commit(isMultiple ? [...current, media] : [media]);
+    },
+    [commit, isMultiple]
+  );
+  const remove = React21.useCallback(
+    (media) => {
+      commit(selectedRef.current.filter((item) => !isSame(item, media)));
+      announce(labels.removed(mediaName(media)));
+      selectionRef.current?.focus();
+    },
+    [commit, announce, labels]
+  );
+  const toggle = React21.useCallback(
+    (media) => {
+      const isSelected = selectedRef.current.some((item) => isSame(item, media));
+      if (isMultiple && isSelected) {
+        remove(media);
+        return;
+      }
+      select(media);
+      announce(labels.selected(mediaName(media)));
+    },
+    [isMultiple, remove, select, announce, labels]
+  );
+  const clear = React21.useCallback(() => {
+    commit([]);
+    announce(labels.cleared);
+    selectionRef.current?.focus();
+  }, [commit, announce, labels]);
+  const handleUploaded = React21.useCallback(
+    (media) => {
+      select(media);
+      selectionRef.current?.focus();
+    },
+    [select]
+  );
+  const uploads = useMediaPickerUploads({
+    accept,
+    multiple: isMultiple,
+    labels,
+    countPdfPages,
+    onUploaded: handleUploaded,
+    announce
+  });
+  const handleFileInput = (event) => {
+    const files = event.target.files;
+    if (files && files.length > 0) uploads.start(files);
+    event.target.value = "";
+  };
+  const picker = {
+    ...uploads,
+    selected,
+    multiple: isMultiple,
+    accept,
+    libraryType,
+    labels,
+    libraryLabels: props.libraryLabels,
+    attachmentLabels: props.attachmentLabels,
+    select,
+    toggle,
+    remove,
+    clear,
+    openFileDialog: () => inputRef.current?.click(),
+    announce,
+    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, {})
+  ] });
+  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(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept: accept?.join(","),
+        multiple: isMultiple,
+        tabIndex: -1,
+        "aria-hidden": true,
+        style: { display: "none" },
+        onChange: handleFileInput,
+        "data-part": "input"
+      }
+    ),
+    content,
+    /* @__PURE__ */ jsx15("div", { role: "status", "aria-live": "polite", style: VISUALLY_HIDDEN, children: announcement })
+  ] }) });
+}
+MediaPicker.Upload = MediaPickerUpload;
+MediaPicker.Library = MediaPickerLibrary;
+MediaPicker.Selection = MediaPickerSelection;
+
+// src/react.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+var DevulturContext = React22.createContext(null);
+var DevulturApiContext = React22.createContext(null);
+var ProgressContext = React22.createContext(null);
+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(
     async (file) => {
       const result = await createUploadUrlAction({ filename: file.name, contentType: file.type });
       return { url: result.url, key: result.key };
     },
     [createUploadUrlAction]
   );
-  const upload = React7.useCallback(
+  const upload = React22.useCallback(
     async (file, options) => {
       const dimensions = await readImageDimensions(file);
+      options?.signal?.throwIfAborted();
       const target = await createUploadUrlAction({
         filename: file.name,
         contentType: file.type,
         visibility: options?.visibility
       });
       await uploadFileWithProgress(target.url, file, { onBytes: options?.onProgress, signal: options?.signal });
-      if (api.confirmUpload) await confirmUploadBestEffort(confirmUploadAction, target.key, file, dimensions);
+      if (api.confirmUpload) {
+        const pageCount = options?.pageCount;
+        const hints = { ...dimensions, ...pageCount !== void 0 ? { pageCount } : {} };
+        await confirmUploadBestEffort(confirmUploadAction, target.key, file, hints);
+      }
       return {
         id: target.id,
         kind: target.kind,
@@ -912,59 +2120,23 @@ function DevulturProvider({ api, baseUrl, children }) {
     },
     [createUploadUrlAction, confirmUploadAction, api.confirmUpload]
   );
-  const url = React7.useCallback(
-    (media, options) => {
-      if (!baseUrl) throw new Error("Devultur `url()` requires `baseUrl` on <DevulturProvider>");
-      return mediaUrl2(baseUrl, media, { ...options, token: token ?? void 0 });
-    },
-    [baseUrl, token]
-  );
-  const getCaptionsText = React7.useCallback(
-    async (media, locale) => {
-      if (!baseUrl) throw new Error("Devultur `getCaptionsText()` requires `baseUrl` on <DevulturProvider>");
-      const path = mediaCaptionPath(media, locale);
-      if (!path) throw new Error("getCaptionsText: the reference is not a video");
-      const isPrivate = media.visibility === "private";
-      const fetchWith = (viewerToken) => fetch(buildMediaUrl(baseUrl, path, { token: viewerToken }), {
-        headers: sessionSecret ? { [SESSION_HEADER2]: sessionSecret } : void 0
-      });
-      let response = await fetchWith(isPrivate ? token ?? void 0 : void 0);
-      if (isPrivate && response.status === 401 && await isSessionMismatch(response)) {
-        const fresh = await reissueToken();
-        if (fresh) response = await fetchWith(fresh);
-      }
-      if (!response.ok) throw new Error(`Captions fetch failed: ${response.status}`);
-      return response.text();
-    },
-    [baseUrl, token, reissueToken, sessionSecret]
-  );
-  const deleteMedia = React7.useCallback(
+  const deleteMedia = React22.useCallback(
     (media) => {
       if (media.kind === "video" && api.deleteVideo) {
         deleteVideoAction({ videoId: media.id, visibility: media.visibility }).catch(console.error);
         return;
       }
-      deleteMediaAction({ key: mediaPath2(media) }).catch(console.error);
+      deleteMediaAction({ key: mediaPath3(media) }).catch(console.error);
     },
     [deleteMediaAction, deleteVideoAction, api.deleteVideo]
   );
-  const devulturValue = React7.useMemo(
-    () => ({
-      token,
-      baseUrl: baseUrl ?? null,
-      sessionSecret,
-      uploadUrl,
-      upload,
-      url,
-      getCaptionsText,
-      deleteMedia,
-      reissueToken
-    }),
-    [token, baseUrl, sessionSecret, uploadUrl, upload, url, getCaptionsText, deleteMedia, reissueToken]
+  const devulturValue = React22.useMemo(
+    () => ({ ...session, uploadUrl, upload, deleteMedia }),
+    [session, uploadUrl, upload, deleteMedia]
   );
-  let content = /* @__PURE__ */ jsx6(DevulturApiContext, { value: api, children: /* @__PURE__ */ jsx6(DevulturContext, { value: devulturValue, children }) });
+  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__ */ jsx6(
+    content = /* @__PURE__ */ jsx16(
       ProgressBridge,
       {
         save: api.saveProgress,
@@ -988,13 +2160,13 @@ function ProgressBridge({
   const saveMutation = useMutation(save);
   const markCompleteMutation = useMutation(markComplete);
   const resetMutation = useMutation(reset);
-  const onSave = React7.useCallback(
+  const onSave = React22.useCallback(
     async (videoId, position) => {
       await saveMutation({ videoId, position });
     },
     [saveMutation]
   );
-  const onLoad = React7.useCallback(
+  const onLoad = React22.useCallback(
     async (videoId) => {
       const result = await convex.query(load, { videoId });
       if (!result) return null;
@@ -1005,46 +2177,69 @@ function ProgressBridge({
     },
     [convex, load]
   );
-  const onMarkComplete = React7.useCallback(
+  const onMarkComplete = React22.useCallback(
     async (videoId) => {
       await markCompleteMutation({ videoId });
     },
     [markCompleteMutation]
   );
-  const onReset = React7.useCallback(
+  const onReset = React22.useCallback(
     async (videoId) => {
       await resetMutation({ videoId });
     },
     [resetMutation]
   );
-  const value = React7.useMemo(
+  const value = React22.useMemo(
     () => ({ save: onSave, load: onLoad, markComplete: onMarkComplete, reset: onReset }),
     [onSave, onLoad, onMarkComplete, onReset]
   );
-  return /* @__PURE__ */ jsx6(ProgressContext, { value, children });
+  return /* @__PURE__ */ jsx16(ProgressContext, { value, children });
 }
 function useDevultur() {
-  const context = React7.use(DevulturContext);
-  if (!context) throw new Error("useDevultur must be used within <DevulturProvider>");
+  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 = React7.use(ProgressContext);
+  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 React7.useMemo(() => {
+  return React22.useMemo(() => {
     if (!key) return null;
     if (!baseUrl) throw new Error("useMediaUrl requires `baseUrl` on <DevulturProvider>");
     const isPublic = visibilityFromKey(key) === "public";
-    return buildMediaUrl(baseUrl, key, { ...options, token: isPublic ? void 0 : token ?? void 0 });
+    return buildMediaUrl2(baseUrl, key, { ...options, token: isPublic ? void 0 : token ?? void 0 });
   }, [key, baseUrl, token, options]);
 }
-async function confirmUploadBestEffort(confirmUpload, key, file, dimensions) {
+async function confirmUploadBestEffort(confirmUpload, key, file, hints) {
   try {
-    await confirmUpload({ key, filename: file.name, ...dimensions });
+    await confirmUpload({ key, filename: file.name, ...hints });
   } catch (error) {
     console.warn("Devultur: could not record the upload; it is recorded later", error);
   }
@@ -1063,122 +2258,45 @@ async function readImageDimensions(file) {
 function useVideoProps(media, options) {
   const { token, baseUrl, sessionSecret } = useDevultur();
   const locales = options?.locales;
-  return React7.useMemo(() => {
+  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 = mediaCaptionPath(media, locale);
+      const path = mediaCaptionPath2(media, locale);
       if (!path) return [];
       const label = CaptionLocaleLabel[locale] ?? locale;
-      return [{ locale, label, src: buildMediaUrl(baseUrl, path, { token: viewerToken }) }];
+      return [{ locale, label, src: buildMediaUrl2(baseUrl, path, { token: viewerToken }) }];
     });
     return {
-      src: buildMediaUrl(baseUrl, mediaPath2(media), { token: viewerToken }),
+      src: buildMediaUrl2(baseUrl, mediaPath3(media), { token: viewerToken }),
       token: viewerToken,
       captions,
       sessionSecret: media.visibility === "private" ? sessionSecret : void 0
     };
   }, [media, baseUrl, token, locales, sessionSecret]);
 }
-function Image({
-  media,
-  width,
-  height,
-  fit,
-  format,
-  quality,
-  fallback = null,
-  externalFallback,
-  render,
-  alt,
-  ...imgProps
-}) {
-  const { url, token, baseUrl, reissueToken, sessionSecret } = useDevultur();
-  const [failed, setFailed] = React7.useState(false);
-  const [blobSrc, setBlobSrc] = React7.useState(null);
-  const sessionRef = React7.useRef({ token, reissueToken });
-  React7.useEffect(() => {
-    sessionRef.current = { token, reissueToken };
-  });
-  const isPrivate = media?.visibility === "private";
-  const hasToken = token !== null;
-  React7.useEffect(() => {
-    setFailed(false);
-    setBlobSrc(null);
-  }, [media]);
-  React7.useEffect(() => {
-    if (!isPrivate || failed || !media || !hasToken) return;
-    let cancelled = false;
-    let objectUrl = null;
-    if (!baseUrl) throw new Error("Devultur `url()` requires `baseUrl` on <DevulturProvider>");
-    const transforms = { width, height, fit, format, quality };
-    (async () => {
-      try {
-        const response = await fetchMedia({
-          buildUrl: (viewerToken) => mediaUrl2(baseUrl, media, { ...transforms, token: viewerToken }),
-          token: sessionRef.current.token,
-          sessionSecret,
-          reissueToken: sessionRef.current.reissueToken
-        });
-        if (response.ok) {
-          objectUrl = URL.createObjectURL(await response.blob());
-          if (cancelled) {
-            URL.revokeObjectURL(objectUrl);
-            return;
-          }
-          setBlobSrc(objectUrl);
-          return;
-        }
-      } catch {
-      }
-      if (!cancelled) setFailed(true);
-    })();
-    return () => {
-      cancelled = true;
-      if (objectUrl) URL.revokeObjectURL(objectUrl);
-    };
-  }, [isPrivate, failed, media, hasToken, baseUrl, sessionSecret, width, height, fit, format, quality]);
-  const handleError = React7.useCallback(() => setFailed(true), []);
-  let src;
-  if (failed || !media) {
-    src = externalFallback ?? null;
-  } else if (isPrivate) {
-    src = blobSrc;
-  } else {
-    src = url(media, { width, height, fit, format, quality });
-  }
-  if (!src) return /* @__PURE__ */ jsx6(Fragment4, { children: fallback });
-  if (render) {
-    return React7.cloneElement(render, {
-      style: { ...render.props.style, backgroundImage: `url("${src}")` }
-    });
-  }
-  return /* @__PURE__ */ jsx6(
-    "img",
-    {
-      src,
-      alt,
-      width: width ?? media?.width,
-      height: height ?? media?.height,
-      onError: handleError,
-      ...imgProps
-    }
-  );
-}
-function DownloadLink({ media, filename, children, ...anchorProps }) {
-  const { url, token, baseUrl, sessionSecret, reissueToken } = useDevultur();
-  const handleClick = React7.useCallback(
+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) => mediaUrl2(baseUrl, media, { download: filename ?? true, token: viewerToken }),
+        buildUrl: (viewerToken) => mediaUrl4(baseUrl, media, { download: filename ?? true, token: viewerToken }),
         token,
         sessionSecret,
         reissueToken
       });
-      if (!response.ok) return;
+      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;
@@ -1186,13 +2304,13 @@ function DownloadLink({ media, filename, children, ...anchorProps }) {
       anchor.click();
       URL.revokeObjectURL(objectUrl);
     },
-    [media, baseUrl, token, filename, sessionSecret, reissueToken]
+    [media, baseUrl, token, tokenStatus, tokenError, filename, sessionSecret, reissueToken, onDownloadError]
   );
   if (!media) return null;
-  return /* @__PURE__ */ jsx6("a", { href: url(media, { download: filename ?? true }), download: true, ...anchorProps, onClick: handleClick, children });
+  return /* @__PURE__ */ jsx16("a", { href: url(media, { download: filename ?? true }), download: true, ...anchorProps, onClick: handleClick, children });
 }
 function useDevulturMedia(key) {
-  const apiCtx = React7.use(DevulturApiContext);
+  const apiCtx = React22.use(DevulturApiContext);
   if (!apiCtx?.getMedia) {
     throw new Error("useDevulturMedia requires getMedia in DevulturProvider api");
   }
@@ -1249,7 +2367,7 @@ function useVideoState(media, options) {
   const { token, baseUrl, sessionSecret } = useDevultur();
   const status = useDevulturMedia(media?.kind === "video" ? media.id : null);
   const locales = options?.locales;
-  return React7.useMemo(() => {
+  return React22.useMemo(() => {
     if (media?.kind !== "video") return { phase: "idle" };
     if (status.isFailed) {
       return {
@@ -1262,12 +2380,12 @@ function useVideoState(media, options) {
     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 = buildMediaUrl(baseUrl, mediaPath2(media), { token: viewerToken });
+      const playlist = buildMediaUrl2(baseUrl, mediaPath3(media), { token: viewerToken });
       const captions = (locales ?? status.captionLocales).flatMap((locale) => {
-        const path = mediaCaptionPath(media, locale);
+        const path = mediaCaptionPath2(media, locale);
         if (!path) return [];
         const label = CaptionLocaleLabel[locale] ?? locale;
-        return [{ locale, label, src: buildMediaUrl(baseUrl, path, { token: viewerToken }) }];
+        return [{ locale, label, src: buildMediaUrl2(baseUrl, path, { token: viewerToken }) }];
       });
       return {
         phase: "ready",
@@ -1293,23 +2411,22 @@ function useVideoState(media, options) {
 }
 function useMediaUpload(options) {
   const { visibility, onComplete, onError, replaces, process, locales } = options ?? {};
-  const api = React7.use(DevulturApiContext);
-  if (!api) throw new Error("useMediaUpload must be used within <DevulturProvider>");
-  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] = React7.useState("idle");
-  const [percent, setPercent] = React7.useState(0);
-  const [currentFile, setCurrentFile] = React7.useState(null);
-  const [media, setMedia] = React7.useState(null);
-  const [uploadFailure, setUploadFailure] = React7.useState(null);
-  const [processRequested, setProcessRequested] = React7.useState(false);
-  const abortRef = React7.useRef(null);
-  const lastFileRef = React7.useRef(null);
-  const lastKeyRef = React7.useRef(null);
+  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 = React7.useCallback(
+  const triggerProcess = React22.useCallback(
     (key) => {
       if (!api.processVideo) {
         throw new Error("useMediaUpload: processing a video requires `processVideo` in the <DevulturProvider> api");
@@ -1322,7 +2439,7 @@ function useMediaUpload(options) {
     },
     [api.processVideo, processVideoAction]
   );
-  const runUpload = React7.useCallback(
+  const runUpload = React22.useCallback(
     async (file) => {
       const controller = new AbortController();
       abortRef.current = controller;
@@ -1374,7 +2491,7 @@ function useMediaUpload(options) {
       };
       setMedia(uploaded);
       setPhase("uploaded");
-      if (replaces) deleteMediaAction({ key: mediaPath2(replaces) }).catch(() => {
+      if (replaces) deleteMediaAction({ key: mediaPath3(replaces) }).catch(() => {
       });
       onComplete?.(uploaded);
       if ((process ?? true) && uploaded.kind === "video") triggerProcess(result.key);
@@ -1393,10 +2510,10 @@ function useMediaUpload(options) {
       onError
     ]
   );
-  const cancel = React7.useCallback(() => {
+  const cancel = React22.useCallback(() => {
     abortRef.current?.abort();
   }, []);
-  const reset = React7.useCallback(() => {
+  const reset = React22.useCallback(() => {
     abortRef.current?.abort();
     setPhase("idle");
     setPercent(0);
@@ -1405,15 +2522,15 @@ function useMediaUpload(options) {
     setUploadFailure(null);
     setProcessRequested(false);
   }, []);
-  const retry = React7.useCallback(() => {
+  const retry = React22.useCallback(() => {
     if (phase === "upload-failed" && lastFileRef.current) {
       runUpload(lastFileRef.current);
       return;
     }
     if (lastKeyRef.current) triggerProcess(lastKeyRef.current);
   }, [phase, runUpload, triggerProcess]);
-  React7.useEffect(() => () => abortRef.current?.abort(), []);
-  const state = React7.useMemo(
+  React22.useEffect(() => () => abortRef.current?.abort(), []);
+  const state = React22.useMemo(
     () => deriveUploadState(
       { phase, percent, file: currentFile, failure: uploadFailure, media, processRequested },
       videoState,
@@ -1421,23 +2538,38 @@ function useMediaUpload(options) {
     ),
     [phase, percent, currentFile, uploadFailure, media, processRequested, videoState, retry]
   );
-  const upload = React7.useCallback((file) => runUpload(file), [runUpload]);
+  const upload = React22.useCallback((file) => runUpload(file), [runUpload]);
   return { upload, state, cancel, reset };
 }
 export {
+  AttachmentCard,
   CropUpload,
+  DevulturCapabilityError,
   DevulturProvider,
+  DevulturViewerProvider,
+  DocumentLink,
   DownloadLink,
   Image,
   MediaFetchError,
+  MediaLibrary,
+  MediaPicker,
   PdfPreviewProvider,
   PdfThumbnail,
   Preview,
+  defaultAttachmentLabels,
+  defaultMediaLibraryLabels,
+  defaultMediaPickerLabels,
   defaultPreviewLabels,
+  formatDuration,
+  formatFileSize,
+  matchesAccept,
   useDevultur,
+  useDevulturApi,
   useDevulturMedia,
   useDevulturProgress,
+  useMediaLibrary,
   useMediaObjectUrl,
+  useMediaPicker,
   useMediaUpload,
   useMediaUrl,
   useVideoProps,