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:T1c97,/* @jsxImportSource @opentui/react */ import { useKeyboard } from "@opentui/react"; import type { Key } from "react"; import { useMemo, useState } from "react"; import { useTheme } from "@/hooks/use-theme"; export interface Column> { key: keyof T & string; header: string; width?: number; align?: "left" | "right" | "center"; } export interface TableProps< T extends Record = Record, > { data: T[]; columns: Column[]; sortable?: boolean; selectable?: boolean; onSelect?: (row: T) => void; maxRows?: number; borderColor?: string; } const BORDER = { bottom: { cross: "┴", left: "╰", line: "─", right: "╯" }, data: { cross: "│", left: "│", line: " ", right: "│" }, heading: { cross: "│", left: "│", line: " ", right: "│" }, separator: { cross: "┼", left: "├", line: "─", right: "┤" }, top: { cross: "┬", left: "╭", line: "─", right: "╮" }, } as const; const pad = ( str: string, width: number, align: "left" | "right" | "center" = "left" ): string => { const s = String(str); if (s.length >= width) { return s.slice(0, width); } const diff = width - s.length; if (align === "right") { return " ".repeat(diff) + s; } if (align === "center") { const l = Math.floor(diff / 2); return " ".repeat(l) + s + " ".repeat(diff - l); } return s + " ".repeat(diff); }; const intersperse = (items: T[], separator: (index: number) => T): T[] => { const result: T[] = []; for (let i = 0; i < items.length; i += 1) { if (i > 0) { result.push(separator(i)); } const item = items[i]; if (item !== undefined) { result.push(item); } } return result; }; interface SkeletonChars { left: string; right: string; cross: string; line: string; } const SkeletonRow = ({ widths, skeleton, color, }: { widths: number[]; skeleton: SkeletonChars; color: string; }) => ( {skeleton.left} {intersperse( widths.map((w, i) => ( {skeleton.line.repeat(w + 2)} )), (i) => ( {skeleton.cross} ) )} {skeleton.right} ); const CellRow = ({ widths, cells, skeleton, borderColor, textColor, bold, inverse, }: { key?: Key | null; widths: number[]; cells: { text: string; align: "left" | "right" | "center"; }[]; skeleton: SkeletonChars; borderColor: string; textColor: string; bold?: boolean; inverse?: boolean; }) => ( {skeleton.left} {intersperse( cells.map((cell, i) => { const content = ` ${pad(cell.text, widths[i] ?? 0, cell.align)} `; return ( {bold ? {content} : content} ); }), (i) => ( {skeleton.cross} ) )} {skeleton.right} ); export const Table = < T extends Record = Record, >({ data, columns, sortable = false, selectable = false, onSelect, maxRows = 20, borderColor, }: TableProps) => { const theme = useTheme(); const [sortKey, setSortKey] = useState(null); const [sortDir, setSortDir] = useState<"asc" | "desc">("asc"); const [activeRow, setActiveRow] = useState(0); const [sortColIdx, setSortColIdx] = useState(0); const resolvedBorderColor = borderColor ?? theme.colors.border; const sorted = useMemo(() => { if (!sortKey) { return data; } return [...data].toSorted((a, b) => { const cmp = String(a[sortKey]).localeCompare(String(b[sortKey])); return sortDir === "asc" ? cmp : -cmp; }); }, [data, sortKey, sortDir]); const visible = sorted.slice(0, maxRows); useKeyboard((key) => { if (key.name === "up") { setActiveRow((r) => Math.max(0, r - 1)); } else if (key.name === "down") { setActiveRow((r) => Math.min(visible.length - 1, r + 1)); } else if (key.name === "return" && selectable) { onSelect?.(visible[activeRow] as T); } else if (sortable && key.name === "left") { setSortColIdx((i) => Math.max(0, i - 1)); } else if (sortable && key.name === "right") { setSortColIdx((i) => Math.min(columns.length - 1, i + 1)); } else if (sortable && key.name === "s") { const col = columns[sortColIdx]; if (!col) { return; } if (sortKey === col.key) { setSortDir((d) => (d === "asc" ? "desc" : "asc")); } else { setSortKey(col.key); setSortDir("asc"); } } }); const colWidths = columns.map((col) => { let dataMax = 0; for (const row of data) { dataMax = Math.max(dataMax, String(row[col.key] ?? "").length); } return col.width ?? Math.max(col.header.length, dataMax); }); const headerCells = columns.map((col) => ({ align: col.align ?? ("left" as const), text: col.header, })); return ( {visible.map((row, rowIdx) => { const isActive = rowIdx === activeRow && selectable; const rowCells = columns.map((col) => ({ align: col.align ?? ("left" as const), text: String(row[col.key] ?? ""), })); return ( ); })} {data.length > maxRows ? (() => { const innerWidth = colWidths.reduce((a, b) => a + b, 0) + colWidths.length * 3 - 3; const msg = `… ${data.length - maxRows} more rows`; return ( │ {` ${pad(msg, innerWidth)} `} │ ); })() : null} ); }; 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","@opentui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40opentui%2Freact","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":"@opentui/react"}]]}]}]]}],["$","$L51",null,{"namespace":"@termcn","registryDependencies":["https://termcn.dev/r/opentui/use-theme.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/opentui/ui/table.tsx","content":"$53","type":"registry:ui","target":"components/ui/table.tsx"}],"className":"h-[70svh] min-h-80"}]]}]