Care schedule

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useCallback,  useEffect,  useEffectEvent,  useId,  useLayoutEffect,  useMemo,  useRef,  useState,  type CSSProperties,  type KeyboardEvent as ReactKeyboardEvent,  type PointerEvent as ReactPointerEvent,} from 'react';import { Avatar } from './avatar';import {  AREAS,  CAREGIVERS,  DAY_END,  DAY_START,  FIRST_ROWS,

/* Care schedule (care-schedule.tsx): a warm paper frame with a white panel, one near-black for   what is happening now, greys for what is done, red for missed and amber for at risk; by night   a warm charcoal frame with the same roles.   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).   Wide (the root 880 px and up): the frame is the 1440 × 1025 design scaled to the root's width   by a transform (tan(atan2()) turns a length over a length into a number), so it is laid out   once and looks the same at every size. Narrow: a container query reflows it: the sidebar   becomes a drawer, the controls wrap and the timeline scrolls sideways inside its card.   The timeline is shares of the day: each block, link and line is placed by --s (where it   starts) and --w (how long it lasts), so the same rules serve every width. The now line moves   by a transform. */@font-face {  font-family: CareInter;  font-weight: 300 700;  font-style: normal;  font-display: swap;  src:    local('Inter Variable'),

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The invented agency behind the schedule: its caregivers, today's 48 visits and the clients they * go to, and how any other day of the week is made from today (each caregiver's day slides by up * to half an hour and loses a visit now and then, so the schedule changes but stays plausible). * Times are minutes after midnight; the day runs from 7 AM to 7 PM. */export type AreaId = 'millbrook' | 'harbor' | 'elm' | 'fallow';export const AREAS: { id: AreaId; label: string }[] = [  { id: 'millbrook', label: 'Millbrook' },  { id: 'harbor', label: 'Harbor Point' },  { id: 'elm', label: 'Elm Ridge' },  { id: 'fallow', label: 'West Fallow' },];/** How an illustrated avatar is drawn: skin, hair colour and cut, and the backdrop. */export type Look = {  skin: string;  hair: string;  cut: 'short' | 'bun' | 'long' | 'curly' | 'crop' | 'bald' | 'wavy';  backdrop: string;  shirt: string;

// Copyright (c) 2026 Bruno Delorence. MIT License.import type { Look } from './data';/* * An illustrated portrait, never a photo: a backdrop, shoulders, a face and a haircut, from the * person's `look`. Drawn on a 40-unit grid; the stylesheet sets its size and its round or * rounded-square crop. Decorative: the name always stands next to it. */const HAIR: Record<Look['cut'], { back?: string; front: string }> = {  short: {    front:      'M11.5 17.5c-.6-6.4 3.5-9.8 8.5-9.8s9.2 3.4 8.5 9.8c-1.6-2.9-4.2-4.6-8.5-4.6-4.2 0-6.9 1.7-8.5 4.6z',  },  crop: { front: 'M12 16.5c0-5.3 3.4-8 8-8s8 2.7 8 8c-2.2-1.8-4.8-2.5-8-2.5s-5.8.7-8 2.5z' },  bun: {    back: 'M20 3.6a3.6 3.6 0 1 1 0 7.2 3.6 3.6 0 0 1 0-7.2z',    front:      'M11.4 19c-.9-6.8 3.2-10.6 8.6-10.6s9.5 3.8 8.6 10.6c-1.1-3.6-3.9-6.2-8.6-6.2s-7.5 2.6-8.6 6.2z',  },  long: {    back: 'M10.4 30c-1.6-4.6-1.9-10.4-.2-14.6C12 10.9 15.6 8.4 20 8.4s8 2.5 9.8 7c1.7 4.2 1.4 10-.2 14.6z',    front:

// Copyright (c) 2026 Bruno Delorence. MIT License.import type { ReactNode } from 'react';/* * The schedule's icons: line drawings on a 20-unit grid (framed to its middle 15 units) in the current colour, sized by the * stylesheet (the lab forces unsized SVGs to 16 px). All of them are decorative: the control * that holds one carries the name. */const paths: Record<string, ReactNode> = {  switch: (    <>      <path d="M7 15V5M4.5 7.5 7 5l2.5 2.5" />      <path d="M13 5v10m-2.5-2.5L13 15l2.5-2.5" />    </>  ),  search: (    <>      <circle cx="9" cy="9" r="5.25" />      <path d="m13 13 3.5 3.5" />    </>  ),  dashboard: (

// 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 = {  /** Resolves after `ms`. */

// 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. `visible` and `reduced` are handed out too, for * the clock (it stops off screen) and the transitions. */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);