@manohub/ui 0.6.0

package/dist/styles/components/card.css

@@ -0,0 +1,192 @@
+/**
+ * Card（卡片容器：底 / 弱描边 / 圆角 / 内距 / 悬浮与选中反馈）—— **卡片外观的唯一实现**。
+ *
+ * 依据：@aihub/theme 的 components/card.css（圆角 8 · 内距 20 · 弱描边）+ portal 技能市场卡片实测，见下方原注释。
+ */
+
+/* ===== Card（卡片容器：底 / 弱描边 / 圆角 / 内距 / 悬浮与选中反馈）=====
+   几何来源：portal 技能市场卡片实测（apps/portal/src/views/skills/index.tsx 的 SkillCard），
+   逐项落令牌：圆角 8（原型 rounded-lg）、内距 20（原型 p-5）、
+   底 Ne12/base-100、弱描边 base-300（原型 border-border）、
+   悬浮主色描边 + 主色 12% 阴影（原型 hover:border-primary + hover:shadow-[0_4px_10px_…]）。
+   卡片外观在本仓**只有这一处定义**：消费方（含 ListView.CardItem）不得自绘这四类属性。 */
+
+.mh-card {
+  /* 组件变量先铺一层，形态类只决定用哪几个（同 .mh-badge 手法） */
+  --mh-card-bg: var(--ui-base-100);
+  --mh-card-border: var(--ui-base-300);
+  --mh-card-radius: var(--ui-radius-md);
+  /* 卡片内距：**吃在各段上**（根件不出内距），故用同一个变量下发给分件与内建头 / 操作行 ——
+     整卡统一改它即可，单段微调传该段的 `padding` */
+  --mh-card-padding: var(--ui-space-5);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--mh-card-border);
+  border-radius: var(--mh-card-radius);
+  background: var(--mh-card-bg);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+/* ===== 内距归属（改这几条规则前务必先读）=====
+ *
+ * 1. **根件不出内距**：根件只出面（底 / 描边 / 圆角），也不出段间距 ——
+ *    根件若也吃内距，就会与段的内距叠成两层留白（故面无「根件让出内距」的修饰类）。
+ * 2. **段的纵向只吃上边**（`padding-block-start`）：一段只负责**与自己上方之间的距离**，
+ *    下一段的上内距就是「段间距」。于是头部 + body、body + footer 相邻时**不会**叠成两份
+ *    （各吃四边就会变成 20 + 20 = 40，这正是要避免的）。
+ * 3. **卡片下沿由最后一段补**（下方那条 `:last-child` 规则）：段不吃下边，底边得有人兜。
+ *    段的位置由组件保证（裸内容自动成段、封面不吃内距也不是段），故 `:last-child` 必定落在段上。
+ * 4. 横向每段恒吃 `--mh-card-padding`（`padding-inline`）。
+ *
+ * 直接写的内容（没包 `Card.Body` 的裸子节点）由组件自动补一层 Body，所以
+ * 「不给分件」（`<Card>正文</Card>`）与显式分段得到的是同一套几何。 */
+
+/* 头部：**分件 `Card.Header` 与 `Card` 上的内建头共用这一类**（四件：图标 / 标题 / 副标题 + 右端 extra）。
+   行 + 两端对齐：左「左侧区域」、右「extra」；四个位一个都不给时退化为纯自排容器。 */
+
+.mh-card__header {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ui-space-2);
+  min-width: 0;
+  padding-block-start: var(--mh-card-padding);
+  padding-inline: var(--mh-card-padding);
+}
+
+/* 左侧区域：图标 + 文字块（标题 / 副标题）+ 自排内容 */
+
+.mh-card__header-main {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: var(--ui-space-3);
+  min-width: 0;
+}
+
+/* 图标位 36×36（与 ListView.CardItem 同一档），圆角取控件档 6；图片按方框自裁 */
+
+.mh-card__header-icon {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  overflow: hidden;
+  border-radius: var(--ui-radius-control);
+}
+
+.mh-card__header-icon-img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* 文字块：标题在上、副标题在下（两行都单行省略） */
+
+.mh-card__header-text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-space-1);
+  min-width: 0;
+}
+
+.mh-card__header-title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--ui-font-heading);
+  line-height: var(--ui-line-heading);
+  font-weight: var(--ui-weight-medium);
+  color: var(--ui-base-content);
+}
+
+.mh-card__header-subtitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--ui-font-caption);
+  line-height: var(--ui-line-caption);
+  color: var(--ui-base-content-muted);
+}
+
+/* 右端：状态胶囊 / 行内按钮 / 统计（不抢左侧宽度） */
+
+.mh-card__header-extra {
+  flex: none;
+  font-size: var(--ui-font-caption);
+  color: var(--ui-base-content-muted);
+}
+
+.mh-card__body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  /* 卡内纵向间距 16（原型 gap-4）：内容段落的节奏原来由根件的 gap 给，内距下放到段后归这里 */
+  gap: var(--ui-space-4);
+  min-width: 0;
+  min-height: 0;
+  padding-block-start: var(--mh-card-padding);
+  padding-inline: var(--mh-card-padding);
+}
+
+/* 尾部贴卡片底部：卡片被拉伸（网格等高 / min-height）时尾部不悬空 */
+
+.mh-card__footer {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  gap: var(--ui-space-2);
+  min-width: 0;
+  margin-top: auto;
+  padding-block-start: var(--mh-card-padding);
+  padding-inline: var(--mh-card-padding);
+}
+
+/* 卡片下沿：纵向只吃上边（见上），底边由**最后一段**补，否则内容贴卡片边 */
+
+.mh-card > .mh-card__header:last-child,
+.mh-card > .mh-card__body:last-child,
+.mh-card > .mh-card__footer:last-child,
+.mh-card > .mh-card__actions:last-child {
+  padding-block-end: var(--mh-card-padding);
+}
+
+.mh-card--plain {
+  border-color: transparent;
+}
+
+.mh-card--interactive {
+  cursor: pointer;
+}
+
+.mh-card--interactive:hover {
+  border-color: var(--ui-primary);
+  box-shadow: var(--ui-shadow-card-hover);
+}
+
+.mh-card--selected {
+  border-color: var(--ui-primary);
+  background: var(--ui-primary-subtle);
+}
+
+.mh-card--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* ===== 底部操作行（与段同族，头部那一类的规则见上）=====
+ * 内距与段同口径：各吃一份段内距，`margin-top: auto` 贴卡片底部。 */
+.mh-card__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  margin-top: auto;
+  padding-block-start: var(--mh-card-padding);
+  padding-inline: var(--mh-card-padding);
+}

package/dist/styles/components/checkbox.css

@@ -0,0 +1,145 @@
+/**
+ * Checkbox —— 复选框（真实 input 负责可访问性，方块自绘，状态走 data-state 协议）。
+ *
+ * 几何取自设计稿《MH后台-0911》`控件` 画布的三枚原子件（逐个实测）：
+ * - `表单/checkbox/0`（`0:4101`）：14×14 / 白底 / 边 `#dcdcdc` / **r3**；
+ * - `表单/checkbox/1`（`0:4098`）：14×14 / `#2660ff` 实底 / 白勾；
+ * - `表单/checkbox/0.5`（`0:4095`）：14×14 / `#2660ff` 实底 / 白横杠（半选）。
+ *
+ * **标准档是 14**（改前为 16 —— 设计稿那枚 14 正好是本包原来的 `sm` 档，档位整体挪了一格）。
+ * 勾图标 **10px**：白勾在设计里占 8×6，其对角线 ≈ 10，恰好是 14 框体内的视觉满宽。
+ *
+ * **框体圆角走主题的 `--ui-radius-xs`（3px）**，不再是本件写死的字面量 ——
+ * 改前这里硬编码 4px，把 `farris` 主题声明的 3px 彻底挡住（该主题注释还写着「复选框框体 3px ✓」，
+ * 实际从未生效）。框体边取 `--ui-base-400`：设计让勾选框比容器线深一档（`#dcdcdc` vs `#e6e6e6`），
+ * 否则 14px 的小方块在浅底上看不见。
+ *
+ * 档位只覆盖令牌、不复制规则体（与 `Switch` 同一口径）。
+ * 勾 / 横杠一律由内容承载，框体只管底与边：勾取 `@manohub/icon` 的 `check` 字形，
+ * 半选取一条横杠；**未选态靠框体的 `color: transparent` 让 currentColor 图标隐形** ——
+ * 不需要 `::after` 描画，也不需要为三态各备一套 DOM。
+ */
+.mh-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-checkbox-label-gap);
+  font-size: var(--ui-font-body);
+  line-height: var(--ui-line-body);
+  color: var(--ui-base-content);
+  cursor: pointer;
+  user-select: none;
+}
+
+.mh-checkbox__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-checkbox__box {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--ui-checkbox-size);
+  height: var(--ui-checkbox-size);
+  border: 1px solid var(--ui-base-400);
+  border-radius: var(--ui-checkbox-radius);
+  background: var(--ui-base-100);
+  /* 未选：字色透明 → currentColor 的勾与横杠自然隐形（同一份 DOM 覆盖三态） */
+  color: transparent;
+  transition-property: background-color, border-color, color, box-shadow;
+  transition-duration: 0.15s;
+  transition-timing-function: ease;
+}
+
+.mh-checkbox__icon {
+  flex: none;
+  width: var(--ui-checkbox-icon-size);
+  height: var(--ui-checkbox-icon-size);
+}
+
+/* ===== 尺寸档（只覆盖令牌） ===== */
+.mh-checkbox--sm {
+  --ui-checkbox-size: var(--ui-checkbox-size-sm);
+  --ui-checkbox-icon-size: var(--ui-checkbox-icon-size-sm);
+  font-size: var(--ui-font-caption);
+}
+.mh-checkbox--lg {
+  --ui-checkbox-size: var(--ui-checkbox-size-lg);
+  --ui-checkbox-icon-size: var(--ui-checkbox-icon-size-lg);
+}
+
+/*
+ * 选中 / 半选：填充**主色**，勾与横杠用 currentColor 绘制。
+ *
+ * 全库"选中"只有主色一种表达 —— 一屏里会出现「蓝色开关 + 蓝色表格勾选列（复用本件）
+ * + 蓝色勾选框」同一种叫法；`@aihub/theme` 的 checkbox 口径也是「已选择背景取主色」。
+ * 要再引入中性面填充，做成 `tone` 的第二档（如 `tone="neutral"`），**不要**把默认改回深色。
+ */
+.mh-checkbox__box[data-state='checked'],
+.mh-checkbox__box[data-state='indeterminate'] {
+  background: var(--ui-primary);
+  border-color: var(--ui-primary);
+  color: var(--ui-primary-content);
+}
+
+.mh-checkbox__dash {
+  width: 8px;
+  height: 2px;
+  border-radius: 1px;
+  background: currentColor;
+}
+
+/* 滑过：未选才补边色（选中态已经有满色底，再变色只会闪） */
+.mh-checkbox:hover .mh-checkbox__box {
+  border-color: var(--ui-primary);
+}
+.mh-checkbox__box[data-state='checked'],
+.mh-checkbox__box[data-state='indeterminate'] {
+  border-color: var(--ui-primary);
+}
+
+/* 键盘焦点环画在可见框体上（隐身开关没有可见焦点）。
+   必须是 `:focus-visible`（与 `.mh-radio` / `.mh-switch` 的轨道同一写法）：用 `:focus-within` 的话
+   鼠标点一下也会亮 —— 在表格勾选列里就表现为「框体 1px 边框 + 外面再一圈」，看着像两层 border。 */
+.mh-checkbox > .mh-checkbox__input:focus-visible + .mh-checkbox__box {
+  outline: 2px solid var(--ui-primary-weak);
+  outline-offset: 2px;
+}
+
+.mh-checkbox.is-disabled {
+  cursor: not-allowed;
+  color: var(--ui-base-content-subtle);
+}
+
+.mh-checkbox.is-disabled .mh-checkbox__box {
+  background: var(--ui-base-200);
+  border-color: var(--ui-base-300);
+  color: var(--ui-base-content-subtle);
+}
+
+.mh-checkbox.is-disabled:hover .mh-checkbox__box {
+  border-color: var(--ui-base-300);
+}
+
+/* ===== 多选组（表驱动；横向缺省换行，vertical 走纵向） ===== */
+.mh-checkbox__group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ui-space-2) var(--ui-space-4);
+  align-items: center;
+}
+.mh-checkbox__group--vertical {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--ui-space-2);
+}

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

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

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

@@ -0,0 +1,91 @@
+/**
+ * CodeEditor —— 可编辑代码区（等宽多行 + 按行自适应 + 可限高内滚 + 只读/禁用态）。
+ *
+ * 与 `Code`（只读展示）**视觉同源**：同一份底（`--ui-base-200`）、同一个圆角档（`--ui-radius-control`）、
+ * 同一族等宽字与字号（`--ui-font-mono` / `--ui-font-caption`）—— 两件互切时块体不"跳"。
+ *
+ * 两处**有意**的差别（改之前先读）：
+ *
+ * 1. 本件**画框的是容器**（`.mh-code-editor`），内部 `textarea` 透明、无边框、无 outline ——
+ *    原生 `textarea` 的框模型（内距 / 滚动条 / 聚焦轮廓）会把框画歪，收归容器才能与只读块对齐；
+ * 2. 代码块缺省**横向滚动**，本件是**软换行**（`textarea` 的原生行为）：编辑态不折行会让长行看不见尾巴。
+ *
+ * 状态一律走**原生属性**（`[readonly]` / `:disabled` / `:focus-within`），组件不下发 `data-*`：
+ * 只读与禁用本就有原生表达，多一套协议就多一处会漂的真相。
+ *
+ * ⚠️ 令牌**不复用** `code.css` 的 `--ui-code-*`：那些只服务 `Code` 单件，跨件复用按硬约束要迁进
+ * `theme/`（跨件共用令牌单一来源）。本件只有几何，色 / 圆角 / 字族一律直接取 theme 令牌。
+ */
+.mh-code-editor {
+
+  position: relative;
+  display: block;
+  border-radius: var(--ui-code-editor-radius);
+  background: var(--ui-base-200); /* 与只读块同底 */
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-code-editor-font-size);
+  line-height: var(--ui-code-editor-line);
+  color: var(--ui-base-content);
+  transition: box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
+}
+/* 聚焦环：与输入框族同一句（主色弱底当环，不新造阴影令牌） */
+.mh-code-editor:focus-within {
+  box-shadow: 0 0 0 2px var(--ui-primary-weak);
+}
+
+/* 编辑区：透明底 + 无框 + 无 outline（框与聚焦环都画在容器上） */
+.mh-code-editor__area {
+  display: block;
+  width: 100%;
+  margin: 0;
+  padding: var(--ui-code-editor-padding-y) var(--ui-code-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-editor__area::placeholder {
+  color: var(--ui-base-content-subtle);
+}
+
+/* 语言角标（可选）：与只读块的角标同槽位。本件**不叠在文字上**（编辑区内容会折行，压住就看不见了），
+   而是让首行右端**预留**出它的宽度 —— 预留只影响折行位置，短行看不见任何变化 */
+.mh-code-editor__lang {
+  position: absolute;
+  top: var(--ui-code-editor-padding-y);
+  right: var(--ui-code-editor-padding-x);
+  display: flex;
+  align-items: center;
+  height: var(--ui-code-editor-line);
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-code-editor-font-size);
+  line-height: 1;
+  color: var(--ui-base-content-subtle);
+  user-select: none;
+  pointer-events: none;
+}
+.mh-code-editor:has(> .mh-code-editor__lang) > .mh-code-editor__area {
+  padding-right: calc(var(--ui-code-editor-padding-x) + var(--ui-code-editor-lang-reserve));
+}
+
+/* 只读态（原生 `readonly`：仍可选中、可滚动、可复制，只是不可改）——不弱化字色，
+   代码是拿来读的；与只读块观感一致 */
+.mh-code-editor:has(> .mh-code-editor__area[readonly]) {
+  cursor: default;
+}
+
+/* 禁用态：底与字色弱化 + 内描边（本件没有外描边，靠内描边表达"锁住"） */
+.mh-code-editor:has(> .mh-code-editor__area: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-editor:has(> .mh-code-editor__area:disabled) > .mh-code-editor__area {
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,24 @@
+/**
+ * code-editor —— 单件令牌（**基础值**）。
+ *
+ * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出（原先混写在 `code-editor.css` 顶部）：这些是**基础值**，锚在
+ * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
+ * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
+ * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
+ *
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
+ * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+ */
+[data-manohub-ui] {
+  /* 单件令牌（只服务本件：几何） */
+  --ui-code-editor-radius: var(--ui-radius-control); /* 6：与只读块同档（原注释写 8，是旧稿残留） */
+  --ui-code-editor-padding-x: var(--ui-space-3); /* 12 */
+  --ui-code-editor-padding-y: var(--ui-space-2); /* 8 */
+  --ui-code-editor-font-size: var(--ui-font-caption); /* 13：与只读块同档 */
+  --ui-code-editor-line: var(--ui-line-caption); /* 20：行高（角标也吃它） */
+  --ui-code-editor-lang-reserve: 56px; /* 角标位：首行右端预留宽度（只影响折行位置） */
+}

package/dist/styles/components/code.css

@@ -0,0 +1,153 @@
+/**
+ * Code —— 代码（行内 chip + 代码块 + 语言角标 + 复制位）。
+ *
+ * 观感基准：**无边框浅底块 + 方圆角 + 右上角语言角标 + 悬浮/聚焦让位后出现的方形图标复制按钮**。
+ * 出处：`@aihub/theme` 的 `playground/components/code.css` 与 `src/components/code.css`
+ * （行内 chip 主色字 + 浅底、圆角全；`--plain` 档中性底 + 小圆角；代码块 = 页面底 + 等宽字 + 内距 12）。
+ *
+ * 三件结构决定（照规范的分工，不另创）：
+ *
+ * - **复制按钮的面仍归按钮族**（`.mh-button--icon`），本族只补「浮在代码块上需要自己的底与定位」；
+ *   故标记是 `class="mh-button mh-button--icon mh-code__copy"`。
+ * - **复制按钮与语言角标都不能放进代码块里**：代码块是 `overflow-x: auto` 的滚动容器，
+ *   会裁掉外挂的绝对定位件 —— 故两者都挂在宿主 `.mh-code__wrap` 上（宿主只做 `position: relative`）。
+ * - **隐藏用 `opacity` + `pointer-events`**（不是 `visibility` / `display`）：键盘仍能 Tab 到它，
+ *   `:focus-within` 会把它显出来，且隐藏时不残留一块看不见的可点区。
+ *
+ * **本族与按钮族的层序**（改这几条规则前先读）：`styles/index.css` 里 `code.css` 在 `button.css`
+ * **之前**导入，故 `background` / `color` / `box-shadow` 这些**同特异性的声明会被按钮族的档位规则压掉**
+ * （历史 bug：`.mh-code__copy` 的白底被 `.mh-button--text { background: transparent }` 压成透明，
+ * 复制位看起来像一段悬空文字）。修法不是调层序，而是让本族的声明**升一档特异性**
+ * （`.mh-code__wrap > .mh-code__copy`，悬停 / 成功态再各叠一层）—— 按钮族日后换皮肤也压不掉它。
+ *
+ * 零 JS 可表达：全部皮肤 + 角标让位 + 复制位的显隐。**真正的复制动作归组件层**（要 `navigator.clipboard`）。
+ */
+
+/* 几何只挂在行内 chip 上：令牌在同名 `.tokens.css`（锚 `[data-manohub-ui]`），几何若跟着挂会把壳与块级元素也画成 chip */
+.mh-code {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px var(--ui-space-3);
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-code-chip-bg);
+  color: var(--ui-primary);
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-code-font-size);
+}
+
+/* 中性档（规范 `.chip--plain`：规则 ID 这类不强调的短标识） */
+.mh-code--plain {
+  background: var(--ui-code-block-bg);
+  color: var(--ui-base-content);
+  border-radius: var(--ui-code-radius);
+}
+
+/* 代码块：无边框浅底 + 方圆角；**缺省不折行**（保持 `pre` 的横向滚动，缩进与列对齐不被破坏），
+   `--wrap` 档才软换行 */
+.mh-code--block {
+  display: block;
+  margin: var(--ui-space-2) 0 0;
+  padding: var(--ui-code-block-padding);
+  border: 0;
+  border-radius: var(--ui-code-radius);
+  background: var(--ui-code-block-bg);
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-code-font-size);
+  line-height: var(--ui-code-line);
+  color: var(--ui-base-content);
+  overflow-x: auto;
+  white-space: pre;
+  overflow-wrap: normal;
+}
+
+/* 宿主：给复制位与语言角标一个不受裁切的定位上下文；同时把「缺省不折行」的代价收在块内 ——
+   `min-width: 0` 让它在 flex / grid 里能被压到容器宽度（否则长行的 min-content 会把轨道撑宽、
+   页面跟着横向溢出），长行改为块内横向滚动。 */
+.mh-code__wrap {
+  position: relative;
+  min-width: 0;
+}
+
+/* 语言角标（可选）：与复制位**同槽位**，悬浮/聚焦时淡出让位（零 JS 互斥）。
+   装饰位：不吃指针事件，否则它会挡住复制位的悬停热区 */
+.mh-code__lang {
+  position: absolute;
+  top: var(--ui-code-copy-inset);
+  right: var(--ui-code-copy-inset);
+  display: flex;
+  align-items: center;
+  height: var(--ui-code-copy-size); /* 与复制位等高：让位互换时基线不跳 */
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-code-font-size);
+  line-height: 1;
+  color: var(--ui-base-content-subtle);
+  user-select: none;
+  pointer-events: none;
+  transition: opacity 0.15s ease;
+}
+.mh-code__wrap:hover > .mh-code__lang,
+.mh-code__wrap:focus-within > .mh-code__lang,
+.mh-code__wrap.is-hover > .mh-code__lang {
+  opacity: 0;
+}
+
+/* 复制位（面归按钮族，这里只给定位、浮底、方形几何、显隐）。
+   选择器**刻意升一档**（`.mh-code__wrap >`）：同特异性下按钮族的档位规则会压掉这几条（见文件头） */
+.mh-code__wrap > .mh-code__copy {
+  position: absolute;
+  top: var(--ui-code-copy-inset);
+  right: var(--ui-code-copy-inset);
+  width: var(--ui-code-copy-size);
+  height: var(--ui-code-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__wrap:hover > .mh-code__copy,
+.mh-code__wrap:focus-within > .mh-code__copy,
+.mh-code__wrap.is-hover > .mh-code__copy {
+  opacity: 1;
+  pointer-events: auto;
+}
+/* 悬停 / 键盘聚焦的加深档（再叠一层，压过 `.mh-button--icon:hover` 的字色与光晕） */
+.mh-code__wrap > .mh-code__copy:hover,
+.mh-code__wrap > .mh-code__copy:focus-visible,
+.mh-code__wrap.is-hover > .mh-code__copy {
+  border-color: var(--ui-base-content-subtle);
+  color: var(--ui-primary);
+  box-shadow: none;
+}
+
+/* 复制成功态（组件下发 `data-state`；原生无此态，静态档 `.is-copied` 供读图） */
+.mh-code__wrap > .mh-code__copy.is-copied,
+.mh-code__wrap > .mh-code__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__wrap > .mh-code__copy {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  .mh-code__lang {
+    display: none;
+  }
+}
+
+/* ===== 软换行档（缺省保持 `pre` 的横向不换行 + 横向滚动） ===== */
+.mh-code--wrap {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}

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

@@ -0,0 +1,29 @@
+/**
+ * code —— 单件令牌（**基础值**）。
+ *
+ * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出（原先混写在 `code.css` 顶部）：这些是**基础值**，锚在
+ * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
+ * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
+ * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
+ *
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
+ * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+ */
+[data-manohub-ui] {
+  /* 单件令牌（也挂到外层容器与块级元素上：块级 `<pre>` 是 `.mh-code__wrap` 的子元素、
+     并不带 `.mh-code`（行内 chip）类，只在 `.mh-code` 上声明会让块级与复制位全部取不到值） */
+  --ui-code-chip-bg: var(--ui-primary-weak); /* 规范 Au02 行内底 */
+  --ui-code-block-bg: var(--ui-base-200); /* 规范代码块底（页面底 Ne11） */
+  --ui-code-block-line: var(--ui-base-300); /* 描边色：块自身已去边框，本令牌现服务复制位按钮 */
+  --ui-code-radius: var(--ui-radius-control);
+  --ui-code-font-size: var(--ui-font-caption); /* 规范等宽字号档对位 */
+  --ui-code-line: var(--ui-line-caption); /* 等宽行高：角标与复制位的行高同源 */
+  --ui-code-block-padding: var(--ui-space-3); /* 12：代码块内距 */
+  --ui-code-copy-size: var(--ui-control-height-md); /* 32：复制位方形热区（与按钮族标准档同高） */
+  /* 复制位是 `Button`（`mh-button__icon`）：字形尺寸归按钮族的图标槽（常规图标档），本件不另设令牌 */
+  --ui-code-copy-inset: var(--ui-space-2); /* 8：复制位 / 角标距块边 */
+}