feat(ui): 共享组件补齐——Card 面色分层 + Button link/lg + 4 原子件

- Card 新增 tone(panel/card/soft)/flat/interactive；cardClass 兼容旧字符串签名
- Button 新增 link(coral 文字链) 变体与 lg 尺寸
- 新增原子件 Eyebrow(统一眉题) / StatusDot(状态点·读屏可见) /
  Skeleton(motion-safe 占位) / Meter(进度条·progressbar)
- PageHeader/SectionHeader 用 display/title 字阶 + Eyebrow 眉题

apps/web/components/ui/StatusDot.tsx

@@ -0,0 +1,41 @@
+import { cn } from "@/lib/ui/variants";
+
+export type StatusTone =
+  | "neutral"
+  | "accent"
+  | "success"
+  | "warning"
+  | "danger"
+  | "info";
+
+const dotTones: Record<StatusTone, string> = {
+  neutral: "bg-ink-soft",
+  accent: "bg-cinnabar",
+  success: "bg-pass",
+  warning: "bg-overdue",
+  danger: "bg-conflict",
+  info: "bg-info",
+};
+
+interface StatusDotProps {
+  tone?: StatusTone;
+  /** 提供 label 时对读屏可见（不单靠颜色传达状态）。 */
+  label?: string;
+  className?: string;
+}
+
+// 状态点：语义色圆点，配合文案使用；有 label 时暴露给读屏。
+export function StatusDot({ tone = "neutral", label, className }: StatusDotProps) {
+  return (
+    <span
+      className={cn(
+        "inline-block h-2 w-2 shrink-0 rounded-full",
+        dotTones[tone],
+        className,
+      )}
+      role={label ? "img" : undefined}
+      aria-label={label}
+      aria-hidden={label ? undefined : true}
+    />
+  );
+}