weifuwu 0.92.0 → 0.93.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +1 -1
  2. package/dist/client/components/style.css +1 -12219
  3. package/dist/client/layout/bundle.d.ts +42 -0
  4. package/dist/client/layout/weifuwu-layout.css +1 -1495
  5. package/dist/server/index.js +183 -68
  6. package/docs/client.md +69 -7
  7. package/docs/layout.md +243 -0
  8. package/package.json +1 -1
package/docs/layout.md ADDED
@@ -0,0 +1,243 @@
1
+ # weifuwu/layout 参考
2
+
3
+ > **机器生成**（`scripts/layout-reference.mjs`）——勿手改：改布局源码后跑 `node scripts/layout-reference.mjs`。
4
+ > 单源校对：类清单 = `layout-inventory.mjs inventory()` · 层序 = `bundle.ts LAYER_ORDER` ·
5
+ > 钩子 = `_props.css @property` · 标尺/断点 = `_tokens.css`。计数口径与 README/`docs/client.md` 全等（L6 哨兵）。
6
+
7
+ ## 1. 层叠与覆盖规则（L9 机制锁定）
8
+
9
+ - **层序**：@layer `tokens, base, layout, components, utilities`——工具类在 components 之后 = 消费侧显式覆盖恒胜组件样式（旧序相反——W2 修正）
10
+ - **display 族基类**（wf-block/wf-flex/wf-hidden）`:where()` 零优先级——断点变体（@sm/@lg）正常优先级 → 变体恒胜基类（跨文件亦然）
11
+ - **`!important` 白名单**：仅 `prefers-reduced-motion`（无障碍强制）——其余位置禁（变体靠 specificity 胜出）
12
+ - **变量钩子**：`@property inherits:false`（W2）——外层内联赋值不污染子孙原语；syntax `*` 且不写 initial-value（保各原语不同回退值）
13
+
14
+ ## 2. 断点（`--wf-bp-*` = 媒体查询白名单单源——L10）
15
+
16
+ | 档 | 值 | 合法媒体查询字面量 |
17
+ | --- | --- | --- |
18
+ | `--wf-bp-sm` | `640px` | `min-width:640px` / `max-width:639.98px` |
19
+ | `--wf-bp-md` | `768px` | `min-width:768px` / `max-width:767.98px` |
20
+ | `--wf-bp-lg` | `1024px` | `min-width:1024px` / `max-width:1023.98px` |
21
+ | `--wf-bp-xl` | `1280px` | `min-width:1280px` / `max-width:1279.98px` |
22
+
23
+ ## 3. 变量钩子（内联覆盖面——`@property` 注册 9 条）
24
+
25
+ | 钩子 | 回退值（layout 内首个消费） | 说明 |
26
+ | --- | --- | --- |
27
+ | `--wf-gap` | `（无回退——必填钩子）` | 容器间距默认（stack/row/cluster/grid 原语共用） |
28
+ | `--wf-align` | `（无回退——必填钩子）` | 对齐默认（cross-axis） |
29
+ | `--wf-justify` | `（无回退——必填钩子）` | 主轴对齐默认 |
30
+ | `--wf-cols` | `（无回退——必填钩子）` | grid 列模板（grid 原语） |
31
+ | `--wf-max` | `（无回退——必填钩子）` | 容器最大宽（container 原语） |
32
+ | `--wf-w-sm` | `（无回退——必填钩子）` | width-sm 工具类默认 |
33
+ | `--wf-z` | `（无回退——必填钩子）` | z 档位默认 |
34
+ | `--wf-offset` | `（无回退——必填钩子）` | sticky 偏移 |
35
+ | `--wf-popup-max` | `（无回退——必填钩子）` | 弹层最大宽（popup 原语） |
36
+
37
+ ## 4. 类清单（inventory 全量——含状态修饰与断点变体）
38
+
39
+ ### 原语（50）
40
+
41
+ | 类 | 文件 | 声明摘要 | 断点变体 | 状态修饰 |
42
+ | --- | --- | --- | --- | --- |
43
+ | `wf-absolute` | _position.css | position · position:absolute | — | — |
44
+ | `wf-app-shell` | _app-shell.css | display · grid-template-columns · height · overflow · display:grid · overflow:visible | — | — |
45
+ | `wf-block` | _block.css | display · display:block | — | — |
46
+ | `wf-center` | _center.css | align-items · display · flex-direction · justify-content · display:flex · flex-direction:column · align-items:… | — | — |
47
+ | `wf-cluster` | _cluster.css | align-items · display · flex-wrap · gap · justify-content · display:flex · flex-wrap:wrap · justify-content:va… | — | — |
48
+ | `wf-container` | _container.css | margin · max-width · padding · width | — | — |
49
+ | `wf-cover` | _cover.css | align-items · display · inset · justify-content · position · z-index · position:fixed · display:flex · align-i… | — | — |
50
+ | `wf-dim` | _hidden.css | opacity | — | — |
51
+ | `wf-fill` | _fill.css | flex · min-height · min-width · flex:1 | — | — |
52
+ | `wf-fill-hover` | _fill.css | background · border-radius · margin · padding · transition | — | — |
53
+ | `wf-flex` | _flex.css | display · display:flex | @@lg @@sm | — |
54
+ | `wf-grid` | _grid.css | display · gap · grid-template-columns · display:grid | — | — |
55
+ | `wf-hidden` | _hidden.css | display · display:none | @@lg | — |
56
+ | `wf-items-center` | _row.css | | — | — |
57
+ | `wf-items-end` | _row.css | | — | — |
58
+ | `wf-items-start` | _row.css | | — | — |
59
+ | `wf-items-stretch` | _row.css | | — | — |
60
+ | `wf-justify-between` | _justify.css | align-items · display · gap · justify-content · display:flex · justify-content:space-between · align-items:var… | — | — |
61
+ | `wf-justify-center` | _justify.css | align-items · display · gap · justify-content · display:flex · justify-content:center · align-items:var(--wf-a… | — | — |
62
+ | `wf-justify-end` | _justify.css | align-items · display · gap · justify-content · display:flex · justify-content:flex-end · align-items:var(--wf… | — | — |
63
+ | `wf-layer` | _layer.css | position · z-index · position:relative | — | — |
64
+ | `wf-main` | _app-shell.css | background · margin-inline · max-width · min-height · min-width · overflow · overflow-y · padding · overflow:v… | — | — |
65
+ | `wf-min-width-0` | _shrink.css | min-width | — | — |
66
+ | `wf-nav` | _app-shell.css | display · flex-direction · gap · display:flex · flex-direction:column | — | `wf-nav--collapsed` |
67
+ | `wf-nav--collapsed` | _app-shell.css | （基类 `wf-nav` 的状态修饰） | | |
68
+ | `wf-nav-group` | _app-shell.css | color · font-size · font-weight · letter-spacing · padding · text-transform | — | — |
69
+ | `wf-nav-item` | _app-shell.css | align-items · background · border · border-radius · box-shadow · color · cursor · display · font-family · font… | — | `wf-nav-item--active` |
70
+ | `wf-nav-item--active` | _app-shell.css | （基类 `wf-nav-item` 的状态修饰） | | |
71
+ | `wf-nowrap` | _nowrap.css | display · flex-wrap · gap · display:flex · flex-wrap:nowrap | — | — |
72
+ | `wf-overflow-auto` | _overflow.css | overflow · overflow:auto | — | — |
73
+ | `wf-overflow-hidden` | _overflow.css | overflow · overflow:hidden | — | — |
74
+ | `wf-overflow-x` | _overflow.css | overflow-x | — | — |
75
+ | `wf-pointer` | _hidden.css | cursor | — | — |
76
+ | `wf-relative` | _position.css | position · position:relative | — | — |
77
+ | `wf-row` | _row.css | align-items · display · flex-wrap · gap · display:flex · flex-wrap:wrap · align-items:var(--wf-align, center) | — | — |
78
+ | `wf-row-reverse` | _row.css | align-items · display · flex-direction · flex-wrap · gap · display:flex · flex-direction:row-reverse · flex-wr… | — | — |
79
+ | `wf-safe-bottom` | _safe-area.css | padding-bottom | — | — |
80
+ | `wf-safe-top` | _safe-area.css | padding-top | — | — |
81
+ | `wf-self-center` | _align-self.css | align-self | — | — |
82
+ | `wf-self-end` | _align-self.css | align-self | — | — |
83
+ | `wf-self-start` | _align-self.css | align-self | — | — |
84
+ | `wf-self-stretch` | _align-self.css | align-self | — | — |
85
+ | `wf-shrink` | _shrink.css | min-height · min-width | — | — |
86
+ | `wf-sidebar` | _app-shell.css | background · border-bottom · border-right · display · flex-direction · height · overflow-y · position · top · … | — | — |
87
+ | `wf-sidebar-body` | _app-shell.css | flex · overflow-y · padding · flex:1 | — | — |
88
+ | `wf-sidebar-footer` | _app-shell.css | border-top · flex-shrink · padding | — | — |
89
+ | `wf-sidebar-header` | _app-shell.css | align-items · border-bottom · display · flex-shrink · gap · padding · display:flex · align-items:center | — | — |
90
+ | `wf-split` | _split.css | align-items · display · flex-shrink · gap · justify-content · display:flex · justify-content:space-between · a… | — | — |
91
+ | `wf-stack` | _stack.css | align-items · display · flex-direction · gap · display:flex · flex-direction:column · align-items:var(--wf-ali… | — | — |
92
+ | `wf-sticky` | _sticky.css | position · top · position:sticky | — | — |
93
+
94
+ ### 工具（98）
95
+
96
+ | 类 | 文件 | 声明摘要 | 断点变体 | 状态修饰 |
97
+ | --- | --- | --- | --- | --- |
98
+ | `wf-bg-error` | _surface.css | background | — | — |
99
+ | `wf-bg-none` | _surface.css | background | — | — |
100
+ | `wf-bg-primary` | _surface.css | background | — | — |
101
+ | `wf-bg-secondary` | _surface.css | background | — | — |
102
+ | `wf-bg-tertiary` | _surface.css | background | — | — |
103
+ | `wf-bg-warning` | _surface.css | background | — | — |
104
+ | `wf-bold` | _text.css | font-weight | — | — |
105
+ | `wf-border` | _border.css | border | — | — |
106
+ | `wf-border-bottom` | _border.css | border-bottom | — | — |
107
+ | `wf-border-left` | _border.css | border-left | — | — |
108
+ | `wf-border-none` | _border.css | border | — | — |
109
+ | `wf-border-right` | _border.css | border-right | — | — |
110
+ | `wf-border-top` | _border.css | border-top | — | — |
111
+ | `wf-break-word` | _text.css | overflow-wrap · word-break | — | — |
112
+ | `wf-bubble` | _surface.css | background · border-radius · color · display · font-size · line-height · max-width · padding · white-space · w… | — | `wf-bubble--ai` `wf-bubble--own` |
113
+ | `wf-bubble--ai` | _surface.css | （基类 `wf-bubble` 的状态修饰） | | |
114
+ | `wf-bubble--own` | _surface.css | （基类 `wf-bubble` 的状态修饰） | | |
115
+ | `wf-card-outline` | _surface.css | border | — | — |
116
+ | `wf-elevate` | _surface.css | box-shadow · outline · transform · transition | — | — |
117
+ | `wf-font-2xl` | _text.css | font-size | — | — |
118
+ | `wf-font-3xl` | _text.css | font-size | — | — |
119
+ | `wf-font-4xl` | _text.css | font-size | — | — |
120
+ | `wf-font-base` | _text.css | font-size | — | — |
121
+ | `wf-font-lg` | _text.css | font-size | — | — |
122
+ | `wf-font-mono` | _text.css | font-family | — | — |
123
+ | `wf-font-sm` | _text.css | font-size | — | — |
124
+ | `wf-font-xs` | _text.css | font-size | — | — |
125
+ | `wf-gap-lg` | _spacing.css | gap | — | — |
126
+ | `wf-gap-md` | _spacing.css | gap | — | — |
127
+ | `wf-gap-none` | _spacing.css | gap | — | — |
128
+ | `wf-gap-sm` | _spacing.css | gap | — | — |
129
+ | `wf-gap-xl` | _spacing.css | gap | — | — |
130
+ | `wf-gap-xs` | _spacing.css | gap | — | — |
131
+ | `wf-height-full` | _spacing.css | height | — | — |
132
+ | `wf-margin-bottom-lg` | _spacing.css | margin-bottom | — | — |
133
+ | `wf-margin-bottom-md` | _spacing.css | margin-bottom | — | — |
134
+ | `wf-margin-bottom-sm` | _spacing.css | margin-bottom | — | — |
135
+ | `wf-margin-bottom-xs` | _spacing.css | margin-bottom | — | — |
136
+ | `wf-margin-left-sm` | _spacing.css | margin-left | — | — |
137
+ | `wf-margin-left-xs` | _spacing.css | margin-left | — | — |
138
+ | `wf-margin-none` | _spacing.css | margin | — | — |
139
+ | `wf-margin-top-md` | _spacing.css | margin-top | — | — |
140
+ | `wf-margin-top-none` | _spacing.css | margin-top | — | — |
141
+ | `wf-margin-top-sm` | _spacing.css | margin-top | — | — |
142
+ | `wf-margin-top-xs` | _spacing.css | margin-top | — | — |
143
+ | `wf-margin-x-auto` | _spacing.css | margin-left · margin-right | — | — |
144
+ | `wf-margin-y-xs` | _spacing.css | margin-bottom · margin-top | — | — |
145
+ | `wf-medium` | _text.css | font-weight | — | — |
146
+ | `wf-nums` | _text.css | font-variant-numeric | — | — |
147
+ | `wf-padding-bottom-md` | _spacing.css | padding-bottom | — | — |
148
+ | `wf-padding-bottom-sm` | _spacing.css | padding-bottom | — | — |
149
+ | `wf-padding-bottom-xs` | _spacing.css | padding-bottom | — | — |
150
+ | `wf-padding-left-sm` | _spacing.css | padding-left | — | — |
151
+ | `wf-padding-lg` | _spacing.css | padding | — | — |
152
+ | `wf-padding-md` | _spacing.css | padding | — | — |
153
+ | `wf-padding-none` | _spacing.css | padding | — | — |
154
+ | `wf-padding-sm` | _spacing.css | padding | — | — |
155
+ | `wf-padding-top-sm` | _spacing.css | padding-top | — | — |
156
+ | `wf-padding-x-md` | _spacing.css | padding-left · padding-right | — | — |
157
+ | `wf-padding-x-sm` | _spacing.css | padding-left · padding-right | — | — |
158
+ | `wf-padding-x-xs` | _spacing.css | padding-left · padding-right | — | — |
159
+ | `wf-padding-xl` | _spacing.css | padding | — | — |
160
+ | `wf-padding-xs` | _spacing.css | padding | — | — |
161
+ | `wf-padding-y-lg` | _spacing.css | padding-bottom · padding-top | — | — |
162
+ | `wf-padding-y-md` | _spacing.css | padding-bottom · padding-top | — | — |
163
+ | `wf-padding-y-sm` | _spacing.css | padding-bottom · padding-top | — | — |
164
+ | `wf-padding-y-xs` | _spacing.css | padding-bottom · padding-top | — | — |
165
+ | `wf-panel-in` | _surface.css | animation · transform-origin | — | — |
166
+ | `wf-pill` | _surface.css | border-radius | — | — |
167
+ | `wf-pre-wrap` | _text.css | white-space · word-break | — | — |
168
+ | `wf-radius` | _surface.css | border-radius | — | — |
169
+ | `wf-radius-lg` | _surface.css | border-radius | — | — |
170
+ | `wf-radius-md` | _surface.css | border-radius | — | — |
171
+ | `wf-radius-sm` | _surface.css | border-radius | — | — |
172
+ | `wf-rounded-md` | _surface.css | border-radius | — | — |
173
+ | `wf-rounded-sm` | _surface.css | border-radius | — | — |
174
+ | `wf-semibold` | _text.css | font-weight | — | — |
175
+ | `wf-shadow` | _surface.css | box-shadow | — | — |
176
+ | `wf-surface` | _surface.css | background · border-radius · box-shadow | — | `wf-surface--flat` |
177
+ | `wf-surface--flat` | _surface.css | （基类 `wf-surface` 的状态修饰） | | |
178
+ | `wf-text-center` | _text.css | text-align | — | — |
179
+ | `wf-text-danger` | _text.css | color | — | — |
180
+ | `wf-text-error` | _text.css | color | — | — |
181
+ | `wf-text-left` | _text.css | text-align | — | — |
182
+ | `wf-text-nowrap` | _text.css | white-space | — | — |
183
+ | `wf-text-on-brand` | _text.css | color | — | — |
184
+ | `wf-text-on-warning` | _text.css | color | — | — |
185
+ | `wf-text-primary` | _text.css | color | — | — |
186
+ | `wf-text-right` | _text.css | text-align | — | — |
187
+ | `wf-text-secondary` | _text.css | color | — | — |
188
+ | `wf-text-success` | _text.css | color | — | — |
189
+ | `wf-text-tertiary` | _text.css | color | — | — |
190
+ | `wf-text-warning` | _text.css | color | — | — |
191
+ | `wf-tracking-wide` | _text.css | letter-spacing | — | — |
192
+ | `wf-truncate` | _text.css | overflow · text-overflow · white-space · overflow:hidden | — | — |
193
+ | `wf-uppercase` | _text.css | text-transform | — | — |
194
+ | `wf-width-full` | _spacing.css | width | — | — |
195
+ | `wf-width-sm` | _spacing.css | width | — | — |
196
+
197
+ ### 内部（2）
198
+
199
+ | 类 | 文件 | 声明摘要 | 断点变体 | 状态修饰 |
200
+ | --- | --- | --- | --- | --- |
201
+ | `wf-popup` | _popup.css | box-sizing · max-width | — | — |
202
+ | `wf-popup-mask` | _popup.css | background · inset · position · z-index · position:fixed | — | — |
203
+
204
+ ## 5. 间距标尺（双标尺定案——L13：gap 派生自 space 紧一档）
205
+
206
+ | 档 | space（内/外边距） | gap（容器内间距——派生） | 关系 |
207
+ | --- | --- | --- | --- |
208
+ | — | `--wf-space` = `12px` | `--wf-gap-md = var(--wf-space)` | 裸档即 md 档源 |
209
+ | xs | `4px` | `var(--wf-space-xs)` | gap 比 space 紧一档 |
210
+ | sm | `8px` | `var(--wf-space-sm)` | gap 比 space 紧一档 |
211
+ | md | `16px` | `var(--wf-space(裸))` | gap 比 space 紧一档 |
212
+ | lg | `24px` | `var(--wf-space-md)` | gap 比 space 紧一档 |
213
+ | xl | `32px` | `var(--wf-space-lg)` | gap 比 space 紧一档 |
214
+ | 2xl | `40px` | `var(--wf-space-xl)` | gap 比 space 紧一档 |
215
+
216
+ > 关系入代码：预设（compact）只覆写 space 标尺——gap 自动跟随；值冻结由 L13 守卫。
217
+
218
+ ## 6. 零消费公共面（文档化定案——「示例 = 可发现」，不做裁剪）
219
+
220
+ 以下类在代码语料（apps + src/client/components）零引用——属 weifuwu/layout npm 公共清单，
221
+ 退出消费或库侧裁剪时才移除（登记单源：`layout-inventory.mjs` QUARTET_KEEP / LIB_SURFACE_KEEP）；
222
+ 现文档化（示例 = 可发现）：
223
+
224
+ - `wf-absolute`：定位：`<div class="wf-absolute wf-inset-0">`（绝对定位铺满——需 position 上下文）
225
+ - `wf-cover`：媒体覆盖：`<div class="wf-cover"><img /></div>`（绝对定位全铺容器）
226
+ - `wf-layer`：层叠原语：`<div class="wf-layer wf-z-pop">`（相对定位层，按 z 叠放）
227
+ - `wf-nav`：导航条：`<nav class="wf-nav"><a class="wf-nav-item">…`（横向导航——内部项自带命中区）
228
+ - `wf-nav-group`：导航分组：`<div class="wf-nav-group">`（导航项分组容器/标签）
229
+ - `wf-radius-lg`：圆角档：`class="wf-radius-lg"`（大圆角——不在半径标尺逐档之外的独立值）
230
+ - `wf-safe-bottom`：底部安全区：`class="wf-safe-bottom"`（env(safe-area-inset-bottom)——iOS 底部）
231
+ - `wf-safe-top`：顶部安全区：`class="wf-safe-top"`（env(safe-area-inset-top)——刘海屏）
232
+ - `wf-self-start`：cross-axis 单项定位：`class="wf-self-start"`（align-self: flex-start——与 wf-self-stretch 同族）
233
+
234
+ > showcase 演示页私有类（`wf-variant-toggle/chevron/name/desc`——页面上下文定义，非库面）不计入。
235
+
236
+ ## 7. 计数速览（L1/L6 哨兵口径）
237
+
238
+ | 面 | 数量 |
239
+ | --- | --- |
240
+ | 布局原语 | 50 |
241
+ | 工具类 | 98 |
242
+ | 内部类 | 2 |
243
+ | 主题 token | 178 |
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "weifuwu",
3
3
  "type": "module",
4
- "version": "0.92.0",
4
+ "version": "0.93.0",
5
5
  "description": "AI SaaS full-stack framework — backend HTTP + frontend VDOM + 129 components + CSS design system + SaaS foundation (auth/queue/AI). Zero-build, zero-dependency.",
6
6
  "exports": {
7
7
  ".": {