Skeuo tasks

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useEffectEvent,  useId,  useLayoutEffect,  useRef,  useState,  type CSSProperties,  type ReactNode,} from 'react';import { INCOMING, LISTS, TASKS, type ListId, type Task } from './data';import { DemoPointer, runDemo, type Demo } from './demo-pointer';import {  ArrowDownIcon,  BellIcon,  BookIcon,  CalendarIcon,  CheckCircleIcon,  ChevronDown,  ChevronRight,

/* Skeuo tasks (skeuo-tasks.tsx): an app window on a misty grey screen, the sidebar on the left   with the two trays (trays.tsx), the list on the right. On a narrow stage the sidebar keeps only   its trays, above the list.   Memory. A phone keeps the page's pixels in tiles the width of the screen, and a tile painted   again takes more buffers. So every part that changes while the demo plays paints on a small   layer of its own (will-change): the trays, the slips, the list's title, each row's title and   box, the round + and the select bar, the new task's lines, the menus; and each of these layers   keeps one size, as a layer that grows or shrinks is drawn again in new buffers. A layer painted   again holds two buffers, and one painted at every frame (a colour fading) many more, so:   - Safari paints a layer again whenever its opacity or transform changes, and all the layers in     it; not when its translate, scale or rotate change. What moves (rows, slips, sheets, the     card) moves by those.   - A plain colour clipped to rounded corners holds no pixels, and its colour fades without     painting: the rows' backgrounds and the new task's card are drawn so, and their shadows by the     compositor (filter: drop-shadow, as a box-shadow of half the blur), but for the rows' shadow,     too small for Safari to draw so.   - New elements are new layers: rows keep their elements as they leave, and another list's rows     take them over.   Above all, the whole page must never be laid out, as that paints all its tiles again. The stage   is one layout boundary, its height set from its width; its two panes are placed absolutely,   not by a grid, so that a change in one never lays the other out (and paints it again); and no   query container is left around it once the script has measured it (see the end).

'use client';import {  useEffect,  useEffectEvent,  useLayoutEffect,  useRef,  useState,  type CSSProperties,  type RefObject,} from 'react';import { StarFilled, TrayIcon } from './icons';import type { Task } from './data';import styles from './skeuo-tasks.module.css';/* * The two trays at the top of the sidebar, drawn in HTML and CSS: a glossy blue tray of paper * slips for the Inbox, and a white tray with a stack of sheets for Today. * * - Each paper is a box placed by its depth in the pile, --k (0 at the front), through a *   transform. A new one drops in from above (an animation played as it first shows), and those *   already there move back and rise a little, by a transition on that transform. The whole pile *   also rises as it grows (--rise). * - A paper that leaves stays a moment as a ghost, to play its way out: lifted out of the tray

'use client';import { useEffect, useRef, type KeyboardEvent, type ReactNode } from 'react';import styles from './skeuo-tasks.module.css';/* * A pop-up menu: the list's options, the filter, the actions on the selected tasks. It is always * in the page, hidden until open, so opening it adds nothing to the page. It follows the menu * pattern: arrow keys, Home and End move between the items, Enter or Space picks one, Escape * closes and hands focus back to its button. */export type Item = {  id: string;  label: string;  icon?: ReactNode;  /** A destructive action, in red. */  danger?: boolean;  /** For a choice among several: whether it is the one picked. */  checked?: boolean;};export function Menu({  id,

/* * The lists and the tasks the app starts with. A task belongs to one list; moving it changes its * list. The sidebar shows the lists in three groups: the two trays, the collections, and the * spaces. */export type ListId =  'inbox' | 'today' | 'upcoming' | 'someday' | 'log' | 'goals' | 'projects' | 'studio' | 'personal';export type Task = {  id: string;  title: string;  list: ListId;  /** Added in this session: the "Added today" filter keeps these. */  fresh?: boolean;};export type List = {  id: ListId;  name: string;  /** The line under the list's name. */  about: string;};

/* * The app's icons, on a 20-unit grid. Outlines take the current colour; the coloured list icons * carry their own. All of them are still drawings, in the page from the start. */import type { ReactNode, SVGProps } from 'react';type IconProps = SVGProps<SVGSVGElement>;function Icon({ children, ...props }: IconProps & { children: ReactNode }) {  return (    <svg      viewBox="0 0 20 20"      fill="none"      stroke="currentColor"      strokeWidth="1.6"      strokeLinecap="round"      strokeLinejoin="round"      aria-hidden="true"      focusable="false"      {...props}    >      {children}    </svg>

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