@devultur/convex 1.2.0 → 1.3.0

package/dist/react.js

@@ -1,16 +1,16 @@
 "use client";
 
 // src/react.tsx
-import React2 from "react";
+import React7 from "react";
 import {
   buildMediaUrl,
   CaptionLocaleLabel,
   DEFAULT_TOKEN_EXPIRY_SECONDS,
   MediaStatus,
   mediaCaptionPath,
-  mediaPath,
-  mediaUrl,
-  SESSION_HEADER,
+  mediaPath as mediaPath2,
+  mediaUrl as mediaUrl2,
+  SESSION_HEADER as SESSION_HEADER2,
   visibilityFromKey
 } from "@devultur/core";
 import {
@@ -29,6 +29,149 @@ 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);
+    this.name = "MediaFetchError";
+    this.code = code;
+    this.status = status;
+  }
+};
+async function fetchMedia(request) {
+  const { buildUrl, token, sessionSecret, reissueToken, signal, isPrivate = true, canReissue = true } = request;
+  const headers = isPrivate && sessionSecret ? { [SESSION_HEADER]: sessionSecret } : void 0;
+  const response = await fetch(buildUrl(isPrivate ? token ?? void 0 : void 0), { headers, signal });
+  if (!isPrivate || !canReissue || response.status !== 401) return response;
+  if (!await isSessionMismatch(response)) return response;
+  request.onReissue?.();
+  const freshToken = await reissueToken();
+  if (!freshToken) return response;
+  return fetch(buildUrl(freshToken), { headers, signal });
+}
+async function loadMedia(request) {
+  const response = await fetchMedia(request);
+  if (!response.ok) {
+    throw new MediaFetchError("http_error", `Media fetch failed: ${response.status}`, response.status);
+  }
+  const trusted = trustedContentType(request.contentType, response.headers.get("content-type"));
+  if (!trusted.ok) {
+    await response.body?.cancel();
+    throw new MediaFetchError(trusted.reason, `Refusing to preview: ${trusted.reason}`);
+  }
+  const bytes = await readMediaBody(response, request.maxBytes);
+  return { bytes, contentType: trusted.contentType };
+}
+function tooLarge(maxBytes) {
+  return new MediaFetchError("too_large", `Media is larger than ${maxBytes} bytes`);
+}
+async function readMediaBody(response, maxBytes) {
+  if (maxBytes === void 0) return new Uint8Array(await response.arrayBuffer());
+  const declaredBytes = Number(response.headers.get("content-length") ?? Number.NaN);
+  if (declaredBytes > maxBytes) {
+    await response.body?.cancel();
+    throw tooLarge(maxBytes);
+  }
+  if (!response.body) return new Uint8Array(0);
+  return readCapped(response.body, maxBytes);
+}
+async function readCapped(body, maxBytes) {
+  const reader = body.getReader();
+  const chunks = [];
+  let byteCount = 0;
+  for (; ; ) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    byteCount += value.byteLength;
+    if (byteCount > maxBytes) {
+      await reader.cancel();
+      throw tooLarge(maxBytes);
+    }
+    chunks.push(value);
+  }
+  const bytes = new Uint8Array(byteCount);
+  let offset = 0;
+  for (const chunk of chunks) {
+    bytes.set(chunk, offset);
+    offset += chunk.byteLength;
+  }
+  return bytes;
+}
+
 // src/media-upload-derive.ts
 function deriveUploadState(local, videoState, retry) {
   const { phase, percent, file, failure, media, processRequested } = local;
@@ -159,11 +302,461 @@ function CropUpload({
   ] });
 }
 
+// src/media-resource.ts
+import React2 from "react";
+import { mediaPath, mediaUrl } from "@devultur/core";
+var IDLE = { value: null, contentType: null, isLoading: false, error: null };
+var LOADING = { value: null, contentType: null, isLoading: true, error: null };
+function useMediaResource(media, options) {
+  const devultur = useDevultur();
+  const { isEnabled, maxBytes, contentType } = options;
+  const isPrivate = media?.visibility === "private";
+  const isReady = !isPrivate || devultur.token !== null;
+  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(() => {
+    inputsRef.current = { media, devultur, options };
+  });
+  React2.useEffect(() => {
+    if (!requestKey || !isReady) return;
+    const { media: target, devultur: context, options: current } = inputsRef.current;
+    if (!target || !context.baseUrl) return;
+    const baseUrl = context.baseUrl;
+    const controller = new AbortController();
+    let value = null;
+    loadMedia({
+      buildUrl: (viewerToken) => mediaUrl(baseUrl, target, { token: viewerToken }),
+      token: context.token,
+      sessionSecret: context.sessionSecret,
+      reissueToken: context.reissueToken,
+      isPrivate: target.visibility === "private",
+      signal: controller.signal,
+      maxBytes: current.maxBytes,
+      contentType: current.contentType
+    }).then((loaded) => {
+      if (controller.signal.aborted) return;
+      value = current.decode(loaded.bytes, loaded.contentType);
+      setSettled({ requestKey, value, contentType: loaded.contentType, isLoading: false, error: null });
+    }).catch((error) => {
+      if (controller.signal.aborted) return;
+      const failure = error instanceof Error ? error : new Error(String(error));
+      setSettled({ requestKey, value: null, contentType: null, isLoading: false, error: failure });
+    });
+    return () => {
+      controller.abort();
+      if (value !== null) current.release?.(value);
+    };
+  }, [requestKey, isReady]);
+  if (!requestKey) return IDLE;
+  if (!devultur.baseUrl) throw new Error("Devultur media previews require `baseUrl` on <DevulturProvider>");
+  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 { jsx as jsx2 } from "react/jsx-runtime";
+var PdfPreviewContext = React3.createContext({});
+function PdfPreviewProvider({ pdfjs, workerSrc, children }) {
+  const config = React3.useMemo(() => ({ pdfjs, workerSrc }), [pdfjs, workerSrc]);
+  return /* @__PURE__ */ jsx2(PdfPreviewContext.Provider, { value: config, children });
+}
+var loadedModules = /* @__PURE__ */ new WeakMap();
+function loadOnce(loader) {
+  const cached = loadedModules.get(loader);
+  if (cached) return cached;
+  const loading = loader().catch(() => null);
+  loadedModules.set(loader, loading);
+  return loading;
+}
+function usePdfjs(workerSrcOverride) {
+  const { pdfjs: loader, workerSrc } = React3.useContext(PdfPreviewContext);
+  const [loaded, setLoaded] = React3.useState(null);
+  React3.useEffect(() => {
+    if (!loader) return;
+    let isCurrent = true;
+    loadOnce(loader).then((pdfjs) => {
+      if (isCurrent) setLoaded({ loader, pdfjs });
+    });
+    return () => {
+      isCurrent = false;
+    };
+  }, [loader]);
+  if (!loader) return { status: "unavailable" };
+  if (loaded?.loader !== loader) return { status: "loading" };
+  if (!loaded.pdfjs) return { status: "unavailable" };
+  return { status: "ready", pdfjs: loaded.pdfjs, workerSrc: workerSrcOverride ?? workerSrc };
+}
+
+// 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
+function useIsVisible(ref, rootMargin = "200px") {
+  const [isVisible, setIsVisible] = React4.useState(false);
+  React4.useEffect(() => {
+    const element = ref.current;
+    if (isVisible || !element) return;
+    if (typeof IntersectionObserver === "undefined") {
+      setIsVisible(true);
+      return;
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (!entries.some((entry) => entry.isIntersecting)) return;
+        setIsVisible(true);
+        observer.disconnect();
+      },
+      { rootMargin }
+    );
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [ref, rootMargin, isVisible]);
+  return isVisible;
+}
+function usePdfDocument({ pdfjs, bytes, workerSrc }) {
+  const [state, setState] = React4.useState({
+    bytes: null,
+    document: null,
+    error: null
+  });
+  React4.useEffect(() => {
+    let isCurrent = true;
+    const loadingTask = openPdf(pdfjs, bytes, workerSrc);
+    loadingTask.promise.then((document2) => {
+      if (isCurrent) setState({ bytes, document: document2, error: null });
+    }).catch((error) => {
+      if (!isCurrent) return;
+      setState({ bytes, document: null, error: error instanceof Error ? error : new Error(String(error)) });
+    });
+    return () => {
+      isCurrent = false;
+      void loadingTask.destroy();
+    };
+  }, [pdfjs, bytes, workerSrc]);
+  if (state.bytes !== bytes) return { document: null, error: null };
+  return { document: state.document, error: state.error };
+}
+function usePageRender(options) {
+  const { document: document2, pageNumber, canvasRef, width, isEnabled, shouldExtractText = false } = options;
+  const [state, setState] = React4.useState({ isRendered: false, text: "" });
+  React4.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!document2 || !isEnabled || !canvas) return;
+    let isCurrent = true;
+    let page = null;
+    let renderTask = null;
+    const draw = async () => {
+      page = await document2.getPage(pageNumber);
+      if (!isCurrent) return;
+      renderTask = renderPage(page, canvas, width);
+      await renderTask.promise;
+      if (isCurrent) setState((previous) => ({ ...previous, isRendered: true }));
+      if (!shouldExtractText) return;
+      const text = await pageText(page);
+      if (isCurrent) setState((previous) => ({ ...previous, text }));
+    };
+    draw().catch((error) => {
+      if (isRenderCancelled(error) || !isCurrent) return;
+      console.warn(`[devultur] PDF page ${pageNumber} failed to render`, error);
+    });
+    return () => {
+      isCurrent = false;
+      renderTask?.cancel();
+      page?.cleanup();
+    };
+  }, [document2, pageNumber, canvasRef, width, isEnabled, shouldExtractText]);
+  return state;
+}
+
+// src/pdf-preview.tsx
+import React5 from "react";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var VISUALLY_HIDDEN = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  margin: -1,
+  padding: 0,
+  overflow: "hidden",
+  clip: "rect(0 0 0 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+var DEFAULT_MAX_PAGES = 500;
+var keepBytes = (bytes) => bytes;
+function PdfPreview(props) {
+  const { media, expectedType, maxBytes, fallback, loading, title, className, pdfWorkerSrc, maxPages } = props;
+  const pdfjsState = usePdfjs(pdfWorkerSrc);
+  const { value: bytes, error } = useMediaResource(media, {
+    isEnabled: true,
+    maxBytes,
+    contentType: expectedType,
+    decode: keepBytes
+  });
+  if (error) return /* @__PURE__ */ jsx3(Fragment, { children: fallback });
+  if (!bytes || pdfjsState.status === "loading") return /* @__PURE__ */ jsx3(Fragment, { children: loading });
+  const label = title ?? media.filename ?? "PDF";
+  if (pdfjsState.status === "unavailable") return /* @__PURE__ */ jsx3(PdfFrame, { bytes, label, className });
+  return /* @__PURE__ */ jsx3(
+    PdfCanvasDocument,
+    {
+      pdfjs: pdfjsState.pdfjs,
+      workerSrc: pdfjsState.workerSrc,
+      bytes,
+      label,
+      className,
+      fallback,
+      loading,
+      maxPages: maxPages ?? DEFAULT_MAX_PAGES
+    }
+  );
+}
+function PdfCanvasDocument(props) {
+  const { pdfjs, workerSrc, bytes, label, className, fallback, loading, maxPages } = props;
+  const { document: document2, error } = usePdfDocument({ pdfjs, bytes, workerSrc });
+  const containerRef = React5.useRef(null);
+  const [width, setWidth] = React5.useState(null);
+  React5.useLayoutEffect(() => {
+    if (document2) setWidth(containerRef.current?.clientWidth ?? 0);
+  }, [document2]);
+  if (error) return /* @__PURE__ */ jsx3(Fragment, { children: fallback });
+  if (!document2) return /* @__PURE__ */ jsx3(Fragment, { 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);
+  const pageCountLabel = document2.numPages === 1 ? "1 page" : `${document2.numPages} pages`;
+  return /* @__PURE__ */ jsxs2("div", { ref: containerRef, role: "document", "aria-label": `${label}, ${pageCountLabel}`, className, children: [
+    width !== null && pageNumbers.map((pageNumber) => /* @__PURE__ */ jsx3(PdfPageView, { document: document2, pageNumber, width }, pageNumber)),
+    isTruncated && /* @__PURE__ */ jsxs2("p", { children: [
+      "Showing the first ",
+      shownPageCount,
+      " of ",
+      document2.numPages,
+      " pages. ",
+      fallback
+    ] })
+  ] });
+}
+function PdfPageView({ document: document2, pageNumber, width }) {
+  const pageRef = React5.useRef(null);
+  const canvasRef = React5.useRef(null);
+  const isVisible = useIsVisible(pageRef);
+  const { isRendered, text } = usePageRender({
+    document: document2,
+    pageNumber,
+    canvasRef,
+    width,
+    isEnabled: isVisible,
+    shouldExtractText: true
+  });
+  const placeholderStyle = isRendered ? void 0 : { aspectRatio: "1 / 1.4142", maxWidth: "100%" };
+  return /* @__PURE__ */ jsxs2("section", { ref: pageRef, "aria-label": `Page ${pageNumber} of ${document2.numPages}`, style: placeholderStyle, children: [
+    /* @__PURE__ */ jsx3("canvas", { ref: canvasRef, style: { display: "block", maxWidth: "100%" } }),
+    text && /* @__PURE__ */ jsx3("p", { style: VISUALLY_HIDDEN, children: text })
+  ] });
+}
+function PdfFrame({ bytes, label, className }) {
+  const [objectUrl, setObjectUrl] = React5.useState(null);
+  React5.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 });
+}
+
+// src/pdf-thumbnail.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } 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 isVisible = useIsVisible(containerRef);
+  const pdfjsState = usePdfjs(props.pdfWorkerSrc);
+  const expectedType = media ? expectedContentType(media, contentType) : null;
+  const isPdf = previewKindOf(expectedType) === "pdf";
+  const { value: bytes, error } = useMediaResource(media, {
+    isEnabled: isVisible && isPdf && 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 content = () => {
+    if (isUnavailable) return fallback;
+    if (!bytes || pdfjsState.status !== "ready") return loading;
+    return /* @__PURE__ */ jsx4(
+      ThumbnailCanvas,
+      {
+        pdfjs: pdfjsState.pdfjs,
+        workerSrc: pdfjsState.workerSrc,
+        bytes,
+        width,
+        label: props.title ?? media.filename ?? "PDF",
+        fallback,
+        loading
+      }
+    );
+  };
+  return /* @__PURE__ */ jsx4("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 { 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: [
+    !isRendered && loading,
+    /* @__PURE__ */ jsx4("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, ...viewProps }) {
+  if (!media) return null;
+  const fallbackNode = fallback === void 0 ? /* @__PURE__ */ jsx5(DownloadLink, { media, children: media.filename ?? "Download" }) : fallback;
+  if (media.kind === "video") return /* @__PURE__ */ jsx5(VideoPreview, { media, className: viewProps.className });
+  const expectedType = expectedContentType(media, contentType);
+  const kind = previewKindOf(expectedType);
+  if (!expectedType || !kind) return /* @__PURE__ */ jsx5(Fragment3, { children: fallbackNode });
+  const props = { ...viewProps, media, expectedType, fallback: fallbackNode };
+  if (kind === "text") return /* @__PURE__ */ jsx5(TextPreview, { ...props });
+  if (kind === "pdf") {
+    const { maxBytes = DEFAULT_MAX_BYTES, loading = null } = props;
+    return /* @__PURE__ */ jsx5(PdfPreview, { ...props, maxBytes, loading });
+  }
+  return /* @__PURE__ */ jsx5(BinaryPreview, { ...props, kind });
+}
+function VideoPreview({ media, className }) {
+  const videoProps = useVideoProps(media);
+  if (!videoProps) return null;
+  return /* @__PURE__ */ jsx5(VideoPlayer, { ...videoProps, className });
+}
+function BinaryPreview({
+  media,
+  kind,
+  expectedType,
+  maxBytes = DEFAULT_MAX_BYTES,
+  fallback,
+  loading = null,
+  title,
+  className
+}) {
+  const { url } = useDevultur();
+  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: fallback });
+  if (!objectUrl) return /* @__PURE__ */ jsx5(Fragment3, { children: loading });
+  const label = title ?? media.filename ?? "Preview";
+  if (kind === "image") {
+    return /* @__PURE__ */ jsx5("img", { src: objectUrl, alt: label, width: media.width, height: media.height, className });
+  }
+  return /* @__PURE__ */ jsx5("audio", { src: objectUrl, controls: true, "aria-label": label, className });
+}
+var decodeText = (bytes) => new TextDecoder().decode(bytes);
+function TextPreview({
+  media,
+  expectedType,
+  maxTextBytes = DEFAULT_MAX_TEXT_BYTES,
+  fallback,
+  loading = null,
+  title,
+  className
+}) {
+  const { value: text, error } = useMediaResource(media, {
+    isEnabled: true,
+    maxBytes: maxTextBytes,
+    contentType: expectedType,
+    decode: decodeText
+  });
+  if (error) return /* @__PURE__ */ jsx5(Fragment3, { children: fallback });
+  if (text === null) return /* @__PURE__ */ jsx5(Fragment3, { children: loading });
+  return /* @__PURE__ */ jsx5("pre", { title, className, children: text });
+}
+
 // src/react.tsx
-import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
-var DevulturContext = React2.createContext(null);
-var DevulturApiContext = React2.createContext(null);
-var ProgressContext = React2.createContext(null);
+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;
@@ -173,16 +766,16 @@ function extractTokenResult(result) {
   return { tokenValue, ttlMs };
 }
 function DevulturProvider({ api, baseUrl, children }) {
-  const [token, setToken] = React2.useState(null);
-  const [sessionSecret] = React2.useState(() => typeof crypto !== "undefined" ? crypto.randomUUID() : "");
+  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 = React2.useRef(null);
-  const reissueInFlightRef = React2.useRef(null);
-  const scheduleRefresh = React2.useCallback(
+  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);
@@ -196,7 +789,7 @@ function DevulturProvider({ api, baseUrl, children }) {
     },
     [issueViewerToken, sessionSecret]
   );
-  React2.useEffect(() => {
+  React7.useEffect(() => {
     if (token) return;
     issueViewerToken({ sessionSecret }).then((result) => {
       const { tokenValue, ttlMs } = extractTokenResult(result);
@@ -204,7 +797,7 @@ function DevulturProvider({ api, baseUrl, children }) {
       scheduleRefresh(ttlMs);
     });
   }, [token, issueViewerToken, scheduleRefresh, sessionSecret]);
-  const reissueToken = React2.useCallback(() => {
+  const reissueToken = React7.useCallback(() => {
     if (reissueInFlightRef.current) return reissueInFlightRef.current;
     const pending = issueViewerToken({ sessionSecret }).then((result) => {
       const { tokenValue, ttlMs } = extractTokenResult(result);
@@ -219,19 +812,19 @@ function DevulturProvider({ api, baseUrl, children }) {
     reissueInFlightRef.current = pending;
     return pending;
   }, [issueViewerToken, scheduleRefresh, sessionSecret]);
-  React2.useEffect(() => {
+  React7.useEffect(() => {
     return () => {
       if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
     };
   }, []);
-  const uploadUrl = React2.useCallback(
+  const uploadUrl = React7.useCallback(
     async (file) => {
       const result = await createUploadUrlAction({ filename: file.name, contentType: file.type });
       return { url: result.url, key: result.key };
     },
     [createUploadUrlAction]
   );
-  const upload = React2.useCallback(
+  const upload = React7.useCallback(
     async (file, options) => {
       const dimensions = await readImageDimensions(file);
       const target = await createUploadUrlAction({
@@ -252,21 +845,21 @@ function DevulturProvider({ api, baseUrl, children }) {
     },
     [createUploadUrlAction, confirmUploadAction, api.confirmUpload]
   );
-  const url = React2.useCallback(
+  const url = React7.useCallback(
     (media, options) => {
       if (!baseUrl) throw new Error("Devultur `url()` requires `baseUrl` on <DevulturProvider>");
-      return mediaUrl(baseUrl, media, { ...options, token: token ?? void 0 });
+      return mediaUrl2(baseUrl, media, { ...options, token: token ?? void 0 });
     },
     [baseUrl, token]
   );
-  const getCaptionsText = React2.useCallback(
+  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_HEADER]: sessionSecret } : void 0
+        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)) {
@@ -278,17 +871,17 @@ function DevulturProvider({ api, baseUrl, children }) {
     },
     [baseUrl, token, reissueToken, sessionSecret]
   );
-  const deleteMedia = React2.useCallback(
+  const deleteMedia = React7.useCallback(
     (media) => {
       if (media.kind === "video" && api.deleteVideo) {
         deleteVideoAction({ videoId: media.id, visibility: media.visibility }).catch(console.error);
         return;
       }
-      deleteMediaAction({ key: mediaPath(media) }).catch(console.error);
+      deleteMediaAction({ key: mediaPath2(media) }).catch(console.error);
     },
     [deleteMediaAction, deleteVideoAction, api.deleteVideo]
   );
-  const devulturValue = React2.useMemo(
+  const devulturValue = React7.useMemo(
     () => ({
       token,
       baseUrl: baseUrl ?? null,
@@ -302,9 +895,9 @@ function DevulturProvider({ api, baseUrl, children }) {
     }),
     [token, baseUrl, sessionSecret, uploadUrl, upload, url, getCaptionsText, deleteMedia, reissueToken]
   );
-  let content = /* @__PURE__ */ jsx2(DevulturApiContext, { value: api, children: /* @__PURE__ */ jsx2(DevulturContext, { value: devulturValue, children }) });
+  let content = /* @__PURE__ */ jsx6(DevulturApiContext, { value: api, children: /* @__PURE__ */ jsx6(DevulturContext, { value: devulturValue, children }) });
   if (api.saveProgress && api.loadProgress && api.markComplete && api.resetProgress) {
-    content = /* @__PURE__ */ jsx2(
+    content = /* @__PURE__ */ jsx6(
       ProgressBridge,
       {
         save: api.saveProgress,
@@ -328,13 +921,13 @@ function ProgressBridge({
   const saveMutation = useMutation(save);
   const markCompleteMutation = useMutation(markComplete);
   const resetMutation = useMutation(reset);
-  const onSave = React2.useCallback(
+  const onSave = React7.useCallback(
     async (videoId, position) => {
       await saveMutation({ videoId, position });
     },
     [saveMutation]
   );
-  const onLoad = React2.useCallback(
+  const onLoad = React7.useCallback(
     async (videoId) => {
       const result = await convex.query(load, { videoId });
       if (!result) return null;
@@ -345,37 +938,37 @@ function ProgressBridge({
     },
     [convex, load]
   );
-  const onMarkComplete = React2.useCallback(
+  const onMarkComplete = React7.useCallback(
     async (videoId) => {
       await markCompleteMutation({ videoId });
     },
     [markCompleteMutation]
   );
-  const onReset = React2.useCallback(
+  const onReset = React7.useCallback(
     async (videoId) => {
       await resetMutation({ videoId });
     },
     [resetMutation]
   );
-  const value = React2.useMemo(
+  const value = React7.useMemo(
     () => ({ save: onSave, load: onLoad, markComplete: onMarkComplete, reset: onReset }),
     [onSave, onLoad, onMarkComplete, onReset]
   );
-  return /* @__PURE__ */ jsx2(ProgressContext, { value, children });
+  return /* @__PURE__ */ jsx6(ProgressContext, { value, children });
 }
 function useDevultur() {
-  const context = React2.use(DevulturContext);
+  const context = React7.use(DevulturContext);
   if (!context) throw new Error("useDevultur must be used within <DevulturProvider>");
   return context;
 }
 function useDevulturProgress() {
-  const context = React2.use(ProgressContext);
+  const context = React7.use(ProgressContext);
   if (!context) throw new Error("useDevulturProgress requires progress API in DevulturProvider");
   return context;
 }
 function useMediaUrl(key, options) {
   const { token, baseUrl } = useDevultur();
-  return React2.useMemo(() => {
+  return React7.useMemo(() => {
     if (!key) return null;
     if (!baseUrl) throw new Error("useMediaUrl requires `baseUrl` on <DevulturProvider>");
     const isPublic = visibilityFromKey(key) === "public";
@@ -403,7 +996,7 @@ async function readImageDimensions(file) {
 function useVideoProps(media, options) {
   const { token, baseUrl, sessionSecret } = useDevultur();
   const locales = options?.locales;
-  return React2.useMemo(() => {
+  return React7.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;
@@ -414,7 +1007,7 @@ function useVideoProps(media, options) {
       return [{ locale, label, src: buildMediaUrl(baseUrl, path, { token: viewerToken }) }];
     });
     return {
-      src: buildMediaUrl(baseUrl, mediaPath(media), { token: viewerToken }),
+      src: buildMediaUrl(baseUrl, mediaPath2(media), { token: viewerToken }),
       token: viewerToken,
       captions,
       sessionSecret: media.visibility === "private" ? sessionSecret : void 0
@@ -434,25 +1027,32 @@ function Image({
   alt,
   ...imgProps
 }) {
-  const { url, reissueToken, sessionSecret } = useDevultur();
-  const [failed, setFailed] = React2.useState(false);
-  const [blobSrc, setBlobSrc] = React2.useState(null);
-  const retriedRef = React2.useRef(false);
+  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";
-  React2.useEffect(() => {
-    retriedRef.current = false;
+  const hasToken = token !== null;
+  React7.useEffect(() => {
     setFailed(false);
     setBlobSrc(null);
   }, [media]);
-  React2.useEffect(() => {
-    if (!isPrivate || failed || !media) return;
+  React7.useEffect(() => {
+    if (!isPrivate || failed || !media || !hasToken) return;
     let cancelled = false;
     let objectUrl = null;
-    const targetUrl = url(media, { width, height, fit, format, quality });
+    if (!baseUrl) throw new Error("Devultur `url()` requires `baseUrl` on <DevulturProvider>");
+    const transforms = { width, height, fit, format, quality };
     (async () => {
       try {
-        const response = await fetch(targetUrl, {
-          headers: sessionSecret ? { [SESSION_HEADER]: sessionSecret } : void 0
+        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());
@@ -463,11 +1063,6 @@ function Image({
           setBlobSrc(objectUrl);
           return;
         }
-        if (response.status === 401 && !retriedRef.current && await isSessionMismatch(response)) {
-          retriedRef.current = true;
-          await reissueToken();
-          return;
-        }
       } catch {
       }
       if (!cancelled) setFailed(true);
@@ -476,8 +1071,8 @@ function Image({
       cancelled = true;
       if (objectUrl) URL.revokeObjectURL(objectUrl);
     };
-  }, [isPrivate, failed, media, url, sessionSecret, reissueToken, width, height, fit, format, quality]);
-  const handleError = React2.useCallback(() => setFailed(true), []);
+  }, [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;
@@ -486,13 +1081,13 @@ function Image({
   } else {
     src = url(media, { width, height, fit, format, quality });
   }
-  if (!src) return /* @__PURE__ */ jsx2(Fragment, { children: fallback });
+  if (!src) return /* @__PURE__ */ jsx6(Fragment4, { children: fallback });
   if (render) {
-    return React2.cloneElement(render, {
+    return React7.cloneElement(render, {
       style: { ...render.props.style, backgroundImage: `url("${src}")` }
     });
   }
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx6(
     "img",
     {
       src,
@@ -506,17 +1101,16 @@ function Image({
 }
 function DownloadLink({ media, filename, children, ...anchorProps }) {
   const { url, token, baseUrl, sessionSecret, reissueToken } = useDevultur();
-  const handleClick = React2.useCallback(
+  const handleClick = React7.useCallback(
     async (event) => {
       if (media?.visibility !== "private" || !baseUrl) return;
       event.preventDefault();
-      const headers = sessionSecret ? { [SESSION_HEADER]: sessionSecret } : void 0;
-      const buildUrl = (viewerToken) => mediaUrl(baseUrl, media, { download: filename ?? true, token: viewerToken });
-      let response = await fetch(buildUrl(token ?? void 0), { headers });
-      if (response.status === 401 && await isSessionMismatch(response)) {
-        const fresh = await reissueToken();
-        if (fresh) response = await fetch(buildUrl(fresh), { headers });
-      }
+      const response = await fetchMedia({
+        buildUrl: (viewerToken) => mediaUrl2(baseUrl, media, { download: filename ?? true, token: viewerToken }),
+        token,
+        sessionSecret,
+        reissueToken
+      });
       if (!response.ok) return;
       const objectUrl = URL.createObjectURL(await response.blob());
       const anchor = document.createElement("a");
@@ -528,10 +1122,10 @@ function DownloadLink({ media, filename, children, ...anchorProps }) {
     [media, baseUrl, token, filename, sessionSecret, reissueToken]
   );
   if (!media) return null;
-  return /* @__PURE__ */ jsx2("a", { href: url(media, { download: filename ?? true }), download: true, ...anchorProps, onClick: handleClick, children });
+  return /* @__PURE__ */ jsx6("a", { href: url(media, { download: filename ?? true }), download: true, ...anchorProps, onClick: handleClick, children });
 }
 function useDevulturMedia(key) {
-  const apiCtx = React2.use(DevulturApiContext);
+  const apiCtx = React7.use(DevulturApiContext);
   if (!apiCtx?.getMedia) {
     throw new Error("useDevulturMedia requires getMedia in DevulturProvider api");
   }
@@ -588,7 +1182,7 @@ function useVideoState(media, options) {
   const { token, baseUrl, sessionSecret } = useDevultur();
   const status = useDevulturMedia(media?.kind === "video" ? media.id : null);
   const locales = options?.locales;
-  return React2.useMemo(() => {
+  return React7.useMemo(() => {
     if (media?.kind !== "video") return { phase: "idle" };
     if (status.isFailed) {
       return {
@@ -601,7 +1195,7 @@ 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, mediaPath(media), { token: viewerToken });
+      const playlist = buildMediaUrl(baseUrl, mediaPath2(media), { token: viewerToken });
       const captions = (locales ?? status.captionLocales).flatMap((locale) => {
         const path = mediaCaptionPath(media, locale);
         if (!path) return [];
@@ -632,23 +1226,23 @@ function useVideoState(media, options) {
 }
 function useMediaUpload(options) {
   const { visibility, onComplete, onError, replaces, process, locales } = options ?? {};
-  const api = React2.use(DevulturApiContext);
+  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] = React2.useState("idle");
-  const [percent, setPercent] = React2.useState(0);
-  const [currentFile, setCurrentFile] = React2.useState(null);
-  const [media, setMedia] = React2.useState(null);
-  const [uploadFailure, setUploadFailure] = React2.useState(null);
-  const [processRequested, setProcessRequested] = React2.useState(false);
-  const abortRef = React2.useRef(null);
-  const lastFileRef = React2.useRef(null);
-  const lastKeyRef = React2.useRef(null);
+  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 videoState = useVideoState(media, { locales });
-  const triggerProcess = React2.useCallback(
+  const triggerProcess = React7.useCallback(
     (key) => {
       if (!api.processVideo) {
         throw new Error("useMediaUpload: processing a video requires `processVideo` in the <DevulturProvider> api");
@@ -661,7 +1255,7 @@ function useMediaUpload(options) {
     },
     [api.processVideo, processVideoAction]
   );
-  const runUpload = React2.useCallback(
+  const runUpload = React7.useCallback(
     async (file) => {
       const controller = new AbortController();
       abortRef.current = controller;
@@ -713,7 +1307,7 @@ function useMediaUpload(options) {
       };
       setMedia(uploaded);
       setPhase("uploaded");
-      if (replaces) deleteMediaAction({ key: mediaPath(replaces) }).catch(() => {
+      if (replaces) deleteMediaAction({ key: mediaPath2(replaces) }).catch(() => {
       });
       onComplete?.(uploaded);
       if ((process ?? true) && uploaded.kind === "video") triggerProcess(result.key);
@@ -732,10 +1326,10 @@ function useMediaUpload(options) {
       onError
     ]
   );
-  const cancel = React2.useCallback(() => {
+  const cancel = React7.useCallback(() => {
     abortRef.current?.abort();
   }, []);
-  const reset = React2.useCallback(() => {
+  const reset = React7.useCallback(() => {
     abortRef.current?.abort();
     setPhase("idle");
     setPercent(0);
@@ -744,15 +1338,15 @@ function useMediaUpload(options) {
     setUploadFailure(null);
     setProcessRequested(false);
   }, []);
-  const retry = React2.useCallback(() => {
+  const retry = React7.useCallback(() => {
     if (phase === "upload-failed" && lastFileRef.current) {
       runUpload(lastFileRef.current);
       return;
     }
     if (lastKeyRef.current) triggerProcess(lastKeyRef.current);
   }, [phase, runUpload, triggerProcess]);
-  React2.useEffect(() => () => abortRef.current?.abort(), []);
-  const state = React2.useMemo(
+  React7.useEffect(() => () => abortRef.current?.abort(), []);
+  const state = React7.useMemo(
     () => deriveUploadState(
       { phase, percent, file: currentFile, failure: uploadFailure, media, processRequested },
       videoState,
@@ -760,7 +1354,7 @@ function useMediaUpload(options) {
     ),
     [phase, percent, currentFile, uploadFailure, media, processRequested, videoState, retry]
   );
-  const upload = React2.useCallback((file) => runUpload(file), [runUpload]);
+  const upload = React7.useCallback((file) => runUpload(file), [runUpload]);
   return { upload, state, cancel, reset };
 }
 export {
@@ -768,9 +1362,14 @@ export {
   DevulturProvider,
   DownloadLink,
   Image,
+  MediaFetchError,
+  PdfPreviewProvider,
+  PdfThumbnail,
+  Preview,
   useDevultur,
   useDevulturMedia,
   useDevulturProgress,
+  useMediaObjectUrl,
   useMediaUpload,
   useMediaUrl,
   useVideoProps,