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

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/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,91 @@
   let renderBatchToken = 0
   const textStreamState = new Map<string, string>()
 
+  const smoothStream = useSmoothMarkdownStream(smoothStreamingOptions)
+  let hasMountedForSmoothStreaming = $state(typeof window === 'undefined' || smoothStreaming === true)
+  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)
+
+  // Baseline sync: in auto mode with initial static content, ensure the smooth
+  // stream source/visible is already synced before smooth streaming activates.
+  // This prevents a blank flash when the mount gate opens and renderContent
+  // switches from raw content to smoothStream.visible (which would be empty).
+  if (
+    smoothStreaming !== true
+    && !Array.isArray(nodes)
+    && content
+  ) {
+    smoothStream.reset(content)
+  }
+
+  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(() => {
+    hasMountedForSmoothStreaming = 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 +193,7 @@
     customId,
     indexKey,
     typewriter,
+    fade,
     batchRendering,
     initialRenderBatchSize,
     renderBatchSize,
@@ -116,12 +204,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 +223,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 +257,7 @@
     void renderBatchDelay
     void renderBatchBudgetMs
     void renderBatchIdleTimeoutMs
-    void final
+    void effectiveFinal
     void renderedNodeCount
     syncRenderedNodeWindow()
   })
@@ -175,7 +265,7 @@
 
   $effect(() => {
     void rootEl
-    void final
+    void effectiveFinal
     void parsedNodes
     void renderedNodes
     void isDark
@@ -203,6 +293,7 @@
     enhancementHandle?.dispose()
     enhancementHandle = null
     disposeRenderedHtmlEnhancements(rootEl)
+    clearTypewriterCursorTimeout()
   })
 
   function toPositiveInteger(value: unknown, fallback: number) {
@@ -213,7 +304,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 +387,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 +426,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 +603,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';
@@ -99,6 +100,7 @@ export interface NodeRendererProps {
     customId?: string;
     indexKey?: number | string;
     typewriter?: boolean;
+    fade?: boolean;
     batchRendering?: boolean;
     initialRenderBatchSize?: number;
     renderBatchSize?: number;
@@ -109,6 +111,8 @@ export interface NodeRendererProps {
     maxLiveNodes?: number;
     liveNodeBuffer?: number;
     allowHtml?: boolean;
+    smoothStreaming?: boolean | 'auto';
+    smoothStreamingOptions?: SmoothMarkdownStreamOptions;
 }
 export interface SvelteRenderContext {
     customId?: string;
@@ -116,6 +120,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(options?: SmoothMarkdownStreamOptions): SmoothMarkdownStreamControllerSvelte;

package/dist/composables/useSmoothMarkdownStream.svelte.js

@@ -0,0 +1,40 @@
+import { createSmoothMarkdownStream } from 'markstream-core';
+import { onDestroy } from 'svelte';
+export function useSmoothMarkdownStream(options = {}) {
+    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/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "markstream-svelte",
   "type": "module",
-  "version": "0.0.1-beta.4",
+  "version": "0.0.1-beta.5",
   "description": "Svelte Markdown renderer for Markstream, aligned with markstream-vue and markstream-react.",
   "author": "Simon He",
   "license": "MIT",
@@ -71,7 +71,8 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
-    "stream-markdown-parser": "0.0.93"
+    "markstream-core": "0.0.1",
+    "stream-markdown-parser": "0.0.95"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",
@@ -86,10 +87,11 @@
     "vite": "^7.3.1"
   },
   "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",
+    "release": "pnpm run check:core-published && bumpp --commit --no-tag --no-push && pnpm publish --access public && node ../../scripts/tag-package.mjs --package-json package.json --push"
   }
 }