Status avatar

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useEffectEvent,  useId,  useLayoutEffect,  useRef,  useState,  type CSSProperties,  type KeyboardEvent as ReactKeyboardEvent,  type MouseEvent as ReactMouseEvent,  type PointerEvent as ReactPointerEvent,} from 'react';import { AvatarArt } from './avatar-art';import { DemoPointer, runDemo, type Point } from './demo-pointer';import { useAutoplay } from './use-autoplay';import styles from './status-avatar.module.css';/* * Status avatar: a round avatar with its status dot at the top right. Hovering the dot (or * clicking it, or pressing Enter on it) grows the dot into a tray of three options, Online, Focus

/* Status avatar (status-avatar.tsx): a round avatar on a quiet grey stage, its status dot at the   top right. Opened, the dot grows into a tray of three round options, the avatar grows with it,   and a label names the option under the pointer or the focus.   Sizes. Every length is a number of design units times --k, the px of one unit: the avatar is   241 units across, the open tray 368 × 128. --k comes from the size prop (--k-max), or without it   from the stage's width (an avatar a fifth of it, 120 to 193 px), and shrinks on a narrow stage, so the open tray always fits beside the avatar (a container query unit).   Motion. The tray, the options and the avatar move on springs written as linear() easings:   a softer one that opens (a 6% overshoot on the avatar and the label, 4.6% on the tray, settled   in about half a second) and a firmer one that closes (2%). The blur the options go through, and the glint on the dot after a choice, are   played from the script with the Web Animations API.   Colours are the tokens below, light-dark(light, dark) where the two differ: the component takes   the color-scheme it inherits from the page, or the one its colorScheme prop sets. */.root {  /* The stage. */  --stage: #f6f6f6;  --line: rgb(0 0 0 / 0.05);  /* The tray and the dot's ring, their edge and lift. */  --tray: #f8f8f9;  --tray-edge: rgb(0 0 0 / 0.11);  --tray-shine: #fff;

// Copyright (c) 2026 Bruno Delorence. MIT License.import { useId } from 'react';/* * The avatar's picture: an illustrated, made-up character in a leafy valley, drawn once in SVG * on a 240-unit square that the avatar's circle crops. A pale sky, two ranges of hills, a tree * leaning in from the left, and bushes with small flowers in front of a smiling, bearded * character in a dark tee. * * The foliage is many small leaves, laid out once at load from a seeded random sequence, so the * drawing is the same on the server and in the browser, on every render. *//** A small seeded random sequence (mulberry32), so the leaves land in the same places each time. */function sequence(seed: number) {  let state = seed >>> 0;  return () => {    state = (state + 0x6d2b79f5) >>> 0;    let t = state;    t = Math.imul(t ^ (t >>> 15), t | 1);    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;  };

// 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 (nothing here uses * them yet). 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(