markstream-react 0.0.56-beta.3 → 0.1.0-beta.2

package/README.md

@@ -4,6 +4,14 @@ React/Next.js streaming Markdown renderer for AI chat, SSE/WebSocket output, lon
 
 `markstream-react` is the React renderer in the Markstream family. It renders raw Markdown strings with `content`, and it can also accept pre-parsed `nodes` when a worker or store already owns parsing.
 
+The coordinated 2.0 family beta will use `markstream-react@next`. Before installing, verify that `npm view markstream-react@next version` reports `0.1.0-beta.1`. It removes the Monaco and Shiki code-block APIs in favor of `stream-diffs`; read the [coordinated 2.0 family migration guide](https://markstream.simonhe.me/guide/migration-2-0) before upgrading.
+
+```bash
+pnpm add markstream-react@next stream-diffs
+```
+
+This beta requires both `react` and `react-dom` 18 or newer.
+
 ## Install
 
 ```bash
@@ -127,9 +135,7 @@ export default function Page() {
 
 | Feature | Package |
 | --- | --- |
-| Shiki code blocks | `stream-markdown` |
 | Enhanced code blocks (recommended) | `stream-diffs` |
-| Monaco editor code blocks | `stream-monaco` (fallback) |
 | Mermaid diagrams | `mermaid` |
 | KaTeX math | `katex` |
 | D2 diagrams | `@terrastruct/d2` |
@@ -143,20 +149,18 @@ import 'katex/dist/katex.min.css'
 
 ## Enhanced Code Blocks
 
-Code blocks use a dual-runtime loader across all Markstream packages: `stream-diffs` is preferred (smaller, no `monaco-editor`), `stream-monaco` is the automatic fallback, and a plain `<pre>` is rendered when neither is installed.
+`stream-diffs` powers enhanced code blocks across all Markstream packages (smaller runtime, no `monaco-editor`); a plain `<pre>` is rendered when it is not installed.
 
-Install the recommended runtime:
+Install the runtime:
 
 ```bash
 pnpm add stream-diffs
-# or, to keep the legacy Monaco surface as the fallback:
-pnpm add stream-monaco
 ```
 
 `CodeBlockNode` renders a single code block with the header, toolbar, and a `stream-diffs` File / FileDiff surface. Use it directly for one-off blocks, or let `MarkdownRender` resolve it automatically for code blocks in your Markdown:
 
 ```tsx
-import type { CodeBlockMonacoOptions } from 'markstream-react'
+import type { CodeBlockOptions } from 'markstream-react'
 import { CodeBlockNode } from 'markstream-react'
 
 const node = {
@@ -166,25 +170,18 @@ const node = {
   raw: 'const answer = 42',
 }
 
-// fontSize / lineHeight / tabSize also drive the streaming <pre> fallback so
-// the enhanced surface swaps in without a visual jump.
-const monacoOptions: CodeBlockMonacoOptions = {
-  fontSize: 14,
-  lineHeight: 21,
-  tabSize: 4,
-  fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
-  wordWrap: 'off',
-  theme: 'vitesse-dark',
-  renderSideBySide: true,
-  MAX_HEIGHT: 640,
+const codeBlockOptions: CodeBlockOptions = {
+  overflow: 'wrap',
+  diffStyle: 'unified',
+  enableLineSelection: true,
 }
 
 export function CodeBlock() {
-  return <CodeBlockNode node={node} monacoOptions={monacoOptions} isDark />
+  return <CodeBlockNode node={node} codeBlockOptions={codeBlockOptions} isDark showHeader />
 }
 ```
 
-Component-level options: `isDark` / `darkTheme` / `lightTheme` for theming, `showLineNumbers`, `showHeader`, and `stream` / `loading` for streaming states. `monacoOptions` also covers diff blocks (`renderSideBySide`, `diffHunkActionsOnHover`, `onDiffHunkAction`, `diffHideUnchangedRegions`).
+Direct `CodeBlockNode` and top-level `MarkdownRender` both accept `codeBlockOptions`. The shared `CodeBlockOptions` type covers host-managed typography/layout plus supported File/FileDiff, interaction, annotation, and callback fields; `maxHeight` and the single symmetric `padding` value use numeric CSS pixels. Keep header/toolbar controls in `codeBlockProps`. Theme values are registered names: use `darkTheme` / `lightTheme` for the active names and `themes` for the `[dark, light]` pair to preload. An old Monaco JSON theme is not accepted directly: first convert it to a Shiki `ThemeRegistration`, then call `registerCustomTheme(name, loader)` from `stream-diffs/pierre`; see the [coordinated 2.0 family migration guide](https://markstream.simonhe.me/guide/migration-2-0).
 
 ## Tailwind