);
}
// Minute filter — two range sliders kept in sync with two typeable number
// inputs. The inputs hold local string state while editing so the value
// doesn't snap back on every keystroke; on blur/Enter we clamp to [0, 120],
// enforce min <= max, and commit to filters.
function MinuteRangeInputs({ filters, update }) {
const [minDraft, setMinDraft] = React.useState(String(filters.minMin));
const [maxDraft, setMaxDraft] = React.useState(String(filters.maxMin));
// Re-sync the inputs when the filter changes from outside (e.g., a card
// click on the timing card sets a new range, or Clear All resets to 0/120).
React.useEffect(() => { setMinDraft(String(filters.minMin)); }, [filters.minMin]);
React.useEffect(() => { setMaxDraft(String(filters.maxMin)); }, [filters.maxMin]);
const commitMin = () => {
const n = parseInt(minDraft, 10);
if (!Number.isFinite(n)) { setMinDraft(String(filters.minMin)); return; }
const clamped = Math.max(0, Math.min(120, Math.min(n, filters.maxMin)));
update('minMin', clamped);
setMinDraft(String(clamped));
};
const commitMax = () => {
const n = parseInt(maxDraft, 10);
if (!Number.isFinite(n)) { setMaxDraft(String(filters.maxMin)); return; }
const clamped = Math.min(120, Math.max(0, Math.max(n, filters.minMin)));
update('maxMin', clamped);
setMaxDraft(String(clamped));
};
// Use type="text" with numeric input mode so we get a clean box without
// the browser's spinner buttons, while still triggering the numeric keypad
// on mobile. Reject non-digit keystrokes on input so the draft state is
// always a parseable integer (empty string allowed mid-typing).
const onInputChange = (setter) => (e) => {
const v = e.target.value.replace(/[^0-9]/g, '');
setter(v);
};
const numInputStyle = {
width: 46, padding: '4px 0',
background: 'rgba(255,255,255,0.04)',
border: `1px solid ${COLORS.line}`,
borderRadius: 4,
color: COLORS.ink,
fontSize: 12, fontFamily: 'JetBrains Mono, monospace',
textAlign: 'center',
};
return (
<>