Fix: PNG download bakes only first frame of animated layers

ROADMAP.md

@@ -166,6 +166,7 @@ When reviewing code, use the Before/After markdown table format from the skill.
 - [x] **Browse 429s.** `/browse` fires ~60 animated renders on first paint. Animated rate limit was 30/min per IP — 30 succeed, the rest break. Added `isSameOrigin(request)` that checks `Sec-Fetch-Site: same-origin` to exempt our own UI. External consumers still capped, but caps bumped to 120/min animated + 60/min OG. (PR #170)
 - [x] **Cache header revalidation.** `Cache-Control: immutable` was wrong once PR #156 made same-ID sprite art mutable. Swapped for 1-day fresh + 7-day stale-while-revalidate — art updates propagate within ~1 day without a manual dashboard purge. Manual purge still works for urgent rollout. (PR #166, #168, #169)
 - [x] **Animated `cheeky-terminal` (16-frame sequence) + `terminal-round` + `glasses` (blink).** Upgraded three previously-static eye parts to animated. `cheeky-terminal` is the first 16-frame sequence (fills one full super-loop). `ANIM_VERSION` 1→2 to bust CDN caches. Parts.ts docstring updated to include N=16 as valid sequence length.
+- [x] **Client PNG download baked full sprite sheet.** Creator `download()` used 5-arg `drawImage(img, 0, 0, size, size)` which stretched whole sheet — animated faces showed both blink frames side-by-side. Switched to 9-arg form with source rect `(0, 0, NATIVE, NATIVE)` so only frame 0 is sampled. Works for every layer (eyes/heads/body/top), every kind (static/blink/sequence).
 
 ## Improve GIFs / Animated API
 

app/src/app/creator.tsx

@@ -103,7 +103,7 @@
     if (initialId && isValidId(initialId)) return decode(initialId);
     return randomCombo();
   });
   const reducedMotion = usePrefersReducedMotion();
   const [animating, setAnimating] = useState(true);
   const [downloadOpen, setDownloadOpen] = useState(false);
   const [inspectorOpen, setInspectorOpen] = useState(false);
@@ -370,7 +370,7 @@
     }
     for (const category of layerOrder) {
       const img = imagesRef.current[category];
-      if (img) ctx.drawImage(img, 0, 0, size, size);
+      if (img) ctx.drawImage(img, 0, 0, NATIVE, NATIVE, 0, 0, size, size);
     }
     const link = document.createElement("a");
     link.download = `pixabot-${size}x${size}.png`;
@@ -484,7 +484,7 @@
         cycle(layerOrder[3]);
         break;
     }
   }, []);
 
   useKeydown(handleKeyDown);
 
@@ -494,7 +494,7 @@
       if (!candidate) return;
       e.preventDefault();
       updateSelection(decode(candidate));
     }, [])
   );
 
   const fxActive = hue !== 0 || saturate !== 1 || bg !== null;