{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "clipboard-field", "title": "Clipboard Field", "description": "A one-click install/copy field that morphs between the command and a success label using CSS grid fr tracks — JS only copies and toggles state.", "dependencies": [], "files": [ { "path": "components/ui/clipboard-field.tsx", "type": "registry:ui", "content": "'use client'\n\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useRef,\n useState,\n type ButtonHTMLAttributes,\n} from 'react'\nimport { cn } from '@/lib/utils'\nimport { playHoverSound, playClickSound } from '@/lib/sound'\n\nconst KEYFRAME_STYLE_ID = '__clipboard_field_kf__'\n\nfunction ensureKeyframes() {\n if (typeof document === 'undefined') return\n if (document.getElementById(KEYFRAME_STYLE_ID)) return\n const style = document.createElement('style')\n style.id = KEYFRAME_STYLE_ID\n style.textContent = `\n @keyframes cf-fade-out {\n from { opacity: 1; transform: scale(1); }\n to { opacity: 0; transform: scale(0.97); }\n }\n @keyframes cf-fade-in {\n from { opacity: 0; transform: scale(0.97); }\n to { opacity: 1; transform: scale(1); }\n }\n @keyframes cf-icon-exit {\n from { opacity: 1; transform: scale(1) rotate(0deg); }\n to { opacity: 0; transform: scale(0.7) rotate(-8deg); }\n }\n @keyframes cf-icon-enter {\n from { opacity: 0; transform: scale(0.7) rotate(8deg); }\n to { opacity: 1; transform: scale(1) rotate(0deg); }\n }\n `\n document.head.appendChild(style)\n}\n\nexport interface ClipboardFieldProps extends Omit<\n ButtonHTMLAttributes,\n 'children' | 'onCopy' | 'value'\n> {\n value: string\n prompt?: string\n copiedLabel?: string\n copyLabel?: string\n resetDelay?: number\n onCopy?: () => void\n hideIcon?: boolean\n}\n\nfunction CopyIcon({ className }: { className?: string }) {\n return (\n \n \n \n \n )\n}\n\nfunction CheckIcon({ className }: { className?: string }) {\n return (\n \n \n \n )\n}\n\nexport const ClipboardField = forwardRef(\n (\n {\n value,\n prompt = '$',\n copiedLabel = 'Copied to clipboard',\n copyLabel = 'Copy to clipboard',\n resetDelay = 2000,\n onCopy,\n hideIcon = false,\n disabled,\n className,\n onClick,\n type = 'button',\n ...props\n },\n ref,\n ) => {\n const [copied, setCopied] = useState(false)\n const resetTimer = useRef | null>(null)\n\n useEffect(() => {\n ensureKeyframes()\n }, [])\n\n useEffect(\n () => () => {\n if (resetTimer.current) clearTimeout(resetTimer.current)\n },\n [],\n )\n\n const handleCopy = useCallback(async () => {\n if (disabled) return\n playClickSound()\n try {\n await navigator.clipboard.writeText(value)\n setCopied(true)\n onCopy?.()\n if (resetTimer.current) clearTimeout(resetTimer.current)\n resetTimer.current = setTimeout(() => setCopied(false), resetDelay)\n } catch {}\n }, [disabled, value, onCopy, resetDelay])\n\n return (\n {\n onClick?.(e)\n if (!e.defaultPrevented) void handleCopy()\n }}\n onMouseEnter={() => playHoverSound()}\n onPointerDown={(e) => {\n e.preventDefault()\n }}\n className={cn(\n 'clipboard-field group relative inline-grid max-w-full cursor-pointer items-center gap-x-2',\n 'rounded-xl squircle-corners border border-(--color-border) bg-(--color-surface-2)',\n 'px-3 py-2.5 font-mono text-[13px] leading-none text-(--color-fg)',\n 'outline-none select-none',\n hideIcon ? 'grid-cols-[auto_1fr]' : 'grid-cols-[auto_1fr_auto]',\n 'transition-[border-color,background-color] duration-(--motion-dur-fast) ease-(--motion-ease-in-out) motion-reduce:transition-none',\n 'hover:border-(--color-border-strong) hover:bg-(--color-surface)',\n 'focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 focus-visible:ring-offset-(--color-bg)',\n 'active:scale-[0.98] motion-reduce:active:scale-100',\n 'disabled:pointer-events-none disabled:opacity-50',\n className,\n )}\n {...props}\n >\n \n {prompt}\n \n\n {/* Both layers share col 2 — crossfade only, button width never changes. */}\n \n {value}\n \n\n \n {copiedLabel}\n \n\n {!hideIcon && (\n \n \n \n \n \n \n \n \n )}\n \n )\n },\n)\n\nClipboardField.displayName = 'ClipboardField'\n\nexport function ClipboardFieldPreview() {\n return (\n
\n \n
\n )\n}\n" }, { "path": "lib/sound.ts", "type": "registry:lib", "content": "'use client'\n\nconst MUTE_KEY = 'sound-muted'\nconst MUTE_EVENT = 'sound-mute-change'\n\nlet muted = false\nif (typeof window !== 'undefined') {\n try {\n muted = localStorage.getItem(MUTE_KEY) === '1'\n } catch {}\n}\n\nexport function isSoundMuted(): boolean {\n return muted\n}\n\nexport function setSoundMuted(value: boolean) {\n muted = value\n if (typeof window !== 'undefined') {\n try {\n localStorage.setItem(MUTE_KEY, value ? '1' : '0')\n } catch {}\n window.dispatchEvent(new CustomEvent(MUTE_EVENT))\n }\n}\n\nexport function toggleSoundMuted(): boolean {\n setSoundMuted(!muted)\n return muted\n}\n\nexport function subscribeSoundMuted(callback: () => void) {\n if (typeof window === 'undefined') return () => {}\n window.addEventListener(MUTE_EVENT, callback)\n const onStorage = (e: StorageEvent) => {\n if (e.key === MUTE_KEY) callback()\n }\n window.addEventListener('storage', onStorage)\n return () => {\n window.removeEventListener(MUTE_EVENT, callback)\n window.removeEventListener('storage', onStorage)\n }\n}\n\nlet audioCtx: AudioContext | null = null\n\nfunction initAudio(): AudioContext | null {\n if (typeof window === 'undefined') return null\n if (!audioCtx) {\n const AudioContextClass =\n window.AudioContext ||\n (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext\n if (AudioContextClass) {\n audioCtx = new AudioContextClass()\n }\n }\n if (audioCtx && audioCtx.state === 'suspended') {\n audioCtx.resume().catch(() => {})\n }\n return audioCtx\n}\n\nif (typeof window !== 'undefined') {\n const unlock = () => {\n initAudio()\n window.removeEventListener('pointerdown', unlock)\n window.removeEventListener('keydown', unlock)\n window.removeEventListener('touchstart', unlock)\n }\n window.addEventListener('pointerdown', unlock, { passive: true })\n window.addEventListener('keydown', unlock, { passive: true })\n window.addEventListener('touchstart', unlock, { passive: true })\n}\n\nexport function getAudioContext(): AudioContext | null {\n return initAudio()\n}\n\nexport function playHoverSound(volume = 0.12, pitch = 1.2) {\n if (muted) return\n try {\n const ctx = getAudioContext()\n if (!ctx) return\n const now = ctx.currentTime\n\n const osc = ctx.createOscillator()\n const gain = ctx.createGain()\n\n osc.type = 'sine'\n osc.frequency.setValueAtTime(1400 * pitch, now)\n osc.frequency.exponentialRampToValueAtTime(350 * pitch, now + 0.012)\n\n gain.gain.setValueAtTime(volume, now)\n gain.gain.exponentialRampToValueAtTime(0.0001, now + 0.012)\n\n osc.connect(gain)\n gain.connect(ctx.destination)\n\n osc.start(now)\n osc.stop(now + 0.012)\n } catch {}\n}\n\nexport function playClickSound(volume = 0.2, pitch = 1.0) {\n if (muted) return\n try {\n const ctx = getAudioContext()\n if (!ctx) return\n const now = ctx.currentTime\n\n const osc = ctx.createOscillator()\n const gain = ctx.createGain()\n\n osc.type = 'triangle'\n osc.frequency.setValueAtTime(850 * pitch, now)\n osc.frequency.exponentialRampToValueAtTime(160 * pitch, now + 0.02)\n\n gain.gain.setValueAtTime(volume, now)\n gain.gain.exponentialRampToValueAtTime(0.0001, now + 0.02)\n\n osc.connect(gain)\n gain.connect(ctx.destination)\n\n osc.start(now)\n osc.stop(now + 0.02)\n } catch {}\n}\n\nexport function playTickSound(volume = 0.1, pitch = 1.5) {\n if (muted) return\n try {\n const ctx = getAudioContext()\n if (!ctx) return\n const now = ctx.currentTime\n\n const osc = ctx.createOscillator()\n const gain = ctx.createGain()\n\n osc.type = 'sine'\n osc.frequency.setValueAtTime(1800 * pitch, now)\n osc.frequency.exponentialRampToValueAtTime(450 * pitch, now + 0.01)\n\n gain.gain.setValueAtTime(volume, now)\n gain.gain.exponentialRampToValueAtTime(0.0001, now + 0.01)\n\n osc.connect(gain)\n gain.connect(ctx.destination)\n\n osc.start(now)\n osc.stop(now + 0.01)\n } catch {}\n}\n\nexport function playBounceSound(volume = 0.3, pitch = 1.0) {\n if (muted) return\n try {\n const ctx = getAudioContext()\n if (!ctx) return\n const now = ctx.currentTime\n\n const osc = ctx.createOscillator()\n const gain = ctx.createGain()\n\n osc.type = 'sine'\n osc.frequency.setValueAtTime(260 * pitch, now)\n osc.frequency.exponentialRampToValueAtTime(650 * pitch, now + 0.04)\n osc.frequency.exponentialRampToValueAtTime(190 * pitch, now + 0.14)\n\n gain.gain.setValueAtTime(volume, now)\n gain.gain.exponentialRampToValueAtTime(0.0001, now + 0.14)\n\n osc.connect(gain)\n gain.connect(ctx.destination)\n\n osc.start(now)\n osc.stop(now + 0.14)\n\n const subOsc = ctx.createOscillator()\n const subGain = ctx.createGain()\n\n subOsc.type = 'triangle'\n subOsc.frequency.setValueAtTime(420 * pitch, now)\n subOsc.frequency.exponentialRampToValueAtTime(120 * pitch, now + 0.05)\n\n subGain.gain.setValueAtTime(volume * 0.7, now)\n subGain.gain.exponentialRampToValueAtTime(0.0001, now + 0.05)\n\n subOsc.connect(subGain)\n subGain.connect(ctx.destination)\n\n subOsc.start(now)\n subOsc.stop(now + 0.05)\n } catch {}\n}\n" } ], "type": "registry:ui" }