motion-ui-skill 2.0.0

package/components/agents/file-diff.tsx

@@ -0,0 +1,288 @@
+"use client";
+
+import {
+  Check,
+  ChevronDown,
+  Copy,
+  FileCode2,
+  LoaderCircle,
+} from "lucide-react";
+import { motion, useReducedMotion } from "motion/react";
+import {
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import {
+  type AgentCodeLanguage,
+  AgentCodeLine,
+  useAgentCodeTokens,
+} from "@/components/agents/agent-code";
+import { AgentDisclosure } from "@/components/agents/agent-disclosure";
+import { SPRING_PRESS, SPRING_SWAP } from "@/lib/ease";
+import { cn } from "@/lib/utils";
+
+export type FileDiffStatus = "streaming" | "complete";
+export type FileDiffLineType = "added" | "removed" | "context";
+
+export interface FileDiffLine {
+  id: string;
+  type?: FileDiffLineType;
+  oldLine?: number;
+  newLine?: number;
+  content: string;
+}
+
+export interface FileDiffProps {
+  file: ReactNode;
+  lines: FileDiffLine[];
+  status?: FileDiffStatus;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  collapseOnComplete?: boolean;
+  maxHeight?: number;
+  language?: AgentCodeLanguage;
+  copyText?: string;
+  onCopy?: () => void | Promise<void>;
+  className?: string;
+}
+
+function ChangeCount({ value, type }: { value: number; type: "added" | "removed" }) {
+  if (!value) return null;
+  return (
+    <span
+      className={cn(
+        "font-mono text-xs tabular-nums",
+        type === "added"
+          ? "text-emerald-600 dark:text-emerald-400"
+          : "text-rose-600 dark:text-rose-400",
+      )}
+    >
+      {type === "added" ? "+" : "−"}
+      {value}
+    </span>
+  );
+}
+
+export function FileDiff({
+  file,
+  lines,
+  status = "streaming",
+  open,
+  defaultOpen = true,
+  onOpenChange,
+  collapseOnComplete = true,
+  maxHeight = 220,
+  language = "typescript",
+  copyText,
+  onCopy,
+  className,
+}: FileDiffProps) {
+  const reduce = useReducedMotion() ?? false;
+  const baseId = useId();
+  const triggerId = `${baseId}-trigger`;
+  const contentId = `${baseId}-content`;
+  const viewportRef = useRef<HTMLDivElement>(null);
+  const previousStatus = useRef(status);
+  const copyTimer = useRef<number | undefined>(undefined);
+  const [copied, setCopied] = useState(false);
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const currentOpen = open ?? internalOpen;
+  const streaming = status === "streaming";
+  const additions = lines.filter((line) => line.type === "added").length;
+  const deletions = lines.filter((line) => line.type === "removed").length;
+  const canCopy = Boolean(copyText || onCopy);
+  const code = lines.map((line) => line.content).join("\n");
+  const tokens = useAgentCodeTokens(code, language);
+
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (open === undefined) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [onOpenChange, open],
+  );
+
+  useEffect(() => {
+    if (previousStatus.current !== "streaming" && status === "streaming") {
+      setOpen(true);
+    }
+    if (
+      previousStatus.current === "streaming" &&
+      status === "complete" &&
+      collapseOnComplete
+    ) {
+      setOpen(false);
+    }
+    previousStatus.current = status;
+  }, [collapseOnComplete, setOpen, status]);
+
+  useEffect(
+    () => () => {
+      if (copyTimer.current) window.clearTimeout(copyTimer.current);
+    },
+    [],
+  );
+
+  useLayoutEffect(() => {
+    const viewport = viewportRef.current;
+    if (!viewport || !currentOpen || !streaming) return;
+
+    const frame = requestAnimationFrame(() => {
+      if (viewport.scrollHeight <= viewport.clientHeight) return;
+      if (typeof viewport.scrollTo === "function") {
+        viewport.scrollTo({
+          top: viewport.scrollHeight,
+          behavior: reduce ? "auto" : "smooth",
+        });
+      } else {
+        viewport.scrollTop = viewport.scrollHeight;
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  });
+
+  const handleCopy = useCallback(async () => {
+    if (onCopy) await onCopy();
+    else if (copyText) await navigator.clipboard?.writeText(copyText);
+
+    setCopied(true);
+    if (copyTimer.current) window.clearTimeout(copyTimer.current);
+    copyTimer.current = window.setTimeout(() => setCopied(false), 1600);
+  }, [copyText, onCopy]);
+
+  return (
+    <div
+      data-state={status}
+      aria-busy={streaming}
+      className={cn("w-full text-sm", className)}
+    >
+      <button
+        id={triggerId}
+        type="button"
+        aria-expanded={currentOpen}
+        aria-controls={contentId}
+        onClick={() => setOpen(!currentOpen)}
+        className="group flex min-h-9 w-full items-center gap-2 rounded-md py-1 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+      >
+        <FileCode2
+          aria-hidden="true"
+          className="size-4 shrink-0 text-muted-foreground"
+        />
+        <span className="min-w-0 flex-1 truncate font-mono text-xs text-foreground/80">
+          {file}
+        </span>
+        <span className="flex shrink-0 items-center gap-2">
+          <ChangeCount value={additions} type="added" />
+          <ChangeCount value={deletions} type="removed" />
+        </span>
+        <span className="grid size-4 shrink-0 place-items-center text-muted-foreground/60">
+          {streaming ? (
+            <LoaderCircle
+              aria-label="Applying changes"
+              className={cn("size-3.5", !reduce && "animate-spin")}
+            />
+          ) : (
+            <Check aria-label="Changes applied" className="size-3.5" />
+          )}
+        </span>
+        <motion.span
+          aria-hidden="true"
+          animate={{ rotate: currentOpen ? 180 : 0 }}
+          transition={reduce ? { duration: 0 } : SPRING_SWAP}
+          className="shrink-0 text-muted-foreground/45 transition-colors group-hover:text-muted-foreground"
+        >
+          <ChevronDown className="size-3.5" />
+        </motion.span>
+      </button>
+
+      <AgentDisclosure
+        id={contentId}
+        role="region"
+        aria-labelledby={triggerId}
+        open={currentOpen}
+      >
+        <div className="pl-6 pt-1.5">
+          <div className="overflow-hidden rounded-xl bg-muted/80">
+            <div
+              ref={viewportRef}
+              data-slot="file-diff-viewport"
+              aria-live="polite"
+              className="scrollbar-hide overflow-auto"
+              style={{ maxHeight }}
+            >
+              <div className="font-mono text-xs leading-5">
+                <span className="sr-only">File changes</span>
+                {lines.map((line, index) => {
+                  const type = line.type ?? "context";
+                  return (
+                    <div
+                      key={line.id}
+                      className={cn(
+                        "grid grid-cols-[2.25rem_2.25rem_1rem_minmax(0,1fr)]",
+                        type === "added" && "bg-emerald-500/[0.07]",
+                        type === "removed" && "bg-rose-500/[0.07]",
+                      )}
+                    >
+                      <span className="select-none pr-2 text-right tabular-nums text-muted-foreground/40">
+                        {line.oldLine}
+                      </span>
+                      <span className="select-none pr-2 text-right tabular-nums text-muted-foreground/40">
+                        {line.newLine}
+                      </span>
+                      <span
+                        className={cn(
+                          "select-none text-center text-muted-foreground/45",
+                          type === "added" &&
+                            "text-emerald-600 dark:text-emerald-400",
+                          type === "removed" &&
+                            "text-rose-600 dark:text-rose-400",
+                        )}
+                      >
+                        {type === "added"
+                          ? "+"
+                          : type === "removed"
+                            ? "−"
+                            : ""}
+                      </span>
+                      <AgentCodeLine
+                        code={line.content}
+                        tokens={tokens?.[index]}
+                        className="min-w-0 whitespace-pre px-1.5"
+                      />
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+
+            {canCopy ? (
+              <div className="flex justify-end px-2 pb-1.5 pt-1">
+                <motion.button
+                  type="button"
+                  aria-label={copied ? "Copied" : "Copy diff"}
+                  title={copied ? "Copied" : "Copy diff"}
+                  onClick={handleCopy}
+                  whileTap={reduce ? undefined : { scale: 0.9 }}
+                  transition={SPRING_PRESS}
+                  className="grid size-7 place-items-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-background/70 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+                >
+                  {copied ? (
+                    <Check className="size-3.5" />
+                  ) : (
+                    <Copy className="size-3.5" />
+                  )}
+                </motion.button>
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </AgentDisclosure>
+    </div>
+  );
+}

package/components/agents/image-generation.tsx

@@ -0,0 +1,388 @@
+"use client";
+
+import { Check, CircleAlert, RotateCcw } from "lucide-react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import type { CSSProperties, ReactNode } from "react";
+import { useEffect, useRef } from "react";
+import { EASE_IN_OUT, EASE_OUT, SPRING_PRESS } from "@/lib/ease";
+import { useHoverCapable } from "@/lib/hooks/use-hover-capable";
+import { cn } from "@/lib/utils";
+
+export type ImageGenerationStatus =
+  | "queued"
+  | "generating"
+  | "refining"
+  | "complete"
+  | "error";
+
+export interface ImageGenerationProps {
+  /** The completed media. Pass an img, Next Image, canvas, video, or custom preview. */
+  children?: ReactNode;
+  status?: ImageGenerationStatus;
+  /** Accessible description. Defaults to a description derived from prompt. */
+  label?: string;
+  prompt?: string;
+  resolution?: string;
+  /** CSS aspect ratio reserved before generated media is available. */
+  aspectRatio?: CSSProperties["aspectRatio"];
+  size?: "compact" | "fluid";
+  /** Lets the active dither cluster follow fine-pointer movement. */
+  interactive?: boolean;
+  statusText?: string;
+  showStatus?: boolean;
+  onRetry?: () => void;
+  className?: string;
+  mediaClassName?: string;
+  statusClassName?: string;
+}
+
+const STATUS_TEXT: Record<ImageGenerationStatus, string> = {
+  queued: "Waiting to generate",
+  generating: "Generating image",
+  refining: "Refining details",
+  complete: "Image ready",
+  error: "Generation failed",
+};
+
+const MEDIA_STATE: Record<
+  ImageGenerationStatus,
+  { filter: string; opacity: number; scale: number }
+> = {
+  queued: { filter: "blur(4px) saturate(0.75)", opacity: 0, scale: 1.02 },
+  generating: { filter: "blur(3px) saturate(0.85)", opacity: 0, scale: 1.015 },
+  refining: { filter: "blur(1.5px) saturate(0.95)", opacity: 0.62, scale: 1.005 },
+  complete: { filter: "blur(0px) saturate(1)", opacity: 1, scale: 1 },
+  error: { filter: "blur(2px) saturate(0.5)", opacity: 0.28, scale: 1 },
+};
+
+const OVERLAY_OPACITY: Record<ImageGenerationStatus, number> = {
+  queued: 1,
+  generating: 1,
+  refining: 0.48,
+  complete: 0,
+  error: 0,
+};
+
+const DOT_GAP = 10;
+const TWO_PI = Math.PI * 2;
+
+function DitherMark({
+  status,
+  reduce,
+}: {
+  status: ImageGenerationStatus;
+  reduce: boolean;
+}) {
+  if (status === "complete") {
+    return <Check aria-hidden="true" className="size-3.5" />;
+  }
+
+  if (status === "error") {
+    return <CircleAlert aria-hidden="true" className="size-3.5" />;
+  }
+
+  return (
+    <motion.span
+      aria-hidden="true"
+      animate={reduce ? undefined : { rotate: 360 }}
+      transition={{
+        duration: 2.4,
+        ease: EASE_IN_OUT,
+        repeat: Number.POSITIVE_INFINITY,
+      }}
+      className="grid size-3.5 grid-cols-2 place-items-center gap-0.5"
+    >
+      <span className="size-1 rounded-[1px] bg-current" />
+      <span className="size-1 rounded-[1px] bg-current opacity-55" />
+      <span className="size-1 rounded-[1px] bg-current opacity-55" />
+      <span className="size-1 rounded-[1px] bg-current" />
+    </motion.span>
+  );
+}
+
+function DitherField({
+  interactive,
+  reduce,
+  status,
+}: {
+  interactive: boolean;
+  reduce: boolean;
+  status: ImageGenerationStatus;
+}) {
+  const canHover = useHoverCapable();
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const context = canvas?.getContext("2d");
+    if (!canvas || !context) return;
+
+    let frame = 0;
+    let width = 0;
+    let height = 0;
+    let dotColor = "currentColor";
+    const pointer = {
+      x: 0,
+      y: 0,
+      targetX: 0,
+      targetY: 0,
+      inside: false,
+    };
+    const pointerEnabled = interactive && canHover && !reduce;
+
+    const resize = () => {
+      const rect = canvas.getBoundingClientRect();
+      width = rect.width || canvas.clientWidth || 208;
+      height = rect.height || canvas.clientHeight || 208;
+      const dpr = Math.min(window.devicePixelRatio || 1, 2);
+
+      canvas.width = Math.round(width * dpr);
+      canvas.height = Math.round(height * dpr);
+      context.setTransform(dpr, 0, 0, dpr, 0, 0);
+      dotColor = window.getComputedStyle(canvas).color;
+      pointer.x = width / 2;
+      pointer.y = height / 2;
+      pointer.targetX = pointer.x;
+      pointer.targetY = pointer.y;
+    };
+
+    const draw = (time: number) => {
+      context.clearRect(0, 0, width, height);
+
+      if (!pointer.inside) {
+        pointer.targetX =
+          width / 2 + (reduce ? 0 : Math.sin(time / 1700) * width * 0.12);
+        pointer.targetY =
+          height / 2 + (reduce ? 0 : Math.cos(time / 2100) * height * 0.1);
+      }
+
+      const follow = reduce ? 1 : pointer.inside ? 0.16 : 0.045;
+      pointer.x += (pointer.targetX - pointer.x) * follow;
+      pointer.y += (pointer.targetY - pointer.y) * follow;
+
+      const radius = Math.min(width, height) * 0.38;
+      const columns = Math.ceil(width / DOT_GAP) + 1;
+      const rows = Math.ceil(height / DOT_GAP) + 1;
+      const offsetX = (width - (columns - 1) * DOT_GAP) / 2;
+      const offsetY = (height - (rows - 1) * DOT_GAP) / 2;
+
+      context.fillStyle = dotColor;
+
+      for (let row = 0; row < rows; row += 1) {
+        for (let column = 0; column < columns; column += 1) {
+          const anchorX = offsetX + column * DOT_GAP;
+          const anchorY = offsetY + row * DOT_GAP;
+          const deltaX = anchorX - pointer.x;
+          const deltaY = anchorY - pointer.y;
+          const distance = Math.hypot(deltaX, deltaY);
+          const proximity = Math.max(0, 1 - distance / radius);
+          const influence = proximity * proximity * (3 - 2 * proximity);
+          const displacement = influence * influence * 9;
+          const directionX = distance > 0 ? deltaX / distance : 0;
+          const directionY = distance > 0 ? deltaY / distance : 0;
+          const x = anchorX + directionX * displacement;
+          const y = anchorY + directionY * displacement;
+          const dotRadius = 0.65 + influence * 0.85;
+
+          context.globalAlpha = 0.17 + influence * 0.72;
+          context.beginPath();
+          context.arc(x, y, dotRadius, 0, TWO_PI);
+          context.fill();
+        }
+      }
+
+      context.globalAlpha = 1;
+      if (!reduce) frame = window.requestAnimationFrame(draw);
+    };
+
+    const handlePointerMove = (event: PointerEvent) => {
+      if (!pointerEnabled) return;
+      const rect = canvas.getBoundingClientRect();
+      pointer.inside = true;
+      pointer.targetX = event.clientX - rect.left;
+      pointer.targetY = event.clientY - rect.top;
+    };
+
+    const handlePointerLeave = () => {
+      pointer.inside = false;
+    };
+
+    const resizeObserver =
+      typeof ResizeObserver === "undefined"
+        ? null
+        : new ResizeObserver(resize);
+
+    resize();
+    resizeObserver?.observe(canvas);
+    canvas.addEventListener("pointermove", handlePointerMove, { passive: true });
+    canvas.addEventListener("pointerleave", handlePointerLeave);
+    draw(0);
+
+    return () => {
+      if (frame) window.cancelAnimationFrame(frame);
+      resizeObserver?.disconnect();
+      canvas.removeEventListener("pointermove", handlePointerMove);
+      canvas.removeEventListener("pointerleave", handlePointerLeave);
+    };
+  }, [canHover, interactive, reduce]);
+
+  return (
+    <motion.div
+      aria-hidden="true"
+      initial={false}
+      animate={{ opacity: OVERLAY_OPACITY[status] }}
+      transition={{ duration: reduce ? 0 : 0.4, ease: EASE_OUT }}
+      className="absolute inset-0 overflow-hidden bg-muted"
+    >
+      <canvas
+        ref={canvasRef}
+        className="absolute inset-0 size-full text-foreground"
+      />
+    </motion.div>
+  );
+}
+
+export function ImageGeneration({
+  children,
+  status = "generating",
+  label,
+  prompt,
+  resolution = "1024 × 1024",
+  aspectRatio = "1 / 1",
+  size = "compact",
+  interactive = true,
+  statusText,
+  showStatus = true,
+  onRetry,
+  className,
+  mediaClassName,
+  statusClassName,
+}: ImageGenerationProps) {
+  const reduce = useReducedMotion() ?? false;
+  const active =
+    status === "queued" || status === "generating" || status === "refining";
+  const mediaState = MEDIA_STATE[status];
+  const resolvedStatusText = statusText ?? STATUS_TEXT[status];
+  const resolvedLabel =
+    label ?? (prompt ? `${resolvedStatusText}: ${prompt}` : resolvedStatusText);
+
+  return (
+    <div
+      data-slot="image-generation"
+      data-state={status}
+      aria-busy={active}
+      className={cn("w-full", className)}
+    >
+      <div
+        className={cn(
+          "w-full",
+          size === "compact" && "mx-auto max-w-52",
+        )}
+      >
+        <div
+          role="img"
+          aria-label={resolvedLabel}
+          style={{ aspectRatio }}
+          className="relative isolate w-full overflow-hidden rounded-xl bg-muted"
+        >
+          <motion.div
+            aria-hidden={children ? undefined : true}
+            initial={false}
+            animate={
+              reduce
+                ? { opacity: mediaState.opacity }
+                : {
+                    filter: mediaState.filter,
+                    opacity: mediaState.opacity,
+                    scale: mediaState.scale,
+                  }
+            }
+            transition={
+              reduce ? { duration: 0 } : { duration: 0.4, ease: EASE_OUT }
+            }
+            className={cn(
+              "absolute inset-0 [&>*]:size-full [&>*]:object-cover [&_img]:size-full [&_img]:object-cover",
+              mediaClassName,
+            )}
+          >
+            {children}
+          </motion.div>
+
+          <AnimatePresence initial={false}>
+            {active ? (
+              <motion.div
+                key="dither-field"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: reduce ? 0 : 0.25, ease: EASE_OUT }}
+                className="absolute inset-0"
+              >
+                <DitherField
+                  interactive={interactive}
+                  reduce={reduce}
+                  status={status}
+                />
+              </motion.div>
+            ) : null}
+          </AnimatePresence>
+
+          {resolution ? (
+            <span className="absolute top-2 right-2 z-10 rounded-full bg-background/75 px-2 py-0.5 font-mono text-[10px] tabular-nums text-muted-foreground">
+              {resolution}
+            </span>
+          ) : null}
+        </div>
+
+        {showStatus || prompt ? (
+          <div className="mt-3 text-left">
+            {showStatus ? (
+              <div
+                aria-live="polite"
+                className={cn(
+                  "flex min-h-5 items-center gap-2 text-sm font-medium text-foreground",
+                  status === "error" && "text-destructive",
+                  statusClassName,
+                )}
+              >
+                <DitherMark status={status} reduce={reduce} />
+                <AnimatePresence mode="popLayout" initial={false}>
+                  <motion.span
+                    key={resolvedStatusText}
+                    initial={reduce ? false : { opacity: 0, y: 4 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    exit={reduce ? undefined : { opacity: 0, y: -4 }}
+                    transition={{
+                      duration: reduce ? 0 : 0.15,
+                      ease: EASE_OUT,
+                    }}
+                  >
+                    {resolvedStatusText}
+                  </motion.span>
+                </AnimatePresence>
+              </div>
+            ) : null}
+            {prompt ? (
+              <p className="mt-0.5 truncate text-xs text-muted-foreground">
+                “{prompt}”
+              </p>
+            ) : null}
+          </div>
+        ) : null}
+
+        {status === "error" && onRetry ? (
+          <motion.button
+            type="button"
+            onClick={onRetry}
+            whileTap={reduce ? undefined : { scale: 0.96 }}
+            transition={SPRING_PRESS}
+            className="mt-3 inline-flex min-h-10 items-center gap-2 rounded-full px-3 text-sm font-medium text-foreground outline-none transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            <RotateCcw aria-hidden="true" className="size-4" />
+            Try again
+          </motion.button>
+        ) : null}
+      </div>
+    </div>
+  );
+}