@zmzai/theme 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zmzai/theme",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "private": false,
   "type": "module",
   "description": "zmzai 全品牌设计系统 — Radix UI + framer-motion + Tailwind v4 + MiSans",
@@ -48,6 +48,10 @@
     "./brand": {
       "types": "./src/brand/index.ts",
       "import": "./src/brand/index.ts"
+    },
+    "./parse-unified-diff": {
+      "types": "./src/components/diff-view/parse-unified-diff.ts",
+      "import": "./src/components/diff-view/parse-unified-diff.ts"
     }
   },
   "files": [

package/src/components/artifact-card/ArtifactCard.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { Icon } from "../../components/icon/Icon";
+import "./artifact-card.css";
+
+export interface ArtifactCardProps {
+  /** 产物路径（文件名） */
+  path: string;
+  /** 元信息行（如 "pptx · 1.2 MiB"） */
+  meta: string;
+  /** 有预览时显示的提示角标 */
+  previewHint?: boolean;
+  /** 下载直链（无则不渲染下载按钮） */
+  downloadUrl?: string;
+  /** 点击卡片（打开预览） */
+  onOpen?: () => void;
+}
+
+/** MIME → 卡片短类型名；未知长类型取 subtype 末段。 */
+export function shortContentType(contentType: string): string {
+  const type = contentType.split(";")[0]!.trim().toLowerCase();
+  const known: Record<string, string> = {
+    "application/vnd.openxmlformats-officedocument.presentationml.presentation": "pptx",
+    "application/vnd.openxmlformats-officedocument.presentationml.slideshow": "ppsx",
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "docx",
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "xlsx",
+    "application/pdf": "pdf",
+    "application/json": "json",
+    "application/zip": "zip",
+    "text/html": "html",
+    "text/markdown": "md",
+    "text/plain": "txt",
+    "text/css": "css",
+  };
+  if (known[type]) return known[type]!;
+  const sub = type.split("/").pop() ?? "file";
+  if (sub.length <= 14) return sub;
+  const tail = sub.split(".").pop() ?? sub;
+  return tail.length <= 14 ? tail : "file";
+}
+
+export function formatBytes(value: number): string {
+  if (value < 1024) return `${value} B`;
+  if (value < 1024 * 1024) return `${(value / 1024).toFixed(1)} KiB`;
+  return `${(value / (1024 * 1024)).toFixed(1)} MiB`;
+}
+
+/**
+ * ArtifactCard — 产物卡：路径 + 类型/大小 meta + 预览角标 + 下载。
+ *
+ * hover 抬升 + 印章红描边渐现（炫酷），入场淡入。
+ * 显式 grid 定位防超长 MIME 撑爆布局。
+ *
+ * @example
+ * <ArtifactCard path="报告.pptx" meta={`${shortContentType(m)} · ${formatBytes(b)}`} previewHint onOpen={open} downloadUrl={url} />
+ */
+export function ArtifactCard({ path, meta, previewHint, downloadUrl, onOpen }: ArtifactCardProps) {
+  return (
+    <motion.button
+      type="button"
+      className="zmz-artifact-card"
+      onClick={onOpen}
+      initial={{ opacity: 0, y: 6 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+      whileHover={{ y: -2 }}
+    >
+      <span className="zmz-artifact-name">{path}</span>
+      <span className="zmz-artifact-meta">{meta}</span>
+      <span className="zmz-artifact-actions">
+        {previewHint && <span className="zmz-artifact-preview-hint">预览</span>}
+        {downloadUrl && (
+          <a className="zmz-artifact-download" href={downloadUrl} onClick={(event) => event.stopPropagation()}>
+            <Icon name="download" size={12} />
+          </a>
+        )}
+      </span>
+    </motion.button>
+  );
+}

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

@@ -0,0 +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); }
+/* 显式 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-download { display: inline-flex; color: var(--color-muted); }
+.zmz-artifact-download:hover { color: var(--color-accent); }

package/src/components/artifact-card/index.ts

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

package/src/components/edit-card/EditCard.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+
+import { Icon } from "../../components/icon/Icon";
+import { DiffView } from "../../components/diff-view";
+import "./edit-card.css";
+
+/**
+ * EditCard — 文件改动卡：路径 + 修订号头部，展开看彩色 diff。
+ *
+ * 展开内容用 theme DiffView 渲染，AnimatePresence 渐显。
+ *
+ * @example
+ * <EditCard path="src/app.ts" revision="rev_abc123" diff={unifiedDiff} />
+ */
+export function EditCard({ path, revision, diff }: { path: string; revision: string; diff: string }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="zmz-edit-card">
+      <button type="button" className="zmz-edit-head" onClick={() => setOpen((value) => !value)}>
+        <Icon name="chevron-down" size={11} className={open ? "zmz-chevron open" : "zmz-chevron"} />
+        <span className="zmz-edit-path">{path}</span>
+        <small>{revision.slice(0, 12)}</small>
+      </button>
+      <AnimatePresence initial={false}>
+        {open && (
+          <motion.div
+            className="zmz-edit-body"
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: "auto" }}
+            exit={{ opacity: 0, height: 0 }}
+            transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+          >
+            <DiffView diff={diff} />
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

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

@@ -0,0 +1,9 @@
+/* EditCard — 文件改动卡。token 依赖消费端 @theme。 */
+.zmz-edit-card { border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); overflow: hidden; }
+.zmz-edit-head { display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 0.55rem 0.75rem; font: inherit; color: inherit; }
+.zmz-edit-head:hover { background: var(--color-surface-strong); }
+.zmz-edit-path { font-family: var(--font-mono); font-size: 0.75rem; flex: 1; overflow-wrap: anywhere; }
+.zmz-edit-head small { color: var(--color-muted); font-family: var(--font-mono); font-size: 0.625rem; }
+.zmz-edit-body { overflow: hidden; padding: 0 0.6rem 0.6rem; }
+.zmz-chevron { transition: transform 0.15s var(--ease-out); }
+.zmz-chevron.open { transform: rotate(180deg); }

package/src/components/edit-card/index.ts

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

package/src/components/index.ts

@@ -49,6 +49,11 @@ export * from "./multi-step-loader";
 export * from "./timeline";
 
 // === Business (agent workflow) ===
+export * from "./message";
+export * from "./reasoning";
+export * from "./artifact-card";
+export * from "./edit-card";
+export * from "./markdown";
 export * from "./markdown";
 export * from "./diff-view";
 export * from "./tool-card";

package/src/components/message/Message.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { type ReactNode } from "react";
+import { motion } from "framer-motion";
+
+import { Badge } from "../../components/badge";
+import "./message.css";
+
+export interface MessageItemProps {
+  /** 发送方角色：决定头像配色与气泡方向 */
+  role: "user" | "assistant";
+  /** 头像字（单字，如 "你"/"使"）或名字首字 */
+  avatar: string;
+  /** 显示名（meta 行） */
+  name: string;
+  /** 右侧状态（assistant 执行中/已完成） */
+  status?: { active: boolean };
+  /** 时间标签（HH:MM） */
+  time?: string | null;
+  /** 消息体（文本/执行树/工具组等任意内容） */
+  children: ReactNode;
+  /** 关闭入场动画（流式追加频繁时防闪） */
+  noMotion?: boolean;
+}
+
+/**
+ * MessageItem — 消息行：头像 + 名字/状态/时间 meta + 内容体。
+ *
+ * user 气泡为描边卡片，assistant 为开放排版（适合挂执行树）。
+ * 默认 framer-motion 淡入上移入场（流式追加传 noMotion 关闭）。
+ *
+ * @example
+ * <MessageItem role="assistant" avatar="使" name="Agent" status={{ active: true }}>
+ *   <Markdown text={reply} />
+ * </MessageItem>
+ */
+export function MessageItem({ role, avatar, name, status, time, children, noMotion }: MessageItemProps) {
+  const body = (
+    <>
+      <span className={`zmz-message-avatar ${role === "assistant" ? "assistant" : ""}`}>{avatar}</span>
+      <div className="zmz-message-column">
+        <div className="zmz-message-meta">
+          <strong>{name}</strong>
+          {status && <Badge variant={status.active ? "accent" : "success"} size="sm">{status.active ? "执行中" : "已完成"}</Badge>}
+          {time && <span className="zmz-message-time">{time}</span>}
+        </div>
+        {children}
+      </div>
+    </>
+  );
+  if (noMotion) return <div className={`zmz-message ${role}`}>{body}</div>;
+  return (
+    <motion.div
+      className={`zmz-message ${role}`}
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.25, ease: [0.16, 1, 0.3, 1] }}
+    >
+      {body}
+    </motion.div>
+  );
+}
+
+/**
+ * MessageStream — 消息流容器：统一行距 + 滚动区。
+ *
+ * @example
+ * <MessageStream scrollRef={ref}>{messages.map(...)}</MessageStream>
+ */
+export function MessageStream({ children, scrollRef, className }: { children: ReactNode; scrollRef?: React.Ref<HTMLDivElement>; className?: string }) {
+  return (
+    <div ref={scrollRef} className={`zmz-message-stream ${className ?? ""}`}>
+      {children}
+    </div>
+  );
+}

package/src/components/message/index.ts

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

package/src/components/message/message.css

@@ -0,0 +1,11 @@
+/* Message — 消息流。token 依赖消费端 @theme。 */
+.zmz-message { display: flex; gap: 0.55rem; }
+.zmz-message-avatar { display: grid; width: 1.5rem; height: 1.5rem; flex: 0 0 1.5rem; place-items: center; border-radius: 50%; background: var(--color-surface-strong); color: var(--color-accent-strong); font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; }
+.zmz-message-avatar.assistant { background: var(--color-accent); color: var(--color-accent-ink); }
+.zmz-message-column { display: grid; min-width: 0; flex: 1; gap: 0.55rem; }
+.zmz-message-meta { display: flex; align-items: baseline; gap: 0.55rem; min-height: 1.5rem; }
+.zmz-message-meta strong { font-size: 0.75rem; font-weight: 700; color: var(--color-ink); }
+.zmz-message-time { margin-left: auto; color: var(--color-muted); font-family: var(--font-mono); font-size: 0.6rem; }
+.zmz-message-content { min-width: 0; color: var(--color-ink); font-size: 0.875rem; line-height: 1.65; overflow-wrap: anywhere; }
+.zmz-message.user .zmz-message-content { padding: 0.65rem 0.8rem; border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); }
+.zmz-message-stream { display: grid; gap: 0.9rem; align-content: start; overflow-y: auto; min-height: 0; }

package/src/components/reasoning/Reasoning.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+
+import { Icon } from "../../components/icon/Icon";
+import "./reasoning.css";
+
+/**
+ * Reasoning — 思考过程折叠块。
+ *
+ * 运行中自动展开（呼吸圆点），完成后收起为标签行，点击回看。
+ * 展开内容渐显（AnimatePresence）。
+ *
+ * @example
+ * <Reasoning text={chainOfThought} active={isStreaming} />
+ */
+export function Reasoning({ text, active = false }: { text: string; active?: boolean }) {
+  const [open, setOpen] = useState(false);
+  const expanded = active || open;
+  return (
+    <div className="zmz-reasoning">
+      <button type="button" className="zmz-reasoning-toggle" aria-expanded={expanded} onClick={() => setOpen((value) => !value)}>
+        <span className={`zmz-reasoning-dot ${active ? "live" : ""}`} aria-hidden />
+        <span>思考过程</span>
+        <Icon name="chevron-down" size={11} className={expanded ? "zmz-chevron open" : "zmz-chevron"} />
+      </button>
+      <AnimatePresence initial={false}>
+        {expanded && (
+          <motion.pre
+            className="zmz-reasoning-body"
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: "auto" }}
+            exit={{ opacity: 0, height: 0 }}
+            transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+          >
+            {text}
+          </motion.pre>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

package/src/components/reasoning/index.ts

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

package/src/components/reasoning/reasoning.css

@@ -0,0 +1,10 @@
+/* Reasoning — 思考过程折叠。token 依赖消费端 @theme。 */
+@keyframes zmz-reasoning-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.75); } }
+
+.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-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; }