{window.DPMDate ? window.DPMDate.monthYear(undefined, window.__dpmLang === "fr" ? "fr" : "en") : c.month_label}
{views.map((v) => (
))}
{view === "week" && (
<>
{c.days.map((d, i) => (
{d}
))}
{[0, 1, 2, 3, 4].map((col) => (
))}
{blocks.map((b) => (
))}
)}
{view === "day" && (
{blocks.slice().sort((a, b) => a.time.localeCompare(b.time)).map((b) => (
{b.time}
{c.events[b.ev]}
))}
)}
{view === "month" && (
{Array.from({ length: 35 }).map((_, i) => {
const day = i - 2;
const evs = [3, 8, 9, 14, 17, 22, 23, 28].includes(i);
const isToday = i === 16;
return (
0 && day <= 31 ? "border-[hsl(var(--border)/0.6)]" : "border-transparent text-[hsl(var(--muted-foreground)/0.3)]",
isToday && "bg-[hsl(var(--primary)/0.1)] border-[hsl(var(--primary)/0.4)]")}>
{day > 0 && day <= 31 ? day : ""}
{evs && day > 0 && day <= 31 && (
)}
);
})}
)}
);
}
/* ---------- Eisenhower matrix: drag tasks between quadrants ---------- */
function MatrixDnD({ t }) {
const m = t.matrix;
const QUAD = [
{ id: 0, key: "do", color: "0 84% 60%" },
{ id: 1, key: "plan", color: "263 70% 60%" },
{ id: 2, key: "delegate", color: "217 91% 60%" },
{ id: 3, key: "drop", color: "215 16% 55%" },
];
const [tasks, setTasks] = useState([
{ id: 1, idx: 0, q: 0 }, { id: 2, idx: 1, q: 1 }, { id: 3, idx: 2, q: 2 }, { id: 4, idx: 3, q: 3 },
]);
const [drag, setDrag] = useState(null); // {id, x, y}
const [hotQ, setHotQ] = useState(null);
const hostRef = useRef(null);
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-q]");
setHotQ(zone ? Number(zone.getAttribute("data-q")) : null);
};
const up = (ev) => {
const el = document.elementFromPoint(ev.clientX, ev.clientY);
const zone = el && el.closest("[data-q]");
if (zone) {
const q = Number(zone.getAttribute("data-q"));
setTasks((ts) => ts.map((x) => (x.id === id ? { ...x, q } : x)));
}
setDrag(null); setHotQ(null);
window.removeEventListener("pointermove", move);
window.removeEventListener("pointerup", up);
};
window.addEventListener("pointermove", move);
window.addEventListener("pointerup", up);
e.preventDefault();
};
const dragTask = drag && tasks.find((x) => x.id === drag.id);
return (
Today
{count}/4 {tk.done}
{tk.items.map((label, i) => (
{label}
{i === 0 && !done[i] && !}
))}
);
}
/* ---------- Habit tracker: tap days → streak + flame ---------- */
function HabitTrackerDemo({ t }) {
const h = t.habits;
const [days, setDays] = useState([true, true, true, true, false, false, false]);
const hostRef = useRef(null);
// streak = longest run of consecutive checked days (so 7 checks → 7)
const streak = (() => { let best = 0, run = 0; for (let i = 0; i < days.length; i++) { run = days[i] ? run + 1 : 0; if (run > best) best = run; } return best; })();
const toggle = (i, e) => {
const next = !days[i];
setDays((d) => d.map((v, k) => (k === i ? next : v)));
if (next) {
const host = hostRef.current;
const box = e.currentTarget.getBoundingClientRect();
const hb = host.getBoundingClientRect();
const b = document.createElement("div");
b.style.cssText = `position:absolute;left:${box.left - hb.left + box.width / 2}px;top:${box.top - hb.top + box.height / 2}px;`;
host.appendChild(b);
lpCelebrate(b, ["38 92% 56%", "20 90% 58%", "0 84% 62%"]);
setTimeout(() => b.remove(), 1200);
}
};
return (
{h.week.map((d, i) => (
))}
);
}
/* ---------- Pomodoro: ticking conic ring timer ---------- */
function PomodoroDemo({ t }) {
const f = t.focus;
const TOTAL = 25 * 60;
const [left, setLeft] = useState(TOTAL);
const [running, setRunning] = useState(false);
const [session, setSession] = useState(1);
useEffect(() => {
if (!running) return;
const id = setInterval(() => {
setLeft((l) => {
if (l <= 1) { setRunning(false); setSession((s) => (s % 4) + 1); return TOTAL; }
return l - 1;
});
}, 1000);
return () => clearInterval(id);
}, [running]);
const pct = 1 - left / TOTAL;
const mm = String(Math.floor(left / 60)).padStart(2, "0");
const ss = String(left % 60).padStart(2, "0");
return (
{f.session} {session} {f.of} 4
);
}
Object.assign(window, { LiveCalendarDemo, MatrixDnD, TaskCompleteDemo, HabitTrackerDemo, PomodoroDemo });