Bulk delete

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useEffectEvent,  useId,  useLayoutEffect,  useMemo,  useRef,  useState,  type KeyboardEvent as ReactKeyboardEvent,  type PointerEvent as ReactPointerEvent,  type ReactNode,} from 'react';import styles from './bulk-delete.module.css';import { FILES, type FileItem } from './data';import { DemoPointer, runDemo, type Point } from './demo-pointer';import { useAutoplay } from './use-autoplay';export type { FileItem, FileKind } from './data';/*

/* Bulk delete (bulk-delete.tsx): a white card of recent files on a warm light-grey stage, or a   dark card on a near-black one. The card is 360 px wide: a 42 px header, then 56 px rows on a   6 px inset. Selected rows share one grey block (rows next to each other join their corners);   deleted ones become a dark bar with the deck's edges showing under it.   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). */.root {  /* The stage and the card. */  --stage: #eeefed;  --card: #fdfdfd;  --card-edge: rgb(0 0 0 / 0.045);  --card-shadow: rgb(0 0 0 / 0.05);  /* Text. */  --ink: #111111;  --ink-2: #767676;  /* Rows: under the pointer, and selected. */  --hover: #f6f6f6;  --selected: #efefef;  /* The box, empty and ticked. */  --box: #ffffff;  --box-edge: #cccccc;

// Copyright (c) 2026 Bruno Delorence. MIT License./** The kinds of file the list draws a badge for: the badge reads the kind, in its own tint. */export type FileKind = 'pdf' | 'fig' | 'png' | 'xls' | 'doc' | 'zip';export type FileItem = {  /** Unique within the list. */  id: string;  /** The file's name, with its extension. */  name: string;  kind: FileKind;  /** The quiet line under the name: size, who edited it, when. */  meta: string;};/** The demo's recent files. */export const FILES: readonly FileItem[] = [  { id: 'brand', name: 'Brand guidelines.pdf', kind: 'pdf', meta: '2.4 MB · Edited by Mia' },  { id: 'landing', name: 'Landing page v3.fig', kind: 'fig', meta: 'Edited by Leo · 2h ago' },  { id: 'moodboard', name: 'Moodboard.png', kind: 'png', meta: '5.1 MB · Edited by you' },  { id: 'budget', name: 'Q4 budget.xlsx', kind: 'xls', meta: '86 KB · Yesterday' },];/** Two more, for longer lists in the docs. */

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