fix(studio): stabilize hook deps to prevent update loops

packages/studio/src/App.tsx

@@ -446,6 +446,33 @@ export function StudioApp() {
     initialState: initialUrlStateRef.current,
   });
 
+  // Memoize nested objects so StudioProvider's useMemo can see stable deps.
+  const editHistoryCtx = useMemo(
+    () => ({
+      canUndo: editHistory.canUndo,
+      canRedo: editHistory.canRedo,
+      undoLabel: editHistory.undoLabel,
+      redoLabel: editHistory.redoLabel,
+    }),
+    [editHistory.canUndo, editHistory.canRedo, editHistory.undoLabel, editHistory.redoLabel],
+  );
+  const renderQueueCtx = useMemo(
+    () => ({
+      jobs: renderQueue.jobs,
+      isRendering: renderQueue.isRendering,
+      deleteRender: renderQueue.deleteRender,
+      clearCompleted: renderQueue.clearCompleted,
+      startRender: renderQueue.startRender as (options: unknown) => Promise<void>,
+    }),
+    [
+      renderQueue.jobs,
+      renderQueue.isRendering,
+      renderQueue.deleteRender,
+      renderQueue.clearCompleted,
+      renderQueue.startRender,
+    ],
+  );
+
   // StudioProvider performs its own useMemo — no need for a second memo here.
   const studioCtxValue: StudioContextValue = {
     projectId: projectId!,
@@ -460,21 +487,10 @@ export function StudioApp() {
     currentTime,
     timelineElements,
     isPlaying,
-    editHistory: {
-      canUndo: editHistory.canUndo,
-      canRedo: editHistory.canRedo,
-      undoLabel: editHistory.undoLabel,
-      redoLabel: editHistory.redoLabel,
-    },
+    editHistory: editHistoryCtx,
     handleUndo: appHotkeys.handleUndo,
     handleRedo: appHotkeys.handleRedo,
-    renderQueue: {
-      jobs: renderQueue.jobs,
-      isRendering: renderQueue.isRendering,
-      deleteRender: renderQueue.deleteRender,
-      clearCompleted: renderQueue.clearCompleted,
-      startRender: renderQueue.startRender as (options: unknown) => Promise<void>,
-    },
+    renderQueue: renderQueueCtx,
     compositionDimensions,
     waitForPendingDomEditSaves: previewPersistence.waitForPendingDomEditSaves,
     handlePreviewIframeRef,

packages/studio/src/hooks/useDomSelection.ts

@@ -101,11 +101,13 @@ export function useDomSelection({
   const domEditSelectionRef = useRef<DomEditSelection | null>(domEditSelection);
   const domEditGroupSelectionsRef = useRef<DomEditSelection[]>(domEditGroupSelections);
   const domEditHoverSelectionRef = useRef<DomEditSelection | null>(domEditHoverSelection);
+  const rightPanelTabRef = useRef<RightPanelTab>(rightPanelTab);
 
   // Keep refs in sync with state
   domEditSelectionRef.current = domEditSelection;
   domEditGroupSelectionsRef.current = domEditGroupSelections;
   domEditHoverSelectionRef.current = domEditHoverSelection;
+  rightPanelTabRef.current = rightPanelTab;
 
   // ── Callbacks ──
 
@@ -165,7 +167,7 @@ export function useDomSelection({
       if (nextSelection) {
         if (options?.revealPanel !== false) {
           setRightCollapsed(false);
-          if (rightPanelTab !== "layers") {
+          if (rightPanelTabRef.current !== "layers") {
             setRightPanelTab("design");
           }
         }
@@ -179,13 +181,7 @@ export function useDomSelection({
 
       setSelectedTimelineElementId(null);
     },
-    [
-      setSelectedTimelineElementId,
-      timelineElements,
-      setRightCollapsed,
-      setRightPanelTab,
-      rightPanelTab,
-    ],
+    [setSelectedTimelineElementId, timelineElements, setRightCollapsed, setRightPanelTab],
   );
 
   const clearDomSelection = useCallback(() => {
@@ -384,14 +380,16 @@ export function useDomSelection({
     applyDomSelection(null, { revealPanel: false });
   }, [applyDomSelection, captionEditMode]);
 
-  // Disabled inspector effect
+  // Disabled inspector: clear selection and force tab to "renders" once.
+  // Read rightPanelTab from a ref so this effect only runs when the feature
+  // flag value or the stable callbacks change — not on every tab switch.
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
     if (STUDIO_INSPECTOR_PANELS_ENABLED) return;
     updateDomEditHoverSelection(null);
     applyDomSelection(null, { revealPanel: false });
-    if (rightPanelTab !== "renders") setRightPanelTab("renders");
-  }, [applyDomSelection, rightPanelTab, updateDomEditHoverSelection, setRightPanelTab]);
+    if (rightPanelTabRef.current !== "renders") setRightPanelTab("renders");
+  }, [applyDomSelection, updateDomEditHoverSelection, setRightPanelTab]);
 
   return {
     // State

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

@@ -68,9 +68,13 @@ export const AudioWaveform = memo(function AudioWaveform({
   const roRef = useRef<ResizeObserver | null>(null);
   const cacheKey = waveformUrl ?? audioUrl;
   const [peaks, setPeaks] = useState<number[] | null>(peaksCache.get(cacheKey) ?? null);
+  const peaksRef = useRef(peaks);
+  peaksRef.current = peaks;
 
   useEffect(() => {
-    if (peaks || !cacheKey) return;
+    // Guard via ref — avoids including `peaks` in deps which would
+    // cause an unnecessary re-fire when the fetch resolves and state updates.
+    if (peaksRef.current || !cacheKey) return;
 
     let cancelled = false;
 
@@ -108,7 +112,7 @@ export const AudioWaveform = memo(function AudioWaveform({
     return () => {
       cancelled = true;
     };
-  }, [audioUrl, waveformUrl, cacheKey, peaks]);
+  }, [audioUrl, waveformUrl, cacheKey]);
 
   // Draw bars into the container using innerHTML (fast, zoom-resilient)
   const draw = useCallback(() => {