@incremark/devtools 0.3.2 → 0.3.4

package/README.en.md

@@ -8,8 +8,10 @@ Developer tools for Incremark, framework agnostic.
 
 - 🔍 **Real-time State** - View parsing state, block list, AST
 - 📊 **Timeline** - Record each append operation
+- 🌐 **Internationalization** - Supports Chinese and English interfaces
 - 🎨 **Themes** - Supports dark/light themes
-- 📦 **Framework Agnostic** - Works with Vue, React, or vanilla JS
+- 📦 **Framework Agnostic** - Works with Vue, React, Svelte, Solid, or vanilla JS
+- 🔌 **Multi-parser Support** - Monitor multiple parser instances simultaneously
 
 ## Installation
 
@@ -21,83 +23,249 @@ pnpm add @incremark/devtools
 
 ### With Vue
 
-```ts
-import { useIncremark, useDevTools } from '@incremark/vue'
+```vue
+<script setup>
+import { createDevTools } from '@incremark/devtools'
+import { IncremarkContent } from '@incremark/vue'
+import { onMounted, onUnmounted } from 'vue'
+
+const devtools = createDevTools({
+  locale: 'en-US'
+})
 
-const incremark = useIncremark()
-useDevTools(incremark)
+onMounted(() => {
+  devtools.mount()
+})
+
+onUnmounted(() => {
+  devtools.unmount()
+})
+</script>
+
+<template>
+  <IncremarkContent
+    :content="markdown"
+    :devtools="devtools"
+    devtoolsId="main-parser"
+    devtoolsLabel="Main Content"
+  />
+</template>
 ```
 
 ### With React
 
 ```tsx
-import { useIncremark, useDevTools } from '@incremark/react'
+import { createDevTools } from '@incremark/devtools'
+import { IncremarkContent } from '@incremark/react'
+import { useEffect, useRef } from 'react'
 
 function App() {
-  const incremark = useIncremark()
-  useDevTools(incremark)
+  const devtools = useRef(createDevTools({
+    locale: 'en-US'
+  }))
+
+  useEffect(() => {
+    devtools.current.mount()
+    return () => devtools.current.unmount()
+  }, [])
+
+  return (
+    <IncremarkContent
+      content={markdown}
+      devtools={devtools.current}
+      devtoolsId="main-parser"
+      devtoolsLabel="Main Content"
+    />
+  )
 }
 ```
 
+### With Svelte
+
+```svelte
+<script lang="ts">
+  import { createDevTools } from '@incremark/devtools'
+  import { IncremarkContent } from '@incremark/svelte'
+  import { onMount, onDestroy } from 'svelte'
+
+  let devtools = createDevTools({
+    locale: 'en-US'
+  })
+
+  onMount(() => {
+    devtools.mount()
+  })
+
+  onDestroy(() => {
+    devtools.unmount()
+  })
+</script>
+
+<IncremarkContent
+  {content}
+  {devtools}
+  devtoolsId="main-parser"
+  devtoolsLabel="Main Content"
+/>
+```
+
+### With Solid
+
+```tsx
+import { createDevTools } from '@incremark/devtools'
+import { IncremarkContent } from '@incremark/solid'
+import { onMount, onCleanup } from 'solid-js'
+
+const devtools = createDevTools({
+  locale: 'en-US'
+})
+
+onMount(() => {
+  devtools.mount()
+})
+
+onCleanup(() => {
+  devtools.unmount()
+})
+
+return (
+  <IncremarkContent
+    content={markdown()}
+    devtools={devtools}
+    devtoolsId="main-parser"
+    devtoolsLabel="Main Content"
+  />
+)
+```
+
 ### Standalone Usage
 
 ```ts
 import { createIncremarkParser } from '@incremark/core'
-import { mountDevTools } from '@incremark/devtools'
+import { createDevTools } from '@incremark/devtools'
 
 const parser = createIncremarkParser()
-parser.setOnChange(mountDevTools())
+const devtools = createDevTools({
+  locale: 'en-US'
+})
+
+devtools.mount()
+
+// Register parser
+devtools.register(parser, {
+  id: 'my-parser',
+  label: 'My Parser'
+})
+
+// Set up callback
+parser.setOnChange((state) => {
+  // DevTools will update automatically
+})
+
+// Cleanup
+devtools.unregister('my-parser')
+devtools.unmount()
 ```
 
 ## API
 
-### mountDevTools(options?, target?)
+### createDevTools(options?)
 
-Create and mount DevTools, returns onChange callback.
+Create a DevTools instance.
 
 ```ts
-const callback = mountDevTools({
-  open: false,
-  position: 'bottom-right',
-  theme: 'dark'
+const devtools = createDevTools({
+  open: false,                    // Initially open the panel
+  position: 'bottom-right',       // Position
+  theme: 'dark',                  // Theme
+  locale: 'en-US'                 // Locale: 'en-US' | 'zh-CN'
 })
-
-parser.setOnChange(callback)
 ```
 
-### IncremarkDevTools
+### devtools.mount()
 
-DevTools class for fine-grained control.
+Mount DevTools to DOM.
 
 ```ts
-const devtools = new IncremarkDevTools(options)
 devtools.mount()
-devtools.update(parserState)
+```
+
+### devtools.unmount()
+
+Unmount DevTools from DOM.
+
+```ts
 devtools.unmount()
 ```
 
+### devtools.register(parser, options)
+
+Register a parser instance.
+
+```ts
+devtools.register(parser, {
+  id: 'unique-id',      // Unique identifier
+  label: 'Display Name' // Display label
+})
+```
+
+### devtools.unregister(id)
+
+Unregister a specific parser.
+
+```ts
+devtools.unregister('unique-id')
+```
+
+### setLocale(locale)
+
+Dynamically set DevTools language.
+
+```ts
+import { setLocale } from '@incremark/devtools'
+
+setLocale('zh-CN')  // Switch to Chinese
+setLocale('en-US')  // Switch to English
+```
+
 ## Configuration Options
 
 ```ts
 interface DevToolsOptions {
-  open?: boolean           // Initially open
-  position?: Position      // Position
-  theme?: 'dark' | 'light' // Theme
+  open?: boolean           // Initially open the panel, default false
+  position?: Position      // Position, default 'bottom-right'
+  theme?: 'dark' | 'light' // Theme, default 'dark'
+  locale?: Locale          // Locale, default 'en-US'
 }
 
 type Position = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
+type Locale = 'zh-CN' | 'en-US'
 ```
 
 ## Feature Panels
 
 | Panel | Function |
 |-------|----------|
-| Overview | Shows character count, block count, etc. |
-| Blocks | View all parsed blocks |
-| AST | Complete AST in JSON format |
-| Timeline | History of append operations |
+| **Overview** | Shows character count, block count, node type distribution, streaming status, etc. |
+| **Blocks** | View all parsed blocks with details including status, raw text, and AST nodes |
+| **AST** | Complete Abstract Syntax Tree in JSON format with interactive expand/collapse |
+| **Timeline** | History of append operations with timestamps and block count changes |
+
+## Types
+
+```ts
+import type {
+  IncremarkDevTools,
+  DevToolsOptions,
+  DevToolsState,
+  AppendRecord,
+  ParserRegistration,
+  RegisterOptions,
+  Locale,
+  I18nMessages
+} from '@incremark/devtools'
+```
 
 ## License
 
 MIT
-

package/README.md

@@ -8,8 +8,10 @@ Incremark 的开发者工具，框架无关。
 
 - 🔍 **实时状态** - 查看解析状态、块列表、AST
 - 📊 **时间线** - 记录每次 append 操作
+- 🌐 **国际化** - 支持中英文界面
 - 🎨 **主题** - 支持 dark/light 主题
-- 📦 **框架无关** - 可在 Vue、React 或原生 JS 中使用
+- 📦 **框架无关** - 可在 Vue、React、Svelte、Solid 或原生 JS 中使用
+- 🔌 **多解析器** - 同时监控多个 parser 实例
 
 ## 安装
 
@@ -21,83 +23,249 @@ pnpm add @incremark/devtools
 
 ### 与 Vue 配合
 
-```ts
-import { useIncremark, useDevTools } from '@incremark/vue'
+```vue
+<script setup>
+import { createDevTools } from '@incremark/devtools'
+import { IncremarkContent } from '@incremark/vue'
+import { onMounted, onUnmounted } from 'vue'
+
+const devtools = createDevTools({
+  locale: 'zh-CN'
+})
 
-const incremark = useIncremark()
-useDevTools(incremark)
+onMounted(() => {
+  devtools.mount()
+})
+
+onUnmounted(() => {
+  devtools.unmount()
+})
+</script>
+
+<template>
+  <IncremarkContent
+    :content="markdown"
+    :devtools="devtools"
+    devtoolsId="main-parser"
+    devtoolsLabel="主内容"
+  />
+</template>
 ```
 
 ### 与 React 配合
 
 ```tsx
-import { useIncremark, useDevTools } from '@incremark/react'
+import { createDevTools } from '@incremark/devtools'
+import { IncremarkContent } from '@incremark/react'
+import { useEffect, useRef } from 'react'
 
 function App() {
-  const incremark = useIncremark()
-  useDevTools(incremark)
+  const devtools = useRef(createDevTools({
+    locale: 'zh-CN'
+  }))
+
+  useEffect(() => {
+    devtools.current.mount()
+    return () => devtools.current.unmount()
+  }, [])
+
+  return (
+    <IncremarkContent
+      content={markdown}
+      devtools={devtools.current}
+      devtoolsId="main-parser"
+      devtoolsLabel="主内容"
+    />
+  )
 }
 ```
 
+### 与 Svelte 配合
+
+```svelte
+<script lang="ts">
+  import { createDevTools } from '@incremark/devtools'
+  import { IncremarkContent } from '@incremark/svelte'
+  import { onMount, onDestroy } from 'svelte'
+
+  let devtools = createDevTools({
+    locale: 'zh-CN'
+  })
+
+  onMount(() => {
+    devtools.mount()
+  })
+
+  onDestroy(() => {
+    devtools.unmount()
+  })
+</script>
+
+<IncremarkContent
+  {content}
+  {devtools}
+  devtoolsId="main-parser"
+  devtoolsLabel="主内容"
+/>
+```
+
+### 与 Solid 配合
+
+```tsx
+import { createDevTools } from '@incremark/devtools'
+import { IncremarkContent } from '@incremark/solid'
+import { onMount, onCleanup } from 'solid-js'
+
+const devtools = createDevTools({
+  locale: 'zh-CN'
+})
+
+onMount(() => {
+  devtools.mount()
+})
+
+onCleanup(() => {
+  devtools.unmount()
+})
+
+return (
+  <IncremarkContent
+    content={markdown()}
+    devtools={devtools}
+    devtoolsId="main-parser"
+    devtoolsLabel="主内容"
+  />
+)
+```
+
 ### 独立使用
 
 ```ts
 import { createIncremarkParser } from '@incremark/core'
-import { mountDevTools } from '@incremark/devtools'
+import { createDevTools } from '@incremark/devtools'
 
 const parser = createIncremarkParser()
-parser.setOnChange(mountDevTools())
+const devtools = createDevTools({
+  locale: 'zh-CN'
+})
+
+devtools.mount()
+
+// 注册 parser
+devtools.register(parser, {
+  id: 'my-parser',
+  label: 'My Parser'
+})
+
+// 设置回调
+parser.setOnChange((state) => {
+  // DevTools 会自动更新
+})
+
+// 清理
+devtools.unregister('my-parser')
+devtools.unmount()
 ```
 
 ## API
 
-### mountDevTools(options?, target?)
+### createDevTools(options?)
 
-创建并挂载 DevTools，返回 onChange 回调。
+创建 DevTools 实例。
 
 ```ts
-const callback = mountDevTools({
-  open: false,
-  position: 'bottom-right',
-  theme: 'dark'
+const devtools = createDevTools({
+  open: false,                    // 初始是否打开面板
+  position: 'bottom-right',       // 位置
+  theme: 'dark',                  // 主题
+  locale: 'zh-CN'                 // 语言: 'zh-CN' | 'en-US'
 })
-
-parser.setOnChange(callback)
 ```
 
-### IncremarkDevTools
+### devtools.mount()
 
-DevTools 类，提供更细粒度控制。
+挂载 DevTools 到 DOM。
 
 ```ts
-const devtools = new IncremarkDevTools(options)
 devtools.mount()
-devtools.update(parserState)
+```
+
+### devtools.unmount()
+
+从 DOM 卸载 DevTools。
+
+```ts
 devtools.unmount()
 ```
 
+### devtools.register(parser, options)
+
+注册一个 parser 实例。
+
+```ts
+devtools.register(parser, {
+  id: 'unique-id',      // 唯一标识符
+  label: 'Display Name' // 显示名称
+})
+```
+
+### devtools.unregister(id)
+
+注销指定的 parser。
+
+```ts
+devtools.unregister('unique-id')
+```
+
+### setLocale(locale)
+
+动态设置 DevTools 语言。
+
+```ts
+import { setLocale } from '@incremark/devtools'
+
+setLocale('zh-CN')  // 切换到中文
+setLocale('en-US')  // 切换到英文
+```
+
 ## 配置选项
 
 ```ts
 interface DevToolsOptions {
-  open?: boolean           // 初始是否打开
-  position?: Position      // 位置
-  theme?: 'dark' | 'light' // 主题
+  open?: boolean           // 初始是否打开面板，默认 false
+  position?: Position      // 位置，默认 'bottom-right'
+  theme?: 'dark' | 'light' // 主题，默认 'dark'
+  locale?: Locale          // 语言，默认 'en-US'
 }
 
 type Position = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
+type Locale = 'zh-CN' | 'en-US'
 ```
 
 ## 功能面板
 
 | 面板 | 功能 |
 |------|------|
-| Overview | 显示字符数、块数量等统计 |
-| Blocks | 查看所有解析出的块 |
-| AST | JSON 格式的完整 AST |
-| Timeline | append 操作历史 |
+| **Overview** | 显示字符数、块数量、节点类型分布、流式处理状态等统计 |
+| **Blocks** | 查看所有解析出的块，包括块详情、状态、原始文本、AST 节点 |
+| **AST** | JSON 格式的完整抽象语法树，可交互展开/折叠 |
+| **Timeline** | append 操作历史，带时间戳和块数变化 |
+
+## 类型
+
+```ts
+import type {
+  IncremarkDevTools,
+  DevToolsOptions,
+  DevToolsState,
+  AppendRecord,
+  ParserRegistration,
+  RegisterOptions,
+  Locale,
+  I18nMessages
+} from '@incremark/devtools'
+```
 
 ## License
 
 MIT
-

package/dist/components/index.d.ts

@@ -0,0 +1,5 @@
+export { default as DevToolsTrigger } from './DevToolsTrigger.svelte';
+export { default as DevToolsPanel } from './DevToolsPanel.svelte';
+export { default as DevTools } from './DevTools.svelte';
+export * from './tabs/index';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAA;AACrE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAA;AACjE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AACvD,cAAc,cAAc,CAAA"}

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

@@ -0,0 +1,5 @@
+export { default as OverviewTab } from './OverviewTab.svelte';
+export { default as BlocksTab } from './BlocksTab.svelte';
+export { default as AstTab } from './AstTab.svelte';
+export { default as TimelineTab } from './TimelineTab.svelte';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAC7D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAA;AACzD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAA;AACnD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAA"}

package/dist/devtools.d.ts

@@ -0,0 +1,63 @@
+/**
+ * @file devtools.ts - 框架无关的 DevTools API
+ * @description 提供纯 JS API 用于从任何框架挂载 DevTools
+ */
+import type { IncremarkParser } from '@incremark/core';
+import type { DevToolsOptions, RegisterOptions } from './types';
+/**
+ * IncremarkDevTools - 框架无关的 DevTools 实现
+ * 支持多 parser 注册和切换
+ */
+export declare class IncremarkDevTools {
+    private container;
+    private options;
+    private svelteComponent;
+    private store;
+    private isMounted;
+    private pendingRegistrations;
+    constructor(options?: DevToolsOptions);
+    /**
+     * 挂载 DevTools 到 DOM
+     * 注意：此方法只能在浏览器环境中调用
+     * @returns Promise 完成后返回 this
+     */
+    mount(target?: HTMLElement | string): this;
+    /**
+     * 卸载 DevTools
+     */
+    unmount(): this;
+    /**
+     * 注册一个 parser
+     */
+    register(parser: IncremarkParser, options: RegisterOptions): this;
+    /**
+     * 注销一个 parser
+     */
+    unregister(id: string): this;
+    /**
+     * 选择一个 parser
+     */
+    selectParser(id: string): this;
+    /**
+     * 打开面板
+     */
+    open(): this;
+    /**
+     * 关闭面板
+     */
+    close(): this;
+    /**
+     * 切换面板
+     */
+    toggle(): this;
+}
+/**
+ * 创建 DevTools 实例
+ */
+export declare function createDevTools(options?: DevToolsOptions): IncremarkDevTools;
+/**
+ * 一行代码挂载 DevTools（兼容旧 API）
+ * @deprecated 请使用 createDevTools() + register() 方式
+ */
+export declare function mountDevTools(options?: DevToolsOptions): () => void;
+//# sourceMappingURL=devtools.d.ts.map

package/dist/devtools.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools.d.ts","sourceRoot":"","sources":["../src/devtools.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACtD,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAS/D;;;GAGG;AACH,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,SAAS,CAA2B;IAC5C,OAAO,CAAC,OAAO,CAA2B;IAC1C,OAAO,CAAC,eAAe,CAAuC;IAC9D,OAAO,CAAC,KAAK,CAAqB;IAGlC,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAO,CAAC,oBAAoB,CAAmE;gBAEnF,OAAO,GAAE,eAAoB;IAWzC;;;;OAIG;IACH,KAAK,CAAC,MAAM,GAAE,WAAW,GAAG,MAAe,GAAG,IAAI;IA6ClD;;OAEG;IACH,OAAO,IAAI,IAAI;IAuBf;;OAEG;IACH,QAAQ,CAAC,MAAM,EAAE,eAAe,EAAE,OAAO,EAAE,eAAe,GAAG,IAAI;IAWjE;;OAEG;IACH,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAK5B;;OAEG;IACH,YAAY,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAK9B;;OAEG;IACH,IAAI,IAAI,IAAI;IAKZ;;OAEG;IACH,KAAK,IAAI,IAAI;IAKb;;OAEG;IACH,MAAM,IAAI,IAAI;CAIf;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,OAAO,CAAC,EAAE,eAAe,GAAG,iBAAiB,CAE3E;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,OAAO,CAAC,EAAE,eAAe,cAgBtD"}

package/dist/i18n/index.svelte.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @file index.ts - i18n 工具函数
+ */
+import type { Locale, I18nMessages } from './types';
+export type { I18nMessages };
+/**
+ * 设置当前语言
+ */
+export declare function setLocale(locale: Locale): void;
+/**
+ * 获取当前语言
+ */
+export declare function getLocale(): Locale;
+/**
+ * 获取翻译消息
+ */
+export declare function t(key: keyof I18nMessages): string;
+/**
+ * 创建响应式的 i18n store
+ */
+export declare function createI18n(initialLocale?: Locale): {
+    readonly locale: Locale;
+    setLocale(locale: Locale): void;
+    t(key: keyof I18nMessages): string;
+    readonly version: number;
+};
+//# sourceMappingURL=index.svelte.d.ts.map

package/dist/i18n/index.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.svelte.d.ts","sourceRoot":"","sources":["../../src/i18n/index.svelte.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAGnD,YAAY,EAAE,YAAY,EAAE,CAAA;AAY5B;;GAEG;AACH,wBAAgB,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAM9C;AAED;;GAEG;AACH,wBAAgB,SAAS,IAAI,MAAM,CAElC;AAED;;GAEG;AACH,wBAAgB,CAAC,CAAC,GAAG,EAAE,MAAM,YAAY,GAAG,MAAM,CAEjD;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,aAAa,GAAE,MAAgB;;sBAkBpC,MAAM;WAIjB,MAAM,YAAY,GAAG,MAAM;;EAUrC"}