4f: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"] 50:T1ed3,'use client' import { cn } from '@/lib/utils' import { Check, Copy } from 'lucide-react' import React, { memo, useMemo, useState } from 'react' import { tokenize, type TokenizeContext } from '@/components/infsh/code-block/tokenizer' import { tokenStyles } from '@/components/infsh/code-block/styles' import { normalizeLanguage } from '@/components/infsh/code-block/languages' import { getTextContent, splitLines, copyToClipboard } from '@/components/infsh/code-block/utils' // Re-export types for consumers export type { Token, TokenType, LanguageDefinition } from '@/components/infsh/code-block/types' export { getLanguage, normalizeLanguage } from '@/components/infsh/code-block/languages' /** * Tokenize all lines with context passing between lines * This handles multiline constructs like template literals */ function tokenizeLines(lines: string[], language: string) { const tokenizedLines: { tokens: ReturnType['tokens'] }[] = [] let context: TokenizeContext = {} for (const line of lines) { const result = tokenize(line, language, context) tokenizedLines.push({ tokens: result.tokens }) context = result.context } return tokenizedLines } /** * Renders a single line with pre-computed tokens */ const HighlightedLine = memo(function HighlightedLine({ tokens, }: { tokens: ReturnType['tokens'] }) { return ( <> {tokens.map((token, i) => token.type ? ( {token.content} ) : ( {token.content} ) )} ) }) export interface CodeBlockProps { children: React.ReactNode language?: string className?: string /** Show line numbers (default: true) */ showLineNumbers?: boolean /** Show copy button (default: true) */ showCopyButton?: boolean /** Show language header (default: true) */ showHeader?: boolean /** Enable syntax highlighting (default: true) */ enableHighlighting?: boolean /** Custom text size class */ textSize?: string } /** * Full-featured code block with syntax highlighting, line numbers, and copy button */ export const CodeBlock = memo(function CodeBlock({ children, language, className, showLineNumbers = true, showCopyButton = true, showHeader = true, enableHighlighting = true, textSize, }: CodeBlockProps) { const [copied, setCopied] = useState(false) const text = getTextContent(children) const lines = splitLines(text) const normalizedLang = normalizeLanguage(language) // Pre-tokenize all lines with context passing for multiline support const tokenizedLines = useMemo( () => enableHighlighting ? tokenizeLines(lines, normalizedLang) : null, [lines, normalizedLang, enableHighlighting] ) const handleCopy = async () => { const success = await copyToClipboard(text) if (success) { setCopied(true) setTimeout(() => setCopied(false), 1500) } } return (

{/* Header bar */} {showHeader && (

{language || 'code'} {showCopyButton && ( )}

)} {/* Code content */}

        
          {lines.map((line, i) => (
            
              {showLineNumbers && (
                
                  {i + 1}
                
              )}
              
                {tokenizedLines ? (
                  
                ) : (
                  line || ' '
                )}
              
            
          ))}

) }) export interface CompactCodeBlockProps { children: React.ReactNode className?: string textSize?: string /** Optional language for syntax highlighting */ language?: string } /** * Simpler code block for compact/chat contexts * Optional syntax highlighting, minimal styling */ export const CompactCodeBlock = memo(function CompactCodeBlock({ children, className, textSize = 'text-xs', language, }: CompactCodeBlockProps) { const [copied, setCopied] = useState(false) const text = getTextContent(children) const lines = splitLines(text) const normalizedLang = language ? normalizeLanguage(language) : null // Pre-tokenize if language is provided const tokenizedLines = useMemo( () => normalizedLang ? tokenizeLines(lines, normalizedLang) : null, [lines, normalizedLang] ) const handleCopy = async () => { const success = await copyToClipboard(text) if (success) { setCopied(true) setTimeout(() => setCopied(false), 1500) } } return (

          
            {lines.map((line, i) => (
              
                
                  {i + 1}
                
                
                  {tokenizedLines ? (
                    
                  ) : (
                    line || ' '
                  )}
                
              
            ))}

) })51:T1a44,import type { LanguageDefinition } from '@/components/infsh/code-block/types' /** * JavaScript/TypeScript/JSX/TSX language definition * These all share the same tokenization rules */ export const javascript: LanguageDefinition = { name: 'javascript', aliases: ['js', 'jsx', 'typescript', 'ts', 'tsx'], keywords: { import: new Set(['import', 'export', 'from', 'as', 'default']), declaration: new Set([ 'const', 'let', 'var', 'function', 'class', 'extends', 'static', 'get', 'set', 'async', // TypeScript-specific 'type', 'interface', 'enum', 'namespace', 'module', 'declare', 'abstract', 'implements', 'readonly', 'private', 'protected', 'public', 'override', ]), control: new Set([ 'if', 'else', 'for', 'while', 'do', 'switch', 'case', 'break', 'continue', 'return', 'try', 'catch', 'finally', 'throw', 'await', 'yield', 'of', 'in', ]), value: new Set(['true', 'false', 'null', 'undefined']), other: new Set([ 'new', 'delete', 'typeof', 'instanceof', 'void', 'this', 'super', 'satisfies', 'keyof', 'infer', ]), type: new Set([ 'string', 'number', 'boolean', 'object', 'symbol', 'bigint', 'any', 'unknown', 'never', 'void', ]), }, patterns: { comment: [ /^\/\/[^\n]*/, // single line /^\/\*[\s\S]*?\*\//, // multi line ], string: [ /^"(?:[^"\\]|\\.)*"/, // double quotes /^'(?:[^'\\]|\\.)*'/, // single quotes /^`(?:[^`\\]|\\.)*`/, // template literals ], }, } /** * Python language definition */ export const python: LanguageDefinition = { name: 'python', aliases: ['py'], keywords: { import: new Set(['import', 'from', 'as']), declaration: new Set(['def', 'class', 'lambda', 'global', 'nonlocal']), control: new Set([ 'if', 'elif', 'else', 'for', 'while', 'break', 'continue', 'return', 'try', 'except', 'finally', 'raise', 'with', 'yield', 'pass', 'assert', 'match', 'case', ]), value: new Set(['True', 'False', 'None']), other: new Set(['and', 'or', 'not', 'in', 'is', 'del', 'print', 'self', 'cls']), }, patterns: { comment: [ /^#[^\n]*/, ], string: [ /^(?:f|r|b|fr|rf|br|rb)?"""[\s\S]*?"""/, // triple double /^(?:f|r|b|fr|rf|br|rb)?'''[\s\S]*?'''/, // triple single /^(?:f|r|b)?"(?:[^"\\]|\\.)*"/, // double /^(?:f|r|b)?'(?:[^'\\]|\\.)*'/, // single ], }, } /** * Bash/Shell language definition */ export const bash: LanguageDefinition = { name: 'bash', aliases: ['sh', 'shell', 'zsh'], keywords: { control: new Set([ 'if', 'then', 'else', 'elif', 'fi', 'for', 'while', 'do', 'done', 'case', 'esac', 'function', 'return', 'exit', 'select', 'until', 'in', ]), other: new Set([ 'echo', 'export', 'source', 'alias', 'unalias', 'cd', 'pwd', 'ls', 'cat', 'grep', 'sed', 'awk', 'curl', 'wget', 'chmod', 'chown', 'mkdir', 'rm', 'cp', 'mv', 'touch', 'find', 'xargs', 'npm', 'npx', 'yarn', 'pnpm', 'node', 'python', 'pip', 'git', 'docker', 'sudo', 'apt', 'brew', 'make', 'cargo', 'go', ]), }, patterns: { comment: [ /^#[^\n]*/, ], string: [ /^"(?:[^"\\]|\\.)*"/, /^'(?:[^'\\]|\\.)*'/, ], }, } /** * JSON language definition */ export const json: LanguageDefinition = { name: 'json', aliases: ['jsonc'], keywords: { value: new Set(['true', 'false', 'null']), }, patterns: { string: [ /^"(?:[^"\\]|\\.)*"/, ], }, } /** * CSS language definition */ export const css: LanguageDefinition = { name: 'css', aliases: ['scss', 'sass', 'less'], keywords: { other: new Set([ 'important', 'inherit', 'initial', 'unset', 'none', 'auto', ]), }, patterns: { comment: [ /^\/\*[\s\S]*?\*\//, ], string: [ /^"(?:[^"\\]|\\.)*"/, /^'(?:[^'\\]|\\.)*'/, ], }, } /** * HTML/XML language definition */ export const html: LanguageDefinition = { name: 'html', aliases: ['xml', 'svg', 'htm'], keywords: {}, patterns: { comment: [ /^/, ], string: [ /^"(?:[^"\\]|\\.)*"/, /^'(?:[^'\\]|\\.)*'/, ], }, } /** * Go language definition */ export const go: LanguageDefinition = { name: 'go', aliases: ['golang'], keywords: { import: new Set(['import', 'package']), declaration: new Set(['func', 'var', 'const', 'type', 'struct', 'interface', 'map', 'chan']), control: new Set([ 'if', 'else', 'for', 'range', 'switch', 'case', 'default', 'break', 'continue', 'return', 'goto', 'fallthrough', 'defer', 'go', 'select', ]), value: new Set(['true', 'false', 'nil', 'iota']), other: new Set(['make', 'new', 'len', 'cap', 'append', 'copy', 'delete', 'panic', 'recover']), }, patterns: { comment: [ /^\/\/[^\n]*/, /^\/\*[\s\S]*?\*\//, ], string: [ /^"(?:[^"\\]|\\.)*"/, /^'(?:[^'\\]|\\.)*'/, /^`[^`]*`/, // raw strings ], }, } /** * Rust language definition */ export const rust: LanguageDefinition = { name: 'rust', aliases: ['rs'], keywords: { import: new Set(['use', 'mod', 'crate', 'extern', 'as', 'pub']), declaration: new Set([ 'fn', 'let', 'mut', 'const', 'static', 'struct', 'enum', 'trait', 'impl', 'type', 'where', ]), control: new Set([ 'if', 'else', 'for', 'while', 'loop', 'match', 'break', 'continue', 'return', 'async', 'await', 'move', ]), value: new Set(['true', 'false', 'self', 'Self', 'None', 'Some', 'Ok', 'Err']), other: new Set(['unsafe', 'ref', 'dyn', 'macro_rules']), }, patterns: { comment: [ /^\/\/[^\n]*/, /^\/\*[\s\S]*?\*\//, ], string: [ /^"(?:[^"\\]|\\.)*"/, /^r#*"[\s\S]*?"#*/, // raw strings /^'(?:[^'\\]|\\.)*'/, ], }, } /** * All supported languages */ export const languages: Record = { javascript, python, bash, json, css, html, go, rust, } /** * Get language definition by name or alias */ export function getLanguage(name: string): LanguageDefinition | null { const normalized = name.toLowerCase() // Direct match if (languages[normalized]) { return languages[normalized] } // Check aliases for (const lang of Object.values(languages)) { if (lang.aliases.includes(normalized)) { return lang } } return null } /** * Normalize language name to canonical form */ export function normalizeLanguage(language?: string): string { if (!language) return 'text' const lang = getLanguage(language) return lang?.name ?? 'text' } 52:T24f5,import type { Token, TokenType, LanguageDefinition } from '@/components/infsh/code-block/types' import { getLanguage } from '@/components/infsh/code-block/languages' export interface TokenizeContext { /** Whether we're inside a multiline template literal */ inTemplateLiteral?: boolean /** Whether we're inside a multiline comment */ inMultilineComment?: boolean } /** * Get the keyword type for a word in a given language */ function getKeywordType(word: string, lang: LanguageDefinition): TokenType | null { const { keywords } = lang if (keywords.import?.has(word)) return 'keyword-import' if (keywords.declaration?.has(word)) return 'keyword-declaration' if (keywords.control?.has(word)) return 'keyword-control' if (keywords.value?.has(word)) return 'keyword-value' if (keywords.type?.has(word)) return 'type' if (keywords.other?.has(word)) return 'keyword-other' return null } /** * Try to match a pattern at the start of the remaining code */ function tryMatch(remaining: string, patterns: RegExp[] | undefined): string | null { if (!patterns) return null for (const pattern of patterns) { const match = remaining.match(pattern) if (match) { return match[0] } } return null } /** * Check if language supports JSX */ function isJsxLanguage(languageName: string): boolean { const jsxLangs = ['javascript', 'typescript', 'jsx', 'tsx', 'js', 'ts'] return jsxLangs.includes(languageName.toLowerCase()) } /** * Check if language is JSON */ function isJsonLanguage(languageName: string): boolean { return ['json', 'jsonc'].includes(languageName.toLowerCase()) } /** * Heuristic: detect if a line likely starts inside a JSX tag * This handles multi-line JSX where attributes are on separate lines * * Patterns that suggest we're inside a JSX tag: * - Line starts with whitespace + attribute pattern (word followed by = and { or " or ') * - Line starts with whitespace + /> * - Line starts with whitespace + > followed by content or closing tag */ function detectJsxContext(code: string): boolean { // Check for: whitespace + /> (self-closing) if (/^\s+\/>/.test(code)) { return true } // Check for: whitespace + > (closing bracket, but not >= operator) if (/^\s+>(?!=)/.test(code)) { return true } // Check for JSX attribute: whitespace + word + = + { or " or ' (not word=word which is normal code) // This distinguishes " propName={" from " const x =" if (/^\s+[a-zA-Z_][a-zA-Z0-9_-]*\s*=\s*[{{"']/.test(code)) { return true } // Check for: whitespace + { (JSX expression in attribute value on its own line) if (/^\s+\{\s*$/.test(code) || /^\s+\{[^}]*$/.test(code)) { return true } return false } /** * Tokenize a line of code with context for multiline constructs */ export function tokenize( code: string, languageName: string, context?: TokenizeContext ): { tokens: Token[]; context: TokenizeContext } { const lang = getLanguage(languageName) const tokens: Token[] = [] let remaining = code const supportsJsx = isJsxLanguage(languageName) const isJson = isJsonLanguage(languageName) // Carry over context from previous line let inTemplateLiteral = context?.inTemplateLiteral ?? false // If we're inside a template literal from a previous line, treat the whole line as a string // until we find a closing backtick if (inTemplateLiteral) { const closingIndex = remaining.indexOf('`') if (closingIndex === -1) { // No closing backtick, entire line is part of string tokens.push({ type: 'string', content: remaining }) return { tokens, context: { inTemplateLiteral: true } } } else { // Found closing backtick const stringPart = remaining.slice(0, closingIndex + 1) tokens.push({ type: 'string', content: stringPart }) remaining = remaining.slice(closingIndex + 1) inTemplateLiteral = false // Continue tokenizing the rest of the line } } // Track if we're inside a JSX tag (between < and >) // Use heuristic to detect if line starts in JSX context let inJsxTag = supportsJsx && detectJsxContext(code) && !inTemplateLiteral while (remaining.length > 0) { let matched = false // Try to match comments (but not in JSX tag context) if (!inJsxTag && lang?.patterns.comment) { const comment = tryMatch(remaining, lang.patterns.comment) if (comment) { tokens.push({ type: 'comment', content: comment }) remaining = remaining.slice(comment.length) matched = true continue } } // JSX handling for JS/TS languages if (supportsJsx) { // Opening tag: or closing > if (inJsxTag) { if (remaining.startsWith('/>')) { tokens.push({ type: 'punctuation', content: '/>' }) remaining = remaining.slice(2) inJsxTag = false matched = true continue } if (remaining.startsWith('>')) { tokens.push({ type: 'punctuation', content: '>' }) remaining = remaining.slice(1) inJsxTag = false matched = true continue } // JSX attribute: propName= or propName (boolean) or propName (before />) const jsxAttr = remaining.match(/^([a-zA-Z_][a-zA-Z0-9_-]*)(?=\s*=|\s*\/>|\s*>|\s+[a-zA-Z_]|\s*$)/) if (jsxAttr) { tokens.push({ type: 'attribute', content: jsxAttr[1] }) remaining = remaining.slice(jsxAttr[1].length) matched = true continue } } } // Try to match strings if (lang?.patterns.string) { const str = tryMatch(remaining, lang.patterns.string) if (str) { // In JSON, check if this string is a key (followed by :) const afterStr = remaining.slice(str.length) const isJsonKey = isJson && /^\s*:/.test(afterStr) tokens.push({ type: isJsonKey ? 'property' : 'string', content: str }) remaining = remaining.slice(str.length) matched = true continue } // Check for template literal that starts but doesn't end (multiline) // Only trigger if we're AT a backtick and it doesn't close on this line if (remaining[0] === '`') { // Template literal starts but no closing backtick on this line tokens.push({ type: 'string', content: remaining }) return { tokens, context: { inTemplateLiteral: true } } } } // Fallback string patterns for unknown languages if (!lang) { const doubleStr = remaining.match(/^"(?:[^"\\]|\\.)*"/) if (doubleStr) { tokens.push({ type: 'string', content: doubleStr[0] }) remaining = remaining.slice(doubleStr[0].length) matched = true continue } const singleStr = remaining.match(/^'(?:[^'\\]|\\.)*'/) if (singleStr) { tokens.push({ type: 'string', content: singleStr[0] }) remaining = remaining.slice(singleStr[0].length) matched = true continue } } // Numbers const number = remaining.match(/^-?\b\d+\.?\d*(?:e[+-]?\d+)?\b/i) if (number) { tokens.push({ type: 'number', content: number[0] }) remaining = remaining.slice(number[0].length) matched = true continue } // Keywords and identifiers (when not in JSX tag) const word = remaining.match(/^[a-zA-Z_$][a-zA-Z0-9_$]*/) if (word) { const afterWord = remaining.slice(word[0].length) // Check if this is an object property key (word followed by : but not ::) const isPropertyKey = /^\s*:(?!:)/.test(afterWord) let tokenType: TokenType | null = null if (isPropertyKey) { tokenType = 'property' } else if (lang && !inJsxTag) { tokenType = getKeywordType(word[0], lang) } tokens.push({ type: tokenType, content: word[0], }) remaining = remaining.slice(word[0].length) matched = true continue } // Operators (common across most languages) const operator = remaining.match( /^(?:===|!==|==|!=|<=|>=|=>|->|::|\.\.\.?|\?\?|\?\.|&&|\|\||[+\-*/%<>=!&|^~?:])/ ) if (operator) { tokens.push({ type: 'operator', content: operator[0] }) remaining = remaining.slice(operator[0].length) matched = true continue } // Punctuation const punct = remaining.match(/^[{}[\]();,.<>]/) if (punct) { tokens.push({ type: 'punctuation', content: punct[0] }) remaining = remaining.slice(punct[0].length) matched = true continue } // Default: single character (whitespace, etc.) if (!matched) { tokens.push({ type: null, content: remaining[0] }) remaining = remaining.slice(1) } } return { tokens, context: { inTemplateLiteral } } } 53:T4df,import type { TokenType } from '@/components/infsh/code-block/types' /** * Tailwind classes for each token type * Light mode uses *-600/*-700 for contrast, dark mode uses *-400 */ export const tokenStyles: Record = { comment: 'text-zinc-400 dark:text-zinc-500 italic', string: 'text-stone-500 dark:text-stone-400', 'keyword-import': 'text-pink-600 dark:text-pink-400 font-medium', 'keyword-declaration': 'text-violet-600 dark:text-violet-400 font-medium', 'keyword-control': 'text-blue-600 dark:text-blue-400 font-medium', 'keyword-value': 'text-cyan-600 dark:text-cyan-400', 'keyword-other': 'text-violet-600 dark:text-violet-400', type: 'text-cyan-600 dark:text-cyan-400', number: 'text-emerald-600 dark:text-emerald-400', function: 'text-green-600 dark:text-green-400', property: 'text-blue-600 dark:text-blue-400', operator: 'text-zinc-500 dark:text-zinc-400', punctuation: 'text-zinc-500 dark:text-zinc-400', tag: 'text-red-600 dark:text-red-400', attribute: 'text-orange-600 dark:text-orange-300', } /** * Get the CSS class for a token type */ export function getTokenStyle(type: TokenType | null): string | null { if (!type) return null return tokenStyles[type] ?? null } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4f",null,{"files":[{"path":"components/infsh/code-block/code-block.tsx","content":"$50","type":"registry:component","target":"components/infsh/code-block/code-block.tsx"},{"path":"components/infsh/code-block/index.ts","content":"export {\n CodeBlock,\n CompactCodeBlock,\n type CodeBlockProps,\n type CompactCodeBlockProps,\n} from '@/components/infsh/code-block/code-block'\n\n// Types\nexport type { Token, TokenType, LanguageDefinition } from '@/components/infsh/code-block/types'\n\n// Language utilities\nexport { getLanguage, normalizeLanguage, languages } from '@/components/infsh/code-block/languages'\n\n// Tokenizer (for advanced usage)\nexport { tokenize } from '@/components/infsh/code-block/tokenizer'\n\n// Styles (for customization)\nexport { tokenStyles, getTokenStyle } from '@/components/infsh/code-block/styles'\n","type":"registry:lib","target":"components/infsh/code-block/index.ts"},{"path":"components/infsh/code-block/types.ts","content":"export type TokenType =\n | 'comment'\n | 'string'\n | 'keyword-import' // import, export, from, as\n | 'keyword-declaration' // const, let, var, function, class, type, interface\n | 'keyword-control' // if, else, return, for, while\n | 'keyword-value' // true, false, null, undefined\n | 'keyword-other' // new, this, typeof, etc.\n | 'number'\n | 'function'\n | 'property'\n | 'operator'\n | 'punctuation'\n | 'type' // type annotations in TS\n | 'tag' // JSX/HTML tag names\n | 'attribute' // JSX/HTML attributes\n\nexport interface Token {\n type: TokenType | null\n content: string\n}\n\nexport interface LanguageDefinition {\n name: string\n aliases: string[]\n keywords: {\n import?: Set\n declaration?: Set\n control?: Set\n value?: Set\n other?: Set\n type?: Set\n }\n patterns: {\n comment?: RegExp[]\n string?: RegExp[]\n }\n}\n","type":"registry:lib","target":"components/infsh/code-block/types.ts"},{"path":"components/infsh/code-block/languages.ts","content":"$51","type":"registry:lib","target":"components/infsh/code-block/languages.ts"},{"path":"components/infsh/code-block/tokenizer.ts","content":"$52","type":"registry:lib","target":"components/infsh/code-block/tokenizer.ts"},{"path":"components/infsh/code-block/styles.ts","content":"$53","type":"registry:lib","target":"components/infsh/code-block/styles.ts"},{"path":"components/infsh/code-block/utils.ts","content":"import React from 'react'\n\n/**\n * Extract text content from React children\n * Handles strings, numbers, arrays, and nested elements\n */\nexport function getTextContent(node: React.ReactNode): string {\n if (typeof node === 'string') return node\n if (typeof node === 'number') return String(node)\n if (!node) return ''\n if (Array.isArray(node)) return node.map(getTextContent).join('')\n if (React.isValidElement(node)) {\n return getTextContent((node.props as { children?: React.ReactNode }).children)\n }\n return ''\n}\n\n/**\n * Split code into lines, removing trailing empty line if present\n */\nexport function splitLines(code: string): string[] {\n const lines = code.split('\\n')\n if (lines.length > 1 && lines[lines.length - 1] === '') {\n lines.pop()\n }\n return lines\n}\n\n/**\n * Copy text to clipboard\n */\nexport async function copyToClipboard(text: string): Promise {\n try {\n await navigator.clipboard.writeText(text)\n return true\n } catch {\n return false\n }\n}\n","type":"registry:lib","target":"components/infsh/code-block/utils.ts"}],"className":"h-[70svh] min-h-80"}]]}]