@arraypress/covers 0.0.0-stage → 1.1.0

package/src/layers/index.d.ts

@@ -0,0 +1,18 @@
+// The poster layers (1.1).
+export { shape } from './shape.js';
+export type { ShapeLayer, ShapeSpec } from './shape.js';
+export { svg, sanitize, shapesOnly } from './svg.js';
+export type { SvgLayer } from './svg.js';
+export { table } from './table.js';
+export type { TableLayer, TableCell } from './table.js';
+export { barcode } from './barcode.js';
+export type { BarcodeLayer } from './barcode.js';
+export { code128 } from './code128.js';
+export { perforation } from './perforation.js';
+export type { PerforationLayer } from './perforation.js';
+export { tear } from './tear.js';
+export type { TearLayer } from './tear.js';
+export { texture } from './texture.js';
+export type { TextureLayer } from './texture.js';
+export { expandRepeat } from './repeat.js';
+export type { RepeatLayer } from './repeat.js';

package/src/layers/index.js

@@ -0,0 +1,15 @@
+/**
+ * The poster layers (1.1): one module each.
+ *
+ * @module layers
+ */
+
+export { shape } from './shape.js';
+export { svg, sanitize, shapesOnly } from './svg.js';
+export { table } from './table.js';
+export { barcode } from './barcode.js';
+export { code128 } from './code128.js';
+export { perforation } from './perforation.js';
+export { tear } from './tear.js';
+export { texture } from './texture.js';
+export { expandRepeat } from './repeat.js';

package/src/layers/perforation.d.ts

@@ -0,0 +1,14 @@
+// The `perforation` layer.
+import type { Color, Length, BaseLayer, Anchor } from '../index.js';
+import type { RenderContext, Markup } from '../render/context.js';
+
+export interface PerforationLayer extends BaseLayer {
+  type: 'perforation';
+  kind?: 'holes' | 'dashes' | 'notches';
+  x?: Length | `${number}%`; x1?: Length | `${number}%`; y1?: Length | `${number}%`; x2?: Length | `${number}%`; y2?: Length | `${number}%`;
+  size?: Length; gap?: Length; inset?: Length; color?: Color; strokeWidth?: Length;
+}
+
+
+/** Draw a tear-off line. */
+export function perforation(layer: PerforationLayer, ctx: RenderContext): Markup;

package/src/layers/perforation.js

@@ -0,0 +1,47 @@
+/**
+ * The `perforation` layer.
+ *
+ * @module layers/perforation
+ */
+
+import { attrs, num } from '../svg.js';
+import { len } from '../geometry.js';
+import { toHex } from '../color.js';
+import { pos, wrap } from './util.js';
+
+
+/**
+ * `perforation` — a tear-off line: `holes` (punched dots), `dashes` or
+ * `notches` (half-circle bites at both ends), from `x1, y1` to `x2, y2`.
+ * In a layer's `knockout` it punches real holes through it.
+ *
+ * @param {any} layer
+ * @param {import('../layers.js').RenderContext} ctx
+ * @returns {import('../layers.js').Markup}
+ */
+export function perforation(layer, ctx) {
+  const x1 = pos(layer.x1 ?? layer.x ?? '50%', 'x', ctx.canvas);
+  const y1 = pos(layer.y1 ?? 0, 'y', ctx.canvas);
+  const x2 = pos(layer.x2 ?? layer.x ?? '50%', 'x', ctx.canvas);
+  const y2 = pos(layer.y2 ?? '100%', 'y', ctx.canvas);
+  const color = layer.color ? toHex(layer.color) : ctx.palette.text;
+  const kind = layer.kind ?? 'holes';
+  const L = Math.hypot(x2 - x1, y2 - y1);
+  const size = len(layer.size, ctx.canvas, kind === 'notches' ? '1.6vmin' : '0.25vmin');
+  const gap = len(layer.gap, ctx.canvas, kind === 'dashes' ? '0.8vmin' : '1.2vmin');
+  let body = '';
+  if (kind === 'dashes') {
+    body = `<path${attrs({ d: `M${num(x1)} ${num(y1)}L${num(x2)} ${num(y2)}`, stroke: color, 'stroke-width': len(layer.strokeWidth, ctx.canvas, '0.2vmin'), 'stroke-dasharray': `${num(gap)} ${num(gap * 0.8)}`, fill: 'none' })}/>`;
+  } else if (kind === 'notches') {
+    body = `<circle${attrs({ cx: x1, cy: y1, r: size, fill: color })}/><circle${attrs({ cx: x2, cy: y2, r: size, fill: color })}/>`;
+  } else {
+    const inset = len(layer.inset, ctx.canvas, gap);
+    const n = Math.max(1, Math.floor((L - 2 * inset) / gap));
+    for (let i = 0; i <= n; i++) {
+      const t = (inset + i * ((L - 2 * inset) / n)) / L;
+      body += `<circle${attrs({ cx: x1 + (x2 - x1) * t, cy: y1 + (y2 - y1) * t, r: size })}/>`;
+    }
+    body = `<g fill="${color}">${body}</g>`;
+  }
+  return { defs: '', body: wrap(layer, body) };
+}

package/src/layers/repeat.d.ts

@@ -0,0 +1,29 @@
+// The `repeat` layer.
+import type { Length, Layer, BaseLayer } from '../index.js';
+
+/** `repeat`: a layer drawn many times (a grid, a ring, a line), with per-instance `{#…}` values. */
+export interface RepeatLayer extends BaseLayer {
+  type: 'repeat';
+  /** The template (or `layers`, drawn as a group). */
+  layer?: Layer;
+  layers?: Layer[];
+  rows?: number; cols?: number;
+  count?: number;
+  /** `[dx, dy]` between instances (a grid's default divides the canvas). */
+  step?: [Length, Length];
+  x?: Length | `${number}%`; y?: Length | `${number}%`;
+  cx?: Length | `${number}%`; cy?: Length | `${number}%`; radius?: Length;
+  /** Degrees, 0 up, clockwise. */
+  start?: number; sweep?: number;
+  /** Turn each ring instance to its angle (default true). */
+  turn?: boolean;
+  /** Overrides for odd instances (a checkerboard on a grid). */
+  odd?: Record<string, unknown>;
+  /** Overrides taken in turn. */
+  cycle?: Record<string, unknown>[];
+  /** An expression (`{#…}`) that leaves an instance out when true. */
+  skip?: string;
+}
+
+/** The instances of a repeat, as a group of placed copies. */
+export function expandRepeat(layer: RepeatLayer, ctx: { width: number; height: number; canvas: { width: number; height: number } }): Layer;

package/src/layers/repeat.js

@@ -0,0 +1,90 @@
+/**
+ * `repeat`: one layer (or a stack) drawn many times, so tile grids, rings
+ * of marks and poster walls are data, not generator scripts.
+ *
+ * - A grid: `rows` × `cols`, `step: [dx, dy]` apart (default the canvas
+ *   divided by the count), starting at `x`, `y`.
+ * - A ring: `count` round `cx`, `cy` at `radius`, from `start` degrees (0
+ *   up, clockwise) over `sweep` (default 360), each turned to its angle
+ *   (`turn: false` keeps them upright).
+ * - A line: `count` instances `step: [dx, dy]` apart.
+ *
+ * Each instance is the template (`layer`, or `layers` as a group) placed at
+ * its point, with `{#…}` expressions filled in from its variables: `i`,
+ * `n` (the count), `row`, `col`, `rows`, `cols`, `x`, `y`, `angle` and
+ * `odd` (a checkerboard on a grid, every other one otherwise). `odd` holds
+ * overrides for odd instances, `cycle` a list of overrides taken in turn,
+ * and `skip` an expression that leaves an instance out.
+ *
+ * @module layers/repeat
+ */
+
+import { num } from '../svg.js';
+import { len } from '../geometry.js';
+import { pos } from './util.js';
+import { fill, evaluate } from './expr.js';
+
+/**
+ * The instances of a repeat, as a group of placed copies.
+ *
+ * @param {any} layer
+ * @param {{ width: number, height: number, canvas: { width: number, height: number } }} ctx
+ * @returns {any} A `group` layer.
+ */
+export function expandRepeat(layer, ctx) {
+  const template = layer.layer ?? { type: 'group', layers: layer.layers ?? [] };
+  const places = points(layer, ctx);
+  const grid = layer.rows != null || layer.cols != null;
+  const key = layer.seed ?? layer.id ?? 'repeat';
+  const layers = [];
+  places.forEach((p, i) => {
+    const odd = grid ? (p.row + p.col) % 2 === 1 : i % 2 === 1;
+    const vars = { i, n: places.length, row: p.row, col: p.col, rows: p.rows, cols: p.cols, x: p.x, y: p.y, angle: p.angle, odd };
+    if (layer.skip != null && evaluate(String(layer.skip).replace(/^\{#|\}$/g, ''), vars)) return;
+    let one = { ...template };
+    if (odd && layer.odd) one = { ...one, ...layer.odd };
+    if (layer.cycle?.length) one = { ...one, ...layer.cycle[i % layer.cycle.length] };
+    const turn = p.angle && layer.turn !== false ? ` rotate(${num(p.angle, 3)})` : '';
+    layers.push({ type: 'group', seed: `${key}#${i}`, transform: `translate(${num(p.x, 3)} ${num(p.y, 3)})${turn}`, layers: [fill(one, vars)] });
+  });
+  return { type: 'group', layers, opacity: layer.opacity, blend: layer.blend };
+}
+
+/**
+ * Where the instances go.
+ *
+ * @param {any} l
+ * @param {{ width: number, height: number, canvas: { width: number, height: number } }} ctx
+ * @returns {{ x: number, y: number, row: number, col: number, rows: number, cols: number, angle: number }[]}
+ */
+function points(l, ctx) {
+  const c = ctx.canvas;
+  const x0 = pos(l.x ?? 0, 'x', c);
+  const y0 = pos(l.y ?? 0, 'y', c);
+  if (l.rows != null || l.cols != null) {
+    const rows = Math.max(1, Math.round(l.rows ?? 1));
+    const cols = Math.max(1, Math.round(l.cols ?? 1));
+    const dx = l.step ? len(l.step[0], c) : (c.width - x0) / cols;
+    const dy = l.step ? len(l.step[1], c) : (c.height - y0) / rows;
+    const out = [];
+    for (let row = 0; row < rows; row++) for (let col = 0; col < cols; col++) out.push({ x: x0 + col * dx, y: y0 + row * dy, row, col, rows, cols, angle: 0 });
+    return out;
+  }
+  const count = Math.max(0, Math.round(l.count ?? 0));
+  if (l.radius != null) {
+    const cx = pos(l.cx ?? '50%', 'x', c);
+    const cy = pos(l.cy ?? '50%', 'y', c);
+    const r = len(l.radius, c);
+    const sweep = l.sweep ?? 360;
+    const start = l.start ?? 0;
+    // A full circle doesn't put the last on the first.
+    const stepA = count > 1 ? sweep / (Math.abs(sweep) >= 360 ? count : count - 1) : 0;
+    return Array.from({ length: count }, (_, i) => {
+      const angle = start + i * stepA;
+      const a = (angle * Math.PI) / 180;
+      return { x: cx + r * Math.sin(a), y: cy - r * Math.cos(a), row: 0, col: i, rows: 1, cols: count, angle };
+    });
+  }
+  const [dx, dy] = l.step ? [len(l.step[0], c), len(l.step[1], c)] : [0, 0];
+  return Array.from({ length: count }, (_, i) => ({ x: x0 + i * dx, y: y0 + i * dy, row: 0, col: i, rows: 1, cols: count, angle: 0 }));
+}

package/src/layers/shape.d.ts

@@ -0,0 +1,46 @@
+// 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';
+
+/** One exact shape (see the README's `shape` table). */
+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}%`;
+  cx?: Length | `${number}%`; cy?: Length | `${number}%`; r?: Length; rx?: Length; ry?: Length;
+  x1?: Length | `${number}%`; y1?: Length | `${number}%`; x2?: Length | `${number}%`; y2?: Length | `${number}%`;
+  points?: number | [Length, Length][];
+  inner?: Length; count?: number; start?: number; end?: number; depth?: Length;
+  amplitude?: Length; wavelength?: Length; phase?: number; band?: Length;
+  d?: string; viewBox?: [number, number, number, number];
+  radius?: Length;
+  edge?: 'deckle' | 'torn' | 'zigzag' | 'wave' | 'scallop' | { kind: 'deckle' | 'torn' | 'zigzag' | 'wave' | 'scallop'; size?: Length; step?: Length; sides?: ('top' | 'right' | 'bottom' | 'left')[] };
+  rotate?: number;
+  /** Rotate about this point (px or `'%'`) instead of the centre. */
+  origin?: [Length | `${number}%`, Length | `${number}%`] | { x?: Length | `${number}%`; y?: Length | `${number}%` };
+  /** `arch`: the arc and its sides only (stroked). */
+  open?: boolean;
+  /** A blur radius, drawn padded: soft orbs with no edge fade or square edge. */
+  soft?: Length;
+  /** `cut`: grow (or shrink) the format's die-cut outline. */
+  outset?: Length;
+  /** Where the dash pattern starts. */
+  dashOffset?: Length;
+  fill?: Paint; stroke?: Paint; strokeWidth?: Length;
+  strokes?: { color: Color; width: Length; dash?: Length[] }[];
+  dash?: 'dashed' | 'dotted' | Length[];
+  linecap?: 'butt' | 'round' | 'square'; linejoin?: 'miter' | 'round' | 'bevel'; fillRule?: 'nonzero' | 'evenodd';
+  opacity?: number;
+}
+
+export interface ShapeLayer extends BaseLayer, Omit<ShapeSpec, 'opacity'> {
+  type: 'shape';
+  /** Several shapes in one layer (layer-level fill, stroke, … are their defaults). */
+  items?: ShapeSpec[];
+}
+
+
+/** Draw one shape, or `items` of them. */
+export function shape(layer: ShapeLayer, ctx: RenderContext): Promise<Markup>;
+/** A dash pattern as an SVG `stroke-dasharray`. */
+export function dashArray(dash: 'dashed' | 'dotted' | Length[], width: number, ctx: RenderContext): string;

package/src/layers/shape.js

@@ -0,0 +1,115 @@
+/**
+ * The `shape` layer.
+ *
+ * @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 { wrap, pos } from './util.js';
+import { geometry } from './geometry.js';
+import { soften } from './soft.js';
+
+/** Kinds drawn around a centre, whose `rotate` turns their points (about the centre). */
+const POLAR = ['star', 'burst', 'scallop', 'rays', 'sector'];
+
+/** Kinds that are lines unless closed: no fill by default. */
+const isOpen = (/** @type {any} */ s) => s.kind === 'line' || s.kind === 'polyline' || (s.kind === 'wave' && !s.band) || (s.kind === 'arch' && s.open);
+
+/**
+ * `shape` — one exact shape, or `items` of them: rectangles (with deckled,
+ * torn, zigzag or wavy `edge`s), circles, ellipses, lines, polygons, stars,
+ * bursts, scallops, rays, rings, sectors, arches (open: an arc), waves, raw
+ * paths and the print format's `cut`. Each takes `fill` and `stroke` (a
+ * colour, a gradient, a tile or a preset), `strokeWidth`, `dash`,
+ * `dashOffset`, `linecap`, `linejoin`, `fillRule`, `opacity`, `rotate`
+ * (about its centre, or `origin`), `soft` (a blur, drawn padded so it never
+ * shows a square edge) and `strokes` (stacked keylines, widest first).
+ *
+ * @param {any} layer
+ * @param {import('../layers.js').RenderContext} ctx
+ * @returns {Promise<import('../layers.js').Markup>}
+ */
+export async function shape(layer, ctx) {
+  const items = layer.items ?? [layer];
+  let defs = '';
+  let body = '';
+  for (let i = 0; i < items.length; i++) {
+    const raw = items[i];
+    const s = layer.items ? { fill: layer.fill, stroke: layer.stroke, strokeWidth: layer.strokeWidth, dash: layer.dash, dashOffset: layer.dashOffset, linecap: layer.linecap, linejoin: layer.linejoin, strokes: layer.strokes, soft: layer.soft, ...raw } : raw;
+    const polar = POLAR.includes(s.kind) && s.origin == null;
+    const g = /** @type {any} */ (geometry(polar ? s : { ...s, rotate: undefined }, ctx));
+    const open = g.el ?? `<path d="${g.d}"`;
+    const fp = paint(s.fill, isOpen(s) ? 'none' : ctx.palette.text, { id: `${ctx.id}s${i}f`, box: g.box, canvas: ctx.canvas });
+    const sp = s.stroke ? paint(s.stroke, 'none', { id: `${ctx.id}s${i}k`, box: g.box, canvas: ctx.canvas }) : null;
+    let own = fp.defs + (sp?.defs ?? '');
+    const sw = s.strokeWidth != null ? len(s.strokeWidth, ctx.canvas) : sp ? len('0.2vmin', ctx.canvas) : undefined;
+    const tr = [rotation(s, g, ctx, polar), g.transform].filter(Boolean).join(' ') || undefined;
+    const common = { 'fill-rule': s.fillRule, opacity: s.opacity != null && s.opacity < 1 ? s.opacity : undefined, transform: tr };
+    let markup = '';
+    const strokes = s.strokes ?? presetStrokes(s.fill);
+    if (strokes) {
+      const sorted = [...strokes].sort((a, b) => len(b.width, ctx.canvas) - len(a.width, ctx.canvas));
+      for (const k of sorted) markup += `${open}${attrs({ fill: 'none', stroke: toHex(k.color), 'stroke-width': len(k.width, ctx.canvas), 'stroke-linejoin': 'round', 'stroke-dasharray': k.dash ? dashArray(k.dash, len(k.width, ctx.canvas), ctx) : undefined, ...common })}/>`;
+    }
+    markup += `${open}${attrs({ fill: fp.value, stroke: sp?.value, 'stroke-width': sp ? sw : undefined, 'stroke-dasharray': s.dash ? dashArray(s.dash, sw ?? 1, ctx) : undefined, 'stroke-dashoffset': s.dash && s.dashOffset != null ? len(s.dashOffset, ctx.canvas) : undefined, 'stroke-linecap': s.linecap ?? (s.dash === 'dotted' ? 'round' : undefined), 'stroke-linejoin': s.linejoin, ...common })}/>`;
+    if (s.soft) {
+      // The blur's reach, round the shape's bounds (turned, when it's turned).
+      const soft = await soften({ defs: own, body: markup }, reach(g.box, s, tr ? s.rotate ?? 0 : 0, sw), len(s.soft, ctx.canvas), ctx, `${ctx.id}s${i}b`);
+      own = soft.defs;
+      markup = soft.body;
+    }
+    defs += own;
+    body += markup;
+  }
+  return { defs, body: wrap(layer, body) };
+}
+
+/**
+ * A dash pattern: `'dashed'`, `'dotted'`, or lengths `[on, off, …]`.
+ *
+ * @param {any} dash @param {number} width - The stroke width (dashed and dotted scale with it).
+ * @param {import('../layers.js').RenderContext} ctx
+ * @returns {string}
+ */
+export function dashArray(dash, width, ctx) {
+  if (Array.isArray(dash)) return dash.map((/** @type {any} */ d) => num(len(d, ctx.canvas))).join(' ');
+  return dash === 'dotted' ? `0 ${num(width * 2.4)}` : `${num(width * 3)} ${num(width * 2.4)}`;
+}
+
+/**
+ * The rotation of a shape: about its centre, or `origin` (`[x, y]`, px or
+ * `'%'`). Polar kinds turn their points about the centre instead.
+ *
+ * @param {any} s @param {{ box: { x: number, y: number, width: number, height: number } }} g
+ * @param {import('../layers.js').RenderContext} ctx @param {boolean} polar
+ * @returns {string | undefined}
+ */
+function rotation(s, g, ctx, polar) {
+  if (!s.rotate || polar) return undefined;
+  const [ox, oy] = s.origin != null
+    ? (Array.isArray(s.origin) ? [pos(s.origin[0], 'x', ctx.canvas), pos(s.origin[1], 'y', ctx.canvas)] : [pos(s.origin.x, 'x', ctx.canvas), pos(s.origin.y, 'y', ctx.canvas)])
+    : [g.box.x + g.box.width / 2, g.box.y + g.box.height / 2];
+  return `rotate(${num(s.rotate, 3)} ${num(ox)} ${num(oy)})`;
+}
+
+/**
+ * The box a shape can paint in: its bounds (turned, when turned about its
+ * centre) plus its stroke.
+ *
+ * @param {{ x: number, y: number, width: number, height: number }} box
+ * @param {any} s @param {number} rotate @param {number | undefined} sw
+ * @returns {{ x: number, y: number, width: number, height: number }}
+ */
+function reach(box, s, rotate, sw) {
+  const a = (rotate * Math.PI) / 180;
+  const w = s.origin == null ? Math.abs(box.width * Math.cos(a)) + Math.abs(box.height * Math.sin(a)) : Math.hypot(box.width, box.height) * 2;
+  const h = s.origin == null ? Math.abs(box.width * Math.sin(a)) + Math.abs(box.height * Math.cos(a)) : w;
+  const stroke = (sw ?? 0) + Math.max(0, ...(s.strokes ?? []).map((/** @type {any} */ k) => (typeof k.width === 'number' ? k.width : 0)));
+  const cx = box.x + box.width / 2;
+  const cy = box.y + box.height / 2;
+  return { x: cx - w / 2 - stroke, y: cy - h / 2 - stroke, width: w + 2 * stroke, height: h + 2 * stroke };
+}

package/src/layers/soft.d.ts

@@ -0,0 +1,5 @@
+// Soft (blurred) shapes, drawn padded.
+import type { RenderContext, Markup } from '../render/context.js';
+
+/** Blur markup by `sigma`, padded 3σ round `box` (raster with sharp, else an SVG blur). */
+export function soften(m: Markup, box: { x: number; y: number; width: number; height: number }, sigma: number, ctx: RenderContext, id: string): Promise<Markup>;

package/src/layers/soft.js

@@ -0,0 +1,43 @@
+/**
+ * Soft shapes: a blur drawn padded, so a blurred orb never fades where it
+ * meets the canvas edge (librsvg clips a filter's input to the canvas) or
+ * shows the square edge of a filter region.
+ *
+ * @module layers/soft
+ */
+
+import { attrs, num } from '../svg.js';
+import { toBase64 } from '../platform/bytes.js';
+
+/**
+ * Blur markup by `sigma` (px in the layer's units). In `renderImage`, the markup
+ * is drawn on its own padded canvas (3σ round `box`) at the resolution the
+ * blur needs (about four pixels per σ, never more than the output's), blurred
+ * there, and embedded as an image; elsewhere it's an SVG blur over a filter
+ * region padded the same way.
+ *
+ * @param {{ defs: string, body: string }} m
+ * @param {{ x: number, y: number, width: number, height: number }} box - What the markup paints.
+ * @param {number} sigma
+ * @param {import('../layers.js').RenderContext} ctx
+ * @param {string} id
+ * @returns {Promise<{ defs: string, body: string }>}
+ */
+export async function soften(m, box, sigma, ctx, id) {
+  const pad = 3 * sigma;
+  const r = { x: box.x - pad, y: box.y - pad, width: box.width + 2 * pad, height: box.height + 2 * pad };
+  // Pixels only for renderImage (an SVG keeps its blur as a filter).
+  const sharp = /** @type {any} */ (ctx).raster ? /** @type {any} */ (ctx.sharp) : undefined;
+  if (!sharp || sigma <= 0) {
+    if (sigma <= 0) return m;
+    const filter = `<filter${attrs({ id, filterUnits: 'userSpaceOnUse', ...r, 'color-interpolation-filters': 'sRGB' })}><feGaussianBlur stdDeviation="${num(sigma, 3)}"/></filter>`;
+    return { defs: m.defs + filter, body: `<g filter="url(#${id})">${m.body}</g>` };
+  }
+  const res = /** @type {any} */ (ctx).res ?? 1;
+  const ppu = Math.min(res, Math.max(4 / sigma, 64 / Math.max(r.width, r.height)));
+  const w = Math.max(1, Math.ceil(r.width * ppu));
+  const h = Math.max(1, Math.ceil(r.height * ppu));
+  const doc = `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="${num(r.x, 4)} ${num(r.y, 4)} ${num(w / ppu, 4)} ${num(h / ppu, 4)}" preserveAspectRatio="none">${m.defs ? `<defs>${m.defs}</defs>` : ''}${m.body}</svg>`;
+  const png = await sharp(new TextEncoder().encode(doc)).blur(Math.max(0.3, sigma * ppu)).png().toBuffer();
+  return { defs: '', body: `<image${attrs({ x: r.x, y: r.y, width: num(w / ppu, 4), height: num(h / ppu, 4), preserveAspectRatio: 'none', href: `data:image/png;base64,${toBase64(png)}` })}/>` };
+}

package/src/layers/svg.d.ts

@@ -0,0 +1,23 @@
+// The `svg` layer.
+import type { Color, Length, BaseLayer, Anchor } from '../index.js';
+import type { RenderContext, Markup } from '../render/context.js';
+
+/** `svg`: raw markup, the escape hatch. */
+export interface SvgLayer extends BaseLayer {
+  type: 'svg';
+  /** Tokens: `{{@accent}}`, `{{@colors.1}}`, `{{@width}}`, `{{id}}`, `{{seed}}`; in JSON recipes `{{title}}` or any option. */
+  markup: string;
+  defs?: string;
+  viewBox?: [number, number, number, number];
+  x?: Length | `${number}%`; y?: Length | `${number}%`; width?: Length | `${number}%`; height?: Length | `${number}%`;
+  fit?: 'contain' | 'cover' | 'stretch';
+  align?: string;
+}
+
+
+/** Strip scripts, foreignObject, event handlers and links out of SVG markup. */
+export function sanitize(s: string): string;
+/** Shapes from a slot's markup (paths and basic shapes with geometry and paint attributes); anything else is escaped. */
+export function shapesOnly(markup: string): string;
+/** Draw raw markup with its tokens filled. */
+export function svg(layer: SvgLayer, ctx: RenderContext): Markup;

package/src/layers/svg.js

@@ -0,0 +1,109 @@
+/**
+ * The `svg` layer: raw markup, sanitised, with render-time tokens.
+ *
+ * @module layers/svg
+ */
+
+import { attrs, esc, num } from '../svg.js';
+import { unit } from '../geometry.js';
+import { pos, wrap } from './util.js';
+import { expandDropShadows } from '../effects/drop-shadow.js';
+import { filterReach } from '../effects/region.js';
+
+
+/**
+ * Remove what an SVG fragment must never carry: scripts, foreign objects,
+ * event handlers and links out (`href`s other than `#…` and `data:`).
+ *
+ * @param {string} s
+ * @returns {string}
+ */
+export function sanitize(s) {
+  return String(s)
+    .replace(/<script\b[\s\S]*?<\/script\s*>/gi, '')
+    .replace(/<script\b[^>]*\/>/gi, '')
+    .replace(/<foreignObject\b[\s\S]*?<\/foreignObject\s*>/gi, '')
+    .replace(/\son[a-z]+\s*=\s*("[^"]*"|'[^']*'|[^\s>]+)/gi, '')
+    .replace(/\s(xlink:)?href\s*=\s*("|')(?!#|data:)[^"']*\2/gi, '');
+}
+
+/** Elements a markup slot may carry (shapes and groups). */
+const SHAPES = new Set(['g', 'path', 'circle', 'ellipse', 'rect', 'polygon', 'polyline', 'line']);
+
+/** Attributes a markup slot may carry. */
+const SHAPE_ATTRS = new Set(['d', 'cx', 'cy', 'r', 'rx', 'ry', 'x', 'y', 'width', 'height', 'points', 'x1', 'y1', 'x2', 'y2', 'transform', 'fill', 'stroke', 'stroke-width', 'opacity', 'fill-opacity', 'stroke-opacity', 'fill-rule', 'clip-rule', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-dasharray', 'stroke-dashoffset']);
+
+/**
+ * Shapes from a slot's markup (a mark's paths): `g`, `path`, `circle`,
+ * `ellipse`, `rect`, `polygon`, `polyline` and `line` with their geometry
+ * and paint attributes are kept; any other element is escaped (inert
+ * text), and other attributes dropped. Paint can't reference anything
+ * outside (`url(…)` is dropped).
+ *
+ * @param {string} markup
+ * @returns {string}
+ */
+export function shapesOnly(markup) {
+  return String(markup).replace(/<\/?([a-zA-Z][\w:-]*)([^>]*)>/g, (tag, name, rest) => {
+    if (!SHAPES.has(name)) return tag.replace(/[&<>"']/g, (ch) => /** @type {Record<string, string>} */ ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[ch]);
+    if (tag.startsWith('</')) return `</${name}>`;
+    const self = /\/\s*$/.test(rest);
+    let kept = '';
+    for (const m of rest.matchAll(/([\w:-]+)\s*=\s*("([^"]*)"|'([^']*)')/g)) {
+      const value = m[3] ?? m[4];
+      if (SHAPE_ATTRS.has(m[1]) && !/url\s*\(|javascript:/i.test(value)) kept += ` ${m[1]}="${esc(value)}"`;
+    }
+    return `<${name}${kept}${self ? '/' : ''}>`;
+  });
+}
+
+/**
+ * Replace render-time tokens in markup: `{{@accent}}` and the other palette
+ * and canvas tokens, `{{id}}` (a prefix unique to this layer, for ids in
+ * `defs`), and `{{seed}}` (a seeded number).
+ *
+ * @param {string} s @param {import('../layers.js').RenderContext} ctx
+ * @returns {string}
+ */
+function tokens(s, ctx) {
+  const p = /** @type {any} */ (ctx.palette);
+  return s.replace(/\{\{\s*([@\w.]+)\s*\}\}/g, (m, k) => {
+    if (k === 'id') return ctx.id;
+    if (k === 'seed') return String(ctx.rng.int(1, 9999));
+    if (k.startsWith('@')) {
+      const [head, idx] = k.slice(1).split('.');
+      if (head === 'width' || head === 'height') return num(ctx[head]);
+      if (head === 'u') return num(unit(ctx.canvas));
+      if (head === 'colors') return esc(p.colors[Number(idx ?? 0) % p.colors.length]);
+      if (Object.hasOwn(p, head)) return esc(String(p[head]));
+    }
+    return m;
+  });
+}
+
+/**
+ * `svg` — raw SVG markup, the escape hatch for anything too bespoke for a
+ * layer. `markup` is drawn in the layer's canvas, or from a `viewBox` into
+ * a box (`x`, `y`, `width`, `height`, `fit`); `defs` go in the document's
+ * defs. Palette and canvas tokens are written `{{@accent}}`, `{{@colors.1}}`,
+ * `{{@width}}`; `{{id}}` prefixes ids; in a JSON recipe `{{title}}` and any
+ * other option is filled in (escaped) too. Scripts, event handlers and
+ * external links are stripped.
+ *
+ * @param {any} layer
+ * @param {import('../layers.js').RenderContext} ctx
+ * @returns {import('../layers.js').Markup}
+ */
+export function svg(layer, ctx) {
+  const markup = expandDropShadows(sanitize(tokens(String(layer.markup ?? ''), ctx)));
+  const defs = layer.defs ? expandDropShadows(sanitize(tokens(String(layer.defs), ctx))) : '';
+  /** @type {any} */ (ctx).noteReach?.(filterReach(defs + markup) * (/** @type {any} */ (ctx).res ?? 1));
+  let body = markup;
+  if (layer.viewBox) {
+    const vb = Array.isArray(layer.viewBox) ? layer.viewBox : String(layer.viewBox).split(/[\s,]+/).map(Number);
+    const fit = layer.fit ?? 'contain';
+    const par = fit === 'stretch' ? 'none' : `${layer.align ?? 'xMidYMid'} ${fit === 'cover' ? 'slice' : 'meet'}`;
+    body = `<svg${attrs({ x: pos(layer.x ?? 0, 'x', ctx.canvas), y: pos(layer.y ?? 0, 'y', ctx.canvas), width: layer.width != null ? pos(layer.width, 'x', ctx.canvas) : ctx.width, height: layer.height != null ? pos(layer.height, 'y', ctx.canvas) : ctx.height, viewBox: vb.map((/** @type {number} */ v) => num(v, 3)).join(' '), preserveAspectRatio: par, overflow: 'visible' })}>${markup}</svg>`;
+  }
+  return { defs, body: wrap(layer, body) };
+}

package/src/layers/table.d.ts

@@ -0,0 +1,25 @@
+// The `table` layer.
+import type { Color, Length, BaseLayer, Anchor } from '../index.js';
+import type { RenderContext, Markup } from '../render/context.js';
+
+/** A table cell: text, or text with its own style. */
+export type TableCell = string | number | { content: string | number; weight?: number; size?: Length; color?: Color; align?: 'left' | 'center' | 'right'; font?: string; opacity?: number; width?: Length };
+
+export interface TableLayer extends BaseLayer {
+  type: 'table';
+  rows: (TableCell[] | string | Record<string, TableCell>)[];
+  columns?: { x?: Length | `${number}%`; align?: 'left' | 'center' | 'right'; width?: Length; key?: string; weight?: number; size?: Length; color?: Color; font?: string; letterSpacing?: number; transform?: 'uppercase'; opacity?: number; lengthAdjust?: 'spacingAndGlyphs' | 'spacing' }[];
+  x?: Length | `${number}%`;
+  /** First baseline. */
+  y?: Length | `${number}%`;
+  size?: Length; lineHeight?: Length; rowHeight?: Length; rowGap?: Length;
+  font?: string; weight?: number; style?: 'normal' | 'italic'; axes?: Record<string, number>;
+  color?: Color; letterSpacing?: number;
+  header?: Record<string, unknown>;
+  rules?: boolean | { at?: 'between' | 'each' | 'top'; color?: Color; width?: Length; opacity?: number; x1?: Length; x2?: Length; above?: number };
+  columnWidth?: Length;
+}
+
+
+/** Draw text on a grid. */
+export function table(layer: TableLayer, ctx: RenderContext): Promise<Markup>;