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/lib/ui/variants.test.ts

@@ -50,6 +50,33 @@ describe("ui variants", () => {
     expect(inputClass()).toContain(transitionUi);
   });
 
+  it("builds a coral inline link button variant", () => {
+    const klass = buttonClass({ variant: "link" });
+
+    expect(klass).toContain("text-cinnabar");
+    expect(klass).toContain("underline-offset-4");
+    expect(klass).toContain("hover:underline");
+  });
+
+  it("supports a large button size for prominent CTAs", () => {
+    expect(buttonClass({ size: "lg" })).toContain("px-5");
+  });
+
+  it("layers card surface tones and can drop the shadow", () => {
+    expect(cardClass({ tone: "card" })).toContain("bg-surface-card");
+    expect(cardClass({ tone: "soft" })).toContain("bg-surface-soft");
+    expect(cardClass()).toContain("bg-panel");
+    expect(cardClass({ flat: true })).not.toContain("shadow-paper");
+    expect(cardClass({ interactive: true })).toContain("hover:border-cinnabar/40");
+  });
+
+  it("keeps the legacy string cardClass signature working", () => {
+    const klass = cardClass("mt-4");
+    expect(klass).toContain("mt-4");
+    expect(klass).toContain("bg-panel");
+    expect(klass).toContain("rounded-lg");
+  });
+
   it("keeps warning badges readable on the paper background", () => {
     const klass = badgeClass({ variant: "warning" });