@ai-matrx/media 0.4.0 → 0.4.2

package/dist/viewers.js

@@ -1,5 +1,8 @@
 "use client";
 
+// src/viewers/media-file-viewer.tsx
+import { createElement as createElement3 } from "react";
+
 // src/viewers/registry.ts
 var VIEWER_SLOT = /* @__PURE__ */ Symbol.for("ai-matrx.media.viewer-registry");
 var HIGHLIGHTER_SLOT = /* @__PURE__ */ Symbol.for("ai-matrx.media.code-highlighter");
@@ -42,7 +45,7 @@ function getMediaCodeHighlighter() {
 }
 
 // src/viewers/code-viewer.tsx
-import { useMemo as useMemo2, useState as useState4 } from "react";
+import { createElement as createElement2, useMemo as useMemo2, useState as useState4 } from "react";
 
 // src/react/cn.ts
 import { twMerge } from "tailwind-merge";
@@ -642,7 +645,7 @@ function useViewerDisplayUrl(source) {
 }
 
 // src/viewers/code-viewer.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var EXT_TO_LANGUAGE = {
   js: "javascript",
   jsx: "jsx",
@@ -752,7 +755,15 @@ function CodeViewer({
             /* @__PURE__ */ jsx3(ViewerCopyButton, { text })
           ] })
         ] }),
-        /* @__PURE__ */ jsx3("div", { className: "min-h-0 flex-1 overflow-auto", children: highlighter ? /* @__PURE__ */ jsx3(Fragment, { children: highlighter({ code: text, language }) }) : /* @__PURE__ */ jsxs3("pre", { className: "m-0 flex p-3 font-mono text-xs leading-5", children: [
+        /* @__PURE__ */ jsx3("div", { className: "min-h-0 flex-1 overflow-auto", children: highlighter ? (
+          // Mounted as an element, never called — a real highlighter reads the
+          // host's theme with a hook, and calling it would put that hook in
+          // THIS component's list (see the note in media-file-viewer.tsx).
+          createElement2(
+            highlighter,
+            { code: text, language }
+          )
+        ) : /* @__PURE__ */ jsxs3("pre", { className: "m-0 flex p-3 font-mono text-xs leading-5", children: [
           /* @__PURE__ */ jsx3(
             "code",
             {
@@ -1381,7 +1392,7 @@ function HtmlSourceView({ source, maxBytes = 1024 * 1024 }) {
 }
 
 // src/core/use-media-load-recovery.ts
-import { useEffect as useEffect6, useRef as useRef3, useState as useState8 } from "react";
+import { useEffect as useEffect6, useLayoutEffect, useRef as useRef3, useState as useState8 } from "react";
 
 // src/types.ts
 function mintDurableSrc(url) {
@@ -1401,11 +1412,17 @@ function useMediaLoadRecovery(src, options) {
   const failureRef = options?.failureRef;
   const [result, setResult] = useState8({ source: src, retryKey: 0, failed: false });
   const attemptRef = useRef3(0);
+  const recoveryInFlightRef = useRef3(false);
   useEffect6(() => {
     attemptRef.current = 0;
+    recoveryInFlightRef.current = false;
   }, [src]);
+  useLayoutEffect(() => {
+    recoveryInFlightRef.current = false;
+  }, [result.retryKey]);
   const identity = () => failureMediaIdentity(failureRef ?? null, src);
   const onLoadError = (event) => {
+    if (recoveryInFlightRef.current) return;
     if (!src || !recoverable) {
       setResult({ source: src, retryKey: 0, failed: true });
       if (src) {
@@ -1420,6 +1437,7 @@ function useMediaLoadRecovery(src, options) {
       onTerminal?.(event);
       return;
     }
+    recoveryInFlightRef.current = true;
     attemptRef.current += 1;
     const attempt = attemptRef.current;
     client.recoverLoadError(mintDurableSrc(src), attempt).then(
@@ -1683,7 +1701,7 @@ function getPreviewKind(fileName, mimeType) {
 }
 
 // src/viewers/media-file-viewer.tsx
-import { Fragment as Fragment2, jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var BUILT_IN = {
   text: TextViewer,
   code: CodeViewer,
@@ -1696,10 +1714,8 @@ function MediaFileViewer({
   ...props
 }) {
   const kind = previewKind ?? getPreviewKind(props.fileName, props.mimeType ?? null);
-  const registered = getMediaViewer(kind);
-  if (registered) return /* @__PURE__ */ jsx12(Fragment2, { children: registered(props) });
-  const builtIn = BUILT_IN[kind];
-  if (builtIn) return /* @__PURE__ */ jsx12(Fragment2, { children: builtIn(props) });
+  const viewer = getMediaViewer(kind) ?? BUILT_IN[kind];
+  if (viewer) return createElement3(viewer, props);
   return /* @__PURE__ */ jsx12(MediaViewerUnavailable, { ...props, kind });
 }
 export {