{/* === 4. Primitives reference === */}
{}}/> setTweak('locale', v)}/>
setTweak('expandFeatured', v)}/>
setTweak('fiveTabs', v === '5')}/>
setTweak('dateMode', v)}/>
);
}
// ─── StatesShowcase — compact list of one row per state, for state matrix ──
// v1.3.2: post-bottom-sheet, this no longer toggles inline expand. Tap on
// any row opens the canonical sheet (same as MobileExp* and DesktopLayout).
function StatesShowcase({ locale, dateMode }) {
const { matches, sheetMatchId, openSheet, closeSheet, onChange, activeMatch } =
usePRMatchSheet(null);
// Pick one match per state for the compact showcase
const ids = ['mw28-per-est', 'mw28-rma-bar', 'mw28-mci-liv', 'mw28-bay-bvb', 'mw28-psg-mun'];
const shown = ids.map((id) => matches.find((m) => m.id === id)).filter(Boolean);
return (
);
}
// ─── SingleMatchExpanded — focuses on one match with the bottom sheet open ─
// Post-§14.0 (v1.3): the inline-expand pattern was replaced by a bottom sheet.
// This artboard now renders the row in its closed state PLUS the sheet open
// over it — that's the live UX. The artboard frame is viewport-sized
// (≈ 920 height) so the 90% sheet looks natural.
function SingleMatchExpanded({ locale, matchId, dateMode }) {
const [matches, setMatches] = prUseState(() => clonePRMatches(PR_MATCHES));
const m = matches.find((mm) => mm.id === matchId);
if (!m) return null;
const onChange = (mid, qid, value) => setMatches((cur) =>
cur.map((mm) => mm.id === mid ? { ...mm, userAnswers: { ...mm.userAnswers, [qid]: value } } : mm));
return (
{}}
onChangeAnswer={onChange}/>
{}} onChangeAnswer={onChange}/>
);
}
// ─── DesktopWithSheetOpen ──────────────────────────────────────────────────
// v1.3.1: artboard for the desktop layout showing the bottom-sheet open.
// Identical to DesktopLayout but with one match forced-open in the sheet, and
// the artboard height clipped so the open sheet docks naturally to the bottom
// of the visible viewport (rather than to the bottom of a very tall page).
function DesktopWithSheetOpen({ locale, matchId, dateMode }) {
const [matches, setMatches] = prUseState(() => clonePRMatches(PR_MATCHES));
const [filter, setFilter] = prUseState('all');
const onChange = (mid, qid, value) => setMatches((cur) =>
cur.map((mm) => mm.id === mid ? { ...mm, userAnswers: { ...mm.userAnswers, [qid]: value } } : mm));
const active = matches.find((m) => m.id === matchId);
const list = applyFilter(matches, filter);
const cs = counts(matches);
const featured = list.filter((m) => m.featured);
const rest = list.filter((m) => !m.featured);
return (