@ai-matrx/media 0.2.3 → 0.4.0

package/dist/react.cjs

@@ -535,7 +535,7 @@ function FileIcon2({
 }
 
 // src/react/inline-media-ref.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/core/context.ts
 var import_react = require("react");
@@ -565,8 +565,56 @@ function useMediaHostPorts() {
   return (0, import_react.useContext)(portsContext());
 }
 
-// src/core/use-media-blob.ts
+// src/core/diagnostics.ts
 var import_react2 = require("react");
+var LATCH_SLOT = /* @__PURE__ */ Symbol.for("ai-matrx.media.failure-latch");
+function latch() {
+  const host = globalThis;
+  host[LATCH_SLOT] ??= /* @__PURE__ */ new Set();
+  return host[LATCH_SLOT];
+}
+function failureMediaIdentity(ref, src) {
+  if (ref && typeof ref === "object" && ref.file_id) return `file:${ref.file_id}`;
+  const raw = typeof ref === "string" ? ref : (ref && typeof ref === "object" ? ref.url ?? null : null) ?? src ?? null;
+  if (!raw) return "<unknown-media>";
+  if (raw.startsWith("blob:")) return "blob:object-url";
+  try {
+    const u = new URL(raw);
+    return `url:${u.origin}${u.pathname}`;
+  } catch {
+    const clean = raw.split(/[?#]/, 1)[0] ?? raw;
+    return `ref:${clean}`;
+  }
+}
+function emitMediaFailure(capture, info) {
+  const key = `${info.terminal ? "terminal" : "warning"}|${info.mediaRef}`;
+  const seen = latch();
+  if (seen.has(key)) return;
+  seen.add(key);
+  if (capture) {
+    try {
+      capture(info);
+      return;
+    } catch {
+    }
+  }
+  console.error(
+    "[@ai-matrx/media] media failure (no diagnostics sink captured it \u2014 bind MediaHostPorts.diagnostics.capture to your error system)",
+    info
+  );
+}
+function useMediaFailureCapture() {
+  const ports = useMediaHostPorts();
+  const capture = ports.diagnostics?.capture;
+  const captureRef = (0, import_react2.useRef)(capture);
+  captureRef.current = capture;
+  return (0, import_react2.useCallback)((info) => {
+    emitMediaFailure(captureRef.current, { source: "media", ...info });
+  }, []);
+}
+
+// src/core/use-media-blob.ts
+var import_react3 = require("react");
 
 // src/core/ref-key.ts
 function stableRefKey(ref) {
@@ -578,12 +626,20 @@ function stableRefKey(ref) {
 }
 
 // src/core/use-media-blob.ts
+function statusOf(err) {
+  if (err && typeof err === "object") {
+    const candidate = err.status ?? err.statusCode;
+    if (typeof candidate === "number") return candidate;
+  }
+  return void 0;
+}
 function useMediaBlob(ref) {
   const client = useMediaClient();
+  const capture = useMediaFailureCapture();
   const refKey = stableRefKey(ref);
-  const [state, setState] = (0, import_react2.useState)({ url: null, blob: null, loading: !!ref, error: null });
-  const [retryToken, setRetryToken] = (0, import_react2.useState)(0);
-  (0, import_react2.useEffect)(() => {
+  const [state, setState] = (0, import_react3.useState)({ url: null, blob: null, loading: !!ref, error: null });
+  const [retryToken, setRetryToken] = (0, import_react3.useState)(0);
+  (0, import_react3.useEffect)(() => {
     if (!ref) {
       setState({ url: null, blob: null, loading: false, error: null });
       return void 0;
@@ -604,6 +660,14 @@ function useMediaBlob(ref) {
         if (cancelled) return;
         const message = err instanceof Error ? err.message : String(err ?? "Failed to load file");
         setState({ url: null, blob: null, loading: false, error: message });
+        const status = statusOf(err);
+        capture({
+          phase: "blob",
+          mediaRef: failureMediaIdentity(ref),
+          terminal: true,
+          message: `getBlob() failed: ${message}`,
+          ...status !== void 0 ? { status } : {}
+        });
       }
     );
     return () => {
@@ -618,7 +682,7 @@ function useMediaBlob(ref) {
 }
 
 // src/core/use-media-load-recovery.ts
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/types.ts
 function mintDurableSrc(url) {
@@ -626,26 +690,51 @@ function mintDurableSrc(url) {
 }
 
 // src/core/use-media-load-recovery.ts
+function normalizeOutcome(outcome) {
+  return typeof outcome === "string" ? { verdict: outcome } : outcome;
+}
+var EPHEMERAL_SECRET_IDENTITY = "server:files-session-secret";
 function useMediaLoadRecovery(src, options) {
   const client = useMediaClient();
+  const capture = useMediaFailureCapture();
   const recoverable = options?.recoverable !== false;
   const onTerminal = options?.onTerminal;
-  const [result, setResult] = (0, import_react3.useState)({ source: src, retryKey: 0, failed: false });
-  const attemptRef = (0, import_react3.useRef)(0);
-  (0, import_react3.useEffect)(() => {
+  const failureRef = options?.failureRef;
+  const [result, setResult] = (0, import_react4.useState)({ source: src, retryKey: 0, failed: false });
+  const attemptRef = (0, import_react4.useRef)(0);
+  (0, import_react4.useEffect)(() => {
     attemptRef.current = 0;
   }, [src]);
+  const identity = () => failureMediaIdentity(failureRef ?? null, src);
   const onLoadError = (event) => {
     if (!src || !recoverable) {
       setResult({ source: src, retryKey: 0, failed: true });
+      if (src) {
+        capture({
+          phase: "element-load",
+          mediaRef: identity(),
+          terminal: true,
+          retryOutcome: "not-attempted",
+          message: "media element failed to load and the source is unrecoverable (foreign/object URL \u2014 a session refresh cannot fix it)"
+        });
+      }
       onTerminal?.(event);
       return;
     }
     attemptRef.current += 1;
     const attempt = attemptRef.current;
     client.recoverLoadError(mintDurableSrc(src), attempt).then(
-      (verdict) => {
-        if (verdict === "retry") {
+      (outcome) => {
+        const report = normalizeOutcome(outcome);
+        if (report.secretSource === "ephemeral") {
+          capture({
+            phase: "session",
+            mediaRef: EPHEMERAL_SECRET_IDENTITY,
+            terminal: false,
+            message: "server cookie secret is ephemeral \u2014 private renders will break across restarts/instances (set a persistent files-session secret on the server)"
+          });
+        }
+        if (report.verdict === "retry") {
           setResult((current) => ({
             source: src,
             retryKey: current.source === src ? current.retryKey + 1 : 1,
@@ -653,11 +742,26 @@ function useMediaLoadRecovery(src, options) {
           }));
         } else {
           setResult({ source: src, retryKey: 0, failed: true });
+          capture({
+            phase: attempt > 1 ? "element-load" : "recovery",
+            mediaRef: identity(),
+            terminal: true,
+            retryOutcome: attempt > 1 ? "retried" : "not-attempted",
+            message: attempt > 1 ? "media element failed to load after the session-refresh retry" : "media load recovery declined on the first attempt (session refresh did not produce a usable session)",
+            ...report.status !== void 0 ? { status: report.status } : {}
+          });
           onTerminal?.(event);
         }
       },
-      () => {
+      (err) => {
         setResult({ source: src, retryKey: 0, failed: true });
+        capture({
+          phase: "session",
+          mediaRef: identity(),
+          terminal: true,
+          retryOutcome: "recovery-failed",
+          message: `session recovery failed: ${err instanceof Error ? err.message : String(err ?? "unknown error")}`
+        });
         onTerminal?.(event);
       }
     );
@@ -670,24 +774,51 @@ function useMediaLoadRecovery(src, options) {
 }
 
 // src/core/use-media-resolution.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 function useMediaResolution(ref) {
   const client = useMediaClient();
+  const capture = useMediaFailureCapture();
   const refKey = stableRefKey(ref);
-  return (0, import_react4.useMemo)(() => {
-    if (!ref) return { resolution: null, status: "empty", reason: null };
+  const { state, failureMessage } = (0, import_react5.useMemo)(() => {
+    if (!ref) {
+      return {
+        state: { resolution: null, status: "empty", reason: null },
+        failureMessage: null
+      };
+    }
     try {
       const resolution = client.resolve(ref);
-      if (!resolution) return { resolution: null, status: "empty", reason: null };
-      return { resolution, status: "ready", reason: null };
+      if (!resolution) {
+        return {
+          state: { resolution: null, status: "empty", reason: null },
+          failureMessage: null
+        };
+      }
+      return {
+        state: { resolution, status: "ready", reason: null },
+        failureMessage: null
+      };
     } catch (err) {
       return {
-        resolution: null,
-        status: "unavailable",
-        reason: client.classifyError(err)
+        state: {
+          resolution: null,
+          status: "unavailable",
+          reason: client.classifyError(err)
+        },
+        failureMessage: err instanceof Error ? err.message : String(err ?? "resolve() failed")
       };
     }
   }, [client, refKey]);
+  (0, import_react5.useEffect)(() => {
+    if (state.status !== "unavailable") return;
+    capture({
+      phase: "resolve",
+      mediaRef: failureMediaIdentity(ref ?? null),
+      terminal: true,
+      message: `resolve() refused (${state.reason ?? "unknown"}): ${failureMessage ?? "no error message"}`
+    });
+  }, [refKey, state.status]);
+  return state;
 }
 
 // src/react/inline-media-ref.tsx
@@ -733,7 +864,7 @@ function prettifyUrl(url) {
 }
 var INERT_PLAYBACK = {
   useMediaElementSink(forward) {
-    return (0, import_react5.useCallback)(
+    return (0, import_react6.useCallback)(
       (node) => {
         if (!forward) return;
         if (typeof forward === "function") forward(node);
@@ -777,10 +908,21 @@ function InformativeErrorFallback({
   alt,
   elementType,
   mediaRef,
+  failurePhase,
   dimensions,
   rounded,
   className
 }) {
+  const capture = useMediaFailureCapture();
+  const identity = failureMediaIdentity(mediaRef ?? null, url);
+  (0, import_react6.useEffect)(() => {
+    capture({
+      phase: failurePhase,
+      mediaRef: identity,
+      terminal: true,
+      message: `media unavailable panel rendered for ${elementType} (${failurePhase} failure)`
+    });
+  }, [identity, failurePhase]);
   const shortAxis = dimensions === "fill" ? Number.POSITIVE_INFINITY : Math.min(dimensions.width, dimensions.height);
   const isCompact = dimensions !== "fill" && shortAxis < 64;
   const isMidsize = shortAxis < 140;
@@ -837,10 +979,10 @@ function InformativeErrorPanel({
   icon,
   tooltip
 }) {
-  const [copied, setCopied] = (0, import_react5.useState)(false);
+  const [copied, setCopied] = (0, import_react6.useState)(false);
   const isFill = dimensions === "fill";
   const { host, tail } = prettifyUrl(url);
-  const handleCopy = (0, import_react5.useCallback)(
+  const handleCopy = (0, import_react6.useCallback)(
     (event) => {
       event.stopPropagation();
       event.preventDefault();
@@ -959,13 +1101,14 @@ function InlineMediaRef({
   const url = needsBlob ? blob.url : resolution?.src ?? null;
   const recovery = useMediaLoadRecovery(url, {
     recoverable: !needsBlob && resolution?.recoverable !== false,
+    failureRef: mediaRef,
     onTerminal: (event) => onError?.(
       event
     )
   });
   const playback = ports.playbackSession ?? INERT_PLAYBACK;
-  const sessionElRef = (0, import_react5.useRef)(null);
-  const [isMediaPlaying, setIsMediaPlaying] = (0, import_react5.useState)(false);
+  const sessionElRef = (0, import_react6.useRef)(null);
+  const [isMediaPlaying, setIsMediaPlaying] = (0, import_react6.useState)(false);
   const portSinkRef = playback.useMediaElementSink(
     mediaElementRef
   );
@@ -973,7 +1116,7 @@ function InlineMediaRef({
     sessionElRef.current = node;
     portSinkRef(node);
   };
-  const trackKey = (0, import_react5.useMemo)(() => {
+  const trackKey = (0, import_react6.useMemo)(() => {
     if (mediaRef && typeof mediaRef === "object" && mediaRef.file_id) {
       return mediaRef.file_id;
     }
@@ -1011,6 +1154,7 @@ function InlineMediaRef({
             alt,
             elementType,
             mediaRef,
+            failurePhase: status === "unavailable" ? "resolve" : "blob",
             dimensions,
             rounded,
             className
@@ -1065,6 +1209,7 @@ function InlineMediaRef({
           alt,
           elementType,
           mediaRef,
+          failurePhase: "element-load",
           dimensions,
           rounded,
           className
@@ -1191,15 +1336,15 @@ function InlineMediaRef({
 }
 
 // src/react/media-thumbnail.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/core/use-thumbnail-source.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 function useThumbnailSource(ref, options = {}) {
   const { thumbnailUrl, allowSourceFallback = true } = options;
   const client = useMediaClient();
   const { resolution } = useMediaResolution(ref);
-  const explicitThumb = (0, import_react6.useMemo)(() => {
+  const explicitThumb = (0, import_react7.useMemo)(() => {
     if (!thumbnailUrl) return null;
     try {
       return client.resolve(thumbnailUrl);
@@ -1289,6 +1434,7 @@ function MediaThumbnail({
         VideoPosterThumb,
         {
           url: source.src,
+          mediaRef,
           recoverable: source.recoverable,
           fallback
         }
@@ -1299,6 +1445,7 @@ function MediaThumbnail({
         {
           url: source.src,
           alt: fileName,
+          mediaRef,
           recoverable: source.recoverable,
           fallback
         }
@@ -1316,11 +1463,13 @@ function MediaThumbnail({
 function ImageThumb({
   url,
   alt,
+  mediaRef,
   recoverable,
   fallback
 }) {
   const { retryKey, onLoadError, failed } = useMediaLoadRecovery(url, {
-    recoverable
+    recoverable,
+    failureRef: mediaRef
   });
   if (failed) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: fallback });
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -1337,14 +1486,16 @@ function ImageThumb({
 }
 function VideoPosterThumb({
   url,
+  mediaRef,
   recoverable,
   fallback
 }) {
   const { retryKey, onLoadError, failed } = useMediaLoadRecovery(url, {
-    recoverable
+    recoverable,
+    failureRef: mediaRef
   });
-  const ref = (0, import_react7.useRef)(null);
-  (0, import_react7.useEffect)(() => {
+  const ref = (0, import_react8.useRef)(null);
+  (0, import_react8.useEffect)(() => {
     const v = ref.current;
     if (!v) return void 0;
     const onMeta = () => {
@@ -1373,7 +1524,7 @@ function VideoPosterThumb({
 }
 
 // src/react/use-media-dropzone.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 function matchesAccept(file, accept) {
   if (!accept || accept.length === 0) return true;
   const name = file.name.toLowerCase();
@@ -1397,16 +1548,16 @@ function useMediaDropzone(options) {
     disabled = false,
     multiple = true
   } = options;
-  const [isDragActive, setIsDragActive] = (0, import_react8.useState)(false);
-  const [pasteHighlight, setPasteHighlight] = (0, import_react8.useState)(false);
-  const dragDepth = (0, import_react8.useRef)(0);
-  const inputRef = (0, import_react8.useRef)(null);
-  const onFilesRef = (0, import_react8.useRef)(onFiles);
+  const [isDragActive, setIsDragActive] = (0, import_react9.useState)(false);
+  const [pasteHighlight, setPasteHighlight] = (0, import_react9.useState)(false);
+  const dragDepth = (0, import_react9.useRef)(0);
+  const inputRef = (0, import_react9.useRef)(null);
+  const onFilesRef = (0, import_react9.useRef)(onFiles);
   onFilesRef.current = onFiles;
-  const onRejectedRef = (0, import_react8.useRef)(onRejected);
+  const onRejectedRef = (0, import_react9.useRef)(onRejected);
   onRejectedRef.current = onRejected;
   const acceptKey = accept?.join(",") ?? "";
-  const filterFiles = (0, import_react8.useCallback)(
+  const filterFiles = (0, import_react9.useCallback)(
     (files) => {
       const accepted = [];
       const rejected = [];
@@ -1424,23 +1575,23 @@ function useMediaDropzone(options) {
     },
     [acceptKey, maxSize]
   );
-  const emit = (0, import_react8.useCallback)(
+  const emit = (0, import_react9.useCallback)(
     (files) => {
       const accepted = filterFiles(files);
       if (accepted.length) onFilesRef.current(accepted);
     },
     [filterFiles]
   );
-  const openPicker = (0, import_react8.useCallback)(() => {
+  const openPicker = (0, import_react9.useCallback)(() => {
     if (!disabled) inputRef.current?.click();
   }, [disabled]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!pickerEventName || typeof window === "undefined") return void 0;
     const handler = () => openPicker();
     window.addEventListener(pickerEventName, handler);
     return () => window.removeEventListener(pickerEventName, handler);
   }, [openPicker, pickerEventName]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!enablePaste || disabled || typeof window === "undefined") {
       return void 0;
     }
@@ -1466,7 +1617,7 @@ function useMediaDropzone(options) {
     window.addEventListener("paste", handler);
     return () => window.removeEventListener("paste", handler);
   }, [enablePaste, disabled, emit]);
-  const getRootProps = (0, import_react8.useCallback)(
+  const getRootProps = (0, import_react9.useCallback)(
     () => ({
       onDragEnter: (event) => {
         if (disabled) return;
@@ -1495,11 +1646,11 @@ function useMediaDropzone(options) {
     }),
     [disabled, emit, multiple]
   );
-  const inputAccept = (0, import_react8.useMemo)(
+  const inputAccept = (0, import_react9.useMemo)(
     () => acceptKey.length ? acceptKey : void 0,
     [acceptKey]
   );
-  const getInputProps = (0, import_react8.useCallback)(
+  const getInputProps = (0, import_react9.useCallback)(
     () => ({
       ref: (node) => {
         inputRef.current = node;
@@ -1521,20 +1672,20 @@ function useMediaDropzone(options) {
 }
 
 // src/react/file-upload-dropzone.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 
 // src/core/use-media-upload.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 var entrySeq = 0;
 function useMediaUpload() {
   const client = useMediaClient();
-  const [uploading, setUploading] = (0, import_react9.useState)(false);
-  const [progress, setProgress] = (0, import_react9.useState)(null);
-  const [result, setResult] = (0, import_react9.useState)(null);
-  const [error, setError] = (0, import_react9.useState)(null);
-  const [entries, setEntries] = (0, import_react9.useState)([]);
-  const activeCount = (0, import_react9.useRef)(0);
-  const patchEntry = (0, import_react9.useCallback)(
+  const [uploading, setUploading] = (0, import_react10.useState)(false);
+  const [progress, setProgress] = (0, import_react10.useState)(null);
+  const [result, setResult] = (0, import_react10.useState)(null);
+  const [error, setError] = (0, import_react10.useState)(null);
+  const [entries, setEntries] = (0, import_react10.useState)([]);
+  const activeCount = (0, import_react10.useRef)(0);
+  const patchEntry = (0, import_react10.useCallback)(
     (id, patch) => {
       setEntries(
         (current) => current.map((e) => e.id === id ? { ...e, ...patch } : e)
@@ -1542,7 +1693,7 @@ function useMediaUpload() {
     },
     []
   );
-  const upload = (0, import_react9.useCallback)(
+  const upload = (0, import_react10.useCallback)(
     async (file, opts = {}) => {
       const id = `up-${++entrySeq}`;
       const fileName = opts.fileName ?? (file instanceof File ? file.name : "file");
@@ -1596,7 +1747,7 @@ function useMediaUpload() {
     },
     [client, patchEntry]
   );
-  const uploadMany = (0, import_react9.useCallback)(
+  const uploadMany = (0, import_react10.useCallback)(
     async (files, opts = {}) => {
       if (client.uploadMany) {
         activeCount.current += 1;
@@ -1625,10 +1776,10 @@ function useMediaUpload() {
     },
     [client, upload]
   );
-  const clearEntry = (0, import_react9.useCallback)((id) => {
+  const clearEntry = (0, import_react10.useCallback)((id) => {
     setEntries((current) => current.filter((e) => e.id !== id));
   }, []);
-  const reset = (0, import_react9.useCallback)(() => {
+  const reset = (0, import_react10.useCallback)(() => {
     setResult(null);
     setError(null);
     setProgress(null);
@@ -1648,11 +1799,11 @@ function useMediaUpload() {
 }
 
 // src/react/upload-progress-list.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var AUTO_DISMISS_MS = 1e4;
 function formatFileSize(bytes) {
-  if (!Number.isFinite(bytes) || bytes < 0) return "0 B";
+  if (bytes == null || !Number.isFinite(bytes) || bytes < 0) return "\u2014";
   if (bytes < 1024) return `${bytes} B`;
   const units = ["KB", "MB", "GB", "TB"];
   let value = bytes;
@@ -1669,16 +1820,16 @@ function UploadProgressListImpl({
   onOpenFile,
   className
 }) {
-  const [hovered, setHovered] = (0, import_react10.useState)(false);
+  const [hovered, setHovered] = (0, import_react11.useState)(false);
   const activeCount = uploads.filter((u) => u.status === "uploading").length;
   const successCount = uploads.filter((u) => u.status === "success").length;
   const errorCount = uploads.filter((u) => u.status === "error").length;
-  const timersRef = (0, import_react10.useRef)(
+  const timersRef = (0, import_react11.useRef)(
     /* @__PURE__ */ new Map()
   );
-  const onDismissRef = (0, import_react10.useRef)(onDismiss);
+  const onDismissRef = (0, import_react11.useRef)(onDismiss);
   onDismissRef.current = onDismiss;
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const timers = timersRef.current;
     if (hovered) {
       timers.forEach((t) => clearTimeout(t));
@@ -1706,7 +1857,7 @@ function UploadProgressListImpl({
       }
     }
   }, [uploads, hovered]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const timers = timersRef.current;
     return () => {
       timers.forEach((t) => clearTimeout(t));
@@ -1818,7 +1969,7 @@ function UploadProgressListImpl({
     }
   );
 }
-var UploadProgressList = (0, import_react10.memo)(UploadProgressListImpl);
+var UploadProgressList = (0, import_react11.memo)(UploadProgressListImpl);
 
 // src/react/file-upload-dropzone.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
@@ -1838,7 +1989,7 @@ function FileUploadDropzone({
   pickerEventName
 }) {
   const { uploadMany, entries, clearEntry } = useMediaUpload();
-  const handleUpload = (0, import_react11.useCallback)(
+  const handleUpload = (0, import_react12.useCallback)(
     async (files) => {
       if (!files.length) return;
       try {
@@ -1945,22 +2096,22 @@ function FileUploadDropzone({
 }
 
 // src/react/media-action-toolbar.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/core/use-media-actions.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 function useMediaActions(ref, options = {}) {
   const ports = useMediaHostPorts();
   const { resolution } = useMediaResolution(ref);
-  const [busy, setBusy] = (0, import_react12.useState)(null);
-  const [lastError, setLastError] = (0, import_react12.useState)(null);
+  const [busy, setBusy] = (0, import_react13.useState)(null);
+  const [lastError, setLastError] = (0, import_react13.useState)(null);
   const actions = ports.actions;
   const { fileName, alt } = options;
-  const context = (0, import_react12.useMemo)(() => {
+  const context = (0, import_react13.useMemo)(() => {
     if (!ref) return null;
     return { ref, resolution, fileName, alt };
   }, [ref, resolution, fileName, alt]);
-  const isAvailable = (0, import_react12.useCallback)(
+  const isAvailable = (0, import_react13.useCallback)(
     (kind) => {
       if (!context || !actions) return false;
       if (kind === "share") return Boolean(actions.share || actions.SharePopover);
@@ -1968,7 +2119,7 @@ function useMediaActions(ref, options = {}) {
     },
     [context, actions]
   );
-  const run = (0, import_react12.useCallback)(
+  const run = (0, import_react13.useCallback)(
     async (kind) => {
       if (!context || !actions) return;
       const handler = actions[kind];
@@ -2017,7 +2168,7 @@ function MediaActionToolbar({
   buttonClassName
 }) {
   const state = useMediaActions(mediaRef, { fileName, alt });
-  const [shareOpen, setShareOpen] = (0, import_react13.useState)(false);
+  const [shareOpen, setShareOpen] = (0, import_react14.useState)(false);
   const SharePopover = state.SharePopover;
   const visible = hideUnavailable ? actions.filter((kind) => state.isAvailable(kind)) : actions;
   if (visible.length === 0) return null;
@@ -2074,7 +2225,7 @@ function MediaActionToolbar({
 }
 
 // src/react/media-lightbox.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function MediaLightbox({
   open,
@@ -2092,7 +2243,7 @@ function MediaLightbox({
   headerExtra,
   className
 }) {
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!open || typeof window === "undefined") return void 0;
     const handler = (event) => {
       if (event.key === "Escape") {