@itsthecsguy/linework 0.0.0-stage → 0.1.0

package/dist/layout/layout.js

@@ -0,0 +1,212 @@
+// Diagram -> absolute geometry, via ELK layered.
+import ElkModule from 'elkjs/lib/elk.bundled.js';
+import { kindDef } from '../spec/model.js';
+import { ER_HEAD, ER_ROW, FIELD_PAD, LINE, PAD_X, PAD_Y, typeface } from '../drawio/theme.js';
+import { TextMeasurer } from './text.js';
+import { ICON_PAD } from '../drawio/icons.js';
+/** Crude fallback when no browser is available (tests). */
+export const estimateMeasure = async (reqs) => reqs.map(([t, size, weight]) => Math.ceil(t.length * size * (weight >= 600 ? 0.6 : 0.55)));
+// elkjs is CommonJS; under NodeNext the constructor sits on .default.
+const ElkCtor = (ElkModule.default ?? ElkModule);
+const elk = new ElkCtor();
+const snap = (v, g = 8) => Math.ceil(v / g) * g;
+const ELK_DIR = { TB: 'DOWN', LR: 'RIGHT', BT: 'UP', RL: 'LEFT' };
+export function fontsFor(theme) {
+    const t = typeface(theme);
+    const f = (size, weight = 400, tracking) => ({ size, weight, family: t.family, tracking });
+    return {
+        label: f(t.size.label, t.strong),
+        sub: f(t.size.sub),
+        edge: f(t.size.edge),
+        group: f(t.size.group, 700, t.upperGroups ? t.size.group * 0.06 : 0),
+        field: f(t.size.field),
+        fieldKey: f(t.size.field, t.strong),
+        line: Math.round(t.size.label * LINE * 10) / 10,
+        maxText: Math.round(t.size.label * 13),
+    };
+}
+export async function layout(d, measure = estimateMeasure) {
+    const fonts = fontsFor(d.theme);
+    const tm = new TextMeasurer(measure);
+    await tm.prepare([
+        ...d.nodes.flatMap((n) => [
+            [n.label, kindDef(d.type, n.kind).shape === 'table' ? fonts.label : fonts.label],
+            [n.tech, fonts.sub],
+            ...(n.fields ?? []).flatMap((fl) => [
+                [fl.name, fl.flags.includes('pk') ? fonts.fieldKey : fonts.field],
+                [fieldRight(fl), fonts.field],
+            ]),
+        ]),
+        ...d.edges.map((e) => [e.label, fonts.edge]),
+        ...d.groups.map((g) => [groupText(g.label, d.theme), fonts.group]),
+    ]);
+    const { sizes, natural } = nodeSizes(d, tm, fonts);
+    const labels = d.edges.map((e) => (e.label ? { w: Math.ceil(tm.width(e.label, fonts.edge)) + 10, h: Math.ceil(fonts.edge.size * LINE) + 4 } : undefined));
+    const groupMin = new Map(d.groups.map((g) => [g.id, Math.ceil(tm.width(groupText(g.label, d.theme), fonts.group)) + 40]));
+    const groupTop = Math.round(8 + fonts.group.size * LINE + 20);
+    const go = (dir) => run(d, dir, sizes, labels, groupMin, groupTop);
+    if (d.direction !== 'auto')
+        return { ...(await go(d.direction)), natural };
+    // Pick the direction whose result fits a document page best.
+    const [tb, lr] = await Promise.all([go('TB'), go('LR')]);
+    return { ...(score(tb) <= score(lr) ? tb : lr), natural };
+}
+const groupText = (label, theme) => (typeface(theme).upperGroups ? label.toUpperCase() : label);
+const fieldRight = (f) => {
+    const keys = f.flags.filter((x) => x === 'pk' || x === 'fk').map((x) => x.toUpperCase());
+    return [f.type, ...f.flags.filter((x) => x !== 'pk' && x !== 'fk'), ...keys].filter(Boolean).join(' ');
+};
+function score(l) {
+    const ratio = l.width / Math.max(1, l.height);
+    return Math.abs(Math.log(ratio / 1.4)) + Math.max(0, l.width - 1200) / 400;
+}
+/** Extra width a shape needs around its text, beyond PAD_X on each side. */
+function shapeExtra(shape, icon) {
+    return (shape === 'parallelogram' ? 28 : shape === 'pill' ? 16 : 0) + (icon ? ICON_PAD - PAD_X + 4 : 0);
+}
+function boxHeight(lines, fonts, shape) {
+    return snap(PAD_Y * 2 + Math.max(1, lines) * fonts.line + (shape === 'cylinder' ? 16 : 0), 4);
+}
+function nodeSizes(d, tm, fonts) {
+    const sizes = new Map();
+    const minW = d.type === 'architecture' ? 136 : 112;
+    const textOf = (n, maxW) => {
+        const a = tm.wrap(n.label, fonts.label, maxW), b = tm.wrap(n.tech, fonts.sub, maxW);
+        return { width: Math.max(a.width, b.width), lines: a.lines.length + b.lines.length };
+    };
+    for (const n of d.nodes) {
+        const shape = kindDef(d.type, n.kind).shape;
+        if (shape === 'table') {
+            let w = tm.width(n.label, fonts.label) + 2 * FIELD_PAD + 8;
+            for (const f of n.fields ?? []) {
+                const nameW = tm.width(f.name, f.flags.includes('pk') ? fonts.fieldKey : fonts.field);
+                w = Math.max(w, nameW + tm.width(fieldRight(f), fonts.field) + 2 * FIELD_PAD + 28);
+            }
+            const rows = n.fields?.length ?? 0;
+            sizes.set(n.id, { w: snap(Math.max(176, w)), h: rows ? ER_HEAD + rows * ER_ROW + 6 : ER_HEAD });
+            continue;
+        }
+        if (shape === 'start' || shape === 'end') {
+            sizes.set(n.id, { w: 24, h: 24 });
+            continue;
+        }
+        if (shape === 'diamond') {
+            const t = textOf(n, fonts.maxText * 0.7);
+            const w = snap(Math.max(128, t.width * 1.5 + 40));
+            sizes.set(n.id, { w, h: snap(Math.max(72, w * 0.5, t.lines * fonts.line * 2 + 24)) });
+            continue;
+        }
+        const extra = shapeExtra(shape, !!n.icon);
+        const t = textOf(n, fonts.maxText);
+        sizes.set(n.id, { w: snap(Math.max(minW, t.width + 2 * PAD_X + extra)), h: boxHeight(t.lines, fonts, shape) });
+    }
+    const natural = new Map([...sizes].map(([k, v]) => [k, { ...v }]));
+    // Boxes of nearly the same width read calmer at exactly the same width. Boxes
+    // much wider than the rest keep their own width rather than stretching every box.
+    const uniform = d.nodes.filter((n) => !['start', 'end', 'diamond', 'table'].includes(kindDef(d.type, n.kind).shape));
+    const sorted = [...uniform].sort((a, b) => sizes.get(a.id).w - sizes.get(b.id).w);
+    let cluster = [];
+    const flush = () => {
+        const w = Math.max(0, ...cluster.map((n) => sizes.get(n.id).w));
+        for (const n of cluster) {
+            const s = sizes.get(n.id);
+            if (s.w === w)
+                continue;
+            s.w = w;
+            // A wider box may fit the text on fewer lines.
+            const shape = kindDef(d.type, n.kind).shape;
+            s.h = boxHeight(textOf(n, w - 2 * PAD_X - shapeExtra(shape, !!n.icon)).lines, fonts, shape);
+        }
+        cluster = [];
+    };
+    for (const n of sorted) {
+        if (cluster.length && sizes.get(n.id).w > sizes.get(cluster[0].id).w * 1.25)
+            flush();
+        cluster.push(n);
+    }
+    flush();
+    return { sizes, natural };
+}
+async function run(d, dir, sizes, labels, groupMin, groupTop) {
+    const byId = new Map();
+    const root = {
+        id: '__root',
+        layoutOptions: {
+            'elk.algorithm': 'layered',
+            'elk.direction': ELK_DIR[dir],
+            'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
+            'elk.edgeRouting': 'ORTHOGONAL',
+            'elk.layered.nodePlacement.strategy': 'BRANDES_KOEPF',
+            'elk.layered.nodePlacement.bk.fixedAlignment': 'BALANCED',
+            'elk.layered.considerModelOrder.strategy': 'NODES_AND_EDGES',
+            'elk.layered.spacing.nodeNodeBetweenLayers': '32',
+            'elk.spacing.nodeNode': '40',
+            'elk.layered.spacing.edgeNodeBetweenLayers': '12',
+            'elk.spacing.edgeNode': '24',
+            'elk.spacing.edgeEdge': '16',
+            'elk.layered.spacing.edgeEdgeBetweenLayers': '14',
+            'elk.spacing.edgeLabel': '4',
+            'elk.edgeLabels.inline': 'true',
+            'elk.layered.edgeLabels.sideSelection': 'ALWAYS_UP',
+            'elk.layered.mergeEdges': 'false',
+            'elk.padding': '[top=16,left=16,bottom=16,right=16]',
+            'elk.json.shapeCoords': 'ROOT',
+            'elk.json.edgeCoords': 'ROOT',
+        },
+        children: [],
+        edges: [],
+    };
+    byId.set(root.id, root);
+    for (const g of d.groups) {
+        byId.set(g.id, {
+            id: g.id,
+            children: [],
+            layoutOptions: {
+                'elk.padding': `[top=${groupTop},left=20,bottom=20,right=20]`,
+                // Wide enough for its title.
+                'elk.nodeSize.constraints': 'MINIMUM_SIZE',
+                'elk.nodeSize.minimum': `(${groupMin.get(g.id) ?? 0}, 0)`,
+            },
+        });
+    }
+    for (const g of d.groups)
+        byId.get(g.parent ?? '__root').children.push(byId.get(g.id));
+    for (const n of d.nodes) {
+        const s = sizes.get(n.id);
+        const en = { id: n.id, width: s.w, height: s.h };
+        if (n.kind === 'start')
+            en.layoutOptions = { 'elk.layered.layering.layerConstraint': 'FIRST' };
+        byId.set(n.id, en);
+        byId.get(n.parent ?? '__root').children.push(en);
+    }
+    root.edges = d.edges.map((e, i) => ({
+        id: e.id,
+        sources: [e.from],
+        targets: [e.to],
+        labels: labels[i] ? [{ text: e.label, width: labels[i].w, height: labels[i].h }] : [],
+    }));
+    const out = await elk.layout(root);
+    const nodes = new Map();
+    const groups = new Map();
+    const groupIds = new Set(d.groups.map((g) => g.id));
+    const walk = (n) => {
+        for (const c of n.children ?? []) {
+            const box = { x: c.x, y: c.y, w: c.width, h: c.height };
+            (groupIds.has(c.id) ? groups : nodes).set(c.id, box);
+            walk(c);
+        }
+    };
+    walk(out);
+    const edges = new Map();
+    for (const e of (out.edges ?? [])) {
+        const s = e.sections?.[0];
+        if (!s)
+            continue;
+        const lab = e.labels?.[0];
+        edges.set(e.id, {
+            points: [s.startPoint, ...(s.bendPoints ?? []), s.endPoint].map((p) => ({ x: p.x, y: p.y })),
+            label: lab && lab.x != null ? { x: lab.x, y: lab.y, w: lab.width, h: lab.height } : undefined,
+        });
+    }
+    return { direction: dir, width: out.width, height: out.height, nodes, groups, edges };
+}

package/dist/layout/sequence.js

@@ -0,0 +1,333 @@
+import { fontsFor } from './layout.js';
+import { TextMeasurer } from './text.js';
+import { LINE, PAD_X, PAD_Y, activationStyle, frameStyle, guardStyle, lifelineStyle, messageStyle, nodeLabel, noteStyle, palette, separatorStyle } from '../drawio/theme.js';
+import { autoAttr, diagramMeta, lookAttrs } from '../drawio/write.js';
+const TOP = 24, BAR_W = 10, NOTE_W = 220;
+/**
+ * A label centred on a long message covers the lifelines it passes. Put it in the
+ * gap nearest the sender that fits it; keep it centred when none does.
+ * Returns draw.io's -1..1 position along the arrow.
+ */
+function labelGap(x1, x2, w, centers) {
+    const lo = Math.min(x1, x2), hi = Math.max(x1, x2);
+    const stops = [lo, ...centers.filter((c) => c > lo + 1 && c < hi - 1).sort((a, b) => a - b), hi];
+    if (stops.length <= 2)
+        return undefined;
+    const gaps = stops.slice(1).map((b, k) => ({ a: stops[k], b }));
+    if (x2 < x1)
+        gaps.reverse(); // nearest the sender first
+    const fit = gaps.find((g) => g.b - g.a >= w + BAR_W);
+    if (!fit)
+        return undefined;
+    const mid = (fit.a + fit.b) / 2;
+    return ((mid - x1) / (x2 - x1)) * 2 - 1;
+}
+export async function sequenceScene(d, measure, opts = {}) {
+    const parts = d.nodes;
+    const idx = new Map(parts.map((p, i) => [p.id, i]));
+    const theme = d.theme;
+    // 1. Flatten items into rows, remembering frames.
+    const rows = [];
+    const frames = [];
+    const notes = [];
+    const walk = (items, depth) => {
+        for (const it of items) {
+            if (it.kind === 'msg')
+                rows.push({ t: 'msg', item: it, y: 0 });
+            else if (it.kind === 'note') {
+                rows.push({ t: 'note', item: it, y: 0, h: 0 });
+                notes.push(it);
+            }
+            else {
+                const f = { id: `frame_${frames.length + 1}`, op: it.op, whens: it.branches.map((b) => b.when), start: rows.length, seps: [], end: 0, depth, parts: new Set() };
+                frames.push(f);
+                rows.push({ t: 'gap', y: 0 });
+                it.branches.forEach((b, bi) => {
+                    if (bi > 0) {
+                        f.seps.push(rows.length);
+                        rows.push({ t: 'gap', y: 0 });
+                    }
+                    const before = rows.length;
+                    walk(b.items, depth + 1);
+                    for (const r of rows.slice(before))
+                        if (r.t === 'msg') {
+                            f.parts.add(r.item.from);
+                            f.parts.add(r.item.to);
+                        }
+                        else if (r.t === 'note')
+                            r.item.over.forEach((p) => f.parts.add(p));
+                });
+                f.end = rows.length;
+                rows.push({ t: 'gap', y: 0 });
+            }
+        }
+    };
+    walk(d.seq ?? [], 0);
+    // Frames include nested frames' participants.
+    for (const f of [...frames].reverse())
+        for (const g of frames)
+            if (g !== f && g.start > f.start && g.end < f.end)
+                g.parts.forEach((p) => f.parts.add(p));
+    // 2. Measure.
+    const fonts = fontsFor(theme);
+    const tm = new TextMeasurer(measure);
+    const guards = frames.flatMap((f) => f.whens.filter((w) => !!w).map((w) => `[${w}]`));
+    await tm.prepare([
+        ...parts.flatMap((p) => [[p.label, fonts.label], [p.tech, fonts.sub]]),
+        ...rows.map((r) => [r.t === 'msg' ? r.item.label : r.t === 'note' ? r.item.text : undefined, fonts.edge]),
+        ...guards.map((g) => [g, fonts.edge]),
+        ...frames.map((f) => [f.op, fonts.group]),
+    ]);
+    const headText = parts.map((p) => {
+        const a = tm.wrap(p.label, fonts.label, fonts.maxText), b = tm.wrap(p.tech, fonts.sub, fonts.maxText);
+        return { w: Math.max(a.width, b.width), lines: a.lines.length + b.lines.length };
+    });
+    const headW = headText.map((t) => Math.max(120, Math.ceil((t.w + 2 * PAD_X) / 8) * 8));
+    const HEAD = Math.ceil((PAD_Y * 2 + Math.max(...headText.map((t) => t.lines), 1) * fonts.line) / 4) * 4;
+    const edgeLine = Math.ceil(fonts.edge.size * LINE);
+    const ROW = Math.max(40, edgeLine + 24);
+    const rowW = rows.map((r) => (r.t === 'msg' ? tm.width(r.item.label, fonts.edge) : r.t === 'note' ? Math.min(tm.width(r.item.text, fonts.edge), NOTE_W - 20) : 0));
+    const noteLines = rows.map((r) => (r.t === 'note' ? Math.max(1, tm.wrap(r.item.text, fonts.edge, NOTE_W - 20).lines.length) : 0));
+    // 3. Columns: centre-to-centre distance wide enough for every label between neighbours.
+    const need = parts.map(() => 0); // need[i]: min centre distance between i and i+1
+    rows.forEach((r, i) => {
+        if (r.t !== 'msg' || r.item.from === r.item.to)
+            return;
+        const a = Math.min(idx.get(r.item.from), idx.get(r.item.to)), b = Math.max(idx.get(r.item.from), idx.get(r.item.to));
+        const per = (rowW[i] + 48) / (b - a);
+        for (let k = a; k < b; k++)
+            need[k] = Math.max(need[k], per);
+    });
+    rows.forEach((r, i) => {
+        if (r.t !== 'msg' || r.item.from !== r.item.to)
+            return;
+        const k = idx.get(r.item.from);
+        if (k < parts.length - 1)
+            need[k] = Math.max(need[k], rowW[i] + 72);
+    });
+    const xs = [];
+    parts.forEach((p, i) => {
+        const kept = opts.keepX?.get(p.id);
+        if (i === 0)
+            return xs.push(kept?.x ?? 40);
+        const prevC = xs[i - 1] + headW[i - 1] / 2;
+        const minC = prevC + Math.max(need[i - 1], headW[i - 1] / 2 + headW[i] / 2 + 32);
+        const fresh = minC - headW[i] / 2;
+        xs.push(kept ? Math.max(kept.x, prevC + headW[i - 1] / 2 + 24) : fresh);
+    });
+    parts.forEach((p, i) => {
+        const kept = opts.keepX?.get(p.id);
+        if (kept && kept.w > headW[i])
+            headW[i] = kept.w;
+    });
+    const cx = (id) => xs[idx.get(id)] + headW[idx.get(id)] / 2;
+    // 4. Rows.
+    let y = TOP + HEAD + 28;
+    rows.forEach((r, i) => {
+        r.y = y;
+        if (r.t === 'msg')
+            y += r.item.from === r.item.to ? ROW + 16 : ROW;
+        else if (r.t === 'note') {
+            r.h = 14 + noteLines[i] * edgeLine;
+            y += r.h + 16;
+        }
+        else
+            y += (frames.some((f) => f.end === i) ? 20 : 34);
+    });
+    // Lifelines stop a short way past the last row instead of trailing off the page.
+    const lifeH = y - TOP - 6;
+    const bars = [];
+    let open = new Map();
+    const copy = (o) => new Map([...o].map(([k, v]) => [k, [...v]]));
+    // Each branch of an alt/par starts from the calls open at the top of the frame,
+    // not from wherever the previous branch left off.
+    const frameAt = new Map(frames.map((f) => [f.start, f]));
+    const sepOf = new Map(frames.flatMap((f) => f.seps.map((s) => [s, f])));
+    const snapshots = new Map();
+    const barAt = new Map();
+    rows.forEach((r, i) => {
+        const fs = frameAt.get(i);
+        if (fs)
+            snapshots.set(fs, copy(open));
+        const fsep = sepOf.get(i);
+        if (fsep)
+            open = copy(snapshots.get(fsep));
+        if (r.t !== 'msg' || r.item.from === r.item.to)
+            return;
+        const { from, to, style } = r.item;
+        if (style === 'sync') {
+            const st = open.get(to) ?? [];
+            st.push({ from: i, caller: from });
+            open.set(to, st);
+        }
+        else if (style === 'reply') {
+            const st = open.get(from) ?? [];
+            const k = st.map((s) => s.caller).lastIndexOf(to);
+            if (k >= 0) {
+                const s = st.splice(k, 1)[0];
+                bars.push({ id: `bar_${from}_${bars.length + 1}`, part: from, from: s.from, to: i });
+            }
+        }
+    });
+    // A call answered in more than one branch is one bar, to the last answer.
+    for (let k = bars.length - 1; k >= 0; k--) {
+        const b = bars[k];
+        const first = bars.find((o) => o !== b && o.part === b.part && o.from === b.from);
+        if (first) {
+            first.to = Math.max(first.to, b.to);
+            bars.splice(k, 1);
+        }
+    }
+    const activeBar = (part, row) => bars.filter((b) => b.part === part && b.from <= row && b.to >= row).pop();
+    rows.forEach((r, i) => {
+        if (r.t !== 'msg' || r.item.from === r.item.to)
+            return;
+        const { from, to, style } = r.item;
+        const dst = style === 'sync' ? bars.find((b) => b.part === to && b.from === i) : activeBar(to, i);
+        const src = style === 'reply' ? (bars.find((b) => b.part === from && b.to === i) ?? activeBar(from, i)) : activeBar(from, i);
+        barAt.set(i, { src, dst });
+    });
+    // 6. Cells.
+    const vertices = [];
+    const edges = [];
+    const top = (b) => rows[b.from].y - 6;
+    const barH = (b) => rows[b.to].y + 6 - top(b);
+    parts.forEach((p, i) => {
+        const box = { x: xs[i], y: TOP, w: headW[i], h: lifeH };
+        const keep = opts.keep?.get(p.id);
+        vertices.push({
+            id: p.id,
+            parent: '1',
+            attrs: {
+                ...(keep?.attrs ?? {}),
+                label: keep?.label ?? nodeLabel(p.label, p.tech, { theme, type: 'sequence', kind: p.kind, color: p.color, highlight: p.highlight }),
+                aiviz_kind: p.kind,
+                aiviz_label: p.label,
+                ...(p.tech ? { aiviz_tech: p.tech } : {}),
+                ...lookAttrs(p),
+                aiviz_auto: autoAttr(box),
+            },
+            style: keep?.style?.replace(/(^|;)size=\d+/, `$1size=${HEAD}`) ?? lifelineStyle(p.kind, theme, HEAD, p),
+            box,
+        });
+    });
+    for (const b of bars) {
+        const i = idx.get(b.part);
+        vertices.push({
+            id: b.id,
+            parent: b.part,
+            attrs: { aiviz_type: 'bar' },
+            style: activationStyle(parts[i].kind, theme, parts[i]),
+            box: { x: headW[i] / 2 - BAR_W / 2, y: top(b) - TOP, w: BAR_W, h: barH(b) },
+        });
+    }
+    // Frames before messages so arrows draw on top.
+    for (const f of frames) {
+        const ps = [...f.parts].map((p) => idx.get(p)).filter((v) => v != null);
+        const lo = ps.length ? Math.min(...ps) : 0, hi = ps.length ? Math.max(...ps) : 0;
+        const inset = f.depth * 10;
+        const fx = cx(parts[lo].id) - Math.max(80, headW[lo] / 2 + 16) + inset;
+        const fx2 = cx(parts[hi].id) + Math.max(80, headW[hi] / 2 + 16) - inset;
+        const fy = rows[f.start].y - 4, fy2 = rows[f.end].y;
+        vertices.push({ id: f.id, parent: '1', attrs: { label: f.op, aiviz_type: 'frame', aiviz_frame: f.op }, style: frameStyle(theme), box: { x: fx, y: fy, w: fx2 - fx, h: fy2 - fy } });
+        const guard = (when, gy, k) => {
+            if (!when)
+                return;
+            // Start right of the operator label, then step past any lifeline the text would cover.
+            const gw = Math.max(80, Math.ceil(tm.width(`[${when}]`, fonts.edge)) + 16);
+            let gx = fx + 10 + Math.ceil(tm.width(f.op, fonts.group)) + 8;
+            for (const c of [...parts.map((p) => cx(p.id))].sort((a, b) => a - b))
+                if (c + BAR_W / 2 + 4 > gx && c - BAR_W / 2 - 4 < gx + gw)
+                    gx = c + BAR_W / 2 + 6;
+            vertices.push({
+                id: `${f.id}_g${k}`,
+                parent: '1',
+                attrs: { label: `[${when}]`, aiviz_type: 'guard', aiviz_guard: `${f.id}:${k}` },
+                style: guardStyle(theme),
+                box: { x: gx, y: gy, w: gw, h: Math.max(22, edgeLine + 6) },
+            });
+        };
+        guard(f.whens[0], fy, 0);
+        f.seps.forEach((s, k) => {
+            const sy = rows[s].y + 4;
+            edges.push({
+                id: `${f.id}_s${k + 1}`,
+                parent: '1',
+                attrs: { label: '', aiviz_type: 'sep', aiviz_sep: `${f.id}:${k + 1}` },
+                style: separatorStyle(theme),
+                source: '',
+                target: '',
+                geomRaw: `<mxGeometry relative="1" as="geometry"><mxPoint x="${fx}" y="${sy}" as="sourcePoint"/><mxPoint x="${fx2}" y="${sy}" as="targetPoint"/></mxGeometry>`,
+            });
+            guard(f.whens[k + 1], sy + 2, k + 1);
+        });
+    }
+    rows.forEach((r, i) => {
+        if (r.t === 'note') {
+            const it = r.item;
+            const ids = it.over.map((p) => idx.get(p)).sort((a, b) => a - b);
+            const w = rowW[i] + 24;
+            let x, width;
+            if (it.side === 'over') {
+                const l = cx(parts[ids[0]].id), rr = cx(parts[ids[ids.length - 1]].id);
+                width = Math.max(w, rr - l + 48, 96);
+                x = (l + rr) / 2 - width / 2;
+            }
+            else {
+                width = Math.min(Math.max(w, 96), NOTE_W);
+                const c = cx(parts[ids[0]].id);
+                x = it.side === 'right' ? c + 16 : c - 16 - width;
+            }
+            vertices.push({
+                id: `note_${i}`,
+                parent: '1',
+                attrs: { label: it.text, aiviz_type: 'note', aiviz_note: it.side, aiviz_over: it.over.join(',') },
+                style: noteStyle(theme),
+                box: { x, y: r.y - 4, w: Math.ceil(width / 8) * 8, h: r.h },
+            });
+        }
+    });
+    rows.forEach((r, i) => {
+        if (r.t !== 'msg')
+            return;
+        const { from, to, style, label } = r.item;
+        const self = from === to;
+        const attrs = { label: label ?? '', aiviz_msg: style, ...lookAttrs(r.item) };
+        const id = `m_${i}`;
+        if (self) {
+            const c = cx(from), lh = lifeH;
+            edges.push({
+                id, parent: '1', attrs,
+                style: messageStyle(style, theme, true, r.item) + `exitX=0.5;exitY=${((r.y - TOP) / lh).toFixed(4)};entryX=0.5;entryY=${((r.y + 20 - TOP) / lh).toFixed(4)};exitDx=0;exitDy=0;entryDx=0;entryDy=0;`,
+                source: from, target: from,
+                points: [{ x: c + 40, y: r.y }, { x: c + 40, y: r.y + 20 }],
+            });
+            return;
+        }
+        const at = barAt.get(i) ?? {};
+        const rightward = idx.get(to) > idx.get(from);
+        const end = (part, bar, isSource) => {
+            if (bar) {
+                const fy = (r.y - top(bar)) / barH(bar);
+                const side = isSource === rightward ? 1 : 0;
+                return { cell: bar.id, x: side, y: fy };
+            }
+            return { cell: part, x: 0.5, y: (r.y - TOP) / lifeH };
+        };
+        const s = end(from, at.src, true), t = end(to, at.dst, false);
+        edges.push({
+            id, parent: '1', attrs,
+            labelX: label ? labelGap(cx(from), cx(to), rowW[i] + 16, parts.map((p) => cx(p.id))) : undefined,
+            style: messageStyle(style, theme, false, r.item) + `exitX=${s.x};exitY=${s.y.toFixed(4)};exitDx=0;exitDy=0;entryX=${t.x};entryY=${t.y.toFixed(4)};entryDx=0;entryDy=0;`,
+            source: s.cell, target: t.cell, points: [],
+        });
+    });
+    return {
+        name: opts.name ?? d.title ?? 'Sequence',
+        meta: diagramMeta(d, opts.extraMeta),
+        background: palette(theme).canvas,
+        vertices,
+        edges,
+        raw: [],
+    };
+}

package/dist/layout/text.js

@@ -0,0 +1,73 @@
+const key = (f) => `${f.weight} ${f.size} ${f.family}`;
+export class TextMeasurer {
+    measure;
+    widths = new Map();
+    constructor(measure) {
+        this.measure = measure;
+    }
+    /** Measure every word (and the space) of these texts. Call before wrap/width. */
+    async prepare(items) {
+        const reqs = [];
+        const keys = [];
+        const add = (word, f) => {
+            const k = `${key(f)}|${word}`;
+            if (this.widths.has(k) || keys.includes(k))
+                return;
+            keys.push(k);
+            reqs.push([word, f.size, f.weight, f.family]);
+        };
+        for (const [text, f] of items) {
+            if (!text)
+                continue;
+            add(' ', f);
+            add(text, f);
+            for (const w of words(text))
+                add(w, f);
+        }
+        if (!reqs.length)
+            return;
+        const out = await this.measure(reqs);
+        keys.forEach((k, i) => this.widths.set(k, out[i]));
+    }
+    get(word, f) {
+        const w = this.widths.get(`${key(f)}|${word}`);
+        if (w == null)
+            throw new Error(`linework: text not measured: "${word}"`);
+        return w + (f.tracking ?? 0) * word.length;
+    }
+    /** Width of the text on one line. */
+    width(text, f) {
+        return text ? this.get(text, f) : 0;
+    }
+    /** Greedy word wrap at maxW. */
+    wrap(text, f, maxW) {
+        if (!text)
+            return { lines: [], width: 0 };
+        const whole = this.get(text, f);
+        if (whole <= maxW)
+            return { lines: [text], width: whole };
+        const space = this.get(' ', f);
+        const lines = [];
+        let cur = '', curW = 0, width = 0;
+        for (const w of words(text)) {
+            const ww = this.get(w, f);
+            if (cur && curW + space + ww > maxW) {
+                lines.push(cur);
+                width = Math.max(width, curW);
+                cur = w;
+                curW = ww;
+            }
+            else {
+                curW = cur ? curW + space + ww : ww;
+                cur = cur ? `${cur} ${w}` : w;
+            }
+        }
+        if (cur) {
+            lines.push(cur);
+            width = Math.max(width, curW);
+        }
+        // Summing word widths drops kerning across spaces; round up a hair.
+        return { lines, width: Math.ceil(width + 1) };
+    }
+}
+const words = (t) => t.split(/\s+/).filter(Boolean);