@logomarks/core 0.1.8 → 0.1.11

package/src/skill/bundle.js

@@ -14,7 +14,7 @@ const SRC = new URL('../', import.meta.url);
 
 /** The geometry kit's modules, in dependency order. */
 const KIT = ['geometry/core.js', 'geometry/booleans.js', 'geometry/polygon.js', 'geometry/random.js', 'geometry/shapes.js', 'geometry/stroke.js',
-	'geometry/path.js', 'geometry/offset.js', 'geometry/iso.js', 'geometry/modular.js', 'geometry/badges.js', 'geometry/letters.js',
+	'geometry/path.js', 'geometry/offset.js', 'geometry/mitre.js', 'geometry/iso.js', 'geometry/modular.js', 'geometry/badges.js', 'geometry/letters.js',
 	'svg/path.js', 'svg/shapes.js', 'svg/rings.js', 'svg/nonzero.js', 'svg/shape.js', 'geometry/glitch.js', 'geometry/needle.js'];
 
 /** The fit's modules, in dependency order. */

package/src/stitch/border.d.ts

@@ -0,0 +1,2 @@
+/** A satin border, `width` pixels wide, round the wide parts where they meet the outside (pixel coordinates, flat `x0, y0, x1, y1` each, from the edge inwards). */
+export function borderStitches(wide: Uint8Array, dist: Float32Array, W: number, H: number, o: { width: number; spacing: number }): number[];

package/src/stitch/border.js

@@ -0,0 +1,40 @@
+/**
+ * @module @logomarks/core/stitch/border
+ *
+ * A satin border round the filled parts: a narrow column of threads laid
+ * over the fill's outer edge, each square to the edge, which hides the
+ * fill's ragged row ends as a real border does. It runs only where a fill
+ * meets the outside (or a hole), not where it meets a satin stroke.
+ */
+
+import { gradient, spaced } from './field.js';
+
+/**
+ * The border stitches round the wide parts.
+ *
+ * @param {Uint8Array} wide The filled parts (1 inside).
+ * @param {Float32Array} dist Each ink pixel's distance to the edge of the ink.
+ * @param {number} W The raster's width.
+ * @param {number} H Its height.
+ * @param {object} o How.
+ * @param {number} o.width The border's width, in pixels.
+ * @param {number} o.spacing The distance between threads, in pixels.
+ * @returns {number[]} The stitches, flat: `x0, y0, x1, y1` each, in pixel coordinates, from the edge inwards.
+ */
+export function borderStitches(wide, dist, W, H, { width, spacing }) {
+	if (width <= 0) return [];
+	// the edge lies half a pixel out from the outermost ink pixels (whose distance is 1): the column's middle line
+	const mid = 0.5 + width / 2;
+	const line = [];
+	for (let i = 0; i < W * H; i++) if (wide[i] && Math.abs(dist[i] - mid) <= 0.75) line.push(i);
+	const out = [];
+	for (const i of spaced(line, W, spacing)) {
+		const x = i % W, y = (i - x) / W;
+		const [gx, gy] = gradient(dist, W, H, x, y);
+		if (!gx && !gy) continue;
+		const back = dist[i] - 0.5;
+		const on = width - back;
+		out.push(x - gx * back, y - gy * back, x + gx * on, y + gy * on);
+	}
+	return out;
+}

package/src/stitch/field.d.ts

@@ -0,0 +1,14 @@
+/** A value read between pixel centres (bilinear), 0 outside the raster. */
+export function sample(f: Float32Array, W: number, H: number, x: number, y: number): number;
+/** The direction a field rises fastest at a pixel, as a unit vector (`[0, 0]` where flat). */
+export function gradient(f: Float32Array, W: number, H: number, x: number, y: number): [number, number];
+/** A box blur of radius `r`, in place. */
+export function boxBlur(f: Float32Array, W: number, H: number, r: number): void;
+/** The 4-connected regions of a mask: each pixel's region (−1 outside) and each region's size. */
+export function regions(mask: Uint8Array, W: number, H: number): { label: Int32Array; sizes: number[] };
+/** The angle across a stroke (radians) at each pixel of a mask, from the distance field's blurred structure tensor. */
+export function acrossField(dist: Float32Array, mask: Uint8Array, W: number, H: number, radius: number): Float32Array;
+/** Pixels picked from candidates, in order, so no two are closer than `spacing`; `taken` pixels are skipped. */
+export function spaced(candidates: Iterable<number>, W: number, spacing: number, taken?: (i: number) => boolean): number[];
+/** How far a ray goes before the distance field (read between pixels) falls to half a pixel: the ink's edge, or `max`. */
+export function reach(dist: Float32Array, W: number, H: number, x: number, y: number, dx: number, dy: number, max: number): number;

package/src/stitch/field.js

@@ -0,0 +1,207 @@
+/**
+ * @module @logomarks/core/stitch/field
+ *
+ * Raster helpers the stitch planner works on: values read between pixel
+ * centres, a blur, connected regions, the direction across a stroke (from a
+ * smoothed structure tensor of the distance field, so it doesn't flip on
+ * the stroke's middle line), and evenly spaced picks from a set of pixels.
+ * Coordinates are continuous pixel coordinates: pixel `i`'s centre is at `i`.
+ */
+
+/**
+ * A value read between pixel centres (bilinear), 0 outside the raster.
+ *
+ * @param {Float32Array} f The values, row by row.
+ * @param {number} W The raster's width.
+ * @param {number} H Its height.
+ * @param {number} x Where, across.
+ * @param {number} y Where, down.
+ * @returns {number} The value.
+ */
+export function sample(f, W, H, x, y) {
+	const x0 = Math.floor(x), y0 = Math.floor(y);
+	const fx = x - x0, fy = y - y0;
+	const at = (i, j) => (i < 0 || j < 0 || i >= W || j >= H ? 0 : f[j * W + i]);
+	return (at(x0, y0) * (1 - fx) + at(x0 + 1, y0) * fx) * (1 - fy) + (at(x0, y0 + 1) * (1 - fx) + at(x0 + 1, y0 + 1) * fx) * fy;
+}
+
+/**
+ * The gradient of a field at a pixel (central differences), as a unit vector, or `[0, 0]` where it is flat.
+ *
+ * @param {Float32Array} f The field.
+ * @param {number} W Its width.
+ * @param {number} H Its height.
+ * @param {number} x The pixel, across.
+ * @param {number} y The pixel, down.
+ * @returns {[number, number]} The direction it rises fastest.
+ */
+export function gradient(f, W, H, x, y) {
+	const gx = sample(f, W, H, x + 1, y) - sample(f, W, H, x - 1, y);
+	const gy = sample(f, W, H, x, y + 1) - sample(f, W, H, x, y - 1);
+	const m = Math.hypot(gx, gy);
+	return m > 1e-9 ? [gx / m, gy / m] : [0, 0];
+}
+
+/**
+ * A box blur, in place, along rows then columns.
+ *
+ * @param {Float32Array} f The values.
+ * @param {number} W The width.
+ * @param {number} H The height.
+ * @param {number} r The radius, in pixels.
+ */
+export function boxBlur(f, W, H, r) {
+	if (r < 1) return;
+	const tmp = new Float32Array(Math.max(W, H));
+	const pass = (n, count, at) => {
+		for (let k = 0; k < count; k++) {
+			let s = 0;
+			for (let i = -r; i <= r; i++) s += f[at(k, Math.min(n - 1, Math.max(0, i)))];
+			for (let i = 0; i < n; i++) {
+				tmp[i] = s / (2 * r + 1);
+				s += f[at(k, Math.min(n - 1, i + r + 1))] - f[at(k, Math.max(0, i - r))];
+			}
+			for (let i = 0; i < n; i++) f[at(k, i)] = tmp[i];
+		}
+	};
+	pass(W, H, (row, i) => row * W + i);
+	pass(H, W, (col, i) => i * W + col);
+}
+
+/**
+ * The connected regions (4-connected) of a mask.
+ *
+ * @param {Uint8Array} mask 1 inside.
+ * @param {number} W The width.
+ * @param {number} H The height.
+ * @returns {{ label: Int32Array, sizes: number[] }} Each pixel's region (−1 outside) and each region's size.
+ */
+export function regions(mask, W, H) {
+	const label = new Int32Array(W * H).fill(-1);
+	const sizes = [];
+	const stack = [];
+	for (let i = 0; i < W * H; i++) {
+		if (!mask[i] || label[i] >= 0) continue;
+		const id = sizes.length;
+		let n = 0;
+		label[i] = id;
+		stack.push(i);
+		while (stack.length) {
+			const p = /** @type {number} */ (stack.pop());
+			n++;
+			const x = p % W, y = (p - x) / W;
+			for (const q of [x > 0 ? p - 1 : -1, x < W - 1 ? p + 1 : -1, y > 0 ? p - W : -1, y < H - 1 ? p + W : -1]) {
+				if (q >= 0 && mask[q] && label[q] < 0) {
+					label[q] = id;
+					stack.push(q);
+				}
+			}
+		}
+		sizes.push(n);
+	}
+	return { label, sizes };
+}
+
+/**
+ * The direction across a stroke at each pixel of a mask: the dominant direction of the distance field's gradient
+ * (its structure tensor, blurred within the mask), which is the same on both sides of the stroke's middle line.
+ *
+ * @param {Float32Array} dist The distance to the edge, per pixel.
+ * @param {Uint8Array} mask Where to measure (the narrow parts).
+ * @param {number} W The width.
+ * @param {number} H The height.
+ * @param {number} radius The blur, in pixels.
+ * @returns {Float32Array} The angle across, in radians, per pixel (0 outside the mask).
+ */
+export function acrossField(dist, mask, W, H, radius) {
+	const n = W * H;
+	const [xx, xy, yy, w] = [new Float32Array(n), new Float32Array(n), new Float32Array(n), new Float32Array(n)];
+	for (let y = 0; y < H; y++) {
+		for (let x = 0; x < W; x++) {
+			const i = y * W + x;
+			if (!mask[i]) continue;
+			const gx = sample(dist, W, H, x + 1, y) - sample(dist, W, H, x - 1, y);
+			const gy = sample(dist, W, H, x, y + 1) - sample(dist, W, H, x, y - 1);
+			xx[i] = gx * gx;
+			xy[i] = gx * gy;
+			yy[i] = gy * gy;
+			w[i] = 1;
+		}
+	}
+	for (const f of [xx, xy, yy, w]) {
+		boxBlur(f, W, H, radius);
+		boxBlur(f, W, H, radius);
+	}
+	const out = new Float32Array(n);
+	for (let i = 0; i < n; i++) if (mask[i] && w[i] > 0) out[i] = 0.5 * Math.atan2(2 * xy[i], xx[i] - yy[i]);
+	return out;
+}
+
+/**
+ * Pixels picked from candidates so that no two are closer than `spacing`, greedily in the candidates' order.
+ *
+ * @param {Iterable<number>} candidates Pixel indices, in the order to try them.
+ * @param {number} W The raster's width.
+ * @param {number} spacing The least distance between picks, in pixels.
+ * @param {(i: number) => boolean} [taken] Pixels already covered, which are skipped.
+ * @returns {number[]} The picks.
+ */
+export function spaced(candidates, W, spacing, taken) {
+	const cell = Math.max(1, spacing / Math.SQRT2);
+	/** @type {Map<number, number[]>} */
+	const grid = new Map();
+	const key = (cx, cy) => cy * 65536 + cx;
+	const out = [];
+	const s2 = spacing * spacing;
+	for (const i of candidates) {
+		if (taken?.(i)) continue;
+		const x = i % W, y = (i - x) / W;
+		const cx = Math.floor(x / cell), cy = Math.floor(y / cell);
+		const reach = Math.ceil(spacing / cell);
+		let free = true;
+		for (let dy = -reach; dy <= reach && free; dy++) {
+			for (let dx = -reach; dx <= reach && free; dx++) {
+				const pts = grid.get(key(cx + dx, cy + dy));
+				if (pts) for (const j of pts) {
+					const jx = j % W, jy = (j - jx) / W;
+					if ((jx - x) ** 2 + (jy - y) ** 2 < s2) {
+						free = false;
+						break;
+					}
+				}
+			}
+		}
+		if (!free) continue;
+		out.push(i);
+		const k = key(cx, cy);
+		const list = grid.get(k);
+		if (list) list.push(i);
+		else grid.set(k, [i]);
+	}
+	return out;
+}
+
+/**
+ * How far a ray goes from a point before it leaves the ink: where the distance field, read between pixels, first
+ * falls to half a pixel (the edge between an ink pixel and an empty one).
+ *
+ * @param {Float32Array} dist The distance to the edge (0 on empty pixels).
+ * @param {number} W The width.
+ * @param {number} H The height.
+ * @param {number} x Where it starts, across.
+ * @param {number} y Where it starts, down.
+ * @param {number} dx Its direction, across (unit).
+ * @param {number} dy Its direction, down.
+ * @param {number} max The farthest it goes.
+ * @returns {number} The distance to the edge (or `max`).
+ */
+export function reach(dist, W, H, x, y, dx, dy, max) {
+	const step = 0.5;
+	let prev = sample(dist, W, H, x, y);
+	for (let t = step; t <= max; t += step) {
+		const v = sample(dist, W, H, x + dx * t, y + dy * t);
+		if (v < 0.5) return t - step + (step * (prev - 0.5)) / Math.max(1e-6, prev - v);
+		prev = v;
+	}
+	return max;
+}

package/src/stitch/fill.d.ts

@@ -0,0 +1,2 @@
+/** Tatami rows over a mask (pixel coordinates, flat `x0, y0, x1, y1` each), the stitch ends staggered row by row. */
+export function fillStitches(mask: Uint8Array, W: number, H: number, o: { spacing: number; length: number; angle: number; random: () => number }): number[];

package/src/stitch/fill.js

@@ -0,0 +1,67 @@
+/**
+ * @module @logomarks/core/stitch/fill
+ *
+ * Tatami (fill stitch): the wide parts covered in parallel rows at one
+ * angle, each row a run of short stitches. The needle points step along each
+ * row at the stitch length from a phase that shifts row by row (half, then a
+ * quarter, then three quarters of a stitch), so the stitch ends never line
+ * up and the surface shows the staggered brick of a real fill.
+ */
+
+/** Each row's phase, as a share of the stitch length, repeating. */
+const PHASES = Object.freeze([0, 0.5, 0.25, 0.75]);
+
+/**
+ * The fill stitches over a mask.
+ *
+ * @param {Uint8Array} mask Where to fill (1 inside).
+ * @param {number} W The raster's width.
+ * @param {number} H Its height.
+ * @param {object} o How.
+ * @param {number} o.spacing The distance between rows, in pixels.
+ * @param {number} o.length The stitch length, in pixels.
+ * @param {number} o.angle The rows' angle, in degrees (0 runs across, 90 down).
+ * @param {() => number} o.random A seeded source of numbers in [0, 1).
+ * @returns {number[]} The stitches, flat: `x0, y0, x1, y1` each, in pixel coordinates.
+ */
+export function fillStitches(mask, W, H, { spacing, length, angle, random }) {
+	const a = (angle * Math.PI) / 180;
+	const [ux, uy] = [Math.cos(a), Math.sin(a)];
+	const [vx, vy] = [-uy, ux];
+	const corners = [[0, 0], [W, 0], [0, H], [W, H]];
+	const along = corners.map(([x, y]) => x * ux + y * uy);
+	const across = corners.map(([x, y]) => x * vx + y * vy);
+	const [s0, s1] = [Math.min(...along), Math.max(...along)];
+	const [c0, c1] = [Math.min(...across), Math.max(...across)];
+	const inside = (s, c) => {
+		const x = Math.round(s * ux + c * vx), y = Math.round(s * uy + c * vy);
+		return x >= 0 && y >= 0 && x < W && y < H && mask[y * W + x] === 1;
+	};
+	const step = 0.5;
+	const shortest = length * 0.18;
+	const out = [];
+	let row = 0;
+	for (let c = c0 + spacing / 2; c < c1; c += spacing, row++) {
+		const phase = (PHASES[row % PHASES.length] + (random() - 0.5) * 0.04) * length;
+		let start = null;
+		for (let s = s0; s <= s1 + step; s += step) {
+			const on = s <= s1 && inside(s, c);
+			if (on && start === null) start = s;
+			if (on || start === null) continue;
+			// each run stops short of the edge by half a row, so its round thread end lies on it
+			const end = s - step - spacing / 2;
+			start += spacing / 2;
+			if (end - start < shortest) {
+				start = null;
+				continue;
+			}
+			// the needle points: the run's two ends, and the row's grid between them (jittered a little)
+			const pts = [start];
+			for (let g = Math.ceil((start + shortest - phase) / length) * length + phase; g < end - shortest; g += length) pts.push(g + (random() - 0.5) * length * 0.06);
+			pts.push(end);
+			for (let i = 0; i + 1 < pts.length; i++) out.push(pts[i] * ux + c * vx, pts[i] * uy + c * vy, pts[i + 1] * ux + c * vx, pts[i + 1] * uy + c * vy);
+			start = null;
+		}
+	}
+	return out;
+}

package/src/stitch/index.d.ts

@@ -0,0 +1,6 @@
+export type { StitchSettings, StitchPlan } from './plan.js';
+export { STITCH, SATIN_DENSITY, stitchPlan, stitchCount } from './plan.js';
+export { splitByWidth } from './regions.js';
+export { fillStitches } from './fill.js';
+export { satinStitches } from './satin.js';
+export { borderStitches } from './border.js';

package/src/stitch/index.js

@@ -0,0 +1,14 @@
+/**
+ * @module @logomarks/core/stitch
+ *
+ * Machine embroidery planned from a mark's outlines: the ink split by width
+ * into fill and satin, tatami rows over the fills, satin threads across the
+ * strokes, a satin border round the fills. Pure geometry, seeded; a
+ * renderer (`@logomarks/mockups`' embroidery finish) draws the stitches as
+ * thread.
+ */
+export { STITCH, SATIN_DENSITY, stitchPlan, stitchCount } from './plan.js';
+export { splitByWidth } from './regions.js';
+export { fillStitches } from './fill.js';
+export { satinStitches } from './satin.js';
+export { borderStitches } from './border.js';

package/src/stitch/plan.d.ts

@@ -0,0 +1,46 @@
+/** The planner's settings. Sizes are in millimetres. */
+export interface StitchSettings {
+	/** How far the mark's canvas (its viewBox's longer side) spans, in mm (55). */
+	size: number;
+	/** The distance between rows of fill, in mm (0.42); satin threads lie `SATIN_DENSITY` times as far apart. */
+	density: number;
+	/** The widest part stitched in satin, in mm (3.6); wider parts are filled. */
+	satin: number;
+	/** The fill's stitch length, in mm (3.5). */
+	stitch: number;
+	/** The fill rows' angle, in degrees: 0 runs across, 90 down (45). */
+	angle: number;
+	/** The satin border round each fill, in mm; 0 for none (0.9). */
+	border: number;
+	/** The raster's pitch, in pixels a mm (10). */
+	resolution: number;
+	/** Seeds the small irregularities ('1'). */
+	seed: string;
+}
+
+/** A mark's stitches. Each list is flat, four numbers a stitch (`x0, y0, x1, y1`), in the mark's own units, in the order they're sewn. */
+export interface StitchPlan {
+	/** The mark's viewBox: x, y, width, height. */
+	viewBox: [number, number, number, number];
+	/** Millimetres a unit of the mark. */
+	mm: number;
+	/** The settings it was planned with. */
+	settings: StitchSettings;
+	/** Tatami rows over the wide parts. */
+	fill: number[];
+	/** Satin threads across the narrow parts. */
+	satin: number[];
+	/** The satin border round each fill, from the edge inwards. */
+	border: number[];
+	/** How much of the mark is filled and how much is satin, in mm². */
+	area: { fill: number; satin: number };
+}
+
+/** Satin's thread spacing as a share of `density` (0.82). */
+export const SATIN_DENSITY: number;
+/** The defaults. */
+export const STITCH: Readonly<StitchSettings>;
+/** The stitches for a mark's SVG text. Throws a TypeError for a bad option or a file with nothing filled. */
+export function stitchPlan(svg: string, options?: Partial<Omit<StitchSettings, 'seed'>> & { seed?: string | number }): StitchPlan;
+/** How many stitches a plan has, of each kind and in all. */
+export function stitchCount(plan: Pick<StitchPlan, 'fill' | 'satin' | 'border'>): { fill: number; satin: number; border: number; total: number };

package/src/stitch/plan.js

@@ -0,0 +1,127 @@
+/**
+ * @module @logomarks/core/stitch/plan
+ *
+ * A mark planned as machine embroidery, from its outlines: where each
+ * stitch lies. The ink is rasterised at a fine pitch (a tenth of a
+ * millimetre by default) at the size it will be stitched, split by width
+ * into fill (wide) and satin (narrow) parts, and each part covered as an
+ * embroiderer would: tatami rows over the fills, satin threads across the
+ * strokes, and a satin border round each fill. The stitches come back in the
+ * mark's own units, for a renderer to draw as thread. Seeded: the same mark,
+ * options and seed always give the same stitches.
+ */
+
+import { rings } from '../svg/rings.js';
+import { shapes, viewBox } from '../svg/shapes.js';
+import { frameOf, fill } from '../raster/scanline.js';
+import { distance } from '../raster/distance.js';
+import { seeded } from '../geometry/random.js';
+import { splitByWidth } from './regions.js';
+import { fillStitches } from './fill.js';
+import { satinStitches } from './satin.js';
+import { borderStitches } from './border.js';
+
+/** The defaults, in millimetres and degrees: the planner's settings for a mark stitched about 55 mm across. */
+export const STITCH = Object.freeze({
+	/** How far the mark's canvas (its viewBox's longer side) spans, in mm. */
+	size: 55,
+	/** The distance between rows of fill, in mm; satin threads lie a little closer (`SATIN_DENSITY` of it). */
+	density: 0.42,
+	/** The widest part stitched in satin, in mm; wider parts are filled. */
+	satin: 3.6,
+	/** The fill's stitch length, in mm. */
+	stitch: 3.5,
+	/** The fill rows' angle, in degrees (0 runs across, 90 down). */
+	angle: 45,
+	/** The satin border round each fill, in mm (0 for none). */
+	border: 0.9,
+	/** The raster's pitch, in pixels a mm. */
+	resolution: 10,
+	/** Seeds the small irregularities. */
+	seed: '1',
+});
+
+/** Satin's thread spacing as a share of the fill's row spacing: satin is sewn denser, so its threads close up. */
+export const SATIN_DENSITY = 0.82;
+
+/**
+ * A positive number option, or its default.
+ *
+ * @param {Record<string, unknown>} o The options.
+ * @param {'size' | 'density' | 'satin' | 'stitch' | 'border' | 'resolution'} k The key.
+ * @param {boolean} [zero=false] Whether 0 is allowed too.
+ * @returns {number} The value.
+ * @throws {TypeError} When it isn't one.
+ */
+function positive(o, k, zero = false) {
+	const v = o[k] ?? STITCH[k];
+	if (typeof v !== 'number' || !Number.isFinite(v) || v < 0 || (v === 0 && !zero)) throw new TypeError(`stitchPlan: ${k} is a number over 0${zero ? ', or 0' : ''} (got ${JSON.stringify(o[k])})`);
+	return v;
+}
+
+/**
+ * The stitches for a mark.
+ *
+ * @param {string} svg The mark's SVG text (its filled paths, circles, ellipses, rects and polygons, each with its fill rule).
+ * @param {Partial<typeof STITCH>} [options] The settings (see `STITCH`).
+ * @returns {import('./plan.js').StitchPlan} The plan.
+ * @throws {TypeError} For a bad option or a file with nothing filled.
+ */
+export function stitchPlan(svg, options = {}) {
+	if (typeof svg !== 'string') throw new TypeError('stitchPlan: pass the mark\'s SVG text');
+	const o = /** @type {Record<string, unknown>} */ (options ?? {});
+	const size = positive(o, 'size');
+	const density = positive(o, 'density');
+	const satin = positive(o, 'satin');
+	const stitch = positive(o, 'stitch');
+	const border = positive(o, 'border', true);
+	const resolution = positive(o, 'resolution');
+	const angle = o.angle ?? STITCH.angle;
+	if (typeof angle !== 'number' || !Number.isFinite(angle)) throw new TypeError(`stitchPlan: angle is a number of degrees (got ${JSON.stringify(o.angle)})`);
+	const seed = String(o.seed ?? STITCH.seed);
+
+	const paths = shapes(svg).map(({ segs, evenodd }) => ({ rings: rings(segs, 0.5), evenodd }));
+	if (!paths.length) throw new TypeError('stitchPlan: the SVG has nothing filled');
+	const vb = viewBox(svg) ?? [0, 0, 512, 512];
+	const mm = size / Math.max(vb[2], vb[3]);
+	const K = resolution * mm;
+	const box = frameOf(paths, K, 2);
+	const frame = { ...box, width: Math.ceil(box.width), height: Math.ceil(box.height) };
+	const bm = fill(paths, frame);
+	const { width: W, height: H } = bm;
+	const dist = distance(bm, 1);
+	const half = (satin / 2) * resolution;
+	const { wide, narrow } = splitByWidth(bm, dist, half);
+
+	const random = seeded(`stitch:${seed}`);
+	const toUnits = (px) => px.map((v, i) => Math.round(((i % 2 ? frame.y0 : frame.x0) + (v + 0.5) / K) * 1000) / 1000);
+	const rows = fillStitches(wide, W, H, { spacing: density * resolution, length: stitch * resolution, angle, random });
+	const threads = satinStitches(narrow, dist, W, H, { spacing: density * SATIN_DENSITY * resolution, half, smooth: 0.6 * resolution });
+	const edge = borderStitches(wide, dist, W, H, { width: border * resolution, spacing: density * resolution });
+	let [wideArea, narrowArea] = [0, 0];
+	for (let i = 0; i < W * H; i++) {
+		wideArea += wide[i];
+		narrowArea += narrow[i];
+	}
+	const px2 = resolution * resolution;
+	return {
+		viewBox: /** @type {[number, number, number, number]} */ (vb.slice(0, 4)),
+		mm,
+		settings: { size, density, satin, stitch, angle, border, resolution, seed },
+		fill: toUnits(rows),
+		satin: toUnits(threads),
+		border: toUnits(edge),
+		area: { fill: Math.round((wideArea / px2) * 10) / 10, satin: Math.round((narrowArea / px2) * 10) / 10 },
+	};
+}
+
+/**
+ * How many stitches a plan has, of each kind and in all.
+ *
+ * @param {Pick<import('./plan.js').StitchPlan, 'fill' | 'satin' | 'border'>} plan The plan.
+ * @returns {{ fill: number, satin: number, border: number, total: number }} The counts.
+ */
+export function stitchCount(plan) {
+	const [f, s, b] = [plan.fill.length / 4, plan.satin.length / 4, plan.border.length / 4];
+	return { fill: f, satin: s, border: b, total: f + s + b };
+}

package/src/stitch/regions.d.ts

@@ -0,0 +1,4 @@
+import type { Bitmap } from '../raster/scanline.js';
+
+/** The ink split by width: `wide` where a disc of radius `half` (pixels) fits (the shape opened by it), `narrow` elsewhere; small corner slivers go to `wide`. */
+export function splitByWidth(bm: Bitmap, dist: Float32Array, half: number): { wide: Uint8Array; narrow: Uint8Array };

package/src/stitch/regions.js

@@ -0,0 +1,54 @@
+/**
+ * @module @logomarks/core/stitch/regions
+ *
+ * A mark's ink split by width, as an embroiderer splits it: the parts a
+ * disc wider than the longest satin stitch fits inside (the shape opened by
+ * that disc) are filled with rows of short stitches; the rest, the strokes
+ * and thin parts, are satin. The opening is two distance transforms. The
+ * slivers it leaves in a wide part's corners are small, and go back to the
+ * fill they belong to.
+ */
+
+import { distance } from '../raster/distance.js';
+import { regions } from './field.js';
+
+/**
+ * The ink's wide and narrow parts.
+ *
+ * @param {import('../raster/scanline.js').Bitmap} bm The ink.
+ * @param {Float32Array} dist Each ink pixel's distance to the edge.
+ * @param {number} half Half the widest satin, in pixels.
+ * @returns {{ wide: Uint8Array, narrow: Uint8Array }} 1 where each is.
+ */
+export function splitByWidth(bm, dist, half) {
+	const { width: W, height: H, data } = bm;
+	const n = W * H;
+	// the centres of discs wider than a satin stitch, then everything those discs cover
+	const core = new Uint8Array(n);
+	for (let i = 0; i < n; i++) core[i] = dist[i] > half ? 1 : 0;
+	const toCore = distance({ ...bm, data: core }, 0);
+	const wide = new Uint8Array(n);
+	const narrow = new Uint8Array(n);
+	for (let i = 0; i < n; i++) {
+		if (!data[i]) continue;
+		if (core[i] || toCore[i] <= half) wide[i] = 1;
+		else narrow[i] = 1;
+	}
+	// small narrow pieces against a wide part are the corners the disc couldn't reach: they're fill
+	const { label, sizes } = regions(narrow, W, H);
+	const touches = new Uint8Array(sizes.length);
+	for (let i = 0; i < n; i++) {
+		if (label[i] < 0) continue;
+		const x = i % W;
+		if ((x > 0 && wide[i - 1]) || (x < W - 1 && wide[i + 1]) || (i >= W && wide[i - W]) || (i < n - W && wide[i + W])) touches[label[i]] = 1;
+	}
+	const small = 2 * half * half;
+	for (let i = 0; i < n; i++) {
+		const l = label[i];
+		if (l >= 0 && touches[l] && sizes[l] < small) {
+			narrow[i] = 0;
+			wide[i] = 1;
+		}
+	}
+	return { wide, narrow };
+}

package/src/stitch/satin.d.ts

@@ -0,0 +1,2 @@
+/** Satin threads across a mask, edge to edge, along the stroke's local direction (pixel coordinates, flat `x0, y0, x1, y1` each). */
+export function satinStitches(mask: Uint8Array, dist: Float32Array, W: number, H: number, o: { spacing: number; half: number; smooth: number }): number[];