规则输入框 · masking 与实时格式化

@vega/parsing/action-grammar 描述一类「动作 + 次数 + 编号」表达式，如 深蹲*5、123A5、热身 深蹲*10-15。本页在同一套语法上叠加三层递进的输入体验：仅做整体校验的基础 masking、逐字符实时渲染的 contenteditable 编辑器，以及禁止敲出任何不可能合法前缀的 strict 守门。三个示例共享同一个 parser 切换——rule.ts（平铺正则，一遍出 ActionEntry[]）与 parser.ts（lexer + 递归下降先出 AST），右侧 inspector 随切换实时改变视角。

1 · 实时格式化输入

contenteditable + 字符过滤。normalize 先去空白、把 ~ 归一成 -；完整合法时 renderHtml 用 htmlRenderer 把 AST 重写成带 rule-* class 的 <span> 树，次数用 <sup> 上标；尚未敲完的半截区间改走 lexer token 流做 lenient 着色，保证残缺输入也有渲染。

2 · 严格输入：前缀即时守门

在 masking 基础上更进一步：禁止空白，且每次按键后的结果必须仍是某个合法表达式的前缀。不可能扩展到合法的字符被直接吞掉、不显示错误文案，只用边框短暂闪烁提示拦截；backspace 永远放行。合法部分仍走 renderHtml 实时着色。

3 · 基础 masking 输入

普通 <input>，只做字符级过滤(allowChar)与每次按键的整体校验(parseRule / parseInput)，不做归一、不做 renderHtml、不做前缀守门——作为与前两者的对照基线，呈现拿掉「实时格式化」与「前缀守门」两层之后的原始体验。

更底层的引擎剖析见 Smart Input 引擎：能力与实现；更多格式化场景见 Smart Input 格式化合集。