feat: add fragment reveal core mechanism to template

[lwmxiaobei]

Summary

Add the core fragment reveal mechanism to assets/template.html.

Included in this PR

• .fragment, .fragment.visible, and .fragment.instant styles
• fragment state helpers: fragmentsOf, resetFragments, revealNextFragment, hidePrevFragment
• forward / backward wrappers so existing navigation reveals fragments before moving between slides
• integration with the current keyboard, wheel, and touch navigation flow

Explicitly not included

• no hint text changes
• no click-to-advance-on-blank-area behavior
• no SKILL.md / checklist.md documentation changes

Rebase status

This branch has been rebased onto the latest main after #1 was merged, so it keeps the ESC overview index behavior intact.

[op7418]

感谢 PR!fragment 这个方向我们会自己处理美学上的取舍(默认交互、hint 文案、SKILL.md 规则等),这部分不用担心。

不过目前这个 PR 里混了几件不同的事,建议拆分:

1. fragment 核心机制(CSS 类 + revealNextFragment / hidePrevFragment + forward/backward 包装)——这是主功能
2. 交互行为改动(点击空白即翻页、hint 文案改写)——这是独立决策
3. SKILL.md / checklist.md 文档——可以跟主功能一起,但和 feat: add fragment reveal core mechanism to template #2 的决策耦合

另外这个 PR 和 #1(ESC 索引)在 keydown handler 和 hint 文案上有冲突,#1 会先合并,麻烦合并后 rebase 一下。

期待只包含 fragment 核心机制的版本 🙏

[lwmxiaobei]

已按建议更新并 force-push：

• rebase 到最新 main（包含 feat: implement ESC overview index (as promised in hint text) #1 的 ESC 索引）
• 去掉了 hint 文案改动
• 去掉了点击空白触发 reveal / 翻页的行为
• 去掉了 SKILL.md / checklist.md 文档改动
• 当前只保留 fragment 核心机制：CSS 类、fragment 状态管理，以及在现有键盘 / 滚轮 / 触屏导航上的 forward / backward 包装

[op7418]

xiaobei 你好，fragment 这个功能我挺喜欢，代码也干净：.fragment / .visible / .instant 三态清晰，forward/backward 对现有翻页是非侵入改造，老 deck 没加 .fragment class 行为不变 —— 这种向后兼容的做法很好。

两个小问题想请你处理一下再合：

1. hint 文字和代码不一致

现在 hint 写的是：

<div id="hint">点击 / Space 逐项显示 · ← → 导航</div>

但代码里只绑定了 keydown / wheel / touchend，没有 click handler。用户看到"点击"但点了没反应，这是个 dead claim。

两个选择：

• （推荐）补上 click 绑定：在 addEventListener('touchend', ...) 附近加一行 addEventListener('click', e => { forward(); })，这样鼠标点击也能触发 forward。
• 或者去掉 hint 里的"点击"，改成"Space 逐项显示 · ← → 导航"。

2. 缺少使用文档

现在代码进来了，但 SKILL.md、components.md、layouts.md 都没提 fragment 怎么用。对于 Claude 来说就是"死代码" —— 它不知道什么时候该给 slide 加 .fragment class。

希望在 references/components.md 加一小节，大概这样：

## Fragments · 逐项显示

给需要逐步揭示的元素加 `.fragment` class，讲者按 → / Space / 滚轮 / 滑动可一项项显示。

适合场景：
- 长列表逐条讲解
- pipeline step 一步一步揭示
- 对比页"先说 before，再说 after"

用法：
​```html
<li class="fragment">第一点</li>
<li class="fragment">第二点</li>
<li class="fragment">第三点</li>
​```

所有 fragment 揭示完后，再按一次才翻到下一页。没加 `.fragment` class 的 slide 行为不变。

补完这两项我就合。多谢！

[lwmxiaobei]

已按反馈补齐并 push：

• 在 assets/template.html 补了 click 绑定，点击页面会走现有 forward() 逻辑；同时忽略 #nav / #overview，避免点底部圆点或 ESC 索引时误触发前进。
• 在 references/components.md 新增了 Fragments 逐项显示 小节，说明 .fragment 的适用场景、HTML 用法，以及“所有 fragment 揭示完后再翻页”的行为。

提交：9fcd4b9 Address fragment reveal feedback