50: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/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"],"RegistryDependencies"] 51: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"] 52:T1b42,/* @jsxImportSource @opentui/react */ import { useTheme } from "@/hooks/use-theme"; import type { BorderStyle } from "@/components/ui/types"; export interface CodeProps { children: string; language?: string; inline?: boolean; borderStyle?: BorderStyle; showLineNumbers?: boolean; lineNumberSeparator?: string; keywordColor?: string; stringColor?: string; numberColor?: string; commentColor?: string; operatorColor?: string; plainColor?: string; } const KEYWORDS = new Set([ "const", "let", "var", "function", "return", "if", "else", "import", "export", "from", "class", "interface", "type", "async", "await", "new", "this", "true", "false", "null", "undefined", "void", "typeof", "instanceof", "in", "of", "for", "while", "do", "switch", "case", "break", "continue", "try", "catch", "finally", "throw", "extends", "implements", "static", "public", "private", "protected", "readonly", "enum", "default", "delete", "yield", "super", ]); const OPERATORS = /^[=+\-*/<>!&|?%^~]+$/; interface Token { text: string; kind: "keyword" | "string" | "number" | "comment" | "operator" | "plain"; } const tokenizeLine = (line: string): Token[] => { const trimmed = line.trimStart(); if (trimmed.startsWith("//")) { return [{ kind: "comment", text: line }]; } const tokens: Token[] = []; let i = 0; while (i < line.length) { if (line[i] === "/" && line[i + 1] === "/") { tokens.push({ kind: "comment", text: line.slice(i) }); break; } const quote = line[i]; if (quote === '"' || quote === "'" || quote === "`") { let j = i + 1; while (j < line.length && line[j] !== quote) { if (line[j] === "\\") { j += 1; } j += 1; } j += 1; tokens.push({ kind: "string", text: line.slice(i, j) }); i = j; continue; } if (/[0-9]/.test(line[i])) { let j = i; while (j < line.length && /[0-9._xXa-fA-FbBoO]/.test(line[j])) { j += 1; } tokens.push({ kind: "number", text: line.slice(i, j) }); i = j; continue; } if (/[a-zA-Z_$]/.test(line[i])) { let j = i; while (j < line.length && /[a-zA-Z0-9_$]/.test(line[j])) { j += 1; } const word = line.slice(i, j); tokens.push({ kind: KEYWORDS.has(word) ? "keyword" : "plain", text: word, }); i = j; continue; } if (/[=+\-*/<>!&|?%^~]/.test(line[i])) { let j = i; while (j < line.length && OPERATORS.test(line[j])) { j += 1; } tokens.push({ kind: "operator", text: line.slice(i, j) }); i = j; continue; } tokens.push({ kind: "plain", text: line[i] }); i += 1; } return tokens; }; const CodeLine = ({ line, keywordColor, stringColor, numberColor, commentColor: _commentColor, operatorColor, plainColor, }: { line: string; keywordColor: string; stringColor: string; numberColor: string; commentColor: string; operatorColor: string; plainColor: string; }) => { const tokens = tokenizeLine(line); return ( {tokens.map((token, idx) => { switch (token.kind) { case "keyword": { return ( {token.text} ); } case "string": { return ( {token.text} ); } case "number": { return ( {token.text} ); } case "comment": { return ( {token.text} ); } case "operator": { return ( {token.text} ); } default: { return ( {token.text} ); } } })} ); }; export const Code = ({ children, language, inline = false, borderStyle = "single", showLineNumbers = true, lineNumberSeparator = "│ ", keywordColor: keywordColorProp, stringColor: stringColorProp, numberColor: numberColorProp, commentColor: commentColorProp, operatorColor: operatorColorProp, plainColor: plainColorProp, }: CodeProps) => { const theme = useTheme(); const keywordColor = keywordColorProp ?? theme.colors.accent; const stringColor = stringColorProp ?? theme.colors.success; const numberColor = numberColorProp ?? theme.colors.warning; const commentColor = commentColorProp ?? theme.colors.mutedForeground; const operatorColor = operatorColorProp ?? theme.colors.info; const plainColor = plainColorProp ?? theme.colors.foreground; const lines = children.split("\n"); if (inline) { const displayLine = lines[0] ?? ""; return ( ); } const lineNumberWidth = String(lines.length).length; return ( {language ? ( {language} ) : null} {lines.map((line, idx) => ( {showLineNumbers ? ( <> {`${String(idx + 1).padStart(lineNumberWidth, " ")} `} {lineNumberSeparator} ) : null} ))} ); }; 4f:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@opentui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40opentui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@opentui/react"}]]}]}]]}],["$","$L50",null,{"namespace":"@termcn","registryDependencies":["https://termcn.dev/r/opentui/use-theme.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/opentui/ui/code.tsx","content":"$52","type":"registry:ui","target":"components/ui/code.tsx"}],"className":"h-[70svh] min-h-80"}]]}]