tui-time-line

用途：生成并渲染像素级精确的 ASCII TUI（文本用户界面）Time Line 时间线组件，同时输出布局属性、Pencil MCP 可用的规格与批量设计计划。

主要能力：

1. 解析输入模型 JSON，字段包括 widthCols、grid、props、modelValue、state、style、typography、layout、hotkeys。
2. 依据网格（cellWidthPx=8、cellHeightPx=16）把列/行位置换算为像素坐标。
3. 渲染 TUI_RENDER 文本，使用 box-drawing 字符绘制单色 ASCII 界面，且不超过 widthCols。
4. 生成 COMPONENT_SPEC，包含 id、name、type、bbox、zIndex、layout、style、typography、overflow、state、hotkeys。
5. 生成 PENCIL_SPEC，包含 canvas、grid、nodes、components。
6. 生成 PENCIL_BATCH_DESIGN，即 batch_design 调用，每次调用不超过 25 个操作。
7. 自校验：COMPONENT_SPEC 的 bbox 尺寸需与 TUI_RENDER 网格一致，批量操作需在 25 条以内。

使用方式：提供输入模型 JSON（或使用默认值），按四段式输出契约依次给出 TUI_RENDER、COMPONENT_SPEC、PENCIL_SPEC、PENCIL_BATCH_DESIGN。批量设计示例命令保持原样： CALL 1: root=G() screen=I(root,{type:"frame",name:"Screen"}) U(screen,{width:390,height:844,x:0,y:0})

渲染规则：不使用 TAB 字符；不超过 widthCols；提供表头行、主体区，交互时给出最小热键提示；disabled=true 时抑制交互提示；loading=true 时显示稳定占位；error!=null 时在单行页脚打印，超出宽度需截断。

适用场景：需要把时间线组件同时落到 ASCII 终端预览与 Pencil 设计稿的流程，例如页面聚合时按组件汇总行（id/name/top/left/width/height/z/keyProps/state/hotkeys）上报。

限制：资料未提供收费、价格、平台支持范围、安装命令与实际渲染效果数据；官方文档未另行提供，具体集成方式暂未提供。