@myrtilleio/redline 0.1.0

package/src/format.js

@@ -0,0 +1,346 @@
+// Shared between the Node side and the browser overlay: the bundler strips the
+// trailing `export` line and inlines this file into the client script, so keep
+// it dependency-free and browser-safe.
+
+const VERDICTS = {
+  good: { icon: '✓', label: 'Good', meaning: 'keep this, and reuse the pattern elsewhere' },
+  fix: { icon: '✗', label: 'Fix', meaning: 'change this' },
+  idea: { icon: '?', label: 'Idea', meaning: 'consider this suggestion or answer the question' },
+};
+
+function verdictOf(a) {
+  return VERDICTS[a.verdict] || VERDICTS.idea;
+}
+
+function round(n) {
+  return Math.round(Number(n) || 0);
+}
+
+// Guess what a freehand mark means from its geometry, so the AI gets
+// "circled" or "crossed out" rather than a list of coordinates.
+function describeStroke(points) {
+  if (!points || points.length < 2) return 'dot';
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity, len = 0;
+  for (let i = 0; i < points.length; i++) {
+    const [x, y] = points[i];
+    minX = Math.min(minX, x); maxX = Math.max(maxX, x);
+    minY = Math.min(minY, y); maxY = Math.max(maxY, y);
+    if (i) len += Math.hypot(x - points[i - 1][0], y - points[i - 1][1]);
+  }
+  const w = maxX - minX, h = maxY - minY;
+  const size = Math.max(w, h);
+  if (size < 12) return 'dot';
+  const [sx, sy] = points[0];
+  const [ex, ey] = points[points.length - 1];
+  const gap = Math.hypot(ex - sx, ey - sy);
+  const diag = Math.hypot(w, h);
+  if (len > 3.2 * (w + h)) return 'scribble (crossed out)';
+  // Closed loop of any proportion: a circle round a wide logo row is flat but still a circle.
+  if (gap < 0.3 * size && len > 1.8 * diag && Math.min(w, h) >= 20) return 'circled';
+  if (len < 1.25 * diag) {
+    if (h < 0.2 * w) return 'horizontal line (underline)';
+    if (w < 0.2 * h) return 'vertical line';
+    return 'diagonal line / arrow';
+  }
+  return 'freeform mark';
+}
+
+function isCheck(points) {
+  // ✓: dips to a low point early on, then rises past where it started.
+  let low = 0;
+  for (let i = 1; i < points.length; i++) if (points[i][1] > points[low][1]) low = i;
+  const t = low / (points.length - 1);
+  const [sx, sy] = points[0];
+  const [lx, ly] = points[low];
+  const [ex, ey] = points[points.length - 1];
+  return t > 0.15 && t < 0.6 && ly - sy > 8 && ey < sy && ex > lx && lx > sx;
+}
+
+function isStraight(points) {
+  let len = 0;
+  for (let i = 1; i < points.length; i++) len += Math.hypot(points[i][0] - points[i - 1][0], points[i][1] - points[i - 1][1]);
+  const [sx, sy] = points[0];
+  const [ex, ey] = points[points.length - 1];
+  return len < 1.3 * Math.hypot(ex - sx, ey - sy);
+}
+
+// Two roughly straight strokes that cross each other with opposite slopes form an ✗,
+// however wide or flat it is.
+function isCross(a, b) {
+  if (!isStraight(a) || !isStraight(b)) return false;
+  const [p1, p2, p3, p4] = [a[0], a[a.length - 1], b[0], b[b.length - 1]];
+  const slope = (p, q) => Math.sign((q[0] - p[0]) * (q[1] - p[1]));
+  if (slope(p1, p2) === slope(p3, p4) || !slope(p1, p2) || !slope(p3, p4)) return false;
+  const side = (p, q, r) => Math.sign((q[0] - p[0]) * (r[1] - p[1]) - (q[1] - p[1]) * (r[0] - p[0]));
+  return side(p1, p2, p3) !== side(p1, p2, p4) && side(p3, p4, p1) !== side(p3, p4, p2);
+}
+
+// Several strokes drawn together form one mark.
+function describeMark(paths) {
+  const list = (paths || []).filter((p) => p && p.length);
+  if (!list.length) return 'mark';
+  if (list.length === 1) return isCheck(list[0]) && describeStroke(list[0]) !== 'circled' ? 'check mark (✓)' : describeStroke(list[0]);
+  if (list.length === 2 && isCross(list[0], list[1])) return 'cross (✗, crossed out)';
+  return `${list.length} strokes: ${list.map(describeStroke).join(', ')}`;
+}
+
+function viewportLabel(vp) {
+  const kind = vp.w < 768 ? 'mobile' : vp.w < 1100 ? 'tablet' : 'desktop';
+  return `${round(vp.w)}×${round(vp.h)} (${kind})`;
+}
+
+function strokeBounds(points) {
+  const xs = points.map((p) => p[0]);
+  const ys = points.map((p) => p[1]);
+  return { x: Math.min(...xs), y: Math.min(...ys), w: Math.max(...xs) - Math.min(...xs), h: Math.max(...ys) - Math.min(...ys) };
+}
+
+function describeElement(t) {
+  const bits = [];
+  if (t.rect) bits.push(`${round(t.rect.w)}×${round(t.rect.h)} at (${round(t.rect.x)}, ${round(t.rect.y)})`);
+  const s = t.styles || {};
+  if (s.font) bits.push(`font ${s.font}`);
+  if (s.color) bits.push(`color ${s.color}`);
+  if (s.background) bits.push(`bg ${s.background}`);
+  if (s.padding) bits.push(`padding ${s.padding}`);
+  if (s.radius) bits.push(`radius ${s.radius}`);
+  if (s.layout) bits.push(s.layout);
+  return bits.join(' · ');
+}
+
+function targetLine(t) {
+  let line = `\`${t.selector}\``;
+  if (t.html) line += ` — \`${t.html}\``;
+  if (t.text) line += ` “${t.text}”`;
+  return line;
+}
+
+const short = (t) => `\`${t.selector}\`${t.text ? ` (“${t.text.slice(0, 40)}${t.text.length > 40 ? '…' : ''}”)` : ''}`;
+
+/**
+ * What a drawn mark asks for, in words: the gesture and its colour are the whole
+ * instruction when the reviewer didn't write anything.
+ */
+function markMeaning(a) {
+  const shape = describeMark(a.stroke && a.stroke.paths);
+  const v = a.verdict;
+  const quote = a.quote ? `“${a.quote}”` : 'the underlined text';
+  if (/cross|scribble/.test(shape)) {
+    return v === 'idea'
+      ? 'Crossed out as a question: does this need to be here? Propose removing or replacing it.'
+      : 'Crossed out: remove this, or replace it with something that works better.';
+  }
+  if (/check mark/.test(shape)) return 'Ticked: approved, keep it as it is.';
+  if (/circled/.test(shape)) {
+    if (v === 'good') return 'Circled as good: keep this exactly as it is, and reuse its pattern elsewhere.';
+    if (v === 'idea') return 'Circled as an idea: this area could be better. Suggest an improvement, and apply it if it is clearly better.';
+    return 'Circled to fix: something inside the circled area is off. Look at the screenshot, find what breaks the design (spacing, alignment, size, contrast, wording) and fix it.';
+  }
+  if (/horizontal/.test(shape)) {
+    if (v === 'good') return `Underlined as good: this wording works (${quote}), keep it.`;
+    if (v === 'idea') return `Underlined as an idea: consider rewording or restyling ${quote}.`;
+    return `Underlined to fix: reword or restyle ${quote}.`;
+  }
+  if (a.arrow) {
+    return `Arrow from ${short(a.arrow.from)} to ${short(a.arrow.to)}: move, align or connect the first with the second.`;
+  }
+  if (/diagonal|vertical/.test(shape)) return 'A line pointing at this area: check the screenshot for what it relates.';
+  if (shape === 'dot') return `A dot on this spot: ${VERDICTS[v] ? VERDICTS[v].meaning : 'look here'}.`;
+  return `Marked as ${VERDICTS[v] ? VERDICTS[v].label : 'Idea'}: ${VERDICTS[v] ? VERDICTS[v].meaning : ''}.`;
+}
+
+// A box with no words: its ink colour is the instruction.
+function boxMeaning(a) {
+  const what = a.region ? 'this area' : 'this element';
+  if (a.verdict === 'good') return `Boxed in green: keep ${what} as it is, and reuse its pattern.`;
+  if (a.verdict === 'idea') return `Boxed in amber: ${what} could be better. Suggest an improvement, and apply it if it is clearly better.`;
+  return `Boxed in red: ${what} needs to change. Look at the screenshot and fix what is off.`;
+}
+
+// Where we are in the turn-taking, and what the reviewer said about the last round's report.
+function roundHeader(rounds) {
+  const list = rounds || [];
+  const last = list[list.length - 1];
+  if (!last) return [];
+  const out = [`**Round ${last.n}**${last.returnedAt ? ' (you closed it; new items below are redos or were sent since)' : `: the reviewer sent ${last.count} item${last.count === 1 ? '' : 's'}`}.`];
+  const prev = [...list].reverse().find((r) => r.returnedAt && (r.readingCorrection || (r.questions || []).some((q) => q.answer)));
+  if (prev) {
+    if (prev.readingCorrection) out.push(`- The reviewer corrected your reading of the page: “${prev.readingCorrection}”`);
+    for (const q of prev.questions || []) if (q.answer) out.push(`- You asked “${q.text}”, they answered: “${q.answer}”`);
+  }
+  out.push('');
+  return out;
+}
+
+function describeEdits(e) {
+  const where = e.scope === 'all' && e.selector ? `on **every** \`${e.selector}\`` : 'on this element';
+  const lines = [];
+  if (e.props && e.props.length) {
+    lines.push(`- **Proposed change** (${where}, previewed live by the reviewer): ${e.props.map((p) => `\`${p.prop}\` ${p.from || '?'} → **${p.to}**`).join('; ')}`);
+  }
+  if (e.text) lines.push(`- **Proposed text:** “${e.text.from}” → **“${e.text.to}”**`);
+  return lines;
+}
+
+function formatVariants(a, o) {
+  const out = [];
+  const tool = o.cli ? '`redline variants <id> --file options.json`' : 'the `propose_variants` tool';
+  if (a.chosen) {
+    const v = (a.variants || []).find((x) => x.key === a.chosen);
+    if (v) {
+      out.push(`- **The reviewer picked option ${v.key}, “${v.label}”.** Build it in the source (then resolve):`);
+      if (v.css) out.push('  ```css', ...v.css.replace(/&/g, (a.target && a.target.selector) || '&').split('\n').map((l) => '  ' + l), '  ```');
+      if (v.html) out.push('  ```html', ...v.html.split('\n').map((l) => '  ' + l), '  ```');
+    }
+  } else if (a.variants && a.variants.length) {
+    out.push(`- **Options proposed, waiting for the reviewer to pick:** ${a.variants.map((v) => `${v.key} “${v.label}”`).join(', ')}. Don't change the code for this item yet.`);
+  } else if (a.request) {
+    out.push(
+      `- **The reviewer asked for ${a.request.variants} options.** Don't change the code yet: propose them with ${tool}. ` +
+        'Each option is `{label, css, html?, note?}`; in `css`, `&` stands for this element, and `html` replaces its contents. The reviewer previews them on the page and picks one.',
+    );
+  }
+  return out;
+}
+
+function formatFiles(a, o) {
+  const dir = o.storeDir || '.redline';
+  const out = [];
+  const shots = { ...(a.shots || {}) };
+  delete shots.plain; // the same picture as "before" without the mark: for Review, not for the agent
+  const labels = { before: 'as reviewed', proposed: 'with the proposed change', after: 'after the fix' };
+  if (a.guard && a.guard.now && a.guard.now.status !== 'held' && a.guard.now.shot) shots['changed, now'] = a.guard.now.shot;
+  const shotList = Object.entries(shots).map(([k, p]) => `${labels[k] || k.replace('variant-', 'option ')}: \`${dir}/${p}\``);
+  if (shotList.length) out.push(`- **Screenshots:** ${shotList.join(' · ')}`);
+  const refs = (a.references || []).map((r) => (r.path ? `\`${dir}/${r.path}\`` : '(image kept in the browser)') + (r.name ? ` (${r.name})` : ''));
+  if (refs.length) out.push(`- **Reference images** (the reviewer wants it to feel like these): ${refs.join(', ')}`);
+  return out;
+}
+
+function formatAnnotation(a, n, o = {}) {
+  const v = verdictOf(a);
+  const kind = a.kind === 'stroke' ? `pen mark: ${describeMark(a.stroke && a.stroke.paths)}` : a.region ? 'box around an area' : 'box';
+  const status = a.status === 'resolved' ? ' · RESOLVED' : '';
+  const out = [`### ${n}. ${v.icon} ${v.label} · ${kind}${status} · id \`${a.id}\``];
+  if (a.target) out.push(`- **Target:** ${targetLine(a.target)}`);
+  const others = (a.covers || []).filter((c) => !a.target || c.selector !== a.target.selector);
+  if (others.length) out.push(`- **Also covers:** ${others.map(targetLine).join('; ')}`);
+  // A drawing is enough: its meaning comes first, and a comment is optional extra.
+  if (a.kind === 'stroke') out.push(`- **What the mark says:** ${markMeaning(a)}`);
+  else if (!a.comment) out.push(`- **What the box says:** ${boxMeaning(a)}`);
+  if (a.comment) out.push(`- **Comment:** ${a.comment.replace(/\n+/g, ' / ')}`);
+  if (a.region) out.push(`- **Area:** ${round(a.region.w)}×${round(a.region.h)} at (${round(a.region.x)}, ${round(a.region.y)}) inside the target`);
+  if (a.quote && /horizontal/.test(describeMark(a.stroke && a.stroke.paths))) out.push(`- **Underlined text:** “${a.quote}”`);
+  if (a.tags && a.tags.length) out.push(`- **About:** ${a.tags.join(', ')}`);
+  if (a.viewport) out.push(`- **Seen at:** ${viewportLabel(a.viewport)}${a.url ? ` · URL \`${a.url}\`` : ''}`);
+  if (a.uiState && a.uiState.length) out.push(`- **Page state:** ${a.uiState.join(', ')}`);
+  if (a.edits) out.push(...describeEdits(a.edits));
+  out.push(...formatVariants(a, o));
+  if (a.target) {
+    const details = describeElement(a.target);
+    if (details) out.push(`- **Element when noted:** ${details}`);
+  }
+  const points = a.kind === 'stroke' && a.stroke && (a.stroke.paths || []).flat();
+  if (points && points.length) {
+    const b = strokeBounds(points);
+    out.push(`- **Mark area:** x ${round(b.x)}–${round(b.x + b.w)}, y ${round(b.y)}–${round(b.y + b.h)} (page px)`);
+  }
+  if (a.history && a.history.length) {
+    out.push(`- **Reopened.** Already tried, and not enough: ${a.history.map((h) => `“${h}”`).join('; then ')}`);
+  }
+  // An approval that changed since the reviewer approved it: restore it.
+  const guard = a.guard && a.guard.now && a.guard.now.status !== 'held' && a.guard.now;
+  if (guard) {
+    out.push(`- **Changed since the reviewer approved it:** ${(guard.diff || []).join('; ')}. Put it back the way it was approved` +
+      `${guard.baseShot || (a.guard.base && a.guard.base.shot) ? ` (\`${o.storeDir || '.redline'}/${guard.baseShot || a.guard.base.shot}\`)` : ''}, without undoing other fixes.`);
+  }
+  out.push(...formatFiles(a, o));
+  if (a.section) out.push(`- **In section:** \`${a.section.selector}\`${a.section.heading ? ` “${a.section.heading}”` : ''}`);
+  const convo = a.thread || [];
+  if (convo.length) {
+    out.push('- **Conversation:**');
+    for (const m of convo) out.push(`  - ${m.by === 'agent' ? 'you (agent)' : 'reviewer'}: ${m.text.replace(/\n+/g, ' / ')}`);
+    const last = convo[convo.length - 1];
+    if (last.by === 'you' && a.status !== 'resolved') out.push('  - _The reviewer is waiting for your answer._');
+  }
+  if (a.status === 'resolved' && a.resolution) out.push(`- **Resolution:** ${a.resolution}`);
+  return out.join('\n');
+}
+
+// The reviewer's taste so far: what they rejected is what the agent most needs to know.
+function tasteSection(entries) {
+  const rejected = (entries || []).filter((e) => e.kind === 'redo' || e.kind === 'sent-back').slice(-4);
+  const kept = new Set((entries || []).filter((e) => e.kind === 'keep' || e.kind === 'accepted').map((e) => `${e.page}|${e.selector}`)).size;
+  if (!rejected.length && !kept) return [];
+  const out = [`**This reviewer's taste** (all of it in \`.redline/TASTE.md\`): ${kept} approval${kept === 1 ? '' : 's'} to keep intact.`];
+  for (const e of rejected) {
+    out.push(e.kind === 'redo'
+      ? `- Rejected on \`${e.selector || 'page'}\`: “${e.resolution || 'the fix'}”${e.reply ? `. They said: “${e.reply}”` : ''}`
+      : `- An approval on \`${e.selector || 'page'}\` broke and was sent back${e.diff ? ` (${e.diff.slice(0, 2).join('; ')})` : ''}`);
+  }
+  out.push('');
+  return out;
+}
+
+function pageOrder(annotations) {
+  const pages = [];
+  for (const a of annotations) if (!pages.includes(a.page)) pages.push(a.page);
+  return pages;
+}
+
+/**
+ * Render annotations as a Markdown brief an AI agent can act on.
+ * opts.includeResolved – include resolved items (default false)
+ * opts.cli – mention the `redline resolve` command (default false)
+ */
+function formatMarkdown(annotations, opts) {
+  const o = opts || {};
+  // Drafts are the reviewer's work in progress (not sent yet); accepted fixes are done.
+  const list = annotations
+    .filter((a) => (o.includeDrafts || !a.draft) && (o.includeResolved || (a.status !== 'resolved' && !a.accepted)))
+    .slice()
+    .sort((a, b) => String(a.createdAt).localeCompare(String(b.createdAt)));
+  const counts = { good: 0, fix: 0, idea: 0 };
+  for (const a of list) counts[a.verdict in counts ? a.verdict : 'idea']++;
+
+  const out = ['# Design feedback', ''];
+  out.push(...roundHeader(o.rounds));
+  out.push(...tasteSection(o.taste));
+  if (!list.length) {
+    out.push('No open feedback. 🎉');
+    return out.join('\n') + '\n';
+  }
+  out.push(
+    `${list.length} item${list.length === 1 ? '' : 's'}: ${counts.fix} to fix, ${counts.good} marked good, ${counts.idea} ideas/questions.`,
+    '',
+    'How to read this: the reviewer clicked or drew on the live page. **✓ Good** = keep it and reuse the pattern; ' +
+      '**✗ Fix** = change it; **? Idea** = a suggestion or question. Selectors and element details were captured at review time; ' +
+      'match on text and classes if the markup has since changed. **Seen at** tells you the screen width (a mobile note is about the mobile layout) ' +
+      'and **Page state** which toggles, tabs or menus were on. A **Proposed change** gives exact values the reviewer tried live on the page: ' +
+      'apply them in the source (to every matching element when it says so). Look at the screenshots and reference images when listed. ' +
+      'Don\'t regress anything marked Good while fixing the rest.',
+  );
+  const numbers = list.map((a) => a.n).filter(Boolean);
+  if (numbers.length && Math.max(...numbers) > numbers.length && !o.includeResolved) {
+    out.push('', 'Item numbers match the pins on the page; gaps are items that were resolved or deleted.');
+  }
+  if (o.cli) {
+    out.push('', 'After addressing an item, run `redline resolve <id> --note "what you changed"` so the reviewer sees it in the overlay. ' +
+      'If your fix restructured the element, add `--target "<css selector>"` so the after-screenshot shows the new markup. ' +
+      'If a mark is unclear, ask under it with `redline reply <id> "question"` instead of guessing. ' +
+      'Before closing the round, run `redline verify <site folder>` (or `--url <dev server>`) and restore any approval it says changed. ' +
+      'When you are done with the round, close it with `redline done --summary "what you did" --reading "how you read this page, in two sentences"`.');
+  } else {
+    out.push('', 'Resolve each item with `resolve`. If a mark is unclear, ask under it with `reply` instead of guessing. ' +
+      'Before closing the round, call `check_approvals` and restore anything it says changed. ' +
+      'When you are done with the round, close it with `finish_round` (a summary, how you read the page, and at most 3 questions).');
+  }
+  for (const page of pageOrder(list)) {
+    const items = list.filter((a) => a.page === page);
+    out.push('', `## Page \`${page}\``);
+    items.forEach((a, i) => out.push('', formatAnnotation(a, a.n || i + 1, o)));
+  }
+  return out.join('\n') + '\n';
+}
+
+export { VERDICTS, describeMark, describeStroke, formatMarkdown, markMeaning };

package/src/guards.js

@@ -0,0 +1,108 @@
+// Guards: what the reviewer approved can't change behind their back.
+//
+// A green (keep) mark and an accepted fix are approvals. Each gets a baseline: a
+// screenshot and a fingerprint of the element as approved (its size, its text,
+// and the styles that make its look, for it and its descendants), taken in
+// headless Chrome. When the agent closes a round, every approval is photographed
+// again and the two fingerprints compared. A difference is reported in words
+// ("font-size 48px → 40px on h1"), so the reviewer can send it back or keep the
+// new look, and the agent knows exactly what to restore.
+
+/** The phone width approvals made on a wider screen are also guarded at. */
+export const MOBILE = 390;
+
+/** An approval: kept on purpose (green) or a fix the reviewer accepted. Drafts aren't sent yet. */
+export function isGuarded(a) {
+  return !!a && !a.draft && (!!a.accepted || a.verdict === 'good') && !(a.guard && a.guard.off);
+}
+
+/** Whether an item should have a baseline taken: approvals, and green marks as soon as they're drawn. */
+export function wantsBaseline(a) {
+  return !!a && (!!a.accepted || a.verdict === 'good') && !(a.guard && (a.guard.base || a.guard.off));
+}
+
+/** Approved on a tablet or desktop: guard it on a phone too (unless it isn't shown there). */
+export function wantsMobileBaseline(a) {
+  const w = (a && a.viewport && a.viewport.w) || 1280;
+  return !!a && w >= 768 && (!!a.accepted || a.verdict === 'good') && !(a.guard && (a.guard.mobile || a.guard.off));
+}
+
+/** The approval's verdict across widths: its own width first, then the phone. */
+export function combineChecks(g) {
+  const parts = [[g.check, g.base, ''], [g.mobile && g.mobile.check, g.mobile && g.mobile.base, `at ${MOBILE}px: `]].filter(([c]) => c);
+  if (!parts.length) return g.now;
+  const off = parts.filter(([c]) => c.status !== 'held');
+  const lead = off[0] || parts[0];
+  const status = g.check && g.check.status === 'missing' ? 'missing' : off.length ? 'changed' : 'held';
+  return {
+    status,
+    at: parts.map(([c]) => c.at).sort().at(-1),
+    diff: off.flatMap(([c, , p]) => (c.status === 'missing' ? [`${p}it is no longer on the page`] : c.diff.map((d) => p + d))),
+    shot: lead[0].shot,
+    baseShot: lead[1] && lead[1].shot,
+  };
+}
+
+const cut = (s, n = 40) => (s.length > n ? s.slice(0, n - 1) + '…' : s);
+const near = (a, b, tol) => Math.abs((a || 0) - (b || 0)) <= tol;
+
+/**
+ * Compare two fingerprints ({ nodes: [{ p, t, text, w, h, x, y, s: {prop: value} }], unstable? }).
+ * Returns the differences as short sentences, most telling first; [] when nothing changed.
+ * Parts that moved on their own while being fingerprinted are skipped (a node marked
+ * `v`, a text of null, a style of '*', a size or position of null), and with
+ * `ignore: ['text']` so are words and images (live content: feeds, dates, carousels).
+ */
+export function diffFingerprints(base, now, { ignore = [] } = {}) {
+  if (!base || !Array.isArray(base.nodes) || !base.nodes.length) return [];
+  if (!now || !Array.isArray(now.nodes) || !now.nodes.length) return ['it is no longer on the page'];
+  const size = [], text = [], structure = [], moved = [];
+  const shift = new Map(); // path -> how far it moved, so children moving with their parent say nothing
+  const styles = new Map(); // "prop|from|to" -> [where]
+  const live = ignore.includes('text');
+  const shaky = base.unstable || now.unstable; // children came and went on their own
+  const nowAt = new Map(now.nodes.map((n) => [n.p, n]));
+  const baseAt = new Set(base.nodes.map((n) => n.p));
+  const [b0, n0] = [base.nodes[0], now.nodes[0]];
+  const known = (v) => v !== null && v !== undefined;
+  if (known(b0.w) && known(n0.w) && !live && (!near(b0.w, n0.w, 2) || !near(b0.h, n0.h, 2))) size.push(`size ${b0.w}×${b0.h} → ${n0.w}×${n0.h}`);
+  for (const b of base.nodes) {
+    const n = nowAt.get(b.p);
+    if (b.v || (n && n.v)) continue;
+    if (!n || n.t !== b.t) {
+      if (!shaky && !live) structure.push(`\`${b.t}\` is gone`);
+      continue;
+    }
+    if (!live && b.text !== null && n.text !== null && (b.text || '') !== (n.text || '')) text.push(`text “${cut(b.text || '')}” → “${cut(n.text || '')}”`);
+    // A line height in px follows the font size: when both moved by the same ratio, it's one change.
+    const ratio = (v) => parseFloat(v);
+    const bs = b.s || {}, ns = n.s || {};
+    const derivedLineHeight = bs['font-size'] !== ns['font-size'] && /px$/.test(bs['line-height'] || '') &&
+      Math.abs(ratio(ns['line-height']) / ratio(bs['line-height']) - ratio(ns['font-size']) / ratio(bs['font-size'])) < 0.02;
+    for (const [prop, from] of Object.entries(bs)) {
+      const to = ns[prop];
+      if (to === undefined || to === from || from === '*' || to === '*' || (prop === 'line-height' && derivedLineHeight) || (live && prop === 'src')) continue;
+      const key = `${prop}|${from}|${to}`;
+      if (!styles.has(key)) styles.set(key, []);
+      styles.get(key).push(b.t);
+    }
+    if (b !== b0 && !live && known(b.x) && known(n.x) && (!near(b.x, n.x, 3) || !near(b.y, n.y, 3))) {
+      const dx = Math.round(n.x - b.x), dy = Math.round(n.y - b.y);
+      shift.set(b.p, [dx, dy]);
+      const parent = shift.get(b.p.slice(0, b.p.lastIndexOf('.')));
+      if (parent && near(parent[0], dx, 3) && near(parent[1], dy, 3)) continue;
+      moved.push(`\`${b.t}\` moved ${[dx && `${Math.abs(dx)}px ${dx > 0 ? 'right' : 'left'}`, dy && `${Math.abs(dy)}px ${dy > 0 ? 'down' : 'up'}`].filter(Boolean).join(', ')}`);
+    }
+  }
+  if (!shaky && !live) for (const n of now.nodes) if (!baseAt.has(n.p) && !n.v) structure.push(`new \`${n.t}\``);
+  // One line per change, however many descendants inherit it.
+  const styleLines = [...styles.entries()].map(([key, where]) => {
+    const [prop, from, to] = key.split('|');
+    const on = [...new Set(where)];
+    return `\`${prop}\` ${cut(from, 30)} → ${cut(to, 30)} on \`${on[0]}\`${on.length > 1 ? ` (+${on.length - 1})` : ''}`;
+  });
+  // Moves follow from the other changes most of the time: only report them alone.
+  const lines = [...text, ...styleLines, ...size, ...structure, ...(text.length || styleLines.length || structure.length ? [] : moved)];
+  const unique = [...new Set(lines)];
+  return unique.length > 8 ? [...unique.slice(0, 7), `and ${unique.length - 7} more changes`] : unique;
+}

package/src/inject.js

@@ -0,0 +1,15 @@
+export const CLIENT_PATH = '/__redline/client.js';
+export const SCRIPT_TAG = `<script src="${CLIENT_PATH}" defer data-redline></script>`;
+
+/** Insert the overlay script into an HTML document, once, as late as possible. */
+export function injectScript(html, tag = SCRIPT_TAG) {
+  if (html.includes('data-redline')) return html;
+  for (const close of [/<\/body>/gi, /<\/html>/gi]) {
+    const matches = [...html.matchAll(close)];
+    if (matches.length) {
+      const at = matches[matches.length - 1].index;
+      return html.slice(0, at) + tag + html.slice(at);
+    }
+  }
+  return html + tag;
+}