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:T209a,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; type JsonValue = | string | number | boolean | null | JsonValue[] | { [key: string]: JsonValue }; interface JsonViewerProps { data: JsonValue; collapsed?: boolean | number; searchable?: boolean; copyPath?: boolean; maxDepth?: number; className?: string; } interface JsonNodeProps { keyName?: string; value: JsonValue; depth: number; path: string; defaultCollapsed: boolean | number; maxDepth: number; copyPath: boolean; searchQuery: string; } function getValueType(value: JsonValue): string { if (value === null) return "null"; if (Array.isArray(value)) return "array"; return typeof value; } function getPreview(value: JsonValue): string { if (Array.isArray(value)) return `Array(${value.length})`; if (typeof value === "object" && value !== null) { const keys = Object.keys(value); return `{${keys.length > 0 ? keys.slice(0, 3).join(", ") + (keys.length > 3 ? "..." : "") : ""}}`; } return String(value); } function matchesSearch(value: JsonValue, query: string): boolean { if (!query) return true; const lowerQuery = query.toLowerCase(); if (typeof value === "string") return value.toLowerCase().includes(lowerQuery); if (typeof value === "number") return String(value).includes(lowerQuery); if (typeof value === "boolean") return String(value).includes(lowerQuery); if (value === null) return "null".includes(lowerQuery); if (Array.isArray(value)) return value.some((v) => matchesSearch(v, query)); if (typeof value === "object") { return Object.entries(value).some( ([k, v]) => k.toLowerCase().includes(lowerQuery) || matchesSearch(v, query), ); } return false; } function JsonNode({ keyName, value, depth, path, defaultCollapsed, maxDepth, copyPath, searchQuery, }: JsonNodeProps) { const shouldDefaultCollapse = typeof defaultCollapsed === "number" ? depth >= defaultCollapsed : defaultCollapsed; const [isCollapsed, setIsCollapsed] = React.useState(shouldDefaultCollapse); const [copied, setCopied] = React.useState(false); const type = getValueType(value); const isExpandable = type === "object" || type === "array"; const isVisible = matchesSearch(value, searchQuery) || (keyName?.toLowerCase().includes(searchQuery.toLowerCase()) ?? false); React.useEffect(() => { if (searchQuery && isExpandable && matchesSearch(value, searchQuery)) { setIsCollapsed(false); } }, [searchQuery, isExpandable, value]); const handleToggle = React.useCallback(() => { setIsCollapsed((prev) => !prev); }, []); const handleKeyDown = React.useCallback( (e: React.KeyboardEvent) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); handleToggle(); } else if (e.key === "ArrowRight" && isCollapsed) { e.preventDefault(); setIsCollapsed(false); } else if (e.key === "ArrowLeft" && !isCollapsed) { e.preventDefault(); setIsCollapsed(true); } }, [handleToggle, isCollapsed], ); const handleCopyPath = React.useCallback(async () => { await navigator.clipboard.writeText(path); setCopied(true); setTimeout(() => setCopied(false), 1500); }, [path]); if (!isVisible && searchQuery) return null; const renderValue = () => { if (type === "null") { return null; } if (type === "boolean") { return {String(value)}; } if (type === "number") { return {value as number}; } if (type === "string") { return ( "{value as string}" ); } return null; }; if (!isExpandable) { return (

{keyName !== undefined && ( <> {keyName} : )} {renderValue()} {copyPath && ( )}

); } if (depth >= maxDepth) { return (

{keyName !== undefined && ( <> {keyName} : )} {getPreview(value)}

); } const entries = type === "array" ? (value as JsonValue[]).map( (v, i) => [String(i), v] as [string, JsonValue], ) : Object.entries(value as Record); const brackets = type === "array" ? ["[", "]"] : ["{", "}"]; return (

{keyName !== undefined && ( <> {keyName} : )} {brackets[0]} {isCollapsed && ( <> {getPreview(value)} {brackets[1]} )} {copyPath && ( )}

{!isCollapsed && (

{entries.map(([k, v]) => ( ))}

{brackets[1]}

)}

); } export function JsonViewer({ data, collapsed = false, searchable = false, copyPath = true, maxDepth = 10, className, }: JsonViewerProps) { const [searchQuery, setSearchQuery] = React.useState(""); return (

{searchable && (

setSearchQuery(e.target.value)} placeholder="Search..." className="w-full px-2 py-1 text-sm border border-border rounded bg-background" />

)}

); } export type { JsonViewerProps, JsonValue }; 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L51",null,{"files":[{"path":"registry/default/blocks/devtools/json-viewer/components/elements/json-viewer.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]