VOZEB-COMPONENT-FOUNDATION-R3 — Prompt / Media 低层组件候选

Task ID: VOZEB-COMPONENT-FOUNDATION-R3
目标用户结果: 在 VOZEB React/Next 组件实验室提供可复用的 Prompt 卡片、详情 surface 和多模态媒体浏览器
Base SHA: a9811177d08bea5a80e03af4a22d362de299168c
允许修改: web/src/components/ocean/**、web/src/components/ui/media-frame.tsx、
          web/src/components/ui/component-manifest.*、组件测试、组件说明与 docs/oceanway 候选记录
禁止修改: retail-platform、User Web/Vue、API/领域契约、路由整合、Canvas/Space 迁移、生产配置
状态: DESIGN_CANDIDATE / REVIEW_REQUIRED / NOT_FROZEN

1. 范围与非目标

本轮只在 oceanway-vozeb 独立组件工作树中完成视觉组件构建。retail-platform 是只读的内容参考，本轮没有修改；不进行首页或其它页面整合，也不恢复旧 User Web 页面。组件只接可序列化 view model、children 和 callbacks，不读取 store、router、session、API、模型、权限、积分、账务或持久化事实。

本轮没有把原始 prompt-detail-dialog、prompt-select-dialog、public-work-preview-modal 或模型选择器直接搬入共享层。Modal 生命周期、剪贴板、签名 URL、下载、收藏/保存、权限和查询继续由页面 adapter 负责。

2. 交付组件

`OceanPromptCard`

入口：web/src/components/ocean/patterns/ocean-prompt-card.tsx

OceanPromptCardItem 只描述 id、标题、正文、封面、分类、标签和已格式化时间。卡片支持 card / compact 两种布局、选中/禁用状态、预览/打开/动作回调、loading action 和额外动作槽位。可打开的 body 使用键盘可操作的 role="button"，动作按钮保持在兄弟层级，避免嵌套 interactive control。封面使用 MediaFrame 与局部 OceanGlareHover。

`OceanPromptDetail`

入口：web/src/components/ocean/patterns/ocean-prompt-detail.tsx

OceanPromptDetailItem 在卡片 view model 上增加创建时间和来源标签。组件是可嵌入的 detail surface，支持复制/保存等回调与自定义动作槽位；它不创建 Dialog、不访问剪贴板、不持久化，也不自行决定权限。OceanReveal 和 OceanGlareHover 都是可关闭的局部增强。

`OceanMediaBrowser`

入口：web/src/components/ocean/patterns/ocean-media-browser.tsx

OceanMediaBrowserItem 必须显式声明 image、video、audio 或 document，并可提供 src、thumbnailSrc、poster、alt、比例和状态。组件提供受控/非受控 active selection、 Arrow/Home/End roving focus、横向移动端/纵向桌面 rail，以及 ready/loading/empty/error 状态。视频缩略图只使用 poster/thumbnail，不启动视频；主视频使用 preload="metadata"，不会通过 URL 猜测媒体类型，也不负责 URL 归属、签名、下载或删除。

MediaFrame 根节点补充 data-media-kind，使空态、加载态和错误态仍保留真实媒体类型，便于测试和无障碍/分析适配器识别；不改变其既有渲染和状态语义。

3. Token、动效与性能边界

新 CSS 只消费 --ocean-air-* / --ocean-glass-* 语义 token；每个 surface 只有一条边界和一层阴影，不再叠加额外高光边框。
卡片和详情使用局部 GlareHover / Reveal，媒体 rail 使用有界 AnimatedList；不创建新 WebGL context、常驻 RAF 或全局键盘监听。
motion={false}、prefers-reduced-motion、prefers-reduced-transparency 和 forced-colors 保留静态、可读和可操作内容；禁用时不会触发外部 callback。
页面 adapter 仍负责日期/URL/权限/业务动作；实验室只使用合成数据和 no-op 回调。

4. 实验室与 manifest

/components 的 Ocean Foundation Lab 增加 “Prompt / Media view models” 面板，展示：

compact/card PromptCard 的打开、预览和动作回调；
PromptDetail 的复制/保存动作槽位；
image、audio、document、video（poster-only）媒体条目、active selection 和移动 rail。

component-manifest.ts 新增并标记为 built 视觉候选： ocean-prompt-card、ocean-prompt-detail、ocean-media-browser。清单统计从 242 项 / built 96 更新为 245 项 / built 99；其它 readiness 数量不变。web/src/components/ocean/README.md 和组件 inventory 同步记录了 adapter boundary 与未构建条目展示规则。

5. 自动化与浏览器证据

本候选提交前必须保留以下证据（命令在 web/ 目录执行）：

定向组件测试：ocean-prompt-media、ocean-patterns、ocean-component-kit、component-manifest
类型检查：pnpm exec tsc --noEmit --pretty false
ESLint：pnpm exec eslint . --quiet
Prettier：pnpm exec prettier --check .
差异检查：git diff --check

浏览器复核至少覆盖 /components 桌面 1280px、390px 移动布局、键盘 rail selection、 disabled/reduced-motion 静态回退、单一背景 canvas、无横向溢出和无控制台错误。浏览器结果是本地候选证据，不替代独立 Testing，不代表 Gate 1/FROZEN。

本轮候选复核结果（独立本地开发服务、文件 provider、合成数据）：

定向组件测试：4 files / 26 tests passed；全量 Web：517 files passed、4 skipped； 2342 tests passed、9 skipped。
tsc --noEmit、ESLint、Prettier check、git diff --check 均通过；生产构建静态页 63/63 通过。
桌面 1280px：候选面板内各有 1 个 PromptCard、PromptDetail、MediaBrowser；媒体 5 项（image / video / audio / document）、切换 wave → board 和 ArrowRight roving focus 均成功；卡片 body Enter 回调成功；scrollWidth === clientWidth === 1280，canvas 数量为 1。
动态路径：在 no-preference 下 900ms 两帧截图内容有 70,263 个字节差异，canvas 仍为 1；无浏览器 error。系统 reduced-motion 提示仅为 Motion 开发诊断，不是组件运行时错误。
390px：scrollWidth === clientWidth === 390；媒体 rail 使用横向 overflow: auto，移动端顶部导航替代桌面侧栏；候选内容和媒体标签仍可见。
深色主题：color-scheme: dark、背景和语义 token 正常切换，无横向溢出；reduced-motion / reduced-transparency 下内容保持可见，Glare/Reveal 静态化。

6. 未覆盖 Gap

原始 Prompt 选择器/详情弹层、作品公开媒体浏览器和 Model Picker 尚未完成业务 adapter 解耦；当前只提供低层候选。
本轮没有接入任何产品路由、真实 API、权限、上传、下载、剪贴板、保存或计费行为。
WebKit/Firefox、低端设备和色彩校准仍需后续独立性能/兼容测试；WebGL 失败降级沿用 Foundation 现有实现。
Foundation v1 仍需用户视觉确认和独立验收；不得把本候选宣称为 Gate 1 通过。

交接时报告候选 commit/tree、变更文件、自动化命令结果、浏览器结果和上述 Gap，并保持 DESIGN_CANDIDATE / REVIEW_REQUIRED / NOT_FROZEN。

VOZEB-COMPONENT-FOUNDATION-R3 — Prompt / Media 低层组件候选

On this page