@appinternalleads/ui 0.4.0 → 0.4.2

package/dist/esm/motion/typesurface/art.js

@@ -0,0 +1,854 @@
+/* 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';
+const mk = (w, h) => {
+    const c = document.createElement('canvas');
+    c.width = w;
+    c.height = h;
+    return c;
+};
+/** Seeded random stream. */
+function rng(seed, salt) {
+    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';
+function font(p, px, family, weight = 400, style = 'normal') {
+    p.ctx.font = `${style} ${weight} ${px * p.s}px ${family}`;
+}
+function text(p, t, x, y, align = 'left') {
+    p.ctx.textAlign = align;
+    p.ctx.fillText(t, x * p.s, y * p.s);
+}
+function rule(p, x0, y, x1, w = 1) {
+    p.ctx.fillRect(x0 * p.s, (y - w / 2) * p.s, (x1 - x0) * p.s, w * p.s);
+}
+function vrule(p, x, y0, y1, 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, r, x, y, w, bottom, size = 10.2, lead = 12.4, dropCap = false) {
+    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 = [];
+        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, r, x, y, w, h, kind) {
+    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, r, w, h, 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, y0, x1, y1) => {
+        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, r, w, h) {
+    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, w, y) {
+    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, seed, h, pageLabel) {
+    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, seed, h) {
+    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) => 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 = [['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');
+}
+/** Paint a newspaper's three textures: front page, back of the sheet, and the page under it. */
+export function paintNewspaper(seed, widthPx = 2048, aspect = 1.36) {
+    const h = PAGE_W * aspect;
+    const s = widthPx / PAGE_W;
+    const hp = Math.round(h * s);
+    const back = mk(widthPx, hp);
+    {
+        const p = { 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 = { 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 = { 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) {
+    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, k) => { const [r, g, b] = hexToRgb(h); const f = (v) => 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, r, x, y, w, h) {
+    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, r, cx, cy, w, h, color, width) {
+    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, widthPx, aspect) {
+    const h = PAGE_W * aspect;
+    const s = widthPx / PAGE_W;
+    const front = mk(widthPx, Math.round(h * s));
+    const p = { 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, x, y));
+    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, widthPx, aspect, color) {
+    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 = { 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, widthPx, aspect, color) {
+    const h = PAGE_W * aspect;
+    const s = widthPx / PAGE_W;
+    const W = widthPx, H = Math.round(h * s);
+    const make = (dark) => {
+        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 = { 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, widthPx, aspect, color) {
+    const h = PAGE_W * aspect;
+    const s = widthPx / PAGE_W;
+    const draw = (mirror, lines) => {
+        const c = mk(widthPx, Math.round(h * s));
+        const ctx = c.getContext('2d');
+        const p = { 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, seed, aspect, color) {
+    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, aspect, seed, widthPx = 1024) {
+    const c = mk(widthPx, Math.round(widthPx * aspect));
+    const p = { 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, size = 512) {
+    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;
+}
+//# sourceMappingURL=art.js.map