epoch-tui 0.1.0

package/dist/App.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const App: React.FC;
+export default App;

package/dist/App.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { ThemeProvider, useTheme } from "./contexts/ThemeContext";
+import { StorageProvider } from "./contexts/StorageContext";
+import { AppProvider, useApp } from "./contexts/AppContext";
+import { useKeyboardNav } from "./hooks/useKeyboardNav";
+import { useTerminalSize } from "./hooks/useTerminalSize";
+import { ThreeColumnLayout } from "./components/layout/ThreeColumnLayout";
+import { CalendarPane } from "./components/calendar/CalendarPane";
+import { TasksPane } from "./components/tasks/TasksPane";
+import { TimelinePane } from "./components/timeline/TimelinePane";
+import { HelpDialog } from "./components/common/HelpDialog";
+import { ThemeDialog } from "./components/common/ThemeDialog";
+import { ClearTimelineDialog } from "./components/common/ClearTimelineDialog";
+import { OverviewScreen } from "./components/overview/OverviewScreen";
+import { FullscreenBackground } from "./components/common/FullscreenBackground";
+const AppContent = () => {
+    const { showHelp, showOverview, exitConfirmation, activePane, showThemeDialog, showClearTimelineDialog, } = useApp();
+    const { theme } = useTheme();
+    useKeyboardNav();
+    /* Use available width and height - automatically updates on resize */
+    const { width, height } = useTerminalSize();
+    // When a modal dialog is open, render only the modal
+    if (showThemeDialog) {
+        return _jsx(ThemeDialog, {});
+    }
+    if (showHelp) {
+        return _jsx(HelpDialog, {});
+    }
+    if (showClearTimelineDialog) {
+        return _jsx(ClearTimelineDialog, {});
+    }
+    return (_jsx(FullscreenBackground, { backgroundColor: theme.colors.background || "black", children: _jsxs(Box, { flexDirection: "column", width: width, height: height, padding: 1, backgroundColor: theme.colors.background, children: [showOverview ? (_jsx(OverviewScreen, {})) : (_jsx(ThreeColumnLayout, { leftPane: _jsx(CalendarPane, {}), centerPane: _jsx(TasksPane, {}), rightPane: _jsx(TimelinePane, {}), activePane: activePane, height: height - 2 })), exitConfirmation && (_jsx(Box, { width: "100%", justifyContent: "center", paddingY: 1, children: _jsxs(Text, { backgroundColor: "red", color: "white", bold: true, children: [" ", "Press Ctrl+C again to exit Epoch", " "] }) }))] }) }));
+};
+const App = () => {
+    return (_jsx(StorageProvider, { children: _jsx(ThemeProvider, { initialTheme: "dark", children: _jsx(AppProvider, { children: _jsx(AppContent, {}) }) }) }));
+};
+export default App;

package/dist/components/calendar/CalendarPane.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const CalendarPane: React.FC;

package/dist/components/calendar/CalendarPane.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Box, Text, useInput } from "ink";
+import { addDays, addWeeks, subDays, subWeeks } from "date-fns";
+import { useTheme } from "../../contexts/ThemeContext";
+import { useApp } from "../../contexts/AppContext";
+import { Pane } from "../layout/Pane";
+import { MonthView } from "./MonthView";
+import { calendarService } from "../../services/calendarService";
+export const CalendarPane = () => {
+    const { theme } = useTheme();
+    const { selectedDate, setSelectedDate, tasks, activePane, isModalOpen, isInputMode } = useApp();
+    const [currentMonth, setCurrentMonth] = useState({
+        year: selectedDate.year,
+        month: selectedDate.month,
+    });
+    // Update currentMonth when selectedDate changes to different month
+    useEffect(() => {
+        if (selectedDate.month !== currentMonth.month ||
+            selectedDate.year !== currentMonth.year) {
+            setCurrentMonth({ year: selectedDate.year, month: selectedDate.month });
+        }
+    }, [selectedDate.year, selectedDate.month]);
+    const calendarView = calendarService.generateMonthView(currentMonth.year, currentMonth.month, selectedDate, tasks);
+    const isFocused = activePane === "calendar" && !isModalOpen;
+    const navigateDate = (newDate) => {
+        setSelectedDate({
+            year: newDate.getFullYear(),
+            month: newDate.getMonth(),
+            day: newDate.getDate(),
+        });
+    };
+    useInput((input, key) => {
+        if (!isFocused)
+            return;
+        const currentDate = new Date(selectedDate.year, selectedDate.month, selectedDate.day);
+        // Navigate by day (h/l or left/right)
+        if (input === "h" || key.leftArrow) {
+            navigateDate(subDays(currentDate, 1));
+            return;
+        }
+        if (input === "l" || key.rightArrow) {
+            navigateDate(addDays(currentDate, 1));
+            return;
+        }
+        // Navigate by week (j/k or down/up)
+        if (input === "j" || key.downArrow) {
+            navigateDate(addWeeks(currentDate, 1));
+            return;
+        }
+        if (input === "k" || key.upArrow) {
+            navigateDate(subWeeks(currentDate, 1));
+            return;
+        }
+        // Navigate by month
+        if (input === "n") {
+            const next = calendarService.getNextMonth(currentMonth.year, currentMonth.month);
+            setCurrentMonth(next);
+            // Move selected date to first day of new month
+            setSelectedDate({
+                year: next.year,
+                month: next.month,
+                day: 1,
+            });
+            return;
+        }
+        if (input === "p") {
+            const prev = calendarService.getPreviousMonth(currentMonth.year, currentMonth.month);
+            setCurrentMonth(prev);
+            // Move selected date to first day of new month
+            setSelectedDate({
+                year: prev.year,
+                month: prev.month,
+                day: 1,
+            });
+            return;
+        }
+        // Go to today
+        if (input === "T") {
+            const today = new Date();
+            setSelectedDate({
+                year: today.getFullYear(),
+                month: today.getMonth(),
+                day: today.getDate(),
+            });
+            return;
+        }
+    }, { isActive: isFocused && !isInputMode });
+    const monthName = calendarService.getMonthName(currentMonth.month);
+    return (_jsx(Pane, { title: `${monthName} ${currentMonth.year}`, isFocused: isFocused, center: true, children: _jsxs(Box, { flexDirection: "column", alignItems: "center", children: [_jsx(MonthView, { calendarView: calendarView }), _jsxs(Box, { marginTop: 1, flexDirection: "column", alignItems: "center", children: [_jsx(Text, { color: theme.colors.keyboardHint, dimColor: true, children: "h/l: days j/k: weeks" }), _jsx(Text, { color: theme.colors.keyboardHint, dimColor: true, children: "n/p: month T: today" })] })] }) }));
+};

package/dist/components/calendar/DayCell.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { CalendarDay } from "../../types/calendar";
+interface DayCellProps {
+    day: CalendarDay;
+}
+export declare const DayCell: React.FC<DayCellProps>;
+export {};

package/dist/components/calendar/DayCell.js

@@ -0,0 +1,26 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "ink";
+import { Text } from "../common/ThemedText";
+import { useTheme } from "../../contexts/ThemeContext";
+export const DayCell = ({ day }) => {
+    const { theme } = useTheme();
+    let textColor = theme.colors.calendarDayOtherMonth;
+    if (day.isCurrentMonth) {
+        textColor = day.hasTasks
+            ? theme.colors.calendarDayWithTasks
+            : theme.colors.foreground;
+    }
+    // Determine indicators - selected takes priority, then today
+    const isSelected = day.isSelected;
+    const isToday = day.isToday && !day.isSelected;
+    if (isSelected) {
+        textColor = theme.colors.calendarSelected;
+    }
+    else if (day.isToday) {
+        textColor = theme.colors.calendarToday;
+    }
+    const dayNum = day.date.day.toString().padStart(2, " ");
+    const leftBracket = isSelected ? "[" : isToday ? "(" : " ";
+    const rightBracket = isSelected ? "]" : isToday ? ")" : " ";
+    return (_jsx(Box, { width: 4, children: _jsxs(Text, { color: textColor, children: [leftBracket, dayNum, rightBracket] }) }));
+};

package/dist/components/calendar/MonthView.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { CalendarView } from "../../types/calendar";
+interface MonthViewProps {
+    calendarView: CalendarView;
+}
+export declare const MonthView: React.FC<MonthViewProps>;
+export {};

package/dist/components/calendar/MonthView.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from "ink";
+import { Text } from "../common/ThemedText";
+import { useTheme } from "../../contexts/ThemeContext";
+import { DayCell } from "./DayCell";
+export const MonthView = ({ calendarView }) => {
+    const { theme } = useTheme();
+    const dayHeaders = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: dayHeaders.map((day) => (_jsx(Box, { width: 4, children: _jsx(Text, { color: theme.colors.calendarHeader, bold: true, children: day }) }, day))) }), calendarView.weeks.map((week, weekIdx) => (_jsx(Box, { marginBottom: 0, children: week.map((day) => (_jsx(DayCell, { day: day }, day.dateString))) }, weekIdx)))] }));
+};

package/dist/components/common/BorderedBox.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+interface BorderedBoxProps {
+    children: React.ReactNode;
+    borderColor: string;
+    backgroundColor?: string;
+    width?: number;
+    paddingX?: number;
+    paddingY?: number;
+    title?: string;
+    titleColor?: string;
+}
+/**
+ * A box component with double borders that properly applies backgroundColor
+ * to border characters. This fixes the issue where Ink's built-in borderStyle
+ * doesn't apply backgroundColor to border characters.
+ */
+export declare const BorderedBox: React.FC<BorderedBoxProps>;
+export {};

package/dist/components/common/BorderedBox.js

@@ -0,0 +1,29 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+/**
+ * A box component with double borders that properly applies backgroundColor
+ * to border characters. This fixes the issue where Ink's built-in borderStyle
+ * doesn't apply backgroundColor to border characters.
+ */
+export const BorderedBox = ({ children, borderColor, backgroundColor, width, paddingX = 2, paddingY = 1, title, titleColor, }) => {
+    // Double border characters
+    const topLeft = "╔";
+    const topRight = "╗";
+    const bottomLeft = "╚";
+    const bottomRight = "╝";
+    const horizontal = "═";
+    const vertical = "║";
+    // Calculate inner width (content area)
+    // If width is specified, calculate inner width; otherwise use auto
+    const innerWidth = width ? width - 2 : undefined; // -2 for left and right borders
+    // Create horizontal border line
+    const createHorizontalBorder = (left, right, fill) => {
+        if (innerWidth) {
+            const fillCount = innerWidth;
+            return (_jsxs(Text, { color: borderColor, backgroundColor: backgroundColor, children: [left, fill.repeat(fillCount), right] }));
+        }
+        // For auto-width, we need to measure or use a reasonable default
+        return (_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: borderColor, backgroundColor: backgroundColor, children: left }), _jsx(Box, { flexGrow: 1, children: _jsx(Text, { color: borderColor, backgroundColor: backgroundColor, children: fill.repeat(40) }) }), _jsx(Text, { color: borderColor, backgroundColor: backgroundColor, children: right })] }));
+    };
+    return (_jsxs(Box, { flexDirection: "column", backgroundColor: backgroundColor, children: [createHorizontalBorder(topLeft, topRight, horizontal), _jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: borderColor, backgroundColor: backgroundColor, children: vertical }), _jsxs(Box, { flexDirection: "column", width: innerWidth, paddingX: paddingX, paddingY: paddingY, backgroundColor: backgroundColor, children: [title && (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: titleColor || borderColor, children: title }) })), children] }), _jsx(Text, { color: borderColor, backgroundColor: backgroundColor, children: vertical })] }), createHorizontalBorder(bottomLeft, bottomRight, horizontal)] }));
+};

package/dist/components/common/ClearTimelineDialog.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const ClearTimelineDialog: React.FC;

package/dist/components/common/ClearTimelineDialog.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from "ink";
+import { useTheme } from "../../contexts/ThemeContext";
+import { useApp } from "../../contexts/AppContext";
+import { Modal } from "./Modal";
+import { getDateString } from "../../utils/date";
+import { format } from "date-fns";
+export const ClearTimelineDialog = () => {
+    const { theme } = useTheme();
+    const { selectedDate, timeline, setShowClearTimelineDialog, clearTimelineForDate, } = useApp();
+    const date = new Date(selectedDate.year, selectedDate.month, selectedDate.day);
+    const dateStr = getDateString(date);
+    const formattedDate = format(date, "MMMM do, yyyy");
+    const eventCount = (timeline[dateStr] || []).length;
+    const handleConfirm = () => {
+        clearTimelineForDate(dateStr);
+        setShowClearTimelineDialog(false);
+    };
+    const handleCancel = () => {
+        setShowClearTimelineDialog(false);
+    };
+    useInput((input, key) => {
+        if (input.toLowerCase() === "y" || key.return) {
+            handleConfirm();
+        }
+        else if (input.toLowerCase() === "n" || key.escape) {
+            handleCancel();
+        }
+    });
+    return (_jsx(Modal, { children: _jsxs(Box, { flexDirection: "column", borderStyle: "double", borderColor: theme.colors.taskStateDelayed, paddingX: 4, paddingY: 2, 
+            // @ts-ignore - backgroundColor is a valid Ink prop
+            backgroundColor: theme.colors.modalBackground || theme.colors.background, children: [_jsx(Box, { justifyContent: "center", marginBottom: 1, children: _jsx(Text, { bold: true, color: theme.colors.taskStateDelayed, children: "Clear Timeline" }) }), _jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsx(Text, { color: theme.colors.foreground, children: "You are about to clear the timeline for" }), _jsx(Box, { justifyContent: "center", marginY: 1, children: _jsx(Text, { bold: true, color: theme.colors.calendarHeader, children: formattedDate }) }), eventCount > 0 ? (_jsxs(Text, { color: theme.colors.keyboardHint, children: ["This will remove ", eventCount, " event", eventCount !== 1 ? "s" : "", " from the timeline."] })) : (_jsx(Text, { color: theme.colors.keyboardHint, dimColor: true, children: "The timeline is already empty." }))] }), _jsxs(Box, { marginTop: 2, justifyContent: "center", children: [_jsx(Text, { color: theme.colors.foreground, children: "Are you sure? " }), _jsx(Text, { color: theme.colors.taskStateCompleted, bold: true, children: "[Y]es" }), _jsx(Text, { color: theme.colors.foreground, children: " / " }), _jsx(Text, { color: theme.colors.taskStateDelayed, bold: true, children: "[N]o" })] }), _jsx(Box, { marginTop: 2, justifyContent: "center", children: _jsx(Text, { color: theme.colors.keyboardHint, dimColor: true, children: "Press Y to confirm, N or Esc to cancel" }) })] }) }));
+};

package/dist/components/common/FullscreenBackground.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface FullscreenBackgroundProps {
+    children: React.ReactNode;
+    backgroundColor: string;
+}
+/**
+ * A component that sets a fullscreen background color using Ink 6's
+ * native Box backgroundColor support. Supports hex colors, RGB, and named colors.
+ */
+export declare const FullscreenBackground: React.FC<FullscreenBackgroundProps>;
+export {};

package/dist/components/common/FullscreenBackground.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, useStdout } from "ink";
+/**
+ * A component that sets a fullscreen background color using Ink 6's
+ * native Box backgroundColor support. Supports hex colors, RGB, and named colors.
+ */
+export const FullscreenBackground = ({ children, backgroundColor, }) => {
+    const { stdout } = useStdout();
+    const width = stdout?.columns || 100;
+    const height = stdout?.rows || 30;
+    return (_jsx(Box, { flexDirection: "column", width: width, height: height, backgroundColor: backgroundColor, children: children }));
+};

package/dist/components/common/HelpDialog.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const HelpDialog: React.FC;

package/dist/components/common/HelpDialog.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { useTheme } from "../../contexts/ThemeContext";
+import { Modal } from "./Modal";
+export const HelpDialog = () => {
+    const { theme } = useTheme();
+    const shortcuts = [
+        { key: "Ctrl+C (twice)", action: "Quit application" },
+        { key: "?", action: "Toggle help dialog" },
+        { key: "Shift+;", action: "Show month overview" },
+        { key: "t", action: "Select theme" },
+        { key: "1", action: "Focus calendar pane" },
+        { key: "2 / Tab", action: "Focus tasks pane" },
+        { key: "3 / Shift+Tab", action: "Focus timeline pane" },
+        { key: "", action: "" },
+        { key: "Calendar Pane", action: "" },
+        { key: "h/l ←/→", action: "Navigate days" },
+        { key: "j/k ↓/↑", action: "Navigate weeks" },
+        { key: "n/p", action: "Next/prev month" },
+        { key: "T", action: "Go to today" },
+        { key: "", action: "" },
+        { key: "Tasks Pane", action: "" },
+        { key: "j/k ↓/↑", action: "Navigate tasks" },
+        { key: "a", action: "Add new task" },
+        { key: "e", action: "Edit task" },
+        { key: "d", action: "Delete task" },
+        { key: "Space", action: "Toggle completion" },
+        { key: "s", action: "Start task" },
+        { key: "D", action: "Mark delegated" },
+        { key: "x", action: "Mark delayed/cancelled" },
+        { key: "Enter", action: "Expand/collapse subtasks" },
+        { key: "", action: "" },
+        { key: "Timeline Pane", action: "" },
+        { key: "j/k", action: "Scroll timeline" },
+        { key: "Shift+C", action: "Clear timeline" },
+    ];
+    return (_jsx(Modal, { children: _jsxs(Box, { flexDirection: "column", borderStyle: "double", borderColor: theme.colors.helpDialogBorder, paddingX: 2, paddingY: 1, 
+            // @ts-ignore - backgroundColor is a valid Ink prop
+            backgroundColor: theme.colors.modalBackground || theme.colors.background, children: [_jsx(Text, { bold: true, color: theme.colors.calendarHeader, children: "Keyboard Shortcuts" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: shortcuts.map((item, idx) => (_jsx(Box, { marginY: 0, children: item.key ? (_jsxs(_Fragment, { children: [_jsx(Box, { width: 20, children: _jsx(Text, { color: theme.colors.timelineEventStarted, children: item.key }) }), _jsx(Text, { color: theme.colors.foreground, children: item.action })] })) : (_jsx(Text, { color: theme.colors.separator, children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" })) }, idx))) }), _jsx(Box, { marginY: 1, children: _jsx(Text, { color: theme.colors.keyboardHint, dimColor: true, children: "Press '?' to close" }) })] }) }));
+};

package/dist/components/common/Modal.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface ModalProps {
+    children: React.ReactNode;
+}
+/**
+ * A fullscreen overlay modal component that centers its content.
+ * This creates a floating dialog effect similar to OpenCode's command palette.
+ */
+export declare const Modal: React.FC<ModalProps>;
+export {};

package/dist/components/common/Modal.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, useStdout } from "ink";
+import { useTheme } from "../../contexts/ThemeContext";
+import { FullscreenBackground } from "./FullscreenBackground";
+/**
+ * A fullscreen overlay modal component that centers its content.
+ * This creates a floating dialog effect similar to OpenCode's command palette.
+ */
+export const Modal = ({ children }) => {
+    const { theme } = useTheme();
+    const { stdout } = useStdout();
+    const width = stdout?.columns || 100;
+    const height = stdout?.rows || 30;
+    return (_jsx(FullscreenBackground, { backgroundColor: theme.colors.modalOverlay || "black", children: _jsx(Box, { flexDirection: "column", width: width, height: height, justifyContent: "center", alignItems: "center", children: children }) }));
+};

package/dist/components/common/Separator.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface SeparatorProps {
+    vertical?: boolean;
+    height?: number;
+    width?: number;
+}
+export declare const Separator: React.FC<SeparatorProps>;
+export {};

package/dist/components/common/Separator.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { useTheme } from "../../contexts/ThemeContext";
+export const Separator = ({ vertical = true, height, width = 1, }) => {
+    const { theme } = useTheme();
+    if (vertical) {
+        return (_jsx(Box, { flexDirection: "column", width: width, height: height, children: _jsx(Text, { color: theme.colors.separator, children: "\u2502" }) }));
+    }
+    return (_jsx(Box, { width: width, children: _jsx(Text, { color: theme.colors.separator, children: "\u2500" }) }));
+};

package/dist/components/common/ThemeDialog.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const ThemeDialog: React.FC;

package/dist/components/common/ThemeDialog.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo, useEffect } from "react";
+import { Box, Text, useInput } from "ink";
+import TextInput from "ink-text-input";
+import { useTheme } from "../../contexts/ThemeContext";
+import { useApp } from "../../contexts/AppContext";
+import { Modal } from "./Modal";
+import { getLightThemeNames, getDarkThemeNames } from "../../themes";
+export const ThemeDialog = () => {
+    const { theme, setTheme, themeName } = useTheme();
+    const { setShowThemeDialog } = useApp();
+    const [searchQuery, setSearchQuery] = useState("");
+    const [focusMode, setFocusMode] = useState("search");
+    // Get organized theme lists
+    const lightThemes = useMemo(() => getLightThemeNames(), []);
+    const darkThemes = useMemo(() => getDarkThemeNames(), []);
+    // Combined list: light themes first, then dark themes
+    const allThemes = useMemo(() => {
+        // Filter themes based on search query
+        const query = searchQuery.toLowerCase();
+        const filteredLightThemes = lightThemes.filter((t) => t.toLowerCase().includes(query));
+        const filteredDarkThemes = darkThemes.filter((t) => t.toLowerCase().includes(query));
+        // Create a flat list with section markers
+        const items = [];
+        // Light themes section (only show if there are themes)
+        if (filteredLightThemes.length > 0) {
+            items.push({ type: "separator", value: "Light Themes" });
+            filteredLightThemes.forEach((t) => items.push({ type: "theme", value: t }));
+        }
+        // Dark themes section (only show if there are themes)
+        if (filteredDarkThemes.length > 0) {
+            items.push({ type: "separator", value: "Dark Themes" });
+            filteredDarkThemes.forEach((t) => items.push({ type: "theme", value: t }));
+        }
+        return items;
+    }, [lightThemes, darkThemes, searchQuery]);
+    // Get only theme items (for navigation)
+    const themeItems = useMemo(() => allThemes.filter((item) => item.type === "theme"), [allThemes]);
+    // Find initial selected index
+    const initialIndex = useMemo(() => {
+        const idx = themeItems.findIndex((item) => item.value === themeName);
+        return idx >= 0 ? idx : 0;
+    }, [themeItems, themeName]);
+    const [selectedIndex, setSelectedIndex] = useState(initialIndex);
+    // Reset selection when search query changes to highlight the first result
+    useEffect(() => {
+        setSelectedIndex(0);
+    }, [searchQuery]);
+    useInput((input, key) => {
+        // Escape closes dialog from both modes
+        if (key.escape) {
+            setShowThemeDialog(false);
+            return;
+        }
+        // Handle navigation based on focus mode
+        if (focusMode === "search") {
+            // Enter selects the first result and closes
+            if (key.return && themeItems.length > 0) {
+                setTheme(themeItems[0].value);
+                setShowThemeDialog(false);
+                return;
+            }
+            // In search mode, only down arrow moves to list (to avoid j/k interfering with typing)
+            if (key.downArrow && themeItems.length > 0) {
+                setFocusMode("list");
+                setSelectedIndex(0);
+                return;
+            }
+        }
+        else {
+            // In list mode
+            if (key.upArrow || input === "k") {
+                if (selectedIndex > 0) {
+                    setSelectedIndex((prev) => prev - 1);
+                }
+                else {
+                    // At top of list, move back to search
+                    setFocusMode("search");
+                }
+                return;
+            }
+            if (key.downArrow || input === "j") {
+                setSelectedIndex((prev) => prev < themeItems.length - 1 ? prev + 1 : 0);
+                return;
+            }
+            // Enter selects theme only in list mode
+            if (key.return && themeItems.length > 0) {
+                setTheme(themeItems[selectedIndex].value);
+                setShowThemeDialog(false);
+                return;
+            }
+        }
+    }, { isActive: true });
+    // Get the currently selected theme name
+    const selectedThemeName = themeItems[selectedIndex]?.value;
+    // Format display name
+    const formatThemeName = (name) => {
+        return name
+            .split("-")
+            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(" ");
+    };
+    return (_jsx(Modal, { children: _jsxs(Box, { flexDirection: "column", borderStyle: "double", borderColor: theme.colors.helpDialogBorder, paddingX: 2, paddingY: 1, width: 44, 
+            // @ts-ignore - backgroundColor is a valid Ink prop
+            backgroundColor: theme.colors.modalBackground || theme.colors.background, children: [_jsx(Text, { bold: true, color: theme.colors.calendarHeader, underline: true, children: "Select Theme" }), _jsxs(Box, { marginTop: 1, flexDirection: "row", alignItems: "center", children: [_jsxs(Text, { color: theme.colors.foreground, dimColor: true, children: ["Search:", " "] }), _jsx(Text, { color: theme.colors.foreground, children: _jsx(TextInput, { value: searchQuery, onChange: setSearchQuery, focus: focusMode === "search", placeholder: "Type to filter..." }) })] }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: allThemes.map((item, idx) => {
+                        if (item.type === "separator") {
+                            return (_jsx(Box, { marginTop: idx > 0 ? 1 : 0, marginBottom: 0, children: _jsx(Text, { bold: true, color: theme.colors.calendarHeader, dimColor: true, children: item.value }) }, `sep-${idx}`));
+                        }
+                        const isSelected = item.value === selectedThemeName;
+                        const isCurrent = item.value === themeName;
+                        return (_jsx(Box, { paddingLeft: 1, children: _jsxs(Text, { color: isSelected
+                                    ? theme.colors.focusIndicator
+                                    : theme.colors.foreground, bold: isSelected, children: [isSelected ? "➜ " : "  ", formatThemeName(item.value), isCurrent ? " (current)" : ""] }) }, item.value));
+                    }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.colors.keyboardHint, dimColor: true, children: focusMode === "search"
+                            ? "Type to search • ↓ to navigate list • Esc to close"
+                            : "↑/↓ or k/j to navigate • Enter to select • Esc to close" }) })] }) }));
+};

package/dist/components/common/ThemedScreen.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { useTheme } from "../../contexts/ThemeContext";
+interface ThemedScreenProps {
+    children: React.ReactNode;
+    backgroundColor?: string;
+}
+/**
+ * A wrapper component that applies the theme's background color to the entire screen.
+ *
+ * This works by:
+ * 1. Getting the terminal dimensions
+ * 2. Rendering the children
+ * 3. For any empty space, we don't try to fill it (terminals control their own bg)
+ *
+ * The key insight: we can't change the terminal's bg, but we CAN ensure all our
+ * Text elements have a consistent background by using a context or global style.
+ */
+export declare const ThemedScreen: React.FC<ThemedScreenProps>;
+/**
+ * Export the theme context hook for components that need to apply backgrounds
+ */
+export { useTheme };

package/dist/components/common/ThemedScreen.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useStdout } from "ink";
+import { useTheme } from "../../contexts/ThemeContext";
+/**
+ * A wrapper component that applies the theme's background color to the entire screen.
+ *
+ * This works by:
+ * 1. Getting the terminal dimensions
+ * 2. Rendering the children
+ * 3. For any empty space, we don't try to fill it (terminals control their own bg)
+ *
+ * The key insight: we can't change the terminal's bg, but we CAN ensure all our
+ * Text elements have a consistent background by using a context or global style.
+ */
+export const ThemedScreen = ({ children, backgroundColor, }) => {
+    const { stdout } = useStdout();
+    const { theme } = useTheme();
+    const width = stdout?.columns || 100;
+    const height = stdout?.rows || 30;
+    // For 'terminal' theme, don't try to set any background
+    // For other themes, we simply render - the Text components should handle their own bg
+    const bgColor = backgroundColor ||
+        (theme.name === "terminal" ? undefined : theme.colors.background);
+    if (!bgColor) {
+        // Terminal theme - no background styling, use terminal's native colors
+        return (_jsx(Box, { flexDirection: "column", width: width, height: height, children: children }));
+    }
+    // For light/dark themes, we need to fill the background
+    // The trick: Use ANSI escape codes to fill the entire terminal background
+    // This ensures even the border areas get the background color
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { position: "absolute", width: width, height: height, children: Array.from({ length: height }).map((_, i) => (_jsx(Box, { width: width, children: _jsx(Text, { backgroundColor: bgColor, children: " ".repeat(width) }) }, `bg-row-${i}`))) }), _jsx(Box, { position: "relative", width: width, height: height, children: children })] }));
+};
+/**
+ * Export the theme context hook for components that need to apply backgrounds
+ */
+export { useTheme };

package/dist/components/common/ThemedText.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { TextProps } from "ink";
+/**
+ * A drop-in replacement for Ink's Text component that automatically applies
+ * the theme's background color. This ensures text is visible on themed backgrounds.
+ *
+ * Usage: Replace `import { Text } from 'ink'` with
+ *        `import { Text } from '../common/ThemedText'`
+ */
+export declare const ThemedText: React.FC<TextProps>;
+export { ThemedText as Text };

package/dist/components/common/ThemedText.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "ink";
+import { useTheme } from "../../contexts/ThemeContext";
+/**
+ * A drop-in replacement for Ink's Text component that automatically applies
+ * the theme's background color. This ensures text is visible on themed backgrounds.
+ *
+ * Usage: Replace `import { Text } from 'ink'` with
+ *        `import { Text } from '../common/ThemedText'`
+ */
+export const ThemedText = ({ children, backgroundColor, ...props }) => {
+    const { theme } = useTheme();
+    // Only apply theme background for non-terminal themes
+    // If an explicit backgroundColor is passed, use that instead
+    const bgColor = backgroundColor ??
+        (theme.name !== "terminal" ? theme.colors.background : undefined);
+    return (_jsx(Text, { ...props, backgroundColor: bgColor, children: children }));
+};
+// Re-export as Text for easy drop-in replacement
+export { ThemedText as Text };

package/dist/components/layout/Pane.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { ReactNode } from "react";
+interface PaneProps {
+    children: ReactNode;
+    title?: string;
+    isFocused?: boolean;
+    width?: number | string;
+    height?: number | string;
+    center?: boolean;
+}
+export declare const Pane: React.FC<PaneProps>;
+export {};