@arraypress/covers 1.0.0 → 1.1.0

package/src/type/typeset.js

@@ -0,0 +1,352 @@
+/**
+ * Typesetting for posters and flyers: what the `text` layer does when it's
+ * given any of the 1.1 options (the 1.0 path is untouched, so 1.0 covers
+ * render byte-identically).
+ *
+ * - **Baseline placement**: `x`, `y` put the first baseline where SVG
+ *   `<text x y>` would, with `align` acting as `text-anchor`.
+ * - **Justified to a width**: `width` sets each line to exactly that width,
+ *   like `textLength` (`lengthAdjust: 'spacingAndGlyphs'` scales the glyphs,
+ *   the default; `'spacing'` opens the letter-spacing instead).
+ * - **Fitting**: `fit: 'width'` sizes the block so its widest line fills
+ *   `width` (or `maxWidth`); `fit: 'lines'` sizes every line on its own to
+ *   fill it (the stacked full-width headline); `fit: 'shrink'` shrinks to
+ *   `minSize` before wrapping further.
+ * - **Stretch and slant**: `stretch: [sx, sy]` about the first baseline.
+ * - **Variable fonts**: `axes: { wdth: 50, SOFT: 100, WONK: 1 }`.
+ * - **Strokes**: `stroke`, `strokeWidth`, `fill: 'none'` (outline type), or
+ *   `strokes: [{ color, width }]`, drawn widest first under the fill, for
+ *   keylines.
+ * - **Text on a path**: `path` (`circle`, `arc`, `ellipse`, `wave`, or any
+ *   `d`), `startOffset`, `fitPath` to fill a ring, `dy`.
+ * - **Auto contrast**: `color: 'auto'` picks white or near-black (or your
+ *   `autoColors`) by contrast against whatever is drawn underneath.
+ * - **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.
+ * - **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.
+ * - **Pixel type**: `font: 'pixel'`, a built-in 5×7 face.
+ * - **Layout from data**: `fit: 'words'` (a word a line), `fit: 'wrap'`
+ *   (wrap, then fill the width), `split: 'words'`, and the block's box for
+ *   later layers as `{layout.<id>.bottom}` and the like.
+ *
+ * @module type/typeset
+ */
+
+import { attrs, esc, num } from '../svg.js';
+import { len, place, anchorAlign, unit } from '../geometry.js';
+import { toHex } from '../color.js';
+import { layout, caseText } from '../text.js';
+import { paint } from '../effects/paint.js';
+import { pos, wrap } from '../layers/util.js';
+import { presetStrokes } from '../effects/paint-presets.js';
+import { extrude } from '../effects/extrude.js';
+import { dashArray } from '../layers/shape.js';
+import { faceFor, mappedPath, setLine } from './line.js';
+import { textPathD, pathSampler } from './path.js';
+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 { recordLayout } from './layout-ref.js';
+
+/** Options that switch the text layer onto this typesetter. */
+export const TYPE_OPTIONS = ['x', 'y', 'width', 'justify', 'lengthAdjust', 'fit', 'stretch', 'axes', 'stroke', 'strokeWidth', 'strokes', 'fill', 'path', 'startOffset', 'fitPath', 'dy', 'render', 'autoColors', 'lines', 'spans', 'glyphs', 'fallback', 'split', 'dash', 'extrude', 'maxHeight', 'autoThreshold'];
+
+/**
+ * Whether a text layer needs this typesetter.
+ *
+ * @param {any} layer
+ * @returns {boolean}
+ */
+export function wantsType(layer) {
+  return TYPE_OPTIONS.some((k) => layer[k] !== undefined) || layer.color === 'auto' || Array.isArray(layer.content) || layer.font === 'pixel';
+}
+
+/**
+ * A line to set: its text, size, and (with `spans`) its runs.
+ *
+ * @typedef {{ text: string, size: number, spans?: import('./spans.js').Span[] }} Line
+ */
+
+/**
+ * The `text` layer with 1.1 options.
+ *
+ * @param {any} layer
+ * @param {import('../layers.js').RenderContext} ctx
+ * @returns {Promise<import('../layers.js').Markup>}
+ */
+export async function typeset(layer, ctx) {
+  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);
+  if (!layer.spans && (layer.split === 'words' || layer.fit === 'words')) content = content.split(/\s+/).filter(Boolean).join('\n');
+  const p = ctx.palette;
+  const u = unit(ctx.canvas);
+  const face = await faceFor(ctx, layer);
+  const fallbacks = await fallbackFaces(ctx, layer);
+  let size = len(layer.size, ctx.canvas, u * 0.06);
+  const ls = layer.letterSpacing ?? -0.02;
+  const lh = layer.lineHeight ?? 1.12;
+  const baseline = layer.x != null || layer.y != null;
+  const anchor = layer.anchor ?? 'bottom-left';
+  const align = layer.align ?? (baseline ? 'left' : anchorAlign(anchor));
+  const margin = len(layer.margin, ctx.canvas, /** @type {any} */ (ctx).inset ?? u * 0.07);
+  const target = layer.width != null ? len(layer.width, ctx.canvas) : undefined;
+  const maxWidth = layer.maxWidth != null ? len(layer.maxWidth, ctx.canvas) : baseline ? Infinity : ctx.width - 2 * margin;
+  const justifyTo = target ?? (layer.justify ? maxWidth : undefined);
+  const adjust = layer.lengthAdjust ?? 'spacingAndGlyphs';
+  const id = ctx.id;
+  const spans = layer.spans ? await loadSpans(layer, ctx, size) : undefined;
+  if (spans) content = spans.map((s) => s.text).join('');
+  if (!content.trim()) return { defs: '', body: '' };
+  let defs = '';
+
+  /** Shape a line at a tracking (px), through fallback, spans and per-glyph control. @type {(l: Line, tracking: number, start: number) => import('../text.js').Shaped} */
+  const shapeLine = (l, tracking, start) => {
+    const run = l.spans ? shapeSpans(l.spans, l.size, tracking - ls * l.size, face, fallbacks) : shapeText(face, l.text, l.size, tracking, fallbacks);
+    return controlGlyphs(run, layer.glyphs, { start, size: l.size, capHeight: (face.capHeight / face.upem) * l.size, canvas: ctx.canvas, text: l.text }).run;
+  };
+  /** @param {Line} l @returns {number} */
+  const natural = (l) => shapeLine(l, ls * l.size, 0).width;
+
+  // ---- Lines and sizes ----
+  /** @type {Line[]} */
+  let lines;
+  if (layer.path) {
+    lines = [{ text: content.replace(/\n/g, ' '), size, spans: spans ? spanLines(spans, size, Infinity, fallbacks).flat() : undefined }];
+  } else if (spans) {
+    const fitting = layer.fit === 'width' || layer.fit === 'lines' || layer.fit === 'words';
+    const rows = spanLines(spans, size, fitting ? Infinity : layer.fit === 'wrap' ? justifyTo ?? maxWidth : maxWidth, fallbacks);
+    lines = rows.map((r) => ({ text: spanText(r), size, spans: r }));
+    lines = fitLines(lines, layer.fit, justifyTo ?? maxWidth, natural);
+  } else if (layer.fit === 'width' || layer.fit === 'lines' || layer.fit === 'words') {
+    lines = fitLines(content.split('\n').map((t) => ({ text: t, size })), layer.fit, justifyTo ?? maxWidth, natural);
+  } else {
+    const fitTo = justifyTo ?? maxWidth;
+    const set = layout({
+      face,
+      text: content,
+      size,
+      minSize: layer.minSize != null ? len(layer.minSize, ctx.canvas) : layer.fit === 'shrink' ? size * 0.5 : undefined,
+      letterSpacing: ls,
+      // Only `fit: 'wrap'` wraps at the justification width; otherwise `width` justifies what `maxWidth` wrapped.
+      maxWidth: layer.fit === 'wrap' ? fitTo : maxWidth,
+      maxLines: layer.maxLines ?? (baseline || layer.fit === 'wrap' ? Infinity : 3),
+      ellipsis: layer.ellipsis,
+      balance: layer.balance ?? !baseline,
+    });
+    size = set.size;
+    lines = set.lines.map((l) => ({ text: l.text, size }));
+    // Wrap, then fill: every line at one size, the widest filling the width.
+    if (layer.fit === 'wrap') lines = fitLines(lines, 'width', fitTo, natural);
+  }
+  // A block taller than `maxHeight` shrinks to it.
+  if (layer.maxHeight != null && !layer.path) {
+    const cap = face.capHeight / face.upem;
+    const tall = lines[0].size * cap + lines.slice(1).reduce((h, l) => h + l.size * lh, 0);
+    const k = len(layer.maxHeight, ctx.canvas) / tall;
+    if (k < 1) lines = lines.map((l) => ({ ...l, size: l.size * k }));
+  }
+
+  // ---- Paint ----
+  const strokes = layer.strokes ?? (layer.stroke ? [{ color: layer.stroke, width: layer.strokeWidth ?? '0.3vmin', dash: layer.dash }] : presetStrokes(layer.fill) ?? []);
+  const live = (layer.render ?? /** @type {any} */ (ctx).textRender) === 'live';
+
+  // ---- Text on a path ----
+  if (layer.path) {
+    const d = textPathD(layer.path, ctx.canvas);
+    const sampler = pathSampler(d);
+    const line = lines[0];
+    let run = shapeLine(line, ls * size, 0);
+    if (layer.fitPath) {
+      const gaps = Math.max(1, run.glyphs.length);
+      const gap = len(layer.fitPath === true ? 0 : layer.fitPath, ctx.canvas);
+      run = shapeLine(line, ls * size + (sampler.length - gap - run.width) / gaps, 0);
+    }
+    const so = layer.startOffset ?? (layer.fitPath ? 0 : 0.5);
+    const offset = typeof so === 'number' && so <= 1 && so >= 0 ? so * sampler.length : pos(so, 'x', ctx.canvas);
+    const start = layer.fitPath ? offset : align === 'center' || layer.align == null ? offset - run.width / 2 : align === 'right' ? offset - run.width : offset;
+    const dy = len(layer.dy, ctx.canvas, 0);
+    const adv = (/** @type {number} */ i) => (i + 1 < run.glyphs.length ? run.glyphs[i + 1].x : run.width) - run.glyphs[i].x;
+    const mids = run.glyphs.map((g, i) => g.x + adv(i) / 2);
+    const index = new Map(run.glyphs.map((g, i) => [g, i]));
+    const along = (/** @type {(g: any) => boolean} */ only) => mappedPath(face, run, size, (gx, gy, g) => {
+      const i = /** @type {number} */ (index.get(/** @type {any} */ (g)));
+      const at = sampler.at(start + mids[i]);
+      const a = gx - mids[i];
+      const across = gy + dy;
+      return [at.x + at.tx * a - at.ty * across, at.y + at.ty * a + at.tx * across];
+    }, only);
+    const whole = { x: 0, y: 0, width: ctx.width, height: ctx.height };
+    const fill = layer.fill === 'none' ? { defs: '', value: 'none' } : layer.color === 'auto' ? { defs: '', value: await autoColor(layer, ctx, whole) } : paint(layer.fill ?? layer.color, p.text, { id: `${id}f`, box: whole, canvas: ctx.canvas });
+    defs += fill.defs;
+    report(ctx, layer, content, size, face, null, { capHeight: (face.capHeight / face.upem) * size });
+    const drawn = drawBuckets(run, along, fill.value, strokes, ctx);
+    recordLayout(ctx, layer.id, whole, { x: 0, y: 0, baseline: 0, size, lines: 1 });
+    return { defs, body: wrap(layer, finish(drawn, layer, ctx)) };
+  }
+
+  // ---- Measure, then place ----
+  // `width` justifies every line, except under a fit that sizes the block to
+  // its widest line (`width`, `words`, `wrap`): there the widest fills the
+  // width and the others keep their natural width.
+  const widestOnly = justifyTo != null && (layer.fit === 'width' || layer.fit === 'words' || layer.fit === 'wrap');
+  const naturals = widestOnly ? lines.map(natural) : [];
+  const widest = widestOnly ? naturals.indexOf(Math.max(...naturals)) : -1;
+  const runs = lines.map((l, i) => {
+    const fill = justifyTo != null && (!widestOnly || i === widest);
+    const w = fill ? /** @type {number} */ (justifyTo) : widestOnly ? naturals[i] : natural(l);
+    return { ...l, w, fill, cap: (face.capHeight / face.upem) * l.size };
+  });
+  const lineStep = (/** @type {number} */ i) => runs[i].size * lh;
+  let x0;
+  let y0;
+  const blockW = Math.max(...runs.map((r) => r.w));
+  if (baseline) {
+    x0 = pos(layer.x ?? 0, 'x', ctx.canvas);
+    y0 = pos(layer.y ?? 0, 'y', ctx.canvas);
+  } else {
+    let h = runs[0].cap;
+    for (let i = 1; i < runs.length; i++) h += lineStep(i);
+    const at = place({ width: blockW, height: h, canvas: ctx.canvas, anchor, margin, position: layer.position, offset: layer.offset });
+    x0 = align === 'center' ? at.x + blockW / 2 : align === 'right' ? at.x + blockW : at.x;
+    y0 = at.y + runs[0].cap;
+  }
+  const baselines = [y0];
+  for (let i = 1; i < runs.length; i++) baselines.push(baselines[i - 1] + lineStep(i));
+  const top = y0 - runs[0].cap;
+  const left = align === 'center' ? x0 - blockW / 2 : align === 'right' ? x0 - blockW : x0;
+  const box = { x: left, y: top, width: blockW, height: baselines[baselines.length - 1] - top };
+  const [sx, sy] = layer.stretch ? (Array.isArray(layer.stretch) ? layer.stretch : [1, layer.stretch]) : [1, 1];
+  // The block as drawn (stretched about the first baseline), for lint, `color: 'auto'` and later layers.
+  const drawnBox = { x: Math.min(x0 + (box.x - x0) * sx, x0 + (box.x + box.width - x0) * sx), y: Math.min(y0 + (box.y - y0) * sy, y0 + (box.y + box.height - y0) * sy), width: box.width * Math.abs(sx), height: box.height * Math.abs(sy) };
+
+  const color = layer.color === 'auto' ? await autoColor(layer, ctx, drawnBox) : undefined;
+  const fillPaint = layer.fill === 'none' ? { defs: '', value: 'none' } : paint(color ?? layer.fill ?? layer.color, p.text, { id: `${id}f`, box, canvas: ctx.canvas });
+  defs += fillPaint.defs;
+  recordLayout(ctx, layer.id, drawnBox, { x: x0, y: y0, baseline: y0 + (baselines[baselines.length - 1] - y0) * sy, size: runs[0].size, lines: runs.length });
+
+  let body;
+  /** Narrowest horizontal scale a line was set at (justification squeezes glyphs). */
+  let squeeze = 1;
+  if (live) {
+    const ff = await fontFace(face, ctx);
+    if (ff.css) defs += `<style>${ff.css}</style>`;
+    const fv = Object.entries(face.variations ?? {}).filter(([t]) => t !== 'wght').map(([t, v]) => `'${t}' ${num(v, 2)}`).join(',');
+    const anchorAttr = align === 'center' ? 'middle' : align === 'right' ? 'end' : undefined;
+    const strokeAttrs = strokes.length ? { stroke: toHex(strokes[0].color), 'stroke-width': len(strokes[0].width, ctx.canvas), 'paint-order': 'stroke', 'stroke-linejoin': 'round' } : {};
+    body = runs.map((r, i) => `<text${attrs({
+      x: x0, y: baselines[i], 'font-family': ff.family, 'font-size': r.size,
+      'font-weight': layer.weight ?? 600, 'font-style': layer.style && layer.style !== 'normal' ? layer.style : undefined,
+      'letter-spacing': ls ? num(ls * r.size, 3) : undefined,
+      'text-anchor': anchorAttr,
+      textLength: r.fill ? justifyTo : undefined, lengthAdjust: r.fill ? adjust : undefined,
+      style: fv ? `font-variation-settings:${fv}` : undefined,
+      fill: fillPaint.value, ...strokeAttrs,
+    })}>${esc(r.text)}</text>`).join('');
+  } else {
+    // Each line once; then its glyphs drawn per paint (spans and per-glyph colours).
+    let start = 0;
+    const set = runs.map((r, i) => {
+      const first = start;
+      start += glyphCount(r.text);
+      const line = setLine({ face, text: r.text, size: r.size, tracking: ls * r.size, x: x0, y: baselines[i], align, width: r.fill ? justifyTo : undefined, adjust, shape: (t) => shapeLine(r, t, first), only: () => false });
+      squeeze = Math.min(squeeze, line.scaleX);
+      return { ...line, baseline: baselines[i], size: r.size };
+    });
+    const draw = (/** @type {(g: any) => boolean} */ only) => set.map((l) => mappedPath(face, l.run, l.size, (gx, gy) => [l.left + gx * l.scaleX, l.baseline + gy], only)).join('');
+    body = finish(drawBuckets({ glyphs: set.flatMap((l) => l.run.glyphs) }, draw, fillPaint.value, strokes, ctx), layer, ctx);
+  }
+  // Mirrored (negative) stretch is still that tall.
+  report(ctx, layer, content, runs[0].size * Math.abs(sy), face, drawnBox, {
+    capHeight: Math.min(...runs.map((r) => r.cap)) * Math.abs(sy),
+    squeeze: squeeze * Math.abs(sx),
+  });
+
+  if (layer.stretch) body = `<g transform="translate(${num(x0)} ${num(y0)}) scale(${num(sx, 4)} ${num(sy, 4)}) translate(${num(-x0)} ${num(-y0)})">${body}</g>`;
+  // Opacity and blend (renderWrapped has already taken them off a wrapped layer).
+  return { defs, body: wrap(layer, body) };
+}
+
+/**
+ * Lines sized to a width: `'width'` (one size, the widest line fills it),
+ * `'lines'` and `'words'`… `'lines'` sizes each line on its own; `'words'`
+ * (a word a line) is sized like `'width'`.
+ *
+ * @param {Line[]} lines @param {string} mode @param {number} fitTo
+ * @param {(l: Line) => number} natural - A line's width at its size.
+ * @returns {Line[]}
+ */
+function fitLines(lines, mode, fitTo, natural) {
+  if (mode !== 'width' && mode !== 'lines' && mode !== 'words') return lines;
+  if (!Number.isFinite(fitTo)) throw new TypeError('fit needs a width (width or maxWidth)');
+  const nat = lines.map(natural);
+  if (mode === 'lines') return lines.map((l, i) => ({ ...l, size: (l.size * fitTo) / Math.max(nat[i], 1e-6) }));
+  const k = fitTo / Math.max(...nat, 1e-6);
+  return lines.map((l) => ({ ...l, size: l.size * k }));
+}
+
+/**
+ * Draw glyphs by paint: strokes under everything (widest first), then the
+ * fill, then each colour bucket (spans, per-glyph colours) on its own path.
+ *
+ * @param {{ glyphs: any[] }} run - Every glyph drawn (for its paint keys).
+ * @param {(only: (g: any) => boolean) => string} draw - Path data for the glyphs a filter keeps.
+ * @param {string} fill
+ * @param {any[]} strokes
+ * @param {import('../layers.js').RenderContext} ctx
+ * @returns {string}
+ */
+function drawBuckets(run, draw, fill, strokes, ctx) {
+  const paints = [...new Set(run.glyphs.map((g) => g.paint).filter(Boolean))];
+  if (!paints.length) return drawPaths([draw(() => true)], fill, strokes, ctx);
+  let out = strokes.length ? drawPaths([draw(() => true)], 'none', strokes, ctx) : '';
+  const plain = draw((g) => !g.paint);
+  if (plain && fill !== 'none') out += `<path${attrs({ d: plain, fill })}/>`;
+  for (const c of paints) out += `<path${attrs({ d: draw((g) => g.paint === c), fill: c })}/>`;
+  return out;
+}
+
+/**
+ * The text's extrusion (`extrude: { depth, angle, color, to, steps }` or a depth).
+ *
+ * @param {string} body @param {any} layer @param {import('../layers.js').RenderContext} ctx
+ * @returns {string}
+ */
+function finish(body, layer, ctx) {
+  if (!layer.extrude) return body;
+  const fx = typeof layer.extrude === 'object' ? layer.extrude : { depth: layer.extrude };
+  const out = extrude({ kind: 'extrude', ...fx }, { defs: '', body }, ctx, `${ctx.id}t`);
+  return `<defs>${out.defs}</defs>${out.body}`;
+}
+
+/**
+ * Stroke copies widest first, then the fill.
+ *
+ * @param {string[]} ds @param {string} fill @param {any[]} strokes @param {import('../layers.js').RenderContext} ctx
+ * @returns {string}
+ */
+function drawPaths(ds, fill, strokes, ctx) {
+  const d = ds.join('');
+  const sorted = [...strokes].sort((a, b) => len(b.width, ctx.canvas) - len(a.width, ctx.canvas));
+  let out = sorted.map((s) => `<path${attrs({ d, fill: s.fill ? toHex(s.fill) : 'none', stroke: toHex(s.color), 'stroke-width': len(s.width, ctx.canvas), 'stroke-linejoin': 'round', 'stroke-linecap': 'round', 'stroke-dasharray': s.dash ? dashArray(s.dash, len(s.width, ctx.canvas), ctx) : undefined })}/>`).join('');
+  if (fill !== 'none' || !strokes.length) out += `<path${attrs({ d, fill })}/>`;
+  return out;
+}
+
+/**
+ * Note a text block for `lint`: the whole block as drawn (every line,
+ * stretched), its smallest capitals, how far justification squeezed it.
+ *
+ * @param {import('../layers.js').RenderContext} ctx @param {any} layer @param {string} content @param {number} size
+ * @param {import('../fonts.js').LoadedFont} face @param {{ x: number, y: number, width: number, height: number } | null} box
+ * @param {{ capHeight: number, squeeze?: number }} drawn
+ */
+function report(ctx, layer, content, size, face, box, drawn) {
+  /** @type {any} */ (ctx).report?.({ kind: 'text', id: layer.id, content, size, capHeight: drawn.capHeight, box, squeeze: drawn.squeeze ?? 1 });
+}

package/src/type/woff2.d.ts

@@ -0,0 +1,6 @@
+// WOFF2 to sfnt.
+
+/** A WOFF2 file's flavour, table directory and Brotli payload. */
+export function woff2Directory(buf: Uint8Array): { flavor: number; tables: { tag: string; origLength: number; length: number; transformed: boolean; data: Uint8Array }[]; payload: Uint8Array };
+/** WOFF2 bytes as sfnt, given its decompressed stream (glyf, loca and hmtx rebuilt). */
+export function woff2ToSfnt(buf: Uint8Array, stream: Uint8Array | undefined): Uint8Array;

package/src/type/woff2.js

@@ -0,0 +1,301 @@
+/**
+ * WOFF2 to a bare sfnt, in JavaScript: the Brotli stream decompressed (by
+ * the platform: Node's zlib, or a `DecompressionStream('brotli')`), then
+ * the transformed `glyf`, `loca` and `hmtx` tables rebuilt (W3C WOFF2 §5).
+ * Font collections aren't supported.
+ *
+ * @module type/woff2
+ */
+
+/** The 63 known table tags, by index (WOFF2 §5.1). */
+const KNOWN = ['cmap', 'head', 'hhea', 'hmtx', 'maxp', 'name', 'OS/2', 'post', 'cvt ', 'fpgm', 'glyf', 'loca', 'prep', 'CFF ', 'VORG', 'EBDT', 'EBLC', 'gasp', 'hdmx', 'kern', 'LTSH', 'PCLT', 'VDMX', 'vhea', 'vmtx', 'BASE', 'GDEF', 'GPOS', 'GSUB', 'EBSC', 'JSTF', 'MATH', 'CBDT', 'CBLC', 'COLR', 'CPAL', 'SVG ', 'sbix', 'acnt', 'avar', 'bdat', 'bloc', 'bsln', 'cvar', 'fdsc', 'feat', 'fmtx', 'fvar', 'gvar', 'hsty', 'just', 'lcar', 'mort', 'morx', 'opbd', 'prop', 'trak', 'Zapf', 'Silf', 'Glat', 'Gloc', 'Feat', 'Sill'];
+
+/** A cursor over bytes. */
+class Reader {
+  /** @param {Uint8Array} b @param {number} [at=0] */
+  constructor(b, at = 0) { this.b = b; this.v = new DataView(b.buffer, b.byteOffset, b.byteLength); this.at = at; }
+  u8() { return this.b[this.at++]; }
+  u16() { const x = this.v.getUint16(this.at); this.at += 2; return x; }
+  i16() { const x = this.v.getInt16(this.at); this.at += 2; return x; }
+  u32() { const x = this.v.getUint32(this.at); this.at += 4; return x; }
+  /** UIntBase128. */
+  base128() { let x = 0; for (let i = 0; i < 5; i++) { const c = this.u8(); x = x * 128 + (c & 0x7f); if (!(c & 0x80)) return x; } throw new TypeError('WOFF2: bad UIntBase128'); }
+  /** 255UInt16. */
+  u255() { const c = this.u8(); return c === 253 ? this.u16() : c === 255 ? this.u8() + 253 : c === 254 ? this.u8() + 506 : c; }
+  /** @param {number} n */
+  bytes(n) { const out = this.b.subarray(this.at, this.at + n); this.at += n; return out; }
+}
+
+/**
+ * A WOFF2 file's header and table directory, and where its Brotli stream is.
+ *
+ * @param {Uint8Array} buf
+ * @returns {{ flavor: number, tables: { tag: string, origLength: number, length: number, transformed: boolean, data: Uint8Array }[], payload: Uint8Array }}
+ * @throws {TypeError} On a collection or damaged data.
+ */
+export function woff2Directory(buf) {
+  try {
+    return directory(buf);
+  } catch (err) {
+    if (err instanceof RangeError) throw new TypeError('WOFF2: the font data is damaged or cut short');
+    throw err;
+  }
+}
+
+/** @param {Uint8Array} buf @returns {ReturnType<typeof woff2Directory>} */
+function directory(buf) {
+  const r = new Reader(buf);
+  if (r.u32() !== 0x774f4632) throw new TypeError('Not a WOFF2 font');
+  const flavor = r.u32();
+  if (flavor === 0x74746366) throw new TypeError('WOFF2 font collections are not supported');
+  r.u32();
+  const count = r.u16();
+  r.u16(); r.u32();
+  const compressedSize = r.u32();
+  r.at = 48;
+  const tables = [];
+  for (let i = 0; i < count; i++) {
+    const flags = r.u8();
+    const tag = (flags & 0x3f) === 63 ? String.fromCharCode(...r.bytes(4)) : KNOWN[flags & 0x3f];
+    const version = flags >> 6;
+    const origLength = r.base128();
+    const transformed = tag === 'glyf' || tag === 'loca' ? version === 0 : version !== 0;
+    const length = transformed ? r.base128() : origLength;
+    tables.push({ tag, origLength, length, transformed, data: /** @type {Uint8Array} */ (new Uint8Array(0)) });
+  }
+  return { flavor, tables, payload: buf.subarray(r.at, r.at + compressedSize) };
+}
+
+/**
+ * WOFF2 bytes as sfnt.
+ *
+ * @param {Uint8Array} buf - WOFF2 bytes.
+ * @param {Uint8Array | undefined} stream - The decompressed Brotli stream (see {@link woff2Directory}'s `payload`); undefined where nothing could decompress it.
+ * @returns {Uint8Array}
+ * @throws {TypeError} On a collection, damaged data, or no Brotli decoder.
+ */
+export function woff2ToSfnt(buf, stream) {
+  const { flavor, tables } = woff2Directory(buf);
+  if (!stream) throw new TypeError('WOFF2 needs Brotli, which this runtime lacks: convert the font to .ttf (scripts/woff2-to-ttf.mjs) or use render: "live"');
+  let at = 0;
+  for (const t of tables) { t.data = stream.subarray(at, at + t.length); at += t.length; }
+  const byTag = new Map(tables.map((t) => [t.tag, t]));
+  const glyf = byTag.get('glyf');
+  if (glyf?.transformed) {
+    const { glyf: g, loca, long } = rebuildGlyf(glyf.data);
+    glyf.data = g;
+    const l = byTag.get('loca');
+    if (l) l.data = loca;
+    // The rebuilt glyf outgrew short offsets: the head says long ones now.
+    const head = byTag.get('head');
+    if (long && head) {
+      head.data = new Uint8Array(head.data);
+      new DataView(head.data.buffer).setInt16(50, 1);
+    }
+  }
+  const hmtx = byTag.get('hmtx');
+  if (hmtx?.transformed) hmtx.data = rebuildHmtx(hmtx.data, byTag);
+  return assemble(flavor, tables);
+}
+
+/**
+ * The transformed `glyf` table back to `glyf` and `loca` (WOFF2 §5.1–5.3).
+ * Glyphs are written plainly (a word a delta), so the table can outgrow
+ * the font's short `loca` (offsets to 128 KB): then `loca` is long, and
+ * `long` says so (the `head` must agree).
+ *
+ * @param {Uint8Array} data
+ * @returns {{ glyf: Uint8Array, loca: Uint8Array, long: boolean }}
+ */
+function rebuildGlyf(data) {
+  const h = new Reader(data);
+  h.u16();
+  const options = h.u16();
+  const numGlyphs = h.u16();
+  const indexFormat = h.u16();
+  const sizes = Array.from({ length: 7 }, () => h.u32());
+  let at = h.at;
+  const streams = sizes.map((n) => { const s = new Reader(data.subarray(at, at + n)); at += n; return s; });
+  const [nContours, nPoints, flagStream, glyphStream, composite, bboxStream, instructions] = streams;
+  const bitmapLength = ((numGlyphs + 31) >> 5) << 2;
+  const bboxBitmap = bboxStream.bytes(bitmapLength);
+  void options;
+
+  /** @type {Uint8Array[]} */
+  const out = [];
+  const offsets = [0];
+  let total = 0;
+  for (let i = 0; i < numGlyphs; i++) {
+    const n = nContours.i16();
+    const explicit = (bboxBitmap[i >> 3] >> (7 - (i & 7))) & 1;
+    let glyph = new Uint8Array(0);
+    if (n === -1) {
+      // A composite: its component records, as they are; an explicit bbox.
+      const start = composite.at;
+      let more = true;
+      let hasInstructions = false;
+      while (more) {
+        const flags = composite.u16();
+        composite.u16();
+        composite.at += (flags & 0x0001 ? 4 : 2) + (flags & 0x0008 ? 2 : flags & 0x0040 ? 4 : flags & 0x0080 ? 8 : 0);
+        more = Boolean(flags & 0x0020);
+        if (flags & 0x0100) hasInstructions = true;
+      }
+      const records = composite.b.subarray(start, composite.at);
+      const bbox = [bboxStream.i16(), bboxStream.i16(), bboxStream.i16(), bboxStream.i16()];
+      const ilen = hasInstructions ? glyphStream.u255() : 0;
+      const ins = instructions.bytes(ilen);
+      glyph = new Uint8Array(10 + records.length + (hasInstructions ? 2 + ilen : 0));
+      const v = new DataView(glyph.buffer);
+      v.setInt16(0, -1);
+      bbox.forEach((x, k) => v.setInt16(2 + k * 2, x));
+      glyph.set(records, 10);
+      if (hasInstructions) { v.setUint16(10 + records.length, ilen); glyph.set(ins, 12 + records.length); }
+    } else if (n > 0) {
+      const ends = [];
+      let points = 0;
+      for (let c = 0; c < n; c++) { points += nPoints.u255(); ends.push(points - 1); }
+      const flags = flagStream.bytes(points);
+      const xs = new Int32Array(points);
+      const ys = new Int32Array(points);
+      const on = new Uint8Array(points);
+      let x = 0;
+      let y = 0;
+      for (let p = 0; p < points; p++) {
+        const [dx, dy] = triplet(flags[p] & 0x7f, glyphStream);
+        on[p] = flags[p] >> 7 ? 0 : 1;
+        x += dx; y += dy;
+        xs[p] = x; ys[p] = y;
+      }
+      const ilen = glyphStream.u255();
+      const ins = instructions.bytes(ilen);
+      const bbox = explicit ? [bboxStream.i16(), bboxStream.i16(), bboxStream.i16(), bboxStream.i16()] : [Math.min(...xs), Math.min(...ys), Math.max(...xs), Math.max(...ys)];
+      // Written plainly: a flag a point, every delta a word.
+      glyph = new Uint8Array(10 + 2 * n + 2 + ilen + points + 4 * points);
+      const v = new DataView(glyph.buffer);
+      v.setInt16(0, n);
+      bbox.forEach((b, k) => v.setInt16(2 + k * 2, b));
+      let o = 10;
+      for (const e of ends) { v.setUint16(o, e); o += 2; }
+      v.setUint16(o, ilen); o += 2;
+      glyph.set(ins, o); o += ilen;
+      for (let p = 0; p < points; p++) glyph[o++] = on[p];
+      for (let p = 0; p < points; p++) { v.setInt16(o, xs[p] - (p ? xs[p - 1] : 0)); o += 2; }
+      for (let p = 0; p < points; p++) { v.setInt16(o, ys[p] - (p ? ys[p - 1] : 0)); o += 2; }
+    }
+    const padded = (glyph.length + 3) & ~3;
+    const g = new Uint8Array(padded);
+    g.set(glyph);
+    out.push(g);
+    total += padded;
+    offsets.push(total);
+  }
+  const glyf = new Uint8Array(total);
+  let o = 0;
+  for (const g of out) { glyf.set(g, o); o += g.length; }
+  const long = Boolean(indexFormat) || total > 0x1fffe;
+  const loca = new Uint8Array((numGlyphs + 1) * (long ? 4 : 2));
+  const lv = new DataView(loca.buffer);
+  offsets.forEach((off, k) => (long ? lv.setUint32(k * 4, off) : lv.setUint16(k * 2, off / 2)));
+  return { glyf, loca, long: long && !indexFormat };
+}
+
+/**
+ * One point's delta from the glyph stream (WOFF2 §5.2 triplet encoding).
+ *
+ * @param {number} flag - 0–127.
+ * @param {Reader} s
+ * @returns {[number, number]}
+ */
+function triplet(flag, s) {
+  const sign = (/** @type {number} */ f, /** @type {number} */ v) => (f & 1 ? v : -v);
+  if (flag < 10) return [0, sign(flag, ((flag & 14) << 7) + s.u8())];
+  if (flag < 20) return [sign(flag, (((flag - 10) & 14) << 7) + s.u8()), 0];
+  if (flag < 84) {
+    const b0 = flag - 20;
+    const b1 = s.u8();
+    return [sign(flag, 1 + (b0 & 0x30) + (b1 >> 4)), sign(flag >> 1, 1 + ((b0 & 0x0c) << 2) + (b1 & 0x0f))];
+  }
+  if (flag < 120) {
+    const b0 = flag - 84;
+    const a = s.u8();
+    const b = s.u8();
+    return [sign(flag, 1 + (Math.floor(b0 / 12) << 8) + a), sign(flag >> 1, 1 + (((b0 % 12) >> 2) << 8) + b)];
+  }
+  if (flag < 124) {
+    const a = s.u8();
+    const b2 = s.u8();
+    const c = s.u8();
+    return [sign(flag, (a << 4) + (b2 >> 4)), sign(flag >> 1, ((b2 & 0x0f) << 8) + c)];
+  }
+  const a = s.u16();
+  const b = s.u16();
+  return [sign(flag, a), sign(flag >> 1, b)];
+}
+
+/**
+ * The transformed `hmtx` table back (WOFF2 §5.4): left side bearings from
+ * the glyphs' xMin where they were left out.
+ *
+ * @param {Uint8Array} data
+ * @param {Map<string, { data: Uint8Array }>} byTag
+ * @returns {Uint8Array}
+ */
+function rebuildHmtx(data, byTag) {
+  const r = new Reader(data);
+  const flags = r.u8();
+  const hhea = /** @type {any} */ (byTag.get('hhea')).data;
+  const maxp = /** @type {any} */ (byTag.get('maxp')).data;
+  const head = /** @type {any} */ (byTag.get('head')).data;
+  const metrics = new DataView(hhea.buffer, hhea.byteOffset).getUint16(34);
+  const numGlyphs = new DataView(maxp.buffer, maxp.byteOffset).getUint16(4);
+  const longLoca = new DataView(head.buffer, head.byteOffset).getInt16(50) === 1;
+  const glyf = /** @type {any} */ (byTag.get('glyf')).data;
+  const loca = /** @type {any} */ (byTag.get('loca')).data;
+  const lv = new DataView(loca.buffer, loca.byteOffset, loca.byteLength);
+  const gv = new DataView(glyf.buffer, glyf.byteOffset, glyf.byteLength);
+  const xMin = (/** @type {number} */ g) => {
+    const a = longLoca ? lv.getUint32(g * 4) : lv.getUint16(g * 2) * 2;
+    const b = longLoca ? lv.getUint32(g * 4 + 4) : lv.getUint16(g * 2 + 2) * 2;
+    return b > a ? gv.getInt16(a + 2) : 0;
+  };
+  const adv = Array.from({ length: metrics }, () => r.u16());
+  const lsb = Array.from({ length: numGlyphs }, (_, g) => (g < metrics ? (flags & 1 ? xMin(g) : r.i16()) : 0));
+  for (let g = metrics; g < numGlyphs; g++) lsb[g] = flags & 2 ? xMin(g) : r.i16();
+  const out = new Uint8Array(metrics * 4 + (numGlyphs - metrics) * 2);
+  const v = new DataView(out.buffer);
+  for (let g = 0; g < metrics; g++) { v.setUint16(g * 4, adv[g]); v.setInt16(g * 4 + 2, lsb[g]); }
+  for (let g = metrics; g < numGlyphs; g++) v.setInt16(metrics * 4 + (g - metrics) * 2, lsb[g]);
+  return out;
+}
+
+/**
+ * Tables into an sfnt file (sorted directory, checksums, 4-byte alignment).
+ *
+ * @param {number} flavor
+ * @param {{ tag: string, data: Uint8Array }[]} tables
+ * @returns {Uint8Array}
+ */
+function assemble(flavor, tables) {
+  const sorted = [...tables].sort((a, b) => (a.tag < b.tag ? -1 : a.tag > b.tag ? 1 : 0));
+  const n = sorted.length;
+  let pow = 1;
+  let log = 0;
+  while (pow * 2 <= n) { pow *= 2; log++; }
+  const header = 12 + 16 * n;
+  const total = sorted.reduce((s, t) => s + ((t.data.length + 3) & ~3), header);
+  const out = new Uint8Array(total);
+  const v = new DataView(out.buffer);
+  v.setUint32(0, flavor); v.setUint16(4, n); v.setUint16(6, pow * 16); v.setUint16(8, log); v.setUint16(10, n * 16 - pow * 16);
+  let at = header;
+  sorted.forEach((t, i) => {
+    out.set(t.data, at);
+    let sum = 0;
+    for (let k = 0; k < t.data.length; k += 4) sum = (sum + (((out[at + k] << 24) | (out[at + k + 1] << 16) | (out[at + k + 2] << 8) | out[at + k + 3]) >>> 0)) >>> 0;
+    const rec = 12 + i * 16;
+    for (let k = 0; k < 4; k++) out[rec + k] = t.tag.charCodeAt(k);
+    v.setUint32(rec + 4, sum); v.setUint32(rec + 8, at); v.setUint32(rec + 12, t.data.length);
+    at += (t.data.length + 3) & ~3;
+  });
+  return out;
+}

package/src/version.js

@@ -0,0 +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.1.0';