@merchi/product-editor 0.1.9

package/dist/components/LayerPanel.js

@@ -0,0 +1,223 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var ProductEditorContext_1 = require("../context/ProductEditorContext");
+var grommet_icons_1 = require("grommet-icons");
+require("../styles/LayerPanel.css");
+var reorder = function (list, startIndex, endIndex) {
+    var result = Array.from(list);
+    var removed = result.splice(startIndex, 1)[0];
+    result.splice(endIndex, 0, removed);
+    return result;
+};
+var LAYER_ITEM_HEIGHT_PX = 45;
+var LayerPanel = function () {
+    var _a = (0, ProductEditorContext_1.useProductEditor)(), canvas = _a.canvas, toggleLayerPanel = _a.toggleLayerPanel, selectedObjectId = _a.selectedObjectId, selectObject = _a.selectObject, isMobileView = _a.isMobileView;
+    var _b = (0, react_1.useState)([]), layers = _b[0], setLayers = _b[1];
+    var dragItemIndex = (0, react_1.useRef)(null);
+    var dragOverItemIndex = (0, react_1.useRef)(null);
+    var _c = (0, react_1.useState)(false), isDraggingOver = _c[0], setIsDraggingOver = _c[1];
+    var _d = (0, react_1.useState)(null), dragOverIndexVisual = _d[0], setDragOverIndexVisual = _d[1];
+    (0, react_1.useEffect)(function () {
+        if (canvas) {
+            var updateLayers_1 = function () {
+                var filteredObjects = canvas.getObjects().filter(function (obj) {
+                    return (obj.type === 'i-text' || obj.type === 'image') && obj.selectable;
+                });
+                setLayers(__spreadArray([], filteredObjects, true).reverse());
+            };
+            updateLayers_1();
+            var handleCanvasChange_1 = function () { return updateLayers_1(); };
+            canvas.on('object:added', handleCanvasChange_1);
+            canvas.on('object:removed', handleCanvasChange_1);
+            canvas.on('stack:changed', handleCanvasChange_1);
+            canvas.on('selection:created', handleCanvasChange_1);
+            canvas.on('selection:updated', handleCanvasChange_1);
+            canvas.on('selection:cleared', handleCanvasChange_1);
+            return function () {
+                canvas.off('object:added', handleCanvasChange_1);
+                canvas.off('object:removed', handleCanvasChange_1);
+                canvas.off('stack:changed', handleCanvasChange_1);
+                canvas.off('selection:created', handleCanvasChange_1);
+                canvas.off('selection:updated', handleCanvasChange_1);
+                canvas.off('selection:cleared', handleCanvasChange_1);
+            };
+        }
+    }, [canvas]);
+    var getLayerInfo = function (object) {
+        var _a, _b;
+        if (object.type === 'i-text') {
+            return {
+                name: ((_a = object.text) === null || _a === void 0 ? void 0 : _a.substring(0, 20)) || 'Text',
+                icon: react_1.default.createElement(grommet_icons_1.TextAlignCenter, { size: "medium" })
+            };
+        }
+        if (object.type === 'image') {
+            var imageObject = object;
+            var src = imageObject.getSrc();
+            return {
+                name: object.name || (src ? (_b = src.split('/').pop()) === null || _b === void 0 ? void 0 : _b.substring(0, 20) : undefined) || 'Image',
+                icon: react_1.default.createElement("img", { src: src, alt: "layer thumb", className: "layer-thumbnail" })
+            };
+        }
+        return { name: 'Unknown Layer', icon: react_1.default.createElement(react_1.default.Fragment, null) };
+    };
+    var handleDragStart = function (e, index) {
+        if (isMobileView)
+            return;
+        dragItemIndex.current = index;
+        e.dataTransfer.effectAllowed = 'move';
+        setTimeout(function () { return setIsDraggingOver(true); }, 0);
+    };
+    var handleDragEnterItem = function (e, index) {
+        if (isMobileView)
+            return;
+        e.preventDefault();
+        dragOverItemIndex.current = index;
+        setDragOverIndexVisual(index);
+    };
+    var handleDragLeaveList = function (e) {
+        if (isMobileView)
+            return;
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+            dragOverItemIndex.current = null;
+            setDragOverIndexVisual(null);
+        }
+    };
+    var handleDragOverList = function (e) {
+        if (isMobileView)
+            return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+    };
+    var handleDrop = function (e) {
+        if (isMobileView)
+            return;
+        e.preventDefault();
+        var sourceIndex = dragItemIndex.current;
+        var destinationIndex = dragOverItemIndex.current;
+        setIsDraggingOver(false);
+        setDragOverIndexVisual(null);
+        dragItemIndex.current = null;
+        dragOverItemIndex.current = null;
+        if (sourceIndex === null || destinationIndex === null || sourceIndex === destinationIndex) {
+            return;
+        }
+        var reorderedLayers = reorder(layers, sourceIndex, destinationIndex);
+        var objectToMove = layers[sourceIndex];
+        setLayers(reorderedLayers);
+        if (canvas && objectToMove) {
+            var totalObjects = canvas.getObjects().length;
+            var fabricTargetIndex = totalObjects - 1 - destinationIndex;
+            canvas.moveTo(objectToMove, fabricTargetIndex);
+            canvas.requestRenderAll();
+        }
+    };
+    var handleDragEnd = function (e) {
+        if (isMobileView)
+            return;
+        setIsDraggingOver(false);
+        setDragOverIndexVisual(null);
+        dragItemIndex.current = null;
+        dragOverItemIndex.current = null;
+    };
+    var moveLayerUp = function (index) {
+        if (index <= 0 || !canvas)
+            return;
+        var objectToMove = layers[index];
+        var objectAbove = layers[index - 1];
+        var fabricIndexOfAbove = canvas.getObjects().indexOf(objectAbove);
+        if (fabricIndexOfAbove < 0) {
+            console.error("Could not find objectAbove in canvas stack for moveLayerUp");
+            return;
+        }
+        var targetFabricIndex = fabricIndexOfAbove;
+        canvas.moveTo(objectToMove, targetFabricIndex);
+        setLayers(function (prevLayers) { return reorder(prevLayers, index, index - 1); });
+        canvas.requestRenderAll();
+    };
+    var moveLayerDown = function (index) {
+        if (index >= layers.length - 1 || !canvas)
+            return;
+        var objectToMove = layers[index];
+        var objectBelow = layers[index + 1];
+        var fabricIndexOfBelow = canvas.getObjects().indexOf(objectBelow);
+        if (fabricIndexOfBelow < 0) {
+            console.error("Could not find objectBelow in canvas stack for moveLayerDown");
+            return;
+        }
+        var targetFabricIndex = fabricIndexOfBelow;
+        canvas.moveTo(objectToMove, targetFabricIndex);
+        setLayers(function (prevLayers) { return reorder(prevLayers, index, index + 1); });
+        canvas.requestRenderAll();
+    };
+    var handleLayerClick = function (layer) {
+        selectObject(layer);
+    };
+    return (react_1.default.createElement("div", { className: "layer-panel" },
+        react_1.default.createElement("div", { className: "layer-panel-header" },
+            react_1.default.createElement("h3", null, "Layers"),
+            react_1.default.createElement("button", { onClick: toggleLayerPanel, className: "close-button", title: "Close Panel" },
+                react_1.default.createElement(grommet_icons_1.Close, { size: "small" }))),
+        react_1.default.createElement("ul", { className: "layer-list ".concat(isDraggingOver ? 'is-dragging-active' : ''), onDragOver: handleDragOverList, onDrop: handleDrop, onDragLeave: handleDragLeaveList },
+            layers.map(function (layer, index) {
+                var layerInfo = getLayerInfo(layer);
+                var layerId = layer.id;
+                var isSelected = layerId && layerId === selectedObjectId;
+                var isDraggingThisItem = !isMobileView && isDraggingOver && dragItemIndex.current === index;
+                var transformStyle = 'translateY(0px)';
+                if (!isMobileView && isDraggingOver && dragItemIndex.current !== null && dragOverIndexVisual !== null && !isDraggingThisItem) {
+                    var draggingFromIndex = dragItemIndex.current;
+                    var hoveringOverIndex = dragOverIndexVisual;
+                    if (index > draggingFromIndex && index <= hoveringOverIndex) {
+                        transformStyle = "translateY(-".concat(LAYER_ITEM_HEIGHT_PX, "px)");
+                    }
+                    else if (index < draggingFromIndex && index >= hoveringOverIndex) {
+                        transformStyle = "translateY(".concat(LAYER_ITEM_HEIGHT_PX, "px)");
+                    }
+                }
+                return (react_1.default.createElement("li", { key: "layer-".concat(layerId || index), draggable: !isMobileView, onDragStart: function (e) { return handleDragStart(e, index); }, onDragEnter: function (e) { return handleDragEnterItem(e, index); }, onDragEnd: handleDragEnd, onClick: function () { return handleLayerClick(layer); }, className: "layer-item ".concat(isSelected ? 'selected' : '', " ").concat(isDraggingThisItem ? 'is-dragging-item' : ''), style: { transform: transformStyle } },
+                    react_1.default.createElement("span", { className: "layer-icon" }, layerInfo.icon),
+                    react_1.default.createElement("span", { className: "layer-name" }, layerInfo.name),
+                    isMobileView ? (react_1.default.createElement("div", { className: "layer-mobile-controls" },
+                        react_1.default.createElement("button", { className: "layer-move-button", onClick: function (e) { e.stopPropagation(); moveLayerUp(index); }, disabled: index === 0, title: "Move Up" },
+                            react_1.default.createElement(grommet_icons_1.Up, { size: "small" })),
+                        react_1.default.createElement("button", { className: "layer-move-button", onClick: function (e) { e.stopPropagation(); moveLayerDown(index); }, disabled: index === layers.length - 1, title: "Move Down" },
+                            react_1.default.createElement(grommet_icons_1.Down, { size: "small" })))) : (react_1.default.createElement("span", { className: "layer-drag-indicator" },
+                        react_1.default.createElement(grommet_icons_1.Drag, { size: "small" })))));
+            }),
+            layers.length === 0 && react_1.default.createElement("li", { className: "no-layers" }, "No layers found"))));
+};
+exports.default = LayerPanel;

package/dist/components/LoadingOverlay.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import '../styles/LoadingOverlay.css';
+interface LoadingOverlayProps {
+    isLoading: boolean;
+    message?: string;
+    className?: string;
+}
+declare const LoadingOverlay: React.FC<LoadingOverlayProps>;
+export default LoadingOverlay;

package/dist/components/LoadingOverlay.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+require("../styles/LoadingOverlay.css");
+var LoadingOverlay = function (_a) {
+    var isLoading = _a.isLoading, _b = _a.message, message = _b === void 0 ? "Loading Canvas..." : _b, _c = _a.className, className = _c === void 0 ? "" : _c;
+    if (!isLoading) {
+        return null;
+    }
+    return (react_1.default.createElement("div", { className: "loading-overlay ".concat(className) },
+        react_1.default.createElement("div", { className: "loading-spinner" }),
+        react_1.default.createElement("p", null, message)));
+};
+exports.default = LoadingOverlay;

package/dist/components/ProductEditor.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import '../styles/ProductEditor.css';
+declare const ProductEditor: React.FC;
+export default ProductEditor;

package/dist/components/ProductEditor.js

@@ -0,0 +1,67 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var ProductEditorContext_1 = require("../context/ProductEditorContext");
+var FloatingToolbar_1 = __importDefault(require("./FloatingToolbar"));
+var ProductPreviews_1 = __importDefault(require("./ProductPreviews"));
+var Toolbar_1 = __importDefault(require("./Toolbar"));
+var LoadingOverlay_1 = __importDefault(require("./LoadingOverlay"));
+var TextToolbar_1 = __importDefault(require("./TextToolbar"));
+var LayerPanel_1 = __importDefault(require("./LayerPanel"));
+require("../styles/ProductEditor.css");
+var ProductEditor = function () {
+    var _a = (0, ProductEditorContext_1.useProductEditor)(), canvasRef = _a.canvasRef, draftTemplates = _a.draftTemplates, groupIndex = _a.groupIndex, handleTemplateChange = _a.handleTemplateChange, isMobileView = _a.isMobileView, selectedTemplate = _a.selectedTemplate, showPreview = _a.showPreview, inputName = _a.inputName, isCanvasLoading = _a.isCanvasLoading, hookForm = _a.hookForm, selectedTextObject = _a.selectedTextObject, showLayerPanel = _a.showLayerPanel, renderedDraftPreviews = _a.renderedDraftPreviews;
+    var disableCanvasEvents = function (e) {
+        if (e.target.closest('.floating-toolbar') ||
+            e.target.closest('.bottom-preview-section') ||
+            e.target.closest('.mobile-bottom-toolbar')) {
+            return;
+        }
+        e.stopPropagation();
+    };
+    var getTemplatePreviewImage = function (templateId) {
+        if (!templateId)
+            return null;
+        var renderedPreview = renderedDraftPreviews === null || renderedDraftPreviews === void 0 ? void 0 : renderedDraftPreviews.find(function (preview) { return preview.templateId === templateId; });
+        if (renderedPreview === null || renderedPreview === void 0 ? void 0 : renderedPreview.canvasPreview) {
+            return renderedPreview.canvasPreview;
+        }
+        return null;
+    };
+    var register = hookForm === null || hookForm === void 0 ? void 0 : hookForm.register;
+    return (react_1.default.createElement("div", { className: "product-editor" },
+        register && (react_1.default.createElement("input", __assign({}, register(inputName), { type: 'hidden' }))),
+        !isCanvasLoading && draftTemplates.length > 0 && (react_1.default.createElement("div", { className: "template-buttons" }, draftTemplates.map(function (_a) {
+            var _b;
+            var template = _a.template;
+            return (react_1.default.createElement("div", { key: template.id, className: "template-button ".concat(selectedTemplate === template.id ? 'selected' : ''), onClick: function () { return handleTemplateChange(template); } },
+                !isMobileView && (getTemplatePreviewImage(template.id) || (template.file && template.file.viewUrl)) && (react_1.default.createElement("img", { src: getTemplatePreviewImage(template.id) || (((_b = template.file) === null || _b === void 0 ? void 0 : _b.viewUrl) || ''), alt: template.name || "Template ".concat(template.id), className: "template-thumbnail" })),
+                react_1.default.createElement("span", { className: "template-name" }, template.name || "Template ".concat(template.id))));
+        }))),
+        react_1.default.createElement("div", { className: "main-editor-layout", style: { position: 'relative' } },
+            react_1.default.createElement(LoadingOverlay_1.default, { isLoading: isCanvasLoading, className: "canvas-loading" }),
+            react_1.default.createElement("div", { className: "editor-container ".concat(isMobileView && showPreview ? 'has-bottom-padding' : '') },
+                selectedTextObject && react_1.default.createElement(TextToolbar_1.default, null),
+                react_1.default.createElement("div", { className: "canvas-area", onClick: disableCanvasEvents },
+                    react_1.default.createElement("canvas", { ref: canvasRef })),
+                !isMobileView && !isCanvasLoading && react_1.default.createElement(FloatingToolbar_1.default, null),
+                showLayerPanel && react_1.default.createElement(LayerPanel_1.default, null)),
+            showPreview && react_1.default.createElement(ProductPreviews_1.default, null)),
+        isMobileView && !isCanvasLoading && (react_1.default.createElement("div", { className: "mobile-bottom-toolbar" },
+            react_1.default.createElement(Toolbar_1.default, null)))));
+};
+exports.default = ProductEditor;

package/dist/components/ProductImageGallery.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface ImageGalleryProps {
+    fallbackImageUrl?: string;
+}
+declare const ProductImageGallery: React.FC<ImageGalleryProps>;
+export default ProductImageGallery;

package/dist/components/ProductImageGallery.js

@@ -0,0 +1,148 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var framer_motion_1 = require("framer-motion");
+var ImageNavButton_1 = __importDefault(require("./ImageNavButton"));
+var ImageZoomModal_1 = __importDefault(require("./ImageZoomModal"));
+var grommet_icons_1 = require("grommet-icons");
+var ProductEditorContext_1 = require("../context/ProductEditorContext");
+var useSwipeNavigate_1 = require("../hooks/useSwipeNavigate");
+var ProductImageGallery = function (_a) {
+    var _b;
+    var _c = _a.fallbackImageUrl, fallbackImageUrl = _c === void 0 ? '' : _c;
+    var product = (0, ProductEditorContext_1.useProductEditor)().product;
+    var _d = product.featureImage, featureImage = _d === void 0 ? null : _d, _e = product.images, images = _e === void 0 ? [] : _e, _f = product.name, productName = _f === void 0 ? 'Loading...' : _f;
+    var _images = featureImage ? __spreadArray([featureImage], images, true) : images;
+    var allImages = _images.map(function (image) {
+        if (!image)
+            return { viewUrl: '/blueman_white.png' };
+        return { viewUrl: image.viewUrl };
+    });
+    var totalImages = allImages.length;
+    // image browser related states
+    var _g = (0, react_1.useState)('right'), slideDirection = _g[0], setSlideDirection = _g[1];
+    var _h = (0, react_1.useState)(false), isZoomModalOpen = _h[0], setIsZoomModalOpen = _h[1];
+    var _j = (0, react_1.useState)(true), isImageLoading = _j[0], setIsImageLoading = _j[1];
+    var _k = (0, react_1.useState)(0), currentIndex = _k[0], setCurrentIndex = _k[1];
+    var _l = (0, react_1.useState)(((_b = allImages[currentIndex]) === null || _b === void 0 ? void 0 : _b.viewUrl) || fallbackImageUrl || '/blueman_white.png'), currentImageUrl = _l[0], setCurrentImageUrl = _l[1];
+    (0, react_1.useEffect)(function () {
+        var _a;
+        // set current image URL (for normal image mode)
+        if (allImages && allImages.length > 0) {
+            setCurrentImageUrl(((_a = allImages[currentIndex]) === null || _a === void 0 ? void 0 : _a.viewUrl) || '/blueman_white.png');
+        }
+    }, [allImages, currentIndex, fallbackImageUrl]);
+    var handleNavigation = function (newDirection) {
+        var _a;
+        if (!allImages || allImages.length <= 1)
+            return;
+        setSlideDirection(newDirection === 'left' ? 'left' : 'right');
+        var newIndex;
+        var actualTotalImages = Math.min(totalImages, allImages.length);
+        if (newDirection === 'left') {
+            newIndex = currentIndex === 0 ? actualTotalImages - 1 : currentIndex - 1;
+        }
+        else {
+            newIndex = currentIndex === actualTotalImages - 1 ? 0 : currentIndex + 1;
+        }
+        setCurrentIndex(newIndex);
+        setCurrentImageUrl(((_a = allImages[newIndex]) === null || _a === void 0 ? void 0 : _a.viewUrl) || '/blueman_white.png');
+    };
+    var handleThumbnailClick = function (index) {
+        var _a;
+        setCurrentIndex(index);
+        setCurrentImageUrl(((_a = allImages[index]) === null || _a === void 0 ? void 0 : _a.viewUrl) || '/blueman_white.png');
+    };
+    // Use the swipe hook
+    var swipeHandlers = (0, useSwipeNavigate_1.useSwipeNavigate)({
+        onSwipeLeft: function () { return handleNavigation('right'); },
+        onSwipeRight: function () { return handleNavigation('left'); },
+    });
+    var slideVariants = {
+        enter: function (direction) { return ({
+            x: direction === 'left' ? -1000 : 1000,
+            opacity: 0
+        }); },
+        center: {
+            zIndex: 1,
+            x: 0,
+            opacity: 1
+        },
+        exit: function (direction) { return ({
+            zIndex: 0,
+            x: direction === 'left' ? 1000 : -1000,
+            opacity: 0
+        }); }
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "image-gallery-container relative" },
+            react_1.default.createElement("div", { className: "image-container overflow-hidden" },
+                react_1.default.createElement(framer_motion_1.AnimatePresence, { initial: false, custom: slideDirection },
+                    react_1.default.createElement(framer_motion_1.motion.div, __assign({ key: currentIndex, custom: slideDirection, variants: slideVariants, initial: "enter", animate: "center", exit: "exit", transition: {
+                            x: { type: "spring", stiffness: 300, damping: 30 },
+                            opacity: { duration: 0.2 }
+                        }, className: "image-slide" }, swipeHandlers),
+                        react_1.default.createElement("img", { src: currentImageUrl, alt: productName || "Product Image", className: "gallery-image ".concat(isImageLoading ? '' : 'image-loaded'), onLoad: function () { return setIsImageLoading(false); } }),
+                        isImageLoading && (react_1.default.createElement("div", { className: "loading-indicator" },
+                            react_1.default.createElement("div", { className: "loading-spinner" }))))),
+                react_1.default.createElement("button", { onClick: function () { return setIsZoomModalOpen(true); }, className: "zoom-button", type: "button" },
+                    react_1.default.createElement(grommet_icons_1.ZoomIn, { className: "zoom-icon" }))),
+            allImages.length > 1 && (react_1.default.createElement("div", { className: "nav-buttons-container" },
+                react_1.default.createElement(ImageNavButton_1.default, { direction: "left", onClick: function () { return handleNavigation('left'); } }),
+                react_1.default.createElement(ImageNavButton_1.default, { direction: "right", onClick: function () { return handleNavigation('right'); } })))),
+        allImages.length > 1 && (react_1.default.createElement("div", { className: "thumbnails-container" },
+            react_1.default.createElement("div", { className: "thumbnails-row" }, allImages.slice(0, 5).map(function (image, index) {
+                var imageSrc = image.viewUrl || "/blueman_white.png";
+                var isSelected = index === currentIndex;
+                return (react_1.default.createElement("button", { key: index, onClick: function () { return handleThumbnailClick(index); }, className: "thumbnail-button ".concat(isSelected ? 'selected' : ''), type: "button" },
+                    react_1.default.createElement("img", { src: imageSrc, loading: "lazy", alt: "Product Image ".concat(index + 1), className: "thumbnail-image" })));
+            })))),
+        react_1.default.createElement(ImageZoomModal_1.default, { isOpen: isZoomModalOpen, onClose: function () { return setIsZoomModalOpen(false); }, imageUrl: currentImageUrl, productName: productName, totalImages: allImages.length, currentIndex: currentIndex, allImages: allImages })));
+};
+exports.default = ProductImageGallery;

package/dist/components/ProductPreviews.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import '../styles/ProductEditor.css';
+import '../styles/BottomPreviewDisplay.css';
+interface BottomPreviewDisplayProps {
+}
+declare const ProductPreviews: React.FC<BottomPreviewDisplayProps>;
+export default ProductPreviews;