@zmzai/theme 0.9.2 → 0.9.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zmzai/theme",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "private": false,
   "type": "module",
   "description": "zmzai 全品牌设计系统 — Radix UI + framer-motion + Tailwind v4 + MiSans",

package/src/components/icon/Icon.tsx

@@ -70,7 +70,18 @@ const paths: Record<string, { d: string; fill?: boolean }> = {
 
 export type IconName = keyof typeof paths;
 
-export function Icon({ name, size = 14, className = "" }: { name: IconName; size?: number; className?: string }) {
+export function Icon({
+  name,
+  size = 14,
+  className = "",
+  strokeWidth = 1.5,
+}: {
+  name: IconName;
+  size?: number;
+  className?: string;
+  /** 描边宽度。viewBox 恒为 16，放大到 20px+ 时用 1.25 避免视觉过重（默认 1.5 不变） */
+  strokeWidth?: number;
+}) {
   const icon = paths[name];
   if (!icon) return null;
   return (
@@ -82,7 +93,7 @@ export function Icon({ name, size = 14, className = "" }: { name: IconName; size
       aria-hidden="true"
       fill={icon.fill ? "currentColor" : "none"}
       stroke={icon.fill ? "none" : "currentColor"}
-      strokeWidth={1.5}
+      strokeWidth={strokeWidth}
       strokeLinecap="round"
       strokeLinejoin="round"
     >

package/src/components/index.ts

@@ -1,7 +1,8 @@
-// @zmzai/theme — Components barrel (54 components)
+// @zmzai/theme — Components barrel (55 components)
 
 // === Basic ===
 export * from "./app-shell";
+export * from "./page-header";
 export * from "./button";
 export * from "./input";
 export * from "./textarea";

package/src/components/page-header/PageHeader.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+/**
+ * PageHeader — 页面标题统一组件
+ *
+ * v0.9.4 引入。此前 agent / relay 两站共 38 个页面各自手写 h1：
+ * 标题旁 0 图标、字号分 4~5 档（text-sm / text-lg / text-2xl / text-3xl /
+ * text-4xl / CSS clamp）、间距与颜色 token 各有偏差（text-muted-foreground
+ * 等旧变量混用）、部分页面缺 text-ink。
+ *
+ * 纪律：
+ *   · 只有两个 variant —— hero（落地页）与 page（其余全部）
+ *   · page 一律 text-2xl + 内联图标，不再区分公开页与控制台
+ *   · 图标取 currentColor，不引入新色；hero 徽章用 accent 载体（墨底白图）
+ *   · 描述统一 text-sm text-ink-2 —— ink-3 只有 3.69:1，副文案不用它
+ */
+
+import type { ReactNode } from "react";
+import { Icon, type IconName } from "../icon/Icon";
+
+export interface PageHeaderProps {
+  /** 眉标：页面所属分区，如「控制台」「长期上下文」。hero 变体下作为统计/kicker 行。 */
+  eyebrow?: ReactNode;
+  /** 页面标题，渲染为 h1 */
+  title: ReactNode;
+  /** 标题左侧内联图标（page 变体）或墨底徽章内容（hero 变体） */
+  icon?: IconName;
+  /** 标题下方描述 */
+  description?: ReactNode;
+  /** 右侧操作区（按钮、筛选器等） */
+  actions?: ReactNode;
+  /** hero = 落地页（44px 墨底徽章 + text-4xl）；page = 其余全部（内联图标 + text-2xl） */
+  variant?: "page" | "hero";
+  /** 追加到根元素 */
+  className?: string;
+  /** 追加到 h1（详情页标题过长时用 truncate） */
+  titleClassName?: string;
+}
+
+export function PageHeader({
+  eyebrow,
+  title,
+  icon,
+  description,
+  actions,
+  variant = "page",
+  className = "",
+  titleClassName = "",
+}: PageHeaderProps) {
+  if (variant === "hero") {
+    return (
+      <header className={`flex flex-col ${className}`}>
+        {icon ? (
+          <span className="mb-4 grid size-11 shrink-0 place-items-center rounded-lg bg-accent text-accent-ink">
+            <Icon name={icon} size={22} strokeWidth={1.25} />
+          </span>
+        ) : null}
+        {eyebrow ? (
+          <small className="mb-2 block font-mono text-xs tracking-wide text-ink-3">{eyebrow}</small>
+        ) : null}
+        <h1
+          className={`font-serif text-4xl font-bold leading-tight tracking-tight text-ink ${titleClassName}`}
+        >
+          {title}
+        </h1>
+        {description ? (
+          <p className="mt-4 max-w-2xl text-lg leading-8 text-ink-2">{description}</p>
+        ) : null}
+        {actions ? <div className="mt-7 flex flex-wrap items-center gap-4">{actions}</div> : null}
+      </header>
+    );
+  }
+
+  return (
+    <header className={`flex flex-wrap items-end justify-between gap-3 ${className}`}>
+      <div className="min-w-0">
+        {eyebrow ? (
+          <small className="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-3">
+            {eyebrow}
+          </small>
+        ) : null}
+        <div className="flex items-center gap-2">
+          {icon ? <Icon name={icon} size={20} className="shrink-0 text-ink" /> : null}
+          <h1
+            className={`font-serif text-2xl font-semibold tracking-tight text-ink ${titleClassName}`}
+          >
+            {title}
+          </h1>
+        </div>
+        {description ? <p className="mt-2 text-sm leading-6 text-ink-2">{description}</p> : null}
+      </div>
+      {actions ? <div className="flex flex-wrap items-center gap-2">{actions}</div> : null}
+    </header>
+  );
+}

package/src/components/page-header/index.ts

@@ -0,0 +1,2 @@
+export { PageHeader } from "./PageHeader";
+export type { PageHeaderProps } from "./PageHeader";

package/src/tokens/theme.css

@@ -21,6 +21,8 @@
  *   v0.9.0    暖纸底 + Serif display——去单调
  *   v0.9.1    印色路标撤回，命名定全词（现行）
  *   v0.9.2    品红点睛色阶（墨底荧光）——spot 四层 + ink，仅深色载体
+ *   v0.9.3    底色纯白化——暖纸退役，卡片层次交给 surface 灰阶与边框
+ *   v0.9.4    PageHeader 统一组件——内页 text-2xl 内联图标、落地页 44px 墨底徽章
  */
 
 @theme {
@@ -30,7 +32,7 @@
      v0.6 的 ink(30°) / ink-2(55°) / line(88°) / surface(90°) 四个色相
      混用，是"说不出哪里怪"的根源。
      ══════════════════════════════════════════════════════ */
-  --color-bg:          oklch(0.992 0.003 85);   /* 页面底，暖纸（v0.9.0：色相 85 彩度 0.003，有温度无色相感） */
+  --color-bg:          oklch(1 0 0);            /* 页面底，纯白（v0.9.3 用户定案去暖纸黄；层次靠 surface 灰阶与边框） */
   --color-surface:     oklch(0.985 0.001 265);  /* 卡片 / 面板 */
   --color-surface-2:   oklch(0.968 0.002 265);  /* 嵌套 / 表头 */
   --color-surface-3:   oklch(0.94 0.003 265);   /* hover / 按下 */