@r1z4x/tezgah 1.9.2 → 1.11.0

package/skills/hallmark/references/themes/wayfind.md

@@ -0,0 +1,105 @@
+---
+name: Wayfind
+slug: wayfind
+genre: modern-minimal
+paper: light 95.5 250
+display: mono Chivo Mono
+accent: cool 264
+posture: committed
+keywords: transit, metro, rail, station, wayfinding, departures, timetable, live, map, commute, city, platform, signage, logistics, status, operations, schedule, mobility, travel, trip, journey, itinerary, booking, flights, airport
+material: cool grey paper, blue-black ink, Chivo Mono throughout, square 2px ink borders, ink plates, cobalt for what is live, amber for figures on ink
+photo: natural sat=-12 con=10
+pictured: Station Sequence, Stage hero
+---
+
+# Wayfind
+
+Public signage set as a page: cool grey paper, blue-black ink, every glyph in Chivo Mono (a sober grotesk cut to the fixed cell of a departure board), square 2px ink borders, ink plates that carry a sign, cobalt for what is live and amber for figures. The mono is the board's face and the borders mark the way. It reads in daylight, at a glance, from three metres; it is not a developer tool, not a dark terminal and not a retro departures pastiche.
+
+## Tokens
+
+```css
+:root {
+  --color-paper: oklch(95.5% 0.006 250); --color-paper-2: oklch(91% 0.009 250); --color-paper-3: oklch(99.5% 0.005 250);
+  --color-ink: oklch(16% 0.014 262); --color-ink-2: oklch(29% 0.014 262); --color-muted: oklch(47% 0.016 260);
+  --color-rule: oklch(80% 0.011 250); --color-ink-rule: oklch(34% 0.014 262);
+  --color-accent: oklch(51% 0.22 264); --color-accent-2: oklch(81% 0.16 82); --color-accent-ink: oklch(99.5% 0.003 250); --color-focus: oklch(51% 0.22 264);
+  --font-display: "Chivo Mono", ui-monospace, monospace; --font-body: var(--font-display); --font-outlier: var(--font-body);
+  --radius-card: 0; --radius-pill: 999px; --rule-hair: 1px; --rule-bar: 2px;
+  --shadow-card: 0 24px 40px -24px oklch(8% 0.01 260 / 0.6);
+  --tracking-display: -0.03em; --display-weight: 800;
+}
+```
+
+Three colourways, set once per page and stated in the stamp (`wayfind: platform`).
+
+| Colourway | Paper, ink, rule |
+| --- | --- |
+| `platform` (default) | the block above |
+| `night` | paper `oklch(15% 0.012 262)`, ink `oklch(96% 0.005 250)`, rule `oklch(31% 0.014 262)`, cobalt lifts to `oklch(62% 0.2 264)` |
+| `signal` | paper `oklch(51% 0.22 264)` cobalt, ink white, rule `oklch(75% 0.12 264)`; the cobalt button becomes the ink one |
+
+## Type
+
+- **Display:** Chivo Mono 800, `--tracking-display`, line-height 0.98, sentence case. A mono line runs wide, so `h1` caps at 4.75rem and a head stays short enough to read in one look.
+- **Body:** Chivo Mono 400, line-height 1.55, `tabular-nums` on everything. Mono is the material here (waive 64): the board's face sets the whole page. Three weights: 400, 500 and 800.
+- **Figures:** minutes, platforms and exits in 800, at `--text-display-s` or larger when a figure is the section's reason; amber on ink, ink on paper.
+- **Labels, table heads, pills, buttons:** Chivo Mono 500 a step smaller (buttons 800), sentence case, untracked; the signage reads through the mono and the borders, never through capitals.
+
+## Surfaces
+
+- Rules: `--rule-bar` ink borders on every surface (wells, plates, buttons, the underside of a nav, a table's head rule); row dividers `--rule-hair` in `--color-rule`, or `--color-ink-rule` on ink.
+- Radius 0 everywhere except pills. Depth is borders; `--shadow-card` only under a surface that floats over another.
+- The plate: a square field of ink (or amber under ink text) inside a 2px border, holding one instruction and its figure, the way a sign holds a platform number.
+- Bands: `--color-paper-2`, an `--color-ink` band where figures turn amber, or one cobalt field in the `signal` colours; two bands a page at most.
+- Photographs: the network at eye level: platforms, tiled walls, a train in, stairs up to daylight; people only from behind and moving. Square, inside the 2px ink border; type never sits on the picture, only on a plate inside the frame. Captions name the station or the line. A phone screen built from the product takes a 9:19.5 frame in that border, never a drawn bezel.
+- No texture, no gradient.
+
+## Range
+
+- **A departure board as a Table** on the ink band: destination in 500, the line as a small square in the network's own colour, minutes in 800 amber at title size or larger, a late row as an amber fill under ink text, a 2px paper head rule.
+- **A route as Steps:** the way out as three or four plates in a row, each a 2px bordered square holding one instruction (carriage, stairs, exit) and its figure, joined by a 2px ink rule like a corridor sign.
+- **Status as Rows:** each line or service a full-width row, its swatch, its name in 800, its ends in 400, its state at the right edge; one cobalt live dot on the row that just changed.
+- **A figure as a sign:** one number in 800 at display size inside a bordered plate, its unit beside it, and a station picker of square cells joined edge to edge that changes it.
+
+## Controls
+
+- A cobalt-filled button beside a transparent one with a `--rule-bar` ink border, both square, Chivo Mono 800, sentence case, 48 to 52px.
+- A choice set is square cells sharing 2px borders; the chosen cell fills ink with paper text. Links are ink, underlined, cobalt on hover; inputs are square, 2px ink border on `--color-paper-3`.
+- Cobalt is for what is live (the current stop, a clock, the primary action); amber colours figures only on ink or as a fill under ink text.
+
+## Motion
+
+Departure-board stiff: `--dur-micro` colour changes in `steps(1)`, rows updating in place, no reveal on scroll. A live dot blinks once when a row updates; it never loops.
+
+## Voice
+
+Signage: the platform, the exit, the minute, the carriage. Imperative and short; a head reads in one look.
+
+## Do-nots
+
+- Never a proportional face anywhere, not even for prose.
+- Never amber as a text colour on the paper; it belongs on ink or under ink text.
+- Never a third bright colour, except a network's own line colours as small squares beside their names.
+- Never rounded cards or soft shadows on cards; Wayfind is bordered.
+- Never a drawn platform, train or carriage row standing in for the place; photograph the station, build the screen.
+
+## Build hint
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Chivo+Mono:wght@400;500;800&display=swap" rel="stylesheet">
+```
+
+```css
+body { font-variant-numeric: tabular-nums; }
+h1, h2, h3 { font-weight: 800; line-height: 0.98; }
+h1 { font-size: min(var(--text-display), 4.75rem); }
+small, th, figcaption { font-weight: 500; color: var(--color-muted); }
+.btn { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-md) var(--space-lg); border: var(--rule-bar) solid currentColor; font: 800 var(--text-sm)/1 var(--font-body); color: inherit; transition: background-color var(--dur-micro) steps(1); }
+.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
+.plate { border: var(--rule-bar) solid var(--color-ink); background: var(--color-ink); color: var(--color-paper); }
+.plate .figure { font-weight: 800; color: var(--color-accent-2); }
+.band--ink { background: var(--color-ink); color: var(--color-paper); }
+th { border-bottom: var(--rule-bar) solid currentColor; } td { border-bottom: var(--rule-hair) solid var(--color-rule); }
+::selection { background: var(--color-accent-2); color: var(--color-ink); }
+```

package/skills/hallmark/references/themes/werkstatt.md

@@ -0,0 +1,105 @@
+---
+name: Werkstatt
+slug: werkstatt
+genre: playful
+paper: mid 84 82
+display: geometric-sans Jost
+accent: cool 264
+posture: full-palette
+keywords: school, programme, workshop, maker, course, bootcamp, academy, apply, admissions, tuition, timetable, bauhaus, craft, design education, design school, residency, cohort, prospectus
+material: warm putty ground with a lighter well, near-black ink, Jost 700 capitals and numerals over Karla, square 2px and 3px ink rules that box cells, flat ultramarine, vermilion and yellow primaries
+photo: mono
+pictured: Catalogue, Settled hero
+---
+
+# Werkstatt
+
+A design school's printed prospectus: a warm putty ground, near-black ink, heavy Jost capitals over a plain Karla body, square 2px and 3px ink rules, and three flat primaries, blue, red and yellow, each with one job. Its photographs are black and white records of the shops at work. It reads taught and sure of itself, like a programme pinned to a workshop wall: facts boxed in ruled cells, dates and numbers set as large as heads. It is not a toy-box palette and not a pattern of confetti shapes.
+
+## Tokens
+
+```css
+:root {
+  --color-paper: oklch(84% 0.024 82); --color-paper-2: oklch(79.5% 0.028 80); --color-paper-3: oklch(89.5% 0.018 84);
+  --color-ink: oklch(18% 0.008 60); --color-ink-2: oklch(27% 0.01 60); --color-muted: oklch(39% 0.014 62);
+  --color-rule: oklch(58% 0.022 72);
+  --color-accent: oklch(46% 0.2 264); --color-accent-2: oklch(58% 0.205 33); --color-accent-2-deep: oklch(50% 0.19 31); --color-accent-3: oklch(85% 0.165 92);
+  --color-accent-ink: oklch(96% 0.012 82); --color-focus: oklch(46% 0.2 264);
+  --font-display: "Jost", "Futura", sans-serif; --font-body: "Karla", ui-sans-serif, system-ui, sans-serif;
+  --font-outlier: "JetBrains Mono", ui-monospace, monospace;
+  --radius-card: 0; --radius-pill: 0; --rule-hair: 1px; --rule-bar: 2px; --rule-box: 3px;
+  --shadow-card: none;
+  --tracking-display: -0.005em; --display-weight: 700;
+}
+```
+
+Three colourways, set once per page and stated in the stamp (`werkstatt: putty`).
+
+| Colourway | Ground, ink, primaries |
+| --- | --- |
+| `putty` (default) | the block above |
+| `blackboard` | ground `oklch(17% 0.005 60)`, ink `oklch(90% 0.015 80)`, rule `oklch(38% 0.01 60)`, primaries a step brighter; putty returns as a well colour |
+| `blue` | ground `oklch(50% 0.22 265)`, ink `oklch(93% 0.02 85)`, rule `oklch(64% 0.14 265)`; the yellow does the accent's work |
+
+## Type
+
+- **Display:** Jost 700, uppercase, `--tracking-display`, line-height 1.02, at the shared steps. Capitals are the material: every head is set in them. Numerals and dates take the same face at display size and up, tabular, inside their cell.
+- **Body:** Karla 400, line-height 1.5.
+- **Labels, captions, tags, table heads:** Karla 600 a step smaller, sentence case, untracked, in `--color-muted`. Small figures and prices in Karla with `tabular-nums`; mono only inside code.
+- **Controls:** Karla 600 in capitals, following the display (the case gate 67 allows on an uppercase page), untracked.
+
+## Surfaces
+
+- Rules: `--rule-box` ink lines box and cross a grid, `--rule-bar` ink runs under a nav and over every table, `--rule-hair` in `--color-rule` between rows. No card has a background; a cell is what the rules enclose.
+- Zero radius and zero shadow everywhere.
+- Bands: a `--color-paper-2` band, an `--color-ink` band with paper text in the `blackboard` colours, or one blue field with `--color-accent-ink` text; two bands a page at most. `--color-paper-3` is a well inside a ruled cell, never a band.
+- Photographs: the shops at work, documentary and plain, at bench height or from just above: a bench and its tools, hands at a plane, a press or a wheel, wood, type and clay close enough to read the grain; daylight, nobody facing the lens. Printed black and white (the `photo:` mono) so the primaries stay the only colour; square, in a `--rule-bar` ink border, flush with the cells around them. A shop's primary runs as the flat cell or bar beside or under its picture and carries the caption; it never tints the photograph, and type never sits on one.
+- No texture, and no gradient anywhere.
+
+## Range
+
+- **Figures in boxed cells:** the prompt's real numbers in Jost 700 at display size, each in its own `--rule-box` cell across the twelve columns, the label in Karla beneath; no primary, since a set of one kind takes no colour.
+- **Dates as a ruled schedule:** the deadline and the term set as rows of capitals as large as a section head, the day left, what happens right, a `--rule-bar` over the first row.
+- **The categories as a coded grid:** each shop, track or room in its primary cell, flush with its neighbours, with a black and white photograph or a list of what it covers above the fill.
+- **Forms as a ruled sheet:** fields boxed in a grid of cells like an entry form, the category choice in its primaries, the submit an ink block at the foot.
+
+## Controls
+
+- A transparent `--rule-bar` ink-bordered button beside an ink-filled one, both square; on an ink band the pair inverts: the filled one turns putty with ink type, never a primary, since the primaries code categories.
+- Links carry a 2px ink underline that thickens to 3px on hover; inputs are square with a `--rule-bar` ink border.
+- The primaries are flat fills, never type and never tints. Each codes one category, the same one wherever it appears (a cell, a tag, a band, a nav link), and a set of one kind takes no colour. Blue and red fills take `--color-accent-ink`, the red deepened to `--color-accent-2-deep`; a yellow fill takes ink. Blue also rings focus.
+
+## Motion
+
+Static, like a printed prospectus: a link's underline thickens on hover, and nothing else moves, reveals or loops.
+
+## Voice
+
+Plain school prose: the shop, the week, the tuition, the deadline, each said once and plainly.
+
+## Do-nots
+
+- Never a fourth colour, a tint of a primary, a primary used as type, or a photograph in colour.
+- Never a radius on a container, a button or an image; Werkstatt is square.
+- Never mixed-case display; Jost here is capitals.
+- Never the primaries as confetti or a pattern; each fill means a category.
+
+## Build hint
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Jost:wght@700&family=Karla:wght@400;600&display=swap" rel="stylesheet">
+```
+
+```css
+h1, h2, h3 { font-weight: 700; line-height: 1.02; text-transform: uppercase; }
+small, th, figcaption { font-weight: 600; color: var(--color-muted); }
+.btn { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-md) var(--space-lg); border: var(--rule-bar) solid currentColor; font: 600 var(--text-sm)/1 var(--font-body); text-transform: uppercase; color: inherit; background: transparent; }
+.btn--primary { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
+.band--ink { background: var(--color-ink); color: var(--color-paper); }
+.band--ink .btn--primary { background: var(--color-paper); border-color: var(--color-paper); color: var(--color-ink); }
+.ruled { border-block: var(--rule-box) solid var(--color-ink); }
+.photo { border: var(--rule-bar) solid var(--color-ink); border-radius: 0; }
+table { border-top: var(--rule-bar) solid var(--color-ink); } td { border-bottom: var(--rule-hair) solid var(--color-rule); }
+a { text-decoration-thickness: 2px; } a:hover { text-decoration-thickness: 3px; }
+::selection { background: var(--color-accent-3); color: var(--color-ink); }
+```

package/skills/hallmark/scripts/capture.mjs

@@ -0,0 +1,125 @@
+#!/usr/bin/env node
+// Screenshots of the real product, for the page that sells it (imagery.md § 4).
+//
+//   node capture.mjs <url | file.html> [--out <dir>] [--name <prefix>] [--routes /,/pricing]
+//                    [--sizes desktop,phone] [--full] [--selector "<css>"] [--wait <ms>]
+//                    [--dark] [--scale <1|2>]
+//   node capture.mjs --cdp <port> [--target "<window title>"] [--selector "<css>"] [--out <dir>] [--name <prefix>]
+//
+// --cdp attaches to a desktop app already running with a DevTools port (an Electron app started with
+// --remote-debugging-port=<port>, a WebView2 or CEF app) and captures its window as it is.
+//
+// Opens each route at 1440 x 900 (desktop) and 390 x 844 (phone), waits for fonts and images,
+// and writes PNGs into --out (default ./images/screens). It prints, for each file, its size and a
+// ready <img> for a data-slot. --selector captures one element (a panel, a chart, a dialog) instead
+// of the viewport; --full captures the whole scroll height. It never draws a browser bar or a device
+// frame: the page frames the picture in the theme's material.
+import { mkdirSync, existsSync, writeFileSync } from 'node:fs';
+import { join, dirname, resolve, relative } from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import { createRequire } from 'node:module';
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const argv = process.argv.slice(2);
+const flag = (k, d) => { const i = argv.indexOf(`--${k}`); return i >= 0 && argv[i + 1] && !argv[i + 1].startsWith('--') ? argv[i + 1] : d; };
+const has = (k) => argv.includes(`--${k}`);
+const VALUED = new Set(['--out', '--name', '--routes', '--sizes', '--selector', '--wait', '--scale', '--cdp', '--target']);
+const target = argv.find((a, i) => !a.startsWith('--') && !VALUED.has(argv[i - 1]));
+if (!target && !has('cdp')) {
+  console.error('usage: node capture.mjs <url | file.html> [--out <dir>] [--name <prefix>] [--routes /,/pricing] [--sizes desktop,phone] [--full] [--selector "<css>"] [--wait <ms>] [--dark] [--scale 2]');
+  process.exit(2);
+}
+const out = resolve(flag('out', 'images/screens'));
+const name = flag('name', 'screen').replace(/[^\w.-]+/g, '-').replace(/^\.+/, '') || 'screen';
+const routes = flag('routes', '/').split(',').map((r) => r.trim()).filter(Boolean);
+const sizes = flag('sizes', 'desktop,phone').split(',').map((s) => s.trim());
+const wait = Number(flag('wait', '600'));
+const scale = Number(flag('scale', '2'));
+const selector = flag('selector', '');
+const SIZES = { desktop: [1440, 900, false], laptop: [1280, 800, false], tablet: [834, 1112, true], phone: [390, 844, true] };
+
+let puppeteer = null;
+const roots = [process.env.HALLMARK_PUPPETEER, process.cwd(), HERE].filter(Boolean);
+const globalRoot = async () => { try { const { execSync } = await import('node:child_process'); return dirname(execSync('npm root -g', { encoding: 'utf8', stdio: ['ignore', 'pipe', 'ignore'] }).trim()); } catch { return null; } };
+for (const root of roots) {
+  for (const n of ['puppeteer-core', 'puppeteer']) {
+    try { puppeteer = (await import(pathToFileURL(createRequire(join(root, 'noop.js')).resolve(n)).href)).default; } catch {}
+    if (puppeteer) break;
+  }
+  if (puppeteer) break;
+}
+if (!puppeteer) { const g = await globalRoot(); for (const n of ['puppeteer-core', 'puppeteer']) { if (puppeteer || !g) break; try { puppeteer = (await import(pathToFileURL(createRequire(join(g, 'noop.js')).resolve(n)).href)).default; } catch {} } }
+if (!puppeteer) { console.error('capture.mjs needs puppeteer-core or puppeteer (local, global or HALLMARK_PUPPETEER). Without it, take the screenshots with the harness or the OS (imagery.md § 4).'); process.exit(1); }
+const CHROMES = [process.env.CHROME_PATH, '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome', '/Applications/Chromium.app/Contents/MacOS/Chromium', '/usr/bin/google-chrome', '/usr/bin/google-chrome-stable', '/usr/bin/chromium', '/usr/bin/chromium-browser', '/snap/bin/chromium', 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe', 'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe'];
+const findChrome = () => { const c = CHROMES.find((x) => x && existsSync(x)); if (c) return c; try { const b = typeof puppeteer.executablePath === 'function' ? puppeteer.executablePath() : null; if (typeof b === 'string' && existsSync(b)) return b; } catch {} return null; };
+const chrome = findChrome();
+if (has('cdp')) {
+  const port = Number(flag('cdp', ''));
+  if (!Number.isInteger(port) || port < 1 || port > 65535) { console.error('--cdp takes the app\'s DevTools port, for example --cdp 9222'); process.exit(2); }
+  const want = flag('target', '').toLowerCase();
+  const app = await puppeteer.connect({ browserURL: `http://127.0.0.1:${port}`, defaultViewport: null }).catch((e) => { console.error(`no DevTools endpoint on port ${port}: ${e.message}`); process.exit(1); });
+  let page = null;
+  for (const pg of await app.pages()) { const t = (await pg.title().catch(() => '')).toLowerCase(); if (!want || t.includes(want)) { page = pg; break; } }
+  if (!page) { console.error(`no window${want ? ` titled like "${want}"` : ''} on port ${port}`); await app.disconnect(); process.exit(1); }
+  mkdirSync(out, { recursive: true });
+  const file = join(out, `${name}-app${selector ? '-part' : ''}.png`);
+  const el = selector ? await page.$(selector) : null;
+  if (selector && !el) { console.error(`no element matches ${selector}`); await app.disconnect(); process.exit(1); }
+  await (el || page).screenshot({ path: file });
+  const box = el ? await el.boundingBox() : await page.evaluate(() => ({ width: innerWidth, height: innerHeight }));
+  const dpr = await page.evaluate(() => devicePixelRatio).catch(() => 1);
+  const rel = relative(process.cwd(), file);
+  console.log(`${rel}  ${Math.round(box.width * dpr)} x ${Math.round(box.height * dpr)}  (app window)`);
+  console.log(`  <img src="${rel}" width="${Math.round(box.width * dpr)}" height="${Math.round(box.height * dpr)}" alt="" loading="lazy">`);
+  await app.disconnect();
+  process.exit(0);
+}
+if (!chrome) { console.error('no Chrome or Chromium found; set CHROME_PATH'); process.exit(1); }
+
+const isUrl = /^https?:\/\//i.test(target);
+const urlFor = (route) => {
+  if (!isUrl) return pathToFileURL(resolve(target)).href;
+  const u = new URL(target);
+  if (route === '/') return u.href;
+  const r = new URL(route, u.origin);
+  return r.origin === u.origin ? r.href : null;
+};
+mkdirSync(out, { recursive: true });
+const browser = await puppeteer.launch({ executablePath: chrome, headless: true });
+const made = [];
+try {
+  for (const route of isUrl ? routes : ['/']) {
+    for (const size of sizes) {
+      const [w, h, mobile] = SIZES[size] || SIZES.desktop;
+      const p = await browser.newPage();
+      if (has('dark')) await p.emulateMediaFeatures([{ name: 'prefers-color-scheme', value: 'dark' }]);
+      await p.setViewport({ width: w, height: h, deviceScaleFactor: scale, isMobile: mobile, hasTouch: mobile });
+      const to = urlFor(route);
+      if (!to) { console.log(`skip ${route}: not on ${new URL(target).origin}`); await p.close(); continue; }
+      const res = await p.goto(to, { waitUntil: 'networkidle2', timeout: 45000 }).catch((e) => ({ err: e.message }));
+      if (res && res.err) { console.log(`skip ${route} at ${size}: ${res.err}`); await p.close(); continue; }
+      await p.evaluate(async () => { if (document.fonts) await document.fonts.ready; for (const i of document.querySelectorAll('img[loading="lazy"]')) i.loading = 'eager'; await Promise.race([Promise.all([...document.images].filter((i) => !i.complete).map((i) => new Promise((r) => { i.onload = i.onerror = r; }))), new Promise((r) => setTimeout(r, 6000))]); }).catch(() => {});
+      await new Promise((r) => setTimeout(r, wait));
+      await p.bringToFront();
+      const slug = route === '/' ? 'home' : route.replace(/^\/|\/$/g, '').replace(/[^\w-]+/g, '-');
+      const file = join(out, `${name}-${slug}-${size}${selector ? '-part' : ''}.png`);
+      let shot;
+      if (selector) {
+        const el = await p.$(selector);
+        if (!el) { console.log(`skip ${route} at ${size}: no element matches ${selector}`); await p.close(); continue; }
+        shot = await el.screenshot({ path: file });
+      } else shot = await p.screenshot({ path: file, fullPage: has('full') });
+      const dims = await p.evaluate((full) => [innerWidth, full ? document.documentElement.scrollHeight : innerHeight], has('full'));
+      const box = selector ? await (await p.$(selector)).boundingBox() : { width: dims[0], height: dims[1] };
+      made.push({ file, w: Math.round(box.width * scale), h: Math.round(box.height * scale), route, size });
+      await p.close();
+    }
+  }
+} finally { await browser.close(); }
+for (const m of made) {
+  const rel = relative(process.cwd(), m.file);
+  console.log(`${rel}  ${m.w} x ${m.h}  (${m.route}, ${m.size})`);
+  console.log(`  <img src="${rel}" width="${m.w}" height="${m.h}" alt="" loading="lazy">`);
+}
+if (!made.length) process.exitCode = 1;
+else console.log(`\n${made.length} screenshot${made.length > 1 ? 's' : ''}. Look at each one before placing it: sample data only, nothing personal (names, emails, tokens), the screen in the state that tells the page's story.`);