logomarks 0.0.0-stage → 1.0.0

package/src/raster/render.js

@@ -0,0 +1,100 @@
+/**
+ * @module logomarks/raster/render
+ *
+ * SVG to pixels with resvg compiled to WebAssembly: the same engine (and
+ * version) as the internal tools' `@resvg/resvg-js`, with no native
+ * binaries. The module is initialised once, on first use; text uses the
+ * bundled typefaces (IBM Plex Mono unless an SVG names another).
+ */
+
+import fs from 'node:fs';
+import { createRequire } from 'node:module';
+import { initWasm, Resvg } from '@resvg/resvg-wasm';
+import { fontFiles, LABEL_FONT } from '../brand/fonts.js';
+
+const require = createRequire(import.meta.url);
+
+/** @type {Promise<void> | null} */
+let ready = null;
+/** @type {Uint8Array[] | null} */
+let fonts = null;
+
+/**
+ * Loads the WebAssembly module (once).
+ *
+ * @returns {Promise<void>} Resolves when rendering is ready.
+ */
+export function initRenderer() {
+	ready ??= initWasm(fs.readFileSync(require.resolve('@resvg/resvg-wasm/index_bg.wasm')));
+	return ready;
+}
+
+/**
+ * The bundled typefaces' bytes (read once).
+ *
+ * @returns {Uint8Array[]} One per file.
+ */
+const bundledFonts = () => (fonts ??= fontFiles().map((u) => new Uint8Array(fs.readFileSync(u))));
+
+/**
+ * Loads the WebAssembly module and reads the typefaces now, so the first
+ * render of a long-lived process (the MCP server) is as quick as the rest.
+ *
+ * @returns {Promise<void>} Resolves when both are ready.
+ */
+export async function warmRenderer() {
+	bundledFonts();
+	await initRenderer();
+}
+
+/**
+ * resvg's font options: the bundled typefaces, or none.
+ *
+ * @param {boolean} text Whether the SVG has text.
+ * @returns {import('@resvg/resvg-wasm').ResvgRenderOptions['font']} The options.
+ */
+function fontOptions(text) {
+	if (!text) return { loadSystemFonts: false };
+	return { fontBuffers: bundledFonts(), defaultFontFamily: LABEL_FONT, monospaceFamily: LABEL_FONT };
+}
+
+/**
+ * Renders an SVG.
+ *
+ * @param {string} svg The SVG's text.
+ * @param {import('./render.js').RenderOptions} [o] Size, text and output.
+ * @returns {Promise<import('./render.js').Rendered>} Its pixels (and PNG bytes, when asked).
+ */
+export async function render(svg, { width, text = false, png = false } = {}) {
+	await initRenderer();
+	const r = new Resvg(svg, { ...(width && { fitTo: { mode: 'width', value: width } }), font: fontOptions(text) });
+	const img = r.render();
+	const out = { width: img.width, height: img.height, pixels: img.pixels, ...(png && { png: img.asPng() }) };
+	img.free();
+	r.free();
+	return out;
+}
+
+/**
+ * An SVG drawn to a PNG: the rasteriser `@logomarks/brand-kit` is handed, so
+ * the kit needs no sharp. Its text is already outlines.
+ *
+ * @param {string} svg The SVG.
+ * @param {{ width: number }} size The PNG's width (the height follows the SVG's own shape).
+ * @returns {Promise<Uint8Array>} The PNG.
+ */
+export const rasterize = async (svg, { width }) => /** @type {Uint8Array} */ ((await render(svg, { width, png: true })).png);
+
+/**
+ * A mark's alpha channel at a size, filled black (as the tools do: `currentColor` → `#000`).
+ *
+ * @param {string} svg The mark.
+ * @param {number} size The width in pixels.
+ * @returns {Promise<Float32Array>} Coverage 0–1, row by row.
+ */
+export async function coverage(svg, size) {
+	const { pixels, width, height } = await render(svg.replace(/fill="currentColor"/g, 'fill="#000"'), { width: size });
+	const a = new Float32Array(width * height);
+	for (let i = 0; i < a.length; i++) a[i] = pixels[i * 4 + 3] / 255;
+	return a;
+}

package/src/rules.d.ts

@@ -0,0 +1,73 @@
+/** The canvas side: `viewBox="0 0 512 512"`. */
+export const CANVAS: 512;
+/** The mark's longest side, measured on the real outline. */
+export const FIT: 448;
+/** The margin a fitted mark leaves on its long side (32). */
+export const MARGIN: number;
+/** Where a fitted mark's box is centred (256). */
+export const CENTRE: number;
+/** How far size, centre and canvas edges may drift (0.5). */
+export const FIT_TOLERANCE: number;
+/** Decimal places in coordinates (1). */
+export const DECIMALS: number;
+/** Markup a finished mark must not contain. */
+export const FORBIDDEN_MARKUP: RegExp;
+
+/** Speck, sliver and pin-hole limits (square units, units). */
+export const SPECKS: Readonly<{
+	/** A piece under this area is a speck (60). */
+	piece: number;
+	/** A hole under this area is a pin-hole (30). */
+	hole: number;
+	/** Under this area a part is two outlines touching, left out (0.5). */
+	tiny: number;
+	/** Mean width under this is an invisible hairline, left out (0.12). */
+	hairline: number;
+	/** A small piece thinner than this is a sliver rather than a speck (3). */
+	sliver: number;
+	/** This many small parts of one area are a pattern, left out (6). */
+	repeat: number;
+	/** How alike two areas must be to repeat: vector and raster reads. */
+	repeatTolerance: Readonly<{ vector: number; raster: number }>;
+	/** Pixels a unit for the raster read (8). */
+	rasterScale: number;
+}>;
+
+/** Live marks whose small parts were reviewed and kept, with the reason. */
+export const REVIEWED: Readonly<Record<string, string>>;
+
+/** Gaps, and what counts as an even run (units). */
+export const GAPS: Readonly<{
+	/** The house gap (22). */
+	house: number;
+	/** The bold family's range (20–24). */
+	range: [number, number];
+	/** Gaps further apart than this are different gaps (3). */
+	same: number;
+	/** How much a run may widen along its length (2). */
+	tolerance: number;
+	/** How much most of it may vary (1). */
+	spread: number;
+	/** How many times its width a run is long (3). */
+	run: number;
+	/** The shortest run (16). */
+	shortest: number;
+	/** Wider runs are space, not cuts (32). */
+	widest: number;
+	/** Narrower runs are hairlines (1). */
+	narrowest: number;
+}>;
+
+/** Nothing narrower than this, ink or gap (10). */
+export const MIN_FEATURE: number;
+/** Pixels a unit for the width read (2). */
+export const WIDTH_SCALE: number;
+/** How far a width read can be off (0.5). */
+export const WIDTH_PRECISION: number;
+/** The chip sizes a mark must read at. */
+export const CHIPS: readonly [32, 16];
+
+/** Outline near-duplicates: raster size, and the too-close and near-copy scores. */
+export const SIMILAR: Readonly<{ size: number; tooClose: number; nearCopy: number }>;
+/** Knocked-out letters: render size, crop size, and the too-close and near-copy scores. */
+export const LETTERS: Readonly<{ render: number; size: number; tooClose: number; nearCopy: number }>;

package/src/rules.js

@@ -0,0 +1,139 @@
+/**
+ * @module logomarks/rules
+ *
+ * The house rules every Logomark is drawn to, in one place. Numbers are units
+ * of the 512 canvas unless named otherwise. They come from the skill
+ * (`SKILL.md`: "The standard" and the "Review checklist") and from the
+ * internal pipeline (`fit.mjs`, `speckcheck.mjs`, `dupcheck.mjs`,
+ * `holecheck.mjs`); each constant names its source.
+ */
+
+/** The canvas: `viewBox="0 0 512 512"` (SKILL.md, the standard). */
+export const CANVAS = 512;
+
+/** The mark's longest side, measured on the real outline (SKILL.md; fit.mjs `FIT`). */
+export const FIT = 448;
+
+/** The margin a fitted mark leaves on its long side: 32. */
+export const MARGIN = (CANVAS - FIT) / 2;
+
+/** Where a fitted mark's box is centred, on both axes. */
+export const CENTRE = CANVAS / 2;
+
+/** How far size, centre and canvas edges may drift before a fit fails (fit.mjs `TOL`). */
+export const FIT_TOLERANCE = 0.5;
+
+/** Coordinates are written to one decimal place (SKILL.md, the standard). */
+export const DECIMALS = 1;
+
+/** Markup a finished mark must not contain: flatten to filled paths (fit.mjs `check()`). */
+export const FORBIDDEN_MARKUP = /<(g|style|mask|clipPath|use|text|image)\b|transform=|stroke=/;
+
+/**
+ * Stray specks, slivers and pin-holes a boolean left behind (speckcheck.mjs).
+ * Small parts are reported unless they are tiny (two outlines touching at a
+ * point), hairline (a zero-width sliver along an edge, invisible) or repeated
+ * (a dot field, a pattern).
+ */
+export const SPECKS = {
+	/** A piece under this area (square units) is a speck. */
+	piece: 60,
+	/** A hole under this area is a pin-hole. */
+	hole: 30,
+	/** Under this area a part is only two outlines touching: left out. */
+	tiny: 0.5,
+	/** Mean width (2·area/perimeter) under this is a hairline, invisible below ~4000 px: left out. */
+	hairline: 0.12,
+	/** A small piece thinner than this (mean width) is reported as a sliver rather than a speck. */
+	sliver: 3,
+	/** This many small parts of one area (within the tolerance below) are a pattern, not specks. */
+	repeat: 6,
+	/** How alike two areas must be to count as repeats, as a fraction: vector read, raster read. */
+	repeatTolerance: { vector: 0.02, raster: 0.05 },
+	/** Pixels a unit for the raster read, used when the vector read fails. */
+	rasterScale: 8,
+};
+
+/**
+ * Live marks looked at large (2026-11-05) and kept: their small parts are the
+ * design, or can't be seen (speckcheck.mjs `REVIEWED`). A file with one of
+ * these names gets its speck findings as notes, with the reason.
+ */
+export const REVIEWED = {
+	'dot-sphere': 'a dot field clipped by its ring; the rim fragments are the clip',
+	'dot-pyramid': 'dots shrinking with distance',
+	halftone: 'halftone rows, the apex dot the smallest',
+	'line-triangle': 'stacked bars ending in a small apex triangle',
+	'spiral-delta': 'xor of rotated triangles; the small shards are the spiral',
+	spirograph: 'the cells where the curve crosses itself',
+	'lens-rosette': 'xor of twelve lenses; the lacy centre is where their tips cross',
+	'notched-diamond': 'a 0.14-wide sliver along the cut (a separate path in the file), invisible below ~4000 px',
+};
+
+/**
+ * Gaps: the cuts between parts. One width per mark; the set's gap is 22, the
+ * bold family's range 20–24 (SKILL.md, "Bold negative space" and the review
+ * checklist: "One gap width and one stroke weight (or a clear 1:2 ratio)").
+ * Gaps and strokes are measured on a raster as runs of even width (see
+ * `raster/channels.js`); the numbers below say what counts as a run.
+ */
+export const GAPS = {
+	/** The house gap. */
+	house: 22,
+	/** The bold family's range. */
+	range: /** @type {[number, number]} */ ([20, 24]),
+	/** Gaps further apart than this (units) are different gaps. */
+	same: 3,
+	/** A run widens by at most this along its length (units): a cut or a stroke, not a tapering point. */
+	tolerance: 2,
+	/** And most of it (10th to 90th percentile) by at most this. */
+	spread: 1,
+	/** A run is at least this many times as long as it is wide… */
+	run: 3,
+	/** …and at least this long (units). */
+	shortest: 16,
+	/** Runs wider than this are open space or counters, not cuts (the house gap fits ~20–30 after fitting). */
+	widest: 32,
+	/** Runs narrower than this are hairlines (the speck check's business), not features. */
+	narrowest: 1,
+};
+
+/** Nothing narrower than this, ink or gap: under it a feature closes up at 32 px (SKILL.md review checklist). */
+export const MIN_FEATURE = 10;
+
+/** Pixels a unit for the width read (gaps and strokes). */
+export const WIDTH_SCALE = 2;
+
+/** How far a width read at that scale can be off (units): a feature is only too thin below `MIN_FEATURE` less this. */
+export const WIDTH_PRECISION = 0.5;
+
+/** The small sizes a mark must read at: 32 px and 16 px chips (SKILL.md workflow and "Bold negative space"). */
+export const CHIPS = /** @type {const} */ ([32, 16]);
+
+/**
+ * Near-duplicates by outline (dupcheck.mjs): each mark rastered at 48 px,
+ * blurred 3×3, and compared by overlap (IoU) in all 8 rotations and flips.
+ */
+export const SIMILAR = {
+	/** The raster's side in pixels. */
+	size: 48,
+	/** A score at or above this is too close: look at the two side by side. */
+	tooClose: 0.72,
+	/** At or above this it is a near-copy (Dot Stack vs Rack: 0.99); 1.00 is usually a rotation. */
+	nearCopy: 0.9,
+};
+
+/**
+ * Knocked-out letters (holecheck.mjs): badges all score high on their shared
+ * outline, so the letter (the hole) is compared alone, cropped to its box.
+ */
+export const LETTERS = {
+	/** The render's side in pixels. */
+	render: 128,
+	/** The cropped letter's side in pixels. */
+	size: 40,
+	/** Flag at or above this (a heavy A scores ~0.75 against any heavy A). */
+	tooClose: 0.7,
+	/** A real copy scores this or more. */
+	nearCopy: 0.85,
+};

package/src/sheet/card.d.ts

@@ -0,0 +1,20 @@
+import type { Report } from '../checks/index.js';
+import type { Match } from '../similar/nearest.js';
+import type { MarkIndex } from '../similar/store.js';
+
+/** What a card shows. */
+export interface CardInput {
+	/** The mark's name, shown as the card's title. */
+	name: string;
+	/** The mark. */
+	svg: string;
+	/** Its check. */
+	report: Report;
+	/** Its nearest live marks (three are shown). */
+	matches: Match[];
+	/** The live marks, for drawing the neighbours. */
+	index: MarkIndex;
+}
+
+/** One review card as SVG, starting `y` pixels down the page, and its height. */
+export function card(input: CardInput, y: number): Promise<{ svg: string; height: number }>;

package/src/sheet/card.js

@@ -0,0 +1,190 @@
+/**
+ * @module logomarks/sheet/card
+ *
+ * One review card: the mark large on dark and on light (the light one with
+ * its findings boxed and numbered), 32 px and 16 px chips on both grounds
+ * (magnified, and at actual size), its three nearest live marks with
+ * scores, and the check results as badges with their messages.
+ */
+
+import { render } from '../raster/render.js';
+import { CHIPS } from '../rules.js';
+import { COLORS, CARD, ZOOM } from './theme.js';
+import { text, panel, mark, pixels } from './draw.js';
+
+/** Characters' advance in the 13 px monospace, for sizing badges. */
+const CHAR = 7.8;
+
+/** How many finding messages a card lists under its badges. */
+const MESSAGES = 6;
+
+/** A severity's colour and symbol. */
+const SEVERITY = {
+	error: { color: COLORS.error, mark: '×' },
+	warning: { color: COLORS.warning, mark: '!' },
+	info: { color: COLORS.info, mark: 'i' },
+};
+
+/**
+ * A mark at a small size on a ground, as PNG bytes.
+ *
+ * @param {string} svg The mark.
+ * @param {number} size The size in pixels.
+ * @param {string} ground The ground colour.
+ * @param {string} ink The mark's colour.
+ * @returns {Promise<Uint8Array>} The PNG.
+ */
+async function chip(svg, size, ground, ink) {
+	const doc = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}"><rect width="${size}" height="${size}" fill="${ground}"/>${mark(svg, 0, 0, size, ink)}</svg>`;
+	return /** @type {Uint8Array} */ ((await render(doc, { png: true })).png);
+}
+
+/**
+ * The chips column: each size on dark and light, magnified, with the actual size beside.
+ *
+ * @param {string} svg The mark.
+ * @param {number} x Left.
+ * @param {number} y Top.
+ * @returns {Promise<string>} The SVG.
+ */
+async function chips(svg, x, y) {
+	let out = '';
+	let top = y;
+	for (const size of CHIPS) {
+		const zoom = ZOOM[size], big = size * zoom;
+		out += text(x, top + 13, `${size} px ×${zoom}`, { size: 12, color: COLORS.muted });
+		const [dark, light] = await Promise.all([chip(svg, size, COLORS.dark, COLORS.darkInk), chip(svg, size, COLORS.light, COLORS.lightInk)]);
+		out += pixels(dark, x, top + 22, big) + pixels(light, x + big + 8, top + 22, big);
+		const ax = x + 2 * big + 16;
+		out += pixels(dark, ax, top + 22, size) + pixels(light, ax, top + 22 + size + 6, size);
+		top += 22 + big + 26;
+	}
+	return out;
+}
+
+/**
+ * Where a finding is, as a box (a point becomes a small box round it).
+ *
+ * @param {import('../checks/finding.js').Finding} f The finding.
+ * @returns {import('@logomarks/core/geometry').Box} Its box on the canvas.
+ */
+function where(f) {
+	if (f.box) return f.box;
+	const [px, py] = f.point ?? [256, 256];
+	return [px - 6, py - 6, px + 6, py + 6];
+}
+
+/**
+ * The finding boxes over the light view, numbered as the badges are.
+ *
+ * @param {readonly import('../checks/finding.js').Finding[]} located The findings with a location.
+ * @param {number} x The view's left.
+ * @param {number} y Its top.
+ * @returns {string} The SVG.
+ */
+function overlay(located, x, y) {
+	const k = CARD.large / 512;
+	return located.map((f, i) => {
+		const { color } = SEVERITY[f.severity];
+		const [x0, y0, x1, y1] = where(f);
+		const pad = 3, bx = x + x0 * k - pad, by = y + y0 * k - pad, bw = (x1 - x0) * k + 2 * pad, bh = (y1 - y0) * k + 2 * pad;
+		const tag = Math.max(x + 2, Math.min(bx, x + CARD.large - 20));
+		return `<rect x="${bx}" y="${by}" width="${bw}" height="${bh}" rx="3" fill="none" stroke="${color}" stroke-width="2"/>`
+			+ `<rect x="${tag}" y="${Math.max(y + 2, by - 18)}" width="18" height="16" rx="3" fill="${color}"/>`
+			+ text(tag + 9, Math.max(y + 2, by - 18) + 12, String(i + 1), { size: 11, color: '#000', weight: 600, anchor: 'middle' });
+	}).join('');
+}
+
+/**
+ * The nearest live marks as tiles with names and scores.
+ *
+ * @param {readonly import('../similar/nearest.js').Match[]} matches The matches.
+ * @param {import('../similar/store.js').MarkIndex} index The live marks.
+ * @param {number} x Left.
+ * @param {number} y Top.
+ * @returns {string} The SVG.
+ */
+function neighbours(matches, index, x, y) {
+	const s = CARD.neighbour;
+	let out = text(x, y + 13, 'nearest live marks', { size: 12, color: COLORS.muted });
+	matches.forEach((m, i) => {
+		const live = index.marks.find((l) => l.slug === m.slug);
+		const tx = x + i * (s + 12), hot = m.verdict !== 'ok';
+		const color = m.verdict === 'near-copy' ? COLORS.error : m.verdict === 'too-close' ? COLORS.warning : COLORS.muted;
+		out += panel(tx, y + 22, s, s, COLORS.dark, { stroke: hot ? color : COLORS.line });
+		if (live) out += mark(live.svg, tx + 14, y + 36, s - 28, COLORS.darkInk);
+		out += text(tx, y + s + 40, m.name.length > 17 ? `${m.name.slice(0, 16)}…` : m.name, { size: 12 });
+		out += text(tx, y + s + 57, `${m.score.toFixed(2)}${hot ? ` ${m.verdict}` : ''}`, { size: 12, weight: 600, color });
+	});
+	return out;
+}
+
+/**
+ * Badges for the findings, wrapped to the card's width.
+ *
+ * @param {readonly import('../checks/finding.js').Finding[]} findings The findings (located ones first, numbered).
+ * @param {number} numbered How many carry a number.
+ * @param {number} y Top.
+ * @returns {{ svg: string, height: number }} The SVG and the height it takes.
+ */
+function badges(findings, numbered, y) {
+	const left = CARD.pad, right = CARD.width - CARD.pad;
+	if (!findings.length) {
+		const label = 'passes every check';
+		return { svg: panel(left, y, label.length * CHAR + 20, CARD.badge, 'none', { r: 14, stroke: COLORS.pass }) + text(left + 10, y + 18, label, { color: COLORS.pass, weight: 600 }), height: CARD.badge };
+	}
+	let svg = '', x = left, top = y;
+	findings.forEach((f, i) => {
+		const { color, mark: sym } = SEVERITY[f.severity];
+		const label = `${i < numbered ? `${i + 1} ` : ''}${sym} ${f.id}${f.value !== undefined ? ` ${f.value}` : ''}`;
+		const w = label.length * CHAR + 20;
+		if (x + w > right) { x = left; top += CARD.badge + 8; }
+		svg += panel(x, top, w, CARD.badge, 'none', { r: 14, stroke: color }) + text(x + 10, top + 18, label, { color, weight: 600 });
+		x += w + 8;
+	});
+	return { svg, height: top - y + CARD.badge };
+}
+
+/**
+ * One review card.
+ *
+ * @param {import('./card.js').CardInput} input The mark, its report and its neighbours.
+ * @param {number} y Where the card starts on the page.
+ * @returns {Promise<{ svg: string, height: number }>} The card and its height.
+ */
+export async function card({ name, svg, report, matches, index }, y) {
+	const { pad, gap, head, large } = CARD;
+	const located = report.findings.filter((f) => f.box || f.point);
+	const ordered = [...located, ...report.findings.filter((f) => !f.box && !f.point)];
+	const top = y + head;
+	let out = '';
+	// header: name, size and counts, verdict
+	const verdict = report.errors ? ['FAIL', COLORS.error] : report.warnings ? ['PASS · WARNINGS', COLORS.warning] : ['PASS', COLORS.pass];
+	const size = report.size ? `${report.size.w} × ${report.size.h}` : 'empty';
+	const counts = `${report.errors} error${report.errors === 1 ? '' : 's'} · ${report.warnings} warning${report.warnings === 1 ? '' : 's'}`;
+	const closest = matches[0] ? ` · nearest ${matches[0].score.toFixed(2)}` : '';
+	out += text(pad, y + 36, name, { size: 22, weight: 600 });
+	out += text(pad + name.length * 13.2 + 18, y + 35, `${size} · ${counts}${closest}`, { size: 13, color: COLORS.muted });
+	const vw = verdict[0].length * CHAR + 24;
+	out += panel(CARD.width - pad - vw, y + 16, vw, 28, verdict[1], { r: 14 }) + text(CARD.width - pad - vw / 2, y + 35, verdict[0], { color: '#000', weight: 600, anchor: 'middle' });
+	// large views: dark, then light with the findings boxed
+	out += panel(pad, top, large, large, COLORS.dark) + mark(svg, pad + 30, top + 30, large - 60, COLORS.darkInk);
+	const lx = pad + large + gap;
+	out += panel(lx, top, large, large, COLORS.light) + mark(svg, lx, top, large, COLORS.lightInk) + overlay(located, lx, top);
+	// small sizes, then neighbours
+	const cx = lx + large + gap;
+	out += await chips(svg, cx, top);
+	out += neighbours(matches, index, cx + CARD.chips + gap, top);
+	// badges and the first messages
+	const b = badges(ordered, located.length, top + large + gap);
+	out += b.svg;
+	let line = top + large + gap + b.height + 22;
+	ordered.slice(0, MESSAGES).forEach((f, i) => {
+		const msg = `${i < located.length ? `${i + 1}. ` : '· '}${f.message}`;
+		out += text(pad, line, msg.length > 165 ? `${msg.slice(0, 164)}…` : msg, { size: 12, color: COLORS.muted });
+		line += 18;
+	});
+	if (ordered.length > MESSAGES) { out += text(pad, line, `… and ${ordered.length - MESSAGES} more (run check --json for all)`, { size: 12, color: COLORS.muted }); line += 18; }
+	const height = line - y + pad - 10;
+	return { svg: panel(0, y, CARD.width, height, COLORS.card, { r: 14 }) + out, height };
+}

package/src/sheet/draw.d.ts

@@ -0,0 +1,26 @@
+/** How a line of text looks. */
+export interface TextStyle {
+	/** Pixels (13). */
+	size?: number;
+	color?: string;
+	/** The face's weight: 400 or 600 for the labels (400). */
+	weight?: number;
+	anchor?: 'start' | 'middle' | 'end';
+	/** A bundled face's family, with its `weight` (IBM Plex Mono). */
+	font?: string;
+}
+
+/** Text made safe for XML. */
+export function esc(s: string): string;
+/** A line of text at a baseline. */
+export function text(x: number, y: number, s: string, o?: TextStyle): string;
+/** A rounded rectangle, with an optional outline. */
+export function panel(x: number, y: number, w: number, h: number, fill: string, o?: { r?: number; stroke?: string }): string;
+/** A mark drawn in a square of side `size`, in one colour. */
+export function mark(svg: string, x: number, y: number, size: number, color: string): string;
+/** A PNG placed at a size, scaled by nearest neighbour so its pixels show. */
+export function pixels(png: Uint8Array, x: number, y: number, size: number): string;
+/** An SVG (with a `viewBox`) placed in a box, scaled to fit and centred. */
+export function nest(svg: string, x: number, y: number, w: number, h: number): string;
+/** A PNG placed in a box, smoothly scaled. */
+export function image(png: Uint8Array, x: number, y: number, w: number, h: number): string;

package/src/sheet/draw.js

@@ -0,0 +1,94 @@
+/**
+ * @module logomarks/sheet/draw
+ *
+ * Small SVG builders the review card is made of: text, panels, a mark placed
+ * in a box, a raster chip.
+ */
+
+import { body, viewBox } from '@logomarks/core/svg';
+import { COLORS, FONT } from './theme.js';
+
+/**
+ * Text made safe for XML.
+ *
+ * @param {string} s The text.
+ * @returns {string} It, escaped.
+ */
+export const esc = (s) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+
+/**
+ * A line of text.
+ *
+ * @param {number} x Where it starts (or its middle, centred).
+ * @param {number} y Its baseline.
+ * @param {string} s The text.
+ * @param {import('./draw.js').TextStyle} [o] How it looks.
+ * @returns {string} The SVG.
+ */
+export const text = (x, y, s, { size = 13, color = COLORS.text, weight = 400, anchor = 'start', font } = {}) =>
+	`<text x="${x}" y="${y}" font-family="${font ?? FONT}" font-weight="${weight}" font-size="${size}" fill="${color}" text-anchor="${anchor}">${esc(s)}</text>`;
+
+/**
+ * A rounded rectangle.
+ *
+ * @param {number} x Left.
+ * @param {number} y Top.
+ * @param {number} w Width.
+ * @param {number} h Height.
+ * @param {string} fill Its colour.
+ * @param {object} [o] Corners and outline.
+ * @param {number} [o.r=10] Corner radius.
+ * @param {string} [o.stroke] Outline colour.
+ * @returns {string} The SVG.
+ */
+export const panel = (x, y, w, h, fill, { r = 10, stroke } = {}) =>
+	`<rect x="${x}" y="${y}" width="${w}" height="${h}" rx="${r}" fill="${fill}"${stroke ? ` stroke="${stroke}" stroke-width="1.5"` : ''}/>`;
+
+/**
+ * A mark drawn in a square, its 512 canvas filling it.
+ *
+ * @param {string} svg The mark.
+ * @param {number} x Left.
+ * @param {number} y Top.
+ * @param {number} size The square's side.
+ * @param {string} color The ink.
+ * @returns {string} The SVG.
+ */
+export const mark = (svg, x, y, size, color) =>
+	`<svg x="${x}" y="${y}" width="${size}" height="${size}" viewBox="0 0 512 512" fill="${color}">${body(svg).replace(/fill="currentColor"/g, `fill="${color}"`)}</svg>`;
+
+/**
+ * A raster image placed at a size, scaled by nearest neighbour so its pixels show.
+ *
+ * @param {Uint8Array} png The image.
+ * @param {number} x Left.
+ * @param {number} y Top.
+ * @param {number} size Its side on the sheet.
+ * @returns {string} The SVG.
+ */
+export const pixels = (png, x, y, size) =>
+	`<image x="${x}" y="${y}" width="${size}" height="${size}" image-rendering="optimizeSpeed" href="data:image/png;base64,${Buffer.from(png).toString('base64')}"/>`;
+
+/**
+ * An SVG placed in a box, scaled to fit and centred.
+ *
+ * @param {string} svg The SVG (with a `viewBox`).
+ * @param {number} x Left.
+ * @param {number} y Top.
+ * @param {number} w Width.
+ * @param {number} h Height.
+ * @returns {string} The SVG.
+ */
+export const nest = (svg, x, y, w, h) => `<svg x="${x}" y="${y}" width="${w}" height="${h}" viewBox="${viewBox(svg)?.join(' ')}">${body(svg)}</svg>`;
+
+/**
+ * A raster image placed in a box, smoothly scaled.
+ *
+ * @param {Uint8Array} png The image.
+ * @param {number} x Left.
+ * @param {number} y Top.
+ * @param {number} w Width.
+ * @param {number} h Height.
+ * @returns {string} The SVG.
+ */
+export const image = (png, x, y, w, h) => `<image x="${x}" y="${y}" width="${w}" height="${h}" href="data:image/png;base64,${Buffer.from(png).toString('base64')}"/>`;

package/src/sheet/grid.d.ts

@@ -0,0 +1,2 @@
+/** The marks in a labelled grid, `cols` across (8), light on dark, as a PNG. */
+export function gridSheet(marks: readonly { name: string; svg: string }[], o?: { cols?: number }): Promise<Uint8Array>;