fix(ui): move loop-selection effects after state init (TDZ crash -> black screen)

app/static/js/app.jsx

@@ -17784,6 +17784,7 @@ const App = () => {
     // timeline thu nhỏ ở góc — user phải zoom in mới về đúng).
     window.__sfTimelineZoom = zoom;
   }, [zoom]);
+  const [isLoopingSelection, setIsLoopingSelection] = useState(false);
   // Persist transport loop selection qua save/reload — serialize đọc từ window
   // refs (module-level không truy cập state). Lưu cả vùng chọn (giây) để loop
   // vùng chọn hoạt động lại đúng sau khi mở project.
@@ -17792,7 +17793,6 @@ const App = () => {
     window.__sfSelectionStart = selectionStart;
     window.__sfSelectionEnd = selectionEnd;
   }, [selectionStart, selectionEnd]);
-  const [isLoopingSelection, setIsLoopingSelection] = useState(false);
   const [beginBar, setBeginBar] = useState(0);
   const [endBar, setEndBar] = useState(0);
   const [numberBar, setNumberBar] = useState(1);

app/static/js/app.precompiled.js

@@ -1130,10 +1130,10 @@ const handleSectionItemDragStartRef=useRef(null);const[localSelectionTrackId,set
 try{const v=parseFloat(localStorage.getItem('sf_zoom'));if(isFinite(v)&&v>0)return v;}catch(e){}return 100;});React.useEffect(()=>{try{localStorage.setItem('sf_zoom',String(zoom));}catch(e){}// Zoom TIMELINE (App) — serialize project dùng cái này (window.__currentZoom
 // là zoom của Media Explorer — lưu nhầm làm project load ra zoom 1.0 →
 // timeline thu nhỏ ở góc — user phải zoom in mới về đúng).
-window.__sfTimelineZoom=zoom;},[zoom]);// Persist transport loop selection qua save/reload — serialize đọc từ window
+window.__sfTimelineZoom=zoom;},[zoom]);const[isLoopingSelection,setIsLoopingSelection]=useState(false);// Persist transport loop selection qua save/reload — serialize đọc từ window
 // refs (module-level không truy cập state). Lưu cả vùng chọn (giây) để loop
 // vùng chọn hoạt động lại đúng sau khi mở project.
-React.useEffect(()=>{window.__sfLoopSelection=isLoopingSelection;},[isLoopingSelection]);React.useEffect(()=>{window.__sfSelectionStart=selectionStart;window.__sfSelectionEnd=selectionEnd;},[selectionStart,selectionEnd]);const[isLoopingSelection,setIsLoopingSelection]=useState(false);const[beginBar,setBeginBar]=useState(0);const[endBar,setEndBar]=useState(0);const[numberBar,setNumberBar]=useState(1);// Quét chọn (sweep — tempo track/timeline) → đồng bộ bars hiển thị dưới
+React.useEffect(()=>{window.__sfLoopSelection=isLoopingSelection;},[isLoopingSelection]);React.useEffect(()=>{window.__sfSelectionStart=selectionStart;window.__sfSelectionEnd=selectionEnd;},[selectionStart,selectionEnd]);const[beginBar,setBeginBar]=useState(0);const[endBar,setEndBar]=useState(0);const[numberBar,setNumberBar]=useState(1);// Quét chọn (sweep — tempo track/timeline) → đồng bộ bars hiển thị dưới
 // statusbar: beginBar = bar chứa selectionStart, endBar = bar chứa
 // selectionEnd, numberBar = số bar được chọn. Trước đây beginBar/endBar/
 // numberBar CHỈ đổi khi nhập tay input — quét không cập nhật → statusbar

app/templates/index.html

@@ -51,7 +51,7 @@
     <script src="/static/js/services/promptTemplateManager.js?v=202607281039"></script>
     <script src="/static/js/services/undoRedoEngine.js?v=202607290941"></script>
     <script src="/static/js/services/chordTheory.js?v=202608211300"></script>
-    <script src="/static/js/app.precompiled.js?v=202608231900" defer></script>
+    <script src="/static/js/app.precompiled.js?v=202608231901" defer></script>
     <link rel="stylesheet" href="/static/css/styles.css?v=202607271016">
     <style>
         :root {