@orbit-work/ui 0.1.0

package/src/components/composite/Skeleton/index.tsx

@@ -0,0 +1,152 @@
+import type { CSSProperties } from "react"
+
+export type SkeletonProps = {
+  /**
+   * Variant: "text" (bars), "avatar" (circle + bars), "card" (full block), "line" (single bar), "block" (rectangle)
+   *
+   * `avatar` 只用于**带头像的用户/成员列表行**（联系人、协作者、评论者）。
+   * 会话转录的载入态不用它——DS2 转录脊柱「无头像」（判断表「转录脊柱」条），
+   * 那里用 `text` / `line` 组合出轮次骨架。
+   */
+  variant?: "text" | "avatar" | "card" | "line" | "block"
+  /** Number of text bars for "text" variant (default 3) */
+  lines?: number
+  /** Width — applies to "line" and "block" variants */
+  width?: string | number
+  /** Height — applies to "line" and "block" variants */
+  height?: string | number
+  /** Border radius override */
+  radius?: string | number
+  /** Make it circular (for avatar dots) */
+  circle?: boolean
+  className?: string
+  style?: CSSProperties
+}
+
+/**
+ * Skeleton loading placeholder — DS2 呼吸定式：底色 `--ow-hover`（随所在表面），
+ * 整块 opacity 1→.55→1 · 1.6s 呼吸（keyframes `ow-skeleton`），禁 shimmer 扫光；
+ * 圆角条/行 6（`--ow-radius-xs`）、块/卡 12（`--ow-radius-card`）；
+ * prefers-reduced-motion 时呼吸停、静态底色。
+ *
+ * W5 终扫修：avatar 变体的行间距原为裸 10/2，收到 --ow-space-* 档（8，无 10 档）。
+ *
+ * P6-8 口径修正：注释原写「条/行 6（--ow-radius-sm）」，但 --ow-radius-sm ＝ 8px
+ * （6px 是 --ow-radius-xs），实现里的 `var(--ow-radius-sm, 6px)` 更是 token 取 8、
+ * 兜底取 6 的两套值。全仓 CSS 版骨架（desktop-surfaces 的 .skeleton-block/.skeleton-line）
+ * 一直用的是 --ow-radius-xs＝6，所以统一按 6 收口；块/卡的裸 12 换成 --ow-radius-card。
+ *
+ * Use `variant="line"` or `variant="block"` as primitives to compose
+ * custom skeleton layouts for chat bubbles, cards, lists, etc.
+ */
+export function Skeleton({
+  variant = "text",
+  lines = 3,
+  width,
+  height,
+  radius,
+  circle = false,
+  className = "",
+  style,
+}: SkeletonProps) {
+  if (variant === "line") {
+    return (
+      <div
+        className={`ow-skeleton ow-skeleton--line ${className}`}
+        style={{
+          ...barStyle,
+          width: width ?? "100%",
+          height: height ?? 16,
+          borderRadius: circle ? "50%" : (radius ?? "var(--ow-radius-xs)"),
+          ...style,
+        }}
+      />
+    )
+  }
+
+  if (variant === "block") {
+    return (
+      <div
+        className={`ow-skeleton ow-skeleton--block ${className}`}
+        style={{
+          ...barStyle,
+          width: width ?? "100%",
+          height: height ?? 80,
+          borderRadius: radius ?? "var(--ow-radius-card)",
+          ...style,
+        }}
+      />
+    )
+  }
+
+  if (variant === "avatar") {
+    return (
+      <div className={`ow-skeleton ow-skeleton--avatar ${className}`} style={{ ...avatarBlockStyle, ...style }}>
+        <div style={circleStyle} />
+        <div style={linesWrapStyle}>
+          <div style={{ ...barStyle, width: "40%", height: 12 }} />
+          <div style={barStyle} />
+        </div>
+      </div>
+    )
+  }
+
+  if (variant === "card") {
+    return (
+      <div
+        className={`ow-skeleton ow-skeleton--card ${className}`}
+        style={{ ...barStyle, height: height ?? 120, borderRadius: radius ?? "var(--ow-radius-card)", ...style }}
+      />
+    )
+  }
+
+  // text variant
+  return (
+    <div className={`ow-skeleton ow-skeleton--text ${className}`} style={{ ...rowsStyle, ...style }}>
+      {Array.from({ length: lines }).map((_, i) => (
+        <div key={i} style={{ ...barStyle, width: i === 1 ? "88%" : i === 2 ? "64%" : "100%" }} />
+      ))}
+    </div>
+  )
+}
+
+const rowsStyle: React.CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "var(--ow-space-3)",
+  maxWidth: 600,
+}
+
+/* DS2 骨架屏定式：hover 档底 + 呼吸（ow-skeleton = opacity 1→.55→1），禁 shimmer 扫光 */
+const barStyle: React.CSSProperties = {
+  height: 16,
+  borderRadius: "var(--ow-radius-xs)",
+  background: "var(--ow-hover)",
+  // §9 唯一缓动：与 CSS 侧同一条呼吸（desktop-surfaces.css 的 .skeleton-block/.skeleton-line）对齐，
+  // 裸 ease-in-out 退役；1.6s 呼吸时长为 skeleton 档豁免。
+  animation: "ow-skeleton 1.6s var(--ow-ease-beacon) infinite",
+}
+
+const avatarBlockStyle: React.CSSProperties = {
+  display: "flex",
+  gap: "var(--ow-space-3)",
+  alignItems: "flex-start",
+  maxWidth: 600,
+}
+
+// 头像位：先摊开 barStyle（底色＋呼吸），再覆写尺寸与圆形——
+// 反过来写会被 barStyle 的 height:16 / radius-xs 反杀，渲成 32×16 的扁条。
+const circleStyle: React.CSSProperties = {
+  ...barStyle,
+  width: 32,
+  height: 32,
+  borderRadius: "50%",
+  flexShrink: 0,
+}
+
+const linesWrapStyle: React.CSSProperties = {
+  flex: 1,
+  display: "flex",
+  flexDirection: "column",
+  gap: "var(--ow-space-2)",
+}

package/src/components/composite/Splash/Splash.stories.tsx

@@ -0,0 +1,150 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import type { ReactNode } from "react"
+import { Splash } from "./index"
+
+/**
+ * 开屏 Splash（品牌锁定件）：1.25s（--ow-dur-splash）逐点点亮——
+ * 0ms 中心 → 125/250/375/500ms 尾迹逐颗 → 625ms 卫星 +16° 过冲落位 → 700ms 字标上浮 → 1250ms 交棒 onDone。
+ * 舞台恒定：整屏 var(--ow-stage-bg) 藏蓝，不随工具栏 data-theme 翻转，禁渐变。
+ * 荧黄记账：卫星＝状态极，开屏内唯一一处。
+ */
+const meta = {
+  title: "Composite/Splash",
+  component: Splash,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "1.25s 逐点点亮的品牌开屏。舞台恒定（--ow-stage-bg，不随主题翻转，禁渐变）。" +
+          "prefers-reduced-motion: reduce 时跳过全部分帧，直接呈现完成态（F5，含字标），onDone 立即触发——" +
+          "用系统设置开启「减弱动态效果」即可验证，无需改代码。",
+      },
+    },
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Splash>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** contain:paint 让组件内 position:fixed 以此容器为包含块，方便在文档页里预览全屏开屏 */
+function Frame({ children, height = 400 }: { children: ReactNode; height?: number }) {
+  return (
+    <div style={{ position: "relative", height, overflow: "hidden", contain: "layout paint", borderRadius: 12 }}>
+      {children}
+    </div>
+  )
+}
+
+export const Default: Story = {
+  render: (args) => (
+    <Frame>
+      <Splash {...args} />
+    </Frame>
+  ),
+  args: {},
+}
+
+export const Loading: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: "loading=true：1250ms 落定后卫星组无缝接 ow-spin（1.6s linear infinite）续转。",
+      },
+    },
+  },
+  render: (args) => (
+    <Frame>
+      <Splash {...args} />
+    </Frame>
+  ),
+  args: { loading: true },
+}
+
+export const HandoffStop: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "停止规则演示：续转中收到就绪信号不做硬切——读当前角度，补间到下一个 360n+24° 停住（ease-beacon），即品牌静止姿态。",
+      },
+    },
+  },
+  render: () => {
+    const [loading, setLoading] = useState(true)
+    const [done, setDone] = useState(false)
+    return (
+      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+        <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
+          <button type="button" onClick={() => setLoading(false)} disabled={!loading}>
+            发出就绪信号（转完当前圈停在 +24°）
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              setLoading(true)
+              setDone(false)
+            }}
+          >
+            重置
+          </button>
+          <span style={{ fontFamily: "var(--ow-font-mono)", fontSize: 12, fontVariantNumeric: "tabular-nums" }}>
+            loading={String(loading)} · onDone={done ? "已触发" : "未触发"}
+          </span>
+        </div>
+        <Frame key={String(loading && !done)}>
+          <Splash loading={loading} onDone={() => setDone(true)} />
+        </Frame>
+      </div>
+    )
+  },
+}
+
+export const Size64: Story = {
+  parameters: {
+    docs: { description: { story: "size 只缩放信标构造框与字标，时序与配色不变。" } },
+  },
+  render: () => (
+    <Frame height={320}>
+      <Splash size={64} />
+    </Frame>
+  ),
+}
+
+export const WhiteLabel: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "白标租户：productName/wordmark 覆盖品牌文本（aria-label 同步），几何/分帧/配色不变。" +
+          "缺省回落 Orbitwork 默认品牌。",
+      },
+    },
+  },
+  render: (args) => (
+    <Frame>
+      <Splash {...args} />
+    </Frame>
+  ),
+  args: { productName: "ACME Suite", wordmark: "acme suite" },
+}
+
+export const ReducedMotion: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "prefers-reduced-motion: reduce：跳过全部分帧，直接呈现完成态（F5，含字标），onDone 立即触发；" +
+          "loading 续转态也静止（ow-motion 降级）。本 story 与 Default 同码——请在操作系统开启" +
+          "「减弱动态效果」后刷新页面观察静态终帧。",
+      },
+    },
+  },
+  render: () => (
+    <Frame>
+      <Splash />
+    </Frame>
+  ),
+}

package/src/components/composite/Splash/index.tsx

@@ -0,0 +1,229 @@
+import { useEffect, useRef, useState } from "react"
+import type { CSSProperties } from "react"
+
+/**
+ * Splash — 开屏（DS 2.0 品牌锁定件，§12）
+ *
+ * 规格：design/ow/components/stage/Splash/{Splash.html,.prompt.md,.d.ts}
+ *      + design/ow/guidelines/motion-splash.html
+ *
+ * 应用冷启动的品牌时刻：1.25s（var(--ow-dur-splash)）在舞台藏蓝上逐点点亮信标，
+ * 随后交棒首屏。舞台恒定——整屏 var(--ow-stage-bg)，不随 data-theme 翻转，禁渐变。
+ *
+ * 分帧（缓动一律 var(--ow-ease-beacon)，全部 animation-fill-mode: backwards）：
+ * - 0ms      中心点 r8.2 淡入，200ms（--ow-dur-2）——「你」先在
+ * - 125/250/375/500ms  尾迹①→④ 逐颗淡入至 .60/.45/.30/.20，各 200ms，间隔＝--ow-stagger-beacon，可重叠
+ * - 625ms    卫星 r10.4 淡入并沿轨道切入，+16° 过冲后回摆落位，320ms
+ * - 700ms    字标 orbitwork 自下 8px 上浮＋淡入，320ms
+ * - 1020ms   全部落定，静置 230ms，1250ms 转场（onDone）
+ *
+ * loading 仍为 true：卫星组无缝接 ow-spin（1.6s linear infinite）续转；
+ * 就绪时不做硬切——转完当前圈补间到下一个 360n+24° 停住（品牌静止姿态）。
+ * prefers-reduced-motion：跳过全部分帧，直接呈现完成态（F5，含字标），onDone 立即触发。
+ *
+ * 荧黄记账：卫星＝状态极，开屏内唯一一处（var(--ow-stage-accent)）；中心与尾迹一律月白。
+ *
+ * 品牌文本（productName/wordmark）可经可选 props 覆盖（白标租户）；几何/分帧/
+ * 配色仍是锁定件，不得改动。缺省回落 Orbitwork 默认品牌。
+ */
+
+export type SplashProps = {
+  /** 完成回调：1250ms 触发（reduced-motion 下立即） */
+  onDone?: () => void
+  /** 完成后仍在载入：卫星组交棒 ow-spin 续转；停止时转完当前圈停在 +24° */
+  loading?: boolean
+  /** 信标构造框边长 px，默认 96 */
+  size?: number
+  /** 品牌名：驱动 aria-label「{productName} 正在启动」；缺省 "Orbitwork" */
+  productName?: string
+  /** 字标文本（小写定稿，仅白标场景覆盖）；缺省 "orbitwork" */
+  wordmark?: string
+}
+
+/* 尾迹四点：由最实到最淡（几何与 BeaconSpinner 锁定件一致，品牌定稿不得改动） */
+const TRAILS = [
+  [60.2, 20.6, 6.7, 0.6],
+  [41.76, 18.66, 5.5, 0.45],
+  [25.71, 27.93, 4.3, 0.3],
+  [18.16, 44.86, 3.3, 0.2],
+] as const
+
+const SPLASH_TOTAL_MS = 1250 // = var(--ow-dur-splash)
+const SPIN_PERIOD_MS = 1600 // = var(--ow-dur-spin)
+const EASE_BEACON = "cubic-bezier(0.22, 1, 0.36, 1)" // = var(--ow-ease-beacon)（WAAPI 无法读 CSS 变量）
+
+/* 分帧 keyframes 内联随组件走，保证 Splash 自足（预启动语境可能早于全量样式表）。
+   基态即完成态（F5），动画只负责入场——reduced-motion 杀掉动画后直接静态终帧。 */
+const SPLASH_CSS = `
+@keyframes ow-splash-fade { from { opacity: 0; } }
+@keyframes ow-splash-sat-in { 0% { transform: rotate(-70deg); opacity: 0; } 55% { opacity: 1; } 78% { transform: rotate(16deg); } 100% { transform: rotate(0deg); } }
+@keyframes ow-splash-rise { from { opacity: 0; transform: translateY(8px); } }
+@keyframes ow-splash-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) {
+  .ow-splash, .ow-splash * { animation: none !important; }
+}
+`
+
+function usePrefersReducedMotion(): boolean {
+  const [reduced, setReduced] = useState(
+    () => typeof window !== "undefined" && !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches,
+  )
+  useEffect(() => {
+    const mq = window.matchMedia?.("(prefers-reduced-motion: reduce)")
+    if (!mq) return
+    const onChange = () => setReduced(mq.matches)
+    mq.addEventListener?.("change", onChange)
+    return () => mq.removeEventListener?.("change", onChange)
+  }, [])
+  return reduced
+}
+
+export function Splash({
+  onDone,
+  loading = false,
+  size = 96,
+  productName = "Orbitwork",
+  wordmark = "orbitwork",
+}: SplashProps) {
+  const reduced = usePrefersReducedMotion()
+  const satRef = useRef<SVGGElement>(null)
+  const startRef = useRef(0)
+  const doneRef = useRef(false)
+  const prevLoadingRef = useRef(loading)
+  const onDoneRef = useRef(onDone)
+  onDoneRef.current = onDone
+
+  /* 是否已把续转停在 +24°（停止后不再重挂 CSS spin） */
+  const [spinStopped, setSpinStopped] = useState(false)
+
+  /* onDone：1250ms 触发；reduced-motion 立即（只触发一次） */
+  useEffect(() => {
+    startRef.current = typeof performance !== "undefined" ? performance.now() : Date.now()
+    if (doneRef.current) return
+    if (reduced) {
+      doneRef.current = true
+      onDoneRef.current?.()
+      return
+    }
+    const t = setTimeout(() => {
+      if (doneRef.current) return
+      doneRef.current = true
+      onDoneRef.current?.()
+    }, SPLASH_TOTAL_MS)
+    return () => clearTimeout(t)
+  }, [reduced])
+
+  /* 停止规则：续转中收到就绪信号（loading true→false），不做硬切——
+     读当前角度，按当前转速补间到下一个 360n+24° 停住（ease-beacon）。 */
+  useEffect(() => {
+    const was = prevLoadingRef.current
+    prevLoadingRef.current = loading
+    if (loading || !was) return
+    const el = satRef.current
+    if (!el) return
+    const now = typeof performance !== "undefined" ? performance.now() : Date.now()
+    if (reduced || now - startRef.current < SPLASH_TOTAL_MS) {
+      // 续转尚未接手（或本就静止）：卫星停在落位角 0°，无需补间
+      setSpinStopped(true)
+      return
+    }
+    let angle = 0
+    const t = getComputedStyle(el).transform
+    const m = t && t !== "none" ? t.match(/matrix\(([^)]+)\)/) : null
+    if (m?.[1]) {
+      const [a = 1, b = 0] = m[1].split(",").map(Number)
+      angle = (Math.atan2(b, a) * 180) / Math.PI
+      if (angle < 0) angle += 360
+    }
+    const target = angle < 24 ? 24 : 384 // 下一个 360n+24°
+    if (typeof el.animate === "function") {
+      const anim = el.animate([{ transform: `rotate(${angle}deg)` }, { transform: `rotate(${target}deg)` }], {
+        duration: Math.max(((target - angle) / 360) * SPIN_PERIOD_MS, 1),
+        easing: EASE_BEACON,
+        fill: "forwards",
+      })
+      anim.onfinish = () => {
+        el.style.transform = "rotate(24deg)"
+      }
+    } else {
+      el.style.transform = "rotate(24deg)"
+    }
+    setSpinStopped(true) // 摘掉 CSS spin，WAAPI 补间接管（脚本动画覆盖 CSS 动画，无跳变）
+  }, [loading, reduced])
+
+  const spinActive = loading && !spinStopped && !reduced
+
+  const stageStyle: CSSProperties = {
+    position: "fixed",
+    inset: 0,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    /* 舞台恒定：不随 data-theme 翻转，禁渐变 */
+    background: "var(--ow-stage-bg)",
+    color: "var(--ow-stage-text)",
+  }
+
+  const anim = (delay: string, dur = "var(--ow-dur-2, 200ms)", name = "ow-splash-fade") =>
+    reduced ? undefined : `${name} ${dur} var(--ow-ease-beacon) ${delay} backwards`
+
+  return (
+    <div
+      className="ow-splash ow-motion"
+      style={stageStyle}
+      role="status"
+      aria-live="polite"
+      aria-label={`${productName} 正在启动`}
+    >
+      <style>{SPLASH_CSS}</style>
+      {/* 构造框 96，transform-origin 48px 48px；裁切视框 y 起 0（与 BeaconSpinner 锁定件同框）：
+          卫星轨道半径 30 ＋ r10.4 → 扫掠纵向 7.6–88.4，旧框 y 起 -13.3 会在底部裁掉卫星。 */}
+      <svg width={size} height={size} viewBox="2.3 0 96 96" aria-hidden="true" style={{ display: "block" }}>
+        {/* F1 · 0ms：中心点淡入——「你」先在 */}
+        <circle cx="48" cy="48" r="8.2" fill="var(--ow-stage-text)" style={{ animation: anim("0ms") }} />
+        {/* F2–F3 · 125–700ms：尾迹逐颗淡入，只动 opacity 不动位移 */}
+        {TRAILS.map(([cx, cy, r, o], i) => (
+          <circle
+            key={i}
+            cx={cx}
+            cy={cy}
+            r={r}
+            fill="var(--ow-stage-text)"
+            opacity={o}
+            style={{ animation: anim(`calc(var(--ow-stagger-beacon, 125ms) * ${i + 1})`) }}
+          />
+        ))}
+        {/* F4 · 625–945ms：卫星淡入并沿轨道切入，+16° 过冲回摆；荧黄＝状态极，开屏内唯一一处 */}
+        <g
+          ref={satRef}
+          style={{
+            transformOrigin: "48px 48px",
+            animation: reduced
+              ? undefined
+              : spinActive
+                ? `ow-splash-sat-in var(--ow-dur-3, 320ms) var(--ow-ease-beacon) 625ms backwards, ow-splash-spin var(--ow-dur-spin, 1.6s) linear var(--ow-dur-splash, 1250ms) infinite`
+                : `ow-splash-sat-in var(--ow-dur-3, 320ms) var(--ow-ease-beacon) 625ms backwards`,
+          }}
+        >
+          <circle cx="75.4" cy="35.8" r="10.4" fill="var(--ow-stage-accent)" />
+        </g>
+      </svg>
+      {/* F5 · 700–1020ms：字标自下 8px 上浮＋淡入（Space Grotesk 500，小写） */}
+      <div
+        style={{
+          marginTop: Math.round(size * (5 / 84) * 10) / 10,
+          fontFamily: "var(--ow-font-display)",
+          fontWeight: 500,
+          fontSize: Math.round(size * (15 / 84) * 10) / 10,
+          lineHeight: 1,
+          letterSpacing: "-0.01em",
+          color: "var(--ow-stage-text)",
+          animation: anim("700ms", "var(--ow-dur-3, 320ms)", "ow-splash-rise"),
+        }}
+      >
+        {wordmark}
+      </div>
+    </div>
+  )
+}

package/src/components/composite/StatusTag/StatusTag.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { STATUS_TAG_PRESETS, StatusTag, type StatusTagPreset } from "./index"
+
+const meta = {
+  title: "Composite/StatusTag",
+  component: StatusTag,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof StatusTag>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const PRESET_ORDER: StatusTagPreset[] = ["installed", "update", "connected", "needsAuth", "installing", "mine", "team"]
+
+/** 三档状态色 + 归属档：tint 底 + on-tint 字，不用实底。 */
+export const Tones: Story = {
+  render: () => (
+    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+      <StatusTag tone="ok">已连接</StatusTag>
+      <StatusTag tone="warn">待授权</StatusTag>
+      <StatusTag tone="mute">正在安装</StatusTag>
+      <StatusTag tone="mine">我的</StatusTag>
+    </div>
+  ),
+}
+
+/** 目录词表：卡与详情共用同一份文案与色档。 */
+export const Presets: Story = {
+  render: () => (
+    <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", maxWidth: 420 }}>
+      {PRESET_ORDER.map((key) => (
+        <StatusTag key={key} status={key} />
+      ))}
+    </div>
+  ),
+}
+
+/** 落位示范：名称行里名字后跟归属签与状态签，20 高与 14px 名字同轴。 */
+export const InNameRow: Story = {
+  render: () => (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 10,
+        width: 340,
+        padding: 16,
+        border: "1px solid var(--ow-border)",
+        borderRadius: "var(--ow-radius-lg)",
+        background: "var(--ow-surface)",
+      }}
+    >
+      {PRESET_ORDER.slice(0, 5).map((key) => (
+        <div key={key} style={{ display: "flex", alignItems: "center", gap: 7, minWidth: 0 }}>
+          <span style={{ fontSize: "var(--ow-fs-body)", fontWeight: 500, color: "var(--ow-text)" }}>数据分析</span>
+          <StatusTag status="mine" />
+          <StatusTag status={key} />
+          <span style={{ marginLeft: "auto", fontSize: "var(--ow-fs-caption)", color: "var(--ow-text-3)" }}>
+            {STATUS_TAG_PRESETS[key].tone}
+          </span>
+        </div>
+      ))}
+    </div>
+  ),
+}

package/src/components/composite/StatusTag/StatusTagSource.test.mjs

@@ -0,0 +1,64 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const source = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
+const catalog = await readFile(new URL("../../domain/desktop/DesktopCatalogView/index.tsx", import.meta.url), "utf8")
+const styles = await readFile(new URL("../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
+const componentStyles = await readFile(new URL("../../../../styles/components.css", import.meta.url), "utf8")
+
+test("status tag keeps the single 20/xs/11 shape and never carries a border", () => {
+  assert.match(
+    source,
+    /h-5 px-\[var\(--ow-space-15\)\][^"]*text-ow-fs-mark-md leading-5 \[border-radius:var\(--ow-radius-xs\)\]/,
+  )
+  // 状态签是只读陈述：不描边、不带状态点，与 Tag（1px 边 + 可交互筛选）和 Chip（mono 读数位）分家。
+  assert.doesNotMatch(source, /border-\[color:/)
+  assert.doesNotMatch(source, /border-ow-/)
+})
+
+test("tones are tint ground plus on-tint ink — never a solid fill", () => {
+  assert.match(source, /ok: "bg-\[var\(--ow-success-tint\)\] text-\[color:var\(--ow-success-on-tint\)\]"/)
+  assert.match(source, /warn: "bg-\[var\(--ow-warning-tint\)\] text-\[color:var\(--ow-warning-on-tint\)\]"/)
+  // L2-2-5：mute 字色改走一枚局部变量——暗档 text-2 落在 surface-2 上只有 4.24:1，
+  // 是四档里唯一不过 §11.4 的 4.5；暗档在 styles/components.css 里换成 --ow-text，
+  // 亮档仍回落 text-2（4.68:1 过线，与 ok/warn on-tint 同重）。底仍是 surface-2，不是实底。
+  assert.match(source, /mute: "bg-ow-surface-2 text-\[color:var\(--ow-status-tag-mute-text,var\(--ow-text-2\)\)\]"/)
+  assert.match(componentStyles, /\[data-slot="status-tag"\] \{ --ow-status-tag-mute-text: var\(--ow-text-2\); \}/)
+  assert.match(
+    componentStyles,
+    /\[data-theme="dark"\] \[data-slot="status-tag"\] \{ --ow-status-tag-mute-text: var\(--ow-text\); \}/,
+  )
+  assert.match(source, /mine: "bg-\[var\(--ow-mention-bg\)\] text-\[color:var\(--ow-mention-text\)\]"/)
+  // 实底族（--ow-*-fill / --ow-on-fill / --ow-btn-primary-*）是行动极语法，状态签一律不碰。
+  assert.doesNotMatch(source, /--ow-(success|warning|error|info)-fill/)
+  assert.doesNotMatch(source, /--ow-btn-primary/)
+})
+
+test("catalog status wording lives in one table shared by card and detail", () => {
+  for (const [key, label] of [
+    ["installed", "已安装"],
+    ["update", "有更新"],
+    ["connected", "已连接"],
+    ["needsAuth", "待授权"],
+    ["installing", "正在安装"],
+    ["mine", "我的"],
+    ["team", "专家团"],
+  ]) {
+    assert.match(source, new RegExp(`${key}: \\{ label: "${label}"`))
+  }
+})
+
+test("the three legacy status-tag syntaxes are gone from the catalog surface", () => {
+  // A4-B3：.connector-update-tag（页面层裸 span）与 agent 卡的 Tag 状态标都归口 StatusTag。
+  assert.doesNotMatch(catalog, /className="connector-update-tag"/)
+  assert.doesNotMatch(styles, /\.connector-update-tag \{/)
+  assert.match(catalog, /<StatusTag status="update" \/>/)
+  // A4-B2：归属签从「卡右上角绝对定位角标」搬进名称行（竖排卡的右上角就是名称行本身）。
+  // R2·T2/Q4：归属签补 mine（原型 4646 `!!(x.team || x.mine)`，两者都在时「专家团」优先）。
+  assert.match(
+    catalog,
+    /badge=\{team \? <StatusTag status="team" \/> : mine \? <StatusTag status="mine" \/> : undefined\}/,
+  )
+  assert.doesNotMatch(catalog, /agent-team-tag/)
+})