{cemetery.area}

{cemetery.name}

{cemetery.town} · Est. {cemetery.est} · {entries.length.toLocaleString()} on record

Sector map

setSector(sector === id ? null : id)} counts={counts} />

The cemetery is divided into general sectors — not exact coordinates. {sector ? <> Filtering by {sector}. : <> Tap a sector to filter, or scroll to see everyone on record.}

Search by name, year, religion

setQ(e.target.value)} placeholder="e.g. Margaret, 1918, Episcopal…" />

setVetOnly(e.target.checked)} style={{ accentColor: "var(--forest)", width: 16, height: 16 }} /> Veterans only

{entries.length === 0 ?

The book is open.

No one has been added to the Cedar Lawn record yet. Be the first — who rests here.

: filtered.length === 0 ?

No one matches. Try widening the search, or .

: filtered.map((p) => ) }

{entries.length > 0 &&

{filtered.length} of {entries.length} on record

}

More cemeteries

Green River, St. Luke's, Amagansett & Oakland — coming soon.

); } function PersonDetail({ person, cemetery, onBack, onSuggestEdit }) { return (

In memory of

{person.name}

{person.birth} – {person.death}

Religion

{person.religion}

Veteran

{person.veteran ? "Yes — flag placement free" : "No"}

Sector

{person.sector}

{person.note}

Caring from far away?

Book a cleaning for {person.name.split(" ")[0]}'s stone.

Book a cleaning →

{cemetery.name} · {cemetery.area}

); } function AddPerson({ cemetery, onBack, onSubmit }) { const [form, setForm] = useState({ name: "", birth: "", death: "", religion: "", veteran: false, sector: "", note: "" }); const [submitted, setSubmitted] = useState(false); if (submitted) { return (

Thank you

Added to the record.

{form.name} is now part of the {cemetery.name} record. Thank you for helping preserve the history of our community.

); } return (

Add to the record

Help us remember
someone here.

Anyone can add a name. We don't verify every entry, but we do review flags for inaccuracy. Share only what you know.

Full name

setForm({ ...form, name: e.target.value })} />

Birth year

setForm({ ...form, birth: e.target.value })} />

Death year

setForm({ ...form, death: e.target.value })} />

Religious affiliation

setForm({ ...form, religion: e.target.value })} />

Sector — tap on the map, or pick from the list

setForm({ ...form, sector: form.sector === id ? "" : id })} counts={{}} />

{form.sector ? <>

{form.sector === "unknown" ? "Not sure" : form.sector}

{form.sector === "X1" ? "Annex" : form.sector === "unknown" ? "We'll help locate them" : `Row ${form.sector[0]}, Section ${form.sector[1]}`}

: No sector chosen yet. Tap a square on the map. }

setForm({ ...form, veteran: e.target.checked })} style={{ width: 18, height: 18, accentColor: "var(--forest)" }} /> They served in the military

A few sentences about them

setForm({ ...form, note: e.target.value })} />
          </div>
        </div>
        <div style={{ marginTop: 48, display: "flex", justifyContent: "flex-end", gap: 16 }}>
          <button className="btn btn--ghost" onClick={onBack}>Cancel</button>
          <button className="btn btn--primary"
            onClick={() => { if (form.name) { window.submitForm("finder_add_person", { ...form, cemetery: cemetery.id, cemeteryName: cemetery.name }); setSubmitted(true); onSubmit && onSubmit({ ...form, cemetery: cemetery.id }); } }}
            style={{ opacity: form.name ? 1 : 0.4, pointerEvents: form.name ? "auto" : "none" }}>
            Add to record <span className="arrow">→</span>
          </button>
        </div>
      </div>
    </div>
  );
}

function SuggestEdit({ person, cemetery, onBack }) {
  const [form, setForm] = useState({
    name: person.name || "", birth: person.birth || "", death: person.death || "",
    religion: person.religion || "", veteran: !!person.veteran, sector: person.sector || "",
    note: person.note || "", reason: "", suggesterName: "", suggesterEmail: "",
  });
  const [submitted, setSubmitted] = useState(false);

if (submitted) {
    return (
      <div style={{ textAlign: "center", padding: "40px 0" }}>
        <Mark size={48} />
        <div style={{ height: 24 }} />
        <div className="eyebrow">Thank you</div>
        <div style={{ height: 12 }} />
        <h2 className="display" style={{ fontSize: "clamp(36px, 5vw, 52px)", color: "var(--forest)", margin: 0 }}>Your suggestion is on its way.</h2>
        <p className="body-text" style={{ margin: "16px auto 0", maxWidth: 520 }}>Jason will review your edit and update the record.</p>
        <div style={{ height: 32 }} />
        <button className="btn" onClick={onBack}>Back to {person.name}</button>
      </div>
    );
  }

return (
    <div>
      <button className="btn btn--ghost" onClick={onBack} style={{ marginBottom: 32 }}>← Back to {person.name}</button>
      <div style={{ maxWidth: 760 }}>
        <div className="eyebrow">Suggest an edit</div>
        <div style={{ height: 16 }} />
        <h1 className="display" style={{ fontSize: "clamp(40px, 5vw, 60px)", color: "var(--forest)", margin: 0 }}>
          See something to fix<br /><span className="display-italic" style={{ color: "var(--gold)" }}>about {person.name}?</span>
        </h1>
        <div style={{ height: 20 }} />
        <p className="body-text">Edit any field below. Your suggestion is sent to Jason for review.</p>
        <div style={{ height: 48 }} />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
          <div style={{ gridColumn: "1 / -1" }}><div className="field-label">Full name</div><input className="field-input" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} /></div>
          <div><div className="field-label">Birth year</div><input className="field-input" value={form.birth} onChange={(e) => setForm({ ...form, birth: e.target.value })} /></div>
          <div><div className="field-label">Death year</div><input className="field-input" value={form.death} onChange={(e) => setForm({ ...form, death: e.target.value })} /></div>
          <div><div className="field-label">Religious affiliation</div><input className="field-input" value={form.religion} onChange={(e) => setForm({ ...form, religion: e.target.value })} /></div>
          <div>
            <div className="field-label">Sector</div>
            <select className="field-select" value={form.sector} onChange={(e) => setForm({ ...form, sector: e.target.value })}>
              <option value="">Choose a sector</option>
              <optgroup label="Annex"><option value="X1">X1 — Annex</option></optgroup>
              {ROWS.map((r) => <optgroup key={r} label={`Row ${r}`}>{SECTIONS.map((s) => <option key={r + s} value={r + s}>{r + s}</option>)}</optgroup>)}
              <option value="unknown">Not sure</option>
            </select>
          </div>
          <label style={{ display: "flex", alignItems: "center", gap: 12, cursor: "pointer", paddingTop: 28 }}>
            <input type="checkbox" checked={form.veteran} onChange={(e) => setForm({ ...form, veteran: e.target.checked })} style={{ width: 18, height: 18, accentColor: "var(--forest)" }} />
            <span style={{ fontSize: 14 }}>They served in the military</span>
          </label>
          <div style={{ gridColumn: "1 / -1" }}>
            <div className="field-label">Biography / memory</div>
            <textarea className="field-textarea" style={{ minHeight: 120 }} value={form.note} onChange={(e) => setForm({ ...form, note: e.target.value })} />
          </div>
          <div style={{ gridColumn: "1 / -1" }}>
            <div className="field-label">What needs fixing? (optional)</div>
            <textarea className="field-textarea" style={{ minHeight: 80 }} placeholder="A short note about what you changed and why…" value={form.reason} onChange={(e) => setForm({ ...form, reason: e.target.value })} />
          </div>
          <div><div className="field-label">Your name</div><input className="field-input" value={form.suggesterName} onChange={(e) => setForm({ ...form, suggesterName: e.target.value })} /></div>
          <div><div className="field-label">Your email (so we can follow up)</div><input className="field-input" type="email" value={form.suggesterEmail} onChange={(e) => setForm({ ...form, suggesterEmail: e.target.value })} /></div>
        </div>
        <div style={{ marginTop: 48, display: "flex", justifyContent: "flex-end", gap: 16 }}>
          <button className="btn btn--ghost" onClick={onBack}>Cancel</button>
          <button className="btn btn--primary"
            onClick={() => { if (form.suggesterEmail) { window.submitForm("finder_edit_suggestion", { ...form, cemetery: cemetery.id, cemeteryName: cemetery.name, originalPersonId: person.id, originalName: person.name }); setSubmitted(true); } }}
            style={{ opacity: form.suggesterEmail ? 1 : 0.4, pointerEvents: form.suggesterEmail ? "auto" : "none" }}>
            Send suggestion <span className="arrow">→</span>
          </button>
        </div>
      </div>
    </div>
  );
}

function Finder() {
  const cemetery = CEDAR_LAWN;
  const [view, setView] = useState("cemetery");
  const [person, setPerson] = useState(null);
  const [localEntries, setLocalEntries] = useState(loadLocalEntries);
  const [sheetEntries, setSheetEntries] = useState([]);

useEffect(() => {
    let alive = true;
    fetchSheetEntries().then((list) => { if (alive) setSheetEntries(list); });
    return () => { alive = false; };
  }, []);

const entries = useMemo(() => {
    const key = (e) => (e.name || "").toLowerCase().trim() + "|" + (e.birth || "") + "|" + (e.death || "");
    const seen = new Set(sheetEntries.map(key));
    const localOnly = localEntries.filter((e) => !seen.has(key(e)));
    return [...localOnly, ...sheetEntries];
  }, [sheetEntries, localEntries]);

const handleAdded = (entry) => {
    const next = [{ ...entry, id: Date.now() }, ...localEntries];
    setLocalEntries(next);
    saveLocalEntries(next);
  };

return (
    <div className="page-enter">
      <section className="section" style={{ paddingTop: 80 }}>
        <div className="page-wrap">
          {view === "cemetery" && <CemeteryView cemetery={cemetery} entries={entries} onPickPerson={(p) => { setPerson(p); setView("person"); }} onAdd={() => setView("add")} />}
          {view === "person" && person && <PersonDetail person={person} cemetery={cemetery} onBack={() => setView("cemetery")} onSuggestEdit={() => setView("suggest")} />}
          {view === "suggest" && person && <SuggestEdit person={person} cemetery={cemetery} onBack={() => setView("person")} />}
          {view === "add" && <AddPerson cemetery={cemetery} onBack={() => setView("cemetery")} onSubmit={handleAdded} />}
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Finder });

{cemetery.name}

{person.name}

Added to the record.

Help us remembersomeone here.

Help us remember
someone here.