markstream-svelte 0.0.1-beta.4 → 0.0.1-beta.6

package/dist/components/ImageNode.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { SvelteRenderableNode } from './shared/node-helpers'
+  import { sanitizeImageSrc } from 'stream-markdown-parser'
   import { useSafeI18n } from '../i18n/useSafeI18n'
   import { getString } from './shared/node-helpers'
 
@@ -21,38 +22,58 @@
 
   const { t } = useSafeI18n()
 
-  let src = $derived(getString((node as any)?.src))
+  type ImageStage = 'primary' | 'fallback' | 'failed'
+
+  function resolveImageState(primarySrc: string, fallbackSrc: string, loading: boolean): { src: string; stage: ImageStage } {
+    if (loading || primarySrc)
+      return { src: primarySrc, stage: 'primary' }
+    if (fallbackSrc)
+      return { src: fallbackSrc, stage: 'fallback' }
+    return { src: '', stage: 'failed' }
+  }
+
+  let safeNodeSrc = $derived(sanitizeImageSrc((node as any)?.src))
+  let safeFallbackSrc = $derived(sanitizeImageSrc(fallbackSrc))
   let alt = $derived(getString((node as any)?.alt))
   let title = $derived(getString((node as any)?.title))
   let raw = $derived(getString((node as any)?.raw))
   let isLoading = $derived(Boolean((node as any)?.loading))
   let useEagerImagePath = $derived(!lazy)
 
-  let initialSrc = untrack(() => getString((node as any)?.src))
-  let previousSrc = $state(initialSrc)
-  let currentSrc = $state(initialSrc)
+  let initialSafeNodeSrc = untrack(() => sanitizeImageSrc((node as any)?.src))
+  let initialSafeFallbackSrc = untrack(() => sanitizeImageSrc(fallbackSrc))
+  let initialIsLoading = untrack(() => Boolean((node as any)?.loading))
+  let initialImageState = resolveImageState(initialSafeNodeSrc, initialSafeFallbackSrc, initialIsLoading)
+  let previousSafeNodeSrc = $state(initialSafeNodeSrc)
+  let previousSafeFallbackSrc = $state(initialSafeFallbackSrc)
+  let previousIsLoading = $state(initialIsLoading)
+  let currentSrc = $state(initialImageState.src)
+  let imageStage = $state<ImageStage>(initialImageState.stage)
   let imageLoaded = $state(false)
-  let hasError = $state(false)
-  let fallbackTried = $state(false)
+  let hasError = $state(initialImageState.stage === 'failed')
 
   $effect.pre(() => {
-    if (src !== previousSrc) {
-      previousSrc = src
-      currentSrc = src
+    if (safeNodeSrc !== previousSafeNodeSrc || safeFallbackSrc !== previousSafeFallbackSrc || isLoading !== previousIsLoading) {
+      previousSafeNodeSrc = safeNodeSrc
+      previousSafeFallbackSrc = safeFallbackSrc
+      previousIsLoading = isLoading
+      const next = resolveImageState(safeNodeSrc, safeFallbackSrc, isLoading)
+      currentSrc = next.src
+      imageStage = next.stage
       imageLoaded = false
-      hasError = false
-      fallbackTried = false
+      hasError = next.stage === 'failed'
     }
   })
 
   function handleImageError() {
-    if (fallbackSrc && !fallbackTried) {
-      fallbackTried = true
-      currentSrc = fallbackSrc
+    if (imageStage === 'primary' && safeFallbackSrc && safeFallbackSrc !== currentSrc) {
+      currentSrc = safeFallbackSrc
+      imageStage = 'fallback'
       imageLoaded = false
       hasError = false
       return
     }
+    imageStage = 'failed'
     hasError = true
     imageLoaded = false
   }
@@ -69,7 +90,7 @@
 </script>
 
 <span class="image-node-container">
-  {#if !isLoading && !hasError}
+  {#if !isLoading && !hasError && currentSrc}
     <img
       class="image-node__img"
       class:is-loaded={useEagerImagePath || imageLoaded}

package/dist/components/InlineCodeNode.svelte

@@ -1,13 +1,65 @@
 <script lang="ts">
-  import type { SvelteRenderableNode } from './shared/node-helpers'
+  import type { SvelteRenderableNode, SvelteRenderContext } from './shared/node-helpers'
+  import { resolveStreamingTextState } from 'markstream-core'
   import { getString } from './shared/node-helpers'
-  
+
   interface Props {
-    node: SvelteRenderableNode;
+    node: SvelteRenderableNode
+    context?: SvelteRenderContext
+    indexKey?: string | number
   }
-  
-  let { node }: Props = $props();
-  
-  let code = $derived(getString((node as any)?.code ?? (node as any)?.content ?? (node as any)?.raw));
+
+  let {
+    node,
+    context = undefined,
+    indexKey = undefined,
+  }: Props = $props()
+
+  let previousKey = ''
+  let previousCode = ''
+  let deltaClass = 'markstream-svelte-text__stream-delta--a'
+
+  const code = $derived(getString((node as any)?.code ?? (node as any)?.content ?? (node as any)?.raw))
+  const streamKey = $derived(
+    `${String(context?.customId ?? 'global')}:${String(context?.streamRenderVersion ?? 0)}:${String(indexKey ?? 'inline-code')}`,
+  )
+  const fadeEnabled = $derived(context?.fade !== false)
+
+  const streamInfo = $derived.by(() => {
+    const state = context?.textStreamState
+    const previous = streamKey === previousKey
+      ? previousCode
+      : (state?.get(streamKey) ?? '')
+
+    const result = resolveStreamingTextState({
+      nextContent: code,
+      previousContent: previous,
+      typewriterEnabled: fadeEnabled,
+    })
+
+    if (result.appended) {
+      deltaClass = deltaClass.endsWith('--a')
+        ? 'markstream-svelte-text__stream-delta--b'
+        : 'markstream-svelte-text__stream-delta--a'
+    }
+
+    previousKey = streamKey
+    previousCode = code
+    state?.set(streamKey, code)
+
+    return {
+      stableCode: result.settledContent,
+      deltaCode: result.streamedDelta,
+      deltaClass,
+    }
+  })
 </script>
-<code class="inline-code-node">{code}</code>
+
+<code class="inline-code-node">
+  {streamInfo.stableCode}
+  {#if streamInfo.deltaCode}
+    <span class="markstream-svelte-text__stream-delta text-node-stream-delta {streamInfo.deltaClass}">
+      {streamInfo.deltaCode}
+    </span>
+  {/if}
+</code>

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

@@ -1,6 +1,8 @@
-import type { SvelteRenderableNode } from './shared/node-helpers';
+import type { SvelteRenderableNode, SvelteRenderContext } from './shared/node-helpers';
 interface Props {
     node: SvelteRenderableNode;
+    context?: SvelteRenderContext;
+    indexKey?: string | number;
 }
 declare const InlineCodeNode: import("svelte").Component<Props, {}, "">;
 type InlineCodeNode = ReturnType<typeof InlineCodeNode>;

package/dist/components/LinkNode.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { SvelteRenderableNode, SvelteRenderContext } from './shared/node-helpers'
+  import { sanitizeHtmlAttrs, shouldOpenLinkInNewTab } from 'stream-markdown-parser'
   import { hideTooltip, showTooltipForAnchor } from '../tooltip/singletonTooltip'
   import RenderChildren from './RenderChildren.svelte'
   import { getNodeList, getString } from './shared/node-helpers'
@@ -13,11 +14,12 @@
   
   let { node, context, indexKey, showTooltip }: Props = $props();
 
-  let href = $derived(getString((node as any)?.href));
+  let href = $derived(sanitizeHtmlAttrs({ href: getString((node as any)?.href) }, 'safe', 'a').href ?? '');
   let title = $derived(getString((node as any)?.title || href));
   let children = $derived(getNodeList((node as any)?.children));
   let tooltipEnabled = $derived(showTooltip ?? context?.showTooltips ?? true);
   let isHashLink = $derived(href.startsWith('#') && href.length > 1);
+  let openInNewTab = $derived(shouldOpenLinkInNewTab(href));
 
   function showLinkTooltip(event: MouseEvent | FocusEvent) {
     if (!tooltipEnabled || !title)
@@ -44,4 +46,4 @@
     }
   }
 </script>
-<a class:link-loading={Boolean((node as any)?.loading)} class="link-node" href={href || undefined} title={tooltipEnabled ? undefined : title} onblur={() => hideTooltip()} onclick={scrollToHashTarget} onfocus={showLinkTooltip} onmouseleave={() => hideTooltip()} onmouseenter={showLinkTooltip} target={isHashLink ? undefined : '_blank'} rel={isHashLink ? undefined : 'noreferrer noopener'}><span class="link-text-wrapper"><span class="link-text">{#if children.length}<RenderChildren nodes={children} context={context} prefix={String(indexKey ?? 'link') + '-link'} />{:else}{getString((node as any)?.text || href)}{/if}</span>{#if (node as any)?.loading}<span class="link-loading-indicator"></span>{/if}</span></a>
+<a class:link-loading={Boolean((node as any)?.loading)} class="link-node" href={href || undefined} title={tooltipEnabled ? undefined : title} onblur={() => hideTooltip()} onclick={scrollToHashTarget} onfocus={showLinkTooltip} onmouseleave={() => hideTooltip()} onmouseenter={showLinkTooltip} target={openInNewTab ? '_blank' : undefined} rel={openInNewTab ? 'noreferrer noopener' : undefined}><span class="link-text-wrapper"><span class="link-text">{#if children.length}<RenderChildren nodes={children} context={context} prefix={String(indexKey ?? 'link') + '-link'} />{:else}{getString((node as any)?.text || href)}{/if}</span>{#if (node as any)?.loading}<span class="link-loading-indicator"></span>{/if}</span></a>

package/dist/components/MermaidBlockNode.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import type { SvelteRenderableNode, SvelteRenderContext } from './shared/node-helpers'
-  import { onMount, untrack } from 'svelte'
+  import { onMount, tick, untrack } from 'svelte'
+  import { toSafeMermaidSvgMarkup } from 'stream-markdown-parser'
   import { useSafeI18n } from '../i18n/useSafeI18n'
   import { getMermaid } from '../optional/mermaid'
-  import { toSafeSvgMarkup } from '../sanitizeSvg'
   import { hideTooltip, showTooltipForAnchor, type TooltipPlacement } from '../tooltip/singletonTooltip'
   import { getLanguageIcon } from '../utils/languageIcon'
   import { canParseOffthread, findPrefixOffthread } from '../workers/mermaidWorkerClient'
@@ -33,6 +33,7 @@
     showCollapseButton?: boolean
     showZoomControls?: boolean
     isStrict?: boolean
+    enableMermaidInteractions?: boolean
   }
 
   let {
@@ -55,6 +56,7 @@
     showCollapseButton = true,
     showZoomControls = true,
     isStrict = true,
+    enableMermaidInteractions = false,
   }: Props = $props()
 
   const { t } = useSafeI18n()
@@ -75,8 +77,11 @@
   let showSource = $state(false)
   let modalOpen = $state(false)
   let zoom = $state(1)
+  let previewHost: HTMLElement | null = $state(null)
+  let modalHost: HTMLElement | null = $state(null)
   let renderTimer: ReturnType<typeof setTimeout> | null = $state(null)
   let copyTimer: ReturnType<typeof setTimeout> | null = $state(null)
+  let lastMermaidBindFunctions: ((element: Element) => unknown) | null = null
 
   let source = $derived(normalizeMermaidSource(getString((node as any)?.code)))
   let nodeLoading = $derived(typeof (node as any)?.loading === 'boolean' ? Boolean((node as any)?.loading) : true)
@@ -121,6 +126,11 @@
     }
   })
 
+  $effect(() => {
+    if (mounted && modalOpen && svgMarkup && modalHost && enableMermaidInteractions)
+      untrack(() => void tick().then(() => bindCurrentMermaidInteractions(modalHost)))
+  })
+
   function clearRenderTimer() {
     if (!renderTimer)
       return
@@ -239,10 +249,11 @@
         return
 
       const rawSvg = typeof rendered === 'string' ? rendered : rendered?.svg
-      const safeSvg = isStrict ? toSafeSvgMarkup(rawSvg) : rawSvg
+      const safeSvg = toSafeMermaidSvgMarkup(rawSvg)
       if (!safeSvg)
         throw new Error('Mermaid rendered empty SVG.')
       svgMarkup = safeSvg
+      lastMermaidBindFunctions = typeof rendered === 'string' ? null : rendered?.bindFunctions ?? null
       renderError = ''
       lastProgressiveMissSignature = ''
       if (fullRender) {
@@ -250,8 +261,14 @@
         lastRenderedCode = normalized
         svgCache[theme] = safeSvg
       }
-      if (typeof rendered !== 'string')
-        rendered?.bindFunctions?.(document.createElement('div'))
+      if (enableMermaidInteractions && typeof rendered !== 'string') {
+        await tick()
+        if (mounted && token === renderToken) {
+          bindCurrentMermaidInteractions(previewHost)
+          if (modalOpen)
+            bindCurrentMermaidInteractions(modalHost)
+        }
+      }
     }
     catch (error) {
       if (token === renderToken) {
@@ -385,7 +402,7 @@
   }
 
   function getRenderSignature() {
-    return `${source}\n${theme}\n${isStrict}\n${final}\n${progressivePreview}`
+    return `${source}\n${theme}\n${isStrict}\n${enableMermaidInteractions}\n${final}\n${progressivePreview}`
   }
 
   function withTimeout<T>(run: () => Promise<T>, timeoutMs: number) {
@@ -403,6 +420,15 @@
     })
   }
 
+  function bindCurrentMermaidInteractions(element: Element | null | undefined) {
+    if (!enableMermaidInteractions || !element?.querySelector('svg'))
+      return
+    try {
+      lastMermaidBindFunctions?.(element)
+    }
+    catch {}
+  }
+
   async function copy() {
     await copyTextToClipboard(source)
     context?.events?.onCopy?.(source)
@@ -543,7 +569,7 @@
               <button type="button" class="mermaid-btn mermaid-action-btn mermaid-zoom-reset" aria-label={t('common.resetZoom')} onblur={() => hideTooltip()} onclick={() => (zoom = 1)} onfocus={(event) => showButtonTooltip(event, t('common.resetZoom') || 'Reset zoom')} onmouseleave={() => hideTooltip()} onmouseenter={(event) => showButtonTooltip(event, t('common.resetZoom') || 'Reset zoom')}>{Math.round(zoom * 100)}%</button>
             </div>
           {/if}
-          <div class="mermaid-preview markstream-svelte-mermaid" style={previewStyle}>
+          <div bind:this={previewHost} class="mermaid-preview markstream-svelte-mermaid" style={previewStyle}>
             {#if svgMarkup}
               {@html svgMarkup}
             {:else if renderError}
@@ -576,7 +602,7 @@
               </button>
             </div>
             <div class="mermaid-modal-body">
-              <div class="mermaid-modal-content markstream-svelte-mermaid" style={`transform: scale(${zoom});`}>{@html svgMarkup}</div>
+              <div bind:this={modalHost} class="mermaid-modal-content markstream-svelte-mermaid" style={`transform: scale(${zoom});`}>{@html svgMarkup}</div>
             </div>
           </div>
         </div>

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

@@ -19,6 +19,7 @@ type Props = {
     showCollapseButton?: boolean;
     showZoomControls?: boolean;
     isStrict?: boolean;
+    enableMermaidInteractions?: boolean;
 };
 declare const MermaidBlockNode: import("svelte").Component<Props, {}, "">;
 type MermaidBlockNode = ReturnType<typeof MermaidBlockNode>;

package/dist/components/NodeOutlet.svelte

@@ -103,6 +103,7 @@
     isDark={context?.isDark}
     indexKey={indexKey}
     typewriter={context?.typewriter}
+    fade={context?.fade}
     {...customInputs}
   />
 {:else if resolvedType === 'text' || resolvedType === 'text_special'}
@@ -136,7 +137,7 @@
 {:else if resolvedType === 'image'}
   <ImageNode {node} />
 {:else if resolvedType === 'inline_code'}
-  <InlineCodeNode {node} />
+  <InlineCodeNode {node} {context} {indexKey} />
 {:else if resolvedType === 'strong'}
   <StrongNode {node} {context} {indexKey} />
 {:else if resolvedType === 'emphasis'}

package/dist/components/NodeRenderer.svelte

@@ -5,11 +5,14 @@
     SvelteRenderableNode,
     SvelteRenderContext,
   } from './shared/node-helpers'
-  import { onDestroy, onMount, tick } from 'svelte'
+  import { getContext, onDestroy, onMount, setContext, 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'
+  import { useSmoothMarkdownStream } from '../composables/useSmoothMarkdownStream.svelte'
+  import { SMOOTH_STREAMING_CONTEXT } from '../context/smoothStreaming'
+  import type { SmoothStreamingContextValue } from '../context/smoothStreaming'
 
   type NodeRendererComponentProps = NodeRendererProps & NodeRendererEvents & {
     className?: string
@@ -45,7 +48,8 @@
     isDark = false,
     customId = undefined,
     indexKey = undefined,
-    typewriter = true,
+    typewriter = false,
+    fade = true,
     batchRendering = true,
     initialRenderBatchSize = 40,
     renderBatchSize = 80,
@@ -56,6 +60,8 @@
     maxLiveNodes = 320,
     liveNodeBuffer = 60,
     allowHtml = true,
+    smoothStreaming = 'auto' as boolean | 'auto',
+    smoothStreamingOptions = undefined,
     className = '',
     onCopy = undefined,
     onHandleArtifactClick = undefined,
@@ -78,10 +84,80 @@
   let renderBatchToken = 0
   const textStreamState = new Map<string, string>()
 
+  let hasMounted = $state(false)
+  const smoothStream = useSmoothMarkdownStream(() => smoothStreamingOptions)
+  const hasMountedForSmoothStreaming = $derived(smoothStreaming === true || hasMounted)
+  const hasNodes = $derived(Array.isArray(nodes))
+  const parentSmoothStreaming = getContext<SmoothStreamingContextValue | undefined>(
+    SMOOTH_STREAMING_CONTEXT,
+  )
+  const smoothStreamingEligible = $derived.by(() => {
+    if (smoothStreaming === false)
+      return false
+    if (hasNodes)
+      return false
+    // When the parent renderer is already pacing content, avoid double-pacing
+    // in nested renderers (e.g. thinking blocks, custom tag content).
+    // Only applies in 'auto' mode — smoothStreaming === true explicitly opts in.
+    if (smoothStreaming !== true && parentSmoothStreaming?.())
+      return false
+    if (smoothStreaming === true)
+      return true
+    return typewriter === true || (maxLiveNodes ?? 0) <= 0
+  })
+  const smoothStreamingEnabled = $derived(hasMountedForSmoothStreaming && smoothStreamingEligible)
+  setContext(SMOOTH_STREAMING_CONTEXT, () => smoothStreamingEnabled)
+
+  const renderContent = $derived(smoothStreamingEnabled ? smoothStream.visible : (content ?? ''))
+  const rawContent = $derived(content ?? '')
+  const smoothSourceSynced = $derived(hasNodes || smoothStream.source === rawContent)
+  const requestedFinal = $derived.by(() => {
+    const base = parseOptions ?? {}
+    return final ?? (base as any).final
+  })
+  const effectiveFinal = $derived.by(() => {
+    if (smoothStreamingEnabled && requestedFinal != null)
+      return Boolean(requestedFinal && smoothSourceSynced && smoothStream.caughtUp)
+    return requestedFinal
+  })
+
+  onMount(() => {
+    hasMounted = true
+  })
+
+  $effect(() => {
+    const nextContent = content ?? ''
+    if (hasNodes) {
+      smoothStream.reset('')
+      return
+    }
+    if (!smoothStreamingEnabled) {
+      smoothStream.reset(nextContent)
+      if (requestedFinal)
+        smoothStream.finish({ flush: true })
+      return
+    }
+    const source = smoothStream.source
+    if (!nextContent) {
+      smoothStream.reset('')
+    }
+    else if (nextContent === source) {
+      // no-op
+    }
+    else if (nextContent.startsWith(source)) {
+      smoothStream.enqueue(nextContent.slice(source.length))
+    }
+    else {
+      smoothStream.reset(nextContent)
+    }
+    if (requestedFinal)
+      smoothStream.finish()
+  })
+
   let rendererProps = $derived({
-    content,
+    content: renderContent,
     nodes,
-    final,
+    final: effectiveFinal,
     parseOptions,
     customMarkdownIt,
     debugPerformance,
@@ -106,6 +182,7 @@
     customId,
     indexKey,
     typewriter,
+    fade,
     batchRendering,
     initialRenderBatchSize,
     renderBatchSize,
@@ -116,12 +193,14 @@
     maxLiveNodes,
     liveNodeBuffer,
     allowHtml,
+    smoothStreaming,
+    smoothStreamingOptions,
   } satisfies NodeRendererProps)
 
   $effect.pre(() => {
-    if (previousContent !== content || previousNodes !== nodes) {
+    if (previousContent !== renderContent || previousNodes !== nodes) {
       streamRenderVersion += 1
-      previousContent = content
+      previousContent = renderContent
       previousNodes = nodes
     }
   })
@@ -133,7 +212,7 @@
       console.info('[markstream-svelte][perf] parse(sync)', {
         ms: Math.round(performance.now() - start),
         nodes: nextParsedNodes.length,
-        contentLength: content?.length ?? 0,
+        contentLength: renderContent?.length ?? 0,
       })
     }
     return nextParsedNodes
@@ -167,7 +246,7 @@
     void renderBatchDelay
     void renderBatchBudgetMs
     void renderBatchIdleTimeoutMs
-    void final
+    void effectiveFinal
     void renderedNodeCount
     syncRenderedNodeWindow()
   })
@@ -175,7 +254,7 @@
 
   $effect(() => {
     void rootEl
-    void final
+    void effectiveFinal
     void parsedNodes
     void renderedNodes
     void isDark
@@ -203,6 +282,7 @@
     enhancementHandle?.dispose()
     enhancementHandle = null
     disposeRenderedHtmlEnhancements(rootEl)
+    clearTypewriterCursorTimeout()
   })
 
   function toPositiveInteger(value: unknown, fallback: number) {
@@ -213,7 +293,7 @@
   function syncRenderedNodeWindow() {
     const total = parsedNodes.length
     const initialCount = Math.min(total, toPositiveInteger(initialRenderBatchSize, 40))
-    const shouldBatch = final !== false && batchRendering !== false && total > initialCount
+    const shouldBatch = effectiveFinal !== false && batchRendering !== false && total > initialCount
 
     if (!shouldBatch) {
       cancelRenderBatch()
@@ -296,7 +376,7 @@
   async function scheduleEnhancement() {
     if (!rootEl || typeof window === 'undefined')
       return
-    const enhancementFinal = typeof final === 'boolean' ? final : !hasLoadingNodes(parsedNodes)
+    const enhancementFinal = typeof effectiveFinal === 'boolean' ? effectiveFinal : !hasLoadingNodes(parsedNodes)
     if (!enhancementFinal) {
       enhancementToken += 1
       enhancementHandle?.dispose()
@@ -335,6 +415,156 @@
     return false
   }
 
+  // ── Typewriter cursor ──
+  let typewriterCursorEl: HTMLSpanElement | null = $state(null)
+  let showTypewriterCursor = $state(false)
+  let typewriterCursorTimeout: ReturnType<typeof setTimeout> | undefined
+  let lastTypewriterContentLength = 0
+  const TYPEWRITER_CURSOR_EXCLUDED_NODE_TYPES = new Set(['code_block', 'admonition', 'table', 'math_block', 'html_block', 'image'])
+
+  function shouldSkipTypewriterCursorForNode(node: unknown) {
+    if (!node || typeof node !== 'object')
+      return false
+    const type = (node as Record<string, unknown>).type
+    return typeof type === 'string' && TYPEWRITER_CURSOR_EXCLUDED_NODE_TYPES.has(type)
+  }
+
+  function shouldShowTypewriterCursorForCurrentNodes() {
+    const lastNode = parsedNodes[parsedNodes.length - 1]
+    return !shouldSkipTypewriterCursorForNode(lastNode)
+  }
+
+  function getNodeTextLength(node: unknown): number {
+    if (!node || typeof node !== 'object')
+      return 0
+    const record = node as Record<string, unknown>
+    const direct = record.raw ?? record.content ?? record.code
+    if (typeof direct === 'string')
+      return direct.length
+    const children = record.children
+    if (Array.isArray(children))
+      return children.reduce((total: number, child: unknown) => total + getNodeTextLength(child), 0)
+    const items = record.items
+    if (Array.isArray(items))
+      return items.reduce((total: number, item: unknown) => total + getNodeTextLength(item), 0)
+    return 0
+  }
+
+  function getTypewriterContentLength() {
+    if (nodes?.length)
+      return nodes.reduce((total: number, node: unknown) => total + getNodeTextLength(node), 0)
+    // Use raw content length, not renderContent (which may be the paced-out
+    // visible portion when smooth streaming is active).
+    return (content ?? '').length
+  }
+
+  function clearTypewriterCursorTimeout() {
+    if (!typewriterCursorTimeout)
+      return
+    clearTimeout(typewriterCursorTimeout)
+    typewriterCursorTimeout = undefined
+  }
+
+  function getLastTextNode(root: HTMLElement) {
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
+      acceptNode(node) {
+        const text = node.textContent ?? ''
+        if (!text.trim())
+          return NodeFilter.FILTER_REJECT
+        const parent = node.parentElement
+        if (!parent)
+          return NodeFilter.FILTER_REJECT
+        if (parent.closest('.typewriter-cursor, .height-estimation-probes, [data-node-type="code_block"], [data-node-type="admonition"], [data-node-type="table"], [data-node-type="math_block"], [data-node-type="html_block"], [data-node-type="image"], script, style'))
+          return NodeFilter.FILTER_REJECT
+        return NodeFilter.FILTER_ACCEPT
+      },
+    })
+    let last: Text | null = null
+    let current = walker.nextNode()
+    while (current) {
+      last = current as Text
+      current = walker.nextNode()
+    }
+    return last
+  }
+
+  function updateTypewriterCursorPosition() {
+    if (typeof window === 'undefined' || !showTypewriterCursor || !rootEl || !typewriterCursorEl)
+      return
+    const root = rootEl
+    const cursor = typewriterCursorEl
+    const lastText = getLastTextNode(root)
+    const rootRect = root.getBoundingClientRect()
+    let left = 0
+    let top = 0
+    let height = 20
+
+    if (lastText?.textContent) {
+      const range = document.createRange()
+      const end = lastText.textContent.length
+      range.setStart(lastText, Math.max(0, end - 1))
+      range.setEnd(lastText, end)
+      const rects = typeof range.getClientRects === 'function'
+        ? range.getClientRects()
+        : undefined
+      const rect = rects?.[rects.length - 1] ?? lastText.parentElement?.getBoundingClientRect()
+      if (rect) {
+        left = rect.right - rootRect.left + root.scrollLeft
+        top = rect.top - rootRect.top + root.scrollTop
+        height = rect.height || height
+      }
+      range.detach()
+    }
+
+    cursor.style.transform = `translate(${Math.max(0, left)}px, ${Math.max(0, top)}px)`
+    cursor.style.height = `${height}px`
+  }
+
+  $effect(() => {
+    void renderContent
+    void nodes
+    void typewriter
+    void parsedNodes.length
+    void effectiveFinal
+    if (typeof window === 'undefined' || hasNodes)
+      return
+
+    // When the stream is final (and effective — smooth streaming has caught up),
+    // hide the cursor immediately.
+    if (effectiveFinal) {
+      showTypewriterCursor = false
+      clearTypewriterCursorTimeout()
+      return
+    }
+
+    const nextLength = getTypewriterContentLength()
+    const cursorAllowed = shouldShowTypewriterCursorForCurrentNodes()
+    if (typewriter === false || !cursorAllowed || nextLength <= lastTypewriterContentLength) {
+      if (typewriter === false || !cursorAllowed)
+        showTypewriterCursor = false
+      lastTypewriterContentLength = nextLength
+      return
+    }
+
+    lastTypewriterContentLength = nextLength
+    showTypewriterCursor = true
+    clearTypewriterCursorTimeout()
+    tick().then(() => {
+      updateTypewriterCursorPosition()
+    })
+    typewriterCursorTimeout = setTimeout(() => {
+      showTypewriterCursor = false
+    }, 3000)
+  })
+
+  $effect(() => {
+    if (!showTypewriterCursor)
+      return
+    tick().then(() => {
+      updateTypewriterCursorPosition()
+    })
+  })
+
   function handleMouseover(event: MouseEvent) {
     const target = event.target as HTMLElement | null
     if (target?.closest('[data-node-index]'))
@@ -362,9 +592,10 @@
 >
   {#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}>
+      <div class:fade-node={fade !== false && String((node as any)?.type || '') !== 'code_block'} class:typewriter-node={fade !== 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}
+  {#if showTypewriterCursor}<span bind:this={typewriterCursorEl} class="typewriter-cursor" aria-hidden="true"></span>{/if}
 </div>

package/dist/components/TextNode.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { SvelteRenderableNode, SvelteRenderContext } from './shared/node-helpers'
+  import { resolveStreamingTextState } from 'markstream-core'
   import { getString } from './shared/node-helpers'
 
   interface Props {
@@ -23,30 +24,27 @@
   const content = $derived(getString((node as any)?.content ?? (node as any)?.raw))
   const centered = $derived(Boolean((node as any)?.center))
   const streamKey = $derived(String(context?.customId ?? 'global') + ':' + String(context?.streamRenderVersion ?? 0) + ':' + String(indexKey ?? 'node'))
+  const fadeEnabled = $derived(context?.fade !== false)
 
   const streamInfo = $derived.by(() => {
     const state = context?.textStreamState
     const previous = streamKey === previousKey ? previousContent : (state?.get(streamKey) ?? '')
-    
-    let stableContent = ''
-    let deltaContent = ''
 
-    if (previous && content.startsWith(previous) && content.length > previous.length) {
-      stableContent = previous
-      deltaContent = content.slice(previous.length)
+    const result = resolveStreamingTextState({
+      nextContent: content,
+      previousContent: previous,
+      typewriterEnabled: fadeEnabled,
+    })
+
+    if (result.appended)
       deltaClass = deltaClass.endsWith('--a') ? 'markstream-svelte-text__stream-delta--b' : 'markstream-svelte-text__stream-delta--a'
-    }
-    else {
-      stableContent = content
-      deltaContent = ''
-    }
-    
+
     previousKey = streamKey
     previousContent = content
     state?.set(streamKey, content)
 
-    return { stableContent, deltaContent, deltaClass }
+    return { stableContent: result.settledContent, deltaContent: result.streamedDelta, deltaClass }
   })
 </script>
 
-<span data-typewriter={typewriter !== false ? '1' : undefined} class:markstream-svelte-text--centered={centered} class="markstream-svelte-text-node text-node">{streamInfo.stableContent}{#if streamInfo.deltaContent}<span class="markstream-svelte-text__stream-delta text-node-stream-delta {streamInfo.deltaClass}">{streamInfo.deltaContent}</span>{/if}</span>
+<span data-typewriter={context?.typewriter === true ? '1' : undefined} class:markstream-svelte-text--centered={centered} class="markstream-svelte-text-node text-node">{streamInfo.stableContent}{#if streamInfo.deltaContent}<span class="markstream-svelte-text__stream-delta text-node-stream-delta {streamInfo.deltaClass}">{streamInfo.deltaContent}</span>{/if}</span>

package/dist/components/shared/node-helpers.d.ts

@@ -1,3 +1,4 @@
+import type { SmoothMarkdownStreamOptions } from 'markstream-core';
 import type { BaseNode, HtmlPolicy, MarkdownIt, ParsedNode, ParseOptions } from 'stream-markdown-parser';
 import type { CustomComponentMap } from '../../customComponents';
 import type { CodeBlockMonacoOptions, CodeBlockMonacoTheme } from '../../types/monaco';
@@ -45,6 +46,7 @@ export type NodeRendererMermaidProps = Partial<{
     showCollapseButton: boolean;
     showZoomControls: boolean;
     isStrict: boolean;
+    enableMermaidInteractions: boolean;
 }> & Record<string, unknown>;
 export type NodeRendererD2Props = Partial<{
     maxHeight: string | null;
@@ -99,6 +101,7 @@ export interface NodeRendererProps {
     customId?: string;
     indexKey?: number | string;
     typewriter?: boolean;
+    fade?: boolean;
     batchRendering?: boolean;
     initialRenderBatchSize?: number;
     renderBatchSize?: number;
@@ -109,6 +112,8 @@ export interface NodeRendererProps {
     maxLiveNodes?: number;
     liveNodeBuffer?: number;
     allowHtml?: boolean;
+    smoothStreaming?: boolean | 'auto';
+    smoothStreamingOptions?: SmoothMarkdownStreamOptions;
 }
 export interface SvelteRenderContext {
     customId?: string;
@@ -116,6 +121,7 @@ export interface SvelteRenderContext {
     indexKey?: string;
     final?: boolean;
     typewriter?: boolean;
+    fade?: boolean;
     textStreamState?: Map<string, string>;
     streamRenderVersion?: number;
     showTooltips?: boolean;

package/dist/components/shared/node-helpers.js

@@ -29,6 +29,7 @@ export function buildRenderContext(props, events = {}, textStreamState, streamRe
         indexKey: props.indexKey != null ? String(props.indexKey) : undefined,
         final: props.final,
         typewriter: props.typewriter,
+        fade: props.fade,
         textStreamState,
         streamRenderVersion,
         showTooltips: props.showTooltips,

package/dist/composables/useSmoothMarkdownStream.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { SmoothMarkdownStreamOptions } from 'markstream-core';
+export type { SmoothMarkdownStreamOptions };
+export interface SmoothMarkdownStreamControllerSvelte {
+    source: string;
+    visible: string;
+    done: boolean;
+    caughtUp: boolean;
+    final: boolean;
+    pendingChars: number;
+    enqueue: (chunk: string) => void;
+    finish: (options?: {
+        flush?: boolean;
+    }) => void;
+    flush: () => void;
+    reset: (initialMarkdown?: string) => void;
+    pause: () => void;
+    resume: () => void;
+}
+export declare function useSmoothMarkdownStream(optionsOrGetter?: SmoothMarkdownStreamOptions | (() => SmoothMarkdownStreamOptions)): SmoothMarkdownStreamControllerSvelte;

package/dist/composables/useSmoothMarkdownStream.svelte.js

@@ -0,0 +1,41 @@
+import { createSmoothMarkdownStream } from 'markstream-core';
+import { onDestroy } from 'svelte';
+export function useSmoothMarkdownStream(optionsOrGetter = {}) {
+    const options = typeof optionsOrGetter === 'function' ? optionsOrGetter() : optionsOrGetter;
+    let source = $state('');
+    let visible = $state('');
+    let done = $state(false);
+    let pendingChars = $state(0);
+    let caughtUp = $state(false);
+    let final = $state(false);
+    const controller = createSmoothMarkdownStream(options);
+    const sync = () => {
+        const snapshot = controller.getSnapshot();
+        source = snapshot.source;
+        visible = snapshot.visible;
+        done = snapshot.done;
+        pendingChars = snapshot.pendingChars;
+        caughtUp = snapshot.caughtUp;
+        final = snapshot.final;
+    };
+    const unsubscribe = controller.subscribe(sync);
+    sync();
+    onDestroy(() => {
+        unsubscribe();
+        controller.destroy();
+    });
+    return {
+        get source() { return source; },
+        get visible() { return visible; },
+        get done() { return done; },
+        get caughtUp() { return caughtUp; },
+        get final() { return final; },
+        get pendingChars() { return pendingChars; },
+        enqueue: chunk => controller.enqueue(chunk),
+        finish: opts => controller.finish(opts),
+        flush: () => controller.flush(),
+        reset: initialMarkdown => controller.reset(initialMarkdown),
+        pause: () => controller.pause(),
+        resume: () => controller.resume(),
+    };
+}

package/dist/context/smoothStreaming.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Context key and types for Svelte smooth streaming parent suppression.
+ *
+ * When a parent NodeRenderer is already pacing content via smooth streaming,
+ * nested renderers (e.g. thinking blocks, custom tag content) should suppress
+ * their own smooth streaming to avoid double-pacing.
+ *
+ * Usage:
+ *   const parentSmoothStreaming = getContext<SmoothStreamingContextValue | undefined>(
+ *     SMOOTH_STREAMING_CONTEXT,
+ *   )
+ *   setContext(SMOOTH_STREAMING_CONTEXT, () => smoothStreamingEnabled)
+ */
+export declare const SMOOTH_STREAMING_CONTEXT = "markstreamSmoothStreaming";
+export type SmoothStreamingContextValue = () => boolean;

package/dist/context/smoothStreaming.js

@@ -0,0 +1,14 @@
+/**
+ * Context key and types for Svelte smooth streaming parent suppression.
+ *
+ * When a parent NodeRenderer is already pacing content via smooth streaming,
+ * nested renderers (e.g. thinking blocks, custom tag content) should suppress
+ * their own smooth streaming to avoid double-pacing.
+ *
+ * Usage:
+ *   const parentSmoothStreaming = getContext<SmoothStreamingContextValue | undefined>(
+ *     SMOOTH_STREAMING_CONTEXT,
+ *   )
+ *   setContext(SMOOTH_STREAMING_CONTEXT, () => smoothStreamingEnabled)
+ */
+export const SMOOTH_STREAMING_CONTEXT = 'markstreamSmoothStreaming';

package/dist/enhanceRenderedHtml.js

@@ -1,3 +1,4 @@
+import { toSafeMermaidSvgMarkup } from 'stream-markdown-parser';
 import { getD2 } from './optional/d2';
 import { getInfographic } from './optional/infographic';
 import { getKatex } from './optional/katex';
@@ -212,7 +213,7 @@ async function renderKatexMarkup(source, displayMode) {
     return html;
 }
 async function renderMermaid(root, cleanupFns, options, isActive) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const strictMode = ((_a = options.mermaidProps) === null || _a === void 0 ? void 0 : _a.isStrict) !== false;
     const mermaid = await getMermaid({
         startOnLoad: false,
@@ -264,14 +265,18 @@ async function renderMermaid(root, cleanupFns, options, isActive) {
             const svg = typeof rendered === 'string' ? rendered : rendered === null || rendered === void 0 ? void 0 : rendered.svg;
             if (!svg)
                 continue;
-            const safeSvg = strictMode ? toSafeSvgMarkup(svg) : svg;
+            const safeSvg = toSafeMermaidSvgMarkup(svg);
             if (!safeSvg)
                 continue;
             shell.body.innerHTML = safeSvg;
             shell.body.classList.add('markstream-svelte-mermaid');
             shell.wrapper.dataset.markstreamMermaid = '1';
-            if (typeof rendered !== 'string')
-                (_g = rendered === null || rendered === void 0 ? void 0 : rendered.bindFunctions) === null || _g === void 0 ? void 0 : _g.call(rendered, shell.body);
+            if (((_g = options.mermaidProps) === null || _g === void 0 ? void 0 : _g.enableMermaidInteractions) === true && typeof rendered !== 'string') {
+                try {
+                    (_h = rendered === null || rendered === void 0 ? void 0 : rendered.bindFunctions) === null || _h === void 0 ? void 0 : _h.call(rendered, shell.body);
+                }
+                catch { }
+            }
             cleanupFns.push(() => {
                 if (shell.wrapper.isConnected)
                     shell.wrapper.replaceWith(originalPre.cloneNode(true));

package/dist/index.css

@@ -130,9 +130,10 @@ markstream-svelte {
   width: 100%;
 }
 
-.markstream-svelte .typewriter-node {
+.markstream-svelte .typewriter-node,
+.markstream-svelte .fade-node {
   opacity: 0;
-  animation: typewriter-fade var(--typewriter-fade-duration, 900ms) var(--typewriter-fade-ease, ease-out) both;
+  animation: typewriter-fade var(--fade-duration, var(--typewriter-fade-duration, 280ms)) var(--fade-ease, var(--typewriter-fade-ease, cubic-bezier(0.33, 0, 0.67, 1))) both;
   will-change: opacity;
 }
 
@@ -151,8 +152,8 @@ markstream-svelte {
 }
 
 .markstream-svelte .markstream-svelte-text__stream-delta {
-  animation-duration: var(--stream-update-fade-duration, var(--typewriter-fade-duration, 900ms));
-  animation-timing-function: var(--stream-update-fade-ease, var(--typewriter-fade-ease, ease-out));
+  animation-duration: var(--stream-update-fade-duration, var(--fade-duration, var(--typewriter-fade-duration, 280ms)));
+  animation-timing-function: var(--stream-update-fade-ease, var(--fade-ease, var(--typewriter-fade-ease, cubic-bezier(0.33, 0, 0.67, 1))));
   animation-fill-mode: both;
   will-change: opacity;
 }
@@ -278,6 +279,29 @@ markstream-svelte {
   to { opacity: 1; }
 }
 
+.markstream-svelte .typewriter-cursor {
+  position: absolute;
+  left: 0;
+  top: 0;
+  display: inline-block;
+  width: 0.55em;
+  height: 1em;
+  margin-left: 0.08em;
+  vertical-align: -0.12em;
+  border-right: 2px solid currentColor;
+  pointer-events: none;
+  animation: typewriter-cursor-blink 1s steps(1, end) infinite;
+}
+
+@keyframes typewriter-cursor-blink {
+  0%, 49% {
+    opacity: 1;
+  }
+  50%, 100% {
+    opacity: 0;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .markstream-svelte .link-loading-indicator {
     animation: none !important;
@@ -287,6 +311,16 @@ markstream-svelte {
   .markstream-svelte .markstream-svelte-text__stream-delta {
     animation: none !important;
   }
+
+  .markstream-svelte .typewriter-node,
+  .markstream-svelte .fade-node {
+    animation: none !important;
+    opacity: 1;
+  }
+
+  .markstream-svelte .typewriter-cursor {
+    animation: none !important;
+  }
 }
 
 .markstream-svelte strong {

package/dist/index.d.ts

@@ -49,6 +49,10 @@ export { default as TextNode } from './components/TextNode.svelte';
 export { default as ThematicBreakNode } from './components/ThematicBreakNode.svelte';
 export { default as Tooltip } from './components/Tooltip.svelte';
 export { default as VmrContainerNode } from './components/VmrContainerNode.svelte';
+export type { SmoothMarkdownStreamControllerSvelte, SmoothMarkdownStreamOptions, } from './composables/useSmoothMarkdownStream.svelte';
+export { useSmoothMarkdownStream, } from './composables/useSmoothMarkdownStream.svelte';
+export { SMOOTH_STREAMING_CONTEXT, } from './context/smoothStreaming';
+export type { SmoothStreamingContextValue, } from './context/smoothStreaming';
 export { clearGlobalCustomComponents, getCustomComponentsRevision, getCustomNodeComponents, removeCustomComponents, setCustomComponents, subscribeCustomComponents, } from './customComponents';
 export type { CustomComponentMap, MarkstreamSvelteComponent } from './customComponents';
 export { disposeRenderedHtmlEnhancements, enhanceRenderedHtml, } from './enhanceRenderedHtml';

package/dist/index.js

@@ -48,6 +48,8 @@ export { default as TextNode } from './components/TextNode.svelte';
 export { default as ThematicBreakNode } from './components/ThematicBreakNode.svelte';
 export { default as Tooltip } from './components/Tooltip.svelte';
 export { default as VmrContainerNode } from './components/VmrContainerNode.svelte';
+export { useSmoothMarkdownStream, } from './composables/useSmoothMarkdownStream.svelte';
+export { SMOOTH_STREAMING_CONTEXT, } from './context/smoothStreaming';
 export { clearGlobalCustomComponents, getCustomComponentsRevision, getCustomNodeComponents, removeCustomComponents, setCustomComponents, subscribeCustomComponents, } from './customComponents';
 export { disposeRenderedHtmlEnhancements, enhanceRenderedHtml, } from './enhanceRenderedHtml';
 export { setDefaultI18nMap, useSafeI18n } from './i18n/useSafeI18n';

package/dist/index.px.css

@@ -130,9 +130,10 @@ markstream-svelte {
   width: 100%;
 }
 
-.markstream-svelte .typewriter-node {
+.markstream-svelte .typewriter-node,
+.markstream-svelte .fade-node {
   opacity: 0;
-  animation: typewriter-fade var(--typewriter-fade-duration, 900ms) var(--typewriter-fade-ease, ease-out) both;
+  animation: typewriter-fade var(--fade-duration, var(--typewriter-fade-duration, 280ms)) var(--fade-ease, var(--typewriter-fade-ease, cubic-bezier(0.33, 0, 0.67, 1))) both;
   will-change: opacity;
 }
 
@@ -151,8 +152,8 @@ markstream-svelte {
 }
 
 .markstream-svelte .markstream-svelte-text__stream-delta {
-  animation-duration: var(--stream-update-fade-duration, var(--typewriter-fade-duration, 900ms));
-  animation-timing-function: var(--stream-update-fade-ease, var(--typewriter-fade-ease, ease-out));
+  animation-duration: var(--stream-update-fade-duration, var(--fade-duration, var(--typewriter-fade-duration, 280ms)));
+  animation-timing-function: var(--stream-update-fade-ease, var(--fade-ease, var(--typewriter-fade-ease, cubic-bezier(0.33, 0, 0.67, 1))));
   animation-fill-mode: both;
   will-change: opacity;
 }
@@ -278,6 +279,29 @@ markstream-svelte {
   to { opacity: 1; }
 }
 
+.markstream-svelte .typewriter-cursor {
+  position: absolute;
+  left: 0;
+  top: 0;
+  display: inline-block;
+  width: 0.55em;
+  height: 1em;
+  margin-left: 0.08em;
+  vertical-align: -0.12em;
+  border-right: 2px solid currentColor;
+  pointer-events: none;
+  animation: typewriter-cursor-blink 1s steps(1, end) infinite;
+}
+
+@keyframes typewriter-cursor-blink {
+  0%, 49% {
+    opacity: 1;
+  }
+  50%, 100% {
+    opacity: 0;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .markstream-svelte .link-loading-indicator {
     animation: none !important;
@@ -287,6 +311,16 @@ markstream-svelte {
   .markstream-svelte .markstream-svelte-text__stream-delta {
     animation: none !important;
   }
+
+  .markstream-svelte .typewriter-node,
+  .markstream-svelte .fade-node {
+    animation: none !important;
+    opacity: 1;
+  }
+
+  .markstream-svelte .typewriter-cursor {
+    animation: none !important;
+  }
 }
 
 .markstream-svelte strong {

package/dist/index.tailwind.css

@@ -130,9 +130,10 @@ markstream-svelte {
   width: 100%;
 }
 
-.markstream-svelte .typewriter-node {
+.markstream-svelte .typewriter-node,
+.markstream-svelte .fade-node {
   opacity: 0;
-  animation: typewriter-fade var(--typewriter-fade-duration, 900ms) var(--typewriter-fade-ease, ease-out) both;
+  animation: typewriter-fade var(--fade-duration, var(--typewriter-fade-duration, 280ms)) var(--fade-ease, var(--typewriter-fade-ease, cubic-bezier(0.33, 0, 0.67, 1))) both;
   will-change: opacity;
 }
 
@@ -151,8 +152,8 @@ markstream-svelte {
 }
 
 .markstream-svelte .markstream-svelte-text__stream-delta {
-  animation-duration: var(--stream-update-fade-duration, var(--typewriter-fade-duration, 900ms));
-  animation-timing-function: var(--stream-update-fade-ease, var(--typewriter-fade-ease, ease-out));
+  animation-duration: var(--stream-update-fade-duration, var(--fade-duration, var(--typewriter-fade-duration, 280ms)));
+  animation-timing-function: var(--stream-update-fade-ease, var(--fade-ease, var(--typewriter-fade-ease, cubic-bezier(0.33, 0, 0.67, 1))));
   animation-fill-mode: both;
   will-change: opacity;
 }
@@ -278,6 +279,29 @@ markstream-svelte {
   to { opacity: 1; }
 }
 
+.markstream-svelte .typewriter-cursor {
+  position: absolute;
+  left: 0;
+  top: 0;
+  display: inline-block;
+  width: 0.55em;
+  height: 1em;
+  margin-left: 0.08em;
+  vertical-align: -0.12em;
+  border-right: 2px solid currentColor;
+  pointer-events: none;
+  animation: typewriter-cursor-blink 1s steps(1, end) infinite;
+}
+
+@keyframes typewriter-cursor-blink {
+  0%, 49% {
+    opacity: 1;
+  }
+  50%, 100% {
+    opacity: 0;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .markstream-svelte .link-loading-indicator {
     animation: none !important;
@@ -287,6 +311,16 @@ markstream-svelte {
   .markstream-svelte .markstream-svelte-text__stream-delta {
     animation: none !important;
   }
+
+  .markstream-svelte .typewriter-node,
+  .markstream-svelte .fade-node {
+    animation: none !important;
+    opacity: 1;
+  }
+
+  .markstream-svelte .typewriter-cursor {
+    animation: none !important;
+  }
 }
 
 .markstream-svelte strong {

package/dist/renderMarkdownHtml.js

@@ -1,4 +1,4 @@
-import { getMarkdown, isHtmlTagBlocked, isUnsafeHtmlUrl, NON_STRUCTURING_HTML_TAGS, normalizeCustomHtmlTagName, normalizeCustomHtmlTags, parseMarkdownToStructure, sanitizeHtmlAttrs, } from 'stream-markdown-parser';
+import { getMarkdown, isHtmlTagBlocked, isUnsafeHtmlUrl, NON_STRUCTURING_HTML_TAGS, normalizeCustomHtmlTagName, normalizeCustomHtmlTags, parseMarkdownToStructure, sanitizeHtmlAttrs, sanitizeImageSrc, shouldOpenLinkInNewTab, } from 'stream-markdown-parser';
 import { hydrateCustomTagContent } from './hydrateCustomTagContent';
 import { sanitizeHtmlContent } from './sanitizeHtmlContent';
 const DEFAULT_CACHE_KEY = 'markstream-svelte-html';
@@ -224,8 +224,9 @@ function renderLinkNode(node, ctx) {
         ? renderNodesToHtml(getNodeList(node.children), ctx)
         : escapeHtml(getString(node.text || href));
     const titleAttr = title ? ` title="${escapeAttr(title)}"` : '';
-    const hrefAttr = href && !isUnsafeHtmlUrl(href) ? ` href="${escapeAttr(href)}"` : '';
-    const externalAttrs = href.startsWith('#') ? '' : ' target="_blank" rel="noreferrer noopener"';
+    const safeHref = href && !isUnsafeHtmlUrl(href) ? href : '';
+    const hrefAttr = safeHref ? ` href="${escapeAttr(safeHref)}"` : '';
+    const externalAttrs = shouldOpenLinkInNewTab(safeHref) ? ' target="_blank" rel="noreferrer noopener"' : '';
     return `<a${hrefAttr}${titleAttr}${externalAttrs}>${content}</a>`;
 }
 function renderMathInlineNode(node) {
@@ -237,7 +238,9 @@ function renderMathBlockNode(node) {
     return `<div class="markstream-nested-math-block"><pre class="markstream-nested-math-block__source"><code>${source}</code></pre><div class="markstream-nested-math-block__render" aria-hidden="true"></div></div>`;
 }
 function renderImageNode(node) {
-    const src = getString(node.src);
+    const src = sanitizeImageSrc(node.src);
+    if (!src)
+        return '';
     const alt = getString(node.alt);
     const title = getString(node.title);
     const titleAttr = title ? ` title="${escapeAttr(title)}"` : '';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "markstream-svelte",
   "type": "module",
-  "version": "0.0.1-beta.4",
+  "version": "0.0.1-beta.6",
   "description": "Svelte Markdown renderer for Markstream, aligned with markstream-vue and markstream-react.",
   "author": "Simon He",
   "license": "MIT",
@@ -49,7 +49,7 @@
     "@terrastruct/d2": ">=0.1.33",
     "katex": ">=0.16.22",
     "mermaid": ">=11",
-    "stream-monaco": ">=0.0.40",
+    "stream-monaco": ">=0.0.41",
     "svelte": ">=5 <6"
   },
   "peerDependenciesMeta": {
@@ -71,25 +71,28 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
-    "stream-markdown-parser": "0.0.93"
+    "markstream-core": "1.0.3",
+    "stream-markdown-parser": "1.0.5"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@types/node": "^18.19.130",
-    "autoprefixer": "^10.4.27",
+    "autoprefixer": "^10.5.0",
     "postcss-cli": "^11.0.1",
-    "svelte": "^5.55.5",
+    "svelte": "^5.55.7",
     "svelte-check": "^4.4.8",
     "tailwindcss": "^3.4.19",
     "typescript": "^5.9.3",
-    "vite": "^7.3.1"
+    "vite": "^7.3.3"
   },
   "scripts": {
-    "build": "svelte-package -i src -o dist && postcss src/index.css -o dist/index.css && cp dist/index.css dist/index.tailwind.css && node ../../scripts/generate-px-css.mjs",
+    "build": "pnpm --dir ../markstream-core build && svelte-package -i src -o dist && postcss src/index.css -o dist/index.css && cp dist/index.css dist/index.tailwind.css && node ../../scripts/generate-px-css.mjs",
     "dev": "vite dev",
     "preview": "vite preview",
     "typecheck": "svelte-check --tsconfig ./tsconfig.json",
-    "release": "bumpp --commit --no-tag --no-push && pnpm publish --access public && node ../../scripts/tag-package.mjs --package-json package.json --push"
+    "check:core-published": "node ../../scripts/check-core-published.mjs --package-json package.json --core-package-json ../markstream-core/package.json",
+    "check:workspace-deps-published": "node ../../scripts/check-workspace-deps-published.mjs --package-json package.json",
+    "release": "pnpm run check:workspace-deps-published && bumpp --commit --no-tag --no-push && pnpm publish --access public && node ../../scripts/tag-package.mjs --package-json package.json --push"
   }
 }