markstream-svelte 0.0.1-beta.1

package/dist/components/NodeOutlet.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">
+  import type { SvelteRenderableNode, SvelteRenderContext } from './shared/node-helpers'
+  import { STANDARD_HTML_TAGS } from 'stream-markdown-parser'
+  import { getCustomNodeComponents } from '../customComponents'
+  import AdmonitionNode from './AdmonitionNode.svelte'
+  import BlockquoteNode from './BlockquoteNode.svelte'
+  import CheckboxNode from './CheckboxNode.svelte'
+  import CodeBlockNode from './CodeBlockNode.svelte'
+  import D2BlockNode from './D2BlockNode.svelte'
+  import DefinitionListNode from './DefinitionListNode.svelte'
+  import EmojiNode from './EmojiNode.svelte'
+  import EmphasisNode from './EmphasisNode.svelte'
+  import FallbackComponent from './FallbackComponent.svelte'
+  import FootnoteAnchorNode from './FootnoteAnchorNode.svelte'
+  import FootnoteNode from './FootnoteNode.svelte'
+  import FootnoteReferenceNode from './FootnoteReferenceNode.svelte'
+  import HardBreakNode from './HardBreakNode.svelte'
+  import HeadingNode from './HeadingNode.svelte'
+  import HighlightNode from './HighlightNode.svelte'
+  import HtmlBlockNode from './HtmlBlockNode.svelte'
+  import HtmlInlineNode from './HtmlInlineNode.svelte'
+  import ImageNode from './ImageNode.svelte'
+  import InfographicBlockNode from './InfographicBlockNode.svelte'
+  import InlineCodeNode from './InlineCodeNode.svelte'
+  import InsertNode from './InsertNode.svelte'
+  import LinkNode from './LinkNode.svelte'
+  import ListItemNode from './ListItemNode.svelte'
+  import ListNode from './ListNode.svelte'
+  import MathBlockNode from './MathBlockNode.svelte'
+  import MathInlineNode from './MathInlineNode.svelte'
+  import MermaidBlockNode from './MermaidBlockNode.svelte'
+  import ParagraphNode from './ParagraphNode.svelte'
+  import PreCodeNode from './PreCodeNode.svelte'
+  import ReferenceNode from './ReferenceNode.svelte'
+  import StrikethroughNode from './StrikethroughNode.svelte'
+  import StrongNode from './StrongNode.svelte'
+  import SubscriptNode from './SubscriptNode.svelte'
+  import SuperscriptNode from './SuperscriptNode.svelte'
+  import TableNode from './TableNode.svelte'
+  import TextNode from './TextNode.svelte'
+  import ThematicBreakNode from './ThematicBreakNode.svelte'
+  import VmrContainerNode from './VmrContainerNode.svelte'
+  import { hasCompleteHtmlTagContent } from './shared/node-helpers'
+  import {
+    coerceBuiltinHtmlNode,
+    coerceCustomHtmlNode,
+    resolveHtmlTag,
+    resolveNodeOutletCodeMode,
+    resolveNodeOutletCustomComponent,
+    resolveNodeOutletCustomInputs,
+  } from './shared/node-outlet-helpers'
+
+  export let node: SvelteRenderableNode
+  export let context: SvelteRenderContext | undefined = undefined
+  export let indexKey: string | number | undefined = undefined
+
+  $: resolvedType = String((node as any)?.type || '')
+  $: customComponentMap = context?.customComponents || getCustomNodeComponents(context?.customId)
+  $: CustomComponent = resolveNodeOutletCustomComponent(node, context, customComponentMap)
+  $: customNode = coerceCustomHtmlNode(node)
+  $: customInputs = resolveNodeOutletCustomInputs(node, context) || {}
+  $: codeMode = resolveNodeOutletCodeMode(node, context)
+  $: htmlTag = resolveHtmlTag(node)
+  $: shouldEscapeHtmlTag = resolveShouldEscapeHtmlTag()
+  $: htmlRenderNode = coerceBuiltinHtmlNode(node, resolvedType)
+  $: codeBlockInstanceKey = `${String(indexKey ?? 'code-block')}:${String((node as any)?.language ?? '')}:${(node as any)?.diff ? 'diff' : 'code'}`
+  $: escapedTextNode = {
+    type: 'text',
+    content: String((node as any)?.content ?? (node as any)?.raw ?? ''),
+    raw: String((node as any)?.content ?? (node as any)?.raw ?? ''),
+  } as SvelteRenderableNode
+
+  function resolveShouldEscapeHtmlTag() {
+    if (resolvedType !== 'html_block' && resolvedType !== 'html_inline')
+      return false
+    if (context?.htmlPolicy === 'escape')
+      return true
+    if (!htmlTag)
+      return false
+    const customHtmlTags = context?.customHtmlTags ?? []
+    const isWhitelisted = customHtmlTags.some(t => String(t).toLowerCase() === htmlTag)
+    if (isWhitelisted)
+      return false
+    if (STANDARD_HTML_TAGS.has(htmlTag))
+      return false
+    return !hasCompleteHtmlTagContent((node as any)?.content ?? (node as any)?.raw, htmlTag)
+  }
+</script>
+
+{#if CustomComponent}
+  <svelte:component
+    this={CustomComponent}
+    node={customNode}
+    context={context}
+    ctx={context}
+    customId={context?.customId}
+    isDark={context?.isDark}
+    indexKey={indexKey}
+    typewriter={context?.typewriter}
+    {...customInputs}
+  />
+{:else if resolvedType === 'text' || resolvedType === 'text_special'}
+  <TextNode {node} {context} {indexKey} typewriter={context?.typewriter} />
+{:else if resolvedType === 'paragraph'}
+  <ParagraphNode {node} {context} {indexKey} />
+{:else if resolvedType === 'heading'}
+  <HeadingNode {node} {context} {indexKey} />
+{:else if resolvedType === 'blockquote'}
+  <BlockquoteNode {node} {context} {indexKey} />
+{:else if resolvedType === 'list'}
+  <ListNode {node} {context} {indexKey} />
+{:else if resolvedType === 'list_item'}
+  <ListItemNode {node} {context} {indexKey} />
+{:else if resolvedType === 'table'}
+  <TableNode {node} {context} />
+{:else if resolvedType === 'definition_list'}
+  <DefinitionListNode {node} {context} />
+{:else if resolvedType === 'footnote'}
+  <FootnoteNode {node} {context} />
+{:else if resolvedType === 'footnote_reference'}
+  <FootnoteReferenceNode {node} />
+{:else if resolvedType === 'footnote_anchor'}
+  <FootnoteAnchorNode {node} />
+{:else if resolvedType === 'admonition'}
+  <AdmonitionNode {node} {context} />
+{:else if resolvedType === 'hardbreak'}
+  <HardBreakNode />
+{:else if resolvedType === 'link'}
+  <LinkNode {node} {context} {indexKey} showTooltip={typeof context?.showTooltips === 'boolean' ? context?.showTooltips : undefined} />
+{:else if resolvedType === 'image'}
+  <ImageNode {node} />
+{:else if resolvedType === 'inline_code'}
+  <InlineCodeNode {node} />
+{:else if resolvedType === 'strong'}
+  <StrongNode {node} {context} {indexKey} />
+{:else if resolvedType === 'emphasis'}
+  <EmphasisNode {node} {context} {indexKey} />
+{:else if resolvedType === 'strikethrough'}
+  <StrikethroughNode {node} {context} {indexKey} />
+{:else if resolvedType === 'highlight'}
+  <HighlightNode {node} {context} {indexKey} />
+{:else if resolvedType === 'insert'}
+  <InsertNode {node} {context} {indexKey} />
+{:else if resolvedType === 'subscript'}
+  <SubscriptNode {node} {context} {indexKey} />
+{:else if resolvedType === 'superscript'}
+  <SuperscriptNode {node} {context} {indexKey} />
+{:else if resolvedType === 'checkbox' || resolvedType === 'checkbox_input'}
+  <CheckboxNode {node} />
+{:else if resolvedType === 'emoji'}
+  <EmojiNode {node} />
+{:else if resolvedType === 'reference'}
+  <ReferenceNode {node} {context} />
+{:else if resolvedType === 'html_block'}
+  {#if shouldEscapeHtmlTag}
+    <TextNode node={escapedTextNode} {context} {indexKey} />
+  {:else}
+    <HtmlBlockNode node={htmlRenderNode} {context} />
+  {/if}
+{:else if resolvedType === 'html_inline'}
+  {#if shouldEscapeHtmlTag}
+    <TextNode node={escapedTextNode} {context} {indexKey} />
+  {:else}
+    <HtmlInlineNode node={htmlRenderNode} {context} />
+  {/if}
+{:else if resolvedType === 'vmr_container'}
+  <VmrContainerNode {node} {context} />
+{:else if resolvedType === 'thematic_break'}
+  <ThematicBreakNode />
+{:else if resolvedType === 'math_inline'}
+  <MathInlineNode {node} />
+{:else if resolvedType === 'math_block'}
+  <MathBlockNode {node} />
+{:else if resolvedType === 'code_block'}
+  {#if codeMode === 'mermaid'}
+    <MermaidBlockNode {node} {context} {...customInputs} />
+  {:else if codeMode === 'd2'}
+    <D2BlockNode {node} {context} {...customInputs} />
+  {:else if codeMode === 'infographic'}
+    <InfographicBlockNode {node} {context} {...customInputs} />
+  {:else if codeMode === 'pre'}
+    <PreCodeNode {node} />
+  {:else}
+    {#key codeBlockInstanceKey}
+      <CodeBlockNode {node} {context} {...customInputs} />
+    {/key}
+  {/if}
+{:else if resolvedType === 'label_open' || resolvedType === 'label_close'}
+  <span hidden></span>
+{:else}
+  <FallbackComponent {node} {context} />
+{/if}

package/dist/components/NodeOutlet.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { SvelteRenderableNode, SvelteRenderContext } from './shared/node-helpers';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const NodeOutlet: $$__sveltets_2_IsomorphicComponent<{
+    node: SvelteRenderableNode;
+    context?: SvelteRenderContext | undefined;
+    indexKey?: string | number | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type NodeOutlet = InstanceType<typeof NodeOutlet>;
+export default NodeOutlet;
+//# sourceMappingURL=NodeOutlet.svelte.d.ts.map

package/dist/components/NodeOutlet.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeOutlet.svelte.d.ts","sourceRoot":"","sources":["../../src/components/NodeOutlet.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAqOtF,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,UAAU;UAV+D,oBAAoB;cAAY,mBAAmB,GAAG,SAAS;eAAa,MAAM,GAAG,MAAM,GAAG,SAAS;;;kBAUvF,CAAC;AAC9E,KAAK,UAAU,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC;AACpD,eAAe,UAAU,CAAC"}

package/dist/components/NodeRenderer.svelte

@@ -0,0 +1,349 @@
+<script lang="ts">
+  import type {
+    NodeRendererEvents,
+    NodeRendererProps,
+    SvelteRenderableNode,
+    SvelteRenderContext,
+  } from './shared/node-helpers'
+  import { afterUpdate, onDestroy, onMount, tick } from 'svelte'
+  import { getCustomNodeComponents, subscribeCustomComponents } from '../customComponents'
+  import { disposeRenderedHtmlEnhancements, enhanceRenderedHtml } from '../enhanceRenderedHtml'
+  import NodeOutlet from './NodeOutlet.svelte'
+  import { buildRenderContext, resolveParsedNodes } from './shared/node-helpers'
+
+  export let content: NodeRendererProps['content'] = ''
+  export let nodes: NodeRendererProps['nodes'] = null
+  export let final: NodeRendererProps['final'] = undefined
+  export let parseOptions: NodeRendererProps['parseOptions'] = undefined
+  export let customMarkdownIt: NodeRendererProps['customMarkdownIt'] = undefined
+  export let debugPerformance = false
+  export let customHtmlTags: NodeRendererProps['customHtmlTags'] = undefined
+  export let htmlPolicy: NodeRendererProps['htmlPolicy'] = 'safe'
+  export let viewportPriority: NodeRendererProps['viewportPriority'] = true
+  export let codeBlockStream = true
+  export let codeBlockDarkTheme: NodeRendererProps['codeBlockDarkTheme'] = undefined
+  export let codeBlockLightTheme: NodeRendererProps['codeBlockLightTheme'] = undefined
+  export let codeBlockMonacoOptions: NodeRendererProps['codeBlockMonacoOptions'] = undefined
+  export let renderCodeBlocksAsPre = false
+  export let codeBlockMinWidth: NodeRendererProps['codeBlockMinWidth'] = undefined
+  export let codeBlockMaxWidth: NodeRendererProps['codeBlockMaxWidth'] = undefined
+  export let codeBlockProps: NodeRendererProps['codeBlockProps'] = undefined
+  export let mermaidProps: NodeRendererProps['mermaidProps'] = undefined
+  export let d2Props: NodeRendererProps['d2Props'] = undefined
+  export let infographicProps: NodeRendererProps['infographicProps'] = undefined
+  export let customComponents: NodeRendererProps['customComponents'] = undefined
+  export let showTooltips = true
+  export let themes: NodeRendererProps['themes'] = undefined
+  export let isDark = false
+  export let customId: NodeRendererProps['customId'] = undefined
+  export let indexKey: NodeRendererProps['indexKey'] = undefined
+  export let typewriter = true
+  export let batchRendering = true
+  export let initialRenderBatchSize = 40
+  export let renderBatchSize = 80
+  export let renderBatchDelay = 16
+  export let renderBatchBudgetMs = 6
+  export let renderBatchIdleTimeoutMs = 120
+  export let deferNodesUntilVisible = true
+  export let maxLiveNodes = 320
+  export let liveNodeBuffer = 60
+  export let allowHtml = true
+  export let className = ''
+  export let onCopy: NodeRendererEvents['onCopy'] = undefined
+  export let onHandleArtifactClick: NodeRendererEvents['onHandleArtifactClick'] = undefined
+  export let onClick: ((event: MouseEvent) => void) | undefined = undefined
+  export let onMouseover: ((event: MouseEvent) => void) | undefined = undefined
+  export let onMouseout: ((event: MouseEvent) => void) | undefined = undefined
+
+  let rootEl: HTMLDivElement | null = null
+  let parsedNodes: SvelteRenderableNode[] = []
+  let renderContext: SvelteRenderContext = { events: {} }
+  let customComponentsRevision = 0
+  let streamRenderVersion = 0
+  let previousContent: typeof content = undefined
+  let previousNodes: typeof nodes = undefined
+  let enhancementToken = 0
+  let enhancementHandle: { dispose: () => void } | null = null
+  let renderedNodeCount = 0
+  let renderBatchTimer: ReturnType<typeof setTimeout> | null = null
+  let renderBatchFrame: number | null = null
+  let renderBatchIdle: number | null = null
+  let renderBatchToken = 0
+  const textStreamState = new Map<string, string>()
+
+  $: props = {
+    content,
+    nodes,
+    final,
+    parseOptions,
+    customMarkdownIt,
+    debugPerformance,
+    customHtmlTags,
+    htmlPolicy,
+    viewportPriority,
+    codeBlockStream,
+    codeBlockDarkTheme,
+    codeBlockLightTheme,
+    codeBlockMonacoOptions,
+    renderCodeBlocksAsPre,
+    codeBlockMinWidth,
+    codeBlockMaxWidth,
+    codeBlockProps,
+    mermaidProps,
+    d2Props,
+    infographicProps,
+    customComponents,
+    showTooltips,
+    themes,
+    isDark,
+    customId,
+    indexKey,
+    typewriter,
+    batchRendering,
+    initialRenderBatchSize,
+    renderBatchSize,
+    renderBatchDelay,
+    renderBatchBudgetMs,
+    renderBatchIdleTimeoutMs,
+    deferNodesUntilVisible,
+    maxLiveNodes,
+    liveNodeBuffer,
+    allowHtml,
+  } satisfies NodeRendererProps
+
+  $: {
+    if (previousContent !== content || previousNodes !== nodes) {
+      streamRenderVersion += 1
+      previousContent = content
+      previousNodes = nodes
+    }
+  }
+
+  $: {
+    const start = debugPerformance && typeof performance !== 'undefined' ? performance.now() : 0
+    parsedNodes = resolveParsedNodes(props)
+    if (debugPerformance && typeof console !== 'undefined' && typeof performance !== 'undefined') {
+      console.info('[markstream-svelte][perf] parse(sync)', {
+        ms: Math.round(performance.now() - start),
+        nodes: parsedNodes.length,
+        contentLength: content?.length ?? 0,
+      })
+    }
+  }
+
+  $: {
+    void customComponentsRevision
+    const scopedCustomComponents = getCustomNodeComponents(customId)
+    const mergedCustomComponents = customComponents
+      ? { ...scopedCustomComponents, ...customComponents }
+      : scopedCustomComponents
+    renderContext = buildRenderContext(
+      {
+        ...props,
+        customComponents: mergedCustomComponents,
+      },
+      {
+        onCopy,
+        onHandleArtifactClick,
+      },
+      textStreamState,
+      streamRenderVersion,
+    )
+  }
+
+  $: {
+    void parsedNodes.length
+    void batchRendering
+    void initialRenderBatchSize
+    void renderBatchSize
+    void renderBatchDelay
+    void renderBatchBudgetMs
+    void renderBatchIdleTimeoutMs
+    void final
+    void renderedNodeCount
+    syncRenderedNodeWindow()
+  }
+  $: renderedNodes = parsedNodes.slice(0, Math.min(renderedNodeCount, parsedNodes.length))
+
+  onMount(() => {
+    const unsubscribe = subscribeCustomComponents(() => {
+      customComponentsRevision += 1
+    })
+    scheduleEnhancement()
+    return unsubscribe
+  })
+
+  afterUpdate(() => {
+    scheduleEnhancement()
+  })
+
+  onDestroy(() => {
+    enhancementToken += 1
+    cancelRenderBatch()
+    enhancementHandle?.dispose()
+    enhancementHandle = null
+    disposeRenderedHtmlEnhancements(rootEl)
+  })
+
+  function toPositiveInteger(value: unknown, fallback: number) {
+    const numeric = Number(value)
+    return Number.isFinite(numeric) && numeric > 0 ? Math.floor(numeric) : fallback
+  }
+
+  function syncRenderedNodeWindow() {
+    const total = parsedNodes.length
+    const initialCount = Math.min(total, toPositiveInteger(initialRenderBatchSize, 40))
+    const shouldBatch = final !== false && batchRendering !== false && total > initialCount
+
+    if (!shouldBatch) {
+      cancelRenderBatch()
+      if (renderedNodeCount !== total)
+        renderedNodeCount = total
+      return
+    }
+
+    if (renderedNodeCount <= 0 || renderedNodeCount > total)
+      renderedNodeCount = initialCount
+    else if (renderedNodeCount < initialCount)
+      renderedNodeCount = initialCount
+
+    scheduleRenderBatch()
+  }
+
+  function scheduleRenderBatch() {
+    if (renderedNodeCount >= parsedNodes.length || renderBatchTimer || renderBatchFrame != null || renderBatchIdle != null)
+      return
+    const token = ++renderBatchToken
+    const delay = Math.max(0, Number(renderBatchDelay) || 0)
+    const run = (deadline?: { timeRemaining?: () => number }) => {
+      renderBatchTimer = null
+      renderBatchFrame = null
+      renderBatchIdle = null
+      if (token !== renderBatchToken)
+        return
+      const batchSize = toPositiveInteger(renderBatchSize, 80)
+      const budget = Math.max(2, toPositiveInteger(renderBatchBudgetMs, 6))
+      let nextCount = renderedNodeCount
+      do {
+        nextCount = Math.min(parsedNodes.length, nextCount + batchSize)
+        if (!deadline)
+          break
+        const remaining = typeof deadline.timeRemaining === 'function' ? deadline.timeRemaining() : 0
+        if (remaining <= budget * 0.5)
+          break
+      } while (nextCount < parsedNodes.length)
+      if (nextCount !== renderedNodeCount)
+        renderedNodeCount = nextCount
+    }
+
+    const requestIdle = typeof window !== 'undefined' ? (window as any).requestIdleCallback as ((callback: (deadline: { timeRemaining?: () => number }) => void, options?: { timeout?: number }) => number) | undefined : undefined
+    if (requestIdle) {
+      renderBatchIdle = requestIdle(run, { timeout: Math.max(0, Number(renderBatchIdleTimeoutMs) || 120) })
+      return
+    }
+
+    if (typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function') {
+      renderBatchFrame = window.requestAnimationFrame(() => {
+        renderBatchFrame = null
+        if (delay > 0)
+          renderBatchTimer = setTimeout(run, delay)
+        else
+          run()
+      })
+      return
+    }
+
+    renderBatchTimer = setTimeout(run, delay)
+  }
+
+  function cancelRenderBatch() {
+    renderBatchToken += 1
+    if (renderBatchTimer) {
+      clearTimeout(renderBatchTimer)
+      renderBatchTimer = null
+    }
+    if (renderBatchFrame != null && typeof window !== 'undefined') {
+      window.cancelAnimationFrame(renderBatchFrame)
+      renderBatchFrame = null
+    }
+    const cancelIdle = typeof window !== 'undefined' ? (window as any).cancelIdleCallback as ((id: number) => void) | undefined : undefined
+    if (renderBatchIdle != null) {
+      cancelIdle?.(renderBatchIdle)
+      renderBatchIdle = null
+    }
+  }
+
+  async function scheduleEnhancement() {
+    if (!rootEl || typeof window === 'undefined')
+      return
+    const enhancementFinal = typeof final === 'boolean' ? final : !hasLoadingNodes(parsedNodes)
+    if (!enhancementFinal) {
+      enhancementToken += 1
+      enhancementHandle?.dispose()
+      enhancementHandle = null
+      return
+    }
+    const token = ++enhancementToken
+    await tick()
+    if (token !== enhancementToken || !rootEl)
+      return
+    enhancementHandle?.dispose()
+    enhancementHandle = await enhanceRenderedHtml(rootEl, {
+      final: enhancementFinal,
+      isDark,
+      renderCodeBlocksAsPre,
+      monacoOptions: codeBlockMonacoOptions,
+      codeBlockProps,
+      mermaidProps,
+      d2Props,
+      infographicProps,
+      showTooltips,
+      onCopy,
+      isCancelled: () => token !== enhancementToken,
+    })
+  }
+
+  function hasLoadingNodes(nodes: SvelteRenderableNode[]): boolean {
+    for (const node of nodes) {
+      if ((node as any)?.loading === true)
+        return true
+      if (hasLoadingNodes(((node as any)?.children || []) as SvelteRenderableNode[]))
+        return true
+      if (hasLoadingNodes(((node as any)?.items || []) as SvelteRenderableNode[]))
+        return true
+    }
+    return false
+  }
+
+  function handleMouseover(event: MouseEvent) {
+    const target = event.target as HTMLElement | null
+    if (target?.closest('[data-node-index]'))
+      onMouseover?.(event)
+  }
+
+  function handleMouseout(event: MouseEvent) {
+    const target = event.target as HTMLElement | null
+    if (target?.closest('[data-node-index]'))
+      onMouseout?.(event)
+  }
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_mouse_events_have_key_events -->
+<div
+  bind:this={rootEl}
+  class={'markstream-svelte markdown-renderer' + (isDark ? ' dark' : '') + (className ? ' ' + className : '')}
+  data-custom-id={customId}
+  onclick={onClick}
+  onmouseover={handleMouseover}
+  onmouseout={handleMouseout}
+>
+  {#each renderedNodes as node, index ((indexKey != null ? String(indexKey) : 'markdown-renderer') + '-' + index)}
+    <div class="node-slot" data-node-index={index} data-node-type={(node as any)?.type}>
+      <div class:typewriter-node={typewriter !== false && String((node as any)?.type || '') !== 'code_block'} class="node-content" data-node-index={index}>
+        <NodeOutlet node={node} context={renderContext} indexKey={(indexKey != null ? String(indexKey) : 'markdown-renderer') + '-' + index} />
+      </div>
+    </div>
+  {/each}
+</div>

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

@@ -0,0 +1,64 @@
+import type { NodeRendererEvents, NodeRendererProps } from './shared/node-helpers';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const NodeRenderer: $$__sveltets_2_IsomorphicComponent<{
+    content?: NodeRendererProps["content"];
+    nodes?: NodeRendererProps["nodes"];
+    final?: NodeRendererProps["final"];
+    parseOptions?: NodeRendererProps["parseOptions"];
+    customMarkdownIt?: NodeRendererProps["customMarkdownIt"];
+    debugPerformance?: boolean;
+    customHtmlTags?: NodeRendererProps["customHtmlTags"];
+    htmlPolicy?: NodeRendererProps["htmlPolicy"];
+    viewportPriority?: NodeRendererProps["viewportPriority"];
+    codeBlockStream?: boolean;
+    codeBlockDarkTheme?: NodeRendererProps["codeBlockDarkTheme"];
+    codeBlockLightTheme?: NodeRendererProps["codeBlockLightTheme"];
+    codeBlockMonacoOptions?: NodeRendererProps["codeBlockMonacoOptions"];
+    renderCodeBlocksAsPre?: boolean;
+    codeBlockMinWidth?: NodeRendererProps["codeBlockMinWidth"];
+    codeBlockMaxWidth?: NodeRendererProps["codeBlockMaxWidth"];
+    codeBlockProps?: NodeRendererProps["codeBlockProps"];
+    mermaidProps?: NodeRendererProps["mermaidProps"];
+    d2Props?: NodeRendererProps["d2Props"];
+    infographicProps?: NodeRendererProps["infographicProps"];
+    customComponents?: NodeRendererProps["customComponents"];
+    showTooltips?: boolean;
+    themes?: NodeRendererProps["themes"];
+    isDark?: boolean;
+    customId?: NodeRendererProps["customId"];
+    indexKey?: NodeRendererProps["indexKey"];
+    typewriter?: boolean;
+    batchRendering?: boolean;
+    initialRenderBatchSize?: number;
+    renderBatchSize?: number;
+    renderBatchDelay?: number;
+    renderBatchBudgetMs?: number;
+    renderBatchIdleTimeoutMs?: number;
+    deferNodesUntilVisible?: boolean;
+    maxLiveNodes?: number;
+    liveNodeBuffer?: number;
+    allowHtml?: boolean;
+    className?: string;
+    onCopy?: NodeRendererEvents["onCopy"];
+    onHandleArtifactClick?: NodeRendererEvents["onHandleArtifactClick"];
+    onClick?: ((event: MouseEvent) => void) | undefined;
+    onMouseover?: ((event: MouseEvent) => void) | undefined;
+    onMouseout?: ((event: MouseEvent) => void) | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type NodeRenderer = InstanceType<typeof NodeRenderer>;
+export default NodeRenderer;
+//# sourceMappingURL=NodeRenderer.svelte.d.ts.map

package/dist/components/NodeRenderer.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeRenderer.svelte.d.ts","sourceRoot":"","sources":["../../src/components/NodeRenderer.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACR,kBAAkB,EAClB,iBAAiB,EAGlB,MAAM,uBAAuB,CAAA;AA2VhC,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,YAAY;cAVm2C,iBAAiB,CAAC,SAAS,CAAC;YAAU,iBAAiB,CAAC,OAAO,CAAC;YAAU,iBAAiB,CAAC,OAAO,CAAC;mBAAiB,iBAAiB,CAAC,cAAc,CAAC;uBAAqB,iBAAiB,CAAC,kBAAkB,CAAC;;qBAA+D,iBAAiB,CAAC,gBAAgB,CAAC;iBAAe,iBAAiB,CAAC,YAAY,CAAC;uBAAqB,iBAAiB,CAAC,kBAAkB,CAAC;;yBAAiE,iBAAiB,CAAC,oBAAoB,CAAC;0BAAwB,iBAAiB,CAAC,qBAAqB,CAAC;6BAA2B,iBAAiB,CAAC,wBAAwB,CAAC;;wBAA4E,iBAAiB,CAAC,mBAAmB,CAAC;wBAAsB,iBAAiB,CAAC,mBAAmB,CAAC;qBAAmB,iBAAiB,CAAC,gBAAgB,CAAC;mBAAiB,iBAAiB,CAAC,cAAc,CAAC;cAAY,iBAAiB,CAAC,SAAS,CAAC;uBAAqB,iBAAiB,CAAC,kBAAkB,CAAC;uBAAqB,iBAAiB,CAAC,kBAAkB,CAAC;;aAA+C,iBAAiB,CAAC,QAAQ,CAAC;;eAAqC,iBAAiB,CAAC,UAAU,CAAC;eAAa,iBAAiB,CAAC,UAAU,CAAC;;;;;;;;;;;;;aAA+gB,kBAAkB,CAAC,QAAQ,CAAC;4BAA0B,kBAAkB,CAAC,uBAAuB,CAAC;cAAY,CAAC,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC,GAAG,SAAS;kBAAgB,CAAC,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC,GAAG,SAAS;iBAAe,CAAC,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC,GAAG,SAAS;;;kBAU1xG,CAAC;AAChF,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AACxD,eAAe,YAAY,CAAC"}

package/dist/components/ParagraphNode.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { SvelteRenderableNode, SvelteRenderContext } from './shared/node-helpers'
+  import RenderChildren from './RenderChildren.svelte'
+  import NodeOutlet from './NodeOutlet.svelte'
+  import { getNodeList, splitParagraphChildren } from './shared/node-helpers'
+
+  export let node: SvelteRenderableNode
+  export let context: SvelteRenderContext | undefined = undefined
+  export let indexKey: string | number | undefined = undefined
+
+  $: prefix = String(indexKey ?? 'p')
+  $: parts = splitParagraphChildren(getNodeList((node as any)?.children))
+</script>
+
+{#each parts as part, index (prefix + '-' + index)}
+  {#if part.kind === 'inline'}
+    <p class="paragraph-node"><RenderChildren nodes={part.nodes} context={context} prefix={prefix + '-' + index} /></p>
+  {:else}
+    <NodeOutlet node={part.node} context={context} indexKey={prefix + '-' + index} />
+  {/if}
+{/each}