flowfig 0.4.0 → 0.6.0

package/dist/geometry.js

@@ -1,5 +1,14 @@
+import { STUB } from './model.js';
+/** The least gap between a label pill and a lane border. */
+const LABEL_CLEAR = 4;
 const cx = (r) => r.x + r.w / 2;
 const cy = (r) => r.y + r.h / 2;
+/** A point on the cubic Bézier at `t`, as `check` samples an edge. */
+const bezier = ([p0, p1, p2, p3], t) => {
+    const u = 1 - t;
+    const [a, b, c, d] = [u * u * u, 3 * u * u * t, 3 * u * t * t, t * t * t];
+    return { x: a * p0.x + b * p1.x + c * p2.x + d * p3.x, y: a * p0.y + b * p1.y + c * p2.y + d * p3.y };
+};
 // Turns edges between measured boxes into curved SVG paths.
 // Boxes stacked on top of each other connect bottom->top, otherwise side->side.
 // Several edges leaving the same side of a box are spread out so they don't overlap,
@@ -7,7 +16,12 @@ const cy = (r) => r.y + r.h / 2;
 // `elbow` draws a right-angle path, from a right end to a left end: its four curve points are the corners.
 // `sides` fixes the two sides an edge uses (a timeline uses right to left).
 // `around` makes an edge leave and enter from the top or bottom, arcing over whatever sits between.
-export function route(edges, rects, tips = new Set(), avoid = []) {
+// `bands` (with `stub`) are the lane bands of the source and of the target: each pill stays inside its band, 4 px clear of the border.
+// `labelW` is the width of an edge's label pill: a stub pill keeps clear of it.
+// `stub` (wrapped lanes: the source pill width, the target pill width, and the width of a shorter source pill) draws a short stub from the source to a pill, and from a second pill into the target.
+export function route(edges, rects, tips = new Set(), avoid = [], // what an elbow's vertical run and a stub pill must not cross (the timeline's outside labels; the boxes and gutters of lanes)
+area, // where a stub pill may sit: the lanes right of the gutter
+lanes) {
     const picks = [];
     for (const e of edges) {
         const a = rects[e.from], b = rects[e.to];
@@ -16,17 +30,19 @@ export function route(edges, rects, tips = new Set(), avoid = []) {
         const stacked = a.x < b.x + b.w && b.x < a.x + a.w;
         const [sa, sb] = e.sides
             ? e.sides
-            : e.around
-                ? e.around === 'above'
-                    ? ['t', 't']
-                    : ['b', 'b']
-                : stacked
-                    ? a.y < b.y
-                        ? ['b', 't']
-                        : ['t', 'b']
-                    : a.x < b.x
-                        ? ['r', 'l']
-                        : ['l', 'r'];
+            : e.stub
+                ? ['r', 'l']
+                : e.around
+                    ? e.around === 'above'
+                        ? ['t', 't']
+                        : ['b', 'b']
+                    : stacked
+                        ? a.y < b.y
+                            ? ['b', 't']
+                            : ['t', 'b']
+                        : a.x < b.x
+                            ? ['r', 'l']
+                            : ['l', 'r'];
         picks.push({ ...e, a, b, sa, sb });
     }
     // For every (box, side), list the edge ends that sit there, sorted by where the other end is.
@@ -67,30 +83,223 @@ export function route(edges, rects, tips = new Set(), avoid = []) {
         const [s, c1, c2, e] = curve;
         return { id, d: `M ${s.x} ${s.y} C ${c1.x} ${c1.y}, ${c2.x} ${c2.y}, ${e.x} ${e.y}`, mid, curve };
     };
-    return picks.map((p) => {
+    // Stub pills are placed after the other edges. Each pill keeps clear of `avoid`, of the edge labels, of the pills and stubs
+    // before it, and of every edge path (sampled as `check` samples it).
+    const pills = [];
+    const paths = [];
+    // The same samples as segments: a stub line must not cross one.
+    const runs = [];
+    const track = (pts) => {
+        paths.push(...pts);
+        pts.slice(1).forEach((q, i) => runs.push([pts[i], q]));
+    };
+    const inBand = (r, b) => !b || (r.x >= b.x + 4 && r.x + r.w <= b.x + b.w - 4 && r.y >= b.y + 4 && r.y + r.h <= b.y + b.h - 4);
+    const clear = (r, band) => inBand(r, band) &&
+        (!area || (r.x >= area.x && r.x + r.w <= area.x + area.w && r.y >= area.y && r.y + r.h <= area.y + area.h)) &&
+        ![...avoid, ...pills].some((q) => r.x < q.x + q.w + 2 && q.x < r.x + r.w + 2 && r.y < q.y + q.h + 2 && q.y < r.y + r.h + 2) &&
+        !paths.some((q) => q.x > r.x - 2 && q.x < r.x + r.w + 2 && q.y > r.y - 2 && q.y < r.y + r.h + 2);
+    const one = (p) => {
         const s = anchor.get(p.id + ':s'), e = anchor.get(p.id + ':e');
+        if (p.stub) {
+            // The source pill goes right of the source and the target pill left of the target, at the nearest clear place: it slides
+            // away from the box in 8 px steps, and up or down inside the band in 4 px steps. The stub then runs on a slant. The last
+            // places are below and above the box. A place is clear if the pill and its stub keep clear of everything, and the pill stays
+            // inside its band. If no place is clear, the source pill tries its shorter text. If no place is clear then, the first place
+            // stays and `check` reports it.
+            const [ow, iw, sw] = p.stub;
+            const [sb, tb] = p.bands ?? [];
+            const rows = (box, y0, band) => {
+                const ys = band
+                    ? Array.from({ length: Math.max(0, Math.floor((band.h - 26) / 4)) + 1 }, (_, i) => band.y + 4 + i * 4)
+                    : [box.y + box.h + 2, box.y - 20];
+                return [y0, ...ys.filter((y) => y !== y0)];
+            };
+            // A place and its stub. Beside the box, the stub runs from the box side to the near end of the pill. Under or over the box,
+            // it runs straight down or up between the box and the pill. `dir` is 1 for the source (box to pill), -1 for the target.
+            const place = (box, from, dir, r, side, tip) => {
+                let a, b;
+                if (side)
+                    [a, b] = [from, { x: dir > 0 ? r.x : r.x + r.w, y: r.y + 9 }];
+                else {
+                    // A diamond has its point at the middle: the stub meets the point.
+                    const x = tip ? cx(box) : Math.min(Math.max(r.x + r.w / 2, box.x + 8, r.x + 8), box.x + box.w - 8, r.x + r.w - 8);
+                    const under = r.y >= box.y + box.h;
+                    [a, b] = [
+                        { x, y: under ? box.y + box.h : box.y },
+                        { x, y: under ? r.y : r.y + r.h },
+                    ];
+                }
+                return dir > 0 ? [r, a, b] : [r, b, a];
+            };
+            const beside = (w, box, from, dir, band) => {
+                const tip = tips.has(dir > 0 ? p.from : p.to);
+                const out = [];
+                for (let dx = STUB - 8 * Math.ceil((box.w + w) / 8); dx <= STUB + 240; dx += 8)
+                    for (const y of rows(box, from.y - 9, band)) {
+                        // Closer than STUB to the box side, a pill sits under or over the box, with room for the stub.
+                        const x = dir > 0 ? from.x + dx : from.x - dx - w;
+                        if (dx < STUB && !(y >= box.y + box.h + STUB / 2 || y + 18 <= box.y - STUB / 2))
+                            continue;
+                        if (dx < STUB && tip && !(x + 8 <= cx(box) && cx(box) <= x + w - 8))
+                            continue;
+                        out.push([...place(box, from, dir, { x, y, w, h: 18 }, dx >= STUB, tip), Math.abs(dx - STUB) + Math.abs(y + 9 - from.y)]);
+                    }
+                return out.sort((m, q) => m[3] - q[3]).map(([r, a, b]) => [r, a, b]);
+            };
+            // A diamond with no room beside its point: the stub leaves the side point straight down or up, to a pill that spans its x.
+            const along = (w, box, from, dir, band) => {
+                if (!tips.has(dir > 0 ? p.from : p.to))
+                    return [];
+                const out = [];
+                for (const y of rows(box, from.y + 12, band))
+                    for (let x = from.x - w + 8; x <= from.x - 8; x += 8) {
+                        const down = y >= from.y + 12;
+                        if (!down && y + 18 > from.y - 12)
+                            continue;
+                        const r = { x, y, w, h: 18 };
+                        const [a, b] = [from, { x: from.x, y: down ? y : y + 18 }];
+                        out.push([r, ...(dir > 0 ? [a, b] : [b, a]), Math.abs(y + 9 - from.y) + Math.abs(x + w / 2 - from.x)]);
+                    }
+                return out.sort((m, q) => m[3] - q[3]).map(([r, a, b]) => [r, a, b]);
+            };
+            const outs = (w) => [
+                ...beside(w, p.a, s, 1, sb),
+                [
+                    { x: cx(p.a) - w / 2, y: p.a.y + p.a.h + STUB, w, h: 18 },
+                    { x: cx(p.a), y: p.a.y + p.a.h },
+                    { x: cx(p.a), y: p.a.y + p.a.h + STUB },
+                ],
+                [
+                    { x: cx(p.a) - w / 2, y: p.a.y - STUB - 18, w, h: 18 },
+                    { x: cx(p.a), y: p.a.y },
+                    { x: cx(p.a), y: p.a.y - STUB },
+                ],
+                ...along(w, p.a, s, 1, sb),
+            ];
+            const ins = [
+                ...beside(iw, p.b, e, -1, tb),
+                [
+                    { x: cx(p.b) - iw / 2, y: p.b.y - STUB - 18, w: iw, h: 18 },
+                    { x: cx(p.b), y: p.b.y - STUB },
+                    { x: cx(p.b), y: p.b.y },
+                ],
+                [
+                    { x: cx(p.b) - iw / 2, y: p.b.y + p.b.h + STUB, w: iw, h: 18 },
+                    { x: cx(p.b), y: p.b.y + p.b.h + STUB },
+                    { x: cx(p.b), y: p.b.y + p.b.h },
+                ],
+                ...along(iw, p.b, e, -1, tb),
+            ];
+            const seg = (a, b) => Array.from({ length: 9 }, (_, i) => ({ x: a.x + ((b.x - a.x) * i) / 8, y: a.y + ((b.y - a.y) * i) / 8 }));
+            // A stub must not run through a box other than its own, nor through a pill or a label, nor cross an edge path.
+            const free = (a, b, own) => seg(a, b).every((q) => ![...avoid, ...pills].some((r) => r !== own && q.x > r.x + 2 && q.x < r.x + r.w - 2 && q.y > r.y + 2 && q.y < r.y + r.h - 2));
+            const whole = (a, b) => !runs.some(([c, d]) => crosses(a, b, c, d));
+            const fits = (own, band, strict) => ([r, a, b]) => clear(r, band) && free(a, b, own) && (!strict || whole(a, b));
+            // The first place whose stub crosses no edge path. If none, the first place that clears everything else: in a dense
+            // figure no place may avoid every edge, and `check` then warns about the crossing.
+            const first = (own, band, lists) => [true, false].flatMap((strict) => lists.map((l, i) => [l.find(fits(own, band, strict)), i, !strict])).find(([x]) => x);
+            const hit = first(p.a, sb, [outs(ow), ...(sw == null ? [] : [outs(sw)])]);
+            const cut = hit?.[1] === 1;
+            const [po, o1, o2] = hit?.[0] ?? outs(ow)[0];
+            pills.push(po);
+            track(seg(o1, o2));
+            const hit2 = first(p.b, tb, [ins]);
+            const [pi, i1, i2] = hit2?.[0] ?? ins[0];
+            pills.push(pi);
+            track(seg(i1, i2));
+            const line = (a, b) => `M ${a.x} ${a.y} L ${b.x} ${b.y}`;
+            const parts = [line(o1, o2), line(i1, i2)];
+            return {
+                id: p.id,
+                d: parts.join(' '),
+                mid: { x: po.x + po.w / 2, y: po.y + 9 },
+                curve: [o1, o1, i2, i2],
+                stub: {
+                    parts,
+                    pills: [po, pi],
+                    pts: [
+                        [o1, o2],
+                        [i1, i2],
+                    ],
+                    tight: [hit?.[2] !== false, hit2?.[2] !== false],
+                    ...(cut && { short: true }),
+                },
+            };
+        }
         if (p.elbow) {
-            // The vertical run sits at the midpoint x. Under 16 px of gap, it detours: out 8 px past the start, back to 8 px
-            // before the end, then forward into the target. A gap of 0 px or less takes the same detour.
-            // Over 16 px, it tries the midpoint, then 8 px before the end, then 8 px after the start, and takes the first that clears `avoid`.
-            const y0 = Math.min(s.y, e.y), y1 = Math.max(s.y, e.y);
-            const clear = (x) => !avoid.some((r) => x > r.x - 2 && x < r.x + r.w + 2 && y1 > r.y && y0 < r.y + r.h);
-            const mx = e.x - s.x >= 16 ? ([(s.x + e.x) / 2, e.x - 8, s.x + 8].find(clear) ?? (s.x + e.x) / 2) : s.x + 8;
-            const c1 = { x: mx, y: s.y }, c2 = { x: mx, y: e.y };
+            // Under 16 px of gap, the elbow detours: out 8 px past the start, back to 8 px before the end, then forward into the target.
+            // A gap of 0 px or less takes the same detour.
             if (e.x - s.x < 16 && s.y === e.y) {
                 // One row: a straight line, since a detour would only double back.
-                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] };
+                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] };
             }
             if (e.x - s.x < 16) {
-                const ex = e.x - 8, my = (s.y + e.y) / 2;
+                const mx = s.x + 8, ex = e.x - 8, my = (s.y + e.y) / 2;
                 return {
                     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],
                 };
             }
-            return { id: p.id, d: `M ${s.x} ${s.y} H ${mx} V ${e.y} H ${e.x}`, mid: { x: mx, y: (s.y + e.y) / 2 }, curve: [s, c1, c2, e] };
+            // Over 16 px, the vertical run tries the midpoint, 8 px before the end, 8 px after the start, then any x in the gap.
+            // A vertical run keeps clear of every label and box; a horizontal run keeps clear of every box but the two ends.
+            const own = (r) => [p.a, p.b].some((q) => q.x === r.x && q.y === r.y && q.w === r.w && q.h === r.h);
+            const all = avoid.filter((r) => !own(r));
+            const boxes = all.filter((r) => r.box);
+            // `m` is the margin: 2 px in the gap, 8 px on a detour, so a detour does not run along a box side.
+            const vClear = (x, ya, yb, m = 2) => !all.some((r) => x > r.x - m && x < r.x + r.w + m && Math.max(ya, yb) > r.y && Math.min(ya, yb) < r.y + r.h);
+            const hClear = (y, xa, xb, list = boxes, m = 2) => !list.some((r) => y > r.y - m && y < r.y + r.h + m && Math.max(xa, xb) > r.x && Math.min(xa, xb) < r.x + r.w);
+            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));
+            const mx = [mid, e.x - 8, s.x + 8, ...gap].find((x) => vClear(x, s.y, e.y) && hClear(s.y, s.x, x) && hClear(e.y, x, e.x));
+            if (mx == null && boxes.length) {
+                // No x in the gap is clear: the elbow goes around. It runs right past the boxes in its way, along a clear row, back to
+                // a clear x at or before 8 px before the target, then down or up and forward into the target. The shortest clear
+                // detour wins; ties take the row nearest the middle.
+                const right = Math.max(...boxes.map((r) => r.x + r.w)) + 12;
+                const left = Math.min(...boxes.map((r) => r.x));
+                const [top, bottom] = [Math.min(...boxes.map((r) => r.y)) - 12, Math.max(...boxes.map((r) => r.y + r.h)) + 12];
+                let best;
+                // ponytail: a grid search in 4 px steps, about 10^5 tries for a figure the size of the roadmap.
+                for (let x = s.x + 8; x <= right; x += 4) {
+                    if (!hClear(s.y, s.x, x))
+                        continue;
+                    for (let ex = e.x - 8; ex >= left; ex -= 4) {
+                        if (!hClear(e.y, ex, e.x))
+                            continue;
+                        for (let y = top; y <= bottom; y += 4) {
+                            const len = x - s.x + Math.abs(y - s.y) + Math.abs(x - ex) + Math.abs(e.y - y) + e.x - ex;
+                            const off = Math.abs(y - (s.y + e.y) / 2);
+                            if (best && (len > best.len || (len === best.len && off >= best.off)))
+                                continue;
+                            if (vClear(x, s.y, y, 8) && hClear(y, x, ex, all, 8) && vClear(ex, y, e.y))
+                                best = { len, off, x, y, ex };
+                        }
+                    }
+                }
+                if (best) {
+                    const { x, y, ex } = best;
+                    return {
+                        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 },
+                        curve: [s, { x, y }, { x: ex, y }, e],
+                        elbow: [s, { x, y: s.y }, { x, y }, { x: ex, y }, { x: ex, y: e.y }, e],
+                    };
+                }
+            }
+            // If no path is clear, the midpoint stays and `check` reports the crossing.
+            const x = mx ?? mid;
+            const c1 = { x, y: s.y }, c2 = { x, y: e.y };
+            return {
+                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) {
             // ponytail: arcs 50px past the two ends' boxes; a taller box in between can still be crossed.
@@ -103,5 +312,60 @@ export function route(edges, rects, tips = new Set(), avoid = []) {
         const c1 = horiz ? { x: s.x + sign * k, y: s.y } : { x: s.x, y: s.y + sign * k };
         const c2 = horiz ? { x: e.x - sign * k, y: e.y } : { x: e.x, y: e.y - sign * k };
         return drawn(p.id, [s, c1, c2, e], { x: (s.x + e.x) / 2, y: (s.y + e.y) / 2 });
-    });
+    };
+    const done = new Map();
+    for (const p of picks) {
+        if (p.stub)
+            continue;
+        const r = one(p);
+        done.set(p, r);
+        if (p.labelW && lanes)
+            r.mid = labelInBand(r, p.labelW, lanes, pills);
+        if (p.labelW)
+            pills.push({ x: r.mid.x - p.labelW / 2, y: r.mid.y - 9, w: p.labelW, h: 18 });
+        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));
+}
+/** The point of the path nearest its middle where a label pill of width `w` sits inside one band, LABEL_CLEAR from the border, clear of the boxes
+ * and the earlier pills. If a short run leaves no such point, the pill keeps the x of a path point and moves up or down into the nearest
+ * band, still on the path. If that fails too, the middle. Both renderers route through this, so they place the label alike. */
+function labelInBand(r, w, { bands, boxes }, pills) {
+    const hit = (a, b, m) => a.x < b.x + b.w + m && b.x < a.x + a.w + m && a.y < b.y + b.h + m && b.y < a.y + a.h + m;
+    const ts = Array.from({ length: 65 }, (_, i) => i / 64).sort((a, b) => Math.abs(a - 0.5) - Math.abs(b - 0.5));
+    const path = ts.map((t) => bezier(r.curve, t));
+    const clear = (pill) => !boxes.some((b) => hit(pill, b, 1)) && !pills.some((b) => hit(pill, b, 1));
+    const room = (x, b) => x - w / 2 >= b.x + LABEL_CLEAR && x + w / 2 <= b.x + b.w - LABEL_CLEAR;
+    for (const q of path) {
+        const pill = { x: q.x - w / 2, y: q.y - 9, w, h: 18 };
+        const fits = bands.some((b) => room(q.x, b) && pill.y >= b.y + LABEL_CLEAR && pill.y + 18 <= b.y + b.h - LABEL_CLEAR);
+        if (fits && clear(pill))
+            return q;
+    }
+    for (const q of path)
+        for (const b of bands) {
+            if (!room(q.x, b) || b.h < 18 + LABEL_CLEAR * 2)
+                continue;
+            const y = Math.min(Math.max(q.y, b.y + LABEL_CLEAR + 9), b.y + b.h - LABEL_CLEAR - 9);
+            const pill = { x: q.x - w / 2, y: y - 9, w, h: 18 };
+            if (clear(pill) && path.some((o) => o.x >= pill.x && o.x <= pill.x + w && o.y >= pill.y && o.y <= pill.y + 18))
+                return { x: q.x, y };
+        }
+    return r.mid;
+}
+/** True if the segment a-b crosses the segment c-d. The ends of a-b are trimmed by 1.5 px, so a touch at a box side does not count. */
+export function crosses(a, b, c, d) {
+    const len = Math.hypot(b.x - a.x, b.y - a.y);
+    if (len < 4)
+        return false;
+    const t = 1.5 / len;
+    const [p, q] = [
+        { x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t },
+        { x: b.x - (b.x - a.x) * t, y: b.y - (b.y - a.y) * t },
+    ];
+    const side = (o, u, v) => Math.sign((u.x - o.x) * (v.y - o.y) - (u.y - o.y) * (v.x - o.x));
+    return side(p, q, c) * side(p, q, d) < 0 && side(c, d, p) * side(c, d, q) < 0;
 }

package/dist/guide.d.ts

@@ -1,5 +1,5 @@
 /** The full guide, as Markdown. `flowfig docs` prints it. */
-export declare const GUIDE = "# flowfig guide\n\nflowfig draws animated flow figures. A figure has boxes, the edges between the boxes, and steps. In each step, a packet moves along\nthe edges. The output is one animated SVG with no script. The SVG plays in a GitHub README, in PR and issue comments, and in blog\nposts. A figure is about 5 to 50 kB.\n\nYou write a JSON spec. You never write SVG by hand. The command `npx flowfig` checks the spec and renders it.\n\n## What flowfig draws\n\nA spec has three forms.\n\n- The map (the default). The map shows the boxes and the edges. A packet moves along an edge in each beat.\n- The map with a rail (`\"rail\": true`). The rail is a lifeline diagram under the map. It has one row for each message.\n- The rail alone (`\"rail\": \"only\"`). Use it when the reader needs only the order of the messages, for example when the map is already in the same document.\n\nUse the rail for a sequence of messages: a request lifecycle, an API call chain, or a Mermaid `sequenceDiagram`. Put each message on\nan edge. Put each phase in a step. Put messages that run at the same time in one beat. Mark a message that does not wait for an\nanswer with `\"async\": true`: every send to a queue or a topic, every emitted event, and every call the caller does not await.\n\n## Scope: what flowfig draws and what it does not\n\nflowfig draws how something works: parts, the messages between them, and the order of the messages.\n\n| The user asks for                          | Draw                                                                                       |\n| ------------------------------------------ | ------------------------------------------------------------------------------------------ |\n| An architecture, a data flow, a pipeline   | The map. Group parts by service, network or trust boundary. `store` for data at rest.       |\n| A request lifecycle, a call chain          | The map with `\"rail\": true`. One message per hop, with its real payload in `data`.          |\n| A sequence diagram only                    | `\"rail\": \"only\"`.                                                                           |\n| A state lifecycle, a state machine         | One box per state, one edge per transition, labeled with its event. One step per path. Mark the first state with `mark: \"start\"` and each final state with `mark: \"end\"`. |\n| A flowchart with branches                  | `shape: \"decision\"` for each branch. One step per path.                                     |\n| A roadmap or a timeline | `timeline: true`. One labeled group per track, in a `column` group. Items with `from` and `to` (dates), a milestone with `from` only, an edge for a dependency, `today` for the line. A dependent item starts after its source ends. |\n| A process across roles (a ticket, an order, a refund) | `lanes: true`. One labeled group per role, in a `column` group. Put each step in the lane of the role that does it. Link each step with `source` to the SOP heading. About four time columns fit at 830 px: merge steps, give the outcomes of one decision the same `at`, or split the figure. |\n\nflowfig draws a roadmap or a timeline with dates (`timeline: true`), and converts a Mermaid `gantt` to it. flowfig does not\ndraw class or ER diagrams (fields, types, cardinality), charts of numbers or mind maps. If the user asks for one of these, say that\nflowfig does not draw it, suggest Mermaid (`classDiagram`, `erDiagram`), and draw nothing with flowfig.\n\n## Workflow\n\n### 1. Pick the scope\n\nIf the code has more than one flow, name each flow in the reply. Then draw one flow, or draw one structure view and call it a\nstructure view. If the user asks for the whole system, draw one top view with groups, or a set of figures that together cover\nevery part. Keep each figure to 12 boxes or fewer.\n\n### 2. Write the fact list\n\nBefore the spec, write a list of the facts that the figure must show. Take each fact from the code and from its wiring: config\nfiles, compose files, route tables and queue bindings (or from the pasted Mermaid). Give each fact its `file:line`:\n\n- every part (service, function, store, queue, external system);\n- every call, in order, written as `caller \u2192 callee: payload (file:line of the call)`. The edge in the spec goes from that caller\n  to that callee;\n- every call that does not wait for an answer (fire and forget, a queue, a webhook, a callback), and every consumer of each queue\n  or topic;\n- every branch and every error path (a rejected input, a retry, a dead-letter path);\n- every end state.\n\nIf the code does not show a fact, leave the fact out. Do not guess a part, a name or an order.\n\n### 3. Write the spec\n\nEach fact becomes a box, an edge, a beat, a `data` card or a `show` row. Use the real names from the code as labels, and\nreal example data from the code or its tests. Keep each fact that you leave out, with the reason, for the reply.\nGive each box and edge that draws code a `source`, from the fact list: `\"src/auth/login.ts#verifyPassword\"`. A store or an outside part may have none.\nA box that draws a step from a document links to that document: `\"docs/sop/refunds.md#step-3-approve-the-refund\"`, the heading as a GitHub anchor. `verify` checks it the same way.\n\nMermaid mapping:\n\n| Mermaid                                  | flowfig                                                            |\n| ---------------------------------------- | ------------------------------------------------------------------ |\n| `participant`                            | a box                                                              |\n| `A->>B: text`                            | an edge from A to B, and a hop with `data: \"text\"`                 |\n| `B-->>A: text` (a reply)                 | a hop on the same edge with `back: true`                           |\n| `A-)B: text` (async)                     | a hop with `async: true`                                           |\n| `par ... and ... end`                    | the hops of all branches in one beat                               |\n| `alt` / `opt`                            | one step per path                                                  |\n| `stateDiagram` states and transitions    | boxes, and edges labeled with the event                            |\n\n### 4. Render, then fix\n\n```bash\nnpx flowfig - out.svg <<'SPEC'\n{ \"props\": { \"layout\": ..., \"edges\": [...], \"steps\": [...] } }\nSPEC\n```\n\nThe quoted `<<'SPEC'` heredoc passes the JSON with no change. The command checks the spec first. If the check finds an error, the\ncommand writes no SVG and lists the faults. Fix each fault and render again.\n\n- Fix a layout fault by changing the layout first: put parts in rows or columns, route an edge `around`, or change a gap.\n  Never remove a fact from the fact list to pass the check. If you must remove one, name it in the reply.\n- If `small-text` appears, the figure is too wide. Put the parts in two rows, move a detail from `label` to `sub`, or split\n  the figure. Use more steps in one figure before you make a second figure. Keep the real name from the code in the label:\n  `ReportsController` stays `ReportsController`, not `Controller`. Do not change `--width` to pass the check: the\n  reader sees the figure at the real page width.\n- Fix every other warning, or tell the user why it stays.\n- Do not use `--no-check` to hide a fault.\n\n### 5. Read the figure back\n\nRun `npx flowfig --spec out.svg`. Compare the spec with the fact list. Check that each edge goes from the caller to the callee\nthat its fact names. Add each fact that is missing, fix each wrong edge, and render again.\n\nRun `npx flowfig verify out.svg` from the repo root. Fix each `missing-file` or `missing-symbol`.\n\n### 6. Look at the SVG\n\nThe check estimates the text width, so it cannot see everything. If you can open a browser, open the SVG and take a\nscreenshot. Wait a few seconds and take a second screenshot to see a later beat. If you cannot open a browser, write \"not\nlooked at\" in the reply. Never report a look that you did not do. A browser tool can block `file://` URLs. If it does, serve the folder\nwith `python3 -m http.server`.\n\n### 7. Write the reply\n\nThe reply has these parts, in this order:\n\n1. the path of each SVG;\n2. what each figure shows: the parts and the steps. Copy the counts from the `figure:` line of the check output. Copy every name\n   from the read-back spec. Never count from memory;\n3. the scope: the flow you drew, why, and the other flows that exist;\n4. what the figure leaves out, and why;\n5. the two check lines that the render printed, `0 errors, 0 warnings` and `figure: ...`, copied as printed, and whether\n   you looked at the SVG;\n6. one line `npx flowfig open <path>` for each SVG, at the end of the reply. Do not run that command yourself.\n\nTo change an SVG later, print its spec with `--spec`, change the spec, and render again.\n\n## Spec reference\n\n`props` has these fields.\n\n| Field      | Type                    | Meaning                                                                                        |\n| ---------- | ----------------------- | ---------------------------------------------------------------------------------------------- |\n| `layout`   | group                   | The boxes and how they line up. Required.                                                      |\n| `edges`    | edge[]                  | The arrows between the boxes. Required.                                                        |\n| `steps`    | step[]                  | The stories the figure tells. With no steps, the figure is a still map.                        |\n| `lanes`    | `true`                | Draw the layout as swimlanes: a `column` group of labeled groups, one per role. The boxes run left to right in step order. |\n| `timeline` | `true`               | Draw the layout as a timeline: one labeled group per track, with the boxes placed by their `from` and `to` dates. |\n| `today`    | `YYYY-MM-DD`          | In a `timeline` figure: the date where the today line stops. Default: the last date of the items. |\n| `rail`     | `true` or `\"only\"`      | Draw the steps as a lifeline rail under the map. `\"only\"` draws the rail without the map.      |\n| `speed`    | number                  | Milliseconds a packet takes to cross one edge. Default: 900.                                   |\n| `theme`    | object                  | Colors: `accent`, `fg`, `muted`, `bg`, `surface`, `border`, `font`. Each color you omit keeps its built-in value. |\n\n### layout\n\nThe layout is a tree. A group has `children` and these optional fields.\n\n- `id`: a name that an edge can use to reach the group as a whole.\n- `label`: the title on the frame. Only a group with a `label` gets a frame.\n- `direction`: `\"row\"` (the default) or `\"column\"`.\n- `gap`: the space between children in px. Default: 28 for a column. For a row, the gap fits the widest edge label between two children (at least 56).\n- `align`: `\"start\"`, `\"center\"` or `\"end\"`. This sets where the children line up across the direction.\n\nEvery other item is a box.\n\n| Box field | Meaning                                                                                                   |\n| --------- | --------------------------------------------------------------------------------------------------------- |\n| `id`      | Required. The name that edges and steps use. It must be unique in the figure.                             |\n| `label`   | Required. The title in the box.                                                                           |\n| `sub`     | A smaller line under the label.                                                                           |\n| `shape`   | `\"box\"` (default), `\"decision\"` (a diamond) or `\"store\"` (a database cylinder for data at rest).          |\n| `at`      | In a `lanes` figure: the time column of the box, 0 first. Default: the order in which the steps first reach the box. |\n| `from`    | In a `timeline` figure: the start of the item, or the date of a milestone, as YYYY-MM-DD. |\n| `to`      | In a `timeline` figure: the last day of the item, as YYYY-MM-DD. Without it the box is a milestone. |\n| `width`   | Width in px. This overrides the width that the layout picks.                                              |\n| `source`  | The code this draws: `path` or `path#symbol`, relative to the repo root. `flowfig verify` checks it.  |\n| `lines`   | The least number of text lines that a content card keeps. The card still grows to fit its content.        |\n| `tone`    | The state color of the box: a 1 px border and a light tint. Use `blue`, `purple`, `green`, `orange`, `red` or `gray`.                  |\n| `mark`    | `\"start\"` or `\"end\"` | A lifecycle mark: a filled dot before a start state, a ringed dot after an end state. |\n\n### edges\n\nAn edge has these fields.\n\n- `id`: the name that steps use. Default: `from->to`.\n- `from` and `to`: the `id` of a box or a group.\n- `label`: text on the edge, drawn as a small pill.\n- `around`: `\"above\"` or `\"below\"`. This routes the edge over or under the boxes in between (loops, skip-ahead edges).\n- `quiet`: if `true`, the SVG draws the edge only while a step uses it.\n- `source`: the code this edge draws, as `path` or `path#symbol`. `flowfig verify` checks it.\n\n### steps\n\nA step has `label` and `flow`. It can also have `caption` (the line under the figure while no beat has a `say`) and `nodes` (ids of\nboxes to highlight for the whole step).\n\n`flow` is a list of beats. A beat is one of these:\n\n- an edge id (a string);\n- an array of edge ids, which run at the same time;\n- an object `{ edges?, say?, show?, light?, ms? }`. A beat with no `edges` is a pause.\n\nThe beat fields:\n\n- `edges`: an edge id, a hop object, or an array of these. A hop object is `{ edge, back?, data?, tone?, async?, source? }`.\n  - `back: true` runs the packet from the `to` box to the `from` box.\n  - `data` is a small card that moves with the packet.\n  - `async: true` marks a message that does not wait for an answer. The rail draws it dashed, with an `async` tag.\n  - `tone`: the color of this hop for its beat. The packet, the data card, the edge, the label pill and the arrival box take the color. The trail after the beat stays the accent.\n    - `green`: a success or a cache hit. `orange`: a warning, a miss or a retry. `red`: an error or a rejected input.\n    - `gray`: idle or skipped. `purple`: async or background. `blue`: the default row color.\n    - If the hop has no `tone`, the arrival box uses its box `tone`, then the accent. A hop `tone` wins over a box `tone`.\n- `say`: the caption for the beat.\n- `show`: `{ boxId: [row, ...] }`. This fills the content card of each named box. The card keeps the rows until the step ends.\n- `light`: ids of boxes to highlight for this beat.\n- `ms`: how long the beat lasts. Default: the time one packet needs to cross an edge.\n\nA row of a content card is `{ tag?, tone?, text, meta?, mark?, mono? }`.\n\n- `tag`: a short colored label at the start of the line.\n- `tone`: the color of the tag: `blue` (default), `purple`, `green`, `orange`, `red` or `gray`.\n- `text`: the main text.\n- `meta`: muted text after the main text.\n- `mark`: a mark at the right end of the line, such as a check or \"new\".\n- `mono`: if `true`, the text uses a monospace font.\n\n## Content rules\n\n- Give every box a stable `id`.\n- Use `shape: \"store\"` for data at rest (a database, a cache, a file, a queue). Use a plain box for a part that does work. Use `shape: \"decision\"` for a branch.\n- Keep one clear main path, left to right. Put side parts in a `column` group.\n- Use `quiet: true` on a long edge that crosses the picture. A quiet edge needs a beat that uses it, or the check reports\n  `hidden-edge`.\n- In a rail, draw an error reply as a hop back on the same edge, with the error in `data` (`{ \"edge\": \"login\", \"back\": true,\n  \"data\": \"401 CREDENTIALS_INVALID\" }`). A call that stays inside one part (a hash check, a guard) is not a message: put it in\n  `say` or in a `show` row of that part.\n- Keep an SVG to one or two steps. The SVG plays every step in a loop, with no controls.\n- Use the React player, `<Flow {...props} />` from `flowfig`, for a page that needs tabs, pause or hover.\n\n## Example\n\n```json\n{\n  \"props\": {\n    \"layout\": {\n      \"children\": [\n        { \"id\": \"client\", \"label\": \"Browser\" },\n        { \"id\": \"api\", \"label\": \"API Server\" },\n        { \"id\": \"db\", \"label\": \"Database\", \"shape\": \"store\" }\n      ]\n    },\n    \"edges\": [\n      { \"id\": \"req\", \"from\": \"client\", \"to\": \"api\", \"label\": \"GET /users/42\" },\n      { \"id\": \"q\", \"from\": \"api\", \"to\": \"db\", \"label\": \"SELECT\" }\n    ],\n    \"steps\": [\n      {\n        \"label\": \"read\",\n        \"flow\": [\n          { \"edges\": { \"edge\": \"req\", \"data\": \"GET /users/42\" }, \"say\": \"The browser asks for user 42.\" },\n          { \"edges\": \"q\", \"show\": { \"db\": [{ \"tag\": \"row\", \"tone\": \"gray\", \"text\": \"Ada Lovelace\" }] }, \"say\": \"The API server reads the row.\" },\n          { \"edges\": { \"edge\": \"req\", \"back\": true, \"data\": \"200 OK\" }, \"say\": \"The API server sends the user.\" }\n        ]\n      }\n    ]\n  }\n}\n```\n\n## Commands\n\n```bash\nnpx flowfig - out.svg < spec.json      # render a spec from stdin\nnpx flowfig spec.json out.svg          # render a spec file\nnpx flowfig figure.ts out.svg          # render a module whose default export is a spec\nnpx flowfig check <input> [--json]     # list the faults. The input can also be an SVG that flowfig wrote.\nnpx flowfig verify <input>...          # check that the code each source names still exists\nnpx flowfig diff <old> <new>           # list what changed in the spec between two figures\nnpx flowfig --spec out.svg             # print the spec that an SVG carries\nnpx flowfig open out.svg               # show the figure in the default browser\nnpx flowfig gif out.svg [out.gif]      # write an animated GIF (needs Chrome, Edge, Chromium or Brave)\nnpx flowfig docs                       # print this guide\nnpx flowfig init                       # write these instructions for the coding agents of a repo\n```\n\nA render checks first and writes nothing on an error. `--strict` makes warnings errors. `--width` sets the page width.\n`--min-text` sets the smallest text that the reader should get. `--no-check` skips the check.\n";
+export declare const GUIDE = "# flowfig guide\n\nflowfig draws animated flow figures. A figure has boxes, the edges between the boxes, and steps. In each step, a packet moves along\nthe edges. The output is one animated SVG with no script. The SVG plays in a GitHub README, in PR and issue comments, and in blog\nposts. A figure is about 5 to 50 kB.\n\nYou write a JSON spec. You never write SVG by hand. The command `npx flowfig` checks the spec and renders it.\n\n## What flowfig draws\n\nA spec has three forms.\n\n- The map (the default). The map shows the boxes and the edges. A packet moves along an edge in each beat.\n- The map with a rail (`\"rail\": true`). The rail is a lifeline diagram under the map. It has one row for each message.\n- The rail alone (`\"rail\": \"only\"`). Use it when the reader needs only the order of the messages, for example when the map is already in the same document.\n\nUse the rail for a sequence of messages: a request lifecycle, an API call chain, or a Mermaid `sequenceDiagram`. Put each message on\nan edge. Put each phase in a step. Put messages that run at the same time in one beat. Mark a message that does not wait for an\nanswer with `\"async\": true`: every send to a queue or a topic, every emitted event, and every call the caller does not await.\n\n## Scope: what flowfig draws and what it does not\n\nflowfig draws how something works: parts, the messages between them, and the order of the messages.\n\n| The user asks for                          | Draw                                                                                       |\n| ------------------------------------------ | ------------------------------------------------------------------------------------------ |\n| An architecture, a data flow, a pipeline   | The map. Group parts by service, network or trust boundary. `store` for data at rest.       |\n| A request lifecycle, a call chain          | The map with `\"rail\": true`. One message per hop, with its real payload in `data`.          |\n| A sequence diagram only                    | `\"rail\": \"only\"`.                                                                           |\n| A state lifecycle, a state machine         | One box per state, one edge per transition, labeled with its event. One step per path. Mark the first state with `mark: \"start\"` and each final state with `mark: \"end\"`. |\n| A flowchart with branches                  | `shape: \"decision\"` for each branch. One step per path.                                     |\n| A roadmap or a timeline | `timeline: true`. One labeled group per track, in a `column` group. Items with `from` and `to` (dates), a milestone with `from` only, an edge for a dependency, `today` for the line. A dependent item starts after its source ends. |\n| A process across roles (a ticket, an order, a refund) | `lanes: true`. One labeled group per role, in a `column` group. Put each step in the lane of the role that does it. Link each step with `source` to the SOP heading. If the steps do not fit the width, flowfig wraps the time columns into blocks and links the blocks with labeled stubs, so keep the whole process in one figure. Give the outcomes of one decision the same `at`. |\n\nflowfig draws a roadmap or a timeline with dates (`timeline: true`), and converts a Mermaid `gantt` to it. flowfig does not\ndraw class or ER diagrams (fields, types, cardinality), charts of numbers or mind maps. If the user asks for one of these, say that\nflowfig does not draw it, suggest Mermaid (`classDiagram`, `erDiagram`), and draw nothing with flowfig.\n\n## Workflow\n\n### 1. Pick the scope\n\nIf the code has more than one flow, name each flow in the reply. Then draw one flow, or draw one structure view and call it a\nstructure view. If the user asks for the whole system, draw one top view with groups, or a set of figures that together cover\nevery part. Keep each figure to 12 boxes or fewer.\n\n### 2. Write the fact list\n\nBefore the spec, write a list of the facts that the figure must show. Take each fact from the code and from its wiring: config\nfiles, compose files, route tables and queue bindings (or from the pasted Mermaid). Give each fact its `file:line`:\n\n- every part (service, function, store, queue, external system);\n- every call, in order, written as `caller \u2192 callee: payload (file:line of the call)`. The edge in the spec goes from that caller\n  to that callee;\n- every call that does not wait for an answer (fire and forget, a queue, a webhook, a callback), and every consumer of each queue\n  or topic;\n- every branch and every error path (a rejected input, a retry, a dead-letter path);\n- every end state;\n- for a process document (an SOP): every deadline, every message to a person (an email, a notice), every choice that a person\n  makes, and every wait for a reply. Put each one in a box `sub`, a step `say` or a `data` card. A small fact still counts.\n  Draw each path to its end: after a rejection, also draw the next step that the document gives. Give each path its own step.\n\nIf the code does not show a fact, leave the fact out. Do not guess a part, a name or an order.\n\n### 3. Write the spec\n\nEach fact becomes a box, an edge, a beat, a `data` card or a `show` row. Use the real names from the code as labels, and\nreal example data from the code or its tests. Keep each fact that you leave out, with the reason, for the reply.\nGive each box and edge that draws code a `source`, from the fact list: `\"src/auth/login.ts#verifyPassword\"`. A store or an outside part may have none.\nA box that draws a step from a document links to that document: `\"docs/sop/refunds.md#step-3-approve-the-refund\"`, the heading as a GitHub anchor. `verify` checks it the same way.\n\nMermaid mapping:\n\n| Mermaid                                  | flowfig                                                            |\n| ---------------------------------------- | ------------------------------------------------------------------ |\n| `participant`                            | a box                                                              |\n| `A->>B: text`                            | an edge from A to B, and a hop with `data: \"text\"`                 |\n| `B-->>A: text` (a reply)                 | a hop on the same edge with `back: true`                           |\n| `A-)B: text` (async)                     | a hop with `async: true`                                           |\n| `par ... and ... end`                    | the hops of all branches in one beat                               |\n| `alt` / `opt`                            | one step per path                                                  |\n| `stateDiagram` states and transitions    | boxes, and edges labeled with the event                            |\n\nA pasted design wins over the async rule: keep each arrow as the Mermaid draws it. `A->>B` stays a plain hop, also for a\nsend to a queue. Mark a hop async only for `-)`. If you think the design is wrong, say so in the reply.\n\n### 4. Render, then fix\n\n```bash\nnpx flowfig - out.svg <<'SPEC'\n{ \"props\": { \"layout\": ..., \"edges\": [...], \"steps\": [...] } }\nSPEC\n```\n\nThe quoted `<<'SPEC'` heredoc passes the JSON with no change. The command checks the spec first. If the check finds an error, the\ncommand writes no SVG and lists the faults. Fix each fault and render again.\n\n- Fix a layout fault by changing the layout first: put parts in rows or columns, route an edge `around`, or change a gap.\n  Never remove a fact from the fact list to pass the check. If you must remove one, name it in the reply.\n- If `small-text` appears, the figure is too wide. Put the parts in two rows, move a detail from `label` to `sub`, or split\n  the figure. Use more steps in one figure before you make a second figure. Keep the real name from the code in the label:\n  `ReportsController` stays `ReportsController`, not `Controller`. Do not change `--width` to pass the check: the\n  reader sees the figure at the real page width.\n- If `text-overflow` appears, a text is wider than its box. Give the box a larger `width`, move a detail from `label` to\n  `sub`, or put the detail in the step `say`. Never cut a fact, a number or a unit to make a text fit: \"within 30 days of\n  delivery\" does not become \"within 30 days\". If you must shorten a text, keep every fact and name the change in the reply.\n- Fix every other warning, or tell the user why it stays.\n- Do not use `--no-check` to hide a fault.\n\n### 5. Read the figure back\n\nRun `npx flowfig --spec out.svg`. Compare the spec with the fact list. Check that each edge goes from the caller to the callee\nthat its fact names. Add each fact that is missing, fix each wrong edge, and render again.\n\nRun `npx flowfig verify out.svg` from the repo root. Fix each `missing-file` or `missing-symbol`.\n\n### 6. Look at the SVG\n\nThe check estimates the text width, so it cannot see everything. If you can open a browser, open the SVG and take a\nscreenshot. Wait a few seconds and take a second screenshot to see a later beat. If you cannot open a browser, write \"not\nlooked at\" in the reply. Never report a look that you did not do. A browser tool can block `file://` URLs. If it does, serve the folder\nwith `python3 -m http.server`.\n\n### 7. Write the reply\n\nThe reply has these parts, in this order:\n\n1. the path of each SVG;\n2. what each figure shows: the parts and the steps. Copy the counts from the `figure:` line of the check output. Copy every name\n   from the read-back spec. Never count from memory;\n3. the scope: the flow you drew, why, and the other flows that exist;\n4. what the figure leaves out, and why;\n5. the two check lines that the render printed, `0 errors, 0 warnings` and `figure: ...`, copied as printed, and whether\n   you looked at the SVG;\n6. one line `npx flowfig open <path>` for each SVG, at the end of the reply. Do not run that command yourself.\n\nTo change an SVG later, print its spec with `--spec`, change the spec, and render again.\n\n## Spec reference\n\n`props` has these fields.\n\n| Field      | Type                    | Meaning                                                                                        |\n| ---------- | ----------------------- | ---------------------------------------------------------------------------------------------- |\n| `layout`   | group                   | The boxes and how they line up. Required.                                                      |\n| `edges`    | edge[]                  | The arrows between the boxes. Required.                                                        |\n| `steps`    | step[]                  | The stories the figure tells. With no steps, the figure is a still map.                        |\n| `lanes`    | `true`                | Draw the layout as swimlanes: a `column` group of labeled groups, one per role. The boxes run left to right in step order. |\n| `timeline` | `true`               | Draw the layout as a timeline: one labeled group per track, with the boxes placed by their `from` and `to` dates. |\n| `today`    | `YYYY-MM-DD`          | In a `timeline` figure: the date where the today line stops. Default: the last date of the items. |\n| `rail`     | `true` or `\"only\"`      | Draw the steps as a lifeline rail under the map. `\"only\"` draws the rail without the map.      |\n| `speed`    | number                  | Milliseconds a packet takes to cross one edge. Default: 900.                                   |\n| `theme`    | object                  | Colors: `accent`, `fg`, `muted`, `bg`, `surface`, `border`, `font`. Each color you omit keeps its built-in value. |\n\n### layout\n\nThe layout is a tree. A group has `children` and these optional fields.\n\n- `id`: a name that an edge can use to reach the group as a whole.\n- `label`: the title on the frame. Only a group with a `label` gets a frame.\n- `direction`: `\"row\"` (the default) or `\"column\"`.\n- `gap`: the space between children in px. Default: 28 for a column. For a row, the gap fits the widest edge label between two children (at least 56).\n- `align`: `\"start\"`, `\"center\"` or `\"end\"`. This sets where the children line up across the direction.\n\nEvery other item is a box.\n\n| Box field | Meaning                                                                                                   |\n| --------- | --------------------------------------------------------------------------------------------------------- |\n| `id`      | Required. The name that edges and steps use. It must be unique in the figure.                             |\n| `label`   | Required. The title in the box.                                                                           |\n| `sub`     | A smaller line under the label.                                                                           |\n| `shape`   | `\"box\"` (default), `\"decision\"` (a diamond) or `\"store\"` (a database cylinder for data at rest).          |\n| `at`      | In a `lanes` figure: the time column of the box, 0 first. Default: the order in which the steps first reach the box. |\n| `from`    | In a `timeline` figure: the start of the item, or the date of a milestone, as YYYY-MM-DD. |\n| `to`      | In a `timeline` figure: the last day of the item, as YYYY-MM-DD. Without it the box is a milestone. |\n| `width`   | Width in px. This overrides the width that the layout picks.                                              |\n| `source`  | The code this draws: `path` or `path#symbol`, relative to the repo root. `flowfig verify` checks it.  |\n| `lines`   | The least number of text lines that a content card keeps. The card still grows to fit its content.        |\n| `tone`    | The state color of the box: a 1 px border and a light tint. Use `blue`, `purple`, `green`, `orange`, `red` or `gray`.                  |\n| `mark`    | `\"start\"` or `\"end\"` | A lifecycle mark: a filled dot before a start state, a ringed dot after an end state. |\n\n### edges\n\nAn edge has these fields.\n\n- `id`: the name that steps use. Default: `from->to`.\n- `from` and `to`: the `id` of a box or a group.\n- `label`: text on the edge, drawn as a small pill.\n- `around`: `\"above\"` or `\"below\"`. This routes the edge over or under the boxes in between (loops, skip-ahead edges).\n- `quiet`: if `true`, the SVG draws the edge only while a step uses it.\n- `source`: the code this edge draws, as `path` or `path#symbol`. `flowfig verify` checks it.\n\n### steps\n\nA step has `label` and `flow`. It can also have `caption` (the line under the figure while no beat has a `say`) and `nodes` (ids of\nboxes to highlight for the whole step).\n\n`flow` is a list of beats. A beat is one of these:\n\n- an edge id (a string);\n- an array of edge ids, which run at the same time;\n- an object `{ edges?, say?, show?, light?, ms? }`. A beat with no `edges` is a pause.\n\nThe beat fields:\n\n- `edges`: an edge id, a hop object, or an array of these. A hop object is `{ edge, back?, data?, tone?, async?, source? }`.\n  - `back: true` runs the packet from the `to` box to the `from` box.\n  - `data` is a small card that moves with the packet.\n  - `async: true` marks a message that does not wait for an answer. The rail draws it dashed, with an `async` tag.\n  - `tone`: the color of this hop for its beat. The packet, the data card, the edge, the label pill and the arrival box take the color. The trail after the beat stays the accent.\n    - `green`: a success or a cache hit. `orange`: a warning, a miss or a retry. `red`: an error or a rejected input.\n    - `gray`: idle or skipped. `purple`: async or background. `blue`: the default row color.\n    - If the hop has no `tone`, the arrival box uses its box `tone`, then the accent. A hop `tone` wins over a box `tone`.\n- `say`: the caption for the beat.\n- `show`: `{ boxId: [row, ...] }`. This fills the content card of each named box. The card keeps the rows until the step ends.\n- `light`: ids of boxes to highlight for this beat.\n- `ms`: how long the beat lasts. Default: the time one packet needs to cross an edge.\n\nA row of a content card is `{ tag?, tone?, text, meta?, mark?, mono? }`.\n\n- `tag`: a short colored label at the start of the line.\n- `tone`: the color of the tag: `blue` (default), `purple`, `green`, `orange`, `red` or `gray`.\n- `text`: the main text.\n- `meta`: muted text after the main text.\n- `mark`: a mark at the right end of the line, such as a check or \"new\".\n- `mono`: if `true`, the text uses a monospace font.\n\n## Content rules\n\n- Give every box a stable `id`.\n- Use `shape: \"store\"` for data at rest (a database, a cache, a file, a queue). Use a plain box for a part that does work. Use `shape: \"decision\"` for a branch.\n- Keep one clear main path, left to right. Put side parts in a `column` group.\n- Use `quiet: true` on a long edge that crosses the picture. A quiet edge needs a beat that uses it, or the check reports\n  `hidden-edge`.\n- In a rail, draw an error reply as a hop back on the same edge, with the error in `data` (`{ \"edge\": \"login\", \"back\": true,\n  \"data\": \"401 CREDENTIALS_INVALID\" }`). A call that stays inside one part (a hash check, a guard) is not a message: put it in\n  `say` or in a `show` row of that part.\n- Keep an SVG to one or two steps. The SVG plays every step in a loop, with no controls.\n- Use the React player, `<Flow {...props} />` from `flowfig`, for a page that needs tabs, pause or hover.\n\n## Example\n\n```json\n{\n  \"props\": {\n    \"layout\": {\n      \"children\": [\n        { \"id\": \"client\", \"label\": \"Browser\" },\n        { \"id\": \"api\", \"label\": \"API Server\" },\n        { \"id\": \"db\", \"label\": \"Database\", \"shape\": \"store\" }\n      ]\n    },\n    \"edges\": [\n      { \"id\": \"req\", \"from\": \"client\", \"to\": \"api\", \"label\": \"GET /users/42\" },\n      { \"id\": \"q\", \"from\": \"api\", \"to\": \"db\", \"label\": \"SELECT\" }\n    ],\n    \"steps\": [\n      {\n        \"label\": \"read\",\n        \"flow\": [\n          { \"edges\": { \"edge\": \"req\", \"data\": \"GET /users/42\" }, \"say\": \"The browser asks for user 42.\" },\n          { \"edges\": \"q\", \"show\": { \"db\": [{ \"tag\": \"row\", \"tone\": \"gray\", \"text\": \"Ada Lovelace\" }] }, \"say\": \"The API server reads the row.\" },\n          { \"edges\": { \"edge\": \"req\", \"back\": true, \"data\": \"200 OK\" }, \"say\": \"The API server sends the user.\" }\n        ]\n      }\n    ]\n  }\n}\n```\n\n## Commands\n\n```bash\nnpx flowfig - out.svg < spec.json      # render a spec from stdin\nnpx flowfig spec.json out.svg          # render a spec file\nnpx flowfig figure.ts out.svg          # render a module whose default export is a spec\nnpx flowfig check <input> [--json]     # list the faults. The input can also be an SVG that flowfig wrote.\nnpx flowfig verify <input>...          # check that the code each source names still exists\nnpx flowfig diff <old> <new>           # list what changed in the spec between two figures\nnpx flowfig --spec out.svg             # print the spec that an SVG carries\nnpx flowfig open out.svg               # show the figure in the default browser\nnpx flowfig gif out.svg [out.gif]      # write an animated GIF (needs Chrome, Edge, Chromium or Brave)\nnpx flowfig docs                       # print this guide\nnpx flowfig init                       # write these instructions for the coding agents of a repo\n```\n\nA render checks first and writes nothing on an error. `--strict` makes warnings errors. `--width` sets the page width.\n`--min-text` sets the smallest text that the reader should get. `--no-check` skips the check.\n";
 /** The short instruction text that `flowfig init` writes for each coding agent. */
 export declare const AGENT_TEXT = "# Diagrams with flowfig\n\nIf the user names no other tool, use flowfig for every diagram, figure, flowchart or picture of how something works. Do not answer with a Mermaid block or ASCII art. Use it for an architecture, a data flow or pipeline, a request lifecycle,\na call sequence, a state lifecycle, or a flowchart. flowfig also converts a pasted Mermaid flowchart, `stateDiagram` or\n`sequenceDiagram`.\n\nflowfig draws a roadmap or a timeline with dates (`timeline: true`), and converts a Mermaid `gantt` to it. flowfig does not\ndraw class or ER diagrams or charts of numbers. For those, tell the user so, suggest Mermaid (`classDiagram`, `erDiagram`),\nand draw nothing with flowfig.\n\n1. Run `npx flowfig docs` and read it. If the command fails, stop: tell the user that flowfig is not available, give them\n   `npm install --save-dev flowfig`, and draw nothing with another tool.\n2. Pick the scope. If the code has more than one flow, name each flow in the reply, then draw one flow, or draw one structure\n   view and call it a structure view. If the user asks for the whole system, draw one top view with groups, or a set of figures\n   that together cover every part. Keep each figure to 12 boxes or fewer. For a process that several roles do, use\n   `lanes: true`, one labeled group per role. For a plan or a roadmap, read the dates from the document and use `timeline: true`.\n3. Write a fact list from the code and from its wiring (config, compose, route and queue files). Write each call as\n   `caller \u2192 callee: payload (file:line of the call)`, in order. Include each async call and every consumer of a queue, each\n   branch and error path, and each end state. Leave out what the code does not show.\n4. Write the spec from the fact list, with the real names and data. Render it with `npx flowfig - out.svg <<'SPEC'` and the\n   JSON in the heredoc. Fix every fault by changing the layout first (rows, `around`, the gap). Never remove a fact to pass\n   the check; if you must remove one, name it in the reply. If `small-text` appears, use two rows or split the figure; keep\n   the real names; do not change `--width`. Give each box and edge that draws code a `source` (`file#symbol`) from the fact list.\n   Mark every send to a queue or a topic, every emitted event, and every call the caller does not await with `async: true`.\n5. Run `npx flowfig --spec out.svg` and compare it with the fact list: each edge must go from the caller to the callee that the\n   fact names. Fix each gap. Then run `npx flowfig verify out.svg` from the repo root and fix each fault.\n6. If you can open a browser, look at the SVG at two moments of the loop. If you cannot, write \"not looked at\" in the reply.\n   Never report a look that you did not do.\n7. Reply with: the SVG path; what it shows, with the counts copied from the `figure:` line and the names copied from the read-back spec; what it leaves out and why;\n   the two lines the render printed, `0 errors, 0 warnings` and `figure: ...`, copied as printed.\n   End the reply with one line `npx flowfig open <path>` for each SVG. Do not run that command yourself.\n";
 /** The description of the Claude skill: the words that make the agent load it. */

package/dist/guide.js

@@ -32,7 +32,7 @@ flowfig draws how something works: parts, the messages between them, and the ord
 | A state lifecycle, a state machine         | One box per state, one edge per transition, labeled with its event. One step per path. Mark the first state with \`mark: "start"\` and each final state with \`mark: "end"\`. |
 | A flowchart with branches                  | \`shape: "decision"\` for each branch. One step per path.                                     |
 | A roadmap or a timeline | \`timeline: true\`. One labeled group per track, in a \`column\` group. Items with \`from\` and \`to\` (dates), a milestone with \`from\` only, an edge for a dependency, \`today\` for the line. A dependent item starts after its source ends. |
-| A process across roles (a ticket, an order, a refund) | \`lanes: true\`. One labeled group per role, in a \`column\` group. Put each step in the lane of the role that does it. Link each step with \`source\` to the SOP heading. About four time columns fit at 830 px: merge steps, give the outcomes of one decision the same \`at\`, or split the figure. |
+| A process across roles (a ticket, an order, a refund) | \`lanes: true\`. One labeled group per role, in a \`column\` group. Put each step in the lane of the role that does it. Link each step with \`source\` to the SOP heading. If the steps do not fit the width, flowfig wraps the time columns into blocks and links the blocks with labeled stubs, so keep the whole process in one figure. Give the outcomes of one decision the same \`at\`. |
 
 flowfig draws a roadmap or a timeline with dates (\`timeline: true\`), and converts a Mermaid \`gantt\` to it. flowfig does not
 draw class or ER diagrams (fields, types, cardinality), charts of numbers or mind maps. If the user asks for one of these, say that
@@ -57,7 +57,10 @@ files, compose files, route tables and queue bindings (or from the pasted Mermai
 - every call that does not wait for an answer (fire and forget, a queue, a webhook, a callback), and every consumer of each queue
   or topic;
 - every branch and every error path (a rejected input, a retry, a dead-letter path);
-- every end state.
+- every end state;
+- for a process document (an SOP): every deadline, every message to a person (an email, a notice), every choice that a person
+  makes, and every wait for a reply. Put each one in a box \`sub\`, a step \`say\` or a \`data\` card. A small fact still counts.
+  Draw each path to its end: after a rejection, also draw the next step that the document gives. Give each path its own step.
 
 If the code does not show a fact, leave the fact out. Do not guess a part, a name or an order.
 
@@ -80,6 +83,9 @@ Mermaid mapping:
 | \`alt\` / \`opt\`                            | one step per path                                                  |
 | \`stateDiagram\` states and transitions    | boxes, and edges labeled with the event                            |
 
+A pasted design wins over the async rule: keep each arrow as the Mermaid draws it. \`A->>B\` stays a plain hop, also for a
+send to a queue. Mark a hop async only for \`-)\`. If you think the design is wrong, say so in the reply.
+
 ### 4. Render, then fix
 
 \`\`\`bash
@@ -97,6 +103,9 @@ command writes no SVG and lists the faults. Fix each fault and render again.
   the figure. Use more steps in one figure before you make a second figure. Keep the real name from the code in the label:
   \`ReportsController\` stays \`ReportsController\`, not \`Controller\`. Do not change \`--width\` to pass the check: the
   reader sees the figure at the real page width.
+- If \`text-overflow\` appears, a text is wider than its box. Give the box a larger \`width\`, move a detail from \`label\` to
+  \`sub\`, or put the detail in the step \`say\`. Never cut a fact, a number or a unit to make a text fit: "within 30 days of
+  delivery" does not become "within 30 days". If you must shorten a text, keep every fact and name the change in the reply.
 - Fix every other warning, or tell the user why it stays.
 - Do not use \`--no-check\` to hide a fault.