Aurora AI JSX Preview

1"use client"
2 
3import * as React from "react"
4import { Check, Code, Copy } from "lucide-react"
5import { cn } from "@/lib/utils"
6import { Badge } from "@/registry/aurora/ui/badge"
7import { Button } from "@/registry/aurora/ui/button"
8import { useClipboard } from "@/registry/aurora/lib/use-clipboard"
9 
10export interface JsxPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
11  /** Source to render in the preview surface. */
12  code: string
13  /** Filename shown in the header, e.g. `DeployButton.jsx`. */
14  filename?: string
15  /** Language pill label. Defaults to `JSX`. */
16  language?: string
17  /** Show the gutter line numbers. Defaults to `true`. */
18  lineNumbers?: boolean
19}
20 
21// ── Aurora token panel surface (mirrors the elements panelStyle) ───────────────
22function jsxPanelStyle(style?: React.CSSProperties): React.CSSProperties {
23  return {
24    background: "var(--aurora-surface-raised)",
25    border: "1px solid var(--aurora-border-strong)",
26    borderRadius: "var(--aurora-radius-1)",
27    boxShadow: "var(--aurora-shadow-medium), var(--aurora-highlight-medium)",
28    ...style,
29  }
30}
31 
32// ── Lightweight JSX token tinting (cosmetic — not a real tokenizer) ────────────
33const KEYWORDS = new Set([
34  "export",
35  "function",
36  "return",
37  "const",
38  "let",
39  "var",
40  "import",
41  "from",
42  "default",
43  "if",
44  "else",
45  "for",
46  "while",
47  "new",
48  "await",
49  "async",
50])
51 
52type Tone =
53  | "keyword"
54  | "tag"
55  | "string"
56  | "comment"
57  | "punctuation"
58  | "plain"
59 
60const TONE_COLOR: Record<Tone, string> = {
61  keyword: "var(--aurora-accent-pink)",
62  tag: "var(--aurora-code-function)",
63  string: "var(--aurora-accent-strong)",
64  comment: "var(--aurora-text-muted)",
65  punctuation: "var(--aurora-text-muted)",
66  plain: "var(--aurora-text-primary)",
67}
68 
69// Split a line into tinted spans. Order matters: strings/comments first so we
70// don't re-tokenize their contents.
71function tintLine(line: string, keyPrefix: string): React.ReactNode[] {
72  const out: React.ReactNode[] = []
73  // Match strings, comments, JSX tags, identifiers, or any other run.
74  const re =
75    /(\/\/[^\n]*)|("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|`(?:[^`\\]|\\.)*`)|(<\/?[A-Za-z][\w.]*)|([A-Za-z_$][\w$]*)|([^\sA-Za-z_$"'`/]+)|(\s+|.)/g
76  let m: RegExpExecArray | null
77  let i = 0
78  while ((m = re.exec(line)) !== null) {
79    const [, comment, str, tag, ident, punct] = m
80    const text = m[0]
81    let tone: Tone = "plain"
82    if (comment) tone = "comment"
83// … truncated