epoch-tui 0.1.0

package/dist/components/layout/Pane.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";
+export const Pane = ({ children, title, isFocused = false, width, height, center = false, }) => {
+    const { theme } = useTheme();
+    // Allow height to be controlled by content or parent, don't force full screen
+    const paneHeight = height;
+    return (_jsxs(Box, { flexDirection: "column", width: width, height: paneHeight, paddingRight: 1, paddingX: 2, alignItems: center ? "center" : "flex-start", children: [title && (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { backgroundColor: isFocused ? theme.colors.focusIndicator : undefined, color: isFocused ? theme.colors.background : theme.colors.taskHeader, bold: true, children: isFocused ? ` ${title.toUpperCase()} ` : title }) })), _jsx(Box, { flexDirection: "column", flexGrow: 1, overflowY: "hidden", alignItems: center ? "center" : "flex-start", children: children })] }));
+};

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

@@ -0,0 +1,13 @@
+import React from "react";
+import type { ReactNode } from "react";
+interface ThreeColumnLayoutProps {
+    leftPane: ReactNode;
+    centerPane: ReactNode;
+    rightPane: ReactNode;
+    leftWidth?: number | string;
+    rightWidth?: number | string;
+    height?: number;
+    activePane?: "calendar" | "tasks" | "timeline";
+}
+export declare const ThreeColumnLayout: React.FC<ThreeColumnLayoutProps>;
+export {};

package/dist/components/layout/ThreeColumnLayout.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { useTheme } from "../../contexts/ThemeContext";
+// Vertical separator component that fills height with proper background
+const VerticalSeparator = ({ color, backgroundColor, height, isFocused }) => {
+    // Create a column of characters - use heavy vertical line if focused
+    const char = isFocused ? "┃" : "│";
+    const lines = height ? Array(height).fill(char) : [char];
+    return (_jsx(Box, { flexDirection: "column", backgroundColor: backgroundColor, children: lines.map((c, i) => (_jsx(Text, { color: color, backgroundColor: backgroundColor, children: c }, i))) }));
+};
+export const ThreeColumnLayout = ({ leftPane, centerPane, rightPane, leftWidth = "15%", rightWidth = "25%", height, activePane, }) => {
+    const { theme } = useTheme();
+    const focusedColor = theme.colors.focusIndicator;
+    const normalColor = theme.colors.border;
+    // Apply background color for non-terminal themes
+    const bgColor = theme.name !== "terminal" ? theme.colors.background : undefined;
+    return (_jsxs(Box, { flexDirection: "row", width: "100%", height: height, backgroundColor: bgColor, children: [_jsx(Box, { width: leftWidth, flexShrink: 0, flexDirection: "column", backgroundColor: bgColor, children: leftPane }), _jsx(VerticalSeparator, { isFocused: activePane === "calendar" || activePane === "tasks", color: activePane === "calendar" || activePane === "tasks"
+                    ? focusedColor
+                    : normalColor, backgroundColor: bgColor, height: height }), _jsx(Box, { flexGrow: 1, flexShrink: 1, flexDirection: "column", backgroundColor: bgColor, children: centerPane }), _jsx(VerticalSeparator, { isFocused: activePane === "tasks" || activePane === "timeline", color: activePane === "tasks" || activePane === "timeline"
+                    ? focusedColor
+                    : normalColor, backgroundColor: bgColor, height: height }), _jsx(Box, { width: rightWidth, flexShrink: 0.3, flexDirection: "column", backgroundColor: bgColor, children: rightPane })] }));
+};

package/dist/components/overview/OverviewScreen.d.ts

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

package/dist/components/overview/OverviewScreen.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo } from "react";
+import { Box, Text, useInput } from "ink";
+import { useTheme } from "../../contexts/ThemeContext";
+import { useApp } from "../../contexts/AppContext";
+import { getDateString, formatDate } from "../../utils/date";
+import { startOfMonth, endOfMonth, eachDayOfInterval } from "date-fns";
+import { useTerminalSize } from "../../hooks/useTerminalSize";
+export const OverviewScreen = () => {
+    const { theme } = useTheme();
+    const { tasks, overviewMonth, setOverviewMonth, setShowOverview } = useApp();
+    const [scrollOffset, setScrollOffset] = React.useState(0);
+    const { height: terminalHeight } = useTerminalSize();
+    // Calculate visible rows based on terminal height to avoid wasting space
+    // Header (~3) + Footer (~2) + Padding (~2) + Indicators (~2) = ~9 lines fixed
+    // Minimum row height is 3 lines (Date + "No tasks" + margin)
+    const visibleRows = useMemo(() => {
+        return Math.max(2, Math.floor((terminalHeight - 9) / 3));
+    }, [terminalHeight]);
+    const monthDates = useMemo(() => {
+        const monthStart = startOfMonth(new Date(overviewMonth.year, overviewMonth.month, 1));
+        const monthEnd = endOfMonth(monthStart);
+        return eachDayOfInterval({ start: monthStart, end: monthEnd });
+    }, [overviewMonth]);
+    // Get tasks grouped by date
+    const tasksByDate = useMemo(() => {
+        const grouped = {};
+        monthDates.forEach((date) => {
+            const dateStr = getDateString(date);
+            grouped[dateStr] = tasks[dateStr] || [];
+        });
+        return grouped;
+    }, [monthDates, tasks]);
+    // Month navigation
+    const handlePrevMonth = () => {
+        const newMonth = overviewMonth.month - 1;
+        if (newMonth < 0) {
+            setOverviewMonth({ year: overviewMonth.year - 1, month: 11 });
+        }
+        else {
+            setOverviewMonth({ ...overviewMonth, month: newMonth });
+        }
+    };
+    const handleNextMonth = () => {
+        const newMonth = overviewMonth.month + 1;
+        if (newMonth > 11) {
+            setOverviewMonth({ year: overviewMonth.year + 1, month: 0 });
+        }
+        else {
+            setOverviewMonth({ ...overviewMonth, month: newMonth });
+        }
+    };
+    // Reset scroll when month changes
+    React.useEffect(() => {
+        setScrollOffset(0);
+    }, [overviewMonth]);
+    useInput((input, key) => {
+        if (key.escape) {
+            setShowOverview(false);
+            return;
+        }
+        if (input === "n" || key.rightArrow) {
+            handleNextMonth();
+            return;
+        }
+        if (input === "p" || key.leftArrow) {
+            handlePrevMonth();
+            return;
+        }
+        if (input === "j" || key.downArrow) {
+            setScrollOffset((prev) => Math.min(prev + 1, Math.max(0, rows - visibleRows)));
+            return;
+        }
+        if (input === "k" || key.upArrow) {
+            setScrollOffset((prev) => Math.max(prev - 1, 0));
+            return;
+        }
+    });
+    const monthName = formatDate(new Date(overviewMonth.year, overviewMonth.month, 1), "MMMM yyyy");
+    // Calculate grid layout - 4 columns
+    const columns = 4;
+    const rows = Math.ceil(monthDates.length / columns);
+    const visibleRowData = Array.from({ length: rows }).slice(scrollOffset, scrollOffset + visibleRows);
+    const canScrollUp = scrollOffset > 0;
+    const canScrollDown = scrollOffset + visibleRows < rows;
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, width: "100%", height: "100%", children: [_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.focusIndicator, children: "Overview" }), _jsx(Text, { color: theme.colors.foreground, children: monthName })] }), _jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [canScrollUp && (_jsx(Box, { justifyContent: "center", marginBottom: 1, children: _jsx(Text, { color: theme.colors.keyboardHint, dimColor: true, children: "-- more above --" }) })), visibleRowData.map((_, index) => {
+                        const rowIndex = scrollOffset + index;
+                        return (_jsx(Box, { flexDirection: "row", marginBottom: 1, children: Array.from({ length: columns }).map((_, colIndex) => {
+                                const dateIndex = rowIndex * columns + colIndex;
+                                const date = monthDates[dateIndex];
+                                if (!date) {
+                                    return (_jsx(Box, { flexDirection: "column", flexGrow: 1, flexBasis: 0, marginRight: colIndex === columns - 1 ? 0 : 2 }, `empty-${colIndex}`));
+                                }
+                                const dateStr = getDateString(date);
+                                const dayTasks = tasksByDate[dateStr] || [];
+                                // Flatten tasks with depth info for indentation
+                                const flatTasksWithDepth = [];
+                                const traverse = (taskList, depth) => {
+                                    for (const task of taskList) {
+                                        flatTasksWithDepth.push({ task, depth });
+                                        traverse(task.children, depth + 1);
+                                    }
+                                };
+                                traverse(dayTasks, 0);
+                                return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, flexBasis: 0, marginRight: colIndex === columns - 1 ? 0 : 2, children: [_jsx(Text, { bold: true, color: theme.colors.calendarSelected, children: formatDate(date, "do MMM") }), _jsxs(Box, { flexDirection: "column", children: [flatTasksWithDepth.length === 0 ? (_jsx(Text, { dimColor: true, color: theme.colors.keyboardHint, children: "No tasks" })) : (flatTasksWithDepth
+                                                    .slice(0, 10)
+                                                    .map(({ task, depth }) => (_jsx(TaskItem, { task: task, theme: theme, depth: depth }, task.id)))), flatTasksWithDepth.length > 10 && (_jsxs(Text, { dimColor: true, color: theme.colors.keyboardHint, children: ["+", flatTasksWithDepth.length - 10, " more..."] }))] })] }, dateStr));
+                            }) }, rowIndex));
+                    }), canScrollDown && (_jsx(Box, { justifyContent: "center", marginTop: 1, children: _jsx(Text, { color: theme.colors.keyboardHint, dimColor: true, children: "-- more below --" }) }))] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.colors.keyboardHint, dimColor: true, children: "n/p or \u2190/\u2192: month | j/k or \u2193/\u2191: scroll | Esc: close | Shift+;: toggle" }) })] }));
+};
+const TaskItem = ({ task, theme, depth }) => {
+    const checkbox = getCheckbox(task.state);
+    const color = getStateColor(task.state, theme);
+    // Note: We don't recurse here anymore because the parent component (OverviewScreen)
+    // already uses flattenTasks() to get a flat list of all tasks including children.
+    return (_jsxs(Box, { children: [_jsxs(Text, { color: color, children: [checkbox, " "] }), depth > 0 && _jsx(Text, { children: "  ".repeat(depth) }), _jsx(Text, { color: color, strikethrough: task.state === "completed", dimColor: task.state === "delayed", children: task.title.length > 35 ? task.title.slice(0, 32) + "..." : task.title })] }));
+};
+function getCheckbox(state) {
+    switch (state) {
+        case "completed":
+            return "[✓]";
+        case "delegated":
+            return "[→]";
+        case "delayed":
+            return "[‖]";
+        default:
+            return "[ ]";
+    }
+}
+function getStateColor(state, theme) {
+    const colors = {
+        todo: theme.colors.taskStateTodo,
+        completed: theme.colors.taskStateCompleted,
+        delegated: theme.colors.taskStateDelegated,
+        delayed: theme.colors.taskStateDelayed,
+    };
+    return colors[state] || theme.colors.foreground;
+}

package/dist/components/tasks/TaskHeader.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface TaskHeaderProps {
+    selectedDate: Date;
+    completionPercentage: number;
+}
+export declare const TaskHeader: React.FC<TaskHeaderProps>;
+export {};

package/dist/components/tasks/TaskHeader.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { useTheme } from "../../contexts/ThemeContext";
+import { formatDate } from "../../utils/date";
+export const TaskHeader = ({ selectedDate, completionPercentage, }) => {
+    const { theme } = useTheme();
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { color: theme.colors.taskHeader, children: formatDate(selectedDate, "EEEE, MMMM d, yyyy") }), _jsxs(Text, { color: theme.colors.taskHeader, children: [completionPercentage, "% completed"] })] }));
+};

package/dist/components/tasks/TaskItem.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { Task } from "../../types/task";
+interface TaskItemProps {
+    task: Task;
+    depth: number;
+    isSelected: boolean;
+    isExpanded: boolean;
+}
+export declare const TaskItem: React.FC<TaskItemProps>;
+export {};

package/dist/components/tasks/TaskItem.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { useTheme } from "../../contexts/ThemeContext";
+export const TaskItem = ({ task, depth, isSelected, isExpanded, }) => {
+    const { theme } = useTheme();
+    const stateColors = {
+        todo: theme.colors.taskStateTodo,
+        completed: theme.colors.taskStateCompleted,
+        delegated: theme.colors.taskStateDelegated,
+        delayed: theme.colors.taskStateDelayed,
+    };
+    const checkbox = task.state === "completed"
+        ? "☑"
+        : task.state === "delegated"
+            ? "↦"
+            : task.state === "delayed"
+                ? "⏸"
+                : "☐";
+    const expandIcon = task.children.length > 0 ? (isExpanded ? "▼ " : "▶ ") : "  ";
+    const indent = "  ".repeat(depth);
+    const selector = isSelected ? ">" : " ";
+    const textColor = stateColors[task.state] || theme.colors.foreground;
+    const strikethrough = task.state === "completed";
+    return (_jsxs(Box, { children: [_jsx(Text, { color: isSelected ? theme.colors.focusIndicator : theme.colors.foreground, children: selector }), _jsx(Text, { children: " " }), _jsx(Text, { color: textColor, children: checkbox }), _jsx(Text, { children: " " }), _jsx(Text, { children: expandIcon }), _jsx(Text, { children: indent }), _jsx(Text, { color: textColor, strikethrough: strikethrough, dimColor: task.state === "delayed", children: task.title }), task.startTime && !task.endTime && (_jsx(Text, { color: theme.colors.timelineEventStarted, children: " \u25B6" }))] }));
+};

package/dist/components/tasks/TaskList.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { Task } from "../../types/task";
+interface TaskListProps {
+    tasks: Task[];
+    depth?: number;
+    selectedId?: string;
+    expandedIds?: Set<string>;
+    onToggleExpand?: (id: string) => void;
+}
+export declare const TaskList: React.FC<TaskListProps>;
+export {};

package/dist/components/tasks/TaskList.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from "ink";
+import { TaskItem } from "./TaskItem";
+export const TaskList = ({ tasks, depth = 0, selectedId, expandedIds = new Set(), onToggleExpand, }) => {
+    return (_jsx(Box, { flexDirection: "column", children: tasks.map((task) => {
+            const isSelected = task.id === selectedId;
+            const isExpanded = expandedIds.has(task.id);
+            const hasChildren = task.children.length > 0;
+            return (_jsxs(Box, { flexDirection: "column", children: [_jsx(TaskItem, { task: task, depth: depth, isSelected: isSelected, isExpanded: isExpanded }), hasChildren && isExpanded && (_jsx(TaskList, { tasks: task.children, depth: depth + 1, selectedId: selectedId, expandedIds: expandedIds, onToggleExpand: onToggleExpand }))] }, task.id));
+        }) }));
+};

package/dist/components/tasks/TasksPane.d.ts

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