@zmzai/theme 0.1.0

package/src/components/magnetic-button/MagneticButton.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { useRef, type MouseEvent, type ReactNode } from "react";
+import {
+  motion,
+  useMotionValue,
+  useSpring,
+  type HTMLMotionProps,
+} from "framer-motion";
+import { cn } from "../../utils/cn";
+
+export interface MagneticButtonProps
+  extends Omit<HTMLMotionProps<"button">, "ref" | "children"> {
+  children?: ReactNode;
+  /** How strongly the button drifts toward the cursor (default 0.3 = 30%) */
+  magnetism?: number;
+}
+
+/**
+ * MagneticButton — a button that subtly drifts toward the cursor.
+ *
+ * Uses framer-motion `useMotionValue` + `useSpring` to translate the
+ * button toward the mouse position by a fraction of the distance, then
+ * springs back to center on mouse leave. Pure micro-interaction, no
+ * layout shift.
+ *
+ * @example
+ * <MagneticButton className="rounded-full bg-ink px-6 py-3 text-white">
+ *   立即开始
+ * </MagneticButton>
+ */
+export function MagneticButton({
+  children,
+  className,
+  magnetism = 0.3,
+  onMouseMove,
+  onMouseLeave,
+  ...props
+}: MagneticButtonProps) {
+  const ref = useRef<HTMLButtonElement>(null);
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+
+  const springX = useSpring(x, { stiffness: 200, damping: 15 });
+  const springY = useSpring(y, { stiffness: 200, damping: 15 });
+
+  function handleMouseMove(e: MouseEvent<HTMLButtonElement>) {
+    const el = ref.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const relX = e.clientX - (rect.left + rect.width / 2);
+    const relY = e.clientY - (rect.top + rect.height / 2);
+    x.set(relX * magnetism);
+    y.set(relY * magnetism);
+    onMouseMove?.(e);
+  }
+
+  function handleMouseLeave(e: MouseEvent<HTMLButtonElement>) {
+    x.set(0);
+    y.set(0);
+    onMouseLeave?.(e);
+  }
+
+  return (
+    <motion.button
+      ref={ref}
+      onMouseMove={handleMouseMove}
+      onMouseLeave={handleMouseLeave}
+      style={{ x: springX, y: springY }}
+      className={cn(
+        "relative inline-flex cursor-pointer items-center justify-center rounded-full bg-ink px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-ink/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </motion.button>
+  );
+}

package/src/components/magnetic-button/index.ts

@@ -0,0 +1,2 @@
+export { MagneticButton } from "./MagneticButton";
+export type { MagneticButtonProps } from "./MagneticButton";

package/src/components/moving-border/MovingBorder.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { type ReactNode } from "react";
+import { cn } from "../../utils/cn";
+
+export interface MovingBorderProps {
+  children: ReactNode;
+  className?: string;
+  /** Border rotation duration in seconds (default 5) */
+  duration?: number;
+  /** Border color (default accent blue) */
+  borderColor?: string;
+  /** Inner background color (default bg) */
+  backgroundColor?: string;
+  /** Border radius (default rounded-xl = 12px) */
+  borderRadius?: string;
+}
+
+/**
+ * MovingBorder — container with rotating conic-gradient border beam.
+ *
+ * Uses CSS `@property --angle` for a smooth rotating light beam around
+ * the border. Based on Aceternity's Moving Border, adapted to zmzai's
+ * blue accent. Only the border moves — inner content stays static.
+ *
+ * @example
+ * <MovingBorder duration={5}>
+ *   <input placeholder="聚焦看边框光束…" />
+ * </MovingBorder>
+ */
+export function MovingBorder({
+  children,
+  className,
+  duration = 5,
+  borderColor = "var(--color-accent)",
+  backgroundColor = "var(--color-bg)",
+  borderRadius = "12px",
+}: MovingBorderProps) {
+  return (
+    <>
+      {/* @property must be in global scope — inject once */}
+      <style>{`
+        @property --mb-angle {
+          syntax: '<angle>';
+          initial-value: 0deg;
+          inherits: false;
+        }
+        @keyframes mb-rotate { to { --mb-angle: 360deg; } }
+      `}</style>
+
+      <div
+        className={cn("relative", className)}
+        style={{
+          borderRadius,
+          padding: "1px",
+          background: `conic-gradient(from var(--mb-angle), transparent 0%, transparent 60%, ${borderColor} 80%, transparent 95%)`,
+          animation: `mb-rotate ${duration}s linear infinite`,
+        }}
+      >
+        <div
+          className="relative h-full w-full"
+          style={{
+            borderRadius: `calc(${borderRadius} - 1px)`,
+            background: backgroundColor,
+          }}
+        >
+          {children}
+        </div>
+      </div>
+    </>
+  );
+}

package/src/components/moving-border/index.ts

@@ -0,0 +1,2 @@
+export { MovingBorder } from "./MovingBorder";
+export type { MovingBorderProps } from "./MovingBorder";

package/src/components/multi-step-loader/MultiStepLoader.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { motion, AnimatePresence } from "framer-motion";
+import { cn } from "../../utils/cn";
+
+export interface MultiStepLoaderStep {
+  /** Display text for this step */
+  text: string;
+}
+
+export interface MultiStepLoaderProps {
+  /** Steps to display. Each shows sequentially. */
+  steps: MultiStepLoaderStep[];
+  /** Currently active step index (0-based). Steps before are completed. */
+  currentIndex: number;
+  className?: string;
+}
+
+/**
+ * MultiStepLoader — sequential step loader for long-running tasks.
+ *
+ * Each step has 3 states: completed (checkmark), active (spinner), pending (dot).
+ * Perfect for Agent task execution feedback.
+ *
+ * @example
+ * const steps = [{ text: "分析需求" }, { text: "生成代码" }, { text: "运行测试" }];
+ * <MultiStepLoader steps={steps} currentIndex={1} />
+ */
+export function MultiStepLoader({
+  steps,
+  currentIndex,
+  className,
+}: MultiStepLoaderProps) {
+  return (
+    <div className={cn("flex flex-col gap-3", className)}>
+      {steps.map((step, index) => {
+        const isCompleted = index < currentIndex;
+        const isActive = index === currentIndex;
+        const isPending = index > currentIndex;
+
+        return (
+          <div key={index} className="flex items-center gap-3">
+            {/* Status indicator */}
+            <div className="flex h-5 w-5 flex-shrink-0 items-center justify-center">
+              {isCompleted && (
+                <motion.div
+                  initial={{ scale: 0 }}
+                  animate={{ scale: 1 }}
+                  transition={{ type: "spring", stiffness: 400, damping: 25 }}
+                  className="flex h-5 w-5 items-center justify-center rounded-full bg-ink"
+                >
+                  <svg className="h-3 w-3 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
+                    <polyline points="20 6 9 17 4 12" />
+                  </svg>
+                </motion.div>
+              )}
+              {isActive && (
+                <svg className="h-5 w-5 animate-spin text-accent" viewBox="0 0 24 24" fill="none">
+                  <circle className="opacity-20" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" />
+                  <path className="opacity-90" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                </svg>
+              )}
+              {isPending && (
+                <div className="h-2 w-2 rounded-full border border-line" />
+              )}
+            </div>
+
+            {/* Text */}
+            <AnimatePresence mode="wait">
+              <motion.span
+                key={`${index}-${isCompleted}-${isActive}`}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ duration: 0.2 }}
+                className={cn(
+                  "text-sm transition-colors",
+                  isCompleted && "text-ink-3 line-through",
+                  isActive && "font-medium text-ink",
+                  isPending && "text-ink-3"
+                )}
+              >
+                {step.text}
+              </motion.span>
+            </AnimatePresence>
+
+            {/* Step number */}
+            <span className="ml-auto font-mono text-xs text-ink-3">
+              {String(index + 1).padStart(2, "0")}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/multi-step-loader/index.ts

@@ -0,0 +1,2 @@
+export { MultiStepLoader } from "./MultiStepLoader";
+export type { MultiStepLoaderProps, MultiStepLoaderStep } from "./MultiStepLoader";

package/src/components/notch/Notch.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { type ReactNode } from "react";
+import { AnimatePresence, motion, type HTMLMotionProps } from "framer-motion";
+import { cn } from "../../utils/cn";
+
+export interface NotchProps extends Omit<HTMLMotionProps<"div">, "ref"> {
+  /** Notification content */
+  children?: ReactNode;
+  /** Whether the notch is visible */
+  visible?: boolean;
+}
+
+/**
+ * Notch — a floating notification bar pinned to the top center.
+ *
+ * Inspired by the macOS Dynamic Island: a pill that slides down from the
+ * top of the viewport when `visible` becomes true and slides up on hide.
+ * Rendered in a fixed overlay so it floats above page content.
+ *
+ * @example
+ * const [open, setOpen] = useState(true)
+ * <Notch visible={open} onClose={() => setOpen(false)}>新消息</Notch>
+ */
+export function Notch({ children, visible = false, className, ...props }: NotchProps) {
+  return (
+    <div className="pointer-events-none fixed inset-x-0 top-0 z-50 flex justify-center">
+      <AnimatePresence>
+        {visible && (
+          <motion.div
+            initial={{ y: -60, opacity: 0 }}
+            animate={{ y: 24, opacity: 1 }}
+            exit={{ y: -60, opacity: 0 }}
+            transition={{ duration: 0.35, ease: [0.16, 1, 0.3, 1] }}
+            className={cn(
+              "pointer-events-auto flex items-center gap-2 rounded-full border border-line bg-ink px-4 py-2 text-sm text-white shadow-lg",
+              className
+            )}
+            {...props}
+          >
+            {children}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

package/src/components/notch/index.ts

@@ -0,0 +1,2 @@
+export { Notch } from "./Notch";
+export type { NotchProps } from "./Notch";

package/src/components/select/Select.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { type ReactNode } from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { cn } from "../../utils/cn";
+
+export const Select = SelectPrimitive.Root;
+export const SelectGroup = SelectPrimitive.Group;
+export const SelectValue = SelectPrimitive.Value;
+
+export function SelectTrigger({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      className={cn(
+        "inline-flex h-9 items-center justify-between gap-2 rounded-lg border border-line bg-bg px-3 py-2 text-sm font-medium text-ink outline-none transition-colors",
+        "hover:border-ink/40 focus:border-ink data-[placeholder]:text-ink-3",
+        className
+      )}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+          <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+export function SelectContent({
+  children,
+  className,
+  position = "popper",
+}: {
+  children: ReactNode;
+  className?: string;
+  position?: "popper" | "item-aligned";
+}) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        position={position}
+        sideOffset={4}
+        className={cn(
+          "z-50 min-w-[8rem] overflow-hidden rounded-lg border border-line bg-bg p-1 shadow-lg",
+          "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          className
+        )}
+      >
+        <SelectPrimitive.Viewport className="w-full">{children}</SelectPrimitive.Viewport>
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+export function SelectItem({
+  children,
+  value,
+  className,
+}: {
+  children: ReactNode;
+  value: string;
+  className?: string;
+}) {
+  return (
+    <SelectPrimitive.Item
+      value={value}
+      className={cn(
+        "relative flex cursor-pointer select-none items-center rounded-md py-1.5 pl-7 pr-2 text-sm outline-none transition-colors",
+        "focus:bg-surface-2 focus:text-ink data-[state=checked]:font-semibold data-[highlighted]:bg-surface-2",
+        "data-[state=unchecked]:text-ink-2",
+        className
+      )}
+    >
+      <SelectPrimitive.ItemIndicator className="absolute left-2">
+        <svg 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>
+      </SelectPrimitive.ItemIndicator>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+export function SelectLabel({ children }: { children: ReactNode }) {
+  return (
+    <div className="px-2 py-1.5 text-xs font-semibold text-ink-3">{children}</div>
+  );
+}
+
+export function SelectSeparator() {
+  return <div className="my-1 h-px bg-line" />;
+}

package/src/components/select/index.ts

@@ -0,0 +1,10 @@
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+} from "./Select";

package/src/components/skeleton/Skeleton.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { forwardRef, type HTMLAttributes } from "react";
+import { cn } from "../../utils/cn";
+
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {}
+
+/**
+ * Skeleton — a shimmering placeholder block.
+ *
+ * Renders a neutral block sized by `className` (width/height/radius) with
+ * a subtle pulse animation between `bg-surface-2` and `bg-surface`.
+ *
+ * @example
+ * <Skeleton className="h-4 w-48 rounded-md" />
+ * <Skeleton className="h-32 w-full rounded-xl" />
+ */
+export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        aria-hidden="true"
+        className={cn(
+          "animate-pulse rounded-md bg-surface-2",
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
+Skeleton.displayName = "Skeleton";

package/src/components/skeleton/index.ts

@@ -0,0 +1,2 @@
+export { Skeleton } from "./Skeleton";
+export type { SkeletonProps } from "./Skeleton";

package/src/components/stateful-button/StatefulButton.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { cn } from "../../utils/cn";
+import { buttonVariants, type ButtonVariant, type ButtonSize } from "../button/button.styles";
+
+export interface StatefulButtonProps {
+  children: ReactNode;
+  /** Async function called on click. Button shows loading then success. */
+  onClick?: () => Promise<void> | void;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  className?: string;
+  /** Success message shown briefly after completion (default "完成") */
+  successText?: string;
+  /** Duration of success state before resetting (default 1500ms) */
+  successDuration?: number;
+  disabled?: boolean;
+}
+
+type State = "idle" | "loading" | "success";
+
+/**
+ * StatefulButton — auto-manages idle → loading → success lifecycle.
+ *
+ * Wrap any async action: the button shows a spinner during execution,
+ * then briefly displays a checkmark + success text before resetting.
+ * Built on zmzai Button variants + framer-motion state transitions.
+ *
+ * @example
+ * <StatefulButton onClick={async () => { await deploy(); }}>
+ *   部署
+ * </StatefulButton>
+ */
+export function StatefulButton({
+  children,
+  onClick,
+  variant = "primary",
+  size = "md",
+  className,
+  successText = "完成",
+  successDuration = 1500,
+  disabled,
+}: StatefulButtonProps) {
+  const [state, setState] = useState<State>("idle");
+
+  const handleClick = async () => {
+    if (state !== "idle" || disabled) return;
+    setState("loading");
+    try {
+      await onClick?.();
+      setState("success");
+      setTimeout(() => setState("idle"), successDuration);
+    } catch {
+      setState("idle");
+    }
+  };
+
+  return (
+    <motion.button
+      onClick={handleClick}
+      disabled={disabled || state === "loading"}
+      whileHover={disabled || state !== "idle" ? undefined : { scale: 1.03 }}
+      whileTap={disabled || state !== "idle" ? undefined : { scale: 0.98 }}
+      transition={{ duration: 0.15, ease: [0.16, 1, 0.3, 1] }}
+      className={cn(buttonVariants({ variant, size }), "overflow-hidden", className)}
+    >
+      <AnimatePresence mode="wait" initial={false}>
+        {state === "loading" && (
+          <motion.span
+            key="loading"
+            initial={{ opacity: 0, y: 8 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -8 }}
+            transition={{ duration: 0.15 }}
+            className="flex items-center gap-2"
+          >
+            <svg className="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" />
+              <path className="opacity-90" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+            处理中…
+          </motion.span>
+        )}
+        {state === "success" && (
+          <motion.span
+            key="success"
+            initial={{ opacity: 0, y: 8 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -8 }}
+            transition={{ duration: 0.15 }}
+            className="flex items-center gap-2"
+          >
+            <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
+              <polyline points="20 6 9 17 4 12" />
+            </svg>
+            {successText}
+          </motion.span>
+        )}
+        {state === "idle" && (
+          <motion.span
+            key="idle"
+            initial={{ opacity: 0, y: 8 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -8 }}
+            transition={{ duration: 0.15 }}
+          >
+            {children}
+          </motion.span>
+        )}
+      </AnimatePresence>
+    </motion.button>
+  );
+}

package/src/components/stateful-button/index.ts

@@ -0,0 +1,2 @@
+export { StatefulButton } from "./StatefulButton";
+export type { StatefulButtonProps } from "./StatefulButton";

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

@@ -0,0 +1,74 @@
+"use client";
+
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+import { cn } from "../../utils/cn";
+
+export type BannerVariant = "info" | "warning" | "danger";
+
+export interface StickyBannerProps extends HTMLAttributes<HTMLDivElement> {
+  /** Banner content */
+  children?: ReactNode;
+  /** Visual severity */
+  variant?: BannerVariant;
+  /** Called when the X button is clicked */
+  onDismiss?: () => void;
+}
+
+const variantStyles: Record<BannerVariant, string> = {
+  info: "bg-surface text-ink border-line",
+  warning: "bg-ink text-white border-ink",
+  danger: "bg-bg text-ink border-ink border-2",
+};
+
+/**
+ * StickyBanner — a dismissible banner that sticks to the top.
+ *
+ * Renders a full-width bar pinned to the top of the viewport with an
+ * X button. Use `variant` to convey severity. Stays in place on scroll.
+ *
+ * @example
+ * <StickyBanner variant="warning" onDismiss={() => setGone(true)}>
+ *   系统将于今晚维护
+ * </StickyBanner>
+ */
+export const StickyBanner = forwardRef<HTMLDivElement, StickyBannerProps>(
+  ({ children, variant = "info", onDismiss, className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        role="banner"
+        className={cn(
+          "sticky top-0 z-40 flex w-full items-center justify-between gap-3 border-b px-4 py-2.5 text-sm",
+          variantStyles[variant],
+          className
+        )}
+        {...props}
+      >
+        <div className="flex-1">{children}</div>
+        {onDismiss && (
+          <button
+            type="button"
+            aria-label="dismiss"
+            onClick={onDismiss}
+            className="shrink-0 rounded-md p-1 text-current opacity-60 transition-opacity hover:opacity-100"
+          >
+            <svg
+              className="h-4 w-4"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+
+StickyBanner.displayName = "StickyBanner";

package/src/components/sticky-banner/index.ts

@@ -0,0 +1,2 @@
+export { StickyBanner } from "./StickyBanner";
+export type { StickyBannerProps, BannerVariant } from "./StickyBanner";