4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:Td5a,import { useMemo } from 'react' import { cn } from '@/lib/utils' export interface CodeBlockProps { /** Code string to display */ code: string /** Programming language for syntax highlighting */ language?: 'javascript' | 'typescript' | 'json' | 'bash' | 'css' /** Show line numbers */ showLineNumbers?: boolean /** Additional class names */ className?: string } interface Token { type: | 'keyword' | 'string' | 'number' | 'comment' | 'property' | 'punctuation' | 'text' value: string } const COLORS = { keyword: 'var(--color-coral)', string: 'var(--color-mint)', number: 'var(--color-gold)', comment: 'var(--color-grey-500)', property: 'var(--color-sage)', punctuation: 'var(--color-grey-400)', text: 'var(--color-grey-200)', } function tokenize(code: string): Token[] { const tokens: Token[] = [] let remaining = code const patterns: [RegExp, Token['type']][] = [ [/^\/\/.*$/m, 'comment'], [/^\/\*[\s\S]*?\*\//, 'comment'], [/^#.*$/m, 'comment'], // bash comments [/^'[^']*'/, 'string'], [/^"[^"]*"/, 'string'], [/^`[^`]*`/, 'string'], [ /^\b(const|let|var|function|return|if|else|for|while|import|export|from|default|class|extends|new|this|true|false|null|undefined|async|await|try|catch|throw|finally|typeof|instanceof|in|of|yield|switch|case|break|continue|do|with|debugger|delete|void)\b/, 'keyword', ], [/^\b\d+(\.\d+)?\b/, 'number'], [/^[a-zA-Z_][a-zA-Z0-9_]*(?=\s*:)/, 'property'], [/^[{}[\](),;:=<>!&|?+\-*/%^~]/, 'punctuation'], [/^\s+/, 'text'], [/^[^\s{}[\](),;:'"`=<>!&|?+\-*/%^~]+/, 'text'], ] while (remaining.length > 0) { let matched = false for (const [pattern, type] of patterns) { const match = remaining.match(pattern) if (match) { tokens.push({ type, value: match[0] }) remaining = remaining.slice(match[0].length) matched = true break } } if (!matched) { tokens.push({ type: 'text', value: remaining[0] }) remaining = remaining.slice(1) } } return tokens } /** * Lightweight syntax highlighting code block * No external dependencies, uses CSS custom properties for theming */ export function CodeBlock({ code, language: _language = 'javascript', showLineNumbers = false, className, }: CodeBlockProps) { const tokens = useMemo(() => tokenize(code), [code]) const lines = useMemo(() => code.split('\n'), [code]) return (

      
        {showLineNumbers && (
          
            {lines.map((_, i) => (
              
                {i + 1}
              
            ))}
          
        )}
        
          {tokens.map((token, i) => (
            
              {token.value}
            
          ))}

) } 4b:["$","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":[null,["$","$L4c",null,{"namespace":"@n3wth","registryDependencies":["cn"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"registry/new-york/code-block/code-block.tsx","content":"$4e","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]