@arraypress/covers 1.0.0 → 1.3.1

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/builtins.js

@@ -0,0 +1,4 @@
+// Generated by scripts/generate.mjs from recipes/*.json. Do not edit.
+
+/** The built-in recipe documents, by name. */
+export const BUILTIN_JSON = {"aurora":{"$schema":"../schema/recipe.schema.json","name":"aurora","description":"Full-bleed sweeps of the palette's colours, sometimes folded or streaked, with grain (the openai.com/news look). A title sets in the corner only when given.","layers":[{"id":"bg","type":"solid"},{"id":"mesh","type":"mesh","count":4,"blur":"11vmax","size":[0.45,0.8],"streak":1.8,"tone":{"if":"title","then":{"if":{"mode":"dark"},"then":{"l":[0.34,0.5],"c":[0.12,0.22]},"else":{"l":[0.66,0.82],"c":[0.13,0.2]}},"else":{"l":[0.55,0.85],"c":[0.12,0.22]}},"fold":{"if":"title","then":false,"else":{"pick":[false,false,true]}},"streaks":{"if":"title","then":0,"else":{"pick":[0,0,0,6]}},"hues":{"pick":[2,2,3]},"hueSpan":60},{"id":"grain","type":"grain","amount":0.09,"vary":{"pick":["edges",null]}},{"id":"title","type":"text","when":"title","content":"{title}","anchor":"bottom-left","weight":500,"size":{"mul":["@u",0.066]},"minSize":{"mul":["@u",0.048]},"lineHeight":1.08,"letterSpacing":-0.025,"maxLines":3,"label":{"if":"label","then":{"color":"@text","content":"{label}"}}}]},"bauhaus":{"$schema":"../schema/recipe.schema.json","name":"bauhaus","description":"A Bauhaus grid of quarter circles, half circles, circles, squares and triangles in the palette's colours and the page colour. A shared `series` keeps a family's grid rhythm while each cover's seed fills the cells.","params":{"series":null},"layers":[{"id":"bg","type":"solid"},{"id":"tiles","type":"tiles","series":"{series}","colors":[{"tone":["@accent",{"l":[0.5,0.75],"c":[0.12,0.22]}]},{"tone":["@colors.1",{"l":[0.5,0.75],"c":[0.12,0.22]}]},{"tone":["@colors.2",{"l":[0.5,0.75],"c":[0.12,0.22]}]},"@text"],"ground":"@bg","region":{"if":"title","then":{"x":0,"y":0,"width":1,"height":0.72},"else":{"x":0,"y":0,"width":1,"height":1}}},{"id":"title","type":"text","when":"title","content":"{title}","anchor":"bottom-left","weight":500,"size":{"mul":["@u",0.056]},"minSize":{"mul":["@u",0.042]},"lineHeight":1.08,"letterSpacing":-0.025,"maxLines":2,"label":{"if":"label","then":{"color":"@text","content":"{label}"}}}]},"bigType":{"$schema":"../schema/recipe.schema.json","name":"bigType","description":"The headline is the cover: large, tight, shrinking to fit four lines, with the label in the accent at the top.","vars":{"corner":{"pick":[[1,0],[0,0],[1,1],[0.5,0]]}},"layers":[{"id":"bg","type":"solid"},{"id":"wash","type":"radial","colors":[{"mix":["@bg","@accent",{"if":{"mode":"dark"},"then":0.16,"else":0.12}]},"@bg"],"x":"$corner.0","y":"$corner.1","radius":"110vmax"},{"id":"grain","type":"grain","amount":0.05},{"id":"label","type":"text","when":"label","content":"{label}","anchor":"top-left","size":{"mul":["@u",0.024]},"weight":600,"letterSpacing":0.09,"transform":"uppercase","color":"@accent","maxLines":1,"balance":false},{"id":"title","type":"text","when":"title","content":"{title}","anchor":"bottom-left","weight":600,"size":{"mul":["@u",0.13]},"minSize":{"mul":["@u",0.078]},"lineHeight":0.98,"letterSpacing":-0.045,"maxLines":4}]},"brand":{"$schema":"../schema/recipe.schema.json","name":"brand","description":"A brand on every format: avatars, headers and banners, posts and stories, business cards (front and back), letterhead, compliment slips, tickets, passes and stickers. kit() uses it by default. Options: name, tagline, mark (path markup on a 512 grid), photo, lines (contact or info lines), person and role (cards and passes), ticket (a ticket number), compliments.","pages":["front","back"],"params":{"tagline":""},"layers":[{"id":"bg","type":"solid","color":"@accent","when":{"not":{"any":[{"format":["letterhead","letterhead-us","compliment-slip","badge","lanyard-pass"]},{"all":[{"format":["business-card","business-card-us"]},{"page":"back"}]}]}}},{"id":"bg","type":"solid","color":"@bg","when":{"any":[{"format":["letterhead","letterhead-us","compliment-slip","badge","lanyard-pass"]},{"all":[{"format":["business-card","business-card-us"]},{"page":"back"}]}]}},{"id":"photo","type":"image","src":"{photo}","when":{"all":["photo",{"not":{"format":["avatar","x-avatar","youtube-avatar","sticker","sticker-square","business-card","business-card-us","letterhead","letterhead-us","compliment-slip","badge","lanyard-pass","ticket"]}}]},"effects":[{"kind":"duotone","colors":[{"mix":["@accent","#000000",0.6]},"@accent",{"mix":["@accent","#ffffff",0.65]}]}],"opacity":0.9},{"id":"scrim","type":"linear","angle":180,"colors":["@accent","@accent"],"opacities":[0,0.75],"when":{"all":["photo",{"not":{"format":["avatar","x-avatar","youtube-avatar","sticker","sticker-square","business-card","business-card-us","letterhead","letterhead-us","compliment-slip","badge","lanyard-pass","ticket"]}}]}},{"id":"mark","type":"icon","markup":"{mark}","anchor":"center","size":{"mul":[{"min":["@safeWidth","@safeHeight"]},0.86]},"color":"@onAccent","when":{"all":["mark",{"format":["avatar","x-avatar","youtube-avatar","sticker","sticker-square"]}]}},{"id":"initial","type":"text","content":{"upper":{"slice":["{name}",0,1]}},"anchor":"center","align":"center","size":{"mul":[{"min":["@safeWidth","@safeHeight"]},0.62]},"weight":700,"letterSpacing":0,"color":"@onAccent","when":{"all":[{"not":"mark"},"name",{"format":["avatar","x-avatar","youtube-avatar","sticker","sticker-square"]}]}},{"id":"mark","type":"icon","markup":"{mark}","anchor":"left","size":{"mul":["@safeHeight",0.6]},"color":"@onAccent","when":{"all":["mark",{"all":[{"not":{"format":["avatar","x-avatar","youtube-avatar","sticker","sticker-square","business-card","business-card-us","letterhead","letterhead-us","compliment-slip","badge","lanyard-pass","ticket"]}},{"aspect":"wide"}]}]}},{"id":"name","type":"text","content":"{name}","label":{"content":"{tagline}","color":{"mix":["@onAccent","@accent",0.3]}},"anchor":"left","weight":700,"letterSpacing":-0.03,"offset":{"if":"mark","then":{"x":{"mul":["@safeHeight",0.74]}},"else":{"x":0}},"maxWidth":{"if":"mark","then":{"sub":["@safeWidth",{"mul":["@safeHeight",0.9]}]},"else":{"mul":["@safeWidth",0.9]}},"size":{"min":[{"mul":["@safeHeight",0.3]},{"mul":["@safeWidth",0.09]}]},"minSize":{"mul":["@safeHeight",0.14]},"maxLines":2,"color":"@onAccent","when":{"all":["name",{"all":[{"not":{"format":["avatar","x-avatar","youtube-avatar","sticker","sticker-square","business-card","business-card-us","letterhead","letterhead-us","compliment-slip","badge","lanyard-pass","ticket"]}},{"aspect":"wide"}]}]}},{"id":"mark","type":"icon","markup":"{mark}","anchor":"center","offset":{"y":{"mul":["@safeHeight",-0.1]}},"size":{"mul":[{"min":["@safeWidth","@safeHeight"]},0.42]},"color":"@onAccent","when":{"all":["mark",{"all":[{"not":{"format":["avatar","x-avatar","youtube-avatar","sticker","sticker-square","business-card","business-card-us","letterhead","letterhead-us","compliment-slip","badge","lanyard-pass","ticket"]}},{"not":{"aspect":"wide"}}]}]}},{"id":"name","type":"text","content":"{name}","label":{"content":"{tagline}","color":{"mix":["@onAccent","@accent",0.3]}},"anchor":{"if":"mark","then":"bottom","else":"center"},"align":"center","weight":700,"letterSpacing":-0.03,"size":{"mul":["@safeWidth",0.1]},"minSize":{"mul":["@safeWidth",0.06]},"maxLines":2,"color":"@onAccent","when":{"all":["name",{"all":[{"not":{"format":["avatar","x-avatar","youtube-avatar","sticker","sticker-square","business-card","business-card-us","letterhead","letterhead-us","compliment-slip","badge","lanyard-pass","ticket"]}},{"not":{"aspect":"wide"}}]}]}},{"id":"mark","type":"icon","markup":"{mark}","anchor":"center","offset":{"y":{"mul":["@trimHeight",-0.08]}},"size":{"mul":["@trimHeight",0.4]},"color":"@onAccent","when":{"all":["mark",{"all":[{"format":["business-card","business-card-us"]},{"not":{"page":"back"}}]}]}},{"id":"name","type":"text","content":"{name}","anchor":"bottom","align":"center","weight":700,"letterSpacing":-0.02,"size":{"mul":["@trimHeight",0.1]},"maxLines":1,"color":"@onAccent","when":{"all":["name",{"all":[{"format":["business-card","business-card-us"]},{"not":{"page":"back"}}]}]}},{"id":"person","type":"text","content":"{opt.person}","label":"{opt.role}","anchor":"top-left","weight":700,"letterSpacing":-0.02,"size":{"mul":["@trimHeight",0.095]},"maxLines":1,"color":"@text","when":{"all":["opt.person",{"all":[{"format":["business-card","business-card-us"]},{"page":"back"}]}]}},{"id":"lines","type":"table","rows":"{lines}","x":"@safeX","y":{"mul":["@height",0.6]},"columns":[{"x":"@safeX"}],"size":{"mul":["@trimHeight",0.058]},"color":"@text","when":{"all":["lines",{"all":[{"format":["business-card","business-card-us"]},{"page":"back"}]}]}},{"id":"mark","type":"icon","markup":"{mark}","anchor":"bottom-right","size":{"mul":["@trimHeight",0.22]},"color":"@accent","when":{"all":["mark",{"all":[{"format":["business-card","business-card-us"]},{"page":"back"}]}]}},{"id":"mark","type":"icon","markup":"{mark}","anchor":"top-left","size":{"mul":["@trimWidth",0.085]},"color":"@accent","when":{"all":["mark",{"format":["letterhead","letterhead-us","compliment-slip"]}]}},{"id":"name","type":"text","content":"{name}","label":{"content":"{tagline}","color":"@muted"},"anchor":"top-right","align":"right","weight":700,"letterSpacing":-0.02,"size":{"mul":["@trimWidth",0.03]},"maxLines":1,"color":"@text","when":{"all":["name",{"format":["letterhead","letterhead-us","compliment-slip"]}]}},{"id":"compliments","type":"text","content":"{opt.compliments}","anchor":"left","weight":400,"size":{"mul":["@trimHeight",0.09]},"color":"@text","when":{"all":["opt.compliments",{"format":"compliment-slip"}]}},{"id":"rule","type":"shape","kind":"line","x1":"@safeX","x2":{"add":["@safeX","@safeWidth"]},"y1":{"sub":[{"add":["@safeY","@safeHeight"]},{"mul":["@trimHeight",{"if":{"format":"compliment-slip"},"then":0.16,"else":0.05}]}]},"stroke":"@accent","strokeWidth":{"mul":["@mm",0.3]},"when":{"format":["letterhead","letterhead-us","compliment-slip"]}},{"id":"lines","type":"table","rows":["{lines}"],"y":{"sub":[{"add":["@safeY","@safeHeight"]},{"mul":["@trimHeight",{"if":{"format":"compliment-slip"},"then":0.08,"else":0.025}]}]},"columns":[{"x":"@safeX"},{"x":"37%"},{"x":"68%"}],"size":{"mul":["@mm",2.6]},"color":"@muted","when":{"all":["lines",{"format":["letterhead","letterhead-us","compliment-slip"]}]}},{"id":"band","type":"shape","kind":"rect","x":0,"y":0,"width":"@width","height":{"mul":["@height",0.36]},"fill":"@accent","when":{"format":["badge","lanyard-pass"]}},{"id":"mark","type":"icon","markup":"{mark}","anchor":"top","size":{"mul":["@trimHeight",0.2]},"color":"@onAccent","when":{"all":["mark",{"format":["badge","lanyard-pass"]}]}},{"id":"name","type":"text","content":"{opt.person}","label":"{opt.role}","anchor":"center","align":"center","offset":{"y":{"mul":["@height",0.1]}},"weight":700,"letterSpacing":-0.03,"size":{"mul":["@trimWidth",0.12]},"maxLines":2,"color":"@text","when":{"all":["opt.person",{"format":["badge","lanyard-pass"]}]}},{"id":"footer","type":"text","content":"{name}","anchor":"bottom","align":"center","weight":600,"size":{"mul":["@trimWidth",0.055]},"letterSpacing":0.08,"transform":"uppercase","color":"@accent","when":{"all":["name",{"format":["badge","lanyard-pass"]}]}},{"id":"name","type":"text","content":"{name}","label":{"content":"{tagline}","color":{"mix":["@onAccent","@accent",0.3]}},"anchor":"left","weight":700,"letterSpacing":-0.03,"size":{"mul":["@trimHeight",0.24]},"maxWidth":{"mul":["@trimWidth",0.6]},"maxLines":2,"color":"@onAccent","when":{"all":["name",{"format":["ticket"]}]}},{"id":"perforation","type":"perforation","x":"74%","y1":"@bleed","y2":{"sub":["@height","@bleed"]},"color":"@onAccent","size":{"mul":["@mm",0.5]},"gap":{"mul":["@mm",2.2]},"when":{"format":["ticket"]}},{"id":"barcode","type":"barcode","value":{"upper":"{opt.ticket}"},"x":"79%","y":"28%","width":"16%","height":"34%","text":true,"color":"@onAccent","when":{"all":["opt.ticket",{"format":["ticket"]}]}},{"id":"lines","type":"table","rows":["{lines.0}"],"y":{"mul":["@height",0.82]},"columns":[{"x":{"add":["@safeX",0]}}],"size":{"mul":["@trimHeight",0.065]},"color":"@onAccent","when":{"all":["lines",{"format":["ticket"]}]}}]},"contour":{"$schema":"../schema/recipe.schema.json","name":"contour","description":"Topographic isolines of seeded noise on a flat field: thin even lines, an index contour every fifth line, one line in the accent.","params":{"levels":null},"vars":{"field":{"mix":["@bg","@accent",{"if":{"mode":"dark"},"then":0.08,"else":0.05}]}},"layers":[{"id":"bg","type":"solid","color":"$field"},{"id":"contour","type":"contour","levels":{"if":"levels","then":"{levels}","else":{"pick":[14,18,22,26,30]}},"color":"@text","opacity":0.42,"index":5,"scale":{"range":[1.8,3.2]}},{"id":"grain","type":"grain","amount":0.035},{"id":"title","type":"text","when":"title","content":"{title}","anchor":"bottom-left","weight":500,"size":{"mul":["@u",0.062]},"minSize":{"mul":["@u",0.046]},"lineHeight":1.08,"letterSpacing":-0.025,"maxLines":3,"label":{"if":"label","then":{"color":"@text","content":"{label}"}},"background":{"color":"$field","radius":0,"padding":[{"mul":["@u",0.03]},{"mul":["@u",0.035]}]}}]},"cutout":{"$schema":"../schema/recipe.schema.json","name":"cutout","description":"A flat matte field (or a hand-cut panel on the page colour) with cut-paper shapes and a hand-drawn icon or node graph.","params":{"panel":false,"shapes":null,"graph":false,"stroke":null},"vars":{"field":{"tone":["@accent",{"l":[0.52,0.64],"c":[0.05,0.11]}]},"count":{"if":{"shapes":null},"then":{"if":"panel","then":0,"else":3},"else":"{shapes}"},"ink":{"if":{"stroke":"light"},"then":"#faf9f5","else":{"if":{"stroke":"dark"},"then":"#141413","else":{"if":"panel","then":"#faf9f5","else":{"if":"graph","then":"#141413","else":{"if":{"shapes":0},"then":"#faf9f5","else":"#141413"}}}}},"type":{"readable":[{"if":"panel","then":"@bg","else":"$field"},4.5,"white"]}},"layers":[{"id":"bg","type":"solid","color":{"if":"panel","then":"@bg","else":"$field"}},{"id":"panel","type":"paper","when":"panel","items":[{"kind":"rect","x":0.5,"y":0.5,"width":{"mul":["@width",0.64]},"height":{"mul":["@height",0.6]}}],"region":{"x":0,"y":0,"width":1,"height":1},"color":"$field","wobble":0.3},{"id":"shapes","type":"paper","count":"$count","region":{"x":0.24,"y":0.22,"width":0.52,"height":0.56}},{"id":"icon","type":"scribble","when":{"not":"graph"},"icon":"{icon}","color":"$ink","size":{"if":"panel","then":"34vmin","else":"44vmin"},"stroke":"1.6vmin"},{"id":"graph","type":"scribble","when":"graph","graph":true,"color":"$ink","size":"52vmin","stroke":"1.7vmin"},{"id":"grain","type":"grain","amount":0.035},{"id":"title","type":"text","when":"title","content":"{title}","anchor":"bottom-left","weight":500,"size":{"mul":["@u",0.066]},"minSize":{"mul":["@u",0.048]},"lineHeight":1.08,"letterSpacing":-0.025,"maxLines":3,"label":{"if":"label","then":{"color":"$type","content":"{label}"}},"color":"$type"}]},"diagram":{"$schema":"../schema/recipe.schema.json","name":"diagram","description":"White line-art over the gradient field: one icon, or nodes in outlined tiles joined by arrows, with a dotted grid that breaks around them (the engineering-blog look).","params":{"nodes":null,"layout":null,"arrows":null},"layers":[{"id":"bg","type":"solid"},{"id":"mesh","type":"mesh","count":4,"blur":"11vmax","size":[0.45,0.8],"streak":1.8,"tone":{"l":[0.4,0.6],"c":[0.14,0.24]},"fold":{"pick":[false,false,{"sheen":0}]},"hueSpan":60},{"id":"diagram","type":"diagram","icon":"{icon}","nodes":"{nodes}","layout":"{layout}","arrows":"{arrows}","grid":true},{"id":"grain","type":"grain","amount":0.07},{"id":"title","type":"text","when":"title","content":"{title}","anchor":"bottom-left","weight":500,"size":{"mul":["@u",0.066]},"minSize":{"mul":["@u",0.048]},"lineHeight":1.08,"letterSpacing":-0.025,"maxLines":3,"label":{"if":"label","then":{"color":"#ffffff","content":"{label}"}},"color":"#ffffff"}]},"dither":{"$schema":"../schema/recipe.schema.json","name":"dither","description":"A soft field (noise, a gradient, or a lit sphere / arch / circle) rendered 1-bit at a visible pixel size: Bayer 4×4 / 8×8 or blue-ish noise, in two colours or three.","params":{"matrix":"bayer4","cell":"0.9vmin","source":null,"shape":null,"three":false},"vars":{"ink":{"tone":["@accent",{"if":{"mode":"dark"},"then":{"l":[0.62,0.85],"c":[0.1,0.22]},"else":{"l":[0.3,0.55],"c":[0.1,0.24]}}]},"colors":{"if":"three","then":["@bg",{"tone":["@colors.1",{"l":[0.55,0.75],"c":[0.1,0.2]}]},"$ink"],"else":["@bg","$ink"]}},"output":{"lossless":true},"layers":[{"id":"dither","type":"dither","colors":"$colors","source":{"if":"source","then":"{source}","else":{"pick":["field","linear","radial"]}},"shape":{"if":"shape","then":"{shape}","else":{"pick":["sphere","none","circle","arch","sphere"]}},"matrix":"{matrix}","cell":"{cell}","center":{"x":{"range":[0.4,0.6]},"y":{"range":[0.38,0.55]}},"size":"28vmin"},{"id":"title","type":"text","when":"title","content":"{title}","anchor":"bottom-left","weight":500,"size":{"mul":["@u",0.062]},"minSize":{"mul":["@u",0.046]},"lineHeight":1.08,"letterSpacing":-0.025,"maxLines":3,"label":{"if":"label","then":{"color":"@text","content":"{label}"}},"color":"@text","background":{"color":"@bg","radius":0,"padding":[{"mul":["@u",0.03]},{"mul":["@u",0.035]}]}}]},"duotone":{"$schema":"../schema/recipe.schema.json","name":"duotone","description":"A photo mapped to the palette's shadow and highlight colours, with grain, and a title over a scrim when given.","requires":["image"],"vars":{"shadow":{"if":{"mode":"dark"},"then":"@bg","else":"@text"}},"layers":[{"id":"image","type":"image","src":"{image}","duotone":true},{"id":"scrim","type":"linear","when":"title","angle":180,"colors":["$shadow","$shadow"],"opacities":[0,0.62]},{"id":"grain","type":"grain","amount":0.07},{"id":"title","type":"text","when":"title","content":"{title}","anchor":"bottom-left","weight":500,"size":{"mul":["@u",0.066]},"minSize":{"mul":["@u",0.048]},"lineHeight":1.08,"letterSpacing":-0.025,"maxLines":3,"label":{"if":"label","then":{"color":"#e9e9e9","content":"{label}"}},"color":"#ffffff"}]},"gridTitle":{"$schema":"../schema/recipe.schema.json","name":"gridTitle","description":"The aurora field under a dotted grid (four cells each way), grain, and an optional headline lower left.","layers":[{"id":"bg","type":"solid"},{"id":"mesh","type":"mesh","count":4,"blur":"11vmax","size":[0.45,0.8],"streak":1.8,"tone":{"if":"title","then":{"if":{"mode":"dark"},"then":{"l":[0.34,0.5],"c":[0.12,0.22]},"else":{"l":[0.66,0.82],"c":[0.13,0.2]}},"else":{"l":[0.55,0.85],"c":[0.12,0.22]}},"fold":{"if":"title","then":false,"else":{"pick":[false,false,true]}},"streaks":{"if":"title","then":0,"else":{"pick":[0,0,0,6]}},"hues":{"pick":[2,2,3]},"hueSpan":60},{"id":"grid","type":"pattern","kind":"grid","divisions":4,"stroke":"0.3vmin","dash":"dotted","color":"#ffffff","opacity":0.6},{"id":"grain","type":"grain","amount":0.08},{"id":"title","type":"text","when":"title","content":"{title}","anchor":"bottom-left","weight":500,"size":{"mul":["@u",0.066]},"minSize":{"mul":["@u",0.048]},"lineHeight":1.08,"letterSpacing":-0.025,"maxLines":3,"label":{"if":"label","then":{"color":"@text","content":"{label}"}}}]},"iconTile":{"$schema":"../schema/recipe.schema.json","name":"iconTile","description":"An icon on a raised tile over a soft tint of the accent, a glow and faint rings. With a title, the tile moves to the upper left.","vars":{"tint":{"mix":["@bg","@accent",{"if":{"mode":"dark"},"then":0.1,"else":0.07}]},"glow":{"if":"title","then":{"x":{"add":[0.22,{"range":[-0.12,0.12]}]},"y":{"add":[0.26,{"range":[-0.12,0.12]}]}},"else":{"x":{"add":[0.5,{"range":[-0.12,0.12]}]},"y":{"add":[0.5,{"range":[-0.12,0.12]}]}}}},"layers":[{"id":"bg","type":"solid","color":"$tint"},{"id":"glow","type":"radial","colors":[{"mix":["$tint","@accent",{"if":{"mode":"dark"},"then":0.32,"else":0.26}]},"$tint"],"x":"$glow.x","y":"$glow.y","radius":"52vmax"},{"id":"rings","type":"pattern","kind":"rings","size":{"if":"title","then":"6vmin","else":"7vmin"},"center":"$glow","opacity":{"if":{"mode":"dark"},"then":0.14,"else":0.16},"fade":"radial","color":{"if":{"mode":"dark"},"then":"@text","else":"@accent"}},{"id":"icon","type":"icon","name":"{icon}","path":{"if":{"not":"icon"},"then":"M12 2c.4 4.9 2.1 7.6 7 8.6l3 .4-3 .4c-4.9 1-6.6 3.7-7 8.6-.4-4.9-2.1-7.6-7-8.6L2 11l3-.4c4.9-1 6.6-3.7 7-8.6Z"},"viewBox":{"if":{"not":"icon"},"then":[0,0,24,24]},"size":{"mul":["@u",{"if":"title","then":0.075,"else":0.12}]},"anchor":{"if":"title","then":"top-left","else":"center"},"tile":{"color":{"if":{"mode":"dark"},"then":{"mix":["$tint","@text",0.09]},"else":{"mix":["$tint","#ffffff",0.85]}}}},{"id":"grain","type":"grain","amount":0.05},{"id":"title","type":"text","when":"title","content":"{title}","anchor":"bottom-left","weight":500,"size":{"mul":["@u",0.066]},"minSize":{"mul":["@u",0.048]},"lineHeight":1.08,"letterSpacing":-0.025,"maxLines":3,"label":"{label}"}]},"issue":{"$schema":"../schema/recipe.schema.json","name":"issue","description":"Type-led: a huge issue number in the accent, sized to the canvas and cropped at the bottom only, an optional No., a masthead line with the date, a hairline.","params":{"number":null,"masthead":null,"date":null,"prefix":true},"vars":{"number":{"if":"number","then":"{number}","else":{"int":[1,64]}},"numeral":{"readable":["@bg",3,"@accent"]},"size":{"min":[{"mul":["@height",1.04]},{"div":[{"mul":["@width",1.62]},{"length":"$number"}]}]},"bleed":{"add":[1,{"div":[{"mul":["$size",0.1]},"@height"]}]}},"layers":[{"id":"bg","type":"solid"},{"id":"masthead","type":"text","when":"masthead","content":"{masthead}","anchor":"top-left","size":{"mul":["@u",0.024]},"weight":600,"letterSpacing":0.08,"transform":"uppercase","maxLines":1,"balance":false,"color":"@text"},{"id":"date","type":"text","when":"date","content":"{date}","anchor":"top-right","size":{"mul":["@u",0.024]},"weight":500,"letterSpacing":0.04,"maxLines":1,"balance":false,"color":"@text"},{"id":"rule","type":"rule","y":{"if":{"any":["masthead","date"]},"then":0.13,"else":0.1}},{"id":"no","type":"text","when":{"not":{"prefix":false}},"content":"No.","anchor":"left","position":{"x":0.07,"y":{"if":"title","then":0.31,"else":0.27}},"size":{"mul":["@u",0.05]},"weight":500,"letterSpacing":-0.02,"color":"$numeral","maxLines":1,"balance":false},{"id":"number","type":"text","content":"$number","anchor":"bottom-left","position":{"x":0.055,"y":"$bleed"},"size":"$size","weight":600,"letterSpacing":-0.06,"lineHeight":1,"maxLines":1,"maxWidth":100000,"balance":false,"color":"$numeral"},{"id":"title","type":"text","when":"title","content":"{title}","anchor":{"if":{"aspect":"wide"},"then":"top-right","else":"top-left"},"weight":500,"size":{"mul":["@u",0.05]},"minSize":{"mul":["@u",0.04]},"lineHeight":1.08,"letterSpacing":-0.025,"maxLines":2,"label":{"if":"label","then":{"color":"@text","content":"{label}"}},"offset":{"y":"9vh"},"maxWidth":{"if":{"aspect":"wide"},"then":"40vw","else":"52vw"},"align":"left"}]},"mark":{"$schema":"../schema/recipe.schema.json","name":"mark","description":"One icon, centred, on the accent or an accent gradient: white whenever white clears 3:1 (WCAG 1.4.11, non-text) against everything under it, else near-black.","params":{"background":"solid","angle":135,"colors":null,"size":"24vmin","iconColor":"auto"},"vars":{"gradient":{"if":"colors","then":"{colors}","else":["@accent",{"mix":["@accent","@colors.1",0.5,"oklch"]}]},"ink":{"if":{"iconColor":"auto"},"then":{"if":{"background":"gradient"},"then":{"readable":[{"gradientUnder":["$gradient","{angle}","{size}"]},3,"white"]},"else":{"readable":["@accent",3,"white"]}},"else":{"if":{"iconColor":"white"},"then":"#ffffff","else":{"if":{"iconColor":"black"},"then":"#111111","else":"{iconColor}"}}},"type":{"if":{"background":"gradient"},"then":{"readable":["$gradient",4.5,"$ink"]},"else":{"readable":["@accent",4.5,"$ink"]}}},"layers":[{"id":"bg","type":"solid","when":{"background":"solid"},"color":"@accent"},{"id":"bg","type":"linear","when":{"background":"gradient"},"angle":"{angle}","colors":"$gradient"},{"id":"icon","type":"icon","name":"{icon}","path":{"if":{"not":"icon"},"then":"M12 2c.4 4.9 2.1 7.6 7 8.6l3 .4-3 .4c-4.9 1-6.6 3.7-7 8.6-.4-4.9-2.1-7.6-7-8.6L2 11l3-.4c4.9-1 6.6-3.7 7-8.6Z"},"viewBox":{"if":{"not":"icon"},"then":[0,0,24,24]},"size":"{size}","color":"$ink"},{"id":"grain","type":"grain","amount":0.03},{"id":"title","type":"text","when":"title","content":"{title}","anchor":"bottom-left","weight":500,"size":{"mul":["@u",0.066]},"minSize":{"mul":["@u",0.048]},"lineHeight":1.08,"letterSpacing":-0.025,"maxLines":3,"label":{"if":"label","then":{"color":"$type","content":"{label}"}},"color":"$type"}]},"photo":{"$schema":"../schema/recipe.schema.json","name":"photo","description":"A palette taken from a photo, laid out as full-bleed sweeps like aurora (the photo itself not shown), or `show: 'blur'` for the photo heavily blurred.","params":{"show":null},"requires":["image"],"vars":{"src":{"if":"image","then":"{image}","else":null}},"layers":[{"id":"bg","type":"solid"},{"id":"mesh","type":"mesh","when":{"not":{"show":"blur"}},"from":"$src","count":4,"blur":"11vmax","size":[0.45,0.8],"streak":1.8,"hues":3,"tone":{"if":"title","then":{"if":{"mode":"dark"},"then":{"l":[0.34,0.5],"c":[0.08,0.2]},"else":{"l":[0.66,0.82],"c":[0.08,0.18]}},"else":{"l":[0.5,0.85],"c":[0.08,0.2]}},"fold":{"if":"title","then":false,"else":{"pick":[false,false,true]}}},{"id":"photo","type":"image","when":{"show":"blur"},"src":"$src","blur":"7vmax"},{"id":"scrim","type":"solid","when":{"all":[{"show":"blur"},"title"]},"color":{"if":{"mode":"dark"},"then":"#000000","else":"#ffffff"},"opacity":0.4},{"id":"grain","type":"grain","amount":0.08},{"id":"title","type":"text","when":"title","content":"{title}","anchor":"bottom-left","weight":500,"size":{"mul":["@u",0.062]},"minSize":{"mul":["@u",0.046]},"lineHeight":1.08,"letterSpacing":-0.025,"maxLines":3,"label":{"if":"label","then":{"color":"@text","content":"{label}"}},"color":"@text"}]},"riso":{"$schema":"../schema/recipe.schema.json","name":"riso","description":"Two (or three) flat risograph inks overprinted on paper: big simple forms, slight misregistration, speckled or halftone texture, uneven density. Inks from the palette, or classic riso inks.","params":{"inks":null,"texture":"grain","third":false},"vars":{"ground":{"if":{"mode":"dark"},"then":"@bg","else":"#f6f1e7"},"blend":{"if":{"mode":"dark"},"then":"screen","else":"multiply"},"inks":{"if":"inks","then":"{inks}","else":[{"tone":["@accent",{"l":[0.5,0.72],"c":[0.14,0.26]}]},{"tone":["@colors.1",{"l":[0.5,0.72],"c":[0.14,0.26]}]},{"tone":["@colors.2",{"l":[0.5,0.72],"c":[0.14,0.26]}]}]},"comp":{"if":"title","then":{"pick":[[[{"kind":"circle","x":{"range":[0.4,0.6]},"y":0.32,"r":"24vmin"}],[{"kind":"band","y":0.42,"height":"16vmin","rotate":{"range":[-8,8]}}]],[[{"kind":"arch","x":{"range":[0.34,0.42]},"y":0.34,"width":"34vmin","height":"44vmin"}],[{"kind":"circle","x":{"range":[0.58,0.66]},"y":0.3,"r":"16vmin"}]],[[{"kind":"half","x":0.5,"y":0.5,"r":"32vmin"}],[{"kind":"circle","x":0.5,"y":0.3,"r":"14vmin"}]]]},"else":{"pick":[[[{"kind":"circle","x":{"range":[0.36,0.5]},"y":{"range":[0.38,0.5]},"r":"34vmin"}],[{"kind":"band","y":{"range":[0.56,0.68]},"height":"26vmin","rotate":{"range":[-14,14]}}]],[[{"kind":"arch","x":{"range":[0.32,0.42]},"y":0.54,"width":"46vmin","height":"66vmin"}],[{"kind":"circle","x":{"range":[0.6,0.68]},"y":{"range":[0.34,0.44]},"r":"22vmin"}]],[[{"kind":"half","x":0.5,"y":{"range":[0.6,0.7]},"r":"42vmin"}],[{"kind":"circle","x":{"range":[0.42,0.58]},"y":{"range":[0.34,0.42]},"r":"19vmin"}]],[[{"kind":"ring","x":{"range":[0.4,0.48]},"y":0.48,"r":"30vmin","thickness":"12vmin"}],[{"kind":"circle","x":{"range":[0.56,0.64]},"y":{"range":[0.5,0.58]},"r":"24vmin"}]]]}}},"layers":[{"id":"bg","type":"solid","color":"$ground"},{"id":"inkA","type":"ink","color":"$inks.0","shapes":"$comp.0","texture":"{texture}","blend":"$blend"},{"id":"inkB","type":"ink","color":"$inks.1","shapes":"$comp.1","texture":"{texture}","blend":"$blend"},{"id":"inkC","type":"ink","when":"third","color":"$inks.2","shapes":[{"kind":"circle","x":{"range":[0.2,0.8]},"y":{"range":[0.2,0.4]},"r":"7vmin"}],"texture":"{texture}","blend":"$blend"},{"id":"grain","type":"grain","amount":0.05},{"id":"title","type":"text","when":"title","content":"{title}","anchor":"bottom-left","weight":500,"size":{"mul":["@u",0.062]},"minSize":{"mul":["@u",0.046]},"lineHeight":1.08,"letterSpacing":-0.025,"maxLines":3,"label":{"if":"label","then":{"color":"@text","content":"{label}"}},"color":"@text"}]},"stripes":{"$schema":"../schema/recipe.schema.json","name":"stripes","description":"A tonal band of tapering stripes down one side, a disc riding its edge (with an optional icon), and the title on the open side (the claude.com/resources look).","params":{"side":"right"},"vars":{"spotY":{"add":[{"if":"title","then":0.36,"else":0.5},{"range":[-0.06,0.06]}]},"steps":{"int":[5,8]},"taper":{"range":[0.72,0.86]},"ramp":{"ramp":["@accent","@bg","$steps",0.88]},"weights":{"taper":["$taper","$steps"]},"edge":{"if":{"side":"right"},"then":{"sub":[1,0.46]},"else":0.46},"spot":{"mul":[{"min":["@width","@height"]},0.34]}},"layers":[{"id":"bg","type":"solid"},{"id":"stripes","type":"stripes","direction":"vertical","region":{"if":{"side":"right"},"then":{"x":"$edge","y":0,"width":0.46,"height":1},"else":{"x":0,"y":0,"width":0.46,"height":1}},"widths":{"if":{"side":"right"},"then":{"reverse":"$weights"},"else":"$weights"},"colors":{"if":{"side":"right"},"then":{"reverse":"$ramp"},"else":"$ramp"}},{"id":"spot","type":"shapes","items":[{"kind":"circle","x":"$edge","y":"$spotY","size":"$spot","color":"@text"}]},{"id":"icon","type":"icon","when":"icon","name":"{icon}","size":{"mul":["$spot",0.4]},"position":{"x":"$edge","y":"$spotY"},"color":"@bg"},{"id":"grain","type":"grain","amount":0.06},{"id":"title","type":"text","when":"title","content":"{title}","anchor":{"if":{"side":"right"},"then":"bottom-left","else":"bottom-right"},"weight":500,"size":{"mul":["@u",0.058]},"minSize":{"mul":["@u",0.044]},"lineHeight":1.08,"letterSpacing":-0.025,"maxLines":4,"label":"{label}","maxWidth":{"sub":[{"mul":["@width",{"sub":[1,0.46]}]},{"mul":["@u",0.12]}]}}]},"waveform":{"$schema":"../schema/recipe.schema.json","name":"waveform","description":"An episode's waveform (peaks you pass, or audio decoded at build) as bars, mirrored bars, a line or dots, on a flat or toned field, with an optional duration and label. Without peaks or audio it draws seeded demo peaks.","params":{"peaks":null,"audio":null,"duration":null,"style":null,"field":"flat"},"vars":{"field":{"if":{"field":"toned"},"then":{"tone":["@accent",{"if":{"mode":"dark"},"then":{"l":[0.3,0.4],"c":[0.06,0.12]},"else":{"l":[0.88,0.94],"c":[0.03,0.06]}}]},"else":"@bg"},"wave":{"readable":["$field",3,"@accent"]},"type":{"readable":["$field",4.5,"@text"]}},"layers":[{"id":"bg","type":"solid","color":"$field"},{"id":"wave","type":"waveform","peaks":"{peaks}","audio":"{audio}","style":{"if":"style","then":"{style}","else":{"pick":["mirrored","bars","line","dots","mirrored"]}},"color":"$wave","duration":"{duration}","caption":{"if":{"any":["duration","audio"]},"then":true,"else":null},"captionColor":"$type","region":{"if":"title","then":{"x":0.07,"y":0.42,"width":0.86,"height":0.3},"else":{"x":0.07,"y":0.3,"width":0.86,"height":0.4}}},{"id":"grain","type":"grain","amount":0.04},{"id":"title","type":"text","when":"title","content":"{title}","anchor":"top-left","weight":500,"size":{"mul":["@u",0.062]},"minSize":{"mul":["@u",0.046]},"lineHeight":1.08,"letterSpacing":-0.025,"maxLines":3,"label":{"if":"label","then":{"color":"$type","content":"{label}"}},"color":"$type"}]}};

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

@@ -4,9 +4,9 @@
  * @module extract
  */
 
-import { readFile } from 'node:fs/promises';
-import { toOklch, fromOklch, toHex } from './color.js';
-import { createRng } from './rng.js';
+import { loadBytes } from './platform/index.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();
@@ -35,11 +35,12 @@ export function extractPalette(src, options = {}) {
   const job = (async () => {
     let sharp;
     try {
-      sharp = (await import('sharp')).default;
+      const name = 'sharp';
+      sharp = (await import(/* @vite-ignore */ name)).default;
     } catch {
       throw new Error('Extracting a palette from a photo needs sharp: npm install sharp');
     }
-    const bytes = typeof src === 'string' ? await readFile(src) : src;
+    const bytes = await loadBytes(src, 'image');
     const { data } = await sharp(bytes).rotate().resize(64, 64, { fit: 'cover' }).removeAlpha().raw().toBuffer({ resolveWithObject: true });
     /** @type {[number, number, number][]} */
     const pts = [];

package/src/fonts.d.ts

@@ -0,0 +1,55 @@
+// Fonts: loading, decoding and picking a face.
+import type { FontSource } from './index.js';
+import type { HarfBuzzModule } from './platform/harfbuzz.js';
+
+/** A shaped glyph, font units. */
+export interface RunGlyph {
+  gid: number;
+  cluster: number;
+  xAdvance: number;
+  xOffset: number;
+  yOffset: number;
+}
+
+/** A loaded face, ready to shape with (HarfBuzz, or the JavaScript reader in Workers). */
+export interface LoadedFont {
+  name: string;
+  weight: number;
+  style: string;
+  /** The harfbuzzjs Font, or the JavaScript face. */
+  font: object;
+  upem: number;
+  ascender: number;
+  descender: number;
+  capHeight: number;
+  /** Parsed outline commands by glyph id. */
+  paths: Map<number, (string | number)[]>;
+  /** Shape one line. */
+  shapeRun: (text: string) => RunGlyph[];
+  /** A glyph's outline, font units, y up. */
+  glyphToPath: (gid: number) => string;
+  axes: Record<string, { min: number; default: number; max: number }>;
+  variations: Record<string, number>;
+  source: FontSource;
+}
+
+/** HarfBuzz, or undefined where it can't run (Workers) or is switched off. */
+export function harfbuzz(): Promise<HarfBuzzModule | undefined>;
+/** The bundled Inter faces (bytes from disk in Node, else loaded on first use). */
+export function bundledFonts(): FontSource[];
+/** A cover's fonts, then the registered ones, then Inter. */
+export function fontPool(own: FontSource[]): FontSource[];
+/** Register a font for every cover. */
+export function registerFont(font: FontSource): void;
+/** A font source's bytes. */
+export function fontBytes(source: FontSource): Promise<Uint8Array>;
+/** WOFF or sfnt bytes as sfnt, synchronously (Node). */
+export function decodeFont(input: Uint8Array | ArrayBuffer): Uint8Array;
+/** WOFF or sfnt bytes as sfnt, on any platform. */
+export function decodeFontAsync(input: Uint8Array | ArrayBuffer): Promise<Uint8Array>;
+/** Load a face, optionally at a variation (`{ wght: 650, wdth: 80 }`). */
+export function loadFont(source: FontSource, variations?: Record<string, number>): Promise<LoadedFont>;
+/** The closest face for a family, weight and style (a variable range matches inside it). */
+export function pickFont(sources: FontSource[], family: string, weight: number, style?: string): FontSource;
+/** A layer's variation settings (`wght` follows the weight on a variable font). */
+export function variationsFor(source: FontSource, weight: number, axes: Record<string, number> | undefined): Record<string, number> | undefined;