@orbit-work/ui 0.1.0

package/src/components/domain/chat/Composer/parts/ComposerQueue.stories.tsx

@@ -0,0 +1,275 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { AlertCircle, Clock, Close, Share as Send } from "../../../../composite/Icons"
+import { Button } from "../../../../primitives"
+import { ComposerQueue } from "./ComposerQueue"
+
+const meta = {
+  title: "Chat/ComposerQueue",
+  component: ComposerQueue,
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 40, background: "var(--ow-bg)", maxWidth: 600 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ComposerQueue>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    items: [
+      { id: "1", text: "分析代码质量" },
+      { id: "2", text: "生成测试用例" },
+      { id: "3", text: "更新文档" },
+    ],
+  },
+}
+
+export const WithCount: Story = {
+  args: {
+    count: 5,
+    items: [
+      { id: "1", text: "任务 1" },
+      { id: "2", text: "任务 2" },
+    ],
+  },
+}
+
+export const WithNotice: Story = {
+  args: {
+    notices: [
+      {
+        id: "notice-1",
+        text: "当前有 3 个任务正在排队",
+        tone: "default",
+      },
+    ],
+    items: [
+      { id: "1", text: "分析代码" },
+      { id: "2", text: "生成报告" },
+      { id: "3", text: "发送通知" },
+    ],
+  },
+}
+
+export const WarningNotice: Story = {
+  args: {
+    notices: [
+      {
+        id: "notice-1",
+        text: "当前队列较长，预计等待 2 分钟",
+        tone: "warning",
+      },
+    ],
+    items: [
+      { id: "1", text: "任务 1" },
+      { id: "2", text: "任务 2" },
+    ],
+  },
+}
+
+export const ErrorNotice: Story = {
+  args: {
+    notices: [
+      {
+        id: "notice-1",
+        text: "任务执行失败，请重试",
+        tone: "error",
+        action: (
+          <Button size="sm" variant="ghost">
+            重试
+          </Button>
+        ),
+      },
+    ],
+    items: [],
+  },
+}
+
+export const WithItemStatus: Story = {
+  args: {
+    items: [
+      {
+        id: "1",
+        text: "分析代码质量",
+        status: "submitting",
+        statusLabel: "发送中",
+      },
+      {
+        id: "2",
+        text: "生成测试用例",
+        status: "queued",
+      },
+      {
+        id: "3",
+        text: "更新文档",
+        status: "failed",
+        statusLabel: "失败",
+      },
+    ],
+  },
+}
+
+export const WithItemActions: Story = {
+  args: {
+    items: [
+      {
+        id: "1",
+        text: "分析代码质量",
+        actions: (
+          <>
+            <Button size="sm" variant="ghost" icon={<Send />} title="立即执行" />
+            <Button size="sm" variant="ghost" icon={<Close />} title="取消" />
+          </>
+        ),
+      },
+      {
+        id: "2",
+        text: "生成测试用例",
+        actions: <Button size="sm" variant="ghost" icon={<Close />} title="取消" />,
+      },
+    ],
+  },
+}
+
+export const Steering: Story = {
+  args: {
+    items: [
+      {
+        id: "1",
+        text: "更正：使用 TypeScript 而不是 JavaScript",
+        kind: "steering",
+        icon: <AlertCircle />,
+      },
+      {
+        id: "2",
+        text: "添加错误处理",
+        kind: "steering",
+        icon: <AlertCircle />,
+      },
+    ],
+  },
+}
+
+export const Mixed: Story = {
+  args: {
+    items: [
+      {
+        id: "1",
+        text: "分析代码",
+        kind: "follow-up",
+      },
+      {
+        id: "2",
+        text: "使用更严格的类型检查",
+        kind: "steering",
+        icon: <AlertCircle />,
+      },
+      {
+        id: "3",
+        text: "生成文档",
+        kind: "follow-up",
+      },
+    ],
+  },
+}
+
+export const Draggable: Story = {
+  args: {
+    items: [
+      {
+        id: "1",
+        text: "任务 1",
+        draggable: true,
+        dragTitle: "拖动以调整顺序",
+        onDragStart: (e) => console.log("Drag start:", e),
+        onDragEnd: (e) => console.log("Drag end:", e),
+      },
+      {
+        id: "2",
+        text: "任务 2",
+        draggable: true,
+        dragTitle: "拖动以调整顺序",
+        onDragStart: (e) => console.log("Drag start:", e),
+        onDragEnd: (e) => console.log("Drag end:", e),
+      },
+      {
+        id: "3",
+        text: "任务 3",
+        draggable: true,
+        dragTitle: "拖动以调整顺序",
+        onDragStart: (e) => console.log("Drag start:", e),
+        onDragEnd: (e) => console.log("Drag end:", e),
+      },
+    ],
+  },
+}
+
+export const CustomIcon: Story = {
+  args: {
+    icon: <Send />,
+    items: [
+      { id: "1", text: "发送消息 1" },
+      { id: "2", text: "发送消息 2" },
+    ],
+  },
+}
+
+export const CustomLabel: Story = {
+  args: {
+    label: "待处理",
+    items: [
+      { id: "1", text: "任务 1" },
+      { id: "2", text: "任务 2" },
+    ],
+  },
+}
+
+export const MultipleNotices: Story = {
+  args: {
+    notices: [
+      {
+        id: "notice-1",
+        text: "队列较长，预计等待 2 分钟",
+        tone: "warning",
+      },
+      {
+        id: "notice-2",
+        text: "您可以随时取消排队中的任务",
+        tone: "default",
+      },
+    ],
+    items: [
+      { id: "1", text: "任务 1" },
+      { id: "2", text: "任务 2" },
+    ],
+  },
+}
+
+/** 空队列：无项也无提示时组件返回 null，画布为空是预期结果（§6：容器件空态不留空壳条）。 */
+export const Empty: Story = {
+  parameters: {
+    docs: { description: { story: "无队列项、无提示：组件整块不渲，Composer 上不留空井。" } },
+  },
+  args: {
+    items: [],
+  },
+}
+
+export const LongText: Story = {
+  args: {
+    items: [
+      {
+        id: "1",
+        text: "分析整个代码库的质量问题，包括但不限于类型安全、错误处理、性能优化等方面",
+      },
+      {
+        id: "2",
+        text: "根据分析结果生成详细的测试用例，覆盖所有边界情况",
+      },
+    ],
+  },
+}

package/src/components/domain/chat/Composer/parts/ComposerQueue.tsx

@@ -0,0 +1,155 @@
+"use client"
+
+import type { DragEventHandler, HTMLAttributes, ReactNode } from "react"
+import { cn } from "../../../../../lib/utils"
+import { Clock } from "../../../../composite/Icons"
+
+export type ComposerQueueTone = "default" | "warning" | "error"
+export type ComposerQueueItemKind = "follow-up" | "steering"
+export type ComposerQueueItemStatus = "queued" | "submitting" | "failed"
+
+export interface ComposerQueueNotice {
+  id?: string
+  text: ReactNode
+  tone?: ComposerQueueTone
+  action?: ReactNode
+}
+
+export interface ComposerQueueItem {
+  id: string
+  text: ReactNode
+  icon?: ReactNode
+  kind?: ComposerQueueItemKind
+  status?: ComposerQueueItemStatus
+  statusLabel?: ReactNode
+  draggable?: boolean
+  dragging?: boolean
+  dragOver?: boolean
+  dragTitle?: string
+  ariaLabel?: string
+  actions?: ReactNode
+  onDragEnter?: DragEventHandler<HTMLDivElement>
+  onDragOver?: DragEventHandler<HTMLDivElement>
+  onDragLeave?: DragEventHandler<HTMLDivElement>
+  onDrop?: DragEventHandler<HTMLDivElement>
+  onDragStart?: DragEventHandler<HTMLSpanElement>
+  onDragEnd?: DragEventHandler<HTMLSpanElement>
+}
+
+export interface ComposerQueueProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+  label?: ReactNode
+  count?: number
+  icon?: ReactNode
+  notices?: ComposerQueueNotice[]
+  items?: ComposerQueueItem[]
+}
+
+/**
+ * ComposerQueue —— Composer 队列区（Composer 簇内部件，落在组合器的 `queue` 具名位）。
+ *
+ * 井底走 `--ow-surface-2`（§5 嵌套井），圆角与行高走 token 档；队列计数是读数，
+ * 按 §7 走 mono ＋ tabular-nums。R3 中性件：不带信标，状态靠功能色＋文字双编码。
+ */
+export function ComposerQueue({
+  label = "排队中",
+  count,
+  icon = <Clock />,
+  notices = [],
+  items = [],
+  className = "",
+  ...rootProps
+}: ComposerQueueProps) {
+  const resolvedCount = count ?? items.length
+
+  // R2 复审修：既无队列项也无提示时整块不渲。原来照渲一条 border + p-2.5 的空壳条
+  // （约 20px 高的空井），§6 容器件空态要么走 primitives/EmptyState、要么整块不渲——
+  // 队列区是 Composer 的附属井，没有内容就不该占位。
+  if (resolvedCount === 0 && notices.length === 0 && items.length === 0) return null
+
+  return (
+    <div
+      data-slot="composer-queue"
+      className={cn(
+        "flex w-full min-w-0 box-border self-stretch flex-col gap-1.5 mb-2 p-2.5 border border-[color:var(--ow-border)] [border-radius:var(--ow-radius-card)] bg-[var(--ow-surface-2)]",
+        className,
+      )}
+      aria-live="polite"
+      {...rootProps}
+    >
+      {resolvedCount > 0 && (
+        <div
+          data-ow-part="header"
+          className="inline-flex items-center gap-1.5 text-ow-text-3 font-medium text-ow-fs-mark-md leading-none [&_svg]:w-3.5 [&_svg]:h-3.5"
+        >
+          <span className="inline-flex flex-[0_0_auto] items-center justify-center">{icon}</span>
+          <span>
+            {label} ·{" "}
+            <span data-ow-part="count" className="font-[family-name:var(--ow-font-mono)] tabular-nums">
+              {resolvedCount}
+            </span>
+          </span>
+        </div>
+      )}
+      {notices.map((notice, index) => (
+        <div
+          key={notice.id ?? index}
+          data-ow-part="notice"
+          data-ow-state={notice.tone}
+          className="flex w-full min-w-0 box-border items-center min-h-7 gap-2 px-2.5 py-1.5 border border-[color:var(--ow-border)] [border-radius:var(--ow-radius-control)] bg-transparent text-[color:var(--ow-text-2)] font-normal text-ow-fs-body-sm leading-[1.25]"
+        >
+          <span className="min-w-0 flex-[1_1_auto] overflow-hidden text-ellipsis whitespace-nowrap">{notice.text}</span>
+          {notice.action && (
+            <span className="inline-flex min-w-0 flex-[0_0_auto] items-center gap-2 ml-auto">{notice.action}</span>
+          )}
+        </div>
+      ))}
+      {items.length > 0 && (
+        <div
+          data-ow-part="list"
+          className="flex w-full min-w-0 box-border max-h-32 flex-col gap-1.5 overflow-y-auto pr-px"
+        >
+          {items.map((item) => (
+            <div
+              key={item.id}
+              data-ow-part="item"
+              data-ow-state={
+                cn(item.kind, item.status, item.dragging && "dragging", item.dragOver && "drag-over") || undefined
+              }
+              className="flex w-full min-w-0 box-border items-center min-h-8 gap-2 py-1.5 px-2 pl-2.5 border border-[color:var(--ow-border)] [border-radius:var(--ow-radius-control)] bg-transparent text-[color:var(--ow-text-2)] font-normal text-ow-fs-body-sm leading-[1.3] transition-[background-color,border-color] duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]"
+              onDragEnter={item.onDragEnter}
+              onDragOver={item.onDragOver}
+              onDragLeave={item.onDragLeave}
+              onDrop={item.onDrop}
+            >
+              <span
+                data-ow-part="icon"
+                data-ow-state={item.draggable ? "draggable" : undefined}
+                className="inline-flex flex-[0_0_auto] items-center justify-center w-4 h-4 text-ow-text-3 [&_svg]:w-3.5 [&_svg]:h-3.5"
+                draggable={item.draggable}
+                onDragStart={item.onDragStart}
+                onDragEnd={item.onDragEnd}
+                title={item.dragTitle}
+                aria-label={item.ariaLabel}
+              >
+                {item.icon ?? icon}
+              </span>
+              <span className="min-w-0 flex-[1_1_auto] overflow-hidden text-ellipsis whitespace-nowrap">
+                {item.text}
+              </span>
+              {(item.statusLabel || item.actions) && (
+                <span className="inline-flex min-w-0 flex-[0_0_auto] items-center gap-2 ml-auto">
+                  {item.statusLabel && (
+                    <span data-ow-part="status" className="flex-[0_0_auto] text-ow-text-3 whitespace-nowrap">
+                      {item.statusLabel}
+                    </span>
+                  )}
+                  {item.actions}
+                </span>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/domain/chat/Composer/parts/ComposerQueueSource.test.mjs

@@ -0,0 +1,95 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const source = await readFile(new URL("./ComposerQueue.tsx", import.meta.url), "utf8")
+const stories = await readFile(new URL("./ComposerQueue.stories.tsx", import.meta.url), "utf8")
+
+// W5 终扫：队列井的表面语汇归位（§5 表面/立面）。
+test("§5 立面：队列井＝1px 实边 ＋ surface-2 井底，V1 虚线拖放框退役", () => {
+  assert.match(
+    source,
+    /border border-\[color:var\(--ow-border\)\] \[border-radius:var\(--ow-radius-card\)\] bg-\[var\(--ow-surface-2\)\]/,
+  )
+  assert.doesNotMatch(source, /border-dashed/)
+  assert.doesNotMatch(source, /shadow-|box-shadow/)
+})
+
+test("§5 表面阶梯：井内 notice/item 行靠边框分隔，不再倒着铺更浅的 --ow-bg", () => {
+  assert.doesNotMatch(source, /bg-\[var\(--ow-bg\)\]/)
+  assert.match(source, /data-ow-part="notice"[\s\S]{0,320}?bg-transparent/)
+  assert.match(source, /data-ow-part="item"[\s\S]{0,420}?bg-transparent/)
+})
+
+test("§7 字号：notice 行的裸 text-xs 收回 --ow-fs-* 阶", () => {
+  assert.doesNotMatch(source, /\btext-xs\b/)
+  assert.match(source, /data-ow-part="notice"[\s\S]{0,320}?text-ow-fs-body-sm/)
+})
+
+test("§7 读数：队列计数 mono ＋ tabular-nums", () => {
+  assert.match(source, /data-ow-part="count"[\s\S]{0,160}?font-\[family-name:var\(--ow-font-mono\)\] tabular-nums/)
+})
+
+test("故事装饰不再引死变量 --bg-primary（全仓无定义），改 --ow-bg", () => {
+  assert.doesNotMatch(stories, /--bg-primary/)
+  assert.match(stories, /background: "var\(--ow-bg\)"/)
+})
+
+const componentsCss = await readFile(new URL("../../../../../../styles/components.css", import.meta.url), "utf8")
+// W-R2 合并：`.ow-composer-queue__*` 遗留钮族已整段退役——研发本轮把 apps/desktop 的
+// features/chat/Composer.tsx 迁到 data-ow-part + Tailwind，全仓再无消费方，
+// components.css 里那段（以及此处原来守它的三条口径断言）随之下线。
+test("W-R2：.ow-composer-queue__* 遗留钮族已从共享 CSS 退役", () => {
+  assert.doesNotMatch(componentsCss, /\.ow-composer-queue__/)
+})
+
+test("§6 R1：拖起中的队列项靠虚线边＋hover 底双编码，不用 opacity 整体拉灰", () => {
+  assert.match(
+    componentsCss,
+    /\[data-ow-state~="dragging"\] \{ border-style: dashed; border-color: var\(--ow-border-strong\); background: var\(--ow-hover\)/,
+  )
+})
+
+test("§4 R2：composer 拖放手势期整壳换色走 info 功能色，不走 --ow-primary（暗档荧黄）", () => {
+  assert.match(
+    componentsCss,
+    /drop-active"\] \[data-ow-part="surface"\] \{ border-color: var\(--ow-info\); background: var\(--ow-info-bg\); \}/,
+  )
+})
+
+/* ── R2 复审批 ───────────────────────────────────────────────── */
+
+// 既定态：状态章＝tint 底 ＋ tint 边 ＋ on-tint 字。原来四条走 `-bg 底 ＋ 基色字`，
+// 浅档实算 warning 3.15:1 / error 4.34:1，都低于 4.5:1 门槛。
+test("R2 §状态色：steering/warning/error/failed 走 tint 三件套，不用 -bg ＋ 基色字", () => {
+  for (const [state, family] of [
+    ["steering", "info"],
+    ["warning", "warning"],
+    ["failed", "error"],
+  ]) {
+    const rule = new RegExp(
+      `\\[data-ow-state~="${state}"\\][^{]*\\{ border-color: var\\(--ow-${family}-tint-border\\); background: var\\(--ow-${family}-tint\\); color: var\\(--ow-${family}-on-tint\\); \\}`,
+    )
+    assert.match(componentsCss, rule, `${state} 未走 tint 三件套`)
+  }
+  const queueBlock = componentsCss.slice(
+    componentsCss.indexOf('[data-slot="composer-queue"] [data-ow-part="item"][data-ow-state~="steering"]'),
+    componentsCss.indexOf("/* ComposerQueue Button Styles */"),
+  )
+  assert.doesNotMatch(queueBlock, /background: var\(--ow-(?:warning|error)-bg\)/)
+})
+
+test("R2 §6 容器件空态：无队列项也无提示时整块不渲，不留空壳条", () => {
+  assert.match(source, /if \(resolvedCount === 0 && notices\.length === 0 && items\.length === 0\) return null/)
+})
+
+test("R2 死样式：根 className 不再同时写 p-2.5 与同值的 px-2.5", () => {
+  assert.doesNotMatch(source, /p-2\.5 px-2\.5/)
+})
+
+// primitives/Button 的 ButtonSize 是 "sm" | "md" | "lg"；"small" 不在联合里，
+// cva 会静默落回 md(32)，而 stories 被 tsconfig exclude，类型检查永远不报。
+test('R2 fixture：story 里的 Button size 走现行联合值，不留 V1 的 "small"', () => {
+  assert.doesNotMatch(stories, /size="small"/)
+  assert.match(stories, /size="sm"/)
+})

package/src/components/domain/chat/Composer/parts/ComposerVoiceInput.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { ComposerVoiceInput } from "./ComposerVoiceInput"
+
+const meta = {
+  title: "Chat/ComposerVoiceInput",
+  component: ComposerVoiceInput,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ComposerVoiceInput>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Idle: Story = {
+  args: {
+    active: false,
+    listening: false,
+    busy: false,
+    onToggle: () => console.log("toggle"),
+  },
+}
+
+/**
+ * 录音中（主故事）。R2 复审修：原来只给 active/listening/busy，既无 analyserRef 也无
+ * levels——ComposerAudioSpectrum 在无信号源时每根条落 2px，录音态渲成一排静止小点，
+ * 与 WithLevels 判若两件。这里补一组电平，让主故事就是真实的录音形态。
+ */
+export const Listening: Story = {
+  args: {
+    active: true,
+    listening: true,
+    busy: false,
+    levels: [0.2, 0.45, 0.7, 0.55, 0.3, 0.65, 0.85, 0.5, 0.35, 0.6],
+    onToggle: () => console.log("toggle"),
+  },
+}
+
+export const Busy: Story = {
+  args: {
+    active: false,
+    listening: false,
+    busy: true,
+    onToggle: () => console.log("toggle"),
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    active: false,
+    listening: false,
+    busy: false,
+    disabled: true,
+    onToggle: () => console.log("toggle"),
+  },
+}
+
+export const WithLevels: Story = {
+  args: {
+    active: true,
+    listening: true,
+    busy: false,
+    levels: [0.2, 0.5, 0.8, 0.6, 0.3, 0.7, 0.4, 0.9],
+    onToggle: () => console.log("toggle"),
+  },
+}
+
+export const CustomClassName: Story = {
+  args: {
+    active: false,
+    listening: false,
+    busy: false,
+    className: "custom-voice-input",
+    onToggle: () => console.log("toggle"),
+  },
+}

package/src/components/domain/chat/Composer/parts/ComposerVoiceInput.tsx

@@ -0,0 +1,70 @@
+import type { RefObject } from "react"
+import { cn } from "../../../../../lib/utils"
+import { Mic, Stop } from "../../../../composite/Icons"
+import { Button } from "../../../../primitives"
+import { ComposerAudioSpectrum } from "./ComposerAudioSpectrum"
+
+export type ComposerVoiceInputProps = {
+  active?: boolean
+  listening?: boolean
+  busy?: boolean
+  analyserRef?: RefObject<AnalyserNode | null>
+  levels?: readonly number[]
+  disabled?: boolean
+  className?: string
+  onToggle?: () => void
+}
+
+/**
+ * ComposerVoiceInput —— Composer 工具条的语音开关（Composer 簇内部件）。
+ *
+ * 走 `Button` 正规 ghost 变体：hover / press / focus-visible / disabled 逐 token 由原语
+ * 出（§6），处理中用原语的 <20px 小转子（§9），不再手搓 border+animate-spin。
+ * 录音态＝选中态，用无彩极色 `--ow-control-on`（§6 选中态），形（麦克风→停止方块）
+ * 与色一起构成 R1 双编码；不占荧黄。
+ */
+export function ComposerVoiceInput({
+  active = false,
+  listening = false,
+  busy = false,
+  analyserRef,
+  levels,
+  disabled = false,
+  className = "",
+  onToggle,
+}: ComposerVoiceInputProps) {
+  const title = listening ? "停止语音输入" : busy ? "语音输入处理中" : "语音输入"
+
+  return (
+    <div
+      data-slot="composer-voice"
+      data-ow-state={active ? "active" : undefined}
+      className={cn(
+        "inline-flex items-center gap-1.5 flex-[0_0_auto] min-w-0 data-[ow-state=active]:flex-[1_1_180px]",
+        className,
+      )}
+    >
+      {active && <ComposerAudioSpectrum analyserRef={analyserRef} levels={levels} />}
+      <Button
+        type="button"
+        data-ow-part="toggle"
+        data-ow-state={active ? "recording" : undefined}
+        variant="ghost"
+        size="sm"
+        aria-label={title}
+        aria-pressed={active}
+        title={title}
+        loading={busy}
+        disabled={disabled}
+        onClick={onToggle}
+        className={cn(
+          "flex-[0_0_auto] text-[color:var(--ow-text-2)]",
+          "hover:text-[color:var(--ow-text)]",
+          active &&
+            "bg-[var(--ow-control-on)] text-[color:var(--ow-control-on-glyph)] hover:bg-[var(--ow-control-on)] hover:text-[color:var(--ow-control-on-glyph)]",
+        )}
+        icon={listening ? <Stop /> : <Mic />}
+      />
+    </div>
+  )
+}

package/src/components/domain/chat/Composer/parts/mountChip.ts

@@ -0,0 +1,21 @@
+/**
+ * 挂载/提及/上下文芯片的**唯一** tint 口径（屏级判断表「挂载芯片」条 ＋ W3 既定态）。
+ *
+ * 分类不是状态，不占功能色极：V1 的四色分类（skill 天蓝 / command 琥珀 / mcp 绿 /
+ * agent 紫）整族退役，四类同落 info tint（`--ow-mention-bg` / `--ow-mention-text`），
+ * 类别由前置图标承担（R1 双编码，颜色永远只是第二编码）。
+ * tint 面上的子件（前置图标、删除钮）一并收到 `-on-tint` 字色，不留地面档 text-2/-3。
+ *
+ * 这份常量原来在 `DesktopComposer` 与 `ComposerMentions` 里各抄一份，附件位（整屏
+ * Home 的两枚 Chip）漏抄第三份就渲成了中性档——收成一处，谁挂载谁引它。
+ *
+ * @deprecated R2：配方已上收到原语，挂载芯片改传 `<Chip tone="mention">`
+ * （primitives/Chip 的 `ChipTone`）。`ComposerMentions` 已迁；`DesktopComposer` 与
+ * `screens/Home.stories` 两处待各自簇迁完后删除本常量。
+ */
+export const MOUNT_CHIP_CLASS = [
+  "bg-[var(--ow-mention-bg)] border-[color:var(--ow-info-tint-border)] text-[color:var(--ow-mention-text)]",
+  "hover:bg-[var(--ow-info-tint-hover)] focus-within:bg-[var(--ow-info-tint-hover)]",
+  "[&_[data-ow-part=icon]]:text-[color:var(--ow-mention-text)]",
+  "[&_[data-ow-part=remove]]:text-[color:var(--ow-mention-text)]",
+].join(" ")