1"use client";2import { useState } from "react";3import clsx from "clsx";45export function JsonView({ value, collapsed = false, className, maxHeight = "20rem" }: { value: unknown; collapsed?: boolean; className?: string; maxHeight?: string }) {6 const [open, setOpen] = useState(!collapsed);7 if (value === null || value === undefined) return <span className="text-ink-3">—</span>;8 const text = typeof value === "string" ? value : JSON.stringify(value, null, 2);9 const short = text.length > 80 ? text.slice(0, 80) + "…" : text;10 if (!open)11 return (12 <button className="font-mono text-xs text-ink-2 underline-offset-2 hover:underline text-left break-all" onClick={() => setOpen(true)} title="Expand">13 {short.replace(/\s+/g, " ")}14 </button>15 );16 return (17 <div className={clsx("relative", className)}>18 <pre className="overflow-auto rounded-md border border-hairline bg-surface-2 p-2 font-mono text-xs leading-relaxed text-ink-1" style={{ maxHeight }}>19 {text}20 </pre>21 {collapsed && (22 <button className="absolute right-1 top-1 btn btn-ghost btn-sm" onClick={() => setOpen(false)}>23 collapse24 </button>25 )}26 </div>27 );28}29