@appinternalleads/ui 0.4.0 → 0.4.1

package/src/motion/typesurface/art.ts

@@ -0,0 +1,639 @@
+/* eslint-disable comppack/no-raw-colour -- paper, ink and print colours are artwork, not theme colours. */
+/**
+ * **Surface artwork, painted with Canvas 2D.** The newspaper is drawn, not photographed: masthead,
+ * dateline, columns of real words, halftoned photos, an advert, a market table, the fold it was
+ * delivered in, paper tone, fibres and the next page showing through. It is painted once per
+ * seed into a texture; the text you type is NEVER painted here, it is its own layer.
+ * Browser-only (needs a canvas); no React.
+ */
+import { hash32 } from '../neon/random';
+
+export type ArtCanvas = HTMLCanvasElement;
+
+const mk = (w: number, h: number): ArtCanvas => {
+  const c = document.createElement('canvas');
+  c.width = w; c.height = h;
+  return c;
+};
+
+/** Seeded random stream. */
+function rng(seed: number, salt: number) {
+  let i = 0;
+  return () => hash32(seed, i++, salt) / 4294967296;
+}
+
+const WORDS = ('the city council said on monday that a new plan for the riverfront would be put to a vote next month after years of delay ' +
+  'residents who packed the hall called for more housing and fewer parking lots while officials warned the budget remained tight ' +
+  'according to the report the harbor district could see its first new park in decades if funding holds through the winter season ' +
+  'critics argued the proposal moved too fast but supporters pointed to rising rents and a growing number of families leaving the area ' +
+  'the mayor declined to comment on the timing though an aide described the talks as productive and said more details would follow ' +
+  'engineers expect construction to take three years with the first phase opening along the old ferry landing by late spring of next year ' +
+  'meanwhile schools reported record enrollment and the transit authority announced longer hours on weekend lines beginning in october').split(' ');
+
+const INK = '#1b1917';
+const PAPER = '#ece6d6';
+
+/** Units: the page is 1000 wide. `s` scales units to pixels. */
+type Pen = { ctx: CanvasRenderingContext2D; s: number };
+
+function font(p: Pen, px: number, family: string, weight = 400, style = 'normal') {
+  p.ctx.font = `${style} ${weight} ${px * p.s}px ${family}`;
+}
+function text(p: Pen, t: string, x: number, y: number, align: CanvasTextAlign = 'left') {
+  p.ctx.textAlign = align;
+  p.ctx.fillText(t, x * p.s, y * p.s);
+}
+function rule(p: Pen, x0: number, y: number, x1: number, w = 1) {
+  p.ctx.fillRect(x0 * p.s, (y - w / 2) * p.s, (x1 - x0) * p.s, w * p.s);
+}
+function vrule(p: Pen, x: number, y0: number, y1: number, w = 0.6) {
+  p.ctx.fillRect((x - w / 2) * p.s, y0 * p.s, w * p.s, (y1 - y0) * p.s);
+}
+
+const BODY = "'Old Standard TT', 'Times New Roman', serif";
+const HEAD = "'Playfair Display', Georgia, serif";
+const COND = "'Oswald', 'Arial Narrow', sans-serif";
+const MAST = "'UnifrakturMaguntia', 'Old English Text MT', serif";
+const MONO = "'IBM Plex Mono', ui-monospace, monospace";
+
+/** Justified body copy in a column. Returns the y after the last line. */
+function column(p: Pen, r: () => number, x: number, y: number, w: number, bottom: number, size = 10.2, lead = 12.4, dropCap = false): number {
+  font(p, size, BODY);
+  const ctx = p.ctx;
+  const words = () => WORDS[Math.floor(r() * WORDS.length)]!;
+  let yy = y;
+  let first = dropCap;
+  let para = 0;
+  while (yy + lead <= bottom) {
+    const indent = para === 0 ? 10 : 0;
+    let lx = x + indent;
+    let lw = w - indent;
+    if (first) {
+      font(p, lead * 2.6, HEAD, 700);
+      ctx.textAlign = 'left';
+      ctx.fillText('T', x * p.s, (yy + lead * 1.9) * p.s);
+      font(p, size, BODY);
+      lx = x + lead * 2.1; lw = w - lead * 2.1;
+    }
+    const line: string[] = [];
+    let width = 0;
+    const space = ctx.measureText(' ').width / p.s;
+    for (;;) {
+      const wd = words();
+      const ww = ctx.measureText(wd).width / p.s;
+      if (width + ww + (line.length ? space : 0) > lw) break;
+      width += ww + (line.length ? space : 0);
+      line.push(line.length === 0 && para === 0 ? wd[0]!.toUpperCase() + wd.slice(1) : wd);
+    }
+    const last = r() < 0.07 || (yy + lead * 2 > bottom);
+    const gap = line.length > 1 && !last ? (lw - width) / (line.length - 1) + space : space;
+    let cx = lx;
+    ctx.textAlign = 'left';
+    for (const wd of line) {
+      ctx.fillText(last && wd === line[line.length - 1] ? `${wd}.` : wd, cx * p.s, (yy + size) * p.s);
+      cx += ctx.measureText(wd).width / p.s + gap;
+    }
+    yy += lead;
+    para = last ? 0 : para + 1;
+    if (first && yy > y + lead * 2.2) first = false;
+  }
+  return yy;
+}
+
+/** A procedural photo, halftoned like newsprint. */
+function photo(p: Pen, r: () => number, x: number, y: number, w: number, h: number, kind: 'skyline' | 'portrait' | 'harbor') {
+  const res = 3; // units per sample
+  const cw = Math.max(8, Math.round(w / res)), ch = Math.max(8, Math.round(h / res));
+  const src = mk(cw, ch);
+  const g = src.getContext('2d')!;
+  const sky = g.createLinearGradient(0, 0, 0, ch);
+  sky.addColorStop(0, '#d8d8d8'); sky.addColorStop(0.6, '#9a9a9a'); sky.addColorStop(1, '#5a5a5a');
+  g.fillStyle = sky; g.fillRect(0, 0, cw, ch);
+  if (kind === 'skyline' || kind === 'harbor') {
+    g.fillStyle = '#f4f4f4';
+    g.beginPath(); g.arc(cw * 0.75, ch * 0.25, ch * 0.09, 0, Math.PI * 2); g.fill();
+    let bx = 0;
+    while (bx < cw) {
+      const bw = cw * (0.04 + r() * 0.08), bh = ch * (0.2 + r() * 0.45);
+      g.fillStyle = `rgb(${40 + r() * 50 | 0},${40 + r() * 50 | 0},${40 + r() * 50 | 0})`;
+      g.fillRect(bx, ch * (kind === 'harbor' ? 0.62 : 0.72) - bh, bw, bh + ch);
+      g.fillStyle = 'rgba(230,230,230,0.5)';
+      for (let wy = ch * 0.72 - bh + 2; wy < ch * 0.7; wy += 3) for (let wx = bx + 1; wx < bx + bw - 1; wx += 3) if (r() < 0.35) g.fillRect(wx, wy, 1, 1);
+      bx += bw + r() * 2;
+    }
+    if (kind === 'harbor') {
+      const water = g.createLinearGradient(0, ch * 0.62, 0, ch);
+      water.addColorStop(0, '#6c6c6c'); water.addColorStop(1, '#262626');
+      g.fillStyle = water; g.fillRect(0, ch * 0.62, cw, ch);
+      g.fillStyle = 'rgba(220,220,220,0.35)';
+      for (let k = 0; k < 60; k++) g.fillRect(r() * cw, ch * (0.64 + r() * 0.34), 2 + r() * 6, 0.6);
+      g.fillStyle = '#151515';
+      g.beginPath(); g.moveTo(cw * 0.2, ch * 0.7); g.lineTo(cw * 0.46, ch * 0.7); g.lineTo(cw * 0.42, ch * 0.78); g.lineTo(cw * 0.24, ch * 0.78); g.fill();
+      g.fillRect(cw * 0.3, ch * 0.55, cw * 0.01, ch * 0.15);
+    } else {
+      g.fillStyle = '#2a2a2a'; g.fillRect(0, ch * 0.72, cw, ch);
+      for (let k = 0; k < 9; k++) {
+        const px = r() * cw, ph = ch * (0.14 + r() * 0.08);
+        g.fillStyle = '#101010';
+        g.beginPath(); g.arc(px, ch * 0.9 - ph, ph * 0.18, 0, Math.PI * 2); g.fill();
+        g.fillRect(px - ph * 0.16, ch * 0.9 - ph * 0.82, ph * 0.32, ph * 0.9);
+      }
+    }
+  } else {
+    const bg = g.createRadialGradient(cw * 0.5, ch * 0.4, 1, cw * 0.5, ch * 0.5, cw * 0.8);
+    bg.addColorStop(0, '#cfcfcf'); bg.addColorStop(1, '#505050');
+    g.fillStyle = bg; g.fillRect(0, 0, cw, ch);
+    g.fillStyle = '#1a1a1a';
+    g.beginPath(); g.ellipse(cw * 0.5, ch * 1.05, cw * 0.42, ch * 0.4, 0, 0, Math.PI * 2); g.fill();
+    const face = g.createRadialGradient(cw * 0.45, ch * 0.38, 1, cw * 0.5, ch * 0.42, cw * 0.25);
+    face.addColorStop(0, '#bdbdbd'); face.addColorStop(1, '#3d3d3d');
+    g.fillStyle = face;
+    g.beginPath(); g.ellipse(cw * 0.5, ch * 0.42, cw * 0.17, ch * 0.24, 0, 0, Math.PI * 2); g.fill();
+    g.fillStyle = '#161616';
+    g.beginPath(); g.ellipse(cw * 0.5, ch * 0.24, cw * 0.19, ch * 0.1, 0, Math.PI, Math.PI * 2); g.fill();
+  }
+  const data = g.getImageData(0, 0, cw, ch).data;
+  const ctx = p.ctx;
+  ctx.save();
+  ctx.beginPath(); ctx.rect(x * p.s, y * p.s, w * p.s, h * p.s); ctx.clip();
+  ctx.fillStyle = PAPER; ctx.fillRect(x * p.s, y * p.s, w * p.s, h * p.s);
+  ctx.fillStyle = INK;
+  // A 45° screen: dot size from darkness.
+  const cell = 3.2;
+  const cos = Math.SQRT1_2;
+  const span = (w + h) / cos;
+  for (let v = -span; v < span; v += cell) {
+    for (let u = -span; u < span; u += cell) {
+      const sxp = (u - v) * cos, syp = (u + v) * cos;
+      if (sxp < -cell || syp < -cell || sxp > w + cell || syp > h + cell) continue;
+      const ix = Math.min(cw - 1, Math.max(0, Math.floor(sxp / res))), iy = Math.min(ch - 1, Math.max(0, Math.floor(syp / res)));
+      const lum = data[(iy * cw + ix) * 4]! / 255;
+      const rad = Math.sqrt(Math.max(0, 1 - lum)) * cell * 0.62;
+      if (rad < 0.25) continue;
+      ctx.beginPath(); ctx.arc((x + sxp) * p.s, (y + syp) * p.s, rad * p.s, 0, Math.PI * 2); ctx.fill();
+    }
+  }
+  ctx.restore();
+  ctx.fillStyle = INK;
+  ctx.strokeStyle = INK; ctx.lineWidth = 0.6 * p.s;
+  ctx.strokeRect(x * p.s, y * p.s, w * p.s, h * p.s);
+}
+
+/** Paper tone, fibres, blotches and slightly yellowed edges. */
+function paperBase(p: Pen, r: () => number, w: number, h: number, tone = PAPER) {
+  const ctx = p.ctx;
+  ctx.fillStyle = tone; ctx.fillRect(0, 0, w * p.s, h * p.s);
+  for (let k = 0; k < 26; k++) {
+    const gx = r() * w, gy = r() * h, gr = 60 + r() * 220;
+    const g = ctx.createRadialGradient(gx * p.s, gy * p.s, 0, gx * p.s, gy * p.s, gr * p.s);
+    const dark = r() < 0.5;
+    g.addColorStop(0, dark ? 'rgba(120,100,60,0.05)' : 'rgba(255,255,245,0.06)'); g.addColorStop(1, 'rgba(0,0,0,0)');
+    ctx.fillStyle = g; ctx.fillRect(0, 0, w * p.s, h * p.s);
+  }
+  for (let k = 0; k < 9000; k++) {
+    const fx = r() * w, fy = r() * h, a = r() * Math.PI, l = 1 + r() * 5;
+    ctx.strokeStyle = r() < 0.5 ? 'rgba(90,75,50,0.07)' : 'rgba(255,255,250,0.1)';
+    ctx.lineWidth = (0.25 + r() * 0.4) * p.s;
+    ctx.beginPath(); ctx.moveTo(fx * p.s, fy * p.s); ctx.lineTo((fx + Math.cos(a) * l) * p.s, (fy + Math.sin(a) * l) * p.s); ctx.stroke();
+  }
+  const edge = (x0: number, y0: number, x1: number, y1: number) => {
+    const g = ctx.createLinearGradient(x0 * p.s, y0 * p.s, x1 * p.s, y1 * p.s);
+    g.addColorStop(0, 'rgba(170,140,80,0.16)'); g.addColorStop(1, 'rgba(170,140,80,0)');
+    ctx.fillStyle = g; ctx.fillRect(0, 0, w * p.s, h * p.s);
+  };
+  edge(0, 0, 28, 0); edge(w, 0, w - 28, 0); edge(0, 0, 0, 28); edge(0, h, 0, h - 28);
+}
+
+/** Speckle and wear over the ink: tiny unprinted spots, the odd smudge. */
+function inkWear(p: Pen, r: () => number, w: number, h: number) {
+  const ctx = p.ctx;
+  ctx.fillStyle = 'rgba(236,230,214,0.55)';
+  for (let k = 0; k < 5000; k++) ctx.fillRect(r() * w * p.s, r() * h * p.s, (0.4 + r()) * p.s, (0.4 + r()) * p.s);
+  for (let k = 0; k < 5; k++) {
+    const gx = r() * w, gy = r() * h, gr = 10 + r() * 30;
+    const g = ctx.createRadialGradient(gx * p.s, gy * p.s, 0, gx * p.s, gy * p.s, gr * p.s);
+    g.addColorStop(0, 'rgba(40,35,30,0.05)'); g.addColorStop(1, 'rgba(0,0,0,0)');
+    ctx.fillStyle = g; ctx.fillRect(0, 0, w * p.s, h * p.s);
+  }
+}
+
+/** The fold it was delivered in: a pale line with a shadowed side. */
+function deliveryCrease(p: Pen, w: number, y: number) {
+  const ctx = p.ctx;
+  const g = ctx.createLinearGradient(0, (y - 5) * p.s, 0, (y + 5) * p.s);
+  g.addColorStop(0, 'rgba(0,0,0,0)'); g.addColorStop(0.45, 'rgba(80,65,40,0.12)'); g.addColorStop(0.5, 'rgba(255,255,250,0.35)'); g.addColorStop(0.6, 'rgba(80,65,40,0.08)'); g.addColorStop(1, 'rgba(0,0,0,0)');
+  ctx.fillStyle = g; ctx.fillRect(0, (y - 5) * p.s, w * p.s, 10 * p.s);
+}
+
+const PAGE_W = 1000;
+
+/** The inside/back page: classifieds and notices. */
+function paintInner(p: Pen, seed: number, h: number, pageLabel: string) {
+  const r = rng(seed, 77);
+  const ctx = p.ctx;
+  ctx.fillStyle = INK;
+  font(p, 11, COND, 500); text(p, `${pageLabel}  ·  THE MORNING CHRONICLE  ·  TUESDAY, SEPTEMBER 30, 2026`, 36, 30);
+  rule(p, 36, 38, 964, 1.4);
+  font(p, 58, COND, 700); text(p, 'CLASSIFIEDS', 36, 100);
+  font(p, 13, BODY, 400, 'italic'); text(p, 'Homes · Jobs · Motors · Notices · Lost & Found', 964, 100, 'right');
+  rule(p, 36, 112, 964, 0.8);
+  const cols = 5, gut = 12, cw = (928 - gut * (cols - 1)) / cols;
+  for (let c = 0; c < cols; c++) {
+    const x = 36 + c * (cw + gut);
+    let y = 126;
+    while (y < h - 60) {
+      const bh = 50 + r() * 120;
+      if (y + bh > h - 50) break;
+      ctx.lineWidth = 0.6 * p.s; ctx.strokeStyle = INK;
+      ctx.strokeRect(x * p.s, y * p.s, cw * p.s, bh * p.s);
+      font(p, 13, COND, 700); text(p, ['FOR SALE', 'WANTED', 'TO LET', 'NOTICE', 'HELP WANTED', 'AUCTION'][Math.floor(r() * 6)]!, x + 6, y + 17);
+      column(p, r, x + 6, y + 22, cw - 12, y + bh - 4, 8.4, 10);
+      y += bh + 8;
+    }
+    if (c < cols - 1) vrule(p, x + cw + gut / 2, 126, h - 56);
+  }
+  if (r() < 2) {
+    const bx = 36 + cw + gut, by = h * 0.52, bw = cw * 2 + gut, bh = 170;
+    ctx.fillStyle = PAPER; ctx.fillRect(bx * p.s, by * p.s, bw * p.s, bh * p.s);
+    ctx.fillStyle = INK; ctx.lineWidth = 2.4 * p.s; ctx.strokeRect(bx * p.s, by * p.s, bw * p.s, bh * p.s);
+    font(p, 44, COND, 700); text(p, 'OPEN HOUSE', bx + bw / 2, by + 62, 'center');
+    font(p, 18, HEAD, 400, 'italic'); text(p, 'Sunday 1–4 pm · 14 Linden Row', bx + bw / 2, by + 96, 'center');
+    font(p, 30, COND, 500); text(p, '3 BED · GARDEN · $489,000', bx + bw / 2, by + 140, 'center');
+  }
+  rule(p, 36, h - 40, 964, 1);
+  font(p, 10, COND, 500); text(p, pageLabel, 964, h - 24, 'right');
+}
+
+/** The front page. Seeded: the same seed paints the same page. */
+function paintFront(p: Pen, seed: number, h: number) {
+  const r = rng(seed, 11);
+  const ctx = p.ctx;
+  ctx.fillStyle = INK;
+  // Ears and masthead.
+  ctx.lineWidth = 0.8 * p.s; ctx.strokeStyle = INK;
+  ctx.strokeRect(36 * p.s, 22 * p.s, 150 * p.s, 64 * p.s);
+  font(p, 10, COND, 700); text(p, 'WEATHER', 111, 38, 'center');
+  font(p, 26, COND, 500); text(p, '18° / 11°', 111, 66, 'center');
+  font(p, 8.5, BODY, 400, 'italic'); text(p, 'Cloudy, clearing late', 111, 80, 'center');
+  ctx.strokeRect(814 * p.s, 22 * p.s, 150 * p.s, 64 * p.s);
+  font(p, 10, COND, 700); text(p, 'INSIDE', 889, 38, 'center');
+  font(p, 9.5, BODY); text(p, 'Arts & Leisure …… C1', 889, 55, 'center'); text(p, 'Business ………… B4', 889, 68, 'center'); text(p, 'Puzzles ………… D7', 889, 81, 'center');
+  font(p, 76, MAST); text(p, 'The Morning Chronicle', 500, 84, 'center');
+  rule(p, 36, 104, 964, 2.2); rule(p, 36, 109, 964, 0.6);
+  font(p, 10.5, COND, 500);
+  text(p, 'VOL. CLXXV · No. 60,812', 36, 124); text(p, 'TUESDAY, SEPTEMBER 30, 2026', 500, 124, 'center'); text(p, 'LATE CITY EDITION · $3.00', 964, 124, 'right');
+  rule(p, 36, 132, 964, 0.6); rule(p, 36, 136, 964, 1.6);
+  // The headline slot: kept for the typography you set. Only a kicker and a deck.
+  font(p, 13, COND, 700); text(p, 'SPECIAL REPORT', 500, 170, 'center');
+  font(p, 19, HEAD, 400, 'italic'); text(p, 'Overnight developments reshape the riverfront plan; council to vote next month', 500, 585, 'center');
+  rule(p, 330, 600, 670, 0.6);
+  // Lead photo spanning four columns, two columns of copy beside it.
+  const top = 616;
+  const cols = 6, gut = 14, cw = (928 - gut * (cols - 1)) / cols;
+  const colX = (c: number) => 36 + c * (cw + gut);
+  const pw = cw * 4 + gut * 3;
+  photo(p, r, 36, top, pw, 262, r() < 0.5 ? 'harbor' : 'skyline');
+  font(p, 9, BODY, 400, 'italic');
+  text(p, 'Crews worked through the night along the old ferry landing. Photograph by Staff.', 36, top + 276);
+  for (let c = 4; c < 6; c++) {
+    font(p, 17, HEAD, 700); ctx.textAlign = 'left';
+    const y0 = top + (c === 4 ? 0 : 0);
+    if (c === 4) { text(p, 'Harbor Park', colX(c), y0 + 16); text(p, 'Wins Early Nod', colX(c), y0 + 36); }
+    else { text(p, 'Transit Adds', colX(c), y0 + 16); text(p, 'Weekend Hours', colX(c), y0 + 36); }
+    font(p, 9, COND, 500); text(p, c === 4 ? 'BY ELENA MARSH' : 'BY THEO GRANT', colX(c), y0 + 52);
+    column(p, r, colX(c), y0 + 58, cw, top + 282, 10.2, 12.4, c === 4);
+    vrule(p, colX(c) - gut / 2, top, c === 4 ? h - 150 : top + 282);
+  }
+  // Lower stories under the photo.
+  const low = top + 292;
+  rule(p, 36, low - 4, 36 + pw, 0.6);
+  const heads = [['Schools Report', 'Record Enrollment'], ['Budget Talks', 'Stall Again'], ['Ferry Landing', 'Gets a Date'], ['Rents Climb', 'For Fifth Year']];
+  for (let c = 0; c < 4; c++) {
+    const [a, b] = heads[c]!;
+    font(p, 16, HEAD, 700); text(p, a!, colX(c), low + 14); text(p, b!, colX(c), low + 32);
+    column(p, r, colX(c), low + 40, cw, h - 150, 10.2, 12.4);
+    if (c > 0) vrule(p, colX(c) - gut / 2, low, h - 150);
+  }
+  rule(p, colX(4), top + 288, 964, 0.6);
+  // Market table and an advert in the right two columns.
+  const mx = colX(4), mw = cw * 2 + gut;
+  font(p, 12, COND, 700); text(p, 'MARKETS', mx, top + 306);
+  rule(p, mx, top + 312, mx + mw, 0.8);
+  font(p, 9.5, MONO);
+  const rows: [string, string][] = [['DOW', '+0.84%'], ['S&P 500', '+0.61%'], ['NASDAQ', '−0.12%'], ['10-YR', '4.02%'], ['OIL', '$71.40'], ['GOLD', '$2,418']];
+  rows.forEach(([k, v], i) => { text(p, k, mx, top + 328 + i * 14); text(p, v, mx + mw, top + 328 + i * 14, 'right'); });
+  const ay = top + 420, ah = h - 158 - ay;
+  ctx.lineWidth = 2.6 * p.s; ctx.strokeRect(mx * p.s, ay * p.s, mw * p.s, ah * p.s);
+  ctx.lineWidth = 0.7 * p.s; ctx.strokeRect((mx + 5) * p.s, (ay + 5) * p.s, (mw - 10) * p.s, (ah - 10) * p.s);
+  font(p, 15, COND, 500); text(p, 'HARBOR & MAIN', mx + mw / 2, ay + 30, 'center');
+  font(p, 46, COND, 700); text(p, 'CLEARANCE', mx + mw / 2, ay + 80, 'center');
+  font(p, 26, HEAD, 900); text(p, 'up to 60% off', mx + mw / 2, ay + 116, 'center');
+  rule(p, mx + 30, ay + 132, mx + mw - 30, 0.6);
+  font(p, 10.5, BODY, 400, 'italic'); text(p, 'Sofas · Tables · Lamps · Rugs', mx + mw / 2, ay + 150, 'center');
+  font(p, 10, COND, 500); text(p, 'THIS WEEKEND ONLY', mx + mw / 2, ay + ah - 16, 'center');
+  // Bottom strip: index and folio.
+  rule(p, 36, h - 140, 964, 1.6);
+  for (let c = 0; c < 3; c++) {
+    const x = 36 + c * 314;
+    font(p, 14, HEAD, 700); text(p, ['Obituaries', 'Opinion', 'Sports'][c]!, x, h - 118);
+    column(p, r, x, h - 112, 300, h - 50, 9.2, 11);
+    if (c) vrule(p, x - 7, h - 132, h - 50);
+  }
+  rule(p, 36, h - 40, 964, 0.6);
+  font(p, 10, COND, 500); text(p, 'A1', 36, h - 24); text(p, 'Continued on A6', 964, h - 24, 'right');
+}
+
+export type NewspaperArt = { front: ArtCanvas; back: ArtCanvas; inner: ArtCanvas };
+
+/** Paint a newspaper's three textures: front page, back of the sheet, and the page under it. */
+export function paintNewspaper(seed: number, widthPx = 2048, aspect = 1.36): NewspaperArt {
+  const h = PAGE_W * aspect;
+  const s = widthPx / PAGE_W;
+  const hp = Math.round(h * s);
+  const back = mk(widthPx, hp);
+  {
+    const p: Pen = { ctx: back.getContext('2d')!, s };
+    paperBase(p, rng(seed, 3), PAGE_W, h);
+    paintInner(p, seed + 1, h, 'A2');
+    inkWear(p, rng(seed, 4), PAGE_W, h);
+    deliveryCrease(p, PAGE_W, h / 2);
+  }
+  const front = mk(widthPx, hp);
+  {
+    const ctx = front.getContext('2d')!;
+    const p: Pen = { ctx, s };
+    paperBase(p, rng(seed, 1), PAGE_W, h);
+    // The page behind shows through thin newsprint, mirrored.
+    ctx.save(); ctx.globalAlpha = 0.05; ctx.translate(widthPx, 0); ctx.scale(-1, 1); ctx.drawImage(back, 0, 0); ctx.restore();
+    ctx.fillStyle = PAPER;
+    ctx.globalAlpha = 0.02; ctx.fillRect(0, 0, widthPx, hp); ctx.globalAlpha = 1;
+    paintFront(p, seed, h);
+    inkWear(p, rng(seed, 2), PAGE_W, h);
+    deliveryCrease(p, PAGE_W, h / 2);
+  }
+  const inner = mk(1024, Math.round(1024 * aspect));
+  {
+    const p: Pen = { ctx: inner.getContext('2d')!, s: 1024 / PAGE_W };
+    paperBase(p, rng(seed, 5), PAGE_W, h, '#e8e1cf');
+    paintInner(p, seed + 2, h, 'A5');
+    deliveryCrease(p, PAGE_W, h / 2);
+  }
+  return { front, back, inner };
+}
+
+/** Faces the artwork uses; the renderer asks the browser to load them so the paint is right. */
+export const ART_FONTS = [
+  "400 20px 'UnifrakturMaguntia'", "400 20px 'Old Standard TT'", "italic 400 20px 'Old Standard TT'", "700 20px 'Playfair Display'", "italic 400 20px 'Playfair Display'",
+  "900 20px 'Playfair Display'", "500 20px 'Oswald'", "700 20px 'Oswald'", "400 20px 'IBM Plex Mono'", "400 20px 'Archivo Black'", "400 20px 'Lobster'", "400 20px 'Anton'", "600 20px 'Inter'",
+];
+
+const INTER = "'Inter', system-ui, sans-serif";
+const BLACK = "'Archivo Black', 'Arial Black', sans-serif";
+const SCRIPT = "'Lobster', cursive";
+
+function hexToRgb(h: string): [number, number, number] {
+  const s = h.length === 4 ? h.slice(1).split('').map((c) => c + c).join('') : h.slice(1);
+  const n = parseInt(s, 16) || 0;
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+const shade = (h: string, k: number) => { const [r, g, b] = hexToRgb(h); const f = (v: number) => Math.max(0, Math.min(255, Math.round(k >= 0 ? v + (255 - v) * k : v * (1 + k)))); return `rgb(${f(r)},${f(g)},${f(b)})`; };
+
+/** A barcode, for the backs of labels and packs. */
+function barcode(p: Pen, r: () => number, x: number, y: number, w: number, h: number) {
+  const ctx = p.ctx;
+  ctx.fillStyle = '#ffffff'; ctx.fillRect((x - 6) * p.s, (y - 6) * p.s, (w + 12) * p.s, (h + 22) * p.s);
+  ctx.fillStyle = INK;
+  let bx = x;
+  while (bx < x + w) { const bw = 0.8 + Math.floor(r() * 3) * 0.9; if (r() < 0.62) ctx.fillRect(bx * p.s, y * p.s, bw * p.s, h * p.s); bx += bw + 0.7; }
+  font(p, 8, MONO); text(p, '8 412345 678905', x + w / 2, y + h + 11, 'center');
+}
+
+/** A hand-drawn red scribble: loops and a return stroke, like a pen dragged across a label. */
+function scribble(p: Pen, r: () => number, cx: number, cy: number, w: number, h: number, color: string, width: number) {
+  const ctx = p.ctx;
+  ctx.save();
+  ctx.strokeStyle = color; ctx.lineWidth = width * p.s; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.globalAlpha = 0.9;
+  ctx.beginPath();
+  let x = cx - w / 2, y = cy;
+  ctx.moveTo(x * p.s, y * p.s);
+  const loops = 5;
+  for (let k = 0; k < loops; k++) {
+    const nx = cx - w / 2 + ((k + 1) / loops) * w;
+    const ny = cy + (r() - 0.5) * h * 0.4;
+    ctx.bezierCurveTo((x + w * 0.16) * p.s, (y - h * (0.6 + r() * 0.4)) * p.s, (nx + w * 0.05) * p.s, (ny + h * (0.5 + r() * 0.4)) * p.s, nx * p.s, ny * p.s);
+    x = nx; y = ny;
+  }
+  ctx.stroke();
+  ctx.lineWidth = width * 0.55 * p.s;
+  ctx.beginPath();
+  ctx.moveTo((cx + w / 2) * p.s, (cy + h * 0.3) * p.s);
+  ctx.bezierCurveTo((cx + w * 0.1) * p.s, (cy + h * 0.9) * p.s, (cx - w * 0.2) * p.s, (cy - h * 0.2) * p.s, (cx - w * 0.55) * p.s, (cy + h * 0.5) * p.s);
+  ctx.stroke();
+  ctx.restore();
+}
+
+/**
+ * The bottle label: textured paper, a winery line, descriptors, a red pen scribble, the vintage and
+ * volume, and on the parts that wrap behind the bottle a back label with a barcode. The middle is
+ * kept quiet for your words.
+ */
+function paintLabel(seed: number, widthPx: number, aspect: number): { front: ArtCanvas; back: ArtCanvas } {
+  const h = PAGE_W * aspect;
+  const s = widthPx / PAGE_W;
+  const front = mk(widthPx, Math.round(h * s));
+  const p: Pen = { ctx: front.getContext('2d')!, s };
+  const r = rng(seed, 31);
+  paperBase(p, r, PAGE_W, h, '#f1ede3');
+  const ctx = p.ctx;
+  ctx.fillStyle = INK;
+  rule(p, 0, 12, PAGE_W, 1.2); rule(p, 0, h - 12, PAGE_W, 1.2);
+  // Front (u 0.2–0.8 is what faces the camera).
+  scribble(p, r, 560, h * 0.48, 300, 130, '#e2371f', 11);
+  ctx.fillStyle = INK;
+  font(p, 11, INTER, 600); text(p, 'CELLER DEL VENT', 215, 44);
+  font(p, 9, INTER); text(p, 'Priorat · Denominació d’Origen', 215, 58);
+  ctx.fillStyle = 'rgba(40,36,32,0.55)';
+  font(p, 9.5, BODY, 400, 'italic');
+  [['calma', 700, 70], ['plenitud', 742, 150], ['amor', 690, 214], ['tendresa', 752, 300], ['alegria', 700, 362]].forEach(([w, x, y]) => text(p, w as string, x as number, y as number));
+  ctx.save();
+  ctx.translate(232 * s, (h - 70) * s); ctx.rotate(-Math.PI / 2);
+  ctx.fillStyle = INK; font(p, 12, INTER, 600); ctx.textAlign = 'left'; ctx.fillText('CATALUNYA', 0, 0);
+  ctx.restore();
+  ctx.fillStyle = INK;
+  font(p, 10, BODY, 400, 'italic'); text(p, 'Garnatxa Negra — Cabernet Sauvignon', 262, h - 60);
+  ctx.strokeStyle = '#e2371f'; ctx.lineWidth = 2 * s; ctx.beginPath(); ctx.ellipse(350 * s, (h - 63) * s, 95 * s, 12 * s, -0.05, 0.2, Math.PI * 2.1); ctx.stroke();
+  font(p, 10.5, BODY, 400, 'italic'); text(p, '“After the rain the grass is born; after the wine, the words.” — a saying', 500, h - 30, 'center');
+  font(p, 13, INTER, 600); text(p, '2026', 690, h - 58); text(p, '14,5 % vol', 740, h - 58); text(p, '750 ml', 812, h - 58, 'left');
+  // Back label (wraps behind the bottle).
+  font(p, 11, INTER, 600); text(p, 'BACK', 60, 44);
+  column(p, r, 40, 56, 120, h - 110, 7.6, 9.4);
+  barcode(p, r, 55, h - 92, 90, 44);
+  column(p, r, 855, 44, 125, h - 40, 7.6, 9.4);
+  inkWear(p, r, PAGE_W, h);
+  const back = mk(256, Math.round(256 * aspect));
+  { const b = back.getContext('2d')!; b.fillStyle = '#e9e4d8'; b.fillRect(0, 0, back.width, back.height); }
+  return { front, back };
+}
+
+/**
+ * A glossy snack pack: brand band, a sale burst behind your words, crisps, a flavour ribbon, net
+ * weight, and silver crimped seals at both ends (u < 0.07, u > 0.93).
+ */
+function paintWrapper(seed: number, widthPx: number, aspect: number, color: string): { front: ArtCanvas; back: ArtCanvas } {
+  const h = PAGE_W * aspect;
+  const s = widthPx / PAGE_W;
+  const front = mk(widthPx, Math.round(h * s));
+  const ctx = front.getContext('2d')!;
+  const p: Pen = { ctx, s };
+  const r = rng(seed, 41);
+  const g = ctx.createLinearGradient(0, 0, 0, h * s);
+  g.addColorStop(0, shade(color, 0.18)); g.addColorStop(0.55, color); g.addColorStop(1, shade(color, -0.22));
+  ctx.fillStyle = g; ctx.fillRect(0, 0, PAGE_W * s, h * s);
+  ctx.save(); ctx.globalAlpha = 0.09; ctx.strokeStyle = '#ffffff'; ctx.lineWidth = 10 * s;
+  for (let x = -h; x < PAGE_W + h; x += 34) { ctx.beginPath(); ctx.moveTo(x * s, h * s); ctx.lineTo((x + h) * s, 0); ctx.stroke(); }
+  ctx.restore();
+  // Brand band.
+  ctx.fillStyle = '#c8102e'; ctx.fillRect(0, 0, PAGE_W * s, 92 * s);
+  ctx.fillStyle = '#ffd23f'; ctx.fillRect(0, 92 * s, PAGE_W * s, 6 * s);
+  ctx.fillStyle = '#ffffff'; font(p, 50, BLACK); text(p, 'CRUNCHO', 150, 66);
+  font(p, 13, INTER, 600); text(p, 'KETTLE COOKED · SINCE 1987', 850, 56, 'right');
+  // Burst behind the words.
+  ctx.save(); ctx.translate(460 * s, 300 * s);
+  ctx.fillStyle = 'rgba(255,255,255,0.92)'; ctx.beginPath();
+  for (let k = 0; k <= 48; k++) { const a = (k / 48) * Math.PI * 2, rr = (k % 2 ? 190 : 214) * s; if (k) ctx.lineTo(Math.cos(a) * rr, Math.sin(a) * rr * 0.78); else ctx.moveTo(rr, 0); }
+  ctx.fill(); ctx.restore();
+  // Crisps.
+  for (let k = 0; k < 16; k++) {
+    const cx = 700 + r() * 200, cy = 380 + r() * 150, rx = 40 + r() * 30, ry = 26 + r() * 18, a = r() * Math.PI;
+    const cg = ctx.createRadialGradient((cx - 10) * s, (cy - 8) * s, 2, cx * s, cy * s, rx * s);
+    cg.addColorStop(0, '#fff1b8'); cg.addColorStop(0.7, '#f0b43c'); cg.addColorStop(1, '#b86e12');
+    ctx.fillStyle = cg; ctx.beginPath(); ctx.ellipse(cx * s, cy * s, rx * s, ry * s, a, 0, Math.PI * 2); ctx.fill();
+    ctx.fillStyle = 'rgba(255,255,255,0.7)';
+    for (let q = 0; q < 8; q++) ctx.fillRect((cx + (r() - 0.5) * rx) * s, (cy + (r() - 0.5) * ry) * s, 1.6 * s, 1.6 * s);
+  }
+  // Flavour ribbon and net weight.
+  ctx.fillStyle = '#7a0c1f'; ctx.beginPath(); ctx.moveTo(110 * s, 468 * s); ctx.lineTo(470 * s, 462 * s); ctx.lineTo(450 * s, 492 * s); ctx.lineTo(470 * s, 522 * s); ctx.lineTo(110 * s, 516 * s); ctx.lineTo(130 * s, 492 * s); ctx.closePath(); ctx.fill();
+  ctx.fillStyle = '#ffffff'; font(p, 30, SCRIPT); text(p, 'Sea Salt & Honey', 290, 503, 'center');
+  ctx.fillStyle = INK; font(p, 12, INTER, 600); text(p, 'NET WT 45 g (1.6 oz)', 110, h - 20);
+  // Crimped seals.
+  for (const x0 of [0, PAGE_W * 0.93]) {
+    const sg = ctx.createLinearGradient(x0 * s, 0, (x0 + 70) * s, 0);
+    sg.addColorStop(0, '#9aa0a6'); sg.addColorStop(0.5, '#e8ebee'); sg.addColorStop(1, '#8a9096');
+    ctx.fillStyle = sg; ctx.fillRect(x0 * s, 0, 70 * s, h * s);
+    ctx.fillStyle = 'rgba(40,40,40,0.25)';
+    for (let y = 0; y < h; y += 5) ctx.fillRect(x0 * s, y * s, 70 * s, 1.2 * s);
+  }
+  const back = mk(512, Math.round(512 * aspect));
+  { const b = back.getContext('2d')!; b.fillStyle = '#c9ced3'; b.fillRect(0, 0, back.width, back.height); }
+  return { front, back };
+}
+
+/** Woven cotton: a twill weave with slubs, hemmed edges with stitching, and a woven care label. */
+function paintFabric(seed: number, widthPx: number, aspect: number, color: string): { front: ArtCanvas; back: ArtCanvas } {
+  const h = PAGE_W * aspect;
+  const s = widthPx / PAGE_W;
+  const W = widthPx, H = Math.round(h * s);
+  const make = (dark: number) => {
+    const c = mk(W, H);
+    const ctx = c.getContext('2d')!;
+    const img = ctx.createImageData(W, H);
+    const [br, bg, bb] = hexToRgb(color);
+    const r = rng(seed, 51);
+    const slub = new Float32Array(H);
+    for (let y = 0; y < H; y++) slub[y] = (r() - 0.5) * 0.12;
+    const tp = Math.max(2, Math.round(1.6 * s));
+    for (let y = 0; y < H; y++) {
+      for (let x = 0; x < W; x++) {
+        const tw = ((Math.floor(x / tp) + Math.floor(y / tp)) & 3) < 2 ? 1 : -1;
+        const warp = Math.floor(x / tp) % 2 ? 0.04 : -0.02;
+        const n = (hash32(x, y, seed) / 4294967296 - 0.5) * 0.08;
+        const k = 1 + tw * 0.07 + warp + slub[y]! + n - dark;
+        const o = (y * W + x) * 4;
+        img.data[o] = Math.min(255, br * k); img.data[o + 1] = Math.min(255, bg * k); img.data[o + 2] = Math.min(255, bb * k); img.data[o + 3] = 255;
+      }
+    }
+    ctx.putImageData(img, 0, 0);
+    return c;
+  };
+  const front = make(0);
+  const ctx = front.getContext('2d')!;
+  const p: Pen = { ctx, s };
+  // Hem: a darker folded band and a running stitch.
+  ctx.fillStyle = 'rgba(0,0,0,0.16)';
+  const hem = 20;
+  ctx.fillRect(0, 0, PAGE_W * s, hem * s); ctx.fillRect(0, (h - hem) * s, PAGE_W * s, hem * s);
+  ctx.fillRect(0, 0, hem * s, h * s); ctx.fillRect((PAGE_W - hem) * s, 0, hem * s, h * s);
+  ctx.strokeStyle = 'rgba(240,230,200,0.75)'; ctx.lineWidth = 1.4 * s; ctx.setLineDash([6 * s, 4 * s]);
+  ctx.strokeRect((hem - 6) * s, (hem - 6) * s, (PAGE_W - 2 * hem + 12) * s, (h - 2 * hem + 12) * s);
+  ctx.setLineDash([]);
+  // Care label.
+  ctx.fillStyle = '#f4efe2'; ctx.fillRect(880 * s, (h - 96) * s, 80 * s, 56 * s);
+  ctx.fillStyle = '#2b2b2b'; font(p, 9, COND, 700); text(p, '100% COTTON', 920, h - 76, 'center');
+  font(p, 7, COND, 500); text(p, 'MADE IN PORTUGAL', 920, h - 62, 'center'); text(p, '30° · DO NOT BLEACH', 920, h - 50, 'center');
+  return { front, back: make(0.18) };
+}
+
+/** A ruled note sheet: cream tooth, blue rules, a red margin and three punched holes (real holes). */
+function paintNotePaper(seed: number, widthPx: number, aspect: number, color: string): { front: ArtCanvas; back: ArtCanvas } {
+  const h = PAGE_W * aspect;
+  const s = widthPx / PAGE_W;
+  const draw = (mirror: boolean, lines: number) => {
+    const c = mk(widthPx, Math.round(h * s));
+    const ctx = c.getContext('2d')!;
+    const p: Pen = { ctx, s };
+    paperBase(p, rng(seed, mirror ? 62 : 61), PAGE_W, h, color);
+    if (mirror) { ctx.translate(widthPx, 0); ctx.scale(-1, 1); }
+    ctx.fillStyle = `rgba(90,140,210,${0.55 * lines})`;
+    for (let y = 150; y < h - 40; y += 34) ctx.fillRect(0, y * s, PAGE_W * s, 1.3 * s);
+    ctx.fillStyle = `rgba(220,70,70,${0.6 * lines})`;
+    ctx.fillRect(118 * s, 0, 1.6 * s, h * s);
+    ctx.globalCompositeOperation = 'destination-out';
+    for (const y of [h * 0.18, h * 0.5, h * 0.82]) { ctx.beginPath(); ctx.arc(50 * s, y * s, 15 * s, 0, Math.PI * 2); ctx.fill(); }
+    ctx.globalCompositeOperation = 'source-over';
+    return c;
+  };
+  return { front: draw(false, 1), back: draw(true, 0.25) };
+}
+
+/** Every surface's textures: front, back of the sheet, and (newspaper) the page under it. */
+export function paintSurfaceArt(art: string, seed: number, aspect: number, color: string): { front: ArtCanvas; back: ArtCanvas; inner: ArtCanvas } {
+  switch (art) {
+    case 'newspaper': return paintNewspaper(seed, 2048, aspect);
+    case 'label': { const a = paintLabel(seed, 2048, aspect); return { ...a, inner: a.back }; }
+    case 'wrapper': { const a = paintWrapper(seed, 2048, aspect, color); return { ...a, inner: a.back }; }
+    case 'fabric': { const a = paintFabric(seed, 2048, aspect, color); return { ...a, inner: a.back }; }
+    case 'paper': { const a = paintNotePaper(seed, 1536, aspect, color); return { ...a, inner: a.back }; }
+    default: { const c = paintPlain(color, aspect, seed); return { front: c, back: c, inner: c }; }
+  }
+}
+
+/** A plain surface in one colour with a little tone (a registered surface with no painter). */
+export function paintPlain(color: string, aspect: number, seed: number, widthPx = 1024): ArtCanvas {
+  const c = mk(widthPx, Math.round(widthPx * aspect));
+  const p: Pen = { ctx: c.getContext('2d')!, s: widthPx / PAGE_W };
+  paperBase(p, rng(seed, 9), PAGE_W, PAGE_W * aspect, color);
+  return c;
+}
+
+/** A tiling grain: fibres and tooth, grey around 0.5. Used for ink break-up and paper micro-shading. */
+export function paintGrain(seed: number, size = 512): ArtCanvas {
+  const c = mk(size, size);
+  const ctx = c.getContext('2d')!;
+  const img = ctx.createImageData(size, size);
+  const r = rng(seed, 55);
+  for (let k = 0; k < size * size; k++) {
+    const v = 128 + (r() - 0.5) * 70;
+    img.data[k * 4] = v; img.data[k * 4 + 1] = v; img.data[k * 4 + 2] = v; img.data[k * 4 + 3] = 255;
+  }
+  ctx.putImageData(img, 0, 0);
+  ctx.globalCompositeOperation = 'soft-light';
+  for (let k = 0; k < 2600; k++) {
+    const x = r() * size, y = r() * size, a = r() * Math.PI, l = 3 + r() * 14;
+    ctx.strokeStyle = r() < 0.5 ? 'rgba(0,0,0,0.5)' : 'rgba(255,255,255,0.5)';
+    ctx.lineWidth = 0.6 + r();
+    for (const ox of [0, -size, size]) for (const oy of [0, -size, size]) {
+      ctx.beginPath(); ctx.moveTo(x + ox, y + oy); ctx.lineTo(x + ox + Math.cos(a) * l, y + oy + Math.sin(a) * l); ctx.stroke();
+    }
+  }
+  return c;
+}