Merge origin/main into feat/accessibility-pass (reconcile static-publish + a11y with main)

# Conflicts: # simulator/static/app.js
2026-06-30 09:47:40 -07:00
parent b83758fbca ff06783173
commit 380c2d13e7
27 changed files with 7218 additions and 2956 deletions
@@ -171,7 +171,12 @@ function preloadOrder() {
    }
  }
  for (const f of reachableMorphFiles()) add(f);
-  for (const f of preloadList()) add(f);   // sweep up anything not on the ring
+  for (const f of preloadList()) add(f);   // sweep up every base not already on the ring
+  // ALL morphs last: preloading every transition before interaction guarantees a
+  // smooth knob turn anywhere (any random pool re-roll lands on an already-cached
+  // morph). They're ordered last so the first scenes + nearest transitions cache
+  // first and the loading bar fills meaningfully.
+  for (const f of Object.values(morphByPair)) add(f);
  return ordered;
 }

@@ -241,20 +246,42 @@ function preloadChip() {
 // to the loop's first frame, and the morph-covered intro never re-shows at rest.
 const LOOP_TAIL_S = 3.0;

-// Load a clip's base into the LOOP element (#vid-loop), seeked to the tail and PAUSED
-// on that exact frame. Idempotent per clip. Called during a scrub to PRELOAD the clip
-// we're about to land on, so settle just plays an already-decoded element at the morph's
-// last frame — no reload, no seek, no stall. `playLoop()` starts it at landing.
-function loadLoop(clip) {
-  if (!clip || loopVid.dataset.clip === clip.id) return;
+// The frame the current loop both LANDS on and WRAPS back to — stored per load so the
+// wrap handlers honor a direction-aware landing (forward=LOOP_TAIL_S, reverse=0).
+function loopStartFrame() {
+  const s = parseFloat(loopVid.dataset.loopStart);
+  return Number.isFinite(s) ? s : LOOP_TAIL_S;
+}
+
+// Load a clip's base into the LOOP element (#vid-loop), seeked to `landFrame` and PAUSED
+// on that exact frame. `landFrame` is the frame the morph last showed for THIS landing:
+// LOOP_TAIL_S when descending (lands on the morph's dst-tail), 0 when ascending (lands on
+// the morph's src-head — fixes the D3 reverse-landing jump). Omitted → LOOP_TAIL_S, the
+// forward default for non-scrub paths (initial load, knob changes). Idempotent per clip;
+// an explicit `landFrame` re-seeks the already-loaded clip if the travel direction flipped
+// the landing phase, but a bare call (ensureClipMedia) never clobbers a phase a scrub set.
+// Called during a scrub to PRELOAD the clip we're about to land on, so settle just plays
+// an already-decoded element at the right frame — no reload, no seek, no stall.
+function loadLoop(clip, landFrame) {
+  if (!clip) return;
+  const seekTo = (t) => { try { loopVid.currentTime = t; } catch (e) { /* not seekable yet */ } };
+  if (loopVid.dataset.clip === clip.id) {
+    if (landFrame != null && loopVid.dataset.loopStart !== String(landFrame)) {
+      loopVid.dataset.loopStart = String(landFrame);
+      if (loopVid.readyState >= 1) seekTo(landFrame);
+      else loopVid.addEventListener("loadedmetadata", () => seekTo(landFrame), { once: true });
+    }
+    return;
+  }
+  const lf = landFrame == null ? LOOP_TAIL_S : landFrame;
  loopVid.dataset.clip = clip.id;
-  loopVid.dataset.loopTail = "1";    // arm the [LOOP_TAIL_S, duration] wrap handler
+  loopVid.dataset.loopTail = "1";          // arm the [loopStart, duration] wrap handler
+  loopVid.dataset.loopStart = String(lf);
  loopVid.src = mediaUrl(clip.base_file);
-  loopVid.loop = false;              // native loop restarts at 0; we loop from the tail instead
+  loopVid.loop = false;                    // native loop restarts at 0; we loop from loopStart
  loopVid.muted = true;
-  const seek = () => { try { loopVid.currentTime = LOOP_TAIL_S; } catch (e) { /* not seekable yet */ } };
-  if (loopVid.readyState >= 1) seek();
-  else loopVid.addEventListener("loadedmetadata", seek, { once: true });
+  if (loopVid.readyState >= 1) seekTo(lf);
+  else loopVid.addEventListener("loadedmetadata", () => seekTo(lf), { once: true });
 }

 function playLoop() {
@@ -271,21 +298,22 @@ function ensureClipMedia() {
 }

 // The custom loop on the LOOP element: when a base loop reaches the end, jump back to
-// the tail offset (not 0). The morph element (#vid) is driven directly by the scrub.
+// its landing offset (LOOP_TAIL_S forward, 0 reverse — see loopStartFrame), not a fixed
+// tail. The morph element (#vid) is driven directly by the scrub.
 loopVid.addEventListener("timeupdate", () => {
  if (loopVid.dataset.loopTail === "1" && loopVid.duration && loopVid.currentTime >= loopVid.duration - 0.08) {
-    try { loopVid.currentTime = LOOP_TAIL_S; } catch (e) { /* not seekable */ }
+    try { loopVid.currentTime = loopStartFrame(); } catch (e) { /* not seekable */ }
  }
 });

 // Safety net: the timeupdate wrap above is a narrow window (the last 0.08 s). Under
 // real-browser decode/GPU load a `timeupdate` can skip past it, the clip fires
 // `ended`, and — with native loop off — freezes on its last frame ("not looping").
-// `ended` GUARANTEES recovery: seek back to the tail and resume. Headless rarely
-// hits this; loaded real machines do.
+// `ended` GUARANTEES recovery: seek back to the landing offset and resume. Headless
+// rarely hits this; loaded real machines do.
 loopVid.addEventListener("ended", () => {
  if (loopVid.dataset.loopTail !== "1") return;
-  try { loopVid.currentTime = LOOP_TAIL_S; } catch (e) { /* not seekable */ }
+  try { loopVid.currentTime = loopStartFrame(); } catch (e) { /* not seekable */ }
  loopVid.play().catch(() => {});
 });

@@ -564,6 +592,49 @@ function renderOverlay(level, intensity) {
 // knob no longer gates them). `intensity` is the layer opacity. Words are placed at authored
 // scene points (no boxes — feelings are scene-level) and read softer than the
 // clinical reticles — feeling, not measurement.
+// --- Keep Feel (affect) words clear of Think (label) chips -------------------
+// Feelings are scene-level (soft position), so we nudge THEM off the analytical
+// chip plates rather than move a chip off its subject. Obstacles are computed
+// from the manifest (not the DOM) so the clearance holds for the WHOLE loop: a
+// tracked chip's drift is sampled, so the per-frame track re-render never slides
+// a chip under an already-placed word. Mirrors chip()'s plate geometry.
+const FS_CHIP = 2.4, PAD_CHIP = 0.6;
+function chipPlateRect(bx, by, textLen) {
+  const w = textLen * FS_CHIP * 0.6 + PAD_CHIP * 2;
+  const h = FS_CHIP + PAD_CHIP * 1.4;
+  const cy = Math.max(by - h - 0.6, 0.4);   // plate sits just above the box top
+  return { x: bx, y: cy, w, h };
+}
+function rectsOverlap(a, b, pad) {
+  pad = pad || 0;
+  return a.x < b.x + b.w + pad && a.x + a.w + pad > b.x &&
+         a.y < b.y + b.h + pad && a.y + a.h + pad > b.y;
+}
+// Plate rects for every left label visible at `level`; a tracked label's path is
+// sampled across the loop so its whole drift envelope is treated as occupied.
+function leftLabelPlates(clip, level) {
+  const out = [];
+  if (!clip || !clip.annotations || level <= 0) return out;
+  const strings = HEFi18n.resolveStrings(clip.strings, activeLang);
+  for (const a of clip.annotations) {
+    if (level < firstLevel(a)) continue;
+    const measure = a.key.startsWith("measure.");
+    const raw = strings[a.key];
+    const tier = measure ? 1 : clamp(level - firstLevel(a) + 1, 1, tierCount(raw));
+    const label = String(pickTier(raw !== undefined ? raw : a.key, tier) || "");
+    const len = label.length + (measure ? 0 : 5);   // detections append " 0.xx"
+    const ts = (a.track && a.track.length) ? [0, 0.2, 0.4, 0.6, 0.8, 1] : [0];
+    for (const tt of ts) {
+      const b = boxAt(a, tt);
+      out.push(chipPlateRect(b[0] * 100, b[1] * 100, len));
+    }
+  }
+  // The global "◉ ANALYSIS · L… · … OBJ" status tag (top-right) shows whenever any
+  // label does — reserve its corner so feelings don't collide with it either.
+  if (out.length) out.push({ x: 64, y: 2, w: 34, h: 6 });
+  return out;
+}
+
 function renderAffect(strength, intensity, right) {
  lastAffect = { strength, intensity, right };
  const clip = activeClip();
@@ -572,14 +643,36 @@ function renderAffect(strength, intensity, right) {
  if (!clip || !clip.affect || strength <= 0) { affectLayer.style.opacity = "0"; return; }
  affectLayer.style.opacity = String(intensity);
  const strings = HEFi18n.resolveStrings(clip.strings, activeLang);
+  // Chip plates to avoid (left labels visible at the current Left level), plus the
+  // words placed so far so feelings don't stack on each other either.
+  const obstacles = leftLabelPlates(clip, lastOverlay ? lastOverlay.level : 0);
+  const placed = [];
  for (const f of clip.affect) {
    if (f.min_level > strength) continue;
-    const [x, y] = f.at.map((n) => n * 100);
-    const t = svg("text", { x, y, "text-anchor": "middle", class: "hud-affect" }, affectLayer);
+    const [x, y0] = f.at.map((n) => n * 100);
+    const t = svg("text", { x, y: y0, "text-anchor": "middle", class: "hud-affect" }, affectLayer);
    // RIGHT emotion tier: the vocabulary escalates basic -> compound as the Right
    // knob rises (appearance is gated by the Right knob via `strength` above).
    const raw = strings[f.key];
    t.textContent = pickTier(raw !== undefined ? raw : f.key, clamp(right || 0, 1, tierCount(raw)));
+    // Nudge vertically off any chip plate / already-placed word, staying on-screen;
+    // keep the least-overlapping spot if nothing is fully clear.
+    const bb0 = t.getBBox();
+    // Diagnostic seam (sibling of window.__hefState): disable nudging to A/B the
+    // overlap-avoidance in tests.
+    const deconflict = !(typeof window !== "undefined" && window.__hefNoDeconflict);
+    if (deconflict && bb0.width) {
+      let bestY = y0, bestHits = Infinity;
+      for (const dy of [0, 4, -4, 8, -8, 12, -12, 16, -16, 20, -20]) {
+        const yy = clamp(y0 + dy, 4, 96);
+        const r = { x: bb0.x, y: bb0.y + (yy - y0), w: bb0.width, h: bb0.height };
+        const hits = obstacles.concat(placed).filter((o) => rectsOverlap(r, o, 0.4)).length;
+        if (hits < bestHits) { bestHits = hits; bestY = yy; if (hits === 0) break; }
+      }
+      if (bestY !== y0) t.setAttribute("y", bestY);
+    }
+    const bb = t.getBBox();
+    placed.push({ x: bb.x, y: bb.y, w: bb.width, h: bb.height });
  }
 }

@@ -891,6 +984,11 @@ function setPos(next) {
    busy = false;
    delete vid.dataset.morph;  // clear so re-entering the same segment reloads the morph (not the base)
    currentClipId = null;      // force ensureClipMedia to reload + loop the locked clip
+    // Land the loop on the frame the morph last showed for THIS travel direction:
+    // descending lands on the morph's dst-tail (LOOP_TAIL_S), ascending on its src-head
+    // (0). Explicit (not relying on the scrub's preload) so a reverse landing never
+    // jumps even if the heading clip wasn't warmed in time. (D3 fix.)
+    loadLoop(activeClip(), HEFScrub.loopLandFrame(scrubDir, LOOP_TAIL_S));
    if (!isReduced()) playLoop();   // reduced motion holds the landing frame; else run the base loop
    else { vid.pause(); loopVid.pause(); }
    showActiveSource();
@@ -903,10 +1001,11 @@ function setPos(next) {
  }
  busy = true;                 // mid-morph: block update() from reloading the base clip under us
  if (!activeSeg || activeSeg.lo !== lo) rebuildSegment(lo, ringIndex);
-  // Preload the clip we're heading toward into the LOOP element (paused @ tail) so the
-  // landing is a swap, not a reload+seek. dir>0 lands on clipHi, dir<0 on clipLo.
+  // Preload the clip we're heading toward into the LOOP element (paused on its landing
+  // frame) so the landing is a swap, not a reload+seek. dir>0 lands on clipHi at the
+  // morph's dst-tail (LOOP_TAIL_S); dir<0 lands on clipLo at the morph's src-head (0).
  const headingId = dir > 0 ? activeSeg.clipHi : activeSeg.clipLo;
-  loadLoop(clipsById[headingId]);
+  loadLoop(clipsById[headingId], HEFScrub.loopLandFrame(dir, LOOP_TAIL_S));
  showActiveSource();          // morph element is the live source while scrubbing
  setNeedle(pos * dialStep());
  blendAudio(lo, frac);
@@ -1275,7 +1374,10 @@ function scaleAudioUrl(index) {
  if (!ring || !ring.scales.length) return null;
  const s = ring.scales[HEFScrub.wrapIndex(index, ring.scales.length)];
  const a = s.audio || SCALE_AUDIO_FALLBACK[s.id];
-  return a ? "/media/audio/" + a : null;
+  // Route through mediaBase() so audio loads from R2 in the static build (and the
+  // local /media mount in dev) — NOT a hardcoded /media path, which 404s on the
+  // static site. mediaUrl() then passes this absolute url straight through.
+  return a ? mediaBase() + "audio/" + a : null;
 }
 // The current resting altitude's soundtrack url (kept for the status readout).
 function soundtrackUrl() { return scaleAudioUrl(ringIndex); }
@@ -1413,7 +1515,10 @@ async function main() {
  dial.addEventListener("keydown", onDialKey);   // arrows/Home/End + Enter/Space on labels
  $("stage").addEventListener("wheel", onWheel, { passive: false });
  update();                   // render the initial state (both toggles off → black, silent)
-  await preloadAllMedia();    // download all media, updating the loading bar
+  // Preload BEFORE interaction: a base for every altitude + all related morphs, so
+  // turning the knob is always smooth (no on-demand stall, no blank next scene). The
+  // "Loading Universe…" bar tracks this; the universe stays gated until it's ready.
+  await preloadAllMedia();
  hideLoading();              // experience is ready — boots SILENT (video off, audio 0)
  $("run-sim").classList.remove("hidden");   // reveal the obvious starting point over the black stage
  maybeShowMotionWarning();                  // first-visit photosensitivity notice, above the button
@@ -1459,3 +1564,31 @@ function setLanguage(lang) {
 }

 main();
+
+// Temporary ?debug overlay: an on-screen readout of media/render state, for
+// diagnosing real-browser playback that headless can't reproduce. Add ?debug to the
+// URL to show it. Harmless/no-op without the flag; safe to remove once resolved.
+(function debugOverlay() {
+  if (!/[?&]debug\b/.test(location.search)) return;
+  const box = document.createElement("div");
+  box.style.cssText = "position:fixed;left:6px;bottom:6px;z-index:99999;max-width:96vw;" +
+    "background:rgba(0,0,0,.82);color:#0f0;font:11px/1.35 monospace;padding:8px 10px;" +
+    "white-space:pre-wrap;border:1px solid #0a0;border-radius:4px;";
+  document.body.appendChild(box);
+  let webgl = "?";
+  try { const c = document.createElement("canvas"); webgl = c.getContext("webgl2") ? "webgl2" : (c.getContext("webgl") ? "webgl1" : "NONE"); }
+  catch (e) { webgl = "throw:" + e.message; }
+  const errs = [];
+  window.addEventListener("error", (e) => { errs.push((e.message || e.error || "err").toString().slice(0, 80)); });
+  const m = (el) => el ? `rs=${el.readyState} ${el.paused ? "PAUSED" : "play"} t=${(el.currentTime || 0).toFixed(1)} err=${el.error ? el.error.code : "-"} ${(el.currentSrc || el.src || "(no src)").slice(0, 46)}` : "absent";
+  setInterval(() => {
+    const cfg = window.HEF_CONFIG || {};
+    box.textContent =
+      `cfg: static=${cfg.static} base=${cfg.mediaBase}\n` +
+      `webgl=${webgl}  visual=${(document.getElementById("visual") || {}).checked}\n` +
+      `loop : ${m(document.getElementById("vid-loop"))}\n` +
+      `morph: ${m(document.getElementById("vid"))}\n` +
+      `aud  : ${m(document.getElementById("aud"))}\n` +
+      `errs : ${errs.slice(-3).join(" | ") || "none"}`;
+  }, 400);
+})();
@@ -14,9 +14,10 @@
    </header>

    <!-- Option D1: the altered work's own license + the "modified" statement that
-         CC BY / CC BY-SA attribution requires. -->
+         CC BY / CC BY-SA attribution requires. Heading deliberately NOT "About" — the
+         separate About page covers the project's intent. -->
    <section class="declaration">
-      <h2>About this work</h2>
+      <h2>License &amp; reuse</h2>
      <p>
        The <em>Human Experience Filter</em> alters its source footage in real time
        (overlays, an emotion/affect channel, and a WebGL “dream” shader), so every
@@ -29,6 +29,18 @@
    return { from: 1 - f, to: f };
  }

+  // The base-loop frame a landing must continue from so the steady loop picks up
+  // the EXACT frame the morph last showed — no jump. A morph spans src@0 (frac 0)
+  // -> dst@loopTailS (frac 1), scrubbed bidirectionally. Descending (dir>0) lands
+  // on dst at frac 1, whose frame is dst@loopTailS, so the loop resumes at loopTailS
+  // (and the morph-covered intro never re-shows). Ascending (dir<0) lands on src at
+  // frac 0, whose frame is src@0, so the loop must resume at 0 — seeking to loopTailS
+  // there is the ~3s reverse-landing jump (D3). dir 0 defaults to the forward/tail
+  // case (matches the loadLoop default used by non-scrub paths).
+  function loopLandFrame(dir, loopTailS) {
+    return dir < 0 ? 0 : loopTailS;
+  }
+
  // Integers strictly crossed moving prevPos -> pos, in travel order. Landing
  // exactly on an integer counts as crossing it (it commits that altitude).
  function integerCrossings(prevPos, pos) {
@@ -41,5 +53,5 @@
    return out;
  }

-  return { clamp01, wrapIndex, segmentOf, accumToPos, fracToTime, crossfadeGains, integerCrossings };
+  return { clamp01, wrapIndex, segmentOf, accumToPos, fracToTime, crossfadeGains, loopLandFrame, integerCrossings };
 });