# Graphics Insertion · Dual Preview — Next-Session Pickup

> **Generated**: 2026-05-20 PM late, end of session
> **Use this when**: starting a new session to continue this task
> **One-line context**: Graphics Insertion 单预览 → 双预览（PVW + PGM）UX 设计，已完成 v9，仍有若干 deferred 项

---

## 1 · Current Figma state (v9)

| Key | Value |
|---|---|
| Figma file | `Micro-Apps-20250923` (`DtZcMkhNy6qh6jbQQnhreQ`) |
| Target page | `Separate Graphics app PVW and PGM into two separate previews 20260519` (`4083:10338`) |
| Reference frame (Before) | `4105:85` (clone of `1747:2764`) |
| **Main deliverable (After)** | **`4105:269`** (1920×1080) |
| Rules card | `4149:511` |
| Overlay Cut state machine | section header `4196:440` + state A `4196:443` + state B `4196:455` + arrow `4196:469` |

### Key node IDs inside After frame

| Element | Node ID |
|---|---|
| Top bar (TVU library instance) | `4106:350` |
| Main Row (HORIZONTAL auto-layout) | `4202:440` |
| Left Column (VERTICAL auto-layout) | `4202:441` |
| URL Row (cloned from Before `Content`) | `4146:410` |
| Video Area (HORIZONTAL auto-layout, primaryAlign=CENTER) | `4202:442` |
| PVW + Meter Group | `4203:440` |
| PVW Preview (640×360, 16:9, green border) | `4107:444` |
| PVW Audio Meter (cloned Group 61 from `1240:15412`) | `4195:426` |
| PGM + Meter Group | `4203:441` |
| PGM Preview (640×360, 16:9, red border) | `4107:449` |
| PGM Audio Meter (cloned Group 61) | `4195:452` |
| PVW bottom strip (auto-layout SPACE_BETWEEN) | `4108:556` |
| PGM bottom strip (auto-layout SPACE_BETWEEN) | `4108:557` |
| Bottom Toolbar (cloned from Before `Content`) | `4144:676` |
| Right Layer Panel (cloned, 460w × 952h) | `4112:396` |

### v9 visual rules in effect

- PVW: 3px brand-green `INSIDE` stroke + 3-stop vertical gradient (`#1a2d12` → `#355a22` → `#4a6b2b`) + small top-left source chip (`● PVW · Cam 1 · Stadium`) + top-right timecode chip
- PGM: 3px red stroke + 3-stop navy gradient + `● PGM · LIVE · 13:42:18` chip + timecode chip
- 16:9 ratio exact 1.7778 ✓
- 81% auto-layout (47/58 frames), 11 absolute all M31-legal exceptions

---

## 2 · Standing rules MEMORIZED for next session

> 这些规则**已在 TVU Design System 写明**，本 session 中违规过、必须下次贯彻：

1. **M31** (`mockup-conventions.md`): 页面布局**默认 Auto Layout**，absolute 仅限 overlay / annotation 浮层。**下次起手第一句必须 echo "M31 已加载，layout 默认 auto-layout"。**
2. **M0** (`mockup-conventions.md`): 任何 ≥3 element 或多 frame mockup **必须先产 Phase 0 mapping table** 给用户校验后才开画。
3. **M21** / **M-INTEGRITY §I1** (`mockup-conventions.md`): 同 file 有 sibling Plan/version 时，新 section 必 mirror sibling layout 风格。本 session **修正 scope** = sibling 应包含**同 file 不同 page** 的 sibling app（待回流 §I1b 子条款，见 §4）。
4. **M23** + **M33**: 注释层用 navy bilingual chip，产品 UI 层单语；PP-style state mini-frame 范式可与 M23 互补使用（spec 用 M23，state machine 用 PP 范式）。
5. **MicroApps Universal Layout** (项目本地约定，将写到 `MicroApps/docs/microapps-layout-contract.md`):
   - Top bar 全宽 frozen
   - 主区**整体左右分栏**
   - 左栏**再上下三段**: top URL row / 中部 app-specific work area / bottom toolbar
   - 右栏**全高 sidebar** (Layer panel / Transcode settings 等)
   - 参考样本: Standard Conversion app（同 file，未具体 node ID）+ Graphics Insertion v8/v9

---

## 3 · Deferred items (priority order)

### 🔴 P0 — 视觉真实度（用户最近反馈"效果图糟糕"）
- [ ] **Real video content in PVW/PGM**：现在用 gradient + chips 近似，若需 100% 还原 PP-2025-2026 broadcast switcher 风格需 `figma.createImage(base64)` 上传 stock 篮球 / 新闻 / 直播现场照片。参考 PP node `2002:7240`。
- [ ] **Multi-source camera grid 备选**：PP 范式底部有 4×2 source 缩略图。本 PRD 没要求，但讨论值得 — 是否要加？

### 🟡 P1 — TVU 回流（待用户拍板）
- [ ] **候选 1 修正**: `mockup-conventions.md §M-INTEGRITY §I1b` 子条款 — sibling 扩到"同 file 不同 page"。已与原 §I1（same page Plan A/B sibling）同源、合并即可。
- [ ] **候选 2 待 deep-dive**: M22 Structure Echo Protocol — 用户要求**先 deep-dive PP-2025-2026 layer cut 交付参考**，写分析报告后再判断是否回流。**未完成**。
- [ ] **候选 5 retrospection 归档**: 写 `tvu-design-system/docs/internal/retrospection/2026-05-20-graphics-insertion-9-round-retrofit.md` 复盘文件，记录 v1→v9 完整 trail 与 process gaps。

### 🟢 P2 — 项目本地落档
- [ ] **`MicroApps/docs/microapps-layout-contract.md`** 新文件 — 把 MicroApps Universal Layout 契约（top bar + L/R + L 三段 + R 全高 sidebar）落到 MicroApps 本项目 docs。这是项目本地约定、不上 TVU 回流。
- ✅ **Session 复盘** 已写入 [`2026-05-20-graphics-insertion-9-round-retrospect.md`](./2026-05-20-graphics-insertion-9-round-retrospect.md)（项目本地、未污染 TVU repo；详细记录 9 轮 retrofit 病灶 + 责任拆分 + 下次建议 + 未来抽象触发条件）

### ⚪ P3 — 可选 polish
- [ ] Overlay Cut state machine v2 — 当前 PP-style 简化版（2 mini-frames + arrow）。可扩展到 3+ states（含 Clear overlay / Remove overlay flow）。
- [ ] M23 v4 rules card 更新到 v9 — 当前 rules card 描述 scheme E + 1+3 balance，v6 的"strict L/R + L 三段"和 v8 的 auto-layout、v9 的视觉范式都没写进 rules card 文字内容。

---

## 4 · 回流候选 — 整理状态（不动 TVU 文件）

| # | 候选 | 状态 | 落点 |
|---|---|---|---|
| 1 | MicroApps Universal Layout Contract | 🟢 项目本地（不回流 TVU） | `MicroApps/docs/microapps-layout-contract.md` |
| 2 | M22 Structure Echo | 🟡 待 PP deep-dive 分析后再判 | TBD |
| 3 | M0 Geometric Pre-flight | 🔴 撤回（不写规则，留作 AI 个人习惯） | — |
| 4 | M-INTEGRITY §I1b · 同 file 跨 page sibling | 🟢 可回流 | `mockup-conventions.md §M-INTEGRITY §I1`（子条款扩展） |
| 5 | Retrospection 历史档案 | ✅ **已写到项目本地** | [`MicroApps/docs/2026-05-20-graphics-insertion-9-round-retrospect.md`](./2026-05-20-graphics-insertion-9-round-retrospect.md)（不污染 TVU；未来累积同类病灶再抽象） |

详细描述见 [handoff doc §"TVU 回流候选清单"](./2026-05-19-graphics-insertion-dual-preview-handoff.md)。

---

## 5 · Reference materials used this session

| Reference | File | Node | 用途 |
|---|---|---|---|
| Reference frame (Before) | `DtZcMkhNy6qh6jbQQnhreQ` | `1747:2764` | clone 为 Before 帧 |
| Audio meter Group 61 | `DtZcMkhNy6qh6jbQQnhreQ` | `1240:15412` (inside Edit Stinger `1240:15357`) | cloned 给 PVW + PGM meter |
| MicroApps universal layout 参考 | (Standard Conversion截图, 用户提供) | — | 确认 top bar / 左 input/preview/output / 右 sidebar 结构 |
| Layer cut delivery 范式 | `tmVCFjx1BCfb7EP5OPD1AP` | `1665:9076` (Studio-overlay 全 page) | PP-style state mini-frame + arrow 范式 |
| PVW/PGM 视觉范式 | `tmVCFjx1BCfb7EP5OPD1AP` | `2002:7240` (Studio-overlay 一帧) | v9 colored border + gradient + interior chip 范式来源 |

---

## 6 · Iteration trail summary

v1 (initial w/ Mid Ops + Video Cut + section labels) → v2 (16:9 + remove Video Cut, over-corrected with section labels) → v3 (revert Preset to bottom, kept labels) → v4 (Scheme E + cloned URL+toolbar from Before) → v5 (1+3 balance: bigger previews + center) → v6 (strict L/R + L inner 3-段, narrower right) → v7 (asset reuse: Group 61 audio meter + PP-style Overlay Cut state machine) → v8 (M31 auto-layout refactor 81%) → **v9** (PP-style visual polish: border + gradient + chips)

Full details: [`2026-05-19-graphics-insertion-dual-preview-handoff.md`](./2026-05-19-graphics-insertion-dual-preview-handoff.md)

---

## 7 · How to resume in new session

打开新对话，第一句 prompt 推荐：

```
@TVU mockup
继续 Graphics Insertion dual preview 任务。
请先读：
1. MicroApps/docs/2026-05-20-graphics-insertion-pickup.md（本文件）
2. MicroApps/docs/2026-05-19-graphics-insertion-dual-preview-handoff.md
3. tvu-design-system/docs/internal/mockup-conventions.md §M31 / §M-INTEGRITY / §M23

读完后 echo "M31 已加载, layout 默认 auto-layout" 给我看, 然后告诉我现在 v9
的状态 + 你建议下一步做什么（P0/P1/P2 哪个），等我确认后再动。
```

---

**生成于 2026-05-20 PM late · session-end · 准备 next-session pickup**