shadcn/app/public/registry/styles/default/code-terminal.json

{
  "name": "code-terminal",
  "description": "Terminal-style code interface",
  "dependencies": [
    "xterm",
    "xterm-addon-fit"
  ],
  "files": [
    {
      "name": "code-terminal.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport {\n  ChevronRight,\n  Copy,\n  Download,\n  Maximize2,\n  Minimize2,\n  Minus,\n  Plus,\n  RefreshCw,\n  Settings,\n  Square,\n  Terminal,\n  X,\n} from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\"\nimport { Separator } from \"@/registry/default/ui/separator\"\n\nconst codeTerminalVariants = cva(\n  \"relative flex flex-col overflow-hidden rounded-lg border\",\n  {\n    variants: {\n      theme: {\n        dark: \"bg-black border-gray-700 text-green-400\",\n        light: \"bg-white border-gray-300 text-gray-900\",\n        matrix: \"bg-black border-green-500 text-green-400\",\n        hacker: \"bg-gray-900 border-yellow-500 text-yellow-400\",\n        retro: \"bg-amber-900 border-amber-600 text-amber-100\",\n        modern: \"bg-slate-900 border-slate-700 text-slate-100\",\n      },\n      size: {\n        sm: \"text-xs\",\n        default: \"text-sm\",\n        lg: \"text-base\",\n      },\n    },\n    defaultVariants: {\n      theme: \"dark\",\n      size: \"default\",\n    },\n  }\n)\n\nexport interface TerminalLine {\n  id: string\n  type: \"input\" | \"output\" | \"error\" | \"system\"\n  content: string\n  timestamp: number\n  command?: string\n  exitCode?: number\n}\n\nexport interface CodeTerminalProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof codeTerminalVariants> {\n  title?: string\n  prompt?: string\n  maxLines?: number\n  showLineNumbers?: boolean\n  allowInput?: boolean\n  allowClear?: boolean\n  allowCopy?: boolean\n  allowDownload?: boolean\n  allowFullscreen?: boolean\n  height?: string\n  autoScroll?: boolean\n  history?: string[]\n  onCommand?: (command: string) => void | Promise<void>\n  onClear?: () => void\n  initialLines?: TerminalLine[]\n}\n\n// ANSI color codes mapping\nconst ansiColors = {\n  reset: \"\",\n  black: \"text-black\",\n  red: \"text-red-500\",\n  green: \"text-green-500\",\n  yellow: \"text-yellow-500\",\n  blue: \"text-blue-500\",\n  magenta: \"text-magenta-500\",\n  cyan: \"text-cyan-500\",\n  white: \"text-white\",\n  gray: \"text-gray-500\",\n  brightRed: \"text-red-400\",\n  brightGreen: \"text-green-400\",\n  brightYellow: \"text-yellow-400\",\n  brightBlue: \"text-blue-400\",\n  brightMagenta: \"text-magenta-400\",\n  brightCyan: \"text-cyan-400\",\n  brightWhite: \"text-gray-100\",\n}\n\n// Parse ANSI escape sequences\nconst parseAnsiContent = (content: string): React.ReactNode => {\n  const ansiRegex = /\\x1b\\[([0-9;]*)m/g\n  const parts: Array<{ text: string; classes: string[] }> = []\n  let lastIndex = 0\n  let currentClasses: string[] = []\n\n  let match\n  while ((match = ansiRegex.exec(content)) !== null) {\n    // Add text before this escape sequence\n    if (match.index > lastIndex) {\n      parts.push({\n        text: content.slice(lastIndex, match.index),\n        classes: [...currentClasses],\n      })\n    }\n\n    // Parse the escape sequence\n    const codes = match[1].split(\";\").map((code) => parseInt(code) || 0)\n    codes.forEach((code) => {\n      switch (code) {\n        case 0:\n          currentClasses = []\n          break // reset\n        case 30:\n          currentClasses.push(ansiColors.black)\n          break\n        case 31:\n          currentClasses.push(ansiColors.red)\n          break\n        case 32:\n          currentClasses.push(ansiColors.green)\n          break\n        case 33:\n          currentClasses.push(ansiColors.yellow)\n          break\n        case 34:\n          currentClasses.push(ansiColors.blue)\n          break\n        case 35:\n          currentClasses.push(ansiColors.magenta)\n          break\n        case 36:\n          currentClasses.push(ansiColors.cyan)\n          break\n        case 37:\n          currentClasses.push(ansiColors.white)\n          break\n        case 90:\n          currentClasses.push(ansiColors.gray)\n          break\n        case 91:\n          currentClasses.push(ansiColors.brightRed)\n          break\n        case 92:\n          currentClasses.push(ansiColors.brightGreen)\n          break\n        case 93:\n          currentClasses.push(ansiColors.brightYellow)\n          break\n        case 94:\n          currentClasses.push(ansiColors.brightBlue)\n          break\n        case 95:\n          currentClasses.push(ansiColors.brightMagenta)\n          break\n        case 96:\n          currentClasses.push(ansiColors.brightCyan)\n          break\n        case 97:\n          currentClasses.push(ansiColors.brightWhite)\n          break\n      }\n    })\n\n    lastIndex = match.index + match[0].length\n  }\n\n  // Add remaining text\n  if (lastIndex < content.length) {\n    parts.push({\n      text: content.slice(lastIndex),\n      classes: [...currentClasses],\n    })\n  }\n\n  return parts.map((part, index) => (\n    <span key={index} className={cn(part.classes)}>\n      {part.text}\n    </span>\n  ))\n}\n\nconst CodeTerminal = React.forwardRef<HTMLDivElement, CodeTerminalProps>(\n  (\n    {\n      className,\n      theme,\n      size,\n      title = \"Terminal\",\n      prompt = \"$\",\n      maxLines = 1000,\n      showLineNumbers = false,\n      allowInput = true,\n      allowClear = true,\n      allowCopy = true,\n      allowDownload = false,\n      allowFullscreen = true,\n      height = \"400px\",\n      autoScroll = true,\n      history = [],\n      onCommand,\n      onClear,\n      initialLines = [],\n      ...props\n    },\n    ref\n  ) => {\n    const [lines, setLines] = React.useState<TerminalLine[]>(initialLines)\n    const [input, setInput] = React.useState(\"\")\n    const [historyIndex, setHistoryIndex] = React.useState(-1)\n    const [isFullscreen, setIsFullscreen] = React.useState(false)\n    const [commandHistory, setCommandHistory] =\n      React.useState<string[]>(history)\n\n    const scrollAreaRef = React.useRef<HTMLDivElement>(null)\n    const inputRef = React.useRef<HTMLInputElement>(null)\n\n    // Auto-scroll to bottom\n    React.useEffect(() => {\n      if (autoScroll && scrollAreaRef.current) {\n        scrollAreaRef.current.scrollTop = scrollAreaRef.current.scrollHeight\n      }\n    }, [lines, autoScroll])\n\n    const addLine = React.useCallback(\n      (line: Omit<TerminalLine, \"id\" | \"timestamp\">) => {\n        const newLine: TerminalLine = {\n          ...line,\n          id: `line-${Date.now()}-${Math.random()}`,\n          timestamp: Date.now(),\n        }\n\n        setLines((prev) => {\n          const updated = [...prev, newLine]\n          return updated.length > maxLines ? updated.slice(-maxLines) : updated\n        })\n      },\n      [maxLines]\n    )\n\n    const handleCommand = React.useCallback(\n      async (command: string) => {\n        if (!command.trim()) return\n\n        // Add command to history\n        setCommandHistory((prev) => [...prev, command])\n        setHistoryIndex(-1)\n\n        // Add input line\n        addLine({\n          type: \"input\",\n          content: `${prompt} ${command}`,\n          command,\n        })\n\n        // Handle built-in commands\n        if (command === \"clear\") {\n          if (onClear) {\n            onClear()\n          } else {\n            setLines([])\n          }\n          return\n        }\n\n        if (command === \"history\") {\n          commandHistory.forEach((cmd, index) => {\n            addLine({\n              type: \"output\",\n              content: `${index + 1}  ${cmd}`,\n            })\n          })\n          return\n        }\n\n        if (command.startsWith(\"echo \")) {\n          addLine({\n            type: \"output\",\n            content: command.slice(5),\n          })\n          return\n        }\n\n        // Call custom command handler\n        if (onCommand) {\n          try {\n            await onCommand(command)\n          } catch (error) {\n            addLine({\n              type: \"error\",\n              content: error instanceof Error ? error.message : String(error),\n              exitCode: 1,\n            })\n          }\n        } else {\n          addLine({\n            type: \"error\",\n            content: `Command not found: ${command}`,\n            exitCode: 127,\n          })\n        }\n      },\n      [prompt, addLine, onCommand, onClear, commandHistory]\n    )\n\n    const handleInputSubmit = (e: React.FormEvent) => {\n      e.preventDefault()\n      if (input.trim()) {\n        handleCommand(input)\n        setInput(\"\")\n      }\n    }\n\n    const handleKeyDown = (e: React.KeyboardEvent) => {\n      if (e.key === \"ArrowUp\") {\n        e.preventDefault()\n        if (historyIndex < commandHistory.length - 1) {\n          const newIndex = historyIndex + 1\n          setHistoryIndex(newIndex)\n          setInput(commandHistory[commandHistory.length - 1 - newIndex] || \"\")\n        }\n      } else if (e.key === \"ArrowDown\") {\n        e.preventDefault()\n        if (historyIndex > 0) {\n          const newIndex = historyIndex - 1\n          setHistoryIndex(newIndex)\n          setInput(commandHistory[commandHistory.length - 1 - newIndex] || \"\")\n        } else if (historyIndex === 0) {\n          setHistoryIndex(-1)\n          setInput(\"\")\n        }\n      }\n    }\n\n    const copyContent = React.useCallback(async () => {\n      const content = lines.map((line) => line.content).join(\"\\n\")\n\n      try {\n        await navigator.clipboard.writeText(content)\n      } catch (error) {\n        console.error(\"Failed to copy terminal content:\", error)\n      }\n    }, [lines])\n\n    const downloadContent = React.useCallback(() => {\n      const content = lines\n        .map(\n          (line) =>\n            `[${new Date(line.timestamp).toISOString()}] ${line.content}`\n        )\n        .join(\"\\n\")\n\n      const blob = new Blob([content], { type: \"text/plain\" })\n      const url = URL.createObjectURL(blob)\n      const a = document.createElement(\"a\")\n      a.href = url\n      a.download = `terminal-${Date.now()}.txt`\n      document.body.appendChild(a)\n      a.click()\n      document.body.removeChild(a)\n      URL.revokeObjectURL(url)\n    }, [lines])\n\n    const clearTerminal = () => {\n      if (onClear) {\n        onClear()\n      } else {\n        setLines([])\n      }\n    }\n\n    // Focus input when terminal is clicked\n    const handleTerminalClick = () => {\n      if (allowInput && inputRef.current) {\n        inputRef.current.focus()\n      }\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          codeTerminalVariants({ theme, size }),\n          isFullscreen && \"fixed inset-0 z-50\",\n          className\n        )}\n        style={{ height: isFullscreen ? \"100vh\" : height }}\n        onClick={handleTerminalClick}\n        {...props}\n      >\n        {/* Header */}\n        <div className=\"flex items-center justify-between border-b px-4 py-2 bg-muted/30\">\n          <div className=\"flex items-center gap-2\">\n            <div className=\"flex gap-1\">\n              <div className=\"w-3 h-3 rounded-full bg-red-500\" />\n              <div className=\"w-3 h-3 rounded-full bg-yellow-500\" />\n              <div className=\"w-3 h-3 rounded-full bg-green-500\" />\n            </div>\n            <Terminal className=\"h-4 w-4\" />\n            <span className=\"text-sm font-medium\">{title}</span>\n            {lines.length > 0 && (\n              <span className=\"text-xs text-muted-foreground\">\n                {lines.length} lines\n              </span>\n            )}\n          </div>\n\n          <div className=\"flex items-center gap-1\">\n            {allowClear && (\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={clearTerminal}\n                className=\"h-8 w-8 p-0\"\n              >\n                <RefreshCw className=\"h-3.5 w-3.5\" />\n              </Button>\n            )}\n\n            {allowCopy && (\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={copyContent}\n                className=\"h-8 w-8 p-0\"\n              >\n                <Copy className=\"h-3.5 w-3.5\" />\n              </Button>\n            )}\n\n            {allowDownload && (\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={downloadContent}\n                className=\"h-8 w-8 p-0\"\n              >\n                <Download className=\"h-3.5 w-3.5\" />\n              </Button>\n            )}\n\n            {allowFullscreen && (\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={() => setIsFullscreen(!isFullscreen)}\n                className=\"h-8 w-8 p-0\"\n              >\n                {isFullscreen ? (\n                  <Minimize2 className=\"h-3.5 w-3.5\" />\n                ) : (\n                  <Maximize2 className=\"h-3.5 w-3.5\" />\n                )}\n              </Button>\n            )}\n          </div>\n        </div>\n\n        {/* Content */}\n        <div className=\"flex-1 flex flex-col min-h-0\">\n          <ScrollArea ref={scrollAreaRef} className=\"flex-1 p-4\">\n            <div className=\"space-y-1 font-mono\">\n              {lines.map((line, index) => (\n                <div key={line.id} className=\"flex items-start gap-2\">\n                  {showLineNumbers && (\n                    <span className=\"text-xs text-muted-foreground w-12 text-right flex-shrink-0\">\n                      {index + 1}\n                    </span>\n                  )}\n                  <div\n                    className={cn(\n                      \"flex-1 whitespace-pre-wrap break-words\",\n                      line.type === \"input\" && \"text-inherit\",\n                      line.type === \"output\" && \"text-muted-foreground\",\n                      line.type === \"error\" && \"text-red-400\",\n                      line.type === \"system\" && \"text-blue-400\"\n                    )}\n                  >\n                    {typeof line.content === \"string\" &&\n                    line.content.includes(\"\\x1b[\")\n                      ? parseAnsiContent(line.content)\n                      : line.content}\n                  </div>\n                </div>\n              ))}\n            </div>\n          </ScrollArea>\n\n          {/* Input */}\n          {allowInput && (\n            <>\n              <Separator />\n              <form onSubmit={handleInputSubmit} className=\"p-4\">\n                <div className=\"flex items-center gap-2 font-mono\">\n                  <ChevronRight className=\"h-4 w-4 flex-shrink-0\" />\n                  <span className=\"flex-shrink-0\">{prompt}</span>\n                  <Input\n                    ref={inputRef}\n                    value={input}\n                    onChange={(e) => setInput(e.target.value)}\n                    onKeyDown={handleKeyDown}\n                    className=\"flex-1 border-0 bg-transparent p-0 focus-visible:ring-0 font-mono\"\n                    placeholder=\"Enter command...\"\n                    autoComplete=\"off\"\n                    autoFocus\n                  />\n                </div>\n              </form>\n            </>\n          )}\n        </div>\n      </div>\n    )\n  }\n)\n\nCodeTerminal.displayName = \"CodeTerminal\"\n\nexport { CodeTerminal, codeTerminalVariants }\n"
    }
  ],
  "type": "components:code"
}