feat: enhance PageRenderer to support regions and legacy body rendering

Author: hotlong

packages/components/src/__tests__/PageRendererRegions.test.tsx

@@ -0,0 +1,59 @@
+
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { PageRenderer } from '../renderers/layout/page'; // Direct import to test logic
+import { ComponentRegistry } from '@object-ui/core';
+
+// Mock SchemaRenderer to verify it's called
+import { SchemaRenderer } from '@object-ui/react';
+import { vi } from 'vitest';
+
+// Mock the SchemaRenderer to avoid full tree recursion deps
+vi.mock('@object-ui/react', () => ({
+  SchemaRenderer: ({ schema }: any) => <div data-testid="child-node">{schema.type}:{schema.value || schema.name}</div>
+}));
+
+describe('PageRenderer Regions', () => {
+    it('should render components from regions', () => {
+        const schema: any = {
+            type: 'page',
+            title: 'Test Page',
+            regions: [
+                {
+                    name: 'main',
+                    components: [
+                        { type: 'text', value: 'Region Content 1' },
+                        { type: 'button', label: 'Region Button' }
+                    ]
+                }
+            ]
+        };
+
+        render(<PageRenderer schema={schema} />);
+
+        // Check if title is rendered
+        expect(screen.getByText('Test Page')).toBeDefined();
+
+        // Check real content (since mock didn't take effect, we verify real render)
+        // The text component renders the value directly
+        expect(screen.getByText('Region Content 1')).toBeDefined();
+        
+        // The button component renders the label
+        expect(screen.getByText('Region Button')).toBeDefined();
+    });
+
+    it('should render legacy body', () => {
+        const schema: any = {
+            type: 'page',
+            title: 'Legacy Page',
+            body: [
+                { type: 'text', value: 'Body Content' }
+            ]
+        };
+
+        render(<PageRenderer schema={schema} />);
+        
+        expect(screen.getByText('Body Content')).toBeDefined();
+    });
+});

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

@@ -17,9 +17,18 @@ export const PageRenderer: React.FC<{ schema: PageSchema; className?: string; [k
   className,
   ...props 
 }) => {
-  // Support both body (legacy/playground) and children
-  const content = schema.body || schema.children;
-  const nodes = Array.isArray(content) ? content : (content ? [content] : []);
+  // Support regions (spec compliant), body (legacy), and children
+  let nodes: any[] = [];
+  
+  if (schema.regions && schema.regions.length > 0) {
+    // If regions are present, flatten their components into the main flow
+    // Ideally, we might want a grid layout here, but linear stacking works for simple single-region pages
+    nodes = schema.regions.flatMap(r => r.components || []);
+  } else {
+    // Fallback to direct children/body
+    const content = schema.body || schema.children;
+    nodes = Array.isArray(content) ? content : (content ? [content] : []);
+  }
 
   // Extract designer-related props
   const { 
@@ -68,7 +77,7 @@ export const PageRenderer: React.FC<{ schema: PageSchema; className?: string; [k
   );
 };
 
-const pageMeta = {
+const pageMeta: any = {
   namespace: 'ui',
   label: 'Page',
   icon: 'Layout',
@@ -80,7 +89,6 @@ const pageMeta = {
       name: 'body', 
       type: 'array', 
       label: 'Content',
-      // @ts-expect-error - itemType is experimental/extended metadata
       itemType: 'component' 
     }
   ]