/* global React, ReactDOM, Icon, Button, Chip, ScreenHeader, Panel, SectionLabel, AgentNote, DocToolbar, Segmented, FitBadge, Provenance, TONES, CANDIDATE, SAVED_RESUMES, GENERATED_RESUMES, RESUME_STATUS, RESUME_DIFF */ const { useState: useRes } = React; const TEMPLATES = [ { key: "classic", name: "Classic", sub: "Serif headings, single column", accent: "#1F1B16", font: "var(--font-display)", cols: 1 }, { key: "modern", name: "Modern", sub: "Sans, two-column sidebar", accent: "#4A5868", font: "var(--font-sans)", cols: 2 }, { key: "technical", name: "Technical", sub: "Mono accents, dense", accent: "#5A7150", font: "var(--font-sans)", cols: 1 }, { key: "executive", name: "Executive", sub: "Cardinal rule, roomy", accent: "#8C1515", font: "var(--font-display)", cols: 1 }, ]; const RESUME = { summary: "Senior product manager with six years in payments and growth. I move one number at a time and ship the experiment that proves it.", experience: [ { role: "Senior Product Manager, Growth", co: "Plaid", dates: "2021 — Present", bullets: [ "Owned merchant checkout experimentation, shipping 40+ A/B tests that lifted conversion 18% across 2M monthly sessions.", "Built the experimentation platform adopted by 9 product teams.", "Partnered with 12 engineers to launch a redesigned card-entry flow, cutting drop-off 23% in one quarter.", ]}, { role: "Product Manager", co: "Affirm", dates: "2018 — 2021", bullets: [ "Launched split-pay checkout for 3 enterprise merchants, $40M GMV in year one.", "Ran the pricing experiment program; standardized how the team called a result.", ]}, ], education: { school: "Carnegie Mellon University", degree: "M.S. Information Systems", year: "2020" }, skills: ["Experimentation", "Payments", "PLG", "SQL", "Roadmapping", "A/B testing"], }; // US-standard page presets. ratio = physical height / width. const PAGE = { letter: { label: "Letter", ratio: 11 / 8.5, note: "8.5 \u00d7 11 in \u00b7 US standard" }, a4: { label: "A4", ratio: 297 / 210, note: "210 \u00d7 297 mm \u00b7 international" }, }; // Spacing presets scale the document's vertical rhythm. The fit gauge measures the // real rendered height, so spacing now visibly fills (or overflows) the fixed page. const DENS = { compact: { gap: 6, lh: 1.3, label: "Compact" }, balanced: { gap: 13, lh: 1.5, label: "Balanced" }, roomy: { gap: 26, lh: 1.9, label: "Roomy" }, }; const DENS_ORDER = ["roomy", "balanced", "compact"]; // loosest -> tightest const FILL_FACTOR = { compact: 0.82, balanced: 1, roomy: 1.28 }; // relative content height const PAGE_W = 540, VPAD = 38, HPAD = 40; // page render width + margins (px) const UPLOAD_FMT = { pdf: { label: "PDF", tone: "cardinal" }, docx: { label: "DOCX", tone: "slate" }, doc: { label: "DOC", tone: "slate" }, tex: { label: "TEX", tone: "sage" }, }; // Fonts offered in the editor (saved with the template). System families + web-safe classics. const DOC_FONTS = [ { value: "default", label: "Template default" }, { value: "var(--font-sans)", label: "Inter · sans" }, { value: "var(--font-display)", label: "Fraunces · serif" }, { value: "'Georgia', serif", label: "Georgia · serif" }, { value: "'Times New Roman', Times, serif", label: "Times · serif" }, { value: "Arial, Helvetica, sans-serif", label: "Arial · sans" }, { value: "var(--font-mono)", label: "JetBrains · mono" }, ]; const isSerifFont = (f) => /serif|display|fraunces|georgia|times/i.test(f || ""); // ---- Template customization (every option maps 1:1 to the LaTeX backend) ---- const DEFAULT_SECTIONS = [ { key: "summary", label: "Summary", side: "main", on: true }, { key: "experience", label: "Experience", side: "main", on: true }, { key: "education", label: "Education", side: "side", on: true }, { key: "skills", label: "Skills", side: "side", on: true }, ]; const ACCENT_SWATCHES = [ { value: null, label: "Template" }, { value: "#8C1515", label: "Cardinal" }, { value: "#4A5868", label: "Slate" }, { value: "#5A7150", label: "Sage" }, { value: "#1F1B16", label: "Ink" }, ]; const HEAD_STYLES = [ { value: "rule", label: "Underline", tex: "\\titlerule" }, { value: "sideline", label: "Sideline", tex: "\\rule[bar]" }, { value: "plain", label: "Plain", tex: "\\textsc" }, ]; const SKILL_STYLES = [ { value: "tags", label: "Tags" }, { value: "inline", label: "Inline" }, { value: "list", label: "List" }, ]; const MARGINS = { narrow: { label: "Narrow", h: 28, v: 28, tex: "0.5in" }, normal: { label: "Normal", h: 40, v: 38, tex: "0.75in" }, wide: { label: "Wide", h: 56, v: 50, tex: "1in" }, }; // Advanced (power-user) controls. Each maps to a LaTeX primitive. const BULLETS = [ { value: "disc", label: "\u2022", tex: "\\textbullet" }, { value: "dash", label: "\u2013", tex: "--" }, { value: "arrow", label: "\u25B8", tex: "$\\triangleright$" }, ]; const DEFAULT_ADV = { lh: null, // null = follow the Spacing preset; number = \linespread override bullet: "disc", // \labelitemi nameSize: 25, // pt, header name contact: "inline", // inline row vs stacked lines pageNums: false, // \pagestyle{plain} }; // Editable text lives in a model of HTML strings, so typed edits AND inline formatting // (bold/italic/underline) survive re-renders and persist into the saved template. function buildModel() { const m = { name: CANDIDATE.fullName, summary: RESUME.summary, eduDegree: RESUME.education.degree, eduSchool: `${RESUME.education.school} · ${RESUME.education.year}`, }; RESUME.experience.forEach((e, i) => { m[`role_${i}`] = e.role; e.bullets.forEach((b, j) => { m[`bullet_${i}_${j}`] = b; }); }); RESUME.skills.forEach((s, i) => { m[`skill_${i}`] = s; }); return m; } const DEFAULT_MODEL = buildModel(); function ScrResume() { const [tpl, setTpl] = useRes("executive"); const [density, setDensity] = useRes("balanced"); const [applied, setApplied] = useRes("balanced"); // effective spacing (auto-fit may tighten it) const [accentOn, setAccentOn] = useRes(true); const [pageSize, setPageSize] = useRes("letter"); const [pageCount, setPageCount] = useRes(1); const [autoFit, setAutoFit] = useRes(false); const [custom, setCustom] = useRes(null); // { name, format } uploaded template const [useCustom, setUseCustom] = useRes(false); // is the uploaded template the active one const [fit, setFit] = useRes(null); // { contentH, innerH } measured from the doc const [tab, setTab] = useRes("editor"); const [saved, setSaved] = useRes(false); const [editing, setEditing] = useRes(false); const [docFont, setDocFont] = useRes("default"); // font family override (saved in template) const [fontPt, setFontPt] = useRes(11); // base type size in pt (saved in template) const [model, setModel] = useRes(buildModel); // editable text + inline formatting (saved) const onEditField = (key, html) => setModel(prev => (prev[key] === html ? prev : { ...prev, [key]: html })); // Template customization (each option compiles to the .tex source) const [sections, setSections] = useRes(DEFAULT_SECTIONS); const [accentColor, setAccentColor] = useRes(null); // null = template default const [headStyle, setHeadStyle] = useRes("rule"); const [skillStyle, setSkillStyle] = useRes("tags"); const [margin, setMargin] = useRes("normal"); const [custOpen, setCustOpen] = useRes(false); // customize overlay over the preview const [hoverSec, setHoverSec] = useRes(null); // section row hovered → highlighted in the doc const [adv, setAdv] = useRes(DEFAULT_ADV); // advanced (power-user) options const [showTex, setShowTex] = useRes(false); // generated .tex source viewer const setAdvKey = (k, v) => setAdv(p => ({ ...p, [k]: v })); const toggleSection = (key) => setSections(prev => prev.map(s => s.key === key ? { ...s, on: !s.on } : s)); const moveSection = (key, dir) => setSections(prev => { const i = prev.findIndex(s => s.key === key); const j = i + dir; if (j < 0 || j >= prev.length) return prev; const next = [...prev]; [next[i], next[j]] = [next[j], next[i]]; return next; }); const design = { sections, accentColor, headStyle, skillStyle, margin, hoverSec, adv }; const builtin = TEMPLATES.find(x => x.key === tpl); const isCustom = !!(custom && useCustom); const t = isCustom ? { key: "custom", name: custom.name, sub: "Your uploaded layout", accent: "#4A5868", font: "var(--font-sans)", cols: 1, custom: true, format: custom.format } : builtin; // The document reports its real measured height here (de-duped to avoid render loops). const handleFit = (contentH, innerH) => { setFit(prev => (prev && prev.contentH === contentH && prev.innerH === innerH) ? prev : { contentH, innerH }); }; // Resolve effective spacing. Manual = the chosen value; auto-fit picks the loosest // preset (never looser than the manual pick) that still fits the target page count. React.useEffect(() => { if (!autoFit) { setApplied(density); return; } if (!fit) return; const base = fit.contentH / FILL_FACTOR[applied]; const target = fit.innerH * pageCount; const start = DENS_ORDER.indexOf(density); let app = "compact"; for (let k = start; k < DENS_ORDER.length; k++) { if (base * FILL_FACTOR[DENS_ORDER[k]] <= target) { app = DENS_ORDER[k]; break; } } setApplied(app); }, [autoFit, density, pageCount, fit, applied]); return (
} />
{tab === "library" && }
{tab === "library" ? : ( <> {saved && (
Base résumé saved · {t.name} template
Template, fonts, type size and your edits are locked into the master. Every tailored version starts here.
)} }> This is written from your work history and tuned against what hiring teams in payments actually read for. Pick a template and adjust the format until it feels like yours; your content stays intact.
{/* Controls */}
{/* 1 · Template */}
Template {isCustom ? "CUSTOM" : "4 BUILT-IN"}
{TEMPLATES.map(x => { const on = !isCustom && tpl === x.key; return ( ); })}
{custom && (
setUseCustom(true)} style={{ marginTop: 10, display: "flex", alignItems: "center", gap: 10, padding: "10px 11px", borderRadius: 8, cursor: "pointer", background: isCustom ? "rgba(140,21,21,0.05)" : "#fff", border: isCustom ? "2px solid #8C1515" : "1px solid var(--ink-100)" }}>
{custom.name}
{(UPLOAD_FMT[custom.format] || UPLOAD_FMT.pdf).label} {isCustom ? "Active" : "Tap to use"}
)} { setCustom({ name, format }); setUseCustom(true); }}/> {/* 2 · Page */} Page
{PAGE[pageSize].note}
{/* 3 · Fit & spacing */} Fit & spacing
Spacing {autoFit && AUTO · {DENS[applied].label.toUpperCase()}}
1 ? "s" : ""}`} sub="Offerroom tightens spacing so it never spills." on={autoFit} onClick={() => setAutoFit(v => !v)}/> setAccentOn(v => !v)}/>
{/* Preview */} {CANDIDATE.fullName} — base résumé{isCustom ? custom.name : `${t.name}.tex`}{editing && Editing · click any text}} right={<>{PAGE[pageSize].label} · {pageCount}p}/> {isCustom && (
Your content, flowed into {custom.name}. Offerroom maps each section into your layout.
)} {editing && }
{/* The doc zooms out while customizing so both stay fully visible */}
{custOpen && ( { setCustOpen(false); setHoverSec(null); }} adv={adv} setAdvKey={setAdvKey} onViewTex={() => setShowTex(true)}/> )}
{showTex && setShowTex(false)}/>}
)}
); } // ============================================================ // Customize overlay — floats over the preview; every control maps // to the LaTeX backend. Hovering a section row highlights it in the doc. // ============================================================ function CustomizePanel({ sections, moveSection, toggleSection, accentColor, setAccentColor, builtin, headStyle, setHeadStyle, skillStyle, setSkillStyle, margin, setMargin, onHoverSec, onClose, adv, setAdvKey, onViewTex }) { const [advOpen, setAdvOpen] = React.useState(false); const ArrowBtn = ({ dir, disabled, onClick }) => ( ); return (
Customize template .TEX
Sections · hover to preview, drag order with arrows
onHoverSec(null)}> {sections.map((s, i) => (
onHoverSec(s.on ? s.key : null)} style={{ display: "flex", alignItems: "center", gap: 7, padding: "7px 10px", background: s.on ? "#fff" : "var(--paper-sunken)", borderBottom: i < sections.length - 1 ? "1px solid var(--ink-50)" : "none", cursor: "default" }}> {s.label} {s.side === "side" && SIDE} moveSection(s.key, -1)}/> moveSection(s.key, 1)}/>
))}
Accent color
{ACCENT_SWATCHES.map(a => { const on = accentColor === a.value; const chip = a.value || builtin.accent; return ( ); })}
Headings
({ value: h.value, label: h.label }))}/>
Skills as
Margins
({ value: k, label: MARGINS[k].label }))}/>
{/* Advanced — collapsed by default; every control is a LaTeX primitive */}
{advOpen && (
{/* Line height override */}
Line height {adv.lh ? adv.lh.toFixed(2) : "FROM SPACING"}
setAdvKey("lh", parseFloat(e.target.value))} style={{ flex: 1, accentColor: "#8C1515" }}/> {adv.lh && }
{/* Bullet marker */}
Bullet marker
{BULLETS.map(b => { const on = adv.bullet === b.value; return ; })}
{/* Name size */}
Name size
{adv.nameSize} pt
{/* Contact layout */}
Contact setAdvKey("contact", v)} options={[{ value: "inline", label: "Inline" }, { value: "stacked", label: "Stacked" }]}/>
{/* Page numbers */} setAdvKey("pageNums", !adv.pageNums)}/>
)}
sections {"\u2192"} \section {"\u00b7"} margins {"\u2192"} geometry {MARGINS[margin].tex} {"\u00b7"} headings {"\u2192"} {HEAD_STYLES.find(h => h.value === headStyle).tex}
Applied live · ATS-safe
); } const TemplateThumb = ({ t }) => (
{t.accent !== "#1F1B16" && } {t.cols === 2 ? (
{[1,1,1].map((_,i)=>)}
) : (
{[1,1,1,1].map((_,i)=>)}
)}
); const Toggle = ({ on, onClick }) => ( ); function ResumeDoc({ t, density, accentOn, tailored, editing, pageSize = "letter", pageCount = 1, onFit, docFont = "default", fontPt = 11, model, onEdit, design }) { const d = DENS[density] || DENS.balanced; const dz = design || {}; const adv = dz.adv || DEFAULT_ADV; const gap = d.gap, lh = adv.lh || d.lh; const secList = dz.sections || DEFAULT_SECTIONS; const headStyle = dz.headStyle || "rule"; const skillStyle = dz.skillStyle || "tags"; const mg = MARGINS[dz.margin] || MARGINS.normal; const vpad = mg.v, hpad = mg.h; const accent = accentOn ? (dz.accentColor || t.accent) : "#1F1B16"; const bulletCss = { disc: "disc", dash: '"\u2013\u2002"', arrow: '"\u25B8\u2002"' }[adv.bullet] || "disc"; const ratio = (PAGE[pageSize] || PAGE.letter).ratio; const onePageH = Math.round(PAGE_W * ratio); const innerH = onePageH - 2 * vpad; const m = model || DEFAULT_MODEL; // Typography saved in the template: font family override + base size scale. const useFont = docFont && docFont !== "default"; const headFont = useFont ? docFont : t.font; const bodyFont = useFont ? docFont : "var(--font-sans)"; const sans = !isSerifFont(headFont); const scale = fontPt / 11; const z = (n) => Math.round(n * scale * 10) / 10; // Measure the real rendered content height so the page-fit gauge tells the truth. const contentRef = React.useRef(null); const reported = React.useRef(""); const [contentH, setContentH] = React.useState(0); React.useLayoutEffect(() => { const el = contentRef.current; if (!el) return; const h = el.scrollHeight; const key = h + "@" + innerH; if (key !== reported.current) { reported.current = key; setContentH(h); onFit && onFit(h, innerH); } }); const used = contentH ? Math.max(1, Math.ceil(contentH / innerH)) : 1; const sheets = Math.max(pageCount, used); const sheetH = sheets * onePageH; // Bullets Offerroom rewrote for the target role (mirrors RESUME_DIFF: Plaid bullets 0 & 2). const isTailoredBullet = (i, j) => tailored && i === 0 && (j === 0 || j === 2); // Editable text lives in the model (HTML), so edits + inline formatting persist. const edStyle = editing ? { outline: "1px dashed rgba(140,21,21,0.35)", outlineOffset: 2, borderRadius: 2, cursor: "text" } : null; const F = (key, tag, baseStyle, extra) => React.createElement(tag, { ...(editing ? { contentEditable: true, suppressContentEditableWarning: true, onBlur: (e) => onEdit && onEdit(key, e.currentTarget.innerHTML) } : {}), style: { ...baseStyle, ...(editing ? edStyle : null) }, dangerouslySetInnerHTML: { __html: m[key] != null ? m[key] : "" }, ...(extra || {}), }); return (
{/* region beyond the target page count, flagged in the gauge's ochre */} {used > pageCount && (
)} {/* page-break guides */} {Array.from({ length: sheets - 1 }).map((_, i) => { const beyond = (i + 1) >= pageCount; return (
PAGE {i + 2}
); })} PAGE 1 {/* \pagestyle{plain}: folio centered at each page foot */} {adv.pageNums && Array.from({ length: sheets }).map((_, i) => ( {i + 1} ))}
{F("name", "div", { fontFamily: headFont, fontSize: z(adv.nameSize), fontWeight: sans ? 700 : 500, letterSpacing: "-0.01em", color: "#1F1B16" })} {adv.contact === "stacked" ? (
{CANDIDATE.email}{CANDIDATE.location}{CANDIDATE.linkedin}
) : (
{CANDIDATE.email}·{CANDIDATE.location}·{CANDIDATE.linkedin}
)}
{(() => { const sp = (key) => ({ accent, font: headFont, sans, scale, headStyle, hl: dz.hoverSec === key }); const bodies = { summary: ( {F("summary", "p", { margin: 0, fontSize: z(11.5), lineHeight: lh, color: "var(--ink-700)" })} ), experience: ( {RESUME.experience.map((e, i) => (
{F(`role_${i}`, "span", { fontSize: z(12), fontWeight: 600, color: "#1F1B16" })} {e.dates}
{e.co}
    {e.bullets.map((b, j) => { const tw = isTailoredBullet(i, j); return F(`bullet_${i}_${j}`, "li", { marginBottom: 2, background: tw ? "rgba(74,88,104,0.10)" : "transparent", borderRadius: tw ? 3 : 0, boxDecorationBreak: "clone", WebkitBoxDecorationBreak: "clone", padding: tw ? "0 3px" : 0 }, { key: j }); })}
))} ), education: ( {F("eduDegree", "div", { fontSize: z(11.5), fontWeight: 600 })} {F("eduSchool", "div", { fontSize: z(11), color: "var(--fg-2)" })} ), skills: ( {skillStyle === "tags" && (
{RESUME.skills.map((s, i) => ( F(`skill_${i}`, "span", { fontSize: z(10), padding: "2px 7px", borderRadius: 4, background: t.cols === 2 ? "transparent" : "var(--paper-sunken)", border: t.cols === 2 ? `1px solid ${accent}40` : "none", color: "var(--ink-700)", fontFamily: "var(--font-mono)" }, { key: i }) ))}
)} {skillStyle === "inline" && (

{RESUME.skills.map((s, i) => ( {F(`skill_${i}`, "span", {})} {i < RESUME.skills.length - 1 && · } ))}

)} {skillStyle === "list" && (
    {RESUME.skills.map((s, i) => F(`skill_${i}`, "li", { marginBottom: 2, breakInside: "avoid" }, { key: i }))}
)} ), }; const active = secList.filter(s => s.on); if (t.cols !== 2) { return
{active.map(s => bodies[s.key])}
; } const main = active.filter(s => s.side !== "side").map(s => bodies[s.key]); const side = active.filter(s => s.side === "side").map(s => bodies[s.key]); return (
{main}
{side}
); })()}
); } const DocSection = ({ title, accent, font, sans = true, scale = 1, headStyle = "rule", hl = false, children }) => (
{title}
{children}
); // ============================================================ // Saved & generated résumé library — the returning-user view. // ============================================================ function ResumeLibrary() { const [q, setQ] = useRes(""); const [status, setStatus] = useRes("all"); const [sort, setSort] = useRes("recent"); const [modal, setModal] = useRes(null); // { kind: "view" | "diff", r } const counts = GENERATED_RESUMES.reduce((m, r) => (m[r.status] = (m[r.status] || 0) + 1, m), {}); const filters = [ { key: "all", label: "All", n: GENERATED_RESUMES.length }, { key: "submitted", label: "Submitted", n: counts.submitted || 0 }, { key: "draft", label: "Drafts", n: counts.draft || 0 }, { key: "saved", label: "Saved", n: counts.saved || 0 }, ]; let list = GENERATED_RESUMES.filter(r => (status === "all" || r.status === status) && (q.trim() === "" || `${r.co} ${r.job}`.toLowerCase().includes(q.trim().toLowerCase()))); if (sort === "fit") list = [...list].sort((a, b) => b.fit - a.fit); return (
{/* Saved base résumés */}
Saved base résumés {SAVED_RESUMES.length} versions · 10 GB storage
{SAVED_RESUMES.map((r, i) => (
{r.name} {r.current && Current master}
{r.template} template · {r.note}
Saved {r.saved}
{!r.current && }
))}
{/* Generated, per-application résumés */}
Generated résumés {GENERATED_RESUMES.length} tailored from your base · across your search
{/* Toolbar: search · filter · sort */}
setQ(e.target.value)} placeholder="Search by company or role" style={{ flex: 1, minWidth: 0, border: "none", outline: "none", background: "transparent", fontFamily: "var(--font-sans)", fontSize: 13, color: "var(--fg-1)" }}/> {q && }
{filters.map(f => { const on = status === f.key; return ( ); })}
{list.length === 0 ? (
Nothing here yet
No résumés match {q.trim() ? `"${q.trim()}"` : "this filter"}. Clear it, or tailor a new one for a job.
) : (
{list.map(r => setModal({ kind: "diff", r })} onView={() => setModal({ kind: "view", r })}/>)}
)}
{modal && setModal(null)} onSwitch={setModal}/>}
); } function GeneratedCard({ r, onDiff, onView }) { const st = RESUME_STATUS[r.status] || RESUME_STATUS.saved; const tone = TONES[r.tone] || TONES.neutral; return (
{r.date}
); } // ============================================================ // Modal: open a résumé (rendered doc) or view its tailoring diff. // ============================================================ function ResumeModal({ entry, onClose, onSwitch }) { const { kind, r } = entry; const isGen = !!r.job; // generated résumés carry a job; saved bases don't const tplName = r.template; const t = TEMPLATES.find(x => x.name === tplName) || TEMPLATES.find(x => x.key === "executive"); const title = isGen ? `${r.job}` : r.name; const sub = isGen ? `${r.co} · tailored from your base` : `${r.template} template · ${r.note}`; return ReactDOM.createPortal((
e.stopPropagation()} style={{ width: kind === "diff" ? 680 : 640, maxHeight: "90vh", display: "flex", flexDirection: "column", background: "#fff", borderRadius: 14, boxShadow: "0 32px 64px rgba(31,27,22,0.28)", overflow: "hidden" }}> {/* Header */}
{kind === "diff" ? "What Offerroom changed for this role" : title} {isGen && {(RESUME_STATUS[r.status] || RESUME_STATUS.saved).label}}
{kind === "diff" ? `${r.job} · ${r.co}` : sub}
{/* Switch between diff and document for generated résumés */} {isGen && ( onSwitch({ kind: v, r })} options={[{ value: "diff", label: "Diff" }, { value: "view", label: "Document" }]}/> )}
{/* Body */}
{kind === "diff" ? : ( <> {isGen && (
Tailored for {r.co} · Offerroom's rewrites from your base are highlighted below
)}
)}
{/* Footer */}
ATS-safe · selectable text · single-file PDF
{kind === "diff" && }
), document.body); } // Per-bullet tailoring diff, reusing the kit's diff vocabulary. function DiffView({ r }) { const rewritten = RESUME_DIFF.reduce((n, s) => n + s.bullets.filter(b => b.status === "rewritten").length, 0); return (
{rewritten} rewritten Kept Hover a highlighted line for its source
{RESUME_DIFF.map((sec, i) => (
{sec.section}
    {sec.bullets.map((b, j) => )}
))}
); } const DiffRow = ({ b }) => { const isRewrite = b.status === "rewritten"; return (
  • {isRewrite && b.old && (
    {b.old}
    )}
    {isRewrite ? ( {b.new} ) : b.new}
    {isRewrite ? Rewritten : Kept} {b.why}
    • ); }; // ----- Controls helpers ----- const CtrlRow = ({ label, children }) => (
    {label} {children}
    ); const ToggleRow = ({ label, sub, on, onClick }) => (
    {label}
    {sub &&
    {sub}
    }
    ); // Upload-your-own-template button (real file input; records name + extension). function TemplateUpload({ onUpload }) { const ref = React.useRef(null); const [hover, setHover] = React.useState(false); return ( <> { const f = e.target.files && e.target.files[0]; if (!f) return; const ext = (f.name.split(".").pop() || "").toLowerCase(); onUpload(f.name, ext); e.target.value = ""; }}/> ); } // Live page-fill gauge: reads the doc's measured height against the page target. function PageFitGauge({ fit, pageCount, autoFit }) { const innerH = fit ? fit.innerH : 1; const contentH = fit ? fit.contentH : 0; const used = contentH ? Math.max(1, Math.ceil(contentH / innerH)) : 1; const ratio = contentH ? contentH / (innerH * pageCount) : 0; const pct = Math.round(ratio * 100); const over = used > pageCount; const tight = !over && ratio >= 0.9; const tone = over ? { bar: "#B08A3E", tint: "#F7F1E1", line: "rgba(176,138,62,0.32)", text: "#6E5419" } : tight ? { bar: "#4A5868", tint: "#E8ECEF", line: "rgba(74,88,104,0.26)", text: "#2A3744" } : { bar: "#5A7150", tint: "#E7EDE3", line: "rgba(90,113,80,0.26)", text: "#2F4528" }; const label = over ? `Over · runs to page ${used}` : tight ? `Fits · ${pct}% of the page` : `Fits · ${pct}% used`; const sub = over ? `Past your ${pageCount}-page limit. Tighten spacing, add a page, or turn on auto-fit.` : `of ${pageCount} ${pageCount > 1 ? "pages" : "page"}${ratio > 0 && ratio < 0.7 ? " · plenty of room" : ratio < 0.9 ? " · room to spare" : ""}.`; return (
    {label} {autoFit && AUTO}
    {pageCount > 1 && }
    {sub}
    ); } // Inline formatting toolbar shown while editing the base résumé. function FormatBar({ docFont, setDocFont, fontPt, setFontPt }) { const [act, setAct] = React.useState({ bold: false, italic: false, underline: false }); React.useEffect(() => { const upd = () => { try { setAct({ bold: document.queryCommandState("bold"), italic: document.queryCommandState("italic"), underline: document.queryCommandState("underline") }); } catch (e) {} }; document.addEventListener("selectionchange", upd); return () => document.removeEventListener("selectionchange", upd); }, []); const exec = (cmd) => { try { document.execCommand(cmd, false, null); } catch (e) {} try { setAct(a => ({ ...a, [cmd]: document.queryCommandState(cmd) })); } catch (e) {} }; const FmtBtn = ({ cmd, label, style }) => ( ); const StepBtn = ({ dir }) => ( ); return (
    {fontPt.toFixed(1).replace(/\.0$/, "")} pt
    Select text to format · saved with the template
    ); } // ============================================================ // Generated .tex source viewer — the customization, shown as the // LaTeX the backend actually compiles. Read-only, copyable. // ============================================================ function TexSourceModal({ design, t, pageSize, fontPt, density, onClose }) { const [copied, setCopied] = React.useState(false); const adv = design.adv || DEFAULT_ADV; const accent = (design.accentColor || t.accent).replace("#", ""); const head = HEAD_STYLES.find(h => h.value === design.headStyle) || HEAD_STYLES[0]; const bullet = BULLETS.find(b => b.value === adv.bullet) || BULLETS[0]; const lh = adv.lh || (DENS[density] || DENS.balanced).lh; const active = (design.sections || DEFAULT_SECTIONS).filter(s => s.on); const hidden = (design.sections || DEFAULT_SECTIONS).filter(s => !s.on); const headFmt = design.headStyle === "rule" ? "\\titleformat{\\section}{\\scshape\\color{accent}}{}{0pt}{}[\\titlerule]" : design.headStyle === "sideline" ? "\\titleformat{\\section}{\\scshape\\color{accent}}{\\rule[-2pt]{2.5pt}{9pt}\\hspace{6pt}}{0pt}{}" : "\\titleformat{\\section}{\\scshape\\color{accent}}{}{0pt}{}"; const lines = [ "% Offerroom · base résumé — regenerates as you customize", `% Template: ${t.name} · compiled by the Offerroom LaTeX backend`, `\\documentclass[${fontPt}pt,${pageSize === "a4" ? "a4paper" : "letterpaper"}]{article}`, `\\usepackage[margin=${(MARGINS[design.margin] || MARGINS.normal).tex}]{geometry}`, "\\usepackage{titlesec,enumitem,xcolor}", `\\definecolor{accent}{HTML}{${accent.toUpperCase()}}`, headFmt, `\\setlist[itemize]{label=${bullet.tex}, leftmargin=1.2em}`, `\\linespread{${lh.toFixed(2)}}${adv.lh ? " % manual override" : " % from Spacing preset"}`, `\\pagestyle{${adv.pageNums ? "plain" : "empty"}}`, "\\begin{document}", `\\namehead{${CANDIDATE.fullName}}{${adv.nameSize}pt}`, `\\contactline[${adv.contact}]{${CANDIDATE.email}}{${CANDIDATE.location}}{${CANDIDATE.linkedin}}`, ...active.map(s => `\\section{${s.label}}${s.side === "side" ? " % sidebar on two-column templates" : ""}`), ...hidden.map(s => `% \\section{${s.label}} — hidden`), "\\end{document}", ]; const raw = lines.join("\n"); const copy = () => { try { navigator.clipboard.writeText(raw); } catch (e) {} setCopied(true); setTimeout(() => setCopied(false), 1600); }; return ReactDOM.createPortal((
    e.stopPropagation()} style={{ width: 620, maxHeight: "86vh", display: "flex", flexDirection: "column", background: "#fff", borderRadius: 14, boxShadow: "0 32px 64px rgba(31,27,22,0.28)", overflow: "hidden" }}>
    Generated .tex source
    What the backend compiles. Updates live with every control.
    {t.name}.tex 
                {lines.map((ln, i) => (
              
    
                {i + 1}
                
                  {ln.trimStart().startsWith("%") ? ln : (() => {
                    const ci = ln.indexOf("  %");
                    if (ci < 0) return ln;
                    return <>{ln.slice(0, ci)}{ln.slice(ci)};
                  })()}
                
              
    
            ))}
    Read-only preview · content sections expand at compile time
    ), document.body); } window.ScrResume = ScrResume; window.ResumeDoc = ResumeDoc; window.TEMPLATES = TEMPLATES;