fix(studio): derive effective duration in PlayerControls instead of useEffect sync

Replace the useEffect that pushed effectiveTimelineDuration into the player
store with an inline derived selector in PlayerControls. The selector computes
Math.max(duration, maxElementEnd) directly from store state, avoiding the
effect-based sync anti-pattern entirely.

packages/studio/src/App.tsx

@@ -84,10 +84,6 @@ export function StudioApp() {
         : 0;
     return Math.max(timelineDuration, maxEnd);
   }, [timelineDuration, timelineElements]);
-  useEffect(() => {
-    if (effectiveTimelineDuration !== usePlayerStore.getState().duration)
-      usePlayerStore.getState().setDuration(effectiveTimelineDuration);
-  }, [effectiveTimelineDuration]);
   const refreshPreviewDocumentVersion = useCallback(() => {
     setPreviewDocumentVersion((v) => v + 1);
     window.setTimeout(() => setPreviewDocumentVersion((v) => v + 1), 80);

packages/studio/src/player/components/PlayerControls.tsx

@@ -55,7 +55,11 @@ export const PlayerControls = memo(function PlayerControls({
 }: PlayerControlsProps) {
   // Subscribe to only the fields we render — each selector prevents cascading re-renders
   const isPlaying = usePlayerStore((s) => s.isPlaying);
-  const duration = usePlayerStore((s) => s.duration);
+  const duration = usePlayerStore((s) => {
+    if (s.elements.length === 0) return s.duration;
+    const maxEnd = Math.max(...s.elements.map((el) => el.start + el.duration));
+    return Math.max(s.duration, maxEnd);
+  });
   const timelineReady = usePlayerStore((s) => s.timelineReady);
   const playbackRate = usePlayerStore((s) => s.playbackRate);
   const audioMuted = usePlayerStore((s) => s.audioMuted);