chore(deps): refresh dependencies to latest

app/page.tsx

@@ -106,6 +106,9 @@ export default function Home() {
     const program = params.get("program");
     const nextIdlSource = getIdlSourceFromSearchParams(params);
     const nextNetwork = getNetworkFromSearchParams(params);
+    // Hydrate state from the URL after mount; a render-time initializer can't
+    // read window on the server without a hydration mismatch.
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setNetwork(nextNetwork);
     setRpcUrl(getNetworkRpcUrl(nextNetwork));
     if (program?.trim()) {

components/IdlViewer.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { getIdlDisplayInfo } from "@/lib/idl-utils";
 
 interface IdlViewerProps {
@@ -11,31 +11,28 @@ const LARGE_IDL_INSTRUCTION_THRESHOLD = 100;
 const LARGE_IDL_JSON_BYTES_THRESHOLD = 75_000;
 
 export function IdlViewer({ idl }: IdlViewerProps) {
-  const [collapsed, setCollapsed] = useState(false);
-  const [json, setJson] = useState("");
-  const [highlighted, setHighlighted] = useState<string | null>(null);
-  const [copied, setCopied] = useState(false);
-
   const { accountCount, address, instructionCount, name, typeCount, version } =
     getIdlDisplayInfo(idl);
   const isLargeIdl = instructionCount >= LARGE_IDL_INSTRUCTION_THRESHOLD;
-  const shouldHighlight =
-    json.length > 0 && json.length <= LARGE_IDL_JSON_BYTES_THRESHOLD;
 
-  useEffect(() => {
-    setCollapsed(isLargeIdl);
-  }, [idl, isLargeIdl]);
+  const [collapsed, setCollapsed] = useState(isLargeIdl);
+  const [prevIdl, setPrevIdl] = useState(idl);
+  const [copied, setCopied] = useState(false);
+  const [hl, setHl] = useState<{ src: string; html: string } | null>(null);
 
-  useEffect(() => {
-    if (collapsed) {
-      setJson("");
-      setHighlighted(null);
-      return;
-    }
+  // Re-collapse when a new IDL arrives: adjust state during render, not in an effect.
+  if (idl !== prevIdl) {
+    setPrevIdl(idl);
+    setCollapsed(isLargeIdl);
+  }
 
-    setJson(JSON.stringify(idl, null, 2));
-    setHighlighted(null);
-  }, [idl, collapsed]);
+  const json = useMemo(
+    () => (collapsed ? "" : JSON.stringify(idl, null, 2)),
+    [collapsed, idl]
+  );
+  const shouldHighlight =
+    json.length > 0 && json.length <= LARGE_IDL_JSON_BYTES_THRESHOLD;
+  const highlighted = hl && hl.src === json ? hl.html : null;
 
   // Lazily syntax-highlight with shiki; fall back to plain text until ready.
   useEffect(() => {
@@ -47,7 +44,7 @@ export function IdlViewer({ idl }: IdlViewerProps) {
         codeToHtml(json, { lang: "json", theme: "github-dark-dimmed" })
       )
       .then((html) => {
-        if (!cancelled) setHighlighted(html);
+        if (!cancelled) setHl({ src: json, html });
       })
       .catch(() => {
         /* silently fall back to plain text */