@bongos/core 1.24.94 → 1.24.95

package/docs/design/characters/v2/draw-characters.js

@@ -0,0 +1,465 @@
+#!/usr/bin/env node
+// draw-characters.js — the second look for the three characters (exploration, 2026-11-11).
+//
+// The owner's brief: keep "two animals combined", leave ancient Egypt for an alien,
+// space-opera feel that sits with the Helm UI, draw at 64x64, give each character ONE
+// colour of its own, and draw a second version of each wearing the VR visor with the rim
+// in that colour.
+//
+// The sprites are DRAWN BY THIS FILE, pixel by pixel, so a change to a character is an edit
+// here and a re-run, never a hand-edited PNG:
+//
+//   node docs/design/characters/v2/draw-characters.js
+//
+// writes, beside this file: <id>.png and <id>-visor.png (64x64, transparent), and
+// contact.png (all six, enlarged, on the hall's night ground) for looking at.
+//
+//   node docs/design/characters/v2/draw-characters.js --hall
+//
+// also writes the three files per character the hall serves (task 1005218), into
+// modules/hall-ui/public/characters/: <id>.png (the whole figure, 64x64), <id>-face.png
+// (the head, 32x32, for the top-bar chip) and <id>-visor.png (the head wearing the visor,
+// 32x32, for the visor's corner). The hall's pictures are never edited by hand.
+'use strict';
+const fs = require('node:fs');
+const path = require('node:path');
+const zlib = require('node:zlib');
+
+const N = 64;
+const OUT = '#04080f';
+
+// ---------- a 64x64 sheet of colours ----------
+function sheet() {
+  const px = new Array(N * N).fill(null);
+  const S = {
+    px,
+    set(x, y, c) { x = Math.round(x); y = Math.round(y); if (x >= 0 && y >= 0 && x < N && y < N) px[y * N + x] = c; },
+    get(x, y) { return x >= 0 && y >= 0 && x < N && y < N ? px[y * N + x] : null; },
+    rect(x0, y0, x1, y1, c) { for (let y = y0; y <= y1; y++) for (let x = x0; x <= x1; x++) S.set(x, y, c); },
+    ell(cx, cy, rx, ry, c) {
+      for (let y = Math.floor(cy - ry); y <= Math.ceil(cy + ry); y++) for (let x = Math.floor(cx - rx); x <= Math.ceil(cx + rx); x++) {
+        const dx = (x - cx) / rx, dy = (y - cy) / ry;
+        if (dx * dx + dy * dy <= 1) S.set(x, y, c);
+      }
+    },
+    poly(pts, c) {
+      const ys = pts.map((p) => p[1]);
+      for (let y = Math.min(...ys); y <= Math.max(...ys); y++) {
+        const xs = [];
+        for (let i = 0; i < pts.length; i++) {
+          const [x0, y0] = pts[i], [x1, y1] = pts[(i + 1) % pts.length];
+          if ((y0 <= y && y1 > y) || (y1 <= y && y0 > y)) xs.push(x0 + ((y - y0) / (y1 - y0)) * (x1 - x0));
+        }
+        xs.sort((a, b) => a - b);
+        for (let i = 0; i + 1 < xs.length; i += 2) for (let x = Math.round(xs[i]); x <= Math.round(xs[i + 1]); x++) S.set(x, y, c);
+      }
+    },
+    // a line with a round brush; `w` may taper from w to w1
+    line(x0, y0, x1, y1, c, w = 1, w1 = w) {
+      const n = Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0)) * 2 || 1;
+      for (let i = 0; i <= n; i++) {
+        const t = i / n, x = x0 + (x1 - x0) * t, y = y0 + (y1 - y0) * t, r = (w + (w1 - w) * t) / 2;
+        if (r <= 0.6) S.set(x, y, c); else S.ell(x, y, r, r, c);
+      }
+    },
+    path(pts, c, w = 1, w1 = w) {
+      for (let i = 0; i + 1 < pts.length; i++) {
+        const a = w + (w1 - w) * (i / (pts.length - 1)), b = w + (w1 - w) * ((i + 1) / (pts.length - 1));
+        S.line(pts[i][0], pts[i][1], pts[i + 1][0], pts[i + 1][1], c, a, b);
+      }
+    },
+    dots(list, c) { for (const [x, y] of list) S.set(x, y, c); },
+    // one light from the upper right: the silhouette's lit edge up a tone, its far edge down
+    shade(skip) {
+      const src = px.slice(), at = (x, y) => (x >= 0 && y >= 0 && x < N && y < N ? src[y * N + x] : null);
+      const mix = (c, to, k) => '#' + [1, 3, 5].map((i) => Math.round(parseInt(c.slice(i, i + 2), 16) * (1 - k) + parseInt(to.slice(i, i + 2), 16) * k).toString(16).padStart(2, '0')).join('');
+      for (let y = 0; y < N; y++) for (let x = 0; x < N; x++) {
+        const c = at(x, y);
+        if (!c || skip.has(c)) continue;
+        const lit = !at(x, y - 1) || !at(x + 1, y), far = !at(x - 1, y) || !at(x, y + 1);
+        if (lit && !far) px[y * N + x] = mix(c, '#ffffff', 0.2);
+        else if (far && !lit) px[y * N + x] = mix(c, '#04080f', 0.3);
+      }
+    },
+    // one dark pixel round the whole figure
+    outline(c = OUT) {
+      const add = [];
+      for (let y = 0; y < N; y++) for (let x = 0; x < N; x++) {
+        if (S.get(x, y)) continue;
+        if (S.get(x - 1, y) || S.get(x + 1, y) || S.get(x, y - 1) || S.get(x, y + 1)) add.push([x, y]);
+      }
+      S.dots(add, c);
+    },
+  };
+  return S;
+}
+
+// ---------- shared cloth and metal ----------
+const SUIT = { d: '#111e2d', s: '#182a3c', m: '#1f3549', l: '#34566f', hi: '#5d8aa6' };
+const SHADOW = '#081320';
+const ICE = '#c8f1f7';
+const GLASS = '#0a1624';
+
+// The three colours. One per character; the visor rim, the lit parts of the suit and the
+// glass tint all take it.
+const COLOUR = {
+  artisan: { c: '#fb9569', l: '#ffc7ab', d: '#b3562f', name: 'Ember' },
+  artist: { c: '#c59bff', l: '#e8d8ff', d: '#7a52c4', name: 'Violet' },
+  patron: { c: '#ffd166', l: '#fff0bd', d: '#b3851c', name: 'Gold' },
+};
+
+// THE RULES OF THIS LOOK (owner, 2026-11-11, four rounds):
+//   1. "the animals weren't very recognizable": one animal gives the HEAD, whole, the other
+//      gives the BODY, whole (limbs, feet, tail). Never a blend of the two in one part.
+//   2. "way too kiddish": no big heads, no round eyes, no fluffy or candy shapes. They stand
+//      tall and lean, in armour and long coats, the eye a narrow slit of light in the
+//      character's colour. Natural colours, held back.
+//   3. each holds the one tool its role is known by, carried like a staff.
+//   4. "the originals were more 2.5D, which felt more alive than our side view": the body is
+//      turned three-quarters to the viewer (both shoulders, a hand on the hip, a stride, the
+//      far foot higher than the near one), the head stays in profile, and they stand on a
+//      lit disc as the originals stood on a plinth.
+//   5. "simplify": at 64 pixels a detail smaller than two pixels is noise. Big flat shapes,
+//      three tones each, the character's colour in a few strong places, no speckle.
+//   6. one light, from the upper right, where they are looking: every figure's lit edge is
+//      raised and its far edge dropped by shade() below, so the three share one light without
+//      a hand-placed highlight. And each has its own build: the Artisan broad in heavy plate,
+//      the Artist narrow in cloth, the Patron upright under a cape.
+
+// what the light leaves alone: anything that glows, the glass, the disc
+function lit(A) { return new Set([A.c, A.l, A.d, ICE, GLASS, SHADOW, '#0d1a29', '#12233a']); }
+
+// a spiral with a round brush
+function spiral(S, cx, cy, r0, r1, a0, a1, c, w0, w1) {
+  const n = 220;
+  for (let i = 0; i <= n; i++) {
+    const t = i / n, a = (a0 + (a1 - a0) * t) * Math.PI / 180, r = r0 + (r1 - r0) * t, w = (w0 + (w1 - w0) * t) / 2;
+    S.ell(cx + Math.cos(a) * r, cy + Math.sin(a) * r, w, w, c);
+  }
+}
+// a ram's horn: a thick curl that thins to a tip, ridged across, lit along its outer edge
+function horn(S, cx, cy, r0, r1, a0, a1, w0, w1, H, ridges) {
+  spiral(S, cx, cy, r0, r1, a0, a1, H.d, w0 + 1.4, w1 + 1);
+  spiral(S, cx, cy, r0, r1, a0, a1, H.m, w0, w1);
+  for (let k = 1; k < ridges; k++) {
+    const t = k / ridges, a = (a0 + (a1 - a0) * t) * Math.PI / 180, r = r0 + (r1 - r0) * t, w = (w0 + (w1 - w0) * t) / 2;
+    S.line(cx + Math.cos(a) * (r - w), cy + Math.sin(a) * (r - w), cx + Math.cos(a) * (r + w), cy + Math.sin(a) * (r + w), H.d, 1);
+    const b = (a0 + (a1 - a0) * (t - 0.5 / ridges)) * Math.PI / 180;
+    S.set(cx + Math.cos(b) * (r + w - 0.6), cy + Math.sin(b) * (r + w - 0.6), H.l);
+  }
+}
+
+// the lit disc they stand on
+function ground(S, A) {
+  S.ell(31, 59.6, 20, 3.6, A.d);
+  S.ell(31, 59, 20, 3.2, '#0d1a29');
+  S.ell(31, 58.6, 15, 2, '#12233a');
+  S.ell(30, 58.8, 12, 1.8, SHADOW);                      // their shadow, falling away from the light
+}
+// plate armour, turned three-quarters: both shoulders, the breastplate off-centre
+function torso(S, A) {
+  S.poly([[20, 24], [40, 23], [41, 28], [38, 35], [36, 42], [25, 42], [23, 35], [19, 29]], SUIT.m);
+  S.poly([[27, 25], [39, 24], [40, 28], [37, 35], [35, 41], [28, 41], [26, 34]], SUIT.l);
+  S.poly([[20, 24], [24, 24], [26, 34], [27, 41], [25, 41], [23, 35], [19, 29]], SUIT.s);   // the near flank, out of the light
+  S.path([[35, 25], [39, 25], [40, 28]], SUIT.hi, 1);                // the plate's lit rim
+  S.rect(25, 41, 36, 42, SUIT.d); S.rect(31, 41, 33, 42, A.c);
+  S.rect(28, 21, 36, 23, SUIT.d); S.rect(28, 21, 36, 21, SUIT.l);     // high collar
+}
+// a stride: the far leg behind and higher, the near leg forward and lower
+function legs(S, A, foot, claw) {
+  S.poly([[31, 42], [37, 42], [38, 49], [39, 55], [35, 55], [33, 49]], SUIT.d);
+  S.ell(39, 56.4, 4.4, 1.9, foot.d); S.dots([[43, 57], [41, 58]], claw);
+  S.poly([[24, 42], [31, 42], [31, 50], [30, 58], [25, 58], [24, 50]], SUIT.m);
+  S.poly([[28, 43], [31, 43], [31, 50], [30, 58], [28, 58], [29, 50]], SUIT.l);
+  S.ell(28.5, 59.4, 5.2, 2.1, foot.m); S.rect(25, 58, 31, 58, foot.l);
+  S.dots([[33, 60], [32, 61], [29, 61]], claw);
+}
+// the near arm, the body-animal's own, fist on the hip, elbow out
+function nearArm(S, A, skin, claw) {
+  S.path([[20, 29], [15, 35], [21, 40]], skin.d, 4.6, 3.8);
+  S.path([[20, 28], [15, 34], [21, 39]], skin.m, 3, 2.6);
+  S.ell(22.5, 40, 2.2, 2, skin.l); S.dots([[24, 41], [22, 42]], claw);
+  S.ell(21, 26, 4.8, 3.4, SUIT.l); S.rect(18, 24, 24, 24, SUIT.hi); S.rect(19, 27, 23, 27, A.c);
+}
+// the far arm, reaching to the tool it carries
+function farArm(S, A, skin, claw, hx) {
+  S.path([[40, 28], [44, 34], [hx - 2, 33]], skin.d, 4.2, 3.6);
+  S.path([[40, 27], [44, 33], [hx - 2, 32]], skin.m, 2.6, 2.4);
+  S.ell(hx, 32.5, 2.6, 2.4, skin.l); S.dots([[hx - 1, 35], [hx + 1, 35], [hx + 3, 34]], claw);
+  S.ell(39, 25, 3.6, 2.8, SUIT.l); S.rect(37, 23, 41, 23, A.c);
+}
+
+// the visor: a dark glass band over the eyes, rim in the character's colour, a strap
+// running to the back of the head
+function visor(S, A, x0, y0, x1, y1, strapTo) {
+  if (strapTo) S.line(x0, y0 + 2, strapTo[0], strapTo[1], A.d, 1.6);
+  S.rect(x0, y0, x1, y1, A.c);
+  S.rect(x0 + 1, y0 + 1, x1 - 1, y1 - 1, GLASS);
+  S.set(x0, y0, null); S.set(x0, y1, null);
+  S.rect(x0 + 2, y1 - 1, x1 - 2, y1 - 1, A.d);             // the colour, caught along the glass
+  S.line(x1 - 3, y1 - 1, x1 - 2, y0 + 1, ICE, 1);
+  S.rect(x1 + 1, y0 + 1, x1 + 1, y1 - 1, A.d);             // the front of the housing
+}
+// the bare eye: a dark socket, a slit of the character's colour
+function slit(S, A, x, y, dark) { S.rect(x - 2, y - 2, x + 3, y, dark); S.rect(x, y, x + 2, y, A.c); S.set(x + 2, y, A.l); }
+
+// ---------- ARTISAN: a ram's head on a lizard's body, the long spanner ----------
+function artisan(withVisor) {
+  const S = sheet(), A = COLOUR.artisan;
+  const LZ = { m: '#4f7d5f', d: '#33574a', l: '#7fae7c' };
+  const WOOL = { m: '#b3a892', d: '#857b68', l: '#d6ccb4' };
+  const FACE = { m: '#8b767a', d: '#4a3b42', l: '#b39ea4' };
+  const HORN = { m: '#d8c491', d: '#8a7446', l: '#f6ebc4' };
+  const FAR = { m: '#a08c5c', d: '#6b5932', l: '#a08c5c' };
+  const STEEL = { m: '#93adbd', d: '#5b7687', l: '#d9eaf2' };
+
+  ground(S, A);
+  // the lizard's tail: heavy at the hip, swung out toward the viewer, plated along the top
+  S.path([[25, 41], [17, 48], [10, 54], [5, 56], [2, 53]], LZ.d, 6.6, 1.4);
+  S.path([[25, 40], [17, 47], [10, 53], [6, 55]], LZ.m, 3.6, 1);
+  S.path([[24, 39], [17, 45], [11, 50]], LZ.l, 1.4, 1);                    // light along the top of the tail
+  S.rect(20, 42, 21, 43, A.c); S.rect(13, 48, 14, 49, A.c);
+
+  legs(S, A, LZ, WOOL.l);
+  S.ell(21, 28, 5.6, 5, SUIT.s); S.ell(40, 27, 4.6, 4.4, SUIT.m);        // broad round shoulders under the plate
+  torso(S, A);
+  S.poly([[26, 25], [40, 24], [41, 29], [38, 35], [27, 35]], SUIT.l);            // a deeper breastplate
+  S.path([[36, 25], [40, 25], [41, 28]], SUIT.hi, 1);
+  S.rect(30, 28, 36, 30, A.c); S.rect(32, 29, 34, 29, A.l);                // the lit core in the chest
+  S.rect(24, 43, 27, 46, SUIT.l); S.rect(34, 43, 36, 45, SUIT.l);          // tool pouches on the belt
+
+  // neck: short dense wool
+  S.rect(28, 17, 35, 21, WOOL.d);
+  // the far horn first: its curl rising behind the skull
+  horn(S, 31, 10, 7.5, 6, -160, -20, 3.4, 2, FAR, 5);
+  // skull, close wool
+  S.ell(28, 11, 7, 6.5, WOOL.m); S.ell(26, 13, 5, 4.4, WOOL.d);
+  // the long bony ram's face, nose line bowed out
+  S.poly([[31, 5], [37, 5], [42, 8], [46, 13], [48, 18], [46, 21], [38, 21], [32, 19], [30, 11]], FACE.m);
+  S.path([[33, 6], [37, 6], [42, 9], [46, 14]], FACE.l, 1.4);
+  S.poly([[32, 15], [39, 17], [38, 20], [33, 19]], '#73616a');             // the cheek, in shade
+  S.path([[37, 20], [46, 20]], FACE.d, 1.4);
+  S.set(47, 16, FACE.d); S.path([[42, 19], [47, 18]], FACE.d, 1);          // nostril, mouth
+  S.poly([[38, 21], [41, 21], [40, 25]], WOOL.d);                         // beard
+  // ear, inside the curl
+  S.poly([[26, 12], [20, 15], [22, 17], [27, 15]], FACE.m); S.path([[25, 14], [22, 15]], FACE.d, 1);
+  // the near horn: up off the brow, back, down, and forward to a point at the cheek
+  horn(S, 24, 12, 8.6, 5.4, -62, -352, 5.2, 1.6, HORN, 10);
+
+  if (withVisor) visor(S, A, 33, 7, 44, 13, null);
+  else slit(S, A, 37, 11, FACE.d);
+
+  // the spanner, carried like a staff: a long shaft, an open jaw at the head
+  S.rect(51, 18, 52, 58, STEEL.d); S.rect(52, 19, 52, 57, STEEL.m);
+  S.ell(51.5, 14, 4.6, 4.6, STEEL.d); S.ell(51.5, 14, 3.2, 3.2, STEEL.m);
+  S.rect(50, 8, 53, 14, null);                                            // the jaw
+  S.rect(51, 24, 52, 25, A.c); S.rect(50, 57, 53, 58, STEEL.d);
+  farArm(S, A, LZ, WOOL.l, 51);
+  nearArm(S, A, LZ, WOOL.l);
+  S.ell(20, 25.5, 6, 4.2, SUIT.l); S.ell(21.5, 23.6, 4, 1.4, SUIT.hi); S.rect(17, 28, 23, 28, A.c);   // heavy round pauldrons
+  S.ell(40, 24.5, 4.6, 3.2, SUIT.l); S.ell(41, 23.2, 3, 1.1, SUIT.hi); S.rect(38, 26, 42, 26, A.c);
+
+  S.shade(lit(A));
+  S.outline();
+  return S;
+}
+
+// ---------- ARTIST: an ibis's head on an octopus's body, the light-brush ----------
+function artist(withVisor) {
+  const S = sheet(), A = COLOUR.artist;
+  const FE = { m: '#e6e3ee', d: '#a59fbb', l: '#ffffff' };
+  const BEAK = { m: '#b3a6dd', d: '#6f609f', l: '#e3dbf7', face: '#3a3058' };
+  const OC = { m: '#6657aa', d: '#453a80', l: '#8f80d0', suck: '#cdbcf5' };
+
+  ground(S, A);
+  // the far arms under the hem, higher and darker
+  S.path([[24, 52], [16, 53], [10, 50], [8, 46]], OC.d, 4.2, 1.2);
+  S.path([[39, 52], [47, 53], [53, 50], [55, 46]], OC.d, 4.2, 1.2);
+  // the near ones, lower and lit
+  S.path([[25, 54], [19, 59], [12, 60], [8, 57]], OC.m, 4.6, 1.2);
+  S.path([[37, 54], [43, 59], [50, 60], [54, 57]], OC.m, 4.6, 1.2);
+  S.rect(13, 59, 14, 59, OC.suck); S.rect(48, 59, 49, 59, OC.suck);
+
+  // a long coat to the ground, turned three-quarters, open down the front, a lit hem
+  S.poly([[22, 24], [38, 23], [39, 28], [38, 40], [42, 54], [19, 54], [23, 40], [21, 29]], SUIT.m);
+  S.poly([[28, 25], [37, 24], [38, 28], [37, 40], [41, 53], [29, 53], [28, 40]], SUIT.l);
+  S.poly([[22, 24], [25, 24], [26, 38], [23, 40], [21, 29]], SUIT.s);     // the near flank, out of the light
+  S.path([[25, 41], [22, 53]], SUIT.d, 1.6); S.path([[31, 42], [31, 53]], SUIT.m, 1.6);   // folds
+  S.path([[38, 41], [40, 52]], SUIT.hi, 1);                               // the lit fall of the cloth
+  S.path([[33, 25], [35, 53]], A.d, 1);
+  S.rect(19, 54, 42, 55, A.c); S.rect(19, 53, 42, 53, A.d);
+  S.rect(23, 38, 39, 39, SUIT.d); S.rect(35, 38, 37, 42, A.c);           // sash, its tail
+  S.rect(28, 21, 36, 23, SUIT.d); S.rect(28, 21, 36, 21, A.d);            // high collar
+
+  // the ibis: a long white neck
+  S.path([[31, 22], [29, 19], [29, 16]], FE.d, 4.4);
+  S.path([[32, 22], [30, 19], [30, 16]], FE.m, 2.2);
+  // head, two plumes off the back of it
+  S.ell(29, 11, 7, 7, FE.m); S.ell(26, 13, 4.4, 4.4, FE.d); S.ell(28, 11, 5.4, 5.4, FE.m);
+  S.path([[23, 9], [18, 11], [16, 15]], FE.m, 2, 1); S.path([[23, 12], [19, 15], [18, 19]], FE.d, 1.6, 1);
+  // the bare dark face and the long down-curved beak
+  S.ell(34, 11, 3.4, 3.8, BEAK.face);
+  S.path([[36, 11], [41, 12], [45, 15], [47, 19], [48, 24]], BEAK.d, 4.8, 1.2);
+  S.path([[36, 10], [41, 11], [45, 14], [47, 18], [48, 23]], BEAK.m, 3, 1);
+  S.path([[37, 9], [41, 10], [44, 12]], BEAK.l, 1);
+
+  if (withVisor) visor(S, A, 28, 7, 37, 12, [22, 9]);
+  else slit(S, A, 32, 10, BEAK.face);
+
+  // the light-brush: a long thin rod, the head burning in her colour
+  S.path([[44, 44], [55, 22]], '#5b7687', 1.8); S.path([[45, 42], [55, 22]], '#93adbd', 1);
+  S.poly([[54, 22], [57, 22], [59, 17], [58, 12], [55, 17]], A.c);
+  S.path([[56, 21], [57, 15]], A.l, 1); S.set(58, 11, ICE);
+  // the far arm, wound once round the rod
+  S.path([[38, 27], [43, 33], [48, 35], [51, 32], [49, 30]], OC.d, 4, 1.6);
+  S.path([[38, 27], [43, 32], [48, 34], [50, 32]], OC.m, 2.4, 1.2);
+  // the near arm, curled at the hip
+  S.path([[22, 29], [18, 37], [19, 44], [16, 48]], OC.d, 4.4, 1.6);
+  S.path([[22, 28], [18, 36], [19, 43]], OC.m, 2.6, 1.4);
+  // a shawl over both shoulders, a lit edge: cloth, where the others wear plate
+  S.poly([[22, 23], [38, 22], [41, 27], [37, 30], [30, 32], [24, 30], [19, 28]], '#2a2350');
+  S.poly([[27, 23], [37, 22], [39, 26], [33, 27], [28, 26]], '#3d3378');   // light across the shawl
+  S.path([[19, 28], [24, 30], [30, 32], [37, 30], [41, 27]], A.c, 1.4);
+  S.rect(28, 21, 36, 22, '#2a2350'); S.rect(28, 21, 36, 21, A.d);
+
+  S.shade(lit(A));
+  S.outline();
+  return S;
+}
+
+// ---------- PATRON: a falcon's head on a lion's body, the staff of office ----------
+function patron(withVisor) {
+  const S = sheet(), A = COLOUR.patron;
+  const FE = { m: '#e9e5db', d: '#aaa392', l: '#ffffff' };
+  const CAP = { m: '#44516c', d: '#28324a', l: '#62749a' };
+  const LI = { m: '#b98d55', d: '#85602f', l: '#dcb682', tuft: '#573820' };
+  const BEAK = { m: '#8090aa', d: '#262e40', cere: '#e0b040' };
+
+  ground(S, A);
+  // the lion's tail: thin, swung out, a dark tuft, a ring of office on it
+  S.path([[18, 50], [11, 57], [6, 55], [4, 49], [6, 44]], LI.d, 3, 2.2);
+  S.path([[18, 49], [11, 56], [6, 54]], LI.m, 1.4, 1.2);
+  S.ell(7, 40, 2.6, 3.8, LI.tuft); S.set(7, 36, LI.tuft); S.rect(5, 44, 8, 44, A.c);
+
+  legs(S, A, LI, LI.tuft);
+  torso(S, A);
+  S.path([[24, 25], [36, 40]], A.c, 2); S.path([[25, 25], [37, 39]], A.d, 1);    // the sash of office
+  S.ell(32, 41.5, 1.8, 1.8, A.c); S.set(32, 41, A.l);
+  S.rect(28, 23, 36, 23, A.c);                                             // gold at the collar
+  // the cape of office: over the near shoulder, to the ground, a gold edge
+  S.poly([[17, 25], [27, 24], [27, 34], [25, 45], [25, 56], [12, 54], [14, 40]], '#27386a');
+  S.poly([[17, 25], [21, 25], [18, 40], [16, 54], [12, 54], [14, 40]], '#1a2748');
+  S.path([[23, 28], [21, 42], [20, 55]], '#3d5290', 1.6);                  // a lit fold
+  S.path([[25, 34], [23, 46], [23, 55]], '#1a2748', 1);                    // a deep one
+  S.ell(21, 26, 4, 1.6, '#3d5290');                                        // light on the shoulder
+  S.path([[27, 24], [27, 34], [25, 45], [25, 56]], A.c, 1.6);
+  S.path([[12, 54], [25, 56]], A.c, 1.6);
+  S.ell(26, 25, 2, 2, A.c); S.set(26, 24, A.l);
+
+  // neck: white feathers
+  S.rect(28, 18, 35, 21, FE.d); S.rect(31, 18, 35, 21, FE.m);
+  // head: the falcon. Slate cap and nape, white cheek and throat
+  S.poly([[23, 8], [17, 10], [22, 12]], CAP.d); S.poly([[22, 12], [17, 15], [23, 16]], CAP.d);   // nape feathers
+  S.ell(29, 11, 7.6, 7.2, CAP.m); S.ell(28, 6, 5, 2, CAP.l); S.ell(23, 13, 2.6, 4.4, CAP.d);
+  S.ell(33, 15, 5, 4.4, FE.m); S.ell(31, 17, 4.4, 2.4, FE.m);
+  S.path([[34, 13], [33, 18]], CAP.d, 1.6);                                // the falcon's tear
+  // the hooked beak: yellow cere, blue-grey bill, dark tip turned down
+  S.poly([[37, 8], [43, 9], [47, 12], [48, 16], [47, 22], [45, 19], [43, 16], [38, 15]], BEAK.m);
+  S.poly([[46, 15], [48, 16], [47, 22], [45, 19]], BEAK.d);
+  S.ell(38, 12, 1.8, 2.2, BEAK.cere); S.path([[38, 16], [43, 16]], BEAK.d, 1);
+  S.path([[29, 8], [37, 9]], CAP.d, 2);                                    // the heavy brow
+
+  if (withVisor) visor(S, A, 28, 7, 37, 12, [21, 9]);
+  else slit(S, A, 33, 11, CAP.d);
+
+  // the staff: a tall rod, a ring of light at its head
+  S.rect(52, 11, 53, 58, '#5b7687'); S.rect(53, 12, 53, 57, '#93adbd');
+  S.ell(52.5, 6, 4.6, 4.6, A.c); S.ell(52.5, 6, 2.6, 2.6, null); S.ell(52.5, 6, 1, 1, ICE);
+  S.rect(51, 11, 54, 12, A.d); S.rect(51, 57, 54, 58, A.d);
+  farArm(S, A, LI, LI.tuft, 52);
+  S.ell(39, 24.5, 4.2, 2.8, A.c); S.rect(36, 26, 42, 26, A.d);              // the epaulette of office
+
+  S.shade(lit(A));
+  S.outline();
+  return S;
+}
+
+// ---------- PNG ----------
+function hex(c) { return [parseInt(c.slice(1, 3), 16), parseInt(c.slice(3, 5), 16), parseInt(c.slice(5, 7), 16)]; }
+function png(w, h, rgba) {
+  const raw = Buffer.alloc((w * 4 + 1) * h);
+  for (let y = 0; y < h; y++) { raw[y * (w * 4 + 1)] = 0; rgba.copy(raw, y * (w * 4 + 1) + 1, y * w * 4, (y + 1) * w * 4); }
+  const chunk = (type, data) => {
+    const len = Buffer.alloc(4); len.writeUInt32BE(data.length);
+    const body = Buffer.concat([Buffer.from(type), data]);
+    const crc = Buffer.alloc(4); crc.writeUInt32BE(zlib.crc32(body) >>> 0);
+    return Buffer.concat([len, body, crc]);
+  };
+  const head = Buffer.alloc(13); head.writeUInt32BE(w, 0); head.writeUInt32BE(h, 4); head[8] = 8; head[9] = 6;
+  return Buffer.concat([Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]), chunk('IHDR', head), chunk('IDAT', zlib.deflateSync(raw, { level: 9 })), chunk('IEND', Buffer.alloc(0))]);
+}
+function spritePng(S) {
+  const b = Buffer.alloc(N * N * 4);
+  S.px.forEach((c, i) => { if (!c) return; const [r, g, bl] = hex(c); b[i * 4] = r; b[i * 4 + 1] = g; b[i * 4 + 2] = bl; b[i * 4 + 3] = 255; });
+  return png(N, N, b);
+}
+// the head: a 32x32 window on the top of the figure, where every head sits
+const FACE = { x: 16, y: 0, size: 32 };
+function facePng(S) {
+  const n = FACE.size, b = Buffer.alloc(n * n * 4);
+  for (let y = 0; y < n; y++) for (let x = 0; x < n; x++) {
+    const c = S.get(FACE.x + x, FACE.y + y); if (!c) continue;
+    const [r, g, bl] = hex(c), i = (y * n + x) * 4;
+    b[i] = r; b[i + 1] = g; b[i + 2] = bl; b[i + 3] = 255;
+  }
+  return png(n, n, b);
+}
+function contact(list, k) {
+  const cols = 3, rows = Math.ceil(list.length / cols), pad = 2, cell = N + pad * 2;
+  const w = cols * cell * k, h = rows * cell * k, b = Buffer.alloc(w * h * 4);
+  const [br, bg, bb] = hex('#050d16');
+  for (let i = 0; i < w * h; i++) { b[i * 4] = br; b[i * 4 + 1] = bg; b[i * 4 + 2] = bb; b[i * 4 + 3] = 255; }
+  list.forEach((S, n) => {
+    const ox = (n % cols) * cell + pad, oy = Math.floor(n / cols) * cell + pad;
+    for (let y = 0; y < N; y++) for (let x = 0; x < N; x++) {
+      const c = S.get(x, y); if (!c) continue;
+      const [r, g, bl] = hex(c);
+      for (let dy = 0; dy < k; dy++) for (let dx = 0; dx < k; dx++) {
+        const i = (((oy + y) * k + dy) * w + (ox + x) * k + dx) * 4;
+        b[i] = r; b[i + 1] = g; b[i + 2] = bl;
+      }
+    }
+  });
+  return png(w, h, b);
+}
+
+const DRAW = { artisan, artist, patron };
+// the nine files the hall serves, by name: what --hall writes, and what the test holds the
+// checked-in pictures against
+function hallFiles() {
+  const out = {};
+  for (const id of Object.keys(DRAW)) {
+    out[id + '.png'] = spritePng(DRAW[id](false));
+    out[id + '-face.png'] = facePng(DRAW[id](false));
+    out[id + '-visor.png'] = facePng(DRAW[id](true));
+  }
+  return out;
+}
+if (require.main === module) {
+  const all = [];
+  for (const id of Object.keys(DRAW)) {
+    const bare = DRAW[id](false), worn = DRAW[id](true);
+    fs.writeFileSync(path.join(__dirname, id + '.png'), spritePng(bare));
+    fs.writeFileSync(path.join(__dirname, id + '-visor.png'), spritePng(worn));
+    all.push(bare);
+  }
+  for (const id of Object.keys(DRAW)) all.push(DRAW[id](true));
+  fs.writeFileSync(path.join(__dirname, 'contact.png'), contact(all, 6));
+  if (process.argv.includes('--hall')) {
+    const hall = path.join(__dirname, '..', '..', '..', '..', 'modules', 'hall-ui', 'public', 'characters');
+    for (const [name, buf] of Object.entries(hallFiles())) fs.writeFileSync(path.join(hall, name), buf);
+    console.log('wrote the hall pictures to ' + path.relative(process.cwd(), hall));
+  }
+  console.log('drew ' + Object.keys(DRAW).join(', ') + ' (plain and visor) and contact.png');
+}
+module.exports = { DRAW, COLOUR, N, FACE, hallFiles };

package/docs/design/characters/v2/sheet.html

@@ -0,0 +1,114 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Characters, second look</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600&family=Barlow:wght@400;500&display=swap">
+<style>
+  /* A mock-up, not a hall page: the hall's night, ice and salmon are typed in here so the
+     sheet opens from a file. The pictures are drawn by draw-characters.js. */
+  :root { --bg: #050d16; --card: #0a1622; --ink: #fff; --ice: #c8f1f7; --rule: rgba(200, 241, 247, .2); --night: rgba(5, 13, 22, .72); }
+  * { box-sizing: border-box; }
+  body { margin: 0; padding: 40px; background: var(--bg); color: var(--ink); font: 400 17px/1.45 Barlow, system-ui, sans-serif; width: 1280px; }
+  h1, h2, .name, .cap, .place, .btn, .hint, .unit { font-family: "Barlow Condensed", sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }
+  h1 { font-size: 34px; margin: 0 0 4px; }
+  .lede { color: var(--ice); margin: 0 0 32px; max-width: 60em; }
+  h2 { font-size: 20px; color: var(--ice); margin: 40px 0 14px; padding-top: 14px; border-top: 1px solid var(--rule); }
+  img { image-rendering: pixelated; display: block; }
+
+  .trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
+  .door { background: var(--card); padding: 20px; border-top: 2px solid var(--c); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }
+  .door .pair { display: flex; align-items: flex-end; justify-content: center; gap: 8px; }
+  .door .pair img { width: 192px; height: 192px; }
+  .door .pair img.was { width: 120px; height: auto; opacity: .85; image-rendering: pixelated; }
+  .door .arrow { color: var(--ice); font-size: 22px; padding-bottom: 80px; }
+  .name { font-size: 30px; margin-top: 12px; color: var(--c); }
+  .mix { color: var(--ice); margin: 2px 0 8px; }
+  .swatch { display: inline-flex; align-items: center; gap: 8px; color: var(--ice); font-size: 15px; }
+  .swatch i { width: 16px; height: 16px; background: var(--c); display: inline-block; }
+  .sizes { display: flex; align-items: flex-end; gap: 18px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
+  .sizes span { color: var(--ice); font-size: 13px; display: block; margin-top: 4px; text-align: center; }
+
+  /* the visor, tinted */
+  .glass { position: relative; height: 340px; margin-bottom: 20px; overflow: hidden;
+    background: linear-gradient(to bottom, var(--night), transparent 110px, transparent 55%, var(--night)),
+      radial-gradient(120% 90% at 50% 120%, #f0b08a 0, #7f6a8f 30%, #25405f 60%, #0b1c30 100%); }
+  .glass svg { position: absolute; left: 0; width: 100%; overflow: visible; }
+  .glass svg path { fill: none; stroke: var(--c); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: .9; }
+  .glass svg.top { top: 14px; height: 42px; } .glass svg.foot { bottom: 22px; height: 18px; }
+  .place { position: absolute; left: 50%; top: 38px; transform: translateX(-50%); font-size: 22px; letter-spacing: .24em; color: var(--ice); text-shadow: 0 0 6px var(--bg); }
+  .sight { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px; border: 1.5px solid var(--c); border-radius: 50%; }
+  .sight::after { content: ""; position: absolute; left: 8px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--c); }
+  .foot { position: absolute; left: 48px; right: 48px; bottom: 64px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
+  .me { display: flex; align-items: center; gap: 14px; transform: perspective(900px) rotateY(16deg); transform-origin: left center; }
+  .face { width: 76px; height: 76px; flex: none; background-color: var(--card); background-repeat: no-repeat; background-size: 192px 192px; image-rendering: pixelated;
+    border: 2px solid var(--c); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
+  .who .cap { font-size: 14px; color: var(--c); line-height: 1; }
+  .who .num { font: 400 34px/1 "Barlow Condensed", sans-serif; }
+  .unit { font-size: 16px; color: var(--ice); }
+  .btn { justify-self: center; display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 6px 14px 6px 24px; background: var(--c); color: #1c1206; font-size: 26px; font-weight: 600; letter-spacing: .04em;
+    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); }
+  kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 5px; border: 1.5px solid currentColor; font: 500 14px/1 "Barlow Condensed", sans-serif; }
+  .hints { justify-self: end; display: flex; gap: 20px; transform: perspective(900px) rotateY(-16deg); transform-origin: right center; }
+  .hint { display: inline-flex; align-items: center; gap: 6px; font-size: 18px; letter-spacing: .04em; color: var(--ice); text-shadow: 0 0 6px var(--bg); }
+  .hint kbd { background: var(--bg); }
+  .note { color: var(--ice); font-size: 15px; margin: 6px 0 0; }
+</style>
+</head>
+<body>
+<h1>Characters, second look</h1>
+<p class="lede">Still two animals in one body: one gives the head, the other the body. They stand three-quarters to you on a lit disc, in armour and long coats, each drawn at 64 by 64 with one colour of its own, carrying the tool of its role, and with a second picture wearing the visor.</p>
+
+<h2>Who they are</h2>
+<div class="trio">
+  <div class="door" style="--c:#fb9569">
+    <div class="pair"><img src="artisan.png" alt=""></div>
+    <div class="name">Artisan</div><div class="mix">A ram's head on a lizard's body. Carries the long spanner: the one who builds.</div>
+    <span class="swatch"><i></i>Ember</span>
+    <div class="sizes"><div><img src="artisan.png" width="64" height="64" alt=""><span>64</span></div><div><img src="artisan.png" width="128" height="128" alt=""><span>128</span></div><div><img src="artisan-visor.png" width="128" height="128" alt=""><span>visor on</span></div></div>
+  </div>
+  <div class="door" style="--c:#c59bff">
+    <div class="pair"><img src="artist.png" alt=""></div>
+    <div class="name">Artist</div><div class="mix">An ibis's head on an octopus's body. Carries the light-brush: the one who shapes the look.</div>
+    <span class="swatch"><i></i>Violet</span>
+    <div class="sizes"><div><img src="artist.png" width="64" height="64" alt=""><span>64</span></div><div><img src="artist.png" width="128" height="128" alt=""><span>128</span></div><div><img src="artist-visor.png" width="128" height="128" alt=""><span>visor on</span></div></div>
+  </div>
+  <div class="door" style="--c:#ffd166">
+    <div class="pair"><img src="patron.png" alt=""></div>
+    <div class="name">Patron</div><div class="mix">A falcon's head on a lion's body. Carries the staff of office: the one who decides.</div>
+    <span class="swatch"><i></i>Gold</span>
+    <div class="sizes"><div><img src="patron.png" width="64" height="64" alt=""><span>64</span></div><div><img src="patron.png" width="128" height="128" alt=""><span>128</span></div><div><img src="patron-visor.png" width="128" height="128" alt=""><span>visor on</span></div></div>
+  </div>
+</div>
+
+<h2>The visor takes your colour, and you wear it</h2>
+<div class="glass" style="--c:#fb9569">
+  <svg class="top" viewBox="0 0 1000 100" preserveAspectRatio="none"><path d="M76 100Q500 -100 924 100"/></svg>
+  <svg class="foot" viewBox="0 0 1000 100" preserveAspectRatio="none"><path d="M76 0Q500 200 924 0"/></svg>
+  <p class="place" style="margin:0">Cloud city</p><span class="sight"></span>
+  <div class="foot"><div class="me"><span class="face" style="background-image:url(artisan-visor.png);background-position:-58px 2px"></span><span class="who"><span class="cap">Artisan</span><br><span class="num">1,240</span> <span class="unit">credits</span></span></div>
+    <span class="btn">Claim a task <kbd>C</kbd></span>
+    <div class="hints"><span class="hint"><kbd>A</kbd>Actions</span><span class="hint"><kbd>Esc</kbd>Options</span></div></div>
+</div>
+<div class="glass" style="--c:#c59bff">
+  <svg class="top" viewBox="0 0 1000 100" preserveAspectRatio="none"><path d="M76 100Q500 -100 924 100"/></svg>
+  <svg class="foot" viewBox="0 0 1000 100" preserveAspectRatio="none"><path d="M76 0Q500 200 924 0"/></svg>
+  <p class="place" style="margin:0">Cloud city</p><span class="sight"></span>
+  <div class="foot"><div class="me"><span class="face" style="background-image:url(artist-visor.png);background-position:-58px 2px"></span><span class="who"><span class="cap">Artist</span><br><span class="num">860</span> <span class="unit">credits</span></span></div>
+    <span class="btn">Review this page <kbd>R</kbd></span>
+    <div class="hints"><span class="hint"><kbd>A</kbd>Actions</span><span class="hint"><kbd>Esc</kbd>Options</span></div></div>
+</div>
+<div class="glass" style="--c:#ffd166">
+  <svg class="top" viewBox="0 0 1000 100" preserveAspectRatio="none"><path d="M76 100Q500 -100 924 100"/></svg>
+  <svg class="foot" viewBox="0 0 1000 100" preserveAspectRatio="none"><path d="M76 0Q500 200 924 0"/></svg>
+  <p class="place" style="margin:0">Cloud city</p><span class="sight"></span>
+  <div class="foot"><div class="me"><span class="face" style="background-image:url(patron-visor.png);background-position:-62px 2px"></span><span class="who"><span class="cap">Patron</span><br><span class="num">2,015</span> <span class="unit">credits</span></span></div>
+    <span class="btn">Governor city <kbd>V</kbd></span>
+    <div class="hints"><span class="hint"><kbd>A</kbd>Actions</span><span class="hint"><kbd>Esc</kbd>Options</span></div></div>
+</div>
+<p class="note">A mock-up: nothing in the hall has changed yet. The numbers are made up.</p>
+</body>
+</html>

package/docs/module-api-changelog.md

@@ -3436,5 +3436,7 @@ is load-bearing: the script throws rather than guess if it is missing, and
         landed since 1.24.92 with no explicit bump. run 43299203682. (task 1002620)
   1.24.94 — CI auto-patch (publish-on-merge, ADR 0161): carrier for merges
         landed since 1.24.93 with no explicit bump. run 43302410261. (task 1002620)
+  1.24.95 — CI auto-patch (publish-on-merge, ADR 0161): carrier for merges
+        landed since 1.24.94 with no explicit bump. run 43304959846. (task 1002620)
 ---------------------------------------------------------------------------
 ```