@zmzai/theme 0.2.7 → 0.2.9

package/package.json

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

package/src/components/icon/Icon.tsx

@@ -16,6 +16,7 @@ const paths: Record<string, { d: string; fill?: boolean }> = {
   "arrow-down": { d: "M8 3.5v8M5 8.5L8 11.5 11 8.5" },
   "arrow-right": { d: "M3 8h9.5M8.5 4.5L12 8l-3.5 3.5" },
   "chevron-right": { d: "M6 4l4 4-4 4" },
+  "chevron-left": { d: "M10 4l-4 4 4 4" },
   "chevron-down": { d: "M4 6l4 4 4-4" },
   refresh: { d: "M13 8a5 5 0 1 1-1.5-3.6M13 3.5v2.8h-2.8" },
   retry: { d: "M13 8a5 5 0 1 1-1.5-3.6M13 3.5v2.8h-2.8" },

package/src/components/index.ts

@@ -28,6 +28,7 @@ export * from "./stateful-button";
 
 // === Layout & Structure ===
 export * from "./floating-navbar";
+export * from "./navbar";
 export * from "./aceternity-sidebar";
 export * from "./bento-grid";
 export * from "./expandable-card";

package/src/components/navbar/Navbar.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { type ReactNode } from "react";
+import { cn } from "../../utils/cn";
+import { Logo } from "../../brand/logo";
+import { Wordmark } from "../../brand/wordmark";
+
+/**
+ * navItemClass — 导航项统一样式（全域导航一致）。
+ *
+ * active 时深墨 pill 高亮（bg-ink text-white），其余 hover 浮现。
+ * 链接本身由调用方渲染（Next.js 用 next/link，保持 SPA 导航），
+ * 只要都套这个 className，任何站点的导航观感就完全一致。
+ */
+export function navItemClass(active: boolean): string {
+  return cn(
+    "inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm font-medium transition-colors",
+    active
+      ? "bg-ink text-white"
+      : "text-ink-2 hover:bg-surface-2 hover:text-ink"
+  );
+}
+
+export interface NavbarProps {
+  /** Wordmark 后缀，如 "agent" / "relay"（品牌区自动 Logo + Wordmark） */
+  sublabel?: string;
+  /** 品牌区自定义（默认 Logo + Wordmark）；传了则忽略 sublabel */
+  brand?: ReactNode;
+  /** 中间导航区（建议用 next/link 包 navItemClass(active)） */
+  children?: ReactNode;
+  /** 右侧操作区（用户信息 / 退出 / 入口按钮等） */
+  actions?: ReactNode;
+  /** 品牌区右侧的附属徽章（如域名 a.zmzai.cloud） */
+  badge?: ReactNode;
+  className?: string;
+}
+
+/**
+ * Navbar — 全域统一顶栏。
+ *
+ * 左：品牌区（Logo + Wordmark）；中：导航；右：操作区。
+ * 固定高度 3.5rem，paper 底色 + 模糊，底部细线。
+ * 各站（agent / relay / auth / hub）都消费这一个组件，保证导航一致。
+ *
+ * @example
+ * <Navbar sublabel="agent" badge={<span>a.zmzai.cloud</span>} actions={<LogoutButton />}>
+ *   <Link href="/fw" className={navItemClass(pathname === "/fw")}>新任务</Link>
+ *   <Link href="/audit" className={navItemClass(pathname === "/audit")}>运行审计</Link>
+ * </Navbar>
+ */
+export function Navbar({ sublabel, brand, children, actions, badge, className }: NavbarProps) {
+  return (
+    <header
+      className={cn(
+        "sticky top-0 z-40 flex h-14 items-center justify-between gap-4 border-b border-line bg-paper/80 px-5 backdrop-blur-md",
+        className
+      )}
+    >
+      <div className="flex min-w-0 items-center gap-2.5">
+        {brand ?? (
+          <span className="inline-flex items-center gap-2">
+            <Logo size={22} />
+            <Wordmark size={16} sublabel={sublabel} />
+          </span>
+        )}
+        {badge}
+      </div>
+      {children ? (
+        <nav className="flex min-w-0 items-center gap-1 overflow-x-auto" aria-label="主导航">
+          {children}
+        </nav>
+      ) : null}
+      {actions ? <div className="flex shrink-0 items-center gap-2.5">{actions}</div> : null}
+    </header>
+  );
+}

package/src/components/navbar/index.ts

@@ -0,0 +1 @@
+export * from "./Navbar";

package/src/tokens/fonts.css

@@ -1,17 +1,40 @@
 /*
- * @zmzai/theme — Font Faces（v0.2.0 暖色杂志风）
+ * @zmzai/theme — Font Faces（v0.2.9 修正字体）
  *
- * Noto Serif SC（衬线正文，杂志感）+ JetBrains Mono（等宽）。
- * 均通过 jsDelivr CDN 加载 @fontsource 的 woff2（OFL 协议，免费商用）。
+ * MiSans（无衬线正文，现代感主字体）+ JetBrains Mono（等宽）。
+ * Noto Serif SC 保留为 serif 栈 fallback（标题/杂志元素可选）。
+ * MiSans 通过 jsDelivr gh CDN 加载 woff2；Noto Serif SC 走 @fontsource。
  * font-display: swap 保证加载期间用 fallback，加载完无缝切换。
  *
- * 注意：简体中文子集较大，Noto Serif SC 仅含 chinese-simplified；
- * 拉丁字符命中子集内的 latin 部分，无需额外声明。
+ * ⚠️ v0.2.0~0.2.8 的坑：Noto Serif SC 在 next/font 里只声明 latin 子集，
+ * 中文没有字形 → 全局中文 fallback 到系统宋体（Songti SC），观感陈旧。
+ * 0.2.9 起 --font-sans/--font-serif 默认指 MiSans（无衬线，中文齐全）。
  *
  * Import in your app's globals.css:
  *   @import "@zmzai/theme/fonts";
  */
 
+@font-face {
+  font-family: 'MiSans';
+  src: url('https://cdn.jsdelivr.net/gh/dsrkafuu/misans@main/raw/Normal/woff2/MiSans-Regular.woff2') format('woff2');
+  font-weight: 400; font-style: normal; font-display: swap;
+}
+@font-face {
+  font-family: 'MiSans';
+  src: url('https://cdn.jsdelivr.net/gh/dsrkafuu/misans@main/raw/Normal/woff2/MiSans-Medium.woff2') format('woff2');
+  font-weight: 500; font-style: normal; font-display: swap;
+}
+@font-face {
+  font-family: 'MiSans';
+  src: url('https://cdn.jsdelivr.net/gh/dsrkafuu/misans@main/raw/Normal/woff2/MiSans-Semibold.woff2') format('woff2');
+  font-weight: 600; font-style: normal; font-display: swap;
+}
+@font-face {
+  font-family: 'MiSans';
+  src: url('https://cdn.jsdelivr.net/gh/dsrkafuu/misans@main/raw/Normal/woff2/MiSans-Bold.woff2') format('woff2');
+  font-weight: 700; font-style: normal; font-display: swap;
+}
+
 @font-face {
   font-family: 'Noto Serif SC';
   src: url('https://cdn.jsdelivr.net/npm/@fontsource/noto-serif-sc/files/noto-serif-sc-chinese-simplified-400-normal.woff2') format('woff2');

package/src/tokens/theme.css

@@ -36,8 +36,10 @@
   --color-dark-line:     #27272A;
 
   /* ===== Fonts =====
-     衬线正文字体（Noto Serif SC，杂志感）+ JetBrains Mono 等宽。 */
-  --font-sans: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
+     无衬线主字体（MiSans，中文现代感）+ Noto Serif SC 标题衬线 + JetBrains Mono 等宽。
+     v0.2.0~0.2.8 曾以 Noto Serif SC 为 sans，但 next/font 只加载 latin 子集、
+     中文 fallback 系统宋体观感陈旧——0.2.9 改回 MiSans。 */
+  --font-sans: "MiSans", "Noto Serif SC", "Source Han Serif SC", "PingFang SC", "Microsoft YaHei", sans-serif;
   --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
   --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;