@manohub/ui 0.6.0 → 0.7.0

package/dist/index.js

@@ -10,6 +10,7 @@ import { Avatar } from "./components/avatar/index.js";
 import { Skeleton } from "./components/skeleton/index.js";
 import { Radio } from "./components/radio/index.js";
 import { Tag } from "./components/tag/index.js";
+import { Text } from "./components/text/index.js";
 import { Tree } from "./components/tree/index.js";
 import { ListView } from "./components/list-view/index.js";
 import { Badge } from "./components/badge/index.js";
@@ -80,6 +81,7 @@ export {
   Tabs,
   Tabset,
   Tag,
+  Text,
   Textarea,
   Toast,
   Tooltip,

package/dist/services/dialog.d.ts

@@ -1,13 +1,21 @@
+import { type DialogTone } from '../components/dialog';
 export interface ConfirmOptions {
     /** 标题（缺省不渲染页头，只剩内容与底栏） */
     title?: string;
     /** 正文（纯文本；复杂内容请直接用 `Dialog` 组件） */
     detail?: string;
+    /**
+     * 语义档（决定标题左侧的裸符号与配色）：`info` / `success` / `warning` / `error`。
+     *
+     * 不传则无图标。**危险操作用 `error`** —— 它同时把确定按钮染成危险色
+     * （除非显式给了 `okDanger`），这样「删除确认」与「保存成功」不再长得一样。
+     */
+    tone?: DialogTone;
     /** 确定按钮文案 */
     okText?: string;
     /** 取消按钮文案（`alert` 不使用） */
     cancelText?: string;
-    /** 确定按钮的危险色（删除类确认） */
+    /** 确定按钮的危险色（删除类确认；不传时由 `tone === 'error'` 推出） */
     okDanger?: boolean;
     /** 是否显示关闭位（缺省开：用户总得有第三条退路） */
     closable?: boolean;
@@ -18,11 +26,15 @@ export interface ConfirmOptions {
  * 与 `Dialog` 组件的分工：组件是「受控弹窗」，本函数补齐命令式调用缺的那一层（宿主 + 收场 Promise）。
  * 语义与主流库一致：**任何非确定路径都折成 `false`**，调用方 `if (await confirm(...))` 一处判断即可。
  *
+ * **遮罩与 Esc 都归 `false`**：`Dialog` 组件形态的 `closeOnBackdrop` 默认已改为 `true`（跟主流），
+ * 但命令式确认框必须**显式关掉它** —— 这里一条误点就丢一次决策，与 Ant Design
+ * （`<Modal maskClosable>` 默认 `true`、`Modal.confirm` 默认 `false`）的分工一致。
+ *
  * 需要「确定按钮进加载态」的异步确认请直接用 `Dialog` 组件（`onOk` 返回 Promise 时自动进加载态）——
  * 命令式形态刻意不引入跨 tick 的加载态，免得调用方以为弹窗已经关了。
  *
- * @example 删除确认
- * if (await confirm({ title: '删除确认', detail: '删除后不可恢复，确认继续？', okText: '删除', okDanger: true })) {
+ * @example 删除确认（`tone: 'error'` 给标题加提示图标并把确定按钮染危险色）
+ * if (await confirm({ title: '删除确认', detail: '删除后不可恢复，确认继续？', okText: '删除', tone: 'error' })) {
  *   await remove()
  * }
  */
@@ -33,8 +45,11 @@ export declare function confirm(options?: ConfirmOptions): Promise<boolean>;
  * 底栏**自绘**而不是用内建底栏：内建底栏固定是「取消 + 确定」两枚，而告知框没有「取消」可言
  * （给两枚按钮会让用户以为还有一条分支）。
  *
- * @example
- * await alert({ title: '导入完成', detail: '共 128 条，其中 3 条被跳过。' })
+ * 与 `confirm()` 同一口径：**遮罩与 Esc 都显式关掉**（告知框同样不该被一次误点打发掉）。
+ *
+ * @example 危险操作的回执：这一条与「保存成功」在图标与配色上区分开
+ * await alert({ tone: 'error', title: '移除失败', detail: '该来源系统仍被 3 个应用引用。' })
+ * await alert({ tone: 'success', title: '导入完成', detail: '共 128 条，其中 3 条被跳过。' })
  */
 export declare function alert(options?: ConfirmOptions): Promise<void>;
 /** 收掉全部在档弹窗（逐个折成 `false`）；幂等。换应用 / 卸载时调 */

package/dist/services/dialog.js

@@ -39,10 +39,14 @@ function confirm(options = {}) {
       {
         open: ctx.isOpen(),
         title: options.title,
+        tone: options.tone,
         closable: options.closable ?? true,
+        // 组件形态默认已开（跟主流）；命令式这一层显式关掉，防误点丢决策
+        closeOnBackdrop: false,
+        maskClosable: false,
         okText: options.okText ?? "确定",
         cancelText: options.cancelText ?? "取消",
-        okDanger: options.okDanger ?? false,
+        okDanger: options.okDanger ?? options.tone === "error",
         onOk: () => ctx.finish(true),
         onCancel: () => ctx.finish(false),
         onClose: () => ctx.finish(false)
@@ -58,7 +62,10 @@ function alert(options = {}) {
       {
         open: ctx.isOpen(),
         title: options.title,
+        tone: options.tone,
         closable: options.closable ?? true,
+        closeOnBackdrop: false,
+        maskClosable: false,
         // 关闭位与 Esc 都算「看过了」
         onCancel: () => ctx.finish(true),
         onClose: () => ctx.finish(true)

package/dist/styles/components/dialog.css

@@ -16,6 +16,15 @@
  * （`class="mh-popup mh-card"` + 按钮），不需要新的面；尺寸 220/r10 那组值也不值得为它单开一族。
  */
 .mh-dialog {
+  /* 三段式列布局：页头 / 底栏由内容定高（`flex: none`），内容区吃掉剩余高度。
+     与 `Drawer` 同构（那边一直是这么写的）—— 本件此前漏了这一层，表现为
+     **高度受控时底栏不贴底**（body 只有内容高，剩余空间全留在 footer 之后）。
+     不设高度时零影响：列容器无高度约束 ⇒ body 高 = 内容高（与改前逐像素一致）。
+     ⚠️ 加 `display: flex` 会以作者源压过 UA 的 `dialog:not([open]) { display: none }`，
+     收起态靠操作层 `operations/popup.css` 的 `:is(… dialog.mh-popup:not([open]))` 兜住
+     （特异性 0-3-0，高于本行）—— **那条兜底不能删**。 */
+  display: flex;
+  flex-direction: column;
   width: var(--ui-dialog-width);
   max-width: var(--ui-dialog-width);
   padding: 0; /* UA 给 <dialog> 的内距一律归零：内距由页头 / 内容 / 底栏各自拥有 */
@@ -42,14 +51,38 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--ui-space-2);
+  flex: none; /* 高度受控时不被压缩（同 Drawer） */
   padding: var(--ui-space-4) var(--ui-space-6) 0;
   font-size: var(--ui-font-heading); /* 规范 16px */
   line-height: var(--ui-line-heading);
   font-weight: var(--ui-weight-medium);
   color: var(--ui-base-content);
 }
+/* 语义档（`tone`）：标题左侧一个**裸符号**，颜色按档取语义色 ——
+   缺省（不传 tone）不渲染，故不影响既有外观。取色口径与 `Notice` 同一张表
+   （success / warning 取 -strong 档，否则浅底上对比度不足）。 */
+.mh-dialog__tone-icon {
+  flex: none;
+  width: var(--ui-font-icon);
+  height: var(--ui-font-icon);
+  color: var(--mh-dialog-tone-color, var(--ui-primary));
+}
+.mh-dialog--info {
+  --mh-dialog-tone-color: var(--ui-info);
+}
+.mh-dialog--success {
+  --mh-dialog-tone-color: var(--ui-success-strong);
+}
+.mh-dialog--warning {
+  --mh-dialog-tone-color: var(--ui-warning-strong);
+}
+.mh-dialog--error {
+  --mh-dialog-tone-color: var(--ui-error);
+}
+
 /* 标题位（插槽版也走这个类，两路渲染同一份排版） */
 .mh-dialog__title {
+  flex: 1 1 auto; /* 撑满中段：语义图标在左、关闭位在右（`space-between` 下三者的正确落位） */
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -82,8 +115,13 @@
   outline-offset: 2px;
 }
 
-/* 内容区（内距 24；三段之间无分割线，交界间距只由三段内距单一拥有） */
+/* 内容区（内距 24；三段之间无分割线，交界间距只由三段内距单一拥有）
+   `flex: 1 1 auto` + `min-height: 0`：吃掉页头与底栏之外的全部高度（含 `panelHeight` /
+   消费方经 style 给的高度），超出即**本段**滚动 —— 页头与底栏因此永远可见。 */
 .mh-dialog__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
   padding: var(--ui-space-6);
   font-size: var(--ui-font-body);
   line-height: var(--ui-line-body);
@@ -102,5 +140,6 @@
   display: flex;
   justify-content: flex-end;
   gap: var(--ui-space-2);
+  flex: none; /* 高度受控时贴底且不被压缩（同 Drawer） */
   padding: 0 var(--ui-space-6) var(--ui-space-4);
 }

package/dist/styles/components/input.css

@@ -370,7 +370,7 @@
 .mh-input__eye:hover {
   color: var(--ui-primary);
 }
-/* 明文显示中：图标转主色（同一个 `eye` 字形，靠状态色表达"当前是明文"） */
+/* 明文显示中：图标转主色（同一个 `preview` 字形，靠状态色表达"当前是明文"） */
 .mh-input__eye.is-on {
   color: var(--ui-primary);
 }

package/dist/styles/components/search.css

@@ -1,5 +1,5 @@
 /**
- * Search —— 搜索框（输入框 + 搜索触发位的**组合件面**）。
+ * Search —— 搜索框（输入框 + 可选搜索按钮的**组合件面**）。
  *
  * 本面**只声明「一行里怎么摆」**：输入框那一段的面归 `input.css`（框 / 内距 / 清除位 /
  * 聚焦态 / 禁用态全套复用），搜索按钮的面归 `button.css`。本件因此没有自己的几何令牌，
@@ -10,6 +10,10 @@
  *   必须允许收缩，否则会把同行的搜索按钮挤出容器（窄栏里尤其明显）；
  * - 搜索按钮 `flex: none`：它永远是「那么大」，宽度让给输入框。
  *
+ * **按钮是可选的**：不传 `searchText` 时本件只渲染输入框（框内的放大镜已占住「搜索」语义，
+ * 再出一个同字形的图标按钮就是同一个意思画两遍）。此时 `__btn` 那条摆法规则无对象，
+ * 输入框自然占满整行——摆法不用改，缺了按钮也不留空档。
+ *
  * **类名与面文件名同根**：`.mh-search*`，一律 `mh-` 前缀。
  */
 .mh-search {

package/dist/styles/components/select.css

@@ -131,6 +131,17 @@
   width: 100%;
   height: var(--ui-select-option-height);
   padding: 0 var(--ui-select-padding-x);
+  /* **按钮重置四条，必须自带**：本行是 `<button role="option">`，而按钮自带 UA 外观
+     （`border: 2px outset` / `background: ButtonFace` / `font-family: Arial` / `text-align: center`）。
+     reset 层（`styles/reset.css`）虽然也清零了前三条，但组件面**不得依赖它** ——
+     本仓的 0.6.x 就漏了这四条，表现为选项行呈原生按钮外观（灰底 + 立体边框 + 居中 Arial），
+     而同一面板里的 `.mh-select__add` 写齐了 ⇒ 一个面板里两种外观。
+     `text-align` 是 reset 层**没有**的一项（它不属于「元素基线」，属于「列表行」语义），故此处必写。
+     色彩 / 字族这些**值**仍然归令牌，这四条只是把 UA 的默认值归零。 */
+  border: none;
+  background: transparent;
+  font-family: inherit;
+  text-align: left;
   font-size: var(--ui-select-font-size);
   color: var(--ui-base-content);
   cursor: pointer;

package/dist/styles/components/table.css

@@ -30,11 +30,15 @@
  *    "没写的边"顶掉，结果就是与表外框叠成 2px、行交界处叠成 2px、还多出列分隔线。
  * 2. **斑马纹是显式类**（`.is-striped`）而非 `:nth-child(even)`：表里可以插分组行，`nth-child` 会整表错位
  *    —— 这是规范里唯一允许"用类代替结构选择器"的豁免。
- * 3. **行选中由行内的选择控件驱动**（`tr:has(input:checked)`）：这样零 JS 也能选中；
+ * 3. **行选中由行内的选择控件驱动**（`tr:has(.mh-table__col-check input:checked)`）：这样零 JS 也能选中；
  *    组件态给 `[data-state='selected']`，静态档给 `.is-selected` —— 三源等价。
  *    勾选列复用 `Checkbox` **组件**（不在表格里手写原生 input）：该件内部才是真实 `<input type="checkbox">`，
- *    故 `:has(input:checked)` 这条路径照旧成立；`Checkbox` 的框体带 `data-state`（checked / indeterminate），
+ *    故 `:has(...)` 这条路径照旧成立；`Checkbox` 的框体带 `data-state`（checked / indeterminate），
  *    半选与选中都走它自己的样式数据，表格这边不再画方块。
+ *    **选择器必须限定在勾选列内**（`.mh-table__col-check`，勾选列单元格自带的类）：不限列时，
+ *    功能列里任何「内部本来就是 checkbox」的件都会命中 —— `Switch` 的内部正是 `<input type="checkbox">`，
+ *    于是「启用」这类**功能值**会把整行点亮。功能值与行选择语义不同，视觉必须分开（否则一张表里
+ *    开关一开就整行变色，且用户无从判断那到底表示什么）。
  * 4. **固定列必须自带底**（`background: var(--ui-base-100)`）：它是 sticky 的，不遮挡就会被滚过的单元格透出。
  *
  * **不做**：排序与列宽拖拽的**算法**（规范只给了 `↕` 字形与 3×40 拖拽线这两处视觉），也不做空态/加载态
@@ -141,10 +145,11 @@
 }
 /* 选中态**只有底色**：规范样张里那条 2px 主色下沿（Au01）已去掉 ——
    行线只由单元格底边提供，选中行不再额外压一条线（`box-shadow: inset 0 -2px` 会盖住底边线，
-   看起来像"两行线叠在一起"）。要恢复下沿就加回 inset 阴影 + 对应令牌。 */
+   看起来像"两行线叠在一起"）。要恢复下沿就加回 inset 阴影 + 对应令牌。
+   第三条路径限定在勾选列内（见文件头第 3 条）：不限列会被功能列的 Switch 命中。 */
 .mh-table tbody tr.is-selected td,
 .mh-table tbody tr[data-state='selected'] td,
-.mh-table tbody tr:has(input:checked) td {
+.mh-table tbody tr:has(.mh-table__col-check input:checked) td {
   background: var(--ui-table-row-selected);
 }
 .mh-table tbody tr.is-disabled td,

package/dist/styles/components/text.css

@@ -0,0 +1,101 @@
+/**
+ * Text —— 文本排版（字号 / 行高 / 字重 / 语义色 / 等宽 / 截断）。
+ *
+ * 本文件是 `@manohub/theme` 那套 `--ui-font-*` / `--ui-line-*` / `--ui-weight-*` 档位令牌的
+ * **第一个消费者**：在此之前它们只有定义、没有件，于是「卡片里的文字层级」在应用侧无合规落点
+ * （契约 L1-5 禁 `font-*` / `color`），每个应用都要留一条定版例外登记。
+ *
+ * ## 取色口径
+ *
+ * 与 `Notice` / `Dialog` 的语义档同一张表：`success` / `warning` 取 `-strong` 档
+ * （直接用 500 档主色在浅底上对比度不足，属可读性缺陷）。
+ *
+ * ## 为什么 tone 走内部变量
+ *
+ * `--mh-text-tone-color` 是**内部状态变量**（`--mh-` 命名空间），由修饰符类赋值、由根类消费 ——
+ * 这样「一条规则管颜色」而不是七条各写一次 `color`。默认值取 `inherit`，
+ * 故**不传 tone 的文字也不会被强行染色**（`tone` 缺省档是 `default`，与正文色一致）。
+ *
+ * ## 截断
+ *
+ * `--truncate`（单行）与 `--clamp`（N 行）都要 `min-width: 0` 才能在被 flex 拉伸的子项里生效
+ * （flex 子项的 `min-width` 默认是 `auto`，不给就会把容器撑开而不是省略）。
+ * N 行的行数经 `--mh-text-lines` 下发（`-webkit-line-clamp` 只吃值，不能由类名表达行数）。
+ */
+
+.mh-text {
+  color: var(--mh-text-tone-color, inherit);
+}
+
+/* ===== 字号档（每档配一枚行高令牌，两者成对出现才不会出现「字号变了行距没变」） ===== */
+.mh-text--caption {
+  font-size: var(--ui-font-caption);
+  line-height: var(--ui-line-caption);
+}
+.mh-text--body {
+  font-size: var(--ui-font-body);
+  line-height: var(--ui-line-body);
+}
+.mh-text--heading {
+  font-size: var(--ui-font-heading);
+  line-height: var(--ui-line-heading);
+}
+.mh-text--title {
+  font-size: var(--ui-font-title);
+  line-height: var(--ui-line-title);
+}
+
+/* ===== 字重档（缺省不给，即继承上下文） ===== */
+.mh-text--regular {
+  font-weight: var(--ui-weight-regular);
+}
+.mh-text--medium {
+  font-weight: var(--ui-weight-medium);
+}
+.mh-text--semibold {
+  font-weight: var(--ui-weight-semibold);
+}
+
+/* ===== 语义色档 ===== */
+.mh-text--default {
+  --mh-text-tone-color: var(--ui-base-content);
+}
+.mh-text--muted {
+  --mh-text-tone-color: var(--ui-base-content-muted);
+}
+.mh-text--subtle {
+  --mh-text-tone-color: var(--ui-base-content-subtle);
+}
+.mh-text--primary {
+  --mh-text-tone-color: var(--ui-primary);
+}
+.mh-text--success {
+  --mh-text-tone-color: var(--ui-success-strong);
+}
+.mh-text--warning {
+  --mh-text-tone-color: var(--ui-warning-strong);
+}
+.mh-text--error {
+  --mh-text-tone-color: var(--ui-error);
+}
+
+/* ===== 等宽族（代码 / 路径 / ID；字号跟随所在档，不另开一档） ===== */
+.mh-text--mono {
+  font-family: var(--ui-font-mono);
+}
+
+/* ===== 截断 ===== */
+.mh-text--truncate {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mh-text--clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--mh-text-lines, 2);
+  min-width: 0;
+  overflow: hidden;
+}

package/dist/styles/components/toast.css

@@ -42,7 +42,7 @@
   width: 360px;
 }
 
-/* 图标：圆形色底 + 白色字形（18×18） */
+/* ===== 图标：圆形色底 + 白色字形（18×18） ===== */
 .mh-toast__icon {
   display: flex;
   align-items: center;
@@ -55,22 +55,28 @@
   font-size: var(--ui-font-caption);
   line-height: 1;
 }
-.mh-toast__icon--info {
+
+/* ===== 语义档：色落在**根修饰符**上，由它再作用到图标 =====
+ * 本包 tone 维度的统一落点是 `.mh-<件>--<tone>`（`Badge` / `Dialog` / `Notice` / `Notification`
+ * / `Tag` / `Text` 同款）。本件此前写成 `.mh-toast__icon--<tone>`，是唯一一个落子元素修饰符的 ——
+ * 消费方按直觉拼 `.mh-toast--success` 会落空。现改为「根挂 tone、面里用后代选择器取到图标」，
+ * **视觉一字未变**（圆形色底仍然只在图标上）。 */
+.mh-toast--info .mh-toast__icon {
   background: var(--ui-info);
 }
-.mh-toast__icon--success {
+.mh-toast--success .mh-toast__icon {
   background: var(--ui-success);
 }
-.mh-toast__icon--warning {
+.mh-toast--warning .mh-toast__icon {
   background: var(--ui-warning);
 }
-.mh-toast__icon--error {
+.mh-toast--error .mh-toast__icon {
   background: var(--ui-error);
 }
 /* loading 档：透明底 + 主色字形 + 匀速转圈。
    规范此处是「2px 描边 + 上边缺口」的自画法，本仓改用意形（图标包的 `loading`）——
   硬约束是「图标一律来自图标包、不用文字符号或自画形状冒充」，视觉等价（都是转圈环）。 */
-.mh-toast__icon--loading {
+.mh-toast--loading .mh-toast__icon {
   background: transparent;
   color: var(--ui-primary);
   animation: mh-toast-spin 0.8s linear infinite;

package/dist/styles/index.css

@@ -42,10 +42,13 @@
  * 跨件共用的值一律进 `@manohub/theme`；面上的 `--ui-*` 只允许出现在**修饰符块**里
  * （护栏会拦「面里出现不含修饰符类的 `--ui-*` 声明」）。
  *
- * 层序：**值在前、面在后**；面内部**操作层在前**（零 JS 原语、规则走 `:where()` 零特异性，
+ * 层序：**基线（`./reset.css`，元素级、零特异性）→ 值 → 面**；面内部**操作层在前**（零 JS 原语、规则走 `:where()` 零特异性，
  * 永远给皮肤让位），组件面在后。
  */
 
+/* ===== 基线：元素级 reset（特异性最低；先于值 → 面，消费方写任何元素选择器都能盖过它） ===== */
+@import './reset.css';
+
 /* ===== 值：组件令牌基础值（锚 `[data-manohub-ui]`，与主题令牌同层序） ===== */
 /* 容器与分区 */
 @import './components/collapse.tokens.css';
@@ -104,6 +107,7 @@
 @import './components/divider.css'; /* 内容之间的分隔线（设计稿内容区 44 处在用；不是各件自己的框线） */
 @import './components/nav.css';
 @import './components/layout.css'; /* 布局原子件族（Layout.Row 排「行」/ Layout.Column 排「列」）；与任何件都无层序耦合 */
+@import './components/text.css'; /* 排版原子件：`--ui-font-*` 档位令牌的第一个消费者；叶子件，与任何件都无层序耦合 */
 
 /* 数据展示 */
 @import './components/tree.css';

package/dist/styles/reset.css

@@ -0,0 +1,205 @@
+/**
+ * 基础重置（reset）—— 元素级基线，随 `@manohub/ui/styles.css` 一起到达消费方。
+ *
+ * ## 为什么基线归本包
+ *
+ * 接入契约（`@manohub/kit/CONTRACT.md` §3）禁应用侧写裸元素选择器与字号字面量，
+ * 于是「把浏览器默认值归零」在应用侧**没有合规落点**：0.6.0 之前它寄在入口层的
+ * `reset.css` 里，随入口层零样式化一并删除后就成了缺口（契约 §10 记在案）。
+ * 本包是样式面（② 面层）的唯一来源，元素基线因此归这里 —— 位于「值」之后、「面」之前。
+ *
+ * ## 参照口径
+ *
+ * 主体对齐 **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 摆放时，不必再为每个原生元素写一次归零。
+ *
+ * 与旧实现（`app-kit` 的 reset）相比，多了按钮外观归零、列表序号归零、链接继承色去下划线、
+ * 标题字阶归位、媒体元素转块级 —— 那几条正是「应用侧各写各的」在补齐的部分。
+ *
+ * ## 特异性纪律（改本文件前必读）
+ *
+ * **作用域一律用 `:where([data-manohub-ui])` 包裹**：`:where()` 特异性为 0，
+ * 故每条规则等价于纯元素选择器（0,0,1）甚至更低（`:where(X) *` 即 0,0,0）。
+ * 写成 `.container button` 这类高特异性选择器（0,1,1）会**反压本包组件面**（普遍是单类 0,1,0）——
+ * 本仓踩过：主按钮文字变成 `color: inherit` 的黑色。**新增任何 reset 级样式都要遵守这条。**
+ * 也正因为它的特异性最低，消费方在自己的样式里写任何元素选择器都能盖过它。
+ *
+ * 唯一一条不带 `:where()` 的是**容器基座**（下面的 `[data-manohub-ui]`）：它描述容器自身而非其后代，
+ * 且要能在消费方「同名选择器后写即胜」的规则里被覆盖，故保持 (0,1,0)（与旧实现一致）。
+ *
+ * ## 四条不做
+ *
+ * 1. **不碰 `html` / `body` / `#app`**：micro-app 的 scopecss **不作用域化**它们，
+ *    写进去会泄漏到宿主应用的全局样式。
+ *    **整链高度由消费方承担，且契约明确它是合法的** —— 写在应用的 `app.css` 或入口 HTML 的 `<style>` 里
+ *    （`@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` 一类的富文本预设：那是独立的一件事，不混进元素基线。
+ */
+
+/* ===== 盒模型与边框：边框属性归零（对齐 Preflight，`border: 1px solid …` 写法不受影响） ===== */
+: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() 的一条） ===== */
+[data-manohub-ui] {
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-body);
+  line-height: var(--ui-line-body);
+  color: var(--ui-base-content);
+  background: var(--ui-base-100);
+  height: 100%;
+  min-width: 320px;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -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;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@manohub/ui",
-  "version": "0.6.0",
+  "version": "0.7.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.6.0"
+    "@manohub/icon": "^0.7.0"
   },
   "devDependencies": {
     "@types/node": "^24.0.0",