@arraypress/covers 1.1.0 → 1.3.1

package/src/animate/sheet.d.ts

@@ -0,0 +1,19 @@
+// The stylesheet an animated SVG carries.
+
+/** The placeholder prefix animation names carry until the document is named. */
+export const NS: string;
+
+/** Keyframes and animation rules, each written once. */
+export interface Sheet {
+  /** Add an animation: `[progress 0–1, CSS declarations]` frames and its timing. Returns the class attribute for the element. */
+  animation(frames: [number, string][], timing: string): string;
+  /** Nothing added yet. */
+  readonly empty: boolean;
+  /** The stylesheet, with the `prefers-reduced-motion` rule that stops it. */
+  css(): string;
+}
+
+/** A stylesheet to collect animations into. */
+export function createSheet(): Sheet;
+/** Give a finished document's animation names their prefix (`cv` and a hash of the document). */
+export function nameSheet(svg: string): string;

package/src/animate/sheet.js

@@ -0,0 +1,61 @@
+/**
+ * The stylesheet an animated SVG carries: its keyframes and animation
+ * rules (each written once, however many elements share it), and a
+ * `prefers-reduced-motion` rule that stops them all, so what shows is the
+ * SVG's own attributes: the still.
+ *
+ * Names are written with a placeholder prefix while the cover is drawn and
+ * given the document's hash at the end ({@link nameSheet}), so two covers
+ * inlined in one page never share a name unless they're the same cover.
+ *
+ * @module animate/sheet
+ */
+
+import { num } from '@logomarks/image-effects/svg';
+import { hashString } from '@logomarks/image-effects/rng';
+
+/** The placeholder for the document's prefix (outside base64's alphabet). */
+export const NS = '__cv__';
+
+/**
+ * A stylesheet to collect animations into.
+ *
+ * @returns {import('./sheet.js').Sheet}
+ */
+export function createSheet() {
+  /** @type {Map<string, string>} keyframes body → name */
+  const keyframes = new Map();
+  /** @type {Map<string, string>} animation → class */
+  const rules = new Map();
+  return {
+    animation(frames, timing) {
+      const body = frames.map(([p, decl]) => `${num(p * 100, 3)}%{${decl}}`).join('');
+      let name = keyframes.get(body);
+      if (!name) keyframes.set(body, (name = `${NS}k${keyframes.size}`));
+      const anim = `${name} ${timing}`;
+      let cls = rules.get(anim);
+      if (!cls) rules.set(anim, (cls = `${NS}a${rules.size}`));
+      return `${NS} ${cls}`;
+    },
+    get empty() {
+      return rules.size === 0;
+    },
+    css() {
+      let css = `.${NS}{transform-box:view-box;transform-origin:0 0}`;
+      for (const [body, name] of keyframes) css += `@keyframes ${name}{${body}}`;
+      for (const [anim, cls] of rules) css += `.${cls}{animation:${anim}}`;
+      return `${css}@media (prefers-reduced-motion:reduce){.${NS}{animation:none!important}}`;
+    },
+  };
+}
+
+/**
+ * Give a finished document's animation names their prefix: `cv` and a hash
+ * of the document.
+ *
+ * @param {string} svg
+ * @returns {string}
+ */
+export function nameSheet(svg) {
+  return svg.includes(NS) ? svg.replaceAll(NS, `cv${hashString(svg).toString(36)}`) : svg;
+}

package/src/animate/timing.d.ts

@@ -0,0 +1,28 @@
+// Motion timing: presets, defaults, easing, and where a motion is at any time (CSS semantics).
+import type { Motion, MotionPreset } from './motion.js';
+
+/** An easing: CSS's named curves (`in`, `out`, `inOut` are ease-in, ease-out, ease-in-out), a hold (`step`), or a cubic Bézier. */
+export type Easing = 'linear' | 'ease' | 'in' | 'out' | 'inOut' | 'step' | [number, number, number, number];
+
+/** A motion with its preset expanded and every timing option filled in. */
+export interface ResolvedMotion extends Omit<Motion, 'iterations'> {
+  duration: number;
+  delay: number;
+  easing: Easing;
+  direction: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
+  /** `Infinity` for `'infinite'`. */
+  iterations: number;
+}
+
+/** Named motions: each is a motion's defaults. */
+export const MOTION_PRESETS: Readonly<Record<MotionPreset, Readonly<Motion>>>;
+/** A layer's `motion` as resolved motions (presets expanded, defaults filled in); throws on an unknown preset, direction or easing. */
+export function motionList(v: unknown): ResolvedMotion[];
+/** An easing as a function on 0–1. */
+export function easing(e: Easing): (x: number) => number;
+/** An easing as CSS writes it. */
+export function cssEasing(e: Easing): string;
+/** How far through its stops a motion is at `t` seconds (0–1, direction applied; `animation-fill-mode: both`). */
+export function progress(m: ResolvedMotion, t: number): number;
+/** A motion's CSS `animation` timing (everything but the name); `linear` when its stops were sampled eased. */
+export function cssTiming(m: ResolvedMotion, o?: { linear?: boolean; delay?: number }): string;

package/src/animate/timing.js

@@ -0,0 +1,146 @@
+/**
+ * Motion timing: presets, defaults, easing curves, and where a motion is at
+ * any time, with CSS animation semantics (so a still drawn at `t` matches
+ * what a browser shows at `t`).
+ *
+ * @module animate/timing
+ */
+
+import { num } from '@logomarks/image-effects/svg';
+
+/** Named motions: each is a motion's defaults, under whatever else you set. */
+export const MOTION_PRESETS = Object.freeze({
+  drift: Object.freeze({ translate: ['3vmin', '-2vmin'], duration: 20, easing: 'inOut', direction: 'alternate' }),
+  spin: Object.freeze({ rotate: 360, duration: 30, easing: 'linear' }),
+  breathe: Object.freeze({ scale: 1.06, duration: 3, easing: 'inOut', direction: 'alternate' }),
+  blink: Object.freeze({ opacity: [1, 0, 1], duration: 1, easing: 'step' }),
+  marquee: Object.freeze({ marquee: true, duration: 10, easing: 'linear' }),
+});
+
+/** Timing defaults. */
+const DEFAULTS = { duration: 2, delay: 0, easing: 'linear', direction: 'normal', iterations: Infinity };
+
+/** Directions, as CSS names them. */
+const DIRECTIONS = ['normal', 'reverse', 'alternate', 'alternate-reverse'];
+
+/** Named easing curves as cubic Béziers (CSS's), and the step. */
+const CURVES = /** @type {Record<string, [number, number, number, number]>} */ ({
+  linear: [0, 0, 1, 1],
+  ease: [0.25, 0.1, 0.25, 1],
+  in: [0.42, 0, 1, 1],
+  out: [0, 0, 0.58, 1],
+  inOut: [0.42, 0, 0.58, 1],
+});
+
+/**
+ * A layer's `motion` as a list of resolved motions: presets expanded,
+ * timing defaults filled in, `iterations: 'infinite'` as `Infinity`.
+ *
+ * @param {unknown} v - A motion, a preset name, or a list of them.
+ * @returns {import('./timing.js').ResolvedMotion[]}
+ * @throws {TypeError} On an unknown preset, direction or easing, or a duration that isn't positive.
+ */
+export function motionList(v) {
+  return (Array.isArray(v) ? v : [v]).filter((m) => m != null && m !== false).map((m) => {
+    const own = typeof m === 'string' ? { preset: m } : /** @type {any} */ (m);
+    const preset = own.preset == null ? {} : MOTION_PRESETS[/** @type {keyof typeof MOTION_PRESETS} */ (own.preset)];
+    if (!preset) throw new TypeError(`Unknown motion preset "${own.preset}" (${Object.keys(MOTION_PRESETS).join(', ')})`);
+    const r = { ...DEFAULTS, ...preset, ...own };
+    if (r.iterations === 'infinite') r.iterations = Infinity;
+    if (!(r.duration > 0)) throw new TypeError(`motion: duration must be a positive number of seconds, got ${r.duration}`);
+    if (!(r.iterations > 0)) throw new TypeError(`motion: iterations must be positive or "infinite", got ${r.iterations}`);
+    if (!DIRECTIONS.includes(r.direction)) throw new TypeError(`motion: unknown direction "${r.direction}" (${DIRECTIONS.join(', ')})`);
+    easing(r.easing);
+    return r;
+  });
+}
+
+/**
+ * An easing as a function on 0–1.
+ *
+ * @param {import('./timing.js').Easing} e
+ * @returns {(x: number) => number}
+ * @throws {TypeError} On an unknown name.
+ */
+export function easing(e) {
+  if (e === 'step') return (x) => (x >= 1 ? 1 : 0);
+  const c = Array.isArray(e) ? e : CURVES[/** @type {string} */ (e)];
+  if (!c || c.length !== 4) throw new TypeError(`motion: unknown easing ${JSON.stringify(e)} (${[...Object.keys(CURVES), 'step'].join(', ')}, or [x1, y1, x2, y2])`);
+  return bezier(c[0], c[1], c[2], c[3]);
+}
+
+/**
+ * An easing as CSS writes it.
+ *
+ * @param {import('./timing.js').Easing} e
+ * @returns {string}
+ */
+export function cssEasing(e) {
+  if (e === 'step') return 'steps(1,end)';
+  if (e === 'linear') return 'linear';
+  const [a, b, c, d] = Array.isArray(e) ? e : CURVES[/** @type {string} */ (e)];
+  return `cubic-bezier(${[a, b, c, d].map((v) => num(v, 4)).join(',')})`;
+}
+
+/**
+ * A CSS cubic-bezier timing function, solved for y at x.
+ *
+ * @param {number} x1 @param {number} y1 @param {number} x2 @param {number} y2
+ * @returns {(x: number) => number}
+ */
+function bezier(x1, y1, x2, y2) {
+  const at = (/** @type {number} */ t, /** @type {number} */ a, /** @type {number} */ b) => 3 * a * t * (1 - t) ** 2 + 3 * b * t * t * (1 - t) + t ** 3;
+  return (x) => {
+    if (x <= 0) return 0;
+    if (x >= 1) return 1;
+    let lo = 0;
+    let hi = 1;
+    let t = x;
+    for (let i = 0; i < 40; i++) {
+      const v = at(t, x1, x2);
+      if (Math.abs(v - x) < 1e-7) break;
+      if (v < x) lo = t; else hi = t;
+      t = (lo + hi) / 2;
+    }
+    return at(t, y1, y2);
+  };
+}
+
+/**
+ * How far through its stops a motion is at `t` seconds (0–1, direction
+ * applied), as CSS plays it with `animation-fill-mode: both`: before its
+ * delay it holds the start, after its last iteration the end.
+ *
+ * @param {import('./timing.js').ResolvedMotion} m
+ * @param {number} t
+ * @returns {number}
+ */
+export function progress(m, t) {
+  const local = t - m.delay;
+  let iteration = 0;
+  let p = 0;
+  if (local >= m.duration * m.iterations) {
+    iteration = Math.ceil(m.iterations) - 1;
+    p = m.iterations - iteration;
+  } else if (local > 0) {
+    const whole = local / m.duration;
+    iteration = Math.floor(whole);
+    p = whole - iteration;
+  }
+  const back = m.direction === 'reverse'
+    || (m.direction === 'alternate' && iteration % 2 === 1)
+    || (m.direction === 'alternate-reverse' && iteration % 2 === 0);
+  return back ? 1 - p : p;
+}
+
+/**
+ * A motion's CSS `animation` timing (everything but the name).
+ *
+ * @param {import('./timing.js').ResolvedMotion} m
+ * @param {{ linear?: boolean, delay?: number }} [o] - `linear`: the stops were sampled with the easing already applied.
+ * @returns {string}
+ */
+export function cssTiming(m, o = {}) {
+  const iterations = m.iterations === Infinity ? 'infinite' : num(m.iterations, 3);
+  return `${num(m.duration, 3)}s ${o.linear ? 'linear' : cssEasing(m.easing)} ${num(o.delay ?? m.delay, 3)}s ${iterations} ${m.direction} both`;
+}

package/src/animate/tracks.d.ts

@@ -0,0 +1,18 @@
+// A motion's transform and opacity as tracks of stops.
+import type { ResolvedMotion } from './timing.js';
+
+/** One animated property: its stops (evenly spaced in time) and how a value is written. */
+export interface Track<T = any> {
+  stops: T[];
+  /** Stops sampled along a path with the easing applied (CSS plays them linearly). */
+  sampled?: boolean;
+  /** A value as a CSS declaration, for keyframes. */
+  css(v: T): string;
+  /** A value as SVG attributes, for the still (`null` when it's the layer at rest). */
+  attr(v: T): Record<string, string> | null;
+}
+
+/** A value at progress `p` (0–1) through evenly spaced stops, eased between each pair. */
+export function atStops<T>(stops: T[], p: number, ease: (x: number) => number): T;
+/** A motion's tracks, outermost first: translate (or path), rotate, scale, opacity. */
+export function tracks(m: ResolvedMotion, canvas: { width: number; height: number }): Track[];

package/src/animate/tracks.js

@@ -0,0 +1,139 @@
+/**
+ * A motion's transform and opacity as tracks: each is a list of stops (a
+ * value per stop, evenly spaced in time) and how one value is written, as a
+ * CSS declaration for keyframes and as SVG attributes for a still.
+ *
+ * - `translate`: `[x, y]` to move by (from where the layer is), or a list
+ *   of points to visit (`[[0, 0], [x, y], …]`); px in the layer's grid, `'%'`
+ *   of it, or lengths (`'4vw'`).
+ * - `path`: travel a path from where the layer is (`{ d }` or a text-path
+ *   kind: `circle`, `ellipse`, `arc`, `wave`); the easing spans the whole path.
+ * - `rotate`: degrees to turn to, or a list of angles.
+ * - `scale`, `scaleX`, `scaleY`: a factor to grow to, or a list of factors.
+ * - `opacity`: 0–1 to fade to (multiplying the layer's own), or a list.
+ *
+ * Turns and scales are about `origin` (`[x, y]`, default the centre).
+ *
+ * @module animate/tracks
+ */
+
+import { num } from '@logomarks/image-effects/svg';
+import { textPathD, pathSampler } from '../type/path.js';
+import { pos } from '../layers/util.js';
+import { originOf } from '../render/transform.js';
+import { interpolate } from './keyframes.js';
+import { easing } from './timing.js';
+
+/**
+ * A value at progress `p` (0–1) through evenly spaced stops, eased between
+ * each pair (as CSS eases between keyframes).
+ *
+ * @param {any[]} stops
+ * @param {number} p
+ * @param {(x: number) => number} ease
+ * @returns {any}
+ */
+export function atStops(stops, p, ease) {
+  if (stops.length === 1) return stops[0];
+  const x = Math.max(0, Math.min(1, p)) * (stops.length - 1);
+  const k = Math.min(Math.floor(x), stops.length - 2);
+  return interpolate(stops[k], stops[k + 1], ease(x - k));
+}
+
+/**
+ * A scalar option as stops: a list as given, one value as rest → value.
+ *
+ * @param {unknown} v @param {number} rest
+ * @returns {number[] | undefined}
+ */
+const scalar = (v, rest) => (v == null ? undefined : Array.isArray(v) ? v.map(Number) : [rest, Number(v)]);
+
+/**
+ * A motion's tracks, outermost first: translate (or path), rotate, scale,
+ * opacity.
+ *
+ * @param {import('./timing.js').ResolvedMotion} m
+ * @param {{ width: number, height: number }} canvas - The layer's grid.
+ * @returns {import('./tracks.js').Track[]}
+ * @throws {TypeError} When `translate` and `path` are both set, or scale lists differ in length.
+ */
+export function tracks(m, canvas) {
+  /** @type {import('./tracks.js').Track[]} */
+  const out = [];
+  const px = (/** @type {any} */ p) => [pos(p[0] ?? 0, 'x', canvas), pos(p[1] ?? 0, 'y', canvas)];
+  if (m.translate != null && m.path != null) throw new TypeError('motion: give translate or path, not both');
+  if (m.translate != null) {
+    const list = Array.isArray(m.translate[0]) ? m.translate : [[0, 0], m.translate];
+    out.push(translateTrack(list.map(px), false));
+  } else if (m.path != null) {
+    out.push(translateTrack(pathStops(m.path, canvas, easing(m.easing)), true));
+  }
+  const [ox, oy] = originOf(m.origin, canvas);
+  const cssAbout = (/** @type {string} */ fn) => `translate(${num(ox)}px,${num(oy)}px) ${fn} translate(${num(-ox)}px,${num(-oy)}px)`;
+  const svgAbout = (/** @type {string} */ fn) => `translate(${num(ox)} ${num(oy)}) ${fn} translate(${num(-ox)} ${num(-oy)})`;
+  const rotate = scalar(m.rotate, 0);
+  if (rotate) {
+    out.push({
+      stops: rotate,
+      css: (a) => `transform:${cssAbout(`rotate(${num(a, 3)}deg)`)}`,
+      attr: (a) => (a ? { transform: `rotate(${num(a, 3)} ${num(ox)} ${num(oy)})` } : null),
+    });
+  }
+  const s = scalar(m.scale, 1);
+  const sx = scalar(m.scaleX, 1);
+  const sy = scalar(m.scaleY, 1);
+  if (s || sx || sy) {
+    const n = Math.max(s?.length ?? 0, sx?.length ?? 0, sy?.length ?? 0);
+    if ([s, sx, sy].some((l) => l && l.length !== n)) throw new TypeError('motion: scale, scaleX and scaleY need the same number of stops');
+    const stops = Array.from({ length: n }, (_, i) => [(s?.[i] ?? 1) * (sx?.[i] ?? 1), (s?.[i] ?? 1) * (sy?.[i] ?? 1)]);
+    out.push({
+      stops,
+      css: ([a, b]) => `transform:${cssAbout(`scale(${num(a, 4)},${num(b, 4)})`)}`,
+      attr: ([a, b]) => (a === 1 && b === 1 ? null : { transform: svgAbout(`scale(${num(a, 4)} ${num(b, 4)})`) }),
+    });
+  }
+  const opacity = scalar(m.opacity, 1);
+  if (opacity) {
+    out.push({
+      stops: opacity,
+      css: (o) => `opacity:${num(o, 3)}`,
+      attr: (o) => (o === 1 ? null : { opacity: num(Math.max(0, o), 3) }),
+    });
+  }
+  return out;
+}
+
+/**
+ * A translate track.
+ *
+ * @param {[number, number][]} stops - px.
+ * @param {boolean} sampled - Stops sampled along a path (eased already).
+ * @returns {import('./tracks.js').Track}
+ */
+function translateTrack(stops, sampled) {
+  return {
+    stops,
+    sampled,
+    css: ([x, y]) => `transform:translate(${num(x)}px,${num(y)}px)`,
+    attr: ([x, y]) => (x || y ? { transform: `translate(${num(x)} ${num(y)})` } : null),
+  };
+}
+
+/**
+ * Points along a path, relative to its start, sampled evenly in time with
+ * the easing applied over the whole path.
+ *
+ * @param {any} path - `{ d }`, a text-path kind, or path data.
+ * @param {{ width: number, height: number }} canvas
+ * @param {(x: number) => number} ease
+ * @returns {[number, number][]}
+ */
+function pathStops(path, canvas, ease) {
+  const sampler = pathSampler(textPathD(path, canvas));
+  const n = Math.max(16, Math.min(240, Math.ceil(sampler.length / 4)));
+  const o = sampler.at(0);
+  return Array.from({ length: n + 1 }, (_, i) => {
+    const at = sampler.at(ease(i / n) * sampler.length);
+    return /** @type {[number, number]} */ ([at.x - o.x, at.y - o.y]);
+  });
+}

package/src/diagram.js

@@ -19,9 +19,10 @@
  * @module diagram
  */
 
-import { attrs, num, layerAttrs } from './svg.js';
-import { len } from './geometry.js';
-import { toHex } from './color.js';
+import { attrs, num } from '@logomarks/image-effects/svg';
+import { layerAttrs } from './layers/util.js';
+import { len } from '@logomarks/image-effects/length';
+import { toHex } from '@logomarks/image-effects/color';
 import { resolveIcon, parseSvgIcon } from './icons.js';
 import { gridPath } from './grid.js';
 

package/src/extract.js

@@ -5,8 +5,8 @@
  */
 
 import { loadBytes } from './platform/index.js';
-import { toOklch, fromOklch, toHex } from './color.js';
-import { createRng } from './rng.js';
+import { toOklch, fromOklch, toHex } from '@logomarks/image-effects/color';
+import { createRng } from '@logomarks/image-effects/rng';
 
 /** @type {Map<string, Promise<string[]>>} */
 const cache = new Map();

package/src/fonts.js

@@ -23,8 +23,7 @@
  * @module fonts
  */
 
-import { shaperModule, loadBytes, inflate, unbrotli, unbrotliSync, packageFileSync, registry, node } from './platform/index.js';
-import { u8 } from './platform/bytes.js';
+import { shaperModule, loadBytes, inflate, unbrotli, unbrotliSync, packageFileSync, registry, node, u8 } from './platform/index.js';
 import { parseSfnt } from './type/sfnt.js';
 import { woff2Directory, woff2ToSfnt } from './type/woff2.js';
 

package/src/geometry.js

@@ -1,14 +1,12 @@
 /**
- * Canvas size, lengths and anchoring.
- *
- * Lengths are pixels when given as numbers, or CSS-style viewport units as
- * strings: `'6vmin'` (6% of the shorter side), `'4vw'`, `'4vh'`, `'5vmax'`.
- * Defaults are written in these units, so a cover keeps its proportions at
- * any output size.
+ * Canvas size and anchoring. Lengths (`'6vmin'`, `'4vw'`…) resolve with
+ * image-effects' `len`, so layers and effects read them the same way.
  *
  * @module geometry
  */
 
+import { len } from '@logomarks/image-effects/length';
+
 /** Named aspect ratios, as `width / height`. */
 export const ASPECTS = Object.freeze({
   '1:1': 1,
@@ -77,34 +75,6 @@ function checkSize(w, h) {
   return { width, height };
 }
 
-/**
- * Resolve a length to pixels.
- *
- * @param {number | string | undefined | null} value - Pixels, or `'Nvmin'` / `'Nvw'` / `'Nvh'` / `'Nvmax'`.
- * @param {{ width: number, height: number }} canvas - The canvas size.
- * @param {number | string} [fallback=0] - Used when `value` is undefined or null.
- * @returns {number} Pixels.
- * @throws {TypeError} On a string with an unknown unit.
- *
- * @example
- * len('5vmin', { width: 1200, height: 630 });  // 31.5
- * len(undefined, canvas, '6vmin');             // the default
- */
-export function len(value, canvas, fallback = 0) {
-  const v = value ?? fallback;
-  if (typeof v === 'number') return v;
-  const m = String(v).match(/^\s*(-?\d*\.?\d+)\s*(vmin|vmax|vw|vh|px)?\s*$/);
-  if (!m) throw new TypeError(`Invalid length "${v}" (use px numbers or vmin/vmax/vw/vh)`);
-  const n = parseFloat(m[1]);
-  switch (m[2]) {
-    case 'vmin': return (n / 100) * Math.min(canvas.width, canvas.height);
-    case 'vmax': return (n / 100) * Math.max(canvas.width, canvas.height);
-    case 'vw': return (n / 100) * canvas.width;
-    case 'vh': return (n / 100) * canvas.height;
-    default: return n;
-  }
-}
-
 /** The nine anchors, as fractions of the free space along x and y. */
 export const ANCHORS = Object.freeze({
   'top-left': [0, 0], top: [0.5, 0], 'top-right': [1, 0],

package/src/grid.js

@@ -4,7 +4,7 @@
  * @module grid
  */
 
-import { num } from './svg.js';
+import { num } from '@logomarks/image-effects/svg';
 
 /**
  * Path data for full-length grid lines at `xs` (columns) and `ys` (rows),

package/src/handmade.js

@@ -11,9 +11,11 @@
  * @module handmade
  */
 
-import { attrs, num, layerAttrs } from './svg.js';
-import { len, regionPx } from './geometry.js';
-import { toHex } from './color.js';
+import { attrs, num } from '@logomarks/image-effects/svg';
+import { layerAttrs } from './layers/util.js';
+import { len } from '@logomarks/image-effects/length';
+import { regionPx } from './geometry.js';
+import { toHex } from '@logomarks/image-effects/color';
 import { resolveIcon, parseSvgIcon } from './icons.js';
 import { flattenBody, densify } from './flatten.js';
 
@@ -25,7 +27,7 @@ export const INK = '#141413';
 /**
  * Smooth 1D value noise from a seeded stream: `noise(t)` in [-1, 1].
  *
- * @param {import('./rng.js').Rng} rng
+ * @param {import('@logomarks/image-effects/rng').Rng} rng
  * @returns {(t: number) => number}
  */
 function noise1(rng) {
@@ -47,7 +49,7 @@ function noise1(rng) {
  * @param {[number, number][]} outline - A closed polyline (first point not repeated).
  * @param {number} cut - Cut length in px.
  * @param {number} wobble - Max nudge in px.
- * @param {import('./rng.js').Rng} rng
+ * @param {import('@logomarks/image-effects/rng').Rng} rng
  * @returns {string} Path data.
  */
 function scissor(outline, cut, wobble, rng) {
@@ -74,7 +76,7 @@ function scissor(outline, cut, wobble, rng) {
  *
  * @param {string} kind - rect | square | circle | blob | arch | pill
  * @param {number} w @param {number} h
- * @param {import('./rng.js').Rng} rng
+ * @param {import('@logomarks/image-effects/rng').Rng} rng
  * @returns {[number, number][]}
  */
 function outlineOf(kind, w, h, rng) {
@@ -176,7 +178,7 @@ export function paper(layer, ctx) {
  * @param {number} o.amp - Wobble amplitude in px.
  * @param {number} o.period - Wobble period in px.
  * @param {string} o.color
- * @param {import('./rng.js').Rng} o.rng
+ * @param {import('@logomarks/image-effects/rng').Rng} o.rng
  * @returns {string} Markup.
  */
 function handLine(pts, { width, amp, period, color, rng }) {

package/src/icons.js

@@ -14,8 +14,7 @@
  * @module icons
  */
 
-import { node, settings, loadBytes } from './platform/index.js';
-import { utf8 } from './platform/bytes.js';
+import { node, settings, loadBytes, utf8 } from './platform/index.js';
 
 /** @type {Map<string, IconSet>} */
 const sets = new Map();