/* global React, useState, useEffect, useRef, cn, Icons, lpCelebrate, window */ /* ============================================================ LANDING — deep demos #3: Tasks/Kanban, Focus deep-work, Music ============================================================ */ /* One-shot column arrival FX via Web Animations API (no extra CSS). */ function fireColumnFx(host, type, cx, cy, color) { if (!host) return; const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches; if (type === "confetti") { const b = document.createElement("div"); b.style.cssText = `position:absolute;left:${cx}px;top:${cy}px;`; host.appendChild(b); lpCelebrate(b, [color, "263 70% 62%", "142 70% 52%", "38 92% 56%"]); setTimeout(() => b.remove(), 1100); return; } if (reduce) return; const el = document.createElement("div"); el.style.cssText = `position:absolute;left:${cx}px;top:${cy}px;transform:translate(-50%,-50%);pointer-events:none;z-index:6;display:flex;align-items:center;justify-content:center;`; if (type === "glow") { el.style.width = "92px"; el.style.height = "92px"; el.style.borderRadius = "50%"; el.style.background = `radial-gradient(circle, hsl(${color} / 0.6), transparent 70%)`; host.appendChild(el); el.animate([{ opacity: 0, transform: "translate(-50%,-50%) scale(0.5)" }, { opacity: 1, offset: 0.4 }, { opacity: 0, transform: "translate(-50%,-50%) scale(1.4)" }], { duration: 750, easing: "cubic-bezier(.33,1,.68,1)" }).onfinish = () => el.remove(); return; } el.style.fontSize = "30px"; el.style.fontWeight = "900"; el.style.color = `hsl(${color})`; el.textContent = type === "bounce" ? "↑" : "✓"; host.appendChild(el); const kf = type === "bounce" ? [{ opacity: 0, transform: "translate(-50%,10px)" }, { opacity: 1, transform: "translate(-50%,-16px)", offset: 0.4 }, { opacity: 1, transform: "translate(-50%,2px)", offset: 0.7 }, { opacity: 0, transform: "translate(-50%,-6px)" }] : [{ opacity: 0, transform: "translate(-50%,-50%) scale(0.3)" }, { opacity: 1, transform: "translate(-50%,-50%) scale(1.2)", offset: 0.5 }, { opacity: 0, transform: "translate(-50%,-50%) scale(1)" }]; el.animate(kf, { duration: 820, easing: "cubic-bezier(.33,1,.68,1)" }).onfinish = () => el.remove(); } const LP_PRIO = { high: "0 84% 60%", med: "38 92% 55%", low: "142 70% 50%" }; /* ---------- Tasks: 5 views + interactive Kanban ---------- */ function KanbanDemo({ t }) { const k = t.tasksPro; const [view, setView] = useState("Board"); const viewKey = (label, i) => ["List", "Board", "Timeline", "Calendar", "Stats"][i]; const [cards, setCards] = useState([ { id: 1, idx: 0, col: 0 }, { id: 2, idx: 1, col: 1 }, { id: 3, idx: 2, col: 1 }, { id: 4, idx: 3, col: 2 }, ]); const [fx, setFx] = useState("confetti"); const [drag, setDrag] = useState(null); const [hotCol, setHotCol] = useState(null); const hostRef = useRef(null); const FX_KEYS = ["confetti", "glow", "check", "bounce"]; const startDrag = (e, id) => { setDrag({ id, x: e.clientX, y: e.clientY }); const move = (ev) => { setDrag((d) => (d ? { ...d, x: ev.clientX, y: ev.clientY } : d)); const el = document.elementFromPoint(ev.clientX, ev.clientY); const zone = el && el.closest("[data-col]"); setHotCol(zone ? Number(zone.getAttribute("data-col")) : null); }; const up = (ev) => { const el = document.elementFromPoint(ev.clientX, ev.clientY); const zone = el && el.closest("[data-col]"); if (zone) { const col = Number(zone.getAttribute("data-col")); setCards((cs) => cs.map((c) => (c.id === id ? { ...c, col } : c))); if (col === 2) { const host = hostRef.current; const hb = host.getBoundingClientRect(); const card = cards.find((c) => c.id === id); fireColumnFx(host, fx, ev.clientX - hb.left, ev.clientY - hb.top, card ? k.cards[card.idx].c : "263 70% 60%"); } } setDrag(null); setHotCol(null); window.removeEventListener("pointermove", move); window.removeEventListener("pointerup", up); }; window.addEventListener("pointermove", move); window.addEventListener("pointerup", up); e.preventDefault(); }; const dragCard = drag && cards.find((c) => c.id === drag.id); const Avatar = ({ who, c }) => ( {who} ); return (
{/* view switcher */}
{k.views.map((label, i) => { const vk = viewKey(label, i); return ( ); })}
{view === "Board" && ( <>
{k.columns.map((colName, ci) => { const colCards = cards.filter((c) => c.col === ci && !(drag && drag.id === c.id)); const wip = ci === 1; const over = wip && colCards.length > 3; return (
{colName} {wip ? {k.wip} {colCards.length}/3 : {colCards.length}}
{colCards.map((c) => { const card = k.cards[c.idx]; return ( ); })}
); })}
{/* per-column arrival FX selector */}
{k.fxLabel} · Done
{FX_KEYS.map((key, i) => ( ))}
)} {view === "List" && (
{k.cards.map((card, i) => (
{card.t}
))}
)} {view === "Timeline" && (
{k.cards.map((card, i) => (
{card.t}
))}
MonWedFri
)} {view === "Calendar" && (
{[0,1,2,3,4].map((d) => (
{["M","T","W","T","F"][d]} {k.cards[d % k.cards.length] && d < 4 && (
{k.cards[d % k.cards.length].t.slice(0, 9)}
)}
))}
)} {view === "Stats" && (
72% done
{[["Completed", 18, "142 70% 50%"], ["In progress", 5, "38 92% 55%"], ["Backlog", 2, "215 16% 55%"]].map(([l, v, c], i) => (
{l}{v}
))}
)} {dragCard && (
{k.cards[dragCard.idx].t}
)}
); } /* ---------- Music widget (used inside Focus) ---------- */ function MusicWidget({ t, isBreak = false }) { const m = t.music; const [connected, setConnected] = useState(false); const [playing, setPlaying] = useState(true); const [plIdx, setPlIdx] = useState(0); const [muteBreak, setMuteBreak] = useState(true); const pl = m.playlists[plIdx]; const muted = muteBreak && isBreak; // actually silenced right now const audible = playing && !muted; // equalizer only moves when truly audible if (!connected) { return (
{m.label}
{m.services.map((s, i) => ( ))}
{m.connect} → {m.friendly} ✦
); } return (
{audible ? (
{[0,1,2,3].map((i) => )}
) : ( )}
{pl.n} {pl.score >= 70 && {pl.score}}
{muted ? {m.mutedNow} : `${m.track} · ${pl.c} ${m.nowPlaying.toLowerCase()}`}
{m.playlists.map((p, i) => ( ))}
); } /* Inline double-click-to-edit minutes value. */ function EditMin({ value, onCommit, lo, hi, disabled, accent, t }) { const [editing, setEditing] = useState(false); const [draft, setDraft] = useState(String(value)); useEffect(() => { setDraft(String(value)); }, [value]); const commit = () => { const n = parseInt(draft, 10); onCommit(isNaN(n) ? value : Math.max(lo, Math.min(hi, n))); setEditing(false); }; if (editing && !disabled) { return ( setDraft(e.target.value)} onBlur={commit} onKeyDown={(e) => { if (e.key === "Enter") commit(); if (e.key === "Escape") { setDraft(String(value)); setEditing(false); } }} className="w-11 text-center text-[12px] font-bold tabular-nums rounded-[6px] border border-[hsl(var(--primary)/0.6)] bg-[hsl(var(--background))] px-1 py-0.5 focus:outline-none focus:ring-2 focus:ring-[hsl(var(--ring))]" /> ); } return ( ); } /* ---------- Focus deep-work: lock-in while running + break phase + music ---------- */ function FocusProDemo({ t }) { const f = t.focusPro; const [focusMin, setFocusMin] = useState(25); const [breakMin, setBreakMin] = useState(5); const FOCUS = focusMin * 60, BREAK = breakMin * 60; const [phase, setPhase] = useState("focus"); // focus | break const [left, setLeft] = useState(FOCUS); const [running, setRunning] = useState(false); const [session, setSession] = useState(1); const [breaks, setBreaks] = useState(0); const [lockIdx, setLockIdx] = useState(0); const [hyper, setHyper] = useState(false); const [ringEdit, setRingEdit] = useState(false); const [ringDraft, setRingDraft] = useState(""); const [toast, setToast] = useState(null); const isBreak = phase === "break"; const total = isBreak ? BREAK : FOCUS; const toastRef = useRef(); const flashToast = (label, color) => { setToast({ label, color }); clearTimeout(toastRef.current); toastRef.current = setTimeout(() => setToast(null), 1600); }; // Smooth DEMO clock — each phase fast-forwards over a few fixed seconds. // setInterval (not rAF, which pauses in hidden frames) + a real-time delta so // the countdown GLIDES (no jumpy steps) and focus → break → focus (plus // "mute on break") is visible in seconds. useEffect(() => { if (!running) return; const phaseTotal = isBreak ? BREAK : FOCUS; const demoMs = isBreak ? 5000 : 7000; // wall-clock length of this phase in the demo const rate = phaseTotal / demoMs; // clock-seconds consumed per real millisecond let last = performance.now(); const id = setInterval(() => { const now = performance.now(); const dt = now - last; last = now; setLeft((l) => Math.max(0, l - rate * dt)); }, 60); return () => clearInterval(id); }, [running, phase, focusMin, breakMin]); // eslint-disable-line // phase transition when the clock reaches zero useEffect(() => { if (!running || left > 0) return; if (phase === "focus") { setBreaks((b) => b + 1); setPhase("break"); setLeft(BREAK); flashToast(f.breakToast, "142 70% 50%"); } else { setSession((s) => (s % 4) + 1); setPhase("focus"); setLeft(FOCUS); flashToast(f.focusToast, "var(--primary)"); } }, [left, running, phase]); // eslint-disable-line // keep idle display synced to the chosen durations useEffect(() => { if (!running) setLeft(phase === "break" ? BREAK : FOCUS); }, [focusMin, breakMin]); // eslint-disable-line const pct = total ? Math.max(0, Math.min(1, 1 - left / total)) : 0; const secs = Math.ceil(left); const mm = String(Math.floor(secs / 60)).padStart(2, "0"); const ss = String(secs % 60).padStart(2, "0"); const ringHsl = isBreak ? "142 70% 50%" : "var(--primary)"; const locked = running; // while running, the rest of the panel is locked const reset = () => { setRunning(false); setPhase("focus"); setLeft(FOCUS); setToast(null); }; const skipBreak = () => { setSession((s) => (s % 4) + 1); setPhase("focus"); setLeft(FOCUS); flashToast(f.focusToast, "var(--primary)"); }; const PRESETS = [[25, 5], [50, 10], [90, 15]]; // big-ring double-click → edit current phase's minutes inline const openRingEdit = () => { if (locked) return; setRingDraft(String(isBreak ? breakMin : focusMin)); setRingEdit(true); }; const commitRingEdit = () => { const n = parseInt(ringDraft, 10); if (!isNaN(n)) { if (isBreak) setBreakMin(Math.max(1, Math.min(30, n))); else setFocusMin(Math.max(5, Math.min(90, n))); } setRingEdit(false); }; return (
{/* ring */}
{/* phase-change toast */} {toast && (
{toast.label}
)}
{ringEdit ? (
setRingDraft(e.target.value)} onBlur={commitRingEdit} onKeyDown={(e) => { if (e.key === "Enter") commitRingEdit(); if (e.key === "Escape") setRingEdit(false); }} className="w-14 text-center text-[26px] font-bold tabular-nums bg-transparent border-b-2 border-[hsl(var(--primary))] focus:outline-none" /> {f.min}
) : ( )}
{t.focus.session} {session}/4 {breaks} {f.breaks} {f.demoBadge}
{isBreak ? : }
{/* queue + music — locked while the timer runs */}
{f.queue} {locked && {f.locked}}
{f.tasks.map((task, i) => ( ))}
{/* music stays live during break so "mute on break" is visible; only locked from edits */}
{locked && !isBreak && (
{f.lockedNote}
)}
); } Object.assign(window, { KanbanDemo, MusicWidget, FocusProDemo, fireColumnFx });