/* global React, Icons, Button, Card, Badge, Input, Checkbox, Switch, Logo, cn, useState, useEffect, useLang, applyAccent */ /* ============================================================ PAGE 3 — ONBOARDING (/onboarding) · rebuilt A guided, two-pane onboarding. The LEFT pane is the step the user acts on; the RIGHT pane is a *live "Tomorrow" preview* that fills up as they answer — connect a calendar and meetings appear, add tasks and they land in a tray, choose your rhythm and they snap onto your energy peak. It ends on a celebratory reward screen showing the day DPM just built. Authored bilingually (FR default / EN) via useLang(). ============================================================ */ const ACCENT_TRIPLE = { violet: "263 70% 60%", blue: "217 85% 60%", teal: "174 62% 47%", green: "142 65% 48%", amber: "38 90% 52%", orange: "20 88% 55%", rose: "330 78% 58%", red: "0 80% 58%", }; const accentTriple = (id) => ACCENT_TRIPLE[id] || ACCENT_TRIPLE.violet; const SPACE_COLORS = ["217 85% 60%", "174 62% 47%", "330 78% 58%", "38 90% 52%", "142 65% 48%", "263 70% 60%"]; const PERSONAS = [ { id: "founder", icon: Icons.Briefcase, accent: "blue", chrono: "lark", fr: { t: "Entrepreneur", d: "Plusieurs projets, des décisions en rafale.", spaces: ["Travail", "Clients", "Perso"], tasks: ["Préparer le pitch investisseurs", "Rappeler le client Lyon", "Relire le contrat"], goal: "Lancer la nouvelle offre ce trimestre" }, en: { t: "Founder", d: "Many projects, decisions back-to-back.", spaces: ["Work", "Clients", "Personal"], tasks: ["Prep the investor pitch", "Call the Lyon client", "Review the contract"], goal: "Launch the new offer this quarter" }, }, { id: "student", icon: Icons.GraduationCap, accent: "amber", chrono: "owl", fr: { t: "Étudiant·e", d: "Cours, projets et vie — sans clash.", spaces: ["Cours", "Projets", "Perso"], tasks: ["Réviser le partiel de stats", "Rendre le rapport de projet", "Réserver la salle de révision"], goal: "Valider mon semestre avec mention" }, en: { t: "Student", d: "Classes, projects and life — no clashes.", spaces: ["Classes", "Projects", "Personal"], tasks: ["Revise for the stats exam", "Submit the project report", "Book the study room"], goal: "Pass my semester with honors" }, }, { id: "manager", icon: Icons.Users, accent: "violet", chrono: "third", fr: { t: "Manager", d: "1-1, deep work et équipe à protéger.", spaces: ["Équipe", "Deep work", "Perso"], tasks: ["Préparer les 1-1 de la semaine", "Relire la PR de Sarah", "Caler le point produit"], goal: "Livrer la refonte sans heures sup" }, en: { t: "Manager", d: "1-1s, deep work and a team to protect.", spaces: ["Team", "Deep work", "Personal"], tasks: ["Prep this week's 1-1s", "Review Sarah's PR", "Schedule the product sync"], goal: "Ship the redesign without overtime" }, }, { id: "freelancer", icon: Icons.Compass, accent: "teal", chrono: "lark", fr: { t: "Freelance", d: "Plusieurs clients, une seule semaine.", spaces: ["Client A", "Client B", "Perso"], tasks: ["Envoyer le devis au prospect", "Finir la maquette client", "Facturer le mois"], goal: "Atteindre 5 k€ de CA ce mois" }, en: { t: "Freelancer", d: "Several clients, one single week.", spaces: ["Client A", "Client B", "Personal"], tasks: ["Send the prospect quote", "Finish the client mockup", "Invoice the month"], goal: "Hit €5k revenue this month" }, }, ]; const CHRONOS = [ { id: "lark", icon: Icons.Sunrise, peak: [9, 11], path: "M0,72 C15,22 26,14 36,26 C56,56 76,82 100,90 L100,100 L0,100 Z", fr: { t: "Alouette", d: "Pic d'énergie le matin, couché tôt.", hrs: "05:00 – 21:00", peak: "matin" }, en: { t: "Early bird", d: "Energy peak in the morning, early to bed.", hrs: "05:00 – 21:00", peak: "morning" } }, { id: "third", icon: Icons.Sun, peak: [12, 14], path: "M0,82 C20,62 36,26 50,21 C64,26 80,62 100,84 L100,100 L0,100 Z", fr: { t: "Troisième oiseau", d: "Au mieux au milieu de la journée.", hrs: "07:00 – 23:00", peak: "midi" }, en: { t: "Third bird", d: "Best around the middle of the day.", hrs: "07:00 – 23:00", peak: "midday" } }, { id: "owl", icon: Icons.Moon, peak: [16, 18], path: "M0,90 C26,82 46,56 66,26 C76,18 88,18 100,30 L100,100 L0,100 Z", fr: { t: "Hibou", d: "Tu travailles mieux le soir.", hrs: "10:00 – 02:00", peak: "fin de journée" }, en: { t: "Night owl", d: "You work better in the evening.", hrs: "10:00 – 02:00", peak: "evening" } }, ]; const WATCHES = [ { id: "apple", name: "Apple Watch" }, { id: "garmin", name: "Garmin" }, { id: "fitbit", name: "Fitbit" }, { id: "oura", name: "Oura" }, ]; const HABIT_SEEDS = [ { id: "sport", icon: Icons.Run, fr: "Sport", en: "Exercise" }, { id: "read", icon: Icons.Book, fr: "Lecture", en: "Reading" }, { id: "medit", icon: Icons.Brain, fr: "Méditation", en: "Meditation" }, { id: "water", icon: Icons.Heart, fr: "Bien-être", en: "Wellness" }, ]; const ACCENTS = [ { id: "violet" }, { id: "blue" }, { id: "teal" }, { id: "green" }, { id: "amber" }, { id: "orange" }, { id: "rose" }, { id: "red" }, ]; /* Sample meetings revealed once a calendar is connected. */ const MEETINGS = { fr: [{ t: "Stand-up équipe", at: 9, dur: 0.5 }, { t: "1:1 Sarah", at: 14, dur: 1 }, { t: "Point produit", at: 16.5, dur: 0.5 }], en: [{ t: "Team stand-up", at: 9, dur: 0.5 }, { t: "1:1 Sarah", at: 14, dur: 1 }, { t: "Product sync", at: 16.5, dur: 0.5 }], }; /* ── Bilingual UI strings ── */ const L = { fr: { skip: "Passer", previous: "Précédent", next: "Suivant", finish: "Entrer dans DPM", stepOf: (n, N) => `Étape ${n} sur ${N}`, steps: [ { t: "Profil", s: "Qui es-tu ? On adapte l'app autour de toi." }, { t: "Calendriers", s: "Connecte tes agendas — DPM les unifie." }, { t: "Tes Espaces", s: "Sépare tes mondes. Une couleur par contexte." }, { t: "Premières tâches", s: "Pose 3 choses à faire. On les placera." }, { t: "Ton objectif", s: "Une intention pour donner un cap à ta semaine." }, { t: "Ton rythme", s: "Quand es-tu au top ? On planifie autour." }, { t: "À ton image", s: "Une couleur, deux réglages, et c'est parti." }, ], personaTitle: "Pour commencer, qui es-tu ?", personaHint: "On pré-remplit tes espaces, tâches et rythme. Tout est modifiable.", nameLabel: "Ton prénom", namePh: "Camille", nameHint: "On l'utilise pour personnaliser ton espace et ton avatar.", nameReq: "Indique ton prénom pour continuer.", required: "Requis", optional: "Optionnel", estLeft: "~2 min restantes", estAlmost: "Moins d'une minute", calMore: "Tu pourras en connecter d'autres depuis les réglages.", connect: "Connecter", connected: "Connecté", spacesHint: "Les Espaces filtrent calendriers, tâches et objectifs. Active ceux qui te parlent.", addSpace: "Ajouter un espace", tasksHint: "Commence petit. Tu pourras tout planifier ensuite.", tasksPh: ["Préparer la maquette du sprint", "Rappeler le client", "Réserver le restaurant"], goalLabel: "Mon objectif principal", goalPh: "Ex. Lancer le produit en juin", goalSuggest: "Suggestions", goalSeeds: ["Lancer le produit ce trimestre", "Reprendre le sport 3×/semaine", "Finir le side-project"], habitLabel: "Démarre une habitude (optionnel)", chronoLabel: "Ton chronotype", watchLabel: "Ou laisse DPM l'apprendre tout seul", watchHint: "Connecte ta montre — DPM lira ton sommeil et affinera ton chronotype automatiquement.", watchDone: "Connectée · DPM affinera ton pic au fil des nuits.", hoursLabel: "Tes heures de travail", start: "Début", end: "Fin", daysLabel: "Jours actifs", accentLabel: "Ta couleur d'accent", accentHint: "Toute l'app se recolore en direct.", notifLabel: "Rappels intelligents", notifDesc: "Au bon moment, jamais du spam.", prefs: [ { l: "Pauses automatiques", d: "15 min entre les réunions" }, { l: "Bloc focus", d: "2 h protégées sur ton pic d'énergie" }, { l: "Mode IA", d: "Suggestions de planning intelligentes" }, ], // preview pvTomorrow: "Demain", pvDate: "Jeu. 12 juin", pvUnplanned: "À planifier", pvEnergy: "Énergie", pvGoal: "Objectif", pvFocus: "Focus", pvConnect: "Connecte un agenda pour voir tes réunions", pvEmpty: "Ta journée se construit ici, à chaque étape.", // reward rwBadge: "C'est prêt", rwTitle: "Voici ta journée de demain.", rwSub: "DPM a placé tes tâches sur ton pic d'énergie, posé tes pauses et protégé ton focus. Tu n'as plus qu'à vivre la journée.", rwStatTasks: "tâches placées", rwStatFocus: "de focus protégé", rwStatPeak: (p) => `calées sur ton pic du ${p}`, rwGoalOn: "Ton objectif est en vue :", }, en: { skip: "Skip", previous: "Back", next: "Next", finish: "Enter DPM", stepOf: (n, N) => `Step ${n} of ${N}`, steps: [ { t: "Profile", s: "Who are you? We'll shape the app around you." }, { t: "Calendars", s: "Connect your calendars — DPM unifies them." }, { t: "Your Spaces", s: "Separate your worlds. One color per context." }, { t: "First tasks", s: "Drop 3 things to do. We'll place them." }, { t: "Your goal", s: "One intention to give your week a direction." }, { t: "Your rhythm", s: "When are you at your best? We plan around it." }, { t: "Make it yours", s: "A color, two toggles, and you're in." }, ], personaTitle: "To get started, who are you?", personaHint: "We pre-fill your spaces, tasks and rhythm. Everything stays editable.", nameLabel: "Your first name", namePh: "Camille", nameHint: "We use it to personalize your workspace and avatar.", nameReq: "Enter your first name to continue.", required: "Required", optional: "Optional", estLeft: "~2 min left", estAlmost: "Less than a minute", calMore: "You can connect more later from settings.", connect: "Connect", connected: "Connected", spacesHint: "Spaces filter calendars, tasks and goals. Turn on the ones that fit.", addSpace: "Add a space", tasksHint: "Start small. You can schedule everything afterwards.", tasksPh: ["Prep the sprint mockup", "Call the client", "Book the restaurant"], goalLabel: "My main goal", goalPh: "e.g. Launch the product in June", goalSuggest: "Suggestions", goalSeeds: ["Launch the product this quarter", "Get back to sport 3×/week", "Finish the side-project"], habitLabel: "Start a habit (optional)", chronoLabel: "Your chronotype", watchLabel: "Or let DPM learn it for you", watchHint: "Connect your watch — DPM reads your sleep and refines your chronotype automatically.", watchDone: "Connected · DPM will refine your peak over a few nights.", hoursLabel: "Your working hours", start: "Start", end: "End", daysLabel: "Active days", accentLabel: "Your accent color", accentHint: "The whole app recolors, live.", notifLabel: "Smart reminders", notifDesc: "At the right moment, never spam.", prefs: [ { l: "Automatic breaks", d: "15 min between meetings" }, { l: "Focus block", d: "2 h protected on your energy peak" }, { l: "AI mode", d: "Smart planning suggestions" }, ], pvTomorrow: "Tomorrow", pvDate: "Thu, Jun 12", pvUnplanned: "To schedule", pvEnergy: "Energy", pvGoal: "Goal", pvFocus: "Focus", pvConnect: "Connect a calendar to see your meetings", pvEmpty: "Your day builds here, step by step.", rwBadge: "All set", rwTitle: "Here's your day tomorrow.", rwSub: "DPM placed your tasks on your energy peak, set your breaks and protected your focus. All that's left is to live the day.", rwStatTasks: "tasks placed", rwStatFocus: "of protected focus", rwStatPeak: (p) => `on your ${p} peak`, rwGoalOn: "Your goal is in sight:", }, }; const DAYS = { fr: ["L", "M", "M", "J", "V", "S", "D"], en: ["M", "T", "W", "T", "F", "S", "S"] }; const TOTAL = 7; const IDX = { PROFILE: 0, CAL: 1, SPACES: 2, TASKS: 3, GOAL: 4, RHYTHM: 5, PERSO: 6 }; function OnboardingPage({ setRoute }) { const lang = (typeof useLang === "function") ? useLang() : "fr"; const T = L[lang] || L.fr; const [profile, updateProfile] = (typeof useProfile === "function") ? useProfile() : [{}, () => {}]; const [step, setStep] = useState(0); const [done, setDone] = useState(false); const [data, setData] = useState({ firstName: (profile && profile.firstName) || "", persona: null, calendars: { google: false, microsoft: false, apple: false }, spaces: [], tasks: ["", "", ""], goal: "", habit: null, chrono: "third", watch: null, hours: { start: "09:00", end: "18:00" }, days: [true, true, true, true, true, false, false], accent: "violet", notif: true, prefs: [true, true, true], }); const set = (patch) => setData(d => ({ ...d, ...patch })); // Persona selection seeds the rest of the flow. We auto-advance only once a // first name is present (it's required for the account); otherwise we just // select and let the user fill the name + tap Next. const choosePersona = (p) => { const loc = p[lang]; set({ persona: p.id, accent: p.accent, chrono: p.chrono, spaces: loc.spaces.map((name, i) => ({ id: p.id + i, name, color: SPACE_COLORS[i % SPACE_COLORS.length], on: true })), tasks: loc.tasks.slice(0, 3), goal: loc.goal, }); if ((data.firstName || "").trim()) setTimeout(() => setStep(IDX.CAL), 420); }; // Persist the full captured profile, apply the accent, and enter the app. const finish = () => { try { window.__dpmAccent = data.accent; applyAccent?.(data.accent); window.dispatchEvent(new CustomEvent("dpm-accent-change", { detail: data.accent })); } catch (e) {} updateProfile({ firstName: (data.firstName || "").trim(), onboarded: true, calendars: data.calendars, spaces: data.spaces, tasks: data.tasks.filter(t => t && t.trim()), goal: data.goal, habit: data.habit, chrono: data.chrono, watch: data.watch, hours: data.hours, days: data.days, accent: data.accent, notif: data.notif, prefs: data.prefs, }); setRoute("home"); }; const accent = accentTriple(data.accent); if (done) return ; return (
{/* LEFT — steps */}
{/* Top bar + progress */}
{Array.from({ length: TOTAL }).map((_, n) => (
))}
{String(step + 1).padStart(2, "0")} {T.steps[step].t} {step >= TOTAL - 2 ? T.estAlmost : T.estLeft} {T.stepOf(step + 1, TOTAL)}
{/* Content */}

{T.steps[step].t === T.steps[0].t && step === 0 ? T.personaTitle : T.steps[step].t}

{T.steps[step].s}

{step === IDX.PROFILE && } {step === IDX.CAL && } {step === IDX.SPACES && } {step === IDX.TASKS && } {step === IDX.GOAL && } {step === IDX.RHYTHM && } {step === IDX.PERSO && }
{/* Footer nav */}
{Array.from({ length: TOTAL }).map((_, n) => ( ))}
{step < TOTAL - 1 ? : }
{/* RIGHT — live preview */}
); } /* ============================================================ STEP 1 — Profile / persona ============================================================ */ function StepProfile({ data, set, lang, T, accent, onPick }) { const nameMissing = !(data.firstName || "").trim(); return (
{/* First name — required for the account / avatar / greeting */}
{T.required}
set({ firstName: e.target.value })} />

{T.nameHint}

{PERSONAS.map(p => { const on = data.persona === p.id; return ( ); })}

{nameMissing && data.persona ? <> {T.nameReq} : <> {T.personaHint}}

); } /* ============================================================ STEP 2 — Calendars ============================================================ */ function StepCalendars({ data, set, T, accent }) { const provs = [ { id: "google", icon: , name: "Google Calendar", d: "Two-way sync, events and invitations" }, { id: "microsoft", icon: , name: "Microsoft Outlook", d: "365 calendar + Teams meetings" }, { id: "apple", icon: , name: "Apple Calendar", d: "iCloud · CalDAV" }, ]; return (
{provs.map(p => { const on = data.calendars[p.id]; return (
{p.icon}
{p.name}
{p.d}
{on ? {T.connected} : } ); })}
{T.calMore}
); } /* ============================================================ STEP 3 — Spaces ============================================================ */ function StepSpaces({ data, set, T, accent }) { const toggle = (id) => set({ spaces: data.spaces.map(s => s.id === id ? { ...s, on: !s.on } : s) }); const rename = (id, name) => set({ spaces: data.spaces.map(s => s.id === id ? { ...s, name } : s) }); const addSpace = () => { const i = data.spaces.length; set({ spaces: [...data.spaces, { id: "x" + Date.now(), name: "", color: SPACE_COLORS[i % SPACE_COLORS.length], on: true }] }); }; return (
{data.spaces.map(s => (
rename(s.id, e.target.value)} placeholder="…" className="flex-1 bg-transparent text-[14px] font-medium focus:outline-none" /> toggle(s.id)} />
))} {data.spaces.length < 6 && ( )}

{T.spacesHint}

); } /* ============================================================ STEP 4 — First tasks ============================================================ */ function StepTasks({ data, set, T, accent }) { return (
{data.tasks.map((t, i) => (
{i + 1}
set({ tasks: data.tasks.map((x, j) => j === i ? e.target.value : x) })} />
))}
{T.tasksHint}
); } /* ============================================================ STEP 5 — Goal (+ optional habit) ============================================================ */ function StepGoal({ data, set, lang, T, accent }) { return (
{T.goalLabel}
set({ goal: e.target.value })} />
{T.goalSeeds.map(g => ( ))}
{T.habitLabel}
{HABIT_SEEDS.map(h => { const on = data.habit === h.id; return ( ); })}
); } /* ============================================================ STEP 6 — Rhythm: chronotype + watch + hours + days ============================================================ */ function StepRhythm({ data, set, lang, T, accent }) { return (
{T.chronoLabel}
{CHRONOS.map(c => { const on = data.chrono === c.id; return ( ); })}
{/* Connect watch — auto-learns chronotype */}
{T.watchLabel}

{T.watchHint}

{WATCHES.map(w => { const on = data.watch === w.id; return ( ); })}
{data.watch && (
{T.watchDone}
)}
{/* Hours + days */}
{T.start}
set({ hours: { ...data.hours, start: e.target.value } })} />
{T.end}
set({ hours: { ...data.hours, end: e.target.value } })} />
{T.daysLabel}
{DAYS[lang].map((d, i) => { const on = data.days[i]; return ( ); })}
); } /* ============================================================ STEP 7 — Make it yours: accent + notifications + prefs ============================================================ */ function StepPerso({ data, set, T, accent }) { return (
{T.accentLabel}

{T.accentHint}

{ACCENTS.map(a => { const on = data.accent === a.id; const tri = accentTriple(a.id); return ( ); })}
{T.prefs.map((p, i) => { const ic = [Icons.Coffee, Icons.Target, Icons.Sparkles][i]; return ( ); })}
); } /* ============================================================ LIVE PREVIEW — "Tomorrow", fills up as the user answers ============================================================ */ function buildDay(data, lang, step, { complete = false } = {}) { const enabledSpaces = data.spaces.filter(s => s.on); const connected = Object.values(data.calendars).filter(Boolean).length; const tasks = data.tasks.filter(t => t.trim()); const chrono = CHRONOS.find(c => c.id === data.chrono) || CHRONOS[1]; const scheduled = complete || step >= IDX.RHYTHM; const showFocus = (complete || step >= IDX.PERSO) && data.prefs[1]; const occupied = []; // [{ s, e }] const overlaps = (s, e) => occupied.some(o => s < o.e && e > o.s); const blocks = []; const tray = []; // 1) Focus block sits on the energy peak. if (showFocus) { const s = chrono.peak[0], e = s + 2; occupied.push({ s, e }); blocks.push({ t: lang === "fr" ? "Focus profond" : "Deep focus", at: s, dur: 2, kind: "focus" }); } // 2) Meetings, revealed once a calendar is connected — skip any that clash with focus. const meetings = (connected >= 1 || complete) ? MEETINGS[lang].slice(0, complete ? 3 : Math.min(connected + 1, 3)) : []; meetings.forEach(m => { const e = m.at + m.dur; if (!overlaps(m.at, e)) { occupied.push({ s: m.at, e }); blocks.push({ ...m, kind: "meeting" }); } }); // 3) Tasks drop into the first free hour, preferring slots from the peak onward. const order = []; for (let h = Math.max(8, chrono.peak[0]); h <= 17; h++) order.push(h); for (let h = 8; h < chrono.peak[0]; h++) order.push(h); tasks.forEach((t, i) => { const color = enabledSpaces.length ? enabledSpaces[i % enabledSpaces.length].color : accentTriple(data.accent); if (!scheduled) { tray.push({ t, color }); return; } let slot = order.find(h => !overlaps(h, h + 1)); if (slot == null) slot = 8 + i; occupied.push({ s: slot, e: slot + 1 }); blocks.push({ t, at: slot, dur: 1, kind: "task", color }); }); blocks.sort((a, b) => a.at - b.at); return { blocks, tray, chrono, scheduled, connected, enabledSpaces }; } function OnbPreview({ data, lang, T, step, accent }) { const { blocks, tray, chrono, scheduled, connected } = buildDay(data, lang, step); const H = 360, top = 8, span = 10; // 08:00–18:00 const y = (h) => ((h - top) / span) * H; const showEnergy = step >= IDX.RHYTHM; const isEmpty = !data.persona && connected === 0 && blocks.length === 0 && tray.length === 0; return (
{/* Goal ribbon */} {data.goal.trim() && (
{data.goal}
)} {/* Header */}
{T.pvTomorrow}
{T.pvDate}
{showEnergy && ( {chrono[lang].peak} )}
{/* Timeline */}
{/* Energy curve */} {showEnergy && ( )} {/* Hour gridlines */} {[8, 10, 12, 14, 16, 18].map(h => (
{String(h).padStart(2, "0")}h
))} {/* Blocks */}
{blocks.map((b, i) => { const t = y(b.at), ht = Math.max(22, (b.dur / span) * H - 3); if (b.kind === "meeting") return (
{b.t}
{fmt(b.at)}
); if (b.kind === "focus") return (
{b.t}
); return (
{b.t}
{fmt(b.at)}
); })}
{/* Empty hint */} {isEmpty && (

{T.pvEmpty}

)} {!isEmpty && connected === 0 && blocks.length === 0 && (

{T.pvConnect}

)}
{/* Unscheduled tray */} {tray.length > 0 && (
{T.pvUnplanned}
{tray.map((t, i) => (
{t.t}
))}
)}
); } function fmt(h) { const hh = Math.floor(h), mm = Math.round((h - hh) * 60); return `${String(hh).padStart(2, "0")}:${String(mm).padStart(2, "0")}`; } /* ============================================================ REWARD — the day DPM just built, with confetti ============================================================ */ function OnbReward({ data, lang, T, accent, onFinish }) { const { blocks, chrono } = buildDay(data, lang, IDX.PERSO, { complete: true }); const tasksPlaced = data.tasks.filter(t => t.trim()).length; const focusH = data.prefs[1] ? 2 : 0; const H = 300, top = 8, span = 10; const y = (h) => ((h - top) / span) * H; return (
{/* Left — message */}
{T.rwBadge}

{T.rwTitle}

{T.rwSub}

{/* Stat chips */}
{focusH > 0 && }
{data.goal.trim() && (
{T.rwGoalOn} {data.goal}
)}
{/* Right — the built day */}
{T.pvTomorrow} · {T.pvDate}
{[8, 11, 14, 17].map(h => (
{String(h).padStart(2, "0")}h
))}
{blocks.map((b, i) => { const t = y(b.at), ht = Math.max(20, (b.dur / span) * H - 3); const isTask = b.kind === "task", isFocus = b.kind === "focus"; const col = isTask ? b.color : accent; return (
{b.t}
{fmt(b.at)}
); })}
); } function RwStat({ icon: Ic, accent, big, label }) { return (
{big != null && {big}} {label}
); } function OnbConfetti({ accent }) { const cols = [`hsl(${accent})`, "hsl(38 90% 55%)", "hsl(142 65% 52%)", "hsl(330 78% 60%)", "hsl(217 85% 62%)"]; const bits = Array.from({ length: 36 }).map((_, i) => ({ left: Math.random() * 100, delay: Math.random() * 0.5, dur: 2.6 + Math.random() * 1.4, col: cols[i % cols.length], size: 6 + Math.random() * 6, rad: Math.random() > 0.5 ? "50%" : "2px", })); return (
{bits.map((b, i) => ( ))}
); } Object.assign(window, { OnboardingPage });