weifuwu 0.55.2 → 0.55.3

package/README.md

@@ -17,7 +17,7 @@ npm install weifuwu
 
 ## 设计理念
 
-**零运行时依赖** — 前端无 npm 运行时依赖（自研 VDOM，不引入 Virtual DOM 库、rxjs、immer 等）。后端仅依赖 `graphql` + `ws`（语言/协议本身）——**数据库客户端（PostgreSQL/Redis 协议）、GraphQL schema 工具全部自研**。esbuild 编译 TSX 的结果即可直接运行。
+**零运行时依赖** — 前端无 npm 运行时依赖（自研 VDOM，不引入 Virtual DOM 库、rxjs、immer 等）。后端仅依赖 `esbuild`（TSX→JS 编译）+ `graphql` + `ws`（语言/协议本身）——**数据库客户端（PostgreSQL/Redis 协议）、GraphQL schema 工具全部自研**。esbuild 作为运行时依赖随 `npm install weifuwu` 自动安装，`ctx.ui.js()` 开箱即用。
 
 **两阶段组件模型** — 组件 = `(initProps, ctx) => (props) => VNode`。外层函数只执行一次（mount），内层函数每次状态/props 变化时执行（render）。无 class、无 `this`、无 Hook。
 
@@ -149,8 +149,8 @@ createApp()
 | 资源 | CDN 地址 | 说明 |
 |------|---------|------|
 | `weifuwu/client` | `https://unpkg.com/weifuwu@latest/dist/client/index.js` | 客户端核心（createApp, h, 路由, 状态管理等） |
-| `weifuwu/components` | `https://unpkg.com/weifuwu@latest/dist/components/index.js` | 41 个 UI 组件（Button, Card, Table, Modal 等） |
-| 组件样式 | `https://unpkg.com/weifuwu@latest/dist/components/style.css` | 组件 CSS + 82 个主题 Token + 35 个布局原语 |
+| `weifuwu/components` | `https://unpkg.com/weifuwu@latest/dist/components/index.js` | 43 个 UI 组件（Button, Card, Table, Modal 等） |
+| 组件样式 | `https://unpkg.com/weifuwu@latest/dist/components/style.css` | 组件 CSS + 91 个主题 Token + 35 个布局原语 |
 | 独立布局系统 | `https://unpkg.com/weifuwu@latest/dist/layout/weifuwu-layout.css` | 仅 CSS 布局，不依赖 JS |
 
 
@@ -169,8 +169,9 @@ createApp()
 | `weifuwu` | **ui** | SSR 渲染 + esbuild JS/CSS 动态编译 → `ctx.ui` | Router |
 | `weifuwu` | **graphql** | GraphQL 端点（支持 GraphiQL） | Router |
 | `weifuwu` | **createMiddleware** | 类型安全中间件工厂 | — |
-| `weifuwu` | **response** | HTTP 响应辅助函数（ok/badRequest/...） | — |
+| `weifuwu` | **ok / badRequest / …** | HTTP 响应辅助函数（ok/badRequest/... 等 12 个） | — |
 | `weifuwu` | **parseBody** | JSON 请求体安全解析 | — |
+| Router 方法 | **app.graphql()** | GraphQL 端点（支持 GraphiQL），Router 实例方法（无需单独 import） | Router |
 | `weifuwu/client` | **createApp** | 应用引导 + VDOM 渲染引擎 | — |
 | `weifuwu/client` | **router / RouteView** | 前端路由（history/hash 模式） | createApp |
 | `weifuwu/client` | **api / auth / ws** | HTTP 客户端 / 认证 / WebSocket 中间件 | createApp |
@@ -178,8 +179,8 @@ createApp()
 | `weifuwu/client` | **ErrorBoundary** | 错误边界组件 | createApp |
 | `weifuwu/client` | **lockScroll/trapFocus** | 滚动锁定 / 焦点陷阱工具 | — |
 | `weifuwu/client` | **popup** | 弹层 fixed 定位工具（`computeFixedPos` / `computeFixedPosRect`） | — |
-| `weifuwu/components` | **42 个组件** | Button/Table/Modal/Confirm/Toast/... + `confirm()` / `toast()` 命令式中间件 | weifuwu/client |
-| `weifuwu/layout` | **CSS 布局** | 35 个布局原语 + 82 个主题 Token（也支持 `weifuwu/layout/style.css`） | — |
+| `weifuwu/components` | **43 个组件** | Button/Table/Modal/Confirm/Toast/... + `confirm()` / `toast()` 命令式中间件 | weifuwu/client |
+| `weifuwu/layout` | **CSS 布局** | 35 个布局原语 + 91 个主题 Token（也支持 `weifuwu/layout/style.css`） | — |
 
 ---
 
@@ -1936,7 +1937,7 @@ import type { RouterOptions } from 'weifuwu/client'
 
 # 组件库 (`weifuwu/components`)
 
-42 个 HTML 原语组件。每个是 `(_init, ctx) => (props) => VNode`（两阶段组件，与前端框架同一模型），引用 `--wf-*` CSS 变量做主题。另含 `confirm()` / `toast()` 命令式中间件。
+43 个 HTML 原语组件。每个是 `(_init, ctx) => (props) => VNode`（两阶段组件，与前端框架同一模型），引用 `--wf-*` CSS 变量做主题。另含 `confirm()` / `toast()` 命令式中间件。
 
 ```ts
 import { Button, Input, Table, Modal, Toast } from 'weifuwu/components'
@@ -2152,11 +2153,17 @@ props 变化 ──────────────────────
 |-----|--------|-----------|------|
 | Divider | `Divider` | `orientation`, `plain` | 分割线（水平/垂直/带文字） |
 
+### 全局工具
+
+| 组件 | 导入名 | 关键 Props | 说明 |
+|-----|--------|-----------|------|
+| ThemeSwitch | `ThemeSwitch` | `mode: 'auto'\|'light'\|'dark'`, `onChange`, `storageKey` | 主题切换（auto/light/dark，localStorage 持久化）；另有 `applyTheme()` / `getTheme()` 命令式工具 |
+
 ---
 
 # 布局系统 (`weifuwu/layout`)
 
-纯 CSS 布局原语 + 82 个主题 Token。不绑定任何 JS 框架。
+纯 CSS 布局原语 + 91 个主题 Token。不绑定任何 JS 框架。
 
 > **全栈 weifuwu 项目**：`weifuwu/components/style.css` 已包含布局系统，一条 import 就够了，无需单独引用本页。
 > 本页仅适用于**非 weifuwu 项目**或**只需 CSS 布局**的场景。
@@ -2216,7 +2223,7 @@ app.get('/layout.css', (req, ctx) => ctx.ui.css('weifuwu/layout'))
 | | `wf-inline-block` | display: inline-block |
 | | `wf-contents` | display: contents |
 
-## 82 个主题 Token
+## 91 个主题 Token
 
 ```css
 /* 品牌色 */
@@ -2275,9 +2282,15 @@ app.get('/layout.css', (req, ctx) => ctx.ui.css('weifuwu/layout'))
 
 ### 暗色模式
 
+两种激活方式（显式 `data-theme` 优先级更高）：
+
 ```ts
-document.documentElement.setAttribute('data-theme', 'dark')
-// 所有 var(--wf-*) 自动切换
+// 1. 手动切换
+// document.documentElement.setAttribute('data-theme', 'dark')
+// document.documentElement.setAttribute('data-theme', 'light') // 强制亮色
+
+// 2. 自动：系统暗色偏好（无需任何代码）
+// 系统为暗色时自动生效；加 data-theme="light" 可强制亮色
 ```
 
 ---
@@ -2299,11 +2312,19 @@ document.documentElement.setAttribute('data-theme', 'dark')
 
 ## 暗色模式
 
+两种激活方式（显式 `data-theme` 优先级高于系统偏好）：
+
 ```ts
+// 手动切换
 document.documentElement.setAttribute('data-theme', 'dark')
+
+// 强制亮色（系统为暗色时也保持亮色）
+document.documentElement.setAttribute('data-theme', 'light')
 ```
 
-所有 `--wf-*` 变量在 `[data-theme="dark"]` 下自动切换。可自定义暗色变量：
+未设置 `data-theme` 时，自动跟随系统偏好：`@media (prefers-color-scheme: dark)` 下自动切换暗色。
+
+所有 `--wf-*` 变量在暗色下自动切换。可自定义暗色变量：
 
 ```css
 [data-theme="dark"] {
@@ -2311,6 +2332,15 @@ document.documentElement.setAttribute('data-theme', 'dark')
   --wf-color-text: #e0e0e0;
   --wf-color-border: #2a2a4a;
 }
+
+/* 自定义系统自动暗色的变量（需与上面同步） */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --wf-color-bg: #1a1a2e;
+    --wf-color-text: #e0e0e0;
+    --wf-color-border: #2a2a4a;
+  }
+}
 ```
 
 ## 组件级覆盖

package/dist/client/index.d.ts

@@ -36,7 +36,7 @@ export { i18n } from './i18n.ts';
 export type { I18nOptions, I18nState, I18nInjected } from './i18n.ts';
 export { lockScroll, unlockScroll } from './scroll-lock.ts';
 export { trapFocus } from './focus-trap.ts';
-export { computeFixedPos } from './popup.ts';
+export { computeFixedPos, computeFixedPosRect } from './popup.ts';
 export type { FixedPos, Placement } from './popup.ts';
 export { zhCN } from './locale/zh_CN.ts';
 export { enUS } from './locale/en_US.ts';

package/dist/client/index.js

@@ -596,6 +596,15 @@ function cleanupPortalChildren(vnode) {
 function callRefCleanup(input) {
   if (input == null || typeof input !== "object") return;
   const vnode = input;
+  if (vnode._id) {
+    if (vnode._customId) idRegistry.delete(vnode._customId);
+    idRegistry.delete(vnode._id);
+    vnode._id = void 0;
+    vnode._customId = void 0;
+    vnode._render = void 0;
+    vnode._parentNode = void 0;
+    vnode._refNode = void 0;
+  }
   if (vnode._child != null) {
     if (Array.isArray(vnode._child)) {
       for (const child of vnode._child) {
@@ -1010,7 +1019,13 @@ function router(opts) {
         title: last?.title ?? ""
       };
     }
-    return { path, params: {}, query: {}, chain: [], title: "" };
+    return {
+      path,
+      params: {},
+      query: Object.fromEntries(new URLSearchParams(window.location.search)),
+      chain: opts.notFound ? [{ component: opts.notFound, title: "Not Found" }] : [],
+      title: ""
+    };
   }
   return (ctx) => {
     const resolved = resolve(getPath());
@@ -1582,6 +1597,7 @@ export {
   api,
   auth,
   computeFixedPos,
+  computeFixedPosRect,
   createApp,
   createPortal,
   enUS,

package/dist/client/vnode.d.ts

@@ -23,6 +23,8 @@ export interface VNode {
     _render?: (props: any) => VNode | null;
     /** 组件实例 ID（如 '_wf_0'） */
     _id?: string;
+    /** 自定义组件 ID（ctx.ui.selfId() 注册，跨组件精准刷新） */
+    _customId?: string;
     /** 组件输出的 DOM 父节点 */
     _parentNode?: Node;
     /** 组件输出的第一个 DOM 节点 */

package/dist/components/Table/Table.d.ts

@@ -22,5 +22,7 @@ export interface TableProps {
     onSort?: (key: string, order: 'asc' | 'desc') => void;
     /** 数据为空时显示的文本 */
     emptyText?: string;
+    /** 表格最小宽度（窄屏横向滚动，如 '720px'） */
+    minWidth?: string;
 }
 export declare const Table: Component<TableProps>;

package/dist/components/ThemeSwitch/ThemeSwitch.d.ts

@@ -0,0 +1,27 @@
+/**
+ * weifuwu/components — ThemeSwitch 主题切换器
+ *
+ * 三段式切换：auto（跟随系统偏好）/ light（强制亮色）/ dark（强制暗色）。
+ * 对应 layout 的暗色双段激活机制：
+ *   - auto  → 移除 data-theme，由 @media (prefers-color-scheme) 决定
+ *   - light → <html data-theme="light">（系统暗色也强制亮色）
+ *   - dark  → <html data-theme="dark">
+ *
+ * mount 时读取 localStorage 并立即应用（避免闪白）；
+ * 用户选择后持久化。
+ */
+import type { Component } from '../../client/vnode.ts';
+export type ThemeMode = 'auto' | 'light' | 'dark';
+export interface ThemeSwitchProps {
+    /** 初始模式（默认从 localStorage 读取，无记录时为 auto） */
+    mode?: ThemeMode;
+    /** 切换回调 */
+    onChange?: (mode: ThemeMode) => void;
+    /** localStorage 存储 key */
+    storageKey?: string;
+}
+/** 应用主题：auto 移除属性，light/dark 显式设置 */
+export declare function applyTheme(mode: ThemeMode): void;
+/** 读取当前生效主题（localStorage 优先，其次系统偏好） */
+export declare function getTheme(): ThemeMode;
+export declare const ThemeSwitch: Component<ThemeSwitchProps>;

package/dist/components/index.d.ts

@@ -89,3 +89,6 @@ export { Chart } from './Chart/Chart.ts';
 export type { ChartProps, ChartType, DataPoint, ChartOptions } from './Chart/Chart.ts';
 export { Editor } from './Editor/Editor.ts';
 export type { EditorProps, ToolbarItem } from './Editor/Editor.ts';
+export { ThemeSwitch } from './ThemeSwitch/ThemeSwitch.ts';
+export type { ThemeSwitchProps, ThemeMode } from './ThemeSwitch/ThemeSwitch.ts';
+export { applyTheme, getTheme } from './ThemeSwitch/ThemeSwitch.ts';

package/dist/components/index.js

@@ -296,6 +296,7 @@ var Table = (_init, _ctx) => (props) => {
     return h("th", {
       class: `wf-table-th${col.sortable ? " wf-table-th--sortable" : ""}${isSorted ? " wf-table-th--sorted" : ""}`,
       scope: "col",
+      tabindex: col.sortable ? 0 : void 0,
       style: col.width ? { width: col.width } : void 0,
       onClick: col.sortable && onSort ? () => onSort(col.key, isSorted && isAsc ? "desc" : "asc") : void 0
     }, label);
@@ -327,7 +328,11 @@ var Table = (_init, _ctx) => (props) => {
     });
   }
   const tbody = h("tbody", { class: "wf-table-tbody" }, bodyRows);
-  return h("table", { class: "wf-table" }, [thead, tbody]);
+  const table = h("table", {
+    class: "wf-table",
+    style: props.minWidth ? { minWidth: props.minWidth } : void 0
+  }, [thead, tbody]);
+  return h("div", { class: "wf-table-wrap" }, table);
 };
 
 // src/client/scroll-lock.ts
@@ -655,6 +660,15 @@ function cleanupPortalChildren(vnode) {
 function callRefCleanup(input) {
   if (input == null || typeof input !== "object") return;
   const vnode = input;
+  if (vnode._id) {
+    if (vnode._customId) idRegistry.delete(vnode._customId);
+    idRegistry.delete(vnode._id);
+    vnode._id = void 0;
+    vnode._customId = void 0;
+    vnode._render = void 0;
+    vnode._parentNode = void 0;
+    vnode._refNode = void 0;
+  }
   if (vnode._child != null) {
     if (Array.isArray(vnode._child)) {
       for (const child of vnode._child) {
@@ -2970,6 +2984,68 @@ var Editor = (_props, ctx) => {
     ]);
   };
 };
+
+// src/components/ThemeSwitch/ThemeSwitch.ts
+var DEFAULT_KEY = "wf_theme";
+function readStored(key) {
+  try {
+    const v = localStorage.getItem(key);
+    return v === "light" || v === "dark" || v === "auto" ? v : null;
+  } catch {
+    return null;
+  }
+}
+function writeStored(key, mode) {
+  try {
+    localStorage.setItem(key, mode);
+  } catch {
+  }
+}
+function applyTheme(mode) {
+  if (typeof document === "undefined") return;
+  if (mode === "auto") document.documentElement.removeAttribute("data-theme");
+  else document.documentElement.setAttribute("data-theme", mode);
+}
+function getTheme() {
+  const stored = readStored(DEFAULT_KEY);
+  if (stored) return stored;
+  return "auto";
+}
+var ThemeSwitch = (initProps, ctx) => {
+  const storageKey = initProps.storageKey ?? DEFAULT_KEY;
+  let mode = initProps.mode ?? readStored(storageKey) ?? "auto";
+  applyTheme(mode);
+  return (props) => {
+    const SL = ctx?.i18n?.components?.ThemeSwitch ?? {};
+    const modes = [
+      { value: "auto", label: SL.auto ?? "\u81EA\u52A8" },
+      { value: "light", label: SL.light ?? "\u4EAE\u8272" },
+      { value: "dark", label: SL.dark ?? "\u6697\u8272" }
+    ];
+    const segments = modes.map(
+      (m) => h("button", {
+        type: "button",
+        class: `wf-theme-seg${mode === m.value ? " wf-theme-seg--active" : ""}`,
+        role: "radio",
+        "aria-checked": String(mode === m.value),
+        "aria-label": m.label,
+        onClick: () => {
+          if (mode === m.value) return;
+          mode = m.value;
+          applyTheme(mode);
+          writeStored(storageKey, mode);
+          props.onChange?.(mode);
+          ctx.ui.render();
+        }
+      }, m.label)
+    );
+    return h("div", {
+      class: "wf-theme-switch",
+      role: "radiogroup",
+      "aria-label": SL.label ?? "\u4E3B\u9898\u5207\u6362"
+    }, segments);
+  };
+};
 export {
   Accordion,
   Alert,
@@ -3011,8 +3087,11 @@ export {
   Tabs,
   Tag,
   Textarea,
+  ThemeSwitch,
   Toast,
   Tooltip,
+  applyTheme,
   confirm,
+  getTheme,
   toast
 };

package/dist/components/style.css

@@ -35,8 +35,20 @@
   --wf-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
 
   /* ── 层级 ── */
-  --wf-pop-z: 50;
-  --wf-cover-z: 100;
+  /* 浮层全部 createPortal 到 body，全局参与堆叠。
+     顺序：sticky < overlay < modal/drawer < 弹出面板族 < toast < tooltip。
+     modal 与 drawer 互斥出现；面板族同级（dropdown/select/datepicker/popover）用 DOM 顺序裁决。 */
+  --wf-z-sticky: 40;
+  --wf-z-overlay: 80;
+  --wf-z-modal: 100;
+  --wf-z-popover: 120; /* dropdown/select/datepicker 面板与 popover 同层 */
+  --wf-z-toast: 140;
+  --wf-z-tooltip: 160;
+  --wf-z-dropdown: var(--wf-z-popover); /* 语义别名：下拉菜单属弹出面板族 */
+
+  /* ── 兼容别名（旧 token 名，语义近似映射） ── */
+  --wf-pop-z: var(--wf-z-popover);
+  --wf-cover-z: var(--wf-z-modal);
 
   /* ── 色彩 — 品牌 ── */
   --wf-color-primary: #4f6ef7;
@@ -71,15 +83,15 @@
   --wf-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --wf-font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
 
-  --wf-font-size-xs: 11px;
-  --wf-font-size-sm: 12px;
-  --wf-font-size-base: 13px;
-  --wf-font-size-lg: 14px;
-  --wf-font-size-xl: 15px;
-  --wf-font-size-2xl: 20px;
+  --wf-font-size-xs: 12px;
+  --wf-font-size-sm: 13px;
+  --wf-font-size-base: 14px;
+  --wf-font-size-lg: 15px;
+  --wf-font-size-xl: 16px;
+  --wf-font-size-2xl: 21px;
   --wf-font-size-3xl: 24px;
-  --wf-font-size-4xl: 28px;
-  --wf-font-size-5xl: 32px;
+  --wf-font-size-4xl: 30px;
+  --wf-font-size-5xl: 36px;
 
   --wf-font-weight-normal: 400;
   --wf-font-weight-medium: 500;
@@ -110,6 +122,10 @@
   --wf-accent-color: var(--wf-color-primary);
   --wf-caret-color: var(--wf-color-primary);
 
+  /* 控件尺寸：垂直内边距 + 目标高度（移动端在 _base.css 提升到 44px） */
+  --wf-control-pad-y: 10px;
+  --wf-control-height: 36px;
+
   /* ── 断点 ── */
   --wf-bp-sm: 640px;
   --wf-bp-md: 768px;
@@ -126,8 +142,21 @@
   --wf-letter-spacing-wider: 1px;
 }
 
-/* weifuwu/theme — 暗色模式 */
-[data-theme="dark"] {
+/* weifuwu/theme — 暗色模式
+ *
+ * 两种激活方式（优先级：显式 data-theme > 系统偏好）：
+ *   1. 手动：<html data-theme="dark">（或 data-theme="light" 强制亮色）
+ *   2. 自动：系统偏好 prefers-color-scheme: dark，无显式覆盖时生效
+ *
+ * ⚠️ 两段暗色覆盖值必须保持一致（静态 CSS 无法共享选择器列表，改动需同步）。
+ * 每段末尾都设置 color-scheme: dark，让原生控件/滚动条跟随。
+ */
+
+/* ── 激活方式一：手动 data-theme="dark" ── */
+/* color-scheme 用 :root[data-theme] 提升优先级，压过 _base.css 的 :root 定义（导入顺序在后者） */
+:root[data-theme="dark"] {
+  color-scheme: dark;
+
   --wf-color-primary: #6b8aff;
   --wf-color-primary-hover: #8ba3ff;
   --wf-color-primary-bg: #1e293b;
@@ -166,6 +195,50 @@
   --wf-surface-bg: var(--wf-color-bg);
 }
 
+/* ── 激活方式二：系统暗色偏好（data-theme="light" 可强制亮色） ── */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    color-scheme: dark;
+
+    --wf-color-primary: #6b8aff;
+    --wf-color-primary-hover: #8ba3ff;
+    --wf-color-primary-bg: #1e293b;
+
+    --wf-color-success: #4ade80;
+    --wf-color-success-bg: #14532d;
+    --wf-color-warning: #fbbf24;
+    --wf-color-warning-bg: #451a03;
+    --wf-color-error: #f87171;
+    --wf-color-error-bg: #451a1a;
+
+    --wf-color-info: #60a5fa;
+    --wf-color-info-bg: #172554;
+
+    --wf-color-text: #f1f5f9;
+    --wf-color-text-secondary: #94a3b8;
+    --wf-color-text-tertiary: #64748b;
+    --wf-color-text-disabled: #475569;
+
+    --wf-color-bg: #0f172a;
+    --wf-color-bg-secondary: #1e293b;
+    --wf-color-bg-tertiary: #334155;
+
+    --wf-color-border: #334155;
+    --wf-color-border-light: #1e293b;
+    --wf-color-border-dark: #475569;
+
+    --wf-surface-shadow: 0 1px 3px rgba(0,0,0,0.3);
+    --wf-shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
+    --wf-shadow: 0 1px 3px rgba(0,0,0,0.3);
+    --wf-shadow-md: 0 4px 12px rgba(0,0,0,0.4);
+    --wf-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.4);
+
+    --wf-focus-ring: 0 0 0 2px var(--wf-color-primary-bg);
+
+    --wf-surface-bg: var(--wf-color-bg);
+  }
+}
+
 /* weifuwu/theme — 基础元素默认样式 */
 *,
 *::before,
@@ -173,6 +246,11 @@
   box-sizing: border-box;
 }
 
+:root {
+  /* 原生控件/滚动条跟随主题；暗色激活时在 _dark.css 中切为 dark */
+  color-scheme: light;
+}
+
 body {
   margin: 0;
   background: var(--wf-color-bg);
@@ -210,7 +288,7 @@ select {
   color: var(--wf-color-text);
   border: var(--wf-border-width) solid var(--wf-color-border);
   border-radius: var(--wf-radius);
-  padding: var(--wf-space-sm) var(--wf-space);
+  padding: var(--wf-control-pad-y) var(--wf-space);
 }
 
 input:focus,
@@ -235,7 +313,8 @@ button {
   color: var(--wf-color-text);
   border: var(--wf-border-width) solid var(--wf-color-border);
   border-radius: var(--wf-radius);
-  padding: var(--wf-space-sm) var(--wf-space-md);
+  padding: var(--wf-control-pad-y) var(--wf-space-md);
+  min-height: var(--wf-control-height);
   cursor: pointer;
 }
 button:hover {
@@ -243,6 +322,31 @@ button:hover {
   color: var(--wf-color-primary);
 }
 
+/* 键盘焦点：button 与 [tabindex] 统一 focus ring（仅键盘触发，鼠标点击不闪） */
+button:focus-visible,
+[tabindex]:focus-visible {
+  outline: none;
+  box-shadow: var(--wf-focus-ring);
+}
+
+/* 触屏设备（coarse pointer）：交互目标提升到 44px（Apple HIG / WCAG 2.5.8） */
+@media (pointer: coarse) {
+  button,
+  [role="button"],
+  input,
+  textarea,
+  select,
+  .wf-card--clickable,
+  .wf-table-th--sortable,
+  .wf-accordion-summary,
+  .wf-tag-close,
+  .wf-checkbox,
+  .wf-switch,
+  .wf-radio {
+    min-height: 44px;
+  }
+}
+
 h1, h2, h3, h4, h5, h6 {
   font-weight: var(--wf-font-weight-semibold);
   line-height: var(--wf-line-height-tight);
@@ -314,6 +418,18 @@ code {
   border-radius: var(--wf-radius-sm);
 }
 
+/* ── 无障碍：尊重系统减弱动效偏好 ── */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
 /* stack — 纵向堆叠 */
 .wf-stack {
   display: flex;
@@ -558,7 +674,9 @@ code {
   min-height: 0;
 }
 
-/* text-align 对齐原语 */
+/* 排版工具类 — 字号 / 色阶 / 字重 / 截断（零 CSS 用户自排版） */
+
+/* ── text-align ── */
 
 .wf-text-left {
   text-align: left;
@@ -572,6 +690,53 @@ code {
   text-align: right;
 }
 
+/* ── 字号 ── */
+
+.wf-text-xs { font-size: var(--wf-font-size-xs); }
+.wf-text-sm { font-size: var(--wf-font-size-sm); }
+.wf-text-base { font-size: var(--wf-font-size-base); }
+.wf-text-lg { font-size: var(--wf-font-size-lg); }
+.wf-text-xl { font-size: var(--wf-font-size-xl); }
+.wf-text-2xl { font-size: var(--wf-font-size-2xl); }
+.wf-text-3xl { font-size: var(--wf-font-size-3xl); }
+.wf-text-4xl { font-size: var(--wf-font-size-4xl); }
+.wf-text-5xl { font-size: var(--wf-font-size-5xl); }
+
+/* ── 色阶 ── */
+
+.wf-text-secondary { color: var(--wf-color-text-secondary); }
+.wf-text-tertiary { color: var(--wf-color-text-tertiary); }
+.wf-text-disabled { color: var(--wf-color-text-disabled); }
+.wf-text-brand { color: var(--wf-color-primary); }
+
+/* ── 字重 ── */
+
+.wf-text-medium { font-weight: var(--wf-font-weight-medium); }
+.wf-text-semibold { font-weight: var(--wf-font-weight-semibold); }
+.wf-text-bold { font-weight: var(--wf-font-weight-bold); }
+
+/* ── 截断 ── */
+
+.wf-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wf-line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.wf-line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
 /* weifuwu/components — Button */
 /* 所有颜色/间距/字号引用 layout 的 --wf-* 变量，不硬编码 */
 
@@ -583,7 +748,8 @@ code {
   font-family: var(--wf-font-sans);
   font-size: var(--wf-font-size-sm);
   font-weight: var(--wf-font-weight-medium);
-  padding: var(--wf-space-sm) var(--wf-space-md);
+  padding: var(--wf-control-pad-y) var(--wf-space-md);
+  min-height: var(--wf-control-height);
   border-radius: var(--wf-radius);
   border: var(--wf-border-width) solid transparent;
   cursor: pointer;
@@ -606,8 +772,8 @@ code {
 .wf-btn--danger { background: var(--wf-color-error); color: #fff; border-color: var(--wf-color-error); }
 .wf-btn--danger:hover { opacity: 0.9; }
 
-.wf-btn--sm { padding: var(--wf-space-xs) var(--wf-space-sm); font-size: var(--wf-font-size-xs); }
-.wf-btn--lg { padding: var(--wf-space) var(--wf-space-lg); font-size: var(--wf-font-size-base); }
+.wf-btn--sm { padding: var(--wf-space-xs) var(--wf-space-sm); font-size: var(--wf-font-size-xs); min-height: 28px; }
+.wf-btn--lg { padding: var(--wf-space) var(--wf-space-lg); font-size: var(--wf-font-size-base); min-height: 40px; }
 
 .wf-btn--block { display: flex; width: 100%; }
 
@@ -637,7 +803,7 @@ code {
 .wf-input {
   font-family: var(--wf-font-sans);
   font-size: var(--wf-font-size-sm);
-  padding: var(--wf-space-sm) var(--wf-space);
+  padding: var(--wf-control-pad-y) var(--wf-space);
   border: var(--wf-border-width) solid var(--wf-color-border);
   border-radius: var(--wf-radius);
   background: var(--wf-color-bg);
@@ -768,7 +934,7 @@ code {
 .wf-textarea {
   font-family: var(--wf-font-sans);
   font-size: var(--wf-font-size-sm);
-  padding: var(--wf-space-sm) var(--wf-space);
+  padding: var(--wf-control-pad-y) var(--wf-space);
   border: var(--wf-border-width) solid var(--wf-color-border);
   border-radius: var(--wf-radius);
   background: var(--wf-color-bg);
@@ -833,7 +999,7 @@ code {
 .wf-select {
   font-family: var(--wf-font-sans);
   font-size: var(--wf-font-size-sm);
-  padding: var(--wf-space-sm) var(--wf-space);
+  padding: var(--wf-control-pad-y) var(--wf-space);
   border: var(--wf-border-width) solid var(--wf-color-border);
   border-radius: var(--wf-radius);
   background: var(--wf-color-bg);
@@ -897,7 +1063,7 @@ code {
   font-family: var(--wf-font-sans);
   font-size: var(--wf-font-size-sm);
   color: var(--wf-color-text);
-  padding: var(--wf-space-sm) var(--wf-space);
+  padding: var(--wf-control-pad-y) var(--wf-space);
   cursor: pointer;
   box-sizing: border-box;
 }
@@ -917,11 +1083,11 @@ code {
   box-shadow: var(--wf-shadow-md);
   max-height: 240px;
   overflow-y: auto;
-  z-index: var(--wf-pop-z, 100);
+  z-index: var(--wf-z-dropdown);
 }
 
 .wf-select-search-opt {
-  padding: var(--wf-space-sm) var(--wf-space);
+  padding: var(--wf-control-pad-y) var(--wf-space);
   font-size: var(--wf-font-size-sm);
   color: var(--wf-color-text);
   cursor: pointer;
@@ -1129,6 +1295,11 @@ code {
 
 /* weifuwu/components — Table */
 
+.wf-table-wrap {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
 .wf-table {
   width: 100%;
   border-collapse: collapse;
@@ -1166,6 +1337,11 @@ code {
 .wf-table-th--sortable:hover {
   color: var(--wf-color-primary);
 }
+.wf-table-th--sortable:focus-visible {
+  outline: none;
+  box-shadow: var(--wf-focus-ring);
+  color: var(--wf-color-primary);
+}
 .wf-table-th--sorted {
   color: var(--wf-color-primary);
 }
@@ -1191,7 +1367,7 @@ code {
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: var(--wf-cover-z);
+  z-index: var(--wf-z-modal);
 }
 
 .wf-modal--enter {
@@ -1275,7 +1451,7 @@ code {
   display: flex;
   flex-direction: column;
   gap: var(--wf-gap-sm);
-  z-index: var(--wf-cover-z, 100);
+  z-index: var(--wf-z-toast);
   pointer-events: none;
 }
 
@@ -1504,12 +1680,12 @@ code {
   border: var(--wf-border-width) solid var(--wf-color-border);
   border-radius: var(--wf-radius);
   box-shadow: var(--wf-shadow-md);
-  z-index: var(--wf-pop-z);
+  z-index: var(--wf-z-dropdown);
   padding: var(--wf-space-xs) 0;
 }
 
 .wf-dropdown--open {
-  z-index: var(--wf-cover-z);
+  z-index: var(--wf-z-dropdown);
 }
 
 .wf-dropdown-item {
@@ -1626,6 +1802,11 @@ code {
   box-shadow: var(--wf-shadow-md);
 }
 
+.wf-card--clickable:focus-visible {
+  outline: none;
+  box-shadow: var(--wf-shadow-md), var(--wf-focus-ring);
+}
+
 /* weifuwu/components — Badge */
 
 .wf-badge {
@@ -1932,7 +2113,7 @@ code {
   display: flex;
   align-items: center;
   gap: var(--wf-gap-sm);
-  padding: var(--wf-space-sm) var(--wf-space);
+  padding: var(--wf-control-pad-y) var(--wf-space);
   border: var(--wf-border-width) solid var(--wf-color-border);
   border-radius: var(--wf-radius);
   background: var(--wf-color-bg);
@@ -2050,6 +2231,12 @@ code {
   background: var(--wf-color-bg-tertiary);
 }
 
+.wf-accordion-summary:focus-visible {
+  outline: none;
+  box-shadow: var(--wf-focus-ring);
+  border-radius: var(--wf-radius-sm);
+}
+
 .wf-accordion-content {
   padding: var(--wf-space) var(--wf-space-md) var(--wf-space-md);
   font-size: var(--wf-font-size-sm);
@@ -2247,7 +2434,7 @@ code {
   align-items: center;
   justify-content: space-between;
   gap: var(--wf-gap-sm);
-  padding: var(--wf-space-sm) var(--wf-space);
+  padding: var(--wf-control-pad-y) var(--wf-space);
   border: var(--wf-border-width) solid var(--wf-color-border);
   border-radius: var(--wf-radius);
   background: var(--wf-color-bg);
@@ -2307,7 +2494,7 @@ code {
 
 .wf-tooltip {
   position: fixed;
-  z-index: var(--wf-cover-z, 1000);
+  z-index: var(--wf-z-tooltip);
   background: var(--wf-color-text);
   color: var(--wf-color-bg);
   font-family: var(--wf-font-sans);
@@ -2396,7 +2583,7 @@ code {
 .wf-drawer {
   position: fixed;
   inset: 0;
-  z-index: var(--wf-cover-z, 1000);
+  z-index: var(--wf-z-modal);
   display: flex;
 }
 
@@ -2541,12 +2728,12 @@ code {
 .wf-popover-overlay {
   position: fixed;
   inset: 0;
-  z-index: 998;
+  z-index: calc(var(--wf-z-popover) - 1);
 }
 
 .wf-popover {
   position: fixed;
-  z-index: 999;
+  z-index: var(--wf-z-popover);
   background: var(--wf-color-bg);
   border: var(--wf-border-width) solid var(--wf-color-border);
   border-radius: var(--wf-radius-md);
@@ -2728,7 +2915,7 @@ code {
 .wf-datepicker-input {
   font-family: var(--wf-font-sans);
   font-size: var(--wf-font-size-sm);
-  padding: var(--wf-space-sm) var(--wf-space);
+  padding: var(--wf-control-pad-y) var(--wf-space);
   border: var(--wf-border-width) solid var(--wf-color-border);
   border-radius: var(--wf-radius);
   background: var(--wf-color-bg);
@@ -2754,14 +2941,14 @@ code {
 .wf-datepicker-overlay {
   position: fixed;
   inset: 0;
-  z-index: calc(var(--wf-pop-z) - 1);
+  z-index: calc(var(--wf-z-popover) - 1);
 }
 
 /* ── 日历面板 ── */
 
 .wf-datepicker-dropdown {
   position: fixed;
-  z-index: var(--wf-pop-z);
+  z-index: var(--wf-z-popover);
   background: var(--wf-color-bg);
   border: var(--wf-border-width) solid var(--wf-color-border);
   border-radius: var(--wf-radius-md);
@@ -2868,7 +3055,7 @@ code {
 
 .wf-datepicker-range-wrap {
   position: fixed;
-  z-index: var(--wf-pop-z);
+  z-index: var(--wf-z-popover);
   display: flex;
   gap: var(--wf-space);
   background: var(--wf-color-bg);
@@ -2887,7 +3074,7 @@ code {
 
 .wf-time-picker {
   position: fixed;
-  z-index: var(--wf-pop-z);
+  z-index: var(--wf-z-popover);
   background: var(--wf-color-bg);
   border: var(--wf-border-width) solid var(--wf-color-border);
   border-radius: var(--wf-radius-md);
@@ -3045,7 +3232,7 @@ code {
 
 .wf-chart-tooltip {
   position: fixed;
-  z-index: var(--wf-cover-z, 1000);
+  z-index: var(--wf-z-tooltip);
   background: var(--wf-color-text);
   color: var(--wf-color-bg);
   padding: var(--wf-space-xs) var(--wf-space-sm);
@@ -3145,7 +3332,7 @@ code {
 /* ── 编辑区 ────────────────────────────────────────── */
 
 .wf-editor-content {
-  padding: var(--wf-space-sm) var(--wf-space);
+  padding: var(--wf-control-pad-y) var(--wf-space);
   min-height: 200px;
   outline: none;
   font-family: var(--wf-font-sans);
@@ -3231,7 +3418,7 @@ code {
   display: block;
   width: 100%;
   min-height: 200px;
-  padding: var(--wf-space-sm) var(--wf-space);
+  padding: var(--wf-control-pad-y) var(--wf-space);
   border: none;
   outline: none;
   font-family: var(--wf-font-mono, 'SF Mono', 'Fira Code', 'Consolas', monospace);
@@ -3255,7 +3442,7 @@ code {
   box-sizing: border-box;
   font-family: var(--wf-font-sans);
   font-size: var(--wf-font-size-sm);
-  padding: var(--wf-space-sm) var(--wf-space);
+  padding: var(--wf-control-pad-y) var(--wf-space);
   border: var(--wf-border-width) solid var(--wf-color-border);
   border-radius: var(--wf-radius);
   outline: none;
@@ -3331,7 +3518,7 @@ code {
 
 .wf-editor-table-picker {
   
-  z-index: 100;
+  z-index: var(--wf-z-popover);
   background: var(--wf-color-bg);
   border: var(--wf-border-width) solid var(--wf-color-border);
   border-radius: var(--wf-radius);
@@ -3376,3 +3563,57 @@ code {
   border-top: 1px solid var(--wf-color-border);
 }
 
+/* weifuwu/components — ThemeSwitch 主题切换器 */
+
+.wf-theme-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius-md);
+  background: var(--wf-color-bg-secondary);
+  font-family: var(--wf-font-sans);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+.wf-theme-seg {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--wf-space-xs) var(--wf-space-sm);
+  min-height: 26px;
+  border: none;
+  background: none;
+  border-radius: var(--wf-radius-sm);
+  font-size: var(--wf-font-size-sm);
+  line-height: 1;
+  color: var(--wf-color-text-secondary);
+  cursor: pointer;
+  white-space: nowrap;
+  user-select: none;
+  transition: all var(--wf-transition);
+}
+
+.wf-theme-seg:hover {
+  color: var(--wf-color-text);
+  background: var(--wf-color-bg-tertiary);
+}
+
+.wf-theme-seg--active {
+  background: var(--wf-color-bg);
+  color: var(--wf-color-text);
+  font-weight: var(--wf-font-weight-medium);
+  box-shadow: var(--wf-shadow-sm);
+}
+
+.wf-theme-seg:focus-visible {
+  outline: none;
+  box-shadow: var(--wf-focus-ring);
+}
+
+.wf-theme-seg:disabled {
+  opacity: var(--wf-opacity-disabled);
+  cursor: not-allowed;
+}
+

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export type { Context, Handler, Middleware, ErrorHandler } from './types.ts';
-export { HttpError } from './types.ts';
+export { HttpError, createMiddleware } from './types.ts';
 export type { User } from './types.ts';
 export { serve, DEFAULT_MAX_BODY } from './core/serve.ts';
 export type { ServeOptions, Server } from './core/serve.ts';

package/dist/index.js

@@ -7,6 +7,18 @@ var HttpError = class extends Error {
     this.status = status;
   }
 };
+function createMiddleware(config) {
+  const mw = async (req, ctx, next) => {
+    const injected = await config.setup(ctx);
+    Object.assign(ctx, injected);
+    return next(req, ctx);
+  };
+  mw.__meta = {
+    injects: config.injects,
+    depends: config.depends ?? []
+  };
+  return mw;
+}
 
 // src/core/serve.ts
 import http from "node:http";
@@ -714,7 +726,9 @@ var Router = class _Router {
       if (!next) return this._wildcardMatch(method, segments);
       node = next;
     }
-    return this._resolveMatch(node, method, params, segments.length);
+    const resolved = this._resolveMatch(node, method, params, segments.length);
+    if (resolved) return resolved;
+    return this._wildcardMatch(method, segments);
   }
   _wildcardMatch(method, segments) {
     if (!this._hasWildcard) return null;
@@ -1144,7 +1158,7 @@ function ui() {
         const cached = jsCache.get(absPath);
         if (cached && await jsCacheFresh(cached.inputs)) {
           return new Response(cached.code, {
-            headers: { "Content-Type": "application/javascript" }
+            headers: { "Content-Type": "application/javascript", "Cache-Control": "no-cache" }
           });
         }
         const result = await build({
@@ -1168,7 +1182,7 @@ function ui() {
         }
         jsCache.set(absPath, { code, inputs });
         return new Response(code, {
-          headers: { "Content-Type": "application/javascript" }
+          headers: { "Content-Type": "application/javascript", "Cache-Control": "no-cache" }
         });
       },
       async css(entryPath) {
@@ -1177,7 +1191,7 @@ function ui() {
         const cached = cssCache.get(absPath);
         if (cached && cached.mtime === st.mtimeMs) {
           return new Response(cached.code, {
-            headers: { "Content-Type": "text/css; charset=utf-8" }
+            headers: { "Content-Type": "text/css; charset=utf-8", "Cache-Control": "no-cache" }
           });
         }
         let code = await readFile(absPath, "utf-8");
@@ -1195,7 +1209,7 @@ function ui() {
         }
         cssCache.set(absPath, { code, mtime: st.mtimeMs });
         return new Response(code, {
-          headers: { "Content-Type": "text/css; charset=utf-8" }
+          headers: { "Content-Type": "text/css; charset=utf-8", "Cache-Control": "no-cache" }
         });
       }
     };
@@ -2933,6 +2947,7 @@ export {
   badRequest,
   conflict,
   cors,
+  createMiddleware,
   created,
   forbidden,
   noContent,

package/dist/layout/weifuwu-layout.css

@@ -35,8 +35,20 @@
   --wf-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
 
   /* ── 层级 ── */
-  --wf-pop-z: 50;
-  --wf-cover-z: 100;
+  /* 浮层全部 createPortal 到 body，全局参与堆叠。
+     顺序：sticky < overlay < modal/drawer < 弹出面板族 < toast < tooltip。
+     modal 与 drawer 互斥出现；面板族同级（dropdown/select/datepicker/popover）用 DOM 顺序裁决。 */
+  --wf-z-sticky: 40;
+  --wf-z-overlay: 80;
+  --wf-z-modal: 100;
+  --wf-z-popover: 120; /* dropdown/select/datepicker 面板与 popover 同层 */
+  --wf-z-toast: 140;
+  --wf-z-tooltip: 160;
+  --wf-z-dropdown: var(--wf-z-popover); /* 语义别名：下拉菜单属弹出面板族 */
+
+  /* ── 兼容别名（旧 token 名，语义近似映射） ── */
+  --wf-pop-z: var(--wf-z-popover);
+  --wf-cover-z: var(--wf-z-modal);
 
   /* ── 色彩 — 品牌 ── */
   --wf-color-primary: #4f6ef7;
@@ -71,15 +83,15 @@
   --wf-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --wf-font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
 
-  --wf-font-size-xs: 11px;
-  --wf-font-size-sm: 12px;
-  --wf-font-size-base: 13px;
-  --wf-font-size-lg: 14px;
-  --wf-font-size-xl: 15px;
-  --wf-font-size-2xl: 20px;
+  --wf-font-size-xs: 12px;
+  --wf-font-size-sm: 13px;
+  --wf-font-size-base: 14px;
+  --wf-font-size-lg: 15px;
+  --wf-font-size-xl: 16px;
+  --wf-font-size-2xl: 21px;
   --wf-font-size-3xl: 24px;
-  --wf-font-size-4xl: 28px;
-  --wf-font-size-5xl: 32px;
+  --wf-font-size-4xl: 30px;
+  --wf-font-size-5xl: 36px;
 
   --wf-font-weight-normal: 400;
   --wf-font-weight-medium: 500;
@@ -110,6 +122,10 @@
   --wf-accent-color: var(--wf-color-primary);
   --wf-caret-color: var(--wf-color-primary);
 
+  /* 控件尺寸：垂直内边距 + 目标高度（移动端在 _base.css 提升到 44px） */
+  --wf-control-pad-y: 10px;
+  --wf-control-height: 36px;
+
   /* ── 断点 ── */
   --wf-bp-sm: 640px;
   --wf-bp-md: 768px;
@@ -126,8 +142,21 @@
   --wf-letter-spacing-wider: 1px;
 }
 
-/* weifuwu/theme — 暗色模式 */
-[data-theme="dark"] {
+/* weifuwu/theme — 暗色模式
+ *
+ * 两种激活方式（优先级：显式 data-theme > 系统偏好）：
+ *   1. 手动：<html data-theme="dark">（或 data-theme="light" 强制亮色）
+ *   2. 自动：系统偏好 prefers-color-scheme: dark，无显式覆盖时生效
+ *
+ * ⚠️ 两段暗色覆盖值必须保持一致（静态 CSS 无法共享选择器列表，改动需同步）。
+ * 每段末尾都设置 color-scheme: dark，让原生控件/滚动条跟随。
+ */
+
+/* ── 激活方式一：手动 data-theme="dark" ── */
+/* color-scheme 用 :root[data-theme] 提升优先级，压过 _base.css 的 :root 定义（导入顺序在后者） */
+:root[data-theme="dark"] {
+  color-scheme: dark;
+
   --wf-color-primary: #6b8aff;
   --wf-color-primary-hover: #8ba3ff;
   --wf-color-primary-bg: #1e293b;
@@ -166,6 +195,50 @@
   --wf-surface-bg: var(--wf-color-bg);
 }
 
+/* ── 激活方式二：系统暗色偏好（data-theme="light" 可强制亮色） ── */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    color-scheme: dark;
+
+    --wf-color-primary: #6b8aff;
+    --wf-color-primary-hover: #8ba3ff;
+    --wf-color-primary-bg: #1e293b;
+
+    --wf-color-success: #4ade80;
+    --wf-color-success-bg: #14532d;
+    --wf-color-warning: #fbbf24;
+    --wf-color-warning-bg: #451a03;
+    --wf-color-error: #f87171;
+    --wf-color-error-bg: #451a1a;
+
+    --wf-color-info: #60a5fa;
+    --wf-color-info-bg: #172554;
+
+    --wf-color-text: #f1f5f9;
+    --wf-color-text-secondary: #94a3b8;
+    --wf-color-text-tertiary: #64748b;
+    --wf-color-text-disabled: #475569;
+
+    --wf-color-bg: #0f172a;
+    --wf-color-bg-secondary: #1e293b;
+    --wf-color-bg-tertiary: #334155;
+
+    --wf-color-border: #334155;
+    --wf-color-border-light: #1e293b;
+    --wf-color-border-dark: #475569;
+
+    --wf-surface-shadow: 0 1px 3px rgba(0,0,0,0.3);
+    --wf-shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
+    --wf-shadow: 0 1px 3px rgba(0,0,0,0.3);
+    --wf-shadow-md: 0 4px 12px rgba(0,0,0,0.4);
+    --wf-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.4);
+
+    --wf-focus-ring: 0 0 0 2px var(--wf-color-primary-bg);
+
+    --wf-surface-bg: var(--wf-color-bg);
+  }
+}
+
 /* weifuwu/theme — 基础元素默认样式 */
 *,
 *::before,
@@ -173,6 +246,11 @@
   box-sizing: border-box;
 }
 
+:root {
+  /* 原生控件/滚动条跟随主题；暗色激活时在 _dark.css 中切为 dark */
+  color-scheme: light;
+}
+
 body {
   margin: 0;
   background: var(--wf-color-bg);
@@ -210,7 +288,7 @@ select {
   color: var(--wf-color-text);
   border: var(--wf-border-width) solid var(--wf-color-border);
   border-radius: var(--wf-radius);
-  padding: var(--wf-space-sm) var(--wf-space);
+  padding: var(--wf-control-pad-y) var(--wf-space);
 }
 
 input:focus,
@@ -235,7 +313,8 @@ button {
   color: var(--wf-color-text);
   border: var(--wf-border-width) solid var(--wf-color-border);
   border-radius: var(--wf-radius);
-  padding: var(--wf-space-sm) var(--wf-space-md);
+  padding: var(--wf-control-pad-y) var(--wf-space-md);
+  min-height: var(--wf-control-height);
   cursor: pointer;
 }
 button:hover {
@@ -243,6 +322,31 @@ button:hover {
   color: var(--wf-color-primary);
 }
 
+/* 键盘焦点：button 与 [tabindex] 统一 focus ring（仅键盘触发，鼠标点击不闪） */
+button:focus-visible,
+[tabindex]:focus-visible {
+  outline: none;
+  box-shadow: var(--wf-focus-ring);
+}
+
+/* 触屏设备（coarse pointer）：交互目标提升到 44px（Apple HIG / WCAG 2.5.8） */
+@media (pointer: coarse) {
+  button,
+  [role="button"],
+  input,
+  textarea,
+  select,
+  .wf-card--clickable,
+  .wf-table-th--sortable,
+  .wf-accordion-summary,
+  .wf-tag-close,
+  .wf-checkbox,
+  .wf-switch,
+  .wf-radio {
+    min-height: 44px;
+  }
+}
+
 h1, h2, h3, h4, h5, h6 {
   font-weight: var(--wf-font-weight-semibold);
   line-height: var(--wf-line-height-tight);
@@ -314,6 +418,18 @@ code {
   border-radius: var(--wf-radius-sm);
 }
 
+/* ── 无障碍：尊重系统减弱动效偏好 ── */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
 /* stack — 纵向堆叠 */
 .wf-stack {
   display: flex;
@@ -558,7 +674,9 @@ code {
   min-height: 0;
 }
 
-/* text-align 对齐原语 */
+/* 排版工具类 — 字号 / 色阶 / 字重 / 截断（零 CSS 用户自排版） */
+
+/* ── text-align ── */
 
 .wf-text-left {
   text-align: left;
@@ -571,3 +689,50 @@ code {
 .wf-text-right {
   text-align: right;
 }
+
+/* ── 字号 ── */
+
+.wf-text-xs { font-size: var(--wf-font-size-xs); }
+.wf-text-sm { font-size: var(--wf-font-size-sm); }
+.wf-text-base { font-size: var(--wf-font-size-base); }
+.wf-text-lg { font-size: var(--wf-font-size-lg); }
+.wf-text-xl { font-size: var(--wf-font-size-xl); }
+.wf-text-2xl { font-size: var(--wf-font-size-2xl); }
+.wf-text-3xl { font-size: var(--wf-font-size-3xl); }
+.wf-text-4xl { font-size: var(--wf-font-size-4xl); }
+.wf-text-5xl { font-size: var(--wf-font-size-5xl); }
+
+/* ── 色阶 ── */
+
+.wf-text-secondary { color: var(--wf-color-text-secondary); }
+.wf-text-tertiary { color: var(--wf-color-text-tertiary); }
+.wf-text-disabled { color: var(--wf-color-text-disabled); }
+.wf-text-brand { color: var(--wf-color-primary); }
+
+/* ── 字重 ── */
+
+.wf-text-medium { font-weight: var(--wf-font-weight-medium); }
+.wf-text-semibold { font-weight: var(--wf-font-weight-semibold); }
+.wf-text-bold { font-weight: var(--wf-font-weight-bold); }
+
+/* ── 截断 ── */
+
+.wf-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wf-line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.wf-line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "weifuwu",
   "type": "module",
-  "version": "0.55.2",
+  "version": "0.55.3",
   "description": "AI SaaS framework — (req, ctx) => Response",
   "exports": {
     ".": {
@@ -38,6 +38,7 @@
     "release:dry": "node scripts/release.mjs --dry-run"
   },
   "dependencies": {
+    "esbuild": "^0.28.1",
     "graphql": "^16",
     "ws": "^8"
   },
@@ -62,7 +63,6 @@
     "@tailwindcss/postcss": "^4.3.3",
     "@types/node": "^25",
     "@types/ws": "^8",
-    "esbuild": "^0.28.1",
     "ioredis": "^5.11.1",
     "jsdom": "^29.1.1",
     "postcss": "^8.5.19",