floq 0.2.1 → 0.2.2

package/README.ja.md

@@ -228,7 +228,7 @@ floq config turso --disable
 
 ## テーマ
 
-16種類のテーマが利用可能。`floq config theme` でインタラクティブに選択（j/kで移動）。
+26種類のテーマが利用可能。`floq config theme` でインタラクティブに選択（j/kで移動）。
 
 | テーマ | 説明 |
 |--------|------|
@@ -248,6 +248,16 @@ floq config turso --disable
 | `synthwave` | ネオン80sスタイル |
 | `paper` | 紙とインク風ライト |
 | `coffee` | 暖かみのある茶系 |
+| `nord` | 北欧風ブルーグレー |
+| `dracula` | ダーク＆ビビッドカラー |
+| `monokai` | エディタ定番の鮮やかな配色 |
+| `gruvbox` | レトロな暖色系ダーク |
+| `tokyo-night` | 東京の夜景イメージ |
+| `catppuccin` | パステル系モダン |
+| `ocean` | 深海ブルー |
+| `sakura` | 桜ピンク |
+| `msx` | MSXコンピュータ（TMS9918） |
+| `pc-98` | NEC PC-9801風 |
 
 > **注意**: 背景色はターミナルの設定に依存します。
 

package/README.md

@@ -228,7 +228,7 @@ floq config turso --disable
 
 ## Themes
 
-16 themes available. Use `floq config theme` for interactive selection (j/k to navigate).
+26 themes available. Use `floq config theme` for interactive selection (j/k to navigate).
 
 | Theme | Description |
 |-------|-------------|
@@ -248,6 +248,16 @@ floq config turso --disable
 | `synthwave` | Neon 80s aesthetic |
 | `paper` | Light minimal theme |
 | `coffee` | Warm brown tones |
+| `nord` | Arctic, north-bluish palette |
+| `dracula` | Dark theme with vibrant colors |
+| `monokai` | Classic editor vivid colors |
+| `gruvbox` | Retro groove warm tones |
+| `tokyo-night` | Tokyo night lights inspired |
+| `catppuccin` | Soothing pastel theme |
+| `ocean` | Deep sea blue theme |
+| `sakura` | Cherry blossom pink |
+| `msx` | MSX computer (TMS9918) |
+| `pc-98` | NEC PC-9801 style |
 
 > **Note**: Background colors depend on your terminal settings.
 

package/dist/i18n/en.d.ts

@@ -129,6 +129,10 @@ export declare const en: {
             taskDetail: string;
             addComment: string;
             searchTasks: string;
+            settings: string;
+            changeTheme: string;
+            changeViewMode: string;
+            changeLanguage: string;
             other: string;
             showHelp: string;
             quit: string;
@@ -156,6 +160,10 @@ export declare const en: {
             moveRight: string;
             moveLeft: string;
             searchTasks: string;
+            settings: string;
+            changeTheme: string;
+            changeViewMode: string;
+            changeLanguage: string;
             other: string;
             showHelp: string;
             quit: string;
@@ -274,6 +282,10 @@ export type HelpTranslations = {
     taskDetail: string;
     addComment: string;
     searchTasks: string;
+    settings: string;
+    changeTheme: string;
+    changeViewMode: string;
+    changeLanguage: string;
     other: string;
     showHelp: string;
     quit: string;
@@ -301,6 +313,10 @@ export type KanbanHelpTranslations = {
     moveRight: string;
     moveLeft: string;
     searchTasks: string;
+    settings: string;
+    changeTheme: string;
+    changeViewMode: string;
+    changeLanguage: string;
     other: string;
     showHelp: string;
     quit: string;

package/dist/i18n/en.js

@@ -138,6 +138,10 @@ export const en = {
             taskDetail: 'View task details',
             addComment: 'Add comment',
             searchTasks: 'Search tasks',
+            settings: 'Settings',
+            changeTheme: 'Change theme',
+            changeViewMode: 'Change view mode',
+            changeLanguage: 'Change language',
             other: 'Other',
             showHelp: 'Show this help',
             quit: 'Quit',
@@ -167,6 +171,10 @@ export const en = {
             moveRight: 'Move task to next column',
             moveLeft: 'Move task to previous column',
             searchTasks: 'Search tasks',
+            settings: 'Settings',
+            changeTheme: 'Change theme',
+            changeViewMode: 'Change view mode',
+            changeLanguage: 'Change language',
             other: 'Other',
             showHelp: 'Show this help',
             quit: 'Quit',

package/dist/i18n/ja.js

@@ -138,6 +138,10 @@ export const ja = {
             taskDetail: 'タスク詳細を表示',
             addComment: 'コメント追加',
             searchTasks: 'タスク検索',
+            settings: '設定',
+            changeTheme: 'テーマ変更',
+            changeViewMode: '表示モード変更',
+            changeLanguage: '言語変更',
             other: 'その他',
             showHelp: 'このヘルプを表示',
             quit: '終了',
@@ -167,6 +171,10 @@ export const ja = {
             moveRight: '次のカラムへ移動',
             moveLeft: '前のカラムへ戻す',
             searchTasks: 'タスク検索',
+            settings: '設定',
+            changeTheme: 'テーマ変更',
+            changeViewMode: '表示モード変更',
+            changeLanguage: '言語変更',
             other: 'その他',
             showHelp: 'このヘルプを表示',
             quit: '終了',

package/dist/ui/App.js

@@ -10,19 +10,52 @@ import { FunctionKeyBar } from './components/FunctionKeyBar.js';
 import { SearchBar } from './components/SearchBar.js';
 import { SearchResults } from './components/SearchResults.js';
 import { SplashScreen } from './SplashScreen.js';
+import { ThemeSelector } from './ThemeSelector.js';
+import { ModeSelector } from './ModeSelector.js';
+import { LanguageSelector } from './LanguageSelector.js';
 import { getDb, schema } from '../db/index.js';
 import { t, fmt } from '../i18n/index.js';
 import { ThemeProvider, useTheme } from './theme/index.js';
-import { getThemeName, getViewMode, isTursoEnabled } from '../config.js';
+import { getThemeName, getViewMode, setThemeName, setViewMode, setLocale, isTursoEnabled } from '../config.js';
 import { KanbanBoard } from './components/KanbanBoard.js';
 import { VERSION } from '../version.js';
 const TABS = ['inbox', 'next', 'waiting', 'someday', 'projects', 'done'];
 export function App() {
-    const themeName = getThemeName();
-    const viewMode = getViewMode();
-    return (_jsx(ThemeProvider, { themeName: themeName, children: viewMode === 'kanban' ? _jsx(KanbanBoard, {}) : _jsx(AppContent, {}) }));
+    const [themeName, setThemeNameState] = useState(getThemeName);
+    const [viewMode, setViewModeState] = useState(getViewMode);
+    const [settingsMode, setSettingsMode] = useState('none');
+    const [, forceUpdate] = useState({});
+    const handleThemeSelect = (theme) => {
+        setThemeName(theme);
+        setThemeNameState(theme);
+        setSettingsMode('none');
+    };
+    const handleModeSelect = (mode) => {
+        setViewMode(mode);
+        setViewModeState(mode);
+        setSettingsMode('none');
+    };
+    const handleLocaleSelect = (locale) => {
+        setLocale(locale);
+        setSettingsMode('none');
+        forceUpdate({});
+    };
+    const handleSettingsCancel = () => {
+        setSettingsMode('none');
+    };
+    // Settings selector screens
+    if (settingsMode === 'theme-select') {
+        return (_jsx(ThemeProvider, { themeName: themeName, children: _jsx(ThemeSelector, { onSelect: handleThemeSelect, onCancel: handleSettingsCancel }) }));
+    }
+    if (settingsMode === 'mode-select') {
+        return (_jsx(ThemeProvider, { themeName: themeName, children: _jsx(ModeSelector, { onSelect: handleModeSelect, onCancel: handleSettingsCancel }) }));
+    }
+    if (settingsMode === 'lang-select') {
+        return (_jsx(ThemeProvider, { themeName: themeName, children: _jsx(LanguageSelector, { onSelect: handleLocaleSelect, onCancel: handleSettingsCancel }) }));
+    }
+    return (_jsx(ThemeProvider, { themeName: themeName, children: viewMode === 'kanban' ? (_jsx(KanbanBoard, { onOpenSettings: setSettingsMode })) : (_jsx(AppContent, { onOpenSettings: setSettingsMode })) }));
 }
-function AppContent() {
+function AppContent({ onOpenSettings }) {
     const theme = useTheme();
     const { exit } = useApp();
     const [mode, setMode] = useState('splash');
@@ -551,6 +584,21 @@ function AppContent() {
             setSearchResultIndex(0);
             return;
         }
+        // Settings: Theme selector
+        if (input === 'T') {
+            onOpenSettings('theme-select');
+            return;
+        }
+        // Settings: Mode selector
+        if (input === 'V') {
+            onOpenSettings('mode-select');
+            return;
+        }
+        // Settings: Language selector
+        if (input === 'L') {
+            onOpenSettings('lang-select');
+            return;
+        }
         // Quit
         if (input === 'q' || (key.ctrl && input === 'c')) {
             exit();
@@ -725,7 +773,7 @@ function AppContent() {
     const tursoEnabled = isTursoEnabled();
     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.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 })] }), _jsx(Box, { marginBottom: 1, children: TABS.map((tab, index) => {
+                                    : (tursoEnabled ? ' [DB]TURSO' : ' [DB]local') })] }), _jsx(Text, { color: theme.colors.textMuted, children: i18n.tui.helpHint })] }), _jsx(Box, { marginBottom: 1, children: TABS.map((tab, index) => {
                     const isActive = index === currentListIndex && mode !== 'project-detail';
                     const count = tasks[tab].length;
                     const label = `${index + 1}:${getTabLabel(tab)}(${count})`;

package/dist/ui/LanguageSelector.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type Locale } from '../config.js';
+interface LanguageSelectorProps {
+    onSelect: (locale: Locale) => void;
+    onCancel: () => void;
+}
+export declare function LanguageSelector({ onSelect, onCancel }: LanguageSelectorProps): React.ReactElement;
+export {};

package/dist/ui/LanguageSelector.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { getLocale } from '../config.js';
+const VALID_LOCALES = ['en', 'ja'];
+const localeDisplayNames = {
+    en: 'English',
+    ja: '日本語 (Japanese)',
+};
+export function LanguageSelector({ onSelect, onCancel }) {
+    const currentLocale = getLocale();
+    const initialIndex = VALID_LOCALES.indexOf(currentLocale);
+    const [selectedIndex, setSelectedIndex] = useState(initialIndex >= 0 ? initialIndex : 0);
+    useInput((input, key) => {
+        if (key.escape) {
+            onCancel();
+            return;
+        }
+        // j or down arrow: move down
+        if (input === 'j' || key.downArrow) {
+            setSelectedIndex((prev) => (prev < VALID_LOCALES.length - 1 ? prev + 1 : 0));
+        }
+        // k or up arrow: move up
+        if (input === 'k' || key.upArrow) {
+            setSelectedIndex((prev) => (prev > 0 ? prev - 1 : VALID_LOCALES.length - 1));
+        }
+        // Enter: select
+        if (key.return) {
+            onSelect(VALID_LOCALES[selectedIndex]);
+        }
+    });
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, children: "Select language / \u8A00\u8A9E\u3092\u9078\u629E:" }), _jsx(Text, { dimColor: true, children: "j/k: select, Enter: confirm, Esc: cancel" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: VALID_LOCALES.map((locale, index) => {
+                    const isSelected = index === selectedIndex;
+                    const isCurrent = locale === currentLocale;
+                    return (_jsx(Box, { children: _jsxs(Text, { color: isSelected ? 'cyan' : undefined, children: [isSelected ? '› ' : '  ', localeDisplayNames[locale], isCurrent ? ' (current)' : ''] }) }, locale));
+                }) })] }));
+}

package/dist/ui/ModeSelector.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { type ViewMode } from '../config.js';
 interface ModeSelectorProps {
     onSelect: (mode: ViewMode) => void;
+    onCancel?: () => void;
 }
-export declare function ModeSelector({ onSelect }: ModeSelectorProps): React.ReactElement;
+export declare function ModeSelector({ onSelect, onCancel }: ModeSelectorProps): React.ReactElement;
 export {};

package/dist/ui/ModeSelector.js

@@ -11,11 +11,15 @@ const modeDescriptions = {
     gtd: 'Classic GTD workflow with Inbox, Next, Waiting, Someday lists',
     kanban: '3-column kanban board view',
 };
-export function ModeSelector({ onSelect }) {
+export function ModeSelector({ onSelect, onCancel }) {
     const currentMode = getViewMode();
     const initialIndex = VALID_VIEW_MODES.indexOf(currentMode);
     const [selectedIndex, setSelectedIndex] = useState(initialIndex >= 0 ? initialIndex : 0);
     useInput((input, key) => {
+        if (key.escape && onCancel) {
+            onCancel();
+            return;
+        }
         // j or down arrow: move down
         if (input === 'j' || key.downArrow) {
             setSelectedIndex((prev) => (prev < VALID_VIEW_MODES.length - 1 ? prev + 1 : 0));
@@ -29,7 +33,7 @@ export function ModeSelector({ onSelect }) {
             onSelect(VALID_VIEW_MODES[selectedIndex]);
         }
     });
-    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, children: "Select a view mode:" }), _jsx(Text, { dimColor: true, children: "j/k: select, Enter: confirm" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: VALID_VIEW_MODES.map((mode, index) => {
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, children: "Select a view mode:" }), _jsx(Text, { dimColor: true, children: "j/k: select, Enter: confirm, Esc: cancel" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: VALID_VIEW_MODES.map((mode, index) => {
                     const isSelected = index === selectedIndex;
                     const isCurrent = mode === currentMode;
                     return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { color: isSelected ? 'cyan' : undefined, children: [isSelected ? '› ' : '  ', modeDisplayNames[mode], isCurrent ? ' (current)' : ''] }), _jsxs(Text, { dimColor: true, children: ['    ', modeDescriptions[mode]] })] }, mode));

package/dist/ui/ThemeSelector.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import type { ThemeName } from './theme/types.js';
 interface ThemeSelectorProps {
     onSelect: (theme: ThemeName) => void;
+    onCancel?: () => void;
 }
-export declare function ThemeSelector({ onSelect }: ThemeSelectorProps): React.ReactElement;
+export declare function ThemeSelector({ onSelect, onCancel }: ThemeSelectorProps): React.ReactElement;
 export {};

package/dist/ui/ThemeSelector.js

@@ -3,11 +3,15 @@ import { useState } from 'react';
 import { Box, Text, useInput } from 'ink';
 import { themes, VALID_THEMES } from './theme/themes.js';
 import { getThemeName } from '../config.js';
-export function ThemeSelector({ onSelect }) {
+export function ThemeSelector({ onSelect, onCancel }) {
     const currentTheme = getThemeName();
     const initialIndex = VALID_THEMES.indexOf(currentTheme);
     const [selectedIndex, setSelectedIndex] = useState(initialIndex >= 0 ? initialIndex : 0);
     useInput((input, key) => {
+        if (key.escape && onCancel) {
+            onCancel();
+            return;
+        }
         // j or down arrow: move down
         if (input === 'j' || key.downArrow) {
             setSelectedIndex((prev) => (prev < VALID_THEMES.length - 1 ? prev + 1 : 0));
@@ -21,7 +25,7 @@ export function ThemeSelector({ onSelect }) {
             onSelect(VALID_THEMES[selectedIndex]);
         }
     });
-    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, children: "Select a theme:" }), _jsx(Text, { dimColor: true, children: "j/k: select, Enter: confirm" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: VALID_THEMES.map((themeName, index) => {
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, children: "Select a theme:" }), _jsx(Text, { dimColor: true, children: "j/k: select, Enter: confirm, Esc: cancel" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: VALID_THEMES.map((themeName, index) => {
                     const theme = themes[themeName];
                     const isSelected = index === selectedIndex;
                     const isCurrent = themeName === currentTheme;

package/dist/ui/components/HelpModal.js

@@ -99,14 +99,14 @@ 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();

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

@@ -15,7 +15,7 @@ import { useTheme } from '../theme/index.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();
@@ -478,7 +493,7 @@ export function KanbanBoard({ onSwitchToGtd }) {
     const tursoEnabled = isTursoEnabled();
     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) => {
+                                    : (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;

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

@@ -1,4 +1,4 @@
-export type ThemeName = 'modern' | 'norton-commander' | 'dos-prompt' | 'turbo-pascal' | 'classic-mac' | 'apple-ii' | 'commodore-64' | 'amiga-workbench' | 'matrix' | 'amber-crt' | 'phosphor' | 'solarized-dark' | 'solarized-light' | 'synthwave' | 'paper' | 'coffee';
+export type ThemeName = 'modern' | 'norton-commander' | 'dos-prompt' | 'turbo-pascal' | 'classic-mac' | 'apple-ii' | 'commodore-64' | 'amiga-workbench' | 'matrix' | 'amber-crt' | 'phosphor' | 'solarized-dark' | 'solarized-light' | 'synthwave' | 'paper' | 'coffee' | 'nord' | 'dracula' | 'monokai' | 'gruvbox' | 'tokyo-night' | 'catppuccin' | 'ocean' | 'sakura' | 'msx' | 'pc-98';
 export type BorderStyleType = 'single' | 'double' | 'round' | 'bold' | 'singleDouble' | 'doubleSingle' | 'classic';
 export interface ThemeColors {
     primary: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "floq",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Floq - Getting Things Done Task Manager with MS-DOS style themes",
   "type": "module",
   "main": "dist/index.js",