@arraypress/covers 1.1.0 → 1.3.1

package/src/type/live.js

@@ -6,7 +6,7 @@
  */
 
 import { fontBytes } from '../fonts.js';
-import { toBase64 } from '../platform/bytes.js';
+import { toBase64 } from '../platform/index.js';
 
 /** Faces embedded in this document already (live text). @type {WeakMap<object, Set<string>>} */
 const embedded = new WeakMap();

package/src/type/path.js

@@ -5,8 +5,8 @@
  * @module type/path
  */
 
-import { num } from '../svg.js';
-import { len } from '../geometry.js';
+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';
 

package/src/type/pixel.d.ts

@@ -5,5 +5,3 @@ import type { LoadedFont } from '../fonts.js';
 export function pixelFace(): LoadedFont;
 /** The characters it draws (lowercase is drawn as capitals). */
 export const PIXEL_CHARS: string;
-/** A glyph's 5×7 bitmap (35 cells row by row, `#` inked), or undefined. */
-export function pixelBitmap(ch: string): string | undefined;

package/src/type/pixel.js

@@ -2,7 +2,8 @@
  * 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.
+ * 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
@@ -11,30 +12,7 @@
  * @module type/pixel
  */
 
-/** Glyph bitmaps, 5 wide × 7 tall, `#` inked. */
-const BITMAPS = /** @type {Record<string, string>} */ ({
-  A: '.###.#...##...#######...##...##...#', B: '####.#...##...#####.#...##...#####.', C: '.###.#...##....#....#....#...#.###.',
-  D: '####.#...##...##...##...##...#####.', E: '######....#....####.#....#....#####', F: '######....#....####.#....#....#....',
-  G: '.###.#...##....#.####...##...#.####', H: '#...##...##...#######...##...##...#', I: '.###...#....#....#....#....#...###.',
-  J: '..###...#....#....#....#.#..#..##..', K: '#...##..#.#.#..##...#.#..#..#.#...#', L: '#....#....#....#....#....#....#####',
-  M: '#...###.###.#.##.#.##...##...##...#', N: '#...##...###..##.#.##..###...##...#', O: '.###.#...##...##...##...##...#.###.',
-  P: '####.#...##...#####.#....#....#....', Q: '.###.#...##...##...##.#.##..#..##.#', R: '####.#...##...#####.#.#..#..#.#...#',
-  S: '.#####....#.....###.....#....#####.', T: '#####..#....#....#....#....#....#..', U: '#...##...##...##...##...##...#.###.',
-  V: '#...##...##...##...##...#.#.#...#..', W: '#...##...##...##.#.##.#.##.#.#.#.#.', X: '#...##...#.#.#...#...#.#.#...##...#',
-  Y: '#...##...#.#.#...#....#....#....#..', Z: '#####....#...#...#...#...#....#####', '0': '.###.#...##..###.#.###..##...#.###.',
-  '1': '..#...##....#....#....#....#...###.', '2': '.###.#...#....#...#...#...#...#####', '3': '#####...#...#.....#.....##...#.###.',
-  '4': '...#...##..#.#.#..#.#####...#....#.', '5': '######....####.....#....##...#.###.', '6': '..##..#...#....####.#...##...#.###.',
-  '7': '#####....#...#...#...#....#....#...', '8': '.###.#...##...#.###.#...##...#.###.', '9': '.###.#...##...#.####....#...#..##..',
-  '.': '..........................##...##..', ',': '.....................##....#...#...', '!': '..#....#....#....#....#.........#..',
-  '?': '.###.#...#....#...#...#.........#..', '-': '................###................', ':': '......##...##........##...##.......',
-  ';': '......##...##........##....#...#...', "'": '..#....#...#.......................', '"': '.#.#..#.#..#.#.....................',
-  '/': '.........#...#...#...#...#.........', '&': '.##..#..#.#.#...#...#.#.##..#..##.#', '+': '.......#....#..#####..#....#.......',
-  '=': '..........#####.....#####..........', '(': '...#...#...#....#....#.....#.....#.', ')': '.#.....#.....#....#....#...#...#...',
-  '#': '.#.#..#.#.#####.#.#.#####.#.#..#.#.', '@': '.###.#...##.####.#.##.####.....###.', '%': '##...##..#...#...#...#...#..##...##',
-  '*': '.......#..#.#.#.###.#.#.#..#.......', _: '..............................#####', '<': '...#...#...#...#.....#.....#.....#.',
-  '>': '.#.....#.....#.....#...#...#...#...', '[': '.###..#....#....#....#....#....###.', ']': '.###....#....#....#....#....#..###.',
-  '|': '..#....#....#....#....#....#....#..', '$': '..#...#####.#...###...#.#####...#..', '·': '.................#.................',
-});
+import { PIXEL_GLYPHS as BITMAPS } from '@logomarks/image-effects/pixel-font';
 
 /** Cell size, font units. */
 const CELL = 100;
@@ -105,11 +83,3 @@ export function pixelFace() {
 
 /** Characters the pixel face draws. */
 export const PIXEL_CHARS = Object.freeze(CHARS.join(''));
-
-/**
- * A glyph's 5×7 bitmap (35 cells row by row, `#` inked), or undefined.
- *
- * @param {string} ch
- * @returns {string | undefined}
- */
-export const pixelBitmap = (ch) => (Object.hasOwn(BITMAPS, ch.toUpperCase()) ? BITMAPS[ch.toUpperCase()] : undefined);

package/src/type/spans.js

@@ -10,8 +10,8 @@
  * @module type/spans
  */
 
-import { len } from '../geometry.js';
-import { toHex } from '../color.js';
+import { len } from '@logomarks/image-effects/length';
+import { toHex } from '@logomarks/image-effects/color';
 import { faceFor } from './line.js';
 import { shapeText } from './fallback.js';
 

package/src/type/typeset.js

@@ -36,14 +36,15 @@
  * @module type/typeset
  */
 
-import { attrs, esc, num } from '../svg.js';
-import { len, place, anchorAlign, unit } from '../geometry.js';
-import { toHex } from '../color.js';
+import { attrs, esc, num } from '@logomarks/image-effects/svg';
+import { len } from '@logomarks/image-effects/length';
+import { place, anchorAlign, unit } from '../geometry.js';
+import { toHex } from '@logomarks/image-effects/color';
 import { layout, caseText } from '../text.js';
-import { paint } from '../effects/paint.js';
+import { paint } from '../paint/index.js';
 import { pos, wrap } from '../layers/util.js';
-import { presetStrokes } from '../effects/paint-presets.js';
-import { extrude } from '../effects/extrude.js';
+import { presetStrokes } from '../paint/presets.js';
+import { extrude } from '@logomarks/image-effects/effects/extrude';
 import { dashArray } from '../layers/shape.js';
 import { faceFor, mappedPath, setLine } from './line.js';
 import { textPathD, pathSampler } from './path.js';
@@ -53,6 +54,7 @@ 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';
+import { marquee } from '../animate/marquee.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'];
@@ -170,7 +172,7 @@ export async function typeset(layer, ctx) {
     }
     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;
+    let 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);
@@ -185,8 +187,17 @@ export async function typeset(layer, ctx) {
     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;
+    // A marquee (motion): the still moves the start; playing, each glyph is drawn once in its own frame and placed by copies.
+    const running = /** @type {any} */ (ctx).marquee && marquee(/** @type {any} */ (ctx).marquee, {
+      run, mids, start, sampler, id,
+      glyph: (i) => drawBuckets({ glyphs: [run.glyphs[i]] }, (only) => mappedPath(face, run, size, (gx, gy) => [gx - mids[i], gy + dy], (g) => g === run.glyphs[i] && only(g)), fill.value, strokes, ctx),
+    });
+    if (running) {
+      start += running.shift;
+      defs += running.defs;
+    }
     report(ctx, layer, content, size, face, null, { capHeight: (face.capHeight / face.upem) * size });
-    const drawn = drawBuckets(run, along, fill.value, strokes, ctx);
+    const drawn = running?.body ?? 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)) };
   }

package/src/version.js

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

package/src/color.js

@@ -1,246 +0,0 @@
-/**
- * Colour parsing and the few colour-space moves palettes need.
- *
- * Everything inside the library is a lowercase `#rrggbb` string. Input can
- * be hex (3, 4, 6 or 8 digits), `rgb()`/`rgba()` or `hsl()`/`hsla()`; alpha
- * is dropped, since a cover's layers carry their own `opacity`.
- *
- * Mixing and contrast come from `@arraypress/color-utils`; this module adds
- * OKLCH, so derived palettes can rotate hue and set lightness perceptually
- * instead of in sRGB (where "the same lightness" means very different
- * things for yellow and blue).
- *
- * @module color
- */
-
-import { hexToRgb, rgbToHex, contrastRatio } from '@arraypress/color-utils';
-
-/**
- * Parse a CSS colour to `#rrggbb`.
- *
- * @param {string} input - `#abc`, `#aabbcc`, `#aabbccdd`, `rgb(…)`, `rgba(…)`, `hsl(…)` or `hsla(…)`.
- * @returns {string} Lowercase `#rrggbb`.
- * @throws {TypeError} When the string isn't a colour this function understands.
- *
- * @example
- * toHex('rgb(37 99 235)');   // '#2563eb'
- * toHex('#FA0');             // '#ffaa00'
- * toHex('hsl(220 80% 50%)'); // '#1a5ee6'
- */
-export function toHex(input) {
-  if (typeof input !== 'string') throw new TypeError(`Expected a colour string, got ${typeof input}`);
-  const s = input.trim().toLowerCase();
-
-  const hex = s.match(/^#?([0-9a-f]{3,8})$/);
-  if (hex && [3, 4, 6, 8].includes(hex[1].length)) {
-    let h = hex[1];
-    if (h.length <= 4) h = h.split('').map((c) => c + c).join('');
-    return '#' + h.slice(0, 6);
-  }
-
-  const fn = s.match(/^(rgba?|hsla?)\(([^)]*)\)$/);
-  if (fn) {
-    const parts = fn[2].split(/[\s,/]+/).filter(Boolean);
-    if (parts.length >= 3) {
-      if (fn[1].startsWith('rgb')) {
-        const [r, g, b] = parts.slice(0, 3).map((p) => (p.endsWith('%') ? parseFloat(p) * 2.55 : parseFloat(p)));
-        if ([r, g, b].every(Number.isFinite)) return rgbToHex(r, g, b);
-      } else {
-        const h = parseFloat(parts[0]);
-        const sat = parseFloat(parts[1]) / 100;
-        const l = parseFloat(parts[2]) / 100;
-        if ([h, sat, l].every(Number.isFinite)) return hslToHex(h, sat, l);
-      }
-    }
-  }
-  throw new TypeError(`Unrecognised colour: "${input}"`);
-}
-
-/**
- * HSL to `#rrggbb`.
- *
- * @param {number} h - Hue in degrees.
- * @param {number} s - Saturation, 0–1.
- * @param {number} l - Lightness, 0–1.
- * @returns {string} `#rrggbb`.
- */
-function hslToHex(h, s, l) {
-  const k = (n) => (n + h / 30) % 12;
-  const a = s * Math.min(l, 1 - l);
-  const f = (n) => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
-  return rgbToHex(f(0) * 255, f(8) * 255, f(4) * 255);
-}
-
-/** @param {number} c - sRGB channel 0–1. @returns {number} Linear channel. */
-const toLinear = (c) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
-/** @param {number} c - Linear channel. @returns {number} sRGB channel 0–1. */
-const toGamma = (c) => (c <= 0.0031308 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055);
-
-/**
- * `#rrggbb` to OKLCH.
- *
- * @param {string} color - Any colour {@link toHex} accepts.
- * @returns {{ l: number, c: number, h: number }} Lightness 0–1, chroma (~0–0.37), hue in degrees.
- *
- * @example
- * toOklch('#2563eb'); // { l: 0.546, c: 0.215, h: 262.9 }
- */
-export function toOklch(color) {
-  const { r, g, b } = hexToRgb(toHex(color));
-  const [lr, lg, lb] = [r, g, b].map((v) => toLinear(v / 255));
-  const l = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb);
-  const m = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb);
-  const s = Math.cbrt(0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb);
-  const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
-  const A = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
-  const B = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
-  const h = (Math.atan2(B, A) * 180) / Math.PI;
-  return { l: L, c: Math.hypot(A, B), h: h < 0 ? h + 360 : h };
-}
-
-/**
- * OKLCH to `#rrggbb`. Out-of-gamut colours are brought in by reducing
- * chroma (keeping lightness and hue), not by clipping channels, so a
- * derived colour keeps the hue it was asked for.
- *
- * @param {{ l: number, c: number, h: number }} lch - Lightness 0–1, chroma, hue in degrees.
- * @returns {string} `#rrggbb`.
- *
- * @example
- * fromOklch({ l: 0.7, c: 0.12, h: 30 }); // a soft coral
- */
-export function fromOklch({ l, c, h }) {
-  const L = Math.max(0, Math.min(1, l));
-  let chroma = Math.max(0, c);
-  for (let i = 0; i < 24; i++) {
-    const rgb = oklabToRgb(L, chroma * Math.cos((h * Math.PI) / 180), chroma * Math.sin((h * Math.PI) / 180));
-    if (rgb.every((v) => v >= -0.0005 && v <= 1.0005) || chroma < 0.001) {
-      return toRgbHex(rgb);
-    }
-    chroma *= 0.9;
-  }
-  return toRgbHex(oklabToRgb(L, 0, 0));
-}
-
-/**
- * Clamp 0–1 sRGB channels and write them as `#rrggbb`.
- *
- * @param {[number, number, number]} rgb
- * @returns {string}
- */
-function toRgbHex([r, g, b]) {
-  const c = (/** @type {number} */ v) => Math.max(0, Math.min(1, v)) * 255;
-  return rgbToHex(c(r), c(g), c(b));
-}
-
-/**
- * OKLab to gamma-encoded sRGB channels (0–1, possibly out of range).
- *
- * @param {number} L @param {number} A @param {number} B
- * @returns {[number, number, number]} sRGB channels.
- */
-function oklabToRgb(L, A, B) {
-  const l = (L + 0.3963377774 * A + 0.2158037573 * B) ** 3;
-  const m = (L - 0.1055613458 * A - 0.0638541728 * B) ** 3;
-  const s = (L - 0.0894841775 * A - 1.291485548 * B) ** 3;
-  return [
-    toGamma(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s),
-    toGamma(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s),
-    toGamma(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s),
-  ];
-}
-
-/**
- * Mix two colours in OKLab (perceptually even, no muddy midpoints).
- *
- * @param {string} a - First colour.
- * @param {string} b - Second colour.
- * @param {number} t - 0 gives `a`, 1 gives `b`.
- * @returns {string} `#rrggbb`.
- *
- * @example
- * mixOklab('#ffffff', '#2563eb', 0.1); // a pale blue tint
- */
-export function mixOklab(a, b, t) {
-  const p = toLab(a);
-  const q = toLab(b);
-  const rgb = oklabToRgb(p[0] + (q[0] - p[0]) * t, p[1] + (q[1] - p[1]) * t, p[2] + (q[2] - p[2]) * t);
-  return toRgbHex(rgb);
-}
-
-/** @param {string} color @returns {[number, number, number]} OKLab. */
-function toLab(color) {
-  const { l, c, h } = toOklch(color);
-  return [l, c * Math.cos((h * Math.PI) / 180), c * Math.sin((h * Math.PI) / 180)];
-}
-
-/**
- * Mix two colours in OKLCH: lightness and chroma linearly, hue the short
- * way round. Unlike OKLab, a mix of two far-apart hues stays vivid instead
- * of passing through grey (orange → blue goes by way of pink, not mud).
- *
- * @param {string} a - First colour.
- * @param {string} b - Second colour.
- * @param {number} t - 0 gives `a`, 1 gives `b`.
- * @returns {string} `#rrggbb`.
- *
- * @example
- * mixOklch('#c9502a', '#a9bdf2', 0.5); // a clear rose, not a muddy mauve
- */
-export function mixOklch(a, b, t) {
-  const p = toOklch(a);
-  const q = toOklch(b);
-  // A near-grey has no meaningful hue: take the other colour's.
-  const ph = p.c < 0.02 ? q.h : p.h;
-  const qh = q.c < 0.02 ? p.h : q.h;
-  const dh = ((qh - ph + 540) % 360) - 180;
-  return fromOklch({ l: p.l + (q.l - p.l) * t, c: p.c + (q.c - p.c) * t, h: (ph + dh * t + 360) % 360 });
-}
-
-/** Near-black used wherever white doesn't read. */
-export const NEAR_BLACK = '#111111';
-
-/**
- * A colour for a mark on one or more backgrounds: `prefer` when it clears
- * `ratio` against every one of them, else whichever of white and
- * near-black has the better worst case.
- *
- * For icons and other non-text marks WCAG 1.4.11 asks 3:1 (text needs
- * 4.5:1), so `onBackground(bg, 3, 'white')` keeps white on mid-tone fills
- * where a text rule would flip to black.
- *
- * @param {string | string[]} backgrounds - The colour(s) under the mark.
- * @param {number} [ratio=3] - Contrast to clear.
- * @param {'white' | 'black' | string} [prefer='white'] - The colour to use when it clears `ratio`.
- * @returns {string} `#rrggbb`.
- *
- * @example
- * onBackground('#e0533d', 3, 'white'); // '#ffffff' (3.6:1)
- * onBackground('#ffe14d', 3, 'white'); // '#111111'
- */
-export function onBackground(backgrounds, ratio = 3, prefer = 'white') {
-  const bgs = [].concat(/** @type {any} */ (backgrounds)).map(toHex);
-  const want = prefer === 'white' ? '#ffffff' : prefer === 'black' ? NEAR_BLACK : toHex(prefer);
-  const worst = (/** @type {string} */ c) => Math.min(...bgs.map((b) => contrastRatio(c, b)));
-  if (worst(want) >= ratio) return want;
-  return worst('#ffffff') >= worst(NEAR_BLACK) ? '#ffffff' : NEAR_BLACK;
-}
-
-/**
- * The colour of an eased multi-stop gradient at `t` (0–1), the way the
- * `linear` and `radial` layers draw it (smoothstep between stops, in OKLab).
- *
- * @param {string[]} colors - Two or more stops, evenly spaced.
- * @param {number} t - Position along the gradient.
- * @param {boolean} [ease=true] - Ease between stops.
- * @returns {string} `#rrggbb`.
- */
-export function gradientAt(colors, t, ease = true) {
-  const list = colors.map(toHex);
-  if (list.length === 1) return list[0];
-  const n = list.length - 1;
-  const x = Math.max(0, Math.min(1, t)) * n;
-  const i = Math.min(n - 1, Math.floor(x));
-  const f = x - i;
-  return mixOklab(list[i], list[i + 1], ease ? f * f * (3 - 2 * f) : f);
-}

package/src/effects/ascii.d.ts

@@ -1,7 +0,0 @@
-// The layer as text art.
-import type { Effect } from './index.js';
-import type { Pixels } from './buffer.js';
-import type { PixelResult } from './pixels.js';
-
-/** `ascii`, on pixels (one pixel per font pixel, scaled up crisp). */
-export function ascii(img: Pixels, fx: Extract<Effect, { kind: 'ascii' }>, ctx: object): PixelResult;

package/src/effects/ascii.js

@@ -1,93 +0,0 @@
-/**
- * `ascii`: the layer as text art. Each cell's brightness picks a
- * character from a ramp (ordered by how much ink each glyph of the
- * built-in 5×7 pixel face carries), drawn in the cell's own colour or one
- * ink, on a background. Rendered at one pixel per font pixel and embedded
- * scaled up crisp, so it's tiny and sharp at any size.
- *
- * @module effects/ascii
- */
-
-import { px, premultiplied } from './buffer.js';
-import { rgb } from './util.js';
-import { pixelBitmap } from '../type/pixel.js';
-
-/** The default ramp, light to dense. */
-const RAMP = ' .:-=+*%#@';
-
-/**
- * `ascii`: `cell` (a length: a character's width; height is 8/6 of it),
- * `ramp` (characters, sparse to dense, re-ordered by their ink), `color`
- * (`'source'`, each character the colour under it, or one colour),
- * `background` (a colour, or `'none'`), `invert` (dense where it's dark,
- * for dark ink on paper), `contrast` (after the tones are stretched to the
- * layer's own range).
- *
- * @param {import('./buffer.js').Pixels} img
- * @param {import('./index.js').Effect & { kind: 'ascii' }} fx
- * @param {any} ctx
- * @returns {import('./pixels.js').PixelResult}
- */
-export function ascii(img, fx, ctx) {
-  const { width: w, height: h } = img;
-  const cw = Math.max(3, px(fx.cell, ctx, img, '1.4vmin'));
-  const ch = (cw * 8) / 6;
-  const cols = Math.max(1, Math.round(w / cw));
-  const rows = Math.max(1, Math.round(h / ch));
-  // Glyphs that the face draws, by ink.
-  const glyphs = [...new Set([...(fx.ramp ?? RAMP)])].map((c) => ({ c, bits: c === ' ' ? '.'.repeat(35) : pixelBitmap(c) })).filter((g) => g.bits);
-  if (!glyphs.length) throw new TypeError('ascii: the ramp has no characters the pixel face draws (A–Z, 0–9, punctuation)');
-  glyphs.sort((a, b) => (a.bits?.split('#').length ?? 0) - (b.bits?.split('#').length ?? 0));
-  const src = premultiplied(img);
-  const acc = new Float64Array(cols * rows * 5);
-  for (let y = 0; y < h; y++) {
-    const cy = Math.min(rows - 1, ((y * rows) / h) | 0);
-    for (let x = 0; x < w; x++) {
-      const c = (cy * cols + Math.min(cols - 1, ((x * cols) / w) | 0)) * 5;
-      const i = (y * w + x) * 4;
-      acc[c] += src[i]; acc[c + 1] += src[i + 1]; acc[c + 2] += src[i + 2]; acc[c + 3] += src[i + 3]; acc[c + 4]++;
-    }
-  }
-  const ink = fx.color && fx.color !== 'source' ? rgb(fx.color).map((v) => v * 255) : null;
-  const bg = fx.background === 'none' ? null : rgb(fx.background ?? '#0b0b0b').map((v) => v * 255);
-  const contrast = fx.contrast ?? 1.2;
-  // Tones stretched to the cells' own range, so a dim layer still reads.
-  const lums = new Float32Array(cols * rows);
-  let lo = 1;
-  let hi = 0;
-  for (let c = 0; c < lums.length; c++) {
-    const a = acc[c * 5 + 3];
-    if (!a) continue;
-    lums[c] = (0.2126 * acc[c * 5] + 0.7152 * acc[c * 5 + 1] + 0.0722 * acc[c * 5 + 2]) / a;
-    lo = Math.min(lo, lums[c]);
-    hi = Math.max(hi, lums[c]);
-  }
-  const span = hi - lo > 0.05 ? hi - lo : 1;
-  const W = cols * 6;
-  const H = rows * 8;
-  const out = new Uint8ClampedArray(W * H * 4);
-  for (let cy = 0; cy < rows; cy++) {
-    for (let cx = 0; cx < cols; cx++) {
-      const c = (cy * cols + cx) * 5;
-      const n = acc[c + 4] || 1;
-      const a = acc[c + 3] / n;
-      const k = a ? 255 / a : 0;
-      const r = (acc[c] / n) * k;
-      const g = (acc[c + 1] / n) * k;
-      const b = (acc[c + 2] / n) * k;
-      let l = (lums[cy * cols + cx] - (span === 1 ? 0 : lo)) / span;
-      l = Math.min(1, Math.max(0, (l - 0.5) * contrast + 0.5));
-      if (fx.invert) l = 1 - l;
-      const glyph = a < 8 ? glyphs[0] : glyphs[Math.min(glyphs.length - 1, Math.floor(l * glyphs.length))];
-      const col = ink ?? [r, g, b];
-      for (let gy = 0; gy < 8; gy++) {
-        for (let gx = 0; gx < 6; gx++) {
-          const on = gy < 7 && gx < 5 && glyph.bits?.[gy * 5 + gx] === '#';
-          const o = ((cy * 8 + gy) * W + cx * 6 + gx) * 4;
-          if (on) { out[o] = col[0]; out[o + 1] = col[1]; out[o + 2] = col[2]; out[o + 3] = 255; } else if (bg) { out[o] = bg[0]; out[o + 1] = bg[1]; out[o + 2] = bg[2]; out[o + 3] = 255; }
-        }
-      }
-    }
-  }
-  return { data: out, width: W, height: H, pixelated: true };
-}

package/src/effects/buffer.d.ts

@@ -1,60 +0,0 @@
-// Pixel helpers shared by the pixel effects.
-import type { Length } from '../index.js';
-
-/** A layer drawn as pixels: RGBA, 8-bit, not premultiplied. */
-export interface Pixels {
-  data: Uint8ClampedArray;
-  width: number;
-  height: number;
-  /** Pixels per layer unit. */
-  scale: number;
-  /** Every pixel has alpha 255. */
-  opaque: boolean;
-}
-
-/** sRGB byte → linear light, 0–1. */
-export const TO_LINEAR: Float32Array;
-/** Linear light (clipped) to an sRGB byte. */
-export function toSrgb(v: number): number;
-/** A length in pixels. */
-export function px(v: Length | undefined, ctx: { canvas: { width: number; height: number } }, img: Pixels, fallback: Length): number;
-/** A point given as fractions of the canvas, in pixels. */
-export function pointPx(p: [number, number] | { x: number; y: number } | undefined, img: { width: number; height: number }, fallback?: [number, number]): [number, number];
-/** A point as fractions. */
-export function fraction(p: [number, number] | { x: number; y: number } | undefined, fallback: [number, number]): [number, number];
-/** 0–1. */
-export function clamp01(v: number): number;
-/** Hermite step from a to b. */
-export function smoothstep(a: number, b: number, v: number): number;
-/** A premultiplied copy (the same buffer when opaque). */
-export function premultiplied(img: Pixels): Uint8ClampedArray;
-/** Undo premultiplying, in place. */
-export function unpremultiply(d: Uint8ClampedArray): Uint8ClampedArray;
-/** Bilinear RGBA sample, the edge held, written to `out` at `o`. */
-export function bilinear(src: Uint8ClampedArray, w: number, h: number, x: number, y: number, out: Uint8ClampedArray | Float32Array, o: number): void;
-/** Resample every pixel from where `map` says it came from. */
-export function remap(img: Pixels, map: (x: number, y: number, at: Float64Array) => void): Uint8ClampedArray;
-/** Box radii for three passes approximating a Gaussian. */
-export function boxesFor(sigma: number): number[];
-/** A box blur along rows (0) or columns (1), the edge held. */
-export function boxPass(src: Uint8ClampedArray | Float32Array, dst: Uint8ClampedArray | Float32Array, w: number, h: number, ch: number, r: number, dir: 0 | 1): void;
-/** A Gaussian blur in place (three box passes each way). */
-export function gaussian<T extends Uint8ClampedArray | Float32Array>(data: T, w: number, h: number, ch: number, sigma: number, sigmaY?: number): T;
-/** Downsample by a whole factor, averaging blocks. */
-export function shrink(src: Uint8ClampedArray, w: number, h: number, f: number): { data: Uint8ClampedArray; width: number; height: number };
-/** Upscale, bilinear. */
-export function enlarge(src: Uint8ClampedArray, sw: number, sh: number, w: number, h: number): Uint8ClampedArray;
-/** Upscale, nearest neighbour. */
-export function nearest(src: Uint8ClampedArray, sw: number, sh: number, w: number, h: number): Uint8ClampedArray;
-/** Rec. 709 luma of a pixel, 0–255. */
-export function luma(d: ArrayLike<number>, i: number): number;
-/** The effect's own seed (hashed), else one from the layer's stream. */
-export function seedFor(fx: { seed?: number | string }, ctx: { rng: { int: (a: number, b: number) => number } }): number;
-/** An integer hash of a lattice point and a seed, 0–1. */
-export function hash2(x: number, y: number, seed: number): number;
-/** Smooth value noise, -1–1. */
-export function valueNoise(x: number, y: number, seed: number): number;
-/** Fractal value noise, about -1–1. */
-export function fractalNoise(x: number, y: number, seed: number, octaves?: number): number;
-/** A fractal noise field for every pixel, -1–1. */
-export function noiseField(w: number, h: number, period: number, seed: number, octaves?: number): Float32Array;