labellife-design-tool 1.3.3 → 1.3.6

package/dist/lib/lib/index.js

@@ -2721,6 +2721,12 @@ var CanvasEditor = forwardRef(({ name, config, store }, ref) => {
     console.error("CanvasEditor: store prop is required but was not provided");
     return /* @__PURE__ */ React17.createElement("div", null, "Error: Store is required");
   }
+  console.log("CanvasEditor store state:", {
+    activePanelId: store.activePanelId,
+    hasDesign: !!store.design,
+    designPages: store.design?.pages?.length || 0,
+    activePageId: store.activePageId
+  });
   const stageRef = useRef4(null);
   const fileInputRef = useRef4(null);
   const jsonInputRef = useRef4(null);
@@ -2852,14 +2858,31 @@ var CanvasEditor = forwardRef(({ name, config, store }, ref) => {
       variables: { id: "variables", title: "Variables", component: VariablesPanel_default, props: { config: config || {}, design: store.design, setDesign: (design) => store.setDesign(design) } },
       export: { id: "export", title: "Export", component: ExportPanel_default, props: { onExportToPNG: handleExportPNG, onExportToJPG: handleExportJPG, onExportToJSON: handleExportJSON, onImportJSON: handleImportJSON } }
     };
+    console.log("Built-in panels:", Object.entries(builtInConfigs).map(([id, config2]) => ({
+      id,
+      componentType: typeof config2.component,
+      componentName: config2.component.name || "anonymous"
+    })));
     const mergedConfigs = { ...builtInConfigs };
     if (config?.panels) {
       config.panels.forEach((panelConfig) => {
         if (typeof panelConfig === "string") {} else {
+          console.log("Processing custom panel:", panelConfig.id, panelConfig);
+          let component = panelConfig.component;
+          if (component && typeof component === "object" && component !== null) {
+            const reactMemoSymbol = Symbol.for("react.memo");
+            if (component.$$typeof === reactMemoSymbol) {
+              component = component.type;
+            }
+          }
+          if (!component || typeof component !== "function") {
+            console.error("Invalid panel component for", panelConfig.id, panelConfig.component);
+            return;
+          }
           const customPanelConfig = {
             id: panelConfig.id,
             title: panelConfig.title,
-            component: panelConfig.component,
+            component,
             props: panelConfig.props || {},
             ...panelConfig.icon && typeof panelConfig.icon.type === "string" ? {
               icon: panelConfig.icon.type
@@ -2877,23 +2900,41 @@ var CanvasEditor = forwardRef(({ name, config, store }, ref) => {
             orderedConfigs.push(mergedConfigs[panelConfig]);
           }
         } else {
-          orderedConfigs.push(mergedConfigs[panelConfig.id]);
+          const config2 = mergedConfigs[panelConfig.id];
+          if (config2) {
+            orderedConfigs.push(config2);
+          }
         }
       });
     }
-    return orderedConfigs.length > 0 ? orderedConfigs : Object.values(builtInConfigs);
+    return orderedConfigs.length > 0 ? orderedConfigs : Object.values(builtInConfigs).filter(Boolean);
   }, [addShape, addText, config, selectedElement, updateElement, store, currentPage, handleExportPNG, handleExportJPG, handleExportJSON, handleImportJSON]);
   const DynamicPanelRenderer = useMemo(() => {
-    const activePanel = panelConfigs.find((panel) => panel.id === store.activePanelId);
-    if (!activePanel)
+    const activePanelId = store.activePanelId || "elements";
+    console.log("DynamicPanelRenderer: activePanelId =", activePanelId);
+    console.log("DynamicPanelRenderer: available panels =", panelConfigs.map((p) => ({ id: p.id, component: typeof p.component })));
+    const activePanel = panelConfigs.find((panel) => panel.id === activePanelId);
+    if (!activePanel) {
+      console.log("DynamicPanelRenderer: No active panel found, returning fallback");
       return /* @__PURE__ */ React17.createElement("div", {
         className: "text-gray-400 text-center p-4"
       }, "No panel selected");
+    }
+    console.log("DynamicPanelRenderer: Found active panel:", activePanel.id, typeof activePanel.component);
     const PanelComponent = activePanel.component;
-    if (!PanelComponent)
+    if (!PanelComponent) {
+      console.log("DynamicPanelRenderer: PanelComponent is null/undefined");
       return /* @__PURE__ */ React17.createElement("div", {
         className: "text-red-400 text-center p-4"
       }, "Panel component not found");
+    }
+    if (typeof PanelComponent !== "function") {
+      console.error("DynamicPanelRenderer: PanelComponent is not a function:", PanelComponent);
+      return /* @__PURE__ */ React17.createElement("div", {
+        className: "text-red-400 text-center p-4"
+      }, "Invalid panel component");
+    }
+    console.log("DynamicPanelRenderer: Rendering panel:", activePanel.id);
     return /* @__PURE__ */ React17.createElement(PanelComponent, {
       key: activePanel.id,
       ...activePanel.props

package/dist/lib/wordpress.js

@@ -2721,6 +2721,12 @@ var CanvasEditor = forwardRef(({ name, config, store }, ref) => {
     console.error("CanvasEditor: store prop is required but was not provided");
     return /* @__PURE__ */ React17.createElement("div", null, "Error: Store is required");
   }
+  console.log("CanvasEditor store state:", {
+    activePanelId: store.activePanelId,
+    hasDesign: !!store.design,
+    designPages: store.design?.pages?.length || 0,
+    activePageId: store.activePageId
+  });
   const stageRef = useRef4(null);
   const fileInputRef = useRef4(null);
   const jsonInputRef = useRef4(null);
@@ -2852,14 +2858,31 @@ var CanvasEditor = forwardRef(({ name, config, store }, ref) => {
       variables: { id: "variables", title: "Variables", component: VariablesPanel_default, props: { config: config || {}, design: store.design, setDesign: (design) => store.setDesign(design) } },
       export: { id: "export", title: "Export", component: ExportPanel_default, props: { onExportToPNG: handleExportPNG, onExportToJPG: handleExportJPG, onExportToJSON: handleExportJSON, onImportJSON: handleImportJSON } }
     };
+    console.log("Built-in panels:", Object.entries(builtInConfigs).map(([id, config2]) => ({
+      id,
+      componentType: typeof config2.component,
+      componentName: config2.component.name || "anonymous"
+    })));
     const mergedConfigs = { ...builtInConfigs };
     if (config?.panels) {
       config.panels.forEach((panelConfig) => {
         if (typeof panelConfig === "string") {} else {
+          console.log("Processing custom panel:", panelConfig.id, panelConfig);
+          let component = panelConfig.component;
+          if (component && typeof component === "object" && component !== null) {
+            const reactMemoSymbol = Symbol.for("react.memo");
+            if (component.$$typeof === reactMemoSymbol) {
+              component = component.type;
+            }
+          }
+          if (!component || typeof component !== "function") {
+            console.error("Invalid panel component for", panelConfig.id, panelConfig.component);
+            return;
+          }
           const customPanelConfig = {
             id: panelConfig.id,
             title: panelConfig.title,
-            component: panelConfig.component,
+            component,
             props: panelConfig.props || {},
             ...panelConfig.icon && typeof panelConfig.icon.type === "string" ? {
               icon: panelConfig.icon.type
@@ -2877,23 +2900,41 @@ var CanvasEditor = forwardRef(({ name, config, store }, ref) => {
             orderedConfigs.push(mergedConfigs[panelConfig]);
           }
         } else {
-          orderedConfigs.push(mergedConfigs[panelConfig.id]);
+          const config2 = mergedConfigs[panelConfig.id];
+          if (config2) {
+            orderedConfigs.push(config2);
+          }
         }
       });
     }
-    return orderedConfigs.length > 0 ? orderedConfigs : Object.values(builtInConfigs);
+    return orderedConfigs.length > 0 ? orderedConfigs : Object.values(builtInConfigs).filter(Boolean);
   }, [addShape, addText, config, selectedElement, updateElement, store, currentPage, handleExportPNG, handleExportJPG, handleExportJSON, handleImportJSON]);
   const DynamicPanelRenderer = useMemo(() => {
-    const activePanel = panelConfigs.find((panel) => panel.id === store.activePanelId);
-    if (!activePanel)
+    const activePanelId = store.activePanelId || "elements";
+    console.log("DynamicPanelRenderer: activePanelId =", activePanelId);
+    console.log("DynamicPanelRenderer: available panels =", panelConfigs.map((p) => ({ id: p.id, component: typeof p.component })));
+    const activePanel = panelConfigs.find((panel) => panel.id === activePanelId);
+    if (!activePanel) {
+      console.log("DynamicPanelRenderer: No active panel found, returning fallback");
       return /* @__PURE__ */ React17.createElement("div", {
         className: "text-gray-400 text-center p-4"
       }, "No panel selected");
+    }
+    console.log("DynamicPanelRenderer: Found active panel:", activePanel.id, typeof activePanel.component);
     const PanelComponent = activePanel.component;
-    if (!PanelComponent)
+    if (!PanelComponent) {
+      console.log("DynamicPanelRenderer: PanelComponent is null/undefined");
       return /* @__PURE__ */ React17.createElement("div", {
         className: "text-red-400 text-center p-4"
       }, "Panel component not found");
+    }
+    if (typeof PanelComponent !== "function") {
+      console.error("DynamicPanelRenderer: PanelComponent is not a function:", PanelComponent);
+      return /* @__PURE__ */ React17.createElement("div", {
+        className: "text-red-400 text-center p-4"
+      }, "Invalid panel component");
+    }
+    console.log("DynamicPanelRenderer: Rendering panel:", activePanel.id);
     return /* @__PURE__ */ React17.createElement(PanelComponent, {
       key: activePanel.id,
       ...activePanel.props

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

@@ -1 +1 @@
-{"version":3,"file":"CanvasEditor.d.ts","sourceRoot":"","sources":["../../src/CanvasEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmF,MAAM,OAAO,CAAC;AA4ExG,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAqB,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC3E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD,QAAA,MAAM,YAAY;UAAuC,MAAM;aAAW,MAAM;WAAS,iBAAiB;yCA+exG,CAAC;AAIH,eAAe,YAAY,CAAC"}
+{"version":3,"file":"CanvasEditor.d.ts","sourceRoot":"","sources":["../../src/CanvasEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmF,MAAM,OAAO,CAAC;AA4ExG,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAqB,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC3E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD,QAAA,MAAM,YAAY;UAAuC,MAAM;aAAW,MAAM;WAAS,iBAAiB;yCAoiBxG,CAAC;AAIH,eAAe,YAAY,CAAC"}

package/package.json

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