labellife-design-tool 1.1.6 → 1.1.8

package/README.md

@@ -174,13 +174,43 @@ store.activePage.addElement({
 // Load templates
 await store.loadJSON(templateData);
 
+// Export to blob
+const pngBlob = await store.toBlob('png');
+const jpgBlob = await store.toBlob('jpg');
+
+// Download the blob
+const downloadBlob = (blob: Blob, filename: string) => {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+};
+
+downloadBlob(pngBlob, 'design.png');
+downloadBlob(jpgBlob, 'design.jpg');
+
 // Use with CanvasEditor (optional)
-<CanvasEditor name="Editor" config={{ panels: ["text", "elements"] }} />
+<CanvasEditor 
+  name="Editor" 
+  store={store}  // Pass the store (optional)
+  config={{ panels: ["text", "elements"] }} 
+/>
 
 // Export store for use across your app
 export const store = createSimpleStore();
 ```
 
+**Backward Compatibility**
+
+If you don't pass a `store` prop, CanvasEditor will create one internally:
+
+```tsx
+// This still works - creates internal store
+<CanvasEditor name="Editor" config={{ panels: ["text", "elements"] }} />
+```
+
 **Option 2: Use the `useCanvasStore` hook (inside CanvasEditor only)**
 
 Any component inside `CanvasEditor` can access the store using the hook:
@@ -316,6 +346,9 @@ interface SimpleStore {
   updateDesign(updates: Partial<CanvasDesign>): void;
   loadJSON(jsonData: any): Promise<void>;
   
+  // Export operations
+  toBlob(type?: 'png' | 'jpg'): Promise<Blob>;
+  
   // Events
   on(event: 'designChanged' | 'activePageChanged' | 'activePanelChanged', callback: Function): void;
   off(event: string): void;

package/dist/lib/lib/index.js

@@ -3108,11 +3108,216 @@ var TemplateInputModal = ({
 };
 var TemplateInputModal_default = TemplateInputModal;
 
+// src/store/simpleStore.ts
+class SimpleCanvasStore {
+  _design;
+  _activePageId;
+  _activePanelId;
+  _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 || [
+        {
+          id: "page-1",
+          name: "Page 1",
+          elements: [],
+          background: "#ffffff"
+        }
+      ],
+      fonts: initialDesign?.fonts || [],
+      colors: initialDesign?.colors || [],
+      templateInputs: initialDesign?.templateInputs
+    };
+    this._activePageId = this._design.pages[0]?.id || "page-1";
+    this._activePanelId = null;
+  }
+  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() {
+    return this._design.pages.find((p) => p.id === this._activePageId) || null;
+  }
+  get activePageId() {
+    return this._activePageId;
+  }
+  get activePanelId() {
+    return this._activePanelId;
+  }
+  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("activePageChanged", this._activePageId);
+  }
+  updateDesign(updates) {
+    this._design = { ...this._design, ...updates };
+    this.emit("designChanged", this._design);
+  }
+  addPage(page) {
+    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);
+    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);
+  }
+  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)
+      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);
+  }
+  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);
+  }
+  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);
+      }
+    });
+  }
+  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
+  config,
+  store: externalStore
 }) => {
+  const store = externalStore || createSimpleStore({
+    name,
+    width: 800,
+    height: 600
+  });
   const [design, setDesign] = useState3({
     id: Date.now().toString(),
     name: "Untitled Design",
@@ -3517,7 +3722,7 @@ var CanvasEditor = ({
       id: "elements",
       title: "Elements",
       component: ElementPanel_default,
-      props: { onAddShape: addShape }
+      props: { onAddShape: addShape, store }
     },
     {
       id: "text",
@@ -3527,7 +3732,8 @@ var CanvasEditor = ({
         selectedElement,
         updateElement,
         setTool,
-        onAddText: addText
+        onAddText: addText,
+        store
       }
     },
     {
@@ -3543,7 +3749,8 @@ var CanvasEditor = ({
           setUnsplashMode("element");
         },
         canvasWidth: design.width,
-        canvasHeight: design.height
+        canvasHeight: design.height,
+        store
       }
     },
     {
@@ -3560,7 +3767,8 @@ var CanvasEditor = ({
           setShowUnsplash(true);
           setUnsplashMode("background");
         },
-        config
+        config,
+        store
       }
     },
     {
@@ -3574,7 +3782,8 @@ var CanvasEditor = ({
         onSetUnsplashBackground: () => {
           setShowUnsplash(true);
           setUnsplashMode("background");
-        }
+        },
+        store
       }
     },
     ...config?.variables ? [
@@ -3585,7 +3794,8 @@ var CanvasEditor = ({
         props: {
           config,
           design,
-          setDesign
+          setDesign,
+          store
         }
       }
     ] : [],
@@ -3604,7 +3814,8 @@ var CanvasEditor = ({
               exportToJPG(stageRef.current, design);
           } : undefined,
           onExportToJSON: config.export?.json ? () => exportToJSON(design) : undefined,
-          onImportJSON: () => jsonInputRef.current?.click()
+          onImportJSON: () => jsonInputRef.current?.click(),
+          store
         }
       }
     ] : []
@@ -3824,175 +4035,6 @@ var CanvasEditor = ({
   }, "Enter a search term to find images")))));
 };
 var CanvasEditor_default = CanvasEditor;
-// src/store/simpleStore.ts
-class SimpleCanvasStore {
-  _design;
-  _activePageId;
-  _activePanelId;
-  _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 || [
-        {
-          id: "page-1",
-          name: "Page 1",
-          elements: [],
-          background: "#ffffff"
-        }
-      ],
-      fonts: initialDesign?.fonts || [],
-      colors: initialDesign?.colors || [],
-      templateInputs: initialDesign?.templateInputs
-    };
-    this._activePageId = this._design.pages[0]?.id || "page-1";
-    this._activePanelId = null;
-  }
-  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() {
-    return this._design.pages.find((p) => p.id === this._activePageId) || null;
-  }
-  get activePageId() {
-    return this._activePageId;
-  }
-  get activePanelId() {
-    return this._activePanelId;
-  }
-  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("activePageChanged", this._activePageId);
-  }
-  updateDesign(updates) {
-    this._design = { ...this._design, ...updates };
-    this.emit("designChanged", this._design);
-  }
-  addPage(page) {
-    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);
-    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);
-  }
-  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)
-      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);
-  }
-  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);
-  }
-  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);

package/dist/lib/wordpress.js

@@ -3108,11 +3108,216 @@ var TemplateInputModal = ({
 };
 var TemplateInputModal_default = TemplateInputModal;
 
+// src/store/simpleStore.ts
+class SimpleCanvasStore {
+  _design;
+  _activePageId;
+  _activePanelId;
+  _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 || [
+        {
+          id: "page-1",
+          name: "Page 1",
+          elements: [],
+          background: "#ffffff"
+        }
+      ],
+      fonts: initialDesign?.fonts || [],
+      colors: initialDesign?.colors || [],
+      templateInputs: initialDesign?.templateInputs
+    };
+    this._activePageId = this._design.pages[0]?.id || "page-1";
+    this._activePanelId = null;
+  }
+  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() {
+    return this._design.pages.find((p) => p.id === this._activePageId) || null;
+  }
+  get activePageId() {
+    return this._activePageId;
+  }
+  get activePanelId() {
+    return this._activePanelId;
+  }
+  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("activePageChanged", this._activePageId);
+  }
+  updateDesign(updates) {
+    this._design = { ...this._design, ...updates };
+    this.emit("designChanged", this._design);
+  }
+  addPage(page) {
+    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);
+    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);
+  }
+  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)
+      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);
+  }
+  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);
+  }
+  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);
+      }
+    });
+  }
+  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
+  config,
+  store: externalStore
 }) => {
+  const store = externalStore || createSimpleStore({
+    name,
+    width: 800,
+    height: 600
+  });
   const [design, setDesign] = useState3({
     id: Date.now().toString(),
     name: "Untitled Design",
@@ -3517,7 +3722,7 @@ var CanvasEditor = ({
       id: "elements",
       title: "Elements",
       component: ElementPanel_default,
-      props: { onAddShape: addShape }
+      props: { onAddShape: addShape, store }
     },
     {
       id: "text",
@@ -3527,7 +3732,8 @@ var CanvasEditor = ({
         selectedElement,
         updateElement,
         setTool,
-        onAddText: addText
+        onAddText: addText,
+        store
       }
     },
     {
@@ -3543,7 +3749,8 @@ var CanvasEditor = ({
           setUnsplashMode("element");
         },
         canvasWidth: design.width,
-        canvasHeight: design.height
+        canvasHeight: design.height,
+        store
       }
     },
     {
@@ -3560,7 +3767,8 @@ var CanvasEditor = ({
           setShowUnsplash(true);
           setUnsplashMode("background");
         },
-        config
+        config,
+        store
       }
     },
     {
@@ -3574,7 +3782,8 @@ var CanvasEditor = ({
         onSetUnsplashBackground: () => {
           setShowUnsplash(true);
           setUnsplashMode("background");
-        }
+        },
+        store
       }
     },
     ...config?.variables ? [
@@ -3585,7 +3794,8 @@ var CanvasEditor = ({
         props: {
           config,
           design,
-          setDesign
+          setDesign,
+          store
         }
       }
     ] : [],
@@ -3604,7 +3814,8 @@ var CanvasEditor = ({
               exportToJPG(stageRef.current, design);
           } : undefined,
           onExportToJSON: config.export?.json ? () => exportToJSON(design) : undefined,
-          onImportJSON: () => jsonInputRef.current?.click()
+          onImportJSON: () => jsonInputRef.current?.click(),
+          store
         }
       }
     ] : []
@@ -3824,175 +4035,6 @@ var CanvasEditor = ({
   }, "Enter a search term to find images")))));
 };
 var CanvasEditor_default = CanvasEditor;
-// src/store/simpleStore.ts
-class SimpleCanvasStore {
-  _design;
-  _activePageId;
-  _activePanelId;
-  _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 || [
-        {
-          id: "page-1",
-          name: "Page 1",
-          elements: [],
-          background: "#ffffff"
-        }
-      ],
-      fonts: initialDesign?.fonts || [],
-      colors: initialDesign?.colors || [],
-      templateInputs: initialDesign?.templateInputs
-    };
-    this._activePageId = this._design.pages[0]?.id || "page-1";
-    this._activePanelId = null;
-  }
-  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() {
-    return this._design.pages.find((p) => p.id === this._activePageId) || null;
-  }
-  get activePageId() {
-    return this._activePageId;
-  }
-  get activePanelId() {
-    return this._activePanelId;
-  }
-  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("activePageChanged", this._activePageId);
-  }
-  updateDesign(updates) {
-    this._design = { ...this._design, ...updates };
-    this.emit("designChanged", this._design);
-  }
-  addPage(page) {
-    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);
-    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);
-  }
-  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)
-      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);
-  }
-  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);
-  }
-  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);

package/dist/types/CanvasEditor.d.ts

@@ -1,8 +1,9 @@
 import React from "react";
-import { Config } from "./types/Config";
+import { Config, CanvasStore } from "./types/Config";
 declare const CanvasEditor: React.FC<{
     name: string;
     config?: Config;
+    store?: CanvasStore;
 }>;
 export default CanvasEditor;
 //# sourceMappingURL=CanvasEditor.d.ts.map

package/dist/types/CanvasEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CanvasEditor.d.ts","sourceRoot":"","sources":["../../src/CanvasEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAkFxE,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAExC,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CA86B7D,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"CanvasEditor.d.ts","sourceRoot":"","sources":["../../src/CanvasEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAkFxE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGrD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,WAAW,CAAA;CAAE,CA27BlF,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/types/store/simpleStore.d.ts

@@ -28,6 +28,7 @@ export declare class SimpleCanvasStore {
     updateElement(elementId: string, updates: Partial<CanvasElement>): void;
     deleteElement(elementId: string): void;
     openSidePanel(panelId: string | null): void;
+    toBlob(type?: 'png' | 'jpg'): Promise<Blob>;
     loadJSON(jsonData: any): Promise<void>;
 }
 export declare const createSimpleStore: (initialDesign?: Partial<CanvasDesign>) => SimpleCanvasStore;

package/dist/types/store/simpleStore.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"simpleStore.d.ts","sourceRoot":"","sources":["../../../src/store/simpleStore.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE7D,MAAM,WAAW,iBAAiB;IAChC,aAAa,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9C,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,kBAAkB,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACtD;AAED,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,OAAO,CAAe;IAC9B,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,cAAc,CAAgB;IACtC,OAAO,CAAC,UAAU,CAAkC;gBAExC,aAAa,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC;IAyBjD,EAAE,CAAC,CAAC,SAAS,MAAM,iBAAiB,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAI9E,GAAG,CAAC,CAAC,SAAS,MAAM,iBAAiB,EAAE,KAAK,EAAE,CAAC;IAI/C,OAAO,CAAC,IAAI;IAQZ,IAAI,MAAM,IAAI,YAAY,CAEzB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED,IAAI,UAAU,IAAI,IAAI,GAAG,IAAI,CAE5B;IAED,IAAI,YAAY,IAAI,MAAM,CAEzB;IAED,IAAI,aAAa,IAAI,MAAM,GAAG,IAAI,CAEjC;IAGD,SAAS,CAAC,MAAM,EAAE,YAAY;IAa9B,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC;IAM3C,OAAO,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,MAAM;IAcrC,WAAW,CAAC,OAAO,EAAE,MAAM,EAAE;IAmB7B,aAAa,CAAC,MAAM,EAAE,MAAM;IAU5B,UAAU,CAAC,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC;IAuB1C,aAAa,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC;IAWhE,aAAa,CAAC,SAAS,EAAE,MAAM;IAY/B,aAAa,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAM9B,QAAQ,CAAC,QAAQ,EAAE,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC;CA0B7C;AAGD,eAAO,MAAM,iBAAiB,GAAI,gBAAgB,OAAO,CAAC,YAAY,CAAC,KAAG,iBAEzE,CAAC;AAGF,MAAM,MAAM,WAAW,GAAG,iBAAiB,CAAC"}
+{"version":3,"file":"simpleStore.d.ts","sourceRoot":"","sources":["../../../src/store/simpleStore.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE7D,MAAM,WAAW,iBAAiB;IAChC,aAAa,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9C,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,kBAAkB,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACtD;AAED,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,OAAO,CAAe;IAC9B,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,cAAc,CAAgB;IACtC,OAAO,CAAC,UAAU,CAAkC;gBAExC,aAAa,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC;IAyBjD,EAAE,CAAC,CAAC,SAAS,MAAM,iBAAiB,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAI9E,GAAG,CAAC,CAAC,SAAS,MAAM,iBAAiB,EAAE,KAAK,EAAE,CAAC;IAI/C,OAAO,CAAC,IAAI;IAQZ,IAAI,MAAM,IAAI,YAAY,CAEzB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED,IAAI,UAAU,IAAI,IAAI,GAAG,IAAI,CAE5B;IAED,IAAI,YAAY,IAAI,MAAM,CAEzB;IAED,IAAI,aAAa,IAAI,MAAM,GAAG,IAAI,CAEjC;IAGD,SAAS,CAAC,MAAM,EAAE,YAAY;IAa9B,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC;IAM3C,OAAO,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,MAAM;IAcrC,WAAW,CAAC,OAAO,EAAE,MAAM,EAAE;IAmB7B,aAAa,CAAC,MAAM,EAAE,MAAM;IAU5B,UAAU,CAAC,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC;IAuB1C,aAAa,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC;IAWhE,aAAa,CAAC,SAAS,EAAE,MAAM;IAY/B,aAAa,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAM9B,MAAM,CAAC,IAAI,GAAE,KAAK,GAAG,KAAa,GAAG,OAAO,CAAC,IAAI,CAAC;IA2ClD,QAAQ,CAAC,QAAQ,EAAE,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC;CA0B7C;AAGD,eAAO,MAAM,iBAAiB,GAAI,gBAAgB,OAAO,CAAC,YAAY,CAAC,KAAG,iBAEzE,CAAC;AAGF,MAAM,MAAM,WAAW,GAAG,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "labellife-design-tool",
-  "version": "1.1.6",
+  "version": "1.1.8",
   "description": "Professional canvas editor built with React, TypeScript, and Konva",
   "main": "./dist/lib/lib/index.js",
   "module": "./dist/lib/lib/index.js",