flowfig 0.1.0

package/dist/index.js

@@ -0,0 +1,638 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { route } from './geometry.js';
+import { foldedLabel, groupBox, layoutRail, railState, RAIL } from './rail.js';
+import { checkScene, checkSpec, checkTheme } from './check.js';
+import { ASYNC_TAG_W, BASE_RATE, CARD_LINE, CARD_PAD, CARD_WIDTH, EDGE_OFF, EDGE_ON, LIGHT, TONES, ON_ACCENT, decisions, edgeId, groupGap, isGroup, isRows, nodes, toBeat, } from './model.js';
+export { LIGHT, DARK } from './model.js';
+const DEFAULTS = { ...LIGHT, font: 'inherit' };
+const v = (k) => `var(--fig-${k}, ${DEFAULTS[k]})`;
+const MONO = 'var(--ifm-font-family-monospace, ui-monospace, SFMono-Regular, Menlo, monospace)';
+const glow = `0 0 0 3px color-mix(in srgb, ${v('accent')} 18%, transparent)`;
+const cardBody = (c) => {
+    if (c == null)
+        return '—';
+    if (!isRows(c))
+        return c;
+    return (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 4, whiteSpace: 'normal' }, children: c.map((r, i) => {
+            const tone = TONES[r.tone ?? 'blue'];
+            const tag = r.tag != null && (_jsx("span", { "data-fig-tag": true, style: {
+                    flexShrink: 0,
+                    fontSize: 9,
+                    fontWeight: 600,
+                    letterSpacing: '.03em',
+                    textTransform: 'uppercase',
+                    padding: '0 4px',
+                    borderRadius: 4,
+                    lineHeight: '14px',
+                    color: tone,
+                    background: `color-mix(in srgb, ${tone} 15%, transparent)`,
+                }, children: r.tag }));
+            const mark = r.mark != null && (_jsx("span", { style: { flexShrink: 0, marginLeft: 'auto', color: v('accent'), fontWeight: 600 }, children: r.mark }));
+            const text = (_jsxs("span", { style: {
+                    minWidth: 0,
+                    fontFamily: r.mono ? MONO : undefined,
+                    fontSize: r.mono ? 10.5 : undefined,
+                }, children: [r.text, r.meta != null && _jsxs("span", { style: { color: v('muted') }, children: [" \u00B7 ", r.meta] })] }));
+            // A word-sized tag heads its row so the text keeps the full width; a number or no tag sits inline.
+            return (r.tag?.length ?? 0) > 2 ? (_jsxs("div", { children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 5, marginBottom: 1 }, children: [tag, mark] }), text] }, i)) : (_jsxs("div", { style: { display: 'flex', gap: 5, alignItems: 'baseline' }, children: [tag, text, mark] }, i));
+        }) }));
+};
+/**
+ * The interactive player for one figure: tabs for the steps, play and pause, speed, hover and full screen.
+ * Give it a `FlowProps` spec. Use `toSvg` from `flowfig/svg` for a static animated SVG instead.
+ */
+export function Flow({ layout, edges, steps = [], theme, speed = 900, autoplay = true, check = false, rail: withRail = false }) {
+    const root = useRef(null);
+    const outer = useRef(null);
+    const [fit, setFit] = useState({ scale: 1, height: 0 });
+    const [full, setFull] = useState(false);
+    useEffect(() => {
+        if (!full)
+            return;
+        const onKey = (e) => e.key === 'Escape' && setFull(false);
+        addEventListener('keydown', onKey);
+        return () => removeEventListener('keydown', onKey);
+    }, [full]);
+    const dots = useRef([]);
+    const chips = useRef([]);
+    const bar = useRef(null); // the active tab's progress line
+    const [beat, setBeat] = useState(0);
+    const paths = useRef({});
+    const [routed, setRouted] = useState([]);
+    const [active, setActive] = useState(steps.length ? 0 : null);
+    const [playing, setPlaying] = useState(autoplay);
+    // The step's clock lives outside React: pausing freezes it, resizing keeps it, only a new step resets it.
+    const playingRef = useRef(playing);
+    playingRef.current = playing;
+    const [rate, setRate] = useState(1);
+    const rateRef = useRef(rate);
+    rateRef.current = rate;
+    const clock = useRef({ beats: null, elapsed: 0 });
+    const [hover, setHover] = useState(null);
+    const ids = useMemo(() => edges.map(edgeId), [edges]);
+    const tips = useMemo(() => new Set(decisions(layout)), [layout]);
+    const step = active == null ? null : steps[active];
+    const beats = useMemo(() => (step?.flow ?? []).map(toBeat), [step]);
+    // Every content each box's card will ever show. The card is sized to the largest, so text never gets cut and nothing jumps.
+    const carded = useMemo(() => {
+        const all = new Map();
+        for (const b of steps.flatMap((s) => s.flow.map(toBeat)))
+            for (const [id, c] of Object.entries(b.show ?? {}))
+                all.set(id, [...(all.get(id) ?? []), c]);
+        return all;
+    }, [steps]);
+    const cur = beats[beat];
+    // The narration: the latest `say` so far (a beat without one keeps the line before), else the step caption.
+    const saidAt = beats.slice(0, beat + 1).findLastIndex((b) => b.say != null);
+    const said = saidAt === -1 ? step?.caption : beats[saidAt].say;
+    // Content cards: everything the step has shown so far, latest wins.
+    const shown = useMemo(() => Object.assign({}, ...beats.slice(0, beat + 1).map((b) => b.show)), [beats, beat]);
+    // The beat that last changed each card, so only a card whose content just changed animates in.
+    const shownAt = useMemo(() => {
+        const at = {};
+        beats.slice(0, beat + 1).forEach((b, i) => Object.keys(b.show ?? {}).forEach((k) => (at[k] = i)));
+        return at;
+    }, [beats, beat]);
+    // The rail lays out in node terms, like the SVG, so both renderers draw the same numbers. Its width follows the measured map.
+    const figure = useRef(null);
+    const [mapW, setMapW] = useState(0);
+    const railOnly = withRail === 'only';
+    const rail = useMemo(() => (withRail ? layoutRail({ layout, edges, steps, rail: true }, railOnly ? 560 : mapW) : null), [withRail, railOnly, layout, edges, steps, mapW]);
+    // 'only' drops the map, but only when the rail has a hop to draw; a figure never renders empty.
+    const noMap = railOnly && rail != null;
+    const jump = useRef(null); // a rail click that asks for a beat of another step
+    const [hoverEdge, setHoverEdge] = useState(null);
+    // With reduced motion the player shows the last beat, so the rail marks every row as done.
+    const [still, setStill] = useState(false);
+    useEffect(() => setStill(window.matchMedia('(prefers-reduced-motion: reduce)').matches), []);
+    // Boxes with many edges on one side get taller so the edges and their labels have room.
+    const minHeight = useMemo(() => {
+        const out = {}, inn = {};
+        for (const e of edges) {
+            out[e.from] = (out[e.from] ?? 0) + 1;
+            inn[e.to] = (inn[e.to] ?? 0) + 1;
+        }
+        return (id) => {
+            const n = Math.max(out[id] ?? 0, inn[id] ?? 0);
+            return n > 2 ? n * 30 : undefined;
+        };
+    }, [edges]);
+    // Measure every box and redraw the edges whenever anything changes size.
+    useEffect(() => {
+        const el = root.current, box = outer.current;
+        if (!el || !box)
+            return; // no map to measure with rail: 'only'
+        const measure = () => {
+            // Too wide for its container? Shrink it so the whole figure stays in view. Below half size, scroll instead.
+            const scale = Math.max(0.5, Math.min(1, box.clientWidth / el.offsetWidth));
+            setFit({ scale, height: el.offsetHeight * scale });
+            setMapW(el.offsetWidth);
+            const base = el.getBoundingClientRect();
+            const k = base.width / el.offsetWidth; // the scale currently on screen; rects are measured unscaled
+            const rects = {};
+            el.querySelectorAll('[data-fig]').forEach((n) => {
+                const r = n.getBoundingClientRect();
+                rects[n.dataset.fig] = {
+                    x: (r.left - base.left) / k,
+                    y: (r.top - base.top) / k,
+                    w: r.width / k,
+                    h: r.height / k,
+                };
+            });
+            setRouted(route(edges.map((e, i) => ({ id: ids[i], from: e.from, to: e.to, around: e.around })), rects, tips));
+        };
+        measure();
+        const ro = new ResizeObserver(measure);
+        ro.observe(el);
+        ro.observe(box);
+        el.querySelectorAll('[data-fig]').forEach((n) => ro.observe(n));
+        return () => ro.disconnect();
+    }, [edges, ids, layout, tips, noMap]);
+    // The same rules as `flowfig check`, on what the browser actually drew: real fonts, real wrapping. Each fault prints once.
+    const reported = useRef(new Set());
+    useEffect(() => {
+        const el = root.current, box = outer.current;
+        const fig = figure.current;
+        // With rail: 'only' there is no map: the figure is the frame and the scene holds only the rail.
+        if (!check || !fig || (!noMap && (!el || !box)))
+            return;
+        const base = (el ?? fig).getBoundingClientRect();
+        const k = el ? base.width / el.offsetWidth : 1;
+        const rel = (n) => {
+            const r = n.getBoundingClientRect();
+            return { x: (r.left - base.left) / k, y: (r.top - base.top) / k, w: r.width / k, h: r.height / k };
+        };
+        const boxIds = new Set(nodes(layout).map((n) => n.id));
+        const boxes = [...(el ?? fig).querySelectorAll('[data-fig]')]
+            .filter((n) => boxIds.has(n.dataset.fig))
+            .map((n) => ({
+            id: n.dataset.fig,
+            rect: rel(n),
+            texts: [...n.querySelectorAll('*')]
+                .filter((t) => !t.children.length && t.textContent?.trim() && t.clientWidth > 0 && !t.closest('[aria-hidden]'))
+                .map((t) => {
+                const fontSize = parseFloat(getComputedStyle(t).fontSize);
+                return { text: t.textContent, fontSize, room: t.clientWidth, need: t.scrollWidth };
+            }),
+        }));
+        // Every visible leaf text counts, as in the SVG scene; the 9 px tag pills do not.
+        // The rail is a sibling of the map, so the rail queries start at the figure. An SVG <text> has no CSS box, so it skips clientWidth.
+        const fonts = [...fig.querySelectorAll('*')]
+            .filter((t) => !t.children.length &&
+            t.textContent?.trim() &&
+            (t instanceof SVGElement || t.clientWidth > 0) &&
+            !t.closest('[data-fig-tag],[aria-hidden]'))
+            .map((t) => parseFloat(getComputedStyle(t).fontSize));
+        const labels = Object.fromEntries([...fig.querySelectorAll('[data-fig-label]')].map((n) => [n.dataset.figLabel, rel(n)]));
+        const scene = {
+            width: Math.max(el?.offsetWidth ?? 0, rail?.width ?? 0),
+            boxes,
+            edges: [
+                ...routed.map((r) => {
+                    const e = edges[ids.indexOf(r.id)];
+                    return { id: r.id, from: e.from, to: e.to, curve: r.curve, label: labels[r.id] };
+                }),
+                // A rail pill is a label for label-overlap; its curve is a point at the pill center, so it can cross no box.
+                ...(rail?.rows ?? []).flatMap((row) => {
+                    const r = row.kind === 'message' ? labels[`rail:${row.n}`] : undefined;
+                    if (row.kind !== 'message' || !r)
+                        return [];
+                    const c = { x: r.x + r.w / 2, y: r.y + r.h / 2 };
+                    return [
+                        {
+                            id: `rail:${row.n}`,
+                            from: rail.columns[row.from].id,
+                            to: rail.columns[row.to].id,
+                            curve: [c, c, c, c],
+                            label: r,
+                        },
+                    ];
+                }),
+            ],
+            minFont: Math.min(...fonts),
+        };
+        for (const f of [
+            ...checkSpec({ layout, edges, steps }),
+            ...checkScene(scene, { width: (box ?? fig).clientWidth }),
+            ...checkTheme(theme),
+        ]) {
+            const key = f.rule + ':' + f.ids.join() + ':' + f.message;
+            if (reported.current.has(key))
+                continue;
+            reported.current.add(key);
+            console.warn(`flowfig check: ${f.severity} ${f.rule}: ${f.message}`);
+        }
+    }, [check, routed, layout, edges, steps, ids, theme, rail, noMap]);
+    // Play the step's beats: each moves its packets (and their data cards) along its edges, then the next step starts.
+    useEffect(() => {
+        const gs = dots.current, cs = chips.current;
+        if (clock.current.beats !== beats) {
+            // A rail click can open another step at a later beat; start the clock at that beat, not at 0.
+            const j = jump.current ?? 0;
+            jump.current = null;
+            clock.current = { beats, elapsed: beats.slice(0, j).reduce((t, b) => t + (b.ms ?? speed), 0) };
+            setBeat(j);
+        }
+        if (!beats.length || (!noMap && !routed.length))
+            return;
+        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+            if (bar.current)
+                bar.current.style.transform = 'none';
+            return void setBeat(beats.length - 1);
+        }
+        const ends = beats.reduce((acc, b) => [...acc, (acc.at(-1) ?? 0) + (b.ms ?? speed)], []);
+        const total = ends.at(-1) + speed * 1.5; // hold on the last beat before moving on
+        let raf = 0, last = performance.now(), shownBeat = -1;
+        const tick = (now) => {
+            if (playingRef.current)
+                clock.current.elapsed += (now - last) * rateRef.current * BASE_RATE;
+            last = now;
+            if (clock.current.elapsed >= total) {
+                if (steps.length > 1)
+                    return setActive((a) => ((a ?? 0) + 1) % steps.length);
+                clock.current.elapsed = 0;
+            }
+            const t = clock.current.elapsed;
+            if (bar.current)
+                bar.current.style.transform = `scaleX(${Math.min(1, t / total)})`;
+            const next = ends.findIndex((e) => t < e);
+            const i = next === -1 ? beats.length - 1 : next;
+            if (i !== shownBeat)
+                setBeat((shownBeat = i));
+            const start = i ? ends[i - 1] : 0;
+            const f = Math.min(1, (t - start) / ((beats[i].ms ?? speed) * 0.8)); // arrive a little early, rest at the end
+            const eased = f < 0.5 ? 2 * f * f : 1 - (-2 * f + 2) ** 2 / 2;
+            const hops = t < ends.at(-1) ? beats[i].hops : [];
+            gs.forEach((g, j) => {
+                const p = hops[j] && paths.current[hops[j].edge];
+                const c = cs[j];
+                if (!p) {
+                    if (g)
+                        g.style.opacity = '0';
+                    if (c)
+                        c.style.opacity = '0';
+                    return;
+                }
+                const pt = p.getPointAtLength((hops[j].back ? 1 - eased : eased) * p.getTotalLength());
+                if (g) {
+                    g.setAttribute('transform', `translate(${pt.x} ${pt.y})`);
+                    g.style.opacity = '1';
+                }
+                if (c) {
+                    c.style.transform = `translate(${pt.x}px, ${pt.y}px) translate(-50%, calc(-100% - 12px))`;
+                    c.style.opacity = hops[j].data == null ? '0' : '1';
+                }
+            });
+            raf = requestAnimationFrame(tick);
+        };
+        raf = requestAnimationFrame(tick);
+        return () => {
+            cancelAnimationFrame(raf);
+            gs.forEach((g) => g && (g.style.opacity = '0'));
+            cs.forEach((c) => c && (c.style.opacity = '0'));
+        };
+    }, [beats, routed, noMap, speed, steps.length]);
+    // What to light up: the step's edges and their ends, or whatever touches the hovered box.
+    // A step lights the trail so far: every edge its beats have crossed, and every box it has filled.
+    const trail = beats.slice(0, beat + 1).flatMap((b) => b.hops.map((h) => h.edge));
+    const hoverEdgeIdx = hoverEdge == null ? -1 : ids.indexOf(hoverEdge);
+    const litEdges = new Set(hoverEdge ? [hoverEdge] : hover ? ids.filter((id, i) => edges[i].from === hover || edges[i].to === hover) : trail);
+    const litNodes = new Set(hoverEdgeIdx !== -1
+        ? [edges[hoverEdgeIdx].from, edges[hoverEdgeIdx].to]
+        : hover
+            ? [hover]
+            : [...(step?.nodes ?? []), ...Object.keys(shown), ...(cur?.light ?? [])]);
+    edges.forEach((e, i) => {
+        if (litEdges.has(ids[i]))
+            litNodes.add(e.from).add(e.to);
+    });
+    const goTo = (step, b) => {
+        setPlaying(true);
+        if (step === active) {
+            clock.current.elapsed = beats.slice(0, b).reduce((t, x) => t + (x.ms ?? speed), 0);
+            setBeat(b);
+        }
+        else {
+            jump.current = b;
+            setActive(step);
+        }
+    };
+    const focus = hover != null || hoverEdge != null || step != null;
+    const vars = Object.fromEntries(Object.entries(theme ?? {}).map(([k, val]) => [`--fig-${k}`, val]));
+    const renderItem = (item, depth) => {
+        if (isGroup(item)) {
+            const lit = item.id != null && litNodes.has(item.id);
+            const framed = item.label != null;
+            return (_jsxs("div", { "data-fig": item.id, style: {
+                    ...(framed && {
+                        background: v('surface'),
+                        border: `1px solid ${lit ? v('accent') : v('border')}`,
+                        boxShadow: lit ? glow : undefined,
+                        borderRadius: 14,
+                        padding: '10px 18px 18px',
+                    }),
+                    transition: 'border-color .25s, box-shadow .25s',
+                }, children: [item.label != null && (_jsx("div", { style: {
+                            fontSize: 12,
+                            fontWeight: 600,
+                            letterSpacing: '.04em',
+                            textTransform: 'uppercase',
+                            color: v('muted'),
+                            marginBottom: 12,
+                        }, children: item.label })), _jsx("div", { style: {
+                            display: 'flex',
+                            flexDirection: item.direction ?? 'row',
+                            gap: groupGap(item, edges),
+                            alignItems: item.align
+                                ? item.align === 'center'
+                                    ? 'center'
+                                    : 'flex-' + item.align
+                                : item.direction === 'column'
+                                    ? 'stretch'
+                                    : 'center',
+                            justifyContent: 'center',
+                        }, children: item.children.map((c) => renderItem(c, depth + 1)) })] }, item.id ?? depth + String(item.label)));
+        }
+        const lit = litNodes.has(item.id);
+        const diamond = item.shape === 'decision';
+        const store = item.shape === 'store';
+        const card = carded.has(item.id);
+        return (_jsxs("div", { "data-fig": item.id, onMouseEnter: () => setHover(item.id), onMouseLeave: () => setHover(null), style: {
+                position: 'relative',
+                isolation: 'isolate',
+                minWidth: 100,
+                maxWidth: card ? undefined : 190,
+                width: item.width ?? (card ? CARD_WIDTH : undefined),
+                minHeight: minHeight(item.id),
+                boxSizing: 'border-box',
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+                padding: diamond ? '22px 34px' : `${store ? 24 : 10}px ${card ? 10 : 16}px 10px`,
+                textAlign: 'center',
+                background: diamond ? undefined : v('bg'),
+                color: v('fg'),
+                border: diamond ? undefined : `1px solid ${lit ? v('accent') : v('border')}`,
+                boxShadow: diamond ? undefined : lit ? glow : '0 1px 2px rgba(0,0,0,.06)',
+                opacity: focus && !lit ? 0.7 : 1,
+                borderRadius: store ? '50% / 12px' : 10,
+                fontSize: 14,
+                fontWeight: 500,
+                transition: 'border-color .25s, box-shadow .25s, opacity .25s',
+                cursor: 'default',
+            }, children: [diamond && (_jsx("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", style: {
+                        position: 'absolute',
+                        inset: 0,
+                        width: '100%',
+                        height: '100%',
+                        overflow: 'visible',
+                        zIndex: -1,
+                    }, children: _jsx("polygon", { points: "50,0 100,50 50,100 0,50", fill: v('bg'), stroke: lit ? v('accent') : v('border'), strokeWidth: lit ? 1.6 : 1, vectorEffect: "non-scaling-stroke", style: { transition: 'stroke .25s' } }) })), store && (_jsx("div", { style: {
+                        position: 'absolute',
+                        top: -1,
+                        left: -1,
+                        right: -1,
+                        height: 24,
+                        boxSizing: 'border-box',
+                        borderRadius: '50%',
+                        border: `1px solid ${lit ? v('accent') : v('border')}`,
+                        transition: 'border-color .25s',
+                    } })), _jsx("div", { children: item.label }), item.sub != null && _jsx("div", { style: { fontSize: 12, fontWeight: 400, color: v('muted'), marginTop: 2 }, children: item.sub }), card && (_jsxs("div", { style: {
+                        marginTop: 8,
+                        padding: '6px 8px',
+                        minHeight: item.lines != null ? item.lines * CARD_LINE + CARD_PAD * 2 + 1 : undefined,
+                        boxSizing: 'border-box',
+                        display: 'grid',
+                        borderRadius: 6,
+                        textAlign: 'left',
+                        fontSize: 11,
+                        lineHeight: '15px',
+                        fontWeight: 400,
+                        whiteSpace: 'pre-wrap',
+                        overflowWrap: 'anywhere',
+                        color: shown[item.id] != null ? v('fg') : v('muted'),
+                        background: shown[item.id] != null ? `color-mix(in srgb, ${v('accent')} 8%, ${v('bg')})` : v('surface'),
+                        border: `1px dashed ${shown[item.id] != null ? v('accent') : v('border')}`,
+                        animation: shown[item.id] != null ? 'flowfig-in .35s ease-out' : undefined,
+                    }, children: [carded.get(item.id).map((c, i) => (_jsx("div", { "aria-hidden": true, style: { gridArea: '1 / 1', visibility: 'hidden' }, children: cardBody(c) }, i))), _jsx("div", { style: { gridArea: '1 / 1' }, children: cardBody(shown[item.id]) })] }, `${active}-${shownAt[item.id] ?? 'empty'}`))] }, item.id));
+    };
+    const iconBtn = {
+        display: 'grid',
+        placeItems: 'center',
+        width: 30,
+        height: 30,
+        padding: 0,
+        borderRadius: 999,
+        cursor: 'pointer',
+        border: `1px solid ${v('border')}`,
+        background: v('bg'),
+        color: v('muted'),
+    };
+    return (_jsxs("figure", { ref: figure, className: "flowfig", style: {
+            ...vars,
+            position: full ? 'fixed' : 'relative',
+            inset: full ? 0 : undefined,
+            zIndex: full ? 1000 : undefined,
+            overflow: full ? 'auto' : undefined,
+            margin: full ? 0 : '24px 0',
+            padding: full ? '48px 24px 24px' : '20px 16px 16px',
+            border: full ? 'none' : `1px solid ${v('border')}`,
+            borderRadius: full ? 0 : 16,
+            background: v('bg'),
+            fontFamily: v('font'),
+            color: v('fg'),
+        }, children: [_jsx("button", { type: "button", "aria-label": full ? 'Close full screen' : 'Full screen', title: full ? 'Close (Esc)' : 'Full screen', onClick: () => setFull((f) => !f), style: {
+                    ...iconBtn,
+                    position: 'absolute',
+                    top: 10,
+                    right: 10,
+                    zIndex: 3,
+                    width: 28,
+                    height: 28,
+                }, children: _jsx(Icon, { d: full ? 'M4 4l8 8M12 4l-8 8' : 'M9 3h4v4M7 13H3V9M13 3L9 7M3 13l4-4' }) }), _jsx("style", { children: '@keyframes flowfig-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}' }), !noMap && (_jsx(_Fragment, { children: _jsx("div", { style: {
+                        margin: full ? '-48px -24px 0' : '-20px -16px 0',
+                        padding: full ? '48px 24px 24px' : '24px 16px',
+                        borderRadius: full ? 0 : '16px 16px 0 0',
+                        borderBottom: `1px solid ${v('border')}`,
+                        backgroundImage: `radial-gradient(color-mix(in srgb, ${v('fg')} 16%, transparent) 1px, transparent 1.2px)`,
+                        backgroundSize: '14px 14px',
+                    }, children: _jsx("div", { ref: outer, style: {
+                            overflow: fit.scale > 0.5 ? 'hidden' : 'auto',
+                            height: fit.scale < 1 ? fit.height : undefined,
+                        }, children: _jsxs("div", { ref: root, style: {
+                                position: 'relative',
+                                width: 'max-content',
+                                margin: '0 auto',
+                                transform: fit.scale < 1 ? `scale(${fit.scale})` : undefined,
+                                transformOrigin: 'top left',
+                                padding: 4,
+                                // room for edges that arc over or under the boxes
+                                paddingTop: edges.some((e) => e.around === 'above') ? 44 : 4,
+                                paddingBottom: edges.some((e) => e.around === 'below') ? 44 : 4,
+                            }, children: [renderItem(layout, 0), _jsxs("svg", { style: {
+                                        position: 'absolute',
+                                        inset: 0,
+                                        width: '100%',
+                                        height: '100%',
+                                        overflow: 'visible',
+                                        pointerEvents: 'none',
+                                    }, children: [_jsx("defs", { children: ['off', 'on'].map((k) => (_jsx("marker", { id: `fig-arrow-${k}`, viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "7", markerHeight: "7", orient: "auto-start-reverse", children: _jsx("path", { d: "M 0 1 L 9 5 L 0 9 z", fill: k === 'on' ? v('accent') : v('muted') }) }, k))) }), routed.map((r) => {
+                                            const on = litEdges.has(r.id);
+                                            const hidden = !on && edges[ids.indexOf(r.id)].quiet;
+                                            return (_jsx("path", { ref: (p) => {
+                                                    paths.current[r.id] = p;
+                                                }, d: r.d, fill: "none", stroke: on ? v('accent') : v('muted'), strokeWidth: on ? EDGE_ON : EDGE_OFF, strokeOpacity: hidden ? 0 : focus && !on ? 0.35 : 1, markerEnd: hidden ? undefined : `url(#fig-arrow-${on ? 'on' : 'off'})`, style: { transition: 'stroke .25s, stroke-opacity .25s' } }, r.id));
+                                        }), Array.from({ length: Math.max(1, ...beats.map((b) => b.hops.length)) }, (_, j) => (_jsxs("g", { ref: (g) => {
+                                                dots.current[j] = g;
+                                            }, style: { opacity: 0 }, children: [_jsx("circle", { r: 10, fill: v('accent'), opacity: 0.2 }), _jsx("circle", { r: 4.5, fill: v('accent') })] }, j)))] }), Array.from({ length: Math.max(1, ...beats.map((b) => b.hops.length)) }, (_, j) => (_jsx("div", { ref: (c) => {
+                                        chips.current[j] = c;
+                                    }, style: {
+                                        position: 'absolute',
+                                        left: 0,
+                                        top: 0,
+                                        zIndex: 2,
+                                        opacity: 0,
+                                        maxWidth: 220,
+                                        width: 'max-content',
+                                        padding: '4px 9px',
+                                        borderRadius: 8,
+                                        fontSize: 11.5,
+                                        lineHeight: '15px',
+                                        pointerEvents: 'none',
+                                        background: v('accent'),
+                                        color: ON_ACCENT,
+                                        boxShadow: '0 4px 14px rgba(0,0,0,.18)',
+                                        transition: 'opacity .2s',
+                                    }, children: cur?.hops[j]?.data }, j))), routed.map((r) => {
+                                    const e = edges[ids.indexOf(r.id)];
+                                    if (e.label == null)
+                                        return null;
+                                    const on = litEdges.has(r.id);
+                                    return (_jsx("div", { "data-fig-label": r.id, style: {
+                                            position: 'absolute',
+                                            left: r.mid.x,
+                                            top: r.mid.y,
+                                            transform: 'translate(-50%, -50%)',
+                                            fontSize: 11,
+                                            lineHeight: '16px',
+                                            padding: '0 7px',
+                                            borderRadius: 999,
+                                            whiteSpace: 'nowrap',
+                                            pointerEvents: 'none',
+                                            background: on ? v('accent') : v('bg'),
+                                            color: on ? ON_ACCENT : v('muted'),
+                                            border: `1px solid ${on ? v('accent') : v('border')}`,
+                                            opacity: !on && e.quiet ? 0 : focus && !on ? 0.6 : 1,
+                                            fontFamily: MONO,
+                                            transition: 'background .25s, color .25s, opacity .25s',
+                                        }, children: e.label }, r.id));
+                                })] }) }) }) })), rail && (_jsxs("svg", { viewBox: `0 0 ${rail.width} ${rail.height}`, style: {
+                    display: 'block',
+                    width: '100%',
+                    maxWidth: rail.width,
+                    height: 'auto',
+                    margin: `${noMap ? 0 : RAIL.gap}px auto 0`,
+                    overflow: 'visible',
+                    fontFamily: v('font'),
+                }, children: [rail.bands.map((b) => (_jsxs("g", { children: [_jsx("rect", { x: b.rect.x, y: b.rect.y, width: b.rect.w, height: b.rect.h, rx: 10, fill: v('surface'), stroke: v('border') }), _jsx("text", { x: b.rect.x + 10, y: b.rect.y + 14, fill: v('muted'), fontSize: 11, fontWeight: 600, letterSpacing: ".04em", children: b.label.toUpperCase() })] }, b.id))), rail.columns.map((c) => (_jsx("text", { x: c.x, y: rail.head - RAIL.cols / 2 + 4, fill: v('fg'), fontSize: 12, fontWeight: 500, textAnchor: "middle", children: c.label }, c.id))), (() => {
+                        const st = railState(rail, active ?? 0);
+                        // The lifelines run through the message rows only, so a phase header reads as one clear divider.
+                        const lines = rail.rows.flatMap((row, i) => row.kind === 'message' && st[i].shown ? rail.columns.map((c) => `M ${c.x} ${st[i].y} V ${st[i].y + RAIL.row}`) : []);
+                        return _jsx("path", { d: lines.join(' '), stroke: v('border'), strokeDasharray: "2 3" });
+                    })(), (() => {
+                        const st = railState(rail, active ?? 0);
+                        return rail.rows.map((row, i) => {
+                            if (!st[i].shown)
+                                return null;
+                            const y = st[i].y;
+                            if (row.kind === 'phase') {
+                                const open = !rail.folds || row.step === active;
+                                const playing = row.step === active ? rail.rows.find((r) => r.kind === 'message' && r.step === active && r.beat === beat) : undefined;
+                                return (_jsxs("g", { style: { cursor: open ? undefined : 'pointer' }, onClick: open ? undefined : () => goTo(row.step, 0), children: [_jsx("text", { x: RAIL.pad, y: y + 19, fill: open ? v('fg') : v('muted'), fontSize: 13, fontWeight: 600, fontFamily: MONO, children: open ? row.label : foldedLabel(row) }), _jsx("path", { d: `M ${open ? row.line.open : row.line.folded} ${y + 15} H ${row.line.end}`, stroke: v('border') }), playing?.kind === 'message' && (_jsxs("text", { x: rail.width - RAIL.pad, y: y + 19, fill: v('muted'), fontSize: 11, fontWeight: 600, textAnchor: "end", children: [still ? rail.total : playing.n, " of ", rail.total] }))] }, `p${i}`));
+                            }
+                            const state = still
+                                ? 'done'
+                                : active == null || row.step > active || (row.step === active && row.beat > beat)
+                                    ? 'next'
+                                    : row.step === active && row.beat === beat
+                                        ? 'now'
+                                        : 'done';
+                            const on = state === 'now' ||
+                                hoverEdge === row.edge ||
+                                (hover != null && [rail.columns[row.from].id, rail.columns[row.to].id].includes(hover));
+                            const [x1, x2] = [rail.columns[row.from].x, rail.columns[row.to].x];
+                            const ly = y + RAIL.row / 2;
+                            const g = row.group != null ? rail.groups[row.group] : null;
+                            return (_jsxs("g", { "data-rail-row": row.n, "data-state": state, opacity: state === 'next' && !on ? 0.45 : 1, style: { cursor: 'pointer' }, onClick: () => goTo(row.step, row.beat), onMouseEnter: () => setHoverEdge(row.edge), onMouseLeave: () => setHoverEdge(null), children: [g && g.rows[0] === i && (_jsx("rect", { x: groupBox(rail, g).x, y: y + groupBox(rail, g).y, width: groupBox(rail, g).w, height: groupBox(rail, g).h, rx: 6, fill: `color-mix(in srgb, ${v('accent')} 8%, ${v('bg')})`, stroke: v('accent'), strokeDasharray: "3 3" })), _jsx("path", { d: `M ${x1} ${ly} H ${x2}`, fill: "none", stroke: on ? v('accent') : v('muted'), strokeWidth: on ? EDGE_ON : EDGE_OFF, strokeDasharray: row.async ? '4 3' : undefined, markerEnd: "url(#flowfig-rail-arrow)" }), row.async &&
+                                        (() => {
+                                            const tagW = ASYNC_TAG_W;
+                                            // The tag sits on the tail side of the pill, so it never hides the arrowhead.
+                                            const tx = !row.pill ? (x1 + x2) / 2 - tagW / 2 : x2 > x1 ? row.pill.x - tagW - 4 : row.pill.x + row.pill.w + 4;
+                                            return (_jsxs(_Fragment, { children: [_jsx("rect", { x: tx, y: ly - 6, width: tagW, height: 12, rx: 4, fill: v('bg') }), _jsx("rect", { x: tx, y: ly - 6, width: tagW, height: 12, rx: 4, fill: TONES.gray, fillOpacity: 0.15 }), _jsx("text", { x: tx + tagW / 2, y: ly + 3, fill: TONES.gray, fontSize: 9, fontWeight: 600, letterSpacing: ".03em", textAnchor: "middle", "data-fig-tag": true, children: "ASYNC" })] }));
+                                        })(), row.pill && (_jsxs("g", { "data-fig-label": `rail:${row.n}`, children: [_jsx("rect", { x: row.pill.x, y: ly - 9, width: row.pill.w, height: 18, rx: 9, fill: on ? v('accent') : v('bg'), stroke: on ? v('accent') : v('border') }), _jsx("text", { x: row.pill.x + row.pill.w / 2, y: ly + 4, fill: on ? ON_ACCENT : v('muted'), fontSize: 11, fontFamily: MONO, textAnchor: "middle", children: row.text })] }))] }, `m${i}`));
+                        });
+                    })(), _jsx("defs", { children: _jsx("marker", { id: "flowfig-rail-arrow", viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "7", markerHeight: "7", orient: "auto-start-reverse", children: _jsx("path", { d: "M 0 1 L 9 5 L 0 9 z", fill: v('muted') }) }) })] })), steps.length > 0 && (_jsxs("figcaption", { style: { marginTop: 14, textAlign: 'center' }, children: [_jsxs("div", { style: { display: 'flex', gap: 10, justifyContent: 'center', alignItems: 'center' }, children: [_jsx("button", { type: "button", "aria-label": playing ? 'Pause' : 'Play', title: playing ? 'Pause' : 'Play', style: iconBtn, onClick: () => setPlaying((p) => !p), children: _jsx(Icon, { d: playing ? 'M5.5 4v8M10.5 4v8' : 'M5 3.5v9l7.5-4.5z', fill: !playing }) }), _jsx("div", { role: "tablist", style: {
+                                    display: 'inline-flex',
+                                    gap: 2,
+                                    padding: 3,
+                                    borderRadius: 10,
+                                    background: v('surface'),
+                                    border: `1px solid ${v('border')}`,
+                                }, children: steps.map((s, i) => {
+                                    const on = active === i;
+                                    return (_jsxs("button", { type: "button", role: "tab", "aria-selected": on, onClick: () => {
+                                            clock.current.elapsed = 0; // replay from the start, even when it is already the active step
+                                            setActive(i);
+                                            setPlaying(true);
+                                            setBeat(0);
+                                        }, style: {
+                                            position: 'relative',
+                                            overflow: 'hidden',
+                                            font: 'inherit',
+                                            fontFamily: MONO,
+                                            fontSize: 12.5,
+                                            padding: '5px 14px',
+                                            borderRadius: 7,
+                                            border: 'none',
+                                            cursor: 'pointer',
+                                            background: on ? v('bg') : 'transparent',
+                                            color: on ? v('fg') : v('muted'),
+                                            boxShadow: on ? '0 1px 2px rgba(0,0,0,.08)' : 'none',
+                                            transition: 'background .2s, color .2s',
+                                        }, children: [s.label, on && (_jsx("div", { ref: bar, style: {
+                                                    position: 'absolute',
+                                                    left: 0,
+                                                    right: 0,
+                                                    bottom: 0,
+                                                    height: 2,
+                                                    background: v('accent'),
+                                                    transformOrigin: 'left',
+                                                    transform: 'scaleX(0)',
+                                                    opacity: playing ? 1 : 0.35,
+                                                } }))] }, i));
+                                }) }), _jsxs("button", { type: "button", "aria-label": `Speed ${rate}×, switch to ${rate === 1 ? 2 : 1}×`, title: "Playback speed", style: {
+                                    ...iconBtn,
+                                    width: 'auto',
+                                    padding: '0 10px',
+                                    font: 'inherit',
+                                    fontFamily: MONO,
+                                    fontSize: 12,
+                                    color: rate === 2 ? v('accent') : v('muted'),
+                                    borderColor: rate === 2 ? v('accent') : v('border'),
+                                }, onClick: () => setRate((r) => (r === 1 ? 2 : 1)), children: [rate, "\u00D7"] })] }), said != null && (_jsx("div", { style: {
+                            marginTop: 12,
+                            fontSize: 13.5,
+                            lineHeight: 1.5,
+                            color: v('muted'),
+                            minHeight: '3em',
+                            maxWidth: 640,
+                            marginInline: 'auto',
+                            animation: 'flowfig-in .35s ease-out',
+                        }, children: said }, `${active}-${saidAt}`))] }))] }));
+}
+/** A 16px stroke icon drawn from one SVG path. */
+function Icon({ d, fill = false }) {
+    return (_jsx("svg", { width: 14, height: 14, viewBox: "0 0 16 16", fill: fill ? 'currentColor' : 'none', stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: _jsx("path", { d: d }) }));
+}