Project timeline

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useEffectEvent,  useId,  useLayoutEffect,  useMemo,  useRef,  useState,  type CSSProperties,  type KeyboardEvent as ReactKeyboardEvent,  type PointerEvent as ReactPointerEvent,  type ReactNode,} from 'react';import {  DAYS,  GROUP_PROJECTS,  MILESTONES,  MONTH_LONG,  PEOPLE,  PROJECTS,

/* Project timeline (project-timeline.tsx): a project tool's Gantt screen in an app window.   Near-black at night, the sidebar a step darker than the page, hairlines rather than fills, the   bars tinted by status (green done, amber in progress, violet in review, grey to do), each with   its progress filled in; by day the same in white and warm greys.   Colours are the tokens below, light-dark(light, dark): the component takes the color-scheme it   inherits from the page, or the one its colorScheme prop sets (data-color-scheme).   Geometry: a day is --day wide (set inline: 35.25 px in Weeks, 11 px in Months), a row --row   tall, the list column --list wide. Bars sit at translateX(start × day), so a drag, a push from   a dependency and a change of view all move them by transform.   Layout by container queries on the root: the sidebar is a column from 760 px (or a rail of   icons, folded), a drawer under it, where the list column narrows to the task names. */.root {  --app: #ffffff;  --side: #f7f7f5;  --line: #e6e6e2;  --divider: #efefec;  --hover: #f4f4f2;  --active: #ebebe8;  --ink: #1b1b19;  --ink-2: #5c5c58;

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The schedule the timeline shows: an invented design studio, its projects, its people, their * tasks with planned dates, what waits on what, and the milestones. All of it is made up. * * Dates are whole days counted from the first day of the chart (Monday, September 7, 2026), so * the arithmetic of a Gantt chart is plain integer sums; `day()` turns a calendar date into one. */import type { PATHS } from './icons';export type IconName = keyof typeof PATHS;/** The first day of the chart: a Monday, so weeks line up with the grid. */export const FIRST = Date.UTC(2026, 8, 7);/** How many days the chart spans: twelve weeks, to Sunday, November 29. */export const DAYS = 84;const DAY_MS = 86_400_000;/** The chart's day number of a calendar date (`month` is 1–12). */export const day = (month: number, date: number) =>  Math.round((Date.UTC(2026, month - 1, date) - FIRST) / DAY_MS);/** The calendar date of a chart day. */

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The line icons, drawn on a 24-unit grid with a 1.7-unit round stroke in the text's colour. Each * is a list of path data; a circle is written as two arcs. The stylesheet sizes them (the lab page * would otherwise force every unsized SVG to 16 px). */const circle = (cx: number, cy: number, r: number) =>  `M${cx - r} ${cy}a${r} ${r} 0 1 0 ${r * 2} 0a${r} ${r} 0 1 0 ${-r * 2} 0`;export const PATHS = {  home: ['M4 10.5 12 4l8 6.5V19a1 1 0 0 1-1 1h-4.5v-6h-5v6H5a1 1 0 0 1-1-1z'],  inbox: [    'M4 13.5 6.4 6.2A1.8 1.8 0 0 1 8.1 5h7.8a1.8 1.8 0 0 1 1.7 1.2L20 13.5V18a1.8 1.8 0 0 1-1.8 1.8H5.8A1.8 1.8 0 0 1 4 18z',    'M4 13.5h4.5l1.2 2.3h4.6l1.2-2.3H20',  ],  checkCircle: [circle(12, 12, 8.2), 'm8.6 12.2 2.3 2.3 4.6-4.8'],  star: ['m12 3.8 2.5 5.1 5.6.8-4 3.9 1 5.6L12 16.6l-5 2.6 1-5.6-4.1-3.9 5.6-.8z'],  search: [circle(11, 11, 6.3), 'm15.7 15.7 4.2 4.2'],  help: [circle(12, 12, 8.2), 'M9.7 9.6a2.4 2.4 0 1 1 3.3 2.2c-.6.3-1 .8-1 1.4v.4', 'M12 16.3v.1'],  bell: ['M6.3 16.5V11a5.7 5.7 0 0 1 11.4 0v5.5l1.5 1.5H4.8z', 'M10 20.5a2.2 2.2 0 0 0 4 0'],  overview: ['M4.5 4.5h6v6h-6z', 'M13.5 4.5h6v4h-6z', 'M13.5 11.5h6v8h-6z', 'M4.5 13.5h6v6h-6z'],  folder: [

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