labellife-design-tool 1.2.8 → 1.3.0

package/dist/lib/lib/index.js

@@ -547,7 +547,7 @@ function initJsxCompat() {
 }
 
 // src/CanvasEditor.tsx
-import React18, { useState as useState3, useRef as useRef5, useEffect as useEffect4, useMemo, useCallback as useCallback4 } from "react";
+import React17, { useRef as useRef4, useEffect as useEffect4, useMemo, useCallback as useCallback4 } from "react";
 import { Stage, Layer, Rect as Rect2 } from "react-konva";
 import {
   PlusCircle
@@ -1361,61 +1361,6 @@ var UrlImageElement = ({ element, isSelected, onSelect, onChange }) => {
     }
   }));
 };
-// src/constants/CanvasPresets.ts
-var CANVAS_PRESETS = [
-  { name: "Instagram Post", width: 1080, height: 1080 },
-  { name: "Instagram Story", width: 1080, height: 1920 },
-  { name: "Facebook Post", width: 1200, height: 630 },
-  { name: "Twitter Post", width: 1024, height: 512 },
-  { name: "A4", width: 794, height: 1123 },
-  { name: "Letter", width: 816, height: 1056 },
-  { name: "YouTube Thumbnail", width: 1280, height: 720 },
-  { name: "Custom", width: 800, height: 600 }
-];
-// src/constants/DefaultColors.ts
-var DEFAULT_COLORS = [
-  "#000000",
-  "#FFFFFF",
-  "#FF0000",
-  "#00FF00",
-  "#0000FF",
-  "#FFFF00",
-  "#FF00FF",
-  "#00FFFF",
-  "#FFA500",
-  "#800080",
-  "#FFC0CB",
-  "#A52A2A",
-  "#808080",
-  "#C0C0C0",
-  "#FFD700"
-];
-// src/constants/FontFamilies.ts
-var FONT_FAMILIES = [
-  "Arial",
-  "Helvetica",
-  "Times New Roman",
-  "Georgia",
-  "Verdana",
-  "Courier New",
-  "Comic Sans MS",
-  "Impact",
-  "Trebuchet MS",
-  "Palatino",
-  "Garamond",
-  "Bookman",
-  "Tahoma"
-];
-// src/config.ts
-var _unsplashAccessKey = typeof process !== "undefined" && process.env?.UNSPLASH_ACCESS_KEY ? process.env.UNSPLASH_ACCESS_KEY : undefined;
-var UNSPLASH_ACCESS_KEY = _unsplashAccessKey || "YOUR_UNSPLASH_ACCESS_KEY_HERE";
-function setUnsplashAccessKey(key) {
-  _unsplashAccessKey = key;
-}
-function getUnsplashAccessKey() {
-  return _unsplashAccessKey;
-}
-
 // src/components/Header.tsx
 import React7 from "react";
 
@@ -1879,6 +1824,53 @@ var ElementPanel_default = ElementPanel;
 
 // src/panels/TextPanel.tsx
 import React10 from "react";
+
+// src/constants/CanvasPresets.ts
+var CANVAS_PRESETS = [
+  { name: "Instagram Post", width: 1080, height: 1080 },
+  { name: "Instagram Story", width: 1080, height: 1920 },
+  { name: "Facebook Post", width: 1200, height: 630 },
+  { name: "Twitter Post", width: 1024, height: 512 },
+  { name: "A4", width: 794, height: 1123 },
+  { name: "Letter", width: 816, height: 1056 },
+  { name: "YouTube Thumbnail", width: 1280, height: 720 },
+  { name: "Custom", width: 800, height: 600 }
+];
+// src/constants/DefaultColors.ts
+var DEFAULT_COLORS = [
+  "#000000",
+  "#FFFFFF",
+  "#FF0000",
+  "#00FF00",
+  "#0000FF",
+  "#FFFF00",
+  "#FF00FF",
+  "#00FFFF",
+  "#FFA500",
+  "#800080",
+  "#FFC0CB",
+  "#A52A2A",
+  "#808080",
+  "#C0C0C0",
+  "#FFD700"
+];
+// src/constants/FontFamilies.ts
+var FONT_FAMILIES = [
+  "Arial",
+  "Helvetica",
+  "Times New Roman",
+  "Georgia",
+  "Verdana",
+  "Courier New",
+  "Comic Sans MS",
+  "Impact",
+  "Trebuchet MS",
+  "Palatino",
+  "Garamond",
+  "Bookman",
+  "Tahoma"
+];
+// src/panels/TextPanel.tsx
 import {
   Bold,
   Italic,
@@ -2725,394 +2717,16 @@ var RightSidebar = ({
   }), /* @__PURE__ */ React16.createElement("span", null, "Delete"))));
 };
 var RightSidebar_default = RightSidebar;
-// src/components/TemplateInputModal.tsx
-import React17, { useState as useState2, useRef as useRef4 } from "react";
-import { X, Upload as Upload2, Image as ImageIcon4, ChevronLeft, ChevronRight } from "lucide-react";
-var TemplateInputModal = ({
-  inputs,
-  onComplete,
-  onCancel
-}) => {
-  const isLightTheme = document.title.includes("Light Theme");
-  const modalStyle = {
-    backgroundColor: isLightTheme ? "#f8fafc" : "#1f2937",
-    color: isLightTheme ? "#0f172a" : "#ffffff",
-    borderColor: isLightTheme ? "#cbd5e1" : "#374151",
-    boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)"
-  };
-  const headerStyle = {
-    borderBottomColor: isLightTheme ? "#e2e8f0" : "#374151",
-    borderBottomWidth: "1px",
-    borderBottomStyle: "solid"
-  };
-  const footerStyle = {
-    borderTopColor: isLightTheme ? "#e2e8f0" : "#374151",
-    borderTopWidth: "1px",
-    borderTopStyle: "solid"
-  };
-  const inputStyle = {
-    backgroundColor: isLightTheme ? "#ffffff" : "#374151",
-    borderColor: isLightTheme ? "#cbd5e1" : "#4b5563",
-    color: isLightTheme ? "#0f172a" : "#ffffff"
-  };
-  const labelStyle = {
-    color: isLightTheme ? "#0f172a" : "#d1d5db",
-    fontWeight: 500
-  };
-  const helpTextStyle = {
-    color: isLightTheme ? "#64748b" : "#9ca3af"
-  };
-  const primaryButtonStyle = {
-    backgroundColor: "#2563eb",
-    color: "#ffffff"
-  };
-  const secondaryButtonStyle = {
-    backgroundColor: isLightTheme ? "#e2e8f0" : "#374151",
-    color: isLightTheme ? "#0f172a" : "#ffffff",
-    border: "none"
-  };
-  const [values, setValues] = useState2({});
-  const [errors, setErrors] = useState2({});
-  const [currentStep, setCurrentStep] = useState2(0);
-  const fileInputRefs = useRef4({});
-  const sortedInputs = [...inputs].sort((a, b) => (a.config.order || 0) - (b.config.order || 0));
-  const currentInput = sortedInputs[currentStep];
-  const isFirstStep = currentStep === 0;
-  const isLastStep = currentStep === sortedInputs.length - 1;
-  const handleTextChange = (id, value) => {
-    setValues((prev) => ({ ...prev, [id]: value }));
-    if (errors[id]) {
-      setErrors((prev) => {
-        const newErrors = { ...prev };
-        delete newErrors[id];
-        return newErrors;
-      });
-    }
-  };
-  const handleFileChange = (id, file) => {
-    if (!file) {
-      setValues((prev) => {
-        const newValues = { ...prev };
-        delete newValues[id];
-        return newValues;
-      });
-      return;
-    }
-    const config = inputs.find((input) => input.config.id === id)?.config;
-    if (!config)
-      return;
-    if (config.accept && !file.type.match(config.accept.replace("*", ".*"))) {
-      setErrors((prev) => ({
-        ...prev,
-        [id]: `File must be of type: ${config.accept}`
-      }));
-      return;
-    }
-    if (config.maxSize && file.size > config.maxSize) {
-      const maxSizeMB = (config.maxSize / 1024 / 1024).toFixed(2);
-      setErrors((prev) => ({
-        ...prev,
-        [id]: `File size must be less than ${maxSizeMB}MB`
-      }));
-      return;
-    }
-    const reader = new FileReader;
-    reader.onload = (e) => {
-      const result = e.target?.result;
-      if (typeof result === "string") {
-        setValues((prev) => ({ ...prev, [id]: result }));
-        setErrors((prev) => {
-          const newErrors = { ...prev };
-          delete newErrors[id];
-          return newErrors;
-        });
-      }
-    };
-    reader.onerror = () => {
-      setErrors((prev) => ({
-        ...prev,
-        [id]: "Failed to read file"
-      }));
-    };
-    reader.readAsDataURL(file);
-  };
-  const validateCurrentStep = () => {
-    if (!currentInput)
-      return false;
-    const config = currentInput.config;
-    const value = values[config.id];
-    const newErrors = { ...errors };
-    delete newErrors[config.id];
-    if (config.required && !value) {
-      newErrors[config.id] = "This field is required";
-      setErrors(newErrors);
-      return false;
-    }
-    if (config.type === "text" && value) {
-      if (config.minLength && value.length < config.minLength) {
-        newErrors[config.id] = `Minimum length is ${config.minLength} characters`;
-        setErrors(newErrors);
-        return false;
-      }
-      if (config.maxLength && value.length > config.maxLength) {
-        newErrors[config.id] = `Maximum length is ${config.maxLength} characters`;
-        setErrors(newErrors);
-        return false;
-      }
-    }
-    setErrors(newErrors);
-    return true;
-  };
-  const handleNext = () => {
-    if (!validateCurrentStep()) {
-      return;
-    }
-    if (isLastStep) {
-      const allErrors = {};
-      sortedInputs.forEach((input) => {
-        if (input.config.required && !values[input.config.id]) {
-          allErrors[input.config.id] = "This field is required";
-        }
-      });
-      if (Object.keys(allErrors).length > 0) {
-        setErrors(allErrors);
-        const firstErrorIndex = sortedInputs.findIndex((input) => allErrors[input.config.id]);
-        if (firstErrorIndex !== -1) {
-          setCurrentStep(firstErrorIndex);
-        }
-        return;
-      }
-      onComplete(values);
-    } else {
-      setCurrentStep((prev) => prev + 1);
-    }
-  };
-  const handlePrevious = () => {
-    if (!isFirstStep) {
-      setCurrentStep((prev) => prev - 1);
-    }
-  };
-  const handleSkip = () => {
-    if (!currentInput.config.required) {
-      const defaultValue = currentInput.config.defaultValue || "";
-      const valueToSet = defaultValue;
-      setValues((prev) => ({ ...prev, [currentInput.config.id]: valueToSet }));
-      setErrors((prev) => {
-        const newErrors = { ...prev };
-        delete newErrors[currentInput.config.id];
-        return newErrors;
-      });
-      const updatedValues = { ...values, [currentInput.config.id]: valueToSet };
-      if (isLastStep) {
-        const allErrors = {};
-        sortedInputs.forEach((input) => {
-          if (input.config.required && !updatedValues[input.config.id]) {
-            allErrors[input.config.id] = "This field is required";
-          }
-        });
-        if (Object.keys(allErrors).length > 0) {
-          setErrors(allErrors);
-          const firstErrorIndex = sortedInputs.findIndex((input) => allErrors[input.config.id]);
-          if (firstErrorIndex !== -1) {
-            setCurrentStep(firstErrorIndex);
-          }
-          return;
-        }
-        onComplete(updatedValues);
-      } else {
-        setCurrentStep((prev) => prev + 1);
-      }
-    }
-  };
-  const renderInput = (input) => {
-    const { config } = input;
-    const defaultValue = config.defaultValue || "";
-    const value = values[config.id] !== undefined ? values[config.id] : defaultValue;
-    const error = errors[config.id];
-    switch (config.type) {
-      case "image": {
-        const isUrl = value && (value.startsWith("http://") || value.startsWith("https://") || value.startsWith("data:"));
-        const isDefaultValue = value === defaultValue && defaultValue && (defaultValue.startsWith("http://") || defaultValue.startsWith("https://"));
-        return /* @__PURE__ */ React17.createElement("div", {
-          className: "space-y-2"
-        }, /* @__PURE__ */ React17.createElement("label", {
-          className: "block text-sm font-medium",
-          style: labelStyle
-        }, config.label, config.required && /* @__PURE__ */ React17.createElement("span", {
-          className: "text-red-400 ml-1"
-        }, "*")), config.helpText && /* @__PURE__ */ React17.createElement("p", {
-          className: "text-xs",
-          style: helpTextStyle
-        }, config.helpText), isDefaultValue && /* @__PURE__ */ React17.createElement("p", {
-          className: "text-xs text-blue-400"
-        }, "Using default image"), /* @__PURE__ */ React17.createElement("div", {
-          className: "flex items-center space-x-4"
-        }, /* @__PURE__ */ React17.createElement("input", {
-          ref: (el) => {
-            fileInputRefs.current[config.id] = el;
-          },
-          type: "file",
-          accept: config.accept || "image/*",
-          onChange: (e) => handleFileChange(config.id, e.target.files?.[0] || null),
-          className: "hidden"
-        }), /* @__PURE__ */ React17.createElement("button", {
-          type: "button",
-          onClick: () => fileInputRefs.current[config.id]?.click(),
-          className: "flex items-center space-x-2 px-4 py-2 rounded border-2 border-dashed transition-colors",
-          style: {
-            borderColor: value ? "#10b981" : isLightTheme ? "#cbd5e1" : "#4b5563",
-            backgroundColor: value ? "rgba(16, 185, 129, 0.1)" : isLightTheme ? "rgba(226, 232, 240, 0.5)" : "rgba(55, 65, 81, 0.5)",
-            color: value ? "#10b981" : isLightTheme ? "#475569" : "#d1d5db"
-          }
-        }, /* @__PURE__ */ React17.createElement(Upload2, {
-          className: "w-4 h-4"
-        }), /* @__PURE__ */ React17.createElement("span", null, value ? "Change Image" : "Upload Image")), value && /* @__PURE__ */ React17.createElement("div", {
-          className: "flex items-center space-x-2"
-        }, /* @__PURE__ */ React17.createElement(ImageIcon4, {
-          className: "w-5 h-5",
-          style: { color: "#10b981" }
-        }), /* @__PURE__ */ React17.createElement("span", {
-          className: "text-sm",
-          style: { color: isLightTheme ? "#64748b" : "#9ca3af" }
-        }, isUrl && !isDefaultValue ? "Image URL" : isDefaultValue ? "Default image" : "Image selected"), /* @__PURE__ */ React17.createElement("button", {
-          type: "button",
-          onClick: () => {
-            const resetValue = defaultValue || "";
-            setValues((prev) => ({ ...prev, [config.id]: resetValue }));
-            setErrors((prev) => {
-              const newErrors = { ...prev };
-              delete newErrors[config.id];
-              return newErrors;
-            });
-          },
-          className: "text-sm",
-          style: { color: "#ef4444" }
-        }, isDefaultValue ? "Clear" : "Remove"))), value && isUrl && /* @__PURE__ */ React17.createElement("div", {
-          className: "mt-2"
-        }, /* @__PURE__ */ React17.createElement("img", {
-          src: value,
-          alt: "Preview",
-          className: "max-w-xs max-h-32 object-contain rounded border",
-          style: { borderColor: isLightTheme ? "#cbd5e1" : "#4b5563" },
-          onError: (e) => {
-            setErrors((prev) => ({
-              ...prev,
-              [config.id]: "Failed to load image"
-            }));
-          }
-        })), error && /* @__PURE__ */ React17.createElement("p", {
-          className: "text-sm",
-          style: { color: "#ef4444" }
-        }, error));
-      }
-      case "text":
-        return /* @__PURE__ */ React17.createElement("div", {
-          className: "space-y-2"
-        }, /* @__PURE__ */ React17.createElement("label", {
-          className: "block text-sm font-medium",
-          style: labelStyle
-        }, config.label, config.required && /* @__PURE__ */ React17.createElement("span", {
-          className: "text-red-400 ml-1"
-        }, "*")), config.helpText && /* @__PURE__ */ React17.createElement("p", {
-          className: "text-xs",
-          style: helpTextStyle
-        }, config.helpText), /* @__PURE__ */ React17.createElement("input", {
-          type: "text",
-          value,
-          onChange: (e) => handleTextChange(config.id, e.target.value),
-          placeholder: config.placeholder || "Enter text here...",
-          maxLength: config.maxLength,
-          className: "w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500",
-          style: {
-            backgroundColor: "#ffffff",
-            color: "#0f172a",
-            borderColor: error ? "#ef4444" : "#cbd5e1"
-          }
-        }), config.maxLength && /* @__PURE__ */ React17.createElement("p", {
-          className: "text-xs text-right",
-          style: helpTextStyle
-        }, value.length, " / ", config.maxLength), error && /* @__PURE__ */ React17.createElement("p", {
-          className: "text-sm",
-          style: { color: "#ef4444" }
-        }, error));
-      default:
-        return null;
-    }
-  };
-  if (!currentInput) {
-    return null;
-  }
-  return /* @__PURE__ */ React17.createElement("div", {
-    className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
-  }, /* @__PURE__ */ React17.createElement("div", {
-    className: "rounded-lg w-full max-w-2xl max-h-[90vh] overflow-hidden flex flex-col",
-    style: modalStyle
-  }, /* @__PURE__ */ React17.createElement("div", {
-    className: "p-6 border-b flex items-center justify-between",
-    style: headerStyle
-  }, /* @__PURE__ */ React17.createElement("div", null, /* @__PURE__ */ React17.createElement("h2", {
-    className: "text-xl font-semibold",
-    style: { color: isLightTheme ? "#0f172a" : "#ffffff" }
-  }, inputs.some((input) => input.config.required) ? "Template Input Required" : "Template Customization"), /* @__PURE__ */ React17.createElement("p", {
-    className: "text-sm mt-1",
-    style: { color: isLightTheme ? "#64748b" : "#9ca3af" }
-  }, "Step ", currentStep + 1, " of ", sortedInputs.length, !inputs.some((input) => input.config.required) && /* @__PURE__ */ React17.createElement("span", {
-    style: { color: "#2563eb", marginLeft: "8px" }
-  }, "(All fields optional)"))), /* @__PURE__ */ React17.createElement("button", {
-    onClick: onCancel,
-    className: "transition-colors",
-    style: { color: isLightTheme ? "#64748b" : "#9ca3af" }
-  }, /* @__PURE__ */ React17.createElement(X, {
-    className: "w-5 h-5"
-  }))), /* @__PURE__ */ React17.createElement("div", {
-    className: "px-6 pt-4"
-  }, /* @__PURE__ */ React17.createElement("div", {
-    className: "w-full rounded-full h-2",
-    style: { backgroundColor: isLightTheme ? "#e2e8f0" : "#374151" }
-  }, /* @__PURE__ */ React17.createElement("div", {
-    className: "h-2 rounded-full transition-all duration-300",
-    style: {
-      backgroundColor: "#2563eb",
-      width: `${(currentStep + 1) / sortedInputs.length * 100}%`
-    }
-  }))), /* @__PURE__ */ React17.createElement("div", {
-    className: "flex-1 overflow-y-auto p-6"
-  }, /* @__PURE__ */ React17.createElement("div", {
-    className: "space-y-4"
-  }, renderInput(currentInput))), /* @__PURE__ */ React17.createElement("div", {
-    className: "p-6 border-t flex items-center justify-between",
-    style: footerStyle
-  }, /* @__PURE__ */ React17.createElement("button", {
-    onClick: onCancel,
-    className: "px-4 py-2 rounded transition-colors",
-    style: secondaryButtonStyle
-  }, "Cancel"), /* @__PURE__ */ React17.createElement("div", {
-    className: "flex items-center space-x-3"
-  }, !isFirstStep && /* @__PURE__ */ React17.createElement("button", {
-    onClick: handlePrevious,
-    className: "px-4 py-2 rounded transition-colors flex items-center space-x-2",
-    style: secondaryButtonStyle
-  }, /* @__PURE__ */ React17.createElement(ChevronLeft, {
-    className: "w-4 h-4"
-  }), /* @__PURE__ */ React17.createElement("span", null, "Previous")), !currentInput.config.required && /* @__PURE__ */ React17.createElement("button", {
-    onClick: handleSkip,
-    className: "px-4 py-2 rounded transition-colors",
-    style: { ...secondaryButtonStyle, opacity: 0.9 }
-  }, "Skip"), /* @__PURE__ */ React17.createElement("button", {
-    onClick: handleNext,
-    className: "px-4 py-2 rounded transition-colors flex items-center space-x-2",
-    style: primaryButtonStyle
-  }, /* @__PURE__ */ React17.createElement("span", null, isLastStep ? "Complete" : "Next"), !isLastStep && /* @__PURE__ */ React17.createElement(ChevronRight, {
-    className: "w-4 h-4"
-  }))))));
-};
-var TemplateInputModal_default = TemplateInputModal;
-
 // src/store/simpleStore.ts
 class SimpleCanvasStore {
   _design;
   _activePageId;
   _activePanelId;
+  _selectedId;
+  _selectedIds;
+  _tool;
+  _zoom;
+  _selectedShape;
   _listeners = {};
   constructor(initialDesign) {
     this._design = {
@@ -3127,6 +2741,11 @@ class SimpleCanvasStore {
     };
     this._activePageId = initialDesign?.pages?.[0]?.id || null;
     this._activePanelId = null;
+    this._selectedId = null;
+    this._selectedIds = [];
+    this._tool = "select";
+    this._zoom = 1;
+    this._selectedShape = "rect";
   }
   on(event, callback) {
     this._listeners[event] = callback;
@@ -3166,12 +2785,27 @@ class SimpleCanvasStore {
   get activePanelId() {
     return this._activePanelId;
   }
+  get selectedId() {
+    return this._selectedId;
+  }
+  get selectedIds() {
+    return this._selectedIds;
+  }
+  get tool() {
+    return this._tool;
+  }
+  get zoom() {
+    return this._zoom;
+  }
+  get selectedShape() {
+    return this._selectedShape;
+  }
   setDesign(design) {
     this._design = design;
     if (design.pages.find((p) => p.id === this._activePageId)) {} else if (design.pages.length > 0) {
       this._activePageId = design.pages[0].id;
     }
-    this.emit("designChanged", design);
+    this.emit("designChanged", this._design);
     this.emit("activePageChanged", this._activePageId);
   }
   updateDesign(updates) {
@@ -3213,18 +2847,12 @@ class SimpleCanvasStore {
     this._design.pages = remainingPages;
     this.emit("designChanged", this._design);
   }
-  setActivePage(pageId) {
-    const page = this._design.pages.find((p) => p.id === pageId);
-    if (page) {
-      this._activePageId = pageId;
-      this.emit("activePageChanged", pageId);
-      this.emit("designChanged", this._design);
-    }
-  }
   addElement(element) {
     const page = this.activePage;
-    if (!page)
+    if (!page) {
+      console.warn("addElement: No active page!");
       return;
+    }
     const newElement = {
       id: element.id || `element-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
       type: element.type,
@@ -3242,30 +2870,30 @@ class SimpleCanvasStore {
     page.elements.push(newElement);
     this.emit("designChanged", this._design);
   }
-  updateElement(elementId, updates) {
-    for (const page of this._design.pages) {
-      const elementIndex = page.elements.findIndex((e) => e.id === elementId);
-      if (elementIndex !== -1) {
-        page.elements[elementIndex] = { ...page.elements[elementIndex], ...updates };
-        this.emit("designChanged", this._design);
-        return;
-      }
-    }
-  }
-  deleteElement(elementId) {
-    for (const page of this._design.pages) {
-      const elementIndex = page.elements.findIndex((e) => e.id === elementId);
-      if (elementIndex !== -1) {
-        page.elements.splice(elementIndex, 1);
-        this.emit("designChanged", this._design);
-        return;
-      }
-    }
-  }
   openSidePanel(panelId) {
     this._activePanelId = panelId;
     this.emit("activePanelChanged", panelId);
   }
+  setSelectedId(selectedId) {
+    this._selectedId = selectedId;
+    this.emit("selectedIdChanged", selectedId);
+  }
+  setSelectedIds(selectedIds) {
+    this._selectedIds = selectedIds;
+    this.emit("selectedIdsChanged", selectedIds);
+  }
+  setTool(tool) {
+    this._tool = tool;
+    this.emit("toolChanged", tool);
+  }
+  setZoom(zoom) {
+    this._zoom = zoom;
+    this.emit("zoomChanged", zoom);
+  }
+  setSelectedShape(shape) {
+    this._selectedShape = shape;
+    this.emit("selectedShapeChanged", shape);
+  }
   async toBlob(type = "png") {
     return new Promise((resolve, reject) => {
       try {
@@ -3295,6 +2923,34 @@ class SimpleCanvasStore {
       }
     });
   }
+  setActivePage(pageId) {
+    const page = this._design.pages.find((p) => p.id === pageId);
+    if (page) {
+      this._activePageId = pageId;
+      this.emit("activePageChanged", pageId);
+      this.emit("designChanged", this._design);
+    }
+  }
+  updateElement(elementId, updates) {
+    for (const page of this._design.pages) {
+      const elementIndex = page.elements.findIndex((e) => e.id === elementId);
+      if (elementIndex !== -1) {
+        page.elements[elementIndex] = { ...page.elements[elementIndex], ...updates };
+        this.emit("designChanged", this._design);
+        return;
+      }
+    }
+  }
+  deleteElement(elementId) {
+    for (const page of this._design.pages) {
+      const elementIndex = page.elements.findIndex((e) => e.id === elementId);
+      if (elementIndex !== -1) {
+        page.elements.splice(elementIndex, 1);
+        this.emit("designChanged", this._design);
+        return;
+      }
+    }
+  }
   async loadJSON(jsonData) {
     return new Promise((resolve, reject) => {
       try {
@@ -3329,190 +2985,84 @@ var CanvasEditor = ({
     width: 800,
     height: 600
   });
-  const [design, setDesign] = useState3(() => {
-    if (externalStore) {
-      return externalStore.design;
-    }
-    return {
-      id: Date.now().toString(),
-      name: "Untitled Design",
-      width: 800,
-      height: 600,
-      pages: [
-        {
-          id: "1",
-          name: "Page 1",
-          elements: [],
-          background: "#ffffff"
-        }
-      ],
-      fonts: FONT_FAMILIES,
-      colors: DEFAULT_COLORS
-    };
-  });
-  const [currentPageId, setCurrentPageId] = useState3(() => {
-    if (externalStore?.design.pages && externalStore.design.pages.length > 0) {
-      return externalStore.design.pages[0].id;
-    }
-    if (externalStore?.activePageId) {
-      return externalStore.activePageId;
-    }
-    return "1";
-  });
-  const [selectedId, setSelectedId] = useState3(null);
-  const [selectedIds, setSelectedIds] = useState3([]);
-  const [tool, setTool] = useState3("select");
-  const [activePanelId, setActivePanelId] = useState3("elements");
+  const stageRef = useRef4(null);
+  const fileInputRef = useRef4(null);
+  const jsonInputRef = useRef4(null);
+  const containerRef = useRef4(null);
+  const currentPage = store.design.pages.find((p) => p.id === store.activePageId) || store.design.pages[0] || null;
+  const selectedElement = currentPage?.elements.find((el) => el.id === store.selectedId) || null;
   useEffect4(() => {
     if (externalStore) {
-      const handleDesignChange = (newDesign) => {
-        setDesign(newDesign);
-      };
-      const handleActivePageChange = (pageId) => {
-        setCurrentPageId(pageId);
-      };
-      const handleActivePanelChange = (panelId) => {
-        setActivePanelId(panelId || "elements");
-      };
+      const handleDesignChange = (newDesign) => {};
+      const handleActivePageChange = (pageId) => {};
+      const handleActivePanelChange = (panelId) => {};
+      const handleSelectedIdChange = (selectedId) => {};
+      const handleSelectedIdsChange = (selectedIds) => {};
+      const handleToolChange = (tool) => {};
+      const handleZoomChange = (zoom) => {};
+      const handleSelectedShapeChange = (shape) => {};
       externalStore.on("designChanged", handleDesignChange);
       externalStore.on("activePageChanged", handleActivePageChange);
       externalStore.on("activePanelChanged", handleActivePanelChange);
+      externalStore.on("selectedIdChanged", handleSelectedIdChange);
+      externalStore.on("selectedIdsChanged", handleSelectedIdsChange);
+      externalStore.on("toolChanged", handleToolChange);
+      externalStore.on("zoomChanged", handleZoomChange);
+      externalStore.on("selectedShapeChanged", handleSelectedShapeChange);
       return () => {
         externalStore.off("designChanged");
         externalStore.off("activePageChanged");
         externalStore.off("activePanelChanged");
+        externalStore.off("selectedIdChanged");
+        externalStore.off("selectedIdsChanged");
+        externalStore.off("toolChanged");
+        externalStore.off("zoomChanged");
+        externalStore.off("selectedShapeChanged");
       };
     }
   }, [externalStore]);
-  const [showUnsplash, setShowUnsplash] = useState3(false);
-  const [unsplashQuery, setUnsplashQuery] = useState3("");
-  const [unsplashResults, setUnsplashResults] = useState3([]);
-  const [unsplashMode, setUnsplashMode] = useState3("element");
-  const [zoom, setZoom] = useState3(1);
-  const [selectedShape, setSelectedShape] = useState3("rect");
-  const [history, setHistory] = useState3([]);
-  const [historyIndex, setHistoryIndex] = useState3(-1);
-  const [showInputModal, setShowInputModal] = useState3(false);
-  const [pendingInputs, setPendingInputs] = useState3([]);
-  const stageRef = useRef5(null);
-  const fileInputRef = useRef5(null);
-  const jsonInputRef = useRef5(null);
-  const containerRef = useRef5(null);
-  const currentPage = design.pages.find((p) => p.id === currentPageId) || design.pages[0] || null;
-  const selectedElement = currentPage?.elements.find((el) => el.id === selectedId) || null;
-  const saveToHistory = useCallback4((newDesign) => {
-    const newHistory = history.slice(0, historyIndex + 1);
-    newHistory.push(JSON.parse(JSON.stringify(newDesign)));
-    setHistory(newHistory);
-    setHistoryIndex(newHistory.length - 1);
-  }, [history, historyIndex]);
-  const undo = useCallback4(() => {
-    if (historyIndex > 0) {
-      setHistoryIndex(historyIndex - 1);
-      setDesign(JSON.parse(JSON.stringify(history[historyIndex - 1])));
-    }
-  }, [history, historyIndex]);
-  const redo = useCallback4(() => {
-    if (historyIndex < history.length - 1) {
-      setHistoryIndex(historyIndex + 1);
-      setDesign(JSON.parse(JSON.stringify(history[historyIndex + 1])));
+  const handleStageClick = useCallback4((e) => {
+    const clickedOnEmpty = e.target === e.target.getStage();
+    if (clickedOnEmpty) {
+      store.setSelectedId(null);
+      store.setSelectedIds([]);
     }
-  }, [history, historyIndex]);
+  }, [store]);
   const addText = useCallback4(() => {
-    const newElement = {
-      id: Date.now().toString(),
+    if (!store.activePage)
+      return;
+    store.activePage.addElement({
       type: "text",
-      name: "Text",
-      x: design.width / 2 - 50,
-      y: design.height / 2 - 20,
-      rotation: 0,
-      visible: true,
-      locked: false,
-      opacity: 1,
-      text: "Click to edit text",
-      fontSize: 24,
-      fontFamily: "Arial",
-      fill: "#000000",
-      align: "left",
-      lineHeight: 1.2,
-      letterSpacing: 0,
-      textCase: "none",
-      strikethrough: false
-    };
-    const newDesign = {
-      ...design,
-      pages: design.pages.map((page) => page.id === currentPageId ? { ...page, elements: [...page.elements, newElement] } : page)
-    };
-    setDesign(newDesign);
-    saveToHistory(newDesign);
-    if (externalStore) {
-      externalStore.setDesign(newDesign);
-    }
-    setSelectedId(newElement.id);
-    setTool("select");
-  }, [currentPageId, saveToHistory, design.width, design.height, externalStore]);
+      text: "Edit this text",
+      x: store.design.width / 2 - 50,
+      y: store.design.height / 2 - 15,
+      width: 100,
+      height: 30
+    });
+  }, [store]);
   const addShape = useCallback4((shapeType) => {
-    const newElement = {
-      id: Date.now().toString(),
+    if (!store.activePage)
+      return;
+    store.activePage.addElement({
       type: "shape",
-      name: shapeType.charAt(0).toUpperCase() + shapeType.slice(1),
-      x: design.width / 2 - 50,
-      y: design.height / 2 - 50,
-      width: 100,
-      height: 100,
-      rotation: 0,
-      visible: true,
-      locked: false,
-      opacity: 1,
-      fill: "#4299e1",
-      stroke: "#000000",
-      strokeWidth: 0,
       shapeType,
-      sides: shapeType === "polygon" ? 6 : undefined,
-      innerRadius: shapeType === "star" ? 40 : undefined,
-      outerRadius: shapeType === "star" ? 70 : undefined
-    };
-    setDesign((prev) => {
-      const newDesign = {
-        ...prev,
-        pages: prev.pages.map((page) => page.id === currentPageId ? { ...page, elements: [...page.elements, newElement] } : page)
-      };
-      saveToHistory(newDesign);
-      return newDesign;
+      x: store.design.width / 2 - 50,
+      y: store.design.height / 2 - 50,
+      width: 100,
+      height: 100
     });
-    setSelectedId(newElement.id);
-  }, [currentPageId, saveToHistory, design.width, design.height]);
-  const handleStageClick = useCallback4((e) => {
-    const clickedOnEmpty = e.target === e.target.getStage();
-    if (clickedOnEmpty) {
-      setSelectedId(null);
-      setSelectedIds([]);
-    }
-  }, []);
+  }, [store]);
   const updateElement = useCallback4((id, attrs) => {
-    setDesign((prev) => ({
-      ...prev,
-      pages: prev.pages.map((page) => ({
-        ...page,
-        elements: page.elements.map((el) => el.id === id ? { ...el, ...attrs } : el)
-      }))
-    }));
-  }, []);
+    store.updateElement(id, attrs);
+  }, [store]);
   const deleteSelected = useCallback4(() => {
-    if (selectedId || selectedIds.length > 0) {
-      const idsToDelete = selectedIds.length > 0 ? selectedIds : [selectedId];
-      setDesign((prev) => ({
-        ...prev,
-        pages: prev.pages.map((page) => ({
-          ...page,
-          elements: page.elements.filter((el) => !idsToDelete.includes(el.id))
-        }))
-      }));
-      setSelectedId(null);
-      setSelectedIds([]);
-      saveToHistory(design);
+    if (store.selectedId || store.selectedIds.length > 0) {
+      const idsToDelete = store.selectedIds.length > 0 ? store.selectedIds : [store.selectedId];
+      idsToDelete.forEach((id) => store.deleteElement(id));
+      store.setSelectedId(null);
+      store.setSelectedIds([]);
     }
-  }, [selectedId, selectedIds, saveToHistory, design]);
+  }, [store]);
   const duplicateSelected = useCallback4(() => {
     if (selectedElement) {
       const newElement = {
@@ -3522,603 +3072,254 @@ var CanvasEditor = ({
         x: selectedElement.x + 20,
         y: selectedElement.y + 20
       };
-      setDesign((prev) => {
-        const newDesign = {
-          ...prev,
-          pages: prev.pages.map((page) => page.id === currentPageId ? { ...page, elements: [...page.elements, newElement] } : page)
-        };
-        saveToHistory(newDesign);
-        return newDesign;
+      store.activePage?.addElement(newElement);
+      store.setSelectedId(newElement.id);
+    }
+  }, [selectedElement, store]);
+  const moveElementUp = useCallback4((id) => {}, [store]);
+  const moveElementDown = useCallback4((id) => {}, [store]);
+  const addPage = useCallback4(() => {
+    store.addPage();
+  }, [store]);
+  const deletePage = useCallback4((pageId) => {
+    store.deletePages([pageId]);
+  }, [store]);
+  const panelConfigs = useMemo(() => {
+    const builtInConfigs = {
+      elements: { id: "elements", title: "Elements", component: ElementPanel_default, props: { onAddShape: addShape, store } },
+      text: { id: "text", title: "Text", component: TextPanel_default, props: { selectedElement, updateElement, onAddText: addText, store } },
+      image: { id: "image", title: "Image", component: ImagePanel_default, props: { selectedElement, updateElement, store } },
+      background: { id: "background", title: "Background", component: BackgroundPanel_default, props: { store } },
+      design: { id: "design", title: "Design", component: DesignPanel_default, props: { store } },
+      variables: { id: "variables", title: "Variables", component: VariablesPanel_default, props: { store } },
+      export: { id: "export", title: "Export", component: ExportPanel_default, props: { store } }
+    };
+    const mergedConfigs = { ...builtInConfigs };
+    if (config?.panels) {
+      config.panels.forEach((panelConfig) => {
+        if (typeof panelConfig === "string") {} else {
+          const customPanelConfig = {
+            id: panelConfig.id,
+            title: panelConfig.title,
+            component: panelConfig.component,
+            props: panelConfig.props || {},
+            ...panelConfig.icon && typeof panelConfig.icon.type === "string" ? {
+              icon: panelConfig.icon.type
+            } : {}
+          };
+          mergedConfigs[panelConfig.id] = customPanelConfig;
+        }
       });
-      setSelectedId(newElement.id);
     }
-  }, [selectedElement, currentPageId, saveToHistory]);
-  const moveElementUp = useCallback4((id) => {
-    setDesign((prev) => ({
-      ...prev,
-      pages: prev.pages.map((page) => {
-        if (page.id === currentPageId) {
-          const index = page.elements.findIndex((el) => el.id === id);
-          if (index < page.elements.length - 1) {
-            const newElements = [...page.elements];
-            [newElements[index], newElements[index + 1]] = [
-              newElements[index + 1],
-              newElements[index]
-            ];
-            return { ...page, elements: newElements };
+    const orderedConfigs = [];
+    if (config?.panels) {
+      config.panels.forEach((panelConfig) => {
+        if (typeof panelConfig === "string") {
+          if (mergedConfigs[panelConfig]) {
+            orderedConfigs.push(mergedConfigs[panelConfig]);
           }
+        } else {
+          orderedConfigs.push(mergedConfigs[panelConfig.id]);
         }
-        return page;
-      })
-    }));
-  }, [currentPageId]);
-  const moveElementDown = useCallback4((id) => {
-    setDesign((prev) => ({
-      ...prev,
-      pages: prev.pages.map((page) => {
-        if (page.id === currentPageId) {
-          const index = page.elements.findIndex((el) => el.id === id);
-          if (index > 0) {
-            const newElements = [...page.elements];
-            [newElements[index], newElements[index - 1]] = [
-              newElements[index - 1],
-              newElements[index]
-            ];
-            return { ...page, elements: newElements };
-          }
+      });
+    }
+    return orderedConfigs.length > 0 ? orderedConfigs : Object.values(builtInConfigs);
+  }, [addShape, addText, config, selectedElement, updateElement, store]);
+  const DynamicPanelRenderer = useMemo(() => {
+    const activePanel = panelConfigs.find((panel) => panel.id === store.activePanelId);
+    if (!activePanel)
+      return null;
+    const PanelComponent = activePanel.component;
+    return /* @__PURE__ */ React17.createElement(PanelComponent, {
+      key: activePanel.id,
+      ...activePanel.props
+    });
+  }, [panelConfigs, store.activePanelId]);
+  const handleExportPNG = useCallback4(() => {
+    exportToPNG(stageRef.current, store.design);
+  }, [store.design]);
+  const handleExportJPG = useCallback4(() => {
+    exportToJPG(stageRef.current, store.design);
+  }, [store.design]);
+  const handleExportJSON = useCallback4(() => {
+    exportToJSON(store.design);
+  }, [store.design]);
+  const handleImportJSON = useCallback4((e) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      const reader = new FileReader;
+      reader.onload = (event) => {
+        try {
+          const jsonData = JSON.parse(event.target?.result);
+          importFromJSON(jsonData, (loadedDesign) => {
+            store.setDesign(loadedDesign);
+          }, (errorMessage) => {
+            console.error("Import error:", errorMessage);
+          }, () => {
+            console.log("Import requires user inputs - not implemented");
+          });
+        } catch (error) {
+          console.error("Invalid JSON file:", error);
         }
-        return page;
-      })
-    }));
-  }, [currentPageId]);
-  const addPage = useCallback4(() => {
-    const newPage = {
-      id: Date.now().toString(),
-      name: `Page ${design.pages.length + 1}`,
-      elements: [],
-      background: "#ffffff",
-      backgroundImageObject: undefined
-    };
-    setDesign((prev) => ({
-      ...prev,
-      pages: [...prev.pages, newPage]
-    }));
-    setCurrentPageId(newPage.id);
-  }, [design.pages.length]);
-  const deletePage = useCallback4((pageId) => {
-    if (design.pages.length > 1) {
-      setDesign((prev) => ({
-        ...prev,
-        pages: prev.pages.filter((p) => p.id !== pageId)
-      }));
-      if (currentPageId === pageId) {
-        setCurrentPageId(design.pages[0].id);
-      }
+      };
+      reader.readAsText(file);
     }
-  }, [design.pages, currentPageId]);
+  }, [store]);
   const handleImageUpload = useCallback4((e) => {
     const file = e.target.files?.[0];
     if (file) {
       const reader = new FileReader;
       reader.onload = (event) => {
         const img = new window.Image;
-        img.src = event.target?.result;
         img.onload = () => {
-          const newElement = {
-            id: Date.now().toString(),
-            type: "image",
-            name: file.name,
-            x: 100,
-            y: 100,
-            width: img.naturalWidth,
-            height: img.naturalHeight,
-            rotation: 0,
-            visible: true,
-            locked: false,
-            opacity: 1,
-            src: event.target?.result,
-            cropX: 0,
-            cropY: 0,
-            cropWidth: img.naturalWidth,
-            cropHeight: img.naturalHeight,
-            mask: undefined
-          };
-          setDesign((prev) => ({
-            ...prev,
-            pages: prev.pages.map((page) => page.id === currentPageId ? { ...page, elements: [...page.elements, newElement] } : page)
-          }));
-          saveToHistory(design);
+          if (store.activePage) {
+            store.activePage.addElement({
+              type: "image",
+              src: event.target?.result,
+              x: store.design.width / 2 - img.width / 2,
+              y: store.design.height / 2 - img.height / 2,
+              width: img.width,
+              height: img.height
+            });
+          }
         };
+        img.src = event.target?.result;
       };
       reader.readAsDataURL(file);
     }
-    if (fileInputRef.current) {
-      fileInputRef.current.value = "";
-    }
-  }, [currentPageId, saveToHistory]);
-  const searchUnsplash = useCallback4(async () => {
-    if (!unsplashQuery)
-      return;
-    if (UNSPLASH_ACCESS_KEY === "YOUR_UNSPLASH_ACCESS_KEY_HERE" || !UNSPLASH_ACCESS_KEY) {
-      console.warn("Unsplash API key is not configured. Please set UNSPLASH_ACCESS_KEY in src/config.ts");
-      const mockResults = Array(9).fill(null).map((_, i) => ({
-        id: `unsplash-mock-${i}`,
-        urls: {
-          regular: `https://source.unsplash.com/400x300/?${unsplashQuery}&sig=${i}`,
-          thumb: `https://source.unsplash.com/200x150/?${unsplashQuery}&sig=${i}`
-        },
-        user: { name: "Mock User" }
-      }));
-      setUnsplashResults(mockResults);
-      return;
-    }
-    try {
-      const response = await fetch(`https://api.unsplash.com/search/photos?query=${encodeURIComponent(unsplashQuery)}&per_page=9`, {
-        headers: {
-          Authorization: `Client-ID ${UNSPLASH_ACCESS_KEY}`
-        }
-      });
-      if (!response.ok) {
-        console.error("Failed to fetch from Unsplash:", response.statusText);
-        setUnsplashResults([]);
-        return;
-      }
-      const data = await response.json();
-      setUnsplashResults(data.results.map((img) => ({
-        id: img.id,
-        urls: { regular: img.urls.regular, thumb: img.urls.thumb },
-        user: { name: img.user.name }
-      })));
-    } catch (error) {
-      console.error("Error searching Unsplash:", error);
-      setUnsplashResults([]);
-    }
-  }, [unsplashQuery]);
-  const addUnsplashImage = useCallback4((imageUrl) => {
-    if (unsplashMode === "element") {
-      const img = new window.Image;
-      img.crossOrigin = "anonymous";
-      img.src = imageUrl;
-      img.onload = () => {
-        const newElement = {
-          id: Date.now().toString(),
-          type: "image",
-          name: "Unsplash Image",
-          x: 100,
-          y: 100,
-          width: img.naturalWidth,
-          height: img.naturalHeight,
-          rotation: 0,
-          visible: true,
-          locked: false,
-          opacity: 1,
-          src: imageUrl,
-          cropX: 0,
-          cropY: 0,
-          cropWidth: img.naturalWidth,
-          cropHeight: img.naturalHeight,
-          mask: undefined
-        };
-        setDesign((prev) => ({
-          ...prev,
-          pages: prev.pages.map((page) => page.id === currentPageId ? { ...page, elements: [...page.elements, newElement] } : page)
-        }));
-        saveToHistory(design);
-      };
-    } else if (unsplashMode === "background") {
-      const bgImg = new window.Image;
-      bgImg.crossOrigin = "anonymous";
-      bgImg.src = imageUrl;
-      bgImg.onload = () => {
-        setDesign((prev) => ({
-          ...prev,
-          pages: prev.pages.map((p) => p.id === currentPageId ? {
-            ...p,
-            background: `url(${imageUrl})`,
-            backgroundImageObject: bgImg
-          } : p)
-        }));
-        saveToHistory(design);
-      };
-    }
-    setShowUnsplash(false);
-    setUnsplashQuery("");
-    setUnsplashResults([]);
-    setUnsplashMode("element");
-  }, [currentPageId, saveToHistory, unsplashMode]);
-  const handleImportJSON = (event) => {
-    importFromJSON(event, (newDesign) => {
-      if (newDesign && newDesign.pages && newDesign.pages.length > 0) {
-        setDesign(newDesign);
-        setSelectedId(null);
-        setSelectedIds([]);
-        const firstPageId = newDesign.pages[0]?.id;
-        setCurrentPageId(firstPageId || "1");
-        saveToHistory(newDesign);
-      } else {
-        alert("Invalid design structure in JSON file. Could not load.");
-      }
-    }, (errorMessage) => {
-      alert(`Error importing JSON: ${errorMessage}`);
-    }, (inputs, onComplete) => {
-      setPendingInputs(inputs);
-      setShowInputModal(true);
-      window.__pendingImportComplete = onComplete;
-    });
-    if (jsonInputRef.current) {
-      jsonInputRef.current.value = "";
-    }
-  };
-  const handleInputModalComplete = (values) => {
-    setShowInputModal(false);
-    const onComplete = window.__pendingImportComplete;
-    if (onComplete) {
-      onComplete(values);
-      delete window.__pendingImportComplete;
-    }
-    setPendingInputs([]);
-  };
-  const handleInputModalCancel = () => {
-    setShowInputModal(false);
-    setPendingInputs([]);
-    delete window.__pendingImportComplete;
-  };
-  const panelConfigs = useMemo(() => {
-    const builtInConfigs = {
-      elements: {
-        id: "elements",
-        title: "Elements",
-        component: ElementPanel_default,
-        props: { onAddShape: addShape, store }
-      },
-      text: {
-        id: "text",
-        title: "Text",
-        component: TextPanel_default,
-        props: {
-          selectedElement,
-          updateElement,
-          setTool,
-          onAddText: addText,
-          store
-        }
-      },
-      image: {
-        id: "image",
-        title: "Images",
-        component: ImagePanel_default,
-        props: {
-          selectedElement,
-          updateElement,
-          onUploadClick: () => fileInputRef.current?.click(),
-          onUnsplashClick: () => {
-            setShowUnsplash(true);
-            setUnsplashMode("element");
-          },
-          canvasWidth: design.width,
-          canvasHeight: design.height,
-          store
-        }
-      },
-      design: {
-        id: "design",
-        title: "Design",
-        component: DesignPanel_default,
-        props: {
-          design,
-          currentPage,
-          selectedElement,
-          setDesign,
-          updateElement,
-          onSetUnsplashBackground: () => {
-            setShowUnsplash(true);
-            setUnsplashMode("background");
-          },
-          config,
-          store
-        }
-      },
-      background: {
-        id: "background",
-        title: "Background",
-        component: BackgroundPanel_default,
-        props: {
-          design,
-          currentPage,
-          setDesign,
-          onSetUnsplashBackground: () => {
-            setShowUnsplash(true);
-            setUnsplashMode("background");
-          },
-          store
-        }
-      },
-      ...config?.variables ? {
-        variables: {
-          id: "variables",
-          title: "Variables",
-          component: VariablesPanel_default,
-          props: {
-            config,
-            design,
-            setDesign,
-            store
-          }
-        }
-      } : {},
-      ...config?.export ? {
-        export: {
-          id: "export",
-          title: "Export",
-          component: ExportPanel_default,
-          props: {
-            onExportToPNG: config.export?.png ? () => {
-              if (stageRef.current)
-                exportToPNG(stageRef.current, design);
-            } : undefined,
-            onExportToJPG: config.export?.jpg ? () => {
-              if (stageRef.current)
-                exportToJPG(stageRef.current, design);
-            } : undefined,
-            onExportToJSON: config.export?.json ? () => exportToJSON(design) : undefined,
-            onImportJSON: () => jsonInputRef.current?.click(),
-            store
-          }
-        }
-      } : {}
-    };
-    if (!config?.panels || config.panels.length === 0) {
-      return [
-        "text",
-        "elements",
-        "image",
-        "design",
-        "background",
-        ...config?.variables ? ["variables"] : [],
-        ...config?.export ? ["export"] : []
-      ].filter((id) => builtInConfigs[id]).map((id) => builtInConfigs[id]);
-    }
-    const ordered = [];
-    for (const panel of config.panels) {
-      if (typeof panel === "string") {
-        const config2 = builtInConfigs[panel];
-        if (config2) {
-          ordered.push(config2);
-        }
-      } else {
-        ordered.push({
-          id: panel.id,
-          title: panel.title,
-          component: panel.component,
-          props: { ...panel.props, store }
-        });
-      }
-    }
-    return ordered;
-  }, [
-    addShape,
-    addText,
-    config,
-    currentPage,
-    design,
-    selectedElement,
-    setTool,
-    updateElement,
-    store
-  ]);
-  const DynamicPanelRenderer = () => {
-    const activePanelConfig = panelConfigs.find((p) => p.id === activePanelId);
-    if (!activePanelConfig) {
-      return /* @__PURE__ */ React18.createElement("div", {
-        className: "text-white"
-      }, "Panel not found");
-    }
-    const PanelComponent = activePanelConfig.component;
-    return /* @__PURE__ */ React18.createElement(PanelComponent, {
-      ...activePanelConfig.props
-    });
-  };
-  useEffect4(() => {
-    const handleKeyDown = (e) => {
-      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)
-        return;
-      if (e.metaKey || e.ctrlKey) {
-        switch (e.key) {
-          case "z":
-            if (e.shiftKey) {
-              redo();
-            } else {
-              undo();
-            }
-            e.preventDefault();
-            break;
-          case "c":
-            break;
-          case "v":
-            break;
-          case "d":
-            duplicateSelected();
-            e.preventDefault();
-            break;
-          case "s":
-            exportToJSON(design);
-            e.preventDefault();
-            break;
-        }
-      } else {
-        switch (e.key) {
-          case "Delete":
-          case "Backspace":
-            deleteSelected();
-            break;
-          case "Escape":
-            setSelectedId(null);
-            setSelectedIds([]);
-            break;
-        }
-      }
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [deleteSelected, duplicateSelected, exportToJSON, undo, redo]);
-  useEffect4(() => {
-    if (history.length === 0) {
-      setHistory([JSON.parse(JSON.stringify(design))]);
-      setHistoryIndex(0);
-    }
-  }, []);
-  return /* @__PURE__ */ React18.createElement("div", {
-    className: "h-screen flex flex-col bg-gray-900"
-  }, /* @__PURE__ */ React18.createElement(Header_default, {
+  }, [store]);
+  return /* @__PURE__ */ React17.createElement("div", {
+    className: "w-full h-full flex flex-col bg-gray-900"
+  }, /* @__PURE__ */ React17.createElement(Header_default, {
     name,
-    zoom,
-    historyIndex,
-    historyLength: history.length,
-    onUndo: undo,
-    onRedo: redo,
-    onZoomIn: () => setZoom(Math.min(3, zoom + 0.1)),
-    onZoomOut: () => setZoom(Math.max(0.1, zoom - 0.1)),
-    onZoomReset: () => setZoom(1),
-    onSetActivePanel: setActivePanelId
-  }), /* @__PURE__ */ React18.createElement("div", {
+    zoom: store.zoom,
+    historyIndex: 0,
+    historyLength: 0,
+    onUndo: () => {},
+    onRedo: () => {},
+    onZoomIn: () => store.setZoom(Math.min(3, store.zoom + 0.1)),
+    onZoomOut: () => store.setZoom(Math.max(0.1, store.zoom - 0.1)),
+    onZoomReset: () => store.setZoom(1),
+    onSetActivePanel: store.openSidePanel
+  }), /* @__PURE__ */ React17.createElement("div", {
     className: "flex-1 flex overflow-hidden"
-  }, /* @__PURE__ */ React18.createElement("div", {
+  }, /* @__PURE__ */ React17.createElement("div", {
     className: "w-80 bg-gray-800 border-r border-gray-700 flex"
-  }, /* @__PURE__ */ React18.createElement(LeftMenu_default, {
-    tool,
-    activePanel: activePanelId,
-    onSetTool: setTool,
-    onSetActivePanel: setActivePanelId,
+  }, /* @__PURE__ */ React17.createElement(LeftMenu_default, {
+    tool: store.tool,
+    activePanel: store.activePanelId || "elements",
+    onSetTool: store.setTool,
+    onSetActivePanel: store.openSidePanel,
     config
-  }), /* @__PURE__ */ React18.createElement("div", {
+  }), /* @__PURE__ */ React17.createElement("div", {
     className: "flex-1 p-4 overflow-y-auto"
-  }, /* @__PURE__ */ React18.createElement(DynamicPanelRenderer, null))), /* @__PURE__ */ React18.createElement("div", {
+  }, /* @__PURE__ */ React17.createElement(DynamicPanelRenderer, null))), /* @__PURE__ */ React17.createElement("div", {
     className: "flex-1 bg-gray-700 overflow-hidden relative",
     ref: containerRef
-  }, /* @__PURE__ */ React18.createElement("div", {
+  }, !currentPage ? /* @__PURE__ */ React17.createElement("div", {
+    className: "absolute inset-0 flex items-center justify-center text-gray-400"
+  }, /* @__PURE__ */ React17.createElement("div", {
+    className: "text-center"
+  }, /* @__PURE__ */ React17.createElement("p", {
+    className: "mb-4"
+  }, "No pages available"), /* @__PURE__ */ React17.createElement("button", {
+    onClick: () => store.addPage(),
+    className: "px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+  }, "Add Page"))) : /* @__PURE__ */ React17.createElement("div", {
     className: "absolute inset-0 flex items-center justify-center"
-  }, /* @__PURE__ */ React18.createElement("div", {
+  }, /* @__PURE__ */ React17.createElement("div", {
     className: "bg-white shadow-2xl",
     style: {
-      transform: `scale(${zoom})`,
+      transform: `scale(${store.zoom})`,
       transformOrigin: "center center"
     }
-  }, /* @__PURE__ */ React18.createElement(Stage, {
+  }, /* @__PURE__ */ React17.createElement(Stage, {
     ref: stageRef,
-    width: design.width,
-    height: design.height,
+    width: store.design.width,
+    height: store.design.height,
     onClick: handleStageClick,
     onTap: handleStageClick
-  }, /* @__PURE__ */ React18.createElement(Layer, null, currentPage && /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(Rect2, {
+  }, /* @__PURE__ */ React17.createElement(Layer, null, /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(Rect2, {
     x: 0,
     y: 0,
-    width: design.width,
-    height: design.height,
+    width: store.design.width,
+    height: store.design.height,
     fill: currentPage.backgroundImageObject ? undefined : currentPage.background,
     fillPatternImage: currentPage.backgroundImageObject,
     fillPatternRepeat: "no-repeat"
   }), currentPage.elements.map((element) => {
     switch (element.type) {
       case "text":
-        return /* @__PURE__ */ React18.createElement(EditableTextElement, {
+        return /* @__PURE__ */ React17.createElement(EditableTextElement, {
+          key: element.id,
+          element,
+          isSelected: element.id === store.selectedId,
+          onSelect: () => {
+            store.setSelectedId(element.id);
+            store.setSelectedIds([]);
+          },
+          onChange: (attrs) => updateElement(element.id, attrs)
+        });
+      case "image":
+        return /* @__PURE__ */ React17.createElement(UrlImageElement, {
           key: element.id,
           element,
-          isSelected: element.id === selectedId,
+          isSelected: element.id === store.selectedId,
           onSelect: () => {
-            setSelectedId(element.id);
-            setSelectedIds([]);
+            store.setSelectedId(element.id);
+            store.setSelectedIds([]);
+          },
+          onChange: (attrs) => updateElement(element.id, attrs)
+        });
+      case "shape":
+        return /* @__PURE__ */ React17.createElement(ShapeElement, {
+          key: element.id,
+          element,
+          isSelected: element.id === store.selectedId,
+          onSelect: () => {
+            store.setSelectedId(element.id);
+            store.setSelectedIds([]);
           },
           onChange: (attrs) => updateElement(element.id, attrs)
         });
       default:
         return null;
     }
-  })))))), config?.multiPage && /* @__PURE__ */ React18.createElement("div", {
+  })))))), config?.multiPage && /* @__PURE__ */ React17.createElement("div", {
     className: "absolute bottom-4 left-4 flex items-center space-x-2"
-  }, design.pages.map((page, index) => /* @__PURE__ */ React18.createElement("button", {
+  }, store.design.pages.map((page, index) => /* @__PURE__ */ React17.createElement("button", {
     key: page.id,
-    onClick: () => setCurrentPageId(page.id),
-    className: `px-3 py-1 rounded text-sm ${page.id === currentPageId ? "bg-blue-600 text-white" : "bg-gray-800 text-gray-300 hover:bg-gray-700"}`
-  }, "Page ", index + 1)), /* @__PURE__ */ React18.createElement("button", {
+    onClick: () => store.setActivePage(page.id),
+    className: `px-3 py-1 rounded text-sm ${page.id === store.activePageId ? "bg-blue-600 text-white" : "bg-gray-800 text-gray-300 hover:bg-gray-700"}`
+  }, "Page ", index + 1)), /* @__PURE__ */ React17.createElement("button", {
     onClick: addPage,
-    className: "p-1 bg-gray-800 text-gray-300 rounded hover:bg-gray-700",
+    className: "px-3 py-1 rounded text-sm bg-gray-800 text-gray-300 hover:bg-gray-700",
     title: "Add Page"
-  }, /* @__PURE__ */ React18.createElement(PlusCircle, {
+  }, /* @__PURE__ */ React17.createElement(PlusCircle, {
     className: "w-4 h-4"
-  })))), /* @__PURE__ */ React18.createElement(RightSidebar_default, {
-    currentPageElements: currentPage.elements,
+  })))), /* @__PURE__ */ React17.createElement(RightSidebar_default, {
+    currentPageElements: currentPage?.elements || [],
     selectedElement,
-    selectedId,
-    onSelectElement: setSelectedId,
+    selectedId: store.selectedId,
+    onSelectElement: store.setSelectedId,
     onUpdateElement: updateElement,
     onDuplicateSelected: duplicateSelected,
     onMoveElementUp: moveElementUp,
     onMoveElementDown: moveElementDown,
     onDeleteSelected: deleteSelected
-  })), /* @__PURE__ */ React18.createElement("input", {
+  })), /* @__PURE__ */ React17.createElement("input", {
     ref: fileInputRef,
     type: "file",
     accept: "image/*",
     onChange: handleImageUpload,
-    className: "hidden",
-    multiple: true
-  }), /* @__PURE__ */ React18.createElement("input", {
+    style: { display: "none" }
+  }), /* @__PURE__ */ React17.createElement("input", {
     ref: jsonInputRef,
     type: "file",
     accept: ".json",
     onChange: handleImportJSON,
-    className: "hidden"
-  }), showInputModal && /* @__PURE__ */ React18.createElement(TemplateInputModal_default, {
-    inputs: pendingInputs,
-    onComplete: handleInputModalComplete,
-    onCancel: handleInputModalCancel
-  }), showUnsplash && /* @__PURE__ */ React18.createElement("div", {
-    className: "fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-8"
-  }, /* @__PURE__ */ React18.createElement("div", {
-    className: "bg-gray-800 rounded-lg w-full max-w-4xl max-h-full overflow-hidden flex flex-col"
-  }, /* @__PURE__ */ React18.createElement("div", {
-    className: "p-6 border-b border-gray-700"
-  }, /* @__PURE__ */ React18.createElement("h3", {
-    className: "text-xl font-semibold text-white mb-4"
-  }, "Search Unsplash"), /* @__PURE__ */ React18.createElement("div", {
-    className: "flex space-x-4"
-  }, /* @__PURE__ */ React18.createElement("input", {
-    type: "text",
-    value: unsplashQuery,
-    onChange: (e) => setUnsplashQuery(e.target.value),
-    onKeyDown: (e) => e.key === "Enter" && searchUnsplash(),
-    placeholder: "Search for images...",
-    className: "flex-1 bg-gray-700 text-white border border-gray-600 rounded px-4 py-2 focus:border-blue-500 focus:outline-none",
-    autoFocus: true
-  }), /* @__PURE__ */ React18.createElement("button", {
-    onClick: searchUnsplash,
-    className: "px-6 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
-  }, "Search"), /* @__PURE__ */ React18.createElement("button", {
-    onClick: () => {
-      setShowUnsplash(false);
-      setUnsplashQuery("");
-      setUnsplashResults([]);
-    },
-    className: "px-6 py-2 bg-gray-700 text-white rounded hover:bg-gray-600"
-  }, "Cancel"))), /* @__PURE__ */ React18.createElement("div", {
-    className: "flex-1 overflow-y-auto p-6"
-  }, unsplashResults.length > 0 ? /* @__PURE__ */ React18.createElement("div", {
-    className: "grid grid-cols-3 gap-4"
-  }, unsplashResults.map((result) => /* @__PURE__ */ React18.createElement("button", {
-    key: result.id,
-    onClick: () => addUnsplashImage(result.urls.regular),
-    className: "relative group overflow-hidden rounded-lg aspect-square"
-  }, /* @__PURE__ */ React18.createElement("img", {
-    src: result.urls.thumb,
-    alt: "",
-    className: "w-full h-full object-cover group-hover:scale-110 transition-transform duration-200"
-  }), /* @__PURE__ */ React18.createElement("div", {
-    className: "absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200 flex items-center justify-center"
-  }, /* @__PURE__ */ React18.createElement(PlusCircle, {
-    className: "w-8 h-8 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-200"
-  }))))) : /* @__PURE__ */ React18.createElement("div", {
-    className: "text-center text-gray-400 py-12"
-  }, "Enter a search term to find images")))));
+    style: { display: "none" }
+  }));
 };
 var CanvasEditor_default = CanvasEditor;
 // src/context/CanvasStoreContext.tsx
@@ -4131,6 +3332,14 @@ var useCanvasStore = () => {
   }
   return store;
 };
+// src/config.ts
+var _unsplashAccessKey = typeof process !== "undefined" && process.env?.UNSPLASH_ACCESS_KEY ? process.env.UNSPLASH_ACCESS_KEY : undefined;
+function setUnsplashAccessKey(key) {
+  _unsplashAccessKey = key;
+}
+function getUnsplashAccessKey() {
+  return _unsplashAccessKey;
+}
 
 // src/lib/index.ts
 initJsxCompat();