Fix Provider wrapper - wrap entire app once

app/page.tsx

@@ -24,6 +24,7 @@ export default function Home() {
   }
 
   return (
+    <Provider>
       <div className="min-h-screen bg-gradient-to-br from-orange-100 via-amber-50 to-yellow-100">
         <header className="bg-white shadow-lg sticky top-0 z-50 border-b-4 border-orange-400">
           <div className="container mx-auto px-4 py-6">
@@ -94,9 +95,7 @@ export default function Home() {
 
           {recipes.map((recipe, index) => (
             <div key={index} className="mb-8">
-            <Provider>
               <Renderer spec={recipe as any} registry={registry} />
-            </Provider>
             </div>
           ))}
         </main>
@@ -113,5 +112,6 @@ export default function Home() {
           </div>
         </footer>
       </div>
+    </Provider>
   );
 }

lib/registry.tsx

@@ -113,15 +113,15 @@ export const { registry } = defineRegistry(catalog, {
   },
 });
 
-// Provider wrapper for all required contexts
+// Provider wrapper for all required contexts - wraps entire app once
 export function Provider({ children }: { children: ReactNode }) {
   return (
-    <ActionProvider>
     <DataProvider>
       <VisibilityProvider>
+        <ActionProvider>
           {children}
+        </ActionProvider>
       </VisibilityProvider>
     </DataProvider>
-    </ActionProvider>
   );
 }