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/Meter.tsx

@@ -0,0 +1,45 @@
+import { cn } from "@/lib/ui/variants";
+
+export type MeterTone = "accent" | "success" | "warning" | "danger" | "info";
+
+const meterTones: Record<MeterTone, string> = {
+  accent: "bg-cinnabar",
+  success: "bg-pass",
+  warning: "bg-overdue",
+  danger: "bg-conflict",
+  info: "bg-info",
+};
+
+interface MeterProps {
+  /** 0..1，超出范围自动夹取。 */
+  value: number;
+  tone?: MeterTone;
+  label?: string;
+  className?: string;
+}
+
+// 进度条：语义色填充，宽度过渡走动效 token；对读屏暴露 progressbar。
+export function Meter({ value, tone = "accent", label, className }: MeterProps) {
+  const pct = Math.max(0, Math.min(1, value)) * 100;
+  return (
+    <div
+      className={cn(
+        "h-1.5 w-full overflow-hidden rounded-full bg-line/60",
+        className,
+      )}
+      role="progressbar"
+      aria-valuenow={Math.round(pct)}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-label={label}
+    >
+      <div
+        className={cn(
+          "h-full rounded-full transition-[width] duration-base ease-standard",
+          meterTones[tone],
+        )}
+        style={{ width: `${pct}%` }}
+      />
+    </div>
+  );
+}