feat(export): server-rendered artifacts behind one signed download URL (#160)

The finished-game export (GCG + a new PNG of the final position) is one
signed, short-lived relative URL (game.export_url; HMAC-SHA256, 10-min
TTL, BACKEND_EXPORT_SIGN_KEY) resolved against the client's own origin
and delivered by the best affordance each platform has (five on-device
review rounds):

- TG Android/desktop: native showPopup chooser -> native downloadFile
  dialog (bridge-only chain, activation-safe).
- TG iOS: app-modal chooser -> OS share sheet with the fetched file
  (a popup callback cannot supply the activation the sheet needs).
- VK iOS: VKWebAppDownloadFile for both formats.
- VK Android: the PNG opens in VK's native image viewer, the GCG copies
  to the clipboard (the VK Android downloader hangs on any download,
  Content-Length/Range notwithstanding).
- VK desktop iframe / desktop browsers: plain anchor downloads.
- Mobile browsers: the OS share sheet (fetch-then-share).
- Legacy TG (< Bot API 8.0): app modal + GCG clipboard, no image option.

The PNG is rasterized on demand by the new internal `renderer` sidecar
(node:22-slim + skia-canvas + baked Liberation/Noto Color Emoji fonts)
executing the SAME ui/src/lib/gameimage.ts the ui project unit-tests;
the backend rebuilds the render payload from the journal +
engine.AlphabetTable, and the device date locale, IANA time zone and
localized non-play labels ride the signed URL. Nothing is stored — the
artifact re-derives from the immutable journal on each GET. The gateway
forwards /dl/* (caddy @gateway matcher extended) behind the per-IP
public rate limiter and serves bytes via http.ServeContent.

Deploy: renderer service in compose + prod overlay + rolling order +
prod push list; TEST_/PROD_EXPORT_SIGN_KEY secrets; the sidecar smoke
runs in the ui CI job. Docs: ARCHITECTURE, FUNCTIONAL(+_ru), UI_DESIGN,
TESTING, deploy/README, renderer/README.

ui/src/lib/gameimage.ts

@@ -1,12 +1,12 @@
 // Finished-game PNG export: a light-theme snapshot of the final board (classic A..O / 1..15
 // axes) with a compact per-seat scoresheet beside it. Everything is drawn by hand on a
-// Canvas 2D — no dependencies — and the module is reached only through a dynamic import, so
-// it stays out of the startup bundle. The scoresheet typography is fixed; the board instead
-// stretches to the scoresheet's height (never below MIN_SIDE), so a long game grows the
-// board rather than leaving a hole under it.
+// Canvas 2D — no dependencies. The module is the SHARED source of truth for the export
+// image: the render sidecar bundles it (renderer/src/entry.ts) and rasterizes on
+// skia-canvas, while this ui project keeps the pure parts unit-tested (the browser app
+// itself no longer imports it — delivery is the server's signed URL).
 //
-// buildScoresheet and layoutImage are pure (vitest-covered); renderGameImage is the thin
-// canvas pass exercised by the Playwright e2e.
+// buildScoresheet and layoutImage are pure (vitest-covered); drawGameImage is the thin
+// canvas pass exercised by the sidecar's node test.
 
 import type { GameView, MoveRecord, Variant } from './model';
 import { replay } from './board';
@@ -56,16 +56,22 @@ export interface Scoresheet {
 }
 
 /** formatFinishedDate renders the game's finish time for the footer in the DEVICE locale
- *  (regional date conventions, not the UI language) — e.g. "3 июля 2026 г., 16:23".
- *  dateLocale is for tests; production passes undefined = the system default. */
-export function formatFinishedDate(unixSec: number, dateLocale?: string): string {
-  return new Intl.DateTimeFormat(dateLocale, {
+ *  and time zone (regional conventions, not the UI language) — e.g. "3 июля 2026 г., 16:23".
+ *  Both ride in from the client on a server render; an invalid zone falls back to the
+ *  process default rather than failing the whole image. */
+export function formatFinishedDate(unixSec: number, dateLocale?: string, timeZone?: string): string {
+  const opts: Intl.DateTimeFormatOptions = {
     year: 'numeric',
     month: 'long',
     day: 'numeric',
     hour: '2-digit',
     minute: '2-digit',
-  }).format(new Date(unixSec * 1000));
+  };
+  try {
+    return new Intl.DateTimeFormat(dateLocale, { ...opts, timeZone }).format(new Date(unixSec * 1000));
+  } catch {
+    return new Intl.DateTimeFormat(dateLocale, opts).format(new Date(unixSec * 1000));
+  }
 }
 
 /**
@@ -78,7 +84,7 @@ export function buildScoresheet(
   game: GameView,
   moves: MoveRecord[],
   actionLabel: (action: string) => string,
-  opts?: { hostname?: string; dateLocale?: string },
+  opts?: { hostname?: string; dateLocale?: string; timeZone?: string },
 ): Scoresheet {
   const seats = game.seats;
   const grid = historyGrid(moves, seats.length, null);
@@ -106,7 +112,7 @@ export function buildScoresheet(
     rows,
     adjustments,
     hasAdjustments: adjustments.some((a) => a !== 0),
-    footer: `${host} · ${formatFinishedDate(game.lastActivityUnix, opts?.dateLocale)}`,
+    footer: `${host} · ${formatFinishedDate(game.lastActivityUnix, opts?.dateLocale, opts?.timeZone)}`,
   };
 }
 
@@ -190,27 +196,36 @@ export interface RenderOptions {
   hostname?: string;
   /** Footer date locale override (defaults to the device locale) — for tests. */
   dateLocale?: string;
+  /** Footer IANA time zone (the device zone on a server render; defaults to local). */
+  timeZone?: string;
   /** Canvas pixel scale (default 2 — crisp on hi-dpi screens and in chats). */
   scale?: number;
 }
 
+/** CanvasLike is the minimal canvas surface drawGameImage needs — satisfied by both the
+ *  browser HTMLCanvasElement and the render sidecar's skia-canvas Canvas, so the drawing
+ *  code is shared verbatim between the two runtimes. */
+export interface CanvasLike {
+  width: number;
+  height: number;
+  getContext(contextId: '2d'): CanvasRenderingContext2D | null;
+}
+
 /**
- * renderGameImage draws the finished game as a PNG blob: final board with classic axes on
- * the left, the scoresheet on the right, the site + finish date at the bottom. Light theme
- * always; no last-move highlight (an archival artifact, not a live frame).
+ * drawGameImage sizes the canvas and draws the finished game onto it: final board with
+ * classic axes on the left, the scoresheet on the right, the site + finish date at the
+ * bottom. Light theme always; no last-move highlight (an archival artifact, not a live
+ * frame). The caller owns the canvas and its PNG encoding (toBlob in the browser,
+ * toBuffer in the sidecar).
  */
-export async function renderGameImage(
-  game: GameView,
-  moves: MoveRecord[],
-  opts: RenderOptions,
-): Promise<Blob> {
+export function drawGameImage(canvas: CanvasLike, game: GameView, moves: MoveRecord[], opts: RenderOptions): void {
   const sheet = buildScoresheet(game, moves, opts.actionLabel, {
     hostname: opts.hostname,
     dateLocale: opts.dateLocale,
+    timeZone: opts.timeZone,
   });
   const layout = layoutImage(sheet);
   const scale = opts.scale ?? 2;
-  const canvas = document.createElement('canvas');
   canvas.width = Math.round(layout.w * scale);
   canvas.height = Math.round(layout.h * scale);
   const ctx = canvas.getContext('2d');
@@ -228,12 +243,9 @@ export async function renderGameImage(
   ctx.textAlign = 'left';
   ctx.textBaseline = 'alphabetic';
   ctx.fillText(sheet.footer, layout.margin, layout.h - layout.margin - 6);
-
-  return new Promise<Blob>((resolve, reject) => {
-    canvas.toBlob((b) => (b ? resolve(b) : reject(new Error('gameimage: toBlob failed'))), 'image/png');
-  });
 }
 
+
 function drawAxes(ctx: CanvasRenderingContext2D, l: ImageLayout): void {
   const { x, y, cell } = l.board;
   ctx.fillStyle = C.muted;