@arraypress/covers 0.0.0-stage → 1.1.0

package/src/kit/index.js

@@ -0,0 +1,58 @@
+/**
+ * A brand kit: one brand, every format, one call.
+ *
+ * @module kit
+ */
+
+import { renderSvg, renderPages, renderImage } from '../render.js';
+
+/** The formats a kit renders by default. */
+export const KIT_FORMATS = Object.freeze({
+  social: ['avatar', 'x-header', 'linkedin-banner', 'linkedin-company', 'youtube-banner', 'youtube-thumbnail', 'facebook-cover', 'instagram-post', 'instagram-square', 'instagram-story', 'instagram-reel', 'tiktok-cover', 'pinterest', 'twitch-banner', 'discord-banner', 'bluesky-banner', 'og'],
+  release: ['release', 'spotify-canvas', 'bandcamp-header'],
+  print: ['business-card', 'letterhead', 'compliment-slip', 'sticker', 'ticket', 'lanyard-pass'],
+});
+
+/** Formats printed on both sides by default. */
+const TWO_SIDED = new Set(['business-card', 'business-card-us']);
+
+/**
+ * Render a brand on many formats at once.
+ *
+ * `brand` is any cover options shared by every piece: `name`, `tagline`,
+ * `palette`, `mark` (path markup on a 512 grid), `photo`, `fonts`, `lines`
+ * (contact lines), `person` and `role`, … `recipe` is one recipe for all
+ * formats (the built-in `brand` by default) or a map from format to recipe
+ * (with `default`). Two-sided formats (business cards, or any in `pages`)
+ * come back as `{ front, back }`.
+ *
+ * @param {Record<string, any>} brand
+ * @param {{ formats?: string[], recipe?: any, pages?: Record<string, string[]>, render?: 'svg' | 'webp' | 'png' | 'jpeg' | 'avif', overlay?: boolean }} [options]
+ * @returns {Promise<Record<string, any>>} By format: an SVG string (or image bytes), or `{ front, back }`.
+ *
+ * @example
+ * const files = await kit({ name: 'Hollow Fern', palette: { accent: '#2f6b4f' }, mark }, { formats: ['avatar', 'x-header', 'business-card'] });
+ * files['business-card'].back; // '<svg …'
+ */
+export async function kit(brand, options = {}) {
+  const formats = options.formats ?? [...KIT_FORMATS.social, ...KIT_FORMATS.release, ...KIT_FORMATS.print];
+  const pick = (/** @type {string} */ f) => {
+    const r = options.recipe;
+    if (r && typeof r === 'object' && !Array.isArray(r) && !r.layers) return r[f] ?? r.default ?? 'brand';
+    return r ?? 'brand';
+  };
+  /** @type {Record<string, any>} */
+  const out = {};
+  for (const format of formats) {
+    const input = { seed: brand.seed ?? brand.name ?? 'brand', ...brand, recipe: pick(format), format, overlay: options.overlay };
+    const pages = options.pages?.[format] ?? (TWO_SIDED.has(format) ? ['front', 'back'] : null);
+    const render = options.render ?? 'svg';
+    if (pages) {
+      if (render === 'svg') out[format] = await renderPages(input, { pages });
+      else out[format] = Object.fromEntries(await Promise.all(pages.map(async (page) => [page, await renderImage({ ...input, page }, { format: render })])));
+    } else {
+      out[format] = render === 'svg' ? await renderSvg(input) : await renderImage(input, { format: render });
+    }
+  }
+  return out;
+}

package/src/layer-options.js

@@ -0,0 +1,56 @@
+/**
+ * Every layer type's option names, with one-line descriptions. The JSON
+ * recipe validator rejects names not listed here, and
+ * `scripts/schema.mjs` builds the JSON Schema's autocomplete from it.
+ * Add an option to a layer, add it here.
+ *
+ * @module layer-options
+ */
+
+/** @type {Record<string, Record<string, string>>} Layer options, by type: name → description. */
+export const LAYER_OPTIONS = {
+  solid: { color: 'Fill. Default @bg.' },
+  linear: { colors: 'Two or more colours.', opacities: 'Per-stop opacity.', angle: 'CSS degrees (0 = up). Default seeded.', ease: 'Smoothstep stops. Default true.' },
+  radial: { colors: 'Centre → edge.', x: 'Centre x, 0–1.', y: 'Centre y, 0–1.', radius: 'Length. Default "80vmax".', ease: 'Default true.' },
+  mesh: { colors: 'Blob colours.', hues: 'Distinct colours to use. Default 3.', hueSpan: 'Keep the colours within this many degrees of hue (OKLCH): neighbouring hues only.', count: 'Blobs. Default 4.', blur: 'Length. Default "11vmax".', spread: '0–1. Default 1 (sweep), 0.7 (ring).', size: '[min, max] radius, fractions of the longer side.', base: 'Fill under the fields: "auto" (a gradient across the sweep between the first two colours; default), "bg", a colour, or null.', arrangement: 'sweep (default: long fields along one direction) | ring', angle: 'Sweep direction in degrees. Default seeded.', streak: 'How much more the sweep blurs along than across. Default 1.5.', tone: '{ l: [min, max], c: [min, max] }: pull colours into an OKLCH band.', fold: 'true or { color, to, position, bend, softness, sheen }: a second field meeting the first along a soft curve.', streaks: 'Thin light motion streaks along the sweep. Default 0.', from: 'A photo (path or bytes) to take the colours from (needs sharp).', blobs: 'Explicit [{ x, y, r, squash, rotate, color, opacity }].' },
+  stripes: { direction: 'vertical | horizontal | diagonal', angle: 'For diagonal.', count: 'Stripes. Default 8.', widths: 'even | random | taper | [weights]', taper: 'Ratio for widths: taper.', colors: 'Cycled.', gap: 'Length.', radius: 'Length.', region: '{ x, y, width, height } fractions.', regionRadius: 'Length.' },
+  image: { x: 'Box left, px or "%" (with y, width, height: an explicit box instead of region).', y: 'Box top.', width: 'Box width.', height: 'Box height.', src: 'A local path, data: URI, URL (where allowed) or bytes ("{image}").', fit: 'cover | contain | stretch', focus: 'An anchor, attention or entropy.', region: 'Fractions.', duotone: 'true or [shadow, highlight].', grayscale: 'boolean', normalize: 'Stretch tones first.', tint: 'A colour or { color, amount, blend }.', blur: 'Length.' },
+  grain: { amount: '0–1. Default 0.08.', size: 'Grain px. Default 1.', monochrome: 'Default true.', vary: '"edges": heavier toward the edges (spray paint).' },
+  pattern: { kind: 'grid | dots | lines | rings | waves', size: 'Cell. Length.', stroke: 'Length.', color: 'Default @text.', angle: 'For lines.', center: '{ x, y } fractions.', wavelength: 'Length.', amplitude: 'Length.', fade: 'none | radial | edges | top | bottom | left | right', dash: 'dotted | dashed | [on, off] lengths.', divisions: 'Grid/lines: N equal cells (inner lines only) instead of size.', gaps: '[{ x, y, width, height }] fractions the lines break around.', region: 'Fractions.' },
+  shapes: { kind: 'circle | square | pill | mixed', count: 'Default 6.', size: '[min, max] lengths.', colors: 'Cycled.', placement: 'scatter | row | column', items: '[{ kind, x, y, size, color, rotate, opacity }]', region: 'Fractions.', rotate: 'Tilt squares and pills.', radius: 'Square corner, fraction of size.', outline: 'true or a width.' },
+  icon: { fill: 'A gradient, tile or preset paint for the icon (instead of color).', markup: 'Inner SVG markup on a 512 grid (a mark\'s paths); viewBox overrides the grid.', x: 'Left, px (with y: placed by its top-left corner).', y: 'Top, px.', name: 'Iconify name ("lucide:feather") or raw SVG ("{icon}").', svg: 'Raw SVG.', path: 'A path d.', viewBox: '[x, y, w, h] for path.', size: 'Length. Default "24vmin".', color: 'Default the accent on a tile, else @text.', strokeWidth: 'Stroke icons.', anchor: 'One of nine anchors.', position: '{ x, y } fractions.', offset: '{ x, y } lengths.', margin: 'Length.', tile: 'true or { size, radius, color, shadow, border }.' },
+  text: { content: 'The text ("{title}").', font: 'Family. Default Inter.', weight: 'Default 600.', style: 'normal | italic', size: 'Length.', minSize: 'Shrink toward this before truncating.', lineHeight: 'Default 1.12.', letterSpacing: 'Em. Default -0.02.', color: 'Default @text.', align: 'left | center | right', anchor: 'Default bottom-left.', position: '{ x, y } fractions.', offset: '{ x, y } lengths.', margin: 'Length.', maxWidth: 'Length.', maxLines: 'Default 3.', ellipsis: "Default '…'.", balance: 'Default true.', transform: 'none | uppercase | lowercase', label: 'A string or { content, size, weight, color, letterSpacing, transform, gap }.', background: 'A colour or { color, radius, padding, opacity }.',
+    x: 'First baseline x, px or "%" (like SVG <text>; align is the text-anchor).', y: 'First baseline y.', width: 'Justify every line to this width (like textLength).', justify: 'Justify every line to maxWidth.', lengthAdjust: 'spacingAndGlyphs (default: scale) | spacing', fit: 'width (the block fills width) | lines (each line fills width) | words (a word a line, the widest filling width) | wrap (wrap at width, then fill it) | shrink', stretch: '[sx, sy] or sy: stretch about the first baseline.', axes: 'Variable-font axes: { wdth: 50, SOFT: 100, WONK: 1, opsz: 144 }.', stroke: 'Outline colour.', strokeWidth: 'Outline width.', strokes: '[{ color, width }]: keylines, widest first, under the fill.', fill: 'A colour, a gradient, or "none" (outline type).', path: 'Text on a path: { kind: circle | arc | ellipse | wave, cx, cy, r, start, end, direction } or { d }.', startOffset: 'Along the path: 0–1 or px. Default 0.5 (centred).', fitPath: 'Space the text to fill the path (a ring); a number leaves that gap.', dy: 'Shift off the path.', render: 'outline (default) | live (<text> with @font-face)', autoColors: '[light, dark] for color: "auto". Default ["#ffffff", "#0b0b0b"].', autoThreshold: 'color: "auto" takes the dark colour above this backdrop luma (0–1). Default 0.72.', lines: 'Reserved.',
+    spans: '[{ content, font, weight, style, axes, scale, size, color, letterSpacing, dy }]: mixed runs on the same lines.', glyphs: '{ scale, scaleX, scaleY, dx, dy, rotate, color, origin, advance }: per-glyph arrays (cycled; spaces skipped).', fallback: 'A family (or list) for characters the font lacks; then fonts registered with fallback: true, then the built-in symbols.', split: 'words: a word a line.', dash: 'Dashes on the stroke: [on, off] lengths, dashed or dotted.', extrude: 'A depth, or { depth, angle, color, to, steps }: block extrusion.', maxHeight: 'Shrink the block to this height.' },
+  diagram: { icon: 'One icon (Iconify name or raw SVG), drawn as white line-art.', nodes: '[{ icon, shape: square | circle | none, size, brackets }]', layout: 'single | row | triangle | square | stack | hub', arrows: 'true | false | loop | both | cycle', shape: 'For a single icon: none (default) | square | circle.', size: 'Node size. Length.', gap: 'Space between nodes. Length.', stroke: 'Line width. Default "0.3vmin".', color: 'Line colour. Default white.', radius: 'Tile corner radius.', iconScale: 'Icon size inside a tile, 0–1. Default 0.44.', position: '{ x, y } centre, fractions.', grid: 'true or { divisions, opacity, stroke, color, pad }: a dotted grid that breaks around the drawing.' },
+  paper: { count: 'Shapes in the collage. Default 4.', kind: 'mixed | rect | square | circle | blob | arch | pill', color: 'Default #faf9f5 (paper).', region: 'Where the collage sits, fractions.', items: '[{ kind, x, y, width, height, size, rotate, color }] placed in the region.', wobble: 'How rough the cut edges are, 0–1. Default 0.5.' },
+  scribble: { icon: 'An icon to re-draw by hand (Iconify name or raw SVG).', graph: 'true or { nodes, dot }: a hand-drawn node graph instead.', color: 'Default #faf9f5.', stroke: 'Line width. Default "1.3vmin".', size: 'Length. Default "46vmin".', position: '{ x, y } centre, fractions.', wobble: '0–1. Default 0.5.' },
+  ink: { color: 'The ink: a colour or riso:pink | blue | yellow | teal | red | green | orange | purple | navy | black.', shapes: '[{ kind: circle | ring | half | arch | band | rect | text, x, y, r, size, width, height, thickness, rotate, content, … }]', offset: '{ x, y }: misregistration. Default seeded, 0.3–1% of the short side.', texture: 'grain (default) | halftone | none', speckle: 'Grain: share of paper showing through. Default 0.09.', cell: 'Halftone cell. Length.', dot: 'Halftone dot radius, fraction of the cell.', angle: 'Halftone screen angle: 0 or 45 (default seeded).', density: '[min, max]: uneven ink across the sheet. Default [0.78, 1].' },
+  dither: { colors: '[ground, ink] or [c0, c1, c2] (two dithered bands).', source: 'field (default, noise) | linear | radial', shape: 'none | circle | sphere | arch', size: 'Shape size. Length.', center: '{ x, y } fractions.', matrix: 'bayer4 (default) | bayer8 | noise', cell: 'Pixel size. Length. Default "0.9vmin".', angle: 'For linear.', scale: 'Noise feature size.', gamma: 'Tone curve.', range: '[lo, hi] of the field.' },
+  contour: { levels: 'Isolines. Default 20.', color: 'Default @text.', stroke: 'Default "0.14vmin".', highlight: 'Level to draw in the accent (default seeded), or false.', highlightColor: 'Default @accent.', index: 'Every Nth line thicker. Default 5 (0: none).', indexWeight: 'Index line weight multiple.', scale: 'Noise feature size.', octaves: 'Noise detail.', resolution: 'Grid cells across the short side.' },
+  waveform: { peaks: 'Peak values (any scale).', audio: 'An audio file to decode at build (needs @arraypress/waveform-gen).', bars: 'Bars. Default 88.', style: 'mirrored (default) | bars | line | dots', color: 'Default @accent.', region: 'Fractions.', gap: 'Gap between bars, fraction. Default 0.4.', round: 'Rounded bars. Default true.', stroke: 'Line style width.', caption: 'true (the duration) or text under the wave.', duration: 'Seconds (for the caption).', captionSize: 'Length.', captionColor: 'Default @text.' },
+  tiles: { cols: 'Columns. Default from the series.', rows: 'Rows. Default to keep cells near square.', series: 'Seeds the grid rhythm shared by a series.', colors: 'Shape and cell colours.', ground: 'The page colour among them.', kinds: 'Subset of quarter, half, circle, square, triangle.', merge: 'A 2×2 merged cell. Default true.', region: 'Fractions.' },
+  rule: { y: 'Height, fraction. Default 0.15.', from: '{ x, y } fractions.', to: '{ x, y } fractions.', inset: 'Side inset. Length.', color: 'Default @text.', stroke: 'Default "0.12vmin".' },
+  frame: { inset: 'Length.', radius: 'Length.', stroke: 'Length.', color: 'Default @text.', fill: 'A colour (a card).' },
+  repeat: { layer: 'The layer to repeat (or layers, drawn as a group). {#…} expressions use i, n, row, col, rows, cols, x, y, angle, odd.', layers: 'Several layers to repeat as one.', rows: 'Grid rows.', cols: 'Grid columns.', count: 'Instances in a ring or a line.', step: '[dx, dy] between instances (a grid divides the canvas by default).', x: 'Where the first instance goes.', y: 'Where the first instance goes.', cx: 'Ring centre x.', cy: 'Ring centre y.', radius: 'Ring radius.', start: 'Ring start, degrees (0 = up, clockwise).', sweep: 'Ring sweep, degrees. Default 360.', turn: 'Turn ring instances to their angle. Default true.', odd: 'Overrides for odd instances (a checkerboard on a grid).', cycle: '[overrides] taken in turn.', skip: 'An expression ({#…}): leave the instance out when true.' },
+  defs: { layers: 'Layers with ids, for use layers to draw (nothing is drawn here).' },
+  use: { ref: 'The id of a layer in an earlier defs layer.', x: 'Where the copy goes.', y: 'Where the copy goes.', rotate: 'Degrees, about the copy\'s origin.', scale: 'A number or [sx, sy].', place: 'A transform instead of x, y, rotate and scale.', with: 'Options for this copy only.' },
+  group: { layers: 'The layers inside.', viewBox: '[x, y, w, h]: its own design grid (children use its units).', x: 'Box left, px.', y: 'Box top.', width: 'Box width.', height: 'Box height.', fit: 'contain (default) | cover | stretch | width | height', align: 'Where a fitted grid sits: center, top-left, …', clipToBox: 'Clip to the box.' },
+  shape: { kind: 'rect | circle | ellipse | line | polygon | polyline | star | burst | scallop | rays | ring | sector | arch | wave | path | cut (the print format\'s die-cut)', origin: 'rotate about [x, y] (px or "%") instead of the centre.', open: 'arch: the arc and sides only (stroked).', soft: 'A blur radius: soft orbs, drawn padded (no edge fade, no square edge).', dashOffset: 'Where the dash pattern starts.', outset: 'cut: grow (or shrink) the outline.', items: '[{ kind, … }]: several shapes in one layer.', x: 'px or "%".', y: 'px or "%".', width: 'px.', height: 'px.', cx: 'Centre x.', cy: 'Centre y.', r: 'Radius.', rx: 'Ellipse x radius.', ry: 'Ellipse y radius.', x1: 'Line/wave start x.', y1: 'Line start y.', x2: 'End x.', y2: 'End y.', points: 'Polygon [[x, y], …], or star/burst/scallop point count.', inner: 'Star/burst inner radius (≤1: fraction) or ring inner radius.', count: 'Rays.', start: 'Sector start, degrees (0 = up, clockwise).', end: 'Sector end.', depth: 'Scallop depth.', amplitude: 'Wave height.', wavelength: 'Wave length.', phase: 'Wave phase, radians.', band: 'Wave: fill a band this tall.', d: 'Path data.', viewBox: 'Path: its grid, drawn into x, y, width, height.', radius: 'Rect corner radius.', edge: 'Rect edges: deckle | torn | zigzag | wave | scallop, or { kind, size, step, sides }.', rotate: 'Degrees about its centre.', fill: 'A colour, a gradient { type, colors, stops, opacities, angle, spread, length, rx, ry, … }, a tile { type: "tile", kind: checker | stripes | dots | grid | custom, size, colors, ratio, angle, markup } or a preset { preset: "chrome" | "steel" | "gold" }.', stroke: 'A colour or a gradient.', strokeWidth: 'Length.', strokes: '[{ color, width, dash }]: keylines under the shape.', dash: 'dashed | dotted | [on, off].', linecap: 'butt | round | square', linejoin: 'miter | round | bevel', fillRule: 'nonzero | evenodd' },
+  svg: { markup: 'Raw SVG, drawn in the canvas (or from viewBox). Tokens: {{@accent}}, {{@colors.1}}, {{@width}}, {{id}}, {{seed}}, and in JSON recipes {{title}} or any option.', defs: 'Raw SVG for <defs>.', viewBox: '[x, y, w, h] of the markup.', x: 'Box left.', y: 'Box top.', width: 'Box width.', height: 'Box height.', fit: 'contain (default) | cover | stretch', align: 'xMidYMid etc.' },
+  table: { rows: 'Rows: arrays of cells, or objects read by column key ("{tracklist}"). A cell is text or { content, weight, size, color, align, … }.', columns: '[{ x, align, width, key, weight, size, color, font, letterSpacing, transform, opacity }]', x: 'Left, px.', y: 'First baseline, px.', size: 'Type size. Default "2.2vmin".', lineHeight: 'Line step inside a cell.', rowHeight: 'Fixed row step.', rowGap: 'Extra space between rows.', font: 'Family.', weight: 'Default 400.', style: 'normal | italic', axes: 'Variable axes.', color: 'Default @text.', letterSpacing: 'Em.', header: 'Style for the first row.', rules: 'true or { at: between | each | top, color, width, opacity, x1, x2, above }.', columnWidth: 'Column step when columns give no x.' },
+  barcode: { value: 'Text to encode (Code 128).', content: 'Same as value.', kind: 'code128 (default) | seeded (decorative)', x: 'px.', y: 'px.', width: 'px.', height: 'px.', color: 'Default @text.', text: 'true (the value) or text under the bars.', size: 'Text size.', font: 'Family.', weight: 'Text weight.', letterSpacing: 'Em.' },
+  perforation: { kind: 'holes (default) | dashes | notches', x: 'A vertical line at x.', x1: 'Start x.', y1: 'Start y.', x2: 'End x.', y2: 'End y.', size: 'Hole or notch radius.', gap: 'Spacing.', inset: 'Space before the first hole.', color: 'Default @text (or punch it with knockout).', strokeWidth: 'Dashes width.' },
+  tear: { from: '[x, y] where the tear starts (edge to edge).', to: '[x, y] where it ends.', side: 'Which side keeps the sheet: above (default) | below | left | right', color: 'The sheet (a colour, a gradient, or "none" for just the edge).', sheetOpacity: 'The sheet\'s opacity.', step: 'Spacing of the jagged points.', jitter: 'How jagged.', rip: 'false, or { color, width, opacity }: the torn white edge.', fibres: 'false, or { color, width, opacity, length: [min, max], spread }.', ripColor: 'Colour of the rip and fibres. Default #fff6fb.' },
+  texture: { kind: 'paper | creases | concrete | speck | wood | folds | dust', color: 'Fibre, aggregate or dust colour.', amount: 'Paper: fibre density.', frequency: 'Noise frequency (number or [x, y]).', octaves: 'Noise octaves.', depth: 'Creases: relief.', azimuth: 'Creases: light direction.', elevation: 'Creases: light height.', x: 'Folds: vertical fold positions, fractions.', y: 'Folds: horizontal fold positions, fractions.', width: 'Folds: band width.', strength: 'Folds: shading.', count: 'Dust: specks.', size: 'Dust: [min, max] radius.', region: 'Clip to { x, y, width, height } (px or "%").' },
+};
+
+/** @type {Record<string, string>} Options every layer takes (besides type, id and when). */
+export const COMMON = {
+  opacity: '0–1.', blend: 'A CSS mix-blend-mode.', seed: "This layer's own random stream.",
+  transform: '{ translate, rotate, scale, skewX, skewY, mirror: x | y, origin } (on text, a case keyword is still the case).',
+  effects: '[{ kind, mask, colorSpace, … }]: filters, pixel effects and copies, in order (see the README\'s Effects table; kinds in EFFECTS).',
+  mask: 'Layers whose luminance masks this one (white shows).', knockout: 'Layers cut out of this one.', clip: 'Layers this one shows only inside.',
+  area: 'trim | safe | bleed, or { x, y, width, height } fractions: draw the layer in that box.',
+};
+

package/src/layers/barcode.d.ts

@@ -0,0 +1,19 @@
+// The `barcode` layer.
+import type { Color, Length, BaseLayer, Anchor } from '../index.js';
+import type { RenderContext, Markup } from '../render/context.js';
+
+export interface BarcodeLayer extends BaseLayer {
+  type: 'barcode';
+  /** Encoded as Code 128 (set B). */
+  value?: string;
+  content?: string;
+  kind?: 'code128' | 'seeded';
+  x?: Length | `${number}%`; y?: Length | `${number}%`; width?: Length | `${number}%`; height?: Length | `${number}%`;
+  color?: Color;
+  text?: boolean | string;
+  size?: Length; font?: string; weight?: number; letterSpacing?: number;
+}
+
+
+/** Draw a Code 128 barcode (or decorative bars). */
+export function barcode(layer: BarcodeLayer, ctx: RenderContext): Promise<Markup>;

package/src/layers/barcode.js

@@ -0,0 +1,63 @@
+/**
+ * The `barcode` layer.
+ *
+ * @module layers/barcode
+ */
+
+import { attrs, num } from '../svg.js';
+import { len } from '../geometry.js';
+import { toHex } from '../color.js';
+import { faceFor, setLine } from '../type/line.js';
+import { pos, wrap, contentOf } from './util.js';
+import { code128 } from './code128.js';
+
+/**
+ * `barcode` — a real Code 128 barcode of `value` (scannable at print
+ * sizes), or `kind: 'seeded'` decorative bars. `x`, `y`, `width`, `height`
+ * in px; `color`; `text: true` (the value under it) or any text; `quiet`
+ * zones are left to you.
+ *
+ * @param {any} layer
+ * @param {import('../layers.js').RenderContext} ctx
+ * @returns {Promise<import('../layers.js').Markup>}
+ */
+export async function barcode(layer, ctx) {
+  const x = pos(layer.x ?? '10%', 'x', ctx.canvas);
+  const y = pos(layer.y ?? '80%', 'y', ctx.canvas);
+  const w = layer.width != null ? pos(layer.width, 'x', ctx.canvas) : ctx.width * 0.3;
+  const h = layer.height != null ? pos(layer.height, 'y', ctx.canvas) : ctx.height * 0.08;
+  const color = layer.color ? toHex(layer.color) : ctx.palette.text;
+  /** @type {number[]} */
+  let widths;
+  if (layer.kind === 'seeded') {
+    widths = [];
+    let total = 0;
+    const target = 100;
+    while (total < target) {
+      const bar = ctx.rng.pick([0.7, 1.1, 1.6, 2.3]);
+      const gap = ctx.rng.pick([0.7, 1.1, 1.7]);
+      widths.push(bar, gap);
+      total += bar + gap;
+    }
+    widths.pop();
+  } else {
+    widths = code128(String(layer.value ?? contentOf(layer.content) ?? '0000'));
+  }
+  const total = widths.reduce((a, b) => a + b, 0);
+  const k = w / total;
+  let d = '';
+  let at = x;
+  widths.forEach((m, i) => {
+    if (i % 2 === 0) d += `M${num(at, 3)} ${num(y)}h${num(m * k, 3)}v${num(h)}h${num(-m * k, 3)}Z`;
+    at += m * k;
+  });
+  let body = `<path${attrs({ d, fill: color })}/>`;
+  if (layer.text) {
+    const label = layer.text === true ? String(layer.value ?? '') : String(layer.text);
+    const size = len(layer.size, ctx.canvas, h * 0.18);
+    const face = await faceFor(ctx, { font: layer.font, weight: layer.weight ?? 400 });
+    const line = setLine({ face, text: label, size, tracking: (layer.letterSpacing ?? 0.1) * size, x: x + w / 2, y: y + h + size * 1.1, align: 'center' });
+    body += `<path${attrs({ d: line.d, fill: color })}/>`;
+  }
+  return { defs: '', body: wrap(layer, body) };
+}

package/src/layers/code128.d.ts

@@ -0,0 +1,4 @@
+// Code 128 (set B).
+
+/** Module widths (bar, space, bar, …) for a string, start to stop with its check symbol. */
+export function code128(value: string): number[];

package/src/layers/code128.js

@@ -0,0 +1,28 @@
+/**
+ * Code 128 (set B) encoding.
+ *
+ * @module layers/code128
+ */
+
+
+/** Code 128 bar/space widths, values 0–106 (106 is the stop pattern). */
+const CODE128 = '212222 222122 222221 121223 121322 131222 122213 122312 132212 221213 221312 231212 112232 122132 122231 113222 123122 123221 223211 221132 221231 213212 223112 312131 311222 321122 321221 312212 322112 322211 212123 212321 232121 111323 131123 131321 112313 132113 132311 211313 231113 231311 112133 112331 132131 113123 113321 133121 313121 211331 231131 213113 213311 213131 311123 311321 331121 312113 312311 332111 314111 221411 431111 111224 111422 121124 121421 141122 141221 112214 112412 122114 122411 142112 142211 241211 221114 413111 241112 134111 111242 121142 121241 114212 124112 124211 411212 421112 421211 212141 214121 412121 111143 111341 131141 114113 114311 411113 411311 113141 114131 311141 411131 211412 211214 211232 2331112'.split(' ');
+
+/**
+ * Code 128 (set B) module widths for a string, start to stop with the
+ * check symbol: bars and spaces alternating, bar first.
+ *
+ * @param {string} value - Printable ASCII.
+ * @returns {number[]}
+ */
+export function code128(value) {
+  const codes = [104];
+  for (const ch of String(value)) {
+    const c = ch.charCodeAt(0);
+    if (c < 32 || c > 126) throw new TypeError(`Code 128 (set B) can't encode "${ch}"`);
+    codes.push(c - 32);
+  }
+  const check = codes.reduce((sum, v, i) => sum + v * (i || 1), 0) % 103;
+  codes.push(check, 106);
+  return codes.flatMap((v) => [...CODE128[v]].map(Number));
+}

package/src/layers/expr.d.ts

@@ -0,0 +1,6 @@
+// `{#…}` expressions for repeat instances.
+
+/** Evaluate an expression over variables (no `eval`: a small parser). */
+export function evaluate(src: string, vars: Record<string, number | string | boolean>): unknown;
+/** A value with its `{#…}` expressions filled in (nested repeats left alone). */
+export function fill<T>(v: T, vars: Record<string, number | string | boolean>): T;

package/src/layers/expr.js

@@ -0,0 +1,121 @@
+/**
+ * Per-instance values for `repeat`: `{#…}` expressions over the instance's
+ * variables (`i`, `row`, `col`, `n`, `rows`, `cols`, `angle`, `x`, `y`,
+ * `odd`), with `+ - * / %`, parentheses, comparisons, `a ? b : c` and
+ * `min`, `max`, `abs`, `floor`, `round`, `sin`, `cos`, `pick(i, a, b, …)`.
+ * No other code runs: it's a small parser, not `eval`.
+ *
+ * @module layers/expr
+ */
+
+/** Functions an expression can call. */
+const FNS = /** @type {Record<string, (...a: any[]) => any>} */ ({
+  min: Math.min, max: Math.max, abs: Math.abs, floor: Math.floor, ceil: Math.ceil, round: Math.round,
+  sin: (/** @type {number} */ d) => Math.sin((d * Math.PI) / 180), cos: (/** @type {number} */ d) => Math.cos((d * Math.PI) / 180),
+  pick: (/** @type {number} */ i, /** @type {any[]} */ ...xs) => xs[((Math.floor(i) % xs.length) + xs.length) % xs.length],
+});
+
+/** @param {string} src @returns {string[]} */
+function tokens(src) {
+  const out = [];
+  const re = /\s*(?:(\d*\.?\d+(?:e[+-]?\d+)?)|([A-Za-z_]\w*)|('[^']*'|"[^"]*")|(<=|>=|==|!=|&&|\|\||[-+*/%()?:,<>!]))/gy;
+  let m;
+  let at = 0;
+  while (at < src.length && (m = re.exec(src))) {
+    out.push(m[0].trim());
+    at = re.lastIndex;
+  }
+  if (src.slice(at).trim()) throw new TypeError(`Can't read "${src.slice(at).trim()}" in {#${src}}`);
+  return out;
+}
+
+/**
+ * Evaluate an expression.
+ *
+ * @param {string} src
+ * @param {Record<string, number | string | boolean>} vars
+ * @returns {any}
+ * @throws {TypeError} On an unknown name or bad syntax.
+ */
+export function evaluate(src, vars) {
+  const t = tokens(src);
+  let k = 0;
+  const peek = () => t[k];
+  const take = (/** @type {string} */ want) => { if (t[k] !== want) throw new TypeError(`Expected "${want}" in {#${src}}`); k++; };
+  /** @returns {any} */
+  const ternary = () => {
+    const c = or();
+    if (peek() !== '?') return c;
+    k++;
+    const a = ternary();
+    take(':');
+    const b = ternary();
+    return c ? a : b;
+  };
+  const or = () => { let v = and(); while (peek() === '||') { k++; const r = and(); v = v || r; } return v; };
+  const and = () => { let v = cmp(); while (peek() === '&&') { k++; const r = cmp(); v = v && r; } return v; };
+  const cmp = () => {
+    let v = add();
+    while (['<', '>', '<=', '>=', '==', '!='].includes(peek())) {
+      const op = t[k++];
+      const r = add();
+      v = op === '<' ? v < r : op === '>' ? v > r : op === '<=' ? v <= r : op === '>=' ? v >= r : op === '==' ? v === r : v !== r;
+    }
+    return v;
+  };
+  const add = () => { let v = mul(); while (peek() === '+' || peek() === '-') { const op = t[k++]; const r = mul(); v = op === '+' ? v + r : v - r; } return v; };
+  const mul = () => { let v = unary(); while (peek() === '*' || peek() === '/' || peek() === '%') { const op = t[k++]; const r = unary(); v = op === '*' ? v * r : op === '/' ? v / r : ((v % r) + r) % r; } return v; };
+  /** @returns {any} */
+  const unary = () => {
+    if (peek() === '-') { k++; return -unary(); }
+    if (peek() === '!') { k++; return !unary(); }
+    return atom();
+  };
+  const atom = () => {
+    const tok = t[k++];
+    if (tok === undefined) throw new TypeError(`Unexpected end of {#${src}}`);
+    if (tok === '(') { const v = ternary(); take(')'); return v; }
+    if (/^\d|^\./.test(tok)) return Number(tok);
+    if (/^['"]/.test(tok)) return tok.slice(1, -1);
+    if (peek() === '(') {
+      if (!Object.hasOwn(FNS, tok)) throw new TypeError(`Unknown function "${tok}" in {#${src}} (${Object.keys(FNS).join(', ')})`);
+      k++;
+      const args = [];
+      if (peek() !== ')') { args.push(ternary()); while (peek() === ',') { k++; args.push(ternary()); } }
+      take(')');
+      return FNS[tok](...args);
+    }
+    if (!Object.hasOwn(vars, tok)) throw new TypeError(`Unknown name "${tok}" in {#${src}} (${Object.keys(vars).join(', ')})`);
+    return vars[tok];
+  };
+  const v = ternary();
+  if (k < t.length) throw new TypeError(`Unexpected "${t[k]}" in {#${src}}`);
+  return v;
+}
+
+/** A whole-value expression, or one inside a string. */
+const WHOLE = /^\{#([^{}]+)\}$/;
+const INSIDE = /\{#([^{}]+)\}/g;
+
+/**
+ * A value with its `{#…}` expressions evaluated (a whole-string expression
+ * keeps its type). Nested layers are left alone: an inner `repeat` fills
+ * its own.
+ *
+ * @param {any} v
+ * @param {Record<string, number | string | boolean>} vars
+ * @returns {any}
+ */
+export function fill(v, vars) {
+  if (typeof v === 'string') {
+    const whole = WHOLE.exec(v);
+    if (whole) return evaluate(whole[1], vars);
+    return v.includes('{#') ? v.replace(INSIDE, (_, e) => String(evaluate(e, vars))) : v;
+  }
+  if (Array.isArray(v)) return v.map((x) => fill(x, vars));
+  if (v && typeof v === 'object' && !(v instanceof Uint8Array)) {
+    if (v.type === 'repeat') return v;
+    return Object.fromEntries(Object.entries(v).map(([k, x]) => [k, fill(x, vars)]));
+  }
+  return v;
+}

package/src/layers/geometry.d.ts

@@ -0,0 +1,6 @@
+// Shape geometry for the `shape` layer.
+import type { ShapeSpec } from './shape.js';
+import type { RenderContext } from '../render/context.js';
+
+/** A shape's path data (or an opening element tag), bounds and transform. */
+export function geometry(s: ShapeSpec, ctx: RenderContext): { d?: string; el?: string; transform?: string; box: { x: number; y: number; width: number; height: number } };

package/src/layers/geometry.js

@@ -0,0 +1,238 @@
+/**
+ * Shape geometry for the `shape` layer: path data (or an element) and
+ * bounds for each kind, and jittered edges for deckled, torn and zigzag
+ * paper.
+ *
+ * @module layers/geometry
+ */
+
+import { attrs, num } from '../svg.js';
+import { len } from '../geometry.js';
+import { pos } from './util.js';
+import { cutPath } from '../formats/cut.js';
+import { invert, apply } from '../effects/transform.js';
+
+
+/**
+ * Seeded jitter along a polyline, for deckled, torn or zigzag edges.
+ *
+ * @param {[number, number]} a @param {[number, number]} b
+ * @param {{ kind: string, size: number, step: number }} e
+ * @param {import('../rng.js').Rng} rng
+ * @returns {[number, number][]} Points from a (exclusive) to b (inclusive).
+ */
+function edgePoints(a, b, e, rng) {
+  const L = Math.hypot(b[0] - a[0], b[1] - a[1]);
+  const n = Math.max(2, Math.round(L / e.step));
+  const nx = -(b[1] - a[1]) / L;
+  const ny = (b[0] - a[0]) / L;
+  const out = /** @type {[number, number][]} */ ([]);
+  for (let i = 1; i <= n; i++) {
+    const t = i / n;
+    let off = 0;
+    if (i < n) {
+      if (e.kind === 'zigzag') off = (i % 2 ? 1 : -1) * e.size / 2;
+      else if (e.kind === 'wave') off = Math.sin(t * n * Math.PI) * e.size / 2;
+      else if (e.kind === 'scallop') off = -Math.abs(Math.sin(t * n * Math.PI / 2)) * e.size;
+      else off = (rng.next() - 0.5) * e.size * (e.kind === 'torn' ? 2 : 1);
+    }
+    out.push([a[0] + (b[0] - a[0]) * t + nx * off, a[1] + (b[1] - a[1]) * t + ny * off]);
+  }
+  return out;
+}
+
+/**
+ * One shape's path data and bounds.
+ *
+ * @param {any} s - The shape.
+ * @param {import('../layers.js').RenderContext} ctx
+ * @returns {{ d?: string, el?: string, box: { x: number, y: number, width: number, height: number } }}
+ */
+export function geometry(s, ctx) {
+  const c = ctx.canvas;
+  const X = (/** @type {any} */ v, /** @type {any} */ f = 0) => pos(v ?? f, 'x', c);
+  const Y = (/** @type {any} */ v, /** @type {any} */ f = 0) => pos(v ?? f, 'y', c);
+  const L = (/** @type {any} */ v, /** @type {any} */ f = 0) => len(v, c, f);
+  const kind = s.kind ?? 'rect';
+  const P = (/** @type {number} */ x, /** @type {number} */ y) => `${num(x)} ${num(y)}`;
+  switch (kind) {
+    case 'rect': {
+      const x = X(s.x);
+      const y = Y(s.y);
+      const w = s.width != null ? X(s.width) : c.width - x;
+      const h = s.height != null ? Y(s.height) : c.height - y;
+      const box = { x, y, width: w, height: h };
+      if (s.edge) {
+        const e = typeof s.edge === 'string' ? { kind: s.edge } : s.edge;
+        const size = L(e.size, e.kind === 'deckle' ? '0.6vmin' : '1.2vmin');
+        const step = L(e.step, e.kind === 'zigzag' ? size : e.kind === 'deckle' ? '0.9vmin' : '2vmin');
+        const sides = new Set(e.sides ?? ['top', 'right', 'bottom', 'left']);
+        const corners = /** @type {[number, number][]} */ ([[x, y], [x + w, y], [x + w, y + h], [x, y + h]]);
+        const names = ['top', 'right', 'bottom', 'left'];
+        let d = `M${P(x, y)}`;
+        for (let k = 0; k < 4; k++) {
+          const a = corners[k];
+          const b = corners[(k + 1) % 4];
+          if (sides.has(names[k])) for (const q of edgePoints(a, b, { kind: e.kind, size, step }, ctx.rng)) d += `L${P(q[0], q[1])}`;
+          else d += `L${P(b[0], b[1])}`;
+        }
+        return { d: `${d}Z`, box };
+      }
+      return { el: `<rect${attrs({ x, y, width: w, height: h, rx: s.radius != null ? L(s.radius) : undefined })}`, box };
+    }
+    case 'circle': {
+      const cx = X(s.cx, '50%');
+      const cy = Y(s.cy, '50%');
+      const r = L(s.r, '20vmin');
+      return { el: `<circle${attrs({ cx, cy, r })}`, box: { x: cx - r, y: cy - r, width: 2 * r, height: 2 * r } };
+    }
+    case 'ellipse': {
+      const cx = X(s.cx, '50%');
+      const cy = Y(s.cy, '50%');
+      const rx = L(s.rx, '20vmin');
+      const ry = L(s.ry, '12vmin');
+      return { el: `<ellipse${attrs({ cx, cy, rx, ry })}`, box: { x: cx - rx, y: cy - ry, width: 2 * rx, height: 2 * ry } };
+    }
+    case 'line': {
+      const x1 = X(s.x1);
+      const y1 = Y(s.y1);
+      const x2 = X(s.x2, '100%');
+      const y2 = Y(s.y2, s.y1 ?? 0);
+      return { d: `M${P(x1, y1)}L${P(x2, y2)}`, box: { x: Math.min(x1, x2), y: Math.min(y1, y2), width: Math.abs(x2 - x1), height: Math.abs(y2 - y1) } };
+    }
+    case 'polygon':
+    case 'polyline': {
+      const pts = (s.points ?? []).map((/** @type {any} */ q) => [X(q[0]), Y(q[1])]);
+      const xs = pts.map((/** @type {number[]} */ q) => q[0]);
+      const ys = pts.map((/** @type {number[]} */ q) => q[1]);
+      return { d: pts.map((/** @type {number[]} */ q, /** @type {number} */ i) => `${i ? 'L' : 'M'}${P(q[0], q[1])}`).join('') + (kind === 'polygon' ? 'Z' : ''), box: { x: Math.min(...xs), y: Math.min(...ys), width: Math.max(...xs) - Math.min(...xs), height: Math.max(...ys) - Math.min(...ys) } };
+    }
+    case 'star':
+    case 'burst':
+    case 'scallop':
+    case 'rays':
+    case 'ring':
+    case 'sector': {
+      const cx = X(s.cx, '50%');
+      const cy = Y(s.cy, '50%');
+      const r = L(s.r, '20vmin');
+      const rot = ((s.rotate ?? 0) * Math.PI) / 180;
+      const box = { x: cx - r, y: cy - r, width: 2 * r, height: 2 * r };
+      const at = (/** @type {number} */ a, /** @type {number} */ rr) => P(cx + rr * Math.sin(a + rot), cy - rr * Math.cos(a + rot));
+      if (kind === 'ring') {
+        const r2 = L(s.inner, r * 0.6);
+        return { d: `M${P(cx - r, cy)}a${num(r)} ${num(r)} 0 1 0 ${num(2 * r)} 0a${num(r)} ${num(r)} 0 1 0 ${num(-2 * r)} 0ZM${P(cx - r2, cy)}a${num(r2)} ${num(r2)} 0 1 1 ${num(2 * r2)} 0a${num(r2)} ${num(r2)} 0 1 1 ${num(-2 * r2)} 0Z`, box };
+      }
+      if (kind === 'sector') {
+        // A pie slice, `start` to `end` degrees (0 at 12 o'clock, clockwise): quarter and half discs.
+        const a0 = ((s.start ?? 0) * Math.PI) / 180;
+        const a1 = ((s.end ?? 90) * Math.PI) / 180;
+        const large = Math.abs(a1 - a0) > Math.PI ? 1 : 0;
+        return { d: `M${P(cx, cy)}L${at(a0, r)}A${num(r)} ${num(r)} 0 ${large} 1 ${at(a1, r)}Z`, box };
+      }
+      if (kind === 'rays') {
+        const n = s.count ?? 24;
+        let d = '';
+        for (let i = 0; i < n; i += 2) {
+          const a0 = (i / n) * Math.PI * 2;
+          const a1 = ((i + 1) / n) * Math.PI * 2;
+          d += `M${P(cx, cy)}L${at(a0, r)}L${at(a1, r)}Z`;
+        }
+        return { d, box };
+      }
+      if (kind === 'scallop') {
+        const bumps = s.points ?? 12;
+        const depth = L(s.depth, r * 0.08);
+        let d = '';
+        for (let deg = 0; deg <= 360; deg += 2) {
+          const a = (deg * Math.PI) / 180;
+          d += `${deg ? 'L' : 'M'}${at(a, r - depth + depth * Math.cos(a * bumps))}`;
+        }
+        return { d: `${d}Z`, box };
+      }
+      const n = s.points ?? (kind === 'burst' ? 16 : 5);
+      const inner = s.inner != null ? (s.inner <= 1 ? r * s.inner : L(s.inner)) : r * (kind === 'burst' ? 0.8 : 0.42);
+      let d = '';
+      for (let i = 0; i < n * 2; i++) d += `${i ? 'L' : 'M'}${at((i / (n * 2)) * Math.PI * 2, i % 2 ? inner : r)}`;
+      return { d: `${d}Z`, box };
+    }
+    case 'arch': {
+      // A window: straight sides, a round top.
+      const x = X(s.x);
+      const y = Y(s.y);
+      const w = X(s.width, '40%');
+      const h = Y(s.height, '50%');
+      const r = w / 2;
+      // `open`: the arc and its sides only (a stroked arch).
+      return { d: `M${P(x, y + h)}V${num(y + r)}A${num(r)} ${num(r)} 0 0 1 ${P(x + w, y + r)}V${num(y + h)}${s.open ? '' : 'Z'}`, box: { x, y, width: w, height: h } };
+    }
+    case 'wave': {
+      const x1 = X(s.x1);
+      const x2 = X(s.x2, '100%');
+      const y = Y(s.y, '50%');
+      const amp = L(s.amplitude, '2vmin');
+      const wl = L(s.wavelength, '20vmin');
+      const ph = s.phase ?? 0;
+      let d = '';
+      for (let x = x1, i = 0; x <= x2 + 0.01; x += Math.max(1, wl / 32), i++) d += `${i ? 'L' : 'M'}${P(x, y + Math.sin(((x - x1) / wl) * Math.PI * 2 + ph) * amp)}`;
+      if (s.band) {
+        const bh = L(s.band);
+        let back = '';
+        for (let x = x2; x >= x1 - 0.01; x -= Math.max(1, wl / 32)) back += `L${P(x, y + bh + Math.sin(((x - x1) / wl) * Math.PI * 2 + ph) * amp)}`;
+        d += `${back}Z`;
+      }
+      return { d, box: { x: x1, y: y - amp, width: x2 - x1, height: 2 * amp } };
+    }
+    case 'path': {
+      // Path data, optionally drawn from a viewBox into a box (x, y, width, height).
+      const d = String(s.d ?? '');
+      if (s.viewBox) {
+        const [vx, vy, vw, vh] = s.viewBox;
+        const x = X(s.x);
+        const y = Y(s.y);
+        const w = s.width != null ? X(s.width) : vw;
+        const h = s.height != null ? Y(s.height) : (w / vw) * vh;
+        return { d, box: { x, y, width: w, height: h }, el: undefined, ...{ transform: `translate(${num(x)} ${num(y)}) scale(${num(w / vw, 5)} ${num(h / vh, 5)}) translate(${num(-vx)} ${num(-vy)})` } };
+      }
+      return { d, box: { x: 0, y: 0, width: c.width, height: c.height } };
+    }
+    case 'cut': {
+      // The print format's die-cut (the trim's corners or shape), in this layer's units.
+      return cutGeometry(/** @type {any} */ (ctx).cut, L(s.outset, 0), /** @type {any} */ (ctx).matrix, c);
+    }
+    default:
+      throw new TypeError(`Unknown shape kind "${kind}" (rect, circle, ellipse, line, polygon, polyline, star, burst, scallop, rays, ring, sector, arch, wave, path, cut)`);
+  }
+}
+
+/**
+ * The cut outline, from canvas px into the layer's units (through the
+ * inverse of everything drawn above it). Without a print format, the canvas.
+ *
+ * @param {{ x: number, y: number, width: number, height: number, cut?: any, mm?: number } | undefined} cut - Trim box and cut, canvas px.
+ * @param {number} outset - Grow (or, negative, shrink) the outline, in the layer's units.
+ * @param {import('../effects/transform.js').Affine | undefined} matrix - Layer units to canvas px.
+ * @param {{ width: number, height: number }} canvas
+ * @returns {{ d: string, box: { x: number, y: number, width: number, height: number } }}
+ */
+function cutGeometry(cut, outset, matrix, canvas) {
+  const inv = matrix ? invert(matrix) : undefined;
+  const k = matrix ? Math.sqrt(Math.abs(matrix[0] * matrix[3] - matrix[1] * matrix[2])) : 1;
+  const trim = cut ?? { x: 0, y: 0, width: canvas.width * k, height: canvas.height * k };
+  const o = outset * k;
+  const box = { x: trim.x - o, y: trim.y - o, width: trim.width + 2 * o, height: trim.height + 2 * o };
+  const segs = cutPath(cut?.cut, box, (cut?.mm ?? 1) * 1, o);
+  const at = (/** @type {number} */ x, /** @type {number} */ y) => (inv ? apply(inv, x, y) : [x, y]);
+  let d = '';
+  const xs = [];
+  const ys = [];
+  for (const seg of segs) {
+    d += seg.cmd;
+    for (let i = 0; i < seg.pts.length; i += 2) {
+      const [X, Y] = at(seg.pts[i], seg.pts[i + 1]);
+      xs.push(X); ys.push(Y);
+      d += `${i ? ' ' : ''}${num(X)} ${num(Y)}`;
+    }
+  }
+  return { d, box: { x: Math.min(...xs), y: Math.min(...ys), width: Math.max(...xs) - Math.min(...xs), height: Math.max(...ys) - Math.min(...ys) } };
+}