@deckedout/visual-editor 1.0.2 → 1.0.5

package/dist/index.mjs

@@ -1,196 +1,4 @@
 "use client"
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __esm = (fn, res) => function __init() {
-  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
-};
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/utils/editorUtils.ts
-var editorUtils_exports = {};
-__export(editorUtils_exports, {
-  bringToFront: () => bringToFront,
-  checkOverlap: () => checkOverlap,
-  clamp: () => clamp,
-  cloneElement: () => cloneElement,
-  constrainToCanvas: () => constrainToCanvas,
-  createElement: () => createElement,
-  degToRad: () => degToRad,
-  distance: () => distance,
-  duplicateElement: () => duplicateElement,
-  exportToJSON: () => exportToJSON,
-  generateElementId: () => generateElementId,
-  getElementCenter: () => getElementCenter,
-  getMaxZIndex: () => getMaxZIndex,
-  getRotatedBoundingBox: () => getRotatedBoundingBox,
-  importFromJSON: () => importFromJSON,
-  isValidCanvasExport: () => isValidCanvasExport,
-  isValidElement: () => isValidElement,
-  pointInRect: () => pointInRect,
-  radToDeg: () => radToDeg,
-  sendToBack: () => sendToBack,
-  snapPositionToGrid: () => snapPositionToGrid,
-  snapToGrid: () => snapToGrid,
-  sortByZIndex: () => sortByZIndex
-});
-import { v4 as uuidv4 } from "uuid";
-var generateElementId, createElement, cloneElement, duplicateElement, sortByZIndex, getMaxZIndex, bringToFront, sendToBack, checkOverlap, pointInRect, snapToGrid, snapPositionToGrid, clamp, constrainToCanvas, getRotatedBoundingBox, exportToJSON, importFromJSON, getElementCenter, distance, degToRad, radToDeg, isValidElement, isValidCanvasExport;
-var init_editorUtils = __esm({
-  "src/utils/editorUtils.ts"() {
-    "use strict";
-    generateElementId = () => {
-      return `element-${uuidv4()}`;
-    };
-    createElement = (type, props, options) => {
-      return {
-        id: generateElementId(),
-        type,
-        position: options?.position || { x: 0, y: 0 },
-        size: options?.size || { width: 100, height: 100 },
-        rotation: options?.rotation || 0,
-        opacity: options?.opacity ?? 1,
-        zIndex: options?.zIndex || 0,
-        visible: options?.visible ?? true,
-        locked: options?.locked ?? false,
-        displayName: options?.displayName,
-        props
-      };
-    };
-    cloneElement = (element) => {
-      return {
-        ...element,
-        id: generateElementId(),
-        // New ID for the clone
-        props: { ...element.props },
-        position: { ...element.position },
-        size: { ...element.size }
-      };
-    };
-    duplicateElement = (element, offset = { x: 20, y: 20 }) => {
-      const cloned = cloneElement(element);
-      return {
-        ...cloned,
-        position: {
-          x: element.position.x + offset.x,
-          y: element.position.y + offset.y
-        },
-        zIndex: element.zIndex + 1
-        // Place on top
-      };
-    };
-    sortByZIndex = (elements) => {
-      return [...elements].sort((a, b) => a.zIndex - b.zIndex);
-    };
-    getMaxZIndex = (elements) => {
-      if (elements.length === 0) return 0;
-      return Math.max(...elements.map((el) => el.zIndex));
-    };
-    bringToFront = (elements, elementId) => {
-      const maxZ = getMaxZIndex(elements);
-      return elements.map((el) => el.id === elementId ? { ...el, zIndex: maxZ + 1 } : el);
-    };
-    sendToBack = (elements, elementId) => {
-      const minZ = Math.min(...elements.map((el) => el.zIndex));
-      return elements.map((el) => el.id === elementId ? { ...el, zIndex: minZ - 1 } : el);
-    };
-    checkOverlap = (rect1, rect2) => {
-      return !(rect1.x + rect1.width < rect2.x || rect2.x + rect2.width < rect1.x || rect1.y + rect1.height < rect2.y || rect2.y + rect2.height < rect1.y);
-    };
-    pointInRect = (point, rect) => {
-      return point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
-    };
-    snapToGrid = (value, gridSize) => {
-      return Math.round(value / gridSize) * gridSize;
-    };
-    snapPositionToGrid = (position, gridSize) => {
-      return {
-        x: snapToGrid(position.x, gridSize),
-        y: snapToGrid(position.y, gridSize)
-      };
-    };
-    clamp = (value, min, max) => {
-      return Math.min(Math.max(value, min), max);
-    };
-    constrainToCanvas = (position, size, canvasSize) => {
-      return {
-        x: clamp(position.x, 0, canvasSize.width - size.width),
-        y: clamp(position.y, 0, canvasSize.height - size.height)
-      };
-    };
-    getRotatedBoundingBox = (x, y, width, height, rotation) => {
-      const rad = rotation * Math.PI / 180;
-      const cos = Math.abs(Math.cos(rad));
-      const sin = Math.abs(Math.sin(rad));
-      const newWidth = width * cos + height * sin;
-      const newHeight = width * sin + height * cos;
-      return {
-        x: x - (newWidth - width) / 2,
-        y: y - (newHeight - height) / 2,
-        width: newWidth,
-        height: newHeight
-      };
-    };
-    exportToJSON = (data) => {
-      return JSON.stringify(data, null, 2);
-    };
-    importFromJSON = (json) => {
-      try {
-        const data = JSON.parse(json);
-        if (!data.width || !data.height || !Array.isArray(data.elements)) {
-          throw new Error("Invalid canvas data structure");
-        }
-        const normalizedElements = data.elements.map((element) => ({
-          ...element,
-          visible: element.visible ?? true,
-          locked: element.locked ?? false
-        }));
-        return {
-          ...data,
-          elements: normalizedElements
-        };
-      } catch (error) {
-        throw new Error(`Failed to parse canvas data: ${error.message}`);
-      }
-    };
-    getElementCenter = (element) => {
-      return {
-        x: element.position.x + element.size.width / 2,
-        y: element.position.y + element.size.height / 2
-      };
-    };
-    distance = (p1, p2) => {
-      const dx = p2.x - p1.x;
-      const dy = p2.y - p1.y;
-      return Math.sqrt(dx * dx + dy * dy);
-    };
-    degToRad = (degrees) => {
-      return degrees * Math.PI / 180;
-    };
-    radToDeg = (radians) => {
-      return radians * 180 / Math.PI;
-    };
-    isValidElement = (element) => {
-      return element && typeof element.id === "string" && typeof element.type === "string" && element.position && typeof element.position.x === "number" && typeof element.position.y === "number" && element.size && typeof element.size.width === "number" && typeof element.size.height === "number" && typeof element.rotation === "number" && typeof element.zIndex === "number" && element.props !== void 0;
-    };
-    isValidCanvasExport = (data) => {
-      return data && typeof data.width === "number" && typeof data.height === "number" && Array.isArray(data.elements) && data.elements.every(isValidElement);
-    };
-  }
-});
 
 // src/core/VisualEditor.tsx
 import { useEffect, useCallback as useCallback2, useRef } from "react";
@@ -198,6 +6,148 @@ import { Stage, Layer } from "react-konva";
 
 // src/core/useEditorState.ts
 import { useReducer, useCallback, useMemo } from "react";
+
+// src/utils/editorUtils.ts
+import { v4 as uuidv4 } from "uuid";
+var generateElementId = () => {
+  return `element-${uuidv4()}`;
+};
+var createElement = (type, props, options) => {
+  return {
+    id: generateElementId(),
+    type,
+    position: options?.position || { x: 0, y: 0 },
+    size: options?.size || { width: 100, height: 100 },
+    rotation: options?.rotation || 0,
+    opacity: options?.opacity ?? 1,
+    zIndex: options?.zIndex || 0,
+    visible: options?.visible ?? true,
+    locked: options?.locked ?? false,
+    displayName: options?.displayName,
+    props
+  };
+};
+var cloneElement = (element) => {
+  return {
+    ...element,
+    id: generateElementId(),
+    // New ID for the clone
+    props: { ...element.props },
+    position: { ...element.position },
+    size: { ...element.size }
+  };
+};
+var duplicateElement = (element, offset = { x: 20, y: 20 }) => {
+  const cloned = cloneElement(element);
+  return {
+    ...cloned,
+    position: {
+      x: element.position.x + offset.x,
+      y: element.position.y + offset.y
+    },
+    zIndex: element.zIndex + 1
+    // Place on top
+  };
+};
+var sortByZIndex = (elements) => {
+  return [...elements].sort((a, b) => a.zIndex - b.zIndex);
+};
+var getMaxZIndex = (elements) => {
+  if (elements.length === 0) return 0;
+  return Math.max(...elements.map((el) => el.zIndex));
+};
+var bringToFront = (elements, elementId) => {
+  const maxZ = getMaxZIndex(elements);
+  return elements.map((el) => el.id === elementId ? { ...el, zIndex: maxZ + 1 } : el);
+};
+var sendToBack = (elements, elementId) => {
+  const minZ = Math.min(...elements.map((el) => el.zIndex));
+  return elements.map((el) => el.id === elementId ? { ...el, zIndex: minZ - 1 } : el);
+};
+var checkOverlap = (rect1, rect2) => {
+  return !(rect1.x + rect1.width < rect2.x || rect2.x + rect2.width < rect1.x || rect1.y + rect1.height < rect2.y || rect2.y + rect2.height < rect1.y);
+};
+var pointInRect = (point, rect) => {
+  return point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
+};
+var snapToGrid = (value, gridSize) => {
+  return Math.round(value / gridSize) * gridSize;
+};
+var snapPositionToGrid = (position, gridSize) => {
+  return {
+    x: snapToGrid(position.x, gridSize),
+    y: snapToGrid(position.y, gridSize)
+  };
+};
+var clamp = (value, min, max) => {
+  return Math.min(Math.max(value, min), max);
+};
+var constrainToCanvas = (position, size, canvasSize) => {
+  return {
+    x: clamp(position.x, 0, canvasSize.width - size.width),
+    y: clamp(position.y, 0, canvasSize.height - size.height)
+  };
+};
+var getRotatedBoundingBox = (x, y, width, height, rotation) => {
+  const rad = rotation * Math.PI / 180;
+  const cos = Math.abs(Math.cos(rad));
+  const sin = Math.abs(Math.sin(rad));
+  const newWidth = width * cos + height * sin;
+  const newHeight = width * sin + height * cos;
+  return {
+    x: x - (newWidth - width) / 2,
+    y: y - (newHeight - height) / 2,
+    width: newWidth,
+    height: newHeight
+  };
+};
+var exportToJSON = (data) => {
+  return JSON.stringify(data, null, 2);
+};
+var importFromJSON = (json) => {
+  try {
+    const data = JSON.parse(json);
+    if (!data.width || !data.height || !Array.isArray(data.elements)) {
+      throw new Error("Invalid canvas data structure");
+    }
+    const normalizedElements = data.elements.map((element) => ({
+      ...element,
+      visible: element.visible ?? true,
+      locked: element.locked ?? false
+    }));
+    return {
+      ...data,
+      elements: normalizedElements
+    };
+  } catch (error) {
+    throw new Error(`Failed to parse canvas data: ${error.message}`);
+  }
+};
+var getElementCenter = (element) => {
+  return {
+    x: element.position.x + element.size.width / 2,
+    y: element.position.y + element.size.height / 2
+  };
+};
+var distance = (p1, p2) => {
+  const dx = p2.x - p1.x;
+  const dy = p2.y - p1.y;
+  return Math.sqrt(dx * dx + dy * dy);
+};
+var degToRad = (degrees) => {
+  return degrees * Math.PI / 180;
+};
+var radToDeg = (radians) => {
+  return radians * 180 / Math.PI;
+};
+var isValidElement = (element) => {
+  return element && typeof element.id === "string" && typeof element.type === "string" && element.position && typeof element.position.x === "number" && typeof element.position.y === "number" && element.size && typeof element.size.width === "number" && typeof element.size.height === "number" && typeof element.rotation === "number" && typeof element.zIndex === "number" && element.props !== void 0;
+};
+var isValidCanvasExport = (data) => {
+  return data && typeof data.width === "number" && typeof data.height === "number" && Array.isArray(data.elements) && data.elements.every(isValidElement);
+};
+
+// src/core/useEditorState.ts
 var createInitialState = (mode) => ({
   elements: [],
   selectedElementId: null,
@@ -471,8 +421,7 @@ var useEditorState = (initialMode = null) => {
     (id = null, offset = { x: 20, y: 20 }) => {
       const elementToDuplicate = id ? state.elements.find((el) => el.id === id) : getSelectedElement();
       if (!elementToDuplicate) return;
-      const { duplicateElement: duplicateUtil } = (init_editorUtils(), __toCommonJS(editorUtils_exports));
-      const duplicated = duplicateUtil(elementToDuplicate, offset);
+      const duplicated = duplicateElement(elementToDuplicate, offset);
       addElement(duplicated);
     },
     [state.elements, getSelectedElement, addElement]
@@ -480,10 +429,9 @@ var useEditorState = (initialMode = null) => {
   const pasteElement = useCallback(
     (copiedElement, offset = { x: 20, y: 20 }) => {
       if (!copiedElement) return;
-      const { generateElementId: generateElementId2 } = (init_editorUtils(), __toCommonJS(editorUtils_exports));
       const pasted = {
         ...copiedElement,
-        id: generateElementId2(),
+        id: generateElementId(),
         props: { ...copiedElement.props },
         position: {
           x: copiedElement.position.x + offset.x,
@@ -2034,7 +1982,7 @@ var Inspector = ({
 function renderField(field, props, editingValues, onChange, onColorChange, mode) {
   const value = editingValues[field.name] ?? props[field.name] ?? field.defaultValue;
   switch (field.type) {
-    case "custom":
+    case "custom": {
       if (!field.customRenderer) {
         console.error(`Custom field "${field.name}" has no customRenderer defined`);
         return null;
@@ -2050,7 +1998,8 @@ function renderField(field, props, editingValues, onChange, onColorChange, mode)
           mode
         }
       ) }, field.name);
-    case "string":
+    }
+    case "string": {
       const isMultiline = field.name === "content" || field.name === "text";
       return /* @__PURE__ */ jsxs5("div", { children: [
         /* @__PURE__ */ jsx11(Label, { htmlFor: field.name, className: "text-xs", children: field.label }),
@@ -2074,7 +2023,8 @@ function renderField(field, props, editingValues, onChange, onColorChange, mode)
         ),
         field.description && /* @__PURE__ */ jsx11("p", { className: "text-xs text-muted-foreground mt-1", children: field.description })
       ] }, field.name);
-    case "number":
+    }
+    case "number": {
       return /* @__PURE__ */ jsxs5("div", { children: [
         /* @__PURE__ */ jsx11(Label, { htmlFor: field.name, className: "text-xs", children: field.label }),
         /* @__PURE__ */ jsx11(
@@ -2092,7 +2042,8 @@ function renderField(field, props, editingValues, onChange, onColorChange, mode)
         ),
         field.description && /* @__PURE__ */ jsx11("p", { className: "text-xs text-muted-foreground mt-1", children: field.description })
       ] }, field.name);
-    case "color":
+    }
+    case "color": {
       return /* @__PURE__ */ jsxs5("div", { children: [
         /* @__PURE__ */ jsx11(Label, { htmlFor: field.name, className: "text-xs", children: field.label }),
         /* @__PURE__ */ jsx11(
@@ -2107,7 +2058,8 @@ function renderField(field, props, editingValues, onChange, onColorChange, mode)
         ),
         field.description && /* @__PURE__ */ jsx11("p", { className: "text-xs text-muted-foreground mt-1", children: field.description })
       ] }, field.name);
-    case "select":
+    }
+    case "select": {
       return /* @__PURE__ */ jsxs5("div", { children: [
         /* @__PURE__ */ jsx11(Label, { htmlFor: field.name, className: "text-xs", children: field.label }),
         /* @__PURE__ */ jsxs5(
@@ -2123,7 +2075,8 @@ function renderField(field, props, editingValues, onChange, onColorChange, mode)
         ),
         field.description && /* @__PURE__ */ jsx11("p", { className: "text-xs text-muted-foreground mt-1", children: field.description })
       ] }, field.name);
-    case "boolean":
+    }
+    case "boolean": {
       return /* @__PURE__ */ jsxs5("div", { className: "flex items-start space-x-2", children: [
         /* @__PURE__ */ jsx11(
           Checkbox,
@@ -2139,7 +2092,8 @@ function renderField(field, props, editingValues, onChange, onColorChange, mode)
           field.description && /* @__PURE__ */ jsx11("p", { className: "text-xs text-muted-foreground", children: field.description })
         ] })
       ] }, field.name);
-    case "slider":
+    }
+    case "slider": {
       return /* @__PURE__ */ jsxs5("div", { children: [
         /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between mb-2", children: [
           /* @__PURE__ */ jsx11(Label, { className: "text-xs", children: field.label }),
@@ -2158,7 +2112,8 @@ function renderField(field, props, editingValues, onChange, onColorChange, mode)
         ),
         field.description && /* @__PURE__ */ jsx11("p", { className: "text-xs text-muted-foreground mt-1", children: field.description })
       ] }, field.name);
-    case "image":
+    }
+    case "image": {
       return /* @__PURE__ */ jsxs5("div", { children: [
         /* @__PURE__ */ jsx11(Label, { htmlFor: field.name, className: "text-xs", children: field.label }),
         /* @__PURE__ */ jsx11(
@@ -2173,6 +2128,7 @@ function renderField(field, props, editingValues, onChange, onColorChange, mode)
         ),
         field.description && /* @__PURE__ */ jsx11("p", { className: "text-xs text-muted-foreground mt-1", children: field.description })
       ] }, field.name);
+    }
     default:
       return null;
   }
@@ -3527,11 +3483,7 @@ var Canvas = ({
   );
 };
 
-// src/components/VisualEditorWorkspace.tsx
-init_editorUtils();
-
 // src/components/Toolbar.tsx
-init_editorUtils();
 import { Plus as Plus2 } from "lucide-react";
 import { Fragment as Fragment6, jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
 var Toolbar = ({
@@ -3832,7 +3784,7 @@ var VisualEditorWorkspace = ({
           readonly,
           enableSnapGuides: snapGuidesEnabled,
           enablePanZoom,
-          backgroundImageUrl: backgroundImage && mode?.context?.imageUrls ? mode.context.imageUrls.get(backgroundImage) : void 0,
+          backgroundImageUrl: backgroundImage && mode?.context?.imageUrls ? mode.context.imageUrls.get(backgroundImage) : backgroundImageUrl,
           hideElements,
           onSelectElement: (id) => api.selectElement(id),
           onTransformElement: (id, updates) => api.updateElement(id, updates)
@@ -3945,9 +3897,6 @@ var AssetPicker = ({
     /* @__PURE__ */ jsx27(ScrollArea, { className: "flex-1", children: filteredAssets.length > 0 ? /* @__PURE__ */ jsx27("div", { className: "grid grid-cols-3 gap-2 p-3", children: filteredAssets.map((asset) => assetRenderer(asset)) }) : /* @__PURE__ */ jsx27("div", { className: "flex items-center justify-center h-32 text-sm text-muted-foreground", children: searchQuery ? "No assets found" : "No assets available" }) })
   ] });
 };
-
-// src/index.ts
-init_editorUtils();
 export {
   AssetPicker,
   ElementRegistry,