logomarks 0.0.0-stage → 1.0.0

package/src/mcp/tools/kit.d.ts

@@ -0,0 +1,28 @@
+import type { Tool } from '../index.js';
+import type { StyleId } from '@logomarks/brand-kit';
+
+/** What `build_brand_kit` and `build_social_pack` share: the brand, and the social pack's choices. */
+export interface BrandToolInput {
+	mark: string;
+	name?: string;
+	color?: string;
+	font?: string;
+	tagline?: string;
+	url?: string;
+	handle?: string;
+	/** Image ids or platform names. */
+	platforms?: string[];
+	styles?: StyleId[];
+	animated?: boolean;
+	/** The folder to write. */
+	out?: string;
+}
+
+/** `build_brand_kit`'s arguments. */
+export interface KitInput extends BrandToolInput {
+	/** Include the social pack (true). */
+	social?: boolean;
+}
+
+/** `build_brand_kit`: the brand kit written to a folder, and its brand sheet as an image. */
+export const tool: Tool<KitInput>;

package/src/mcp/tools/kit.js

@@ -0,0 +1,51 @@
+/**
+ * @module logomarks/mcp/tools/kit
+ *
+ * `build_brand_kit`: the brand kit (`@logomarks/brand-kit`) written to a folder,
+ * with its brand sheet to look at.
+ */
+
+import path from 'node:path';
+import { z } from 'zod';
+import { kit } from '../../kit/index.js';
+import { slugify } from '../../brand/mark.js';
+import { writeFiles } from '../../util/files.js';
+import { schema, readMark, readColor, resolvePath } from '../inputs.js';
+import { result, text, image } from '../content.js';
+
+/** @type {import('../index.js').Tool<import('./kit.js').KitInput>} */
+export const tool = {
+	name: 'build_brand_kit',
+	title: 'Build a brand kit',
+	description: [
+		'Build a brand kit on a chosen mark and write it to a folder; use it once someone has picked a mark and wants it set up as a brand.',
+		'It writes mark/ (SVG on light, dark and colour, and one that follows dark mode; PNG 64 to 2048), favicon/ (.ico, favicon.svg, apple-touch-icon.png, any and maskable icons, site.webmanifest, head.html),',
+		'lockup/ (horizontal and stacked on light, dark and colour, the name as outlines), colors/ (palette.css, a Tailwind theme and design tokens: a 50–950 OKLCH scale, text that clears WCAG AA),',
+		'social/ (the social pack, as build_social_pack makes it), brand-sheet.png and .svg, brand.json and README.md.',
+		'Returns the folder’s absolute path, how many files, brand.json (colours with their contrast, the font, the files) and the brand sheet as an image: look at it before handing the kit over.',
+	].join(' '),
+	inputSchema: {
+		mark: schema.mark,
+		name: schema.name,
+		color: schema.color,
+		font: schema.font,
+		tagline: schema.tagline,
+		url: schema.url,
+		handle: schema.handle,
+		styles: schema.styles,
+		platforms: schema.platforms,
+		animated: schema.animated,
+		social: z.boolean().optional().describe('Include the social pack (social/), as build_social_pack makes it. Default true.'),
+		out: z.string().optional().describe('The folder to write (made if needed; files in it are overwritten). Default "<name>-kit" in the working folder.'),
+	},
+	annotations: { readOnlyHint: false, destructiveHint: true, idempotentHint: true, openWorldHint: false },
+	async run({ mark: ref, color, font, out, ...o }, { cwd }) {
+		const mark = readMark(ref, cwd);
+		const name = o.name?.trim() || mark.name;
+		const dir = resolvePath(cwd, out ?? `${slugify(name) || 'brand'}-kit`);
+		const k = await kit({ ...o, mark, name, color: readColor(color), font: /** @type {import('../../brand/fonts.js').FontId | undefined} */ (font) });
+		const count = writeFiles(dir, k.files);
+		const { files, ...brand } = k.brand;
+		return result(text({ dir, sheet: path.join(dir, 'brand-sheet.png'), count, ...brand, files }), image(/** @type {Uint8Array} */ (k.files.get('brand-sheet.png'))));
+	},
+};

package/src/mcp/tools/mockup.d.ts

@@ -0,0 +1,22 @@
+import type { Tool } from '../index.js';
+
+/** `render_mockup`'s arguments. */
+export interface MockupInput {
+	mark: string;
+	/** One of `OBJECTS`. */
+	object: string;
+	name?: string;
+	color?: string;
+	font?: string;
+	layout?: string;
+	surface?: string;
+	view?: 'front' | 'angle';
+	base?: string;
+	size?: number;
+	seed?: string;
+	/** Also write it here (.png or .svg). */
+	out?: string;
+}
+
+/** `render_mockup`: the brand on an object, as an image. */
+export const tool: Tool<MockupInput>;

package/src/mcp/tools/mockup.js

@@ -0,0 +1,51 @@
+/**
+ * @module logomarks/mcp/tools/mockup
+ *
+ * `render_mockup`: the brand on a 2D object, as an image; written to a file when
+ * asked.
+ */
+
+import { z } from 'zod';
+import { mockup, OBJECTS, DEFAULT_SIZE } from '../../mockup/index.js';
+import { writeFile } from '../../util/files.js';
+import { schema, readMark, readColor, resolvePath } from '../inputs.js';
+import { result, text, image } from '../content.js';
+import { preview, PREVIEW } from '../preview.js';
+
+
+/** Each object with its layouts, for the description. */
+const objects = Object.entries(OBJECTS).map(([k, o]) => (o.layouts ? `${k} (${o.layouts.join('/')})` : k)).join(', ');
+
+/** @type {import('../index.js').Tool<import('./mockup.js').MockupInput>} */
+export const tool = {
+	name: 'render_mockup',
+	title: 'Render a brand mockup',
+	description: [
+		'Put a brand (a mark, its name and colour) on a 2D object and return the image; use it to show how a mark looks in use.',
+		'Garments, mugs and bags carry the mark; full-bleed prints carry the lockup on the brand colour.',
+		`Objects, with their layouts (the first is the default): ${objects}.`,
+		`Returns a preview up to ${PREVIEW} px; pass out to write the full-size file (.png, or .svg for the layered SVG).`,
+	].join(' '),
+	inputSchema: {
+		mark: schema.mark,
+		object: z.enum(/** @type {[string, ...string[]]} */ (Object.keys(OBJECTS))).describe(`The object: ${Object.keys(OBJECTS).join(', ')}.`),
+		name: schema.name,
+		color: schema.color,
+		font: schema.font,
+		layout: z.string().optional().describe("One of the object's layouts (listed in the description). Default: its first."),
+		surface: z.string().optional().describe('What it lies on: oak, concrete, linen, paper, light, dark, or a hex colour. Default: the object’s own.'),
+		view: z.enum(['front', 'angle']).optional().describe("A screen's or a sign's view. Default front."),
+		base: z.string().optional().describe("The object's own colour: a garment, mug or bag (white, black, navy, or a hex colour), a box's board, a device's finish. Default: the object's own."),
+		size: z.number().int().min(200).max(4000).optional().describe(`The written file's longest side in pixels. Default ${DEFAULT_SIZE}.`),
+		seed: schema.seed,
+		out: z.string().optional().describe('Also write the full-size file here: .png, or .svg for the layered SVG. Relative to the working folder; an existing file is replaced.'),
+	},
+	annotations: { readOnlyHint: false, destructiveHint: false, idempotentHint: true, openWorldHint: false },
+	async run({ mark: ref, object, name, color, font, layout, surface, view, base, size = DEFAULT_SIZE, seed, out }, { cwd }) {
+		const mark = readMark(ref, cwd);
+		const file = out && resolvePath(cwd, out);
+		const m = await mockup({ mark, object, name: name?.trim() || undefined, color: readColor(color), font: /** @type {import('../../brand/fonts.js').FontId | undefined} */ (font), layout, surface, view, base, size: file ? size : PREVIEW, seed });
+		if (file) writeFile(file, file.toLowerCase().endsWith('.svg') ? m.svg : m.png);
+		return result(text({ object, ...(file && { file, width: m.width, height: m.height }) }), image(await preview(m)));
+	},
+};

package/src/mcp/tools/sheet.d.ts

@@ -0,0 +1,15 @@
+import type { Tool } from '../index.js';
+
+/** `review_sheet`'s arguments: `svg` text or `paths`. */
+export interface SheetInput {
+	svg?: string;
+	svgName?: string;
+	paths?: string[];
+	strict?: boolean;
+	ignore?: string[];
+	/** Also write the PNG here. */
+	out?: string;
+}
+
+/** `review_sheet`: review cards as an image, and each mark's summary. */
+export const tool: Tool<SheetInput>;

package/src/mcp/tools/sheet.js

@@ -0,0 +1,43 @@
+/**
+ * @module logomarks/mcp/tools/sheet
+ *
+ * `review_sheet`: review cards for a set of marks, as an image to look at.
+ */
+
+import { z } from 'zod';
+import { sheet } from '../../sheet/index.js';
+import { writeFile } from '../../util/files.js';
+import { schema, readSvgs, resolvePath } from '../inputs.js';
+import { result, text, image } from '../content.js';
+
+/** @type {import('../index.js').Tool<import('./sheet.js').SheetInput>} */
+export const tool = {
+	name: 'review_sheet',
+	title: 'Review sheet',
+	description: [
+		'Draw review cards for one or more marks as a PNG and return it to look at; use it as the last look before handing marks over.',
+		'Each card: the mark large on dark and light with its findings boxed and numbered, at 32 and 16 px, and beside its three nearest live marks (amber: too close, compare by eye; red: a near-copy, cut it).',
+		'Look at every card before handing marks over: the same trick as an existing mark is cut even when it scores low.',
+		'Also returns each mark\'s check summary and nearest marks as JSON.',
+	].join(' '),
+	inputSchema: {
+		svg: schema.svg,
+		svgName: schema.svgName,
+		paths: schema.paths,
+		strict: schema.strict,
+		ignore: schema.ignore,
+		out: z.string().optional().describe('Also write the PNG here. Relative to the working folder; an existing file is replaced.'),
+	},
+	annotations: { readOnlyHint: false, destructiveHint: false, idempotentHint: true, openWorldHint: false },
+	async run({ svg, svgName, paths, strict = false, ignore = [], out }, { cwd }) {
+		const s = await sheet(readSvgs({ svg, svgName, paths }, cwd), { strict, ignore });
+		const file = out && resolvePath(cwd, out);
+		if (file) writeFile(file, s.png);
+		const marks = s.marks.map(({ name, report, matches }) => ({
+			name, ok: report.ok, errors: report.errors, warnings: report.warnings,
+			findings: report.findings.map((f) => f.id),
+			nearest: matches.map((m) => ({ slug: m.slug, score: m.score, verdict: m.verdict })),
+		}));
+		return result(text({ ...(file && { file }), marks }), image(s.png));
+	},
+};

package/src/mcp/tools/similar.d.ts

@@ -0,0 +1,13 @@
+import type { Tool } from '../index.js';
+
+/** `similar_marks`'s arguments: `svg` text or `paths`. */
+export interface SimilarInput {
+	svg?: string;
+	svgName?: string;
+	paths?: string[];
+	top?: number;
+	letters?: boolean;
+}
+
+/** `similar_marks`: the nearest live marks, with scores and verdicts. */
+export const tool: Tool<SimilarInput>;

package/src/mcp/tools/similar.js

@@ -0,0 +1,42 @@
+/**
+ * @module logomarks/mcp/tools/similar
+ *
+ * `similar_marks`: the nearest live marks to one SVG or a folder of them.
+ */
+
+import { z } from 'zod';
+import { similar } from '../../similar/nearest.js';
+import { loadIndex } from '../../similar/store.js';
+import { SIMILAR, LETTERS } from '../../rules.js';
+import { schema, readSvgs } from '../inputs.js';
+import { result, text } from '../content.js';
+
+/** @type {import('../index.js').Tool<import('./similar.js').SimilarInput>} */
+export const tool = {
+	name: 'similar_marks',
+	title: 'Find the nearest live marks',
+	description: [
+		'Find the live Logomarks nearest to a new mark, by outline (rotations and mirrors included); use it before handing over a mark you drew or edited.',
+		`A score of ${SIMILAR.tooClose}+ is too close (compare the two by eye: solid shapes often share an outline); ${SIMILAR.nearCopy}+ is a near-copy and fails.`,
+		`letters=true compares a badge's knocked-out letter instead (${LETTERS.tooClose} / ${LETTERS.nearCopy}).`,
+		'Returns { ok, thresholds, marks: [{ name, ok, tooClose, matches: [{ slug, name, score, verdict }] }] }. ok is false when any mark is a near-copy.',
+	].join(' '),
+	inputSchema: {
+		svg: schema.svg,
+		svgName: schema.svgName,
+		paths: schema.paths,
+		top: z.number().int().min(1).max(20).optional().describe('How many nearest marks per mark. Default 5.'),
+		letters: z.boolean().optional().describe("Compare a badge's knocked-out letter (its holes) instead of its outline. Default false."),
+	},
+	annotations: { readOnlyHint: true, openWorldHint: false },
+	async run({ svg, svgName, paths, top = 5, letters = false }, { cwd }) {
+		const index = loadIndex();
+		const marks = [];
+		for (const { name, file, svg: source } of readSvgs({ svg, svgName, paths }, cwd)) {
+			const matches = await similar(source, { top, letters, index });
+			marks.push({ name, ...(file && { file }), ok: !matches.some((m) => m.verdict === 'near-copy'), tooClose: matches.some((m) => m.verdict !== 'ok'), matches });
+		}
+		const t = letters ? LETTERS : SIMILAR;
+		return result(text({ ok: marks.every((m) => m.ok), thresholds: { tooClose: t.tooClose, nearCopy: t.nearCopy }, live: index.marks.length, marks }));
+	},
+};

package/src/mcp/tools/social.d.ts

@@ -0,0 +1,5 @@
+import type { Tool } from '../index.js';
+import type { BrandToolInput } from './kit.js';
+
+/** `build_social_pack`: every platform image in each style, written to a folder, with a preview of each style. */
+export const tool: Tool<BrandToolInput>;

package/src/mcp/tools/social.js

@@ -0,0 +1,68 @@
+/**
+ * @module logomarks/mcp/tools/social
+ *
+ * `build_social_pack`: every platform image in each style (`@logomarks/brand-kit`),
+ * written to a folder, with one image per style to look at.
+ */
+
+import path from 'node:path';
+import { pngSize } from '@logomarks/brand-kit';
+import { social } from '../../kit/index.js';
+import { slugify } from '../../brand/mark.js';
+import { writeFiles } from '../../util/files.js';
+import { schema, readMark, readColor, resolvePath } from '../inputs.js';
+import { result, text, image } from '../content.js';
+import { preview, PREVIEW } from '../preview.js';
+
+/**
+ * The first image of each style, as a preview to look at.
+ *
+ * @param {Map<string, string | Uint8Array>} files The pack.
+ * @returns {Promise<Uint8Array[]>} One PNG per style.
+ */
+async function samples(files) {
+	const firsts = new Map();
+	for (const p of files.keys()) {
+		const [style, file] = p.split('/');
+		if (file?.endsWith('.png') && !firsts.has(style) && style !== 'email') firsts.set(style, p);
+	}
+	return Promise.all([...firsts.values()].map((p) => {
+		const png = /** @type {Uint8Array} */ (files.get(p));
+		return preview({ png, svg: /** @type {string} */ (files.get(p.replace(/\.png$/, '.svg'))), ...pngSize(png) });
+	}));
+}
+
+/** @type {import('../index.js').Tool<import('./kit.js').BrandToolInput>} */
+export const tool = {
+	name: 'build_social_pack',
+	title: 'Build a social pack',
+	description: [
+		'Draw the brand for every social platform at its current size, the logo kept inside each safe zone, and write it to a folder; use it for profile images, banners and posts.',
+		'It covers Instagram (post, portrait, story, highlight), LinkedIn, X, YouTube (avatar, banner, thumbnail), Facebook, TikTok, Twitch, Discord, Threads and Bluesky,',
+		'each in minimal, bold and pattern styles as <style>/<id>.png and .svg (animated SVGs too with animated), plus an email signature, the Open Graph card and a README of sizes and sources.',
+		`Returns the folder’s absolute path and its files, and the first image of each style (a preview up to ${PREVIEW} px).`,
+	].join(' '),
+	inputSchema: {
+		mark: schema.mark,
+		name: schema.name,
+		color: schema.color,
+		font: schema.font,
+		tagline: schema.tagline,
+		url: schema.url,
+		handle: schema.handle,
+		platforms: schema.platforms,
+		styles: schema.styles,
+		animated: schema.animated,
+		out: schema.out.describe('The folder to write (made if needed). Default "<name>-social" in the working folder.'),
+	},
+	annotations: { readOnlyHint: false, destructiveHint: true, idempotentHint: true, openWorldHint: false },
+	async run({ mark: ref, color, font, out, ...o }, { cwd }) {
+		const mark = readMark(ref, cwd);
+		const name = o.name?.trim() || mark.name;
+		const dir = resolvePath(cwd, out ?? `${slugify(name) || 'brand'}-social`);
+		const pack = await social({ ...o, mark, name, color: readColor(color), font: /** @type {import('../../brand/fonts.js').FontId | undefined} */ (font) });
+		writeFiles(dir, pack.files);
+		const files = [...pack.files.keys()];
+		return result(text({ dir, readme: path.join(dir, 'README.md'), count: files.length, files }), ...(await samples(pack.files)).map(image));
+	},
+};

package/src/mockup/index.d.ts

@@ -0,0 +1,52 @@
+import type { Mark } from '../brand/mark.js';
+import type { Brand } from '@logomarks/brand-kit';
+import type { FontId } from '../brand/fonts.js';
+
+/** One object: its mockup function, its layouts (the first is the default), the option `base` sets, and its art. */
+export interface ObjectSpec {
+	make: (options: never) => { svg: string; width: number; height: number };
+	layouts?: string[];
+	base?: string;
+	/** Whether that option takes hex only (garment colour names are converted). */
+	hex?: boolean;
+	options: (b: Brand, base?: string) => Promise<Record<string, unknown>>;
+}
+
+/** What to mock up. */
+export interface MockupOptions {
+	mark: Mark;
+	/** The brand's name (the mark's). */
+	name?: string;
+	/** The brand colour (the site's yellow). */
+	color?: string;
+	font?: FontId;
+	/** One of `OBJECTS`. */
+	object: string;
+	/** The object's layout (each has its own; the first is the default). */
+	layout?: string;
+	/** What it lies on: `concrete`, `oak`, `linen`, `paper`, `light`, `dark` or hex. */
+	surface?: string;
+	/** A screen's or a sign's view: `front` or `angle`. */
+	view?: string;
+	/** The object's own colour: a garment, mug or bottle (`white`, `black`, `navy`, hex …), a bag's paper, a box's board, a device's finish. */
+	base?: string;
+	/** The output's side in pixels (1600). */
+	size?: number;
+	seed?: string;
+}
+
+/** A mockup. */
+export interface Mockup {
+	png: Uint8Array;
+	/** The layered SVG it was drawn from. */
+	svg: string;
+	width: number;
+	height: number;
+}
+
+/** The output's side when none is given: 1600. */
+export const DEFAULT_SIZE: number;
+/** The 2D objects, by name. */
+export const OBJECTS: Record<string, ObjectSpec>;
+/** The brand on an object, as PNG (resvg) and SVG. Throws a TypeError for an object or option the mockups don't take. */
+export function mockup(o: MockupOptions): Promise<Mockup>;

package/src/mockup/index.js

@@ -0,0 +1,152 @@
+/**
+ * @module logomarks/mockup
+ *
+ * The brand on a 2D object, with `@logomarks/mockups` (its layered SVG,
+ * rasterised by resvg here). What goes on the object depends on it: a
+ * garment, mug or bag carries the mark alone; anything printed edge to edge
+ * (a card, a poster, a sleeve, a screen, a billboard) carries the brand in
+ * one of `@logomarks/brand-kit`'s styles, drawn to its proportions. The hand layouts and the 3D scenes are
+ * left out, and so is the bus shelter (one of its blurs stops resvg 2.6).
+ */
+
+import * as mockups from '@logomarks/mockups';
+import { resolveBrand, artwork, markSvg, markTile } from '@logomarks/brand-kit';
+import { contrastRatio, readableText, WCAG } from '@arraypress/color-utils';
+import { brandInput } from '../brand/brand.js';
+import { parseColor } from '../util/color.js';
+import { nest } from '../sheet/draw.js';
+import { render } from '../raster/render.js';
+
+/** The output's side in pixels when none is given. */
+export const DEFAULT_SIZE = 1600;
+
+/**
+ * A colour name the garments know (`navy`), or hex, as hex: for the objects that take hex only.
+ *
+ * @param {string} base The colour.
+ * @returns {string} Its hex (the input when it's neither).
+ */
+const hexOf = (base) => /** @type {Record<string, string>} */ (mockups.GARMENT_COLORS)[base] ?? parseColor(base) ?? base;
+
+/**
+ * The colour a mark is printed in on an object: the brand's when it reads, else the brand's ink or paper.
+ *
+ * @param {import('@logomarks/brand-kit').Brand} b The brand.
+ * @param {string | undefined} base The object's colour (a name from the mockups, or hex; white when unset).
+ * @returns {string} The ink.
+ */
+function inkOn(b, base) {
+	const ground = (base && parseColor(hexOf(base))) || '#FFFFFF';
+	const p = b.palette;
+	return contrastRatio(p.primary, ground) >= WCAG.LARGE ? p.primary : readableText(ground, p.paper, p.ink);
+}
+
+/**
+ * The mark alone, printed in a colour.
+ *
+ * @param {import('@logomarks/brand-kit').Brand} b The brand.
+ * @param {string} color The ink.
+ * @returns {string} The SVG.
+ */
+const print = (b, color) => markSvg(b.mark, color);
+
+/**
+ * Branded artwork for a print, sized to it (`@logomarks/brand-kit`'s styles).
+ *
+ * @param {import('@logomarks/brand-kit').Brand} b The brand.
+ * @param {number} width Pixels.
+ * @param {number} height Pixels.
+ * @param {Partial<import('@logomarks/brand-kit').ArtworkOptions>} [o] The style (bold) and the kind (by shape; `logo`: the mark alone).
+ * @returns {Promise<string>} The SVG.
+ */
+const art = (b, width, height, o = {}) => artwork(b, { width, height, ...o });
+
+/**
+ * The lockup in the brand's colours for paper, with no clear space.
+ *
+ * @param {import('@logomarks/brand-kit').Brand} b The brand.
+ * @returns {import('@logomarks/brand-kit').Lockup} The lockup.
+ */
+const paperLockup = (b) => {
+	const g = b.grounds['on-light'];
+	return b.lockup('horizontal', { markColor: g.mark, textColor: g.text, clear: 0 });
+};
+
+/**
+ * An A4 letter: the lockup top left, a band of the brand colour at the foot.
+ *
+ * @param {import('@logomarks/brand-kit').Brand} b The brand.
+ * @returns {string} The SVG, 1240 × 1754.
+ */
+function letter(b) {
+	const l = paperLockup(b);
+	const w = 1240, h = 1754, logoH = 64;
+	return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}"><rect width="${w}" height="${h}" fill="${b.palette.paper}"/>${nest(l.svg, 110, 110, (logoH * l.width) / l.height, logoH)}<rect y="${h - 18}" width="${w}" height="18" fill="${b.palette.primary}"/></svg>`;
+}
+
+/**
+ * A landing page: a bar with the lockup, then the brand colour with the lockup large.
+ *
+ * @param {import('@logomarks/brand-kit').Brand} b The brand.
+ * @returns {Promise<string>} The SVG, 1440 × 900.
+ */
+async function page(b) {
+	const l = paperLockup(b);
+	const hero = await art(b, 1440, 780);
+	return `<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="900" viewBox="0 0 1440 900"><rect width="1440" height="900" fill="${b.palette.paper}"/>${nest(l.svg, 64, 40, (40 * l.width) / l.height, 40)}${nest(hero, 0, 120, 1440, 780)}</svg>`;
+}
+
+/**
+ * The 2D objects: each one's mockup function, which option takes `base` (the object's own colour), and its art.
+ *
+ * @type {Record<string, import('./index.js').ObjectSpec>}
+ */
+export const OBJECTS = {
+	card: { make: mockups.card, layouts: ['pair', 'flat', 'stack', 'fan'], options: async (b) => ({ art: await art(b, 1700, 1100, { kind: 'logo' }), back: await art(b, 1700, 1100, { style: 'minimal' }) }) },
+	letterhead: { make: mockups.letterhead, layouts: ['set', 'flat', 'envelope'], options: async (b) => ({ art: letter(b), logo: print(b, b.palette.primary), card: await art(b, 1700, 1100, { kind: 'logo' }) }) },
+	ticket: { make: mockups.ticket, layouts: ['pair'], options: async (b) => ({ art: await art(b, 1397, 508) }) },
+	lanyard: { make: mockups.lanyard, options: async (b) => ({ art: await art(b, 1050, 1480), name: b.name }) },
+	sticker: { make: mockups.sticker, layouts: ['laptop', 'bottle', 'sheet'], base: 'color', hex: true, options: async (b) => ({ art: print(b, b.palette.primary), shape: 'contour' }) },
+	tote: { make: mockups.tote, base: 'color', options: async (b, base) => ({ art: print(b, inkOn(b, base)) }) },
+	tee: { make: mockups.tee, base: 'color', options: async (b, base) => ({ art: print(b, inkOn(b, base)) }) },
+	hoodie: { make: mockups.hoodie, base: 'color', options: async (b, base) => ({ art: print(b, inkOn(b, base)) }) },
+	cap: { make: mockups.cap, base: 'color', options: async (b, base) => ({ art: print(b, inkOn(b, base)) }) },
+	mug: { make: mockups.mug, layouts: ['single', 'pair'], base: 'color', hex: true, options: async (b, base) => ({ art: print(b, inkOn(b, base)) }) },
+	bag: { make: mockups.bag, base: 'paper', options: async (b, base) => ({ art: print(b, inkOn(b, base === 'kraft' || !base ? '#C8A27A' : base)) }) },
+	box: { make: mockups.box, base: 'board', options: async (b) => ({ art: await art(b, 1600, 1600, { style: 'minimal' }) }) },
+	poster: { make: mockups.poster, options: async (b) => ({ art: await art(b, 1414, 2000) }) },
+	vinyl: { make: mockups.vinyl, options: async (b) => ({ art: await art(b, 1600, 1600) }) },
+	cd: { make: mockups.cd, options: async (b) => ({ art: await art(b, 1600, 1600) }) },
+	cassette: { make: mockups.cassette, options: async (b) => ({ art: await art(b, 1600, 1600, { kind: 'logo' }), title: b.name }) },
+	phone: { make: mockups.phone, base: 'finish', options: async (b) => ({ art: print(b, b.palette.onPrimary), screen: 'home', name: b.name, iconBackground: b.palette.primary, wallpaper: b.palette.scale['900'] }) },
+	laptop: { make: mockups.laptop, base: 'finish', options: async (b) => ({ art: await page(b), domain: `${b.slug}.com`, title: b.name, icon: markTile(b.mark, { size: 128, color: b.palette.onPrimary, ground: b.palette.primary, pad: 0.08, radius: 0.22 }) }) },
+	billboard: { make: mockups.billboard, options: async (b) => ({ art: await art(b, 1500, 500) }) },
+	shopfront: { make: mockups.shopfront, options: async (b) => ({ art: b.mark.svg, name: b.name, color: b.palette.primary, ink: b.palette.onPrimary }) },
+};
+
+/**
+ * A mockup.
+ *
+ * @param {import('./index.js').MockupOptions} o The mark, the brand, the object and how to show it.
+ * @returns {Promise<import('./index.js').Mockup>} The PNG and the SVG it was drawn from.
+ * @throws {TypeError} For an object or option the mockups don't take.
+ */
+export async function mockup({ mark, name, color, font, object, layout, surface, view, base, size = DEFAULT_SIZE, seed }) {
+	const spec = OBJECTS[object];
+	if (!spec) throw new TypeError(`no object "${object}": one of ${Object.keys(OBJECTS).join(', ')}`);
+	if (layout && !spec.layouts?.includes(layout)) throw new TypeError(spec.layouts ? `${object} layouts: ${spec.layouts.join(', ')}` : `${object} has one layout`);
+	if (base && !spec.base) throw new TypeError(`${object} has no base colour`);
+	const brand = await resolveBrand(brandInput({ mark, name, color, font }));
+	const options = {
+		...(await spec.options(brand, base)),
+		size,
+		...((layout ?? spec.layouts?.[0]) && { layout: layout ?? spec.layouts?.[0] }),
+		...(surface && { surface }),
+		...(view && { view }),
+		...(seed && { seed }),
+		...(base && spec.base && { [spec.base]: spec.hex ? hexOf(base) : base }),
+	};
+	const m = spec.make(/** @type {never} */ (options));
+	const png = /** @type {Uint8Array} */ ((await render(m.svg, { png: true, width: size })).png);
+	return { png, svg: m.svg, width: m.width, height: m.height };
+}

package/src/raster/render.d.ts

@@ -0,0 +1,30 @@
+/** How to render. */
+export interface RenderOptions {
+	/** Scale to this width in pixels (the SVG's own size otherwise). */
+	width?: number;
+	/** Load the bundled typefaces, for SVGs with text. */
+	text?: boolean;
+	/** Encode a PNG too. */
+	png?: boolean;
+}
+
+/** A rendered image. */
+export interface Rendered {
+	width: number;
+	height: number;
+	/** RGBA, row by row. */
+	pixels: Uint8Array;
+	/** The image as PNG bytes, when asked for. */
+	png?: Uint8Array;
+}
+
+/** Loads the WebAssembly renderer (once); every render awaits it. */
+export function initRenderer(): Promise<void>;
+/** Loads the renderer and reads the typefaces up front (for long-lived processes). */
+export function warmRenderer(): Promise<void>;
+/** Renders an SVG with resvg (WebAssembly). */
+export function render(svg: string, o?: RenderOptions): Promise<Rendered>;
+/** An SVG drawn to a PNG at a width: the rasteriser handed to `@logomarks/brand-kit`. */
+export function rasterize(svg: string, size: { width: number; height?: number }): Promise<Uint8Array>;
+/** A mark's coverage (alpha, 0–1) at `size` pixels wide, `currentColor` filled black. */
+export function coverage(svg: string, size: number): Promise<Float32Array>;