@arraypress/covers 1.0.0 → 1.3.1

package/src/type/line.js

@@ -0,0 +1,105 @@
+/**
+ * Setting one line of type: a face for a layer, glyph outlines through any
+ * affine map, and a line justified to a width (`textLength`).
+ *
+ * @module type/line
+ */
+
+import { num } from '@logomarks/image-effects/svg';
+import { loadFont, pickFont, variationsFor } from '../fonts.js';
+import { shape, outline } from '../text.js';
+import { pixelFace } from './pixel.js';
+
+/**
+ * A face for a layer's family, weight, style and axes (`'pixel'` is the
+ * built-in 5×7 face, unless a font of that name is registered).
+ *
+ * @param {import('../layers.js').RenderContext} ctx
+ * @param {{ font?: string, weight?: number, style?: string, axes?: Record<string, number> }} o
+ * @returns {Promise<import('../fonts.js').LoadedFont>}
+ */
+export async function faceFor(ctx, o) {
+  if (o.font === 'pixel' && !ctx.fonts.some((f) => f.name === 'pixel')) return pixelFace();
+  const weight = o.weight ?? 600;
+  const source = pickFont(ctx.fonts, o.font ?? 'Inter', weight, o.style);
+  return loadFont(source, variationsFor(source, weight, o.axes));
+}
+
+/**
+ * Glyph outlines of a shaped run, through an affine map: glyph point
+ * (gx, gy) in px (y down, baseline 0) goes to `map(gx, gy)`.
+ *
+ * @param {import('../fonts.js').LoadedFont} face
+ * @param {import('../text.js').Shaped} run
+ * @param {number} size
+ * @param {(gx: number, gy: number, glyph: { x: number, y: number }) => [number, number]} map
+ * @param {(glyph: any) => boolean} [only] - Draw only these glyphs (one paint at a time).
+ * @returns {string}
+ */
+export function mappedPath(face, run, size, map, only) {
+  const parts = [];
+  for (const g of run.glyphs) {
+    if (only && !only(g)) continue;
+    const f = g.face ?? face;
+    const s = (g.size ?? size) / f.upem;
+    const t = g.t;
+    let coords = [];
+    let even = true;
+    let px = 0;
+    for (const c of outline(f, g.gid)) {
+      if (typeof c === 'string') {
+        if (coords.length) parts.push(coords.join(' '));
+        parts.push(c);
+        coords = [];
+        even = true;
+      } else if (even) {
+        px = c;
+        even = false;
+      } else {
+        // A glyph's own transform (per-glyph scale, turn, shift) is about its pen position.
+        const gx = px * s;
+        const gy = -c * s;
+        const [X, Y] = t ? map(g.x + t[0] * gx + t[2] * gy + t[4], g.y + t[1] * gx + t[3] * gy + t[5], g) : map(g.x + gx, g.y + gy, g);
+        coords.push(num(X), num(Y));
+        even = true;
+      }
+    }
+    if (coords.length) parts.push(coords.join(' '));
+  }
+  return parts.join('');
+}
+
+/**
+ * Set one line: shape, justify and draw.
+ *
+ * @param {object} o
+ * @param {import('../fonts.js').LoadedFont} o.face
+ * @param {string} o.text
+ * @param {number} o.size
+ * @param {number} o.tracking - Letter-spacing, px.
+ * @param {number} o.x - Anchor x (start, middle or end by `align`).
+ * @param {number} o.y - Baseline.
+ * @param {'left' | 'center' | 'right'} o.align
+ * @param {number} [o.width] - Justify to this width.
+ * @param {'spacingAndGlyphs' | 'spacing'} [o.adjust]
+ * @param {(tracking: number) => import('../text.js').Shaped} [o.shape] - Shapes the line at a tracking (fallback faces, spans, per-glyph control); default the face alone.
+ * @param {(glyph: any) => boolean} [o.only] - Draw only these glyphs.
+ * @returns {{ d: string, width: number, left: number, run: import('../text.js').Shaped, scaleX: number }}
+ */
+export function setLine(o) {
+  const shapeAt = o.shape ?? ((/** @type {number} */ tracking) => shape(o.face, o.text, o.size, tracking));
+  let run = shapeAt(o.tracking);
+  let scaleX = 1;
+  if (o.width && run.width > 0) {
+    if (o.adjust === 'spacing') {
+      const gaps = Math.max(1, new Set(o.face.shapeRun(o.text).map((g) => g.cluster)).size - 1);
+      run = shapeAt(o.tracking + (o.width - run.width) / gaps);
+    } else {
+      scaleX = o.width / run.width;
+    }
+  }
+  const w = run.width * scaleX;
+  const left = o.align === 'center' ? o.x - w / 2 : o.align === 'right' ? o.x - w : o.x;
+  const d = mappedPath(o.face, run, o.size, (gx, gy) => [left + gx * scaleX, o.y + gy], o.only);
+  return { d, width: w, left, run, scaleX };
+}

package/src/type/live.d.ts

@@ -0,0 +1,6 @@
+// Live text: @font-face rules.
+import type { LoadedFont } from '../fonts.js';
+import type { RenderContext } from '../render/context.js';
+
+/** The face's `@font-face` rule (empty when this document has it already) and its family name. */
+export function fontFace(face: LoadedFont, ctx: RenderContext): Promise<{ family: string; css: string }>;

package/src/type/live.js

@@ -0,0 +1,39 @@
+/**
+ * Live text: the `@font-face` rule for a face, embedded (or linked by URL)
+ * once per document.
+ *
+ * @module type/live
+ */
+
+import { fontBytes } from '../fonts.js';
+import { toBase64 } from '../platform/index.js';
+
+/** Faces embedded in this document already (live text). @type {WeakMap<object, Set<string>>} */
+const embedded = new WeakMap();
+
+/**
+ * `@font-face` for a face, once per document.
+ *
+ * @param {import('../fonts.js').LoadedFont} face
+ * @param {import('../layers.js').RenderContext} ctx
+ * @returns {Promise<{ family: string, css: string }>}
+ */
+export async function fontFace(face, ctx) {
+  const src = face.source;
+  const family = `covers-${src.name}-${Array.isArray(src.weight) ? 'var' : src.weight ?? 400}-${src.style ?? 'normal'}`.replace(/[^\w-]/g, '_');
+  const doc = /** @type {any} */ (ctx).doc ?? ctx;
+  let seen = embedded.get(doc);
+  if (!seen) embedded.set(doc, (seen = new Set()));
+  if (seen.has(family)) return { family, css: '' };
+  seen.add(family);
+  let url;
+  if (src.data == null && typeof src.src === 'string' && !src.src.startsWith('covers:')) url = src.src;
+  else {
+    const bytes = await fontBytes(src);
+    const tag = new DataView(bytes.buffer, bytes.byteOffset, 4).getUint32(0);
+    const mime = tag === 0x774f4646 ? 'font/woff' : tag === 0x774f4632 ? 'font/woff2' : tag === 0x4f54544f ? 'font/otf' : 'font/ttf';
+    url = `data:${mime};base64,${toBase64(bytes)}`;
+  }
+  const weight = Array.isArray(src.weight) ? `${src.weight[0]} ${src.weight[1]}` : src.weight ?? 400;
+  return { family, css: `@font-face{font-family:"${family}";src:url("${url}");font-weight:${weight};font-style:${src.style ?? 'normal'}}` };
+}

package/src/type/name.d.ts

@@ -0,0 +1,4 @@
+// A font's family name.
+
+/** The typographic family (name ID 16), else the family (1), else ''. */
+export function familyName(v: DataView, bytes: Uint8Array, base: number | undefined): string;

package/src/type/name.js

@@ -0,0 +1,32 @@
+/**
+ * A font's family name from its `name` table.
+ *
+ * @module type/name
+ */
+
+/**
+ * The family name from the `name` table (typographic family, else family).
+ *
+ * @param {DataView} v @param {Uint8Array} bytes @param {number | undefined} base
+ * @returns {string}
+ */
+export function familyName(v, bytes, base) {
+  if (base == null) return '';
+  const count = v.getUint16(base + 2);
+  const strings = base + v.getUint16(base + 4);
+  /** @type {Record<number, string>} */
+  const found = {};
+  for (let i = 0; i < count; i++) {
+    const r = base + 6 + i * 12;
+    const pid = v.getUint16(r);
+    const id = v.getUint16(r + 6);
+    if ((id !== 1 && id !== 16) || found[id]) continue;
+    const len = v.getUint16(r + 8);
+    const off = strings + v.getUint16(r + 10);
+    let s = '';
+    if (pid === 3 || pid === 0) for (let k = 0; k < len; k += 2) s += String.fromCharCode(v.getUint16(off + k));
+    else for (let k = 0; k < len; k++) s += String.fromCharCode(bytes[off + k]);
+    found[id] = s;
+  }
+  return found[16] ?? found[1] ?? '';
+}

package/src/type/path.d.ts

@@ -0,0 +1,18 @@
+// Paths for text.
+import type { Length } from '../index.js';
+
+/** A path for text: an arc, circle, ellipse or wave, or any path data. */
+export type TextPath = string | { d: string } | {
+  kind?: 'circle' | 'arc' | 'ellipse' | 'wave';
+  cx?: Length | `${number}%`; cy?: Length | `${number}%`; r?: Length; rx?: Length; ry?: Length;
+  /** Degrees, 0 at 12 o'clock, clockwise. */
+  start?: number; end?: number;
+  direction?: 'cw' | 'ccw'; side?: 'outside' | 'inside';
+  x1?: Length; x2?: Length; y?: Length; amplitude?: Length; wavelength?: Length; phase?: number;
+};
+
+
+/** A text path as path data, px. */
+export function textPathD(p: TextPath, canvas: { width: number; height: number }): string;
+/** A sampler along path data: point and unit tangent at a distance (continuing straight past the ends). */
+export function pathSampler(d: string): { length: number; at: (s: number) => { x: number; y: number; tx: number; ty: number } };

package/src/type/path.js

@@ -0,0 +1,89 @@
+/**
+ * Paths for text: circles, arcs, ellipses and waves as path data, and a
+ * sampler that gives a point and tangent at any distance along a path.
+ *
+ * @module type/path
+ */
+
+import { num } from '@logomarks/image-effects/svg';
+import { len } from '@logomarks/image-effects/length';
+import { flattenPath } from '../flatten.js';
+import { pos } from '../layers/util.js';
+
+/**
+ * A text path as path data, in px.
+ *
+ * @param {any} p - `{ kind: 'circle' | 'arc' | 'ellipse' | 'wave', … }` or `{ d }`.
+ * @param {{ width: number, height: number }} canvas
+ * @returns {string}
+ */
+export function textPathD(p, canvas) {
+  const X = (/** @type {any} */ v, /** @type {any} */ f) => pos(v ?? f, 'x', canvas);
+  const Y = (/** @type {any} */ v, /** @type {any} */ f) => pos(v ?? f, 'y', canvas);
+  if (typeof p === 'string') return p;
+  if (p.d) return p.d;
+  const kind = p.kind ?? 'circle';
+  if (kind === 'circle' || kind === 'ellipse' || kind === 'arc') {
+    const cx = X(p.cx, '50%');
+    const cy = Y(p.cy, '50%');
+    const rx = len(p.rx ?? p.r, canvas, '30vmin');
+    const ry = len(p.ry ?? p.r, canvas, '30vmin');
+    // Angles: 0 is 12 o'clock, clockwise. A circle starts at its `start` and goes all the way round.
+    const ccw = p.direction === 'ccw' || p.side === 'inside';
+    const a0 = p.start ?? (kind === 'arc' ? -90 : 180);
+    const sweep = kind === 'arc' ? (p.end ?? 90) - a0 : 360;
+    const n = Math.max(24, Math.ceil(Math.abs(sweep) / 2));
+    const pts = [];
+    for (let i = 0; i <= n; i++) {
+      const a = ((a0 + (ccw ? -1 : 1) * Math.abs(sweep) * (i / n)) * Math.PI) / 180;
+      pts.push(`${i ? 'L' : 'M'}${num(cx + rx * Math.sin(a), 3)} ${num(cy - ry * Math.cos(a), 3)}`);
+    }
+    return pts.join('');
+  }
+  if (kind === 'wave') {
+    const x1 = X(p.x1, 0);
+    const x2 = X(p.x2, '100%');
+    const y = Y(p.y, '50%');
+    const amp = len(p.amplitude, canvas, '2vmin');
+    const wl = len(p.wavelength, canvas, '40vmin');
+    const ph = p.phase ?? 0;
+    const pts = [];
+    for (let x = x1, i = 0; x <= x2 + 0.01; x += 2, i++) pts.push(`${i ? 'L' : 'M'}${num(x, 3)} ${num(y + Math.sin(((x - x1) / wl) * Math.PI * 2 + ph) * amp, 3)}`);
+    return pts.join('');
+  }
+  throw new TypeError(`Unknown text path kind "${kind}" (circle, arc, ellipse, wave, or { d })`);
+}
+
+/**
+ * A sampler along path data: point and tangent at a distance.
+ *
+ * @param {string} d
+ * @returns {{ length: number, at: (s: number) => { x: number, y: number, tx: number, ty: number } }}
+ */
+export function pathSampler(d) {
+  const subs = flattenPath(d, 1);
+  const pts = subs.flatMap((s) => s.points);
+  if (pts.length < 2) throw new TypeError('A text path needs at least two points');
+  const cum = [0];
+  for (let i = 1; i < pts.length; i++) cum.push(cum[i - 1] + Math.hypot(pts[i][0] - pts[i - 1][0], pts[i][1] - pts[i - 1][1]));
+  const length = cum[cum.length - 1];
+  return {
+    length,
+    at(s) {
+      const t = Math.max(0, Math.min(length, s));
+      let lo = 0;
+      let hi = cum.length - 1;
+      while (hi - lo > 1) { const mid = (lo + hi) >> 1; if (cum[mid] <= t) lo = mid; else hi = mid; }
+      const seg = cum[hi] - cum[lo] || 1;
+      const f = (t - cum[lo]) / seg;
+      const [ax, ay] = pts[lo];
+      const [bx, by] = pts[hi];
+      const dl = Math.hypot(bx - ax, by - ay) || 1;
+      // Beyond the ends, keep going along the end tangent.
+      const over = s - t;
+      const tx = (bx - ax) / dl;
+      const ty = (by - ay) / dl;
+      return { x: ax + (bx - ax) * f + tx * over, y: ay + (by - ay) * f + ty * over, tx, ty };
+    },
+  };
+}

package/src/type/pixel.d.ts

@@ -0,0 +1,7 @@
+// The built-in 5×7 pixel face.
+import type { LoadedFont } from '../fonts.js';
+
+/** The pixel face (`font: 'pixel'`): A–Z, 0–9 and basic punctuation, as merged cell paths. */
+export function pixelFace(): LoadedFont;
+/** The characters it draws (lowercase is drawn as capitals). */
+export const PIXEL_CHARS: string;

package/src/type/pixel.js

@@ -0,0 +1,85 @@
+/**
+ * A built-in 5×7 pixel face (`font: 'pixel'`): A–Z, 0–9 and basic
+ * punctuation, each glyph a set of square cells merged into row runs. It
+ * is a face like any other (layout, fitting, justification, text on a
+ * path, per-glyph control all work), drawn as paths. The bitmaps are
+ * image-effects' pixel font (its `ascii` effect draws with them).
+ *
+ * Metrics, in a 1000-unit em: a cell is 100 units, capitals are 7 cells
+ * (700), the advance is 6 cells (a cell's gap after each glyph), a space
+ * is 4 cells. Lowercase is drawn as capitals.
+ *
+ * @module type/pixel
+ */
+
+import { PIXEL_GLYPHS as BITMAPS } from '@logomarks/image-effects/pixel-font';
+
+/** Cell size, font units. */
+const CELL = 100;
+
+/** Glyph id per character (1-based; 0 is missing), and back. */
+const CHARS = Object.keys(BITMAPS);
+const GID = new Map(CHARS.map((c, i) => [c, i + 1]));
+const SPACE = CHARS.length + 1;
+
+/**
+ * A bitmap's cells as path data, row runs merged: font units, y up,
+ * baseline 0.
+ *
+ * @param {string} bits - 35 cells, row by row from the top.
+ * @returns {string}
+ */
+function cellsPath(bits) {
+  let d = '';
+  for (let row = 0; row < 7; row++) {
+    const top = (7 - row) * CELL;
+    for (let col = 0; col < 5; col++) {
+      if (bits[row * 5 + col] !== '#') continue;
+      let end = col;
+      while (end + 1 < 5 && bits[row * 5 + end + 1] === '#') end++;
+      const x0 = col * CELL;
+      const x1 = (end + 1) * CELL;
+      d += `M${x0},${top}L${x1},${top}L${x1},${top - CELL}L${x0},${top - CELL}Z`;
+      col = end;
+    }
+  }
+  return d;
+}
+
+/** @type {Map<number, string>} */
+const PATHS = new Map(CHARS.map((c, i) => [i + 1, cellsPath(BITMAPS[c])]));
+
+/** @type {any} */
+let face;
+
+/**
+ * The pixel face, shaped and outlined in JavaScript (no font file).
+ *
+ * @returns {import('../fonts.js').LoadedFont}
+ */
+export function pixelFace() {
+  face ??= {
+    name: 'pixel',
+    weight: 400,
+    style: 'normal',
+    font: null,
+    upem: 1000,
+    ascender: 800,
+    descender: -200,
+    capHeight: 7 * CELL,
+    paths: new Map(),
+    axes: {},
+    variations: {},
+    source: { name: 'pixel', src: 'covers:pixel', weight: 400 },
+    glyphToPath: (/** @type {number} */ gid) => PATHS.get(gid) ?? '',
+    shapeRun: (/** @type {string} */ text) => Array.from(text).map((ch, i) => {
+      const c = BITMAPS[ch] ? ch : ch.toUpperCase();
+      const gid = ch === ' ' ? SPACE : GID.get(c) ?? 0;
+      return { gid, cluster: i, xAdvance: ch === ' ' ? 4 * CELL : 6 * CELL, xOffset: 0, yOffset: 0 };
+    }),
+  };
+  return face;
+}
+
+/** Characters the pixel face draws. */
+export const PIXEL_CHARS = Object.freeze(CHARS.join(''));

package/src/type/sfnt.d.ts

@@ -0,0 +1,20 @@
+// A small TrueType reader.
+
+/** A parsed TrueType face. */
+export interface JsFace {
+  kind: 'js';
+  upem: number;
+  ascender: number;
+  descender: number;
+  capHeight: number;
+  /** A glyph's outline, font units, y up. */
+  glyphToPath: (gid: number) => string;
+  /** Glyphs with kerned advances, font units. */
+  shape: (text: string) => { gid: number; cluster: number; advance: number }[];
+  /** Variation axes (fvar). */
+  axes: Record<string, { min: number; default: number; max: number }>;
+  family: string;
+}
+
+/** Parse a TrueType font (sfnt bytes; not CFF). */
+export function parseSfnt(bytes: Uint8Array): JsFace;

package/src/type/sfnt.js

@@ -0,0 +1,258 @@
+/**
+ * A small TrueType reader in plain JavaScript: character map, advances,
+ * pair kerning (GPOS pair adjustment, incl. extension lookups, and the old
+ * `kern` table) and glyph outlines (`glyf`, simple and composite).
+ *
+ * It's the outliner where HarfBuzz can't run (a Cloudflare Worker forbids
+ * compiling WebAssembly at runtime, which harfbuzzjs needs), and what
+ * live-text mode measures with. It doesn't do ligatures, complex scripts,
+ * CFF (`OTTO`) outlines or variation deltas (a variable font draws its
+ * default instance); HarfBuzz does all of those where it's available.
+ *
+ * @module type/sfnt
+ */
+
+import { pairKerning } from './kern.js';
+import { familyName } from './name.js';
+
+/**
+ * @typedef {object} JsFace
+ * @property {'js'} kind
+ * @property {number} upem
+ * @property {number} ascender
+ * @property {number} descender
+ * @property {number} capHeight
+ * @property {(gid: number) => string} glyphToPath - Outline in font units, y up.
+ * @property {(text: string) => { gid: number, cluster: number, advance: number }[]} shape - Glyphs with kerned advances, font units.
+ * @property {Record<string, { min: number, default: number, max: number }>} axes - Variation axes (fvar), if any.
+ * @property {string} family - The font's family name (name ID 1/16), if found.
+ */
+
+/**
+ * Parse a TrueType font.
+ *
+ * @param {Uint8Array} bytes - sfnt bytes (decoded from WOFF already).
+ * @returns {JsFace}
+ * @throws {TypeError} On a CFF font or one without the tables it needs.
+ */
+export function parseSfnt(bytes) {
+  const v = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+  const tag = v.getUint32(0);
+  if (tag === 0x4f54544f) throw new TypeError('This font has CFF outlines (OTTO), which the JavaScript outliner can\'t draw: use a TrueType (glyf) font here, or HarfBuzz');
+  /** @type {Record<string, number>} */
+  const tables = {};
+  const n = v.getUint16(4);
+  for (let i = 0; i < n; i++) {
+    const o = 12 + i * 16;
+    tables[String.fromCharCode(bytes[o], bytes[o + 1], bytes[o + 2], bytes[o + 3])] = v.getUint32(o + 8);
+  }
+  for (const t of ['head', 'hhea', 'hmtx', 'maxp', 'cmap', 'loca', 'glyf']) if (tables[t] == null) throw new TypeError(`Font has no ${t} table`);
+  const u16 = (/** @type {number} */ o) => v.getUint16(o);
+  const i16 = (/** @type {number} */ o) => v.getInt16(o);
+  const u32 = (/** @type {number} */ o) => v.getUint32(o);
+
+  const upem = u16(tables.head + 18);
+  const longLoca = i16(tables.head + 50) === 1;
+  const ascender = i16(tables.hhea + 4);
+  const descender = i16(tables.hhea + 6);
+  const numH = u16(tables.hhea + 34);
+  const numGlyphs = u16(tables.maxp + 4);
+  let capHeight = 0;
+  if (tables['OS/2'] != null && u16(tables['OS/2']) >= 2) capHeight = i16(tables['OS/2'] + 88);
+
+  const advance = (/** @type {number} */ g) => u16(tables.hmtx + 4 * Math.min(g, numH - 1));
+
+  // cmap: prefer a full-repertoire (format 12) subtable, else BMP (format 4).
+  /** @type {(cp: number) => number} */
+  let cmap = () => 0;
+  {
+    const base = tables.cmap;
+    const count = u16(base + 2);
+    let best = -1;
+    let bestRank = -1;
+    for (let i = 0; i < count; i++) {
+      const pid = u16(base + 4 + i * 8);
+      const eid = u16(base + 6 + i * 8);
+      const off = base + u32(base + 8 + i * 8);
+      const fmt = u16(off);
+      const rank = fmt === 12 && (pid === 3 || pid === 0) ? 3 : fmt === 4 && ((pid === 3 && (eid === 1 || eid === 10)) || pid === 0) ? 2 : -1;
+      if (rank > bestRank) { bestRank = rank; best = off; }
+    }
+    if (best >= 0 && u16(best) === 4) {
+      const segX2 = u16(best + 6);
+      const ends = best + 14;
+      const starts = ends + segX2 + 2;
+      const deltas = starts + segX2;
+      const ranges = deltas + segX2;
+      cmap = (cp) => {
+        if (cp > 0xffff) return 0;
+        for (let s = 0; s < segX2; s += 2) {
+          if (cp > u16(ends + s)) continue;
+          const start = u16(starts + s);
+          if (cp < start) return 0;
+          const ro = u16(ranges + s);
+          if (!ro) return (cp + i16(deltas + s)) & 0xffff;
+          const g = u16(ranges + s + ro + (cp - start) * 2);
+          return g ? (g + i16(deltas + s)) & 0xffff : 0;
+        }
+        return 0;
+      };
+    } else if (best >= 0) {
+      const groups = u32(best + 12);
+      cmap = (cp) => {
+        let lo = 0;
+        let hi = groups - 1;
+        while (lo <= hi) {
+          const mid = (lo + hi) >> 1;
+          const g = best + 16 + mid * 12;
+          if (cp < u32(g)) hi = mid - 1;
+          else if (cp > u32(g + 4)) lo = mid + 1;
+          else return u32(g + 8) + (cp - u32(g));
+        }
+        return 0;
+      };
+    }
+  }
+
+  const kern = pairKerning(v, tables);
+
+  /** @param {number} g @returns {[number, number]} */
+  const locaRange = (g) => (longLoca
+    ? [u32(tables.loca + g * 4), u32(tables.loca + g * 4 + 4)]
+    : [u16(tables.loca + g * 2) * 2, u16(tables.loca + g * 2 + 2) * 2]);
+
+  /**
+   * A glyph's contours as points `[x, y, onCurve]`, composites resolved.
+   *
+   * @param {number} g
+   * @param {number} depth
+   * @returns {[number, number, boolean][][]}
+   */
+  const contours = (g, depth = 0) => {
+    if (g >= numGlyphs || depth > 8) return [];
+    const [start, end] = locaRange(g);
+    if (end <= start) return [];
+    const o = tables.glyf + start;
+    const nc = i16(o);
+    if (nc >= 0) {
+      const endPts = [];
+      for (let i = 0; i < nc; i++) endPts.push(u16(o + 10 + i * 2));
+      const count = nc ? endPts[nc - 1] + 1 : 0;
+      let p = o + 10 + nc * 2;
+      p += 2 + u16(p);
+      const flags = [];
+      while (flags.length < count) {
+        const f = bytes[p++];
+        flags.push(f);
+        if (f & 8) { let r = bytes[p++]; while (r--) flags.push(f); }
+      }
+      const xs = [];
+      let x = 0;
+      for (const f of flags) {
+        if (f & 2) { const d = bytes[p++]; x += f & 16 ? d : -d; } else if (!(f & 16)) { x += i16(p); p += 2; }
+        xs.push(x);
+      }
+      const ys = [];
+      let y = 0;
+      for (const f of flags) {
+        if (f & 4) { const d = bytes[p++]; y += f & 32 ? d : -d; } else if (!(f & 32)) { y += i16(p); p += 2; }
+        ys.push(y);
+      }
+      const out = [];
+      let s = 0;
+      for (const e of endPts) {
+        const c = [];
+        for (let i = s; i <= e; i++) c.push(/** @type {[number, number, boolean]} */ ([xs[i], ys[i], Boolean(flags[i] & 1)]));
+        out.push(c);
+        s = e + 1;
+      }
+      return out;
+    }
+    // Composite.
+    const out = [];
+    let p = o + 10;
+    for (;;) {
+      const f = u16(p);
+      const gi = u16(p + 2);
+      p += 4;
+      let dx;
+      let dy;
+      if (f & 1) { dx = f & 2 ? i16(p) : 0; dy = f & 2 ? i16(p + 2) : 0; p += 4; } else { dx = f & 2 ? v.getInt8(p) : 0; dy = f & 2 ? v.getInt8(p + 1) : 0; p += 2; }
+      let a = 1; let b = 0; let c = 0; let d = 1;
+      const f2 = (/** @type {number} */ q) => i16(q) / 16384;
+      if (f & 8) { a = d = f2(p); p += 2; } else if (f & 0x40) { a = f2(p); d = f2(p + 2); p += 4; } else if (f & 0x80) { a = f2(p); b = f2(p + 2); c = f2(p + 4); d = f2(p + 6); p += 8; }
+      for (const contour of contours(gi, depth + 1)) {
+        out.push(contour.map(([px, py, on]) => /** @type {[number, number, boolean]} */ ([px * a + py * c + dx, px * b + py * d + dy, on])));
+      }
+      if (!(f & 0x20)) break;
+    }
+    return out;
+  };
+
+  /** @type {Map<number, string>} */
+  const paths = new Map();
+  /** @param {number} g @returns {string} */
+  const glyphToPath = (g) => {
+    let d = paths.get(g);
+    if (d !== undefined) return d;
+    d = '';
+    for (const pts of contours(g)) {
+      if (!pts.length) continue;
+      // Start on an on-curve point (or the midpoint of two off-curve ones).
+      let first = pts.findIndex((q) => q[2]);
+      /** @type {[number, number]} */
+      let start;
+      if (first < 0) { start = [(pts[0][0] + pts[1 % pts.length][0]) / 2, (pts[0][1] + pts[1 % pts.length][1]) / 2]; first = 0; } else start = [pts[first][0], pts[first][1]];
+      d += `M${start[0]},${start[1]}`;
+      const n = pts.length;
+      /** @type {[number, number] | null} */
+      let ctrl = null;
+      for (let k = 1; k <= n; k++) {
+        const q = pts[(first + k) % n];
+        if (q[2]) {
+          d += ctrl ? `Q${ctrl[0]},${ctrl[1]} ${q[0]},${q[1]}` : `L${q[0]},${q[1]}`;
+          ctrl = null;
+        } else {
+          if (ctrl) {
+            const mx = (ctrl[0] + q[0]) / 2;
+            const my = (ctrl[1] + q[1]) / 2;
+            d += `Q${ctrl[0]},${ctrl[1]} ${mx},${my}`;
+          }
+          ctrl = [q[0], q[1]];
+        }
+      }
+      if (ctrl) d += `Q${ctrl[0]},${ctrl[1]} ${start[0]},${start[1]}`;
+      d += 'Z';
+    }
+    paths.set(g, d);
+    return d;
+  };
+
+  /** @param {string} text */
+  const shape = (text) => {
+    const out = [];
+    let i = 0;
+    for (const ch of text) {
+      out.push({ gid: cmap(/** @type {number} */ (ch.codePointAt(0))), cluster: i, advance: 0 });
+      i += ch.length;
+    }
+    for (let k = 0; k < out.length; k++) out[k].advance = advance(out[k].gid) + (k + 1 < out.length ? kern(out[k].gid, out[k + 1].gid) : 0);
+    return out;
+  };
+
+  /** @type {Record<string, { min: number, default: number, max: number }>} */
+  const axes = {};
+  if (tables.fvar != null) {
+    const f = tables.fvar;
+    const off = u16(f + 4);
+    const count = u16(f + 8);
+    const size = u16(f + 10);
+    const fixed = (/** @type {number} */ q) => v.getInt32(q) / 65536;
+    for (let k = 0; k < count; k++) {
+      const a = f + off + k * size;
+      axes[String.fromCharCode(bytes[a], bytes[a + 1], bytes[a + 2], bytes[a + 3])] = { min: fixed(a + 4), default: fixed(a + 8), max: fixed(a + 12) };
+    }
+  }
+
+  return { kind: 'js', upem, ascender, descender, capHeight, glyphToPath, shape, axes, family: familyName(v, bytes, tables.name) };
+}