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/components/canvas/canvas-node-prompt-panel.tsx

@@ -148,7 +148,7 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
                     <span className="grid size-3.5 shrink-0 place-items-center" style={{ color: monochromeAccent }}>
                         <GenerationModeIcon mode={mode} />
                     </span>
-                    <span className="truncate text-[10px] font-medium">{modeDisplayName(mode)}创作</span>
+                    <span className="truncate text-[var(--fs-tiny)] font-medium">{modeDisplayName(mode)}创作</span>
                 </div>
             )}
             {!simpleMode ? (
@@ -182,12 +182,12 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
 
     const renderComposerControls = (expanded: boolean) => simpleMode ? (
         <div className="flex min-w-0 items-center justify-between gap-2 p-1" style={{ background: controlsSurface }}>
-            <span className="min-w-0 truncate px-2 text-[10px]" style={{ color: theme.node.muted }}>
+            <span className="min-w-0 truncate px-2 text-[var(--fs-tiny)]" style={{ color: theme.node.muted }}>
                 {activeReferenceCount ? `已连接 ${activeReferenceCount} 个素材` : "将使用默认模型与参数"}
             </span>
             <Button
                 type="text"
-                className="!inline-flex !h-8 shrink-0 !items-center !gap-1 !rounded-full !px-2.5 !text-[10px] !font-medium"
+                className="!inline-flex !h-8 shrink-0 !items-center !gap-1 !rounded-full !px-2.5 !text-[var(--fs-tiny)] !font-medium"
                 danger={isRunning}
                 disabled={isSubmitDisabled}
                 style={{ background: isSubmitDisabled ? theme.toolbar.itemHover : isRunning ? theme.accent.danger : monochromeAccent, color: isSubmitDisabled ? theme.node.faint : isRunning ? "#ffffff" : theme.canvas.background, boxShadow: isSubmitDisabled ? "none" : `0 8px 20px ${theme.spatial.shadow}, inset 0 1px 0 rgba(255,255,255,.18)` }}
@@ -201,22 +201,22 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
     ) : (
         <div className="flex min-w-0 items-center justify-between gap-0.5 p-1" style={{ background: controlsSurface }}>
             <div className={`${expanded ? "max-w-[320px]" : mode === "image" || mode === "video" ? "max-w-[240px]" : "max-w-[174px]"} min-w-[104px] flex-1`}>
-                <ModelPicker className="!h-7 !w-full !min-w-0 !text-[10px] !font-normal [&_img]:!size-3 [&_.lucide]:!size-3" fullWidth config={config} value={config.model} onChange={(model) => onConfigChange(node.id, { model })} capability={mode} onMissingConfig={() => navigateToSettings({ continueCreation: true })} showSelectedPrice={false} />
+                <ModelPicker className="!h-7 !w-full !min-w-0 !text-[var(--fs-tiny)] !font-normal [&_img]:!size-3 [&_.lucide]:!size-3" fullWidth config={config} value={config.model} onChange={(model) => onConfigChange(node.id, { model })} capability={mode} onMissingConfig={() => navigateToSettings({ continueCreation: true })} showSelectedPrice={false} />
             </div>
             <div className="ml-auto flex min-w-0 shrink-0 items-center gap-1">
                 {mode === "image" ? (
                     <CanvasImageSettingsPopover
                         config={config}
                         placement={expanded ? "topRight" : "topLeft"}
-                        buttonClassName="!h-7 !w-[146px] !justify-start !rounded-full !border-0 !px-2.5 !text-[10px] !font-normal !shadow-none [&>span]:min-w-0 [&_.lucide]:!size-3"
+                        buttonClassName="!h-7 !w-[146px] !justify-start !rounded-full !border-0 !px-2.5 !text-[var(--fs-tiny)] !font-normal !shadow-none [&>span]:min-w-0 [&_.lucide]:!size-3"
                         onConfigChange={(key, value) => onConfigChange(node.id, key === "count" ? { count: Number(value) || 1 } : { [key]: value })}
                         onMissingConfig={() => navigateToSettings({ continueCreation: true })}
                         onOpenChange={expanded ? undefined : onImageSettingsOpenChange}
                     />
                 ) : mode === "video" ? (
-                    <CanvasVideoSettingsPopover config={config} buttonClassName="!h-7 !w-[144px] !justify-start !rounded-full !border-0 !px-2.5 !text-[10px] !font-normal !shadow-none [&>span]:min-w-0 [&_.lucide]:!size-3" onConfigChange={(key, value) => onConfigChange(node.id, videoConfigPatch(key, value))} />
+                    <CanvasVideoSettingsPopover config={config} buttonClassName="!h-7 !w-[144px] !justify-start !rounded-full !border-0 !px-2.5 !text-[var(--fs-tiny)] !font-normal !shadow-none [&>span]:min-w-0 [&_.lucide]:!size-3" onConfigChange={(key, value) => onConfigChange(node.id, videoConfigPatch(key, value))} />
                 ) : mode === "audio" ? (
-                    <CanvasAudioSettingsPopover config={config} buttonClassName="!h-7 !w-[146px] !justify-start !rounded-full !border-0 !px-2.5 !text-[10px] !font-normal !shadow-none [&>span]:min-w-0 [&_.lucide]:!size-3" onConfigChange={(key, value) => onConfigChange(node.id, audioConfigPatch(key, value))} />
+                    <CanvasAudioSettingsPopover config={config} buttonClassName="!h-7 !w-[146px] !justify-start !rounded-full !border-0 !px-2.5 !text-[var(--fs-tiny)] !font-normal !shadow-none [&>span]:min-w-0 [&_.lucide]:!size-3" onConfigChange={(key, value) => onConfigChange(node.id, audioConfigPatch(key, value))} />
                 ) : null}
                 <GenerationCostBadge credits={credits} theme={theme} />
                 <Button
@@ -254,7 +254,7 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
                     references={mentionReferences}
                     onChange={updatePrompt}
                     containerClassName="min-h-0 flex-1"
-                    className="thin-scrollbar h-full w-full resize-none overflow-y-auto border-none bg-transparent px-2.5 py-2 text-[13px] leading-5 !outline-none !ring-0 !shadow-none focus:!outline-none focus:!ring-0 focus:!shadow-none placeholder:text-current placeholder:opacity-35"
+                    className="thin-scrollbar h-full w-full resize-none overflow-y-auto border-none bg-transparent px-2.5 py-2 text-[var(--fs-body)] leading-5 !outline-none !ring-0 !shadow-none focus:!outline-none focus:!ring-0 focus:!shadow-none placeholder:text-current placeholder:opacity-35"
                     style={{ color: theme.node.text, outline: "none", boxShadow: "none" }}
                     placeholder={promptPlaceholder(mode, hasImageContent, hasTextContent)}
                     onContentSizeChange={updatePromptContentHeight}
@@ -292,7 +292,7 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
                             references={mentionReferences}
                             onChange={updatePrompt}
                             containerClassName="min-h-0 flex-1"
-                            className="thin-scrollbar h-full w-full resize-none overflow-y-auto border-none bg-transparent px-3 py-2.5 text-[15px] leading-6 !outline-none !ring-0 !shadow-none focus:!outline-none focus:!ring-0 focus:!shadow-none placeholder:text-current placeholder:opacity-35"
+                            className="thin-scrollbar h-full w-full resize-none overflow-y-auto border-none bg-transparent px-3 py-2.5 text-[var(--fs-body-lg)] leading-6 !outline-none !ring-0 !shadow-none focus:!outline-none focus:!ring-0 focus:!shadow-none placeholder:text-current placeholder:opacity-35"
                             style={{ color: theme.node.text, outline: "none", boxShadow: "none" }}
                             placeholder={promptPlaceholder(mode, hasImageContent, hasTextContent)}
                             aria-label={`${modeDisplayName(mode)}提示词`}
@@ -313,7 +313,7 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
 function ComposerPill({ theme, borderColor, icon, label }: { theme: CanvasTheme; borderColor: string; icon: ReactNode; label: string }) {
     return (
         <span
-            className="inline-flex h-6 shrink-0 items-center gap-1 rounded-md border px-1.5 text-[9px] font-medium transition hover:brightness-125"
+            className="inline-flex h-6 shrink-0 items-center gap-1 rounded-md border px-1.5 text-[var(--fs-micro)] font-medium transition hover:brightness-125"
             style={{ background: theme.canvas.background, borderColor, color: theme.node.activeStroke }}
         >
             {icon}
@@ -355,7 +355,7 @@ function ConnectedReferenceShelf({ references, theme, onInsert }: { references:
                     <span className="block size-full overflow-hidden rounded-md">
                         <ReferenceThumbnail reference={reference} />
                     </span>
-                    <span className="absolute left-0.5 top-0.5 grid size-3.5 place-items-center rounded-full bg-black/65 text-[8px] font-semibold text-white backdrop-blur-sm">{index + 1}</span>
+                    <span className="absolute left-0.5 top-0.5 grid size-3.5 place-items-center rounded-full bg-black/65 text-[var(--fs-micro)] font-semibold text-white backdrop-blur-sm">{index + 1}</span>
                     <span className="absolute bottom-0.5 right-0.5 grid size-3.5 place-items-center rounded-full bg-black/65 text-white backdrop-blur-sm"><AtSign className="size-2" /></span>
                 </button>
             ))}
@@ -379,8 +379,8 @@ function ReferenceThumbnail({ reference }: { reference: CanvasResourceReference
 function GenerationCostBadge({ credits, theme }: { credits: number | null; theme: CanvasTheme }) {
     if (credits === null) return null;
     return (
-        <span className="canvas-generation-cost-badge inline-flex h-7 shrink-0 items-center gap-1 rounded-full px-2 text-[9px] font-semibold tabular-nums" style={{ background: theme.accent.primarySoft, color: theme.accent.primary }} title={`预计消耗 ${credits.toLocaleString()} 积分`} aria-label={`预计消耗 ${credits.toLocaleString()} 积分`}>
-            <CreditSymbol className="text-[11px]" />
+        <span className="canvas-generation-cost-badge inline-flex h-7 shrink-0 items-center gap-1 rounded-full px-2 text-[var(--fs-micro)] font-semibold tabular-nums" style={{ background: theme.accent.primarySoft, color: theme.accent.primary }} title={`预计消耗 ${credits.toLocaleString()} 积分`} aria-label={`预计消耗 ${credits.toLocaleString()} 积分`}>
+            <CreditSymbol className="text-[var(--fs-label)]" />
             {credits.toLocaleString()}
         </span>
     );