@ai-matrx/media 0.4.0 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @ai-matrx/media
 
+## 0.4.1 — 2026-08-30
+
+**Fixes a crash class in 0.4.0's `/viewers` dispatch. Every 0.4.0 consumer must
+move to 0.4.1** — the bug is invisible until a real engine is registered, which
+is what every host does.
+
+### Consumer action (C28)
+
+- Upgrade. No API change; nothing to rewrite.
+
+### The defect
+
+`MediaFileViewer` CALLED the registered viewer as a plain function
+(`viewer(props)`), and `CodeViewer` did the same with the registered
+highlighter. Every real engine adapter uses hooks — it resolves a display URL,
+reads the host theme, joins a playback session — so those hooks landed in the
+DISPATCHER's hook list instead of the body's own. A single body renders fine;
+the moment the file kind changes (image → code, code → PDF) the hook count
+changes and React throws "Rendered fewer hooks than expected", taking the whole
+preview surface down. Both now mount through `createElement`, so each body gets
+its own component instance and its own hook list.
+
+Found while adopting 0.4.0 in matrx-frontend, before the host swap shipped.
+Guarded by a new test that mounts hook-using bodies and then switches kinds
+three times — the exact sequence that used to crash.
+
 ## 0.4.0 — 2026-08-30
 
 **The package renders FILES now, not just media elements** — and it knows what

package/dist/viewers.cjs

@@ -46,6 +46,9 @@ __export(viewers_exports, {
 });
 module.exports = __toCommonJS(viewers_exports);
 
+// src/viewers/media-file-viewer.tsx
+var import_react12 = require("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");
@@ -794,7 +797,15 @@ function CodeViewer({
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ViewerCopyButton, { text })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "min-h-0 flex-1 overflow-auto", children: highlighter ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: highlighter({ code: text, language }) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("pre", { className: "m-0 flex p-3 font-mono text-xs leading-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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).
+          (0, import_react7.createElement)(
+            highlighter,
+            { code: text, language }
+          )
+        ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("pre", { className: "m-0 flex p-3 font-mono text-xs leading-5", children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "code",
             {
@@ -1738,10 +1749,8 @@ function MediaFileViewer({
   ...props
 }) {
   const kind = previewKind ?? getPreviewKind(props.fileName, props.mimeType ?? null);
-  const registered = getMediaViewer(kind);
-  if (registered) return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: registered(props) });
-  const builtIn = BUILT_IN[kind];
-  if (builtIn) return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: builtIn(props) });
+  const viewer = getMediaViewer(kind) ?? BUILT_IN[kind];
+  if (viewer) return (0, import_react12.createElement)(viewer, props);
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MediaViewerUnavailable, { ...props, kind });
 }
 //# sourceMappingURL=viewers.cjs.map