Add Page layout component and schema

Introduces a new Page layout component with corresponding PageSchema type for top-level page containers. Updates the Home page UI to include 'New Design' and 'Start New Design' actions, and registers the PageRenderer in the component registry.

Author: hotlong

apps/playground/src/pages/Home.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { exampleCategories } from '../data/examples';
-import { LayoutTemplate, ArrowRight, Component, Layers, Database, Shield, Box, FolderOpen } from 'lucide-react';
+import { LayoutTemplate, ArrowRight, Component, Layers, Database, Shield, Box, FolderOpen, Plus } from 'lucide-react';
 
 const CategoryIcon = ({ name }: { name: string }) => {
   switch (name) {
@@ -30,6 +30,13 @@ export const Home = () => {
             <span className="font-bold text-xl tracking-tight bg-gradient-to-r from-gray-900 to-gray-600 bg-clip-text text-transparent">Object UI Studio</span>
           </div>
           <div className="flex items-center gap-3">
+            <button
+              onClick={() => navigate('/studio/new')}
+              className="flex items-center gap-2 px-4 py-2 text-sm font-semibold text-indigo-600 bg-indigo-50 hover:bg-indigo-100 border border-indigo-200 rounded-lg transition-all shadow-sm hover:shadow"
+            >
+              <Plus className="w-4 h-4" />
+              New Design
+            </button>
             <button
               onClick={() => navigate('/my-designs')}
               className="flex items-center gap-2 px-4 py-2 text-sm font-semibold text-gray-700 hover:text-gray-900 bg-white/50 hover:bg-white border border-gray-200 rounded-lg transition-all shadow-sm hover:shadow"
@@ -71,11 +78,28 @@ export const Home = () => {
             Build Stunning Interfaces,<br />
             <span className="bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 bg-clip-text text-transparent">Purely from JSON.</span>
           </h1>
-          <p className="max-w-2xl mx-auto text-xl text-gray-600 leading-relaxed">
+          <p className="max-w-2xl mx-auto text-xl text-gray-600 leading-relaxed mb-8">
             Object UI transforms JSON schemas into fully functional, accessible, and responsive React applications. 
             <br className="hidden sm:block" />
-            <span className="font-semibold text-gray-700">Select a template below to start building.</span>
+            <span className="font-semibold text-gray-700">Select a template below or start from scratch.</span>
           </p>
+
+          <div className="flex justify-center gap-4">
+             <button
+              onClick={() => navigate('/studio/new')}
+              className="flex items-center gap-2 px-6 py-3 text-lg font-bold text-white bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 rounded-xl shadow-lg shadow-indigo-300/50 transition-all transform hover:scale-105"
+            >
+              <Plus className="w-5 h-5" />
+              Start New Design
+            </button>
+             <button
+              onClick={() => navigate('/my-designs')}
+              className="flex items-center gap-2 px-6 py-3 text-lg font-bold text-gray-700 bg-white hover:bg-gray-50 border-2 border-gray-200 rounded-xl shadow-lg transition-all transform hover:scale-105"
+            >
+              <FolderOpen className="w-5 h-5" />
+              Open Saved
+            </button>
+          </div>
         </div>
 
         {/* Category Filter */}

packages/components/src/renderers/layout/index.ts

@@ -3,3 +3,5 @@ import './tabs';
 import './grid';
 import './flex';
 import './container';
+import './page';
+

packages/components/src/renderers/layout/page.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { PageSchema } from '@object-ui/types';
+import { SchemaRenderer } from '@object-ui/react';
+import { ComponentRegistry } from '@object-ui/core';
+import { cn } from '../../lib/utils'; // Keep internal import for utils
+
+export const PageRenderer: React.FC<{ schema: PageSchema }> = ({ schema }) => {
+  // Support both body (legacy/playground) and children
+  const content = schema.body || schema.children;
+  const nodes = Array.isArray(content) ? content : (content ? [content] : []);
+
+  return (
+    <div className={cn("min-h-full w-full bg-background p-6 md:p-8", schema.className)}>
+      <div className="mx-auto max-w-7xl space-y-8">
+        {(schema.title || schema.description) && (
+          <div className="space-y-2">
+            {schema.title && (
+              <h1 className="text-3xl font-bold tracking-tight text-foreground">
+                {schema.title}
+              </h1>
+            )}
+            {schema.description && (
+              <p className="text-muted-foreground">
+                {schema.description}
+              </p>
+            )}
+          </div>
+        )}
+        
+        <div className="space-y-6">
+          {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+          {nodes.map((node: any, index: number) => (
+            <SchemaRenderer 
+              key={node?.id || index} 
+              schema={node} 
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+ComponentRegistry.register(
+  'page',
+  PageRenderer,
+  {
+    label: 'Page',
+    icon: 'Layout',
+    category: 'layout',
+    inputs: [
+      { name: 'title', type: 'string', label: 'Title' },
+      { name: 'description', type: 'string', label: 'Description' },
+      { 
+        name: 'body', 
+        type: 'array', 
+        label: 'Content',
+        // @ts-ignore - itemType is experimental/extended metadata
+        itemType: 'component' 
+      }
+    ]
+  }
+);

packages/types/src/index.ts

@@ -74,6 +74,7 @@ export type {
   ResizableSchema,
   ResizablePanel,
   LayoutSchema,
+  PageSchema,
 } from './layout';
 
 // ============================================================================

packages/types/src/layout.ts

@@ -368,6 +368,30 @@ export interface ResizablePanel {
   content: SchemaNode | SchemaNode[];
 }
 
+/**
+ * Page layout component
+ * Top-level container for a page route
+ */
+export interface PageSchema extends BaseSchema {
+  type: 'page';
+  /**
+   * Page title
+   */
+  title?: string;
+  /**
+   * Page description
+   */
+  description?: string;
+  /**
+   * Main content array
+   */
+  body?: SchemaNode[];
+  /**
+   * Alternative content prop
+   */
+  children?: SchemaNode | SchemaNode[];
+}
+
 /**
  * Union type of all layout schemas
  */
@@ -384,4 +408,5 @@ export type LayoutSchema =
   | CardSchema
   | TabsSchema
   | ScrollAreaSchema
-  | ResizableSchema;
+  | ResizableSchema
+  | PageSchema;