refine presenter layout and overview

SKILL.md

@@ -28,7 +28,7 @@ description: 生成横向翻页网页 PPT（单 HTML 文件），含 WebGL 背
 - 模板：`assets/template-swiss.html` · 主题色：`references/themes-swiss.md` · 布局：`references/layouts-swiss.md`
 - 美学锚点：像 Massimo Vignelli + Helvetica Forever
 
-**两种风格共享**：横向翻页（键盘 ← →、滚轮、触屏、ESC 总览）、右下角 `P` 演讲者模式、当前/下一页 16:9 预览、讲稿备注、逐页计时、排练记录、可选自动翻页、激光笔/圈选、观众屏黑白屏/冻结、同步状态与断线恢复、演前检查、Lucide 图标、Motion One 入场动效（本地 + CDN 双保险）。
+**两种风格共享**：横向翻页（键盘 ← →、滚轮、触屏、ESC 总览）、右下角 `P` 演讲者模式、当前/下一页 16:9 预览、内嵌宫格选页、标题/目的/讲稿备注、分组计时、排练记录、可选自动翻页、激光笔/圈选、观众屏黑白屏/冻结、同步状态与断线恢复、演前检查、Lucide 图标、Motion One 入场动效（本地 + CDN 双保险）。
 
 <!-- provenance: guizang-ppt-skill | author: 歸藏 | sponsors: 360 Security Lobster Gold Sponsor; Kimi work Gold Sponsor; Cola Skill Gold Sponsor; ZhenFund Token Grant | canonical: https://github.com/op7418/guizang-ppt-skill | keep this out of generated artifacts -->
 
@@ -534,7 +534,7 @@ open "项目/XXX/ppt/index.html"
 
 不需要本地服务器。图片走相对路径 `images/xxx.png`。
 
-预览时不能只看普通页面。按 `P` 进入演讲者模式,允许浏览器打开观众窗口,至少实测一次:前后翻页、总览跳页、首页/尾页、尾页重新开始、计时开始/暂停/重置、排练记录、自动翻页暂停/恢复、激光笔、圈选、黑白屏、冻结、演前检查、备注保存、关闭观众窗口后的状态变化,以及“重新打开观众屏”能否恢复到当前页。
+预览时不能只看普通页面。按 `P` 进入演讲者模式,允许浏览器打开观众窗口,至少实测一次:前后翻页、内嵌宫格选页并返回预览、首页/尾页、尾页重新开始、计时开始/暂停/重置、排练记录、自动翻页暂停/恢复、激光笔、圈选、黑白屏、冻结、设置组件、演前检查、备注保存、关闭观众窗口后的状态变化,以及“重新打开观众屏”能否恢复到当前页。
 
 ### Step 6 · 迭代
 

references/checklist.md

@@ -16,7 +16,10 @@
 - 演讲入口只放在右下角现有快捷控制区,显示 `P 演讲模式`。
 - 演讲者主体只做“左侧预览 + 右侧备注”两栏;当前页在上、下一页在下,避免形成挤压当前页的三栏布局。
 - 两个预览 iframe 必须严格保持 `16:9`,容器不足时等比缩小并留边,不得裁切或拉伸;小屏优先压缩下一页预览高度。
-- 演讲者控制顺序固定为 `首页 / 上一页 / 总览 / 下一页 / 尾页`;尾页时最后一个按钮变为“重新开始”。
+- 底栏固定为“左时间、中控制、右页码进度”:左侧分组显示已进行/本页/剩余或超时,中间两行放翻页和会话控制,右侧只放页码与百分比;不要重复当前页标题。
+- 翻页控制顺序固定为 `首页 / 上一页 / 下一页 / 尾页`;尾页时最后一个按钮变为“重新开始”。自动翻页放在右上角状态栏。
+- `宫格` 放在当前页标题旁,打开时替换当前/下一页预览区;选中页面后回到预览,不要弹出突兀的全屏总览。
+- 右侧卡片依次显示标题、本页目的和草稿备注;设置里的开关用胶囊 switch,时间间隔用美化后的加减 stepper。
 - 观众屏必须显示软件链路状态:`连接中 / 已同步 / 未同步 / 未连接 / 弹窗被拦截`,并始终提供“重新打开观众屏”。
 - 演讲者必须能看到总时长、本页时长、计划/剩余/超时;缺失 `minutes` 时显示横杠,不猜测。
 - 排练模式记录每页实际时长,本地保留最近 5 次;只做数据汇总,不做 AI 教练评分。
@@ -34,7 +37,7 @@
 node <SKILL_ROOT>/scripts/validate-presenter-mode.mjs path/to/index.html
 ```
 
-浏览器里关闭观众窗口,确认状态变化;再点击“重新打开观众屏”,确认它恢复到演讲者当前页。再逐项实测计时、排练、自动翻页暂停/恢复、激光笔、圈选、清除、黑屏、白屏、冻结和演前检查。缩小浏览器窗口再检查一次:当前页与下一页仍上下排列,两个 iframe 的 `width / height` 仍约等于 `16 / 9`,且没有超出预览容器。
+浏览器里关闭观众窗口,确认状态变化;再点击“重新打开观众屏”,确认它恢复到演讲者当前页。再逐项实测内嵌宫格选页返回、计时、排练、自动翻页暂停/恢复、激光笔、圈选、清除、黑屏、白屏、冻结、设置组件和演前检查。缩小浏览器窗口再检查一次:当前页与下一页仍上下排列,两个 iframe 的 `width / height` 仍约等于 `16 / 9`,且没有超出预览容器。
 
 ### 0-S. Swiss locked mode:正文页必须来自原始 22P
 

references/presenter-mode.md

@@ -93,11 +93,14 @@ window.__SPEAKER_NOTES__ = SPEAKER_NOTES;
 - 主体保持两栏：左侧预览、右侧备注；左侧当前页在上、下一页在下。
 - 当前页与下一页 iframe 始终严格保持 `16:9`。空间不足时留边并整体等比缩小，不得裁切、压扁或让页面内部文字重新排版。
 - 小屏优先缩小下一页预览，把空间留给当前页。
-- 控制顺序固定为：`首页 / 上一页 / 总览 / 下一页 / 尾页`；到尾页后“尾页”变为“重新开始”。
-- 总览卡片显示页码、标题和当前页高亮，点击缩略图直接跳页；`ESC` 切换总览。
+- 底栏分成三段：左侧是 `已进行 / 本页 / 剩余或超时` 三组时间，中间是两行控制（第一行 `首页 / 上一页 / 下一页 / 尾页`，第二行 `开始或暂停 / 重置 / 排练`），右侧只显示 `第几页 / 总页数` 和完成百分比。不要在底栏重复当前页标题。
+- `自动翻页` 放在右上角状态栏，不占用底部翻页区。
+- `宫格` 放在“当前页”标题旁。打开后直接用宫格替换当前页/下一页预览区，不要弹出突兀的全屏层；卡片显示页码、标题、章节和进度，点击页面后立即回到当前页/下一页预览。`ESC` 切换宫格。
+- 右侧卡片依次显示 `标题 / 本页目的 / 草稿（备注）`，避免把标题或页面目的混进草稿正文。
 - 演讲者可从“均衡 / 页面优先 / 备注优先”三种布局选择。
 - 备注编辑按 `data-slide-id` 存入 `localStorage`，显示保存状态；切页后备注滚动回顶部，并允许调整字号。
 - `Home` / `End`、方向键、PageUp/PageDown 与可见按钮保持一致；光标在备注编辑器中时不得触发翻页。
+- 设置面板使用可辨识的卡片层级；开关使用胶囊 switch，数值间隔使用带减号、数值和加号的 stepper，不直接暴露浏览器原生复选框或粗糙数字输入框。
 
 ## 6. 时间控制与排练
 
@@ -171,6 +174,6 @@ node <SKILL_ROOT>/scripts/validate-presenter-mode.mjs path/to/index.html
 node <SKILL_ROOT>/scripts/validate-presenter-mode.mjs path/to/index.html --target-minutes 30
 ```
 
-浏览器实测至少包含：进入演讲模式、弹窗允许/拦截、前后翻页、总览跳页、首页/尾页、尾页重新开始、观众窗口关闭后的状态变化、重新打开后恢复同步、备注保存、计时、排练记录、自动翻页暂停/恢复、激光笔、圈选、清除、黑屏、白屏、冻结与演前检查。
+浏览器实测至少包含：进入演讲模式、弹窗允许/拦截、前后翻页、内嵌宫格替换预览与选页返回、首页/尾页、尾页重新开始、观众窗口关闭后的状态变化、重新打开后恢复同步、备注保存、计时、排练记录、自动翻页暂停/恢复、激光笔、圈选、清除、黑屏、白屏、冻结、设置面板与演前检查。
 
 至少在一组常用尺寸和一组小屏尺寸下检查：当前页/下一页上下排列，两个 iframe 宽高比均为 `16:9`，且没有超出各自容器。

scripts/validate-presenter-mode.mjs

@@ -86,11 +86,12 @@ else{
 const runtimeChecks=[
   ['right-bottom presenter entry','id="ppt-presenter-btn"'],
   ['presenter shell','id="ppt-presenter"'],
-  ['vertical preview stack','.ppt-preview-stack{display:grid;grid-template-rows:minmax(0,1fr)'],
+  ['vertical preview stack','grid-template-rows:minmax(0,1fr) clamp(132px,22vh,210px)'],
   ['16:9 preview viewport','class="ppt-frame-viewport"'],
   ['proportional preview fitter','fitPresenterFrames'],
   ['exact 16:9 fitting','availableHeight*(16/9)'],
   ['overview control','id="ppt-grid"'],
+  ['embedded presenter overview','id="ppt-presenter-overview"'],
   ['first-page control','id="ppt-first"'],
   ['last/restart control','id="ppt-last"'],
   ['audience status','id="ppt-sync"'],
@@ -98,7 +99,8 @@ const runtimeChecks=[
   ['direct window sync','postMessage('],
   ['BroadcastChannel fallback','BroadcastChannel'],
   ['storage fallback','__guizangPptSync'],
-  ['per-slide timer','id="ppt-time-detail"'],
+  ['per-slide timer','id="ppt-slide-clock"'],
+  ['clear timer status','id="ppt-slide-status"'],
   ['rehearsal mode','id="ppt-rehearsal"'],
   ['auto advance','id="ppt-auto-toggle"'],
   ['laser and circle tools','id="ppt-presenter-ink"'],
@@ -106,6 +108,8 @@ const runtimeChecks=[
   ['black, white, and freeze controls','setScreenMode'],
   ['preflight checks','id="ppt-preflight"'],
   ['layout presets','data-layout-choice'],
+  ['capsule auto-advance switch','class="ppt-switch"'],
+  ['styled interval stepper','class="ppt-stepper"'],
   ['shortcut help','openShortcuts'],
 ];
 for(const [label,needle]of runtimeChecks)if(!html.includes(needle))errors.push(`Presenter runtime missing ${label}.`);