tui-button

用途

tui-button 用于生成并渲染像素级精确的 ASCII 文本界面（TUI）Button 组件。它始终输出布局属性（top/left/width/height、间距、颜色、排版、zIndex），并输出可供 Pencil MCP 使用的规格以及 batch_design 计划（每次调用不超过 25 个操作）。

主要能力

• 解析输入模型 JSON，字段包括 widthCols、grid、props、state、style、typography、layout、hotkeys。
• 依据网格（cellWidthPx=8、cellHeightPx=16）将列/行位置换算为像素坐标。
• 生成 TUI_RENDER：使用制表符绘制字符构建等宽 ASCII 图形，并遵守 widthCols 限制。
• 生成 COMPONENT_SPEC：输出包含 bbox、style、typography、state、hotkeys 的 JSON 规格。
• 生成 PENCIL_SPEC：输出 Pencil MCP 所需的画布与组件列表。
• 生成 PENCIL_BATCH_DESIGN：输出 batch_design 调用（每次最多 25 个操作）以在 Pencil 中创建设计。
• 校验：确认 COMPONENT_SPEC 中的 bbox 尺寸与 TUI_RENDER 网格一致，并确认批量操作不超过 25 个操作的限制。

使用方式

输入模型（推荐）包含以下字段：

{
  "widthCols": 70,
  "grid": { "cellWidthPx": 8, "cellHeightPx": 16 },
  "props": {},
  "modelValue": null,
  "state": { "focused": false, "disabled": false, "loading": false, "error": null },
  "style": {
    "fillColor": "#ffffff",
    "textColor": "#111111",
    "strokeColor": "#e5e7eb",
    "strokeThickness": 1,
    "cornerRadius": 12
  },
  "typography": { "fontFamily": "Inter", "fontSize": 14, "fontWeight": 400, "lineHeight": 20 },
  "layout": { "paddingPx": 16, "gapPx": 8 },
  "hotkeys": []
}

输出契约（强制）包含四个输出块：

• OUTPUT: TUI_RENDER —— 仅等宽文本。
• OUTPUT: COMPONENT_SPEC —— 组件 JSON 规格，含 id、name、type、bbox、zIndex、layout、style、typography、overflow、state、hotkeys。
• OUTPUT: PENCIL_SPEC —— 画布、网格、nodes、components。
• OUTPUT: PENCIL_BATCH_DESIGN —— 分批的 batch_design 调用。

组件映射（可操作字段，位于 props 内）：

• label：string（必填）
• variant："primary" | "secondary" | "danger" | "ghost"（默认 primary）
• size："sm" | "md" | "lg"（默认 md）
• block：boolean（全宽 vs 内容宽度）
• iconLeft?、iconRight?：string（以 ASCII 字形渲染）
• loading：boolean（优先使用 state.loading，允许 props.loading 覆盖）
• disabled：boolean（优先使用 state.disabled，允许 props.disabled 覆盖）
• onClick：boolean（是否显示点击提示；纯展示设为 false）

状态与交互规则：

• disabled=true：以弱化颜色渲染标签；隐藏 <enter> 提示。
• loading=true：将标签替换为 Loading...（宽度稳定）；隐藏图标。
• 焦点环：若 state.focused=true，以 ⟦ ... ⟧ 包裹或使用更强边框渲染。

渲染规则（组件级）：

• 不使用 TAB 字符。
• 不超过 widthCols。
• 提供标题行、主体区域，若可交互则提供最小快捷键提示。
• disabled=true 必须抑制交互提示。
• loading=true 必须显示稳定的占位符。
• error!=null 必须打印在单行页脚（按宽度截断）。

适用场景

• 需要在终端环境中快速产出按钮组件的 ASCII 预览与规格。
• 需要将按钮组件规格同步到 Pencil MCP 设计工具并生成批量设计操作。
• 需要为页面聚合提供组件摘要行（id、name、top、left、width、height、z、keyProps、state、hotkeys）。

限制

• 资料未提供该技能的安装方式、收费模式、价格、平台支持范围或实际效果数据。
• 资料未提供除 Button 之外的其他组件支持说明。
• 资料未提供错误处理、性能或兼容性方面的额外信息。