Contracts table

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useEffectEvent,  useId,  useLayoutEffect,  useMemo,  useRef,  useState,  type CSSProperties,  type KeyboardEvent as ReactKeyboardEvent,} from 'react';import {  CONTRACTS,  SPAN,  STEPS,  TICKS,  TODAY,  dayLabel,  type Approval,  type Contract,

/* Contracts table (contracts-table.tsx): a card on a quiet stage, near-black at night and white   by day. The card is 582px wide at most; under that it takes the stage's width and the table   scrolls sideways inside its frame, so the page never does.   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).   Motion is transforms and opacity: the action bar slides, rows glide when re-sorted (the Web   Animations API) and fade in on a new tab, the notice window slides along its track. The tab   pill also eases its width. Under reduced motion, all of it simply changes. */.root {  /* The stage, the card on it, the table's frame and its header. */  --stage: #f1f1f2;  --card: #fff;  --card-edge: rgb(0 0 0 / 0.08);  --frame: #fbfbfb;  --head: #fff;  --line: #ececee;  --row-hover: #f5f5f7;  --row-selected: #f1f0ff;  /* Words: strong, muted, faint. */  --ink: #141416;

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The contracts the table shows: invented companies, plausible terms. Dates are days counted from * the timeline's first day (October 1), so the drawing needs no calendar maths; `dayLabel` turns * them back into "Oct 31". Nine contracts are up for renewal and four are in review, written out * by hand; the 115 signed ones are made from two word lists by a fixed recipe, so every render * draws the same table. *//** Where one sign-off stands. */export type Approval = 'done' | 'active' | 'rejected' | 'waiting';export type Status = 'renewing' | 'review' | 'signed';export type Contract = {  id: string;  name: string;  /** The kind of paper: MSA, DPA, Order form… */  type: string;  /** Yearly value, in thousands of dollars. */  value: number;  status: Status;  /** The last day to give notice, in days from October 1. */

// 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(