// Onboarding wizard — shown on first launch, saves profile to localStorage const ONBOARDING_KEY = "nb-profile-v1"; const PRESET_COLORS = [ "#c8694a", "#6b8e5a", "#5a7a99", "#b58a3b", "#7a4e6e", "#3f7d8a", "#b3543b", "#9a9082", ]; function makeSubjectId(name) { return "u-" + name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") + "-" + Math.random().toString(36).slice(2, 5); } function makeShort(name) { const words = name.trim().split(/\s+/); if (words.length === 1) return words[0].slice(0, 6); if (words.length === 2) return words[0].slice(0, 4) + " " + words[1].slice(0, 4); // AP / Honors prefix if (["AP", "Honors", "IB", "CP"].includes(words[0])) return words[0] + " " + words[1].slice(0, 4); return words.map((w) => w[0]).join("").toUpperCase().slice(0, 5); } const MONTHS = ["January","February","March","April","May","June","July","August","September","October","November","December"]; const CURRENT_YEAR = new Date().getFullYear(); const YEARS = [CURRENT_YEAR - 1, CURRENT_YEAR, CURRENT_YEAR + 1]; function Onboarding({ onComplete }) { const [step, setStep] = React.useState(0); // 0 = account check, 1-3 = setup const [signingIn, setSigningIn] = React.useState(false); const [signInError, setSignInError] = React.useState(""); const [googleName, setGoogleName] = React.useState(""); // After Google sign-in, wait for Firebase to finish loading cloud data, // then either restore the saved profile or continue to setup steps. React.useEffect(() => { if (!signingIn) return; const onLoaded = (e) => { if (e.detail.hasCloudProfile) { // Profile restored to localStorage — call onComplete (page reloads, picks it up) const restored = (() => { try { return JSON.parse(localStorage.getItem("nb-profile-v1") || "null"); } catch { return null; } })(); if (restored) { onComplete(restored); return; } } // No saved profile in cloud → go to setup steps with name pre-filled from Google setSigningIn(false); setStep(1); }; window.addEventListener("nbFirebaseLoaded", onLoaded); // Fallback: if Firebase doesn't respond in 6 seconds, proceed to setup const timeout = setTimeout(() => { setSigningIn(false); setStep(1); }, 6000); return () => { window.removeEventListener("nbFirebaseLoaded", onLoaded); clearTimeout(timeout); }; }, [signingIn]); const handleGoogleSignIn = () => { const user = window.__clerk?.user; if (user) { const displayName = user.fullName || user.firstName || ""; if (displayName) setGoogleName(displayName); } }; // Step 1 const [name, setName] = React.useState(""); const [grade, setGrade] = React.useState(""); // Pre-fill name when Google name arrives React.useEffect(() => { if (googleName && !name) setName(googleName.split(" ")[0]); }, [googleName]); // Step 2 const [school, setSchool] = React.useState(""); const [yearMonth, setYearMonth] = React.useState(8); // September = index 8 const [yearYear, setYearYear] = React.useState(CURRENT_YEAR); // Step 3 const [subjects, setSubjects] = React.useState([ { tempId: 1, name: "", color: PRESET_COLORS[0] }, ]); const [colorPicker, setColorPicker] = React.useState(null); // tempId of open picker const addSubject = () => { if (subjects.length >= 10) return; const nextColor = PRESET_COLORS[subjects.length % PRESET_COLORS.length]; setSubjects((s) => [...s, { tempId: Date.now(), name: "", color: nextColor }]); }; const removeSubject = (tempId) => setSubjects((s) => s.filter((x) => x.tempId !== tempId)); const updateSubject = (tempId, patch) => setSubjects((s) => s.map((x) => x.tempId === tempId ? { ...x, ...patch } : x)); const validSubjects = subjects.filter((s) => s.name.trim().length > 0); const finish = () => { const builtSubjects = validSubjects.map((s) => ({ id: makeSubjectId(s.name), name: s.name.trim(), short: makeShort(s.name), color: s.color, grade: "—", teacher: "", room: "", notes: 0, hw: 0, quizzes: 0, })); const profile = { name: name.trim(), grade, school: school.trim(), yearStart: { month: yearMonth, year: yearYear }, subjects: builtSubjects, completedAt: Date.now(), }; localStorage.setItem(ONBOARDING_KEY, JSON.stringify(profile)); onComplete(profile); }; const canNext1 = name.trim().length > 1 && grade; const canNext2 = school.trim().length > 0; const canFinish = validSubjects.length > 0; const stepLabels = ["About you", "Your school", "Your classes"]; // Roman numeral helper for preview card const toRoman = (n) => ["I","II","III","IV","V","VI","VII","VIII","IX","X"][n-1] || n; // Transition state for back-to-cover animation const [exitingTocover, setExitingToCover] = React.useState(false); const goToCover = React.useCallback(() => { setExitingToCover(true); setTimeout(() => { setExitingToCover(false); setStep(0); }, 420); }, []); // Notebook preview card — reflects current input state const PreviewCard = () => (
ACADEMIC NOTEBOOK
{name.trim() ? name.trim() + "'s" : "Julian's"}
Notebook
{[ ["READER", name.trim() || "Julian"], ["YEAR", grade ? grade.charAt(0).toUpperCase() + grade.slice(1) : "—"], ["SCHOOL", step > 1 && school.trim() ? school.trim() : (step > 1 ? "—" : "next step")], ["SUBJECTS", step > 2 ? (validSubjects.length + " added") : "step " + toRoman(3)], ].map(([k, v]) => (
{k} {v}
))}
{[1,2,3].map(s => (
))}
); // Shared nav row used in steps 1-3 const NavRow = ({ canProceed, onBack, onNext, nextLabel = "Next →" }) => (
); // ── Step 0 — animated full-bleed cover ── const [mousePos, setMousePos] = React.useState({ x: -999, y: -999 }); if (step === 0) { const WORD = "Notebook"; const FeatIcon = ({ id }) => { const s = { fill: "none", stroke: "rgba(255,255,255,0.55)", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }; const icons = { notes: ( ), homework: ( ), schedule: ( ), flashcards: ( ), grades: ( ), ai: ( ), }; return icons[id] || null; }; const featureCards = [ { iconId: "notes", label: "Notes", desc: "Block-based editor with AI tools. Headings, quotes, checkboxes, and attachments — organized by unit." }, { iconId: "homework", label: "Homework", desc: "Every assignment in one place. Urgency, due dates, time estimates. Never miss a deadline." }, { iconId: "schedule", label: "Schedule", desc: "Your daily and weekly view. See what's in session, what's due, and what's coming." }, { iconId: "flashcards", label: "Flashcards", desc: "Decks tied to your notes. Study with confidence tracking so you focus on what matters." }, { iconId: "grades", label: "Grades", desc: "Letter grades with sparkline trends. Watch your progress build across the term." }, { iconId: "ai", label: "AI Tools", desc: "Highlight any passage to explain it, generate a flashcard, or build a practice question." }, ]; const GIcon = () => ( G ); return (
setMousePos({ x: e.clientX, y: e.clientY })} style={{ position: "fixed", inset: 0, zIndex: 500, background: "var(--bg)", fontFamily: "var(--f-ui, Geist, sans-serif)", overflowY: "auto", overflowX: "hidden" }} > {/* Cursor spotlight */}
{/* Grain */}
{/* ── HERO ── */}
{/* Animated double-frame borders */} {["min(44px,4vmin)", "calc(min(44px,4vmin) + 8px)"].map((inset, fi) => (
))} {/* Vol. I corner */}
Vol. I · MMXXVI
{/* Eyebrow */}
— A Notebook —
{/* Center */}
{/* Letter-reveal wordmark */}
{WORD.split("").map((ch, i) => ( {ch} ))}
{/* Tagline */}
A second brain for high school.
{/* Rule */}
Anno MMXXVI
{/* CTAs */}
{signInError && (
{signInError}
)} {/* Scroll hint */}
What's inside ↓
{/* Colophon */}
2026 School Year · printed for one reader
{/* ── FEATURE SHOWCASE ── */}
Everything you need
One notebook for every class.
{featureCards.map((f) => (
{f.label}
{f.desc}
))}
{/* Bottom CTA */}
Ready to start?
— Notebook · Vol. I · Anno MMXXVI —
); } // ── Steps 1–3: two-column layout (form left, preview card right) ── const F = { // shared form input style width: "100%", background: "transparent", border: "none", borderBottom: "1px solid #3a3a3e", outline: "none", fontFamily: "inherit", fontSize: 15, color: "#e6e6ea", padding: "10px 0", boxSizing: "border-box", }; const stepZero = step - 1; // 0-based for array indexing const stepLabel = ["ABOUT YOU", "YOUR SCHOOL", "YOUR CLASSES"][stepZero]; const stepNum = ["01", "02", "03"][stepZero]; const nextLabel = step === 3 ? "Open my notebook →" : "Next →"; const onNext = step === 1 ? () => setStep(2) : step === 2 ? () => setStep(3) : finish; const onBack = step === 1 ? goToCover : step === 2 ? () => setStep(1) : () => setStep(2); const canProceed = step === 1 ? canNext1 : step === 2 ? canNext2 : canFinish; return (
{/* Progress bar — full width, spans both columns */}
{[1, 2, 3].map((s) => (
))}
{/* Main two-column body — fills remaining height, columns stretch to full height */}
{/* Left: form — vertically centered */}
{/* Form content — flex column with gap drives all spacing */}
{stepNum} / 0{step < 3 ? step + 1 : 3} · {stepLabel}
{/* ── Step 1 ── */} {step === 1 && ( <>

Let's set up your notebook.

WHAT'S YOUR NAME?
setName(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter" && canNext1) setStep(2); }} placeholder="e.g. Julian" style={{ ...F, width: "100%" }} />
WHAT YEAR ARE YOU IN?
{[["freshman","Freshman"],["sophomore","Sophomore"],["junior","Junior"],["senior","Senior"]].map(([k,l]) => ( ))}
)} {/* ── Step 2 ── */} {step === 2 && ( <>

Tell us about your school.

SCHOOL NAME
setSchool(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter" && canNext2) setStep(3); }} placeholder="e.g. Lincoln High School" style={{ ...F, width: "100%" }} />
WHEN DOES YOUR SCHOOL YEAR START?
)} {/* ── Step 3 ── */} {step === 3 && ( <>

What classes are you taking?

Add up to 10. You can change these later.

{subjects.map((s, i) => (
setColorPicker(colorPicker === s.tempId ? null : s.tempId)} style={{ width: 28, height: 28, borderRadius: 4, background: s.color, cursor: "pointer", border: "2px solid rgba(0,0,0,0.3)" }} /> {colorPicker === s.tempId && (
{PRESET_COLORS.map((c) => (
{ updateSubject(s.tempId, { color: c }); setColorPicker(null); }} style={{ width: 22, height: 22, borderRadius: 3, background: c, cursor: "pointer", outline: s.color === c ? "2px solid #ffffff" : "none", outlineOffset: 1 }} /> ))}
)}
updateSubject(s.tempId, { name: e.target.value })} placeholder={`Class ${i + 1} (e.g. AP Biology)`} style={{ ...F, flex: 1 }} /> {subjects.length > 1 && ( )}
))}
{subjects.length < 10 && ( )} )}
{/* Right: preview card — full-height column, card centered via margin: auto */}
{/* Footer — full-width, single bar */}
ANNO MMXXVI
PRINTED FOR ONE READER
); } function OField({ label, children, style, dark }) { return (
{label}
{children}
); } const oInput = { width: "100%", padding: "9px 12px", border: "1px solid var(--hairline)", borderRadius: 5, fontFamily: "inherit", fontSize: 14, color: "var(--ink)", background: "var(--bg)", outline: "none", boxSizing: "border-box", }; const oDarkInput = { width: "100%", padding: "10px 14px", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 5, fontFamily: "inherit", fontSize: 14, color: "#e8e4dc", background: "rgba(255,255,255,0.05)", outline: "none", boxSizing: "border-box", }; const oPrimaryBtn = { padding: "10px 22px", borderRadius: 6, border: "none", background: "rgba(255,255,255,0.9)", color: "#141310", fontFamily: "inherit", fontSize: 14, fontWeight: 600, cursor: "pointer", transition: "opacity 0.15s", }; const oGhostBtn = { padding: "10px 16px", borderRadius: 6, border: "1px solid rgba(255,255,255,0.12)", background: "transparent", color: "rgba(255,255,255,0.45)", fontFamily: "inherit", fontSize: 14, cursor: "pointer", }; function nbGetProfile() { try { return JSON.parse(localStorage.getItem(ONBOARDING_KEY) || "null"); } catch { return null; } } Object.assign(window, { Onboarding, nbGetProfile, ONBOARDING_KEY });