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

@@ -2,8 +2,11 @@ import type { ReactNode } from "react";
 
 import { cn } from "@/lib/ui/variants";
 
+import { Eyebrow } from "./Eyebrow";
+
 interface SectionHeaderProps {
   title: string;
+  eyebrow?: string;
   description?: ReactNode;
   action?: ReactNode;
   className?: string;
@@ -11,6 +14,7 @@ interface SectionHeaderProps {
 
 export function SectionHeader({
   title,
+  eyebrow,
   description,
   action,
   className,
@@ -18,7 +22,8 @@ export function SectionHeader({
   return (
     <div className={cn("flex items-start justify-between gap-4", className)}>
       <div className="min-w-0">
-        <h2 className="font-serif text-base text-ink">{title}</h2>
+        {eyebrow ? <Eyebrow className="mb-1">{eyebrow}</Eyebrow> : null}
+        <h2 className="font-serif text-title-md text-ink">{title}</h2>
         {description ? (
           <p className="mt-1 text-sm leading-6 text-ink-soft">{description}</p>
         ) : null}