"use client"; import { useLayoutEffect, useRef, useState } from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { CircleAlert, Copy } from "lucide-react"; import { motionTokens } from "../lib/motion-tokens"; import { useCopyFeedback } from "../lib/use-copy-feedback"; import styles from "./copy-button.module.css"; export interface CopyButtonProps { value: string; label?: string; className?: string; iconOnly?: boolean; variant?: "outline" | "plain"; disabled?: boolean; onCopied?: () => void; } /** Copy feedback is quick and quiet: the old icon and word fade out fast while the new ones fade in, with no blur and no * per-letter motion. The button eases to the width of the current word on a spring with no overshoot, so a long label * like "Copy model id" never leaves empty space next to "Copied", and nothing jumps. */ const ease = [...motionTokens.ease.standard] as [number, number, number, number]; const show = { duration: .16, ease } as const; const hide = { duration: .1, ease } as const; const instant = { duration: 0 } as const; const resize = { type: "spring", visualDuration: .22, bounce: 0 } as const; /** The success tick draws itself in one short stroke. */ function DrawnCheck({ reduced }: { reduced: boolean }) { return ; } export function CopyButton({ value, label = "Copy", className, iconOnly = false, variant = "outline", disabled, onCopied }: CopyButtonProps) { const { state, copy } = useCopyFeedback(); const reduced = useReducedMotion() ?? false; const text = state === "copied" ? "Copied" : state === "error" ? "Failed" : label; // Each word's natural width, measured off screen (and again when fonts load or the label changes). const measures = useRef>({}); const [widths, setWidths] = useState>({}); useLayoutEffect(() => { if (iconOnly) return; const read = () => setWidths(Object.fromEntries(Object.entries(measures.current).map(([key, node]) => [key, node?.offsetWidth ?? 0]))); read(); if (typeof ResizeObserver === "undefined") return; const observer = new ResizeObserver(read); Object.values(measures.current).forEach(node => { if (node) observer.observe(node); }); return () => observer.disconnect(); }, [label, iconOnly]); const width = widths[state === "copied" ? "copied" : state === "error" ? "error" : "idle"]; // The first measured width applies at once; only later changes ease, so the very first copy animates too. const [shown, setShown] = useState(undefined); const first = shown === undefined; if (width !== undefined && width !== shown) setShown(width); async function handleCopy() { if (await copy(value)) onCopied?.(); } return <>{state === "idle" ? "" : state === "error" ? `${label}: Could not copy` : `${label}: Copied`}; }