@merchi/product-editor 0.1.9

package/dist/components/ProductPreviews.js

@@ -0,0 +1,281 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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 ImageZoomModal_1 = __importDefault(require("./ImageZoomModal"));
+require("../styles/ProductEditor.css");
+require("../styles/BottomPreviewDisplay.css");
+var ProductEditorContext_1 = require("../context/ProductEditorContext");
+var draftTemplateUtils_1 = require("../utils/draftTemplateUtils");
+var psdRenderUtils_1 = require("../utils/psdRenderUtils");
+var ProductPreviews = function () {
+    var _a, _b;
+    var _c = (0, ProductEditorContext_1.useProductEditor)(), draftTemplates = _c.draftTemplates, draftPreviews = _c.draftPreviews, loadingPreviews = _c.loadingPreviews, renderedDraftPreviews = _c.renderedDraftPreviews;
+    var _d = (0, react_1.useState)(false), isModalOpen = _d[0], setIsModalOpen = _d[1];
+    var _e = (0, react_1.useState)(0), selectedPreviewIndex = _e[0], setSelectedPreviewIndex = _e[1];
+    var _f = (0, react_1.useState)([]), renderedPreviews = _f[0], setRenderedPreviews = _f[1];
+    var _g = (0, react_1.useState)(false), isProcessing = _g[0], setIsProcessing = _g[1];
+    // Use refs instead of state to track processed data without causing re-renders
+    var processedPreviewIdsRef = (0, react_1.useRef)(new Set());
+    // Track which template versions we've already processed
+    var processedTemplateVersionsRef = (0, react_1.useRef)(new Map());
+    // For debugging
+    var renderCountRef = (0, react_1.useRef)(0);
+    // Track if this is first mount
+    var isFirstMountRef = (0, react_1.useRef)(true);
+    // When mappedPreviews or renderedDraftPreviews changes, update our rendered PNGs
+    (0, react_1.useEffect)(function () {
+        // Skip first render to avoid processing before renderedDraftPreviews are available
+        if (isFirstMountRef.current) {
+            isFirstMountRef.current = false;
+            return;
+        }
+        renderCountRef.current++;
+        var processPreviewsWithLayers = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var mappedPreviews, changedTemplateIds, previewsToProcess, processedResults_1, error_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        // Skip if we're already processing or if we don't have previews
+                        if (isProcessing || !draftPreviews || draftPreviews.length === 0) {
+                            return [2 /*return*/];
+                        }
+                        mappedPreviews = (0, draftTemplateUtils_1.mapPreviewsWithRendered)(draftTemplates, draftPreviews, renderedDraftPreviews);
+                        // Skip if there are no mappedPreviews to process
+                        if (!mappedPreviews || mappedPreviews.length === 0) {
+                            return [2 /*return*/];
+                        }
+                        changedTemplateIds = new Set();
+                        renderedDraftPreviews.forEach(function (rdp) {
+                            var templateId = rdp.templateId;
+                            var templateVersion = rdp.draft; // Use the image data URL as a version identifier
+                            var previousVersion = processedTemplateVersionsRef.current.get(templateId);
+                            if (previousVersion !== templateVersion) {
+                                changedTemplateIds.add(templateId);
+                                // Update the stored version
+                                processedTemplateVersionsRef.current.set(templateId, templateVersion);
+                            }
+                        });
+                        previewsToProcess = mappedPreviews.filter(function (mp) {
+                            var previewId = mp.draftPreview.id;
+                            // Always process if we haven't processed this preview yet
+                            if (!processedPreviewIdsRef.current.has(previewId)) {
+                                return true;
+                            }
+                            // If no templates have changed, skip reprocessing
+                            if (changedTemplateIds.size === 0) {
+                                return false;
+                            }
+                            // Check if this preview uses any templates that have changed
+                            var shouldProcess = mp.draftPreviewLayers.some(function (layer) {
+                                return layer.renderedLayer && changedTemplateIds.has(layer.renderedLayer.templateId);
+                            });
+                            return shouldProcess;
+                        });
+                        // Skip if there's nothing new to process
+                        if (previewsToProcess.length === 0) {
+                            return [2 /*return*/];
+                        }
+                        setIsProcessing(true);
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, 4, 5]);
+                        return [4 /*yield*/, (0, psdRenderUtils_1.renderDraftPreviewsWithLayers)(previewsToProcess)];
+                    case 2:
+                        processedResults_1 = _a.sent();
+                        // Update our rendered previews state
+                        setRenderedPreviews(function (prevRendered) {
+                            var newRendered = __spreadArray([], prevRendered, true);
+                            processedResults_1.forEach(function (result) {
+                                var existingIndex = newRendered.findIndex(function (r) { return r.draftPreviewId === result.draftPreviewId; });
+                                if (existingIndex !== -1) {
+                                    // Update existing preview
+                                    newRendered[existingIndex] = result;
+                                }
+                                else {
+                                    // Add new preview
+                                    newRendered.push(result);
+                                }
+                            });
+                            return newRendered;
+                        });
+                        // Update our processed IDs ref (not state)
+                        processedResults_1.forEach(function (result) {
+                            if (result.draftPreviewId !== undefined) {
+                                processedPreviewIdsRef.current.add(result.draftPreviewId);
+                            }
+                        });
+                        return [3 /*break*/, 5];
+                    case 3:
+                        error_1 = _a.sent();
+                        console.error('Failed to process previews with layers:', error_1);
+                        return [3 /*break*/, 5];
+                    case 4:
+                        setIsProcessing(false);
+                        return [7 /*endfinally*/];
+                    case 5: return [2 /*return*/];
+                }
+            });
+        }); };
+        processPreviewsWithLayers();
+    }, [draftTemplates, draftPreviews, renderedDraftPreviews, isProcessing]);
+    // One-time initialization to handle initial rendering of previews 
+    // when component mounts and renderedDraftPreviews are available
+    (0, react_1.useEffect)(function () {
+        if ((draftPreviews === null || draftPreviews === void 0 ? void 0 : draftPreviews.length) > 0 && (renderedDraftPreviews === null || renderedDraftPreviews === void 0 ? void 0 : renderedDraftPreviews.length) > 0 && renderedPreviews.length === 0) {
+            var mappedPreviews_1 = (0, draftTemplateUtils_1.mapPreviewsWithRendered)(draftTemplates, draftPreviews, renderedDraftPreviews);
+            if ((mappedPreviews_1 === null || mappedPreviews_1 === void 0 ? void 0 : mappedPreviews_1.length) > 0) {
+                (function () { return __awaiter(void 0, void 0, void 0, function () {
+                    var processedResults, error_2;
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0:
+                                setIsProcessing(true);
+                                _a.label = 1;
+                            case 1:
+                                _a.trys.push([1, 3, 4, 5]);
+                                return [4 /*yield*/, (0, psdRenderUtils_1.renderDraftPreviewsWithLayers)(mappedPreviews_1)];
+                            case 2:
+                                processedResults = _a.sent();
+                                // Store initial results
+                                setRenderedPreviews(processedResults);
+                                // Mark these previews as processed
+                                processedResults.forEach(function (result) {
+                                    if (result.draftPreviewId !== undefined) {
+                                        processedPreviewIdsRef.current.add(result.draftPreviewId);
+                                    }
+                                });
+                                // Store initial template versions
+                                renderedDraftPreviews.forEach(function (rdp) {
+                                    processedTemplateVersionsRef.current.set(rdp.templateId, rdp.draft);
+                                });
+                                return [3 /*break*/, 5];
+                            case 3:
+                                error_2 = _a.sent();
+                                console.error('[Initialization] Error processing previews:', error_2);
+                                return [3 /*break*/, 5];
+                            case 4:
+                                setIsProcessing(false);
+                                return [7 /*endfinally*/];
+                            case 5: return [2 /*return*/];
+                        }
+                    });
+                }); })();
+            }
+        }
+    }, [draftPreviews, renderedDraftPreviews, draftTemplates, renderedPreviews.length]);
+    var openModal = function (index) {
+        setSelectedPreviewIndex(index);
+        setIsModalOpen(true);
+    };
+    var closeModal = function () {
+        setIsModalOpen(false);
+    };
+    // Determine the URL to display for each preview
+    var previewUrlsForDisplay = draftPreviews.length > 0
+        ? draftPreviews.map(function (preview) {
+            // If we have a rendered PNG for this preview, use it
+            var renderedPreview = renderedPreviews.find(function (rp) { return rp.draftPreviewId === preview.id; });
+            return (renderedPreview === null || renderedPreview === void 0 ? void 0 : renderedPreview.pngDataUrl) || '';
+        })
+        : renderedDraftPreviews.map(function (preview) {
+            // If we have a rendered PNG for this preview, use it
+            return preview.canvasPreview;
+        });
+    var previews = (draftPreviews === null || draftPreviews === void 0 ? void 0 : draftPreviews.length) > 0 ? draftPreviews : renderedDraftPreviews;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        !isModalOpen && (react_1.default.createElement("div", { className: "bottom-preview-section" },
+            react_1.default.createElement("div", { className: "preview-images" }, previews.map(function (preview, index) {
+                var _a;
+                return loadingPreviews || isProcessing ? (react_1.default.createElement("div", { key: "loading-".concat(preview.id || index), className: 'preview-image-box' },
+                    react_1.default.createElement("div", { className: "preview-image-box-loading-spinner" }))) : (react_1.default.createElement("div", { key: preview.id || "preview-".concat(index), className: "preview-image-box", onClick: function () { return openModal(index); }, style: {
+                        backgroundImage: "url(".concat(previewUrlsForDisplay[index] || ((_a = preview.file) === null || _a === void 0 ? void 0 : _a.viewUrl) || '', ")"),
+                        backgroundSize: 'contain',
+                        backgroundRepeat: 'no-repeat',
+                        backgroundPosition: 'center center'
+                    }, title: "Preview ".concat(index + 1) }));
+            })))),
+        react_1.default.createElement(ImageZoomModal_1.default, { isOpen: isModalOpen, onClose: closeModal, imageUrl: previewUrlsForDisplay[selectedPreviewIndex] || ((_b = (_a = previews[selectedPreviewIndex]) === null || _a === void 0 ? void 0 : _a.file) === null || _b === void 0 ? void 0 : _b.viewUrl) || '', productName: "Preview", totalImages: previews.length, currentIndex: selectedPreviewIndex, allImages: previews.map(function (preview, index) { return (__assign(__assign({}, preview), { key: preview.id || "modal-preview-".concat(index) })); }) })));
+};
+exports.default = ProductPreviews;

package/dist/components/TextToolbar.d.ts

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

package/dist/components/TextToolbar.js

@@ -0,0 +1,117 @@
+"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 __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 react_select_1 = __importDefault(require("react-select"));
+var react_color_1 = require("react-color");
+var ProductEditorContext_1 = require("../context/ProductEditorContext");
+var textToolbarSelectStyles_1 = require("../styles/textToolbarSelectStyles");
+require("../styles/TextToolbar.css");
+var FormatButtons_1 = require("./FormatButtons");
+var AlignMenu_1 = require("./AlignMenu");
+var TextToolbar = function () {
+    var _a = (0, ProductEditorContext_1.useProductEditor)(), selectedTextObject = _a.selectedTextObject, updateSelectedText = _a.updateSelectedText, fontOptions = _a.fontOptions, colorPalette = _a.colorPalette;
+    var _b = (0, react_1.useState)(false), displayColorPicker = _b[0], setDisplayColorPicker = _b[1];
+    var _c = (0, react_1.useState)('palette'), pickerMode = _c[0], setPickerMode = _c[1];
+    var colorPickerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        var handleClickOutside = function (event) {
+            if (colorPickerRef.current && !colorPickerRef.current.contains(event.target)) {
+                setDisplayColorPicker(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+    if (!selectedTextObject || !updateSelectedText) {
+        return null;
+    }
+    var currentFontValue = selectedTextObject.fontFamily || 'Nunito';
+    var currentColor = typeof selectedTextObject.fill === 'string' ? selectedTextObject.fill : '#000000';
+    var handleFontChange = function (selectedOption) {
+        if (selectedOption) {
+            updateSelectedText({ fontFamily: selectedOption.value });
+        }
+    };
+    var handlePaletteColorClick = function (color) {
+        updateSelectedText({ fill: color });
+        setDisplayColorPicker(false);
+        setPickerMode('palette');
+    };
+    var handleCustomColorChange = function (color) {
+        updateSelectedText({ fill: color.hex });
+    };
+    var handleSwatchClick = function () {
+        var currentlyVisible = displayColorPicker;
+        setDisplayColorPicker(!currentlyVisible);
+        if (!currentlyVisible) {
+            setPickerMode('palette');
+        }
+    };
+    var handleCustomTriggerClick = function () {
+        setPickerMode('custom');
+        setDisplayColorPicker(true);
+    };
+    var currentFontOption = fontOptions.find(function (option) { return option.value === currentFontValue; }) || fontOptions[0];
+    return (react_1.default.createElement("div", { className: "text-toolbar" },
+        react_1.default.createElement(react_select_1.default, { options: fontOptions, styles: textToolbarSelectStyles_1.customStyles, value: currentFontOption, onChange: handleFontChange, isSearchable: true, placeholder: "Select or search font...", className: "react-select-container", classNamePrefix: "react-select" }),
+        react_1.default.createElement("div", { className: "color-picker-trigger", onClick: handleSwatchClick, title: "Change text color" },
+            react_1.default.createElement("div", { className: "color-picker-swatch", style: {
+                    backgroundColor: currentColor,
+                    borderRadius: '50%',
+                    width: '28px',
+                    height: '28px',
+                    minWidth: '28px',
+                    minHeight: '28px',
+                    flexShrink: 0
+                } }),
+            react_1.default.createElement("span", { className: "color-picker-label" }, "Color")),
+        displayColorPicker && (react_1.default.createElement("div", { className: "color-picker-container", ref: colorPickerRef },
+            react_1.default.createElement("div", { className: "color-picker-popover" }, pickerMode === 'palette' ? (react_1.default.createElement("div", { className: "palette-grid" }, colorPalette.flat().map(function (color, index) {
+                if (color === null) {
+                    return (react_1.default.createElement("button", { key: "custom-trigger", className: "palette-trigger-swatch", onClick: handleCustomTriggerClick, title: "Choose custom color" }, "+"));
+                }
+                else {
+                    return (react_1.default.createElement("button", { key: "".concat(color, "-").concat(index), className: "palette-swatch", style: { backgroundColor: color }, onClick: function () { return handlePaletteColorClick(color); }, title: color }));
+                }
+            }))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(react_color_1.ChromePicker, { color: currentColor, onChange: handleCustomColorChange, disableAlpha: true, styles: {
+                        default: {
+                            picker: {
+                                boxShadow: 'none',
+                                width: '250px'
+                            }
+                        }
+                    } }),
+                react_1.default.createElement("button", { className: "color-picker-back-btn", onClick: function () { return setPickerMode('palette'); } }, "Back to Palette")))))),
+        react_1.default.createElement(FormatButtons_1.FormatButtons, null),
+        react_1.default.createElement(AlignMenu_1.AlignMenu, null)));
+};
+exports.default = TextToolbar;

package/dist/components/Toolbar.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import '../styles/Toolbar.css';
+export default function Toolbar(): React.JSX.Element;

package/dist/components/Toolbar.js

@@ -0,0 +1,47 @@
+"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"));
+var grommet_icons_1 = require("grommet-icons");
+var ProductEditorContext_1 = require("../context/ProductEditorContext");
+var canvasUtils_1 = require("../utils/canvasUtils");
+require("../styles/Toolbar.css");
+function Toolbar() {
+    var _a = (0, ProductEditorContext_1.useProductEditor)(), canvas = _a.canvas, width = _a.width, setShowGrid = _a.setShowGrid, showGrid = _a.showGrid, height = _a.height, showPreview = _a.showPreview, togglePreview = _a.togglePreview, showLayerPanel = _a.showLayerPanel, toggleLayerPanel = _a.toggleLayerPanel, deleteObject = _a.deleteObject, selectedObjectId = _a.selectedObjectId, renderedDraftPreviews = _a.renderedDraftPreviews;
+    // Add handleAddText function before the return statement
+    var handleAddText = function () {
+        if (!canvas)
+            return;
+        (0, canvasUtils_1.addTextToCanvas)(canvas, width, height);
+    };
+    var toggleGrid = function () { return setShowGrid(!showGrid); };
+    // Handle delete button click
+    var handleDelete = function () {
+        if (!canvas)
+            return;
+        var activeObject = canvas.getActiveObject();
+        if (activeObject) {
+            deleteObject(activeObject);
+        }
+    };
+    // Check if previews are available
+    var hasPreview = renderedDraftPreviews && renderedDraftPreviews.length > 0;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "grid-toggle" },
+            react_1.default.createElement("div", { className: "toolbar-button ".concat(showGrid ? 'active' : ''), onClick: toggleGrid },
+                react_1.default.createElement(grommet_icons_1.Apps, { width: 24, height: 24 }),
+                react_1.default.createElement("span", null, showGrid ? 'Hide Grid' : 'Show Grid'))),
+        react_1.default.createElement("div", { className: "preview-toggle" },
+            react_1.default.createElement("div", { className: "toolbar-button ".concat(showPreview && hasPreview ? 'active' : '', " ").concat(!hasPreview ? 'disabled' : ''), onClick: hasPreview ? togglePreview : undefined },
+                react_1.default.createElement(grommet_icons_1.View, { width: 24, height: 24 }),
+                react_1.default.createElement("span", null, hasPreview && showPreview ? 'Hide Preview' : 'Show Preview'))),
+        react_1.default.createElement("div", { className: "toolbar-button ".concat(showLayerPanel ? 'active' : ''), onClick: toggleLayerPanel },
+            react_1.default.createElement(grommet_icons_1.Layer, { width: 24, height: 24 }),
+            react_1.default.createElement("span", null, "Layer")),
+        react_1.default.createElement("div", { className: "toolbar-button ".concat(!selectedObjectId ? 'disabled' : ''), onClick: handleDelete },
+            react_1.default.createElement(grommet_icons_1.Trash, { width: 24, height: 24 }),
+            react_1.default.createElement("span", null, "Delete"))));
+}
+exports.default = Toolbar;

package/dist/config/colorConfig.d.ts

@@ -0,0 +1 @@
+export declare const defaultPalette: (string | null)[][];

package/dist/config/colorConfig.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultPalette = void 0;
+exports.defaultPalette = [
+    [null, '#000000', '#434343', '#666666', '#999999', '#CCCCCC', '#D9D9D9', '#EFEFEF'],
+    ['#FFFFFF', '#F44E3B', '#FE9200', '#FCDC00', '#DBDF00', '#A4DD00', '#68CCCA', '#73D8FF'],
+    ['#AEA1FF', '#FDA1FF', '#CF329A', '#FF6900', '#FCB900', '#7BDCB5', '#00D084', '#8ED1FC'],
+    ['#0693E3', '#EB144C', '#F78DA7', '#9900EF', '#B80000', '#DB3E00', '#FCC400', '#27724D'],
+    ['#607D8B', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722', '#795548']
+];

package/dist/config/fontConfig.d.ts

@@ -0,0 +1,5 @@
+export interface FontOption {
+    value: string;
+    label: string;
+}
+export declare const defaultFontOptions: FontOption[];

package/dist/config/fontConfig.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultFontOptions = void 0;
+exports.defaultFontOptions = [
+    { value: 'Arial', label: 'Arial' },
+    { value: 'Brush Script MT', label: 'Brush Script MT' },
+    { value: 'Courier New', label: 'Courier New' },
+    { value: 'Garamond', label: 'Garamond' },
+    { value: 'Georgia', label: 'Georgia' },
+    { value: 'Lato', label: 'Lato' },
+    { value: 'Montserrat', label: 'Montserrat' },
+    { value: 'Nunito', label: 'Nunito' },
+    { value: 'Open Sans', label: 'Open Sans' },
+    { value: 'Oswald', label: 'Oswald' },
+    { value: 'Playfair Display', label: 'Playfair Display' },
+    { value: 'Roboto', label: 'Roboto' },
+    { value: 'Tahoma', label: 'Tahoma' },
+    { value: 'Times New Roman', label: 'Times New Roman' },
+    { value: 'Trebuchet MS', label: 'Trebuchet MS' },
+    { value: 'Verdana', label: 'Verdana' },
+];

package/dist/context/ProductEditorContext.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+import { fabric } from 'fabric';
+import { Product, Job, DraftTemplate, DraftTemplateData, DraftPreview, SavedCanvasObject, RenderedDraftPreview } from '../types';
+import { FontOption } from '../config/fontConfig';
+import { UseFormReturn } from 'react-hook-form';
+interface ProductEditorContextType {
+    canvas: fabric.Canvas | null;
+    draftPreviews: DraftPreview[];
+    draftTemplates: DraftTemplateData[];
+    isCanvasLoading: boolean;
+    isMobileView: boolean;
+    loadingPreviews: boolean;
+    renderedDraftPreviews: RenderedDraftPreview[];
+    savedObjects: SavedCanvasObject[];
+    selectedTemplate: number | null;
+    selectedTextObject: fabric.IText | null;
+    showGrid: boolean;
+    showPreview: boolean;
+    setCanvas: (canvas: fabric.Canvas) => void;
+    setSelectedTemplate: (templateId: number) => void;
+    setShowGrid: (show: boolean) => void;
+    handleCancel: () => void;
+    handleSave: () => void;
+    handleTemplateChange: (draftTemplate: DraftTemplate) => void;
+    recordVariationFieldObjectsOnCanvas: () => void;
+    togglePreview: () => void;
+    updateSelectedText: (props: Partial<fabric.IText>) => void;
+    fontOptions: FontOption[];
+    colorPalette: (string | null)[][];
+    showLayerPanel: boolean;
+    toggleLayerPanel: () => void;
+    selectedObjectId: string | null;
+    setSelectedObjectId: (id: string | null) => void;
+    selectObject: (obj: fabric.Object | null) => void;
+    deleteObject: (obj: fabric.Object) => void;
+    canvasRef: React.RefObject<HTMLCanvasElement | null>;
+    groupIndex: number;
+    height: number;
+    inputName: string;
+    job: Job;
+    product: Product;
+    width: number;
+    hookForm: UseFormReturn<any> | null;
+}
+interface ProductEditorProviderProps {
+    children: React.ReactNode;
+    groupIndex?: number;
+    product: Product;
+    width?: number;
+    height?: number;
+    job: Job;
+    onSave: () => void;
+    onCancel: () => void;
+    hookForm?: UseFormReturn<any> | null;
+    fontOptions?: FontOption[];
+    colorPalette?: (string | null)[][];
+}
+export declare const ProductEditorProvider: React.FC<ProductEditorProviderProps>;
+export declare const useProductEditor: () => ProductEditorContextType;
+export {};