@stream-mdx/react 0.3.0 → 0.5.0

package/dist/components/index.d.cts

@@ -1,3 +1,5 @@
+export { BottomStickDebugState, BottomStickJumpButtonRenderState, BottomStickMode, BottomStickScrollArea, BottomStickScrollAreaProps } from './bottom-stick-scroll-area.cjs';
 import '@stream-mdx/core';
 import 'react';
-export { C as ComponentRegistry, D as DefaultLinkSafetyModal, L as LinkSafetyModalProps, f as defaultBlockComponents, e as defaultInlineComponents, m as mapHtmlToReact, r as renderInlineNodes, g as renderParagraphMixedSegments } from '../index-D7px9jug.cjs';
+export { C as ComponentRegistry, D as DefaultLinkSafetyModal, L as LinkSafetyModalProps, e as defaultBlockComponents, d as defaultInlineComponents, m as mapHtmlToReact, r as renderInlineNodes, f as renderParagraphMixedSegments } from '../index-EaeouYp2.cjs';
+import 'react/jsx-runtime';

package/dist/components/index.d.ts

@@ -1,3 +1,5 @@
+export { BottomStickDebugState, BottomStickJumpButtonRenderState, BottomStickMode, BottomStickScrollArea, BottomStickScrollAreaProps } from './bottom-stick-scroll-area.js';
 import '@stream-mdx/core';
 import 'react';
-export { C as ComponentRegistry, D as DefaultLinkSafetyModal, L as LinkSafetyModalProps, f as defaultBlockComponents, e as defaultInlineComponents, m as mapHtmlToReact, r as renderInlineNodes, g as renderParagraphMixedSegments } from '../index-D7px9jug.js';
+export { C as ComponentRegistry, D as DefaultLinkSafetyModal, L as LinkSafetyModalProps, e as defaultBlockComponents, d as defaultInlineComponents, m as mapHtmlToReact, r as renderInlineNodes, f as renderParagraphMixedSegments } from '../index-BVhp_pcF.js';
+import 'react/jsx-runtime';

package/dist/components/index.mjs

@@ -81,7 +81,7 @@ var init_mdx_client = __esm({
         if (block.type !== "mdx") {
           throw new Error("Block is not MDX type");
         }
-        const cacheKey = block.id;
+        const cacheKey = `${block.id}\0${block.payload.raw ?? ""}`;
         const cachedPromise = this.cache.get(cacheKey);
         if (cachedPromise) {
           return cachedPromise;
@@ -384,6 +384,321 @@ var init_mdx_client = __esm({
   }
 });
 
+// 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;
+function clamp01(value) {
+  if (value < 0) return 0;
+  if (value > 1) return 1;
+  return value;
+}
+function easeOutCubic(value) {
+  return 1 - (1 - value) ** 3;
+}
+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;
+  return { scrollTop, scrollHeight, clientHeight, maxScrollTop, distanceToBottom, isOverflowing };
+}
+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": true, children: "\u2193" })
+    }
+  );
+}
+function BottomStickScrollArea({
+  children,
+  className,
+  viewportClassName,
+  contentClassName,
+  showJumpToBottom = true,
+  onDebugStateChange,
+  onModeChange,
+  debugDomAttributes = false,
+  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(
+    (next) => {
+      modeRef.current = next;
+      setMode(next);
+      onModeChange?.(next);
+    },
+    [onModeChange]
+  );
+  const updateDebug = useCallback(() => {
+    const 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?.({
+      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]);
+  const writeScrollTop = useCallback((nextTop) => {
+    const 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;
+    }
+    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);
+    if (initial.distanceToBottom <= EPS_BOTTOM_PX) {
+      setModeBoth("STICKY_INSTANT");
+      stickToBottomInstant();
+      updateDebug();
+      return;
+    }
+    const 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");
+    const tick = (now2) => {
+      const viewportCurrent = viewportRef.current;
+      const anim = returnAnimRef.current;
+      if (!viewportCurrent || !anim || modeRef.current !== "RETURNING_SMOOTH") {
+        cancelReturn();
+        return;
+      }
+      const before = measure(viewportCurrent);
+      const progress = clamp01((now2 - 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;
+      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]);
+  const onViewportScroll = useCallback(
+    (event) => {
+      const viewport = event.currentTarget;
+      const 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();
+    },
+    [cancelPendingStick, cancelReturn, setModeBoth, stickToBottomInstant, updateDebug]
+  );
+  useEffect(() => {
+    const viewport = viewportRef.current;
+    const 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();
+    });
+    observer.observe(content);
+    observer.observe(viewport);
+    return () => observer.disconnect();
+  }, [stickToBottomInstant, updateDebug]);
+  useLayoutEffect(() => {
+    const 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();
+    };
+  }, [cancelPendingStick, cancelReturn]);
+  const canJump = isOverflowing && mode === "DETACHED";
+  const jumpButton = renderJumpToBottom?.({
+    mode,
+    canJump,
+    isOverflowing,
+    distanceToBottom,
+    jumpToBottom: startReturnToBottomSmooth
+  }) ?? /* @__PURE__ */ jsx(DefaultJumpButton, { canJump, jumpToBottom: startReturnToBottomSmooth });
+  const jumpContainerClassNameBase = "pointer-events-none absolute z-20";
+  const jumpContainerStyle = {
+    position: "absolute",
+    zIndex: 20,
+    left: 0,
+    right: 0,
+    bottom: 12,
+    display: "flex",
+    justifyContent: "center",
+    opacity: canJump ? 1 : 0,
+    transform: canJump ? "translateY(0px)" : "translateY(4px)",
+    transition: "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,
+        "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
+  ] });
+}
+
 // src/components/index.ts
 import { createTrustedHTML, sanitizeHTML } from "@stream-mdx/core";
 
@@ -437,11 +752,11 @@ function loadMdxRuntime() {
 }
 
 // src/renderer/use-deferred-render.ts
-import { useEffect, useState } from "react";
+import { useEffect as useEffect2, useState as useState2 } from "react";
 function useDeferredRender(ref, options) {
   const enabled = options?.enabled ?? true;
-  const [shouldRender, setShouldRender] = useState(!enabled);
-  useEffect(() => {
+  const [shouldRender, setShouldRender] = useState2(!enabled);
+  useEffect2(() => {
     if (!enabled) {
       setShouldRender(true);
       return;
@@ -766,12 +1081,12 @@ var INLINE_ELEMENTS = /* @__PURE__ */ new Set([
 ]);
 
 // src/components/link-safety-modal.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var DefaultLinkSafetyModal = ({ url, isOpen, isChecking, onClose, onConfirm, onCopy }) => {
   if (!isOpen) {
     return null;
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       className: "stream-mdx-link-modal-backdrop",
@@ -789,7 +1104,7 @@ var DefaultLinkSafetyModal = ({ url, isOpen, isChecking, onClose, onConfirm, onC
         padding: "24px"
       },
       onClick: onClose,
-      children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsxs2(
         "div",
         {
           className: "stream-mdx-link-modal",
@@ -804,12 +1119,12 @@ var DefaultLinkSafetyModal = ({ url, isOpen, isChecking, onClose, onConfirm, onC
           },
           onClick: (event) => event.stopPropagation(),
           children: [
-            /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, marginBottom: 8 }, children: "Open external link?" }),
-            /* @__PURE__ */ jsx("div", { style: { fontSize: 13, opacity: 0.8, wordBreak: "break-all", marginBottom: 16 }, children: url }),
-            /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end" }, children: [
-              /* @__PURE__ */ jsx("button", { type: "button", onClick: onCopy, disabled: isChecking, style: buttonStyle, children: "Copy link" }),
-              /* @__PURE__ */ jsx("button", { type: "button", onClick: onConfirm, disabled: isChecking, style: primaryButtonStyle, children: "Open link" }),
-              /* @__PURE__ */ jsx("button", { type: "button", onClick: onClose, style: buttonStyle, children: "Cancel" })
+            /* @__PURE__ */ jsx2("div", { style: { fontWeight: 600, marginBottom: 8 }, children: "Open external link?" }),
+            /* @__PURE__ */ jsx2("div", { style: { fontSize: 13, opacity: 0.8, wordBreak: "break-all", marginBottom: 16 }, children: url }),
+            /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end" }, children: [
+              /* @__PURE__ */ jsx2("button", { type: "button", onClick: onCopy, disabled: isChecking, style: buttonStyle, children: "Copy link" }),
+              /* @__PURE__ */ jsx2("button", { type: "button", onClick: onConfirm, disabled: isChecking, style: primaryButtonStyle, children: "Open link" }),
+              /* @__PURE__ */ jsx2("button", { type: "button", onClick: onClose, style: buttonStyle, children: "Cancel" })
             ] })
           ]
         }
@@ -984,7 +1299,11 @@ var defaultInlineComponents = {
     const n = number ?? "?";
     const href = number ? `#fn:${n}` : void 0;
     const id = number ? `fnref:${n}` : void 0;
-    return React4.createElement("sup", { className: "footnote-ref" }, React4.createElement("a", { href, id, "data-label": label }, String(n)));
+    return React4.createElement(
+      "sup",
+      { className: "footnote-ref" },
+      React4.createElement("a", { href, id, "data-label": label, style: { color: "var(--foreground)", textDecoration: "underline" } }, String(n))
+    );
   }
 };
 var defaultBlockComponents = {
@@ -1021,15 +1340,17 @@ var defaultBlockComponents = {
       effectiveInlines.length > 0 ? renderInlineNodes(effectiveInlines, defaultInlineComponents) : raw ?? ""
     );
   },
-  heading: ({ level, inlines, text }) => {
+  heading: ({ level, inlines, text, meta }) => {
     const tag = `h${level}`;
     const onlyPlainText = Array.isArray(inlines) && inlines.length > 0 && inlines.every((node) => node.kind === "text");
     const children = onlyPlainText ? inlines.map((node) => node.kind === "text" ? node.text : "").join("") : renderInlineNodes(inlines, defaultInlineComponents);
+    const headingId = typeof meta?.headingId === "string" && meta.headingId.length > 0 ? meta.headingId : void 0;
     return React4.createElement(
       tag,
       {
         className: `markdown-heading markdown-h${level}`,
-        ...text ? { "data-heading-text": text } : {}
+        ...text ? { "data-heading-text": text } : {},
+        ...headingId ? { id: headingId, "data-heading-id": headingId } : {}
       },
       children
     );
@@ -1114,7 +1435,7 @@ var defaultBlockComponents = {
   },
   html: ({ __trustedHtml, elements }) => {
     const raw = typeof __trustedHtml === "string" ? __trustedHtml : __trustedHtml.toString();
-    const htmlString = sanitizeHTML(raw);
+    const htmlString = typeof window === "undefined" ? raw : sanitizeHTML(raw);
     if (typeof window !== "undefined" && elements) {
       const content = mapHtmlToReact(htmlString, elements);
       return React4.createElement("div", { className: "markdown-html" }, content);
@@ -1125,7 +1446,7 @@ var defaultBlockComponents = {
       dangerouslySetInnerHTML: { __html: htmlString }
     });
   },
-  mdx: ({ compiledRef, compiledModule, status, errorMessage, raw }) => {
+  mdx: ({ compiledRef, compiledModule, status, errorMessage }) => {
     const [Comp, setComp] = React4.useState(null);
     const [internalError, setInternalError] = React4.useState(null);
     const [renderError, setRenderError] = React4.useState(null);
@@ -1226,7 +1547,6 @@ var defaultBlockComponents = {
     const waitingForVisibility = deferHydration && !shouldHydrate && Boolean(resolvedId);
     const pendingLabel = waitingForVisibility ? "MDX ready (hydrate on view)\u2026" : compileMode === "worker" ? "Compiling MDX (client)\u2026" : "Compiling MDX (server)\u2026";
     const message = failureMessage ?? (compileMode === "worker" ? "MDX compilation failed in client mode. Try switching back to server rendering or restarting the stream." : "MDX compilation failed. Try restarting the stream.");
-    const rawFallback = typeof raw === "string" && raw.trim().length > 0 ? React4.createElement("pre", { className: "markdown-mdx-fallback" }, raw) : null;
     const allowRetry = Boolean(internalError || renderError);
     const retryButton = allowRetry ? React4.createElement(
       "button",
@@ -1238,9 +1558,10 @@ var defaultBlockComponents = {
       "Retry hydration"
     ) : null;
     const errorPanel = React4.createElement(
-      "div",
-      { className: "markdown-mdx-error" },
-      React4.createElement(React4.Fragment, null, React4.createElement("strong", null, "MDX failed"), React4.createElement("div", null, message))
+      React4.Fragment,
+      null,
+      React4.createElement("strong", null, "MDX failed"),
+      React4.createElement("div", null, message)
     );
     if (Comp && !failureMessage) {
       return React4.createElement(
@@ -1263,14 +1584,13 @@ var defaultBlockComponents = {
       return React4.createElement(
         "div",
         {
-          className: "markdown-mdx",
+          className: "markdown-mdx error",
           ref: containerRef,
           "data-mdx-ref": pendingId,
           "data-mdx-status": "error",
           "data-mdx-mode": compileMode
         },
         errorPanel,
-        rawFallback,
         retryButton
       );
     }
@@ -1297,7 +1617,16 @@ var defaultBlockComponents = {
         { key: item.number, id: `fn:${item.number}` },
         renderInlineNodes(item.inlines, defaultInlineComponents),
         " ",
-        React4.createElement("a", { href: `#fnref:${item.number}`, className: "footnote-backref", "aria-label": "Back to content" }, "\u21A9")
+        React4.createElement(
+          "a",
+          {
+            href: `#fnref:${item.number}`,
+            className: "footnote-backref",
+            "aria-label": "Back to content",
+            style: { color: "var(--foreground)", textDecoration: "underline" }
+          },
+          "\u21A9"
+        )
       )
     );
     return React4.createElement("section", { className: "footnotes" }, React4.createElement("hr", {}), React4.createElement("ol", {}, listItems));
@@ -1472,7 +1801,9 @@ var ComponentRegistry = class {
       case "html": {
         const trusted = block.payload.sanitizedHtml ?? block.payload.raw;
         return {
-          __trustedHtml: createTrustedHTML(trusted),
+          // Server render should not depend on DOMPurify (which requires a DOM `window`).
+          // In worker-compiled flows, `sanitizedHtml` is already sanitized at the source.
+          __trustedHtml: typeof window === "undefined" ? String(trusted ?? "") : createTrustedHTML(String(trusted ?? "")),
           elements: this.htmlElements
         };
       }
@@ -1830,6 +2161,7 @@ var BLOCK_LEVEL_TAGS = /* @__PURE__ */ new Set([
   "math"
 ]);
 export {
+  BottomStickScrollArea,
   ComponentRegistry,
   DefaultLinkSafetyModal,
   defaultBlockComponents,

package/dist/{index-D7px9jug.d.cts → index-BVhp_pcF.d.ts}

@@ -1,3 +1,4 @@
+import './components/bottom-stick-scroll-area.js';
 import { InlineNode, TokenLineV1, CompiledMdxModule, InlineHtmlDescriptor, Block, LazyTokenizationPriority, FormatAnticipationConfig, CodeHighlightingMode, CodeHighlightOutputMode, MixedContentSegment } from '@stream-mdx/core';
 import React from 'react';
 
@@ -144,6 +145,8 @@ interface RendererConfig {
         urgentQueueThreshold?: number;
         batch?: "rAF" | "microtask" | "timeout";
         historyLimit?: number;
+        startupMicrotaskFlushes?: number;
+        adaptiveBudgeting?: boolean;
     };
 }
 interface RendererStore {
@@ -245,4 +248,4 @@ declare class ComponentRegistry {
 declare function mapHtmlToReact(html: string, elements: HtmlElements): React.ReactNode;
 declare function renderParagraphMixedSegments(segments: MixedContentSegment[], inlineComponents: InlineComponents, inlineHtmlRenderers: InlineHtmlRendererMap): React.ReactNode[];
 
-export { type BlockComponents as B, ComponentRegistry as C, DefaultLinkSafetyModal as D, type HtmlElements as H, type InlineComponents as I, type LinkSafetyModalProps as L, type Renderer as R, type TableElements as T, type RendererConfig as a, type CodeHighlightRangeRequest as b, type InlineHtmlRendererMap as c, type InlineHtmlRenderer as d, defaultInlineComponents as e, defaultBlockComponents as f, renderParagraphMixedSegments as g, mapHtmlToReact as m, renderInlineNodes as r };
+export { type BlockComponents as B, ComponentRegistry as C, DefaultLinkSafetyModal as D, type HtmlElements as H, type InlineHtmlRendererMap as I, type LinkSafetyModalProps as L, type Renderer as R, type TableElements as T, type InlineComponents as a, type InlineHtmlRenderer as b, type RendererConfig as c, defaultInlineComponents as d, defaultBlockComponents as e, renderParagraphMixedSegments as f, type CodeHighlightRangeRequest as g, mapHtmlToReact as m, renderInlineNodes as r };

package/dist/{index-D7px9jug.d.ts → index-EaeouYp2.d.cts}

@@ -1,3 +1,4 @@
+import './components/bottom-stick-scroll-area.cjs';
 import { InlineNode, TokenLineV1, CompiledMdxModule, InlineHtmlDescriptor, Block, LazyTokenizationPriority, FormatAnticipationConfig, CodeHighlightingMode, CodeHighlightOutputMode, MixedContentSegment } from '@stream-mdx/core';
 import React from 'react';
 
@@ -144,6 +145,8 @@ interface RendererConfig {
         urgentQueueThreshold?: number;
         batch?: "rAF" | "microtask" | "timeout";
         historyLimit?: number;
+        startupMicrotaskFlushes?: number;
+        adaptiveBudgeting?: boolean;
     };
 }
 interface RendererStore {
@@ -245,4 +248,4 @@ declare class ComponentRegistry {
 declare function mapHtmlToReact(html: string, elements: HtmlElements): React.ReactNode;
 declare function renderParagraphMixedSegments(segments: MixedContentSegment[], inlineComponents: InlineComponents, inlineHtmlRenderers: InlineHtmlRendererMap): React.ReactNode[];
 
-export { type BlockComponents as B, ComponentRegistry as C, DefaultLinkSafetyModal as D, type HtmlElements as H, type InlineComponents as I, type LinkSafetyModalProps as L, type Renderer as R, type TableElements as T, type RendererConfig as a, type CodeHighlightRangeRequest as b, type InlineHtmlRendererMap as c, type InlineHtmlRenderer as d, defaultInlineComponents as e, defaultBlockComponents as f, renderParagraphMixedSegments as g, mapHtmlToReact as m, renderInlineNodes as r };
+export { type BlockComponents as B, ComponentRegistry as C, DefaultLinkSafetyModal as D, type HtmlElements as H, type InlineHtmlRendererMap as I, type LinkSafetyModalProps as L, type Renderer as R, type TableElements as T, type InlineComponents as a, type InlineHtmlRenderer as b, type RendererConfig as c, defaultInlineComponents as d, defaultBlockComponents as e, renderParagraphMixedSegments as f, type CodeHighlightRangeRequest as g, mapHtmlToReact as m, renderInlineNodes as r };