@arraypress/covers 0.0.0-stage → 1.1.0

package/src/svg.js

@@ -0,0 +1,69 @@
+/**
+ * Small helpers for writing SVG markup deterministically.
+ *
+ * Numbers are always written through {@link num}, so the same input gives
+ * byte-identical output on every machine (no `0.30000000000000004`, no
+ * locale formatting, no `-0`).
+ *
+ * @module svg
+ */
+
+/**
+ * Format a number for SVG: at most `digits` decimals, no trailing zeros.
+ *
+ * @param {number} v - The number.
+ * @param {number} [digits=2] - Maximum decimals.
+ * @returns {string} The formatted number.
+ *
+ * @example
+ * num(1 / 3);   // '0.33'
+ * num(12.5);    // '12.5'
+ * num(-0.001);  // '0'
+ */
+export function num(v, digits = 2) {
+  if (!Number.isFinite(v)) return '0';
+  const s = v.toFixed(digits).replace(/\.?0+$/, '');
+  return s === '-0' || s === '' ? '0' : s;
+}
+
+/**
+ * Escape text for an XML attribute or text node.
+ *
+ * @param {string} s - Raw text.
+ * @returns {string} Escaped text.
+ */
+export function esc(s) {
+  return String(s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
+}
+
+/**
+ * Serialise an attribute object. `undefined`, `null` and `false` values are
+ * skipped; numbers go through {@link num}. Keys keep their insertion order.
+ *
+ * @param {Record<string, string | number | boolean | null | undefined>} obj - Attributes.
+ * @returns {string} ` key="value"` pairs (with a leading space), or `''`.
+ *
+ * @example
+ * attrs({ x: 1.005, fill: '#fff', opacity: undefined }); // ' x="1" fill="#fff"'
+ */
+export function attrs(obj) {
+  let out = '';
+  for (const [k, v] of Object.entries(obj)) {
+    if (v === undefined || v === null || v === false) continue;
+    out += ` ${k}="${typeof v === 'number' ? num(v) : esc(String(v))}"`;
+  }
+  return out;
+}
+
+/**
+ * Opacity and blend-mode attributes shared by every layer.
+ *
+ * @param {{ opacity?: number, blend?: string }} layer - The layer.
+ * @returns {Record<string, string | number | undefined>} Attributes for the layer's group.
+ */
+export function layerAttrs(layer) {
+  return {
+    opacity: layer.opacity != null && layer.opacity < 1 ? Math.max(0, layer.opacity) : undefined,
+    style: layer.blend && layer.blend !== 'normal' ? `mix-blend-mode:${layer.blend}` : undefined,
+  };
+}

package/src/text.d.ts

@@ -0,0 +1,29 @@
+// Text: shaping, line breaking and outline drawing.
+import type { LoadedFont } from './fonts.js';
+
+/** A shaped run: glyph ids and pen positions, px. */
+export interface Shaped {
+  /** Pen positions, px. A glyph from another face (fallback, a span) carries it, its own size, a paint key and a transform. */
+  glyphs: { gid: number; x: number; y: number; cluster?: number; face?: LoadedFont; size?: number; paint?: string; t?: [number, number, number, number, number, number] }[];
+  /** Advance width, px. */
+  width: number;
+}
+
+/** Laid-out text. */
+export interface Layout {
+  lines: { text: string; run: Shaped }[];
+  size: number;
+  truncated: boolean;
+  width: number;
+}
+
+/** Shape one line at a size with letter-spacing (px between clusters). */
+export function shape(face: LoadedFont, text: string, size: number, tracking: number, hb?: unknown): Shaped;
+/** A glyph's outline as parsed commands, font units (cached on the face). */
+export function outline(face: LoadedFont, gid: number): (string | number)[];
+/** Shaped glyphs as SVG path data, px. */
+export function runPath(face: LoadedFont, run: Shaped, size: number, x: number, baseline: number): string;
+/** Break text into lines: greedy, optionally balanced, shrinking toward `minSize`, truncated past `maxLines`. */
+export function layout(o: { face: LoadedFont; hb?: unknown; text: string; size: number; minSize?: number; letterSpacing?: number; maxWidth?: number; maxLines?: number; ellipsis?: string; balance?: boolean }): Layout;
+/** Collapse spaces, trim lines and apply a case. */
+export function caseText(s: string, t: string | undefined): string;

package/src/text.js

@@ -0,0 +1,237 @@
+/**
+ * Text: shaping, line breaking and outline drawing.
+ *
+ * A line is shaped by HarfBuzz as a whole (so kerning across spaces and
+ * ligatures are right), then every glyph's outline is transformed into
+ * canvas pixels and written as one `<path>` per line. The output never
+ * references a font, so it renders the same in librsvg, a browser or a
+ * design tool.
+ *
+ * Line breaking is greedy on spaces, then optionally balanced (like CSS
+ * `text-wrap: balance`: the narrowest width that keeps the same number of
+ * lines, so a headline doesn't end on a lonely word). A word wider than
+ * the line is broken between characters. Past `maxLines` the text is cut
+ * at a word and given an ellipsis; with `minSize`, the size first steps
+ * down until the text fits.
+ *
+ * Vertical metrics are trimmed to the cap height above the first line and
+ * the baseline below the last (CSS `text-box: trim-both cap alphabetic`),
+ * so a margin measured to a headline is the margin you see.
+ *
+ * @module text
+ */
+
+import { num } from './svg.js';
+
+/**
+ * A shaped run of text.
+ *
+ * @typedef {object} Shaped
+ * @property {{ gid: number, x: number, y: number, cluster?: number }[]} glyphs - Glyph ids and pen positions in px (y is the baseline offset), and the character each starts at.
+ * @property {number} width - Advance width in px (no trailing letter-spacing).
+ */
+
+/**
+ * Shape a run of text.
+ *
+ * @param {import('./fonts.js').LoadedFont} face - The face.
+ * @param {string} text - One line of text.
+ * @param {number} size - Font size in px.
+ * @param {number} tracking - Letter-spacing in px, added between clusters (0 for none).
+ * @param {any} [hb] - Unused (kept for the 1.0 signature).
+ * @returns {Shaped} Positioned glyphs.
+ */
+export function shape(face, text, size, tracking, hb) {
+  const glyphsIn = face.shapeRun(text);
+  const scale = size / face.upem;
+  const glyphs = [];
+  let pen = 0;
+  for (let i = 0; i < glyphsIn.length; i++) {
+    const p = glyphsIn[i];
+    glyphs.push({ gid: p.gid, x: pen + p.xOffset * scale, y: -p.yOffset * scale, cluster: p.cluster });
+    pen += p.xAdvance * scale;
+    const nextCluster = glyphsIn[i + 1]?.cluster;
+    if (tracking && nextCluster !== undefined && nextCluster !== p.cluster) pen += tracking;
+  }
+  return { glyphs, width: pen };
+}
+
+/**
+ * A glyph's outline as parsed commands, in font units (y up). Cached on
+ * the face.
+ *
+ * @param {import('./fonts.js').LoadedFont} face
+ * @param {number} gid
+ * @returns {(string | number)[]} Flat list: command letter followed by its numbers.
+ */
+export function outline(face, gid) {
+  let cmds = face.paths.get(gid);
+  if (!cmds) {
+    cmds = [];
+    const d = face.glyphToPath(gid);
+    for (const m of d.matchAll(/([MLQCZ])([^MLQCZ]*)/gi)) {
+      cmds.push(m[1].toUpperCase());
+      for (const n of m[2].split(/[\s,]+/).filter(Boolean)) cmds.push(parseFloat(n));
+    }
+    face.paths.set(gid, cmds);
+  }
+  return cmds;
+}
+
+/**
+ * Write shaped glyphs as SVG path data in canvas pixels.
+ *
+ * @param {import('./fonts.js').LoadedFont} face
+ * @param {Shaped} run - Shaped glyphs.
+ * @param {number} size - Font size in px.
+ * @param {number} x - Left edge of the run.
+ * @param {number} baseline - Baseline y.
+ * @returns {string} Path data.
+ */
+export function runPath(face, run, size, x, baseline) {
+  const s = size / face.upem;
+  const parts = [];
+  for (const g of run.glyphs) {
+    const ox = x + g.x;
+    const oy = baseline + g.y;
+    let coords = [];
+    for (const c of outline(face, g.gid)) {
+      if (typeof c === 'string') {
+        if (coords.length) parts.push(coords.join(' '));
+        parts.push(c);
+        coords = [];
+      } else {
+        // Coordinates alternate x, y; y flips (font units point up).
+        coords.push(num(coords.length % 2 === 0 ? ox + c * s : oy - c * s));
+      }
+    }
+    if (coords.length) parts.push(coords.join(' '));
+  }
+  return parts.join('');
+}
+
+/**
+ * Laid-out text.
+ *
+ * @typedef {object} Layout
+ * @property {{ text: string, run: Shaped }[]} lines - Each line and its shaping.
+ * @property {number} size - The size used (may be below the asked size with `minSize`).
+ * @property {boolean} truncated - Whether an ellipsis was added.
+ * @property {number} width - The widest line.
+ */
+
+/**
+ * Break text into lines.
+ *
+ * @param {object} o
+ * @param {import('./fonts.js').LoadedFont} o.face - The face.
+ * @param {typeof import('harfbuzzjs')} o.hb - harfbuzzjs.
+ * @param {string} o.text - The text (`\n` starts a new line).
+ * @param {number} o.size - Font size in px.
+ * @param {number} [o.minSize] - Smallest size to shrink to before truncating.
+ * @param {number} [o.letterSpacing=0] - Tracking in em.
+ * @param {number} [o.maxWidth=Infinity] - Line width in px.
+ * @param {number} [o.maxLines=Infinity] - Most lines before truncating.
+ * @param {string} [o.ellipsis='…'] - Appended to a cut line.
+ * @param {boolean} [o.balance=false] - Balance line lengths.
+ * @returns {Layout} The layout.
+ */
+export function layout(o) {
+  const maxLines = Math.max(1, o.maxLines ?? Infinity);
+  const maxWidth = o.maxWidth ?? Infinity;
+  let size = o.size;
+  const floor = Math.min(o.minSize ?? size, size);
+
+  for (;;) {
+    const attempt = breakLines({ ...o, size, maxWidth, maxLines });
+    if ((!attempt.truncated && !attempt.forced) || size <= floor) return attempt;
+    size = Math.max(floor, size * 0.94);
+  }
+}
+
+/**
+ * One layout pass at a fixed size.
+ *
+ * @param {Parameters<typeof layout>[0] & { maxWidth: number, maxLines: number }} o
+ * @returns {Layout & { forced: boolean }} The layout; `forced` is true when a word had to be split.
+ */
+function breakLines(o) {
+  const tracking = (o.letterSpacing ?? 0) * o.size;
+  const measure = (/** @type {string} */ t) => shape(o.face, t, o.size, tracking, o.hb);
+  const ellipsis = o.ellipsis ?? '…';
+
+  /** @param {number} width */
+  const wrap = (width) => {
+    /** @type {string[]} */
+    const lines = [];
+    let forced = false;
+    for (const para of o.text.split('\n')) {
+      const words = para.split(/ +/).filter(Boolean);
+      if (!words.length) { lines.push(''); continue; }
+      let line = '';
+      for (const word of words) {
+        const candidate = line ? `${line} ${word}` : word;
+        if (!line || measure(candidate).width <= width) {
+          line = candidate;
+        } else {
+          lines.push(line);
+          line = word;
+        }
+        // A single word wider than the line: split it between characters.
+        while (measure(line).width > width && Array.from(line).length > 1) {
+          forced = true;
+          const chars = Array.from(line);
+          let cut = chars.length - 1;
+          while (cut > 1 && measure(chars.slice(0, cut).join('')).width > width) cut--;
+          lines.push(chars.slice(0, cut).join(''));
+          line = chars.slice(cut).join('');
+        }
+      }
+      lines.push(line);
+    }
+    return { lines, forced };
+  };
+
+  let { lines, forced } = wrap(o.maxWidth);
+
+  if (o.balance && lines.length > 1 && lines.length <= o.maxLines && Number.isFinite(o.maxWidth)) {
+    const target = lines.length;
+    let lo = o.maxWidth * 0.4;
+    let hi = o.maxWidth;
+    for (let i = 0; i < 12; i++) {
+      const mid = (lo + hi) / 2;
+      const w = wrap(mid);
+      if (w.lines.length <= target && !w.forced) hi = mid; else lo = mid;
+    }
+    lines = wrap(hi).lines;
+  }
+
+  let truncated = false;
+  if (lines.length > o.maxLines) {
+    truncated = true;
+    const kept = lines.slice(0, o.maxLines);
+    let last = kept[o.maxLines - 1];
+    const fits = (/** @type {string} */ t) => measure(t + ellipsis).width <= o.maxWidth;
+    while (!fits(last) && last.length) {
+      const cut = last.lastIndexOf(' ');
+      last = cut > 0 ? last.slice(0, cut) : Array.from(last).slice(0, -1).join('');
+    }
+    kept[o.maxLines - 1] = last.replace(/[\s.,;:!?·—–-]+$/u, '') + ellipsis;
+    lines = kept;
+  }
+
+  const shaped = lines.map((text) => ({ text, run: measure(text) }));
+  return { lines: shaped, size: o.size, truncated, forced, width: Math.max(0, ...shaped.map((l) => l.run.width)) };
+}
+
+/**
+ * Collapse spaces, trim each line, and apply a case.
+ *
+ * @param {string} s - The text.
+ * @param {string | undefined} t - `'uppercase'`, `'lowercase'`, anything else for none.
+ * @returns {string}
+ */
+export function caseText(s, t) {
+  const clean = s.replace(/[\t\r ]+/g, ' ').replace(/ *\n */g, '\n').trim();
+  return t === 'uppercase' ? clean.toUpperCase() : t === 'lowercase' ? clean.toLowerCase() : clean;
+}

package/src/type/auto-color.d.ts

@@ -0,0 +1,9 @@
+// Auto contrast for `color: 'auto'`.
+import type { RenderContext } from '../render/context.js';
+
+/** Backdrop luma (0–1) above which `color: 'auto'` picks the dark colour (0.72). */
+export const AUTO_THRESHOLD: number;
+/** Rec. 601 luma of a colour, 0–1. */
+export function luma(c: string): number;
+/** White or near-black (or `autoColors`) by the luma of what's drawn under `box`. */
+export function autoColor(layer: { autoColors?: [string, string]; autoThreshold?: number }, ctx: RenderContext, box: { x: number; y: number; width: number; height: number }): Promise<string>;

package/src/type/auto-color.js

@@ -0,0 +1,44 @@
+/**
+ * Auto contrast: white or near-black (or a layer's `autoColors`), by how
+ * light what's drawn underneath is.
+ *
+ * The rule is the one the site's designs use: the backdrop's luma (Rec. 601
+ * weights on the gamma-encoded channels, 0–1) above `AUTO_THRESHOLD`
+ * (0.72) takes the dark colour, anything else the light one. A pure
+ * contrast-ratio choice picks black on mid-tones (a mid pink, a sky blue)
+ * where designers set white; this matches what they set.
+ *
+ * @module type/auto-color
+ */
+
+import { toHex } from '../color.js';
+
+/** Backdrop luma (0–1) above which `color: 'auto'` picks the dark colour. */
+export const AUTO_THRESHOLD = 0.72;
+
+/**
+ * Rec. 601 luma of a colour, 0–1.
+ *
+ * @param {string} c
+ * @returns {number}
+ */
+export function luma(c) {
+  const h = toHex(c);
+  const [r, g, b] = [1, 3, 5].map((i) => parseInt(h.slice(i, i + 2), 16) / 255);
+  return 0.299 * r + 0.587 * g + 0.114 * b;
+}
+
+/**
+ * Pick the text colour against what's underneath (`autoThreshold` on the
+ * layer overrides the 0.72 cut).
+ *
+ * @param {any} layer
+ * @param {import('../layers.js').RenderContext} ctx
+ * @param {{ x: number, y: number, width: number, height: number }} box
+ * @returns {Promise<string>}
+ */
+export async function autoColor(layer, ctx, box) {
+  const [light, dark] = (layer.autoColors ?? ['#ffffff', '#0b0b0b']).map(toHex);
+  const under = await /** @type {any} */ (ctx).backdrop?.(box);
+  return luma(under ?? ctx.palette.bg) > (layer.autoThreshold ?? AUTO_THRESHOLD) ? dark : light;
+}

package/src/type/fallback.d.ts

@@ -0,0 +1,11 @@
+// Glyph fallback.
+import type { LoadedFont } from '../fonts.js';
+import type { Shaped } from '../text.js';
+import type { RenderContext } from '../render/context.js';
+
+/** The faces to fall back to: the layer's `fallback`, fonts registered with `fallback: true`, then the built-in symbols. */
+export function fallbackFaces(ctx: RenderContext, o: { fallback?: string | string[]; weight?: number; style?: string }): Promise<LoadedFont[]>;
+/** Whether a face has a glyph for a character. */
+export function covers(face: LoadedFont, ch: string): boolean;
+/** Shape a line, falling back face by face where the face lacks a glyph. */
+export function shapeText(face: LoadedFont, text: string, size: number, tracking: number, fallbacks?: LoadedFont[]): Shaped;

package/src/type/fallback.js

@@ -0,0 +1,92 @@
+/**
+ * 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
+ * before (one HarfBuzz run).
+ *
+ * @module type/fallback
+ */
+
+import { shape } from '../text.js';
+import { loadFont, pickFont } from '../fonts.js';
+import { symbolFace } from './symbols.js';
+
+/**
+ * The faces to fall back to, in order.
+ *
+ * @param {import('../layers.js').RenderContext} ctx
+ * @param {{ fallback?: string | string[], weight?: number, style?: string }} o
+ * @returns {Promise<import('../fonts.js').LoadedFont[]>}
+ */
+export async function fallbackFaces(ctx, o) {
+  const names = o.fallback == null ? [] : [].concat(/** @type {any} */ (o.fallback));
+  const sources = [
+    ...names.map((n) => ctx.fonts.find((f) => f.name.toLowerCase() === String(n).toLowerCase()) ? pickFont(ctx.fonts, n, o.weight ?? 600, o.style) : undefined),
+    ...ctx.fonts.filter((f) => /** @type {any} */ (f).fallback),
+  ].filter(Boolean);
+  const faces = [];
+  for (const s of new Set(sources)) faces.push(await loadFont(/** @type {any} */ (s)));
+  faces.push(symbolFace());
+  return faces;
+}
+
+/** Characters each face lacks, by face. @type {WeakMap<object, Map<string, boolean>>} */
+const missing = new WeakMap();
+
+/**
+ * Whether a face has a glyph for a character.
+ *
+ * @param {import('../fonts.js').LoadedFont} face
+ * @param {string} ch
+ * @returns {boolean}
+ */
+export function covers(face, ch) {
+  let m = missing.get(face.paths);
+  if (!m) missing.set(face.paths, (m = new Map()));
+  let has = m.get(ch);
+  if (has === undefined) {
+    has = /\s/.test(ch) || face.shapeRun(ch).every((g) => g.gid !== 0);
+    m.set(ch, has);
+  }
+  return has;
+}
+
+/**
+ * Shape a line, falling back face by face for characters the face lacks.
+ * Glyphs from another face carry it (`glyph.face`).
+ *
+ * @param {import('../fonts.js').LoadedFont} face
+ * @param {string} text
+ * @param {number} size
+ * @param {number} tracking - px between clusters.
+ * @param {import('../fonts.js').LoadedFont[]} [fallbacks]
+ * @returns {import('../text.js').Shaped}
+ */
+export function shapeText(face, text, size, tracking, fallbacks) {
+  const run = shape(face, text, size, tracking);
+  if (!fallbacks?.length || run.glyphs.every((g) => g.gid !== 0)) return run;
+  // Segments of one face each, in order.
+  /** @type {{ face: import('../fonts.js').LoadedFont, text: string }[]} */
+  const segs = [];
+  for (const ch of Array.from(text)) {
+    const f = covers(face, ch) ? face : fallbacks.find((x) => covers(x, ch)) ?? face;
+    const last = segs[segs.length - 1];
+    if (last && last.face === f) last.text += ch;
+    else segs.push({ face: f, text: ch });
+  }
+  /** @type {import('../text.js').Shaped['glyphs']} */
+  const glyphs = [];
+  let x = 0;
+  let at = 0;
+  segs.forEach((seg, i) => {
+    const part = shape(seg.face, seg.text, size, tracking);
+    for (const g of part.glyphs) {
+      const placed = { ...g, x: g.x + x, cluster: (g.cluster ?? 0) + at };
+      glyphs.push(seg.face === face ? placed : { ...placed, face: seg.face });
+    }
+    x += part.width + (i < segs.length - 1 ? tracking : 0);
+    at += seg.text.length;
+  });
+  return { glyphs, width: x };
+}

package/src/type/glyphs.d.ts

@@ -0,0 +1,24 @@
+// Per-glyph control.
+import type { Shaped } from '../text.js';
+import type { Length, Color } from '../index.js';
+
+/** Per-glyph scale, shift, turn and colour (arrays cycle; counted across the block, spaces skipped). */
+export interface GlyphControl {
+  scale?: number | number[];
+  scaleX?: number | number[];
+  scaleY?: number | number[];
+  dx?: Length | Length[];
+  dy?: Length | Length[];
+  /** Degrees. */
+  rotate?: number | number[];
+  color?: Color | Color[];
+  /** Transforms about the glyph's middle (default) or its baseline. */
+  origin?: 'center' | 'baseline';
+  /** A scaled glyph takes its scaled width (default true). */
+  advance?: boolean;
+}
+
+/** Apply per-glyph control to a shaped line (`start`: the line's first glyph's index in the block). */
+export function controlGlyphs(run: Shaped, spec: GlyphControl | undefined, o: { start: number; size: number; capHeight: number; canvas: { width: number; height: number }; text: string }): { run: Shaped; count: number };
+/** How many glyphs a line counts (non-space characters). */
+export function glyphCount(text: string): number;

package/src/type/glyphs.js

@@ -0,0 +1,87 @@
+/**
+ * Per-glyph control: each letter its own scale, shift, turn and colour,
+ * from arrays (cycled), so bulging 70s type or a wave of letters is one
+ * text layer.
+ *
+ * `glyphs: { scale, scaleX, scaleY, dx, dy, rotate, color, origin, advance }`:
+ * numbers (or colours) per glyph, counted across the whole block and
+ * skipping spaces; `origin` is `'center'` (the default: the glyph's middle
+ * at half the cap height) or `'baseline'`; `advance` (default true) lets a
+ * scaled glyph take its scaled width, pushing its neighbours along.
+ *
+ * @module type/glyphs
+ */
+
+import { len } from '../geometry.js';
+import { toHex } from '../color.js';
+
+/** @param {any} list @param {number} i @param {any} fallback @returns {any} The i-th of a cycled list (or a single value). */
+const at = (list, i, fallback) => (list == null ? fallback : Array.isArray(list) ? (list.length ? list[i % list.length] : fallback) : list);
+
+/**
+ * Apply per-glyph control to a shaped line: advances widened for scaled
+ * glyphs, and each glyph's transform (`t`, about its pen position) and
+ * paint key (`paint`, a colour).
+ *
+ * @param {import('../text.js').Shaped} run
+ * @param {any} spec - The layer's `glyphs`.
+ * @param {{ start: number, size: number, capHeight: number, canvas: { width: number, height: number }, text: string }} o - `start`: index of the line's first glyph in the block.
+ * @returns {{ run: import('../text.js').Shaped, count: number }} The run, and how many glyphs it counted.
+ */
+export function controlGlyphs(run, spec, o) {
+  if (!spec) return { run, count: 0 };
+  const glyphs = run.glyphs.map((g) => ({ ...g }));
+  const blanks = blankGlyphs(run, o.text);
+  let shift = 0;
+  let n = 0;
+  for (let i = 0; i < glyphs.length; i++) {
+    const g = glyphs[i];
+    const adv = (i + 1 < run.glyphs.length ? run.glyphs[i + 1].x : run.width) - run.glyphs[i].x;
+    g.x += shift;
+    if (blanks.has(i)) continue;
+    const k = o.start + n++;
+    const s = at(spec.scale, k, 1);
+    const sx = at(spec.scaleX, k, 1) * s;
+    const sy = at(spec.scaleY, k, 1) * s;
+    const rot = (at(spec.rotate, k, 0) * Math.PI) / 180;
+    const dx = len(at(spec.dx, k, 0), o.canvas);
+    const dy = len(at(spec.dy, k, 0), o.canvas);
+    const color = at(spec.color, k, undefined);
+    const grow = spec.advance === false ? 0 : adv * (sx - 1);
+    // About the glyph's centre (at half the cap height), or its baseline.
+    const ox = (adv * (spec.advance === false ? 1 : sx)) / 2;
+    const oy = spec.origin === 'baseline' ? 0 : -o.capHeight / 2;
+    const cos = Math.cos(rot);
+    const sin = Math.sin(rot);
+    const a = cos * sx;
+    const b = sin * sx;
+    const c = -sin * sy;
+    const d = cos * sy;
+    // Glyph-local point p maps to origin + R·S·(p − origin/scaled) + shift.
+    const px0 = adv / 2;
+    g.t = [a, b, c, d, ox - (a * px0 + c * oy) + dx, oy - (b * px0 + d * oy) + dy];
+    if (color != null) g.paint = toHex(color);
+    shift += grow;
+  }
+  return { run: { glyphs, width: run.width + shift }, count: n };
+}
+
+/**
+ * Glyph indices that are spaces (by cluster), so they don't take a slot.
+ *
+ * @param {import('../text.js').Shaped} run
+ * @param {string} text
+ * @returns {Set<number>}
+ */
+function blankGlyphs(run, text) {
+  const chars = Array.from(text);
+  const out = new Set();
+  run.glyphs.forEach((g, i) => {
+    const ch = /** @type {any} */ (g).cluster != null ? text[/** @type {any} */ (g).cluster] : chars[i];
+    if (ch != null && /\s/.test(ch)) out.add(i);
+  });
+  return out;
+}
+
+/** How many glyphs a line counts (non-space characters). @param {string} text @returns {number} */
+export const glyphCount = (text) => Array.from(text).filter((ch) => !/\s/.test(ch)).length;

package/src/type/index.d.ts

@@ -0,0 +1,5 @@
+// Poster typesetting.
+export { typeset, wantsType, TYPE_OPTIONS } from './typeset.js';
+export { faceFor, mappedPath, setLine } from './line.js';
+export { textPathD, pathSampler } from './path.js';
+export type { TextPath } from './path.js';

package/src/type/index.js

@@ -0,0 +1,10 @@
+/**
+ * Poster typesetting: what the `text` layer does with its 1.1 options, and
+ * the line-setting the poster layers (tables, barcodes) share.
+ *
+ * @module type
+ */
+
+export { typeset, wantsType, TYPE_OPTIONS } from './typeset.js';
+export { faceFor, mappedPath, setLine } from './line.js';
+export { textPathD, pathSampler } from './path.js';

package/src/type/kern.d.ts

@@ -0,0 +1,4 @@
+// Pair kerning from a TrueType font.
+
+/** A pair's X advance adjustment, font units (GPOS pair adjustment, else `kern`). */
+export function pairKerning(v: DataView, tables: Record<string, number>): (a: number, b: number) => number;