labellife-design-tool 1.2.1 → 1.2.3

package/dist/lib/lib/index.js

@@ -3120,19 +3120,12 @@ class SimpleCanvasStore {
       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"
-        }
-      ],
+      pages: initialDesign?.pages || [],
       fonts: initialDesign?.fonts || [],
       colors: initialDesign?.colors || [],
       templateInputs: initialDesign?.templateInputs
     };
-    this._activePageId = this._design.pages[0]?.id || "page-1";
+    this._activePageId = initialDesign?.pages?.[0]?.id || null;
     this._activePanelId = null;
   }
   on(event, callback) {
@@ -3331,27 +3324,53 @@ var CanvasEditor = ({
     width: 800,
     height: 600
   });
-  const [design, setDesign] = useState3({
-    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 [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("1");
+  const [currentPageId, setCurrentPageId] = useState3(() => externalStore?.activePageId || null);
   const [selectedId, setSelectedId] = useState3(null);
   const [selectedIds, setSelectedIds] = useState3([]);
   const [tool, setTool] = useState3("select");
   const [activePanelId, setActivePanelId] = useState3("elements");
+  useEffect4(() => {
+    if (externalStore) {
+      const handleDesignChange = (newDesign) => {
+        setDesign(newDesign);
+      };
+      const handleActivePageChange = (pageId) => {
+        setCurrentPageId(pageId);
+      };
+      const handleActivePanelChange = (panelId) => {
+        setActivePanelId(panelId || "elements");
+      };
+      externalStore.on("designChanged", handleDesignChange);
+      externalStore.on("activePageChanged", handleActivePageChange);
+      externalStore.on("activePanelChanged", handleActivePanelChange);
+      return () => {
+        externalStore.off("designChanged");
+        externalStore.off("activePageChanged");
+        externalStore.off("activePanelChanged");
+      };
+    }
+  }, [externalStore]);
   const [showUnsplash, setShowUnsplash] = useState3(false);
   const [unsplashQuery, setUnsplashQuery] = useState3("");
   const [unsplashResults, setUnsplashResults] = useState3([]);
@@ -3366,8 +3385,8 @@ var CanvasEditor = ({
   const fileInputRef = useRef5(null);
   const jsonInputRef = useRef5(null);
   const containerRef = useRef5(null);
-  const currentPage = design.pages.find((p) => p.id === currentPageId) || design.pages[0];
-  const selectedElement = currentPage.elements.find((el) => el.id === selectedId);
+  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)));
@@ -3407,17 +3426,18 @@ var CanvasEditor = ({
       textCase: "none",
       strikethrough: false
     };
-    setDesign((prev) => {
-      const newDesign = {
-        ...prev,
-        pages: prev.pages.map((page) => page.id === currentPageId ? { ...page, elements: [...page.elements, newElement] } : page)
-      };
-      saveToHistory(newDesign);
-      return newDesign;
-    });
+    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]);
+  }, [currentPageId, saveToHistory, design.width, design.height, externalStore]);
   const addShape = useCallback4((shapeType) => {
     const newElement = {
       id: Date.now().toString(),
@@ -3976,7 +3996,7 @@ var CanvasEditor = ({
     height: design.height,
     onClick: handleStageClick,
     onTap: handleStageClick
-  }, /* @__PURE__ */ React18.createElement(Layer, null, /* @__PURE__ */ React18.createElement(Rect2, {
+  }, /* @__PURE__ */ React18.createElement(Layer, null, currentPage && /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(Rect2, {
     x: 0,
     y: 0,
     width: design.width,
@@ -4000,7 +4020,7 @@ var CanvasEditor = ({
       default:
         return null;
     }
-  }))))), config?.multiPage && /* @__PURE__ */ React18.createElement("div", {
+  })))))), config?.multiPage && /* @__PURE__ */ React18.createElement("div", {
     className: "absolute bottom-4 left-4 flex items-center space-x-2"
   }, design.pages.map((page, index) => /* @__PURE__ */ React18.createElement("button", {
     key: page.id,

package/dist/lib/wordpress.js

@@ -3120,19 +3120,12 @@ class SimpleCanvasStore {
       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"
-        }
-      ],
+      pages: initialDesign?.pages || [],
       fonts: initialDesign?.fonts || [],
       colors: initialDesign?.colors || [],
       templateInputs: initialDesign?.templateInputs
     };
-    this._activePageId = this._design.pages[0]?.id || "page-1";
+    this._activePageId = initialDesign?.pages?.[0]?.id || null;
     this._activePanelId = null;
   }
   on(event, callback) {
@@ -3331,27 +3324,53 @@ var CanvasEditor = ({
     width: 800,
     height: 600
   });
-  const [design, setDesign] = useState3({
-    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 [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("1");
+  const [currentPageId, setCurrentPageId] = useState3(() => externalStore?.activePageId || null);
   const [selectedId, setSelectedId] = useState3(null);
   const [selectedIds, setSelectedIds] = useState3([]);
   const [tool, setTool] = useState3("select");
   const [activePanelId, setActivePanelId] = useState3("elements");
+  useEffect4(() => {
+    if (externalStore) {
+      const handleDesignChange = (newDesign) => {
+        setDesign(newDesign);
+      };
+      const handleActivePageChange = (pageId) => {
+        setCurrentPageId(pageId);
+      };
+      const handleActivePanelChange = (panelId) => {
+        setActivePanelId(panelId || "elements");
+      };
+      externalStore.on("designChanged", handleDesignChange);
+      externalStore.on("activePageChanged", handleActivePageChange);
+      externalStore.on("activePanelChanged", handleActivePanelChange);
+      return () => {
+        externalStore.off("designChanged");
+        externalStore.off("activePageChanged");
+        externalStore.off("activePanelChanged");
+      };
+    }
+  }, [externalStore]);
   const [showUnsplash, setShowUnsplash] = useState3(false);
   const [unsplashQuery, setUnsplashQuery] = useState3("");
   const [unsplashResults, setUnsplashResults] = useState3([]);
@@ -3366,8 +3385,8 @@ var CanvasEditor = ({
   const fileInputRef = useRef5(null);
   const jsonInputRef = useRef5(null);
   const containerRef = useRef5(null);
-  const currentPage = design.pages.find((p) => p.id === currentPageId) || design.pages[0];
-  const selectedElement = currentPage.elements.find((el) => el.id === selectedId);
+  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)));
@@ -3407,17 +3426,18 @@ var CanvasEditor = ({
       textCase: "none",
       strikethrough: false
     };
-    setDesign((prev) => {
-      const newDesign = {
-        ...prev,
-        pages: prev.pages.map((page) => page.id === currentPageId ? { ...page, elements: [...page.elements, newElement] } : page)
-      };
-      saveToHistory(newDesign);
-      return newDesign;
-    });
+    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]);
+  }, [currentPageId, saveToHistory, design.width, design.height, externalStore]);
   const addShape = useCallback4((shapeType) => {
     const newElement = {
       id: Date.now().toString(),
@@ -3976,7 +3996,7 @@ var CanvasEditor = ({
     height: design.height,
     onClick: handleStageClick,
     onTap: handleStageClick
-  }, /* @__PURE__ */ React18.createElement(Layer, null, /* @__PURE__ */ React18.createElement(Rect2, {
+  }, /* @__PURE__ */ React18.createElement(Layer, null, currentPage && /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(Rect2, {
     x: 0,
     y: 0,
     width: design.width,
@@ -4000,7 +4020,7 @@ var CanvasEditor = ({
       default:
         return null;
     }
-  }))))), config?.multiPage && /* @__PURE__ */ React18.createElement("div", {
+  })))))), config?.multiPage && /* @__PURE__ */ React18.createElement("div", {
     className: "absolute bottom-4 left-4 flex items-center space-x-2"
   }, design.pages.map((page, index) => /* @__PURE__ */ React18.createElement("button", {
     key: page.id,

package/dist/types/CanvasEditor.d.ts

@@ -1,9 +1,10 @@
 import React from "react";
-import { Config, CanvasStore } from "./types/Config";
+import { Config } from "./types/Config";
+import { SimpleCanvasStore } from "./store/simpleStore";
 declare const CanvasEditor: React.FC<{
     name: string;
     config?: Config;
-    store?: CanvasStore;
+    store?: SimpleCanvasStore;
 }>;
 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,KAA6F,MAAM,OAAO,CAAC;AAkFlH,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,CA6+BlF,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"CanvasEditor.d.ts","sourceRoot":"","sources":["../../src/CanvasEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6F,MAAM,OAAO,CAAC;AAkFlH,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAqB,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE3E,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,iBAAiB,CAAA;CAAE,CA2hCxF,CAAC;AAEF,eAAe,YAAY,CAAC"}

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,CAAC,IAAI,GAAG;QAAE,UAAU,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC,KAAK,IAAI,CAAA;KAAE,CAAC,GAAG,IAAI,CAU1F;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;IAK3C,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;IAOrC,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"}
+{"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;IAkBjD,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,CAAC,IAAI,GAAG;QAAE,UAAU,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC,KAAK,IAAI,CAAA;KAAE,CAAC,GAAG,IAAI,CAU1F;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;IAK3C,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;IAOrC,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.2.1",
+  "version": "1.2.3",
   "description": "Professional canvas editor built with React, TypeScript, and Konva",
   "main": "./dist/lib/lib/index.js",
   "module": "./dist/lib/lib/index.js",