@stream-mdx/react 0.4.0 → 1.0.0

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

@@ -0,0 +1,249 @@
+"use client";
+"use client";
+
+// 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, 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) {
+  return value < 0 ? 0 : value > 1 ? 1 : value;
+}
+function easeOutCubic(value) {
+  return 1 - (1 - value) ** 3;
+}
+function joinClasses(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function measure(viewport) {
+  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",
+    {
+      type: "button",
+      onClick: jumpToBottom,
+      "aria-label": "Scroll to bottom",
+      style: {
+        pointerEvents: canJump ? "auto" : "none",
+        borderRadius: 9999,
+        border: "1px solid color-mix(in srgb, currentColor 20%, transparent)",
+        width: 40,
+        height: 40,
+        display: "grid",
+        placeItems: "center",
+        boxShadow: "0 8px 20px rgba(0,0,0,0.18)",
+        background: "color-mix(in srgb, var(--background, #fff) 92%, transparent)",
+        color: "var(--foreground, #111)",
+        cursor: canJump ? "pointer" : "default"
+      },
+      children: /* @__PURE__ */ jsx("span", { "aria-hidden": !0, children: "\u2193" })
+    }
+  );
+}
+function BottomStickScrollArea({
+  children,
+  className,
+  viewportClassName,
+  contentClassName,
+  showJumpToBottom = !0,
+  onDebugStateChange,
+  onModeChange,
+  debugDomAttributes = !1,
+  renderJumpToBottom,
+  jumpContainerClassName
+}) {
+  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);
+    },
+    [onModeChange]
+  ), updateDebug = useCallback(() => {
+    let viewport = viewportRef.current;
+    if (!viewport) return;
+    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,
+      scrollTop: m.scrollTop,
+      maxScrollTop: m.maxScrollTop,
+      scrollHeight: m.scrollHeight,
+      clientHeight: m.clientHeight,
+      programmaticWrites: programmaticWriteCountRef.current
+    }), setDistanceToBottom(
+      (previous) => Math.abs(previous - m.distanceToBottom) <= 0.1 ? previous : m.distanceToBottom
+    );
+  }, [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;
+    if (prefersReducedMotionRef.current) {
+      cancelPendingStick(), cancelReturn(), setModeBoth("STICKY_INSTANT"), writeScrollTop(measure(viewport).maxScrollTop), prevScrollTopRef.current = viewport.scrollTop, updateDebug();
+      return;
+    }
+    cancelPendingStick(), cancelReturn();
+    let initial = measure(viewport);
+    if (initial.distanceToBottom <= EPS_BOTTOM_PX) {
+      setModeBoth("STICKY_INSTANT"), stickToBottomInstant(), updateDebug();
+      return;
+    }
+    let durationMs = Math.max(
+      RETURN_MIN_MS,
+      Math.min(RETURN_MAX_MS, initial.distanceToBottom / RETURN_PX_PER_MS)
+    );
+    returnAnimRef.current = {
+      startTime: performance.now(),
+      startTop: initial.scrollTop,
+      durationMs,
+      settleFrames: 0
+    }, setModeBoth("RETURNING_SMOOTH");
+    let tick = (now) => {
+      let viewportCurrent = viewportRef.current, anim = returnAnimRef.current;
+      if (!viewportCurrent || !anim || modeRef.current !== "RETURNING_SMOOTH") {
+        cancelReturn();
+        return;
+      }
+      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();
+        return;
+      }
+      updateDebug(), returnRafRef.current = requestAnimationFrame(tick);
+    };
+    returnRafRef.current = requestAnimationFrame(tick);
+  }, [cancelPendingStick, cancelReturn, setModeBoth, stickToBottomInstant, updateDebug, writeScrollTop]), onViewportScroll = useCallback(
+    (event) => {
+      let viewport = event.currentTarget, m = measure(viewport);
+      setIsOverflowing((previous) => previous === m.isOverflowing ? previous : m.isOverflowing);
+      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(() => {
+    let viewport = viewportRef.current, content = contentRef.current;
+    if (!viewport || !content) return;
+    let observer = new ResizeObserver(() => {
+      let m = measure(viewport);
+      setIsOverflowing((previous) => previous === m.isOverflowing ? previous : m.isOverflowing), modeRef.current === "STICKY_INSTANT" && stickToBottomInstant(), updateDebug();
+    });
+    return observer.observe(content), observer.observe(viewport), () => observer.disconnect();
+  }, [stickToBottomInstant, updateDebug]), useLayoutEffect(() => {
+    let viewport = viewportRef.current;
+    if (!viewport) return;
+    setModeBoth("STICKY_INSTANT");
+    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]);
+  let canJump = isOverflowing && mode === "DETACHED", jumpButton = renderJumpToBottom?.({
+    mode,
+    canJump,
+    isOverflowing,
+    distanceToBottom,
+    jumpToBottom: startReturnToBottomSmooth
+  }) ?? /* @__PURE__ */ jsx(DefaultJumpButton, { canJump, jumpToBottom: startReturnToBottomSmooth }), jumpContainerClassNameBase = "pointer-events-none absolute z-20", jumpContainerStyle = {
+    position: "absolute",
+    zIndex: 20,
+    left: 0,
+    right: 0,
+    bottom: 12,
+    display: "flex",
+    justifyContent: "center",
+    opacity: canJump ? 1 : 0,
+    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: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        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 })
+      }
+    ),
+    showJumpToBottom ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: joinClasses(jumpContainerClassNameBase, jumpContainerClassName),
+        style: jumpContainerStyle,
+        "aria-hidden": !canJump,
+        children: /* @__PURE__ */ jsx("div", { className: canJump ? "pointer-events-auto" : "pointer-events-none", children: jumpButton })
+      }
+    ) : null
+  ] });
+}
+export {
+  BottomStickScrollArea
+};

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
+};