@a9s/cli 1.0.8 → 1.0.10

package/dist/src/App.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Box, Text, useApp } from "ink";
 import { useAtom } from "jotai";
 import clipboardy from "clipboardy";
@@ -24,7 +24,9 @@ import { deriveYankHeaderMarkers } from "./hooks/yankHeaderMarkers.js";
 import { AppMainView } from "./features/AppMainView.js";
 import { AVAILABLE_COMMANDS } from "./constants/commands.js";
 import { buildHelpTabs, triggerToString } from "./constants/keybindings.js";
-import { currentlySelectedServiceAtom, selectedRegionAtom, selectedProfileAtom, revealSecretsAtom, } from "./state/atoms.js";
+import { useTheme } from "./contexts/ThemeContext.js";
+import { saveConfig } from "./utils/config.js";
+import { currentlySelectedServiceAtom, selectedRegionAtom, selectedProfileAtom, revealSecretsAtom, themeNameAtom, } from "./state/atoms.js";
 const INITIAL_AWS_PROFILE = process.env.AWS_PROFILE;
 export function App({ initialService, endpointUrl }) {
     const { exit } = useApp();
@@ -33,6 +35,13 @@ export function App({ initialService, endpointUrl }) {
     const [selectedProfile, setSelectedProfile] = useAtom(selectedProfileAtom);
     const [currentService, setCurrentService] = useAtom(currentlySelectedServiceAtom);
     const [revealSecrets, setRevealSecrets] = useAtom(revealSecretsAtom);
+    const [themeName, setThemeName] = useAtom(themeNameAtom);
+    const THEME = useTheme();
+    // Live theme preview: refs to restore original when picker is cancelled
+    const themeNameRef = useRef(themeName);
+    themeNameRef.current = themeName; // always in sync, not a dep
+    const originalThemeRef = useRef(themeName);
+    const themePickerConfirmedRef = useRef(false);
     const { accountName, accountId, awsProfile, currentIdentity, region } = useAwsContext(endpointUrl, selectedRegion, selectedProfile);
     const availableRegions = useAwsRegions(selectedRegion, selectedProfile);
     const availableProfiles = useAwsProfiles();
@@ -73,6 +82,23 @@ export function App({ initialService, endpointUrl }) {
         pickers.openPicker("resource");
         setDidOpenInitialResources(true);
     }, [didOpenInitialResources, pickers]);
+    // Save original theme when theme picker opens; restore it if picker is cancelled
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => {
+        if (pickers.theme.open) {
+            originalThemeRef.current = themeNameRef.current;
+            themePickerConfirmedRef.current = false;
+        }
+        else if (!themePickerConfirmedRef.current) {
+            setThemeName(originalThemeRef.current);
+        }
+    }, [pickers.theme.open]);
+    // Live preview: apply hovered theme immediately as selection changes
+    useEffect(() => {
+        if (!pickers.theme.open || !pickers.theme.selectedRow)
+            return;
+        setThemeName(pickers.theme.selectedRow.id);
+    }, [pickers.theme.open, pickers.theme.selectedRow, setThemeName]);
     const switchAdapter = useCallback((serviceId) => {
         setCurrentService(serviceId);
         actions.setFilterText("");
@@ -207,6 +233,7 @@ export function App({ initialService, endpointUrl }) {
         openProfilePicker: () => pickers.openPicker("profile"),
         openRegionPicker: () => pickers.openPicker("region"),
         openResourcePicker: () => pickers.openPicker("resource"),
+        openThemePicker: () => pickers.openPicker("theme"),
         exit,
     });
     const handleFilterChange = useCallback((value) => {
@@ -373,6 +400,11 @@ export function App({ initialService, endpointUrl }) {
                     onSelectResource: switchAdapter,
                     onSelectRegion: setSelectedRegion,
                     onSelectProfile: setSelectedProfile,
+                    onSelectTheme: (name) => {
+                        themePickerConfirmedRef.current = true;
+                        setThemeName(name);
+                        saveConfig({ theme: name });
+                    },
                 }),
             },
             mode: {
@@ -472,5 +504,5 @@ export function App({ initialService, endpointUrl }) {
     });
     useMainInput(inputDispatch);
     const activePickerFilter = pickers.activePicker?.filter ?? state.filterText;
-    return (_jsx(FullscreenBox, { children: _jsxs(Box, { flexDirection: "column", width: termCols, height: termRows, children: [_jsx(HUD, { serviceLabel: adapter.label, hudColor: adapter.hudColor, path: path, accountName: accountName, accountId: accountId, awsProfile: awsProfile, currentIdentity: currentIdentity, region: region, terminalWidth: termCols, loading: isLoading || Boolean(state.describeState?.loading) }), _jsx(Box, { flexDirection: "row", width: "100%", flexGrow: 1, children: _jsx(AppMainView, { helpPanel: helpPanel, helpTabs: helpTabs, pickers: pickers, error: error, describeState: state.describeState, isLoading: isLoading, filteredRows: filteredRows, columns: columns, selectedIndex: navigation.selectedIndex, scrollOffset: navigation.scrollOffset, filterText: state.filterText, adapter: adapter, termCols: termCols, tableHeight: tableHeight, yankHelpOpen: state.yankHelpOpen, yankOptions: yankOptions, yankHelpRow: selectedRow, uploadPending: state.uploadPending, uploadPreview: uploadPreview, panelScrollOffset: panelScrollOffset, ...(yankHeaderMarkers ? { headerMarkers: yankHeaderMarkers } : {}) }) }), !helpPanel.helpOpen && state.yankFeedbackMessage && (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: "green", children: state.yankFeedbackMessage }) })), state.pendingAction && state.pendingAction.effect.type === "prompt" && (_jsxs(Box, { paddingX: 1, children: [_jsxs(Text, { color: "cyan", children: [state.pendingAction.effect.label, " "] }), _jsx(AdvancedTextInput, { value: state.pendingAction.inputValue, onChange: (value) => actions.setPendingInputValue(value), onSubmit: () => submitPendingAction(state.pendingAction, true), focus: true })] })), state.pendingAction && state.pendingAction.effect.type === "confirm" && (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: "yellow", children: [state.pendingAction.effect.message, " (y/n)"] }) })), _jsx(ModeBar, { mode: state.mode, filterText: activePickerFilter, commandText: state.commandText, commandCursorToEndToken: state.commandCursorToEndToken, hintOverride: bottomHint, pickerSearchActive: pickers.activePicker?.pickerMode === "search", onFilterChange: handleFilterChange, onCommandChange: actions.setCommandText, onFilterSubmit: handleFilterSubmit, onCommandSubmit: handleCommandSubmit })] }) }));
+    return (_jsx(FullscreenBox, { children: _jsxs(Box, { flexDirection: "column", width: termCols, height: termRows, backgroundColor: THEME.global.mainBg, children: [_jsx(HUD, { serviceLabel: adapter.label, hudColor: THEME.serviceColors[adapter.id] ?? adapter.hudColor, path: path, accountName: accountName, accountId: accountId, awsProfile: awsProfile, currentIdentity: currentIdentity, region: region, terminalWidth: termCols, loading: isLoading || Boolean(state.describeState?.loading) }), _jsx(Box, { flexDirection: "row", width: "100%", flexGrow: 1, children: _jsx(AppMainView, { helpPanel: helpPanel, helpTabs: helpTabs, pickers: pickers, error: error, describeState: state.describeState, isLoading: isLoading, filteredRows: filteredRows, columns: columns, selectedIndex: navigation.selectedIndex, scrollOffset: navigation.scrollOffset, filterText: state.filterText, adapter: adapter, termCols: termCols, tableHeight: tableHeight, yankHelpOpen: state.yankHelpOpen, yankOptions: yankOptions, yankHelpRow: selectedRow, uploadPending: state.uploadPending, uploadPreview: uploadPreview, panelScrollOffset: panelScrollOffset, ...(yankHeaderMarkers ? { headerMarkers: yankHeaderMarkers } : {}) }) }), !helpPanel.helpOpen && state.yankFeedbackMessage && (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: THEME.feedback.successText, children: state.yankFeedbackMessage }) })), state.pendingAction && state.pendingAction.effect.type === "prompt" && (_jsxs(Box, { paddingX: 1, children: [_jsxs(Text, { color: THEME.feedback.promptText, children: [state.pendingAction.effect.label, " "] }), _jsx(AdvancedTextInput, { value: state.pendingAction.inputValue, onChange: (value) => actions.setPendingInputValue(value), onSubmit: () => submitPendingAction(state.pendingAction, true), focus: true })] })), state.pendingAction && state.pendingAction.effect.type === "confirm" && (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: THEME.feedback.confirmText, children: [state.pendingAction.effect.message, " (y/n)"] }) })), _jsx(ModeBar, { mode: state.mode, filterText: activePickerFilter, commandText: state.commandText, commandCursorToEndToken: state.commandCursorToEndToken, hintOverride: bottomHint, pickerSearchActive: pickers.activePicker?.pickerMode === "search", onFilterChange: handleFilterChange, onCommandChange: actions.setCommandText, onFilterSubmit: handleFilterSubmit, onCommandSubmit: handleCommandSubmit })] }) }));
 }

package/dist/src/components/AdvancedTextInput.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { Text, useInput } from "ink";
+import { useTheme } from "../contexts/ThemeContext.js";
 function clamp(n, min, max) {
     return Math.max(min, Math.min(max, n));
 }
@@ -153,6 +154,7 @@ export function applyAdvancedInputEdit(currentValue, currentCursor, input, key)
     };
 }
 export function AdvancedTextInput({ value, onChange, onSubmit, placeholder, focus = true, cursorToEndToken, }) {
+    const THEME = useTheme();
     const [cursor, setCursor] = useState(value.length);
     useEffect(() => {
         setCursor((prev) => clamp(prev, 0, value.length));
@@ -194,7 +196,7 @@ export function AdvancedTextInput({ value, onChange, onSubmit, placeholder, focu
         };
     }, [cursor, placeholder, value]);
     if (rendered.isPlaceholder) {
-        return _jsx(Text, { color: "gray", children: rendered.text });
+        return _jsx(Text, { color: THEME.input.placeholderText, children: rendered.text });
     }
     return (_jsxs(Text, { children: [rendered.before, _jsx(Text, { inverse: true, children: rendered.at }), rendered.after] }));
 }

package/dist/src/components/AutocompleteInput.js

@@ -2,7 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useImperativeHandle, useMemo, useState } from "react";
 import { Box, Text } from "ink";
 import { AdvancedTextInput } from "./AdvancedTextInput.js";
+import { useTheme } from "../contexts/ThemeContext.js";
 export const AutocompleteInput = React.forwardRef(({ value, onChange, onSubmit, placeholder, suggestions = [], focus = true, cursorToEndToken }, ref) => {
+    const THEME = useTheme();
     const [inputKey, setInputKey] = useState(0);
     const matchingSuggestions = useMemo(() => {
         if (!value || suggestions.length === 0)
@@ -25,5 +27,5 @@ export const AutocompleteInput = React.forwardRef(({ value, onChange, onSubmit,
             return;
         setInputKey((k) => k + 1);
     }, [cursorToEndToken]);
-    return (_jsxs(Box, { children: [_jsx(AdvancedTextInput, { value: value, onChange: onChange, onSubmit: onSubmit, placeholder: placeholder, focus: focus, ...(cursorToEndToken !== undefined ? { cursorToEndToken } : {}) }, `autocomplete-input-${inputKey}`), suggestion && (_jsx(Text, { color: "gray", dimColor: true, children: suggestion }))] }));
+    return (_jsxs(Box, { children: [_jsx(AdvancedTextInput, { value: value, onChange: onChange, onSubmit: onSubmit, placeholder: placeholder, focus: focus, ...(cursorToEndToken !== undefined ? { cursorToEndToken } : {}) }, `autocomplete-input-${inputKey}`), suggestion && (_jsx(Text, { color: THEME.input.suggestionText, dimColor: true, children: suggestion }))] }));
 });

package/dist/src/components/DetailPanel.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Text } from "ink";
+import { useTheme } from "../contexts/ThemeContext.js";
 export function DetailPanel({ title, fields, isLoading, scrollOffset, visibleLines, }) {
+    const THEME = useTheme();
     const labelWidth = Math.max(...fields.map((f) => f.label.length), 12);
     // Clamp scrollOffset to valid range
     const clampedOffset = Math.max(0, Math.min(scrollOffset, Math.max(0, fields.length - visibleLines)));
@@ -8,5 +10,5 @@ export function DetailPanel({ title, fields, isLoading, scrollOffset, visibleLin
     const visibleFields = fields.slice(clampedOffset, clampedOffset + visibleLines);
     const hasMoreAbove = clampedOffset > 0;
     const hasMoreBelow = clampedOffset + visibleLines < fields.length;
-    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, paddingY: 1, children: [_jsx(Text, { bold: true, color: "blue", children: title }), _jsx(Text, { color: "gray", children: "─".repeat(40) }), isLoading ? (_jsx(Text, { color: "gray", children: "Loading..." })) : (_jsxs(_Fragment, { children: [hasMoreAbove && (_jsxs(Text, { color: "gray", dimColor: true, children: ["\u2191 ", clampedOffset, " more above"] })), visibleFields.map((f) => (_jsxs(Box, { children: [_jsx(Text, { color: "gray", children: f.label.padEnd(labelWidth + 2) }), _jsx(Text, { children: f.value })] }, f.label))), hasMoreBelow && (_jsxs(Text, { color: "gray", dimColor: true, children: ["\u2193 ", fields.length - clampedOffset - visibleLines, " more below"] }))] })), _jsx(Text, { color: "gray", children: "─".repeat(40) }), _jsx(Text, { color: "gray", children: "j/k scroll \u2022 Esc close" })] }));
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, paddingY: 1, children: [_jsx(Text, { bold: true, color: THEME.panel.panelTitleText, children: title }), _jsx(Text, { color: THEME.panel.panelDividerText, children: "─".repeat(40) }), isLoading ? (_jsx(Text, { color: THEME.panel.panelHintText, children: "Loading..." })) : (_jsxs(_Fragment, { children: [hasMoreAbove && (_jsxs(Text, { color: THEME.panel.panelHintText, dimColor: true, children: ["\u2191 ", clampedOffset, " more above"] })), visibleFields.map((f) => (_jsxs(Box, { children: [_jsx(Text, { color: THEME.panel.detailFieldLabelText, children: f.label.padEnd(labelWidth + 2) }), _jsx(Text, { children: f.value })] }, f.label))), hasMoreBelow && (_jsxs(Text, { color: THEME.panel.panelHintText, dimColor: true, children: ["\u2193 ", fields.length - clampedOffset - visibleLines, " more below"] }))] })), _jsx(Text, { color: THEME.panel.panelDividerText, children: "─".repeat(40) }), _jsx(Text, { color: THEME.panel.panelHintText, children: "j/k scroll \u2022 Esc close" })] }));
 }

package/dist/src/components/DiffViewer.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from "ink";
+import { useTheme } from "../contexts/ThemeContext.js";
 export function DiffViewer({ oldValue, newValue, scrollOffset, visibleLines }) {
+    const THEME = useTheme();
     const oldLines = oldValue.split("\n");
     const newLines = newValue.split("\n");
     const maxLines = Math.max(oldLines.length, newLines.length);
@@ -13,5 +15,5 @@ export function DiffViewer({ oldValue, newValue, scrollOffset, visibleLines }) {
     const hasMoreBelow = clampedOffset + visibleLines < maxLines;
     // Calculate column width
     const colWidth = 35;
-    return (_jsxs(Box, { flexDirection: "column", gap: 0, children: [_jsxs(Box, { gap: 2, children: [_jsx(Box, { width: colWidth, children: _jsx(Text, { color: "red", bold: true, children: "Original" }) }), _jsx(Box, { children: _jsx(Text, { color: "green", bold: true, children: "Updated" }) })] }), _jsxs(Box, { gap: 2, children: [_jsx(Box, { width: colWidth, children: _jsx(Text, { color: "gray", children: "-".repeat(30) }) }), _jsx(Text, { color: "gray", children: "-".repeat(30) })] }), _jsxs(Box, { gap: 2, flexDirection: "column", children: [hasMoreAbove && (_jsxs(Box, { gap: 2, children: [_jsx(Box, { width: colWidth, children: _jsxs(Text, { color: "gray", dimColor: true, children: ["\u2191 ", clampedOffset, " lines above"] }) }), _jsxs(Text, { color: "gray", dimColor: true, children: ["\u2191 ", clampedOffset, " lines above"] })] })), _jsxs(Box, { gap: 2, children: [_jsx(Box, { width: colWidth, children: _jsx(Text, { children: oldDisplay }) }), _jsx(Box, { children: _jsx(Text, { children: newDisplay }) })] }), hasMoreBelow && (_jsxs(Box, { gap: 2, children: [_jsx(Box, { width: colWidth, children: _jsxs(Text, { color: "gray", dimColor: true, children: ["\u2193 ", maxLines - clampedOffset - visibleLines, " more lines"] }) }), _jsxs(Text, { color: "gray", dimColor: true, children: ["\u2193 ", maxLines - clampedOffset - visibleLines, " more lines"] })] }))] })] }));
+    return (_jsxs(Box, { flexDirection: "column", gap: 0, children: [_jsxs(Box, { gap: 2, children: [_jsx(Box, { width: colWidth, children: _jsx(Text, { color: THEME.diff.originalHeaderText, bold: true, children: "Original" }) }), _jsx(Box, { children: _jsx(Text, { color: THEME.diff.updatedHeaderText, bold: true, children: "Updated" }) })] }), _jsxs(Box, { gap: 2, children: [_jsx(Box, { width: colWidth, children: _jsx(Text, { color: THEME.diff.diffDividerText, children: "-".repeat(30) }) }), _jsx(Text, { color: THEME.diff.diffDividerText, children: "-".repeat(30) })] }), _jsxs(Box, { gap: 2, flexDirection: "column", children: [hasMoreAbove && (_jsxs(Box, { gap: 2, children: [_jsx(Box, { width: colWidth, children: _jsxs(Text, { color: THEME.diff.diffDividerText, dimColor: true, children: ["\u2191 ", clampedOffset, " lines above"] }) }), _jsxs(Text, { color: THEME.diff.diffDividerText, dimColor: true, children: ["\u2191 ", clampedOffset, " lines above"] })] })), _jsxs(Box, { gap: 2, children: [_jsx(Box, { width: colWidth, children: _jsx(Text, { children: oldDisplay }) }), _jsx(Box, { children: _jsx(Text, { children: newDisplay }) })] }), hasMoreBelow && (_jsxs(Box, { gap: 2, children: [_jsx(Box, { width: colWidth, children: _jsxs(Text, { color: THEME.diff.diffDividerText, dimColor: true, children: ["\u2193 ", maxLines - clampedOffset - visibleLines, " more lines"] }) }), _jsxs(Text, { color: THEME.diff.diffDividerText, dimColor: true, children: ["\u2193 ", maxLines - clampedOffset - visibleLines, " more lines"] })] }))] })] }));
 }

package/dist/src/components/ErrorStatePanel.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from "ink";
+import { useTheme } from "../contexts/ThemeContext.js";
 export function ErrorStatePanel({ title, message, hint }) {
-    return (_jsx(Box, { width: "100%", borderStyle: "round", borderColor: "red", children: _jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "red", children: title }), _jsx(Text, { children: message }), hint ? _jsx(Text, { color: "gray", children: hint }) : null] }) }));
+    const THEME = useTheme();
+    return (_jsx(Box, { width: "100%", borderStyle: "round", borderColor: THEME.error.errorBorderText, children: _jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: THEME.error.errorTitleText, children: title }), _jsx(Text, { children: message }), hint ? _jsx(Text, { color: THEME.error.errorHintText, children: hint }) : null] }) }));
 }

package/dist/src/components/HUD.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Box, Text } from "ink";
+import { useTheme } from "../contexts/ThemeContext.js";
 export function HUD({ serviceLabel, hudColor, path, accountName, accountId, awsProfile, currentIdentity, region, terminalWidth, loading = false, }) {
+    const THEME = useTheme();
     const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
     const [spinnerIndex, setSpinnerIndex] = React.useState(0);
     React.useEffect(() => {
@@ -27,5 +29,5 @@ export function HUD({ serviceLabel, hudColor, path, accountName, accountId, awsP
     const label = ` ${serviceLabel.toUpperCase()} `;
     const pathDisplay = ` ${path} `;
     const padLen = Math.max(0, terminalWidth - label.length - pathDisplay.length);
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: "blue", bold: true, children: compactName }), _jsx(Text, { color: "yellow", bold: true, children: idPart }), _jsx(Text, { color: "gray", bold: true, children: "\u00B7" }), _jsx(Text, { color: "green", bold: true, children: region }), _jsx(Text, { color: "gray", bold: true, children: "\u00B7" }), _jsx(Text, { color: "magenta", bold: true, children: profilePart }), _jsx(Text, { children: " ".repeat(topPadLen) }), loading ? (_jsx(Text, { color: "cyan", bold: true, children: SPINNER_FRAMES[spinnerIndex] })) : null] }), _jsxs(Text, { color: "cyan", wrap: "truncate-end", children: [identityLine, " ".repeat(identityPadLen)] }), _jsxs(Box, { children: [_jsx(Text, { backgroundColor: hudColor.bg, color: hudColor.fg, bold: true, children: label }), _jsxs(Text, { backgroundColor: "gray", color: "white", children: [pathDisplay, " ".repeat(padLen)] })] })] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: THEME.hud.accountNameText, bold: true, children: compactName }), _jsx(Text, { color: THEME.hud.accountIdText, bold: true, children: idPart }), _jsx(Text, { color: THEME.hud.separatorText, bold: true, children: "\u00B7" }), _jsx(Text, { color: THEME.hud.regionText, bold: true, children: region }), _jsx(Text, { color: THEME.hud.separatorText, bold: true, children: "\u00B7" }), _jsx(Text, { color: THEME.hud.profileText, bold: true, children: profilePart }), _jsx(Text, { children: " ".repeat(topPadLen) }), loading ? (_jsx(Text, { color: THEME.hud.loadingSpinnerText, bold: true, children: SPINNER_FRAMES[spinnerIndex] })) : null] }), _jsxs(Text, { color: THEME.hud.currentIdentityText, wrap: "truncate-end", children: [identityLine, " ".repeat(identityPadLen)] }), _jsxs(Box, { children: [_jsx(Text, { backgroundColor: hudColor.bg, color: hudColor.fg, bold: true, children: label }), _jsxs(Text, { backgroundColor: THEME.hud.pathBarBg, color: THEME.hud.pathBarText, children: [pathDisplay, " ".repeat(padLen)] })] })] }));
 }

package/dist/src/components/HelpPanel.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from "ink";
+import { useTheme } from "../contexts/ThemeContext.js";
 function truncate(text, maxLen) {
     if (text.length <= maxLen)
         return text;
@@ -8,6 +9,7 @@ function truncate(text, maxLen) {
     return `${text.slice(0, maxLen - 1)}…`;
 }
 export function HelpPanel({ title, scopeLabel, tabs, activeTab, terminalWidth, maxRows, scrollOffset, }) {
+    const THEME = useTheme();
     const currentTab = tabs[activeTab] ?? tabs[0];
     const keyColWidth = 12;
     const descColWidth = Math.max(16, terminalWidth - keyColWidth - 8);
@@ -24,10 +26,10 @@ export function HelpPanel({ title, scopeLabel, tabs, activeTab, terminalWidth, m
     }
     const listRowsBudget = Math.max(1, maxRows);
     const visibleItems = (currentTab?.items ?? []).slice(scrollOffset, scrollOffset + listRowsBudget);
-    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, flexGrow: 1, children: [_jsx(Text, { bold: true, color: "blue", children: title }), _jsx(Text, { color: "gray", children: scopeLabel }), _jsx(Box, { children: tabRow.map((chip) => {
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, flexGrow: 1, children: [_jsx(Text, { bold: true, color: THEME.panel.panelTitleText, children: title }), _jsx(Text, { color: THEME.panel.panelHintText, children: scopeLabel }), _jsx(Box, { children: tabRow.map((chip) => {
                     const isActive = chip.idx === activeTab;
                     return (_jsx(Text, { ...(isActive
-                            ? { backgroundColor: "blue", color: "white" }
-                            : { color: "cyan" }), bold: isActive, children: chip.label }, `chip-${chip.idx}`));
-                }) }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: visibleItems.map((item, idx) => (_jsxs(Box, { children: [_jsx(Text, { color: "yellow", bold: true, children: truncate(item.key, keyColWidth).padEnd(keyColWidth) }), _jsx(Text, { children: truncate(item.description, descColWidth) })] }, `${item.key}-${scrollOffset + idx}`))) })] }));
+                            ? { backgroundColor: THEME.panel.activeTabBg, color: THEME.panel.activeTabText }
+                            : { color: THEME.panel.inactiveTabText }), bold: isActive, children: chip.label }, `chip-${chip.idx}`));
+                }) }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: visibleItems.map((item, idx) => (_jsxs(Box, { children: [_jsx(Text, { color: THEME.panel.keyText, bold: true, children: truncate(item.key, keyColWidth).padEnd(keyColWidth) }), _jsx(Text, { children: truncate(item.description, descColWidth) })] }, `${item.key}-${scrollOffset + idx}`))) })] }));
 }

package/dist/src/components/ModeBar.js

@@ -3,17 +3,14 @@ import React, { useRef } from "react";
 import { Box, Text } from "ink";
 import { AutocompleteInput } from "./AutocompleteInput.js";
 import { AVAILABLE_COMMANDS } from "../constants/commands.js";
+import { useTheme } from "../contexts/ThemeContext.js";
 const MODE_ICONS = {
     navigate: "◉",
     search: "/",
     command: ":",
 };
-const MODE_COLORS = {
-    navigate: "blue",
-    search: "blue",
-    command: "blue",
-};
 export const ModeBar = React.forwardRef(({ mode, filterText, commandText, commandCursorToEndToken, hintOverride, pickerSearchActive, onFilterChange, onCommandChange, onFilterSubmit, onCommandSubmit, }, ref) => {
+    const THEME = useTheme();
     const commandInputRef = useRef(null);
     const filterInputRef = useRef(null);
     const renderHint = (hint) => {
@@ -22,11 +19,11 @@ export const ModeBar = React.forwardRef(({ mode, filterText, commandText, comman
             .split("•")
             .map((x) => x.trim())
             .filter(Boolean);
-        return (_jsx(Text, { color: "gray", wrap: "truncate-end", children: entries.map((entry, idx) => {
+        return (_jsx(Text, { color: THEME.modebar.keybindingDescText, wrap: "truncate-end", children: entries.map((entry, idx) => {
                 const [rawKey, rawDesc] = entry.split("·").map((x) => x.trim());
                 const keyPart = rawKey ?? entry;
                 const descPart = rawDesc ?? "";
-                return (_jsxs(React.Fragment, { children: [_jsx(Text, { color: "yellow", children: keyPart }), descPart ? _jsxs(Text, { color: "gray", children: [" ", descPart] }) : null, idx < entries.length - 1 ? _jsx(Text, { color: "gray", children: " \u2022 " }) : null] }, `hint-${idx}`));
+                return (_jsxs(React.Fragment, { children: [_jsx(Text, { color: THEME.modebar.keybindingKeyText, children: keyPart }), descPart ? _jsxs(Text, { color: THEME.modebar.keybindingDescText, children: [" ", descPart] }) : null, idx < entries.length - 1 ? _jsx(Text, { color: THEME.modebar.keybindingSeparatorText, children: " \u2022 " }) : null] }, `hint-${idx}`));
             }) }));
     };
     React.useImperativeHandle(ref, () => ({
@@ -37,7 +34,7 @@ export const ModeBar = React.forwardRef(({ mode, filterText, commandText, comman
     const icon = isPickerSearch ? "/" : MODE_ICONS[mode];
     const showNavigateHint = mode === "navigate" && !isPickerSearch;
     const showFilterInput = mode === "search" || isPickerSearch;
-    return (_jsx(Box, { flexDirection: "column", width: "100%", children: _jsxs(Box, { paddingX: 1, children: [_jsx(Text, { color: MODE_COLORS[mode], bold: true, children: icon }), _jsx(Text, { children: " " }), showNavigateHint && renderHint(hintOverride ?? ""), showFilterInput && (_jsx(AutocompleteInput, { ref: filterInputRef, value: filterText, onChange: onFilterChange, onSubmit: onFilterSubmit, placeholder: "Type to filter", focus: showFilterInput })), mode === "command" && (_jsx(AutocompleteInput, { ref: commandInputRef, value: commandText, onChange: onCommandChange, onSubmit: onCommandSubmit, placeholder: "Type a command", suggestions: [...AVAILABLE_COMMANDS], focus: mode === "command", ...(commandCursorToEndToken !== undefined
+    return (_jsx(Box, { flexDirection: "column", width: "100%", children: _jsxs(Box, { paddingX: 1, children: [_jsx(Text, { color: THEME.modebar.modeIconText, bold: true, children: icon }), _jsx(Text, { children: " " }), showNavigateHint && renderHint(hintOverride ?? ""), showFilterInput && (_jsx(AutocompleteInput, { ref: filterInputRef, value: filterText, onChange: onFilterChange, onSubmit: onFilterSubmit, placeholder: "Type to filter", focus: showFilterInput })), mode === "command" && (_jsx(AutocompleteInput, { ref: commandInputRef, value: commandText, onChange: onCommandChange, onSubmit: onCommandSubmit, placeholder: "Type a command", suggestions: [...AVAILABLE_COMMANDS], focus: mode === "command", ...(commandCursorToEndToken !== undefined
                         ? { cursorToEndToken: commandCursorToEndToken }
                         : {}) }))] }) }));
 });

package/dist/src/components/Table/index.js

@@ -2,16 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React, { useMemo } from "react";
 import { Box, Text } from "ink";
 import { computeColumnWidths } from "./widths.js";
-// Color constants for table styling
-const COLORS = {
-    separator: "gray", // │ and ─ dividers
-    headerText: "blue", // Column header text
-    selectedBg: "cyan", // Selected row background
-    selectedText: "black", // Selected row text
-    highlightText: "yellow", // Filtered match highlight
-    emptyText: "gray", // Empty state text
-    highlightSelectedText: "black", // Highlight text on selected row
-};
+import { useTheme } from "../../contexts/ThemeContext.js";
 function truncate(str, maxLen) {
     if (str.length <= maxLen)
         return str.padEnd(maxLen);
@@ -26,14 +17,14 @@ function truncateNoPad(str, maxLen) {
         return "…";
     return str.slice(0, maxLen - 1) + "…";
 }
-function highlightMatch(text, filter, isSelected = false) {
+function highlightMatch(text, filter, isSelected, theme) {
     if (!filter || !text)
         return [text];
     const parts = [];
     const lowerText = text.toLowerCase();
     const lowerFilter = filter.toLowerCase();
     let lastIdx = 0;
-    const highlightColor = isSelected ? COLORS.highlightSelectedText : COLORS.highlightText;
+    const highlightColor = isSelected ? theme.table.filterMatchSelectedText : theme.table.filterMatchText;
     let idx = lowerText.indexOf(lowerFilter);
     while (idx !== -1) {
         if (idx > lastIdx) {
@@ -49,24 +40,26 @@ function highlightMatch(text, filter, isSelected = false) {
     return parts.length > 0 ? parts : [text];
 }
 const Row = React.memo(function Row({ row, isSelected, columns, colWidths, filterText }) {
+    const THEME = useTheme();
     const parts = [];
     columns.forEach((col, i) => {
         if (i > 0)
-            parts.push(_jsxs(Text, { color: COLORS.separator, children: [" ", "\u2502", " "] }, `sep-${i}`));
+            parts.push(_jsxs(Text, { color: THEME.table.rowSeparatorText, children: [" ", "\u2502", " "] }, `sep-${i}`));
         const cellData = row.cells[col.key] ?? "";
         const cellValue = typeof cellData === "string" ? cellData : cellData.displayName;
         const truncated = truncate(cellValue, colWidths[i]);
-        const highlighted = filterText && truncated ? highlightMatch(truncated, filterText, isSelected) : [truncated];
+        const highlighted = filterText && truncated ? highlightMatch(truncated, filterText, isSelected, THEME) : [truncated];
         if (isSelected) {
-            parts.push(_jsx(Text, { color: COLORS.selectedText, bold: true, children: highlighted }, `cell-${i}`));
+            parts.push(_jsx(Text, { color: THEME.table.selectedRowText, bold: true, children: highlighted }, `cell-${i}`));
         }
         else {
             parts.push(_jsx(Text, { children: highlighted }, `cell-${i}`));
         }
     });
-    return isSelected ? _jsx(Box, { backgroundColor: COLORS.selectedBg, children: parts }) : _jsx(Box, { children: parts });
+    return isSelected ? _jsx(Box, { backgroundColor: THEME.table.selectedRowBg, children: parts }) : _jsx(Box, { children: parts });
 });
 export const Table = React.memo(function Table({ columns, rows, selectedIndex, filterText, terminalWidth, maxHeight, scrollOffset, contextLabel, headerMarkers, }) {
+    const THEME = useTheme();
     // Memoize column widths computation
     const colWidths = useMemo(() => computeColumnWidths(columns, terminalWidth), [columns, terminalWidth]);
     // Rows are pre-filtered by parent, no need to filter again
@@ -76,34 +69,34 @@ export const Table = React.memo(function Table({ columns, rows, selectedIndex, f
         const parts = [];
         columns.forEach((col, i) => {
             if (i > 0)
-                parts.push(_jsxs(Text, { color: COLORS.separator, children: [" ", "\u2502", " "] }, `sep-${i}`));
+                parts.push(_jsxs(Text, { color: THEME.table.rowSeparatorText, children: [" ", "\u2502", " "] }, `sep-${i}`));
             const width = colWidths[i];
             const markers = headerMarkers?.[col.key] ?? [];
             const markerText = markers.length > 0 ? ` [${markers.join(",")}]` : "";
             if (!markerText) {
-                parts.push(_jsx(Text, { bold: true, color: COLORS.headerText, children: truncate(col.label, width) }, col.key));
+                parts.push(_jsx(Text, { bold: true, color: THEME.table.columnHeaderText, children: truncate(col.label, width) }, col.key));
                 return;
             }
             if (markerText.length >= width) {
                 const markerDisplay = truncate(markerText, width);
-                parts.push(_jsx(Text, { color: "cyan", children: markerDisplay }, `${col.key}-markers-only`));
+                parts.push(_jsx(Text, { color: THEME.table.columnHeaderMarker, children: markerDisplay }, `${col.key}-markers-only`));
                 return;
             }
             const labelMax = width - markerText.length;
             const labelDisplay = truncateNoPad(col.label, labelMax);
             const trailingPadLen = Math.max(0, width - (labelDisplay.length + markerText.length));
-            parts.push(_jsx(Text, { bold: true, color: COLORS.headerText, children: labelDisplay }, `${col.key}-label`));
-            parts.push(_jsx(Text, { color: "cyan", children: markerText }, `${col.key}-markers`));
+            parts.push(_jsx(Text, { bold: true, color: THEME.table.columnHeaderText, children: labelDisplay }, `${col.key}-label`));
+            parts.push(_jsx(Text, { color: THEME.table.columnHeaderMarker, children: markerText }, `${col.key}-markers`));
             if (trailingPadLen > 0) {
-                parts.push(_jsx(Text, { color: COLORS.headerText, children: " ".repeat(trailingPadLen) }, `${col.key}-pad`));
+                parts.push(_jsx(Text, { color: THEME.table.columnHeaderText, children: " ".repeat(trailingPadLen) }, `${col.key}-pad`));
             }
         });
         return _jsx(Box, { children: parts });
     };
-    const renderDivider = () => (_jsx(Text, { color: COLORS.separator, children: columns.map((col, i) => "─".repeat(colWidths[i])).join("─┼─") }));
-    const renderEmpty = () => (_jsx(Text, { color: COLORS.emptyText, children: filterText ? `No results for "${filterText}"` : "No items" }));
+    const renderDivider = () => (_jsx(Text, { color: THEME.table.rowSeparatorText, children: columns.map((col, i) => "─".repeat(colWidths[i])).join("─┼─") }));
+    const renderEmpty = () => (_jsx(Text, { color: THEME.table.emptyStateText, children: filterText ? `No results for "${filterText}"` : "No items" }));
     if (rows.length === 0) {
-        return (_jsxs(Box, { flexDirection: "column", children: [contextLabel && (_jsx(Text, { bold: true, color: COLORS.headerText, children: contextLabel })), contextLabel && _jsx(Box, { height: 1 }), renderHeader(), renderDivider(), renderEmpty()] }));
+        return (_jsxs(Box, { flexDirection: "column", children: [contextLabel && (_jsx(Text, { bold: true, color: THEME.table.columnHeaderText, children: contextLabel })), contextLabel && _jsx(Box, { height: 1 }), renderHeader(), renderDivider(), renderEmpty()] }));
     }
-    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [contextLabel && (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, color: COLORS.headerText, children: contextLabel }), _jsx(Box, { height: 1 })] })), renderHeader(), renderDivider(), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: visibleRows.map((row, i) => (_jsx(Row, { row: row, isSelected: i === adjustedSelected, columns: columns, colWidths: colWidths, filterText: filterText }, row.id))) }), rows.length > maxHeight && (_jsx(Box, { paddingTop: 1, children: _jsxs(Text, { color: "gray", children: [scrollOffset + visibleRows.length, " / ", rows.length, " items"] }) }))] }));
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [contextLabel && (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, color: THEME.table.columnHeaderText, children: contextLabel }), _jsx(Box, { height: 1 })] })), renderHeader(), renderDivider(), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: visibleRows.map((row, i) => (_jsx(Row, { row: row, isSelected: i === adjustedSelected, columns: columns, colWidths: colWidths, filterText: filterText }, row.id))) }), rows.length > maxHeight && (_jsx(Box, { paddingTop: 1, children: _jsxs(Text, { color: THEME.table.scrollPositionText, children: [scrollOffset + visibleRows.length, " / ", rows.length, " items"] }) }))] }));
 });

package/dist/src/components/TableSkeleton.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import React from "react";
 import { Box, Text } from "ink";
 import { computeColumnWidths } from "./Table/widths.js";
+import { useTheme } from "../contexts/ThemeContext.js";
 function fill(len, ch = "░") {
     return ch.repeat(Math.max(1, len));
 }
@@ -11,6 +12,7 @@ function truncate(str, maxLen) {
     return str.slice(0, Math.max(1, maxLen - 1)) + "…";
 }
 export function TableSkeleton({ columns, terminalWidth, rows = 8, contextLabel, }) {
+    const THEME = useTheme();
     const FRAMES = ["░", "▒", "▓"];
     const [frame, setFrame] = React.useState(0);
     const colWidths = computeColumnWidths(columns, terminalWidth);
@@ -21,5 +23,5 @@ export function TableSkeleton({ columns, terminalWidth, rows = 8, contextLabel,
         return () => clearInterval(timer);
     }, []);
     const shade = FRAMES[frame] ?? "░";
-    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [contextLabel ? (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, color: "blue", children: contextLabel }), _jsx(Box, { height: 1 })] })) : null, _jsx(Box, { children: columns.map((col, i) => (_jsxs(React.Fragment, { children: [i > 0 ? _jsx(Text, { color: "gray", children: " \u2502 " }) : null, _jsx(Text, { bold: true, color: "blue", children: truncate(col.label, colWidths[i] ?? 1) })] }, col.key))) }), _jsx(Text, { color: "gray", children: columns.map((_, i) => fill(colWidths[i] ?? 1, "─")).join("─┼─") }), Array.from({ length: rows }).map((_, rowIdx) => (_jsx(Box, { children: columns.map((col, i) => (_jsxs(React.Fragment, { children: [i > 0 ? _jsx(Text, { color: "gray", children: " \u2502 " }) : null, _jsx(Text, { color: "gray", children: fill(Math.max(1, colWidths[i] ?? 1), shade) })] }, `${col.key}-${rowIdx}`))) }, `skeleton-row-${rowIdx}`)))] }));
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [contextLabel ? (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, color: THEME.skeleton.skeletonContextLabelText, children: contextLabel }), _jsx(Box, { height: 1 })] })) : null, _jsx(Box, { children: columns.map((col, i) => (_jsxs(React.Fragment, { children: [i > 0 ? _jsx(Text, { color: THEME.skeleton.skeletonSeparatorText, children: " \u2502 " }) : null, _jsx(Text, { bold: true, color: THEME.skeleton.skeletonHeaderText, children: truncate(col.label, colWidths[i] ?? 1) })] }, col.key))) }), _jsx(Text, { color: THEME.skeleton.skeletonDividerText, children: columns.map((_, i) => fill(colWidths[i] ?? 1, "─")).join("─┼─") }), Array.from({ length: rows }).map((_, rowIdx) => (_jsx(Box, { children: columns.map((col, i) => (_jsxs(React.Fragment, { children: [i > 0 ? _jsx(Text, { color: THEME.skeleton.skeletonSeparatorText, children: " \u2502 " }) : null, _jsx(Text, { color: THEME.skeleton.skeletonCellText, children: fill(Math.max(1, colWidths[i] ?? 1), shade) })] }, `${col.key}-${rowIdx}`))) }, `skeleton-row-${rowIdx}`)))] }));
 }

package/dist/src/components/YankHelpPanel.js

@@ -3,7 +3,9 @@ import { useEffect, useState } from "react";
 import { Box, Text } from "ink";
 import { Alert, Badge, StatusMessage, UnorderedList } from "@inkjs/ui";
 import { triggerToString } from "../constants/keybindings.js";
+import { useTheme } from "../contexts/ThemeContext.js";
 export function YankHelpPanel({ options, row }) {
+    const THEME = useTheme();
     const [resolvedValues, setResolvedValues] = useState({});
     useEffect(() => {
         let isActive = true;
@@ -37,7 +39,7 @@ export function YankHelpPanel({ options, row }) {
             isActive = false;
         };
     }, [options, row]);
-    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Alert, { variant: "info", title: "Yank Options", children: "Press key to copy, Esc or ? to close" }), _jsx(Box, { height: 1 }), !row && _jsx(StatusMessage, { variant: "warning", children: "No row selected" }), _jsx(UnorderedList, { children: options.map((option) => (_jsx(UnorderedList.Item, { children: _jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Badge, { color: "yellow", children: triggerToString(option.trigger) }), _jsxs(Text, { children: [" ", option.label] })] }), _jsx(Text, { color: "gray", children: row
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Alert, { variant: "info", title: "Yank Options", children: "Press key to copy, Esc or ? to close" }), _jsx(Box, { height: 1 }), !row && _jsx(StatusMessage, { variant: "warning", children: "No row selected" }), _jsx(UnorderedList, { children: options.map((option) => (_jsx(UnorderedList.Item, { children: _jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Badge, { color: THEME.panel.keyText, children: triggerToString(option.trigger) }), _jsxs(Text, { children: [" ", option.label] })] }), _jsx(Text, { color: THEME.panel.panelHintText, children: row
                                     ? `  -> ${resolvedValues[`${option.label}-${triggerToString(option.trigger)}`] ?? "(loading...)"}`
                                     : "  -> (no value)" })] }) }, `${option.label}-${triggerToString(option.trigger)}`))) })] }));
 }

package/dist/src/constants/commands.js

@@ -5,6 +5,7 @@ export const AVAILABLE_COMMANDS = [
     "regions",
     "profiles",
     "resources",
+    "theme",
     "region",
     "profile",
     "use-region",
@@ -12,4 +13,4 @@ export const AVAILABLE_COMMANDS = [
     "$default",
     "quit",
 ];
-export const COMMAND_MODE_HINT = " Commands: s3 route53 dynamodb iam quit regions profiles resources  •  Enter run  •  Esc cancel";
+export const COMMAND_MODE_HINT = " Commands: s3 route53 dynamodb iam quit regions profiles resources theme  •  Enter run  •  Esc cancel";