pandorga 2.3.16 → 2.3.17

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a40b75762591bdeac34570da02abe59b95e228f96dc1c5452705a4bf3cbd29e9
-  data.tar.gz: 3455162a8d38311c091c54acc2546075e83259bf6c9945977f91f25834d5f4d4
+  metadata.gz: 9f15a65d09189b3c4d7f02ea2afc30c0ae3041d3fbb1b40885943144d5bd393f
+  data.tar.gz: 15e42b4a696dea56e0abe802aab7b405b2d1646d6a14297609cb3402a8a126fb
 SHA512:
-  metadata.gz: 9c5b2e3caaac639e87e1c6347991138ccbd6975a7a505f99dc0285056eeedd2216abc87d5a7b2934a6ba51f82c5fd44d2772875631c65a0ce7e5f87ded03dd1b
-  data.tar.gz: aab5ae86c928198b31698dd99119dd6f1dba4efa36e4b8080460ce8f244bab5b09da56db5433d1c2bcd2c9afdc9a6947973b58ce3f0aadcda61764e77a356993
+  metadata.gz: e54b8886340a040ed93994272492147cf93f161900a70636ec88e80fd7597ab710a023a5869e9c28756747a5cac32e36e2991c39d9bed5c2f712d59a587553ae
+  data.tar.gz: 024aeeb0fd4aa20ae4a1e927347bbd2535bf813e623e467cd886559b304ec4859d46750ee722f5022b07c3343c96c0e25559fd1c1245bb45ae711ba32785620a

data/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 2.3.17
+
+- CR-24 overlay: strength (`::after`) now paints **true black** `rgba(0,0,0,…)` so it darkens photo areas monotonically (2.3.16 charcoal shade brightened dark regions and made strength effectively dead / slightly inverted) (PLT-AC-103).
+- Stronger linear strength scale (peak ≈ 0.55 × strength, `--home-hero-strength-cap: 0.55`); pool mid-ramp slightly raised for perceptible 0.05–0.1 steps; pool stays charcoal (PLT-AC-102/103).
+- Rendered monotonicity gate at 390/1440: face/upper brightness falls across strength 0.2/0.4/0.6/0.8; text band across pool; independence; 0% pure-black behind text (`test-home-hero-overlay-monotonic`).
+
 ## 2.3.16
 
 - CR-24 overlay split: `strength` (`--home-hero-vignette`) darkens the photo area via `::after` (masked off the text band); `pool` (`--home-hero-pool`) is an **absolute** text-band alpha on `::before` (not scaled by strength) (PLT-AC-102).

data/assets/css/ledger/home.css

@@ -1859,24 +1859,25 @@ html[data-theme="light"] .home-featured .ledger-poster {
 }
 
 /* ═══════════════════════════════════════════════════════════════════════════
-   CR-22…22.4 — Home hero B3 + C4 (PLT-AC-81…94) + overlay strength/pool (PLT-AC-100…102)
+   CR-22…22.4 — Home hero B3 + C4 (PLT-AC-81…94) + overlay strength/pool (PLT-AC-100…103)
    Photo as hero background + 50/50 masthead with Projects from 1024px.
    Config (pandorga.home.hero_overlay):
      strength | vignette → --home-hero-vignette (0–1): photo-area darkness
-       (radial, left falloff, upper vertical). Linear in [0,1]; at 1.0 every
-       photo-area stop is capped ≤ --home-hero-strength-cap (~0.42) so the
-       figure stays recognizable.
-     pool → --home-hero-pool (0–1): absolute black alpha of the text band
-       (lower vertical stops / stacked copy band). Not a multiplier.
-   Every alpha is min(cap, …); caps < 1; shade is charcoal (not #000) so composites never hit pure-black RGB.
+       via ::after as true black rgba(0,0,0,…). Linear in [0,1]; peak stop
+       ≈ strength × 0.55, capped by --home-hero-strength-cap (~0.55). Charcoal
+       must NOT be used here — it brightens dark photo regions (2.3.16 bug).
+     pool → --home-hero-pool (0–1): absolute text-band alpha on ::before
+       (charcoal --home-hero-shade). Not scaled by strength.
+   Caps < 1; pool shade keeps text-band composites off pure-black RGB.
    ═══════════════════════════════════════════════════════════════════════════ */
 
 :root {
   --home-hero-vignette: 0.60;
   --home-hero-pool: 0.70;
-  --home-hero-strength-cap: 0.42;
+  /* Strength peak alpha at vignette=1.0; <1 so overlay never paints opaque black. */
+  --home-hero-strength-cap: 0.55;
   --home-hero-pool-cap: 0.90;
-  /* Deep charcoal (not #000): even over black clothing, composites stay RGB sum ≥ 3. */
+  /* Pool charcoal (not #000): text-band composites stay RGB sum ≥ 3 over black clothing. */
   --home-hero-shade: 18, 20, 26;
   --home-masthead-gutter: clamp(1.25rem, 2.2vw, 2rem);
 }
@@ -1891,9 +1892,9 @@ html[data-theme="light"] .home-featured .ledger-poster {
   object-position: center;
 }
 
-/* Soft edgeless photo overlay (C4 / PLT-AC-89 / PLT-AC-100…102).
+/* Soft edgeless photo overlay (C4 / PLT-AC-89 / PLT-AC-100…103).
    ::after = strength (photo area). ::before = pool (text-band absolute alpha).
-   Independent; every stop min(cap, …); charcoal shade + caps < 1 → no pure-black pixels from the overlay. */
+   Independent; strength = true black; pool = charcoal; caps < 1 → no pure-black from the overlay behind text. */
 .home-hero-portrait::before,
 .home-hero-portrait::after {
   content: "";
@@ -1904,45 +1905,46 @@ html[data-theme="light"] .home-featured .ledger-poster {
   border-radius: 0;
 }
 
-/* Text band: absolute pool alpha only (not scaled by strength).
-   Ramp starts high enough that title + summary sit fully in the opaque band. */
+/* Text band: absolute pool alpha (charcoal); not scaled by strength.
+   Ramp covers title + summary; alpha tracks pool ~linearly for perceptible steps. */
 .home-hero-portrait::before {
   background: linear-gradient(
     180deg,
     transparent 34%,
-    rgba(var(--home-hero-shade), min(var(--home-hero-pool-cap), calc(var(--home-hero-pool) * 0.45))) 46%,
-    rgba(var(--home-hero-shade), min(var(--home-hero-pool-cap), calc(var(--home-hero-pool) * 0.78))) 56%,
+    rgba(var(--home-hero-shade), min(var(--home-hero-pool-cap), calc(var(--home-hero-pool) * 0.50))) 46%,
+    rgba(var(--home-hero-shade), min(var(--home-hero-pool-cap), calc(var(--home-hero-pool) * 0.82))) 56%,
     rgba(var(--home-hero-shade), min(var(--home-hero-pool-cap), var(--home-hero-pool))) 66%,
     rgba(var(--home-hero-shade), min(var(--home-hero-pool-cap), var(--home-hero-pool))) 100%
   );
 }
 
-/* Photo area: strength only; masked off the text band so pool stays independent. */
+/* Photo area: strength only (true black — charcoal brightened dark photos in 2.3.16).
+   Masked off the text band so pool stays independent. Peak ≈ 0.55 × strength. */
 .home-hero-portrait::after {
-  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 32%, transparent 46%);
-  mask-image: linear-gradient(180deg, #000 0%, #000 32%, transparent 46%);
+  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 36%, transparent 50%);
+  mask-image: linear-gradient(180deg, #000 0%, #000 36%, transparent 50%);
   background:
     radial-gradient(
-      ellipse 80% 50% at 55% 26%,
-      rgba(var(--home-hero-shade), min(var(--home-hero-strength-cap), calc(0.05 * var(--home-hero-vignette)))) 0%,
-      rgba(var(--home-hero-shade), min(var(--home-hero-strength-cap), calc(0.16 * var(--home-hero-vignette)))) 50%,
-      rgba(var(--home-hero-shade), min(var(--home-hero-strength-cap), calc(0.28 * var(--home-hero-vignette)))) 78%,
+      ellipse 85% 55% at 52% 28%,
+      rgba(0, 0, 0, min(var(--home-hero-strength-cap), calc(0.22 * var(--home-hero-vignette)))) 0%,
+      rgba(0, 0, 0, min(var(--home-hero-strength-cap), calc(0.40 * var(--home-hero-vignette)))) 45%,
+      rgba(0, 0, 0, min(var(--home-hero-strength-cap), calc(0.55 * var(--home-hero-vignette)))) 78%,
       transparent 100%
     ),
     linear-gradient(
       90deg,
-      rgba(var(--home-hero-shade), min(var(--home-hero-strength-cap), calc(0.30 * var(--home-hero-vignette)))) 0%,
-      rgba(var(--home-hero-shade), min(var(--home-hero-strength-cap), calc(0.22 * var(--home-hero-vignette)))) 14%,
-      rgba(var(--home-hero-shade), min(var(--home-hero-strength-cap), calc(0.12 * var(--home-hero-vignette)))) 34%,
-      rgba(var(--home-hero-shade), min(var(--home-hero-strength-cap), calc(0.04 * var(--home-hero-vignette)))) 52%,
-      transparent 70%
+      rgba(0, 0, 0, min(var(--home-hero-strength-cap), calc(0.50 * var(--home-hero-vignette)))) 0%,
+      rgba(0, 0, 0, min(var(--home-hero-strength-cap), calc(0.38 * var(--home-hero-vignette)))) 16%,
+      rgba(0, 0, 0, min(var(--home-hero-strength-cap), calc(0.22 * var(--home-hero-vignette)))) 36%,
+      rgba(0, 0, 0, min(var(--home-hero-strength-cap), calc(0.08 * var(--home-hero-vignette)))) 55%,
+      transparent 72%
     ),
     linear-gradient(
       180deg,
-      rgba(var(--home-hero-shade), min(var(--home-hero-strength-cap), calc(0.16 * var(--home-hero-vignette)))) 0%,
-      rgba(var(--home-hero-shade), min(var(--home-hero-strength-cap), calc(0.07 * var(--home-hero-vignette)))) 12%,
-      rgba(var(--home-hero-shade), min(var(--home-hero-strength-cap), calc(0.08 * var(--home-hero-vignette)))) 24%,
-      transparent 48%
+      rgba(0, 0, 0, min(var(--home-hero-strength-cap), calc(0.32 * var(--home-hero-vignette)))) 0%,
+      rgba(0, 0, 0, min(var(--home-hero-strength-cap), calc(0.18 * var(--home-hero-vignette)))) 14%,
+      rgba(0, 0, 0, min(var(--home-hero-strength-cap), calc(0.20 * var(--home-hero-vignette)))) 28%,
+      transparent 52%
     );
 }
 
@@ -2031,13 +2033,13 @@ html[data-theme="light"] .home-featured .ledger-poster {
     filter: saturate(0.95) contrast(1.06) brightness(0.98);
   }
 
-  /* PLT-AC-100…102: stack — ::after strength (upper); ::before pool (copy band) */
+  /* PLT-AC-100…103: stack — ::after strength (upper); ::before pool (copy band) */
   .home-hero-portrait::before {
     background: linear-gradient(
       180deg,
       transparent 22%,
-      rgba(var(--home-hero-shade), min(var(--home-hero-pool-cap), calc(var(--home-hero-pool) * 0.45))) 34%,
-      rgba(var(--home-hero-shade), min(var(--home-hero-pool-cap), calc(var(--home-hero-pool) * 0.78))) 46%,
+      rgba(var(--home-hero-shade), min(var(--home-hero-pool-cap), calc(var(--home-hero-pool) * 0.50))) 34%,
+      rgba(var(--home-hero-shade), min(var(--home-hero-pool-cap), calc(var(--home-hero-pool) * 0.82))) 46%,
       rgba(var(--home-hero-shade), min(var(--home-hero-pool-cap), var(--home-hero-pool))) 56%,
       rgba(var(--home-hero-shade), min(var(--home-hero-pool-cap), var(--home-hero-pool))) 78%,
       rgba(var(--home-hero-shade), min(var(--home-hero-pool-cap), calc(var(--home-hero-pool) * 0.92))) 100%
@@ -2045,22 +2047,22 @@ html[data-theme="light"] .home-featured .ledger-poster {
   }
   .home-hero-portrait::after {
     border-radius: 0;
-    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 28%, transparent 40%);
-    mask-image: linear-gradient(180deg, #000 0%, #000 28%, transparent 40%);
+    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 44%);
+    mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 44%);
     background:
       radial-gradient(
-        ellipse 90% 42% at 50% 12%,
-        rgba(var(--home-hero-shade), min(var(--home-hero-strength-cap), calc(0.06 * var(--home-hero-vignette)))) 0%,
-        rgba(var(--home-hero-shade), min(var(--home-hero-strength-cap), calc(0.18 * var(--home-hero-vignette)))) 55%,
-        rgba(var(--home-hero-shade), min(var(--home-hero-strength-cap), calc(0.28 * var(--home-hero-vignette)))) 80%,
+        ellipse 92% 48% at 50% 14%,
+        rgba(0, 0, 0, min(var(--home-hero-strength-cap), calc(0.20 * var(--home-hero-vignette)))) 0%,
+        rgba(0, 0, 0, min(var(--home-hero-strength-cap), calc(0.38 * var(--home-hero-vignette)))) 50%,
+        rgba(0, 0, 0, min(var(--home-hero-strength-cap), calc(0.55 * var(--home-hero-vignette)))) 80%,
         transparent 100%
       ),
       linear-gradient(
         180deg,
-        rgba(var(--home-hero-shade), min(var(--home-hero-strength-cap), calc(0.14 * var(--home-hero-vignette)))) 0%,
-        rgba(var(--home-hero-shade), min(var(--home-hero-strength-cap), calc(0.10 * var(--home-hero-vignette)))) 8%,
-        rgba(var(--home-hero-shade), min(var(--home-hero-strength-cap), calc(0.16 * var(--home-hero-vignette)))) 18%,
-        transparent 34%
+        rgba(0, 0, 0, min(var(--home-hero-strength-cap), calc(0.30 * var(--home-hero-vignette)))) 0%,
+        rgba(0, 0, 0, min(var(--home-hero-strength-cap), calc(0.22 * var(--home-hero-vignette)))) 10%,
+        rgba(0, 0, 0, min(var(--home-hero-strength-cap), calc(0.28 * var(--home-hero-vignette)))) 22%,
+        transparent 40%
       );
   }
 

data/lib/pandorga/commands/new.rb

@@ -24,7 +24,7 @@ module Pandorga
 
         gem "pandorga", "~> 2.0"
         # Local checkout: gem "pandorga", path: "../pandorga"
-        # GitHub tag: gem "pandorga", github: "alexandrelheinen/pandorga", tag: "v2.3.16"
+        # GitHub tag: gem "pandorga", github: "alexandrelheinen/pandorga", tag: "v2.3.17"
         gem "csv"
         gem "base64"
       RUBY

data/lib/pandorga/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Pandorga
-  VERSION = "2.3.16"
+  VERSION = "2.3.17"
 end

data/scripts/test/test-home-hero-overlay-monotonic.mjs

@@ -0,0 +1,444 @@
+#!/usr/bin/env node
+// PLT-AC-103 — rendered monotonicity of strength (upper/face) and pool (text band)
+// at 390 and 1440. Fixture uses a bright mid-tone "photo" so strength darkening
+// is measurable (dark-wall regions hid the 2.3.16 charcoal inversion).
+
+import { spawn } from 'node:child_process';
+import { existsSync } from 'node:fs';
+import { mkdtemp, writeFile, readFile, rm, mkdir } from 'node:fs/promises';
+import { createServer as createNetServer } from 'node:net';
+import { createServer as createHttpServer } from 'node:http';
+import { tmpdir } from 'node:os';
+import { join, resolve } from 'node:path';
+import { setTimeout as delay } from 'node:timers/promises';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+const ROOT = resolve(__dirname, '../..');
+const HOME_CSS = join(ROOT, 'assets/css/ledger/home.css');
+
+const STRENGTH_STEPS = [0.2, 0.4, 0.6, 0.8];
+const POOL_STEPS = [0.2, 0.4, 0.6, 0.8];
+// Minimum mean-RGB drop per 0.2 step on the bright face region / text band.
+const MIN_DELTA_STRENGTH = 4.0;
+const MIN_DELTA_POOL = 4.0;
+const VIEWPORTS = [
+  { name: '390', width: 390, height: 844, mobile: true },
+  { name: '1440', width: 1440, height: 900, mobile: false }
+];
+
+function freePort() {
+  return new Promise((resolveP, reject) => {
+    const server = createNetServer();
+    server.once('error', reject);
+    server.listen(0, '127.0.0.1', () => {
+      const { port } = server.address();
+      server.close(() => resolveP(port));
+    });
+  });
+}
+
+function findChrome() {
+  const candidates = [
+    process.env.CHROME_PATH,
+    '/usr/bin/google-chrome-stable',
+    '/usr/bin/google-chrome',
+    '/usr/bin/chromium',
+    '/usr/bin/chromium-browser'
+  ].filter(Boolean);
+  for (const c of candidates) {
+    if (c && existsSync(c)) return c;
+  }
+  return 'google-chrome';
+}
+
+class Cdp {
+  constructor(ws) {
+    this.ws = ws;
+    this.next = 1;
+    this.pending = new Map();
+    ws.addEventListener('message', (event) => {
+      const message = JSON.parse(event.data);
+      if (message.id && this.pending.has(message.id)) {
+        const { resolve: res, reject: rej } = this.pending.get(message.id);
+        this.pending.delete(message.id);
+        if (message.error) rej(new Error(message.error.message || JSON.stringify(message.error)));
+        else res(message.result || {});
+      }
+    });
+  }
+  send(method, params = {}, sessionId) {
+    const id = this.next++;
+    const payload = { id, method, params };
+    if (sessionId) payload.sessionId = sessionId;
+    this.ws.send(JSON.stringify(payload));
+    return new Promise((res, rej) => this.pending.set(id, { resolve: res, reject: rej }));
+  }
+}
+
+async function openSocket(url) {
+  const ws = new WebSocket(url);
+  await new Promise((resolveP, reject) => {
+    ws.addEventListener('open', resolveP, { once: true });
+    ws.addEventListener('error', () => reject(new Error('DevTools socket failed')), { once: true });
+  });
+  return ws;
+}
+
+async function waitForDevtools(port, chrome) {
+  let stderr = '';
+  if (chrome.stderr) chrome.stderr.on('data', (c) => { stderr += c; });
+  for (let i = 0; i < 100; i++) {
+    if (chrome.exitCode !== null) throw new Error(`Chrome exited ${chrome.exitCode}: ${stderr.slice(-500)}`);
+    try {
+      const response = await fetch(`http://127.0.0.1:${port}/json/version`);
+      if (response.ok) return response.json();
+    } catch (_e) { /* starting */ }
+    await delay(100);
+  }
+  throw new Error(`Chrome DevTools did not answer on ${port}`);
+}
+
+function extractOverlayCss(fullCss) {
+  const rootIdx = fullCss.indexOf('--home-hero-vignette:');
+  if (rootIdx < 0) throw new Error('missing --home-hero-vignette');
+  const rootStart = fullCss.lastIndexOf(':root {', rootIdx);
+  const rootEnd = fullCss.indexOf('}', rootIdx) + 1;
+  const rootBlock = fullCss.slice(rootStart, rootEnd);
+
+  const soft = fullCss.indexOf('/* Soft edgeless photo overlay');
+  if (soft < 0) throw new Error('missing Soft edgeless overlay block');
+  // Desk shared + ::before + ::after end at the blank line before stacked media
+  const stacked = fullCss.indexOf('/* ── Stacked / full-bleed', soft);
+  if (stacked < 0) throw new Error('missing stacked media marker');
+  const deskBlock = fullCss.slice(soft, stacked);
+
+  const stackMarker = fullCss.indexOf('PLT-AC-100…103: stack');
+  if (stackMarker < 0) throw new Error('missing stack overlay marker');
+  // Take from the stack comment through the end of the nested ::after rule
+  const afterStack = fullCss.indexOf('.home-hero-portrait::after {', stackMarker);
+  let depth = 0;
+  let i = fullCss.indexOf('{', afterStack);
+  for (; i < fullCss.length; i++) {
+    if (fullCss[i] === '{') depth++;
+    else if (fullCss[i] === '}') {
+      depth--;
+      if (depth === 0) { i++; break; }
+    }
+  }
+  const stackRules = fullCss.slice(stackMarker, i);
+  const stackMedia = `@media (max-width: 1023px) {
+  ${stackRules}
+}
+`;
+
+  return `${rootBlock}
+${deskBlock}
+${stackMedia}
+`;
+}
+
+function buildFixtureHtml(overlayCss) {
+  // Bright face/shirt-like mid-tone (#d4b896) so black overlays darken measurably.
+  // Vertical gradient: brighter upper (face), slightly darker lower (so pool still measurable).
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1"/>
+<style>
+html, body { margin: 0; padding: 0; background: #111; }
+.home-hero-portrait {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background:
+    radial-gradient(ellipse 55% 45% at 48% 32%, #e8c9a8 0%, #d4b896 40%, #b8956e 70%, #6a5a48 100%),
+    linear-gradient(180deg, #c4a882 0%, #a88860 55%, #5a4a3a 100%);
+}
+${overlayCss}
+</style>
+</head>
+<body>
+  <div class="home-hero-portrait" id="hero"></div>
+</body>
+</html>`;
+}
+
+async function readPngRgba(pngPath) {
+  // Minimal PNG decoder (8-bit RGB/RGBA, non-interlaced) using node:zlib.
+  const { inflateSync } = await import('node:zlib');
+  const buf = await readFile(pngPath);
+  if (buf.toString('ascii', 1, 4) !== 'PNG') throw new Error('not PNG');
+  let pos = 8;
+  let width = 0, height = 0, colorType = 2, bits = 8;
+  const idat = [];
+  while (pos < buf.length) {
+    const len = buf.readUInt32BE(pos); pos += 4;
+    const type = buf.toString('ascii', pos, pos + 4); pos += 4;
+    const data = buf.subarray(pos, pos + len); pos += len;
+    pos += 4; // crc
+    if (type === 'IHDR') {
+      width = data.readUInt32BE(0);
+      height = data.readUInt32BE(4);
+      bits = data[8];
+      colorType = data[9];
+    } else if (type === 'IDAT') {
+      idat.push(data);
+    } else if (type === 'IEND') break;
+  }
+  if (bits !== 8 || (colorType !== 2 && colorType !== 6)) {
+    throw new Error(`unsupported PNG ct=${colorType} bits=${bits}`);
+  }
+  const bpp = colorType === 6 ? 4 : 3;
+  const raw = inflateSync(Buffer.concat(idat));
+  const stride = width * bpp;
+  const rgba = Buffer.alloc(width * height * 4);
+  let src = 0;
+  for (let y = 0; y < height; y++) {
+    const filter = raw[src++];
+    const row = raw.subarray(src, src + stride);
+    src += stride;
+    const out = rgba.subarray(y * width * 4, (y + 1) * width * 4);
+    // Paeth/Sub/Up/Average/None — Chrome uses filter 0 or 1 typically; handle 0–4.
+    const prev = y > 0 ? rgba.subarray((y - 1) * width * 4, y * width * 4) : null;
+    for (let i = 0; i < width; i++) {
+      let r = row[i * bpp], g = row[i * bpp + 1], b = row[i * bpp + 2];
+      const a = bpp === 4 ? row[i * bpp + 3] : 255;
+      const left = i > 0 ? [out[(i - 1) * 4], out[(i - 1) * 4 + 1], out[(i - 1) * 4 + 2]] : [0, 0, 0];
+      const up = prev ? [prev[i * 4], prev[i * 4 + 1], prev[i * 4 + 2]] : [0, 0, 0];
+      const apply = (chan, li, ui) => {
+        if (filter === 0) return chan;
+        if (filter === 1) return (chan + li) & 255;
+        if (filter === 2) return (chan + ui) & 255;
+        if (filter === 3) return (chan + ((li + ui) >> 1)) & 255;
+        if (filter === 4) {
+          const p = li + ui - (prev && i > 0 ? prev[(i - 1) * 4 + (li === left[0] ? 0 : li === left[1] ? 1 : 2)] : 0);
+          // Proper Paeth for each channel below
+          return chan; // placeholder replaced
+        }
+        return chan;
+      };
+      if (filter === 0) {
+        // none
+      } else if (filter === 1) {
+        r = (r + left[0]) & 255; g = (g + left[1]) & 255; b = (b + left[2]) & 255;
+      } else if (filter === 2) {
+        r = (r + up[0]) & 255; g = (g + up[1]) & 255; b = (b + up[2]) & 255;
+      } else if (filter === 3) {
+        r = (r + ((left[0] + up[0]) >> 1)) & 255;
+        g = (g + ((left[1] + up[1]) >> 1)) & 255;
+        b = (b + ((left[2] + up[2]) >> 1)) & 255;
+      } else if (filter === 4) {
+        const paeth = (a, b, c) => {
+          const p = a + b - c;
+          const pa = Math.abs(p - a), pb = Math.abs(p - b), pc = Math.abs(p - c);
+          return pa <= pb && pa <= pc ? a : pb <= pc ? b : c;
+        };
+        const ul = prev && i > 0 ? [prev[(i - 1) * 4], prev[(i - 1) * 4 + 1], prev[(i - 1) * 4 + 2]] : [0, 0, 0];
+        r = (r + paeth(left[0], up[0], ul[0])) & 255;
+        g = (g + paeth(left[1], up[1], ul[1])) & 255;
+        b = (b + paeth(left[2], up[2], ul[2])) & 255;
+      } else {
+        throw new Error('unsupported PNG filter ' + filter);
+      }
+      out[i * 4] = r; out[i * 4 + 1] = g; out[i * 4 + 2] = b; out[i * 4 + 3] = a;
+    }
+  }
+  return { width, height, rgba };
+}
+
+function meanBandsFromRgba({ width, height, rgba }, faceY0, faceY1, faceX0, faceX1, textY0, textY1) {
+  const band = (y0, y1, x0 = 0, x1 = 1) => {
+    const ya = Math.floor(height * y0);
+    const yb = Math.max(ya + 1, Math.floor(height * y1));
+    const xa = Math.floor(width * x0);
+    const xb = Math.max(xa + 1, Math.floor(width * x1));
+    let s = 0, n = 0, pb = 0;
+    for (let y = ya; y < yb; y++) {
+      for (let x = xa; x < xb; x++) {
+        const i = (y * width + x) * 4;
+        const r = rgba[i], g = rgba[i + 1], b = rgba[i + 2];
+        s += (r + g + b) / 3;
+        n++;
+        if (r + g + b < 3) pb++;
+      }
+    }
+    return { mean: n ? s / n : 0, pb: n ? (100 * pb) / n : 0 };
+  };
+  const face = band(faceY0, faceY1, faceX0, faceX1);
+  const text = band(textY0, textY1);
+  return { face: face.mean, text: text.mean, pb: text.pb };
+}
+
+async function main() {
+  const fullCss = await readFile(HOME_CSS, 'utf8');
+  const overlayCss = extractOverlayCss(fullCss);
+  const html = buildFixtureHtml(overlayCss);
+
+  const work = await mkdtemp(join(tmpdir(), 'pandorga-mono-'));
+  const htmlPath = join(work, 'index.html');
+  await writeFile(htmlPath, html);
+
+  const httpPort = await freePort();
+  const httpServer = createHttpServer(async (req, res) => {
+    res.writeHead(200, { 'Content-Type': 'text/html' });
+    res.end(html);
+  });
+  await new Promise((r) => httpServer.listen(httpPort, '127.0.0.1', r));
+
+  const chromePath = findChrome();
+  const profile = await mkdtemp(join(tmpdir(), 'pandorga-mono-chrome-'));
+  const dbgPort = await freePort();
+  const chrome = spawn(chromePath, [
+    '--headless=new', '--no-sandbox', '--disable-gpu', '--disable-dev-shm-usage',
+    '--no-first-run', '--remote-allow-origins=*',
+    '--remote-debugging-address=127.0.0.1',
+    `--remote-debugging-port=${dbgPort}`,
+    `--user-data-dir=${profile}`,
+    'about:blank'
+  ], { stdio: ['ignore', 'ignore', 'pipe'] });
+
+  const errors = [];
+  try {
+    const version = await waitForDevtools(dbgPort, chrome);
+    const ws = await openSocket(version.webSocketDebuggerUrl);
+    const browser = new Cdp(ws);
+
+    const { targetId } = await browser.send('Target.createTarget', { url: 'about:blank' });
+    const { sessionId } = await browser.send('Target.attachToTarget', { targetId, flatten: true });
+    await browser.send('Page.enable', {}, sessionId);
+    await browser.send('Runtime.enable', {}, sessionId);
+
+    for (const vp of VIEWPORTS) {
+      await browser.send('Emulation.setDeviceMetricsOverride', {
+        width: vp.width, height: vp.height,
+        deviceScaleFactor: 1, mobile: vp.mobile
+      }, sessionId);
+
+      await browser.send('Page.navigate', { url: `http://127.0.0.1:${httpPort}/` }, sessionId);
+      await delay(400);
+
+      // --- Strength monotonicity (pool fixed mid) ---
+      const strengthFace = [];
+      for (const s of STRENGTH_STEPS) {
+        await browser.send('Runtime.evaluate', {
+          expression: `document.documentElement.style.setProperty('--home-hero-vignette','${s}');document.documentElement.style.setProperty('--home-hero-pool','0.50');`
+        }, sessionId);
+        await delay(120);
+        const shot = await browser.send('Page.captureScreenshot', { format: 'png' }, sessionId);
+        const pngPath = join(work, `s-${vp.name}-${s}.png`);
+        await writeFile(pngPath, Buffer.from(shot.data, 'base64'));
+        // Face/shirt: central-upper bright region (not dark edges)
+        const m = meanBandsFromRgba(await readPngRgba(pngPath), 0.12, 0.38, 0.30, 0.70, 0.62, 0.92);
+        strengthFace.push(m.face);
+        console.log(`strength ${s} @${vp.name}: face=${m.face.toFixed(1)} text=${m.text.toFixed(1)}`);
+      }
+      for (let i = 1; i < strengthFace.length; i++) {
+        const delta = strengthFace[i - 1] - strengthFace[i];
+        if (delta < MIN_DELTA_STRENGTH) {
+          errors.push(`${vp.name}: strength ${STRENGTH_STEPS[i - 1]}→${STRENGTH_STEPS[i]} face brightness drop ${delta.toFixed(2)} < ${MIN_DELTA_STRENGTH} (PLT-AC-103)`);
+        }
+      }
+
+      // --- Pool monotonicity (strength fixed mid) ---
+      const poolText = [];
+      let maxPb = 0;
+      for (const p of POOL_STEPS) {
+        await browser.send('Runtime.evaluate', {
+          expression: `document.documentElement.style.setProperty('--home-hero-vignette','0.50');document.documentElement.style.setProperty('--home-hero-pool','${p}');`
+        }, sessionId);
+        await delay(120);
+        const shot = await browser.send('Page.captureScreenshot', { format: 'png' }, sessionId);
+        const pngPath = join(work, `p-${vp.name}-${p}.png`);
+        await writeFile(pngPath, Buffer.from(shot.data, 'base64'));
+        const m = meanBandsFromRgba(await readPngRgba(pngPath), 0.12, 0.38, 0.30, 0.70, 0.62, 0.92);
+        poolText.push(m.text);
+        maxPb = Math.max(maxPb, m.pb);
+        console.log(`pool ${p} @${vp.name}: face=${m.face.toFixed(1)} text=${m.text.toFixed(1)} pb%=${m.pb.toFixed(2)}`);
+      }
+      for (let i = 1; i < poolText.length; i++) {
+        const delta = poolText[i - 1] - poolText[i];
+        if (delta < MIN_DELTA_POOL) {
+          errors.push(`${vp.name}: pool ${POOL_STEPS[i - 1]}→${POOL_STEPS[i]} text brightness drop ${delta.toFixed(2)} < ${MIN_DELTA_POOL} (PLT-AC-103)`);
+        }
+      }
+      if (maxPb > 0.01) {
+        errors.push(`${vp.name}: pure-black pixels in text band ${maxPb.toFixed(3)}% > 0 (PLT-AC-103)`);
+      }
+
+      // --- Independence: strength change must not move text band much; pool must not move face much ---
+      await browser.send('Runtime.evaluate', {
+        expression: `document.documentElement.style.setProperty('--home-hero-vignette','0.20');document.documentElement.style.setProperty('--home-hero-pool','0.80');`
+      }, sessionId);
+      await delay(120);
+      let shot = await browser.send('Page.captureScreenshot', { format: 'png' }, sessionId);
+      let pngPath = join(work, `ind-a-${vp.name}.png`);
+      await writeFile(pngPath, Buffer.from(shot.data, 'base64'));
+      const a = meanBandsFromRgba(await readPngRgba(pngPath), 0.12, 0.38, 0.30, 0.70, 0.62, 0.92);
+
+      await browser.send('Runtime.evaluate', {
+        expression: `document.documentElement.style.setProperty('--home-hero-vignette','0.80');document.documentElement.style.setProperty('--home-hero-pool','0.80');`
+      }, sessionId);
+      await delay(120);
+      shot = await browser.send('Page.captureScreenshot', { format: 'png' }, sessionId);
+      pngPath = join(work, `ind-b-${vp.name}.png`);
+      await writeFile(pngPath, Buffer.from(shot.data, 'base64'));
+      const b = meanBandsFromRgba(await readPngRgba(pngPath), 0.12, 0.38, 0.30, 0.70, 0.62, 0.92);
+
+      // Strength ↑ should darken face substantially; text band change should be small (mask)
+      if (a.face - b.face < MIN_DELTA_STRENGTH * 2) {
+        errors.push(`${vp.name}: independence strength 0.2→0.8 face drop ${(a.face - b.face).toFixed(2)} too small (PLT-AC-103)`);
+      }
+      if (Math.abs(a.text - b.text) > 6.0) {
+        errors.push(`${vp.name}: independence: strength change moved text band by ${Math.abs(a.text - b.text).toFixed(2)} (>6) (PLT-AC-103)`);
+      }
+
+      await browser.send('Runtime.evaluate', {
+        expression: `document.documentElement.style.setProperty('--home-hero-vignette','0.70');document.documentElement.style.setProperty('--home-hero-pool','0.20');`
+      }, sessionId);
+      await delay(120);
+      shot = await browser.send('Page.captureScreenshot', { format: 'png' }, sessionId);
+      pngPath = join(work, `ind-c-${vp.name}.png`);
+      await writeFile(pngPath, Buffer.from(shot.data, 'base64'));
+      const c = meanBandsFromRgba(await readPngRgba(pngPath), 0.12, 0.38, 0.30, 0.70, 0.62, 0.92);
+
+      await browser.send('Runtime.evaluate', {
+        expression: `document.documentElement.style.setProperty('--home-hero-vignette','0.70');document.documentElement.style.setProperty('--home-hero-pool','0.80');`
+      }, sessionId);
+      await delay(120);
+      shot = await browser.send('Page.captureScreenshot', { format: 'png' }, sessionId);
+      pngPath = join(work, `ind-d-${vp.name}.png`);
+      await writeFile(pngPath, Buffer.from(shot.data, 'base64'));
+      const d = meanBandsFromRgba(await readPngRgba(pngPath), 0.12, 0.38, 0.30, 0.70, 0.62, 0.92);
+
+      if (c.text - d.text < MIN_DELTA_POOL * 2) {
+        errors.push(`${vp.name}: independence pool 0.2→0.8 text drop ${(c.text - d.text).toFixed(2)} too small (PLT-AC-103)`);
+      }
+      if (Math.abs(c.face - d.face) > 6.0) {
+        errors.push(`${vp.name}: independence: pool change moved face by ${Math.abs(c.face - d.face).toFixed(2)} (>6) (PLT-AC-103)`);
+      }
+    }
+
+    ws.close();
+  } finally {
+    chrome.kill('SIGKILL');
+    httpServer.close();
+    await delay(100);
+    await rm(profile, { recursive: true, force: true });
+    await rm(work, { recursive: true, force: true });
+  }
+
+  if (errors.length) {
+    console.error('FAIL test-home-hero-overlay-monotonic (PLT-AC-103):');
+    for (const e of errors) console.error('  - ' + e);
+    process.exit(1);
+  }
+  console.log('PASS test-home-hero-overlay-monotonic (PLT-AC-103)');
+}
+
+main().catch((err) => {
+  console.error(`ERROR: ${err.stack || err}`);
+  process.exit(1);
+});

data/scripts/test/test-home-hero-overlay-monotonic.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+# PLT-AC-103 — rendered monotonicity gate (strength upper/face, pool text band).
+require "pathname"
+require "open3"
+
+ROOT = Pathname.new(__dir__).join("../..").expand_path
+MJS = ROOT.join("scripts/test/test-home-hero-overlay-monotonic.mjs")
+
+unless MJS.file?
+  warn "FAIL test-home-hero-overlay-monotonic: missing #{MJS}"
+  exit 1
+end
+
+stdout, stderr, status = Open3.capture3("node", MJS.to_s, chdir: ROOT.to_s)
+if status.success?
+  puts stdout
+else
+  warn "FAIL test-home-hero-overlay-monotonic:\n#{stdout}\n#{stderr}"
+  exit 1
+end

data/scripts/test/test-home-hero-overlay-split.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
-# PLT-AC-102 — strength/pool independence, caps < 1, charcoal shade, no /0.6 overscale.
+# PLT-AC-102 — strength/pool independence, caps < 1, pool charcoal, strength true-black.
+# PLT-AC-103 (structure half) — strength peak coeff ≥ 0.50; strength-cap ≥ 0.50; no shade on ::after.
 
 require "pathname"
 
@@ -29,10 +30,14 @@ unless cap_p && cap_p.to_f > 0 && cap_p.to_f < 1
   errors << "pool-cap must be in (0,1), got #{cap_p.inspect} (PLT-AC-102)"
 end
 
+# PLT-AC-103: strength-cap high enough for perceptible darkening
+if cap_s && cap_s.to_f < 0.50
+  errors << "strength-cap must be ≥ 0.50 for perceptible strength range, got #{cap_s} (PLT-AC-103)"
+end
+
 # Independence: pool only on ::before backgrounds; vignette only on ::after; mask on ::after.
 pool_before = css.scan(/\.home-hero-portrait::before \{.*?^\}/m)
 vig_after = css.scan(/\.home-hero-portrait::after \{.*?^\}/m)
-# Prefer the rule bodies that actually paint gradients (skip the shared content/inset rule).
 before_paint = pool_before.find { |c| c.include?("linear-gradient") && c.include?("--home-hero-pool") }
 after_paint = vig_after.find { |c| c.include?("linear-gradient") && c.include?("--home-hero-vignette") }
 unless before_paint
@@ -50,11 +55,9 @@ end
 unless css.match?(/\.home-hero-portrait::after[\s\S]*?mask-image:\s*linear-gradient/)
   errors << "::after must mask off the text band (PLT-AC-102)"
 end
-# Stack media also keeps the split (comment marker from home.css)
-unless css.include?("PLT-AC-100…102: stack") && css.include?("var(--home-hero-pool)") && css.include?("var(--home-hero-vignette)")
+unless css.include?("PLT-AC-100…103: stack") && css.include?("var(--home-hero-pool)") && css.include?("var(--home-hero-vignette)")
   errors << "stack overlay marker + pool/strength vars required (PLT-AC-102)"
 end
-# At least two pool ::before paints (desk + stack) and two strength ::after paints
 pool_paints = css.scan(/--home-hero-pool\)/).length
 vig_paints = css.scan(/--home-hero-vignette\)/).length
 if pool_paints < 4
@@ -64,7 +67,6 @@ if vig_paints < 4
   errors << "expected multiple strength stops (desk+stack), got #{vig_paints} (PLT-AC-102)"
 end
 
-# Every stop clamped
 unless css.include?("min(var(--home-hero-strength-cap)")
   errors << "strength stops must use min(strength-cap, …) (PLT-AC-102)"
 end
@@ -72,32 +74,50 @@ unless css.include?("min(var(--home-hero-pool-cap)")
   errors << "pool stops must use min(pool-cap, …) (PLT-AC-102)"
 end
 
-# No historic overscale that pushed alpha > 1
 if css.match?(%r{var\(--home-hero-vignette\)\s*/\s*0\.6})
   errors << "home.css must not use vignette/0.6 overscale (PLT-AC-102)"
 end
 
-# Shade is not pure black RGB(0,0,0)
+# Pool shade is not pure black RGB(0,0,0)
 shade = css[/--home-hero-shade:\s*([^;]+);/, 1].to_s.strip
 parts = shade.split(",").map { |x| x.strip.to_i }
 if parts.length != 3 || parts.all?(&:zero?)
   errors << "--home-hero-shade must be non-zero charcoal RGB, got #{shade.inspect} (PLT-AC-102)"
 end
-unless css.include?("rgba(var(--home-hero-shade)")
-  errors << "overlay stops must paint with rgba(var(--home-hero-shade), …) (PLT-AC-102)"
+unless before_paint&.include?("rgba(var(--home-hero-shade)")
+  errors << "pool ::before stops must paint with rgba(var(--home-hero-shade), …) (PLT-AC-102)"
+end
+
+# PLT-AC-103: strength MUST use true black rgba(0, 0, 0, …) — charcoal brightens dark photos.
+strength_paints = vig_after.select { |c| c.include?("linear-gradient") && c.include?("--home-hero-vignette") }
+strength_paints.each_with_index do |body, i|
+  if body.include?("rgba(var(--home-hero-shade)")
+    errors << "::after strength paint ##{i} must NOT use charcoal shade (brightens dark photos) (PLT-AC-103)"
+  end
+  unless body.match?(/rgba\(\s*0\s*,\s*0\s*,\s*0\s*,/)
+    errors << "::after strength paint ##{i} must use rgba(0, 0, 0, …) (PLT-AC-103)"
+  end
+end
+
+# Peak strength coefficient (largest multiplier of vignette) must be ≥ 0.50
+coeffs = css.scan(/calc\(\s*([\d.]+)\s*\*\s*var\(--home-hero-vignette\)\s*\)/).map { |m| m[0].to_f }
+peak = coeffs.max || 0
+if peak < 0.50
+  errors << "peak strength coefficient must be ≥ 0.50 for perceptible range, got #{peak} (PLT-AC-103)"
 end
 
-# Layout still emits both vars
 home_layout = ROOT.join("_layouts/home.html").read
 unless home_layout.include?("--home-hero-pool:")
   errors << "home.html must emit --home-hero-pool (PLT-AC-102)"
 end
 
-# Docs + schema mention independence / caps
 docs = ROOT.join("docs/features/home-hero-scale-overlay.md").read
 unless docs.include?("PLT-AC-102")
   errors << "docs/features/home-hero-scale-overlay.md must document PLT-AC-102"
 end
+unless docs.include?("PLT-AC-103")
+  errors << "docs/features/home-hero-scale-overlay.md must document PLT-AC-103"
+end
 
 schema = ROOT.join("lib/pandorga/registry/schema.yml").read
 unless schema.include?("strength") && schema.include?("pool")
@@ -105,7 +125,7 @@ unless schema.include?("strength") && schema.include?("pool")
 end
 
 if errors.empty?
-  puts "OK home-hero-overlay-split (PLT-AC-102)"
+  puts "OK home-hero-overlay-split (PLT-AC-102/103 structure)"
 else
   warn "FAIL test-home-hero-overlay-split:\n#{errors.join("\n")}"
   exit 1

data/scripts/validate.sh

@@ -83,6 +83,7 @@ TESTS=(
   scripts/test/test-home-hero-scale.rb
   scripts/test/test-home-hero-overlay-strength.rb
   scripts/test/test-home-hero-overlay-split.rb
+  scripts/test/test-home-hero-overlay-monotonic.rb
   scripts/test/test-detail-action-icons.rb
   scripts/test/test-parallel-content-publish.rb
   scripts/test/test-mobile-density-home-measure.rb

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: pandorga
 version: !ruby/object:Gem::Version
-  version: 2.3.16
+  version: 2.3.17
 platform: ruby
 authors:
 - The Pandorga contributors
@@ -445,6 +445,8 @@ files:
 - scripts/test/test-home-band-art.rb
 - scripts/test/test-home-band-intro.rb
 - scripts/test/test-home-hero-c4.rb
+- scripts/test/test-home-hero-overlay-monotonic.mjs
+- scripts/test/test-home-hero-overlay-monotonic.rb
 - scripts/test/test-home-hero-overlay-split.rb
 - scripts/test/test-home-hero-overlay-strength.rb
 - scripts/test/test-home-hero-scale.rb