Coverage heatmap

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useCallback,  useEffect,  useEffectEvent,  useId,  useLayoutEffect,  useMemo,  useRef,  useState,  type CSSProperties,  type KeyboardEvent as ReactKeyboardEvent,  type PointerEvent as ReactPointerEvent,} from 'react';import { StepChart } from './chart';import {  DAY_NAMES,  HEADLINE,  SERVICES,  SOLO,  WORK,

/* Coverage heatmap (coverage-heatmap.tsx): a near-black analytics panel by night, white by day.   Use is drawn in four greys, a locked account in red hatching, the hours no account was free in   a dark red (a bright one in work hours), run-outs as red dots and resets as white ticks.   Colours are the tokens below, light-dark(light, dark) where the two differ: the component takes   the color-scheme it inherits from the page (light unless the page says otherwise), or the one   its colorScheme prop sets (data-color-scheme).   Sizes are those of the panel at 1200 px: a 720 px column of weeks (135 px of labels, the   heatmap, 155 px of summaries), a 380 px detail column, 46 px week rows, 10 px lanes. From 940 to   1200 px the component scales the panel as a whole (zoom, set by the script); under 940 px the   detail goes under the weeks and the weeks scroll sideways, their labels pinned.   Memory. The cells are plain boxes with a background; the tooltip, the dots and the ticks sit   over them by position. A selection or a tab switch only restyles and repaints. */.root {  --card: #fff;  --edge: #e2e2e2;  --line: #ececec;  --rule: #ececec;  --row-hover: #fafafa;  --row-on: #f5f5f5;  --ink: #141414;

// Copyright (c) 2026 Bruno Delorence. MIT License.import { useId } from 'react';import { DAY_NAMES, WINDOW, WORK, span, when, type Knot, type Service, type Week } from './data';import styles from './coverage-heatmap.module.css';/* * The detail's step chart: both accounts' use from Wednesday to Sunday noon. The main account's * line is white over a soft fill, the back-up's a thin grey one; where the main account sits at * 100 % waiting for its reset the line turns red, a red dot marks each run-out with its time above, * and the stretch with no account free is hatched red with its length written in it. Work hours * are lighter bands. For the week in progress the lines after the present moment are dashed and * the dots hollow: a forecast. * * It is drawn in a 380 × 224 box of its own units (the panel's px at full size) and scales with * its column; the figures it shows are all in the text around it, so it is aria-hidden. */const W = 380;const H = 224;const X0 = 41;const X1 = 372.8;const Y100 = 35.3;const Y0 = 197.6;

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The panel's data: services with two accounts (a main one and a back-up), five weeks each, and * services with a single account. Every time is in hours from Monday 00:00 of its week (0–168). * * A week's heatmap is three lanes of 28 cells (Mon to Sun, 6 h each), written as strings of codes: * the two accounts' use, then how many accounts were free. *   use:   1 2 3 4  under 25, 50, 75, 100 %      o  the cell where it ran out *          x        locked (ran out, waiting for its reset) *          .        no reading                    -  not yet (later this week) *   free:  a all    n one    z none    w none, during work hours * * Run-outs, resets, the present moment and the forecast are times, drawn where they fall inside * their cell. The usage curves of the detail chart are knots [hour, percent] of each account from * Wednesday 00:00 to Sunday 12:00 (the chart's window); `curve()` writes them for the weeks that * are not drawn by hand. */export type Knot = [hour: number, percent: number];export type Account = {  /** Its name in the panel, e.g. "Max". */  name: string;

// Copyright (c) 2026 Bruno Delorence. MIT License.import type { GlyphName } from './data';/* * The services' marks: small original glyphs, drawn on a 20-unit square. They are decorative (the * service's name is always beside them), so each is aria-hidden. Their size comes from the class * the panel gives them. */export function Glyph({ name, className }: { name: GlyphName; className?: string }) {  return (    <svg viewBox="0 0 20 20" className={className} aria-hidden="true" data-glyph={name}>      {name === 'spark' && (        // An eight-ray asterisk with alternating long and short rays.        <g stroke="var(--spark)" strokeWidth="1.7" strokeLinecap="round">          <path d="M10 1.6v16.8M1.6 10h16.8M4.1 4.1l11.8 11.8M15.9 4.1 4.1 15.9" />          <path d="M6.6 2.6 7.6 5.6M13.4 17.4l-1-3M2.6 13.4l3-1M17.4 6.6l-3 1M13.4 2.6l-1 3M6.6 17.4l1-3M2.6 6.6l3 1M17.4 13.4l-3-1" />        </g>      )}      {name === 'rings' && (        // Two loops woven through each other.        <g fill="none" stroke="var(--glyph)" strokeWidth="1.6">          <ellipse cx="7.6" cy="10" rx="5.4" ry="6.6" />

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import type { CSSProperties, Ref } from 'react';/* * The demo's pointer, and the steps that move it. A demo is a script of awaited steps: wait, or * glide the pointer somewhere. Stopping the demo (the reader takes over, or it scrolls away) ends * the step in progress at once: its promise rejects, which ends the script right there, and the * pointer fades out. * * Each glide is a curved flight played by the Web Animations API, so nothing runs frame by frame. * The points of the flight are handed to whoever wants to move along with it. The arrow and the hand are HTML boxes * that swap by their visibility: a change of style inside an SVG would lay the SVG out again. */export type Point = { x: number; y: number };/** A glide's path and timing, for an animation that plays along with it. */export type Flight = { points: Point[]; timing: KeyframeAnimationOptions };export type Demo = {  /** Resolves after `ms`. */

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useCallback, useEffect, useRef, useState } from 'react';/* * When a demo may play on its own: while part of it is on screen and the tab is visible, never * under reduced motion, and not while the reader is using it. `take()` hands it to the reader; it * takes back over `idle` ms after their last input. */export function useAutoplay<T extends HTMLElement>(idle = 6000) {  const ref = useRef<T>(null);  const [visible, setVisible] = useState(false);  const [reduced, setReduced] = useState(true);  const [taken, setTaken] = useState(false);  const timer = useRef(0);  useEffect(() => {    const element = ref.current;    if (!element) return;    let onScreen = false;    const update = () => setVisible(onScreen && !document.hidden);    const observer = new IntersectionObserver(