feat(viewer,ui04): E05 realtime hearts + effect-demo alignment (initial offset, heart params, decode gate, bidirectional manual scroll)

- reactions.ts pure fns: delta->hearts sampling, burstId dedupe (TTL/capacity), pending-visible cache (5s/50), 250ms emission throttle with merge
- useEmbedReactions: read-only RealtimeClient subscription on album.publicToken (no viewer-page side effects, A15), rebind teardown, 10s grace disconnect, no fake bubbles on WS failure
- ReactionLayer: demo-frozen heart effect (12/16/20 sizes, two colors, 110px rise, 1.6s ease-out, 300ms stagger, max 8, drop-shadow) in unscoped block (created elements lack scoped hash)
- demo alignment: initial offset 32px, decode+500ms startup gate, 1:1 drag, arrows +-40, focus-tip, bidirectional manual scroll (manualScroll), loader handle 100x44 exact styles, <=599px offset default 12
- tests: +8 reactions unit (244 viewer), e2e E05: real cross-context like -> heart on correct photo (EMB-A09), zero likes/visits submission (EMB-A15), 16s hearts recording

Co-Authored-By: Claude Code <noreply@anthropic.com>

docs/plans/progress/UI04-验收记录.md

@@ -64,7 +64,7 @@
 - [x] E02 静态高保真样板（登记见下）
 - [x] E03 连续滚动（登记见下）
 - [x] E04 操作和生命周期（登记见下）
-- [ ] E05 实时气泡
+- [x] E05 实时气泡（登记见下；含效果示例 embed-preview-2026-09-22.html 对齐）
 - [ ] E06 管理预览与接入
 - [ ] E07 验收（EMB-A01…A16 逐项见第 5 节）
 
@@ -124,6 +124,36 @@
 - E04 出口确认：小窗可操作（暂停/手动/键盘/点击四通道），动画不造成点错照片
   （点击锁定+拖动取消断言）。
 
+### 效果示例对齐登记（2026-09-22，用户指定 docs/designs/embed-preview-2026-09-22.html）
+
+以效果示例为准重调的实现值（方案值域内的具体冻结）：
+- 初始偏移 32px（顶部露首照上缘片段，示例 offset=32；单张仍完整展示）；
+- 心形：实心 SVG 心、尺寸 12/16/20 轮转、双色 #FF6B7A/#FF8B98 交替、右缘
+  10/20/30、漂移 {-8,5,8}px、旋转 -5°→6°、scale .8→1.05、上浮 110px、
+  1.6s ease-out（透明度 0/.85/.75/0）、drop-shadow——ReactionLayer 用非 scoped
+  样式块（createElement 粒子无 data-v 哈希，scoped 选择器不命中——踩坑登记）；
+  一批 ≤3 颗、颗间 300ms 错峰、同屏 ≤8；
+- 拖动 1:1 跟手（去 0.5 系数）；方向键 ±40；聚焦小提示 focus-tip；
+- 启动闸：首窗图片 decode + 500ms 静置（decode 原因位）；
+- 手动滚动双向回绕（示例 translate 负向 prepend 分支——stream.ts manualScroll）；
+- loader v2：把手 100×44/圆角 22/1px #e3eaf2 边/白底/蓝图标 16+12px 文案；
+  默认水平偏移 ≤599px 视口 12px；收起钮 − 字形 19px（#ffffffd1 底）。
+
+### E05 登记（2026-09-22）
+
+- 架构：纯函数 reactions.ts（heartsForDelta 抽样 1→1/2–5→2/更大→3；BurstDeduper
+  TTL30s/容量200；PendingVisibleCache 5s/50 条；EmissionThrottle 250ms 合并封顶3）
+  + 编排 useEmbedReactions.ts（复用 RealtimeClient 只读订阅 album.publicToken——
+  不经 useAlbumRealtime 带出观众页副作用；换绑停连清态；失活 10s 宽限断连；
+  WS 断线不伪造气泡）+ ReactionLayer.vue 粒子层（§5.1 值域 + 示例冻结值）。
+- 归属（§5.2）：burst → 照片可见（交集 ≥20px）→ visibleRectOf 交集下侧-10 出泡；
+  不可见 → 5s 缓存转可见补放；收起/隐藏/换绑/reducedMotion 清粒子。
+- 单测：embed-reactions.spec.ts 8 用例——全仓 viewer 244 绿。
+- e2e（E05 块 2 用例 + 录屏）：真实公开路径点赞（另一上下文 POST likes）→
+  心形出现于被赞照片交集下侧区间（EMB-A09）；组件自身零点赞/浏览提交
+  （网络断言，EMB-A15）；16s 真实点赞节奏录屏 recordings/e05-hearts-16s.webm。
+- E05 出口确认：两上下文真实点赞触发正确图气泡（归属区间断言通过）。
+
 ## 4 测量与证据索引
 
 （E02+ 起登记：尺寸实测、位移曲线、DOM/连接上限统计、录屏清单。）