@arraypress/covers 1.0.0 → 1.3.1

package/src/formats/print.d.ts

@@ -0,0 +1,25 @@
+// Print set-up: sizes at a dpi, bleed, safe margin, crop marks, die lines.
+import type { Zones, FormatName, Format } from './presets.js';
+
+/** Print set-up, px. */
+export interface PrintInfo {
+  dpi: number;
+  unit: 'mm' | 'in';
+  trimWidth: number;
+  trimHeight: number;
+  bleed: number;
+  safe: number;
+  slug: number;
+  cropMarks: boolean;
+  cut?: import('./cut.js').Cut;
+  cutLine: boolean;
+  mm: number;
+}
+
+
+/** A length in a unit as px at a dpi. */
+export function toPx(v: number, unit: string, dpi: number): number;
+/** A cover's `format` as its canvas, print set-up and zones (undefined without one). */
+export function resolveFormat(o: { format?: FormatName | (Partial<Format> & { width: number; height: number }); width?: number; height?: number; dpi?: number; bleed?: number | false; safe?: number; cropMarks?: boolean; cutLine?: boolean; cut?: import('./cut.js').Cut }): { width: number; height: number; format?: string; zones?: Zones; print?: PrintInfo } | undefined;
+/** Crop marks (slug coordinates) and the die line (bleed-box coordinates). */
+export function printMarks(p: PrintInfo, w: number, h: number): { marks: string; cut: string };

package/src/formats/print.js

@@ -0,0 +1,117 @@
+/**
+ * Named formats: release covers, social posts, flyers and print stationery,
+ * alongside `aspect`.
+ *
+ * Screen formats are pixel sizes. Print formats are a trim size in
+ * millimetres or inches, rendered at `dpi` (300 by default) with a bleed
+ * (3 mm by default) and a safe area inside the trim; `cropMarks: true`
+ * adds a slug with crop marks round the bleed. The layers are drawn on the
+ * bleed box (trim plus bleed on every side), so backgrounds run off the
+ * edge, and text and icons keep their default margins inside the safe area.
+ *
+ * @module formats/print
+ */
+
+import { FORMATS } from './presets.js';
+import { scaleZones } from './zones.js';
+import { cutPath } from './cut.js';
+
+/** @param {number} v @param {string} unit @param {number} dpi @returns {number} px */
+export function toPx(v, unit, dpi) {
+  return unit === 'mm' ? (v / 25.4) * dpi : unit === 'in' ? v * dpi : v;
+}
+
+/**
+ * The print set-up of a cover, in px.
+ *
+ * @typedef {object} PrintInfo
+ * @property {number} dpi
+ * @property {'mm' | 'in'} unit - The format's unit.
+ * @property {number} trimWidth - px.
+ * @property {number} trimHeight - px.
+ * @property {number} bleed - px on each side.
+ * @property {number} safe - px inside the trim on each side.
+ * @property {number} slug - px of slug outside the bleed (crop marks), 0 without.
+ * @property {boolean} cropMarks
+ * @property {import('./cut.js').Cut} [cut] - Die-cut shape.
+ * @property {boolean} cutLine - Draw the die line.
+ * @property {number} mm - px per millimetre.
+ */
+
+/**
+ * Resolve a cover's `format` (a name or a custom `{ width, height, unit }`)
+ * to its canvas and print set-up.
+ *
+ * @param {any} o - Cover options: `format`, `dpi`, `bleed` (mm, or `false`), `safe` (mm), `cropMarks`, `cutLine`.
+ * @returns {{ width: number, height: number, print?: PrintInfo, format?: string, zones?: import('./index.js').Zones } | undefined}
+ */
+export function resolveFormat(o) {
+  if (o.format == null) return undefined;
+  const f = typeof o.format === 'string' ? FORMATS[o.format] : { unit: 'px', ...o.format };
+  if (!f) throw new RangeError(`Unknown format "${o.format}". Formats: ${Object.keys(FORMATS).join(', ')}`);
+  const name = typeof o.format === 'string' ? o.format : undefined;
+  if (f.unit === 'px') {
+    // A screen format: one side given scales the zones and the other side.
+    const k = o.width && !o.height ? o.width / f.width : 1;
+    const zones = f.zones ? scaleZones(f.zones, k) : undefined;
+    return { width: Math.round(f.width * k), height: Math.round(f.height * k), format: name, zones };
+  }
+  const dpi = o.dpi ?? 300;
+  const mm = dpi / 25.4;
+  const trimWidth = Math.round(toPx(f.width, f.unit, dpi));
+  const trimHeight = Math.round(toPx(f.height, f.unit, dpi));
+  const bleed = o.bleed === false ? 0 : Math.round((o.bleed ?? f.bleed ?? 3) * mm);
+  const safe = Math.round((o.safe ?? f.safe ?? 3) * mm);
+  const cropMarks = Boolean(o.cropMarks);
+  const slug = cropMarks ? Math.round(Math.max(6, (o.bleed === false ? 0 : o.bleed ?? f.bleed ?? 3) + 3) * mm) : 0;
+  return {
+    width: trimWidth + 2 * bleed,
+    height: trimHeight + 2 * bleed,
+    format: name,
+    print: { dpi, unit: /** @type {'mm' | 'in'} */ (f.unit), trimWidth, trimHeight, bleed, safe, slug, cropMarks, cut: o.cut ?? f.cut, cutLine: Boolean(o.cutLine), mm },
+  };
+}
+
+/**
+ * Crop marks in the slug, a die line, and the document's outer size.
+ *
+ * @param {PrintInfo} p
+ * @param {number} w - Bleed-box width, px.
+ * @param {number} h - Bleed-box height, px.
+ * @returns {{ marks: string, cut: string }} Markup: marks in slug coordinates (the bleed box starts at `slug`), and the die line in bleed-box coordinates.
+ */
+export function printMarks(p, w, h) {
+  const n = (/** @type {number} */ v) => Math.round(v * 100) / 100;
+  let marks = '';
+  if (p.cropMarks) {
+    const s = p.slug;
+    const b = p.bleed;
+    const len = s - b - p.mm;
+    const gap = b + p.mm;
+    const stroke = Math.max(0.5, 0.25 * p.mm);
+    const xs = [s + b, s + w - b];
+    const ys = [s + b, s + h - b];
+    let d = '';
+    for (const x of xs) for (const y of ys) {
+      const dx = x < s + w / 2 ? -1 : 1;
+      const dy = y < s + h / 2 ? -1 : 1;
+      d += `M${n(x + dx * gap)} ${n(y)}h${n(dx * len)}M${n(x)} ${n(y + dy * gap)}v${n(dy * len)}`;
+    }
+    marks = `<path d="${d}" fill="none" stroke="#000" stroke-width="${n(stroke)}"/>`;
+  }
+  let cut = '';
+  if (p.cutLine) {
+    const x = p.bleed;
+    const y = p.bleed;
+    const cw = p.trimWidth;
+    const ch = p.trimHeight;
+    const custom = p.cut && typeof p.cut === 'object';
+    const shape = custom
+      ? `<path d="${cutPath(p.cut, { x, y, width: cw, height: ch }, p.mm).map((g) => g.cmd + g.pts.map(n).join(' ')).join('')}"`
+      : p.cut === 'circle'
+      ? `<ellipse cx="${n(x + cw / 2)}" cy="${n(y + ch / 2)}" rx="${n(cw / 2)}" ry="${n(ch / 2)}"`
+      : `<rect x="${n(x)}" y="${n(y)}" width="${n(cw)}" height="${n(ch)}"${p.cut === 'rounded' ? ` rx="${n(3 * p.mm)}"` : ''}`;
+    cut = `${shape} fill="none" stroke="#ec008c" stroke-width="${n(Math.max(0.5, 0.25 * p.mm))}" id="CutContour"/>`;
+  }
+  return { marks, cut };
+}

package/src/formats/zones.d.ts

@@ -0,0 +1,10 @@
+// Safe zones.
+import type { Zones } from './presets.js';
+import type { PrintInfo } from './print.js';
+
+/** A preview overlay of the zones: safe area dashed green, covered areas red, crops blue. */
+export function zonesOverlay(z: Zones, w: number, h: number): string;
+/** Zones scaled by `k`. */
+export function scaleZones(z: Zones, k: number): Zones;
+/** A cover's safe box, px. */
+export function safeBox(c: { width: number; height: number; print?: PrintInfo; zones?: Zones }): { x: number; y: number; width: number; height: number } | undefined;

package/src/formats/zones.js

@@ -0,0 +1,64 @@
+/**
+ * Safe zones: the box layouts fit into, scaling, and a preview overlay.
+ *
+ * @module formats/zones
+ */
+
+/**
+ * A preview overlay of a format's zones: the safe area dashed, covered
+ * areas tinted red, device crops outlined.
+ *
+ * @param {import('./index.js').Zones} z
+ * @param {number} w @param {number} h
+ * @returns {string} Markup.
+ */
+export function zonesOverlay(z, w, h) {
+  const n = (/** @type {number} */ v) => Math.round(v * 100) / 100;
+  const sw = n(Math.max(1, Math.min(w, h) / 360));
+  let out = '';
+  for (const c of z.crops ?? []) {
+    const [x, y, cw, ch] = c.rect;
+    if (c.name === 'circle') {
+      out += `<path d="M0 0H${n(w)}V${n(h)}H0ZM${n(x)} ${n(y + ch / 2)}a${n(cw / 2)} ${n(ch / 2)} 0 1 0 ${n(cw)} 0a${n(cw / 2)} ${n(ch / 2)} 0 1 0 ${n(-cw)} 0Z" fill="#000" fill-opacity="0.45" fill-rule="evenodd"/>`;
+    } else {
+      out += `<rect x="${n(x)}" y="${n(y)}" width="${n(cw)}" height="${n(ch)}" fill="none" stroke="#00b3ff" stroke-width="${sw}" stroke-dasharray="${n(sw * 2)} ${n(sw * 3)}"/>`;
+    }
+  }
+  for (const a of z.avoid ?? []) {
+    if (a.circle) out += `<circle cx="${n(a.circle[0])}" cy="${n(a.circle[1])}" r="${n(a.circle[2])}" fill="#ff2d55" fill-opacity="0.35" stroke="#ff2d55" stroke-width="${sw}"/>`;
+    if (a.rect) out += `<rect x="${n(a.rect[0])}" y="${n(a.rect[1])}" width="${n(a.rect[2])}" height="${n(a.rect[3])}" fill="#ff2d55" fill-opacity="0.3"/>`;
+  }
+  const [x, y, sw2, sh] = z.safe;
+  out += `<rect x="${n(x)}" y="${n(y)}" width="${n(sw2)}" height="${n(sh)}" fill="none" stroke="#18e05a" stroke-width="${n(sw * 2)}" stroke-dasharray="${n(sw * 8)} ${n(sw * 5)}"/>`;
+  return `<g pointer-events="none">${out}</g>`;
+}
+
+/**
+ * @param {import('./index.js').Zones} z @param {number} k
+ * @returns {import('./index.js').Zones}
+ */
+export function scaleZones(z, k) {
+  if (k === 1) return z;
+  const r = (/** @type {number[]} */ a) => /** @type {any} */ (a.map((v) => Math.round(v * k)));
+  return { ...z, safe: r(z.safe), avoid: z.avoid?.map((a) => ({ ...a, rect: a.rect && r(a.rect), circle: a.circle && r(a.circle) })), crops: z.crops?.map((c) => ({ ...c, rect: r(c.rect) })) };
+}
+
+
+/**
+ * The safe box of a cover, px: a format's safe zone, or a print piece's
+ * trim less its safe margin. Undefined for a plain canvas.
+ *
+ * @param {{ width: number, height: number, print?: import('./index.js').PrintInfo, zones?: import('./index.js').Zones }} c
+ * @returns {{ x: number, y: number, width: number, height: number } | undefined}
+ */
+export function safeBox(c) {
+  if (c.zones) {
+    const [x, y, width, height] = c.zones.safe;
+    return { x, y, width, height };
+  }
+  if (c.print) {
+    const i = c.print.bleed + c.print.safe;
+    return { x: i, y: i, width: c.width - 2 * i, height: c.height - 2 * i };
+  }
+  return undefined;
+}

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,36 +75,8 @@ 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. */
-const ANCHORS = Object.freeze({
+export const ANCHORS = Object.freeze({
   'top-left': [0, 0], top: [0.5, 0], 'top-right': [1, 0],
   left: [0, 0.5], center: [0.5, 0.5], right: [1, 0.5],
   'bottom-left': [0, 1], bottom: [0.5, 1], 'bottom-right': [1, 1],

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,12 +14,7 @@
  * @module icons
  */
 
-import { readFileSync } from 'node:fs';
-import { createRequire } from 'node:module';
-import { join } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-const require = createRequire(import.meta.url);
+import { node, settings, loadBytes, utf8 } from './platform/index.js';
 
 /** @type {Map<string, IconSet>} */
 const sets = new Map();
@@ -72,17 +67,53 @@ function loadSet(prefix) {
   let set = sets.get(prefix);
   if (set) return set;
   const pkg = `@iconify-json/${prefix}`;
+  const mod = node('module');
+  const fs = node('fs');
+  const path = node('path');
+  const url = node('url');
   let file;
   try {
-    file = join(require.resolve(`${pkg}/package.json`, { paths: [process.cwd(), fileURLToPath(new URL('.', import.meta.url))] }), '..', 'icons.json');
+    if (!mod || !fs) throw new Error('no node');
+    const require = mod.createRequire(import.meta.url);
+    const here = String(import.meta.url).startsWith('file:') ? [url.fileURLToPath(new URL('.', import.meta.url))] : [];
+    file = path.join(require.resolve(`${pkg}/package.json`, { paths: [/** @type {any} */ (globalThis).process.cwd(), ...here] }), '..', 'icons.json');
   } catch {
-    throw new Error(`Icon set "${prefix}" is not available. Install ${pkg}, or pass the set to registerIcons().`);
+    throw new Error(`Icon set "${prefix}" is not available. Install ${pkg}, or pass the set to registerIcons()${mod ? '' : ' (or configure({ icons }) with a URL to load sets from)'}.`);
   }
-  set = /** @type {IconSet} */ (JSON.parse(readFileSync(file, 'utf8')));
+  set = /** @type {IconSet} */ (JSON.parse(fs.readFileSync(file, 'utf8')));
   sets.set(prefix, set);
   return set;
 }
 
+/**
+ * Make sure the icon sets these names need are loaded: from Node's
+ * `node_modules`, or (in a browser or Worker) from `configure({ icons })`,
+ * a URL template like `'https://cdn.jsdelivr.net/npm/@iconify-json/{prefix}/icons.json'`
+ * or a function of the prefix. Names whose set can't be found are left for
+ * {@link resolveIcon} to report.
+ *
+ * @param {Iterable<string>} names - Candidate icon names (`prefix:name`).
+ * @returns {Promise<void>}
+ */
+export async function preloadIcons(names) {
+  const prefixes = new Set();
+  for (const n of names) {
+    const m = /^([a-z0-9-]+):([a-z0-9-]+)$/i.exec(n);
+    if (m && !sets.has(m[1])) prefixes.add(m[1]);
+  }
+  for (const prefix of prefixes) {
+    if (node('module')) {
+      try { loadSet(prefix); } catch { /* reported when drawn */ }
+      continue;
+    }
+    const where = typeof settings.icons === 'function' ? settings.icons(prefix) : settings.icons?.replace('{prefix}', prefix);
+    if (!where) continue;
+    try {
+      registerIcons(JSON.parse(utf8(await loadBytes(where, 'icons'))));
+    } catch { /* reported when drawn */ }
+  }
+}
+
 /**
  * Resolve an Iconify name (`'prefix:name'`) to its markup and viewBox.
  *
@@ -128,6 +159,8 @@ export function resolveIcon(name) {
  */
 export function parseSvgIcon(svg) {
   const open = svg.match(/<svg\b[^>]*>/i);
+  // Bare markup (a mark's paths on a 512 grid): wrap it.
+  if (!open && /^\s*<(path|g|circle|rect|polygon|ellipse|line|polyline)\b/i.test(svg)) return parseSvgIcon(`<svg viewBox="0 0 512 512">${svg}</svg>`);
   if (!open) throw new Error('Icon SVG must contain an <svg> element');
   const tag = open[0];
   const vb = tag.match(/viewBox\s*=\s*["']([^"']+)["']/i);