@arraypress/covers 1.3.1 → 1.5.1

package/src/layers/mosaic.js

@@ -0,0 +1,155 @@
+/**
+ * The `mosaic` layer.
+ *
+ * @module layers/mosaic
+ */
+
+import { attrs, num } from '@logomarks/image-effects/svg';
+import { toHex } from '@logomarks/image-effects/color';
+import { pixelGrid, pixelCoverage, pixelCells } from '@logomarks/core/edit';
+import { pos, wrap } from './util.js';
+import { markGeometry } from './mark-geometry.js';
+
+/**
+ * `mosaic` — a mark rastered into big square cells, each drawn on its own
+ * with a gap between, so whatever is under it shows through. The cells
+ * follow the mark's own shape (`@logomarks/core`'s pixelate: a cell is
+ * filled when the mark covers half of it, or a fifth where it would
+ * otherwise lose a thin line or a dot). `drop` leaves a share of the
+ * filled cells out, chosen by the layer's seed; `accent` puts a small
+ * asterisk or dot in one empty cell beside the mark.
+ *
+ * Options: `markup` (the mark's paths, 512 grid), `x`, `y`, `width`,
+ * `height` (the box it's fitted and centred in; default the canvas),
+ * `cells` (across the mark's longest side, 10), `gap` (a share of a cell,
+ * 0.12), `radius` (a share of a cell, 0), `drop` (0–1, 0.12), `color`
+ * (default the accent), `accent` (`'asterisk'` or `'dot'`), `accentColor`.
+ *
+ * @param {any} layer
+ * @param {import('../layers.js').RenderContext} ctx
+ * @returns {import('../layers.js').Markup}
+ *
+ * @example
+ * { type: 'mosaic', markup: mark, x: 40, y: 60, width: 320, height: 320, cells: 11, color: '#c8ff2e', drop: 0.15, accent: 'asterisk' }
+ */
+export function mosaic(layer, ctx) {
+  const geo = markGeometry(layer.markup);
+  if (!geo) return { defs: '', body: '' };
+  const g = mosaicGrid(geo, layer.cells);
+  const on = pixelCells(pixelCoverage(geo.paths, g), g);
+
+  // Fit the grid into the box, centred.
+  const bx = pos(layer.x ?? 0, 'x', ctx.canvas);
+  const by = pos(layer.y ?? 0, 'y', ctx.canvas);
+  const bw = pos(layer.width ?? '100%', 'x', ctx.canvas);
+  const bh = pos(layer.height ?? '100%', 'y', ctx.canvas);
+  const k = Math.min(bw / (g.cols * g.cell), bh / (g.rows * g.cell));
+  const cell = g.cell * k;
+  const ox = bx + (bw - g.cols * cell) / 2;
+  const oy = by + (bh - g.rows * cell) / 2;
+
+  const kept = dropCells(on, layer.drop ?? 0.12, ctx.rng);
+  const gap = cell * clamp(layer.gap ?? 0.12, 0, 0.9);
+  const r = cell * clamp(layer.radius ?? 0, 0, 0.5);
+  const side = cell - gap;
+  let rects = '';
+  kept.forEach((v, i) => {
+    if (!v) return;
+    const x = ox + (i % g.cols) * cell + gap / 2;
+    const y = oy + Math.floor(i / g.cols) * cell + gap / 2;
+    rects += r ? `<rect${attrs({ x, y, width: side, height: side, rx: r })}/>` : `M${num(x)} ${num(y)}h${num(side)}v${num(side)}h${num(-side)}Z`;
+  });
+  const color = layer.color ? toHex(layer.color) : ctx.palette.accent;
+  let body = r ? `<g fill="${color}">${rects}</g>` : `<path${attrs({ d: rects, fill: color })}/>`;
+
+  if (layer.accent) {
+    const at = accentCell(on, g, ctx.rng);
+    if (at >= 0) {
+      const cx = ox + (at % g.cols + 0.5) * cell;
+      const cy = oy + (Math.floor(at / g.cols) + 0.5) * cell;
+      body += accentGlyph(layer.accent, cx, cy, side, layer.accentColor ? toHex(layer.accentColor) : color);
+    }
+  }
+  return { defs: '', body: wrap(layer, body) };
+}
+
+/**
+ * The mosaic's grid over a mark: `cells` across its longest side (4–48),
+ * centred on its bounds (pixelate's grid, at that coarseness).
+ *
+ * @param {import('./mark-geometry.js').MarkGeometry} geo
+ * @param {number} [cells=10]
+ * @returns {import('@logomarks/core/edit').PixelGrid}
+ */
+export function mosaicGrid(geo, cells = 10) {
+  const n = clamp(Math.round(cells), 4, 48);
+  // pixelGrid sets 48 − 34 × amount cells across.
+  return pixelGrid((48 - n) / 34, geo.box);
+}
+
+/**
+ * The filled cells less a seeded share left out (at least one is kept).
+ *
+ * @param {Uint8Array} on
+ * @param {number} drop - 0–1.
+ * @param {import('../index.js').Rng} rng
+ * @returns {Uint8Array}
+ */
+function dropCells(on, drop, rng) {
+  const out = on.slice();
+  const share = clamp(drop, 0, 0.9);
+  let left = 0;
+  out.forEach((v, i) => {
+    if (!v) return;
+    // One draw a filled cell, always, so the choice is stable whatever `drop` is.
+    if (rng.next() < share) out[i] = 0;
+    else left++;
+  });
+  if (!left) return on.slice();
+  return out;
+}
+
+/**
+ * A seeded empty cell beside the mark (one with a filled neighbour), or -1.
+ *
+ * @param {Uint8Array} on
+ * @param {{ cols: number, rows: number }} g
+ * @param {import('../index.js').Rng} rng
+ * @returns {number}
+ */
+function accentCell(on, { cols, rows }, rng) {
+  const near = [];
+  for (let i = 0; i < on.length; i++) {
+    if (on[i]) continue;
+    const q = i % cols;
+    const r = Math.floor(i / cols);
+    const n = [[q - 1, r], [q + 1, r], [q, r - 1], [q, r + 1]].some(([a, b]) => a >= 0 && b >= 0 && a < cols && b < rows && on[b * cols + a]);
+    if (n) near.push(i);
+  }
+  if (!near.length) return -1;
+  return near[Math.floor(rng.next() * near.length)];
+}
+
+/**
+ * An asterisk (three bars) or a dot, centred in a cell of `side`.
+ *
+ * @param {'asterisk' | 'dot' | string} kind
+ * @param {number} cx @param {number} cy @param {number} side
+ * @param {string} color
+ * @returns {string}
+ */
+function accentGlyph(kind, cx, cy, side, color) {
+  if (kind === 'dot') return `<circle${attrs({ cx, cy, r: side * 0.24, fill: color })}/>`;
+  const L = side * 0.36;
+  const t = side * 0.085;
+  const d = [0, 60, 120].map((deg) => {
+    const a = (deg * Math.PI) / 180;
+    const [ux, uy, vx, vy] = [Math.cos(a), Math.sin(a), -Math.sin(a), Math.cos(a)];
+    const pts = [[-L, -t], [L, -t], [L, t], [-L, t]].map(([u, v]) => `${num(cx + u * ux + v * vx)} ${num(cy + u * uy + v * vy)}`);
+    return `M${pts.join('L')}Z`;
+  }).join('');
+  return `<path${attrs({ d, fill: color })}/>`;
+}
+
+/** @param {number} v @param {number} lo @param {number} hi @returns {number} */
+const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));

package/src/layers/outline.d.ts

@@ -0,0 +1,26 @@
+// The `outline` layer.
+import type { Color, Length, BaseLayer } from '../index.js';
+import type { RenderContext, Markup } from '../render/context.js';
+
+export interface OutlineLayer extends BaseLayer {
+  type: 'outline';
+  /** The mark's paths, on a 512 grid. */
+  markup: string;
+  /** The box the lines are fitted and centred in (default the canvas). */
+  x?: Length | `${number}%`; y?: Length | `${number}%`; width?: Length | `${number}%`; height?: Length | `${number}%`;
+  /** The share of the box's shorter side the whole set's longest side takes. Default 1. */
+  size?: number;
+  /** Contour lines, 0–8: the outline and more round it, `gap` apart. 0 draws the mark solid. Default 4. */
+  lines?: number;
+  /** Between lines, a share of the mark's longest side. Default 0.05. */
+  gap?: number;
+  /** Lines round the mark (`'out'`, the default) or inside it (`'in'`). */
+  direction?: 'out' | 'in';
+  /** Line width. Default `'0.4vmin'`. */
+  stroke?: Length;
+  /** Default the palette's text. */
+  color?: Color;
+}
+
+/** Draw a mark as contour lines (or solid), fitted by its real bounds. */
+export function outline(layer: OutlineLayer, ctx: RenderContext): Markup;

package/src/layers/outline.js

@@ -0,0 +1,105 @@
+/**
+ * The `outline` layer.
+ *
+ * @module layers/outline
+ */
+
+import { attrs, num } from '@logomarks/image-effects/svg';
+import { toHex } from '@logomarks/image-effects/color';
+import { len } from '@logomarks/image-effects/length';
+import { wrap } from './util.js';
+import { markGeometry } from './mark-geometry.js';
+import { layerBox, fitMark, markPaths } from './mark-draw.js';
+import { distanceField, isolines, smoothLine } from './isolines.js';
+
+/** Contour lines drawn by the field, by markup and spacing (a series of ten draws each mark once). @type {Map<string, number[][][][]>} */
+const cache = new Map();
+
+/**
+ * `outline` — a mark fitted to its box by its real bounds, drawn as
+ * contour lines: its own outline, then `lines − 1` more, each `gap`
+ * further out (or in), as a topographic map draws a hill. The offsets
+ * are isolines of the mark's signed distance field, so parts that grow
+ * into each other merge, as contours do, and outer corners round off.
+ * `lines: 0` draws the mark solid instead, in the same place.
+ *
+ * Options: `markup` (512 grid), `x`, `y`, `width`, `height` (the box; the
+ * whole set of lines is fitted and centred in it), `size` (the share of
+ * the box's shorter side the set's longest side takes, 1), `lines` (0–8,
+ * 4), `gap` (a share of the mark's longest side, 0.05), `direction`
+ * (`'out'`, `'in'`), `stroke` (px, `'0.4vmin'`), `color` (default `text`).
+ *
+ * @param {any} layer
+ * @param {import('../layers.js').RenderContext} ctx
+ * @returns {import('../layers.js').Markup}
+ *
+ * @example
+ * { type: 'outline', markup: mark, x: 140, y: 100, width: 240, height: 280, lines: 4, gap: 0.05, color: '#1b1b1b' }
+ */
+export function outline(layer, ctx) {
+  const geo = markGeometry(layer.markup);
+  if (!geo) return { defs: '', body: '' };
+  const lines = Math.round(Math.min(8, Math.max(0, layer.lines ?? 4)));
+  const side = Math.max(geo.box.width, geo.box.height);
+  const gap = side * Math.max(0.005, layer.gap ?? 0.05);
+  const inward = layer.direction === 'in';
+  const reach = lines > 1 && !inward ? gap * (lines - 1) : 0;
+  const fit = fitMark(geo.box, layerBox(layer, ctx), layer.size ?? 1, reach);
+  const color = layer.color ? toHex(layer.color) : ctx.palette.text;
+  const own = markPaths(layer.markup, fit);
+
+  if (!lines) {
+    const body = own.map((p) => `<path${attrs({ d: p.d, 'fill-rule': p.evenodd ? 'evenodd' : undefined })}/>`).join('');
+    return { defs: '', body: wrap(layer, `<g fill="${color}">${body}</g>`) };
+  }
+  const sw = len(layer.stroke, ctx.canvas, '0.4vmin');
+  // The outline itself, exactly; the offsets from the field.
+  let d = own.map((p) => p.d).join('');
+  for (const ring of offsetLines(layer.markup, geo, gap, lines, inward)) {
+    d += smoothLine(ring.map(([x, y]) => [x * fit.k + fit.dx, y * fit.k + fit.dy]), 0.1);
+  }
+  const body = `<path${attrs({ d, fill: 'none', stroke: color, 'stroke-width': num(sw, 3), 'stroke-linejoin': 'round', 'stroke-linecap': 'round' })}/>`;
+  return { defs: '', body: wrap(layer, body) };
+}
+
+/**
+ * The offset lines (not the outline itself), mark units: one set of
+ * polylines for each of `lines − 1` distances, `gap` apart.
+ *
+ * @param {string} markup
+ * @param {import('./mark-geometry.js').MarkGeometry} geo
+ * @param {number} gap - Mark units.
+ * @param {number} lines
+ * @param {boolean} inward
+ * @returns {number[][][]}
+ */
+function offsetLines(markup, geo, gap, lines, inward) {
+  const key = `${num(gap, 3)}|${lines}|${inward ? 'in' : 'out'}|${markup}`;
+  let sets = cache.get(key);
+  if (!sets) {
+    const levels = Array.from({ length: lines - 1 }, (_, i) => (inward ? -1 : 1) * gap * (i + 1));
+    const field = distanceField(geo, inward ? 0 : gap * (lines - 1), levels);
+    sets = [];
+    for (const level of levels) {
+      // Loops much smaller than the gap are where the field peaks at the level (between parts): left out.
+      sets.push(isolines(field.values, field.width, field.height, level)
+        .map((line) => line.map(([c, r]) => [field.x0 + c * field.step, field.y0 + r * field.step]))
+        .filter((line) => extent(line) >= gap * 0.6));
+    }
+    if (cache.size > 100) cache.clear();
+    cache.set(key, sets);
+  }
+  return sets.flat();
+}
+
+/**
+ * The longer side of a polyline's box.
+ *
+ * @param {number[][]} line
+ * @returns {number}
+ */
+function extent(line) {
+  let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+  for (const [x, y] of line) { x0 = Math.min(x0, x); y0 = Math.min(y0, y); x1 = Math.max(x1, x); y1 = Math.max(y1, y); }
+  return Math.max(x1 - x0, y1 - y0);
+}

package/src/layers.js

@@ -29,7 +29,7 @@ import { paper, scribble } from './handmade.js';
 import { ink, dither, contour, waveform, tiles, rule } from './print.js';
 import { typeset, wantsType } from './type/index.js';
 import { recordLayout } from './type/layout-ref.js';
-import { shape, svg, table, barcode, perforation, tear, texture } from './layers/index.js';
+import { shape, svg, table, barcode, perforation, tear, texture, mosaic, marks, outline, construction } from './layers/index.js';
 import { pos, layerAttrs } from './layers/util.js';
 import { paint } from './paint/index.js';
 import { imageSize } from './lint/image-size.js';
@@ -620,10 +620,11 @@ export function pattern(layer, ctx) {
     const d = [];
     if (angle === 0) {
       // Rows and columns: every `size` from the centre, or `divisions` equal
-      // cells (inner lines only); broken wherever they cross a `gaps` region.
-      const n = layer.divisions;
-      const ys = n ? Array.from({ length: n - 1 }, (_, k) => ((k + 1) * h) / n) : range(cy % size, h, size);
-      const xs = kind !== 'grid' ? [] : n ? Array.from({ length: n - 1 }, (_, k) => ((k + 1) * w) / n) : range(cx % size, w, size);
+      // cells (inner lines only; `[cols, rows]` for a design grid); broken
+      // wherever they cross a `gaps` region.
+      const [nx, ny] = Array.isArray(layer.divisions) ? layer.divisions.map((d) => Math.max(1, Math.round(d))) : [layer.divisions, layer.divisions];
+      const ys = ny ? Array.from({ length: ny - 1 }, (_, k) => ((k + 1) * h) / ny) : range(cy % size, h, size);
+      const xs = kind !== 'grid' ? [] : nx ? Array.from({ length: nx - 1 }, (_, k) => ((k + 1) * w) / nx) : range(cx % size, w, size);
       const gaps = (layer.gaps ?? []).map((g) => regionPx(g, ctx.canvas));
       d.push(gridPath(xs, ys, w, h, gaps));
       shapes = `<path${attrs({ d: d.join(''), fill: 'none', stroke: col, 'stroke-width': stroke, ...dashAttrs })}/>`;
@@ -1037,4 +1038,4 @@ function group() {
   throw new TypeError('A group layer is drawn by renderSvg()/renderImage(), not on its own');
 }
 
-export const LAYERS = Object.freeze({ solid, linear, radial, mesh, stripes, image, grain, pattern, shapes, icon, text, frame, diagram, paper, scribble, ink, dither, contour, waveform, tiles, rule, group, shape, svg, table, barcode, perforation, tear, texture, repeat: group, defs: group, use: group });
+export const LAYERS = Object.freeze({ solid, linear, radial, mesh, stripes, image, grain, pattern, shapes, icon, text, frame, diagram, paper, scribble, ink, dither, contour, waveform, tiles, rule, group, shape, svg, table, barcode, perforation, tear, texture, mosaic, marks, outline, construction, repeat: group, defs: group, use: group });

package/src/type/fallback.js

@@ -2,7 +2,7 @@
  * Glyph fallback: characters the chosen font lacks are shaped in a
  * fallback font (the layer's `fallback`, then any font registered with
  * `fallback: true`), and failing those drawn from the built-in symbols
- * (✺ ✦ ✶ ★ ☆ ♥ ♡ ▶ ◀ ● ◆ ■ ♪). Text the font covers shapes exactly as
+ * (✺ ✦ ✶ ★ ☆ ♥ ♡ ▶ ◀ ● ◆ ■ ♪ ≠). Text the font covers shapes exactly as
  * before (one HarfBuzz run).
  *
  * @module type/fallback

package/src/type/spans.d.ts

@@ -8,6 +8,8 @@ import type { Length, Color } from '../index.js';
 export interface TextSpan {
   content: string;
   font?: string; weight?: number; style?: 'normal' | 'italic'; axes?: Record<string, number>;
+  /** Set at the layer's `boldWeight` (default 700) when `weight` isn't given. */
+  bold?: boolean;
   /** Size relative to the layer's (default 1). */
   scale?: number;
   /** Size outright. */
@@ -24,7 +26,9 @@ export interface TextSpan {
 export interface Span { text: string; face: LoadedFont; scale: number; tracking: number; paint: string | undefined; dy: number }
 
 /** Resolve a layer's spans (faces loaded, sizes relative to `size`). */
-export function loadSpans(layer: { spans: (TextSpan | string)[]; font?: string; weight?: number; style?: string; axes?: Record<string, number>; letterSpacing?: number; transform?: string }, ctx: RenderContext, size: number): Promise<Span[]>;
+export function loadSpans(layer: { spans: (TextSpan | string)[]; font?: string; weight?: number; boldWeight?: number; style?: string; axes?: Record<string, number>; letterSpacing?: number; transform?: string }, ctx: RenderContext, size: number): Promise<Span[]>;
+/** A `content` array as spans, one a line, when any item is a span object; else `undefined`. */
+export function lineSpans(content: unknown): TextSpan[] | undefined;
 /** Spans as lines (split at `\n`, wrapped at `maxWidth`). */
 export function spanLines(spans: Span[], size: number, maxWidth: number, fallbacks: LoadedFont[]): Span[][];
 /** Shape a line of spans as one run. */

package/src/type/spans.js

@@ -3,9 +3,11 @@
  * style, axes, size, colour, tracking and baseline shift, set one after
  * another on the same lines (a `\n` in a span starts a new line).
  *
- * `spans: [{ content, font, weight, style, axes, scale, size, color, letterSpacing, dy }]`;
+ * `spans: [{ content, font, weight, bold, style, axes, scale, size, color, letterSpacing, dy }]`;
  * anything a span leaves out comes from the layer. `scale` sizes a span
- * relative to the layer (`size` gives it outright).
+ * relative to the layer (`size` gives it outright); `bold: true` sets it at
+ * the layer's `boldWeight` (700). A `content` array with span objects in it
+ * is one span a line (`lineSpans`): a headline whose lines change weight.
  *
  * @module type/spans
  */
@@ -37,7 +39,8 @@ export async function loadSpans(layer, ctx, size) {
   const out = [];
   for (const given of layer.spans) {
     const s = typeof given === 'string' ? { content: given } : given;
-    const face = await faceFor(ctx, { font: s.font ?? layer.font, weight: s.weight ?? layer.weight, style: s.style ?? layer.style, axes: { ...layer.axes, ...s.axes } });
+    const weight = s.weight ?? (s.bold ? layer.boldWeight ?? 700 : layer.weight);
+    const face = await faceFor(ctx, { font: s.font ?? layer.font, weight, style: s.style ?? layer.style, axes: { ...layer.axes, ...s.axes } });
     const kase = s.transform ?? layer.transform;
     const raw = String(s.content ?? '').replace(/[\t\r ]+/g, ' ');
     out.push({
@@ -52,6 +55,26 @@ export async function loadSpans(layer, ctx, size) {
   return out;
 }
 
+/**
+ * A `content` array as spans, one a line, when any item is a span object
+ * (`{ content, bold, weight, … }`); otherwise `undefined` (plain lines stay
+ * content).
+ *
+ * @param {unknown} content - A text layer's `content`.
+ * @returns {import('./spans.js').TextSpan[] | undefined}
+ *
+ * @example
+ * lineSpans([{ content: 'Signal', bold: true }, 'over the']);
+ * // [{ content: 'Signal\n', bold: true }, { content: 'over the' }]
+ */
+export function lineSpans(content) {
+  if (!Array.isArray(content) || !content.some((x) => x && typeof x === 'object')) return undefined;
+  return content.map((item, i) => {
+    const s = item && typeof item === 'object' ? item : { content: item };
+    return { ...s, content: `${s.content ?? ''}${i < content.length - 1 ? '\n' : ''}` };
+  });
+}
+
 /**
  * Spans as lines: split at `\n`, then (with a finite `maxWidth`) wrapped at
  * spaces, greedily, at `size`.

package/src/type/symbols.d.ts

@@ -1,7 +1,7 @@
 // Built-in symbols, drawn as shapes (the last glyph fallback).
 import type { LoadedFont } from '../fonts.js';
 
-/** The symbol face: ✺ ✦ ✶ ★ ☆ ♥ ♡ ▶ ◀ ● ◆ ■ ♪. */
+/** The symbol face: ✺ ✦ ✶ ★ ☆ ♥ ♡ ▶ ◀ ● ◆ ■ ♪ ≠. */
 export function symbolFace(): LoadedFont;
 /** The characters it draws. */
 export const SYMBOLS: string;

package/src/type/symbols.js

@@ -1,6 +1,6 @@
 /**
  * A built-in face of a few symbols type often wants and fonts often lack
- * (✺ ✦ ✶ ★ ☆ ♥ ♡ ▶ ◀ ● ◆ ■ ♪), drawn as shapes. The last fallback when a
+ * (✺ ✦ ✶ ★ ☆ ♥ ♡ ▶ ◀ ● ◆ ■ ♪ ≠), drawn as shapes. The last fallback when a
  * text layer's font has no glyph for a character.
  *
  * @module type/symbols
@@ -38,6 +38,23 @@ function heart(k) {
 /** @param {number} r @param {number} [n=48] @returns {[number, number][]} */
 const circle = (r, n = 48) => Array.from({ length: n }, (_, i) => /** @type {[number, number]} */ ([CX + r * Math.sin((i / n) * Math.PI * 2), CY + r * Math.cos((i / n) * Math.PI * 2)]));
 
+/**
+ * Not-equal, on a narrower advance (`NARROW`): two bars and a slash, one
+ * contour each, all wound alike so they fill as one.
+ *
+ * @returns {string}
+ */
+function notEqual() {
+  const cx = NARROW / 2;
+  const [half, bar, gap, lean, stem] = [230, 62, 112, 150, 31];
+  const rect = (/** @type {number} */ y) => poly([[cx - half, y + bar / 2], [cx + half, y + bar / 2], [cx + half, y - bar / 2], [cx - half, y - bar / 2]]);
+  const slash = poly([[cx + lean - stem, CY + 300], [cx + lean + stem, CY + 300], [cx - lean + stem, CY - 300], [cx - lean - stem, CY - 300]]);
+  return rect(CY + gap) + rect(CY - gap) + slash;
+}
+
+/** Advance of the narrow symbols (≠), font units. */
+const NARROW = 600;
+
 /** Outlines by character. An inner contour runs the other way (a hole). */
 const SHAPES = /** @type {Record<string, string>} */ ({
   '✺': poly(star(16, 0.5)),
@@ -53,6 +70,7 @@ const SHAPES = /** @type {Record<string, string>} */ ({
   '◆': poly([[CX, CY + R], [CX + R * 0.8, CY], [CX, CY - R], [CX - R * 0.8, CY]]),
   '■': poly([[CX - R * 0.75, CY + R * 0.75], [CX + R * 0.75, CY + R * 0.75], [CX + R * 0.75, CY - R * 0.75], [CX - R * 0.75, CY - R * 0.75]]),
   '♪': poly([[CX - 40, CY + R], [CX + 220, CY + R * 0.7], [CX + 220, CY + R * 0.45], [CX + 20, CY + R * 0.72], [CX + 20, CY - R * 0.55], [CX - 40, CY - R * 0.55]]) + poly(circle(110).map(([x, y]) => /** @type {[number, number]} */ ([x - 120, y - R * 0.6]))),
+  '≠': notEqual(),
 });
 
 const CHARS = Object.keys(SHAPES);
@@ -80,7 +98,7 @@ export function symbolFace() {
     variations: {},
     source: { name: 'symbols', src: 'covers:symbols', weight: 400 },
     glyphToPath: (/** @type {number} */ gid) => SHAPES[CHARS[gid - 1]] ?? '',
-    shapeRun: (/** @type {string} */ text) => Array.from(text).map((ch, i) => ({ gid: CHARS.indexOf(ch) + 1, cluster: i, xAdvance: ADV, xOffset: 0, yOffset: 0 })),
+    shapeRun: (/** @type {string} */ text) => Array.from(text).map((ch, i) => ({ gid: CHARS.indexOf(ch) + 1, cluster: i, xAdvance: ch === '≠' ? NARROW : ADV, xOffset: 0, yOffset: 0 })),
   };
   return face;
 }

package/src/type/typeset.js

@@ -24,7 +24,8 @@
  * - **Live text**: `render: 'live'` writes `<text>` with the font embedded
  *   by `@font-face` (or linked by URL), laid out the same way, for in-browser
  *   speed and selectable text.
- * - **Mixed runs**: `spans`, each with its own font, weight, size, colour.
+ * - **Mixed runs**: `spans`, each with its own font, weight, size, colour;
+ *   or `content` lines as span objects (`{ content, bold }`), one a line.
  * - **Per-glyph control**: `glyphs: { scale, dx, dy, rotate, color }` arrays.
  * - **Fallback**: characters the font lacks come from `fallback`, fonts
  *   registered with `fallback: true`, or the built-in symbols.
@@ -52,7 +53,7 @@ import { fontFace } from './live.js';
 import { autoColor } from './auto-color.js';
 import { fallbackFaces, shapeText } from './fallback.js';
 import { controlGlyphs, glyphCount } from './glyphs.js';
-import { loadSpans, spanLines, shapeSpans, spanText } from './spans.js';
+import { loadSpans, spanLines, shapeSpans, spanText, lineSpans } from './spans.js';
 import { recordLayout } from './layout-ref.js';
 import { marquee } from '../animate/marquee.js';
 
@@ -83,6 +84,9 @@ export function wantsType(layer) {
  * @returns {Promise<import('../layers.js').Markup>}
  */
 export async function typeset(layer, ctx) {
+  // Lines given as span objects (a headline whose lines change weight) are spans.
+  const perLine = lineSpans(layer.content);
+  if (perLine) layer = { ...layer, content: undefined, spans: perLine };
   const rawContent = Array.isArray(layer.content) ? layer.content.join('\n') : layer.content && typeof layer.content === 'object' ? layer.content.content : layer.content;
   const kase = layer.transform === 'uppercase' || layer.transform === 'lowercase' ? layer.transform : undefined;
   let content = layer.spans ? '' : caseText(String(rawContent ?? ''), kase);

package/src/version.js

@@ -1,4 +1,4 @@
 // Generated by scripts/generate.mjs from package.json. Do not edit.
 
 /** The package version, part of every cache key. */
-export const VERSION = '1.3.1';
+export const VERSION = '1.5.1';