64: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 65: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 66:T2990,'use client'; /** * @file data-table-artifact.tsx * @description Generic sortable data table for rendering LOCAL row data — * VectorDB search results, model-catalog rows, evaluation rows, or * `generateObject()` array output. Sorting is performed entirely client-side. * Distinct from the inline `ScoredResultBarList`: this is a docked-canvas table. */ import * as React from 'react'; import { ChevronUp, ChevronDown, ChevronsUpDown } from 'lucide-react'; import { cn } from '@/registry/localmode/lib/utils'; import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell, TableCaption, } from '@/registry/localmode/ui/table'; /** A column definition for {@link DataTableArtifact}. */ export interface DataTableColumn { /** Key into the row object (used as the default accessor and sort key). */ key: keyof Row & string; /** Header label. Defaults to `key`. */ header?: string; /** Custom cell renderer. Defaults to `String(row[key])`. */ cell?: (row: Row) => React.ReactNode; /** When false, the column header is not clickable to sort. @default true */ sortable?: boolean; /** Align the column's text. @default "left" */ align?: 'left' | 'right' | 'center'; } /** Props for {@link DataTableArtifact}. */ export interface DataTableArtifactProps> { /** The rows to render. Sorting reorders a copy; the input array is untouched. */ rows: Row[]; /** * Column definitions. When omitted, columns are inferred from the keys of the * first row. */ columns?: DataTableColumn[]; /** Optional caption rendered under the table. */ caption?: React.ReactNode; /** Initial sort column key. */ initialSortKey?: keyof Row & string; /** Initial sort direction. @default "asc" */ initialSortDirection?: 'asc' | 'desc'; /** Message shown when `rows` is empty. @default "No data" */ emptyMessage?: React.ReactNode; /** Additional class names merged onto the root wrapper. */ className?: string; } type SortState = { key: keyof Row & string; direction: 'asc' | 'desc'; } | null; /** Compare two arbitrary cell values for sorting (numbers, strings, dates, bools). */ function compareValues(a: unknown, b: unknown): number { if (a == null && b == null) return 0; if (a == null) return -1; if (b == null) return 1; if (typeof a === 'number' && typeof b === 'number') return a - b; if (typeof a === 'boolean' && typeof b === 'boolean') return Number(a) - Number(b); if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime(); return String(a).localeCompare(String(b), undefined, { numeric: true }); } /** * A docked-canvas sortable data table. Click a sortable column header to sort * the rows ascending → descending → unsorted, all client-side. Renders any * local row data (VectorDB results, model catalog, eval rows, * `generateObject()` arrays). * * Styled with shadcn/ui CSS variables so it inherits the consumer's theme. * * @example * ```tsx * * ``` */ export function DataTableArtifact>({ rows, columns, caption, initialSortKey, initialSortDirection = 'asc', emptyMessage = 'No data', className, }: DataTableArtifactProps) { const resolvedColumns: DataTableColumn[] = React.useMemo(() => { if (columns && columns.length > 0) return columns; const first = rows[0]; if (!first) return []; return (Object.keys(first) as (keyof Row & string)[]).map((key) => ({ key, })); }, [columns, rows]); const [sort, setSort] = React.useState>( initialSortKey ? { key: initialSortKey, direction: initialSortDirection } : null, ); const sortedRows = React.useMemo(() => { if (!sort) return rows; const copy = [...rows]; copy.sort((rowA, rowB) => { const result = compareValues(rowA[sort.key], rowB[sort.key]); return sort.direction === 'asc' ? result : -result; }); return copy; }, [rows, sort]); const toggleSort = (key: keyof Row & string) => { setSort((current) => { if (!current || current.key !== key) return { key, direction: 'asc' }; if (current.direction === 'asc') return { key, direction: 'desc' }; return null; // third click clears the sort }); }; if (rows.length === 0) { return (

{emptyMessage}

); } return (

{sortedRows.map((row, rowIndex) => (

{column.header ?? column.key}: {column.cell ? column.cell(row) : formatCell(row[column.key])}

))}

{caption ? (

{caption}

) : null}

{caption ? {caption} : null} {resolvedColumns.map((column) => { const isSortable = column.sortable !== false; const isActive = sort?.key === column.key; const alignClass = column.align === 'right' ? 'text-right' : column.align === 'center' ? 'text-center' : 'text-left'; return ( {isSortable ? ( ) : ( (column.header ?? column.key) )} ); })} {sortedRows.map((row, rowIndex) => ( {resolvedColumns.map((column) => { const alignClass = column.align === 'right' ? 'text-right' : column.align === 'center' ? 'text-center' : 'text-left'; return ( {column.cell ? column.cell(row) : formatCell(row[column.key])} ); })} ))}

); } /** Render a primitive cell value as text; objects fall back to JSON. */ function formatCell(value: unknown): React.ReactNode { if (value == null) return ''; if (typeof value === 'number') return value.toLocaleString(); if (value instanceof Date) return value.toLocaleString(); if (typeof value === 'object') return JSON.stringify(value); return String(value); } export default DataTableArtifact; 63:["$","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"}]]}]}]]}],["$","$L64",null,{"namespace":"@registrydirectory","registryDependencies":["https://localmode.ai/r/ui/lib/utils.json","table"]}]]}],null]}],["$","$L65",null,{"files":[{"path":"registry/localmode/artifacts/data-table-artifact/data-table-artifact.tsx","content":"$66","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]