借鉴对象
- 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 文档。
- Theme tokens 留在 apps/web/src/styles/global.css：spacing、radius、font、color 和 motion 是当前需要的全部设计底座，不再保留独立 packages/design-system。
- P0 React primitive 层是 apps/web/src/components/ui：Button、IconButton、StatusBadge、MetricCard、Surface、EmptyState 采用 CVA、clsx、tailwind-merge、Radix Slot/Tooltip 和 lucide-react，消费 runtime token 并提供稳定组件 API；它不是数据 truth 或 runtime command owner。
- 第一批生产组件消费者已经开始从手写 surface 收敛到 React primitives：ChartCard 使用 Surface 与 Button asChild 保留 chart-card 视觉合同，WorkbenchPageIntro 使用 Surface 与 MetricCard 渲染统计块，MetricCard 增加 valueFirst 以支持页面级指标的既有阅读顺序。
- apps/web/src/styles/global.css 暴露 --runtime-motion-*、--runtime-ease-*、--runtime-depth-*、--runtime-elevation-*、--runtime-focus-*、--runtime-surface-* 变量，后续 overlay / drawer / command / visual surface 必须复用。
- Storybook 是 React 体验投影面：preview 加载 apps/web global.css、admin-next globals.css 与 runtime token，并用 MSW + storybook-only fixture/mocks 隔离远端数据；当前 story inventory 包含 UI Primitives、Command、HoverPreview、BookCover、BookshelfGrid、RuntimeBookFeed、BookReader、PDF/EPUB reader、RuntimeBookDetail/Reader、EditIntakeWorkbench、shared site chrome、showcase cards、GitHub visualization 和 admin console 组件，并通过 npx vitest --project storybook run 执行交互与唯一 CssCheck 验证。
- P1 已部分落地：Home Command layer 和 fallback Knowledge Search layer 开始复用 runtime depth、surface、elevation 和 motion token。
- Motion Division 的 Motion for React 是 active animation library：apps/web/src/lib/motion.ts 是项目统一导入入口，从 motion/react 转出 motion、MotionConfig、AnimatePresence、LazyMotion、m、hooks 和类型；Storybook 的 Design System/Motion Runtime probe 验证它能在 React island 中渲染，后续复杂组件必须通过这个入口接入 motion token 与 reduced-motion 规则。
- 当前 active libraries 是 cmdk、motion、@floating-ui/react、lucide-react、class-variance-authority、clsx、tailwind-merge 与 Radix Slot/Tooltip。
- shadcn/ui 已进入 active component substrate：apps/web/components.json 固定 new-york / neutral / lucide 配置，apps/web/src/components/shadcn/ui 存放通过 shadcn CLI source-generated 的 Button、Card、Dialog、Input、Textarea、Badge、Tabs、Table、Alert、Separator、Skeleton、Tooltip、Popover、Sheet、Command、DropdownMenu、Select、Switch 和 Checkbox；Design System/shadcn UI story 是 Storybook 组件库投影面，不替代 apps/web/src/components/ui 的 MyBlog primitives，也不拥有 runtime/data truth。
- 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。
- 只在出现第二个真实消费者时，才把 theme tokens 从 global.css 提升为共享包。
