Score: fix loop fresh-start render after tiling refactor

Three regressions stacked from previous commits showed up only on loop
scores at fresh-start (before first play): the music was completely
absent from the visible region — chrome + overlay rendered, the rest
was empty. Once the reader clicked play it recovered, masking the bug.

1. `musicWidth` was using `panRect.width` indiscriminately. For non-loop
   that's correct (pan = one continuous piece, sliced or not). For loop
   the pan spans N copies side-by-side, so panRect.width was N× too
   large. The wrong value broke padAnchors's loop-tail anchor and the
   render-loop's wrap math. Use tile0's own bounding rect for loop.

2. The pan's flex children were defaulting to flex-shrink: 1, so when
   the pan's containing block (`.score-pan-mask` at 100% of stage =
   small) constrained it via shrink-to-fit, three loop copies got
   squeezed to ~1/3 their natural width at mount time. tile0's bounding
   rect read ~600 px instead of ~1700, throwing musicWidth out by ~3×.
   Pin direct svg children to flex-shrink: 0.

3. After the pre-roll removal, fresh-start lands at translateX = +3 px
   (first note's natural x sits slightly left of the playhead). The
   render loop's `while (translateX > 0)` wrap was firing on that
   legitimate tiny positive offset and snapping the pan a full
   musicWidth left, hiding the music entirely. Gate the downward wrap
   on `wrapOffset !== 0` — only normalize when there's actually
   accumulated wrap state from prior iter changes / backward seeks.

All four scores verified at fresh-start: first note's center aligns to
the playhead within sub-pixel rounding. Loop continues to wrap
correctly across iter transitions during sustained playback.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: RuitingMa

src/components/Score.astro

@@ -223,6 +223,16 @@ const { slug, loop, playhead = 0.22, height = 200 } = Astro.props;
     fill: currentColor;
     stroke: currentColor;
   }
+  /* Pin direct SVG children of the pan to their natural width. Without
+     this, flex-shrink (default 1) collapses them when pan's shrink-to-
+     fit width can't accommodate the sum of all copies/tiles — the pan
+     ends up sized to one child's intrinsic width and the SVGs each
+     squeeze down to ~1/N. That broke loop scores at mount: tile0's
+     bounding rect read ~600px instead of the natural ~1700, throwing
+     `musicWidth` out of sync with the wrap math. */
+  .score-pan > :global(svg) {
+    flex-shrink: 0;
+  }
   /* Pedal markings (Ped. text + the bracket showing range of depression).
      A dense piece like Ravel's Jeux d'eau has hundreds of these, and at
      small stage heights the bracket reads as a foreign trapezoid below

src/lib/score/index.ts

@@ -137,7 +137,15 @@ export async function mountScore(host: HTMLElement): Promise<MountedScore | null
   // measure-1 header in the pan's own coordinates — drives loop
   // copy-shifting so music tiles end-to-end across loop copies.
   const actualHeaderWidth = measureHeaderWidth(firstMeasure, panRect0);
-  const musicWidth = panRect0.width - actualHeaderWidth;
+  // Music width = ONE iteration's width. For non-loop that's the whole
+  // pan (single SVG OR all tiles laid out left-to-right summing to the
+  // full piece). For loop it's just one copy — pan spans N copies so
+  // panRect.width would be N× too large, breaking padAnchors's loop-
+  // tail anchor and the render loop's wrap math.
+  const oneIterationWidthPx = loop
+    ? tile0.getBoundingClientRect().width
+    : panRect0.width;
+  const musicWidth = oneIterationWidthPx - actualHeaderWidth;
 
   const anchors = padAnchors(
     buildAnchors(pan, rendered, panRect0),

src/lib/score/render.ts

@@ -1910,12 +1910,18 @@ export function setupRenderLoop(args: {
           lastIterSeen = iter;
         }
         translateX = playheadPx - containerX + wrapOffset;
-        // Keep translate in (-musicWidth, 0]. The phantom leader tile
-        // positioned at `-musicWidth` means either side of that range
-        // has identical content to what the wrap reveals — the snap
-        // is visually seamless.
+        // Normalize translate into (-musicWidth, 0] via a phantom leader
+        // tile at `-musicWidth` so the seam is visually seamless. The
+        // forward wrap (`<= -musicWidth`) handles natural playback drift.
+        // The downward wrap (`> 0`) only matters when wrapOffset has
+        // accumulated state from prior iterations / backward jumps —
+        // skipping it when wrapOffset is zero preserves the legitimate
+        // fresh-start pose where translateX is a small positive value
+        // (first note's natural x sits slightly left of the playhead).
         while (translateX <= -musicWidth) { translateX += musicWidth; wrapOffset += musicWidth; }
-        while (translateX > 0) { translateX -= musicWidth; wrapOffset -= musicWidth; }
+        if (wrapOffset !== 0) {
+          while (translateX > 0) { translateX -= musicWidth; wrapOffset -= musicWidth; }
+        }
       } else {
         translateX = playheadPx - xAtMs(ms);
       }