@arraypress/covers 1.1.0 → 1.3.1

package/src/index.d.ts

@@ -4,9 +4,9 @@
  * WebP / PNG / AVIF / JPEG.
  */
 
-/** A CSS colour: hex (3/4/6/8 digits), `rgb()`/`rgba()` or `hsl()`/`hsla()`. Alpha is ignored. */
-import type { LayerTransform, Effect, EffectKind, EffectMask } from './effects/index.js';
-import type { Paint } from './effects/paint.js';
+import type { Effect as AnyEffect, EffectKind, EffectMask as AnyEffectMask, Color, Length, Rng } from '@logomarks/image-effects';
+import type { LayerTransform } from './render/transform.js';
+import type { Paint } from './paint/index.js';
 import type { TextPath } from './type/path.js';
 import type { GroupLayer } from './render/group.js';
 import type { DefsLayer, UseLayer } from './render/use.js';
@@ -16,29 +16,32 @@ import type { GlyphControl } from './type/glyphs.js';
 import type { Cut } from './formats/cut.js';
 import type { ShapeLayer, SvgLayer, TableLayer, BarcodeLayer, PerforationLayer, TearLayer, TextureLayer } from './layers/index.js';
 import type { Zones, PrintInfo, FormatName } from './formats/index.js';
+import type { Motion, MotionPreset, Easing } from './animate/index.js';
 
-export type { RepeatLayer, DefsLayer, UseLayer, TextSpan, GlyphControl, Cut };
-export type { LayerTransform, Effect, EffectKind, EffectMask, Paint, TextPath, GroupLayer, ShapeLayer, SvgLayer, TableLayer, BarcodeLayer, PerforationLayer, TearLayer, TextureLayer, Zones, PrintInfo, FormatName };
+export type { RepeatLayer, DefsLayer, UseLayer, TextSpan, GlyphControl, Cut, Motion, MotionPreset, Easing };
+export type { Color, Length, Rng, LayerTransform, EffectKind, Paint, TextPath, GroupLayer, ShapeLayer, SvgLayer, TableLayer, BarcodeLayer, PerforationLayer, TearLayer, TextureLayer, Zones, PrintInfo, FormatName };
 export type { ShapeSpec, TableCell } from './layers/index.js';
 export type { Format } from './formats/index.js';
 export type { LintIssue } from './lint/index.js';
 export type { Settings } from './platform/index.js';
 
 export { safeBox } from './formats/index.js';
-export { rasterize } from './raster/index.js';
-import type { RasterizeOptions } from './raster/index.js';
+export { rasterize } from '@logomarks/image-effects/raster';
+import type { RasterizeOptions } from '@logomarks/image-effects/raster';
 export type { RasterizeOptions };
 export { lint } from './lint/index.js';
 export { kit, KIT_FORMATS } from './kit/index.js';
 export { FORMATS } from './formats/index.js';
 export { configure } from './platform/index.js';
-export { EFFECTS, EFFECT_OPTIONS } from './effects/index.js';
-export { valueAt } from './animate/index.js';
+export { EFFECTS, EFFECT_OPTIONS } from '@logomarks/image-effects';
+export { valueAt, MOTION_PRESETS } from './animate/index.js';
+export { toHex, toOklch, fromOklch, mixOklab, mixOklch, onBackground, gradientAt } from '@logomarks/image-effects/color';
+export { createRng, hashString } from '@logomarks/image-effects/rng';
 
-export type Color = string;
-
-/** Pixels, or a viewport unit of the canvas: `'6vmin'`, `'4vw'`, `'4vh'`, `'5vmax'`. */
-export type Length = number | `${number}vmin` | `${number}vmax` | `${number}vw` | `${number}vh` | `${number}px`;
+/** An effect on a layer (image-effects' effects, with masks and maps given as layers). */
+export type Effect = AnyEffect<Layer>;
+/** Where an effect applies: a gradient, or layers. */
+export type EffectMask = AnyEffectMask<Layer>;
 
 /** Where a box sits inside the safe area. */
 export type Anchor =
@@ -136,6 +139,8 @@ export interface BaseLayer {
   clip?: Layer[];
   /** Draw the layer in a box: the print `'trim'` or `'safe'` area, or fractions of the canvas. */
   area?: 'bleed' | 'trim' | 'safe' | Region;
+  /** Move in the SVG itself (CSS keyframes, no script): a motion, a preset name, or a list. */
+  motion?: Motion | MotionPreset | (Motion | MotionPreset)[];
 }
 
 export interface SolidLayer extends BaseLayer {
@@ -934,6 +939,10 @@ export interface CoverOptions extends RecipeOptions {
   textRender?: 'outline' | 'live';
   /** Seconds: the length of an animated cover's loop (keyframes with `loop` wrap at it). */
   loop?: number;
+  /** `false`: `renderSvg` draws a still, no CSS (layers' `motion` at the `poster` time, else at rest). */
+  animate?: boolean;
+  /** Seconds: the frame stills show (`renderImage`, `renderBlob`, `animate: false`, and an animated SVG under reduced motion). Default: the layers at rest. */
+  poster?: number;
 }
 
 /** A resolved cover (from {@link cover}). */
@@ -958,13 +967,16 @@ export interface Cover {
   pages?: string[];
   overlay?: boolean;
   loop?: number;
+  /** `false` when the cover is drawn as a still. */
+  animate?: false;
+  poster?: number;
   textRender?: 'outline' | 'live';
 }
 
 export interface RenderImageOptions {
   /** Default `'webp'`. */
   format?: 'webp' | 'png' | 'avif' | 'jpeg';
-  /** Default 90 for WebP, 72 for AVIF, 88 for JPEG (high enough to keep the grain; see README). */
+  /** Default 90 for WebP, 72 for AVIF, 88 for JPEG (high enough to keep the grain; see docs/performance.md). */
   quality?: number;
   /** Lossless WebP / AVIF (default: the recipe's preference, else lossy). */
   lossless?: boolean;
@@ -974,16 +986,6 @@ export interface RenderImageOptions {
   cache?: boolean | string;
 }
 
-/** Seeded random stream. */
-export interface Rng {
-  next(): number;
-  range(min: number, max: number): number;
-  int(min: number, max: number): number;
-  pick<T>(items: readonly T[]): T;
-  shuffle<T>(items: readonly T[]): T[];
-  chance(p?: number): boolean;
-}
-
 /** An Iconify JSON set (`@iconify-json/<prefix>/icons.json`). */
 export interface IconSet {
   prefix: string;
@@ -998,13 +1000,23 @@ export interface IconSet {
 /** Resolve a cover's size and palette and expand its recipe. Pure and synchronous. */
 export function cover(options: CoverOptions | Cover): Cover;
 
-/** Render to an SVG string (text and icons as outlines; byte-identical for the same input). `t`: the time to draw, in seconds, for keyframed layers. */
-export function renderSvg(input: CoverOptions | Cover, options?: { t?: number }): Promise<string>;
+/** How `renderSvg` draws. */
+export interface RenderSvgOptions {
+  /** A still at this time, in seconds, for keyframed layers and `motion` (instead of playing it). */
+  t?: number;
+  /** `'webp'`: embedded photos and pixel effects re-encoded as WebP where smaller (needs sharp). For SVGs shown in browsers; librsvg (sharp) can't draw WebP. */
+  images?: 'webp';
+  /** WebP quality for photos (JPEG sources), 1–100. Default 82. PNG sources go lossless. */
+  quality?: number;
+}
+
+/** Render to an SVG string (text and icons as outlines; byte-identical for the same input). */
+export function renderSvg(input: CoverOptions | Cover, options?: RenderSvgOptions): Promise<string>;
 
 /** Render each page of a two-sided piece: `{ front, back }`. */
 export function renderPages(input: CoverOptions, options?: { pages?: string[] }): Promise<Record<string, string>>;
 
-/** Render to an image in the browser (a canvas; no sharp). */
+/** Render to an image in the browser (a canvas; no sharp): a still, the `poster` frame or the layers at rest. */
 export function renderBlob(input: CoverOptions | Cover, options?: RasterizeOptions): Promise<Blob>;
 
 /** Register a font for every cover. */
@@ -1043,21 +1055,6 @@ export function resolvePalette(input?: PaletteInput | Palette): Palette;
 /** Derive a palette from a theme's tokens (or just an accent). */
 export function derivePalette(tokens: { accent: Color; bg?: Color; text?: Color; colors?: Color[]; mode?: 'light' | 'dark' }): Palette;
 
-/** Parse a CSS colour to `#rrggbb`. */
-export function toHex(color: Color): string;
-/** A colour in OKLCH (lightness 0–1, chroma, hue in degrees). */
-export function toOklch(color: Color): { l: number; c: number; h: number };
-/** OKLCH to `#rrggbb` (chroma reduced to fit sRGB). */
-export function fromOklch(lch: { l: number; c: number; h: number }): string;
-/** Mix two colours in OKLab. */
-export function mixOklab(a: Color, b: Color, t: number): string;
-/** `prefer` if it clears `ratio` on every background, else the better of white and near-black (3:1 suits icons, WCAG 1.4.11). */
-export function onBackground(backgrounds: Color | Color[], ratio?: number, prefer?: 'white' | 'black' | Color): string;
-/** The colour of an eased multi-stop gradient at t (0–1), as the gradient layers draw it. */
-export function gradientAt(colors: Color[], t: number, ease?: boolean): string;
-/** Mix two colours in OKLCH (hue the short way; stays vivid). */
-export function mixOklch(a: Color, b: Color, t: number): string;
-
 /** Register an Iconify icon set (no `@iconify-json/*` install needed). */
 export function registerIcons(set: IconSet): void;
 
@@ -1067,17 +1064,11 @@ export function resolveSize(options?: { width?: number; height?: number; aspect?
 /** Named aspect ratios (width / height). */
 export const ASPECTS: Readonly<{ '1:1': number; '16:9': number; '4:5': number; '3:2': number; '4:3': number; '2:1': number; '9:16': number; og: number }>;
 
-/** A seeded random stream (for custom recipes). */
-export function createRng(seed: string | number): Rng;
-
 /** Dominant colours of a photo, most common first (needs sharp). */
 export function extractPalette(src: string | Uint8Array, options?: { count?: number }): Promise<string[]>;
 
 /** Classic risograph inks, by name (approximations). */
 export const RISO_INKS: Readonly<Record<'pink' | 'blue' | 'yellow' | 'teal' | 'red' | 'green' | 'orange' | 'purple' | 'navy' | 'black', string>>;
 
-/** Hash a string to a 32-bit unsigned integer. */
-export function hashString(str: string, salt?: number): number;
-
 /** The layer renderers, by type (for introspection). */
 export const layers: Readonly<Record<Layer['type'], (layer: any, context: any) => unknown>>;

package/src/index.js

@@ -10,18 +10,18 @@ export { cover, renderSvg, renderImage, renderPages, renderBlob, coverKey, safeB
 export { recipes } from './recipes.js';
 export { defineRecipe, loadRecipe } from './json-recipe.js';
 export { palettes, resolvePalette, derivePalette } from './palette.js';
-export { toHex, toOklch, fromOklch, mixOklab, mixOklch, onBackground, gradientAt } from './color.js';
+export { toHex, toOklch, fromOklch, mixOklab, mixOklch, onBackground, gradientAt } from '@logomarks/image-effects/color';
 export { registerIcons } from './icons.js';
 export { registerFont } from './fonts.js';
 export { configure } from './platform/index.js';
 export { resolveSize, ASPECTS } from './geometry.js';
 export { FORMATS } from './formats/index.js';
-export { createRng, hashString } from './rng.js';
+export { createRng, hashString } from '@logomarks/image-effects/rng';
 export { LAYERS as layers } from './layers.js';
 export { extractPalette } from './extract.js';
 export { RISO_INKS } from './print.js';
-export { EFFECTS, EFFECT_OPTIONS } from './effects/index.js';
-export { rasterize } from './raster/index.js';
+export { EFFECTS, EFFECT_OPTIONS } from '@logomarks/image-effects';
+export { rasterize } from '@logomarks/image-effects/raster';
 export { lint } from './lint/index.js';
 export { kit, KIT_FORMATS } from './kit/index.js';
-export { valueAt } from './animate/index.js';
+export { valueAt, MOTION_PRESETS } from './animate/index.js';

package/src/inter-data.js

@@ -1,7 +1,7 @@
 // Generated by scripts/generate.mjs from fonts/*.woff. Do not edit.
 // Inter is © The Inter Project Authors, SIL Open Font License 1.1 (fonts/OFL.txt).
 
-import { fromBase64 } from './platform/bytes.js';
+import { fromBase64 } from './platform/index.js';
 
 /** @type {Record<number, string>} */
 const DATA = {

package/src/json-recipe.js

@@ -55,15 +55,16 @@
 
 import { readTextSync, node } from './platform/index.js';
 import { readableText } from '@arraypress/color-utils';
-import { createRng } from './rng.js';
-import { len, ANCHORS } from './geometry.js';
-import { toHex, mixOklab, mixOklch, onBackground, gradientAt } from './color.js';
+import { createRng } from '@logomarks/image-effects/rng';
+import { len } from '@logomarks/image-effects/length';
+import { ANCHORS } from './geometry.js';
+import { toHex, mixOklab, mixOklch, onBackground, gradientAt } from '@logomarks/image-effects/color';
 import { LAYERS, toneColor } from './layers.js';
-import { LAYER_OPTIONS, COMMON } from './layer-options.js';
-import { EFFECT_OPTIONS, EFFECT_COMMON } from './effects/options.js';
-import { MASK_GRADIENTS } from './effects/mask.js';
+import { LAYER_OPTIONS, COMMON, MOTION_OPTIONS } from './layer-options.js';
+import { EFFECT_OPTIONS, EFFECT_COMMON, MASK_GRADIENTS } from '@logomarks/image-effects';
 import { shapesOnly } from './layers/svg.js';
 import { LAYOUT_FIELDS } from './type/layout-ref.js';
+import { MOTION_PRESETS } from './animate/timing.js';
 
 /** Options every recipe can read without declaring them. */
 const CONTENT = ['title', 'label', 'icon', 'image', 'name', 'mark', 'photo', 'cutout', 'date', 'dates', 'time', 'venue', 'address', 'lines', 'lineup', 'tracklist', 'price', 'meta', 'page'];
@@ -181,7 +182,7 @@ export function loadRecipe(path) {
  * @property {Record<string, unknown>} params
  * @property {Record<string, unknown>} vars
  * @property {any} c - The recipe context.
- * @property {() => import('./rng.js').Rng} rng - The current stream.
+ * @property {() => import('@logomarks/image-effects/rng').Rng} rng - The current stream.
  */
 
 /**
@@ -546,6 +547,8 @@ export function validate(json) {
       if (!Object.hasOwn(known, k)) fail(`${path}.${k}`, `"${layer.type}" layers have no option "${k}" (${Object.keys(known).join(', ')})`);
       if (k === 'effects') {
         checkEffects(`${path}.effects`, v);
+      } else if (k === 'motion') {
+        checkMotion(`${path}.motion`, v);
       } else if (NESTED.includes(k) && Array.isArray(v) && v.every((x) => isPlain(x) && typeof x.type === 'string')) {
         v.forEach((x, j) => checkLayer(`${path}.${k}[${j}]${x.id ? ` (${x.id})` : ''}`, x));
       } else if (k === 'layer' && isPlain(v) && typeof v.type === 'string') {
@@ -583,6 +586,19 @@ export function validate(json) {
       }
     });
   };
+  // Motion: known presets and options (values are checked as values).
+  const checkMotion = (/** @type {string} */ path, /** @type {any} */ v) => {
+    (Array.isArray(v) ? v : [v]).forEach((m, i) => {
+      const at = Array.isArray(v) ? `${path}[${i}]` : path;
+      const preset = typeof m === 'string' ? m : m?.preset;
+      if (typeof preset === 'string' && !/[{$@]/.test(preset) && !Object.hasOwn(MOTION_PRESETS, preset)) fail(at, `unknown motion preset "${preset}" (${Object.keys(MOTION_PRESETS).join(', ')})`);
+      if (!isPlain(m)) return checkValue(at, m);
+      for (const [k, x] of Object.entries(m)) {
+        if (!Object.hasOwn(MOTION_OPTIONS, k)) fail(`${at}.${k}`, `motions have no option "${k}" (${Object.keys(MOTION_OPTIONS).join(', ')})`);
+        checkValue(`${at}.${k}`, x);
+      }
+    });
+  };
   const checkEffectMask = (/** @type {string} */ path, /** @type {any} */ m) => {
     const keys = ['gradient', 'from', 'to', 'center', 'angle', 'aspect', 'invert', 'ease', 'layers'];
     for (const k of Object.keys(m)) if (!keys.includes(k)) fail(`${path}.${k}`, `unknown mask option (${keys.join(', ')})`);

package/src/layer-options.js

@@ -49,8 +49,28 @@ export const LAYER_OPTIONS = {
 export const COMMON = {
   opacity: '0–1.', blend: 'A CSS mix-blend-mode.', seed: "This layer's own random stream.",
   transform: '{ translate, rotate, scale, skewX, skewY, mirror: x | y, origin } (on text, a case keyword is still the case).',
-  effects: '[{ kind, mask, colorSpace, … }]: filters, pixel effects and copies, in order (see the README\'s Effects table; kinds in EFFECTS).',
+  effects: '[{ kind, mask, colorSpace, … }]: filters, pixel effects and copies, in order (see docs/effects.md; kinds in EFFECTS).',
   mask: 'Layers whose luminance masks this one (white shows).', knockout: 'Layers cut out of this one.', clip: 'Layers this one shows only inside.',
   area: 'trim | safe | bleed, or { x, y, width, height } fractions: draw the layer in that box.',
+  motion: 'A motion, a preset name (drift | spin | breathe | blink | marquee), or a list: plays in the SVG as CSS keyframes (see MOTION_OPTIONS).',
+};
+
+/** @type {Record<string, string>} A motion's options. */
+export const MOTION_OPTIONS = {
+  preset: 'drift | spin | breathe | blink | marquee: its defaults, under whatever else is set.',
+  translate: '[x, y] to move by (px in the layer\'s grid, "%" or lengths), or a list of points [[0, 0], [x, y], …].',
+  path: 'Travel a path from where the layer is: path data, { d }, or a text-path kind ({ kind: circle | ellipse | arc | wave, … }).',
+  rotate: 'Degrees to turn to, or a list of angles.',
+  scale: 'A factor to grow to, or a list.', scaleX: 'Horizontal factor, or a list.', scaleY: 'Vertical factor, or a list.',
+  opacity: '0–1 to fade to (times the layer\'s own), or a list.',
+  origin: '[x, y] the turn and scale are about (px, "%" or lengths). Default the centre.',
+  vary: 'Layer options as lists of stops ({ axes: { wdth: [62, 150] } }): drawn frame by frame, played as outline morphs.',
+  frames: 'vary: frames drawn per stop. Default 12.',
+  marquee: 'true: text on a path runs along it, one repeat of its words per duration (they must repeat).',
+  duration: 'Seconds per iteration. Default 2 (or the preset\'s).',
+  delay: 'Seconds before it starts; negative starts it part-way.',
+  easing: 'linear | ease | in | out | inOut | step, or [x1, y1, x2, y2]: between each pair of stops.',
+  direction: 'normal | reverse | alternate | alternate-reverse',
+  iterations: 'A number, or "infinite" (the default).',
 };
 

package/src/layers/barcode.js

@@ -4,9 +4,9 @@
  * @module layers/barcode
  */
 
-import { attrs, num } from '../svg.js';
-import { len } from '../geometry.js';
-import { toHex } from '../color.js';
+import { attrs, num } from '@logomarks/image-effects/svg';
+import { len } from '@logomarks/image-effects/length';
+import { toHex } from '@logomarks/image-effects/color';
 import { faceFor, setLine } from '../type/line.js';
 import { pos, wrap, contentOf } from './util.js';
 import { code128 } from './code128.js';

package/src/layers/geometry.js

@@ -6,11 +6,11 @@
  * @module layers/geometry
  */
 
-import { attrs, num } from '../svg.js';
-import { len } from '../geometry.js';
+import { attrs, num } from '@logomarks/image-effects/svg';
+import { len } from '@logomarks/image-effects/length';
 import { pos } from './util.js';
 import { cutPath } from '../formats/cut.js';
-import { invert, apply } from '../effects/transform.js';
+import { invert, apply } from '../render/transform.js';
 
 
 /**
@@ -18,7 +18,7 @@ import { invert, apply } from '../effects/transform.js';
  *
  * @param {[number, number]} a @param {[number, number]} b
  * @param {{ kind: string, size: number, step: number }} e
- * @param {import('../rng.js').Rng} rng
+ * @param {import('@logomarks/image-effects/rng').Rng} rng
  * @returns {[number, number][]} Points from a (exclusive) to b (inclusive).
  */
 function edgePoints(a, b, e, rng) {
@@ -211,7 +211,7 @@ export function geometry(s, ctx) {
  *
  * @param {{ x: number, y: number, width: number, height: number, cut?: any, mm?: number } | undefined} cut - Trim box and cut, canvas px.
  * @param {number} outset - Grow (or, negative, shrink) the outline, in the layer's units.
- * @param {import('../effects/transform.js').Affine | undefined} matrix - Layer units to canvas px.
+ * @param {import('../render/transform.js').Affine | undefined} matrix - Layer units to canvas px.
  * @param {{ width: number, height: number }} canvas
  * @returns {{ d: string, box: { x: number, y: number, width: number, height: number } }}
  */

package/src/layers/perforation.js

@@ -4,9 +4,9 @@
  * @module layers/perforation
  */
 
-import { attrs, num } from '../svg.js';
-import { len } from '../geometry.js';
-import { toHex } from '../color.js';
+import { attrs, num } from '@logomarks/image-effects/svg';
+import { len } from '@logomarks/image-effects/length';
+import { toHex } from '@logomarks/image-effects/color';
 import { pos, wrap } from './util.js';
 
 

package/src/layers/repeat.js

@@ -19,8 +19,8 @@
  * @module layers/repeat
  */
 
-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 { pos } from './util.js';
 import { fill, evaluate } from './expr.js';
 

package/src/layers/shape.d.ts

@@ -1,9 +1,9 @@
 // The `shape` layer.
 import type { Color, Length, BaseLayer, Anchor } from '../index.js';
 import type { RenderContext, Markup } from '../render/context.js';
-import type { Paint } from '../effects/paint.js';
+import type { Paint } from '../paint/index.js';
 
-/** One exact shape (see the README's `shape` table). */
+/** One exact shape (see the `shape` row in docs/layers.md). */
 export interface ShapeSpec {
   kind?: 'rect' | 'circle' | 'ellipse' | 'line' | 'polygon' | 'polyline' | 'star' | 'burst' | 'scallop' | 'rays' | 'ring' | 'sector' | 'arch' | 'wave' | 'path' | 'cut';
   x?: Length | `${number}%`; y?: Length | `${number}%`; width?: Length | `${number}%`; height?: Length | `${number}%`;

package/src/layers/shape.js

@@ -4,11 +4,11 @@
  * @module layers/shape
  */
 
-import { attrs, num } from '../svg.js';
-import { len } from '../geometry.js';
-import { toHex } from '../color.js';
-import { paint } from '../effects/paint.js';
-import { presetStrokes } from '../effects/paint-presets.js';
+import { attrs, num } from '@logomarks/image-effects/svg';
+import { len } from '@logomarks/image-effects/length';
+import { toHex } from '@logomarks/image-effects/color';
+import { paint } from '../paint/index.js';
+import { presetStrokes } from '../paint/presets.js';
 import { wrap, pos } from './util.js';
 import { geometry } from './geometry.js';
 import { soften } from './soft.js';

package/src/layers/soft.js

@@ -6,8 +6,8 @@
  * @module layers/soft
  */
 
-import { attrs, num } from '../svg.js';
-import { toBase64 } from '../platform/bytes.js';
+import { attrs, num } from '@logomarks/image-effects/svg';
+import { toBase64 } from '../platform/index.js';
 
 /**
  * Blur markup by `sigma` (px in the layer's units). In `renderImage`, the markup

package/src/layers/svg.js

@@ -4,11 +4,10 @@
  * @module layers/svg
  */
 
-import { attrs, esc, num } from '../svg.js';
+import { attrs, esc, num } from '@logomarks/image-effects/svg';
 import { unit } from '../geometry.js';
 import { pos, wrap } from './util.js';
-import { expandDropShadows } from '../effects/drop-shadow.js';
-import { filterReach } from '../effects/region.js';
+import { expandDropShadows, filterReach } from '@logomarks/image-effects';
 
 
 /**

package/src/layers/table.js

@@ -4,9 +4,9 @@
  * @module layers/table
  */
 
-import { attrs, num } from '../svg.js';
-import { len } from '../geometry.js';
-import { toHex } from '../color.js';
+import { attrs, num } from '@logomarks/image-effects/svg';
+import { len } from '@logomarks/image-effects/length';
+import { toHex } from '@logomarks/image-effects/color';
 import { faceFor, setLine } from '../type/line.js';
 import { pos, wrap, contentOf } from './util.js';
 

package/src/layers/tear.d.ts

@@ -1,7 +1,7 @@
 // The `tear` layer.
 import type { Color, Length, BaseLayer, Anchor } from '../index.js';
 import type { RenderContext, Markup } from '../render/context.js';
-import type { Paint } from '../effects/paint.js';
+import type { Paint } from '../paint/index.js';
 
 export interface TearLayer extends BaseLayer {
   type: 'tear';

package/src/layers/tear.js

@@ -4,10 +4,10 @@
  * @module layers/tear
  */
 
-import { attrs, num } from '../svg.js';
-import { len } from '../geometry.js';
-import { toHex } from '../color.js';
-import { paint } from '../effects/paint.js';
+import { attrs, num } from '@logomarks/image-effects/svg';
+import { len } from '@logomarks/image-effects/length';
+import { toHex } from '@logomarks/image-effects/color';
+import { paint } from '../paint/index.js';
 import { pos, wrap } from './util.js';
 
 

package/src/layers/texture.js

@@ -4,9 +4,9 @@
  * @module layers/texture
  */
 
-import { attrs, num } from '../svg.js';
-import { len } from '../geometry.js';
-import { toHex } from '../color.js';
+import { attrs, num } from '@logomarks/image-effects/svg';
+import { len } from '@logomarks/image-effects/length';
+import { toHex } from '@logomarks/image-effects/color';
 import { pos, wrap } from './util.js';
 
 

package/src/layers/util.js

@@ -5,8 +5,8 @@
  * @module layers/util
  */
 
-import { attrs, esc } from '../svg.js';
-import { len } from '../geometry.js';
+import { attrs, esc } from '@logomarks/image-effects/svg';
+import { len } from '@logomarks/image-effects/length';
 
 /**
  * A coordinate: px as a number, `'50%'` of the canvas along `axis`, or a
@@ -22,6 +22,19 @@ export function pos(v, axis, canvas) {
   return len(/** @type {any} */ (v), canvas, 0);
 }
 
+/**
+ * Opacity and blend-mode attributes shared by every layer.
+ *
+ * @param {{ opacity?: number, blend?: string }} layer - The layer.
+ * @returns {Record<string, string | number | undefined>} Attributes for the layer's group.
+ */
+export function layerAttrs(layer) {
+  return {
+    opacity: layer.opacity != null && layer.opacity < 1 ? Math.max(0, layer.opacity) : undefined,
+    style: layer.blend && layer.blend !== 'normal' ? `mix-blend-mode:${layer.blend}` : undefined,
+  };
+}
+
 /**
  * Wrap markup in a group with the layer's `opacity` and `blend` (only when
  * it has them).

package/src/layers.js

@@ -14,11 +14,12 @@
  * @module layers
  */
 
-import { loadBytes } from './platform/index.js';
-import { toBase64, latin1, utf8 } from './platform/bytes.js';
-import { attrs, esc, layerAttrs, num } from './svg.js';
-import { len, place, anchorAlign, unit, regionPx } from './geometry.js';
-import { toHex, mixOklab, toOklch, fromOklch } from './color.js';
+import { loadBytes, toBase64 } from './platform/index.js';
+import { attrs, esc, num } from '@logomarks/image-effects/svg';
+import { imageMime } from '@logomarks/image-effects';
+import { len } from '@logomarks/image-effects/length';
+import { place, anchorAlign, unit, regionPx } from './geometry.js';
+import { toHex, mixOklab, toOklch, fromOklch } from '@logomarks/image-effects/color';
 import { harfbuzz, loadFont, pickFont } from './fonts.js';
 import { layout, runPath, caseText } from './text.js';
 import { resolveIcon, parseSvgIcon } from './icons.js';
@@ -29,8 +30,8 @@ import { ink, dither, contour, waveform, tiles, rule } from './print.js';
 import { typeset, wantsType } from './type/index.js';
 import { recordLayout } from './type/layout-ref.js';
 import { shape, svg, table, barcode, perforation, tear, texture } from './layers/index.js';
-import { pos } from './layers/util.js';
-import { paint } from './effects/paint.js';
+import { pos, layerAttrs } from './layers/util.js';
+import { paint } from './paint/index.js';
 import { imageSize } from './lint/image-size.js';
 
 /**
@@ -41,7 +42,7 @@ import { imageSize } from './lint/image-size.js';
  * @property {number} height - Canvas height in px.
  * @property {{ width: number, height: number }} canvas - The same, as an object.
  * @property {import('./index.js').Palette} palette - The resolved palette.
- * @property {import('./rng.js').Rng} rng - This layer's own random stream.
+ * @property {import('@logomarks/image-effects/rng').Rng} rng - This layer's own random stream.
  * @property {string} id - A unique id prefix for this layer's defs.
  * @property {import('./index.js').FontSource[]} fonts - Available fonts (Inter last).
  * @property {any} [sharp] - The `sharp` module, when available.
@@ -421,7 +422,7 @@ export async function image(layer, ctx) {
   const fit = layer.fit ?? 'cover';
   const focus = layer.focus ?? 'center';
   let bytes = typeof layer.src === 'string' || layer.src instanceof URL ? await readSource(layer.src) : await loadBytes(layer.src, 'image');
-  let mime = sniff(bytes);
+  let mime = imageMime(bytes);
   let preserve = fit === 'stretch' ? 'none' : `${alignFor(focus)} ${fit === 'contain' ? 'meet' : 'slice'}`;
   let sharpBlurred = false;
 
@@ -548,23 +549,6 @@ async function readSource(src) {
   return loadBytes(src, 'image');
 }
 
-/**
- * Sniff an image's MIME type from its first bytes.
- *
- * @param {Uint8Array} b - Image bytes.
- * @returns {string | undefined} The MIME type.
- */
-export function sniff(b) {
-  if (b[0] === 0x89 && b[1] === 0x50) return 'image/png';
-  if (b[0] === 0xff && b[1] === 0xd8) return 'image/jpeg';
-  if (b[0] === 0x47 && b[1] === 0x49) return 'image/gif';
-  const head = latin1(b.subarray(0, 32));
-  if (head.startsWith('RIFF') && head.slice(8, 12) === 'WEBP') return 'image/webp';
-  if (head.slice(4, 12) === 'ftypavif' || head.slice(4, 12) === 'ftypavis') return 'image/avif';
-  if (/^\s*(<\?xml|<svg)/i.test(utf8(b.subarray(0, 256)))) return 'image/svg+xml';
-  return undefined;
-}
-
 // ---------------------------------------------------------------------------
 // Texture
 // ---------------------------------------------------------------------------

package/src/{effects/paint.js → paint/index.js}

@@ -4,13 +4,13 @@
  * radial fields with `rx`/`ry`), a `tile` pattern (checker, stripes, dots,
  * grid or a custom tile), or a named preset (`'chrome'`).
  *
- * @module effects/paint
+ * @module paint
  */
 
-import { attrs, num } from '../svg.js';
-import { len } from '../geometry.js';
-import { toHex } from '../color.js';
-import { PRESETS } from './paint-presets.js';
+import { attrs, num } from '@logomarks/image-effects/svg';
+import { len } from '@logomarks/image-effects/length';
+import { toHex } from '@logomarks/image-effects/color';
+import { PRESETS } from './presets.js';
 import { tile } from './tile.js';
 
 /**

package/src/{effects/paint-presets.d.ts → paint/presets.d.ts}

@@ -1,5 +1,5 @@
 // Named paints: chrome, steel and gold, painted as a reflected horizon.
-import type { GradientPaint } from './paint.js';
+import type { GradientPaint } from './index.js';
 import type { Color, Length } from '../index.js';
 
 /** Paint presets, by name. */

package/src/{effects/paint-presets.js → paint/presets.js}

@@ -4,7 +4,7 @@
  * horizon a little past the middle, warm ground below it, and a light
  * bounce at the very bottom. Pair it with a light keyline (`strokes`).
  *
- * @module effects/paint-presets
+ * @module paint/presets
  */
 
 /** Paint presets, by name. A paint `{ preset, …fields }` overrides any of them. */