@orbit-work/ui 0.1.2-preview.0 → 0.1.2

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

@@ -1,152 +0,0 @@
-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

@@ -1,150 +0,0 @@
-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

@@ -1,229 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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/)
-})