/* global React, useState, useEffect, useRef, cn, Icons, window */ /* ============================================================ LANDING — deep demos #4: Calendar pro, Spaces, Rules ============================================================ */ const LP_CAL_KIND = { event: "217 91% 60%", task: "263 70% 60%", focus: "142 70% 50%" }; /* Find a non-overlapping top (%) in a column near `desired`, pushing below any block it would collide with. Keeps placed events from stacking on top of each other. */ function freeTop(col, h, blocks, desired) { const inCol = blocks.filter((b) => b.col === col).sort((a, b) => a.top - b.top); let top = Math.max(0, Math.min(100 - h, desired)); let moved = true, guard = 0; while (moved && guard < 24) { moved = false; guard++; for (const b of inCol) { if (top < b.top + b.h && top + h > b.top) { top = b.top + b.h + 1; moved = true; } } if (top + h > 100) { top = Math.max(0, 100 - h); break; } } return Math.round(top); } /* ---------- Calendar pro: drag-from-inbox · slot suggestion · share ---------- */ function CalendarProDemo({ t }) { const c = t.calendarPro; const [blocks, setBlocks] = useState([ { id: 1, col: 0, top: 8, h: 12, kind: "event", label: "Stand-up" }, { id: 2, col: 1, top: 30, h: 22, kind: "focus", label: "Deep work" }, { id: 3, col: 3, top: 16, h: 14, kind: "event", label: "1:1 Léa" }, ]); const [inbox, setInbox] = useState(c.tasks.map((label, i) => ({ id: "t" + i, label }))); const [drag, setDrag] = useState(null); // {id,label,x,y} const [toast, setToast] = useState(null); const gridRef = useRef(null); const nextId = useRef(10); // keep inbox labels synced to language useEffect(() => { setInbox((cur) => cur.map((it, i) => (c.tasks[i] ? { ...it, label: c.tasks[i] } : it)).filter((_, i) => i < c.tasks.length)); }, [t]); const startDrag = (e, item) => { setDrag({ id: item.id, label: item.label, x: e.clientX, y: e.clientY }); const move = (ev) => setDrag((d) => (d ? { ...d, x: ev.clientX, y: ev.clientY } : d)); const up = (ev) => { const grid = gridRef.current; if (grid) { const r = grid.getBoundingClientRect(); if (ev.clientX >= r.left && ev.clientX <= r.right && ev.clientY >= r.top && ev.clientY <= r.bottom) { const col = Math.max(0, Math.min(4, Math.floor(((ev.clientX - r.left) / r.width) * 5))); const desired = ((ev.clientY - r.top) / r.height) * 100 - 8; setBlocks((bs) => [...bs, { id: nextId.current++, col, top: freeTop(col, 16, bs, desired), h: 16, kind: "task", label: item.label.split(" · ")[0] }]); setInbox((cur) => cur.filter((x) => x.id !== item.id)); } } setDrag(null); window.removeEventListener("pointermove", move); window.removeEventListener("pointerup", up); }; window.addEventListener("pointermove", move); window.addEventListener("pointerup", up); e.preventDefault(); }; const placeSuggested = () => { if (!inbox.length) return; const item = inbox[0]; setBlocks((bs) => [...bs, { id: nextId.current++, col: 2, top: freeTop(2, 18, bs, 12), h: 18, kind: "focus", label: item.label.split(" · ")[0] }]); setInbox((cur) => cur.filter((x) => x.id !== item.id)); flash(c.suggest + " → 09:00 ✓"); }; const flash = (msg) => { setToast(msg); setTimeout(() => setToast(null), 2200); }; const planTomorrow = () => { setBlocks((bs) => { const t1 = freeTop(4, 14, bs, 20); const b1 = { id: nextId.current++, col: 4, top: t1, h: 14, kind: "task", label: "Review" }; const t2 = freeTop(4, 18, [...bs, b1], t1 + 16); const b2 = { id: nextId.current++, col: 4, top: t2, h: 18, kind: "focus", label: "Deep work" }; return [...bs, b1, b2]; }); flash(c.planTomorrow + " ✓"); }; // suggested free slot (Wed) recomputed live so it never sits under a placed block const suggTop = freeTop(2, 18, blocks, 12); return (
{/* legend + actions */}
{Object.keys(c.legend).map((kk) => ( {c.legend[kk]} ))}
{/* grid */}
{c.days.map((d, i) =>
{d}
)}
{[0,1,2,3,4].map((col) =>
)} {blocks.map((b) => (
{b.label}
))} {/* suggested free slot — only while there is something to place */} {inbox.length > 0 && (
)}
{/* inbox + suggestion */}
{c.inbox}
{inbox.map((it) => ( ))} {inbox.length === 0 &&
— all scheduled —
}
{inbox.length > 0 ? (
{c.suggest}
Wed 09:00 · {c.suggestSub}
) : (
{c.shared.split(" — ")[0] || "Done"}
)}
{toast && (
{toast}
)}
); } /* ---------- Spaces: switch context → whole page re-tints + sharing ---------- */ function SpacesDemo({ t, onAccent }) { const sp = t.spaces; const [active, setActive] = useState("pro"); const space = sp.list.find((s) => s.id === active) || sp.list[0]; useEffect(() => () => onAccent && onAccent(null), []); // restore on unmount const pick = (s) => { setActive(s.id); onAccent && onAccent(s.id === "all" ? null : s.c); }; const counts = { all: 24, pro: 9, perso: 11, etudes: 5 }; // editable sharing: per person, an access level per module (0 none · 1 view · 2 edit) const [perms, setPerms] = useState(() => sp.people.map((p, i) => (i === 0 ? null : i === 1 ? [2, 1, 0, 1, 0] : [1, 1, 0, 0, 0]))); const [sel, setSel] = useState(1); const setLevel = (mi, li) => setPerms((ps) => ps.map((row, ri) => (ri === sel && row ? row.map((x, k) => (k === mi ? li : x)) : row))); const roleOf = (i) => { if (i === 0) return null; const row = perms[i] || []; if (row.some((v) => v === 2)) return sp.levels[2]; if (row.some((v) => v === 1)) return sp.levels[1]; return sp.levels[0]; }; return (
{sp.list.map((s) => { const Ic = Icons[s.icon] || Icons.Layers; const on = active === s.id; return ( ); })}
{/* scoped preview, tinted by space */}
{React.createElement(Icons[space.icon] || Icons.Layers, { size: 16 })}
{space.n}
{space.hours}
{counts[space.id]}
{sp.scoped}
{/* sharing — editable per-member, per-module access (like the app) */}
{sp.members} {sp.invite}
{sp.people.map((p, i) => { const owner = i === 0; const selected = i === sel; return ( ); })}
{/* per-module access editor for the selected sharee */}
{sp.permsFor} {sp.people[sel].n.split(" ")[0]}
{sp.modules.map((mod, mi) => { const v = (perms[sel] || [])[mi] || 0; return (
{mod}
{sp.levels.map((lvl, li) => ( ))}
); })}
{sp.tapHint}
); } /* ---------- Rules: If… Then… toggles + run counter + templates ---------- */ function RulesDemo({ t }) { const r = t.rules; const [rules, setRules] = useState(r.items.map((it, i) => ({ ...it, id: i }))); useEffect(() => { setRules((cur) => cur.map((x, i) => ({ ...x, n: r.items[i].n, d: r.items[i].d }))); }, [t]); const toggle = (id) => setRules((rs) => rs.map((x) => (x.id === id ? { ...x, on: !x.on, runs: !x.on ? x.runs + 1 : x.runs } : x))); return (
{rules.map((rule) => { const Ic = Icons[rule.icon] || Icons.Shield; return (
{rule.n}
{rule.d}
{rule.runs} {r.runs}
); })}
{r.templates}
{["Focus Time", "Lunch break", "Meeting buffers"].map((tpl) => ( {tpl} ))}
); } Object.assign(window, { CalendarProDemo, SpacesDemo, RulesDemo });