fixes

apps/web/app/globals.css

@@ -100,3 +100,7 @@
     @apply bg-muted-foreground;
   }
 }
+
+button {
+  cursor: pointer;
+}

apps/web/components/code-block.tsx

@@ -87,7 +87,7 @@ export function CodeBlock({ code, lang }: CodeBlockProps) {
 
   return (
     <div
-      className="[&_pre]:!bg-transparent [&_pre]:!p-0 [&_pre]:!m-0 [&_code]:!bg-transparent"
+      className="text-[11px] leading-relaxed [&_pre]:bg-transparent! [&_pre]:p-0! [&_pre]:m-0! [&_pre]:border-none! [&_pre]:rounded-none! [&_pre]:text-[11px]! [&_code]:bg-transparent! [&_code]:p-0! [&_code]:rounded-none! [&_code]:text-[11px]!"
       dangerouslySetInnerHTML={{ __html: html }}
     />
   );

apps/web/components/demo.tsx

@@ -30,22 +30,26 @@ const STAGES: Stage[] = [
   { json: { key: "root", type: "Card", props: { title: "Welcome", description: "Get started with json-render" }, children: [{ key: "btn", type: "Button", props: { label: "Get Started", action: "start" } }] }, stream: '{"op":"replace","path":"/root/children/0/props","value":{"label":"Get Started"}}' },
 ];
 
-const CODE_EXAMPLE = `const registry = {
-  Card: ({ element, children }) => (
-    <div className="card">
-      <h3>{element.props.title}</h3>
-      <p>{element.props.description}</p>
-      {children}
-    </div>
-  ),
-  Button: ({ element, onAction }) => (
-    <button onClick={() => onAction(element.props.action)}>
-      {element.props.label}
-    </button>
-  ),
-};
+const CODE_EXAMPLE = `import { createCatalog } from '@json-render/core';
+import { z } from 'zod';
 
-<Renderer tree={tree} registry={registry} />`;
+export const catalog = createCatalog({
+  components: {
+    Card: {
+      props: z.object({
+        title: z.string(),
+        description: z.string().nullable(),
+      }),
+      hasChildren: true,
+    },
+    Button: {
+      props: z.object({
+        label: z.string(),
+        action: z.string(),
+      }),
+    },
+  },
+});`;
 
 type Phase = "typing" | "streaming" | "complete";
 type Tab = "stream" | "json" | "code";
@@ -238,12 +242,12 @@ export function Demo() {
                 )}
               </div>
             )}
-            {activeTab === "json" && (
+            <div className={activeTab === "json" ? "" : "hidden"}>
               <CodeBlock code={jsonCode} lang="json" />
-            )}
-            {activeTab === "code" && (
+            </div>
+            <div className={activeTab === "code" ? "" : "hidden"}>
               <CodeBlock code={CODE_EXAMPLE} lang="tsx" />
-            )}
+            </div>
           </div>
         </div>