motion-ui-skill 2.0.0

package/components/previews/agents/chat-app.preview.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { Maximize2, Minimize2 } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { ChatAppExample } from "@/components/previews/agents/chat-app-usage";
+import { ActionSwapIcon } from "@/components/motion/action-swap";
+import { cn } from "@/lib/utils";
+
+export function ChatAppPreview() {
+  const [expanded, setExpanded] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const toggleRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (!expanded) return;
+    const container = containerRef.current;
+    if (!container) return;
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const isolated: Array<{
+      element: HTMLElement;
+      inert: boolean;
+      ariaHidden: string | null;
+    }> = [];
+    let branch: HTMLElement = container;
+    while (branch.parentElement) {
+      const parent = branch.parentElement;
+      for (const sibling of Array.from(parent.children)) {
+        if (sibling === branch || !(sibling instanceof HTMLElement)) continue;
+        isolated.push({
+          element: sibling,
+          inert: sibling.inert,
+          ariaHidden: sibling.getAttribute("aria-hidden"),
+        });
+        sibling.inert = true;
+        sibling.setAttribute("aria-hidden", "true");
+      }
+      if (parent === document.body) break;
+      branch = parent;
+    }
+
+    const focusableSelector = [
+      "a[href]",
+      "button:not([disabled])",
+      "input:not([disabled])",
+      "select:not([disabled])",
+      "textarea:not([disabled])",
+      "[tabindex]:not([tabindex='-1'])",
+    ].join(",");
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        setExpanded(false);
+        return;
+      }
+      if (event.key !== "Tab") return;
+      const focusable = Array.from(
+        container.querySelectorAll<HTMLElement>(focusableSelector),
+      ).filter((element) => !element.inert && element.offsetParent !== null);
+      const first = focusable[0];
+      const last = focusable.at(-1);
+      if (!first || !last) {
+        event.preventDefault();
+        container.focus();
+      } else if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    requestAnimationFrame(() =>
+      toggleRef.current?.focus({ preventScroll: true }),
+    );
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      window.removeEventListener("keydown", handleKeyDown);
+      for (const { element, inert, ariaHidden } of isolated) {
+        element.inert = inert;
+        if (ariaHidden === null) element.removeAttribute("aria-hidden");
+        else element.setAttribute("aria-hidden", ariaHidden);
+      }
+      requestAnimationFrame(() =>
+        toggleRef.current?.focus({ preventScroll: true }),
+      );
+    };
+  }, [expanded]);
+
+  const toggleExpanded = useCallback(() => {
+    setExpanded((current) => !current);
+  }, []);
+
+  return (
+    <div
+      ref={containerRef}
+      role="dialog"
+      aria-modal={expanded || undefined}
+      aria-label="Chat app preview"
+      tabIndex={expanded ? -1 : undefined}
+      className={cn(
+        "relative w-full bg-background px-0 py-2 sm:p-3",
+        expanded &&
+          "fixed inset-0 z-[100] h-dvh overscroll-contain p-3 sm:p-4",
+      )}
+    >
+      <button
+        ref={toggleRef}
+        type="button"
+        onClick={toggleExpanded}
+        aria-label={expanded ? "Exit expanded preview" : "Expand preview"}
+        title={expanded ? "Exit expanded preview" : "Expand preview"}
+        className="absolute top-5 right-24 z-50 grid size-10 place-items-center rounded-full border border-border/80 bg-background/90 text-muted-foreground backdrop-blur-sm transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+      >
+        <ActionSwapIcon
+          value={expanded ? "minimize" : "maximize"}
+          animation="blur"
+        >
+          {expanded ? (
+            <Minimize2 className="size-4" />
+          ) : (
+            <Maximize2 className="size-4" />
+          )}
+        </ActionSwapIcon>
+      </button>
+      <ChatAppExample className={expanded ? "h-full" : undefined} />
+    </div>
+  );
+}

package/components/previews/agents/chat-preview.tsx

@@ -0,0 +1,285 @@
+"use client";
+
+import { Bot, User } from "lucide-react";
+import { useReducedMotion } from "motion/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  Message,
+  MessageAvatar,
+  MessageContent,
+  MessageFooter,
+  MessageGroup,
+  MessageHeader,
+  MessageTyping,
+} from "@/components/agents/message";
+import {
+  MessageBubble,
+  MessageBubbleContent,
+  type MessageBubbleVariant,
+} from "@/components/agents/message-bubble";
+import { MessageScroller } from "@/components/agents/message-scroller";
+import { PromptInput } from "@/components/agents/prompt-input";
+import { StreamingResponse } from "@/components/agents/streaming-response";
+import { cn } from "@/lib/utils";
+
+export interface ChatPreviewMessage {
+  id: string;
+  from: "user" | "assistant";
+  content: string;
+}
+
+interface RenderedChatMessage extends ChatPreviewMessage {
+  animateIn: boolean;
+  streaming?: boolean;
+}
+
+export interface ChatPreviewProps {
+  initialMessages?: ChatPreviewMessage[];
+  reply?: string | ((prompt: string) => string);
+  showAvatars?: boolean;
+  showMetadata?: boolean;
+  showRail?: boolean;
+  assistantVariant?: MessageBubbleVariant;
+  userVariant?: MessageBubbleVariant;
+  placeholder?: string;
+  className?: string;
+  viewportClassName?: string;
+}
+
+const DEFAULT_MESSAGES: ChatPreviewMessage[] = [
+  {
+    id: "welcome-question",
+    from: "user",
+    content: "What should we include in the first release?",
+  },
+  {
+    id: "welcome-answer",
+    from: "assistant",
+    content: "Start with the smallest workflow that still feels complete.",
+  },
+];
+
+const DEFAULT_REPLY =
+  "I’d include composing a prompt, following a streamed answer, recovering from an error, and returning to the latest response without losing the reader’s place.";
+const CHARACTERS_PER_SECOND = 96;
+const STREAM_DELAY = 140;
+
+export function ChatPreview({
+  initialMessages = DEFAULT_MESSAGES,
+  reply = DEFAULT_REPLY,
+  showAvatars = false,
+  showMetadata = false,
+  showRail = false,
+  assistantVariant = "soft",
+  userVariant = "solid",
+  placeholder = "Send a message…",
+  className,
+  viewportClassName,
+}: ChatPreviewProps) {
+  const reduce = useReducedMotion() ?? false;
+  const nextId = useRef(0);
+  const replyTimer = useRef<number | undefined>(undefined);
+  const [messages, setMessages] = useState<RenderedChatMessage[]>(() =>
+    initialMessages.map((message) => ({ ...message, animateIn: false })),
+  );
+  const [pending, setPending] = useState(false);
+  const [activeReply, setActiveReply] = useState<{
+    id: string;
+    content: string;
+  } | null>(null);
+  const loading = pending || activeReply !== null;
+
+  useEffect(() => {
+    if (!activeReply) return;
+
+    if (reduce) {
+      setMessages((current) =>
+        current.map((message) =>
+          message.id === activeReply.id
+            ? { ...message, content: activeReply.content, streaming: false }
+            : message,
+        ),
+      );
+      setActiveReply(null);
+      return;
+    }
+
+    const startedAt = performance.now() + STREAM_DELAY;
+    let frame = 0;
+    const stream = (now: number) => {
+      const cursor = Math.min(
+        activeReply.content.length,
+        Math.floor(
+          (Math.max(0, now - startedAt) / 1000) * CHARACTERS_PER_SECOND,
+        ),
+      );
+      const content = activeReply.content.slice(0, cursor);
+      setMessages((current) =>
+        current.map((message) =>
+          message.id === activeReply.id && message.content !== content
+            ? { ...message, content }
+            : message,
+        ),
+      );
+
+      if (cursor < activeReply.content.length) {
+        frame = requestAnimationFrame(stream);
+      } else {
+        setMessages((current) =>
+          current.map((message) =>
+            message.id === activeReply.id
+              ? { ...message, streaming: false }
+              : message,
+          ),
+        );
+        setActiveReply(null);
+      }
+    };
+
+    frame = requestAnimationFrame(stream);
+    return () => cancelAnimationFrame(frame);
+  }, [activeReply, reduce]);
+
+  useEffect(
+    () => () => {
+      if (replyTimer.current) window.clearTimeout(replyTimer.current);
+    },
+    [],
+  );
+
+  const submit = useCallback(
+    (prompt: string) => {
+      if (loading) return;
+
+      const run = nextId.current++;
+      const userId = `sent-user-${run}`;
+      const assistantId = `sent-assistant-${run}`;
+      const response = typeof reply === "function" ? reply(prompt) : reply;
+
+      setMessages((current) => [
+        ...current,
+        { id: userId, from: "user", content: prompt, animateIn: true },
+      ]);
+      setPending(true);
+
+      replyTimer.current = window.setTimeout(() => {
+        setMessages((current) => [
+          ...current,
+          {
+            id: assistantId,
+            from: "assistant",
+            content: "",
+            animateIn: true,
+            streaming: true,
+          },
+        ]);
+        setPending(false);
+        setActiveReply({ id: assistantId, content: response });
+      }, reduce ? 0 : 420);
+    },
+    [loading, reduce, reply],
+  );
+
+  const stop = useCallback(() => {
+    if (replyTimer.current) window.clearTimeout(replyTimer.current);
+    replyTimer.current = undefined;
+    setPending(false);
+    setMessages((current) =>
+      current.map((message) =>
+        message.streaming ? { ...message, streaming: false } : message,
+      ),
+    );
+    setActiveReply(null);
+  }, []);
+
+  return (
+    <div
+      className={cn(
+        "flex h-[440px] w-full max-w-xl flex-col overflow-hidden rounded-2xl border border-border/70 bg-background",
+        className,
+      )}
+    >
+      <MessageScroller
+        busy={loading}
+        navigation={showRail ? "rail" : undefined}
+        className="min-h-0 flex-1"
+        viewportClassName={cn("px-3 py-4", viewportClassName)}
+        contentClassName="min-h-full"
+      >
+        <MessageGroup spacing="default">
+          {messages.map((message) => (
+            <Message
+              key={message.id}
+              id={message.id}
+              from={message.from}
+              animateIn={message.from === "user" && message.animateIn}
+            >
+              {showAvatars ? (
+                <MessageAvatar>
+                  {message.from === "user" ? <User /> : <Bot />}
+                </MessageAvatar>
+              ) : null}
+              <MessageContent>
+                {showMetadata ? (
+                  <MessageHeader>
+                    <span className="font-medium text-foreground/70">
+                      {message.from === "user" ? "You" : "Assistant"}
+                    </span>
+                    <span>{message.streaming ? "Responding" : "Now"}</span>
+                  </MessageHeader>
+                ) : null}
+                <MessageBubble
+                  variant={
+                    message.from === "user" ? userVariant : assistantVariant
+                  }
+                  animateIn={false}
+                >
+                  <MessageBubbleContent>
+                    {message.from === "assistant" ? (
+                      <StreamingResponse
+                        status={message.streaming ? "streaming" : "complete"}
+                        showActions={false}
+                        announce={false}
+                      >
+                        {message.content || <MessageTyping />}
+                      </StreamingResponse>
+                    ) : (
+                      message.content
+                    )}
+                  </MessageBubbleContent>
+                </MessageBubble>
+                {showMetadata && message.from === "user" ? (
+                  <MessageFooter>Sent</MessageFooter>
+                ) : null}
+              </MessageContent>
+            </Message>
+          ))}
+          {pending ? (
+            <Message id="pending-assistant" from="assistant">
+              {showAvatars ? (
+                <MessageAvatar>
+                  <Bot />
+                </MessageAvatar>
+              ) : null}
+              <MessageContent>
+                <MessageTyping label="Preparing response" />
+              </MessageContent>
+            </Message>
+          ) : null}
+        </MessageGroup>
+      </MessageScroller>
+
+      <div className="shrink-0 border-t border-border/60 p-2">
+        <PromptInput
+          minRows={1}
+          maxRows={1}
+          loading={loading}
+          onSubmit={submit}
+          onStop={stop}
+          placeholder={placeholder}
+          className="border-0 bg-muted shadow-none focus-within:border-transparent"
+        />
+      </div>
+    </div>
+  );
+}

package/components/previews/agents/citations.preview.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { RotateCcw } from "lucide-react";
+import { useReducedMotion } from "motion/react";
+import { useEffect, useState } from "react";
+import {
+  Citation,
+  Citations,
+  type CitationItem,
+} from "@/components/agents/citations";
+
+const CITATION_ITEMS: CitationItem[] = [
+  {
+    id: "motion",
+    title: "Motion documentation",
+    domain: "motion.dev",
+    url: "https://motion.dev/docs/react",
+  },
+  {
+    id: "wai",
+    title: "WAI accessibility patterns",
+    domain: "w3.org",
+    url: "https://www.w3.org/WAI/ARIA/apg/",
+  },
+  {
+    id: "react",
+    title: "React documentation",
+    domain: "react.dev",
+    url: "https://react.dev/learn",
+  },
+];
+
+function CitationsDemo() {
+  const reduce = useReducedMotion() ?? false;
+  const [visible, setVisible] = useState(reduce ? CITATION_ITEMS.length : 0);
+
+  useEffect(() => {
+    if (reduce) return;
+    const timers = CITATION_ITEMS.map((_, index) =>
+      window.setTimeout(() => setVisible(index + 1), 500 + index * 700),
+    );
+    return () => timers.forEach(window.clearTimeout);
+  }, [reduce]);
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm leading-6 text-foreground/90">
+        Use layout-aware motion for newly appended results{" "}
+        <Citation citationId="motion" index={1} idPrefix="preview-source" /> and preserve accessible
+        disclosure behavior <Citation citationId="wai" index={2} idPrefix="preview-source" /> as the list
+        grows.
+      </p>
+      <Citations
+        idPrefix="preview-source"
+        citations={CITATION_ITEMS.slice(0, visible)}
+        defaultOpen
+      />
+    </div>
+  );
+}
+
+export function CitationsPreview() {
+  const [run, setRun] = useState(0);
+
+  return (
+    <div className="relative h-[410px] w-full max-w-lg">
+      <CitationsDemo key={run} />
+      <button
+        type="button"
+        onClick={() => setRun((value) => value + 1)}
+        className="absolute bottom-0 left-0 inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        <RotateCcw className="size-3" />
+        Replay
+      </button>
+    </div>
+  );
+}

package/components/previews/agents/code-block.preview.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { RotateCcw } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { CodeBlock } from "@/components/agents/code-block";
+
+const LINES = [
+  'import { generateText } from "ai";',
+  "",
+  "export async function summarize(input: string) {",
+  "  const { text } = await generateText({",
+  '    model: "openai/gpt-5",',
+  `    prompt: \`Summarize this clearly: \${input}\`,`,
+  "  });",
+  "",
+  "  return {",
+  "    text,",
+  "    generatedAt: new Date().toISOString(),",
+  "  };",
+  "}",
+];
+
+function StreamingCodeBlock() {
+  const [visibleLines, setVisibleLines] = useState(1);
+  const timer = useRef<number | undefined>(undefined);
+  const complete = visibleLines === LINES.length;
+
+  useEffect(() => {
+    if (visibleLines >= LINES.length) return;
+    timer.current = window.setTimeout(
+      () => setVisibleLines((value) => value + 1),
+      260,
+    );
+    return () => {
+      if (timer.current) window.clearTimeout(timer.current);
+    };
+  }, [visibleLines]);
+
+  return (
+    <CodeBlock
+      filename="summarize.ts"
+      language="typescript"
+      code={LINES.slice(0, visibleLines).join("\n")}
+      status={complete ? "complete" : "streaming"}
+      highlightLines={[4, 5, 6, 7]}
+      maxHeight={224}
+    />
+  );
+}
+
+export function CodeBlockPreview() {
+  const [run, setRun] = useState(0);
+
+  return (
+    <div className="relative h-[340px] w-full max-w-xl">
+      <StreamingCodeBlock key={run} />
+      <button
+        type="button"
+        onClick={() => setRun((value) => value + 1)}
+        className="absolute bottom-0 left-0 inline-flex items-center gap-1.5 rounded-full px-2 py-1 text-xs font-medium text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        <RotateCcw className="size-3" />
+        Replay
+      </button>
+    </div>
+  );
+}

package/components/previews/agents/file-diff.preview.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { RotateCcw } from "lucide-react";
+import { useState } from "react";
+import {
+  FileDiff,
+  type FileDiffLine,
+} from "@/components/agents/file-diff";
+import { useToolResultDemo } from "./use-tool-result-demo";
+
+const DIFF_LINES: FileDiffLine[] = [
+  { id: "1", oldLine: 18, newLine: 18, content: "export async function runTask() {" },
+  {
+    id: "2",
+    type: "removed",
+    oldLine: 19,
+    content: "  return execute(task);",
+  },
+  {
+    id: "3",
+    type: "added",
+    newLine: 19,
+    content: "  const result = await execute(task);",
+  },
+  {
+    id: "4",
+    type: "added",
+    newLine: 20,
+    content: "  return normalize(result);",
+  },
+  { id: "5", oldLine: 20, newLine: 21, content: "}" },
+];
+
+function FileRun() {
+  const { visible, status } = useToolResultDemo(DIFF_LINES.length, 360);
+
+  return (
+    <FileDiff
+      file="src/runner.ts"
+      lines={DIFF_LINES.slice(0, visible)}
+      status={status === "success" ? "complete" : "streaming"}
+      copyText={DIFF_LINES.map((line) => line.content).join("\n")}
+      maxHeight={150}
+    />
+  );
+}
+
+export function FileDiffPreview() {
+  const [run, setRun] = useState(0);
+
+  return (
+    <div className="relative h-[300px] w-full max-w-lg">
+      <FileRun key={run} />
+      <button
+        type="button"
+        onClick={() => setRun((value) => value + 1)}
+        className="absolute bottom-0 left-0 inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        <RotateCcw className="size-3" />
+        Replay
+      </button>
+    </div>
+  );
+}