@logomarks/core 0.1.4 → 0.1.7

package/CHANGELOG.md

@@ -5,6 +5,32 @@ All notable changes to `@logomarks/core` are documented here.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.1.7] — 2026-11-07
+
+### Fixed
+
+- `toPath()` and `deneedle()` keep every corner of an open ring. Both sliced the last point off each ring on the assumption it repeated the first, which holds for the booleans' rings (`U`, `D`, `I`, `grow`, `lens`, `drop`) but not the builders' (`poly`, `rect`, `circle`, `ellipse`, `rr`, `roundPoly`, `splineClosed`), so a hand-built `toPath([rect(…)])` lost a corner and `deneedle()` on an open ring lost one before trimming. They now drop the last point only when it lies within 1e-6 of the first. Every one of the 3,967 Logomarks SVGs round-trips (`svgShape` then `toPath`, `deneedle` and a sample through `grow`) to byte-identical path data as in 0.1.6, and 14 of the site's generator batches (247 marks) write identical files.
+
+### Added
+
+- `openRing(ring, eps = 1e-6)` and `closeRing(ring, eps = 1e-6)` in `/geometry`: a ring without or with its closing point, whichever way it came in. `grow()`'s ring reading uses `openRing` too (with an exact match, as before).
+
+## [0.1.6] — 2026-11-07
+
+### Fixed
+
+- `filledShape()` and `svgShape()` read non-zero outlines whose subpaths overlap (font glyph outlines, as Bodoni Moda and DM Serif Display draw them) correctly. Each ring's winding was judged beside its longest edge, so an outer whose longest edge lay inside another contour was dropped and whole strokes vanished. When any two rings cross or touch, the fill now comes from the rings' summed winding (`windingFill`, exact however they overlap; opposite windings cancel, as a browser draws them); where the old reading already covered the same ground its polygons are kept. Every one of the 3,967 Logomarks SVGs (392 non-zero outlines among them) reads to identical polygons as in 0.1.5. Even-odd outlines are unchanged. The skill's generated `kit.mjs` carries the same reading.
+
+### Added
+
+- `nonzeroFill(rings, ops)`, `windingFill(rings, ops)` and `ringsMeet(rings)` in `/svg`: non-zero fill straight from rings, for glyph outlines and other non-zero path data.
+
+## [0.1.5] — 2026-11-06
+
+### Added
+
+- `pixelCoverage(paths, grid)` measures how much of each pixel cell a mark covers from its rings, by scanline, so pixelate runs without a canvas (a server, a Worker); `pixelCells(cov, grid)` returns the filled cells themselves, for drawing them one by one (`@arraypress/covers` uses both for its pixel mosaic). `pixelPath` is unchanged.
+
 ## [0.1.4] — 2026-11-06
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logomarks/core",
-  "version": "0.1.4",
+  "version": "0.1.7",
   "description": "Geometry, SVG reading, fitting, analysis and similarity for logomarks on a 512 grid: the kit the Logomarks set is drawn with (shapes, real booleans, strokes, tracks, iso solids, badges, letter skeletons), one SVG path parser, the 448 fit, speck and shape-tag analysis, outline signatures, and the industry-symbol parts.",
   "type": "module",
   "main": "src/index.js",

package/src/edit/index.d.ts

@@ -3,4 +3,4 @@ export type { Adjust, Frame, Similarity, AdjustEnv } from './adjust.js';
 export type { PixelGrid } from './pixelate.js';
 export { loadShaper, shaperReady, hasCorners, reshape, pieceCount, shapeInfo, smallSizeInfo } from './reshape.js';
 export { NO_ADJUST, isAdjusted, adjustSuffix, transformPath, adjustPaths } from './adjust.js';
-export { SS, pixelGrid, pixelPath } from './pixelate.js';
+export { SS, pixelGrid, pixelPath, pixelCells, pixelCoverage } from './pixelate.js';

package/src/edit/index.js

@@ -4,4 +4,4 @@
  */
 export { loadShaper, shaperReady, hasCorners, reshape, pieceCount, shapeInfo, smallSizeInfo } from './reshape.js';
 export { NO_ADJUST, isAdjusted, adjustSuffix, transformPath, adjustPaths } from './adjust.js';
-export { SS, pixelGrid, pixelPath } from './pixelate.js';
+export { SS, pixelGrid, pixelPath, pixelCells, pixelCoverage } from './pixelate.js';

package/src/edit/pixelate.d.ts

@@ -1,3 +1,5 @@
+import type { FillPath } from '../raster/scanline.js';
+
 /** A pixel grid over a mark's box. */
 export interface PixelGrid {
 	cols: number;
@@ -11,5 +13,9 @@ export interface PixelGrid {
 export const SS: 6;
 /** The grid for a box: 48 cells across its longest side at amount 0, 14 at amount 1, centred. */
 export function pixelGrid(amount: number, box: { x: number; y: number; width: number; height: number }): PixelGrid;
+/** How much of each cell the mark's rings cover (0–1, row by row), by scanline at SS × SS samples a cell. */
+export function pixelCoverage(paths: readonly FillPath[], grid: PixelGrid): Float32Array;
+/** The filled cells (1 each, row by row): half covered, or a fifth where a cell stands alone or bridges two. */
+export function pixelCells(cov: ArrayLike<number>, grid: Pick<PixelGrid, 'cols' | 'rows'>): Uint8Array;
 /** The pixelated mark as one path's d, from each cell's coverage; null when nothing is filled. */
 export function pixelPath(cov: ArrayLike<number>, grid: PixelGrid): string | null;

package/src/edit/pixelate.js

@@ -11,7 +11,12 @@
  *   alone (a thin line or a small dot would vanish) or when it bridges two filled cells across it (a diagonal would
  *   break into steps that don't touch).
  * - Filled cells are merged into as few rectangles as possible, so the SVG stays small and clean.
+ *
+ * Where there's no canvas to measure with (a server, a Worker), `pixelCoverage` measures the cells from the mark's
+ * rings by scanline; `pixelCells` gives the filled cells themselves, for drawing them one by one (a mosaic).
  */
+import { fill } from '../raster/scanline.js';
+
 /** Samples a cell is measured at, along each side (6 × 6 a cell). */
 export const SS = 6;
 
@@ -32,20 +37,38 @@ export function pixelGrid(amount, box) {
 }
 
 /**
- * The pixelated mark as one path's d, from how much of each cell the mark covers: cells covered half or more are
- * filled, cells covered a fifth or more too when they stand alone or bridge two filled cells, then merged into as few
- * rectangles as possible. Null when nothing is filled.
+ * How much of each cell the mark covers, measured from its rings by scanline at `SS` × `SS` samples a cell: what a
+ * canvas would measure, without one.
+ *
+ * @param {readonly import('../raster/scanline.js').FillPath[]} paths The mark's paths (rings and fill rules).
+ * @param {import('./index.js').PixelGrid} grid The grid.
+ * @returns {Float32Array} Coverage 0–1 per cell, row by row.
+ */
+export function pixelCoverage(paths, { cols, rows, cell, x0, y0 }) {
+	const bmp = fill(paths, { x0, y0, scale: SS / cell, width: cols * SS, height: rows * SS });
+	const cov = new Float32Array(cols * rows);
+	for (let j = 0; j < bmp.height; j++)
+		for (let i = 0; i < bmp.width; i++)
+			if (bmp.data[j * bmp.width + i])
+				cov[Math.floor(j / SS) * cols + Math.floor(i / SS)]++;
+	for (let k = 0; k < cov.length; k++)
+		cov[k] /= SS * SS;
+	return cov;
+}
+
+/**
+ * The filled cells, from how much of each the mark covers: half or more, or a fifth or more where a cell stands alone
+ * (a thin line or a small dot would vanish) or bridges two filled cells across it (a diagonal would break).
  *
  * @param {ArrayLike<number>} cov Coverage 0–1 per cell, row by row.
  * @param {import('./index.js').PixelGrid} grid The grid.
- * @returns {string | null} The path data.
+ * @returns {Uint8Array} 1 per filled cell, row by row.
  */
-export function pixelPath(cov, { cols, rows, cell, x0, y0 }) {
+export function pixelCells(cov, { cols, rows }) {
 	const at = (m, q, r) => (q >= 0 && r >= 0 && q < cols && r < rows ? m[r * cols + q] : 0);
 	const on = new Uint8Array(cols * rows);
 	for (let i = 0; i < on.length; i++)
 		on[i] = cov[i] >= 0.5 ? 1 : 0;
-	// keep thin lines and small dots, and bridge diagonals
 	const keep = on.slice();
 	for (let r = 0; r < rows; r++)
 		for (let q = 0; q < cols; q++) {
@@ -64,6 +87,20 @@ export function pixelPath(cov, { cols, rows, cell, x0, y0 }) {
 			if (!near || (bridges && cov[i] >= 0.3))
 				keep[i] = 1;
 		}
+	return keep;
+}
+
+/**
+ * The pixelated mark as one path's d, from how much of each cell the mark covers: cells covered half or more are
+ * filled, cells covered a fifth or more too when they stand alone or bridge two filled cells, then merged into as few
+ * rectangles as possible. Null when nothing is filled.
+ *
+ * @param {ArrayLike<number>} cov Coverage 0–1 per cell, row by row.
+ * @param {import('./index.js').PixelGrid} grid The grid.
+ * @returns {string | null} The path data.
+ */
+export function pixelPath(cov, { cols, rows, cell, x0, y0 }) {
+	const keep = pixelCells(cov, { cols, rows });
 	const done = [];
 	let open = new Map();
 	for (let r = 0; r <= rows; r++) {

package/src/geometry/index.d.ts

@@ -12,7 +12,7 @@ export type { SkelEnd, SkelStroke, Skeleton } from './letters.js';
 export type { GlitchOptions } from './glitch.js';
 export { C, GAP, polar, poly, mapPts, rot, move, scale, flipX, sample, closedCurve, polygonPath, TAU, rad } from './core.js';
 export { U, I, robust, robustOps, OPS, D, X } from './booleans.js';
-export { signedArea, area, perimeter, ringBox, bbox, winding, dedupe } from './polygon.js';
+export { signedArea, area, perimeter, ringBox, bbox, winding, dedupe, openRing, closeRing } from './polygon.js';
 export { seeded } from './random.js';
 export { circle, ellipse, rect, regular, annulus, sector, arcBand, rotN, bar, ring, roundPoly, rr, lens, drop, squircle, pill, egg } from './shapes.js';
 export { stroke, weave, offsetPts, fillet, tracks, filletClosed, trackLoop, walk, balloon, linePts, arcPts, joinPts } from './stroke.js';

package/src/geometry/index.js

@@ -5,7 +5,7 @@
  */
 export { C, GAP, polar, poly, mapPts, rot, move, scale, flipX, sample, closedCurve, polygonPath, TAU, rad } from './core.js';
 export { U, I, robust, robustOps, OPS, D, X } from './booleans.js';
-export { signedArea, area, perimeter, ringBox, bbox, winding, dedupe } from './polygon.js';
+export { signedArea, area, perimeter, ringBox, bbox, winding, dedupe, openRing, closeRing } from './polygon.js';
 export { seeded } from './random.js';
 export { circle, ellipse, rect, regular, annulus, sector, arcBand, rotN, bar, ring, roundPoly, rr, lens, drop, squircle, pill, egg } from './shapes.js';
 export { stroke, weave, offsetPts, fillet, tracks, filletClosed, trackLoop, walk, balloon, linePts, arcPts, joinPts } from './stroke.js';

package/src/geometry/needle.js

@@ -2,6 +2,7 @@
  * Needle trimming for iso solids: where a round-ended gap meets a silhouette corner at a shallow angle, the face runs on
  * past the gap's end as a sliver about 1 wide; deneedle() cuts it off so the face ends square on the gap.
  */
+import { openRing } from './polygon.js';
 
 /** Where line a–b meets line c–d. */
 const meet = (a, b, c, d) => { const r = [b[0] - a[0], b[1] - a[1]], s = [d[0] - c[0], d[1] - c[1]], den = r[0] * s[1] - r[1] * s[0];
@@ -9,9 +10,9 @@ const meet = (a, b, c, d) => { const r = [b[0] - a[0], b[1] - a[1]], s = [d[0] -
 /** Cuts the needles off a shape. A needle is a corner sharper than `deg` with one edge shorter than `len`: where a round-ended
     gap meets a silhouette corner at a shallow angle (the hex solids' 60° corners), the face runs on past the gap's end as a
     sliver about 1 wide. The tip and the short edge's far end become one point, where the long edge into the tip meets the
-    edge out of the short one, so the face ends square on the gap. */
+    edge out of the short one, so the face ends square on the gap. Rings may come open or closed; they go back closed. */
 export const deneedle = (shape, { deg = 12, len = 16 } = {}) => shape.map((pg) => pg.map((ring) => {
-  const q = ring.slice(0, -1), d = (u, v) => Math.hypot(u[0] - v[0], u[1] - v[1]);
+  const q = openRing(ring).slice(), d = (u, v) => Math.hypot(u[0] - v[0], u[1] - v[1]);
   for (let i = 0; i < q.length && q.length > 4; i++) { const n = q.length, w = (k) => q[(k + n) % n], v = q[i], a = w(i - 1), b = w(i + 1);
     const ang = Math.abs(Math.atan2((a[0] - v[0]) * (b[1] - v[1]) - (a[1] - v[1]) * (b[0] - v[0]), (a[0] - v[0]) * (b[0] - v[0]) + (a[1] - v[1]) * (b[1] - v[1])));
     if (ang * 180 / Math.PI >= deg) continue;

package/src/geometry/offset.js

@@ -7,11 +7,11 @@ import { U, D, I } from './booleans.js';
 import { circle, rect, bar } from './shapes.js';
 import { stroke } from './stroke.js';
 import { dp } from './path.js';
-import { dedupe } from './polygon.js';
+import { dedupe, openRing } from './polygon.js';
 
 const polys = (g) => (g.length && typeof g[0][0][0] === 'number' ? [g] : g);
 /** A ring's corner points, simplified (an open copy, split at its farthest point so the simplifier never sees first = last). */
-const ringPts = (r, tol = 0.2) => { const q = r.length > 1 && r[0][0] === r.at(-1)[0] && r[0][1] === r.at(-1)[1] ? r.slice(0, -1) : r; let far = 0, fd = -1;
+const ringPts = (r, tol = 0.2) => { const q = openRing(r, 0); let far = 0, fd = -1;
   q.forEach((p, i) => { const d = Math.hypot(p[0] - q[0][0], p[1] - q[0][1]); if (d > fd) { fd = d; far = i; } });
   return [...dp(q.slice(0, far + 1), tol).slice(0, -1), ...dp([...q.slice(far), q[0]], tol).slice(0, -1)]; };
 /** A true round offset: grows a shape by d (shrinks it when d < 0), every corner rounded. */

package/src/geometry/path.js

@@ -1,6 +1,7 @@
 /**
  * Shapes out: SVG path data (Douglas-Peucker simplified, one decimal), the SVG file, and writing it.
  */
+import { openRing } from './polygon.js';
 
 // Douglas-Peucker on each ring, then path string (evenodd)
 export function dp(pts, tol) {
@@ -13,8 +14,10 @@ export function dp(pts, tol) {
     if (md > tol) { keep[mi] = 1; st.push([a, mi], [mi, b]); } }
   return pts.filter((_, i) => keep[i]);
 }
+/** A shape as SVG path data (even-odd): each ring opened (closed or open, every corner kept), split at its farthest point,
+    simplified within `tol` and written to one decimal. */
 export function toPath(mp, tol = 0.12) {
-  return mp.map(pg => pg.map(ring => { let pts = ring.slice(0, -1); let far = 0, fd = -1;
+  return mp.map(pg => pg.map(ring => { let pts = openRing(ring); let far = 0, fd = -1;
     pts.forEach((q, i) => { const d = Math.hypot(q[0] - pts[0][0], q[1] - pts[0][1]); if (d > fd) { fd = d; far = i; } });
     pts = [...dp(pts.slice(0, far + 1), tol).slice(0, -1), ...dp([...pts.slice(far), pts[0]], tol).slice(0, -1)];
     return pts.length < 3 ? '' : 'M' + pts.map(([x, y]) => `${x.toFixed(1)} ${y.toFixed(1)}`).join('L') + 'Z'; }).join('')).join('');

package/src/geometry/polygon.d.ts

@@ -16,3 +16,7 @@ export function bbox(g: Shape): Box;
 export function winding(r: readonly Point[], p: Point): number;
 /** The points without repeated consecutive ones. */
 export function dedupe<P extends Point>(pts: readonly P[]): P[];
+/** A ring without its closing point: the last goes only when within `eps` (default 1e-6) of the first, so open rings keep every corner. */
+export function openRing<P extends Point>(ring: readonly P[], eps?: number): P[];
+/** A ring with its closing point: the first repeated at the end, unless the last is already within `eps` (default 1e-6) of it. */
+export function closeRing<P extends Point>(ring: readonly P[], eps?: number): P[];

package/src/geometry/polygon.js

@@ -1,6 +1,10 @@
 /**
  * Measures of a ring (a list of [x, y] points, closed implicitly) and of a shape: signed area, area, perimeter,
- * bounding box, winding number round a point, and consecutive duplicates dropped.
+ * bounding box, winding number round a point, consecutive duplicates dropped, and a ring opened or closed.
+ *
+ * Rings come both ways: the shape builders (poly, rect, circle, ellipse, rr, roundPoly, …) return them open (no repeated
+ * first point), the booleans (U, D, I, grow, lens, drop, …) closed (the first point repeated at the end). Code that wants
+ * one or the other asks for it with openRing() or closeRing() rather than slicing the last point off blind.
  */
 
 /**
@@ -91,3 +95,26 @@ export const dedupe = (pts) => pts.filter((p, i) => {
 	const q = pts[(i + 1) % pts.length];
 	return Math.hypot(p[0] - q[0], p[1] - q[1]) > 1e-6;
 });
+
+/**
+ * A ring without its closing point: the last point goes only when it lies within `eps` of the first (a sampled full turn
+ * ends near, not exactly on, its start), so an open ring comes back as it is, every corner kept.
+ *
+ * @template {import('./types.js').Point} P
+ * @param {readonly P[]} ring The ring, open or closed.
+ * @param {number} [eps] How near the last point must be to the first to count as its repeat.
+ * @returns {P[]} The ring, open (the input itself when it already was).
+ */
+export const openRing = (ring, eps = 1e-6) =>
+	/** @type {P[]} */ (ring.length > 1 && Math.hypot(ring[0][0] - ring[ring.length - 1][0], ring[0][1] - ring[ring.length - 1][1]) <= eps ? ring.slice(0, -1) : ring);
+
+/**
+ * A ring with its closing point: the first point repeated at the end, unless the last already lies within `eps` of it.
+ *
+ * @template {import('./types.js').Point} P
+ * @param {readonly P[]} ring The ring, open or closed.
+ * @param {number} [eps] How near the last point must be to the first to count as its repeat.
+ * @returns {P[]} The ring, closed (the input itself when it already was).
+ */
+export const closeRing = (ring, eps = 1e-6) =>
+	/** @type {P[]} */ (ring.length && openRing(ring, eps) === ring ? [...ring, ring[0]] : ring);

package/src/skill/bundle.js

@@ -15,7 +15,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',
-	'svg/path.js', 'svg/shapes.js', 'svg/rings.js', 'svg/shape.js', 'geometry/glitch.js', 'geometry/needle.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. */
 const FIT = ['svg/path.js', 'svg/shapes.js', 'svg/outline.js', 'util/number.js', 'fit/index.js'];

package/src/svg/index.d.ts

@@ -6,3 +6,4 @@ export { attr, shapes, viewBox, body } from './shapes.js';
 export { outlinePoints, bounds } from './outline.js';
 export { rings } from './rings.js';
 export { filledShape, svgShape, pathRings } from './shape.js';
+export { nonzeroFill, windingFill, ringsMeet } from './nonzero.js';

package/src/svg/index.js

@@ -7,3 +7,4 @@ export { attr, shapes, viewBox, body } from './shapes.js';
 export { outlinePoints, bounds } from './outline.js';
 export { rings } from './rings.js';
 export { filledShape, svgShape, pathRings } from './shape.js';
+export { nonzeroFill, windingFill, ringsMeet } from './nonzero.js';

package/src/svg/nonzero.d.ts

@@ -0,0 +1,12 @@
+import type { BooleanOps } from '../geometry/booleans.js';
+import type { Point, Ring, Shape } from '../geometry/types.js';
+
+/** Whether any two rings meet: an edge of one crosses or touches an edge of another. */
+export function ringsMeet(rs: readonly (readonly Point[])[]): boolean;
+/** Exact non-zero fill by winding levels, however the rings overlap (each ring taken as simple). */
+export function windingFill(rs: Ring[], b: BooleanOps): Shape;
+/**
+ * Non-zero fill from rings: classed one by one when no two meet; by winding levels when any do, keeping the classed
+ * polygons when they cover the same ground.
+ */
+export function nonzeroFill(rs: Ring[], b: BooleanOps): Shape;

package/src/svg/nonzero.js

@@ -0,0 +1,166 @@
+/**
+ * @module @logomarks/core/svg/nonzero
+ *
+ * Non-zero fill from rings. polygon-clipping (the booleans' library) has no non-zero fill rule across rings: it takes
+ * a polygon's first ring as its outside and the rest as holes. So the fill is built from booleans: rings that never
+ * meet are classed one by one (union or cut), and rings that cross or touch (overlapping subpaths, as font glyphs
+ * draw) go through winding levels, which are exact however they overlap. (clipper-lib has a non-zero fill type, but it
+ * is only an optional peer here, for the shape edits.)
+ */
+
+import { area, ringBox, signedArea, winding } from '../geometry/polygon.js';
+
+/**
+ * Whether segments ab and cd meet (crossing, touching or overlapping along a line).
+ *
+ * @param {import('../geometry/types.js').Point} a
+ * @param {import('../geometry/types.js').Point} b
+ * @param {import('../geometry/types.js').Point} c
+ * @param {import('../geometry/types.js').Point} d
+ * @returns {boolean} True when they share a point.
+ */
+function segmentsMeet(a, b, c, d) {
+	const side = (/** @type {number[]} */ p, /** @type {number[]} */ q, /** @type {number[]} */ r) => Math.sign((q[0] - p[0]) * (r[1] - p[1]) - (q[1] - p[1]) * (r[0] - p[0]));
+	const within = (/** @type {number[]} */ p, /** @type {number[]} */ q, /** @type {number[]} */ r) =>
+		Math.min(p[0], q[0]) <= r[0] && r[0] <= Math.max(p[0], q[0]) && Math.min(p[1], q[1]) <= r[1] && r[1] <= Math.max(p[1], q[1]);
+	const d1 = side(c, d, a), d2 = side(c, d, b), d3 = side(a, b, c), d4 = side(a, b, d);
+	if (d1 * d2 < 0 && d3 * d4 < 0) return true;
+	return (d1 === 0 && within(c, d, a)) || (d2 === 0 && within(c, d, b)) || (d3 === 0 && within(a, b, c)) || (d4 === 0 && within(a, b, d));
+}
+
+/**
+ * Whether two boxes overlap (edges touching count).
+ *
+ * @param {import('../geometry/types.js').Box} p
+ * @param {import('../geometry/types.js').Box} q
+ * @returns {boolean} True when they share a point.
+ */
+const boxesMeet = (p, q) => p[0] <= q[2] && q[0] <= p[2] && p[1] <= q[3] && q[1] <= p[3];
+
+/**
+ * The edges of a ring that reach into a box, each as its two ends and its own box.
+ *
+ * @param {readonly import('../geometry/types.js').Point[]} r The ring.
+ * @param {import('../geometry/types.js').Box} box The box.
+ * @returns {[import('../geometry/types.js').Point, import('../geometry/types.js').Point, import('../geometry/types.js').Box][]} The edges.
+ */
+function edgesIn(r, box) {
+	/** @type {[import('../geometry/types.js').Point, import('../geometry/types.js').Point, import('../geometry/types.js').Box][]} */
+	const out = [];
+	r.forEach((p, i) => {
+		const q = r[(i + 1) % r.length];
+		/** @type {import('../geometry/types.js').Box} */
+		const eb = [Math.min(p[0], q[0]), Math.min(p[1], q[1]), Math.max(p[0], q[0]), Math.max(p[1], q[1])];
+		if (boxesMeet(eb, box)) out.push([p, q, eb]);
+	});
+	return out;
+}
+
+/**
+ * Whether any two of the rings meet: an edge of one crosses or touches an edge of another.
+ *
+ * @param {readonly (readonly import('../geometry/types.js').Point[])[]} rs The rings.
+ * @returns {boolean} True when two rings meet.
+ */
+export function ringsMeet(rs) {
+	const boxes = rs.map(ringBox);
+	for (let i = 0; i < rs.length; i++) {
+		for (let j = i + 1; j < rs.length; j++) {
+			if (!boxesMeet(boxes[i], boxes[j])) continue;
+			/** @type {import('../geometry/types.js').Box} */
+			const both = [Math.max(boxes[i][0], boxes[j][0]), Math.max(boxes[i][1], boxes[j][1]), Math.min(boxes[i][2], boxes[j][2]), Math.min(boxes[i][3], boxes[j][3])];
+			const ei = edgesIn(rs[i], both), ej = edgesIn(rs[j], both);
+			for (const [a, b, ab] of ei) for (const [c, d, cb] of ej) if (boxesMeet(ab, cb) && segmentsMeet(a, b, c, d)) return true;
+		}
+	}
+	return false;
+}
+
+/**
+ * Non-zero fill for rings that never meet (nested or apart): largest first, each ring is added or cut by the winding
+ * just either side of its longest edge. With no other ring touching it, one test point pair speaks for the whole ring.
+ *
+ * @param {import('../geometry/types.js').Ring[]} rs The rings.
+ * @param {import('../geometry/booleans.js').BooleanOps} b The booleans.
+ * @returns {import('../geometry/types.js').Shape} The filled shape.
+ */
+function classedFill(rs, b) {
+	const sorted = rs.slice().sort((p, q) => Math.abs(signedArea(q)) - Math.abs(signedArea(p)));
+	const total = (/** @type {import('../geometry/types.js').Point} */ pt) => rs.reduce((s, r) => s + winding(r, pt), 0);
+	/** @type {import('../geometry/types.js').Shape} */
+	let g = [];
+	for (const r of sorted) {
+		let k = 0, longest = 0;
+		r.forEach((p, i) => {
+			const q = r[(i + 1) % r.length], L = Math.hypot(q[0] - p[0], q[1] - p[1]);
+			if (L > longest) { k = i; longest = L; }
+		});
+		const p = r[k], q = r[(k + 1) % r.length], e = 0.05;
+		const nx = ((q[1] - p[1]) / longest) * e, ny = ((q[0] - p[0]) / longest) * e;
+		const m = [(p[0] + q[0]) / 2, (p[1] + q[1]) / 2];
+		/** @type {import('../geometry/types.js').Point} */
+		const a = [m[0] - nx, m[1] + ny];
+		/** @type {import('../geometry/types.js').Point} */
+		const c = [m[0] + nx, m[1] - ny];
+		const [inside, outside] = winding(r, a) ? [a, c] : [c, a];
+		const fi = total(inside) !== 0, fo = total(outside) !== 0;
+		if (fi && !fo) g = b.union(g, [r]);
+		else if (!fi && fo) g = b.difference(g, [r]);
+	}
+	return g;
+}
+
+/**
+ * Exact non-zero fill for rings however they overlap. The plane is kept as winding levels (the region where the rings
+ * so far sum to each non-zero winding); each ring moves the part of every level it covers one step, up or down by its
+ * direction. The fill is every non-zero level unioned. Each ring is taken as simple, wound one way.
+ *
+ * @param {import('../geometry/types.js').Ring[]} rs The rings.
+ * @param {import('../geometry/booleans.js').BooleanOps} b The booleans.
+ * @returns {import('../geometry/types.js').Shape} The filled shape.
+ */
+export function windingFill(rs, b) {
+	/** @type {Map<number, import('../geometry/types.js').Shape>} */
+	let levels = new Map();
+	for (const r of rs) {
+		const s = Math.sign(signedArea(r)), R = b.union([r]);
+		/** @type {Map<number, import('../geometry/types.js').Shape>} */
+		const next = new Map();
+		const add = (/** @type {number} */ k, /** @type {import('../geometry/types.js').Shape} */ g) => {
+			if (k === 0 || !g.length) return;
+			const had = next.get(k);
+			next.set(k, had ? b.union(had, g) : g);
+		};
+		add(s, levels.size ? b.difference(R, ...levels.values()) : R);
+		for (const [k, g] of levels) {
+			add(k, b.difference(g, R));
+			add(k + s, b.intersection(g, R));
+		}
+		levels = next;
+	}
+	return b.union(...levels.values());
+}
+
+/**
+ * A shape's filled area (outsides less holes).
+ *
+ * @param {import('../geometry/types.js').Shape} g The shape.
+ * @returns {number} The area.
+ */
+const filledArea = (g) => g.reduce((t, pg) => t + area(pg[0]) - pg.slice(1).reduce((h, r) => h + area(r), 0), 0);
+
+/**
+ * Non-zero fill from rings. When no two rings meet, each is classed on its own (as filledShape always read them).
+ * When any two cross or touch, the winding levels decide; the classed polygons are still returned when they cover the
+ * same ground (their exclusive-or has no area to speak of), so an outline that always read right keeps its exact
+ * polygons, and only a misread one (an outer whose longest edge lies inside another ring) changes.
+ *
+ * @param {import('../geometry/types.js').Ring[]} rs The rings.
+ * @param {import('../geometry/booleans.js').BooleanOps} b The booleans.
+ * @returns {import('../geometry/types.js').Shape} The filled shape.
+ */
+export function nonzeroFill(rs, b) {
+	if (!ringsMeet(rs)) return classedFill(rs, b);
+	const exact = windingFill(rs, b), classed = classedFill(rs, b);
+	return filledArea(b.xor(classed, exact)) <= 1e-9 * Math.max(1, filledArea(exact)) ? classed : exact;
+}

package/src/svg/shape.js

@@ -1,10 +1,11 @@
 /**
  * A mark read back in as a shape: every filled outline unioned, each with its own fill rule. Even-odd outlines
- * exclude every ring; non-zero ones test the winding just either side of each ring's edge, so reversed holes, islands
- * and same-way overlaps all come out right.
+ * exclude every ring; non-zero ones sum the rings' windings (nonzero.js), so reversed holes, islands, same-way
+ * overlaps and overlapping subpaths (font glyphs) all come out right.
  */
 import { OPS } from '../geometry/booleans.js';
-import { signedArea, winding } from '../geometry/polygon.js';
+import { signedArea } from '../geometry/polygon.js';
+import { nonzeroFill } from './nonzero.js';
 import { rings } from './rings.js';
 import { parsePath } from './path.js';
 import { shapes } from './shapes.js';
@@ -17,32 +18,7 @@ import { shapes } from './shapes.js';
  * @param {import('../geometry/booleans.js').BooleanOps} b The booleans.
  * @returns {import('../geometry/types.js').Shape} The filled shape.
  */
-function fillOf(rs, evenodd, b) {
-	if (evenodd) return b.xor(...rs.map((r) => [r]));
-	const sorted = rs.slice().sort((p, q) => Math.abs(signedArea(q)) - Math.abs(signedArea(p)));
-	const total = (/** @type {import('../geometry/types.js').Point} */ pt) => rs.reduce((s, r) => s + winding(r, pt), 0);
-	/** @type {import('../geometry/types.js').Shape} */
-	let g = [];
-	for (const r of sorted) {
-		let k = 0, longest = 0;
-		r.forEach((p, i) => {
-			const q = r[(i + 1) % r.length], L = Math.hypot(q[0] - p[0], q[1] - p[1]);
-			if (L > longest) { k = i; longest = L; }
-		});
-		const p = r[k], q = r[(k + 1) % r.length], e = 0.05;
-		const nx = ((q[1] - p[1]) / longest) * e, ny = ((q[0] - p[0]) / longest) * e;
-		const m = [(p[0] + q[0]) / 2, (p[1] + q[1]) / 2];
-		/** @type {import('../geometry/types.js').Point} */
-		const a = [m[0] - nx, m[1] + ny];
-		/** @type {import('../geometry/types.js').Point} */
-		const c = [m[0] + nx, m[1] - ny];
-		const [inside, outside] = winding(r, a) ? [a, c] : [c, a];
-		const fi = total(inside) !== 0, fo = total(outside) !== 0;
-		if (fi && !fo) g = b.union(g, [r]);
-		else if (!fi && fo) g = b.difference(g, [r]);
-	}
-	return g;
-}
+const fillOf = (rs, evenodd, b) => (evenodd ? b.xor(...rs.map((r) => [r])) : nonzeroFill(rs, b));
 
 /**
  * Outlines (parsed path data with their fill rules) as one shape.