fix(exchange): scroll the composer to follow the caret

`prompt` is an editable slot in both templates, but `.comp-text` is a
fixed-width single line with `white-space: pre` inside a composer that clips,
and the packaged prompt already reaches the mic -- it has no headroom at all.
A longer prompt therefore slid under the mic and the send button and lost its
tail, with the caret hidden behind them: the remix read as having typed into
nowhere, cut mid-word.

Both now scroll the typed text left to keep the caret in view, the way a real
single-line input does, on the very per-character times the reveal already uses.
The limit is measured to the opaque round button rather than the mic, because the
packaged prompt's caret already sits 2px past the mic's left edge in
chatgpt-exchange -- measuring to the mic would scroll the packaged composition.

Shrink-to-fit was the other option and it is worse: with no headroom it shrinks
the packaged prompt too, and it still cannot absorb a prompt twice as long
without unreadable type. It was tried, measured, and dropped.

A prompt that fits emits no keyframes and the element is never handed to GSAP at
all -- even a zero translate stamps a transform, which changes how the text
rasterizes.

claude-exchange puts this inside its existing `build()`, which already re-runs on
`document.fonts.ready`, so it measures the final font. chatgpt-exchange builds
once, so its scroll keyframes are kept in a list and rebuilt on the same event.

Verified on the packaged defaults: claude-exchange SSIM 1.000000 across 1284
frames. chatgpt-exchange is not frame-deterministic -- rendering it twice
unchanged gives 0.999959 with 249 frames under 0.9999, and before-vs-after gives
0.999967 with the same 249 -- so the change sits inside its own noise. Durations
unchanged at 14.9s and 21.4s. `hyperframes check` reports byte-identical results
to the unchanged templates.

Author: WaterrrForever

registry/blocks/chatgpt-exchange/chatgpt-exchange.html

@@ -1369,6 +1369,63 @@
         tRead + T.readbackDur - 0.35,
       );
 
+      /* ---- caret-following scroll in the composer.
+         `prompt` is an editable slot, but `.comp-text` is a fixed-width single line with
+         `white-space: pre` inside a composer that clips, and the packaged prompt already reaches
+         the mic. A longer one therefore slides under the mic and the send button and loses its
+         tail, with the caret hidden behind them -- the remix looks like it typed into nowhere.
+         A real single-line input scrolls its text left to keep the caret in view; this does the
+         same, on the very times the reveal already uses. Shrinking the type instead was the other
+         option and it is worse: it would shrink the packaged prompt too, since that prompt has no
+         headroom, and it still cannot absorb a prompt twice as long without becoming unreadable.
+         A prompt that fits emits no keyframes at all, so the packaged composition is untouched. */
+      const compTextEl = composer.querySelector("#cge-comp-text");
+      // The obstacle is the opaque round button, not the mic: the packaged prompt's caret already
+      // sits 2px past the mic's left edge, so measuring to the mic would scroll the packaged
+      // composition. The caret has 35px of clearance to the button, which is the real boundary.
+      const compStopEl = composer.querySelector("#cge-blue-btn");
+      const CARET_PAD = 8;
+      let caretScrollTweens = [];
+      const layoutCaretScroll = () => {
+        const hadTweens = caretScrollTweens.length > 0;
+        caretScrollTweens.forEach((tw) => tw.kill());
+        caretScrollTweens = [];
+        // Only ever touch typedEl when there is scrolling to do. A zero translate — or even a
+        // clearProps on an untouched element — stamps and removes a transform, which changes how
+        // the text rasterizes and makes the packaged render differ from before for no reason.
+        if (hadTweens) gsap.set(typedEl, { clearProps: "transform" });
+        if (!compTextEl || !compStopEl) return;
+        // Rects live in the scaled .screen space while offsets are layout px, so convert with the
+        // element's own ratio rather than reading --scale -- this then survives a change to it.
+        const box = compTextEl.getBoundingClientRect();
+        const ratio = compTextEl.offsetWidth ? box.width / compTextEl.offsetWidth : 1;
+        const limit =
+          (compStopEl.getBoundingClientRect().left - box.left) / (ratio || 1) - CARET_PAD;
+        if (!(limit > 0)) return;
+        // Collect the steps first, so a prompt that fits leaves typedEl alone entirely.
+        const steps = [];
+        let shift = 0;
+        chars.forEach((c, i) => {
+          const caret = curEls[i + 1];
+          if (!caret) return;
+          const want = Math.max(0, caret.offsetLeft - limit);
+          if (want > shift + 0.5) {
+            shift = want;
+            steps.push([charT[i], -shift]);
+          }
+        });
+        if (!steps.length) return;
+        steps.forEach(([at, x]) => {
+          caretScrollTweens.push(tl.to(typedEl, { x, duration: 0.08, ease: "none" }, at));
+        });
+        // Back to the start when the composer empties, so the collapse animates from x=0.
+        caretScrollTweens.push(tl.to(typedEl, { x: 0, duration: 0.01 }, tGo));
+      };
+      layoutCaretScroll();
+      // This composition builds its timeline once, so the first pass measures whatever font was
+      // live then. Re-measure when the embedded faces are ready.
+      document.fonts.ready.then(layoutCaretScroll);
+
       window.__timelines["chatgpt-exchange"] = tl;
     </script>
   </body>

registry/blocks/claude-exchange/claude-exchange.html

@@ -1582,6 +1582,54 @@
         // the minute rolls over between the source frames — keep that
         tl.to(document.getElementById("cle-clock-early"), { autoAlpha: 0, duration: 0.01 }, 8.4);
         tl.to(document.getElementById("cle-clock-late"), { autoAlpha: 1, duration: 0.01 }, 8.4);
+
+        /* ---- caret-following scroll in the composer.
+           `prompt` is an editable slot, but `.comp-text` is a fixed-width single line with
+           `white-space: pre` inside a composer that clips, and the packaged prompt already
+           reaches the mic. A longer one therefore slides under the mic and the send button and
+           loses its tail, with the caret hidden behind them. A real single-line input scrolls its
+           text left to keep the caret in view; this does the same, on the very times the reveal
+           already uses. Shrinking the type instead would shrink the packaged prompt too, since
+           that prompt has no headroom, and still could not absorb a prompt twice as long without
+           becoming unreadable. A prompt that fits emits no keyframes, so the packaged
+           composition is untouched. Lives inside build(), which is re-run once the embedded
+           faces are ready, so the measurement is taken against the final font. */
+        const compTextEl = composer.querySelector("#cle-comp-text");
+        // The obstacle is the opaque round button, not the mic glyph the text may abut. Take the
+        // leftmost of the two that occupy that corner, since one swaps in for the other.
+        const compStops = ["#cle-voice-btn", "#cle-send-btn"]
+          .map((sel) => composer.querySelector(sel))
+          .filter(Boolean);
+        const CARET_PAD = 8;
+        if (compTextEl && compStops.length) {
+          // Rects live in the scaled .screen space while offsets are layout px, so convert with
+          // the element's own ratio rather than reading --scale.
+          const box = compTextEl.getBoundingClientRect();
+          const ratio = compTextEl.offsetWidth ? box.width / compTextEl.offsetWidth : 1;
+          const stopLeft = Math.min(...compStops.map((el) => el.getBoundingClientRect().left));
+          const limit = (stopLeft - box.left) / (ratio || 1) - CARET_PAD;
+          if (limit > 0) {
+            // Collect the steps first, so a prompt that fits leaves typedEl alone entirely: even a
+            // zero translate stamps a transform, which changes how the text rasterizes and would
+            // make the packaged render differ from before for no reason.
+            const steps = [];
+            let shift = 0;
+            chars.forEach((c, i) => {
+              const caret = curEls[i + 1];
+              if (!caret) return;
+              const want = Math.max(0, caret.offsetLeft - limit);
+              if (want > shift + 0.5) {
+                shift = want;
+                steps.push([charT[i], -shift]);
+              }
+            });
+            if (steps.length) {
+              steps.forEach(([at, x]) => tl.to(typedEl, { x, duration: 0.08, ease: "none" }, at));
+              // Back to the start when the composer empties, so the collapse animates from x=0.
+              tl.to(typedEl, { x: 0, duration: 0.01 }, tGo);
+            }
+          }
+        }
       }
 
       build();