@stream-mdx/react 0.5.0 → 1.0.0

package/dist/components/bottom-stick-scroll-area.mjs

@@ -4,17 +4,9 @@
 // src/components/bottom-stick-scroll-area.tsx
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var EPS_BOTTOM_PX = 2;
-var EPS_OVERFLOW_PX = 1;
-var DETACH_SCROLL_DELTA_PX = 1;
-var RETURN_MIN_MS = 180;
-var RETURN_MAX_MS = 520;
-var RETURN_PX_PER_MS = 2.2;
-var RETURN_SETTLE_FRAMES = 2;
+var EPS_BOTTOM_PX = 2, EPS_OVERFLOW_PX = 1, DETACH_SCROLL_DELTA_PX = 1, RETURN_MIN_MS = 180, RETURN_MAX_MS = 520, RETURN_PX_PER_MS = 2.2, RETURN_SETTLE_FRAMES = 2;
 function clamp01(value) {
-  if (value < 0) return 0;
-  if (value > 1) return 1;
-  return value;
+  return value < 0 ? 0 : value > 1 ? 1 : value;
 }
 function easeOutCubic(value) {
   return 1 - (1 - value) ** 3;
@@ -23,14 +15,34 @@ function joinClasses(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function measure(viewport) {
-  const scrollTop = viewport.scrollTop;
-  const scrollHeight = viewport.scrollHeight;
-  const clientHeight = viewport.clientHeight;
-  const maxScrollTop = Math.max(0, scrollHeight - clientHeight);
-  const distanceToBottom = Math.max(0, maxScrollTop - scrollTop);
-  const isOverflowing = scrollHeight > clientHeight + EPS_OVERFLOW_PX;
+  let scrollTop = viewport.scrollTop, scrollHeight = viewport.scrollHeight, clientHeight = viewport.clientHeight, maxScrollTop = Math.max(0, scrollHeight - clientHeight), distanceToBottom = Math.max(0, maxScrollTop - scrollTop), isOverflowing = scrollHeight > clientHeight + EPS_OVERFLOW_PX;
   return { scrollTop, scrollHeight, clientHeight, maxScrollTop, distanceToBottom, isOverflowing };
 }
+function isEditableTarget(target) {
+  if (!(target instanceof Element)) return !1;
+  if (target.closest("input, textarea, select, [role='textbox']")) return !0;
+  let contentEditable = target.closest("[contenteditable]");
+  return contentEditable !== null && contentEditable.getAttribute("contenteditable")?.toLowerCase() !== "false";
+}
+function isScrollKeyIntent(event) {
+  if (event.defaultPrevented || isEditableTarget(event.target)) return !1;
+  switch (event.key) {
+    case "ArrowDown":
+    case "ArrowUp":
+    case "PageDown":
+    case "PageUp":
+    case "Home":
+    case "End":
+      return !0;
+    case " ":
+    case "Spacebar":
+      return event.target instanceof Element ? event.target.closest(
+        "button, input, summary, [role='button'], [role='checkbox'], [role='switch'], [role='radio'], [role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']"
+      ) === null : !0;
+    default:
+      return !1;
+  }
+}
 function DefaultJumpButton({ canJump, jumpToBottom }) {
   return /* @__PURE__ */ jsx(
     "button",
@@ -51,7 +63,7 @@ function DefaultJumpButton({ canJump, jumpToBottom }) {
         color: "var(--foreground, #111)",
         cursor: canJump ? "pointer" : "default"
       },
-      children: /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\u2193" })
+      children: /* @__PURE__ */ jsx("span", { "aria-hidden": !0, children: "\u2193" })
     }
   );
 }
@@ -60,45 +72,23 @@ function BottomStickScrollArea({
   className,
   viewportClassName,
   contentClassName,
-  showJumpToBottom = true,
+  showJumpToBottom = !0,
   onDebugStateChange,
   onModeChange,
-  debugDomAttributes = false,
+  debugDomAttributes = !1,
   renderJumpToBottom,
   jumpContainerClassName
 }) {
-  const viewportRef = useRef(null);
-  const contentRef = useRef(null);
-  const modeRef = useRef("STICKY_INSTANT");
-  const [mode, setMode] = useState("STICKY_INSTANT");
-  const [isOverflowing, setIsOverflowing] = useState(false);
-  const [distanceToBottom, setDistanceToBottom] = useState(0);
-  const prevScrollTopRef = useRef(0);
-  const lastProgrammaticWriteRef = useRef(null);
-  const programmaticWriteCountRef = useRef(0);
-  const pendingStickRafRef = useRef(null);
-  const stickRequestedRef = useRef(false);
-  const returnRafRef = useRef(null);
-  const returnAnimRef = useRef(null);
-  const setModeBoth = useCallback(
+  let viewportRef = useRef(null), contentRef = useRef(null), modeRef = useRef("STICKY_INSTANT"), [mode, setMode] = useState("STICKY_INSTANT"), [isOverflowing, setIsOverflowing] = useState(!1), [distanceToBottom, setDistanceToBottom] = useState(0), [prefersReducedMotion, setPrefersReducedMotion] = useState(!1), prefersReducedMotionRef = useRef(!1), prevScrollTopRef = useRef(0), lastProgrammaticWriteRef = useRef(null), programmaticWriteCountRef = useRef(0), pendingStickRafRef = useRef(null), stickRequestedRef = useRef(!1), returnRafRef = useRef(null), returnAnimRef = useRef(null), setModeBoth = useCallback(
     (next) => {
-      modeRef.current = next;
-      setMode(next);
-      onModeChange?.(next);
+      modeRef.current = next, setMode(next), onModeChange?.(next);
     },
     [onModeChange]
-  );
-  const updateDebug = useCallback(() => {
-    const viewport = viewportRef.current;
+  ), updateDebug = useCallback(() => {
+    let viewport = viewportRef.current;
     if (!viewport) return;
-    const m = measure(viewport);
-    if (debugDomAttributes) {
-      viewport.dataset.stickyMode = modeRef.current;
-      viewport.dataset.distanceToBottom = String(m.distanceToBottom);
-      viewport.dataset.isOverflowing = m.isOverflowing ? "1" : "0";
-      viewport.dataset.programmaticWrites = String(programmaticWriteCountRef.current);
-    }
-    onDebugStateChange?.({
+    let m = measure(viewport);
+    debugDomAttributes && (viewport.dataset.stickyMode = modeRef.current, viewport.dataset.distanceToBottom = String(m.distanceToBottom), viewport.dataset.isOverflowing = m.isOverflowing ? "1" : "0", viewport.dataset.programmaticWrites = String(programmaticWriteCountRef.current)), onDebugStateChange?.({
       mode: modeRef.current,
       isOverflowing: m.isOverflowing,
       distanceToBottom: m.distanceToBottom,
@@ -107,60 +97,54 @@ function BottomStickScrollArea({
       scrollHeight: m.scrollHeight,
       clientHeight: m.clientHeight,
       programmaticWrites: programmaticWriteCountRef.current
-    });
-    setDistanceToBottom(
+    }), setDistanceToBottom(
       (previous) => Math.abs(previous - m.distanceToBottom) <= 0.1 ? previous : m.distanceToBottom
     );
-  }, [debugDomAttributes, onDebugStateChange]);
-  const writeScrollTop = useCallback((nextTop) => {
-    const viewport = viewportRef.current;
+  }, [debugDomAttributes, onDebugStateChange]), writeScrollTop = useCallback((nextTop) => {
+    let viewport = viewportRef.current;
+    viewport && (viewport.scrollTop = nextTop, programmaticWriteCountRef.current += 1, lastProgrammaticWriteRef.current = { at: performance.now(), top: nextTop });
+  }, []), cancelPendingStick = useCallback(() => {
+    pendingStickRafRef.current !== null && (cancelAnimationFrame(pendingStickRafRef.current), pendingStickRafRef.current = null), stickRequestedRef.current = !1;
+  }, []), cancelReturn = useCallback(() => {
+    returnRafRef.current !== null && (cancelAnimationFrame(returnRafRef.current), returnRafRef.current = null), returnAnimRef.current = null;
+  }, []), handleReducedMotionChange = useCallback(
+    (matches) => {
+      if (prefersReducedMotionRef.current !== matches && (prefersReducedMotionRef.current = matches, setPrefersReducedMotion(matches)), !matches || modeRef.current !== "RETURNING_SMOOTH") return;
+      cancelPendingStick(), cancelReturn(), setModeBoth("STICKY_INSTANT");
+      let viewport = viewportRef.current;
+      viewport && (writeScrollTop(measure(viewport).maxScrollTop), prevScrollTopRef.current = viewport.scrollTop), updateDebug();
+    },
+    [cancelPendingStick, cancelReturn, setModeBoth, updateDebug, writeScrollTop]
+  ), reducedMotionChangeHandlerRef = useRef(handleReducedMotionChange);
+  reducedMotionChangeHandlerRef.current = handleReducedMotionChange;
+  let interruptReturnForUserIntent = useCallback(() => {
+    modeRef.current === "RETURNING_SMOOTH" && (cancelPendingStick(), cancelReturn(), setModeBoth("DETACHED"), updateDebug());
+  }, [cancelPendingStick, cancelReturn, setModeBoth, updateDebug]), onViewportKeyDown = useCallback(
+    (event) => {
+      isScrollKeyIntent(event) && interruptReturnForUserIntent();
+    },
+    [interruptReturnForUserIntent]
+  ), stickToBottomInstant = useCallback(() => {
+    let viewport = viewportRef.current;
+    viewport && (stickRequestedRef.current = !0, pendingStickRafRef.current === null && (pendingStickRafRef.current = requestAnimationFrame(() => {
+      if (pendingStickRafRef.current = null, !stickRequestedRef.current || (stickRequestedRef.current = !1, modeRef.current !== "STICKY_INSTANT")) return;
+      let m = measure(viewport);
+      writeScrollTop(m.maxScrollTop), updateDebug();
+    })));
+  }, [updateDebug, writeScrollTop]), startReturnToBottomSmooth = useCallback(() => {
+    let viewport = viewportRef.current;
     if (!viewport) return;
-    viewport.scrollTop = nextTop;
-    programmaticWriteCountRef.current += 1;
-    lastProgrammaticWriteRef.current = { at: performance.now(), top: nextTop };
-  }, []);
-  const cancelPendingStick = useCallback(() => {
-    if (pendingStickRafRef.current !== null) {
-      cancelAnimationFrame(pendingStickRafRef.current);
-      pendingStickRafRef.current = null;
-    }
-    stickRequestedRef.current = false;
-  }, []);
-  const cancelReturn = useCallback(() => {
-    if (returnRafRef.current !== null) {
-      cancelAnimationFrame(returnRafRef.current);
-      returnRafRef.current = null;
+    if (prefersReducedMotionRef.current) {
+      cancelPendingStick(), cancelReturn(), setModeBoth("STICKY_INSTANT"), writeScrollTop(measure(viewport).maxScrollTop), prevScrollTopRef.current = viewport.scrollTop, updateDebug();
+      return;
     }
-    returnAnimRef.current = null;
-  }, []);
-  const stickToBottomInstant = useCallback(() => {
-    const viewport = viewportRef.current;
-    if (!viewport) return;
-    stickRequestedRef.current = true;
-    if (pendingStickRafRef.current !== null) return;
-    pendingStickRafRef.current = requestAnimationFrame(() => {
-      pendingStickRafRef.current = null;
-      if (!stickRequestedRef.current) return;
-      stickRequestedRef.current = false;
-      if (modeRef.current !== "STICKY_INSTANT") return;
-      const m = measure(viewport);
-      writeScrollTop(m.maxScrollTop);
-      updateDebug();
-    });
-  }, [updateDebug, writeScrollTop]);
-  const startReturnToBottomSmooth = useCallback(() => {
-    const viewport = viewportRef.current;
-    if (!viewport) return;
-    cancelPendingStick();
-    cancelReturn();
-    const initial = measure(viewport);
+    cancelPendingStick(), cancelReturn();
+    let initial = measure(viewport);
     if (initial.distanceToBottom <= EPS_BOTTOM_PX) {
-      setModeBoth("STICKY_INSTANT");
-      stickToBottomInstant();
-      updateDebug();
+      setModeBoth("STICKY_INSTANT"), stickToBottomInstant(), updateDebug();
       return;
     }
-    const durationMs = Math.max(
+    let durationMs = Math.max(
       RETURN_MIN_MS,
       Math.min(RETURN_MAX_MS, initial.distanceToBottom / RETURN_PX_PER_MS)
     );
@@ -169,118 +153,60 @@ function BottomStickScrollArea({
       startTop: initial.scrollTop,
       durationMs,
       settleFrames: 0
-    };
-    setModeBoth("RETURNING_SMOOTH");
-    const tick = (now) => {
-      const viewportCurrent = viewportRef.current;
-      const anim = returnAnimRef.current;
+    }, setModeBoth("RETURNING_SMOOTH");
+    let tick = (now) => {
+      let viewportCurrent = viewportRef.current, anim = returnAnimRef.current;
       if (!viewportCurrent || !anim || modeRef.current !== "RETURNING_SMOOTH") {
         cancelReturn();
         return;
       }
-      const before = measure(viewportCurrent);
-      const progress = clamp01((now - anim.startTime) / anim.durationMs);
-      const eased = easeOutCubic(progress);
-      const targetBottom = before.maxScrollTop;
-      let nextTop = anim.startTop + (targetBottom - anim.startTop) * eased;
-      if (nextTop < before.scrollTop) {
-        nextTop = before.scrollTop;
-      }
-      writeScrollTop(nextTop);
-      const after = measure(viewportCurrent);
-      if (after.distanceToBottom <= EPS_BOTTOM_PX) {
-        anim.settleFrames += 1;
-      } else {
-        anim.settleFrames = 0;
-      }
-      const doneByTime = progress >= 1;
-      const doneBySettle = anim.settleFrames >= RETURN_SETTLE_FRAMES && progress >= 0.6;
+      let before = measure(viewportCurrent), progress = clamp01((now - anim.startTime) / anim.durationMs), eased = easeOutCubic(progress), targetBottom = before.maxScrollTop, nextTop = anim.startTop + (targetBottom - anim.startTop) * eased;
+      nextTop < before.scrollTop && (nextTop = before.scrollTop), writeScrollTop(nextTop), measure(viewportCurrent).distanceToBottom <= EPS_BOTTOM_PX ? anim.settleFrames += 1 : anim.settleFrames = 0;
+      let doneByTime = progress >= 1, doneBySettle = anim.settleFrames >= RETURN_SETTLE_FRAMES && progress >= 0.6;
       if (doneByTime && doneBySettle) {
-        cancelReturn();
-        setModeBoth("STICKY_INSTANT");
-        stickToBottomInstant();
-        updateDebug();
+        cancelReturn(), setModeBoth("STICKY_INSTANT"), stickToBottomInstant(), updateDebug();
         return;
       }
-      updateDebug();
-      returnRafRef.current = requestAnimationFrame(tick);
+      updateDebug(), returnRafRef.current = requestAnimationFrame(tick);
     };
     returnRafRef.current = requestAnimationFrame(tick);
-  }, [cancelPendingStick, cancelReturn, setModeBoth, stickToBottomInstant, updateDebug, writeScrollTop]);
-  const onViewportScroll = useCallback(
+  }, [cancelPendingStick, cancelReturn, setModeBoth, stickToBottomInstant, updateDebug, writeScrollTop]), onViewportScroll = useCallback(
     (event) => {
-      const viewport = event.currentTarget;
-      const m = measure(viewport);
+      let viewport = event.currentTarget, m = measure(viewport);
       setIsOverflowing((previous) => previous === m.isOverflowing ? previous : m.isOverflowing);
-      const previousTop = prevScrollTopRef.current;
-      const delta = m.scrollTop - previousTop;
-      const lastWrite = lastProgrammaticWriteRef.current;
-      const wroteRecently = lastWrite !== null && performance.now() - lastWrite.at < 60;
-      const isLikelyOwnWrite = wroteRecently && lastWrite !== null && Math.abs(m.scrollTop - lastWrite.top) <= 2;
-      if (modeRef.current === "RETURNING_SMOOTH") {
-        if (!isLikelyOwnWrite && delta < -DETACH_SCROLL_DELTA_PX) {
-          cancelReturn();
-          setModeBoth("DETACHED");
-        }
-      } else if (modeRef.current === "STICKY_INSTANT") {
-        if (!isLikelyOwnWrite && delta < -DETACH_SCROLL_DELTA_PX && m.isOverflowing) {
-          cancelPendingStick();
-          setModeBoth("DETACHED");
-        }
-      } else if (modeRef.current === "DETACHED") {
-        if (m.distanceToBottom <= EPS_BOTTOM_PX) {
-          setModeBoth("STICKY_INSTANT");
-          stickToBottomInstant();
-        }
-      }
-      prevScrollTopRef.current = m.scrollTop;
-      updateDebug();
+      let previousTop = prevScrollTopRef.current, delta = m.scrollTop - previousTop, lastWrite = lastProgrammaticWriteRef.current, isLikelyOwnWrite = lastWrite !== null && performance.now() - lastWrite.at < 60 && lastWrite !== null && Math.abs(m.scrollTop - lastWrite.top) <= 2;
+      modeRef.current === "RETURNING_SMOOTH" ? !isLikelyOwnWrite && delta < -DETACH_SCROLL_DELTA_PX && (cancelReturn(), setModeBoth("DETACHED")) : modeRef.current === "STICKY_INSTANT" ? !isLikelyOwnWrite && delta < -DETACH_SCROLL_DELTA_PX && m.isOverflowing && (cancelPendingStick(), setModeBoth("DETACHED")) : modeRef.current === "DETACHED" && m.distanceToBottom <= EPS_BOTTOM_PX && (setModeBoth("STICKY_INSTANT"), stickToBottomInstant()), prevScrollTopRef.current = m.scrollTop, updateDebug();
     },
     [cancelPendingStick, cancelReturn, setModeBoth, stickToBottomInstant, updateDebug]
   );
   useEffect(() => {
-    const viewport = viewportRef.current;
-    const content = contentRef.current;
+    let viewport = viewportRef.current, content = contentRef.current;
     if (!viewport || !content) return;
-    const observer = new ResizeObserver(() => {
-      const m = measure(viewport);
-      setIsOverflowing((previous) => previous === m.isOverflowing ? previous : m.isOverflowing);
-      if (modeRef.current === "STICKY_INSTANT") {
-        stickToBottomInstant();
-      }
-      updateDebug();
+    let observer = new ResizeObserver(() => {
+      let m = measure(viewport);
+      setIsOverflowing((previous) => previous === m.isOverflowing ? previous : m.isOverflowing), modeRef.current === "STICKY_INSTANT" && stickToBottomInstant(), updateDebug();
     });
-    observer.observe(content);
-    observer.observe(viewport);
-    return () => observer.disconnect();
-  }, [stickToBottomInstant, updateDebug]);
-  useLayoutEffect(() => {
-    const viewport = viewportRef.current;
+    return observer.observe(content), observer.observe(viewport), () => observer.disconnect();
+  }, [stickToBottomInstant, updateDebug]), useLayoutEffect(() => {
+    let viewport = viewportRef.current;
     if (!viewport) return;
     setModeBoth("STICKY_INSTANT");
-    const initial = measure(viewport);
-    writeScrollTop(initial.maxScrollTop);
-    prevScrollTopRef.current = viewport.scrollTop;
-    setIsOverflowing(initial.isOverflowing);
-    setDistanceToBottom(initial.distanceToBottom);
-    updateDebug();
-  }, [setModeBoth, updateDebug, writeScrollTop]);
-  useEffect(() => {
-    return () => {
-      cancelPendingStick();
-      cancelReturn();
-    };
+    let initial = measure(viewport);
+    writeScrollTop(initial.maxScrollTop), prevScrollTopRef.current = viewport.scrollTop, setIsOverflowing(initial.isOverflowing), setDistanceToBottom(initial.distanceToBottom), updateDebug();
+  }, [setModeBoth, updateDebug, writeScrollTop]), useLayoutEffect(() => {
+    if (typeof window > "u" || typeof window.matchMedia != "function") return;
+    let mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)"), onChange = () => reducedMotionChangeHandlerRef.current(mediaQuery.matches);
+    return onChange(), typeof mediaQuery.addEventListener == "function" ? (mediaQuery.addEventListener("change", onChange), () => mediaQuery.removeEventListener("change", onChange)) : (mediaQuery.addListener(onChange), () => mediaQuery.removeListener(onChange));
+  }, []), useEffect(() => () => {
+    cancelPendingStick(), cancelReturn();
   }, [cancelPendingStick, cancelReturn]);
-  const canJump = isOverflowing && mode === "DETACHED";
-  const jumpButton = renderJumpToBottom?.({
+  let canJump = isOverflowing && mode === "DETACHED", jumpButton = renderJumpToBottom?.({
     mode,
     canJump,
     isOverflowing,
     distanceToBottom,
     jumpToBottom: startReturnToBottomSmooth
-  }) ?? /* @__PURE__ */ jsx(DefaultJumpButton, { canJump, jumpToBottom: startReturnToBottomSmooth });
-  const jumpContainerClassNameBase = "pointer-events-none absolute z-20";
-  const jumpContainerStyle = {
+  }) ?? /* @__PURE__ */ jsx(DefaultJumpButton, { canJump, jumpToBottom: startReturnToBottomSmooth }), jumpContainerClassNameBase = "pointer-events-none absolute z-20", jumpContainerStyle = {
     position: "absolute",
     zIndex: 20,
     left: 0,
@@ -289,8 +215,8 @@ function BottomStickScrollArea({
     display: "flex",
     justifyContent: "center",
     opacity: canJump ? 1 : 0,
-    transform: canJump ? "translateY(0px)" : "translateY(4px)",
-    transition: "opacity 150ms ease, transform 150ms ease",
+    transform: prefersReducedMotion ? "none" : canJump ? "translateY(0px)" : "translateY(4px)",
+    transition: prefersReducedMotion ? "none" : "opacity 150ms ease, transform 150ms ease",
     pointerEvents: "none"
   };
   return /* @__PURE__ */ jsxs("div", { className: joinClasses("relative h-full w-full overflow-hidden", className), children: [
@@ -300,6 +226,9 @@ function BottomStickScrollArea({
         ref: viewportRef,
         className: joinClasses("h-full w-full overflow-auto", viewportClassName),
         onScroll: onViewportScroll,
+        onWheel: interruptReturnForUserIntent,
+        onTouchStart: interruptReturnForUserIntent,
+        onKeyDown: onViewportKeyDown,
         "data-testid": "sticky-scroll-viewport",
         children: /* @__PURE__ */ jsx("div", { ref: contentRef, className: joinClasses("flex min-h-full w-full flex-col", contentClassName), children })
       }

package/dist/components/diff-renderer.cjs

@@ -0,0 +1,86 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+
+// src/components/diff-renderer.tsx
+var diff_renderer_exports = {};
+__export(diff_renderer_exports, {
+  DefaultDiffRenderer: () => DefaultDiffRenderer
+});
+module.exports = __toCommonJS(diff_renderer_exports);
+var import_jsx_runtime = require("react/jsx-runtime"), DefaultDiffRenderer = ({
+  meta,
+  renderCode,
+  className = "",
+  style
+}) => {
+  let diffBlocks = Array.isArray(meta?.diffBlocks) ? meta.diffBlocks : null;
+  return !diffBlocks || diffBlocks.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: renderCode }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: `stream-mdx-diff-container my-4 rounded-md border border-border bg-muted/20 font-mono text-sm overflow-hidden ${className}`.trim(),
+      style,
+      children: diffBlocks.map((diffBlock, bIdx) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "stream-mdx-diff-block", children: [
+        (diffBlock.filePath || diffBlock.additions != null || diffBlock.deletions != null) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "stream-mdx-diff-header flex items-center justify-between border-b border-border bg-muted/40 px-4 py-2 text-xs font-semibold text-muted-foreground", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "stream-mdx-diff-filepath", children: diffBlock.filePath ?? "diff" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "stream-mdx-diff-stats flex gap-2", children: [
+            diffBlock.additions != null && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "stream-mdx-diff-stat-add text-green-600 dark:text-green-400", children: [
+              "+",
+              diffBlock.additions
+            ] }),
+            diffBlock.deletions != null && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "stream-mdx-diff-stat-del text-red-600 dark:text-red-400", children: [
+              "-",
+              diffBlock.deletions
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "stream-mdx-diff-lines overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("table", { className: "w-full border-collapse font-mono text-xs", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: diffBlock.lines.map((line, lIdx) => {
+          let kindClass = `diff-line-${line.kind} ${line.kind === "add" ? "bg-green-500/10 text-green-900 dark:text-green-200" : line.kind === "del" ? "bg-red-500/10 text-red-900 dark:text-red-200" : line.kind === "hunk" ? "bg-blue-500/10 text-blue-800 dark:text-blue-300 font-semibold" : line.kind === "meta" ? "bg-muted/50 text-muted-foreground italic" : "text-foreground"}`;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "tr",
+            {
+              className: `stream-mdx-diff-row ${kindClass}`,
+              "data-diff-kind": line.kind,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "stream-mdx-diff-old-no select-none px-2 py-0.5 text-right opacity-50 w-10", children: line.oldNo != null ? line.oldNo : "" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "stream-mdx-diff-new-no select-none px-2 py-0.5 text-right opacity-50 w-10", children: line.newNo != null ? line.newNo : "" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "stream-mdx-diff-prefix select-none px-1 py-0.5 text-center w-4 font-bold", children: line.kind === "add" ? "+" : line.kind === "del" ? "-" : line.kind === "hunk" ? "@" : " " }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "stream-mdx-diff-content px-2 py-0.5 whitespace-pre", children: line.tokens && line.tokens.length > 0 ? line.tokens.map((token, tIdx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "span",
+                  {
+                    style: {
+                      color: token.color ?? void 0,
+                      fontStyle: token.fontStyle === 1 || token.fontStyle === 3 ? "italic" : void 0,
+                      fontWeight: token.fontStyle === 2 || token.fontStyle === 3 ? "bold" : void 0
+                    },
+                    children: token.content
+                  },
+                  tIdx
+                )) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: line.raw.replace(/^[+\- ]/, "") }) })
+              ]
+            },
+            lIdx
+          );
+        }) }) }) })
+      ] }, bIdx))
+    }
+  );
+};
+DefaultDiffRenderer.displayName = "DefaultDiffRenderer";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DefaultDiffRenderer
+});

package/dist/components/diff-renderer.d.cts

@@ -0,0 +1,11 @@
+import React__default from 'react';
+
+interface DiffRendererProps {
+    meta?: Record<string, unknown>;
+    renderCode: React__default.ReactNode;
+    className?: string;
+    style?: React__default.CSSProperties;
+}
+declare const DefaultDiffRenderer: React__default.FC<DiffRendererProps>;
+
+export { DefaultDiffRenderer, type DiffRendererProps };

package/dist/components/diff-renderer.d.ts

@@ -0,0 +1,11 @@
+import React__default from 'react';
+
+interface DiffRendererProps {
+    meta?: Record<string, unknown>;
+    renderCode: React__default.ReactNode;
+    className?: string;
+    style?: React__default.CSSProperties;
+}
+declare const DefaultDiffRenderer: React__default.FC<DiffRendererProps>;
+
+export { DefaultDiffRenderer, type DiffRendererProps };

package/dist/components/diff-renderer.mjs

@@ -0,0 +1,66 @@
+"use client";
+
+// src/components/diff-renderer.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DefaultDiffRenderer = ({
+  meta,
+  renderCode,
+  className = "",
+  style
+}) => {
+  let diffBlocks = Array.isArray(meta?.diffBlocks) ? meta.diffBlocks : null;
+  return !diffBlocks || diffBlocks.length === 0 ? /* @__PURE__ */ jsx(Fragment, { children: renderCode }) : /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `stream-mdx-diff-container my-4 rounded-md border border-border bg-muted/20 font-mono text-sm overflow-hidden ${className}`.trim(),
+      style,
+      children: diffBlocks.map((diffBlock, bIdx) => /* @__PURE__ */ jsxs("div", { className: "stream-mdx-diff-block", children: [
+        (diffBlock.filePath || diffBlock.additions != null || diffBlock.deletions != null) && /* @__PURE__ */ jsxs("div", { className: "stream-mdx-diff-header flex items-center justify-between border-b border-border bg-muted/40 px-4 py-2 text-xs font-semibold text-muted-foreground", children: [
+          /* @__PURE__ */ jsx("span", { className: "stream-mdx-diff-filepath", children: diffBlock.filePath ?? "diff" }),
+          /* @__PURE__ */ jsxs("span", { className: "stream-mdx-diff-stats flex gap-2", children: [
+            diffBlock.additions != null && /* @__PURE__ */ jsxs("span", { className: "stream-mdx-diff-stat-add text-green-600 dark:text-green-400", children: [
+              "+",
+              diffBlock.additions
+            ] }),
+            diffBlock.deletions != null && /* @__PURE__ */ jsxs("span", { className: "stream-mdx-diff-stat-del text-red-600 dark:text-red-400", children: [
+              "-",
+              diffBlock.deletions
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "stream-mdx-diff-lines overflow-x-auto", children: /* @__PURE__ */ jsx("table", { className: "w-full border-collapse font-mono text-xs", children: /* @__PURE__ */ jsx("tbody", { children: diffBlock.lines.map((line, lIdx) => {
+          let kindClass = `diff-line-${line.kind} ${line.kind === "add" ? "bg-green-500/10 text-green-900 dark:text-green-200" : line.kind === "del" ? "bg-red-500/10 text-red-900 dark:text-red-200" : line.kind === "hunk" ? "bg-blue-500/10 text-blue-800 dark:text-blue-300 font-semibold" : line.kind === "meta" ? "bg-muted/50 text-muted-foreground italic" : "text-foreground"}`;
+          return /* @__PURE__ */ jsxs(
+            "tr",
+            {
+              className: `stream-mdx-diff-row ${kindClass}`,
+              "data-diff-kind": line.kind,
+              children: [
+                /* @__PURE__ */ jsx("td", { className: "stream-mdx-diff-old-no select-none px-2 py-0.5 text-right opacity-50 w-10", children: line.oldNo != null ? line.oldNo : "" }),
+                /* @__PURE__ */ jsx("td", { className: "stream-mdx-diff-new-no select-none px-2 py-0.5 text-right opacity-50 w-10", children: line.newNo != null ? line.newNo : "" }),
+                /* @__PURE__ */ jsx("td", { className: "stream-mdx-diff-prefix select-none px-1 py-0.5 text-center w-4 font-bold", children: line.kind === "add" ? "+" : line.kind === "del" ? "-" : line.kind === "hunk" ? "@" : " " }),
+                /* @__PURE__ */ jsx("td", { className: "stream-mdx-diff-content px-2 py-0.5 whitespace-pre", children: line.tokens && line.tokens.length > 0 ? line.tokens.map((token, tIdx) => /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      color: token.color ?? void 0,
+                      fontStyle: token.fontStyle === 1 || token.fontStyle === 3 ? "italic" : void 0,
+                      fontWeight: token.fontStyle === 2 || token.fontStyle === 3 ? "bold" : void 0
+                    },
+                    children: token.content
+                  },
+                  tIdx
+                )) : /* @__PURE__ */ jsx("span", { children: line.raw.replace(/^[+\- ]/, "") }) })
+              ]
+            },
+            lIdx
+          );
+        }) }) }) })
+      ] }, bIdx))
+    }
+  );
+};
+DefaultDiffRenderer.displayName = "DefaultDiffRenderer";
+export {
+  DefaultDiffRenderer
+};