weifuwu 0.69.0 → 0.71.0

package/dist/index.js

@@ -4787,11 +4787,18 @@ function extractParams(path, match) {
   const m = path.match(match.re);
   if (m) {
     for (let i = 0; i < match.keys.length; i++) {
-      params[match.keys[i]] = decodeURIComponent(m[i + 1]);
+      params[match.keys[i]] = safeDecode(m[i + 1]);
     }
   }
   return params;
 }
+function safeDecode(s) {
+  try {
+    return decodeURIComponent(s);
+  } catch {
+    return s;
+  }
+}
 
 // src/ui/ssr-page.ts
 var DEFAULT_TEMPLATE = (p) => `<!DOCTYPE html>

package/dist/layout/weifuwu-layout.css

@@ -46,6 +46,7 @@
   --wf-dark-bg-hover: rgba(255, 255, 255, 0.06);      /* 暗色 hover 反白 */
   --wf-dark-surface-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   --wf-dark-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
+  --wf-dark-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.3);
   --wf-dark-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   --wf-dark-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
   --wf-dark-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
@@ -82,6 +83,7 @@
 
   /* ── 阴影 ── */
   --wf-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
+  --wf-shadow-inset: inset 0 1px 2px rgba(0,0,0,0.04);  /* 内阴影：凹槽/轨道深度（Switch/ThemeSwitch） */
   --wf-shadow: 0 1px 3px rgba(0,0,0,0.08);
   --wf-shadow-md: 0 4px 12px rgba(0,0,0,0.1);
   --wf-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
@@ -222,6 +224,7 @@
 
   /* ── 浮层遮罩（Modal/Drawer overlay，暗色经 --wf-dark-overlay 映射） ── */
   --wf-overlay: rgba(0, 0, 0, 0.4);
+  --wf-overlay-blur: 4px;  /* 遮罩毛玻璃（弹层现代质感，不支持 backdrop-filter 的环境自动降级为纯色） */
 
   /* ── 表单控件 ── */
   --wf-accent-color: var(--wf-color-primary);
@@ -307,6 +310,7 @@
   --wf-shadow: var(--wf-dark-shadow);
   --wf-shadow-md: var(--wf-dark-shadow-md);
   --wf-shadow-lg: var(--wf-dark-shadow-lg);
+  --wf-shadow-inset: var(--wf-dark-shadow-inset);
 
   --wf-color-primary-text: var(--wf-dark-brand-500);
   --wf-color-success-text: var(--wf-dark-green-500);
@@ -357,6 +361,7 @@
     --wf-shadow: var(--wf-dark-shadow);
     --wf-shadow-md: var(--wf-dark-shadow-md);
     --wf-shadow-lg: var(--wf-dark-shadow-lg);
+    --wf-shadow-inset: var(--wf-dark-shadow-inset);
 
     --wf-color-primary-text: var(--wf-dark-brand-500);
     --wf-color-success-text: var(--wf-dark-green-500);
@@ -377,6 +382,36 @@
   box-sizing: border-box;
 }
 
+/* 选区色：primary 调（文字反白，与品牌一致） */
+::selection {
+  background: var(--wf-color-primary-bg);
+  color: var(--wf-color-primary-text);
+}
+
+/* 主题滚动条（全局——所有滚动区一致；Firefox thin + WebKit 样式） */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--wf-color-border-dark) transparent;
+}
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--wf-color-border-dark);
+  border-radius: var(--wf-radius-sm);
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--wf-color-text-secondary);
+  background-clip: padding-box;
+  border: 2px solid transparent;
+}
+
 :root {
   /* 原生控件/滚动条跟随主题；暗色激活时在 _dark.css 中切为 dark */
   color-scheme: light;
@@ -447,11 +482,20 @@ button {
   padding: var(--wf-control-pad-y) var(--wf-space-md);
   min-height: var(--wf-control-height);
   cursor: pointer;
+  transition: border-color var(--wf-dur-fast) var(--wf-ease-out),
+              color var(--wf-dur-fast) var(--wf-ease-out),
+              box-shadow var(--wf-dur-fast) var(--wf-ease-out),
+              background-color var(--wf-dur-fast) var(--wf-ease-out),
+              filter var(--wf-dur-fast) var(--wf-ease-out);
 }
 button:hover {
   border-color: var(--wf-color-primary);
   color: var(--wf-color-primary-text);
 }
+button:active:not(:disabled),
+[role="button"]:active {
+  filter: brightness(0.95); /* 按压反馈：不偏移布局，适用任意宽度（block/inline） */
+}
 
 /* 键盘焦点：button 与 [tabindex] 统一 focus ring（仅键盘触发，鼠标点击不闪） */
 button:focus-visible,
@@ -460,6 +504,15 @@ button:focus-visible,
   box-shadow: var(--wf-focus-ring);
 }
 
+[role="button"] {
+  cursor: pointer;
+  transition: background-color var(--wf-dur-fast) var(--wf-ease-out),
+              border-color var(--wf-dur-fast) var(--wf-ease-out),
+              box-shadow var(--wf-dur-fast) var(--wf-ease-out),
+              color var(--wf-dur-fast) var(--wf-ease-out),
+              filter var(--wf-dur-fast) var(--wf-ease-out);
+}
+
 /* 触屏设备（coarse pointer）：交互目标提升到 44px（Apple HIG / WCAG 2.5.8） */
 @media (pointer: coarse) {
   button,
@@ -571,10 +624,13 @@ body.wf-dragging {
 }
 
 @layer layout {
-/* stack — 纵向堆叠 */
+/* stack — 纵向堆叠（L3：gap 默认值 :where() 零优先级——wf-gap-* 等覆盖工具
+   靠优先级获胜，不再依赖 import 顺序） */
 .wf-stack {
   display: flex;
   flex-direction: column;
+}
+:where(.wf-stack) {
   gap: var(--wf-gap, var(--wf-gap-md));
 }
 @media (min-width: 640px) { .wf-stack\@sm { flex-direction: row; align-items: var(--wf-align, center); } }
@@ -585,6 +641,8 @@ body.wf-dragging {
 .wf-stack-reverse {
   display: flex;
   flex-direction: column-reverse;
+}
+:where(.wf-stack-reverse) {
   gap: var(--wf-gap, var(--wf-gap-md));
 }
 @media (min-width: 640px) { .wf-stack-reverse\@sm { flex-direction: row-reverse; align-items: var(--wf-align, center); } }
@@ -593,10 +651,13 @@ body.wf-dragging {
 }
 
 @layer layout {
-/* row — 横向排列 */
+/* row — 横向排列（L3：gap/align 默认值 :where() 零优先级——wf-gap-*、wf-top 等
+   覆盖工具靠优先级获胜，不再依赖 import 顺序） */
 .wf-row {
   display: flex;
   flex-wrap: wrap;
+}
+:where(.wf-row) {
   gap: var(--wf-gap, var(--wf-gap-md));
   align-items: var(--wf-align, center);
 }
@@ -609,6 +670,8 @@ body.wf-dragging {
   display: flex;
   flex-direction: row-reverse;
   flex-wrap: wrap;
+}
+:where(.wf-row-reverse) {
   gap: var(--wf-gap, var(--wf-gap-md));
   align-items: var(--wf-align, center);
 }
@@ -618,10 +681,12 @@ body.wf-dragging {
 }
 
 @layer layout {
-/* split — 两端展开 */
+/* split — 两端展开（L3：align/gap 默认值 :where() 零优先级） */
 .wf-split {
   display: flex;
   justify-content: space-between;
+}
+:where(.wf-split) {
   align-items: var(--wf-align, center);
   gap: var(--wf-gap, var(--wf-gap-md));
 }
@@ -641,57 +706,84 @@ body.wf-dragging {
 }
 
 @layer layout {
-/* right — 靠右对齐 */
+/* between — 两端对齐（行内垂直居中；L3：align/gap 默认值 :where() 零优先级） */
+.wf-between {
+  display: flex;
+  justify-content: space-between;
+}
+:where(.wf-between) {
+  align-items: var(--wf-align, center);
+  gap: var(--wf-gap, var(--wf-gap-md));
+}
+@media (min-width: 640px) { .wf-between\@sm { display: flex; justify-content: space-between; align-items: var(--wf-align, center); gap: var(--wf-gap, var(--wf-gap-md)); } }
+@media (min-width: 768px) { .wf-between\@md { display: flex; justify-content: space-between; align-items: var(--wf-align, center); gap: var(--wf-gap, var(--wf-gap-md)); } }
+@media (min-width: 1024px) { .wf-between\@lg { display: flex; justify-content: space-between; align-items: var(--wf-align, center); gap: var(--wf-gap, var(--wf-gap-md)); } }
+}
+
+@layer layout {
+/* right — 靠右对齐（L3：align/gap 默认值 :where() 零优先级） */
 .wf-right {
   display: flex;
   justify-content: flex-end;
+}
+:where(.wf-right) {
   align-items: var(--wf-align, center);
   gap: var(--wf-gap, var(--wf-gap-md));
 }
 }
 
 @layer layout {
-/* top — 顶部对齐 */
+/* top — 顶部对齐（L3：gap 默认值 :where() 零优先级；align-items 是身份属性） */
 .wf-top {
   display: flex;
   align-items: flex-start;
+}
+:where(.wf-top) {
   gap: var(--wf-gap, var(--wf-gap-md));
 }
 }
 
 @layer layout {
-/* bottom — 底部对齐 */
+/* bottom — 底部对齐（L3：gap 默认值 :where() 零优先级；align-items 是身份属性） */
 .wf-bottom {
   display: flex;
   align-items: flex-end;
+}
+:where(.wf-bottom) {
   gap: var(--wf-gap, var(--wf-gap-md));
 }
 }
 
 @layer layout {
-/* stretch — 拉伸对齐 */
+/* stretch — 拉伸对齐（L3：gap 默认值 :where() 零优先级；align-items 是身份属性） */
 .wf-stretch {
   display: flex;
   align-items: stretch;
+}
+:where(.wf-stretch) {
   gap: var(--wf-gap, var(--wf-gap-md));
 }
 }
 
 @layer layout {
-/* around — 均匀环绕分布 */
+/* around — 均匀环绕分布（L3：align/gap 默认值 :where() 零优先级） */
 .wf-around {
   display: flex;
   justify-content: space-around;
+}
+:where(.wf-around) {
   align-items: var(--wf-align, center);
   gap: var(--wf-gap, var(--wf-gap-md));
 }
 }
 
 @layer layout {
-/* evenly — 均匀分布 */
+/* evenly — 均匀分布（L3：align/gap 默认值 :where() 零优先级） */
 .wf-evenly {
   display: flex;
   justify-content: space-evenly;
+}
+:where(.wf-evenly) {
   align-items: var(--wf-align, center);
   gap: var(--wf-gap, var(--wf-gap-md));
 }
@@ -707,10 +799,18 @@ body.wf-dragging {
 }
 
 @layer layout {
-/* fixed — 固定不伸缩 */
+/* flex-none — 固定不伸缩（推荐名；wf-fixed 为兼容别名——易与 position:fixed 混淆，
+   position:fixed 请用 wf-pin） */
+.wf-flex-none,
 .wf-fixed {
   flex: none;
 }
+
+/* pin — 固定定位（角标/浮层锚点——position: fixed，坐标由 inline 参数控制） */
+.wf-pin {
+  position: fixed;
+  z-index: var(--wf-z, var(--wf-cover-z));
+}
 }
 
 @layer layout {
@@ -862,19 +962,24 @@ body.wf-dragging {
 }
 
 @layer layout {
-/* grid — 二维网格 */
+/* grid — 二维网格（L3：gap 默认值 :where() 零优先级） */
 .wf-grid {
   display: grid;
   grid-template-columns: var(--wf-cols, repeat(auto-fill, minmax(280px, 1fr)));
+}
+:where(.wf-grid) {
   gap: var(--wf-gap, var(--wf-gap-lg));
 }
 }
 
 @layer layout {
-/* cluster — 换行簇 */
+/* cluster — 换行簇（L3：justify/align/gap 默认值 :where() 零优先级——
+   wf-right 等分布工具叠加时靠优先级获胜） */
 .wf-cluster {
   display: flex;
   flex-wrap: wrap;
+}
+:where(.wf-cluster) {
   gap: var(--wf-gap, var(--wf-gap-sm));
   justify-content: var(--wf-justify, center);
   align-items: var(--wf-align, center);
@@ -882,7 +987,7 @@ body.wf-dragging {
 }
 
 @layer layout {
-/* scroll — 可滚动容器 */
+/* scroll — 可滚动容器（全局滚动条样式见 _base.css；此类仅标记语义 + overflow） */
 .wf-scroll {
   overflow: auto;
 }
@@ -920,7 +1025,7 @@ body.wf-dragging {
 }
 }
 
-@layer layout {
+@layer utilities {
 /* block — 块级显示 */
 .wf-block {
   display: block;
@@ -944,9 +1049,25 @@ body.wf-dragging {
 }
 }
 
+@layer utilities {
+/* flex — 弹性盒 display 工具（补全 display 族：block/inline/inline-block/contents/hidden/flex）
+ * 核心场景：响应式显隐的 flex 容器——`wf-hidden wf-flex@lg`（窄隐宽显且保持 flex 布局）。
+ * 不可用 wf-block@lg 替代：block 会覆盖 wf-stack 的 display:flex，
+ * 致 flex-direction/gap/mt-auto 全部静默失效（layouts-demo 侧栏 mt-auto 实测踩坑）。 */
+.wf-flex {
+  display: flex;
+}
+@media (min-width: 640px) { .wf-flex\@sm { display: flex; } }
+@media (min-width: 768px) { .wf-flex\@md { display: flex; } }
+@media (min-width: 1024px) { .wf-flex\@lg { display: flex; } }
+}
+
 @layer layout {
 /* container — 内容宽度约束居中 */
+/* width: 100% 必须：margin: 0 auto 在 flex 父中阻止 stretch（宽度=内容）
+   ——landing 特性区 404px 而非撑满 1100 容器的根因 */
 .wf-container {
+  width: 100%;
   max-width: var(--wf-max, 1200px);
   margin: 0 auto;
   padding: 0 var(--wf-gap, var(--wf-gap-lg));
@@ -969,12 +1090,15 @@ body.wf-dragging {
 }
 
 @layer layout {
-/* nowrap — 不换行 */
+/* nowrap — 不换行（只管 flex-wrap——不定义 align-items，避免与
+   wf-stretch 等对齐工具叠加冲突：双份 CSS 下 nowrap 后置曾覆盖 stretch；
+   L3：gap 默认值 :where() 零优先级） */
 .wf-nowrap {
   display: flex;
   flex-wrap: nowrap;
+}
+:where(.wf-nowrap) {
   gap: var(--wf-gap, var(--wf-gap-md));
-  align-items: var(--wf-align, center);
 }
 }
 
@@ -1016,6 +1140,20 @@ body.wf-dragging {
 .wf-py-xl { padding-top: var(--wf-space-xl); padding-bottom: var(--wf-space-xl); }
 .wf-py-2xl { padding-top: var(--wf-space-2xl); padding-bottom: var(--wf-space-2xl); }
 
+/* ── padding: 单侧顶/底（幽灵类防线抓出 wf-pt-md/wf-pb-md 误用——补全家族） ── */
+.wf-pt-xs { padding-top: var(--wf-space-xs); }
+.wf-pt-sm { padding-top: var(--wf-space-sm); }
+.wf-pt-md { padding-top: var(--wf-space-md); }
+.wf-pt-lg { padding-top: var(--wf-space-lg); }
+.wf-pt-xl { padding-top: var(--wf-space-xl); }
+.wf-pt-2xl { padding-top: var(--wf-space-2xl); }
+.wf-pb-xs { padding-bottom: var(--wf-space-xs); }
+.wf-pb-sm { padding-bottom: var(--wf-space-sm); }
+.wf-pb-md { padding-bottom: var(--wf-space-md); }
+.wf-pb-lg { padding-bottom: var(--wf-space-lg); }
+.wf-pb-xl { padding-bottom: var(--wf-space-xl); }
+.wf-pb-2xl { padding-bottom: var(--wf-space-2xl); }
+
 /* ── margin：重置 ── */
 .wf-m-0 { margin: 0; }
 .wf-p-0 { padding: 0; }
@@ -1045,20 +1183,33 @@ body.wf-dragging {
 /* ── margin: auto（居中） ── */
 .wf-mx-auto { margin-left: auto; margin-right: auto; }
 .wf-my-auto { margin-top: auto; margin-bottom: auto; }
-
-/* ── gap：为 flex/grid 原语设置间距变量 ── */
-.wf-gap-none { --wf-gap: 0; }
-.wf-gap-xs { --wf-gap: var(--wf-gap-xs); }
-.wf-gap-sm { --wf-gap: var(--wf-gap-sm); }
-.wf-gap-md { --wf-gap: var(--wf-gap-md); }
-.wf-gap-lg { --wf-gap: var(--wf-gap-lg); }
-.wf-gap-xl { --wf-gap: var(--wf-gap-xl); }
-.wf-gap-2xl { --wf-gap: var(--wf-gap-2xl); }
+.wf-mt-auto { margin-top: auto; }  /* flex 列推底（侧栏 footer——曾写不存在类静默失效） */
+.wf-mb-auto { margin-bottom: auto; }
+
+/* ── gap：直接设置 gap 属性（不设 --wf-gap 变量——变量会继承污染子孙：
+   壳 root wf-gap-none 曾让 KPI grid 的 gap: var(--wf-gap) = 0 卡无间距） ── */
+.wf-gap-none { gap: 0; }
+.wf-gap-xs { gap: var(--wf-gap-xs); }
+.wf-gap-sm { gap: var(--wf-gap-sm); }
+.wf-gap-md { gap: var(--wf-gap-md); }
+.wf-gap-lg { gap: var(--wf-gap-lg); }
+.wf-gap-xl { gap: var(--wf-gap-xl); }
+.wf-gap-2xl { gap: var(--wf-gap-2xl); }
 
 /* ── 尺寸 ── */
 .wf-w-full { width: 100%; }
 .wf-h-full { height: 100%; }
 .wf-w-auto { width: auto; }
+
+/* ── 固定宽度阶梯（对齐 token 阶梯——卡片/面板/容器宽不再内联） ── */
+.wf-w-xs { width: var(--wf-w-xs, 320px); }
+.wf-w-sm { width: var(--wf-w-sm, 480px); }
+.wf-w-md { width: var(--wf-w-md, 640px); }
+.wf-w-lg { width: var(--wf-w-lg, 768px); }
+.wf-w-xl { width: var(--wf-w-xl, 1024px); }
+.wf-w-max { max-width: 100%; }
+.wf-w-md-auto { width: 100%; }
+@media (min-width: 768px) { .wf-w-md-auto { width: var(--wf-w-md, 640px); } }
 }
 
 @layer layout {
@@ -1177,6 +1328,23 @@ body.wf-dragging {
   display: inline-flex;
 }
 
+/* ── 折叠态：图标-only 导航（配合 --wf-sidebar-width 收窄侧栏） ── */
+.wf-nav--collapsed .wf-nav-item {
+  justify-content: center;
+  gap: 0;
+  padding: var(--wf-space-sm);
+}
+.wf-nav--collapsed .wf-nav-label {
+  display: none;
+}
+.wf-nav--collapsed .wf-nav-group {
+  text-align: center;
+  padding-left: 0;
+  padding-right: 0;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
 /* ── 主内容区 ── */
 .wf-main {
   padding: var(--wf-space-lg);

package/docs/components.md

@@ -2,14 +2,14 @@
 
 > 本页为 weifuwu 官方文档拆分页 · [返回 README](../README.md)
 
-92 个 HTML 原语组件。每个是 `(_init, ctx) => (props) => VNode`（两阶段组件，与前端框架同一模型），引用 `--wf-*` CSS 变量做主题。另含 `confirm()` / `toast()` 命令式中间件。
+109 个 HTML 原语组件。每个是 `(_init, ctx) => (props) => VNode`（两阶段组件，与前端框架同一模型），引用 `--wf-*` CSS 变量做主题。另含 `confirm()` / `toast()` 命令式中间件。
 
 > **组件速查（weifuwu 组件 ↔ antd / Element Plus / shadcn-ui 对应 + 迁移示例）**：见 [`docs/components-map.md`](components-map.md)——从其他组件库迁来的开发者按功能直接找对应组件。
 > **自定义组件开发**：见 [docs/custom-components.md](custom-components.md)——usePopup/useControlled/对话框/AI 组件/类型纪律逐步指南。
 
 ```ts
 import { Button, Input, Table, Modal, Toast } from 'weifuwu/components'
-import 'weifuwu/components/style.css'   // 包含 Token + 67 布局原语 + 组件样式，一次性引入
+import 'weifuwu/components/style.css'   // 包含 Token + 57 布局原语 + 136 工具类 + 组件样式，一次性引入
 ```
 
 ### 使用示例

package/docs/layout.md

@@ -2,7 +2,7 @@
 
 > 本页为 weifuwu 官方文档拆分页 · [返回 README](../README.md)
 
-纯 CSS 布局原语 + 工具类 + 143 个主题 Token。不绑定任何 JS 框架。
+纯 CSS 57 个布局原语 + 136 个工具类 + 167 个主题 Token。不绑定任何 JS 框架。
 
 > **学习路径与命名规范**：见 [`design/style-guide.md`](../design/style-guide.md)——统一语法 `wf-<域>-<名>`、三档学习（组件 → 10 核心原语 → 完整速查）、场景速查、变量定制。
 
@@ -25,7 +25,7 @@ app.get('/layout.css', (req, ctx) => ctx.ui.css('weifuwu/layout'))
 
 也支持相对路径：`ctx.ui.css('./src/style.css')`。
 
-## 70 个布局原语
+## 57 个布局原语
 
 | 类别 | 原语 | 效果 |
 |------|------|------|
@@ -44,11 +44,12 @@ app.get('/layout.css', (req, ctx) => ctx.ui.css('weifuwu/layout'))
 | | `wf-bottom` | align-items: flex-end |
 | | `wf-stretch` | align-items: stretch |
 | **弹性** | `wf-fill` | flex: 1 + min-width: 0 |
-| | `wf-fixed` | flex: none |
+| | `wf-flex-none` | flex: none（`wf-fixed` 为兼容别名——易与 position:fixed 混淆，推荐新名） |
 | | `wf-auto` | flex: auto |
 | | `wf-shrink` | min-width/height: 0 |
 | **Z轴** | `wf-cover` | position: fixed + inset: 0 |
-| | `wf-pop` | position: absolute |
+| | `wf-pin` | position: fixed（角标/浮层锚点，坐标由 inline 控制——相对视口） |
+| | `wf-pop` | position: absolute（容器内角标：配合 `wf-layer`/`wf-anchor` 父级） |
 | | `wf-anchor` | position: relative |
 | | `wf-layer` | position: relative + z-index |
 | | `wf-sticky` | position: sticky |
@@ -60,17 +61,24 @@ app.get('/layout.css', (req, ctx) => ctx.ui.css('weifuwu/layout'))
 | | `wf-scroll` | overflow: auto |
 | | `wf-clip` | overflow: hidden |
 | **显隐** | `wf-hidden` `wf-hidden@sm/md/lg` | display: none |
+| | `wf-flex` `wf-flex@sm/md/lg` | display: flex（响应式显隐的 flex 容器恢复用——见「组合规则」） |
 | | `wf-block` `wf-block@sm/md/lg` | display: block |
 | | `wf-inline` | display: inline |
 | | `wf-inline-block` | display: inline-block |
 | | `wf-contents` | display: contents |
-| **间距** | `wf-p-*` / `wf-px-*` / `wf-py-*`（xs~2xl） | padding：全/水平/垂直，引用 `--wf-space-*` |
+| | `wf-dim` | opacity 0.7（运行中/历史态淡化） |
+| **间距** | `wf-p-*` / `wf-px-*` / `wf-py-*`（xs~2xl，另有 `wf-p-0`） | padding：全/水平/垂直，引用 `--wf-space-*` |
+| | `wf-m-0` | margin: 0 |
 | | `wf-mt-*` / `wf-mb-*` / `wf-my-*`（xs~2xl） | margin：top/bottom/垂直 |
-| | `wf-mx-auto` / `wf-my-auto` | margin: auto 居中 |
+| | `wf-pt-*` / `wf-pb-*`（xs~2xl） | padding：单侧顶/底（分隔条场景） |
+| | `wf-mx-auto` / `wf-my-auto` / `wf-mt-auto` / `wf-mb-auto` | margin: auto 居中 / flex 列推底 |
 | | `wf-gap-*`（xs~2xl） | 为 flex/grid 原语设置 `--wf-gap` |
 | **尺寸** | `wf-w-full` / `wf-h-full` / `wf-w-auto` | 宽/高 100%、auto |
+| | `wf-w-xs…xl` / `wf-w-max` / `wf-w-md-auto` | 固定宽阶（`--wf-space-*` 派生）/ max-content / md 起 auto |
 | **边框** | `wf-border` / `wf-border-t/b/l/r` | 1px 边框（`--wf-border-width` + `--wf-color-border`） |
-| **面工具** | `wf-bg-secondary/tertiary/brand/success/warning/error/info` | 语义背景色（`--wf-color-*-bg`） |
+| **面工具** | `wf-bg-secondary/tertiary/brand/success/warning/error/info`（`wf-bg-primary` 为 brand 别名） | 语义背景色（`--wf-color-*-bg`） |
+| | `wf-elevate` | 抬升阴影（`--wf-shadow-*`） |
+| | `wf-panel-in` | 内凹面板（次级背景 + 内边距） |
 | | `wf-pill` | 胶囊圆角（999px，状态徽章/标签/色块） |
 | | `wf-rounded-sm` `wf-rounded` `wf-rounded-md` `wf-rounded-lg` | 圆角工具（`--wf-radius-*`） |
 | **气泡** | `wf-bubble` / `wf-bubble--own` / `wf-bubble--ai` | 聊天气泡（pre-wrap + 折行内建） |
@@ -84,13 +92,33 @@ app.get('/layout.css', (req, ctx) => ctx.ui.css('weifuwu/layout'))
 | | `wf-main` | 主内容区（padding + min-width: 0） |
 | | `wf-text-*` 排版工具 | 见下文「排版工具」 |
 
+### 组合规则（冲突防线）
+
+原语分两类：**布局身份类**（display/position/flex-direction——stack/row/grid/nav/center/cover/pop…）
+与**叠加工具类**（gap/对齐/显隐——叠加在身份类上）。规则：
+
+1. **同一元素只带一个布局身份类**——两个身份类设置同一属性不同值时 import 顺序定胜负，
+   静默失效（事故例：`wf-nav wf-row` → nav 的 column 胜，横向失效；`wf-grid wf-stack` → stack 胜，网格失效）。
+   `style-audit` 静态扫描 class 组合，命中即红。
+2. **对齐工具可叠加**：`wf-top/right/bottom/stretch/between/around/evenly` 专门用于覆盖
+   `wf-row` 等的默认对齐（后导入获胜，组合合法）。`wf-nowrap` 专门关 `wf-row` 的 wrap。
+3. **`wf-center` 是 column 双轴居中**（不是 justify-center）——要“行内水平居中”用 `wf-cluster`，
+   不要 `wf-row wf-center`（center 的 column 方向会静默覆盖 row）。
+4. **响应式显隐用 `wf-flex@bp` 恢复**：`wf-hidden wf-flex@lg` = 窄隐宽显（flex 容器）。
+   不可用 `wf-block@lg`——block 会覆盖 `wf-stack` 的 display:flex，gap/mt-auto 静默失效。
+5. **容器内角标用 `wf-pop`**（父级 `wf-layer`/`wf-anchor`）；`wf-pin` 是相对视口的 fixed，
+   嵌进带壳页面会覆盖壳。
+
+完整冲突矩阵由 `node scripts/layout-inventory.mjs --json` 生成（属性指纹自动推导）。
+
 ### 排版工具（`wf-text-*`）
 
 | 工具 | 效果 |
 |------|------|
 | `wf-text-left/center/right` | text-align |
 | `wf-text-xs…5xl` | 字号（`--wf-font-size-*`） |
-| `wf-text-secondary/tertiary/disabled/brand` | 中性色阶 |
+| `wf-text-secondary/tertiary/disabled/brand`（`wf-text-primary` 为 brand 别名） | 中性色阶 |
+| `wf-nums` | tabular-nums（数值防宽度抖动） |
 | `wf-text-success/warning/error/info` | 语义色文本（`--wf-color-*`） |
 | `wf-text-medium/semibold/bold` | 字重 |
 | `wf-tracking-normal/wide/wider` | letter-spacing |
@@ -101,7 +129,7 @@ app.get('/layout.css', (req, ctx) => ctx.ui.css('weifuwu/layout'))
 | `wf-truncate` | 单行省略（ellipsis） |
 | `wf-line-clamp-2/3` | 多行截断 |
 
-## 143 个主题 Token
+## 167 个主题 Token
 
 **双层结构**：原始层（Primitive，色值只定义一次，品牌/暗色调校改这里）+ 语义层（Semantic，组件消费）。
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "weifuwu",
   "type": "module",
-  "version": "0.69.0",
+  "version": "0.71.0",
   "description": "AI SaaS framework — (req, ctx) => Response",
   "exports": {
     ".": {