@stream-mdx/react 0.3.0 → 0.5.0

package/dist/components/index.cjs

@@ -46,11 +46,11 @@ function assignMdxChildKey(child, index) {
   if (Array.isArray(child)) {
     return child.map((entry, subIndex) => assignMdxChildKey(entry, `${index}-${subIndex}`));
   }
-  if (import_react2.default.isValidElement(child)) {
+  if (import_react3.default.isValidElement(child)) {
     if (child.key !== null && child.key !== void 0) {
       return child;
     }
-    return import_react2.default.cloneElement(child, { key: index });
+    return import_react3.default.cloneElement(child, { key: index });
   }
   return child;
 }
@@ -79,14 +79,14 @@ function registerInlineMdxModule(compiled) {
     dependencies: compiled.dependencies ?? []
   });
 }
-var import_react2, ReactJsxRuntime, withClassName, MDXClient, MDXComponentFactory, globalMDXClient, globalComponentFactory;
+var import_react3, ReactJsxRuntime, withClassName, MDXClient, MDXComponentFactory, globalMDXClient, globalComponentFactory;
 var init_mdx_client = __esm({
   "src/mdx-client.ts"() {
     "use strict";
-    import_react2 = __toESM(require("react"), 1);
+    import_react3 = __toESM(require("react"), 1);
     ReactJsxRuntime = __toESM(require("react/jsx-runtime"), 1);
     withClassName = (tag, className) => {
-      return (props) => import_react2.default.createElement(tag, { className, ...props });
+      return (props) => import_react3.default.createElement(tag, { className, ...props });
     };
     MDXClient = class {
       constructor(compileEndpoint = "/api/mdx-compile-v2") {
@@ -103,7 +103,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;
@@ -261,14 +261,14 @@ var init_mdx_client = __esm({
             const registryComponents = this.getComponents();
             const incomingComponents = props?.components;
             const mergedComponents = incomingComponents ? { ...registryComponents, ...incomingComponents } : registryComponents;
-            return import_react2.default.createElement(MDXComponent, {
+            return import_react3.default.createElement(MDXComponent, {
               ...props,
               components: mergedComponents
             });
           };
         } catch (error) {
           console.error("Failed to evaluate MDX:", error);
-          return () => import_react2.default.createElement(
+          return () => import_react3.default.createElement(
             "div",
             {
               className: "mdx-error"
@@ -288,7 +288,7 @@ var init_mdx_client = __esm({
           if (Array.isArray(finalProps.children)) {
             finalProps.children = finalProps.children.map((child, index) => assignMdxChildKey(child, index));
           }
-          return import_react2.default.createElement(type, finalProps);
+          return import_react3.default.createElement(type, finalProps);
         };
         const runtimeJsx = typeof runtime.jsx === "function" ? runtime.jsx.bind(runtime) : createElementWithChildren;
         const runtimeJsxs = typeof runtime.jsxs === "function" ? runtime.jsxs.bind(runtime) : createElementWithChildren;
@@ -297,20 +297,20 @@ var init_mdx_client = __esm({
           jsx: runtimeJsx,
           jsxs: runtimeJsxs,
           jsxDEV: runtimeJsxDEV,
-          Fragment: runtime.Fragment ?? import_react2.default.Fragment
+          Fragment: runtime.Fragment ?? import_react3.default.Fragment
         };
         return {
           __mdx_runtime: jsxRuntime,
-          React: import_react2.default,
-          Fragment: import_react2.default.Fragment,
-          useState: import_react2.default.useState,
-          useEffect: import_react2.default.useEffect,
-          useMemo: import_react2.default.useMemo,
-          useCallback: import_react2.default.useCallback,
-          useRef: import_react2.default.useRef,
-          useContext: import_react2.default.useContext,
-          useReducer: import_react2.default.useReducer,
-          useLayoutEffect: import_react2.default.useLayoutEffect,
+          React: import_react3.default,
+          Fragment: import_react3.default.Fragment,
+          useState: import_react3.default.useState,
+          useEffect: import_react3.default.useEffect,
+          useMemo: import_react3.default.useMemo,
+          useCallback: import_react3.default.useCallback,
+          useRef: import_react3.default.useRef,
+          useContext: import_react3.default.useContext,
+          useReducer: import_react3.default.useReducer,
+          useLayoutEffect: import_react3.default.useLayoutEffect,
           console: {
             log: console.log,
             warn: console.warn,
@@ -376,13 +376,13 @@ var init_mdx_client = __esm({
           ol: withClassName("ol", "mdx-ol"),
           li: withClassName("li", "mdx-li"),
           blockquote: withClassName("blockquote", "mdx-blockquote"),
-          a: (props) => import_react2.default.createElement("a", {
+          a: (props) => import_react3.default.createElement("a", {
             className: "mdx-link",
             target: props.href?.startsWith("http") ? "_blank" : void 0,
             rel: props.href?.startsWith("http") ? "noopener noreferrer" : void 0,
             ...props
           }),
-          img: (props) => import_react2.default.createElement("img", { className: "mdx-img", ...props }),
+          img: (props) => import_react3.default.createElement("img", { className: "mdx-img", ...props }),
           table: withClassName("table", "mdx-table"),
           thead: withClassName("thead", "mdx-thead"),
           tbody: withClassName("tbody", "mdx-tbody"),
@@ -409,6 +409,7 @@ var init_mdx_client = __esm({
 // src/components/index.ts
 var components_exports = {};
 __export(components_exports, {
+  BottomStickScrollArea: () => BottomStickScrollArea,
   ComponentRegistry: () => ComponentRegistry,
   DefaultLinkSafetyModal: () => DefaultLinkSafetyModal,
   defaultBlockComponents: () => defaultBlockComponents,
@@ -418,6 +419,323 @@ __export(components_exports, {
   renderParagraphMixedSegments: () => renderParagraphMixedSegments
 });
 module.exports = __toCommonJS(components_exports);
+
+// src/components/bottom-stick-scroll-area.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": true, children: "\u2193" })
+    }
+  );
+}
+function BottomStickScrollArea({
+  children,
+  className,
+  viewportClassName,
+  contentClassName,
+  showJumpToBottom = true,
+  onDebugStateChange,
+  onModeChange,
+  debugDomAttributes = false,
+  renderJumpToBottom,
+  jumpContainerClassName
+}) {
+  const viewportRef = (0, import_react.useRef)(null);
+  const contentRef = (0, import_react.useRef)(null);
+  const modeRef = (0, import_react.useRef)("STICKY_INSTANT");
+  const [mode, setMode] = (0, import_react.useState)("STICKY_INSTANT");
+  const [isOverflowing, setIsOverflowing] = (0, import_react.useState)(false);
+  const [distanceToBottom, setDistanceToBottom] = (0, import_react.useState)(0);
+  const prevScrollTopRef = (0, import_react.useRef)(0);
+  const lastProgrammaticWriteRef = (0, import_react.useRef)(null);
+  const programmaticWriteCountRef = (0, import_react.useRef)(0);
+  const pendingStickRafRef = (0, import_react.useRef)(null);
+  const stickRequestedRef = (0, import_react.useRef)(false);
+  const returnRafRef = (0, import_react.useRef)(null);
+  const returnAnimRef = (0, import_react.useRef)(null);
+  const setModeBoth = (0, import_react.useCallback)(
+    (next) => {
+      modeRef.current = next;
+      setMode(next);
+      onModeChange?.(next);
+    },
+    [onModeChange]
+  );
+  const updateDebug = (0, import_react.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 = (0, import_react.useCallback)((nextTop) => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    viewport.scrollTop = nextTop;
+    programmaticWriteCountRef.current += 1;
+    lastProgrammaticWriteRef.current = { at: performance.now(), top: nextTop };
+  }, []);
+  const cancelPendingStick = (0, import_react.useCallback)(() => {
+    if (pendingStickRafRef.current !== null) {
+      cancelAnimationFrame(pendingStickRafRef.current);
+      pendingStickRafRef.current = null;
+    }
+    stickRequestedRef.current = false;
+  }, []);
+  const cancelReturn = (0, import_react.useCallback)(() => {
+    if (returnRafRef.current !== null) {
+      cancelAnimationFrame(returnRafRef.current);
+      returnRafRef.current = null;
+    }
+    returnAnimRef.current = null;
+  }, []);
+  const stickToBottomInstant = (0, import_react.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 = (0, import_react.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 = (0, import_react.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]
+  );
+  (0, import_react.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]);
+  (0, import_react.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]);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      cancelPendingStick();
+      cancelReturn();
+    };
+  }, [cancelPendingStick, cancelReturn]);
+  const canJump = isOverflowing && mode === "DETACHED";
+  const jumpButton = renderJumpToBottom?.({
+    mode,
+    canJump,
+    isOverflowing,
+    distanceToBottom,
+    jumpToBottom: startReturnToBottomSmooth
+  }) ?? /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: joinClasses("relative h-full w-full overflow-hidden", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref: viewportRef,
+        className: joinClasses("h-full w-full overflow-auto", viewportClassName),
+        onScroll: onViewportScroll,
+        "data-testid": "sticky-scroll-viewport",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: contentRef, className: joinClasses("flex min-h-full w-full flex-col", contentClassName), children })
+      }
+    ),
+    showJumpToBottom ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: joinClasses(jumpContainerClassNameBase, jumpContainerClassName),
+        style: jumpContainerStyle,
+        "aria-hidden": !canJump,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: canJump ? "pointer-events-auto" : "pointer-events-none", children: jumpButton })
+      }
+    ) : null
+  ] });
+}
+
+// src/components/index.ts
 var import_core = require("@stream-mdx/core");
 
 // src/mdx-hydration-metrics.ts
@@ -457,8 +775,8 @@ function markMdxHydrationError(id) {
 }
 
 // src/mdx-hydration-context.ts
-var import_react = __toESM(require("react"), 1);
-var MdxHydrationContext = import_react.default.createContext({ controller: null });
+var import_react2 = __toESM(require("react"), 1);
+var MdxHydrationContext = import_react2.default.createContext({ controller: null });
 
 // src/mdx-runtime.ts
 var mdxRuntimePromise = null;
@@ -470,11 +788,11 @@ function loadMdxRuntime() {
 }
 
 // src/renderer/use-deferred-render.ts
-var import_react3 = require("react");
+var import_react4 = require("react");
 function useDeferredRender(ref, options) {
   const enabled = options?.enabled ?? true;
-  const [shouldRender, setShouldRender] = (0, import_react3.useState)(!enabled);
-  (0, import_react3.useEffect)(() => {
+  const [shouldRender, setShouldRender] = (0, import_react4.useState)(!enabled);
+  (0, import_react4.useEffect)(() => {
     if (!enabled) {
       setShouldRender(true);
       return;
@@ -527,10 +845,10 @@ function useDeferredRender(ref, options) {
 
 // src/components/index.ts
 var import_core2 = require("@stream-mdx/core");
-var import_react5 = __toESM(require("react"), 1);
+var import_react6 = __toESM(require("react"), 1);
 
 // src/utils/inline-html.ts
-var import_react4 = __toESM(require("react"), 1);
+var import_react5 = __toESM(require("react"), 1);
 var BACKTICK_CONTENT = /^`([\s\S]+)`$/;
 var DEFAULT_INLINE_HTML_RENDERERS = {
   kbd: (descriptor, ctx) => {
@@ -542,7 +860,7 @@ var DEFAULT_INLINE_HTML_RENDERERS = {
       if (ctx.key !== void 0 && ctx.key !== null) {
         props.key = ctx.key;
       }
-      return import_react4.default.createElement("kbd", props, import_react4.default.createElement("code", { className: "inline-code" }, codeText));
+      return import_react5.default.createElement("kbd", props, import_react5.default.createElement("code", { className: "inline-code" }, codeText));
     }
     return ctx.defaultRender();
   }
@@ -560,9 +878,9 @@ function renderInlineHtmlSegment(raw, sanitized, options = {}) {
         return null;
       }
       if (options.key !== void 0 && options.key !== null) {
-        return import_react4.default.createElement(import_react4.default.Fragment, { key: options.key }, descriptor.text);
+        return import_react5.default.createElement(import_react5.default.Fragment, { key: options.key }, descriptor.text);
       }
-      return import_react4.default.createElement(import_react4.default.Fragment, {}, descriptor.text);
+      return import_react5.default.createElement(import_react5.default.Fragment, {}, descriptor.text);
     }
     if (isInlineTag) {
       const parsedElement = renderSanitizedHtmlTree(descriptor.sanitized, options.key);
@@ -577,15 +895,15 @@ function renderInlineHtmlSegment(raw, sanitized, options = {}) {
     if (options.key !== void 0 && options.key !== null) {
       props.key = options.key;
     }
-    return import_react4.default.createElement("span", props);
+    return import_react5.default.createElement("span", props);
   };
   const allRenderers = options.renderers ? { ...DEFAULT_INLINE_HTML_RENDERERS, ...options.renderers } : DEFAULT_INLINE_HTML_RENDERERS;
   const renderer = allRenderers[descriptor.tagName];
   if (renderer) {
     const rendered = renderer(descriptor, { key: options.key, defaultRender });
     if (rendered) {
-      if (options.key !== void 0 && options.key !== null && import_react4.default.isValidElement(rendered) && rendered.key === null) {
-        return import_react4.default.cloneElement(rendered, { key: options.key });
+      if (options.key !== void 0 && options.key !== null && import_react5.default.isValidElement(rendered) && rendered.key === null) {
+        return import_react5.default.cloneElement(rendered, { key: options.key });
       }
       return rendered;
     }
@@ -697,21 +1015,21 @@ function renderSanitizedHtmlTree(html, key) {
     }
     if (children.length === 1) {
       const [child] = children;
-      if (import_react4.default.isValidElement(child)) {
+      if (import_react5.default.isValidElement(child)) {
         if (key !== void 0 && key !== null) {
-          return import_react4.default.cloneElement(child, { key });
+          return import_react5.default.cloneElement(child, { key });
         }
         return child;
       }
       if (typeof child === "string" || typeof child === "number") {
         if (key !== void 0 && key !== null) {
-          return import_react4.default.createElement(import_react4.default.Fragment, { key }, child);
+          return import_react5.default.createElement(import_react5.default.Fragment, { key }, child);
         }
-        return import_react4.default.createElement(import_react4.default.Fragment, {}, child);
+        return import_react5.default.createElement(import_react5.default.Fragment, {}, child);
       }
-      return import_react4.default.createElement(import_react4.default.Fragment, { key }, child);
+      return import_react5.default.createElement(import_react5.default.Fragment, { key }, child);
     }
-    return import_react4.default.createElement(import_react4.default.Fragment, { key }, ...children);
+    return import_react5.default.createElement(import_react5.default.Fragment, { key }, ...children);
   } catch {
     return null;
   }
@@ -736,9 +1054,9 @@ function convertDomNode(node, key) {
     }
   });
   if (children.length === 0) {
-    return import_react4.default.createElement(tagName, props);
+    return import_react5.default.createElement(tagName, props);
   }
-  return import_react4.default.createElement(tagName, props, ...children);
+  return import_react5.default.createElement(tagName, props, ...children);
 }
 function getElementAttributes(element) {
   const attrs = {};
@@ -799,12 +1117,12 @@ var INLINE_ELEMENTS = /* @__PURE__ */ new Set([
 ]);
 
 // src/components/link-safety-modal.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var DefaultLinkSafetyModal = ({ url, isOpen, isChecking, onClose, onConfirm, onCopy }) => {
   if (!isOpen) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
       className: "stream-mdx-link-modal-backdrop",
@@ -822,7 +1140,7 @@ var DefaultLinkSafetyModal = ({ url, isOpen, isChecking, onClose, onConfirm, onC
         padding: "24px"
       },
       onClick: onClose,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
         "div",
         {
           className: "stream-mdx-link-modal",
@@ -837,12 +1155,12 @@ var DefaultLinkSafetyModal = ({ url, isOpen, isChecking, onClose, onConfirm, onC
           },
           onClick: (event) => event.stopPropagation(),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontWeight: 600, marginBottom: 8 }, children: "Open external link?" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 13, opacity: 0.8, wordBreak: "break-all", marginBottom: 16 }, children: url }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: onCopy, disabled: isChecking, style: buttonStyle, children: "Copy link" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: onConfirm, disabled: isChecking, style: primaryButtonStyle, children: "Open link" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: onClose, style: buttonStyle, children: "Cancel" })
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontWeight: 600, marginBottom: 8 }, children: "Open external link?" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: 13, opacity: 0.8, wordBreak: "break-all", marginBottom: 16 }, children: url }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", onClick: onCopy, disabled: isChecking, style: buttonStyle, children: "Copy link" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", onClick: onConfirm, disabled: isChecking, style: primaryButtonStyle, children: "Open link" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", onClick: onClose, style: buttonStyle, children: "Cancel" })
             ] })
           ]
         }
@@ -866,7 +1184,7 @@ var primaryButtonStyle = {
 };
 
 // src/components/index.ts
-var MdxRuntimeBoundary = class extends import_react5.default.Component {
+var MdxRuntimeBoundary = class extends import_react6.default.Component {
   constructor() {
     super(...arguments);
     this.state = { hasError: false };
@@ -896,31 +1214,31 @@ function renderInlineNodes(nodes, components) {
       case "text": {
         const textComponent = components.text;
         if (textComponent && textComponent !== defaultInlineComponents.text) {
-          return import_react5.default.createElement(textComponent, { key, text: node.text });
+          return import_react6.default.createElement(textComponent, { key, text: node.text });
         }
-        return import_react5.default.createElement(import_react5.default.Fragment, { key, children: node.text });
+        return import_react6.default.createElement(import_react6.default.Fragment, { key, children: node.text });
       }
       case "strong":
-        return import_react5.default.createElement(components.strong, {
+        return import_react6.default.createElement(components.strong, {
           key,
           children: renderInlineNodes(node.children, components)
         });
       case "em":
-        return import_react5.default.createElement(components.em, {
+        return import_react6.default.createElement(components.em, {
           key,
           children: renderInlineNodes(node.children, components)
         });
       case "strike": {
-        const StrikeComponent = components.strike ?? ((props) => import_react5.default.createElement("del", {}, props.children));
-        return import_react5.default.createElement(StrikeComponent, {
+        const StrikeComponent = components.strike ?? ((props) => import_react6.default.createElement("del", {}, props.children));
+        return import_react6.default.createElement(StrikeComponent, {
           key,
           children: renderInlineNodes(node.children, components)
         });
       }
       case "code":
-        return import_react5.default.createElement(components.code, { key, text: node.text });
+        return import_react6.default.createElement(components.code, { key, text: node.text });
       case "link":
-        return import_react5.default.createElement(
+        return import_react6.default.createElement(
           components.link,
           {
             key,
@@ -930,18 +1248,18 @@ function renderInlineNodes(nodes, components) {
           }
         );
       case "image":
-        return import_react5.default.createElement(components.image, {
+        return import_react6.default.createElement(components.image, {
           key,
           src: node.src,
           alt: node.alt,
           title: node.title
         });
       case "br":
-        return import_react5.default.createElement(import_react5.default.Fragment, { key }, import_react5.default.createElement(components.br, {}));
+        return import_react6.default.createElement(import_react6.default.Fragment, { key }, import_react6.default.createElement(components.br, {}));
       default: {
         const component = components[node.kind];
         if (component) {
-          return import_react5.default.createElement(component, { key, ...node });
+          return import_react6.default.createElement(component, { key, ...node });
         }
         return null;
       }
@@ -949,18 +1267,18 @@ function renderInlineNodes(nodes, components) {
   });
 }
 var defaultInlineComponents = {
-  text: ({ text }) => import_react5.default.createElement(import_react5.default.Fragment, {}, text),
-  strong: ({ children }) => import_react5.default.createElement("strong", {}, children),
-  em: ({ children }) => import_react5.default.createElement("em", {}, children),
-  strike: ({ children }) => import_react5.default.createElement("del", {}, children),
-  code: ({ text }) => import_react5.default.createElement(
+  text: ({ text }) => import_react6.default.createElement(import_react6.default.Fragment, {}, text),
+  strong: ({ children }) => import_react6.default.createElement("strong", {}, children),
+  em: ({ children }) => import_react6.default.createElement("em", {}, children),
+  strike: ({ children }) => import_react6.default.createElement("del", {}, children),
+  code: ({ text }) => import_react6.default.createElement(
     "code",
     {
       className: "inline-code"
     },
     text
   ),
-  link: ({ href, title, children }) => import_react5.default.createElement(
+  link: ({ href, title, children }) => import_react6.default.createElement(
     "a",
     {
       href,
@@ -971,15 +1289,15 @@ var defaultInlineComponents = {
     },
     children
   ),
-  image: ({ src, alt, title }) => import_react5.default.createElement("img", {
+  image: ({ src, alt, title }) => import_react6.default.createElement("img", {
     src,
     alt,
     title,
     className: "markdown-image"
   }),
-  br: () => import_react5.default.createElement("br"),
+  br: () => import_react6.default.createElement("br"),
   // Custom extensible components
-  mention: ({ handle }) => import_react5.default.createElement(
+  mention: ({ handle }) => import_react6.default.createElement(
     "span",
     {
       className: "mention",
@@ -987,7 +1305,7 @@ var defaultInlineComponents = {
     },
     `@${handle}`
   ),
-  citation: ({ id }) => import_react5.default.createElement(
+  citation: ({ id }) => import_react6.default.createElement(
     "span",
     {
       className: "citation",
@@ -995,7 +1313,7 @@ var defaultInlineComponents = {
     },
     `[${id}]`
   ),
-  "math-inline": ({ tex }) => import_react5.default.createElement(
+  "math-inline": ({ tex }) => import_react6.default.createElement(
     "span",
     {
       className: "math-inline",
@@ -1003,27 +1321,31 @@ var defaultInlineComponents = {
     },
     `$${tex}$`
   ),
-  "math-display": ({ tex }) => import_react5.default.createElement(
+  "math-display": ({ tex }) => import_react6.default.createElement(
     "div",
     {
       className: "math-display markdown-math-display",
       "data-tex": tex,
       style: { overflowX: "auto" }
     },
-    import_react5.default.createElement("span", { className: "math-display-content" }, `$$${tex}$$`)
+    import_react6.default.createElement("span", { className: "math-display-content" }, `$$${tex}$$`)
   ),
   // Footnote inline reference (superscript anchor)
   "footnote-ref": ({ label, number }) => {
     const n = number ?? "?";
     const href = number ? `#fn:${n}` : void 0;
     const id = number ? `fnref:${n}` : void 0;
-    return import_react5.default.createElement("sup", { className: "footnote-ref" }, import_react5.default.createElement("a", { href, id, "data-label": label }, String(n)));
+    return import_react6.default.createElement(
+      "sup",
+      { className: "footnote-ref" },
+      import_react6.default.createElement("a", { href, id, "data-label": label, style: { color: "var(--foreground)", textDecoration: "underline" } }, String(n))
+    );
   }
 };
 var defaultBlockComponents = {
   paragraph: ({ inlines, raw, meta, children }) => {
     if (children !== void 0) {
-      return import_react5.default.createElement(
+      return import_react6.default.createElement(
         "p",
         {
           className: "markdown-paragraph"
@@ -1037,7 +1359,7 @@ var defaultBlockComponents = {
       if (structured.length === 1) {
         return structured[0];
       }
-      return import_react5.default.createElement(import_react5.default.Fragment, {}, ...structured);
+      return import_react6.default.createElement(import_react6.default.Fragment, {}, ...structured);
     }
     const filteredInlines = inlines && raw && inlines.length > 0 ? inlines.filter((node) => !(node.kind === "text" && node.text === raw)) : inlines ?? [];
     const effectiveInlines = filteredInlines.length > 0 ? filteredInlines : raw ? [
@@ -1046,7 +1368,7 @@ var defaultBlockComponents = {
         text: raw
       }
     ] : [];
-    return import_react5.default.createElement(
+    return import_react6.default.createElement(
       "p",
       {
         className: "markdown-paragraph"
@@ -1054,15 +1376,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);
-    return import_react5.default.createElement(
+    const headingId = typeof meta?.headingId === "string" && meta.headingId.length > 0 ? meta.headingId : void 0;
+    return import_react6.default.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
     );
@@ -1070,7 +1394,7 @@ var defaultBlockComponents = {
   code: ({ html, meta, lines, lang, preAttrs, codeAttrs }) => {
     const language = typeof lang === "string" ? lang : typeof meta?.lang === "string" ? String(meta.lang) : "text";
     if (html) {
-      return import_react5.default.createElement("div", {
+      return import_react6.default.createElement("div", {
         className: `markdown-code-block language-${language || "text"}`,
         /* biome-ignore lint/security/noDangerouslySetInnerHtml: highlighted HTML is generated by our sanitizer */
         dangerouslySetInnerHTML: { __html: html }
@@ -1080,20 +1404,20 @@ var defaultBlockComponents = {
     if (lines && lines.length > 0) {
       const preAttributes = attrsToProps(preAttrs);
       const codeAttributes = attrsToProps(codeAttrs);
-      return import_react5.default.createElement(
+      return import_react6.default.createElement(
         "pre",
         {
           ...preAttributes,
           className: preAttributes.className ? `${preAttributes.className} markdown-code-block language-${language || "text"}` : `markdown-code-block language-${language || "text"}`
         },
-        import_react5.default.createElement(
+        import_react6.default.createElement(
           "code",
           {
             ...codeAttributes,
             className: codeAttributes.className ? `${codeAttributes.className} language-${language || "text"}` : `language-${language || "text"}`
           },
           lines.map(
-            (line) => import_react5.default.createElement("span", {
+            (line) => import_react6.default.createElement("span", {
               key: line.id,
               className: "line",
               /* biome-ignore lint/security/noDangerouslySetInnerHtml: line HTML is sanitized server-side */
@@ -1103,19 +1427,19 @@ var defaultBlockComponents = {
         )
       );
     }
-    return import_react5.default.createElement("pre", {
+    return import_react6.default.createElement("pre", {
       className: `markdown-code-block language-${language || "text"}`,
       children: code
     });
   },
-  blockquote: ({ inlines, renderedContent }) => import_react5.default.createElement(
+  blockquote: ({ inlines, renderedContent }) => import_react6.default.createElement(
     "blockquote",
     {
       className: "markdown-blockquote"
     },
     renderedContent ?? renderInlineNodes(inlines, defaultInlineComponents)
   ),
-  hr: (props) => import_react5.default.createElement("hr", props),
+  hr: (props) => import_react6.default.createElement("hr", props),
   list: ({ ordered, items }) => {
     if (items.length === 0) {
       return null;
@@ -1125,7 +1449,7 @@ var defaultBlockComponents = {
       ["--list-indent"]: `calc(2.5rem + ${String(items.length).length}ch)`
     } : void 0;
     const listItems = items.map(
-      (item, index) => import_react5.default.createElement(
+      (item, index) => import_react6.default.createElement(
         "li",
         {
           key: index,
@@ -1136,7 +1460,7 @@ var defaultBlockComponents = {
         renderInlineNodes(item, defaultInlineComponents)
       )
     );
-    return import_react5.default.createElement(
+    return import_react6.default.createElement(
       tag,
       {
         className: `markdown-list ${ordered ? "ordered" : "unordered"}`,
@@ -1147,26 +1471,26 @@ var defaultBlockComponents = {
   },
   html: ({ __trustedHtml, elements }) => {
     const raw = typeof __trustedHtml === "string" ? __trustedHtml : __trustedHtml.toString();
-    const htmlString = (0, import_core.sanitizeHTML)(raw);
+    const htmlString = typeof window === "undefined" ? raw : (0, import_core.sanitizeHTML)(raw);
     if (typeof window !== "undefined" && elements) {
       const content = mapHtmlToReact(htmlString, elements);
-      return import_react5.default.createElement("div", { className: "markdown-html" }, content);
+      return import_react6.default.createElement("div", { className: "markdown-html" }, content);
     }
-    return import_react5.default.createElement("div", {
+    return import_react6.default.createElement("div", {
       className: "markdown-html",
       /* biome-ignore lint/security/noDangerouslySetInnerHtml: htmlString is sanitized before injection */
       dangerouslySetInnerHTML: { __html: htmlString }
     });
   },
-  mdx: ({ compiledRef, compiledModule, status, errorMessage, raw }) => {
-    const [Comp, setComp] = import_react5.default.useState(null);
-    const [internalError, setInternalError] = import_react5.default.useState(null);
-    const [renderError, setRenderError] = import_react5.default.useState(null);
-    const [retryKey, setRetryKey] = import_react5.default.useState(0);
-    const hydrationContext = import_react5.default.useContext(MdxHydrationContext);
+  mdx: ({ compiledRef, compiledModule, status, errorMessage }) => {
+    const [Comp, setComp] = import_react6.default.useState(null);
+    const [internalError, setInternalError] = import_react6.default.useState(null);
+    const [renderError, setRenderError] = import_react6.default.useState(null);
+    const [retryKey, setRetryKey] = import_react6.default.useState(0);
+    const hydrationContext = import_react6.default.useContext(MdxHydrationContext);
     const hydrationController = hydrationContext?.controller ?? null;
     const hydrationOptions = hydrationContext?.options;
-    const containerRef = import_react5.default.useRef(null);
+    const containerRef = import_react6.default.useRef(null);
     const deferHydration = hydrationOptions?.strategy === "visible";
     const shouldHydrate = useDeferredRender(
       containerRef,
@@ -1178,13 +1502,13 @@ var defaultBlockComponents = {
       } : { enabled: false }
     );
     const resolvedId = compiledModule?.id ?? (compiledRef?.id && compiledRef.id !== "pending" ? compiledRef.id : void 0);
-    const handleRetry = import_react5.default.useCallback(() => {
+    const handleRetry = import_react6.default.useCallback(() => {
       setInternalError(null);
       setRenderError(null);
       setComp(null);
       setRetryKey((prev) => prev + 1);
     }, []);
-    const handleRuntimeError = import_react5.default.useCallback(
+    const handleRuntimeError = import_react6.default.useCallback(
       (error) => {
         const message2 = error instanceof Error ? error.message : String(error);
         setRenderError(message2);
@@ -1195,7 +1519,7 @@ var defaultBlockComponents = {
     const effectiveStatus = status ? status : resolvedId ? "compiled" : "pending";
     const failureMessage = errorMessage ?? internalError ?? renderError ?? null;
     const moduleDependencies = compiledModule?.dependencies;
-    import_react5.default.useEffect(() => {
+    import_react6.default.useEffect(() => {
       if (!shouldHydrate) {
         return;
       }
@@ -1259,9 +1583,8 @@ 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 ? import_react5.default.createElement("pre", { className: "markdown-mdx-fallback" }, raw) : null;
     const allowRetry = Boolean(internalError || renderError);
-    const retryButton = allowRetry ? import_react5.default.createElement(
+    const retryButton = allowRetry ? import_react6.default.createElement(
       "button",
       {
         type: "button",
@@ -1270,13 +1593,14 @@ var defaultBlockComponents = {
       },
       "Retry hydration"
     ) : null;
-    const errorPanel = import_react5.default.createElement(
-      "div",
-      { className: "markdown-mdx-error" },
-      import_react5.default.createElement(import_react5.default.Fragment, null, import_react5.default.createElement("strong", null, "MDX failed"), import_react5.default.createElement("div", null, message))
+    const errorPanel = import_react6.default.createElement(
+      import_react6.default.Fragment,
+      null,
+      import_react6.default.createElement("strong", null, "MDX failed"),
+      import_react6.default.createElement("div", null, message)
     );
     if (Comp && !failureMessage) {
-      return import_react5.default.createElement(
+      return import_react6.default.createElement(
         "div",
         {
           className: "markdown-mdx",
@@ -1285,30 +1609,29 @@ var defaultBlockComponents = {
           "data-mdx-status": failureMessage ? "error" : "compiled",
           "data-mdx-mode": compileMode
         },
-        import_react5.default.createElement(
+        import_react6.default.createElement(
           MdxRuntimeBoundary,
           { resetKey: retryKey, onError: handleRuntimeError },
-          import_react5.default.createElement(Comp, {})
+          import_react6.default.createElement(Comp, {})
         )
       );
     }
     if (failureMessage) {
-      return import_react5.default.createElement(
+      return import_react6.default.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
       );
     }
     if (!Comp) {
-      return import_react5.default.createElement(
+      return import_react6.default.createElement(
         "div",
         {
           className: "markdown-mdx",
@@ -1323,28 +1646,37 @@ var defaultBlockComponents = {
   },
   // Footnotes block rendered at page end
   footnotes: ({ items }) => {
-    if (!items || items.length === 0) return import_react5.default.createElement(import_react5.default.Fragment, null);
+    if (!items || items.length === 0) return import_react6.default.createElement(import_react6.default.Fragment, null);
     const listItems = items.map(
-      (item) => import_react5.default.createElement(
+      (item) => import_react6.default.createElement(
         "li",
         { key: item.number, id: `fn:${item.number}` },
         renderInlineNodes(item.inlines, defaultInlineComponents),
         " ",
-        import_react5.default.createElement("a", { href: `#fnref:${item.number}`, className: "footnote-backref", "aria-label": "Back to content" }, "\u21A9")
+        import_react6.default.createElement(
+          "a",
+          {
+            href: `#fnref:${item.number}`,
+            className: "footnote-backref",
+            "aria-label": "Back to content",
+            style: { color: "var(--foreground)", textDecoration: "underline" }
+          },
+          "\u21A9"
+        )
       )
     );
-    return import_react5.default.createElement("section", { className: "footnotes" }, import_react5.default.createElement("hr", {}), import_react5.default.createElement("ol", {}, listItems));
+    return import_react6.default.createElement("section", { className: "footnotes" }, import_react6.default.createElement("hr", {}), import_react6.default.createElement("ol", {}, listItems));
   },
   // Footnote definition placeholders (render nothing)
-  "footnote-def": () => import_react5.default.createElement(import_react5.default.Fragment, null),
+  "footnote-def": () => import_react6.default.createElement(import_react6.default.Fragment, null),
   // Callouts block
   callout: ({ kind, inlines = [] }) => {
     const tone = (kind || "NOTE").toUpperCase();
     const title = tone.charAt(0) + tone.slice(1).toLowerCase();
-    return import_react5.default.createElement(
+    return import_react6.default.createElement(
       "div",
       { className: `markdown-callout markdown-callout-${tone.toLowerCase()} border rounded p-3 my-3` },
-      import_react5.default.createElement("div", { className: "font-semibold mb-1" }, title),
+      import_react6.default.createElement("div", { className: "font-semibold mb-1" }, title),
       inlines.length > 0 ? renderInlineNodes(inlines, defaultInlineComponents) : null
     );
   },
@@ -1359,7 +1691,7 @@ var defaultBlockComponents = {
     const renderCells = (cells, tag, rowIdx) => cells.map((cell, i) => {
       const columnAlign = align?.[i] ?? void 0;
       const cellStyle = columnAlign ? { textAlign: columnAlign } : void 0;
-      return import_react5.default.createElement(
+      return import_react6.default.createElement(
         tag === "th" ? El.Th : El.Td,
         {
           key: `${rowIdx}-${i}`,
@@ -1370,14 +1702,14 @@ var defaultBlockComponents = {
         renderInlineNodes(cell, defaultInlineComponents)
       );
     });
-    return import_react5.default.createElement(
+    return import_react6.default.createElement(
       El.Table,
       { className: "markdown-table" },
-      header && header.length > 0 ? import_react5.default.createElement(El.Thead, {}, import_react5.default.createElement(El.Tr, {}, renderCells(header, "th", -1))) : null,
-      import_react5.default.createElement(
+      header && header.length > 0 ? import_react6.default.createElement(El.Thead, {}, import_react6.default.createElement(El.Tr, {}, renderCells(header, "th", -1))) : null,
+      import_react6.default.createElement(
         El.Tbody,
         {},
-        rows.map((row, r) => import_react5.default.createElement(El.Tr, { key: r }, renderCells(row, "td", r)))
+        rows.map((row, r) => import_react6.default.createElement(El.Tr, { key: r }, renderCells(row, "td", r)))
       )
     );
   }
@@ -1446,7 +1778,7 @@ var ComponentRegistry = class {
   renderBlock(block) {
     const Component = this.getBlockComponent(block.type);
     const props = this.getBlockProps(block);
-    return import_react5.default.createElement(Component, {
+    return import_react6.default.createElement(Component, {
       key: block.id,
       ...props
     });
@@ -1505,7 +1837,9 @@ var ComponentRegistry = class {
       case "html": {
         const trusted = block.payload.sanitizedHtml ?? block.payload.raw;
         return {
-          __trustedHtml: (0, import_core.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 ?? "") : (0, import_core.createTrustedHTML)(String(trusted ?? "")),
           elements: this.htmlElements
         };
       }
@@ -1573,42 +1907,42 @@ var ComponentRegistry = class {
 function getDefaultHtmlElements() {
   return {
     // Text semantics
-    p: (props) => import_react5.default.createElement("p", props),
-    strong: (props) => import_react5.default.createElement("strong", props),
-    em: (props) => import_react5.default.createElement("em", props),
-    code: (props) => import_react5.default.createElement("code", props),
-    pre: (props) => import_react5.default.createElement("pre", props),
-    span: (props) => import_react5.default.createElement("span", props),
-    br: (props) => import_react5.default.createElement("br", props),
-    hr: (props) => import_react5.default.createElement("hr", props),
+    p: (props) => import_react6.default.createElement("p", props),
+    strong: (props) => import_react6.default.createElement("strong", props),
+    em: (props) => import_react6.default.createElement("em", props),
+    code: (props) => import_react6.default.createElement("code", props),
+    pre: (props) => import_react6.default.createElement("pre", props),
+    span: (props) => import_react6.default.createElement("span", props),
+    br: (props) => import_react6.default.createElement("br", props),
+    hr: (props) => import_react6.default.createElement("hr", props),
     // Lists
-    ul: (props) => import_react5.default.createElement("ul", props),
-    ol: (props) => import_react5.default.createElement("ol", props),
-    li: (props) => import_react5.default.createElement("li", props),
+    ul: (props) => import_react6.default.createElement("ul", props),
+    ol: (props) => import_react6.default.createElement("ol", props),
+    li: (props) => import_react6.default.createElement("li", props),
     // Links & media
-    a: (props) => import_react5.default.createElement("a", props),
-    img: (props) => import_react5.default.createElement("img", props),
+    a: (props) => import_react6.default.createElement("a", props),
+    img: (props) => import_react6.default.createElement("img", props),
     // Blockquotes
-    blockquote: (props) => import_react5.default.createElement("blockquote", props),
+    blockquote: (props) => import_react6.default.createElement("blockquote", props),
     // Tables
-    table: (props) => import_react5.default.createElement("table", props),
-    thead: (props) => import_react5.default.createElement("thead", props),
-    tbody: (props) => import_react5.default.createElement("tbody", props),
-    tr: (props) => import_react5.default.createElement("tr", props),
-    th: (props) => import_react5.default.createElement("th", props),
-    td: (props) => import_react5.default.createElement("td", props),
+    table: (props) => import_react6.default.createElement("table", props),
+    thead: (props) => import_react6.default.createElement("thead", props),
+    tbody: (props) => import_react6.default.createElement("tbody", props),
+    tr: (props) => import_react6.default.createElement("tr", props),
+    th: (props) => import_react6.default.createElement("th", props),
+    td: (props) => import_react6.default.createElement("td", props),
     // Generic
-    div: (props) => import_react5.default.createElement("div", props)
+    div: (props) => import_react6.default.createElement("div", props)
   };
 }
 function getDefaultTableElements(overrides) {
   const base = {
-    Table: (props) => import_react5.default.createElement("table", props),
-    Thead: (props) => import_react5.default.createElement("thead", props),
-    Tbody: (props) => import_react5.default.createElement("tbody", props),
-    Tr: (props) => import_react5.default.createElement("tr", props),
-    Th: (props) => import_react5.default.createElement("th", props),
-    Td: (props) => import_react5.default.createElement("td", props)
+    Table: (props) => import_react6.default.createElement("table", props),
+    Thead: (props) => import_react6.default.createElement("thead", props),
+    Tbody: (props) => import_react6.default.createElement("tbody", props),
+    Tr: (props) => import_react6.default.createElement("tr", props),
+    Th: (props) => import_react6.default.createElement("th", props),
+    Td: (props) => import_react6.default.createElement("td", props)
   };
   return { ...base, ...overrides || {} };
 }
@@ -1622,12 +1956,12 @@ function mapHtmlToReact(html, elements) {
       children.push(element);
     }
   });
-  return import_react5.default.createElement(import_react5.default.Fragment, {}, ...children);
+  return import_react6.default.createElement(import_react6.default.Fragment, {}, ...children);
 }
 function toReact(node, elements, key) {
   if (node.nodeType === Node.TEXT_NODE) {
     const text = node.textContent ?? "";
-    return import_react5.default.createElement(import_react5.default.Fragment, { key }, text);
+    return import_react6.default.createElement(import_react6.default.Fragment, { key }, text);
   }
   if (node.nodeType !== Node.ELEMENT_NODE) {
     return null;
@@ -1649,9 +1983,9 @@ function toReact(node, elements, key) {
   const component = elements[tag];
   const elementChildren = children.length > 0 ? children : void 0;
   if (component) {
-    return import_react5.default.createElement(component, { ...props, key }, elementChildren);
+    return import_react6.default.createElement(component, { ...props, key }, elementChildren);
   }
-  return import_react5.default.createElement(tag, { ...props, key }, elementChildren);
+  return import_react6.default.createElement(tag, { ...props, key }, elementChildren);
 }
 function attrsToProps(attrs) {
   if (!attrs) return {};
@@ -1696,12 +2030,12 @@ function renderParagraphMixedSegments(segments, inlineComponents, inlineHtmlRend
     nodes.forEach((node, idx) => {
       if (node === null || node === void 0) return;
       const key = `${baseKey}-${idx}`;
-      if (import_react5.default.isValidElement(node)) {
-        target.push(node.key === key ? node : import_react5.default.cloneElement(node, { key }));
+      if (import_react6.default.isValidElement(node)) {
+        target.push(node.key === key ? node : import_react6.default.cloneElement(node, { key }));
       } else if (typeof node === "string" || typeof node === "number") {
-        target.push(import_react5.default.createElement(import_react5.default.Fragment, { key }, node));
+        target.push(import_react6.default.createElement(import_react6.default.Fragment, { key }, node));
       } else {
-        target.push(import_react5.default.createElement(import_react5.default.Fragment, { key }, node));
+        target.push(import_react6.default.createElement(import_react6.default.Fragment, { key }, node));
       }
     });
   };
@@ -1717,7 +2051,7 @@ function renderParagraphMixedSegments(segments, inlineComponents, inlineHtmlRend
     }
     const key = `paragraph-inline-group-${inlineGroupIndex++}`;
     result.push(
-      import_react5.default.createElement(
+      import_react6.default.createElement(
         "p",
         {
           key,
@@ -1735,7 +2069,7 @@ function renderParagraphMixedSegments(segments, inlineComponents, inlineHtmlRend
         const inlineNodes = Array.isArray(segment.inline) ? segment.inline : [];
         if (inlineNodes.length === 0) {
           if (segment.value) {
-            inlineBuffer.push(import_react5.default.createElement(import_react5.default.Fragment, { key }, segment.value));
+            inlineBuffer.push(import_react6.default.createElement(import_react6.default.Fragment, { key }, segment.value));
           }
           break;
         }
@@ -1763,14 +2097,14 @@ function renderParagraphMixedSegments(segments, inlineComponents, inlineHtmlRend
         const status = segment.status ?? "pending";
         let element;
         if (status === "compiled") {
-          element = import_react5.default.createElement("span", { className: "markdown-mdx-inline", "data-mdx-status": "compiled" });
+          element = import_react6.default.createElement("span", { className: "markdown-mdx-inline", "data-mdx-status": "compiled" });
         } else if (status === "error") {
           const message = segment.value || "MDX error";
-          element = import_react5.default.createElement("span", { className: "markdown-mdx-inline text-destructive", "data-mdx-status": "error" }, message);
+          element = import_react6.default.createElement("span", { className: "markdown-mdx-inline text-destructive", "data-mdx-status": "error" }, message);
         } else {
-          element = import_react5.default.createElement("span", { className: "markdown-mdx-inline", "data-mdx-status": status }, segment.value);
+          element = import_react6.default.createElement("span", { className: "markdown-mdx-inline", "data-mdx-status": status }, segment.value);
         }
-        inlineBuffer.push(import_react5.default.createElement(import_react5.default.Fragment, { key }, element));
+        inlineBuffer.push(import_react6.default.createElement(import_react6.default.Fragment, { key }, element));
         break;
       }
       case "html": {
@@ -1786,7 +2120,7 @@ function renderParagraphMixedSegments(segments, inlineComponents, inlineHtmlRend
             result.push(element);
           } else if (html) {
             result.push(
-              import_react5.default.createElement("div", {
+              import_react6.default.createElement("div", {
                 key,
                 className: "markdown-inline-html-block",
                 dangerouslySetInnerHTML: { __html: html }
@@ -1805,7 +2139,7 @@ function renderParagraphMixedSegments(segments, inlineComponents, inlineHtmlRend
   flushInline();
   if (result.length === 0) {
     return [
-      import_react5.default.createElement(
+      import_react6.default.createElement(
         "p",
         {
           key: "paragraph-inline-group-0",
@@ -1864,6 +2198,7 @@ var BLOCK_LEVEL_TAGS = /* @__PURE__ */ new Set([
 ]);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BottomStickScrollArea,
   ComponentRegistry,
   DefaultLinkSafetyModal,
   defaultBlockComponents,