@arraypress/covers 1.0.0 → 1.1.0

package/src/effects/transform.js

@@ -0,0 +1,127 @@
+/**
+ * A layer's `transform` option as an SVG transform.
+ *
+ * @module effects/transform
+ */
+
+import { num } from '../svg.js';
+import { pos } from '../layers/util.js';
+
+/**
+ * A layer's `transform` as an SVG transform string.
+ *
+ * Object form: `translate` (`[x, y]` or `{ x, y }`, lengths), `rotate`
+ * (degrees), `scale` (a number or `[sx, sy]`), `skewX`, `skewY`, `mirror`
+ * (`'x'` flips left–right, `'y'` top–bottom), all about `origin` (`[x, y]`
+ * px or `'center'`, the default). A string is used as written.
+ *
+ * @param {any} t
+ * @param {{ width: number, height: number }} canvas
+ * @returns {string | undefined}
+ */
+export function transformAttr(t, canvas) {
+  if (!t) return undefined;
+  if (typeof t === 'string') return t;
+  const parts = [];
+  const tr = Array.isArray(t.translate) ? { x: t.translate[0], y: t.translate[1] } : t.translate;
+  if (tr) parts.push(`translate(${num(pos(tr.x ?? 0, 'x', canvas))} ${num(pos(tr.y ?? 0, 'y', canvas))})`);
+  const o = t.origin === undefined || t.origin === 'center'
+    ? [canvas.width / 2, canvas.height / 2]
+    : Array.isArray(t.origin) ? [pos(t.origin[0], 'x', canvas), pos(t.origin[1], 'y', canvas)] : [pos(t.origin.x, 'x', canvas), pos(t.origin.y, 'y', canvas)];
+  const inner = [];
+  if (t.rotate) inner.push(`rotate(${num(t.rotate, 3)})`);
+  let [sx, sy] = t.scale == null ? [1, 1] : Array.isArray(t.scale) ? t.scale : [t.scale, t.scale];
+  if (t.mirror === 'x' || t.mirror === 'both') sx = -sx;
+  if (t.mirror === 'y' || t.mirror === 'both') sy = -sy;
+  if (sx !== 1 || sy !== 1) inner.push(`scale(${num(sx, 4)} ${num(sy, 4)})`);
+  if (t.skewX) inner.push(`skewX(${num(t.skewX, 3)})`);
+  if (t.skewY) inner.push(`skewY(${num(t.skewY, 3)})`);
+  if (inner.length) parts.push(`translate(${num(o[0])} ${num(o[1])}) ${inner.join(' ')} translate(${num(-o[0])} ${num(-o[1])})`);
+  return parts.length ? parts.join(' ') : undefined;
+}
+
+/** @typedef {[number, number, number, number, number, number]} Affine - `[a, b, c, d, e, f]`, as SVG's `matrix()`. */
+
+/** @param {Affine} m @param {Affine} n @returns {Affine} `m × n`. */
+const multiply = (m, n) => [
+  m[0] * n[0] + m[2] * n[1], m[1] * n[0] + m[3] * n[1],
+  m[0] * n[2] + m[2] * n[3], m[1] * n[2] + m[3] * n[3],
+  m[0] * n[4] + m[2] * n[5] + m[4], m[1] * n[4] + m[3] * n[5] + m[5],
+];
+
+/** @param {string} name @param {number[]} v @returns {Affine} One SVG transform function as a matrix. */
+function fn(name, v) {
+  const r = ((v[0] ?? 0) * Math.PI) / 180;
+  switch (name) {
+    case 'translate': return [1, 0, 0, 1, v[0] ?? 0, v[1] ?? 0];
+    case 'scale': return [v[0] ?? 1, 0, 0, v[1] ?? v[0] ?? 1, 0, 0];
+    case 'rotate': {
+      const m = /** @type {Affine} */ ([Math.cos(r), Math.sin(r), -Math.sin(r), Math.cos(r), 0, 0]);
+      if (v.length < 3) return m;
+      return multiply(multiply([1, 0, 0, 1, v[1], v[2]], m), [1, 0, 0, 1, -v[1], -v[2]]);
+    }
+    case 'skewX': return [1, 0, Math.tan(r), 1, 0, 0];
+    case 'skewY': return [1, Math.tan(r), 0, 1, 0, 0];
+    case 'matrix': return /** @type {Affine} */ (v.slice(0, 6));
+    default: return [1, 0, 0, 1, 0, 0];
+  }
+}
+
+/**
+ * A transform (an SVG transform string, or the object form) as one matrix.
+ *
+ * @param {any} t
+ * @param {{ width: number, height: number }} canvas
+ * @returns {Affine}
+ */
+export function transformMatrix(t, canvas) {
+  const s = transformAttr(t, canvas);
+  /** @type {Affine} */
+  let m = [1, 0, 0, 1, 0, 0];
+  if (!s) return m;
+  for (const [, name, args] of s.matchAll(/(\w+)\s*\(([^)]*)\)/g)) m = multiply(m, fn(name, args.split(/[\s,]+/).filter(Boolean).map(Number)));
+  return m;
+}
+
+/**
+ * How much a matrix enlarges what it draws: its smallest and largest
+ * stretch (singular values), and their geometric mean.
+ *
+ * @param {Affine} m
+ * @returns {{ min: number, max: number, mean: number }}
+ */
+export function stretchOf(m) {
+  const [a, b, c, d] = m;
+  const sum = a * a + b * b + c * c + d * d;
+  const det = Math.abs(a * d - b * c);
+  const root = Math.sqrt(Math.max(0, sum * sum - 4 * det * det));
+  return { min: Math.sqrt((sum - root) / 2), max: Math.sqrt((sum + root) / 2), mean: Math.sqrt(det) };
+}
+
+/**
+ * The inverse of an affine matrix.
+ *
+ * @param {Affine} m
+ * @returns {Affine}
+ */
+export function invert(m) {
+  const [a, b, c, d, e, f] = m;
+  const det = a * d - b * c || 1e-12;
+  return [d / det, -b / det, -c / det, a / det, (c * f - d * e) / det, (b * e - a * f) / det];
+}
+
+/**
+ * A point through an affine matrix.
+ *
+ * @param {Affine} m @param {number} x @param {number} y
+ * @returns {[number, number]}
+ */
+export function apply(m, x, y) {
+  return [m[0] * x + m[2] * y + m[4], m[1] * x + m[3] * y + m[5]];
+}
+
+/** The identity matrix. @type {Affine} */
+export const IDENTITY = Object.freeze(/** @type {Affine} */ ([1, 0, 0, 1, 0, 0]));
+
+/** @param {Affine} m @param {Affine} n @returns {Affine} `m` then `n` (n applied first, in m's space). */
+export const compose = (m, n) => multiply(m, n);

package/src/effects/util.d.ts

@@ -0,0 +1,16 @@
+// Helpers for writing filter primitives.
+
+/** Rec. 709 luma weights. */
+export const LUMA: [number, number, number];
+/** A colour as 0–1 channels. */
+export function rgb(c: string): [number, number, number];
+/** A colour-matrix value list from 20 numbers. */
+export function mat(m: number[]): string;
+/** A matrix flooding RGB with a colour, alpha from a 5-number row (default the source alpha). */
+export function flood(color: string, alpha?: number[]): string;
+/** The effect's `seed`, else a seeded one. */
+export function seedOf(ctx: { rng: { int: (a: number, b: number) => number } }, fx: { seed?: number }): number;
+/** A `<filter>` over the canvas, padded by `pad` (a fraction) on each side, in user space. */
+export function filterElement(id: string, ctx: { width: number; height: number }, pad: number, body: string, colorSpace?: 'sRGB' | 'linearRGB', region?: { x: number; y: number; width: number; height: number }): string;
+/** Turbulence fed to a displacement map. */
+export function displace(frequency: number | number[], octaves: number, seed: number, scale: number, result?: string): string;

package/src/effects/util.js

@@ -0,0 +1,85 @@
+/**
+ * Helpers for writing filter primitives.
+ *
+ * @module effects/util
+ */
+
+import { attrs, num } from '../svg.js';
+import { toHex } from '../color.js';
+
+/** Rec. 709 luma weights. */
+export const LUMA = [0.2126, 0.7152, 0.0722];
+
+/**
+ * A colour as 0–1 channels.
+ *
+ * @param {string} c
+ * @returns {[number, number, number]}
+ */
+export function rgb(c) {
+  const h = toHex(c);
+  return /** @type {[number, number, number]} */ ([1, 3, 5].map((i) => parseInt(h.slice(i, i + 2), 16) / 255));
+}
+
+/**
+ * A colour-matrix value list.
+ *
+ * @param {number[]} m - 20 numbers.
+ * @returns {string}
+ */
+export const mat = (m) => m.map((x) => num(x, 4)).join(' ');
+
+/**
+ * A matrix that floods RGB with a colour and takes alpha from `alpha` (a
+ * 5-number row; default the source alpha).
+ *
+ * @param {string} color
+ * @param {number[]} [alpha]
+ * @returns {string}
+ */
+export function flood(color, alpha = [0, 0, 0, 1, 0]) {
+  const [r, g, b] = rgb(color);
+  return mat([0, 0, 0, 0, r, 0, 0, 0, 0, g, 0, 0, 0, 0, b, ...alpha]);
+}
+
+/**
+ * A layer's seeded turbulence seed (or the effect's own `seed`).
+ *
+ * @param {{ rng: { int: (a: number, b: number) => number } }} ctx
+ * @param {{ seed?: number }} fx
+ * @returns {number}
+ */
+export const seedOf = (ctx, fx) => fx.seed ?? ctx.rng.int(1, 9999);
+
+/**
+ * A `<filter>` over the canvas, padded, in user space.
+ *
+ * @param {string} id
+ * @param {{ width: number, height: number }} ctx
+ * @param {number} pad - Fraction of the canvas on each side.
+ * @param {string} body - Primitives.
+ * @param {'sRGB' | 'linearRGB'} [colorSpace='sRGB'] - Where the primitives do their arithmetic.
+ * @param {{ x: number, y: number, width: number, height: number }} [region] - A smaller region (the content's box plus padding).
+ * @returns {string}
+ */
+export function filterElement(id, ctx, pad, body, colorSpace = 'sRGB', region) {
+  const px = ctx.width * pad;
+  const py = ctx.height * pad;
+  if (colorSpace !== 'sRGB' && colorSpace !== 'linearRGB') throw new TypeError(`Unknown colorSpace "${colorSpace}" (sRGB, linearRGB)`);
+  const r = region ?? { x: -px, y: -py, width: ctx.width + 2 * px, height: ctx.height + 2 * py };
+  return `<filter${attrs({ id, filterUnits: 'userSpaceOnUse', primitiveUnits: 'userSpaceOnUse', ...r, 'color-interpolation-filters': colorSpace })}>${body}</filter>`;
+}
+
+/**
+ * Noise turned into displacement: the shared start of rough, warp and wear.
+ *
+ * @param {number | number[]} frequency
+ * @param {number} octaves
+ * @param {number} seed
+ * @param {number} scale - Displacement, px.
+ * @param {string} [result]
+ * @returns {string}
+ */
+export function displace(frequency, octaves, seed, scale, result) {
+  return `<feTurbulence type="fractalNoise" baseFrequency="${[].concat(/** @type {any} */ (frequency)).map((f) => num(f, 4)).join(' ')}" numOctaves="${octaves}" seed="${seed}" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale="${num(scale)}" xChannelSelector="R" yChannelSelector="G"${result ? ` result="${result}"` : ''}/>`;
+}

package/src/extract.js

@@ -4,7 +4,7 @@
  * @module extract
  */
 
-import { readFile } from 'node:fs/promises';
+import { loadBytes } from './platform/index.js';
 import { toOklch, fromOklch, toHex } from './color.js';
 import { createRng } from './rng.js';
 
@@ -35,11 +35,12 @@ export function extractPalette(src, options = {}) {
   const job = (async () => {
     let sharp;
     try {
-      sharp = (await import('sharp')).default;
+      const name = 'sharp';
+      sharp = (await import(/* @vite-ignore */ name)).default;
     } catch {
       throw new Error('Extracting a palette from a photo needs sharp: npm install sharp');
     }
-    const bytes = typeof src === 'string' ? await readFile(src) : src;
+    const bytes = await loadBytes(src, 'image');
     const { data } = await sharp(bytes).rotate().resize(64, 64, { fit: 'cover' }).removeAlpha().raw().toBuffer({ resolveWithObject: true });
     /** @type {[number, number, number][]} */
     const pts = [];

package/src/fonts.d.ts

@@ -0,0 +1,55 @@
+// Fonts: loading, decoding and picking a face.
+import type { FontSource } from './index.js';
+import type { HarfBuzzModule } from './platform/harfbuzz.js';
+
+/** A shaped glyph, font units. */
+export interface RunGlyph {
+  gid: number;
+  cluster: number;
+  xAdvance: number;
+  xOffset: number;
+  yOffset: number;
+}
+
+/** A loaded face, ready to shape with (HarfBuzz, or the JavaScript reader in Workers). */
+export interface LoadedFont {
+  name: string;
+  weight: number;
+  style: string;
+  /** The harfbuzzjs Font, or the JavaScript face. */
+  font: object;
+  upem: number;
+  ascender: number;
+  descender: number;
+  capHeight: number;
+  /** Parsed outline commands by glyph id. */
+  paths: Map<number, (string | number)[]>;
+  /** Shape one line. */
+  shapeRun: (text: string) => RunGlyph[];
+  /** A glyph's outline, font units, y up. */
+  glyphToPath: (gid: number) => string;
+  axes: Record<string, { min: number; default: number; max: number }>;
+  variations: Record<string, number>;
+  source: FontSource;
+}
+
+/** HarfBuzz, or undefined where it can't run (Workers) or is switched off. */
+export function harfbuzz(): Promise<HarfBuzzModule | undefined>;
+/** The bundled Inter faces (bytes from disk in Node, else loaded on first use). */
+export function bundledFonts(): FontSource[];
+/** A cover's fonts, then the registered ones, then Inter. */
+export function fontPool(own: FontSource[]): FontSource[];
+/** Register a font for every cover. */
+export function registerFont(font: FontSource): void;
+/** A font source's bytes. */
+export function fontBytes(source: FontSource): Promise<Uint8Array>;
+/** WOFF or sfnt bytes as sfnt, synchronously (Node). */
+export function decodeFont(input: Uint8Array | ArrayBuffer): Uint8Array;
+/** WOFF or sfnt bytes as sfnt, on any platform. */
+export function decodeFontAsync(input: Uint8Array | ArrayBuffer): Promise<Uint8Array>;
+/** Load a face, optionally at a variation (`{ wght: 650, wdth: 80 }`). */
+export function loadFont(source: FontSource, variations?: Record<string, number>): Promise<LoadedFont>;
+/** The closest face for a family, weight and style (a variable range matches inside it). */
+export function pickFont(sources: FontSource[], family: string, weight: number, style?: string): FontSource;
+/** A layer's variation settings (`wght` follows the weight on a variable font). */
+export function variationsFor(source: FontSource, weight: number, axes: Record<string, number> | undefined): Record<string, number> | undefined;