Fix Provider wrapper - wrap entire app once

app/page.tsx

@@ -24,94 +24,94 @@ export default function Home() {
   }
 
   return (
-    <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">
-          <h1 className="text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-amber-600 text-center">
-            🥞 Les Crêpes de Maîtres
-          </h1>
-          <p className="text-center text-gray-600 mt-2 text-lg">
-            Famous French Chefs&apos; Crêpe Recipes
-          </p>
-          <p className="text-center text-gray-500 mt-1 text-sm">
-            Powered by <span className="font-mono font-semibold">json-render</span> ✨
-          </p>
-        </div>
-      </header>
-
-      <main className="container mx-auto px-4 py-12 max-w-6xl">
-        <div className="bg-blue-50 border-l-4 border-blue-500 p-6 rounded-lg shadow-md mb-12">
-          <h2 className="text-2xl font-bold text-gray-900 mb-3 flex items-center gap-2">
-            ℹ️ About This Demo
-          </h2>
-          <p className="text-gray-700 mb-2">
-            This application demonstrates <strong>json-render</strong> by Vercel Labs —
-            a library that enables AI-generated UIs with guardrailed components.
-          </p>
-          <p className="text-gray-700 mb-2">
-            Below, each recipe is defined as a <strong>JSON specification</strong> and
-            rendered through the <code className="bg-gray-200 px-2 py-1 rounded">Renderer</code> component
-            using our type-safe component catalog.
-          </p>
-          <p className="text-gray-700 mb-4">
-            In production, AI would generate these specs from user prompts—safely constrained
-            to only use components we&apos;ve defined (RecipeHeader, ChefInfo, IngredientList, etc.).
-          </p>
-          <div className="bg-white p-4 rounded-lg shadow-sm mb-4">
-            <h3 className="font-bold text-gray-900 mb-2 flex items-center gap-2">
-              <span className="text-green-600">✓</span> Guardrailed
-            </h3>
-            <p className="text-sm text-gray-600 mb-3">
-              AI can only use components in your catalog
+    <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">
+            <h1 className="text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-amber-600 text-center">
+              🥞 Les Crêpes de Maîtres
+            </h1>
+            <p className="text-center text-gray-600 mt-2 text-lg">
+              Famous French Chefs&apos; Crêpe Recipes
             </p>
-            <h3 className="font-bold text-gray-900 mb-2 flex items-center gap-2">
-              <span className="text-green-600">✓</span> Predictable
-            </h3>
-            <p className="text-sm text-gray-600 mb-3">
-              JSON output matches your schema, every time
-            </p>
-            <h3 className="font-bold text-gray-900 mb-2 flex items-center gap-2">
-              <span className="text-green-600">✓</span> Fast
-            </h3>
-            <p className="text-sm text-gray-600">
-              Stream and render progressively as the model responds
+            <p className="text-center text-gray-500 mt-1 text-sm">
+              Powered by <span className="font-mono font-semibold">json-render</span> ✨
             </p>
           </div>
-          <div className="mt-4 pt-4 border-t border-blue-200">
-            <p className="text-sm text-gray-600 flex items-center gap-2">
-              <span>🔗</span>
-              <a
-                href="https://github.com/vercel-labs/json-render"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="underline hover:text-blue-700 font-semibold"
-              >
-                github.com/vercel-labs/json-render
-              </a>
-            </p>
-          </div>
-        </div>
+        </header>
 
-        {recipes.map((recipe, index) => (
-          <div key={index} className="mb-8">
-            <Provider>
+        <main className="container mx-auto px-4 py-12 max-w-6xl">
+          <div className="bg-blue-50 border-l-4 border-blue-500 p-6 rounded-lg shadow-md mb-12">
+            <h2 className="text-2xl font-bold text-gray-900 mb-3 flex items-center gap-2">
+              ℹ️ About This Demo
+            </h2>
+            <p className="text-gray-700 mb-2">
+              This application demonstrates <strong>json-render</strong> by Vercel Labs —
+              a library that enables AI-generated UIs with guardrailed components.
+            </p>
+            <p className="text-gray-700 mb-2">
+              Below, each recipe is defined as a <strong>JSON specification</strong> and
+              rendered through the <code className="bg-gray-200 px-2 py-1 rounded">Renderer</code> component
+              using our type-safe component catalog.
+            </p>
+            <p className="text-gray-700 mb-4">
+              In production, AI would generate these specs from user prompts—safely constrained
+              to only use components we&apos;ve defined (RecipeHeader, ChefInfo, IngredientList, etc.).
+            </p>
+            <div className="bg-white p-4 rounded-lg shadow-sm mb-4">
+              <h3 className="font-bold text-gray-900 mb-2 flex items-center gap-2">
+                <span className="text-green-600">✓</span> Guardrailed
+              </h3>
+              <p className="text-sm text-gray-600 mb-3">
+                AI can only use components in your catalog
+              </p>
+              <h3 className="font-bold text-gray-900 mb-2 flex items-center gap-2">
+                <span className="text-green-600">✓</span> Predictable
+              </h3>
+              <p className="text-sm text-gray-600 mb-3">
+                JSON output matches your schema, every time
+              </p>
+              <h3 className="font-bold text-gray-900 mb-2 flex items-center gap-2">
+                <span className="text-green-600">✓</span> Fast
+              </h3>
+              <p className="text-sm text-gray-600">
+                Stream and render progressively as the model responds
+              </p>
+            </div>
+            <div className="mt-4 pt-4 border-t border-blue-200">
+              <p className="text-sm text-gray-600 flex items-center gap-2">
+                <span>🔗</span>
+                <a
+                  href="https://github.com/vercel-labs/json-render"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="underline hover:text-blue-700 font-semibold"
+                >
+                  github.com/vercel-labs/json-render
+                </a>
+              </p>
+            </div>
+          </div>
+
+          {recipes.map((recipe, index) => (
+            <div key={index} className="mb-8">
               <Renderer spec={recipe as any} registry={registry} />
-            </Provider>
-          </div>
-        ))}
-      </main>
+            </div>
+          ))}
+        </main>
 
-      <footer className="bg-gray-900 text-white py-8 mt-20">
-        <div className="container mx-auto px-4 text-center">
-          <p className="text-lg font-semibold mb-2">🇫🇷 Bon Appétit!</p>
-          <p className="text-gray-400 text-sm">
-            Built with Next.js, Tailwind CSS, and json-render
-          </p>
-          <p className="text-gray-500 text-xs mt-4">
-            Recipe sources linked in each chef&apos;s information card
-          </p>
-        </div>
-      </footer>
-    </div>
+        <footer className="bg-gray-900 text-white py-8 mt-20">
+          <div className="container mx-auto px-4 text-center">
+            <p className="text-lg font-semibold mb-2">🇫🇷 Bon Appétit!</p>
+            <p className="text-gray-400 text-sm">
+              Built with Next.js, Tailwind CSS, and json-render
+            </p>
+            <p className="text-gray-500 text-xs mt-4">
+              Recipe sources linked in each chef&apos;s information card
+            </p>
+          </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>
+    <DataProvider>
+      <VisibilityProvider>
+        <ActionProvider>
           {children}
-        </VisibilityProvider>
-      </DataProvider>
-    </ActionProvider>
+        </ActionProvider>
+      </VisibilityProvider>
+    </DataProvider>
   );
 }