{title}

{title}

\n {subtitle &&

{subtitle}

}\n

\n {children}\n

\n );\n}\n\n// Reveal-on-scroll wrapper. The js-reveal class + IntersectionObserver in\n// Shell.tsx fades sections up as they enter the viewport; reduced-motion users\n// get them instantly (see the base stylesheet in Shell.tsx).\nexport function Reveal({ children }: { children: React.ReactNode }) {\n return

{children}

;\n}\n\nexport function PrizePill(\n { amount, label, accent }: { amount: string; label: string; accent?: boolean },\n) {\n return (\n \n {amount}\n {label}\n \n );\n}\n\nexport function MatchGrid({ matches, data }: { matches: MatchRow[]; data: PageData }) {\n if (matches.length === 0) return null;\n return (\n

\n {matches.map((m) => {\n const t1 = m.team1_id ? data.teamById.get(m.team1_id) : null;\n const t2 = m.team2_id ? data.teamById.get(m.team2_id) : null;\n return (\n \n );\n })}\n

\n );\n}\n\nexport function OwnerChip({ contestantId }: { contestantId: string | undefined }) {\n if (!contestantId) return null;\n const c = CONTESTANT_BY_ID[contestantId];\n if (!c) return null;\n return (\n \n {c.name}\n \n );\n}\n",[],[177,348],"db791c74-b49e-433d-9d42-e40b9f2ba07b","Shell.tsx","9ecc66fc-5d45-11f1-829e-1607ee4eb77e",134,["D",1781689441358],7,"// HTML shell — Twind for Tailwind, std/catch for client error logging.\n// React 18.2 pinned everywhere to avoid hook-state version conflicts.\n//\n// Type system (taste refresh): Geist for UI/display, Geist Mono for every\n// number (scores, ranks, countdown, GD) via the .num helper — a scoreboard\n// reads better when figures are tabular and monospaced. One locked accent\n// (emerald) is exposed as --accent for the few places that need an inline\n// brand color; everywhere else uses Twind emerald utilities.\n\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { NavBar, type NavTab } from \"./NavBar.tsx\";\n\ntype Props = {\n title: string;\n children: React.ReactNode;\n // Which primary tab to highlight. Pass null to show the nav with no tab\n // active (e.g. the match page). Omit entirely on standalone pages like the\n // draw reveal that shouldn't carry the main nav at all.\n nav?: NavTab | null;\n};\n\nconst BASE_STYLES = `\n :root {\n --accent: #059669; /* emerald-600 : the one locked brand accent */\n --accent-strong: #047857; /* emerald-700 : hover / pressed */\n font-family: 'Geist', system-ui, -apple-system, sans-serif;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n }\n body { font-family: 'Geist', system-ui, -apple-system, sans-serif; }\n\n /* Tabular monospaced figures: apply to any run of numbers. */\n .num, code, .font-mono {\n font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;\n }\n .num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }\n\n ::selection { background: rgba(5, 150, 105, 0.18); }\n\n /* Scroll-reveal. The hidden state ONLY applies once JS adds .reveal-ready to\n (and only when motion is allowed + IntersectionObserver exists), so\n no-JS / reduced-motion / old browsers always render content visible. */\n .reveal-ready .js-reveal {\n opacity: 0;\n transform: translateY(14px);\n transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),\n transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);\n }\n .reveal-ready .js-reveal.in { opacity: 1; transform: none; }\n\n /* Reduced-motion safety net for the CSS-driven reveals added in the refresh. */\n @media (prefers-reduced-motion: reduce) {\n *, *::before, *::after {\n animation-duration: 0.001ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.001ms !important;\n scroll-behavior: auto !important;\n }\n }\n`;\n\n// Enables the hidden reveal state before first paint — but only when motion is\n// allowed and IntersectionObserver exists, so it can never strand content.\nconst REVEAL_ENABLE = `\n(function () {\n try {\n var m = window.matchMedia;\n var reduce = m && m('(prefers-reduced-motion: reduce)').matches;\n if (!reduce && 'IntersectionObserver' in window) {\n document.documentElement.classList.add('reveal-ready');\n }\n } catch (e) {}\n})();\n`.trim();\n\n// Observes .js-reveal blocks and fades them up as they enter the viewport.\n// A 2.5s timer force-reveals anything still hidden, so an observer edge case\n// can never leave a section invisible.\nconst REVEAL_OBSERVE = `\n(function () {\n var els = document.querySelectorAll('.js-reveal');\n if (!els.length) return;\n if (!document.documentElement.classList.contains('reveal-ready')) return;\n var io = new IntersectionObserver(function (entries) {\n entries.forEach(function (e) {\n if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); }\n });\n }, { rootMargin: '0px 0px -8% 0px', threshold: 0.08 });\n els.forEach(function (el) { io.observe(el); });\n setTimeout(function () {\n els.forEach(function (el) { el.classList.add('in'); });\n }, 2500);\n})();\n`.trim();\n\nexport function Shell({ title, children, nav }: Props) {\n const showNav = nav !== undefined;\n return (\n \n \n \n \n \n {title}\n \n \n \n \n \n

Search