floq 0.1.0 → 0.2.0

package/dist/ui/SetupWizard.js

@@ -0,0 +1,321 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Box, Text, useInput, useApp } from 'ink';
+import TextInput from 'ink-text-input';
+import { themes, VALID_THEMES } from './theme/themes.js';
+import { saveConfig } from '../config.js';
+import { t } from '../i18n/index.js';
+const LOCALES = [
+    { value: 'en', label: 'English', desc: 'English language' },
+    { value: 'ja', label: '日本語', desc: 'Japanese language' },
+];
+const VIEW_MODES = [
+    { value: 'gtd', labelKey: 'gtd', descKey: 'gtdDesc' },
+    { value: 'kanban', labelKey: 'kanban', descKey: 'kanbanDesc' },
+];
+const DB_OPTIONS = [
+    { value: 'local', labelKey: 'local', descKey: 'localDesc' },
+    { value: 'turso', labelKey: 'turso', descKey: 'tursoDesc' },
+];
+export function SetupWizard({ onComplete }) {
+    const { exit } = useApp();
+    const [step, setStep] = useState('welcome');
+    const [state, setState] = useState({
+        locale: 'en',
+        theme: 'modern',
+        viewMode: 'gtd',
+        useTurso: false,
+        tursoUrl: '',
+        tursoToken: '',
+    });
+    // Selection indexes for various steps
+    const [languageIndex, setLanguageIndex] = useState(0);
+    const [themeIndex, setThemeIndex] = useState(0);
+    const [viewModeIndex, setViewModeIndex] = useState(0);
+    const [dbIndex, setDbIndex] = useState(0);
+    // Input values for Turso
+    const [inputValue, setInputValue] = useState('');
+    const [inputError, setInputError] = useState(null);
+    // Get translations - use selected locale for setup wizard
+    const [i18n, setI18n] = useState(t());
+    // Update translations when locale changes
+    useEffect(() => {
+        // Re-get translations when state.locale changes
+        // We need to temporarily set the config locale to get correct translations
+        const translations = t();
+        setI18n(translations);
+    }, []);
+    // Get setup translations based on selected locale
+    const getSetupI18n = () => {
+        // Use dynamic import to get correct language translations
+        if (state.locale === 'ja') {
+            return {
+                welcome: {
+                    title: 'Floqへようこそ!',
+                    subtitle: 'タスクマネージャーを設定しましょう',
+                    instruction: '任意のキーを押して設定を開始...',
+                },
+                language: {
+                    title: '言語を選択',
+                    hint: 'j/k: 選択, Enter: 確定, Esc: 戻る',
+                },
+                theme: {
+                    title: 'テーマを選択',
+                    hint: 'j/k: 選択, Enter: 確定, Esc: 戻る',
+                },
+                viewMode: {
+                    title: '表示モードを選択',
+                    hint: 'j/k: 選択, Enter: 確定, Esc: 戻る',
+                    gtd: 'GTD (Getting Things Done)',
+                    gtdDesc: 'Inbox、次のアクション、連絡待ち、いつかやるリストによるクラシックGTDワークフロー',
+                    kanban: 'Kanbanボード',
+                    kanbanDesc: '3カラムのKanbanボード表示',
+                },
+                database: {
+                    title: 'データベースモードを選択',
+                    local: 'ローカル',
+                    localDesc: 'このデバイスにデータをローカル保存',
+                    turso: 'Turso Cloud',
+                    tursoDesc: 'Turso経由でデバイス間でデータを同期',
+                    hint: 'j/k: 選択, Enter: 確定, Esc: 戻る',
+                },
+                turso: {
+                    urlPrompt: 'TursoデータベースURL',
+                    urlPlaceholder: 'libsql://your-db.turso.io',
+                    urlError: 'URLはlibsql://で始まる必要があります',
+                    tokenPrompt: 'Turso認証トークン',
+                    tokenError: 'トークンは空にできません',
+                    inputHint: 'Enter: 確定, Esc: 戻る',
+                },
+                complete: {
+                    title: '設定完了!',
+                    summary: '設定内容:',
+                    language: '言語',
+                    theme: 'テーマ',
+                    viewMode: '表示モード',
+                    database: 'データベース',
+                    confirm: 'Enterを押してFloqを開始...',
+                },
+            };
+        }
+        return i18n.setup;
+    };
+    const setupI18n = getSetupI18n();
+    const handleSave = () => {
+        const tursoConfig = state.useTurso
+            ? { url: state.tursoUrl, authToken: state.tursoToken }
+            : undefined;
+        saveConfig({
+            locale: state.locale,
+            theme: state.theme,
+            viewMode: state.viewMode,
+            turso: tursoConfig,
+        });
+        onComplete();
+    };
+    const goToPrevStep = () => {
+        switch (step) {
+            case 'welcome':
+                exit();
+                break;
+            case 'language':
+                setStep('welcome');
+                break;
+            case 'theme':
+                setStep('language');
+                break;
+            case 'viewMode':
+                setStep('theme');
+                break;
+            case 'database':
+                setStep('viewMode');
+                break;
+            case 'turso-url':
+                setStep('database');
+                setInputValue('');
+                setInputError(null);
+                break;
+            case 'turso-token':
+                setStep('turso-url');
+                setInputValue(state.tursoUrl);
+                setInputError(null);
+                break;
+            case 'complete':
+                setStep('database');
+                break;
+        }
+    };
+    useInput((input, key) => {
+        // Welcome step - any key continues
+        if (step === 'welcome') {
+            if (key.escape) {
+                exit();
+            }
+            else {
+                setStep('language');
+            }
+            return;
+        }
+        // Input steps (turso-url and turso-token)
+        if (step === 'turso-url' || step === 'turso-token') {
+            if (key.escape) {
+                goToPrevStep();
+            }
+            return;
+        }
+        // Complete step - Enter saves
+        if (step === 'complete') {
+            if (key.return) {
+                handleSave();
+            }
+            else if (key.escape) {
+                goToPrevStep();
+            }
+            return;
+        }
+        // Selection steps
+        if (key.escape) {
+            goToPrevStep();
+            return;
+        }
+        // j/k or arrow navigation
+        if (input === 'j' || key.downArrow) {
+            switch (step) {
+                case 'language':
+                    setLanguageIndex((prev) => (prev < LOCALES.length - 1 ? prev + 1 : 0));
+                    break;
+                case 'theme':
+                    setThemeIndex((prev) => (prev < VALID_THEMES.length - 1 ? prev + 1 : 0));
+                    break;
+                case 'viewMode':
+                    setViewModeIndex((prev) => (prev < VIEW_MODES.length - 1 ? prev + 1 : 0));
+                    break;
+                case 'database':
+                    setDbIndex((prev) => (prev < DB_OPTIONS.length - 1 ? prev + 1 : 0));
+                    break;
+            }
+            return;
+        }
+        if (input === 'k' || key.upArrow) {
+            switch (step) {
+                case 'language':
+                    setLanguageIndex((prev) => (prev > 0 ? prev - 1 : LOCALES.length - 1));
+                    break;
+                case 'theme':
+                    setThemeIndex((prev) => (prev > 0 ? prev - 1 : VALID_THEMES.length - 1));
+                    break;
+                case 'viewMode':
+                    setViewModeIndex((prev) => (prev > 0 ? prev - 1 : VIEW_MODES.length - 1));
+                    break;
+                case 'database':
+                    setDbIndex((prev) => (prev > 0 ? prev - 1 : DB_OPTIONS.length - 1));
+                    break;
+            }
+            return;
+        }
+        // Enter to confirm selection
+        if (key.return) {
+            switch (step) {
+                case 'language':
+                    setState((prev) => ({ ...prev, locale: LOCALES[languageIndex].value }));
+                    setStep('theme');
+                    break;
+                case 'theme':
+                    setState((prev) => ({ ...prev, theme: VALID_THEMES[themeIndex] }));
+                    setStep('viewMode');
+                    break;
+                case 'viewMode':
+                    setState((prev) => ({ ...prev, viewMode: VIEW_MODES[viewModeIndex].value }));
+                    setStep('database');
+                    break;
+                case 'database':
+                    const useTurso = DB_OPTIONS[dbIndex].value === 'turso';
+                    setState((prev) => ({ ...prev, useTurso }));
+                    if (useTurso) {
+                        setStep('turso-url');
+                    }
+                    else {
+                        setStep('complete');
+                    }
+                    break;
+            }
+        }
+    });
+    const handleTursoUrlSubmit = (value) => {
+        if (!value.startsWith('libsql://')) {
+            setInputError(setupI18n.turso.urlError);
+            return;
+        }
+        setState((prev) => ({ ...prev, tursoUrl: value }));
+        setInputValue('');
+        setInputError(null);
+        setStep('turso-token');
+    };
+    const handleTursoTokenSubmit = (value) => {
+        if (!value.trim()) {
+            setInputError(setupI18n.turso.tokenError);
+            return;
+        }
+        setState((prev) => ({ ...prev, tursoToken: value.trim() }));
+        setInputValue('');
+        setInputError(null);
+        setStep('complete');
+    };
+    // Render Welcome step
+    if (step === 'welcome') {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, alignItems: "center", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "cyan", children: `
+  ███████╗██╗      ██████╗  ██████╗
+  ██╔════╝██║     ██╔═══██╗██╔═══██╗
+  █████╗  ██║     ██║   ██║██║   ██║
+  ██╔══╝  ██║     ██║   ██║██║▄▄ ██║
+  ██║     ███████╗╚██████╔╝╚██████╔╝
+  ╚═╝     ╚══════╝ ╚═════╝  ╚══▀▀═╝
+            ` }) }), _jsx(Text, { bold: true, color: "green", children: setupI18n.welcome.title }), _jsx(Text, { color: "white", children: setupI18n.welcome.subtitle }), _jsx(Box, { marginTop: 2, children: _jsx(Text, { dimColor: true, children: setupI18n.welcome.instruction }) })] }));
+    }
+    // Render Language selection
+    if (step === 'language') {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: setupI18n.language.title }), _jsx(Text, { dimColor: true, children: setupI18n.language.hint }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: LOCALES.map((locale, index) => {
+                        const isSelected = index === languageIndex;
+                        return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { color: isSelected ? 'cyan' : undefined, children: [isSelected ? '› ' : '  ', locale.label] }), _jsxs(Text, { dimColor: true, children: ["    ", locale.desc] })] }, locale.value));
+                    }) })] }));
+    }
+    // Render Theme selection
+    if (step === 'theme') {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: setupI18n.theme.title }), _jsx(Text, { dimColor: true, children: setupI18n.theme.hint }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: VALID_THEMES.map((themeName, index) => {
+                        const theme = themes[themeName];
+                        const isSelected = index === themeIndex;
+                        return (_jsx(Box, { children: _jsxs(Text, { color: isSelected ? 'cyan' : undefined, children: [isSelected ? '› ' : '  ', theme.displayName] }) }, themeName));
+                    }) })] }));
+    }
+    // Render View Mode selection
+    if (step === 'viewMode') {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: setupI18n.viewMode.title }), _jsx(Text, { dimColor: true, children: setupI18n.viewMode.hint }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: VIEW_MODES.map((mode, index) => {
+                        const isSelected = index === viewModeIndex;
+                        return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { color: isSelected ? 'cyan' : undefined, children: [isSelected ? '› ' : '  ', setupI18n.viewMode[mode.labelKey]] }), _jsxs(Text, { dimColor: true, children: ["    ", setupI18n.viewMode[mode.descKey]] })] }, mode.value));
+                    }) })] }));
+    }
+    // Render Database selection
+    if (step === 'database') {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: setupI18n.database.title }), _jsx(Text, { dimColor: true, children: setupI18n.database.hint }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: DB_OPTIONS.map((option, index) => {
+                        const isSelected = index === dbIndex;
+                        return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { color: isSelected ? 'cyan' : undefined, children: [isSelected ? '› ' : '  ', setupI18n.database[option.labelKey]] }), _jsxs(Text, { dimColor: true, children: ["    ", setupI18n.database[option.descKey]] })] }, option.value));
+                    }) })] }));
+    }
+    // Render Turso URL input
+    if (step === 'turso-url') {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: setupI18n.turso.urlPrompt }), _jsx(Text, { dimColor: true, children: setupI18n.turso.inputHint }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { children: "\u203A " }), _jsx(TextInput, { value: inputValue, onChange: setInputValue, onSubmit: handleTursoUrlSubmit, placeholder: setupI18n.turso.urlPlaceholder })] }), inputError && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "red", children: inputError }) }))] }));
+    }
+    // Render Turso Token input
+    if (step === 'turso-token') {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: setupI18n.turso.tokenPrompt }), _jsx(Text, { dimColor: true, children: setupI18n.turso.inputHint }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { children: "\u203A " }), _jsx(TextInput, { value: inputValue, onChange: setInputValue, onSubmit: handleTursoTokenSubmit, placeholder: "" })] }), inputError && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "red", children: inputError }) }))] }));
+    }
+    // Render Complete step
+    if (step === 'complete') {
+        const selectedTheme = themes[state.theme];
+        const dbLabel = state.useTurso
+            ? `Turso (${state.tursoUrl})`
+            : setupI18n.database.local;
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, color: "green", children: setupI18n.complete.title }), _jsx(Box, { marginTop: 1, marginBottom: 1, children: _jsx(Text, { bold: true, children: setupI18n.complete.summary }) }), _jsxs(Box, { flexDirection: "column", marginLeft: 2, children: [_jsxs(Text, { children: [_jsxs(Text, { color: "cyan", children: [setupI18n.complete.language, ":"] }), " ", LOCALES.find(l => l.value === state.locale)?.label] }), _jsxs(Text, { children: [_jsxs(Text, { color: "cyan", children: [setupI18n.complete.theme, ":"] }), " ", selectedTheme.displayName] }), _jsxs(Text, { children: [_jsxs(Text, { color: "cyan", children: [setupI18n.complete.viewMode, ":"] }), " ", setupI18n.viewMode[state.viewMode === 'gtd' ? 'gtd' : 'kanban']] }), _jsxs(Text, { children: [_jsxs(Text, { color: "cyan", children: [setupI18n.complete.database, ":"] }), " ", dbLabel] })] }), _jsx(Box, { marginTop: 2, children: _jsx(Text, { dimColor: true, children: setupI18n.complete.confirm }) })] }));
+    }
+    return _jsx(Text, { children: "Unknown step" });
+}

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

@@ -1,6 +1,7 @@
 import React from 'react';
 interface HelpModalProps {
     onClose: () => void;
+    isKanban?: boolean;
 }
-export declare function HelpModal({ onClose }: HelpModalProps): React.ReactElement;
+export declare function HelpModal({ onClose, isKanban }: HelpModalProps): React.ReactElement;
 export {};

package/dist/ui/components/HelpModal.js

@@ -1,11 +1,125 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from 'ink';
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import { Box, Text, useInput } from 'ink';
 import { t } from '../../i18n/index.js';
 import { useTheme } from '../theme/index.js';
-export function HelpModal({ onClose }) {
+import { parseChangelog } from '../../changelog.js';
+const VISIBLE_LINES = 12;
+export function HelpModal({ onClose, isKanban = false }) {
+    const [activeTab, setActiveTab] = useState('keybindings');
+    const [scrollOffset, setScrollOffset] = useState(0);
     const i18n = t();
+    const theme = useTheme();
     const help = i18n.tui.help;
+    // Get changelog items for scroll calculation
+    const changelogItems = useMemo(() => {
+        const changelog = parseChangelog();
+        const items = [];
+        for (const entry of changelog.entries.slice(0, 5)) {
+            items.push({ type: 'version', content: entry.version, date: entry.date });
+            for (const section of entry.sections) {
+                items.push({ type: 'section', content: section.type });
+                for (const item of section.items) {
+                    items.push({ type: 'item', content: item });
+                }
+            }
+        }
+        return items;
+    }, []);
+    const maxScroll = Math.max(0, changelogItems.length - VISIBLE_LINES);
+    useInput((input, key) => {
+        // Tab key detection (key.tab or raw tab character)
+        if (key.tab || input === '\t') {
+            setActiveTab(prev => prev === 'keybindings' ? 'whatsNew' : 'keybindings');
+            setScrollOffset(0);
+            return;
+        }
+        // Number keys for direct tab access
+        if (input === '1') {
+            setActiveTab('keybindings');
+            setScrollOffset(0);
+            return;
+        }
+        if (input === '2') {
+            setActiveTab('whatsNew');
+            setScrollOffset(0);
+            return;
+        }
+        // Arrow keys and h/l for tab switching
+        if (input === 'h' || key.leftArrow) {
+            setActiveTab('keybindings');
+            setScrollOffset(0);
+            return;
+        }
+        if (input === 'l' || key.rightArrow) {
+            setActiveTab('whatsNew');
+            setScrollOffset(0);
+            return;
+        }
+        // Scroll in What's New tab
+        if (activeTab === 'whatsNew') {
+            if (input === 'j' || key.downArrow) {
+                setScrollOffset(prev => Math.min(prev + 1, maxScroll));
+                return;
+            }
+            if (input === 'k' || key.upArrow) {
+                setScrollOffset(prev => Math.max(prev - 1, 0));
+                return;
+            }
+        }
+        // Close modal
+        if (key.escape || key.return || input === 'q' || input === ' ') {
+            onClose();
+        }
+    });
+    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
+                        ? `j/k: scroll | ${help.tabHint} | ${help.closeHint}`
+                        : `${help.tabHint} | ${help.closeHint}` }) })] }));
+}
+function GTDKeybindingsContent() {
+    const i18n = t();
+    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] })] })] })] }));
+}
+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] })] })] })] }));
+}
+function WhatsNewContent({ items, scrollOffset, visibleLines, maxScroll }) {
+    const i18n = t();
+    const whatsNew = i18n.tui.whatsNew;
     const theme = useTheme();
     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: _jsx(Text, { bold: true, color: theme.colors.secondary, children: formatTitle(help.title) }) }), _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-5" }), "      ", 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: "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.showHelp] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "q" }), "        ", help.quit] })] })] }), _jsx(Box, { justifyContent: "center", marginTop: 1, children: _jsx(Text, { color: theme.colors.textMuted, children: help.closeHint }) })] }));
+    const getSectionLabel = (type) => {
+        const labels = {
+            Added: whatsNew.added,
+            Changed: whatsNew.changed,
+            Deprecated: whatsNew.deprecated,
+            Removed: whatsNew.removed,
+            Fixed: whatsNew.fixed,
+            Security: whatsNew.security,
+        };
+        return labels[type] || type;
+    };
+    if (items.length === 0) {
+        return (_jsx(Box, { justifyContent: "center", paddingY: 2, children: _jsx(Text, { color: theme.colors.textMuted, children: whatsNew.noChanges }) }));
+    }
+    const visibleItems = items.slice(scrollOffset, scrollOffset + visibleLines);
+    const showScrollUp = scrollOffset > 0;
+    const showScrollDown = scrollOffset < maxScroll;
+    return (_jsxs(Box, { flexDirection: "column", children: [showScrollUp && (_jsx(Text, { color: theme.colors.textMuted, children: "  \u25B2 scroll up" })), visibleItems.map((item, index) => {
+                if (item.type === 'version') {
+                    return (_jsxs(Text, { bold: true, color: theme.colors.accent, children: ["v", item.content, " ", item.date && _jsxs(Text, { color: theme.colors.textMuted, children: ["(", item.date, ")"] })] }, `${item.content}-${index}`));
+                }
+                if (item.type === 'section') {
+                    return (_jsxs(Text, { color: theme.colors.secondary, children: ['  ', formatTitle(getSectionLabel(item.content)), ":"] }, `${item.content}-${index}`));
+                }
+                return (_jsxs(Text, { color: theme.colors.text, children: ['    ', "\u2022 ", item.content] }, `${item.content}-${index}`));
+            }), showScrollDown && (_jsx(Text, { color: theme.colors.textMuted, children: "  \u25BC scroll down" }))] }));
 }

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface KanbanBoardProps {
+    onSwitchToGtd?: () => void;
+}
+export declare function KanbanBoard({ onSwitchToGtd }: KanbanBoardProps): React.ReactElement;
+export {};