@incremark/svelte 0.3.1 → 0.3.3

package/dist/components/CachedCodeRenderer.svelte

@@ -0,0 +1,125 @@
+<!--
+  CachedCodeRenderer - 使用 shiki-stream 实现流式代码高亮
+  
+  基于 shiki-stream 的设计模式，适配 Svelte 5：
+  - 在脚本顶层创建和消费 stream（类似 Vue setup）
+  - 使用 $state 存储 tokens
+  - 使用 $effect 监听 code 变化
+  - SSR 兼容：Web Streams API 只在浏览器中使用
+-->
+<script lang="ts">
+  import type { ThemedToken } from '@shikijs/core'
+  import { onDestroy, untrack } from 'svelte'
+  import { CodeToTokenTransformStream } from 'shiki-stream'
+  import { getTokenStyleObject } from '@shikijs/core'
+  import { objectId } from '@antfu/utils'
+
+  interface Props {
+    code: string
+    lang: string
+    theme: string
+    highlighter: any
+  }
+
+  let { code, lang, theme, highlighter }: Props = $props()
+
+  // SSR 检测：Web Streams API 只在浏览器中可用
+  const isBrowser = typeof window !== 'undefined'
+
+  // Stream 错误状态
+  let hasStreamError = $state(false)
+
+  // Tokens 数组（与 Vue 的 reactive 数组对齐）
+  let tokens = $state<ThemedToken[]>([])
+  
+  // 已处理的 code 长度
+  let index = $state(0)
+
+  // Stream 相关状态（只在浏览器中初始化）
+  let controller: ReadableStreamController<string> | null = null
+  let tokenStream: ReadableStream<any> | null = null
+
+  // 只在浏览器环境中创建 stream
+  if (isBrowser) {
+    const textStream = new ReadableStream<string>({
+      start(_controller) {
+        controller = _controller
+      }
+    })
+
+    try {
+      const initialHighlighter = untrack(() => highlighter)
+      const initialLang = untrack(() => lang)
+      const initialTheme = untrack(() => theme)
+      
+      tokenStream = textStream.pipeThrough(
+        new CodeToTokenTransformStream({
+          highlighter: initialHighlighter,
+          lang: initialLang,
+          theme: initialTheme,
+          allowRecalls: true
+        })
+      )
+    } catch (error) {
+      console.error('Failed to create token stream:', error)
+      hasStreamError = true
+    }
+
+    // 消费 token stream
+    if (tokenStream) {
+      tokenStream.pipeTo(
+        new WritableStream({
+          write(token: any) {
+            if ('recall' in token) {
+              tokens.splice(tokens.length - token.recall, token.recall)
+            } else {
+              tokens.push(token)
+            }
+          }
+        })
+      ).catch((error) => {
+        console.error('Stream error:', error)
+        hasStreamError = true
+      })
+    }
+  }
+
+  // 监听 code 变化，增量推送到流中（与 Vue 的 watchEffect 对齐）
+  $effect(() => {
+    if (!isBrowser || hasStreamError || !controller) return
+
+    // 读取 code 的值来建立依赖
+    const currentCode = code
+    
+    // 使用 untrack 避免 index 建立依赖
+    const currentIndex = untrack(() => index)
+
+    // 只处理增量更新：传入新增的部分
+    if (currentCode.length > currentIndex) {
+      const incremental = currentCode.slice(currentIndex)
+      controller.enqueue(incremental as any)
+      index = currentCode.length
+    }
+  })
+
+  // 组件卸载时清理
+  onDestroy(() => {
+    controller?.close()
+  })
+</script>
+
+{#if hasStreamError || !isBrowser || tokens.length === 0}
+  <!-- SSR 或错误时渲染原始代码 -->
+  <pre class="shiki incremark-code-stream"><code>{code}</code></pre>
+{:else}
+  <!-- 正常渲染高亮代码（与 Vue/React 的渲染结构对齐） -->
+  {@const getStyle = (token: any) => {
+    const style = token.htmlStyle || getTokenStyleObject(token)
+    // 如果是对象，转换为 CSS 字符串
+    if (typeof style === 'object') {
+      return Object.entries(style).map(([k, v]) => `${k}: ${v}`).join('; ')
+    }
+    return style
+  }}
+  <pre class="shiki incremark-code-stream"><code>{#each tokens as token (objectId(token))}<span style={getStyle(token)}>{token.content}</span>{/each}</code></pre>
+{/if}

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

@@ -0,0 +1,10 @@
+interface Props {
+    code: string;
+    lang: string;
+    theme: string;
+    highlighter: any;
+}
+declare const CachedCodeRenderer: import("svelte").Component<Props, {}, "">;
+type CachedCodeRenderer = ReturnType<typeof CachedCodeRenderer>;
+export default CachedCodeRenderer;
+//# sourceMappingURL=CachedCodeRenderer.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CachedCodeRenderer.svelte.d.ts","sourceRoot":"","sources":["../../src/components/CachedCodeRenderer.svelte.ts"],"names":[],"mappings":"AAUE,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,GAAG,CAAA;CACjB;AAmHH,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/components/ConfigProvider.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import type { IncremarkLocale } from '@incremark/svelte'
-  import { en } from '../index'
+  import type { IncremarkLocale } from '@incremark/shared'
+  import { zhCN } from '@incremark/shared'
   import { provideLocale } from '../stores/useLocale.svelte'
 
   interface Props {
@@ -8,11 +8,12 @@
     children: import('svelte').Snippet
   }
 
-  const { locale = en, children }: Props = $props()
+  // 提供 locale 给子组件（确保不是 undefined）
+  const { locale, children }: Props = $props()
 
   // 在组件初始化时同步设置 context
   // 使用函数返回 locale 以支持响应式更新
-  provideLocale(() => locale)
+  provideLocale(() => locale || zhCN)
 </script>
 
 {@render children()}

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

@@ -1,4 +1,4 @@
-import type { IncremarkLocale } from '@incremark/svelte';
+import type { IncremarkLocale } from '@incremark/shared';
 interface Props {
     locale?: IncremarkLocale;
     children: import('svelte').Snippet;

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

@@ -1 +1 @@
-{"version":3,"file":"ConfigProvider.svelte.d.ts","sourceRoot":"","sources":["../../src/components/ConfigProvider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAKtD,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,eAAe,CAAA;IACxB,QAAQ,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAA;CACnC;AAkBH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ConfigProvider.svelte.d.ts","sourceRoot":"","sources":["../../src/components/ConfigProvider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAKtD,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,eAAe,CAAA;IACxB,QAAQ,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAA;CACnC;AAmBH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/Incremark.svelte

@@ -5,10 +5,10 @@
 
 <script lang="ts">
   import type { Component } from 'svelte'
-  import type { RootContent, ParsedBlock } from '@incremark/core'
+  import type { RootContent } from '@incremark/core'
 
-  import { getDefinitionsContext } from '../context/definitionsContext'
-  import type { UseIncremarkReturn } from '../stores/useIncremark'
+  import { getDefinitionsContext } from '../context/definitionsContext.svelte.ts'
+  import type { UseIncremarkReturn } from '../stores/useIncremark.svelte.ts'
   import type { ComponentMap, RenderableBlock } from './types'
 
   // 导入组件
@@ -55,46 +55,19 @@
   }: Props = $props()
 
   const context = getDefinitionsContext()
-  // 解构 store 以便使用 $ 语法订阅
-  const { footnoteReferenceOrder } = context
 
-  // 获取 incremark 的 stores（使用 getter 访问以保持响应性）
-  const blocksStore = $derived(incremark?.blocks)
-  const displayCompleteStore = $derived(incremark?.isDisplayComplete)
-
-  // 订阅 stores 的值
-  let blocksFromStore = $state<RenderableBlock[]>([])
-  let displayCompleteFromStore = $state(false)
-
-  // 使用 effect 订阅 blocks store
-  $effect(() => {
-    if (blocksStore) {
-      const unsubscribe = blocksStore.subscribe((value) => {
-        blocksFromStore = value
-      })
-      return unsubscribe
-    }
-  })
-
-  // 使用 effect 订阅 displayComplete store
-  $effect(() => {
-    if (displayCompleteStore) {
-      const unsubscribe = displayCompleteStore.subscribe((value) => {
-        displayCompleteFromStore = value
-      })
-      return unsubscribe
-    }
-  })
-
-  // 计算最终要渲染的 blocks
+  // 计算最终要渲染的 blocks（优先使用 incremark 对象）
   const renderBlocks = $derived<RenderableBlock[]>(
-    blocksStore ? blocksFromStore : (blocks ?? [])
+    incremark ? incremark.blocks : (blocks ?? [])
   )
 
   // 计算是否显示完成
   const displayComplete = $derived(
-    displayCompleteStore ? displayCompleteFromStore : isDisplayComplete
+    incremark ? incremark.isDisplayComplete : isDisplayComplete
   )
+
+  // 获取脚注引用顺序
+  const footnoteOrder = $derived(context.getFootnoteReferenceOrder())
 </script>
 
 <div class="incremark">
@@ -117,7 +90,7 @@
   {/each}
 
   <!-- 脚注列表（仅在内容完全显示后显示） -->
-  {#if displayComplete && $footnoteReferenceOrder.length > 0}
+  {#if displayComplete && footnoteOrder.length > 0}
     <IncremarkFootnotes />
   {/if}
 </div>

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

@@ -1,5 +1,5 @@
 import type { Component } from 'svelte';
-import type { UseIncremarkReturn } from '../stores/useIncremark';
+import type { UseIncremarkReturn } from '../stores/useIncremark.svelte.ts';
 import type { ComponentMap, RenderableBlock } from './types';
 /**
  * 组件 Props

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;AAIvC,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,gBAAgB;IAChB,MAAM,CAAC,EAAE,eAAe,EAAE,CAAA;IAC1B,iBAAiB;IACjB,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,qEAAqE;IACrE,SAAS,CAAC,EAAE,kBAAkB,CAAA;CAC/B;AA0FH,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;AAIvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAA;AAC1E,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAM1D;;GAEG;AACH,UAAU,KAAK;IACb,gBAAgB;IAChB,MAAM,CAAC,EAAE,eAAe,EAAE,CAAA;IAC1B,iBAAiB;IACjB,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,qEAAqE;IACrE,SAAS,CAAC,EAAE,kBAAkB,CAAA;CAC/B;AA+DH,QAAA,MAAM,SAAS,0BAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/IncremarkCode.svelte

@@ -36,7 +36,7 @@
     mermaidDelay = 500,
     customCodeBlocks,
     codeBlockConfigs,
-    blockStatus = 'completed',
+    blockStatus = 'pending',
     defaultCodeComponent
   }: Props = $props()
 
@@ -79,10 +79,12 @@
   />
 {:else}
   {@const Component = DefaultCodeBlock}
-  <Component 
-    {node} 
-    {theme} 
-    {fallbackTheme} 
-    {disableHighlight} 
+  <!-- 默认代码块渲染（支持用户自定义，使用 stream 高亮）-->
+  <Component
+    {node}
+    {theme}
+    {fallbackTheme}
+    {disableHighlight}
+    {blockStatus}
   />
 {/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;AACjC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAKrC;;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;IAChD,yCAAyC;IACzC,oBAAoB,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,CAAA;CACtC;AAwDH,QAAA,MAAM,aAAa,0BAAwC,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;AACjC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAKrC;;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;IAChD,yCAAyC;IACzC,oBAAoB,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,CAAA;CACtC;AAyDH,QAAA,MAAM,aAAa,0BAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/IncremarkCodeDefault.svelte

@@ -6,6 +6,7 @@
   import SvgIcon from './SvgIcon.svelte'
   import { useShiki } from '../stores/useShiki.svelte'
   import { useLocale } from '../stores/useLocale.svelte'
+  import CachedCodeRenderer from './CachedCodeRenderer.svelte'
 
   /**
    * 组件 Props
@@ -19,18 +20,21 @@
     fallbackTheme?: string
     /** 是否禁用代码高亮 */
     disableHighlight?: boolean
+    /** block 状态 */
+    blockStatus?: 'pending' | 'stable' | 'completed'
   }
 
   let {
     node,
     theme = 'github-dark',
     fallbackTheme = 'github-dark',
-    disableHighlight = false
+    disableHighlight = false,
+    blockStatus = 'pending'
   }: Props = $props()
 
   // 状态
   let copied = $state(false)
-  let highlightedHtml = $state('')
+  let isLanguageLoaded = $state(false)
 
   // 使用 Shiki 单例管理器
   const shiki = useShiki(() => theme)
@@ -42,22 +46,49 @@
   const language = $derived(node.lang || 'text')
   const code = $derived(node.value)
 
-  /**
-   * 动态加载 shiki 并高亮
-   */
-  async function doHighlight() {
-    if (!code || disableHighlight) {
-      highlightedHtml = ''
+  // 是否应该启用高亮（需要有代码内容才开始高亮逻辑）
+  const shouldEnableHighlight = $derived(!disableHighlight && code && code.length > 0)
+
+  // 初始化 highlighter 并加载语言
+  $effect(() => {
+    // 如果不需要高亮，直接返回
+    if (!shouldEnableHighlight) {
       return
     }
 
-    try {
-      const html = await shiki.highlight(code, language, fallbackTheme)
-      highlightedHtml = html
-    } catch (e) {
-      highlightedHtml = ''
-    }
-  }
+    // 使用立即执行的异步函数
+    ;(async () => {
+      if (!shiki.highlighterInfo) {
+        await shiki.initHighlighter()
+      } else if (language && language !== 'text') {
+        // 检查语言是否已加载
+        if (!shiki.highlighterInfo.loadedLanguages.has(language as any)) {
+          try {
+            isLanguageLoaded = false
+            // 检查语言是否被 shiki 支持
+            const supportedLangs = shiki.highlighterInfo.highlighter.getLoadedLanguages()
+            const bundledLangs = await import('shiki').then(m => Object.keys(m.bundledLanguages || {}))
+            const isSupported = supportedLangs.includes(language) || bundledLangs.includes(language)
+
+            if (isSupported) {
+              await shiki.highlighterInfo.highlighter.loadLanguage(language as any)
+              shiki.highlighterInfo.loadedLanguages.add(language as any)
+            }
+            // 无论是否支持，都标记为已加载（不支持的语言会 fallback 到纯文本显示）
+            isLanguageLoaded = true
+          } catch {
+            // 语言加载失败，标记为已加载（回退到无高亮）
+            isLanguageLoaded = true
+          }
+        } else {
+          isLanguageLoaded = true
+        }
+      } else {
+        // text 语言不需要加载
+        isLanguageLoaded = true
+      }
+    })()
+  })
 
   let copyTimeoutId: ReturnType<typeof setTimeout> | null = null
 
@@ -79,11 +110,6 @@
   onDestroy(() => {
     if (copyTimeoutId) clearTimeout(copyTimeoutId)
   })
-
-  // 监听代码、主题、语言变化并重新渲染
-  $effect(() => {
-    doHighlight()
-  })
 </script>
 
 <div class="incremark-code">
@@ -100,16 +126,19 @@
     </button>
   </div>
   <div class="code-content">
-    {#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 class="shiki-wrapper">
+      {#if shouldEnableHighlight && shiki.highlighterInfo && isLanguageLoaded}
+        <!-- Stream 高亮（只有当存在代码内容且语言加载完成后才渲染） -->
+        <CachedCodeRenderer
+          code={code}
+          lang={language}
+          theme={theme}
+          highlighter={shiki.highlighterInfo.highlighter}
+        />
+      {:else}
+        <!-- 无高亮模式（禁用高亮、无代码内容、或语言未加载完成时显示） -->
+        <pre class="code-fallback"><code>{code}</code></pre>
+      {/if}
+    </div>
   </div>
 </div>

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

@@ -11,6 +11,8 @@ interface Props {
     fallbackTheme?: string;
     /** 是否禁用代码高亮 */
     disableHighlight?: boolean;
+    /** block 状态 */
+    blockStatus?: 'pending' | 'stable' | 'completed';
 }
 declare const IncremarkCodeDefault: import("svelte").Component<Props, {}, "">;
 type IncremarkCodeDefault = ReturnType<typeof IncremarkCodeDefault>;

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

@@ -1 +1 @@
-{"version":3,"file":"IncremarkCodeDefault.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkCodeDefault.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAS/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;CAC3B;AAoGH,QAAA,MAAM,oBAAoB,2CAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"IncremarkCodeDefault.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkCodeDefault.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAU/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,eAAe;IACf,WAAW,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,WAAW,CAAA;CACjD;AA0HH,QAAA,MAAM,oBAAoB,2CAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/components/IncremarkContent.svelte

@@ -4,10 +4,9 @@
 -->
 
 <script lang="ts">
-  import { useIncremark, type UseIncremarkOptions } from '../stores/useIncremark'
+  import { useIncremark } from '../stores/useIncremark.svelte.ts'
   import type { IncremarkContentProps } from './types'
   import Incremark from './Incremark.svelte'
-  import { get } from 'svelte/store'
   import { untrack } from 'svelte'
 
   let {
@@ -24,7 +23,7 @@
   }: IncremarkContentProps = $props()
 
   // 创建 incremark 实例（只创建一次）
-  const incremarkInstance = untrack(() => useIncremark({
+  const incremark = untrack(() => useIncremark({
     gfm: incremarkOptions?.gfm ?? true,
     htmlTree: incremarkOptions?.htmlTree ?? true,
     containers: incremarkOptions?.containers ?? true,
@@ -33,9 +32,6 @@
     typewriter: incremarkOptions?.typewriter
   }))
 
-  // 解构出需要的方法和状态
-  const { blocks, append, finalize, render, reset, updateOptions, isDisplayComplete, markdown, typewriter } = incremarkInstance
-
   // 计算 parser 配置的稳定 key（用于检测变化）
   // astBuilder 用名称标识，因为它是类不能 JSON.stringify
   function getConfigKey() {
@@ -55,7 +51,7 @@
     if (prevConfigKey !== currentConfigKey) {
       prevConfigKey = currentConfigKey
       // 使用 updateOptions 动态更新配置（包括引擎切换）
-      updateOptions({
+      incremark.updateOptions({
         gfm: incremarkOptions?.gfm ?? true,
         htmlTree: incremarkOptions?.htmlTree ?? true,
         containers: incremarkOptions?.containers ?? true,
@@ -68,7 +64,7 @@
   // 监听 incremarkOptions 的变化，更新 typewriter 配置
   $effect(() => {
     if (incremarkOptions?.typewriter) {
-      typewriter.setOptions(incremarkOptions.typewriter)
+      incremark.typewriter.setOptions(incremarkOptions.typewriter)
     }
   })
 
@@ -87,13 +83,13 @@
       const streamGen = stream()
 
       for await (const chunk of streamGen) {
-        append(chunk)
+        incremark.append(chunk)
       }
 
-      finalize()
+      incremark.finalize()
     } catch (error) {
       console.error('Stream error: ', error)
-      finalize()
+      incremark.finalize()
     } finally {
       isStreaming = false
     }
@@ -102,16 +98,16 @@
   function handleContentInput(newContent?: string, oldContent?: string) {
     if (!newContent) {
       if (oldContent) {
-        reset()
+        incremark.reset()
       }
       return
     }
 
     if (newContent?.startsWith(oldContent ?? '')) {
       const delta = newContent.slice((oldContent || '').length)
-      append(delta)
+      incremark.append(delta)
     } else {
-      render(newContent)
+      incremark.render(newContent)
     }
   }
 
@@ -127,15 +123,15 @@
 
   // 监听 isFinished 变化
   $effect(() => {
-    if (isFinished && content === get(markdown)) {
-      finalize()
+    if (isFinished && content === incremark.markdown) {
+      incremark.finalize()
     }
   })
 </script>
 
 <Incremark
-  blocks={$blocks}
-  isDisplayComplete={$isDisplayComplete}
+  blocks={incremark.blocks}
+  isDisplayComplete={incremark.isDisplayComplete}
   {pendingClass}
   {showBlockStatus}
   {components}

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

@@ -1 +1 @@
-{"version":3,"file":"IncremarkContent.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkContent.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AA6IpD,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"IncremarkContent.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkContent.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAwIpD,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/IncremarkFootnotes.svelte

@@ -5,20 +5,18 @@
 
 <script lang="ts">
   import type { RootContent } from 'mdast'
-  import { getDefinitionsContext } from '../context/definitionsContext'
+  import { getDefinitionsContext } from '../context/definitionsContext.svelte.ts'
   import IncremarkRenderer from './IncremarkRenderer.svelte'
 
   const context = getDefinitionsContext()
-  // 解构 store 以便使用 $ 语法订阅
-  const { footnoteDefinitions, footnoteReferenceOrder } = context
 
   /**
    * 按引用顺序排列的脚注列表
    * 只显示已有定义的脚注
    */
   const orderedFootnotes = $derived.by(() => {
-    const order = $footnoteReferenceOrder
-    const definitions = $footnoteDefinitions
+    const order = context.getFootnoteReferenceOrder()
+    const definitions = context.getFootnoteDefinitions()
     
     return order
       .map(identifier => ({
@@ -68,4 +66,3 @@
     </ol>
   </section>
 {/if}
-

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

@@ -1 +1 @@
-{"version":3,"file":"IncremarkFootnotes.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkFootnotes.svelte.ts"],"names":[],"mappings":"AAuEA,QAAA,MAAM,kBAAkB,2DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"IncremarkFootnotes.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkFootnotes.svelte.ts"],"names":[],"mappings":"AAoEA,QAAA,MAAM,kBAAkB,2DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/components/IncremarkInline.svelte

@@ -12,7 +12,7 @@
     getStableText,
     isHtmlNode
   } from '@incremark/shared'
-  import { getDefinitionsContext } from '../context/definitionsContext'
+  import { getDefinitionsContext } from '../context/definitionsContext.svelte.ts'
   import IncremarkMath from './IncremarkMath.svelte'
   import IncremarkHtmlElement from './IncremarkHtmlElement.svelte'
   import IncremarkInline from './IncremarkInline.svelte'
@@ -71,9 +71,9 @@
 
   // 获取 definitions context
   const context = getDefinitionsContext()
-  // 解构 store 以便使用 $ 语法订阅
-  const { definations } = context
 
+  // 使用 getter 获取 definitions
+  const definitions = $derived(context.getDefinations())
 
   /**
    * 获取节点的 chunks（类型安全）
@@ -156,12 +156,12 @@
 
   <!-- 引用式图片（imageReference） -->
   {#if isImageReference(node)}
-    {#if $definations && $definations[node.identifier]}
+    {#if definitions && definitions[node.identifier]}
       <img
         class="incremark-image incremark-reference-image"
-        src={$definations[node.identifier].url}
+        src={definitions[node.identifier].url}
         alt={node.alt || ''}
-        title={$definations[node.identifier].title || undefined}
+        title={definitions[node.identifier].title || undefined}
         loading="lazy"
       />
     {:else}
@@ -174,11 +174,11 @@
 
   <!-- 引用式链接（linkReference） -->
   {#if isLinkReference(node)}
-    {#if $definations && $definations[node.identifier]}
+    {#if definitions && definitions[node.identifier]}
       <a
         class="incremark-link incremark-reference-link"
-        href={$definations[node.identifier].url}
-        title={$definations[node.identifier].title || undefined}
+        href={definitions[node.identifier].url}
+        title={definitions[node.identifier].title || undefined}
         target="_blank"
         rel="noopener noreferrer"
       >
@@ -213,4 +213,3 @@
     </del>
   {/if}
 {/each}
-

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

@@ -1 +1 @@
-{"version":3,"file":"IncremarkInline.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkInline.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAiC,MAAM,OAAO,CAAA;AAW3E,OAAO,eAAe,MAAM,0BAA0B,CAAC;AAGrD;;GAEG;AACH,UAAU,KAAK;IACb,aAAa;IACb,KAAK,EAAE,eAAe,EAAE,CAAA;CACzB;AAwLH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"IncremarkInline.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkInline.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAiC,MAAM,OAAO,CAAA;AAW3E,OAAO,eAAe,MAAM,0BAA0B,CAAC;AAGrD;;GAEG;AACH,UAAU,KAAK;IACb,aAAa;IACb,KAAK,EAAE,eAAe,EAAE,CAAA;CACzB;AAuLH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}