Glow bars

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useId,  useRef,  useState,  type CSSProperties,  type FocusEvent,  type KeyboardEvent,  type PointerEvent,} from 'react';import { DemoPointer, runDemo, type Point } from './demo-pointer';import { MONTHS, type CashMonth } from './months';import { useAutoplay } from './use-autoplay';import styles from './glow-bars.module.css';/* * Glow bars: a cash-flow card whose bars light up under the pointer. * * - Each month is a pair of rounded bars, incomes and outcomes, muted at rest. The month under the *   pointer (or picked with the arrow keys) glows: incomes in violet and pink, outcomes in blue

/* Glow bars (glow-bars.tsx): a white card on a light square grid, or at night a dark one. The card   is laid out at fixed places, in px, for a width of 640; narrower, the plot's columns share what   is left.   Colours are the tokens below, light-dark(light, dark): 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). The stage's grid is the same in both. The lit bars' gradients, rims   and light are pairs in their own rules, further down.   Memory. The stage is the one layout boundary, of a fixed height. What moves while the pointer   sweeps stays on small layers of a fixed size: the lit column (its glow repaints inside it as   the bars stretch), the tooltip and the reels of its digits. Nothing that moves changes size. */.stage {  /* The stage, and the card on it. */  --surface: #edecef;  --surface-2: #fff;  /* The title; the subtitle; the axis' labels; the months; the legend. */  --ink: #17181c;  --ink-muted: #686b73;  --ink-faint: #74767d;  --month-ink: #71737a;  --legend-ink: #6b6d74;  /* The gridlines and the axis. */

'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, glide * the pointer to a point, or sweep it slowly along a line while the chart follows it. 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. * * The pointer moves by animations the compositor plays (a sweep too: the chart reads that * animation's clock every frame, as a share of the way, and never the page's geometry), and it is * an HTML box around a drawing that never changes, so moving it never makes the browser lay * anything out. */export type Point = { x: number; y: number };export type Demo = {  /** Resolves after `ms`. */  wait: (ms: number) => Promise<void>;  /** Glides the pointer to a point of the screen, in client px. */  moveTo: (point: Point) => Promise<void>;  /**

'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(      ([entry]) => {        onScreen = entry.isIntersecting;