50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1832,"use client"; import { Button, type ButtonProps } from "@/components/ui/button"; import { duration, ease, spring, swap } from "@/lib/motion"; import { CopyIcon } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { type MouseEvent, type ReactNode, useEffect, useRef, useState } from "react"; /* * A Button that copies text to the clipboard (owner, 2026-10-14). * - Motion (.agents/rules/motion.md): the same swap as Loading Button, a blur with a 6px rise. The copy * icon lifts away as a check rises in and draws itself. With reduced motion it only fades. * - Width never jumps: both states are laid out invisibly in one cell, so a label can change * ("Copy link" → "Copied") without the button resizing. * - Icon only by default (ghost, icon size), named "Copy"; pass children for a label, and `icon={false}` * for text only (the label still swaps through the blur). * - A polite live region says "Copied". Back to the copy icon after `resetAfter`. * - Uses the Clipboard API, falling back to a hidden textarea where it's unavailable (older browsers, * pages not served over https). */ export type CopyButtonProps = Omit & { /** The text to copy */ value: string; /** Shown instead of the label once copied, for example "Copied" */ copiedText?: ReactNode; /** Called with the text after it's copied */ onCopy?: (value: string) => void; /** Milliseconds the check shows before the copy icon returns */ resetAfter?: number; /** Show the copy icon and the check. Set false for a text-only button; it then needs a label. */ icon?: boolean; }; const CHECK = "M5 12.5l4.5 4.5L19 7.5"; /** The check draws itself in; a 16px icon stroke, so drawing it costs nothing */ function Check({ reduce }: { reduce: boolean }) { return ( ); } /** The Clipboard API, or a hidden textarea where it's unavailable */ async function writeText(text: string) { if (navigator.clipboard?.writeText) { await navigator.clipboard.writeText(text); return; } const area = document.createElement("textarea"); area.value = text; area.setAttribute("readonly", ""); area.style.position = "fixed"; area.style.opacity = "0"; document.body.appendChild(area); area.select(); const copied = document.execCommand("copy"); area.remove(); if (!copied) throw new Error("Copy failed"); } function CopyButton({ value, copiedText, onCopy, resetAfter = 2000, icon = true, onClick, children, variant = "ghost", size, ...props }: CopyButtonProps) { const [copied, setCopied] = useState(false); // Counts copies, so copying again while the check shows starts its time over const [copies, setCopies] = useState(0); const reduce = useReducedMotion() ?? false; const mounted = useRef(true); useEffect(() => { mounted.current = true; return () => { mounted.current = false; }; }, []); // The check gives way to the copy icon after a moment, counted from the latest copy // biome-ignore lint/correctness/useExhaustiveDependencies: each copy restarts the timer useEffect(() => { if (!copied) return; const timer = setTimeout(() => setCopied(false), resetAfter); return () => clearTimeout(timer); }, [copied, copies, resetAfter]); const content = (state: "idle" | "copied", live: boolean) => { const glyph = !icon ? null : live ? ( state === "copied" ? ( ) : ( ) ) : ( ); const label = state === "copied" ? (copiedText ?? children) : children; return ( <> {glyph} {label} ); }; return ( <> {copied ? "Copied" : ""} ); } export { CopyButton }; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react@^1.52.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react@^1.52.0"}]]}]}],["$","li","motion@^14.0.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion@^14.0.0"}]]}]}]]}],["$","$L50",null,{"namespace":"@fewtone","registryDependencies":["https://ui.fewtone.com/r/tokens.json","https://ui.fewtone.com/r/motion.json","https://ui.fewtone.com/r/button.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/fewtone/ui/copy-button.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]