借鉴对象
- Linear
- Arc Browser
- Cosmos
- Immich Web
- AFFiNE
- Raycast
- shadcn/ui
- Radix UI
- Vaul
- tldraw
forming / System Design Archive
Runtime Experience Layer
Runtime Experience Layer 把 MyBlog 的 Drawer、Command、Reader、Visuals、Graph、OpenList Shell 和 Pinterest Shell 从多个 runtime patch 收束成统一的交互质感系统：Spatial Layer、Interactive Object、Continuous Surface、Command Runtime 和 Infinite Semantic Canvas。目标不是博客主题 polish，而是让网站像一个活着的系统。
拒绝的方案
- 继续以 button、card、hero 为主语加 UI，因为 MyBlog 当前缺的是 runtime coherence，不是组件数量。
- 直接引入 Aceternity UI、Magic UI 或 React Bits 的通用炫酷特效，因为粒子、装饰光球、bokeh 和营销 hero 会破坏阅读产品方向。
- 为了“上栈”安装或声明 shadcn/Radix/Vaul/React Flow，因为没有具体 surface migration 和浏览器证据的依赖只能算 installed / not migrated。
- 让 Drawer、Search、OpenList、Pinterest、Graph 各自维护 z-index、motion、focus 和 overlay 规则，因为这会继续扩大多 runtime patch 感。
运行方式
- 规范入口是 README.md 与本 Architecture Codex 条目；交互质感和 runtime coherence 不再维护独立 docs 文档。
- P0 token 包是 packages/design-system；当前只定义 motion、depth、elevation、focus 和 surface token，不是组件库。
- apps/web/src/styles/global.css 暴露 --runtime-motion-*、--runtime-ease-*、--runtime-depth-*、--runtime-elevation-*、--runtime-focus-*、--runtime-surface-* 变量，后续 overlay / drawer / command / visual surface 必须复用。
- P1 已部分落地：Home Command layer 和 fallback Knowledge Search layer 开始复用 runtime depth、surface、elevation 和 motion token。
- 当前 active libraries 是 cmdk、motion、@floating-ui/react、lucide-react。
- shadcn/ui 仍是 target convention 且组件目录尚未初始化；Radix UI primitives、Vaul、React Flow 已安装但尚未接管 overlay、drawer 或 graph surface；tldraw 是 future infinite canvas reference。
- Aceternity UI、Magic UI、React Bits 只作为 technique reference，不能直接导入通用发光、粒子、orb、bokeh 或营销 hero 效果。
取舍
- 先沉淀 token 和术语不会立刻让 Drawer 变成 Vaul，但能让后续迁移拥有同一 motion、depth 和 focus 语言。
- 禁止孤立炫技会牺牲短期视觉冲击，但保护 MyBlog 的阅读空间和知识系统气质。
- 把 Card 改称 Interactive Object 会提高设计要求：hover、focus、open、reader continuity 都必须解释对象身份如何延续。
- Infinite Canvas 是未来方向，不应在 Graph authority、search authority 和 object contract 未稳定时抢先替换现有页面。
后续方向
- P1 将 Command Runtime 统一为唯一 Ctrl/Cmd+K owner，并把 command layer 使用 runtime depth / focus token。
- P2 将 Drawer/Search/OpenList/Pinterest 收束进统一 overlay stack，再评估 Radix/Vaul。
- P3 增加 Book Card -> Drawer -> Reader 的 object continuity motion。
- P4 研究 tldraw / React Flow / canvas runtime，把 visuals、knowledge 和 annotations 逐步推向 Infinite Semantic Canvas。
- 把 packages/design-system token 生成 CSS / TS 双向合同，减少 global.css 和 React island 的硬编码漂移。
