dsh-config-manager 0.1.76 → 0.1.78

package/src/client/common/host-primitives.ts

@@ -10,6 +10,10 @@
  *    所以：只在**真要画 / 真要投影的那一刻**取，拿不到就回落本地实现。
  *
  * 该包因此不进 bundle：源码里只有 `require` 调用，白名单登记在 `src/utils/bundle-scan.ts`。
+ *
+ * 当前消费面（三样，全部「拿不到就回落本地实现」）：
+ *  ① `FileTypeIcon` —— 文件类型图标；② `projectUserText` —— 用户正文投影；
+ *  ③ `Tag` —— 只读状态标签（2026-10-17 对齐原生：四态徽章直接吃原生调色板）。
  * 三态缓存：undefined = 还没试过；null = 试过了，这台宿主没有；对象 = 拿到了。
  */
 import type { ComponentType, ReactNode } from 'react'
@@ -36,10 +40,45 @@ export type DshUserTextProjector = (
   references?: { openFile?: unknown; openSkill?: unknown },
 ) => ReactNode
 
-/** 宿主原语包里我们消费的那两个导出（其余一律不碰）。 */
+/**
+ * 宿主 `Tag` 的入参面（只声明我们传的字段）：tone 选调色板，children 是已翻译文案。
+ * 与 ui-primitives 的 Tag.d.ts 逐字同形；className 也透传（我们一般不用）。
+ */
+export interface DshTagProps {
+  tone?: 'outline' | 'solid' | 'neutral' | 'quiet' | 'success' | 'info' | 'warning' | 'danger'
+  className?: string
+  children?: ReactNode
+}
+
+/**
+ * 宿主图标组件的入参面（只声明我们传的字段）：
+ * ui-primitives 的图标都是 `(props) => svg` 的普通组件，`size` 缺省 16、`strokeWidth` 由
+ * Artwork 决定（`…OutlineRegular` = 1px 描边），颜色走 `currentColor`。
+ */
+export interface DshIconProps {
+  /** 边长（px；宿主缺省 16）。 */
+  size?: number
+  /** 追加类名（宿主组件自己的类名照旧生效）。 */
+  className?: string
+  /** 描边宽度（我们一般不动，留给宿主 Artwork 的档位）。 */
+  strokeWidth?: number
+}
+
+/**
+ * 我们真的用到的宿主图标 —— **闭集**：名字逐字对齐 ui-primitives 的导出，
+ * 只列这三个（复制 / 已复制 / 回退），别把整张 328 个图标的表搬进来。
+ */
+export type DshIconName = 'IconCopyOutlineRegular' | 'IconCheckOutlineRegular' | 'IconRefreshOutlineRegular'
+
+/** 宿主原语包里我们消费的那几个导出（其余一律不碰）。 */
 interface HostPrimitivesFace {
   FileTypeIcon?: unknown
   projectUserText?: unknown
+  Tag?: unknown
+  /** 图标（闭集，见 {@link DshIconName}）。 */
+  IconCopyOutlineRegular?: unknown
+  IconCheckOutlineRegular?: unknown
+  IconRefreshOutlineRegular?: unknown
 }
 
 let cached: HostPrimitivesFace | null | undefined
@@ -66,6 +105,30 @@ export function hostFileTypeIcon(): ComponentType<DshFileTypeIconProps> | null {
   return null
 }
 
+/**
+ * DSH 自带的只读标签（徽章）：与宿主同一颗组件、同一套调色板，拿不到回 null
+ * （调用方回落本仓库的 `.badge[data-kind]` 样式）。
+ */
+export function hostTag(): ComponentType<DshTagProps> | null {
+  const tag = hostPrimitives()?.Tag
+  if (typeof tag === 'function' || typeof tag === 'object') return tag as ComponentType<DshTagProps>
+  return null
+}
+
+/**
+ * DSH 自带的图标组件（按导出名取；拿不到回 null ⇒ 调用方回落本仓库的图标）。
+ *
+ * 为什么按名字取而不是顶层 import：与 FileTypeIcon / projectUserText 同一条纪律（老宿主没有
+ * 这份模块表，顶层 import 会把整个浏览器半打挂）；**为什么要用宿主图标**（2026-10-17 用户要求）：
+ * 复制按钮在 DSH 里是 `IconCopyOutlineRegular → IconCheckOutlineRegular` 的**瞬时切换**（无形变动画），
+ * 回退用 `IconRefreshOutlineRegular` —— 与动作行同框时字形、描边、视觉重量才与原生一致。
+ */
+export function hostIcon(name: DshIconName): ComponentType<DshIconProps> | null {
+  const icon = hostPrimitives()?.[name]
+  if (typeof icon === 'function' || typeof icon === 'object') return icon as ComponentType<DshIconProps>
+  return null
+}
+
 /** DSH 自带的用户正文投影（把会话引用/斜杠名渲染成 chip；拿不到回 null）。 */
 export function hostUserTextProjector(): DshUserTextProjector | null {
   const project = hostPrimitives()?.projectUserText

package/src/client/common/ui.tsx

@@ -12,6 +12,8 @@
  */
 import type { ChangeEvent, CSSProperties, ReactNode } from 'react'
 import { ExpandChevron } from './Icon.tsx'
+import { badgeTone, type BadgeKind } from '../../ui/badge-tone.ts'
+import { hostTag } from './host-primitives.ts'
 import css from '../config-manager.module.css'
 
 /* ---------------- Button ---------------- */
@@ -185,7 +187,7 @@ export function StatusDot({ kind = 'idle', pulse }: StatusDotProps) {
 
 /* ---------------- Badge ---------------- */
 
-export type BadgeKind = 'info' | 'ok' | 'warn' | 'error'
+export type { BadgeKind }
 
 export interface BadgeProps {
   kind?: BadgeKind
@@ -194,9 +196,21 @@ export interface BadgeProps {
   title?: string
 }
 
-/** 状态徽章（info=业务色 / ok=成功 / warn=警告 / error=错误）。 */
+/**
+ * 状态徽章（info=业务色 / ok=成功 / warn=警告 / error=错误）。
+ *
+ * **优先复用宿主的 `Tag`**（DSH 原生只读标签，与设置页/插件清单里那枚同源）：四态映射到
+ * 原生调色板的 success / info / warning / danger（映射表在 `src/ui/badge-tone.ts`，可单测）。
+ * 拿不到原生包（老宿主）时回落本仓库的 `.badge[data-kind]` —— 两条路径的语义由**同一张表**给出。
+ * 原生 Tag 没有 title 入参：需要悬停提示时套一层 inline-flex 的 wrapper，不改变布局。
+ */
 export function Badge({ kind = 'info', children, title }: BadgeProps) {
-  return <span className={`${css.badge} ${css[`badge${kind[0]!.toUpperCase()}${kind.slice(1)}`] ?? ''}`} title={title}>{children}</span>
+  const DshTag = hostTag()
+  if (DshTag !== null) {
+    const tag = <DshTag tone={badgeTone(kind)}>{children}</DshTag>
+    return title === undefined ? tag : <span className={css.badgeHost} title={title}>{tag}</span>
+  }
+  return <span className={css.badge} data-kind={kind} title={title}>{children}</span>
 }
 
 /* ---------------- Banner ---------------- */