@kazurolabs/psql-explorer 0.0.0-stage → 0.3.0

package/dist/screens/panes/table.js

@@ -0,0 +1,178 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { listColumns, listConstraints, listIndexes, tableLabel, } from '../../explorer/catalog.js';
+import { formatBytes, formatDuration, formatEstimate } from '../../explorer/format.js';
+import { browseRows, countRows, DEFAULT_PAGE_SIZE } from '../../explorer/rows.js';
+import RecordView from '../record-view.js';
+import ResultGrid, { startCursor } from '../result-grid.js';
+import { gridHeight, Loading, PaneFrame, useLoader } from './common.js';
+const views = ['rows', 'structure', 'indexes'];
+const viewTitles = {
+    rows: 'Rows',
+    structure: 'Structure',
+    indexes: 'Indexes & constraints',
+};
+const text = (columns) => columns.map((name) => ({ name, type: 'text' }));
+const structureColumns = text(['column', 'type', 'nullable', 'default', 'key', 'comment']);
+const indexColumns = text(['name', 'kind', 'definition', 'size']);
+const structureRows = (columns) => columns.map((column) => [
+    column.name,
+    column.type,
+    column.nullable ? 'yes' : 'no',
+    column.default,
+    [column.primaryKey ? 'PK' : null, column.references ? 'FK' : null]
+        .filter((tag) => tag !== null)
+        .join(' ') || null,
+    column.comment,
+]);
+const indexRows = (indexes, constraints) => [
+    ...indexes.map((index) => [
+        index.name,
+        index.primary ? 'primary index' : index.unique ? 'unique index' : 'index',
+        index.definition,
+        formatBytes(index.bytes),
+    ]),
+    ...constraints.map((constraint) => [
+        constraint.name,
+        constraint.kind,
+        constraint.definition,
+        null,
+    ]),
+];
+/** Sorted by the primary key when there is one, so pages do not overlap. */
+const defaultOrder = (columns) => columns
+    .filter((column) => column.primaryKey)
+    .map((column) => ({ column: column.name, descending: false }));
+/** One table: a page of its rows, its columns, and its indexes and constraints. */
+export default function TablePane({ session, table, width, height, isInputActive, onClose }) {
+    const [view, setView] = useState('rows');
+    const [columns, loadColumns] = useLoader();
+    const [extras, loadExtras] = useLoader();
+    const [page, loadPage] = useLoader();
+    const [offset, setOffset] = useState(0);
+    // Undefined: the default order, once the columns are known.
+    const [order, setOrder] = useState();
+    const [count, loadCount] = useLoader();
+    const [cursors, setCursors] = useState({
+        rows: startCursor,
+        structure: startCursor,
+        indexes: startCursor,
+    });
+    const [record, setRecord] = useState();
+    useEffect(() => {
+        loadColumns(() => listColumns(session, table));
+        loadExtras(async () => ({
+            indexes: await listIndexes(session, table),
+            constraints: await listConstraints(session, table),
+        }));
+    }, [loadColumns, loadExtras, session, table]);
+    const known = columns.state === 'ready' ? columns.value : undefined;
+    const sort = order ?? (known ? defaultOrder(known) : undefined);
+    useEffect(() => {
+        if (!sort)
+            return;
+        loadPage(() => browseRows(session, table, { limit: DEFAULT_PAGE_SIZE, offset, orderBy: sort }));
+        // `sort` is a new array on every render; its content is what matters.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [loadPage, session, table, offset, JSON.stringify(sort)]);
+    const setCursor = (update) => {
+        setCursors((previous) => ({ ...previous, [view]: update(previous[view]) }));
+    };
+    const rowsResult = page.state === 'ready' ? page.value : undefined;
+    const grid = view === 'rows'
+        ? rowsResult
+            ? { columns: rowsResult.columns, rows: rowsResult.rows }
+            : undefined
+        : view === 'structure'
+            ? known
+                ? { columns: structureColumns, rows: structureRows(known) }
+                : undefined
+            : extras.state === 'ready'
+                ? { columns: indexColumns, rows: indexRows(extras.value.indexes, extras.value.constraints) }
+                : undefined;
+    const toggleSort = () => {
+        const column = rowsResult?.columns[cursors.rows.column]?.name;
+        if (!column)
+            return;
+        const current = sort?.length === 1 && sort[0]?.column === column ? sort[0] : undefined;
+        setOrder(!current
+            ? [{ column, descending: false }]
+            : !current.descending
+                ? [{ column, descending: true }]
+                : undefined);
+        setOffset(0);
+    };
+    useInput((input, key) => {
+        if (record !== undefined) {
+            if (key.escape || key.return)
+                setRecord(undefined);
+            return;
+        }
+        if (key.escape) {
+            onClose();
+            return;
+        }
+        if (key.tab) {
+            const at = views.indexOf(view);
+            setView(views[(at + (key.shift ? views.length - 1 : 1)) % views.length]);
+            return;
+        }
+        if (input === 'r') {
+            if (view === 'rows' && sort) {
+                loadPage(() => browseRows(session, table, { limit: DEFAULT_PAGE_SIZE, offset, orderBy: sort }));
+            }
+            else {
+                loadColumns(() => listColumns(session, table));
+                loadExtras(async () => ({
+                    indexes: await listIndexes(session, table),
+                    constraints: await listConstraints(session, table),
+                }));
+            }
+            return;
+        }
+        if (view !== 'rows')
+            return;
+        if ((input === 'n' || input === ']') && rowsResult?.rows.length === DEFAULT_PAGE_SIZE) {
+            setOffset(offset + DEFAULT_PAGE_SIZE);
+            setCursor((previous) => ({ ...previous, row: 0, top: 0 }));
+        }
+        else if ((input === 'p' || input === '[') && offset > 0) {
+            setOffset(Math.max(0, offset - DEFAULT_PAGE_SIZE));
+            setCursor((previous) => ({ ...previous, row: 0, top: 0 }));
+        }
+        else if (input === 'o')
+            toggleSort();
+        else if (input === 'c')
+            loadCount(() => countRows(session, table));
+    }, { isActive: isInputActive });
+    const marks = new Map(view === 'rows'
+        ? (sort ?? []).map(({ column, descending }) => [column, descending ? '▼' : '▲'])
+        : []);
+    const loading = view === 'rows' ? page : view === 'structure' ? columns : extras;
+    const tabs = (_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { bold: true, children: tableLabel(table) }), _jsx(Text, { dimColor: true, children: " \u00B7 " }), views.map((candidate, index) => (_jsxs(Text, { children: [index > 0 ? _jsx(Text, { dimColor: true, children: " \u2502 " }) : null, _jsx(Text, { bold: candidate === view, color: candidate === view ? 'cyan' : 'gray', underline: candidate === view, children: viewTitles[candidate] })] }, candidate)))] }));
+    if (record !== undefined && rowsResult) {
+        return (_jsx(PaneFrame, { height: height, width: width, hint: "\u2191\u2193 fields \u00B7 \u2190\u2192 previous/next row \u00B7 Esc close", children: _jsx(RecordView, { columns: rowsResult.columns, row: rowsResult.rows[record] ?? [], title: `${tableLabel(table)} · row ${offset + record + 1}`, width: width, height: gridHeight(height), isInputActive: isInputActive, onStep: (by) => {
+                    const next = record + by;
+                    if (next >= 0 && next < rowsResult.rows.length)
+                        setRecord(next);
+                } }, record) }));
+    }
+    const total = count.state === 'ready'
+        ? `${count.value} rows`
+        : count.state === 'loading'
+            ? 'counting…'
+            : count.state === 'failed'
+                ? `count failed: ${count.message}`
+                : table.estimatedRows === null
+                    ? undefined
+                    : `${formatEstimate(table.estimatedRows)} rows`;
+    const status = loading.state === 'failed' ? (_jsxs(Text, { color: "red", wrap: "truncate-end", children: ["\u2717 ", loading.message] })) : view === 'rows' && rowsResult ? (_jsxs(Text, { dimColor: true, wrap: "truncate-end", children: [rowsResult.rows.length === 0
+                ? `no rows from ${offset + 1}`
+                : `rows ${offset + 1}–${offset + rowsResult.rows.length}`, total ? ` of ${total}` : '', sort && sort.length > 0
+                ? ` · by ${sort.map((part) => part.column).join(', ')}`
+                : ' · unsorted', ` · ${formatDuration(rowsResult.durationMs)}`] })) : undefined;
+    return (_jsxs(PaneFrame, { height: height, width: width, status: status, hint: view === 'rows'
+            ? '↑↓←→ move · Enter row · n/p page · o sort · c count · r reload · Tab view · Esc tables'
+            : '↑↓←→ move · r reload · Tab view · Esc tables', children: [tabs, _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [loading.state === 'loading' || loading.state === 'idle' ? _jsx(Loading, {}) : null, grid && loading.state === 'ready' ? (_jsx(ResultGrid, { columns: grid.columns, rows: grid.rows, cursor: cursors[view], onCursor: setCursor, onOpen: view === 'rows' ? setRecord : undefined, width: width, height: gridHeight(height, 2), isInputActive: isInputActive && record === undefined, marks: marks, showTypes: view === 'rows', empty: view === 'rows' ? '(no rows)' : '(none)' })) : null] })] }));
+}

package/dist/screens/panes/tables.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import TextInput from 'ink-text-input';
+import { listSchemas, listTables } from '../../explorer/catalog.js';
+import { formatBytes, formatEstimate, pad, truncate } from '../../explorer/format.js';
+import { clampTop, moveTo, startPosition } from '../scroll.js';
+import { gridHeight, Loading, PaneFrame, useLoader } from './common.js';
+import TablePane from './table.js';
+const kindWidth = 13;
+const rowsWidth = 9;
+const sizeWidth = 10;
+const maxNameWidth = 40;
+const schemaSetting = (envKey) => `schema:${envKey}`;
+/** The tables of one schema; Enter opens one. */
+export default function TablesPane(props) {
+    const { session, services, entry, width, height, isInputActive, setNested } = props;
+    const [schema, setSchema] = useState(() => services.store.getSetting(schemaSetting(entry.key)) ?? session.params.schema);
+    const [schemas, loadSchemas] = useLoader();
+    const [tables, loadTables] = useLoader();
+    const [position, setPosition] = useState(startPosition);
+    const { selected } = position;
+    const [filter, setFilter] = useState('');
+    const [filtering, setFiltering] = useState(false);
+    const [picking, setPicking] = useState(false);
+    const [pickSelected, setPickSelected] = useState(0);
+    const [open, setOpen] = useState();
+    useEffect(() => {
+        loadSchemas(() => listSchemas(session));
+    }, [loadSchemas, session]);
+    useEffect(() => {
+        loadTables(() => listTables(session, schema));
+    }, [loadTables, session, schema]);
+    useEffect(() => {
+        setNested(filtering || picking || open !== undefined);
+    }, [filtering, picking, open, setNested]);
+    const all = tables.state === 'ready' ? tables.value : [];
+    const needle = filter.toLowerCase();
+    const shownTables = needle
+        ? all.filter((table) => table.name.toLowerCase().includes(needle))
+        : all;
+    const schemaList = schemas.state === 'ready' ? schemas.value : [];
+    // Title line, column titles and the two "more" markers.
+    const visible = Math.max(1, gridHeight(height, 4 + (filtering || filter ? 1 : 0)));
+    const first = clampTop(position.top, selected, visible, shownTables.length);
+    const move = (to) => {
+        setPosition((previous) => moveTo(previous, to, visible, shownTables.length));
+    };
+    const chooseSchema = (name) => {
+        setPicking(false);
+        services.store.setSetting(schemaSetting(entry.key), name);
+        setFilter('');
+        setPosition(startPosition);
+        setSchema(name);
+    };
+    useInput((input, key) => {
+        if (picking) {
+            if (key.escape)
+                setPicking(false);
+            else if (key.return) {
+                const chosen = schemaList[pickSelected];
+                if (chosen)
+                    chooseSchema(chosen.name);
+            }
+            else if (key.upArrow)
+                setPickSelected(Math.max(0, pickSelected - 1));
+            else if (key.downArrow)
+                setPickSelected(Math.min(schemaList.length - 1, pickSelected + 1));
+            return;
+        }
+        if (filtering) {
+            if (key.escape) {
+                setFilter('');
+                setFiltering(false);
+            }
+            else if (key.return) {
+                setFiltering(false);
+                const table = shownTables[selected];
+                if (table)
+                    setOpen(table);
+            }
+            else if (key.upArrow)
+                move((at) => at - 1);
+            else if (key.downArrow)
+                move((at) => at + 1);
+            return;
+        }
+        if (input === '/') {
+            setFiltering(true);
+            move(() => 0);
+        }
+        else if (input === 's') {
+            setPickSelected(Math.max(0, schemaList.findIndex((candidate) => candidate.name === schema)));
+            setPicking(true);
+        }
+        else if (input === 'r') {
+            loadSchemas(() => listSchemas(session));
+            loadTables(() => listTables(session, schema));
+        }
+        else if (key.return) {
+            const table = shownTables[selected];
+            if (table)
+                setOpen(table);
+        }
+        else if (key.upArrow || input === 'k')
+            move((at) => at - 1);
+        else if (key.downArrow || input === 'j')
+            move((at) => at + 1);
+        else if (key.pageUp)
+            move((at) => at - visible);
+        else if (key.pageDown)
+            move((at) => at + visible);
+        else if (key.home || input === 'g')
+            move(() => 0);
+        else if (key.end || input === 'G')
+            move(() => shownTables.length - 1);
+    }, { isActive: isInputActive && open === undefined });
+    if (open) {
+        return (_jsx(TablePane, { ...props, table: open, onClose: () => {
+                setOpen(undefined);
+            } }));
+    }
+    if (picking) {
+        return (_jsxs(PaneFrame, { height: height, width: width, hint: "\u2191\u2193 move \u00B7 Enter choose \u00B7 Esc cancel", children: [_jsx(Text, { bold: true, children: "Choose a schema" }), _jsx(Text, { children: " " }), schemas.state === 'loading' ? _jsx(Loading, {}) : null, schemas.state === 'failed' ? _jsxs(Text, { color: "red", children: ["\u2717 ", schemas.message] }) : null, schemaList.map((candidate, index) => (_jsxs(Text, { color: index === pickSelected ? 'cyan' : undefined, children: [index === pickSelected ? '› ' : '  ', _jsx(Text, { bold: index === pickSelected, children: candidate.name }), _jsxs(Text, { dimColor: true, children: ['  ', candidate.tables, " tables \u00B7 owner ", candidate.owner] })] }, candidate.name)))] }));
+    }
+    const nameWidth = Math.min(maxNameWidth, Math.max(8, ...shownTables.map((table) => table.name.length)));
+    const commentWidth = Math.max(0, width - 2 - nameWidth - kindWidth - rowsWidth - sizeWidth - 8);
+    const line = (name, kind, rows, size, comment) => `${pad(truncate(name, nameWidth), nameWidth)}  ${pad(kind, kindWidth)}  ${pad(rows, rowsWidth, true)}  ${pad(size, sizeWidth, true)}  ${truncate(comment, commentWidth)}`;
+    const page = shownTables.slice(first, first + visible);
+    const below = shownTables.length - first - page.length;
+    return (_jsxs(PaneFrame, { height: height, width: width, status: tables.state === 'failed' ? (_jsxs(Text, { color: "red", wrap: "truncate-end", children: ["\u2717 ", tables.message] })) : tables.state === 'ready' ? (_jsx(Text, { dimColor: true, children: shownTables.length === all.length
+                ? `${all.length} in ${schema}`
+                : `${shownTables.length} of ${all.length} in ${schema} match "${filter}"` })) : undefined, hint: filtering
+            ? 'Type to filter · ↑↓ move · Enter open · Esc clear'
+            : '↑↓ move · Enter open · / filter · s schema · r reload · 1-4 tabs · Esc back · q quit', children: [_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "Schema " }), _jsx(Text, { bold: true, color: "cyan", children: schema }), _jsx(Text, { dimColor: true, children: " (s to change)" })] }), filtering || filter ? (_jsxs(Box, { children: [_jsx(Text, { color: "cyan", children: "/ " }), _jsx(TextInput, { value: filter, onChange: (value) => {
+                            setFilter(value);
+                            setPosition(startPosition);
+                        }, focus: isInputActive && filtering })] })) : null, tables.state === 'loading' ? _jsx(Loading, {}) : null, tables.state === 'ready' && all.length === 0 ? (_jsxs(Text, { dimColor: true, children: ["No tables in ", schema, ". Press s to choose another schema."] })) : null, tables.state === 'ready' && all.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs(Text, { bold: true, dimColor: true, wrap: "truncate-end", children: ['  ', line('NAME', 'KIND', 'ROWS', 'SIZE', 'COMMENT')] }), _jsx(Text, { dimColor: true, children: first > 0 ? `  ↑ ${first} more` : ' ' }), page.map((table, offset) => {
+                        const isSelected = first + offset === selected;
+                        return (_jsxs(Text, { color: isSelected ? 'cyan' : undefined, bold: isSelected, wrap: "truncate-end", children: [isSelected ? '› ' : '  ', line(table.name, table.kind, formatEstimate(table.estimatedRows), formatBytes(table.totalBytes), table.comment ?? '')] }, table.name));
+                    }), _jsx(Text, { dimColor: true, children: below > 0 ? `  ↓ ${below} more` : ' ' })] })) : null] }));
+}

package/dist/screens/prompt-modal.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import TextInput from 'ink-text-input';
+// A question over whatever screen is showing. While it is open <App> turns the screen's keys off.
+export default function PromptModal({ prompt, isInputActive }) {
+    const [value, setValue] = useState('');
+    useInput((_input, key) => {
+        if (key.escape)
+            prompt.cancel();
+    }, { isActive: isInputActive });
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 1, children: [_jsx(Text, { bold: true, children: prompt.challenge === undefined
+                    ? `${prompt.envName}.${prompt.field}`
+                    : `${prompt.envName} is protected` }), prompt.challenge !== undefined && (_jsxs(Text, { children: ["Type", ' ', _jsx(Text, { bold: true, color: "yellow", children: prompt.challenge }), ' ', "to open it."] })), _jsxs(Box, { children: [_jsxs(Text, { children: [prompt.challenge !== undefined ? 'Words' : prompt.masked ? 'Secret' : 'Value', ":", ' '] }), _jsx(TextInput, { value: value, onChange: setValue, onSubmit: (answer) => {
+                            if (answer)
+                                prompt.submit(answer);
+                        }, focus: isInputActive, mask: prompt.masked ? '*' : undefined })] }), _jsx(Text, { dimColor: true, children: "Enter submit \u00B7 Esc cancel" })] }));
+}

package/dist/screens/record-view.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { nullText, truncate } from '../explorer/format.js';
+import { clampTop, moveTo, startPosition } from './scroll.js';
+const maxLabelWidth = 30;
+// The title line and the two "more" markers.
+const chromeLines = 3;
+/** One row, a field per line, with every value in full (long ones wrap). The owner handles Esc. */
+export default function RecordView({ columns, row, title, width, height, isInputActive, onStep, }) {
+    const [position, setPosition] = useState(startPosition);
+    const { selected } = position;
+    const visible = Math.max(1, height - chromeLines);
+    const first = clampTop(position.top, selected, visible, columns.length);
+    const labelWidth = Math.min(maxLabelWidth, Math.max(...columns.map((column) => column.name.length)) + 2);
+    useInput((input, key) => {
+        if (key.leftArrow)
+            onStep?.(-1);
+        else if (key.rightArrow)
+            onStep?.(1);
+        const move = key.upArrow
+            ? -1
+            : key.downArrow
+                ? 1
+                : key.pageUp
+                    ? -visible
+                    : key.pageDown
+                        ? visible
+                        : 0;
+        if (move === 0)
+            return;
+        setPosition((previous) => moveTo(previous, (at) => at + move, visible, columns.length));
+    }, { isActive: isInputActive });
+    const shown = columns.slice(first, first + visible);
+    const below = columns.length - first - shown.length;
+    return (_jsxs(Box, { flexDirection: "column", width: width, height: height, overflow: "hidden", children: [_jsx(Text, { bold: true, children: title }), _jsx(Text, { dimColor: true, children: first > 0 ? `↑ ${first} more` : ' ' }), shown.map((column, offset) => {
+                const index = first + offset;
+                const value = row[index] ?? null;
+                const isSelected = index === selected;
+                return (_jsxs(Box, { width: width, children: [_jsx(Box, { width: labelWidth, flexShrink: 0, children: _jsx(Text, { bold: isSelected, color: isSelected ? 'cyan' : undefined, children: truncate(column.name, labelWidth - 2) }) }), _jsxs(Box, { flexGrow: 1, flexShrink: 1, flexDirection: "column", children: [_jsx(Text, { dimColor: value === null, wrap: "wrap", children: value ?? nullText }), isSelected ? _jsx(Text, { dimColor: true, children: column.type }) : null] })] }, `${index}-${column.name}`));
+            }), _jsx(Text, { dimColor: true, children: below > 0 ? `↓ ${below} more` : ' ' })] }));
+}

package/dist/screens/result-grid.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+import { cellText, isNumeric, pad, truncate, widthOf } from '../explorer/format.js';
+import { clampTop } from './scroll.js';
+export const startCursor = { row: 0, column: 0, top: 0, left: 0 };
+const maxColumnWidth = 40;
+const minColumnWidth = 4;
+const gap = 2;
+// Header lines (name, type) and the two "more" markers.
+const chromeLines = 4;
+/** How wide each column is drawn: as wide as its widest value, within bounds. */
+export function columnWidths(columns, rows, marks, showTypes = true) {
+    return columns.map((column, index) => {
+        const mark = marks?.get(column.name);
+        let width = widthOf(column.name) + (mark ? widthOf(mark) + 1 : 0);
+        if (showTypes)
+            width = Math.max(width, widthOf(column.type));
+        for (const row of rows) {
+            width = Math.max(width, widthOf(cellText(row[index] ?? null)));
+            if (width >= maxColumnWidth)
+                break;
+        }
+        return Math.max(minColumnWidth, Math.min(maxColumnWidth, width));
+    });
+}
+/** The columns in view from `left` on: as many as fit in `width`, and at least one. */
+export function visibleColumns(widths, left, width) {
+    let used = 0;
+    let count = 0;
+    for (let index = left; index < widths.length; index++) {
+        const next = used + (count > 0 ? gap : 0) + (widths[index] ?? 0);
+        if (next > width && count > 0)
+            break;
+        used = next;
+        count++;
+    }
+    return count;
+}
+/** The first column in view that keeps `column` on screen, moving as little as possible. */
+export function clampLeft(widths, left, column, width) {
+    let next = Math.min(left, column);
+    while (next < column && next + visibleColumns(widths, next, width) <= column)
+        next++;
+    return next;
+}
+/** A table of rows to move around in cell by cell, like a spreadsheet. */
+export default function ResultGrid({ columns, rows, cursor, onCursor, onOpen, width, height, isInputActive, marks, empty = '(no rows)', showTypes = true, }) {
+    const widths = columnWidths(columns, rows, marks, showTypes);
+    const visible = Math.max(1, height - chromeLines + (showTypes ? 0 : 1));
+    const row = Math.min(cursor.row, Math.max(0, rows.length - 1));
+    const column = Math.min(cursor.column, Math.max(0, columns.length - 1));
+    const top = clampTop(cursor.top, row, visible, rows.length);
+    const left = clampLeft(widths, cursor.left, column, width);
+    useInput((input, key) => {
+        if (rows.length === 0 && columns.length === 0)
+            return;
+        if (key.return) {
+            if (rows.length > 0)
+                onOpen?.(row);
+            return;
+        }
+        const step = (previous) => {
+            const { row: at, column: on } = previous;
+            if (key.upArrow || input === 'k')
+                return [at - 1, on];
+            if (key.downArrow || input === 'j')
+                return [at + 1, on];
+            if (key.leftArrow || input === 'h')
+                return [at, on - 1];
+            if (key.rightArrow || input === 'l')
+                return [at, on + 1];
+            if (key.pageUp)
+                return [at - visible, on];
+            if (key.pageDown)
+                return [at + visible, on];
+            if (key.home || input === 'g')
+                return [0, on];
+            if (key.end || input === 'G')
+                return [rows.length - 1, on];
+            if (input === '^' || input === '0')
+                return [at, 0];
+            if (input === '$')
+                return [at, columns.length - 1];
+            return undefined;
+        };
+        if (!step({ row, column }))
+            return;
+        onCursor((previous) => {
+            const [nextRow, nextColumn] = step({
+                row: Math.min(previous.row, Math.max(0, rows.length - 1)),
+                column: Math.min(previous.column, Math.max(0, columns.length - 1)),
+            });
+            const clampedRow = Math.max(0, Math.min(rows.length - 1, nextRow));
+            const clampedColumn = Math.max(0, Math.min(columns.length - 1, nextColumn));
+            return {
+                row: clampedRow,
+                column: clampedColumn,
+                top: clampTop(previous.top, clampedRow, visible, rows.length),
+                left: clampLeft(widths, previous.left, clampedColumn, width),
+            };
+        });
+    }, { isActive: isInputActive });
+    if (columns.length === 0)
+        return _jsx(Text, { dimColor: true, children: empty });
+    const count = visibleColumns(widths, left, width);
+    const shown = Array.from({ length: count }, (_, offset) => left + offset);
+    const hiddenRight = columns.length - left - count;
+    const header = (text) => shown
+        .map((index) => pad(truncate(text(index), widths[index]), widths[index]))
+        .join(' '.repeat(gap));
+    const page = rows.slice(top, top + visible);
+    const below = rows.length - top - page.length;
+    return (_jsxs(Box, { flexDirection: "column", width: width, children: [_jsx(Text, { bold: true, wrap: "truncate-end", children: header((index) => {
+                    const mark = marks?.get(columns[index].name);
+                    return mark ? `${columns[index].name} ${mark}` : columns[index].name;
+                }) }), showTypes ? (_jsx(Text, { dimColor: true, wrap: "truncate-end", children: header((index) => columns[index].type) })) : null, _jsxs(Text, { dimColor: true, wrap: "truncate-end", children: [top > 0 ? `↑ ${top} more` : ' ', left > 0 ? `   ← ${left} columns` : '', hiddenRight > 0 ? `   → ${hiddenRight} columns` : ''] }), rows.length === 0 ? _jsx(Text, { dimColor: true, children: empty }) : null, page.map((values, offset) => {
+                const index = top + offset;
+                const isSelected = index === row;
+                return (_jsx(Text, { wrap: "truncate-end", children: shown.map((columnIndex, position) => {
+                        const value = values[columnIndex] ?? null;
+                        const columnWidth = widths[columnIndex];
+                        const text = pad(truncate(cellText(value), columnWidth), columnWidth, isNumeric(columns[columnIndex]));
+                        return (_jsxs(Text, { children: [position > 0 ? ' '.repeat(gap) : '', _jsx(Text, { inverse: isSelected && columnIndex === column, color: isSelected ? 'cyan' : undefined, dimColor: value === null, children: text })] }, columnIndex));
+                    }) }, index));
+            }), _jsx(Text, { dimColor: true, children: below > 0 ? `↓ ${below} more` : ' ' })] }));
+}

package/dist/screens/scroll.js

@@ -0,0 +1,12 @@
+// First visible row of a scrolling list: keeps `selected` in view and the window filled.
+export const clampTop = (top, selected, visible, total) => Math.max(0, Math.min(top, selected, total - visible), selected - visible + 1);
+export const startPosition = { selected: 0, top: 0 };
+/**
+ * The position after moving to `to(selected)` in a list of `total` rows, `visible` at a time. Given
+ * to a state updater, so each of several keys that arrive together (key repeat sends them in one
+ * chunk) moves on from where the one before left off.
+ */
+export const moveTo = (position, to, visible, total) => {
+    const selected = Math.max(0, Math.min(total - 1, to(position.selected)));
+    return { selected, top: clampTop(position.top, selected, visible, total) };
+};

package/dist/screens/splash.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useSyncExternalStore } from 'react';
+import { Box, Text, useInput } from 'ink';
+import Spinner from 'ink-spinner';
+import BigText from 'ink-big-text';
+import Gradient from 'ink-gradient';
+import { useTerminalSize } from './terminal.js';
+export const tagline = 'Explore your Postgres databases from the terminal';
+// Rendered widths of "Explorer": cfonts "block" is about 73 columns, "simple" 58, "tiny" 32. Each
+// threshold leaves a little margin so the art never touches the edge or wraps into broken rows.
+const blockMinColumns = 80;
+const simpleMinColumns = 64;
+const tinyMinColumns = 40;
+function Title({ columns }) {
+    if (columns >= blockMinColumns)
+        return _jsx(BigText, { text: "Explorer", font: "block" });
+    if (columns >= simpleMinColumns)
+        return _jsx(BigText, { text: "Explorer", font: "simple" });
+    if (columns >= tinyMinColumns)
+        return _jsx(BigText, { text: "Explorer", font: "tiny" });
+    // Too narrow for any ASCII art: a plain title still reads cleanly.
+    return _jsx(Text, { bold: true, children: "psql-explorer" });
+}
+const company = 'Kazuro Labs';
+// A line with a diamond in the middle, as wide as the terminal allows (at most `maxRuleWidth`).
+const maxRuleWidth = 56;
+const rule = (columns) => {
+    const width = Math.max(9, Math.min(maxRuleWidth, columns - 4));
+    const side = '━'.repeat(Math.floor((width - 3) / 2));
+    return `${side} ◆ ${side}`;
+};
+const highlights = ['tables & rows', 'SQL from the keyboard', 'Vault-ready'];
+const highlightsMinColumns = 64;
+const noSubscribe = () => () => undefined;
+const noSteps = [];
+const noSnapshot = () => noSteps;
+const maxStepsWidth = 90;
+// A step that has taken a while says for how long, so a slow Vault does not look stuck.
+const showElapsedAfterMs = 3000;
+// Starts the startup steps on mount and follows them. Without any, everything was ready already.
+function useStartup(startup) {
+    const steps = useSyncExternalStore(startup ? startup.subscribe : noSubscribe, startup ? startup.snapshot : noSnapshot);
+    const [now, setNow] = useState(() => Date.now());
+    const finished = startup ? startup.finished() : true;
+    useEffect(() => {
+        void startup?.start();
+    }, [startup]);
+    // Re-render every second while something runs, for the elapsed time.
+    useEffect(() => {
+        if (finished)
+            return;
+        const timer = setInterval(() => {
+            setNow(Date.now());
+        }, 1000);
+        return () => {
+            clearInterval(timer);
+        };
+    }, [finished]);
+    return { steps, finished, now };
+}
+function StepLine({ step, now }) {
+    const seconds = Math.max(0, Math.floor((now - step.startedAt) / 1000));
+    const elapsed = step.state === 'running' && seconds * 1000 >= showElapsedAfterMs;
+    return (_jsxs(Text, { wrap: "truncate-end", children: [step.state === 'running' ? (_jsx(Text, { color: "cyan", children: _jsx(Spinner, { type: "dots" }) })) : step.state === 'done' ? (_jsx(Text, { color: "green", children: "\u2713" })) : step.state === 'warn' ? (_jsx(Text, { color: "yellow", children: "!" })) : (_jsx(Text, { color: "red", children: "\u2717" })), ' ', step.label, step.detail ? (_jsxs(Text, { color: step.state === 'failed' ? 'red' : step.state === 'warn' ? 'yellow' : undefined, dimColor: step.state === 'running' || step.state === 'done', children: [' ', "\u00B7 ", step.detail] })) : null, elapsed ? _jsxs(Text, { dimColor: true, children: [" \u00B7 ", seconds, "s"] }) : null] }));
+}
+export default function Splash({ version, navigate, services, isInputActive, }) {
+    const { columns, rows } = useTerminalSize();
+    const { steps, finished, now } = useStartup(services.startup);
+    const stepsWidth = Math.max(20, Math.min(columns - 4, maxStepsWidth));
+    useInput((input) => {
+        // `q` is the global quit key, handled by <App>.
+        if (input === 'o' && services.webUrl)
+            services.openUrl?.(services.webUrl);
+        else if (input !== 'q' && finished)
+            navigate('environments');
+    }, { isActive: isInputActive });
+    return (_jsxs(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center", minHeight: Math.max(1, rows - 1), paddingY: 1, children: [_jsx(Box, { "aria-label": "psql-explorer", marginBottom: columns >= tinyMinColumns ? 0 : 1, children: _jsx(Gradient, { name: "cristal", children: _jsx(Title, { columns: columns }) }) }), _jsx(Gradient, { name: "cristal", children: _jsx(Text, { children: rule(columns) }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: tagline }) }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "by " }), _jsx(Gradient, { name: "vice", children: _jsx(Text, { bold: true, children: company }) })] }), columns >= highlightsMinColumns ? (_jsx(Box, { marginTop: 1, children: highlights.map((item, index) => (_jsxs(Text, { color: "gray", children: [index > 0 ? '   ' : '', _jsx(Text, { color: "cyan", children: "\u25C6" }), " ", item] }, item))) })) : null, _jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["v", version] }) }), services.webUrl ? (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "Web UI " }), _jsx(Text, { color: "cyan", children: services.webUrl }), _jsx(Text, { dimColor: true, children: " \u00B7 press " }), _jsx(Text, { color: "cyan", children: "o" }), _jsx(Text, { dimColor: true, children: " to open" })] })) : null, steps.length > 0 ? (_jsx(Box, { flexDirection: "column", marginTop: 1, width: stepsWidth, children: steps.map((step) => (_jsx(StepLine, { step: step, now: now }, step.id))) })) : null, _jsx(Box, { marginTop: 1, children: !finished ? (_jsx(Text, { color: "gray", children: "Starting\u2026 \u00B7 q to quit" })) : columns >= tinyMinColumns ? (_jsx(Text, { color: "gray", children: "Press any key to continue \u00B7 q to quit" })) : (_jsxs(Box, { flexDirection: "column", alignItems: "center", children: [_jsx(Text, { color: "gray", children: "Press any key to continue" }), _jsx(Text, { color: "gray", children: "q to quit" })] })) })] }));
+}

package/dist/screens/terminal.js

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+import { useStdout } from 'ink';
+// A standard terminal, for when stdout does not report its size (e.g. piped output).
+const fallback = { columns: 80, rows: 24 };
+// Ink types stdout as a plain WritableStream; a TTY stream also carries `columns` and `rows`.
+const sizeOf = (stdout) => {
+    const tty = stdout;
+    return { columns: tty.columns || fallback.columns, rows: tty.rows || fallback.rows };
+};
+// The size of the stream Ink renders to, updated on 'resize'. (Ink's useWindowSize falls back to
+// the real terminal when the stream reports no rows, which breaks rendering into a test stream.)
+export function useTerminalSize() {
+    const { stdout } = useStdout();
+    const [size, setSize] = useState(() => sizeOf(stdout));
+    useEffect(() => {
+        const onResize = () => {
+            setSize(sizeOf(stdout));
+        };
+        stdout.on('resize', onResize);
+        return () => {
+            stdout.off('resize', onResize);
+        };
+    }, [stdout]);
+    return size;
+}

package/dist/screens/types.js

@@ -0,0 +1 @@
+export {};

package/dist/services.js

@@ -0,0 +1 @@
+export {};