flowfig 0.7.0 → 0.8.1

package/dist/model.js

@@ -8,6 +8,14 @@ export const toBeat = (b) => {
         hops: hops.map((h) => (typeof h === 'string' ? { edge: h, back: false } : { back: false, ...h })),
     };
 };
+export const edgeTip = (id, source, beats) => {
+    const all = new Set(source ? [source] : []);
+    for (const b of beats)
+        for (const h of b.hops)
+            if (h.edge === id && h.source)
+                all.add(h.source);
+    return all.size ? [...all].join('\n') : undefined;
+};
 // A React node can be an object, so test for the `text` key.
 export const isRows = (c) => Array.isArray(c) && c.every((r) => r != null && typeof r === 'object' && 'text' in r);
 export const edgeId = (e) => e.id ?? `${e.from}->${e.to}`;
@@ -86,18 +94,47 @@ export function laneColumns(fig) {
             cols.set(n.id, n.at);
     return cols;
 }
+export const LABEL_LINE = 18;
 export const FRAME_SIDE = 18, NODE_MIN_W = 100, NODE_MAX_W = 190;
 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. */
-export function nodeWidth(item, carded) {
+export function nodeWidth(item, carded, cap = NODE_MAX_W) {
     if (item.width != null)
         return item.width;
     if (carded)
         return CARD_WIDTH;
     const label = textWidth(str(item.label), 14) + 32;
     const sub = textWidth(str(item.sub), 12) + 32;
-    return Math.min(NODE_MAX_W, Math.max(NODE_MIN_W, label, sub));
+    return Math.min(item.shape === 'decision' ? NODE_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)
+        return [label];
+    const lines = wrap(label, w - 32, 14);
+    return lines.length === 2 && lines.every((l) => textWidth(l, 14) <= w - 32) ? lines : [label];
+}
+export function itemWidth(item, carded, edges, cap = NODE_MAX_W) {
+    if (!isGroup(item))
+        return nodeWidth(item, carded.has(item.id), cap) + (item.shape === 'decision' ? 70 : 0);
+    const ws = item.children.map((c) => itemWidth(c, carded, edges, cap));
+    const inner = item.direction === 'column' ? Math.max(...ws) : ws.reduce((a, b) => a + b, 0) + groupGap(item, edges) * (ws.length - 1);
+    return inner + (item.label != null ? FRAME_SIDE * 2 : 0);
+}
+export function fitCap(fig, width, padding = 24) {
+    if ((fig.lanes || fig.timeline) && isLanesLayout(fig.layout))
+        return NODE_MAX_W;
+    const carded = new Set((fig.steps ?? []).flatMap((s) => s.flow.flatMap((b) => Object.keys(toBeat(b).show ?? {}))));
+    const fits = (n, cap) => {
+        const w = nodeWidth(n, carded.has(n.id), cap);
+        return Math.max(textWidth(str(n.sub), 12), ...labelLines(n, w).map((l) => textWidth(l, 14))) + 32 <= w + 0.5;
+    };
+    const keep = nodes(fig.layout).filter((n) => fits(n, NODE_MAX_W));
+    let cap = NODE_MAX_W;
+    while (cap > 110 && itemWidth(fig.layout, carded, fig.edges, cap) + padding * 2 > width && keep.every((n) => fits(n, cap - 20)))
+        cap -= 20;
+    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. */
@@ -415,16 +452,22 @@ export const counts = (p) => {
     };
 };
 const idsIn = (c) => (isGroup(c) ? [...(c.id ? [c.id] : []), ...c.children.flatMap(idsIn)] : [c.id]);
-/** A row's default gap grows to hold its widest edge label, plus 8 px each side. */
 export function groupGap(g, edges) {
-    if (g.gap != null)
-        return g.gap;
-    if (g.direction === 'column')
-        return 28;
     const side = new Map();
     g.children.forEach((c, i) => idsIn(c).forEach((id) => side.set(id, i)));
-    const pills = edges
-        .filter((e) => e.label != null && side.has(e.from) && side.has(e.to) && side.get(e.from) !== side.get(e.to))
-        .map((e) => labelPillW(str(e.label)) + 16);
-    return Math.max(56, ...pills);
+    const spans = edges.filter((e) => e.label != null && side.has(e.from) && side.has(e.to) && side.get(e.from) !== side.get(e.to) && !(g.gap != null && e.around));
+    if (g.gap != null && !spans.length)
+        return g.gap;
+    const need = Math.max(0, ...spans.map((e) => labelPillW(str(e.label)) + 16));
+    if (g.gap != null && g.direction !== 'column')
+        return Math.max(g.gap, need - 16);
+    let auto;
+    if (g.direction === 'column') {
+        const ends = spans.map((e) => [side.get(e.from), side.get(e.to)].sort((p, q) => p - q));
+        const most = Math.max(0, ...g.children.map((_, k) => ends.filter(([lo, hi]) => lo <= k && k < hi).length));
+        auto = most > 1 ? Math.min(most, 3) * 22 + 16 : 28;
+    }
+    else
+        auto = Math.max(56, need);
+    return Math.max(g.gap ?? 0, auto);
 }

package/dist/scene.d.ts

@@ -33,6 +33,8 @@ export type Scene = {
     edges: SceneEdge[];
     /** The smallest reading text in px, before any scale. */
     minFont: number;
+    /** The drawn map area. An edge label stays inside it. */
+    area?: Rect;
     /** The lane bands of a swimlanes figure. A stub pill stays inside one. */
     lanes?: {
         id: string;

package/dist/source.d.ts

@@ -12,6 +12,6 @@ export type Link = {
     symbol?: string;
 };
 /** Every box, edge and hop with its raw `source`, well-formed or not. The one owner list that `links` and `checkSpec` share. */
-export declare function owners(fig: FlowProps): [string, string | undefined][];
+export declare function owners(fig: FlowProps): [string, string | undefined, string | undefined][];
 /** Every well-formed link in the figure, with the box, edge or hop that carries it. `bad-source` covers the rest. */
 export declare function links(fig: FlowProps): Link[];

package/dist/source.js

@@ -15,9 +15,9 @@ export const headingSlug = (text) => text
 /** Every box, edge and hop with its raw `source`, well-formed or not. The one owner list that `links` and `checkSpec` share. */
 export function owners(fig) {
     return [
-        ...nodes(fig.layout).map((n) => [`box "${n.id}"`, n.source]),
-        ...fig.edges.map((e) => [`edge "${edgeId(e)}"`, e.source]),
-        ...(fig.steps ?? []).flatMap((s) => s.flow.flatMap((b) => toBeat(b).hops.map((h) => [`hop on "${h.edge}"`, h.source]))),
+        ...nodes(fig.layout).map((n) => [`box "${n.id}"`, n.source, undefined]),
+        ...fig.edges.map((e) => [`edge "${edgeId(e)}"`, e.source, e.via]),
+        ...(fig.steps ?? []).flatMap((s) => s.flow.flatMap((b) => toBeat(b).hops.map((h) => [`hop on "${h.edge}"`, h.source, h.via]))),
     ];
 }
 /** Every well-formed link in the figure, with the box, edge or hop that carries it. `bad-source` covers the rest. */

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/type-index.d.ts

@@ -0,0 +1,55 @@
+import { type CodeFile, type Lang, type Read } from './code.ts';
+export type Decl = {
+    info: CodeFile;
+    start: number;
+    end: number;
+    name: string;
+    kind: 'class' | 'interface';
+    dir?: string;
+};
+export type Bind = {
+    mod: string | null;
+    imported: string;
+    dir: boolean;
+};
+type Globals = {
+    types: Map<string, string[]>;
+    impls: Map<string, Set<string>>;
+    aliases: Map<string, {
+        to: string;
+        path: string;
+    }>;
+    usings: Set<string>;
+    projects: string[];
+};
+type Index = {
+    types: Map<string, Decl | null>;
+    binds: Map<string, Map<string, Bind>>;
+    repo: string[] | null;
+    globals: Map<Lang, Globals>;
+};
+type Cache = Map<string, CodeFile | null>;
+export type Ctx = {
+    root: string;
+    read: Read;
+    cache: Cache;
+    ix: Index;
+};
+export declare function makeCtx(root: string, read?: Read, cache?: Cache): Ctx;
+export declare const lastSeg: (s: string) => string;
+export declare const file: (cx: Ctx, path: string) => CodeFile | null;
+export declare function bindings(cx: Ctx, f: CodeFile): Map<string, Bind>;
+export declare function goDirFiles(cx: Ctx, dir: string): CodeFile[];
+export declare function global(cx: Ctx, lang: 'java' | 'cs' | 'rs'): Globals;
+export declare function declIn(info: CodeFile | null, name: string): Decl | null;
+export declare function findType(cx: Ctx, ctx: CodeFile, name: string | undefined, qual?: string | null): Decl | null;
+export declare function ancestors(cx: Ctx, d: Decl): {
+    name: string;
+    d: Decl | null;
+}[];
+export declare function goMethods(cx: Ctx, d: Decl): Set<string>;
+export declare const goIfaceMethods: (d: Decl) => string[];
+export declare function defines(cx: Ctx, d: Decl, n: string): boolean;
+export declare function rustUses(fi: CodeFile, n: string, tp: string): 'yes' | 'no' | 'outside';
+export declare const rustMod: (tp: string) => string;
+export {};