Task pills

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useLayoutEffect,  useRef,  useState,  type CSSProperties,  type FocusEvent,  type Ref,} from 'react';import { DemoPointer, runDemo } from './demo-pointer';import {  BoxGlyph,  CalendarGlyph,  CheckGlyph,  ClockFace,  DashedBoxGlyph,  DoneGlyph,  FilledBoxGlyph,  FlameCoreGlyph,  FlameGlyph,

/* Task pills (task-pills.tsx): a white stage with the list in its middle, or at night a   near-black one. Every measure in the list is a number of units, --u (a pill is 34 of them   tall), which follows the stage's width.   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). Each pill has a soft background and an ink; the white marks cut into   its drawings (the clock's hands, the done check, the flame's heart) take the pill's background   at night, so they still read as cut out.   Memory and layout. The stage is one layout boundary, its height set by its width, so nothing   that changes inside it lays out the page around it. What moves is small boxes around static   drawings, by transforms and opacity: the compositor plays the idle motion on layers a few px   wide, and it pauses while the list is off screen (data-live). */.stage {  /* The stage and its edge. */  --surface: #fff;  --line: rgb(0 0 0 / 0.06);  /* A title; the habit's and a done one's; the checkboxes' outlines, plain and dashed. */  --ink: #0d0d0d;  --ink-muted: #ababab;  --box: #d1d1d1;  --box-dashed: #d9d9d9;

/* * The list's drawings, as static SVGs. Nothing inside them ever changes: whatever moves (a clock * hand, the flame, a check being drawn) is an HTML box around a drawing, moved by transforms or * revealed by a clip. Their colours are the stage's tokens (task-pills.module.css): most take * the colour of the box they sit in. *//** The event's calendar: a rounded square with a solid header and four dots. */export function CalendarGlyph({ className }: { className?: string }) {  return (    <svg className={className} viewBox="0 0 21 21" aria-hidden="true">      <rect        x="0.85"        y="0.85"        width="19.3"        height="19.3"        rx="5.4"        fill="none"        stroke="currentColor"        strokeWidth="1.7"      />      <path d="M.94 5.25A5.4 5.4 0 0 1 6.25.85h8.5a5.4 5.4 0 0 1 5.31 4.4z" fill="currentColor" />      <circle cx="9" cy="9.1" r="1.55" fill="currentColor" />      <circle cx="13.3" cy="9.1" r="1.55" fill="currentColor" />

'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 onto a control and press it, calling the component's own handler as a hand * 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. * * Nothing the pointer does while the demo plays needs a layout, because one here in the same * frame as one in the list would make the browser lay out the whole page (see the note at the * top of the stylesheet). So it moves by animations the compositor plays, and the press scales a * box that keeps a transform at rest, since a box that gains or loses one is laid out again. */export type Point = { x: number; y: number };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?: Point) => Promise<void>;  /** Presses and lets go; `action` runs as the pointer goes down. */

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