@manohub/ui 0.6.0

package/dist/styles/components/tooltip.css

@@ -0,0 +1,89 @@
+/**
+ * Tooltip —— 提示气泡皮肤（与操作层并列组合）。
+ *
+ * 出处：`@aihub/theme` 的 `playground/components/tooltip.css` 与 `src/components/tooltip.css`
+ * （内距 8 / 14、圆角 10、深底反白字、`0 2 8` 黑 15% 投影；引导档另有一套面：蓝渐变底 + 12/14 内距 +
+ *  `0 2 14` 投影；标题 medium；动作是白色文本按钮；显隐纯淡入、不位移不缩放）。
+ *
+ * **类名与面文件名同根**：族名 `tooltip` → 类名 `.mh-tooltip*`（与令牌 `--ui-tooltip-*` 同根），
+ * 一律 `mh-` 前缀 —— 本包独立发布，不迁就任何下游的既有类名（有用例盯着这条口径）。
+ *
+ * 显隐与定位全归操作层：宿主态（`.mh-popup-host:hover` / `:focus-within`）切 display、`data-side` / `data-align`
+ * 给定位、`.mh-popup-anchor` / `--anchored` 给锚。本件只给面 + 淡入（进出对称）。
+ */
+.mh-tooltip {
+  display: inline-block;
+  padding: var(--ui-space-2) var(--ui-tooltip-padding-x);
+  border-radius: var(--ui-tooltip-radius);
+  background: var(--ui-tooltip-bg);
+  color: var(--ui-tooltip-text);
+  font-size: var(--ui-font-caption);
+  line-height: var(--ui-line-body);
+  box-shadow: var(--ui-tooltip-shadow);
+}
+
+/* 引导档（自己的面：更亮的内距 + 蓝渐变 + 更大投影） */
+.mh-tooltip--guide {
+  padding: var(--ui-space-3) var(--ui-tooltip-padding-x);
+  background: var(--ui-tooltip-guide-bg);
+  box-shadow: var(--ui-tooltip-guide-shadow);
+}
+
+/* 标题位（medium）与动作位（白色文本按钮，面不另开按钮族之外的类） */
+.mh-tooltip__title {
+  font-weight: var(--ui-weight-medium);
+}
+.mh-tooltip__action {
+  padding: 0;
+  border: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  color: var(--ui-tooltip-text);
+  cursor: pointer;
+}
+.mh-tooltip__action:focus-visible {
+  outline: 2px solid var(--ui-tooltip-text);
+  outline-offset: 2px;
+}
+
+/* ===== 淡入（hover 档：display 由操作层切，本层只管透明度补间，进出对称） =====
+ * 规范：提示不位移不缩放，纯淡入淡出 —— `opacity` 与触发态同源绑定。
+ * 域定在 `.mh-popup--hover`：静态摆样（不带该档）恒可见，不落收起末帧。 */
+.mh-tooltip.mh-popup--hover {
+  opacity: 0;
+  transition: opacity 0.2s ease-out;
+}
+.mh-popup-host:hover .mh-tooltip.mh-popup--hover,
+.mh-popup-host:focus-within .mh-tooltip.mh-popup--hover {
+  opacity: 1;
+}
+@starting-style {
+  .mh-popup-host:hover .mh-tooltip.mh-popup--hover {
+    opacity: 0;
+  }
+}
+
+/* ===== 点击档（原生 popover）=====
+ * 触发器按钮化：清掉 UA 的按钮外观，让它看起来仍是页面里原来那个元素。 */
+.mh-tooltip__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-space-1);
+  padding: 0;
+  border: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+.mh-tooltip__trigger:focus-visible {
+  outline: 2px solid var(--ui-primary);
+  outline-offset: 2px;
+}
+/* 点击档的气泡要限宽：进了 top layer 就不再受容器约束，长文案会被拉成一整行 */
+.mh-tooltip--click {
+  max-width: 280px;
+}

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

@@ -0,0 +1,25 @@
+/**
+ * tooltip —— 单件令牌（**基础值**）。
+ *
+ * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出（原先混写在 `tooltip.css` 顶部）：这些是**基础值**，锚在
+ * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
+ * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
+ * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
+ *
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
+ * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+ */
+[data-manohub-ui] {
+  /* 单件令牌 */
+  --ui-tooltip-radius: 10px; /* 规范 r10（本仓圆角刻度最大 8） */
+  --ui-tooltip-padding-x: 14px; /* 规范间距档 5 = 14 */
+  --ui-tooltip-bg: var(--ui-base-content); /* 深底：规范用深色蒙层色，本仓无深色面令牌，取正文档（与输入说明气泡同一映射） */
+  --ui-tooltip-text: var(--ui-base-100); /* 反白字 */
+  --ui-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* 规范实测值（本仓阴影令牌几何不同族，故按出处给） */
+  --ui-tooltip-guide-bg: linear-gradient(180deg, #2e77ff, #2a87ff); /* 规范引导档蓝渐变 */
+  --ui-tooltip-guide-shadow: 0 2px 14px rgba(45, 47, 51, 0.2);
+}

package/dist/styles/components/tree.css

@@ -0,0 +1,139 @@
+/**
+ * Tree（自建树：节点行 + 缩进 + 展开箭头 + 计数徽标位）。
+ *
+ * 几何取自 `@aihub/theme` 的 `components/tree.css` 与设计稿《MH后台-0911》的 `0:3921` 组织树，
+ * 见下方令牌块与形态注释。
+ */
+
+/* ===== Tree（自建树：节点行 + 缩进 + 展开箭头 + 计数徽标位）=====
+   几何与各态对齐 `@aihub/theme` 的 `components/tree.css` 与设计稿 `0:3921` 组织树实测：
+   - 行高 34（紧凑档 28）、**行间距 6（节距 40）**、圆角 6、字号 13、
+     行内 padding 承载缩进（**行底满宽、只有内容缩进**）
+   - 缩进 = 基础内距 8 + level × 步进 10，**无上限**；level 由组件在行上下发
+   - 三态：滑过 `--ui-primary-weak`、点击瞬态 `--ui-primary-subtle`、
+     选中 `--ui-primary-subtle` 底 + 主色字（设计：选中行 = `#2660ff` 底 10% + 蓝字）
+   - 箭头 = 常规图标档（`--ui-font-icon`，收起态转 −90°）；叶子节点用占位保持层级对齐
+
+   **行态的取色口径与 Table / ListView 统一**：行类表面的「滑过」用 `--ui-primary-weak`（浅主色）、
+   「选中」用 `--ui-primary-subtle`（深一档主色）—— 三者同一套规则，不再出现「树用中性底、
+   表格用主色底」的分叉。
+   点击瞬态（`:active`）改吃 `--ui-primary-subtle`：改前是本件硬编码的 `#f4f5f9`，
+   既是色值字面量（违反「组件 CSS 不得新增色值字面量」），换主题时也不跟随。
+
+   缩进为什么走 CSS 变量而不是行内 paddingLeft：主题包用 typed `attr(data-level type(<number>))`
+   一步算出（`padding-left: calc(8px + attr(...) * 10px)`）；为兼容尚无该能力的引擎，这里由组件
+   同时下发 `--mh-tree-level`，公式仍在 CSS 内（数值只取令牌，不散落字面量）。 */
+
+.mh-tree {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--ui-tree-row-gap);
+  width: 100%;
+}
+
+.mh-tree__row {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-1);
+  height: var(--ui-tree-row-height);
+  padding: 0 var(--ui-space-2);
+  /* 缩进：基础内距 + level × 步进（level 由组件下发） */
+  padding-left: calc(var(--ui-tree-indent-base) + var(--mh-tree-level, 0) * var(--ui-tree-indent-step));
+  border-radius: var(--ui-radius-control);
+  font-size: var(--ui-font-caption);
+  color: var(--ui-base-content);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+/* 紧凑档（S）：节点行 28px */
+
+.mh-tree--compact .mh-tree__row {
+  height: var(--ui-tree-row-height-compact);
+}
+
+.mh-tree__row:hover {
+  background: var(--ui-primary-weak);
+}
+
+.mh-tree__row:active {
+  background: var(--ui-primary-subtle);
+}
+
+.mh-tree__row[data-selected='true'] {
+  background: var(--ui-primary-subtle);
+  color: var(--ui-primary);
+}
+
+/* 展开箭头：字形由 `@manohub/icon` 的 `<Icon name="chevron-down" />` 提供（本面不画字形）；
+   展开态即字形的本向（朝下），**收起态由本层转 −90°（指向右）** —— 与 `operations/collapse.css`
+   的 `.mh-collapse-caret` 同款配方（参考实现 `@aihub/theme` 的树也是「base 字形 + 收起态转竖向」）。 */
+
+.mh-tree__caret {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  /* 槽位与字形同档：常规图标一律 `--ui-font-icon`，本件不再自定箭头尺寸 */
+  width: var(--ui-font-icon);
+  height: var(--ui-font-icon);
+  color: var(--ui-base-content-subtle);
+  cursor: pointer;
+}
+
+/* 常规图标尺寸统一取全局图标档（`<Icon>` 的 width/height 是属性，优先级低于本规则） */
+.mh-tree__caret-icon {
+  width: var(--ui-font-icon);
+  height: var(--ui-font-icon);
+  transition: transform 0.15s ease;
+}
+
+.mh-tree__caret[data-expanded='false'] .mh-tree__caret-icon {
+  transform: rotate(-90deg);
+}
+
+/* 叶子节点：占位不显示图形，但保留槽位让同层文字对齐（槽位由 `.mh-tree__caret` 的宽高承担） */
+
+.mh-tree__caret--empty {
+  cursor: default;
+}
+
+.mh-tree__label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mh-tree__extra {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* 行尾操作区：默认隐藏，行悬浮（或行内获得焦点）时显形 —— 键盘 Tab 进来同样可见。
+   触屏没有 hover 能力，故 hover 缺失时恒显形，避免操作不可达。口径同 .mh-list-view__card-actions。 */
+
+.mh-tree__actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-space-1);
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.mh-tree__row:hover .mh-tree__actions {
+  opacity: 1;
+}
+
+.mh-tree__row:focus-within .mh-tree__actions {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .mh-tree__actions {
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,20 @@
+/**
+ * 组件几何令牌（只服务本件，故不随主题进 `@manohub/theme`）。
+ * 行高与节距取自设计稿《MH后台-0911》的组织树（`0:3921`）：行高 **34**（`0:3923` 的
+ * 高亮块 200×34）、**节距 40**（行文本 y = 3 / 43 / 83 / 123 / 163 ⇒ 40），故行间距 6。
+ * ⚠️ 改前是「行高 30 + 间距 2」（节距 32）——两套来源（规范与设计）给的节距都更松。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出：这些是**基础值**，锚在 `[data-manohub-ui]`（跨包唯一作用域锚，
+ * 由入口层无条件写在应用容器上）—— 任何落在容器里的分件都取得到值，不再依赖
+ * 「声明在某个组件根类上」这条脆弱假设。
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里（拆开会让档位失效）。
+ */
+[data-manohub-ui] {
+  --ui-tree-row-height: 34px;
+  --ui-tree-row-height-compact: 28px;
+  --ui-tree-row-gap: 6px; /* 节距 40 = 行高 34 + 间距 6 */
+  --ui-tree-indent-base: 8px;
+  --ui-tree-indent-step: 10px;
+  /* 箭头不再是本件自定的尺寸：**常规图标一律取全局图标档 `--ui-font-icon`**（见下方箭头规则） */
+}

package/dist/styles/components/upload.css

@@ -0,0 +1,150 @@
+/**
+ * Upload —— 上传（拖拽 / 点击上传区 + 已传文件列表 + 图片缩略图 + 上传链接）。
+ *
+ * 出处：`@aihub/theme` 的 `playground/components/upload.css` 与 `src/components/upload.css`
+ * （拖拽区 500 宽 / 内距 32 / 1px 虚线 Ne05 / 圆角 6；列表行 = 名称 13px + 大小 12px + 删除文本钮，
+ * 行高 8/12 内距、末行不画分隔线；缩略图 100×100 外框、内图 84×84；主提示 Te05 + 副提示 Te07）。
+ *
+ * **零 JS 的那一半**：`<label>` 擎着 `<input type="file">`（input 隐形但保持可聚焦），
+ * 点整块即唤起系统文件选择 —— 这是原生行为，本族不写一行脚本。
+ *
+ * **"点击上传"是 span，不是 button**（与规范的一处有意差异）：`<label>` 的激活行为在
+ * 「事件目标是交互式内容」时会被浏览器跳过，若把链接做成 `<button>`，点它就只会按按钮而**不唤起**
+ * 文件选择。做成 span 后整块（含这行字）都能唤起，皮还是链接样。
+ *
+ * **拖拽态需要 JS**（`dragenter/dragover/drop` 原生给不了 CSS 状态），故走组件下发的
+ * `[data-state='dragover']`；静态档 `.is-dragover` 供读图。
+ *
+ * **本件不自行发起请求**：文件列表由消费方受控（`files`），选择 / 删除 / 拖拽都只回调。
+ */
+.mh-upload {
+  /* 组件根：上传区与文件列表纵向排（间距 12） */
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-space-3);
+}
+
+/* ===== 拖拽 / 点击上传区（整块即触发器） ===== */
+.mh-upload__zone {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ui-space-1);
+  width: 100%;
+  max-width: var(--ui-upload-zone-max-width);
+  padding: var(--ui-upload-padding);
+  border: 1px dashed var(--ui-upload-line);
+  border-radius: var(--ui-upload-radius);
+  background: var(--ui-base-100);
+  text-align: center;
+  cursor: pointer;
+}
+/* 隐身开关：1px 盒 + clip-path，Tab 仍可达（与 checkbox / radio / capsule 同配方） */
+.mh-upload__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  clip-path: inset(50%);
+  appearance: none;
+  pointer-events: none;
+}
+/* 焦点环画在可见的区上（隐身开关没有可见焦点） */
+.mh-upload__zone:has(> .mh-upload__input:focus-visible) {
+  outline: 2px solid var(--ui-primary);
+  outline-offset: -2px;
+}
+/* 拖拽态（组件下发；原生无此态） */
+.mh-upload__zone[data-state='dragover'],
+.mh-upload__zone.is-dragover {
+  border-color: var(--ui-primary);
+  background: var(--ui-primary-weak);
+}
+/* 禁用：不可点（原生 disabled 与静态档同款） */
+.mh-upload__zone.is-disabled,
+.mh-upload__zone:has(> .mh-upload__input:disabled) {
+  border-color: var(--ui-base-300);
+  background: var(--ui-base-200);
+  cursor: not-allowed;
+}
+.mh-upload__zone-main {
+  font-size: var(--ui-font-caption);
+  color: var(--ui-upload-text);
+}
+.mh-upload__link {
+  color: var(--ui-primary);
+}
+.mh-upload__zone-hint {
+  font-size: var(--ui-upload-meta-size);
+  color: var(--ui-upload-hint);
+}
+
+/* ===== 已传文件列表（名称 + 大小 + 删除；末行不画线） ===== */
+.mh-upload__list {
+  width: 100%;
+  max-width: var(--ui-upload-zone-max-width);
+  border: 1px solid var(--ui-base-300);
+  border-radius: var(--ui-upload-radius);
+  overflow: hidden;
+}
+.mh-upload__item {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-3);
+  padding: var(--ui-space-2) var(--ui-space-3);
+  border-bottom: 1px solid var(--ui-base-300);
+}
+.mh-upload__item:last-child {
+  border-bottom: none;
+}
+.mh-upload__item-name {
+  font-size: var(--ui-font-caption);
+  color: var(--ui-base-content);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mh-upload__item-size {
+  flex: none;
+  font-size: var(--ui-upload-meta-size);
+  color: var(--ui-base-content-subtle);
+}
+/* 删除位推到最右（面归按钮族的文本档，这里只给定位） */
+.mh-upload__item-remove {
+  margin-left: auto;
+  flex: none;
+}
+
+/* ===== 图片缩略图（单张 / 列表） ===== */
+.mh-upload__thumb {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--ui-upload-thumb-size);
+  height: var(--ui-upload-thumb-size);
+  padding: var(--ui-space-2);
+  border: 1px solid var(--ui-base-300);
+  border-radius: var(--ui-upload-radius);
+  background: var(--ui-base-200);
+  font-size: var(--ui-upload-meta-size);
+  color: var(--ui-base-content-subtle);
+  overflow: hidden;
+}
+.mh-upload__thumb-img {
+  width: var(--ui-upload-thumb-inner);
+  height: var(--ui-upload-thumb-inner);
+  object-fit: cover;
+  border-radius: var(--ui-radius-sm);
+}
+.mh-upload__thumbs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ui-space-4);
+}

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

@@ -0,0 +1,27 @@
+/**
+ * upload —— 单件令牌（**基础值**）。
+ *
+ * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出（原先混写在 `upload.css` 顶部）：这些是**基础值**，锚在
+ * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
+ * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
+ * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
+ *
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
+ * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+ */
+[data-manohub-ui] {
+  /* 单件令牌 */
+  --ui-upload-padding: 32px; /* 规范间距档 8（本仓间距刻度最大 24，故按实测值给） */
+  --ui-upload-zone-max-width: 500px; /* 规范拖拽区帧宽 */
+  --ui-upload-radius: var(--ui-radius-control);
+  --ui-upload-line: var(--ui-base-400); /* 虚线边 Ne05 邻档 */
+  --ui-upload-text: var(--ui-base-content-muted); /* 主提示 Te05 */
+  --ui-upload-hint: var(--ui-base-content-subtle); /* 副提示 Te07 */
+  --ui-upload-meta-size: var(--ui-font-caption); /* 大小/缩略图文字：规范 12，本仓字阶最小 13 */
+  --ui-upload-thumb-size: 100px; /* 规范缩略图外框 */
+  --ui-upload-thumb-inner: 84px; /* 规范内图 */
+}

package/dist/styles/index.css

@@ -0,0 +1,149 @@
+/**
+ * @manohub/ui 组件面入口（对外公开为 `@manohub/ui/styles.css`）。
+ *
+ * 本层是**无 JS 组件面**：只声明类与状态协议（原生伪类 / `[data-state]` / `attr()`），
+ * **零令牌定义** —— 令牌一律消费主题。故加载顺序固定：
+ *
+ *     @manohub/theme/default.css（全局值） → styles.css（组件令牌基础值 → 面）
+ *
+ * 换主题只换前一行；静态页（不装 Vue）同样只需这两行。
+ *
+ * ## 令牌三段（0.6.0 起）
+ *
+ * | 段 | 命名 | 落点 | 锚 |
+ * |---|---|---|---|
+ * | 全局令牌（跨件共用的值） | `--ui-{primary,base-*,space-*,radius-*,shadow-*,font-*}` | `@manohub/theme` | `[data-manohub-ui]` |
+ * | 组件令牌**基础值** | `--ui-<件>-*` | 本目录同名 `<件>.tokens.css` | `[data-manohub-ui]` |
+ * | 组件令牌**档位改写** | `--ui-<件>-*` | 面文件 `<件>.css` 的**修饰符块** | `.mh-<件>--<档>` 等 |
+ * | 内部状态变量 | `--mh-<件>-*` | 面文件（修饰符机制本身） | 组件根类 / 修饰符类 |
+ *
+ * 后两段必须留在面里：它们靠「同一元素上两个不同选择器改写同一个令牌」生效
+ * （`.mh-capsule { --ui-capsule-height: 32px }` + `.mh-capsule--sm { … 24px }`），
+ * 拆到两个文件里档位就会失效。
+ *
+ * 基础值锚在 `[data-manohub-ui]`（**跨包唯一作用域锚**：一个库品牌属性，由入口层
+ * `createSubApp` 无条件写在应用容器上）—— 容器是每个组件的祖先，于是
+ * 「跨件消费的令牌取不到值」那一整类静默失效从根上消失
+ * （历史症状：组内间距变 0、组内分割线高度 0、面板圆角 0；改前靠「把令牌同时声明在
+ * 若干个外层类上」的 workaround 兜）。
+ *
+ * ⚠️ 组件 CSS **不得**用 `import './x.css'` 副作用引入（会让 dist 的 .d.ts 留下消费方解析不了的
+ * CSS 导入，且被 verify-pack 拦）；样式只经本文件汇总，由消费方的样式链级联进来。
+ *
+ * ⚠️ **本文件的注释里不得出现 `**` 紧跟斜杠的 glob 写法**（如写 `dist` 下的产物时）——
+ * 那个序列会被解析成注释结束符，把注释提前闭合、**后面所有 @import 一起失效**（浏览器里表现为
+ * 本文件 0 条规则，组件面全丢）。护栏 `contract-class-surface.spec.ts` 有机械检查。
+ *
+ * ⚠️ 新增组件**五处齐备**（少一处即静默失效）：
+ *    `components/<件>/index.tsx` + `styles/components/<件>.css` + `styles/components/<件>.tokens.css`
+ *    + 在本文件登记两条 `@import`（值区与面区各一条）+ `src/index.ts` 加导出
+ *
+ * 归属判据：只服务单一组件的几何令牌写在该组件的 `<件>.tokens.css`（锚容器）；
+ * 跨件共用的值一律进 `@manohub/theme`；面上的 `--ui-*` 只允许出现在**修饰符块**里
+ * （护栏会拦「面里出现不含修饰符类的 `--ui-*` 声明」）。
+ *
+ * 层序：**值在前、面在后**；面内部**操作层在前**（零 JS 原语、规则走 `:where()` 零特异性，
+ * 永远给皮肤让位），组件面在后。
+ */
+
+/* ===== 值：组件令牌基础值（锚 `[data-manohub-ui]`，与主题令牌同层序） ===== */
+/* 容器与分区 */
+@import './components/collapse.tokens.css';
+@import './components/divider.tokens.css';
+
+/* 数据展示 */
+@import './components/tree.tokens.css';
+@import './components/tag.tokens.css';
+@import './components/avatar.tokens.css';
+@import './components/skeleton.tokens.css';
+@import './components/code.tokens.css';
+@import './components/code-editor.tokens.css';
+
+/* 表单与选择控件 */
+@import './components/button.tokens.css';
+@import './components/input.tokens.css';
+@import './components/select.tokens.css';
+@import './components/switch.tokens.css';
+@import './components/form.tokens.css';
+@import './components/checkbox.tokens.css';
+@import './components/radio.tokens.css';
+@import './components/capsule.tokens.css';
+@import './components/filter.tokens.css';
+
+/* 反馈与三态 */
+@import './components/notice.tokens.css';
+@import './components/notification.tokens.css';
+@import './components/loading.tokens.css';
+
+/* 浮层皮肤 */
+@import './components/dialog.tokens.css';
+@import './components/drawer.tokens.css';
+@import './components/tooltip.tokens.css';
+
+/* 数据与反馈 */
+@import './components/table.tokens.css';
+@import './components/pagination.tokens.css';
+@import './components/tabs.tokens.css';
+@import './components/steps.tokens.css';
+@import './components/toast.tokens.css';
+
+/* 内容与文件 */
+@import './components/upload.tokens.css';
+
+/* ===== 面：零令牌定义，只声明类与状态协议 ===== */
+/* 操作层（零 JS 原语，自身不带面；面由下面的皮肤族并列组合提供） */
+@import './operations/collapse.css';
+@import './operations/popup.css';
+@import './operations/tabset.css';
+
+/* 容器与分区 */
+@import './components/page.css'; /* 页面级骨架（唯一；区域级是 Panel） */
+@import './components/panel.css';
+@import './components/collapse.css'; /* Collapse 的头行皮肤（行为在 operations/collapse.css） */
+@import './components/card.css';
+@import './components/divider.css'; /* 内容之间的分隔线（设计稿内容区 44 处在用；不是各件自己的框线） */
+@import './components/nav.css';
+@import './components/layout.css'; /* 布局原子件族（Layout.Row 排「行」/ Layout.Column 排「列」）；与任何件都无层序耦合 */
+
+/* 数据展示 */
+@import './components/tree.css';
+@import './components/list-view.css';
+@import './components/badge.css';
+@import './components/tag.css';
+@import './components/avatar.css';
+@import './components/skeleton.css';
+@import './components/code.css'; /* 行内 chip / 代码块（复制按钮的面归按钮族，故在其后）；面里靠升一档特异性压过按钮族，见其文件头 */
+@import './components/code-editor.css'; /* 可编辑代码区（与只读块视觉同源；无按钮，与按钮族无层序关系） */
+
+/* 表单与选择控件（按钮 → 输入 → 选择 → 开关 → 勾选 → 单选（两形态同面）→ 胶囊） */
+@import './components/button.css';
+@import './components/input.css';
+@import './components/search.css'; /* 搜索框：只有「一行里怎么摆」，输入框与按钮的面各自归族（故必须排在 input.css 之后） */
+@import './components/select.css';
+@import './components/switch.css';
+@import './components/form.css';
+@import './components/checkbox.css';
+@import './components/radio.css'; /* 单选一件两形态（`.Group` / `.Card`）同一个面文件 */
+@import './components/capsule.css';
+@import './components/filter.css'; /* 筛选条：条件字段区 + 查询/重置（控件由消费方自放） */
+
+/* 反馈与三态 */
+@import './components/notice.css';
+@import './components/notification.css'; /* 通知卡（与 notice 条状提示是两族，前缀刻意不同） */
+@import './components/query-state.css';
+@import './components/loading.css'; /* 加载态（转圈 + 遮罩）：三态容器看 QueryState，块级占位看 Skeleton */
+
+/* 浮层皮肤（与操作层并列组合：对话框走原生 <dialog>，提示走 hover 档） */
+@import './components/dialog.css';
+@import './components/drawer.css'; /* 抽屉：与 dialog 同一套行为只换落位（模态 / 遮罩 / Esc 都由原生 <dialog> 承担） */
+@import './components/tooltip.css'; /* 浮层皮肤：类名 .mh-tooltip*（与族名 / 令牌同根） */
+
+/* 数据与反馈（表格 / 分页条 / 页签条 / 步骤条 / 消息提示） */
+@import './components/table.css';
+@import './components/pagination.css';
+@import './components/tabs.css';
+@import './components/steps.css';
+@import './components/toast.css';
+
+/* 内容与文件 */
+@import './components/upload.css';