Workspace home

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useEffectEvent,  useId,  useRef,  useState,  type CSSProperties,  type KeyboardEvent as ReactKeyboardEvent,  type ReactNode,} from 'react';import {  ACTIVITY,  DEADLINES,  PEOPLE,  PRIORITY_LABEL,  PROJECTS,  TASKS,  TEAMS,  projectById,  type Activity,

/* Workspace home (workspace-home.tsx): a project tool's first screen in an app window. Near-black   at night, the sidebar a step darker than the page, cards drawn by hairlines rather than fills,   one periwinkle accent; 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).   Layout by container queries on the root, so it answers to the room it is given: the sidebar   is a column from 760 px (or a rail of icons, folded), a drawer under it; the cards sit in two   columns from 1340 px and in one under it.   Memory. Folds (a project's views, a ticked task leaving) animate grid rows on one small box;   everything else moves by transforms and opacity, and the demo pointer on its own layer. */.root {  --app: #ffffff;  --side: #f7f7f5;  --line: #e6e6e2;  --divider: #efefec;  --hover: #f4f4f2;  --active: #ebebe8;  --ink: #1b1b19;  --ink-2: #5c5c58;  --muted: #8a8a85;

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The workspace the home screen shows: an invented design studio, its projects, its people, the * reader's tasks and what is due soon. All of it is made up for the demo; the dates are written as * the app would show them on Tuesday, October 13. */import type { PATHS } from './icons';export type ProjectId = 'web' | 'mobile' | 'marketing' | 'launch' | 'system' | 'portal';export type IconName = keyof typeof PATHS;export type Project = {  id: ProjectId;  name: string;  icon: IconName;  /** Its colour: the dot beside its tasks and the tint of its tile. */  hue: string;  status: 'In Progress' | 'Planning' | 'At Risk' | 'On Hold';  progress: number;  due: string;  team: PersonId[];  /** Members beyond the faces shown. */

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