@manohub/ui 0.10.4 → 1.0.0

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

@@ -1,216 +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;
-  }
-}
+/**
+ * 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

@@ -1,40 +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：复制位 / 角标距块边 */
-}
+/**
+ * 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/collapse.css

@@ -1,62 +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; /* 不能开合就别留一个会转的箭头 */
-}
+/**
+ * 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; /* 不能开合就别留一个会转的箭头 */
+}