52:I[707087,["/_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"],"RegistryDependencies"] 53: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"] 54:T68fe,"use client"; import React, { useMemo, useState } from "react"; import type { JSX } from "react"; import { cn } from "@/lib/utils"; import { useIsMobile } from "@/registry/8starlabs-ui/hooks/use-mobile"; import { Button } from "@/registry/8starlabs-ui/blocks/button"; import { Collapsible, CollapsibleContent } from "@/registry/8starlabs-ui/ui/collapsible"; import { Separator } from "@/registry/8starlabs-ui/ui/separator"; import { ChevronRight } from "lucide-react"; import { CopyButton } from "@/registry/8starlabs-ui/ui/copy-button"; interface JsonViewerProps { data: Record; className?: string; truncation?: Partial; showLineNumbers?: boolean; showColorIndent?: boolean; collapseOn?: "click" | "doubleClick"; defaultExpanded?: boolean | number; title?: string; } interface TruncationSettings { enabled: boolean; itemsPerArray: number; } type DataType = | "string" | "number" | "boolean" | "null" | "object" | "array" | "unknown"; const getDataType = (value: any): DataType => { if (value === null) return "null"; if (Array.isArray(value)) return "array"; const type = typeof value; if ( type === "string" || type === "number" || type === "boolean" || type === "object" ) { return type; } return "unknown"; }; const getTypeStyle = (type: DataType): string => { switch (type) { case "string": return "text-green-600 dark:text-green-400"; case "number": return "text-orange-600 dark:text-orange-400"; case "boolean": return "text-blue-600 dark:text-blue-400"; case "null": return "text-gray-500 dark:text-gray-400"; default: return ""; } }; const formatRelativeTime = (date: Date): string => { const now = new Date(); const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000); if (Math.abs(diffInSeconds) < 60) return "just now"; const intervals = { year: 31536000, month: 2592000, week: 604800, day: 86400, hour: 3600, minute: 60 }; for (const [unit, seconds] of Object.entries(intervals)) { const interval = Math.floor(Math.abs(diffInSeconds) / seconds); if (interval >= 1) { const suffix = diffInSeconds > 0 ? "ago" : "from now"; return `${interval} ${unit}${interval !== 1 ? "s" : ""} ${suffix}`; } } return "just now"; }; const detectDate = (value: any): Date | null => { if (typeof value === "string") { if (/^\d{4}-\d{2}-\d{2}/.test(value)) { const date = new Date(value); if (!isNaN(date.getTime())) { return date; } } } else if (typeof value === "number") { if (value >= 946684800 && value <= 4102444800) { return new Date(value * 1000); } if (value >= 946684800000 && value <= 4102444800000) { return new Date(value); } } return null; }; const SmartValue = React.forwardRef< any, { value: any; type: DataType } & React.HTMLAttributes >(({ value, type, ...props }, ref) => { const [isExpanded, setIsExpanded] = useState(false); if (type === "string") { if ( /^#([0-9A-F]{3}){1,2}$/i.test(value) || /^rgba?\(/.test(value) || /^hsla?\(/.test(value) ) { return ( {`'${value}'`} ); } if (/^https?:\/\//.test(value)) { const isLongUrl = String(value).length > 50; const isVeryLongUrl = String(value).length > 180; if (isVeryLongUrl) { return ( { e.stopPropagation(); props.onClick?.(e); }} > {`'${value}'`} ); } return ( { e.stopPropagation(); props.onClick?.(e); }} > {`'${value}'`} ); } } const typeStyle = getTypeStyle(type); if (type === "string") { const isLongString = String(value).length > 50; const isVeryLongString = String(value).length > 180; if (isVeryLongString) { return ( {`'${value}'`} ); } return ( {`'${value}'`} ); } if (type === "null") return ( null ); return ( {String(value)} ); }); SmartValue.displayName = "SmartValue"; const calculateLineCount = ( data: any, expandedPaths: Set, path = "root", level = 0, truncation: TruncationSettings ): number => { const dataType = getDataType(data); if (dataType === "object") { const isOpen = expandedPaths.has(path); if (!isOpen) return 1; const entries = Object.entries(data); if (entries.length === 0) return 2; return ( 2 + entries.reduce( (acc, [key, value]) => acc + calculateLineCount( value, expandedPaths, `${path}.${key}`, level + 1, truncation ), 0 ) ); } if (dataType === "array") { const isOpen = expandedPaths.has(path); if (!isOpen) return 1; if (data.length === 0) return 2; if (truncation.enabled && data.length > truncation.itemsPerArray) { const visibleItems = data.slice(0, truncation.itemsPerArray); return ( 3 + visibleItems.reduce( (acc: number, item: any, index: number) => acc + calculateLineCount( item, expandedPaths, `${path}[${index}]`, level + 1, truncation ), 0 ) ); } return ( 2 + data.reduce( (acc: number, item: any, index: number) => acc + calculateLineCount( item, expandedPaths, `${path}[${index}]`, level + 1, truncation ), 0 ) ); } return 1; }; const generateAllPaths = ( data: any, maxLevel: number = Infinity, currentLevel: number = 0, currentPath: string = "root" ): Set => { const paths = new Set(); if (currentLevel > maxLevel) return paths; if (typeof data === "object" && data !== null) { paths.add(currentPath); if (Array.isArray(data)) { data.forEach((item, index) => { const childPaths = generateAllPaths( item, maxLevel, currentLevel + 1, `${currentPath}[${index}]` ); childPaths.forEach((path) => paths.add(path)); }); } else { Object.entries(data).forEach(([key, value]) => { const childPaths = generateAllPaths( value, maxLevel, currentLevel + 1, `${currentPath}.${key}` ); childPaths.forEach((path) => paths.add(path)); }); } } return paths; }; const JsonViewer: React.FC = ({ data, className, truncation: truncationProp, showLineNumbers = true, showColorIndent = false, collapseOn = "click", defaultExpanded = false, title }) => { const isMobile = useIsMobile(); const [expandedPaths, setExpandedPaths] = React.useState>(() => { if (typeof defaultExpanded === "number") { return generateAllPaths(data, defaultExpanded); } if (defaultExpanded === true) { return generateAllPaths(data); } const initialPaths = new Set(); if (typeof data === "object" && data !== null) { initialPaths.add("root"); } return initialPaths; }); const expandAll = () => { setExpandedPaths(generateAllPaths(data)); }; const collapseAll = () => { setExpandedPaths(new Set(["root"])); }; const truncation: TruncationSettings = React.useMemo( () => ({ enabled: isMobile ? false : (truncationProp?.enabled ?? true), itemsPerArray: truncationProp?.itemsPerArray ?? 5 }), [truncationProp, isMobile] ); const toggleNode = (path: string) => { setExpandedPaths((prev) => { const newPaths = new Set(prev); if (newPaths.has(path)) { newPaths.delete(path); } else { newPaths.add(path); } return newPaths; }); }; const lineCount = useMemo( () => calculateLineCount(data, expandedPaths, "root", 0, truncation), [data, expandedPaths, truncation] ); return (

{title}

          {showLineNumbers && (
            
              
            
          )}

); }; const LineNumbers: React.FC<{ lineCount: number }> = ({ lineCount }) => { return (

{Array.from({ length: lineCount }, (_, i) => (

{i + 1}

))}

); }; interface JsonNodeProps { data: any; level?: number; path: string; expandedPaths: Set; toggleNode: (path: string) => void; showComma?: boolean; objectKey?: string; truncation: TruncationSettings; showColorIndent?: boolean; collapseOn?: "click" | "doubleClick"; } const JsonNode: React.FC = ({ data, level = 0, path, expandedPaths, toggleNode, showComma, objectKey, truncation, showColorIndent, collapseOn }) => { const dataType = getDataType(data); const renderValue = () => { let element: JSX.Element | null = null; switch (dataType) { case "array": element = ( ); break; case "object": element = ( ); break; default: element = ; break; } if (dataType === "object" || dataType === "array") { return element; } const date = detectDate(data); if (date) { const timeStr = formatRelativeTime(date); return ( {element} {`// ${timeStr}`} ); } return element; }; return ( <> {renderValue()} {dataType !== "object" && dataType !== "array" && showComma && ( , )} ); }; const indentColors = [ "border-red-300/60 dark:border-red-700/60", "border-yellow-300/60 dark:border-yellow-700/60", "border-green-300/60 dark:border-green-700/60", "border-blue-300/60 dark:border-blue-700/60", "border-purple-300/60 dark:border-purple-700/60" ]; const JsonObject: React.FC<{ objectKey?: string; data: Record; level: number; path: string; expandedPaths: Set; toggleNode: (path: string) => void; showComma?: boolean; truncation: TruncationSettings; showColorIndent?: boolean; collapseOn?: "click" | "doubleClick"; }> = ({ data, level, path, expandedPaths, toggleNode, showComma, objectKey, truncation, showColorIndent, collapseOn }) => { const entries = Object.entries(data); const isOpen = expandedPaths.has(path); const trigger = (

toggleNode(path) : undefined } onClick={ collapseOn === "doubleClick" ? undefined : (e) => { toggleNode(path); } } > {objectKey && ( {`'${objectKey}'`} : )} {"{"} {!isOpen && ( <> ... {"}"} ({entries.length} {entries.length > 1 ? "items" : "item"}) {showComma && ,} )}

); return ( toggleNode(path)}> {trigger}

{entries.map(([key, value], index) => { const childPath = `${path}.${key}`; const dataType = getDataType(value); const isChildCollapsible = dataType === "object" || dataType === "array"; const isChildOpen = isChildCollapsible && expandedPaths.has(childPath); return (

{isChildCollapsible ? ( ) : ( <> {`'${key}'`} : )}

); })}

{"}"} {showComma && ,}

); }; const JsonArray: React.FC<{ objectKey?: string; data: any[]; level: number; path: string; expandedPaths: Set; toggleNode: (path: string) => void; showComma?: boolean; truncation: TruncationSettings; showColorIndent?: boolean; collapseOn?: "click" | "doubleClick"; }> = ({ data, level, path, expandedPaths, toggleNode, showComma, objectKey, truncation, showColorIndent, collapseOn }) => { const isOpen = expandedPaths.has(path); const [showAll, setShowAll] = useState(false); const itemsToShow = truncation.enabled && !showAll && data.length > truncation.itemsPerArray ? data.slice(0, truncation.itemsPerArray) : data; const handleShowMore = () => { setShowAll(true); }; const trigger = (

toggleNode(path) : undefined } onClick={ collapseOn === "doubleClick" ? undefined : (e) => { toggleNode(path); } } > {objectKey && ( {`'${objectKey}'`} : )} {"["} {!isOpen && ( <> ... {"]"} ({data.length} items) {showComma && ,} )}

); return ( toggleNode(path)}> {trigger}

{itemsToShow.map((item, index) => { const childPath = `${path}[${index}]`; const dataType = getDataType(item); const isChildCollapsible = dataType === "object" || dataType === "array"; const isChildOpen = isChildCollapsible && expandedPaths.has(childPath); return (

); })} {truncation.enabled && data.length > truncation.itemsPerArray && (

{!showAll ? ( ) : ( )}

)}

] {showComma && ,}

); }; export default JsonViewer; 55:T5d8,"use client"; import * as React from "react"; import { IconCheck, IconCopy } from "@tabler/icons-react"; import { cn } from "@/lib/utils"; import { Button } from "@/registry/8starlabs-ui/blocks/button"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/registry/8starlabs-ui/ui/tooltip"; export function CopyButton({ value, className, variant = "ghost", ...props }: React.ComponentProps & { value: string; src?: string; }) { const [hasCopied, setHasCopied] = React.useState(false); React.useEffect(() => { if (!hasCopied) { return; } const timer = setTimeout(() => setHasCopied(false), 2000); return () => clearTimeout(timer); }, [hasCopied]); return ( { navigator.clipboard.writeText(value); setHasCopied(true); }} {...props} > Copy {hasCopied ? : } } /> {hasCopied ? "Copied" : "Copy to Clipboard"} ); } 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@tabler/icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tabler%2Ficons-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tabler/icons-react"}]]}]}]]}],["$","$L52",null,{"namespace":"@8starlabs-ui","registryDependencies":["https://ui.8starlabs.com/r/button.json","https://ui.8starlabs.com/r/collapsible.json","https://ui.8starlabs.com/r/separator.json","https://ui.8starlabs.com/r/tooltip.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/8starlabs-ui/blocks/json-viewer.tsx","content":"$54","type":"registry:ui","target":"components/8starlabs-ui/json-viewer.tsx"},{"path":"registry/8starlabs-ui/ui/copy-button.tsx","content":"$55","type":"registry:ui","target":"components/8starlabs-ui/ui/copy-button.tsx"},{"path":"registry/8starlabs-ui/hooks/use-mobile.ts","content":"import * as React from \"react\";\n\nconst MOBILE_BREAKPOINT = 768;\n\nexport function useIsMobile() {\n const [isMobile, setIsMobile] = React.useState(\n undefined\n );\n\n React.useEffect(() => {\n const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n const onChange = () => {\n setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n };\n mql.addEventListener(\"change\", onChange);\n setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n return () => mql.removeEventListener(\"change\", onChange);\n }, []);\n\n return !!isMobile;\n}\n","type":"registry:hook","target":"components/8starlabs-ui/hooks/use-mobile.ts"}],"className":"h-[70svh] min-h-80"}]]}]