@manohub/ui 0.8.2 → 0.10.0

package/dist/components/toast/index.d.ts

@@ -99,7 +99,7 @@ export declare const Toast: import("vue").DefineComponent<import("vue").ExtractP
     onClose?: (() => any) | undefined;
 }>, {
     text: string;
-    icon: boolean | "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
+    icon: boolean | "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "info-circle" | "check-circle" | "alert-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
     closable: boolean;
     tone: ToastTone;
     action: string;
@@ -151,7 +151,7 @@ export declare const ToastCompound: {
         close: () => true;
     }, import("vue").PublicProps, {
         text: string;
-        icon: boolean | "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
+        icon: boolean | "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "info-circle" | "check-circle" | "alert-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
         closable: boolean;
         tone: ToastTone;
         action: string;
@@ -205,7 +205,7 @@ export declare const ToastCompound: {
         onClose?: (() => any) | undefined;
     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
         text: string;
-        icon: boolean | "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
+        icon: boolean | "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "info-circle" | "check-circle" | "alert-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
         closable: boolean;
         tone: ToastTone;
         action: string;
@@ -256,7 +256,7 @@ export declare const ToastCompound: {
     close: () => true;
 }, string, {
     text: string;
-    icon: boolean | "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
+    icon: boolean | "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "info-circle" | "check-circle" | "alert-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
     closable: boolean;
     tone: ToastTone;
     action: string;

package/dist/components/toast/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, onBeforeUnmount, createVNode } from "vue";
+import { defineComponent, onMounted, onBeforeUnmount, createVNode, ref, onUpdated } from "vue";
 import { Icon } from "@manohub/icon";
 const TONE_ICON = {
   info: "info",
@@ -110,7 +110,22 @@ const ToastStack = /* @__PURE__ */ defineComponent({
     slots,
     attrs
   }) {
+    const rootRef = ref(null);
+    const raise = () => {
+      const el = rootRef.value;
+      if (!el) return;
+      if (!el.hasAttribute("popover")) el.setAttribute("popover", "manual");
+      if (typeof el.showPopover !== "function") return;
+      try {
+        if (el.matches(":popover-open")) el.hidePopover();
+        el.showPopover();
+      } catch {
+      }
+    };
+    onMounted(raise);
+    onUpdated(raise);
     return () => createVNode("div", {
+      "ref": rootRef,
       "class": ["mh-toast-stack", attrs.class].filter(Boolean).join(" "),
       "style": attrs.style
     }, [slots.default?.()]);

package/dist/index.d.ts

@@ -50,8 +50,7 @@ export { Pagination, type PaginationPageItem } from './components/pagination';
 export { TabBar, type TabBarOption, type TabBarValue } from './components/tabbar';
 export { Steps, type CanJump, type StepsItem, type StepsVariant, type StepsCompound, type StepsCompoundType, } from './components/steps';
 export { Toast, type ToastTone, type ToastCompound, type ToastCompoundType, } from './components/toast';
-export { Code } from './components/code';
-export { CodeEditor, type CodeEditorProps, type CodeEditorAutoSize, } from './components/code-editor';
+export { CodeBlock, type CodeBlockProps, type CodeEditorAutoSize, type CodeBlockCompound, type CodeBlockCompoundType, } from './components/code-block';
 export { Upload, formatFileSize, type UploadFile, type UploadCompound, type UploadCompoundType, } from './components/upload';
 export { QueryState, type QueryStateKind, type QueryStateProps } from './components/query-state';
 export { Loading, type LoadingOverlay, type LoadingProps } from './components/loading';

package/dist/index.js

@@ -33,8 +33,7 @@ import { Pagination } from "./components/pagination/index.js";
 import { TabBar } from "./components/tabbar/index.js";
 import { Steps } from "./components/steps/index.js";
 import { Toast } from "./components/toast/index.js";
-import { Code } from "./components/code/index.js";
-import { CodeEditor } from "./components/code-editor/index.js";
+import { CodeBlock } from "./components/code-block/index.js";
 import { Upload, formatFileSize } from "./components/upload/index.js";
 import { QueryState } from "./components/query-state/index.js";
 import { Loading } from "./components/loading/index.js";
@@ -51,8 +50,7 @@ export {
   Capsule,
   Card,
   Checkbox,
-  Code,
-  CodeEditor,
+  CodeBlock,
   Collapse,
   Dialog,
   Divider,

package/dist/services/dialog.d.ts

@@ -5,7 +5,7 @@ export interface ConfirmOptions {
     /** 正文（纯文本；复杂内容请直接用 `Dialog` 组件） */
     detail?: string;
     /**
-     * 语义档（决定标题左侧的裸符号与配色）：`info` / `success` / `warning` / `error`。
+     * 语义档（决定标题左侧的带圈语义图标与配色）：`info` / `success` / `warning` / `error`。
      *
      * 不传则无图标。**危险操作用 `error`** —— 它同时把确定按钮染成危险色
      * （除非显式给了 `okDanger`），这样「删除确认」与「保存成功」不再长得一样。

package/dist/styles/components/avatar.css

@@ -22,8 +22,11 @@
   color: var(--ui-base-100); /* 占位前景 */
 }
 
-/* 图片：撑满 + 跟随形态自裁（否则去掉容器 overflow 后长宽不符的图会外溢） */
+/* 图片：撑满 + 跟随形态自裁（否则去掉容器 overflow 后长宽不符的图会外溢）。
+   `display: block` 必须自己写：元素级基线不再把 `img` 转块级（那条会压消费方的 `h-*` / `hidden`），
+   否则行内基线间隙会把圆形头像顶偏。 */
 .mh-avatar > img {
+  display: block;
   width: 100%;
   height: 100%;
   border-radius: inherit;

package/dist/styles/components/button.css

@@ -40,6 +40,8 @@
   font-family: inherit;
   font-size: var(--ui-button-font-size);
   line-height: var(--ui-line-body);
+  /* 链接形态时本体就是 `<a>`（见组件层），基线不再代管 `a { text-decoration: inherit }`，这里自己摘掉下划线 */
+  text-decoration: none;
   cursor: pointer;
   white-space: nowrap;
   /* 三态补间（底 / 边 / 字 / 影） */

package/dist/styles/components/code-block.css

@@ -0,0 +1,216 @@
+/**
+ * CodeBlock —— 代码块族（只读面 + 编辑面 + 语言角标 + 复制位）。
+ *
+ * 一个**族根** `.mh-code-block` 承载两形态共用的部分（底 / 圆角 / 等宽字族 / 字号 / 行高 / 定位上下文），
+ * 形态差异只在**槽位**上：只读面是 `__view`（`<pre>`，横向滚动、缺省不折行），
+ * 编辑面是 `__editor`（`<textarea>`，软换行）。两形态共用同一个根 ⇒ 互切时块体不跳，
+ * 且"同源"是**一处定义**（`code-block.tokens.css`），不是两处巧合。
+ *
+ * 观感基准：**无边框浅底块 + 方圆角 + 右上角语言角标 + 悬浮/聚焦让位后出现的方形图标复制按钮**。
+ *
+ * ## 三件结构决定（改前先读）
+ *
+ * - **复制按钮的面仍归按钮族**（`.mh-button--icon`），本族只补「浮在代码面上需要自己的底与定位」；
+ *   故标记是 `class="mh-button mh-button--icon mh-code-block__copy"`。
+ * - **复制按钮与语言角标都不能放进代码面里**：只读面是 `overflow-x: auto` 的滚动容器，会裁掉
+ *   外挂的绝对定位件 —— 故两者都挂在**族根**上（族根只做 `position: relative`）。
+ * - **隐藏用 `opacity` + `pointer-events`**（不是 `visibility` / `display`）：键盘仍能 Tab 到它，
+ *   `:focus-within` 会把它显出来，且隐藏时不残留一块看不见的可点区。
+ * - **编辑面画框的是根**（圆角归根、面自身透明无框）：原生 `textarea` 的框模型（内距 / 滚动条 /
+ *   聚焦轮廓）会把框画歪，收归根才能与只读面对齐（旧实现同此口径）。
+ *
+ * ## 本族与按钮族的层序
+ *
+ * `styles/index.css` 里 `code-block.css` 在 `button.css` **之前**导入，故 `background` / `color` /
+ * `box-shadow` 这些**同特异性的声明会被按钮族的档位规则压掉**（历史 bug：复制位的白底被
+ * `.mh-button--text { background: transparent }` 压成透明，看起来像一段悬空文字）。
+ * 修法不是调层序，而是让本族的声明**升一档特异性**（`.mh-code-block > .mh-code-block__copy`，
+ * 悬停 / 成功态再各叠一层）—— 按钮族日后换皮肤也压不掉它。
+ *
+ * 零 JS 可表达：全部皮肤 + 角标让位 + 复制位的显隐。**真正的复制动作归组件层**（要 `navigator.clipboard`）。
+ */
+
+/* ===== 族根：两形态共用的底 / 圆角 / 字族，以及角标与复制位的定位上下文 ===== */
+.mh-code-block {
+  position: relative;
+  min-width: 0; /* flex / grid 里能被压到容器宽（否则长行的 min-content 会把轨道撑宽、页面横向溢出） */
+  border-radius: var(--ui-code-block-radius);
+  background: var(--ui-code-block-bg);
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-code-block-font-size);
+  line-height: var(--ui-code-block-line-height);
+  color: var(--ui-base-content);
+}
+/* 聚焦环：与输入框族同一句（主色弱底当环，不新造阴影令牌）。**只在编辑档**给 ——
+   只读面本身不可聚焦，给它加环会在「键盘聚焦复制位」时冒出一圈（只读块从前没有这一圈，保持原样）。 */
+.mh-code-block--editable {
+  transition: box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
+}
+.mh-code-block--editable:focus-within {
+  box-shadow: 0 0 0 2px var(--ui-primary-weak);
+}
+
+/* ===== 只读面（`__view`）：`<pre>` —— 缺省横向滚动（缩进与列对齐不被破坏），`--wrap` 档才软换行 ===== */
+.mh-code-block__view {
+  display: block;
+  margin: var(--ui-space-2) 0 0;
+  padding: var(--ui-code-block-padding);
+  border: 0;
+  border-radius: inherit;
+  font: inherit;
+  color: inherit;
+  overflow-x: auto;
+  white-space: pre;
+  overflow-wrap: normal;
+}
+.mh-code-block--wrap > .mh-code-block__view {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+/* ===== 编辑面（`__editor`）：`<textarea>` 透明底 + 无框 + 无 outline（框与聚焦环都画在族根上） ===== */
+.mh-code-block__editor {
+  display: block;
+  width: 100%;
+  margin: 0;
+  padding: var(--ui-code-block-editor-padding-y) var(--ui-code-block-editor-padding-x);
+  border: 0;
+  border-radius: inherit;
+  background: transparent;
+  font: inherit;
+  line-height: inherit;
+  color: inherit;
+  outline: none;
+  resize: none; /* 高度由 autoSize / maxHeight 决定，不留拖拽把手（同只读面：不被用户拖变形） */
+  overflow: auto;
+  tab-size: 2;
+}
+.mh-code-block__editor::placeholder {
+  color: var(--ui-base-content-subtle);
+}
+
+/* 只读档（原生 `readonly`：仍可选中、可滚动、可复制，只是不可改）——**不弱化字色**，
+   代码是拿来读的；只是光标不再是文本输入那一支（与只读面观感一致） */
+.mh-code-block--editable:has(> .mh-code-block__editor[readonly]) {
+  cursor: default;
+}
+
+/* 禁用档：底与字色弱化 + 内描边（本族没有外描边，靠内描边表达"锁住"） */
+.mh-code-block--editable:has(> .mh-code-block__editor:disabled) {
+  background: var(--ui-base-100);
+  color: var(--ui-base-content-subtle);
+  box-shadow: inset 0 0 0 1px var(--ui-base-300);
+}
+.mh-code-block--editable:has(> .mh-code-block__editor:disabled) > .mh-code-block__editor {
+  cursor: not-allowed;
+}
+
+/* ===== 语言角标（可选）：两形态的槽位**有意不同** =====
+ * 共用部分（绝对定位 + 等宽小字 + 不吃指针）写在基类；
+ * 只读面与复制位**同槽位**（等高 32），悬停 / 聚焦时淡出让位（零 JS 互斥）；
+ * 编辑面**不叠在文字上**（内容会折行，压住就看不见了），而是让首行右端**预留**出它的宽度。 */
+.mh-code-block__lang {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-code-block-font-size);
+  line-height: 1;
+  color: var(--ui-base-content-subtle);
+  user-select: none;
+  pointer-events: none; /* 装饰位不吃指针事件，否则会挡住复制位的悬停热区 */
+}
+/* 只读档：与复制位同槽位（让位互换时基线不跳） */
+.mh-code-block:not(.mh-code-block--editable) > .mh-code-block__lang {
+  top: var(--ui-code-block-copy-inset);
+  right: var(--ui-code-block-copy-inset);
+  height: var(--ui-code-block-copy-size);
+  transition: opacity 0.15s ease;
+}
+.mh-code-block:not(.mh-code-block--editable):hover > .mh-code-block__lang,
+.mh-code-block:not(.mh-code-block--editable):focus-within > .mh-code-block__lang,
+.mh-code-block.is-hover > .mh-code-block__lang {
+  opacity: 0;
+}
+/* 编辑档：贴编辑面的右上角，并给编辑面首行右端预留出它的宽度 */
+.mh-code-block--editable > .mh-code-block__lang {
+  top: var(--ui-code-block-editor-padding-y);
+  right: var(--ui-code-block-editor-padding-x);
+  height: var(--ui-code-block-line-height);
+}
+.mh-code-block--editable:has(> .mh-code-block__lang) > .mh-code-block__editor {
+  padding-right: calc(var(--ui-code-block-editor-padding-x) + var(--ui-code-block-lang-reserve));
+}
+
+/* ===== 行内 chip（`--inline`，挂在 `<code>` 上即自身为根；`--plain` 是它的中性档） ===== */
+.mh-code-block--inline {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px var(--ui-space-3);
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-code-block-chip-bg);
+  color: var(--ui-primary);
+  /* 行内 chip 回到「继承外部行高」（改动前它不声明行高，族根那枚等宽行高是给代码面的）——
+     同一元素上两条规则，后者胜出，故这里写 inherit 即等价于旧行为 */
+  line-height: inherit;
+}
+/* 中性档（规范 `.chip--plain`：规则 ID 这类不强调的短标识） */
+.mh-code-block--plain {
+  background: var(--ui-code-block-bg);
+  color: var(--ui-base-content);
+  border-radius: var(--ui-code-block-radius);
+}
+
+/* ===== 复制位（面归按钮族，本族只给定位、浮底、方形几何、显隐） =====
+ * 选择器**刻意升一档**（`.mh-code-block >`）：同特异性下按钮族的档位规则会压掉这几条（见文件头） */
+.mh-code-block > .mh-code-block__copy {
+  position: absolute;
+  top: var(--ui-code-block-copy-inset);
+  right: var(--ui-code-block-copy-inset);
+  width: var(--ui-code-block-copy-size);
+  height: var(--ui-code-block-copy-size);
+  padding: 0;
+  border: 1px solid var(--ui-code-block-line);
+  border-radius: var(--ui-radius-sm);
+  background: var(--ui-base-100);
+  color: var(--ui-base-content);
+  box-shadow: none; /* 压掉图标按钮 hover 档的卡片光晕（本件浮在块上，再加影会脏） */
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+}
+/* 显形：族根悬停 / 键盘聚焦进入（`.is-hover` 是**静态档**，供静态页与读图对状态，与全库同款三源等价） */
+.mh-code-block:hover > .mh-code-block__copy,
+.mh-code-block:focus-within > .mh-code-block__copy,
+.mh-code-block.is-hover > .mh-code-block__copy {
+  opacity: 1;
+  pointer-events: auto;
+}
+/* 悬停 / 键盘聚焦的加深档（再叠一层，压过 `.mh-button--icon:hover` 的字色与光晕） */
+.mh-code-block > .mh-code-block__copy:hover,
+.mh-code-block > .mh-code-block__copy:focus-visible,
+.mh-code-block.is-hover > .mh-code-block__copy {
+  border-color: var(--ui-base-content-subtle);
+  color: var(--ui-primary);
+  box-shadow: none;
+}
+/* 复制成功态（组件下发 `data-state`；原生无此态，静态档 `.is-copied` 供读图） */
+.mh-code-block > .mh-code-block__copy.is-copied,
+.mh-code-block > .mh-code-block__copy[data-state='copied'] {
+  border-color: var(--ui-success);
+  color: var(--ui-success);
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* 无悬停能力的设备（触屏）：复制位常显；角标让位（`display: none` 而非透明 —— 它只是装饰，
+   不占焦点序列，隐藏掉才不会与常显的复制位叠在一起） */
+@media (hover: none) {
+  .mh-code-block > .mh-code-block__copy {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  .mh-code-block:not(.mh-code-block--editable) > .mh-code-block__lang {
+    display: none;
+  }
+}

package/dist/styles/components/code-block.tokens.css

@@ -0,0 +1,40 @@
+/**
+ * code-block —— 单件令牌（**基础值**）。
+ *
+ * 本族自己的几何 / 尺寸 / 色彩槽位；只服务本族，故不随主题进 `@manohub/theme`。
+ *
+ * ## 两形态共用同一份令牌
+ *
+ * 只读面（`__view`）与编辑面（`__editor`）**共用**底 / 圆角 / 字族 / 字号 / 行高这几枚 ——
+ * 这正是「视觉同源、互切不跳」的落点：一处定义，两形态一起变。
+ * 从前是两套单件令牌各写一份同值（`--ui-code-*` 与 `--ui-code-editor-*`），
+ * 靠注释互相提醒"要一致"；0.9.0 收成一族（见 `docs/guide/migration-0-9.md`）。
+ *
+ * 两形态**有意不同**的只有内距：只读面上下 12（与左右齐）、编辑面上下 8
+ * （`textarea` 的行高自带行距，上下再给 12 会显得空）—— 它们各自保留一枚令牌。
+ *
+ * ## 抽出说明
+ *
+ * 这些是**基础值**，锚在 `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，
+ * 因此**任何落在容器里的分件都取得到值**（历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
+ *
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
+ * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+ */
+[data-manohub-ui] {
+  /* 单件令牌（挂在容器上：族根 / 只读面 / 编辑面 / 复制位都在其下） */
+  --ui-code-block-bg: var(--ui-base-200); /* 代码面底（只读块与编辑框同底 —— 互切的"不跳"靠它） */
+  --ui-code-block-chip-bg: var(--ui-primary-weak); /* 行内 chip 底（规范 Au02） */
+  --ui-code-block-line: var(--ui-base-300); /* 描边色：面自身无边框，本令牌现服务复制位按钮 */
+  --ui-code-block-radius: var(--ui-radius-control);
+  --ui-code-block-font-size: var(--ui-font-caption); /* 规范等宽字号档对位 */
+  --ui-code-block-line-height: var(--ui-line-caption); /* 等宽行高：角标与复制位也吃它 */
+  --ui-code-block-padding: var(--ui-space-3); /* 12：只读面四边内距 */
+  --ui-code-block-editor-padding-x: var(--ui-space-3); /* 12：编辑面左右内距 */
+  --ui-code-block-editor-padding-y: var(--ui-space-2); /* 8：编辑面上下内距（比只读面小，见文件头） */
+  --ui-code-block-lang-reserve: 56px; /* 编辑面：首行右端给角标预留的宽度（只影响折行位置） */
+  --ui-code-block-copy-size: var(--ui-control-height-md); /* 32：复制位方形热区（与按钮族标准档同高） */
+  /* 复制位是 `Button`（`mh-button__icon`）：字形尺寸归按钮族的图标槽（常规图标档），本族不另设令牌 */
+  --ui-code-block-copy-inset: var(--ui-space-2); /* 8：复制位 / 角标距块边 */
+}

package/dist/styles/components/dialog.css

@@ -58,9 +58,9 @@
   font-weight: var(--ui-weight-medium);
   color: var(--ui-base-content);
 }
-/* 语义档（`tone`）：标题左侧一个**裸符号**，颜色按档取语义色 ——
-   缺省（不传 tone）不渲染，故不影响既有外观。取色口径与 `Notice` 同一张表
-   （success / warning 取 -strong 档，否则浅底上对比度不足）。 */
+/* 语义档（`tone`）：标题左侧一个**带圈语义图标**（图标位没有底色圆，故取带圈族 —— 见
+   `@manohub/icon` 的「两族」口径），颜色按档取语义色 —— 缺省（不传 tone）不渲染，故不影响既有外观。
+   取色口径与 `Notice` 同一张表（success / warning 取 -strong 档，否则浅底上对比度不足）。 */
 .mh-dialog__tone-icon {
   flex: none;
   width: var(--ui-font-icon);

package/dist/styles/components/filter.css

@@ -1,41 +1,29 @@
 /**
- * Filter 筛选条（`Form` 的一层壳：`Form` + `Form.Header` + 字段区）。
+ * Filter（筛选条）：**本件无自有面 —— 零规则**。
  *
- * ## 一份面只补两件事
+ * 它现在是一层**纯壳**：只给 `Form` 传「排布档 + label 列宽（可选）+ 值模型 + 字段区回车」，
+ * 字段行的排布与几何**全部沿用 `Form`**：
  *
- * 字段行、label 列、控件列、上行与两颗按钮全部复用 `form.css`（`Form` / `Form.Header` /
- * `Form.Item`）——本面**不重画**输入框、label、按钮，只补：
- * 1. 字段区的排布（4 字段一行自动换行，列距 24 / 行距 16）；字段宽自适应
- *    （label 列宽与「上行 ↔ 字段区」的行距由 `Filter` 传给 `Form` 的 `labelWidth` / `gap`，
- *    它们不是 CSS 面的事 —— 见 `components/filter/index.tsx` 的两个常量）。
+ * 1. 字段排布 = `Form` 的多列动态档（本件传 `columns="auto"`）—— 网格轨道**跨行共用**，
+ *    因此换行下来的字段与上一行**逐列对齐**。从前本件自建 flex 字段区
+ *    （`flex: 1 1 240px` + `wrap`），而 flex 的 `grow` 是**按行分配**的：末行只剩一项时
+ *    它独占该行剩余宽度，被拉成通栏 —— 那正是本件 2026-09 交出机制的起因；
+ * 2. label 列宽 / 行距 / 列距 / 字段最小宽 = `Form` 的默认档（令牌 + `.mh-form` 的 8px 档）。
+ *    本件**不设默认值、也不落行内值** —— 写死就是第二份默认值，`Form` 调档时不会跟着变；
+ *    消费方要收紧筛选条的几何，在容器上覆盖 `Form` 的那两个令牌即可（继承生效）；
+ * 3. 表头（`Form.Header`）与字段行（`Form.Item`）一律沿用 `Form`，本件不重画任何一个。
  *
- * 出处：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 —— 它是**页面级分隔**，
- *    由页面承担；本件画了就会与页面的线叠成双线。
+ * 「组件与面一一配对」是本包的机械护栏（用例 `contract-class-surface` 要求每个组件目录
+ * 都有同名面文件）。本件确实没有自己的类与几何，故这里只留说明文字。它对外的唯一类名是
+ * `.mh-filter__form` —— **结构锚点**（消费方与用例靠它定位这个壳，几何沿用 `.mh-form`），
+ * 已登记在共用台账「只做结构 / 测试锚点、面上没有样式声明的类」里。
  *
- * 同理**不带左右内距**：左右 20 由页面筛选位（`.mh-page__filter` 的 `14px 20px 0`）给，
- * 组件里再给一次会变成 40。label 列宽由 `Filter` 传 `Form` 的 `labelWidth`（缺省 56），
- * 因此本文件**不覆盖主题的 `--ui-form-label-width`**（面上定义 `--ui-*` 必须以本文件名作命名空间）。
+ * ## 与设计稿的关系
+ *
+ * 稿（Figma「MH后台 0911」node 0:3355，页面「01.1 技能权限分配」的筛选区）只用来确定
+ * **筛选条由哪些部件组成**（上行两颗按钮 + 下行若干字段）；几何**不再照抄**稿里的
+ * 68 / 16 / 24 / 240，自 2026-09 起统一走 `Form` 的默认档 —— 取舍见
+ * `components/filter/index.tsx` 的文件头。
  */
-
-/* 字段区：列距 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/input.css

@@ -127,6 +127,30 @@
   cursor: pointer;
 }
 
+/* ===== 触发器形态 · 占位文案 =====
+ *
+ * `<button>` **没有 `::placeholder` 伪元素**，故触发器形态的占位由组件渲染一个 span 承载
+ * （判据见 `components/input/index.tsx` 的 `showPlaceholder`）。这里只给它的排版与色。
+ *
+ * `display: block` 是**必要的**（实测四种父级 × 长/短文案）：span 默认是 inline，而 `overflow`
+ * 对行内盒不生效 ⇒ 长占位会直接撑破控件；`block` 之后它撑满控件的内容宽、超长走省略号，
+ * 且在**父级是 flex**（如 `Select` 的触发器）时会被 blockify，行为与 inline 一致
+ * —— 两种父级下都对，故不要求消费方给控件开 flex。`min-width: 0` 供 flex 父级下允许收缩。
+ * `flex: 1` 是给**父级是 flex** 的复合件用的（`Select` 的值区`.mh-select__value` 就是这个配方）：
+ * 实测同样的「占位 + 右侧箭头」在 flex 父级下，不给 `flex: 1` 时占位只有**内容宽**（48px）、
+ * 给了才撑满到箭头前（207 / 可用 220）—— 少了它会让选择器的占位区窄成一截。
+ * 父级不是 flex 时 `flex` 属性被忽略，故对单件用法无副作用。
+ * 色与原生 `.mh-input::placeholder` 同档（弱文本），选择器值区的 `--placeholder` 也是这一档。 */
+.mh-input__placeholder {
+  display: block;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ui-base-content-subtle);
+}
+
 /* ===== 触发器形态 · 整箱热区（命中测试重定向，纯 CSS） =====
  *
  * 目的：让**整件**（值 / 标签 + 右侧图标 + 左右内距）都等同于点那个原生触发按钮。

package/dist/styles/components/select.css

@@ -66,7 +66,9 @@
   height: calc(var(--ui-select-chip-height) - 4px);
 }
 
-/* 无选中值时的提示文字（组件把 placeholder 渲染进 `__value` 并挂这个修饰类） */
+/* 值区：有值时的单选那一行（占满剩余宽、超出省略）。
+   ⚠️ **无值态不在这里** —— 占位由输入面渲染（`.mh-input__placeholder`，色与截断同档）：
+   2026-09-29 收敛，此前本文件还有一个 `--placeholder` 修饰类专门给占位上灰字。 */
 .mh-select__value {
   flex: 1;
   min-width: 0;
@@ -74,9 +76,6 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.mh-select__value--placeholder {
-  color: var(--ui-base-content-subtle);
-}
 /* 下拉箭头：渲染在输入面的**右侧图标位**（`.mh-input__suffix`，表壳的子元素）里 ——
    位置由表壳的 flex 排布给（控件 `flex: 1 1 auto` 自然把附加位挤到右端），故不再需要 `margin-left: auto`。
    字形由 @manohub/icon 给；展开转向由 popup.css 的 `.mh-popup-caret` 承担（含触发器进表壳后的兄弟档）；

package/dist/styles/components/table.css

@@ -79,10 +79,10 @@
   border: none;
   border-radius: 0;
 }
-/* 紧凑档 */
+/* 紧凑档（`size="sm"`）：三档 30 / 38 / 46 里的最小档，嵌在卡片 / 面板里的表格用它 */
 .mh-table--xs {
-  --ui-table-head-height: 36px;
-  --ui-table-row-height: 38px;
+  --ui-table-head-height: 30px;
+  --ui-table-row-height: 30px;
 }
 /* 窄屏下的最小宽（触发横向滚动，而不是把列压扁） */
 .mh-table--wide {
@@ -94,14 +94,21 @@
  * 列宽从此**受声明约束、不再被内容撑破** ⇒ 长文本不会把表格撑得比容器还宽，
  * 于是「百分比 / 数字权重」可以「吃满容器 + 严格按比例」。
  *
- * 代价（调用方要知道）：长文本列必须显式 `ellipsis: true`，否则会**换行**（行高变高，见下条）。 */
+ * 调用方要知道的：表体**默认不换行**（nowrap + 省略号，见下条）；要换行的列显式标 `wrap: true`。 */
 .mh-table--fixed {
   table-layout: fixed;
 }
-/* 换行兜底：fixed 已保证「不撑破容器」，这条只防**无空格长串**（如 500 字符的 token）
-   溢出单元格、视觉上压到相邻列。`anywhere` 而不是 `break-word`：后者不参与最小内容宽计算。 */
+/* `fixed` 档表体默认**不换行**（nowrap + 省略号）。两条依据：
+ * ① 列宽已被 `<colgroup>` 钉死，换行救不回内容，只会把行高顶高（`td` 的 `height` 只是**下限**）；
+ * ② 换行必然伴随**从字符间断字** —— 实测序号列窄到装不下两位数时，旧的 `overflow-wrap: anywhere`
+ *    把 `10` 拆成 `1` / `0` 两行，行高 30 → **49**。
+ * 于是「换行」改成**列级主动选择**：`TableColumn.wrap: true`（见 `.mh-table__cell-wrap`）。
+ * ⚠️ **只在本档翻默认**：`auto` 档的列宽由内容计算，td 默认 nowrap 会让长文本列不再靠换行收敛、
+ * 表格更容易撑破容器 —— 与本档「表头裁切只加在 fixed」同一条判据（见上一条注释）。 */
 .mh-table--fixed tbody td {
-  overflow-wrap: anywhere;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 /* 前导列（勾选 / 展开）在 auto 下靠内容把 40px 的「建议宽」撑出去；fixed 下是硬宽，
    而 `thead th` / `tbody td` 的标准左右内距各 16px ⇒ 可用内容只有 40 − 32 = 8px，
@@ -248,8 +255,12 @@
   z-index: 2; /* 表头既钉顶又钉左，压住表头其余列 */
   background: var(--ui-table-head-bg);
 }
-/* `--sticky-head`：表头钉顶 */
-.mh-table--sticky-head thead th {
+/* `--sticky-head`：表头钉顶。
+ * ⚠️ 选择器必须带 `tr`（0-1-3）：文件后段「拖拽线的定位上下文」那条
+ * `.mh-table thead th { position: relative }` 是 **0-1-2**，与不写 `tr` 的写法**同特异性且在后**
+ * ⇒ 会把 `position: sticky` 覆盖掉，`stickyHead` 静默失效（0.6.0 起就存在，0.9.0 复核仍在）。
+ * `sticky` 同样是定位元素，照样给表头里的拖拽线当包含块，故加 `tr` 不损失原能力。 */
+.mh-table--sticky-head thead tr th {
   position: sticky;
   top: 0;
   z-index: 1;
@@ -271,16 +282,16 @@
 .mh-table__cell-link:hover {
   text-decoration: underline;
 }
-/* 长文本省略（列定义里 `ellipsis: true` 时下发）。
- * 基础三件套与档位无关；`max-width` **只在 auto 档兜底**：
- * fixed 档的列宽已由 `<colgroup>` 钉死，再来一条 150px 的 max-width 会把宽列又压回 150（自相矛盾）。 */
-.mh-table__cell-ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.mh-table:not(.mh-table--fixed) .mh-table__cell-ellipsis {
-  max-width: var(--ui-table-ellipsis);
+/* 列级**放开换行**（列定义里 `wrap: true` 时下发，只作用于表体 `td`；表头始终 nowrap）。
+ * 缺省不换行在面文件的 `.mh-table--fixed tbody td` 里 —— 本档才翻默认，故这里同时把
+ * 「换行三件套」与 `overflow-wrap` 兜底一并给回：换来的是「长文本列自己决定换行」。
+ * ⚠️ 选择器必须带 `td`（0-1-3）：`.mh-table--fixed tbody td` 是 **0-1-2**，
+ * 单个类（0-1-0）压不过它（同 §表头对齐那条的先例）。 */
+.mh-table tbody td.mh-table__cell-wrap {
+  white-space: normal;
+  overflow: visible;
+  text-overflow: clip;
+  overflow-wrap: anywhere;
 }
 .mh-table__cell-icon {
   display: inline-flex;
@@ -399,10 +410,10 @@
   color: var(--ui-warning); /* 规范 #ff6c29 */
 }
 
-/* ===== 尺寸档：大号（详情页 / 展示型表格） ===== */
+/* ===== 尺寸档：大号（详情页 / 展示型表格）—— 三档 30 / 38 / 46 里的最大档 ===== */
 .mh-table--lg {
-  --ui-table-head-height: 52px;
-  --ui-table-row-height: 56px;
+  --ui-table-head-height: 46px;
+  --ui-table-row-height: 46px;
   --ui-table-padding-x: var(--ui-space-6);
 }