{title}

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_453":454,"_455":456},"routes/_app.x.$handle.$name",{"_101":100,"_32":46,"_110":91,"_27":111,"_13":14,"_112":-5,"_11":113,"_114":115,"_116":117,"_118":119,"_120":121,"_20":-5,"_122":-5,"_123":-5,"_124":25,"_125":126,"_127":60,"_128":-5,"_129":-5,"_130":131},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":25},"version",133,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","components/Shell.tsx","latestPath","fileId","9ecc66fc-5d45-11f1-829e-1607ee4eb77e","name","Shell.tsx","fileType","script","content","// 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 return (\n \n \n \n \n \n {title}\n \n \n \n \n \n

Diff · v133