import { CodeBlockNode as CodeBlockNode$1, BaseNode, ParseOptions, MarkdownIt, HtmlPolicy, ParsedNode, ListItemNode as ListItemNode$1, TableRowNode, DefinitionItemNode } from 'stream-markdown-parser';
import React, { ComponentType } from 'react';
import { SmoothMarkdownStreamOptions } from 'markstream-core';
import * as react_jsx_runtime from 'react/jsx-runtime';

interface HtmlPreviewFrameProps {
    code: string;
    isDark?: boolean;
    htmlPreviewAllowScripts?: boolean;
    htmlPreviewSandbox?: string;
    onClose?: () => void;
    title?: string;
}

type CustomComponentDisplayMode = 'inline' | 'block';
type MarkstreamCustomComponent<P = never> = ComponentType<P> & {
    markstreamDisplay?: CustomComponentDisplayMode;
};
type CustomComponentMap = Record<string, MarkstreamCustomComponent>;
declare function setCustomComponents(id: string, mapping: CustomComponentMap): void;
declare function setCustomComponents(mapping: CustomComponentMap): void;
declare function getCustomNodeComponents(customId?: string): CustomComponentMap;
declare function removeCustomComponents(id: string): void;
declare function clearGlobalCustomComponents(): void;
declare function getCustomComponentDisplay(component: ComponentType<never> | null | undefined): CustomComponentDisplayMode | undefined;
declare function withMarkstreamComponentDisplay<T extends ComponentType<never>>(component: T, display: CustomComponentDisplayMode): T & {
    markstreamDisplay: CustomComponentDisplayMode;
};

interface CodeBlockMonacoThemeObject {
    name: string;
    base?: string;
    inherit?: boolean;
    colors?: Record<string, string>;
    rules?: Array<Record<string, unknown>>;
    [key: string]: unknown;
}
type CodeBlockMonacoTheme = string | CodeBlockMonacoThemeObject;
type CodeBlockMonacoLanguage = string | ((...args: unknown[]) => unknown);
interface CodeBlockDiffHideUnchangedRegionsOptions {
    enabled?: boolean;
    contextLineCount?: number;
    minimumLineCount?: number;
    revealLineCount?: number;
}
type CodeBlockDiffHideUnchangedRegions = boolean | CodeBlockDiffHideUnchangedRegionsOptions;
type CodeBlockDiffLineStyle = 'background' | 'bar';
type CodeBlockDiffAppearance = 'auto' | 'light' | 'dark';
type CodeBlockDiffUnchangedRegionStyle = 'line-info' | 'line-info-basic' | 'metadata' | 'simple';
type CodeBlockDiffHunkActionKind = 'revert' | 'stage';
type CodeBlockDiffHunkSide = 'upper' | 'lower';
interface CodeBlockDiffHunkActionContext {
    action: CodeBlockDiffHunkActionKind;
    side: CodeBlockDiffHunkSide;
    lineChange: unknown;
    originalModel: unknown;
    modifiedModel: unknown;
}
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;
    useInlineViewWhenSpaceIsLimited?: 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, unknown>;
    [key: string]: unknown;
}
interface CodeBlockNodeProps {
    node: CodeBlockNode$1;
    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;
    htmlPreviewAllowScripts?: boolean;
    htmlPreviewSandbox?: string;
    customId?: string;
}
interface ImageNodeProps {
    node: {
        type: 'image';
        src: string;
        alt: string;
        title: string | null;
        raw: string;
        loading?: boolean;
    };
    fallbackSrc?: string;
    lazy?: boolean;
    usePlaceholder?: boolean;
}
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;
}
interface PreCodeNodeProps {
    node: CodeBlockNode$1;
}
interface MermaidBlockNodeProps {
    node: CodeBlockNode$1;
    maxHeight?: string | null;
    estimatedPreviewHeightPx?: number;
    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;
}
interface CodeBlockPreviewPayload {
    node: CodeBlockNode$1;
    artifactType: 'text/html' | 'image/svg+xml';
    artifactTitle: string;
    id: string;
}
interface MermaidBlockEvent<TPayload = unknown> {
    payload?: TPayload;
    defaultPrevented: boolean;
    preventDefault: () => void;
    svgElement?: SVGElement | null;
    svgString?: string | null;
}
interface D2BlockNodeProps {
    node: CodeBlockNode$1;
    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;
}
interface MathBlockNodeProps {
    node: {
        type: 'math_block';
        content: string;
        raw: string;
        loading?: boolean;
    };
}
interface MathInlineNodeProps {
    node: {
        type: 'math_inline';
        content: string;
        raw: string;
        loading?: boolean;
        markup?: string;
    };
}
interface InfographicBlockNodeProps {
    node: CodeBlockNode$1;
    maxHeight?: string | null;
    estimatedPreviewHeightPx?: number;
    loading?: boolean;
    isDark?: boolean;
    showHeader?: boolean;
    showModeToggle?: boolean;
    showCopyButton?: boolean;
    showCollapseButton?: boolean;
    showExportButton?: boolean;
    showFullscreenButton?: boolean;
    showZoomControls?: boolean;
}

type NodeRendererCodeBlockProps = Partial<Omit<CodeBlockNodeProps, 'node'>> & Record<string, unknown>;
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[];
    htmlPolicy?: HtmlPolicy;
    viewportPriority?: boolean;
    codeBlockStream?: boolean;
    codeBlockDarkTheme?: CodeBlockMonacoTheme;
    codeBlockLightTheme?: CodeBlockMonacoTheme;
    codeBlockMonacoOptions?: CodeBlockMonacoOptions;
    renderCodeBlocksAsPre?: boolean;
    codeBlockMinWidth?: string | number;
    codeBlockMaxWidth?: string | number;
    codeBlockProps?: NodeRendererCodeBlockProps;
    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;
    /** Show a blinking typewriter cursor while streamed content grows. Default: false */
    typewriter?: boolean;
    /** Enable/disable non-code-node enter and streamed-text fade animations. Default: true */
    fade?: boolean;
    /**
     * Enable built-in smooth pacing for streaming `content` updates.
     * - `true`: force-enable smooth streaming (content mode only)
     * - `false`: force-disable smooth streaming
     * - `'auto'` (default): enable only when typewriter/incremental mode is active
     * Applies when rendering from `content` (not `nodes`).
     */
    smoothStreaming?: boolean | 'auto';
    /** Options forwarded to the built-in smooth streaming controller. Read once when the renderer is created. */
    smoothStreamingOptions?: SmoothMarkdownStreamOptions;
    batchRendering?: boolean;
    initialRenderBatchSize?: number;
    renderBatchSize?: number;
    renderBatchDelay?: number;
    renderBatchBudgetMs?: number;
    renderBatchIdleTimeoutMs?: number;
    deferNodesUntilVisible?: boolean;
    maxLiveNodes?: number;
    liveNodeBuffer?: number;
    onCopy?: (code: string) => void;
    onHandleArtifactClick?: (payload: CodeBlockPreviewPayload) => void;
    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
    onMouseOver?: (event: React.MouseEvent<HTMLElement>) => void;
    onMouseOut?: (event: React.MouseEvent<HTMLElement>) => void;
}
interface RenderContext {
    customId?: string;
    isDark?: boolean;
    indexKey?: string;
    typewriter?: boolean;
    /** Enable/disable fade animations. Default: true */
    fade?: boolean;
    textStreamState?: Map<string, string>;
    streamRenderVersion?: number;
    customComponents?: CustomComponentMap;
    customHtmlTags?: readonly string[];
    htmlPolicy?: HtmlPolicy;
    codeBlockProps?: NodeRendererCodeBlockProps;
    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: CodeBlockPreviewPayload) => void;
    };
}
type RenderNodeFn = (node: ParsedNode, key: React.Key, ctx: RenderContext) => React.ReactNode;

interface NodeComponentProps<TNode = unknown> {
    node: TNode;
    ctx?: RenderContext;
    renderNode?: RenderNodeFn;
    indexKey?: React.Key;
    customId?: string;
    isDark?: boolean;
    typewriter?: boolean;
    /** Enable/disable fade animations. Default: true */
    fade?: boolean;
    children?: React.ReactNode;
}

interface LinkNodeStyleProps {
    showTooltip?: boolean;
    color?: string;
    underlineHeight?: number;
    underlineBottom?: number | string;
    animationDuration?: number;
    animationOpacity?: number;
    animationTiming?: string;
    animationIteration?: string | number;
}

interface ListItemNodeData {
    type: 'list_item';
    children?: ParsedNode[];
    raw?: string;
}
interface ListItemNodeProps extends NodeComponentProps<ListItemNodeData> {
    value?: number;
}

interface MarkdownCodeBlockNodeProps {
    node: {
        type: 'code_block';
        language: string;
        code: string;
        raw: string;
        diff?: boolean;
        originalCode?: string;
        updatedCode?: string;
    };
    loading?: boolean;
    stream?: boolean;
    darkTheme?: string;
    lightTheme?: string;
    isDark?: boolean;
    isShowPreview?: boolean;
    enableFontSizeControl?: boolean;
    minWidth?: string | number;
    maxWidth?: string | number;
    themes?: string[];
    showHeader?: boolean;
    showCopyButton?: boolean;
    showExpandButton?: boolean;
    showPreviewButton?: boolean;
    showCollapseButton?: boolean;
    showFontSizeButtons?: boolean;
    showTooltips?: boolean;
    onCopy?: (code: string) => void;
    onPreviewCode?: (payload: {
        type: string;
        content: string;
        title: string;
    }) => void;
}

type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
interface TooltipProps {
    visible: boolean;
    anchorEl: HTMLElement | null;
    content: string;
    placement?: TooltipPlacement;
    offset?: number;
    originX?: number | null;
    originY?: number | null;
    id?: string | null;
    isDark?: boolean | null;
}

declare function TextNode(props: NodeComponentProps<{
    type: 'text';
    content: string;
    center?: boolean;
}>): react_jsx_runtime.JSX.Element;
declare function ParagraphNode(props: NodeComponentProps<{
    type: 'paragraph';
    children?: ParsedNode[];
}>): react_jsx_runtime.JSX.Element;
declare function HeadingNode(props: NodeComponentProps<{
    type: 'heading';
    level?: number;
    children?: ParsedNode[];
    attrs?: Record<string, string | boolean>;
}>): react_jsx_runtime.JSX.Element;
declare function BlockquoteNode(props: NodeComponentProps<{
    type: 'blockquote';
    children?: ParsedNode[];
}>): react_jsx_runtime.JSX.Element;
declare function ListItemNode(props: NodeComponentProps<{
    type: 'list_item';
    children?: ParsedNode[];
}> & {
    value?: number;
}): react_jsx_runtime.JSX.Element;
declare function ListNode(props: NodeComponentProps<{
    type: 'list';
    ordered?: boolean;
    start?: number;
    items?: ListItemNode$1[];
}>): react_jsx_runtime.JSX.Element;
declare function TableNode(props: NodeComponentProps<{
    type: 'table';
    header?: TableRowNode;
    rows?: TableRowNode[];
    loading?: boolean;
}>): react_jsx_runtime.JSX.Element;
declare function DefinitionListNode(props: NodeComponentProps<{
    type: 'definition_list';
    items?: DefinitionItemNode[];
}>): react_jsx_runtime.JSX.Element;
declare function FootnoteNode(props: NodeComponentProps<{
    type: 'footnote';
    id: string;
    children?: ParsedNode[];
}>): react_jsx_runtime.JSX.Element;
declare function FootnoteReferenceNode(props: NodeComponentProps<{
    type: 'footnote_reference';
    id: string;
}>): react_jsx_runtime.JSX.Element;
declare function FootnoteAnchorNode(props: NodeComponentProps<{
    type: 'footnote_anchor';
    id: string;
}>): react_jsx_runtime.JSX.Element;
declare function AdmonitionNode(props: NodeComponentProps<{
    type: 'admonition';
    kind?: string;
    title?: string;
    children?: ParsedNode[];
    collapsible?: boolean;
    open?: boolean;
}>): react_jsx_runtime.JSX.Element;
declare function CheckboxNode(props: NodeComponentProps<{
    type: 'checkbox' | 'checkbox_input';
    checked?: boolean;
}>): react_jsx_runtime.JSX.Element;
declare function EmojiNode(props: NodeComponentProps<{
    type: 'emoji';
    name: string;
    markup?: string;
}>): react_jsx_runtime.JSX.Element;
declare function StrongNode(props: NodeComponentProps<{
    type: 'strong';
    children?: ParsedNode[];
}>): react_jsx_runtime.JSX.Element;
declare function EmphasisNode(props: NodeComponentProps<{
    type: 'emphasis';
    children?: ParsedNode[];
}>): react_jsx_runtime.JSX.Element;
declare function StrikethroughNode(props: NodeComponentProps<{
    type: 'strikethrough';
    children?: ParsedNode[];
}>): react_jsx_runtime.JSX.Element;
declare function HighlightNode(props: NodeComponentProps<{
    type: 'highlight';
    children?: ParsedNode[];
}>): react_jsx_runtime.JSX.Element;
declare function InsertNode(props: NodeComponentProps<{
    type: 'insert';
    children?: ParsedNode[];
}>): react_jsx_runtime.JSX.Element;
declare function SubscriptNode(props: NodeComponentProps<{
    type: 'subscript';
    children?: ParsedNode[];
}>): react_jsx_runtime.JSX.Element;
declare function SuperscriptNode(props: NodeComponentProps<{
    type: 'superscript';
    children?: ParsedNode[];
}>): react_jsx_runtime.JSX.Element;
declare function HardBreakNode(_props: NodeComponentProps<{
    type: 'hardbreak';
}>): react_jsx_runtime.JSX.Element;
declare function ThematicBreakNode(_props?: NodeComponentProps<{
    type: 'thematic_break';
}>): react_jsx_runtime.JSX.Element;
declare function InlineCodeNode(props: NodeComponentProps<{
    type: 'inline_code';
    code: string;
}>): react_jsx_runtime.JSX.Element;
declare function LinkNode(props: NodeComponentProps<LinkNodeProps['node']> & {
    showTooltip?: boolean;
    color?: string;
    underlineHeight?: number;
    underlineBottom?: number | string;
    animationDuration?: number;
    animationOpacity?: number;
    animationTiming?: string;
    animationIteration?: string | number;
}): react_jsx_runtime.JSX.Element;
declare function ImageNode(rawProps: ImageNodeProps): react_jsx_runtime.JSX.Element;
declare function PreCodeNode({ node }: PreCodeNodeProps): react_jsx_runtime.JSX.Element;
declare function CodeBlockNode(props: CodeBlockNodeProps): react_jsx_runtime.JSX.Element;
declare function MarkdownCodeBlockNode(props: MarkdownCodeBlockNodeProps): react_jsx_runtime.JSX.Element;
declare function MermaidBlockNode(props: MermaidBlockNodeProps): react_jsx_runtime.JSX.Element;
declare function D2BlockNode(props: D2BlockNodeProps): react_jsx_runtime.JSX.Element;
declare function InfographicBlockNode(props: InfographicBlockNodeProps): react_jsx_runtime.JSX.Element;
declare function MathBlockNode({ node }: MathBlockNodeProps): react_jsx_runtime.JSX.Element;
declare function MathInlineNode({ node }: MathInlineNodeProps): react_jsx_runtime.JSX.Element;
declare function ReferenceNode(props: NodeComponentProps<{
    type: 'reference';
    id: string;
}> & {
    messageId?: string;
    threadId?: string;
}): react_jsx_runtime.JSX.Element;
declare function HtmlBlockNode(props: NodeComponentProps<{
    type: 'html_block';
    content?: string;
    tag?: string;
    attrs?: [string, string | null][] | null;
    children?: ParsedNode[];
}>): react_jsx_runtime.JSX.Element;
declare function HtmlInlineNode(props: NodeComponentProps<{
    type: 'html_inline';
    content?: string;
}>): react_jsx_runtime.JSX.Element;
declare function VmrContainerNode(props: NodeComponentProps<{
    type: 'vmr_container';
    name: string;
    attrs?: Record<string, string> | [string, string | null][] | null;
    children?: ParsedNode[];
}>): react_jsx_runtime.JSX.Element;
declare function Tooltip(_props: TooltipProps): any;
declare function HtmlPreviewFrame(_props: HtmlPreviewFrameProps): any;
declare function FallbackComponent(props: NodeComponentProps<{
    type: string;
}>): react_jsx_runtime.JSX.Element;
declare function renderNode(node: ParsedNode, key: React.Key, ctx: RenderContext): react_jsx_runtime.JSX.Element;
declare function NodeRenderer(props: NodeRendererProps): react_jsx_runtime.JSX.Element;

export { AdmonitionNode, BlockquoteNode, CheckboxNode, CodeBlockDiffAppearance, CodeBlockDiffHideUnchangedRegions, CodeBlockDiffHideUnchangedRegionsOptions, CodeBlockDiffHunkActionContext, CodeBlockDiffHunkActionKind, CodeBlockDiffHunkSide, CodeBlockDiffLineStyle, CodeBlockDiffUnchangedRegionStyle, CodeBlockMonacoLanguage, CodeBlockMonacoOptions, CodeBlockMonacoTheme, CodeBlockMonacoThemeObject, CodeBlockNode, CodeBlockNodeProps, CodeBlockPreviewPayload, CustomComponentDisplayMode, D2BlockNode, D2BlockNodeProps, DefinitionListNode, EmojiNode, EmphasisNode, FallbackComponent, FootnoteAnchorNode, FootnoteNode, FootnoteReferenceNode, HardBreakNode, HeadingNode, HighlightNode, HtmlBlockNode, HtmlInlineNode, HtmlPreviewFrame, HtmlPreviewFrameProps, ImageNode, ImageNodeProps, InfographicBlockNode, InfographicBlockNodeProps, InlineCodeNode, InsertNode, LinkNode, LinkNodeProps, LinkNodeStyleProps, ListItemNode, ListItemNodeProps, ListNode, MarkdownCodeBlockNode, MarkdownCodeBlockNodeProps, MarkstreamCustomComponent, MathBlockNode, MathBlockNodeProps, MathInlineNode, MathInlineNodeProps, MermaidBlockEvent, MermaidBlockNode, MermaidBlockNodeProps, NodeComponentProps, NodeRenderer, NodeRendererCodeBlockProps, NodeRendererProps, ParagraphNode, PreCodeNode, PreCodeNodeProps, CodeBlockNode as ReactCodeBlockNode, ReferenceNode, StrikethroughNode, StrongNode, SubscriptNode, SuperscriptNode, TableNode, TextNode, ThematicBreakNode, Tooltip, TooltipPlacement, TooltipProps, VmrContainerNode, clearGlobalCustomComponents, NodeRenderer as default, getCustomComponentDisplay, getCustomNodeComponents, removeCustomComponents, renderNode, setCustomComponents, withMarkstreamComponentDisplay };