50: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"] 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:T73d6,"use client" import type * as GlideDataGrid from "@glideapps/glide-data-grid" import type { DataEditorRef, GridCell, GridCellKind, GridColumn, GridSelection, Item, Theme, } from "@glideapps/glide-data-grid" import { CompactSelection, emptyGridSelection, } from "@glideapps/glide-data-grid" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Input } from "@/components/ui/input" import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" import { Separator } from "@/components/ui/separator" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip" import { IconPlaceholder } from "@/components/icon-placeholder" import "@glideapps/glide-data-grid/dist/index.css" import * as React from "react" import Papa from "papaparse" const ZOOM_OPTIONS = [0.75, 1, 1.25, 1.5, 2] as const const CSV_SEARCH_BATCH_ROW_COUNT = 500 const CSV_SEARCH_DEBOUNCE_MS = 300 type GlideDataGridModule = typeof GlideDataGrid type CsvViewerProps = { className?: string data?: string search?: boolean } type CsvSearchResult = { col: number row: number displayValue: string columnTitle: string } function toDisplayString(value: unknown): string { return value === null || value === undefined ? "" : String(value) } function normalizeHeaderTitle(header: string, index: number): string { const trimmed = header.trim() return trimmed.length > 0 ? trimmed : `Column ${index + 1}` } function columnIndexToA1(col: number) { let columnNumber = col + 1 let columnName = "" while (columnNumber > 0) { const remainder = (columnNumber - 1) % 26 columnName = String.fromCharCode(65 + remainder) + columnName columnNumber = Math.floor((columnNumber - 1) / 26) } return columnName } function cellAddressToA1(col: number, row: number) { return `${columnIndexToA1(col)}${row + 1}` } function cellMatchesQuery(displayValue: string, query: string) { return displayValue.toLowerCase().includes(query) } function createSingleCellSelection(cell: Item): GridSelection { const [col, row] = cell return { columns: CompactSelection.empty(), rows: CompactSelection.empty(), current: { cell, range: { x: col, y: row, width: 1, height: 1 }, rangeStack: [], }, } } async function findCsvSearchResults( headers: string[], rows: string[][], rawQuery: string ) { const query = rawQuery.trim().toLowerCase() if (!query) return [] const results: CsvSearchResult[] = [] const columnCount = Math.max( headers.length, rows.reduce((maxCount, row) => Math.max(maxCount, row.length), 0) ) for ( let batchStartRow = 0; batchStartRow < rows.length; batchStartRow += CSV_SEARCH_BATCH_ROW_COUNT ) { const batchEndRow = Math.min( batchStartRow + CSV_SEARCH_BATCH_ROW_COUNT, rows.length ) for (let row = batchStartRow; row < batchEndRow; row += 1) { const rowValues = rows[row] ?? [] for (let col = 0; col < columnCount; col += 1) { const displayValue = rowValues[col] ?? "" if (!cellMatchesQuery(displayValue, query)) continue results.push({ col, row, displayValue, columnTitle: headers[col] ?? `Column ${col + 1}`, }) } } if (batchEndRow < rows.length) { await new Promise((resolve) => { window.setTimeout(resolve, 0) }) } } return results } function parseDelimitedText(text: string): { headers: string[] rows: string[][] error: string | null } { const results = Papa.parse>(text, { header: true, skipEmptyLines: "greedy", }) const objectRows = Array.isArray(results.data) ? results.data.filter( (row): row is Record => !!row && typeof row === "object" && !Array.isArray(row) ) : [] const metaFields = Array.isArray(results.meta.fields) ? results.meta.fields.map((field) => String(field)) : [] const fieldKeys = metaFields.length > 0 ? metaFields : Object.keys(objectRows[0] ?? {}).filter( (key) => key !== "__parsed_extra" ) const extraColumnCount = objectRows.reduce((maxCount, row) => { const extras = row.__parsed_extra return Array.isArray(extras) ? Math.max(maxCount, extras.length) : maxCount }, 0) const headers = [ ...fieldKeys.map((field, index) => normalizeHeaderTitle(field, index)), ...Array.from( { length: extraColumnCount }, (_, index) => `Extra ${index + 1}` ), ] const rows = objectRows.map((row) => { const baseValues = fieldKeys.map((fieldKey) => toDisplayString(row[fieldKey]) ) const extras = Array.isArray(row.__parsed_extra) ? row.__parsed_extra.map((value) => toDisplayString(value)) : [] const paddedExtras = extras.length >= extraColumnCount ? extras.slice(0, extraColumnCount) : [ ...extras, ...Array.from( { length: extraColumnCount - extras.length }, () => "" ), ] return [...baseValues, ...paddedExtras] }) const firstError = Array.isArray(results.errors) && results.errors.length > 0 ? results.errors[0] : null return { headers, rows, error: rows.length === 0 && firstError ? String(firstError.message ?? "Could not parse CSV file.") : null, } } function ensureCsvExtension(fileName: string) { const lowerFileName = fileName.toLowerCase() return lowerFileName.endsWith(".csv") || lowerFileName.endsWith(".tsv") ? fileName : `${fileName}.csv` } function downloadTextFile(text: string, fileName: string, type: string) { const url = URL.createObjectURL(new Blob([text], { type })) const anchor = document.createElement("a") anchor.href = url anchor.download = fileName anchor.rel = "noopener" document.body.append(anchor) anchor.click() anchor.remove() window.setTimeout(() => URL.revokeObjectURL(url), 0) } function CsvFileActionsMenu({ downloadDisabled, isPending, onDownload, onUploadClick, }: { downloadDisabled: boolean isPending: boolean onDownload: () => void onUploadClick: () => void }) { return ( } > Download {isPending ? ( ) : ( )} Upload ) } function ToolbarTooltip({ label, children, }: { label: string children: React.ReactNode }) { return ( {children}} > {label} ) } function CsvSearchPopover({ headers, rows, gridRef, controlsDisabled, onGridSelectionChange, }: { headers: string[] rows: string[][] gridRef: React.RefObject controlsDisabled: boolean onGridSelectionChange: (selection: GridSelection) => void }) { const [searchDraft, setSearchDraft] = React.useState("") const [searchQuery, setSearchQuery] = React.useState("") const [searchResults, setSearchResults] = React.useState( [] ) const [activeResultIndex, setActiveResultIndex] = React.useState(0) const [isSearching, setIsSearching] = React.useState(false) const searchRequestIdRef = React.useRef(0) const appliedResultKeyRef = React.useRef("") const activeResult = searchResults[activeResultIndex] ?? null const activeResultKey = activeResult ? `${activeResult.row}:${activeResult.col}` : "" const hasActiveQuery = Boolean(searchQuery.trim()) const resultLabel = isSearching ? "Searching" : !hasActiveQuery ? "No search" : searchResults.length ? `${activeResultIndex + 1} / ${searchResults.length}` : "No results" const runSearch = React.useCallback( (rawQuery: string) => { const nextQuery = rawQuery.trim() const requestId = searchRequestIdRef.current + 1 searchRequestIdRef.current = requestId appliedResultKeyRef.current = "" setSearchQuery(nextQuery) setActiveResultIndex(0) if (!nextQuery) { setSearchResults([]) setIsSearching(false) return } setIsSearching(true) void findCsvSearchResults(headers, rows, nextQuery) .then((nextResults) => { if (searchRequestIdRef.current !== requestId) return setSearchResults(nextResults) }) .catch(() => { if (searchRequestIdRef.current !== requestId) return setSearchResults([]) }) .finally(() => { if (searchRequestIdRef.current !== requestId) return setIsSearching(false) }) }, [headers, rows] ) React.useEffect(() => { if (!searchDraft.trim()) return const timeoutId = window.setTimeout(() => { runSearch(searchDraft) }, CSV_SEARCH_DEBOUNCE_MS) return () => window.clearTimeout(timeoutId) }, [runSearch, searchDraft]) const handleSearchDraftChange = (nextDraft: string) => { searchRequestIdRef.current += 1 setSearchDraft(nextDraft) if (!nextDraft.trim()) { runSearch("") return } setIsSearching(true) } const clearSearch = React.useCallback(() => { searchRequestIdRef.current += 1 setSearchDraft("") setSearchQuery("") setSearchResults([]) setActiveResultIndex(0) setIsSearching(false) appliedResultKeyRef.current = "" onGridSelectionChange(emptyGridSelection) }, [onGridSelectionChange]) const goToRelativeResult = React.useCallback( (direction: 1 | -1) => { if (!searchResults.length) return setActiveResultIndex((currentIndex) => { return ( (currentIndex + direction + searchResults.length) % searchResults.length ) }) }, [searchResults.length] ) React.useEffect(() => { return () => { searchRequestIdRef.current += 1 } }, []) React.useEffect(() => { if (!activeResult) return if (appliedResultKeyRef.current === activeResultKey) return appliedResultKeyRef.current = activeResultKey const cell: Item = [activeResult.col, activeResult.row] onGridSelectionChange(createSingleCellSelection(cell)) const frame = window.requestAnimationFrame(() => { gridRef.current?.scrollTo( activeResult.col, activeResult.row, "both", 48, 48, { vAlign: "center", hAlign: "center", } ) }) return () => window.cancelAnimationFrame(frame) }, [activeResult, activeResultKey, gridRef, onGridSelectionChange]) return ( } >

handleSearchDraftChange(event.target.value)} onKeyDown={(event) => { if (event.key !== "Enter") return event.preventDefault() if (event.shiftKey && searchResults.length) { goToRelativeResult(-1) } else if (searchResults.length) { goToRelativeResult(1) } else if (searchDraft.trim()) { runSearch(searchDraft) } }} />

{searchResults.length ? ( <> {activeResultIndex + 1} {` / ${searchResults.length}`} ) : ( resultLabel )}

{activeResult ? (

{activeResult.columnTitle}! {cellAddressToA1(activeResult.col, activeResult.row)}

) : null}

) } function readIsDarkTheme() { return ( typeof document !== "undefined" && document.documentElement.classList.contains("dark") ) } function subscribeToDarkTheme(listener: () => void) { const observer = new MutationObserver(listener) observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"], }) return () => observer.disconnect() } function useIsDarkTheme() { return React.useSyncExternalStore( subscribeToDarkTheme, readIsDarkTheme, () => false ) } export function CsvViewer({ className, data, search = false }: CsvViewerProps) { const inputRef = React.useRef(null) const gridRef = React.useRef(null) const isDark = useIsDarkTheme() const [glide, setGlide] = React.useState(null) const [zoom, setZoom] = React.useState<(typeof ZOOM_OPTIONS)[number]>(1) const [gridSelection, setGridSelection] = React.useState(emptyGridSelection) const [parsed, setParsed] = React.useState(() => data ? parseDelimitedText(data) : { headers: [], rows: [], error: null } ) const [uploadedFileName, setUploadedFileName] = React.useState( null ) const [isPending, setIsPending] = React.useState(false) const [dataRevision, setDataRevision] = React.useState(0) const dataIdentity = React.useMemo( () => `${dataRevision}:${parsed.headers.join("\u0001")}:${parsed.rows.length}:${parsed.error ?? ""}`, [dataRevision, parsed.error, parsed.headers, parsed.rows.length] ) const handleGridSelectionChange = React.useCallback( (selection: GridSelection) => { setGridSelection(selection) }, [] ) const [previousData, setPreviousData] = React.useState(data) if (!Object.is(previousData, data)) { setPreviousData(data) if (data) { setParsed(parseDelimitedText(data)) setUploadedFileName(null) setDataRevision((revision) => revision + 1) } } const [selectionSource, setSelectionSource] = React.useState({ dataRevision, search, }) if ( selectionSource.dataRevision !== dataRevision || selectionSource.search !== search ) { setSelectionSource({ dataRevision, search }) if (selectionSource.dataRevision !== dataRevision || !search) { setGridSelection(emptyGridSelection) } } React.useEffect(() => { let mounted = true void import("@glideapps/glide-data-grid").then((module) => { if (mounted) { setGlide(module) } }) return () => { mounted = false } }, []) const columnCount = Math.max(1, parsed.headers.length) const scale = React.useCallback( (value: number) => Math.round(value * zoom), [zoom] ) const searchDisabled = Boolean(parsed.error) || parsed.rows.length === 0 || isPending const theme = React.useMemo>( () => ({ accentColor: isDark ? "#60a5fa" : "#2563eb", accentLight: isDark ? "#1d4ed826" : "#dbeafe", accentFg: "#ffffff", textDark: isDark ? "#e5e5e5" : "#171717", textMedium: isDark ? "#a3a3a3" : "#525252", textLight: isDark ? "#737373" : "#a3a3a3", textBubble: isDark ? "#f5f5f5" : "#171717", textHeader: isDark ? "#f5f5f5" : "#171717", textGroupHeader: isDark ? "#a3a3a3" : "#525252", bgCell: isDark ? "#0a0a0a" : "#ffffff", bgCellMedium: isDark ? "#171717" : "#fafafa", bgHeader: isDark ? "#171717" : "#fafafa", bgHeaderHasFocus: isDark ? "#262626" : "#f5f5f5", bgHeaderHovered: isDark ? "#262626" : "#f5f5f5", borderColor: isDark ? "#262626" : "#e5e5e5", horizontalBorderColor: isDark ? "#262626" : "#e5e5e5", cellHorizontalPadding: scale(8), cellVerticalPadding: Math.max(2, scale(3)), headerIconSize: scale(18), baseFontStyle: `${scale(13)}px`, headerFontStyle: `600 ${scale(13)}px`, markerFontStyle: `${scale(11)}px`, fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif', editorFontSize: `${scale(13)}px`, }), [isDark, scale] ) const columns = React.useMemo( () => Array.from({ length: columnCount }, (_, index) => ({ id: `column-${index}`, title: parsed.headers[index] ?? `Column ${index + 1}`, width: scale(index === 0 ? 180 : 160), })), [columnCount, parsed.headers, scale] ) const getCellContent = React.useCallback( ([col, row]: Item): GridCell => { const value = parsed.rows[row]?.[col] ?? "" const textKind = glide?.GridCellKind.Text as GridCellKind.Text return { kind: textKind, data: value, displayData: value, allowOverlay: true, readonly: true, } }, [glide, parsed.rows] ) async function handleUpload(event: React.ChangeEvent) { const file = event.target.files?.[0] if (!file) return setIsPending(true) try { const text = await file.text() setParsed(parseDelimitedText(text)) setUploadedFileName(file.name) setDataRevision((revision) => revision + 1) } catch (error) { setParsed({ headers: [], rows: [], error: error instanceof Error ? error.message : "Could not read CSV file.", }) setDataRevision((revision) => revision + 1) } finally { event.target.value = "" setIsPending(false) } } function stepZoom(direction: -1 | 1) { const index = ZOOM_OPTIONS.indexOf(zoom) const nextIndex = Math.min( ZOOM_OPTIONS.length - 1, Math.max(0, index + direction) ) setZoom(ZOOM_OPTIONS[nextIndex]) } function handleDownload() { const text = Papa.unparse({ fields: parsed.headers, data: parsed.rows, }) downloadTextFile( text, ensureCsvExtension(uploadedFileName ?? "data.csv"), "text/csv;charset=utf-8" ) } return (

{search ? ( <> ) : null} inputRef.current?.click()} />

{parsed.error ? (

{parsed.error}

) : parsed.rows.length === 0 ? (

Upload a CSV to preview

Pass delimited text with the data prop or upload a CSV file.

inputRef.current?.click()} > Upload CSV

) : !glide ? (

) : ( )}

) } function InlineLoadingButton({ loading, disabled, children, className, ...props }: React.ComponentProps & { loading?: boolean }) { return ( ) } function InlineSpinner({ className, ...props }: InlineRegistryIconProps) { return ( ) } type InlineRegistryIconProps = Omit< React.ComponentProps<"svg">, "children" | "strokeWidth" > & { strokeWidth?: number } 4f:["$","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","@glideapps/glide-data-grid@6.0.4-alpha24",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40glideapps%2Fglide-data-grid","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":"@glideapps/glide-data-grid@6.0.4-alpha24"}]]}]}],["$","li","papaparse@^5.5.3",{"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.5.3"}]]}]}]]}],["$","$L50",null,{"namespace":"@extend","registryDependencies":["utils","button","dropdown-menu","input","popover","select","separator","tooltip"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/extend/csv-viewer.tsx","content":"$52","type":"registry:ui","target":"@components/extend/csv-viewer.tsx"}],"className":"h-[70svh] min-h-80"}]]}]