Risk scale

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useEffectEvent,  useId,  useLayoutEffect,  useMemo,  useRef,  useState,  type KeyboardEvent as ReactKeyboardEvent,} from 'react';import { ASSETS, CoinGlyph, type RiskAsset } from './assets';import { DemoPointer, runDemo } from './demo-pointer';import { useAutoplay } from './use-autoplay';import styles from './risk-scale.module.css';/* * Risk scale: the health factor of every open loan on one track. The track is cut in four bands * (liquidation, at risk, watch, safe); each loan is a dot on it, its coin on a stem above and its * value and venue below. One loan is selected, by default the weakest under the target: a halo * marks it and a dark tooltip says how much to repay to lift it to the target.

/* Risk scale (risk-scale.tsx): a soft grey card with a title, a legend and the plot. The plot is a   stack of layers on one coordinate system, in px from its top: the tooltip (1.5–28.5), the coins   (middle at 48) on their stems, the track (middle at 77) with its dots, and the labels from 88.5,   one row every 38 px.   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). By day the coins are deep and the tooltip dark;   at night the coins turn pastel and the tooltip light.   Memory. Everything that moves (the tooltip, the hover card, the dots, the demo pointer) moves   by transform or opacity; the labels are measured once per layout, never per frame. */.root {  --surface: #fafafa;  --line: rgb(0 0 0 / 0.05);  --ink: #161618;  --ink-2: #161618;  --muted: #939396;  --legend-ink: #5c5c61;  /* The bands of the track, and the dots on them. */  --band-liquidation: #eb8c8a;  --band-risk: #fbcecb;  --band-watch: #fcdfbd;

// Copyright (c) 2026 Bruno Delorence. MIT License.import type { ReactNode } from 'react';/* * The coins a position can be in: invented names, each with a small drawn glyph. The glyph's two * colours are tokens of the stylesheet (risk-scale.module.css), a deep coin by day and a pastel * one at night, so the drawings are never restyled from here. */export type RiskAsset = 'dln' | 'tsl' | 'vlr' | 'orn';export const ASSETS: Record<RiskAsset, { symbol: string; name: string }> = {  dln: { symbol: 'DLN', name: 'Dollen' },  tsl: { symbol: 'TSL', name: 'Tessel' },  vlr: { symbol: 'VLR', name: 'Velar' },  orn: { symbol: 'ORN', name: 'Orrin' },};/** Each glyph in a 20 by 20 box: the coin's shape in --coin, its mark in --coin-ink. */const GLYPHS: Record<RiskAsset, ReactNode> = {  // A round dollar coin: a disc, a fine inner ring and an S with its bar.  dln: (    <>

// 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 (anything that * 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 = {

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