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

{
  "name": "terminal",
  "description": "Terminal emulator component",
  "dependencies": [
    "xterm",
    "xterm-addon-fit"
  ],
  "files": [
    {
      "name": "terminal.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, Copy } from \"lucide-react\"\nimport { toast } from \"sonner\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface Command {\n  id: string\n  input: string\n  output: string | React.ReactNode\n  timestamp: Date\n  type?: \"command\" | \"error\" | \"success\" | \"info\"\n}\n\ninterface TerminalProps extends React.HTMLAttributes<HTMLDivElement> {\n  prompt?: string\n  initialCommands?: Command[]\n  onCommand?: (\n    command: string\n  ) => Promise<string | React.ReactNode> | string | React.ReactNode\n  theme?: \"dark\" | \"light\" | \"matrix\" | \"dracula\"\n  enableHistory?: boolean\n  enableAutoComplete?: boolean\n  autoCompleteCommands?: string[]\n  maxHistorySize?: number\n}\n\nconst themes = {\n  dark: {\n    background: \"bg-gray-900\",\n    text: \"text-gray-100\",\n    prompt: \"text-green-400\",\n    input: \"text-white\",\n    output: \"text-gray-300\",\n    error: \"text-red-400\",\n    success: \"text-green-400\",\n    info: \"text-blue-400\",\n    border: \"border-gray-800\",\n    selection: \"selection:bg-gray-700\",\n  },\n  light: {\n    background: \"bg-white\",\n    text: \"text-gray-900\",\n    prompt: \"text-blue-600\",\n    input: \"text-gray-900\",\n    output: \"text-gray-700\",\n    error: \"text-red-600\",\n    success: \"text-green-600\",\n    info: \"text-blue-600\",\n    border: \"border-gray-200\",\n    selection: \"selection:bg-blue-100\",\n  },\n  matrix: {\n    background: \"bg-black\",\n    text: \"text-green-400\",\n    prompt: \"text-green-500\",\n    input: \"text-green-300\",\n    output: \"text-green-400\",\n    error: \"text-red-500\",\n    success: \"text-lime-400\",\n    info: \"text-cyan-400\",\n    border: \"border-green-900\",\n    selection: \"selection:bg-green-900\",\n  },\n  dracula: {\n    background: \"bg-[#282a36]\",\n    text: \"text-[#f8f8f2]\",\n    prompt: \"text-[#50fa7b]\",\n    input: \"text-[#f8f8f2]\",\n    output: \"text-[#6272a4]\",\n    error: \"text-[#ff5555]\",\n    success: \"text-[#50fa7b]\",\n    info: \"text-[#8be9fd]\",\n    border: \"border-[#44475a]\",\n    selection: \"selection:bg-[#44475a]\",\n  },\n}\n\nconst highlightSyntax = (text: string): React.ReactNode => {\n  // Simple syntax highlighting for common patterns\n  const patterns = [\n    { regex: /(\".*?\"|'.*?')/g, className: \"text-yellow-400\" }, // strings\n    { regex: /\\b(true|false|null|undefined)\\b/g, className: \"text-orange-400\" }, // keywords\n    { regex: /\\b(\\d+)\\b/g, className: \"text-purple-400\" }, // numbers\n    {\n      regex: /\\b(function|const|let|var|if|else|for|while|return)\\b/g,\n      className: \"text-pink-400\",\n    }, // js keywords\n    { regex: /(--?\\w+)/g, className: \"text-cyan-400\" }, // flags\n  ]\n\n  let highlighted = text\n  patterns.forEach(({ regex, className }) => {\n    highlighted = highlighted.replace(\n      regex,\n      `<span class=\"${className}\">$1</span>`\n    )\n  })\n\n  return <span dangerouslySetInnerHTML={{ __html: highlighted }} />\n}\n\nexport function Terminal({\n  prompt = \"$\",\n  initialCommands = [],\n  onCommand,\n  theme = \"dark\",\n  enableHistory = true,\n  enableAutoComplete = true,\n  autoCompleteCommands = [\n    \"help\",\n    \"clear\",\n    \"exit\",\n    \"ls\",\n    \"cd\",\n    \"pwd\",\n    \"echo\",\n    \"date\",\n    \"whoami\",\n  ],\n  maxHistorySize = 50,\n  className,\n  ...props\n}: TerminalProps) {\n  const [commands, setCommands] = React.useState<Command[]>(initialCommands)\n  const [currentInput, setCurrentInput] = React.useState(\"\")\n  const [historyIndex, setHistoryIndex] = React.useState(-1)\n  const [commandHistory, setCommandHistory] = React.useState<string[]>([])\n  const [suggestions, setSuggestions] = React.useState<string[]>([])\n  const [suggestionIndex, setSuggestionIndex] = React.useState(0)\n  const [copied, setCopied] = React.useState<string | null>(null)\n\n  const terminalRef = React.useRef<HTMLDivElement>(null)\n  const inputRef = React.useRef<HTMLInputElement>(null)\n  const currentTheme = themes[theme]\n\n  React.useEffect(() => {\n    if (terminalRef.current) {\n      terminalRef.current.scrollTop = terminalRef.current.scrollHeight\n    }\n  }, [commands])\n\n  React.useEffect(() => {\n    if (enableAutoComplete && currentInput) {\n      const matches = autoCompleteCommands.filter((cmd) =>\n        cmd.toLowerCase().startsWith(currentInput.toLowerCase())\n      )\n      setSuggestions(matches)\n      setSuggestionIndex(0)\n    } else {\n      setSuggestions([])\n    }\n  }, [currentInput, enableAutoComplete, autoCompleteCommands])\n\n  const handleCommand = async (input: string) => {\n    if (!input.trim()) return\n\n    const newCommand: Command = {\n      id: Date.now().toString(),\n      input,\n      output: \"\",\n      timestamp: new Date(),\n      type: \"command\",\n    }\n\n    // Built-in commands\n    if (input.toLowerCase() === \"clear\") {\n      setCommands([])\n      setCurrentInput(\"\")\n      return\n    }\n\n    if (input.toLowerCase() === \"help\") {\n      newCommand.output = (\n        <div className=\"space-y-1\">\n          <div>Available commands:</div>\n          <div className=\"ml-4 space-y-1\">\n            <div>• clear - Clear the terminal</div>\n            <div>• help - Show this help message</div>\n            <div>• date - Show current date and time</div>\n            <div>• echo [text] - Print text to terminal</div>\n            {autoCompleteCommands.map((cmd) => (\n              <div key={cmd}>• {cmd}</div>\n            ))}\n          </div>\n        </div>\n      )\n      newCommand.type = \"info\"\n    } else if (input.toLowerCase() === \"date\") {\n      newCommand.output = new Date().toString()\n      newCommand.type = \"success\"\n    } else if (input.toLowerCase().startsWith(\"echo \")) {\n      newCommand.output = input.substring(5)\n      newCommand.type = \"success\"\n    } else if (onCommand) {\n      try {\n        const result = await onCommand(input)\n        newCommand.output = result\n        newCommand.type = \"success\"\n      } catch (error) {\n        newCommand.output = `Error: ${error instanceof Error ? error.message : String(error)}`\n        newCommand.type = \"error\"\n      }\n    } else {\n      newCommand.output = `Command not found: ${input}`\n      newCommand.type = \"error\"\n    }\n\n    setCommands((prev) => [...prev, newCommand])\n\n    if (enableHistory) {\n      setCommandHistory((prev) => {\n        const updated = [input, ...prev.filter((cmd) => cmd !== input)]\n        return updated.slice(0, maxHistorySize)\n      })\n    }\n\n    setCurrentInput(\"\")\n    setHistoryIndex(-1)\n    setSuggestions([])\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Enter\") {\n      e.preventDefault()\n      handleCommand(currentInput)\n    } else if (e.key === \"ArrowUp\" && enableHistory) {\n      e.preventDefault()\n      if (historyIndex < commandHistory.length - 1) {\n        const newIndex = historyIndex + 1\n        setHistoryIndex(newIndex)\n        setCurrentInput(commandHistory[newIndex])\n      }\n    } else if (e.key === \"ArrowDown\" && enableHistory) {\n      e.preventDefault()\n      if (historyIndex > 0) {\n        const newIndex = historyIndex - 1\n        setHistoryIndex(newIndex)\n        setCurrentInput(commandHistory[newIndex])\n      } else if (historyIndex === 0) {\n        setHistoryIndex(-1)\n        setCurrentInput(\"\")\n      }\n    } else if (e.key === \"Tab\" && suggestions.length > 0) {\n      e.preventDefault()\n      const suggestion = suggestions[suggestionIndex]\n      if (suggestion) {\n        setCurrentInput(suggestion)\n        setSuggestions([])\n      }\n    } else if (e.key === \"Escape\") {\n      setSuggestions([])\n      setSuggestionIndex(0)\n    }\n  }\n\n  const handleCopy = async (text: string) => {\n    try {\n      await navigator.clipboard.writeText(text)\n      setCopied(text)\n      setTimeout(() => setCopied(null), 2000)\n      toast.success(\"Command copied to clipboard\")\n    } catch (err) {\n      console.error(\"Failed to copy:\", err)\n      toast.error(\"Failed to copy command\")\n    }\n  }\n\n  const handlePaste = async () => {\n    try {\n      const text = await navigator.clipboard.readText()\n      setCurrentInput((prev) => prev + text)\n      inputRef.current?.focus()\n    } catch (err) {\n      console.error(\"Failed to paste:\", err)\n      toast.error(\"Failed to paste from clipboard\")\n    }\n  }\n\n  return (\n    <div\n      ref={terminalRef}\n      className={cn(\n        \"relative rounded-lg border p-4 font-mono text-sm overflow-auto\",\n        currentTheme.background,\n        currentTheme.text,\n        currentTheme.border,\n        currentTheme.selection,\n        className\n      )}\n      onClick={() => inputRef.current?.focus()}\n      onPaste={handlePaste}\n      {...props}\n    >\n      {/* Terminal header */}\n      <div className=\"mb-4 flex items-center space-x-2\">\n        <div className=\"h-3 w-3 rounded-full bg-red-500\" />\n        <div className=\"h-3 w-3 rounded-full bg-yellow-500\" />\n        <div className=\"h-3 w-3 rounded-full bg-green-500\" />\n        <span className=\"ml-2 text-xs opacity-50\">terminal</span>\n      </div>\n\n      {/* Command history */}\n      <div className=\"space-y-2\">\n        {commands.map((cmd) => (\n          <div key={cmd.id} className=\"group relative\">\n            <div className=\"flex items-start space-x-2\">\n              <span className={currentTheme.prompt}>{prompt}</span>\n              <span className={currentTheme.input}>\n                {highlightSyntax(cmd.input)}\n              </span>\n              <button\n                onClick={() => handleCopy(cmd.input)}\n                className=\"invisible group-hover:visible ml-auto opacity-50 hover:opacity-100\"\n                aria-label=\"Copy command\"\n              >\n                {copied === cmd.input ? (\n                  <Check className=\"h-3 w-3\" />\n                ) : (\n                  <Copy className=\"h-3 w-3\" />\n                )}\n              </button>\n            </div>\n            {cmd.output && (\n              <div\n                className={cn(\n                  \"mt-1 pl-4\",\n                  cmd.type === \"error\" && currentTheme.error,\n                  cmd.type === \"success\" && currentTheme.success,\n                  cmd.type === \"info\" && currentTheme.info,\n                  (!cmd.type || cmd.type === \"command\") && currentTheme.output\n                )}\n              >\n                {typeof cmd.output === \"string\"\n                  ? highlightSyntax(cmd.output)\n                  : cmd.output}\n              </div>\n            )}\n          </div>\n        ))}\n      </div>\n\n      {/* Current input line */}\n      <div className=\"relative mt-2\">\n        <div className=\"flex items-center space-x-2\">\n          <span className={currentTheme.prompt}>{prompt}</span>\n          <input\n            ref={inputRef}\n            type=\"text\"\n            value={currentInput}\n            onChange={(e) => setCurrentInput(e.target.value)}\n            onKeyDown={handleKeyDown}\n            className={cn(\n              \"flex-1 bg-transparent outline-none\",\n              currentTheme.input\n            )}\n            spellCheck={false}\n            autoComplete=\"off\"\n            aria-label=\"Terminal input\"\n          />\n        </div>\n\n        {/* Autocomplete suggestions */}\n        {suggestions.length > 0 && (\n          <div\n            className={cn(\n              \"absolute left-0 top-full mt-1 rounded-md border p-1 shadow-lg z-10\",\n              currentTheme.background,\n              currentTheme.border\n            )}\n          >\n            {suggestions.map((suggestion, index) => (\n              <div\n                key={suggestion}\n                className={cn(\n                  \"rounded px-2 py-1 cursor-pointer\",\n                  index === suggestionIndex\n                    ? \"bg-gray-700\"\n                    : \"hover:bg-gray-800\",\n                  currentTheme.text\n                )}\n                onClick={() => {\n                  setCurrentInput(suggestion)\n                  setSuggestions([])\n                  inputRef.current?.focus()\n                }}\n              >\n                {suggestion}\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"
    }
  ],
  "type": "components:ui"
}