markstream-react 0.0.50 → 0.0.53

package/dist/types/components/Math/MathBlockNode.d.ts

@@ -1,2 +1,2 @@
 import { MathBlockNodeProps } from '../../types/component-props';
-export declare function MathBlockNode({ node }: MathBlockNodeProps): import("react/jsx-runtime").JSX.Element;
+export declare function MathBlockNode({ node }: MathBlockNodeProps): import("react").JSX.Element;

package/dist/types/components/Math/MathInlineNode.d.ts

@@ -1,2 +1,2 @@
 import { MathInlineNodeProps } from '../../types/component-props';
-export declare function MathInlineNode({ node }: MathInlineNodeProps): import("react/jsx-runtime").JSX.Element;
+export declare function MathInlineNode({ node }: MathInlineNodeProps): import("react").JSX.Element;

package/dist/types/components/MermaidBlockNode/MermaidBlockNode.d.ts

@@ -1,4 +1,5 @@
 import { MermaidBlockEvent, MermaidBlockNodeProps } from '../../types/component-props';
+import { default as React } from 'react';
 export interface MermaidBlockNodeReactEvents {
     onCopy?: (code: string) => void;
     onExport?: (event: MermaidBlockEvent<{
@@ -12,4 +13,4 @@ export interface MermaidBlockNodeReactEvents {
         target: 'preview' | 'source';
     }>) => void;
 }
-export declare function MermaidBlockNode(rawProps: MermaidBlockNodeProps & MermaidBlockNodeReactEvents): import("react/jsx-runtime").JSX.Element;
+export declare function MermaidBlockNode(rawProps: MermaidBlockNodeProps & MermaidBlockNodeReactEvents): React.JSX.Element;

package/dist/types/components/NodeRenderer/FallbackComponent.d.ts

@@ -1,5 +1,6 @@
 import { NodeComponentProps } from '../../types/node-component';
+import { default as React } from 'react';
 export declare function FallbackComponent(props: NodeComponentProps<{
     type: string;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;
 export default FallbackComponent;

package/dist/types/components/NodeRenderer.d.ts

@@ -1,4 +1,5 @@
+import { HtmlComponentMap, StreamingComponentMap } from '../customComponents';
 import { NodeRendererProps } from '../types';
 import { default as React } from 'react';
-export declare const NodeRenderer: React.FC<NodeRendererProps>;
+export declare function NodeRenderer<TStreamingComponents extends StreamingComponentMap = StreamingComponentMap, THtmlComponents extends Record<string, any> = HtmlComponentMap>(rawProps: NodeRendererProps<TStreamingComponents, THtmlComponents>): React.JSX.Element;
 export default NodeRenderer;

package/dist/types/components/ParagraphNode/ParagraphNode.d.ts

@@ -1,7 +1,8 @@
 import { ParsedNode } from 'stream-markdown-parser';
 import { NodeComponentProps } from '../../types/node-component';
+import { default as React } from 'react';
 export declare function ParagraphNode(props: NodeComponentProps<{
     type: 'paragraph';
     children?: ParsedNode[];
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;
 export default ParagraphNode;

package/dist/types/components/ReferenceNode/ReferenceNode.d.ts

@@ -11,5 +11,5 @@ export declare function ReferenceNode(props: NodeComponentProps<{
 }> & {
     messageId?: string;
     threadId?: string;
-} & ReferenceNodeHandlers): import("react/jsx-runtime").JSX.Element;
+} & ReferenceNodeHandlers): React.JSX.Element;
 export default ReferenceNode;

package/dist/types/components/StrikethroughNode/StrikethroughNode.d.ts

@@ -1,5 +1,6 @@
 import { NodeComponentProps } from '../../types/node-component';
+import { default as React } from 'react';
 export declare function StrikethroughNode(props: NodeComponentProps<{
     type: 'strikethrough';
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;
 export default StrikethroughNode;

package/dist/types/components/StrongNode/StrongNode.d.ts

@@ -1,5 +1,6 @@
 import { NodeComponentProps } from '../../types/node-component';
+import { default as React } from 'react';
 export declare function StrongNode(props: NodeComponentProps<{
     type: 'strong';
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;
 export default StrongNode;

package/dist/types/components/SubscriptNode/SubscriptNode.d.ts

@@ -1,5 +1,6 @@
 import { NodeComponentProps } from '../../types/node-component';
+import { default as React } from 'react';
 export declare function SubscriptNode(props: NodeComponentProps<{
     type: 'subscript';
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;
 export default SubscriptNode;

package/dist/types/components/SuperscriptNode/SuperscriptNode.d.ts

@@ -1,5 +1,6 @@
 import { NodeComponentProps } from '../../types/node-component';
+import { default as React } from 'react';
 export declare function SuperscriptNode(props: NodeComponentProps<{
     type: 'superscript';
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;
 export default SuperscriptNode;

package/dist/types/components/TableNode/TableNode.d.ts

@@ -1,9 +1,10 @@
 import { TableRowNode } from 'stream-markdown-parser';
 import { NodeComponentProps } from '../../types/node-component';
+import { default as React } from 'react';
 export declare function TableNode(props: NodeComponentProps<{
     type: 'table';
     header?: TableRowNode;
     rows?: TableRowNode[];
     loading?: boolean;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;
 export default TableNode;

package/dist/types/components/TextNode/TextNode.d.ts

@@ -1,7 +1,8 @@
 import { NodeComponentProps } from '../../types/node-component';
+import { default as React } from 'react';
 export declare function TextNode(props: NodeComponentProps<{
     type: 'text';
     content: string;
     center?: boolean;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;
 export default TextNode;

package/dist/types/components/ThematicBreakNode/ThematicBreakNode.d.ts

@@ -1,2 +1,3 @@
-export declare function ThematicBreakNode(): import("react/jsx-runtime").JSX.Element;
+import { default as React } from 'react';
+export declare function ThematicBreakNode(): React.JSX.Element;
 export default ThematicBreakNode;

package/dist/types/components/VmrContainerNode/VmrContainerNode.d.ts

@@ -1,9 +1,10 @@
 import { ParsedNode } from 'stream-markdown-parser';
 import { NodeComponentProps } from '../../types/node-component';
+import { default as React } from 'react';
 export declare function VmrContainerNode(props: NodeComponentProps<{
     type: 'vmr_container';
     name: string;
     attrs?: Record<string, string> | [string, string | null][] | null;
     children?: ParsedNode[];
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;
 export default VmrContainerNode;

package/dist/types/context/viewportPriority.d.ts

@@ -13,5 +13,5 @@ export interface ViewportPriorityProviderProps {
     enabled?: boolean;
     children: React.ReactNode;
 }
-export declare function ViewportPriorityProvider({ getRoot, enabled, children }: ViewportPriorityProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ViewportPriorityProvider({ getRoot, enabled, children }: ViewportPriorityProviderProps): React.JSX.Element;
 export declare function useViewportPriority(): RegisterViewportFn;

package/dist/types/customComponents.d.ts

@@ -1,9 +1,23 @@
-import { ComponentType } from 'react';
+import { ComponentType, PropsWithChildren } from 'react';
+import { NodeComponentProps } from './types/node-component';
 export type CustomComponentDisplayMode = 'inline' | 'block';
 export type MarkstreamCustomComponent<P = never> = ComponentType<P> & {
     markstreamDisplay?: CustomComponentDisplayMode;
 };
 export type CustomComponentMap = Record<string, MarkstreamCustomComponent>;
+export type StreamingComponent<TNode = any> = ComponentType<NodeComponentProps<TNode>>;
+export type StreamingComponentMap = Record<string, StreamingComponent<any>>;
+export type HtmlComponent<P extends object = any> = ComponentType<PropsWithChildren<P>>;
+export type HtmlComponentMap = Record<string, HtmlComponent<any>>;
+type IsAny<T> = 0 extends (1 & T) ? true : false;
+type ComponentProps<T> = T extends ComponentType<infer P> ? P : T extends (props: infer P) => any ? P : never;
+export type StreamingComponentDefinitions<T extends Record<string, any>> = {
+    [K in keyof T]: ComponentProps<T[K]> extends infer P ? IsAny<P> extends true ? T[K] : P extends NodeComponentProps<any> ? NodeComponentProps<any> extends P ? T[K] : never : never : never;
+};
+type ParserComponentOnlyProp = Exclude<keyof NodeComponentProps<any>, 'children' | 'node'>;
+export type HtmlComponentDefinitions<T extends Record<string, any>> = {
+    [K in keyof T]: ComponentProps<T[K]> extends infer P ? IsAny<P> extends true ? T[K] : Extract<keyof P, ParserComponentOnlyProp> extends never ? T[K] : never : never;
+};
 export declare function subscribeCustomComponents(listener: () => void): () => void;
 export declare function getCustomComponentsRevision(): number;
 export declare function setCustomComponents(id: string, mapping: CustomComponentMap): void;
@@ -15,3 +29,8 @@ export declare function getCustomComponentDisplay(component: ComponentType<never
 export declare function withMarkstreamComponentDisplay<T extends ComponentType<never>>(component: T, display: CustomComponentDisplayMode): T & {
     markstreamDisplay: CustomComponentDisplayMode;
 };
+export declare function defineStreamingComponents<const T extends Record<string, ComponentType<any>>>(components: T & StreamingComponentDefinitions<T>): T & StreamingComponentDefinitions<T>;
+export declare function defineHtmlComponents<const T extends Record<string, ComponentType<any>>>(components: T & HtmlComponentDefinitions<T>): T & HtmlComponentDefinitions<T>;
+export declare function normalizeComponentMap<T>(mapping?: Record<string, T>): Record<string, T>;
+export declare function warnComponentMapConflicts(streamingComponents: StreamingComponentMap, htmlComponents: HtmlComponentMap, warnedTags: Set<string>): void;
+export {};

package/dist/types/index.d.ts

@@ -51,8 +51,8 @@ export { ThematicBreakNode } from './components/ThematicBreakNode/ThematicBreakN
 export { Tooltip } from './components/Tooltip/Tooltip';
 export type { TooltipPlacement, TooltipProps } from './components/Tooltip/Tooltip';
 export { VmrContainerNode } from './components/VmrContainerNode/VmrContainerNode';
-export { clearGlobalCustomComponents, getCustomComponentDisplay, getCustomNodeComponents, removeCustomComponents, setCustomComponents, withMarkstreamComponentDisplay, } from './customComponents';
-export type { CustomComponentDisplayMode, MarkstreamCustomComponent, } from './customComponents';
+export { clearGlobalCustomComponents, defineHtmlComponents, defineStreamingComponents, getCustomComponentDisplay, getCustomNodeComponents, removeCustomComponents, setCustomComponents, withMarkstreamComponentDisplay, } from './customComponents';
+export type { CustomComponentDisplayMode, HtmlComponent, HtmlComponentMap, MarkstreamCustomComponent, StreamingComponent, StreamingComponentMap, } from './customComponents';
 export { useSmoothMarkdownStream } from './hooks/useSmoothMarkdownStream';
 export type { SmoothMarkdownStreamOptions, SmoothMarkdownStreamSnapshot, } from './hooks/useSmoothMarkdownStream';
 export * from './i18n/useSafeI18n';

package/dist/types/next.d.ts

@@ -1,6 +1,6 @@
 import { D2Loader, disableD2, enableD2, isD2Enabled, setD2Loader } from './components/D2BlockNode/d2';
 import { default as React } from 'react';
-import { clearGlobalCustomComponents, getCustomNodeComponents, removeCustomComponents, setCustomComponents } from './customComponents';
+import { clearGlobalCustomComponents, defineHtmlComponents, defineStreamingComponents, getCustomNodeComponents, removeCustomComponents, setCustomComponents } from './customComponents';
 export declare const AdmonitionNode: {
     (props: import('./types/node-component').NodeComponentProps<{
         type: "admonition";
@@ -120,6 +120,9 @@ export declare const HtmlInlineNode: {
     (props: import('./types/node-component').NodeComponentProps<{
         type: "html_inline";
         content?: string;
+        tag?: string;
+        attrs?: [string, string | null][] | null;
+        children?: import('stream-markdown-parser').ParsedNode[];
     }>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
     displayName: string;
 };
@@ -190,7 +193,7 @@ export declare const MermaidBlockNode: {
     displayName: string;
 };
 export declare const NodeRenderer: {
-    (props: import('./types').NodeRendererProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    (props: import('./types').NodeRendererProps<import('./customComponents').StreamingComponentMap, Record<string, any>>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
     displayName: string;
 };
 export declare const FallbackComponent: {
@@ -283,13 +286,14 @@ export declare const VmrContainerNode: {
 export default NodeRenderer;
 export type { D2Loader };
 export { disableD2, enableD2, isD2Enabled, setD2Loader };
-export { clearGlobalCustomComponents, getCustomNodeComponents, removeCustomComponents, setCustomComponents, };
+export { clearGlobalCustomComponents, defineHtmlComponents, defineStreamingComponents, getCustomNodeComponents, removeCustomComponents, setCustomComponents, };
 export type { HtmlPreviewFrameProps } from './components/CodeBlockNode/HtmlPreviewFrame';
 export * from './components/D2BlockNode/d2';
 export type { LinkNodeStyleProps } from './components/LinkNode/LinkNode';
 export type { ListItemNodeProps } from './components/ListItemNode/ListItemNode';
 export type { MarkdownCodeBlockNodeProps } from './components/MarkdownCodeBlockNode/MarkdownCodeBlockNode';
 export type { TooltipPlacement, TooltipProps } from './components/Tooltip/Tooltip';
+export type { CustomComponentDisplayMode, HtmlComponent, HtmlComponentMap, MarkstreamCustomComponent, StreamingComponent, StreamingComponentMap, } from './customComponents';
 export * from './i18n/useSafeI18n';
 export * from './renderers/renderNode';
 export type { NodeRendererCodeBlockProps, NodeRendererProps } from './types';

package/dist/types/renderers/renderChildren.d.ts

@@ -4,4 +4,4 @@ import { RenderContext, RenderNodeFn } from '../types';
 export declare const BLOCK_LEVEL_TYPES: Set<string>;
 export declare function tokenAttrsToProps(attrs?: [string, string | null][]): Record<string, string | true>;
 export declare function renderNodeChildren(children: ParsedNode[] | undefined, ctx: RenderContext, prefix: string, renderNode: RenderNodeFn): ReactNode[];
-export declare function renderInline(children: ParsedNode[] | undefined, ctx: RenderContext, prefix: string, renderNode: RenderNodeFn): import("react/jsx-runtime").JSX.Element;
+export declare function renderInline(children: ParsedNode[] | undefined, ctx: RenderContext, prefix: string, renderNode: RenderNodeFn): import("react").JSX.Element;

package/dist/types/renderers/renderNode.d.ts

@@ -1,4 +1,4 @@
 import { ParsedNode } from 'stream-markdown-parser';
 import { RenderContext } from '../types';
 import { default as React } from 'react';
-export declare function renderNode(node: ParsedNode, key: React.Key, ctx: RenderContext): import("react/jsx-runtime").JSX.Element;
+export declare function renderNode(node: ParsedNode, key: React.Key, ctx: RenderContext): any;

package/dist/types/server-renderer/index.d.ts

@@ -2,6 +2,7 @@ import { DefinitionItemNode as DefinitionItemNodeType, ListItemNode as ListItemN
 import { HtmlPreviewFrameProps } from '../components/CodeBlockNode/HtmlPreviewFrame';
 import { MarkdownCodeBlockNodeProps } from '../components/MarkdownCodeBlockNode/MarkdownCodeBlockNode';
 import { TooltipProps } from '../components/Tooltip/Tooltip';
+import { HtmlComponentMap, StreamingComponentMap } from '../customComponents';
 import { NodeRendererProps, RenderContext } from '../types';
 import { CodeBlockNodeProps, D2BlockNodeProps, ImageNodeProps, InfographicBlockNodeProps, LinkNodeProps, MathBlockNodeProps, MathInlineNodeProps, MermaidBlockNodeProps, PreCodeNodeProps } from '../types/component-props';
 import { NodeComponentProps } from '../types/node-component';
@@ -10,56 +11,56 @@ export declare function TextNode(props: NodeComponentProps<{
     type: 'text';
     content: string;
     center?: boolean;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;
 export declare function ParagraphNode(props: NodeComponentProps<{
     type: 'paragraph';
     children?: ParsedNode[];
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;
 export declare function HeadingNode(props: NodeComponentProps<{
     type: 'heading';
     level?: number;
     children?: ParsedNode[];
     attrs?: Record<string, string | boolean>;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;
 export declare function BlockquoteNode(props: NodeComponentProps<{
     type: 'blockquote';
     children?: ParsedNode[];
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;
 export declare function ListItemNode(props: NodeComponentProps<{
     type: 'list_item';
     children?: ParsedNode[];
 }> & {
     value?: number;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export declare function ListNode(props: NodeComponentProps<{
     type: 'list';
     ordered?: boolean;
     start?: number;
     items?: ListItemNodeType[];
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;
 export declare function TableNode(props: NodeComponentProps<{
     type: 'table';
     header?: TableRowNodeType;
     rows?: TableRowNodeType[];
     loading?: boolean;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;
 export declare function DefinitionListNode(props: NodeComponentProps<{
     type: 'definition_list';
     items?: DefinitionItemNodeType[];
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;
 export declare function FootnoteNode(props: NodeComponentProps<{
     type: 'footnote';
     id: string;
     children?: ParsedNode[];
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;
 export declare function FootnoteReferenceNode(props: NodeComponentProps<{
     type: 'footnote_reference';
     id: string;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;
 export declare function FootnoteAnchorNode(props: NodeComponentProps<{
     type: 'footnote_anchor';
     id: string;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;
 export declare function AdmonitionNode(props: NodeComponentProps<{
     type: 'admonition';
     kind?: string;
@@ -67,54 +68,54 @@ export declare function AdmonitionNode(props: NodeComponentProps<{
     children?: ParsedNode[];
     collapsible?: boolean;
     open?: boolean;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;
 export declare function CheckboxNode(props: NodeComponentProps<{
     type: 'checkbox' | 'checkbox_input';
     checked?: boolean;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;
 export declare function EmojiNode(props: NodeComponentProps<{
     type: 'emoji';
     name: string;
     markup?: string;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;
 export declare function StrongNode(props: NodeComponentProps<{
     type: 'strong';
     children?: ParsedNode[];
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;
 export declare function EmphasisNode(props: NodeComponentProps<{
     type: 'emphasis';
     children?: ParsedNode[];
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;
 export declare function StrikethroughNode(props: NodeComponentProps<{
     type: 'strikethrough';
     children?: ParsedNode[];
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;
 export declare function HighlightNode(props: NodeComponentProps<{
     type: 'highlight';
     children?: ParsedNode[];
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;
 export declare function InsertNode(props: NodeComponentProps<{
     type: 'insert';
     children?: ParsedNode[];
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;
 export declare function SubscriptNode(props: NodeComponentProps<{
     type: 'subscript';
     children?: ParsedNode[];
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;
 export declare function SuperscriptNode(props: NodeComponentProps<{
     type: 'superscript';
     children?: ParsedNode[];
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;
 export declare function HardBreakNode(_props: NodeComponentProps<{
     type: 'hardbreak';
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;
 export declare function ThematicBreakNode(_props?: NodeComponentProps<{
     type: 'thematic_break';
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;
 export declare function InlineCodeNode(props: NodeComponentProps<{
     type: 'inline_code';
     code: string;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;
 export declare function LinkNode(props: NodeComponentProps<LinkNodeProps['node']> & {
     showTooltip?: boolean;
     color?: string;
@@ -124,46 +125,49 @@ export declare function LinkNode(props: NodeComponentProps<LinkNodeProps['node']
     animationOpacity?: number;
     animationTiming?: string;
     animationIteration?: string | number;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function ImageNode(rawProps: ImageNodeProps): import("react/jsx-runtime").JSX.Element;
-export declare function PreCodeNode({ node }: PreCodeNodeProps): import("react/jsx-runtime").JSX.Element;
-export declare function CodeBlockNode(props: CodeBlockNodeProps): import("react/jsx-runtime").JSX.Element;
-export declare function MarkdownCodeBlockNode(props: MarkdownCodeBlockNodeProps): import("react/jsx-runtime").JSX.Element;
-export declare function MermaidBlockNode(props: MermaidBlockNodeProps): import("react/jsx-runtime").JSX.Element;
-export declare function D2BlockNode(props: D2BlockNodeProps): import("react/jsx-runtime").JSX.Element;
-export declare function InfographicBlockNode(props: InfographicBlockNodeProps): import("react/jsx-runtime").JSX.Element;
-export declare function MathBlockNode({ node }: MathBlockNodeProps): import("react/jsx-runtime").JSX.Element;
-export declare function MathInlineNode({ node }: MathInlineNodeProps): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
+export declare function ImageNode(rawProps: ImageNodeProps): React.JSX.Element;
+export declare function PreCodeNode({ node }: PreCodeNodeProps): React.JSX.Element;
+export declare function CodeBlockNode(props: CodeBlockNodeProps): React.JSX.Element;
+export declare function MarkdownCodeBlockNode(props: MarkdownCodeBlockNodeProps): React.JSX.Element;
+export declare function MermaidBlockNode(props: MermaidBlockNodeProps): React.JSX.Element;
+export declare function D2BlockNode(props: D2BlockNodeProps): React.JSX.Element;
+export declare function InfographicBlockNode(props: InfographicBlockNodeProps): React.JSX.Element;
+export declare function MathBlockNode({ node }: MathBlockNodeProps): React.JSX.Element;
+export declare function MathInlineNode({ node }: MathInlineNodeProps): React.JSX.Element;
 export declare function ReferenceNode(props: NodeComponentProps<{
     type: 'reference';
     id: string;
 }> & {
     messageId?: string;
     threadId?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export declare function HtmlBlockNode(props: NodeComponentProps<{
     type: 'html_block';
     content?: string;
     tag?: string;
     attrs?: [string, string | null][] | null;
     children?: ParsedNode[];
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;
 export declare function HtmlInlineNode(props: NodeComponentProps<{
     type: 'html_inline';
     content?: string;
-}>): import("react/jsx-runtime").JSX.Element;
+    tag?: string;
+    attrs?: [string, string | null][] | null;
+    children?: ParsedNode[];
+}>): React.JSX.Element;
 export declare function VmrContainerNode(props: NodeComponentProps<{
     type: 'vmr_container';
     name: string;
     attrs?: Record<string, string> | [string, string | null][] | null;
     children?: ParsedNode[];
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;
 export declare function Tooltip(_props: TooltipProps): any;
 export declare function HtmlPreviewFrame(_props: HtmlPreviewFrameProps): any;
 export declare function FallbackComponent(props: NodeComponentProps<{
     type: string;
-}>): import("react/jsx-runtime").JSX.Element;
-export declare function renderNode(node: ParsedNode, key: React.Key, ctx: RenderContext): import("react/jsx-runtime").JSX.Element;
-export declare function NodeRenderer(props: NodeRendererProps): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;
+export declare function renderNode(node: ParsedNode, key: React.Key, ctx: RenderContext): any;
+export declare function NodeRenderer<TStreamingComponents extends StreamingComponentMap = StreamingComponentMap, THtmlComponents extends Record<string, any> = HtmlComponentMap>(props: NodeRendererProps<TStreamingComponents, THtmlComponents>): React.JSX.Element;
 export { CodeBlockNode as ReactCodeBlockNode };
 export default NodeRenderer;

package/dist/types/server.d.ts

@@ -3,8 +3,8 @@ export type { LinkNodeStyleProps } from './components/LinkNode/LinkNode';
 export type { ListItemNodeProps } from './components/ListItemNode/ListItemNode';
 export type { MarkdownCodeBlockNodeProps } from './components/MarkdownCodeBlockNode/MarkdownCodeBlockNode';
 export type { TooltipPlacement, TooltipProps } from './components/Tooltip/Tooltip';
-export { clearGlobalCustomComponents, getCustomComponentDisplay, getCustomNodeComponents, removeCustomComponents, setCustomComponents, withMarkstreamComponentDisplay, } from './customComponents';
-export type { CustomComponentDisplayMode, MarkstreamCustomComponent } from './customComponents';
+export { clearGlobalCustomComponents, defineHtmlComponents, defineStreamingComponents, getCustomComponentDisplay, getCustomNodeComponents, removeCustomComponents, setCustomComponents, withMarkstreamComponentDisplay, } from './customComponents';
+export type { CustomComponentDisplayMode, HtmlComponent, HtmlComponentMap, MarkstreamCustomComponent, StreamingComponent, StreamingComponentMap, } from './customComponents';
 export { AdmonitionNode } from './server-renderer';
 export { BlockquoteNode } from './server-renderer';
 export { CheckboxNode } from './server-renderer';

package/dist/types/styles.d.ts

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

package/dist/types/types.d.ts

@@ -1,13 +1,13 @@
-import { default as React } from 'react';
+import { default as React, ComponentType } from 'react';
 import { BaseNode, HtmlPolicy, MarkdownIt, ParsedNode, ParseOptions } from 'stream-markdown-parser';
-import { CustomComponentMap } from './customComponents';
+import { CustomComponentMap, HtmlComponentDefinitions, HtmlComponentMap, StreamingComponentDefinitions, StreamingComponentMap } from './customComponents';
 import { SmoothMarkdownStreamOptions } from './hooks/useSmoothMarkdownStream';
 import { CodeBlockMonacoOptions, CodeBlockMonacoTheme, CodeBlockNodeProps, CodeBlockPreviewPayload, D2BlockNodeProps, InfographicBlockNodeProps, MermaidBlockNodeProps, ShikiCodeBlockProps } from './types/component-props';
 type NodeRendererCodeBlockThemes = CodeBlockNodeProps['themes'] | ShikiCodeBlockProps['themes'];
 export type NodeRendererCodeBlockProps = Partial<Omit<CodeBlockNodeProps, 'node' | 'themes'>> & Partial<Omit<ShikiCodeBlockProps, 'themes'>> & {
     themes?: NodeRendererCodeBlockThemes;
 } & Record<string, unknown>;
-export interface NodeRendererProps {
+export interface NodeRendererProps<TStreamingComponents extends Record<string, ComponentType<any>> = StreamingComponentMap, THtmlComponents extends Record<string, any> = HtmlComponentMap> {
     content?: string;
     nodes?: readonly BaseNode[] | null;
     /**
@@ -17,6 +17,8 @@ export interface NodeRendererProps {
     final?: boolean;
     parseOptions?: ParseOptions;
     customMarkdownIt?: (md: MarkdownIt) => MarkdownIt;
+    streamingComponents?: TStreamingComponents & StreamingComponentDefinitions<TStreamingComponents>;
+    htmlComponents?: THtmlComponents & HtmlComponentDefinitions<THtmlComponents>;
     /** Log parse/render timing stats (dev only). */
     debugPerformance?: boolean;
     /**
@@ -86,6 +88,7 @@ export interface NodeRendererProps {
 export interface RenderContext {
     customId?: string;
     isDark?: boolean;
+    final?: boolean;
     indexKey?: string;
     typewriter?: boolean;
     /** Enable/disable fade animations. Default: true */
@@ -93,6 +96,8 @@ export interface RenderContext {
     textStreamState?: Map<string, string>;
     streamRenderVersion?: number;
     customComponents?: CustomComponentMap;
+    streamingComponents?: StreamingComponentMap;
+    htmlComponents?: HtmlComponentMap;
     customHtmlTags?: readonly string[];
     htmlPolicy?: HtmlPolicy;
     codeBlockProps?: NodeRendererCodeBlockProps;

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

@@ -1,16 +1,17 @@
+import { ComponentType } from 'react';
 import { ParsedNode } from 'stream-markdown-parser';
-import { CustomComponentDisplayMode, CustomComponentMap, MarkstreamCustomComponent } from '../customComponents';
+import { CustomComponentDisplayMode } from '../customComponents';
 export interface ResolvedCustomHtmlTag {
     tag: string;
     isWhitelisted: boolean;
-    component: MarkstreamCustomComponent | null;
+    component: ComponentType<any> | null;
     display: CustomComponentDisplayMode | undefined;
 }
 export declare function resolveCustomHtmlTag(node: Pick<ParsedNode, 'type'> & {
     tag?: string | null;
     content?: unknown;
-}, customComponents: CustomComponentMap, customHtmlTags?: readonly string[]): ResolvedCustomHtmlTag | null;
+}, customComponents: Record<string, ComponentType<any>>, customHtmlTags?: readonly string[]): ResolvedCustomHtmlTag | null;
 export declare function isParagraphBreakingCustomHtmlNode(node: Pick<ParsedNode, 'type'> & {
     tag?: string | null;
     content?: unknown;
-}, customComponents: CustomComponentMap, customHtmlTags?: readonly string[]): boolean;
+}, customComponents: Record<string, ComponentType<any>>, customHtmlTags?: readonly string[]): boolean;

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

@@ -1,10 +1,21 @@
-import { ReactNode } from 'react';
-import { HtmlPolicy, sanitizeHtmlAttrs as sanitizeHtmlAttrsBase, tokenizeHtml as tokenizeHtmlBase } from 'stream-markdown-parser';
-import { CustomComponentMap } from '../customComponents';
+import { ComponentType, ReactNode } from 'react';
+import { HtmlPolicy, ParsedNode, sanitizeHtmlAttrs as sanitizeHtmlAttrsBase, tokenizeHtml as tokenizeHtmlBase } from 'stream-markdown-parser';
+import { RenderContext, RenderNodeFn } from '../types';
 export type { HtmlToken } from 'stream-markdown-parser';
+type HtmlReactComponentMap = Record<string, ComponentType<any>>;
+type HtmlReactPropComponentMap = Record<string, ComponentType<any>>;
+type HtmlReactNodeComponentMap = Record<string, ComponentType<any>>;
+interface HtmlToReactOptions {
+    ctx?: RenderContext;
+    keyPrefix?: string;
+    nodeComponents?: HtmlReactNodeComponentMap;
+    propComponents?: HtmlReactPropComponentMap;
+    renderNode?: RenderNodeFn;
+    sourceNode?: ParsedNode;
+}
 export declare function normalizeDomAttrs(attrs: Record<string, string>): Record<string, unknown>;
 export declare const tokenizeHtml: typeof tokenizeHtmlBase;
 export declare const sanitizeHtmlAttrs: typeof sanitizeHtmlAttrsBase;
-export declare function isCustomHtmlComponent(tagName: string, customComponents: CustomComponentMap): boolean;
-export declare function hasCustomHtmlComponents(content: string, customComponents: CustomComponentMap): boolean;
-export declare function parseHtmlToReactNodes(content: string, customComponents: CustomComponentMap, htmlPolicy?: HtmlPolicy): ReactNode[] | null;
+export declare function isCustomHtmlComponent(tagName: string, customComponents: HtmlReactComponentMap): boolean;
+export declare function hasCustomHtmlComponents(content: string, customComponents: HtmlReactComponentMap): boolean;
+export declare function parseHtmlToReactNodes(content: string, customComponents: HtmlReactComponentMap, htmlPolicy?: HtmlPolicy, options?: HtmlToReactOptions): ReactNode[] | null;