weifuwu 0.94.0 → 0.95.0

package/dist/level5/client/layout/_base.css

@@ -0,0 +1,275 @@
+/* weifuwu/theme — 基础元素默认样式 */
+*,
+*::before,
+*::after {
+  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;
+}
+
+body {
+  margin: 0;
+  background: var(--wf-color-bg);
+  color: var(--wf-color-text);
+  font-family: var(--wf-font-sans);
+  font-size: var(--wf-font-size-base);
+  line-height: var(--wf-line-height);
+  -webkit-font-smoothing: antialiased;
+}
+
+a {
+  color: var(--wf-color-primary-text);
+  text-decoration: none;
+}
+a:hover {
+  color: var(--wf-color-primary-hover);
+  text-decoration: underline;
+}
+
+input,
+textarea,
+select,
+button {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+input,
+textarea,
+select {
+  accent-color: var(--wf-accent-color);
+  caret-color: var(--wf-caret-color);
+  background: var(--wf-color-bg);
+  color: var(--wf-color-text);
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius);
+  padding: var(--wf-control-pad-y) var(--wf-space);
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+  outline: none;
+  box-shadow: var(--wf-focus-ring);
+  border-color: var(--wf-color-primary);
+}
+
+input:disabled,
+textarea:disabled,
+select:disabled,
+button:disabled {
+  opacity: var(--wf-opacity-disabled);
+  cursor: not-allowed;
+}
+
+button {
+  accent-color: var(--wf-accent-color);
+  background: var(--wf-color-bg);
+  color: var(--wf-color-text);
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius);
+  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,
+[tabindex]:focus-visible {
+  outline: none;
+  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,
+  [role="button"],
+  input,
+  textarea,
+  select,
+  .wf-card--clickable,
+  .wf-table-th--sortable,
+  .wf-accordion-summary,
+  .wf-tag-close,
+  .wf-checkbox,
+  .wf-switch,
+  .wf-radio,
+  .wf-datepicker-cell {
+    min-height: 44px;
+    min-width: 44px;
+  }
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: var(--wf-font-weight-semibold);
+  line-height: var(--wf-line-height-tight);
+  color: var(--wf-color-text);
+}
+
+p {
+  line-height: var(--wf-line-height-relaxed);
+}
+
+small {
+  font-size: var(--wf-font-size-sm);
+  color: var(--wf-color-text-tertiary);
+}
+
+label {
+  font-size: var(--wf-font-size-base);
+  font-weight: var(--wf-font-weight-medium);
+  color: var(--wf-color-text);
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th {
+  text-align: left;
+  font-weight: var(--wf-font-weight-medium);
+  font-size: var(--wf-font-size-xs);
+  color: var(--wf-color-text-tertiary);
+  text-transform: var(--wf-heading-case); /* CJK 默认 none，英文可覆盖 uppercase */
+  letter-spacing: var(--wf-heading-tracking);
+  padding: var(--wf-space) var(--wf-space-sm);
+  border-bottom: var(--wf-border-width) solid var(--wf-color-border);
+  background: var(--wf-color-bg-secondary);
+}
+
+td {
+  padding: var(--wf-space) var(--wf-space-sm);
+  border-bottom: var(--wf-border-width) solid var(--wf-color-border);
+  color: var(--wf-color-text);
+  font-size: var(--wf-font-size-base);
+}
+
+hr {
+  border: none;
+  border-top: var(--wf-border-width) solid var(--wf-color-border);
+  margin: var(--wf-space-md) 0;
+}
+
+pre, code {
+  font-family: var(--wf-font-mono);
+  font-size: var(--wf-font-size-sm);
+}
+
+
+pre {
+  background: var(--wf-color-bg-secondary);
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius);
+  padding: var(--wf-space) var(--wf-space-md);
+  overflow-x: auto;
+  white-space: pre;
+}
+
+code {
+  background: var(--wf-color-bg-secondary);
+  padding: 2px 6px;
+  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;
+  }
+}
+
+/* 拖拽中禁用文本选中（useDragDrop 拖拽生命周期标记——Kanban 教训） */
+body.wf-dragging {
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* ── 微流明 · 进行态语言：stream-in 内容渐显（AI 回复/流式列表/hero 元素） ──
+ * 微流明设计语言三支柱之二（docs/client.md §3）——"进行中"是可见的流
+ * 用法：元素加 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; }
+}

package/dist/level5/client/layout/_block.css

@@ -0,0 +1,6 @@
+/* block — 块级显示（display 工具族基类零优先级 :where()——与 flex/hidden 同款：
+ * 族内基类等优先级（源顺序定胜负，仓库零共用组合），@media 变体正常优先级恒胜基类。
+ * 层序（utilities 在 components 之后）保证胜组件自身 display——见 _hidden.css 机制三层 */
+:where(.wf-block) {
+  display: block;
+}

package/dist/level5/client/layout/_border.css

@@ -0,0 +1,7 @@
+/* 边框工具类 — 全部引用 --wf-border-width / --wf-color-border（方向全词） */
+.wf-border { border: var(--wf-border-width) solid var(--wf-color-border); }
+.wf-border-top { border-top: var(--wf-border-width) solid var(--wf-color-border); }
+.wf-border-bottom { border-bottom: var(--wf-border-width) solid var(--wf-color-border); }
+.wf-border-left { border-left: var(--wf-border-width) solid var(--wf-color-border); }
+.wf-border-right { border-right: var(--wf-border-width) solid var(--wf-color-border); }
+.wf-border-none { border: none; }

package/dist/level5/client/layout/_cluster.css

@@ -0,0 +1,11 @@
+/* cluster — 换行簇（L3：justify/align/gap 默认值 :where() 零优先级——
+   wf-justify-end 等分布工具叠加时靠优先级获胜） */
+.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);
+}

package/dist/level5/client/layout/_container.css

@@ -0,0 +1,9 @@
+/* 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));
+}

package/dist/level5/client/layout/_dark.css

@@ -0,0 +1,123 @@
+/* weifuwu/theme — 暗色模式
+ *
+ * 两种激活方式（优先级：显式 data-theme > 系统偏好）：
+ *   1. 手动：<html data-theme="dark">（或 data-theme="light" 强制亮色）
+ *   2. 自动：系统偏好 prefers-color-scheme: dark，无显式覆盖时生效
+ *
+ * 值全部定义在 _tokens.css 原始层的 --wf-dark-*，此处只做语义映射——
+ * 两段代码完全一致，且不含任何硬编码色值（改暗色调校只动原始层）。
+ */
+
+/* ── 激活方式一：手动 data-theme="dark" ── */
+:root[data-theme="dark"] {
+  color-scheme: dark;
+
+  --wf-color-primary: var(--wf-dark-brand-500);
+  --wf-color-primary-hover: var(--wf-dark-brand-600);
+  --wf-color-primary-bg: var(--wf-dark-brand-50);
+
+  --wf-color-success: var(--wf-dark-green-500);
+  --wf-color-success-bg: var(--wf-dark-green-50);
+  --wf-color-warning: var(--wf-dark-amber-500);
+  --wf-color-warning-bg: var(--wf-dark-amber-50);
+  --wf-color-error: var(--wf-dark-red-500);
+  --wf-color-error-bg: var(--wf-dark-red-50);
+  --wf-color-info: var(--wf-dark-sky-500);
+  --wf-color-info-bg: var(--wf-dark-sky-50);
+
+  --wf-color-text: var(--wf-dark-slate-900);
+  --wf-color-text-secondary: var(--wf-dark-slate-500);
+  --wf-color-text-tertiary: var(--wf-dark-slate-400);
+  --wf-color-text-disabled: var(--wf-dark-slate-300);
+
+  --wf-color-bg: var(--wf-dark-bg);
+  --wf-color-bg-secondary: var(--wf-dark-slate-100);
+  --wf-color-bg-tertiary: var(--wf-dark-slate-200);
+  --wf-color-fill: var(--wf-dark-fill);
+  --wf-color-bg-subtle: var(--wf-dark-fill);
+  --wf-color-bg-hover: var(--wf-dark-bg-hover);
+
+  /* 状态层（原始层 --wf-dark-state-* 映射） */
+  --wf-state-hover: var(--wf-dark-state-hover);
+  --wf-state-pressed: var(--wf-dark-state-pressed);
+  /* 浮层面板底色：暗色抬升一级（Material tonal elevation——浮层提亮而非只靠阴影） */
+  --wf-color-bg-elevated: var(--wf-dark-slate-100);
+
+  --wf-color-border: var(--wf-dark-slate-200);
+  --wf-color-border-light: var(--wf-dark-slate-100);
+  --wf-color-border-dark: var(--wf-dark-slate-300);
+
+  --wf-surface-bg: var(--wf-color-bg);
+  --wf-surface-shadow: var(--wf-dark-surface-shadow);
+  --wf-shadow-sm: var(--wf-dark-shadow-sm);
+  --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);
+  --wf-color-warning-text: var(--wf-dark-amber-500);
+  --wf-color-error-text: var(--wf-dark-red-500);
+  --wf-color-info-text: var(--wf-dark-sky-500);
+
+  --wf-overlay: var(--wf-dark-overlay);
+}
+
+/* ── 激活方式二：系统暗色偏好（data-theme="light" 可强制亮色） ── */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    color-scheme: dark;
+
+    --wf-color-primary: var(--wf-dark-brand-500);
+    --wf-color-primary-hover: var(--wf-dark-brand-600);
+    --wf-color-primary-bg: var(--wf-dark-brand-50);
+
+    --wf-color-success: var(--wf-dark-green-500);
+    --wf-color-success-bg: var(--wf-dark-green-50);
+    --wf-color-warning: var(--wf-dark-amber-500);
+    --wf-color-warning-bg: var(--wf-dark-amber-50);
+    --wf-color-error: var(--wf-dark-red-500);
+    --wf-color-error-bg: var(--wf-dark-red-50);
+    --wf-color-info: var(--wf-dark-sky-500);
+    --wf-color-info-bg: var(--wf-dark-sky-50);
+
+    --wf-color-text: var(--wf-dark-slate-900);
+    --wf-color-text-secondary: var(--wf-dark-slate-500);
+    --wf-color-text-tertiary: var(--wf-dark-slate-400);
+    --wf-color-text-disabled: var(--wf-dark-slate-300);
+
+    --wf-color-bg: var(--wf-dark-bg);
+    --wf-color-bg-secondary: var(--wf-dark-slate-100);
+    --wf-color-bg-tertiary: var(--wf-dark-slate-200);
+    --wf-color-fill: var(--wf-dark-fill);
+    --wf-color-bg-subtle: var(--wf-dark-fill);
+    --wf-color-bg-hover: var(--wf-dark-bg-hover);
+
+    /* 状态层（原始层 --wf-dark-state-* 映射） */
+    --wf-state-hover: var(--wf-dark-state-hover);
+    --wf-state-pressed: var(--wf-dark-state-pressed);
+    /* 浮层面板底色：暗色抬升一级（Material tonal elevation——浮层提亮而非只靠阴影） */
+    --wf-color-bg-elevated: var(--wf-dark-slate-100);
+
+    --wf-color-border: var(--wf-dark-slate-200);
+    --wf-color-border-light: var(--wf-dark-slate-100);
+    --wf-color-border-dark: var(--wf-dark-slate-300);
+
+    --wf-surface-bg: var(--wf-color-bg);
+    --wf-surface-shadow: var(--wf-dark-surface-shadow);
+    --wf-shadow-sm: var(--wf-dark-shadow-sm);
+    --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);
+    --wf-color-warning-text: var(--wf-dark-amber-500);
+    --wf-color-error-text: var(--wf-dark-red-500);
+    --wf-color-info-text: var(--wf-dark-sky-500);
+
+    --wf-overlay: var(--wf-dark-overlay);
+  }
+}

package/dist/level5/client/layout/_flex.css

@@ -0,0 +1,15 @@
+/* flex — 弹性盒 display 工具（补全 display 族：block/hidden/flex）
+ * 核心场景：响应式显隐的 flex 容器——`wf-hidden wf-flex@lg`（窄隐宽显且保持 flex 布局）。
+ * 不可用 wf-block@lg 替代：block 会覆盖 wf-stack 的 display:flex，
+ * 致 flex-direction/gap 全部静默失效（layouts-demo 侧栏 mt-auto 实测踩坑）。
+ *
+ * 基类零优先级 `:where()` + 变体正常优先级（LAYOUT-PLAN W2——display 族三基类同款）：
+ * 变体恒胜基类（与文件顺序无关）→ `wf-hidden wf-flex@sm` 窄隐宽显成立（旧：_hidden 在
+ * _flex 之后，等 specificity 下 hidden 恒胜 → 该组合当时是坏的，agent-platform
+ * Chat.tsx「部门详情」按钮实证——移动端该隐未隐）。
+ * 注意：@ 选择器必须转义（\.wf-flex\@lg——未转义 @ 是非法选择器，整条规则被丢弃） */
+:where(.wf-flex) {
+  display: flex;
+}
+@media (min-width: 640px) { .wf-flex\@sm { display: flex; } }
+@media (min-width: 1024px) { .wf-flex\@lg { display: flex; } }

package/dist/level5/client/layout/_hidden.css

@@ -0,0 +1,27 @@
+/* hidden — 隐藏元素（display 工具族：基类零优先级 :where()——变体恒胜基类，零 !important）
+ *
+ * 两种响应式组合都成立（LAYOUT-PLAN W2 浏览器实证）：
+ *   `wf-hidden wf-flex@lg`（窄隐宽显）· `wf-flex wf-hidden@lg`（宽隐窄显）
+ *
+ * 机制三层（旧 !important 变通的根因逐条消除）：
+ *   ① **层序**：utilities 在 components 之后（bundle.ts LAYER_ORDER）→ 工具类胜组件自身
+ *      display。旧序（utilities 在 components 之前）下 `.wf-btn` 的 `inline-flex` 无条件
+ *      压过 hidden——面板按钮桌面隐藏失效实证（CHAT-UX 波次 2 L4），当时只能 !important。
+ *   ② **基类零优先级**：`:where(.wf-hidden)` specificity = 0（同 `:where(.wf-stack)` 的
+ *      gap/align 机制）——层内不再靠文件顺序定胜负。
+ *   ③ **变体正常优先级**：`@media` 内 `.wf-hidden\@lg` = (0,1,0) → 恒胜任意基类
+ *      （与 _flex.css 的先后无关——旧注释声称「基础类被 media 内 wf-flex@lg 覆盖」
+ *       在等 specificity 下其实由文件顺序决定，_hidden 在后 → 组合当时是坏的）。
+ * 层序优先于 specificity：unlayered 应用 CSS（如 app.css）仍胜本层——应用覆盖面不变。 */
+:where(.wf-hidden) {
+  display: none;
+}
+@media (min-width: 1024px) { .wf-hidden\@lg { display: none; } }
+
+/* dim — 视觉淡化（运行中/历史态/次要操作） */
+.wf-dim {
+  opacity: 0.7;
+}
+
+/* cursor — 交互指针（裸值词） */
+.wf-pointer { cursor: pointer; }

package/dist/level5/client/layout/_layer.css

@@ -0,0 +1,5 @@
+/* layer — 层级控制 */
+.wf-layer {
+  position: relative;
+  z-index: var(--wf-z, 1);
+}

package/dist/level5/client/layout/_nowrap.css

@@ -0,0 +1,10 @@
+/* nowrap — 不换行（只管 flex-wrap——不定义 align-items，避免与
+   wf-items-* 对齐工具叠加冲突：双份 CSS 下 nowrap 后置曾覆盖 stretch；
+   L3：gap 默认值 :where() 零优先级） */
+.wf-nowrap {
+  display: flex;
+  flex-wrap: nowrap;
+}
+:where(.wf-nowrap) {
+  gap: var(--wf-gap, var(--wf-gap-md));
+}

package/dist/level5/client/layout/_overflow.css

@@ -0,0 +1,4 @@
+/* overflow — 溢出控制（属性根 + CSS 值词；全局滚动条样式见 _base.css） */
+.wf-overflow-auto { overflow: auto; }
+.wf-overflow-hidden { overflow: hidden; }
+.wf-overflow-x { overflow-x: auto; }

package/dist/level5/client/layout/_popup.css

@@ -0,0 +1,18 @@
+/* popup — 浮层基类（usePopup.portal 自动附加；Modal/Drawer 等手动浮层可选用）
+ *
+ * 宽度视口 clamp：任何浮层默认不横向溢出（375px 屏也能完整操作）。
+ * usePopup 已内联 maxWidth；本类兜底组件手动引用场景（audit 规则的目标选择器）。
+ */
+.wf-popup {
+  max-width: min(var(--wf-popup-max, 480px), calc(100vw - 32px));
+  box-sizing: border-box;
+}
+
+/* usePopup mask 模式遮罩：全屏 fixed，z-index 低于面板（overlay=80 < popover=120），
+ * 模态语义阻断页面交互；点击遮罩关闭（maskClosable 门控在组件层） */
+.wf-popup-mask {
+  position: fixed;
+  inset: 0;
+  z-index: var(--wf-z-overlay);
+  background: var(--wf-overlay);
+}

package/dist/level5/client/layout/_position.css

@@ -0,0 +1,5 @@
+/* position — 定位工具（属性名即类名——wf-relative + wf-absolute 是 CSS
+   用户的零学习配对：容器 wf-relative，角标/覆盖层子项 wf-absolute。
+   fixed 视口覆盖用组合原语 wf-cover；sticky 用 wf-sticky） */
+.wf-relative { position: relative; }
+.wf-absolute { position: absolute; }

package/dist/level5/client/layout/_presets.css

@@ -0,0 +1,48 @@
+/* weifuwu/theme — 预设主题（shadcn themes.css 式变量组切换）
+ *
+ * 用法：<html data-preset="minimal|compact|rounded">
+ * 与暗色 data-theme 正交（可组合：data-theme="dark" data-preset="compact"）。
+ * 每组只覆写该预设语义涉及的 token 子集——**派生 token 不必覆写**（如 gap 六档 var() 派生自
+ * space：compact 只改 space 即自动跟随）。旧注释称「必须补齐全套（audit 强制）」——实证无此
+ * audit（W4 修正为事实：一致性由 layout-inventory L13 派生登记守卫）。
+ *
+ * 预设语义：
+ *   minimal  品牌弱化——中性蓝灰主色（适合内容/文档型产品，Geist 式克制）
+ *   compact  紧凑密度——控件/间距/字号缩一档（数据密集型工具，专业感）
+ *   rounded  大圆角——radius 全升一档 + 按钮胶囊（亲和/消费型产品）
+ */
+:root[data-preset="minimal"] {
+  /* 品牌：中性蓝灰（seed 派生色阶自动跟随——50/600/700 不必手改） */
+  --wf-brand-seed: #64748b;
+  --wf-dark-brand-seed: #94a3b8;
+}
+
+:root[data-preset="compact"] {
+  /* 控件尺寸 */
+  --wf-control-height: 32px;
+  --wf-control-pad-y: 6px;
+  /* 间距标尺缩一档（布局原语/工具类同步生效）——只覆写 space：gap 六档 var() 派生自动跟随 */
+  --wf-space-xs: 3px;
+  --wf-space-sm: 6px;
+  --wf-space: 9px;
+  --wf-space-md: 12px;
+  --wf-space-lg: 18px;
+  --wf-space-xl: 24px;
+  --wf-space-2xl: 30px;
+  /* 正文字号缩一档（数据密度） */
+  --wf-font-size-sm: 12px;
+  --wf-font-size-base: 13px;
+}
+
+:root[data-preset="rounded"] {
+  /* 圆角标尺全升一档 */
+  --wf-radius-sm: 8px;
+  --wf-radius: 12px;
+  --wf-radius-md: 16px;
+  --wf-radius-lg: 20px;
+  --wf-radius-xl: 28px;
+  --wf-surface-radius: var(--wf-radius-md);
+  /* 组件钩子跟随（按钮胶囊、字段大圆角） */
+  --wf-btn-radius: 999px;
+  --wf-field-radius: var(--wf-radius-md);
+}

package/dist/level5/client/layout/_props.css

@@ -0,0 +1,26 @@
+/* weifuwu/layout — 变量钩子注册（@property——LAYOUT-PLAN W2）
+ *
+ * 钩子 = 原语/工具的**元素级入参**（`style="--wf-gap:20px"`）——消费侧内联 49 处实证
+ * （apps + 组件）。旧行为：自定义属性默认 `inherits: true` → 外层钩子污染全部子孙原语
+ * （探针实证：外层 `--wf-gap:20px` → 内层 `.wf-stack` gap = 20px，应回落自身默认 12px），
+ * 而 `_spacing.css` 的 `wf-gap-*` 工具类因此**不敢**设该变量（注释实录：壳 root
+ * `wf-gap-none` 曾让 KPI grid 的 `gap: var(--wf-gap)` = 0——卡无间距事故）。
+ *
+ * `inherits: false` 后（探针实证）：钩子只作用于设置它的元素——每个原语**自己的回退值保留**
+ * （stack 12px / grid 16px / cluster 8px / container 16px），污染归零。
+ * `syntax: '*'` 且不写 initial-value → 未设置时是 guaranteed-invalid → `var()` 回退生效
+ * （若写死 initial-value 会吃掉各原语不同的回退值——grid 16→12 类静默视觉漂移）。
+ *
+ * 边界：**组件钩子不在此注册**（`--wf-card-radius`/`--wf-btn-pad-y` 等是主题面——
+ * 设计上就要从 `:root`/包裹层继承下来）。这里只注册 layout 的元素级钩子。
+ * 渐进增强：不支持 @property 的浏览器（Safari <16.4 / Firefox <128）保持旧继承行为。
+ */
+@property --wf-gap { syntax: '*'; inherits: false; }        /* 原语间距（stack/row/grid/cluster/split/justify/nowrap/container） */
+@property --wf-align { syntax: '*'; inherits: false; }      /* 交叉轴对齐（wf-items-* 生产——row/stack/cluster/split/justify 消费） */
+@property --wf-justify { syntax: '*'; inherits: false; }    /* 主轴分布（cluster） */
+@property --wf-cols { syntax: '*'; inherits: false; }       /* grid 列模板（grid） */
+@property --wf-max { syntax: '*'; inherits: false; }        /* 容器最大宽（container） */
+@property --wf-w-sm { syntax: '*'; inherits: false; }       /* 宽度档位（width-sm——旧为幽灵 token：引用无声明） */
+@property --wf-z { syntax: '*'; inherits: false; }          /* 层叠序号（cover/layer） */
+@property --wf-offset { syntax: '*'; inherits: false; }     /* 粘性偏移（sticky） */
+@property --wf-popup-max { syntax: '*'; inherits: false; }  /* 浮层最大宽（框架内部 popup） */

package/dist/level5/client/layout/_safe-area.css

@@ -0,0 +1,7 @@
+/* safe-area — iOS 刘海屏/Home 条安全区工具（env() 未生效环境自动为 0） */
+.wf-safe-bottom {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+.wf-safe-top {
+  padding-top: env(safe-area-inset-top);
+}

package/dist/level5/client/layout/_shrink.css

@@ -0,0 +1,11 @@
+/* min — flex 子项可收缩约束（flex 收缩坑标配：默认 min-width/height: auto
+   会阻止子项收缩——内容溢出/撑破布局时加这类） */
+.wf-shrink {
+  min-width: 0;
+  min-height: 0;
+}
+
+/* 单边版本（只需横向收缩的场景——属性名即类名） */
+.wf-min-width-0 {
+  min-width: 0;
+}