@zmzai/theme 0.6.1 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zmzai/theme",
-  "version": "0.6.1",
+  "version": "0.8.0",
   "private": false,
   "type": "module",
   "description": "zmzai 全品牌设计系统 — Radix UI + framer-motion + Tailwind v4 + MiSans",
@@ -60,12 +60,6 @@
     "README.md",
     "LICENSE"
   ],
-  "scripts": {
-    "build": "tsc -p tsconfig.json --noEmit",
-    "typecheck": "tsc --noEmit",
-    "playground": "vite playground --port 5174",
-    "prepublishOnly": "pnpm typecheck"
-  },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -105,5 +99,9 @@
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^2.5.0"
   },
-  "packageManager": "pnpm@10.34.5+sha512.a4ee05f2f73658255bd6a89859c065a45c28a57daefae2c893a168ee2b73168c37b91e83e57ea67654ad03f03031746430e8bce38e362e042605fb8abc80192e"
-}
+  "scripts": {
+    "build": "tsc -p tsconfig.json --noEmit",
+    "typecheck": "tsc --noEmit",
+    "playground": "vite playground --port 5174"
+  }
+}

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

@@ -0,0 +1,211 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import type { ComponentType, ReactNode } from "react";
+
+import { Badge } from "../badge/Badge";
+import { Icon, type IconName } from "../icon/Icon";
+import { CommandPalette, type AppPaletteItem } from "./CommandPalette";
+
+export type AppNavItem = { label: string; href: string; icon: IconName; keywords?: string };
+export type AppNavSection = { label: string; items: AppNavItem[] };
+export type { AppPaletteItem } from "./CommandPalette";
+
+/** 消费端注入的链接组件（Next.js 传 next/link 以保持 SPA 导航；缺省用 <a>）。 */
+export type AppShellLink = ComponentType<{
+  href: string;
+  className?: string;
+  children?: ReactNode;
+  onClick?: () => void;
+  "aria-current"?: "page" | undefined;
+}>;
+
+export function appShellIsActive(pathname: string, href: string): boolean {
+  return pathname === href || pathname.startsWith(`${href}/`);
+}
+
+/** 无 SPA 需求时的缺省链接：普通 <a>。 */
+function DefaultAnchor({ href, className, children, onClick, "aria-current": ariaCurrent }: { href: string; className?: string; children?: ReactNode; onClick?: () => void; "aria-current"?: "page" }) {
+  return (
+    <a href={href} className={className} onClick={onClick} aria-current={ariaCurrent}>
+      {children}
+    </a>
+  );
+}
+
+function SidebarSections({
+  sections,
+  pathname,
+  link: Link,
+  onNavigate,
+}: {
+  sections: AppNavSection[];
+  pathname: string;
+  link: AppShellLink;
+  onNavigate?: () => void;
+}) {
+  return (
+    <>
+      {sections.map((section) => (
+        <div key={section.label} className="flex flex-col gap-0.5">
+          <p className="px-2 pb-1 font-mono text-[10px] uppercase tracking-wider text-ink-3">{section.label}</p>
+          {section.items.map((item) => {
+            const active = appShellIsActive(pathname, item.href);
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                onClick={onNavigate}
+                aria-current={active ? "page" : undefined}
+                className={`flex items-center gap-2 rounded-md px-2 py-1.5 text-[13px] transition-colors ${
+                  active ? "bg-surface font-medium text-accent-readable" : "text-muted hover:bg-surface hover:text-accent"
+                }`}
+              >
+                <Icon name={item.icon} size={13} />
+                {item.label}
+              </Link>
+            );
+          })}
+        </div>
+      ))}
+    </>
+  );
+}
+
+/**
+ * 全站统一应用外壳（OpenRouter 式交互内核）：
+ * 全高左侧 sidebar（分组导航）+ 轻顶栏（标题 + ⌘K）+ 侧栏底部账户块。
+ * 站点无关：导航分组、品牌区、账户块、链接组件均由调用方注入；
+ * relay 的 RelayShell / sandbox 的 SandboxShell 是它的薄封装。
+ */
+export function AppShell({
+  brand,
+  sections,
+  pathname,
+  link,
+  account = null,
+  headerExtras = null,
+  paletteItems,
+  children,
+}: {
+  /** 品牌区：侧栏顶部与顶栏兜底标题 */
+  brand: { label: string; suffix?: string; href?: string };
+  /** 侧栏分组导航 */
+  sections: AppNavSection[];
+  /** 当前路径（消费端传 usePathname() ?? "/"；theme 不依赖 next） */
+  pathname: string;
+  /** 链接组件（Next.js 站传 next/link） */
+  link?: AppShellLink;
+  /** 侧栏底部账户块（登录按钮 / 用户信息） */
+  account?: ReactNode;
+  /** 顶栏右侧扩展（余额、状态等） */
+  headerExtras?: ReactNode;
+  /** ⌘K 命令面板条目；为空时顶栏不显示搜索按钮 */
+  paletteItems?: AppPaletteItem[];
+  children: ReactNode;
+}) {
+  const Link = (link ?? DefaultAnchor) as AppShellLink;
+  const hasPalette = Boolean(paletteItems?.length);
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [paletteOpen, setPaletteOpen] = useState(false);
+
+  // 顶栏标题：当前激活项的 label（取最长匹配，/admin/models 优先于 /admin）
+  const currentLabel = useMemo(() => {
+    const matches = sections.flatMap((s) => s.items).filter((item) => appShellIsActive(pathname, item.href));
+    if (!matches.length) return brand.label;
+    return matches.sort((a, b) => b.href.length - a.href.length)[0].label;
+  }, [pathname, sections, brand.label]);
+
+  // ⌘K / Ctrl+K 全局快捷键
+  useEffect(() => {
+    if (!hasPalette) return;
+    const onKey = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+        event.preventDefault();
+        setPaletteOpen((open) => !open);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [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>
+  );
+
+  return (
+    <div className="min-h-dvh bg-bg">
+      {hasPalette ? <CommandPalette open={paletteOpen} onClose={() => setPaletteOpen(false)} items={paletteItems!} /> : null}
+
+      {/* 移动端抽屉 */}
+      {drawerOpen ? (
+        <div className="fixed inset-0 z-40 lg:hidden" role="presentation">
+          <div className="absolute inset-0 bg-black/30" onClick={() => setDrawerOpen(false)} />
+          <nav className="absolute inset-y-0 left-0 flex w-64 flex-col gap-5 overflow-y-auto border-r border-line bg-bg px-3 py-4">
+            {brandBlock}
+            <SidebarSections sections={sections} pathname={pathname} link={Link} onNavigate={() => setDrawerOpen(false)} />
+            {account}
+          </nav>
+        </div>
+      ) : null}
+
+      <div className="lg:grid lg:grid-cols-[13.5rem_minmax(0,1fr)]">
+        {/* 桌面固定侧栏 */}
+        <aside className="sticky top-0 hidden h-dvh flex-col gap-5 overflow-y-auto border-r border-line px-3 py-4 lg:flex">
+          {brandBlock}
+          <SidebarSections sections={sections} pathname={pathname} link={Link} />
+          {account}
+        </aside>
+
+        <div className="flex min-h-dvh min-w-0 flex-col">
+          {/* 轻顶栏 */}
+          <header className="sticky top-0 z-30 flex items-center gap-3 border-b border-line bg-bg/95 px-4 py-2.5 backdrop-blur lg:px-8">
+            <button
+              type="button"
+              aria-label="打开导航"
+              onClick={() => setDrawerOpen(true)}
+              className="rounded-md p-1 text-muted hover:bg-surface hover:text-accent lg:hidden"
+            >
+              <Icon name="menu" size={16} />
+            </button>
+            <span className="text-sm font-medium text-ink-2">{currentLabel}</span>
+            <div className="ml-auto flex items-center gap-3">
+              {headerExtras}
+              {hasPalette ? (
+                <button
+                  type="button"
+                  onClick={() => setPaletteOpen(true)}
+                  className="flex items-center gap-2 rounded-md border border-line px-2.5 py-1 font-mono text-[11px] text-muted transition-colors hover:border-accent hover:text-accent"
+                  aria-label="打开命令面板"
+                >
+                  <Icon name="search" size={12} />
+                  <span className="hidden sm:inline">搜索</span>
+                  <kbd className="hidden sm:inline">⌘K</kbd>
+                </button>
+              ) : null}
+            </div>
+          </header>
+
+          {/* 内容区 */}
+          <main className="page-shell flex-1 py-8">{children}</main>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** 侧栏账户块通用样式辅助：登录后的用户信息行。 */
+export function AppShellAccountRow({ name, badge, children }: { name: string; badge?: string; children?: ReactNode }) {
+  return (
+    <div className="mt-auto flex flex-col gap-2 border-t border-line px-2 pt-3">
+      <div className="flex items-center justify-between gap-2">
+        <span className="truncate font-mono text-xs text-ink-2">{name}</span>
+        {badge ? <Badge variant="outline" size="sm">{badge}</Badge> : null}
+      </div>
+      {children ? <div className="flex items-center justify-between gap-2 font-mono text-[11px]">{children}</div> : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,126 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+
+import { Icon, type IconName } from "../icon/Icon";
+
+export type AppPaletteItem = {
+  label: string;
+  hint?: string;
+  group: string;
+  icon?: IconName;
+  keywords?: string;
+  run: () => void;
+};
+
+/**
+ * ⌘K / Ctrl+K 命令面板：纯手写 overlay（无新依赖）。
+ * 键盘：↑↓ 选择、Enter 确认、Esc 关闭；输入即时过滤（label/hint/keywords 子串匹配）。
+ */
+export function CommandPalette({ open, onClose, items, placeholder = "搜索页面或执行动作…" }: { open: boolean; onClose: () => void; items: AppPaletteItem[]; placeholder?: string }) {
+  const [query, setQuery] = useState("");
+  const [cursor, setCursor] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return items;
+    return items.filter((item) => `${item.label} ${item.hint ?? ""} ${item.keywords ?? ""}`.toLowerCase().includes(q));
+  }, [items, query]);
+
+  useEffect(() => {
+    if (open) {
+      setQuery("");
+      setCursor(0);
+      // 等一帧让 overlay 挂载后再聚焦，避免被浏览器焦点还原打断
+      requestAnimationFrame(() => inputRef.current?.focus());
+    }
+  }, [open]);
+
+  useEffect(() => setCursor(0), [query]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onClose();
+      } else if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setCursor((c) => Math.min(c + 1, filtered.length - 1));
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setCursor((c) => Math.max(c - 1, 0));
+      } else if (event.key === "Enter") {
+        event.preventDefault();
+        const item = filtered[cursor];
+        if (item) {
+          onClose();
+          item.run();
+        }
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, filtered, cursor, onClose]);
+
+  useEffect(() => {
+    listRef.current?.querySelector<HTMLElement>(`[data-index="${cursor}"]`)?.scrollIntoView({ block: "nearest" });
+  }, [cursor]);
+
+  if (!open) return null;
+
+  const execute = (index: number) => {
+    const item = filtered[index];
+    if (!item) return;
+    onClose();
+    item.run();
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-start justify-center bg-black/30 px-4 pt-[12vh]" onClick={onClose} role="presentation">
+      <div
+        className="w-full max-w-xl overflow-hidden rounded-xl border border-line bg-bg shadow-lg"
+        onClick={(event) => event.stopPropagation()}
+        role="dialog"
+        aria-modal="true"
+        aria-label="命令面板"
+      >
+        <div className="flex items-center gap-2 border-b border-line px-4 py-3">
+          <Icon name="search" size={14} className="text-muted" />
+          <input
+            ref={inputRef}
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            placeholder={placeholder}
+            className="w-full bg-transparent text-sm outline-none placeholder:text-ink-3"
+          />
+          <kbd className="rounded border border-line px-1.5 py-0.5 font-mono text-[10px] text-ink-3">esc</kbd>
+        </div>
+        <div ref={listRef} className="max-h-[50vh] overflow-y-auto py-1.5">
+          {filtered.length === 0 ? (
+            <p className="px-4 py-6 text-center font-mono text-xs text-ink-3">没有匹配结果</p>
+          ) : (
+            filtered.map((item, index) => (
+              <button
+                key={`${item.group}-${item.label}`}
+                type="button"
+                data-index={index}
+                onClick={() => execute(index)}
+                onMouseEnter={() => setCursor(index)}
+                className={`flex w-full items-center gap-2.5 px-4 py-2 text-left text-sm transition-colors ${
+                  index === cursor ? "bg-surface text-accent-readable" : "text-ink-2"
+                }`}
+              >
+                {item.icon ? <Icon name={item.icon} size={13} className="shrink-0 text-muted" /> : null}
+                <span className="min-w-0 flex-1 truncate">{item.label}</span>
+                {item.hint ? <span className="shrink-0 font-mono text-[11px] text-ink-3">{item.hint}</span> : null}
+              </button>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/app-shell/index.ts

@@ -0,0 +1,4 @@
+export { AppShell, AppShellAccountRow, appShellIsActive } from "./AppShell";
+export type { AppNavItem, AppNavSection, AppShellLink } from "./AppShell";
+export { CommandPalette } from "./CommandPalette";
+export type { AppPaletteItem } from "./CommandPalette";

package/src/components/artifact-card/artifact-card.css

@@ -1,12 +1,12 @@
 /* ArtifactCard — 产物卡。token 依赖消费端 @theme。 */
 .zmz-artifact-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 0.6rem; align-items: center; text-align: left; border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-bg); padding: 0.6rem 0.75rem; cursor: pointer; font: inherit; color: inherit; transition: border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out); }
-.zmz-artifact-card:hover { border-color: var(--color-accent); box-shadow: 0 4px 16px color-mix(in oklab, var(--color-accent) 12%, transparent); }
+.zmz-artifact-card:hover { border-color: var(--color-ink-3); box-shadow: var(--shadow-md); }
 /* 显式 grid 定位：name/meta 固定在左列（1fr），actions 固定右列跨两行。
    自动放置曾把超长 MIME 文本（无空格、无断行）排进右列 auto 轨道，
    撑爆布局把名字列压成 0 → 文件名竖排逐字折行。 */
 .zmz-artifact-name { grid-column: 1; grid-row: 1; font-family: var(--font-mono); font-size: 0.75rem; overflow-wrap: anywhere; }
 .zmz-artifact-meta { grid-column: 1; grid-row: 2; font-size: 0.6875rem; color: var(--color-muted); overflow-wrap: anywhere; }
 .zmz-artifact-actions { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 0.5rem; }
-.zmz-artifact-preview-hint { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-accent-strong); }
+.zmz-artifact-preview-hint { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-ink-3); }
 .zmz-artifact-download { display: inline-flex; color: var(--color-muted); }
-.zmz-artifact-download:hover { color: var(--color-accent); }
+.zmz-artifact-download:hover { color: var(--color-ink); }

package/src/components/badge/Badge.tsx

@@ -9,7 +9,7 @@ export const badgeVariants = cva(
   {
     variants: {
       variant: {
-        solid: "bg-ink text-white",
+        solid: "bg-ink text-bg",
         outline: "border border-line text-ink-2",
         success: "border border-success/30 bg-success/10 text-success",
         warning: "border border-warning/30 bg-warning/10 text-warning",

package/src/components/button/button.styles.ts

@@ -26,7 +26,8 @@ export const buttonVariants = cva(
     variants: {
       variant: {
         primary:
-          "bg-ink text-white hover:shadow-md active:scale-[0.98]",
+          // 反色按钮：bg-ink 上用 bg 色作文字（浅色=白、深色=黑），硬编码 text-white 在深色主题下不可读
+          "bg-ink text-bg hover:shadow-md active:scale-[0.98]",
         secondary:
           "border border-line text-ink hover:border-ink hover:bg-surface-2 active:scale-[0.98]",
         ghost:

package/src/components/index.ts

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

package/src/components/landing/landing.css

@@ -40,8 +40,8 @@
 }
 
 .btn-solid:hover {
-  background: oklch(0.30 0.010 30);
-  border-color: oklch(0.30 0.010 30);
+  background: var(--color-ink);
+  border-color: var(--color-ink);
 }
 
 /* Arrow slide on hover（按钮/链接内的 → 箭头位移） */
@@ -125,7 +125,7 @@
 
 .product-card:hover {
   transform: translateY(-4px);
-  box-shadow: 0 16px 48px -12px oklch(0.18 0.011 40 / 0.12);
+  box-shadow: var(--shadow-lg);
   border-color: var(--color-muted);
 }
 
@@ -195,7 +195,7 @@
   border: 1px solid var(--color-line);
   border-radius: var(--radius-xl);
   overflow: hidden;
-  box-shadow: 0 24px 64px -16px oklch(0.15 0.010 30 / 0.12);
+  box-shadow: var(--shadow-xl);
   position: relative;
 }
 

package/src/components/model-selector/model-selector.css

@@ -48,7 +48,7 @@
   border-radius: var(--radius-sm, 2px);
   border: 1px solid var(--color-line, oklch(0.85 0.02 80));
   background: var(--color-bg, oklch(0.97 0.01 80));
-  box-shadow: 0 10px 38px -10px oklch(0.2 0.02 80 / 0.25), 0 10px 20px -15px oklch(0.2 0.02 80 / 0.15);
+  box-shadow: var(--shadow-xl);
   padding: 0.25rem;
 }
 
@@ -146,7 +146,7 @@
 .ms-featured-check {
   flex-shrink: 0;
   margin-top: 0.25rem;
-  color: var(--color-accent, oklch(0.45 0.18 25));
+  color: var(--color-accent);
 }
 
 /* Separator */
@@ -257,7 +257,7 @@
 
 .ms-model-check {
   flex-shrink: 0;
-  color: var(--color-accent, oklch(0.45 0.18 25));
+  color: var(--color-accent);
 }
 
 .ms-model-meta {

package/src/components/navbar/Navbar.tsx

@@ -9,7 +9,7 @@ import { Icon } from "../icon/Icon";
 /**
  * navItemClass — 导航项统一样式（全域导航一致）。
  *
- * active 时深墨 pill 高亮（bg-ink text-white），其余 hover 浮现。
+ * active 时深墨 pill 高亮（bg-ink text-bg，深浅主题自适应），其余 hover 浮现。
  * 链接本身由调用方渲染（Next.js 用 next/link，保持 SPA 导航），
  * 只要都套这个 className，任何站点的导航观感就完全一致。
  */
@@ -17,7 +17,7 @@ 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"
+      ? "bg-ink text-bg"
       : "text-ink-2 hover:bg-surface-2 hover:text-ink"
   );
 }

package/src/components/reasoning/reasoning.css

@@ -4,7 +4,7 @@
 .zmz-reasoning { border-left: 2px solid var(--color-line); padding-left: 0.6rem; }
 .zmz-reasoning-toggle { display: inline-flex; align-items: center; gap: 0.3rem; background: none; border: 0; cursor: pointer; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-muted); padding: 0.15rem 0; }
 .zmz-reasoning-dot { display: inline-block; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--color-muted); }
-.zmz-reasoning-dot.live { background: var(--color-accent); animation: zmz-reasoning-pulse 1.2s ease-in-out infinite; }
+.zmz-reasoning-dot.live { background: var(--color-live); animation: zmz-reasoning-pulse 1.2s ease-in-out infinite; }
 .zmz-chevron { transition: transform 0.15s var(--ease-out); }
 .zmz-chevron.open { transform: rotate(180deg); }
 .zmz-reasoning-body { margin: 0.4rem 0 0; overflow: hidden; font-size: 0.75rem; color: var(--color-muted); white-space: pre-wrap; }

package/src/components/sticky-banner/StickyBanner.tsx

@@ -16,7 +16,7 @@ export interface StickyBannerProps extends HTMLAttributes<HTMLDivElement> {
 
 const variantStyles: Record<BannerVariant, string> = {
   info: "bg-surface text-ink border-line",
-  warning: "bg-ink text-white border-ink",
+  warning: "bg-ink text-bg border-ink",
   danger: "bg-bg text-ink border-ink border-2",
 };
 

package/src/components/subtask/subtask.css

@@ -1,11 +1,11 @@
 /* SubtaskPart — 执行树中的子任务行。token 依赖消费端 @theme
-   （--color-line、--color-accent、--color-muted、--font-mono）。
+   （--color-line、--color-live、--color-muted、--font-mono）。
    执行树分支线（::before）等上下文增强由消费端自己的 CSS 叠加。 */
 
 .subtask-row { position: relative; display: flex; align-items: center; gap: 0.5rem; min-height: 2.15rem; padding: 0.38rem 0.4rem; background: transparent; }
 /* 执行树分支线（挂在左侧时间轴上；独立使用时容器需留出左侧空间） */
 .subtask-row::before { position: absolute; top: 1.08rem; left: -0.81rem; width: 0.81rem; height: 1px; background: var(--color-line); content: ""; }
-.subtask-icon { display: grid; width: 1rem; height: 1rem; place-items: center; color: var(--color-accent); }
+.subtask-icon { display: grid; width: 1rem; height: 1rem; place-items: center; color: var(--color-live); }
 .subtask-copy { display: grid; min-width: 0; flex: 1; gap: 0.1rem; }
 .subtask-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; font-weight: 600; }
 .subtask-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-muted); font-family: var(--font-mono); font-size: 0.6rem; }

package/src/components/todo-checklist/todo-checklist.css

@@ -20,13 +20,13 @@
 .zmz-task-node-trigger:disabled { cursor: default; }
 .zmz-task-node-trigger:disabled:hover { background: transparent; }
 .zmz-task-node-marker { display: inline-flex; width: 0.9rem; height: 0.9rem; align-items: center; justify-content: center; border: 1px solid var(--color-line); border-radius: 50%; background: var(--color-surface); color: var(--color-success); }
-.zmz-task-node.in_progress .zmz-task-node-marker { border-color: var(--color-accent); }
+.zmz-task-node.in_progress .zmz-task-node-marker { border-color: var(--color-live); }
 .zmz-task-node-copy { display: flex; min-width: 0; align-items: baseline; gap: 0.45rem; }
 .zmz-task-node-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.76rem; font-weight: 600; }
 .zmz-task-node-index { flex: 0 0 auto; color: var(--color-muted); font-family: var(--font-mono); font-size: 0.55rem; }
 .zmz-task-node.completed .zmz-task-node-copy strong { color: var(--color-muted); text-decoration: line-through; }
-.zmz-task-node.in_progress .zmz-task-node-copy strong { color: var(--color-accent-strong); }
-.zmz-todo-spinner { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--color-accent); animation: zmz-pulse 1s var(--ease-out) infinite; }
+.zmz-task-node.in_progress .zmz-task-node-copy strong { color: var(--color-live); }
+.zmz-todo-spinner { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--color-live); animation: zmz-pulse 1s var(--ease-out) infinite; }
 .zmz-chevron { transition: transform 0.15s var(--ease-out); }
 .zmz-chevron.open { transform: rotate(180deg); }
 .zmz-task-executions { position: relative; display: grid; gap: 0; margin: 0 0 0.15rem 1.3rem; padding: 0.05rem 0 0.1rem 1rem; }

package/src/components/tool-card/tool-card.css

@@ -8,9 +8,9 @@
 .tool-card-trigger { display: flex; width: 100%; min-height: 2.15rem; align-items: center; gap: 0.5rem; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-ink); padding: 0.38rem 0.4rem; text-align: left; cursor: pointer; transition: background 0.15s var(--ease-out); }
 .tool-card-trigger:hover { background: var(--color-surface); }
 .tool-card-glyph { display: grid; width: 1rem; height: 1rem; flex: 0 0 1rem; place-items: center; border-radius: 50%; color: var(--color-muted); }
-.tool-card.running .tool-card-glyph { color: var(--color-accent); animation: zmz-tool-pulse 1s ease-in-out infinite; }
+.tool-card.running .tool-card-glyph { color: var(--color-live); animation: zmz-tool-pulse 1s ease-in-out infinite; }
 .tool-card.completed .tool-card-glyph { color: var(--color-success); }
-.tool-card.failed .tool-card-glyph { color: #b03a28; }
+.tool-card.failed .tool-card-glyph { color: var(--color-danger); }
 .tool-card-label { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; }
 .tool-card-duration { flex: 0 0 auto; color: var(--color-muted); font-family: var(--font-mono); font-size: 0.6rem; }
 .tool-card-chevron { flex: 0 0 auto; color: var(--color-muted); transition: transform 0.15s var(--ease-out); }
@@ -19,7 +19,7 @@
 .tool-card-detail-section { display: grid; gap: 0.25rem; }
 .tool-card-detail-label { color: var(--color-muted); font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; }
 .tool-card-detail pre { margin: 0; color: var(--color-muted); font-family: var(--font-mono); font-size: 0.68rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
-.tool-card-live-note { color: var(--color-accent-strong); font-family: var(--font-mono); font-size: 0.62rem; }
+.tool-card-live-note { color: var(--color-live); font-family: var(--font-mono); font-size: 0.62rem; }
 
 .zmz-tool-group { display: grid; gap: 0.5rem; margin: 0.4rem 0; }
 .zmz-tool-group-trigger { display: flex; align-items: center; gap: 0.5rem; width: 100%; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: color-mix(in oklab, var(--color-surface) 92%, var(--color-bg)); color: var(--color-ink); padding: 0.4rem 0.6rem; cursor: pointer; transition: border-color 0.15s var(--ease-out); }

package/src/components/vanish-input/VanishInput.tsx

@@ -145,7 +145,7 @@ export function VanishInput({
       <button
         type="submit"
         aria-label="提交"
-        className="ml-2 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-ink text-white transition-transform hover:scale-105 active:scale-95"
+        className="ml-2 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-ink text-bg transition-transform hover:scale-105 active:scale-95"
       >
         <svg
           className="h-3.5 w-3.5"

package/src/tokens/theme.css

@@ -6,69 +6,134 @@
  *   @import "@zmzai/theme/tokens";
  *   @import "@zmzai/theme/fonts";
  *
- * v0.6.0 起为纯白 + 荧光绿（Pure white + fluorescent green），
- * 与 zmzai.cloud 主应用（Hallmark Study）同源。
- * v0.2.0~0.5.x 为暖色杂志风（Warm paper + seal-red，已弃用）。
- * v0.1.x 黑白 Monochrome 风，更早废弃。
+ * v0.7.0 「墨骨 Ink Frame」—— 结构色与语义色分离
+ *   · accent 从荧光绿改为墨黑，只承担 UI 结构（按钮 / 焦点 / 选中 / 硬线）
+ *   · 绿退为品牌色 + 语义色（成功 / 运行中），不再当万能强调色
+ *   · 中性灰阶统一色相 hue 265、彩度压到 0.008 以下，不再泛脏
+ *   · 补齐 elevation 阴影体系（此前包内一个 shadow token 都没有）
+ *
+ * 沿革：
+ *   v0.1.x    黑白 Monochrome
+ *   v0.2~0.5  暖纸 + 印章红
+ *   v0.6.x    纯白 + 荧光绿（accent 一色包打天下，装饰过载 → 观感 demo）
+ *   v0.7.0    纯白 + 墨黑结构 + 绿色语义（现行）
  */
 
 @theme {
-  /* ===== Color =====
-     纯白底 + 荧光绿 accent（与 zmzai.cloud 主应用同源，Hallmark Study 锁定）。
-     accent 为荧光绿（oklch 0.78 0.220 142）；accent-ink 为深色（用于绿底上的字）。 */
-  --color-bg:            oklch(0.995 0.002 90);
-  --color-surface:       oklch(0.98 0.004 90);
-  --color-surface-2:     oklch(0.95 0.006 88);
-  --color-ink:           oklch(0.15 0.010 30);
-  --color-ink-2:         oklch(0.50 0.012 55);
-  --color-ink-3:         oklch(0.55 0.012 55);
-  --color-line:          oklch(0.90 0.005 88);
-  --color-line-strong:   oklch(0.15 0.010 30);
-  --color-accent:        oklch(0.78 0.220 142);
-  --color-accent-ink:    oklch(0.15 0.010 30);
-  --color-success:       oklch(0.72 0.180 145);
-  --color-danger:        oklch(0.55 0.200 25);
-  --color-warning:       oklch(0.80 0.150 90);
-
-  /* Dark surface — 仅用于代码块/preview，不是全局 dark mode */
-  --color-dark-bg:       #0A0A0A;
-  --color-dark-surface:  #141414;
-  --color-dark-ink:      #FAFAFA;
-  --color-dark-line:     #27272A;
-
-  /* ===== Fonts =====
-     无衬线主字体（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;
+  /* ══════════════════════════════════════════════════════
+     1. Neutral — 中性灰阶
+     统一色相 hue 265（冷中性），彩度随明度轻微起伏但全部 ≤ 0.017。
+     v0.6 的 ink(30°) / ink-2(55°) / line(88°) / surface(90°) 四个色相
+     混用，是"说不出哪里怪"的根源。
+     ══════════════════════════════════════════════════════ */
+  --color-bg:          oklch(1 0 0);            /* 页面底，纯白 */
+  --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 / 按下 */
+  --color-ink:         oklch(0.21 0.008 265);   /* 标题 / 正文 */
+  --color-ink-2:       oklch(0.442 0.017 265);  /* 次级文字 */
+  --color-ink-3:       oklch(0.617 0.014 265);  /* 辅助 / 占位 · 3.69:1 */
+  --color-line:        oklch(0.92 0.004 265);   /* 常规边框 */
+  --color-line-strong: oklch(0.87 0.005 265);   /* 强调边框 */
+  --color-rule:        oklch(0.21 0.008 265);   /* 硬分隔线 = ink */
+
+  /* ══════════════════════════════════════════════════════
+     2. Structure accent — 墨黑
+     只干结构的活：主按钮、焦点环、选中态、硬线、链接 hover。
+     高饱和彩色的活它不干——那正是 v0.6 显得 demo 的原因。
+     ══════════════════════════════════════════════════════ */
+  --color-accent:           oklch(0.21 0.008 265);
+  --color-accent-ink:       oklch(1 0 0);
+  --color-accent-strong:    oklch(0.09 0.004 265);
+  --color-accent-tint:      oklch(0.968 0.002 265);
+  --color-accent-readable:  var(--color-accent);
+
+  /* ══════════════════════════════════════════════════════
+     3. Brand green — 品牌资产专用
+     只给 favicon / logo / 印章 / 极少数品牌位。
+     不承担交互语义，不进按钮、不进边框。
+     ══════════════════════════════════════════════════════ */
+  --color-brand:      oklch(0.499 0.14 145);          /* 5.67:1 */
+  --color-brand-tint: oklch(0.955 0.035 145);
+
+  /* ══════════════════════════════════════════════════════
+     4. Semantic — 语义色
+     只表达状态，不做装饰。每色配一档浅底 tint 用于 badge / 提示条。
+     全部经 WCAG 校验：文字用途 ≥ 4.5:1（白底）。
+     对照：v0.6 的荧光绿在白底只有 1.8:1，21 处 text-accent 全部不达标。
+     ══════════════════════════════════════════════════════ */
+  --color-live:          oklch(0.499 0.17 145);      /* 运行中 / 活跃 · 5.55:1 */
+  --color-success:       oklch(0.499 0.13 145);      /* 成功 · 5.70:1 */
+  --color-success-tint:  oklch(0.955 0.035 145);
+  --color-warning:       oklch(0.499 0.12 75);       /* 告警 · 6.14:1 */
+  --color-warning-tint:  oklch(0.955 0.045 90);
+  --color-danger:        oklch(0.499 0.18 25);       /* 错误 · 6.62:1 */
+  --color-danger-tint:   oklch(0.955 0.03 25);
+
+  /* ══════════════════════════════════════════════════════
+     5. Dark surface — 仅代码块 / preview，不是全局 dark mode
+     ══════════════════════════════════════════════════════ */
+  --color-dark-bg:      oklch(0.17 0.006 265);
+  --color-dark-surface: oklch(0.23 0.007 265);
+  --color-dark-ink:     oklch(0.97 0.002 265);
+  --color-dark-line:    oklch(0.32 0.008 265);
+
+  /* ══════════════════════════════════════════════════════
+     6. Elevation — 阴影
+     v0.6 完全没有 shadow token，各站只能手写 oklch(... / 0.12) 硬编码。
+     统一用 ink 色做阴影基色，避免出现彩虹灰。
+     ══════════════════════════════════════════════════════ */
+  --shadow-xs: 0 1px 2px oklch(0.21 0.008 265 / 0.05);
+  --shadow-sm: 0 1px 3px oklch(0.21 0.008 265 / 0.06),
+               0 1px 2px oklch(0.21 0.008 265 / 0.04);
+  --shadow-md: 0 4px 12px -2px oklch(0.21 0.008 265 / 0.08),
+               0 2px 4px -2px oklch(0.21 0.008 265 / 0.05);
+  --shadow-lg: 0 12px 32px -8px oklch(0.21 0.008 265 / 0.12),
+               0 4px 8px -4px oklch(0.21 0.008 265 / 0.06);
+  --shadow-xl: 0 24px 56px -12px oklch(0.21 0.008 265 / 0.16);
+
+  /* ══════════════════════════════════════════════════════
+     7. Fonts
+     MiSans 主字体；fallback 全部为无衬线。
+     v0.6 把 Noto Serif SC 排在 sans 第二顺位——MiSans CDN 一挂整站
+     掉宋体。此处移除。
+     ══════════════════════════════════════════════════════ */
+  --font-sans: "MiSans", -apple-system, BlinkMacSystemFont, "PingFang SC",
+               "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
   --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
-  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
-
-  /* ===== Radius =====
-     锐利编辑风（sharp editorial）。 */
-  --radius-sm:    2px;
-  --radius:       2px;
-  --radius-lg:    4px;
-  --radius-xl:    6px;
+  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace;
+
+  /* ══════════════════════════════════════════════════════
+     8. Radius — 锐利但不寒酸
+     v0.6 的 2/2/4/6 太扁，大容器用 2px 像表格不成卡片。
+     ══════════════════════════════════════════════════════ */
+  --radius-xs:    2px;
+  --radius-sm:    3px;
+  --radius:       4px;
+  --radius-md:    4px;
+  --radius-lg:    6px;
+  --radius-xl:    8px;
+  --radius-2xl:   12px;
   --radius-pill:  9999px;
 
-  /* ===== Motion ===== */
+  /* ══════════════════════════════════════════════════════
+     9. Motion
+     ══════════════════════════════════════════════════════ */
   --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
   --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
 
-  /* ===== Backward-compat aliases =====
-     Maps old v1 token names → new v2 values.
-     Lets zmzai-agent's 267 existing CSS classes work without modification. */
-  --color-paper:         var(--color-bg);
-  --color-muted:         var(--color-ink-2);
-  --color-rule:          var(--color-ink);
+  /* ══════════════════════════════════════════════════════
+     10. Backward-compat aliases
+     v1 token 名 → v0.7 值，让既有 267 个 class 无需改动。
+     ══════════════════════════════════════════════════════ */
+  --color-paper:          var(--color-bg);
+  --color-muted:          var(--color-ink-2);
   --color-surface-strong: var(--color-surface-2);
-  --color-accent-strong: oklch(0.68 0.220 142);
-  --animate-dur-fast:    150ms;
-  --animate-dur-base:    250ms;
-  --animate-dur-slow:    500ms;
-  --radius-card:         var(--radius);
-  --radius-input:        var(--radius-sm);
+  --animate-dur-fast:     150ms;
+  --animate-dur-base:     250ms;
+  --animate-dur-slow:     500ms;
+  --radius-card:          var(--radius);
+  --radius-input:         var(--radius-sm);
 }
 
 :root {