@qwickapps/react-framework 1.5.11 → 1.5.13

package/dist/palettes/manifest.json

@@ -1,6 +1,6 @@
 {
   "$schema": "./manifest.schema.json",
-  "version": "1.5.11",
+  "version": "1.5.13",
   "palettes": [
     {
       "id": "default",
@@ -8,11 +8,11 @@
       "description": "Classic blue and neutral color scheme - the original QwickApps palette",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.5.11",
-      "file": "palette-default.1.5.11.css",
+      "version": "1.5.13",
+      "file": "palette-default.1.5.13.css",
       "primaryColor": "#007bff",
       "inlined": true,
-      "fileMinified": "palette-default.1.5.11.min.css",
+      "fileMinified": "palette-default.1.5.13.min.css",
       "fileLatest": "palette-default.latest.css",
       "fileLatestMinified": "palette-default.latest.min.css"
     },
@@ -22,11 +22,11 @@
       "description": "Warm oranges, golden yellows, and earthy browns - inspired by fall foliage",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.5.11",
-      "file": "palette-autumn.1.5.11.css",
+      "version": "1.5.13",
+      "file": "palette-autumn.1.5.13.css",
       "primaryColor": "#ea580c",
       "inlined": false,
-      "fileMinified": "palette-autumn.1.5.11.min.css",
+      "fileMinified": "palette-autumn.1.5.13.min.css",
       "fileLatest": "palette-autumn.latest.css",
       "fileLatestMinified": "palette-autumn.latest.min.css"
     },
@@ -36,11 +36,11 @@
       "description": "Modern purple gradient for creative and tech brands - inspired by cosmic nebulae",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.5.11",
-      "file": "palette-cosmic.1.5.11.css",
+      "version": "1.5.13",
+      "file": "palette-cosmic.1.5.13.css",
       "primaryColor": "#8b5cf6",
       "inlined": false,
-      "fileMinified": "palette-cosmic.1.5.11.min.css",
+      "fileMinified": "palette-cosmic.1.5.13.min.css",
       "fileLatest": "palette-cosmic.latest.css",
       "fileLatestMinified": "palette-cosmic.latest.min.css"
     },
@@ -50,11 +50,11 @@
       "description": "Deep blues, aqua teals, and seafoam greens - inspired by ocean depths",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.5.11",
-      "file": "palette-ocean.1.5.11.css",
+      "version": "1.5.13",
+      "file": "palette-ocean.1.5.13.css",
       "primaryColor": "#0891b2",
       "inlined": false,
-      "fileMinified": "palette-ocean.1.5.11.min.css",
+      "fileMinified": "palette-ocean.1.5.13.min.css",
       "fileLatest": "palette-ocean.latest.css",
       "fileLatestMinified": "palette-ocean.latest.min.css"
     },
@@ -64,11 +64,11 @@
       "description": "Fresh greens, soft pinks, and bright yellows - inspired by spring blooms",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.5.11",
-      "file": "palette-spring.1.5.11.css",
+      "version": "1.5.13",
+      "file": "palette-spring.1.5.13.css",
       "primaryColor": "#16a34a",
       "inlined": false,
-      "fileMinified": "palette-spring.1.5.11.min.css",
+      "fileMinified": "palette-spring.1.5.13.min.css",
       "fileLatest": "palette-spring.latest.css",
       "fileLatestMinified": "palette-spring.latest.min.css"
     },
@@ -78,11 +78,11 @@
       "description": "Cool blues, icy whites, and frosty grays - inspired by winter landscapes",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.5.11",
-      "file": "palette-winter.1.5.11.css",
+      "version": "1.5.13",
+      "file": "palette-winter.1.5.13.css",
       "primaryColor": "#0077be",
       "inlined": false,
-      "fileMinified": "palette-winter.1.5.11.min.css",
+      "fileMinified": "palette-winter.1.5.13.min.css",
       "fileLatest": "palette-winter.latest.css",
       "fileLatestMinified": "palette-winter.latest.min.css"
     }

package/dist/schemas/ImageGallerySchema.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Schema for ImageGallery component - Image gallery with multiple view variants
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+import 'reflect-metadata';
+import { ViewSchema } from './ViewSchema';
+export declare class GalleryImageModel {
+    url: string;
+    alt: string;
+    thumbnail?: string;
+}
+export type GalleryVariant = 'thumbnails' | 'carousel' | 'grid';
+export type ThumbnailPosition = 'left' | 'bottom' | 'right';
+export declare class ImageGalleryModel extends ViewSchema {
+    images: GalleryImageModel[];
+    productName: string;
+    variant?: GalleryVariant;
+    thumbnailPosition?: ThumbnailPosition;
+    aspectRatio?: string;
+    showZoom?: boolean;
+    maxImages?: number;
+    dataSource?: string;
+    bindingOptions?: Record<string, unknown>;
+}
+export default ImageGalleryModel;
+//# sourceMappingURL=ImageGallerySchema.d.ts.map

package/dist/schemas/ImageGallerySchema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageGallerySchema.d.ts","sourceRoot":"","sources":["../../src/schemas/ImageGallerySchema.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,qBAAa,iBAAiB;IAG5B,GAAG,EAAG,MAAM,CAAC;IAIb,GAAG,EAAG,MAAM,CAAC;IAKb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAGD,MAAM,MAAM,cAAc,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;AAGhE,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE5D,qBACa,iBAAkB,SAAQ,UAAU;IAU/C,MAAM,EAAG,iBAAiB,EAAE,CAAC;IAU7B,WAAW,EAAG,MAAM,CAAC;IAkBrB,OAAO,CAAC,EAAE,cAAc,CAAC;IAkBzB,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IAWtC,WAAW,CAAC,EAAE,MAAM,CAAC;IAUrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAWnB,SAAS,CAAC,EAAE,MAAM,CAAC;IAWnB,UAAU,CAAC,EAAE,MAAM,CAAC;IAUpB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C;AAED,eAAe,iBAAiB,CAAC"}

package/dist/schemas/OptionSelectorSchema.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Schema for OptionSelector component - Universal option selection with visual modes
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+import 'reflect-metadata';
+import { ViewSchema } from './ViewSchema';
+export declare class SelectOptionModel {
+    id: string;
+    label: string;
+    available: boolean;
+    price?: number;
+    hexValue?: string;
+    imageUrl?: string;
+}
+export type DisplayMode = 'text' | 'color' | 'image';
+export type OptionVariant = 'buttons' | 'dropdown' | 'grid';
+export type OptionLayout = 'horizontal' | 'vertical' | 'wrap';
+export type VisualSize = 'small' | 'medium' | 'large';
+export declare class OptionSelectorModel extends ViewSchema {
+    options: SelectOptionModel[];
+    selectedOption?: string;
+    displayMode?: DisplayMode;
+    variant?: OptionVariant;
+    layout?: OptionLayout;
+    visualSize?: VisualSize;
+    showLabel?: boolean;
+    disabled?: boolean;
+    label?: string;
+    dataSource?: string;
+    bindingOptions?: Record<string, unknown>;
+}
+export default OptionSelectorModel;
+//# sourceMappingURL=OptionSelectorSchema.d.ts.map

package/dist/schemas/OptionSelectorSchema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionSelectorSchema.d.ts","sourceRoot":"","sources":["../../src/schemas/OptionSelectorSchema.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,qBAAa,iBAAiB;IAG5B,EAAE,EAAG,MAAM,CAAC;IAIZ,KAAK,EAAG,MAAM,CAAC;IAIf,SAAS,EAAG,OAAO,CAAC;IAKpB,KAAK,CAAC,EAAE,MAAM,CAAC;IAWf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAWlB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAGD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAGrD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;AAG5D,MAAM,MAAM,YAAY,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;AAG9D,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,qBACa,mBAAoB,SAAQ,UAAU;IAUjD,OAAO,EAAG,iBAAiB,EAAE,CAAC;IAW9B,cAAc,CAAC,EAAE,MAAM,CAAC;IAkBxB,WAAW,CAAC,EAAE,WAAW,CAAC;IAkB1B,OAAO,CAAC,EAAE,aAAa,CAAC;IAkBxB,MAAM,CAAC,EAAE,YAAY,CAAC;IAkBtB,UAAU,CAAC,EAAE,UAAU,CAAC;IAUxB,SAAS,CAAC,EAAE,OAAO,CAAC;IAUpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAWnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAWf,UAAU,CAAC,EAAE,MAAM,CAAC;IAUpB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C;AAED,eAAe,mBAAmB,CAAC"}

package/dist/schemas/index.d.ts

@@ -36,6 +36,8 @@ export * from './MetadataItemSchema';
 export * from './PageBannerHeaderSchema';
 export * from './PaletteSwitcherSchema';
 export * from './ProductCardSchema';
+export * from './ImageGallerySchema';
+export * from './OptionSelectorSchema';
 export * from './SafeSpanSchema';
 export * from './SectionSchema';
 export * from './TextInputFieldSchema';

package/dist/schemas/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/schemas/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,YAAY,EAAE,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAClF,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAE3E,OAAO,yBAAyB,CAAC;AAGjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AAGtC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/schemas/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,YAAY,EAAE,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAClF,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAE3E,OAAO,yBAAyB,CAAC;AAGjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AAGtC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qwickapps/react-framework",
-  "version": "1.5.11",
+  "version": "1.5.13",
   "description": "Complete React framework with responsive navigation, flexible layouts, theming system, and reusable components for building modern applications.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/components/QwickApp.css

@@ -451,3 +451,11 @@ code, code.inline-code, pre.code-block {
   padding: 2px 4px;
   border-radius: 4px;
 }
+
+/* Override inline code styles for code blocks */
+pre code {
+  background-color: transparent !important;
+  color: inherit !important;
+  padding: 0;
+  border-radius: 0;
+}

package/src/components/blocks/Article.tsx

@@ -75,7 +75,7 @@ function ArticleView({
       {...htmlProps}
       {...otherProps}
       {...styleProps}
-      {...{
+      sx={{
         // Modern article layout
         maxWidth: '900px',
         mx: 'auto',

package/src/components/blocks/ImageGallery.tsx

@@ -0,0 +1,464 @@
+'use client';
+
+/**
+ * ImageGallery - Comprehensive product image gallery with multiple view variants
+ *
+ * Features:
+ * - Multiple view variants (thumbnails, carousel, grid)
+ * - Configurable thumbnail position (left, bottom, right)
+ * - Image zoom modal
+ * - Video support
+ * - Responsive design
+ * - Accessibility support
+ * - Full serialization support via factory pattern
+ * - Theme-compliant styling with CSS custom properties
+ *
+ * @example
+ * <ImageGallery
+ *   images={[
+ *     { url: '/image1.jpg', alt: 'Product view 1' },
+ *     { url: '/image2.jpg', alt: 'Product view 2' }
+ *   ]}
+ *   productName="Premium Cotton T-Shirt"
+ *   variant="thumbnails"
+ *   thumbnailPosition="left"
+ *   showZoom={true}
+ * />
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React, { useState, useCallback } from 'react';
+import { Box, IconButton, Modal, Grid, Skeleton } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import ZoomInIcon from '@mui/icons-material/ZoomIn';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
+import { ViewProps } from '../shared/viewProps';
+
+export interface GalleryImage {
+  url: string;
+  alt: string;
+  thumbnail?: string;
+}
+
+export interface ImageGalleryProps extends ViewProps {
+  /** Array of product images */
+  images: GalleryImage[];
+
+  /** Product name for accessibility */
+  productName: string;
+
+  /** Gallery display variant */
+  variant?: 'thumbnails' | 'carousel' | 'grid';
+
+  /** Position of thumbnails (only for thumbnails variant) */
+  thumbnailPosition?: 'left' | 'bottom' | 'right';
+
+  /** Aspect ratio for main image */
+  aspectRatio?: string;
+
+  /** Enable zoom functionality */
+  showZoom?: boolean;
+
+  /** Maximum number of images to display */
+  maxImages?: number;
+
+  /** Data source for dynamic loading */
+  dataSource?: string;
+
+  /** Data binding configuration */
+  bindingOptions?: Record<string, unknown>;
+}
+
+// View component - handles the actual rendering
+function ImageGalleryView({
+  images = [],
+  productName,
+  variant = 'thumbnails',
+  thumbnailPosition = 'left',
+  aspectRatio = '1',
+  showZoom = true,
+  maxImages,
+  dataSource,
+  bindingOptions,
+  ...restProps
+}: ImageGalleryProps) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [zoomOpen, setZoomOpen] = useState(false);
+
+  // Limit images if maxImages is specified
+  const displayImages = maxImages ? images.slice(0, maxImages) : images;
+
+  const handlePrevious = useCallback(() => {
+    setSelectedIndex((prev) => (prev === 0 ? displayImages.length - 1 : prev - 1));
+  }, [displayImages.length]);
+
+  const handleNext = useCallback(() => {
+    setSelectedIndex((prev) => (prev === displayImages.length - 1 ? 0 : prev + 1));
+  }, [displayImages.length]);
+
+  const handleThumbnailClick = useCallback((index: number) => {
+    setSelectedIndex(index);
+  }, []);
+
+  const handleZoomOpen = useCallback(() => {
+    if (showZoom) {
+      setZoomOpen(true);
+    }
+  }, [showZoom]);
+
+  const handleZoomClose = useCallback(() => {
+    setZoomOpen(false);
+  }, []);
+
+  // Handle empty images
+  if (!displayImages || displayImages.length === 0) {
+    return (
+      <Box
+        {...restProps}
+        sx={{
+          backgroundColor: 'var(--theme-surface-variant)',
+          borderRadius: 'var(--theme-border-radius)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          aspectRatio,
+          minHeight: 400,
+        }}
+      >
+        <Skeleton
+          variant="rectangular"
+          width="100%"
+          height="100%"
+          sx={{
+            borderRadius: 'var(--theme-border-radius)',
+          }}
+        />
+      </Box>
+    );
+  }
+
+  const currentImage = displayImages[selectedIndex];
+
+  // Render thumbnails
+  const renderThumbnails = () => (
+    <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',
+      }}
+    >
+      {displayImages.map((image, index) => (
+        <Box
+          key={index}
+          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)',
+            },
+          }}
+        >
+          <img
+            src={image.thumbnail || image.url}
+            alt={`${productName} thumbnail ${index + 1}`}
+            style={{
+              width: '100%',
+              height: '100%',
+              objectFit: 'cover',
+            }}
+          />
+        </Box>
+      ))}
+    </Box>
+  );
+
+  // Render main image container
+  const renderMainImage = () => (
+    <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,
+      }}
+    >
+      <img
+        src={currentImage.url}
+        alt={currentImage.alt || `${productName} - Image ${selectedIndex + 1}`}
+        style={{
+          width: '100%',
+          height: '100%',
+          objectFit: 'contain',
+          display: 'block',
+        }}
+      />
+
+      {/* Zoom button */}
+      {showZoom && (
+        <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"
+        >
+          <ZoomInIcon />
+        </IconButton>
+      )}
+
+      {/* Navigation arrows for carousel */}
+      {variant === 'carousel' && displayImages.length > 1 && (
+        <>
+          <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"
+          >
+            <ChevronLeftIcon />
+          </IconButton>
+          <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"
+          >
+            <ChevronRightIcon />
+          </IconButton>
+        </>
+      )}
+    </Box>
+  );
+
+  // Render zoom modal
+  const renderZoomModal = () => (
+    <Modal
+      open={zoomOpen}
+      onClose={handleZoomClose}
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.9)',
+      }}
+    >
+      <Box
+        sx={{
+          position: 'relative',
+          maxWidth: '90vw',
+          maxHeight: '90vh',
+          outline: 'none',
+        }}
+      >
+        <IconButton
+          onClick={handleZoomClose}
+          sx={{
+            position: 'absolute',
+            top: -40,
+            right: 0,
+            color: 'white',
+            '&:hover': {
+              backgroundColor: 'rgba(255, 255, 255, 0.1)',
+            },
+          }}
+          aria-label="Close zoom"
+        >
+          <CloseIcon />
+        </IconButton>
+        <img
+          src={currentImage.url}
+          alt={currentImage.alt || `${productName} - Zoomed view`}
+          style={{
+            maxWidth: '100%',
+            maxHeight: '90vh',
+            objectFit: 'contain',
+          }}
+        />
+      </Box>
+    </Modal>
+  );
+
+  // Render thumbnails variant
+  if (variant === 'thumbnails') {
+    return (
+      <Box {...restProps}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: {
+              xs: 'column',
+              sm: thumbnailPosition === 'bottom' ? 'column' : 'row',
+            },
+            gap: 2,
+          }}
+        >
+          {/* Thumbnails on left */}
+          {thumbnailPosition === 'left' && (
+            <Box sx={{ order: { xs: 2, sm: 1 } }}>
+              {renderThumbnails()}
+            </Box>
+          )}
+
+          {/* Main image */}
+          <Box sx={{ flex: 1, order: { xs: 1, sm: thumbnailPosition === 'left' ? 2 : 1 } }}>
+            {renderMainImage()}
+          </Box>
+
+          {/* Thumbnails on right */}
+          {thumbnailPosition === 'right' && (
+            <Box sx={{ order: { xs: 2, sm: 2 } }}>
+              {renderThumbnails()}
+            </Box>
+          )}
+
+          {/* Thumbnails on bottom */}
+          {thumbnailPosition === 'bottom' && (
+            <Box sx={{ order: 2 }}>
+              {renderThumbnails()}
+            </Box>
+          )}
+        </Box>
+        {renderZoomModal()}
+      </Box>
+    );
+  }
+
+  // Render carousel variant
+  if (variant === 'carousel') {
+    return (
+      <Box {...restProps}>
+        {renderMainImage()}
+        {/* Dot indicators */}
+        {displayImages.length > 1 && (
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              gap: 1,
+              mt: 2,
+            }}
+          >
+            {displayImages.map((_, index) => (
+              <Box
+                key={index}
+                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)',
+                  },
+                }}
+              />
+            ))}
+          </Box>
+        )}
+        {renderZoomModal()}
+      </Box>
+    );
+  }
+
+  // Render grid variant
+  if (variant === 'grid') {
+    return (
+      <Box {...restProps}>
+        <Grid container spacing={2}>
+          {displayImages.map((image, index) => (
+            <Grid item xs={6} sm={4} md={3} key={index}>
+              <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)',
+                  },
+                }}
+              >
+                <img
+                  src={image.url}
+                  alt={image.alt || `${productName} - Image ${index + 1}`}
+                  style={{
+                    width: '100%',
+                    height: '100%',
+                    objectFit: 'cover',
+                  }}
+                />
+              </Box>
+            </Grid>
+          ))}
+        </Grid>
+        {renderZoomModal()}
+      </Box>
+    );
+  }
+
+  return null;
+}
+
+// Create the serializable ImageGallery component using the factory
+export const ImageGallery: SerializableComponent<ImageGalleryProps> =
+  createSerializableView<ImageGalleryProps>({
+    tagName: 'ImageGallery',
+    version: '1.0.0',
+    role: 'view',
+    View: ImageGalleryView,
+  });
+
+export default ImageGallery;