@zmzai/theme 0.9.6 → 0.9.7

package/package.json

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

package/src/brand/brand-lockup/BrandLockup.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { cn } from "../../utils/cn";
+import { Logo } from "../logo";
+import { Wordmark } from "../wordmark";
+
+/**
+ * BrandLockup — 全站统一的品牌锁标：云朵 Logo + ZMZAI wordmark + 子站标。
+ *
+ * 背景（2026-08-31）：theme 有两套骨架，品牌区 API 不对称 ——
+ * Navbar 内置 Logo + Wordmark，AppShell 的 brand 只吃 {label, suffix} 文本。
+ * 结果走 Navbar 的站（Folio / Quill / Index / auth）有云朵标，
+ * 走 AppShell 的站（Tome / Plate / Margin）没有。抽成一处，谁都不许自造。
+ *
+ * 纪律（BRAND §7.7）：
+ *   · 云朵 Logo 只出现在品牌锁标里，不单独当装饰散落在页面各处
+ *   · 子站标是站点对外的品牌名（书写系列），不是技术仓库名
+ *
+ * @example
+ * <BrandLockup sublabel="tome" />                     // 白底（默认）
+ * <BrandLockup sublabel="auth" tone="dark" />          // 墨底叙事区
+ */
+export interface BrandLockupProps {
+  /** 云朵标直径（px），默认 22 —— 全站统一，不要按场景私调 */
+  logoSize?: number;
+  /** wordmark 字号（px），默认 16 */
+  markSize?: number;
+  /** ZMZAI 后的子站标，如 "tome" / "quill" / "auth" */
+  sublabel?: string;
+  /** 墨底载体：云朵标反白、文字转暗底配色，默认 "light" */
+  tone?: "light" | "dark";
+  className?: string;
+}
+
+export function BrandLockup({
+  logoSize = 22,
+  markSize = 16,
+  sublabel,
+  tone = "light",
+  className,
+}: BrandLockupProps) {
+  const dark = tone === "dark";
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-2 select-none",
+        dark && "text-dark-ink",
+        className,
+      )}
+    >
+      <Logo size={logoSize} inverted={dark} />
+      <Wordmark
+        size={markSize}
+        sublabel={sublabel}
+        // 墨底时压掉 Wordmark 子标自带的 text-ink-3（暗底上不可读）。
+        // 任意变体选择器特异性高于单类名，能可靠覆盖。
+        className={dark ? "[&>span]:text-dark-ink/45" : undefined}
+      />
+    </span>
+  );
+}

package/src/brand/brand-lockup/index.ts

@@ -0,0 +1,2 @@
+// @zmzai/theme — Brand lockup barrel
+export { BrandLockup, type BrandLockupProps } from "./BrandLockup";

package/src/brand/index.ts

@@ -1,3 +1,4 @@
 // @zmzai/theme — Brand assets barrel
 export * from "./logo";
 export * from "./wordmark";
+export * from "./brand-lockup";

package/src/components/app-shell/AppShell.tsx

@@ -3,6 +3,8 @@
 import { useEffect, useMemo, useState } from "react";
 import type { ComponentType, ReactNode } from "react";
 
+import { BrandLockup } from "../../brand/brand-lockup";
+
 import { Badge } from "../badge/Badge";
 import { Icon, type IconName } from "../icon/Icon";
 import { CommandPalette, type AppPaletteItem } from "./CommandPalette";
@@ -130,9 +132,11 @@ export function AppShell({
   }, [hasPalette]);
 
   const brandBlock = (
-    <Link href={brand.href ?? "/"} className="flex items-baseline gap-1.5 px-2">
-      <span className="text-sm font-semibold tracking-tight">{brand.label}</span>
-      {brand.suffix ? <span className="font-mono text-[11px] text-ink-3">{brand.suffix}</span> : null}
+    <Link href={brand.href ?? "/"} className="flex flex-col gap-1 px-2">
+      {/* 品牌区统一走 BrandLockup（2026-08-31 抽出，与 Navbar 共用一份锁标）。
+          label 同时是顶栏兜底标题与子站标，两处语义一致。 */}
+      <BrandLockup sublabel={brand.label} />
+      {brand.suffix ? <span className="font-mono text-[10px] text-ink-3">{brand.suffix}</span> : null}
     </Link>
   );
 

package/src/components/navbar/Navbar.tsx

@@ -2,8 +2,7 @@
 
 import { type ReactNode, useEffect, useState } from "react";
 import { cn } from "../../utils/cn";
-import { Logo } from "../../brand/logo";
-import { Wordmark } from "../../brand/wordmark";
+import { BrandLockup } from "../../brand/brand-lockup";
 import { Icon } from "../icon/Icon";
 
 /**
@@ -66,12 +65,8 @@ export function Navbar({ sublabel, brand, children, actions, badge, brandHref, m
     return () => window.removeEventListener("keydown", onKey);
   }, [open]);
 
-  const brandNode = brand ?? (
-    <span className="inline-flex items-center gap-2">
-      <Logo size={22} />
-      <Wordmark size={16} sublabel={sublabel} />
-    </span>
-  );
+  // 品牌区统一走 BrandLockup（2026-08-31 抽出，与 AppShell 共用一份锁标）
+  const brandNode = brand ?? <BrandLockup sublabel={sublabel} />;
   const nav = children ? (
     <nav
       className="flex min-w-0 items-center gap-1 overflow-x-auto"

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

@@ -15,6 +15,13 @@
  *   · 描述统一 text-sm text-ink-2 —— ink-3 只有 3.69:1，副文案不用它
  *
  * v0.9.5 追加 centered（居中 Hero，/quill 首页用）。
+ *
+ * v0.9.7 page 变体改版（用户定案 2026-08-31，与 BRAND 戒律 14 同步）：
+ *   · 眉标改 mono 小写间距体（原 sans semibold）—— 等宽小标是全站通用的小节语言
+ *   · 标题从 text-2xl 提到 text-3xl，font-semibold → font-bold —— 衬线的视觉
+ *     体量比无衬线小，不放大反而显得比原来弱
+ *   · 图标从 text-ink 降到 text-ink-2 —— 图标是辅助信息，不该跟标题同权重
+ *   · 描述加 max-w-2xl + leading-7 —— 衬线大标题下的 sans 正文要更松才不挤
  */
 
 import type { ReactNode } from "react";
@@ -93,19 +100,19 @@ export function PageHeader({
     <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">
+          <small className="mb-1.5 block font-mono text-[11px] uppercase tracking-[0.16em] text-ink-3">
             {eyebrow}
           </small>
         ) : null}
-        <div className="flex min-w-0 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}`}
-          >
+        <div className="flex min-w-0 items-center gap-2.5">
+          {icon ? <Icon name={icon} size={20} strokeWidth={1.5} className="shrink-0 text-ink-2" /> : null}
+          <h1 className={`font-serif text-3xl font-bold leading-[1.2] tracking-tight text-ink ${titleClassName}`}>
             {title}
           </h1>
         </div>
-        {description ? <p className="mt-2 text-sm leading-6 text-ink-2">{description}</p> : null}
+        {description ? (
+          <p className="mt-2.5 max-w-2xl text-sm leading-7 text-ink-2">{description}</p>
+        ) : null}
       </div>
       {actions ? <div className="flex flex-wrap items-center gap-2">{actions}</div> : null}
     </header>