Insight cards

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useEffect, useRef, useState, type CSSProperties, type RefObject } from 'react';import { INSIGHTS, type Insight, type SummaryPart } from './data';import { DemoPointer, runDemo, type Demo } from './demo-pointer';import { TrendChart, TOKEN, type ChartHandle } from './trend-chart';import { useAutoplay } from './use-autoplay';import styles from './insight-cards.module.css';export type { CompareSeries, Insight, Segment, SpikeUnit, SummaryPart, Tone } from './data';export type { ChartSeries } from './trend-chart';/* * Insight cards: what an agent noticed, one insight at a time. A header counts them and pages * through them; each insight is a sentence, a card that backs it up, and a follow-up question. * * - The cards come in three kinds (data.ts). 'compare' sets two series side by side, their change *   in percent and in money, over a trend chart with a legend. 'spike' shows one series on a live *   chart with a time axis, in a unit one picks (spend or usage); scrubbing it reads the value in *   the chart's header. 'allocation' splits a whole into a bar of segments: pressing a segment, or *   its chip, inspects it, and the figure and the note follow. * - The charts (trend-chart.tsx) come in live: a grey placeholder line bends into the data as the

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useCallback,  useEffect,  useImperativeHandle,  useLayoutEffect,  useRef,  useState,  type KeyboardEvent,  type PointerEvent,  type Ref,} from 'react';import type { Tone } from './data';import styles from './insight-cards.module.css';/* * The insight cards' chart: one or more series drawn on a canvas, with a cursor and a tooltip in * HTML over it that one scrubs with the pointer, a finger or the arrow keys. * * - Two kinds. 'compare' draws series side by side on a shared scale, with a legend to show or *   hide each one. 'live' draws one series on a time axis, its newest reading now, and dotted

/* Insight cards (insight-cards.tsx, trend-chart.tsx): a soft grey stage, and in its middle a column   344 px wide at most: the header with its pager, then the insight's sentence, its card and its   follow-up question.   Colours are the tokens below, light-dark(light, dark) where the two differ: 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). Shadows that differ between the schemes are   written once with every layer, the layers a scheme does not use being transparent. The charts'   canvas reads its colours from the probe at the end of this file. */.root {  /* The stage, and the ink in three strengths. */  --canvas: oklch(96.1% 0.002 247.84);  --ink: oklch(24.7% 0.006 258.361);  --ink-2: oklch(50.6% 0.01 264.477);  --ink-3: oklch(69.5% 0.009 264.505);  /* Hairlines, a stronger one, and the charts' gridlines. */  --line: oklch(94.6% 0.003 264.542);  --line-strong: oklch(91.2% 0.005 258.326);  --grid: color-mix(in srgb, var(--line) 78%, transparent);  /* The card; the chart's well, sunk a little; badges and toggles; a control under the pointer. */  --surface: oklch(100% 0 0);  --inset: oklch(97.9% 0.002 247.839);  --field: oklch(96.1% 0.001 286.375);

// Copyright (c) 2026 Bruno Delorence. MIT License./* * What an insight card shows, and the three sample insights of a small ice-cream shop's agent. * * An insight is a sentence, a card and a follow-up question. The card is one of three kinds: * - 'compare': two series side by side, their change and amount, over a shared trend chart; * - 'spike': one series rising past its usual level, on a live chart with a time axis, read in *   one of a few units (spend, usage...); * - 'allocation': how one whole splits into parts, as a bar of segments one can inspect. *//** The colours a series, a mention or a segment can take. */export type Tone = 'orange' | 'blue' | 'green' | 'red' | 'neutral' | 'faint';/** A run of the sentence: plain text, an @mention, a figure (bad news or good), or emphasis. */export type SummaryPart =  | string  | { mention: string; tone?: Tone }  | { figure: string; sentiment: 'negative' | 'positive' }  | { strong: string };export type CompareSeries = {  /** The series' name, over its figures and in the chart's tooltip. */

'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. * A sweep drags the pointer straight across a control at an even pace, reporting how far it has * gone each frame, to scrub a chart as a hand 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>;

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