export default function App() { const [scheduleText, setScheduleText] = useAppStorage('wg_schedule', 'standup 9-10\nlunch 13-14\nclient 15:30-16:30') const [dayStart, setDayStart] = useAppStorage('wg_start', 8) const [dayEnd, setDayEnd] = useAppStorage('wg_end', 20) const [minGap, setMinGap] = useState(15) const parseT = (s) => { const m = s.trim().toLowerCase().match(/^(\d{1,2})(?::(\d{2}))?\s*(am|pm)?$/) if (!m) return null let h = parseInt(m[1], 10) const min = m[2] ? parseInt(m[2], 10) : 0 const ap = m[3] if (ap === 'pm' && h < 12) h += 12 if (ap === 'am' && h === 12) h = 0 if (h > 24 || min > 59) return null return h * 60 + min } const fmt = (m) => { const h = Math.floor(m / 60), mm = m % 60 const ap = h >= 12 ? 'pm' : 'am' let h12 = h % 12 if (h12 === 0) h12 = 12 return mm === 0 ? (h12 + ap) : (h12 + ':' + String(mm).padStart(2,'0') + ap) } const busyRanges = useMemo(() => { const lines = (scheduleText || '').split('\n').map(l => l.trim()).filter(Boolean) const out = [] for (const line of lines) { const m = line.match(/(\d{1,2}(?::\d{2})?\s*(?:am|pm)?)\s*[-–~]\s*(\d{1,2}(?::\d{2})?\s*(?:am|pm)?)/i) if (!m) continue const a = parseT(m[1]) const b = parseT(m[2]) if (a == null || b == null || b <= a) continue const label = line.replace(m[0], '').trim() || '(busy)' out.push({ start: a, end: b, label }) } return out.sort((x, y) => x.start - y.start) }, [scheduleText]) const gaps = useMemo(() => { const startM = dayStart * 60 const endM = dayEnd * 60 const out = [] let cursor = startM for (const r of busyRanges) { if (r.end <= startM || r.start >= endM) continue const s = Math.max(cursor, startM) const e = Math.min(r.start, endM) if (e - s >= minGap) out.push({ start: s, end: e }) cursor = Math.max(cursor, r.end) } if (cursor < endM && endM - cursor >= minGap) out.push({ start: cursor, end: endM }) return out }, [busyRanges, dayStart, dayEnd, minGap]) const WORKOUTS = { 15: { name: '15-min Bodyweight', steps: ['1 min jumping jacks','45s squats','45s pushups','45s plank','30s rest','repeat ×4'] }, 20: { name: '20-min Strength', steps: ['2 min jog in place','12 squats','10 pushups','15s plank','12 lunges (each leg)','60s rest','repeat ×4'] }, 30: { name: '30-min Mixed Cardio', steps: ['5 min light jog','30s burpees / 30s rest ×6','45s mountain climbers','45s squats','30s plank','60s rest','repeat ×3'] }, 45: { name: '45-min Full Workout', steps: ['10 min warmup walk/jog','3 rounds: 15 squats, 12 pushups, 10 lunges/leg, 30s plank','60s rest between rounds','5 min cooldown stretch','repeat strength block ×2'] }, } const pickWorkout = (mins) => { if (mins >= 45) return { dur: 45, ...WORKOUTS[45] } if (mins >= 30) return { dur: 30, ...WORKOUTS[30] } if (mins >= 20) return { dur: 20, ...WORKOUTS[20] } return { dur: 15, ...WORKOUTS[15] } } const totalGapMin = gaps.reduce((a, g) => a + (g.end - g.start), 0) const headerText = gaps.length === 0 ? 'No gaps found.' : (gaps.length + ' workout window' + (gaps.length === 1 ? '' : 's')) return (

Your busy times today

setScheduleText(e.target.value)}
            placeholder={'meetings 9-10\nlunch 13-14\nclient 15:30-16:30'}
            className="w-full h-24 px-3 py-2 rounded-md bg-stone-50 border border-stone-200 text-sm focus:outline-none focus:border-stone-900 resize-none font-mono"
          />
          <p className="text-[11px] text-stone-500 mt-1">One range per line. Formats like <code>9-10</code>, <code>1:30pm-2:30pm</code>, <code>13:00-14:30 lunch</code> all work.</p>
        </div>
        <div className="grid grid-cols-3 gap-2">
          <label className="text-xs text-stone-600">Day start
            <input type="number" min={0} max={23} value={dayStart} onChange={(e) => setDayStart(Number(e.target.value))} className="mt-0.5 w-full px-2 py-1.5 rounded-md bg-stone-50 border border-stone-200 text-sm" />
          </label>
          <label className="text-xs text-stone-600">Day end
            <input type="number" min={1} max={24} value={dayEnd} onChange={(e) => setDayEnd(Number(e.target.value))} className="mt-0.5 w-full px-2 py-1.5 rounded-md bg-stone-50 border border-stone-200 text-sm" />
          </label>
          <label className="text-xs text-stone-600">Min gap (min)
            <input type="number" min={5} max={120} value={minGap} onChange={(e) => setMinGap(Number(e.target.value))} className="mt-0.5 w-full px-2 py-1.5 rounded-md bg-stone-50 border border-stone-200 text-sm" />
          </label>
        </div>
      </div>

<div className="flex-1 overflow-y-auto px-4 py-4">
        <div className="flex items-baseline justify-between mb-3">
          <h2 className="text-sm font-semibold text-stone-700">{headerText}</h2>
          {totalGapMin > 0 && <span className="text-xs text-stone-500">{totalGapMin} min total</span>}
        </div>

{busyRanges.length === 0 && (
          <div className="text-sm text-stone-500 py-6 text-center">Add your busy times above. We'll find the open windows.</div>
        )}

<div className="space-y-3">
          {gaps.map((g, i) => {
            const dur = g.end - g.start
            const w = pickWorkout(dur)
            return (
              <div key={i} className="bg-white border border-stone-200 rounded-lg p-4">
                <div className="flex items-baseline justify-between mb-2">
                  <div>
                    <div className="text-base font-semibold tabular-nums">{fmt(g.start)} – {fmt(g.end)}</div>
                    <div className="text-xs text-stone-500">{dur} minute window</div>
                  </div>
                  <div className="text-right">
                    <div className="text-xs uppercase tracking-wider text-emerald-600 font-semibold">{w.dur} min</div>
                    <div className="text-sm font-medium">{w.name}</div>
                  </div>
                </div>
                <ul className="text-sm text-stone-700 space-y-0.5 pl-4 list-disc marker:text-stone-300">
                  {w.steps.map((s, j) => <li key={j}>{s}</li>)}
                </ul>
              </div>
            )
          })}
        </div>

{busyRanges.length > 0 && (
          <div className="mt-6 pt-4 border-t border-stone-200">
            <div className="text-xs font-semibold text-stone-500 uppercase tracking-wider mb-2">Detected busy</div>
            <div className="flex flex-wrap gap-1.5">
              {busyRanges.map((b, i) => (
                <span key={i} className="text-xs bg-stone-200 text-stone-700 px-2 py-1 rounded">{fmt(b.start)}–{fmt(b.end)} {b.label}</span>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  )
}</article></body></html>