floq 0.2.0 → 0.2.2

package/dist/ui/components/HelpModal.js

@@ -4,6 +4,8 @@ import { Box, Text, useInput } from 'ink';
 import { t } from '../../i18n/index.js';
 import { useTheme } from '../theme/index.js';
 import { parseChangelog } from '../../changelog.js';
+import { loadConfig, isTursoEnabled, getTursoConfig, getDbPath } from '../../config.js';
+import { CONFIG_FILE, DATA_DIR } from '../../paths.js';
 const VISIBLE_LINES = 12;
 export function HelpModal({ onClose, isKanban = false }) {
     const [activeTab, setActiveTab] = useState('keybindings');
@@ -27,10 +29,14 @@ export function HelpModal({ onClose, isKanban = false }) {
         return items;
     }, []);
     const maxScroll = Math.max(0, changelogItems.length - VISIBLE_LINES);
+    const tabs = ['keybindings', 'info', 'whatsNew'];
     useInput((input, key) => {
         // Tab key detection (key.tab or raw tab character)
         if (key.tab || input === '\t') {
-            setActiveTab(prev => prev === 'keybindings' ? 'whatsNew' : 'keybindings');
+            setActiveTab(prev => {
+                const currentIndex = tabs.indexOf(prev);
+                return tabs[(currentIndex + 1) % tabs.length];
+            });
             setScrollOffset(0);
             return;
         }
@@ -41,18 +47,29 @@ export function HelpModal({ onClose, isKanban = false }) {
             return;
         }
         if (input === '2') {
+            setActiveTab('info');
+            setScrollOffset(0);
+            return;
+        }
+        if (input === '3') {
             setActiveTab('whatsNew');
             setScrollOffset(0);
             return;
         }
         // Arrow keys and h/l for tab switching
         if (input === 'h' || key.leftArrow) {
-            setActiveTab('keybindings');
+            setActiveTab(prev => {
+                const currentIndex = tabs.indexOf(prev);
+                return tabs[(currentIndex - 1 + tabs.length) % tabs.length];
+            });
             setScrollOffset(0);
             return;
         }
         if (input === 'l' || key.rightArrow) {
-            setActiveTab('whatsNew');
+            setActiveTab(prev => {
+                const currentIndex = tabs.indexOf(prev);
+                return tabs[(currentIndex + 1) % tabs.length];
+            });
             setScrollOffset(0);
             return;
         }
@@ -73,7 +90,7 @@ export function HelpModal({ onClose, isKanban = false }) {
         }
     });
     const formatTitle = (title) => theme.style.headerUppercase ? title.toUpperCase() : title;
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: theme.borders.modal, borderColor: theme.colors.borderActive, paddingX: 2, paddingY: 1, children: [_jsx(Box, { justifyContent: "center", marginBottom: 1, children: _jsxs(Box, { children: [_jsxs(Text, { bold: activeTab === 'keybindings', color: activeTab === 'keybindings' ? theme.colors.secondary : theme.colors.textMuted, inverse: activeTab === 'keybindings', children: [' ', formatTitle(help.keybindingsTab), ' '] }), _jsx(Text, { color: theme.colors.textMuted, children: " \u2502 " }), _jsxs(Text, { bold: activeTab === 'whatsNew', color: activeTab === 'whatsNew' ? theme.colors.secondary : theme.colors.textMuted, inverse: activeTab === 'whatsNew', children: [' ', formatTitle(help.whatsNewTab), ' '] })] }) }), activeTab === 'keybindings' ? (isKanban ? (_jsx(KanbanKeybindingsContent, {})) : (_jsx(GTDKeybindingsContent, {}))) : (_jsx(WhatsNewContent, { items: changelogItems, scrollOffset: scrollOffset, visibleLines: VISIBLE_LINES, maxScroll: maxScroll })), _jsx(Box, { justifyContent: "center", marginTop: 1, children: _jsx(Text, { color: theme.colors.textMuted, children: activeTab === 'whatsNew' && maxScroll > 0
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: theme.borders.modal, borderColor: theme.colors.borderActive, paddingX: 2, paddingY: 1, children: [_jsx(Box, { justifyContent: "center", marginBottom: 1, children: _jsxs(Box, { children: [_jsxs(Text, { bold: activeTab === 'keybindings', color: activeTab === 'keybindings' ? theme.colors.secondary : theme.colors.textMuted, inverse: activeTab === 'keybindings', children: [' ', formatTitle(help.keybindingsTab), ' '] }), _jsx(Text, { color: theme.colors.textMuted, children: " \u2502 " }), _jsxs(Text, { bold: activeTab === 'info', color: activeTab === 'info' ? theme.colors.secondary : theme.colors.textMuted, inverse: activeTab === 'info', children: [' ', formatTitle(help.infoTab), ' '] }), _jsx(Text, { color: theme.colors.textMuted, children: " \u2502 " }), _jsxs(Text, { bold: activeTab === 'whatsNew', color: activeTab === 'whatsNew' ? theme.colors.secondary : theme.colors.textMuted, inverse: activeTab === 'whatsNew', children: [' ', formatTitle(help.whatsNewTab), ' '] })] }) }), activeTab === 'keybindings' ? (isKanban ? (_jsx(KanbanKeybindingsContent, {})) : (_jsx(GTDKeybindingsContent, {}))) : activeTab === 'info' ? (_jsx(InfoContent, {})) : (_jsx(WhatsNewContent, { items: changelogItems, scrollOffset: scrollOffset, visibleLines: VISIBLE_LINES, maxScroll: maxScroll })), _jsx(Box, { justifyContent: "center", marginTop: 1, children: _jsx(Text, { color: theme.colors.textMuted, children: activeTab === 'whatsNew' && maxScroll > 0
                         ? `j/k: scroll | ${help.tabHint} | ${help.closeHint}`
                         : `${help.tabHint} | ${help.closeHint}` }) })] }));
 }
@@ -82,14 +99,34 @@ function GTDKeybindingsContent() {
     const help = i18n.tui.help;
     const theme = useTheme();
     const formatTitle = (title) => theme.style.headerUppercase ? title.toUpperCase() : title;
-    return (_jsxs(_Fragment, { children: [_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.accent, children: formatTitle(help.navigation) }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "1-6" }), "      ", help.tabSwitch] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "h/l \u2190/\u2192" }), "  ", help.prevNextTab] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "j/k \u2191/\u2193" }), "  ", help.taskSelect] })] })] }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.accent, children: formatTitle(help.actions) }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "a" }), "        ", help.addTask] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "d" }), "        ", help.completeTask] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "n" }), "        ", help.moveToNext] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "s" }), "        ", help.moveToSomeday] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "w" }), "        ", help.moveToWaiting] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "i" }), "        ", help.moveToInbox] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "r" }), "        ", help.refresh] })] })] }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.accent, children: formatTitle(help.projects) }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "p" }), "        ", help.makeProject] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "P" }), "        ", help.linkToProject] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "Enter" }), "    ", help.openProject] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "Esc/b" }), "    ", help.backFromProject] })] })] }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.accent, children: formatTitle(help.other) }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "/" }), "        ", help.searchTasks] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "?" }), "        ", help.showHelp] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "q" }), "        ", help.quit] })] })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.accent, children: formatTitle(help.navigation) }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "1-6" }), "      ", help.tabSwitch] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "h/l \u2190/\u2192" }), "  ", help.prevNextTab] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "j/k \u2191/\u2193" }), "  ", help.taskSelect] })] })] }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.accent, children: formatTitle(help.actions) }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "a" }), "        ", help.addTask] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "d" }), "        ", help.completeTask] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "n" }), "        ", help.moveToNext] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "s" }), "        ", help.moveToSomeday] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "w" }), "        ", help.moveToWaiting] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "i" }), "        ", help.moveToInbox] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "r" }), "        ", help.refresh] })] })] }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.accent, children: formatTitle(help.projects) }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "p" }), "        ", help.makeProject] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "P" }), "        ", help.linkToProject] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "Enter" }), "    ", help.openProject] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "Esc/b" }), "    ", help.backFromProject] })] })] }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.accent, children: formatTitle(help.settings) }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "T" }), "        ", help.changeTheme] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "V" }), "        ", help.changeViewMode] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "L" }), "        ", help.changeLanguage] })] })] }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.accent, children: formatTitle(help.other) }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "/" }), "        ", help.searchTasks] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "?" }), "        ", help.showHelp] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "q" }), "        ", help.quit] })] })] })] }));
 }
 function KanbanKeybindingsContent() {
     const i18n = t();
     const help = i18n.tui.kanbanHelp;
     const theme = useTheme();
     const formatTitle = (title) => theme.style.headerUppercase ? title.toUpperCase() : title;
-    return (_jsxs(_Fragment, { children: [_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.accent, children: formatTitle(help.navigation) }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "h/l \u2190/\u2192" }), "  ", help.columnSwitch] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "1-3" }), "      ", help.columnDirect] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "j/k \u2191/\u2193" }), "  ", help.taskSelect] })] })] }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.accent, children: formatTitle(help.actions) }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "a" }), "        ", help.addTask] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "d" }), "        ", help.completeTask] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "Enter" }), "    ", help.moveRight] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "BS" }), "       ", help.moveLeft] })] })] }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.accent, children: formatTitle(help.other) }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "/" }), "        ", help.searchTasks] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "?" }), "        ", help.showHelp] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "q" }), "        ", help.quit] })] })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.accent, children: formatTitle(help.navigation) }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "h/l \u2190/\u2192" }), "  ", help.columnSwitch] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "1-3" }), "      ", help.columnDirect] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "j/k \u2191/\u2193" }), "  ", help.taskSelect] })] })] }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.accent, children: formatTitle(help.actions) }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "a" }), "        ", help.addTask] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "d" }), "        ", help.completeTask] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "Enter" }), "    ", help.moveRight] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "BS" }), "       ", help.moveLeft] })] })] }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.accent, children: formatTitle(help.settings) }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "T" }), "        ", help.changeTheme] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "V" }), "        ", help.changeViewMode] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "L" }), "        ", help.changeLanguage] })] })] }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.accent, children: formatTitle(help.other) }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "/" }), "        ", help.searchTasks] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "?" }), "        ", help.showHelp] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "q" }), "        ", help.quit] })] })] })] }));
+}
+function InfoContent() {
+    const i18n = t();
+    const info = i18n.tui.info;
+    const theme = useTheme();
+    const formatTitle = (title) => theme.style.headerUppercase ? title.toUpperCase() : title;
+    const config = loadConfig();
+    const tursoEnabled = isTursoEnabled();
+    const tursoConfig = tursoEnabled ? getTursoConfig() : undefined;
+    const dbPath = getDbPath();
+    // Get Turso host for display
+    const tursoUrl = tursoConfig ? (() => {
+        try {
+            return new URL(tursoConfig.url).host;
+        }
+        catch {
+            return tursoConfig.url;
+        }
+    })() : '';
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.accent, children: formatTitle(info.settings) }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [_jsxs(Text, { color: theme.colors.textHighlight, children: [info.theme, ":"] }), " ", config.theme] }), _jsxs(Text, { color: theme.colors.text, children: [_jsxs(Text, { color: theme.colors.textHighlight, children: [info.language, ":"] }), " ", config.locale] }), _jsxs(Text, { color: theme.colors.text, children: [_jsxs(Text, { color: theme.colors.textHighlight, children: [info.viewMode, ":"] }), " ", config.viewMode] })] })] }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.accent, children: formatTitle(info.database) }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [_jsxs(Text, { color: theme.colors.textHighlight, children: [info.dbType, ":"] }), " ", tursoEnabled ? info.turso : info.local] }), _jsxs(Text, { color: theme.colors.text, children: [_jsxs(Text, { color: theme.colors.textHighlight, children: [info.dbPath, ":"] }), " ", dbPath] }), tursoEnabled && tursoUrl && (_jsxs(Text, { color: theme.colors.text, children: [_jsxs(Text, { color: theme.colors.textHighlight, children: [info.tursoUrl, ":"] }), " ", tursoUrl] }))] })] }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.accent, children: formatTitle(info.paths) }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [_jsxs(Text, { color: theme.colors.textHighlight, children: [info.configFile, ":"] }), " ", CONFIG_FILE] }), _jsxs(Text, { color: theme.colors.text, children: [_jsxs(Text, { color: theme.colors.textHighlight, children: [info.dataDir, ":"] }), " ", DATA_DIR] })] })] })] }));
 }
 function WhatsNewContent({ items, scrollOffset, visibleLines, maxScroll }) {
     const i18n = t();

package/dist/ui/components/KanbanBoard.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
+type SettingsMode = 'none' | 'theme-select' | 'mode-select' | 'lang-select';
 interface KanbanBoardProps {
     onSwitchToGtd?: () => void;
+    onOpenSettings?: (mode: SettingsMode) => void;
 }
-export declare function KanbanBoard({ onSwitchToGtd }: KanbanBoardProps): React.ReactElement;
+export declare function KanbanBoard({ onSwitchToGtd, onOpenSettings }: KanbanBoardProps): React.ReactElement;
 export {};

package/dist/ui/components/KanbanBoard.js

@@ -12,10 +12,10 @@ import { SearchResults } from './SearchResults.js';
 import { getDb, schema } from '../../db/index.js';
 import { t, fmt } from '../../i18n/index.js';
 import { useTheme } from '../theme/index.js';
-import { isTursoEnabled, getTursoConfig } from '../../config.js';
+import { isTursoEnabled } from '../../config.js';
 import { VERSION } from '../../version.js';
 const COLUMNS = ['todo', 'doing', 'done'];
-export function KanbanBoard({ onSwitchToGtd }) {
+export function KanbanBoard({ onSwitchToGtd, onOpenSettings }) {
     const theme = useTheme();
     const { exit } = useApp();
     const [mode, setMode] = useState('normal');
@@ -366,6 +366,21 @@ export function KanbanBoard({ onSwitchToGtd }) {
             setSearchResultIndex(0);
             return;
         }
+        // Settings: Theme selector
+        if (input === 'T' && onOpenSettings) {
+            onOpenSettings('theme-select');
+            return;
+        }
+        // Settings: Mode selector
+        if (input === 'V' && onOpenSettings) {
+            onOpenSettings('mode-select');
+            return;
+        }
+        // Settings: Language selector
+        if (input === 'L' && onOpenSettings) {
+            onOpenSettings('lang-select');
+            return;
+        }
         // Quit
         if (input === 'q' || (key.ctrl && input === 'c')) {
             exit();
@@ -476,19 +491,9 @@ export function KanbanBoard({ onSwitchToGtd }) {
     const formatTitle = (title) => theme.style.headerUppercase ? title.toUpperCase() : title;
     // Turso connection info
     const tursoEnabled = isTursoEnabled();
-    const tursoHost = tursoEnabled ? (() => {
-        const config = getTursoConfig();
-        if (config) {
-            try {
-                return new URL(config.url).host;
-            }
-            catch {
-                return config.url;
-            }
-        }
-        return '';
-    })() : '';
-    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsxs(Box, { marginBottom: 1, justifyContent: "space-between", children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: theme.colors.primary, children: formatTitle(i18n.tui.title) }), _jsx(Text, { color: theme.colors.accent, children: " [KANBAN]" }), _jsx(Text, { color: theme.colors.textMuted, children: theme.name === 'modern' ? ` v${VERSION}` : ` VER ${VERSION}` }), tursoEnabled && (_jsxs(Text, { color: theme.colors.accent, children: [theme.name === 'modern' ? ' ☁️ ' : ' [SYNC] ', tursoHost] })), !tursoEnabled && (_jsx(Text, { color: theme.colors.textMuted, children: theme.name === 'modern' ? ' 💾 local' : ' [LOCAL]' }))] }), _jsx(Text, { color: theme.colors.textMuted, children: i18n.tui.helpHint })] }), (mode === 'task-detail' || mode === 'add-comment' || mode === 'select-project') && selectedTask ? (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { color: theme.colors.accent, bold: true, children: [theme.name === 'modern' ? '📋 ' : '>> ', i18n.tui.taskDetailTitle || 'Task Details'] }), _jsxs(Text, { color: theme.colors.textMuted, children: [" (Esc/b: ", i18n.tui.back || 'back', ", ", i18n.tui.commentHint || 'i: add comment', ")"] })] }), _jsxs(Box, { flexDirection: "column", borderStyle: theme.borders.list, borderColor: theme.colors.border, paddingX: 1, paddingY: 1, marginBottom: 1, children: [_jsx(Text, { color: theme.colors.text, bold: true, children: selectedTask.title }), selectedTask.description && (_jsx(Text, { color: theme.colors.textMuted, children: selectedTask.description })), _jsxs(Text, { color: theme.colors.textMuted, children: [i18n.status[selectedTask.status], selectedTask.waitingFor && ` - ${selectedTask.waitingFor}`, selectedTask.dueDate && ` (${selectedTask.dueDate.toLocaleDateString()})`] })] }), _jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: theme.colors.secondary, bold: true, children: [i18n.tui.comments || 'Comments', " (", taskComments.length, ")"] }) }), _jsx(Box, { flexDirection: "column", borderStyle: theme.borders.list, borderColor: theme.colors.border, paddingX: 1, paddingY: 1, minHeight: 5, children: taskComments.length === 0 ? (_jsx(Text, { color: theme.colors.textMuted, italic: true, children: i18n.tui.noComments || 'No comments yet' })) : (taskComments.map((comment, index) => {
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsxs(Box, { marginBottom: 1, justifyContent: "space-between", children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: theme.colors.primary, children: formatTitle(i18n.tui.title) }), _jsx(Text, { color: theme.colors.accent, children: " [KANBAN]" }), _jsx(Text, { color: theme.colors.textMuted, children: theme.name === 'modern' ? ` v${VERSION}` : ` VER ${VERSION}` }), _jsx(Text, { color: tursoEnabled ? theme.colors.accent : theme.colors.textMuted, children: theme.name === 'modern'
+                                    ? (tursoEnabled ? ' ☁️ turso' : ' 💾 local')
+                                    : (tursoEnabled ? ' [DB]TURSO' : ' [DB]local') })] }), _jsx(Text, { color: theme.colors.textMuted, children: i18n.tui.helpHint })] }), (mode === 'task-detail' || mode === 'add-comment' || mode === 'select-project') && selectedTask ? (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { color: theme.colors.accent, bold: true, children: [theme.name === 'modern' ? '📋 ' : '>> ', i18n.tui.taskDetailTitle || 'Task Details'] }), _jsxs(Text, { color: theme.colors.textMuted, children: [" (Esc/b: ", i18n.tui.back || 'back', ", ", i18n.tui.commentHint || 'i: add comment', ")"] })] }), _jsxs(Box, { flexDirection: "column", borderStyle: theme.borders.list, borderColor: theme.colors.border, paddingX: 1, paddingY: 1, marginBottom: 1, children: [_jsx(Text, { color: theme.colors.text, bold: true, children: selectedTask.title }), selectedTask.description && (_jsx(Text, { color: theme.colors.textMuted, children: selectedTask.description })), _jsxs(Text, { color: theme.colors.textMuted, children: [i18n.status[selectedTask.status], selectedTask.waitingFor && ` - ${selectedTask.waitingFor}`, selectedTask.dueDate && ` (${selectedTask.dueDate.toLocaleDateString()})`] })] }), _jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: theme.colors.secondary, bold: true, children: [i18n.tui.comments || 'Comments', " (", taskComments.length, ")"] }) }), _jsx(Box, { flexDirection: "column", borderStyle: theme.borders.list, borderColor: theme.colors.border, paddingX: 1, paddingY: 1, minHeight: 5, children: taskComments.length === 0 ? (_jsx(Text, { color: theme.colors.textMuted, italic: true, children: i18n.tui.noComments || 'No comments yet' })) : (taskComments.map((comment, index) => {
                             const isSelected = index === selectedCommentIndex && mode === 'task-detail';
                             return (_jsxs(Box, { flexDirection: "row", marginBottom: 1, children: [_jsx(Text, { color: isSelected ? theme.colors.textSelected : theme.colors.textMuted, children: isSelected ? theme.style.selectedPrefix : theme.style.unselectedPrefix }), _jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.textMuted, children: ["[", comment.createdAt.toLocaleString(), "]"] }), _jsx(Text, { color: isSelected ? theme.colors.textSelected : theme.colors.text, bold: isSelected, children: comment.content })] })] }, comment.id));
                         })) }), mode === 'add-comment' && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: theme.colors.secondary, bold: true, children: i18n.tui.addComment || 'New comment: ' }), _jsx(TextInput, { value: inputValue, onChange: setInputValue, onSubmit: handleInputSubmit, placeholder: "" }), _jsxs(Text, { color: theme.colors.textMuted, children: [" ", i18n.tui.inputHelp] })] })), mode === 'select-project' && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { color: theme.colors.secondary, bold: true, children: [i18n.tui.selectProject || 'Select project for', ": ", selectedTask.title] }), _jsx(Box, { flexDirection: "column", marginTop: 1, borderStyle: theme.borders.list, borderColor: theme.colors.borderActive, paddingX: 1, children: projects.map((project, index) => (_jsxs(Text, { color: index === projectSelectIndex ? theme.colors.textSelected : theme.colors.text, bold: index === projectSelectIndex, children: [index === projectSelectIndex ? theme.style.selectedPrefix : theme.style.unselectedPrefix, project.title] }, project.id))) }), _jsx(Text, { color: theme.colors.textMuted, children: i18n.tui.selectProjectHelp || 'j/k: select, Enter: confirm, Esc: cancel' })] }))] })) : mode === 'search' ? (_jsx(_Fragment, { children: searchQuery && (_jsx(SearchResults, { results: searchResults, selectedIndex: searchResultIndex, query: searchQuery })) })) : (_jsxs(_Fragment, { children: [_jsx(Box, { marginBottom: 1, children: COLUMNS.map((column, index) => (_jsx(Box, { flexGrow: 1, flexBasis: 0, marginRight: index < 2 ? 1 : 0, children: _jsxs(Text, { color: currentColumnIndex === index ? theme.colors.textHighlight : theme.colors.textMuted, children: [index + 1, ":"] }) }, column))) }), _jsx(Box, { flexDirection: "row", children: COLUMNS.map((column, index) => (_jsx(KanbanColumn, { title: getColumnLabel(column), tasks: tasks[column], isActive: index === currentColumnIndex, selectedTaskIndex: selectedTaskIndices[column], columnIndex: index }, column))) })] })), mode === 'add' && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: theme.colors.secondary, bold: true, children: i18n.tui.newTask }), _jsx(TextInput, { value: inputValue, onChange: setInputValue, onSubmit: handleInputSubmit, placeholder: i18n.tui.placeholder }), _jsxs(Text, { color: theme.colors.textMuted, children: [" ", i18n.tui.inputHelp] })] })), mode === 'search' && (_jsx(SearchBar, { value: searchQuery, onChange: handleSearchChange, onSubmit: handleInputSubmit })), message && mode === 'normal' && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.colors.textHighlight, children: message }) })), _jsx(Box, { marginTop: 1, children: mode === 'select-project' ? (_jsx(Text, { color: theme.colors.textMuted, children: i18n.tui.selectProjectHelp || 'j/k: select, Enter: confirm, Esc: cancel' })) : (mode === 'task-detail' || mode === 'add-comment') ? (theme.style.showFunctionKeys ? (_jsx(FunctionKeyBar, { keys: [

package/dist/ui/theme/themes.d.ts

@@ -15,6 +15,16 @@ export declare const solarizedLightTheme: Theme;
 export declare const synthwaveTheme: Theme;
 export declare const paperTheme: Theme;
 export declare const coffeeTheme: Theme;
+export declare const nordTheme: Theme;
+export declare const draculaTheme: Theme;
+export declare const monokaiTheme: Theme;
+export declare const gruvboxTheme: Theme;
+export declare const tokyoNightTheme: Theme;
+export declare const catppuccinTheme: Theme;
+export declare const oceanTheme: Theme;
+export declare const sakuraTheme: Theme;
+export declare const msxTheme: Theme;
+export declare const pc98Theme: Theme;
 export declare const themes: Record<ThemeName, Theme>;
 export declare const VALID_THEMES: ThemeName[];
 export declare function getTheme(name: ThemeName): Theme;

package/dist/ui/theme/themes.js

@@ -611,6 +611,396 @@ export const coffeeTheme = {
         loadingChars: ['☕', '○'],
     },
 };
+// Nord - Arctic, north-bluish color palette
+export const nordTheme = {
+    name: 'nord',
+    displayName: 'Nord',
+    colors: {
+        primary: '#88c0d0',
+        secondary: '#81a1c1',
+        accent: '#ebcb8b',
+        muted: '#4c566a',
+        border: '#4c566a',
+        borderActive: '#88c0d0',
+        background: '#2e3440',
+        statusInbox: '#88c0d0',
+        statusNext: '#a3be8c',
+        statusWaiting: '#ebcb8b',
+        statusSomeday: '#b48ead',
+        statusDone: '#4c566a',
+        text: '#eceff4',
+        textMuted: '#4c566a',
+        textSelected: '#88c0d0',
+        textHighlight: '#a3be8c',
+        fnKeyLabel: '#3b4252',
+        fnKeyText: '#d8dee9',
+    },
+    borders: {
+        main: 'round',
+        modal: 'round',
+        list: 'single',
+    },
+    style: {
+        selectedPrefix: '❯ ',
+        unselectedPrefix: '  ',
+        tabActiveInverse: true,
+        tabBrackets: ['', ''],
+        headerUppercase: false,
+        showFunctionKeys: false,
+        loadingChars: ['●', '○'],
+    },
+};
+// Dracula - Dark theme with vibrant colors
+export const draculaTheme = {
+    name: 'dracula',
+    displayName: 'Dracula',
+    colors: {
+        primary: '#bd93f9',
+        secondary: '#8be9fd',
+        accent: '#ff79c6',
+        muted: '#6272a4',
+        border: '#6272a4',
+        borderActive: '#bd93f9',
+        background: '#282a36',
+        statusInbox: '#8be9fd',
+        statusNext: '#50fa7b',
+        statusWaiting: '#ffb86c',
+        statusSomeday: '#ff79c6',
+        statusDone: '#6272a4',
+        text: '#f8f8f2',
+        textMuted: '#6272a4',
+        textSelected: '#bd93f9',
+        textHighlight: '#50fa7b',
+        fnKeyLabel: '#44475a',
+        fnKeyText: '#f8f8f2',
+    },
+    borders: {
+        main: 'round',
+        modal: 'round',
+        list: 'single',
+    },
+    style: {
+        selectedPrefix: '▸ ',
+        unselectedPrefix: '  ',
+        tabActiveInverse: true,
+        tabBrackets: ['', ''],
+        headerUppercase: false,
+        showFunctionKeys: false,
+        loadingChars: ['◆', '◇'],
+    },
+};
+// Monokai - Classic editor theme with vibrant syntax colors
+export const monokaiTheme = {
+    name: 'monokai',
+    displayName: 'Monokai',
+    colors: {
+        primary: '#f92672',
+        secondary: '#66d9ef',
+        accent: '#a6e22e',
+        muted: '#75715e',
+        border: '#75715e',
+        borderActive: '#f92672',
+        background: '#272822',
+        statusInbox: '#66d9ef',
+        statusNext: '#a6e22e',
+        statusWaiting: '#e6db74',
+        statusSomeday: '#ae81ff',
+        statusDone: '#75715e',
+        text: '#f8f8f2',
+        textMuted: '#75715e',
+        textSelected: '#f92672',
+        textHighlight: '#a6e22e',
+        fnKeyLabel: '#3e3d32',
+        fnKeyText: '#f8f8f2',
+    },
+    borders: {
+        main: 'single',
+        modal: 'round',
+        list: 'single',
+    },
+    style: {
+        selectedPrefix: '» ',
+        unselectedPrefix: '  ',
+        tabActiveInverse: true,
+        tabBrackets: ['', ''],
+        headerUppercase: false,
+        showFunctionKeys: false,
+        loadingChars: ['▓', '░'],
+    },
+};
+// Gruvbox - Retro groove color scheme
+export const gruvboxTheme = {
+    name: 'gruvbox',
+    displayName: 'Gruvbox',
+    colors: {
+        primary: '#fe8019',
+        secondary: '#fabd2f',
+        accent: '#b8bb26',
+        muted: '#665c54',
+        border: '#665c54',
+        borderActive: '#fe8019',
+        background: '#282828',
+        statusInbox: '#83a598',
+        statusNext: '#b8bb26',
+        statusWaiting: '#fabd2f',
+        statusSomeday: '#d3869b',
+        statusDone: '#665c54',
+        text: '#ebdbb2',
+        textMuted: '#928374',
+        textSelected: '#fe8019',
+        textHighlight: '#b8bb26',
+        fnKeyLabel: '#3c3836',
+        fnKeyText: '#ebdbb2',
+    },
+    borders: {
+        main: 'single',
+        modal: 'single',
+        list: 'single',
+    },
+    style: {
+        selectedPrefix: '▶ ',
+        unselectedPrefix: '  ',
+        tabActiveInverse: true,
+        tabBrackets: ['[', ']'],
+        headerUppercase: false,
+        showFunctionKeys: false,
+        loadingChars: ['█', '░'],
+    },
+};
+// Tokyo Night - A clean dark theme inspired by Tokyo's night lights
+export const tokyoNightTheme = {
+    name: 'tokyo-night',
+    displayName: 'Tokyo Night',
+    colors: {
+        primary: '#7aa2f7',
+        secondary: '#bb9af7',
+        accent: '#7dcfff',
+        muted: '#565f89',
+        border: '#565f89',
+        borderActive: '#7aa2f7',
+        background: '#1a1b26',
+        statusInbox: '#7aa2f7',
+        statusNext: '#9ece6a',
+        statusWaiting: '#e0af68',
+        statusSomeday: '#bb9af7',
+        statusDone: '#565f89',
+        text: '#c0caf5',
+        textMuted: '#565f89',
+        textSelected: '#7dcfff',
+        textHighlight: '#9ece6a',
+        fnKeyLabel: '#24283b',
+        fnKeyText: '#c0caf5',
+    },
+    borders: {
+        main: 'round',
+        modal: 'round',
+        list: 'single',
+    },
+    style: {
+        selectedPrefix: '› ',
+        unselectedPrefix: '  ',
+        tabActiveInverse: true,
+        tabBrackets: ['', ''],
+        headerUppercase: false,
+        showFunctionKeys: false,
+        loadingChars: ['◉', '◎'],
+    },
+};
+// Catppuccin - Soothing pastel theme (Mocha variant)
+export const catppuccinTheme = {
+    name: 'catppuccin',
+    displayName: 'Catppuccin',
+    colors: {
+        primary: '#cba6f7',
+        secondary: '#89b4fa',
+        accent: '#f5c2e7',
+        muted: '#6c7086',
+        border: '#6c7086',
+        borderActive: '#cba6f7',
+        background: '#1e1e2e',
+        statusInbox: '#89b4fa',
+        statusNext: '#a6e3a1',
+        statusWaiting: '#f9e2af',
+        statusSomeday: '#f5c2e7',
+        statusDone: '#6c7086',
+        text: '#cdd6f4',
+        textMuted: '#6c7086',
+        textSelected: '#cba6f7',
+        textHighlight: '#a6e3a1',
+        fnKeyLabel: '#313244',
+        fnKeyText: '#cdd6f4',
+    },
+    borders: {
+        main: 'round',
+        modal: 'round',
+        list: 'single',
+    },
+    style: {
+        selectedPrefix: '◆ ',
+        unselectedPrefix: '  ',
+        tabActiveInverse: true,
+        tabBrackets: ['', ''],
+        headerUppercase: false,
+        showFunctionKeys: false,
+        loadingChars: ['●', '○'],
+    },
+};
+// Ocean - Deep sea inspired blue theme
+export const oceanTheme = {
+    name: 'ocean',
+    displayName: 'Ocean',
+    colors: {
+        primary: '#00b4d8',
+        secondary: '#0077b6',
+        accent: '#90e0ef',
+        muted: '#023e8a',
+        border: '#0077b6',
+        borderActive: '#00b4d8',
+        background: '#03045e',
+        statusInbox: '#00b4d8',
+        statusNext: '#48cae4',
+        statusWaiting: '#90e0ef',
+        statusSomeday: '#ade8f4',
+        statusDone: '#023e8a',
+        text: '#caf0f8',
+        textMuted: '#0077b6',
+        textSelected: '#90e0ef',
+        textHighlight: '#48cae4',
+        fnKeyLabel: '#023e8a',
+        fnKeyText: '#caf0f8',
+    },
+    borders: {
+        main: 'round',
+        modal: 'round',
+        list: 'single',
+    },
+    style: {
+        selectedPrefix: '≋ ',
+        unselectedPrefix: '  ',
+        tabActiveInverse: true,
+        tabBrackets: ['〔', '〕'],
+        headerUppercase: false,
+        showFunctionKeys: false,
+        loadingChars: ['◐', '◑'],
+    },
+};
+// Sakura - Cherry blossom inspired pink theme
+export const sakuraTheme = {
+    name: 'sakura',
+    displayName: 'Sakura',
+    colors: {
+        primary: '#ffb7c5',
+        secondary: '#ff8fa3',
+        accent: '#ffffff',
+        muted: '#c9184a',
+        border: '#ff8fa3',
+        borderActive: '#ffb7c5',
+        background: '#590d22',
+        statusInbox: '#ffb7c5',
+        statusNext: '#ff758f',
+        statusWaiting: '#ffccd5',
+        statusSomeday: '#ff4d6d',
+        statusDone: '#800f2f',
+        text: '#fff0f3',
+        textMuted: '#a4133c',
+        textSelected: '#ffffff',
+        textHighlight: '#ff758f',
+        fnKeyLabel: '#800f2f',
+        fnKeyText: '#ffb7c5',
+    },
+    borders: {
+        main: 'round',
+        modal: 'round',
+        list: 'single',
+    },
+    style: {
+        selectedPrefix: '❀ ',
+        unselectedPrefix: '  ',
+        tabActiveInverse: true,
+        tabBrackets: ['『', '』'],
+        headerUppercase: false,
+        showFunctionKeys: false,
+        loadingChars: ['✿', '❀'],
+    },
+};
+// MSX - Japanese retro computer style (TMS9918 palette)
+export const msxTheme = {
+    name: 'msx',
+    displayName: 'MSX',
+    colors: {
+        primary: '#40b64a',
+        secondary: '#5955df',
+        accent: '#ffffff',
+        muted: '#cacaca',
+        border: '#40b64a',
+        borderActive: '#73ce7c',
+        background: '#000000',
+        statusInbox: '#64daee',
+        statusNext: '#40b64a',
+        statusWaiting: '#ddce85',
+        statusSomeday: '#b565b3',
+        statusDone: '#cacaca',
+        text: '#40b64a',
+        textMuted: '#cacaca',
+        textSelected: '#ffffff',
+        textHighlight: '#73ce7c',
+        fnKeyLabel: '#64daee',
+        fnKeyText: '#000000',
+    },
+    borders: {
+        main: 'single',
+        modal: 'single',
+        list: 'single',
+    },
+    style: {
+        selectedPrefix: '> ',
+        unselectedPrefix: '  ',
+        tabActiveInverse: true,
+        tabBrackets: ['[', ']'],
+        headerUppercase: true,
+        showFunctionKeys: true,
+        loadingChars: ['■', '□'],
+    },
+};
+// PC-98 - NEC PC-9801 style
+export const pc98Theme = {
+    name: 'pc-98',
+    displayName: 'PC-98',
+    colors: {
+        primary: '#ffffff',
+        secondary: '#00ffff',
+        accent: '#ffff00',
+        muted: '#808080',
+        border: '#ffffff',
+        borderActive: '#00ffff',
+        background: '#000080',
+        statusInbox: '#00ffff',
+        statusNext: '#00ff00',
+        statusWaiting: '#ffff00',
+        statusSomeday: '#ff00ff',
+        statusDone: '#808080',
+        text: '#ffffff',
+        textMuted: '#808080',
+        textSelected: '#ffff00',
+        textHighlight: '#00ffff',
+        fnKeyLabel: '#00ffff',
+        fnKeyText: '#ffffff',
+    },
+    borders: {
+        main: 'single',
+        modal: 'double',
+        list: 'single',
+    },
+    style: {
+        selectedPrefix: '▶ ',
+        unselectedPrefix: '  ',
+        tabActiveInverse: true,
+        tabBrackets: ['【', '】'],
+        headerUppercase: false,
+        showFunctionKeys: true,
+        loadingChars: ['●', '○'],
+    },
+};
 export const themes = {
     'modern': modernTheme,
     'norton-commander': nortonCommanderTheme,
@@ -628,6 +1018,16 @@ export const themes = {
     'synthwave': synthwaveTheme,
     'paper': paperTheme,
     'coffee': coffeeTheme,
+    'nord': nordTheme,
+    'dracula': draculaTheme,
+    'monokai': monokaiTheme,
+    'gruvbox': gruvboxTheme,
+    'tokyo-night': tokyoNightTheme,
+    'catppuccin': catppuccinTheme,
+    'ocean': oceanTheme,
+    'sakura': sakuraTheme,
+    'msx': msxTheme,
+    'pc-98': pc98Theme,
 };
 export const VALID_THEMES = [
     'modern',
@@ -646,6 +1046,16 @@ export const VALID_THEMES = [
     'synthwave',
     'paper',
     'coffee',
+    'nord',
+    'dracula',
+    'monokai',
+    'gruvbox',
+    'tokyo-night',
+    'catppuccin',
+    'ocean',
+    'sakura',
+    'msx',
+    'pc-98',
 ];
 export function getTheme(name) {
     return themes[name] || modernTheme;