floq 0.5.0 → 0.6.0

package/dist/ui/components/KanbanDQ.js

@@ -0,0 +1,470 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect, useCallback } from 'react';
+import { Box, Text, useInput, useApp, useStdout } from 'ink';
+import TextInput from 'ink-text-input';
+import { eq, and, inArray, gte } from 'drizzle-orm';
+import { v4 as uuidv4 } from 'uuid';
+import { getDb, schema } from '../../db/index.js';
+import { t, fmt } from '../../i18n/index.js';
+import { useTheme } from '../theme/index.js';
+import { isTursoEnabled, getContexts, addContext } from '../../config.js';
+import { VERSION } from '../../version.js';
+import { useHistory, CreateTaskCommand, MoveTaskCommand, } from '../history/index.js';
+import { SearchBar } from './SearchBar.js';
+import { SearchResults } from './SearchResults.js';
+import { HelpModal } from './HelpModal.js';
+// Round border characters
+const BORDER = {
+    topLeft: '╭',
+    topRight: '╮',
+    bottomLeft: '╰',
+    bottomRight: '╯',
+    horizontal: '─',
+    vertical: '│',
+};
+const SHADOW = '░';
+function getDisplayWidth(str) {
+    let width = 0;
+    for (const char of str) {
+        const code = char.charCodeAt(0);
+        if ((code >= 0x1100 && code <= 0x115F) ||
+            (code >= 0x2E80 && code <= 0x9FFF) ||
+            (code >= 0xAC00 && code <= 0xD7AF) ||
+            (code >= 0xF900 && code <= 0xFAFF) ||
+            (code >= 0xFE10 && code <= 0xFE1F) ||
+            (code >= 0xFE30 && code <= 0xFE6F) ||
+            (code >= 0xFF00 && code <= 0xFF60) ||
+            (code >= 0xFFE0 && code <= 0xFFE6) ||
+            (code >= 0x20000 && code <= 0x2FFFF)) {
+            width += 2;
+        }
+        else {
+            width += 1;
+        }
+    }
+    return width;
+}
+function TitledBoxInline({ title, children, width, minHeight = 1, isActive = false, showShadow = true, }) {
+    const theme = useTheme();
+    const color = isActive ? theme.colors.borderActive : theme.colors.border;
+    const shadowColor = theme.colors.muted;
+    const innerWidth = width - 2;
+    const titleLength = getDisplayWidth(title);
+    const leftDashes = 3;
+    const titlePadding = 2;
+    const rightDashes = Math.max(0, innerWidth - leftDashes - titlePadding - titleLength);
+    const childArray = React.Children.toArray(children);
+    const contentRows = childArray.length || 1;
+    const emptyRowsNeeded = Math.max(0, minHeight - contentRows);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: color, children: BORDER.topLeft }), _jsxs(Text, { color: color, children: [BORDER.horizontal.repeat(leftDashes), " "] }), _jsx(Text, { color: theme.colors.accent, bold: true, children: title }), _jsxs(Text, { color: color, children: [" ", BORDER.horizontal.repeat(rightDashes)] }), _jsx(Text, { color: color, children: BORDER.topRight }), showShadow && _jsx(Text, { children: " " })] }), childArray.length > 0 ? (childArray.map((child, i) => (_jsxs(Box, { children: [_jsx(Text, { color: color, children: BORDER.vertical }), _jsx(Box, { width: innerWidth, paddingX: 1, children: _jsx(Box, { flexGrow: 1, children: child }) }), _jsx(Text, { color: color, children: BORDER.vertical }), showShadow && _jsx(Text, { color: shadowColor, children: SHADOW })] }, i)))) : (_jsxs(Box, { children: [_jsx(Text, { color: color, children: BORDER.vertical }), _jsx(Box, { width: innerWidth, children: _jsx(Text, { children: " " }) }), _jsx(Text, { color: color, children: BORDER.vertical }), showShadow && _jsx(Text, { color: shadowColor, children: SHADOW })] })), Array.from({ length: emptyRowsNeeded }).map((_, i) => (_jsxs(Box, { children: [_jsx(Text, { color: color, children: BORDER.vertical }), _jsx(Box, { width: innerWidth, children: _jsx(Text, { children: " " }) }), _jsx(Text, { color: color, children: BORDER.vertical }), showShadow && _jsx(Text, { color: shadowColor, children: SHADOW })] }, `empty-${i}`))), _jsxs(Box, { children: [_jsx(Text, { color: color, children: BORDER.bottomLeft }), _jsx(Text, { color: color, children: BORDER.horizontal.repeat(innerWidth) }), _jsx(Text, { color: color, children: BORDER.bottomRight }), showShadow && _jsx(Text, { color: shadowColor, children: SHADOW })] }), showShadow && (_jsx(Box, { children: _jsxs(Text, { color: shadowColor, children: [" ", SHADOW.repeat(width)] }) }))] }));
+}
+const CATEGORIES = ['todo', 'doing', 'done'];
+export function KanbanDQ({ onOpenSettings }) {
+    const theme = useTheme();
+    const { exit } = useApp();
+    const { stdout } = useStdout();
+    const history = useHistory();
+    const i18n = t();
+    const [mode, setMode] = useState('normal');
+    const [paneFocus, setPaneFocus] = useState('category');
+    const [selectedCategory, setSelectedCategory] = useState('todo');
+    const [selectedTaskIndex, setSelectedTaskIndex] = useState(0);
+    const [tasks, setTasks] = useState({
+        todo: [],
+        doing: [],
+        done: [],
+    });
+    const [message, setMessage] = useState(null);
+    const [inputValue, setInputValue] = useState('');
+    const [selectedTask, setSelectedTask] = useState(null);
+    const [taskComments, setTaskComments] = useState([]);
+    const [selectedCommentIndex, setSelectedCommentIndex] = useState(0);
+    const [contextFilter, setContextFilter] = useState(null);
+    const [contextSelectIndex, setContextSelectIndex] = useState(0);
+    const [availableContexts, setAvailableContexts] = useState([]);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [searchResults, setSearchResults] = useState([]);
+    const [searchResultIndex, setSearchResultIndex] = useState(0);
+    const terminalWidth = stdout?.columns || 80;
+    const leftPaneWidth = 20;
+    const rightPaneWidth = terminalWidth - leftPaneWidth - 6;
+    const loadTasks = useCallback(async () => {
+        const db = getDb();
+        const filterByContext = (taskList) => {
+            if (contextFilter === null)
+                return taskList;
+            if (contextFilter === '')
+                return taskList.filter(t => !t.context);
+            return taskList.filter(t => t.context === contextFilter);
+        };
+        let todoTasks = await db
+            .select()
+            .from(schema.tasks)
+            .where(and(inArray(schema.tasks.status, ['inbox', 'someday']), eq(schema.tasks.isProject, false)));
+        let doingTasks = await db
+            .select()
+            .from(schema.tasks)
+            .where(and(inArray(schema.tasks.status, ['next', 'waiting']), eq(schema.tasks.isProject, false)));
+        const oneWeekAgo = new Date();
+        oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
+        let doneTasks = await db
+            .select()
+            .from(schema.tasks)
+            .where(and(eq(schema.tasks.status, 'done'), eq(schema.tasks.isProject, false), gte(schema.tasks.updatedAt, oneWeekAgo)));
+        setTasks({
+            todo: filterByContext(todoTasks),
+            doing: filterByContext(doingTasks),
+            done: filterByContext(doneTasks),
+        });
+        setAvailableContexts(getContexts());
+    }, [contextFilter]);
+    const loadTaskComments = useCallback(async (taskId) => {
+        const db = getDb();
+        const comments = await db
+            .select()
+            .from(schema.comments)
+            .where(eq(schema.comments.taskId, taskId));
+        setTaskComments(comments);
+    }, []);
+    // Get all tasks for search (across all categories)
+    const getAllTasks = useCallback(() => {
+        const allTasks = [];
+        for (const cat of CATEGORIES) {
+            allTasks.push(...tasks[cat]);
+        }
+        return allTasks;
+    }, [tasks]);
+    // Search tasks by query
+    const searchTasks = useCallback((query) => {
+        if (!query.trim())
+            return [];
+        const lowerQuery = query.toLowerCase();
+        const allTasks = getAllTasks();
+        return allTasks.filter(task => task.title.toLowerCase().includes(lowerQuery) ||
+            (task.description && task.description.toLowerCase().includes(lowerQuery)));
+    }, [getAllTasks]);
+    // Handle search query change
+    const handleSearchChange = useCallback((value) => {
+        setSearchQuery(value);
+        const results = searchTasks(value);
+        setSearchResults(results);
+        setSearchResultIndex(0);
+    }, [searchTasks]);
+    // Get kanban category from task status
+    const getKanbanCategory = (status) => {
+        if (status === 'inbox' || status === 'someday')
+            return 'todo';
+        if (status === 'next' || status === 'waiting')
+            return 'doing';
+        return 'done';
+    };
+    // Navigate to a task from search results
+    const navigateToTask = useCallback((task) => {
+        const targetCategory = getKanbanCategory(task.status);
+        const categoryTasks = tasks[targetCategory];
+        const taskIndex = categoryTasks.findIndex(t => t.id === task.id);
+        if (taskIndex >= 0) {
+            setSelectedCategory(targetCategory);
+            setSelectedTaskIndex(taskIndex);
+            setPaneFocus('tasks');
+            setMode('normal');
+        }
+    }, [tasks]);
+    useEffect(() => {
+        loadTasks();
+    }, [loadTasks]);
+    const currentTasks = tasks[selectedCategory];
+    const getCategoryLabel = (cat) => {
+        return i18n.kanban[cat];
+    };
+    const addTask = useCallback(async (title, context) => {
+        if (!title.trim())
+            return;
+        const now = new Date();
+        const taskId = uuidv4();
+        const command = new CreateTaskCommand({
+            task: {
+                id: taskId,
+                title: title.trim(),
+                status: 'inbox',
+                context: context || null,
+                createdAt: now,
+                updatedAt: now,
+            },
+            description: fmt(i18n.tui.added, { title: title.trim() }),
+        });
+        await history.execute(command);
+        setMessage(fmt(i18n.tui.added, { title: title.trim() }));
+        await loadTasks();
+    }, [i18n.tui.added, loadTasks, history]);
+    const moveTaskRight = useCallback(async (task) => {
+        let newStatus;
+        if (task.status === 'inbox' || task.status === 'someday') {
+            newStatus = 'next';
+        }
+        else if (task.status === 'next' || task.status === 'waiting') {
+            newStatus = 'done';
+        }
+        else {
+            return;
+        }
+        const command = new MoveTaskCommand({
+            taskId: task.id,
+            fromStatus: task.status,
+            toStatus: newStatus,
+            fromWaitingFor: task.waitingFor,
+            toWaitingFor: null,
+            description: fmt(i18n.tui.movedTo, { title: task.title, status: i18n.status[newStatus] }),
+        });
+        await history.execute(command);
+        setMessage(fmt(i18n.tui.movedTo, { title: task.title, status: i18n.status[newStatus] }));
+        await loadTasks();
+    }, [i18n.tui.movedTo, i18n.status, loadTasks, history]);
+    const markTaskDone = useCallback(async (task) => {
+        const command = new MoveTaskCommand({
+            taskId: task.id,
+            fromStatus: task.status,
+            toStatus: 'done',
+            fromWaitingFor: task.waitingFor,
+            toWaitingFor: null,
+            description: fmt(i18n.tui.completed, { title: task.title }),
+        });
+        await history.execute(command);
+        setMessage(fmt(i18n.tui.completed, { title: task.title }));
+        await loadTasks();
+    }, [i18n.tui.completed, loadTasks, history]);
+    const handleInputSubmit = async (value) => {
+        // Handle search mode submit
+        if (mode === 'search') {
+            if (searchResults.length > 0) {
+                const task = searchResults[searchResultIndex];
+                navigateToTask(task);
+            }
+            else {
+                setMode('normal');
+            }
+            setSearchQuery('');
+            setSearchResults([]);
+            setSearchResultIndex(0);
+            return;
+        }
+        if (mode === 'add') {
+            if (value.trim()) {
+                await addTask(value, contextFilter && contextFilter !== '' ? contextFilter : null);
+            }
+            setInputValue('');
+            setMode('normal');
+            return;
+        }
+        if (mode === 'add-context') {
+            if (value.trim()) {
+                const newContext = value.trim().toLowerCase().replace(/^@/, '');
+                addContext(newContext);
+                setAvailableContexts(getContexts());
+            }
+            setInputValue('');
+            setContextSelectIndex(0);
+            setMode('normal');
+            return;
+        }
+    };
+    useInput((input, key) => {
+        // Handle help mode - let HelpModal handle its own input
+        if (mode === 'help') {
+            return;
+        }
+        if (mode === 'add' || mode === 'add-comment' || mode === 'add-context') {
+            if (key.escape) {
+                setInputValue('');
+                setMode('normal');
+            }
+            return;
+        }
+        // Handle search mode
+        if (mode === 'search') {
+            if (key.escape) {
+                setSearchQuery('');
+                setSearchResults([]);
+                setSearchResultIndex(0);
+                setMode('normal');
+                return;
+            }
+            // Navigate search results with arrow keys, Ctrl+j/k, or Ctrl+n/p
+            if (key.downArrow || (key.ctrl && (input === 'j' || input === 'n'))) {
+                setSearchResultIndex((prev) => prev < searchResults.length - 1 ? prev + 1 : 0);
+                return;
+            }
+            if (key.upArrow || (key.ctrl && (input === 'k' || input === 'p'))) {
+                setSearchResultIndex((prev) => prev > 0 ? prev - 1 : Math.max(0, searchResults.length - 1));
+                return;
+            }
+            // Let TextInput handle other keys
+            return;
+        }
+        if (mode === 'context-filter') {
+            if (key.escape) {
+                setContextSelectIndex(0);
+                setMode('normal');
+                return;
+            }
+            const contextOptions = ['all', 'none', ...availableContexts];
+            if (key.upArrow || input === 'k') {
+                setContextSelectIndex((prev) => (prev > 0 ? prev - 1 : contextOptions.length - 1));
+                return;
+            }
+            if (key.downArrow || input === 'j') {
+                setContextSelectIndex((prev) => (prev < contextOptions.length - 1 ? prev + 1 : 0));
+                return;
+            }
+            if (key.return) {
+                const selected = contextOptions[contextSelectIndex];
+                if (selected === 'all') {
+                    setContextFilter(null);
+                }
+                else if (selected === 'none') {
+                    setContextFilter('');
+                }
+                else {
+                    setContextFilter(selected);
+                }
+                setContextSelectIndex(0);
+                setMode('normal');
+                return;
+            }
+            return;
+        }
+        if (message)
+            setMessage(null);
+        // Quit
+        if (input === 'q' || (key.ctrl && input === 'c')) {
+            exit();
+            return;
+        }
+        // Help
+        if (input === '?') {
+            setMode('help');
+            return;
+        }
+        // Add task
+        if (input === 'a') {
+            setMode('add');
+            return;
+        }
+        // Context filter
+        if (input === '@') {
+            setContextSelectIndex(0);
+            setMode('context-filter');
+            return;
+        }
+        // Search
+        if (input === '/') {
+            setMode('search');
+            return;
+        }
+        // Settings
+        if (input === 'T' && onOpenSettings) {
+            onOpenSettings('theme-select');
+            return;
+        }
+        if (input === 'V' && onOpenSettings) {
+            onOpenSettings('mode-select');
+            return;
+        }
+        if (input === 'L' && onOpenSettings) {
+            onOpenSettings('lang-select');
+            return;
+        }
+        // Navigation
+        if (paneFocus === 'category') {
+            if (key.upArrow || input === 'k') {
+                const idx = CATEGORIES.indexOf(selectedCategory);
+                setSelectedCategory(CATEGORIES[idx > 0 ? idx - 1 : CATEGORIES.length - 1]);
+                setSelectedTaskIndex(0);
+                return;
+            }
+            if (key.downArrow || input === 'j') {
+                const idx = CATEGORIES.indexOf(selectedCategory);
+                setSelectedCategory(CATEGORIES[idx < CATEGORIES.length - 1 ? idx + 1 : 0]);
+                setSelectedTaskIndex(0);
+                return;
+            }
+            if (key.rightArrow || input === 'l' || key.return) {
+                if (currentTasks.length > 0) {
+                    setPaneFocus('tasks');
+                }
+                return;
+            }
+        }
+        if (paneFocus === 'tasks') {
+            if (key.escape || key.leftArrow || input === 'h') {
+                setPaneFocus('category');
+                return;
+            }
+            if (key.upArrow || input === 'k') {
+                setSelectedTaskIndex((prev) => (prev > 0 ? prev - 1 : currentTasks.length - 1));
+                return;
+            }
+            if (key.downArrow || input === 'j') {
+                setSelectedTaskIndex((prev) => (prev < currentTasks.length - 1 ? prev + 1 : 0));
+                return;
+            }
+            // Mark done
+            if (input === 'd' && currentTasks.length > 0) {
+                const task = currentTasks[selectedTaskIndex];
+                markTaskDone(task).then(() => {
+                    if (selectedTaskIndex >= currentTasks.length - 1) {
+                        setSelectedTaskIndex(Math.max(0, selectedTaskIndex - 1));
+                    }
+                });
+                return;
+            }
+            // Move right
+            if (input === 'm' && currentTasks.length > 0 && selectedCategory !== 'done') {
+                const task = currentTasks[selectedTaskIndex];
+                moveTaskRight(task).then(() => {
+                    if (selectedTaskIndex >= currentTasks.length - 1) {
+                        setSelectedTaskIndex(Math.max(0, selectedTaskIndex - 1));
+                    }
+                });
+                return;
+            }
+            // Undo
+            if (input === 'u') {
+                history.undo().then((didUndo) => {
+                    if (didUndo) {
+                        setMessage(fmt(i18n.tui.undone, { action: history.undoDescription || '' }));
+                        loadTasks();
+                    }
+                    else {
+                        setMessage(i18n.tui.nothingToUndo);
+                    }
+                });
+                return;
+            }
+        }
+        // Refresh
+        if (input === 'r' && !key.ctrl) {
+            loadTasks();
+            setMessage(i18n.tui.refreshed);
+            return;
+        }
+    });
+    const tursoEnabled = isTursoEnabled();
+    // Help modal overlay
+    if (mode === 'help') {
+        return (_jsx(Box, { flexDirection: "column", padding: 1, children: _jsx(HelpModal, { onClose: () => setMode('normal'), isKanban: true }) }));
+    }
+    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: "FLOQ" }), _jsx(Text, { color: theme.colors.accent, children: " [KANBAN]" }), _jsxs(Text, { color: theme.colors.textMuted, children: [" v", VERSION] }), _jsx(Text, { color: tursoEnabled ? theme.colors.accent : theme.colors.textMuted, children: tursoEnabled ? ' [TURSO]' : ' [LOCAL]' }), contextFilter !== null && (_jsxs(Text, { color: theme.colors.accent, children: [' ', "@", contextFilter === '' ? 'none' : contextFilter] }))] }), _jsx(Text, { color: theme.colors.textMuted, children: "?=help q=quit" })] }), mode === 'context-filter' ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: theme.colors.secondary, bold: true, children: "Filter by context" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: ['all', 'none', ...availableContexts].map((ctx, index) => {
+                            const label = ctx === 'all' ? 'All' : ctx === 'none' ? 'No context' : `@${ctx}`;
+                            return (_jsxs(Text, { color: index === contextSelectIndex ? theme.colors.textSelected : theme.colors.text, bold: index === contextSelectIndex, children: [index === contextSelectIndex ? '▶ ' : '  ', label] }, ctx));
+                        }) })] })) : (_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { marginRight: 2, children: _jsx(TitledBoxInline, { title: 'カテゴリ', width: leftPaneWidth, minHeight: 5, isActive: paneFocus === 'category', children: CATEGORIES.map((cat) => {
+                                const isSelected = cat === selectedCategory;
+                                const count = tasks[cat].length;
+                                return (_jsxs(Text, { color: isSelected && paneFocus === 'category' ? theme.colors.textSelected : theme.colors.text, bold: isSelected, children: [isSelected ? '▶ ' : '  ', getCategoryLabel(cat), " (", count, ")"] }, cat));
+                            }) }) }), _jsx(Box, { flexGrow: 1, children: _jsx(TitledBoxInline, { title: getCategoryLabel(selectedCategory), width: rightPaneWidth, minHeight: 10, isActive: paneFocus === 'tasks', children: currentTasks.length === 0 ? (_jsx(Text, { color: theme.colors.textMuted, italic: true, children: i18n.tui.noTasks })) : (currentTasks.map((task, index) => {
+                                const isSelected = paneFocus === 'tasks' && index === selectedTaskIndex;
+                                return (_jsxs(Text, { color: isSelected ? theme.colors.textSelected : theme.colors.text, bold: isSelected, children: [isSelected ? '▶ ' : '  ', task.title, task.context && _jsxs(Text, { color: theme.colors.muted, children: [" @", task.context] })] }, task.id));
+                            })) }) })] })), 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 })] })), mode === 'search' && (_jsx(SearchBar, { value: searchQuery, onChange: handleSearchChange, onSubmit: handleInputSubmit })), mode === 'search' && searchQuery && (_jsx(SearchResults, { results: searchResults, selectedIndex: searchResultIndex, query: searchQuery, viewMode: "kanban" })), message && mode === 'normal' && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.colors.textHighlight, children: message }) })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.colors.textMuted, children: paneFocus === 'category'
+                        ? 'j/k=select l/Enter=tasks a=add @=filter /=search'
+                        : 'j/k=select h/Esc=back d=done m=move a=add u=undo /=search' }) })] }));
+}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+interface TitledBoxProps {
+    title?: string;
+    children: React.ReactNode;
+    borderColor?: string;
+    minHeight?: number;
+    paddingX?: number;
+    showShadow?: boolean;
+}
+export declare function TitledBox({ title, children, borderColor, minHeight, paddingX, showShadow, }: TitledBoxProps): React.ReactElement;
+export {};

package/dist/ui/components/TitledBox.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Text, useStdout } from 'ink';
+import { useTheme } from '../theme/index.js';
+// Round border characters (DQ style)
+const BORDER = {
+    topLeft: '╭',
+    topRight: '╮',
+    bottomLeft: '╰',
+    bottomRight: '╯',
+    horizontal: '─',
+    vertical: '│',
+};
+// Shadow character
+const SHADOW = '░';
+// Calculate display width of string (full-width chars = 2, half-width = 1)
+function getDisplayWidth(str) {
+    let width = 0;
+    for (const char of str) {
+        const code = char.charCodeAt(0);
+        // Full-width characters: CJK, full-width forms, etc.
+        if ((code >= 0x1100 && code <= 0x115F) || // Hangul Jamo
+            (code >= 0x2E80 && code <= 0x9FFF) || // CJK
+            (code >= 0xAC00 && code <= 0xD7AF) || // Hangul Syllables
+            (code >= 0xF900 && code <= 0xFAFF) || // CJK Compatibility
+            (code >= 0xFE10 && code <= 0xFE1F) || // Vertical forms
+            (code >= 0xFE30 && code <= 0xFE6F) || // CJK Compatibility Forms
+            (code >= 0xFF00 && code <= 0xFF60) || // Full-width forms
+            (code >= 0xFFE0 && code <= 0xFFE6) || // Full-width symbols
+            (code >= 0x20000 && code <= 0x2FFFF) // CJK Extension B+
+        ) {
+            width += 2;
+        }
+        else {
+            width += 1;
+        }
+    }
+    return width;
+}
+export function TitledBox({ title, children, borderColor, minHeight = 1, paddingX = 1, showShadow = true, }) {
+    const theme = useTheme();
+    const { stdout } = useStdout();
+    const color = borderColor || theme.colors.border;
+    const shadowColor = theme.colors.muted;
+    // Get terminal width, account for outer padding and shadow
+    const terminalWidth = stdout?.columns || 80;
+    const shadowWidth = showShadow ? 1 : 0;
+    const boxWidth = terminalWidth - 2 - shadowWidth; // Outer padding + shadow
+    const innerWidth = boxWidth - 2; // Subtract left and right border characters
+    // Calculate title section widths
+    const titleText = title || '';
+    const titleLength = getDisplayWidth(titleText);
+    // Title format: "─── Title ─────..."
+    const leftDashes = 3;
+    const titlePadding = titleLength > 0 ? 2 : 0; // spaces around title
+    const rightDashes = innerWidth - leftDashes - titlePadding - titleLength;
+    // Convert children to array for proper rendering
+    const childArray = React.Children.toArray(children);
+    const hasContent = childArray.length > 0 && childArray.some(child => child !== null && child !== undefined);
+    // Calculate how many rows we need
+    const contentRows = hasContent ? childArray.length : 1;
+    const emptyRowsNeeded = Math.max(0, minHeight - contentRows);
+    // Build content rows
+    const contentElements = hasContent ? childArray : [_jsx(Text, { children: " " }, "empty")];
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: color, children: BORDER.topLeft }), titleLength > 0 ? (_jsxs(_Fragment, { children: [_jsxs(Text, { color: color, children: [BORDER.horizontal.repeat(leftDashes), " "] }), _jsx(Text, { color: theme.colors.accent, bold: true, children: titleText }), _jsxs(Text, { color: color, children: [" ", BORDER.horizontal.repeat(Math.max(0, rightDashes))] })] })) : (_jsx(Text, { color: color, children: BORDER.horizontal.repeat(innerWidth) })), _jsx(Text, { color: color, children: BORDER.topRight }), showShadow && _jsx(Text, { children: " " })] }), contentElements.map((child, index) => (_jsxs(Box, { children: [_jsx(Text, { color: color, children: BORDER.vertical }), _jsx(Box, { width: innerWidth, paddingX: paddingX, children: _jsx(Box, { flexGrow: 1, children: child }) }), _jsx(Text, { color: color, children: BORDER.vertical }), showShadow && _jsx(Text, { color: shadowColor, children: SHADOW })] }, index))), Array.from({ length: emptyRowsNeeded }).map((_, index) => (_jsxs(Box, { children: [_jsx(Text, { color: color, children: BORDER.vertical }), _jsx(Text, { children: ' '.repeat(innerWidth) }), _jsx(Text, { color: color, children: BORDER.vertical }), showShadow && _jsx(Text, { color: shadowColor, children: SHADOW })] }, `empty-${index}`))), _jsxs(Box, { children: [_jsx(Text, { color: color, children: BORDER.bottomLeft }), _jsx(Text, { color: color, children: BORDER.horizontal.repeat(innerWidth) }), _jsx(Text, { color: color, children: BORDER.bottomRight }), showShadow && _jsx(Text, { color: shadowColor, children: SHADOW })] }), showShadow && (_jsx(Box, { children: _jsxs(Text, { color: shadowColor, children: [" ", SHADOW.repeat(boxWidth)] }) }))] }));
+}

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

@@ -25,6 +25,7 @@ export declare const oceanTheme: Theme;
 export declare const sakuraTheme: Theme;
 export declare const msxTheme: Theme;
 export declare const pc98Theme: Theme;
+export declare const dragonQuestTheme: 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

@@ -14,7 +14,7 @@ export const modernTheme = {
         statusSomeday: 'magenta',
         statusDone: 'gray',
         text: 'white',
-        textMuted: 'gray',
+        textMuted: '#999999',
         textSelected: 'cyan',
         textHighlight: 'green',
         fnKeyLabel: 'black',
@@ -1001,6 +1001,46 @@ export const pc98Theme = {
         loadingChars: ['●', '○'],
     },
 };
+// Dragon Quest - Classic JRPG style with titled boxes
+export const dragonQuestTheme = {
+    name: 'dragon-quest',
+    displayName: 'Dragon Quest',
+    uiStyle: 'titled-box',
+    colors: {
+        primary: '#ffffff',
+        secondary: '#ffcc00',
+        accent: '#ffcc00',
+        muted: '#666666',
+        border: '#ffffff',
+        borderActive: '#ffcc00',
+        background: '#000080',
+        statusInbox: '#ffffff',
+        statusNext: '#00ff00',
+        statusWaiting: '#ffcc00',
+        statusSomeday: '#00ccff',
+        statusDone: '#888888',
+        text: '#ffffff',
+        textMuted: '#aaaaaa',
+        textSelected: '#ffcc00',
+        textHighlight: '#ffcc00',
+        fnKeyLabel: '#000080',
+        fnKeyText: '#ffffff',
+    },
+    borders: {
+        main: 'round',
+        modal: 'round',
+        list: 'round',
+    },
+    style: {
+        selectedPrefix: '▶ ',
+        unselectedPrefix: '  ',
+        tabActiveInverse: true,
+        tabBrackets: ['「', '」'],
+        headerUppercase: false,
+        showFunctionKeys: false,
+        loadingChars: ['●', '○'],
+    },
+};
 export const themes = {
     'modern': modernTheme,
     'norton-commander': nortonCommanderTheme,
@@ -1028,6 +1068,7 @@ export const themes = {
     'sakura': sakuraTheme,
     'msx': msxTheme,
     'pc-98': pc98Theme,
+    'dragon-quest': dragonQuestTheme,
 };
 export const VALID_THEMES = [
     'modern',
@@ -1056,6 +1097,7 @@ export const VALID_THEMES = [
     'sakura',
     'msx',
     'pc-98',
+    'dragon-quest',
 ];
 export function getTheme(name) {
     return themes[name] || modernTheme;

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

@@ -1,5 +1,6 @@
-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 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' | 'dragon-quest';
 export type BorderStyleType = 'single' | 'double' | 'round' | 'bold' | 'singleDouble' | 'doubleSingle' | 'classic';
+export type UIStyleType = 'default' | 'titled-box';
 export interface ThemeColors {
     primary: string;
     secondary: string;
@@ -40,4 +41,5 @@ export interface Theme {
     colors: ThemeColors;
     borders: ThemeBorders;
     style: ThemeStyle;
+    uiStyle?: UIStyleType;
 }

package/package.json

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