]*src=")(\/img\/[^)\s"]+)/g, imageVisual],
+ [/```(?!mermaid)\w*([^\n]*)\n([\s\S]*?)\n```/g, codeVisual],
+ ];
+ const visuals = patterns
+ .flatMap(([re, parse]) =>
+ [...section.matchAll(re)].map(m => {
+ const visual = parse(...m.slice(1));
+ return visual && { ...visual, index: m.index };
+ }),
+ )
+ .filter(Boolean);
+ // each {/* card */} marks the first visual after it
+ visuals.sort((a, b) => a.index - b.index);
+ for (const { index } of section.matchAll(CARD_MARKER)) {
+ const next = visuals.find(v => v.index > index);
+ if (next) next.marked = true;
+ }
+ const before = visuals.find(v => v.kind === 'code' && v.title === 'Before');
+ return visuals
+ .filter(v => v !== before)
+ .map(v =>
+ before && v.kind === 'code' && v.title === 'After' ?
+ { ...v, before: before.code }
+ : v,
+ );
+}
+
+function perfChart(props) {
+ const prop = name => props.match(new RegExp(`${name}="([^"]*)"`))?.[1];
+ const rows = [
+ ...props.matchAll(
+ /label:\s*'([^']*)',\s*baseline:\s*([\d.]+),\s*value:\s*([\d.]+)/g,
+ ),
+ ].map(([, label, baseline, value]) => ({
+ label,
+ baseline: +baseline,
+ value: +value,
+ }));
+ if (!rows.length) return;
+ return {
+ kind: 'chart',
+ chartTitle: prop('title'),
+ baselineLabel: prop('baselineLabel'),
+ valueLabel: prop('valueLabel'),
+ higherIsBetter: /higherIsBetter(?!=\{false\})/.test(props),
+ rows,
+ };
+}
+
+// xychart-beta "% of baseline" bars become a chart; other mermaid is a diagram
+function mermaidVisual(source) {
+ if (!/^\s*xychart/.test(source)) return { kind: 'diagram', source };
+ const labels = source.match(/x-axis\s*\[([^\]]*)\]/)?.[1];
+ const bars = source.match(/bar\s*\[([^\]]*)\]/)?.[1];
+ if (!labels || !bars) return;
+ const values = bars.split(',').map(Number);
+ return {
+ kind: 'chart',
+ chartTitle: source.match(/title\s+"([^"]*)"/)?.[1],
+ higherIsBetter: true,
+ rows: labels.split(',').map((l, i) => ({
+ label: l.trim().replace(/^"|"$/g, ''),
+ baseline: 100,
+ value: values[i],
+ })),
+ };
+}
+
+function imageVisual(src) {
+ const file = path.join(WEBSITE_ROOT, 'static', src);
+ return fs.existsSync(file) ? { kind: 'image', file } : undefined;
+}
+
+function codeVisual(meta, code) {
+ return {
+ kind: 'code',
+ title: meta.match(/title="([^"]+)"/)?.[1],
+ code: code.replace(/^\s*\/\/ highlight-next-line\n/gm, ''),
+ };
+}
+
+// Up to MAX_CODE_LINES, ending at a blank line when cut so statements stay whole
+function firstLines(code, max = MAX_CODE_LINES) {
+ // imports say little on a card, so skip them when other code follows
+ const body = code.replace(/^(import [^;]*;\s*\n)+\s*/, '');
+ const lines = (body.trim() ? body : code).split('\n');
+ if (lines.length <= max) return lines.join('\n');
+ const head = lines.slice(0, max);
+ const blank = head.lastIndexOf('');
+ return head.slice(0, blank > 0 ? blank : max).join('\n');
+}
+
+const KEYWORDS =
+ 'const|let|var|function|return|for|of|in|if|else|new|class|extends|import|export|from|await|async|static|this|typeof';
+const TOKEN_KINDS = ['comment', 'string', 'keyword', 'number', 'type', 'call'];
+const TOKEN = new RegExp(
+ [
+ '(\\/\\/.*)',
+ '(`[^`]*`|\'[^\']*\'|"[^"]*")',
+ `\\b(${KEYWORDS})\\b`,
+ '\\b(\\d+(?:\\.\\d+)?)\\b',
+ '\\b([A-Z]\\w*)',
+ '\\b(\\w+)(?=\\()',
+ ].join('|'),
+ 'g',
+);
+
+// Minimal TS highlighting: comments, strings, keywords, numbers, Types, calls
+function highlight(code) {
+ let html = '';
+ let last = 0;
+ for (const m of code.matchAll(TOKEN)) {
+ const kind = TOKEN_KINDS[m.slice(1).findIndex(g => g !== undefined)];
+ html += `${escape(code.slice(last, m.index))}${escape(m[0])}`;
+ last = m.index + m[0].length;
+ }
+ return html + escape(code.slice(last));
+}
+
+const fmt = n => (n >= 10 ? Math.round(n) : +n.toFixed(1));
+
+// Before vs after bars per row, with each row's multiplier
+function chartBody({
+ rows: allRows,
+ baselineLabel = 'Before',
+ valueLabel = 'After',
+ higherIsBetter,
+}) {
+ const rows = allRows.slice(0, MAX_CHART_ROWS);
+ const max = Math.max(...rows.flatMap(r => [r.baseline, r.value]));
+ const bar = (n, cls) =>
+ ``;
+ return `${escape(baselineLabel)}${escape(valueLabel)}
${rows
+ .map(({ label, baseline, value }) => {
+ const speedup = higherIsBetter ? value / baseline : baseline / value;
+ return `${escape(label)}${fmt(speedup)}×
${bar(baseline, 'base')}${bar(value, 'value')}
${chartBody(panel)}
`;
+ case 'diagram':
+ return ``;
+ case 'image': {
+ const ext = path.extname(panel.file);
+ const type = { '.svg': 'svg+xml', '.jpg': 'jpeg' }[ext] ?? ext.slice(1);
+ return ``;
+ }
+ default:
+ return `${firstLines(panel.code, maxLines)
+ .split('\n')
+ .map(line => `${highlight(line) || ' '}
`)
+ .join('')}`;
+ }
+}
+
+function panelsHtml({ panels, speedup }) {
+ const n = panels.length;
+ const maxLines = n > 2 ? 5 : MAX_CODE_LINES;
+ const html = panels
+ .map((panel, i) => {
+ const title = (n === 1 && panel.chartTitle) || panel.title;
+ // the After side, else the first window, gets the accent title
+ const primary = panel.diff ? panel.diff === 'after' : i === 0;
+ const chip =
+ panel.speedup ?
+ `${escape(panel.speedup)}× faster`
+ : '';
+ return `${escape(title)}${chip}
${panelBody(panel, maxLines)}
${escape(speedup)}×
faster
${escape(line)}
`,
+ )
+ .join('');
+ const panelRows = rows
+ .map(
+ ({ tag, label }) =>
+ `${tag}${escape(label)}
`,
+ )
+ .join('');
+
+ return `
+
+${background(theme, prng(version))}
+
+
+
v${escape(version)}RELEASE
+
${lines}
+
+
${escape(description)}
+