/* ============================================================
The Living Line — landing page (recreated from the Claude
Design mock "The Living Line.dc.html")
------------------------------------------------------------
Editorial front door to the Living Line: the family line as a
selectable timeline of generations, the three-store memory
method, the horizon rule, featured persona sheets, a memory-
graph teaser, and the roadmap.
Renders against window.CASON_LINE (built by line-landing-data.js
from the verified record) — real names, dates, occupations,
memory counts, source counts, and kinship. No build step; no
regex lookbehind (iOS Safari < 16.4). ASCII source only —
any curly quotes / em-dashes on screen come from the data.
Palette + type are the mock's own (Cormorant Garamond /
Newsreader / IBM Plex Mono, parchment + oxblood), loaded by
index.html. The app itself ("Speak with an ancestor", the
memory graph) lives at /living/world.
============================================================ */
const { useState, useMemo, useRef, useEffect } = React;
const LL = {
bg: '#f6f1e7', ink: '#221c14', accent: '#8a3b24', accentDk: '#5e2817',
card: '#fcf8ee', panel: '#efe7d4', dark: '#171310', gold: '#d9a441',
body: '#453b2c', body2: '#4c412e',
serif: "'Newsreader', Georgia, serif",
display: "'Cormorant Garamond', Georgia, serif",
mono: "'IBM Plex Mono', ui-monospace, monospace"
};
const WORLD_URL = '/living/world';
/* ---- one-time CSS for hovers / animation / fonts fallback ---- */
const LL_CSS = [
"@keyframes ll-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}",
".ll-rise{animation:ll-rise .7s ease both}",
".ll-link{color:" + LL.ink + ";transition:color .18s ease}",
".ll-link:hover{color:" + LL.accent + "}",
".ll-cta{transition:background .18s ease}",
".ll-cta:hover{background:" + LL.accentDk + " !important}",
".ll-ghost{transition:border-color .18s ease,color .18s ease}",
".ll-ghost:hover{border-color:" + LL.accent + " !important;color:" + LL.accent + " !important}",
".ll-card{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}",
".ll-card:hover{transform:translateY(-3px);border-color:" + LL.accent + ";box-shadow:0 10px 26px rgba(34,28,20,.1)}",
".ll-goldbtn{transition:background .18s ease,color .18s ease}",
".ll-goldbtn:hover{background:" + LL.gold + ";color:" + LL.dark + "}",
".ll-gsel{transition:all .2s ease}",
".ll-scroll::-webkit-scrollbar{height:6px}",
".ll-scroll::-webkit-scrollbar-thumb{background:rgba(34,28,20,.2);border-radius:6px}",
"@media(max-width:720px){.ll-2col{grid-template-columns:1fr !important;gap:36px !important}" +
".ll-3col{grid-template-columns:1fr !important}.ll-method{grid-template-columns:1fr !important}" +
".ll-navlinks{display:none !important}.ll-roadrow{grid-template-columns:1fr !important;gap:8px !important}}"
].join('\n');
function useOnce(css) {
useEffect(function () {
if (document.getElementById('ll-style')) return;
var s = document.createElement('style');
s.id = 'll-style'; s.textContent = css;
document.head.appendChild(s);
}, []);
}
/* ---- status vocabulary (mirrors the persona statuses) ---- */
function statusLabel(st) {
return st === 'live' ? 'SPEAKING' : st === 'scribe' ? 'IN TRANSCRIPTION' : 'RECORDING';
}
function statusColor(st) {
return st === 'live' ? LL.accent : st === 'scribe' ? '#8a7a5c' : '#43503a';
}
/* ====================================================================
Nav
==================================================================== */
function Nav() {
const linkS = { fontFamily: LL.mono, fontSize: 10.5, letterSpacing: '.15em', whiteSpace: 'nowrap' };
return (
);
}
/* ====================================================================
Hero
==================================================================== */
function Hero(props) {
const s = props.stats;
const fam = props.viewer === 'known'; // 2nd voice: the family register for the innermost tier
const diamond = ;
const solid = { display: 'inline-block', padding: '15px 28px', background: LL.accent, color: LL.bg, fontFamily: LL.mono, fontSize: 11, letterSpacing: '.16em' };
const ghost = { display: 'inline-block', padding: '15px 28px', border: '1px solid rgba(34,28,20,.35)', color: LL.ink, fontFamily: LL.mono, fontSize: 11, letterSpacing: '.16em' };
return (
{fam ? 'OUR FAMILY, ALIVE' : 'THE CASON FAMILY, ALIVE'} · RECORD OF {s.start} – PRESENT
Every Cason, awake in their own time.
{diamond}
{fam
? 'These are our people — ' + s.personas + ' of us, rendered as living personas, each bounded by what their generation could know. Our letters, ledgers, and hearsay go in. Nothing from the future ever does.'
: 'The Living Line renders ' + s.personas + ' ancestors as autonomous personas — each one bounded by what their generation could actually know. Letters, ledgers, and hearsay go in. Nothing from the future ever does.'}
{s.personas} PERSONAS{s.generations} GENERATIONS{s.years} YEARS OF RECORD0 GLIMPSES OF THE FUTURE
);
}
/* ====================================================================
Section I — The Family Line (generation selector + member cards)
==================================================================== */
function GenSelector(props) {
const gens = props.gens, sel = props.sel, onPick = props.onPick;
return (
{gens.map(function (g, i) {
const on = i === sel;
return (
{g.roman}{g.era || ''}
);
})}
);
}
function MemberCard(props) {
const m = props.m, showCat = props.showCat, cat = props.cat;
const T = window.CASON_TIERS;
// living family (persona status 'rec') is kept close: outsiders see a
// private placeholder; outer/known family see the real card.
if (T && m.st === 'rec' && !T.canSee('outer', props.viewer)) {
return (
{showCat ? {cat} : }
LIVING · KEPT CLOSE
A living Cason
The living generations are held close. If you’re family, switch your view to Extended family or Close family to see them.
Each persona runs on three memory stores assembled from the family archive. What a persona can say is a strict function of what a body in their place, in their years, could have known.
What they alone lived: diary entries, letters, deeds, wills, sworn testimony. The best-documented Casons carry a dozen or more such memories each; those who left only a name in a ledger carry a handful.
What their cohort knew together: prices, wars, weather, news as it actually arrived — late, partial, and mostly by rumor. Shared by everyone in the generation, and no one outside it.
What flows down from the ancestors only: the story of the 1738 crossing, the walk south through the Okefenokee, quarrels kept warm. Inheritance runs one way — nothing travels back up the line.
);
}
function HorizonRule(props) {
return (
THE HORIZON RULE
No persona knows anything dated after their death.
Lt. Ransom (d. 1900) can tell you of Appomattox, which ended the war he marched in. Ask him about the county’s first automobile — years past his horizon — and he can only say he has not lived to see such a thing. The model cannot leak what the memory stores do not contain.
183518611900{props.stats.present}
SEALED
INHERITEDLIVEDUNKNOWABLE
FIG. 1 — KNOWLEDGE HORIZON OF LT. RANSOM CASON, 1835–1900
);
}
/* ====================================================================
Section III — Persona Sheets (featured)
==================================================================== */
function SheetCard(props) {
const m = props.m, portrait = props.portrait;
return (
);
}
function Sheets(props) {
const line = props.line;
// find members + their generation roman + catalog number
const idx = useMemo(function () {
var map = {}, n = 0;
line.gens.forEach(function (g) {
g.members.forEach(function (m) { n++; map[m.id] = { m: m, roman: g.roman, cat: n }; });
});
return map;
}, [line]);
const feat = [
{ id: 'thomas-sr', portrait: 'NO PORTRAIT SURVIVES · HEADRIGHT, 1635' },
{ id: 'james-green', portrait: 'NO PORTRAIT SURVIVES · FLORIDA, c.1840' },
{ id: 'robert-sr', portrait: 'PORTRAIT PENDING · TITUSVILLE, c.1957' }
].map(function (f) { var e = idx[f.id]; return e ? { e: e, portrait: f.portrait } : null; }).filter(Boolean);
return (
{feat.map(function (f) {
return ;
})}
Three of {props.stats.personas}. Every sheet carries the persona’s full memory bounds, provenance, kin on record, and voice notes.
);
}
/* ====================================================================
Section IV — Memory Graph teaser (canvas)
==================================================================== */
function hashId(s) { var h = 0; for (var i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) % 997; return h / 997; }
function GraphTeaser(props) {
const line = props.line;
const ref = useRef(null);
useEffect(function () {
const cv = ref.current; if (!cv) return;
const x = cv.getContext('2d'); if (!x) return;
const w = cv.width, h = cv.height;
const gens = line.gens;
const lo = line.start - 10, hi = line.present + 10;
const X = function (yr) { return 70 + (yr - lo) / (hi - lo) * (w - 140); };
x.clearRect(0, 0, w, h);
// representative year per generation (mean of its dated members, else
// interpolated across the span) so undated kin spread by era, not pile up.
const genYear = gens.map(function (g, gi) {
var sum = 0, n = 0;
g.members.forEach(function (m) {
var y = m.b != null ? m.b : (m.d != null ? m.d - 30 : null);
if (y != null) { sum += y; n++; }
});
if (n) return sum / n;
return line.start + (line.present - line.start) * (gi / Math.max(1, gens.length - 1));
});
// position every member
const pos = {};
gens.forEach(function (g, gi) {
g.members.forEach(function (m) {
const mid = (m.b != null && m.d != null) ? (m.b + m.d) / 2 : (m.b != null ? m.b + 25 : (m.d != null ? m.d - 25 : genYear[gi]));
const band = 40 + gi * (h - 96) / Math.max(1, gens.length - 1);
pos[m.id] = { x: X(mid + (hashId(m.id + 'x') - 0.5) * 10), y: band + (hashId(m.id) - 0.5) * 30, m: m };
});
});
// decade gridlines
x.font = '15px IBM Plex Mono, monospace';
for (var yr = 1650; yr <= 2000; yr += 50) {
x.strokeStyle = 'rgba(239,230,208,.07)'; x.lineWidth = 1;
x.beginPath(); x.moveTo(X(yr), 18); x.lineTo(X(yr), h - 34); x.stroke();
x.fillStyle = 'rgba(239,230,208,.28)'; x.fillText(String(yr), X(yr) - 17, h - 12);
}
// kinship lines (child -> parent), oxblood
gens.forEach(function (g) {
g.members.forEach(function (m) {
if (m.p && pos[m.p]) {
const a = pos[m.id], b = pos[m.p];
x.strokeStyle = 'rgba(196,90,48,.4)'; x.lineWidth = 1;
x.beginPath(); x.moveTo(a.x, a.y); x.lineTo(b.x, b.y); x.stroke();
}
});
});
// nodes sized by memory count
Object.keys(pos).forEach(function (id) {
const p = pos[id];
const r = 2.5 + Math.sqrt(p.m.mem || 1) / 7;
x.beginPath(); x.arc(p.x, p.y, r, 0, 7);
if (p.m.st === 'rec') { x.strokeStyle = LL.gold; x.lineWidth = 1.5; x.stroke(); }
else { x.fillStyle = p.m.st === 'live' ? LL.gold : '#6b5f4c'; x.fill(); }
});
}, [line]);
return (
IV — THE MEMORY GRAPH
One graph, every mind.
Every persona is a node, sized by its memories. Kinship runs in oxblood. Open the full graph to trace how a story crosses four generations without ever moving forward in time.
The verified lineage becomes the shared memory graph: every deed, will, census line, and county record indexed, dated, and bounded. Persona sheets published across the line.
The personas speak. Ask Thomas about the tobacco coast; ask Lt. Ransom what the 7th Florida heard at Missionary Ridge. Every answer cites the memories it stands on — and refuses the future politely.
Personas in conversation with each other across generations — and a portal for the living to deposit their own memories into the line, one evening a week.
);
}
/* ====================================================================
Section VI — The Numbers (lineage statistics)
==================================================================== */
function StatTile(props) {
return (
);
}
/* Per-family records — tap a married-in surname to open its marriages into the
line, each with a confidence stamp. The stub of a page waiting to be filled. */
function familyToneColor(tone) {
return { strong: LL.accent, mid: '#8a7a5c', soft: '#a07d4a', open: '#5f6b4e', out: 'rgba(34,28,20,.42)' }[tone] || '#8a7a5c';
}
function FamiliesPanel(props) {
const families = props.families, conf = window.CASON_CONFIDENCE;
const [sel, setSel] = useState(null);
const selFam = families.filter(function (f) { return f.surname === sel; })[0];
return (
THE FAMILIES THAT MARRIED IN · TAP A NAME
{families.map(function (f) {
const on = sel === f.surname;
return ;
})}
{selFam ? (
The {selFam.surname} family
{selFam.marriages.length} marriage{selFam.marriages.length > 1 ? 's' : ''} into the Cason line
{st ? {st.label} : null}
{m.who}
{m.lifespan ? {' (' + m.lifespan + ')'} : null}
{m.into === 'married out' ? ' married a Cason' : married {m.into}}
;
})}
The {selFam.surname} family’s own story is still thin in the record — a page waiting to be filled.
) : null}
);
}
function TheNumbers(props) {
const s = window.CASON_STATS;
if (!s || !s.byGen || !s.byGen.length) return null;
const thomas = s.descendants['thomas-sr'] || { total: 0 };
const ransom = s.descendants['ransom-sr'] || { total: 0 };
return (
The family, alive across four centuries.
How many Casons were living in any given year. The solid line counts only members with a birth and death on record; the shaded field estimates the rest from their generation and kin — a reconstruction, not a census.
FIG. 2 — CASON FAMILY MEMBERS ALIVE BY YEAR, {s.start}–{s.present} · SOLID = RECORDED, SHADED = ESTIMATED
Who lived to see the next branches.
Counted only where the dates allow it — shown as met / determinable. Blanks are generations whose records are still too thin to say.
{props.viewer === 'known' ? 'Not one line — all of us.' : 'Not one descent — a whole family.'}
The direct line is {s.directMembers} names. Around it stand {s.branchMembers} more — the brothers and sisters who stayed, the cousins who scattered — and {s.families.length} families who married into the Casons and became part of the line.
Cannon, Poole, Munden, Barrow, McKinney, Douglas, O’Steen and the rest — the Casons are only half of every marriage. Their records are still thin; adding them is how the story gets its full width.
);
}
/* ====================================================================
Section VI — The Threads (evidence-stamped asides, collapsed by default)
==================================================================== */
const STAMP_TONE = {
strong: LL.accent, // ON THE RECORD / STRONGLY SUPPORTED
mid: '#8a7a5c', // AS REPORTED / NOTED
soft: '#a07d4a', // REASONED / DOUBTFUL
open: '#5f6b4e', // OPEN QUESTION
out: 'rgba(34,28,20,.42)' // RULED OUT
};
function AsideRow(props) {
const a = props.aside, who = props.who;
const [open, setOpen] = useState(false);
const color = STAMP_TONE[a.stamp.tone] || STAMP_TONE.mid;
const preview = a.text.length > 96 && !open ? a.text.slice(0, 94).replace(/\s+\S*$/, '') + '…' : a.text;
return (
);
}
function Threads() {
const conf = window.CASON_CONFIDENCE, data = window.CASON_DATA, mem = window.CASON_MEMORY;
const rows = useMemo(function () {
if (!conf || !data) return [];
// a curated spread of the finds that don't fit the clean story flow —
// deliberately across the whole confidence ladder, on the people they
// belong to. `possible`-evidence people supply the REASONED tier.
const picks = ['ransom-jr', 'casey-ann', 'thadeous', 'ransom-sr', 'carl-columbus', 'james-green', 'moses', 'robert-sr', 'berrien-cason-sr', 'henry-cason-b', 'julia-matilda'];
const bucket = { strong: [], mid: [], soft: [], open: [], out: [] };
picks.forEach(function (id) {
const p = data.people[id]; if (!p) return;
conf.asidesForPerson(p, mem).forEach(function (a) {
if (a.kind === 'source' && a.text.length < 40) return;
(bucket[a.stamp.tone] || bucket.mid).push({ aside: a, who: p.name.replace(/\s*\(.*\)/, '') });
});
});
// quota per tier so every stamp is represented, capped ~2 per person
const quota = { strong: 3, mid: 2, soft: 3, open: 4, out: 1 };
const seen = {}, out = [];
['strong', 'mid', 'soft', 'open', 'out'].forEach(function (tone) {
let n = 0;
bucket[tone].forEach(function (r) {
if (n >= quota[tone]) return;
if ((seen[r.who] || 0) >= 2) return;
seen[r.who] = (seen[r.who] || 0) + 1; n++; out.push(r);
});
});
return out;
}, []);
if (!rows.length) return null;
return (
The things that don’t fit the story — told straight.
The leads, the loose ends, the finds off to the side. Each carries a stamp for exactly how sure we are — from on the record to reasoned but not concrete to an open question that may never be settled. Collapsed by default; the story reads clean without them.
{rows.map(function (r, i) { return ; })}
);
}
/* ====================================================================
Footer
==================================================================== */
function Footer() {
const linkS = { fontFamily: LL.mono, fontSize: 10.5, letterSpacing: '.14em' };
return (
);
}
/* ====================================================================
Root
==================================================================== */
/* the story-depth control — soft, client-side; dials how personal the
telling gets. Fixed to the corner so it follows the reader. */
function DepthControl(props) {
const T = window.CASON_TIERS;
if (!T) return null;
const maxLvl = T.level(props.authMax || 'outsider');
return (
);
}
/* Private, RLS-gated story content — arrives only for a signed-in member whose
tier is deep enough. If you can see it, the server sent it; an outsider's
browser never receives these rows at all. */
function PrivatePanel(props) {
if (!props.notes || !props.notes.length) return null;
return (
KEPT FOR FAMILY · SERVED TO YOU BECAUSE YOU’RE SIGNED IN
{props.notes.map(function (n) {
return (
{n.label}
{n.body}
);
})}
);
}
function LivingLine() {
useOnce(LL_CSS);
const T = window.CASON_TIERS;
const line = window.CASON_LINE;
const [viewer, setViewerState] = useState(function () { return T ? T.viewer() : 'outsider'; });
const [authMax, setAuthMax] = useState('outsider');
const [priv, setPriv] = useState([]);
const [signedIn, setSignedIn] = useState(false);
const [memberName, setMemberName] = useState('');
const [msg, setMsg] = useState('');
useEffect(function () {
const A = window.CASON_AUTH;
if (!A || !A.enabled) return;
function apply() {
setAuthMax(A.myTier());
const st = A.getState();
const isMember = !!(st && st.verified);
setSignedIn(isMember);
setMemberName(st && st.name ? st.name : '');
if (isMember) { A.fetchPrivate().then(setPriv); setMsg(''); } else setPriv([]);
}
return A.onChange(function () { apply(); });
}, []);
function pickViewer(key) { if (T) T.setViewer(key); setViewerState(key); }
function onSignIn() {
const A = window.CASON_AUTH;
if (!A || !A.enabled) { setMsg('Family sign-in is not configured yet.'); return; }
const email = window.prompt('Family? Enter your email and we will send a one-time sign-in link:');
if (!email) return;
setMsg('Sending a sign-in link to ' + email.trim() + '…');
A.signIn(email.trim()).then(function () { setMsg('Check your email for the sign-in link, then come back here.'); })
.catch(function (e) { setMsg('Could not send the link: ' + (e && e.message ? e.message : 'error')); });
}
function onSignOut() { const A = window.CASON_AUTH; if (A) A.signOut(); setMsg(''); }
const stats = useMemo(function () {
if (!line || !line.gens) return { personas: 0, generations: 0, years: 0, start: 0, present: 0 };
var personas = 0;
line.gens.forEach(function (g) { personas += g.members.length; });
return { personas: personas, generations: line.gens.length, years: line.present - line.start, start: line.start, present: line.present };
}, [line]);
// the viewer only ever sees content up to the tier they are ENTITLED to.
const effViewer = (T && T.level(viewer) <= T.level(authMax)) ? viewer : authMax;
if (!line || !line.gens || !line.gens.length) {
return (
The Living Line is loading…
If this persists, the family record failed to load.