fix(studio): use Context.Provider for React 18 and break iframe ref update loop

The #748 decomposition used `<Context value={}>` (React 19 syntax) but the
runtime is React 18.3.1, which requires `<Context.Provider value={}>`. This
caused all 4 context providers to silently fail to provide values.

Also fixes an infinite update loop between handlePreviewIframeRef and
NLELayout's onIframeRef effect — the callback identity change triggered the
effect which re-called the callback, creating a render loop visible as
"Maximum update depth exceeded" in dev mode and intermittent flickering in
production.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: vanceingalls

packages/studio/src/App.tsx

@@ -261,6 +261,7 @@ export function StudioApp() {
   const { syncPreviewTimelineHotkey, syncPreviewHistoryHotkey } = appHotkeys;
   const handlePreviewIframeRef = useCallback(
     (iframe: HTMLIFrameElement | null) => {
+      if (previewIframeRef.current === iframe) return;
       previewIframeRef.current = iframe;
       setPreviewIframe(iframe);
       syncPreviewTimelineHotkey(iframe);

packages/studio/src/components/nle/NLELayout.tsx

@@ -234,9 +234,11 @@ export const NLELayout = memo(function NLELayout({
   const currentLevel = compositionStack[compositionStack.length - 1];
   const directUrl = compositionStack.length > 1 ? currentLevel.previewUrl : undefined;
 
+  const onIframeRefRef = useRef(onIframeRef);
+  onIframeRefRef.current = onIframeRef;
   useEffect(() => {
-    onIframeRef?.(iframeRef.current);
-  }, [compositionStack.length, onIframeRef, refreshKey, iframeRef]);
+    onIframeRefRef.current?.(iframeRef.current);
+  }, [compositionStack.length, refreshKey, iframeRef]);
 
   // Save master seek position before drilling down so we can restore it on back-navigation.
   // saveSeekPosition() sets pendingSeekRef in useTimelinePlayer which onIframeLoad reads.

packages/studio/src/contexts/DomEditContext.tsx

@@ -133,5 +133,5 @@ export function DomEditProvider({
       setAgentModalAnchorPoint,
     ],
   );
-  return <DomEditContext value={stable}>{children}</DomEditContext>;
+  return <DomEditContext.Provider value={stable}>{children}</DomEditContext.Provider>;
 }

packages/studio/src/contexts/FileManagerContext.tsx

@@ -106,5 +106,5 @@ export function FileManagerProvider({
       fontAssets,
     ],
   );
-  return <FileManagerContext value={stable}>{children}</FileManagerContext>;
+  return <FileManagerContext.Provider value={stable}>{children}</FileManagerContext.Provider>;
 }

packages/studio/src/contexts/PanelLayoutContext.tsx

@@ -64,5 +64,5 @@ export function PanelLayoutProvider({
       handlePanelResizeEnd,
     ],
   );
-  return <PanelLayoutContext value={stable}>{children}</PanelLayoutContext>;
+  return <PanelLayoutContext.Provider value={stable}>{children}</PanelLayoutContext.Provider>;
 }

packages/studio/src/contexts/StudioContext.tsx

@@ -131,5 +131,5 @@ export function StudioProvider({
       toggleTimelineVisibility,
     ],
   );
-  return <StudioContext value={stable}>{children}</StudioContext>;
+  return <StudioContext.Provider value={stable}>{children}</StudioContext.Provider>;
 }