@manohub/ui 0.9.0 → 0.10.0

package/dist/styles/reset.css

@@ -1,70 +1,81 @@
 /**
- * 基础重置（reset）—— 元素级基线，随 `@manohub/ui/styles.css` 一起到达消费方。
+ * 元素级基线 —— 随 `@manohub/ui/styles.css` 一起到达消费方（该入口的**首条 import**）。
  *
- * ## 为什么基线归本包
+ * ## 它现在只有两面
  *
- * 接入契约（`@manohub/kit/CONTRACT.md` §3）禁应用侧写裸元素选择器与字号字面量，
- * 于是「把浏览器默认值归零」在应用侧**没有合规落点**：0.6.0 之前它寄在入口层的
- * `reset.css` 里，随入口层零样式化一并删除后就成了缺口（契约 §10 记在案）。
- * 本包是样式面（② 面层）的唯一来源，元素基线因此归这里 —— 位于「值」之后、「面」之前。
+ * 1. **盒模型**：`box-sizing: border-box` 覆盖容器、全部后代与伪元素
+ *    —— 本库所有面的几何都按 border-box 写盒高与内距，这条一丢，全库尺寸集体走样。
+ * 2. **容器基座**：`[data-manohub-ui]` 上的字族 / 字号 / 行高 / 字色 / 底色 / 整链高度与抗锯齿。
+ *    它是令牌的落点（`@manohub/theme` 的全局令牌与各件的 `<件>.tokens.css` 都锚这个属性），
+ *    也是本文件唯一一条**描述容器自身、不涉及后代**、因此不带 `:where()` 的规则。
  *
- * ## 参照口径
+ * 除这两面之外**一条都不留**（2026-09 瘦身）。理由与去向见下面两节。
  *
- * 主体对齐 **Tailwind Preflight**（消费方 `apps/<app>/src/style.css` 一直在引的那份）：
- * 覆盖的元素清单一致，**唯一的有意差异是表单控件的底色** —— Preflight 把 `input` / `select` /
- * `textarea` 也清成透明，本文件保留浏览器原生底色（裸输入框若连底都没有就完全不可见）；
- * 挂类的控件（`.mh-input` 等）有自己的面，不受这条影响。本包组件面本来就是按「已清零」的环境写的 ——
- * 全部 33 处挂类的 `<button>` 合并后都自带 border / background / padding ——
- * 所以本文件**不改变任何组件的外观**；它的作用是：
+ * ## 为什么删：未分层 > 分层（不是特异性问题）
  *
- * 1. 让文档站 / 静态页也站到与真实应用同一个起跑线（此前只有真实应用有 preflight）；
- * 2. 让裸元素（`ul` / `a` / `p` / `button` …）不再带浏览器的默认内外距、列表序号与链接色 ——
- *    页面骨架由应用的 tsx 摆放时，不必再为每个原生元素写一次归零。
+ * 旧版这份文件是按 **Tailwind Preflight** 逐条复刻的（盒模型 / 块级外边距归零 / 标题字阶 /
+ * 列表序号 / 链接下划线 / 控件外观 / 媒体元素转块 …）。问题出在**级联层**上：Tailwind 4 的
+ * 产物首行是 `@layer theme, base, components, utilities;`，preflight 与全部工具类都在层里，
+ * 而本文件**在层外** —— CSS 里未分层的普通声明一律赢过分层里的普通声明，**这条优先于特异性**。
+ * 于是那些复刻规则把消费方的工具类整片压住（实测：`border*` 被 `border-width: 0` 打掉、
+ * `img` 上的 `h-*` 被 `height: auto` 打掉，同类还有 `h1`–`h6` 的 `text-*`、`p` 的 `mb-*`、
+ * `svg`/`img` 上的 `hidden`），而 `:where()` 把特异性降到 0 也救不了 —— 胜负不在特异性上。
  *
- * 与旧实现（`app-kit` 的 reset）相比，多了按钮外观归零、列表序号归零、链接继承色去下划线、
- * 标题字阶归位、媒体元素转块级 —— 那几条正是「应用侧各写各的」在补齐的部分。
+ * 两件事要分开：**分层**管优先级（本文件现在不再依赖消费方分层，因为可抢的声明已经没有了），
+ * **瘦身**管重复 —— 与 preflight 重合的规则对 Tailwind 消费方本就是零增量，剩下的都归了具体组件。
  *
- * ## 特异性纪律（改本文件前必读）
+ * ## 删掉的那些去了哪
  *
- * **作用域一律用 `:where([data-manohub-ui])` 包裹**：`:where()` 特异性为 0，
- * 故每条规则等价于纯元素选择器（0,0,1）甚至更低（`:where(X) *` 即 0,0,0）。
+ * | 旧规则 | 现在的落点 |
+ * |---|---|
+ * | `img` / `svg` / `video` / `canvas` / `audio` / `iframe` / `embed` / `object` 转块级、`img`+`video` 不溢出 | 用图的件各自写：Card / ListView / QueryState 本来就有，Avatar / Upload 已补 `display: block` |
+ * | `a { color: inherit; text-decoration: inherit }` | `.mh-button` 基块补 `text-decoration: none`（链接形态的按钮就是 `<a>`）；正文链接的颜色与下划线交给消费方 |
+ * | `textarea { resize: vertical }` | `.mh-input--textarea` |
+ * | `button` 的 `cursor: pointer` / 透明底 / 无渐变 / 无缩改 | 各按钮形态的面（本来都自带 `border` / `background` / `padding` / `cursor`） |
+ * | `code` / `kbd` / `samp` / `pre` 等宽族 | CodeBlock 面，以及 `.mh-text--mono`（消费方写裸 `<code>` 时用后者） |
+ * | `:disabled { cursor: default }` | 各件禁用态（Button / Input / Select / Checkbox / Capsule / Card / Collapse 等都已自带） |
+ * | `[type='search'] { outline-offset: -2px }` | 搜索框的面自画焦点环 |
+ * | 标题字阶归位 / 块级元素外边距归零 / 列表序号与缩进 / 控件字体与颜色继承 / `b`+`strong` / `small` / `summary` / `label` | **直接删**：全库零组件依赖，且 Tailwind Preflight 全都有 |
+ *
+ * `border-width: 0; border-style: solid` 也一并删了：库内每个面都写全简写
+ * （`border: 1px solid …` / `border: none` / `border-bottom: 1px solid …`），没有一处依赖默认值，
+ * 留着只会继续压消费方的 `border*` 工具类。
+ *
+ * ## 特异性的老纪律（往这里加东西前必读）
+ *
+ * **作用域一律用 `:where([data-manohub-ui])` 包裹**：`:where()` 特异性为 0，等价于纯元素选择器。
  * 写成 `.container button` 这类高特异性选择器（0,1,1）会**反压本包组件面**（普遍是单类 0,1,0）——
- * 本仓踩过：主按钮文字变成 `color: inherit` 的黑色。**新增任何 reset 级样式都要遵守这条。**
- * 也正因为它的特异性最低，消费方在自己的样式里写任何元素选择器都能盖过它。
+ * 本仓踩过：主按钮文字变成 `color: inherit` 的黑色。
  *
- * 唯一一条不带 `:where()` 的是**容器基座**（下面的 `[data-manohub-ui]`）：它描述容器自身而非其后代，
- * 且要能在消费方「同名选择器后写即胜」的规则里被覆盖，故保持 (0,1,0)（与旧实现一致）。
+ * 唯一例外是**容器基座**（下面的 `[data-manohub-ui]`）：它描述容器自身而非其后代，
+ * 且要能在消费方「同名选择器后写即胜」的规则里被覆盖，故保持 (0,1,0)。
  *
- * ## 四条不做
+ * **加声明之前先自问**：这条会不会压住消费方的 Tailwind 工具类？会压就落进**具体组件的面**
+ * （谁渲染这个元素谁负责），不要放这里。`__tests__/contract-reset.spec.ts` 按这条锁着：
+ * 除容器基座外，整份文件只允许 `box-sizing` 一条声明。
+ *
+ * ## 三条不做
  *
  * 1. **不碰 `html` / `body` / `#app`**：micro-app 的 scopecss **不作用域化**它们，
- *    写进去会泄漏到宿主应用的全局样式。
- *    **整链高度由消费方承担，且契约明确它是合法的** —— 写在应用的 `app.css` 或入口 HTML 的 `<style>` 里
- *    （`@manohub/kit/CONTRACT.md` §1.2「入口基线」，是 L1-6「不得用裸元素选择器」的**唯一例外**）；
+ *    写进去会泄漏到宿主应用的全局样式。整链高度由消费方承担
+ *    （`@manohub/kit/CONTRACT.md` §1.2「入口基线」，是 L1-6「不得用裸元素选择器」的唯一例外）；
  *    容器自身在这里给 `height: 100%`，`Page` 的 `height: 100%` 依赖上面那条链存在。
  * 2. **不定义任何 `--ui-*` 令牌**：值一律归 `@manohub/theme`，本文件只**消费**（两处定义必然漂）。
  * 3. **不出现任何类选择器**：本层是元素基线，类归各组件面（`styles/components/`）。
- * 4. **不写 `appearance`**：作者一旦声明了 `background` / `border`，浏览器即放弃原生控件绘制。
- *    实测（无头 Chrome，只引 theme + ui/styles.css）：裸 `button` 的计算值是透明底 /
- *    `border-width: 0` / `border-radius: 0` / 内距 0 / 字色与字族继承容器 —— 已经是清零态。
- *    Safari / iOS 是否还需 `appearance: none` 未在真机核对，故不动（补它前请先在真机取证）。
  *
- * ## 富文本须知
+ * ## 富文本须知（相对旧版是反转）
  *
- * 重置掉 `ul` / `ol` 的序号、`a` 的下划线之后，**富文本（markdown）需要自行复权** ——
- * 富文本排版目前没有合规归属（见 `@manohub/kit/CONTRACT.md` §10 的已知缺口），
- * 消费方要为自己的富文本容器类补回 `list-style`、链接色与下划线、段落边距。
- * 本文件有意**不含** `.mh-markdown` 一类的富文本预设：那是独立的一件事，不混进元素基线。
+ * 本文件现在**不归零列表序号、不归零链接下划线、不归位标题字阶**，所以富文本（markdown）与正文
+ * 可以直接吃浏览器默认排版 —— 旧版那条「消费方须为自己的富文本容器复权」的告示随之作废
+ * （见 `@manohub/kit/CONTRACT.md` §10）。反之，消费方想要一套自己的正文排版，按自己的容器类写即可。
  */
 
-/* ===== 盒模型与边框：边框属性归零（对齐 Preflight，`border: 1px solid …` 写法不受影响） ===== */
+/* ===== 盒模型：容器、其后代与伪元素一律 border-box（本库全部面的几何前提） ===== */
 :where([data-manohub-ui]),
 :where([data-manohub-ui]) *,
 :where([data-manohub-ui]) *::before,
 :where([data-manohub-ui]) *::after {
   box-sizing: border-box;
-  border-width: 0;
-  border-style: solid;
 }
 
 /* ===== 容器基座：字族 / 字号 / 行高 / 字色 / 底色 / 整链高度（本文件唯一不带 :where() 的一条） ===== */
@@ -81,129 +92,3 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
-/* ===== 块级元素的默认外边距归零 ===== */
-:where([data-manohub-ui]) h1,
-:where([data-manohub-ui]) h2,
-:where([data-manohub-ui]) h3,
-:where([data-manohub-ui]) h4,
-:where([data-manohub-ui]) h5,
-:where([data-manohub-ui]) h6,
-:where([data-manohub-ui]) p,
-:where([data-manohub-ui]) figure,
-:where([data-manohub-ui]) blockquote,
-:where([data-manohub-ui]) dl,
-:where([data-manohub-ui]) dd,
-:where([data-manohub-ui]) pre,
-:where([data-manohub-ui]) hr {
-  margin: 0;
-}
-
-/* 标题回归正文档：字阶一律由使用方（组件面 / 页面样式）决定，浏览器默认的 2em / bold 不再参与 */
-:where([data-manohub-ui]) h1,
-:where([data-manohub-ui]) h2,
-:where([data-manohub-ui]) h3,
-:where([data-manohub-ui]) h4,
-:where([data-manohub-ui]) h5,
-:where([data-manohub-ui]) h6 {
-  font-size: inherit;
-  font-weight: inherit;
-}
-
-/* ===== 列表：去序号、去缩进（富文本自行复权，见文件头「富文本须知」） ===== */
-:where([data-manohub-ui]) ul,
-:where([data-manohub-ui]) ol,
-:where([data-manohub-ui]) menu {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-/* ===== 链接：继承文字色，下划线交还使用方（链接态由使用方叠加） ===== */
-:where([data-manohub-ui]) a {
-  color: inherit;
-  text-decoration: inherit;
-}
-
-/* ===== 表单控件：清掉浏览器默认外观，字体与颜色继承上下文 ===== */
-:where([data-manohub-ui]) button,
-:where([data-manohub-ui]) input,
-:where([data-manohub-ui]) optgroup,
-:where([data-manohub-ui]) select,
-:where([data-manohub-ui]) textarea {
-  margin: 0;
-  padding: 0;
-  font: inherit;
-  color: inherit;
-}
-
-:where([data-manohub-ui]) button,
-:where([data-manohub-ui]) [type='button'],
-:where([data-manohub-ui]) [type='reset'],
-:where([data-manohub-ui]) [type='submit'] {
-  background-color: transparent;
-  background-image: none;
-  text-transform: none;
-  cursor: pointer;
-}
-
-:where([data-manohub-ui]) select {
-  text-transform: none;
-}
-
-:where([data-manohub-ui]) textarea {
-  resize: vertical;
-}
-
-:where([data-manohub-ui]) :disabled {
-  cursor: default;
-}
-
-:where([data-manohub-ui]) [type='search'] {
-  outline-offset: -2px;
-}
-
-/* ===== 媒体元素：转块级（消除行内基线间隙），宽度不溢出容器 ===== */
-:where([data-manohub-ui]) img,
-:where([data-manohub-ui]) svg,
-:where([data-manohub-ui]) video,
-:where([data-manohub-ui]) canvas,
-:where([data-manohub-ui]) audio,
-:where([data-manohub-ui]) iframe,
-:where([data-manohub-ui]) embed,
-:where([data-manohub-ui]) object {
-  display: block;
-  vertical-align: middle;
-}
-
-:where([data-manohub-ui]) img,
-:where([data-manohub-ui]) video {
-  max-width: 100%;
-  height: auto;
-}
-
-/* ===== 行内语义与文本节点 ===== */
-:where([data-manohub-ui]) b,
-:where([data-manohub-ui]) strong {
-  font-weight: bolder;
-}
-
-:where([data-manohub-ui]) code,
-:where([data-manohub-ui]) kbd,
-:where([data-manohub-ui]) samp,
-:where([data-manohub-ui]) pre {
-  font-family: var(--ui-font-mono);
-  font-size: 1em;
-}
-
-:where([data-manohub-ui]) small {
-  font-size: 80%;
-}
-
-:where([data-manohub-ui]) summary {
-  display: list-item;
-}
-
-:where([data-manohub-ui]) label {
-  margin: 0;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@manohub/ui",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "private": false,
   "type": "module",
   "description": "AIHub 自绘组件层：不依赖 farris 的手写 Vue TSX 组件 + 自带令牌层（Farris 规范视觉 · daisyUI 式语义令牌 · shadcn 式 API 词汇）。",
@@ -46,7 +46,7 @@
     "vue": "^3.5.0"
   },
   "dependencies": {
-    "@manohub/icon": "^0.9.0"
+    "@manohub/icon": "^0.10.0"
   },
   "devDependencies": {
     "@types/node": "^24.0.0",

package/dist/styles/components/filter.tokens.css

@@ -1,14 +0,0 @@
-/**
- * 单件令牌（只服务本件，故不随主题进 `@manohub/theme`）：
- * 字段最小宽 240 —— 与稿里 270 的字段宽同档，但允许容器够宽时均分铺满、不够时整体换行
- * （1160 内容宽下一行正好排 4 个：4×240 + 3×24 = 1032 ≤ 1160）。
- *
- * ## 抽出说明
- * 本文件从面文件里抽出：这些是**基础值**，锚在 `[data-manohub-ui]`（跨包唯一作用域锚，
- * 由入口层无条件写在应用容器上）—— 任何落在容器里的分件都取得到值，不再依赖
- * 「声明在某个组件根类上」这条脆弱假设。
- * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里（拆开会让档位失效）。
- */
-[data-manohub-ui] {
-  --ui-filter-item-min: 240px;
-}