Alert volume

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useCallback,  useEffect,  useEffectEvent,  useId,  useMemo,  useRef,  useState,  type CSSProperties,  type KeyboardEvent,  type PointerEvent as ReactPointerEvent,} from 'react';import {  ANALYST_SECONDS,  MEDIAN_TRIAGE,  MEDIAN_TRIAGE_ALL,  RANGES,  SOURCES,  buckets,  longDate,

/* Alert volume (alert-volume.tsx): a near-black card on a dim stage, or by day a white one on a   pale grey stage. The card is 600 px at most and lays itself out from its own width (a   container query): filters and figures go two by two on a phone.   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).   Memory. The bars grow by transforms on their own groups, the demo pointer moves by transforms,   and the note over the chart is the only thing that blurs what is behind it. */.root {  /* The stage around the card, its frame, and the card. */  --stage: #ececec;  --stage-2: #f6f6f6;  --frame: #e2e2e2;  --card: #fff;  /* Lines between the card's bands, and the boxes in it (icon, switch, menus). */  --line: #ececec;  --box: #f6f6f6;  --box-line: #e6e6e6;  --box-on: #fff;  --box-on-line: #e0e0e0;  /* Words: the strongest, the softer, the muted. */

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The alerts behind the card: 26 weeks of invented days, Monday 13 April to Sunday 11 October, * each with its alerts by source and how many of them were escalated to a person. The last 30 * days follow a fixed outline (quiet weekends, a spike of phishing on 2 October); the weeks * before them come from a seeded generator, so every load draws the same chart. */export const SOURCES = ['Identity', 'Endpoint', 'Cloud', 'Email', 'Network', 'SaaS'] as const;export type Source = (typeof SOURCES)[number];export type Day = {  /** Midnight UTC of the day, in ms. */  time: number;  /** Alerts per source, in the order of SOURCES; escalated ones included. */  alerts: number[];  /** Of those, how many went to a person, per source. */  escalated: number[];};const DAY = 86_400_000;/** The last day drawn: Sunday 11 October 2026. */const LAST = Date.UTC(2026, 9, 11);

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useEffect, useId, useRef, type KeyboardEvent } from 'react';import styles from './alert-volume.module.css';/* * One of the card's filters: a small label over its value, which opens a listbox under it. The * card owns whether it is open and which option is lit, so its demo can open a menu and move * through it like a reader would; the menu itself only reports what the reader does. */export type Option = {  value: string;  label: string;  /** Muted words at the end of the row (a date range's dates). */  hint?: string;  /** A colour swatch before the label (a source's colour). */  swatch?: string;};export function FilterMenu({  name,

'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 eye of the * badge, which plays its own animation on the same clock). 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`. */  wait: (ms: number) => 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;