51: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"] 52: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"] 53:T1d7b,"use client"; import * as React from "react"; import { Check, Copy } from "lucide-react"; import { cn } from "@/lib/utils"; import { ScrollArea } from "@/components/ui/scroll-area"; import { useKeyedMountEffect } from "@/hooks/use-keyed-mount-effect"; import { useKeyedLayoutEffect } from "@/hooks/use-keyed-layout-effect"; import { joinEffectKey } from "@/lib/effect-key"; import { createJsonInspectorLineHtmlCache, type JsonInspectorLineHtmlCache, } from "./json-inspector-highlight"; const SMALL_JSON_LINE_LIMIT = 500; const VIRTUAL_LINE_HEIGHT = 20; const VIRTUAL_OVERSCAN = 8; const INITIAL_VIEWPORT_HEIGHT = 480; const MAX_RENDERED_LINES = 500; const VIRTUAL_JSON_LINE_STYLE: React.CSSProperties = { height: VIRTUAL_LINE_HEIGHT, }; /** * A small copy-to-clipboard button. Shows a transient check on success; style * placement via `className` (e.g. absolute-position it over a panel). */ export function CopyButton({ text, className, }: { text: string; className?: string; }) { const [copied, setCopied] = React.useState(false); return ( ); } function useJsonLineHtml() { const cacheRef = React.useRef(null); if (!cacheRef.current) { cacheRef.current = createJsonInspectorLineHtmlCache(); } const cache = cacheRef.current; return React.useCallback((line: string) => cache.get(line), [cache]); } function jsonLineWindow({ lineCount, scrollTop, viewportHeight, }: { lineCount: number; scrollTop: number; viewportHeight: number; }) { if (lineCount <= 0) return { start: 0, end: 0 }; const safeScrollTop = Number.isFinite(scrollTop) && scrollTop > 0 ? scrollTop : 0; const safeViewportHeight = Number.isFinite(viewportHeight) && viewportHeight > 0 ? viewportHeight : INITIAL_VIEWPORT_HEIGHT; const visibleStart = clamp( Math.floor(safeScrollTop / VIRTUAL_LINE_HEIGHT), 0, lineCount - 1, ); const visibleCount = Math.max( 1, Math.ceil(safeViewportHeight / VIRTUAL_LINE_HEIGHT), ); const uncappedStart = Math.max(0, visibleStart - VIRTUAL_OVERSCAN); const uncappedEnd = Math.min( lineCount, visibleStart + visibleCount + VIRTUAL_OVERSCAN, ); if (uncappedEnd - uncappedStart <= MAX_RENDERED_LINES) { return { start: uncappedStart, end: uncappedEnd }; } return { start: visibleStart, end: Math.min(lineCount, visibleStart + MAX_RENDERED_LINES), }; } function clamp(value: number, min: number, max: number) { return Math.min(max, Math.max(min, value)); } const JsonInspectorHighlightedLine = React.memo( function JsonInspectorHighlightedLine({ html, lineIndex, virtual = false, }: { html: string; lineIndex?: number; virtual?: boolean; }) { return (

); }, ); function JsonInspectorLines({ lines }: { lines: string[] }) { const htmlForLine = useJsonLineHtml(); return (

      {lines.map((line, i) => (
        
      ))}

); } function VirtualJsonInspectorLines({ lines }: { lines: string[] }) { const htmlForLine = useJsonLineHtml(); const viewportRef = React.useRef(null); const frameRef = React.useRef(0); const [windowRange, setWindowRange] = React.useState(() => jsonLineWindow({ lineCount: lines.length, scrollTop: 0, viewportHeight: INITIAL_VIEWPORT_HEIGHT, }), ); const measure = React.useCallback(() => { frameRef.current = 0; const viewport = viewportRef.current; const nextRange = jsonLineWindow({ lineCount: lines.length, scrollTop: viewport?.scrollTop ?? 0, viewportHeight: viewport?.clientHeight ?? INITIAL_VIEWPORT_HEIGHT, }); setWindowRange((current) => current.start === nextRange.start && current.end === nextRange.end ? current : nextRange, ); }, [lines.length]); const scheduleMeasure = React.useCallback(() => { if (frameRef.current) return; let didRun = false; const frame = requestAnimationFrame(() => { didRun = true; measure(); }); frameRef.current = didRun ? 0 : frame; }, [measure]); useKeyedLayoutEffect(joinEffectKey([measure]), () => { measure(); }); useKeyedMountEffect(joinEffectKey([scheduleMeasure]), () => { const viewport = viewportRef.current; if (!viewport) return; viewport.addEventListener("scroll", scheduleMeasure, { passive: true }); const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(scheduleMeasure) : null; observer?.observe(viewport); return () => { if (frameRef.current) cancelAnimationFrame(frameRef.current); viewport.removeEventListener("scroll", scheduleMeasure); observer?.disconnect(); }; }); const visibleLines = lines.slice(windowRange.start, windowRange.end); return (

        
          {visibleLines.map((line, offset) => {
            const lineIndex = windowRange.start + offset;
            return (
              
            );
          })}

); } /** * A read-only JSON viewer: pretty-prints `data`, applies theme-aware syntax * highlighting, scrolls within its container, and reveals a copy button on hover. */ export function JsonInspector({ data, className, }: { data: unknown; className?: string; }) { const formatted = React.useMemo(() => JSON.stringify(data, null, 2), [data]); const lines = React.useMemo(() => formatted.split("\n"), [formatted]); const shouldVirtualize = lines.length > SMALL_JSON_LINE_LIMIT; return (

{shouldVirtualize ? ( ) : ( )}

); } 54:Tca6,const JSON_DEFAULT_TEXT_CLASS_NAME = "text-foreground/70"; const JSON_INSPECTOR_HTML_CACHE_LIMIT = 4_096; type JsonInspectorTokenSpan = { className: string; end: number; start: number; text: string; }; type JsonInspectorHighlightPattern = { className: string; regex: RegExp; }; export type JsonInspectorLineHtmlCache = { get(line: string): string; readonly size: number; }; const JSON_HIGHLIGHT_PATTERNS: readonly JsonInspectorHighlightPattern[] = [ { regex: /"([^"]+)"(?=\s*:)/g, className: "text-violet-600 dark:text-violet-400", }, { regex: /"([^"]*)"/g, className: "text-amber-700 dark:text-amber-400" }, { regex: /\b(true|false)\b/g, className: "text-emerald-600 dark:text-emerald-400", }, { regex: /\bnull\b/g, className: "text-muted-foreground" }, { regex: /\b(\d+\.?\d*)\b/g, className: "text-blue-600 dark:text-blue-400", }, ]; export function createJsonInspectorLineHtmlCache( maxSize = JSON_INSPECTOR_HTML_CACHE_LIMIT, ): JsonInspectorLineHtmlCache { const cache = new Map(); const limit = Math.max(1, Math.floor(maxSize)); return { get(line) { const cached = cache.get(line); if (cached !== undefined) { cache.delete(line); cache.set(line, cached); return cached; } const html = jsonInspectorLineToHtml(line); cache.set(line, html); while (cache.size > limit) { const oldest = cache.keys().next().value as string | undefined; if (oldest === undefined) break; cache.delete(oldest); } return html; }, get size() { return cache.size; }, }; } export function jsonInspectorLineToHtml(line: string): string { const spans = jsonInspectorTokenSpans(line); if (spans.length === 0) { return spanToHtml(JSON_DEFAULT_TEXT_CLASS_NAME, line); } spans.sort((a, b) => a.start - b.start); let html = ""; let lastEnd = 0; for (const span of spans) { if (span.start > lastEnd) { html += spanToHtml( JSON_DEFAULT_TEXT_CLASS_NAME, line.slice(lastEnd, span.start), ); } html += spanToHtml(span.className, span.text); lastEnd = span.end; } if (lastEnd < line.length) { html += spanToHtml(JSON_DEFAULT_TEXT_CLASS_NAME, line.slice(lastEnd)); } return html; } function jsonInspectorTokenSpans(line: string): JsonInspectorTokenSpan[] { const spans: JsonInspectorTokenSpan[] = []; for (const { regex, className } of JSON_HIGHLIGHT_PATTERNS) { const re = new RegExp(regex.source, "g"); let match: RegExpExecArray | null; while ((match = re.exec(line)) !== null) { const start = match.index; const end = start + match[0].length; const overlaps = spans.some( (span) => start < span.end && end > span.start, ); if (!overlaps) { spans.push({ start, end, className, text: match[0] }); } } } return spans; } function spanToHtml(className: string, text: string) { return `${escapeJsonInspectorHtml(text)}`; } function escapeJsonInspectorHtml(value: string) { return value .replace(/&/g, "&") .replace(//g, ">"); } 50:["$","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-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":"lucide-react"}]]}]}]]}],["$","$L51",null,{"namespace":"@retab","registryDependencies":["@retab/scroll-area","@retab/utils","@retab/effect-key","@retab/use-keyed-layout-effect","@retab/use-keyed-mount-effect"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/new-york-v4/ui/json-inspector.tsx","content":"$53","type":"registry:ui","target":"@ui/json-inspector.tsx"},{"path":"registry/new-york-v4/ui/json-inspector-highlight.ts","content":"$54","type":"registry:ui","target":"@ui/json-inspector-highlight.ts"}],"className":"h-[70svh] min-h-80"}]]}]