flowfig 0.8.4 → 0.10.0

package/dist/geometry.js

@@ -52,9 +52,18 @@ const spanOf = (a, b, around) => {
     return [Math.min(p, q), Math.max(p, q)];
 };
 const SIDES = { above: ['t', 't'], below: ['b', 'b'], left: ['l', 'l'], right: ['r', 'r'] };
+export const samples = (curve) => {
+    const hull = curve.slice(1).reduce((s, q, k) => s + Math.hypot(q.x - curve[k].x, q.y - curve[k].y), 0);
+    const n = Math.max(32, Math.ceil(hull / 4));
+    return Array.from({ length: n + 1 }, (_, i) => bezier(curve, i / n));
+};
 export const hit = (curve, boxes, m) => {
-    const pts = Array.from({ length: 33 }, (_, i) => bezier(curve, i / 32));
-    return boxes.filter((r) => pts.some((q) => q.x > r.x - m && q.x < r.x + r.w + m && q.y > r.y - m && q.y < r.y + r.h + m));
+    const xs = curve.map((q) => q.x), ys = curve.map((q) => q.y);
+    const near = boxes.filter((r) => r.x + r.w + m > Math.min(...xs) && r.x - m < Math.max(...xs) && r.y + r.h + m > Math.min(...ys) && r.y - m < Math.max(...ys));
+    if (!near.length)
+        return [];
+    const pts = samples(curve);
+    return near.filter((r) => pts.some((q) => q.x > r.x - m && q.x < r.x + r.w + m && q.y > r.y - m && q.y < r.y + r.h + m));
 };
 /** Routes edges between measured boxes as curved SVG paths. `elbow` draws right-angle paths; `stub` splits a cross-lane edge in two. */
 export function route(edges, rects, tips = new Set(), avoid = [], area, lanes, pad = 24) {
@@ -68,7 +77,7 @@ export function route(edges, rects, tips = new Set(), avoid = [], area, lanes, p
         const others = avoid.filter((r) => r.box && !same(r, a) && !same(r, b));
         const plain = stacked ? (a.y < b.y ? ['b', 't'] : ['t', 'b']) : a.x < b.x ? ['r', 'l'] : ['l', 'r'];
         const past = hit(bend(sideMid(a, plain[0]), sideMid(b, plain[1]), plain[0]), others, -2);
-        const misses = (way, at) => [0.2, 0.5, 0.8].filter((f) => hit(arcLine(sideAt(a, SIDES[way][0], f), sideAt(b, SIDES[way][1], f), way, at), others, -2).length > 0)
+        const misses = (way, at) => [0.2, 0.5, 0.8].filter((f) => hit(arcLine(sideAt(a, SIDES[way][0], f), sideAt(b, SIDES[way][1], f), way, at), others, -6).length > 0)
             .length;
         const blocked = (way, at) => misses(way, at) === 3;
         let around = e.around;
@@ -81,7 +90,10 @@ export function route(edges, rects, tips = new Set(), avoid = [], area, lanes, p
             if (blocked(around, arc))
                 around = undefined;
         }
-        if (!around && !e.sides && !e.stub && !e.elbow && past.length) {
+        const down = e.drop && !hit(bend(sideMid(a, 'b'), sideMid(b, 't'), 'b'), others, -2).length;
+        if (e.drop && !around)
+            elbow = !down;
+        else if (!around && !e.sides && !e.stub && !e.elbow && past.length) {
             const ways = stacked ? ['left', 'right'] : ['above', 'below'];
             const tries = [];
             for (const share of [false, true])
@@ -107,7 +119,7 @@ export function route(edges, rects, tips = new Set(), avoid = [], area, lanes, p
             const [lo, hi] = spanOf(a, b, around);
             arcs.push({ way: around, lo, hi, at: arc });
         }
-        const [sa, sb] = e.sides ?? (e.stub ? ['r', 'l'] : around ? SIDES[around] : plain);
+        const [sa, sb] = e.sides ?? (e.stub ? ['r', 'l'] : down ? ['b', 't'] : around ? SIDES[around] : plain);
         picks.push({ ...e, plain, a, b, sa, sb, around, arc, elbow });
     }
     let anchor = new Map();
@@ -152,10 +164,10 @@ export function route(edges, rects, tips = new Set(), avoid = [], area, lanes, p
         if (!p.around || !s || !e)
             continue;
         const others = avoid.filter((r) => r.box && !same(r, p.a) && !same(r, p.b));
-        if (!hit(arcLine(s, e, p.around, p.arc), others, -2).length)
+        if (!hit(arcLine(s, e, p.around, p.arc), others, -6).length)
             continue;
         const [pa, pb] = p.plain;
-        const straight = hit(bend(sideMid(p.a, pa), sideMid(p.b, pb), pa), others, -2).length > 0;
+        const straight = hit(bend(sideMid(p.a, pa), sideMid(p.b, pb), pa), others, -6).length > 0;
         [p.sa, p.sb, p.around, p.arc, p.elbow, moved] = [pa, pb, undefined, undefined, p.elbow || straight, true];
     }
     if (moved)
@@ -183,7 +195,15 @@ export function route(edges, rects, tips = new Set(), avoid = [], area, lanes, p
     const outside = (way, { x, y }) => (way === 'above' ? y0 - y : way === 'below' ? y - y1 : way === 'left' ? x0 - x : x - x1);
     const roomOf = (way, at, curve, labelW) => Math.max(ARC - 6, lanes || !labelW ? outside(way, { x: at, y: at }) - 6 : outside(way, bezier(curve, 0.5)) + (upright(way) ? labelW / 2 : 9));
     const one = (p) => {
-        const s = anchor.get(p.id + ':s'), e = anchor.get(p.id + ':e');
+        const turn = !p.stub && p.elbow && p.sa === 'l';
+        const [s, e] = [anchor.get(p.id + (turn ? ':e' : ':s')), anchor.get(p.id + (turn ? ':s' : ':e'))];
+        const flip = (r) => {
+            if (!turn)
+                return r;
+            const pts = [...r.elbow].reverse();
+            const d = pts.slice(1).reduce((d, q, k) => d + (q.y === pts[k].y ? ` H ${q.x}` : ` V ${q.y}`), `M ${pts[0].x} ${pts[0].y}`);
+            return { ...r, d, curve: [...r.curve].reverse(), elbow: pts };
+        };
         if (p.stub) {
             const [ow, iw, sw] = p.stub;
             const [sb, tb] = p.bands ?? [];
@@ -336,7 +356,7 @@ export function route(edges, rects, tips = new Set(), avoid = [], area, lanes, p
         }
         if (p.elbow) {
             if (e.x - s.x < 16 && s.y === e.y) {
-                return { id: p.id, d: `M ${s.x} ${s.y} H ${e.x}`, mid: { x: (s.x + e.x) / 2, y: s.y }, curve: [s, s, e, e], elbow: [s, e] };
+                return flip({ id: p.id, d: `M ${s.x} ${s.y} H ${e.x}`, mid: { x: (s.x + e.x) / 2, y: s.y }, curve: [s, s, e, e], elbow: [s, e] });
             }
             const own = (r) => [p.a, p.b].some((q) => same(q, r));
             const all = avoid.filter((r) => !own(r));
@@ -347,14 +367,14 @@ export function route(edges, rects, tips = new Set(), avoid = [], area, lanes, p
                 const mx = s.x + 8, ex = e.x - 8, mid = (s.y + e.y) / 2;
                 const ys = Array.from({ length: Math.floor((y1 - y0 + 24) / 4) + 1 }, (_, i) => y0 - 12 + i * 4).sort((u, w) => Math.abs(u - mid) - Math.abs(w - mid));
                 const my = ys.find((y) => vClear(mx, s.y, y) && hClear(y, ex, mx, all) && vClear(ex, y, e.y)) ?? mid;
-                return {
+                return flip({
                     id: p.id,
                     d: `M ${s.x} ${s.y} H ${mx} V ${my} H ${ex} V ${e.y} H ${e.x}`,
                     mid: { x: (mx + ex) / 2, y: my },
                     curve: [s, { x: mx, y: my }, { x: ex, y: my }, e],
                     elbow: [s, { x: mx, y: s.y }, { x: mx, y: my }, { x: ex, y: my }, { x: ex, y: e.y }, e],
                     bleed: { above: room(y0 - my), below: room(my - y1) },
-                };
+                });
             }
             const mid = (s.x + e.x) / 2;
             const gap = Array.from({ length: Math.floor((e.x - s.x - 16) / 4) + 1 }, (_, i) => s.x + 8 + i * 4).sort((u, w) => Math.abs(u - mid) - Math.abs(w - mid));
@@ -383,7 +403,7 @@ export function route(edges, rects, tips = new Set(), avoid = [], area, lanes, p
                 }
                 if (best) {
                     const { x, y, ex } = best;
-                    return {
+                    return flip({
                         id: p.id,
                         d: `M ${s.x} ${s.y} H ${x} V ${y} H ${ex} V ${e.y} H ${e.x}`,
                         mid: { x: (x + ex) / 2, y },
@@ -395,18 +415,18 @@ export function route(edges, rects, tips = new Set(), avoid = [], area, lanes, p
                             above: room(y0 - y),
                             below: room(y - y1),
                         },
-                    };
+                    });
                 }
             }
             const x = mx ?? mid;
             const c1 = { x, y: s.y }, c2 = { x, y: e.y };
-            return {
+            return flip({
                 id: p.id,
                 d: `M ${s.x} ${s.y} H ${x} V ${e.y} H ${e.x}`,
                 mid: { x, y: (s.y + e.y) / 2 },
                 curve: [s, c1, c2, e],
                 elbow: [s, c1, c2, e],
-            };
+            });
         }
         if (p.around) {
             const curve = arcLine(s, e, p.around, p.arc);
@@ -456,15 +476,23 @@ export function route(edges, rects, tips = new Set(), avoid = [], area, lanes, p
     pills.push(...use.out);
     let k = 0;
     for (const [p, r] of done) {
-        if (p.labelW)
+        if (p.labelW) {
             r.mid = use.mids[k++];
+            const [l, rt] = [x0 - r.mid.x + p.labelW / 2, r.mid.x + p.labelW / 2 - x1];
+            r.bleed = { ...r.bleed, left: Math.max(r.bleed?.left ?? 0, l, 0), right: Math.max(r.bleed?.right ?? 0, rt, 0) };
+        }
         track(Array.from({ length: 33 }, (_, i) => bezier(r.curve, i / 32)));
     }
     for (const p of picks)
         if (p.stub)
             done.set(p, one(p));
-    return picks.map((p) => done.get(p));
+    return picks.map((p) => ({ ...done.get(p), ends: [`${p.from}:${p.sa}`, `${p.to}:${p.sb}`] }));
 }
+export const markSide = (id, mark, routed) => {
+    const used = new Set(routed.flatMap((r) => r.ends ?? []));
+    const order = mark === 'start' ? ['l', 't', 'b', 'r'] : ['r', 'b', 't', 'l'];
+    return order.find((s) => !used.has(`${id}:${s}`)) ?? order[0];
+};
 export const arcRoom = (routed, way) => Math.max(0, ...routed.map((r) => (r.around === way ? r.room : (r.bleed?.[way] ?? 0))));
 // The player pads its root by 4 px on a side with no detour.
 const PLAYER_PAD = 4;

package/dist/imports.d.ts

@@ -8,4 +8,5 @@ export declare const OUTSIDE = "#outside";
 export declare function resolveTs(root: string, from: string, spec: string, read: Read): string | null;
 export declare function resolvePy(root: string, from: string, mod: string, read: Read, top?: string): string | null;
 export declare function importsOf(root: string, file: CodeFile, read: Read): Import[];
+export declare function reexports(root: string, file: CodeFile, name: string, read: Read): [string | null, string][];
 export declare function leadsTo(root: string, fromPath: string, toPath: string, name: string, read?: Read, cache?: Map<string, CodeFile | null>, depth?: number): string | null;

package/dist/imports.js

@@ -172,7 +172,7 @@ export function importsOf(root, file, read) {
     }
     return out;
 }
-function reexports(root, file, name, read) {
+export function reexports(root, file, name, read) {
     const N = esc(name);
     const out = [];
     if (name === '*')

package/dist/index.d.ts

@@ -5,4 +5,4 @@ export { LIGHT, DARK } from './model.ts';
  * The interactive player for one figure. Give it a `FlowProps` spec.
  * Use `toSvg` from `flowfig/svg` for a static animated SVG.
  */
-export declare function Flow({ layout, edges, steps: stepsIn, theme, speed, autoplay, check, rail: withRail, lanes, timeline, today, }: FlowProps): import("react").JSX.Element;
+export declare function Flow(props: FlowProps): import("react").JSX.Element;

package/dist/index.js

@@ -1,11 +1,12 @@
 'use client';
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
-import { arcRoom, avoidOf, route } from './geometry.js';
+import { Fragment, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { arcRoom, avoidOf, markSide, route } from './geometry.js';
 import { foldedLabel, groupBox, layoutRail, railState, RAIL } from './rail.js';
 import { textWidth } from './text.js';
 import { checkScene, checkSpec, checkTheme } from './check.js';
-import { ASYNC_TAG_W, BASE_RATE, CARD_LINE, CARD_PAD, EDGE_OFF, EDGE_ON, LIGHT, TONES, ON_ACCENT, toneFill, toneTint, decisions, edgeId, groupGap, isGroup, isRows, lanePlan as planLanes, laneEnd, laneBlock, STUB_ROOM, labelPillW, str, LANE_BLOCK_GAP, LANE_PAD, LANE_ROW_GAP, isLanesLayout, nodes, timelineBeats, timelineLayout, TL_AXIS_H, TL_AXIS_W, TL_BAR_H, TL_ROW_GAP, toBeat, diamondLines, diamondRoom, tightCopies, nodeWidth, labelLines, fitCap, LABEL_LINE, beatMs, STEP_HOLD_MS, playheadItem, loopStartItem, dateLabelRaised, edgeTip, } from './model.js';
+import { autoLayout, rowBreaks } from './auto.js';
+import { ASYNC_TAG_W, BASE_RATE, CARD_LINE, CARD_PAD, EDGE_OFF, EDGE_ON, LIGHT, TONES, ON_ACCENT, toneFill, toneTint, decisions, edgeId, groupGap, isGroup, isRows, lanePlan as planLanes, laneEnd, laneBlock, STUB_ROOM, labelPillW, str, altText, LANE_BLOCK_GAP, LANE_PAD, LANE_ROW_GAP, isLanesLayout, nodes, timelineBeats, timelineLayout, TL_AXIS_H, TL_AXIS_W, TL_BAR_H, TL_ROW_GAP, toBeat, diamondLines, diamondRoom, tightCopies, nodeWidth, labelLines, fitCap, LABEL_LINE, beatMs, STEP_HOLD_MS, playheadItem, loopStartItem, dateLabelRaised, edgeTip, fitScale, specKey, nextWide, } from './model.js';
 export { LIGHT, DARK } from './model.js';
 const DEFAULTS = { ...LIGHT, font: 'inherit' };
 const v = (k) => `var(--fig-${k}, ${DEFAULTS[k]})`;
@@ -42,12 +43,35 @@ const cardBody = (c) => {
             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));
         }) }));
 };
+const HIDDEN = {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    overflow: 'hidden',
+    clip: 'rect(0 0 0 0)',
+    whiteSpace: 'pre-line',
+};
 /**
  * The interactive player for one figure. Give it a `FlowProps` spec.
  * Use `toSvg` from `flowfig/svg` for a static animated SVG.
  */
-export function Flow({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, autoplay = true, check = false, rail: withRail = false, lanes, timeline, today, }) {
+export function Flow(props) {
+    const { layout, edges, steps, lanes, timeline } = props;
+    const key = useMemo(() => specKey(layout, edges, steps), [layout, edges, steps]);
+    const [narrow, setNarrow] = useState({ wide: 0, key: '' });
+    const fold = !lanes && !timeline && props.rail !== 'only';
+    const wide = fold && narrow.key === key ? narrow.wide : 0;
+    const setWide = useCallback((w) => setNarrow({ wide: w, key }), [key]);
+    const placed = useMemo(() => autoLayout({ layout: wide ? { ...layout, auto: true, direction: 'column' } : layout, edges, steps, lanes, timeline }), [wide, layout, edges, steps, lanes, timeline]);
+    return (_jsx(FlowBody, { ...props, layout: placed.layout, edges: placed.edges, written: props, wide: wide, setWide: fold ? setWide : undefined }));
+}
+// The ASYNC tag is 9 px; phone text needs 11 px.
+const RAIL_ZOOM = 11 / 9;
+function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, autoplay = true, check = false, rail: withRail = false, lanes, timeline, today, written, wide, setWide, }) {
     const tl = timeline && isLanesLayout(layout);
+    const alt = useMemo(() => altText({ layout, edges, steps: stepsIn }), [layout, edges, stepsIn]);
+    const descId = useId();
+    const tabsId = useId();
     const synthetic = tl && !stepsIn.length;
     const steps = useMemo(() => (synthetic ? timelineBeats({ layout, edges, timeline, today }) : stepsIn), [synthetic, layout, edges, timeline, today, stepsIn]);
     const [axisW, setAxisW] = useState(TL_AXIS_W);
@@ -72,6 +96,7 @@ export function Flow({ layout, edges, steps: stepsIn = NONE, theme, speed = 900,
     const firstLabel = useRef('');
     const paths = useRef({});
     const [routed, setRouted] = useState([]);
+    const markSides = new Set(nodes(layout).flatMap((n) => (n.mark ? [markSide(n.id, n.mark, routed)] : [])));
     const [extraTall, setExtraTall] = useState(new Set());
     const lanePlan = useMemo(() => lanes && !tl && isLanesLayout(layout)
         ? planLanes({ layout, edges, steps, lanes }, { floor: withRail ? (layoutRail({ layout, edges, steps, rail: true }, 560)?.width ?? 0) : 0 })
@@ -119,6 +144,11 @@ export function Flow({ layout, edges, steps: stepsIn = NONE, theme, speed = 900,
     const railOnly = withRail === 'only';
     const rail = useMemo(() => (withRail ? layoutRail({ layout, edges, steps, rail: true }, railOnly ? 560 : mapW) : null), [withRail, railOnly, layout, edges, steps, mapW]);
     const noMap = railOnly && rail != null;
+    const railPane = useRef(null);
+    const follow = useRef(true);
+    const user = useRef(false);
+    const left = useRef(0);
+    const busy = useRef(0);
     const jump = useRef(null);
     const [hoverEdge, setHoverEdge] = useState(null);
     const [still, setStill] = useState(false);
@@ -138,8 +168,14 @@ export function Flow({ layout, edges, steps: stepsIn = NONE, theme, speed = 900,
         const el = root.current, box = outer.current;
         if (!el || !box)
             return;
+        let last = '';
         const measure = () => {
-            const scale = Math.max(0.5, Math.min(1, box.clientWidth / el.offsetWidth));
+            if (!el.offsetWidth)
+                return;
+            const goal = nextWide(wide, box.clientWidth, el.offsetWidth);
+            if (setWide && goal !== wide)
+                return setWide(goal);
+            const scale = fitScale(wide, box.clientWidth, el.offsetWidth);
             setFit({ scale, height: el.offsetHeight * scale });
             setMapW(el.offsetWidth);
             if (area.current)
@@ -192,6 +228,10 @@ export function Flow({ layout, edges, steps: stepsIn = NONE, theme, speed = 900,
                 const li = layout.children.findIndex((l) => isGroup(l) && (l.id === id || l.children.some((b) => b.id === id)));
                 return laneBands[`${li}@${lanePlan?.ends.get(eid)?.[j]}`];
             };
+            const key = JSON.stringify([rects, extra, bands, laneBands, pillArea], (_k, v) => (typeof v === 'number' ? Math.round(v) : v));
+            if (key === last)
+                return;
+            last = key;
             const end = (eid, id, start) => lanePlan ? laneEnd(lanePlan, eid, id, start, (lane, b) => bands[`${lane}@${b}`], rects) : id;
             const next = route(edges.map((e, i) => ({
                 id: ids[i],
@@ -199,6 +239,7 @@ export function Flow({ layout, edges, steps: stepsIn = NONE, theme, speed = 900,
                 to: end(ids[i], e.to, false),
                 around: e.around ?? (lanePlan?.around.has(ids[i]) ? 'below' : undefined),
                 ...(tl && { sides: ['r', 'l'], elbow: true }),
+                ...(rowBreaks.has(e) && { drop: true }),
                 ...(stubs.has(ids[i]) && {
                     stub: stubs.get(ids[i]).map(labelPillW),
                     bands: [bandOf(ids[i], e.from, 0), bandOf(ids[i], e.to, 1)],
@@ -214,16 +255,38 @@ export function Flow({ layout, edges, steps: stepsIn = NONE, theme, speed = 900,
         };
         measure();
         const ro = new ResizeObserver(measure);
-        ro.observe(el);
+        ro.observe(el, { box: 'border-box' });
         ro.observe(box);
         el.querySelectorAll('[data-fig]').forEach((n) => ro.observe(n));
         return () => ro.disconnect();
-    }, [edges, ids, layout, tips, noMap, lanes, tl, axisW, lanePlan, extraTall]);
+    }, [edges, ids, layout, tips, noMap, lanes, tl, axisW, lanePlan, extraTall, wide, setWide]);
+    useEffect(() => {
+        const pane = railPane.current;
+        const n = rail?.rows.flatMap((r) => (r.kind === 'message' && r.step === active && r.beat === beat ? [r.n] : []))[0];
+        const now = wide && follow.current && n != null ? pane?.querySelector(`[data-rail-row="${n}"] path`) : null;
+        if (!pane || !now)
+            return;
+        const [p, r] = [pane.getBoundingClientRect(), now.getBoundingClientRect()];
+        user.current = false;
+        // Some browsers fire no scrollend event.
+        busy.current = performance.now() + 1000;
+        pane.scrollTo({ left: pane.scrollLeft + (r.left + r.right) / 2 - p.left - pane.clientWidth / 2, behavior: still ? 'auto' : 'smooth' });
+    }, [wide, active, beat, still, rail]);
+    useEffect(() => {
+        const pane = railPane.current;
+        if (!pane)
+            return;
+        const end = () => (busy.current = 0);
+        pane.addEventListener('scrollend', end);
+        return () => pane.removeEventListener('scrollend', end);
+    }, [rail]);
     const reported = useRef(new Set());
     useEffect(() => {
         const el = root.current, box = outer.current;
         const fig = figure.current;
-        if (!check || !fig || (!noMap && (!el || !box)))
+        if (!check || !fig || (!noMap && (!el || !box || !el.offsetWidth)))
+            return;
+        if (setWide && el && box && nextWide(wide, box.clientWidth, el.offsetWidth) !== wide)
             return;
         const base = (el ?? fig).getBoundingClientRect();
         const k = el ? base.width / el.offsetWidth : 1;
@@ -263,11 +326,15 @@ export function Flow({ layout, edges, steps: stepsIn = NONE, theme, speed = 900,
             // An SVG <text> has no CSS box, so skip clientWidth.
             (t instanceof SVGElement || t.clientWidth > 0) &&
             !t.closest('[data-fig-tag],[aria-hidden]'))
-            .map((t) => parseFloat(getComputedStyle(t).fontSize));
+            .map((t) => {
+            const svg = railPane.current?.firstElementChild;
+            const at = el?.contains(t) ? k : svg?.contains(t) && rail ? svg.getBoundingClientRect().width / rail.width : 1;
+            return parseFloat(getComputedStyle(t).fontSize) * at;
+        });
         const labels = Object.fromEntries([...fig.querySelectorAll('[data-fig-label]')].map((n) => [n.dataset.figLabel, rel(n)]));
         const lanesIn = el ? [...el.querySelectorAll('[data-fig-band]')] : [];
         const scene = {
-            width: Math.max(el?.offsetWidth ?? 0, rail?.width ?? 0),
+            width: (box ?? fig).clientWidth,
             boxes,
             ...(lanePlan?.stubs.size && {
                 lanes: lanesIn.map((n) => ({
@@ -311,11 +378,7 @@ export function Flow({ layout, edges, steps: stepsIn = NONE, theme, speed = 900,
             ],
             minFont: Math.min(...fonts),
         };
-        for (const f of [
-            ...checkSpec({ layout, edges, steps }),
-            ...checkScene(scene, { width: (box ?? fig).clientWidth }),
-            ...checkTheme(theme),
-        ]) {
+        for (const f of [...checkSpec(written), ...checkScene(scene, { width: (box ?? fig).clientWidth }), ...checkTheme(theme)]) {
             const key = f.rule + ':' + f.ids.join() + ':' + f.message;
             if (reported.current.has(key))
                 continue;
@@ -323,7 +386,7 @@ export function Flow({ layout, edges, steps: stepsIn = NONE, theme, speed = 900,
             // oxlint-disable-next-line no-console
             console.warn(`flowfig check: ${f.severity} ${f.rule}: ${f.message}`);
         }
-    }, [check, routed, layout, edges, steps, ids, theme, rail, noMap, lanePlan]);
+    }, [check, routed, written, layout, edges, steps, ids, theme, rail, noMap, lanePlan, wide, setWide]);
     useEffect(() => {
         const gs = dots.current, cs = chips.current, edgeOf = Object.fromEntries(edges.map((e, i) => [ids[i], e]));
         if (clock.current.beats !== beats) {
@@ -443,6 +506,7 @@ export function Flow({ layout, edges, steps: stepsIn = NONE, theme, speed = 900,
         return t && TONES[t];
     };
     const goTo = (step, b) => {
+        follow.current = true;
         setPlaying(true);
         if (step === active) {
             clock.current.elapsed = beats.slice(0, b).reduce((t, x) => t + beatMs(x, speed), 0);
@@ -638,15 +702,9 @@ export function Flow({ layout, edges, steps: stepsIn = NONE, theme, speed = 900,
                             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',
+                            alignItems: !item.align || item.align === 'center' ? 'center' : 'flex-' + item.align,
                             justifyContent: 'center',
-                        }, children: item.children.map((c) => renderItem(c, depth + 1)) })] }, item.id ?? depth + String(item.label)));
+                        }, children: item.children.map((c) => renderItem(c, depth + 1)) })] }, item.id ?? `group:${nodes(item)[0]?.id}`));
         }
         const lit = litNodes.has(item.id);
         const diamond = item.shape === 'decision';
@@ -701,14 +759,12 @@ export function Flow({ layout, edges, steps: stepsIn = NONE, theme, speed = 900,
                         transition: 'border-color .25s',
                     } })), item.mark && (_jsx("span", { "aria-hidden": true, style: {
                         position: 'absolute',
-                        top: '50%',
-                        transform: 'translateY(-50%)',
+                        ...markAt(markSide(item.id, item.mark, routed), item.mark === 'start' ? -18 : -20),
                         boxSizing: 'border-box',
                         borderRadius: '50%',
                         ...(item.mark === 'start'
-                            ? { left: -18, width: 10, height: 10, background: bt ?? v('accent') }
+                            ? { width: 10, height: 10, background: bt ?? v('accent') }
                             : {
-                                right: -20,
                                 width: 14,
                                 height: 14,
                                 border: `1.5px solid ${bt ?? v('accent')}`,
@@ -747,7 +803,7 @@ export function Flow({ layout, edges, steps: stepsIn = NONE, theme, speed = 900,
         background: v('bg'),
         color: v('muted'),
     };
-    return (_jsxs("figure", { ref: figure, className: "flowfig", style: {
+    return (_jsxs("figure", { ref: figure, className: "flowfig", "aria-label": alt.title, "aria-describedby": descId, style: {
             ...vars,
             position: full ? 'fixed' : 'relative',
             inset: full ? 0 : undefined,
@@ -760,7 +816,7 @@ export function Flow({ layout, edges, steps: stepsIn = NONE, theme, speed = 900,
             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: {
+        }, children: [_jsx("div", { id: descId, style: HIDDEN, children: alt.desc }), _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,
@@ -778,8 +834,8 @@ export function Flow({ layout, edges, steps: stepsIn = NONE, theme, speed = 900,
                         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',
+                    }, children: _jsx("div", { ref: outer, role: "tabpanel", id: `${tabsId}-panel`, "aria-labelledby": `${tabsId}-tab-${active ?? 0}`, style: {
+                            overflow: wide || fit.scale <= 0.5 ? 'auto' : 'hidden',
                             height: fit.scale < 1 ? fit.height : undefined,
                         }, children: _jsxs("div", { ref: root, style: {
                                 position: 'relative',
@@ -787,8 +843,8 @@ export function Flow({ layout, edges, steps: stepsIn = NONE, theme, speed = 900,
                                 margin: '0 auto',
                                 transform: fit.scale < 1 ? `scale(${fit.scale})` : undefined,
                                 transformOrigin: 'top left',
-                                paddingTop: arcRoom(routed, 'above') || 4,
-                                paddingBottom: arcRoom(routed, 'below') || 4,
+                                paddingTop: arcRoom(routed, 'above') || (markSides.has('t') ? 20 : 4),
+                                paddingBottom: arcRoom(routed, 'below') || (markSides.has('b') ? 20 : 4),
                                 paddingLeft: arcRoom(routed, 'left') || 4,
                                 paddingRight: arcRoom(routed, 'right') || 4,
                             }, children: [renderItem(layout, 0), _jsxs("svg", { style: {
@@ -869,52 +925,72 @@ export function Flow({ layout, edges, steps: stepsIn = NONE, theme, speed = 900,
                                             fontFamily: MONO,
                                             transition: 'background .25s, color .25s, opacity .25s',
                                         }, children: p.text }, p.key)));
-                                })] }) }) }) })), 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);
-                        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 tone = state === 'now' && row.tone ? TONES[row.tone] : undefined;
-                            const g = row.group != null ? rail.groups[row.group] : null;
-                            const tip = edgeTip(row.edge, edges[ids.indexOf(row.edge)].source, allBeats);
-                            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: [tip && _jsx("title", { children: tip }), 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 ? (tone ?? 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;
-                                            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 ? (tone ? toneFill(tone) : v('accent')) : v('bg'), stroke: on ? (tone ?? 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 }) }), !synthetic && (_jsx("div", { role: "tablist", style: {
+                                })] }) }) }) })), rail && (_jsx("div", { ref: railPane, onWheel: () => (user.current = true), onPointerDown: () => (user.current = true), onTouchStart: () => (user.current = true), onScroll: (e) => {
+                    const x = e.currentTarget.scrollLeft;
+                    if (user.current && x !== left.current && performance.now() > busy.current)
+                        follow.current = false;
+                    left.current = x;
+                }, style: { overflowX: wide ? 'auto' : undefined }, children: _jsxs("svg", { viewBox: `0 0 ${rail.width} ${rail.height}`, style: {
+                        display: 'block',
+                        width: wide ? rail.width * RAIL_ZOOM : '100%',
+                        maxWidth: wide ? undefined : 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);
+                            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 tone = state === 'now' && row.tone ? TONES[row.tone] : undefined;
+                                const g = row.group != null ? rail.groups[row.group] : null;
+                                const tip = edgeTip(row.edge, edges[ids.indexOf(row.edge)].source, allBeats);
+                                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: [tip && _jsx("title", { children: tip }), 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 ? (tone ?? 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;
+                                                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 ? (tone ? toneFill(tone) : v('accent')) : v('bg'), stroke: on ? (tone ?? 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: () => {
+                                    follow.current ||= !playing;
+                                    setPlaying((p) => !p);
+                                }, children: _jsx(Icon, { d: playing ? 'M5.5 4v8M10.5 4v8' : 'M5 3.5v9l7.5-4.5z', fill: !playing }) }), !synthetic && (_jsx("div", { role: "tablist", onKeyDown: (e) => {
+                                    const to = { ArrowRight: (active ?? 0) + 1, ArrowLeft: (active ?? 0) - 1, Home: 0, End: steps.length - 1 }[e.key];
+                                    if (to === undefined)
+                                        return;
+                                    e.preventDefault();
+                                    const n = (to + steps.length) % steps.length;
+                                    clock.current.elapsed = 0;
+                                    follow.current = true;
+                                    setActive(n);
+                                    setPlaying(true);
+                                    setBeat(0);
+                                    document.getElementById(`${tabsId}-tab-${n}`)?.focus();
+                                }, style: {
                                     display: 'inline-flex',
                                     gap: 2,
                                     padding: 3,
@@ -923,8 +999,9 @@ export function Flow({ layout, edges, steps: stepsIn = NONE, theme, speed = 900,
                                     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: () => {
+                                    return (_jsxs("button", { type: "button", role: "tab", "aria-selected": on, id: `${tabsId}-tab-${i}`, "aria-controls": noMap ? undefined : `${tabsId}-panel`, tabIndex: on ? 0 : -1, onClick: () => {
                                             clock.current.elapsed = 0;
+                                            follow.current = true;
                                             setActive(i);
                                             setPlaying(true);
                                             setBeat(0);
@@ -973,6 +1050,9 @@ export function Flow({ layout, edges, steps: stepsIn = NONE, theme, speed = 900,
                             animation: 'flowfig-in .35s ease-out',
                         }, children: said }, `${active}-${saidAt}`))] }))] }));
 }
+const markAt = (side, off) => side === 'l' || side === 'r'
+    ? { [side === 'l' ? 'left' : 'right']: off, top: '50%', transform: 'translateY(-50%)' }
+    : { [side === 't' ? 'top' : 'bottom']: off, left: '50%', transform: 'translateX(-50%)' };
 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 }) }));
 }