@itsthecsguy/linework 0.1.3 → 0.2.0

package/dist/layout/layout.js

@@ -156,7 +156,11 @@ function nodeSizes(d, tm, fonts) {
             continue;
         }
         if (shape === 'diamond') {
-            const t = textOf(n, fonts.maxText * 0.7);
+            // A diamond holds little text for its size. Past two lines, wrap wider:
+            // three lines in a wider diamond take less room than four in a tall one.
+            let t = textOf(n, fonts.maxText * 0.7);
+            if (t.lines > 2)
+                t = textOf(n, fonts.maxText);
             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;
@@ -274,6 +278,45 @@ async function run(d, dir, sizes, labels, groupMin, groupTop, order, pins = new
         if (call)
             flipped.add(pairs === 'reply' ? e.id : call.id);
     });
+    // The edge that closes a loop (a retry, "new findings, investigate again")
+    // points back at a box that was declared earlier and already appears in an
+    // earlier edge. Lay it out reversed, so the main path keeps running forward
+    // whichever branch ELK happens to walk first.
+    const index = new Map(d.nodes.map((n, i) => [n.id, i]));
+    const firstUse = new Map();
+    d.edges.forEach((e, i) => {
+        for (const id of [e.from, e.to])
+            if (!firstUse.has(id))
+                firstUse.set(id, i);
+    });
+    const back = d.edges
+        .map((e, i) => ({ e, i }))
+        .filter(({ e, i }) => e.from !== e.to && index.get(e.to) < index.get(e.from) && firstUse.get(e.to) < i)
+        // Call-and-reply pairs are handled above.
+        .filter(({ e }) => !d.edges.some((x) => x.from === e.to && x.to === e.from))
+        // Last written first: once the loop's closing edge is cut, an earlier
+        // backward edge inside the same loop is no longer part of a cycle and stays.
+        .reverse()
+        .map(({ e }) => e);
+    const cut = new Set();
+    const reaches = (from, to) => {
+        const seen = new Set([from]);
+        for (const q = [from]; q.length;) {
+            const cur = q.pop();
+            if (cur === to)
+                return true;
+            for (const x of d.edges)
+                if (x.from === cur && !cut.has(x.id) && !seen.has(x.to))
+                    (seen.add(x.to), q.push(x.to));
+        }
+        return false;
+    };
+    for (const e of back) {
+        if (!reaches(e.to, e.from))
+            continue;
+        cut.add(e.id);
+        flipped.add(e.id);
+    }
     root.edges = d.edges.map((e, i) => {
         const src = pinFor(pins, e.from, e.id, 'from') ?? e.from, dst = pinFor(pins, e.to, e.id, 'to') ?? e.to;
         const flip = flipped.has(e.id);

package/dist/lint/check.js

@@ -63,9 +63,25 @@ export function check(cells) {
         if (p?.container && !inside(n.box, p.box, 2))
             findings.push({ level: 'warning', rule: 'outside-group', message: `${name(n)} sticks out of its group ${name(p)}` });
     }
+    // A box drawn inside a group reads as a member of it.
+    const groups = containers.filter((g) => !scaffold(g));
+    for (const n of nodes) {
+        const mine = ancestors(n.id);
+        for (const g of groups)
+            if (!mine.has(g.id) && inter(n.box, g.box) > 0.25 * n.box.w * n.box.h)
+                findings.push({ level: 'warning', rule: 'in-other-group', message: `${name(n)} sits inside ${name(g)} but isn't in that group; move it out, or put it in the group` });
+    }
     for (const e of edges) {
         const pts = e.points;
         const skip = new Set([e.source, e.target, ...ancestors(e.source), ...ancestors(e.target)]);
+        // A line through a group it has no end in looks like it connects to something there.
+        for (const g of groups) {
+            if (skip.has(g.id))
+                continue;
+            const r = shrink(g.box, 6);
+            if (pts.some((p, i) => i < pts.length - 1 && segHitsBox(p, pts[i + 1], r)))
+                findings.push({ level: 'warning', rule: 'edge-through-group', message: `edge ${edgeName(e, byId)} runs through ${name(g)}, which neither end is in` });
+        }
         for (const n of nodes) {
             if (skip.has(n.id))
                 continue;

package/dist/lint/fixlabels.js

@@ -42,14 +42,19 @@ export function runSpots(pts, label) {
 function labelEdges(findings) {
     return [...new Set(findings.filter((f) => LABEL_RULES.has(f.rule) && f.labelEdges).flatMap((f) => f.labelEdges))];
 }
+/**
+ * Returns the fixed XML and its cells. Only label backgrounds change after the
+ * cells are read, and those don't move anything, so the cells stay valid for it.
+ */
 export async function fixLabels(b, xml, maxRounds = 6) {
     let cur = xml;
-    let score = check(await b.inspect(cur)).findings.filter((f) => LABEL_RULES.has(f.rule)).length;
+    const labelScore = (cells) => check(cells).findings.filter((f) => LABEL_RULES.has(f.rule)).length;
+    let score = labelScore(await b.inspect(cur));
     let moved = 0;
     for (let round = 0; round < maxRounds && score > 0; round++) {
+        // The cells of `cur`, kept current as labels move: a move changes only that label's box.
         const cells = await b.inspect(cur);
-        const res = check(cells);
-        const targets = labelEdges(res.findings);
+        const targets = labelEdges(check(cells).findings);
         let improved = false;
         for (const id of targets) {
             const doc = new DOMParser().parseFromString(cur, 'text/xml');
@@ -59,19 +64,21 @@ export async function fixLabels(b, xml, maxRounds = 6) {
             const base = Number(g.getAttribute('x') ?? 0);
             const cell = cells.find((c) => c.id === id);
             const spots = cell?.points && cell.textBox ? runSpots(cell.points, cell.textBox) : [];
-            const tries = [...spots, ...OFFSETS.map((off) => Math.max(-0.9, Math.min(0.9, base + off)))];
+            const tries = [...spots, ...OFFSETS.map((off) => Math.max(-0.9, Math.min(0.9, base + off)))].map((x) => Number(x.toFixed(3)));
+            const boxes = await b.labelBoxes(cur, id, tries);
             let best;
-            for (const x of tries) {
-                g.setAttribute('x', x.toFixed(3));
-                const candidate = new XMLSerializer().serializeToString(doc);
-                const s = check(await b.inspect(candidate)).findings.filter((f) => LABEL_RULES.has(f.rule)).length;
+            for (let i = 0; i < tries.length; i++) {
+                const s = labelScore(cells.map((c) => (c.id === id ? { ...c, textBox: boxes[i] } : c)));
                 if (s < (best?.score ?? score))
-                    best = { xml: candidate, score: s };
+                    best = { x: tries[i], score: s, box: boxes[i] };
                 if (s === 0)
                     break;
             }
             if (best) {
-                cur = best.xml;
+                g.setAttribute('x', best.x.toFixed(3));
+                cur = new XMLSerializer().serializeToString(doc);
+                if (cell)
+                    cell.textBox = best.box;
                 score = best.score;
                 moved++;
                 improved = true;
@@ -82,16 +89,17 @@ export async function fixLabels(b, xml, maxRounds = 6) {
         if (!improved)
             break;
     }
-    cur = await matchLabelBackgrounds(b, cur);
-    return { xml: cur, moved };
+    const cells = await b.inspect(cur);
+    cur = await matchLabelBackgrounds(b, cur, cells);
+    return { xml: cur, moved, cells };
 }
 /**
  * A label's backing has to match what it sits on: the fill of the smallest group
  * under it, or the canvas. Run after labels move, since a move can carry a label
  * from the canvas onto a group or back.
  */
-export async function matchLabelBackgrounds(b, xml) {
-    const cells = await b.inspect(xml);
+export async function matchLabelBackgrounds(b, xml, known) {
+    const cells = known ?? (await b.inspect(xml));
     const doc = new DOMParser().parseFromString(xml, 'text/xml');
     const canvas = doc.getElementsByTagName('mxGraphModel')[0]?.getAttribute('background') ?? '#FFFFFF';
     const styleOf = new Map();

package/dist/mcp/server.js

@@ -30,7 +30,7 @@ const PKG = (() => {
     }
     throw new Error('linework: bundled skill not found. Reinstall linework.');
 })();
-const TOOL_NAMES = `In this MCP server the CLI commands in the guide are tools: build -> build_diagram, show -> show_diagram, check -> check_diagram, render -> render_diagram, tidy -> tidy_diagram, import -> import_mermaid, icons -> list_icons, edit -> edit_diagram, publish -> publish_diagram. Pass the spec text to build_diagram directly instead of writing a file.\n\n`;
+const TOOL_NAMES = `In this MCP server the CLI commands in the guide are tools: build -> build_diagram, show -> show_diagram, check -> check_diagram, render -> render_diagram, tidy -> tidy_diagram, import -> import_mermaid, icons -> list_icons, edit -> edit_diagram, publish -> publish_diagram. Pass the spec text to build_diagram directly instead of writing a file. There are no set, add or rm tools: for a small change, call show_diagram, edit its output and pass that to build_diagram, which keeps the layout the same way.\n\n`;
 export function createServer(opts) {
     let browser;
     const getBrowser = () => (browser ??= DrawioBrowser.launch({ scale: 2 }));
@@ -66,13 +66,13 @@ export function createServer(opts) {
         description: 'Returns the linework guide: diagram types, the YAML spec format with examples, and the style rules. Read it before your first diagram.',
         inputSchema: z.object({
             topic: z
-                .enum(['overview', 'spec', 'style', 'google-docs'])
+                .enum(['overview', 'spec', 'style', 'google-docs', 'troubleshooting'])
                 .default('overview')
-                .describe('overview: workflow and cheat sheet. spec: the full spec reference. style: what makes a good diagram. google-docs: getting diagrams into Google Docs.'),
+                .describe('overview: workflow and cheat sheet. spec: the full spec reference. style: what makes a good diagram. google-docs: getting diagrams into Google Docs. troubleshooting: what to do when a command fails.'),
         }),
         annotations: { readOnlyHint: true },
     }, async ({ topic }) => {
-        const file = { overview: 'SKILL.md', spec: 'references/spec.md', style: 'references/style-guide.md', 'google-docs': 'references/google-docs.md' }[topic];
+        const file = { overview: 'SKILL.md', spec: 'references/spec.md', style: 'references/style-guide.md', 'google-docs': 'references/google-docs.md', troubleshooting: 'references/troubleshooting.md' }[topic];
         const body = fs.readFileSync(path.join(PKG, 'skills', 'linework', file), 'utf8').replace(/^---\n[\s\S]*?\n---\n/, '');
         return { content: [text(TOOL_NAMES + body)] };
     });

package/dist/patch.js

@@ -0,0 +1,167 @@
+// One-line changes to an existing diagram: set a field, add or remove a box or
+// an edge. Each reads the file's current spec (hand edits included), changes it
+// and builds, so the layout merges the same way a show / edit / build round does.
+import YAML, { isMap, isScalar, isSeq } from 'yaml';
+import { build, show } from './api.js';
+export class PatchError extends Error {
+}
+const TOP = new Set(['title', 'theme', 'direction']);
+const TEXT = new Set(['label', 'tech', 'title']);
+// "from ARROW to" or "from ARROW to: label". ER cardinalities count as arrows too.
+const EDGE = /^(\S+)\s+(\S*(?:->|=>|--|\.\.)\S*|<->)\s+([^\s:]+)(?::\s*(.*))?$/;
+function mapAt(doc, key, create = false) {
+    const m = doc.get(key);
+    if (isMap(m))
+        return m;
+    if (!create)
+        return undefined;
+    const made = doc.createNode({});
+    doc.set(key, made);
+    return made;
+}
+function seqAt(doc, key, create = false) {
+    const s = doc.get(key);
+    if (isSeq(s))
+        return s;
+    if (!create)
+        return undefined;
+    const made = doc.createNode([]);
+    doc.set(key, made);
+    return made;
+}
+const edgeEnds = (item) => {
+    if (isScalar(item) && typeof item.value === 'string') {
+        const m = EDGE.exec(item.value.trim());
+        return m ? { from: m[1], to: m[3] } : undefined;
+    }
+    // Unquoted, "a -> b: label" is a one-pair YAML map whose key is the edge.
+    if (isMap(item) && item.items.length === 1 && isScalar(item.items[0].key) && typeof item.items[0].key.value === 'string') {
+        const m = EDGE.exec(item.items[0].key.value.trim());
+        if (m)
+            return { from: m[1], to: m[3] };
+    }
+    if (isMap(item) && item.has('from') && item.has('to'))
+        return { from: String(item.get('from')), to: String(item.get('to')) };
+    return undefined;
+};
+/** Apply the ops to a spec's YAML text and return the new text. */
+export function patchSpec(yaml, ops) {
+    const doc = YAML.parseDocument(yaml);
+    const sequence = doc.get('type') === 'sequence';
+    const nodesKey = sequence ? 'participants' : 'nodes';
+    const edgesKey = sequence ? 'messages' : 'edges';
+    const has = (key, id) => !!mapAt(doc, key)?.has(id);
+    const known = () => [...(mapAt(doc, nodesKey)?.items ?? []), ...(mapAt(doc, 'groups')?.items ?? [])].map((p) => String(isScalar(p.key) ? p.key.value : p.key)).join(', ');
+    for (const { op, args } of ops) {
+        if (!args.length)
+            throw new PatchError(`${op} needs at least one argument`);
+        for (const arg of args) {
+            if (op === 'set') {
+                const eq = arg.indexOf('=');
+                if (eq < 1)
+                    throw new PatchError(`can't read "${arg}". Write it as id.field=value, for example api.label="Checkout API", or theme=dark.`);
+                const path = arg.slice(0, eq), raw = arg.slice(eq + 1);
+                const dot = path.lastIndexOf('.');
+                const field = dot < 0 ? path : path.slice(dot + 1);
+                const value = TEXT.has(field) ? raw : YAML.parse(raw);
+                if (dot < 0) {
+                    if (!TOP.has(path))
+                        throw new PatchError(`"${path}" isn't a diagram setting. Settings: title, theme, direction. For a box, write id.field=value.`);
+                    if (raw === '')
+                        doc.delete(path);
+                    else
+                        doc.set(path, value);
+                    continue;
+                }
+                const id = path.slice(0, dot);
+                const key = has(nodesKey, id) ? nodesKey : has('groups', id) ? 'groups' : undefined;
+                if (!key)
+                    throw new PatchError(`no box or group named "${id}". There are: ${known()}`);
+                const owner = mapAt(doc, key);
+                const found = owner.get(id, true);
+                let entry;
+                if (isMap(found))
+                    entry = found;
+                else {
+                    // "id: Label" and "id:" are short for a map.
+                    const label = isScalar(found) && found.value != null ? { label: found.value } : {};
+                    entry = doc.createNode(label, { flow: true });
+                    owner.set(id, entry);
+                }
+                if (raw === '')
+                    entry.delete(field);
+                else
+                    entry.set(field, value);
+            }
+            else if (op === 'add') {
+                const text = arg.trim();
+                if (EDGE.test(text)) {
+                    seqAt(doc, edgesKey, true).add(doc.createNode(text));
+                    continue;
+                }
+                const group = /^group\s+/.test(text);
+                const parsed = YAML.parse(group ? text.replace(/^group\s+/, '') : text);
+                const entries = typeof parsed === 'string' ? [[parsed, {}]] : parsed && typeof parsed === 'object' ? Object.entries(parsed) : [];
+                if (!entries.length)
+                    throw new PatchError(`can't read "${arg}". A box: "fraud: { label: Fraud check, in: vpc }". An edge: "api -> fraud: score". A group: "group vpc: { label: Production VPC }".`);
+                const key = group ? 'groups' : nodesKey;
+                for (const [id, v] of entries) {
+                    if (has(nodesKey, id) || has('groups', id))
+                        throw new PatchError(`"${id}" already exists. Use set to change it.`);
+                    const val = typeof v === 'string' ? { label: v } : (v ?? {});
+                    mapAt(doc, key, true).set(id, doc.createNode(val, { flow: true }));
+                }
+            }
+            else {
+                const text = arg.trim();
+                const m = EDGE.exec(text);
+                if (m) {
+                    const list = seqAt(doc, edgesKey);
+                    const i = list?.items.findIndex((it) => {
+                        const e = edgeEnds(it);
+                        return e && e.from === m[1] && e.to === m[3];
+                    });
+                    if (!list || i === undefined || i < 0)
+                        throw new PatchError(`no edge from "${m[1]}" to "${m[3]}"`);
+                    list.delete(i);
+                    continue;
+                }
+                if (has(nodesKey, text)) {
+                    mapAt(doc, nodesKey).delete(text);
+                    const list = seqAt(doc, edgesKey);
+                    if (list)
+                        for (let i = list.items.length - 1; i >= 0; i--) {
+                            const e = edgeEnds(list.items[i]);
+                            if (e && (e.from === text || e.to === text))
+                                list.delete(i);
+                        }
+                }
+                else if (has('groups', text)) {
+                    // Its members move up to the group it was in, or out to the top level.
+                    const groups = mapAt(doc, 'groups');
+                    const self = groups.get(text);
+                    const up = isMap(self) ? self.get('in') : undefined;
+                    groups.delete(text);
+                    for (const k of [nodesKey, 'groups'])
+                        for (const p of mapAt(doc, k)?.items ?? [])
+                            if (isMap(p.value) && p.value.get('in') === text) {
+                                if (up)
+                                    p.value.set('in', up);
+                                else
+                                    p.value.delete('in');
+                            }
+                    if (!groups.items.length)
+                        doc.delete('groups');
+                }
+                else
+                    throw new PatchError(`no box, group or edge matches "${arg}". There are: ${known()}`);
+            }
+        }
+    }
+    return doc.toString({ lineWidth: 0 });
+}
+/** Change a diagram file in place. The existing layout is kept. */
+export async function patchFile(file, ops, opts = {}) {
+    const yaml = patchSpec(show(file).yaml, ops);
+    return build(yaml, { ...opts, out: file });
+}

package/dist/render/browser.js

@@ -5,10 +5,10 @@ import fs from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { createRequire } from 'node:module';
+import http from 'node:http';
 import { chromium } from 'playwright-core';
 import { FONT_STACK } from '../drawio/theme.js';
 import { FACES, embedFonts, fontFaceCss, fontsDir } from './fonts.js';
-const ORIGIN = 'http://aiviz.local';
 export function assetsDir() {
     // dist/render/browser.js or src/render/browser.ts -> <pkg>/assets/drawio
     let dir = path.dirname(fileURLToPath(import.meta.url));
@@ -90,6 +90,23 @@ window.aiviz = {
   hasStencil: function (name) {
     return mxStencilRegistry.getStencil(name) != null;
   },
+  // Where an edge's label lands at each of several positions along the edge
+  // (draw.io's -1..1 x). Moving a label changes nothing else in the diagram, so
+  // one decode serves every candidate instead of one full inspect per try.
+  labelBoxes: function (xml, id, xs) {
+    return withGraph(xml, function (graph) {
+      var model = graph.getModel(), cell = model.getCell(id);
+      if (!cell) return xs.map(function () { return null; });
+      return xs.map(function (x) {
+        var g = cell.geometry.clone();
+        g.x = x;
+        model.setGeometry(cell, g);
+        var st = graph.view.getState(cell);
+        var tb = st && st.text && st.text.boundingBox;
+        return tb ? { x: tb.x, y: tb.y, w: tb.width, h: tb.height } : null;
+      });
+    });
+  },
   inspect: function (xml) {
     return withGraph(xml, function (graph) {
       var model = graph.getModel(), out = [];
@@ -127,38 +144,34 @@ const TYPES = { '.js': 'text/javascript', '.css': 'text/css', '.html': 'text/htm
 export class DrawioBrowser {
     browser;
     page;
-    constructor(browser, page) {
+    server;
+    constructor(browser, page, server) {
         this.browser = browser;
         this.page = page;
+        this.server = server;
     }
     static async launch(opts = {}) {
-        const browser = await launchChromium();
-        const page = await browser.newPage({ deviceScaleFactor: opts.scale ?? 2 });
-        const dir = assetsDir();
-        const fonts = fontsDir();
-        const html = host();
-        await page.route(`${ORIGIN}/**`, async (route) => {
-            const url = new URL(route.request().url());
-            if (url.pathname === '/' || url.pathname === '/host.html')
-                return route.fulfill({ status: 200, contentType: 'text/html', body: html });
-            if (url.pathname.startsWith('/aiviz-fonts/')) {
-                const f = FACES.find((x) => `/aiviz-fonts/${x.file}` === url.pathname);
-                return f ? route.fulfill({ status: 200, contentType: 'font/woff2', body: fs.readFileSync(path.join(fonts, f.file)) }) : route.fulfill({ status: 404, body: '' });
-            }
-            const file = path.join(dir, path.normalize(url.pathname));
-            if (!file.startsWith(dir) || !fs.existsSync(file))
-                return route.fulfill({ status: 404, body: '' });
-            return route.fulfill({ status: 200, contentType: TYPES[path.extname(file)] ?? 'application/octet-stream', body: fs.readFileSync(file) });
-        });
-        // Nothing else may load: keeps rendering offline and deterministic.
-        await page.route(/^(?!http:\/\/aiviz\.local\/).*/, (route) => route.abort());
-        await page.goto(`${ORIGIN}/host.html`);
-        await page.waitForFunction(() => window.ready === true, null, { timeout: 30000 });
-        // Measuring before a font loads would size every box for the fallback font.
-        const ok = await page.evaluate((faces) => Promise.all(faces.map((f) => document.fonts.load(`${f.weight} 16px "${f.family}"`).then((r) => r.length > 0))), FACES.map(({ family, weight }) => ({ family, weight })));
-        if (ok.includes(false))
-            throw new Error('linework: bundled fonts failed to load (assets/fonts). Reinstall linework.');
-        return new DrawioBrowser(browser, page);
+        // Chromium starts while the asset server binds.
+        const [browser, server] = await Promise.all([launchChromium(), serveAssets()]);
+        const origin = `http://127.0.0.1:${server.address().port}`;
+        try {
+            const page = await browser.newPage({ deviceScaleFactor: opts.scale ?? 2 });
+            // Nothing else may load: keeps rendering offline and deterministic.
+            const own = new RegExp(`^${origin.replace(/[.]/g, '\\.')}/`);
+            await page.route((url) => !own.test(url.href), (route) => route.abort());
+            await page.goto(`${origin}/host.html`);
+            await page.waitForFunction(() => window.ready === true, null, { timeout: 30000 });
+            // Measuring before a font loads would size every box for the fallback font.
+            const ok = await page.evaluate((faces) => Promise.all(faces.map((f) => document.fonts.load(`${f.weight} 16px "${f.family}"`).then((r) => r.length > 0))), FACES.map(({ family, weight }) => ({ family, weight })));
+            if (ok.includes(false))
+                throw new Error('linework: bundled fonts failed to load (assets/fonts). Reinstall linework.');
+            return new DrawioBrowser(browser, page, server);
+        }
+        catch (e) {
+            await browser.close().catch(() => { });
+            server.close();
+            throw e;
+        }
     }
     measure(reqs) {
         return this.page.evaluate((r) => window.aiviz.measure(r), reqs);
@@ -182,12 +195,63 @@ export class DrawioBrowser {
     hasStencil(name) {
         return this.page.evaluate((n) => window.aiviz.hasStencil(n), name);
     }
+    // inspect is a pure function of the XML, and a build asks about the same XML
+    // more than once (lint, label fixing, the final check).
+    seen = new Map();
     inspect(xml) {
-        return this.page.evaluate((x) => window.aiviz.inspect(x), xml);
+        let hit = this.seen.get(xml);
+        if (!hit) {
+            hit = this.page.evaluate((x) => window.aiviz.inspect(x), xml);
+            hit.catch(() => this.seen.delete(xml));
+            if (this.seen.size >= 8)
+                this.seen.delete(this.seen.keys().next().value);
+            this.seen.set(xml, hit);
+        }
+        // Callers may change the cells; each gets its own copy.
+        return hit.then((cells) => structuredClone(cells));
     }
-    close() {
-        return this.browser.close();
+    /** Label boxes for edge `id` with its label at each draw.io position in `xs`. */
+    labelBoxes(xml, id, xs) {
+        return this.page.evaluate(([x, i, p]) => window.aiviz.labelBoxes(x, i, p), [xml, id, xs]);
     }
+    async close() {
+        await this.browser.close();
+        this.server.closeAllConnections();
+        this.server.close();
+    }
+}
+/**
+ * The draw.io runtime is 16MB of script. Served from a local port, Chromium reads
+ * it straight off the socket; through Playwright's request interception every
+ * byte would cross the DevTools protocol first.
+ */
+function serveAssets() {
+    const dir = assetsDir();
+    const fonts = fontsDir();
+    const html = host();
+    const send = (res, status, type, body) => {
+        res.writeHead(status, { 'content-type': type, 'cache-control': 'no-store' });
+        res.end(body);
+    };
+    const server = http.createServer((req, res) => {
+        const pathname = new URL(req.url ?? '/', 'http://x').pathname;
+        if (pathname === '/' || pathname === '/host.html')
+            return send(res, 200, 'text/html', html);
+        if (pathname.startsWith('/aiviz-fonts/')) {
+            const f = FACES.find((x) => `/aiviz-fonts/${x.file}` === pathname);
+            return f ? send(res, 200, 'font/woff2', fs.readFileSync(path.join(fonts, f.file))) : send(res, 404, 'text/plain', '');
+        }
+        const file = path.join(dir, path.normalize(decodeURIComponent(pathname)));
+        if (!file.startsWith(dir + path.sep) || !fs.existsSync(file) || !fs.statSync(file).isFile())
+            return send(res, 404, 'text/plain', '');
+        send(res, 200, TYPES[path.extname(file)] ?? 'application/octet-stream', fs.readFileSync(file));
+    });
+    // A server that's only waiting on a browser that already exited shouldn't keep node alive.
+    server.unref();
+    return new Promise((resolve, reject) => {
+        server.once('error', reject);
+        server.listen(0, '127.0.0.1', () => resolve(server));
+    });
 }
 /** Playwright-core's own installer, so the Chromium build always matches the version we run. */
 export function browserInstallCommand() {

package/dist/render/fonts.js

@@ -2,7 +2,9 @@
 // SVG gets a subset of the faces it uses (only the glyphs in its text), so a
 // diagram looks the same on GitHub, in a browser and in a doc, and text that fit
 // when linework sized the boxes still fits wherever it is shown.
+import crypto from 'node:crypto';
 import fs from 'node:fs';
+import os from 'node:os';
 import path from 'node:path';
 import subsetFont from 'subset-font';
 import { assetsDir } from './browser.js';
@@ -54,7 +56,7 @@ export async function embedFonts(svg) {
     text = [...new Set(text + text.toUpperCase() + ' ')].join('');
     const rules = [];
     for (const f of FACES.filter((x) => families.includes(x.family))) {
-        const sub = await subsetFont(read(f), text, { targetFormat: 'woff2' });
+        const sub = await subset(f, text);
         rules.push(`@font-face{font-family:"${f.family}";font-weight:${f.weight};font-style:normal;src:url(data:font/woff2;base64,${sub.toString('base64')}) format("woff2");}`);
     }
     const style = `<style id="aiviz-fonts" type="text/css">${rules.join('')}</style>`;
@@ -64,3 +66,65 @@ export async function embedFonts(svg) {
         return svg.replace(/<defs[^>]*>/, (m) => m + style);
     return svg.replace(/<svg\b[^>]*>/, (m) => `${m}<defs>${style}</defs>`);
 }
+// ---------- subset cache ----------
+//
+// Compressing a subset to WOFF2 is most of embedFonts' time, and rebuilding a
+// diagram after a small edit usually needs the same characters again. A subset
+// depends only on the font file and the set of characters (not their order), so
+// that pair is the key. Kept in memory and in the user's own cache folder, never
+// a shared temp dir: whatever is there ends up inside the SVGs.
+const memo = new Map();
+const fileHash = new Map();
+/** Drop the in-memory copies, so the next lookup reads the disk cache. For tests. */
+export function forgetSubsets() {
+    memo.clear();
+}
+function cacheDir() {
+    if (process.env.LINEWORK_NO_CACHE)
+        return undefined;
+    const home = os.homedir();
+    const base = process.env.XDG_CACHE_HOME ||
+        (process.platform === 'darwin' ? path.join(home, 'Library', 'Caches') : process.platform === 'win32' ? process.env.LOCALAPPDATA || path.join(home, 'AppData', 'Local') : path.join(home, '.cache'));
+    return path.join(base, 'linework', 'fonts');
+}
+async function subset(f, text) {
+    const font = read(f);
+    let fh = fileHash.get(f.file);
+    if (!fh)
+        fileHash.set(f.file, (fh = crypto.createHash('sha256').update(font).digest('hex')));
+    const chars = [...new Set(text)].sort().join('');
+    const key = crypto.createHash('sha256').update(`${fh}\0${chars}`).digest('hex').slice(0, 32);
+    const hit = memo.get(key);
+    if (hit)
+        return hit;
+    const dir = cacheDir();
+    const file = dir && path.join(dir, `${key}.woff2`);
+    let out;
+    try {
+        const b = file ? fs.readFileSync(file) : undefined;
+        // A WOFF2 file starts with its signature; anything else is a broken write.
+        if (b && b.subarray(0, 4).toString('latin1') === 'wOF2')
+            out = b;
+    }
+    catch {
+        // not cached yet
+    }
+    if (!out) {
+        out = await subsetFont(font, text, { targetFormat: 'woff2' });
+        if (file) {
+            try {
+                fs.mkdirSync(dir, { recursive: true });
+                const tmp = `${file}.${process.pid}.tmp`;
+                fs.writeFileSync(tmp, out);
+                fs.renameSync(tmp, file);
+            }
+            catch {
+                // A read-only or full disk only costs the cache.
+            }
+        }
+    }
+    if (memo.size >= 64)
+        memo.delete(memo.keys().next().value);
+    memo.set(key, out);
+    return out;
+}

package/dist/report.js

@@ -8,6 +8,8 @@ export function buildLines(res, png) {
             parts.push(`placed ${m.placed.join(', ')}`);
         if (m.grown.length)
             parts.push(`grew ${m.grown.join(', ')}`);
+        if (m.shrunk.length)
+            parts.push(`closed up ${m.shrunk.join(', ')}`);
         if (m.removed.length)
             parts.push(`removed ${m.removed.join(', ')}`);
         if (m.rerouted)

package/dist/spec/parse.js

@@ -243,6 +243,8 @@ export function parseSpec(raw) {
             const out = edges.filter((e) => e.from === n.id);
             if (out.some((e) => !e.label))
                 warnings.push({ path: `nodes.${n.id}`, message: 'label every edge leaving a decision, e.g. "yes"/"no"' });
+            if (n.label.length > 40)
+                warnings.push({ path: `nodes.${n.id}`, message: `a diamond holds little text; shorten "${n.label.slice(0, 24)}..." to a short question and put the detail in the step before it` });
         }
     }
     highlightWarning(real, edges, warnings);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itsthecsguy/linework",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Software diagrams an AI can write and a person can edit. YAML spec in, .drawio.svg out, editable in draw.io.",
   "keywords": [
     "diagram",