@bongos/core 1.19.403 → 1.19.404

package/tests/landing_page.mjs

@@ -19,10 +19,13 @@
 //     is an accessibility constraint nobody sees fail; it holds through a
 //     cross-FILE dependency (world.css carries ONE universal switch rather than
 //     every page repeating it), which is the right shape but an invisible one;
-//   * the live-data contract — every figure and row on the page is baked real
-//     and then refreshed from five public feeds, with third-party strings in
-//     the payload; the no-JS state, the XSS discipline and the definitions of
-//     the figures are all invisible to a passing render.
+//   * the live-data contract — the ledger line, meter and rows are baked real
+//     and then refreshed from three public feeds, with third-party strings in
+//     the payload; the no-JS state, the XSS discipline and the definition of
+//     the ledger line are all invisible to a passing render;
+//   * the owner's review of the hero (task 1003333) — no figure or leader line
+//     on the landing, the doors below the blob's centre, the big plates on
+//     their own slow drifts: a regression here looks like a design choice.
 //
 // Deliberately NOT asserted here: that GET / returns the page (tests/platform_boot.mjs
 // owns that), and nothing about geometry or colour — the world's token layer is
@@ -61,9 +64,9 @@ test('the apex-only sentinels are balanced and each one wraps content', () => {
   const starts = HTML.match(/<!--apex-only:start-->/g) || [];
   const ends = HTML.match(/<!--apex-only:end-->/g) || [];
   assert.equal(starts.length, ends.length, 'every apex-only:start needs its end');
-  // four sections plus every baked apex FIGURE (task 1003298: the page bakes real
-  // numbers as its no-JS state, and a child must show an empty figure, not the
-  // platform's count, until its own feed answers)
+  // four sections plus the baked ledger line, meter and rows (task 1003298: the
+  // page bakes real numbers as its no-JS state, and a child must show an empty
+  // ledger, not the platform's, until its own feed answers)
   assert.ok(starts.length >= 4, 'the direction marks at least four apex-only regions');
   // no start after an unclosed start — a nested pair would make the non-greedy
   // strip close on the wrong sentinel and leak the platform's claims.
@@ -95,8 +98,8 @@ test('a child instance is served none of the platform-only claims', () => {
 test("a child instance is served none of the platform's NUMBERS either", () => {
   // The v3 composition puts real ledger values in the markup as the no-JS state.
   // A claim is obvious when it leaks; a number is not — a fresh child instance
-  // would silently advertise the hub's 2,107 shipped tasks and its V1 progress
-  // line until its own feeds answered. Both are apex-only for exactly that reason.
+  // would silently advertise the hub's V1 progress line and its six shipped
+  // rows until its own feed answered. Both are apex-only for exactly that reason.
   // the MARKUP only: the page script names every one of these hooks in a
   // querySelector, so scanning the whole file would match its own selectors.
   const child = stripApexOnly(HTML, false)
@@ -107,7 +110,6 @@ test("a child instance is served none of the platform's NUMBERS either", () => {
     'a thousands-separated figure survived the strip',
   );
   for (const [what, re, expected] of [
-    ['the three hero figures', /data-fig="[a-z]+"[^>]*>([\s\S]*?)<\/span>/g, 3],
     ['the ledger line', /data-ledger="line"[^>]*>([\s\S]*?)<\/p>/g, 1],
     ['the ledger meter', /data-ledger="meter"[^>]*>([\s\S]*?)<\/div>/g, 1],
   ]) {
@@ -134,7 +136,6 @@ test('a child instance keeps the whole portable spine', () => {
     'id="who"',                               // the identity slot
     'The six most recent, straight from the ledger.', // the ledger's own sub-line
     // the live hooks: a child's OWN feeds fill these, so the shells must survive
-    'data-fig="shipped"', 'data-fig="value"', 'data-fig="builders"',
     'data-ledger="line"', 'data-ledger="meter"', 'data-rows',
   ]) {
     assert.ok(child.includes(portable), `a child instance lost "${portable}"`);
@@ -314,8 +315,9 @@ test('nothing on the page marks an animation !important and escapes that switch'
 
 test('the signature animations are plain declarations, so the switch reaches them', () => {
   for (const name of [
-    'breathe', 'sheen', 'orbit',                                  // the breath
-    'arrive-form', 'arrive-orb', 'arrive-bead', 'arrive-mark',    // the authored moment
+    'breathe', 'sheen',                                // the breath
+    'drift-form', 'drift-orb',                         // the drift (task 1003333)
+    'arrive-form', 'arrive-orb', 'arrive-mark',        // the authored moment
   ]) {
     assert.match(PAGE_CSS, new RegExp(`@keyframes\\s+${name}\\s*\\{`), `@keyframes ${name} is gone`);
     assert.match(PAGE_CSS, new RegExp(`animation:[^;}]*\\b${name}\\b`), `nothing runs ${name}`);
@@ -334,22 +336,83 @@ test('the breath stays slow and the arrival stays brief', () => {
   };
   assert.ok(period('breathe', 's') >= 30, 'the blob breathes at 32s; under 30s it reads as a pulse');
   assert.ok(period('sheen', 's') >= 30, 'the hue drift is 40s; under 30s the iridescence shimmers');
-  assert.ok(period('orbit', 's') >= 60, 'the bead walks its circle in 60s');
-  for (const arrive of ['arrive-form', 'arrive-orb', 'arrive-bead', 'arrive-mark']) {
+  // the lava lamp (task 1003333): two long loops, and two DIFFERENT ones, so the
+  // plates never phase-lock into one animation
+  const form = period('drift-form', 's');
+  const orb = period('drift-orb', 's');
+  assert.ok(form >= 30, 'the sweeping form drifts over 74s; under 30s it paddles');
+  assert.ok(orb >= 30, 'the blob drifts over 58s; under 30s it paddles');
+  assert.notEqual(form, orb, 'equal periods would make the two plates read as one animation');
+  for (const arrive of ['arrive-form', 'arrive-orb', 'arrive-mark']) {
     assert.ok(period(arrive, 'ms') <= 800, `${arrive} holds the first paint too long`);
   }
 });
 
+// ── the owner's review of the hero (task 1003333) ──────────────────────────
+// Three corrections that a passing render cannot distinguish from taste: the
+// figures with their leader lines were "random lines" on the landing (they live
+// on the /projects poster card now), the doors sat too high and central, and
+// the small bead's orbit was not the motion asked for — the big plates drift.
+
+test('no figure, leader line or bead renders on the landing hero at any width (task 1003333)', () => {
+  const body = HTML.split('<body>')[1].split('<script>')[0];
+  assert.doesNotMatch(body, /class="callout|class="leader|data-fig=|callouts-row/, 'a hero callout came back');
+  assert.doesNotMatch(body, /class="plate bead"/, 'the orbiting bead came back');
+  // the narrow breakpoint has no three-up row to fall back to either
+  assert.doesNotMatch(PAGE_CSS, /\.callout|\.callouts-row|\.leader\b|\.fig\b|\.cap\b|\.bead\b/, 'callout or bead CSS survived');
+  assert.doesNotMatch(PAGE_CSS, /--c[123]-[xy]|--leader-len|--orbit-r|--bead-(w|cx|cy)/, 'a callout or bead token survived');
+  assert.doesNotMatch(PAGE_CSS, /@keyframes\s+(orbit|arrive-bead)\b/, 'the orbit keyframes survived');
+  // and the script no longer reads the two feeds that fed only those figures
+  assert.doesNotMatch(CODE, /setFig|data-fig|\/public\/cost-summary|\/public\/leaderboard/);
+});
+
+test('the doors hang below the blob\'s centre in both modes (task 1003333)', () => {
+  // the door pair is a stage token; the blob's centre is --orb-y + half its height. In dark the
+  // blob spans stage 24% to ~100% (centre ~62%); in light 32% to ~99% (centre ~66%). The doors
+  // used to sit at 53% / 60% — above centre and "too high and central" to the owner.
+  const cy = (block) => {
+    const m = block.match(/--doors-cy:calc\(var\(--vh\) \* (\d+)\)/);
+    assert.ok(m, 'the doors\' vertical token is no longer a stage percentage — update this test');
+    return Number(m[1]);
+  };
+  const light = PAGE_CSS.match(/\nbody\{([\s\S]*?)\n\}/);
+  // the wide blocks carry the stage percentage; the under-900 twins zero the token
+  const dark = [...PAGE_CSS.matchAll(/:root(?:\[data-mode="dark"\]|:not\(\[data-mode="light"\]\)) body\{([\s\S]*?)\n\s*\}/g)]
+    .filter((m) => /--doors-cy:calc\(/.test(m[1]));
+  assert.ok(light, 'the light token block is findable');
+  assert.equal(dark.length, 2, 'the dark token block and its prefers-color-scheme twin');
+  assert.ok(cy(light[1]) >= 70, 'light: the doors sit in the blob\'s lower half');
+  for (const d of dark) assert.ok(cy(d[1]) >= 68, 'dark: the doors sit in the blob\'s lower half');
+  assert.equal(cy(dark[0][1]), cy(dark[1][1]), 'the dark twins agree');
+});
+
+test('the big plates drift on transform alone, and the still object never does (task 1003333)', () => {
+  // transform is the one property the arrival (translate), the breath (scale) and the sheen
+  // (filter) do not use, so the drift composes with them instead of overriding one
+  for (const name of ['drift-form', 'drift-orb']) {
+    const kf = PAGE_CSS.match(new RegExp(`@keyframes\\s+${name}\\s*\\{([\\s\\S]*?)\\}\\s*\\}`));
+    assert.ok(kf, `@keyframes ${name} is gone`);
+    assert.doesNotMatch(kf[1], /translate:|scale:|filter:|opacity:|left:|top:/, `${name} must ride the transform property only`);
+    assert.match(kf[1], /0%\{transform:translate\(0,0\) rotate\(0deg\)\}/, `${name}'s rest frame is the graded composition`);
+    assert.match(kf[1], /100%\{transform:translate\(0,0\) rotate\(0deg\)/, `${name} must close its loop where it opened`);
+  }
+  const form = PAGE_CSS.match(/\n\.form\{[^}]*\}/);
+  const orb = PAGE_CSS.match(/\n\.orb\{[^}]*\}/);
+  const mark = PAGE_CSS.match(/\n\.mark\{[^}]*\}/);
+  assert.match(form[0], /animation:[^}]*\bdrift-form\b/, 'the sweeping form drifts');
+  assert.match(orb[0], /animation:[^}]*\bdrift-orb\b/, 'the big blob drifts');
+  assert.doesNotMatch(mark[0], /drift/, 'the bongo pair is the still object the moving ground is read against');
+  assert.doesNotMatch(PAGE_CSS, /\.doors\{[^}]*animation/, 'the doors never move with a plate');
+});
+
 // ── the live-data contract ─────────────────────────────────────────────────
 // Five public feeds fill the page after it has already rendered a real, baked
 // state. Everything here is invisible to a passing render: a feed renamed, an
 // innerHTML crept in with third-party titles in it, a figure quietly redefined.
 
-test('the script reads the five public feeds the head comment documents', () => {
+test('the script reads the three public feeds the head comment documents', () => {
   for (const feed of [
-    '/public/progress',                 // the shipped figure + the ledger line
-    '/public/cost-summary',             // the value figure
-    '/public/leaderboard',              // the builders figure
+    '/public/progress',                 // the ledger line + meter
     '/public/recent-shipped?limit=6',   // the ledger rows
     '/projects/featured',               // living proof
   ]) {
@@ -381,17 +444,12 @@ test('a live task title is normalised to the front door\'s own punctuation', ()
   assert.ok(has('/,\\s*,/g'), 'the comma a dash leaves beside one collapses');
 });
 
-test('each figure is defined the way the head comment says it is', () => {
+test('the ledger line is defined the way the head comment says it is', () => {
   // A figure whose definition drifts still renders a plausible number, so the
-  // page would lie without ever looking wrong. These are the three definitions.
-  assert.match(CODE, /total \+= Number\(r\.shipped_count\)/, 'shipped = the SUM over every progress row');
-  assert.match(CODE, /setFig\('shipped'/);
-  assert.match(CODE, /data\.total_value_credits/, 'value = total_value_credits from the cost summary');
-  assert.match(CODE, /setFig\('value'/);
-  assert.match(CODE, /Number\(r\.total_credits\) > 0/, 'builders = leaderboard entries HOLDING credits');
-  assert.match(CODE, /setFig\('builders'/);
-  // the ledger line + meter come off the first `building` row
+  // page would lie without ever looking wrong. The ledger line + meter come off
+  // the first `building` row (else the first row).
   assert.match(CODE, /r\.status === 'building'/);
+  assert.match(CODE, /if \(!live\) live = rows\[0\];/);
   assert.match(CODE, /' shipped on '/);
   // numbers are grouped, so the live value matches the baked one's shape
   assert.match(CODE, /toLocaleString\('en-US'\)/);