labellife-design-tool 1.1.4 → 1.1.6

package/README.md

@@ -146,7 +146,42 @@ interface CustomPanelDefinition {
 
 #### Add Elements from a Custom Panel
 
-**Option 1: Use the `useCanvasStore` hook (recommended)**
+**Option 1: Use standalone store (Polotno-like - recommended)**
+
+Create a standalone store that you can use anywhere:
+
+```tsx
+import { createSimpleStore } from 'labellife-design-tool';
+
+// Create store instance
+const store = createSimpleStore({
+  name: "My Design",
+  width: 800,
+  height: 600,
+});
+
+// Use store anywhere
+store.addPage();
+store.activePage.addElement({
+  type: "image",
+  src: "https://example.com/img.jpg",
+  x: 100,
+  y: 100,
+  width: 200,
+  height: 200,
+});
+
+// Load templates
+await store.loadJSON(templateData);
+
+// Use with CanvasEditor (optional)
+<CanvasEditor name="Editor" config={{ panels: ["text", "elements"] }} />
+
+// Export store for use across your app
+export const store = createSimpleStore();
+```
+
+**Option 2: Use the `useCanvasStore` hook (inside CanvasEditor only)**
 
 Any component inside `CanvasEditor` can access the store using the hook:
 
@@ -167,11 +202,42 @@ const MyComponent = () => {
     });
   };
 
+  const handleLoadTemplate = async () => {
+    try {
+      const templateData = {
+        name: "My Template",
+        width: 800,
+        height: 600,
+        pages: [
+          {
+            id: "page-1",
+            name: "Page 1",
+            elements: [
+              {
+                type: "text",
+                text: "Hello World",
+                x: 100,
+                y: 100,
+                fontSize: 24,
+              },
+            ],
+          },
+        ],
+      };
+      
+      await store.loadJSON(templateData);
+      console.log("Template loaded successfully!");
+    } catch (error) {
+      console.error("Failed to load template:", error);
+    }
+  };
+
   return (
     <div style={{ color: "white", padding: 16 }}>
       <p>Current page: {store.activePage.id}</p>
       <p>Canvas size: {store.width} × {store.height}</p>
       <button onClick={handleAddImage}>Add Image</button>
+      <button onClick={handleLoadTemplate}>Load Template</button>
     </div>
   );
 };
@@ -220,25 +286,39 @@ const MyImagesPanel = ({ store }) => {
 />
 ```
 
-**CanvasStore interface**
+**SimpleStore interface (Standalone)**
 
 ```typescript
-interface CanvasStore {
-  activePage: {
-    id: string;
-    addElement: (element: {
-      type: string;
-      src?: string;
-      x: number;
-      y: number;
-      width: number;
-      height: number;
-    }) => void;
-  };
+interface SimpleStore {
+  // Design properties
+  design: CanvasDesign;
   width: number;
   height: number;
-  openSidePanel: (panelId: string | null) => void;
-  deletePages: (pageIds: string[]) => void;
+  
+  // Page operations
+  activePage: Page | null;
+  activePageId: string;
+  addPage(page?: Partial<Page>): string;
+  deletePages(pageIds: string[]): void;
+  setActivePage(pageId: string): void;
+  
+  // Element operations
+  addElement(element: Partial<CanvasElement>): void;
+  updateElement(elementId: string, updates: Partial<CanvasElement>): void;
+  deleteElement(elementId: string): void;
+  
+  // Panel operations
+  openSidePanel(panelId: string | null): void;
+  activePanelId: string | null;
+  
+  // Design operations
+  setDesign(design: CanvasDesign): void;
+  updateDesign(updates: Partial<CanvasDesign>): void;
+  loadJSON(jsonData: any): Promise<void>;
+  
+  // Events
+  on(event: 'designChanged' | 'activePageChanged' | 'activePanelChanged', callback: Function): void;
+  off(event: string): void;
 }
 ```
 

package/dist/lib/index.css

@@ -217,12 +217,6 @@
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
-  .-top-1 {
-    top: calc(var(--spacing) * -1);
-  }
-  .-right-1 {
-    right: calc(var(--spacing) * -1);
-  }
   .bottom-4 {
     bottom: calc(var(--spacing) * 4);
   }
@@ -265,9 +259,6 @@
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
-  .mt-4 {
-    margin-top: calc(var(--spacing) * 4);
-  }
   .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
@@ -331,9 +322,6 @@
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
-  .h-64 {
-    height: calc(var(--spacing) * 64);
-  }
   .h-full {
     height: 100%;
   }
@@ -343,9 +331,6 @@
   .max-h-32 {
     max-height: calc(var(--spacing) * 32);
   }
-  .max-h-\[80vh\] {
-    max-height: 80vh;
-  }
   .max-h-\[90vh\] {
     max-height: 90vh;
   }
@@ -412,9 +397,6 @@
   .resize {
     resize: both;
   }
-  .resize-none {
-    resize: none;
-  }
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -439,9 +421,6 @@
   .justify-center {
     justify-content: center;
   }
-  .justify-end {
-    justify-content: flex-end;
-  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -505,9 +484,6 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  .overflow-auto {
-    overflow: auto;
-  }
   .overflow-hidden {
     overflow: hidden;
   }
@@ -599,9 +575,6 @@
   .bg-green-600 {
     background-color: var(--color-green-600);
   }
-  .bg-red-500 {
-    background-color: var(--color-red-500);
-  }
   .bg-red-700 {
     background-color: var(--color-red-700);
   }
@@ -668,9 +641,6 @@
   .text-right {
     text-align: right;
   }
-  .font-mono {
-    font-family: var(--font-mono);
-  }
   .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));