Flowchart

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useCallback,  useEffect,  useId,  useLayoutEffect,  useRef,  useState,  type KeyboardEvent as ReactKeyboardEvent,  type PointerEvent as ReactPointerEvent,} from 'react';import { DemoPointer, runDemo, type Point } from './demo-pointer';import { useAutoplay } from './use-autoplay';import styles from './flowchart.module.css';/* * Flowchart: two steps of a workflow on a dotted board. A trigger ("New order created") is joined * by a curve to an If / Else step whose conditions read as a sentence of chips: "If order flavor * is Rocky Road, and order topping is ...". The field and the value chips open menus. * * - Each step is placed by its left (its middle, from the board's centre) and its top. Pressing a

/* Flowchart (flowchart.tsx): a soft grey stage, and in its middle a board 480 px wide at most,   dotted every 22 px, on which two steps sit: the trigger, a card that can be selected, and the   If / Else step, its conditions in rows of chips. A curve joins them.   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. Hovers ease shadows and fills (150 and 100 ms); a menu pops in from its chip's corner   (180 ms, a 0.95 scale and a fade) and its highlight glides between options (220 ms). Steps move   under the pointer by their left and top, so the curve is redrawn in the same frame. Under   reduced motion all of it is instant. */.root {  /* The stage, the board, a card and the ink in three strengths. */  --canvas: oklch(96.1% 0.002 247.84);  --page: oklch(98.5% 0.001 286.376);  --surface: oklch(100% 0 0);  --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 stronger one draws the dots and the curve. */  --line: oklch(94.6% 0.003 264.542);

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