@zmzai/theme 0.3.1 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zmzai/theme",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "private": false,
   "type": "module",
   "description": "zmzai 全品牌设计系统 — Radix UI + framer-motion + Tailwind v4 + MiSans",
@@ -76,9 +76,9 @@
     "@radix-ui/react-select": "^2.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.0",
+    "@tailwindcss/vite": "^4.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
-    "@tailwindcss/vite": "^4.0.0",
     "@vitejs/plugin-react": "^4.3.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
@@ -91,17 +91,18 @@
     "vite": "^5.4.0"
   },
   "dependencies": {
-    "clsx": "^2.1.0",
-    "tailwind-merge": "^2.5.0",
     "@radix-ui/react-dialog": "^1.1.0",
     "@radix-ui/react-dropdown-menu": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.23",
     "@radix-ui/react-select": "^2.1.0",
     "@radix-ui/react-tooltip": "^1.1.0",
     "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
     "framer-motion": "^11.0.0",
+    "highlight.js": "^11.11.1",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
-    "highlight.js": "^11.11.1"
+    "tailwind-merge": "^2.5.0"
   },
   "packageManager": "pnpm@10.34.5+sha512.a4ee05f2f73658255bd6a89859c065a45c28a57daefae2c893a168ee2b73168c37b91e83e57ea67654ad03f03031746430e8bce38e362e042605fb8abc80192e"
 }

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";
@@ -80,3 +85,4 @@ export * from "./loader";
 export * from "./skeleton";
 export * from "./empty-state";
 export * from "./carousel";
+export * from "./model-selector";

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/model-selector/ModelSelector.tsx

@@ -0,0 +1,282 @@
+"use client";
+
+import { useState, useRef, useEffect, type ReactNode } from "react";
+import * as Popover from "@radix-ui/react-popover";
+import { cn } from "../../utils/cn";
+import type {
+  ModelSelectorData,
+  ModelSelectorValue,
+  ModelSelectorModel,
+  ModelSelectorChannel,
+} from "./types";
+import "./model-selector.css";
+
+export interface ModelSelectorProps {
+  /** 完整数据（featured + channels） */
+  data: ModelSelectorData;
+  /** 当前选中值 */
+  value: ModelSelectorValue;
+  /** 选中回调 */
+  onChange: (value: ModelSelectorValue) => void;
+  /** 触发器占位文案 */
+  placeholder?: string;
+  /** 是否显示搜索框 */
+  searchable?: boolean;
+  /** 自定义类名（作用于触发器） */
+  className?: string;
+}
+
+/** 在全部模型中查找当前选中模型，返回 {channel, model} 用于触发器显示。 */
+function findSelectedModel(
+  data: ModelSelectorData,
+  value: ModelSelectorValue,
+): { model: ModelSelectorModel | null; channel: ModelSelectorChannel | null } {
+  // 先在 featured 中找
+  const featured = data.featured.find((m) => m.id === value.model);
+  if (featured) return { model: featured, channel: null };
+  // 再在 channels 中找
+  for (const channel of data.channels) {
+    const model = channel.models.find((m) => m.id === value.model);
+    if (model) return { model, channel };
+  }
+  return { model: null, channel: null };
+}
+
+/** 过滤数据（按关键词）。 */
+function filterData(
+  data: ModelSelectorData,
+  query: string,
+): ModelSelectorData {
+  const q = query.trim().toLowerCase();
+  if (!q) return data;
+  const matchModel = (m: ModelSelectorModel) =>
+    m.name.toLowerCase().includes(q) ||
+    (m.description?.toLowerCase().includes(q) ?? false) ||
+    (m.channel?.toLowerCase().includes(q) ?? false);
+
+  const featured = data.featured.filter(matchModel);
+  const channels = data.channels
+    .map((ch) => ({ ...ch, models: ch.models.filter(matchModel) }))
+    .filter((ch) => ch.models.length > 0);
+  return { featured, channels };
+}
+
+export function ModelSelector({
+  data,
+  value,
+  onChange,
+  placeholder = "选择模型",
+  searchable = false,
+  className,
+}: ModelSelectorProps) {
+  const [open, setOpen] = useState(false);
+  const [expandedChannels, setExpandedChannels] = useState<Set<string>>(new Set());
+  const [search, setSearch] = useState("");
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  // 打开时聚焦搜索框
+  useEffect(() => {
+    if (open && searchable) {
+      // 等 Popover 渲染完再聚焦
+      const timer = setTimeout(() => searchRef.current?.focus(), 50);
+      return () => clearTimeout(timer);
+    }
+  }, [open, searchable]);
+
+  // 关闭时清理搜索
+  useEffect(() => {
+    if (!open) {
+      setSearch("");
+    }
+  }, [open]);
+
+  const { model: selectedModel, channel: selectedChannel } = findSelectedModel(data, value);
+  const filtered = filterData(data, search);
+
+  const hasResults = filtered.featured.length > 0 || filtered.channels.length > 0;
+
+  function toggleChannel(channelId: string) {
+    setExpandedChannels((prev) => {
+      const next = new Set(prev);
+      if (next.has(channelId)) next.delete(channelId);
+      else next.add(channelId);
+      return next;
+    });
+  }
+
+  function selectModel(model: ModelSelectorModel, channel?: ModelSelectorChannel) {
+    onChange({ channel: channel?.id ?? model.channel, model: model.id });
+    setOpen(false);
+  }
+
+  function isSelected(modelId: string): boolean {
+    return value.model === modelId;
+  }
+
+  const triggerLabel = selectedModel?.name ?? placeholder;
+
+  return (
+    <Popover.Root open={open} onOpenChange={setOpen}>
+      <Popover.Trigger asChild>
+        <button
+          type="button"
+          className={cn("ms-trigger", className)}
+          aria-label="选择模型"
+        >
+          <span className={cn(!selectedModel && "ms-trigger-placeholder")}>
+            {triggerLabel}
+          </span>
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            className={cn("ms-trigger-chevron", open && "ms-open")}
+          >
+            <path
+              d="M3 4.5L6 7.5L9 4.5"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </button>
+      </Popover.Trigger>
+
+      <Popover.Portal>
+        <Popover.Content
+          className="ms-popover"
+          sideOffset={4}
+          align="start"
+          onCloseAutoFocus={(e) => e.preventDefault()}
+        >
+          {searchable && (
+            <div className="ms-search">
+              <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="text-ink-3" aria-hidden>
+                <circle cx="7" cy="7" r="4.5" />
+                <path d="M10.5 10.5L13.5 13.5" />
+              </svg>
+              <input
+                ref={searchRef}
+                className="ms-search-input"
+                placeholder="搜索模型…"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Escape") {
+                    setSearch("");
+                    setOpen(false);
+                  }
+                }}
+              />
+            </div>
+          )}
+
+          {!hasResults ? (
+            <div className="ms-empty">没有找到匹配的模型</div>
+          ) : (
+            <div>
+              {/* Featured 区 */}
+              {filtered.featured.length > 0 && (
+                <div className="ms-featured">
+                  {filtered.featured.map((model) => (
+                    <button
+                      key={model.id}
+                      type="button"
+                      className={cn("ms-featured-item", isSelected(model.id) && "ms-selected")}
+                      onClick={() => selectModel(model)}
+                    >
+                      {model.icon && (
+                        <span className="ms-featured-icon">{model.icon}</span>
+                      )}
+                      <span className="ms-featured-body">
+                        <span className="ms-featured-name">{model.name}</span>
+                        {model.description && (
+                          <span className="ms-featured-desc">{model.description}</span>
+                        )}
+                      </span>
+                      {isSelected(model.id) && (
+                        <svg className="ms-featured-check" width="14" height="14" viewBox="0 0 14 14" fill="none">
+                          <path d="M3 7L6 10L11 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                        </svg>
+                      )}
+                    </button>
+                  ))}
+                </div>
+              )}
+
+              {/* 分隔线 */}
+              {filtered.featured.length > 0 && filtered.channels.length > 0 && (
+                <div className="ms-separator" />
+              )}
+
+              {/* 渠道分组区 */}
+              {filtered.channels.map((channel) => {
+                const isOpen = expandedChannels.has(channel.id);
+                return (
+                  <div key={channel.id} className="ms-channel">
+                    <button
+                      type="button"
+                      className="ms-channel-trigger"
+                      onClick={() => toggleChannel(channel.id)}
+                      aria-expanded={isOpen}
+                    >
+                      {channel.icon && (
+                        <span className="ms-channel-icon">{channel.icon}</span>
+                      )}
+                      <span>{channel.name}</span>
+                      <span className="ms-channel-count">({channel.models.length})</span>
+                      <svg
+                        width="12"
+                        height="12"
+                        viewBox="0 0 12 12"
+                        fill="none"
+                        className={cn("ms-channel-chevron", isOpen && "ms-open")}
+                      >
+                        <path
+                          d="M4.5 3L7.5 6L4.5 9"
+                          stroke="currentColor"
+                          strokeWidth="1.5"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        />
+                      </svg>
+                    </button>
+                    {isOpen && (
+                      <div className="ms-channel-models">
+                        {channel.models.map((model) => (
+                          <button
+                            key={model.id}
+                            type="button"
+                            className={cn("ms-model-item", isSelected(model.id) && "ms-selected")}
+                            onClick={() => selectModel(model, channel)}
+                          >
+                            {model.icon && (
+                              <span className="ms-model-icon">{model.icon}</span>
+                            )}
+                            <span className="ms-model-name">{model.name}</span>
+                            {model.meta && Object.values(model.meta).length > 0 && (
+                              <span className="ms-model-meta">
+                                {Object.values(model.meta).join(" · ")}
+                              </span>
+                            )}
+                            {isSelected(model.id) && (
+                              <svg className="ms-model-check" width="14" height="14" viewBox="0 0 14 14" fill="none">
+                                <path d="M3 7L6 10L11 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                              </svg>
+                            )}
+                          </button>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}

package/src/components/model-selector/index.ts

@@ -0,0 +1,8 @@
+export { ModelSelector } from "./ModelSelector";
+export type { ModelSelectorProps } from "./ModelSelector";
+export type {
+  ModelSelectorData,
+  ModelSelectorValue,
+  ModelSelectorModel,
+  ModelSelectorChannel,
+} from "./types";

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

@@ -0,0 +1,276 @@
+/* ModelSelector — 二级模型选择器样式 */
+
+.ms-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  height: 2.25rem;
+  padding: 0 0.75rem;
+  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));
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-ink, oklch(0.2 0.02 80));
+  cursor: pointer;
+  outline: none;
+  transition: border-color 0.15s ease;
+  min-width: 10rem;
+}
+
+.ms-trigger:hover {
+  border-color: oklch(0.4 0.02 80 / 0.4);
+}
+
+.ms-trigger:focus-visible {
+  border-color: var(--color-ink, oklch(0.2 0.02 80));
+}
+
+.ms-trigger-placeholder {
+  color: var(--color-ink-3, oklch(0.6 0.02 80));
+}
+
+.ms-trigger-chevron {
+  transition: transform 0.2s ease;
+}
+
+.ms-trigger-chevron.ms-open {
+  transform: rotate(180deg);
+}
+
+/* Popover content */
+.ms-popover {
+  z-index: 50;
+  min-width: 18rem;
+  max-height: 28rem;
+  overflow-y: auto;
+  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);
+  padding: 0.25rem;
+}
+
+.ms-popover:focus {
+  outline: none;
+}
+
+/* Search */
+.ms-search {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.5rem 0.25rem;
+  border-bottom: 1px solid var(--color-line, oklch(0.85 0.02 80));
+  margin-bottom: 0.25rem;
+}
+
+.ms-search-input {
+  flex: 1;
+  height: 1.75rem;
+  padding: 0 0.5rem;
+  border: 1px solid var(--color-line, oklch(0.85 0.02 80));
+  border-radius: var(--radius-sm, 2px);
+  background: var(--color-bg, oklch(0.97 0.01 80));
+  font-size: 0.8125rem;
+  color: var(--color-ink, oklch(0.2 0.02 80));
+  outline: none;
+}
+
+.ms-search-input::placeholder {
+  color: var(--color-ink-3, oklch(0.6 0.02 80));
+}
+
+.ms-search-input:focus {
+  border-color: var(--color-ink, oklch(0.2 0.02 80));
+}
+
+/* Featured section */
+.ms-featured {
+  padding: 0.25rem 0;
+}
+
+.ms-featured-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+  padding: 0.5rem 0.625rem;
+  border-radius: var(--radius-sm, 2px);
+  cursor: pointer;
+  transition: background 0.1s ease;
+  border: none;
+  background: none;
+  width: 100%;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+}
+
+.ms-featured-item:hover,
+.ms-featured-item:focus-visible {
+  background: var(--color-surface-2, oklch(0.93 0.01 80));
+  outline: none;
+}
+
+.ms-featured-item.ms-selected {
+  background: var(--color-surface-2, oklch(0.93 0.01 80));
+}
+
+.ms-featured-icon {
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+  display: flex;
+  align-items: center;
+}
+
+.ms-featured-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.ms-featured-name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-ink, oklch(0.2 0.02 80));
+  line-height: 1.3;
+}
+
+.ms-featured-desc {
+  margin-top: 0.125rem;
+  font-size: 0.75rem;
+  color: var(--color-ink-2, oklch(0.5 0.02 80));
+  line-height: 1.3;
+}
+
+.ms-featured-check {
+  flex-shrink: 0;
+  margin-top: 0.25rem;
+  color: var(--color-accent, oklch(0.45 0.18 25));
+}
+
+/* Separator */
+.ms-separator {
+  margin: 0.375rem 0.5rem;
+  height: 1px;
+  background: var(--color-line, oklch(0.85 0.02 80));
+}
+
+/* Channel group */
+.ms-channel {
+  padding: 0.125rem 0;
+}
+
+.ms-channel-trigger {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.4375rem 0.625rem;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--color-ink-2, oklch(0.5 0.02 80));
+  border-radius: var(--radius-sm, 2px);
+  transition: background 0.1s ease, color 0.1s ease;
+}
+
+.ms-channel-trigger:hover,
+.ms-channel-trigger:focus-visible {
+  background: var(--color-surface-2, oklch(0.93 0.01 80));
+  color: var(--color-ink, oklch(0.2 0.02 80));
+  outline: none;
+}
+
+.ms-channel-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.ms-channel-chevron {
+  margin-left: auto;
+  transition: transform 0.2s ease;
+  flex-shrink: 0;
+}
+
+.ms-channel-chevron.ms-open {
+  transform: rotate(90deg);
+}
+
+.ms-channel-count {
+  font-size: 0.6875rem;
+  color: var(--color-ink-3, oklch(0.6 0.02 80));
+  font-weight: 400;
+}
+
+/* Channel models list */
+.ms-channel-models {
+  padding: 0.125rem 0 0.25rem 0;
+}
+
+.ms-model-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.625rem 0.375rem 1.75rem;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.8125rem;
+  color: var(--color-ink-2, oklch(0.5 0.02 80));
+  border-radius: var(--radius-sm, 2px);
+  transition: background 0.1s ease;
+  width: 100%;
+  text-align: left;
+}
+
+.ms-model-item:hover,
+.ms-model-item:focus-visible {
+  background: var(--color-surface-2, oklch(0.93 0.01 80));
+  color: var(--color-ink, oklch(0.2 0.02 80));
+  outline: none;
+}
+
+.ms-model-item.ms-selected {
+  color: var(--color-ink, oklch(0.2 0.02 80));
+  font-weight: 500;
+}
+
+.ms-model-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.ms-model-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ms-model-check {
+  flex-shrink: 0;
+  color: var(--color-accent, oklch(0.45 0.18 25));
+}
+
+.ms-model-meta {
+  font-size: 0.6875rem;
+  color: var(--color-ink-3, oklch(0.6 0.02 80));
+  font-weight: 400;
+  flex-shrink: 0;
+}
+
+/* Empty state */
+.ms-empty {
+  padding: 1.5rem 1rem;
+  text-align: center;
+  font-size: 0.8125rem;
+  color: var(--color-ink-3, oklch(0.6 0.02 80));
+}

package/src/components/model-selector/types.ts

@@ -0,0 +1,43 @@
+import type { ReactNode } from "react";
+
+/** 单个模型条目。 */
+export interface ModelSelectorModel {
+  /** 唯一标识，如 "gpt-5.6-terra" */
+  id: string;
+  /** 显示名 */
+  name: string;
+  /** 一句话描述（用于 featured 区） */
+  description?: string;
+  /** 供应商图标（消费方传入） */
+  icon?: ReactNode;
+  /** 所属渠道名（用于分组显示） */
+  channel?: string;
+  /** 附加信息，如价格、上下文等 */
+  meta?: Record<string, string>;
+}
+
+/** 渠道分组。 */
+export interface ModelSelectorChannel {
+  /** 渠道 ID */
+  id: string;
+  /** 渠道名，如 "Azure OpenAI" */
+  name: string;
+  /** 渠道图标（消费方传入） */
+  icon?: ReactNode;
+  /** 该渠道下的模型 */
+  models: ModelSelectorModel[];
+}
+
+/** ModelSelector 完整数据。 */
+export interface ModelSelectorData {
+  /** 顶部推荐模型（带描述，直接展示不折叠） */
+  featured: ModelSelectorModel[];
+  /** 渠道分组列表 */
+  channels: ModelSelectorChannel[];
+}
+
+/** 选中值。 */
+export interface ModelSelectorValue {
+  channel?: string;
+  model: string;
+}

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; }