flowfig 0.10.0 → 0.11.0

package/README.md

@@ -65,7 +65,7 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: 22
-      - uses: iamalvisng/flowfig@v0.10.0
+      - uses: iamalvisng/flowfig@v0.11.0
         with:
           figures: 'docs/**/*.svg' # default **/*.svg
           # coverage: true # also fail the job if a figure is stale
@@ -530,7 +530,7 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: 22
-      - uses: iamalvisng/flowfig@v0.10.0
+      - uses: iamalvisng/flowfig@v0.11.0
         with:
           figures: 'docs/**/*.svg' # default **/*.svg
 ```
@@ -850,8 +850,10 @@ The player has these controls:
 - A hover on a box, an edge or a rail row with a `source` shows the `source`. The SVG shows it as a tooltip too.
 
 The player props are the spec fields. `theme` sets the colors, `speed` sets the packet time, and `autoplay={false}` stops the
-auto start. `check` runs the check rules. If a figure is wider than its container, the player shrinks the figure to half size at
-most, then scrolls. If the reader asks for reduced motion, the player shows the last beat and does not move packets.
+auto start. `check` runs the check rules. If a figure is wider than its container, the player changes the figure to fit.
+In a box under 600 px, the player keeps reader text at 11 px or more. If the map does not fit, the player draws the map as a column.
+In a box of 600 px or more, the player folds the map only when text would fall under 9 px.
+A lanes map or a timeline map stops at that size and scrolls sideways in its pane. If the reader asks for reduced motion, the player shows the last beat and does not move packets.
 
 The player has no dark theme of its own. For dark mode, set the `--fig-*` CSS variables on `.flowfig`:
 

package/dist/auto.js

@@ -3,6 +3,71 @@ const PAGE = 830, PAD = 24, SWEEPS = 8, TALL = 2.5,
 // A 20-box chain measures 105 px for each rank.
 RANK_H = 105, MIN_TEXT = 10;
 const flat = (it) => (isGroup(it) && it.label == null && it.id == null ? it.children.flatMap(flat) : [it]);
+export const rowBreaks = new WeakSet();
+const less = (p, q) => {
+    const k = p.findIndex((v, i) => v !== q[i]);
+    return k >= 0 && p[k] < q[k];
+};
+function arcFold(run, long, pos, carded, edges) {
+    const m = run.length;
+    const spans = long.map((e) => [pos.get(e.from), pos.get(e.to)].sort((p, q) => p - q));
+    const wide = new Map();
+    const width = (i, j) => wide.get(i * m + j) ?? wide.set(i * m + j, itemWidth({ direction: 'row', children: run.slice(i, j) }, carded, edges)).get(i * m + j);
+    let pick;
+    for (let code = 0; long.length <= 6 && code < 3 ** long.length; code++) {
+        const sides = spans.map((_, k) => Math.floor(code / 3 ** k) % 3);
+        const need = new Set(), full = new Set(), ban = new Set();
+        spans.forEach(([a, b], k) => {
+            if (!sides[k])
+                for (let c = a + 1; c <= b; c++)
+                    ban.add(c);
+            else
+                for (const c of sides[k] === 1 ? [a + 1, b + 1] : [a, b]) {
+                    need.add(c);
+                    if (sides[k] === 1)
+                        full.add(c);
+                }
+        });
+        const plans = [{ cost: [0, 0], from: -1 }];
+        for (let j = 1; j <= m; j++)
+            for (let i = j - 1; i >= Math.max(0, j - 4); i--) {
+                if ((i < j - 1 && need.has(i + 1)) || width(i, j) > PAGE - 2 * PAD)
+                    break;
+                const prev = plans[i];
+                if (!prev || (i && ban.has(i)) || (full.has(j) && j - i < 4))
+                    continue;
+                const cost = [prev.cost[0] + 1, Math.max(prev.cost[1], width(i, j))];
+                if (!plans[j] || less(cost, plans[j].cost))
+                    plans[j] = { cost, from: i };
+            }
+        if (!plans[m] || (pick && !less(plans[m].cost, pick.cost)))
+            continue;
+        const cuts = [];
+        for (let j = m; j > 0; j = plans[j].from)
+            cuts.unshift(plans[j].from);
+        const line = (k) => cuts.findLastIndex((c) => c <= k);
+        const rowW = (r) => width(cuts[r], cuts[r + 1] ?? m);
+        const clash = spans.some(([a, b], k) => {
+            const [ra, rb] = [line(a), line(b)];
+            const inner = Array.from({ length: rb - ra + 1 }, (_, r) => rowW(ra + r));
+            return ((!sides[k] && ra > 0 && ra < cuts.length - 1) ||
+                (sides[k] === 1 && Math.min(rowW(ra), rowW(rb)) < Math.max(...inner)) ||
+                spans.some(([p, q], l) => l > k && sides[k] && sides[k] === sides[l] && a < q && p < b));
+        });
+        if (!clash)
+            pick = { cost: plans[m].cost, cuts, sides };
+    }
+    if (!pick)
+        return undefined;
+    const top = pick.cuts[1] ?? m;
+    long.forEach((e, k) => (e.around = [pos.get(e.from) < top ? 'above' : 'below', 'right', 'left'][pick.sides[k]]));
+    const rows = pick.cuts.map((c, k) => ({ direction: 'row', children: run.slice(c, pick.cuts[k + 1] ?? m) }));
+    const line = (id) => rows.findIndex((l) => idsIn(l).includes(id));
+    for (const e of edges)
+        if (!long.includes(e) && line(e.from) >= 0 && line(e.from) < line(e.to))
+            rowBreaks.add(e);
+    return { direction: 'column', align: 'start', children: rows };
+}
 function seenOrder(fig) {
     const at = new Map();
     const byId = new Map(fig.edges.map((e) => [edgeId(e), e]));
@@ -206,18 +271,46 @@ function level(items, dir, ctx) {
         return rows;
     const out = [];
     let run = [];
-    const lines = (per) => {
-        const k = Math.ceil(run.length / per), q = Math.ceil(run.length / k);
-        return Array.from({ length: k }, (_, i) => ({ direction: 'row', children: run.slice(i * q, (i + 1) * q) }));
+    let runAt = [];
+    const owner = new Map(via.flatMap((vs, i) => vs.map((v) => [v, pairs[i][2]])));
+    const lines = (part, per) => {
+        const k = Math.ceil(part.length / per), q = Math.ceil(part.length / k);
+        return Array.from({ length: k }, (_, i) => ({ direction: 'row', children: part.slice(i * q, (i + 1) * q) }));
+    };
+    const plain = (part) => {
+        const folded = part.length < 4
+            ? undefined
+            : [4, 3].map((per) => lines(part, per)).find((ls) => ls.every((l) => itemWidth(l, ctx.carded, ctx.edges) <= PAGE - 2 * PAD));
+        out.push(...(folded ?? part));
     };
     const flush = () => {
-        const folded = run.length < 4 ? undefined : [4, 3].map(lines).find((ls) => ls.every((l) => itemWidth(l, ctx.carded, ctx.edges) <= PAGE - 2 * PAD));
-        out.push(...(folded ?? run));
+        const pos = new Map(run.map((r, k) => [r.id, k]));
+        const long = ctx.edges.filter((e) => pos.has(e.from) && pos.has(e.to) && Math.abs(pos.get(e.from) - pos.get(e.to)) > 1);
+        const local = runAt.every((i) => kept[i].every((x) => x < n || long.includes(owner.get(x))));
+        const folded = run.length >= 4 && long.length && local ? arcFold(run, long, pos, ctx.carded, ctx.edges) : undefined;
+        if (folded)
+            out.push(folded);
+        else {
+            let part = [];
+            run.forEach((r, k) => {
+                if (kept[runAt[k]].length === 1)
+                    part.push(r);
+                else {
+                    plain(part);
+                    part = [];
+                    out.push(r);
+                }
+            });
+            plain(part);
+        }
         run = [];
+        runAt = [];
     };
     rows.forEach((r, i) => {
-        if (kept[i].length === 1 && !isGroup(r))
+        if (kept[i].filter((x) => x < n).length === 1 && !isGroup(r)) {
             run.push(r);
+            runAt.push(i);
+        }
         else {
             flush();
             out.push(r);
@@ -243,7 +336,6 @@ function smallFont(f, carded) {
         return 12;
     return f.steps?.length ? 13.5 : 14;
 }
-export const rowBreaks = new WeakSet();
 function fold(f, carded) {
     const room = (PAGE * smallFont(f, carded)) / MIN_TEXT - 2 * PAD;
     if (f.rail || itemWidth(f.layout, carded, f.edges, fitCap(f, PAGE)) <= room)
@@ -268,8 +360,11 @@ function fold(f, carded) {
             if (!plans[j] || better(cost, plans[j].cost) < 0)
                 plans[j] = { cost, from: i };
         }
-    if (!plans[n] || plans[n].cost[0] < 2)
-        return f;
+    if (!plans[n] || plans[n].cost[0] < 2) {
+        const long = f.edges.filter((e) => unit.has(e.from) && unit.has(e.to) && (e.around || Math.abs(unit.get(e.from) - unit.get(e.to)) > 1));
+        const layout = n >= 4 && long.some((e) => e.around) && !ranks.some(isGroup) ? arcFold(ranks, long, unit, carded, f.edges) : undefined;
+        return layout ? { ...f, layout } : f;
+    }
     const cuts = [];
     for (let j = n; j > 0; j = plans[j].from)
         cuts.unshift(plans[j].from);

package/dist/check.d.ts

@@ -6,8 +6,9 @@ export declare function checkSpec(fig: FlowProps): Finding[];
 export type CheckOptions = {
     width?: number;
     minText?: number;
+    auto?: boolean;
 };
-export declare function checkScene(scene: Scene, { width, minText }?: CheckOptions): Finding[];
+export declare function checkScene(scene: Scene, { width, minText, auto }?: CheckOptions): Finding[];
 /** The WCAG contrast ratio of two colors, rounded to 2 places; null if either cannot be read. */
 export declare function contrast(a: string, b: string): number | null;
 /** Text the reader cannot read: each text and background pair, in light, dark and any custom theme, needs 4.5:1 (WCAG AA). */

package/dist/check.js

@@ -209,7 +209,7 @@ const overlap = (a, b, pad) => a.x + pad < b.x + b.w - pad && b.x + pad < a.x +
 const px = (n) => Math.round(n * 10) / 10;
 // Measured corner touches go 3.5 px deep; real crossings go 24 px or more.
 const TOUCH = 6;
-export function checkScene(scene, { width = 830, minText = 10 } = {}) {
+export function checkScene(scene, { width = 830, minText = 10, auto } = {}) {
     const out = [];
     for (const b of scene.boxes)
         for (const t of b.texts) {
@@ -223,7 +223,7 @@ export function checkScene(scene, { width = 830, minText = 10 } = {}) {
         const pts = path(e);
         for (const b of scene.boxes)
             if (b.id !== e.from && b.id !== e.to && pts.some((p) => inside(p, b.rect, TOUCH)))
-                out.push(err('edge-crosses-box', [e.id, b.id], `edge "${e.id}" passes through box "${b.id}": move a box, or set "auto": true on the root layout`));
+                out.push(err('edge-crosses-box', [e.id, b.id], `edge "${e.id}" passes through box "${b.id}": move a box${auto ? '' : ', or set "auto": true on the root layout'}`));
     }
     for (const e of scene.edges) {
         const pts = path(e);
@@ -231,7 +231,7 @@ export function checkScene(scene, { width = 830, minText = 10 } = {}) {
         const ratio = drawn / Math.max(1, Math.hypot(pts.at(-1).x - pts[0].x, pts.at(-1).y - pts[0].y));
         // The README figures have a good edge at ratio 1.77 and 425 px.
         if (ratio >= 1.6 && drawn >= 600)
-            out.push(warn('long-edge', [e.id], `edge "${e.id}" is ${px(ratio)} times the straight distance between its ends: put its ends in one row or column, route it with around, or set "auto": true on the root layout`));
+            out.push(warn('long-edge', [e.id], `edge "${e.id}" is ${px(ratio)} times the straight distance between its ends: put its ends in one row or column${auto ? ', or route it with around' : ', route it with around, or set "auto": true on the root layout'}`));
     }
     const pills = scene.edges.filter((e) => e.pts && e.label);
     const under = new Set();
@@ -383,5 +383,10 @@ export function checkRendered(fig, opts, scene) {
         ids: [id],
         message: `edge "${id}" ends at a lane that no block on its side shows; the edge uses the nearest block`,
     }));
-    return [...checkSpec(fig), ...checkScene(scene, opts), ...lost, ...checkTheme({ ...fig.theme, ...opts.theme })];
+    return [
+        ...checkSpec(fig),
+        ...checkScene(scene, { ...opts, auto: opts.auto ?? fig.layout.auto }),
+        ...lost,
+        ...checkTheme({ ...fig.theme, ...opts.theme }),
+    ];
 }

package/dist/cli.js

@@ -28,6 +28,7 @@ import { loadSpec, reportLines, sortFindings, specOf, summaryLines, svgWithSpec,
 import { check, render, toSvg } from './svg.js';
 import { checkRendered } from './check.js';
 import { coverageLine, links, parseSource, unsureLines, verifyReport } from './verify.js';
+import { VERSION } from './version.js';
 import { trace, traceLines } from './trace.js';
 import { coverageLines, coverageReport } from './coverage.js';
 const USAGE = `usage: flowfig <-|spec.json|figure.ts> [out.svg] [--open]   render a figure; a spec on stdin with -
@@ -45,7 +46,8 @@ const USAGE = `usage: flowfig <-|spec.json|figure.ts> [out.svg] [--open]   rende
        flowfig open <figure.svg> [--html <path>]          show the figure in the default browser
        flowfig from-mermaid <file.mmd|file.md|-> [--out <dir>]   convert Mermaid diagrams to specs
        flowfig gif <figure.svg> [out.gif] [--step <n>] [--dark] [--fps <n>] [--scale <n>] [--mp4]   write an animated GIF
-flags for render and check: --strict (warnings are errors), --json, --width <px>, --min-text <px>, --no-check (render only), --no-verify (render only)`;
+flags for render and check: --strict (warnings are errors), --json, --width <px>, --min-text <px>, --no-check (render only), --no-verify (render only)
+flowfig --version, -v                               print the version`;
 function usage(message) {
     console.error(message);
     process.exit(2);
@@ -73,6 +75,10 @@ if (!args[0] || ['help', '--help', '-h'].includes(args[0])) {
         usage(USAGE);
     process.exit(0);
 }
+if (['--version', '-v'].includes(args[0])) {
+    console.log(VERSION);
+    process.exit(0);
+}
 if (args[0] === 'docs') {
     const topic = args[1];
     if (topic && !Object.hasOwn(TOPICS, topic))

package/dist/index.js

@@ -6,7 +6,7 @@ import { foldedLabel, groupBox, layoutRail, railState, RAIL } from './rail.js';
 import { textWidth } from './text.js';
 import { checkScene, checkSpec, checkTheme } from './check.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';
+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, shownFont, textFloor, specKey, nextWide, } from './model.js';
 export { LIGHT, DARK } from './model.js';
 const DEFAULTS = { ...LIGHT, font: 'inherit' };
 const v = (k) => `var(--fig-${k}, ${DEFAULTS[k]})`;
@@ -62,11 +62,18 @@ export function Flow(props) {
     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]);
+    const placed = useMemo(() => autoLayout({ layout: wide > 0 ? { ...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;
+// The ASYNC tag is 9 px.
+const RAIL_TEXT = 9;
+// offsetWidth is rounded, so a rect ratio reads scale 1 as 0.999.
+const shownScale = (el) => {
+    let k = 1;
+    for (let n = el; n; n = n.parentElement)
+        k *= new DOMMatrix(getComputedStyle(n).transform).a;
+    return k;
+};
 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]);
@@ -78,7 +85,7 @@ function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, au
     const area = useRef(null);
     const root = useRef(null);
     const outer = useRef(null);
-    const [fit, setFit] = useState({ scale: 1, height: 0 });
+    const [fit, setFit] = useState({ scale: 1, height: 0, scroll: false });
     const [full, setFull] = useState(false);
     useEffect(() => {
         if (!full)
@@ -96,6 +103,7 @@ function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, au
     const firstLabel = useRef('');
     const paths = useRef({});
     const [routed, setRouted] = useState([]);
+    const routedOn = useRef(new WeakMap());
     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)
@@ -145,6 +153,8 @@ function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, au
     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 [railBox, setRailBox] = useState(0);
+    const zoom = wide ? 11 / RAIL_TEXT : noMap && railBox ? textFloor(railBox) / RAIL_TEXT : 0;
     const follow = useRef(true);
     const user = useRef(false);
     const left = useRef(0);
@@ -176,13 +186,12 @@ function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, au
             if (setWide && goal !== wide)
                 return setWide(goal);
             const scale = fitScale(wide, box.clientWidth, el.offsetWidth);
-            setFit({ scale, height: el.offsetHeight * scale });
+            setFit({ scale, height: el.offsetHeight * scale, scroll: scale > box.clientWidth / el.offsetWidth });
             setMapW(el.offsetWidth);
             if (area.current)
                 setAxisW(area.current.offsetWidth);
             const base = el.getBoundingClientRect();
-            // Rects are measured unscaled: k is the scale on screen.
-            const k = base.width / el.offsetWidth;
+            const k = shownScale(el);
             const rects = {};
             el.querySelectorAll('[data-fig]').forEach((n) => {
                 const r = n.getBoundingClientRect();
@@ -246,6 +255,7 @@ function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, au
                 }),
                 ...(!tl && e.label != null && { labelW: labelPillW(str(e.label)) }),
             })), rects, tips, avoid, pillArea, lanePlan ? { bands: Object.values(laneBands), boxes: nodes(layout).flatMap((n) => (rects[n.id] ? [rects[n.id]] : [])) } : undefined);
+            routedOn.current.set(next, rects);
             setRouted(next);
             if (lanePlan) {
                 const more = [...tightCopies(layout.children, lanePlan.ends, edges, next)].filter((k) => !lanePlan.tall.has(k) && !extraTall.has(k));
@@ -263,7 +273,7 @@ function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, au
     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;
+        const now = zoom && follow.current && n != null ? pane?.querySelector(`[data-rail-row="${n}"] path`) : null;
         if (!pane || !now)
             return;
         const [p, r] = [pane.getBoundingClientRect(), now.getBoundingClientRect()];
@@ -271,25 +281,28 @@ function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, au
         // 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]);
+    }, [zoom, 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 ro = new ResizeObserver(() => setRailBox(pane.clientWidth));
+        if (noMap)
+            ro.observe(pane);
+        return () => (pane.removeEventListener('scrollend', end), ro.disconnect());
+    }, [rail, noMap]);
     const reported = useRef(new Set());
     useEffect(() => {
         const el = root.current, box = outer.current;
         const fig = figure.current;
-        if (!check || !fig || (!noMap && (!el || !box || !el.offsetWidth)))
+        if (!check || !fig || (noMap ? !railBox : !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;
+        const k = el ? shownScale(el) : 1;
         const rel = (n) => {
             const r = n.getBoundingClientRect();
             return { x: (r.left - base.left) / k, y: (r.top - base.top) / k, w: r.width / k, h: r.height / k };
@@ -306,7 +319,7 @@ function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, au
                     .filter((t) => !t.children.length && t.textContent?.trim() && t.clientWidth > 0 && !t.closest('[aria-hidden]'))
                     .map((t) => {
                     const fontSize = parseFloat(getComputedStyle(t).fontSize);
-                    if (!n.dataset.diamond)
+                    if (!n.dataset.diamond || t.closest('[data-fig-outside]'))
                         return { text: t.textContent, fontSize, room: t.clientWidth, need: t.scrollWidth };
                     const [r, range] = [rel(t), document.createRange()];
                     range.selectNodeContents(t);
@@ -320,6 +333,12 @@ function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, au
                 }),
             };
         });
+        const moved = (b) => {
+            const r = routedOn.current.get(routed)?.[b.id];
+            return !r || Math.abs(r.x - b.rect.x) > 1 || Math.abs(r.y - b.rect.y) > 1;
+        };
+        if (el && boxes.some(moved))
+            return;
         const fonts = [...fig.querySelectorAll('*')]
             .filter((t) => !t.children.length &&
             t.textContent?.trim() &&
@@ -328,8 +347,9 @@ function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, au
             !t.closest('[data-fig-tag],[aria-hidden]'))
             .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 place = el?.contains(t) ? 'map' : svg?.contains(t) && rail ? 'rail' : 'plain';
+            const railScale = svg && rail ? svg.getBoundingClientRect().width / rail.width : 1;
+            return shownFont(parseFloat(getComputedStyle(t).fontSize), place, { map: k, rail: railScale });
         });
         const labels = Object.fromEntries([...fig.querySelectorAll('[data-fig-label]')].map((n) => [n.dataset.figLabel, rel(n)]));
         const lanesIn = el ? [...el.querySelectorAll('[data-fig-band]')] : [];
@@ -378,7 +398,11 @@ function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, au
             ],
             minFont: Math.min(...fonts),
         };
-        for (const f of [...checkSpec(written), ...checkScene(scene, { width: (box ?? fig).clientWidth }), ...checkTheme(theme)]) {
+        for (const f of [
+            ...checkSpec(written),
+            ...checkScene(scene, { width: (box ?? fig).clientWidth, minText: textFloor((box ?? fig).clientWidth), auto: written.layout.auto }),
+            ...checkTheme(theme),
+        ]) {
             const key = f.rule + ':' + f.ids.join() + ':' + f.message;
             if (reported.current.has(key))
                 continue;
@@ -386,7 +410,7 @@ function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, au
             // oxlint-disable-next-line no-console
             console.warn(`flowfig check: ${f.severity} ${f.rule}: ${f.message}`);
         }
-    }, [check, routed, written, layout, edges, steps, ids, theme, rail, noMap, lanePlan, wide, setWide]);
+    }, [check, routed, written, layout, edges, steps, ids, theme, rail, noMap, railBox, 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) {
@@ -712,7 +736,7 @@ function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, au
         const card = carded.has(item.id);
         const dl = diamond && !card ? diamondLines(item, nodeWidth(item, false) + 70) : null;
         const w = diamond || card || item.width != null || str(item.label) ? nodeWidth(item, card, cap) + (diamond ? 70 : 0) : undefined;
-        const lines = w != null && !diamond && str(item.label) ? labelLines(item, w) : null;
+        const lines = w != null && str(item.label) ? labelLines(item, w) : null;
         const bt = item.tone && TONES[item.tone];
         return (_jsxs("div", { "data-fig": item.id, title: item.source, "data-diamond": diamond || undefined, onMouseEnter: () => setHover(item.id), onMouseLeave: () => setHover(null), style: {
                 position: 'relative',
@@ -835,7 +859,7 @@ function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, au
                         backgroundImage: `radial-gradient(color-mix(in srgb, ${v('fg')} 16%, transparent) 1px, transparent 1.2px)`,
                         backgroundSize: '14px 14px',
                     }, 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',
+                            overflow: wide || fit.scroll ? 'auto' : 'hidden',
                             height: fit.scale < 1 ? fit.height : undefined,
                         }, children: _jsxs("div", { ref: root, style: {
                                 position: 'relative',
@@ -930,10 +954,10 @@ function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, au
                     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: {
+                }, style: { overflowX: zoom ? '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,
+                        width: zoom ? rail.width * zoom : '100%',
+                        maxWidth: zoom ? undefined : rail.width,
                         height: 'auto',
                         margin: `${noMap ? 0 : RAIL.gap}px auto 0`,
                         overflow: 'visible',

package/dist/model.d.ts

@@ -238,7 +238,7 @@ export declare const validAt: (at: unknown) => at is number;
 /** The time column of each box: first use in the steps, then layout order. `at` wins. */
 export declare function laneColumns(fig: FlowProps): Map<string, number>;
 export declare const LABEL_LINE = 18;
-export declare const FRAME_SIDE = 18, NODE_MIN_W = 100, NODE_MAX_W = 190;
+export declare const FRAME_SIDE = 18, NODE_MIN_W = 100, NODE_MAX_W = 190, DIAMOND_MAX_W = 170;
 export declare const LANE_BLOCK_GAP = 40;
 export declare const STUB = 12, STUB_CLEAR = 8, STUB_ROOM = 30;
 /** The width of a box as the SVG draws it, before a diamond adds its 70 px. */
@@ -249,13 +249,13 @@ export declare function itemWidth(item: FigNode | FigGroup, carded: {
 }, edges: FigEdge[], cap?: number): number;
 export declare function fitCap(fig: FlowProps, width: number, padding?: number): number;
 export declare const diamondRoom: (w: number, h: number, far: number) => number;
-/** The lines of a diamond with no card. The diamond grows 15 px for each sub line that wraps. */
 export declare function diamondLines(item: FigNode, w: number): {
     h: number;
     label: {
+        text: string;
         dy: number;
         far: number;
-    };
+    }[];
     subs: {
         text: string;
         dy: number;
@@ -361,5 +361,10 @@ export declare const altText: (fig: FlowProps) => {
     desc: string;
 };
 export declare const specKey: (...parts: unknown[]) => string;
+export declare const textFloor: (box: number) => 9 | 11;
 export declare const fitScale: (wide: number, box: number, map: number) => number;
+export declare const shownFont: (size: number, place: 'map' | 'rail' | 'plain', scale: {
+    map: number;
+    rail: number;
+}) => number;
 export declare const nextWide: (wide: number, box: number, map: number) => number;

package/dist/model.js

@@ -95,7 +95,7 @@ export function laneColumns(fig) {
     return cols;
 }
 export const LABEL_LINE = 18;
-export const FRAME_SIDE = 18, NODE_MIN_W = 100, NODE_MAX_W = 190;
+export const FRAME_SIDE = 18, NODE_MIN_W = 100, NODE_MAX_W = 190, DIAMOND_MAX_W = 170;
 export const LANE_BLOCK_GAP = 40;
 export const STUB = 12, STUB_CLEAR = 8, STUB_ROOM = 30;
 /** The width of a box as the SVG draws it, before a diamond adds its 70 px. */
@@ -106,14 +106,16 @@ export function nodeWidth(item, carded, cap = NODE_MAX_W) {
         return CARD_WIDTH;
     const label = textWidth(str(item.label), 14) + 32;
     const sub = textWidth(str(item.sub), 12) + 32;
-    return Math.min(item.shape === 'decision' ? NODE_MAX_W : cap, Math.max(NODE_MIN_W, label, sub));
+    return Math.min(item.shape === 'decision' ? DIAMOND_MAX_W : cap, Math.max(NODE_MIN_W, label, sub));
 }
 export function labelLines(item, w) {
     const label = str(item.label);
-    if (item.shape === 'decision' || textWidth(label, 14) <= w - 32 + 0.5)
+    if (item.shape === 'decision')
+        return wrap(label, w - 102 + 0.5, 14);
+    if (textWidth(label, 14) <= w - 32 + 0.5)
         return [label];
     const lines = wrap(label, w - 32, 14);
-    return lines.length === 2 && lines.every((l) => textWidth(l, 14) <= w - 32) ? lines : [label];
+    return lines.every((l) => textWidth(l, 14) <= w - 32) ? lines : [label];
 }
 export function itemWidth(item, carded, edges, cap = NODE_MAX_W) {
     if (!isGroup(item))
@@ -137,21 +139,28 @@ export function fitCap(fig, width, padding = 24) {
     return cap;
 }
 export const diamondRoom = (w, h, far) => w * Math.max(0, 1 - far / (h / 2)) - 8;
-/** The lines of a diamond with no card. The diamond grows 15 px for each sub line that wraps. */
 export function diamondLines(item, w) {
     const sub = item.sub ? str(item.sub) : '';
-    for (let n = sub ? 1 : 0;; n++) {
-        const h = 62 + 15 * n;
-        const dy0 = n ? -2 - 7.5 * (n - 1) : 5;
-        const at = (dy, size) => Math.max(Math.abs(dy - 0.75 * size), dy + 0.25 * size);
-        const last = n ? at(dy0 + 15 * n, 12) : 0;
+    const label = labelLines(item, w);
+    const k = label.length - 1;
+    const at = (dy, size) => Math.max(Math.abs(dy - 0.75 * size), dy + 0.25 * size);
+    for (let n = sub ? 1 : 0, h = 0;;) {
+        h = Math.max(h, 62 + 15 * n + LABEL_LINE * k);
+        const dy0 = (n ? 5.5 : 5) - 7.5 * n - (LABEL_LINE / 2) * k;
+        const last = n ? at(dy0 + LABEL_LINE * k + 15 * n, 12) : 0;
         const lines = n ? wrap(sub, diamondRoom(w, h, last), 12) : [];
-        if (lines.length <= n || n >= 6)
-            return {
-                h,
-                label: { dy: dy0, far: at(dy0, 14) },
-                subs: lines.map((text, k) => ({ text, dy: dy0 + 15 * (k + 1), far: at(dy0 + 15 * (k + 1), 12) })),
-            };
+        const labels = label.map((text, i) => ({ text, dy: dy0 + LABEL_LINE * i, far: at(dy0 + LABEL_LINE * i, 14) }));
+        const subs = lines.map((text, j) => ({
+            text,
+            dy: dy0 + LABEL_LINE * k + 15 * (j + 1),
+            far: at(dy0 + LABEL_LINE * k + 15 * (j + 1), 12),
+        }));
+        if (lines.length > n && n < 6)
+            n++;
+        else if (h < w && labels.some((l) => textWidth(l.text, 14) > diamondRoom(w, h, l.far)))
+            h += 4;
+        else
+            return { h, label: labels, subs };
     }
 }
 /** The lane copies whose stub end has no clear place. The renderer grows each by STUB_ROOM. */
@@ -523,7 +532,17 @@ const keyOf = (v, path) => {
     return Object.fromEntries(Object.entries(src).flatMap(([k, x]) => (k === 'ref' || k.startsWith('_') ? [] : [[k, keyOf(x, at)]])));
 };
 export const specKey = (...parts) => JSON.stringify(keyOf(parts, []));
-export const fitScale = (wide, box, map) => Math.max(wide ? 1 : 0.5, Math.min(1, box / map));
-const PHONE = 480;
-const folds = (box, map) => box < map / 2 || (box < PHONE && box < map);
-export const nextWide = (wide, box, map) => (folds(box, wide || map) ? wide || map : 0);
+// Edge labels are 11 px, the smallest reader text at scale 1.
+const READER_PX = 11;
+const DESKTOP_PX = 9;
+const DESKTOP_BOX = 600;
+export const textFloor = (box) => (box < DESKTOP_BOX ? READER_PX : DESKTOP_PX);
+export const fitScale = (wide, box, map) => Math.max(wide ? 1 : textFloor(box) / READER_PX, Math.min(1, box / map));
+export const shownFont = (size, place, scale) => size * (place === 'map' ? scale.map : place === 'rail' ? scale.rail : 1);
+const folds = (box, row) => box * READER_PX < row * textFloor(box);
+export const nextWide = (wide, box, map) => {
+    const row = Math.abs(wide) || map;
+    if (!folds(box, row))
+        return 0;
+    return wide > 0 && map >= wide ? -wide : wide || map;
+};

package/dist/svg.js

@@ -12,8 +12,12 @@ const LINE = CARD_LINE, CARD_SIDE = 8, ROW_GAP = 4;
 const SUB_LINE = 15;
 const MIN_W = 320;
 const FRAME_TOP = 37, FRAME_BOTTOM = 18;
-// The card-on fills approximate the player's 8 % accent tint.
-const vars = (t, cardOn) => `--accent:${t.accent}; --fg:${t.fg}; --muted:${t.muted}; --bg:${t.bg}; --surface:${t.surface}; --border:${t.border}; --card-on:${cardOn}; --tint:color-mix(in srgb, var(--accent) 10%, var(--surface));`;
+const color = (t, k) => {
+    const v = String(t[k]);
+    const depth = [...v].reduce((d, c) => (d < 0 ? d : d + (c === '(' ? 1 : c === ')' ? -1 : 0)), 0);
+    return /^[#a-zA-Z0-9 ,.%()/+-]+$/.test(v) && !/url\(/i.test(v) && depth === 0 ? v : LIGHT[k];
+};
+const vars = (t, cardOn) => `--accent:${color(t, 'accent')}; --fg:${color(t, 'fg')}; --muted:${color(t, 'muted')}; --bg:${color(t, 'bg')}; --surface:${color(t, 'surface')}; --border:${color(t, 'border')}; --card-on:${cardOn}; --tint:color-mix(in srgb, var(--accent) 10%, var(--surface));`;
 const content = (c) => (isRows(c) ? c : str(c));
 const esc = (s) => s.replace(/[<>&"]/g, (c) => ({ '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;' })[c]);
 const n2 = (v) => Math.round(v * 10) / 10;
@@ -293,10 +297,10 @@ export function render(spec, opts = {}) {
         const dl = dia ? diamondLines(p.item, p.w) : null;
         const room = (far) => diamondRoom(p.w, p.h, far);
         const flat = (p.item.shape === 'decision' ? p.w - 70 : p.w) - 16;
-        const texts = labelLines(p.item, p.w).map((text) => ({
+        const texts = labelLines(p.item, p.w).map((text, i) => ({
             text,
             fontSize: 14,
-            room: dl ? room(dl.label.far) : flat,
+            room: dl ? room(dl.label[i].far) : flat,
         }));
         if (dl)
             for (const l of dl.subs)
@@ -507,7 +511,7 @@ export function render(spec, opts = {}) {
         const contents = cards.get(item.id);
         const cardTop = p.y + p.h - 10 - (contents ? cardH.get(item.id) : 0);
         const dl = item.shape === 'decision' && !contents ? diamondLines(item, p.w) : null;
-        const labelY = item.shape === 'store' ? p.y + 24 + 13 : contents ? p.y + 10 + 13 : p.y + p.h / 2 + (dl ? dl.label.dy : item.sub ? -2 : 5);
+        const labelY = item.shape === 'store' ? p.y + 24 + 13 : contents ? p.y + 10 + 13 : p.y + p.h / 2 + (dl ? dl.label[0].dy : item.sub ? -2 : 5);
         const shape = item.shape === 'decision'
             ? `<polygon points="${n2(cx)},${n2(p.y)} ${n2(p.x + p.w)},${n2(p.y + p.h / 2)} ${n2(cx)},${n2(p.y + p.h)} ${n2(p.x)},${n2(p.y + p.h / 2)}" fill="${fill0}" stroke="${stroke0}"${stroke}/>`
             : item.shape === 'store'
@@ -516,7 +520,7 @@ export function render(spec, opts = {}) {
                 : `<rect x="${n2(p.x)}" y="${n2(p.y)}" width="${n2(p.w)}" height="${n2(p.h)}" rx="10" fill="${fill0}" stroke="${stroke0}"${stroke}/>`;
         const lines = labelLines(item, p.w);
         const extra = (lines.length - 1) * LABEL_LINE;
-        const firstY = item.shape === 'store' || contents ? labelY : labelY - extra / 2;
+        const firstY = item.shape === 'store' || contents || dl ? labelY : labelY - extra / 2;
         const label = lines.map((l, i) => `<text x="${n2(cx)}" y="${n2(firstY + i * LABEL_LINE)}" class="label">${esc(l)}</text>`).join('');
         const sub = dl
             ? dl.subs.map((l) => `<text x="${n2(cx)}" y="${n2(p.y + p.h / 2 + l.dy)}" class="sub">${esc(l.text)}</text>`).join('')

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.10.0";
+export declare const VERSION = "0.11.0";

package/dist/version.js

@@ -1,2 +1,2 @@
 // The release list bumps this with package.json.
-export const VERSION = '0.10.0';
+export const VERSION = '0.11.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowfig",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Your coding agent draws animated diagrams from your code, and flowfig checks each box and arrow against that code. CI fails when a diagram drifts from the code. The output is one animated SVG with no script, for a README, PR or issue. Works with Claude Code, Cursor, GitHub Copilot, Codex, Gemini CLI, Windsurf and Kiro.",
   "license": "MIT",
   "repository": {