@manohub/ui 0.6.0

package/dist/styles/components/collapse.css

@@ -0,0 +1,62 @@
+/**
+ * Collapse 的头行皮肤（**操作层 `../operations/collapse.css` 只给行为，这里给折叠头的面**）。
+ *
+ * 分工（两层各自单一职责）：
+ *   · 操作层 → 开合派生、触发器钩子、键盘焦点环、箭头转向（不写任何底/边/内距/字号/gap）；
+ *   · 本文件 → 「头行怎么排」：标题排版、标题位与尾部（箭头/操作）的分布、箭头尺寸与色。
+ * 之所以不并进操作层：操作层要能伺候任意皮肤（卡片头 / 分组头 / 面板头），而本件是**自带头的折叠**。
+ *
+ * 类名沿用操作层的「词根-角色」写法（`mh-collapse-header` 一类，与 `@aihub/theme` 的
+ * `collapse-header` 同名，便于回规范对照）；本仓既有组件的 `__` 写法不适用于操作层挂点 ——
+ * 那些元素互不为父子（触发器 ↔ 浮层、锚点 ↔ 浮层）。
+ *
+ * 出处：`@aihub/theme` 的 `playground/components/collapse.html` 与 `components/card.css`
+ * （头行「标题 + 箭头」、标题与箭头间距 8px、标题 14/600 同二级标题档）。
+ */
+
+/* 头行（触发器本体）：标题位 ←→ 尾部（箭头 + 额外位），整行可点 */
+.mh-collapse-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ui-collapse-header-gap);
+  min-height: var(--ui-collapse-header-min-height);
+  font-size: var(--ui-font-body);
+  font-weight: var(--ui-weight-semibold);
+  color: var(--ui-base-content);
+}
+
+/* 标题位：单行截断（长标题不把尾部挤出可视区） */
+.mh-collapse-title {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* 尾部：额外位（计数 / 行内操作）+ 箭头，与标题同行 */
+.mh-collapse-extra {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--ui-space-2);
+  color: var(--ui-base-content-muted);
+}
+
+/* 箭头：字形由 `@manohub/icon` 的 `<Icon name="chevron-down">` 提供，这里只定色与尺寸（转向在操作层）。
+   尺寸取全局图标档 —— 常规图标一律 `--ui-font-icon`，本件不再自定（与树箭头同档）。 */
+.mh-collapse-caret {
+  flex: none;
+  width: var(--ui-font-icon);
+  height: var(--ui-font-icon);
+  color: var(--ui-base-content-muted);
+}
+
+/* ===== 禁用档：头行不可点（开合已在组件里 `preventDefault` 挡住） ===== */
+.mh-collapse[data-disabled='true'] > .mh-collapse-header {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.mh-collapse[data-disabled='true'] > .mh-collapse-header .mh-collapse-caret {
+  display: none; /* 不能开合就别留一个会转的箭头 */
+}

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

@@ -0,0 +1,20 @@
+/**
+ * collapse —— 单件令牌（**基础值**）。
+ *
+ * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出（原先混写在 `collapse.css` 顶部）：这些是**基础值**，锚在
+ * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
+ * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
+ * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
+ *
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
+ * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+ */
+[data-manohub-ui] {
+  /* 单件几何（只服务本件，故写在这里；跨件令牌才进 theme/） */
+  --ui-collapse-header-gap: var(--ui-space-2); /* 标题位与尾部间距 8px（规范实测） */
+  --ui-collapse-header-min-height: var(--ui-row-height); /* 头行最小高 = 行高档，保证可点区高度 */
+}

package/dist/styles/components/dialog.css

@@ -0,0 +1,106 @@
+/**
+ * Dialog —— 对话框皮肤（与操作层并列组合：`class="mh-popup mh-dialog"`）。
+ *
+ * 出处：`@aihub/theme` 的 `playground/components/dialog.css` 与 `src/components/dialog.css`
+ * （面板 520 / 大档 760 / 圆角 16 / 软投影；页头 16 上内距 + 24 行高、内容内距 24、底栏 0/24/16；
+ *  **三段之间无分割线**（规范 2026-09-17 按反馈撤除了页头 border-bottom 与底栏 border-top）；
+ *  关闭件 20×20；真实遮罩按 Mask01 黑 45% —— 用户裁定，浅灰 25% + 模糊只留给静态样张）。
+ *
+ * 行为全在原生与操作层：`<dialog>` 由浏览器给模态语义、Esc 关闭、焦点陷阱与 `::backdrop`；
+ * 开合与定位归 `styles/operations/popup.css`（它认 `[open]`）。本件只给面。
+ *
+ * **类名与面文件名同根**：`.mh-dialog*`（元素走 `__`），一律 `mh-` 前缀。
+
+ *
+ * 边界（有意不做）：规范的 `.popconfirm`（气泡确认）不在本件 —— 它是「浮层 + 按钮族」的组合用法
+ * （`class="mh-popup mh-card"` + 按钮），不需要新的面；尺寸 220/r10 那组值也不值得为它单开一族。
+ */
+.mh-dialog {
+  width: var(--ui-dialog-width);
+  max-width: var(--ui-dialog-width);
+  padding: 0; /* UA 给 <dialog> 的内距一律归零：内距由页头 / 内容 / 底栏各自拥有 */
+  border: none; /* 专页面板无描边（撤除卡片自带的 1px 边） */
+  border-radius: var(--ui-dialog-radius);
+  background: var(--ui-base-100);
+  /* 规范 0 0 40px rgba(0,0,0,.04) → 本仓「卡片环境光」令牌（同族几何、色取本仓基准，不新造字面量） */
+  box-shadow: var(--ui-shadow-card);
+  color: var(--ui-base-content);
+}
+.mh-dialog--lg {
+  width: var(--ui-dialog-width-lg);
+  max-width: var(--ui-dialog-width-lg);
+}
+
+/* 真浮层遮罩：`<dialog>` 进 top layer 时才生成 ::backdrop（静态档不生成，对本面无影响） */
+.mh-dialog::backdrop {
+  background: var(--ui-dialog-mask);
+}
+
+/* 页头：标题左、关闭位右（标题行框 24 —— 16 + 24 + 内容上距 24 = 规范页面正文起点 64） */
+.mh-dialog__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ui-space-2);
+  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);
+}
+/* 标题位（插槽版也走这个类，两路渲染同一份排版） */
+.mh-dialog__title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mh-dialog__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--ui-dialog-close-size);
+  height: var(--ui-dialog-close-size);
+  margin: calc(-1 * var(--ui-space-1)); /* 热区比字形大，但视觉上仍与标题同基线 */
+  padding: 0;
+  border: none;
+  border-radius: var(--ui-radius-sm);
+  background: transparent;
+  color: var(--ui-base-content-muted);
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+.mh-dialog__close:hover,
+.mh-dialog__close.is-hover {
+  background: var(--ui-base-200);
+  color: var(--ui-base-content);
+}
+.mh-dialog__close:focus-visible {
+  outline: 2px solid var(--ui-primary);
+  outline-offset: 2px;
+}
+
+/* 内容区（内距 24；三段之间无分割线，交界间距只由三段内距单一拥有） */
+.mh-dialog__body {
+  padding: var(--ui-space-6);
+  font-size: var(--ui-font-body);
+  line-height: var(--ui-line-body);
+  color: var(--ui-base-content);
+}
+/* 首尾孩子不吃外边距：正文里的 <p> 自带 UA margin，会与内容内距叠成一块大空档 */
+.mh-dialog__body > :first-child {
+  margin-top: 0;
+}
+.mh-dialog__body > :last-child {
+  margin-bottom: 0;
+}
+
+/* 底栏：按钮右对齐（按钮的面归按钮族）、间距 8、下内距 16 */
+.mh-dialog__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--ui-space-2);
+  padding: 0 var(--ui-space-6) var(--ui-space-4);
+}

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

@@ -0,0 +1,24 @@
+/**
+ * dialog —— 单件令牌（**基础值**）。
+ *
+ * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出（原先混写在 `dialog.css` 顶部）：这些是**基础值**，锚在
+ * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
+ * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
+ * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
+ *
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
+ * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+ */
+[data-manohub-ui] {
+  /* 单件令牌 */
+  --ui-dialog-width: 520px; /* 规范标准宽 */
+  --ui-dialog-width-lg: 760px;
+  --ui-dialog-radius: 16px; /* 规范 r16（本仓圆角刻度最大 8，故按实测给） */
+  --ui-dialog-close-size: 28px; /* 关闭件的点击热区（字形 14 居中） */
+  /* 规范 Mask01 黑 45%（用户 2026-09-15 裁定：真实遮罩用黑透明；浅灰 25% + blur 是专页样张特征） */
+  --ui-dialog-mask: rgba(0, 0, 0, 0.45);
+}

package/dist/styles/components/divider.css

@@ -0,0 +1,71 @@
+/**
+ * Divider —— 分隔线（水平 / 垂直 × 实线 / 虚线 × 可带中段文字）。
+ *
+ * 出处：设计稿《MH后台-0911》内容区**用了 44 处** 1px 分隔线，取值统一：
+ * - 水平：`0:2128 > 标题区 > 直线 2` = 1200×1（筛选区与页头带之间）；
+ * - 垂直：`0:3920 > 直线 2备份` = 1×708（树栏与主栏之间）；
+ * - 色：`#e6e6e6` = `--ui-base-300`（与页头下边线、表格线、卡片描边同源 —— 本包只有这一条「线」色）。
+ *
+ * **为什么单独成件**：这条线在业务里被自绘了 44 次（`border-bottom: 1px solid #e6e6e6` 一类），
+ * 于是「线色改一处漏一处」必然发生。收进一件后，改线色/改粗细只需要动本文件。
+ *
+ * 与 `Panel` / `Card` / `Table` 的关系：那三件的框线**是它们自己的边界**（写在各件的面里），
+ * 不由本件承担；本件服务的是**内容之间**的分隔。
+ *
+ * 垂直档的高度：`align-self: stretch` 走父容器的拉伸（父级是 flex 行时即整行高），
+ * 父级没有确定高度时退到 `min-height: 1em`。**不写 `height: 100%`** —— 那要求父级先有高度，
+ * 在 auto 高度的行内会塌成 0。
+ */
+.mh-divider {
+  box-sizing: border-box;
+}
+
+/* ===== 水平档（分隔上下内容）===== */
+.mh-divider--horizontal {
+  width: 100%;
+  border-top: 1px solid var(--ui-divider-line);
+}
+.mh-divider--horizontal.mh-divider--dashed {
+  border-top-style: dashed;
+}
+
+/* 带中段文字：整条改成 flex 行，线由两根 `.mh-divider__line` 承担（左固定 24px、右吃剩余） */
+.mh-divider--horizontal.mh-divider--with-label {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-divider-label-gap);
+  border-top: 0;
+  font-size: var(--ui-font-caption);
+  line-height: var(--ui-line-caption);
+  color: var(--ui-divider-label-color);
+}
+.mh-divider__line {
+  flex: 1 1 auto;
+  height: 1px;
+  background: var(--ui-divider-line);
+}
+/* 左段固定宽（24）：文字靠近左侧时观感更稳，也让长文字不会把左段挤没 */
+.mh-divider__line--start {
+  flex: 0 0 auto;
+  width: var(--ui-space-6);
+}
+.mh-divider--dashed .mh-divider__line {
+  height: 0;
+  border-top: 1px dashed var(--ui-divider-line);
+}
+.mh-divider__label {
+  flex: 0 0 auto;
+}
+
+/* ===== 垂直档（分隔左右内容）===== */
+.mh-divider--vertical {
+  display: inline-block;
+  width: 1px;
+  min-height: 1em;
+  align-self: stretch;
+  border-left: 1px solid var(--ui-divider-line);
+  vertical-align: middle;
+}
+.mh-divider--vertical.mh-divider--dashed {
+  border-left-style: dashed;
+}

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

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

package/dist/styles/components/drawer.css

@@ -0,0 +1,143 @@
+/**
+ * Drawer —— 抽屉皮肤（与操作层并列组合：`class="mh-popup mh-drawer"`）。
+ *
+ * 与 `Dialog` 同一套行为、只换落位：模态语义 / Esc / 焦点陷阱 / `::backdrop` 遮罩 / top layer
+ * 渲染全由原生 `<dialog>` 给（见 `dialog.css` 与组件头注释）；本件**不新建任何浮层机制**，
+ * 只把居中的面板改成贴屏幕某一侧、整屏高。
+ *
+ * 三条几何决策：
+ * - **`margin: 0` 必须写**：UA 给 `<dialog>` 的 `margin: auto` 正是「居中」的来源，
+ *   不归零则 `inset-inline` 与它对冲，面板会回到中线（实测）。
+ * - **整屏高不切圆角**（`--ui-drawer-radius: 0`）：面板上下贴视口边缘，切角会在边缘露出遮罩缺口。
+ *   保留成令牌是为了让主题能改（如浮起式抽屉），不是为了默认切角。
+ * - **宽度由组件用行内 style 下发**：`width` 既接受像素数也接受任意合法宽度串
+ *   （`min(520px, 90vw)` 这类响应式写法），比在面里堆尺寸档更省事，也让「一屏窄了要收窄」可控。
+ *
+ * 进出场用 **animation**（不用 transition）：位移只碰独立的 `translate` 属性，不碰 `transform`
+ * —— 与全库动画令牌的口径一致，且不会覆盖定位。`prefers-reduced-motion` 下整体关闭。
+ *
+ * **类名与面文件名同根**：`.mh-drawer*`（元素走 `__`），一律 `mh-` 前缀。
+ */
+.mh-drawer {
+  position: fixed;
+  inset-block: 0;
+  inset-inline: auto 0; /* 缺省贴右侧（左档在下面覆盖） */
+  margin: 0; /* UA 的 margin:auto 会把面板拉回中线，必须归零 */
+  height: 100%;
+  max-height: 100%;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  border: none;
+  border-radius: var(--ui-drawer-radius);
+  background: var(--ui-base-100);
+  box-shadow: var(--ui-shadow-card);
+  color: var(--ui-base-content);
+  overflow: hidden;
+}
+.mh-drawer--left {
+  inset-inline: 0 auto; /* 贴左侧 */
+}
+
+/* 真浮层遮罩：`<dialog>` 进 top layer 时才生成 ::backdrop（静态档不生成，对本面无影响） */
+.mh-drawer::backdrop {
+  background: var(--ui-drawer-mask);
+}
+
+/* 进场：从所贴那一侧推入（`translate` 是独立属性，不动 `transform` 与定位） */
+.mh-drawer[open] {
+  animation: mh-drawer-in-right 0.2s ease-out;
+}
+.mh-drawer--left[open] {
+  animation-name: mh-drawer-in-left;
+}
+@keyframes mh-drawer-in-right {
+  from {
+    translate: 100% 0;
+  }
+}
+@keyframes mh-drawer-in-left {
+  from {
+    translate: -100% 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mh-drawer[open] {
+    animation: none;
+  }
+}
+
+/* 页头：标题左、关闭位右（三段之间无分割线，与 Dialog 同一份口径） */
+.mh-drawer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ui-space-2);
+  flex: none;
+  padding: var(--ui-space-4) var(--ui-space-6) 0;
+  font-size: var(--ui-font-heading);
+  line-height: var(--ui-line-heading);
+  font-weight: var(--ui-weight-medium);
+  color: var(--ui-base-content);
+}
+/* 标题位（插槽版也走这个类，两路渲染同一份排版） */
+.mh-drawer__title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mh-drawer__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--ui-drawer-close-size);
+  height: var(--ui-drawer-close-size);
+  margin: calc(-1 * var(--ui-space-1)); /* 热区比字形大，但视觉上仍与标题同基线 */
+  padding: 0;
+  border: none;
+  border-radius: var(--ui-radius-sm);
+  background: transparent;
+  color: var(--ui-base-content-muted);
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+.mh-drawer__close:hover,
+.mh-drawer__close.is-hover {
+  background: var(--ui-base-200);
+  color: var(--ui-base-content);
+}
+.mh-drawer__close:focus-visible {
+  outline: 2px solid var(--ui-primary);
+  outline-offset: 2px;
+}
+
+/* 内容区：**三段里唯一可滚的那段**（页头与底栏固定，抽屉才像抽屉） */
+.mh-drawer__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);
+  color: var(--ui-base-content);
+}
+/* 首尾孩子不吃外边距：正文里的 <p> 自带 UA margin，会与内容内距叠成一块大空档 */
+.mh-drawer__body > :first-child {
+  margin-top: 0;
+}
+.mh-drawer__body > :last-child {
+  margin-bottom: 0;
+}
+
+/* 底栏：按钮右对齐（按钮的面归按钮族）、间距 8、下内距 16 */
+.mh-drawer__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--ui-space-2);
+  flex: none;
+  padding: 0 var(--ui-space-6) var(--ui-space-4);
+}

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

@@ -0,0 +1,22 @@
+/**
+ * drawer —— 单件令牌（**基础值**）。
+ *
+ * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出（原先混写在 `drawer.css` 顶部）：这些是**基础值**，锚在
+ * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
+ * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
+ * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
+ *
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
+ * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+ */
+[data-manohub-ui] {
+  /* 单件令牌 */
+  --ui-drawer-radius: 0; /* 整屏高面板不切角；改它才会出现内缘圆角 */
+  --ui-drawer-close-size: 28px; /* 关闭件的点击热区（字形 14 居中） */
+  /* 与 Dialog 同一份遮罩取值（规范 Mask01 黑 45%）：两件并列出现时不该有两种遮罩深度 */
+  --ui-drawer-mask: rgba(0, 0, 0, 0.45);
+}

package/dist/styles/components/filter.css

@@ -0,0 +1,41 @@
+/**
+ * Filter 筛选条（`Form` 的一层壳：`Form` + `Form.Header` + 字段区）。
+ *
+ * ## 一份面只补两件事
+ *
+ * 字段行、label 列、控件列、上行与两颗按钮全部复用 `form.css`（`Form` / `Form.Header` /
+ * `Form.Item`）——本面**不重画**输入框、label、按钮，只补：
+ * 1. 字段区的排布（4 字段一行自动换行，列距 24 / 行距 16）；字段宽自适应
+ *    （label 列宽与「上行 ↔ 字段区」的行距由 `Filter` 传给 `Form` 的 `labelWidth` / `gap`，
+ *    它们不是 CSS 面的事 —— 见 `components/filter/index.tsx` 的两个常量）。
+ *
+ * 出处：Figma「MH后台 0911」node 0:3355（页面「01.1 技能权限分配」的筛选区），几何 1:1：
+ * 上行高 32（右侧两颗按钮）、下行字段「标签 + 10±2px + 控件（高 32 / 圆角 6 / 边 --ui-base-300）」。
+ *
+ * 两处**有意不照抄**（理由写在这里，免得后人当成漏项补上）：
+ * 1. 稿里「预制筛选方案」矩形上挂了一条**绿色**投影 `DROP_SHADOW(10, #4ec87a@30%)` ——
+ *    与主色无关，判定为设计稿误留；本件不画（那颗按钮也不内建）；
+ * 2. 稿里底部那条 1px 线**宽 1200**（整页宽），而筛选内容只有 1160 —— 它是**页面级分隔**，
+ *    由页面承担；本件画了就会与页面的线叠成双线。
+ *
+ * 同理**不带左右内距**：左右 20 由页面筛选位（`.mh-page__filter` 的 `14px 20px 0`）给，
+ * 组件里再给一次会变成 40。label 列宽由 `Filter` 传 `Form` 的 `labelWidth`（缺省 56），
+ * 因此本文件**不覆盖主题的 `--ui-form-label-width`**（面上定义 `--ui-*` 必须以本文件名作命名空间）。
+ */
+
+/* 字段区：列距 24 / 行距 16，窄了整体换行（不压缩控件高度、不截断标签）。
+   字段区是 `Form` 的直接子节点（`Form.Header` 归位在最前），以下均为 `Form.Item` 自身。 */
+.mh-filter__fields {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: var(--ui-space-6);
+  row-gap: var(--ui-space-4);
+}
+
+/* 字段（`Filter.Item` = 挂了这个类的 `Form.Item`）：宽度自适应
+   —— 够宽均分铺满，不够则换行；label 列宽与控件列取用全部来自 form.css。 */
+.mh-filter__item {
+  flex: 1 1 var(--ui-filter-item-min);
+  min-width: 0;
+}

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

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