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:T5210,"use client"; import { ArrowRight01Icon, Cancel01Icon, Database01Icon, HashIcon, Key01Icon, Link01Icon, Search01Icon, Table01Icon, } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; import { useEffect, useMemo, useRef, useState } from "react"; import type { ComponentProps, KeyboardEvent } from "react"; import { cn } from "@/lib/utils"; export interface ColumnRef { table: string; column: string; } export interface Column { name: string; /** SQL type, e.g. "uuid", "text", or "timestamptz". */ type: string; primaryKey?: boolean; unique?: boolean; nullable?: boolean; references?: ColumnRef; } export interface Index { name: string; columns: string[]; unique?: boolean; } export interface Table { name: string; /** Postgres schema; defaults to "public". */ schema?: string; columns: Column[]; indexes?: Index[]; /** Approximate row count. */ rowCount?: number; } interface TreeRow { id: string; kind: "table" | "column" | "index" | "relation"; table: Table; column?: Column; index?: Index; } const formatCount = (value: number) => { const formatter = new Intl.NumberFormat("en", { maximumFractionDigits: 1, notation: "compact", }); return formatter.format(value).toLowerCase(); }; const normalize = (value: string) => value.trim().toLowerCase(); const includesQuery = (value: string, query: string) => value.toLowerCase().includes(query); const getTableMatches = (table: Table, query: string) => { if (!query || includesQuery(table.name, query)) { return { columns: table.columns, indexes: table.indexes ?? [], tableMatches: true, }; } return { columns: table.columns.filter( (column) => includesQuery(column.name, query) || includesQuery(column.type, query) ), indexes: (table.indexes ?? []).filter( (index) => includesQuery(index.name, query) || index.columns.some((column) => includesQuery(column, query)) ), tableMatches: false, }; }; const getVisibleRows = ( tables: Table[], openTables: Set, query: string ) => { const rows: TreeRow[] = []; for (const table of tables) { const matches = getTableMatches(table, query); const relations = matches.columns.filter((column) => column.references); const isVisible = matches.tableMatches || matches.columns.length > 0 || matches.indexes.length > 0; if (!isVisible) { continue; } rows.push({ id: `table:${table.name}`, kind: "table", table }); if (!(openTables.has(table.name) || query)) { continue; } for (const column of matches.columns) { rows.push({ column, id: `column:${table.name}:${column.name}`, kind: "column", table, }); } for (const index of matches.indexes) { rows.push({ id: `index:${table.name}:${index.name}`, index, kind: "index", table, }); } for (const column of relations) { rows.push({ column, id: `relation:${table.name}:${column.name}`, kind: "relation", table, }); } } return rows; }; const Match = ({ children, query }: { children: string; query: string }) => { if (!query) { return children; } const start = children.toLowerCase().indexOf(query); if (start === -1) { return children; } const end = start + query.length; return ( <> {children.slice(0, start)} {children.slice(start, end)} {children.slice(end)} ); }; const Constraint = ({ children }: { children: string }) => ( {children} ); const TableRow = ({ treeId, table, open, query, active, tabIndex, onFocus, onToggle, }: { treeId: string; table: Table; open: boolean; query: string; active: boolean; tabIndex: number; onFocus: () => void; onToggle: () => void; }) => ( ); const LeafRow = ({ treeId, row, query, active, tabIndex, onFocus, onSelect, }: { treeId: string; row: TreeRow; query: string; active: boolean; tabIndex: number; onFocus: () => void; onSelect: () => void; }) => { const { column, index, kind } = row; const isColumn = kind === "column" && column; const relation = kind === "relation" ? column?.references : undefined; return ( ); }; const LoadingTree = () => ( {[72, 58, 84, 64].map((width) => (

))} ); export type SchemaExplorerProps = Omit, "children"> & { tables: Table[]; /** Expanded table names when controlled. */ expanded?: string[]; /** Table names expanded on first render. */ defaultExpanded?: string[]; onExpandedChange?: (expanded: string[]) => void; onColumnSelect?: (table: Table, column: Column) => void; onIndexSelect?: (table: Table, index: Index) => void; title?: string; isLoading?: boolean; }; export const SchemaExplorer = ({ tables, expanded, defaultExpanded, onExpandedChange, onColumnSelect, onIndexSelect, title = "public", isLoading = false, className, ...props }: SchemaExplorerProps) => { const controlled = expanded !== undefined; const [uncontrolledExpanded, setUncontrolledExpanded] = useState( () => new Set(defaultExpanded) ); const [query, setQuery] = useState(""); const [activeId, setActiveId] = useState(() => tables[0] ? `table:${tables[0].name}` : "" ); const typeahead = useRef(""); const typeaheadTimer = useRef | null>(null); const treeRef = useRef(null); const searchRef = useRef(null); const openTables = useMemo( () => (controlled ? new Set(expanded) : uncontrolledExpanded), [controlled, expanded, uncontrolledExpanded] ); const normalizedQuery = normalize(query); const rows = useMemo( () => getVisibleRows(tables, openTables, normalizedQuery), [tables, openTables, normalizedQuery] ); const tableCount = rows.filter((row) => row.kind === "table").length; const [firstRow] = rows; const resolvedActiveId = rows.some((row) => row.id === activeId) ? activeId : (firstRow?.id ?? ""); useEffect( () => () => { if (typeaheadTimer.current) { clearTimeout(typeaheadTimer.current); } }, [] ); const setOpenTables = (next: Set) => { if (!controlled) { setUncontrolledExpanded(next); } onExpandedChange?.([...next]); }; const toggleTable = (name: string, force?: boolean) => { const next = new Set(openTables); const shouldOpen = force ?? !next.has(name); if (shouldOpen) { next.add(name); } else { next.delete(name); } setOpenTables(next); }; const activateTable = (name: string) => { if (normalizedQuery) { setQuery(""); toggleTable(name, true); return; } toggleTable(name); }; const focusRow = (id: string) => { setActiveId(id); requestAnimationFrame(() => { treeRef.current ?.querySelector(`[data-tree-id="${CSS.escape(id)}"]`) ?.focus(); }); }; const navigateByOffset = (index: number, offset: number) => { const next = rows[Math.max(0, Math.min(rows.length - 1, index + offset))]; if (next) { focusRow(next.id); } }; const handleHorizontalKey = ( event: KeyboardEvent, active: TreeRow, index: number ) => { if (event.key === "ArrowRight" && active.kind === "table") { event.preventDefault(); if (openTables.has(active.table.name) || normalizedQuery) { const firstChild = rows[index + 1]; if (firstChild?.table.name === active.table.name) { focusRow(firstChild.id); } } else { toggleTable(active.table.name, true); } return true; } if (event.key !== "ArrowLeft") { return false; } event.preventDefault(); if (active.kind === "table" && openTables.has(active.table.name)) { toggleTable(active.table.name, false); } else if (active.kind !== "table") { focusRow(`table:${active.table.name}`); } return true; }; const handleTypeahead = ( event: KeyboardEvent, index: number ) => { if ( event.key.length !== 1 || event.metaKey || event.ctrlKey || event.altKey ) { return; } typeahead.current += event.key.toLowerCase(); if (typeaheadTimer.current) { clearTimeout(typeaheadTimer.current); } typeaheadTimer.current = setTimeout(() => { typeahead.current = ""; }, 500); const ordered = [...rows.slice(index + 1), ...rows.slice(0, index + 1)]; const match = ordered.find((row) => { const label = row.column?.name ?? row.index?.name ?? row.table.name; return label.toLowerCase().startsWith(typeahead.current); }); if (match) { focusRow(match.id); } }; const onTreeKeyDown = (event: KeyboardEvent) => { const index = rows.findIndex((row) => row.id === resolvedActiveId); const active = rows[index]; if (!active) { return; } if (event.key === "ArrowDown" || event.key === "ArrowUp") { event.preventDefault(); navigateByOffset(index, event.key === "ArrowDown" ? 1 : -1); return; } if (event.key === "Home" || event.key === "End") { event.preventDefault(); const edge = event.key === "Home" ? rows[0] : rows.at(-1); focusRow(edge?.id ?? active.id); return; } if (handleHorizontalKey(event, active, index)) { return; } if ( (event.key === "Enter" || event.key === " ") && active.kind === "table" ) { event.preventDefault(); activateTable(active.table.name); return; } if (event.key === "/") { event.preventDefault(); searchRef.current?.focus(); return; } handleTypeahead(event, index); }; return (

{title}

{tables.length} {tables.length === 1 ? "table" : "tables"}

/{" "} to search

setQuery(event.target.value)} placeholder="Find a table, column, or type" ref={searchRef} type="search" value={query} /> {query ? ( <> {tableCount} {tableCount === 1 ? "table" : "tables"} ) : null} {isLoading ? : null} {!isLoading && rows.length > 0 ? (

{rows.map((row) => { const active = row.id === resolvedActiveId; const common = { active, onFocus: () => setActiveId(row.id), query: normalizedQuery, tabIndex: active ? 0 : -1, }; return (

{row.kind === "table" ? ( activateTable(row.table.name)} open={ openTables.has(row.table.name) || Boolean(normalizedQuery) } table={row.table} treeId={row.id} /> ) : ( { if (row.kind === "column" && row.column) { onColumnSelect?.(row.table, row.column); } if (row.kind === "index" && row.index) { onIndexSelect?.(row.table, row.index); } }} row={row} treeId={row.id} /> )}

); })}

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

No schema objects found

Try a table, column, or Postgres type.

) : null}

); }; 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","@hugeicons/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%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":"@hugeicons/react"}]]}]}],["$","li","@hugeicons/core-free-icons",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Fcore-free-icons","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":"@hugeicons/core-free-icons"}]]}]}]]}],["$","$L50",null,{"namespace":"@neon-ui","registryDependencies":["utils","https://ui.neon.com/r/input.json","https://ui.neon.com/r/neon-tokens.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/components/schema-explorer/schema-explorer.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]