markstream-react 0.0.32 → 0.0.33

package/dist/types/types/component-props.d.ts

@@ -0,0 +1,208 @@
+import { CodeBlockNode } from 'stream-markdown-parser';
+export interface CodeBlockMonacoThemeObject {
+    name: string;
+    base?: string;
+    inherit?: boolean;
+    colors?: Record<string, string>;
+    rules?: Array<Record<string, unknown>>;
+    [key: string]: unknown;
+}
+export type CodeBlockMonacoTheme = string | CodeBlockMonacoThemeObject;
+export type CodeBlockMonacoLanguage = string | ((...args: any[]) => unknown);
+export interface CodeBlockDiffHideUnchangedRegionsOptions {
+    enabled?: boolean;
+    contextLineCount?: number;
+    minimumLineCount?: number;
+    revealLineCount?: number;
+}
+export type CodeBlockDiffHideUnchangedRegions = boolean | CodeBlockDiffHideUnchangedRegionsOptions;
+export type CodeBlockDiffLineStyle = 'background' | 'bar';
+export type CodeBlockDiffAppearance = 'auto' | 'light' | 'dark';
+export type CodeBlockDiffUnchangedRegionStyle = 'line-info' | 'line-info-basic' | 'metadata' | 'simple';
+export type CodeBlockDiffHunkActionKind = 'revert' | 'stage';
+export type CodeBlockDiffHunkSide = 'upper' | 'lower';
+export interface CodeBlockDiffHunkActionContext {
+    action: CodeBlockDiffHunkActionKind;
+    side: CodeBlockDiffHunkSide;
+    lineChange: unknown;
+    originalModel: unknown;
+    modifiedModel: unknown;
+}
+export interface CodeBlockMonacoOptions {
+    MAX_HEIGHT?: number | string;
+    fontSize?: number;
+    lineHeight?: number;
+    fontFamily?: string;
+    tabSize?: number;
+    readOnly?: boolean;
+    wordWrap?: 'off' | 'on' | 'wordWrapColumn' | 'bounded' | string;
+    wrappingIndent?: 'none' | 'same' | 'indent' | 'deepIndent' | string;
+    theme?: string;
+    themes?: CodeBlockMonacoTheme[];
+    languages?: CodeBlockMonacoLanguage[];
+    renderSideBySide?: boolean;
+    enableSplitViewResizing?: boolean;
+    ignoreTrimWhitespace?: boolean;
+    maxComputationTime?: number;
+    diffAlgorithm?: string;
+    renderIndicators?: boolean;
+    originalEditable?: boolean;
+    revealDebounceMs?: number;
+    revealStrategy?: 'bottom' | 'centerIfOutside' | 'center';
+    revealBatchOnIdleMs?: number;
+    updateThrottleMs?: number;
+    diffUpdateThrottleMs?: number;
+    diffAutoScroll?: boolean;
+    diffHideUnchangedRegions?: CodeBlockDiffHideUnchangedRegions;
+    diffLineStyle?: CodeBlockDiffLineStyle;
+    diffAppearance?: CodeBlockDiffAppearance;
+    diffUnchangedRegionStyle?: CodeBlockDiffUnchangedRegionStyle;
+    diffHunkActionsOnHover?: boolean;
+    diffHunkHoverHideDelayMs?: number;
+    onDiffHunkAction?: (context: CodeBlockDiffHunkActionContext) => void | boolean | Promise<void | boolean>;
+    scrollbar?: Record<string, any>;
+    [key: string]: any;
+}
+export interface CodeBlockNodeProps {
+    node: CodeBlockNode;
+    isDark?: boolean;
+    loading?: boolean;
+    stream?: boolean;
+    darkTheme?: CodeBlockMonacoTheme;
+    lightTheme?: CodeBlockMonacoTheme;
+    isShowPreview?: boolean;
+    monacoOptions?: CodeBlockMonacoOptions;
+    enableFontSizeControl?: boolean;
+    minWidth?: string | number;
+    maxWidth?: string | number;
+    themes?: CodeBlockMonacoTheme[];
+    showHeader?: boolean;
+    showCopyButton?: boolean;
+    showExpandButton?: boolean;
+    showPreviewButton?: boolean;
+    showCollapseButton?: boolean;
+    showFontSizeButtons?: boolean;
+    showTooltips?: boolean;
+    customId?: string;
+}
+export interface ImageNodeProps {
+    node: {
+        type: 'image';
+        src: string;
+        alt: string;
+        title: string | null;
+        raw: string;
+        loading?: boolean;
+    };
+    fallbackSrc?: string;
+    showCaption?: boolean;
+    lazy?: boolean;
+    svgMinHeight?: string;
+    usePlaceholder?: boolean;
+}
+export interface LinkNodeProps {
+    node: {
+        type: 'link';
+        href: string;
+        title: string | null;
+        text: string;
+        attrs?: [string, string][];
+        children: {
+            type: string;
+            raw: string;
+        }[];
+        raw: string;
+        loading?: boolean;
+    };
+    indexKey: number | string;
+    customId?: string;
+    showTooltip?: boolean;
+    color?: string;
+    underlineHeight?: number;
+    underlineBottom?: number | string;
+    animationDuration?: number;
+    animationOpacity?: number;
+    animationTiming?: string;
+    animationIteration?: string | number;
+}
+export interface PreCodeNodeProps {
+    node: CodeBlockNode;
+}
+export interface MermaidBlockNodeProps {
+    node: CodeBlockNode;
+    maxHeight?: string | null;
+    loading?: boolean;
+    isDark?: boolean;
+    workerTimeoutMs?: number;
+    parseTimeoutMs?: number;
+    renderTimeoutMs?: number;
+    fullRenderTimeoutMs?: number;
+    renderDebounceMs?: number;
+    contentStableDelayMs?: number;
+    previewPollDelayMs?: number;
+    previewPollMaxDelayMs?: number;
+    previewPollMaxAttempts?: number;
+    showHeader?: boolean;
+    showModeToggle?: boolean;
+    showCopyButton?: boolean;
+    showExportButton?: boolean;
+    showFullscreenButton?: boolean;
+    showCollapseButton?: boolean;
+    showZoomControls?: boolean;
+    enableWheelZoom?: boolean;
+    isStrict?: boolean;
+    showTooltips?: boolean;
+    onRenderError?: (error: unknown, code: string, container: HTMLElement) => boolean | void;
+}
+export interface MermaidBlockEvent<TPayload = any> {
+    payload?: TPayload;
+    defaultPrevented: boolean;
+    preventDefault: () => void;
+    svgElement?: SVGElement | null;
+    svgString?: string | null;
+}
+export interface D2BlockNodeProps {
+    node: CodeBlockNode;
+    maxHeight?: string | null;
+    loading?: boolean;
+    isDark?: boolean;
+    progressiveRender?: boolean;
+    progressiveIntervalMs?: number;
+    themeId?: number | null;
+    darkThemeId?: number | null;
+    showHeader?: boolean;
+    showModeToggle?: boolean;
+    showCopyButton?: boolean;
+    showExportButton?: boolean;
+    showCollapseButton?: boolean;
+}
+export interface MathBlockNodeProps {
+    node: {
+        type: 'math_block';
+        content: string;
+        raw: string;
+        loading?: boolean;
+    };
+}
+export interface MathInlineNodeProps {
+    node: {
+        type: 'math_inline';
+        content: string;
+        raw: string;
+        loading?: boolean;
+        markup?: string;
+    };
+}
+export interface InfographicBlockNodeProps {
+    node: CodeBlockNode;
+    maxHeight?: string | null;
+    loading?: boolean;
+    isDark?: boolean;
+    showHeader?: boolean;
+    showModeToggle?: boolean;
+    showCopyButton?: boolean;
+    showCollapseButton?: boolean;
+    showExportButton?: boolean;
+    showFullscreenButton?: boolean;
+    showZoomControls?: boolean;
+}

package/dist/types/types/node-component.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { RenderContext, RenderNodeFn } from '../types';
+export interface NodeComponentProps<TNode = unknown> {
+    node: TNode;
+    ctx?: RenderContext;
+    renderNode?: RenderNodeFn;
+    indexKey?: React.Key;
+    customId?: string;
+    isDark?: boolean;
+    typewriter?: boolean;
+    children?: React.ReactNode;
+}

package/dist/types/types.d.ts

@@ -0,0 +1,82 @@
+import { default as React } from 'react';
+import { BaseNode, MarkdownIt, ParsedNode, ParseOptions } from 'stream-markdown-parser';
+import { CodeBlockMonacoOptions, CodeBlockMonacoTheme, D2BlockNodeProps, InfographicBlockNodeProps, MermaidBlockNodeProps } from './types/component-props';
+export interface NodeRendererProps {
+    content?: string;
+    nodes?: readonly BaseNode[] | null;
+    /**
+     * Whether the input stream is complete (end-of-stream). When true, the parser
+     * can stop emitting streaming "loading" nodes for unfinished constructs.
+     */
+    final?: boolean;
+    parseOptions?: ParseOptions;
+    customMarkdownIt?: (md: MarkdownIt) => MarkdownIt;
+    /** Log parse/render timing stats (dev only). */
+    debugPerformance?: boolean;
+    /**
+     * Custom HTML-like tags that should be emitted as custom nodes (e.g. ['thinking']).
+     * Forwarded to `getMarkdown()` and merged into parseOptions.
+     */
+    customHtmlTags?: readonly string[];
+    viewportPriority?: boolean;
+    codeBlockStream?: boolean;
+    codeBlockDarkTheme?: CodeBlockMonacoTheme;
+    codeBlockLightTheme?: CodeBlockMonacoTheme;
+    codeBlockMonacoOptions?: CodeBlockMonacoOptions;
+    renderCodeBlocksAsPre?: boolean;
+    codeBlockMinWidth?: string | number;
+    codeBlockMaxWidth?: string | number;
+    codeBlockProps?: Record<string, any>;
+    mermaidProps?: Partial<Omit<MermaidBlockNodeProps, 'node' | 'loading' | 'isDark'>>;
+    d2Props?: Partial<Omit<D2BlockNodeProps, 'node' | 'loading' | 'isDark'>>;
+    infographicProps?: Partial<Omit<InfographicBlockNodeProps, 'node' | 'loading' | 'isDark'>>;
+    showTooltips?: boolean;
+    themes?: CodeBlockMonacoTheme[];
+    isDark?: boolean;
+    customId?: string;
+    indexKey?: number | string;
+    typewriter?: boolean;
+    batchRendering?: boolean;
+    initialRenderBatchSize?: number;
+    renderBatchSize?: number;
+    renderBatchDelay?: number;
+    renderBatchBudgetMs?: number;
+    renderBatchIdleTimeoutMs?: number;
+    deferNodesUntilVisible?: boolean;
+    maxLiveNodes?: number;
+    liveNodeBuffer?: number;
+    onCopy?: (code: string) => void;
+    onHandleArtifactClick?: (payload: any) => void;
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    onMouseOver?: (event: React.MouseEvent<HTMLElement>) => void;
+    onMouseOut?: (event: React.MouseEvent<HTMLElement>) => void;
+}
+export interface RenderContext {
+    customId?: string;
+    isDark?: boolean;
+    indexKey?: string;
+    typewriter?: boolean;
+    textStreamState?: Map<string, string>;
+    streamRenderVersion?: number;
+    customComponents?: Record<string, React.ComponentType<any>>;
+    codeBlockProps?: Record<string, any>;
+    mermaidProps?: Partial<Omit<MermaidBlockNodeProps, 'node' | 'loading' | 'isDark'>>;
+    d2Props?: Partial<Omit<D2BlockNodeProps, 'node' | 'loading' | 'isDark'>>;
+    infographicProps?: Partial<Omit<InfographicBlockNodeProps, 'node' | 'loading' | 'isDark'>>;
+    showTooltips?: boolean;
+    codeBlockStream?: boolean;
+    renderCodeBlocksAsPre?: boolean;
+    codeBlockThemes?: {
+        themes?: CodeBlockMonacoTheme[];
+        darkTheme?: CodeBlockMonacoTheme;
+        lightTheme?: CodeBlockMonacoTheme;
+        monacoOptions?: CodeBlockMonacoOptions;
+        minWidth?: string | number;
+        maxWidth?: string | number;
+    };
+    events: {
+        onCopy?: (code: string) => void;
+        onHandleArtifactClick?: (payload: any) => void;
+    };
+}
+export type RenderNodeFn = (node: ParsedNode, key: React.Key, ctx: RenderContext) => React.ReactNode;

package/dist/types/utils/languageIcon.d.ts

@@ -0,0 +1,8 @@
+export type LanguageIconResolver = (lang: string) => string | undefined | null;
+export declare function setLanguageIconResolver(resolver?: LanguageIconResolver | null): void;
+export declare function normalizeLanguageIdentifier(lang?: string | null): string;
+export declare function resolveMonacoLanguageId(lang?: string | null): string;
+export declare function preloadExtendedLanguageIcons(): Promise<void>;
+export declare function subscribeLanguageIconsRevision(listener: () => void): () => void;
+export declare function getLanguageIcon(lang: string): string;
+export declare const languageMap: Record<string, string>;

package/dist/types/utils/languageIconExtended.d.ts

@@ -0,0 +1 @@
+export declare const EXTENDED_LANGUAGE_ICON_MAP: Record<string, string>;

package/dist/types/utils/performanceMonitor.d.ts

@@ -0,0 +1,78 @@
+/**
+ * Lightweight performance monitoring helper for KaTeX rendering.
+ * Only used during development to understand Worker/cache benefits.
+ */
+interface RenderMetrics {
+    type: 'worker' | 'direct' | 'cache-hit';
+    duration: number;
+    formulaLength: number;
+    timestamp: number;
+    success: boolean;
+    error?: string;
+}
+declare class PerformanceMonitor {
+    private metrics;
+    private enabled;
+    private maxMetrics;
+    enable(): void;
+    disable(): void;
+    recordRender(metrics: RenderMetrics): void;
+    private averages;
+    getStats(): {
+        totalRenders: number;
+        cacheHits: number;
+        cacheHitRate: string;
+        workerCalls: number;
+        directCalls: number;
+        averageWorkerTime: string;
+        averageDirectTime: string;
+        averageCacheHitTime: string;
+        workerSavings: string;
+        recommendation: string;
+    };
+    printReport(): {
+        totalRenders: number;
+        cacheHits: number;
+        cacheHitRate: string;
+        workerCalls: number;
+        directCalls: number;
+        averageWorkerTime: string;
+        averageDirectTime: string;
+        averageCacheHitTime: string;
+        workerSavings: string;
+        recommendation: string;
+    };
+    reset(): void;
+    exportMetrics(): {
+        metrics: RenderMetrics[];
+        stats: {
+            totalRenders: number;
+            cacheHits: number;
+            cacheHitRate: string;
+            workerCalls: number;
+            directCalls: number;
+            averageWorkerTime: string;
+            averageDirectTime: string;
+            averageCacheHitTime: string;
+            workerSavings: string;
+            recommendation: string;
+        };
+        timestamp: number;
+    };
+}
+export declare const perfMonitor: PerformanceMonitor;
+export declare function enablePerfMonitoring(): void;
+export declare function disablePerfMonitoring(): void;
+export declare function getPerfReport(): {
+    totalRenders: number;
+    cacheHits: number;
+    cacheHitRate: string;
+    workerCalls: number;
+    directCalls: number;
+    averageWorkerTime: string;
+    averageDirectTime: string;
+    averageCacheHitTime: string;
+    workerSavings: string;
+    recommendation: string;
+};
+export {};

package/dist/types/utils/safeRaf.d.ts

@@ -0,0 +1,2 @@
+export declare function safeRaf(cb: FrameRequestCallback): any;
+export declare function safeCancelRaf(id: number | null | undefined): void;

package/dist/types/utils/streamingTextState.d.ts

@@ -0,0 +1,23 @@
+export interface ResolveStreamingTextStateOptions {
+    nextContent: string;
+    previousContent: string;
+    typewriterEnabled: boolean;
+}
+export interface StreamingTextStateResult {
+    settledContent: string;
+    streamedDelta: string;
+    appended: boolean;
+}
+export interface StreamingRenderState {
+    settledContent: string;
+    streamedDelta: string;
+}
+export interface ResolveStreamingTextUpdateOptions {
+    nextContent: string;
+    persistedContent?: string;
+    currentState: StreamingRenderState;
+    typewriterEnabled: boolean;
+    streamRenderVersionChanged?: boolean;
+}
+export declare function resolveStreamingTextState({ nextContent, previousContent, typewriterEnabled, }: ResolveStreamingTextStateOptions): StreamingTextStateResult;
+export declare function resolveStreamingTextUpdate({ nextContent, persistedContent, currentState, typewriterEnabled, streamRenderVersionChanged, }: ResolveStreamingTextUpdateOptions): StreamingTextStateResult;

package/dist/types/workers/katexWorkerClient.d.ts

@@ -0,0 +1,31 @@
+export declare function setKaTeXWorker(w: Worker): void;
+export declare function clearKaTeXWorker(): void;
+export declare function setKaTeXWorkerDebug(enabled: boolean): void;
+export declare const WORKER_BUSY_CODE = "WORKER_BUSY";
+export declare function renderKaTeXInWorker(content: string, displayMode?: boolean, timeout?: number, signal?: AbortSignal): Promise<string>;
+export declare function setKaTeXCache(content: string, displayMode: boolean, html: string): void;
+export declare function clearKaTeXCache(): void;
+export declare function setKaTeXConcurrencyLimit(limit: number): void;
+export declare function waitForKaTeXWorkerSlot(timeout?: number, signal?: AbortSignal): Promise<void>;
+export interface BackpressureOptions {
+    timeout?: number;
+    waitTimeout?: number;
+    backoffMs?: number;
+    maxRetries?: number;
+    signal?: AbortSignal;
+}
+declare const defaultBackpressure: {
+    timeout: number;
+    waitTimeout: number;
+    backoffMs: number;
+    maxRetries: number;
+};
+export declare function setKaTeXBackpressureDefaults(opts: Partial<typeof defaultBackpressure>): void;
+export declare function getKaTeXBackpressureDefaults(): {
+    timeout: number;
+    waitTimeout: number;
+    backoffMs: number;
+    maxRetries: number;
+};
+export declare function renderKaTeXWithBackpressure(content: string, displayMode?: boolean, opts?: BackpressureOptions): Promise<string>;
+export {};

package/dist/types/workers/mermaidParser.worker.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/workers/mermaidWorkerClient.d.ts

@@ -0,0 +1,14 @@
+type Theme = 'light' | 'dark';
+export declare function setMermaidWorkerClientDebug(enabled: boolean): void;
+export declare function setMermaidWorkerMaxConcurrency(n: number): void;
+export declare function getMermaidWorkerLoad(): {
+    inFlight: number;
+    max: number;
+};
+export declare const MERMAID_WORKER_BUSY_CODE = "WORKER_BUSY";
+export declare function setMermaidWorker(w: Worker): void;
+export declare function clearMermaidWorker(): void;
+export declare function canParseOffthread(code: string, theme: Theme, timeout?: number): Promise<boolean>;
+export declare function findPrefixOffthread(code: string, theme: Theme, timeout?: number): Promise<string>;
+export declare function terminateWorker(): void;
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "markstream-react",
   "type": "module",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "description": "React Markdown renderer optimized for large documents with progressive Mermaid rendering, streaming diff code blocks, and fast real-time preview. Built on stream-markdown AST for consistent rendering across frameworks. Perfect for documentation sites, AI chat interfaces, and content management systems.",
   "author": "Simon He",
   "license": "MIT",
@@ -62,6 +62,14 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./next": {
+      "types": "./dist/next.d.ts",
+      "import": "./dist/next.js"
+    },
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "import": "./dist/server.js"
+    },
     "./index.css": "./dist/index.css",
     "./index.px.css": "./dist/index.px.css",
     "./index.tailwind.css": "./dist/index.tailwind.css",
@@ -108,7 +116,7 @@
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
     "clsx": "^2.1.1",
-    "stream-markdown-parser": "0.0.75"
+    "stream-markdown-parser": "0.0.76"
   },
   "devDependencies": {
     "@types/react": "^18.3.28",
@@ -125,7 +133,7 @@
   },
   "scripts": {
     "dev": "vite dev",
-    "build": "vite build --mode npm && vite build -c vite.config.tailwind.ts --mode npm && node ./scripts/copy-tailwind-css.mjs && node ../../scripts/generate-px-css.mjs && pnpm run build:dts",
+    "build": "vite build --mode npm && vite build -c vite.config.tailwind.ts --mode npm && node ./scripts/copy-tailwind-css.mjs && node ../../scripts/generate-px-css.mjs && pnpm run build:dts && node ./scripts/ensure-next-client-directive.mjs",
     "build:analyze": "ANALYZE=true pnpm build",
     "build:dts": "rollup -c ./scripts/rollup.dts.config.mjs && node ./scripts/clean-dts.cjs",
     "preview": "vite preview",