@incremark/svelte 0.2.6 → 0.2.7

package/dist/components/AutoScrollContainer.svelte

@@ -4,7 +4,7 @@
 -->
 
 <script lang="ts">
-  import { onMount, onDestroy } from 'svelte'
+  import { onMount, onDestroy, tick } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements';
 
   /**
@@ -117,24 +117,24 @@
     lastScrollTop = containerRef.scrollTop
     lastScrollHeight = containerRef.scrollHeight
     
-    observer = new MutationObserver(() => {
+    observer = new MutationObserver(async () => {
       // 使用 tick 等待 DOM 更新
-      setTimeout(() => {
-        if (!containerRef) return
-        
-        // 如果没有滚动条，重置状态
-        if (!hasScrollbar()) {
-          isUserScrolledUp = false
-        }
-        
-        // 更新 scrollHeight 记录（内容变化后）
-        lastScrollHeight = containerRef.scrollHeight
-        
-        // 自动滚动
-        if (enabled && !isUserScrolledUp) {
-          scrollToBottom()
-        }
-      }, 0)
+      await tick()
+      
+      if (!containerRef) return
+      
+      // 如果没有滚动条，重置状态
+      if (!hasScrollbar()) {
+        isUserScrolledUp = false
+      }
+      
+      // 更新 scrollHeight 记录（内容变化后）
+      lastScrollHeight = containerRef.scrollHeight
+      
+      // 自动滚动
+      if (enabled && !isUserScrolledUp) {
+        scrollToBottom()
+      }
     })
     
     observer.observe(containerRef, {

package/dist/components/Incremark.svelte

@@ -11,7 +11,7 @@
 
   import { getDefinitionsContext } from '../context/definitionsContext'
   import type { UseIncremarkReturn } from '../stores/useIncremark'
-  import type { ComponentMap, BlockWithStableId } from './types'
+  import type { ComponentMap, RenderableBlock } from './types'
 
   // 导入组件
   import IncremarkFootnotes from './IncremarkFootnotes.svelte'
@@ -29,7 +29,7 @@
    */
   interface Props {
     /** 要渲染的块列表（来自 useIncremark 的 blocks） */
-    blocks?: BlockWithStableId[] | Readable<BlockWithStableId[]>
+    blocks?: RenderableBlock[] | Readable<RenderableBlock[]>
     /** 内容是否完全显示完成（用于控制脚注等需要在内容完全显示后才出现的元素）
      * 如果传入了 incremark，则会自动使用 incremark.isDisplayComplete，此 prop 被忽略 */
     isDisplayComplete?: boolean
@@ -80,10 +80,10 @@
   <!-- 主要内容块 -->
   {#if incremark}
     <!-- 使用 incremark 的 blocks store -->
-    {#each $incremarkBlocks as block (block.stableId)}
+    {#each $incremarkBlocks as block (block.id)}
       {#if (block as ParsedBlock).node.type !== 'definition' && (block as ParsedBlock).node.type !== 'footnoteDefinition'}
         <div
-          class="incremark-block {(block as ParsedBlock).status === 'completed' ? completedClass : pendingClass} {showBlockStatus ? 'incremark-show-status' : ''} {(block as BlockWithStableId).isLastPending ? 'incremark-last-pending' : ''}"
+          class="incremark-block {(block as ParsedBlock).status === 'completed' ? completedClass : pendingClass} {showBlockStatus ? 'incremark-show-status' : ''} {(block as RenderableBlock).isLastPending ? 'incremark-last-pending' : ''}"
         >
           <!-- 使用 IncremarkRenderer，传递 customContainers 和 customCodeBlocks -->
           <IncremarkRenderer
@@ -98,10 +98,10 @@
     {/each}
   {:else}
     <!-- 使用传入的 blocks 数组 -->
-    {#each (Array.isArray(blocks) ? blocks : []) as block (block.stableId)}
+    {#each (Array.isArray(blocks) ? blocks : []) as block (block.id)}
       {#if (block as ParsedBlock).node.type !== 'definition' && (block as ParsedBlock).node.type !== 'footnoteDefinition'}
         <div
-          class="incremark-block {(block as ParsedBlock).status === 'completed' ? completedClass : pendingClass} {showBlockStatus ? 'incremark-show-status' : ''} {block.isLastPending ? 'incremark-last-pending' : ''}"
+          class="incremark-block {(block as ParsedBlock).status === 'completed' ? completedClass : pendingClass} {showBlockStatus ? 'incremark-show-status' : ''} {(block as RenderableBlock).isLastPending ? 'incremark-last-pending' : ''}"
         >
           <!-- 使用 IncremarkRenderer，传递 customContainers 和 customCodeBlocks -->
           <IncremarkRenderer

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

@@ -1,13 +1,13 @@
 import type { Component } from 'svelte';
 import type { Readable } from 'svelte/store';
 import type { UseIncremarkReturn } from '../stores/useIncremark';
-import type { ComponentMap, BlockWithStableId } from './types';
+import type { ComponentMap, RenderableBlock } from './types';
 /**
  * 组件 Props
  */
 interface Props {
     /** 要渲染的块列表（来自 useIncremark 的 blocks） */
-    blocks?: BlockWithStableId[] | Readable<BlockWithStableId[]>;
+    blocks?: RenderableBlock[] | Readable<RenderableBlock[]>;
     /** 内容是否完全显示完成（用于控制脚注等需要在内容完全显示后才出现的元素）
      * 如果传入了 incremark，则会自动使用 incremark.isDisplayComplete，此 prop 被忽略 */
     isDisplayComplete?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"Incremark.svelte.d.ts","sourceRoot":"","sources":["../../src/components/Incremark.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AACvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAK5C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAChE,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAM5D;;GAEG;AACH,UAAU,KAAK;IACb,wCAAwC;IACxC,MAAM,CAAC,EAAE,iBAAiB,EAAE,GAAG,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAA;IAC5D;uEACmE;IACnE,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,wBAAwB;IACxB,UAAU,CAAC,EAAE,YAAY,CAAA;IACzB,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC,CAAA;IACjD,oDAAoD;IACpD,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC,CAAA;IACjD,0BAA0B;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAA;IACzD,gBAAgB;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,gBAAgB;IAChB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,gBAAgB;IAChB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,sCAAsC;IACtC,SAAS,CAAC,EAAE,kBAAkB,CAAA;CAC/B;AA2FH,QAAA,MAAM,SAAS,0BAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Incremark.svelte.d.ts","sourceRoot":"","sources":["../../src/components/Incremark.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AACvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAK5C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAChE,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAM1D;;GAEG;AACH,UAAU,KAAK;IACb,wCAAwC;IACxC,MAAM,CAAC,EAAE,eAAe,EAAE,GAAG,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAA;IACxD;uEACmE;IACnE,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,wBAAwB;IACxB,UAAU,CAAC,EAAE,YAAY,CAAA;IACzB,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC,CAAA;IACjD,oDAAoD;IACpD,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC,CAAA;IACjD,0BAA0B;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAA;IACzD,gBAAgB;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,gBAAgB;IAChB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,gBAAgB;IAChB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,sCAAsC;IACtC,SAAS,CAAC,EAAE,kBAAkB,CAAA;CAC/B;AA2FH,QAAA,MAAM,SAAS,0BAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/IncremarkCode.svelte

@@ -1,11 +1,6 @@
-<!--
-  @file IncremarkCode.svelte - 代码块组件
-  @description 渲染 Markdown 代码块，支持 Shiki 代码高亮和 Mermaid 图表渲染
--->
-
 <script lang="ts">
   import type { Code } from 'mdast'
-  import { onMount, onDestroy } from 'svelte'
+  import { useShiki } from '../stores/useShiki.svelte'
 
   /**
    * 组件 Props
@@ -43,8 +38,6 @@
   // 状态
   let copied = $state(false)
   let highlightedHtml = $state('')
-  let isHighlighting = $state(false)
-  let highlightError = $state(false)
 
   // Mermaid 支持
   let mermaidSvg = $state('')
@@ -55,10 +48,8 @@
   // 视图模式：'preview' | 'source'
   let mermaidViewMode = $state<'preview' | 'source'>('preview')
 
-  // 缓存 highlighter
-  let highlighterRef: any = null
-  const loadedLanguages = new Set<string>()
-  const loadedThemes = new Set<string>()
+  // 使用 Shiki 单例管理器 - 修复：传入 getter 闭包以保持响应式
+  const shiki = useShiki(() => theme)
 
   /**
    * 计算属性
@@ -72,18 +63,10 @@
     const component = customCodeBlocks?.[language]
     if (!component) return null
 
-    // 检查该语言的配置
     const config = codeBlockConfigs?.[language]
 
-    // 如果配置了 takeOver 为 true，则从一开始就使用
-    if (config?.takeOver) {
-      return component
-    }
-
-    // 否则，默认行为：只在 completed 状态使用
-    if (blockStatus !== 'completed') {
-      return null
-    }
+    if (config?.takeOver) return component
+    if (blockStatus !== 'completed') return null
 
     return component
   })
@@ -95,54 +78,30 @@
     mermaidViewMode = mermaidViewMode === 'preview' ? 'source' : 'preview'
   }
 
-  /**
-   * Mermaid 渲染（带防抖动）
-   */
-  function scheduleRenderMermaid() {
-    if (!isMermaid || !code) return
-
-    // 清除之前的定时器
-    if (mermaidTimer) {
-      clearTimeout(mermaidTimer)
-    }
-
-    // 显示加载状态
-    mermaidLoading = true
-
-    // 防抖动延迟渲染
-    mermaidTimer = setTimeout(() => {
-      doRenderMermaid()
-    }, mermaidDelay)
-  }
-
   /**
    * 执行 Mermaid 渲染
    */
   async function doRenderMermaid() {
     if (!code) return
-
     mermaidError = ''
 
     try {
-      // 动态导入 mermaid
       if (!mermaidRef) {
-        // @ts-ignore - mermaid 是可选依赖
+        // @ts-ignore
         const mermaidModule = await import('mermaid')
         mermaidRef = mermaidModule.default
         mermaidRef.initialize({
           startOnLoad: false,
           theme: 'dark',
-          securityLevel: 'loose'
+          securityLevel: 'loose',
+          suppressErrorRendering: true
         })
       }
 
-      const mermaid = mermaidRef
       const id = `mermaid-${Date.now()}-${Math.random().toString(36).slice(2)}`
-
-      const { svg } = await mermaid.render(id, code)
+      const { svg } = await mermaidRef.render(id, code)
       mermaidSvg = svg
     } catch (e: any) {
-      // 不显示错误，可能是代码还不完整
       mermaidError = ''
       mermaidSvg = ''
     } finally {
@@ -153,9 +112,12 @@
   /**
    * 动态加载 shiki 并高亮
    */
-  async function highlight() {
+  async function doHighlight() {
     if (isMermaid) {
-      scheduleRenderMermaid()
+      // Mermaid 防抖逻辑
+      if (mermaidTimer) clearTimeout(mermaidTimer)
+      mermaidLoading = true
+      mermaidTimer = setTimeout(doRenderMermaid, mermaidDelay)
       return
     }
 
@@ -164,54 +126,12 @@
       return
     }
 
-    isHighlighting = true
-    highlightError = false
-
     try {
-      // 动态导入 shiki
-      if (!highlighterRef) {
-        const { createHighlighter } = await import('shiki')
-        highlighterRef = await createHighlighter({
-          themes: [theme as any],
-          langs: []
-        })
-        loadedThemes.add(theme)
-      }
-
-      const highlighter = highlighterRef
-      const lang = language
-
-      // 按需加载语言
-      if (!loadedLanguages.has(lang) && lang !== 'text') {
-        try {
-          await highlighter.loadLanguage(lang)
-          loadedLanguages.add(lang)
-        } catch {
-          // 语言不支持，标记但不阻止
-        }
-      }
-
-      // 按需加载主题
-      if (!loadedThemes.has(theme)) {
-        try {
-          await highlighter.loadTheme(theme)
-          loadedThemes.add(theme)
-        } catch {
-          // 主题不支持
-        }
-      }
-
-      const html = highlighter.codeToHtml(code, {
-        lang: loadedLanguages.has(lang) ? lang : 'text',
-        theme: loadedThemes.has(theme) ? theme : fallbackTheme
-      })
+      // 调用经过修复的 shiki.highlight
+      const html = await shiki.highlight(code, language, fallbackTheme)
       highlightedHtml = html
     } catch (e) {
-      // Shiki 不可用或加载失败
-      highlightError = true
       highlightedHtml = ''
-    } finally {
-      isHighlighting = false
     }
   }
 
@@ -222,31 +142,29 @@
     try {
       await navigator.clipboard.writeText(code)
       copied = true
-      setTimeout(() => {
-        copied = false
-      }, 2000)
-    } catch {
-      // 复制失败静默处理
-    }
+      setTimeout(() => { copied = false }, 2000)
+    } catch { /* 静默处理 */ }
   }
 
-  // 监听代码变化，重新高亮/渲染
+  // 监听代码、主题、语言变化并重新渲染
   $effect(() => {
-    highlight()
-  })
-
-  // 清理
-  onDestroy(() => {
-    if (mermaidTimer) {
-      clearTimeout(mermaidTimer)
+    doHighlight()
+    
+    // 返回清理函数取代 onDestroy
+    return () => {
+      if (mermaidTimer) clearTimeout(mermaidTimer)
     }
   })
 </script>
 
-<!-- 自定义代码块组件 -->
 {#if CustomCodeBlock}
   {@const Component = CustomCodeBlock}
-  <Component codeStr={code} lang={language} completed={blockStatus === 'completed'} takeOver={codeBlockConfigs?.[language]?.takeOver} />
+  <Component 
+    codeStr={code} 
+    lang={language} 
+    completed={blockStatus === 'completed'} 
+    takeOver={codeBlockConfigs?.[language]?.takeOver} 
+  />
 {:else if isMermaid}
   <div class="incremark-mermaid">
     <div class="mermaid-header">
@@ -266,23 +184,18 @@
       </div>
     </div>
     <div class="mermaid-content">
-      <!-- 加载中 -->
       {#if mermaidLoading && !mermaidSvg}
         <pre class="mermaid-source-code">{code}</pre>
-      <!-- 源码模式 -->
       {:else if mermaidViewMode === 'source'}
         <pre class="mermaid-source-code">{code}</pre>
-      <!-- 预览模式 -->
       {:else if mermaidSvg}
         {@html mermaidSvg}
-      <!-- 无法渲染时显示源码 -->
       {:else}
         <pre class="mermaid-source-code">{code}</pre>
       {/if}
     </div>
   </div>
 {:else}
-  <!-- 普通代码块 -->
   <div class="incremark-code">
     <div class="code-header">
       <span class="language">{language}</span>
@@ -291,21 +204,17 @@
       </button>
     </div>
     <div class="code-content">
-      <!-- 正在加载高亮 -->
-      {#if isHighlighting && !highlightedHtml}
+      {#if shiki.isHighlighting && !highlightedHtml}
         <div class="code-loading">
           <pre><code>{code}</code></pre>
         </div>
-      <!-- 高亮后的代码 -->
       {:else if highlightedHtml}
         <div class="shiki-wrapper">
           {@html highlightedHtml}
         </div>
-      <!-- 回退：无高亮 -->
       {:else}
         <pre class="code-fallback"><code>{code}</code></pre>
       {/if}
     </div>
   </div>
 {/if}
-

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

@@ -1 +1 @@
-{"version":3,"file":"IncremarkCode.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkCode.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAI/B;;GAEG;AACH,UAAU,KAAK;IACb,WAAW;IACX,IAAI,EAAE,IAAI,CAAA;IACV,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,eAAe;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6BAA6B;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACtC,0BAA0B;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAA;IACzD,wBAAwB;IACxB,WAAW,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,WAAW,CAAA;CACjD;AA8RH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"IncremarkCode.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkCode.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAI/B;;GAEG;AACH,UAAU,KAAK;IACb,WAAW;IACX,IAAI,EAAE,IAAI,CAAA;IACV,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,eAAe;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6BAA6B;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACtC,0BAA0B;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAA;IACzD,wBAAwB;IACxB,WAAW,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,WAAW,CAAA;CACjD;AAiMH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/IncremarkContent.svelte

@@ -0,0 +1,114 @@
+<!--
+  @file IncremarkContent.svelte - 开箱即用的 Markdown 渲染组件
+  @description 自动处理流式内容和普通内容的高级组件
+-->
+
+<script lang="ts">
+  import type { Component } from 'svelte'
+  import { useIncremark, type UseIncremarkOptions } from '../stores/useIncremark'
+  import type { ComponentMap, IncremarkContentProps } from './types'
+  import Incremark from './Incremark.svelte'
+  import { get } from 'svelte/store'
+
+  let {
+    stream,
+    content,
+    components = {},
+    customContainers = {},
+    customCodeBlocks = {},
+    codeBlockConfigs = {},
+    isFinished = false,
+    incremarkOptions,
+    pendingClass = 'incremark-pending',
+    showBlockStatus = false
+  }: IncremarkContentProps = $props()
+
+  // 合并默认选项（初始化时使用）
+  const initialOptions: UseIncremarkOptions = {
+    gfm: true,
+    htmlTree: true,
+    containers: true,
+    math: true,
+    ...incremarkOptions
+  }
+
+  const { blocks, append, finalize, render, reset, isDisplayComplete, markdown, typewriter } = useIncremark(initialOptions)
+
+  // 监听 incremarkOptions 的变化，更新 typewriter 配置
+  $effect(() => {
+    if (incremarkOptions?.typewriter) {
+      typewriter.setOptions(incremarkOptions.typewriter)
+    }
+  })
+
+  // 派生状态
+  const isStreamMode = $derived(typeof stream === 'function')
+
+  // 保存前一个 content 值用于增量更新
+  let prevContent: string | undefined = $state(undefined)
+  let isStreaming = $state(false)
+
+  async function handleStreamInput() {
+    if (!stream || isStreaming) return
+
+    isStreaming = true
+    try {
+      const streamGen = stream()
+
+      for await (const chunk of streamGen) {
+        append(chunk)
+      }
+
+      finalize()
+    } catch (error) {
+      console.error('Stream error: ', error)
+      finalize()
+    } finally {
+      isStreaming = false
+    }
+  }
+
+  function handleContentInput(newContent?: string, oldContent?: string) {
+    if (!newContent) {
+      if (oldContent) {
+        reset()
+      }
+      return
+    }
+
+    if (newContent?.startsWith(oldContent ?? '')) {
+      const delta = newContent.slice((oldContent || '').length)
+      append(delta)
+    } else {
+      render(newContent)
+    }
+  }
+
+  // 监听 content 变化
+  $effect(() => {
+    if (isStreamMode) {
+      handleStreamInput()
+    } else {
+      handleContentInput(content, prevContent)
+    }
+    prevContent = content
+  })
+
+  // 监听 isFinished 变化
+  $effect(() => {
+    if (isFinished && content === get(markdown)) {
+      finalize()
+    }
+  })
+</script>
+
+<Incremark
+  blocks={$blocks}
+  isDisplayComplete={$isDisplayComplete}
+  {pendingClass}
+  {showBlockStatus}
+  {components}
+  {customContainers}
+  {customCodeBlocks}
+  {codeBlockConfigs}
+/>

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

@@ -0,0 +1,6 @@
+import type { Component } from 'svelte';
+import type { IncremarkContentProps } from './types';
+declare const IncremarkContent: Component<IncremarkContentProps, {}, "">;
+type IncremarkContent = ReturnType<typeof IncremarkContent>;
+export default IncremarkContent;
+//# sourceMappingURL=IncremarkContent.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IncremarkContent.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkContent.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAEvC,OAAO,KAAK,EAAgB,qBAAqB,EAAE,MAAM,SAAS,CAAA;AA6GlE,QAAA,MAAM,gBAAgB,0CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/IncremarkList.svelte

@@ -76,6 +76,7 @@
   this={tag}
   class="incremark-list"
   class:task-list={isTaskList}
+  start={node.start || undefined}
 >
   {#each node.children as item, index (index)}
     <li

package/dist/components/index.d.ts

@@ -3,6 +3,7 @@
  * @description 导出所有组件
  */
 export { default as Incremark } from './Incremark.svelte';
+export { default as IncremarkContent } from './IncremarkContent.svelte';
 export { default as IncremarkParagraph } from './IncremarkParagraph.svelte';
 export { default as IncremarkInline } from './IncremarkInline.svelte';
 export { default as IncremarkHeading } from './IncremarkHeading.svelte';
@@ -17,5 +18,5 @@ export { default as IncremarkFootnotes } from './IncremarkFootnotes.svelte';
 export { default as IncremarkDefault } from './IncremarkDefault.svelte';
 export { default as IncremarkRenderer } from './IncremarkRenderer.svelte';
 export { default as AutoScrollContainer } from './AutoScrollContainer.svelte';
-export type { ComponentMap, BlockWithStableId } from './types';
+export type { ComponentMap, RenderableBlock, IncremarkContentProps, CodeBlockConfig } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAA;AACzD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AAC3E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAA;AACrE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AACvE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAA;AACjE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAA;AACjE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAA;AACnE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAA;AAC7E,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,iCAAiC,CAAA;AACnF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAA;AACjE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+BAA+B,CAAA;AAC/E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AAC3E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AACvE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AACzE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAA;AAE7E,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAA;AACzD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AACvE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AAC3E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAA;AACrE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AACvE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAA;AACjE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAA;AACjE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAA;AACnE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAA;AAC7E,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,iCAAiC,CAAA;AACnF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAA;AACjE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+BAA+B,CAAA;AAC/E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AAC3E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AACvE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AACzE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAA;AAE7E,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA"}

package/dist/components/index.js

@@ -3,6 +3,7 @@
  * @description 导出所有组件
  */
 export { default as Incremark } from './Incremark.svelte';
+export { default as IncremarkContent } from './IncremarkContent.svelte';
 export { default as IncremarkParagraph } from './IncremarkParagraph.svelte';
 export { default as IncremarkInline } from './IncremarkInline.svelte';
 export { default as IncremarkHeading } from './IncremarkHeading.svelte';

package/dist/components/types.d.ts

@@ -2,17 +2,43 @@
  * @file Component Types - 组件类型定义
  * @description 定义组件相关的类型
  */
+import type { Component } from 'svelte';
 import type { ParsedBlock } from '@incremark/core';
+import type { UseIncremarkOptions } from '../stores/useIncremark';
 /**
  * 组件映射类型
  * 使用 any 以支持不同类型的组件
  */
 export type ComponentMap = Partial<Record<string, any>>;
 /**
- * 带稳定 ID 的块类型
+ * 可渲染的块类型（带 isLastPending 字段用于打字机光标）
  */
-export interface BlockWithStableId extends ParsedBlock {
-    stableId: string;
+export type RenderableBlock = ParsedBlock & {
     isLastPending?: boolean;
+};
+/**
+ * 代码块配置
+ */
+export interface CodeBlockConfig {
+    /** 是否从一开始就接管渲染，而不是等到 completed 状态 */
+    takeOver?: boolean;
+}
+/**
+ * IncremarkContent 组件 Props
+ */
+export interface IncremarkContentProps {
+    stream?: () => AsyncGenerator<string>;
+    content?: string;
+    components?: ComponentMap;
+    /** 自定义容器组件映射，key 为容器名称（如 'warning', 'info'） */
+    customContainers?: Record<string, Component<any>>;
+    /** 自定义代码块组件映射，key 为代码语言名称（如 'echart', 'mermaid'） */
+    customCodeBlocks?: Record<string, Component<any>>;
+    /** 代码块配置映射，key 为代码语言名称 */
+    codeBlockConfigs?: Record<string, CodeBlockConfig>;
+    isFinished?: boolean;
+    incremarkOptions?: UseIncremarkOptions;
+    pendingClass?: string;
+    showBlockStatus?: boolean;
 }
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/components/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAElD;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAA;AAEvD;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,QAAQ,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/components/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAEjE;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAA;AAEvD;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG;IAAE,aAAa,CAAC,EAAE,OAAO,CAAA;CAAE,CAAA;AAEvE;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,MAAM,CAAC,EAAE,MAAM,cAAc,CAAC,MAAM,CAAC,CAAA;IACrC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,YAAY,CAAA;IACzB,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC,CAAA;IACjD,oDAAoD;IACpD,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC,CAAA;IACjD,0BAA0B;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAA;IAClD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,gBAAgB,CAAC,EAAE,mBAAmB,CAAA;IACtC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B"}

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export { useIncremark, type UseIncremarkOptions, type UseIncremarkReturn, type T
 export { useDevTools, type UseDevToolsOptions } from './stores/useDevTools';
 export { useBlockTransformer, type UseBlockTransformerOptions, type UseBlockTransformerReturn } from './stores/useBlockTransformer';
 export { setDefinitionsContext, getDefinitionsContext, type DefinitionsContextValue } from './context/definitionsContext';
-export { Incremark, IncremarkParagraph, IncremarkInline, IncremarkHeading, IncremarkCode, IncremarkList, IncremarkTable, IncremarkBlockquote, IncremarkThematicBreak, IncremarkMath, IncremarkHtmlElement, IncremarkFootnotes, IncremarkDefault, IncremarkRenderer, type ComponentMap, type BlockWithStableId } from './components';
+export { Incremark, IncremarkContent, IncremarkParagraph, IncremarkInline, IncremarkHeading, IncremarkCode, IncremarkList, IncremarkTable, IncremarkBlockquote, IncremarkThematicBreak, IncremarkMath, IncremarkHtmlElement, IncremarkFootnotes, IncremarkDefault, IncremarkRenderer, type ComponentMap, type RenderableBlock, type IncremarkContentProps, type CodeBlockConfig } from './components';
 export { default as AutoScrollContainer } from './components/AutoScrollContainer.svelte';
 export { default as ThemeProvider } from './ThemeProvider.svelte';
 export type { ParsedBlock, IncrementalUpdate, ParserOptions, BlockStatus, Root, RootContent, SourceBlock, DisplayBlock, TransformerPlugin, TransformerOptions, TransformerState, AnimationEffect } from '@incremark/core';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,YAAY,EAAE,KAAK,mBAAmB,EAAE,KAAK,kBAAkB,EAAE,KAAK,iBAAiB,EAAE,KAAK,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AACxJ,OAAO,EAAE,WAAW,EAAE,KAAK,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAC3E,OAAO,EACL,mBAAmB,EACnB,KAAK,0BAA0B,EAC/B,KAAK,yBAAyB,EAC/B,MAAM,8BAA8B,CAAA;AAGrC,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,KAAK,uBAAuB,EAAE,MAAM,8BAA8B,CAAA;AAGzH,OAAO,EACL,SAAS,EACT,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,cAAc,EACd,mBAAmB,EACnB,sBAAsB,EACtB,aAAa,EACb,oBAAoB,EACpB,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,KAAK,YAAY,EACjB,KAAK,iBAAiB,EACvB,MAAM,cAAc,CAAA;AAGrB,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,yCAAyC,CAAA;AACxF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAGjE,YAAY,EACV,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,WAAW,EACX,IAAI,EACJ,WAAW,EAEX,WAAW,EACX,YAAY,EACZ,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,EAChB,eAAe,EAChB,MAAM,iBAAiB,CAAA;AAGxB,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,eAAe,EACf,aAAa,EACb,WAAW,EACX,UAAU,EACV,mBAAmB,EACnB,cAAc,EACd,UAAU,EACV,YAAY,EACb,MAAM,iBAAiB,CAAA;AAGxB,OAAO,EACL,KAAK,YAAY,EACjB,YAAY,EACZ,SAAS,EACT,eAAe,EACf,UAAU,EACV,UAAU,EACX,MAAM,kBAAkB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,YAAY,EAAE,KAAK,mBAAmB,EAAE,KAAK,kBAAkB,EAAE,KAAK,iBAAiB,EAAE,KAAK,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AACxJ,OAAO,EAAE,WAAW,EAAE,KAAK,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAC3E,OAAO,EACL,mBAAmB,EACnB,KAAK,0BAA0B,EAC/B,KAAK,yBAAyB,EAC/B,MAAM,8BAA8B,CAAA;AAGrC,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,KAAK,uBAAuB,EAAE,MAAM,8BAA8B,CAAA;AAGzH,OAAO,EACL,SAAS,EACT,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,cAAc,EACd,mBAAmB,EACnB,sBAAsB,EACtB,aAAa,EACb,oBAAoB,EACpB,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,qBAAqB,EAC1B,KAAK,eAAe,EACrB,MAAM,cAAc,CAAA;AAGrB,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,yCAAyC,CAAA;AACxF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAGjE,YAAY,EACV,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,WAAW,EACX,IAAI,EACJ,WAAW,EAEX,WAAW,EACX,YAAY,EACZ,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,EAChB,eAAe,EAChB,MAAM,iBAAiB,CAAA;AAGxB,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,eAAe,EACf,aAAa,EACb,WAAW,EACX,UAAU,EACV,mBAAmB,EACnB,cAAc,EACd,UAAU,EACV,YAAY,EACb,MAAM,iBAAiB,CAAA;AAGxB,OAAO,EACL,KAAK,YAAY,EACjB,YAAY,EACZ,SAAS,EACT,eAAe,EACf,UAAU,EACV,UAAU,EACX,MAAM,kBAAkB,CAAA"}

package/dist/index.js

@@ -9,7 +9,7 @@ export { useBlockTransformer } from './stores/useBlockTransformer';
 // Context
 export { setDefinitionsContext, getDefinitionsContext } from './context/definitionsContext';
 // Components
-export { Incremark, IncremarkParagraph, IncremarkInline, IncremarkHeading, IncremarkCode, IncremarkList, IncremarkTable, IncremarkBlockquote, IncremarkThematicBreak, IncremarkMath, IncremarkHtmlElement, IncremarkFootnotes, IncremarkDefault, IncremarkRenderer } from './components';
+export { Incremark, IncremarkContent, IncremarkParagraph, IncremarkInline, IncremarkHeading, IncremarkCode, IncremarkList, IncremarkTable, IncremarkBlockquote, IncremarkThematicBreak, IncremarkMath, IncremarkHtmlElement, IncremarkFootnotes, IncremarkDefault, IncremarkRenderer } from './components';
 // Additional Components
 export { default as AutoScrollContainer } from './components/AutoScrollContainer.svelte';
 export { default as ThemeProvider } from './ThemeProvider.svelte';

package/dist/stores/useDevTools.js

@@ -29,8 +29,8 @@ export function useDevTools(incremark, options = {}) {
     // 设置 parser 的 onChange 回调
     incremark.parser.setOnChange((state) => {
         const blocks = [
-            ...state.completedBlocks.map((b) => ({ ...b, stableId: b.id })),
-            ...state.pendingBlocks.map((b, i) => ({ ...b, stableId: `pending-${i}` }))
+            ...state.completedBlocks,
+            ...state.pendingBlocks
         ];
         devtools.update({
             blocks,

package/dist/stores/useIncremark.d.ts

@@ -30,6 +30,9 @@ export interface UseIncremarkOptions extends ParserOptions {
     /** 打字机配置，传入即创建 transformer（可通过 enabled 控制是否启用） */
     typewriter?: TypewriterOptions;
 }
+export type RenderableBlock = ParsedBlock & {
+    isLastPending?: boolean;
+};
 /**
  * 打字机控制对象
  */
@@ -66,10 +69,7 @@ export interface UseIncremarkReturn {
     /** 当前完整的 AST */
     ast: Readable<Root>;
     /** 用于渲染的 blocks（根据打字机设置自动处理） */
-    blocks: Readable<Array<ParsedBlock & {
-        stableId: string;
-        isLastPending?: boolean;
-    }>>;
+    blocks: Readable<Array<RenderableBlock>>;
     /** 是否正在加载 */
     isLoading: Writable<boolean>;
     /** 是否已完成（finalize） */

package/dist/stores/useIncremark.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useIncremark.d.ts","sourceRoot":"","sources":["../../src/stores/useIncremark.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useIncremark.d.ts","sourceRoot":"","sources":["../../src/stores/useIncremark.ts"],"names":[],"mappings":"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"}

package/dist/stores/useShiki.svelte.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 使用 Shiki Highlighter
+ * @param themeGetter 传入一个返回主题字符串的函数，例如 () => theme
+ */
+export declare function useShiki(themeGetter: () => string): {
+    readonly isHighlighting: boolean;
+    highlight: (code: string, lang: string, fallbackTheme: string) => Promise<string>;
+};
+//# sourceMappingURL=useShiki.svelte.d.ts.map

package/dist/stores/useShiki.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useShiki.svelte.d.ts","sourceRoot":"","sources":["../../src/stores/useShiki.svelte.ts"],"names":[],"mappings":"AAkFA;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,WAAW,EAAE,MAAM,MAAM;;sBAOjB,MAAM,QAAQ,MAAM,iBAAiB,MAAM,KAAG,OAAO,CAAC,MAAM,CAAC;EA+B7F"}

package/dist/stores/useShiki.svelte.js

@@ -0,0 +1,98 @@
+// ============ 单例管理器 ============
+class ShikiManager {
+    static instance = null;
+    highlighters = new Map();
+    constructor() { }
+    static getInstance() {
+        if (!ShikiManager.instance) {
+            ShikiManager.instance = new ShikiManager();
+        }
+        return ShikiManager.instance;
+    }
+    async getHighlighter(theme) {
+        if (this.highlighters.has(theme)) {
+            return this.highlighters.get(theme);
+        }
+        const { createHighlighter } = await import('shiki');
+        const highlighter = await createHighlighter({
+            themes: [theme],
+            langs: []
+        });
+        const info = {
+            highlighter,
+            loadedLanguages: new Set(),
+            loadedThemes: new Set([theme])
+        };
+        this.highlighters.set(theme, info);
+        return info;
+    }
+    async loadLanguage(theme, lang) {
+        const info = this.highlighters.get(theme);
+        if (!info || info.loadedLanguages.has(lang))
+            return;
+        try {
+            await info.highlighter.loadLanguage(lang);
+            info.loadedLanguages.add(lang);
+        }
+        catch { /* 静默处理 */ }
+    }
+    async loadTheme(theme) {
+        const info = this.highlighters.get(theme);
+        if (!info || info.loadedThemes.has(theme))
+            return;
+        try {
+            await info.highlighter.loadTheme(theme);
+            info.loadedThemes.add(theme);
+        }
+        catch { /* 静默处理 */ }
+    }
+    async codeToHtml(theme, code, lang, fallbackTheme) {
+        const info = this.highlighters.get(theme);
+        if (!info)
+            throw new Error('Highlighter not found');
+        const actualLang = info.loadedLanguages.has(lang) ? lang : 'text';
+        return info.highlighter.codeToHtml(code, {
+            lang: actualLang,
+            theme: theme
+        });
+    }
+}
+const shikiManager = ShikiManager.getInstance();
+// ============ Svelte 5 Composable ============
+/**
+ * 使用 Shiki Highlighter
+ * @param themeGetter 传入一个返回主题字符串的函数，例如 () => theme
+ */
+export function useShiki(themeGetter) {
+    // 使用 Svelte 5 的原生响应式状态
+    let isHighlighting = $state(false);
+    /**
+     * 高亮代码
+     */
+    async function highlight(code, lang, fallbackTheme) {
+        // 关键：每次执行时通过 Getter 获取最新的主题
+        const currentTheme = themeGetter();
+        const currentFallback = fallbackTheme;
+        isHighlighting = true;
+        try {
+            const info = await shikiManager.getHighlighter(currentTheme);
+            // 按需加载语言
+            if (!info.loadedLanguages.has(lang) && lang !== 'text') {
+                await shikiManager.loadLanguage(currentTheme, lang);
+            }
+            // 按需加载主题
+            if (!info.loadedThemes.has(currentTheme)) {
+                await shikiManager.loadTheme(currentTheme);
+            }
+            return await shikiManager.codeToHtml(currentTheme, code, lang, currentFallback);
+        }
+        finally {
+            isHighlighting = false;
+        }
+    }
+    return {
+        // 使用 getter 暴露只读状态，保持 UI 响应
+        get isHighlighting() { return isHighlighting; },
+        highlight
+    };
+}

package/dist/stores/useTypewriter.d.ts

@@ -22,7 +22,6 @@ export interface UseTypewriterOptions {
 export interface UseTypewriterReturn {
     /** 用于渲染的 blocks（经过打字机处理或原始blocks） */
     blocks: Readable<Array<ParsedBlock & {
-        stableId: string;
         isLastPending?: boolean;
     }>>;
     /** 打字机控制对象 */

package/dist/stores/useTypewriter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTypewriter.d.ts","sourceRoot":"","sources":["../../src/stores/useTypewriter.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAqB,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAA;AAC9E,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,WAAW,EAGhB,KAAK,gBAAgB,EACtB,MAAM,iBAAiB,CAAA;AACxB,OAAO,KAAK,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAG3E;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,YAAY;IACZ,UAAU,CAAC,EAAE,iBAAiB,CAAA;IAC9B,oBAAoB;IACpB,eAAe,EAAE,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAA;IACxC,oBAAoB;IACpB,aAAa,EAAE,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAA;CACvC;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,qCAAqC;IACrC,MAAM,EAAE,QAAQ,CAAC,KAAK,CAAC,WAAW,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,aAAa,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC,CAAA;IACpF,cAAc;IACd,UAAU,EAAE,kBAAkB,CAAA;IAC9B,qBAAqB;IACrB,WAAW,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,IAAI,CAAA;IACjD,oCAAoC;IACpC,mBAAmB,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;CACvC;AAED;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,oBAAoB,GAAG,mBAAmB,CA8KhF"}
+{"version":3,"file":"useTypewriter.d.ts","sourceRoot":"","sources":["../../src/stores/useTypewriter.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAqB,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAA;AAC9E,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,WAAW,EAGhB,KAAK,gBAAgB,EAEtB,MAAM,iBAAiB,CAAA;AACxB,OAAO,KAAK,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAG3E;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,YAAY;IACZ,UAAU,CAAC,EAAE,iBAAiB,CAAA;IAC9B,oBAAoB;IACpB,eAAe,EAAE,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAA;IACxC,oBAAoB;IACpB,aAAa,EAAE,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAA;CACvC;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,qCAAqC;IACrC,MAAM,EAAE,QAAQ,CAAC,KAAK,CAAC,WAAW,GAAG;QAAE,aAAa,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC,CAAA;IAClE,cAAc;IACd,UAAU,EAAE,kBAAkB,CAAA;IAC9B,qBAAqB;IACrB,WAAW,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,IAAI,CAAA;IACjD,oCAAoC;IACpC,mBAAmB,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;CACvC;AAED;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,oBAAoB,GAAG,mBAAmB,CA4KhF"}

package/dist/stores/useTypewriter.js

@@ -79,13 +79,12 @@ export function useTypewriter(options) {
     const rawBlocks = derived([completedBlocks, pendingBlocks], ([$completedBlocks, $pendingBlocks]) => {
         const result = [];
         for (const block of $completedBlocks) {
-            result.push({ ...block, stableId: block.id });
+            result.push(block);
         }
         for (let i = 0; i < $pendingBlocks.length; i++) {
             const isLastPending = i === $pendingBlocks.length - 1;
             result.push({
                 ...$pendingBlocks[i],
-                stableId: `pending-${i}`,
                 isLastPending
             });
         }
@@ -108,7 +107,6 @@ export function useTypewriter(options) {
             }
             return {
                 id: db.id,
-                stableId: db.id,
                 status: (db.isDisplayComplete ? 'completed' : 'pending'),
                 isLastPending,
                 node,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@incremark/svelte",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "Incremark Svelte 5 集成",
   "type": "module",
   "svelte": "./dist/index.js",
@@ -24,10 +24,10 @@
   ],
   "dependencies": {
     "shiki": "^3.20.0",
-    "@incremark/devtools": "0.2.6",
-    "@incremark/core": "0.2.6",
-    "@incremark/theme": "0.2.6",
-    "@incremark/shared": "0.2.6"
+    "@incremark/devtools": "0.2.7",
+    "@incremark/core": "0.2.7",
+    "@incremark/shared": "0.2.7",
+    "@incremark/theme": "0.2.7"
   },
   "peerDependencies": {
     "svelte": "^5.0.0",