From 744ccbf4341c97c7345f78bd37c19e90681143fb Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Mon, 4 May 2026 04:01:47 +0900
Subject: [PATCH] fix: register idleYawn keyframes via direct css interpolation
 + cover wheel scroll (F-4)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The idleSpriteWrapperStyle was using `keyframes.toString()` inside a JS
template literal, so Emotion's serializer hit the string-handling branch
and never injected the @keyframes block — the animation silently did
nothing. Switch to direct Keyframes-object interpolation inside css\`...\`
so Emotion registers the rule and returns the animation name.

Also add 'wheel' to ACTIVITY_EVENTS so desktop mouse-wheel scrolling on
the inner scrollable content area resets the idle timer (the existing
'scroll' listener on window only catches mobile/touch scroll).

Update the source plan doc to reflect the corrected idiom so future
implementers don't repeat the bug.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 docs/superpowers/plans/2026-05-04-micro-fun-patch.md | 5 ++---
 src/components/screens/ElementsScreen.tsx            | 4 +---
 src/lib/useIdleMood.ts                               | 1 +
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/docs/superpowers/plans/2026-05-04-micro-fun-patch.md b/docs/superpowers/plans/2026-05-04-micro-fun-patch.md
index 1712069..0d597c8 100644
--- a/docs/superpowers/plans/2026-05-04-micro-fun-patch.md
+++ b/docs/superpowers/plans/2026-05-04-micro-fun-patch.md
@@ -211,6 +211,7 @@ const ACTIVITY_EVENTS: Array<keyof WindowEventMap> = [
   'touchstart',
   'keydown',
   'scroll',
+  'wheel',
 ];
 
 export function useIdleMood(idleAfterMs: number = IDLE_AFTER_MS): Mood {
@@ -262,9 +263,7 @@ const idleSpriteWrapperStyle = (mood: Mood) => css`
   display: inline-block;
   width: 100%;
   height: 100%;
-  ${mood === 'idle'
-    ? `animation: ${idleYawnKeyframes.toString()} 8s ease-in-out infinite;`
-    : ''}
+  animation: ${mood === 'idle' ? css`${idleYawnKeyframes} 8s ease-in-out infinite` : 'none'};
 `;
 ```
 
diff --git a/src/components/screens/ElementsScreen.tsx b/src/components/screens/ElementsScreen.tsx
index 4a392e6..5d7ee28 100644
--- a/src/components/screens/ElementsScreen.tsx
+++ b/src/components/screens/ElementsScreen.tsx
@@ -527,9 +527,7 @@ const idleSpriteWrapperStyle = (mood: Mood) => css`
   display: inline-block;
   width: 100%;
   height: 100%;
-  ${mood === 'idle'
-    ? `animation: ${idleYawnKeyframes.toString()} 8s ease-in-out infinite;`
-    : ''}
+  animation: ${mood === 'idle' ? css`${idleYawnKeyframes} 8s ease-in-out infinite` : 'none'};
 `;
 
 const producerInfoStyle = css`
diff --git a/src/lib/useIdleMood.ts b/src/lib/useIdleMood.ts
index 3a35a25..f634e7d 100644
--- a/src/lib/useIdleMood.ts
+++ b/src/lib/useIdleMood.ts
@@ -10,6 +10,7 @@ const ACTIVITY_EVENTS: Array<keyof WindowEventMap> = [
   'touchstart',
   'keydown',
   'scroll',
+  'wheel',
 ];
 
 export function useIdleMood(idleAfterMs: number = IDLE_AFTER_MS): Mood {