fix(frontend): align react-syntax-highlighter JSX types with React 19

Made-with: Cursor

frontend/src/app/json-editor/page.tsx

@@ -3,7 +3,15 @@
 import type { z } from "zod";
 
 import { CalendarIcon, Check, Clipboard, Download } from "lucide-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type ComponentType,
+  type CSSProperties,
+  type ReactNode,
+} from "react";
 import { format } from "date-fns";
 import { toast } from "sonner";
 
@@ -31,6 +39,14 @@ import Note from "./_components/note";
 
 import { githubGist, nord } from "react-syntax-highlighter/dist/esm/styles/hljs";
 import SyntaxHighlighter from "react-syntax-highlighter";
+
+/** react-syntax-highlighter types lag React 19; align with app React types for JSX. */
+const JsonSyntaxHighlighter = SyntaxHighlighter as ComponentType<{
+  language: string;
+  style: Record<string, CSSProperties>;
+  className?: string;
+  children?: ReactNode;
+}>;
 import { ScriptItem } from "../scripts/_components/script-item";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
@@ -523,13 +539,13 @@ export default function JSONGenerator() {
                 </Button>
               </div>
 
-              <SyntaxHighlighter
+              <JsonSyntaxHighlighter
                 language="json"
                 style={theme === "light" ? githubGist : nord}
                 className="mt-4 p-4 bg-secondary rounded shadow overflow-x-scroll"
               >
                 {JSON.stringify(script, null, 2)}
-              </SyntaxHighlighter>
+              </JsonSyntaxHighlighter>
             </div>
           </TabsContent>
           <TabsContent value="preview" className="h-full w-full">