Version history

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useId,  useLayoutEffect,  useRef,  useState,  type ChangeEvent,  type CSSProperties,  type FocusEvent,  type KeyboardEvent,  type PointerEvent,} from 'react';import { DemoPointer, runDemo } from './demo-pointer';import { ChatMark, CheckCircle, GearIcon, ModelMark } from './icons';import { PEOPLE, SPOTS, type Spot, type Version } from './versions';import { useAutoplay } from './use-autoplay';import styles from './version-history.module.css';/* * Version history: a workflow editor's timeline of saved versions, under its canvas.

/* Version history (version-history.tsx): an editor window, its side bar, its canvas, and the   Version History panel docked at the bottom of the canvas. Sizes are in px for a window 830 wide   and 600 tall; narrower than 600, the side bar goes and the timeline packs tighter.   Memory. The window is the one layout boundary, of a fixed height. A phone keeps the page's   pixels in tiles the width of the screen, and a tile painted again gets a second buffer, so what   changes while the demo plays paints on small layers of its own: the tray, the dots' field, the   range's row, the months and the line for screen readers. What moves does it with transforms on   boxes of a fixed size, and only the cards next to the one on show exist, so a page turn moves   a few cards rather than a strip of all of them. The drawings are SVGs that never change; the   avatars and the timeline's marks are HTML boxes.   Colours are the tokens below, light, then light-dark(light, dark) pairs: 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). The pairs sit in @supports, which a build that   rewrites light-dark() for older browsers leaves as written; without light-dark(), the light   colours stay. The avatars and the chat tool's mark keep their colours. */.stage {  /* The window and its edge; the side bar's gear. */  --window: #fff;  --window-edge: rgb(0 0 0 / 6%);  --gear: #8f8f8f;  /* The canvas, its edge, its dotted guides, the wire and its port. */

/** Someone who saved versions; their illustrated avatar is drawn in the stylesheet. */export type Person = 'theo' | 'maya' | 'ines' | 'ravi';export const PEOPLE: Record<Person, string> = {  theo: 'Theo',  maya: 'Maya',  ines: 'Ines',  ravi: 'Ravi',};/** A saved version of the workflow. */export type Version = {  /** Its number, counted from the workflow's first version. */  number: number;  /** When it was saved, in minutes after midnight. */  time: number;  /** What changed, in a sentence. */  note: string;  /** Who made it. */  authors: Person[];  /** How much it changed, in edited fields: the dot grows with it. */  changes: number;  /** It went live. */  published?: boolean;

/* * The canvas' drawings: the settings gear, the model's mark, the chat tool's mark and the check * in the Output tag. They never change once drawn (the timeline's own marks are HTML boxes, so * that nothing inside an SVG is ever restyled while the demo plays). */export function GearIcon({ className }: { className?: string }) {  return (    <svg className={className} viewBox="0 0 16 16" aria-hidden="true">      <path        d="M6.7 1.9h2.6l.4 1.7c.4.2.8.4 1.1.7l1.7-.5 1.3 2.2-1.3 1.2a4 4 0 0 1 0 1.3l1.3 1.2-1.3 2.2-1.7-.5c-.3.3-.7.5-1.1.7l-.4 1.7H6.7l-.4-1.7a4 4 0 0 1-1.1-.7l-1.7.5-1.3-2.2 1.3-1.2a4 4 0 0 1 0-1.3L2.2 6l1.3-2.2 1.7.5c.3-.3.7-.5 1.1-.7z"        fill="none"        stroke="currentColor"        strokeWidth="1.2"        strokeLinejoin="round"      />      <circle cx="8" cy="8" r="2" fill="none" stroke="currentColor" strokeWidth="1.2" />    </svg>  );}/** The model's mark: a four-pointed spark in a ring. */export function ModelMark({ className }: { className?: string }) {  return (

'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 dot or a button and press it, or grab the range and drag it, calling * the component's own handlers 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. * * Nothing the pointer does needs a layout: it moves by animations the compositor plays (a drag * too: the dragged value follows that animation's clock), the press scales a box that keeps a * transform at rest, and the arrow and the pointing hand are HTML boxes around drawings that * never change, swapped by their opacity (the stylesheet's rule, from `data-hand`). */export type Point = { x: number; y: number };/** The arrow, or the pointing hand over something that can be pressed. */export type Glyph = 'arrow' | 'hand';export type Demo = {  /** Resolves after `ms`. */

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