@manohub/ui 0.6.0

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

@@ -0,0 +1,41 @@
+/**
+ * 单件令牌。
+ *
+ * **本件有一批令牌是「跨分件消费」的**：表壳 `.mh-input__wrap` 是 `.mh-input` 的**父容器**
+ * （`.mh-input__wrap > .mh-input` 就是证据），`.mh-input__menu` / `.mh-input__help-tip`
+ * 是 popover 面板（不在控件子树里）—— 自定义属性只向下继承，声明在 `.mh-input` 上会让
+ * 计数位 / 前后缀 / 标签 / 菜单项取不到值（声明作废，且不报错）。
+ *
+ * 改前靠「把令牌同时声明在 4 个外层类上」的 workaround 兜；锚到容器后容器是每个分件的祖先，
+ * workaround 整块撤掉 —— 这正是本文件从面文件里抽出来的直接原因。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出：这些是**基础值**，锚在 `[data-manohub-ui]`（跨包唯一作用域锚，
+ * 由入口层无条件写在应用容器上）—— 任何落在容器里的分件都取得到值，不再依赖
+ * 「声明在某个组件根类上」这条脆弱假设。
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里（拆开会让档位失效）。
+ */
+[data-manohub-ui] {
+  /* 展示态是**独立 `<span>`**（不带 `.mh-input`）—— 令牌锚在容器上，它照样取得到 */
+  /* 单件令牌 */
+  --ui-input-height: var(--ui-control-height-md); /* 标准档 32 */
+  --ui-input-height-sm: var(--ui-control-height-sm); /* 小号 24 */
+  --ui-input-height-lg: var(--ui-control-height-lg); /* 大号 40 */
+  --ui-input-padding-x: var(--ui-space-3); /* 12：标准档左右内距 */
+  --ui-input-padding-x-sm: var(--ui-space-2); /* 8 */
+  --ui-input-padding-x-lg: 14px;
+  --ui-input-radius: var(--ui-radius-control); /* 6：控件档（原注释写 8，是旧稿残留） */
+  --ui-input-font-size: var(--ui-font-body); /* 14：控件内容走正文档 */
+  --ui-input-font-size-sm: var(--ui-font-caption); /* 13 */
+  --ui-input-font-size-lg: var(--ui-font-heading); /* 16 */
+  /* 描边取 base-300（= 设计 `0:3946` 搜索框的 `#e6e6e6`），与卡片 / 表格 / 按钮 / 分页同一条线。
+     ⚠️ 改前是 base-400，而 `filter.css` 的既有裁决早已写明「控件框边 = --ui-base-300」——
+     本件与它是同一条规格，之前的 base-400 属自相矛盾。base-400 从此只服务勾选类小控件框体。 */
+  --ui-input-line: var(--ui-base-300);
+  --ui-input-line-hover: var(--ui-primary-hover); /* 滑过 / 聚焦转主色（规范 Th08） */
+  --ui-input-textarea-min-height: 56px; /* 多行最小高（两行正文 + 上下内距） */
+  --ui-input-counter-size: var(--ui-font-caption);
+  --ui-input-icon-size: 14px; /* 清除圆点 */
+  --ui-input-affix-gap: var(--ui-space-2); /* 壳内各附加位的间隔 */
+  --ui-input-affix-size: var(--ui-font-icon); /* 前缀 / 后缀 / 眼睛的图标槽（常规图标档） */
+}

package/dist/styles/components/layout.css

@@ -0,0 +1,198 @@
+/**
+ * Layout —— 布局原子件族（`Layout.Row` 排「行」/ `Layout.Column` 排「列」）。
+ *
+ * 出处：应用侧反复抄写 `display:flex; align-items:center; gap:8px` 的收敛 ——「应用侧只写布局」
+ * 不等于「布局可以各页各写一套」：抄十遍之后间距档与居中口径必然分叉。
+ * 两件只做三件事：**轴向**、**间距档**（令牌档位）、**对齐**。
+ *
+ * ## 方向口径（与 CSS 属性名相反，是刻意的）
+ *
+ *   行与行是上下关系 ⇒ `Row` 是**竖排容器**（`.mh-layout-row` = `flex-direction: column`）；
+ *   列与列是左右关系 ⇒ `Column` 是**水平容器**（`.mh-layout-column` = `row`）。
+ *   判据是「读表格」：`<tr>` 一行行往下堆、一行里的格子左右并排。改这条 = 改口径。
+ *
+ * ## 栅格公式（`Row` 传了 `columns` 时）
+ *
+ * 显式 N 条轨道，track 下限取 `min(最小列宽, 均分)`、上限 `1fr`：
+ *
+ * - 容器够宽 → 每列 = 最小列宽（或更大，被 `1fr` 均分撑满）；
+ * - 容器不够宽 → 下限退到「均分」，列**等分收窄**（不会压成窄缝、不会横向溢出）。
+ *
+ * 公式里的 `%` 解析的是**栅格容器自己的内联尺寸**（不是视口），故放进弹窗 / 分栏同样成立
+ * —— 这也是不用媒体查询断点的原因（页面都在弹窗与分栏里，视口宽度代表不了容器）。
+ *
+ * ⚠️ **别改回 `auto-fit`**：轨道数由「能塞下几条最小列宽」决定，恰好塞不下 N 列时会退化成
+ * 「1 条显式 + 1 条隐式」轨道，跨格项把隐式轨道按内容宽度压成窄缝。
+ * 浏览器实测（容器 526 / 最小 260 / `columns=2`）：
+ * `auto-fit` 版 → 476px + 41px（不等宽）；显式 N 版 → 259px + 259px（等宽）。
+ *
+ * ## 令牌
+ *
+ * `--mh-layout-row-*` / `--mh-layout-column-*` 都声明在各自的根类上（可被行内样式覆盖 ——
+ * `Layout.Row` 的 `minColumnWidth` 就是这么下发 `--mh-layout-row-min` 的）；
+ * 间距值取主题令牌 `--ui-space-1..4`，本文件**不新造色值 / 尺寸字面量**。
+ */
+.mh-layout-row {
+  --mh-layout-row-gap: var(--ui-space-2);
+  --mh-layout-row-min: var(--ui-grid-column-min);
+  --mh-layout-row-columns: 2;
+  display: flex;
+  flex-direction: column;
+  gap: var(--mh-layout-row-gap);
+  /* 交叉轴（水平）不声明 = CSS 默认的 stretch（子项齐宽）；要居中写 align="center" */
+  /* 放开 min-width：行常被塞进窄格子（表格单元格、限宽控件列）——
+     不放开的 flex 容器压不进窄格，会把外层撑破 */
+  min-width: 0;
+}
+
+/* 一行分 n 列：栅格轨道横向铺，这一行的子项并排（`columns-1` 就是一行一列） */
+.mh-layout-row--grid {
+  display: grid;
+  /* 交叉轴默认回到 stretch（单元等高）；显式 align 的规则排在本条之后，能压过它 */
+  align-items: stretch;
+  /* 列数**恒为 N**（显式轨道，不用 auto-fit：auto-fit 在「N 列刚好放不下」时会退化成
+     1 条显式轨道 + 隐式轨道，跨格项把隐式轨道压成几十像素的窄缝 —— 实测过）。
+     track 下限取 min(最小列宽, 均分)：容器够宽时它就是最小列宽，
+     容器窄时退到均分 —— 于是列始终等宽，既不会被压成窄缝，也不会横向溢出。 */
+  grid-template-columns: repeat(
+    var(--mh-layout-row-columns),
+    minmax(
+      min(
+        var(--mh-layout-row-min),
+        calc(
+          (100% - (var(--mh-layout-row-columns) - 1) * var(--mh-layout-row-gap)) /
+            var(--mh-layout-row-columns)
+        )
+      ),
+      1fr
+    )
+  );
+}
+
+/* 列数上限 → 变量（供上面的栅格公式取用） */
+.mh-layout-row--columns-1 {
+  --mh-layout-row-columns: 1;
+}
+.mh-layout-row--columns-2 {
+  --mh-layout-row-columns: 2;
+}
+.mh-layout-row--columns-3 {
+  --mh-layout-row-columns: 3;
+}
+.mh-layout-row--columns-4 {
+  --mh-layout-row-columns: 4;
+}
+
+/* 间距档 → 变量（落到变量上：行那份栅格公式里要用同一个间距值算轨道下限）。
+   sm/md/lg/xl = --ui-space-1/2/3/4 = 4/8/12/16；none = 0 */
+.mh-layout-row--gap-none {
+  --mh-layout-row-gap: 0;
+}
+.mh-layout-row--gap-sm {
+  --mh-layout-row-gap: var(--ui-space-1);
+}
+.mh-layout-row--gap-md {
+  --mh-layout-row-gap: var(--ui-space-2);
+}
+.mh-layout-row--gap-lg {
+  --mh-layout-row-gap: var(--ui-space-3);
+}
+.mh-layout-row--gap-xl {
+  --mh-layout-row-gap: var(--ui-space-4);
+}
+
+/* --- 列：水平容器（一行里的一格；同时是栅格单元） --- */
+.mh-layout-column {
+  --mh-layout-column-gap: var(--ui-space-2);
+  display: flex;
+  flex-direction: row;
+  /* 默认**垂直居中**：列里多是「徽标 + 文本」「标签 + 值」「控件 + 按钮」这类内容要齐中线；
+     要贴顶写 align="start"、要齐宽写 align="stretch" */
+  align-items: center;
+  gap: var(--mh-layout-column-gap);
+  min-width: 0;
+}
+
+.mh-layout-column--gap-none {
+  --mh-layout-column-gap: 0;
+}
+.mh-layout-column--gap-sm {
+  --mh-layout-column-gap: var(--ui-space-1);
+}
+.mh-layout-column--gap-md {
+  --mh-layout-column-gap: var(--ui-space-2);
+}
+.mh-layout-column--gap-lg {
+  --mh-layout-column-gap: var(--ui-space-3);
+}
+.mh-layout-column--gap-xl {
+  --mh-layout-column-gap: var(--ui-space-4);
+}
+
+/* 折行属于**水平容器**（列里的内容太宽要折行）；竖排容器没有「折行」这回事，
+   栅格形态的「折行」由自动减列承担 */
+.mh-layout-column--wrap {
+  flex-wrap: wrap;
+}
+
+/* 栅格单元跨格（span 不要超过所在行的 columns，超了 auto-fit 会为它多开轨道） */
+.mh-layout-column--span-2 {
+  grid-column: span 2;
+}
+.mh-layout-column--span-3 {
+  grid-column: span 3;
+}
+.mh-layout-column--span-4 {
+  grid-column: span 4;
+}
+
+/* 对齐（排在 `.mh-layout-row--grid` 的 stretch 之后：显式 align 要能压过它） */
+.mh-layout-row--align-start {
+  align-items: flex-start;
+}
+.mh-layout-column--align-start {
+  align-items: flex-start;
+}
+.mh-layout-row--align-center {
+  align-items: center;
+}
+.mh-layout-column--align-center {
+  align-items: center;
+}
+.mh-layout-row--align-end {
+  align-items: flex-end;
+}
+.mh-layout-column--align-end {
+  align-items: flex-end;
+}
+.mh-layout-row--align-baseline {
+  align-items: baseline;
+}
+.mh-layout-column--align-baseline {
+  align-items: baseline;
+}
+.mh-layout-row--align-stretch {
+  align-items: stretch;
+}
+.mh-layout-column--align-stretch {
+  align-items: stretch;
+}
+
+.mh-layout-row--justify-center {
+  justify-content: center;
+}
+.mh-layout-column--justify-center {
+  justify-content: center;
+}
+.mh-layout-row--justify-end {
+  justify-content: flex-end;
+}
+.mh-layout-column--justify-end {
+  justify-content: flex-end;
+}
+.mh-layout-row--justify-between {
+  justify-content: space-between;
+}
+.mh-layout-column--justify-between {
+  justify-content: space-between;
+}

package/dist/styles/components/list-view.css

@@ -0,0 +1,244 @@
+/**
+ * ListView（卡片网格列表：容器自适应列数 + 骨架卡 + 三态）。
+ *
+ * 依据：卡片本体沿用 card.css（Card）；本文件只管网格容器、骨架卡与卡片项几何。
+ */
+
+/* ===== ListView（卡片网格列表：容器自适应列数 + 骨架卡 + 三态）=====
+   列数由**容器宽度**决定（auto-fill），不跟视口断点：窄栏自动减列。
+   `min(var(--mh-list-view-min), 100%)` 是必需的一层保护 —— 只写固定下限时，
+   容器比下限还窄会溢出（列宽不会缩到容器以内）。 */
+
+.mh-list-view {
+  --mh-list-view-min: var(--ui-grid-column-min);
+  --mh-list-view-gap: var(--ui-space-5);
+  --mh-list-view-card-min-height: 144px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(var(--mh-list-view-min), 100%), 1fr));
+  gap: var(--mh-list-view-gap);
+  align-items: stretch;
+}
+
+/* 骨架卡：与卡片同尺寸（最小高 + 圆角），避免加载完成时高度跳动 */
+
+.mh-list-view__skeleton {
+  min-height: var(--mh-list-view-card-min-height);
+  border-radius: var(--ui-radius-md);
+  background: var(--ui-base-200);
+  animation: mh-list-view-pulse 1.4s ease-in-out infinite;
+}
+
+@keyframes mh-list-view-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.55;
+  }
+}
+
+/* 列表卡片项：最小高对齐（原型 min-h-36），同排卡片等高、尾部一行对齐 */
+
+.mh-list-view__card {
+  min-height: var(--mh-list-view-card-min-height);
+}
+
+/* 头部：图标 + 标题块 + 状态胶囊（原型 flex items-start） */
+
+.mh-list-view__card-head {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ui-space-3);
+}
+
+/* 图标容器 36×36（原型 h-9 w-9），圆角取控件档 6（原型 rounded-md） */
+
+.mh-list-view__card-icon {
+  flex: none;
+  width: 36px;
+  height: 36px;
+  overflow: hidden;
+  border-radius: var(--ui-radius-control);
+}
+
+.mh-list-view__card-icon-img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.mh-list-view__card-title-block {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+/* 标题 16/600（原型 text-base font-semibold leading-6，与令牌档一致） */
+
+.mh-list-view__card-title {
+  overflow: hidden;
+  font-size: var(--ui-font-heading);
+  font-weight: var(--ui-weight-semibold);
+  line-height: var(--ui-line-heading);
+  color: var(--ui-base-content);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mh-list-view__card-subtitle {
+  font-size: var(--ui-font-caption);
+  line-height: var(--ui-line-caption);
+  color: var(--ui-base-content-muted);
+}
+
+/* 状态胶囊：全圆角 + 弱底同色字（原型 rounded-full px-2.5 text-xs leading-5） */
+
+.mh-list-view__card-status {
+  --mh-status-fg: var(--ui-primary);
+  --mh-status-bg: var(--ui-primary-weak);
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--ui-space-1);
+  margin-left: auto;
+  padding: 0 10px;
+  border-radius: var(--ui-radius-full);
+  font-size: var(--ui-font-caption);
+  line-height: var(--ui-line-caption);
+  white-space: nowrap;
+  color: var(--mh-status-fg);
+  background: var(--mh-status-bg);
+}
+
+.mh-list-view__card-status--primary {
+  --mh-status-fg: var(--ui-primary);
+  --mh-status-bg: var(--ui-primary-weak);
+}
+
+.mh-list-view__card-status--success {
+  --mh-status-fg: var(--ui-success-strong);
+  --mh-status-bg: var(--ui-success-weak);
+}
+
+.mh-list-view__card-status--warning {
+  --mh-status-fg: var(--ui-warning-strong);
+  --mh-status-bg: var(--ui-warning-weak);
+}
+
+.mh-list-view__card-status--error {
+  --mh-status-fg: var(--ui-error);
+  --mh-status-bg: var(--ui-error-weak);
+}
+
+.mh-list-view__card-status--neutral {
+  --mh-status-fg: var(--ui-base-content-muted);
+  --mh-status-bg: var(--ui-base-200);
+}
+
+.mh-list-view__card-status-dot {
+  width: 6px;
+  height: 6px;
+  flex: none;
+  border-radius: var(--ui-radius-full);
+  background: var(--mh-status-fg);
+}
+
+/* 描述：两行截断（原型 line-clamp-2 text-xs text-muted-foreground） */
+
+.mh-list-view__card-desc {
+  display: -webkit-box;
+  margin: 0;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  font-size: var(--ui-font-caption);
+  line-height: var(--ui-line-caption);
+  color: var(--ui-base-content-muted);
+}
+
+/* 尾部：左「自定义内容 + 标签组」、右「统计 + 操作位」；贴卡片底部（原型 mt-auto） */
+
+.mh-list-view__card-foot {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  margin-top: auto;
+}
+
+.mh-list-view__card-foot-main {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  min-width: 0;
+}
+
+.mh-list-view__card-foot-side {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--ui-space-1);
+  margin-left: auto;
+}
+
+.mh-list-view__card-tags {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  min-width: 0;
+}
+
+/* 标签片：主色弱底 + 主色字 + 小圆角（原型 rounded bg-primary/10 px-2 leading-5 font-medium） */
+
+.mh-list-view__card-tag {
+  flex: none;
+  padding: 0 var(--ui-space-2);
+  border-radius: var(--ui-radius-sm);
+  font-size: var(--ui-font-caption);
+  font-weight: var(--ui-weight-medium);
+  line-height: var(--ui-line-caption);
+  color: var(--ui-primary);
+  background: var(--ui-primary-weak);
+}
+
+.mh-list-view__card-extra {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-space-1);
+  font-size: var(--ui-font-caption);
+  line-height: var(--ui-line-caption);
+  color: var(--ui-base-content-muted);
+}
+
+/* 操作位：默认隐藏，卡片悬浮（或卡内获得焦点）时显形 —— 键盘 Tab 进来同样可见。
+   触屏没有 hover 能力，故 hover 缺失时恒显形，避免操作不可达。 */
+
+.mh-list-view__card-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-space-1);
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.mh-list-view__card:hover .mh-list-view__card-actions {
+  opacity: 1;
+}
+
+.mh-list-view__card:focus-within .mh-list-view__card-actions {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .mh-list-view__card-actions {
+    opacity: 1;
+  }
+}
+
+/* ===== 固定列数档（`columns > 0`）：不再按容器宽度自适应 ===== */
+.mh-list-view--fixed {
+  grid-template-columns: repeat(var(--mh-list-view-columns, 1), minmax(0, 1fr));
+}

package/dist/styles/components/loading.css

@@ -0,0 +1,76 @@
+/**
+ * Loading —— 加载态面（转圈 + 可选文案；行内 / 区域遮罩 / 全屏遮罩三形态）。
+ *
+ * 出处：设计稿的「正在忙」态没有独立组件，各页自绘了五花八门的遮罩与转圈
+ * （`::after` 画环、文字符号 `...`、gif 图各有）。本件收的是**三件事**：
+ * 转圈字形、遮罩底色、覆盖范围 —— 三者都是「改一处要全会跟着变」的口径。
+ *
+ * 字形归 `@manohub/icon`（`loading`），本面只负责**转**与**在哪转**：
+ * 动画名加 `mh-` 前缀（与 toast 的 `mh-toast-spin` 同理：动画名是全局标识，防撞名）。
+ *
+ * 尺寸按**全局图标档**派生（`calc()` 加减，与 button.css 同款）：
+ * 改全局图标档时三档一起缩放，不会出现「转圈比旁边图标大一圈」。
+ *
+ * 遮罩底色由主题底色派生（`color-mix`，**不新造色值**）：换主题跟着变。
+ */
+.mh-loading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ui-loading-gap);
+  color: var(--ui-loading-text-color);
+  font-size: var(--ui-font-body);
+  line-height: var(--ui-line-body);
+}
+
+/* 尺寸档（按全局图标档派生，档距用 calc 表达） */
+.mh-loading--sm {
+  --ui-loading-spinner-size: calc(var(--ui-font-icon) - 4px);
+}
+.mh-loading--lg {
+  --ui-loading-spinner-size: calc(var(--ui-font-icon) + 8px);
+}
+
+.mh-loading__spinner {
+  flex: none;
+  width: var(--ui-loading-spinner-size);
+  height: var(--ui-loading-spinner-size);
+  /* 转圈是**提示进行中**，取主色：与语义四色（成功/警告/错误）不混 |
+     独立 `rotate` 属性（不碰 transform）：与全库动画令牌同款约束 */
+  color: var(--ui-primary);
+  animation: mh-loading-spin 0.8s linear infinite;
+}
+@keyframes mh-loading-spin {
+  to {
+    rotate: 360deg;
+  }
+}
+/* 降级：减弱动效时放慢而不是全停 —— 完全静止的转圈会被读成「卡住了」 */
+@media (prefers-reduced-motion: reduce) {
+  .mh-loading__spinner {
+    animation-duration: 2.4s;
+  }
+}
+
+.mh-loading__text {
+  min-width: 0;
+}
+
+/* ===== 区域遮罩：铺满**最近的定位祖先**（宿主需自带 position: relative）===== */
+.mh-loading--area {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  background: var(--ui-loading-mask);
+  /* 遮罩要拦住交互：光标与吞点击都是「正在忙」的表达 */
+  cursor: wait;
+}
+
+/* ===== 全屏遮罩：铺满视口（层级夹在 toast 堆叠 1080 与模态 top layer 之间）===== */
+.mh-loading--screen {
+  position: fixed;
+  inset: 0;
+  z-index: 1090;
+  background: var(--ui-loading-mask);
+  cursor: wait;
+}

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

@@ -0,0 +1,23 @@
+/**
+ * loading —— 单件令牌（**基础值**）。
+ *
+ * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出（原先混写在 `loading.css` 顶部）：这些是**基础值**，锚在
+ * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
+ * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
+ * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
+ *
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
+ * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+ */
+[data-manohub-ui] {
+  /* 单件令牌 */
+  --ui-loading-spinner-size: var(--ui-font-icon);
+  --ui-loading-gap: var(--ui-space-2);
+  /* 无规范取值：由主题底色派生（本包唯一的面色令牌），不新造色值 */
+  --ui-loading-mask: color-mix(in srgb, var(--ui-base-100) 72%, transparent);
+  --ui-loading-text-color: var(--ui-base-content-muted);
+}

package/dist/styles/components/nav.css

@@ -0,0 +1,48 @@
+/**
+ * Nav（侧栏导航：list / tree 两态，行渲染复用 Tree）。
+ *
+ * 依据：@aihub/theme 的 pages/tree-page.css（导航区 12/14）+ components/tree.css（行几何）。
+ */
+
+/* ===== Nav（侧栏导航：list / tree 两态，行渲染复用 Tree）=====
+   根件不滚（滚动归导航体）。宽度只认 --mh-nav-width（组件按 `width` prop 下发，缺省填满所在栏），
+   与 .mh-tree 的缩进同一手法：几何载荷走变量，公式留在 CSS。 */
+
+.mh-nav {
+  display: flex;
+  flex-direction: column;
+  /* 缺省填满所在栏：列宽归 Page.Split / 外层布局（导航件不重复锁一个可能与栏宽不符的数） */
+  width: var(--mh-nav-width, 100%);
+  min-width: 0;
+  height: 100%;
+  overflow: hidden;
+}
+
+.mh-nav__title {
+  flex-shrink: 0;
+  padding: var(--ui-space-2);
+  font-size: var(--ui-font-body);
+  line-height: var(--ui-line-body);
+  font-weight: var(--ui-weight-semibold);
+  color: var(--ui-base-content);
+}
+
+/* 导航体：侧栏内滚动的唯一归属（同 Panel.Body 的口径） */
+
+.mh-nav__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--ui-space-1) 0;
+}
+
+/* list 态：扁平导航没有层级，隐藏箭头占位（那一段留给树对齐用） */
+
+.mh-nav--list .mh-tree__caret {
+  display: none;
+}
+
+/* ===== 右侧分隔线（侧栏贴在页面容器里时用） ===== */
+.mh-nav--bordered {
+  border-right: 1px solid var(--ui-base-300);
+}