weifuwu 0.86.0 → 0.87.0

package/dist/{components → client/components}/style.css

@@ -160,9 +160,13 @@
   /* 浮层面板底色（surface-2/3：浮层/模态——亮色同 bg 靠阴影区分，暗色抬升一级见 _dark.css） */
   --wf-color-bg-elevated: var(--wf-color-bg);
 
-  /* ── 字体 ── */
-  --wf-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --wf-font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
+  /* ── 字体 ──
+   * 西文优先（拉丁字形平台最优），CJK 显式回退（中文原生：PingFang/苹方、
+   * Hiragino/冬青、雅黑、思源 Noto Sans SC——三平台中文渲染一致） */
+  --wf-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
+  --wf-font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono',
+    'PingFang SC', 'Microsoft YaHei', monospace;
 
   --wf-font-size-xs: 12px;
   --wf-font-size-sm: 13px;
@@ -196,9 +200,11 @@
      变暗不可见，primary 是亮蓝——明暗主题聚焦均可见） ── */
   --wf-focus-ring: 0 0 0 2px var(--wf-color-primary-bg), 0 0 0 1px var(--wf-color-primary);
 
-  /* ── 动效 ── */
-  --wf-transition-duration: 150ms;
-  --wf-transition-timing: ease;
+  /* ── 动效 ──
+   * --wf-transition 为派生别名（hover 类过渡统一走 dur-fast + ease-out——微流明标准节奏）。
+   * 旧 --wf-transition-duration/timing 保留为兼容（不建议新引用——新代码直接用 --wf-dur-* 系列） */
+  --wf-transition-duration: var(--wf-dur-fast);
+  --wf-transition-timing: var(--wf-ease-out);
   --wf-transition: var(--wf-transition-duration) var(--wf-transition-timing);
 
   /* ── 动效语言：时长阶梯 + 缓动曲线 + 位移量（组件动效统一引用，不各自硬编码） ── */
@@ -217,6 +223,12 @@
   --wf-motion-md: 8px;
   --wf-motion-lg: 24px;                                /* drawer 全幅位移 */
 
+  /* 循环动效族（旋转/呼吸/闪烁/进度——时长阶梯之外的循环节拍——S5 审计强制引用） */
+  --wf-dur-spin: 0.6s;                 /* 旋转（spinner/loading/折叠） */
+  --wf-dur-pulse: 1.2s;                /* 呼吸脉冲（在线点/骨架/思考） */
+  --wf-dur-blink: 1.1s;                /* 光标闪烁（流式光标/AI 回复） */
+  --wf-dur-progress: 1.4s;             /* 不确定进度循环（indeterminate） */
+
   /* ── 色彩 — 信息（补充） ── */
   --wf-color-info: var(--wf-sky-500);
   --wf-color-info-bg: var(--wf-sky-50);
@@ -274,6 +286,7 @@
   --wf-letter-spacing: normal;
   --wf-letter-spacing-wide: 0.5px;
   --wf-letter-spacing-wider: 1px;
+  --wf-heading-display-tracking: -0.5px; /* 顶级标题 display 档窄字距（PageHeader display——CJK 可覆盖） */
 
   /* ── 数字 ── */
   --wf-nums: 'tabular-nums'; /* 数字等宽（统计/表格数值防抖动） */
@@ -721,6 +734,34 @@ body.wf-dragging {
   user-select: none;
   -webkit-user-select: none;
 }
+
+/* ── 微流明 · 进行态语言：stream-in 内容渐显（AI 回复/流式列表/hero 元素） ──
+ * 微流明设计语言三支柱之二（design/design-language.md）——"进行中"是可见的流
+ * 用法：元素加 wf-stream-in 类（opacity 0→1 + 上移 4px）
+ */
+@keyframes wf-stream-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.wf-stream-in {
+  animation: wf-stream-in var(--wf-dur-base) var(--wf-ease-out) both;
+}
+@media (prefers-reduced-motion: reduce) {
+  .wf-stream-in {
+    animation-duration: 0.01ms;
+  }
+}
+
+/* ── 首页 hero 打字机光标（微流明·进行态——reduced-motion 由下方降级块处理） ── */
+.wf-hero-cursor {
+  animation: wf-hero-blink 1s step-end infinite;
+  color: var(--wf-color-primary);
+}
+
+@keyframes wf-hero-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
 }
 
 @layer layout {
@@ -1004,6 +1045,11 @@ body.wf-dragging {
   background: var(--wf-surface-bg);
 }
 
+/* 平面表面（M4 表面语言——静态卡片/面板组合 wf-border 用：阴影仅抬升语义） */
+.wf-surface--flat {
+  box-shadow: none;
+}
+
 /* ── 背景色工具 — 引用语义 Token，免自定义 CSS ── */
 .wf-bg-secondary { background: var(--wf-color-bg-secondary); }
 .wf-bg-tertiary { background: var(--wf-color-bg-tertiary); }
@@ -1494,6 +1540,14 @@ body.wf-dragging {
   /* 内容高于视口时在主区内滚动（壳固定视口高度后的唯一滚动出口） */
   overflow-y: auto;
   background: var(--wf-color-bg);
+  /* 行宽约束（P5）：默认 none 全宽（聊天/表格等全宽应用零影响）；
+     文档站/长文本场景设 --wf-main-max: 900px——直接子元素限宽居中 */
+  --wf-main-max: none;
+}
+
+.wf-main > * {
+  max-width: var(--wf-main-max);
+  margin-inline: auto;
 }
 
 /* ── 触屏：导航项 44px 命中区 ── */
@@ -1796,6 +1850,10 @@ body.wf-dragging {
   background: var(--wf-color-bg-tertiary);
 }
 
+.wf-accordion-summary:active {
+  background: var(--wf-state-pressed);
+}
+
 .wf-accordion-arrow {
   transition: transform var(--wf-dur-base) var(--wf-ease-out);
   color: var(--wf-color-text-secondary);
@@ -1819,6 +1877,157 @@ body.wf-dragging {
 
 .wf-accordion-summary[disabled] { opacity: 0.5; cursor: not-allowed; }
 
+/* weifuwu/components — ActionSheet 动作面板（移动端底部滑出） */
+
+.wf-actionsheet {
+  position: fixed;
+  inset: 0;
+  z-index: var(--wf-z-popover);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: var(--wf-space-md);
+}
+
+/* 遮罩（禁裸 rgba——audit 强制） */
+.wf-actionsheet-overlay {
+  position: absolute;
+  inset: 0;
+  background: var(--wf-overlay);
+  border: none;
+  cursor: pointer;
+}
+
+/* 面板：底部滑出（enter/exit 成对——audit 强制） */
+.wf-actionsheet-panel {
+  position: relative;
+  background: var(--wf-color-bg-elevated);
+  border-radius: var(--wf-radius-lg);
+  overflow: hidden;
+  box-shadow: var(--wf-shadow-lg);
+}
+
+.wf-actionsheet--enter .wf-actionsheet-panel {
+  animation: wf-actionsheet-slidein var(--wf-dur-base) var(--wf-ease-out);
+}
+
+.wf-actionsheet--exit .wf-actionsheet-panel {
+  animation: wf-actionsheet-slideout var(--wf-dur-base) var(--wf-ease-in);
+}
+
+.wf-actionsheet--enter .wf-actionsheet-overlay {
+  animation: wf-actionsheet-overlay-fadein var(--wf-dur-fast) var(--wf-ease-out);
+}
+
+.wf-actionsheet--exit .wf-actionsheet-overlay {
+  animation: wf-actionsheet-overlay-fadeout var(--wf-dur-fast) var(--wf-ease-in);
+}
+
+@keyframes wf-actionsheet-slidein {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+
+@keyframes wf-actionsheet-slideout {
+  from { transform: translateY(0); }
+  to { transform: translateY(100%); }
+}
+
+@keyframes wf-actionsheet-overlay-fadein {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes wf-actionsheet-overlay-fadeout {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+.wf-actionsheet-title {
+  padding: var(--wf-space-md);
+  text-align: center;
+  font-size: var(--wf-font-size-sm);
+  color: var(--wf-color-text-secondary);
+  border-bottom: 1px solid var(--wf-color-border-light);
+}
+
+/* 项：固定 min/max-height（§5.6——全局 button min-height:36px 防撑高） */
+.wf-actionsheet-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--wf-gap-xs);
+  width: 100%;
+  min-height: 48px;
+  max-height: 48px;
+  padding: 0 var(--wf-space-md);
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid var(--wf-color-border-light);
+  font-size: var(--wf-font-size-base);
+  color: var(--wf-color-text);
+  cursor: pointer;
+  transition: background-color var(--wf-dur-fast) var(--wf-ease-out);
+}
+
+.wf-actionsheet-item:hover:not(:disabled) {
+  background: var(--wf-state-hover);
+}
+
+.wf-actionsheet-item:active:not(:disabled) {
+  background: var(--wf-state-pressed);
+}
+
+.wf-actionsheet-item:focus-visible {
+  outline: none;
+  box-shadow: var(--wf-focus-ring);
+}
+
+.wf-actionsheet-item--danger {
+  color: var(--wf-color-error-text);
+}
+
+.wf-actionsheet-item--disabled {
+  color: var(--wf-color-text-disabled);
+  cursor: not-allowed;
+}
+
+/* 分隔（取消按钮上方的结构分隔——细边框美学） */
+.wf-actionsheet-divider {
+  height: 8px;
+  background: var(--wf-color-bg-secondary);
+}
+
+.wf-actionsheet-cancel {
+  width: 100%;
+  min-height: 48px;
+  max-height: 48px;
+  background: transparent;
+  border: none;
+  font-size: var(--wf-font-size-base);
+  font-weight: var(--wf-font-weight-semibold);
+  color: var(--wf-color-text-secondary);
+  cursor: pointer;
+  transition: background-color var(--wf-dur-fast) var(--wf-ease-out);
+}
+
+.wf-actionsheet-cancel:hover {
+  background: var(--wf-state-hover);
+}
+
+.wf-actionsheet-cancel:active {
+  background: var(--wf-state-pressed);
+}
+
+.wf-actionsheet-cancel:focus-visible {
+  outline: none;
+  box-shadow: var(--wf-focus-ring);
+}
+
+.wf-actionsheet-icon {
+  color: inherit;
+}
+
 /* weifuwu/components — Affix */
 
 .wf-affix {
@@ -2013,7 +2222,7 @@ body.wf-dragging {
 
 .wf-alertgroup-time {
   color: var(--wf-color-text-tertiary);
-  font-size: 12px;
+  font-size: var(--wf-font-size-xs); /* 12px 同值 token 化——compact 预设可缩放 */
 }
 
 .wf-alertgroup-close {
@@ -2077,6 +2286,87 @@ body.wf-dragging {
   box-shadow: var(--wf-focus-ring);
 }
 
+/* weifuwu/components — AppShell（应用壳——品牌区/用户区细节——栅格复用 layout app-shell）
+ * M1：旧 token 体系迁移（--wf-text-tertiary/--wf-bg-hover → 语义 token）+
+ * CJK 感知（heading case/tracking 引用 token）+ 循环动效 token。
+ */
+.wf-app-shell-brand-text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.wf-app-shell-brand-name {
+  font-size: var(--wf-font-size-base);
+  font-weight: var(--wf-font-weight-semibold);
+  line-height: var(--wf-line-height-tight);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.wf-app-shell-brand-sub {
+  font-size: var(--wf-font-size-xs);
+  letter-spacing: var(--wf-heading-tracking); /* CJK 默认 0，英文可覆盖 */
+  text-transform: var(--wf-heading-case); /* CJK 默认 none，英文可覆盖 uppercase */
+  color: var(--wf-color-text-tertiary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.wf-app-shell-user {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--wf-gap-sm);
+  padding: var(--wf-space-sm);
+}
+.wf-app-shell-user-info {
+  display: flex;
+  align-items: center;
+  gap: var(--wf-gap-sm);
+  min-width: 0;
+  flex: 1;
+}
+.wf-app-shell-user-meta {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.wf-app-shell-user-name {
+  font-size: var(--wf-font-size-sm);
+  font-weight: var(--wf-font-weight-semibold);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.wf-app-shell-user-mail {
+  font-size: var(--wf-font-size-xs);
+  color: var(--wf-color-text-tertiary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.wf-app-shell-user-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--wf-gap-xs);
+  flex-shrink: 0;
+}
+.wf-app-shell-skel {
+  height: var(--wf-space-md);
+  border-radius: var(--wf-radius-sm);
+  background: var(--wf-color-fill);
+  animation: wf-app-shell-pulse var(--wf-dur-pulse) var(--wf-ease-in-out) infinite;
+}
+.wf-app-shell-skel--sm {
+  width: 60%;
+  height: var(--wf-space-sm);
+  margin-top: var(--wf-gap-xs);
+}
+@keyframes wf-app-shell-pulse {
+  0%, 100% { opacity: 0.5 }
+  50% { opacity: 1 }
+}
+
 /* weifuwu/components — ApprovalCard */
 
 .wf-approval {
@@ -2410,6 +2700,11 @@ body.wf-dragging {
 .wf-breadcrumb-link:hover {
   text-decoration: underline;
 }
+.wf-breadcrumb-link:focus-visible {
+  outline: none;
+  border-radius: var(--wf-radius-xs);
+  box-shadow: var(--wf-focus-ring);
+}
 
 .wf-breadcrumb-current {
   color: var(--wf-color-text);
@@ -2476,7 +2771,7 @@ body.wf-dragging {
   border: 2px solid currentColor;
   border-top-color: transparent;
   border-radius: 50%;
-  animation: wf-btn-spin 0.6s linear infinite;
+  animation: wf-btn-spin var(--wf-dur-spin) linear infinite;
   flex-shrink: 0;
 }
 
@@ -2642,8 +2937,10 @@ body.wf-dragging {
   font-family: var(--wf-font-sans);
 }
 
+/* 默认卡片：1px 细边框是设计主角（微流明·边界即结构——阴影仅抬升语义，
+ * 提升由 .wf-elevate / hover 承担）。旧阴影观感可用 --wf-card-shadow 覆盖 / 自加 box-shadow */
 .wf-card--default {
-  box-shadow: var(--wf-card-shadow,  var(--wf-surface-shadow));
+  border: var(--wf-border-width) solid var(--wf-color-border);
 }
 
 .wf-card--outlined {
@@ -2658,10 +2955,13 @@ body.wf-dragging {
   cursor: pointer;
 }
 
-/* hover 抬升已提炼为 .wf-elevate（_surface.css），此处仅保留语义类 */
-.wf-card--hover {
+.wf-card--clickable:focus-visible {
+  outline: none;
+  box-shadow: var(--wf-focus-ring);
 }
 
+/* hover 抬升由 .wf-elevate（_surface.css）承担：wf-card--hover 仅语义标记类（配合 Card hover prop） */
+
 /* 选中态 — 选择卡片（类型选择/模板选择） */
 .wf-card--active {
   border: var(--wf-border-width) solid var(--wf-color-primary);
@@ -3094,7 +3394,7 @@ body.wf-dragging {
 }
 
 .wf-chat-input:hover:not(:disabled) {
-  border-color: var(--wf-color-primary-muted, var(--wf-color-primary));
+  border-color: var(--wf-color-primary);
 }
 
 /* 多行 textarea：自适应高度（行数由内容撑开） */
@@ -3422,6 +3722,18 @@ body.wf-dragging {
 .wf-hl-jsx-tag { color: var(--wf-color-error-text); }
 .wf-hl-operator { color: var(--wf-color-text-tertiary); }
 
+.wf-codeeditor {
+  width: 100%;
+}
+.wf-codeeditor-area {
+  width: 100%;
+  color: var(--wf-color-text);
+}
+.wf-codeeditor-gutter {
+  border-right: 1px solid var(--wf-color-border);
+  background: var(--wf-color-bg-secondary);
+}
+
 /* weifuwu/components — Collapse */
 
 .wf-collapse {
@@ -3495,7 +3807,7 @@ body.wf-dragging {
   align-items: center;
   gap: var(--wf-gap-xs);
   color: var(--wf-color-text-tertiary);
-  animation: wf-collapse-spin 1s linear infinite;
+  animation: wf-collapse-spin var(--wf-dur-spin) linear infinite;
 }
 
 @keyframes wf-collapse-spin {
@@ -4226,7 +4538,7 @@ body.wf-dragging {
   overflow: hidden;
   background: var(--wf-color-bg);
   font-family: var(--wf-font-mono);
-  font-size: 13px;
+  font-size: var(--wf-font-size-sm); /* 13px 同值 token 化——compact 预设可缩放 */
   line-height: 1.6;
   min-width: 0;
 }
@@ -4239,7 +4551,7 @@ body.wf-dragging {
   padding: 8px 12px;
   background: var(--wf-color-fill);
   border-bottom: 1px solid var(--wf-color-border);
-  font-size: 12px;
+  font-size: var(--wf-font-size-xs); /* 12px 同值 token 化——compact 预设可缩放 */
   flex-shrink: 0;
 }
 .wf-diffview-title--old {
@@ -4299,7 +4611,7 @@ body.wf-dragging {
   border: 1px dashed var(--wf-color-border);
   border-radius: var(--wf-radius-sm);
   color: var(--wf-color-text-secondary);
-  font-size: 12px;
+  font-size: var(--wf-font-size-xs); /* 12px 同值 token 化——compact 预设可缩放 */
   cursor: pointer;
   background: var(--wf-color-bg-subtle);
   user-select: none;
@@ -4312,7 +4624,7 @@ body.wf-dragging {
 .wf-diffview-overflow {
   padding: 8px 12px;
   color: var(--wf-color-text-tertiary);
-  font-size: 12px;
+  font-size: var(--wf-font-size-xs); /* 12px 同值 token 化——compact 预设可缩放 */
   text-align: center;
 }
 
@@ -4527,8 +4839,9 @@ body.wf-dragging {
   box-shadow: var(--wf-shadow-md);
   z-index: var(--wf-z-dropdown);
   padding: var(--wf-space-xs) 0;
-
-  transform: translateX(-50%);
+  /* **真实 bug**：JS 坐标定位（fixed top/left——usePopup 计算）——transform
+     残留（旧 CSS 居中方案）把面板推移（-50% 宽度）——视口外不可见（下拉
+     出现在左上角——agent-browser 实测：rect -70,0）——删除 */
 }
 
 .wf-dropdown--open {
@@ -4634,7 +4947,7 @@ body.wf-dragging {
   font-size: var(--wf-font-size-sm);
   font-weight: var(--wf-font-weight-semibold);
   cursor: pointer;
-  transition: background 0.15s;
+  transition: background var(--wf-dur-fast) var(--wf-ease-out);
 }
 
 .wf-editor-tb-btn:hover {
@@ -4651,7 +4964,7 @@ body.wf-dragging {
 }
 
 .wf-editor-tb-btn--link {
-  font-size: 14px;
+  font-size: var(--wf-font-size-base); /* 14px 同值 token 化——compact 预设可缩放 */
 }
 
 .wf-editor-tb-sep {
@@ -4905,7 +5218,7 @@ body.wf-dragging {
   border-radius: var(--wf-radius-xs);
   cursor: pointer;
   background: var(--wf-color-bg);
-  transition: background 0.1s, border-color 0.1s;
+  transition: background var(--wf-dur-fast) var(--wf-ease-out), border-color var(--wf-dur-fast) var(--wf-ease-out);
 }
 
 .wf-editor-table-grid-cell:hover,
@@ -5118,6 +5431,8 @@ body.wf-dragging {
   margin-top: var(--wf-gap-sm);
 }
 
+/* ExportCSV 复用 wf-btn 样式（按钮视觉由框架提供）——无独立样式 */
+
 /* weifuwu/components — Field */
 
 .wf-field {
@@ -5236,16 +5551,16 @@ body.wf-dragging {
 }
 
 .wf-filepreview-md pre {
-  background: var(--wf-color-bg-muted, var(--wf-color-border));
+  background: var(--wf-color-bg-secondary);
   padding: var(--wf-space-sm) var(--wf-space-md);
   border-radius: var(--wf-radius-sm);
   overflow-x: auto;
 }
 
 .wf-filepreview-md code {
-  background: var(--wf-color-bg-muted, var(--wf-color-border));
+  background: var(--wf-color-bg-secondary);
   padding: 1px 4px;
-  border-radius: 3px;
+  border-radius: var(--wf-radius-sm);
 }
 
 .wf-filepreview-md pre code {
@@ -5313,39 +5628,195 @@ body.wf-dragging {
   color: var(--wf-color-text-secondary);
 }
 
-/* weifuwu/components — FileUpload */
-
-.wf-upload {
+/* weifuwu/components — FileTree（文件树浏览器：面包屑 + 列表/编辑态）
+ * 语义 token 化（design/style-professional-plan.md M1——旧 token 体系迁移）：
+ * 全部颜色/间距/字号/圆角/动效引用 layout --wf-*，暗色自动适配。
+ */
+.wf-filetree {
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius-md);
+  overflow: hidden;
+  font-size: var(--wf-font-size-base);
+  background: var(--wf-color-bg);
+}
+.wf-filetree-toolbar {
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
   gap: var(--wf-gap-sm);
+  padding: var(--wf-space-sm) var(--wf-space);
+  border-bottom: var(--wf-border-width) solid var(--wf-color-border);
+  background: var(--wf-color-bg-secondary);
 }
-
-.wf-upload-zone {
+.wf-filetree-path {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
   gap: var(--wf-gap-xs);
-  padding: var(--wf-space-lg);
-  border: 2px dashed var(--wf-color-border);
-  border-radius: var(--wf-radius);
-  background: var(--wf-color-bg-secondary);
-  cursor: pointer;
-  transition: border-color var(--wf-transition), box-shadow var(--wf-transition), background-color var(--wf-transition), color var(--wf-transition);
-  min-height: 120px;
-}
-
-.wf-upload-zone:hover {
-  border-color: var(--wf-color-primary);
-  background: var(--wf-color-bg);
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
 }
-
-.wf-upload-zone--disabled {
-  opacity: var(--wf-opacity-disabled);
-  cursor: not-allowed;
+.wf-filetree-crumb-wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--wf-gap-xs);
 }
-
+.wf-filetree-crumb {
+  border: none;
+  background: none;
+  padding: var(--wf-space-xs) var(--wf-gap-xs);
+  font-size: var(--wf-font-size-sm);
+  color: var(--wf-color-text-secondary);
+  cursor: pointer;
+  border-radius: var(--wf-radius-sm);
+  transition: background-color var(--wf-dur-fast) var(--wf-ease-out), color var(--wf-dur-fast) var(--wf-ease-out);
+}
+.wf-filetree-crumb:hover {
+  background: var(--wf-state-hover);
+  color: var(--wf-color-text);
+}
+.wf-filetree-crumb:focus-visible {
+  outline: none;
+  box-shadow: var(--wf-focus-ring);
+}
+.wf-filetree-sep {
+  color: var(--wf-color-text-tertiary);
+  font-size: var(--wf-font-size-sm);
+}
+.wf-filetree-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--wf-gap-xs);
+  flex-shrink: 0;
+}
+.wf-filetree-list {
+  max-height: 320px;
+  overflow: auto;
+  padding: var(--wf-space-xs);
+}
+.wf-filetree-item {
+  display: flex;
+  align-items: center;
+  gap: var(--wf-gap-sm);
+  width: 100%;
+  border: none;
+  background: none;
+  padding: var(--wf-space-sm);
+  border-radius: var(--wf-radius);
+  cursor: pointer;
+  text-align: left;
+  font-size: var(--wf-font-size-base);
+  color: var(--wf-color-text);
+  transition: background-color var(--wf-dur-fast) var(--wf-ease-out);
+}
+.wf-filetree-item:hover {
+  background: var(--wf-state-hover);
+}
+.wf-filetree-item:focus-visible {
+  outline: none;
+  box-shadow: var(--wf-focus-ring);
+}
+.wf-filetree-dir {
+  color: var(--wf-color-primary-text);
+}
+.wf-filetree-file {
+  color: var(--wf-color-text-tertiary);
+}
+.wf-filetree-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.wf-filetree-meta {
+  font-size: var(--wf-font-size-sm);
+  color: var(--wf-color-text-tertiary);
+  flex-shrink: 0;
+}
+.wf-filetree-empty {
+  padding: var(--wf-space-xl) var(--wf-space);
+  text-align: center;
+  font-size: var(--wf-font-size-base);
+}
+.wf-filetree-editor {
+  padding: var(--wf-space);
+}
+.wf-filetree-editor-head {
+  display: flex;
+  align-items: center;
+  gap: var(--wf-gap-sm);
+  margin-bottom: var(--wf-gap-sm);
+}
+.wf-filetree-filename {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--wf-font-size-base);
+  font-weight: var(--wf-font-weight-medium);
+}
+.wf-filetree-editor-area {
+  width: 100%;
+  box-sizing: border-box;
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius);
+  padding: var(--wf-space-sm);
+  font-family: var(--wf-font-mono);
+  font-size: var(--wf-font-size-sm);
+  line-height: 1.6;
+  resize: vertical;
+  background: var(--wf-color-bg);
+  color: var(--wf-color-text);
+}
+.wf-filetree-preview {
+  margin: 0;
+  padding: var(--wf-space-sm);
+  max-height: 280px;
+  overflow: auto;
+  font-family: var(--wf-font-mono);
+  font-size: var(--wf-font-size-sm);
+  line-height: 1.6;
+  background: var(--wf-color-bg-secondary);
+  border-radius: var(--wf-radius);
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+/* weifuwu/components — FileUpload */
+
+.wf-upload {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wf-gap-sm);
+}
+
+.wf-upload-zone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--wf-gap-xs);
+  padding: var(--wf-space-lg);
+  border: 2px dashed var(--wf-color-border);
+  border-radius: var(--wf-radius);
+  background: var(--wf-color-bg-secondary);
+  cursor: pointer;
+  transition: border-color var(--wf-transition), box-shadow var(--wf-transition), background-color var(--wf-transition), color var(--wf-transition);
+  min-height: 120px;
+}
+
+.wf-upload-zone:hover {
+  border-color: var(--wf-color-primary);
+  background: var(--wf-color-bg);
+}
+
+.wf-upload-zone--disabled {
+  opacity: var(--wf-opacity-disabled);
+  cursor: not-allowed;
+}
+
 .wf-upload-zone--err {
   border-color: var(--wf-color-error);
 }
@@ -5670,21 +6141,19 @@ body.wf-dragging {
   pointer-events: none;
 }
 
-/* placement 修正（与 Tooltip/Popover 一致）：top 整体上移 + 居中，bottom 居中，left/right 垂直居中 */
+/* placement 定位全权归 JS（usePopup computePos——fixed left/top 已含中心对齐/偏移）——
+ * 旧 transform 残留（top/bottom/left/right 修正）与 JS 坐标叠加双倍偏移——
+ * 同 Tooltip/Popover/Popconfirm 修复——已删 */
 .wf-hover-card--top {
-  transform: translateX(-50%) translateY(-100%);
 }
 
 .wf-hover-card--bottom {
-  transform: translateX(-50%);
 }
 
 .wf-hover-card--left {
-  transform: translateY(-50%) translateX(-100%);
 }
 
 .wf-hover-card--right {
-  transform: translateY(-50%);
 }
 
 /* weifuwu/components — Icon（内联 SVG 基础样式） */
@@ -5695,6 +6164,10 @@ body.wf-dragging {
   vertical-align: -0.125em; /* 与文字基线对齐 */
 }
 
+.wf-imagecropper {
+  display: inline-block;
+}
+
 /* weifuwu/components — Img */
 
 .wf-image {
@@ -6256,10 +6729,10 @@ body.wf-dragging {
   justify-content: space-between;
   padding: var(--wf-space-sm) 12px;
   font-weight: 600;
-  font-size: 13px;
+  font-size: var(--wf-font-size-sm); /* 13px 同值 token 化——compact 预设可缩放 */
 }
 .wf-kanban-col-count {
-  font-size: 12px;
+  font-size: var(--wf-font-size-xs); /* 12px 同值 token 化——compact 预设可缩放 */
   color: var(--wf-color-text-tertiary);
   background: var(--wf-color-fill);
   border-radius: 50%;
@@ -6299,13 +6772,13 @@ body.wf-dragging {
 }
 
 .wf-kanban-card-title {
-  font-size: 13px;
+  font-size: var(--wf-font-size-sm); /* 13px 同值 token 化——compact 预设可缩放 */
   line-height: 1.5;
   min-width: 0;
 }
 
 .wf-kanban-tag {
-  font-size: 11px;
+  font-size: var(--wf-font-size-xs); /* 与 Tag 组件基准一致（10px 白名单复核——11px 偏小） */
   color: var(--wf-color-primary-text);
   background: var(--wf-color-primary-bg);
   border-radius: var(--wf-radius-xs);
@@ -6386,7 +6859,7 @@ body.wf-dragging {
   background: transparent;
   color: var(--wf-color-text-secondary);
   cursor: pointer;
-  font-size: 12px;
+  font-size: var(--wf-font-size-xs); /* 12px 同值 token 化——compact 预设可缩放 */
   transition: background var(--wf-dur-fast) var(--wf-ease-standard);
 }
 
@@ -6550,7 +7023,7 @@ body.wf-dragging {
   border: 3px solid var(--wf-color-border);
   border-top-color: var(--wf-color-primary);
   border-radius: 50%;
-  animation: wf-spin 0.6s linear infinite;
+  animation: wf-spin var(--wf-dur-spin) linear infinite;
 }
 
 @keyframes wf-spin {
@@ -6768,6 +7241,26 @@ body.wf-dragging {
   background: var(--wf-color-bg-secondary);
 }
 
+.wf-md-editor {
+  width: 100%;
+}
+.wf-md-editor-textarea {
+  width: 100%;
+}
+
+.wf-math-frac {
+  display: inline-flex;
+  flex-direction: column;
+  vertical-align: middle;
+  text-align: center;
+  margin: 0 2px;
+}
+.wf-math-num { border-bottom: 1px solid currentColor; padding: 0 4px; }
+.wf-math-den { padding: 0 4px; }
+.wf-math-sqrt-radical { margin-right: 1px; }
+.wf-math-sup { font-size: 0.75em; vertical-align: super; }
+.wf-math-sub { font-size: 0.75em; vertical-align: sub; }
+
 /* weifuwu/components — Mentions */
 
 .wf-mentions {
@@ -6859,7 +7352,7 @@ body.wf-dragging {
   font-size: var(--wf-font-size-xs);
   font-weight: var(--wf-font-weight-semibold);
   color: var(--wf-color-text-tertiary);
-  letter-spacing: 0.02em;
+  letter-spacing: var(--wf-heading-tracking); /* CJK 默认 0，英文可覆盖 */
 }
 
 .wf-menu-item {
@@ -6880,6 +7373,10 @@ body.wf-dragging {
   color: var(--wf-color-text);
 }
 
+.wf-menu-item:active {
+  background: var(--wf-state-pressed);
+}
+
 .wf-menu-item--active {
   background: var(--wf-color-primary-bg);
   color: var(--wf-color-primary-text);
@@ -7141,7 +7638,7 @@ body.wf-dragging {
   border-right: 3px solid var(--wf-color-primary);
   border-right-color: var(--wf-color-primary);
   /* 1s 光标式平缓闪烁（≤1Hz，远低于 3Hz 光敏阈值）；reduced-motion 下基线降为 0.01ms */
-  animation: wf-bubble-blink 1.1s var(--wf-ease-in-out) infinite;
+  animation: wf-bubble-blink var(--wf-dur-blink) var(--wf-ease-in-out) infinite;
 }
 
 @keyframes wf-bubble-blink {
@@ -7220,7 +7717,7 @@ body.wf-dragging {
 
 .wf-modal-content {
   background: var(--wf-color-bg-elevated);
-  border-radius: var(--wf-modal-radius,  var(--wf-radius-md));
+  border-radius: var(--wf-modal-radius,  var(--wf-radius-lg)); /* 浮层圆角矩阵：Modal 12（抬升语义） */
   box-shadow: var(--wf-modal-shadow,  var(--wf-shadow-lg));
   min-width: var(--wf-modal-width,  400px);
   max-width: 90vw;
@@ -7527,10 +8024,10 @@ body.wf-dragging {
   line-height: var(--wf-line-height-tight);
 }
 
-/* display 档：顶级页面标题，配窄字距 */
+/* display 档：顶级页面标题，配窄字距（token 可覆盖——CJK 长标题可归零） */
 .wf-page-title--display {
   font-size: var(--wf-font-size-display);
-  letter-spacing: -0.5px;
+  letter-spacing: var(--wf-heading-display-tracking);
 }
 
 .wf-page-sub {
@@ -7581,6 +8078,15 @@ body.wf-dragging {
   color: var(--wf-color-primary-text);
 }
 
+.wf-page-btn:active:not(:disabled):not(.wf-page-btn--active) {
+  background: var(--wf-state-pressed);
+}
+
+.wf-page-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--wf-focus-ring);
+}
+
 .wf-page-btn--active {
   background: var(--wf-color-primary);
   border-color: var(--wf-color-primary);
@@ -7710,7 +8216,7 @@ body.wf-dragging {
   background: var(--wf-color-bg);
   border: 1px solid var(--wf-color-border);
   border-radius: var(--wf-radius-md);
-  font-size: 13px;
+  font-size: var(--wf-font-size-sm); /* 13px 同值 token 化——compact 预设可缩放 */
   font-weight: 500;
   pointer-events: auto;
   white-space: nowrap;
@@ -7744,7 +8250,7 @@ body.wf-dragging {
   position: absolute;
   bottom: -24px;
   left: 0;
-  font-size: 12px;
+  font-size: var(--wf-font-size-xs); /* 12px 同值 token 化——compact 预设可缩放 */
   color: var(--wf-color-warning-text);
 }
 
@@ -7769,10 +8275,10 @@ body.wf-dragging {
   font-size: var(--wf-font-size-sm);
 }
 
-.wf-popconfirm--bottom { transform: translateX(-50%); }
-.wf-popconfirm--top { transform: translateX(-50%) translateY(-100%); }
-.wf-popconfirm--left { transform: translateY(-50%) translateX(-100%); }
-.wf-popconfirm--right { transform: translateY(-50%); }
+.wf-popconfirm--bottom { /* transform 残留已删（同 Tooltip 修复） */ }
+.wf-popconfirm--top { /* 同上 */ }
+.wf-popconfirm--left { /* 同上 */ }
+.wf-popconfirm--right { /* 同上 */ }
 
 .wf-popconfirm--enter {
   animation: wf-popconfirm-in var(--wf-dur-md) var(--wf-ease-standard);
@@ -7843,19 +8349,19 @@ body.wf-dragging {
 }
 
 .wf-popover--bottom {
-  transform: translateX(-50%);
+  /* transform 残留已删（旧 absolute 定位——JS 坐标叠加双倍偏移——同 Tooltip 修复） */
 }
 
 .wf-popover--top {
-  transform: translateX(-50%) translateY(-100%);
+  /* 定位全权归 JS（同 Tooltip 修复——旧 transform 与 fixed 坐标叠加双倍偏移） */
 }
 
 .wf-popover--left {
-  transform: translateY(-50%) translateX(-100%);
+  /* 同上 */
 }
 
 .wf-popover--right {
-  transform: translateY(-50%);
+  /* 同上 */
 }
 
 .wf-popover-arrow {
@@ -7942,13 +8448,109 @@ body.wf-dragging {
 /* indeterminate：不确定态（动画扫动） */
 .wf-progress--indeterminate .wf-progress-fill {
   width: 40%;
-  animation: wf-progress-indeterminate 1.4s var(--wf-ease-in-out) infinite;
+  animation: wf-progress-indeterminate var(--wf-dur-progress) var(--wf-ease-in-out) infinite;
 }
 @keyframes wf-progress-indeterminate {
   0% { transform: translateX(-100%); }
   100% { transform: translateX(350%); }
 }
 
+/* weifuwu/components — PromptTemplate 提示词模板编辑器 */
+
+.wf-prompt-template {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wf-gap-sm);
+}
+
+.wf-prompt-label {
+  font-size: var(--wf-font-size-sm);
+  font-weight: var(--wf-font-weight-medium);
+  color: var(--wf-color-text);
+}
+
+/* 变量 chips 行 */
+.wf-prompt-chips {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--wf-gap-xs);
+}
+
+.wf-prompt-chips-hint {
+  font-size: var(--wf-font-size-xs);
+  color: var(--wf-color-text-tertiary);
+}
+
+.wf-prompt-chip {
+  padding: 2px var(--wf-space-sm);
+  border: 1px solid var(--wf-color-border);
+  border-radius: var(--wf-radius-sm);
+  background: var(--wf-color-bg-secondary);
+  font-family: var(--wf-font-mono);
+  font-size: var(--wf-font-size-xs);
+  color: var(--wf-color-primary-text);
+  cursor: pointer;
+  transition: border-color var(--wf-dur-fast) var(--wf-ease-out),
+              background-color var(--wf-dur-fast) var(--wf-ease-out);
+}
+
+.wf-prompt-chip:hover:not(:disabled) {
+  border-color: var(--wf-color-primary);
+  background: var(--wf-color-primary-bg);
+}
+
+.wf-prompt-chip:focus-visible {
+  outline: none;
+  box-shadow: var(--wf-focus-ring);
+}
+
+.wf-prompt-chip:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* 模板编辑区 */
+.wf-prompt-editor {
+  width: 100%;
+  min-height: 120px;
+  padding: var(--wf-space-md);
+  border: 1px solid var(--wf-color-border);
+  border-radius: var(--wf-radius-md);
+  background: var(--wf-color-bg-elevated);
+  color: var(--wf-color-text);
+  font-family: var(--wf-font-mono);
+  font-size: var(--wf-font-size-sm);
+  line-height: 1.6;
+  resize: vertical;
+}
+
+.wf-prompt-editor:focus-visible {
+  outline: none;
+  box-shadow: var(--wf-focus-ring);
+}
+
+/* 预览区（填充结果） */
+.wf-prompt-preview {
+  border: 1px dashed var(--wf-color-border);
+  border-radius: var(--wf-radius-md);
+  padding: var(--wf-space-md);
+  background: var(--wf-color-bg-secondary);
+}
+
+.wf-prompt-preview-title {
+  font-size: var(--wf-font-size-xs);
+  color: var(--wf-color-text-tertiary);
+  margin-bottom: var(--wf-space-xs);
+}
+
+.wf-prompt-preview-body {
+  font-size: var(--wf-font-size-sm);
+  color: var(--wf-color-text);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
 /* weifuwu/components — RadioGroup */
 
 .wf-radio-group {
@@ -8051,6 +8653,9 @@ body.wf-dragging {
 .wf-rate-star:hover {
   transform: scale(1.15);
 }
+.wf-rate-star:active {
+  transform: scale(0.95);
+}
 
 .wf-rate-star:focus-visible {
   outline: none;
@@ -8171,6 +8776,74 @@ body.wf-dragging {
   word-break: break-word;
 }
 
+/* weifuwu/components — RelationGraph（关系图谱：SVG 画布 + 图例）
+ * 语义 token 化（M1——旧 token 体系迁移：--wf-border/--wf-text* → --wf-color-*）。
+ */
+.wf-rg {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wf-gap-sm);
+}
+.wf-rg-canvas {
+  display: block;
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius-md);
+  background:
+    radial-gradient(circle at 1px 1px, var(--wf-color-border) 1px, transparent 0) 0 0 / 24px 24px;
+  overflow: hidden;
+}
+.wf-rg-edge {
+  transition: opacity var(--wf-dur-fast) var(--wf-ease-out);
+}
+.wf-rg-node {
+  cursor: pointer;
+}
+.wf-rg-node circle {
+  transition: stroke-width var(--wf-dur-fast) var(--wf-ease-out);
+}
+.wf-rg-node:hover circle {
+  stroke-width: 3;
+}
+.wf-rg-node--selected circle {
+  stroke-width: 3.5;
+  stroke-dasharray: 4 3;
+}
+.wf-rg-label {
+  font-size: var(--wf-font-size-base);
+  font-weight: var(--wf-font-weight-semibold);
+  fill: var(--wf-color-text);
+  pointer-events: none;
+}
+.wf-rg-sublabel {
+  font-size: var(--wf-font-size-xs);
+  fill: var(--wf-color-text-tertiary);
+  pointer-events: none;
+}
+.wf-rg-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--wf-gap-xs) var(--wf-gap-md);
+  font-size: var(--wf-font-size-sm);
+  color: var(--wf-color-text-secondary);
+}
+.wf-rg-legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--wf-gap-xs);
+}
+.wf-rg-swatch {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+.wf-rg-line {
+  display: inline-block;
+  width: 16px;
+  height: 3px;
+  border-radius: var(--wf-radius-xs);
+}
+
 /* weifuwu/components — Resizable */
 
 .wf-resizable {
@@ -8340,7 +9013,7 @@ body.wf-dragging {
   background: none;
   border: none;
   cursor: pointer;
-  font-size: 12px;
+  font-size: var(--wf-font-size-xs); /* 12px 同值 token 化——compact 预设可缩放 */
   color: var(--wf-color-text-tertiary);
   padding: 2px;
   line-height: 1;
@@ -8350,6 +9023,14 @@ body.wf-dragging {
 .wf-search-clear:hover {
   color: var(--wf-color-text);
 }
+.wf-search-clear:active {
+  opacity: 0.6;
+}
+.wf-search-clear:focus-visible {
+  outline: none;
+  box-shadow: var(--wf-focus-ring);
+  border-radius: var(--wf-radius-sm);
+}
 
 /* 受控 + 自定义清除按钮时隐藏原生 ×（type=search WebKit 双清除 UI——
    自定义 wf-search-clear 是设计清除入口，原生 × 样式不统一且重复） */
@@ -8471,6 +9152,11 @@ body.wf-dragging {
   box-shadow: var(--wf-focus-ring);
 }
 
+/* hover 反馈（对齐 Input——可感知可交互；disabled 不反馈） */
+.wf-select:hover:not(:disabled) {
+  border-color: var(--wf-color-border-dark);
+}
+
 .wf-select:disabled {
   opacity: var(--wf-opacity-disabled);
   cursor: not-allowed;
@@ -8494,6 +9180,9 @@ body.wf-dragging {
   cursor: pointer;
   transition: border-color var(--wf-transition), box-shadow var(--wf-transition), background-color var(--wf-transition), color var(--wf-transition);
 }
+.wf-select-search-trigger:hover {
+  border-color: var(--wf-color-border-dark);
+}
 .wf-select-search-trigger:focus-within {
   border-color: var(--wf-color-primary);
 }
@@ -8695,6 +9384,7 @@ body.wf-dragging {
 }
 
 .wf-session-item:hover { background: var(--wf-color-bg-tertiary); }
+.wf-session-item:active { background: var(--wf-state-pressed); }
 
 .wf-session-item--focus { background: var(--wf-color-bg-tertiary); }
 
@@ -9236,11 +9926,29 @@ body.wf-dragging {
 .wf-slider-track {
   flex: 1;
   min-width: 0;
+  /* **垂直基准变量（真实 bug——thumb/fill/mark 三线不齐）**：thumb 基于
+     input 盒（margin 8 + 高 6）——fill/mark 曾基于 track 中线（inset:0/
+     margin:auto）——但 track 是 flex item 被 value 文本拉伸（align-items
+     stretch——行高 23px）→ 基准错位（常态 0.5px——字体加载后行高变
+     22/24 → 差 1.5px——全量并发偶发失败）——统一三者基准 = input 盒 */
+  --wf-slider-track-margin: 8px;
+  --wf-slider-track-h: 6px;
+  /* **absolute 定位基准（真实 bug——fill/marks 错位）**：fill/marks 都是
+     absolute——track 无 position → 基准落到外层容器（wf-slider/页面）——
+     fill 中心偏离轨道中线（价格区间 fill 在 thumb 下方 15px）——thumb/
+     fill/mark 三线不齐——加 relative 使 fill/marks 相对轨道定位 */
+  position: relative;
 }
 
 .wf-slider-input {
   width: 100%;
   height: 6px;
+  /* **baseline 对齐消除（真实 bug——thumb/fill/mark 1px 偏差）**：input 是
+     inline-block（默认）——行框内 baseline 对齐使 input 视觉下移（字体
+     descent ~1px）——margin 8px 不是真实视觉顶——thumb 中心比 marks/fill
+     低 1px（全量并发偶发失败根因）——vertical-align: top 使 input 顶对齐
+     行框顶（margin 精确生效——三线同基准） */
+  vertical-align: top;
   appearance: none;
   /* 清零 UA 默认 padding/border（Chrome range 默认 padding 9px + border 1px）——
      否则 content 区被压缩，thumb 活动范围 ≠ 盒宽，marks/渐变偏移公式错位 */
@@ -9250,7 +9958,7 @@ body.wf-dragging {
   border-radius: var(--wf-radius-xs);
   outline: none;
   cursor: pointer;
-  margin: 8px 0; /* thumb 18px 超出轨道——留出 hover/拖拽空间 */
+  margin: var(--wf-slider-track-margin) 0; /* thumb 18px 超出轨道——留出 hover/拖拽空间 */
 }
 
 /* hover / 拖拽中（active）：thumb 放大 + 加深（跨浏览器一致） */
@@ -9336,15 +10044,29 @@ body.wf-dragging {
 
 /* ── 刻度标记（marks） ── */
 .wf-slider-marks {
-  position: relative;
-  height: 18px;
-  margin-top: 2px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  /* 基准 = input 盒（与 thumb 一致——不受 track 拉伸影响） */
+  top: var(--wf-slider-track-margin);
+  bottom: auto;
+  height: var(--wf-slider-track-h);
   pointer-events: none;
 }
 
+/* 区间模式：input absolute 撑满容器（36px）——marks 基准 = 容器中线
+   （与 thumb/fill 一致——普通模式的 input 盒基准不适用） */
+.wf-slider-range .wf-slider-marks {
+  top: 0;
+  bottom: 0;
+  height: auto;
+}
+
 .wf-slider-mark {
   position: absolute;
-  top: 0;
+  /* dot 中心 = 轨道中线（dot 半高 4px——thumb/填充/刻度同一条直线——
+     用户要求；label 在 dot 下方（溢出可见——刻度标签） */
+  top: calc(50% - 4px);
   transform: translateX(-50%);
   display: flex;
   flex-direction: column;
@@ -9373,6 +10095,76 @@ body.wf-dragging {
 .wf-slider-input:disabled::-webkit-slider-thumb,
 .wf-slider-input:disabled::-moz-range-thumb { cursor: not-allowed; }
 
+/* ── range 模式：双滑块（lo/hi input 叠加——轨道透明，填充分离绘制） ── */
+.wf-slider-range {
+  position: relative;
+  /* thumb 18px 超出轨道——容器高度容纳（原 margin:8px 0 语义移至容器） */
+  min-height: 36px;
+  display: flex;
+  align-items: center;
+}
+
+.wf-slider-range .wf-slider-input {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  background: transparent;
+  /* **撑满轨道（真实 bug——thumb 与 fill 错位 15px）**：全局 .wf-slider-input
+     height: 6px 与 inset: 0 冲突（absolute 时 top+height 决定尺寸——bottom 被
+     忽略）→ input 6px 高在轨道顶部——thumb 中心 = 轨道顶 + 3——而 fill 中心 =
+     轨道中线——thumb/fill 不同线——height auto 使 inset 0 生效（撑满轨道——
+     thumb 中心 = 轨道中线 = fill 中心） */
+  height: auto;
+  pointer-events: none; /* 轨道不响应——点击/拖拽只走 thumb（双 thumb 互不抢事件） */
+  /* 层级 = DOM 顺序（hi 后渲染天然在上——重叠时点最上层 = 上限）——audit 禁 z-index 数字 */
+}
+
+/* thumb 可交互（pointer-events 只在 thumb 上——轨道命中不抢） */
+.wf-slider-range .wf-slider-input::-webkit-slider-thumb { pointer-events: auto; }
+.wf-slider-range .wf-slider-input::-moz-range-thumb { pointer-events: auto; }
+
+/* range 模式轨道填充（双 thumb 之间） */
+.wf-slider-range-fill {
+  position: absolute;
+  /* 基准 = 容器中线（区间模式 input 撑满容器——thumb 中心 = 容器中线——
+     与 marks 同基准——不受容器高度变化影响） */
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  height: var(--wf-slider-track-h);
+  background: var(--wf-color-primary);
+  border-radius: var(--wf-radius-xs);
+  pointer-events: none;
+}
+
+.wf-sortable {
+  list-style: none;
+}
+
+.wf-sortable-item {
+  cursor: grab;
+  user-select: none;
+  transition: transform var(--wf-dur-fast) var(--wf-ease-out), box-shadow var(--wf-dur-fast) var(--wf-ease-out);
+  border-radius: var(--wf-radius-sm);
+}
+
+.wf-sortable-item:active {
+  cursor: grabbing;
+}
+
+.wf-sortable-item.wf-sortable-dragging {
+  opacity: 0.6;
+}
+
+.wf-sortable-item.wf-sortable-over {
+  transform: translateY(2px);
+  box-shadow: 0 0 0 2px var(--wf-color-primary-bg), 0 0 0 1px var(--wf-color-primary);
+}
+
+.wf-sortable-item:hover {
+  background: var(--wf-color-bg-hover);
+}
+
 /* weifuwu/components — Space 间距容器 */
 
 .wf-space {
@@ -9404,7 +10196,7 @@ body.wf-dragging {
   padding: var(--wf-space-md);
   border-radius: var(--wf-radius-md);
   background: var(--wf-surface-bg);
-  box-shadow: var(--wf-surface-shadow);
+  border: var(--wf-border-width) solid var(--wf-color-border-light); /* 边界即结构：细边框——阴影仅抬升（hover） */
   font-family: var(--wf-font-sans);
 }
 
@@ -9451,6 +10243,10 @@ body.wf-dragging {
   transform: translateY(-2px);
   box-shadow: var(--wf-shadow-md);
 }
+.wf-stat--clickable:focus-visible {
+  outline: none;
+  box-shadow: var(--wf-shadow-md), var(--wf-focus-ring);
+}
 
 /* weifuwu/components — Steps */
 
@@ -9486,7 +10282,7 @@ body.wf-dragging {
 .wf-step--done .wf-step-num {
   background: var(--wf-color-primary);
   color: var(--wf-color-on-brand);
-  font-size: 14px;
+  font-size: var(--wf-font-size-base); /* 14px 同值 token 化——compact 预设可缩放 */
 }
 
 .wf-step--current .wf-step-num {
@@ -9589,6 +10385,105 @@ body.wf-dragging {
   color: var(--wf-color-text);
 }
 
+/* weifuwu/components — TabBar 底部标签栏 */
+
+.wf-tab-bar {
+  display: flex;
+  align-items: stretch;
+  background: var(--wf-color-bg-elevated);
+  border-top: 1px solid var(--wf-color-border);
+  /* 小按钮固定尺寸纪律（§5.6）：防全局 button min-height:36px 撑高 tab */
+  min-height: 56px;
+}
+
+/* 底部固定：safe-area 避让手势条 + 浮层层级 */
+.wf-tab-bar--fixed {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: var(--wf-z-popover);
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+}
+
+.wf-tab-bar-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 8px 4px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--wf-color-text-tertiary);
+  transition: color var(--wf-dur-fast) var(--wf-ease-out),
+              background-color var(--wf-dur-fast) var(--wf-ease-out);
+  position: relative;
+}
+
+.wf-tab-bar-item:hover:not(:disabled) {
+  color: var(--wf-color-text-secondary);
+  background: var(--wf-state-hover);
+}
+
+.wf-tab-bar-item:active:not(:disabled) {
+  background: var(--wf-state-pressed);
+}
+
+.wf-tab-bar-item--active {
+  color: var(--wf-color-primary-text);
+  font-weight: var(--wf-font-weight-semibold);
+}
+
+.wf-tab-bar-item--active::before {
+  /* 激活指示条（细边框美学——层级用边界表达） */
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 25%;
+  right: 25%;
+  height: 2px;
+  border-radius: 0 0 2px 2px;
+  background: var(--wf-color-primary);
+}
+
+.wf-tab-bar-item:focus-visible {
+  outline: none;
+  box-shadow: var(--wf-focus-ring);
+}
+
+.wf-tab-bar-icon-wrap {
+  position: relative;
+  display: inline-flex;
+  line-height: 1;
+}
+
+/* 角标（右上角小圆点——badge 数字） */
+.wf-tab-bar-badge {
+  position: absolute;
+  top: -4px;
+  right: -8px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: var(--wf-radius-xl);
+  background: var(--wf-color-error);
+  color: var(--wf-color-on-brand);
+  font-size: 10px;
+  line-height: 16px;
+  text-align: center;
+  font-weight: var(--wf-font-weight-semibold);
+  pointer-events: none;
+}
+
+.wf-tab-bar-label {
+  font-size: var(--wf-font-size-xs);
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
 /* weifuwu/components — Table */
 
 .wf-table-wrap {
@@ -9612,8 +10507,8 @@ body.wf-dragging {
   font-weight: var(--wf-font-weight-medium);
   font-size: var(--wf-font-size-xs);
   color: var(--wf-color-text-tertiary);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
+  text-transform: var(--wf-heading-case); /* CJK 默认 none，英文可覆盖 uppercase */
+  letter-spacing: var(--wf-heading-tracking);
   padding: var(--wf-space) var(--wf-space-sm);
   background: var(--wf-color-bg-secondary);
   white-space: nowrap;
@@ -9750,6 +10645,8 @@ body.wf-dragging {
 }
 
 .wf-tab {
+  display: inline-flex;
+  align-items: center;
   padding: var(--wf-space) var(--wf-space-md);
   border: none;
   background: none;
@@ -9767,7 +10664,14 @@ body.wf-dragging {
 .wf-tab:hover {
   color: var(--wf-color-text);
 }
-
+.wf-tab:active {
+  background: var(--wf-state-pressed);
+}
+.wf-tab:focus-visible {
+  outline: none;
+  box-shadow: var(--wf-focus-ring);
+  border-radius: var(--wf-radius-xs);
+}
 .wf-tab--active {
   color: var(--wf-color-primary-text);
 }
@@ -9790,6 +10694,50 @@ body.wf-dragging {
   display: none;
 }
 
+/* ── 可关闭 tab（closable） ── */
+.wf-tab-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-left: 6px;
+  border-radius: var(--wf-radius-sm);
+  color: var(--wf-color-text-tertiary);
+  cursor: pointer;
+  transition: background-color var(--wf-dur-fast) var(--wf-ease-out),
+              color var(--wf-dur-fast) var(--wf-ease-out);
+}
+
+.wf-tab-close:hover {
+  background: var(--wf-state-hover);
+  color: var(--wf-color-error-text);
+}
+
+/* ── 新增 + 按钮（addable） ── */
+.wf-tab-add {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin: auto 4px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  border-radius: var(--wf-radius-sm);
+  color: var(--wf-color-text-tertiary);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color var(--wf-dur-fast) var(--wf-ease-out),
+              color var(--wf-dur-fast) var(--wf-ease-out);
+}
+
+.wf-tab-add:hover {
+  background: var(--wf-state-hover);
+  color: var(--wf-color-primary-text);
+}
+
 /* weifuwu/components — Tag */
 
 .wf-tag {
@@ -9830,6 +10778,12 @@ body.wf-dragging {
   color: inherit;
 }
 .wf-tag-close:hover { opacity: 1; }
+.wf-tag-close:active { opacity: 0.5; }
+.wf-tag-close:focus-visible {
+  outline: none;
+  box-shadow: var(--wf-focus-ring);
+  border-radius: var(--wf-radius-sm);
+}
 
 /* weifuwu/components — TagsInput */
 
@@ -10432,19 +11386,20 @@ body.wf-dragging {
 }
 
 .wf-tooltip--bottom {
-  transform: translateX(-50%);
+  /* 定位全权归 JS（usePopup computePos——fixed left/top 已含中心对齐/偏移）——
+   * CSS transform 残留（旧 absolute 定位）与 JS 坐标叠加双倍偏移——已删 */
 }
 
 .wf-tooltip--top {
-  transform: translateX(-50%) translateY(-100%);
+  /* 同上（旧 translateX(-50%) translateY(-100%) 与 JS 定位叠加——偏左上） */
 }
 
 .wf-tooltip--left {
-  transform: translateY(-50%) translateX(-100%);
+  /* 同上 */
 }
 
 .wf-tooltip--right {
-  transform: translateY(-50%);
+  /* 同上 */
 }
 
 .wf-tooltip-arrow {
@@ -10561,16 +11516,16 @@ body.wf-dragging {
 }
 .wf-tour-title {
   font-weight: 600;
-  font-size: 14px;
+  font-size: var(--wf-font-size-base); /* 14px 同值 token 化——compact 预设可缩放 */
 }
 .wf-tour-step {
-  font-size: 12px;
+  font-size: var(--wf-font-size-xs); /* 12px 同值 token 化——compact 预设可缩放 */
   color: var(--wf-color-text-tertiary);
   flex-shrink: 0;
 }
 
 .wf-tour-content {
-  font-size: 13px;
+  font-size: var(--wf-font-size-sm); /* 13px 同值 token 化——compact 预设可缩放 */
   color: var(--wf-color-text-secondary);
   line-height: 1.6;
 }
@@ -10589,7 +11544,7 @@ body.wf-dragging {
   border: 1px solid var(--wf-color-border);
   background: var(--wf-color-bg);
   color: var(--wf-color-text);
-  font-size: 13px;
+  font-size: var(--wf-font-size-sm); /* 13px 同值 token 化——compact 预设可缩放 */
   cursor: pointer;
   display: inline-flex;
   align-items: center;
@@ -10949,10 +11904,10 @@ body.wf-dragging {
 
 .wf-treeselect-placeholder {
   color: var(--wf-color-text-tertiary);
-  font-size: 13px;
+  font-size: var(--wf-font-size-sm); /* 13px 同值 token 化——compact 预设可缩放 */
 }
 .wf-treeselect-label {
-  font-size: 13px;
+  font-size: var(--wf-font-size-sm); /* 13px 同值 token 化——compact 预设可缩放 */
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -11058,6 +12013,10 @@ body.wf-dragging {
   max-width: 100%; /* block 父级下约束在容器内截断 */
 }
 
+.wf-videoplayer {
+  width: 100%;
+}
+
 /* weifuwu/components — VirtualList */
 
 .wf-virtual-list {
@@ -11265,4 +12224,28 @@ body.wf-dragging {
   background-size: auto;
 }
 
+.wf-wave {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  border-radius: inherit; /* 跟随子元素圆角（Button 波纹圆角一致） */
+  -webkit-tap-highlight-color: transparent;
+}
+
+.wf-wave-ripple {
+  position: absolute;
+  border-radius: 50%;
+  pointer-events: none;
+  background: color-mix(in srgb, currentColor 12%, transparent);
+  transform: scale(0);
+  animation: wf-wave-pop var(--wf-dur-base) var(--wf-ease-out) forwards;
+}
+
+@keyframes wf-wave-pop {
+  to {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+
 }