feat: enhance form and grid components with improved metadata handling and className utility

Author: hotlong

packages/components/src/renderers/form/form.tsx

@@ -278,6 +278,9 @@ ComponentRegistry.register('form',
                           {/* Render the actual field component based on type */}
                           {renderFieldComponent(type, {
                             ...fieldProps,
+                            // specialized fields needs raw metadata, but we should traverse down if it exists
+                            // field is the field configuration loop variable
+                            field: (field as any).field || field, 
                             ...formField,
                             inputType: fieldProps.inputType,
                             options: fieldProps.options,

packages/fields/src/widgets/GridField.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { FieldWidgetProps } from './types';
+import { cn } from '@object-ui/components';
 
 /**
  * GridField - Sub-table/grid data display
@@ -16,15 +17,15 @@ export function GridField({ value, field, readonly, ...props }: FieldWidgetProps
 
   if (readonly) {
     return (
-      <div className={`text-sm ${props.className || ''}`}>
+      <div className={cn("text-sm", props.className)}>
         <span className="text-gray-700">{value.length} rows</span>
       </div>
     );
   }
 
   // Simple read-only table view
   return (
-    <div className={`border border-gray-200 rounded-md overflow-hidden ${props.className || ''}`}>
+    <div className={cn("border border-gray-200 rounded-md overflow-hidden", props.className)}>
       <div className="overflow-auto max-h-60">
         <table className="w-full text-sm">
           <thead className="bg-gray-50 border-b border-gray-200">

packages/layout/src/Page.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { SchemaRenderer } from '@object-ui/react';
 import { PageSchema, SchemaNode } from '@object-ui/types';
 import { PageHeader } from './PageHeader';
+import { cn } from '@object-ui/components';
 
 // Helper to ensure children is always an array
 const getChildren = (children?: SchemaNode[] | SchemaNode): SchemaNode[] => {
@@ -11,11 +12,15 @@ const getChildren = (children?: SchemaNode[] | SchemaNode): SchemaNode[] => {
   return [children];
 };
 
-export function Page({ schema, ...props }: { schema: PageSchema } & any) {
+export function Page({ schema, className, style, id, ...props }: { schema: PageSchema; className?: string; style?: React.CSSProperties; id?: string } & any) {
   const children = getChildren(schema.children);
 
   return (
-    <div className="flex flex-col h-full space-y-4">
+    <div 
+      id={id || schema.id}
+      className={cn("flex flex-col h-full space-y-4", className)} 
+      style={style}
+    >
       <PageHeader 
         title={schema.title} 
         description={schema.description}