@incremark/svelte 0.2.3 → 0.2.4

package/dist/components/AutoScrollContainer.svelte

@@ -5,11 +5,12 @@
 
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements';
 
   /**
    * 组件 Props
    */
-  interface Props {
+  interface Props extends HTMLAttributes<HTMLDivElement>{
     /** 是否启用自动滚动 */
     enabled?: boolean
     /** 触发自动滚动的底部阈值（像素） */

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

@@ -1,7 +1,8 @@
+import type { HTMLAttributes } from 'svelte/elements';
 /**
  * 组件 Props
  */
-interface Props {
+interface Props extends HTMLAttributes<HTMLDivElement> {
     /** 是否启用自动滚动 */
     enabled?: boolean;
     /** 触发自动滚动的底部阈值（像素） */

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

@@ -1 +1 @@
-{"version":3,"file":"AutoScrollContainer.svelte.d.ts","sourceRoot":"","sources":["../../src/components/AutoScrollContainer.svelte.ts"],"names":[],"mappings":"AAME;;GAEG;AACH,UAAU,KAAK;IACb,eAAe;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sBAAsB;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW;IACX,QAAQ,CAAC,EAAE,cAAc,CAAA;IACzB,UAAU;IACV,QAAQ,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAA;CACpC;AAmJH,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"AutoScrollContainer.svelte.d.ts","sourceRoot":"","sources":["../../src/components/AutoScrollContainer.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD;;GAEG;AACH,UAAU,KAAM,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpD,eAAe;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sBAAsB;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW;IACX,QAAQ,CAAC,EAAE,cAAc,CAAA;IACzB,UAAU;IACV,QAAQ,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAA;CACpC;AAoJH,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/components/Incremark.svelte

@@ -4,8 +4,9 @@
 -->
 
 <script lang="ts">
+  import type { Component } from 'svelte'
   import type { Readable } from 'svelte/store'
-  import type { ParsedBlock, RootContent } from '@incremark/core'
+  import type { RootContent } from '@incremark/core'
   import type { HTML } from 'mdast'
   
   import { getDefinitionsContext } from '../context/definitionsContext'
@@ -24,6 +25,7 @@
   import IncremarkHtmlElement from './IncremarkHtmlElement.svelte'
   import IncremarkDefault from './IncremarkDefault.svelte'
   import IncremarkFootnotes from './IncremarkFootnotes.svelte'
+  import IncremarkRenderer from './IncremarkRenderer.svelte'
 
   /**
    * 检查是否是 html 节点
@@ -40,6 +42,10 @@
     blocks?: BlockWithStableId[] | Readable<BlockWithStableId[]>
     /** 自定义组件映射，key 为节点类型 */
     components?: ComponentMap
+    /** 自定义容器组件映射，key 为容器名称（如 'warning', 'info'） */
+    customContainers?: Record<string, Component<any>>
+    /** 自定义代码块组件映射，key 为代码语言名称（如 'echart', 'mermaid'） */
+    customCodeBlocks?: Record<string, Component<any>>
     /** 待处理块的样式类名 */
     pendingClass?: string
     /** 已完成块的样式类名 */
@@ -53,6 +59,8 @@
   let {
     blocks = [],
     components = {},
+    customContainers = {},
+    customCodeBlocks = {},
     pendingClass = 'incremark-pending',
     completedClass = 'incremark-completed',
     showBlockStatus = false,
@@ -102,13 +110,6 @@
     ...components
   })
 
-  /**
-   * 获取组件
-   */
-  function getComponent(type: string): any {
-    return mergedComponents[type] || components?.default || IncremarkDefault
-  }
-
   // 处理 blocks（可能是 store 或数组）
   const blocksArray = $derived.by(() => {
     if (incremark) {
@@ -132,16 +133,13 @@
         <div
           class="incremark-block {block.status === 'completed' ? completedClass : pendingClass} {showBlockStatus ? 'incremark-show-status' : ''} {(block as BlockWithStableId).isLastPending ? 'incremark-last-pending' : ''}"
         >
-          <!-- HTML 节点：渲染为代码块显示源代码 -->
-          {#if isHtmlNode(block.node)}
-            <pre class="incremark-html-code"><code>{block.node.value}</code></pre>
-          {:else}
-            <!-- 其他节点：使用对应组件 -->
-            {@const Component = getComponent(block.node.type)}
-            {#if Component}
-              <Component node={block.node} />
-            {/if}
-          {/if}
+          <!-- 使用 IncremarkRenderer，传递 customContainers 和 customCodeBlocks -->
+          <IncremarkRenderer 
+            node={block.node} 
+            customContainers={customContainers}
+            customCodeBlocks={customCodeBlocks}
+            blockStatus={block.status}
+          />
         </div>
       {/if}
     {/each}
@@ -152,16 +150,13 @@
         <div
           class="incremark-block {block.status === 'completed' ? completedClass : pendingClass} {showBlockStatus ? 'incremark-show-status' : ''} {block.isLastPending ? 'incremark-last-pending' : ''}"
         >
-          <!-- HTML 节点：渲染为代码块显示源代码 -->
-          {#if isHtmlNode(block.node)}
-            <pre class="incremark-html-code"><code>{block.node.value}</code></pre>
-          {:else}
-            <!-- 其他节点：使用对应组件 -->
-            {@const Component = getComponent(block.node.type)}
-            {#if Component}
-              <Component node={block.node} />
-            {/if}
-          {/if}
+          <!-- 使用 IncremarkRenderer，传递 customContainers 和 customCodeBlocks -->
+          <IncremarkRenderer 
+            node={block.node} 
+            customContainers={customContainers}
+            customCodeBlocks={customCodeBlocks}
+            blockStatus={block.status}
+          />
         </div>
       {/if}
     {/each}

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

@@ -1,3 +1,4 @@
+import type { Component } from 'svelte';
 import type { Readable } from 'svelte/store';
 import type { UseIncremarkReturn } from '../stores/useIncremark';
 import type { ComponentMap, BlockWithStableId } from './types';
@@ -9,6 +10,10 @@ interface Props {
     blocks?: BlockWithStableId[] | Readable<BlockWithStableId[]>;
     /** 自定义组件映射，key 为节点类型 */
     components?: ComponentMap;
+    /** 自定义容器组件映射，key 为容器名称（如 'warning', 'info'） */
+    customContainers?: Record<string, Component<any>>;
+    /** 自定义代码块组件映射，key 为代码语言名称（如 'echart', 'mermaid'） */
+    customCodeBlocks?: Record<string, Component<any>>;
     /** 待处理块的样式类名 */
     pendingClass?: string;
     /** 已完成块的样式类名 */
@@ -18,7 +23,7 @@ interface Props {
     /** 可选：useIncremark 返回的对象（用于自动注入数据） */
     incremark?: UseIncremarkReturn;
 }
-declare const Incremark: import("svelte").Component<Props, {}, "">;
+declare const Incremark: Component<Props, {}, "">;
 type Incremark = ReturnType<typeof Incremark>;
 export default Incremark;
 //# sourceMappingURL=Incremark.svelte.d.ts.map

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,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;AAe5D;;GAEG;AACH,UAAU,KAAK;IACb,wCAAwC;IACxC,MAAM,CAAC,EAAE,iBAAiB,EAAE,GAAG,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAA;IAC5D,wBAAwB;IACxB,UAAU,CAAC,EAAE,YAAY,CAAA;IACzB,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;AAmKH,QAAA,MAAM,SAAS,2CAAwC,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,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAgB5D;;GAEG;AACH,UAAU,KAAK;IACb,wCAAwC;IACxC,MAAM,CAAC,EAAE,iBAAiB,EAAE,GAAG,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAA;IAC5D,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,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;AAgJH,QAAA,MAAM,SAAS,0BAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/IncremarkCode.svelte

@@ -19,13 +19,19 @@
     disableHighlight?: boolean
     /** Mermaid 渲染延迟（毫秒），用于流式输入时防抖 */
     mermaidDelay?: number
+    /** 自定义代码块组件映射，key 为代码语言名称 */
+    customCodeBlocks?: Record<string, any>
+    /** 块状态，用于判断是否使用自定义组件 */
+    blockStatus?: 'pending' | 'stable' | 'completed'
   }
 
   let {
     node,
     theme = 'github-dark',
     disableHighlight = false,
-    mermaidDelay = 500
+    mermaidDelay = 500,
+    customCodeBlocks,
+    blockStatus = 'completed'
   }: Props = $props()
 
   // 状态
@@ -55,6 +61,18 @@
   const code = $derived(node.value)
   const isMermaid = $derived(language === 'mermaid')
 
+  // 检查是否有自定义代码块组件
+  const CustomCodeBlock = $derived.by(() => {
+    // 如果代码块还在 pending 状态，不使用自定义组件
+    if (blockStatus === 'pending') {
+      return null
+    }
+    return customCodeBlocks?.[language] || null
+  })
+
+  // 是否使用自定义组件
+  const useCustomComponent = $derived(!!CustomCodeBlock)
+
   /**
    * 切换 Mermaid 视图模式
    */
@@ -210,8 +228,15 @@
   })
 </script>
 
+<!-- 自定义代码块组件 -->
+{#if useCustomComponent && CustomCodeBlock}
+  <svelte:component 
+    this={CustomCodeBlock} 
+    codeStr={code} 
+    lang={language}
+  />
 <!-- Mermaid 图表 -->
-{#if isMermaid}
+{:else if isMermaid}
   <div class="incremark-mermaid">
     <div class="mermaid-header">
       <span class="language">MERMAID</span>

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

@@ -11,6 +11,10 @@ interface Props {
     disableHighlight?: boolean;
     /** Mermaid 渲染延迟（毫秒），用于流式输入时防抖 */
     mermaidDelay?: number;
+    /** 自定义代码块组件映射，key 为代码语言名称 */
+    customCodeBlocks?: Record<string, any>;
+    /** 块状态，用于判断是否使用自定义组件 */
+    blockStatus?: 'pending' | 'stable' | 'completed';
 }
 declare const IncremarkCode: import("svelte").Component<Props, {}, "">;
 type IncremarkCode = ReturnType<typeof IncremarkCode>;

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,eAAe;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAkQH,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,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,wBAAwB;IACxB,WAAW,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,WAAW,CAAA;CACjD;AAmRH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/IncremarkContainer.svelte

@@ -0,0 +1,83 @@
+<!--
+  @file IncremarkContainer.svelte - 容器组件
+  @description 用于渲染自定义容器节点
+-->
+
+<script lang="ts">
+  import type { RootContent } from 'mdast'
+  import IncremarkRenderer from './IncremarkRenderer.svelte'
+
+  /**
+   * 容器节点类型定义
+   * 根据 directive 解析后的结构
+   */
+  export interface ContainerNode {
+    type: 'containerDirective' | 'leafDirective' | 'textDirective'
+    name: string
+    attributes?: Record<string, string>
+    children?: RootContent[]
+  }
+
+  /**
+   * 组件 Props
+   */
+  interface Props {
+    node: ContainerNode
+    customContainers?: Record<string, any>
+  }
+
+  let { node, customContainers = {} }: Props = $props()
+
+  /**
+   * 解析 attributes 字符串为对象
+   * directive 的 attributes 可能是字符串格式，需要解析
+   */
+  function parseOptions(attributes?: Record<string, string>): Record<string, any> {
+    if (!attributes) return {}
+    
+    const options: Record<string, any> = {}
+    for (const [key, value] of Object.entries(attributes)) {
+      // 尝试解析 JSON 值
+      try {
+        options[key] = JSON.parse(value)
+      } catch {
+        // 如果不是 JSON，直接使用字符串值
+        options[key] = value
+      }
+    }
+    return options
+  }
+
+  const containerName = $derived(node.name)
+  const options = $derived(parseOptions(node.attributes))
+  const CustomContainer = $derived(customContainers?.[containerName])
+
+  // 如果没有自定义容器组件，使用默认渲染
+  const hasCustomContainer = $derived(!!CustomContainer)
+</script>
+
+{#if hasCustomContainer && CustomContainer}
+  <!-- 如果有自定义容器组件，使用自定义组件 -->
+  <CustomContainer
+    name={containerName}
+    options={options}
+  >
+    {#if node.children && node.children.length > 0}
+      {#each node.children as child, index (index)}
+        <IncremarkRenderer node={child} />
+      {/each}
+    {/if}
+  </CustomContainer>
+{:else}
+  <!-- 如果没有自定义容器组件，使用默认渲染 -->
+  <div class="incremark-container incremark-container-{containerName}">
+    {#if node.children && node.children.length > 0}
+      <div class="incremark-container-content">
+        {#each node.children as child, index (index)}
+          <IncremarkRenderer node={child} />
+        {/each}
+      </div>
+    {/if}
+  </div>
+{/if}
+

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

@@ -0,0 +1,22 @@
+import type { RootContent } from 'mdast';
+/**
+ * 容器节点类型定义
+ * 根据 directive 解析后的结构
+ */
+export interface ContainerNode {
+    type: 'containerDirective' | 'leafDirective' | 'textDirective';
+    name: string;
+    attributes?: Record<string, string>;
+    children?: RootContent[];
+}
+/**
+ * 组件 Props
+ */
+interface Props {
+    node: ContainerNode;
+    customContainers?: Record<string, any>;
+}
+declare const IncremarkContainer: import("svelte").Component<Props, {}, "">;
+type IncremarkContainer = ReturnType<typeof IncremarkContainer>;
+export default IncremarkContainer;
+//# sourceMappingURL=IncremarkContainer.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IncremarkContainer.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkContainer.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAItC;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,oBAAoB,GAAG,eAAe,GAAG,eAAe,CAAA;IAC9D,IAAI,EAAE,MAAM,CAAA;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACnC,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAA;CACzB;AAED;;GAEG;AACH,UAAU,KAAK;IACb,IAAI,EAAE,aAAa,CAAA;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CACvC;AAgEH,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/components/IncremarkFootnotes.svelte

@@ -9,19 +9,10 @@
   import { getDefinitionsContext } from '../context/definitionsContext'
   import IncremarkRenderer from './IncremarkRenderer.svelte'
 
-  // 从 context 获取数据
-  let definations: Readable<Record<string, any>> | null = null
-  let footnoteDefinitions: Readable<Record<string, FootnoteDefinition>> | null = null
-  let footnoteReferenceOrder: Readable<string[]> | null = null
 
-  try {
-    const context = getDefinitionsContext()
-    definations = context.definations
-    footnoteDefinitions = context.footnoteDefinitions
-    footnoteReferenceOrder = context.footnoteReferenceOrder
-  } catch {
-    // Context 不存在
-  }
+  const context = getDefinitionsContext()
+  const footnoteDefinitions = $derived(context?.footnoteDefinitions ?? {});
+  const footnoteReferenceOrder = $derived(context?.footnoteReferenceOrder ?? []);
 
   /**
    * 按引用顺序排列的脚注列表

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":"AAqFA,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":"AA4EA,QAAA,MAAM,kBAAkB,2DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/components/IncremarkInline.svelte

@@ -4,7 +4,6 @@
 -->
 
 <script lang="ts">
-  import type { Readable } from 'svelte/store'
   import type { PhrasingContent, ImageReference, LinkReference } from 'mdast'
   import type { TextChunk } from '@incremark/core'
   import {
@@ -72,25 +71,9 @@
 
   // 获取 definitions context（可能不存在）
   // 使用 $derived 来确保响应式
-  const definations = $derived.by(() => {
-    try {
-      const context = getDefinitionsContext()
-      return context.definations
-    } catch {
-      // Context 不存在，返回 null
-      return null
-    }
-  })
-  
-  const footnoteDefinitions = $derived.by(() => {
-    try {
-      const context = getDefinitionsContext()
-      return context.footnoteDefinitions
-    } catch {
-      // Context 不存在，返回 null
-      return null
-    }
-  })
+  const context = getDefinitionsContext()
+  const definations = $derived(context?.definations ?? {});
+
 
   /**
    * 获取节点的 chunks（类型安全）
@@ -173,7 +156,7 @@
 
   <!-- 引用式图片（imageReference） -->
   {#if isImageReference(node)}
-    {#if definations && $definations[node.identifier]}
+    {#if $definations && $definations[node.identifier]}
       <img
         class="incremark-image incremark-reference-image"
         src={$definations[node.identifier].url}
@@ -191,7 +174,7 @@
 
   <!-- 引用式链接（linkReference） -->
   {#if isLinkReference(node)}
-    {#if definations && $definations[node.identifier]}
+    {#if $definations && $definations[node.identifier]}
       <a
         class="incremark-link incremark-reference-link"
         href={$definations[node.identifier].url}

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":"AAIA,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;AAyMH,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;AAwLH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/components/IncremarkList.svelte

@@ -1,11 +1,12 @@
 <!--
   @file IncremarkList.svelte - 列表组件
-  @description 渲染 Markdown 列表（有序列表和无序列表），支持任务列表
+  @description 渲染 Markdown 列表（有序列表和无序列表），支持任务列表和嵌套列表
 -->
 
 <script lang="ts">
-  import type { List, ListItem, PhrasingContent } from 'mdast'
+  import type { List, ListItem, PhrasingContent, BlockContent } from 'mdast'
   import IncremarkInline from './IncremarkInline.svelte'
+  import IncremarkList from './IncremarkList.svelte';
 
   /**
    * 组件 Props
@@ -30,12 +31,12 @@
   )
 
   /**
-   * 获取列表项内容
-   * 
+   * 获取列表项的内联内容（来自第一个 paragraph）
+   *
    * @param item - 列表项节点
    * @returns 行内内容数组
    */
-  function getItemContent(item: ListItem): PhrasingContent[] {
+  function getItemInlineContent(item: ListItem): PhrasingContent[] {
     const firstChild = item.children[0]
     if (firstChild?.type === 'paragraph') {
       return firstChild.children as PhrasingContent[]
@@ -43,9 +44,26 @@
     return []
   }
 
+  /**
+   * 获取列表项的块级子节点（嵌套列表、代码块等）
+   * 排除第一个 paragraph，因为它已经被 getItemInlineContent 处理
+   *
+   * @param item - 列表项节点
+   * @returns 块级子节点数组
+   */
+  function getItemBlockChildren(item: ListItem): BlockContent[] {
+    return item.children.filter((child, index) => {
+      // 第一个 paragraph 已经被处理为内联内容
+      if (index === 0 && child.type === 'paragraph') {
+        return false
+      }
+      return true
+    }) as BlockContent[]
+  }
+
   /**
    * 判断列表项是否是任务项
-   * 
+   *
    * @param item - 列表项节点
    * @returns 是否是任务项
    */
@@ -54,30 +72,37 @@
   }
 </script>
 
-<svelte:element 
-  this={tag} 
+<svelte:element
+  this={tag}
   class="incremark-list"
   class:task-list={isTaskList}
 >
   {#each node.children as item, index (index)}
-    <li 
+    <li
       class="incremark-list-item"
       class:task-item={isTaskItem(item)}
     >
       {#if isTaskItem(item)}
         <label class="task-label">
-          <input 
-            type="checkbox" 
-            checked={item.checked} 
-            disabled 
+          <input
+            type="checkbox"
+            checked={item.checked}
+            disabled
             class="checkbox"
           />
           <span class="task-content">
-            <IncremarkInline nodes={getItemContent(item)} />
+            <IncremarkInline nodes={getItemInlineContent(item)} />
           </span>
         </label>
       {:else}
-        <IncremarkInline nodes={getItemContent(item)} />
+        <IncremarkInline nodes={getItemInlineContent(item)} />
+        <!-- 递归渲染嵌套列表和其他块级内容 -->
+        {#each getItemBlockChildren(item) as child, childIndex (childIndex)}
+          {#if child.type === 'list'}
+            <IncremarkList node={child} />
+          {/if}
+          <!-- 其他块级内容可以在这里扩展 -->
+        {/each}
       {/if}
     </li>
   {/each}

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

@@ -1,4 +1,5 @@
 import type { List } from 'mdast';
+import IncremarkList from './IncremarkList.svelte';
 /**
  * 组件 Props
  */

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

@@ -1 +1 @@
-{"version":3,"file":"IncremarkList.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkList.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAA6B,MAAM,OAAO,CAAA;AAI1D;;GAEG;AACH,UAAU,KAAK;IACb,WAAW;IACX,IAAI,EAAE,IAAI,CAAA;CACX;AAmEH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"IncremarkList.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkList.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAA2C,MAAM,OAAO,CAAA;AAE1E,OAAO,aAAa,MAAM,wBAAwB,CAAC;AAGjD;;GAEG;AACH,UAAU,KAAK;IACb,WAAW;IACX,IAAI,EAAE,IAAI,CAAA;CACX;AA4FH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/IncremarkRenderer.svelte

@@ -15,16 +15,25 @@
   import IncremarkMath from './IncremarkMath.svelte'
   import IncremarkHtmlElement from './IncremarkHtmlElement.svelte'
   import IncremarkDefault from './IncremarkDefault.svelte'
+  import IncremarkContainer, { type ContainerNode } from './IncremarkContainer.svelte'
 
   /**
    * 组件 Props
    */
   interface Props {
     /** 要渲染的节点 */
-    node: RootContent
+    node: RootContent | ContainerNode
+    customContainers?: Record<string, any>
+    customCodeBlocks?: Record<string, any>
+    blockStatus?: 'pending' | 'stable' | 'completed'
   }
 
-  let { node }: Props = $props()
+  let { 
+    node, 
+    customContainers,
+    customCodeBlocks,
+    blockStatus
+  }: Props = $props()
 
   /**
    * 组件映射
@@ -52,14 +61,39 @@
   /**
    * 检查是否是 html 节点
    */
-  function isHtmlNode(node: RootContent): node is HTML {
+  function isHtmlNode(node: RootContent | ContainerNode): node is HTML {
     return node.type === 'html'
   }
+
+  /**
+   * 检查是否是容器节点
+   */
+  function isContainerNode(node: RootContent | ContainerNode): node is ContainerNode {
+    return (node as any).type === 'containerDirective' || 
+           (node as any).type === 'leafDirective' || 
+           (node as any).type === 'textDirective'
+  }
 </script>
 
 <!-- HTML 节点：渲染为代码块显示源代码 -->
 {#if isHtmlNode(node)}
   <pre class="incremark-html-code"><code>{node.value}</code></pre>
+<!-- 容器节点：使用容器组件，传递 customContainers -->
+{:else if isContainerNode(node)}
+  <IncremarkContainer 
+    node={node} 
+    customContainers={customContainers}
+  />
+<!-- 代码节点：特殊处理，传递 customCodeBlocks 和 blockStatus -->
+{:else if node.type === 'code'}
+  {@const Component = getComponent('code')}
+  {#if Component}
+    <Component 
+      node={node} 
+      customCodeBlocks={customCodeBlocks}
+      blockStatus={blockStatus}
+    />
+  {/if}
 {:else}
   <!-- 其他节点：使用对应组件 -->
   {@const Component = getComponent(node.type)}

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

@@ -1,10 +1,14 @@
 import type { RootContent } from 'mdast';
+import { type ContainerNode } from './IncremarkContainer.svelte';
 /**
  * 组件 Props
  */
 interface Props {
     /** 要渲染的节点 */
-    node: RootContent;
+    node: RootContent | ContainerNode;
+    customContainers?: Record<string, any>;
+    customCodeBlocks?: Record<string, any>;
+    blockStatus?: 'pending' | 'stable' | 'completed';
 }
 declare const IncremarkRenderer: import("svelte").Component<Props, {}, "">;
 type IncremarkRenderer = ReturnType<typeof IncremarkRenderer>;

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

@@ -1 +1 @@
-{"version":3,"file":"IncremarkRenderer.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkRenderer.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAQ,MAAM,OAAO,CAAA;AAa5C;;GAEG;AACH,UAAU,KAAK;IACb,aAAa;IACb,IAAI,EAAE,WAAW,CAAA;CAClB;AAgEH,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"IncremarkRenderer.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkRenderer.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAQ,MAAM,OAAO,CAAA;AAW9C,OAA2B,EAAE,KAAK,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAGnF;;GAEG;AACH,UAAU,KAAK;IACb,aAAa;IACb,IAAI,EAAE,WAAW,GAAG,aAAa,CAAA;IACjC,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACtC,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACtC,WAAW,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,WAAW,CAAA;CACjD;AAwFH,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/package.json

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