labellife-design-tool 1.3.0 → 1.3.2

package/dist/lib/lib/index.js

@@ -547,11 +547,8 @@ function initJsxCompat() {
 }
 
 // src/CanvasEditor.tsx
-import React17, { useRef as useRef4, useEffect as useEffect4, useMemo, useCallback as useCallback4 } from "react";
+import React17, { useRef as useRef4, useEffect as useEffect4, useMemo, useCallback as useCallback4, forwardRef, useImperativeHandle } from "react";
 import { Stage, Layer, Rect as Rect2 } from "react-konva";
-import {
-  PlusCircle
-} from "lucide-react";
 
 // src/elements/EditableTextElement.tsx
 import React, { useRef, useEffect } from "react";
@@ -2717,350 +2714,87 @@ var RightSidebar = ({
   }), /* @__PURE__ */ React16.createElement("span", null, "Delete"))));
 };
 var RightSidebar_default = RightSidebar;
-// src/store/simpleStore.ts
-class SimpleCanvasStore {
-  _design;
-  _activePageId;
-  _activePanelId;
-  _selectedId;
-  _selectedIds;
-  _tool;
-  _zoom;
-  _selectedShape;
-  _listeners = {};
-  constructor(initialDesign) {
-    this._design = {
-      id: initialDesign?.id || `design-${Date.now()}`,
-      name: initialDesign?.name || "Untitled Design",
-      width: initialDesign?.width || 800,
-      height: initialDesign?.height || 600,
-      pages: initialDesign?.pages || [],
-      fonts: initialDesign?.fonts || [],
-      colors: initialDesign?.colors || [],
-      templateInputs: initialDesign?.templateInputs
-    };
-    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;
-  }
-  off(event) {
-    delete this._listeners[event];
-  }
-  emit(event, ...args) {
-    const callback = this._listeners[event];
-    if (callback) {
-      callback(...args);
-    }
-  }
-  get design() {
-    return this._design;
-  }
-  get width() {
-    return this._design.width;
-  }
-  get height() {
-    return this._design.height;
-  }
-  get activePage() {
-    const page = this._design.pages.find((p) => p.id === this._activePageId) || null;
-    if (!page)
-      return null;
-    return {
-      ...page,
-      addElement: (element) => {
-        this.addElement(element);
-      }
-    };
-  }
-  get activePageId() {
-    return this._activePageId;
-  }
-  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", this._design);
-    this.emit("activePageChanged", this._activePageId);
-  }
-  updateDesign(updates) {
-    this._design = { ...this._design, ...updates };
-    this.emit("designChanged", this._design);
-  }
-  setSize(width, height) {
-    this._design.width = width;
-    this._design.height = height;
-    this.emit("designChanged", this._design);
+
+// src/CanvasEditor.tsx
+var CanvasEditor = forwardRef(({ name, config, store }, ref) => {
+  if (!store) {
+    console.error("CanvasEditor: store prop is required but was not provided");
+    return /* @__PURE__ */ React17.createElement("div", null, "Error: Store is required");
   }
-  addPage(page) {
-    console.log(`addPage called - Current pages: ${this._design.pages.length}, New page ID: ${page?.id || `page-${Date.now()}`}`);
-    const newPage = {
-      id: page?.id || `page-${Date.now()}`,
-      name: page?.name || `Page ${this._design.pages.length + 1}`,
-      elements: page?.elements || [],
-      background: page?.background || "#ffffff",
-      backgroundImageObject: page?.backgroundImageObject
+  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(() => {
+    const handleDesignChange = (newDesign) => {};
+    const handleActivePageChange = (pageId) => {};
+    const handleActivePanelChange = (panelId) => {};
+    const handleSelectedIdChange = (selectedId) => {};
+    const handleSelectedIdsChange = (selectedIds) => {};
+    const handleToolChange = (tool) => {};
+    const handleZoomChange = (zoom) => {};
+    const handleSelectedShapeChange = (shape) => {};
+    store.on("designChanged", handleDesignChange);
+    store.on("activePageChanged", handleActivePageChange);
+    store.on("activePanelChanged", handleActivePanelChange);
+    store.on("selectedIdChanged", handleSelectedIdChange);
+    store.on("selectedIdsChanged", handleSelectedIdsChange);
+    store.on("toolChanged", handleToolChange);
+    store.on("zoomChanged", handleZoomChange);
+    store.on("selectedShapeChanged", handleSelectedShapeChange);
+    return () => {
+      store.off("designChanged");
+      store.off("activePageChanged");
+      store.off("activePanelChanged");
+      store.off("selectedIdChanged");
+      store.off("selectedIdsChanged");
+      store.off("toolChanged");
+      store.off("zoomChanged");
+      store.off("selectedShapeChanged");
     };
-    this._design.pages.push(newPage);
-    if (!this._activePageId || this._design.pages.length === 1) {
-      this._activePageId = newPage.id;
-      this.emit("activePageChanged", this._activePageId);
+  }, [store]);
+  const handleStageClick = useCallback4((e) => {
+    const clickedOnEmpty = e.target === e.target.getStage();
+    if (clickedOnEmpty) {
+      store.setSelectedId(null);
+      store.setSelectedIds([]);
     }
-    this.emit("designChanged", this._design);
-    return newPage.id;
-  }
-  deletePages(pageIds) {
-    const remainingPages = this._design.pages.filter((p) => !pageIds.includes(p.id));
-    if (remainingPages.length === 0) {
-      console.warn("Cannot delete all pages. At least one page must remain.");
+  }, [store]);
+  const addText = useCallback4(() => {
+    if (!store?.activePage)
       return;
-    }
-    if (pageIds.includes(this._activePageId)) {
-      this._activePageId = remainingPages[0].id;
-      this.emit("activePageChanged", this._activePageId);
-    }
-    this._design.pages = remainingPages;
-    this.emit("designChanged", this._design);
-  }
-  addElement(element) {
-    const page = this.activePage;
-    if (!page) {
-      console.warn("addElement: No active page!");
+    store.activePage.addElement({
+      type: "text",
+      text: "Edit this text",
+      x: (store.design?.width || 800) / 2 - 50,
+      y: (store.design?.height || 600) / 2 - 15,
+      width: 100,
+      height: 30
+    });
+  }, [store]);
+  const addShape = useCallback4((shapeType) => {
+    if (!store?.activePage)
       return;
-    }
-    const newElement = {
-      id: element.id || `element-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
-      type: element.type,
-      name: element.name || `${element.type} element`,
-      x: element.x || 0,
-      y: element.y || 0,
-      width: element.width || 100,
-      height: element.height || 100,
-      rotation: element.rotation || 0,
-      visible: element.visible !== false,
-      locked: element.locked || false,
-      opacity: element.opacity || 1,
-      ...element
-    };
-    page.elements.push(newElement);
-    this.emit("designChanged", this._design);
-  }
-  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 {
-        Promise.resolve().then(() => exports_exportImportUtils).then(({ canvasToBlob: canvasToBlob2 }) => {
-          const canvas = document.createElement("canvas");
-          canvas.width = this._design.width;
-          canvas.height = this._design.height;
-          const ctx = canvas.getContext("2d");
-          if (!ctx) {
-            reject(new Error("Failed to get canvas context"));
-            return;
-          }
-          ctx.fillStyle = "#ffffff";
-          ctx.fillRect(0, 0, canvas.width, canvas.height);
-          const mimeType = type === "jpg" ? "image/jpeg" : "image/png";
-          const quality = type === "jpg" ? 0.9 : undefined;
-          canvas.toBlob((blob) => {
-            if (blob) {
-              resolve(blob);
-            } else {
-              reject(new Error("Failed to create blob"));
-            }
-          }, mimeType, quality);
-        });
-      } catch (error) {
-        reject(error);
-      }
+    store.activePage.addElement({
+      type: "shape",
+      shapeType,
+      x: (store.design?.width || 800) / 2 - 50,
+      y: (store.design?.height || 600) / 2 - 50,
+      width: 100,
+      height: 100
     });
-  }
-  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 {
-        Promise.resolve().then(() => exports_exportImportUtils).then(({ importFromJSONData: importFromJSONData2 }) => {
-          importFromJSONData2(jsonData, (loadedDesign) => {
-            this.setDesign(loadedDesign);
-            resolve();
-          }, (errorMessage) => {
-            reject(new Error(errorMessage));
-          }, () => {
-            reject(new Error("Templates requiring user inputs are not yet supported in standalone store"));
-          });
-        });
-      } catch (error) {
-        reject(error);
-      }
-    });
-  }
-}
-var createSimpleStore = (initialDesign) => {
-  return new SimpleCanvasStore(initialDesign);
-};
-
-// src/CanvasEditor.tsx
-var CanvasEditor = ({
-  name,
-  config,
-  store: externalStore
-}) => {
-  const store = externalStore || createSimpleStore({
-    name,
-    width: 800,
-    height: 600
-  });
-  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) => {};
-      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 handleStageClick = useCallback4((e) => {
-    const clickedOnEmpty = e.target === e.target.getStage();
-    if (clickedOnEmpty) {
-      store.setSelectedId(null);
-      store.setSelectedIds([]);
-    }
-  }, [store]);
-  const addText = useCallback4(() => {
-    if (!store.activePage)
-      return;
-    store.activePage.addElement({
-      type: "text",
-      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) => {
-    if (!store.activePage)
-      return;
-    store.activePage.addElement({
-      type: "shape",
-      shapeType,
-      x: store.design.width / 2 - 50,
-      y: store.design.height / 2 - 50,
-      width: 100,
-      height: 100
-    });
-  }, [store]);
-  const updateElement = useCallback4((id, attrs) => {
-    store.updateElement(id, attrs);
-  }, [store]);
-  const deleteSelected = useCallback4(() => {
-    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([]);
+  }, [store]);
+  const updateElement = useCallback4((id, attrs) => {
+    store.updateElement(id, attrs);
+  }, [store]);
+  const deleteSelected = useCallback4(() => {
+    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([]);
     }
   }, [store]);
   const duplicateSelected = useCallback4(() => {
@@ -3078,12 +2812,6 @@ var CanvasEditor = ({
   }, [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 } },
@@ -3172,12 +2900,12 @@ var CanvasEditor = ({
       reader.onload = (event) => {
         const img = new window.Image;
         img.onload = () => {
-          if (store.activePage) {
+          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,
+              x: (store.design?.width || 800) / 2 - img.width / 2,
+              y: (store.design?.height || 600) / 2 - img.height / 2,
               width: img.width,
               height: img.height
             });
@@ -3188,6 +2916,31 @@ var CanvasEditor = ({
       reader.readAsDataURL(file);
     }
   }, [store]);
+  useImperativeHandle(ref, () => ({
+    stage: stageRef.current,
+    exportToPNG: () => {
+      Promise.resolve().then(() => exports_exportImportUtils).then(({ exportToPNG: exportToPNG2 }) => {
+        exportToPNG2(stageRef.current, store.design);
+      });
+    },
+    exportToJPG: () => {
+      Promise.resolve().then(() => exports_exportImportUtils).then(({ exportToJPG: exportToJPG2 }) => {
+        exportToJPG2(stageRef.current, store.design);
+      });
+    },
+    exportToJSON: () => {
+      Promise.resolve().then(() => exports_exportImportUtils).then(({ exportToJSON: exportToJSON2 }) => {
+        exportToJSON2(store.design);
+      });
+    },
+    getDesign: () => store.design,
+    setCanvasSize: (width, height) => {
+      store.updateDesign({ width, height });
+    },
+    loadDesign: async (jsonData) => {
+      await store.loadJSON(jsonData);
+    }
+  }), [stageRef.current, store.design]);
   return /* @__PURE__ */ React17.createElement("div", {
     className: "w-full h-full flex flex-col bg-gray-900"
   }, /* @__PURE__ */ React17.createElement(Header_default, {
@@ -3222,10 +2975,9 @@ var CanvasEditor = ({
     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", {
+  }, "No pages available"), /* @__PURE__ */ React17.createElement("p", {
+    className: "text-sm"
+  }, "Please add pages through your store management"))) : /* @__PURE__ */ React17.createElement("div", {
     className: "absolute inset-0 flex items-center justify-center"
   }, /* @__PURE__ */ React17.createElement("div", {
     className: "bg-white shadow-2xl",
@@ -3235,15 +2987,15 @@ var CanvasEditor = ({
     }
   }, /* @__PURE__ */ React17.createElement(Stage, {
     ref: stageRef,
-    width: store.design.width,
-    height: store.design.height,
+    width: store.design?.width || 800,
+    height: store.design?.height || 600,
     onClick: handleStageClick,
     onTap: handleStageClick
   }, /* @__PURE__ */ React17.createElement(Layer, null, /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(Rect2, {
     x: 0,
     y: 0,
-    width: store.design.width,
-    height: store.design.height,
+    width: store.design?.width || 800,
+    height: store.design?.height || 600,
     fill: currentPage.backgroundImageObject ? undefined : currentPage.background,
     fillPatternImage: currentPage.backgroundImageObject,
     fillPatternRepeat: "no-repeat"
@@ -3287,17 +3039,11 @@ var CanvasEditor = ({
     }
   })))))), config?.multiPage && /* @__PURE__ */ React17.createElement("div", {
     className: "absolute bottom-4 left-4 flex items-center space-x-2"
-  }, store.design.pages.map((page, index) => /* @__PURE__ */ React17.createElement("button", {
+  }, (store.design?.pages || []).map((page, index) => /* @__PURE__ */ React17.createElement("button", {
     key: page.id,
     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: "px-3 py-1 rounded text-sm bg-gray-800 text-gray-300 hover:bg-gray-700",
-    title: "Add Page"
-  }, /* @__PURE__ */ React17.createElement(PlusCircle, {
-    className: "w-4 h-4"
-  })))), /* @__PURE__ */ React17.createElement(RightSidebar_default, {
+  }, "Page ", index + 1)))), /* @__PURE__ */ React17.createElement(RightSidebar_default, {
     currentPageElements: currentPage?.elements || [],
     selectedElement,
     selectedId: store.selectedId,
@@ -3320,8 +3066,265 @@ var CanvasEditor = ({
     onChange: handleImportJSON,
     style: { display: "none" }
   }));
-};
+});
+CanvasEditor.displayName = "CanvasEditor";
 var CanvasEditor_default = CanvasEditor;
+// src/store/simpleStore.ts
+class SimpleCanvasStore {
+  _design;
+  _activePageId;
+  _activePanelId;
+  _selectedId;
+  _selectedIds;
+  _tool;
+  _zoom;
+  _selectedShape;
+  _listeners = {};
+  constructor(initialDesign) {
+    this._design = {
+      id: initialDesign?.id || `design-${Date.now()}`,
+      name: initialDesign?.name || "Untitled Design",
+      width: initialDesign?.width || 800,
+      height: initialDesign?.height || 600,
+      pages: initialDesign?.pages || [],
+      fonts: initialDesign?.fonts || [],
+      colors: initialDesign?.colors || [],
+      templateInputs: initialDesign?.templateInputs
+    };
+    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;
+  }
+  off(event) {
+    delete this._listeners[event];
+  }
+  emit(event, ...args) {
+    const callback = this._listeners[event];
+    if (callback) {
+      callback(...args);
+    }
+  }
+  get design() {
+    return this._design;
+  }
+  get width() {
+    return this._design.width;
+  }
+  get height() {
+    return this._design.height;
+  }
+  get activePage() {
+    const page = this._design.pages.find((p) => p.id === this._activePageId) || null;
+    if (!page)
+      return null;
+    return {
+      ...page,
+      addElement: (element) => {
+        this.addElement(element);
+      }
+    };
+  }
+  get activePageId() {
+    return this._activePageId;
+  }
+  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", this._design);
+    this.emit("activePageChanged", this._activePageId);
+  }
+  updateDesign(updates) {
+    this._design = { ...this._design, ...updates };
+    this.emit("designChanged", this._design);
+  }
+  setSize(width, height) {
+    this._design.width = width;
+    this._design.height = height;
+    this.emit("designChanged", this._design);
+  }
+  addPage(page) {
+    console.log(`addPage called - Current pages: ${this._design.pages.length}, New page ID: ${page?.id || `page-${Date.now()}`}`);
+    const newPage = {
+      id: page?.id || `page-${Date.now()}`,
+      name: page?.name || `Page ${this._design.pages.length + 1}`,
+      elements: page?.elements || [],
+      background: page?.background || "#ffffff",
+      backgroundImageObject: page?.backgroundImageObject
+    };
+    this._design.pages.push(newPage);
+    if (!this._activePageId || this._design.pages.length === 1) {
+      this._activePageId = newPage.id;
+      this.emit("activePageChanged", this._activePageId);
+    }
+    this.emit("designChanged", this._design);
+    return newPage.id;
+  }
+  deletePages(pageIds) {
+    const remainingPages = this._design.pages.filter((p) => !pageIds.includes(p.id));
+    if (remainingPages.length === 0) {
+      console.warn("Cannot delete all pages. At least one page must remain.");
+      return;
+    }
+    if (pageIds.includes(this._activePageId)) {
+      this._activePageId = remainingPages[0].id;
+      this.emit("activePageChanged", this._activePageId);
+    }
+    this._design.pages = remainingPages;
+    this.emit("designChanged", this._design);
+  }
+  addElement(element) {
+    const page = this.activePage;
+    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,
+      name: element.name || `${element.type} element`,
+      x: element.x || 0,
+      y: element.y || 0,
+      width: element.width || 100,
+      height: element.height || 100,
+      rotation: element.rotation || 0,
+      visible: element.visible !== false,
+      locked: element.locked || false,
+      opacity: element.opacity || 1,
+      ...element
+    };
+    page.elements.push(newElement);
+    this.emit("designChanged", this._design);
+  }
+  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 {
+        Promise.resolve().then(() => exports_exportImportUtils).then(({ canvasToBlob: canvasToBlob2 }) => {
+          const canvas = document.createElement("canvas");
+          canvas.width = this._design.width;
+          canvas.height = this._design.height;
+          const ctx = canvas.getContext("2d");
+          if (!ctx) {
+            reject(new Error("Failed to get canvas context"));
+            return;
+          }
+          ctx.fillStyle = "#ffffff";
+          ctx.fillRect(0, 0, canvas.width, canvas.height);
+          const mimeType = type === "jpg" ? "image/jpeg" : "image/png";
+          const quality = type === "jpg" ? 0.9 : undefined;
+          canvas.toBlob((blob) => {
+            if (blob) {
+              resolve(blob);
+            } else {
+              reject(new Error("Failed to create blob"));
+            }
+          }, mimeType, quality);
+        });
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
+  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 {
+        Promise.resolve().then(() => exports_exportImportUtils).then(({ importFromJSONData: importFromJSONData2 }) => {
+          importFromJSONData2(jsonData, (loadedDesign) => {
+            this.setDesign(loadedDesign);
+            resolve();
+          }, (errorMessage) => {
+            reject(new Error(errorMessage));
+          }, () => {
+            reject(new Error("Templates requiring user inputs are not yet supported in standalone store"));
+          });
+        });
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
+}
+var createSimpleStore = (initialDesign) => {
+  return new SimpleCanvasStore(initialDesign);
+};
 // src/context/CanvasStoreContext.tsx
 import { createContext, useContext } from "react";
 var CanvasStoreContext = createContext(null);