@jboltai/tokui 0.1.6 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jboltai/tokui",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "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

@@ -256,6 +256,16 @@ class TokUIBuilder {
   /** 容器内原始文本（用于 textarea/md/code 等容器组件） */
   text(content) { this.chunks.push(String(content)); return this; }
 
+  // ========== 行内格式组件（p/list 等容器内的文本修饰） ==========
+
+  /** 粗体 */ b(content) { return this._selfClosing('b', content); }
+  /** 粗体（strong 语义） */ strong(content) { return this._selfClosing('strong', content); }
+  /** 斜体 */ em(content) { return this._selfClosing('em', content); }
+  /** 高亮标记 */ mark(content) { return this._selfClosing('mark', content); }
+  /** 删除线 */ del(content) { return this._selfClosing('del', content); }
+  /** 下标 */ sub(content) { return this._selfClosing('sub', content); }
+  /** 上标 */ sup(content) { return this._selfClosing('sup', content); }
+
   // ========== 布局组件 ==========
 
   /** 卡片（容器模式：需 .end() 关闭） */
@@ -598,8 +608,8 @@ class TokUIBuilder {
   /** 计划步骤（自闭合或容器） */
   planStep(attrs) { return this._selfClosing('plan-step', null, attrs); }
 
-  /** Agent 状态卡片（自闭合或容器） */
-  agent(attrs) { return attrs && (attrs.status || attrs.name) && !attrs._container ? this._selfClosing('agent', null, attrs) : this._open('agent', attrs); }
+  /** Agent 状态卡片（自闭合；agent 组件纯 attr 驱动，无 children 语义） */
+  agent(attrs) { return this._selfClosing('agent', null, attrs); }
 
   /** 文件树（容器） */
   fileTree(attrs) { return this._open('file-tree', attrs); }