@incremark/vue 0.2.6 → 0.3.0

package/README.en.md

@@ -1,15 +1,18 @@
 # @incremark/vue
 
-Vue 3 integration for Incremark.
+Vue 3 integration library for Incremark, providing high-performance streaming Markdown rendering components.
 
 **[🇨🇳 中文](./README.md)** | 🇺🇸 English
 
-## Features
+## Core Advantages
 
-- 📦 **Out of the Box** - Provides `useIncremark` composable and `<Incremark>` component
-- 🎨 **Customizable** - Support for custom render components
-- ⚡ **High Performance** - Optimized with `shallowRef` and `markRaw`
-- 🔧 **DevTools** - Built-in developer tools
+- 📦 **Out of the Box** - Provides `IncremarkContent` component and `useIncremark` composable
+- ⚡ **Extreme Performance** - Incremental parsing with O(n) complexity, dual-engine support
+- ⌨️ **Typewriter Effect** - Built-in animation effects (fade-in, typing)
+- 🎨 **Highly Customizable** - Custom components, code blocks, containers
+- 🎯 **Theme System** - Built-in ThemeProvider with light/dark themes
+- 📜 **Auto Scroll** - Built-in AutoScrollContainer component
+- 🔧 **DevTools** - Built-in developer debugging tools
 
 ## Installation
 
@@ -19,20 +22,56 @@ pnpm add @incremark/core @incremark/vue
 
 ## Quick Start
 
-**1. Import Styles**
+### Recommended: IncremarkContent Component
 
-```ts
+```vue
+<script setup>
+import { ref } from 'vue'
+import { IncremarkContent } from '@incremark/vue'
 import '@incremark/vue/style.css'
+
+const content = ref('')
+const isFinished = ref(false)
+
+// Handle AI streaming output
+async function handleStream(stream) {
+  content.value = ''
+  isFinished.value = false
+  
+  for await (const chunk of stream) {
+    content.value += chunk
+  }
+  
+  isFinished.value = true
+}
+</script>
+
+<template>
+  <button @click="handleStream(stream)">Start</button>
+  <IncremarkContent 
+    :content="content" 
+    :is-finished="isFinished"
+    :incremark-options="{
+      gfm: true,
+      math: true,
+      containers: true,
+      htmlTree: true
+    }"
+  />
+</template>
 ```
 
-**2. Use in Your Component**
+### Advanced: useIncremark Composable
 
 ```vue
 <script setup>
 import { useIncremark, Incremark } from '@incremark/vue'
 import '@incremark/vue/style.css'
 
-const { blocks, append, finalize, reset } = useIncremark({ gfm: true })
+const { blocks, append, finalize, reset } = useIncremark({ 
+  gfm: true,
+  math: true
+})
 
 async function handleStream(stream) {
   reset()
@@ -44,89 +83,200 @@ async function handleStream(stream) {
 </script>
 
 <template>
-  <button @click="handleStream">Start</button>
+  <button @click="handleStream(stream)">Start</button>
   <Incremark :blocks="blocks" />
 </template>
 ```
 
-## API
+## IncremarkContent Component
 
-### useIncremark(options)
+Declarative all-in-one component, recommended for most scenarios.
 
-Core composable.
+### Props
 
-**Returns:**
+```ts
+interface IncremarkContentProps {
+  // Input (choose one)
+  content?: string                       // Accumulated Markdown string
+  stream?: () => AsyncGenerator<string>  // Async generator function
+
+  // Status
+  isFinished?: boolean                   // Stream finished flag (required for content mode)
+
+  // Configuration
+  incremarkOptions?: {
+    gfm?: boolean              // GFM support
+    math?: boolean             // Math formulas
+    htmlTree?: boolean         // HTML structured parsing
+    containers?: boolean       // ::: container syntax
+    typewriter?: {             // Typewriter effect
+      enabled?: boolean
+      charsPerTick?: number | [number, number]
+      tickInterval?: number
+      effect?: 'none' | 'fade-in' | 'typing'
+      cursor?: string
+    }
+  }
 
-| Property | Type | Description |
-|----------|------|-------------|
-| `markdown` | `Ref<string>` | Complete Markdown |
-| `blocks` | `ComputedRef<Block[]>` | All blocks |
-| `completedBlocks` | `ShallowRef<Block[]>` | Completed blocks |
-| `pendingBlocks` | `ShallowRef<Block[]>` | Pending blocks |
-| `append` | `Function` | Append content |
-| `finalize` | `Function` | Complete parsing |
-| `reset` | `Function` | Reset state |
-| `render` | `Function` | Render once (reset + append + finalize) |
+  // Custom rendering
+  components?: ComponentMap                        // Custom components
+  customContainers?: Record<string, Component>     // Custom containers
+  customCodeBlocks?: Record<string, Component>     // Custom code blocks
+  codeBlockConfigs?: Record<string, CodeBlockConfig>
 
-### useDevTools(incremark)
+  // Styling
+  showBlockStatus?: boolean    // Show block status border
+  pendingClass?: string        // CSS class for pending blocks
+}
+```
 
-Enable DevTools.
+### Example: Enable Typewriter Effect
 
-```ts
-const incremark = useIncremark()
-useDevTools(incremark)
+```vue
+<IncremarkContent 
+  :content="content" 
+  :is-finished="isFinished"
+  :incremark-options="{
+    gfm: true,
+    typewriter: {
+      enabled: true,
+      charsPerTick: [1, 3],
+      tickInterval: 30,
+      effect: 'fade-in'
+    }
+  }"
+/>
 ```
 
-### \<Incremark\>
+### Example: Custom Components
+
+```vue
+<script setup>
+import CustomHeading from './CustomHeading.vue'
+import WarningContainer from './WarningContainer.vue'
+import EchartsCodeBlock from './EchartsCodeBlock.vue'
+</script>
+
+<template>
+  <IncremarkContent 
+    :content="content" 
+    :is-finished="isFinished"
+    :components="{ heading: CustomHeading }"
+    :custom-containers="{ warning: WarningContainer }"
+    :custom-code-blocks="{ echarts: EchartsCodeBlock }"
+    :code-block-configs="{ echarts: { takeOver: true } }"
+  />
+</template>
+```
 
-Render component.
+## Theme System
 
 ```vue
-<Incremark 
-  :blocks="blocks"
-  :components="{ heading: MyHeading }"
-/>
+<script setup>
+import { ThemeProvider, IncremarkContent } from '@incremark/vue'
+</script>
+
+<template>
+  <!-- Built-in theme -->
+  <ThemeProvider theme="dark">
+    <IncremarkContent :content="content" :is-finished="isFinished" />
+  </ThemeProvider>
+
+  <!-- Custom theme -->
+  <ThemeProvider :theme="{ color: { brand: { primary: '#8b5cf6' } } }">
+    <IncremarkContent :content="content" :is-finished="isFinished" />
+  </ThemeProvider>
+</template>
 ```
 
-## Custom Components
+## Auto Scroll
 
 ```vue
 <script setup>
-import { useIncremark, Incremark } from '@incremark/vue'
-import MyCode from './MyCode.vue'
+import { ref } from 'vue'
+import { AutoScrollContainer, IncremarkContent } from '@incremark/vue'
 
-const { blocks } = useIncremark()
+const scrollRef = ref()
+const autoScrollEnabled = ref(true)
 </script>
 
 <template>
-  <Incremark 
-    :blocks="blocks" 
-    :components="{ code: MyCode }"
-  />
+  <AutoScrollContainer 
+    ref="scrollRef" 
+    :enabled="autoScrollEnabled"
+    :threshold="50"
+    behavior="smooth"
+  >
+    <IncremarkContent :content="content" :is-finished="isFinished" />
+  </AutoScrollContainer>
+  
+  <button @click="scrollRef?.scrollToBottom()">
+    Scroll to Bottom
+  </button>
 </template>
 ```
 
-## Math Formula Support
+## useIncremark API
 
-```bash
-pnpm add micromark-extension-math mdast-util-math katex
+```ts
+const {
+  // State
+  markdown,           // Ref<string> - Complete Markdown
+  blocks,             // ComputedRef<Block[]> - All blocks
+  completedBlocks,    // ShallowRef<Block[]> - Completed blocks
+  pendingBlocks,      // ShallowRef<Block[]> - Pending blocks
+  isLoading,          // Ref<boolean> - Is loading
+  isDisplayComplete,  // ComputedRef<boolean> - Is display complete
+  
+  // Methods
+  append,             // (chunk: string) => IncrementalUpdate
+  finalize,           // () => IncrementalUpdate
+  reset,              // () => void
+  render,             // (content: string) => IncrementalUpdate
+  
+  // Typewriter controls
+  typewriter: {
+    enabled,          // Ref<boolean> - Is enabled
+    isProcessing,     // Ref<boolean> - Is processing
+    skip,             // () => void - Skip animation
+    setOptions        // (options) => void - Update config
+  }
+} = useIncremark(options)
 ```
 
+## DevTools
+
 ```vue
 <script setup>
-import { useIncremark } from '@incremark/vue'
-import { math } from 'micromark-extension-math'
-import { mathFromMarkdown } from 'mdast-util-math'
-import 'katex/dist/katex.min.css'
+import { useIncremark, useDevTools, Incremark } from '@incremark/vue'
 
-const { blocks } = useIncremark({
-  extensions: [math()],
-  mdastExtensions: [mathFromMarkdown()]
-})
+const incremark = useIncremark()
+useDevTools(incremark)
 </script>
+
+<template>
+  <Incremark :blocks="incremark.blocks" />
+</template>
+```
+
+## Math Formula Support
+
+Built-in support, just enable `math: true`:
+
+```vue
+<IncremarkContent 
+  :content="content" 
+  :is-finished="isFinished"
+  :incremark-options="{ math: true }"
+/>
+```
+
+Import KaTeX styles:
+
+```ts
+import 'katex/dist/katex.min.css'
 ```
 
 ## License
 
 MIT
-

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

@@ -0,0 +1,19 @@
+import type { IncremarkLocale } from '@incremark/shared';
+interface Props {
+    /** locale 对象 */
+    locale?: IncremarkLocale;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    locale: IncremarkLocale;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -2,17 +2,9 @@ import { type Component } from 'vue';
 import type { ParsedBlock } from '@incremark/core';
 import type { UseIncremarkReturn } from '../composables/useIncremark';
 export type ComponentMap = Partial<Record<string, Component>>;
-export interface BlockWithStableId extends ParsedBlock {
-    stableId: string;
+export type RenderableBlock = ParsedBlock & {
     isLastPending?: boolean;
-}
-/**
- * 代码块配置
- */
-export interface CodeBlockConfig {
-    /** 是否从一开始就接管渲染，而不是等到 completed 状态 */
-    takeOver?: boolean;
-}
+};
 /**
  * 代码块配置
  */
@@ -22,7 +14,7 @@ export interface CodeBlockConfig {
 }
 type __VLS_Props = {
     /** 要渲染的块列表（来自 useIncremark 的 blocks） */
-    blocks?: BlockWithStableId[];
+    blocks?: RenderableBlock[];
     /** 内容是否完全显示完成（用于控制脚注等需要在内容完全显示后才出现的元素）
      * 如果传入了 incremark，则会自动使用 incremark.isDisplayComplete，此 prop 被忽略 */
     isDisplayComplete?: boolean;
@@ -44,7 +36,7 @@ type __VLS_Props = {
     incremark?: UseIncremarkReturn;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    blocks: BlockWithStableId[];
+    blocks: RenderableBlock[];
     isDisplayComplete: boolean;
     customCodeBlocks: Record<string, Component>;
     codeBlockConfigs: Record<string, CodeBlockConfig>;

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

@@ -1,7 +1,7 @@
 import type { Code } from 'mdast';
 import type { Component } from 'vue';
 import type { CodeBlockConfig } from './Incremark.vue';
-type __VLS_Props = {
+interface Props {
     node: Code;
     /** Shiki 主题，默认 github-dark */
     theme?: string;
@@ -17,14 +17,17 @@ type __VLS_Props = {
     codeBlockConfigs?: Record<string, CodeBlockConfig>;
     /** 块状态，用于判断是否使用自定义组件 */
     blockStatus?: 'pending' | 'stable' | 'completed';
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    /** 默认代码块渲染组件（当不是 mermaid 且没有自定义组件时使用） */
+    defaultCodeComponent?: Component;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     theme: string;
+    mermaidDelay: number;
     fallbackTheme: string;
     disableHighlight: boolean;
-    mermaidDelay: number;
     customCodeBlocks: Record<string, Component>;
     codeBlockConfigs: Record<string, CodeBlockConfig>;
     blockStatus: "pending" | "stable" | "completed";
+    defaultCodeComponent: Component;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -0,0 +1,16 @@
+import type { Code } from 'mdast';
+interface Props {
+    node: Code;
+    /** Shiki 主题，默认 github-dark */
+    theme?: string;
+    /** 默认回退主题（当指定主题加载失败时使用），默认 github-dark */
+    fallbackTheme?: string;
+    /** 是否禁用代码高亮 */
+    disableHighlight?: boolean;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    theme: string;
+    fallbackTheme: string;
+    disableHighlight: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/IncremarkCodeMermaid.vue.d.ts

@@ -0,0 +1,10 @@
+import type { Code } from 'mdast';
+interface Props {
+    node: Code;
+    /** Mermaid 渲染延迟（毫秒），用于流式输入时防抖 */
+    mermaidDelay?: number;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    mermaidDelay: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,3 @@
+import { IncremarkContentProps } from '../types';
+declare const _default: import("vue").DefineComponent<IncremarkContentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IncremarkContentProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/SvgIcon.vue.d.ts

@@ -0,0 +1,13 @@
+/**
+ * SvgIcon 组件
+ *
+ * 直接渲染 SVG 字符串
+ */
+interface Props {
+    /** SVG 字符串内容 */
+    svg: string;
+    /** 图标大小 class，如 incremark-icon--sm, incremark-icon--md 等 */
+    sizeClass?: string;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/index.d.ts

@@ -1,5 +1,7 @@
+export type { IncremarkContentProps } from '../types';
 export { default as Incremark } from './Incremark.vue';
-export type { ComponentMap, BlockWithStableId } from './Incremark.vue';
+export { default as IncremarkContent } from '../components/IncremarkContent.vue';
+export type { ComponentMap, RenderableBlock } from './Incremark.vue';
 export { default as IncremarkRenderer } from './IncremarkRenderer.vue';
 export { default as IncremarkHeading } from './IncremarkHeading.vue';
 export { default as IncremarkParagraph } from './IncremarkParagraph.vue';

package/dist/composables/index.d.ts

@@ -6,3 +6,4 @@ export { useDevTools } from './useDevTools';
 export type { UseDevToolsOptions } from './useDevTools';
 export { useBlockTransformer } from './useBlockTransformer';
 export type { UseBlockTransformerOptions, UseBlockTransformerReturn } from './useBlockTransformer';
+export { useLocale, type UseLocaleReturn } from './useLocale';

package/dist/composables/useIncremark.d.ts

@@ -1,4 +1,4 @@
-import { type ComputedRef } from 'vue';
+import { type ComputedRef, type MaybeRefOrGetter } from 'vue';
 import { type ParserOptions, type ParsedBlock, type IncrementalUpdate, type Root, type TransformerPlugin, type AnimationEffect } from '@incremark/core';
 /** 打字机效果配置 */
 export interface TypewriterOptions {
@@ -76,7 +76,7 @@ export type UseIncremarkReturn = ReturnType<typeof useIncremark>;
  * </template>
  * ```
  */
-export declare function useIncremark(options?: UseIncremarkOptions): {
+export declare function useIncremark(optionsInput?: MaybeRefOrGetter<UseIncremarkOptions>): {
     /** 已收集的完整 Markdown 字符串 */
     markdown: import("vue").Ref<string, string>;
     /** 已完成的块列表 */
@@ -87,7 +87,7 @@ export declare function useIncremark(options?: UseIncremarkOptions): {
     ast: ComputedRef<Root>;
     /** 用于渲染的 blocks（根据打字机设置自动处理） */
     blocks: ComputedRef<(ParsedBlock & {
-        stableId: string;
+        isLastPending?: boolean;
     })[]>;
     /** 是否正在加载 */
     isLoading: import("vue").Ref<boolean, boolean>;

package/dist/composables/useLocale.d.ts

@@ -0,0 +1,21 @@
+import { type Ref, type ComputedRef, type InjectionKey } from 'vue';
+import type { IncremarkLocale } from '@incremark/shared';
+/**
+ * Locale 注入 key，用于 provide/inject
+ */
+declare const LOCALE_KEY: InjectionKey<Ref<IncremarkLocale>>;
+/**
+ * Vue 国际化 Hook
+ */
+export interface UseLocaleReturn {
+    /** 翻译函数 */
+    t: ComputedRef<(key: string) => string>;
+}
+/**
+ * 使用 locale
+ */
+export declare function useLocale(): UseLocaleReturn;
+/**
+ * 提供 locale 的 key（用于 ConfigProvider）
+ */
+export { LOCALE_KEY };

package/dist/composables/useShiki.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Shiki Highlighter 单例管理器
+ *
+ * 避免重复创建 Shiki 实例，所有组件共享同一个 highlighter
+ */
+import type { HighlighterGeneric, BundledLanguage, BundledTheme } from 'shiki';
+interface HighlighterInfo {
+    highlighter: HighlighterGeneric<BundledLanguage, BundledTheme>;
+    loadedLanguages: Set<BundledLanguage>;
+    loadedThemes: Set<BundledTheme>;
+}
+/** Shiki highlighter 单例管理器 */
+declare class ShikiManager {
+    private static instance;
+    /** 存储 highlighter 实例，key 为主题名称 */
+    private highlighters;
+    private constructor();
+    static getInstance(): ShikiManager;
+    /**
+     * 获取或创建 highlighter
+     * @param theme 主题名称
+     * @returns highlighter 实例
+     */
+    getHighlighter(theme: BundledTheme): Promise<HighlighterInfo>;
+    /**
+     * 加载语言（按需）
+     * @param theme 主题名称
+     * @param lang 语言名称
+     */
+    loadLanguage(theme: BundledTheme, lang: BundledLanguage): Promise<void>;
+    /**
+     * 加载主题（按需）
+     * @param theme 主题名称
+     */
+    loadTheme(theme: BundledTheme): Promise<void>;
+    /**
+     * 高亮代码
+     * @param theme 主题名称
+     * @param code 代码内容
+     * @param lang 语言名称
+     * @param fallbackTheme 回退主题
+     * @returns 高亮后的 HTML
+     */
+    codeToHtml(theme: BundledTheme, code: string, lang: BundledLanguage, fallbackTheme: BundledTheme): Promise<string>;
+    /**
+     * 清理所有 highlighter（应用退出或需要重置时调用）
+     */
+    disposeAll(): void;
+}
+/**
+ * 获取 ShikiManager 单例（延迟初始化）
+ * 避免模块加载时立即创建实例，支持 SSR
+ */
+declare function getShikiManager(): ShikiManager;
+export { getShikiManager, ShikiManager };
+/**
+ * 使用 Shiki Highlighter（组合式函数）
+ *
+ * @param theme 主题名称
+ * @returns Shiki 相关的响应式状态和方法
+ */
+export declare function useShiki(theme: string): {
+    highlighterInfo: import("vue").ShallowRef<HighlighterInfo | null, HighlighterInfo | null>;
+    isHighlighting: import("vue").ShallowRef<boolean, boolean>;
+    highlight: (code: string, lang: string, fallbackTheme: string) => Promise<string>;
+};

package/dist/composables/useStreamRenderer.d.ts

@@ -1,9 +1,5 @@
 import { type Ref, type ComputedRef } from 'vue';
 import type { ParsedBlock } from '@incremark/core';
-export interface BlockWithStableId extends ParsedBlock {
-    /** 稳定的渲染 ID（用于 Vue key） */
-    stableId: string;
-}
 export interface UseStreamRendererOptions {
     /** 已完成的块 */
     completedBlocks: Ref<ParsedBlock[]>;
@@ -11,16 +7,16 @@ export interface UseStreamRendererOptions {
     pendingBlocks: Ref<ParsedBlock[]>;
 }
 export interface UseStreamRendererReturn {
-    /** 带稳定 ID 的已完成块 */
-    stableCompletedBlocks: ComputedRef<BlockWithStableId[]>;
-    /** 带稳定 ID 的待处理块 */
-    stablePendingBlocks: ComputedRef<BlockWithStableId[]>;
-    /** 所有带稳定 ID 的块 */
-    allStableBlocks: ComputedRef<BlockWithStableId[]>;
+    /** 已完成的块 */
+    completedBlocks: ComputedRef<ParsedBlock[]>;
+    /** 待处理的块 */
+    pendingBlocks: ComputedRef<ParsedBlock[]>;
+    /** 所有块 */
+    allBlocks: ComputedRef<ParsedBlock[]>;
 }
 /**
  * Vue 3 Composable: 流式渲染辅助
  *
- * 为块分配稳定的渲染 ID，确保 Vue 的虚拟 DOM 复用
+ * 直接使用 block.id 作为稳定的渲染 key
  */
 export declare function useStreamRenderer(options: UseStreamRendererOptions): UseStreamRendererReturn;

package/dist/composables/useTypewriter.d.ts

@@ -7,18 +7,18 @@
  * @author Incremark Team
  * @license MIT
  */
-import { type Ref, type ComputedRef } from 'vue';
+import { type Ref, type ComputedRef, type MaybeRefOrGetter } from 'vue';
 import { type RootContent, type ParsedBlock, type BlockTransformer } from '@incremark/core';
 import type { TypewriterOptions, TypewriterControls } from './useIncremark';
 export interface UseTypewriterOptions {
-    typewriter?: TypewriterOptions;
+    typewriter: MaybeRefOrGetter<TypewriterOptions | undefined>;
     completedBlocks: Ref<ParsedBlock[]>;
     pendingBlocks: Ref<ParsedBlock[]>;
 }
 export interface UseTypewriterReturn {
     /** 用于渲染的 blocks（经过打字机处理或原始blocks） */
     blocks: ComputedRef<Array<ParsedBlock & {
-        stableId: string;
+        isLastPending?: boolean;
     }>>;
     /** 打字机控制对象 */
     typewriter: TypewriterControls;