flowfig 0.8.0 → 0.8.1

package/dist/svg.js

@@ -1,14 +1,14 @@
 // Wrapping is approximate: text is measured by character class, not by a browser.
-import { route } from './geometry.js';
+import { arcRoom, avoidOf, route } from './geometry.js';
 import { foldedLabel, groupBox, layoutRail, railState, RAIL } from './rail.js';
 import { textWidth, wrap } from './text.js';
 import { checkRendered, planFor } from './check.js';
 export { parseSource, links } from './source.js';
 export { diff, formatDiff } from './diff.js';
-import { ASYNC_TAG_W, BASE_RATE, CARD_LINE, CARD_PAD, CARD_WIDTH, DARK, EDGE_OFF, EDGE_ON, LIGHT, TONES, toneFill, toneTint, labelPillW, ON_ACCENT, str, edgeId, groupGap, isGroup, isRows, LANE_PAD, LANE_ROW_GAP, LANE_BLOCK_GAP, FRAME_SIDE, laneGutter as gutterOf, STUB_ROOM, laneBlock, laneEnd, tightCopies, nodeWidth, diamondLines, diamondRoom, isLanesLayout, timelineBeats, timelineLayout, TL_AXIS_H, TL_AXIS_W, TL_BAR_H, TL_ROW_GAP, toBeat, beatMs, STEP_HOLD_MS, playheadItem, loopStartItem, dateLabelRaised, labelSpan, outsideLabelRect, } from './model.js';
+import { ASYNC_TAG_W, BASE_RATE, CARD_LINE, CARD_PAD, CARD_WIDTH, DARK, EDGE_OFF, EDGE_ON, LIGHT, TONES, toneFill, toneTint, labelPillW, ON_ACCENT, str, edgeId, groupGap, isGroup, isRows, LANE_PAD, LANE_ROW_GAP, LANE_BLOCK_GAP, FRAME_SIDE, laneGutter as gutterOf, STUB_ROOM, laneBlock, laneEnd, tightCopies, LABEL_LINE, itemWidth, labelLines, fitCap, diamondLines, diamondRoom, isLanesLayout, timelineBeats, timelineLayout, TL_AXIS_H, TL_AXIS_W, TL_BAR_H, TL_ROW_GAP, toBeat, beatMs, STEP_HOLD_MS, playheadItem, loopStartItem, dateLabelRaised, labelSpan, outsideLabelRect, edgeTip, } from './model.js';
 export { LIGHT, DARK } from './model.js';
 const LINE = CARD_LINE, CARD_SIDE = 8, ROW_GAP = 4;
-const LABEL_LINE = 18, SUB_LINE = 15;
+const SUB_LINE = 15;
 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));`;
@@ -42,20 +42,18 @@ function layoutCard(c, width) {
 function size(item, s) {
     if (!isGroup(item)) {
         const contents = s.cards.get(item.id);
-        const w = nodeWidth(item, contents != null) + (item.shape === 'decision' ? 70 : 0);
+        const w = itemWidth(item, s.cards, s.fig.edges, s.cap);
         const top = item.shape === 'store' ? 24 : 10;
         const card = contents ? 8 + s.cardH.get(item.id) : 0;
-        const h = Math.max(top + LABEL_LINE + (item.sub ? SUB_LINE : 0) + card + 10, s.minH(item.id));
+        const label = labelLines(item, w).length * LABEL_LINE;
+        const h = Math.max(top + label + (item.sub ? SUB_LINE : 0) + card + 10, s.minH(item.id));
         if (item.shape !== 'decision')
             return { w, h };
         return { w, h: contents ? h + 24 : Math.max(diamondLines(item, w).h, s.minH(item.id) + 24) };
     }
     const kids = item.children.map((c) => size(c, s));
-    const gap = s.gap(item);
-    const along = kids.reduce((n, k) => n + (item.direction === 'column' ? k.h : k.w), 0) + gap * (kids.length - 1);
-    const across = Math.max(...kids.map((k) => (item.direction === 'column' ? k.w : k.h)));
-    const inner = item.direction === 'column' ? { w: across, h: along } : { w: along, h: across };
-    return item.label != null ? { w: inner.w + FRAME_SIDE * 2, h: inner.h + FRAME_TOP + FRAME_BOTTOM } : inner;
+    const h = item.direction === 'column' ? kids.reduce((n, k) => n + k.h, 0) + s.gap(item) * (kids.length - 1) : Math.max(...kids.map((k) => k.h));
+    return { w: itemWidth(item, s.cards, s.fig.edges, s.cap), h: h + (item.label != null ? FRAME_TOP + FRAME_BOTTOM : 0) };
 }
 function placeLanes(fig, x, y, s, out) {
     const lanes = fig.layout.children;
@@ -186,7 +184,16 @@ export function render(fig, opts = {}) {
     const cardH = new Map();
     const lanes = !tl && fig.lanes && isLanesLayout(fig.layout);
     const plan = lanes ? planFor(fig, opts) : null;
-    const sizes = { cards, cardH, minH, gap: (g) => groupGap(g, fig.edges), fig, plan, tall: new Set(plan?.tall) };
+    const sizes = {
+        cards,
+        cardH,
+        minH,
+        gap: (g) => groupGap(g, fig.edges),
+        fig,
+        plan,
+        tall: new Set(plan?.tall),
+        cap: fitCap(fig, opts.width ?? 830, pad),
+    };
     for (const [id, contents] of cards) {
         const width = CARD_WIDTH;
         const widths = [width];
@@ -227,13 +234,10 @@ export function render(fig, opts = {}) {
             around: e.around ?? (plan?.around.has(ids[i]) ? 'below' : undefined),
             ...(tl && { sides: ['r', 'l'], elbow: true }),
             ...(stubs.has(ids[i]) && { stub: stubs.get(ids[i]).map(labelPillW), bands: [bandOf(ids[i], e.from, 0), bandOf(ids[i], e.to, 1)] }),
-            ...((stubs.size || lanes) && e.label != null && { labelW: labelPillW(str(e.label)) }),
-        })), rects, tips, stubs.size
-            ? placed.flatMap((p) => (!isGroup(p.item) ? [p] : p.lane ? [{ x: p.x, y: p.y, w: gutter, h: p.h }] : []))
-            : [
-                ...placed.filter((p) => p.tl && !p.tl.labelInside).map((p) => outsideLabelRect(p, str(p.item.label))),
-                ...placed.filter((p) => p.tl).map((p) => ({ x: p.x, y: p.y, w: p.w, h: p.h, box: true })),
-            ], stubs.size ? { x: placed[0].x + gutter, y: placed[0].y, w: placed[0].w - gutter, h: placed[0].h } : undefined, lanes ? { bands: placed.filter((p) => p.lane), boxes: placed.filter((p) => !isGroup(p.item)) } : undefined);
+            ...(!tl && e.label != null && { labelW: labelPillW(str(e.label)) }),
+        })), rects, tips, avoidOf(placed.filter((p) => !isGroup(p.item)), stubs.size
+            ? placed.filter((p) => p.lane).map((p) => ({ x: p.x, y: p.y, w: gutter, h: p.h }))
+            : placed.filter((p) => p.tl && !p.tl.labelInside).map((p) => outsideLabelRect(p, str(p.item.label))), stubs.size > 0), stubs.size ? { x: placed[0].x + gutter, y: placed[0].y, w: placed[0].w - gutter, h: placed[0].h } : undefined, lanes ? { bands: placed.filter((p) => p.lane), boxes: placed.filter((p) => !isGroup(p.item)) } : undefined, pad);
     };
     let routed = go();
     for (let pass = 0; plan && pass < 3; pass++) {
@@ -260,7 +264,11 @@ export function render(fig, 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 = [{ text: str(p.item.label), fontSize: 14, room: dl ? room(dl.label.far) : flat }];
+        const texts = labelLines(p.item, p.w).map((text) => ({
+            text,
+            fontSize: 14,
+            room: dl ? room(dl.label.far) : flat,
+        }));
         if (dl)
             for (const l of dl.subs)
                 texts.push({ text: l.text, fontSize: 12, room: room(l.far) });
@@ -443,6 +451,7 @@ export function render(fig, opts = {}) {
                 cls(p.lane && 'lane', anim(on, 'stroke: var(--accent)', 'stroke: var(--border)', 'n')) +
                 `/><text x="${n2(p.x + FRAME_SIDE)}" y="${n2(p.lane ? p.y + p.h / 2 + 4 : p.y + 20)}" class="frame">${esc(str(item.label).toUpperCase())}</text>`);
         }
+        const tip = (inner) => (item.source ? `<g><title>${esc(item.source)}</title>${inner}</g>` : inner);
         const bt = item.tone && TONES[item.tone];
         const stroke = cls(boxAnim(item.id, true, bt));
         if (p.tl) {
@@ -455,7 +464,7 @@ export function render(fig, opts = {}) {
                 ? `<polygon points="${n2(cx)},${n2(p.y)} ${n2(p.x + p.w)},${n2(cy)} ${n2(cx)},${n2(p.y + p.h)} ${n2(p.x)},${n2(cy)}" fill="${fill0}" stroke="${stroke0}"${stroke}/>`
                 : `<rect x="${n2(p.x)}" y="${n2(p.y)}" width="${n2(p.w)}" height="${n2(p.h)}" rx="6" fill="${fill0}" stroke="${stroke0}"${stroke}/>`;
             const tx = inside ? p.x + 8 : p.x + p.w + 6;
-            return shape + `<text x="${n2(tx)}" y="${n2(cy + 4.5)}" class="bar">${esc(label)}</text>`;
+            return tip(shape + `<text x="${n2(tx)}" y="${n2(cy + 4.5)}" class="bar">${esc(label)}</text>`);
         }
         const rim = item.shape === 'store' ? cls(boxAnim(item.id, false, bt)) : '';
         const fill0 = bt ? toneTint(bt, 'var(--bg)') : 'var(--bg)';
@@ -471,11 +480,14 @@ export function render(fig, opts = {}) {
                 ? `<path d="M${n2(p.x)} ${n2(p.y + 12)} a ${n2(p.w / 2)} 12 0 0 1 ${n2(p.w)} 0 v ${n2(p.h - 24)} a ${n2(p.w / 2)} 12 0 0 1 ${n2(-p.w)} 0 z" fill="${fill0}" stroke="${stroke0}"${stroke}/>` +
                     `<path d="M${n2(p.x)} ${n2(p.y + 12)} a ${n2(p.w / 2)} 12 0 0 0 ${n2(p.w)} 0" fill="none" stroke="${stroke0}"${rim}/>`
                 : `<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 label = `<text x="${n2(cx)}" y="${n2(labelY)}" class="label">${esc(str(item.label))}</text>`;
+        const lines = labelLines(item, p.w);
+        const extra = (lines.length - 1) * LABEL_LINE;
+        const firstY = item.shape === 'store' || contents ? 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('')
             : item.sub
-                ? `<text x="${n2(cx)}" y="${n2(labelY + SUB_LINE)}" class="sub">${esc(str(item.sub))}</text>`
+                ? `<text x="${n2(cx)}" y="${n2(firstY + extra + SUB_LINE)}" class="sub">${esc(str(item.sub))}</text>`
                 : '';
         const dot = bt ?? 'var(--accent)';
         const my = n2(p.y + p.h / 2);
@@ -484,7 +496,7 @@ export function render(fig, opts = {}) {
             : item.mark === 'end'
                 ? `<circle cx="${n2(p.x + p.w + 12)}" cy="${my}" r="6.25" fill="none" stroke="${dot}" stroke-width="1.5"/><circle cx="${n2(p.x + p.w + 12)}" cy="${my}" r="4" fill="${dot}"/>`
                 : '';
-        return shape + label + sub + mark + (contents ? card(p, cardTop, contents) : '');
+        return tip(shape + label + sub + mark + (contents ? card(p, cardTop, contents) : ''));
     });
     function card(p, top, contents) {
         const id = p.item.id;
@@ -550,11 +562,13 @@ export function render(fig, opts = {}) {
         const lit = cls(toned
             ? frames(on.map((x, i) => (x ? `stroke: ${col[i]}; stroke-width: ${EDGE_ON}` : off)), 'e', off)
             : anim(on, `stroke: var(--accent); stroke-width: ${EDGE_ON}`, off, 'e'));
-        const path = r.stub
+        const tip = edgeTip(r.id, e.source, beats.flat());
+        const path0 = r.stub
             ? r.stub.parts
                 .map((d) => `<path d="${d}" fill="none" stroke="var(--muted)" stroke-width="${EDGE_OFF}" marker-end="url(#arrow)"${lit}/>`)
                 .join('') + `<path id="p-${esc(r.id)}" d="${r.d}" fill="none" stroke="none"/>`
             : `<path id="p-${esc(r.id)}" d="${r.d}" fill="none" stroke="var(--muted)" stroke-width="${EDGE_OFF}" marker-end="url(#arrow)"${lit}/>`;
+        const path = tip ? `<g><title>${esc(tip)}</title>${path0}</g>` : path0;
         const pill = (x, y, lw, text) => `<rect x="${n2(x - lw / 2)}" y="${n2(y - 9)}" width="${n2(lw)}" height="18" rx="9" fill="var(--bg)" stroke="var(--border)"` +
             cls(toned
                 ? frames(on.map((x, i) => x ? `fill: ${tone[i] ? toneFill(col[i]) : col[i]}; stroke: ${col[i]}` : 'fill: var(--bg); stroke: var(--border)'), 'l', 'fill: var(--bg); stroke: var(--border)')
@@ -668,18 +682,18 @@ export function render(fig, opts = {}) {
         }
     }
     const bounds = placed[0];
-    const arcs = fig.edges.some((e, i) => (e.around || plan?.around.has(ids[i])) && !stubs.has(ids[i]));
+    const [arcT, arcB, arcL, arcR] = ['above', 'below', 'left', 'right'].map((w) => arcRoom(routed, w));
     const capLines = [...new Set(captions)].flatMap((c) => wrap(c, Math.max(560, bounds.w), 13.5).length);
-    const mapW = Math.max(bounds.w + pad * 2, 560);
+    const mapW = Math.max(bounds.w + pad * 2 + arcL + arcR, 560);
     const rail = fig.rail ? layoutRail(fig, fig.rail === 'only' ? 560 : mapW) : null;
     const only = fig.rail === 'only' && rail != null;
     const capTop = rail ? 20 : 26;
     const capH = steps.length ? capTop + 4 + Math.max(0, ...capLines) * 20 : 0;
     const W = only ? Math.max(560, rail.width) : Math.max(mapW, rail?.width ?? 0);
-    const mapH = only ? 0 : bounds.h + pad * 2 + (arcs ? 44 : 0);
+    const mapH = only ? 0 : bounds.h + pad * 2 + arcT + arcB;
     const top = only ? pad : mapH + RAIL.gap;
     const H = only ? pad + rail.height + capH : mapH + (rail ? RAIL.gap + rail.height : 0) + capH;
-    const shift = (W - (bounds.w + pad * 2)) / 2;
+    const shift = (W - (bounds.w + pad * 2 + arcL + arcR)) / 2 + arcL;
     const railX = rail ? (W - rail.width) / 2 : 0;
     const labels = rail || synthetic
         ? []
@@ -758,7 +772,8 @@ export function render(fig, opts = {}) {
                     ? `<rect x="${n2(row.pill.x)}" y="${n2(ly - 9)}" width="${n2(row.pill.w)}" height="18" rx="9" fill="var(--bg)" stroke="var(--border)"${cls(anim(now, `fill: ${row.tone ? toneFill(col) : col}; stroke: ${col}`, 'fill: var(--bg); stroke: var(--border)', row.tone ? 'l' + col : 'l'))}/>` +
                         `<text x="${n2(row.pill.x + row.pill.w / 2)}" y="${n2(ly + 4)}"${cls('edgelabel', anim(now, `fill: ${ON_ACCENT}`, 'fill: var(--muted)', 'x'))}>${esc(row.text)}</text>`
                     : '';
-                parts.push(`<g${cls('railrow', moveRow(i))}><g${cls(anim(next, 'opacity: .45', 'opacity: 1', 'r'))}>` +
+                const tip = edgeTip(row.edge, fig.edges[ids.indexOf(row.edge)].source, beats.flat());
+                parts.push(`<g${cls('railrow', moveRow(i))}>${tip ? `<title>${esc(tip)}</title>` : ''}<g${cls(anim(next, 'opacity: .45', 'opacity: 1', 'r'))}>` +
                     `<path d="M ${n2(x1)} ${n2(ly)} H ${n2(x2)}" fill="none" stroke="var(--muted)" stroke-width="${EDGE_OFF}"${row.async ? ' stroke-dasharray="4 3"' : ''} marker-end="url(#arrow)"${cls(lit)}/>` +
                     tag +
                     pill +
@@ -796,7 +811,7 @@ ${css.join('\n')}
 <rect width="100%" height="100%" fill="var(--bg)"/>
 ${only
         ? ''
-        : `<g transform="translate(${n2(shift)} ${arcs ? 44 : 0})">
+        : `<g transform="translate(${n2(shift)} ${arcT})">
 ${axisSvg}
 ${tl ? boxes.filter((b, i) => b && isGroup(placed[i].item)).join('\n') : ''}${lineSvg && `\n${lineSvg}`}
 ${tl ? edgeSvg.join('\n') : ''}
@@ -814,6 +829,7 @@ ${said.join('\n')}
         fonts.push(12, 13);
     const scene = {
         width: n2(W),
+        ...(!only && { area: { x: -shift, y: -arcT, w: W, h: mapH } }),
         boxes: only ? [] : sceneBoxes,
         edges: [
             ...(only ? [] : routed).flatMap((r) => {
@@ -827,14 +843,15 @@ ${said.join('\n')}
                         to: e.to,
                         curve: r.curve,
                         label: labelRects[r.id],
-                        ...(tl && { behind: true, elbow: r.elbow }),
+                        ...(tl && { behind: true }),
+                        ...(r.elbow && { elbow: r.elbow }),
                     },
                 ];
             }),
             ...(rail?.rows ?? []).flatMap((row, i) => {
                 if (row.kind !== 'message')
                     return [];
-                const dx = only ? railX : railX - shift, dy = only ? top : top - (arcs ? 44 : 0);
+                const dx = only ? railX : railX - shift, dy = only ? top : top - arcT;
                 const y = dy + railState(rail, row.step)[i].y + RAIL.row / 2;
                 const [x1, x2] = [dx + rail.columns[row.from].x, dx + rail.columns[row.to].x];
                 const p = { x: x1, y }, q = { x: x2, y };

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.8.0";
+export declare const VERSION = "0.8.1";

package/dist/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowfig",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "Your coding agent draws animated diagrams from your code, and flowfig checks them. One animated SVG for a GitHub README, PR or issue, and a React player. Set up Claude Code, Cursor, GitHub Copilot, Codex, Gemini CLI, Windsurf and Kiro with npx flowfig init.",
   "license": "MIT",
   "repository": {