{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"code-block","type":"registry:ui","title":"Code Block","description":"Code display with a filename tab, line numbers, highlighted lines that sweep in, lightweight built-in token coloring and a copy button that springs into a check.","dependencies":["motion","lucide-react"],"registryDependencies":["utils"],"files":[{"path":"registry/ui/code-block.tsx","type":"registry:ui","content":"\"use client\";\n\nimport { useEffect, useMemo, useRef, useState, type CSSProperties, type HTMLAttributes } from \"react\";\nimport { AnimatePresence, MotionConfig, motion } from \"motion/react\";\nimport { Check, Copy, FileCode2 } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\n// Highlighted lines sweep their tint in from the left, staggered by line.\nconst css = `\n@keyframes ui-code-hl{from{scale:0 1;opacity:0}}\n.ui-code-hl::before{content:\"\";position:absolute;inset:0;z-index:-1;transform-origin:left;background:color-mix(in oklab,var(--primary) 12%,transparent);box-shadow:inset 2px 0 var(--primary);animation:ui-code-hl .6s cubic-bezier(.6,0,.2,1) both;animation-delay:calc(var(--i)*40ms + .15s)}\n@media (prefers-reduced-motion:reduce){.ui-code-hl::before{animation:none}}\n`;\n\ntype TokenType = \"plain\" | \"comment\" | \"string\" | \"number\" | \"keyword\" | \"function\" | \"type\" | \"tag\" | \"attr\" | \"punct\";\ntype Token = [TokenType, string];\n\nconst tokenClass: Record = {\n plain: \"\",\n comment: \"text-muted-foreground italic\",\n string: \"text-emerald-700 dark:text-emerald-300\",\n number: \"text-amber-700 dark:text-amber-300\",\n keyword: \"text-violet-600 dark:text-violet-300\",\n function: \"text-sky-700 dark:text-sky-300\",\n type: \"text-rose-600 dark:text-rose-300\",\n tag: \"text-rose-600 dark:text-rose-300\",\n attr: \"text-orange-700 dark:text-orange-300\",\n punct: \"text-muted-foreground\",\n};\n\nconst KEYWORDS = new Set(\n (\n \"import export from default as const let var function return if else for while do switch case break continue new \" +\n \"class extends interface type enum implements public private protected readonly static async await yield try catch \" +\n \"finally throw typeof instanceof in of void delete this super true false null undefined keyof satisfies \" +\n \"echo cd sudo npm npx pnpm yarn bun git def self None True False lambda pass with elif print\"\n ).split(\" \"),\n);\n\n// One pass, one regex: comments | strings | numbers | JSX tag opener | identifiers | punctuation.\n// Good enough to color TS/JS/JSX, CSS, JSON, shell and Python readably; not a real parser.\nconst REST =\n /(\"(?:\\\\.|[^\"\\\\\\n])*\"|'(?:\\\\.|[^'\\\\\\n])*'|`(?:\\\\.|[^`\\\\])*`)|(\\b\\d[\\d_]*(?:\\.\\d+)?(?:e[+-]?\\d+)?(?:px|rem|em|ms|s|%)?\\b)|(<\\/?[A-Za-z][\\w.-]*)|([A-Za-z_$][\\w$-]*)|([{}()[\\];,.:=+\\-*/%!?&|<>~^@#]+)/\n .source;\nconst SLASH_RE = new RegExp(/(\\/\\/[^\\n]*|\\/\\*[\\s\\S]*?\\*\\/|)|/.source + REST, \"g\");\nconst HASH_RE = new RegExp(/((? last) out.push([\"plain\", code.slice(last, i)]);\n const [text, comment, str, num, tag, ident] = m;\n const after = code.slice(i + text.length);\n let type: TokenType = \"punct\";\n if (comment) type = \"comment\";\n else if (str) type = keyed && /^\\s*:/.test(after) ? \"attr\" : \"string\";\n else if (num) type = \"number\";\n else if (tag) {\n out.push([\"punct\", text.startsWith(\" {\n if (k > 0) lines.push([]);\n if (part) lines[lines.length - 1].push([type, part]);\n });\n }\n return lines;\n}\n\n/** \"2,4-6\" or [2,4,5,6] -> Set of 1-based line numbers. */\nfunction parseLines(spec: string | number[] | undefined) {\n const set = new Set();\n if (Array.isArray(spec)) spec.forEach((n) => set.add(n));\n else\n for (const part of (spec ?? \"\").split(\",\")) {\n const [a, b = a] = part.split(\"-\").map((s) => parseInt(s, 10));\n if (!Number.isNaN(a)) for (let n = a; n <= (Number.isNaN(b) ? a : b); n++) set.add(n);\n }\n return set;\n}\n\nexport interface CodeBlockProps extends Omit, \"children\"> {\n code: string;\n /** Used for token rules and the header badge: tsx, ts, js, css, json, bash, python... */\n language?: string;\n /** Shown as a tab in the header. */\n filename?: string;\n showLineNumbers?: boolean;\n /** Lines to highlight, 1-based: \"3\" | \"2,5-7\" | [2, 5, 6, 7]. */\n highlightLines?: string | number[];\n /** Show the copy button. */\n copyable?: boolean;\n}\n\nexport function CodeBlock({\n code,\n language = \"tsx\",\n filename,\n showLineNumbers = true,\n highlightLines,\n copyable = true,\n className,\n ...props\n}: CodeBlockProps) {\n const lines = useMemo(() => toLines(tokenize(code.replace(/\\n$/, \"\"), language)), [code, language]);\n const marked = useMemo(() => parseLines(highlightLines), [highlightLines]);\n const [copied, setCopied] = useState(false);\n const timer = useRef>(undefined);\n useEffect(() => () => clearTimeout(timer.current), []);\n\n const copy = async () => {\n try {\n await navigator.clipboard.writeText(code);\n } catch {\n return; // clipboard blocked (insecure context / permissions): leave the icon as is\n }\n setCopied(true);\n clearTimeout(timer.current);\n timer.current = setTimeout(() => setCopied(false), 1800);\n };\n\n let hlIndex = 0;\n return (\n \n \n
\n {filename ? (\n
\n \n {filename}\n \n \n
\n ) : (\n {language}\n )}\n
\n {filename && (\n \n {language}\n \n )}\n {copyable && (\n \n \n \n \n {copied ? : }\n \n \n \n \n {copied ? \"Copied to clipboard\" : \"\"}\n \n \n )}\n
\n
\n 
\n        \n          {lines.map((line, n) => {\n            const hl = marked.has(n + 1);\n            return (\n              \n                {showLineNumbers && (\n                  \n                    {n + 1}\n                  \n                )}\n                \n                  {line.length ? line.map(([t, text], k) => (t === \"plain\" ? text : {text})) : \" \"}\n                \n              \n            );\n          })}\n        \n
\n \n );\n}\n"}]}