Commit Graph

"use client";import { useEffect, useId, useMemo, useRef, useState, useSyncExternalStore, type CSSProperties, type FormEvent, type ReactNode } from "react";import { motion, useReducedMotion } from "framer-motion";import {  GitCommitIcon as PhGitCommit,  CircleNotchIcon as PhCircleNotch,  FlameIcon as PhFlame,  ArrowCounterClockwiseIcon as PhReset,  ArrowLeftIcon as PhArrowLeft,  CaretLeftIcon as PhCaretLeft,  CaretRightIcon as PhCaretRight,  PlusIcon as PhPlus,  PencilSimpleIcon as PhPencil,} from "@phosphor-icons/react";// A sprint is a start and an end date, on any weekday. Sprints never overlap,// but they may leave days between them (a holiday week, a hardening week), and// those days belong to no sprint. The newest sprint runs to the later of its// end and today: a team that forgets to start the next one still sees today's// commits land somewhere.const PLANNED_DAYS = 14;// The longest sprint the date fields accept.const MAX_SPRINT_DAYS = 56;// A year of history, five sprints on screen at a time.const SEEDED_SPRINTS = 26;const VISIBLE_SPRINTS = 5;// How far ahead a sprint can be scheduled when it is created early.const MAX_LEAD_DAYS = 28;const DAY_MS = 86_400_000;const DAYS = 7;const WEEKDAYS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];const COMMITS_KEY = "ui-commit-graph:commits";const SPRINTS_KEY = "ui-commit-graph:sprints";const THEME_KEY = "ui-commit-graph:theme";// The server cannot know what day it is for the viewer, so the first paint// renders against a fixed date and the client swaps in the real one during// hydration (see useToday).const SERVER_TODAY = "2026-09-29";type ThemeId = "emerald" | "blue" | "violet" | "amber" | "rose";interface Theme {  label: string;  swatch: string;  light: [string, string, string, string];  dark: [string, string, string, string];}const THEMES: Record<ThemeId, Theme> = {  emerald: { label: "Emerald", swatch: "#16A34A", light: ["#BBF7D0", "#4ADE80", "#16A34A", "#166534"], dark: ["#14532D", "#15803D", "#22C55E", "#86EFAC"] },  blue: { label: "Blue", swatch: "#2563EB", light: ["#BFDBFE", "#60A5FA", "#2563EB", "#1E3A8A"], dark: ["#1E3A8A", "#1D4ED8", "#3B82F6", "#93C5FD"] },  violet: { label: "Violet", swatch: "#7C3AED", light: ["#DDD6FE", "#A78BFA", "#7C3AED", "#4C1D95"], dark: ["#4C1D95", "#6D28D9", "#8B5CF6", "#C4B5FD"] },  amber: { label: "Amber", swatch: "#D97706", light: ["#FDE68A", "#FBBF24", "#D97706", "#92400E"], dark: ["#78350F", "#B45309", "#F59E0B", "#FCD34D"] },  rose: { label: "Rose", swatch: "#DB2777", light: ["#FBCFE8", "#F472B6", "#DB2777", "#831843"], dark: ["#831843", "#BE185D", "#EC4899", "#F9A8D4"] },};const THEME_IDS = Object.keys(THEMES) as ThemeId[];// Dates are handled as whole UTC day numbers (days since 1970-01-01). Adding a// day is adding one, and no daylight-saving change can make a day 23 hours long.function dayNumber(iso: string): number {  const [y, m, d] = iso.split("-").map(Number);  return Math.round(Date.UTC(y, m - 1, d) / DAY_MS);}function isoFromDay(day: number): string {  return new Date(day * DAY_MS).toISOString().slice(0, 10);}function weekdayOf(day: number): number {  return new Date(day * DAY_MS).getUTCDay();}// Month names by hand rather than toLocaleDateString: the server and the// browser can disagree on locale, and text that differs between them is a// hydration error.function shortDate(day: number): string {  const d = new Date(day * DAY_MS);  return `${MONTHS[d.getUTCMonth()]} ${d.getUTCDate()}`;}function longDate(day: number): string {  return `${WEEKDAYS[weekdayOf(day)].slice(0, 3)}, ${shortDate(day)}`;}function relativeDay(day: number, today: number): string {  const diff = day - today;  if (diff === 0) return "today";  if (diff === -1) return "yesterday";  if (diff === 1) return "tomorrow";  return diff < 0 ? `${-diff} days ago` : `in ${diff} days`;}// Pure function of the calendar date, not of when the page is viewed: Sep 24// has the same count today and next month. Weekends run at a third, so the// weekday axis carries a real signal.function seededCount(day: number): number {  const x = Math.sin((day + 11) * 12.9898 + 78.233) * 43758.5453;  const frac = x - Math.floor(x);  let count = 0;  if (frac > 0.94) count = 8 + (Math.floor(frac * 37) % 6);  else if (frac > 0.78) count = 4 + (Math.floor(frac * 23) % 4);  else if (frac > 0.35) count = 1 + (Math.floor(frac * 17) % 3);  return weekdayOf(day) % 6 === 0 ? Math.floor(count / 3) : count;}// Integer hash (Math.imul, exact in every engine), deliberately not the// sin-based seededCount above. A bucketed level survives a 1-ULP difference// between two engines' Math.sin; a message index or a SHA does not, and text// that differs between the server and the client is a hydration error.function hash32(seed: number): number {  let h = Math.imul(seed ^ 0x9e3779b9, 0x85ebca6b);  h ^= h >>> 13;  h = Math.imul(h, 0xc2b2ae35);  h ^= h >>> 16;  return h >>> 0;}interface SprintRange {  start: number;  end: number;}// The demo's history: 26 back-to-back sprints of 12 to 16 days, the newest// started five days ago. Uneven lengths put every sprint on a different// weekday, which is what real teams get once a holiday or a slipped planning// meeting has moved the start once or twice.function seededRanges(today: number): SprintRange[] {  const starts = [today - 5];  for (let i = 1; i < SEEDED_SPRINTS; i++) {    starts.unshift(starts[0] - (12 + (hash32(i * 131 + 17) % 5)));  }  return starts.map((start, i) => ({ start, end: i < starts.length - 1 ? starts[i + 1] - 1 : start + PLANNED_DAYS - 1 }));}// A real deploy reads these from the git log (or the host's API). They are// generated here for the same reason the counts are: the site is a static// export, so the demo has to carry its own history.const SUBJECTS = [  "fix: guard the tick generator against an empty range",  "feat: add orientation to the chart frame",  "refactor: pull the tooltip anchor out of the crosshair",  "fix: stop the axis rounding away a fifth of the plot",  "chore: bump framer-motion to 11.3.2",  "test: cover the quantile legend ticks",  "perf: batch the dot layer into one path",  "fix: round projected coords so SSR and the client agree",  "docs: note why the preview files are generated",  "feat: keyboard roving across the heat map cells",  "fix: dark ramp was two steps too light at level 3",  "refactor: hoist the shared spline into the frame",  "chore: regenerate the preview chunks",  "fix: legend toggle left the y domain in dead space",  "feat: sticky first column on the data table",  "style: align the tick labels to the baseline",  "fix: reset the day filter when the sprint changes",  "test: snapshot the empty state",  "perf: memoize the grid so hover stops re-rendering it",  "fix: focus ring vanished at the light end of the ramp",  "feat: copy button on the code block",  "refactor: drop the wrapper div around every cell",  "chore: pin the node version in CI",  "fix: tooltip clipped inside the scroll container",  "docs: rewrite the install steps for bun",  "feat: reduced-motion path for the reveal",  "fix: aria-label read the count without the day",  "revert: put the old easing back on the drawer",  "chore: delete the unused ramp helper",  "fix: off-by-one in the week boundary",];interface Commit {  sha: string;  time: string;  subject: string;}// Every stride is coprime with SUBJECTS.length, so walking the pool by one of// them visits every subject before repeating: a day never lands the same commit// message twice, which is what gives a hashed message away as fake.const STRIDES = [7, 11, 13, 17, 19, 23];function commitsFor(day: number, count: number): Commit[] {  const base = hash32(day * 31 + 7) % SUBJECTS.length;  const stride = STRIDES[hash32(day * 17 + 5) % STRIDES.length];  return Array.from({ length: count }, (_, i) => {    const h = hash32(day * 97 + i * 7919 + 3);    return { h, minutes: 8 * 60 + (h % 660) };  })    .sort((a, b) => a.minutes - b.minutes)    .map(({ h, minutes }, i) => ({      sha: h.toString(16).padStart(8, "0").slice(0, 7),      time: `${String(Math.floor(minutes / 60)).padStart(2, "0")}:${String(minutes % 60).padStart(2, "0")}`,      subject: SUBJECTS[(base + i * stride) % SUBJECTS.length],    }));}function levelFor(count: number): 0 | 1 | 2 | 3 | 4 {  if (count <= 0) return 0;  if (count <= 2) return 1;  if (count <= 5) return 2;  if (count <= 9) return 3;  return 4;}interface Day {  day: number;  count: number;  upcoming: boolean;}interface Sprint {  start: number;  end: number;  days: Day[];  status: "done" | "current" | "planned";  overBy: number;  total: number;  activeDays: number;  elapsedDays: number;  best: number;}// Where the newest sprint actually ends: its own end, or today if it has run// past that with nothing started after it.function effectiveEnd(range: SprintRange, isNewest: boolean, today: number): number {  return isNewest && range.start <= today ? Math.max(range.end, today) : range.end;}function buildSprints(ranges: SprintRange[], today: number, extra: Record<string, number>): Sprint[] {  return ranges.map((range, i) => {    const { start } = range;    const isNewest = i === ranges.length - 1;    const end = effectiveEnd(range, isNewest, today);    const days: Day[] = [];    for (let day = start; day <= end; day++) {      const upcoming = day > today;      days.push({ day, upcoming, count: upcoming ? 0 : seededCount(day) + (extra[isoFromDay(day)] ?? 0) });    }    const elapsed = days.filter((d) => !d.upcoming);    return {      start,      end,      days,      status: start > today ? "planned" : end < today ? "done" : "current",      overBy: end - range.end,      total: elapsed.reduce((sum, d) => sum + d.count, 0),      activeDays: elapsed.filter((d) => d.count > 0).length,      elapsedDays: elapsed.length,      best: elapsed.reduce((max, d) => Math.max(max, d.count), 0),    };  });}// The overview lays each sprint on the calendar, GitHub-style: rows are Sunday// to Saturday, so a sprint that starts on a Wednesday opens three cells down// its first column. Nulls pad the partial weeks at either end.function calendarColumns(days: Day[]): (Day | null)[][] {  const cells: (Day | null)[] = [...Array<null>(weekdayOf(days[0].day)).fill(null), ...days];  while (cells.length % DAYS) cells.push(null);  return Array.from({ length: cells.length / DAYS }, (_, c) => cells.slice(c * DAYS, (c + 1) * DAYS));}// The detail view counts from the sprint's own first day instead, so a// Wednesday sprint reads Wed to Tue across the top and two full rows down.function sprintRows(days: Day[]): (Day | null)[][] {  return Array.from({ length: Math.ceil(days.length / DAYS) }, (_, r) => {    const row: (Day | null)[] = days.slice(r * DAYS, (r + 1) * DAYS);    while (row.length < DAYS) row.push(null);    return row;  });}const ISO_DATE = /^\d{4}-\d{2}-\d{2}$/;function parseDate(value: unknown): number | null {  return typeof value === "string" && ISO_DATE.test(value) ? dayNumber(value) : null;}// Stored as [{ start, end }] in ISO dates. Anything overlapping the sprint// before it is dropped rather than guessed at, so a hand-edited value can// never produce two sprints claiming the same day.function parseRanges(raw: string | null): SprintRange[] | null {  if (!raw) return null;  try {    const list: unknown = JSON.parse(raw);    if (!Array.isArray(list)) return null;    const ranges = list      .map((item: unknown) => {        const { start, end } = (item ?? {}) as { start?: unknown; end?: unknown };        const s = parseDate(start);        const e = parseDate(end);        return s !== null && e !== null && e >= s ? { start: s, end: e } : null;      })      .filter((r): r is SprintRange => r !== null)      .sort((a, b) => a.start - b.start)      .filter((r, i, all) => i === 0 || r.start > all[i - 1].end);    return ranges.length > 0 ? ranges : null;  } catch {    return null;  }}function parseCommits(raw: string | null): Record<string, number> {  if (!raw) return {};  try {    const map: unknown = JSON.parse(raw);    return map && typeof map === "object" && !Array.isArray(map) ? (map as Record<string, number>) : {};  } catch {    return {};  }}const subscribeNever = () => () => {};// Read through useSyncExternalStore rather than seeding useState from// localStorage in an effect: the server snapshot is what both the server and// the first client paint render, so there's nothing for hydration to disagree// about, and no cascading setState-in-effect render. Raw strings, not parsed// values, so the snapshot compares equal between reads.function readKey(key: string): string | null {  try {    return localStorage.getItem(key);  } catch {    return null;  }}function getSprintsSnapshot() {  return readKey(SPRINTS_KEY);}function getCommitsSnapshot() {  return readKey(COMMITS_KEY);}function getNullSnapshot() {  return null;}function getThemeSnapshot(): ThemeId {  const stored = readKey(THEME_KEY) as ThemeId | null;  return stored && stored in THEMES ? stored : "emerald";}function getThemeServerSnapshot(): ThemeId {  return "emerald";}// The viewer's local calendar date, not the UTC one: a commit at 9pm in// California belongs to that evening, not to tomorrow.function getTodaySnapshot(): string {  const d = new Date();  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;}function getTodayServerSnapshot(): string {  return SERVER_TODAY;}function writeKey(key: string, value: string | null) {  try {    if (value === null) localStorage.removeItem(key);    else localStorage.setItem(key, value);  } catch {    // no-op  }}function GitCommitIcon() {  return <PhGitCommit size={13} weight="bold" aria-hidden />;}function SpinnerIcon() {  return <PhCircleNotch size={13} weight="bold" aria-hidden />;}function FlameIcon() {  return <PhFlame size={11} weight="fill" aria-hidden />;}function ResetIcon() {  return <PhReset size={11} aria-hidden />;}function BackIcon() {  return <PhArrowLeft size={12} weight="bold" aria-hidden />;}function OlderIcon() {  return <PhCaretLeft size={12} weight="bold" aria-hidden />;}function NewerIcon() {  return <PhCaretRight size={12} weight="bold" aria-hidden />;}function PlusIcon() {  return <PhPlus size={12} weight="bold" aria-hidden />;}function PencilIcon() {  return <PhPencil size={11} weight="bold" aria-hidden />;}const FOCUS =  "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-600 dark:focus-visible:outline-emerald-400";const INPUT =  "h-8 w-full min-w-0 rounded-md border border-stone-300 bg-stone-100 px-3 text-sm tabular-nums text-stone-900 outline-none focus:border-emerald-600 focus:ring-2 focus:ring-emerald-600/25 dark:border-stone-700 dark:bg-stone-950 dark:text-stone-100 dark:[color-scheme:dark] dark:focus:border-emerald-400 dark:focus:ring-emerald-400/25";const EYEBROW = "text-[11px] font-medium uppercase tracking-[0.08em] text-stone-500 dark:text-stone-500";interface DraftError {  field: "start" | "end";  message: string;}interface Bounds {  min: number | null;  max: number;}interface SprintDatesFormProps {  title: string;  start: string;  end: string;  startBounds: Bounds;  endBounds: Bounds;  today: number;  error: DraftError | null;  hint: ReactNode;  submitLabel: string;  onStartChange: (value: string) => void;  onEndChange: (value: string) => void;  onSubmit: () => void;  onCancel: () => void;}// One form for both jobs, creating a sprint and changing an existing sprint's// dates. A new sprint defaults to starting today because most sprints are// created the day they start; the fields are there for the ones that are not.function SprintDatesForm({  title,  start,  end,  startBounds,  endBounds,  today,  error,  hint,  submitLabel,  onStartChange,  onEndChange,  onSubmit,  onCancel,}: SprintDatesFormProps) {  const shouldReduceMotion = useReducedMotion();  const startRef = useRef<HTMLInputElement | null>(null);  const id = useId();  const hintId = `${id}-hint`;  const todayIso = isoFromDay(today);  const canPickToday = start !== todayIso && today <= startBounds.max && (startBounds.min === null || today >= startBounds.min);  useEffect(() => {    startRef.current?.focus({ preventScroll: true });  }, []);  const submit = (event: FormEvent) => {    event.preventDefault();    if (!error) onSubmit();  };  return (    <motion.form      onSubmit={submit}      aria-label={title}      initial={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: -4 }}      animate={{ opacity: 1, y: 0 }}      transition={{ duration: 0.18, ease: [0.16, 1, 0.3, 1] }}      className="mt-3 rounded-xl border border-stone-200 p-3 dark:border-stone-800"    >      <p className="text-sm font-medium text-stone-900 dark:text-stone-100">{title}</p>      <div className="mt-2 grid grid-cols-2 gap-2">        <div>          <div className="flex h-4 items-center justify-between gap-2">            <label htmlFor={`${id}-start`} className={EYEBROW}>              Starts            </label>            {canPickToday && (              <button                type="button"                onClick={() => onStartChange(todayIso)}                className={`rounded text-[11px] font-medium text-emerald-700 hover:underline dark:text-emerald-400 ${FOCUS}`}              >                Today              </button>            )}          </div>          <input            ref={startRef}            id={`${id}-start`}            type="date"            required            value={start}            min={startBounds.min === null ? undefined : isoFromDay(startBounds.min)}            max={isoFromDay(startBounds.max)}            onChange={(event) => onStartChange(event.target.value)}            aria-invalid={error?.field === "start" ? true : undefined}            aria-describedby={hintId}            className={`mt-1 ${INPUT}`}          />        </div>        <div>          <div className="flex h-4 items-center">            <label htmlFor={`${id}-end`} className={EYEBROW}>              Ends            </label>          </div>          <input            id={`${id}-end`}            type="date"            required            value={end}            min={endBounds.min === null ? undefined : isoFromDay(endBounds.min)}            max={isoFromDay(endBounds.max)}            onChange={(event) => onEndChange(event.target.value)}            aria-invalid={error?.field === "end" ? true : undefined}            aria-describedby={hintId}            className={`mt-1 ${INPUT}`}          />        </div>      </div>      <p id={hintId} className={`mt-2 text-xs ${error ? "text-red-600 dark:text-red-400" : "text-stone-600 dark:text-stone-400"}`}>        {error?.message ?? hint}      </p>      <div className="mt-3 flex justify-end gap-2">        <button          type="button"          onClick={onCancel}          className={`h-8 rounded-md border border-stone-300 px-3 text-xs font-medium text-stone-700 transition-colors duration-150 hover:bg-stone-100 active:scale-[0.98] dark:border-stone-700 dark:text-stone-200 dark:hover:bg-stone-800 ${FOCUS}`}        >          Cancel        </button>        <button          type="submit"          disabled={error !== null}          className={`h-8 rounded-md bg-emerald-700 px-3 text-xs font-medium text-white transition-colors duration-150 hover:bg-emerald-800 active:scale-[0.98] active:bg-emerald-900 disabled:pointer-events-none disabled:opacity-50 ${FOCUS}`}        >          {submitLabel}        </button>      </div>    </motion.form>  );}type Draft = { mode: "create" } | { mode: "edit"; index: number };export function CommitGraph() {  const shouldReduceMotion = useReducedMotion();  const todayIso = useSyncExternalStore(subscribeNever, getTodaySnapshot, getTodayServerSnapshot);  const persistedSprints = useSyncExternalStore(subscribeNever, getSprintsSnapshot, getNullSnapshot);  const persistedCommits = useSyncExternalStore(subscribeNever, getCommitsSnapshot, getNullSnapshot);  const persistedTheme = useSyncExternalStore(subscribeNever, getThemeSnapshot, getThemeServerSnapshot);  // undefined means "no change this session, use what storage holds"; null  // means "cleared", which is different from never having been set.  const [sprintsOverride, setSprintsOverride] = useState<string | null | undefined>(undefined);  const [commitsOverride, setCommitsOverride] = useState<string | null | undefined>(undefined);  const [themeOverride, setThemeOverride] = useState<ThemeId | null>(null);  const [committing, setCommitting] = useState(false);  const [justCommitted, setJustCommitted] = useState(false);  const [selected, setSelected] = useState<number | null>(null);  const [selectedDay, setSelectedDay] = useState<number | null>(null);  // Counted back from the newest page rather than forward from the oldest, so  // adding a sprint keeps you on the newest page instead of one behind it.  const [pagesBack, setPagesBack] = useState(0);  const [pageDir, setPageDir] = useState(0);  const [draft, setDraft] = useState<Draft | null>(null);  const [draftStart, setDraftStart] = useState("");  const [draftEnd, setDraftEnd] = useState("");  // A new sprint's end follows its start at the planned length until the end  // is picked by hand; after that the two move independently.  const [endTouched, setEndTouched] = useState(false);  const [announcement, setAnnouncement] = useState("");  const sprintRefs = useRef<(HTMLButtonElement | null)[]>([]);  const backRef = useRef<HTMLButtonElement | null>(null);  const draftTriggerRef = useRef<HTMLButtonElement | null>(null);  const returnFocusTo = useRef<number | null>(null);  const focusAfterCreate = useRef<number | null>(null);  const wasSelected = useRef<number | null>(null);  const today = dayNumber(todayIso);  const sprintsRaw = sprintsOverride === undefined ? persistedSprints : sprintsOverride;  const commitsRaw = commitsOverride === undefined ? persistedCommits : commitsOverride;  const theme = themeOverride ?? persistedTheme;  const customRanges = useMemo(() => parseRanges(sprintsRaw), [sprintsRaw]);  const ranges = useMemo(() => customRanges ?? seededRanges(today), [customRanges, today]);  const extra = useMemo(() => parseCommits(commitsRaw), [commitsRaw]);  const sprints = useMemo(() => buildSprints(ranges, today, extra), [ranges, today, extra]);  const sprintColumns = useMemo(() => sprints.map((sprint) => calendarColumns(sprint.days)), [sprints]);  const currentIndex = sprints.findIndex((sprint) => sprint.status === "current");  const current = currentIndex === -1 ? null : sprints[currentIndex];  const lastIndex = sprints.length - 1;  const maxStart = Math.max(0, sprints.length - VISIBLE_SPRINTS);  const windowStart = Math.min(Math.max(maxStart - pagesBack, 0), maxStart);  const windowEnd = Math.min(windowStart + VISIBLE_SPRINTS, sprints.length);  const visibleSprints = sprints.slice(windowStart, windowEnd);  // The window's own total, not the year's: the headline should count what is  // actually on screen.  const windowTotal = visibleSprints.reduce((sum, sprint) => sum + sprint.total, 0);  const atOldest = windowStart === 0;  const atNewest = windowStart >= maxStart;  const streak = useMemo(() => {    let count = 0;    for (let day = today; day >= ranges[0].start; day--) {      if (seededCount(day) + (extra[isoFromDay(day)] ?? 0) > 0) count++;      else break;    }    return count;  }, [today, ranges, extra]);  const detail = selected === null ? null : (sprints[selected] ?? null);  const isCurrentSprint = selected !== null && selected === currentIndex;  const delta =    selected === null || selected === 0 || detail?.status === "planned" ? null : sprints[selected].total - sprints[selected - 1].total;  const sprintLog = useMemo(    () => (detail === null ? [] : detail.days.map((d) => ({ ...d, commits: commitsFor(d.day, d.count) }))),    [detail],  );  const visibleDays = selectedDay === null ? sprintLog.filter((d) => d.count > 0) : sprintLog.filter((d) => d.day === selectedDay);  // Focus follows the view, in both directions: into the sprint it lands on the  // way back out, and on return it lands on the sprint you came from rather  // than at the top of the card.  useEffect(() => {    const was = wasSelected.current;    wasSelected.current = selected;    if (selected !== null && was === null) {      backRef.current?.focus({ preventScroll: true });    } else if (selected !== null && document.activeElement === document.body) {      // Stepping onto the first or last sprint disables the chevron that was      // pressed, and a disabled button drops focus to the page.      backRef.current?.focus({ preventScroll: true });    } else if (selected === null && was !== null && returnFocusTo.current !== null) {      sprintRefs.current[returnFocusTo.current]?.focus({ preventScroll: true });      returnFocusTo.current = null;    }  }, [selected]);  // A new sprint's block only exists after the render that adds it.  useEffect(() => {    if (focusAfterCreate.current === null) return;    sprintRefs.current[focusAfterCreate.current]?.focus({ preventScroll: true });    focusAfterCreate.current = null;  }, [sprints]);  const moveWindowTo = (start: number) => setPagesBack(maxStart - Math.min(Math.max(start, 0), maxStart));  // Stepping to a sprint also drags the overview window along, so coming back  // out lands on the sprint you were reading rather than where you started.  const openSprint = (si: number) => {    const target = Math.min(Math.max(si, 0), lastIndex);    returnFocusTo.current = target;    setSelected(target);    setSelectedDay(null);    setDraft(null);    moveWindowTo(Math.min(Math.max(windowStart, target - VISIBLE_SPRINTS + 1), target));  };  const page = (direction: -1 | 1) => {    setPageDir(direction);    moveWindowTo(windowStart + direction * VISIBLE_SPRINTS);  };  const closeDetail = () => {    setSelected(null);    setSelectedDay(null);    setDraft(null);  };  const activeTheme = THEMES[theme];  const ramp = (level: 0 | 1 | 2 | 3 | 4, isDark: boolean) => (level === 0 ? null : (isDark ? activeTheme.dark : activeTheme.light)[level - 1]);  const changeTheme = (id: ThemeId) => {    setThemeOverride(id);    writeKey(THEME_KEY, id);  };  const saveRanges = (next: SprintRange[]) => {    const raw = JSON.stringify(next.map((r) => ({ start: isoFromDay(r.start), end: isoFromDay(r.end) })));    writeKey(SPRINTS_KEY, raw);    setSprintsOverride(raw);  };  const handleCommit = () => {    if (committing) return;    setCommitting(true);    // A real deploy of this component would POST to /api/commits and read the    // updated count back; this demo simulates that round trip's latency and    // persists the result the same place a server response would end up    // caching to, so the count survives a reload without a real backend.    // Keyed by date, so tomorrow's commits land on tomorrow.    const latency = 420 + Math.round(Math.random() * 260);    window.setTimeout(() => {      const raw = JSON.stringify({ ...extra, [todayIso]: (extra[todayIso] ?? 0) + 1 });      writeKey(COMMITS_KEY, raw);      setCommitsOverride(raw);      setCommitting(false);      setJustCommitted(true);      window.setTimeout(() => setJustCommitted(false), 500);    }, latency);  };  const handleReset = () => {    writeKey(COMMITS_KEY, null);    writeKey(SPRINTS_KEY, null);    setCommitsOverride(null);    setSprintsOverride(null);    closeDetail();    setPagesBack(0);    setAnnouncement("Sprints and commits reset to the sample history.");  };  const draftStartDay = ISO_DATE.test(draftStart) ? dayNumber(draftStart) : null;  const draftEndDay = ISO_DATE.test(draftEnd) ? dayNumber(draftEnd) : null;  const newest = ranges[lastIndex];  // Where each field may land. A new sprint has to start after the newest one  // starts (otherwise it would swallow it whole) and at most four weeks out.  // An existing sprint keeps clear of its neighbours: nothing else moves when  // its dates change, so it can never take days that belong to another sprint.  const draftLimits = (() => {    if (draft === null) return null;    const anchor = draftStartDay ?? (draft.mode === "create" ? today : ranges[draft.index].start);    const endMax = (next: SprintRange | undefined) => (next ? Math.min(next.start - 1, anchor + MAX_SPRINT_DAYS - 1) : anchor + MAX_SPRINT_DAYS - 1);    if (draft.mode === "create") {      return {        start: { min: newest.start + 1, max: today + MAX_LEAD_DAYS },        end: { min: draftStartDay, max: endMax(undefined) },      };    }    const i = draft.index;    const prev = ranges[i - 1];    const next = ranges[i + 1];    return {      start: { min: prev ? prev.end + 1 : null, max: next ? next.start - 1 : today + MAX_LEAD_DAYS },      end: { min: draftStartDay, max: endMax(next) },    };  })();  // Creating a sprint closes the newest one the day before it starts. If the  // new one starts later than that, the newest keeps its own end (or today, if  // it had already run past it) and the days between belong to no sprint.  const newestEndAfterCreate = (start: number) => {    const runsTo = effectiveEnd(newest, true, today);    return start <= runsTo + 1 ? start - 1 : runsTo;  };  const draftError = ((): DraftError | null => {    if (draft === null || draftLimits === null) return null;    if (draftStartDay === null) return { field: "start", message: "Pick a date for the sprint to start." };    if (draftEndDay === null) return { field: "end", message: "Pick a date for the sprint to end." };    const { start, end } = draftLimits;    const i = draft.mode === "create" ? lastIndex + 1 : draft.index;    if (start.min !== null && draftStartDay < start.min) {      return draft.mode === "create"        ? { field: "start", message: `Has to be after Sprint ${i} starts on ${longDate(start.min - 1)}.` }        : { field: "start", message: `Sprint ${i} ends ${longDate(start.min - 1)}, so this one can start ${shortDate(start.min)} at the earliest.` };    }    if (draftStartDay > start.max) {      return draft.mode === "edit" && draft.index < lastIndex        ? { field: "start", message: `Sprint ${i + 2} starts ${longDate(start.max + 1)}, so this one has to start before it.` }        : { field: "start", message: `Sprints can be scheduled up to four weeks ahead, ${longDate(start.max)} at the latest.` };    }    if (draftEndDay < draftStartDay) return { field: "end", message: "The end date is before the start date." };    const next = draft.mode === "edit" ? ranges[draft.index + 1] : undefined;    if (next && draftEndDay >= next.start) {      return { field: "end", message: `Sprint ${i + 2} starts ${longDate(next.start)}, so this one has to end by ${shortDate(next.start - 1)}.` };    }    if (draftEndDay > end.max) {      return { field: "end", message: `Sprints run eight weeks at most, so ${longDate(end.max)} at the latest.` };    }    return null;  })();  const plural = (n: number, word: string) => `${n} ${word}${n === 1 ? "" : "s"}`;  // The consequence line. Dates decide more than this sprint's own length: a  // new sprint closes the one before it, and any sprint can leave days that  // belong to no sprint. The form says so before anything is saved.  const draftHint = (() => {    if (draft === null || draftStartDay === null || draftEndDay === null || draftEndDay < draftStartDay) return null;    const parts = [`${plural(draftEndDay - draftStartDay + 1, "day")}, starting ${relativeDay(draftStartDay, today)}.`];    if (draft.mode === "create") {      const closesOn = newestEndAfterCreate(draftStartDay);      if (closesOn !== newest.end) {        const length = closesOn - newest.start + 1;        parts.push(          closesOn < today            ? `Sprint ${lastIndex + 1} closes ${shortDate(closesOn)} after ${plural(length, "day")}.`            : `Sprint ${lastIndex + 1} now ends ${shortDate(closesOn)}, ${plural(length, "day")} in all.`,        );      }      const gap = draftStartDay - closesOn - 1;      if (gap > 0) parts.push(`The ${plural(gap, "day")} between them belong to no sprint.`);    } else {      const i = draft.index;      const prev = ranges[i - 1];      const next = ranges[i + 1];      const gapBefore = prev ? draftStartDay - prev.end - 1 : 0;      const gapAfter = next ? next.start - draftEndDay - 1 : 0;      if (gapBefore > 0) parts.push(`Leaves ${plural(gapBefore, "day")} after Sprint ${i} in no sprint.`);      if (gapAfter > 0) parts.push(`Leaves ${plural(gapAfter, "day")} before Sprint ${i + 2} in no sprint.`);      if (!next && draftStartDay <= today && draftEndDay < today) {        parts.push("It keeps collecting commits past that until the next sprint starts.");      }    }    return parts.join(" ");  })();  const openDraft = (next: Draft, trigger: HTMLButtonElement) => {    draftTriggerRef.current = trigger;    setDraft(next);    if (next.mode === "create") {      setDraftStart(todayIso);      setDraftEnd(isoFromDay(today + PLANNED_DAYS - 1));      setEndTouched(false);    } else {      setDraftStart(isoFromDay(ranges[next.index].start));      setDraftEnd(isoFromDay(ranges[next.index].end));      setEndTouched(true);    }  };  const changeDraftStart = (value: string) => {    setDraftStart(value);    if (!endTouched && ISO_DATE.test(value)) setDraftEnd(isoFromDay(dayNumber(value) + PLANNED_DAYS - 1));  };  const changeDraftEnd = (value: string) => {    setDraftEnd(value);    setEndTouched(true);  };  const cancelDraft = () => {    setDraft(null);    draftTriggerRef.current?.focus({ preventScroll: true });  };  const submitDraft = () => {    if (draft === null || draftStartDay === null || draftEndDay === null || draftError) return;    const range = { start: draftStartDay, end: draftEndDay };    const span = `${longDate(range.start)} to ${longDate(range.end)}`;    if (draft.mode === "create") {      const index = ranges.length;      saveRanges([...ranges.slice(0, -1), { start: newest.start, end: newestEndAfterCreate(range.start) }, range]);      setDraft(null);      setPagesBack(0);      focusAfterCreate.current = index;      setAnnouncement(`Sprint ${index + 1} created, ${span}.`);    } else {      saveRanges(ranges.map((r, i) => (i === draft.index ? range : r)));      setDraft(null);      setSelectedDay(null);      draftTriggerRef.current?.focus({ preventScroll: true });      setAnnouncement(`Sprint ${draft.index + 1} now runs ${span}.`);    }  };  // Commit lands on today, so it is only offered where today is on screen: the  // overview page holding the current sprint, or that sprint's own view.  const currentOnScreen = currentIndex >= windowStart && currentIndex < windowEnd;  const showCommitAction = selected === null ? currentOnScreen : isCurrentSprint;  const showReset = Object.keys(extra).length > 0 || customRanges !== null;  const enter = shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: 6 };  const cellFill = (level: 0 | 1 | 2 | 3 | 4, upcoming: boolean, className: string) =>    upcoming ? (      <span className={`absolute inset-0 border border-dashed border-stone-300 dark:border-stone-700 ${className}`} />    ) : (      <>        <span className={`absolute inset-0 block dark:hidden ${className}`} style={{ backgroundColor: ramp(level, false) ?? "rgb(226 232 240)" }} />        <span className={`absolute inset-0 hidden dark:block ${className}`} style={{ backgroundColor: ramp(level, true) ?? "rgb(255 255 255 / 0.08)" }} />      </>    );  return (    <div      onKeyDown={(event) => {        if (event.key !== "Escape") return;        if (draft !== null) cancelDraft();        else if (selected !== null) closeDetail();      }}      className="w-full max-w-md rounded-2xl border border-stone-200 bg-white p-4 dark:border-stone-800 dark:bg-stone-900"    >      <p className="sr-only" role="status" aria-live="polite">        {announcement}      </p>      <div className="flex flex-wrap items-start justify-between gap-3">        {detail === null || selected === null ? (          <div>            <div className="flex items-center gap-1.5">              <p className="text-sm font-semibold text-stone-800 dark:text-stone-100">Commit activity</p>              {streak > 0 && (                <motion.span                  initial={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.8 }}                  animate={{ opacity: 1, scale: 1 }}                  className="inline-flex items-center gap-0.5 rounded-full bg-orange-500/10 px-1.5 py-0.5 text-[11px] font-semibold text-orange-600 dark:text-orange-400"                >                  <FlameIcon />                  {streak}                </motion.span>              )}            </div>            <p className="text-xs text-stone-500 dark:text-stone-500">              {windowTotal} commits in sprints {windowStart + 1} to {windowEnd}            </p>            <p className="text-[11px] text-stone-500 dark:text-stone-500">              {current                ? `Sprint ${currentIndex + 1} began ${longDate(current.start)}, ${                    current.overBy > 0                      ? `${plural(current.overBy, "day")} past its end date`                      : `day ${today - current.start + 1} of ${current.end - current.start + 1}`                  }`                : sprints[lastIndex].status === "planned"                  ? `Between sprints. Sprint ${lastIndex + 1} starts ${longDate(sprints[lastIndex].start)}`                  : "Between sprints"}            </p>          </div>        ) : (          <div>            <div className="flex items-center gap-1.5">              <button                ref={backRef}                type="button"                onClick={closeDetail}                className={`inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[11px] font-medium text-stone-500 transition-colors hover:bg-black/5 hover:text-stone-700 dark:text-stone-400 dark:hover:bg-white/10 dark:hover:text-stone-200 ${FOCUS}`}              >                <BackIcon />                All sprints              </button>            </div>            <div className="mt-1 flex items-center gap-1.5">              <button                type="button"                onClick={() => openSprint(selected - 1)}                disabled={selected === 0}                aria-label={`Sprint ${selected}, the sprint before this one`}                title={selected === 0 ? "No older sprint" : `Sprint ${selected}`}                className={`inline-flex h-5 w-5 items-center justify-center rounded-full text-stone-500 transition-colors hover:bg-black/5 hover:text-stone-600 disabled:pointer-events-none disabled:opacity-50 dark:hover:bg-white/10 dark:hover:text-stone-300 ${FOCUS}`}              >                <OlderIcon />              </button>              <p className="text-sm font-semibold text-stone-800 dark:text-stone-100">Sprint {selected + 1}</p>              <button                type="button"                onClick={() => openSprint(selected + 1)}                disabled={selected === lastIndex}                aria-label={`Sprint ${selected + 2}, the sprint after this one`}                title={selected === lastIndex ? "No newer sprint" : `Sprint ${selected + 2}`}                className={`inline-flex h-5 w-5 items-center justify-center rounded-full text-stone-500 transition-colors hover:bg-black/5 hover:text-stone-600 disabled:pointer-events-none disabled:opacity-50 dark:hover:bg-white/10 dark:hover:text-stone-300 ${FOCUS}`}              >                <NewerIcon />              </button>              {detail.status !== "done" && (                <span className="rounded-full bg-stone-900/[0.06] px-1.5 py-0.5 text-[11px] font-medium uppercase tracking-[0.08em] text-stone-500 dark:bg-white/10 dark:text-stone-500">                  {detail.status === "current" ? "In progress" : "Planned"}                </span>              )}            </div>            <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1">              <p className="text-xs text-stone-600 dark:text-stone-400">                {longDate(detail.start)} to {longDate(detail.end)}, {plural(detail.end - detail.start + 1, "day")}                {detail.overBy > 0 && `, ${detail.overBy} past its end date`}              </p>              <button                type="button"                onClick={(event) => (draft?.mode === "edit" ? cancelDraft() : openDraft({ mode: "edit", index: selected }, event.currentTarget))}                aria-expanded={draft?.mode === "edit"}                className={`inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[11px] font-medium text-emerald-700 transition-colors hover:bg-emerald-500/10 dark:text-emerald-400 ${FOCUS}`}              >                <PencilIcon />                Edit dates              </button>            </div>            {selected > 0 && ranges[selected].start - ranges[selected - 1].end > 1 && (              <p className="text-[11px] text-stone-500 dark:text-stone-500">                Starts {plural(ranges[selected].start - ranges[selected - 1].end - 1, "day")} after Sprint {selected} ended              </p>            )}            <p className="text-xs text-stone-500 dark:text-stone-500">              {detail.status === "planned" ? (                `Starts ${relativeDay(detail.start, today)}`              ) : (                <>                  {detail.total} commits, {detail.activeDays} of {detail.elapsedDays} days active, busiest {detail.best}                  {delta !== null && (                    <span className={delta > 0 ? "text-green-600 dark:text-green-400" : undefined}>                      {", "}                      {delta > 0 ? "+" : ""}                      {delta} vs S{selected}                    </span>                  )}                </>              )}            </p>          </div>        )}        <div className="flex items-center gap-1">          {showReset && selected === null && (            <button              type="button"              onClick={handleReset}              aria-label="Reset sprints and commits to the sample history"              title="Reset sprints and commits"              className={`inline-flex h-7 w-7 items-center justify-center rounded-full text-stone-500 transition-colors hover:bg-black/5 hover:text-stone-600 dark:hover:bg-white/10 dark:hover:text-stone-300 ${FOCUS}`}            >              <ResetIcon />            </button>          )}          {selected === null && (            <button              type="button"              onClick={(event) => (draft ? cancelDraft() : openDraft({ mode: "create" }, event.currentTarget))}              aria-expanded={draft?.mode === "create"}              className={`inline-flex items-center gap-1.5 rounded-full border border-stone-300 px-3 py-1.5 text-xs font-medium text-stone-700 transition-colors duration-150 hover:bg-stone-100 active:scale-[0.98] dark:border-stone-700 dark:text-stone-200 dark:hover:bg-stone-800 ${FOCUS}`}            >              <PlusIcon />              New sprint            </button>          )}          {showCommitAction && (            <button              type="button"              onClick={handleCommit}              disabled={committing}              className={`inline-flex items-center gap-1.5 rounded-full bg-emerald-700 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-emerald-800 disabled:pointer-events-none disabled:opacity-50 ${FOCUS}`}            >              {committing ? (                <motion.span animate={{ rotate: 360 }} transition={{ duration: 0.7, repeat: Infinity, ease: "linear" }}>                  <SpinnerIcon />                </motion.span>              ) : (                <GitCommitIcon />              )}              {committing ? "Committing…" : "Commit"}            </button>          )}        </div>      </div>      {draft !== null && draftLimits !== null && (        <SprintDatesForm          key={draft.mode === "create" ? "create" : `edit-${draft.index}`}          title={draft.mode === "create" ? `New sprint: Sprint ${ranges.length + 1}` : `Sprint ${draft.index + 1} dates`}          start={draftStart}          end={draftEnd}          startBounds={draftLimits.start}          endBounds={draftLimits.end}          today={today}          error={draftError}          hint={draftHint}          submitLabel={draft.mode === "create" ? "Create sprint" : "Save dates"}          onStartChange={changeDraftStart}          onEndChange={changeDraftEnd}          onSubmit={submitDraft}          onCancel={cancelDraft}        />      )}      {detail === null || selected === null ? (        <motion.div key="overview" initial={enter} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.22, ease: [0.16, 1, 0.3, 1] }}>          <div className="mt-4 flex items-center gap-1">            <button              type="button"              onClick={() => page(-1)}              disabled={atOldest}              aria-label="Show older sprints"              title="Older sprints"              className={`inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-stone-500 transition-colors hover:bg-black/5 hover:text-stone-600 disabled:pointer-events-none disabled:opacity-50 dark:hover:bg-white/10 dark:hover:text-stone-300 ${FOCUS}`}            >              <OlderIcon />            </button>            <motion.div              key={windowStart}              initial={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, x: pageDir * 14 }}              animate={{ opacity: 1, x: 0 }}              transition={{ duration: 0.24, ease: [0.16, 1, 0.3, 1] }}              className="flex-1 overflow-x-auto pb-1"              data-lenis-prevent            >              <div className="mx-auto flex w-max items-start gap-1">                {/* Weekday rows, GitHub's Mon / Wed / Fri, offset by the                    sprint buttons' padding so they line up with the cells. */}                <div className="flex flex-col gap-[3px] p-1 pr-0" aria-hidden>                  {WEEKDAYS.map((name, di) => (                    <span key={name} className="h-[11px] text-[11px] leading-[11px] text-stone-500 dark:text-stone-500">                      {di % 2 === 1 && di < 6 ? name.slice(0, 3) : ""}                    </span>                  ))}                </div>                <div className="flex gap-1" role="group" aria-label={`Sprints ${windowStart + 1} to ${windowEnd}`}>                  {visibleSprints.map((sprint, wi) => {                    const si = windowStart + wi;                    const isCurrent = si === currentIndex;                    const isPlanned = sprint.status === "planned";                    return (                      <button                        key={si}                        type="button"                        ref={(node) => {                          sprintRefs.current[si] = node;                        }}                        onClick={() => openSprint(si)}                        aria-label={`Sprint ${si + 1}${isCurrent ? " (current)" : isPlanned ? " (planned)" : ""}, ${longDate(sprint.start)} to ${longDate(sprint.end)}, ${sprint.total} commits. Open its heat map.`}                        title={`Sprint ${si + 1}: ${longDate(sprint.start)} to ${longDate(sprint.end)}`}                        className={`flex min-w-10 flex-col items-center rounded-lg p-1 transition-colors hover:bg-stone-900/[0.03] dark:hover:bg-white/[0.04] ${FOCUS}`}                      >                        <div className="flex gap-[3px]">                          {sprintColumns[si].map((column, ci) => (                            <div key={ci} className="flex flex-col gap-[3px]">                              {column.map((cell, di) => {                                if (cell === null) return <span key={di} aria-hidden className="h-[11px] w-[11px]" />;                                const isToday = cell.day === today;                                return (                                  <motion.div                                    key={di}                                    aria-hidden                                    title={`${isToday ? "Today, " : ""}${longDate(cell.day)}: ${cell.upcoming ? "upcoming" : `${cell.count} commit${cell.count === 1 ? "" : "s"}`}`}                                    initial={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.4 }}                                    animate={isToday && justCommitted ? { opacity: 1, scale: [1, 1.5, 1] } : { opacity: 1, scale: 1 }}                                    transition={                                      isToday && justCommitted                                        ? { duration: 0.45, ease: [0.16, 1, 0.3, 1] }                                        : { duration: 0.25, delay: Math.min(wi * 4 + ci, 24) * 0.012, ease: [0.16, 1, 0.3, 1] }                                    }                                    className={`relative h-[11px] w-[11px] overflow-hidden rounded-[2.5px] ${isToday ? "ring-1 ring-emerald-500/70 ring-offset-1 ring-offset-white dark:ring-offset-stone-950" : ""}`}                                  >                                    {cellFill(levelFor(cell.count), cell.upcoming, "rounded-[2.5px]")}                                  </motion.div>                                );                              })}                            </div>                          ))}                        </div>                        <span className="mt-2 flex flex-col items-center leading-tight">                          <span                            className={`text-[11px] uppercase tracking-[0.08em] ${                              isCurrent ? "text-stone-500 dark:text-stone-400" : "text-stone-400 dark:text-stone-600"                            }`}                          >                            S{si + 1}                          </span>                          <span                            className={`text-[11px] tabular-nums ${                              isCurrent ? "font-semibold text-stone-700 dark:text-stone-200" : "text-stone-500 dark:text-stone-500"                            }`}                          >                            {isPlanned ? "next" : sprint.total}                          </span>                          <span className="whitespace-nowrap text-[11px] tabular-nums text-stone-400 dark:text-stone-600">                            {shortDate(sprint.start)}                          </span>                        </span>                      </button>                    );                  })}                </div>              </div>            </motion.div>            <button              type="button"              onClick={() => page(1)}              disabled={atNewest}              aria-label="Show newer sprints"              title="Newer sprints"              className={`inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-stone-500 transition-colors hover:bg-black/5 hover:text-stone-600 disabled:pointer-events-none disabled:opacity-50 dark:hover:bg-white/10 dark:hover:text-stone-300 ${FOCUS}`}            >              <NewerIcon />            </button>          </div>        </motion.div>      ) : (        <motion.div          key={`sprint-${selected}-${detail.start}`}          initial={enter}          animate={{ opacity: 1, y: 0 }}          transition={{ duration: 0.22, ease: [0.16, 1, 0.3, 1] }}        >          <div className="mt-4">            {/* Headers start on the sprint's own first weekday, so a sprint                that began on a Wednesday reads Wed to Tue. */}            <div className="flex gap-2 pl-6" aria-hidden>              {Array.from({ length: DAYS }, (_, i) => WEEKDAYS[(weekdayOf(detail.start) + i) % DAYS]).map((day) => (                <span key={day} className="flex-1 text-center text-[11px] text-stone-500 dark:text-stone-500">                  {day.slice(0, 3)}                </span>              ))}            </div>            {sprintRows(detail.days).map((row, ri) => (              <div key={ri} className="mt-2 flex items-center gap-2">                <span className="w-4 shrink-0 text-[11px] uppercase tracking-[0.08em] text-stone-500 dark:text-stone-500" aria-hidden>                  W{ri + 1}                </span>                {row.map((cell, di) => {                  if (cell === null) return <span key={di} aria-hidden className="h-11 flex-1" />;                  const idx = ri * DAYS + di;                  const level = levelFor(cell.count);                  const isDaySelected = selectedDay === cell.day;                  const isToday = cell.day === today;                  const dayLabel = `${longDate(cell.day)}, ${cell.upcoming ? "upcoming" : `${cell.count} commit${cell.count === 1 ? "" : "s"}`}`;                  return (                    <motion.button                      key={di}                      type="button"                      disabled={cell.upcoming}                      onClick={() => setSelectedDay(isDaySelected ? null : cell.day)}                      aria-pressed={cell.upcoming ? undefined : isDaySelected}                      aria-label={`${isToday ? "Today. " : ""}${dayLabel}.${cell.upcoming ? "" : " Show this day's commits."}`}                      title={longDate(cell.day)}                      initial={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.9 }}                      animate={{ opacity: 1, scale: 1 }}                      transition={{ duration: 0.24, delay: Math.min(idx, 20) * 0.012, ease: [0.16, 1, 0.3, 1] }}                      className={`relative flex h-11 flex-1 items-center justify-center overflow-hidden rounded-lg text-xs font-semibold tabular-nums transition-transform hover:scale-[1.04] disabled:hover:scale-100 ${FOCUS} ${                        isDaySelected                          ? "ring-2 ring-stone-900/40 ring-offset-2 ring-offset-white dark:ring-white/50 dark:ring-offset-stone-950"                          : isToday                            ? "ring-1 ring-emerald-500/70 ring-offset-1 ring-offset-white dark:ring-offset-stone-950"                            : ""                      }`}                    >                      {cellFill(level, cell.upcoming, "rounded-lg")}                      {/* The ramp runs dark-on-light one way and light-on-dark the                          other, so the number needs its own pair, not one colour. */}                      <span className={`relative block dark:hidden ${level >= 3 ? "text-white" : "text-stone-700"}`}>                        {cell.count > 0 ? cell.count : ""}                      </span>                      <span className={`relative hidden dark:block ${level >= 3 ? "text-stone-900" : "text-stone-100"}`}>                        {cell.count > 0 ? cell.count : ""}                      </span>                    </motion.button>                  );                })}              </div>            ))}          </div>          <div className="mt-4 border-t border-stone-200/70 pt-2 dark:border-white/10">            <div className="flex items-center justify-between gap-2">              <p className="text-[11px] uppercase tracking-[0.08em] text-stone-500 dark:text-stone-500">                {selectedDay === null                  ? "Commits, day by day"                  : `${longDate(selectedDay)}, ${visibleDays[0]?.count ?? 0} commit${visibleDays[0]?.count === 1 ? "" : "s"}`}              </p>              {selectedDay !== null && (                <button                  type="button"                  onClick={() => setSelectedDay(null)}                  className={`rounded-full px-1.5 py-0.5 text-[11px] text-stone-500 transition-colors hover:bg-black/5 hover:text-stone-700 dark:text-stone-400 dark:hover:bg-white/10 dark:hover:text-stone-200 ${FOCUS}`}                >                  All days                </button>              )}            </div>            <div className="mt-1 max-h-44 overflow-y-auto pr-1" data-lenis-prevent>              {visibleDays.every((d) => d.count === 0) ? (                <p className="py-3 text-center text-[11px] text-stone-500 dark:text-stone-500">                  {detail.status === "planned"                    ? `Nothing yet. Commits land here from ${longDate(detail.start)}.`                    : selectedDay === null                      ? "No commits in this sprint yet."                      : "No commits on this day."}                </p>              ) : (                <ul className="space-y-2">                  {visibleDays.map((d) => (                    <li key={d.day}>                      {selectedDay === null && (                        <div className="flex items-baseline justify-between gap-2">                          <p className="text-[11px] font-medium uppercase tracking-[0.08em] text-stone-500 dark:text-stone-500">{longDate(d.day)}</p>                          <p className="text-[11px] tabular-nums text-stone-400 dark:text-stone-600">                            {d.count} commit{d.count === 1 ? "" : "s"}                          </p>                        </div>                      )}                      <ul className="mt-1 space-y-1">                        {d.commits.map((commit, ci) => (                          <li key={`${commit.sha}-${ci}`} className="flex items-baseline gap-2 text-[11px]">                            <span className="tabular-nums text-stone-400 dark:text-stone-600">{commit.time}</span>                            <span className="font-mono text-[11px] text-stone-500 dark:text-stone-500">{commit.sha}</span>                            <span className="min-w-0 flex-1 truncate text-stone-600 dark:text-stone-300" title={commit.subject}>                              {commit.subject}                            </span>                          </li>                        ))}                      </ul>                    </li>                  ))}                </ul>              )}            </div>          </div>        </motion.div>      )}      <div className="mt-3 flex items-center justify-between">        <div className="flex items-center gap-1.5" role="radiogroup" aria-label="Color theme">          {THEME_IDS.map((id) => (            <button              key={id}              type="button"              role="radio"              aria-checked={theme === id}              aria-label={THEMES[id].label}              title={THEMES[id].label}              onClick={() => changeTheme(id)}              className={`h-4 w-4 shrink-0 rounded-full transition-[color,background-color,border-color,transform,opacity] duration-150 ${FOCUS} ${                theme === id ? "ring-2 ring-offset-2 ring-offset-white dark:ring-offset-stone-950" : "opacity-60 hover:opacity-100"              }`}              style={{ backgroundColor: THEMES[id].swatch, ...(theme === id ? ({ "--tw-ring-color": THEMES[id].swatch } as CSSProperties) : {}) }}            />          ))}        </div>        <div className="flex items-center gap-1 text-[11px] text-stone-500 dark:text-stone-500">          Less          {([0, 1, 2, 3, 4] as const).map((level) => (            <span              key={level}              aria-hidden              className="h-[9px] w-[9px] rounded-[2px] dark:hidden"              style={{ backgroundColor: ramp(level, false) ?? "rgb(226 232 240)" }}            />          ))}          {([0, 1, 2, 3, 4] as const).map((level) => (            <span              key={level}              aria-hidden              className="hidden h-[9px] w-[9px] rounded-[2px] dark:block"              style={{ backgroundColor: ramp(level, true) ?? "rgb(255 255 255 / 0.08)" }}            />          ))}          More        </div>      </div>    </div>  );}