feat(canvas): 设计token系统 - 建立三层架构骨架 (#101)

* feat(canvas): 设计token系统 - 建立三层架构骨架 #94 #96

建立 Primitive→Semantic→Component 三层设计 token 体系，覆盖 9 个维度：
色彩/间距/字号/圆角/阴影/Elevation/动效/描边/不透明度。

- Primitive 层：纯值无语义，含 neutral 色板+节点类型色板+状态色、
  4px 栅格间距、10档字号、10档圆角、阴影+glow、12档 z-index、
  动效(duration+easing+delay+motion-scale)、描边、不透明度
- Semantic 层：引用 Primitive，随主题切换，含通用语义色、
  Canvas 语义(--cn-*)、Aceternity spatial 语义、节点类型语义、状态语义
- Component 层：引用 Semantic，含 Dock/Node/Modal/Panel/Prompt面板/
  进度条/缩放控制专属 token
- @theme inline 映射：节点类型色、状态色、Canvas 语义色、字号映射到 Tailwind utility
- prefers-reduced-motion 三级降级(L0正常/L1简化/L2禁用)
- AGENTS.md 新增 Design Token 使用规范，禁止新增裸 px 值
- 附带修复 canvas-drawing-excalidraw-editor.tsx TS7006 类型注解
- 附带修复 canvas-drawing-editor-modal.tsx TS2339 engine 字段缺失

Wayfinder 决策来源：#95 #96 #97 #98 #99

* fix(canvas): 设计token系统 - 修复CSS变量循环引用和命名兼容性 #94 #96

修复两个问题：

1. CSS变量循环引用：Primitive层 --color-node-*/--color-status-* 与
   @theme inline 中的 --color-node-*/--color-status-* 同名，经 Semantic
   层中转后形成循环（A→B→A）。改用 --palette- 前缀隔离 Primitive 色板，
   打断循环链路。

2. 变量名小数点兼容性：--space-0.5/1.5/2.5/3.5 中的小数点被部分 CSS
   linter 误判为类选择器。改为 --space-half/-1-half/-2-half/-3-half，
   保持语义清晰的同时提升工具链兼容性。

* refactor(canvas): 画布核心组件 - 迁移硬编码值到设计token #94

批次1：5个画布核心组件的裸 text-[Npx]/rounded-[Npx]/z-[N] 替换为
对应设计token，统一视觉语言：

- canvas-node.tsx：text-[10/11/9/17px]→fs-tiny/label/micro/heading-lg，
  rounded-[18px]→node-radius
- canvas-node-hover-toolbar.tsx：text-[11/17/10/9px]→fs-*，
  rounded-[14/9px]→dock-radius/dock-item-radius，z-[70]→z-panel-floating
- canvas-toolbar.tsx：text-[9/10/11px]→fs-*，
  rounded-[17/16/11/10px]→panel-radius/dock-item-radius-*，
  z-[30/40]→z-toolbar/z-toolbar-floating
- canvas-assistant-panel.tsx：text-[8/9/10/11px]→fs-*
- canvas-script-node.tsx：text-[9/10/11px]→fs-*

视觉零回归（token值与原硬编码值一致），代码可维护性提升。

* refactor(canvas): 画布辅助组件 - 迁移硬编码值到设计token #94

批次2：6个画布辅助组件的裸 text-[Npx]/rounded-[Npx]/z-[N] 替换为
对应设计token：

- canvas-style-picker-modal.tsx：text-[10/11px]→fs-tiny/label
- canvas-file-drop-overlay.tsx：z-[110]→z-modal-overlay，
  rounded-[28/20px]→r-5xl/r-3xl
- canvas-character-reference-node.tsx：text-[10px]→fs-tiny
- canvas-drawing-editor-modal.tsx：text-[11px]→fs-label
- canvas-video-prompt-tools.tsx：z-[1500]→z-toast，
  rounded-[12/10px]→r-lg/dock-item-radius
- asset-picker-modal.tsx：text-[10px]→fs-tiny

视觉零回归（token值与原硬编码值一致）。

* refactor(*): 全项目硬编码值 - 批量迁移到设计token #94

批次3：全项目 .tsx 文件中 372 处裸 text-[Npx]/rounded-[Npx] 批量
替换为对应设计token，剩余 25 处无直接 token 对应的低频值保留。

替换覆盖（按频率）：
- text-[10px]→fs-tiny (132处)
- text-[11px]→fs-label (100处)
- text-[9px]→fs-micro (45处)
- text-[12px]→fs-caption, text-[13/14px]→fs-body, text-[15px]→fs-body-lg
- text-[18px]→fs-heading-lg, text-[22px]→fs-title, text-[8px]→fs-micro
- rounded-[9/10px]→dock-item-radius, rounded-[12px]→r-lg
- rounded-[14px]→dock-radius, rounded-[16px]→r-2xl
- rounded-[17px]→panel-radius, rounded-[8px]→r-md

涉及 components/ 和 pages/ 下所有 .tsx 文件。
视觉零回归（token值与原硬编码值一致）。

* feat(canvas): 节点视觉层次规范 - 色带+状态徽章+四态递进 #97 #94

基于 Wayfinder 地图 #97 决议执行节点视觉重设计：

1. 节点类型色带（决策1）
   - 新增 nodeTypeColorVar() 函数，10种节点类型对应色带色
   - 节点左侧3px色条，引用 --cn-type-* token
   - 远距离最强信号，用户扫视画布即可识别节点类型

2. 节点状态徽章（决策2）
   - 新增 NodeStatusBadge 组件，loading/success/error 三态
   - 左上角圆角徽章，backdrop-blur 玻璃质感
   - success 态 2s 后自动淡出（canvas-status-success-fade 动画）

3. 四态递进视觉权重（决策3）
   - idle：无额外阴影
   - hover：轻微抬升阴影（16px 48px）
   - selected：2px 边框环（accent.primary 40% 透明度）
   - selected-primary：4px 软色环 + resize handle
   - active：6px 外发光环 + inner glow（最强强调）
   - 120-150ms ease-out 过渡

4. 阴影迁移
   - boxShadow 从硬编码改为分层语义化表达
   - 边框色 hover 态使用 color-mix 动态加深

Closes #97

---------

Co-authored-by: sikongyue <3155157671@qq.com>

web/src/pages/home/index.tsx

@@ -106,7 +106,7 @@ function ReturningWorkspace({ summary, detail, detailLoading, detailError, recen
                 <div className="flex min-w-0 items-center gap-3">
                     <WorkspaceSignalIcon variant="home" />
                     <div className="min-w-0">
-                        <h1 className="text-[22px] font-semibold leading-7">继续创作</h1>
+                        <h1 className="text-[var(--fs-title)] font-semibold leading-7">继续创作</h1>
                         <p className="mt-1 text-xs leading-5 text-foreground/55">回到最近工作，或先处理阻塞制作的事项。</p>
                     </div>
                 </div>
@@ -218,7 +218,7 @@ function FirstProjectWorkspace({ authenticated, canvasHydrated, recentIndependen
                 <div className="app-workflow-rail grid border-t border-border/75 sm:grid-cols-2 xl:grid-cols-4">
                     {workflow.map((item, index) => (
                         <div key={item.title} className={`app-workflow-step min-w-0 border-b border-border/75 py-4 sm:px-4 xl:border-b-0 xl:border-r ${index % 2 === 0 ? "sm:pl-0" : "sm:border-l"} ${index === workflow.length - 1 ? "xl:border-r-0" : ""}`}>
-                            <span className="text-[11px] font-semibold tabular-nums text-[var(--workspace-accent)]">0{index + 1}</span>
+                            <span className="text-[var(--fs-label)] font-semibold tabular-nums text-[var(--workspace-accent)]">0{index + 1}</span>
                             <h3 className="mt-2 text-sm font-semibold">{item.title}</h3>
                             <p className="mt-1 text-xs leading-5 text-foreground/48">{item.description}</p>
                         </div>
@@ -261,9 +261,9 @@ function WorkspaceMetric({ icon, label, value, detail, attention = false }: { ic
                 <span className={attention ? "text-foreground/75" : "text-[var(--workspace-accent)]"}>{icon}</span>
                 <span className={`size-1.5 rounded-full ${attention ? "bg-foreground/75" : "bg-[var(--workspace-accent)]"}`} />
             </div>
-            <div className="mt-5 text-[11px] text-foreground/45">{label}</div>
+            <div className="mt-5 text-[var(--fs-label)] text-foreground/45">{label}</div>
             <div className="mt-1 text-2xl font-semibold tabular-nums">{value}</div>
-            <div className="mt-1 truncate text-[10px] text-foreground/38">{detail}</div>
+            <div className="mt-1 truncate text-[var(--fs-tiny)] text-foreground/38">{detail}</div>
         </article>
     );
 }
@@ -274,8 +274,8 @@ function SpatialChapterStack({ detail, loading, projectId }: { detail?: Awaited<
     return (
         <div className="spatial-chapter-panel min-w-0 border-t border-border/75 p-5 sm:p-6 lg:border-l lg:border-t-0 lg:p-7">
             <div className="flex items-center justify-between gap-3">
-                <div><div className="text-[10px] font-medium text-foreground/38">制作层级</div><h2 className="mt-1 text-sm font-semibold">章节轨道</h2></div>
-                <span className="text-[10px] tabular-nums text-foreground/35">{units.length ? `${units.length} 章` : "待建立"}</span>
+                <div><div className="text-[var(--fs-tiny)] font-medium text-foreground/38">制作层级</div><h2 className="mt-1 text-sm font-semibold">章节轨道</h2></div>
+                <span className="text-[var(--fs-tiny)] tabular-nums text-foreground/35">{units.length ? `${units.length} 章` : "待建立"}</span>
             </div>
             <div className="spatial-chapter-deck mt-4" aria-label="项目章节制作层级">
                 {loading ? Array.from({ length: 4 }, (_, index) => <span key={index} className="spatial-chapter-card is-loading" style={{ "--deck-x": `${index * 12}px`, "--deck-y": `${index * 28}px`, "--deck-z": `${-index * 18}px`, zIndex: 8 - index } as CSSProperties} />) : null}
@@ -286,9 +286,9 @@ function SpatialChapterStack({ detail, loading, projectId }: { detail?: Awaited<
                         className={`spatial-chapter-card ${unit.id === activeUnitId ? "is-active" : ""}`}
                         style={{ "--deck-x": `${index * 12}px`, "--deck-y": `${index * 28}px`, "--deck-z": `${-index * 18}px`, zIndex: 8 - index } as CSSProperties}
                     >
-                        <span className="text-[9px] font-semibold tabular-nums opacity-55">{String(unit.position + 1).padStart(2, "0")}</span>
+                        <span className="text-[var(--fs-micro)] font-semibold tabular-nums opacity-55">{String(unit.position + 1).padStart(2, "0")}</span>
                         <span className="mt-2 block truncate text-xs font-semibold">{unit.title}</span>
-                        <span className="mt-1 block text-[9px] opacity-50">{unit.status === "completed" ? "已完成" : unit.id === activeUnitId ? "当前制作" : "等待推进"}</span>
+                        <span className="mt-1 block text-[var(--fs-micro)] opacity-50">{unit.status === "completed" ? "已完成" : unit.id === activeUnitId ? "当前制作" : "等待推进"}</span>
                     </Link>
                 )) : null}
                 {!loading && !units.length ? <div className="grid min-h-52 place-items-center text-center text-xs leading-5 text-foreground/42">创建剧情章节后<br />这里会形成制作层级</div> : null}
@@ -302,8 +302,8 @@ function WorkbenchActionLink({ action }: { action: ReturnType<typeof projectNext
     return (
         <Link to={action.href} className="group grid grid-cols-[20px_minmax(0,1fr)_auto] gap-2 py-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/20">
             <Icon className={`mt-0.5 size-4 ${action.tone === "danger" ? "text-foreground/80" : action.tone === "attention" ? "text-foreground/60" : "text-foreground/35"}`} />
-            <span className="min-w-0"><span className="block text-xs font-medium">{action.title}</span><span className="mt-1 line-clamp-2 block text-[11px] leading-4 text-foreground/45">{action.description}</span></span>
-            <span className="self-center text-[11px] font-medium text-foreground/45 transition-colors group-hover:text-foreground">{action.actionLabel}</span>
+            <span className="min-w-0"><span className="block text-xs font-medium">{action.title}</span><span className="mt-1 line-clamp-2 block text-[var(--fs-label)] leading-4 text-foreground/45">{action.description}</span></span>
+            <span className="self-center text-[var(--fs-label)] font-medium text-foreground/45 transition-colors group-hover:text-foreground">{action.actionLabel}</span>
         </Link>
     );
 }
@@ -312,9 +312,9 @@ function RecentProjectRow({ summary, divided }: { summary: ProjectSummary; divid
     const completion = projectSummaryCompletion(summary);
     return (
         <Link to={`/projects/${summary.project.id}/overview`} className={`group grid min-h-[68px] grid-cols-[minmax(0,1fr)_80px_20px] items-center gap-3 px-3 py-2.5 hover:bg-foreground/[.025] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-foreground/20 sm:grid-cols-[minmax(0,1fr)_100px_120px_20px] ${divided ? "border-t border-border/65" : ""}`}>
-            <span className="min-w-0"><span className="block truncate text-sm font-medium">{summary.project.name}</span><span className="mt-1 block truncate text-[11px] text-foreground/42">{summary.unitCount} 章 · {summary.canvasCount} 张项目画布 · {summary.assetCount} 项资产</span></span>
-            <span className="hidden text-[11px] text-foreground/45 sm:block">更新于<br />{formatRelativeTime(summary.project.updatedAt)}</span>
-            <span className="min-w-0"><span className="flex items-center justify-between text-[10px] text-foreground/42"><span>章节</span><span>{completion}%</span></span><span className="mt-1.5 block h-1 overflow-hidden rounded-full bg-foreground/[.08]"><span className="block h-full rounded-full bg-foreground/65" style={{ width: `${completion}%` }} /></span></span>
+            <span className="min-w-0"><span className="block truncate text-sm font-medium">{summary.project.name}</span><span className="mt-1 block truncate text-[var(--fs-label)] text-foreground/42">{summary.unitCount} 章 · {summary.canvasCount} 张项目画布 · {summary.assetCount} 项资产</span></span>
+            <span className="hidden text-[var(--fs-label)] text-foreground/45 sm:block">更新于<br />{formatRelativeTime(summary.project.updatedAt)}</span>
+            <span className="min-w-0"><span className="flex items-center justify-between text-[var(--fs-tiny)] text-foreground/42"><span>章节</span><span>{completion}%</span></span><span className="mt-1.5 block h-1 overflow-hidden rounded-full bg-foreground/[.08]"><span className="block h-full rounded-full bg-foreground/65" style={{ width: `${completion}%` }} /></span></span>
             <ArrowRight className="size-4 text-foreground/25 transition-transform group-hover:translate-x-0.5 group-hover:text-foreground/60" />
         </Link>
     );