cron-human 1.1.2 → 1.1.3

package/dist/ui/app.js

@@ -5,6 +5,7 @@ import { InputSection } from './components/InputSection.js';
 import { PreviewSection } from './components/PreviewSection.js';
 import { OptionsPanel } from './components/OptionsPanel.js';
 import { HistoryPanel } from './components/HistoryPanel.js';
+import { PresetsModal } from './components/PresetsModal.js';
 import clipboardy from 'clipboardy';
 var FocusArea;
 (function (FocusArea) {
@@ -15,7 +16,10 @@ var FocusArea;
 export const App = () => {
     const { exit } = useApp();
     const [expression, setExpression] = useState('');
-    const [timezone] = useState(undefined);
+    const [timezone, setTimezone] = useState(undefined);
+    const [timezoneInput, setTimezoneInput] = useState('');
+    const [inputMode, setInputMode] = useState('cron');
+    const [showPresets, setShowPresets] = useState(false);
     const [allowSeconds, setAllowSeconds] = useState(false);
     const [focus, setFocus] = useState(FocusArea.Input);
     const [history, setHistory] = useState([]);
@@ -32,6 +36,55 @@ export const App = () => {
             exit();
             return;
         }
+        // Global Shortcuts (Paste, Reset, Toggles)
+        if (key.ctrl && input === 'v') {
+            if (focus === FocusArea.Input && !showPresets) {
+                clipboardy.read().then(text => {
+                    if (text) {
+                        if (inputMode === 'timezone') {
+                            setTimezoneInput(text.trim());
+                        }
+                        else {
+                            setExpression(text.trim());
+                        }
+                        setNotification('Pasted from clipboard!');
+                    }
+                }).catch(err => {
+                    setNotification(`Paste failed: ${err.message}`);
+                });
+                return;
+            }
+        }
+        if (key.ctrl && input === 'r') {
+            if (inputMode === 'timezone') {
+                setTimezoneInput('');
+            }
+            else {
+                setExpression('');
+            }
+            setFocus(FocusArea.Input);
+            return;
+        }
+        if (key.ctrl && input === 't') {
+            setInputMode('timezone');
+            setTimezoneInput(timezone || '');
+            setFocus(FocusArea.Input);
+            return;
+        }
+        if (key.ctrl && input === 'p') {
+            setShowPresets(prev => !prev);
+            return;
+        }
+        // Mode Specific Handling
+        if (inputMode === 'timezone') {
+            if (key.escape) {
+                setInputMode('cron');
+                setFocus(FocusArea.Input);
+                return;
+            }
+            return; // Let TextInput handle typing
+        }
+        // Cron Mode Handling
         if (input === 'q' && !key.ctrl && focus !== FocusArea.Input) {
             exit();
             return;
@@ -44,23 +97,12 @@ export const App = () => {
                     return FocusArea.History;
                 return FocusArea.Input;
             });
+            return;
         }
-        if (key.ctrl && input === 'r') {
-            setExpression('');
-            setFocus(FocusArea.Input);
-        }
-        if (key.ctrl && input === 'v') {
-            if (focus === FocusArea.Input) {
-                clipboardy.read().then(text => {
-                    if (text) {
-                        setExpression(text.trim());
-                        setNotification('Pasted from clipboard!');
-                    }
-                }).catch(err => {
-                    setNotification(`Paste failed: ${err.message}`);
-                });
-            }
+        if (key.ctrl && input === 's') { // Save? Or just implicit.
+            // Placeholder if needed
         }
+        // Navigation etc handled by components or below
         if (focus === FocusArea.Options) {
             if (input === ' ') {
                 setAllowSeconds(prev => !prev);
@@ -92,6 +134,11 @@ export const App = () => {
         }
     });
     const handleInputSubmit = (val) => {
+        if (inputMode === 'timezone') {
+            setTimezone(val.trim() || undefined);
+            setInputMode('cron');
+            return;
+        }
         if (val.trim()) {
             const last = history[0];
             if (!last || last.expression !== val) {
@@ -99,5 +146,9 @@ export const App = () => {
             }
         }
     };
-    return (_jsxs(Box, { flexDirection: "column", padding: 1, width: "100%", height: "100%", children: [_jsxs(Box, { marginBottom: 1, justifyContent: "space-between", children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: "magenta", children: "Cron Human TUI" }), _jsx(Text, { children: " | " }), _jsx(Text, { dimColor: true, children: "Ctrl+C to Quit" })] }), notification && _jsx(Text, { color: "yellow", bold: true, children: notification })] }), _jsx(InputSection, { value: expression, onChange: setExpression, onSubmit: handleInputSubmit, isFocused: focus === FocusArea.Input }), _jsx(Box, { marginY: 1, children: _jsx(OptionsPanel, { isFocused: focus === FocusArea.Options, timezone: timezone || "Local", allowSeconds: allowSeconds }) }), _jsx(PreviewSection, { expression: expression, timezone: timezone, allowSeconds: allowSeconds }), _jsxs(Box, { marginTop: 1, children: [_jsx(HistoryPanel, { isFocused: focus === FocusArea.History, items: history.slice(0, 5), selectedIndex: historyIndex }), history.length > 5 && _jsxs(Text, { dimColor: true, children: ["... ", history.length - 5, " more"] })] })] }));
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, width: "100%", height: "100%", children: [_jsxs(Box, { marginBottom: 1, justifyContent: "space-between", children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: "magenta", children: "Cron Human TUI" }), _jsx(Text, { children: " | " }), _jsx(Text, { dimColor: true, children: "Ctrl+C to Quit" })] }), notification && _jsx(Text, { color: "yellow", bold: true, children: notification })] }), _jsx(InputSection, { value: inputMode === 'timezone' ? timezoneInput : expression, onChange: inputMode === 'timezone' ? setTimezoneInput : setExpression, onSubmit: handleInputSubmit, isFocused: focus === FocusArea.Input && !showPresets, label: inputMode === 'timezone' ? "Enter Timezone (e.g. UTC, America/New_York) [Esc to cancel]:" : "Cron Expression:" }), _jsx(Box, { marginY: 1, children: _jsx(OptionsPanel, { isFocused: focus === FocusArea.Options, timezone: timezone || "Local", allowSeconds: allowSeconds }) }), _jsx(PreviewSection, { expression: expression, timezone: timezone, allowSeconds: allowSeconds }), _jsxs(Box, { marginTop: 1, children: [_jsx(HistoryPanel, { isFocused: focus === FocusArea.History, items: history.slice(Math.max(0, historyIndex - 2), Math.max(0, historyIndex - 2) + 5), selectedIndex: historyIndex, startIndex: Math.max(0, historyIndex - 2) }), history.length > 5 && _jsxs(Text, { dimColor: true, children: ["... ", history.length - 5, " more"] })] }), showPresets && (_jsx(Box, { position: "absolute", minHeight: 10, minWidth: 50, marginTop: 2, marginLeft: 5, children: _jsx(PresetsModal, { onSelect: (val) => {
+                        setExpression(val);
+                        setShowPresets(false);
+                        setFocus(FocusArea.Input);
+                    }, onCancel: () => setShowPresets(false) }) }))] }));
 };

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

@@ -7,6 +7,7 @@ interface HistoryPanelProps {
     isFocused: boolean;
     items: HistoryItem[];
     selectedIndex: number;
+    startIndex: number;
 }
 export declare const HistoryPanel: React.FC<HistoryPanelProps>;
 export {};

package/dist/ui/components/HistoryPanel.js

@@ -1,8 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
-export const HistoryPanel = ({ isFocused, items, selectedIndex }) => {
+export const HistoryPanel = ({ isFocused, items, selectedIndex, startIndex }) => {
     if (items.length === 0) {
         return (_jsxs(Box, { borderStyle: "round", borderColor: isFocused ? "green" : "gray", paddingX: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "History:" }), _jsx(Text, { dimColor: true, children: "No history yet. Press Enter to save successful runs." })] }));
     }
-    return (_jsxs(Box, { borderStyle: "round", borderColor: isFocused ? "green" : "gray", paddingX: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "History (Up/Down to navigate, Enter to load, 'c' to copy):" }), items.map((item, index) => (_jsx(Box, { children: _jsxs(Text, { color: index === selectedIndex ? "cyan" : "white", children: [index === selectedIndex ? "> " : "  ", item.expression] }) }, index)))] }));
+    return (_jsxs(Box, { borderStyle: "round", borderColor: isFocused ? "green" : "gray", paddingX: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "History (Up/Down to navigate, Enter to load, 'c' to copy):" }), items.map((item, index) => {
+                const globalIndex = startIndex + index;
+                const isSelected = globalIndex === selectedIndex;
+                return (_jsx(Box, { children: _jsxs(Text, { color: isSelected ? "cyan" : "white", children: [isSelected ? "> " : "  ", item.expression] }) }, index));
+            })] }));
 };

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

@@ -4,6 +4,7 @@ interface InputSectionProps {
     onChange: (value: string) => void;
     onSubmit: (value: string) => void;
     isFocused: boolean;
+    label?: string;
 }
 export declare const InputSection: React.FC<InputSectionProps>;
 export {};

package/dist/ui/components/InputSection.js

@@ -1,6 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from 'ink';
+import { useRef } from 'react';
+import { Box, Text, useInput } from 'ink';
 import TextInput from 'ink-text-input';
-export const InputSection = ({ value, onChange, onSubmit, isFocused }) => {
-    return (_jsxs(Box, { borderStyle: "round", borderColor: isFocused ? "green" : "gray", paddingX: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, color: isFocused ? "green" : "white", children: "Cron Expression:" }), _jsx(Box, { children: _jsx(TextInput, { value: value, onChange: onChange, onSubmit: onSubmit, focus: isFocused, placeholder: "* * * * *" }) })] }));
+export const InputSection = ({ value, onChange, onSubmit, isFocused, label = "Cron Expression:" }) => {
+    // FIX: ink-text-input adds characters even if Ctrl is held (except Ctrl+C).
+    // We safeguard against this by tracking the Ctrl key state.
+    const ctrlHeld = useRef(false);
+    useInput((_input, key) => {
+        ctrlHeld.current = key.ctrl;
+    }, { isActive: true }); // Always track, or at least when focused
+    // To attempt "Context" feature simply:
+    const parts = value.trim().split(/\s+/);
+    let helpText = "";
+    if (parts.length > 5)
+        helpText = "Fields: Sec Min Hour Day Month Weekday";
+    else
+        helpText = "Fields: Min Hour Day Month Weekday";
+    return (_jsxs(Box, { borderStyle: "round", borderColor: isFocused ? "green" : "gray", paddingX: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, color: isFocused ? "green" : "white", children: label }), _jsx(Box, { children: _jsx(TextInput, { value: value, onChange: (val) => {
+                        // FIX: Defer the update to allow useInput (below/parent) to update ctrlHeld state.
+                        // ink events bubble child->parent. TextInput (child) fires onChange.
+                        // Then InputSection (parent) useInput fires.
+                        // By deferring, we check ctrlHeld *after* useInput has run for this event.
+                        setTimeout(() => {
+                            if (!ctrlHeld.current) {
+                                onChange(val);
+                            }
+                        }, 0);
+                    }, onSubmit: onSubmit, focus: isFocused, placeholder: "* * * * *" }) }), isFocused && label.includes("Cron") && (_jsx(Box, { marginTop: 0, children: _jsx(Text, { dimColor: true, children: helpText }) }))] }));
 };

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

@@ -0,0 +1,7 @@
+import React from 'react';
+interface PresetsModalProps {
+    onSelect: (value: string) => void;
+    onCancel: () => void;
+}
+export declare const PresetsModal: React.FC<PresetsModalProps>;
+export {};

package/dist/ui/components/PresetsModal.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import SelectInput from 'ink-select-input';
+const presets = [
+    { label: 'Every Minute (* * * * *)', value: '* * * * *' },
+    { label: 'Every Hour (0 * * * *)', value: '0 * * * *' },
+    { label: 'Every Day (0 0 * * *)', value: '0 0 * * *' },
+    { label: 'Every Weekday (0 0 * * 1-5)', value: '0 0 * * 1-5' },
+    { label: 'Every Weekend (0 0 * * 0,6)', value: '0 0 * * 0,6' },
+    { label: 'First of Month (0 0 1 * *)', value: '0 0 1 * *' },
+    { label: 'Start of Year (0 0 1 1 *)', value: '0 0 1 1 *' },
+];
+export const PresetsModal = ({ onSelect, onCancel }) => {
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "double", borderColor: "cyan", padding: 1, width: 50, children: [_jsx(Text, { bold: true, children: "Select a Preset (Esc to cancel):" }), _jsx(Box, { marginY: 1, children: _jsx(SelectInput, { items: presets, onSelect: (item) => onSelect(item.value), isFocused: true }) }), _jsx(Text, { dimColor: true, children: "Use Arrow keys to select, Enter to apply" })] }));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cron-human",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "A CLI that converts cron expressions to human-readable English and prints next run times",
   "main": "dist/lib.js",
   "types": "dist/lib.d.ts",