// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useEffectEvent,  useLayoutEffect,  useRef,  useState,  useSyncExternalStore,  type CSSProperties,  type ReactNode,} from 'react';import {  ASK,  DATE_LABEL,  MEETINGS,  METRICS,  PERFORMANCE_QUESTIONS,  PIPELINES,  PRODUCT,  ROUTINES,  SESSIONS,

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useId,  useRef,  useState,  type KeyboardEvent,  type ReactNode,  type Ref,} from 'react';import {  ARTICLE,  MEETINGS,  PIPELINES,  TASKS,  type Meeting,  type Pipeline,  type Task,} from './data';import { DayTile, Icon, Mark, PipelineTile, type IconName } from './icons';import styles from './today-cards.module.css';

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The invented workspace the screen shows: an assistant called Sevenfold, a sales team's day on * Tuesday 13 October, its meetings, tasks, pipelines and numbers, the composer's suggestions and * the release note the side card links to. Every company and person here is made up. */export const PRODUCT = 'Sevenfold';export const WORKSPACE = 'Hollowell Demo';export const DATE_LABEL = 'Tue, Oct 13';export type PipelineIcon = 'case' | 'branch' | 'swap' | 'people' | 'stack';/** A pipeline's tile: a gradient square with a white glyph. */export type Pipeline = {  id: string;  name: string;  /** Two colours, top left to bottom right. */  tint: [string, string];  icon: PipelineIcon;  deals?: number;  /** In dollars. */  value?: number;

// Copyright (c) 2026 Bruno Delorence. MIT License.import type { CSSProperties } from 'react';import type { ChipIcon, Pipeline, PipelineIcon } from './data';/* * The screen's drawings: line icons on a 16-unit grid in currentColor (their size comes from the * stylesheet), the assistant's seven-sided mark, the pipelines' gradient tiles, the calendar * tile, the progress ring and the invented app marks of the composer's tray. All decorative: * whatever they stand for is said in text beside them. */export type IconName =  | 'plus'  | 'search'  | 'panel'  | 'review'  | 'book'  | 'gear'  | 'chevron-down'  | 'chevron-left'  | 'chevron-right'  | 'caret-down'  | 'caret-right'

// 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 (nothing here * does, but the hook is kept). 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(

/* Today cards (today-cards.tsx): an assistant's new-session screen. Near-white, with a pale warm   grey sidebar, a soft rainbow across the top, white composer and pale grey cards; orange for   meetings on now, crimson for late tasks, green for numbers that moved the right way. At night   near-black, the cards a step lighter, the rainbow dimmed.   Colours are the tokens below, light-dark(light, dark) where the two differ: the screen takes   the color-scheme it inherits from the page, or the one its colorScheme prop sets   (data-color-scheme).   Layout is by container queries on the root: a 215 px sidebar from 900 px, a drawer behind a   menu button under that, the cards in one column under 640 px.   Memory. Only transforms, opacity and a small blur animate (menus, the palette, the toast, the   greeting's words, the suggestions' row); the rainbow is one static SVG, blurred once. */.root {  --bg: #fdfcfc;  --side: #f8f7f7;  --side-line: #efeded;  --ink: #1d1d1d;  --ink-2: #3a3a3a;  --muted: #8b8b8b;  --muted-2: #a3a3a3;  --faint: #bdbdbd;