feat: add ModalForm and SplitForm components with corresponding schemas and rendering logic

- Introduced ModalForm component for rendering forms in a modal dialog.
- Introduced SplitForm component for rendering forms in a resizable split-panel layout.
- Implemented loading, error handling, and data fetching for both components.
- Added tests for ModalForm and SplitForm to ensure correct rendering and functionality.
- Configured Vitest for testing with setup files and environment settings.

Author: hotlong

ROADMAP.md

@@ -18,7 +18,7 @@
 | @object-ui/fields | ✅ Complete | 95% | 36 widgets, 20+ cell renderers |
 | @object-ui/layout | 🟡 Partial | 60% | Basic layouts, missing responsive grid |
 | @object-ui/react | ✅ Complete | 100% | SchemaRenderer, hooks, providers |
-| @object-ui/plugin-form | 🟡 Partial | 30% | Only `simple` form, missing 5 variants |
+| @object-ui/plugin-form | ✅ Complete | 90% | All 6 variants (simple/tabbed/wizard/split/drawer/modal), FormField enhancements |
 | @object-ui/plugin-grid | ✅ Complete | 95% | Full ListView support |
 | @object-ui/plugin-aggrid | ✅ Complete | 100% | AG Grid integration |
 | @object-ui/plugin-kanban | ✅ Complete | 100% | Kanban board |
@@ -57,15 +57,15 @@ FormView.type: 'simple' | 'tabbed' | 'wizard' | 'split' | 'drawer' | 'modal'
 **Current State:** Only `simple` form implemented.
 
 **Missing Features:**
-- [ ] Tabbed Form - Fields organized in tab groups
-- [ ] Wizard Form - Multi-step form with navigation
-- [ ] Split Form - Side-by-side panels
-- [ ] Drawer Form - Slide-out form panel
-- [ ] Modal Form - Dialog-based form
-- [ ] Section/Group support (collapsible, columns per section)
-- [ ] FormField.colSpan support
-- [ ] FormField.dependsOn (field dependencies)
-- [ ] FormField.widget (custom widget override)
+- [x] Tabbed Form - Fields organized in tab groups
+- [x] Wizard Form - Multi-step form with navigation
+- [x] Split Form - Side-by-side panels (ResizablePanelGroup)
+- [x] Drawer Form - Slide-out form panel (Sheet)
+- [x] Modal Form - Dialog-based form (Dialog)
+- [x] Section/Group support (collapsible, columns per section)
+- [x] FormField.colSpan support
+- [ ] FormField.dependsOn (field dependencies) — type defined, runtime evaluation pending
+- [x] FormField.widget (custom widget override)
 
 ---
 

packages/components/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,14 +272,25 @@ 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}
                     control={form.control}
                     name={name}
                     rules={rules}
                     render={({ field: formField }) => (
-                      <FormItem>
+                      <FormItem className={colSpanClass || undefined}>
                         {label && (
                           <FormLabel>
                             {label}
@@ -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 && (