@j-256/ccam 0.1.0

package/dist/tui/components/InfoTab.d.ts

@@ -0,0 +1,8 @@
+import type { FieldDef, CrossLinkDef } from '../types.js';
+export interface InfoTabProps {
+    fields: FieldDef[];
+    data: Record<string, unknown>;
+    crossLinks: CrossLinkDef[];
+}
+export declare function InfoTab({ fields, data, crossLinks }: InfoTabProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=InfoTab.d.ts.map

package/dist/tui/components/InfoTab.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { useNav } from '../context/navigation.js';
+import { formatCell } from './Table.js';
+const LABEL_WIDTH = 24;
+export function InfoTab({ fields, data, crossLinks }) {
+    const nav = useNav();
+    // Build list of navigable cross-link indices
+    const crossLinkIndices = useMemo(() => {
+        const indices = [];
+        for (let i = 0; i < fields.length; i++) {
+            const field = fields[i];
+            if (field.crossLink || crossLinks.some((cl) => cl.field === field.key)) {
+                indices.push(i);
+            }
+        }
+        return indices;
+    }, [fields, crossLinks]);
+    const [highlightPos, setHighlightPos] = useState(0);
+    const highlightIndex = crossLinkIndices.length > 0
+        ? crossLinkIndices[highlightPos]
+        : -1;
+    useInput((input, key) => {
+        if (crossLinkIndices.length === 0)
+            return;
+        if (input === 'j' || key.downArrow) {
+            setHighlightPos((i) => Math.min(i + 1, crossLinkIndices.length - 1));
+        }
+        if (input === 'k' || key.upArrow) {
+            setHighlightPos((i) => Math.max(i - 1, 0));
+        }
+        if (key.return) {
+            const fieldIdx = crossLinkIndices[highlightPos];
+            if (fieldIdx == null)
+                return;
+            const field = fields[fieldIdx];
+            const cl = field.crossLink || crossLinks.find((c) => c.field === field.key);
+            if (!cl)
+                return;
+            const targetId = String(data[cl.field] ?? '');
+            if (targetId) {
+                nav.push({
+                    view: cl.targetView,
+                    label: String(data[cl.field] ?? targetId),
+                    params: { id: targetId },
+                });
+            }
+        }
+    });
+    const hasCrossLinks = crossLinkIndices.length > 0;
+    const MAX_VALUE_WIDTH = 80;
+    const rows = [];
+    let prevGroup;
+    for (let i = 0; i < fields.length; i++) {
+        const field = fields[i];
+        // Insert blank line when group changes (skip before the very first field)
+        if (field.group && field.group !== prevGroup && i > 0) {
+            rows.push(_jsx(Box, { height: 1 }, `sep-${i}`));
+        }
+        prevGroup = field.group;
+        const value = data[field.key];
+        const raw = field.format ? field.format(value) : undefined;
+        const formatted = raw ?? formatCell(value, MAX_VALUE_WIDTH);
+        const isCrossLinked = i === highlightIndex && hasCrossLinks;
+        rows.push(_jsxs(Box, { children: [hasCrossLinks && (_jsx(Box, { width: 2, children: _jsx(Text, { color: "yellow", bold: true, children: isCrossLinked ? '\u25b8 ' : '  ' }) })), _jsx(Box, { width: LABEL_WIDTH, children: _jsx(Text, { dimColor: true, children: field.label }) }), _jsx(Text, { bold: isCrossLinked, color: isCrossLinked ? 'cyan' : undefined, children: formatted })] }, field.key));
+    }
+    return (_jsx(Box, { flexDirection: "column", children: rows }));
+}
+//# sourceMappingURL=InfoTab.js.map

package/dist/tui/components/ResourcePicker.d.ts

@@ -0,0 +1,10 @@
+import type { ViewEntry } from '../types.js';
+interface ResourceItem {
+    label: string;
+    description: string;
+    entry: ViewEntry;
+}
+declare const RESOURCES: ResourceItem[];
+export { RESOURCES };
+export declare function ResourcePicker(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ResourcePicker.d.ts.map

package/dist/tui/components/ResourcePicker.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { useNav } from '../context/navigation.js';
+const RESOURCES = [
+    { label: 'Organizations', description: 'Customer orgs, realms, and instances', entry: { view: 'org-list', label: 'Organizations' } },
+    { label: 'Users', description: 'User accounts and access', entry: { view: 'user-list', label: 'Users' } },
+    { label: 'API Clients', description: 'OAuth2 API client credentials', entry: { view: 'client-list', label: 'API Clients' } },
+    { label: 'Roles', description: 'Role definitions and permissions', entry: { view: 'role-list', label: 'Roles' } },
+    { label: 'Realms', description: 'Realm/tenant definitions', entry: { view: 'realm-list', label: 'Realms' } },
+    { label: 'Instances', description: 'Commerce Cloud instances', entry: { view: 'instance-list', label: 'Instances' } },
+    { label: 'Permissions', description: 'Permission definitions', entry: { view: 'permission-list', label: 'Permissions' } },
+    { label: 'Service Types', description: 'Service type definitions', entry: { view: 'service-type-list', label: 'Service Types' } },
+    { label: 'Organization Configuration', description: 'Org-level configuration', entry: { view: 'org-config-detail', label: 'Org Configuration' } },
+];
+export { RESOURCES };
+export function ResourcePicker() {
+    const [index, setIndex] = useState(0);
+    const nav = useNav();
+    useInput((input, key) => {
+        if (input === 'j' || key.downArrow) {
+            setIndex((i) => Math.min(i + 1, RESOURCES.length - 1));
+        }
+        if (input === 'k' || key.upArrow) {
+            setIndex((i) => Math.max(i - 1, 0));
+        }
+        if (key.return) {
+            nav.push(RESOURCES[index].entry);
+        }
+    });
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Select a resource" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: RESOURCES.map((r, i) => {
+                    const selected = i === index;
+                    return (_jsxs(Box, { children: [_jsx(Text, { color: "yellow", bold: true, children: selected ? '\u25b8 ' : '  ' }), _jsx(Text, { bold: selected, color: selected ? 'white' : 'cyan', children: r.label }), _jsxs(Text, { dimColor: true, children: [" ", r.description] })] }, r.label));
+                }) })] }));
+}
+//# sourceMappingURL=ResourcePicker.js.map

package/dist/tui/components/SubResourceTab.d.ts

@@ -0,0 +1,7 @@
+import { type LocalTabConfig, type PaginatedTabConfig } from '../types.js';
+export interface SubResourceTabProps {
+    tab: LocalTabConfig | PaginatedTabConfig;
+    parentId: string;
+}
+export declare function SubResourceTab({ tab, parentId }: SubResourceTabProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SubResourceTab.d.ts.map

package/dist/tui/components/SubResourceTab.js

@@ -0,0 +1,193 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from 'react';
+import { Box, Text, useInput } from 'ink';
+import Spinner from 'ink-spinner';
+import { useClient } from '../context/client.js';
+import { useNav } from '../context/navigation.js';
+import { useLocalCollection } from '../hooks/use-local-collection.js';
+import { usePaginatedResource } from '../hooks/use-paginated-resource.js';
+import { useScrollWindow } from '../hooks/use-scroll-window.js';
+import { useTerminalSize } from '../context/terminal-size.js';
+import { Table } from './Table.js';
+import { getSortableColumns } from '../types.js';
+const BORDER_INSET = 2;
+function LocalSubResource({ tab, parentId }) {
+    const client = useClient();
+    const nav = useNav();
+    const { cols } = useTerminalSize();
+    const [highlight, setHighlight] = useState(0);
+    const fetchFn = useCallback(() => tab.fetchFn(client, parentId), [client, parentId, tab]);
+    const { data, loading, error, retry } = useLocalCollection(fetchFn);
+    const sortableColumns = getSortableColumns(tab.columns, 'local');
+    // Client-side sort state
+    const [sortKey, setSortKey] = useState(null);
+    const [sortDir, setSortDir] = useState('asc');
+    const sortedData = useMemo(() => {
+        if (!sortKey)
+            return data;
+        const sorted = [...data].sort((a, b) => {
+            const aVal = a[sortKey];
+            const bVal = b[sortKey];
+            return String(aVal ?? '').localeCompare(String(bVal ?? ''));
+        });
+        return sortDir === 'desc' ? sorted.reverse() : sorted;
+    }, [data, sortKey, sortDir]);
+    const scroll = useScrollWindow(highlight, sortedData.length);
+    useInput((input, key) => {
+        if (loading)
+            return;
+        if (error) {
+            if (input === 'r')
+                retry();
+            return;
+        }
+        // Vertical movement
+        if (input === 'j' || key.downArrow) {
+            setHighlight((i) => Math.min(i + 1, sortedData.length - 1));
+        }
+        if (input === 'k' || key.upArrow) {
+            setHighlight((i) => Math.max(i - 1, 0));
+        }
+        // Jump to first/last
+        if (input === 'g')
+            setHighlight(0);
+        if (input === 'G')
+            setHighlight(Math.max(0, sortedData.length - 1));
+        // Client-side sort cycling
+        if (input === 's' && sortableColumns.length > 0) {
+            if (!sortKey) {
+                setSortKey(sortableColumns[0].field);
+                setSortDir('asc');
+            }
+            else {
+                const idx = sortableColumns.findIndex((c) => c.field === sortKey);
+                const nextIdx = (idx + 1) % sortableColumns.length;
+                setSortKey(sortableColumns[nextIdx].field);
+                setSortDir('asc');
+            }
+            setHighlight(0);
+        }
+        if (input === 'S' && sortKey) {
+            setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
+            setHighlight(0);
+        }
+        // Enter: follow cross-link
+        if (key.return && sortedData.length > 0 && tab.crossLinkTo) {
+            const item = sortedData[highlight];
+            if (item) {
+                const id = String(item.id ?? '');
+                nav.push({
+                    view: tab.crossLinkTo,
+                    label: String(item.id ?? item.name ?? item.description ?? ''),
+                    params: { id },
+                });
+            }
+        }
+        // Scroll
+        if (input === 'n') {
+            setHighlight((i) => Math.min(i + scroll.visibleRows, sortedData.length - 1));
+        }
+        if (input === 'p') {
+            setHighlight((i) => Math.max(i - scroll.visibleRows, 0));
+        }
+        // Refresh
+        if (input === 'r')
+            retry();
+    });
+    if (error) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "red", children: ["Error: ", error.message] }), _jsx(Text, { dimColor: true, children: "r:retry" })] }));
+    }
+    if (loading && data.length === 0) {
+        return (_jsxs(Box, { children: [_jsx(Text, { color: "cyan", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { children: " Loading..." })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Table, { columns: tab.columns, data: sortedData, highlightIndex: highlight, visibleRows: scroll.visibleRows, scrollOffset: scroll.scrollOffset, contentWidth: cols - BORDER_INSET }), _jsxs(Text, { dimColor: true, children: [sortedData.length, " items", sortKey
+                        ? ` | Sort: ${sortableColumns.find((column) => column.field === sortKey)?.label ?? sortKey} ${sortDir}`
+                        : '', sortableColumns.length > 0 ? ' | [s:sort] [S:reverse]' : ''] })] }));
+}
+function PaginatedSubResource({ tab, parentId }) {
+    const client = useClient();
+    const nav = useNav();
+    const { cols } = useTerminalSize();
+    const [highlight, setHighlight] = useState(0);
+    const fetchFn = useCallback((page, size) => tab.fetchFn(client, parentId, page, size), [client, parentId, tab]);
+    const { data, page, totalPages, totalElements, loading, error, paginated, nextPage, prevPage, retry, } = usePaginatedResource(fetchFn);
+    const scroll = useScrollWindow(highlight, data.length);
+    useInput((input, key) => {
+        if (loading)
+            return;
+        if (error) {
+            if (input === 'r')
+                retry();
+            return;
+        }
+        // Vertical movement
+        if (input === 'j' || key.downArrow) {
+            setHighlight((i) => Math.min(i + 1, data.length - 1));
+        }
+        if (input === 'k' || key.upArrow) {
+            setHighlight((i) => Math.max(i - 1, 0));
+        }
+        // Jump to first/last
+        if (input === 'g')
+            setHighlight(0);
+        if (input === 'G')
+            setHighlight(Math.max(0, data.length - 1));
+        // Enter: follow cross-link
+        if (key.return && data.length > 0 && tab.crossLinkTo) {
+            const item = data[highlight];
+            if (item) {
+                const id = String(item.id ?? '');
+                nav.push({
+                    view: tab.crossLinkTo,
+                    label: String(item.id ?? item.name ?? item.description ?? ''),
+                    params: { id },
+                });
+            }
+        }
+        // Pagination
+        if (input === 'n') {
+            if (paginated) {
+                nextPage();
+                setHighlight(0);
+            }
+            else {
+                setHighlight((i) => Math.min(i + scroll.visibleRows, data.length - 1));
+            }
+        }
+        if (input === 'p') {
+            if (paginated) {
+                prevPage();
+                setHighlight(0);
+            }
+            else {
+                setHighlight((i) => Math.max(i - scroll.visibleRows, 0));
+            }
+        }
+        // Refresh
+        if (input === 'r')
+            retry();
+    });
+    if (error) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "red", children: ["Error: ", error.message] }), _jsx(Text, { dimColor: true, children: "r:retry" })] }));
+    }
+    if (loading && data.length === 0) {
+        return (_jsxs(Box, { children: [_jsx(Text, { color: "cyan", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { children: " Loading..." })] }));
+    }
+    let pageInfo;
+    if (paginated) {
+        const start = page * 25 + 1;
+        const end = Math.min(start + data.length - 1, totalElements);
+        pageInfo = `${start}-${end} of ${totalElements} | Page ${page + 1}/${totalPages}`;
+    }
+    else {
+        pageInfo = `${totalElements} items`;
+    }
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Table, { columns: tab.columns, data: data, highlightIndex: highlight, visibleRows: scroll.visibleRows, scrollOffset: scroll.scrollOffset, contentWidth: cols - BORDER_INSET }), _jsx(Text, { dimColor: true, children: pageInfo })] }));
+}
+export function SubResourceTab({ tab, parentId }) {
+    if (tab.type === 'local') {
+        return _jsx(LocalSubResource, { tab: tab, parentId: parentId });
+    }
+    return _jsx(PaginatedSubResource, { tab: tab, parentId: parentId });
+}
+//# sourceMappingURL=SubResourceTab.js.map

package/dist/tui/components/TabBar.d.ts

@@ -0,0 +1,11 @@
+export interface TabDef {
+    key: string;
+    label: string;
+    count?: number;
+}
+export interface TabBarProps {
+    tabs: TabDef[];
+    activeKey: string;
+}
+export declare function TabBar({ tabs, activeKey }: TabBarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TabBar.d.ts.map

package/dist/tui/components/TabBar.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+export function TabBar({ tabs, activeKey }) {
+    return (_jsx(Box, { gap: 1, children: tabs.map((tab) => {
+            const isActive = tab.key === activeKey;
+            const label = tab.count != null ? `${tab.label} (${tab.count})` : tab.label;
+            if (isActive) {
+                return (_jsx(Text, { bold: true, underline: true, color: "cyan", children: label }, tab.key));
+            }
+            return (_jsx(Text, { children: label }, tab.key));
+        }) }));
+}
+//# sourceMappingURL=TabBar.js.map

package/dist/tui/components/Table.d.ts

@@ -0,0 +1,32 @@
+import type { ColumnDef } from '../types.js';
+export interface TableProps {
+    columns: ColumnDef[];
+    data: Record<string, unknown>[];
+    highlightIndex: number;
+    visibleRows?: number;
+    scrollOffset?: number;
+    /** Hide the cursor marker column (used in sub-resource tabs where Enter isn't available) */
+    hideCursor?: boolean;
+    /** Key of currently sorted column */
+    sortKey?: string;
+    /** Sort direction */
+    sortDirection?: 'asc' | 'desc';
+    /** Override terminal width (e.g. when rendered inside a bordered box) */
+    contentWidth?: number;
+}
+/** Strip ANSI escape codes to get visible length */
+export declare function stripAnsi(str: string): string;
+/** Truncate a string by visible characters while preserving ANSI styling */
+export declare function truncateVisible(str: string, width: number): string;
+/** Pad string to target width based on visible characters (left-align: append spaces) */
+export declare function padVisible(str: string, width: number): string;
+/** Pad string to target width based on visible characters (right-align: prepend spaces) */
+export declare function padVisibleRight(str: string, width: number): string;
+/** Pick which columns to show and compute their character widths */
+export declare function allocateColumns(columns: ColumnDef[], terminalWidth: number, colGap?: number): {
+    col: ColumnDef;
+    charWidth: number;
+}[];
+export declare function formatCell(value: unknown, maxWidth: number, formatter?: (v: unknown) => string): string;
+export declare function Table({ columns, data, highlightIndex, visibleRows, scrollOffset, hideCursor, sortKey, sortDirection, contentWidth, }: TableProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Table.d.ts.map

package/dist/tui/components/Table.js

@@ -0,0 +1,175 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useTerminalSize } from '../context/terminal-size.js';
+// ---------------------------------------------------------------------------
+// ANSI-aware string helpers (exported for testing)
+// ---------------------------------------------------------------------------
+/** Strip ANSI escape codes to get visible length */
+export function stripAnsi(str) {
+    // eslint-disable-next-line no-control-regex
+    return str.replace(/\x1b\[[0-9;]*m/g, '');
+}
+/** Truncate a string by visible characters while preserving ANSI styling */
+export function truncateVisible(str, width) {
+    if (width < 4 || stripAnsi(str).length <= width)
+        return str;
+    const target = width - 3;
+    let visible = 0;
+    let i = 0;
+    let out = '';
+    let sawAnsi = false;
+    while (i < str.length && visible < target) {
+        if (str[i] === '\x1b') {
+            // eslint-disable-next-line no-control-regex
+            const match = /^\x1b\[[0-9;]*m/.exec(str.slice(i));
+            if (match) {
+                out += match[0];
+                i += match[0].length;
+                sawAnsi = true;
+                continue;
+            }
+        }
+        out += str[i];
+        i += 1;
+        visible += 1;
+    }
+    out += '...';
+    // Close any active style so it does not bleed into the rest of the row.
+    if (sawAnsi) {
+        out += '\x1b[0m';
+    }
+    return out;
+}
+/** Pad string to target width based on visible characters (left-align: append spaces) */
+export function padVisible(str, width) {
+    const visible = stripAnsi(str).length;
+    if (visible >= width)
+        return str;
+    return str + ' '.repeat(width - visible);
+}
+/** Pad string to target width based on visible characters (right-align: prepend spaces) */
+export function padVisibleRight(str, width) {
+    const visible = stripAnsi(str).length;
+    if (visible >= width)
+        return str;
+    return ' '.repeat(width - visible) + str;
+}
+// ---------------------------------------------------------------------------
+// Column allocation helpers (exported for testing)
+// ---------------------------------------------------------------------------
+const DEFAULT_MIN_WIDTH = 4;
+const DEFAULT_PRIORITY = 10;
+const BASE_FG = '#e6edf3';
+const ROW_BG = '#0a0d12';
+const ZEBRA_BG = '#10151b';
+/** Pick which columns to show and compute their character widths */
+export function allocateColumns(columns, terminalWidth, colGap = 2) {
+    if (columns.length === 0)
+        return [];
+    // Sort candidates by priority ascending (lower = hidden first)
+    const candidates = columns.map((col) => ({
+        col,
+        minWidth: col.minWidth ?? DEFAULT_MIN_WIDTH,
+        priority: col.priority ?? DEFAULT_PRIORITY,
+    }));
+    // Iteratively remove lowest-priority columns until the remaining fit
+    const visible = [...candidates];
+    while (visible.length > 0) {
+        const totalGap = colGap * (visible.length - 1);
+        const totalMinWidth = visible.reduce((s, c) => s + c.minWidth, 0);
+        if (totalMinWidth + totalGap <= terminalWidth)
+            break;
+        // Remove the column with the lowest priority (ties: last in array)
+        let worstIdx = 0;
+        let worstPriority = visible[0].priority;
+        for (let i = 1; i < visible.length; i++) {
+            if (visible[i].priority < worstPriority) {
+                worstPriority = visible[i].priority;
+                worstIdx = i;
+            }
+        }
+        visible.splice(worstIdx, 1);
+    }
+    if (visible.length === 0)
+        return [];
+    // Proportional allocation of remaining width
+    const totalGap = colGap * (visible.length - 1);
+    const availableWidth = terminalWidth - totalGap;
+    const totalProportion = visible.reduce((s, c) => s + c.col.width, 0);
+    return visible.map((c) => {
+        const raw = Math.floor((c.col.width / totalProportion) * availableWidth);
+        const charWidth = Math.max(raw, c.minWidth);
+        return { col: c.col, charWidth };
+    });
+}
+// ---------------------------------------------------------------------------
+// Cell formatting
+// ---------------------------------------------------------------------------
+export function formatCell(value, maxWidth, formatter) {
+    let str;
+    if (formatter) {
+        str = formatter(value);
+    }
+    else if (value === null || value === undefined) {
+        str = '-';
+    }
+    else if (Array.isArray(value)) {
+        str = value.join(', ');
+    }
+    else if (typeof value === 'object') {
+        str = JSON.stringify(value);
+    }
+    else {
+        str = String(value);
+    }
+    return truncateVisible(str, maxWidth);
+}
+// ---------------------------------------------------------------------------
+// Table component
+// ---------------------------------------------------------------------------
+const CURSOR_WIDTH = 2; // "▸ " or "  "
+export function Table({ columns, data, highlightIndex, visibleRows, scrollOffset, hideCursor, sortKey, sortDirection, contentWidth, }) {
+    const { cols } = useTerminalSize();
+    const effectiveWidth = contentWidth ?? cols;
+    if (data.length === 0) {
+        return _jsx(Text, { dimColor: true, children: "No data" });
+    }
+    const showCursor = !hideCursor;
+    const colGap = 1;
+    const tableWidth = showCursor ? effectiveWidth - CURSOR_WIDTH : effectiveWidth;
+    const allocated = allocateColumns(columns, tableWidth, colGap);
+    if (allocated.length === 0) {
+        return _jsx(Text, { dimColor: true, children: "Terminal too narrow" });
+    }
+    const offset = scrollOffset ?? 0;
+    const displayData = visibleRows != null ? data.slice(offset, offset + visibleRows) : data;
+    const adjustedHighlight = highlightIndex - offset;
+    // Separator line width = sum of column widths + gaps
+    const separatorWidth = allocated.reduce((s, a) => s + a.charWidth, 0) +
+        colGap * (allocated.length - 1);
+    const separator = '\u2500'.repeat(separatorWidth);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [showCursor && _jsx(Box, { width: CURSOR_WIDTH, children: _jsx(Text, { children: " " }) }), allocated.map((a, i) => {
+                        let label = a.col.label;
+                        const sortField = a.col.sort?.field;
+                        if (sortKey && (a.col.key === sortKey || sortField === sortKey)) {
+                            label += sortDirection === 'desc' ? ' \u25bc' : ' \u25b2';
+                        }
+                        return (_jsx(Box, { width: a.charWidth, marginRight: i < allocated.length - 1 ? colGap : 0, children: _jsx(Text, { bold: true, color: a.col.color ?? BASE_FG, children: formatCell(label, a.charWidth) }) }, a.col.key));
+                    })] }), _jsx(Text, { dimColor: true, children: showCursor ? '  ' + separator : separator }), displayData.map((row, i) => {
+                const isHighlighted = i === adjustedHighlight;
+                const isZebra = (offset + i) % 2 === 1;
+                return (_jsxs(Box, { width: effectiveWidth, backgroundColor: isZebra ? ZEBRA_BG : ROW_BG, children: [showCursor && (_jsx(Box, { width: CURSOR_WIDTH, children: _jsx(Text, { color: isHighlighted ? 'yellow' : undefined, bold: isHighlighted, children: isHighlighted ? '\u25b8 ' : '  ' }) })), allocated.map((a, j) => {
+                            let cellStr = formatCell(row[a.col.key], a.charWidth, a.col.format);
+                            // Highlighted rows force a uniform foreground so formatter ANSI
+                            // colors do not reduce contrast against the selection styling.
+                            if (isHighlighted) {
+                                cellStr = stripAnsi(cellStr);
+                            }
+                            cellStr = a.col.align === 'right'
+                                ? padVisibleRight(cellStr, a.charWidth)
+                                : padVisible(cellStr, a.charWidth);
+                            return (_jsx(Box, { width: a.charWidth, marginRight: j < allocated.length - 1 ? colGap : 0, children: _jsx(Text, { bold: isHighlighted || j === 0, color: isHighlighted ? 'white' : (a.col.color ?? BASE_FG), children: cellStr }) }, a.col.key));
+                        })] }, offset + i));
+            })] }));
+}
+//# sourceMappingURL=Table.js.map

package/dist/tui/context/client.d.ts

@@ -0,0 +1,7 @@
+import type { CcamClient } from 'ccam-sdk';
+export declare function ClientProvider({ client, children, }: {
+    client: CcamClient;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useClient(): CcamClient;
+//# sourceMappingURL=client.d.ts.map

package/dist/tui/context/client.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const ClientContext = createContext(null);
+export function ClientProvider({ client, children, }) {
+    return _jsx(ClientContext.Provider, { value: client, children: children });
+}
+export function useClient() {
+    const client = useContext(ClientContext);
+    if (!client) {
+        throw new Error('useClient must be used within a ClientProvider');
+    }
+    return client;
+}
+//# sourceMappingURL=client.js.map

package/dist/tui/context/navigation.d.ts

@@ -0,0 +1,14 @@
+import type { ViewEntry } from '../types.js';
+export interface NavContext {
+    current: ViewEntry;
+    breadcrumbs: string[];
+    canGoBack: boolean;
+    push: (entry: ViewEntry) => void;
+    pop: () => void;
+}
+export declare function NavigationProvider({ initial, children, }: {
+    initial: ViewEntry;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useNav(): NavContext;
+//# sourceMappingURL=navigation.d.ts.map

package/dist/tui/context/navigation.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState, useCallback } from 'react';
+import { createNavStack, pushNav, popNav } from '../navigation.js';
+const NavigationContext = createContext(null);
+export function NavigationProvider({ initial, children, }) {
+    const [state, setState] = useState(() => createNavStack(initial));
+    const push = useCallback((entry) => setState((s) => pushNav(s, entry)), []);
+    const pop = useCallback(() => setState((s) => popNav(s)), []);
+    const value = {
+        current: state.current,
+        breadcrumbs: state.breadcrumbs,
+        canGoBack: state.canGoBack,
+        push,
+        pop,
+    };
+    return _jsx(NavigationContext.Provider, { value: value, children: children });
+}
+export function useNav() {
+    const ctx = useContext(NavigationContext);
+    if (!ctx) {
+        throw new Error('useNav must be used within a NavigationProvider');
+    }
+    return ctx;
+}
+//# sourceMappingURL=navigation.js.map

package/dist/tui/context/terminal-size.d.ts

@@ -0,0 +1,9 @@
+export interface TerminalSize {
+    cols: number;
+    rows: number;
+}
+export declare function TerminalSizeProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useTerminalSize(): TerminalSize;
+//# sourceMappingURL=terminal-size.d.ts.map