@jboltai/tokui 0.1.7 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jboltai/tokui",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "TokUI — Zero-dependency streaming UI description & rendering framework for AI chat. Describe UI with a tiny DSL, stream over SSE, render to real DOM incrementally.",
   "keywords": [
     "tokui",
@@ -73,6 +73,7 @@
     "provenance": true
   },
   "devDependencies": {
+    "@playwright/test": "^1.61.1",
     "c8": "^10.1.3",
     "typescript": "^6.0.3",
     "vite": "^8.0.16",
@@ -81,6 +82,7 @@
   "scripts": {
     "test": "npm run test:all",
     "test:all": "for f in tests/test-*.js; do node \"$f\" || exit 1; done",
+    "test:e2e": "playwright test",
     "test:core": "node tests/test-event-bus.js && node tests/test-theme.js && node tests/test-renderer.js",
     "test:parser": "node tests/test-parser.js",
     "test:builder": "node tests/test-builder.js",

package/src/index.d.ts

@@ -10,9 +10,24 @@
  */
 export type TokUIHandlerFn = (data: any, event: Event, element: HTMLElement) => void;
 
+/**
+ * 组件交互事件 payload（onEvent('component', evt) 的第二参）
+ * DSL `on:"事件:处理器"` 之外的统一事件出口：所有接入上报的组件交互都会发到这里。
+ */
+export interface TokUIComponentEvent {
+  /** 组件类型，如 'input' / 'tabs' / 'dialog' / 'tool-call' */
+  type: string;
+  /** 组件 id 属性（无则 null） */
+  id: string | null;
+  /** 事件名，如 'change' / 'close' / 'stop' / 'approval' */
+  event: string;
+  /** 事件上下文，如 { value } / { index, title } / { approved, id, name } */
+  detail: any;
+}
+
 /**
  * onEvent 回调签名
- * @param eventName - 事件名，如 'streamEnd'
+ * @param eventName - 事件名：'streamEnd'（流结束）/ 'component'（组件交互，data 为 TokUIComponentEvent）
  * @param data      - 事件数据
  */
 export type TokUIEventCallback = (eventName: string, data: any) => void;
@@ -34,8 +49,10 @@ export interface TokUIOptions {
   locale?: string;
   /** 是否启用流式渲染模式，默认 true */
   streaming?: boolean;
-  /** 事件回调，如接收到 ('streamEnd', {}) */
+  /** 事件回调：('streamEnd', {}) 流结束；('component', TokUIComponentEvent) 组件交互统一出口 */
   onEvent?: TokUIEventCallback | null;
+  /** 组件交互事件过滤器：返回 false 丢弃该事件（onEvent 降噪用，如只看某类组件） */
+  eventFilter?: ((evt: TokUIComponentEvent) => boolean) | null;
 }
 
 /**

package/src/server/tokui-builder.js

@@ -153,6 +153,19 @@ class TokUIBuilder {
     return this;
   }
 
+  /** KaTeX 公式（容器=块级 / inline:true → [katex f:"公式"] 行内；渲染依赖宿主加载 katex，无插件回退源码） */
+  katex(content, inline) {
+    return inline
+      ? this._selfClosing('katex', null, { f: content })
+      : (this.chunks.push(`[katex]${content}[/katex]`), this);
+  }
+
+  /** Mermaid 图（容器；渲染依赖宿主加载 mermaid，无插件回退代码块） */
+  mermaid(content) {
+    this.chunks.push(`[mermaid]${content}[/mermaid]`);
+    return this;
+  }
+
   /** 分割线 */
   hr() { this.chunks.push('[hr]'); return this; }