labellife-design-tool 1.1.0 → 1.1.1

package/README.md

@@ -54,6 +54,103 @@ function App() {
 
 **Note on CSS**: The CSS is pre-processed and ready to use. Simply import it - no Tailwind configuration needed!
 
+### Panel Configuration (Built-in + Custom)
+
+Control which panels appear in the left sidebar and their order using a **single list** via `config.panels`. You can mix built-in panel ids and custom panel objects in one array.
+
+#### Available Built-in Panels
+
+| Panel ID | Description |
+|---|---|
+| `"text"` | Add and edit text elements |
+| `"elements"` | Add shapes (rect, circle, star, polygon, etc.) |
+| `"image"` | Upload images, use Unsplash, crop/mask/filter |
+| `"design"` | Canvas size, presets, design settings |
+| `"background"` | Page background color/image |
+| `"export"` | Export to PNG/JPG/JSON (requires `config.export`) |
+| `"variables"` | Template variables (requires `config.variables`) |
+
+#### Show Only Selected Built-in Panels
+
+Omit any panel id to hide it. The order you list them is the order they appear:
+
+```tsx
+<CanvasEditor
+  name="Limited Editor"
+  config={{
+    panels: ["text", "elements", "image", "background"],
+  }}
+/>
+```
+
+This hides Design, Export, and Variables — only Text, Elements, Images, and Background are shown.
+
+#### Add a Custom Panel
+
+Create your own panel component and include it in the same list:
+
+```tsx
+import { Sparkles } from "lucide-react";
+
+// Your custom panel component — receives whatever props you pass
+const MyAssetsPanel = ({ category }: { category: string }) => {
+  return (
+    <div style={{ padding: 16, color: "white" }}>
+      <h3>My Assets</h3>
+      <p>Showing assets for: {category}</p>
+    </div>
+  );
+};
+
+function App() {
+  return (
+    <CanvasEditor
+      name="Custom Panel Editor"
+      config={{
+        export: { png: true, jpg: true, json: true },
+        panels: [
+          "text",
+          "elements",
+          {
+            id: "my-assets",
+            title: "My Assets",
+            tooltip: "Browse my assets",
+            icon: <Sparkles className="w-5 h-5" />,
+            component: MyAssetsPanel,
+            props: { category: "stickers" },
+          },
+          "image",
+          "background",
+          "export",
+        ],
+      }}
+    />
+  );
+}
+```
+
+#### Custom Panel Definition
+
+```typescript
+interface CustomPanelDefinition {
+  id: string;                              // Unique panel id
+  title: string;                           // Panel title
+  tooltip?: string;                        // Tooltip on hover (defaults to title)
+  icon: React.ReactElement;                // Icon shown in the left sidebar
+  component: React.ComponentType<any>;     // Your panel React component
+  props?: Record<string, any>;             // Props passed to your component
+  actionType?: "setPanel" | "setToolAndPanel"; // Click behavior (default: "setPanel")
+  toolValue?: ToolType;                    // Tool to activate (if actionType is "setToolAndPanel")
+}
+```
+
+#### Default Behavior
+
+If `config.panels` is **not provided**, the editor shows the default set:
+- `text`, `elements`, `image`, `design`, `background`
+- Plus `variables` if `config.variables` is set
+- Plus `export` if `config.export` is set
+
 ### Configure Unsplash API Key
 
 ```tsx

package/dist/lib/lib/index.js

@@ -23,7 +23,7 @@ function initJsxCompat() {
 }
 
 // src/CanvasEditor.tsx
-import React18, { useState as useState3, useRef as useRef5, useEffect as useEffect4, useCallback as useCallback4, forwardRef, useImperativeHandle } from "react";
+import React18, { useState as useState3, useRef as useRef5, useEffect as useEffect4, useMemo, useCallback as useCallback4, forwardRef, useImperativeHandle } from "react";
 import { Stage, Layer, Rect as Rect2 } from "react-konva";
 import {
   PlusCircle,
@@ -1092,7 +1092,97 @@ var Header_default = Header;
 
 // src/components/LeftMenu.tsx
 import React8 from "react";
-import { Type, Square, Image as ImageIcon, Palette, Download, Layers, Variable } from "lucide-react";
+import {
+  Type,
+  Square,
+  Image as ImageIcon,
+  Palette,
+  Download,
+  Layers,
+  Variable
+} from "lucide-react";
+var BUILT_IN_MENU_ITEMS = {
+  text: {
+    id: "text",
+    tooltip: "Text",
+    icon: /* @__PURE__ */ React8.createElement(Type, {
+      className: "w-5 h-5"
+    }),
+    actionType: "setToolAndPanel",
+    toolValue: "text",
+    panelValue: "text"
+  },
+  elements: {
+    id: "elements",
+    tooltip: "Elements",
+    icon: /* @__PURE__ */ React8.createElement(Square, {
+      className: "w-5 h-5"
+    }),
+    actionType: "setToolAndPanel",
+    panelValue: "elements",
+    toolValue: "shape"
+  },
+  image: {
+    id: "image",
+    tooltip: "Images",
+    icon: /* @__PURE__ */ React8.createElement(ImageIcon, {
+      className: "w-5 h-5"
+    }),
+    actionType: "setPanel",
+    panelValue: "image"
+  },
+  design: {
+    id: "design",
+    tooltip: "Design",
+    icon: /* @__PURE__ */ React8.createElement(Palette, {
+      className: "w-5 h-5"
+    }),
+    actionType: "setPanel",
+    panelValue: "design"
+  },
+  background: {
+    id: "background",
+    tooltip: "Background",
+    icon: /* @__PURE__ */ React8.createElement(Layers, {
+      className: "w-5 h-5"
+    }),
+    actionType: "setPanel",
+    panelValue: "background"
+  },
+  export: {
+    id: "export",
+    tooltip: "Export",
+    icon: /* @__PURE__ */ React8.createElement(Download, {
+      className: "w-5 h-5"
+    }),
+    actionType: "setPanel",
+    panelValue: "export"
+  },
+  variables: {
+    id: "variables",
+    tooltip: "Variables",
+    icon: /* @__PURE__ */ React8.createElement(Variable, {
+      className: "w-5 h-5"
+    }),
+    actionType: "setPanel",
+    panelValue: "variables"
+  }
+};
+var isCustomPanel = (panel) => typeof panel === "object" && panel !== null;
+var getDefaultPanelOrder = (config) => {
+  const defaults = [
+    "text",
+    "elements",
+    "image",
+    "design",
+    "background"
+  ];
+  if (config?.variables)
+    defaults.push("variables");
+  if (config?.export)
+    defaults.push("export");
+  return defaults;
+};
 var LeftMenu = ({
   tool,
   activePanel,
@@ -1100,77 +1190,32 @@ var LeftMenu = ({
   onSetActivePanel,
   config
 }) => {
-  const menuItems = [
-    {
-      id: "text",
-      tooltip: "Text",
-      icon: /* @__PURE__ */ React8.createElement(Type, {
-        className: "w-5 h-5"
-      }),
-      actionType: "setToolAndPanel",
-      toolValue: "text",
-      panelValue: "text"
-    },
-    {
-      id: "elements",
-      tooltip: "Elements",
-      icon: /* @__PURE__ */ React8.createElement(Square, {
-        className: "w-5 h-5"
-      }),
-      actionType: "setToolAndPanel",
-      panelValue: "elements",
-      toolValue: "shape"
-    },
-    {
-      id: "image",
-      tooltip: "Images",
-      icon: /* @__PURE__ */ React8.createElement(ImageIcon, {
-        className: "w-5 h-5"
-      }),
-      actionType: "setPanel",
-      panelValue: "image"
-    },
-    {
-      id: "design",
-      tooltip: "Design",
-      icon: /* @__PURE__ */ React8.createElement(Palette, {
-        className: "w-5 h-5"
-      }),
-      actionType: "setPanel",
-      panelValue: "design"
+  const requestedPanels = config?.panels && config.panels.length > 0 ? config.panels : getDefaultPanelOrder(config);
+  const seenIds = new Set;
+  const menuItems = requestedPanels.map((panel) => {
+    if (typeof panel === "string") {
+      if (panel === "variables" && !config?.variables)
+        return null;
+      const builtIn = BUILT_IN_MENU_ITEMS[panel];
+      return builtIn || null;
     }
-  ];
-  if (config?.export) {
-    menuItems.push({
-      id: "export",
-      tooltip: "Export",
-      icon: /* @__PURE__ */ React8.createElement(Download, {
-        className: "w-5 h-5"
-      }),
-      actionType: "setPanel",
-      panelValue: "export"
-    });
-  }
-  menuItems.push({
-    id: "background",
-    tooltip: "Background",
-    icon: /* @__PURE__ */ React8.createElement(Layers, {
-      className: "w-5 h-5"
-    }),
-    actionType: "setPanel",
-    panelValue: "background"
+    if (isCustomPanel(panel)) {
+      return {
+        id: panel.id,
+        tooltip: panel.tooltip || panel.title,
+        icon: panel.icon,
+        actionType: panel.actionType || "setPanel",
+        toolValue: panel.toolValue,
+        panelValue: panel.id
+      };
+    }
+    return null;
+  }).filter((item) => !!item).filter((item) => {
+    if (seenIds.has(item.id))
+      return false;
+    seenIds.add(item.id);
+    return true;
   });
-  if (config?.variables) {
-    menuItems.push({
-      id: "variables",
-      tooltip: "Variables",
-      icon: /* @__PURE__ */ React8.createElement(Variable, {
-        className: "w-5 h-5"
-      }),
-      actionType: "setPanel",
-      panelValue: "variables"
-    });
-  }
   const handleItemClick = (item) => {
     if (item.actionType === "setTool" && item.toolValue) {
       onSetTool(item.toolValue);
@@ -3566,73 +3611,73 @@ var CanvasEditor = forwardRef(({
       delete window.__pendingImportReject;
     }
   };
-  const panelConfigs = [
-    {
-      id: "elements",
-      title: "Elements",
-      component: ElementPanel_default,
-      props: { onAddShape: addShape }
-    },
-    {
-      id: "text",
-      title: "Text",
-      component: TextPanel_default,
-      props: {
-        selectedElement,
-        updateElement,
-        setTool,
-        onAddText: addText
-      }
-    },
-    {
-      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
-      }
-    },
-    {
-      id: "design",
-      title: "Design",
-      component: DesignPanel_default,
-      props: {
-        design,
-        currentPage,
-        selectedElement,
-        setDesign,
-        updateElement,
-        onSetUnsplashBackground: () => {
-          setShowUnsplash(true);
-          setUnsplashMode("background");
-        },
-        config
-      }
-    },
-    {
-      id: "background",
-      title: "Background",
-      component: BackgroundPanel_default,
-      props: {
-        design,
-        currentPage,
-        setDesign,
-        onSetUnsplashBackground: () => {
-          setShowUnsplash(true);
-          setUnsplashMode("background");
+  const panelConfigs = useMemo(() => {
+    const builtInConfigs = {
+      elements: {
+        id: "elements",
+        title: "Elements",
+        component: ElementPanel_default,
+        props: { onAddShape: addShape }
+      },
+      text: {
+        id: "text",
+        title: "Text",
+        component: TextPanel_default,
+        props: {
+          selectedElement,
+          updateElement,
+          setTool,
+          onAddText: addText
         }
-      }
-    },
-    ...config?.variables ? [
-      {
+      },
+      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
+        }
+      },
+      design: {
+        id: "design",
+        title: "Design",
+        component: DesignPanel_default,
+        props: {
+          design,
+          currentPage,
+          selectedElement,
+          setDesign,
+          updateElement,
+          onSetUnsplashBackground: () => {
+            setShowUnsplash(true);
+            setUnsplashMode("background");
+          },
+          config
+        }
+      },
+      background: {
+        id: "background",
+        title: "Background",
+        component: BackgroundPanel_default,
+        props: {
+          design,
+          currentPage,
+          setDesign,
+          onSetUnsplashBackground: () => {
+            setShowUnsplash(true);
+            setUnsplashMode("background");
+          }
+        }
+      },
+      variables: config?.variables ? {
         id: "variables",
         title: "Variables",
         component: VariablesPanel_default,
@@ -3641,29 +3686,81 @@ var CanvasEditor = forwardRef(({
           design,
           setDesign
         }
-      }
-    ] : [],
-    ...config?.export ? [
-      {
+      } : null,
+      export: {
         id: "export",
         title: "Export",
         component: ExportPanel_default,
         props: {
-          onExportToPNG: config.export?.png ? () => {
+          onExportToPNG: config?.export?.png ? () => {
             if (stageRef.current)
               exportToPNG(stageRef.current, design);
           } : undefined,
-          onExportToJPG: config.export?.jpg ? () => {
+          onExportToJPG: config?.export?.jpg ? () => {
             if (stageRef.current)
               exportToJPG(stageRef.current, design);
           } : undefined,
-          onExportToJSON: config.export?.json ? () => exportToJSON(design) : undefined,
+          onExportToJSON: config?.export?.json ? () => exportToJSON(design) : undefined,
           onImportJSON: () => jsonInputRef.current?.click(),
           onLoadJSON: () => setShowJsonModal(true)
         }
       }
-    ] : []
-  ];
+    };
+    const defaultPanels = [
+      "text",
+      "elements",
+      "image",
+      "design",
+      "background",
+      ...config?.variables ? ["variables"] : [],
+      ...config?.export ? ["export"] : []
+    ];
+    const requestedPanels = config?.panels && config.panels.length > 0 ? config.panels : defaultPanels;
+    const seen = new Set;
+    const ordered = [];
+    requestedPanels.forEach((panel) => {
+      if (typeof panel === "string") {
+        const builtIn = builtInConfigs[panel];
+        if (!builtIn)
+          return;
+        if (seen.has(builtIn.id))
+          return;
+        seen.add(builtIn.id);
+        ordered.push(builtIn);
+        return;
+      }
+      const custom = panel;
+      if (!custom?.id || !custom?.component)
+        return;
+      if (seen.has(custom.id))
+        return;
+      seen.add(custom.id);
+      ordered.push({
+        id: custom.id,
+        title: custom.title,
+        component: custom.component,
+        props: custom.props || {}
+      });
+    });
+    return ordered;
+  }, [
+    addShape,
+    addText,
+    config,
+    currentPage,
+    design,
+    selectedElement,
+    setTool,
+    updateElement
+  ]);
+  useEffect4(() => {
+    if (!panelConfigs.length)
+      return;
+    const exists = panelConfigs.some((panel) => panel.id === activePanelId);
+    if (!exists) {
+      setActivePanelId(panelConfigs[0].id);
+    }
+  }, [panelConfigs, activePanelId]);
   const DynamicPanelRenderer = () => {
     const activePanelConfig = panelConfigs.find((p) => p.id === activePanelId);
     if (!activePanelConfig) {

package/dist/lib/wordpress.js

@@ -23,7 +23,7 @@ function initJsxCompat() {
 }
 
 // src/CanvasEditor.tsx
-import React18, { useState as useState3, useRef as useRef5, useEffect as useEffect4, useCallback as useCallback4, forwardRef, useImperativeHandle } from "react";
+import React18, { useState as useState3, useRef as useRef5, useEffect as useEffect4, useMemo, useCallback as useCallback4, forwardRef, useImperativeHandle } from "react";
 import { Stage, Layer, Rect as Rect2 } from "react-konva";
 import {
   PlusCircle,
@@ -1092,7 +1092,97 @@ var Header_default = Header;
 
 // src/components/LeftMenu.tsx
 import React8 from "react";
-import { Type, Square, Image as ImageIcon, Palette, Download, Layers, Variable } from "lucide-react";
+import {
+  Type,
+  Square,
+  Image as ImageIcon,
+  Palette,
+  Download,
+  Layers,
+  Variable
+} from "lucide-react";
+var BUILT_IN_MENU_ITEMS = {
+  text: {
+    id: "text",
+    tooltip: "Text",
+    icon: /* @__PURE__ */ React8.createElement(Type, {
+      className: "w-5 h-5"
+    }),
+    actionType: "setToolAndPanel",
+    toolValue: "text",
+    panelValue: "text"
+  },
+  elements: {
+    id: "elements",
+    tooltip: "Elements",
+    icon: /* @__PURE__ */ React8.createElement(Square, {
+      className: "w-5 h-5"
+    }),
+    actionType: "setToolAndPanel",
+    panelValue: "elements",
+    toolValue: "shape"
+  },
+  image: {
+    id: "image",
+    tooltip: "Images",
+    icon: /* @__PURE__ */ React8.createElement(ImageIcon, {
+      className: "w-5 h-5"
+    }),
+    actionType: "setPanel",
+    panelValue: "image"
+  },
+  design: {
+    id: "design",
+    tooltip: "Design",
+    icon: /* @__PURE__ */ React8.createElement(Palette, {
+      className: "w-5 h-5"
+    }),
+    actionType: "setPanel",
+    panelValue: "design"
+  },
+  background: {
+    id: "background",
+    tooltip: "Background",
+    icon: /* @__PURE__ */ React8.createElement(Layers, {
+      className: "w-5 h-5"
+    }),
+    actionType: "setPanel",
+    panelValue: "background"
+  },
+  export: {
+    id: "export",
+    tooltip: "Export",
+    icon: /* @__PURE__ */ React8.createElement(Download, {
+      className: "w-5 h-5"
+    }),
+    actionType: "setPanel",
+    panelValue: "export"
+  },
+  variables: {
+    id: "variables",
+    tooltip: "Variables",
+    icon: /* @__PURE__ */ React8.createElement(Variable, {
+      className: "w-5 h-5"
+    }),
+    actionType: "setPanel",
+    panelValue: "variables"
+  }
+};
+var isCustomPanel = (panel) => typeof panel === "object" && panel !== null;
+var getDefaultPanelOrder = (config) => {
+  const defaults = [
+    "text",
+    "elements",
+    "image",
+    "design",
+    "background"
+  ];
+  if (config?.variables)
+    defaults.push("variables");
+  if (config?.export)
+    defaults.push("export");
+  return defaults;
+};
 var LeftMenu = ({
   tool,
   activePanel,
@@ -1100,77 +1190,32 @@ var LeftMenu = ({
   onSetActivePanel,
   config
 }) => {
-  const menuItems = [
-    {
-      id: "text",
-      tooltip: "Text",
-      icon: /* @__PURE__ */ React8.createElement(Type, {
-        className: "w-5 h-5"
-      }),
-      actionType: "setToolAndPanel",
-      toolValue: "text",
-      panelValue: "text"
-    },
-    {
-      id: "elements",
-      tooltip: "Elements",
-      icon: /* @__PURE__ */ React8.createElement(Square, {
-        className: "w-5 h-5"
-      }),
-      actionType: "setToolAndPanel",
-      panelValue: "elements",
-      toolValue: "shape"
-    },
-    {
-      id: "image",
-      tooltip: "Images",
-      icon: /* @__PURE__ */ React8.createElement(ImageIcon, {
-        className: "w-5 h-5"
-      }),
-      actionType: "setPanel",
-      panelValue: "image"
-    },
-    {
-      id: "design",
-      tooltip: "Design",
-      icon: /* @__PURE__ */ React8.createElement(Palette, {
-        className: "w-5 h-5"
-      }),
-      actionType: "setPanel",
-      panelValue: "design"
+  const requestedPanels = config?.panels && config.panels.length > 0 ? config.panels : getDefaultPanelOrder(config);
+  const seenIds = new Set;
+  const menuItems = requestedPanels.map((panel) => {
+    if (typeof panel === "string") {
+      if (panel === "variables" && !config?.variables)
+        return null;
+      const builtIn = BUILT_IN_MENU_ITEMS[panel];
+      return builtIn || null;
     }
-  ];
-  if (config?.export) {
-    menuItems.push({
-      id: "export",
-      tooltip: "Export",
-      icon: /* @__PURE__ */ React8.createElement(Download, {
-        className: "w-5 h-5"
-      }),
-      actionType: "setPanel",
-      panelValue: "export"
-    });
-  }
-  menuItems.push({
-    id: "background",
-    tooltip: "Background",
-    icon: /* @__PURE__ */ React8.createElement(Layers, {
-      className: "w-5 h-5"
-    }),
-    actionType: "setPanel",
-    panelValue: "background"
+    if (isCustomPanel(panel)) {
+      return {
+        id: panel.id,
+        tooltip: panel.tooltip || panel.title,
+        icon: panel.icon,
+        actionType: panel.actionType || "setPanel",
+        toolValue: panel.toolValue,
+        panelValue: panel.id
+      };
+    }
+    return null;
+  }).filter((item) => !!item).filter((item) => {
+    if (seenIds.has(item.id))
+      return false;
+    seenIds.add(item.id);
+    return true;
   });
-  if (config?.variables) {
-    menuItems.push({
-      id: "variables",
-      tooltip: "Variables",
-      icon: /* @__PURE__ */ React8.createElement(Variable, {
-        className: "w-5 h-5"
-      }),
-      actionType: "setPanel",
-      panelValue: "variables"
-    });
-  }
   const handleItemClick = (item) => {
     if (item.actionType === "setTool" && item.toolValue) {
       onSetTool(item.toolValue);
@@ -3566,73 +3611,73 @@ var CanvasEditor = forwardRef(({
       delete window.__pendingImportReject;
     }
   };
-  const panelConfigs = [
-    {
-      id: "elements",
-      title: "Elements",
-      component: ElementPanel_default,
-      props: { onAddShape: addShape }
-    },
-    {
-      id: "text",
-      title: "Text",
-      component: TextPanel_default,
-      props: {
-        selectedElement,
-        updateElement,
-        setTool,
-        onAddText: addText
-      }
-    },
-    {
-      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
-      }
-    },
-    {
-      id: "design",
-      title: "Design",
-      component: DesignPanel_default,
-      props: {
-        design,
-        currentPage,
-        selectedElement,
-        setDesign,
-        updateElement,
-        onSetUnsplashBackground: () => {
-          setShowUnsplash(true);
-          setUnsplashMode("background");
-        },
-        config
-      }
-    },
-    {
-      id: "background",
-      title: "Background",
-      component: BackgroundPanel_default,
-      props: {
-        design,
-        currentPage,
-        setDesign,
-        onSetUnsplashBackground: () => {
-          setShowUnsplash(true);
-          setUnsplashMode("background");
+  const panelConfigs = useMemo(() => {
+    const builtInConfigs = {
+      elements: {
+        id: "elements",
+        title: "Elements",
+        component: ElementPanel_default,
+        props: { onAddShape: addShape }
+      },
+      text: {
+        id: "text",
+        title: "Text",
+        component: TextPanel_default,
+        props: {
+          selectedElement,
+          updateElement,
+          setTool,
+          onAddText: addText
         }
-      }
-    },
-    ...config?.variables ? [
-      {
+      },
+      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
+        }
+      },
+      design: {
+        id: "design",
+        title: "Design",
+        component: DesignPanel_default,
+        props: {
+          design,
+          currentPage,
+          selectedElement,
+          setDesign,
+          updateElement,
+          onSetUnsplashBackground: () => {
+            setShowUnsplash(true);
+            setUnsplashMode("background");
+          },
+          config
+        }
+      },
+      background: {
+        id: "background",
+        title: "Background",
+        component: BackgroundPanel_default,
+        props: {
+          design,
+          currentPage,
+          setDesign,
+          onSetUnsplashBackground: () => {
+            setShowUnsplash(true);
+            setUnsplashMode("background");
+          }
+        }
+      },
+      variables: config?.variables ? {
         id: "variables",
         title: "Variables",
         component: VariablesPanel_default,
@@ -3641,29 +3686,81 @@ var CanvasEditor = forwardRef(({
           design,
           setDesign
         }
-      }
-    ] : [],
-    ...config?.export ? [
-      {
+      } : null,
+      export: {
         id: "export",
         title: "Export",
         component: ExportPanel_default,
         props: {
-          onExportToPNG: config.export?.png ? () => {
+          onExportToPNG: config?.export?.png ? () => {
             if (stageRef.current)
               exportToPNG(stageRef.current, design);
           } : undefined,
-          onExportToJPG: config.export?.jpg ? () => {
+          onExportToJPG: config?.export?.jpg ? () => {
             if (stageRef.current)
               exportToJPG(stageRef.current, design);
           } : undefined,
-          onExportToJSON: config.export?.json ? () => exportToJSON(design) : undefined,
+          onExportToJSON: config?.export?.json ? () => exportToJSON(design) : undefined,
           onImportJSON: () => jsonInputRef.current?.click(),
           onLoadJSON: () => setShowJsonModal(true)
         }
       }
-    ] : []
-  ];
+    };
+    const defaultPanels = [
+      "text",
+      "elements",
+      "image",
+      "design",
+      "background",
+      ...config?.variables ? ["variables"] : [],
+      ...config?.export ? ["export"] : []
+    ];
+    const requestedPanels = config?.panels && config.panels.length > 0 ? config.panels : defaultPanels;
+    const seen = new Set;
+    const ordered = [];
+    requestedPanels.forEach((panel) => {
+      if (typeof panel === "string") {
+        const builtIn = builtInConfigs[panel];
+        if (!builtIn)
+          return;
+        if (seen.has(builtIn.id))
+          return;
+        seen.add(builtIn.id);
+        ordered.push(builtIn);
+        return;
+      }
+      const custom = panel;
+      if (!custom?.id || !custom?.component)
+        return;
+      if (seen.has(custom.id))
+        return;
+      seen.add(custom.id);
+      ordered.push({
+        id: custom.id,
+        title: custom.title,
+        component: custom.component,
+        props: custom.props || {}
+      });
+    });
+    return ordered;
+  }, [
+    addShape,
+    addText,
+    config,
+    currentPage,
+    design,
+    selectedElement,
+    setTool,
+    updateElement
+  ]);
+  useEffect4(() => {
+    if (!panelConfigs.length)
+      return;
+    const exists = panelConfigs.some((panel) => panel.id === activePanelId);
+    if (!exists) {
+      setActivePanelId(panelConfigs[0].id);
+    }
+  }, [panelConfigs, activePanelId]);
   const DynamicPanelRenderer = () => {
     const activePanelConfig = panelConfigs.find((p) => p.id === activePanelId);
     if (!activePanelConfig) {

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

@@ -1 +1 @@
-{"version":3,"file":"CanvasEditor.d.ts","sourceRoot":"","sources":["../../src/CanvasEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoF,MAAM,OAAO,CAAC;AAGzG,OAAO,KAAK,MAAM,OAAO,CAAC;AA0C1B,OAAO,EAEL,YAAY,EAKb,MAAM,SAAS,CAAC;AAiCjB,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAGxC,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC;IAC1B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,SAAS,EAAE,MAAM,YAAY,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACxD;AAED,QAAA,MAAM,YAAY;UAAuC,MAAM;aAAW,MAAM;yCAwqC9E,CAAC;AAEH,eAAe,YAAY,CAAC"}
+{"version":3,"file":"CanvasEditor.d.ts","sourceRoot":"","sources":["../../src/CanvasEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6F,MAAM,OAAO,CAAC;AAGlH,OAAO,KAAK,MAAM,OAAO,CAAC;AA0C1B,OAAO,EAEL,YAAY,EAKb,MAAM,SAAS,CAAC;AAiCjB,OAAO,EAAkB,MAAM,EAA0C,MAAM,gBAAgB,CAAC;AAGhG,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC;IAC1B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,SAAS,EAAE,MAAM,YAAY,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACxD;AAED,QAAA,MAAM,YAAY;UAAuC,MAAM;aAAW,MAAM;yCAguC9E,CAAC;AAEH,eAAe,YAAY,CAAC"}

package/dist/types/components/LeftMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LeftMenu.d.ts","sourceRoot":"","sources":["../../../src/components/LeftMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAWzC,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,QAAQ,CAAC;IACf,WAAW,EAAE,aAAa,CAAC;IAC3B,SAAS,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpC,gBAAgB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAqH5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"LeftMenu.d.ts","sourceRoot":"","sources":["../../../src/components/LeftMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACnD,OAAO,EAEL,MAAM,EAGP,MAAM,iBAAiB,CAAC;AAWzB,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,QAAQ,CAAC;IACf,WAAW,EAAE,aAAa,CAAC;IAC3B,SAAS,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpC,gBAAgB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA2ED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA2F5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/types/lib/index.d.ts

@@ -15,6 +15,7 @@ export interface CanvasEditorRef {
 }
 export { default as CanvasEditor } from '../CanvasEditor';
 export * from '../types';
+export type { BuiltInPanelId, CustomPanelDefinition, PanelDefinition, } from '../types/Config';
 export { exportToPNG, exportToJPG, exportToJSON, exportToJSONObject, importFromJSON, importFromJSONData, // Import JSON data directly (no file needed)
 loadTemplateFromJSON, // Simplified template loading utility
 findRequiredInputs, replaceUserInputs, convertTemplateToCanvasDesign, canvasToDataURL, canvasToBlob, } from '../utils/exportImportUtils';

package/dist/types/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AASxC,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC;IAC1B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,SAAS,EAAE,MAAM,YAAY,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvD,UAAU,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9C;AAGD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAG1D,cAAc,UAAU,CAAC;AAGzB,OAAO,EACL,WAAW,EACX,WAAW,EACX,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,kBAAkB,EAAE,6CAA6C;AACjE,oBAAoB,EAAE,sCAAsC;AAC5D,kBAAkB,EAClB,iBAAiB,EACjB,6BAA6B,EAC7B,eAAe,EACf,YAAY,GACb,MAAM,4BAA4B,CAAC;AAGpC,cAAc,aAAa,CAAC;AAG5B,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG7E,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AASxC,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC;IAC1B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,SAAS,EAAE,MAAM,YAAY,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvD,UAAU,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9C;AAGD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAG1D,cAAc,UAAU,CAAC;AAGzB,YAAY,EACV,cAAc,EACd,qBAAqB,EACrB,eAAe,GAChB,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EACL,WAAW,EACX,WAAW,EACX,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,kBAAkB,EAAE,6CAA6C;AACjE,oBAAoB,EAAE,sCAAsC;AAC5D,kBAAkB,EAClB,iBAAiB,EACjB,6BAA6B,EAC7B,eAAe,EACf,YAAY,GACb,MAAM,4BAA4B,CAAC;AAGpC,cAAc,aAAa,CAAC;AAG5B,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG7E,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC"}

package/dist/types/types/Config.d.ts

@@ -1,3 +1,17 @@
+import React from "react";
+import { ToolType } from "./ToolType";
+export type BuiltInPanelId = "elements" | "design" | "text" | "image" | "background" | "export" | "variables";
+export interface CustomPanelDefinition {
+    id: string;
+    title: string;
+    tooltip?: string;
+    icon: React.ReactElement<React.ComponentProps<any>>;
+    component: React.ComponentType<any>;
+    props?: Record<string, any>;
+    actionType?: "setPanel" | "setToolAndPanel";
+    toolValue?: ToolType;
+}
+export type PanelDefinition = BuiltInPanelId | CustomPanelDefinition;
 export interface NavbarSection {
     id: string;
     type: 'default' | 'custom';
@@ -36,5 +50,13 @@ export interface Config {
         variable: string;
     }[];
     navbar?: NavbarConfig;
+    /**
+     * Single source of truth for left-panel order/visibility and custom panels.
+     *
+     * Built-in panel ids: "text", "elements", "image", "design", "background", "export", "variables"
+     * Custom panel objects can be mixed in this same list.
+     * If not provided, defaults to all built-in panels.
+     */
+    panels?: PanelDefinition[];
 }
 //# sourceMappingURL=Config.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Config.d.ts","sourceRoot":"","sources":["../../../src/types/Config.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC3B,QAAQ,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,MAAM,KAAK,CAAC,SAAS,CAAC,CAAC;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,YAAY;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,aAAa,EAAE,CAAC;IAEjC,eAAe,CAAC,EAAE;QAChB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;KACvC,CAAC;CACH;AAED,MAAM,WAAW,MAAM;IACrB,MAAM,CAAC,EAAE;QACP,GAAG,CAAC,EAAE,OAAO,CAAC;QACd,GAAG,CAAC,EAAE,OAAO,CAAC;QACd,IAAI,CAAC,EAAE,OAAO,CAAC;KAChB,CAAC;IACF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE;QACX,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,MAAM,CAAC,EAAE,OAAO,CAAC;KAClB,CAAC;IACF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;QACvB,QAAQ,EAAE,MAAM,CAAC;KAClB,EAAE,CAAC;IACJ,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB"}
+{"version":3,"file":"Config.d.ts","sourceRoot":"","sources":["../../../src/types/Config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,MAAM,cAAc,GACtB,UAAU,GACV,QAAQ,GACR,MAAM,GACN,OAAO,GACP,YAAY,GACZ,QAAQ,GACR,WAAW,CAAC;AAEhB,MAAM,WAAW,qBAAqB;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;IACpD,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,UAAU,CAAC,EAAE,UAAU,GAAG,iBAAiB,CAAC;IAC5C,SAAS,CAAC,EAAE,QAAQ,CAAC;CACtB;AAED,MAAM,MAAM,eAAe,GAAG,cAAc,GAAG,qBAAqB,CAAC;AAErE,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC3B,QAAQ,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,MAAM,KAAK,CAAC,SAAS,CAAC,CAAC;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,YAAY;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,aAAa,EAAE,CAAC;IAEjC,eAAe,CAAC,EAAE;QAChB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;KACvC,CAAC;CACH;AAED,MAAM,WAAW,MAAM;IACrB,MAAM,CAAC,EAAE;QACP,GAAG,CAAC,EAAE,OAAO,CAAC;QACd,GAAG,CAAC,EAAE,OAAO,CAAC;QACd,IAAI,CAAC,EAAE,OAAO,CAAC;KAChB,CAAC;IACF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE;QACX,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,MAAM,CAAC,EAAE,OAAO,CAAC;KAClB,CAAC;IACF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;QACvB,QAAQ,EAAE,MAAM,CAAC;KAClB,EAAE,CAAC;IACJ,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,eAAe,EAAE,CAAC;CAC5B"}

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "labellife-design-tool",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Professional canvas editor built with React, TypeScript, and Konva",
-  "main": "./dist/lib/index.js",
-  "module": "./dist/lib/index.js",
-  "types": "./dist/lib/index.d.ts",
+  "main": "./dist/lib/lib/index.js",
+  "module": "./dist/lib/lib/index.js",
+  "types": "./dist/lib/lib/index.d.ts",
   "type": "module",
   "exports": {
     ".": {
-      "import": "./dist/lib/index.js",
-      "types": "./dist/lib/index.d.ts"
+      "import": "./dist/lib/lib/index.js",
+      "types": "./dist/lib/lib/index.d.ts"
     },
     "./wordpress": {
       "import": "./dist/lib/wordpress.js",