@object-ui/components 0.5.0 → 3.0.0

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

@@ -44,6 +44,8 @@ import {
   ChevronsLeft,
   ChevronsRight,
   GripVertical,
+  Save,
+  X,
 } from 'lucide-react';
 
 type SortDirection = 'asc' | 'desc' | null;
@@ -97,6 +99,8 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
     rowActions = false,
     resizableColumns = true,
     reorderableColumns = true,
+    editable = false,
+    rowClassName,
     className,
   } = schema;
 
@@ -120,11 +124,17 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
   const [columnWidths, setColumnWidths] = useState<Record<string, number>>({});
   const [draggedColumn, setDraggedColumn] = useState<number | null>(null);
   const [dragOverColumn, setDragOverColumn] = useState<number | null>(null);
+  const [editingCell, setEditingCell] = useState<{ rowIndex: number; columnKey: string } | null>(null);
+  const [editValue, setEditValue] = useState<any>('');
+  // Track pending changes for multi-cell editing: rowIndex -> { columnKey -> newValue }
+  const [pendingChanges, setPendingChanges] = useState<Map<number, Record<string, any>>>(new Map());
+  const [isSaving, setIsSaving] = useState(false);
   
   // Refs for column resizing
   const resizingColumn = useRef<string | null>(null);
   const startX = useRef<number>(0);
   const startWidth = useRef<number>(0);
+  const editInputRef = useRef<HTMLInputElement>(null);
 
   // Update columns when schema changes
   useEffect(() => {
@@ -340,6 +350,141 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
     setDragOverColumn(null);
   };
 
+  // Cell editing handlers
+  const startEdit = (rowIndex: number, columnKey: string) => {
+    if (!editable) return;
+    
+    const column = columns.find(col => col.accessorKey === columnKey);
+    if (column?.editable === false) return;
+    
+    setEditingCell({ rowIndex, columnKey });
+    
+    // Check if there's a pending change for this cell, otherwise use current data value
+    const rowChanges = pendingChanges.get(rowIndex);
+    const currentValue = paginatedData[rowIndex][columnKey];
+    const valueToEdit = rowChanges?.[columnKey] ?? currentValue ?? '';
+    setEditValue(valueToEdit);
+  };
+
+  const saveEdit = (force: boolean = false) => {
+    if (!editingCell) return;
+    
+    // Don't save if we're in cancelled state (unless forced)
+    if (!force && editingCell === null) return;
+    
+    const { rowIndex, columnKey } = editingCell;
+    const globalIndex = (currentPage - 1) * pageSize + rowIndex;
+    const row = sortedData[globalIndex];
+    
+    // Update pending changes
+    const newPendingChanges = new Map(pendingChanges);
+    const rowChanges = newPendingChanges.get(rowIndex) || {};
+    rowChanges[columnKey] = editValue;
+    newPendingChanges.set(rowIndex, rowChanges);
+    setPendingChanges(newPendingChanges);
+    
+    // Call the legacy onCellChange callback if provided
+    if (schema.onCellChange) {
+      schema.onCellChange(globalIndex, columnKey, editValue, row);
+    }
+    
+    setEditingCell(null);
+    setEditValue('');
+  };
+
+  const cancelEdit = () => {
+    setEditingCell(null);
+    setEditValue('');
+  };
+
+  const saveRow = async (rowIndex: number) => {
+    const globalIndex = (currentPage - 1) * pageSize + rowIndex;
+    const row = sortedData[globalIndex];
+    const rowChanges = pendingChanges.get(rowIndex);
+    
+    if (!rowChanges || Object.keys(rowChanges).length === 0) return;
+    
+    setIsSaving(true);
+    try {
+      if (schema.onRowSave) {
+        await schema.onRowSave(globalIndex, rowChanges, row);
+      }
+      
+      // Clear pending changes for this row
+      const newPendingChanges = new Map(pendingChanges);
+      newPendingChanges.delete(rowIndex);
+      setPendingChanges(newPendingChanges);
+    } catch (error) {
+      console.error('Failed to save row:', error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const cancelRowChanges = (rowIndex: number) => {
+    const newPendingChanges = new Map(pendingChanges);
+    newPendingChanges.delete(rowIndex);
+    setPendingChanges(newPendingChanges);
+  };
+
+  const saveBatch = async () => {
+    if (pendingChanges.size === 0) return;
+    
+    setIsSaving(true);
+    try {
+      const changesToSave = Array.from(pendingChanges.entries()).map(([rowIndex, changes]) => {
+        const globalIndex = (currentPage - 1) * pageSize + rowIndex;
+        const row = sortedData[globalIndex];
+        return { rowIndex: globalIndex, changes, row };
+      });
+      
+      if (schema.onBatchSave) {
+        await schema.onBatchSave(changesToSave);
+      }
+      
+      // Clear all pending changes
+      setPendingChanges(new Map());
+    } catch (error) {
+      console.error('Failed to save batch:', error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const cancelAllChanges = () => {
+    setPendingChanges(new Map());
+  };
+
+  const handleCellKeyDown = (e: React.KeyboardEvent, rowIndex: number, columnKey: string) => {
+    if (!editable) return;
+    
+    const column = columns.find(col => col.accessorKey === columnKey);
+    if (column?.editable === false) return;
+    
+    if (e.key === 'Enter' && !editingCell) {
+      e.preventDefault();
+      startEdit(rowIndex, columnKey);
+    }
+  };
+
+  const handleEditKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      saveEdit(true);
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      cancelEdit();
+    }
+  };
+
+  // Auto-focus on edit input when entering edit mode
+  useEffect(() => {
+    if (editingCell && editInputRef.current) {
+      editInputRef.current.focus();
+      editInputRef.current.select();
+    }
+  }, [editingCell]);
+
   // Cleanup on unmount
   useEffect(() => {
     return () => {
@@ -361,16 +506,17 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
     return selectedRowIds.has(rowId);
   }) && !allPageRowsSelected;
 
-  const showToolbar = searchable || exportable || (selectable && selectedRowIds.size > 0);
+  const hasPendingChanges = pendingChanges.size > 0;
+  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..."
@@ -385,7 +531,33 @@ 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">
+                  {pendingChanges.size} row{pendingChanges.size > 1 ? 's' : ''} modified
+                </div>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={cancelAllChanges}
+                  disabled={isSaving}
+                >
+                  <X className="h-4 w-4 mr-2" />
+                  Cancel All
+                </Button>
+                <Button
+                  variant="default"
+                  size="sm"
+                  onClick={saveBatch}
+                  disabled={isSaving}
+                >
+                  <Save className="h-4 w-4 mr-2" />
+                  Save All ({pendingChanges.size})
+                </Button>
+              </>
+            )}
+            
             {exportable && (
               <Button
                 variant="outline"
@@ -407,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">
@@ -429,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 
@@ -441,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" />
@@ -485,24 +668,25 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                   const globalIndex = (currentPage - 1) * pageSize + rowIndex;
                   const rowId = getRowId(row, globalIndex);
                   const isSelected = selectedRowIds.has(rowId);
+                  const rowHasChanges = pendingChanges.has(rowIndex);
+                  const rowChanges = pendingChanges.get(rowIndex) || {};
                   
                   return (
                     <TableRow 
                       key={rowId} 
                       data-state={isSelected ? 'selected' : undefined}
                       className={cn(
-                        // @ts-expect-error - onRowClick might not be in schema type definition
-                        schema.onRowClick && "cursor-pointer"
+                        schema.onRowClick && "cursor-pointer",
+                        rowHasChanges && "bg-amber-50 dark:bg-amber-950/20",
+                        rowClassName && rowClassName(row, rowIndex)
                       )}
                       onClick={(e) => {
-                        // @ts-expect-error - onRowClick might not be in schema type definition
                         if (schema.onRowClick && !e.defaultPrevented) {
                            // Simple heuristic to avoid triggering on interactive elements if they didn't stop propagation
                            const target = e.target as HTMLElement;
                            if (target.closest('button') || target.closest('[role="checkbox"]') || target.closest('a')) {
                              return;
                            }
-                           // @ts-expect-error - onRowClick might not be in schema type definition
                            schema.onRowClick(row);
                         }
                       }}
@@ -517,37 +701,89 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                       )}
                       {columns.map((col, colIndex) => {
                         const columnWidth = columnWidths[col.accessorKey] || col.width;
+                        const originalValue = row[col.accessorKey];
+                        const hasPendingChange = rowChanges[col.accessorKey] !== undefined;
+                        const cellValue = hasPendingChange ? rowChanges[col.accessorKey] : originalValue;
+                        const isEditing = editingCell?.rowIndex === rowIndex && editingCell?.columnKey === col.accessorKey;
+                        const isEditable = editable && col.editable !== false;
+                        
                         return (
                           <TableCell 
                             key={colIndex} 
-                            className={col.cellClassName}
+                            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"
+                            )}
                             style={{
                               width: columnWidth,
                               minWidth: columnWidth,
                               maxWidth: columnWidth
                             }}
+                            onDoubleClick={() => isEditable && startEdit(rowIndex, col.accessorKey)}
+                            onKeyDown={(e) => handleCellKeyDown(e, rowIndex, col.accessorKey)}
+                            tabIndex={0}
                           >
-                            {row[col.accessorKey]}
+                            {isEditing ? (
+                              <Input
+                                ref={editInputRef}
+                                value={editValue}
+                                onChange={(e) => setEditValue(e.target.value)}
+                                onKeyDown={handleEditKeyDown}
+                                className="h-8 px-2 py-1"
+                              />
+                            ) : typeof col.cell === 'function' ? (
+                              col.cell(cellValue, row)
+                            ) : (
+                              cellValue
+                            )}
                           </TableCell>
                         );
                       })}
                       {rowActions && (
                         <TableCell className="text-right">
                           <div className="flex items-center justify-end gap-1">
-                            <Button
-                              variant="ghost"
-                              size="icon-sm"
-                              onClick={() => schema.onRowEdit?.(row)}
-                            >
-                              <Edit className="h-4 w-4" />
-                            </Button>
-                            <Button
-                              variant="ghost"
-                              size="icon-sm"
-                              onClick={() => schema.onRowDelete?.(row)}
-                            >
-                              <Trash2 className="h-4 w-4 text-destructive" />
-                            </Button>
+                            {rowHasChanges && (schema.onRowSave || schema.onBatchSave) ? (
+                              <>
+                                <Button
+                                  variant="ghost"
+                                  size="icon-sm"
+                                  onClick={() => cancelRowChanges(rowIndex)}
+                                  disabled={isSaving}
+                                  title="Cancel changes"
+                                >
+                                  <X className="h-4 w-4" />
+                                </Button>
+                                <Button
+                                  variant="ghost"
+                                  size="icon-sm"
+                                  onClick={() => saveRow(rowIndex)}
+                                  disabled={isSaving}
+                                  title="Save row"
+                                >
+                                  <Save className="h-4 w-4 text-green-600" />
+                                </Button>
+                              </>
+                            ) : (
+                              <>
+                                <Button
+                                  variant="ghost"
+                                  size="icon-sm"
+                                  onClick={() => schema.onRowEdit?.(row)}
+                                >
+                                  <Edit className="h-4 w-4" />
+                                </Button>
+                                <Button
+                                  variant="ghost"
+                                  size="icon-sm"
+                                  onClick={() => schema.onRowDelete?.(row)}
+                                >
+                                  <Trash2 className="h-4 w-4 text-destructive" />
+                                </Button>
+                              </>
+                            )}
                           </div>
                         </TableCell>
                       )}
@@ -568,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) => {
@@ -592,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

@@ -228,9 +228,17 @@ ComponentRegistry.register('form',
                   disabled: fieldDisabled = false,
                   validation = {},
                   condition,
+                  colSpan,
+                  hidden,
+                  widget,
+                  visibleOn,
+                  readonly,
                   ...fieldProps
                 } = field;
 
+                // Skip hidden fields
+                if (hidden) return null;
+
                 // Handle conditional rendering with null/undefined safety
                 if (condition) {
                   const watchField = condition.field;
@@ -264,6 +272,17 @@ ComponentRegistry.register('form',
                 // Use field.id or field.name for stable keys (never use index alone)
                 const fieldKey = field.id ?? name;
 
+                // Resolve the component type: prefer widget override, fallback to field type
+                const resolvedType = widget || type;
+
+                // colSpan classes for grid layout
+                const colSpanClass = colSpan && colSpan > 1
+                  ? colSpan === 2 ? 'col-span-2'
+                  : colSpan === 3 ? 'col-span-3'
+                  : colSpan >= 4 ? 'col-span-4'
+                  : ''
+                  : '';
+
                 return (
                   <FormField
                     key={fieldKey}
@@ -271,9 +290,9 @@ ComponentRegistry.register('form',
                     name={name}
                     rules={rules}
                     render={({ field: formField }) => (
-                      <FormItem>
+                      <FormItem className={colSpanClass || undefined}>
                         {label && (
-                          <FormLabel>
+                          <FormLabel className="text-xs sm:text-sm">
                             {label}
                             {required && (
                               <span className="text-destructive ml-1" aria-label="required">
@@ -283,8 +302,8 @@ ComponentRegistry.register('form',
                           </FormLabel>
                         )}
                         <FormControl>
-                          {/* Render the actual field component based on type */}
-                          {renderFieldComponent(type, {
+                          {/* Render the actual field component based on resolved type */}
+                          {renderFieldComponent(resolvedType, {
                             ...fieldProps,
                             // specialized fields needs raw metadata, but we should traverse down if it exists
                             // field is the field configuration loop variable
@@ -293,7 +312,7 @@ ComponentRegistry.register('form',
                             inputType: fieldProps.inputType,
                             options: fieldProps.options,
                             placeholder: fieldProps.placeholder,
-                            disabled: disabled || fieldDisabled || isSubmitting,
+                            disabled: disabled || fieldDisabled || readonly || isSubmitting,
                           })}
                         </FormControl>
                         {description && (
@@ -310,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>
@@ -325,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}
@@ -441,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
@@ -455,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}
         />
       );
@@ -467,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}
         />
       );
@@ -483,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/index.ts

@@ -15,3 +15,4 @@ import './feedback';
 import './overlay';
 import './disclosure';
 import './complex';
+import './action';

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)
         )}