floq 0.4.0 → 0.6.0

package/dist/ui/SplashScreen.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
-import { Box, Text } from 'ink';
+import { Box, Text, useInput } from 'ink';
 import { useTheme } from './theme/index.js';
 import { VERSION } from '../version.js';
+import { t } from '../i18n/index.js';
 const LOGO_MODERN = `
   ███████╗██╗      ██████╗  ██████╗
   ██╔════╝██║     ██╔═══██╗██╔═══██╗
@@ -20,14 +21,88 @@ const LOGO_DOS = `
   ║  ██      ███████  ██████   ██████ ║
   ╚═══════════════════════════════════╝
 `;
+// Dragon Quest style FLOQ logo with wings and sword
+const FLOQ_LOGO = [
+    '                    /\\',
+    '        __         /  \\         __',
+    '       /  \\       / || \\       /  \\',
+    '      / /\\ \\     /  ||  \\     / /\\ \\',
+    '     / /  \\ \\   /   ||   \\   / /  \\ \\',
+    '    / /    \\ \\_/    ||    \\_/ /    \\ \\',
+    '   /_/      \\__/    ||    \\__/      \\_\\',
+    '                    ||',
+    '   =================[##]=================',
+    '',
+    '    ########  ##        ######    ######',
+    '    ##        ##       ##    ##  ##    ##',
+    '    ######    ##       ##    ##  ##    ##',
+    '    ##        ##       ##    ##  ##  # ##',
+    '    ##        ########  ######    #### ##',
+    '',
+    '   =====================================',
+    '          ~ Flow Your Tasks ~',
+];
+// Dragon Quest style border characters
+const DQ_BORDER = {
+    topLeft: '╭',
+    topRight: '╮',
+    bottomLeft: '╰',
+    bottomRight: '╯',
+    horizontal: '─',
+    vertical: '│',
+};
 const TAGLINE = 'Flow your tasks, clear your mind';
-export function SplashScreen({ onComplete, duration = 1500 }) {
+// Dragon Quest famous quotes for splash screen
+const DQ_QUOTES_JA = [
+    'へんじがない。ただのしかばねのようだ。',
+    'おきのどくですが ぼうけんのしょは きえてしまいました。',
+    'レベルがあがった！',
+    'しかし まわりこまれてしまった！',
+    'たたかいに やぶれた...',
+    'どうぐがいっぱいで もてません。',
+    'やくそうを つかった！',
+    'かいしんのいちげき！',
+    'しかし なにも おこらなかった',
+    'そのほうこうには すすめません',
+];
+const DQ_QUOTES_EN = [
+    'No response. It seems to be just a corpse.',
+    'Unfortunately, your adventure log has been erased.',
+    'Level up!',
+    'But you were surrounded!',
+    'You have been defeated...',
+    'Your inventory is full.',
+    'Used an herb!',
+    'Critical hit!',
+    'But nothing happened.',
+    'You cannot go that way.',
+];
+export function SplashScreen({ onComplete, duration = 1500, viewMode = 'gtd' }) {
     const [frame, setFrame] = useState(0);
     const [showTagline, setShowTagline] = useState(false);
+    const [blinkVisible, setBlinkVisible] = useState(true);
     const theme = useTheme();
+    const i18n = t();
+    const isDqStyle = theme.uiStyle === 'titled-box';
     const isDosStyle = theme.name !== 'modern';
     const logo = isDosStyle ? LOGO_DOS : LOGO_MODERN;
     const [filled, empty] = theme.style.loadingChars;
+    // Pick a random quote (stable across re-renders)
+    const [randomQuote] = useState(() => {
+        const isJapanese = i18n.splash?.welcome === 'ようこそ！';
+        const quotes = isJapanese ? DQ_QUOTES_JA : DQ_QUOTES_EN;
+        return quotes[Math.floor(Math.random() * quotes.length)];
+    });
+    // Adventure subtitle based on view mode
+    const adventureSubtitle = viewMode === 'kanban'
+        ? (i18n.splash?.subtitleKanban || 'Kanbanの冒険がはじまる')
+        : (i18n.splash?.subtitle || 'GTDの冒険がはじまる');
+    // Wait for key press mode (duration = -1)
+    const waitForKeyPress = duration < 0;
+    // Handle key press to skip splash
+    useInput(() => {
+        onComplete();
+    });
     useEffect(() => {
         // Animate logo appearance
         const frameInterval = setInterval(() => {
@@ -43,19 +118,43 @@ export function SplashScreen({ onComplete, duration = 1500 }) {
         const taglineTimer = setTimeout(() => {
             setShowTagline(true);
         }, 600);
-        // Complete splash screen
-        const completeTimer = setTimeout(() => {
-            onComplete();
-        }, duration);
+        // Blink effect for DQ style or wait-for-key mode
+        let blinkInterval = null;
+        if (isDqStyle || waitForKeyPress) {
+            blinkInterval = setInterval(() => {
+                setBlinkVisible((prev) => !prev);
+            }, 500);
+        }
+        // Complete splash screen (only if not waiting for key press)
+        let completeTimer = null;
+        if (!waitForKeyPress) {
+            completeTimer = setTimeout(() => {
+                onComplete();
+            }, duration);
+        }
         return () => {
             clearInterval(frameInterval);
             clearTimeout(taglineTimer);
-            clearTimeout(completeTimer);
+            if (completeTimer)
+                clearTimeout(completeTimer);
+            if (blinkInterval)
+                clearInterval(blinkInterval);
         };
-    }, [onComplete, duration]);
+    }, [onComplete, duration, isDqStyle, waitForKeyPress]);
+    // Dragon Quest style splash
+    if (isDqStyle) {
+        const boxWidth = 40;
+        const innerWidth = boxWidth - 2;
+        const title = 'FLOQ';
+        const leftDashes = 3;
+        const rightDashes = innerWidth - leftDashes - title.length - 2;
+        const shadowColor = theme.colors.muted;
+        return (_jsxs(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center", padding: 2, children: [_jsx(Box, { flexDirection: "column", alignItems: "center", marginBottom: 1, children: FLOQ_LOGO.map((line, index) => (_jsx(Text, { color: index === 4 ? theme.colors.text : theme.colors.accent, bold: index === 4, children: line }, index))) }), _jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: theme.colors.border, children: DQ_BORDER.topLeft }), _jsxs(Text, { color: theme.colors.border, children: [DQ_BORDER.horizontal.repeat(leftDashes), " "] }), _jsx(Text, { color: theme.colors.accent, bold: true, children: title }), _jsxs(Text, { color: theme.colors.border, children: [" ", DQ_BORDER.horizontal.repeat(rightDashes)] }), _jsx(Text, { color: theme.colors.border, children: DQ_BORDER.topRight }), _jsx(Text, { children: " " })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.colors.border, children: DQ_BORDER.vertical }), _jsx(Box, { width: innerWidth, justifyContent: "center", children: _jsx(Text, { color: theme.colors.text, children: " " }) }), _jsx(Text, { color: theme.colors.border, children: DQ_BORDER.vertical }), _jsx(Text, { color: shadowColor, children: "\u2591" })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.colors.border, children: DQ_BORDER.vertical }), _jsx(Box, { width: innerWidth, justifyContent: "center", children: _jsx(Text, { color: theme.colors.text, bold: true, children: adventureSubtitle }) }), _jsx(Text, { color: theme.colors.border, children: DQ_BORDER.vertical }), _jsx(Text, { color: shadowColor, children: "\u2591" })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.colors.border, children: DQ_BORDER.vertical }), _jsx(Box, { width: innerWidth, justifyContent: "center", children: _jsx(Text, { color: theme.colors.text, children: " " }) }), _jsx(Text, { color: theme.colors.border, children: DQ_BORDER.vertical }), _jsx(Text, { color: shadowColor, children: "\u2591" })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.colors.border, children: DQ_BORDER.vertical }), _jsx(Box, { width: innerWidth, justifyContent: "center", children: _jsx(Text, { color: theme.colors.textMuted, children: randomQuote }) }), _jsx(Text, { color: theme.colors.border, children: DQ_BORDER.vertical }), _jsx(Text, { color: shadowColor, children: "\u2591" })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.colors.border, children: DQ_BORDER.vertical }), _jsx(Box, { width: innerWidth, justifyContent: "center", children: _jsx(Text, { color: theme.colors.text, children: " " }) }), _jsx(Text, { color: theme.colors.border, children: DQ_BORDER.vertical }), _jsx(Text, { color: shadowColor, children: "\u2591" })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.colors.border, children: DQ_BORDER.vertical }), _jsx(Box, { width: innerWidth, justifyContent: "center", children: _jsx(Text, { color: theme.colors.textMuted, children: blinkVisible ? (i18n.splash?.pressKey || '▼ キーを押してください') : ' ' }) }), _jsx(Text, { color: theme.colors.border, children: DQ_BORDER.vertical }), _jsx(Text, { color: shadowColor, children: "\u2591" })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.colors.border, children: DQ_BORDER.vertical }), _jsx(Box, { width: innerWidth, justifyContent: "center", children: _jsx(Text, { color: theme.colors.text, children: " " }) }), _jsx(Text, { color: theme.colors.border, children: DQ_BORDER.vertical }), _jsx(Text, { color: shadowColor, children: "\u2591" })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.colors.border, children: DQ_BORDER.bottomLeft }), _jsx(Text, { color: theme.colors.border, children: DQ_BORDER.horizontal.repeat(innerWidth) }), _jsx(Text, { color: theme.colors.border, children: DQ_BORDER.bottomRight }), _jsx(Text, { color: shadowColor, children: "\u2591" })] }), _jsxs(Box, { children: [_jsx(Text, { children: " " }), _jsx(Text, { color: shadowColor, children: '░'.repeat(boxWidth) })] })] }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: theme.colors.textMuted, children: ["VER ", VERSION] }) })] }));
+    }
+    // Standard splash (modern / DOS style)
     const logoLines = logo.split('\n');
     const visibleLines = Math.min(Math.floor(frame * logoLines.length / 10), logoLines.length);
-    return (_jsxs(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center", padding: 2, children: [_jsx(Box, { flexDirection: "column", alignItems: "center", children: logoLines.slice(0, visibleLines).map((line, index) => (_jsx(Text, { color: theme.colors.secondary, bold: true, children: line }, index))) }), showTagline && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.colors.textMuted, italic: !isDosStyle, children: isDosStyle ? `[ ${TAGLINE.toUpperCase()} ]` : TAGLINE }) })), _jsx(Box, { marginTop: 2, children: _jsx(Text, { color: theme.colors.primary, children: frame < 10
+    return (_jsxs(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center", padding: 2, children: [_jsx(Box, { flexDirection: "column", alignItems: "center", children: logoLines.slice(0, visibleLines).map((line, index) => (_jsx(Text, { color: theme.colors.secondary, bold: true, children: line }, index))) }), showTagline && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.colors.textMuted, italic: !isDosStyle, children: isDosStyle ? `[ ${TAGLINE.toUpperCase()} ]` : TAGLINE }) })), _jsx(Box, { marginTop: 2, children: waitForKeyPress ? (_jsx(Text, { color: theme.colors.textMuted, children: blinkVisible ? (i18n.splash?.pressKey || '▼ Press any key') : ' ' })) : (_jsx(Text, { color: theme.colors.primary, children: frame < 10
                         ? filled.repeat(frame) + empty.repeat(10 - frame)
-                        : filled.repeat(10) }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: isDosStyle ? theme.colors.textMuted : theme.colors.muted, children: isDosStyle ? `VER ${VERSION}` : `v${VERSION}` }) })] }));
+                        : filled.repeat(10) })) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: isDosStyle ? theme.colors.textMuted : theme.colors.muted, children: isDosStyle ? `VER ${VERSION}` : `v${VERSION}` }) })] }));
 }

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

@@ -0,0 +1,36 @@
+import React from 'react';
+interface DQLayoutProps {
+    title: string;
+    subtitle?: string;
+    menuTitle: string;
+    menuItems: Array<{
+        label: string;
+        count?: number;
+        isActive: boolean;
+    }>;
+    onMenuSelect?: (index: number) => void;
+    contentTitle: string;
+    children: React.ReactNode;
+    statusTitle?: string;
+    statusItems?: Array<{
+        label: string;
+        value: string;
+    }>;
+    footer?: string;
+}
+/**
+ * Dragon Quest style multi-window layout
+ *
+ * ╭────────────────────────────────────────────╮
+ * │           FLOQ - GTD Manager               │
+ * ╰────────────────────────────────────────────╯
+ * ╭─ コマンド ─╮  ╭─ Inbox ──────────────────────╮
+ * │ ▶ Inbox   │  │ ▶ タスク1                    │
+ * │   次      │  │   タスク2                    │
+ * │   待ち    │  │   タスク3                    │
+ * │   いつか  │  ╰────────────────────────────────╯
+ * │   完了    │
+ * ╰───────────╯
+ */
+export declare function DQLayout({ title, subtitle, menuTitle, menuItems, contentTitle, children, statusTitle, statusItems, footer, }: DQLayoutProps): React.ReactElement;
+export {};

package/dist/ui/components/DQLayout.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useTheme } from '../theme/index.js';
+/**
+ * Dragon Quest style multi-window layout
+ *
+ * ╭────────────────────────────────────────────╮
+ * │           FLOQ - GTD Manager               │
+ * ╰────────────────────────────────────────────╯
+ * ╭─ コマンド ─╮  ╭─ Inbox ──────────────────────╮
+ * │ ▶ Inbox   │  │ ▶ タスク1                    │
+ * │   次      │  │   タスク2                    │
+ * │   待ち    │  │   タスク3                    │
+ * │   いつか  │  ╰────────────────────────────────╯
+ * │   完了    │
+ * ╰───────────╯
+ */
+export function DQLayout({ title, subtitle, menuTitle, menuItems, contentTitle, children, statusTitle, statusItems, footer, }) {
+    const theme = useTheme();
+    const borderColor = theme.colors.border;
+    const activeColor = theme.colors.borderActive;
+    // Render a window with title on border
+    const renderWindow = (windowTitle, content, options = {}) => {
+        const { width, minHeight = 3, active = false, flexGrow } = options;
+        const color = active ? activeColor : borderColor;
+        const titleDisplay = ` ${windowTitle} `;
+        const minW = width || 20;
+        return (_jsxs(Box, { flexDirection: "column", width: width, minHeight: minHeight, flexGrow: flexGrow, children: [_jsxs(Box, { children: [_jsx(Text, { color: color, children: "\u256D\u2500\u2500" }), _jsx(Text, { color: theme.colors.text, bold: true, children: titleDisplay }), _jsxs(Text, { color: color, children: ['─'.repeat(Math.max(minW - titleDisplay.length - 6, 2)), "\u256E"] })] }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: _jsxs(Box, { flexDirection: "row", flexGrow: 1, children: [_jsx(Text, { color: color, children: "\u2502 " }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: content }), _jsx(Text, { color: color, children: " \u2502" })] }) }), _jsx(Box, { children: _jsxs(Text, { color: color, children: ["\u2570", '─'.repeat(Math.max(minW - 2, 2)), "\u256F"] }) })] }));
+    };
+    // Render header window
+    const renderHeader = () => {
+        const headerWidth = 50;
+        const padding = Math.floor((headerWidth - title.length - 4) / 2);
+        return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Box, { children: _jsxs(Text, { color: borderColor, children: ["\u256D", '─'.repeat(headerWidth - 2), "\u256E"] }) }), _jsxs(Box, { children: [_jsx(Text, { color: borderColor, children: "\u2502" }), _jsxs(Text, { color: theme.colors.primary, bold: true, children: [' '.repeat(padding), title, ' '.repeat(padding)] }), _jsx(Text, { color: borderColor, children: "\u2502" })] }), subtitle && (_jsxs(Box, { children: [_jsx(Text, { color: borderColor, children: "\u2502" }), _jsxs(Text, { color: theme.colors.textMuted, children: [' '.repeat(Math.floor((headerWidth - subtitle.length - 4) / 2)), subtitle] }), _jsx(Text, { color: borderColor, children: "\u2502" })] })), _jsx(Box, { children: _jsxs(Text, { color: borderColor, children: ["\u2570", '─'.repeat(headerWidth - 2), "\u256F"] }) })] }));
+    };
+    // Render menu items
+    const renderMenuContent = () => (_jsx(_Fragment, { children: menuItems.map((item, index) => (_jsx(Box, { children: _jsxs(Text, { color: item.isActive ? theme.colors.textSelected : theme.colors.text, bold: item.isActive, children: [item.isActive ? theme.style.selectedPrefix : theme.style.unselectedPrefix, item.label, item.count !== undefined && ` (${item.count})`] }) }, index))) }));
+    // Render status window
+    const renderStatus = () => {
+        if (!statusTitle || !statusItems)
+            return null;
+        return (_jsx(Box, { marginTop: 1, children: renderWindow(statusTitle, _jsx(_Fragment, { children: statusItems.map((item, index) => (_jsxs(Box, { children: [_jsxs(Text, { color: theme.colors.textMuted, children: [item.label, ": "] }), _jsx(Text, { color: theme.colors.accent, children: item.value })] }, index))) }), { width: 20, minHeight: statusItems.length + 2 }) }));
+    };
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [renderHeader(), _jsxs(Box, { flexDirection: "row", children: [_jsxs(Box, { flexDirection: "column", marginRight: 1, children: [renderWindow(menuTitle, renderMenuContent(), {
+                                width: 18,
+                                minHeight: menuItems.length + 2,
+                                active: true,
+                            }), renderStatus()] }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: renderWindow(contentTitle, children, {
+                            minHeight: 12,
+                            active: true,
+                            flexGrow: 1,
+                        }) })] }), footer && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.colors.textMuted, children: footer }) }))] }));
+}

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import type { Task } from '../../db/schema.js';
+import type { ProjectProgress } from './TaskItem.js';
+interface DQTaskListProps {
+    tasks: Task[];
+    selectedIndex: number;
+    emptyMessage: string;
+    showProject?: boolean;
+    getParentProject?: (parentId: string | null) => Task | undefined;
+    projectProgress?: Record<string, ProjectProgress>;
+    isProjectTab?: boolean;
+}
+/**
+ * Dragon Quest style task list inside a window
+ */
+export declare function DQTaskList({ tasks, selectedIndex, emptyMessage, showProject, getParentProject, projectProgress, isProjectTab, }: DQTaskListProps): React.ReactElement;
+interface DQWindowFrameProps {
+    title: string;
+    children: React.ReactNode;
+    width?: number | string;
+    minHeight?: number;
+    active?: boolean;
+    flexGrow?: number;
+}
+/**
+ * Dragon Quest style window frame with title on border
+ */
+export declare function DQWindowFrame({ title, children, width, minHeight, active, flexGrow, }: DQWindowFrameProps): React.ReactElement;
+interface DQMenuProps {
+    title: string;
+    items: Array<{
+        key: string;
+        label: string;
+        count: number;
+        isActive: boolean;
+    }>;
+    width?: number;
+}
+/**
+ * Dragon Quest style menu (left side panel)
+ */
+export declare function DQMenu({ title, items, width }: DQMenuProps): React.ReactElement;
+interface DQHeaderProps {
+    title: string;
+    version: string;
+    dbMode: string;
+    contextFilter?: string | null;
+}
+/**
+ * Dragon Quest style header window
+ */
+export declare function DQHeader({ title, version, dbMode, contextFilter }: DQHeaderProps): React.ReactElement;
+export {};

package/dist/ui/components/DQTaskList.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useTheme } from '../theme/index.js';
+/**
+ * Dragon Quest style task list inside a window
+ */
+export function DQTaskList({ tasks, selectedIndex, emptyMessage, showProject = false, getParentProject, projectProgress, isProjectTab = false, }) {
+    const theme = useTheme();
+    if (tasks.length === 0) {
+        return (_jsx(Text, { color: theme.colors.textMuted, italic: true, children: emptyMessage }));
+    }
+    return (_jsx(_Fragment, { children: tasks.map((task, index) => {
+            const isSelected = index === selectedIndex;
+            const parentProject = showProject && getParentProject ? getParentProject(task.parentId) : undefined;
+            const progress = isProjectTab && projectProgress ? projectProgress[task.id] : undefined;
+            return (_jsx(Box, { flexDirection: "row", children: _jsxs(Text, { color: isSelected ? theme.colors.textSelected : theme.colors.text, bold: isSelected, children: [isSelected ? theme.style.selectedPrefix : theme.style.unselectedPrefix, task.title, task.waitingFor && (_jsxs(Text, { color: theme.colors.statusWaiting, children: [" [", task.waitingFor, "]"] })), task.context && (_jsxs(Text, { color: theme.colors.accent, children: [" @", task.context] })), parentProject && (_jsxs(Text, { color: theme.colors.textMuted, children: [" \u2190 ", parentProject.title] })), progress && (_jsxs(Text, { color: theme.colors.textMuted, children: [" [", progress.completed, "/", progress.total, "]"] }))] }) }, task.id));
+        }) }));
+}
+/**
+ * Dragon Quest style window frame with title on border
+ */
+export function DQWindowFrame({ title, children, width, minHeight = 10, active = false, flexGrow, }) {
+    const theme = useTheme();
+    const borderColor = active ? theme.colors.borderActive : theme.colors.border;
+    const titleText = ` ${title} `;
+    return (_jsxs(Box, { flexDirection: "column", width: width, minHeight: minHeight, flexGrow: flexGrow, children: [_jsxs(Text, { color: borderColor, children: ["\u256D\u2500\u2500", _jsx(Text, { color: theme.colors.text, bold: true, children: titleText }), _jsx(Text, { color: borderColor, children: '─'.repeat(30) })] }), _jsxs(Box, { flexDirection: "row", flexGrow: 1, children: [_jsx(Text, { color: borderColor, children: "\u2502 " }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: children }), _jsx(Text, { color: borderColor, children: " \u2502" })] }), _jsxs(Text, { color: borderColor, children: ["\u2570", '─'.repeat(titleText.length + 32), "\u256F"] })] }));
+}
+/**
+ * Dragon Quest style menu (left side panel)
+ */
+export function DQMenu({ title, items, width = 16 }) {
+    const theme = useTheme();
+    const borderColor = theme.colors.border;
+    const titleText = ` ${title} `;
+    const innerWidth = width - 4;
+    return (_jsxs(Box, { flexDirection: "column", width: width, children: [_jsxs(Text, { color: borderColor, children: ["\u256D\u2500", _jsx(Text, { color: theme.colors.text, bold: true, children: titleText }), _jsxs(Text, { color: borderColor, children: ['─'.repeat(Math.max(innerWidth - titleText.length, 0)), "\u256E"] })] }), items.map((item) => (_jsxs(Box, { children: [_jsx(Text, { color: borderColor, children: "\u2502" }), _jsxs(Text, { color: item.isActive ? theme.colors.textSelected : theme.colors.text, bold: item.isActive, children: [item.isActive ? theme.style.selectedPrefix : theme.style.unselectedPrefix, item.label] }), _jsxs(Text, { color: theme.colors.textMuted, children: ["(", item.count, ")"] }), _jsx(Text, { color: borderColor, children: "\u2502" })] }, item.key))), _jsxs(Text, { color: borderColor, children: ["\u2570", '─'.repeat(innerWidth + 2), "\u256F"] })] }));
+}
+/**
+ * Dragon Quest style header window
+ */
+export function DQHeader({ title, version, dbMode, contextFilter }) {
+    const theme = useTheme();
+    const borderColor = theme.colors.border;
+    const headerText = `${title}  ver.${version}`;
+    const width = 50;
+    const padding = Math.floor((width - headerText.length - 2) / 2);
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { color: borderColor, children: ["\u256D", '─'.repeat(width - 2), "\u256E"] }), _jsxs(Box, { children: [_jsx(Text, { color: borderColor, children: "\u2502" }), _jsxs(Text, { color: theme.colors.primary, bold: true, children: [' '.repeat(padding), headerText, ' '.repeat(padding)] }), _jsx(Text, { color: borderColor, children: "\u2502" })] }), _jsxs(Box, { children: [_jsx(Text, { color: borderColor, children: "\u2502" }), _jsxs(Text, { children: [' '.repeat(Math.floor((width - 20) / 2)), _jsxs(Text, { color: theme.colors.textMuted, children: ["[", dbMode, "]"] }), contextFilter !== null && contextFilter !== undefined && (_jsxs(Text, { color: theme.colors.accent, children: [" @", contextFilter === '' ? 'none' : contextFilter] }))] }), _jsx(Text, { color: borderColor, children: "\u2502" })] }), _jsxs(Text, { color: borderColor, children: ["\u2570", '─'.repeat(width - 2), "\u256F"] })] }));
+}

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

@@ -0,0 +1,19 @@
+import React from 'react';
+interface DQWindowProps {
+    title?: string;
+    children: React.ReactNode;
+    width?: number | string;
+    height?: number | string;
+    minHeight?: number;
+    minWidth?: number;
+    active?: boolean;
+}
+/**
+ * Dragon Quest style window with title on the border
+ *
+ * ╭─ Title ──────────╮
+ * │ Content here     │
+ * ╰──────────────────╯
+ */
+export declare function DQWindow({ title, children, width, height, minHeight, minWidth, active, }: DQWindowProps): React.ReactElement;
+export {};

package/dist/ui/components/DQWindow.js

@@ -0,0 +1,33 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useTheme } from '../theme/index.js';
+/**
+ * Dragon Quest style window with title on the border
+ *
+ * ╭─ Title ──────────╮
+ * │ Content here     │
+ * ╰──────────────────╯
+ */
+export function DQWindow({ title, children, width, height, minHeight, minWidth, active = false, }) {
+    const theme = useTheme();
+    const borderColor = active ? theme.colors.borderActive : theme.colors.border;
+    // Build the top border with title embedded
+    const renderTopBorder = (contentWidth) => {
+        if (!title) {
+            // No title - just return standard corner
+            return null;
+        }
+        const titleText = ` ${title} `;
+        const titleLen = titleText.length;
+        // Calculate dashes needed (minimum 2 on each side of title)
+        const availableWidth = Math.max(contentWidth - titleLen - 4, 0);
+        const leftDashes = 2;
+        const rightDashes = Math.max(availableWidth - leftDashes, 2);
+        return (_jsxs(Box, { children: [_jsxs(Text, { color: borderColor, children: ["\u256D", '─'.repeat(leftDashes)] }), _jsx(Text, { color: theme.colors.text, bold: true, children: titleText }), _jsxs(Text, { color: borderColor, children: ['─'.repeat(rightDashes), "\u256E"] })] }));
+    };
+    const renderBottomBorder = (contentWidth) => {
+        return (_jsx(Box, { children: _jsxs(Text, { color: borderColor, children: ["\u2570", '─'.repeat(contentWidth), "\u256F"] }) }));
+    };
+    // For DQ style, we render custom borders
+    return (_jsxs(Box, { flexDirection: "column", width: width, height: height, minHeight: minHeight, minWidth: minWidth, children: [title && renderTopBorder(typeof minWidth === 'number' ? minWidth - 2 : 20), _jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: borderColor, children: "\u2502" }), _jsx(Box, { flexDirection: "column", flexGrow: 1, paddingX: 1, children: children }), _jsx(Text, { color: borderColor, children: "\u2502" })] }), renderBottomBorder(typeof minWidth === 'number' ? minWidth - 2 : 20)] }));
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+type SettingsMode = 'none' | 'theme-select' | 'mode-select' | 'lang-select';
+interface GtdDQProps {
+    onOpenSettings?: (mode: SettingsMode) => void;
+}
+export declare function GtdDQ({ onOpenSettings }: GtdDQProps): React.ReactElement;
+export {};