labellife-design-tool 1.0.5 → 1.0.6

package/README.md

@@ -128,7 +128,8 @@ import {
   exportToJPG,
   exportToJSON,
   canvasToBlob,
-  importFromJSON 
+  importFromJSON,
+  importFromJSONData 
 } from 'labellife-design-tool';
 import type { CanvasElement } from 'labellife-design-tool';
 
@@ -143,6 +144,122 @@ function MyEditor() {
 }
 ```
 
+### Template Import
+
+The library provides two ways to import template designs:
+
+#### File-Based Import
+
+```tsx
+import { importFromJSON } from 'labellife-design-tool';
+
+// Use with file input
+function handleFileImport(event) {
+  importFromJSON(
+    event,
+    (design) => {
+      console.log('Design loaded:', design);
+      // Use the design
+    },
+    (error) => {
+      alert('Import failed: ' + error);
+    }
+  );
+}
+```
+
+#### Direct JSON Data Import
+
+```tsx
+import { importFromJSONData } from 'labellife-design-tool';
+
+// Import JSON data directly (no file needed)
+const templateData = {
+  width: 800,
+  height: 600,
+  pages: [{
+    id: "1",
+    name: "Page 1",
+    elements: [
+      {
+        type: "text",
+        text: "Hello World",
+        x: 100,
+        y: 100,
+        fontSize: 24
+      }
+    ],
+    background: "white"
+  }]
+};
+
+importFromJSONData(
+  templateData,
+  (design) => {
+    console.log('Design loaded:', design);
+    // Use the design in CanvasEditor
+  },
+  (error) => {
+    console.error('Import failed:', error);
+  }
+);
+```
+
+#### Import from API
+
+```tsx
+// Load template from API
+async function loadTemplateFromAPI(templateId: string) {
+  try {
+    const response = await fetch(`/api/templates/${templateId}`);
+    const templateData = await response.json();
+    
+    importFromJSONData(
+      templateData,
+      (design) => {
+        // Template loaded successfully
+        setDesign(design);
+      },
+      (error) => {
+        alert('Failed to load template: ' + error);
+      }
+    );
+  } catch (error) {
+    console.error('API error:', error);
+  }
+}
+```
+
+#### Import with User Inputs
+
+```tsx
+importFromJSONData(
+  templateData,
+  (design) => {
+    // Design loaded with user inputs applied
+    setDesign(design);
+  },
+  (error) => {
+    alert('Import failed: ' + error);
+  },
+  (inputs, onComplete) => {
+    // Show custom input modal
+    showInputModal(inputs, (values) => {
+      onComplete(values);
+    });
+  }
+);
+```
+
+**Comparison:**
+
+| Feature | `importFromJSON` | `importFromJSONData` |
+|---------|------------------|---------------------|
+| **Input Source** | File upload event | JSON data object |
+| **File Reading** | Built-in FileReader | Not needed |
+| **Use Case** | User file uploads | API data, database, programmatic imports |
+| **Processing** | Identical | Identical |
+
 ### Canvas to Blob Export
 
 The library provides a flexible `canvasToBlob` function that allows converting the canvas to a Blob for various use cases:

package/dist/lib/index.css

@@ -11,6 +11,8 @@
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-600: oklch(57.7% 0.245 27.325);
     --color-red-700: oklch(50.5% 0.213 27.518);
+    --color-green-600: oklch(62.7% 0.194 149.214);
+    --color-green-700: oklch(52.7% 0.154 150.069);
     --color-blue-400: oklch(70.7% 0.165 254.624);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-blue-600: oklch(54.6% 0.245 262.881);
@@ -215,6 +217,12 @@
   .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);
   }
@@ -257,6 +265,9 @@
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
+  .mt-4 {
+    margin-top: calc(var(--spacing) * 4);
+  }
   .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
@@ -320,6 +331,9 @@
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
+  .h-64 {
+    height: calc(var(--spacing) * 64);
+  }
   .h-full {
     height: 100%;
   }
@@ -329,6 +343,9 @@
   .max-h-32 {
     max-height: calc(var(--spacing) * 32);
   }
+  .max-h-\[80vh\] {
+    max-height: 80vh;
+  }
   .max-h-\[90vh\] {
     max-height: 90vh;
   }
@@ -395,6 +412,9 @@
   .resize {
     resize: both;
   }
+  .resize-none {
+    resize: none;
+  }
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -419,6 +439,9 @@
   .justify-center {
     justify-content: center;
   }
+  .justify-end {
+    justify-content: flex-end;
+  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -482,6 +505,9 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  .overflow-auto {
+    overflow: auto;
+  }
   .overflow-hidden {
     overflow: hidden;
   }
@@ -570,6 +596,12 @@
   .bg-gray-900 {
     background-color: var(--color-gray-900);
   }
+  .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);
   }
@@ -636,6 +668,9 @@
   .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));
@@ -828,6 +863,13 @@
       }
     }
   }
+  .hover\:bg-green-700 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-green-700);
+      }
+    }
+  }
   .hover\:bg-red-500 {
     &:hover {
       @media (hover: hover) {

package/dist/lib/lib/index.js

@@ -26,7 +26,8 @@ function initJsxCompat() {
 import React18, { useState as useState3, useRef as useRef5, useEffect as useEffect4, useCallback as useCallback4, forwardRef, useImperativeHandle } from "react";
 import { Stage, Layer, Rect as Rect2 } from "react-konva";
 import {
-  PlusCircle
+  PlusCircle,
+  X as X2
 } from "lucide-react";
 
 // src/elements/EditableTextElement.tsx
@@ -1964,7 +1965,8 @@ var ExportPanel = ({
   onExportToPNG,
   onExportToJPG,
   onExportToJSON,
-  onImportJSON
+  onImportJSON,
+  onLoadJSON
 }) => {
   return /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement("h3", {
     className: "text-white font-semibold mb-4"
@@ -1982,7 +1984,10 @@ var ExportPanel = ({
   }, "Export as JSON"), /* @__PURE__ */ React15.createElement("button", {
     onClick: onImportJSON,
     className: "w-full p-3 bg-gray-700 text-white rounded hover:bg-gray-600"
-  }, "Import JSON")));
+  }, "Import JSON"), onLoadJSON && /* @__PURE__ */ React15.createElement("button", {
+    onClick: onLoadJSON,
+    className: "w-full p-3 bg-green-600 text-white rounded hover:bg-green-700"
+  }, "Load JSON")));
 };
 var ExportPanel_default = ExportPanel;
 
@@ -2161,6 +2166,12 @@ function convertTemplateToCanvasDesign(json) {
   if (!converted.name) {
     converted.name = json.name || "Imported Design";
   }
+  if (converted.width === "auto" || !converted.width) {
+    converted.width = 800;
+  }
+  if (converted.height === "auto" || !converted.height) {
+    converted.height = 600;
+  }
   if (!converted.fonts) {
     converted.fonts = [];
   }
@@ -2172,11 +2183,19 @@ function convertTemplateToCanvasDesign(json) {
   }
   if (converted.pages && Array.isArray(converted.pages)) {
     converted.pages = converted.pages.map((page, index) => {
+      const pageWidth = page.width === "auto" || !page.width ? converted.width : page.width;
+      const pageHeight = page.height === "auto" || !page.height ? converted.height : page.height;
       const elements = (page.elements || page.children || []).map((element) => {
+        let elementType = element.type;
+        let shapeType = element.shapeType;
+        if (element.type === "figure" && element.subType) {
+          elementType = "shape";
+          shapeType = element.subType;
+        }
         return {
           ...element,
           id: element.id || `${Date.now()}-${Math.random()}`,
-          type: element.type || "text",
+          type: elementType || "text",
           name: element.name || "Untitled",
           x: element.x ?? 0,
           y: element.y ?? 0,
@@ -2200,7 +2219,7 @@ function convertTemplateToCanvasDesign(json) {
           cornerRadius: element.cornerRadius,
           filters: element.filters,
           mask: element.mask,
-          shapeType: element.shapeType,
+          shapeType,
           align: element.align,
           lineHeight: element.lineHeight,
           letterSpacing: element.letterSpacing,
@@ -2435,6 +2454,9 @@ function replaceUserInputs(design, collectedInputs) {
       return defaultSize;
     };
     unusedInputs.forEach(([inputId, value]) => {
+      if (!value || value === "" || value === "undefined" || value === "null") {
+        return;
+      }
       if ((inputId === "optionalImage" || inputId.toLowerCase().includes("image")) && typeof value === "string") {
         const imageProps = processImageElement(value);
         newElements.push({
@@ -2567,6 +2589,22 @@ var canvasToBlob = (stage, format = "png", options) => {
     resolve(new Blob([arrayBuffer], { type: mimeType }));
   });
 };
+var importFromJSONData = (jsonData, onLoad, onError, onInputsRequired) => {
+  try {
+    const convertedDesign = convertTemplateToCanvasDesign(jsonData);
+    const requiredInputs = findRequiredInputs(convertedDesign);
+    if (requiredInputs.length > 0 && onInputsRequired) {
+      onInputsRequired(requiredInputs, (collectedValues) => {
+        const finalDesign = replaceUserInputs(convertedDesign, collectedValues);
+        onLoad(finalDesign);
+      });
+    } else {
+      onLoad(convertedDesign);
+    }
+  } catch (error) {
+    onError(`Invalid JSON data: ${error instanceof Error ? error.message : String(error)}`);
+  }
+};
 var importFromJSON = (event, onLoad, onError, onInputsRequired) => {
   const file = event.target.files?.[0];
   if (file) {
@@ -3019,6 +3057,8 @@ var CanvasEditor = forwardRef(({
   const [historyIndex, setHistoryIndex] = useState3(-1);
   const [showInputModal, setShowInputModal] = useState3(false);
   const [pendingInputs, setPendingInputs] = useState3([]);
+  const [showJsonModal, setShowJsonModal] = useState3(false);
+  const [jsonInputText, setJsonInputText] = useState3("");
   const stageRef = useRef5(null);
   useImperativeHandle(ref, () => ({
     stage: stageRef.current,
@@ -3224,15 +3264,35 @@ var CanvasEditor = forwardRef(({
   }, [design.pages.length]);
   const deletePage = useCallback4((pageId) => {
     if (design.pages.length > 1) {
-      setDesign((prev) => ({
-        ...prev,
-        pages: prev.pages.filter((p) => p.id !== pageId)
-      }));
+      setDesign((prev) => {
+        const filteredPages = prev.pages.filter((p) => p.id !== pageId);
+        const renamedPages = filteredPages.map((p, idx) => ({
+          ...p,
+          name: `Page ${idx + 1}`
+        }));
+        return {
+          ...prev,
+          pages: renamedPages
+        };
+      });
       if (currentPageId === pageId) {
-        setCurrentPageId(design.pages[0].id);
+        const remainingPages = design.pages.filter((p) => p.id !== pageId);
+        if (remainingPages.length > 0) {
+          setCurrentPageId(remainingPages[0].id);
+        }
       }
+      setTimeout(() => {
+        const updatedDesign = {
+          ...design,
+          pages: design.pages.filter((p) => p.id !== pageId).map((p, idx) => ({
+            ...p,
+            name: `Page ${idx + 1}`
+          }))
+        };
+        saveToHistory(updatedDesign);
+      }, 0);
     }
-  }, [design.pages, currentPageId]);
+  }, [design.pages, currentPageId, design, saveToHistory]);
   const handleImageUpload = useCallback4((e) => {
     const file = e.target.files?.[0];
     if (file) {
@@ -3364,14 +3424,27 @@ var CanvasEditor = forwardRef(({
     setUnsplashResults([]);
     setUnsplashMode("element");
   }, [currentPageId, saveToHistory, unsplashMode]);
+  const calculateFitToScreenZoom = useCallback4((canvasWidth, canvasHeight) => {
+    const viewportWidth = window.innerWidth - 320;
+    const viewportHeight = window.innerHeight - 200;
+    const scaleX = viewportWidth / canvasWidth;
+    const scaleY = viewportHeight / canvasHeight;
+    const optimalScale = Math.min(scaleX, scaleY, 1);
+    return Math.max(0.1, Math.min(3, optimalScale));
+  }, []);
   const handleImportJSON = (event) => {
     importFromJSON(event, (newDesign) => {
       if (newDesign && newDesign.pages && newDesign.pages.length > 0) {
-        setDesign(newDesign);
         setSelectedId(null);
         setSelectedIds([]);
+        setTool("select");
+        setDesign(newDesign);
         const firstPageId = newDesign.pages[0]?.id;
         setCurrentPageId(firstPageId || "1");
+        const optimalZoom = calculateFitToScreenZoom(newDesign.width, newDesign.height);
+        setZoom(optimalZoom);
+        setHistory([newDesign]);
+        setHistoryIndex(0);
         saveToHistory(newDesign);
       } else {
         alert("Invalid design structure in JSON file. Could not load.");
@@ -3387,6 +3460,40 @@ var CanvasEditor = forwardRef(({
       jsonInputRef.current.value = "";
     }
   };
+  const handleImportJSONData = () => {
+    try {
+      const jsonData = JSON.parse(jsonInputText);
+      importFromJSONData(jsonData, (newDesign) => {
+        if (newDesign && newDesign.pages && newDesign.pages.length > 0) {
+          setSelectedId(null);
+          setSelectedIds([]);
+          setTool("select");
+          setDesign(newDesign);
+          const firstPageId = newDesign.pages[0]?.id;
+          setCurrentPageId(firstPageId || "1");
+          const optimalZoom = calculateFitToScreenZoom(newDesign.width, newDesign.height);
+          setZoom(optimalZoom);
+          setHistory([newDesign]);
+          setHistoryIndex(0);
+          saveToHistory(newDesign);
+          setShowJsonModal(false);
+          setJsonInputText("");
+        } else {
+          alert("Invalid design structure in JSON data. Could not load.");
+        }
+      }, (errorMessage) => {
+        alert(`Error importing JSON: ${errorMessage}`);
+      }, (inputs, onComplete) => {
+        setPendingInputs(inputs);
+        setShowInputModal(true);
+        window.__pendingImportComplete = onComplete;
+        setShowJsonModal(false);
+        setJsonInputText("");
+      });
+    } catch (error) {
+      alert(`Invalid JSON format: ${error instanceof Error ? error.message : String(error)}`);
+    }
+  };
   const handleInputModalComplete = (values) => {
     setShowInputModal(false);
     const onComplete = window.__pendingImportComplete;
@@ -3493,7 +3600,8 @@ var CanvasEditor = forwardRef(({
               exportToJPG(stageRef.current, design);
           } : undefined,
           onExportToJSON: config.export?.json ? () => exportToJSON(design) : undefined,
-          onImportJSON: () => jsonInputRef.current?.click()
+          onImportJSON: () => jsonInputRef.current?.click(),
+          onLoadJSON: () => setShowJsonModal(true)
         }
       }
     ] : []
@@ -3570,7 +3678,7 @@ var CanvasEditor = forwardRef(({
     onRedo: redo,
     onZoomIn: () => setZoom(Math.min(3, zoom + 0.1)),
     onZoomOut: () => setZoom(Math.max(0.1, zoom - 0.1)),
-    onZoomReset: () => setZoom(1),
+    onZoomReset: () => setZoom(calculateFitToScreenZoom(design.width, design.height)),
     onSetActivePanel: setActivePanelId,
     navbarConfig: config?.navbar
   }), /* @__PURE__ */ React18.createElement("div", {
@@ -3597,6 +3705,7 @@ var CanvasEditor = forwardRef(({
       transformOrigin: "center center"
     }
   }, /* @__PURE__ */ React18.createElement(Stage, {
+    key: `canvas-${design.id || design.width}-${design.height}`,
     ref: stageRef,
     width: design.width,
     height: design.height,
@@ -3650,11 +3759,19 @@ var CanvasEditor = forwardRef(({
     }
   }))))), 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", {
+  }, design.pages.map((page, index) => /* @__PURE__ */ React18.createElement("div", {
     key: page.id,
+    className: "relative group"
+  }, /* @__PURE__ */ React18.createElement("button", {
     onClick: () => setCurrentPageId(page.id),
     className: `px-3 py-1 rounded text-sm ${page.id === currentPageId ? "bg-blue-600 text-white" : "bg-gray-800 text-gray-300 hover:bg-gray-700"}`
-  }, "Page ", index + 1)), /* @__PURE__ */ React18.createElement("button", {
+  }, "Page ", index + 1), design.pages.length > 1 && /* @__PURE__ */ React18.createElement("button", {
+    onClick: () => deletePage(page.id),
+    className: "absolute -top-1 -right-1 w-4 h-4 bg-red-500 text-white rounded-full flex items-center justify-center transition-opacity duration-200 hover:bg-red-600",
+    title: `Delete Page ${index + 1}`
+  }, /* @__PURE__ */ React18.createElement(X2, {
+    className: "w-3 h-3"
+  })))), /* @__PURE__ */ React18.createElement("button", {
     onClick: addPage,
     className: "p-1 bg-gray-800 text-gray-300 rounded hover:bg-gray-700",
     title: "Add Page"
@@ -3733,7 +3850,31 @@ var CanvasEditor = forwardRef(({
     className: "w-8 h-8 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-200"
   }))))) : /* @__PURE__ */ React18.createElement("div", {
     className: "text-center text-gray-400 py-12"
-  }, "Enter a search term to find images")))));
+  }, "Enter a search term to find images")))), showJsonModal && /* @__PURE__ */ React18.createElement("div", {
+    className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
+  }, /* @__PURE__ */ React18.createElement("div", {
+    className: "bg-gray-800 rounded-lg p-6 w-full max-w-2xl max-h-[80vh] overflow-auto"
+  }, /* @__PURE__ */ React18.createElement("h2", {
+    className: "text-white text-xl font-semibold mb-4"
+  }, "Load JSON Data"), /* @__PURE__ */ React18.createElement("p", {
+    className: "text-gray-300 mb-4"
+  }, 'Paste your JSON template data below and click "Load" to import it into the canvas.'), /* @__PURE__ */ React18.createElement("textarea", {
+    value: jsonInputText,
+    onChange: (e) => setJsonInputText(e.target.value),
+    className: "w-full h-64 p-3 bg-gray-700 text-white border border-gray-600 rounded font-mono text-sm resize-none",
+    placeholder: '{"width": 800, "height": 600, "pages": [...]}'
+  }), /* @__PURE__ */ React18.createElement("div", {
+    className: "flex justify-end space-x-3 mt-4"
+  }, /* @__PURE__ */ React18.createElement("button", {
+    onClick: () => {
+      setShowJsonModal(false);
+      setJsonInputText("");
+    },
+    className: "px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700"
+  }, "Cancel"), /* @__PURE__ */ React18.createElement("button", {
+    onClick: handleImportJSONData,
+    className: "px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
+  }, "Load JSON")))));
 });
 var CanvasEditor_default = CanvasEditor;
 // src/lib/index.ts
@@ -3741,6 +3882,7 @@ initJsxCompat();
 export {
   setUnsplashAccessKey,
   replaceUserInputs,
+  importFromJSONData,
   importFromJSON,
   getUnsplashAccessKey,
   findRequiredInputs,

package/dist/lib/wordpress.js

@@ -26,7 +26,8 @@ function initJsxCompat() {
 import React18, { useState as useState3, useRef as useRef5, useEffect as useEffect4, useCallback as useCallback4, forwardRef, useImperativeHandle } from "react";
 import { Stage, Layer, Rect as Rect2 } from "react-konva";
 import {
-  PlusCircle
+  PlusCircle,
+  X as X2
 } from "lucide-react";
 
 // src/elements/EditableTextElement.tsx
@@ -1964,7 +1965,8 @@ var ExportPanel = ({
   onExportToPNG,
   onExportToJPG,
   onExportToJSON,
-  onImportJSON
+  onImportJSON,
+  onLoadJSON
 }) => {
   return /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement("h3", {
     className: "text-white font-semibold mb-4"
@@ -1982,7 +1984,10 @@ var ExportPanel = ({
   }, "Export as JSON"), /* @__PURE__ */ React15.createElement("button", {
     onClick: onImportJSON,
     className: "w-full p-3 bg-gray-700 text-white rounded hover:bg-gray-600"
-  }, "Import JSON")));
+  }, "Import JSON"), onLoadJSON && /* @__PURE__ */ React15.createElement("button", {
+    onClick: onLoadJSON,
+    className: "w-full p-3 bg-green-600 text-white rounded hover:bg-green-700"
+  }, "Load JSON")));
 };
 var ExportPanel_default = ExportPanel;
 
@@ -2161,6 +2166,12 @@ function convertTemplateToCanvasDesign(json) {
   if (!converted.name) {
     converted.name = json.name || "Imported Design";
   }
+  if (converted.width === "auto" || !converted.width) {
+    converted.width = 800;
+  }
+  if (converted.height === "auto" || !converted.height) {
+    converted.height = 600;
+  }
   if (!converted.fonts) {
     converted.fonts = [];
   }
@@ -2172,11 +2183,19 @@ function convertTemplateToCanvasDesign(json) {
   }
   if (converted.pages && Array.isArray(converted.pages)) {
     converted.pages = converted.pages.map((page, index) => {
+      const pageWidth = page.width === "auto" || !page.width ? converted.width : page.width;
+      const pageHeight = page.height === "auto" || !page.height ? converted.height : page.height;
       const elements = (page.elements || page.children || []).map((element) => {
+        let elementType = element.type;
+        let shapeType = element.shapeType;
+        if (element.type === "figure" && element.subType) {
+          elementType = "shape";
+          shapeType = element.subType;
+        }
         return {
           ...element,
           id: element.id || `${Date.now()}-${Math.random()}`,
-          type: element.type || "text",
+          type: elementType || "text",
           name: element.name || "Untitled",
           x: element.x ?? 0,
           y: element.y ?? 0,
@@ -2200,7 +2219,7 @@ function convertTemplateToCanvasDesign(json) {
           cornerRadius: element.cornerRadius,
           filters: element.filters,
           mask: element.mask,
-          shapeType: element.shapeType,
+          shapeType,
           align: element.align,
           lineHeight: element.lineHeight,
           letterSpacing: element.letterSpacing,
@@ -2435,6 +2454,9 @@ function replaceUserInputs(design, collectedInputs) {
       return defaultSize;
     };
     unusedInputs.forEach(([inputId, value]) => {
+      if (!value || value === "" || value === "undefined" || value === "null") {
+        return;
+      }
       if ((inputId === "optionalImage" || inputId.toLowerCase().includes("image")) && typeof value === "string") {
         const imageProps = processImageElement(value);
         newElements.push({
@@ -2567,6 +2589,22 @@ var canvasToBlob = (stage, format = "png", options) => {
     resolve(new Blob([arrayBuffer], { type: mimeType }));
   });
 };
+var importFromJSONData = (jsonData, onLoad, onError, onInputsRequired) => {
+  try {
+    const convertedDesign = convertTemplateToCanvasDesign(jsonData);
+    const requiredInputs = findRequiredInputs(convertedDesign);
+    if (requiredInputs.length > 0 && onInputsRequired) {
+      onInputsRequired(requiredInputs, (collectedValues) => {
+        const finalDesign = replaceUserInputs(convertedDesign, collectedValues);
+        onLoad(finalDesign);
+      });
+    } else {
+      onLoad(convertedDesign);
+    }
+  } catch (error) {
+    onError(`Invalid JSON data: ${error instanceof Error ? error.message : String(error)}`);
+  }
+};
 var importFromJSON = (event, onLoad, onError, onInputsRequired) => {
   const file = event.target.files?.[0];
   if (file) {
@@ -3019,6 +3057,8 @@ var CanvasEditor = forwardRef(({
   const [historyIndex, setHistoryIndex] = useState3(-1);
   const [showInputModal, setShowInputModal] = useState3(false);
   const [pendingInputs, setPendingInputs] = useState3([]);
+  const [showJsonModal, setShowJsonModal] = useState3(false);
+  const [jsonInputText, setJsonInputText] = useState3("");
   const stageRef = useRef5(null);
   useImperativeHandle(ref, () => ({
     stage: stageRef.current,
@@ -3224,15 +3264,35 @@ var CanvasEditor = forwardRef(({
   }, [design.pages.length]);
   const deletePage = useCallback4((pageId) => {
     if (design.pages.length > 1) {
-      setDesign((prev) => ({
-        ...prev,
-        pages: prev.pages.filter((p) => p.id !== pageId)
-      }));
+      setDesign((prev) => {
+        const filteredPages = prev.pages.filter((p) => p.id !== pageId);
+        const renamedPages = filteredPages.map((p, idx) => ({
+          ...p,
+          name: `Page ${idx + 1}`
+        }));
+        return {
+          ...prev,
+          pages: renamedPages
+        };
+      });
       if (currentPageId === pageId) {
-        setCurrentPageId(design.pages[0].id);
+        const remainingPages = design.pages.filter((p) => p.id !== pageId);
+        if (remainingPages.length > 0) {
+          setCurrentPageId(remainingPages[0].id);
+        }
       }
+      setTimeout(() => {
+        const updatedDesign = {
+          ...design,
+          pages: design.pages.filter((p) => p.id !== pageId).map((p, idx) => ({
+            ...p,
+            name: `Page ${idx + 1}`
+          }))
+        };
+        saveToHistory(updatedDesign);
+      }, 0);
     }
-  }, [design.pages, currentPageId]);
+  }, [design.pages, currentPageId, design, saveToHistory]);
   const handleImageUpload = useCallback4((e) => {
     const file = e.target.files?.[0];
     if (file) {
@@ -3364,14 +3424,27 @@ var CanvasEditor = forwardRef(({
     setUnsplashResults([]);
     setUnsplashMode("element");
   }, [currentPageId, saveToHistory, unsplashMode]);
+  const calculateFitToScreenZoom = useCallback4((canvasWidth, canvasHeight) => {
+    const viewportWidth = window.innerWidth - 320;
+    const viewportHeight = window.innerHeight - 200;
+    const scaleX = viewportWidth / canvasWidth;
+    const scaleY = viewportHeight / canvasHeight;
+    const optimalScale = Math.min(scaleX, scaleY, 1);
+    return Math.max(0.1, Math.min(3, optimalScale));
+  }, []);
   const handleImportJSON = (event) => {
     importFromJSON(event, (newDesign) => {
       if (newDesign && newDesign.pages && newDesign.pages.length > 0) {
-        setDesign(newDesign);
         setSelectedId(null);
         setSelectedIds([]);
+        setTool("select");
+        setDesign(newDesign);
         const firstPageId = newDesign.pages[0]?.id;
         setCurrentPageId(firstPageId || "1");
+        const optimalZoom = calculateFitToScreenZoom(newDesign.width, newDesign.height);
+        setZoom(optimalZoom);
+        setHistory([newDesign]);
+        setHistoryIndex(0);
         saveToHistory(newDesign);
       } else {
         alert("Invalid design structure in JSON file. Could not load.");
@@ -3387,6 +3460,40 @@ var CanvasEditor = forwardRef(({
       jsonInputRef.current.value = "";
     }
   };
+  const handleImportJSONData = () => {
+    try {
+      const jsonData = JSON.parse(jsonInputText);
+      importFromJSONData(jsonData, (newDesign) => {
+        if (newDesign && newDesign.pages && newDesign.pages.length > 0) {
+          setSelectedId(null);
+          setSelectedIds([]);
+          setTool("select");
+          setDesign(newDesign);
+          const firstPageId = newDesign.pages[0]?.id;
+          setCurrentPageId(firstPageId || "1");
+          const optimalZoom = calculateFitToScreenZoom(newDesign.width, newDesign.height);
+          setZoom(optimalZoom);
+          setHistory([newDesign]);
+          setHistoryIndex(0);
+          saveToHistory(newDesign);
+          setShowJsonModal(false);
+          setJsonInputText("");
+        } else {
+          alert("Invalid design structure in JSON data. Could not load.");
+        }
+      }, (errorMessage) => {
+        alert(`Error importing JSON: ${errorMessage}`);
+      }, (inputs, onComplete) => {
+        setPendingInputs(inputs);
+        setShowInputModal(true);
+        window.__pendingImportComplete = onComplete;
+        setShowJsonModal(false);
+        setJsonInputText("");
+      });
+    } catch (error) {
+      alert(`Invalid JSON format: ${error instanceof Error ? error.message : String(error)}`);
+    }
+  };
   const handleInputModalComplete = (values) => {
     setShowInputModal(false);
     const onComplete = window.__pendingImportComplete;
@@ -3493,7 +3600,8 @@ var CanvasEditor = forwardRef(({
               exportToJPG(stageRef.current, design);
           } : undefined,
           onExportToJSON: config.export?.json ? () => exportToJSON(design) : undefined,
-          onImportJSON: () => jsonInputRef.current?.click()
+          onImportJSON: () => jsonInputRef.current?.click(),
+          onLoadJSON: () => setShowJsonModal(true)
         }
       }
     ] : []
@@ -3570,7 +3678,7 @@ var CanvasEditor = forwardRef(({
     onRedo: redo,
     onZoomIn: () => setZoom(Math.min(3, zoom + 0.1)),
     onZoomOut: () => setZoom(Math.max(0.1, zoom - 0.1)),
-    onZoomReset: () => setZoom(1),
+    onZoomReset: () => setZoom(calculateFitToScreenZoom(design.width, design.height)),
     onSetActivePanel: setActivePanelId,
     navbarConfig: config?.navbar
   }), /* @__PURE__ */ React18.createElement("div", {
@@ -3597,6 +3705,7 @@ var CanvasEditor = forwardRef(({
       transformOrigin: "center center"
     }
   }, /* @__PURE__ */ React18.createElement(Stage, {
+    key: `canvas-${design.id || design.width}-${design.height}`,
     ref: stageRef,
     width: design.width,
     height: design.height,
@@ -3650,11 +3759,19 @@ var CanvasEditor = forwardRef(({
     }
   }))))), 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", {
+  }, design.pages.map((page, index) => /* @__PURE__ */ React18.createElement("div", {
     key: page.id,
+    className: "relative group"
+  }, /* @__PURE__ */ React18.createElement("button", {
     onClick: () => setCurrentPageId(page.id),
     className: `px-3 py-1 rounded text-sm ${page.id === currentPageId ? "bg-blue-600 text-white" : "bg-gray-800 text-gray-300 hover:bg-gray-700"}`
-  }, "Page ", index + 1)), /* @__PURE__ */ React18.createElement("button", {
+  }, "Page ", index + 1), design.pages.length > 1 && /* @__PURE__ */ React18.createElement("button", {
+    onClick: () => deletePage(page.id),
+    className: "absolute -top-1 -right-1 w-4 h-4 bg-red-500 text-white rounded-full flex items-center justify-center transition-opacity duration-200 hover:bg-red-600",
+    title: `Delete Page ${index + 1}`
+  }, /* @__PURE__ */ React18.createElement(X2, {
+    className: "w-3 h-3"
+  })))), /* @__PURE__ */ React18.createElement("button", {
     onClick: addPage,
     className: "p-1 bg-gray-800 text-gray-300 rounded hover:bg-gray-700",
     title: "Add Page"
@@ -3733,7 +3850,31 @@ var CanvasEditor = forwardRef(({
     className: "w-8 h-8 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-200"
   }))))) : /* @__PURE__ */ React18.createElement("div", {
     className: "text-center text-gray-400 py-12"
-  }, "Enter a search term to find images")))));
+  }, "Enter a search term to find images")))), showJsonModal && /* @__PURE__ */ React18.createElement("div", {
+    className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
+  }, /* @__PURE__ */ React18.createElement("div", {
+    className: "bg-gray-800 rounded-lg p-6 w-full max-w-2xl max-h-[80vh] overflow-auto"
+  }, /* @__PURE__ */ React18.createElement("h2", {
+    className: "text-white text-xl font-semibold mb-4"
+  }, "Load JSON Data"), /* @__PURE__ */ React18.createElement("p", {
+    className: "text-gray-300 mb-4"
+  }, 'Paste your JSON template data below and click "Load" to import it into the canvas.'), /* @__PURE__ */ React18.createElement("textarea", {
+    value: jsonInputText,
+    onChange: (e) => setJsonInputText(e.target.value),
+    className: "w-full h-64 p-3 bg-gray-700 text-white border border-gray-600 rounded font-mono text-sm resize-none",
+    placeholder: '{"width": 800, "height": 600, "pages": [...]}'
+  }), /* @__PURE__ */ React18.createElement("div", {
+    className: "flex justify-end space-x-3 mt-4"
+  }, /* @__PURE__ */ React18.createElement("button", {
+    onClick: () => {
+      setShowJsonModal(false);
+      setJsonInputText("");
+    },
+    className: "px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700"
+  }, "Cancel"), /* @__PURE__ */ React18.createElement("button", {
+    onClick: handleImportJSONData,
+    className: "px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
+  }, "Load JSON")))));
 });
 var CanvasEditor_default = CanvasEditor;
 // src/lib/index.ts
@@ -3794,6 +3935,7 @@ export {
   setUnsplashAccessKey,
   replaceUserInputs,
   initWordPressCanvasEditor,
+  importFromJSONData,
   importFromJSON,
   getUnsplashAccessKey,
   findRequiredInputs,

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;AAyC1B,OAAO,EAEL,YAAY,EAKb,MAAM,SAAS,CAAC;AAgCjB,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;CAC/B;AAED,QAAA,MAAM,YAAY;UAAuC,MAAM;aAAW,MAAM;yCA29B9E,CAAC;AAEH,eAAe,YAAY,CAAC"}
+{"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;CAC/B;AAED,QAAA,MAAM,YAAY;UAAuC,MAAM;aAAW,MAAM;yCA6nC9E,CAAC;AAEH,eAAe,YAAY,CAAC"}

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

@@ -13,7 +13,8 @@ export interface CanvasEditorRef {
 }
 export { default as CanvasEditor } from '../CanvasEditor';
 export * from '../types';
-export { exportToPNG, exportToJPG, exportToJSON, importFromJSON, findRequiredInputs, replaceUserInputs, convertTemplateToCanvasDesign, canvasToBlob, } from '../utils/exportImportUtils';
+export { exportToPNG, exportToJPG, exportToJSON, importFromJSON, importFromJSONData, // New: Import JSON data directly (no file needed)
+findRequiredInputs, replaceUserInputs, convertTemplateToCanvasDesign, canvasToBlob, } from '../utils/exportImportUtils';
 export * from '../elements';
 export { FONT_FAMILIES, DEFAULT_COLORS, CANVAS_PRESETS } from '../constants';
 export { setUnsplashAccessKey, getUnsplashAccessKey } from '../config';

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;CAC/B;AAGD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAG1D,cAAc,UAAU,CAAC;AAGzB,OAAO,EACL,WAAW,EACX,WAAW,EACX,YAAY,EACZ,cAAc,EACd,kBAAkB,EAClB,iBAAiB,EACjB,6BAA6B,EAC7B,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;CAC/B;AAGD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAG1D,cAAc,UAAU,CAAC;AAGzB,OAAO,EACL,WAAW,EACX,WAAW,EACX,YAAY,EACZ,cAAc,EACd,kBAAkB,EAAE,kDAAkD;AACtE,kBAAkB,EAClB,iBAAiB,EACjB,6BAA6B,EAC7B,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/panels/ExportPanel.d.ts

@@ -4,6 +4,7 @@ interface ExportPanelProps {
     onExportToJPG: () => void;
     onExportToJSON: () => void;
     onImportJSON: () => void;
+    onLoadJSON?: () => void;
 }
 declare const ExportPanel: React.FC<ExportPanelProps>;
 export default ExportPanel;

package/dist/types/panels/ExportPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExportPanel.d.ts","sourceRoot":"","sources":["../../../src/panels/ExportPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,gBAAgB;IACxB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqC3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ExportPanel.d.ts","sourceRoot":"","sources":["../../../src/panels/ExportPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,gBAAgB;IACxB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA8C3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/types/utils/exportImportUtils.d.ts

@@ -31,5 +31,101 @@ export declare const canvasToBlob: (stage: Konva.Stage, format?: "png" | "jpg",
     quality?: number;
     pixelRatio?: number;
 }) => Promise<Blob>;
+/**
+ * Import a canvas design from JSON data directly (without file reading)
+ *
+ * This function allows programmatic import of template data from any source
+ * (API calls, database, hardcoded templates, etc.) and processes it through
+ * the same pipeline as file-based imports.
+ *
+ * @param jsonData - The raw JSON template data to import
+ * @param onLoad - Callback function called when the design is successfully loaded
+ * @param onError - Callback function called when an error occurs during import
+ * @param onInputsRequired - Optional callback for handling user input collection
+ *
+ * @example
+ * ```typescript
+ * // Basic usage - no user inputs required
+ * importFromJSONData(
+ *   {
+ *     width: 800,
+ *     height: 600,
+ *     pages: [{
+ *       id: "1",
+ *       name: "Page 1",
+ *       elements: [
+ *         {
+ *           type: "text",
+ *           text: "Hello World",
+ *           x: 100,
+ *           y: 100,
+ *           fontSize: 24
+ *         }
+ *       ],
+ *       background: "white"
+ *     }]
+ *   },
+ *   (design) => {
+ *     console.log('Design loaded:', design);
+ *     // Use the design in CanvasEditor
+ *   },
+ *   (error) => {
+ *     console.error('Import failed:', error);
+ *   }
+ * );
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // With user inputs collection
+ * importFromJSONData(
+ *   templateData,
+ *   (design) => {
+ *     // Design loaded with user inputs applied
+ *     setDesign(design);
+ *   },
+ *   (error) => {
+ *     alert('Import failed: ' + error);
+ *   },
+ *   (inputs, onComplete) => {
+ *     // Show custom input modal
+ *     showInputModal(inputs, (values) => {
+ *       onComplete(values);
+ *     });
+ *   }
+ * );
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Import from API response
+ * async function loadTemplateFromAPI(templateId: string) {
+ *   try {
+ *     const response = await fetch(`/api/templates/${templateId}`);
+ *     const templateData = await response.json();
+ *
+ *     importFromJSONData(
+ *       templateData,
+ *       (design) => {
+ *         // Template loaded successfully
+ *         canvasEditorRef.current?.setDesign(design);
+ *       },
+ *       (error) => {
+ *         alert('Failed to load template: ' + error);
+ *       }
+ *     );
+ *   } catch (error) {
+ *     console.error('API error:', error);
+ *   }
+ * }
+ * ```
+ *
+ * @since 1.0.0
+ * @see importFromJSON - File-based version of this function
+ * @see convertTemplateToCanvasDesign - Template conversion logic
+ * @see findRequiredInputs - User input detection
+ * @see replaceUserInputs - Input replacement logic
+ */
+export declare const importFromJSONData: (jsonData: any, onLoad: (design: CanvasDesign) => void, onError: (message: string) => void, onInputsRequired?: (inputs: UserInputItem[], onComplete: (values: Record<string, any>) => void) => void) => void;
 export declare const importFromJSON: (event: React.ChangeEvent<HTMLInputElement>, onLoad: (design: CanvasDesign) => void, onError: (message: string) => void, onInputsRequired?: (inputs: UserInputItem[], onComplete: (values: Record<string, any>) => void) => void) => void;
 //# sourceMappingURL=exportImportUtils.d.ts.map

package/dist/types/utils/exportImportUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"exportImportUtils.d.ts","sourceRoot":"","sources":["../../../src/utils/exportImportUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE1D,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;GAMG;AACH,wBAAgB,6BAA6B,CAAC,IAAI,EAAE,GAAG,GAAG,YAAY,CAkGrE;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,GAAG,aAAa,EAAE,CAsHxE;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAC7B,MAAM,EAAE,YAAY,EACpB,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GACrC,YAAY,CAuNd;AAGD,eAAO,MAAM,WAAW,GAAI,OAAO,KAAK,CAAC,KAAK,EAAE,QAAQ,YAAY,SAanE,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,KAAK,CAAC,KAAK,EAAE,QAAQ,YAAY,SAiBnE,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,QAAQ,YAAY,SAWhD,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,GACrB,OAAO,KAAK,CAAC,KAAK,EAClB,SAAQ,KAAK,GAAG,KAAa,EAC7B,UAAU;IACN,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB,KACF,OAAO,CAAC,IAAI,CAsCd,CAAC;AAEF,eAAO,MAAM,cAAc,GACvB,OAAO,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAC1C,QAAQ,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,EACtC,SAAS,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,EAClC,mBAAmB,CAAC,MAAM,EAAE,aAAa,EAAE,EAAE,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,KAAK,IAAI,SA0C1G,CAAC"}
+{"version":3,"file":"exportImportUtils.d.ts","sourceRoot":"","sources":["../../../src/utils/exportImportUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE1D,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;GAMG;AACH,wBAAgB,6BAA6B,CAAC,IAAI,EAAE,GAAG,GAAG,YAAY,CAuHrE;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,GAAG,aAAa,EAAE,CAsHxE;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAC7B,MAAM,EAAE,YAAY,EACpB,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GACrC,YAAY,CA6Nd;AAGD,eAAO,MAAM,WAAW,GAAI,OAAO,KAAK,CAAC,KAAK,EAAE,QAAQ,YAAY,SAanE,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,KAAK,CAAC,KAAK,EAAE,QAAQ,YAAY,SAiBnE,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,QAAQ,YAAY,SAWhD,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,GACrB,OAAO,KAAK,CAAC,KAAK,EAClB,SAAQ,KAAK,GAAG,KAAa,EAC7B,UAAU;IACN,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB,KACF,OAAO,CAAC,IAAI,CAsCd,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8FG;AACH,eAAO,MAAM,kBAAkB,GAC3B,UAAU,GAAG,EACb,QAAQ,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,EACtC,SAAS,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,EAClC,mBAAmB,CAAC,MAAM,EAAE,aAAa,EAAE,EAAE,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,KAAK,IAAI,SAuB1G,CAAC;AAEF,eAAO,MAAM,cAAc,GACvB,OAAO,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAC1C,QAAQ,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,EACtC,SAAS,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,EAClC,mBAAmB,CAAC,MAAM,EAAE,aAAa,EAAE,EAAE,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,KAAK,IAAI,SA0C1G,CAAC"}

package/package.json

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