@object-ui/components 2.0.0 → 3.0.1

package/src/custom/view-skeleton.tsx

@@ -0,0 +1,243 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from "react"
+import { cn } from "../lib/utils"
+import { Skeleton } from "../ui/skeleton"
+
+// ---------------------------------------------------------------------------
+// Shared types
+// ---------------------------------------------------------------------------
+
+export interface ViewSkeletonProps extends React.ComponentProps<"div"> {
+  /** Number of rows/items to render */
+  rows?: number
+}
+
+// ---------------------------------------------------------------------------
+// GridSkeleton – table rows with header and column cells
+// ---------------------------------------------------------------------------
+
+export interface GridSkeletonProps extends ViewSkeletonProps {
+  /** Number of columns to render */
+  columns?: number
+}
+
+function GridSkeleton({
+  rows = 5,
+  columns = 4,
+  className,
+  ...props
+}: GridSkeletonProps) {
+  return (
+    <div
+      data-slot="grid-skeleton"
+      className={cn("w-full space-y-2", className)}
+      {...props}
+    >
+      {/* Header row */}
+      <div className="flex gap-4 px-4 py-2">
+        {Array.from({ length: columns }).map((_, col) => (
+          <Skeleton key={col} className="h-4 flex-1 rounded" />
+        ))}
+      </div>
+
+      {/* Data rows */}
+      {Array.from({ length: rows }).map((_, row) => (
+        <div key={row} className="flex gap-4 rounded-md border px-4 py-3">
+          {Array.from({ length: columns }).map((_, col) => (
+            <Skeleton
+              key={col}
+              className={cn("h-4 flex-1 rounded", col === 0 && "max-w-[40%]")}
+            />
+          ))}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// KanbanSkeleton – columns with placeholder cards
+// ---------------------------------------------------------------------------
+
+export interface KanbanSkeletonProps extends ViewSkeletonProps {
+  /** Number of kanban columns to render */
+  columns?: number
+  /** Number of cards per column */
+  cardsPerColumn?: number
+}
+
+function KanbanSkeleton({
+  columns = 3,
+  cardsPerColumn = 3,
+  className,
+  ...props
+}: KanbanSkeletonProps) {
+  return (
+    <div
+      data-slot="kanban-skeleton"
+      className={cn("flex gap-4 overflow-x-auto", className)}
+      {...props}
+    >
+      {Array.from({ length: columns }).map((_, col) => (
+        <div
+          key={col}
+          className="flex w-72 shrink-0 flex-col gap-3 rounded-lg border bg-muted/30 p-3"
+        >
+          {/* Column header */}
+          <Skeleton className="h-5 w-24 rounded" />
+
+          {/* Cards */}
+          {Array.from({ length: cardsPerColumn }).map((_, card) => (
+            <div key={card} className="space-y-2 rounded-md border bg-background p-3">
+              <Skeleton className="h-4 w-3/4 rounded" />
+              <Skeleton className="h-3 w-1/2 rounded" />
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// FormSkeleton – labeled form fields
+// ---------------------------------------------------------------------------
+
+function FormSkeleton({
+  rows = 4,
+  className,
+  ...props
+}: ViewSkeletonProps) {
+  return (
+    <div
+      data-slot="form-skeleton"
+      className={cn("w-full max-w-lg space-y-6", className)}
+      {...props}
+    >
+      {Array.from({ length: rows }).map((_, i) => (
+        <div key={i} className="space-y-2">
+          {/* Label */}
+          <Skeleton className="h-4 w-28 rounded" />
+          {/* Input */}
+          <Skeleton className="h-9 w-full rounded-md" />
+        </div>
+      ))}
+
+      {/* Submit button */}
+      <Skeleton className="h-9 w-24 rounded-md" />
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// ListSkeleton – stacked list items
+// ---------------------------------------------------------------------------
+
+function ListSkeleton({
+  rows = 5,
+  className,
+  ...props
+}: ViewSkeletonProps) {
+  return (
+    <div
+      data-slot="list-skeleton"
+      className={cn("w-full space-y-3", className)}
+      {...props}
+    >
+      {Array.from({ length: rows }).map((_, i) => (
+        <div
+          key={i}
+          className="flex items-center gap-3 rounded-md border px-4 py-3"
+        >
+          <Skeleton className="size-8 shrink-0 rounded-full" />
+          <div className="flex-1 space-y-2">
+            <Skeleton className="h-4 w-3/5 rounded" />
+            <Skeleton className="h-3 w-2/5 rounded" />
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// ChartSkeleton – chart area placeholder
+// ---------------------------------------------------------------------------
+
+function ChartSkeleton({
+  className,
+  ...props
+}: Omit<ViewSkeletonProps, "rows">) {
+  return (
+    <div
+      data-slot="chart-skeleton"
+      className={cn("w-full space-y-4", className)}
+      {...props}
+    >
+      {/* Chart title */}
+      <Skeleton className="h-5 w-40 rounded" />
+
+      {/* Chart area with bar placeholders */}
+      <div className="flex h-48 items-end gap-2 rounded-md border p-4">
+        {(["h-2/5", "h-3/5", "h-1/3", "h-4/5", "h-1/2", "h-3/4", "h-2/5"] as const).map((heightClass, i) => (
+          <Skeleton
+            key={i}
+            className={cn("flex-1 rounded-t", heightClass)}
+          />
+        ))}
+      </div>
+
+      {/* Legend */}
+      <div className="flex gap-4">
+        <Skeleton className="h-3 w-16 rounded" />
+        <Skeleton className="h-3 w-16 rounded" />
+        <Skeleton className="h-3 w-16 rounded" />
+      </div>
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// ViewSkeleton – convenience wrapper that dispatches by variant
+// ---------------------------------------------------------------------------
+
+export type ViewSkeletonVariant = "grid" | "kanban" | "form" | "list" | "chart"
+
+export interface ViewSkeletonDispatchProps extends ViewSkeletonProps {
+  variant: ViewSkeletonVariant
+  /** Number of columns (grid / kanban) */
+  columns?: number
+  /** Cards per column (kanban only) */
+  cardsPerColumn?: number
+}
+
+function ViewSkeleton({ variant, ...props }: ViewSkeletonDispatchProps) {
+  switch (variant) {
+    case "grid":
+      return <GridSkeleton {...props} />
+    case "kanban":
+      return <KanbanSkeleton {...props} />
+    case "form":
+      return <FormSkeleton {...props} />
+    case "list":
+      return <ListSkeleton {...props} />
+    case "chart":
+      return <ChartSkeleton {...props} />
+  }
+}
+
+export {
+  ViewSkeleton,
+  GridSkeleton,
+  KanbanSkeleton,
+  FormSkeleton,
+  ListSkeleton,
+  ChartSkeleton,
+}

package/src/custom/view-states.tsx

@@ -0,0 +1,153 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from "react"
+import { Loader2, InboxIcon, AlertCircle } from "lucide-react"
+
+import { cn } from "../lib/utils"
+import { Button } from "../ui/button"
+
+// ---------------------------------------------------------------------------
+// DataLoadingState
+// ---------------------------------------------------------------------------
+
+interface DataLoadingStateProps extends React.ComponentProps<"div"> {
+  /** Message displayed below the spinner */
+  message?: string
+}
+
+function DataLoadingState({
+  className,
+  message = "Loading…",
+  ...props
+}: DataLoadingStateProps) {
+  return (
+    <div
+      role="status"
+      aria-label={message}
+      data-slot="data-loading-state"
+      className={cn(
+        "flex flex-col items-center justify-center gap-3 p-6 text-center",
+        className
+      )}
+      {...props}
+    >
+      <Loader2 className="size-6 animate-spin text-muted-foreground" />
+      {message && (
+        <p className="text-sm text-muted-foreground">{message}</p>
+      )}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// DataEmptyState
+// ---------------------------------------------------------------------------
+
+interface DataEmptyStateProps extends React.ComponentProps<"div"> {
+  /** Icon rendered above the title */
+  icon?: React.ReactNode
+  title?: string
+  description?: string
+  /** Optional action rendered below the description */
+  action?: React.ReactNode
+}
+
+function DataEmptyState({
+  className,
+  icon,
+  title = "No data",
+  description,
+  action,
+  children,
+  ...props
+}: DataEmptyStateProps) {
+  return (
+    <div
+      data-slot="data-empty-state"
+      className={cn(
+        "flex flex-col items-center justify-center gap-3 p-6 text-center",
+        className
+      )}
+      {...props}
+    >
+      <div className="flex size-10 items-center justify-center rounded-lg bg-muted">
+        {icon ?? <InboxIcon className="size-5 text-muted-foreground" />}
+      </div>
+      {title && (
+        <h3 className="text-sm font-medium">{title}</h3>
+      )}
+      {description && (
+        <p className="max-w-sm text-sm text-muted-foreground">{description}</p>
+      )}
+      {action}
+      {children}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// DataErrorState
+// ---------------------------------------------------------------------------
+
+interface DataErrorStateProps extends React.ComponentProps<"div"> {
+  title?: string
+  /** Error message or description */
+  message?: string
+  /** Callback invoked when the retry button is clicked */
+  onRetry?: () => void
+  /** Label for the retry button */
+  retryLabel?: string
+}
+
+function DataErrorState({
+  className,
+  title = "Something went wrong",
+  message,
+  onRetry,
+  retryLabel = "Retry",
+  children,
+  ...props
+}: DataErrorStateProps) {
+  return (
+    <div
+      role="alert"
+      data-slot="data-error-state"
+      className={cn(
+        "flex flex-col items-center justify-center gap-3 p-6 text-center",
+        className
+      )}
+      {...props}
+    >
+      <div className="flex size-10 items-center justify-center rounded-lg bg-destructive/10">
+        <AlertCircle className="size-5 text-destructive" />
+      </div>
+      {title && (
+        <h3 className="text-sm font-medium">{title}</h3>
+      )}
+      {message && (
+        <p className="max-w-sm text-sm text-muted-foreground">{message}</p>
+      )}
+      {onRetry && (
+        <Button variant="outline" size="sm" onClick={onRetry}>
+          {retryLabel}
+        </Button>
+      )}
+      {children}
+    </div>
+  )
+}
+
+export {
+  DataLoadingState,
+  DataEmptyState,
+  DataErrorState,
+  type DataLoadingStateProps,
+  type DataEmptyStateProps,
+  type DataErrorStateProps,
+}

package/src/renderers/complex/data-table.tsx

@@ -100,6 +100,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
     resizableColumns = true,
     reorderableColumns = true,
     editable = false,
+    rowClassName,
     className,
   } = schema;
 
@@ -509,13 +510,13 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
   const showToolbar = searchable || exportable || (selectable && selectedRowIds.size > 0) || hasPendingChanges;
 
   return (
-    <div className={`flex flex-col h-full gap-4 ${className || ''}`}>
+    <div className={`flex flex-col h-full gap-2 sm:gap-4 ${className || ''}`}>
       {/* Toolbar */}
       {showToolbar && (
-        <div className="flex items-center justify-between gap-4 flex-none">
+        <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-2 sm:gap-4 flex-none">
           <div className="flex items-center gap-2 flex-1">
             {searchable && (
-              <div className="relative max-w-sm flex-1">
+              <div className="relative w-full sm:max-w-sm flex-1">
                 <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                 <Input
                   placeholder="Search..."
@@ -530,7 +531,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
             )}
           </div>
           
-          <div className="flex items-center gap-2">
+          <div className="flex flex-wrap items-center gap-2">
             {hasPendingChanges && (
               <>
                 <div className="text-sm text-muted-foreground">
@@ -578,8 +579,8 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
         </div>
       )}
 
-      {/* Table */}
-      <div className="rounded-md border flex-1 min-h-0 overflow-auto relative bg-background">
+      {/* Table - horizontal scroll indicator via inset shadow on mobile */}
+      <div className="rounded-md border flex-1 min-h-0 overflow-auto relative bg-background [-webkit-overflow-scrolling:touch] shadow-[inset_-8px_0_8px_-8px_rgba(0,0,0,0.08)]">
         <Table>
           {caption && <TableCaption>{caption}</TableCaption>}
           <TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
@@ -600,7 +601,15 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                 return (
                   <TableHead
                     key={col.accessorKey}
-                    className={`${col.className || ''} ${sortable && col.sortable !== false ? 'cursor-pointer select-none' : ''} ${isDragging ? 'opacity-50' : ''} ${isDragOver ? 'border-l-2 border-primary' : ''} relative group bg-background`}
+                    className={cn(
+                      col.className,
+                      sortable && col.sortable !== false && 'cursor-pointer select-none',
+                      isDragging && 'opacity-50',
+                      isDragOver && 'border-l-2 border-primary',
+                      col.align === 'right' && 'text-right',
+                      col.align === 'center' && 'text-center',
+                      'relative group bg-background'
+                    )}
                     style={{ 
                       width: columnWidth,
                       minWidth: columnWidth 
@@ -612,7 +621,10 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                     onDragEnd={handleColumnDragEnd}
                     onClick={() => sortable && col.sortable !== false && handleSort(col.accessorKey)}
                   >
-                    <div className="flex items-center justify-between">
+                    <div className={cn(
+                      "flex items-center",
+                      col.align === 'right' ? 'justify-end' : 'justify-between'
+                    )}>
                       <div className="flex items-center gap-1">
                         {reorderableColumns && (
                           <GripVertical className="h-4 w-4 opacity-0 group-hover:opacity-50 cursor-grab active:cursor-grabbing flex-shrink-0" />
@@ -665,7 +677,8 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                       data-state={isSelected ? 'selected' : undefined}
                       className={cn(
                         schema.onRowClick && "cursor-pointer",
-                        rowHasChanges && "bg-amber-50 dark:bg-amber-950/20"
+                        rowHasChanges && "bg-amber-50 dark:bg-amber-950/20",
+                        rowClassName && rowClassName(row, rowIndex)
                       )}
                       onClick={(e) => {
                         if (schema.onRowClick && !e.defaultPrevented) {
@@ -699,6 +712,8 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                             key={colIndex} 
                             className={cn(
                               col.cellClassName,
+                              col.align === 'right' && 'text-right',
+                              col.align === 'center' && 'text-center',
                               isEditable && !isEditing && "cursor-text hover:bg-muted/50",
                               hasPendingChange && "font-semibold text-amber-700 dark:text-amber-400"
                             )}
@@ -789,9 +804,9 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
 
       {/* Pagination */}
       {pagination && sortedData.length > 0 && (
-        <div className="flex items-center justify-between">
+        <div className="flex flex-col sm:flex-row items-center justify-between gap-2">
           <div className="flex items-center gap-2">
-            <span className="text-sm text-muted-foreground">Rows per page:</span>
+            <span className="text-xs sm:text-sm text-muted-foreground">Rows per page:</span>
             <Select
               value={pageSize.toString()}
               onValueChange={(value) => {
@@ -813,8 +828,8 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
           </div>
 
           <div className="flex items-center gap-2">
-            <span className="text-sm text-muted-foreground">
-              Page {currentPage} of {totalPages} ({sortedData.length} total)
+            <span className="text-xs sm:text-sm text-muted-foreground">
+              Page {currentPage} of {totalPages} <span className="hidden sm:inline">({sortedData.length} total)</span>
             </span>
             <div className="flex items-center gap-1">
               <Button

package/src/renderers/complex/resizable.tsx

@@ -17,23 +17,26 @@ import {
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('resizable', 
-  ({ schema, className, ...props }: { schema: ResizableSchema; className?: string; [key: string]: any }) => (
-    <ResizablePanelGroup 
-        orientation={(schema.direction || 'horizontal') as "horizontal" | "vertical"}
-        className={className} 
-        {...props}
-        style={{ minHeight: schema.minHeight || '200px' }}
-    >
-      {schema.panels?.map((panel: any, index: number) => (
-        <React.Fragment key={index}>
-             <ResizablePanel defaultSize={panel.defaultSize} minSize={panel.minSize} maxSize={panel.maxSize}>
-                {renderChildren(panel.content)}
-             </ResizablePanel>
-             {index < schema.panels.length - 1 && <ResizableHandle withHandle={schema.withHandle} />}
-        </React.Fragment>
-      ))}
-    </ResizablePanelGroup>
-  ),
+  ({ schema, className, ...props }: { schema: ResizableSchema; className?: string; [key: string]: any }) => {
+    const panels = Array.isArray(schema.panels) ? schema.panels : [];
+    return (
+      <ResizablePanelGroup 
+          orientation={(schema.direction || 'horizontal') as "horizontal" | "vertical"}
+          className={className} 
+          {...props}
+          style={{ minHeight: schema.minHeight || '200px' }}
+      >
+        {panels.map((panel: any, index: number) => (
+          <React.Fragment key={index}>
+               <ResizablePanel defaultSize={panel.defaultSize} minSize={panel.minSize} maxSize={panel.maxSize}>
+                  {renderChildren(panel.content)}
+               </ResizablePanel>
+               {index < panels.length - 1 && <ResizableHandle withHandle={schema.withHandle} />}
+          </React.Fragment>
+        ))}
+      </ResizablePanelGroup>
+    );
+  },
   {
     namespace: 'ui',
     label: 'Resizable Panel Group',

package/src/renderers/data-display/list.tsx

@@ -15,7 +15,7 @@ ComponentRegistry.register('list',
   ({ schema, className, ...props }: { schema: ListSchema; className?: string; [key: string]: any }) => {
     // Support data binding
     const boundData = useDataScope(schema.bind);
-    const items = boundData || schema.items || [];
+    const items = Array.isArray(boundData) ? boundData : Array.isArray(schema.items) ? schema.items : [];
     
     // We use 'ol' or 'ul' based on ordered prop
     const ListTag = schema.ordered ? 'ol' : 'ul';

package/src/renderers/data-display/table.tsx

@@ -23,7 +23,7 @@ export const SimpleTableRenderer = ({ schema, className }: any) => {
   // Try to get data from binding first, then fall back to inline data
   const boundData = useDataScope(schema.bind);
   const data = boundData || schema.data || schema.props?.data || [];
-  const columns = schema.columns || schema.props?.columns || [];
+  const columns = Array.isArray(schema.columns) ? schema.columns : Array.isArray(schema.props?.columns) ? schema.props.columns : [];
 
   // If we have data but it's not an array, show error. 
   // If data is undefined, we might just be loading or empty.

package/src/renderers/data-display/tree-view.tsx

@@ -102,7 +102,8 @@ ComponentRegistry.register('tree-view',
 
     // Support data binding
     const boundData = useDataScope(schema.bind);
-    const nodes = boundData || schema.nodes || schema.data || [];
+    const rawNodes = boundData || schema.nodes || schema.data || [];
+    const nodes = Array.isArray(rawNodes) ? rawNodes : [];
 
     return (
       <div className={cn(

package/src/renderers/form/form.tsx

@@ -292,7 +292,7 @@ ComponentRegistry.register('form',
                     render={({ field: formField }) => (
                       <FormItem className={colSpanClass || undefined}>
                         {label && (
-                          <FormLabel>
+                          <FormLabel className="text-xs sm:text-sm">
                             {label}
                             {required && (
                               <span className="text-destructive ml-1" aria-label="required">
@@ -329,13 +329,14 @@ ComponentRegistry.register('form',
 
           {/* Form Actions */}
           {(schema.showActions !== false) && (
-            <div className={`flex gap-2 ${layout === 'horizontal' ? 'justify-end' : 'justify-start'} mt-6`}>
+            <div className={`flex flex-col sm:flex-row gap-2 ${layout === 'horizontal' ? 'sm:justify-end' : 'sm:justify-start'} mt-6`}>
               {showCancel && (
                 <Button
                   type="button"
                   variant="outline"
                   onClick={handleCancel}
                   disabled={isSubmitting || disabled}
+                  className="w-full sm:w-auto"
                 >
                   {cancelLabel}
                 </Button>
@@ -344,6 +345,7 @@ ComponentRegistry.register('form',
               <Button
                 type="submit"
                 disabled={isSubmitting || disabled}
+                className="w-full sm:w-auto"
               >
                 {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                 {submitLabel}
@@ -460,12 +462,12 @@ function renderFieldComponent(type: string, props: RenderFieldProps) {
       if (inputType === 'file') {
         // File inputs cannot be controlled with value prop
          const { value, ...fileProps } = fieldProps;
-         return <Input type="file" placeholder={placeholder} {...fileProps} />;
+         return <Input type="file" placeholder={placeholder} className="min-h-[44px] sm:min-h-0" {...fileProps} />;
       }
-      return <Input type={inputType || 'text'} placeholder={placeholder} {...fieldProps} value={fieldProps.value ?? ''} />;
+      return <Input type={inputType || 'text'} placeholder={placeholder} className="min-h-[44px] sm:min-h-0" {...fieldProps} value={fieldProps.value ?? ''} />;
       
     case 'textarea':
-      return <Textarea placeholder={placeholder} {...fieldProps} value={fieldProps.value ?? ''} />;
+      return <Textarea placeholder={placeholder} className="min-h-[44px] sm:min-h-0" {...fieldProps} value={fieldProps.value ?? ''} />;
     
     case 'checkbox': {
       // For checkbox, we need to handle the value differently
@@ -474,6 +476,7 @@ function renderFieldComponent(type: string, props: RenderFieldProps) {
         <Checkbox 
           checked={value}
           onCheckedChange={onChange}
+          className="min-h-[44px] min-w-[44px] sm:min-h-0 sm:min-w-0"
           {...checkboxProps}
         />
       );
@@ -486,6 +489,7 @@ function renderFieldComponent(type: string, props: RenderFieldProps) {
         <Switch 
           checked={value}
           onCheckedChange={onChange}
+          className="min-h-[44px] min-w-[44px] sm:min-h-0 sm:min-w-0"
           {...switchProps}
         />
       );
@@ -502,7 +506,7 @@ function renderFieldComponent(type: string, props: RenderFieldProps) {
       
       return (
         <Select value={selectValue} onValueChange={selectOnChange} {...selectProps}>
-          <SelectTrigger>
+          <SelectTrigger className="min-h-[44px] sm:min-h-0">
             <SelectValue placeholder={placeholder ?? 'Select an option'} />
           </SelectTrigger>
           <SelectContent>

package/src/renderers/layout/aspect-ratio.tsx

@@ -28,7 +28,7 @@ ComponentRegistry.register('aspect-ratio',
         {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
       >
         {schema.image ? (
-          <img src={schema.image} alt={schema.alt || ''} className="rounded-md object-cover w-full h-full" />
+          <img src={schema.image} alt={schema.alt || ''} loading="lazy" className="rounded-md object-cover w-full h-full" />
         ) : (
           renderChildren(schema.children || schema.body)
         )}