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

@@ -1,5 +1,7 @@
 import type { ReactNode } from "react";
 
+import { Eyebrow } from "./Eyebrow";
+
 interface PageHeaderProps {
   title: string;
   eyebrow?: string;
@@ -16,12 +18,8 @@ export function PageHeader({
   return (
     <header className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
       <div>
-        {eyebrow ? (
-          <p className="mb-1 font-mono text-xs uppercase tracking-wide text-ink-soft/70">
-            {eyebrow}
-          </p>
-        ) : null}
-        <h1 className="font-serif text-2xl text-ink">{title}</h1>
+        {eyebrow ? <Eyebrow className="mb-1.5">{eyebrow}</Eyebrow> : null}
+        <h1 className="font-serif text-display-sm text-ink">{title}</h1>
         {description ? (
           <p className="mt-2 max-w-2xl text-sm leading-6 text-ink-soft">
             {description}