4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T1ed3,"use client" import * as React from "react" import { ArrowDown, ArrowUp, TriangleAlert } from "lucide-react" import { cn } from "@/lib/utils" export type CsvTable = { fields: string[] rows: string[][] } export type CsvParser = (source: string | File) => Promise export type CsvViewerProps = Omit< React.HTMLAttributes, "children" > & { source?: string | File table?: CsvTable parser?: CsvParser maxRows?: number label?: string emptyLabel?: React.ReactNode loadingLabel?: React.ReactNode } type Sort = { column: number; direction: "asc" | "desc" } | null /** Hold the loading state back so a fast result never flashes it. */ const LOADING_DELAY_MS = 120 const MISSING_PAPAPARSE = 'CsvViewer needs the "papaparse" package, or a `parser` prop that returns { fields, rows }.' async function parseWithPapa(source: string | File): Promise { let Papa: typeof import("papaparse") try { Papa = await import("papaparse") } catch { throw new Error(MISSING_PAPAPARSE) } // Bundlers disagree on whether this module arrives namespaced or default. const parse = (Papa as { default?: typeof Papa }).default ?? Papa return new Promise((resolve, reject) => { parse.parse(source as string, { skipEmptyLines: true, complete: (result: { data: string[][] }) => { const [header = [], ...rows] = result.data resolve({ fields: header, rows }) }, error: reject, }) }) } function compare(a: string, b: string) { const left = Number(a) const right = Number(b) if (!Number.isNaN(left) && !Number.isNaN(right) && a !== "" && b !== "") { return left - right } return a.localeCompare(b) } export function CsvViewer({ source, table, parser = parseWithPapa, maxRows = 200, label = "CSV contents", emptyLabel = "This file has no rows.", loadingLabel = "Reading the file…", className, ...rootProps }: CsvViewerProps) { const [fetched, setFetched] = React.useState(null) const [error, setError] = React.useState(null) const [loading, setLoading] = React.useState(false) const [sort, setSort] = React.useState(null) const parsed = table ?? fetched React.useEffect(() => { if (table || source == null) return const controller = new AbortController() const spinner = window.setTimeout(() => setLoading(true), LOADING_DELAY_MS) void parser(source) .then((result) => { if (controller.signal.aborted) return setFetched(result) setError(null) }) .catch((cause: unknown) => { if (controller.signal.aborted) return setError(cause instanceof Error ? cause.message : String(cause)) }) .finally(() => { window.clearTimeout(spinner) if (!controller.signal.aborted) setLoading(false) }) return () => { controller.abort() window.clearTimeout(spinner) } }, [source, table, parser]) const sorted = React.useMemo(() => { if (!parsed) return null if (!sort) return parsed.rows const factor = sort.direction === "asc" ? 1 : -1 return [...parsed.rows].sort( (a, b) => compare(a[sort.column] ?? "", b[sort.column] ?? "") * factor ) }, [parsed, sort]) const visible = sorted?.slice(0, maxRows) ?? [] const hidden = (sorted?.length ?? 0) - visible.length if (error) { return (

) } return (

{loading && !parsed ? (

{loadingLabel}

) : null} {parsed && parsed.rows.length === 0 ? (

{emptyLabel}

) : null} {parsed && parsed.rows.length > 0 ? ( <>

{parsed.fields.map((field, index) => { const active = sort?.column === index const direction = active ? sort.direction : undefined const Icon = direction === "desc" ? ArrowDown : ArrowUp return ( ) })} {visible.map((row, rowIndex) => ( {parsed.fields.map((_, columnIndex) => ( ))} ))}

{label}

{row[columnIndex] ?? ""}

{hidden > 0 ? `Showing ${visible.length} of ${sorted?.length} rows` : `${visible.length} ${visible.length === 1 ? "row" : "rows"}`}

) : null}

) } 4b:["$","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@^1.31.0",{"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@^1.31.0"}]]}]}],["$","li","papaparse@^5.6.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/papaparse","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":"papaparse@^5.6.0"}]]}]}]]}],["$","$L4c",null,{"namespace":"@mischief","registryDependencies":["utils"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"registry/default/csv-viewer/csv-viewer.tsx","content":"$4e","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]