@inferencesh/ui 0.0.0-stage → 0.1.2

package/src/components/code-block/code-block.tsx

@@ -0,0 +1,260 @@
+'use client'
+
+import { cn } from 'cn'
+import { Check, Copy } from 'lucide-react'
+import React, { memo, useMemo, useState } from 'react'
+
+import { tokenize, type TokenizeContext } from './tokenizer'
+import { tokenStyles } from './styles'
+import { normalizeLanguage } from './languages'
+import { getTextContent, splitLines, copyToClipboard } from './utils'
+
+// Re-export types for consumers
+export type { Token, TokenType, LanguageDefinition } from './types'
+export { getLanguage, normalizeLanguage } from './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<typeof tokenize>['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<typeof tokenize>['tokens']
+}) {
+  return (
+    <>
+      {tokens.map((token, i) =>
+        token.type ? (
+          <span key={i} className={tokenStyles[token.type]}>
+            {token.content}
+          </span>
+        ) : (
+          <span key={i}>{token.content}</span>
+        )
+      )}
+    </>
+  )
+})
+
+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 (
+    <div
+      className={cn(
+        'relative group/codeblock my-6 rounded-lg border border-border overflow-hidden bg-muted/40 dark:bg-muted/20 min-h-0 flex flex-col',
+        className
+      )}
+    >
+      {/* Header bar */}
+      {showHeader && (
+        <div className="flex-none flex items-center justify-between px-2 py-2 border-b border-border/30 bg-muted">
+          <span className="text-xs text-zinc-500 font-mono">
+            {language || 'code'}
+          </span>
+          {showCopyButton && (
+            <button
+              onClick={handleCopy}
+              className="cursor-pointer flex items-center gap-1.5 rounded text-xs text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+              aria-label="Copy code"
+            >
+              {copied ? (
+                <>
+                  <Check className="h-3.5 w-3.5 text-emerald-400" />
+                  <span>copied!</span>
+                </>
+              ) : (
+                <>
+                  <Copy className="h-3.5 w-3.5" />
+                  <span>copy</span>
+                </>
+              )}
+            </button>
+          )}
+        </div>
+      )}
+
+      {/* Code content */}
+      <pre className="flex-1 min-h-0 overflow-auto p-4">
+        <code className={cn('grid font-mono', textSize || 'text-xs')}>
+          {lines.map((line, i) => (
+            <span
+              key={i}
+              className={cn(
+                'grid gap-6',
+                showLineNumbers ? 'grid-cols-[auto_1fr]' : 'grid-cols-1'
+              )}
+            >
+              {showLineNumbers && (
+                <span className="text-zinc-600 select-none text-right min-w-[2ch] text-xs leading-6">
+                  {i + 1}
+                </span>
+              )}
+              <span className="whitespace-pre leading-6">
+                {tokenizedLines ? (
+                  <HighlightedLine tokens={tokenizedLines[i]?.tokens ?? [{ type: null, content: line || ' ' }]} />
+                ) : (
+                  line || ' '
+                )}
+              </span>
+            </span>
+          ))}
+        </code>
+      </pre>
+    </div>
+  )
+})
+
+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 (
+    <div
+      className={cn(
+        'relative group/codeblock block bg-muted/30 rounded-lg max-w-full min-w-0',
+        className
+      )}
+    >
+      <button
+        onClick={handleCopy}
+        className="cursor-pointer absolute top-1 right-1 p-1.5 rounded bg-background/80 hover:bg-background border border-border opacity-0 group-hover/codeblock:opacity-100 transition-opacity z-10"
+        aria-label="Copy code"
+      >
+        {copied ? (
+          <Check className="h-3.5 w-3.5 text-pink-400" />
+        ) : (
+          <Copy className="h-3.5 w-3.5 text-muted-foreground" />
+        )}
+      </button>
+      <div className="overflow-y-auto max-h-[inherit] p-2">
+        <pre className="overflow-x-auto">
+          <code className="grid">
+            {lines.map((line, i) => (
+              <span key={i} className="grid grid-cols-[auto_1fr] gap-4">
+                <span
+                  className={cn(
+                    textSize,
+                    'text-muted-foreground/30 select-none text-right min-w-[2ch]'
+                  )}
+                >
+                  {i + 1}
+                </span>
+                <span
+                  className={cn(
+                    textSize,
+                    'whitespace-pre-wrap break-all',
+                    !tokenizedLines && 'text-muted-foreground'
+                  )}
+                >
+                  {tokenizedLines ? (
+                    <HighlightedLine tokens={tokenizedLines[i]?.tokens ?? [{ type: null, content: line || ' ' }]} />
+                  ) : (
+                    line || ' '
+                  )}
+                </span>
+              </span>
+            ))}
+          </code>
+        </pre>
+      </div>
+    </div>
+  )
+})

package/src/components/code-block/index.ts

@@ -0,0 +1,18 @@
+export {
+  CodeBlock,
+  CompactCodeBlock,
+  type CodeBlockProps,
+  type CompactCodeBlockProps,
+} from './code-block'
+
+// Types
+export type { Token, TokenType, LanguageDefinition } from './types'
+
+// Language utilities
+export { getLanguage, normalizeLanguage, languages } from './languages'
+
+// Tokenizer (for advanced usage)
+export { tokenize } from './tokenizer'
+
+// Styles (for customization)
+export { tokenStyles, getTokenStyle } from './styles'

package/src/components/code-block/languages.ts

@@ -0,0 +1,311 @@
+import type { LanguageDefinition } from './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: [
+      /^<!--[\s\S]*?-->/,
+    ],
+    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
+      /^'(?:[^'\\]|\\.)*'/,
+    ],
+  },
+}
+
+/**
+ * Swift language definition
+ */
+export const swift: LanguageDefinition = {
+  name: 'swift',
+  aliases: [],
+  keywords: {
+    import: new Set(['import']),
+    declaration: new Set([
+      'let', 'var', 'func', 'class', 'struct', 'enum', 'protocol', 'extension',
+      'actor', 'init', 'deinit', 'typealias', 'associatedtype', 'static',
+      'final', 'private', 'fileprivate', 'internal', 'public', 'open',
+      'mutating', 'nonmutating', 'override', 'lazy', 'weak', 'unowned',
+      'async', 'throws', 'rethrows', 'some', 'any', 'inout', 'nonisolated',
+    ]),
+    control: new Set([
+      'if', 'else', 'guard', 'for', 'in', 'while', 'repeat', 'switch', 'case',
+      'default', 'break', 'continue', 'return', 'do', 'try', 'catch', 'throw',
+      'await', 'defer', 'where', 'fallthrough',
+    ]),
+    value: new Set(['true', 'false', 'nil', 'self', 'Self', 'super']),
+    other: new Set(['as', 'is']),
+    type: new Set([
+      'String', 'Int', 'Double', 'Float', 'Bool', 'Data', 'URL', 'Void',
+      'Any', 'Error', 'Task',
+    ]),
+  },
+  patterns: {
+    comment: [
+      /^\/\/[^\n]*/,
+      /^\/\*[\s\S]*?\*\//,
+    ],
+    string: [
+      /^"""[\s\S]*?"""/,             // multi-line
+      /^#+"[\s\S]*?"#+/,             // raw strings
+      /^"(?:[^"\\\n]|\\.)*"/,       // double quotes
+    ],
+  },
+}
+
+/**
+ * All supported languages
+ */
+export const languages: Record<string, LanguageDefinition> = {
+  javascript,
+  python,
+  bash,
+  json,
+  css,
+  html,
+  go,
+  rust,
+  swift,
+}
+
+/**
+ * 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'
+}

package/src/components/code-block/styles.ts

@@ -0,0 +1,39 @@
+import type { TokenType } from './types'
+
+/**
+ * Tailwind classes for each token type
+ * Light mode uses *-600/*-700 for contrast, dark mode uses *-400
+ */
+export const tokenStyles: Record<TokenType, string> = {
+  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
+}