@arraypress/covers 1.1.0 → 1.4.0

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.d.ts

@@ -8,6 +8,8 @@ import type { Length, Color } from '../index.js';
 export interface TextSpan {
   content: string;
   font?: string; weight?: number; style?: 'normal' | 'italic'; axes?: Record<string, number>;
+  /** Set at the layer's `boldWeight` (default 700) when `weight` isn't given. */
+  bold?: boolean;
   /** Size relative to the layer's (default 1). */
   scale?: number;
   /** Size outright. */
@@ -24,7 +26,9 @@ export interface TextSpan {
 export interface Span { text: string; face: LoadedFont; scale: number; tracking: number; paint: string | undefined; dy: number }
 
 /** Resolve a layer's spans (faces loaded, sizes relative to `size`). */
-export function loadSpans(layer: { spans: (TextSpan | string)[]; font?: string; weight?: number; style?: string; axes?: Record<string, number>; letterSpacing?: number; transform?: string }, ctx: RenderContext, size: number): Promise<Span[]>;
+export function loadSpans(layer: { spans: (TextSpan | string)[]; font?: string; weight?: number; boldWeight?: number; style?: string; axes?: Record<string, number>; letterSpacing?: number; transform?: string }, ctx: RenderContext, size: number): Promise<Span[]>;
+/** A `content` array as spans, one a line, when any item is a span object; else `undefined`. */
+export function lineSpans(content: unknown): TextSpan[] | undefined;
 /** Spans as lines (split at `\n`, wrapped at `maxWidth`). */
 export function spanLines(spans: Span[], size: number, maxWidth: number, fallbacks: LoadedFont[]): Span[][];
 /** Shape a line of spans as one run. */

package/src/type/spans.js

@@ -3,15 +3,17 @@
  * style, axes, size, colour, tracking and baseline shift, set one after
  * another on the same lines (a `\n` in a span starts a new line).
  *
- * `spans: [{ content, font, weight, style, axes, scale, size, color, letterSpacing, dy }]`;
+ * `spans: [{ content, font, weight, bold, style, axes, scale, size, color, letterSpacing, dy }]`;
  * anything a span leaves out comes from the layer. `scale` sizes a span
- * relative to the layer (`size` gives it outright).
+ * relative to the layer (`size` gives it outright); `bold: true` sets it at
+ * the layer's `boldWeight` (700). A `content` array with span objects in it
+ * is one span a line (`lineSpans`): a headline whose lines change weight.
  *
  * @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';
 
@@ -37,7 +39,8 @@ export async function loadSpans(layer, ctx, size) {
   const out = [];
   for (const given of layer.spans) {
     const s = typeof given === 'string' ? { content: given } : given;
-    const face = await faceFor(ctx, { font: s.font ?? layer.font, weight: s.weight ?? layer.weight, style: s.style ?? layer.style, axes: { ...layer.axes, ...s.axes } });
+    const weight = s.weight ?? (s.bold ? layer.boldWeight ?? 700 : layer.weight);
+    const face = await faceFor(ctx, { font: s.font ?? layer.font, weight, style: s.style ?? layer.style, axes: { ...layer.axes, ...s.axes } });
     const kase = s.transform ?? layer.transform;
     const raw = String(s.content ?? '').replace(/[\t\r ]+/g, ' ');
     out.push({
@@ -52,6 +55,26 @@ export async function loadSpans(layer, ctx, size) {
   return out;
 }
 
+/**
+ * A `content` array as spans, one a line, when any item is a span object
+ * (`{ content, bold, weight, … }`); otherwise `undefined` (plain lines stay
+ * content).
+ *
+ * @param {unknown} content - A text layer's `content`.
+ * @returns {import('./spans.js').TextSpan[] | undefined}
+ *
+ * @example
+ * lineSpans([{ content: 'Signal', bold: true }, 'over the']);
+ * // [{ content: 'Signal\n', bold: true }, { content: 'over the' }]
+ */
+export function lineSpans(content) {
+  if (!Array.isArray(content) || !content.some((x) => x && typeof x === 'object')) return undefined;
+  return content.map((item, i) => {
+    const s = item && typeof item === 'object' ? item : { content: item };
+    return { ...s, content: `${s.content ?? ''}${i < content.length - 1 ? '\n' : ''}` };
+  });
+}
+
 /**
  * Spans as lines: split at `\n`, then (with a finite `maxWidth`) wrapped at
  * spaces, greedily, at `size`.

package/src/type/symbols.d.ts

@@ -1,7 +1,7 @@
 // Built-in symbols, drawn as shapes (the last glyph fallback).
 import type { LoadedFont } from '../fonts.js';
 
-/** The symbol face: ✺ ✦ ✶ ★ ☆ ♥ ♡ ▶ ◀ ● ◆ ■ ♪. */
+/** The symbol face: ✺ ✦ ✶ ★ ☆ ♥ ♡ ▶ ◀ ● ◆ ■ ♪ ≠. */
 export function symbolFace(): LoadedFont;
 /** The characters it draws. */
 export const SYMBOLS: string;

package/src/type/symbols.js

@@ -1,6 +1,6 @@
 /**
  * A built-in face of a few symbols type often wants and fonts often lack
- * (✺ ✦ ✶ ★ ☆ ♥ ♡ ▶ ◀ ● ◆ ■ ♪), drawn as shapes. The last fallback when a
+ * (✺ ✦ ✶ ★ ☆ ♥ ♡ ▶ ◀ ● ◆ ■ ♪ ≠), drawn as shapes. The last fallback when a
  * text layer's font has no glyph for a character.
  *
  * @module type/symbols
@@ -38,6 +38,23 @@ function heart(k) {
 /** @param {number} r @param {number} [n=48] @returns {[number, number][]} */
 const circle = (r, n = 48) => Array.from({ length: n }, (_, i) => /** @type {[number, number]} */ ([CX + r * Math.sin((i / n) * Math.PI * 2), CY + r * Math.cos((i / n) * Math.PI * 2)]));
 
+/**
+ * Not-equal, on a narrower advance (`NARROW`): two bars and a slash, one
+ * contour each, all wound alike so they fill as one.
+ *
+ * @returns {string}
+ */
+function notEqual() {
+  const cx = NARROW / 2;
+  const [half, bar, gap, lean, stem] = [230, 62, 112, 150, 31];
+  const rect = (/** @type {number} */ y) => poly([[cx - half, y + bar / 2], [cx + half, y + bar / 2], [cx + half, y - bar / 2], [cx - half, y - bar / 2]]);
+  const slash = poly([[cx + lean - stem, CY + 300], [cx + lean + stem, CY + 300], [cx - lean + stem, CY - 300], [cx - lean - stem, CY - 300]]);
+  return rect(CY + gap) + rect(CY - gap) + slash;
+}
+
+/** Advance of the narrow symbols (≠), font units. */
+const NARROW = 600;
+
 /** Outlines by character. An inner contour runs the other way (a hole). */
 const SHAPES = /** @type {Record<string, string>} */ ({
   '✺': poly(star(16, 0.5)),
@@ -53,6 +70,7 @@ const SHAPES = /** @type {Record<string, string>} */ ({
   '◆': poly([[CX, CY + R], [CX + R * 0.8, CY], [CX, CY - R], [CX - R * 0.8, CY]]),
   '■': poly([[CX - R * 0.75, CY + R * 0.75], [CX + R * 0.75, CY + R * 0.75], [CX + R * 0.75, CY - R * 0.75], [CX - R * 0.75, CY - R * 0.75]]),
   '♪': poly([[CX - 40, CY + R], [CX + 220, CY + R * 0.7], [CX + 220, CY + R * 0.45], [CX + 20, CY + R * 0.72], [CX + 20, CY - R * 0.55], [CX - 40, CY - R * 0.55]]) + poly(circle(110).map(([x, y]) => /** @type {[number, number]} */ ([x - 120, y - R * 0.6]))),
+  '≠': notEqual(),
 });
 
 const CHARS = Object.keys(SHAPES);
@@ -80,7 +98,7 @@ export function symbolFace() {
     variations: {},
     source: { name: 'symbols', src: 'covers:symbols', weight: 400 },
     glyphToPath: (/** @type {number} */ gid) => SHAPES[CHARS[gid - 1]] ?? '',
-    shapeRun: (/** @type {string} */ text) => Array.from(text).map((ch, i) => ({ gid: CHARS.indexOf(ch) + 1, cluster: i, xAdvance: ADV, xOffset: 0, yOffset: 0 })),
+    shapeRun: (/** @type {string} */ text) => Array.from(text).map((ch, i) => ({ gid: CHARS.indexOf(ch) + 1, cluster: i, xAdvance: ch === '≠' ? NARROW : ADV, xOffset: 0, yOffset: 0 })),
   };
   return face;
 }

package/src/type/typeset.js

@@ -24,7 +24,8 @@
  * - **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.
+ * - **Mixed runs**: `spans`, each with its own font, weight, size, colour;
+ *   or `content` lines as span objects (`{ content, bold }`), one a line.
  * - **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.
@@ -36,14 +37,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';
@@ -51,8 +53,9 @@ 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 { loadSpans, spanLines, shapeSpans, spanText, lineSpans } 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'];
@@ -81,6 +84,9 @@ export function wantsType(layer) {
  * @returns {Promise<import('../layers.js').Markup>}
  */
 export async function typeset(layer, ctx) {
+  // Lines given as span objects (a headline whose lines change weight) are spans.
+  const perLine = lineSpans(layer.content);
+  if (perLine) layer = { ...layer, content: undefined, spans: perLine };
   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);
@@ -170,7 +176,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 +191,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.4.0';

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 };
-}