Status picker

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useLayoutEffect,  useRef,  useState,  type CSSProperties,  type FocusEvent,  type KeyboardEvent,  type PointerEvent,} from 'react';import { GhostPointer, runDemo } from './ghost-pointer';import { STATUSES, type Status } from './statuses';import { useAutoplay } from './use-autoplay';import styles from './status-picker.module.css';/* * Status picker: a row of quick statuses over the button that shows yours. * * - Hover or focus a status and its label shows in a tooltip above it. The row has one tooltip: *   moving to the next status slides it over, its width eases to the new label and the two

/* Status picker (status-picker.tsx). Sizes are in em: the stage sets the font-size from its own   width (a container query), so the picker grows with the room it has. --spring, the easing of   the springy transitions, comes from the component, which uses it for its own animations too.   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). The statuses' emoji are the same on both. */.root {  /* The stage, and what is raised on it: the row, the tooltip and the status button. */  --surface: #efeff3;  --surface-2: #fff;  /* The words and the ring round the status that is set; the paging button's dots, the empty     status and the clear button's cross. */  --ink: #1c1c1e;  --ink-muted: #8e8e93;  /* The round buttons, then under the pointer; the status button under the pointer. */  --wash: #f1f1f5;  --wash-strong: #e6e6ec;  --hover: #fafafc;  /* The stage's edge, and the hairline round what is raised. */  --line: rgb(0 0 0 / 0.05);  --edge: rgb(0 0 0 / 0.06);  /* What is raised sits on its hairline, a shade right under it and a soft drop. */

/* * The statuses to pick from. The picker shows them five at a time; its sixth button pages * through the rest. */export type Status = {  id: string;  /** Its icon: on its button, then in the status once it is set. */  emoji: string;  /** The status itself: the tooltip over its button, then the status's text once it is set. */  label: string;};export const STATUSES: readonly Status[] = [  { id: 'vacation', emoji: '🌴', label: 'On vacation' },  { id: 'sick', emoji: '🤒', label: 'Out sick' },  { id: 'meeting', emoji: '📅', label: 'In a meeting' },  { id: 'focus', emoji: '🎧', label: 'Focusing' },  { id: 'commuting', emoji: '🚌', label: 'Commuting' },  { id: 'lunch', emoji: '🥪', label: 'Out for lunch' },  { id: 'remote', emoji: '🏡', label: 'Working from home' },  { id: 'walk', emoji: '🚶', label: 'Out for a walk' },  { id: 'travel', emoji: '✈️', label: 'Travelling' },  { id: 'away', emoji: '🌙', label: 'Off for the day' },

'use client';import type { CSSProperties, Ref } from 'react';/* * The demo's ghost pointer, and the timeline that moves it. A demo is a script of awaited steps: * wait, glide the pointer onto a control, press it and call the component's own handler, as a * click would. 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. */export type Demo = {  /** Resolves after `ms`. */  wait: (ms: number) => Promise<void>;  /** Glides the pointer onto `target`: its middle, or a point given as shares of its size. */  moveTo: (target: Element | null | undefined, at?: { x: number; y: number }) => Promise<void>;  /** Presses and lets go; `action` runs as the pointer goes down. */  press: (action: () => void) => Promise<void>;};/** What a stopped demo's pending step rejects with. */class Stopped extends Error {}

'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;