@stream-mdx/react 0.4.0 → 1.0.0

package/dist/utils/inline-html.mjs

@@ -2,86 +2,169 @@
 
 // src/utils/inline-html.ts
 import React from "react";
-var BACKTICK_CONTENT = /^`([\s\S]+)`$/;
-var DEFAULT_INLINE_HTML_RENDERERS = {
+import { defaultUrlTransform, isForbiddenAttribute, isSafeStyleDeclaration } from "@stream-mdx/core";
+function renderHtmlInlineNode(node, children, elements, key, textValue, urlTransform, filterElement, parentTagName, renderPresentation, renderNativeElement) {
+  if (node.isClose || node.tagName === "script" || node.tagName === "style") return null;
+  if (!node.tagName || node.sanitized === "")
+    return React.createElement(React.Fragment, { key }, children);
+  let tag = node.tagName.toLowerCase(), props = mapAttributesToProps(node.attributes ?? {}, urlTransform);
+  props.key = key;
+  let renderElement = () => {
+    let nativeView;
+    return renderNativeElement ? nativeView = renderNativeElement(
+      tag,
+      props,
+      node.isSelfClosing ? void 0 : children,
+      key ?? tag
+    ) : tag === "textarea" ? (props.defaultValue = textValue ?? "", nativeView = React.createElement(elements?.[tag] ?? tag, props)) : nativeView = React.createElement(elements?.[tag] ?? tag, props, node.isSelfClosing ? void 0 : children), renderPresentation ? renderPresentation(tag, props, nativeView, children, key ?? tag) : nativeView;
+  };
+  return filterElement ? filterElement(
+    { tagName: tag, properties: props },
+    { source: "html", parentTagName },
+    renderElement,
+    () => children
+  ) : renderElement();
+}
+function renderHtmlOwnershipTree(nodes, elements, renderBlock, renderInline, renderInlineElement, renderParagraph, urlTransform, filterElement, parentTagName, contentComponents, renderPresentation, parentPath = "html", renderComponentPresentation) {
+  return nodes.map((node, index) => {
+    let nodeKey = `${parentPath}:${index}`;
+    if (node.kind === "text") return node.inline && renderInline ? renderInline(node.inline, parentTagName) : node.rawSource ?? node.text;
+    if (node.kind === "block") return renderBlock(node.block, parentTagName);
+    if (node.kind === "component") {
+      let reg = contentComponents?.[node.name];
+      if (!reg)
+        return React.createElement(React.Fragment, { key: nodeKey }, node.rawSource ?? `<${node.name} />`);
+      let result = reg.render({
+        props: node.props,
+        key: index,
+        hasChildren: node.children.length > 0,
+        renderChildren: () => renderHtmlOwnershipTree(
+          node.children,
+          elements,
+          renderBlock,
+          renderInline,
+          renderInlineElement,
+          renderParagraph,
+          urlTransform,
+          filterElement,
+          node.name,
+          contentComponents,
+          renderPresentation,
+          nodeKey,
+          renderComponentPresentation
+        ),
+        status: node.status,
+        diagnostic: node.diagnostic
+      });
+      return result.kind === "invalid" ? React.createElement(React.Fragment, { key: nodeKey }, node.rawSource ?? `<${node.name} />`) : result.kind === "suppressed" ? null : renderComponentPresentation ? renderComponentPresentation(
+        node.name,
+        result.element,
+        React.isValidElement(result.element) ? result.element.props.children : void 0,
+        nodeKey,
+        node.status,
+        node.rawSource
+      ) : result.element;
+    }
+    let tag = node.tagName.toLowerCase(), props = mapAttributesToProps(node.attributes, urlTransform);
+    props.key = nodeKey;
+    let children = renderHtmlOwnershipTree(node.children, elements, renderBlock, renderInline, renderInlineElement, renderParagraph, urlTransform, filterElement, tag, contentComponents, renderPresentation, nodeKey, renderComponentPresentation);
+    if (node.paragraphRoot && renderParagraph) {
+      let paragraph = filterElement ? filterElement(
+        { tagName: "p", properties: props, blockType: "paragraph" },
+        { source: "markdown", parentTagName },
+        () => renderParagraph(children),
+        () => children
+      ) : renderParagraph(children);
+      return React.createElement(React.Fragment, { key: nodeKey }, paragraph);
+    }
+    if (node.inlineNode && renderInlineElement)
+      return React.createElement(React.Fragment, { key: nodeKey }, renderInlineElement(node.inlineNode, children, parentTagName, nodeKey));
+    let renderElement = () => {
+      let nativeView;
+      if (tag === "textarea")
+        props.defaultValue = node.children.map((child) => child.kind === "text" ? child.text : "").join(""), nativeView = React.createElement(elements[tag] ?? tag, props);
+      else {
+        let content = tag === "pre" && node.children.every((child) => child.kind === "text" && !child.inline) ? node.children.map((child) => child.kind === "text" ? child.text : "").join("") : children;
+        nativeView = React.createElement(elements[tag] ?? tag, props, node.children.length ? content : void 0);
+      }
+      return renderPresentation ? renderPresentation(tag, props, nativeView, children, nodeKey) : nativeView;
+    };
+    return filterElement ? filterElement(
+      { tagName: tag, properties: props },
+      { source: "html", parentTagName },
+      renderElement,
+      () => children
+    ) : renderElement();
+  });
+}
+var BACKTICK_CONTENT = /^`([\s\S]+)`$/, DEFAULT_INLINE_HTML_RENDERERS = {
   kbd: (descriptor, ctx) => {
-    const trimmed = descriptor.rawInner.trim();
-    const match = BACKTICK_CONTENT.exec(trimmed);
+    let trimmed = descriptor.rawInner.trim(), match = BACKTICK_CONTENT.exec(trimmed);
     if (match) {
-      const codeText = decodeHtmlEntities(match[1]);
-      const props = mapAttributesToProps(descriptor.attributes);
-      if (ctx.key !== void 0 && ctx.key !== null) {
-        props.key = ctx.key;
-      }
-      return React.createElement("kbd", props, React.createElement("code", { className: "inline-code" }, codeText));
+      let codeText = decodeHtmlEntities(match[1]), props = mapAttributesToProps(descriptor.attributes);
+      return ctx.key !== void 0 && ctx.key !== null && (props.key = ctx.key), React.createElement("kbd", props, React.createElement("code", { className: "inline-code" }, codeText));
     }
     return ctx.defaultRender();
   }
 };
 function renderInlineHtmlSegment(raw, sanitized, options = {}) {
-  const descriptor = parseInlineHtmlDescriptor(raw, sanitized);
-  if (!descriptor) {
+  let descriptor = parseInlineHtmlDescriptor(raw, sanitized);
+  if (!descriptor)
     return null;
-  }
-  const className = options.className ?? "markdown-inline-html";
-  const isInlineTag = INLINE_ELEMENTS.has(descriptor.tagName);
-  const defaultRender = () => {
-    if (!descriptor.sanitized || descriptor.sanitized.length === 0) {
-      if (!descriptor.text) {
-        return null;
-      }
-      if (options.key !== void 0 && options.key !== null) {
-        return React.createElement(React.Fragment, { key: options.key }, descriptor.text);
-      }
-      return React.createElement(React.Fragment, {}, descriptor.text);
-    }
+  let className = options.className ?? "markdown-inline-html", hasCustomElement = !!options.htmlElements?.[descriptor.tagName], isInlineTag = INLINE_ELEMENTS.has(descriptor.tagName) || hasCustomElement, defaultRender = () => {
+    if (!descriptor.sanitized || descriptor.sanitized.length === 0)
+      return descriptor.text ? options.key !== void 0 && options.key !== null ? React.createElement(React.Fragment, { key: options.key }, descriptor.text) : React.createElement(React.Fragment, {}, descriptor.text) : null;
     if (isInlineTag) {
-      const parsedElement = renderSanitizedHtmlTree(descriptor.sanitized, options.key);
-      if (parsedElement) {
+      let parsedElement = renderSanitizedHtmlTree(
+        descriptor.sanitized,
+        options.key,
+        options.htmlElements,
+        options.literalTagContent,
+        options.parseMarkdown
+      );
+      if (parsedElement)
         return parsedElement;
-      }
     }
-    const props = {
+    let customElementComp = options.htmlElements?.[descriptor.tagName];
+    if (customElementComp) {
+      let props2 = mapAttributesToProps(descriptor.attributes, options.urlTransform);
+      return options.key !== void 0 && options.key !== null && (props2.key = options.key), React.createElement(customElementComp, props2, descriptor.text || descriptor.sanitizedInner || void 0);
+    }
+    let props = {
       className,
       dangerouslySetInnerHTML: { __html: descriptor.sanitized }
     };
-    if (options.key !== void 0 && options.key !== null) {
-      props.key = options.key;
-    }
-    return React.createElement("span", props);
+    return options.key !== void 0 && options.key !== null && (props.key = options.key), React.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 && React.isValidElement(rendered) && rendered.key === null) {
-        return React.cloneElement(rendered, { key: options.key });
-      }
-      return rendered;
+  if (!hasCustomElement) {
+    let renderer = (options.renderers ? { ...DEFAULT_INLINE_HTML_RENDERERS, ...options.renderers } : DEFAULT_INLINE_HTML_RENDERERS)[descriptor.tagName];
+    if (renderer) {
+      let rendered = renderer(descriptor, { key: options.key, defaultRender });
+      if (rendered)
+        return options.key !== void 0 && options.key !== null && React.isValidElement(rendered) && rendered.key === null ? React.cloneElement(rendered, { key: options.key }) : rendered;
     }
   }
   return defaultRender();
 }
 function parseInlineHtmlDescriptor(raw, sanitized) {
-  const normalizedRaw = typeof raw === "string" ? raw.trim() : "";
-  const normalizedSanitized = typeof sanitized === "string" && sanitized.length > 0 ? sanitized.trim() : normalizedRaw;
-  if (!normalizedSanitized) {
-    return null;
-  }
-  const match = normalizedSanitized.match(/^<([A-Za-z][\w:-]*)(\s[^>]*)?>([\s\S]*)<\/\1>$/);
-  if (!match) {
+  let normalizedRaw = typeof raw == "string" ? raw.trim() : "", normalizedSanitized = typeof sanitized == "string" && sanitized.length > 0 ? sanitized.trim() : normalizedRaw;
+  if (!normalizedSanitized)
     return null;
+  let pairedMatch = normalizedSanitized.match(/^<([A-Za-z][\w:-]*)((?:\s+[^>]*)?)>([\s\S]*)<\/\1>$/), tagNameRaw, attrString = "", sanitizedInner = "";
+  if (pairedMatch)
+    tagNameRaw = pairedMatch[1], attrString = pairedMatch[2] ?? "", sanitizedInner = pairedMatch[3] ?? "";
+  else {
+    let selfClosingMatch = normalizedSanitized.match(/^<([A-Za-z][\w:-]*)((?:\s+[^>]*)?)\s*(?:\/?>|>)$/) || normalizedRaw.match(/^<([A-Za-z][\w:-]*)((?:\s+[^>]*)?)\s*(?:\/?>|>)$/);
+    if (!selfClosingMatch)
+      return null;
+    tagNameRaw = selfClosingMatch[1], attrString = selfClosingMatch[2] ?? "", sanitizedInner = "";
   }
-  const [, tagNameRaw, attrString = "", sanitizedInner = ""] = match;
-  const tagName = tagNameRaw.toLowerCase();
-  const attributes = parseAttributes(attrString);
-  let rawInner = "";
+  let tagName = tagNameRaw.toLowerCase(), attributes = parseAttributes(attrString), rawInner = "";
   if (normalizedRaw) {
-    const rawMatch = normalizedRaw.match(/^<([A-Za-z][\w:-]*)(\s[^>]*)?>([\s\S]*)<\/\1>$/);
+    let rawMatch = normalizedRaw.match(/^<([A-Za-z][\w:-]*)(\s[^>]*)?>([\s\S]*)<\/\1>$/);
     rawInner = rawMatch ? rawMatch[3] ?? "" : normalizedRaw;
   }
-  const text = extractPlainText(rawInner || sanitizedInner);
+  let text = extractPlainText(rawInner || sanitizedInner);
   return {
     tagName,
     attributes,
@@ -93,52 +176,91 @@ function parseInlineHtmlDescriptor(raw, sanitized) {
   };
 }
 function parseAttributes(input) {
-  const attrs = {};
+  let attrs = {};
   if (!input) return attrs;
-  const attrPattern = /([A-Za-z_:][\w:.\-]*)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g;
-  let match = attrPattern.exec(input);
-  while (match !== null) {
-    const name = match[1];
+  let attrPattern = /([A-Za-z_:][\w:.\-]*)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g, match = attrPattern.exec(input);
+  for (; match !== null; ) {
+    let name = match[1];
     if (!name) continue;
-    const value = match[2] ?? match[3] ?? match[4] ?? "";
-    attrs[name] = value;
-    match = attrPattern.exec(input);
+    let value = match[2] ?? match[3] ?? match[4] ?? "";
+    attrs[name] = value, match = attrPattern.exec(input);
   }
   return attrs;
 }
-function mapAttributesToProps(attrs) {
-  const props = {};
-  for (const [key, value] of Object.entries(attrs)) {
-    if (key === "class") {
-      props.className = value;
-    } else if (key === "style") {
-      props.style = parseStyleAttribute(value);
-    } else if (key === "tabindex" || key === "tabIndex") {
-      const normalized = normalizeTabIndex(value);
-      if (normalized !== void 0) {
-        props.tabIndex = normalized;
-      }
-    } else {
-      props[key] = value;
-    }
+var BOOLEAN_HTML_PROPS = {
+  allowFullScreen: !0,
+  async: !0,
+  autoFocus: !0,
+  autoPlay: !0,
+  checked: !0,
+  controls: !0,
+  default: !0,
+  defer: !0,
+  disabled: !0,
+  formNoValidate: !0,
+  hidden: !0,
+  inert: !0,
+  loop: !0,
+  multiple: !0,
+  muted: !0,
+  noModule: !0,
+  noValidate: !0,
+  open: !0,
+  playsInline: !0,
+  readOnly: !0,
+  required: !0,
+  reversed: !0,
+  selected: !0,
+  itemScope: !0
+};
+function mapAttributesToProps(attrs, urlTransform) {
+  let props = {}, transform = urlTransform ?? defaultUrlTransform;
+  for (let [key, value] of Object.entries(attrs)) {
+    let lower = key.toLowerCase();
+    if (!isForbiddenAttribute(lower))
+      if (key === "class")
+        props.className = value;
+      else if (key === "style")
+        props.style = parseStyleAttribute(value);
+      else if (key === "tabindex" || key === "tabIndex") {
+        let normalized = normalizeTabIndex(value);
+        normalized !== void 0 && (props.tabIndex = normalized);
+      } else if (lower === "href") {
+        let safe = transform(value, "href", { source: "html" });
+        safe != null && (props.href = safe);
+      } else if (lower === "src") {
+        let safe = transform(value, "src", { source: "html" });
+        safe != null && (props.src = safe);
+      } else if (lower === "action") {
+        let safe = transform(value, "href", { source: "html" });
+        safe != null && (props.action = safe);
+      } else if (lower === "formaction") {
+        let safe = transform(value, "href", { source: "html" });
+        safe != null && (props.formAction = safe);
+      } else if (lower === "xlink:href" || lower === "xlinkhref") {
+        let safe = transform(value, "href", { source: "html" });
+        safe != null && (props.xlinkHref = safe);
+      } else /^(?:data|aria)[A-Z]/.test(key) ? props[key.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)] = value : BOOLEAN_HTML_PROPS[key] ? props[key] = !0 : props[key] = value;
   }
   return props;
 }
 function parseStyleAttribute(value) {
-  const style = {};
+  let style = {};
   if (!value) return style;
-  const pairs = value.split(";");
-  for (const pair of pairs) {
+  let pairs = value.split(";");
+  for (let pair of pairs) {
     if (!pair.trim()) continue;
-    const [property, rawVal] = pair.split(":");
-    if (!property || rawVal === void 0) continue;
-    const camelProp = property.trim().replace(/-([a-z])/g, (_, char) => char.toUpperCase());
-    style[camelProp] = rawVal.trim();
+    let separator = pair.indexOf(":");
+    if (separator <= 0) continue;
+    let property = pair.slice(0, separator).trim(), rawVal = pair.slice(separator + 1).trim();
+    if (!isSafeStyleDeclaration(property, rawVal)) continue;
+    let camelProp = property.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+    style[camelProp] = rawVal;
   }
   return style;
 }
 function normalizeTabIndex(value) {
-  const numeric = Number(value);
+  let numeric = Number(value);
   return Number.isNaN(numeric) ? void 0 : numeric;
 }
 function decodeHtmlEntities(value) {
@@ -146,76 +268,50 @@ function decodeHtmlEntities(value) {
 }
 function extractPlainText(value) {
   if (!value) return "";
-  const withoutTags = value.replace(/<\/?[^>]+>/g, "");
+  let withoutTags = value.replace(/<\/?[^>]+>/g, "");
   return decodeHtmlEntities(withoutTags);
 }
-function renderSanitizedHtmlTree(html, key) {
-  if (typeof DOMParser === "undefined") {
+var DEFAULT_LITERAL_TAGS = /* @__PURE__ */ new Set(["code", "pre", "script", "style", "textarea"]);
+function renderSanitizedHtmlTree(html, key, htmlElements, literalTagContent, parseMarkdown) {
+  if (typeof DOMParser > "u")
     return null;
-  }
   try {
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(html, "text/html");
-    const body = doc.body;
-    const nodes = Array.from(body.childNodes);
-    if (nodes.length === 0) {
+    let body = new DOMParser().parseFromString(html, "text/html").body, nodes = Array.from(body.childNodes);
+    if (nodes.length === 0)
       return null;
-    }
-    const baseKey = typeof key === "string" || typeof key === "number" ? String(key) : "inline-html";
-    const children = nodes.map((node, index) => convertDomNode(node, `${baseKey}-${index}`)).filter((child) => child !== null && child !== void 0);
-    if (children.length === 0) {
+    let literalTags = literalTagContent ? /* @__PURE__ */ new Set([...DEFAULT_LITERAL_TAGS, ...literalTagContent.map((t) => t.toLowerCase())]) : DEFAULT_LITERAL_TAGS, baseKey = typeof key == "string" || typeof key == "number" ? String(key) : "inline-html", children = nodes.map((node, index) => convertDomNode(node, `${baseKey}-${index}`, htmlElements, literalTags, !1, parseMarkdown)).filter((child) => child != null);
+    if (children.length === 0)
       return null;
-    }
     if (children.length === 1) {
-      const [child] = children;
-      if (React.isValidElement(child)) {
-        if (key !== void 0 && key !== null) {
-          return React.cloneElement(child, { key });
-        }
-        return child;
-      }
-      if (typeof child === "string" || typeof child === "number") {
-        if (key !== void 0 && key !== null) {
-          return React.createElement(React.Fragment, { key }, child);
-        }
-        return React.createElement(React.Fragment, {}, child);
-      }
-      return React.createElement(React.Fragment, { key }, child);
+      let [child] = children;
+      return React.isValidElement(child) ? key != null ? React.cloneElement(child, { key }) : child : typeof child == "string" || typeof child == "number" ? key != null ? React.createElement(React.Fragment, { key }, child) : React.createElement(React.Fragment, {}, child) : React.createElement(React.Fragment, { key }, child);
     }
     return React.createElement(React.Fragment, { key }, ...children);
   } catch {
     return null;
   }
 }
-function convertDomNode(node, key) {
+function convertDomNode(node, key, htmlElements, literalTags, parentIsLiteral, parseMarkdown) {
   if (node.nodeType === Node.TEXT_NODE) {
-    return node.textContent ?? "";
+    let rawText = node.textContent ?? "";
+    return parentIsLiteral || !parseMarkdown ? rawText : parseMarkdown(rawText);
   }
-  if (node.nodeType !== Node.ELEMENT_NODE) {
+  if (node.nodeType !== Node.ELEMENT_NODE)
     return null;
-  }
-  const element = node;
-  const tagName = element.tagName.toLowerCase();
-  const attrs = getElementAttributes(element);
-  const props = mapAttributesToProps(attrs);
+  let element = node, tagName = element.tagName.toLowerCase(), attrs = getElementAttributes(element), props = mapAttributesToProps(attrs);
   props.key = key;
-  const children = [];
+  let isLiteral = parentIsLiteral || (literalTags ? literalTags.has(tagName) : !1), children = [];
   element.childNodes.forEach((child, index) => {
-    const converted = convertDomNode(child, `${key}-${index}`);
-    if (converted !== null && converted !== void 0) {
-      children.push(converted);
-    }
+    let converted = convertDomNode(child, `${key}-${index}`, htmlElements, literalTags, isLiteral, parseMarkdown);
+    converted != null && children.push(converted);
   });
-  if (children.length === 0) {
-    return React.createElement(tagName, props);
-  }
-  return React.createElement(tagName, props, ...children);
+  let customComponent = htmlElements?.[tagName];
+  return customComponent ? children.length === 0 ? React.createElement(customComponent, props) : React.createElement(customComponent, props, ...children) : children.length === 0 ? React.createElement(tagName, props) : React.createElement(tagName, props, ...children);
 }
 function getElementAttributes(element) {
-  const attrs = {};
-  for (const attr of Array.from(element.attributes)) {
+  let attrs = {};
+  for (let attr of Array.from(element.attributes))
     attrs[attr.name] = attr.value;
-  }
   return attrs;
 }
 var INLINE_ELEMENTS = /* @__PURE__ */ new Set([
@@ -225,6 +321,11 @@ var INLINE_ELEMENTS = /* @__PURE__ */ new Set([
   "bdi",
   "bdo",
   "br",
+  "img",
+  "input",
+  "picture",
+  "del",
+  "ins",
   "cite",
   "code",
   "data",
@@ -270,5 +371,7 @@ var INLINE_ELEMENTS = /* @__PURE__ */ new Set([
 ]);
 export {
   DEFAULT_INLINE_HTML_RENDERERS,
+  renderHtmlInlineNode,
+  renderHtmlOwnershipTree,
   renderInlineHtmlSegment
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-mdx/react",
-  "version": "0.4.0",
+  "version": "1.0.0",
   "description": "React renderer, scheduler, and worker wiring for the Streaming Markdown V2 pipeline",
   "license": "MIT",
   "repository": {
@@ -31,10 +31,30 @@
       "import": "./dist/server.mjs",
       "require": "./dist/server.cjs"
     },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.mjs",
+      "require": "./dist/components/index.cjs"
+    },
+    "./components/bottom-stick-scroll-area": {
+      "types": "./dist/components/bottom-stick-scroll-area.d.ts",
+      "import": "./dist/components/bottom-stick-scroll-area.mjs",
+      "require": "./dist/components/bottom-stick-scroll-area.cjs"
+    },
+    "./components/diff-renderer": {
+      "types": "./dist/components/diff-renderer.d.ts",
+      "import": "./dist/components/diff-renderer.mjs",
+      "require": "./dist/components/diff-renderer.cjs"
+    },
+    "./components/katex-math": {
+      "types": "./dist/components/katex-math.d.ts",
+      "import": "./dist/components/katex-math.mjs",
+      "require": "./dist/components/katex-math.cjs"
+    },
     "./renderer": {
-      "types": "./dist/renderer/index.d.ts",
-      "import": "./dist/renderer/index.mjs",
-      "require": "./dist/renderer/index.cjs"
+      "types": "./dist/renderer.d.ts",
+      "import": "./dist/renderer.mjs",
+      "require": "./dist/renderer.cjs"
     },
     "./renderer/patch-commit-scheduler": {
       "types": "./dist/renderer/patch-commit-scheduler.d.ts",
@@ -56,16 +76,6 @@
       "import": "./dist/renderer/store.mjs",
       "require": "./dist/renderer/store.cjs"
     },
-    "./mdx-client": {
-      "types": "./dist/mdx-client.d.ts",
-      "import": "./dist/mdx-client.mjs",
-      "require": "./dist/mdx-client.cjs"
-    },
-    "./mdx-coordinator": {
-      "types": "./dist/mdx-coordinator.d.ts",
-      "import": "./dist/mdx-coordinator.mjs",
-      "require": "./dist/mdx-coordinator.cjs"
-    },
     "./math/display-wrapper": {
       "types": "./dist/math/display-wrapper.d.ts",
       "import": "./dist/math/display-wrapper.mjs",
@@ -75,29 +85,53 @@
       "types": "./dist/contexts/math-tracker.d.ts",
       "import": "./dist/contexts/math-tracker.mjs",
       "require": "./dist/contexts/math-tracker.cjs"
+    },
+    "./trusted-mdx/server": {
+      "types": "./dist/trusted-mdx/server.d.ts",
+      "import": "./dist/trusted-mdx/server.mjs",
+      "require": "./dist/trusted-mdx/server.cjs"
+    },
+    "./_internal/trusted-mdx-native-children": {
+      "types": "./dist/trusted-mdx/native-children-slot.d.ts",
+      "import": "./dist/trusted-mdx/native-children-slot.mjs",
+      "require": "./dist/trusted-mdx/native-children-slot.cjs"
+    },
+    "./trusted-mdx": {
+      "types": "./dist/trusted-mdx/index.d.ts",
+      "import": "./dist/trusted-mdx/index.mjs",
+      "require": "./dist/trusted-mdx/index.cjs"
     }
   },
   "files": [
     "dist",
+    "shadcn",
     "README.md",
     "CHANGELOG.md"
   ],
   "sideEffects": false,
   "scripts": {
-    "build": "tsup",
+    "build": "npm run clean && tsup",
     "test": "tsx ../../scripts/run-tests.ts __tests__",
     "clean": "rm -rf dist",
     "prepack": "npm run build"
   },
   "dependencies": {
-    "@stream-mdx/core": "0.4.0",
-    "@stream-mdx/worker": "0.4.0"
+    "@stream-mdx/core": "1.0.0",
+    "@stream-mdx/protocol": "1.0.0",
+    "@stream-mdx/worker": "1.0.0"
   },
   "devDependencies": {
-    "jsdom": "^26.0.0"
+    "jsdom": "^26.0.0",
+    "postcss": "^8.4.31"
   },
   "peerDependencies": {
+    "katex": "^0.16.0",
     "react": ">=18.2.0",
     "react-dom": ">=18.2.0"
+  },
+  "peerDependenciesMeta": {
+    "katex": {
+      "optional": true
+    }
   }
 }

package/shadcn/README.md

@@ -0,0 +1,28 @@
+# ShadCN Drop-in: Bottom Stick Scroll Area
+
+This folder contains a single-file `BottomStickScrollArea` component meant for copy/paste into app source trees (ShadCN style).
+
+## File
+
+- `bottom-stick-scroll-area.tsx`
+
+## Copy steps
+
+1. Copy `bottom-stick-scroll-area.tsx` into your app, for example:
+   - `components/ui/bottom-stick-scroll-area.tsx`
+2. Keep/adjust these imports to match your app:
+   - `@/components/ui/button`
+   - `@/components/ui/scroll-area`
+   - `@/lib/utils`
+3. Ensure dependencies are installed:
+   - `@radix-ui/react-scroll-area`
+   - `lucide-react`
+
+## Behavior
+
+- Sticks instantly to bottom while content streams (`STICKY_INSTANT`).
+- Detaches when user scrolls upward (`DETACHED`).
+- "Scroll to bottom" button appears with a short fade and performs smooth return (`RETURNING_SMOOTH`).
+- Supports canceling return if the user scrolls during animation.
+
+For package-first usage (no copy/paste), use `BottomStickScrollArea` from `@stream-mdx/react`.