@deckedout/visual-editor 1.0.0

package/dist/index.mjs

@@ -0,0 +1,3992 @@
+"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";
+import { Stage, Layer } from "react-konva";
+
+// src/core/useEditorState.ts
+import { useReducer, useCallback, useMemo } from "react";
+var createInitialState = (mode) => ({
+  elements: [],
+  selectedElementId: null,
+  canvasSize: mode?.defaultCanvasSize || { width: 800, height: 600 },
+  zoom: 1,
+  pan: { x: 0, y: 0 },
+  mode,
+  history: {
+    past: [],
+    future: []
+  }
+});
+var editorReducer = (state, action) => {
+  switch (action.type) {
+    case "ADD_ELEMENT": {
+      const normalizedElement = {
+        ...action.element,
+        visible: action.element.visible ?? true,
+        locked: action.element.locked ?? false
+      };
+      const newElements = [...state.elements, normalizedElement];
+      return {
+        ...state,
+        elements: newElements,
+        selectedElementId: normalizedElement.id,
+        history: {
+          past: [...state.history.past, state.elements],
+          future: []
+        }
+      };
+    }
+    case "UPDATE_ELEMENT": {
+      const newElements = state.elements.map(
+        (el) => el.id === action.id ? { ...el, ...action.updates } : el
+      );
+      return {
+        ...state,
+        elements: newElements,
+        history: {
+          past: [...state.history.past, state.elements],
+          future: []
+        }
+      };
+    }
+    case "REMOVE_ELEMENT": {
+      const newElements = state.elements.filter((el) => el.id !== action.id);
+      return {
+        ...state,
+        elements: newElements,
+        selectedElementId: state.selectedElementId === action.id ? null : state.selectedElementId,
+        history: {
+          past: [...state.history.past, state.elements],
+          future: []
+        }
+      };
+    }
+    case "SELECT_ELEMENT":
+      return {
+        ...state,
+        selectedElementId: action.id
+      };
+    case "SET_ELEMENTS":
+      return {
+        ...state,
+        elements: action.elements,
+        history: {
+          past: [...state.history.past, state.elements],
+          future: []
+        }
+      };
+    case "LOAD_ELEMENTS":
+      return {
+        ...state,
+        elements: action.elements.map((el) => ({
+          ...el,
+          visible: el.visible ?? true,
+          locked: el.locked ?? false
+        }))
+      };
+    case "REORDER_ELEMENT": {
+      const currentIndex = state.elements.findIndex((el) => el.id === action.elementId);
+      if (currentIndex === -1 || currentIndex === action.newIndex) return state;
+      const newElements = [...state.elements];
+      const [element] = newElements.splice(currentIndex, 1);
+      newElements.splice(action.newIndex, 0, element);
+      newElements.forEach((el, index) => {
+        el.zIndex = index;
+      });
+      return {
+        ...state,
+        elements: newElements,
+        history: {
+          past: [...state.history.past, state.elements],
+          future: []
+        }
+      };
+    }
+    case "SET_CANVAS_SIZE":
+      return {
+        ...state,
+        canvasSize: {
+          width: action.width,
+          height: action.height
+        }
+      };
+    case "SET_ZOOM":
+      return {
+        ...state,
+        zoom: action.zoom
+      };
+    case "SET_PAN":
+      return {
+        ...state,
+        pan: {
+          x: action.x,
+          y: action.y
+        }
+      };
+    case "SET_MODE":
+      return {
+        ...state,
+        mode: action.mode,
+        canvasSize: action.mode.defaultCanvasSize
+      };
+    case "CLEAR":
+      return {
+        ...state,
+        elements: [],
+        selectedElementId: null,
+        history: {
+          past: [...state.history.past, state.elements],
+          future: []
+        }
+      };
+    case "UNDO": {
+      if (state.history.past.length === 0) return state;
+      const previous = state.history.past[state.history.past.length - 1];
+      const newPast = state.history.past.slice(0, -1);
+      return {
+        ...state,
+        elements: previous,
+        history: {
+          past: newPast,
+          future: [state.elements, ...state.history.future]
+        }
+      };
+    }
+    case "REDO": {
+      if (state.history.future.length === 0) return state;
+      const next = state.history.future[0];
+      const newFuture = state.history.future.slice(1);
+      return {
+        ...state,
+        elements: next,
+        history: {
+          past: [...state.history.past, state.elements],
+          future: newFuture
+        }
+      };
+    }
+    default:
+      return state;
+  }
+};
+var useEditorState = (initialMode = null) => {
+  const [state, dispatch] = useReducer(editorReducer, createInitialState(initialMode));
+  const addElement = useCallback((element) => {
+    dispatch({ type: "ADD_ELEMENT", element });
+  }, []);
+  const updateElement = useCallback((id, updates) => {
+    dispatch({ type: "UPDATE_ELEMENT", id, updates });
+  }, []);
+  const removeElement = useCallback((id) => {
+    dispatch({ type: "REMOVE_ELEMENT", id });
+  }, []);
+  const selectElement = useCallback((id) => {
+    dispatch({ type: "SELECT_ELEMENT", id });
+  }, []);
+  const getSelectedElement = useCallback(() => {
+    if (!state.selectedElementId) return null;
+    return state.elements.find((el) => el.id === state.selectedElementId) || null;
+  }, [state.selectedElementId, state.elements]);
+  const getAllElements = useCallback(() => {
+    return state.elements;
+  }, [state.elements]);
+  const moveElement = useCallback(
+    (id, deltaX, deltaY) => {
+      const element = state.elements.find((el) => el.id === id);
+      if (!element) return;
+      updateElement(id, {
+        position: {
+          x: element.position.x + deltaX,
+          y: element.position.y + deltaY
+        }
+      });
+    },
+    [state.elements, updateElement]
+  );
+  const rotateElement = useCallback(
+    (id, angle) => {
+      updateElement(id, { rotation: angle });
+    },
+    [updateElement]
+  );
+  const resizeElement = useCallback(
+    (id, width, height) => {
+      updateElement(id, {
+        size: { width, height }
+      });
+    },
+    [updateElement]
+  );
+  const updateZIndex = useCallback(
+    (id, zIndex) => {
+      updateElement(id, { zIndex });
+    },
+    [updateElement]
+  );
+  const reorderElement = useCallback((id, newIndex) => {
+    dispatch({ type: "REORDER_ELEMENT", elementId: id, newIndex });
+  }, []);
+  const exportJSON = useCallback(() => {
+    return {
+      width: state.canvasSize.width,
+      height: state.canvasSize.height,
+      elements: state.elements,
+      metadata: {
+        version: "1.0.0",
+        mode: state.mode?.name,
+        created: (/* @__PURE__ */ new Date()).toISOString()
+      }
+    };
+  }, [state.canvasSize, state.elements, state.mode]);
+  const importJSON = useCallback((data) => {
+    dispatch({
+      type: "SET_CANVAS_SIZE",
+      width: data.width,
+      height: data.height
+    });
+    dispatch({ type: "SET_ELEMENTS", elements: data.elements });
+  }, []);
+  const clear = useCallback(() => {
+    dispatch({ type: "CLEAR" });
+  }, []);
+  const setCanvasSize = useCallback((width, height) => {
+    dispatch({ type: "SET_CANVAS_SIZE", width, height });
+  }, []);
+  const setMode = useCallback((mode) => {
+    dispatch({ type: "SET_MODE", mode });
+  }, []);
+  const undo = useCallback(() => {
+    dispatch({ type: "UNDO" });
+  }, []);
+  const redo = useCallback(() => {
+    dispatch({ type: "REDO" });
+  }, []);
+  const copyElement = useCallback(
+    (id = null) => {
+      const elementToCopy = id ? state.elements.find((el) => el.id === id) : getSelectedElement();
+      if (!elementToCopy) return null;
+      return {
+        ...elementToCopy,
+        props: { ...elementToCopy.props },
+        position: { ...elementToCopy.position },
+        size: { ...elementToCopy.size }
+      };
+    },
+    [state.elements, getSelectedElement]
+  );
+  const duplicateElement2 = useCallback(
+    (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);
+      addElement(duplicated);
+    },
+    [state.elements, getSelectedElement, addElement]
+  );
+  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(),
+        props: { ...copiedElement.props },
+        position: {
+          x: copiedElement.position.x + offset.x,
+          y: copiedElement.position.y + offset.y
+        },
+        size: { ...copiedElement.size },
+        zIndex: Math.max(...state.elements.map((el) => el.zIndex), 0) + 1
+      };
+      addElement(pasted);
+    },
+    [state.elements, addElement]
+  );
+  const clearHistory = useCallback(() => {
+    state.history.past = [];
+    state.history.future = [];
+  }, []);
+  const loadElements = useCallback((elements) => {
+    dispatch({ type: "LOAD_ELEMENTS", elements });
+  }, []);
+  const api = useMemo(
+    () => ({
+      addElement,
+      updateElement,
+      removeElement,
+      selectElement,
+      getSelectedElement,
+      getAllElements,
+      moveElement,
+      rotateElement,
+      resizeElement,
+      updateZIndex,
+      reorderElement,
+      exportJSON,
+      importJSON,
+      clear,
+      copyElement,
+      duplicateElement: duplicateElement2,
+      pasteElement,
+      clearHistory,
+      loadElements
+    }),
+    [
+      addElement,
+      updateElement,
+      removeElement,
+      selectElement,
+      getSelectedElement,
+      getAllElements,
+      moveElement,
+      rotateElement,
+      resizeElement,
+      updateZIndex,
+      reorderElement,
+      exportJSON,
+      importJSON,
+      clear,
+      copyElement,
+      duplicateElement2,
+      pasteElement,
+      clearHistory,
+      loadElements
+    ]
+  );
+  return {
+    state,
+    api,
+    // Additional helpers
+    setCanvasSize,
+    setMode,
+    undo,
+    redo,
+    canUndo: state.history.past.length > 0,
+    canRedo: state.history.future.length > 0
+  };
+};
+
+// src/core/ElementRegistry.ts
+import { useMemo as useMemo2 } from "react";
+var ElementRegistry = class {
+  constructor() {
+    this.renderers = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Register a new element renderer
+   */
+  register(renderer) {
+    if (this.renderers.has(renderer.type)) {
+      console.warn(
+        `Element renderer with type "${renderer.type}" is already registered. Skipping.`
+      );
+      return;
+    }
+    this.renderers.set(renderer.type, renderer);
+  }
+  /**
+   * Register multiple element renderers at once
+   */
+  registerMany(renderers) {
+    renderers.forEach((renderer) => this.register(renderer));
+  }
+  /**
+   * Get a renderer by type
+   */
+  get(type) {
+    return this.renderers.get(type);
+  }
+  /**
+   * Check if a renderer exists for a type
+   */
+  has(type) {
+    return this.renderers.has(type);
+  }
+  /**
+   * Get all registered renderers
+   */
+  getAll() {
+    return Array.from(this.renderers.values());
+  }
+  /**
+   * Get the internal renderers map
+   */
+  getMap() {
+    return this.renderers;
+  }
+  /**
+   * Get all registered types
+   */
+  getAllTypes() {
+    return Array.from(this.renderers.keys());
+  }
+  /**
+   * Unregister a renderer
+   */
+  unregister(type) {
+    return this.renderers.delete(type);
+  }
+  /**
+   * Clear all registered renderers
+   */
+  clear() {
+    this.renderers.clear();
+  }
+  /**
+   * Get the number of registered renderers
+   */
+  get size() {
+    return this.renderers.size;
+  }
+};
+var globalElementRegistry = new ElementRegistry();
+var useElementRegistry = (initialRenderers) => {
+  return useMemo2(() => {
+    const registry = new ElementRegistry();
+    if (initialRenderers) {
+      registry.registerMany(initialRenderers);
+    }
+    return registry;
+  }, [initialRenderers]);
+};
+
+// src/elements/TextElement.tsx
+import React from "react";
+import { Text } from "react-konva";
+import { Type } from "lucide-react";
+
+// src/utils/snapping.ts
+function getRotatedBounds(x, y, width, height, rotation) {
+  if (Math.abs(rotation) < 0.1 || Math.abs(rotation - 360) < 0.1) {
+    return {
+      left: x,
+      right: x + width,
+      top: y,
+      bottom: y + height,
+      centerX: x + width / 2,
+      centerY: y + height / 2
+    };
+  }
+  const rad = rotation * Math.PI / 180;
+  const cos = Math.cos(rad);
+  const sin = Math.sin(rad);
+  const corners = [
+    { x: 0, y: 0 },
+    // top-left (rotation origin)
+    { x: width, y: 0 },
+    // top-right
+    { x: width, y: height },
+    // bottom-right
+    { x: 0, y: height }
+    // bottom-left
+  ];
+  let minX = Infinity;
+  let maxX = -Infinity;
+  let minY = Infinity;
+  let maxY = -Infinity;
+  for (const corner of corners) {
+    const rotatedX = x + corner.x * cos - corner.y * sin;
+    const rotatedY = y + corner.x * sin + corner.y * cos;
+    minX = Math.min(minX, rotatedX);
+    maxX = Math.max(maxX, rotatedX);
+    minY = Math.min(minY, rotatedY);
+    maxY = Math.max(maxY, rotatedY);
+  }
+  const centerX = x + width / 2 * cos - height / 2 * sin;
+  const centerY = y + width / 2 * sin + height / 2 * cos;
+  return {
+    left: minX,
+    right: maxX,
+    top: minY,
+    bottom: maxY,
+    centerX,
+    centerY
+  };
+}
+function getSnappingPosition(draggedElement, x, y, allElements, options = {}) {
+  const { threshold = 5, snapToElements = true, snapToCanvas = true, canvasSize } = options;
+  let snappedX = x;
+  let snappedY = y;
+  const verticalGuides = [];
+  const horizontalGuides = [];
+  const draggedBounds = getRotatedBounds(
+    x,
+    y,
+    draggedElement.size.width,
+    draggedElement.size.height,
+    draggedElement.rotation
+  );
+  const draggedLeft = draggedBounds.left;
+  const draggedRight = draggedBounds.right;
+  const draggedTop = draggedBounds.top;
+  const draggedBottom = draggedBounds.bottom;
+  const draggedCenterX = draggedBounds.centerX;
+  const draggedCenterY = draggedBounds.centerY;
+  const isRotated = Math.abs(draggedElement.rotation) > 0.1 && Math.abs(draggedElement.rotation - 360) > 0.1;
+  let closestVerticalSnap = threshold;
+  let closestHorizontalSnap = threshold;
+  let verticalOffset = 0;
+  let horizontalOffset = 0;
+  if (snapToCanvas && canvasSize) {
+    if (Math.abs(draggedLeft) <= closestVerticalSnap) {
+      verticalOffset = -draggedLeft;
+      closestVerticalSnap = Math.abs(draggedLeft);
+      verticalGuides.push({ position: 0, orientation: "vertical", type: "canvas" });
+    }
+    if (Math.abs(draggedRight - canvasSize.width) <= closestVerticalSnap) {
+      verticalOffset = canvasSize.width - draggedRight;
+      closestVerticalSnap = Math.abs(draggedRight - canvasSize.width);
+      verticalGuides.push({
+        position: canvasSize.width,
+        orientation: "vertical",
+        type: "canvas"
+      });
+    }
+    if (Math.abs(draggedTop) <= closestHorizontalSnap) {
+      horizontalOffset = -draggedTop;
+      closestHorizontalSnap = Math.abs(draggedTop);
+      horizontalGuides.push({ position: 0, orientation: "horizontal", type: "canvas" });
+    }
+    if (Math.abs(draggedBottom - canvasSize.height) <= closestHorizontalSnap) {
+      horizontalOffset = canvasSize.height - draggedBottom;
+      closestHorizontalSnap = Math.abs(draggedBottom - canvasSize.height);
+      horizontalGuides.push({
+        position: canvasSize.height,
+        orientation: "horizontal",
+        type: "canvas"
+      });
+    }
+    const canvasCenterX = canvasSize.width / 2;
+    if (Math.abs(draggedCenterX - canvasCenterX) <= closestVerticalSnap) {
+      verticalOffset = canvasCenterX - draggedCenterX;
+      closestVerticalSnap = Math.abs(draggedCenterX - canvasCenterX);
+      verticalGuides.length = 0;
+      verticalGuides.push({
+        position: canvasCenterX,
+        orientation: "vertical",
+        type: "center"
+      });
+    }
+    const canvasCenterY = canvasSize.height / 2;
+    if (Math.abs(draggedCenterY - canvasCenterY) <= closestHorizontalSnap) {
+      horizontalOffset = canvasCenterY - draggedCenterY;
+      closestHorizontalSnap = Math.abs(draggedCenterY - canvasCenterY);
+      horizontalGuides.length = 0;
+      horizontalGuides.push({
+        position: canvasCenterY,
+        orientation: "horizontal",
+        type: "center"
+      });
+    }
+  }
+  if (snapToElements) {
+    for (const element of allElements) {
+      if (element.id === draggedElement.id) continue;
+      if (element.visible === false) continue;
+      const elementBounds = getRotatedBounds(
+        element.position.x,
+        element.position.y,
+        element.size.width,
+        element.size.height,
+        element.rotation
+      );
+      const elementLeft = elementBounds.left;
+      const elementRight = elementBounds.right;
+      const elementTop = elementBounds.top;
+      const elementBottom = elementBounds.bottom;
+      const elementCenterX = elementBounds.centerX;
+      const elementCenterY = elementBounds.centerY;
+      const isElementRotated = Math.abs(element.rotation) > 0.1 && Math.abs(element.rotation - 360) > 0.1;
+      const shouldSkipEdges = false;
+      if (!shouldSkipEdges) {
+        if (Math.abs(draggedLeft - elementLeft) <= closestVerticalSnap) {
+          verticalOffset = elementLeft - draggedLeft;
+          closestVerticalSnap = Math.abs(draggedLeft - elementLeft);
+          verticalGuides.length = 0;
+          verticalGuides.push({ position: elementLeft, orientation: "vertical", type: "edge" });
+        }
+        if (Math.abs(draggedRight - elementRight) <= closestVerticalSnap) {
+          verticalOffset = elementRight - draggedRight;
+          closestVerticalSnap = Math.abs(draggedRight - elementRight);
+          verticalGuides.length = 0;
+          verticalGuides.push({
+            position: elementRight,
+            orientation: "vertical",
+            type: "edge"
+          });
+        }
+        if (Math.abs(draggedLeft - elementRight) <= closestVerticalSnap) {
+          verticalOffset = elementRight - draggedLeft;
+          closestVerticalSnap = Math.abs(draggedLeft - elementRight);
+          verticalGuides.length = 0;
+          verticalGuides.push({
+            position: elementRight,
+            orientation: "vertical",
+            type: "edge"
+          });
+        }
+        if (Math.abs(draggedRight - elementLeft) <= closestVerticalSnap) {
+          verticalOffset = elementLeft - draggedRight;
+          closestVerticalSnap = Math.abs(draggedRight - elementLeft);
+          verticalGuides.length = 0;
+          verticalGuides.push({ position: elementLeft, orientation: "vertical", type: "edge" });
+        }
+      }
+      if (Math.abs(draggedCenterX - elementCenterX) <= closestVerticalSnap) {
+        verticalOffset = elementCenterX - draggedCenterX;
+        closestVerticalSnap = Math.abs(draggedCenterX - elementCenterX);
+        verticalGuides.length = 0;
+        verticalGuides.push({
+          position: elementCenterX,
+          orientation: "vertical",
+          type: "center"
+        });
+      }
+      if (!shouldSkipEdges) {
+        if (Math.abs(draggedTop - elementTop) <= closestHorizontalSnap) {
+          horizontalOffset = elementTop - draggedTop;
+          closestHorizontalSnap = Math.abs(draggedTop - elementTop);
+          horizontalGuides.length = 0;
+          horizontalGuides.push({
+            position: elementTop,
+            orientation: "horizontal",
+            type: "edge"
+          });
+        }
+        if (Math.abs(draggedBottom - elementBottom) <= closestHorizontalSnap) {
+          horizontalOffset = elementBottom - draggedBottom;
+          closestHorizontalSnap = Math.abs(draggedBottom - elementBottom);
+          horizontalGuides.length = 0;
+          horizontalGuides.push({
+            position: elementBottom,
+            orientation: "horizontal",
+            type: "edge"
+          });
+        }
+        if (Math.abs(draggedTop - elementBottom) <= closestHorizontalSnap) {
+          horizontalOffset = elementBottom - draggedTop;
+          closestHorizontalSnap = Math.abs(draggedTop - elementBottom);
+          horizontalGuides.length = 0;
+          horizontalGuides.push({
+            position: elementBottom,
+            orientation: "horizontal",
+            type: "edge"
+          });
+        }
+        if (Math.abs(draggedBottom - elementTop) <= closestHorizontalSnap) {
+          horizontalOffset = elementTop - draggedBottom;
+          closestHorizontalSnap = Math.abs(draggedBottom - elementTop);
+          horizontalGuides.length = 0;
+          horizontalGuides.push({
+            position: elementTop,
+            orientation: "horizontal",
+            type: "edge"
+          });
+        }
+      }
+      if (Math.abs(draggedCenterY - elementCenterY) <= closestHorizontalSnap) {
+        horizontalOffset = elementCenterY - draggedCenterY;
+        closestHorizontalSnap = Math.abs(draggedCenterY - elementCenterY);
+        horizontalGuides.length = 0;
+        horizontalGuides.push({
+          position: elementCenterY,
+          orientation: "horizontal",
+          type: "center"
+        });
+      }
+    }
+  }
+  snappedX = x + verticalOffset;
+  snappedY = y + horizontalOffset;
+  return {
+    x: snappedX,
+    y: snappedY,
+    verticalGuides,
+    horizontalGuides
+  };
+}
+
+// src/elements/TextElement.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var TextElementRenderer = ({
+  element,
+  isSelected,
+  onSelect,
+  onTransform,
+  allElements = [],
+  canvasSize,
+  onSnapGuides,
+  onClearSnapGuides,
+  elementId
+}) => {
+  const shapeRef = React.useRef(null);
+  const isVisible = element.visible !== false;
+  const isLocked = element.locked === true;
+  if (!isVisible) {
+    return null;
+  }
+  const handleClick = (e) => {
+    if (isLocked) return;
+    e.evt.button !== 0 ? void 0 : onSelect();
+  };
+  const handleDragMove = (e) => {
+    if (!canvasSize || !onSnapGuides || !isSelected || e.evt.button !== 0) return;
+    const node = e.target;
+    const snapResult = getSnappingPosition(element, node.x(), node.y(), allElements, {
+      threshold: 5,
+      snapToElements: true,
+      snapToCanvas: true,
+      canvasSize
+    });
+    node.x(snapResult.x);
+    node.y(snapResult.y);
+    onSnapGuides({
+      vertical: snapResult.verticalGuides,
+      horizontal: snapResult.horizontalGuides
+    });
+  };
+  const handleDragEnd = (e) => {
+    if (onClearSnapGuides) {
+      onClearSnapGuides();
+    }
+    onTransform({
+      position: {
+        x: e.target.x(),
+        y: e.target.y()
+      }
+    });
+  };
+  const handleTransform = () => {
+    const node = shapeRef.current;
+    if (!node) return;
+    const scaleX = node.scaleX();
+    const scaleY = node.scaleY();
+    const newWidth = Math.max(20, node.width() * scaleX);
+    const newHeight = Math.max(20, node.height() * scaleY);
+    node.scaleX(1);
+    node.scaleY(1);
+    node.width(newWidth);
+    node.height(newHeight);
+  };
+  const getTextDecoration = () => {
+    const decorations = [];
+    if (element.props.underline) decorations.push("underline");
+    if (element.props.strikethrough) decorations.push("line-through");
+    if (element.props.overline) decorations.push("overline");
+    return decorations.join(" ") || "";
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+    Text,
+    {
+      ref: shapeRef,
+      id: elementId || element.id,
+      x: element.position.x,
+      y: element.position.y,
+      width: element.size.width,
+      height: element.size.height,
+      text: element.props.content,
+      fontSize: element.props.fontSize,
+      fontFamily: element.props.fontFamily || "Arial",
+      opacity: element.opacity,
+      fill: element.props.color,
+      align: element.props.align || "left",
+      fontStyle: `${element.props.bold ? "bold" : ""} ${element.props.italic ? "italic" : ""}`.trim() || "normal",
+      textDecoration: getTextDecoration(),
+      rotation: element.rotation,
+      draggable: !isLocked && isSelected,
+      listening: !isLocked,
+      onClick: handleClick,
+      onTap: isLocked ? void 0 : onSelect,
+      onDragMove: handleDragMove,
+      onDragEnd: handleDragEnd,
+      onTransform: handleTransform,
+      ellipsis: element.props.textOverflow === "ellipsis",
+      verticalAlign: element.props.verticalAlign || "top",
+      stroke: element.props.strokeColor || "#000000",
+      strokeWidth: element.props.strokeWidth || 0,
+      strokeEnabled: true,
+      fillAfterStrokeEnabled: true
+    }
+  ) });
+};
+var textElementRenderer = {
+  type: "text",
+  displayName: "Text",
+  render: (element) => /* @__PURE__ */ jsxs("div", { children: [
+    "Text: ",
+    element.props.content
+  ] }),
+  // Placeholder for non-Konva contexts
+  renderComponent: TextElementRenderer,
+  // Konva rendering component
+  icon: /* @__PURE__ */ jsx(Type, { className: "w-4 h-4" }),
+  defaultProps: {
+    content: "Text",
+    fontSize: 16,
+    fontFamily: "Arial",
+    color: "#000000",
+    strokeColor: "#000000",
+    strokeWidth: 0,
+    align: "left",
+    verticalAlign: "top",
+    bold: false,
+    italic: false,
+    underline: false,
+    overline: false,
+    strikethrough: false,
+    wordWrap: "break-word"
+  },
+  defaultSize: {
+    width: 200,
+    height: 50
+  },
+  inspectorSchema: [
+    {
+      name: "content",
+      type: "string",
+      label: "Text Content",
+      defaultValue: "Text"
+    },
+    {
+      name: "fontSize",
+      type: "number",
+      label: "Font Size",
+      min: 0,
+      max: 1024,
+      step: 1,
+      defaultValue: 16
+    },
+    {
+      name: "fontFamily",
+      type: "select",
+      label: "Font Family",
+      options: [
+        { value: "Arial", label: "Arial" },
+        { value: "Times New Roman", label: "Times New Roman" },
+        { value: "Courier New", label: "Courier New" },
+        { value: "Georgia", label: "Georgia" },
+        { value: "Verdana", label: "Verdana" },
+        { value: "Outfit", label: "Outfit" }
+      ],
+      defaultValue: "Outfit"
+    },
+    {
+      name: "color",
+      type: "color",
+      label: "Text Color",
+      defaultValue: "#000000"
+    },
+    {
+      name: "strokeColor",
+      type: "color",
+      label: "Stroke Color",
+      defaultValue: "#000000"
+    },
+    {
+      name: "strokeWidth",
+      type: "number",
+      label: "Stroke Width",
+      min: 0,
+      max: 50,
+      step: 1,
+      defaultValue: 0
+    },
+    {
+      name: "align",
+      type: "select",
+      label: "Horizontal Alignment",
+      options: [
+        { value: "left", label: "Left" },
+        { value: "center", label: "Center" },
+        { value: "right", label: "Right" }
+      ],
+      defaultValue: "left"
+    },
+    {
+      name: "verticalAlign",
+      type: "select",
+      label: "Vertical Alignment",
+      options: [
+        { value: "top", label: "Top" },
+        { value: "middle", label: "Middle" },
+        { value: "bottom", label: "Bottom" }
+      ],
+      defaultValue: "top"
+    },
+    {
+      name: "bold",
+      type: "boolean",
+      label: "Bold",
+      defaultValue: false
+    },
+    {
+      name: "italic",
+      type: "boolean",
+      label: "Italic",
+      defaultValue: false
+    },
+    {
+      name: "underline",
+      type: "boolean",
+      label: "Underline",
+      defaultValue: false
+    },
+    {
+      name: "strikethrough",
+      type: "boolean",
+      label: "Strikethrough",
+      defaultValue: false
+    }
+  ]
+};
+
+// src/elements/ImageElement.tsx
+import React2 from "react";
+import { Image as KonvaImage, Rect, Text as Text2, Group } from "react-konva";
+import useImage from "use-image";
+import { Image } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ImageElementRenderer = ({
+  element,
+  isSelected,
+  onSelect,
+  onTransform,
+  allElements = [],
+  canvasSize,
+  onSnapGuides,
+  onClearSnapGuides,
+  imageUrls,
+  elementId,
+  onNodeUpdate
+}) => {
+  const imageSrc = React2.useMemo(() => {
+    const src = element.props.src;
+    if (src && (src.startsWith("http") || src.startsWith("blob:") || src.startsWith("data:"))) {
+      return src;
+    }
+    if (src && imageUrls) {
+      const resolvedUrl = imageUrls.get(src);
+      if (resolvedUrl) {
+        return resolvedUrl;
+      }
+    }
+    return src;
+  }, [element.props.src, imageUrls]);
+  const [image] = useImage(imageSrc);
+  const shapeRef = React2.useRef(null);
+  const transformerRef = React2.useRef(null);
+  const isVisible = element.visible !== false;
+  const isLocked = element.locked === true;
+  React2.useEffect(() => {
+    if (isSelected && transformerRef.current && shapeRef.current) {
+      transformerRef.current.nodes([shapeRef.current]);
+      transformerRef.current.getLayer().batchDraw();
+    }
+  }, [isSelected]);
+  React2.useEffect(() => {
+    if (shapeRef.current) {
+      const layer = shapeRef.current.getLayer();
+      if (layer) {
+        layer.batchDraw();
+      }
+      if (onNodeUpdate) {
+        onNodeUpdate();
+      }
+    }
+  }, [image, onNodeUpdate]);
+  if (!isVisible) {
+    return null;
+  }
+  const handleClick = (e) => {
+    if (isLocked) return;
+    e.evt.button !== 0 ? void 0 : onSelect();
+  };
+  const handleDragMove = (e) => {
+    if (!canvasSize || !onSnapGuides || e.evt.button !== 0) return;
+    const node = e.target;
+    const snapResult = getSnappingPosition(element, node.x(), node.y(), allElements, {
+      threshold: 5,
+      snapToElements: true,
+      snapToCanvas: true,
+      canvasSize
+    });
+    node.x(snapResult.x);
+    node.y(snapResult.y);
+    onSnapGuides({
+      vertical: snapResult.verticalGuides,
+      horizontal: snapResult.horizontalGuides
+    });
+  };
+  const handleDragEnd = (e) => {
+    if (onClearSnapGuides) {
+      onClearSnapGuides();
+    }
+    onTransform({
+      position: {
+        x: e.target.x(),
+        y: e.target.y()
+      }
+    });
+  };
+  return /* @__PURE__ */ jsx2(Fragment2, { children: image ? /* @__PURE__ */ jsx2(
+    KonvaImage,
+    {
+      ref: shapeRef,
+      id: elementId || element.id,
+      x: element.position.x,
+      y: element.position.y,
+      width: element.size.width,
+      height: element.size.height,
+      image,
+      opacity: element.opacity,
+      rotation: element.rotation,
+      draggable: !isLocked && isSelected,
+      listening: !isLocked,
+      onClick: handleClick,
+      onTap: isLocked ? void 0 : onSelect,
+      onDragMove: handleDragMove,
+      onDragEnd: handleDragEnd
+    }
+  ) : /* @__PURE__ */ jsxs2(
+    Group,
+    {
+      ref: shapeRef,
+      id: elementId || element.id,
+      x: element.position.x,
+      y: element.position.y,
+      width: element.size.width,
+      height: element.size.height,
+      rotation: element.rotation,
+      draggable: !isLocked && isSelected,
+      listening: !isLocked,
+      onClick: isLocked ? void 0 : handleClick,
+      onTap: isLocked ? void 0 : onSelect,
+      onDragMove: handleDragMove,
+      onDragEnd: handleDragEnd,
+      children: [
+        /* @__PURE__ */ jsx2(
+          Rect,
+          {
+            width: element.size.width,
+            height: element.size.height,
+            fill: "#f0f0f0",
+            stroke: "#999999",
+            strokeWidth: 2,
+            dash: [10, 5],
+            opacity: element.opacity
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          Text2,
+          {
+            width: element.size.width,
+            height: element.size.height,
+            text: "No Image",
+            fontSize: 16,
+            fill: "#666666",
+            align: "center",
+            verticalAlign: "middle"
+          }
+        )
+      ]
+    }
+  ) });
+};
+var imageElementRenderer = {
+  type: "image",
+  displayName: "Image",
+  render: (element) => /* @__PURE__ */ jsxs2("div", { children: [
+    "Image: ",
+    element.props.src
+  ] }),
+  // Placeholder for non-Konva contexts
+  renderComponent: ImageElementRenderer,
+  // Konva rendering component
+  icon: /* @__PURE__ */ jsx2(Image, { className: "w-4 h-4" }),
+  defaultProps: {
+    src: "",
+    fit: "fill"
+  },
+  defaultSize: {
+    width: 200,
+    height: 200
+  },
+  inspectorSchema: [
+    {
+      name: "src",
+      type: "image",
+      label: "Image Source",
+      description: "URL or path to the image",
+      defaultValue: ""
+    },
+    {
+      name: "fit",
+      type: "select",
+      label: "Fit Mode",
+      options: [{ value: "fill", label: "Fill" }],
+      defaultValue: "contain"
+    }
+  ]
+};
+
+// src/elements/index.ts
+var defaultElements = [textElementRenderer, imageElementRenderer];
+
+// src/core/VisualEditor.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var VisualEditor = ({
+  mode,
+  initialData,
+  width: propWidth,
+  height: propHeight,
+  readonly = false,
+  onChange,
+  onSelectionChange,
+  onExport,
+  customElements = [],
+  showToolbar = true,
+  showInspector = true,
+  className = "",
+  style = {}
+}) => {
+  const containerRef = useRef(null);
+  const stageRef = useRef(null);
+  const {
+    state,
+    api,
+    setCanvasSize,
+    setMode: setEditorMode,
+    undo,
+    redo,
+    canUndo,
+    canRedo
+  } = useEditorState(mode || null);
+  const registry = useElementRegistry([
+    ...defaultElements,
+    ...mode?.registeredElements || [],
+    ...customElements
+  ]);
+  const canvasWidth = propWidth || state.canvasSize.width || mode?.defaultCanvasSize.width || 800;
+  const canvasHeight = propHeight || state.canvasSize.height || mode?.defaultCanvasSize.height || 600;
+  useEffect(() => {
+    if (propWidth && propHeight) {
+      setCanvasSize(propWidth, propHeight);
+    }
+  }, [propWidth, propHeight, setCanvasSize]);
+  useEffect(() => {
+    if (initialData) {
+      api.importJSON(initialData);
+    }
+  }, [initialData, api]);
+  useEffect(() => {
+    if (mode) {
+      setEditorMode(mode);
+      if (mode.registeredElements) {
+        mode.registeredElements.forEach((el) => registry.register(el));
+      }
+      if (mode.onModeActivate) {
+        mode.onModeActivate(api);
+      }
+    }
+  }, [mode, setEditorMode, registry, api]);
+  useEffect(() => {
+    if (onChange) {
+      const data = api.exportJSON();
+      onChange(data);
+    }
+  }, [state.elements, onChange, api]);
+  useEffect(() => {
+    if (onSelectionChange) {
+      const selected = api.getSelectedElement();
+      onSelectionChange(selected);
+    }
+  }, [state.selectedElementId, onSelectionChange, api]);
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === "z" && !e.shiftKey) {
+        e.preventDefault();
+        undo();
+      }
+      if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === "z" || (e.ctrlKey || e.metaKey) && e.key === "y") {
+        e.preventDefault();
+        redo();
+      }
+      if ((e.key === "Delete" || e.key === "Backspace") && !readonly) {
+        e.preventDefault();
+        const selected = api.getSelectedElement();
+        if (selected) {
+          api.removeElement(selected.id);
+        }
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        api.selectElement(null);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [undo, redo, readonly, api]);
+  const renderElement = useCallback2(
+    (element) => {
+      const renderer = registry.get(element.type);
+      if (!renderer) {
+        console.warn(`No renderer found for element type: ${element.type}`);
+        return null;
+      }
+      const RendererComponent = renderer.renderComponent;
+      if (!RendererComponent) {
+        console.warn(`No renderComponent found for element type: ${element.type}`);
+        return null;
+      }
+      const isSelected = state.selectedElementId === element.id;
+      return /* @__PURE__ */ jsx3(
+        RendererComponent,
+        {
+          element,
+          isSelected,
+          onSelect: () => !readonly && api.selectElement(element.id),
+          onTransform: (updates) => !readonly && api.updateElement(element.id, updates)
+        },
+        element.id
+      );
+    },
+    [registry, state.selectedElementId, readonly, api]
+  );
+  const handleStageClick = useCallback2(
+    (e) => {
+      if (e.target === e.target.getStage()) {
+        api.selectElement(null);
+      }
+    },
+    [api]
+  );
+  const sortedElements = [...state.elements].sort((a, b) => a.zIndex - b.zIndex);
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      ref: containerRef,
+      className: `visual-editor ${className}`,
+      style: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        backgroundColor: mode?.backgroundColor || "#f0f0f0",
+        ...style
+      },
+      children: /* @__PURE__ */ jsx3(
+        "div",
+        {
+          style: {
+            flex: 1,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            overflow: "auto"
+          },
+          children: /* @__PURE__ */ jsx3(
+            Stage,
+            {
+              ref: stageRef,
+              width: canvasWidth,
+              height: canvasHeight,
+              onClick: handleStageClick,
+              onTap: handleStageClick,
+              style: {
+                backgroundColor: "#ffffff",
+                boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
+              },
+              children: /* @__PURE__ */ jsx3(Layer, { children: sortedElements.map(renderElement) })
+            }
+          )
+        }
+      )
+    }
+  );
+};
+
+// src/components/Inspector.tsx
+import React11 from "react";
+
+// src/ui/input.tsx
+import * as React4 from "react";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/ui/input.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Input = React4.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsx4(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+// src/ui/label.tsx
+import * as React5 from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva } from "class-variance-authority";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(labelVariants(), className),
+    ...props
+  }
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+// src/ui/slider.tsx
+import * as React6 from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var Slider = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs3(
+  SliderPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx6(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary", children: /* @__PURE__ */ jsx6(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
+      /* @__PURE__ */ jsx6(SliderPrimitive.Thumb, { className: "block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" })
+    ]
+  }
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+// src/ui/separator.tsx
+import * as React7 from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var Separator = React7.forwardRef(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx7(
+    SeparatorPrimitive.Root,
+    {
+      ref,
+      decorative,
+      orientation,
+      className: cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+// src/ui/select.tsx
+import * as React8 from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var Select = SelectPrimitive.Root;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React8.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs4(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx8(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx8(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx8(ChevronUp, { className: "h-4 w-4" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx8(ChevronDown, { className: "h-4 w-4" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React8.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx8(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs4(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx8(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx8(
+        SelectPrimitive.Viewport,
+        {
+          className: cn(
+            "p-1",
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx8(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React8.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs4(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx8("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx8(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx8(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx8(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+// src/ui/textarea.tsx
+import * as React9 from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var Textarea = React9.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx9(
+    "textarea",
+    {
+      className: cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      ),
+      ref,
+      ...props
+    }
+  );
+});
+Textarea.displayName = "Textarea";
+
+// src/ui/checkbox.tsx
+import * as React10 from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check as Check2 } from "lucide-react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Checkbox = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+  CheckboxPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx10(
+      CheckboxPrimitive.Indicator,
+      {
+        className: cn("flex items-center justify-center text-current"),
+        children: /* @__PURE__ */ jsx10(Check2, { className: "h-4 w-4" })
+      }
+    )
+  }
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+// src/components/Inspector.tsx
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+var Inspector = ({
+  selectedElement,
+  elementRenderer,
+  api,
+  mode,
+  canvasSize,
+  setCanvasSize,
+  style,
+  className
+}) => {
+  const [editingValues, setEditingValues] = React11.useState({});
+  const debounceTimers = React11.useRef({});
+  React11.useEffect(() => {
+    return () => {
+      Object.values(debounceTimers.current).forEach((timer) => clearTimeout(timer));
+    };
+  }, []);
+  if (!selectedElement || !elementRenderer) {
+    if (mode?.inspectorPlaceholder) {
+      const PlaceholderComponent = mode.inspectorPlaceholder;
+      return /* @__PURE__ */ jsxs5("div", { className: `w-full bg-card h-full ${className}`, style, children: [
+        /* @__PURE__ */ jsx11("div", { className: "flex h-10 sticky top-0 items-center justify-between px-3 py-2 border-b bg-popover", children: /* @__PURE__ */ jsx11("h3", { className: "text-sm font-semibold", children: "Inspector" }) }),
+        /* @__PURE__ */ jsx11(
+          PlaceholderComponent,
+          {
+            api,
+            canvasSize,
+            setCanvasSize,
+            ...mode.context || {}
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ jsxs5("div", { className: `w-full bg-card h-full ${className}`, style, children: [
+      /* @__PURE__ */ jsx11("div", { className: "flex h-10 items-center justify-between px-3 py-2 border-b bg-popover", children: /* @__PURE__ */ jsx11("h3", { className: "text-sm font-semibold", children: "Inspector" }) }),
+      /* @__PURE__ */ jsx11("p", { className: "p-4 text-sm text-muted-foreground", children: "No element selected. Click on an element to edit its properties." })
+    ] });
+  }
+  const schema = elementRenderer.inspectorSchema || [];
+  const handlePropChange = (propName, value) => {
+    api.updateElement(selectedElement.id, {
+      props: {
+        ...selectedElement.props,
+        [propName]: value
+      }
+    });
+  };
+  const handleColorChange = (propName, value) => {
+    if (debounceTimers.current[propName]) {
+      clearTimeout(debounceTimers.current[propName]);
+    }
+    setEditingValues((prev) => ({ ...prev, [propName]: value }));
+    debounceTimers.current[propName] = setTimeout(() => {
+      handlePropChange(propName, value);
+      setEditingValues((prev) => {
+        const newState = { ...prev };
+        delete newState[propName];
+        return newState;
+      });
+      delete debounceTimers.current[propName];
+    }, 300);
+  };
+  const handleTransformChange = (field, value) => {
+    const roundedValue = Math.round(value * 100) / 100;
+    if (field === "x" || field === "y") {
+      api.updateElement(selectedElement.id, {
+        position: {
+          ...selectedElement.position,
+          [field]: roundedValue
+        }
+      });
+    } else if (field === "width" || field === "height") {
+      api.updateElement(selectedElement.id, {
+        size: {
+          ...selectedElement.size,
+          [field]: roundedValue
+        }
+      });
+    } else if (field === "rotation") {
+      const width = selectedElement.size.width;
+      const height = selectedElement.size.height;
+      const oldRotRad = selectedElement.rotation * Math.PI / 180;
+      const centerOffsetX = width / 2;
+      const centerOffsetY = height / 2;
+      const rotatedCenterX = selectedElement.position.x + centerOffsetX * Math.cos(oldRotRad) - centerOffsetY * Math.sin(oldRotRad);
+      const rotatedCenterY = selectedElement.position.y + centerOffsetX * Math.sin(oldRotRad) + centerOffsetY * Math.cos(oldRotRad);
+      const newRotRad = roundedValue * Math.PI / 180;
+      const newX = rotatedCenterX - (centerOffsetX * Math.cos(newRotRad) - centerOffsetY * Math.sin(newRotRad));
+      const newY = rotatedCenterY - (centerOffsetX * Math.sin(newRotRad) + centerOffsetY * Math.cos(newRotRad));
+      api.updateElement(selectedElement.id, {
+        position: {
+          x: Math.round(newX * 100) / 100,
+          y: Math.round(newY * 100) / 100
+        },
+        rotation: roundedValue
+      });
+    } else if (field === "opacity") {
+      const clampedValue = Math.max(0, Math.min(1, roundedValue));
+      api.updateElement(selectedElement.id, {
+        opacity: clampedValue
+      });
+    }
+  };
+  const getDisplayValue = (field) => {
+    if (editingValues[field] !== void 0) {
+      return editingValues[field];
+    }
+    let value;
+    if (field === "x") value = selectedElement.position.x;
+    else if (field === "y") value = selectedElement.position.y;
+    else if (field === "width") value = selectedElement.size.width;
+    else if (field === "height") value = selectedElement.size.height;
+    else if (field === "rotation") value = selectedElement.rotation;
+    else if (field === "opacity") value = selectedElement.opacity;
+    else return "0";
+    return value.toFixed(2);
+  };
+  const handleInputChange = (field, value) => {
+    setEditingValues((prev) => ({ ...prev, [field]: value }));
+  };
+  const handleInputBlur = (field) => {
+    const value = editingValues[field];
+    if (value !== void 0) {
+      const numValue = parseFloat(value);
+      if (!isNaN(numValue)) {
+        handleTransformChange(field, numValue);
+      }
+      setEditingValues((prev) => {
+        const newState = { ...prev };
+        delete newState[field];
+        return newState;
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxs5("div", { className: `h-full bg-card overflow-y-auto ${className}`, style, children: [
+    /* @__PURE__ */ jsx11("div", { className: "flex h-10 sticky top-0 items-center justify-between px-3 py-2 border-b bg-popover", children: /* @__PURE__ */ jsx11("h3", { className: "text-sm font-semibold", children: "Inspector" }) }),
+    /* @__PURE__ */ jsxs5("div", { className: "p-4", children: [
+      /* @__PURE__ */ jsx11("h3", { className: "text-lg font-semibold mb-1", children: elementRenderer.displayName || selectedElement.type }),
+      /* @__PURE__ */ jsxs5("p", { className: "text-xs text-muted-foreground mb-4", children: [
+        "ID: ",
+        selectedElement.id
+      ] }),
+      /* @__PURE__ */ jsx11(Separator, { className: "my-4" }),
+      /* @__PURE__ */ jsxs5("div", { className: "mb-4", children: [
+        /* @__PURE__ */ jsx11(Label, { htmlFor: "display-name", className: "text-xs", children: "Display Name" }),
+        /* @__PURE__ */ jsx11(
+          Input,
+          {
+            id: "display-name",
+            type: "text",
+            value: selectedElement.displayName || "",
+            onChange: (e) => {
+              api.updateElement(selectedElement.id, {
+                displayName: e.target.value
+              });
+            },
+            placeholder: elementRenderer.displayName || selectedElement.type,
+            className: "h-8 mt-1"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx11(Separator, { className: "my-4" }),
+      /* @__PURE__ */ jsx11("h4", { className: "text-sm font-medium mb-3", children: "Transform" }),
+      /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsxs5("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-2 items-start", children: [
+            /* @__PURE__ */ jsx11(Label, { htmlFor: "x-position", className: "text-xs", children: "X" }),
+            /* @__PURE__ */ jsx11(
+              Input,
+              {
+                id: "x-position",
+                type: "number",
+                step: 0.5,
+                value: getDisplayValue("x"),
+                onChange: (e) => handleInputChange("x", e.target.value),
+                onBlur: () => handleInputBlur("x"),
+                className: "h-8"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-2 items-start", children: [
+            /* @__PURE__ */ jsx11(Label, { htmlFor: "y-position", className: "text-xs", children: "Y" }),
+            /* @__PURE__ */ jsx11(
+              Input,
+              {
+                id: "y-position",
+                type: "number",
+                step: 0.5,
+                value: getDisplayValue("y"),
+                onChange: (e) => handleInputChange("y", e.target.value),
+                onBlur: () => handleInputBlur("y"),
+                className: "h-8"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs5("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-2 items-start", children: [
+            /* @__PURE__ */ jsx11(Label, { htmlFor: "width", className: "text-xs", children: "Width" }),
+            /* @__PURE__ */ jsx11(
+              Input,
+              {
+                id: "width",
+                type: "number",
+                step: 0.5,
+                value: getDisplayValue("width"),
+                onChange: (e) => handleInputChange("width", e.target.value),
+                onBlur: () => handleInputBlur("width"),
+                className: "h-8"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx11("div", { className: "flex h-8 gap-2", children: /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-2 items-start", children: [
+            /* @__PURE__ */ jsx11(Label, { htmlFor: "height", className: "text-xs", children: "Height" }),
+            /* @__PURE__ */ jsx11(
+              Input,
+              {
+                id: "height",
+                type: "number",
+                step: 0.5,
+                value: getDisplayValue("height"),
+                onChange: (e) => handleInputChange("height", e.target.value),
+                onBlur: () => handleInputBlur("height"),
+                className: "h-8"
+              }
+            )
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxs5("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-2 items-start flex-1", children: [
+            /* @__PURE__ */ jsx11(Label, { htmlFor: "rotation", className: "text-xs", children: "Rotation" }),
+            /* @__PURE__ */ jsx11(
+              Input,
+              {
+                id: "rotation",
+                type: "number",
+                step: 1,
+                value: getDisplayValue("rotation"),
+                onChange: (e) => handleInputChange("rotation", e.target.value),
+                onBlur: () => handleInputBlur("rotation"),
+                className: "h-8 flex-1"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-2 items-start flex-1", children: [
+            /* @__PURE__ */ jsx11(Label, { htmlFor: "opacity", className: "text-xs", children: "Opacity" }),
+            /* @__PURE__ */ jsx11(
+              Input,
+              {
+                id: "opacity",
+                type: "number",
+                step: 0.01,
+                min: 0,
+                max: 1,
+                value: getDisplayValue("opacity"),
+                onChange: (e) => handleInputChange("opacity", e.target.value),
+                onBlur: () => handleInputBlur("opacity"),
+                className: "h-8 flex-1"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx11(Separator, { className: "my-4" }),
+        schema.length > 0 && /* @__PURE__ */ jsxs5(Fragment3, { children: [
+          /* @__PURE__ */ jsx11("h4", { className: "text-sm font-medium mb-3", children: "Properties" }),
+          /* @__PURE__ */ jsx11("div", { className: "space-y-3", children: schema.map(
+            (field) => renderField(
+              field,
+              selectedElement.props,
+              editingValues,
+              handlePropChange,
+              handleColorChange,
+              mode
+            )
+          ) })
+        ] })
+      ] })
+    ] })
+  ] });
+};
+function renderField(field, props, editingValues, onChange, onColorChange, mode) {
+  const value = editingValues[field.name] ?? props[field.name] ?? field.defaultValue;
+  switch (field.type) {
+    case "custom":
+      if (!field.customRenderer) {
+        console.error(`Custom field "${field.name}" has no customRenderer defined`);
+        return null;
+      }
+      const CustomComponent = field.customRenderer;
+      return /* @__PURE__ */ jsx11("div", { children: /* @__PURE__ */ jsx11(
+        CustomComponent,
+        {
+          value,
+          onChange: (newValue) => onChange(field.name, newValue),
+          field,
+          elementProps: props,
+          mode
+        }
+      ) }, field.name);
+    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 }),
+        isMultiline ? /* @__PURE__ */ jsx11(
+          Textarea,
+          {
+            id: field.name,
+            value: value || "",
+            onChange: (e) => onChange(field.name, e.target.value),
+            className: "mt-1",
+            rows: 3
+          }
+        ) : /* @__PURE__ */ jsx11(
+          Input,
+          {
+            id: field.name,
+            value: value || "",
+            onChange: (e) => onChange(field.name, e.target.value),
+            className: "h-8 mt-1"
+          }
+        ),
+        field.description && /* @__PURE__ */ jsx11("p", { className: "text-xs text-muted-foreground mt-1", children: field.description })
+      ] }, field.name);
+    case "number":
+      return /* @__PURE__ */ jsxs5("div", { children: [
+        /* @__PURE__ */ jsx11(Label, { htmlFor: field.name, className: "text-xs", children: field.label }),
+        /* @__PURE__ */ jsx11(
+          Input,
+          {
+            id: field.name,
+            type: "number",
+            value: value ?? 0,
+            onChange: (e) => onChange(field.name, parseFloat(Number(e.target.value).toFixed(2))),
+            min: field.min,
+            max: field.max,
+            step: field.step || 1,
+            className: "h-8 mt-1"
+          }
+        ),
+        field.description && /* @__PURE__ */ jsx11("p", { className: "text-xs text-muted-foreground mt-1", children: field.description })
+      ] }, field.name);
+    case "color":
+      return /* @__PURE__ */ jsxs5("div", { children: [
+        /* @__PURE__ */ jsx11(Label, { htmlFor: field.name, className: "text-xs", children: field.label }),
+        /* @__PURE__ */ jsx11(
+          Input,
+          {
+            id: field.name,
+            type: "color",
+            value: value || "#000000",
+            onChange: (e) => onColorChange(field.name, e.target.value),
+            className: "h-10 mt-1"
+          }
+        ),
+        field.description && /* @__PURE__ */ jsx11("p", { className: "text-xs text-muted-foreground mt-1", children: field.description })
+      ] }, field.name);
+    case "select":
+      return /* @__PURE__ */ jsxs5("div", { children: [
+        /* @__PURE__ */ jsx11(Label, { htmlFor: field.name, className: "text-xs", children: field.label }),
+        /* @__PURE__ */ jsxs5(
+          Select,
+          {
+            value: value || field.defaultValue || "",
+            onValueChange: (newValue) => onChange(field.name, newValue),
+            children: [
+              /* @__PURE__ */ jsx11(SelectTrigger, { className: "h-8 mt-1", children: /* @__PURE__ */ jsx11(SelectValue, { placeholder: field.label }) }),
+              /* @__PURE__ */ jsx11(SelectContent, { children: field.options?.map((option) => /* @__PURE__ */ jsx11(SelectItem, { value: String(option.value), children: option.label }, option.value)) })
+            ]
+          }
+        ),
+        field.description && /* @__PURE__ */ jsx11("p", { className: "text-xs text-muted-foreground mt-1", children: field.description })
+      ] }, field.name);
+    case "boolean":
+      return /* @__PURE__ */ jsxs5("div", { className: "flex items-start space-x-2", children: [
+        /* @__PURE__ */ jsx11(
+          Checkbox,
+          {
+            id: field.name,
+            checked: Boolean(value),
+            onCheckedChange: (checked) => onChange(field.name, checked),
+            className: "mt-1"
+          }
+        ),
+        /* @__PURE__ */ jsxs5("div", { children: [
+          /* @__PURE__ */ jsx11(Label, { htmlFor: field.name, className: "text-xs font-medium cursor-pointer", children: field.label }),
+          field.description && /* @__PURE__ */ jsx11("p", { className: "text-xs text-muted-foreground", children: field.description })
+        ] })
+      ] }, field.name);
+    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 }),
+          /* @__PURE__ */ jsx11("span", { className: "text-xs text-muted-foreground", children: value })
+        ] }),
+        /* @__PURE__ */ jsx11(
+          Slider,
+          {
+            value: [Number(value ?? field.defaultValue ?? 0)],
+            onValueChange: ([newValue]) => onChange(field.name, newValue),
+            min: field.min || 0,
+            max: field.max || 100,
+            step: field.step || 1,
+            className: "mt-1"
+          }
+        ),
+        field.description && /* @__PURE__ */ jsx11("p", { className: "text-xs text-muted-foreground mt-1", children: field.description })
+      ] }, field.name);
+    case "image":
+      return /* @__PURE__ */ jsxs5("div", { children: [
+        /* @__PURE__ */ jsx11(Label, { htmlFor: field.name, className: "text-xs", children: field.label }),
+        /* @__PURE__ */ jsx11(
+          Input,
+          {
+            id: field.name,
+            value: value || "",
+            onChange: (e) => onChange(field.name, e.target.value),
+            className: "h-8 mt-1",
+            placeholder: "Image URL or path"
+          }
+        ),
+        field.description && /* @__PURE__ */ jsx11("p", { className: "text-xs text-muted-foreground mt-1", children: field.description })
+      ] }, field.name);
+    default:
+      return null;
+  }
+}
+
+// src/components/LayersPanel.tsx
+import React16 from "react";
+
+// src/ui/badge.tsx
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var badgeVariants = cva2(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx12("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+
+// src/ui/scroll-area.tsx
+import * as React12 from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+var ScrollArea = React12.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs6(
+  ScrollAreaPrimitive.Root,
+  {
+    ref,
+    className: cn("relative overflow-hidden", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx13(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
+      /* @__PURE__ */ jsx13(ScrollBar, {}),
+      /* @__PURE__ */ jsx13(ScrollAreaPrimitive.Corner, {})
+    ]
+  }
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+var ScrollBar = React12.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx13(
+  ScrollAreaPrimitive.ScrollAreaScrollbar,
+  {
+    ref,
+    orientation,
+    className: cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx13(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+  }
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+// src/ui/general/TooltipButton.tsx
+import * as React15 from "react";
+
+// src/ui/button.tsx
+import * as React13 from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva as cva3 } from "class-variance-authority";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var buttonVariants = cva3(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React13.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx14(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/ui/tooltip.tsx
+import * as React14 from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React14.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx15(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
+      className
+    ),
+    ...props
+  }
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+// src/ui/general/TooltipWrapper.tsx
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+var TooltipWrapper = ({
+  tooltip,
+  shortcut,
+  tooltipSide = "top",
+  tooltipAlign = "center",
+  tooltipDelay = 700,
+  children,
+  triggerClassName = "flex-1",
+  asChild = true
+}) => {
+  return /* @__PURE__ */ jsx16(TooltipProvider, { delayDuration: tooltipDelay, children: /* @__PURE__ */ jsxs7(Tooltip, { children: [
+    /* @__PURE__ */ jsx16(TooltipTrigger, { className: triggerClassName, asChild, children }),
+    /* @__PURE__ */ jsx16(TooltipContent, { side: tooltipSide, align: tooltipAlign, children: /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx16("span", { children: tooltip }),
+      shortcut && /* @__PURE__ */ jsx16("kbd", { className: "inline-flex items-center px-1.5 py-0.5 text-xs font-mono bg-muted text-gray rounded border", children: shortcut })
+    ] }) })
+  ] }) });
+};
+TooltipWrapper.displayName = "TooltipWrapper";
+
+// src/ui/general/TooltipButton.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+var TooltipButton = React15.forwardRef(
+  ({
+    tooltip,
+    shortcut,
+    tooltipSide = "top",
+    tooltipAlign = "center",
+    tooltipDelay = 700,
+    children,
+    className,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx17(
+      TooltipWrapper,
+      {
+        tooltip,
+        shortcut,
+        tooltipSide,
+        tooltipAlign,
+        tooltipDelay,
+        asChild: true,
+        triggerClassName: "",
+        children: /* @__PURE__ */ jsx17(Button, { ref, className, ...props, children })
+      }
+    );
+  }
+);
+TooltipButton.displayName = "TooltipButton";
+
+// src/components/LayersPanel.tsx
+import {
+  Eye,
+  EyeOff,
+  Lock,
+  Unlock,
+  Trash2,
+  ChevronDown as ChevronDown2,
+  Type as Type2,
+  Image as ImageIcon,
+  Layers,
+  ChevronUp as ChevronUp2,
+  Filter
+} from "lucide-react";
+import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+var getElementIcon = (type) => {
+  switch (type) {
+    case "text":
+      return /* @__PURE__ */ jsx18(Type2, { className: "h-4 w-4" });
+    case "image":
+      return /* @__PURE__ */ jsx18(ImageIcon, { className: "h-4 w-4" });
+    default:
+      return /* @__PURE__ */ jsx18(Layers, { className: "h-4 w-4" });
+  }
+};
+var getElementDisplayName = (element, renderer) => {
+  if (element.displayName) return element.displayName;
+  if (renderer?.displayName) return renderer.displayName;
+  if (element.type === "text" && element.props.content) {
+    const preview = element.props.content.substring(0, 20);
+    return `${preview}${element.props.content.length > 20 ? "..." : ""}`;
+  }
+  return element.type.charAt(0).toUpperCase() + element.type.slice(1);
+};
+var LayersPanel = ({
+  elements,
+  selectedElementId,
+  api,
+  elementRenderers,
+  style,
+  className
+}) => {
+  const [filter, setFilter] = React16.useState("all");
+  const availableTypes = Array.from(elementRenderers.keys());
+  const sortedElements = [...elements].sort((a, b) => b.zIndex - a.zIndex);
+  const filteredElements = sortedElements.filter((el) => {
+    if (filter === "all") return true;
+    return el.type === filter;
+  });
+  const handleMoveUp = (element, e) => {
+    e.stopPropagation();
+    const currentIndex = elements.findIndex((el) => el.id === element.id);
+    if (currentIndex < elements.length - 1) {
+      api.reorderElement(element.id, currentIndex + 1);
+    }
+  };
+  const handleMoveDown = (element, e) => {
+    e.stopPropagation();
+    const currentIndex = elements.findIndex((el) => el.id === element.id);
+    if (currentIndex > 0) {
+      api.reorderElement(element.id, currentIndex - 1);
+    }
+  };
+  return /* @__PURE__ */ jsxs8("div", { className: cn("flex flex-col bg-card border-l", className), style, children: [
+    /* @__PURE__ */ jsxs8("div", { className: "flex h-10 items-center justify-between px-3 py-2 border-b bg-popover", children: [
+      /* @__PURE__ */ jsx18("h3", { className: "text-sm font-semibold", children: "Layers" }),
+      /* @__PURE__ */ jsx18(Badge, { variant: "default", className: "text-xs", children: filteredElements.length })
+    ] }),
+    /* @__PURE__ */ jsxs8("div", { className: "flex gap-2 items-center p-3 border-b", children: [
+      /* @__PURE__ */ jsx18(Filter, { className: "icon" }),
+      /* @__PURE__ */ jsxs8(Select, { value: filter, onValueChange: (value) => setFilter(value), children: [
+        /* @__PURE__ */ jsx18(SelectTrigger, { id: "layer-filter", className: "h-8", children: /* @__PURE__ */ jsx18(SelectValue, {}) }),
+        /* @__PURE__ */ jsxs8(SelectContent, { children: [
+          /* @__PURE__ */ jsx18(SelectItem, { value: "all", children: /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx18(Layers, { className: "h-4 w-4" }),
+            "All Elements"
+          ] }) }),
+          availableTypes.map((type) => /* @__PURE__ */ jsx18(SelectItem, { value: type, children: /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
+            getElementIcon(type),
+            type.charAt(0).toUpperCase() + type.slice(1),
+            " Only"
+          ] }) }, type))
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx18(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx18("div", { className: "p-2 space-y-1", children: filteredElements.length === 0 ? /* @__PURE__ */ jsx18("div", { className: "text-center py-8 text-sm text-muted-foreground", children: filter === "all" ? "No elements yet" : `No ${filter} elements` }) : filteredElements.map((element) => {
+      const renderer = elementRenderers.get(element.type);
+      const isSelected = element.id === selectedElementId;
+      const isVisible = element.visible !== false;
+      const isLocked = element.locked === true;
+      return /* @__PURE__ */ jsxs8(
+        "div",
+        {
+          className: cn(
+            "group flex items-center gap-2 px-2 py-2 rounded cursor-pointer transition-all",
+            isSelected ? "bg-primary/15 border border-primary/30 shadow-sm" : "hover:bg-muted/70",
+            isLocked && "opacity-60",
+            !isVisible && "opacity-40"
+          ),
+          onClick: () => !isLocked && api.selectElement(element.id),
+          children: [
+            /* @__PURE__ */ jsx18("div", { className: "text-muted-foreground", children: getElementIcon(element.type) }),
+            /* @__PURE__ */ jsxs8("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx18("div", { className: "text-xs font-medium truncate", children: getElementDisplayName(element, renderer) }),
+              /* @__PURE__ */ jsx18("div", { className: "flex items-center gap-2 text-[10px] text-muted-foreground", children: /* @__PURE__ */ jsxs8("span", { children: [
+                "z:",
+                element.zIndex
+              ] }) })
+            ] }),
+            /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity", children: [
+              /* @__PURE__ */ jsxs8("div", { className: "flex flex-col", children: [
+                element.zIndex < elements.length - 1 && /* @__PURE__ */ jsx18(
+                  TooltipButton,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-3 w-6",
+                    onClick: (e) => handleMoveUp(element, e),
+                    tooltip: "Move Upward",
+                    tooltipDelay: 500,
+                    children: /* @__PURE__ */ jsx18(ChevronUp2, { className: "h-3 w-3" })
+                  }
+                ),
+                element.zIndex > 0 && /* @__PURE__ */ jsx18(
+                  TooltipButton,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-3 w-6",
+                    onClick: (e) => handleMoveDown(element, e),
+                    tooltip: "Move Downward",
+                    tooltipDelay: 500,
+                    children: /* @__PURE__ */ jsx18(ChevronDown2, { className: "h-3 w-3" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx18(
+                TooltipButton,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "h-6 w-6",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    api.updateElement(element.id, { visible: !isVisible });
+                  },
+                  tooltip: isVisible ? "Hide" : "Show",
+                  tooltipDelay: 500,
+                  children: isVisible ? /* @__PURE__ */ jsx18(Eye, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx18(EyeOff, { className: "h-3 w-3" })
+                }
+              ),
+              /* @__PURE__ */ jsx18(
+                TooltipButton,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "h-6 w-6",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    api.updateElement(element.id, { locked: !isLocked });
+                  },
+                  tooltip: isLocked ? "Unlock" : "Lock",
+                  tooltipDelay: 500,
+                  children: isLocked ? /* @__PURE__ */ jsx18(Lock, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx18(Unlock, { className: "h-3 w-3" })
+                }
+              ),
+              /* @__PURE__ */ jsx18(
+                TooltipButton,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "h-6 w-6 text-destructive hover:text-destructive",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    api.removeElement(element.id);
+                  },
+                  tooltip: "Delete",
+                  tooltipDelay: 500,
+                  children: /* @__PURE__ */ jsx18(Trash2, { className: "h-3 w-3" })
+                }
+              )
+            ] })
+          ]
+        },
+        element.id
+      );
+    }) }) }),
+    /* @__PURE__ */ jsx18("div", { className: "border-t p-2", children: /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs8("span", { children: [
+        elements.filter((e) => e.visible !== false).length,
+        " visible"
+      ] }),
+      /* @__PURE__ */ jsx18("span", { children: "\u2022" }),
+      /* @__PURE__ */ jsxs8("span", { children: [
+        elements.filter((e) => e.locked === true).length,
+        " locked"
+      ] })
+    ] }) })
+  ] });
+};
+
+// src/components/VisualEditorWorkspace.tsx
+import React20, { useCallback as useCallback4, useImperativeHandle } from "react";
+
+// src/components/Topbar.tsx
+import { Undo, Redo, Trash2 as Trash22, Download, Upload, Copy, Clipboard, CopyPlus, Image as Image2, X } from "lucide-react";
+
+// src/ui/switch.tsx
+import * as React17 from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var Switch = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
+  SwitchPrimitives.Root,
+  {
+    className: cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-secondary data-[state=unchecked]:bg-input",
+      className
+    ),
+    ...props,
+    ref,
+    children: /* @__PURE__ */ jsx19(
+      SwitchPrimitives.Thumb,
+      {
+        className: cn(
+          "pointer-events-none block h-5 w-5 rounded-full bg-primary shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-background"
+        )
+      }
+    )
+  }
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+// src/components/CustomActionRenderer.tsx
+import { Plus } from "lucide-react";
+import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
+var CustomActionRenderer = ({
+  action,
+  api,
+  layout = "horizontal"
+}) => {
+  const isDisabled = (disabled) => {
+    if (typeof disabled === "function") {
+      return disabled(api);
+    }
+    return disabled || false;
+  };
+  const isVertical = layout === "vertical";
+  switch (action.type) {
+    case "button":
+      return /* @__PURE__ */ jsx20(
+        TooltipButton,
+        {
+          variant: isVertical ? "outline" : "ghost",
+          size: isVertical ? "sm" : "icon",
+          onClick: () => action.onClick(api),
+          disabled: isDisabled(action.disabled),
+          className: isVertical ? "icon-button" : "h-8 w-8",
+          tooltip: action.label,
+          shortcut: action.shortcut,
+          tooltipDelay: 500,
+          tooltipSide: isVertical ? "right" : void 0,
+          children: action.icon || /* @__PURE__ */ jsx20(Plus, { className: "h-4 w-4" })
+        },
+        action.id
+      );
+    case "dropdown":
+      return /* @__PURE__ */ jsxs9(
+        "div",
+        {
+          className: isVertical ? "flex flex-col gap-1 px-1" : "flex items-center gap-2",
+          children: [
+            isVertical ? /* @__PURE__ */ jsx20(Label, { className: "text-xs", children: action.label }) : action.icon && /* @__PURE__ */ jsx20("span", { className: "text-muted-foreground", children: action.icon }),
+            /* @__PURE__ */ jsxs9(
+              Select,
+              {
+                value: action.value,
+                onValueChange: (value) => action.onChange(value, api),
+                disabled: isDisabled(action.disabled),
+                children: [
+                  /* @__PURE__ */ jsx20(SelectTrigger, { className: isVertical ? "h-8 w-full" : "h-8 w-auto min-w-[120px]", children: /* @__PURE__ */ jsx20(SelectValue, { placeholder: action.placeholder || action.label }) }),
+                  /* @__PURE__ */ jsx20(SelectContent, { children: action.options.map((option) => /* @__PURE__ */ jsx20(SelectItem, { value: option.value, children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
+                    option.icon && /* @__PURE__ */ jsx20("span", { children: option.icon }),
+                    /* @__PURE__ */ jsx20("span", { children: option.label })
+                  ] }) }, option.value)) })
+                ]
+              }
+            )
+          ]
+        },
+        action.id
+      );
+    case "input":
+      return /* @__PURE__ */ jsxs9(
+        "div",
+        {
+          className: isVertical ? "flex flex-col gap-1 px-1" : "flex items-center gap-2",
+          children: [
+            /* @__PURE__ */ jsxs9(Label, { className: "text-xs whitespace-nowrap", children: [
+              action.label,
+              isVertical ? "" : ":"
+            ] }),
+            /* @__PURE__ */ jsx20(
+              Input,
+              {
+                type: action.inputType || "text",
+                value: action.value,
+                onChange: (e) => action.onChange(e.target.value, api),
+                placeholder: action.placeholder,
+                disabled: isDisabled(action.disabled),
+                className: isVertical ? "h-8 w-full" : "h-8 w-32",
+                min: action.min,
+                max: action.max,
+                step: action.step
+              }
+            )
+          ]
+        },
+        action.id
+      );
+    case "color":
+      return /* @__PURE__ */ jsxs9(
+        "div",
+        {
+          className: isVertical ? "flex flex-col gap-1 px-1" : "flex items-center gap-2",
+          children: [
+            /* @__PURE__ */ jsxs9(Label, { className: "text-xs whitespace-nowrap", children: [
+              action.label,
+              isVertical ? "" : ":"
+            ] }),
+            /* @__PURE__ */ jsx20(
+              Input,
+              {
+                type: "color",
+                value: action.value,
+                onChange: (e) => action.onChange(e.target.value, api),
+                disabled: isDisabled(action.disabled),
+                className: isVertical ? "h-8 w-full p-1 cursor-pointer" : "h-8 w-16 p-1 cursor-pointer"
+              }
+            )
+          ]
+        },
+        action.id
+      );
+    case "toggle":
+      return /* @__PURE__ */ jsxs9(
+        "div",
+        {
+          className: isVertical ? "flex items-center justify-between gap-2 px-1" : "flex items-center gap-2",
+          children: [
+            action.icon && /* @__PURE__ */ jsx20("span", { className: "text-muted-foreground", children: action.icon }),
+            /* @__PURE__ */ jsx20(Label, { className: "text-xs whitespace-nowrap", children: action.label }),
+            /* @__PURE__ */ jsx20(
+              Switch,
+              {
+                checked: action.value,
+                onCheckedChange: (checked) => action.onChange(checked, api),
+                disabled: isDisabled(action.disabled)
+              }
+            )
+          ]
+        },
+        action.id
+      );
+    case "separator":
+      return /* @__PURE__ */ jsx20(
+        Separator,
+        {
+          orientation: isVertical ? "horizontal" : "vertical",
+          className: isVertical ? void 0 : "h-6"
+        },
+        action.id
+      );
+    default:
+      return null;
+  }
+};
+var CustomActionRenderer_default = CustomActionRenderer;
+
+// src/components/Topbar.tsx
+import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
+var Topbar = ({
+  api,
+  canvasSize,
+  canUndo,
+  canRedo,
+  onUndo,
+  onRedo,
+  onExport,
+  onImport,
+  setCanvasSize,
+  backgroundColor,
+  setBackgroundColor,
+  backgroundImage,
+  setBackgroundImage,
+  imageUrls,
+  clipboardRef,
+  enableSnapGuides = true,
+  onSnapGuidesChange,
+  config,
+  style,
+  className
+}) => {
+  const selectedElement = api.getSelectedElement();
+  const {
+    showUndo = true,
+    showRedo = true,
+    showDelete = true,
+    showCopy = true,
+    showPaste = true,
+    showDuplicate = true,
+    showExport = true,
+    showImport = true,
+    showCanvasSize = true,
+    showSnapGuides = true,
+    actionsStart = [],
+    actionsEnd = [],
+    actionsStartClassName = "",
+    actionsEndClassName = "",
+    customActions = []
+    // Backwards compatibility - defaults to end
+  } = config || {};
+  const defaultSnapGuidesAction = showSnapGuides && onSnapGuidesChange ? [
+    {
+      type: "toggle",
+      id: "snap-guides-toggle",
+      label: "Snap Guides",
+      value: enableSnapGuides,
+      onChange: (value) => {
+        onSnapGuidesChange(value);
+      }
+    }
+  ] : [];
+  const endActions = [...actionsEnd, ...defaultSnapGuidesAction, ...customActions];
+  const handleDelete = () => {
+    if (selectedElement) {
+      api.removeElement(selectedElement.id);
+    }
+  };
+  const handleCopy = () => {
+    const copied = api.copyElement();
+    if (copied && clipboardRef) {
+      clipboardRef.current = copied;
+    }
+  };
+  const handlePaste = () => {
+    if (clipboardRef?.current) {
+      api.pasteElement(clipboardRef.current);
+    }
+  };
+  const handleDuplicate = () => {
+    api.duplicateElement();
+  };
+  const isDisabled = (disabled) => {
+    if (typeof disabled === "function") {
+      return disabled(api);
+    }
+    return disabled || false;
+  };
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      className: `flex h-12 items-center px-3 py-1 bg-popover border-b gap-2 ${className}`,
+      style,
+      children: [
+        showCanvasSize && /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx21("span", { className: "text-sm", children: "Canvas:" }),
+          /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx21("span", { className: "text-xs text-muted-foreground whitespace-nowrap", children: "W:" }),
+            /* @__PURE__ */ jsx21(
+              Input,
+              {
+                placeholder: "Width",
+                className: "h-8 w-20",
+                type: "number",
+                step: 1,
+                value: canvasSize.width,
+                onChange: (e) => setCanvasSize(Number(Number(e.target.value).toFixed(0)), canvasSize.height)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx21("span", { className: "text-xs text-muted-foreground whitespace-nowrap", children: "H:" }),
+            /* @__PURE__ */ jsx21(
+              Input,
+              {
+                placeholder: "Height",
+                className: "h-8 w-20",
+                type: "number",
+                step: 1,
+                value: canvasSize.height,
+                onChange: (e) => setCanvasSize(canvasSize.width, Number(Number(e.target.value).toFixed(0)))
+              }
+            )
+          ] }),
+          setBackgroundColor && backgroundColor && /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx21("span", { className: "text-xs text-muted-foreground whitespace-nowrap", children: "BG:" }),
+            /* @__PURE__ */ jsx21(
+              Input,
+              {
+                placeholder: "#000000",
+                className: "h-8 w-24",
+                type: "color",
+                value: backgroundColor,
+                onChange: (e) => setBackgroundColor(e.target.value)
+              }
+            )
+          ] }),
+          setBackgroundImage && imageUrls && imageUrls.size > 0 && /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx21("span", { className: "text-xs text-muted-foreground whitespace-nowrap", children: "Texture:" }),
+            backgroundImage ? /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsxs10(Select, { value: backgroundImage, onValueChange: setBackgroundImage, children: [
+                /* @__PURE__ */ jsx21(SelectTrigger, { className: "h-8 w-32", children: /* @__PURE__ */ jsx21(SelectValue, { placeholder: "None" }) }),
+                /* @__PURE__ */ jsx21(SelectContent, { children: Array.from(imageUrls.keys()).map((imageName) => /* @__PURE__ */ jsx21(SelectItem, { value: imageName, children: imageName }, imageName)) })
+              ] }),
+              /* @__PURE__ */ jsx21(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "h-8 w-8",
+                  onClick: () => setBackgroundImage(""),
+                  children: /* @__PURE__ */ jsx21(X, { className: "h-3 w-3" })
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxs10(Select, { value: "", onValueChange: setBackgroundImage, children: [
+              /* @__PURE__ */ jsx21(SelectTrigger, { className: "h-8 w-32", children: /* @__PURE__ */ jsx21(SelectValue, { placeholder: "None", children: /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx21(Image2, { className: "h-3 w-3" }),
+                /* @__PURE__ */ jsx21("span", { children: "None" })
+              ] }) }) }),
+              /* @__PURE__ */ jsx21(SelectContent, { children: Array.from(imageUrls.keys()).map((imageName) => /* @__PURE__ */ jsx21(SelectItem, { value: imageName, children: imageName }, imageName)) })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs10("div", { className: "flex w-full gap-2", children: [
+          actionsStart.length > 0 && /* @__PURE__ */ jsxs10(Fragment4, { children: [
+            /* @__PURE__ */ jsx21("div", { className: `flex items-center gap-1 ${actionsStartClassName}`, children: actionsStart.map((action) => /* @__PURE__ */ jsx21(
+              CustomActionRenderer_default,
+              {
+                action,
+                api,
+                layout: "horizontal"
+              },
+              action.id
+            )) }),
+            (showUndo || showRedo || showDelete || showExport && onExport || showImport && onImport || endActions.length > 0) && /* @__PURE__ */ jsx21(Separator, { orientation: "vertical", className: "h-6" })
+          ] }),
+          (showUndo || showRedo) && /* @__PURE__ */ jsxs10(Fragment4, { children: [
+            /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-1", children: [
+              showUndo && /* @__PURE__ */ jsx21(
+                TooltipButton,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  onClick: onUndo,
+                  disabled: !canUndo,
+                  className: "h-8 w-8",
+                  tooltip: "Undo",
+                  shortcut: "Ctrl+Z",
+                  tooltipDelay: 500,
+                  children: /* @__PURE__ */ jsx21(Undo, { className: "h-4 w-4" })
+                }
+              ),
+              showRedo && /* @__PURE__ */ jsx21(
+                TooltipButton,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  onClick: onRedo,
+                  disabled: !canRedo,
+                  className: "h-8 w-8",
+                  tooltip: "Redo",
+                  shortcut: "Ctrl+Y",
+                  tooltipDelay: 500,
+                  children: /* @__PURE__ */ jsx21(Redo, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            (showCopy || showPaste || showDuplicate || showDelete || showExport && onExport || showImport && onImport || endActions.length > 0) && /* @__PURE__ */ jsx21(Separator, { orientation: "vertical", className: "h-6" })
+          ] }),
+          (showCopy || showPaste || showDuplicate || showDelete) && /* @__PURE__ */ jsxs10(Fragment4, { children: [
+            /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-1", children: [
+              showCopy && /* @__PURE__ */ jsx21(
+                TooltipButton,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  onClick: handleCopy,
+                  disabled: !selectedElement,
+                  className: "h-8 w-8",
+                  tooltip: "Copy",
+                  shortcut: "Ctrl+C",
+                  tooltipDelay: 500,
+                  children: /* @__PURE__ */ jsx21(Copy, { className: "h-4 w-4" })
+                }
+              ),
+              showPaste && /* @__PURE__ */ jsx21(
+                TooltipButton,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  onClick: handlePaste,
+                  disabled: !clipboardRef?.current,
+                  className: "h-8 w-8",
+                  tooltip: "Paste",
+                  shortcut: "Ctrl+V",
+                  tooltipDelay: 500,
+                  children: /* @__PURE__ */ jsx21(Clipboard, { className: "h-4 w-4" })
+                }
+              ),
+              showDuplicate && /* @__PURE__ */ jsx21(
+                TooltipButton,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  onClick: handleDuplicate,
+                  disabled: !selectedElement,
+                  className: "h-8 w-8",
+                  tooltip: "Duplicate",
+                  shortcut: "Ctrl+D",
+                  tooltipDelay: 500,
+                  children: /* @__PURE__ */ jsx21(CopyPlus, { className: "h-4 w-4" })
+                }
+              ),
+              showDelete && /* @__PURE__ */ jsx21(
+                TooltipButton,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  onClick: handleDelete,
+                  disabled: !selectedElement,
+                  className: "h-8 w-8 text-destructive hover:text-destructive",
+                  tooltip: "Delete Selected",
+                  shortcut: "Delete",
+                  tooltipDelay: 500,
+                  children: /* @__PURE__ */ jsx21(Trash22, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            (showExport && onExport || showImport && onImport || endActions.length > 0) && /* @__PURE__ */ jsx21(Separator, { orientation: "vertical", className: "h-6" })
+          ] }),
+          (showExport && onExport || showImport && onImport) && /* @__PURE__ */ jsxs10(Fragment4, { children: [
+            /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-1", children: [
+              showExport && onExport && /* @__PURE__ */ jsx21(
+                TooltipButton,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  onClick: onExport,
+                  className: "h-8 w-8",
+                  tooltip: "Export to JSON",
+                  tooltipDelay: 500,
+                  children: /* @__PURE__ */ jsx21(Download, { className: "h-4 w-4" })
+                }
+              ),
+              showImport && onImport && /* @__PURE__ */ jsx21(
+                TooltipButton,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  onClick: onImport,
+                  className: "h-8 w-8",
+                  tooltip: "Import from JSON",
+                  tooltipDelay: 500,
+                  children: /* @__PURE__ */ jsx21(Upload, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            endActions.length > 0 && /* @__PURE__ */ jsx21(Separator, { orientation: "vertical", className: "h-6" })
+          ] }),
+          endActions.length > 0 && /* @__PURE__ */ jsx21("div", { className: `flex items-center gap-1 ${actionsEndClassName}`, children: endActions.map((action) => /* @__PURE__ */ jsx21(CustomActionRenderer_default, { action, api, layout: "horizontal" }, action.id)) })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/Canvas.tsx
+import React19, { useCallback as useCallback3, useRef as useRef3, useState } from "react";
+import { Stage as Stage2, Layer as Layer2, Rect as Rect2, Image as KonvaImage2 } from "react-konva";
+
+// src/components/SnapGuides.tsx
+import { Line } from "react-konva";
+import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+var SnapGuides = ({
+  verticalGuides,
+  horizontalGuides,
+  canvasSize
+}) => {
+  return /* @__PURE__ */ jsxs11(Fragment5, { children: [
+    verticalGuides.map((guide, index) => /* @__PURE__ */ jsx22(
+      Line,
+      {
+        points: [guide.position, 0, guide.position, canvasSize.height],
+        stroke: guide.type === "center" ? "#ff00ff" : "#00ff00",
+        strokeWidth: 1,
+        dash: guide.type === "center" ? [4, 4] : void 0,
+        listening: false
+      },
+      `v-${index}`
+    )),
+    horizontalGuides.map((guide, index) => /* @__PURE__ */ jsx22(
+      Line,
+      {
+        points: [0, guide.position, canvasSize.width, guide.position],
+        stroke: guide.type === "center" ? "#ff00ff" : "#00ff00",
+        strokeWidth: 1,
+        dash: guide.type === "center" ? [4, 4] : void 0,
+        listening: false
+      },
+      `h-${index}`
+    ))
+  ] });
+};
+
+// src/components/CentralizedTransformer.tsx
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { Transformer as Transformer2 } from "react-konva";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var CentralizedTransformer = ({
+  selectedElementId,
+  stageRef,
+  isLocked = false,
+  updateTrigger = 0,
+  onTransformEnd,
+  onTransform
+}) => {
+  const transformerRef = useRef2(null);
+  useEffect2(() => {
+    const transformer = transformerRef.current;
+    const stage = stageRef.current;
+    if (!transformer || !stage || !selectedElementId || isLocked) {
+      if (transformer) {
+        transformer.nodes([]);
+        transformer.getLayer()?.batchDraw();
+      }
+      return;
+    }
+    const findNodeById = (id) => {
+      const layer = stage.getLayers()[0];
+      if (!layer) return null;
+      const findInChildren = (node) => {
+        if (node.attrs.id === id || node.id() === id) {
+          return node;
+        }
+        const children = node.getChildren?.();
+        if (children) {
+          for (const child of children) {
+            const found = findInChildren(child);
+            if (found) return found;
+          }
+        }
+        return null;
+      };
+      return findInChildren(layer);
+    };
+    const selectedNode = findNodeById(selectedElementId);
+    if (selectedNode && selectedNode.draggable()) {
+      transformer.nodes([selectedNode]);
+      transformer.getLayer()?.batchDraw();
+    } else {
+      transformer.nodes([]);
+      transformer.getLayer()?.batchDraw();
+    }
+  }, [selectedElementId, stageRef, isLocked, updateTrigger]);
+  const handleTransform = (e) => {
+    if (!onTransform || !selectedElementId) return;
+    const node = e.target;
+    const scaleX = node.scaleX();
+    const scaleY = node.scaleY();
+    const updates = {
+      position: {
+        x: node.x(),
+        y: node.y()
+      },
+      size: {
+        width: Math.max(5, node.width() * scaleX),
+        height: Math.max(5, node.height() * scaleY)
+      },
+      rotation: node.rotation()
+    };
+    onTransform(selectedElementId, updates);
+  };
+  const handleTransformEnd = (e) => {
+    if (!onTransformEnd || !selectedElementId) return;
+    const node = e.target;
+    const scaleX = node.scaleX();
+    const scaleY = node.scaleY();
+    node.scaleX(1);
+    node.scaleY(1);
+    const updates = {
+      position: {
+        x: node.x(),
+        y: node.y()
+      },
+      size: {
+        width: Math.max(5, node.width() * scaleX),
+        height: Math.max(5, node.height() * scaleY)
+      },
+      rotation: node.rotation()
+    };
+    onTransformEnd(selectedElementId, updates);
+  };
+  if (isLocked || !selectedElementId) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx23(
+    Transformer2,
+    {
+      ref: transformerRef,
+      rotateEnabled: true,
+      rotationSnaps: [0, 90, 180, 270],
+      keepRatio: false,
+      anchorCornerRadius: 2,
+      flipEnabled: false,
+      enabledAnchors: [
+        "top-left",
+        "top-right",
+        "bottom-left",
+        "bottom-right",
+        "middle-left",
+        "middle-right",
+        "top-center",
+        "bottom-center"
+      ],
+      boundBoxFunc: (oldBox, newBox) => {
+        if (newBox.width < 20 || newBox.height < 20) {
+          return oldBox;
+        }
+        return newBox;
+      },
+      onTransform: handleTransform,
+      onTransformEnd: handleTransformEnd
+    }
+  );
+};
+
+// src/components/Canvas.tsx
+import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
+var Canvas = ({
+  canvasSize,
+  elements,
+  selectedElementId,
+  registry,
+  mode,
+  readonly = false,
+  enableSnapGuides = true,
+  enablePanZoom = true,
+  backgroundImageUrl,
+  hideElements = false,
+  onSelectElement,
+  onTransformElement,
+  style,
+  className = ""
+}) => {
+  const stageRef = useRef3(null);
+  const containerRef = useRef3(null);
+  const [snapGuides, setSnapGuides] = useState({ vertical: [], horizontal: [] });
+  const [stageScale, setStageScale] = useState(1);
+  const [stagePosition, setStagePosition] = useState({ x: 0, y: 0 });
+  const isPanning = useRef3(false);
+  const [containerSize, setContainerSize] = useState({ width: 800, height: 600 });
+  const [backgroundImage, setBackgroundImage] = useState(null);
+  const [transformerUpdateTrigger, setTransformerUpdateTrigger] = useState(0);
+  React19.useEffect(() => {
+    if (!backgroundImageUrl) {
+      setBackgroundImage(null);
+      return;
+    }
+    const img = new window.Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => {
+      setBackgroundImage(img);
+    };
+    img.onerror = (err) => {
+      console.error("Failed to load canvas background image:", err);
+      setBackgroundImage(null);
+    };
+    img.src = backgroundImageUrl;
+    return () => {
+      img.onload = null;
+      img.onerror = null;
+    };
+  }, [backgroundImageUrl]);
+  React19.useEffect(() => {
+    const updateSize = () => {
+      if (containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect();
+        setContainerSize({
+          width: rect.width,
+          height: rect.height
+        });
+      }
+    };
+    updateSize();
+    const resizeObserver = new ResizeObserver(updateSize);
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+  const stageSize = React19.useMemo(() => {
+    const width = Math.max(containerSize.width, canvasSize.width);
+    const height = Math.max(containerSize.height, canvasSize.height);
+    return { width, height };
+  }, [containerSize, canvasSize]);
+  const layerOffset = React19.useMemo(() => {
+    return {
+      x: Math.max(0, (stageSize.width - canvasSize.width) / 2),
+      y: Math.max(0, (stageSize.height - canvasSize.height) / 2)
+    };
+  }, [stageSize, canvasSize]);
+  const handleStageClick = useCallback3(
+    (e) => {
+      if (e.target === e.target.getStage()) {
+        onSelectElement(null);
+      }
+    },
+    [onSelectElement]
+  );
+  const onClearSnapGuides = useCallback3(() => {
+    setSnapGuides({ vertical: [], horizontal: [] });
+  }, []);
+  const onTransformerUpdate = useCallback3(() => {
+    setTransformerUpdateTrigger((prev) => prev + 1);
+  }, []);
+  const handleWheel = useCallback3(
+    (e) => {
+      if (!enablePanZoom) return;
+      e.evt.preventDefault();
+      const stage = stageRef.current;
+      if (!stage) return;
+      const oldScale = stage.scaleX();
+      const pointer = stage.getPointerPosition();
+      const mousePointTo = {
+        x: (pointer.x - stage.x()) / oldScale,
+        y: (pointer.y - stage.y()) / oldScale
+      };
+      const scaleBy = 1.05;
+      const direction = e.evt.deltaY > 0 ? -1 : 1;
+      let newScale = direction > 0 ? oldScale * scaleBy : oldScale / scaleBy;
+      newScale = Math.max(0.1, Math.min(5, newScale));
+      const newPos = {
+        x: pointer.x - mousePointTo.x * newScale,
+        y: pointer.y - mousePointTo.y * newScale
+      };
+      setStageScale(newScale);
+      setStagePosition(newPos);
+    },
+    [enablePanZoom]
+  );
+  const handleMouseDown = useCallback3(
+    (e) => {
+      if (!enablePanZoom) return;
+      if (e.evt.button === 1 || e.evt.button === 0 && e.evt.shiftKey) {
+        e.evt.preventDefault();
+        isPanning.current = true;
+      }
+    },
+    [enablePanZoom]
+  );
+  const handleMouseMove = useCallback3(
+    (e) => {
+      if (!enablePanZoom || !isPanning.current) return;
+      e.evt.preventDefault();
+      const stage = stageRef.current;
+      if (!stage) return;
+      const newPos = {
+        x: stagePosition.x + e.evt.movementX,
+        y: stagePosition.y + e.evt.movementY
+      };
+      setStagePosition(newPos);
+    },
+    [enablePanZoom, stagePosition]
+  );
+  const handleMouseUp = useCallback3(() => {
+    isPanning.current = false;
+  }, []);
+  React19.useEffect(() => {
+    const stage = stageRef.current;
+    if (stage) {
+      stage.scale({ x: stageScale, y: stageScale });
+      stage.position(stagePosition);
+      stage.batchDraw();
+    }
+  }, [stageScale, stagePosition]);
+  const renderElement = useCallback3(
+    (element) => {
+      const isSelected = selectedElementId === element.id;
+      const renderer = registry.get(element.type);
+      if (!renderer) {
+        console.warn(`No renderer found for element type: ${element.type}`);
+        return null;
+      }
+      const RendererComponent = renderer.renderComponent;
+      if (!RendererComponent) {
+        console.warn(`No renderComponent found for element type: ${element.type}`);
+        return null;
+      }
+      const commonProps = {
+        element,
+        isSelected,
+        onSelect: () => !readonly && onSelectElement(element.id),
+        onTransform: (updates) => !readonly && onTransformElement(element.id, updates),
+        // Snapping callbacks
+        allElements: elements,
+        canvasSize,
+        onSnapGuides: enableSnapGuides ? setSnapGuides : void 0,
+        onClearSnapGuides: enableSnapGuides ? onClearSnapGuides : void 0,
+        // Pass element ID for centralized transformer lookup
+        elementId: element.id,
+        // Disable individual transformers (centralized transformer will handle it)
+        disableTransformer: true,
+        // Callback to notify when node structure changes (e.g., image loads)
+        onNodeUpdate: onTransformerUpdate,
+        // Pass mode context to renderers (e.g., cardData for TemplatedText)
+        ...mode?.context || {}
+      };
+      return /* @__PURE__ */ jsx24(RendererComponent, { ...commonProps }, element.id);
+    },
+    [
+      selectedElementId,
+      registry,
+      readonly,
+      onSelectElement,
+      onTransformElement,
+      elements,
+      canvasSize,
+      enableSnapGuides,
+      onClearSnapGuides,
+      onTransformerUpdate,
+      mode
+    ]
+  );
+  const sortedElements = [...elements].sort((a, b) => a.zIndex - b.zIndex);
+  return /* @__PURE__ */ jsx24(
+    "div",
+    {
+      className: `flex flex-1 overflow-hidden items-center justify-center ${className}`,
+      style,
+      children: /* @__PURE__ */ jsxs12(
+        "div",
+        {
+          ref: containerRef,
+          className: "flex relative w-full h-full items-center justify-center overflow-hidden",
+          children: [
+            enablePanZoom && stageScale !== 1 && /* @__PURE__ */ jsxs12(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  top: 10,
+                  right: 10,
+                  zIndex: 10,
+                  background: "rgba(0, 0, 0, 0.7)",
+                  color: "white",
+                  padding: "4px 12px",
+                  borderRadius: "4px",
+                  fontSize: "12px",
+                  fontWeight: 500,
+                  pointerEvents: "none"
+                },
+                children: [
+                  Math.round(stageScale * 100),
+                  "%"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx24(
+              Stage2,
+              {
+                className: "w-full h-full",
+                ref: stageRef,
+                width: stageSize.width,
+                height: stageSize.height,
+                onClick: handleStageClick,
+                onTap: handleStageClick,
+                onWheel: handleWheel,
+                onMouseDown: handleMouseDown,
+                onMouseMove: handleMouseMove,
+                onMouseUp: handleMouseUp,
+                style: {
+                  boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
+                  cursor: isPanning.current ? "grabbing" : "default"
+                },
+                children: /* @__PURE__ */ jsxs12(Layer2, { x: layerOffset.x, y: layerOffset.y, listening: true, children: [
+                  backgroundImage ? /* @__PURE__ */ jsx24(
+                    KonvaImage2,
+                    {
+                      x: 0,
+                      y: 0,
+                      width: canvasSize.width,
+                      height: canvasSize.height,
+                      image: backgroundImage,
+                      listening: false
+                    }
+                  ) : /* @__PURE__ */ jsx24(
+                    Rect2,
+                    {
+                      x: 0,
+                      y: 0,
+                      width: canvasSize.width,
+                      height: canvasSize.height,
+                      fill: mode?.backgroundColor || "#ffffff",
+                      listening: false
+                    }
+                  ),
+                  !hideElements && sortedElements.map(renderElement),
+                  enableSnapGuides && /* @__PURE__ */ jsx24(
+                    SnapGuides,
+                    {
+                      verticalGuides: snapGuides.vertical,
+                      horizontalGuides: snapGuides.horizontal,
+                      canvasSize
+                    }
+                  ),
+                  /* @__PURE__ */ jsx24(
+                    CentralizedTransformer,
+                    {
+                      selectedElementId,
+                      stageRef,
+                      isLocked: readonly,
+                      updateTrigger: transformerUpdateTrigger,
+                      onTransform: (elementId, updates) => {
+                        if (!enableSnapGuides) return;
+                        const element = elements.find((el) => el.id === elementId);
+                        if (!element) return;
+                        const tempElement = {
+                          ...element,
+                          position: updates.position || element.position,
+                          size: updates.size || element.size,
+                          rotation: updates.rotation ?? element.rotation
+                        };
+                        const snapResult = getSnappingPosition(
+                          tempElement,
+                          tempElement.position.x,
+                          tempElement.position.y,
+                          elements.filter((el) => el.id !== elementId),
+                          {
+                            threshold: 5,
+                            snapToElements: true,
+                            snapToCanvas: true,
+                            canvasSize
+                          }
+                        );
+                        setSnapGuides({
+                          vertical: snapResult.verticalGuides,
+                          horizontal: snapResult.horizontalGuides
+                        });
+                      },
+                      onTransformEnd: (elementId, updates) => {
+                        onTransformElement(elementId, updates);
+                        setSnapGuides({ vertical: [], horizontal: [] });
+                      }
+                    }
+                  )
+                ] })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+
+// 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 = ({
+  api,
+  elementRenderers,
+  canvasSize,
+  config,
+  style,
+  className
+}) => {
+  const selectedElement = api.getSelectedElement();
+  const {
+    showElementTools = true,
+    hiddenElementTypes = [],
+    toolsStart = [],
+    toolsEnd = [],
+    toolsStartClassName = "",
+    toolsEndClassName = "",
+    customTools = []
+    // Backwards compatibility - defaults to end
+  } = config || {};
+  const endTools = [...toolsEnd, ...customTools];
+  const visibleRenderers = showElementTools ? elementRenderers.filter((renderer) => !hiddenElementTypes.includes(renderer.type)) : [];
+  const handleCreateElement = (renderer) => {
+    const newElement = createElement(renderer.type, renderer.defaultProps, {
+      position: { x: canvasSize.width / 2, y: canvasSize.height / 2 },
+      // Center of canvas
+      size: {
+        width: renderer.defaultSize?.width || 100,
+        height: renderer.defaultSize?.height || 100
+      },
+      zIndex: api.getAllElements().length
+      // Top of stack
+    });
+    api.addElement(newElement);
+    api.selectElement(newElement.id);
+  };
+  const isDisabled = (disabled) => {
+    if (typeof disabled === "function") {
+      return disabled(api);
+    }
+    return disabled || false;
+  };
+  return /* @__PURE__ */ jsxs13(
+    "div",
+    {
+      className: `flex flex-col justify-start items-center bg-popover gap-2 p-2 ${className}`,
+      style,
+      children: [
+        toolsStart.length > 0 && /* @__PURE__ */ jsxs13(Fragment6, { children: [
+          /* @__PURE__ */ jsx25("div", { className: `flex flex-col gap-1 ${toolsStartClassName}`, children: toolsStart.map((tool) => /* @__PURE__ */ jsx25(CustomActionRenderer_default, { action: tool, api, layout: "vertical" }, tool.id)) }),
+          (visibleRenderers.length > 0 || endTools.length > 0) && /* @__PURE__ */ jsx25(Separator, { orientation: "horizontal" })
+        ] }),
+        visibleRenderers.length > 0 && /* @__PURE__ */ jsxs13(Fragment6, { children: [
+          /* @__PURE__ */ jsx25("div", { className: "flex flex-col gap-1", children: visibleRenderers.map((renderer) => /* @__PURE__ */ jsx25(
+            TooltipButton,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => handleCreateElement(renderer),
+              className: "icon-button",
+              tooltip: `Add ${renderer.displayName}`,
+              tooltipDelay: 500,
+              tooltipSide: "right",
+              children: renderer.icon || /* @__PURE__ */ jsx25(Plus2, { className: "h-4 w-4" })
+            },
+            renderer.type
+          )) }),
+          endTools.length > 0 && /* @__PURE__ */ jsx25(Separator, { orientation: "horizontal" })
+        ] }),
+        endTools.length > 0 && /* @__PURE__ */ jsx25("div", { className: `flex flex-col gap-1 ${toolsEndClassName}`, children: endTools.map((tool) => /* @__PURE__ */ jsx25(CustomActionRenderer_default, { action: tool, api, layout: "vertical" }, tool.id)) })
+      ]
+    }
+  );
+};
+
+// src/components/VisualEditorWorkspace.tsx
+import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
+var VisualEditorWorkspace = ({
+  mode,
+  initialData,
+  width,
+  height,
+  readonly = false,
+  onChange,
+  customElements = [],
+  showTopbar = true,
+  showToolbar = true,
+  showInspector = true,
+  showLayers = true,
+  showAssetPicker = true,
+  showCanvas = true,
+  enableSnapGuides = true,
+  enablePanZoom = true,
+  backgroundImageUrl,
+  hideElements = false,
+  className = "",
+  apiRef
+}) => {
+  const elementList = React20.useMemo(() => {
+    return [...defaultElements, ...mode?.registeredElements || [], ...customElements];
+  }, [mode, customElements]);
+  const registry = useElementRegistry(elementList);
+  const { state, api, undo, redo, canUndo, canRedo, setCanvasSize } = useEditorState(mode || null);
+  const clipboardRef = React20.useRef(null);
+  const [snapGuidesEnabled, setSnapGuidesEnabled] = React20.useState(enableSnapGuides);
+  const [backgroundColor, setBackgroundColor] = React20.useState(
+    mode?.backgroundColor || "#1a1a1a"
+  );
+  const [backgroundImage, setBackgroundImage] = React20.useState(
+    mode?.backgroundImage || ""
+  );
+  React20.useEffect(() => {
+    setSnapGuidesEnabled(enableSnapGuides);
+  }, [enableSnapGuides]);
+  React20.useEffect(() => {
+    if (mode?.backgroundColor) {
+      setBackgroundColor(mode.backgroundColor);
+    }
+  }, [mode?.backgroundColor]);
+  React20.useEffect(() => {
+    setBackgroundImage(mode?.backgroundImage || "");
+  }, [mode?.backgroundImage]);
+  const canvasSize = state.canvasSize;
+  useImperativeHandle(apiRef, () => api, [api]);
+  React20.useEffect(() => {
+    if (initialData && initialData.elements && initialData.elements.length > 0) {
+      api.loadElements(initialData.elements);
+      if (initialData.width && initialData.height) {
+        setCanvasSize(initialData.width, initialData.height);
+      }
+    }
+  }, []);
+  const availableRenderers = Array.from(registry.getAll().values());
+  const selectedElement = state.selectedElementId ? state.elements.find((el) => el.id === state.selectedElementId) || null : null;
+  const selectedRenderer = selectedElement ? registry.get(selectedElement.type) || null : null;
+  const handleExport = useCallback4(() => {
+    const data = {
+      width: canvasSize.width,
+      height: canvasSize.height,
+      elements: state.elements,
+      metadata: {
+        version: "1.0",
+        mode: mode?.name || "default",
+        created: (/* @__PURE__ */ new Date()).toISOString()
+      }
+    };
+    const json = exportToJSON(data);
+    const blob = new Blob([json], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `canvas-${Date.now()}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }, [state.elements, canvasSize, mode]);
+  const handleImport = useCallback4(() => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = ".json";
+    input.onchange = async (e) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+      try {
+        const text = await file.text();
+        const imported = importFromJSON(text);
+        if (imported) {
+          state.elements.forEach((el) => api.removeElement(el.id));
+          imported.elements.forEach((el) => api.addElement(el));
+          if (imported.width && imported.height) {
+            setCanvasSize(imported.width, imported.height);
+          }
+        }
+      } catch (error) {
+        console.error("Failed to import:", error);
+        alert(`Failed to import: ${error.message}`);
+      }
+    };
+    input.click();
+  }, [state.elements, api]);
+  const onChangeRef = React20.useRef(onChange);
+  React20.useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  React20.useEffect(() => {
+    if (onChangeRef.current) {
+      onChangeRef.current({
+        width: canvasSize.width,
+        height: canvasSize.height,
+        elements: state.elements,
+        metadata: {
+          backgroundColor,
+          backgroundImage
+        }
+      });
+    }
+  }, [state.elements, canvasSize, backgroundColor, backgroundImage]);
+  React20.useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (readonly) return;
+      if (e.ctrlKey && e.key === "z" && !e.shiftKey) {
+        e.preventDefault();
+        if (canUndo) undo();
+      } else if (e.ctrlKey && e.key === "y" || e.ctrlKey && e.shiftKey && e.key === "Z") {
+        e.preventDefault();
+        if (canRedo) redo();
+      } else if (e.key === "Delete" && selectedElement) {
+        e.preventDefault();
+        api.removeElement(selectedElement.id);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        api.selectElement(null);
+      } else if (e.ctrlKey && e.key === "c" && selectedElement) {
+        e.preventDefault();
+        const copied = api.copyElement();
+        if (copied) {
+          clipboardRef.current = copied;
+        }
+      } else if (e.ctrlKey && e.key === "v" && clipboardRef.current) {
+        e.preventDefault();
+        api.pasteElement(clipboardRef.current);
+      } else if (e.ctrlKey && e.key === "d" && selectedElement) {
+        e.preventDefault();
+        api.duplicateElement();
+      }
+      const isInputFocused = () => {
+        const active = document.activeElement;
+        if (!active) return false;
+        if (active === document.body) return false;
+        if (active.isContentEditable) return true;
+        const tag = active.tagName?.toLowerCase();
+        if (tag === "input" || tag === "textarea" || tag === "select") return true;
+        const role = active.getAttribute ? active.getAttribute("role") : null;
+        if (role === "textbox") return true;
+        return false;
+      };
+      if (selectedElement && !isInputFocused()) {
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          api.moveElement(selectedElement.id, 0, -1);
+        } else if (e.key === "ArrowDown") {
+          e.preventDefault();
+          api.moveElement(selectedElement.id, 0, 1);
+        } else if (e.key === "ArrowLeft") {
+          e.preventDefault();
+          api.moveElement(selectedElement.id, -1, 0);
+        } else if (e.key === "ArrowRight") {
+          e.preventDefault();
+          api.moveElement(selectedElement.id, 1, 0);
+        }
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [canUndo, canRedo, undo, redo, selectedElement, api, readonly]);
+  return /* @__PURE__ */ jsxs14("div", { className: `flex flex-col ${className}`, children: [
+    showTopbar && /* @__PURE__ */ jsx26(
+      Topbar,
+      {
+        api,
+        canvasSize,
+        canUndo,
+        canRedo,
+        onUndo: undo,
+        onRedo: redo,
+        onExport: handleExport,
+        onImport: handleImport,
+        setCanvasSize,
+        backgroundColor,
+        setBackgroundColor,
+        backgroundImage,
+        setBackgroundImage,
+        imageUrls: mode?.context?.imageUrls,
+        clipboardRef,
+        enableSnapGuides: snapGuidesEnabled,
+        onSnapGuidesChange: setSnapGuidesEnabled,
+        config: mode?.topbarConfig
+      }
+    ),
+    /* @__PURE__ */ jsxs14("div", { className: "flex w-full h-full overflow-hidden", children: [
+      showToolbar && /* @__PURE__ */ jsx26(
+        Toolbar,
+        {
+          api,
+          elementRenderers: availableRenderers,
+          canvasSize,
+          config: mode?.toolbarConfig
+        }
+      ),
+      showCanvas && /* @__PURE__ */ jsx26(
+        Canvas,
+        {
+          canvasSize,
+          elements: state.elements,
+          selectedElementId: state.selectedElementId,
+          registry,
+          mode: mode ? { ...mode, backgroundColor } : void 0,
+          readonly,
+          enableSnapGuides: snapGuidesEnabled,
+          enablePanZoom,
+          backgroundImageUrl: backgroundImage && mode?.context?.imageUrls ? mode.context.imageUrls.get(backgroundImage) : void 0,
+          hideElements,
+          onSelectElement: (id) => api.selectElement(id),
+          onTransformElement: (id, updates) => api.updateElement(id, updates)
+        }
+      ),
+      showLayers && /* @__PURE__ */ jsx26(
+        LayersPanel,
+        {
+          elements: state.elements,
+          selectedElementId: state.selectedElementId,
+          api,
+          elementRenderers: registry.getMap(),
+          className: "w-64"
+        }
+      ),
+      showInspector && /* @__PURE__ */ jsxs14("div", { className: "w-80 h-full border-l bg-background flex flex-col", children: [
+        /* @__PURE__ */ jsx26("div", { className: "flex-1 min-h-0 overflow-auto", children: /* @__PURE__ */ jsx26(
+          Inspector,
+          {
+            selectedElement,
+            elementRenderer: selectedRenderer,
+            api,
+            mode,
+            canvasSize,
+            setCanvasSize
+          }
+        ) }),
+        showAssetPicker && mode?.assetPickerComponent && (!mode.assetPickerPosition || mode.assetPickerPosition === "bottom") && React20.createElement(mode.assetPickerComponent, {
+          ...mode.assetPickerProps,
+          api,
+          className: mode.assetPickerHeight || "h-[40%]"
+        })
+      ] }),
+      showAssetPicker && mode?.assetPickerComponent && mode.assetPickerPosition === "right" && React20.createElement(mode.assetPickerComponent, {
+        ...mode.assetPickerProps,
+        api,
+        className: `border-l ${mode.assetPickerHeight || "w-80"}`
+      })
+    ] })
+  ] });
+};
+
+// src/components/AssetPicker.tsx
+import React21 from "react";
+import { Search } from "lucide-react";
+import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
+var AssetPicker = ({
+  assets,
+  onAssetSelect,
+  renderAsset,
+  className = "",
+  title = "Assets"
+}) => {
+  const [searchQuery, setSearchQuery] = React21.useState("");
+  const filteredAssets = React21.useMemo(() => {
+    if (!searchQuery) return assets;
+    const query = searchQuery.toLowerCase();
+    return assets.filter((asset) => asset.name.toLowerCase().includes(query));
+  }, [assets, searchQuery]);
+  const defaultRenderAsset = React21.useCallback(
+    (asset) => {
+      const isImage = asset.name.match(/\.(jpg|jpeg|png|gif|svg|webp)$/i);
+      return /* @__PURE__ */ jsxs15(
+        "div",
+        {
+          className: "flex flex-col items-center p-2 border rounded hover:bg-accent cursor-pointer transition-colors",
+          onClick: () => onAssetSelect?.(asset.path),
+          title: asset.name,
+          children: [
+            isImage ? /* @__PURE__ */ jsx27("div", { className: "w-16 h-16 flex items-center justify-center bg-muted rounded mb-1", children: /* @__PURE__ */ jsx27(
+              "img",
+              {
+                src: `asset:///${asset.path}`,
+                alt: asset.name,
+                className: "max-w-full max-h-full object-contain",
+                onError: (e) => {
+                  e.currentTarget.style.display = "none";
+                  e.currentTarget.parentElement.innerHTML = `
+                    <div class="text-xs text-muted-foreground">Image</div>
+                  `;
+                }
+              }
+            ) }) : /* @__PURE__ */ jsx27("div", { className: "w-16 h-16 flex items-center justify-center bg-muted rounded mb-1", children: /* @__PURE__ */ jsx27("div", { className: "text-xs text-muted-foreground", children: "File" }) }),
+            /* @__PURE__ */ jsx27("div", { className: "text-xs text-center truncate w-full", children: asset.name })
+          ]
+        },
+        asset.path
+      );
+    },
+    [onAssetSelect]
+  );
+  const assetRenderer = renderAsset || defaultRenderAsset;
+  return /* @__PURE__ */ jsxs15("div", { className: `flex flex-col bg-background border-t ${className || "h-full"}`, children: [
+    /* @__PURE__ */ jsxs15("div", { className: "p-3 border-b", children: [
+      /* @__PURE__ */ jsx27("h3", { className: "text-sm font-semibold mb-2", children: title }),
+      /* @__PURE__ */ jsxs15("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx27(Search, { className: "absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsx27(
+          Input,
+          {
+            type: "text",
+            placeholder: "Search assets...",
+            value: searchQuery,
+            onChange: (e) => setSearchQuery(e.target.value),
+            className: "pl-8 h-8 text-sm"
+          }
+        )
+      ] })
+    ] }),
+    /* @__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,
+  ImageElementRenderer,
+  Inspector,
+  LayersPanel,
+  TextElementRenderer,
+  VisualEditor,
+  VisualEditorWorkspace,
+  bringToFront,
+  checkOverlap,
+  clamp,
+  cloneElement,
+  constrainToCanvas,
+  createElement,
+  defaultElements,
+  degToRad,
+  distance,
+  duplicateElement,
+  exportToJSON,
+  generateElementId,
+  getElementCenter,
+  getMaxZIndex,
+  getRotatedBoundingBox,
+  getSnappingPosition,
+  globalElementRegistry,
+  imageElementRenderer,
+  importFromJSON,
+  isValidCanvasExport,
+  isValidElement,
+  pointInRect,
+  radToDeg,
+  renderField,
+  sendToBack,
+  snapPositionToGrid,
+  snapToGrid,
+  sortByZIndex,
+  textElementRenderer,
+  useEditorState,
+  useElementRegistry
+};
+//# sourceMappingURL=index.mjs.map