@qwickapps/react-framework 1.5.12 → 1.5.13

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
       },
-      '& li': {
-        mb: 1.25,
-        lineHeight: 1.7,
+      '& h4': {
+        fontSize: {
+          xs: '1.1rem',
+          md: '1.25rem'
+        },
+        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'
         },
+        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
   });
 }
@@ -21387,35 +21392,664 @@ function ProductCard(props) {
         technologies: ['Loading'],
         status: 'coming-soon'
       },
-      variant: restProps.variant || 'compact',
-      showImage: false
+      variant: restProps.variant || 'compact',
+      showImage: false
+    });
+  }
+  if (error) {
+    console.error('Error loading product card:', error);
+    {
+      return jsxRuntime.jsx(ProductCardView, {
+        ...restProps,
+        product: {
+          id: 'error-product',
+          name: 'Product Loading Error',
+          category: 'Error',
+          description: error.message,
+          features: ['Unable to load product features'],
+          technologies: ['N/A'],
+          status: 'coming-soon'
+        },
+        variant: restProps.variant || 'compact',
+        showImage: false
+      });
+    }
+  }
+  // Pass through data directly - let component handle missing properties
+  const transformedProps = productProps;
+  return jsxRuntime.jsx(ProductCardView, {
+    ...transformedProps
+  });
+}
+
+// View component - handles the actual rendering
+function ImageGalleryView({
+  images = [],
+  productName,
+  variant = 'thumbnails',
+  thumbnailPosition = 'left',
+  aspectRatio = '1',
+  showZoom = true,
+  maxImages,
+  dataSource,
+  bindingOptions,
+  ...restProps
+}) {
+  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(material.Skeleton, {
+        variant: "rectangular",
+        width: "100%",
+        height: "100%",
+        sx: {
+          borderRadius: 'var(--theme-border-radius)'
+        }
+      })
+    });
+  }
+  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: {
+          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))
+      })]
     });
   }
-  if (error) {
-    console.error('Error loading product card:', error);
-    {
-      return jsxRuntime.jsx(ProductCardView, {
-        ...restProps,
-        product: {
-          id: 'error-product',
-          name: 'Product Loading Error',
-          category: 'Error',
-          description: error.message,
-          features: ['Unable to load product features'],
-          technologies: ['N/A'],
-          status: 'coming-soon'
-        },
-        variant: restProps.variant || 'compact',
-        showImage: false
-      });
+  // 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
+      };
     }
-  }
-  // Pass through data directly - let component handle missing properties
-  const transformedProps = productProps;
-  return jsxRuntime.jsx(ProductCardView, {
-    ...transformedProps
+    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 = {}) => {
@@ -31436,6 +32070,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 +33277,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 +33313,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;