Add the synopsis comparison modal to the parallels panel

Each pericope row in the Synoptic parallels panel now carries a "compare"
button (a columns glyph) that opens a modal showing the passage across the
Gospels side by side, with the actual scripture text of each. This is phase 1
of the Gospel parallels browser (approach C); a shareable /synopsis/ route is a
later phase.

The comparison is pre-rendered at build time (a native <dialog> per pericope),
so it opens instantly with no fetch and needs only a few lines of JS to open and
to close on backdrop click (Esc and the close button are native). Each column
header links back to that Gospel's chapter at the verse ("Read with commentary
→"), and columns whose Gospel has authored notes on the pericope show a "✎ N
notes" badge, so the reader can see where commentary lives and jump there.

- src/lib/texts.ts: passageText(code, range) pulls a verse range as inline HTML,
  matching ChapterText's per-segment spacing so text reads correctly across
  dropped footnote markers.
- src/lib/commentary.ts: notesInRange(code, range) counts overlapping notes.
- src/lib/synopsis.ts: synopsisColumns(code, entry) assembles the columns
  (self passage first, then each parallel Gospel).
- scripts/build-parallels.mjs: emit each parallel's parsed verse span (`from`)
  so the columns can pull its text.
- src/components/Parallels.astro: compare button + per-pericope dialog.
- src/styles/global.css: compare-button and modal styles (theme-aware).

The panel section keeps data-pagefind-ignore, so the pre-rendered comparison
text is not indexed by search.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: biblenerd

scripts/build-parallels.mjs

@@ -1,7 +1,8 @@
 // Build-time Gospel-parallels pipeline: data/parallels/synopsis.json (pericopes with
 // per-Gospel refs) → public/data/parallels/<CODE>.json (a verse→parallels index, keyed by
 // book then chapter). Every reference is validated against the vendored text; a bad one is
-// reported. Proof of concept — not yet wired into `npm run data` or any page.
+// reported. Runs as part of `npm run data`; feeds the Synoptic parallels panel and the
+// synopsis comparison modal on Gospel chapter pages.
 //
 //   node scripts/build-parallels.mjs
 
@@ -69,7 +70,13 @@ function build() {
         from: { sc: c.span.sc, sv: c.span.sv, ec: c.span.ec, ev: c.span.ev },
         parallels: cols
           .filter((o) => o.code !== c.code)
-          .map((o) => ({ code: o.code, ref: o.ref, label: o.label, href: o.href })),
+          .map((o) => ({
+            code: o.code,
+            ref: o.ref,
+            label: o.label,
+            href: o.href,
+            from: { sc: o.span.sc, sv: o.span.sv, ec: o.span.ec, ev: o.span.ev },
+          })),
       });
     }
   }

src/components/Parallels.astro

@@ -1,33 +1,99 @@
 ---
 // "Synoptic parallels" — for each pericope in this Gospel chapter that also appears in
 // another Gospel, the passage's own range + title, then a chip linking to the parallel
-// passage in each other Gospel. Sits in the right column beside the reader, mirroring
-// <Backlinks>. Data from public/data/parallels/<CODE>.json. REQUIREMENTS.md §5.8.
+// passage in each other Gospel. Each row also carries a "compare" button that opens a
+// modal showing the pericope across the Gospels side by side (the synopsis browser).
+// Sits in the right column beside the reader, mirroring <Backlinks>. REQUIREMENTS.md §5.8.
 import type { ParallelEntry } from '../lib/parallels';
+import { synopsisColumns } from '../lib/synopsis';
 
 interface Props {
+  code: string; // this chapter's Gospel (USFM code)
   entries: ParallelEntry[];
 }
-const { entries } = Astro.props;
+const { code, entries } = Astro.props;
 const SHORT: Record<string, string> = { MAT: 'Matt', MRK: 'Mark', LUK: 'Luke', JHN: 'John' };
 // Refs are stored with a plain hyphen range separator; render as an en dash to match the site.
 const dash = (r: string) => r.replace(/-/g, '–');
+const rows = entries.map((e) => ({ e, cols: synopsisColumns(code, e), dlg: `syn-${code}-${e.id}` }));
 ---
 
 {entries.length > 0 && (
   <section class="parallels ui" data-pagefind-ignore>
     <div class="col-label pl-head">Synoptic parallels</div>
     <ul>
-      {entries.map((e) => (
+      {rows.map(({ e, cols, dlg }) => (
         <li>
-          <span class="pl-title"><span class="pl-self">{dash(e.ref)}</span> {e.title}</span>
-          <div class="pl-par">
-            {e.parallels.map((p) => (
-              <span class="pl-chip"><span class="pl-code">{SHORT[p.code] ?? p.code}</span>{' '}<a href={p.href}>{dash(p.ref)}</a></span>
-            ))}
+          <div class="pl-main">
+            <span class="pl-title"><span class="pl-self">{dash(e.ref)}</span> {e.title}</span>
+            <div class="pl-par">
+              {e.parallels.map((p) => (
+                <span class="pl-chip"><span class="pl-code">{SHORT[p.code] ?? p.code}</span>{' '}<a href={p.href}>{dash(p.ref)}</a></span>
+              ))}
+            </div>
           </div>
+          <button
+            type="button"
+            class="pl-cmp"
+            data-syn={dlg}
+            aria-haspopup="dialog"
+            title="Compare across the Gospels"
+            aria-label={`Compare "${e.title}" across the Gospels`}
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+              <rect x="3" y="4" width="5" height="16" rx="1.2" />
+              <rect x="9.5" y="4" width="5" height="16" rx="1.2" />
+              <rect x="16" y="4" width="5" height="16" rx="1.2" />
+            </svg>
+          </button>
+
+          <dialog class="syn-modal" id={dlg} aria-labelledby={`${dlg}-t`}>
+            <form method="dialog" class="syn-mhead">
+              <div>
+                <h2 class="syn-mtitle" id={`${dlg}-t`}>{e.title}</h2>
+                <span class="syn-mref">{cols.length} Gospels · read side by side</span>
+              </div>
+              <button class="syn-x" value="close" aria-label="Close">✕</button>
+            </form>
+            <div class="syn-scroll">
+              <div class="syn-cols" style={`--n:${cols.length}`}>
+                {cols.map((c) => (
+                  <div class={`syn-col${c.self ? ' self' : ''}`}>
+                    <div class="syn-chead">
+                      <div class="syn-cg">{c.name} <span class="syn-cref">{dash(c.ref)}</span>{c.self && <span class="syn-here"> · this chapter</span>}</div>
+                      <a class="syn-back" href={c.href}>Read with commentary →</a>
+                      {c.notes > 0 && <span class="syn-cnotes">✎ {c.notes} note{c.notes === 1 ? '' : 's'}</span>}
+                    </div>
+                    <div class="syn-ctext">
+                      {c.verses.length === 0
+                        ? <span class="syn-empty">—</span>
+                        : c.verses.map((vv) => (
+                            <><span class="syn-vn">{vv.v}</span><Fragment set:html={vv.html} />{' '}</>
+                          ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div class="syn-mfoot"><kbd>Esc</kbd> or click outside to close</div>
+          </dialog>
         </li>
       ))}
     </ul>
   </section>
 )}
+
+<script>
+  // Open a pericope's synopsis dialog; close on backdrop click (native form/Esc handle the rest).
+  document.querySelectorAll<HTMLButtonElement>('.pl-cmp[data-syn]').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const d = document.getElementById(btn.dataset.syn!) as HTMLDialogElement | null;
+      if (d?.showModal) d.showModal();
+    });
+  });
+  document.querySelectorAll<HTMLDialogElement>('dialog.syn-modal').forEach((d) => {
+    d.addEventListener('click', (e) => {
+      if (e.target === d) d.close(); // click landed on the backdrop, not the content
+    });
+  });
+</script>

src/lib/commentary.ts

@@ -40,6 +40,22 @@ export function notesForChapter(code: string, chapter: number): Note[] {
     .sort((a, b) => startIn(a) - startIn(b) || b.span - a.span);
 }
 
+/** How many authored (non-book) notes overlap a verse range — for the synopsis "✎ notes"
+ *  badge, telling the reader which Gospel columns carry commentary on the pericope. */
+export function notesInRange(
+  code: string,
+  range: { sc: number; sv: number; ec: number; ev: number },
+): number {
+  const lo = range.sc * 1000 + range.sv;
+  const hi = range.ec * 1000 + range.ev;
+  return loadNotes(code).filter(
+    (n) =>
+      n.anchor.type !== 'book' &&
+      n.anchor.sc * 1000 + n.anchor.sv <= hi &&
+      n.anchor.ec * 1000 + n.anchor.ev >= lo,
+  ).length;
+}
+
 /** A note elsewhere that references a verse in some chapter ("referenced elsewhere"). */
 export interface Backlink {
   tv: number; // target verse in this chapter

src/lib/parallels.ts

@@ -5,11 +5,14 @@ import path from 'node:path';
 
 const DIR = path.join(process.cwd(), 'public/data/parallels');
 
+import type { VerseRange } from './texts';
+
 export interface ParallelRef {
   code: string; // USFM code of the parallel Gospel (MAT/MRK/LUK/JHN)
   ref: string; // reference within that Gospel, e.g. "3:1-6"
   label: string; // full label, e.g. "Matthew 3:1-6"
   href: string; // link to the passage, e.g. "/nt/matthew/3#v1"
+  from: VerseRange; // parsed verse span, for pulling the passage text
 }
 
 export interface ParallelEntry {

src/lib/synopsis.ts

@@ -0,0 +1,39 @@
+// Build-time assembly of the synopsis comparison columns for a pericope: the chapter's own
+// passage plus each parallel Gospel, each with its verse text and a count of the commentary
+// notes that cover it. Feeds the comparison modal launched from the Synoptic parallels panel.
+import { bookByCode } from './canon';
+import { passageText, type PassageVerse, type VerseRange } from './texts';
+import { notesInRange } from './commentary';
+import type { ParallelEntry } from './parallels';
+
+export interface SynopsisColumn {
+  code: string; // USFM code
+  name: string; // Gospel name (Matthew/Mark/Luke/John)
+  ref: string; // reference within that Gospel, e.g. "3:1-6"
+  href: string; // link to the passage (chapter page, verse anchor)
+  self: boolean; // true for the chapter the reader is on
+  verses: PassageVerse[]; // the passage text, one entry per verse
+  notes: number; // authored notes overlapping the passage (for the ✎ badge)
+}
+
+const selfHref = (code: string, from: VerseRange): string => {
+  const b = bookByCode(code);
+  return b ? `/${b.testament}/${b.slug}/${from.sc}#v${from.sv}` : '#';
+};
+
+/** Columns for a pericope: the chapter's own passage first, then each parallel Gospel. */
+export function synopsisColumns(selfCode: string, entry: ParallelEntry): SynopsisColumn[] {
+  const col = (code: string, ref: string, href: string, from: VerseRange, self: boolean): SynopsisColumn => ({
+    code,
+    name: bookByCode(code)?.name ?? code,
+    ref,
+    href,
+    self,
+    verses: passageText(code, from),
+    notes: notesInRange(code, from),
+  });
+  return [
+    col(selfCode, entry.ref, selfHref(selfCode, entry.from), entry.from, true),
+    ...entry.parallels.map((p) => col(p.code, p.ref, p.href, p.from, false)),
+  ];
+}

src/lib/texts.ts

@@ -95,6 +95,59 @@ export function loadBook(code: string): BookText | null {
   return JSON.parse(fs.readFileSync(p, 'utf8'));
 }
 
+/** A verse-numbered range within a book, e.g. { sc:1, sv:2, ec:1, ev:6 }. */
+export interface VerseRange {
+  sc: number;
+  sv: number;
+  ec: number;
+  ev: number;
+}
+/** One rendered verse of a passage. */
+export interface PassageVerse {
+  v: number; // verse number
+  html: string; // inline HTML (italic runs preserved, footnote markers dropped)
+}
+
+const vkey = (c: number, v: number) => c * 1000 + v;
+
+/**
+ * The text of a verse range, one entry per verse, as inline HTML. Walks the book's block
+ * model tracking the running verse number and collects the text segments that fall inside
+ * [sc:sv … ec:ev]. Footnote markers are dropped; italic (translator-addition) runs are kept.
+ * Used to render synopsis comparison columns at build time.
+ */
+export function passageText(code: string, range: VerseRange): PassageVerse[] {
+  const book = loadBook(code);
+  if (!book) return [];
+  const lo = vkey(range.sc, range.sv);
+  const hi = vkey(range.ec, range.ev);
+  const order: number[] = [];
+  const acc = new Map<number, string>();
+  for (const chap of book.chapters) {
+    if (chap.number < range.sc || chap.number > range.ec) continue;
+    let cur: number | null = null;
+    for (const blk of chap.blocks) {
+      if (!blk.segments) continue;
+      for (const seg of blk.segments) {
+        if (isVerse(seg)) {
+          cur = seg.n;
+        } else if (!isFootnote(seg) && cur != null) {
+          const k = vkey(chap.number, cur);
+          if (k < lo || k > hi) continue;
+          if (!acc.has(k)) {
+            acc.set(k, '');
+            order.push(k);
+          }
+          // Trailing space per segment mirrors ChapterText, so text reads correctly across
+          // dropped footnote markers (e.g. "Jesus" + \f + "Christ" → "Jesus Christ").
+          acc.set(k, acc.get(k)! + inlineHtml((seg as TextSeg).t) + ' ');
+        }
+      }
+    }
+  }
+  return order.map((k) => ({ v: k % 1000, html: (acc.get(k) ?? '').replace(/\s+/g, ' ').trim() }));
+}
+
 export interface Intro {
   title: string;
   html: string;

src/pages/[testament]/[book]/[chapter].astro

@@ -128,7 +128,7 @@ const credit =
               <div class="note-body" set:html={n.html} />
             </article>
           ))}
-          <Parallels entries={parallels} />
+          <Parallels code={book.code} entries={parallels} />
           <Backlinks groups={back.groups} bookNotes={back.bookNotes} total={back.total} />
         </section>
       </div>

src/styles/global.css

@@ -599,8 +599,10 @@ ol ol, ol ul, ul ul, ul ol { padding-left: 1.25em; }
   font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
 }
 .parallels ul { list-style: none; margin: 8px 0 0; padding: 0; }
-.parallels li { padding: 9px 0; border-bottom: 1px dotted var(--rule); }
+.parallels li { padding: 9px 0; border-bottom: 1px dotted var(--rule);
+  display: flex; gap: 8px; align-items: flex-start; }
 .parallels li:last-child { border-bottom: 0; }
+.parallels .pl-main { flex: 1; min-width: 0; }
 .parallels .pl-title { font-size: 13.5px; color: var(--ink); }
 .parallels .pl-self { color: var(--accent); font-weight: 700; margin-right: 5px; }
 .parallels .pl-par { margin-top: 5px; }
@@ -609,6 +611,50 @@ ol ol, ol ul, ul ul, ul ol { padding-left: 1.25em; }
 .parallels .pl-code { color: var(--gold-ink); font-weight: 700; font-size: 11px; }
 .parallels .pl-chip a { color: var(--link); text-decoration: none; }
 .parallels .pl-chip a:hover { text-decoration: underline; color: var(--accent); }
+/* compare button — opens the synopsis modal for this pericope */
+.parallels .pl-cmp { flex: none; margin-top: 1px; width: 26px; height: 26px;
+  display: inline-flex; align-items: center; justify-content: center;
+  border: 1px solid var(--rule); border-radius: 6px; background: var(--bg); color: var(--accent);
+  cursor: pointer; transition: background .12s, border-color .12s; }
+.parallels .pl-cmp:hover { background: var(--accent-soft); border-color: var(--accent); }
+.parallels .pl-cmp svg { width: 15px; height: 15px; display: block; }
+
+/* ---- synopsis comparison modal (launched from a parallels row) ---- */
+dialog.syn-modal { width: min(1000px, 94vw); max-height: 88vh; padding: 0;
+  border: 1px solid var(--rule); border-radius: 14px; background: var(--panel); color: var(--ink);
+  box-shadow: 0 24px 70px rgba(0, 0, 0, .35); font-family: var(--sans); }
+dialog.syn-modal::backdrop { background: rgba(20, 17, 12, .55); }
+.syn-modal .syn-mhead { position: sticky; top: 0; z-index: 1; background: var(--panel);
+  border-bottom: 1px solid var(--rule); border-radius: 14px 14px 0 0;
+  display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px; }
+.syn-modal .syn-mtitle { margin: 0; font-size: 16px; color: var(--accent); font-family: var(--serif); }
+.syn-modal .syn-mref { font-size: 12px; color: var(--ink-soft); }
+.syn-modal .syn-mhead > div { flex: 1; }
+.syn-modal .syn-x { flex: none; border: 1px solid var(--rule); background: var(--bg); border-radius: 7px;
+  width: 30px; height: 30px; cursor: pointer; color: var(--ink-soft); font-size: 15px; line-height: 1; }
+.syn-modal .syn-x:hover { border-color: var(--accent); color: var(--accent); }
+.syn-modal .syn-scroll { overflow: auto; max-height: calc(88vh - 96px); }
+.syn-modal .syn-cols { display: grid; grid-template-columns: repeat(var(--n), minmax(230px, 1fr));
+  gap: 1px; background: var(--rule); }
+.syn-modal .syn-col { background: var(--panel); padding: 12px 15px 16px; min-width: 0; }
+.syn-modal .syn-col.self { background: var(--stripe); }
+.syn-modal .syn-chead { border-bottom: 1px solid var(--rule); padding-bottom: 8px; margin-bottom: 9px; }
+.syn-modal .syn-cg { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
+.syn-modal .syn-cref { color: var(--ink-soft); font-weight: 400; }
+.syn-modal .syn-here { color: var(--ink-soft); font-weight: 400; text-transform: none; letter-spacing: 0; }
+.syn-modal .syn-back { display: inline-block; margin-top: 5px; font-size: 12px; font-weight: 600;
+  text-decoration: none; color: var(--link); }
+.syn-modal .syn-back:hover { text-decoration: underline; }
+.syn-modal .syn-cnotes { display: inline-block; margin-left: 8px; font-size: 10.5px; font-weight: 700;
+  color: var(--gold-ink); background: var(--gold-soft); border: 1px solid var(--gold-edge); border-radius: 4px; padding: 0 5px; }
+.syn-modal .syn-ctext { font-family: var(--serif); font-size: 15px; line-height: 1.6; color: var(--ink); }
+.syn-modal .syn-vn { font-size: .62em; color: var(--accent); font-weight: 700; vertical-align: super; margin-right: 2px; }
+.syn-modal .syn-empty { color: var(--ink-soft); font-style: italic; }
+.syn-modal .syn-mfoot { border-top: 1px solid var(--rule); padding: 9px 16px; font-size: 12px; color: var(--ink-soft); }
+.syn-modal kbd { font-family: var(--sans); font-size: 11px; border: 1px solid var(--rule); border-radius: 4px; padding: 0 5px; background: var(--bg); }
+@media (max-width: 560px) {
+  .syn-modal .syn-cols { grid-template-columns: repeat(var(--n), minmax(200px, 1fr)); }
+}
 .note-body blockquote {
   margin: 12px 0; padding: 10px 16px; border-left: 3px solid var(--gold);
   background: var(--gold-soft); border-radius: 0 6px 6px 0; color: var(--ink-soft);