@zmzai/theme 0.4.0 → 0.5.0

package/src/components/landing/landing.css

@@ -0,0 +1,432 @@
+/* @zmzai/theme — Landing kit
+   open-design.ai 风格落地页组件样式。
+   依赖消费端 @theme token：--color-paper/ink/ink-2/muted/line/accent/accent-ink/
+   surface/radius-*/ease-out/ease-out-expo/font-mono/font-serif。 */
+
+/* ── Capsule buttons（solid/outline 胶囊按钮） ── */
+.btn-outline {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  border: 1.5px solid var(--color-ink);
+  border-radius: var(--radius-pill);
+  font-size: 0.9375rem;
+  font-weight: 500;
+  color: var(--color-ink);
+  background: transparent;
+  cursor: pointer;
+  transition: all 200ms var(--ease-out);
+}
+
+.btn-outline:hover {
+  background: var(--color-ink);
+  color: var(--color-paper);
+}
+
+.btn-solid {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  border: 1.5px solid var(--color-ink);
+  border-radius: var(--radius-pill);
+  font-size: 0.9375rem;
+  font-weight: 500;
+  color: var(--color-paper);
+  background: var(--color-ink);
+  cursor: pointer;
+  transition: all 200ms var(--ease-out);
+}
+
+.btn-solid:hover {
+  background: oklch(0.30 0.010 30);
+  border-color: oklch(0.30 0.010 30);
+}
+
+/* Arrow slide on hover（按钮/链接内的 → 箭头位移） */
+.arrow-slide {
+  display: inline-block;
+  transition: transform var(--animate-dur-base, 250ms) var(--ease-out-expo);
+}
+
+.group:hover .arrow-slide,
+.landing-btn:hover .arrow-slide {
+  transform: translateX(4px);
+}
+
+/* ── Tab pills（胶囊标签栏） ── */
+.tab-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border-radius: var(--radius-pill);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  border: 1px solid var(--color-line);
+  background: var(--color-paper);
+  color: var(--color-muted);
+  cursor: pointer;
+  transition: all 200ms var(--ease-out);
+}
+
+.tab-pill:hover {
+  border-color: var(--color-muted);
+  color: var(--color-ink);
+}
+
+.tab-pill.active {
+  background: var(--color-ink);
+  color: var(--color-paper);
+  border-color: var(--color-ink);
+}
+
+/* ── Step sidebar（工作流步骤条） ── */
+.step-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-radius: var(--radius-pill);
+  font-size: 0.875rem;
+  color: var(--color-muted);
+  cursor: pointer;
+  transition: all 200ms var(--ease-out);
+  margin-bottom: 0.25rem;
+}
+
+.step-item:hover {
+  color: var(--color-ink);
+  background: var(--color-surface);
+}
+
+.step-item.active {
+  background: var(--color-ink);
+  color: var(--color-paper);
+}
+
+.step-num {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 600;
+  width: 1.5rem;
+  text-align: center;
+}
+
+/* ── Product card（产品卡片，hover 上浮） ── */
+.product-card {
+  border: 1px solid var(--color-line);
+  background: var(--color-paper);
+  transition: transform 300ms var(--ease-out-expo),
+              box-shadow 300ms var(--ease-out-expo),
+              border-color 300ms var(--ease-out);
+}
+
+.product-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 16px 48px -12px oklch(0.18 0.011 40 / 0.12);
+  border-color: var(--color-muted);
+}
+
+/* ── Stat value（大字统计数字） ── */
+.stat-value {
+  font-family: var(--font-serif);
+  font-size: 2.5rem;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: -0.03em;
+}
+
+/* Count-up number */
+.count-num {
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── FAQ accordion ── */
+.faq-item {
+  border-bottom: 1px solid var(--color-line);
+}
+
+.faq-question {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 1.25rem 0;
+  font-size: 1rem;
+  font-weight: 600;
+  text-align: left;
+  cursor: pointer;
+  background: none;
+  border: none;
+  color: var(--color-ink);
+  transition: color 200ms var(--ease-out);
+}
+
+.faq-question:hover {
+  color: var(--color-accent);
+}
+
+.faq-icon {
+  font-size: 1.25rem;
+  transition: transform 300ms var(--ease-out);
+  color: var(--color-muted);
+}
+
+.faq-item.open .faq-icon {
+  transform: rotate(45deg);
+}
+
+.faq-answer {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 400ms var(--ease-out-expo),
+              padding 400ms var(--ease-out-expo);
+}
+
+.faq-item.open .faq-answer {
+  max-height: 200px;
+  padding-bottom: 1.25rem;
+}
+
+/* ── Workflow screenshot frame ── */
+.workflow-frame {
+  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);
+  position: relative;
+}
+
+.workflow-frame-inner {
+  background: var(--color-surface);
+  padding: 1.5rem;
+}
+
+/* Step badge — floats over workflow frame */
+.step-badge {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  z-index: 2;
+  padding: 0.25rem 0.75rem;
+  border-radius: var(--radius-pill);
+  background: var(--color-accent);
+  color: var(--color-accent-ink);
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+/* ── Pipeline breadcrumb（想法 → relay → … → 交付） ── */
+.pipeline {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.pipeline-node {
+  padding: 0.375rem 0.875rem;
+  border-radius: var(--radius-pill);
+  border: 1px solid var(--color-line);
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--color-muted);
+  background: var(--color-paper);
+  transition: all 200ms var(--ease-out);
+  white-space: nowrap;
+}
+
+.pipeline-node.current {
+  border-color: var(--color-accent);
+  background: var(--color-accent);
+  color: var(--color-accent-ink);
+  font-weight: 600;
+}
+
+.pipeline-arrow {
+  color: var(--color-line);
+  font-size: 0.75rem;
+  user-select: none;
+}
+
+/* ── Narrative paragraph（行高 2 的叙事段落，b 关键词加深） ── */
+.narrative {
+  font-size: 1.0625rem;
+  line-height: 2;
+  color: var(--color-ink-2);
+}
+
+.narrative b {
+  color: var(--color-ink);
+  font-weight: 600;
+}
+
+/* ── Why feature cards（dark 变体：一暗多亮） ── */
+.why-card {
+  border: 1px solid var(--color-line);
+  background: var(--color-surface);
+  padding: 1.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  transition: transform 300ms var(--ease-out-expo),
+              border-color 300ms var(--ease-out);
+}
+
+.why-card:hover {
+  transform: translateY(-3px);
+  border-color: var(--color-muted);
+}
+
+.why-card.dark {
+  background: var(--color-ink);
+  color: var(--color-paper);
+  border-color: var(--color-ink);
+}
+
+.why-card-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-line);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-accent);
+}
+
+.why-card.dark .why-card-icon {
+  border-color: oklch(1 0 0 / 0.2);
+}
+
+/* ── Integration chips ── */
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--color-line);
+  border-radius: var(--radius-pill);
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  color: var(--color-ink-2);
+  background: var(--color-paper);
+  transition: all 200ms var(--ease-out);
+}
+
+.chip:hover {
+  border-color: var(--color-accent);
+  color: var(--color-ink);
+}
+
+.chip-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--color-accent);
+  flex-shrink: 0;
+}
+
+/* ── Checklist — 绿色勾选行 ── */
+.check-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.875rem 0;
+  border-bottom: 1px solid var(--color-line);
+  font-size: 0.9375rem;
+}
+
+.check-row:last-child {
+  border-bottom: none;
+}
+
+.check-mark {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--color-accent);
+  color: var(--color-accent-ink);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  margin-top: 1px;
+}
+
+/* ── Status badge（live 脉冲 / building 流光 / planned 虚线） ── */
+.status-pulse {
+  position: relative;
+}
+
+.status-pulse::after {
+  content: "";
+  position: absolute;
+  inset: -3px;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0;
+  animation: landingStatusPulse 2s ease-out infinite;
+}
+
+@keyframes landingStatusPulse {
+  0% { opacity: 0.5; transform: scale(0.8); }
+  100% { opacity: 0; transform: scale(2.2); }
+}
+
+.status-progress {
+  overflow: hidden;
+  border-radius: 9999px;
+}
+
+.status-progress::after {
+  content: "";
+  display: block;
+  height: 100%;
+  width: 40%;
+  background: currentColor;
+  opacity: 0.5;
+  animation: landingStatusProgress 1.8s ease-in-out infinite;
+}
+
+@keyframes landingStatusProgress {
+  0% { transform: translateX(-120%); }
+  100% { transform: translateX(380%); }
+}
+
+.status-dashed {
+  border: 1.5px dashed currentColor;
+  border-radius: 50%;
+}
+
+/* ── Floating pill nav — 顶部全宽吸顶，滚动后收缩为浮动胶囊 ── */
+.nav-shell {
+  position: sticky;
+  top: 0;
+  z-index: 40;
+  transition: padding 300ms var(--ease-out);
+}
+
+.nav-shell .site-nav {
+  transition: border-radius 300ms var(--ease-out),
+              box-shadow 300ms var(--ease-out),
+              border-color 300ms var(--ease-out);
+}
+
+.nav-shell.floating {
+  padding: 10px 12px;
+}
+
+.nav-shell.floating .site-nav {
+  border-radius: var(--radius-pill);
+  border-color: transparent;
+  box-shadow: 0 8px 32px -8px oklch(0.15 0.010 30 / 0.18),
+              0 1px 3px oklch(0.15 0.010 30 / 0.06);
+}

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