@qwickapps/react-framework 1.5.12 → 1.6.0

package/dist/index.js

@@ -108,6 +108,9 @@ var Warning$3 = require('@mui/icons-material/Warning');
 var classValidator = require('class-validator');
 var classTransformer = require('class-transformer');
 require('reflect-metadata');
+var ZoomInIcon = require('@mui/icons-material/ZoomIn');
+var ChevronLeftIcon = require('@mui/icons-material/ChevronLeft');
+var ChevronRightIcon = require('@mui/icons-material/ChevronRight');
 var reactRouterDom = require('react-router-dom');
 
 /**
@@ -18949,281 +18952,283 @@ function ArticleView({
     ...htmlProps,
     ...otherProps,
     ...styleProps,
-    // Modern article layout
-    maxWidth: '900px',
-    mx: 'auto',
-    px: {
-      xs: 2,
-      sm: 3,
-      md: 4
-    },
-    py: {
-      xs: 3,
-      md: 5
-    },
-    // Typography - Modern, readable hierarchy
-    '& h1, & h2, & h3, & h4, & h5, & h6': {
-      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
-      fontWeight: 700,
-      letterSpacing: '-0.02em',
-      color: 'var(--theme-text)',
-      scrollMarginTop: '100px',
-      // For anchor links
-      '&:first-of-type': {
-        mt: 0
-      }
-    },
-    '& h1': {
-      fontSize: {
-        xs: '2rem',
-        md: '2.75rem'
+    sx: {
+      // Modern article layout
+      maxWidth: '900px',
+      mx: 'auto',
+      px: {
+        xs: 2,
+        sm: 3,
+        md: 4
       },
-      lineHeight: 1.15,
-      mb: 3,
-      mt: 5
-    },
-    '& h2': {
-      fontSize: {
-        xs: '1.5rem',
-        md: '2rem'
+      py: {
+        xs: 3,
+        md: 5
       },
-      lineHeight: 1.25,
-      mb: 2.5,
-      mt: 5,
-      pb: 1.5,
-      borderBottom: '1px solid var(--theme-border-lighter)'
-    },
-    '& h3': {
-      fontSize: {
-        xs: '1.25rem',
-        md: '1.5rem'
+      // Typography - Modern, readable hierarchy
+      '& h1, & h2, & h3, & h4, & h5, & h6': {
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+        fontWeight: 700,
+        letterSpacing: '-0.02em',
+        color: 'var(--theme-text)',
+        scrollMarginTop: '100px',
+        // For anchor links
+        '&:first-of-type': {
+          mt: 0
+        }
       },
-      lineHeight: 1.3,
-      mb: 2,
-      mt: 4
-    },
-    '& h4': {
-      fontSize: {
-        xs: '1.1rem',
-        md: '1.25rem'
+      '& h1': {
+        fontSize: {
+          xs: '2rem',
+          md: '2.75rem'
+        },
+        lineHeight: 1.15,
+        mb: 3,
+        mt: 5
       },
-      lineHeight: 1.4,
-      mb: 1.5,
-      mt: 3,
-      color: 'var(--theme-text)',
-      fontWeight: 600
-    },
-    // Body text - Optimized for reading
-    '& p': {
-      fontSize: {
-        xs: '1rem',
-        md: '1.0625rem'
+      '& h2': {
+        fontSize: {
+          xs: '1.5rem',
+          md: '2rem'
+        },
+        lineHeight: 1.25,
+        mb: 2.5,
+        mt: 5,
+        pb: 1.5,
+        borderBottom: '1px solid var(--theme-border-lighter)'
       },
-      lineHeight: 1.75,
-      mb: 2,
-      color: 'var(--theme-text)',
-      fontFamily: 'Georgia, "Times New Roman", serif',
-      '&:last-child': {
-        mb: 0
-      }
-    },
-    // Lists - Better visual hierarchy
-    '& ul, & ol': {
-      mb: 3,
-      pl: {
-        xs: 3,
-        md: 4
+      '& h3': {
+        fontSize: {
+          xs: '1.25rem',
+          md: '1.5rem'
+        },
+        lineHeight: 1.3,
+        mb: 2,
+        mt: 4
+      },
+      '& h4': {
+        fontSize: {
+          xs: '1.1rem',
+          md: '1.25rem'
+        },
+        lineHeight: 1.4,
+        mb: 1.5,
+        mt: 3,
+        color: 'var(--theme-text)',
+        fontWeight: 600
       },
-      '& li': {
-        mb: 1.25,
-        lineHeight: 1.7,
+      // Body text - Optimized for reading
+      '& p': {
         fontSize: {
           xs: '1rem',
           md: '1.0625rem'
         },
+        lineHeight: 1.75,
+        mb: 2,
         color: 'var(--theme-text)',
         fontFamily: 'Georgia, "Times New Roman", serif',
-        '&::marker': {
-          color: 'var(--theme-primary)',
-          fontWeight: 600
-        },
-        '& p': {
-          mb: 0.5
+        '&:last-child': {
+          mb: 0
         }
       },
+      // Lists - Better visual hierarchy
       '& ul, & ol': {
-        mt: 1,
-        mb: 0
-      }
-    },
-    // Code blocks - Modern syntax highlighting style
-    '& pre': {
-      backgroundColor: 'var(--theme-surface-elevated)',
-      color: 'var(--theme-text)',
-      borderRadius: 'var(--theme-border-radius)',
-      p: {
-        xs: 2,
-        md: 3
-      },
-      mb: 3,
-      overflow: 'auto',
-      fontSize: '0.9rem',
-      lineHeight: 1.6,
-      fontFamily: '"Fira Code", "Cascadia Code", "SF Mono", Monaco, Consolas, monospace',
-      border: '1px solid var(--theme-border-light)',
-      boxShadow: 'var(--theme-elevation-2)',
-      '& code': {
-        backgroundColor: 'transparent',
-        color: 'inherit',
-        padding: 0,
-        fontSize: 'inherit',
-        fontFamily: 'inherit'
-      }
-    },
-    // Inline code - Subtle highlight
-    '& code': {
-      backgroundColor: 'var(--theme-code-bg)',
-      color: 'var(--theme-error)',
-      padding: '0.2em 0.4em',
-      borderRadius: 'var(--theme-border-radius-small)',
-      fontSize: '0.9em',
-      fontFamily: '"Fira Code", "Cascadia Code", "SF Mono", Monaco, Consolas, monospace',
-      fontWeight: 500
-    },
-    // Blockquotes - Elegant callouts
-    '& blockquote': {
-      borderLeft: '4px solid var(--theme-primary)',
-      backgroundColor: 'var(--theme-surface-variant)',
-      borderRadius: `0 var(--theme-border-radius-small) var(--theme-border-radius-small) 0`,
-      pl: 3,
-      pr: 3,
-      py: 2.5,
-      my: 4,
-      ml: 0,
-      mr: 0,
-      '& p': {
-        fontSize: {
-          xs: '1.05rem',
-          md: '1.125rem'
+        mb: 3,
+        pl: {
+          xs: 3,
+          md: 4
         },
-        fontStyle: 'italic',
-        lineHeight: 1.6,
-        mb: 1.5,
-        color: 'var(--theme-text)',
-        '&:last-child': {
+        '& li': {
+          mb: 1.25,
+          lineHeight: 1.7,
+          fontSize: {
+            xs: '1rem',
+            md: '1.0625rem'
+          },
+          color: 'var(--theme-text)',
+          fontFamily: 'Georgia, "Times New Roman", serif',
+          '&::marker': {
+            color: 'var(--theme-primary)',
+            fontWeight: 600
+          },
+          '& p': {
+            mb: 0.5
+          }
+        },
+        '& ul, & ol': {
+          mt: 1,
           mb: 0
         }
       },
-      '& cite': {
-        display: 'block',
-        fontSize: '0.9rem',
-        fontStyle: 'normal',
-        fontWeight: 500,
+      // Code blocks - Modern syntax highlighting style
+      '& pre': {
+        backgroundColor: 'var(--theme-surface-elevated)',
         color: 'var(--theme-text)',
-        mt: 1,
-        '&::before': {
-          content: '"— "',
-          color: 'var(--theme-primary)'
+        borderRadius: 'var(--theme-border-radius)',
+        p: {
+          xs: 2,
+          md: 3
+        },
+        mb: 3,
+        overflow: 'auto',
+        fontSize: '0.9rem',
+        lineHeight: 1.6,
+        fontFamily: '"Fira Code", "Cascadia Code", "SF Mono", Monaco, Consolas, monospace',
+        border: '1px solid var(--theme-border-light)',
+        boxShadow: 'var(--theme-elevation-2)',
+        '& code': {
+          backgroundColor: 'transparent',
+          color: 'inherit',
+          padding: 0,
+          fontSize: 'inherit',
+          fontFamily: 'inherit'
         }
-      }
-    },
-    // Tables - Clean, modern design
-    '& table': {
-      width: '100%',
-      borderCollapse: 'separate',
-      borderSpacing: 0,
-      mb: 3,
-      fontSize: '0.95rem',
-      overflow: 'hidden',
-      borderRadius: 'var(--theme-border-radius-small)',
-      border: '1px solid var(--theme-border-light)',
-      '& thead': {
+      },
+      // Inline code - Subtle highlight
+      '& code': {
+        backgroundColor: 'var(--theme-code-bg)',
+        color: 'var(--theme-error)',
+        padding: '0.2em 0.4em',
+        borderRadius: 'var(--theme-border-radius-small)',
+        fontSize: '0.9em',
+        fontFamily: '"Fira Code", "Cascadia Code", "SF Mono", Monaco, Consolas, monospace',
+        fontWeight: 500
+      },
+      // Blockquotes - Elegant callouts
+      '& blockquote': {
+        borderLeft: '4px solid var(--theme-primary)',
         backgroundColor: 'var(--theme-surface-variant)',
-        '& th': {
-          padding: '12px 16px',
-          textAlign: 'left',
-          fontWeight: 600,
+        borderRadius: `0 var(--theme-border-radius-small) var(--theme-border-radius-small) 0`,
+        pl: 3,
+        pr: 3,
+        py: 2.5,
+        my: 4,
+        ml: 0,
+        mr: 0,
+        '& p': {
+          fontSize: {
+            xs: '1.05rem',
+            md: '1.125rem'
+          },
+          fontStyle: 'italic',
+          lineHeight: 1.6,
+          mb: 1.5,
           color: 'var(--theme-text)',
-          borderBottom: '2px solid var(--theme-border-main)',
-          fontSize: '0.875rem',
-          textTransform: 'uppercase',
-          letterSpacing: '0.05em'
+          '&:last-child': {
+            mb: 0
+          }
+        },
+        '& cite': {
+          display: 'block',
+          fontSize: '0.9rem',
+          fontStyle: 'normal',
+          fontWeight: 500,
+          color: 'var(--theme-text)',
+          mt: 1,
+          '&::before': {
+            content: '"— "',
+            color: 'var(--theme-primary)'
+          }
         }
       },
-      '& tbody': {
-        '& tr': {
-          borderBottom: '1px solid var(--theme-border-lighter)',
-          transition: 'background-color 0.2s ease',
-          '&:hover': {
-            backgroundColor: 'var(--theme-surface-variant)'
+      // Tables - Clean, modern design
+      '& table': {
+        width: '100%',
+        borderCollapse: 'separate',
+        borderSpacing: 0,
+        mb: 3,
+        fontSize: '0.95rem',
+        overflow: 'hidden',
+        borderRadius: 'var(--theme-border-radius-small)',
+        border: '1px solid var(--theme-border-light)',
+        '& thead': {
+          backgroundColor: 'var(--theme-surface-variant)',
+          '& th': {
+            padding: '12px 16px',
+            textAlign: 'left',
+            fontWeight: 600,
+            color: 'var(--theme-text)',
+            borderBottom: '2px solid var(--theme-border-main)',
+            fontSize: '0.875rem',
+            textTransform: 'uppercase',
+            letterSpacing: '0.05em'
+          }
+        },
+        '& tbody': {
+          '& tr': {
+            borderBottom: '1px solid var(--theme-border-lighter)',
+            transition: 'background-color 0.2s ease',
+            '&:hover': {
+              backgroundColor: 'var(--theme-surface-variant)'
+            },
+            '&:last-child': {
+              borderBottom: 'none'
+            }
           },
-          '&:last-child': {
-            borderBottom: 'none'
+          '& td': {
+            padding: '12px 16px',
+            color: 'var(--theme-text)',
+            lineHeight: 1.6
           }
+        }
+      },
+      // Text emphasis
+      '& strong': {
+        fontWeight: 700,
+        color: 'var(--theme-text)'
+      },
+      '& em': {
+        fontStyle: 'italic',
+        color: 'var(--theme-text)'
+      },
+      // Links - Modern, accessible
+      '& a': {
+        color: 'var(--theme-primary)',
+        textDecoration: 'none',
+        fontWeight: 500,
+        borderBottom: '1px solid transparent',
+        transition: 'border-color 0.2s ease',
+        '&:hover': {
+          borderBottomColor: 'var(--theme-primary)'
         },
-        '& td': {
-          padding: '12px 16px',
-          color: 'var(--theme-text)',
-          lineHeight: 1.6
+        '&:focus-visible': {
+          outline: '2px solid var(--theme-primary)',
+          outlineOffset: '2px',
+          borderRadius: '2px'
         }
-      }
-    },
-    // Text emphasis
-    '& strong': {
-      fontWeight: 700,
-      color: 'var(--theme-text)'
-    },
-    '& em': {
-      fontStyle: 'italic',
-      color: 'var(--theme-text)'
-    },
-    // Links - Modern, accessible
-    '& a': {
-      color: 'var(--theme-primary)',
-      textDecoration: 'none',
-      fontWeight: 500,
-      borderBottom: '1px solid transparent',
-      transition: 'border-color 0.2s ease',
-      '&:hover': {
-        borderBottomColor: 'var(--theme-primary)'
       },
-      '&:focus-visible': {
-        outline: '2px solid var(--theme-primary)',
-        outlineOffset: '2px',
-        borderRadius: '2px'
-      }
-    },
-    // Images and figures
-    '& img': {
-      maxWidth: '100%',
-      height: 'auto',
-      borderRadius: 'var(--theme-border-radius-small)',
-      display: 'block',
-      my: 3
-    },
-    '& figure': {
-      margin: '3rem 0',
+      // Images and figures
       '& img': {
         maxWidth: '100%',
         height: 'auto',
         borderRadius: 'var(--theme-border-radius-small)',
-        boxShadow: 'var(--theme-elevation-2)'
+        display: 'block',
+        my: 3
       },
-      '& figcaption': {
-        textAlign: 'center',
-        fontSize: '0.875rem',
-        color: 'var(--theme-text)',
-        mt: 1.5,
-        fontStyle: 'italic'
-      }
-    },
-    // Horizontal rules
-    '& hr': {
-      border: 'none',
-      borderTop: '1px solid var(--theme-border-light)',
-      my: 5
+      '& figure': {
+        margin: '3rem 0',
+        '& img': {
+          maxWidth: '100%',
+          height: 'auto',
+          borderRadius: 'var(--theme-border-radius-small)',
+          boxShadow: 'var(--theme-elevation-2)'
+        },
+        '& figcaption': {
+          textAlign: 'center',
+          fontSize: '0.875rem',
+          color: 'var(--theme-text)',
+          mt: 1.5,
+          fontStyle: 'italic'
+        }
+      },
+      // Horizontal rules
+      '& hr': {
+        border: 'none',
+        borderTop: '1px solid var(--theme-border-light)',
+        my: 5
+      },
+      ...styleProps.sx
     },
-    ...styleProps.sx,
     children: html
   });
 }
@@ -21417,105 +21422,734 @@ function ProductCard(props) {
   });
 }
 
-// Default render function based on component type
-const getDefaultRenderItem = (renderComponent = 'ProductCard', itemProps = {}) => {
-  return (item, index) => {
-    const key = item?.id || item?.key || index;
-    switch (renderComponent) {
-      case 'ProductCard':
-        return jsxRuntime.jsx(ProductCard, {
-          product: item,
-          ...itemProps
-        }, key);
-      case 'FeatureCard':
-        return jsxRuntime.jsx(FeatureCard, {
-          feature: item,
-          ...itemProps
-        }, key);
-      case 'Custom':
-      default:
-        // For custom components, assume the item contains the component data
-        return jsxRuntime.jsx("div", {
-          children: JSON.stringify(item)
-        }, key);
-    }
-  };
-};
 // View component - handles the actual rendering
-function CardListGridView({
-  items = [],
-  renderItem,
-  renderComponent = 'ProductCard',
-  itemProps = {},
-  columns = 2,
-  spacing = 'large',
-  equalHeight = true,
+function ImageGalleryView({
+  images = [],
+  productName,
+  variant = 'thumbnails',
+  thumbnailPosition = 'left',
+  aspectRatio = '1',
+  showZoom = true,
+  maxImages,
+  dataSource,
+  bindingOptions,
   ...restProps
 }) {
-  const {
-    styleProps,
-    htmlProps,
-    restProps: otherProps
-  } = useBaseProps(restProps);
-  // Return null if no items and no render function
-  if (!items.length && !renderItem) {
-    return null;
-  }
-  // Use provided renderItem or create default based on renderComponent
-  const actualRenderItem = renderItem || getDefaultRenderItem(renderComponent, itemProps);
-  return jsxRuntime.jsx(GridLayout, {
-    columns: columns,
-    spacing: spacing,
-    equalHeight: equalHeight,
-    ...htmlProps,
-    ...styleProps,
-    ...otherProps,
-    children: items.map((item, index) => actualRenderItem(item, index))
-  });
-}
-// Main component with data binding support
-function CardListGrid(props) {
-  const {
-    dataSource,
-    bindingOptions,
-    ...restProps
-  } = props;
-  // Always call hooks unconditionally
-  const result = useDataBinding(dataSource || '', restProps);
-  // If no dataSource, use traditional props
-  if (!dataSource) {
-    return jsxRuntime.jsx(CardListGridView, {
-      ...restProps
-    });
-  }
-  // Use data binding result
-  const {
-    loading,
-    error,
-    ...cardListGridProps
-  } = result;
-  // Show loading state
-  if (loading) {
-    return jsxRuntime.jsx(GridLayout, {
-      columns: restProps.columns || 2,
-      spacing: restProps.spacing || 'large',
-      style: {
-        textAlign: 'center',
-        padding: '2rem'
+  const [selectedIndex, setSelectedIndex] = React.useState(0);
+  const [zoomOpen, setZoomOpen] = React.useState(false);
+  // Limit images if maxImages is specified
+  const displayImages = maxImages ? images.slice(0, maxImages) : images;
+  const handlePrevious = React.useCallback(() => {
+    setSelectedIndex(prev => prev === 0 ? displayImages.length - 1 : prev - 1);
+  }, [displayImages.length]);
+  const handleNext = React.useCallback(() => {
+    setSelectedIndex(prev => prev === displayImages.length - 1 ? 0 : prev + 1);
+  }, [displayImages.length]);
+  const handleThumbnailClick = React.useCallback(index => {
+    setSelectedIndex(index);
+  }, []);
+  const handleZoomOpen = React.useCallback(() => {
+    if (showZoom) {
+      setZoomOpen(true);
+    }
+  }, [showZoom]);
+  const handleZoomClose = React.useCallback(() => {
+    setZoomOpen(false);
+  }, []);
+  // Handle empty images
+  if (!displayImages || displayImages.length === 0) {
+    return jsxRuntime.jsx(material.Box, {
+      ...restProps,
+      sx: {
+        backgroundColor: 'var(--theme-surface-variant)',
+        borderRadius: 'var(--theme-border-radius)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        aspectRatio,
+        minHeight: 400
       },
-      children: jsxRuntime.jsx("div", {
-        children: "Loading..."
+      children: jsxRuntime.jsx(material.Skeleton, {
+        variant: "rectangular",
+        width: "100%",
+        height: "100%",
+        sx: {
+          borderRadius: 'var(--theme-border-radius)'
+        }
       })
     });
   }
-  if (error) {
-    console.error('Error loading card list grid:', error);
-    {
-      return jsxRuntime.jsx(GridLayout, {
-        columns: restProps.columns || 2,
-        spacing: restProps.spacing || 'large',
+  const currentImage = displayImages[selectedIndex];
+  // Render thumbnails
+  const renderThumbnails = () => jsxRuntime.jsx(material.Box, {
+    sx: {
+      display: 'flex',
+      flexDirection: thumbnailPosition === 'left' || thumbnailPosition === 'right' ? 'column' : 'row',
+      gap: 1,
+      overflow: 'auto',
+      maxHeight: thumbnailPosition === 'left' || thumbnailPosition === 'right' ? 500 : 'auto',
+      maxWidth: thumbnailPosition === 'bottom' ? '100%' : 'auto'
+    },
+    children: displayImages.map((image, index) => jsxRuntime.jsx(material.Box, {
+      onClick: () => handleThumbnailClick(index),
+      sx: {
+        width: 80,
+        height: 80,
+        flexShrink: 0,
+        cursor: 'pointer',
+        border: '2px solid',
+        borderColor: index === selectedIndex ? 'var(--theme-primary)' : 'var(--theme-border-main)',
+        borderRadius: 'var(--theme-border-radius-small)',
+        overflow: 'hidden',
+        transition: 'all 0.2s ease-in-out',
+        '&:hover': {
+          borderColor: 'var(--theme-border-emphasis)'
+        }
+      },
+      children: jsxRuntime.jsx("img", {
+        src: image.thumbnail || image.url,
+        alt: `${productName} thumbnail ${index + 1}`,
         style: {
-          textAlign: 'center',
+          width: '100%',
+          height: '100%',
+          objectFit: 'cover'
+        }
+      })
+    }, index))
+  });
+  // Render main image container
+  const renderMainImage = () => jsxRuntime.jsxs(material.Box, {
+    sx: {
+      position: 'relative',
+      width: '100%',
+      backgroundColor: 'var(--theme-surface)',
+      borderRadius: 'var(--theme-border-radius)',
+      border: '1px solid var(--theme-border-main)',
+      overflow: 'hidden',
+      aspectRatio
+    },
+    children: [jsxRuntime.jsx("img", {
+      src: currentImage.url,
+      alt: currentImage.alt || `${productName} - Image ${selectedIndex + 1}`,
+      style: {
+        width: '100%',
+        height: '100%',
+        objectFit: 'contain',
+        display: 'block'
+      }
+    }), showZoom && jsxRuntime.jsx(material.IconButton, {
+      onClick: handleZoomOpen,
+      sx: {
+        position: 'absolute',
+        top: 8,
+        right: 8,
+        backgroundColor: 'var(--theme-surface)',
+        color: 'var(--theme-text-primary)',
+        '&:hover': {
+          backgroundColor: 'var(--theme-surface-variant)'
+        }
+      },
+      "aria-label": "Zoom image",
+      children: jsxRuntime.jsx(ZoomInIcon, {})
+    }), variant === 'carousel' && displayImages.length > 1 && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(material.IconButton, {
+        onClick: handlePrevious,
+        sx: {
+          position: 'absolute',
+          left: 8,
+          top: '50%',
+          transform: 'translateY(-50%)',
+          backgroundColor: 'var(--theme-surface)',
+          color: 'var(--theme-text-primary)',
+          '&:hover': {
+            backgroundColor: 'var(--theme-surface-variant)'
+          }
+        },
+        "aria-label": "Previous image",
+        children: jsxRuntime.jsx(ChevronLeftIcon, {})
+      }), jsxRuntime.jsx(material.IconButton, {
+        onClick: handleNext,
+        sx: {
+          position: 'absolute',
+          right: 8,
+          top: '50%',
+          transform: 'translateY(-50%)',
+          backgroundColor: 'var(--theme-surface)',
+          color: 'var(--theme-text-primary)',
+          '&:hover': {
+            backgroundColor: 'var(--theme-surface-variant)'
+          }
+        },
+        "aria-label": "Next image",
+        children: jsxRuntime.jsx(ChevronRightIcon, {})
+      })]
+    })]
+  });
+  // Render zoom modal
+  const renderZoomModal = () => jsxRuntime.jsx(material.Modal, {
+    open: zoomOpen,
+    onClose: handleZoomClose,
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: 'rgba(0, 0, 0, 0.9)'
+    },
+    children: jsxRuntime.jsxs(material.Box, {
+      sx: {
+        position: 'relative',
+        maxWidth: '90vw',
+        maxHeight: '90vh',
+        outline: 'none'
+      },
+      children: [jsxRuntime.jsx(material.IconButton, {
+        onClick: handleZoomClose,
+        sx: {
+          position: 'absolute',
+          top: -40,
+          right: 0,
+          color: 'white',
+          '&:hover': {
+            backgroundColor: 'rgba(255, 255, 255, 0.1)'
+          }
+        },
+        "aria-label": "Close zoom",
+        children: jsxRuntime.jsx(Close, {})
+      }), jsxRuntime.jsx("img", {
+        src: currentImage.url,
+        alt: currentImage.alt || `${productName} - Zoomed view`,
+        style: {
+          maxWidth: '100%',
+          maxHeight: '90vh',
+          objectFit: 'contain'
+        }
+      })]
+    })
+  });
+  // Render thumbnails variant
+  if (variant === 'thumbnails') {
+    return jsxRuntime.jsxs(material.Box, {
+      ...restProps,
+      children: [jsxRuntime.jsxs(material.Box, {
+        sx: {
+          display: 'flex',
+          flexDirection: {
+            xs: 'column',
+            sm: thumbnailPosition === 'bottom' ? 'column' : 'row'
+          },
+          gap: 2
+        },
+        children: [thumbnailPosition === 'left' && jsxRuntime.jsx(material.Box, {
+          sx: {
+            order: {
+              xs: 2,
+              sm: 1
+            }
+          },
+          children: renderThumbnails()
+        }), jsxRuntime.jsx(material.Box, {
+          sx: {
+            flex: 1,
+            order: {
+              xs: 1,
+              sm: thumbnailPosition === 'left' ? 2 : 1
+            }
+          },
+          children: renderMainImage()
+        }), thumbnailPosition === 'right' && jsxRuntime.jsx(material.Box, {
+          sx: {
+            order: {
+              xs: 2,
+              sm: 2
+            }
+          },
+          children: renderThumbnails()
+        }), thumbnailPosition === 'bottom' && jsxRuntime.jsx(material.Box, {
+          sx: {
+            order: 2
+          },
+          children: renderThumbnails()
+        })]
+      }), renderZoomModal()]
+    });
+  }
+  // Render carousel variant
+  if (variant === 'carousel') {
+    return jsxRuntime.jsxs(material.Box, {
+      ...restProps,
+      children: [renderMainImage(), displayImages.length > 1 && jsxRuntime.jsx(material.Box, {
+        sx: {
+          display: 'flex',
+          justifyContent: 'center',
+          gap: 1,
+          mt: 2
+        },
+        children: displayImages.map((_, index) => jsxRuntime.jsx(material.Box, {
+          onClick: () => handleThumbnailClick(index),
+          sx: {
+            width: 10,
+            height: 10,
+            borderRadius: '50%',
+            backgroundColor: index === selectedIndex ? 'var(--theme-primary)' : 'var(--theme-border-main)',
+            cursor: 'pointer',
+            transition: 'all 0.2s ease-in-out',
+            '&:hover': {
+              backgroundColor: index === selectedIndex ? 'var(--theme-primary)' : 'var(--theme-border-emphasis)'
+            }
+          }
+        }, index))
+      }), renderZoomModal()]
+    });
+  }
+  // Render grid variant
+  if (variant === 'grid') {
+    return jsxRuntime.jsxs(material.Box, {
+      ...restProps,
+      children: [jsxRuntime.jsx(material.Grid, {
+        container: true,
+        spacing: 2,
+        children: displayImages.map((image, index) => jsxRuntime.jsx(material.Grid, {
+          item: true,
+          xs: 6,
+          sm: 4,
+          md: 3,
+          children: jsxRuntime.jsx(material.Box, {
+            onClick: () => {
+              setSelectedIndex(index);
+              handleZoomOpen();
+            },
+            sx: {
+              width: '100%',
+              aspectRatio: '1',
+              borderRadius: 'var(--theme-border-radius)',
+              border: '1px solid var(--theme-border-main)',
+              overflow: 'hidden',
+              cursor: showZoom ? 'pointer' : 'default',
+              transition: 'all 0.2s ease-in-out',
+              '&:hover': {
+                borderColor: 'var(--theme-border-emphasis)',
+                boxShadow: 'var(--theme-elevation-1)'
+              }
+            },
+            children: jsxRuntime.jsx("img", {
+              src: image.url,
+              alt: image.alt || `${productName} - Image ${index + 1}`,
+              style: {
+                width: '100%',
+                height: '100%',
+                objectFit: 'cover'
+              }
+            })
+          })
+        }, index))
+      }), renderZoomModal()]
+    });
+  }
+  return null;
+}
+// Create the serializable ImageGallery component using the factory
+const ImageGallery = createSerializableView({
+  tagName: 'ImageGallery',
+  version: '1.0.0',
+  role: 'view',
+  View: ImageGalleryView
+});
+
+// View component
+function OptionSelectorView({
+  options = [],
+  selectedOption,
+  onOptionSelect,
+  displayMode = 'text',
+  variant = 'grid',
+  layout = 'wrap',
+  visualSize = 'medium',
+  showLabel = false,
+  disabled = false,
+  label = 'Select Option',
+  dataSource,
+  bindingOptions,
+  ...restProps
+}) {
+  const handleOptionClick = React.useCallback((optionId, available) => {
+    if (!disabled && available && onOptionSelect) {
+      onOptionSelect(optionId);
+    }
+  }, [disabled, onOptionSelect]);
+  const handleDropdownChange = React.useCallback(event => {
+    if (onOptionSelect) {
+      onOptionSelect(event.target.value);
+    }
+  }, [onOptionSelect]);
+  // Get visual size in pixels
+  const getSizePixels = () => {
+    if (displayMode === 'text') return 48;
+    switch (visualSize) {
+      case 'small':
+        return 32;
+      case 'large':
+        return 56;
+      case 'medium':
+      default:
+        return 44;
+    }
+  };
+  const sizeInPx = getSizePixels();
+  // Render nothing if no options
+  if (!options || options.length === 0) {
+    return null;
+  }
+  // Dropdown variant
+  if (variant === 'dropdown') {
+    return jsxRuntime.jsxs(material.FormControl, {
+      fullWidth: true,
+      disabled: disabled,
+      ...restProps,
+      sx: {
+        '& .MuiOutlinedInput-root': {
+          '& fieldset': {
+            borderColor: 'var(--theme-border-main)'
+          },
+          '&:hover fieldset': {
+            borderColor: 'var(--theme-border-emphasis)'
+          },
+          '&.Mui-focused fieldset': {
+            borderColor: 'var(--theme-primary)'
+          }
+        },
+        '& .MuiInputLabel-root': {
+          color: 'var(--theme-text-secondary)',
+          '&.Mui-focused': {
+            color: 'var(--theme-primary)'
+          }
+        }
+      },
+      children: [jsxRuntime.jsx(material.InputLabel, {
+        children: label
+      }), jsxRuntime.jsx(material.Select, {
+        value: selectedOption || '',
+        onChange: handleDropdownChange,
+        label: label,
+        sx: {
+          backgroundColor: 'var(--theme-surface)',
+          color: 'var(--theme-text-primary)'
+        },
+        children: options.map(option => jsxRuntime.jsxs(material.MenuItem, {
+          value: option.id,
+          disabled: !option.available,
+          sx: {
+            color: option.available ? 'var(--theme-text-primary)' : 'var(--theme-text-disabled)'
+          },
+          children: [displayMode === 'color' && option.hexValue && jsxRuntime.jsx(material.Box, {
+            sx: {
+              width: 20,
+              height: 20,
+              mr: 1,
+              borderRadius: '50%',
+              backgroundColor: option.hexValue,
+              border: '1px solid var(--theme-border-main)',
+              backgroundImage: option.imageUrl ? `url(${option.imageUrl})` : undefined,
+              backgroundSize: 'cover'
+            }
+          }), option.label, !option.available && ' (Out of stock)', option.price && option.price !== 0 && ` (+$${(option.price / 100).toFixed(2)})`]
+        }, option.id))
+      })]
+    });
+  }
+  // Buttons/Grid variant with visual modes
+  const getLayoutStyles = () => {
+    if (variant === 'grid') {
+      const minWidth = displayMode === 'text' ? 60 : sizeInPx + 16;
+      return {
+        display: 'grid',
+        gridTemplateColumns: `repeat(auto-fill, minmax(${minWidth}px, 1fr))`,
+        gap: displayMode === 'text' ? 1 : 2
+      };
+    }
+    return {
+      display: 'flex',
+      flexDirection: layout === 'vertical' ? 'column' : 'row',
+      flexWrap: layout === 'wrap' ? 'wrap' : 'nowrap',
+      gap: 1
+    };
+  };
+  return jsxRuntime.jsxs(material.Box, {
+    ...restProps,
+    children: [label && jsxRuntime.jsx(material.Box, {
+      component: "label",
+      sx: {
+        display: 'block',
+        mb: 1,
+        fontSize: '0.875rem',
+        fontWeight: 500,
+        color: 'var(--theme-text-primary)'
+      },
+      children: label
+    }), jsxRuntime.jsx(material.Box, {
+      sx: getLayoutStyles(),
+      children: options.map(option => {
+        const isSelected = selectedOption === option.id;
+        const isAvailable = option.available;
+        // Text mode - render as buttons
+        if (displayMode === 'text') {
+          const button = jsxRuntime.jsx(material.Button, {
+            onClick: () => handleOptionClick(option.id, isAvailable),
+            disabled: disabled || !isAvailable,
+            variant: isSelected ? 'contained' : 'outlined',
+            sx: {
+              minWidth: variant === 'grid' ? '60px' : '80px',
+              height: `${sizeInPx}px`,
+              borderRadius: 'var(--theme-border-radius-small)',
+              textTransform: 'uppercase',
+              fontWeight: 600,
+              fontSize: '0.875rem',
+              backgroundColor: isSelected ? 'var(--theme-primary)' : 'var(--theme-surface)',
+              color: isSelected ? 'var(--theme-text-on-primary)' : 'var(--theme-text-primary)',
+              borderColor: isSelected ? 'var(--theme-primary)' : 'var(--theme-border-main)',
+              borderWidth: '2px',
+              borderStyle: 'solid',
+              '&.Mui-disabled': {
+                backgroundColor: 'var(--theme-surface-variant)',
+                color: 'var(--theme-text-disabled)',
+                borderColor: 'var(--theme-border-light)',
+                opacity: 0.5,
+                textDecoration: 'line-through'
+              },
+              '&:hover:not(.Mui-disabled)': {
+                backgroundColor: !isSelected ? 'var(--theme-surface-variant)' : undefined,
+                borderColor: !isSelected ? 'var(--theme-border-emphasis)' : undefined,
+                boxShadow: 'var(--theme-elevation-1)'
+              },
+              transition: 'all 0.2s ease-in-out'
+            },
+            children: option.label
+          }, option.id);
+          return !isAvailable ? jsxRuntime.jsx(material.Tooltip, {
+            title: "Not available",
+            arrow: true,
+            sx: {
+              '& .MuiTooltip-tooltip': {
+                backgroundColor: 'var(--theme-surface)',
+                color: 'var(--theme-text-primary)',
+                border: '1px solid var(--theme-border-main)',
+                boxShadow: 'var(--theme-elevation-2)'
+              },
+              '& .MuiTooltip-arrow': {
+                color: 'var(--theme-surface)'
+              }
+            },
+            children: jsxRuntime.jsx("span", {
+              children: button
+            })
+          }, option.id) : button;
+        }
+        // Color/Image mode - render as visual swatches
+        const swatchContent = jsxRuntime.jsxs(material.Box, {
+          onClick: () => handleOptionClick(option.id, isAvailable),
+          sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: 0.5,
+            cursor: disabled || !isAvailable ? 'not-allowed' : 'pointer',
+            opacity: disabled || !isAvailable ? 0.5 : 1
+          },
+          children: [jsxRuntime.jsx(material.Box, {
+            sx: {
+              position: 'relative',
+              width: sizeInPx,
+              height: sizeInPx,
+              borderRadius: displayMode === 'color' ? '50%' : 'var(--theme-border-radius-small)',
+              backgroundColor: option.hexValue || 'var(--theme-surface-variant)',
+              backgroundImage: option.imageUrl ? `url(${option.imageUrl})` : undefined,
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+              border: '2px solid',
+              borderColor: isSelected ? 'var(--theme-primary)' : 'var(--theme-border-main)',
+              boxShadow: isSelected ? 'var(--theme-elevation-2)' : 'none',
+              transition: 'all 0.2s ease-in-out',
+              ...(isAvailable && !disabled && !isSelected && {
+                '&:hover': {
+                  borderColor: 'var(--theme-border-emphasis)',
+                  boxShadow: 'var(--theme-elevation-1)',
+                  transform: 'scale(1.05)'
+                }
+              }),
+              ...(!isAvailable && {
+                '&::after': {
+                  content: '""',
+                  position: 'absolute',
+                  top: '50%',
+                  left: '10%',
+                  right: '10%',
+                  height: '2px',
+                  backgroundColor: 'var(--theme-border-emphasis)',
+                  transform: 'translateY(-50%) rotate(-45deg)'
+                }
+              })
+            },
+            children: isSelected && jsxRuntime.jsx(material.Box, {
+              sx: {
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: '100%',
+                height: '100%',
+                borderRadius: 'inherit',
+                backgroundColor: 'rgba(0, 0, 0, 0.3)'
+              },
+              children: jsxRuntime.jsx(Check, {
+                sx: {
+                  color: 'white',
+                  fontSize: sizeInPx * 0.5,
+                  filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.5))'
+                }
+              })
+            })
+          }), showLabel && jsxRuntime.jsx(material.Box, {
+            sx: {
+              fontSize: '0.75rem',
+              color: 'var(--theme-text-secondary)',
+              textAlign: 'center',
+              maxWidth: sizeInPx + 16,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap'
+            },
+            children: option.label
+          })]
+        }, option.id);
+        return jsxRuntime.jsx(material.Tooltip, {
+          title: !isAvailable ? 'Not available' : option.label,
+          arrow: true,
+          sx: {
+            '& .MuiTooltip-tooltip': {
+              backgroundColor: 'var(--theme-surface)',
+              color: 'var(--theme-text-primary)',
+              border: '1px solid var(--theme-border-main)',
+              boxShadow: 'var(--theme-elevation-2)'
+            },
+            '& .MuiTooltip-arrow': {
+              color: 'var(--theme-surface)'
+            }
+          },
+          children: swatchContent
+        }, option.id);
+      })
+    })]
+  });
+}
+// Create the serializable component
+const OptionSelector = createSerializableView({
+  tagName: 'OptionSelector',
+  version: '1.0.0',
+  role: 'view',
+  View: OptionSelectorView
+});
+
+// Default render function based on component type
+const getDefaultRenderItem = (renderComponent = 'ProductCard', itemProps = {}) => {
+  return (item, index) => {
+    const key = item?.id || item?.key || index;
+    switch (renderComponent) {
+      case 'ProductCard':
+        return jsxRuntime.jsx(ProductCard, {
+          product: item,
+          ...itemProps
+        }, key);
+      case 'FeatureCard':
+        return jsxRuntime.jsx(FeatureCard, {
+          feature: item,
+          ...itemProps
+        }, key);
+      case 'Custom':
+      default:
+        // For custom components, assume the item contains the component data
+        return jsxRuntime.jsx("div", {
+          children: JSON.stringify(item)
+        }, key);
+    }
+  };
+};
+// View component - handles the actual rendering
+function CardListGridView({
+  items = [],
+  renderItem,
+  renderComponent = 'ProductCard',
+  itemProps = {},
+  columns = 2,
+  spacing = 'large',
+  equalHeight = true,
+  ...restProps
+}) {
+  const {
+    styleProps,
+    htmlProps,
+    restProps: otherProps
+  } = useBaseProps(restProps);
+  // Return null if no items and no render function
+  if (!items.length && !renderItem) {
+    return null;
+  }
+  // Use provided renderItem or create default based on renderComponent
+  const actualRenderItem = renderItem || getDefaultRenderItem(renderComponent, itemProps);
+  return jsxRuntime.jsx(GridLayout, {
+    columns: columns,
+    spacing: spacing,
+    equalHeight: equalHeight,
+    ...htmlProps,
+    ...styleProps,
+    ...otherProps,
+    children: items.map((item, index) => actualRenderItem(item, index))
+  });
+}
+// Main component with data binding support
+function CardListGrid(props) {
+  const {
+    dataSource,
+    bindingOptions,
+    ...restProps
+  } = props;
+  // Always call hooks unconditionally
+  const result = useDataBinding(dataSource || '', restProps);
+  // If no dataSource, use traditional props
+  if (!dataSource) {
+    return jsxRuntime.jsx(CardListGridView, {
+      ...restProps
+    });
+  }
+  // Use data binding result
+  const {
+    loading,
+    error,
+    ...cardListGridProps
+  } = result;
+  // Show loading state
+  if (loading) {
+    return jsxRuntime.jsx(GridLayout, {
+      columns: restProps.columns || 2,
+      spacing: restProps.spacing || 'large',
+      style: {
+        textAlign: 'center',
+        padding: '2rem'
+      },
+      children: jsxRuntime.jsx("div", {
+        children: "Loading..."
+      })
+    });
+  }
+  if (error) {
+    console.error('Error loading card list grid:', error);
+    {
+      return jsxRuntime.jsx(GridLayout, {
+        columns: restProps.columns || 2,
+        spacing: restProps.spacing || 'large',
+        style: {
+          textAlign: 'center',
           padding: '2rem'
         },
         children: jsxRuntime.jsxs("div", {
@@ -22342,36 +22976,31 @@ function DialogContentText({
   });
 }
 
-const FormField = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    gridProps,
-    styleProps,
-    htmlProps,
-    restProps
-  } = useBaseProps(props);
-  const {
-    label,
-    value,
-    onChange,
-    onChangeRaw,
-    type = 'text',
-    helperText,
-    required = false,
-    readOnly = false,
-    disabled = false,
-    disabledColor,
-    fullWidth = true,
-    multiline = false,
-    rows,
-    placeholder,
-    startAdornment,
-    endAdornment,
-    inputProps
-  } = restProps;
-  // Generate a unique ID for the input field
+/**
+ * FormFieldView - Pure view component that renders the input field
+ */
+function FormFieldView({
+  label,
+  value,
+  onChange,
+  onChangeRaw,
+  type = 'text',
+  helperText,
+  required = false,
+  readOnly = false,
+  disabled = false,
+  disabledColor,
+  fullWidth = true,
+  multiline = false,
+  rows,
+  placeholder,
+  startAdornment,
+  endAdornment,
+  inputProps,
+  ...restProps
+}) {
   const fieldId = React.useId();
   const handleChange = e => {
-    // If onChangeRaw is provided, use it instead
     if (onChangeRaw) {
       onChangeRaw(e);
       return;
@@ -22395,8 +23024,7 @@ const FormField = /*#__PURE__*/React.forwardRef((props, ref) => {
     '& input.Mui-disabled': disabledColor ? {
       color: disabledColor,
       WebkitTextFillColor: disabledColor
-    } : undefined,
-    ...styleProps.sx
+    } : undefined
   };
   const labelStyles = {
     left: -12,
@@ -22407,18 +23035,8 @@ const FormField = /*#__PURE__*/React.forwardRef((props, ref) => {
     color: 'var(--theme-secondary)'
   };
   return jsxRuntime.jsxs(material.FormControl, {
-    ref: ref,
     fullWidth: fullWidth,
-    ...htmlProps,
-    ...styleProps,
-    ...(gridProps && {
-      'data-grid-span': gridProps.span,
-      'data-grid-xs': gridProps.xs,
-      'data-grid-sm': gridProps.sm,
-      'data-grid-md': gridProps.md,
-      'data-grid-lg': gridProps.lg,
-      'data-grid-xl': gridProps.xl
-    }),
+    ...restProps,
     children: [jsxRuntime.jsx(material.InputLabel, {
       htmlFor: fieldId,
       sx: labelStyles,
@@ -22450,32 +23068,33 @@ const FormField = /*#__PURE__*/React.forwardRef((props, ref) => {
       children: helperText
     })]
   });
-});
-FormField.displayName = 'FormField';
-// Mark as QwickApp component
-Object.assign(FormField, {
-  [QWICKAPP_COMPONENT]: true
+}
+/**
+ * Create FormField component using the factory pattern
+ */
+const FormField = createSerializableView({
+  tagName: 'FormField',
+  version: '1.0.0',
+  role: 'input',
+  View: FormFieldView
 });
 
-const FormSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    gridProps,
-    styleProps,
-    htmlProps,
-    restProps
-  } = useBaseProps(props);
-  const {
-    label,
-    value,
-    onChange,
-    options,
-    helperText,
-    required = false,
-    disabled = false,
-    fullWidth = true,
-    size = 'small',
-    placeholder
-  } = restProps;
+/**
+ * FormSelectView - Pure view component that renders the select field
+ */
+function FormSelectView({
+  label,
+  value,
+  onChange,
+  options,
+  helperText,
+  required = false,
+  disabled = false,
+  fullWidth = true,
+  size = 'small',
+  placeholder,
+  ...restProps
+}) {
   const handleChange = e => {
     onChange(e.target.value);
   };
@@ -22489,8 +23108,7 @@ const FormSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     backgroundColor: 'var(--theme-surface-variant)',
     borderColor: 'var(--theme-surface)',
     color: 'var(--theme-text-primary)',
-    borderRadius: 1,
-    ...styleProps.sx
+    borderRadius: 1
   };
   const labelStyles = {
     left: -12,
@@ -22501,19 +23119,9 @@ const FormSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     color: 'var(--theme-secondary)'
   };
   return jsxRuntime.jsxs(material.FormControl, {
-    ref: ref,
     fullWidth: fullWidth,
     size: size,
-    ...htmlProps,
-    ...styleProps,
-    ...(gridProps && {
-      'data-grid-span': gridProps.span,
-      'data-grid-xs': gridProps.xs,
-      'data-grid-sm': gridProps.sm,
-      'data-grid-md': gridProps.md,
-      'data-grid-lg': gridProps.lg,
-      'data-grid-xl': gridProps.xl
-    }),
+    ...restProps,
     children: [label && jsxRuntime.jsx(material.InputLabel, {
       sx: labelStyles,
       shrink: true,
@@ -22538,28 +23146,29 @@ const FormSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
       children: helperText
     })]
   });
-});
-FormSelect.displayName = 'FormSelect';
-// Mark as QwickApp component
-Object.assign(FormSelect, {
-  [QWICKAPP_COMPONENT]: true
+}
+/**
+ * Create FormSelect component using the factory pattern
+ */
+const FormSelect = createSerializableView({
+  tagName: 'FormSelect',
+  version: '1.0.0',
+  role: 'input',
+  View: FormSelectView
 });
 
-const FormCheckbox = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    gridProps,
-    styleProps,
-    htmlProps,
-    restProps
-  } = useBaseProps(props);
-  const {
-    label,
-    checked,
-    onChange,
-    helperText,
-    required = false,
-    disabled = false
-  } = restProps;
+/**
+ * FormCheckboxView - Pure view component that renders the checkbox
+ */
+function FormCheckboxView({
+  label,
+  checked,
+  onChange,
+  helperText,
+  required = false,
+  disabled = false,
+  ...restProps
+}) {
   const handleChange = e => {
     onChange(e.target.checked);
   };
@@ -22579,25 +23188,14 @@ const FormCheckbox = /*#__PURE__*/React.forwardRef((props, ref) => {
     },
     '& .MuiFormControlLabel-label.Mui-disabled': {
       color: 'var(--theme-text-disabled)'
-    },
-    ...styleProps.sx
+    }
   };
   const helperTextStyles = {
     color: 'var(--theme-secondary)',
-    marginLeft: '32px' // Align with checkbox + label
+    marginLeft: '32px'
   };
   return jsxRuntime.jsxs(material.FormControl, {
-    ref: ref,
-    ...htmlProps,
-    ...styleProps,
-    ...(gridProps && {
-      'data-grid-span': gridProps.span,
-      'data-grid-xs': gridProps.xs,
-      'data-grid-sm': gridProps.sm,
-      'data-grid-md': gridProps.md,
-      'data-grid-lg': gridProps.lg,
-      'data-grid-xl': gridProps.xl
-    }),
+    ...restProps,
     children: [jsxRuntime.jsx(material.FormControlLabel, {
       control: jsxRuntime.jsx(material.Checkbox, {
         checked: checked,
@@ -22613,30 +23211,31 @@ const FormCheckbox = /*#__PURE__*/React.forwardRef((props, ref) => {
       children: helperText
     })]
   });
-});
-FormCheckbox.displayName = 'FormCheckbox';
-// Mark as QwickApp component
-Object.assign(FormCheckbox, {
-  [QWICKAPP_COMPONENT]: true
+}
+/**
+ * Create FormCheckbox component using the factory pattern
+ */
+const FormCheckbox = createSerializableView({
+  tagName: 'FormCheckbox',
+  version: '1.0.0',
+  role: 'input',
+  View: FormCheckboxView
 });
 
-const Captcha = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    gridProps,
-    styleProps,
-    htmlProps,
-    restProps
-  } = useBaseProps(props);
-  const {
-    provider,
-    siteKey,
-    onVerify,
-    onExpire,
-    onError,
-    theme = 'light',
-    size = 'normal',
-    action = 'submit'
-  } = restProps;
+/**
+ * CaptchaView - Pure view component that renders the CAPTCHA widget
+ */
+function CaptchaView({
+  provider,
+  siteKey,
+  onVerify,
+  onExpire,
+  onError,
+  theme = 'light',
+  size = 'normal',
+  action = 'submit',
+  ...restProps
+}) {
   const containerRef = React.useRef(null);
   const widgetIdRef = React.useRef(null);
   const [isLoaded, setIsLoaded] = React.useState(false);
@@ -22709,7 +23308,7 @@ const Captcha = /*#__PURE__*/React.forwardRef((props, ref) => {
       try {
         switch (provider) {
           case 'recaptcha-v2':
-            if (window.grecaptcha && window.grecaptcha.render) {
+            if (window.grecaptcha?.render) {
               widgetIdRef.current = window.grecaptcha.render(containerRef.current, {
                 sitekey: siteKey,
                 callback: onVerify,
@@ -22726,7 +23325,7 @@ const Captcha = /*#__PURE__*/React.forwardRef((props, ref) => {
             break;
           case 'recaptcha-v3':
             // reCAPTCHA v3 is invisible and executes programmatically
-            if (window.grecaptcha && window.grecaptcha.execute) {
+            if (window.grecaptcha?.execute) {
               window.grecaptcha.execute(siteKey, {
                 action
               }).then(token => {
@@ -22738,7 +23337,7 @@ const Captcha = /*#__PURE__*/React.forwardRef((props, ref) => {
             }
             break;
           case 'hcaptcha':
-            if (window.hcaptcha && window.hcaptcha.render) {
+            if (window.hcaptcha?.render) {
               widgetIdRef.current = window.hcaptcha.render(containerRef.current, {
                 sitekey: siteKey,
                 callback: onVerify,
@@ -22754,7 +23353,7 @@ const Captcha = /*#__PURE__*/React.forwardRef((props, ref) => {
             }
             break;
           case 'turnstile':
-            if (window.turnstile && window.turnstile.render) {
+            if (window.turnstile?.render) {
               widgetIdRef.current = window.turnstile.render(containerRef.current, {
                 sitekey: siteKey,
                 callback: onVerify,
@@ -22805,20 +23404,10 @@ const Captcha = /*#__PURE__*/React.forwardRef((props, ref) => {
     return null;
   }
   return jsxRuntime.jsxs(material.Box, {
-    ref: ref,
-    ...htmlProps,
+    ...restProps,
     sx: {
-      my: 2,
-      ...styleProps.sx
+      my: 2
     },
-    ...(gridProps && {
-      'data-grid-span': gridProps.span,
-      'data-grid-xs': gridProps.xs,
-      'data-grid-sm': gridProps.sm,
-      'data-grid-md': gridProps.md,
-      'data-grid-lg': gridProps.lg,
-      'data-grid-xl': gridProps.xl
-    }),
     children: [error && jsxRuntime.jsx(material.Alert, {
       severity: "error",
       sx: {
@@ -22829,11 +23418,15 @@ const Captcha = /*#__PURE__*/React.forwardRef((props, ref) => {
       ref: containerRef
     })]
   });
-});
-Captcha.displayName = 'Captcha';
-// Mark as QwickApp component
-Object.assign(Captcha, {
-  [QWICKAPP_COMPONENT]: true
+}
+/**
+ * Create Captcha component using the factory pattern
+ */
+const Captcha = createSerializableView({
+  tagName: 'Captcha',
+  version: '1.0.0',
+  role: 'input',
+  View: CaptchaView
 });
 
 /**
@@ -30340,97 +30933,331 @@ __decorate([schema.Field(), schema.Editor({
 exports.FeatureGridModel = __decorate([schema.Schema('FeatureGrid', '1.0.0')], exports.FeatureGridModel);
 
 /**
- * FooterItem Schema - Defines data structure for footer navigation items
+ * FooterItem Schema - Defines data structure for footer navigation items
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+exports.FooterItemModel = class FooterItemModel extends schema.Model {};
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'ID',
+  description: 'Unique identifier for the footer item',
+  placeholder: 'footer-item-id'
+}), classValidator.IsString(), classValidator.IsNotEmpty(), __metadata("design:type", String)], exports.FooterItemModel.prototype, "id", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Label',
+  description: 'Display text for the footer item',
+  placeholder: 'Navigation label'
+}), classValidator.IsString(), __metadata("design:type", String)], exports.FooterItemModel.prototype, "label", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.URL,
+  label: 'URL',
+  description: 'Optional URL for links',
+  placeholder: 'https://example.com'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.FooterItemModel.prototype, "href", void 0);
+__decorate([schema.Field({
+  defaultValue: false
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'External Link',
+  description: 'Whether to open links in new tab'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], exports.FooterItemModel.prototype, "external", void 0);
+exports.FooterItemModel = __decorate([schema.Schema('FooterItem', '1.0.0')], exports.FooterItemModel);
+
+/**
+ * Schema for FormBlock component - Reusable form layout container
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+exports.FormBlockModel = class FormBlockModel extends ContainerSchema {};
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Title',
+  description: 'Title for the default header (ignored if custom header is provided)',
+  placeholder: 'Enter form title...'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.FormBlockModel.prototype, "title", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXTAREA,
+  label: 'Description',
+  description: 'Description/subtitle for the default header (ignored if custom header is provided)',
+  placeholder: 'Enter form description...'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.FormBlockModel.prototype, "description", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Cover Image URL',
+  description: 'Cover image URL for the default header (ignored if custom header is provided)',
+  placeholder: 'https://example.com/image.jpg'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", Object)], exports.FormBlockModel.prototype, "coverImage", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Status Type',
+  description: 'Status type for message display (info, success, warning, error)',
+  placeholder: 'info'
+}), classValidator.IsOptional(), classValidator.IsIn(['info', 'success', 'warning', 'error']), __metadata("design:type", String)], exports.FormBlockModel.prototype, "status", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXTAREA,
+  label: 'Status Message',
+  description: 'Status message to display',
+  placeholder: 'Enter status message...'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.FormBlockModel.prototype, "message", void 0);
+__decorate([schema.Field({
+  defaultValue: 'sm'
+}), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Maximum Width',
+  description: 'Maximum width of the form container (xs, sm, md)',
+  placeholder: 'sm'
+}), classValidator.IsOptional(), classValidator.IsIn(['xs', 'sm', 'md']), __metadata("design:type", String)], exports.FormBlockModel.prototype, "maxWidth", void 0);
+__decorate([schema.Field({
+  defaultValue: 'default'
+}), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Background Style',
+  description: 'Background style variant (default, gradient, image)',
+  placeholder: 'default'
+}), classValidator.IsOptional(), classValidator.IsIn(['default', 'gradient', 'image']), __metadata("design:type", String)], exports.FormBlockModel.prototype, "background", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Background Image URL',
+  description: 'Background image URL (when background="image")',
+  placeholder: 'https://example.com/background.jpg'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.FormBlockModel.prototype, "backgroundImage", void 0);
+exports.FormBlockModel = __decorate([schema.Schema('FormBlock', '1.0.0')], exports.FormBlockModel);
+
+/**
+ * Schema for FormSelect component - Themed dropdown select input
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+exports.FormSelectModel = class FormSelectModel extends ViewSchema {};
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Label',
+  description: 'Label text for the select field',
+  placeholder: 'Enter label...'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.FormSelectModel.prototype, "label", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Value',
+  description: 'Current selected value',
+  placeholder: ''
+}), classValidator.IsString(), __metadata("design:type", Object)], exports.FormSelectModel.prototype, "value", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXTAREA,
+  label: 'Options',
+  description: 'Select options as JSON array: [{"value": "1", "label": "Option 1"}]',
+  placeholder: '[{"value": "1", "label": "Option 1"}]'
+}), classValidator.IsString(), __metadata("design:type", String)], exports.FormSelectModel.prototype, "options", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Helper Text',
+  description: 'Helper text displayed below the select',
+  placeholder: 'Enter helper text...'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.FormSelectModel.prototype, "helperText", void 0);
+__decorate([schema.Field({
+  defaultValue: false
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Required',
+  description: 'Mark field as required'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], exports.FormSelectModel.prototype, "required", void 0);
+__decorate([schema.Field({
+  defaultValue: false
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Disabled',
+  description: 'Disable the select field'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], exports.FormSelectModel.prototype, "disabled", void 0);
+__decorate([schema.Field({
+  defaultValue: true
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Full Width',
+  description: 'Make select take full width of container'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], exports.FormSelectModel.prototype, "fullWidth", void 0);
+__decorate([schema.Field({
+  defaultValue: 'small'
+}), schema.Editor({
+  field_type: schema.FieldType.SELECT,
+  label: 'Size',
+  description: 'Size variant of the select field'
+}), classValidator.IsOptional(), classValidator.IsIn(['small', 'medium']), __metadata("design:type", String)], exports.FormSelectModel.prototype, "size", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Placeholder',
+  description: 'Placeholder text when no value is selected',
+  placeholder: 'Select an option...'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.FormSelectModel.prototype, "placeholder", void 0);
+exports.FormSelectModel = __decorate([schema.Schema('FormSelect', '1.0.0')], exports.FormSelectModel);
+
+/**
+ * Schema for FormField component - Themed text/number input field
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+exports.FormFieldModel = class FormFieldModel extends ViewSchema {};
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Label',
+  description: 'Label text for the input field',
+  placeholder: 'Enter label...'
+}), classValidator.IsString(), __metadata("design:type", String)], exports.FormFieldModel.prototype, "label", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Value',
+  description: 'Current input value',
+  placeholder: ''
+}), classValidator.IsString(), __metadata("design:type", Object)], exports.FormFieldModel.prototype, "value", void 0);
+__decorate([schema.Field({
+  defaultValue: 'text'
+}), schema.Editor({
+  field_type: schema.FieldType.SELECT,
+  label: 'Input Type',
+  description: 'Type of input field'
+}), classValidator.IsOptional(), classValidator.IsIn(['text', 'number', 'password', 'email', 'tel']), __metadata("design:type", String)], exports.FormFieldModel.prototype, "type", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Helper Text',
+  description: 'Helper text displayed below the input',
+  placeholder: 'Enter helper text...'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.FormFieldModel.prototype, "helperText", void 0);
+__decorate([schema.Field({
+  defaultValue: false
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Required',
+  description: 'Mark field as required'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], exports.FormFieldModel.prototype, "required", void 0);
+__decorate([schema.Field({
+  defaultValue: false
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Read Only',
+  description: 'Make field read-only'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], exports.FormFieldModel.prototype, "readOnly", void 0);
+__decorate([schema.Field({
+  defaultValue: false
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Disabled',
+  description: 'Disable the input field'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], exports.FormFieldModel.prototype, "disabled", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Disabled Color',
+  description: 'Custom color for disabled state (CSS color value)',
+  placeholder: 'var(--theme-text-disabled)'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.FormFieldModel.prototype, "disabledColor", void 0);
+__decorate([schema.Field({
+  defaultValue: true
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Full Width',
+  description: 'Make input take full width of container'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], exports.FormFieldModel.prototype, "fullWidth", void 0);
+__decorate([schema.Field({
+  defaultValue: false
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Multiline',
+  description: 'Enable multiline textarea mode'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], exports.FormFieldModel.prototype, "multiline", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Rows',
+  description: 'Number of rows for multiline textarea',
+  placeholder: '4'
+}), classValidator.IsOptional(), classValidator.IsInt(), classValidator.Min(1), __metadata("design:type", Number)], exports.FormFieldModel.prototype, "rows", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Placeholder',
+  description: 'Placeholder text',
+  placeholder: 'Enter text...'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.FormFieldModel.prototype, "placeholder", void 0);
+exports.FormFieldModel = __decorate([schema.Schema('FormField', '1.0.0')], exports.FormFieldModel);
+
+/**
+ * Schema for FormCheckbox component - Themed checkbox input
  *
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
-exports.FooterItemModel = class FooterItemModel extends schema.Model {};
-__decorate([schema.Field(), schema.Editor({
-  field_type: schema.FieldType.TEXT,
-  label: 'ID',
-  description: 'Unique identifier for the footer item',
-  placeholder: 'footer-item-id'
-}), classValidator.IsString(), classValidator.IsNotEmpty(), __metadata("design:type", String)], exports.FooterItemModel.prototype, "id", void 0);
+exports.FormCheckboxModel = class FormCheckboxModel extends ViewSchema {};
 __decorate([schema.Field(), schema.Editor({
   field_type: schema.FieldType.TEXT,
   label: 'Label',
-  description: 'Display text for the footer item',
-  placeholder: 'Navigation label'
-}), classValidator.IsString(), __metadata("design:type", String)], exports.FooterItemModel.prototype, "label", void 0);
+  description: 'Label text for the checkbox',
+  placeholder: 'Enter label...'
+}), classValidator.IsString(), __metadata("design:type", String)], exports.FormCheckboxModel.prototype, "label", void 0);
+__decorate([schema.Field({
+  defaultValue: false
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Checked',
+  description: 'Checkbox checked state'
+}), classValidator.IsBoolean(), __metadata("design:type", Boolean)], exports.FormCheckboxModel.prototype, "checked", void 0);
 __decorate([schema.Field(), schema.Editor({
-  field_type: schema.FieldType.URL,
-  label: 'URL',
-  description: 'Optional URL for links',
-  placeholder: 'https://example.com'
-}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.FooterItemModel.prototype, "href", void 0);
+  field_type: schema.FieldType.TEXT,
+  label: 'Helper Text',
+  description: 'Helper text displayed below the checkbox',
+  placeholder: 'Enter helper text...'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.FormCheckboxModel.prototype, "helperText", void 0);
 __decorate([schema.Field({
   defaultValue: false
 }), schema.Editor({
   field_type: schema.FieldType.BOOLEAN,
-  label: 'External Link',
-  description: 'Whether to open links in new tab'
-}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], exports.FooterItemModel.prototype, "external", void 0);
-exports.FooterItemModel = __decorate([schema.Schema('FooterItem', '1.0.0')], exports.FooterItemModel);
+  label: 'Required',
+  description: 'Mark checkbox as required'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], exports.FormCheckboxModel.prototype, "required", void 0);
+__decorate([schema.Field({
+  defaultValue: false
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Disabled',
+  description: 'Disable the checkbox'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], exports.FormCheckboxModel.prototype, "disabled", void 0);
+exports.FormCheckboxModel = __decorate([schema.Schema('FormCheckbox', '1.0.0')], exports.FormCheckboxModel);
 
 /**
- * Schema for FormBlock component - Reusable form layout container
+ * Schema for Captcha component - Universal CAPTCHA widget
  *
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
-exports.FormBlockModel = class FormBlockModel extends ContainerSchema {};
-__decorate([schema.Field(), schema.Editor({
-  field_type: schema.FieldType.TEXT,
-  label: 'Title',
-  description: 'Title for the default header (ignored if custom header is provided)',
-  placeholder: 'Enter form title...'
-}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.FormBlockModel.prototype, "title", void 0);
-__decorate([schema.Field(), schema.Editor({
-  field_type: schema.FieldType.TEXTAREA,
-  label: 'Description',
-  description: 'Description/subtitle for the default header (ignored if custom header is provided)',
-  placeholder: 'Enter form description...'
-}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.FormBlockModel.prototype, "description", void 0);
+exports.CaptchaModel = class CaptchaModel extends ViewSchema {};
 __decorate([schema.Field(), schema.Editor({
-  field_type: schema.FieldType.TEXT,
-  label: 'Cover Image URL',
-  description: 'Cover image URL for the default header (ignored if custom header is provided)',
-  placeholder: 'https://example.com/image.jpg'
-}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", Object)], exports.FormBlockModel.prototype, "coverImage", void 0);
+  field_type: schema.FieldType.SELECT,
+  label: 'CAPTCHA Provider',
+  description: 'Which CAPTCHA service to use'
+}), classValidator.IsIn(['recaptcha-v2', 'recaptcha-v3', 'hcaptcha', 'turnstile']), __metadata("design:type", String)], exports.CaptchaModel.prototype, "provider", void 0);
 __decorate([schema.Field(), schema.Editor({
   field_type: schema.FieldType.TEXT,
-  label: 'Status Type',
-  description: 'Status type for message display (info, success, warning, error)',
-  placeholder: 'info'
-}), classValidator.IsOptional(), classValidator.IsIn(['info', 'success', 'warning', 'error']), __metadata("design:type", String)], exports.FormBlockModel.prototype, "status", void 0);
-__decorate([schema.Field(), schema.Editor({
-  field_type: schema.FieldType.TEXTAREA,
-  label: 'Status Message',
-  description: 'Status message to display',
-  placeholder: 'Enter status message...'
-}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.FormBlockModel.prototype, "message", void 0);
+  label: 'Site Key',
+  description: 'Public site key from CAPTCHA provider',
+  placeholder: 'Enter site key...'
+}), classValidator.IsString(), __metadata("design:type", String)], exports.CaptchaModel.prototype, "siteKey", void 0);
 __decorate([schema.Field({
-  defaultValue: 'sm'
+  defaultValue: 'light'
 }), schema.Editor({
-  field_type: schema.FieldType.TEXT,
-  label: 'Maximum Width',
-  description: 'Maximum width of the form container (xs, sm, md)',
-  placeholder: 'sm'
-}), classValidator.IsOptional(), classValidator.IsIn(['xs', 'sm', 'md']), __metadata("design:type", String)], exports.FormBlockModel.prototype, "maxWidth", void 0);
+  field_type: schema.FieldType.SELECT,
+  label: 'Theme',
+  description: 'CAPTCHA widget theme'
+}), classValidator.IsOptional(), classValidator.IsIn(['light', 'dark']), __metadata("design:type", String)], exports.CaptchaModel.prototype, "theme", void 0);
 __decorate([schema.Field({
-  defaultValue: 'default'
+  defaultValue: 'normal'
+}), schema.Editor({
+  field_type: schema.FieldType.SELECT,
+  label: 'Size',
+  description: 'CAPTCHA widget size'
+}), classValidator.IsOptional(), classValidator.IsIn(['normal', 'compact', 'invisible']), __metadata("design:type", String)], exports.CaptchaModel.prototype, "size", void 0);
+__decorate([schema.Field({
+  defaultValue: 'submit'
 }), schema.Editor({
   field_type: schema.FieldType.TEXT,
-  label: 'Background Style',
-  description: 'Background style variant (default, gradient, image)',
-  placeholder: 'default'
-}), classValidator.IsOptional(), classValidator.IsIn(['default', 'gradient', 'image']), __metadata("design:type", String)], exports.FormBlockModel.prototype, "background", void 0);
-__decorate([schema.Field(), schema.Editor({
-  field_type: schema.FieldType.TEXT,
-  label: 'Background Image URL',
-  description: 'Background image URL (when background="image")',
-  placeholder: 'https://example.com/background.jpg'
-}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.FormBlockModel.prototype, "backgroundImage", void 0);
-exports.FormBlockModel = __decorate([schema.Schema('FormBlock', '1.0.0')], exports.FormBlockModel);
+  label: 'Action',
+  description: 'reCAPTCHA v3 action name',
+  placeholder: 'submit'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.CaptchaModel.prototype, "action", void 0);
+exports.CaptchaModel = __decorate([schema.Schema('Captcha', '1.0.0')], exports.CaptchaModel);
 
 /**
  * FooterSection Schema - Defines data structure for footer sections
@@ -31436,6 +32263,299 @@ __decorate([schema.Field({
 }), classValidator.IsOptional(), classValidator.IsNumber(), classValidator.Min(1), classValidator.Max(10), __metadata("design:type", Number)], exports.ProductCardModel.prototype, "maxFeaturesCompact", void 0);
 exports.ProductCardModel = __decorate([schema.Schema('ProductCard', '1.0.0')], exports.ProductCardModel);
 
+/**
+ * Schema for ImageGallery component - Image gallery with multiple view variants
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+// Product image interface
+class GalleryImageModel {}
+__decorate([schema.Field({
+  dataType: schema.DataType.STRING
+}), classValidator.IsString(), __metadata("design:type", String)], GalleryImageModel.prototype, "url", void 0);
+__decorate([schema.Field({
+  dataType: schema.DataType.STRING
+}), classValidator.IsString(), __metadata("design:type", String)], GalleryImageModel.prototype, "alt", void 0);
+__decorate([schema.Field({
+  dataType: schema.DataType.STRING
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], GalleryImageModel.prototype, "thumbnail", void 0);
+exports.ImageGalleryModel = class ImageGalleryModel extends exports.ViewSchema {};
+__decorate([schema.Field({
+  dataType: schema.DataType.ARRAY
+}), schema.Editor({
+  field_type: schema.FieldType.ARRAY,
+  label: 'Product Images',
+  description: 'Array of product images to display in the gallery'
+}), classValidator.IsArray(), classValidator.ValidateNested({
+  each: true
+}), classTransformer.Type(() => GalleryImageModel), __metadata("design:type", Array)], exports.ImageGalleryModel.prototype, "images", void 0);
+__decorate([schema.Field({
+  dataType: schema.DataType.STRING
+}), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Product Name',
+  description: 'Product name for accessibility',
+  placeholder: 'Premium Cotton T-Shirt'
+}), classValidator.IsString(), __metadata("design:type", String)], exports.ImageGalleryModel.prototype, "productName", void 0);
+__decorate([schema.Field({
+  defaultValue: 'thumbnails',
+  dataType: schema.DataType.STRING
+}), schema.Editor({
+  field_type: schema.FieldType.SELECT,
+  label: 'Gallery Variant',
+  description: 'Display variant for the gallery',
+  validation: {
+    options: [{
+      label: 'Thumbnails',
+      value: 'thumbnails'
+    }, {
+      label: 'Carousel',
+      value: 'carousel'
+    }, {
+      label: 'Grid',
+      value: 'grid'
+    }]
+  }
+}), classValidator.IsOptional(), classValidator.IsString(), classValidator.IsIn(['thumbnails', 'carousel', 'grid']), __metadata("design:type", String)], exports.ImageGalleryModel.prototype, "variant", void 0);
+__decorate([schema.Field({
+  defaultValue: 'left',
+  dataType: schema.DataType.STRING
+}), schema.Editor({
+  field_type: schema.FieldType.SELECT,
+  label: 'Thumbnail Position',
+  description: 'Position of thumbnails (only for thumbnails variant)',
+  validation: {
+    options: [{
+      label: 'Left',
+      value: 'left'
+    }, {
+      label: 'Bottom',
+      value: 'bottom'
+    }, {
+      label: 'Right',
+      value: 'right'
+    }]
+  }
+}), classValidator.IsOptional(), classValidator.IsString(), classValidator.IsIn(['left', 'bottom', 'right']), __metadata("design:type", String)], exports.ImageGalleryModel.prototype, "thumbnailPosition", void 0);
+__decorate([schema.Field({
+  defaultValue: '1',
+  dataType: schema.DataType.STRING
+}), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Aspect Ratio',
+  description: 'Aspect ratio for main image (e.g., "1", "4/3", "16/9")',
+  placeholder: '1'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.ImageGalleryModel.prototype, "aspectRatio", void 0);
+__decorate([schema.Field({
+  defaultValue: true,
+  dataType: schema.DataType.BOOLEAN
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Show Zoom',
+  description: 'Enable zoom functionality for images'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], exports.ImageGalleryModel.prototype, "showZoom", void 0);
+__decorate([schema.Field({
+  dataType: schema.DataType.NUMBER
+}), schema.Editor({
+  field_type: schema.FieldType.NUMBER,
+  label: 'Max Images',
+  description: 'Maximum number of images to display (leave empty for all)',
+  placeholder: '8'
+}), classValidator.IsOptional(), classValidator.IsNumber(), __metadata("design:type", Number)], exports.ImageGalleryModel.prototype, "maxImages", void 0);
+__decorate([schema.Field({
+  dataType: schema.DataType.STRING
+}), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Data Source',
+  description: 'Data source for dynamic image loading',
+  placeholder: 'product-images'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.ImageGalleryModel.prototype, "dataSource", void 0);
+__decorate([schema.Field({
+  dataType: schema.DataType.OBJECT
+}), schema.Editor({
+  field_type: schema.FieldType.TEXTAREA,
+  label: 'Binding Options',
+  description: 'Data binding configuration (JSON format)',
+  placeholder: '{ "filter": {}, "sort": {} }'
+}), classValidator.IsOptional(), __metadata("design:type", Object)], exports.ImageGalleryModel.prototype, "bindingOptions", void 0);
+exports.ImageGalleryModel = __decorate([schema.Schema('ImageGallery', '1.0.0')], exports.ImageGalleryModel);
+
+/**
+ * Schema for OptionSelector component - Universal option selection with visual modes
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+// Select option model
+class SelectOptionModel {}
+__decorate([schema.Field({
+  dataType: schema.DataType.STRING
+}), classValidator.IsString(), __metadata("design:type", String)], SelectOptionModel.prototype, "id", void 0);
+__decorate([schema.Field({
+  dataType: schema.DataType.STRING
+}), classValidator.IsString(), __metadata("design:type", String)], SelectOptionModel.prototype, "label", void 0);
+__decorate([schema.Field({
+  dataType: schema.DataType.BOOLEAN
+}), classValidator.IsBoolean(), __metadata("design:type", Boolean)], SelectOptionModel.prototype, "available", void 0);
+__decorate([schema.Field({
+  dataType: schema.DataType.NUMBER
+}), classValidator.IsOptional(), classValidator.IsNumber(), __metadata("design:type", Number)], SelectOptionModel.prototype, "price", void 0);
+__decorate([schema.Field({
+  dataType: schema.DataType.STRING
+}), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Hex Color Value',
+  description: 'Hex color code for color swatches (e.g., #FF0000)',
+  placeholder: '#FF0000'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], SelectOptionModel.prototype, "hexValue", void 0);
+__decorate([schema.Field({
+  dataType: schema.DataType.STRING
+}), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Image URL',
+  description: 'Image URL for image/pattern display mode',
+  placeholder: '/patterns/stripes.jpg'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], SelectOptionModel.prototype, "imageUrl", void 0);
+exports.OptionSelectorModel = class OptionSelectorModel extends exports.ViewSchema {};
+__decorate([schema.Field({
+  dataType: schema.DataType.ARRAY
+}), schema.Editor({
+  field_type: schema.FieldType.ARRAY,
+  label: 'Available Options',
+  description: 'Array of options to display'
+}), classValidator.IsArray(), classValidator.ValidateNested({
+  each: true
+}), classTransformer.Type(() => SelectOptionModel), __metadata("design:type", Array)], exports.OptionSelectorModel.prototype, "options", void 0);
+__decorate([schema.Field({
+  dataType: schema.DataType.STRING
+}), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Selected Option',
+  description: 'Currently selected option ID',
+  placeholder: 'm'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.OptionSelectorModel.prototype, "selectedOption", void 0);
+__decorate([schema.Field({
+  defaultValue: 'text',
+  dataType: schema.DataType.STRING
+}), schema.Editor({
+  field_type: schema.FieldType.SELECT,
+  label: 'Display Mode',
+  description: 'Visual display mode for options',
+  validation: {
+    options: [{
+      label: 'Text (buttons with labels)',
+      value: 'text'
+    }, {
+      label: 'Color (swatches)',
+      value: 'color'
+    }, {
+      label: 'Image (patterns/textures)',
+      value: 'image'
+    }]
+  }
+}), classValidator.IsOptional(), classValidator.IsString(), classValidator.IsIn(['text', 'color', 'image']), __metadata("design:type", String)], exports.OptionSelectorModel.prototype, "displayMode", void 0);
+__decorate([schema.Field({
+  defaultValue: 'grid',
+  dataType: schema.DataType.STRING
+}), schema.Editor({
+  field_type: schema.FieldType.SELECT,
+  label: 'Display Variant',
+  description: 'How to display the selector',
+  validation: {
+    options: [{
+      label: 'Buttons',
+      value: 'buttons'
+    }, {
+      label: 'Dropdown',
+      value: 'dropdown'
+    }, {
+      label: 'Grid',
+      value: 'grid'
+    }]
+  }
+}), classValidator.IsOptional(), classValidator.IsString(), classValidator.IsIn(['buttons', 'dropdown', 'grid']), __metadata("design:type", String)], exports.OptionSelectorModel.prototype, "variant", void 0);
+__decorate([schema.Field({
+  defaultValue: 'wrap',
+  dataType: schema.DataType.STRING
+}), schema.Editor({
+  field_type: schema.FieldType.SELECT,
+  label: 'Layout Direction',
+  description: 'Layout direction for buttons/grid variant',
+  validation: {
+    options: [{
+      label: 'Horizontal',
+      value: 'horizontal'
+    }, {
+      label: 'Vertical',
+      value: 'vertical'
+    }, {
+      label: 'Wrap',
+      value: 'wrap'
+    }]
+  }
+}), classValidator.IsOptional(), classValidator.IsString(), classValidator.IsIn(['horizontal', 'vertical', 'wrap']), __metadata("design:type", String)], exports.OptionSelectorModel.prototype, "layout", void 0);
+__decorate([schema.Field({
+  defaultValue: 'medium',
+  dataType: schema.DataType.STRING
+}), schema.Editor({
+  field_type: schema.FieldType.SELECT,
+  label: 'Visual Size',
+  description: 'Size for color/image display modes',
+  validation: {
+    options: [{
+      label: 'Small (32px)',
+      value: 'small'
+    }, {
+      label: 'Medium (44px)',
+      value: 'medium'
+    }, {
+      label: 'Large (56px)',
+      value: 'large'
+    }]
+  }
+}), classValidator.IsOptional(), classValidator.IsString(), classValidator.IsIn(['small', 'medium', 'large']), __metadata("design:type", String)], exports.OptionSelectorModel.prototype, "visualSize", void 0);
+__decorate([schema.Field({
+  defaultValue: false,
+  dataType: schema.DataType.BOOLEAN
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Show Label',
+  description: 'Show label below visual (for color/image modes)'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], exports.OptionSelectorModel.prototype, "showLabel", void 0);
+__decorate([schema.Field({
+  defaultValue: false,
+  dataType: schema.DataType.BOOLEAN
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Disabled',
+  description: 'Disable all option selections'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], exports.OptionSelectorModel.prototype, "disabled", void 0);
+__decorate([schema.Field({
+  defaultValue: 'Select Option',
+  dataType: schema.DataType.STRING
+}), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Label',
+  description: 'Label text for the selector',
+  placeholder: 'Select Option'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.OptionSelectorModel.prototype, "label", void 0);
+__decorate([schema.Field({
+  dataType: schema.DataType.STRING
+}), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Data Source',
+  description: 'Data source for dynamic option loading',
+  placeholder: 'product-options'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.OptionSelectorModel.prototype, "dataSource", void 0);
+__decorate([schema.Field({
+  dataType: schema.DataType.OBJECT
+}), schema.Editor({
+  field_type: schema.FieldType.TEXTAREA,
+  label: 'Binding Options',
+  description: 'Data binding configuration (JSON format)',
+  placeholder: '{ "filter": {}, "sort": {} }'
+}), classValidator.IsOptional(), __metadata("design:type", Object)], exports.OptionSelectorModel.prototype, "bindingOptions", void 0);
+exports.OptionSelectorModel = __decorate([schema.Schema('OptionSelector', '1.0.0')], exports.OptionSelectorModel);
+
 /**
  * Schema for SafeSpan component - Safely renders HTML content with sanitization
  *
@@ -32350,16 +33470,19 @@ exports.FormCheckbox = FormCheckbox;
 exports.FormField = FormField;
 exports.FormPage = FormPage;
 exports.FormSelect = FormSelect;
+exports.GalleryImageModel = GalleryImageModel;
 exports.GridCell = GridCell;
 exports.GridLayout = GridLayout;
 exports.HeroBlock = HeroBlock;
 exports.Html = Html;
 exports.HtmlInputField = HtmlInputField;
 exports.Image = Image;
+exports.ImageGallery = ImageGallery;
 exports.Logo = Logo;
 exports.Markdown = Markdown;
 exports.ModelView = ModelView;
 exports.NavigationProvider = NavigationProvider;
+exports.OptionSelector = OptionSelector;
 exports.Page = Page;
 exports.PageBannerHeader = PageBannerHeader;
 exports.PaletteAutumn = PaletteAutumn;
@@ -32383,6 +33506,7 @@ exports.Scaffold = Scaffold;
 exports.SchemaFormRenderer = SchemaFormRenderer;
 exports.Section = Section;
 exports.SelectInputField = SelectInputField;
+exports.SelectOptionModel = SelectOptionModel;
 exports.StatCard = StatCard;
 exports.SwitchInputField = SwitchInputField;
 exports.T = T;