Context cards

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useEffect, useRef, useState, type CSSProperties } from 'react';import { CHUNKS, type Chunk, type SourceKind } from './data';import { DemoPointer, runDemo, type Demo } from './demo-pointer';import { useAutoplay } from './use-autoplay';import styles from './context-cards.module.css';export type { Chunk, ChunkSource, SourceKind } from './data';/* * Context cards: the chunks of knowledge a retrieval brought back, a card each, with where they * came from. A heading counts the chunks; each card has a bar (a glyph, the chunk's title and its * length in characters), the chunk's text, and a chip for its source: a small coloured badge for * the kind of file, the file's name and an arrow. * * - The source chip is a link when the source has an href, a button when onOpenSource is set, and *   a plain label otherwise. Its background warms on hover, over 300 ms. * - The list comes in once, as it first shows: the heading fades in (400 ms), the cards rise 8 px *   as they fade in, 100 ms apart (400 ms each), and the chips pop from 95% scale, 80 ms apart *   (300 ms). All of it is CSS, started by one attribute on the root. * - While on screen and untouched, a demo pointer then visits the source chips in turn; any input

/* Context cards (context-cards.tsx): a soft grey card, and in its middle a column 380 px wide at   most: the heading with its count, then a card per chunk.   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.   Motion. The entrance is CSS alone, started by data-stage="in" on the root: the heading fades   in, the cards rise, the chips pop. Under reduced motion it never plays (data-stage="still"). */.root {  /* The card, 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: the stage's edge, the count's and the rule under a card's bar. */  --line: oklch(94.6% 0.003 264.542);  /* The chunk cards; the count and the chips, sunk a little; a chip under the pointer. */  --surface: oklch(100% 0 0);  --inset: oklch(97.9% 0.002 247.839);  --hover: oklch(97% 0.002 247.839);  /* The badges of the kinds of source. */

/** A source's kind: the coloured badge its chip shows (PDF in red, CSV in green, the rest grey). */export type SourceKind = 'pdf' | 'csv' | 'doc' | 'web';/** Where a chunk was retrieved from. */export type ChunkSource = {  /** The file name, or the page's title. */  name: string;  kind: SourceKind;  /** Opens the source in a new tab; without it, the chip is a button when onOpenSource is set. */  href?: string;};/** One retrieved chunk of knowledge. */export type Chunk = {  id: string;  title: string;  /** Its length, in characters. */  characters: number;  /** The chunk's text, or the excerpt of it the card shows. */  text: string;  source: ChunkSource;};/** The sample retrieval: two chunks that would answer a question from a small dessert shop. */

'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. * 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>;  /** Presses and lets go; `action` runs as the pointer goes down. */  press: (action: () => void) => 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;