${paper.outerHTML}`; const blob = new Blob([html], { type: "text/html" }); const a = document.createElement("a"); a.href = URL.createObjectURL(blob); a.download = `${(data.personal.fullName || "resume").replace(/\s+/g, "_")}.html`; a.click(); }; const resetForm = () => { if (confirm("Reset all fields? This cannot be undone.")) setData(blankResume()); }; const loadSample = () => setData(sampleResume()); const renderStep = () => { switch (step.key) { case "personal": return ; case "summary": return ; case "experience": return ; case "education": return ; case "researchInterests": return ; case "publications": return ; case "grants": return ; case "teaching": return ; case "conferences": return ; case "skills": return ; case "certifications": return ; case "projects": return ; case "languages": return ; case "awards": return ; case "volunteer": return ; case "interests": return ; case "references": return ; case "design": return ; default: return null; } }; const dark = settings.theme === "dark"; return (
{/* Top bar */}
C
Composer Saved
{/* Mobile-only Edit / Preview segmented control */}
{/* LEFT: wizard — 40% */}
{/* progress + step nav */}
Step {stepIndex + 1} of {STEPS.length} {progress}%
{metrics.completeness}% complete · ATS score {metrics.ats}
{STEPS.map((s, i) => { const Icon = s.icon; const active = i === stepIndex; const complete = !active && stepHasContent(s.key, data); return ( ); })}
{/* step body */}

{step.label}

{renderStep()}
{/* sticky footer nav */}
{/* RIGHT: live preview — 60% */}
Live preview — {TEMPLATES.find((t) => t.id === settings.template)?.name}
{Math.round(settings.zoom * 100)}%
); } ReactDOM.createRoot(document.getElementById("root")).render();