Filter table

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useEffect, useEffectEvent, useId, useRef, useState, type CSSProperties } from 'react';import { COLUMNS, ROWS, STATUSES, type TaskRow, type TaskStatus } from './data';import { DemoPointer, runDemo, type Demo, type Point } from './demo-pointer';import { useAutoplay } from './use-autoplay';import styles from './filter-table.module.css';export type { TaskRow, TaskStatus } from './data';/* * Filter table: a row of status chips over a small table of tasks. Pick a chip and the table keeps * only the tasks in that status; "All" brings every one back. * * - Every row stays in the table, in its place. A row that leaves folds away: its wrapper animates *   grid-template-rows from 1fr to 0fr and fades out, while the rows that come in unfold and fade *   in, all at once, in 300 ms on a fast ease-out. Nothing is measured, the rows never reorder, and *   the table's height follows on its own, the card staying centred as it grows or shrinks. * - A folded row is inert and hidden from screen readers; a live line says how many tasks show. * - The chips are toggle buttons (aria-pressed); the one pressed lifts onto a white (or, at night, *   raised) pill, its count on a small grey tile. Each status brings its own colour: the chip's dot, *   and the pill in the table, its ink and tints mixed from that colour in the CSS.

/* Filter table (filter-table.tsx): a soft grey card, and in its middle a column 420 px wide at   most: the status chips, and under them the table on a raised surface.   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). Shadows that differ between the schemes are written once with every   layer, the layers a scheme does not use being transparent.   Motion. A row folds and unfolds by animating its wrapper's grid-template-rows between 0fr and   1fr, with a fade, so no height is ever measured; the chips change by transitions of their   colours and shadow. Under reduced motion all of it is instant. */.root {  /* The card, and the ink in three strengths. */  --canvas: light-dark(oklch(96.1% 0.002 247.84), oklch(23.1% 0.004 264.487));  --ink: light-dark(oklch(24.7% 0.006 258.361), oklch(96.4% 0.002 247.839));  --ink-2: light-dark(oklch(50.6% 0.01 264.477), oklch(73.1% 0.008 260.731));  --ink-3: light-dark(oklch(69.5% 0.009 264.505), oklch(54.1% 0.01 264.484));  /* Hairlines: the card's edge; the table's rules, a little lighter. */  --line: light-dark(oklch(94.6% 0.003 264.542), oklch(30.8% 0.006 258.354));  --grid-line: color-mix(in srgb, var(--line) 78%, transparent);  /* The table and the pressed chip; the pressed chip's count; hovers. */  --surface: light-dark(oklch(100% 0 0), oklch(26% 0.006 271.191));  --field: light-dark(oklch(96.1% 0.001 286.375), oklch(29.3% 0.006 271.223));

/** A status a task can be in: its id, its name on the chip and the pill, and its colour. */export type TaskStatus = {  id: string;  label: string;  /** Any CSS colour: the chip's dot, and the pill's ink and tints are mixed from it. */  color: string;};/** One row of the table. */export type TaskRow = {  id: string;  task: string;  date: string;  /** The id of one of the statuses. */  status: string;  advisor: string;};export const STATUSES: TaskStatus[] = [  { id: 'todo', label: 'To do', color: '#f09a2f' },  { id: 'progress', label: 'In Progress', color: '#16a6c7' },  { id: 'done', label: 'Completed', color: '#25a878' },];

'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, 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. * * The pointer is an HTML box around a still drawing: it glides by an animation the compositor * plays, and the press scales a box that keeps a transform at rest, so nothing it does needs a * layout. */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. */  press: (action: () => void) => Promise<void>;

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