{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "CallChip-JS-TW", "title": "CallChip", "description": "Tool-call chip whose fill wipes across as a live timer ticks, ending green or shaking red.", "type": "registry:component", "files": [ { "type": "registry:component", "path": "CallChip/CallChip.jsx", "content": "'use client';\n\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { HugeiconsIcon } from '@hugeicons/react';\nimport {\n CommandLineIcon,\n File02Icon,\n PencilEdit01Icon,\n RefreshIcon,\n Search01Icon,\n Tick02Icon\n} from '@hugeicons/core-free-icons';\n\nconst HOLD_AT = 0.9;\nconst SHAKE = [0, -1, 1, -0.66, 0.66, -0.33, 0];\nconst ICONS = { terminal: CommandLineIcon, file: File02Icon, search: Search01Icon, edit: PencilEdit01Icon };\nconst WORDS = { running: 'running', done: 'done', error: 'failed', idle: 'queued' };\n\nconst fmt = ms => (ms < 10000 ? `${Math.round(ms)} ms` : `${(ms / 1000).toFixed(1)} s`);\nconst reduceMotion = () => window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;\nconst glyphOf = s => (s === 'done' ? 'check' : s === 'error' ? 'retry' : 'tool');\n\nexport default function CallChip({\n icon = 'terminal',\n name = 'bash',\n argument = 'npm test',\n status = 'running',\n expectedMs = 2500,\n size = 34,\n radius = 10,\n color = 'currentColor',\n surfaceColor = '#27272a',\n progressColor = 'currentColor',\n progressOpacity = 0.08,\n doneColor = '#22c55e',\n errorColor = '#ef4444',\n washOpacity = 0.14,\n shake = 6,\n showTimer = true,\n onRetry,\n className = '',\n style\n}) {\n const rootRef = useRef(null);\n const fillRef = useRef(null);\n const timerRef = useRef(null);\n const mountedRef = useRef(false);\n const fraction = useRef(0);\n const clock = useRef({ ms: 0 });\n const shakeAnim = useRef(null);\n const statusRef = useRef(status);\n statusRef.current = status;\n const [mounted, setMounted] = useState(false);\n const [pressed, setPressed] = useState(false);\n const [announce, setAnnounce] = useState('');\n const roll = useRef({ cur: glyphOf(status), prev: null });\n if (glyphOf(status) !== roll.current.cur) roll.current = { cur: glyphOf(status), prev: roll.current.cur };\n\n const setFraction = (f, instant) => {\n const fill = fillRef.current;\n if (!fill) return;\n fraction.current = f;\n if (instant) fill.style.transition = 'none';\n fill.style.transform = `scaleX(${f})`;\n if (instant) {\n void fill.getBoundingClientRect();\n fill.style.transition = '';\n }\n };\n const apply = (s, animate) => {\n if (s === 'running') {\n shakeAnim.current?.cancel();\n setFraction(0, true);\n if (animate) setFraction(HOLD_AT, false);\n } else if (s === 'done') {\n setFraction(1, !animate);\n } else if (s === 'error') {\n const fill = fillRef.current;\n const live = fill ? new DOMMatrix(getComputedStyle(fill).transform).a : fraction.current;\n setFraction(Math.min(1, Math.max(0, live)), true);\n if (animate && shake > 0 && !reduceMotion() && rootRef.current) {\n shakeAnim.current = rootRef.current.animate(\n SHAKE.map(k => ({ transform: `translateX(${k * shake}px)`, easing: 'cubic-bezier(0.77, 0, 0.175, 1)' })),\n { duration: 450, composite: 'add' }\n );\n }\n } else setFraction(0, true);\n };\n\n useEffect(() => {\n mountedRef.current = true;\n setMounted(true);\n apply(statusRef.current, statusRef.current === 'running');\n return () => {\n mountedRef.current = false;\n shakeAnim.current?.cancel();\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n useLayoutEffect(() => {\n if (mountedRef.current) apply(status, true);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [status]);\n\n useEffect(() => {\n const write = ms => {\n clock.current.ms = ms;\n if (timerRef.current) timerRef.current.textContent = fmt(ms);\n };\n if (status !== 'running') {\n if ((status === 'idle' || !clock.current.ms) && timerRef.current) timerRef.current.textContent = '—';\n return undefined;\n }\n const startedAt = performance.now();\n write(0);\n if (reduceMotion()) {\n const id = setInterval(() => write(performance.now() - startedAt), 100);\n return () => {\n clearInterval(id);\n write(performance.now() - startedAt);\n };\n }\n let raf = 0;\n const tick = () => {\n write(performance.now() - startedAt);\n raf = requestAnimationFrame(tick);\n };\n tick();\n return () => {\n cancelAnimationFrame(raf);\n write(performance.now() - startedAt);\n };\n }, [status]);\n useEffect(() => {\n const ms = showTimer && clock.current.ms ? Math.round(clock.current.ms) : 0;\n const when = status === 'done' && ms ? ` in ${ms} ms` : status === 'error' && ms ? ` after ${ms} ms` : '';\n setAnnounce(`${name} ${argument}, ${WORDS[status] ?? status}${when}`);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [status]);\n\n const font = Math.max(11, Math.round(size * 0.38));\n const glyphState = g => (g === roll.current.cur ? 'in' : g === roll.current.prev ? 'out' : undefined);\n const toolIcon = typeof icon === 'string' ? (ICONS[icon] ?? ICONS.terminal) : null;\n const iconSize = font + 2;\n\n return (\n \n \n \n \n {toolIcon ? : icon}\n \n \n \n \n \n \n \n \n \n {name}\n \n \n {argument}\n \n {showTimer ? (\n \n 0 ms\n \n ) : null}\n {status === 'error' && onRetry ? (\n onRetry()}\n onPointerDown={() => setPressed(true)}\n onPointerUp={() => setPressed(false)}\n onPointerCancel={() => setPressed(false)}\n />\n ) : null}\n {announce}\n \n );\n}\n" } ], "registryDependencies": [], "dependencies": [ "@hugeicons/react@^1.1.10", "@hugeicons/core-free-icons@^4.3.3" ] }