labellife-design-tool 0.1.0

package/dist/lib/index.js

@@ -0,0 +1,4052 @@
+// src/CanvasEditor.tsx
+import { useState as useState3, useRef as useRef5, useEffect as useEffect4, useCallback as useCallback2 } from "react";
+import { Stage, Layer, Rect as Rect2 } from "react-konva";
+import {
+  PlusCircle
+} from "lucide-react";
+
+// src/elements/EditableTextElement.tsx
+import { useRef, useEffect } from "react";
+import { Text, Transformer } from "react-konva";
+import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
+var applyTextCase = (text, textCase) => {
+  if (!text)
+    return;
+  switch (textCase) {
+    case "uppercase":
+      return text.toUpperCase();
+    case "lowercase":
+      return text.toLowerCase();
+    case "capitalize":
+      return text.replace(/\b\w/g, (char) => char.toUpperCase());
+    case "none":
+    default:
+      return text;
+  }
+};
+var EditableTextElement = ({ element, isSelected, onSelect, onChange }) => {
+  const textRef = useRef(null);
+  const trRef = useRef(null);
+  useEffect(() => {
+    if (isSelected && trRef.current && textRef.current && !element.locked) {
+      trRef.current.nodes([textRef.current]);
+      trRef.current.getLayer()?.batchDraw();
+    }
+  }, [isSelected, element.locked]);
+  const handleDragEnd = (e) => {
+    onChange({
+      x: e.target.x(),
+      y: e.target.y()
+    });
+  };
+  const handleTransformEnd = () => {
+    const node = textRef.current;
+    if (node) {
+      const scaleX = node.scaleX();
+      node.scaleX(1);
+      onChange({
+        x: node.x(),
+        y: node.y(),
+        rotation: node.rotation(),
+        fontSize: (element.fontSize || 16) * scaleX
+      });
+    }
+  };
+  const handleDblClick = () => {
+    if (element.locked)
+      return;
+    const textNode = textRef.current;
+    if (!textNode)
+      return;
+    textNode.hide();
+    trRef.current?.hide();
+    const textPosition = textNode.absolutePosition();
+    const stageBox = textNode.getStage().container().getBoundingClientRect();
+    const areaPosition = {
+      x: stageBox.left + textPosition.x,
+      y: stageBox.top + textPosition.y
+    };
+    const textarea = document.createElement("textarea");
+    document.body.appendChild(textarea);
+    textarea.value = element.text || "";
+    textarea.style.position = "absolute";
+    textarea.style.top = areaPosition.y + "px";
+    textarea.style.left = areaPosition.x + "px";
+    textarea.style.width = textNode.width() - textNode.padding() * 2 + "px";
+    textarea.style.fontSize = element.fontSize + "px";
+    textarea.style.border = "2px solid #4299e1";
+    textarea.style.padding = "4px";
+    textarea.style.margin = "0px";
+    textarea.style.overflow = "hidden";
+    textarea.style.background = "white";
+    textarea.style.outline = "none";
+    textarea.style.resize = "none";
+    textarea.style.lineHeight = String(element.lineHeight || 1.2);
+    textarea.style.fontFamily = element.fontFamily || "Arial";
+    textarea.style.transformOrigin = "left top";
+    textarea.style.textAlign = element.align || "left";
+    textarea.style.color = element.fill || "#000";
+    textarea.style.fontWeight = element.fontStyle?.includes("bold") ? "bold" : "normal";
+    textarea.style.fontStyle = element.fontStyle?.includes("italic") ? "italic" : "normal";
+    let textDecorationStyle = "";
+    if (element.textDecoration?.includes("underline")) {
+      textDecorationStyle += "underline ";
+    }
+    if (element.strikethrough) {
+      textDecorationStyle += "line-through";
+    }
+    textarea.style.textDecoration = textDecorationStyle.trim() || "none";
+    switch (element.textCase) {
+      case "uppercase":
+        textarea.style.textTransform = "uppercase";
+        break;
+      case "lowercase":
+        textarea.style.textTransform = "lowercase";
+        break;
+      case "capitalize":
+        textarea.style.textTransform = "capitalize";
+        break;
+      default:
+        textarea.style.textTransform = "none";
+    }
+    textarea.style.letterSpacing = `${element.letterSpacing || 0}px`;
+    const rotation = textNode.rotation();
+    let transform = "";
+    if (rotation) {
+      transform += "rotateZ(" + rotation + "deg)";
+    }
+    textarea.style.transform = transform;
+    textarea.style.height = "auto";
+    textarea.style.height = textarea.scrollHeight + 3 + "px";
+    textarea.focus();
+    textarea.select();
+    const removeTextarea = () => {
+      textarea.parentNode?.removeChild(textarea);
+      window.removeEventListener("click", handleOutsideClick);
+      textNode.show();
+      trRef.current?.show();
+    };
+    textarea.addEventListener("keydown", (e) => {
+      if (e.keyCode === 13 && !e.shiftKey) {
+        onChange({ text: textarea.value });
+        removeTextarea();
+      }
+      if (e.keyCode === 27) {
+        removeTextarea();
+      }
+    });
+    textarea.addEventListener("input", () => {
+      textarea.style.height = "auto";
+      textarea.style.height = textarea.scrollHeight + 3 + "px";
+    });
+    const handleOutsideClick = (e) => {
+      if (e.target !== textarea) {
+        onChange({ text: textarea.value });
+        removeTextarea();
+      }
+    };
+    setTimeout(() => {
+      window.addEventListener("click", handleOutsideClick);
+    });
+  };
+  if (!element.visible)
+    return null;
+  return /* @__PURE__ */ jsxDEV(Fragment, {
+    children: [
+      /* @__PURE__ */ jsxDEV(Text, {
+        ref: textRef,
+        text: applyTextCase(element.text || "Double-click to edit", element.textCase),
+        x: element.x,
+        y: element.y,
+        width: element.textWidth,
+        height: element.textHeight,
+        fontSize: element.fontSize || 16,
+        fontFamily: element.fontFamily || "Arial",
+        fontStyle: element.fontStyle,
+        textDecoration: (element.textDecoration?.includes("underline") ? "underline " : "") + (element.strikethrough ? "line-through" : ""),
+        fill: element.fill || "#000000",
+        stroke: element.stroke,
+        strokeWidth: element.strokeWidth || 0,
+        align: element.align || "left",
+        verticalAlign: element.verticalAlign || "top",
+        lineHeight: element.lineHeight || 1.2,
+        letterSpacing: element.letterSpacing || 0,
+        rotation: element.rotation,
+        opacity: element.opacity,
+        draggable: !element.locked,
+        onClick: onSelect,
+        onTap: onSelect,
+        onDblClick: handleDblClick,
+        onDblTap: handleDblClick,
+        onDragEnd: handleDragEnd,
+        onTransformEnd: handleTransformEnd
+      }, undefined, false, undefined, this),
+      isSelected && !element.locked && /* @__PURE__ */ jsxDEV(Transformer, {
+        ref: trRef,
+        enabledAnchors: [
+          "top-left",
+          "top-right",
+          "bottom-left",
+          "bottom-right"
+        ],
+        boundBoxFunc: (oldBox, newBox) => {
+          if (newBox.width < 5) {
+            return oldBox;
+          }
+          return newBox;
+        }
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+// src/elements/ShapeElement.tsx
+import { useRef as useRef2, useEffect as useEffect2 } from "react";
+import {
+  Rect,
+  Transformer as Transformer2,
+  Circle,
+  RegularPolygon,
+  Star,
+  Line,
+  Arrow,
+  Path
+} from "react-konva";
+import { jsxDEV as jsxDEV2, Fragment as Fragment2 } from "react/jsx-dev-runtime";
+var ShapeElement = ({ element, isSelected, onSelect, onChange }) => {
+  const shapeRef = useRef2(null);
+  const trRef = useRef2(null);
+  useEffect2(() => {
+    if (isSelected && trRef.current && shapeRef.current && !element.locked) {
+      trRef.current.nodes([shapeRef.current]);
+      trRef.current.getLayer()?.batchDraw();
+    }
+  }, [isSelected, element.locked]);
+  const handleDragEnd = (e) => {
+    onChange({
+      x: e.target.x(),
+      y: e.target.y()
+    });
+  };
+  const handleTransformEnd = () => {
+    const node = shapeRef.current;
+    if (node) {
+      const scaleX = node.scaleX();
+      const scaleY = node.scaleY();
+      let newWidth = element.width || 100;
+      let newHeight = element.height || 100;
+      if (element.shapeType === "custom-path" && element.pathNaturalWidth && element.pathNaturalHeight) {
+        newWidth = Math.max(5, (element.width || element.pathNaturalWidth) * scaleX);
+        newHeight = Math.max(5, (element.height || element.pathNaturalHeight) * scaleY);
+        node.scaleX(1);
+        node.scaleY(1);
+      } else if (element.shapeType === "circle") {
+        const currentRadius = (element.width || 100) / 2;
+        const newRadius = Math.max(2.5, currentRadius * Math.max(scaleX, scaleY));
+        newWidth = newRadius * 2;
+        newHeight = newRadius * 2;
+        node.scaleX(1);
+        node.scaleY(1);
+      } else if (element.shapeType === "star") {
+        const currentOuterRadius = element.outerRadius || (element.width || 140) / 2;
+        const newOuterRadius = Math.max(2.5, currentOuterRadius * Math.max(scaleX, scaleY));
+        const newInnerRadius = (element.innerRadius || currentOuterRadius * 0.4) * (newOuterRadius / currentOuterRadius);
+        onChange({
+          x: node.x(),
+          y: node.y(),
+          rotation: node.rotation(),
+          outerRadius: newOuterRadius,
+          innerRadius: newInnerRadius,
+          width: newOuterRadius * 2,
+          height: newOuterRadius * 2
+        });
+        node.scaleX(1);
+        node.scaleY(1);
+        return;
+      } else {
+        newWidth = Math.max(5, (element.width || 100) * scaleX);
+        newHeight = Math.max(5, (element.height || 100) * scaleY);
+        node.scaleX(1);
+        node.scaleY(1);
+      }
+      onChange({
+        x: node.x(),
+        y: node.y(),
+        rotation: node.rotation(),
+        width: newWidth,
+        height: newHeight
+      });
+    }
+  };
+  if (!element.visible)
+    return null;
+  const commonProps = {
+    ref: shapeRef,
+    x: element.x,
+    y: element.y,
+    rotation: element.rotation,
+    opacity: element.opacity,
+    fill: element.fill || "#BFBFBF",
+    stroke: element.stroke || "#0C0C0C",
+    strokeWidth: element.strokeWidth || 0,
+    draggable: !element.locked,
+    onClick: onSelect,
+    onTap: onSelect,
+    onDragEnd: handleDragEnd,
+    onTransformEnd: handleTransformEnd
+  };
+  let shapeNode = null;
+  switch (element.shapeType) {
+    case "rect":
+      shapeNode = /* @__PURE__ */ jsxDEV2(Rect, {
+        ...commonProps,
+        width: element.width || 100,
+        height: element.height || 100,
+        cornerRadius: element.cornerRadius || 0
+      }, undefined, false, undefined, this);
+      break;
+    case "octagon":
+      shapeNode = /* @__PURE__ */ jsxDEV2(RegularPolygon, {
+        ...commonProps,
+        sides: 8,
+        radius: (element.width || 100) / 2
+      }, undefined, false, undefined, this);
+      break;
+    case "nonagon":
+      shapeNode = /* @__PURE__ */ jsxDEV2(RegularPolygon, {
+        ...commonProps,
+        sides: 9,
+        radius: (element.width || 100) / 2
+      }, undefined, false, undefined, this);
+      break;
+    case "decagon":
+      shapeNode = /* @__PURE__ */ jsxDEV2(RegularPolygon, {
+        ...commonProps,
+        sides: 10,
+        radius: (element.width || 100) / 2
+      }, undefined, false, undefined, this);
+      break;
+    case "hendecagon":
+      shapeNode = /* @__PURE__ */ jsxDEV2(RegularPolygon, {
+        ...commonProps,
+        sides: 11,
+        radius: (element.width || 100) / 2
+      }, undefined, false, undefined, this);
+      break;
+    case "dodecagon":
+      shapeNode = /* @__PURE__ */ jsxDEV2(RegularPolygon, {
+        ...commonProps,
+        sides: 12,
+        radius: (element.width || 100) / 2
+      }, undefined, false, undefined, this);
+      break;
+    case "right-triangle":
+      shapeNode = /* @__PURE__ */ jsxDEV2(Line, {
+        ...commonProps,
+        points: [0, 0, 0, element.height || 100, element.width || 100, element.height || 100],
+        closed: true
+      }, undefined, false, undefined, this);
+      break;
+    case "isosceles-triangle":
+      shapeNode = /* @__PURE__ */ jsxDEV2(Line, {
+        ...commonProps,
+        points: [(element.width || 2) / 2 || 50, 0, 0, element.height || 100, element.width || 100, element.height || 100],
+        closed: true
+      }, undefined, false, undefined, this);
+      break;
+    case "scalene-triangle":
+      shapeNode = /* @__PURE__ */ jsxDEV2(Line, {
+        ...commonProps,
+        points: [element.width || 3 / 3 || 33, 0, 0, element.height || 100, element.width || 100, element.height || 100],
+        closed: true
+      }, undefined, false, undefined, this);
+      break;
+    case "pentagon":
+      shapeNode = /* @__PURE__ */ jsxDEV2(RegularPolygon, {
+        ...commonProps,
+        sides: 5,
+        radius: (element.width || 100) / 2
+      }, undefined, false, undefined, this);
+      break;
+    case "circle":
+      shapeNode = /* @__PURE__ */ jsxDEV2(Circle, {
+        ...commonProps,
+        radius: (element.width || 100) / 2
+      }, undefined, false, undefined, this);
+      break;
+    case "triangle":
+      shapeNode = /* @__PURE__ */ jsxDEV2(RegularPolygon, {
+        ...commonProps,
+        sides: 3,
+        radius: (element.width || 100) / 2
+      }, undefined, false, undefined, this);
+      break;
+    case "star":
+      shapeNode = /* @__PURE__ */ jsxDEV2(Star, {
+        ...commonProps,
+        numPoints: element.numPoints || 5,
+        innerRadius: element.innerRadius || (element.outerRadius || 70) * 0.4,
+        outerRadius: element.outerRadius || 70
+      }, undefined, false, undefined, this);
+      break;
+    case "polygon":
+      shapeNode = /* @__PURE__ */ jsxDEV2(RegularPolygon, {
+        ...commonProps,
+        sides: element.sides || 6,
+        radius: (element.width || 100) / 2
+      }, undefined, false, undefined, this);
+      break;
+    case "line":
+      shapeNode = /* @__PURE__ */ jsxDEV2(Line, {
+        ...commonProps,
+        points: [0, 0, element.width || 100, 0],
+        stroke: element.stroke || "#C0BFBF",
+        strokeWidth: element.strokeWidth || 4,
+        fillEnabled: false
+      }, undefined, false, undefined, this);
+      break;
+    case "arrow":
+      shapeNode = /* @__PURE__ */ jsxDEV2(Arrow, {
+        ...commonProps,
+        points: [0, 0, element.width || 100, 0],
+        pointerLength: element.pointerLength || 10,
+        pointerWidth: element.pointerWidth || 10,
+        fill: element.stroke || "#C0BFBF",
+        stroke: element.stroke || "#C0BFBF",
+        strokeWidth: element.strokeWidth || 4
+      }, undefined, false, undefined, this);
+      break;
+    case "dashed-line":
+      shapeNode = /* @__PURE__ */ jsxDEV2(Line, {
+        ...commonProps,
+        points: [0, 0, element.width || 100, 0],
+        dash: element.dash || [4, 2],
+        stroke: element.stroke || "#C0BFBF",
+        strokeWidth: element.strokeWidth || 4,
+        fillEnabled: false
+      }, undefined, false, undefined, this);
+      break;
+    case "dotted-line":
+      shapeNode = /* @__PURE__ */ jsxDEV2(Line, {
+        ...commonProps,
+        points: [0, 0, element.width || 100, 0],
+        dash: element.dash || [
+          element.strokeWidth || 2,
+          (element.strokeWidth || 2) * 1.5
+        ],
+        stroke: element.stroke || "#C0BFBF",
+        strokeWidth: element.strokeWidth || 4,
+        fillEnabled: false
+      }, undefined, false, undefined, this);
+      break;
+    case "custom-path":
+      if (element.pathData && element.pathNaturalWidth && element.pathNaturalHeight) {
+        const scaleX = (element.width || element.pathNaturalWidth) / element.pathNaturalWidth;
+        const scaleY = (element.height || element.pathNaturalHeight) / element.pathNaturalHeight;
+        shapeNode = /* @__PURE__ */ jsxDEV2(Path, {
+          ...commonProps,
+          data: element.pathData,
+          scaleX,
+          scaleY,
+          strokeWidth: element.strokeWidth === undefined && commonProps.fill ? 0 : element.strokeWidth || 0
+        }, undefined, false, undefined, this);
+      } else {
+        console.warn("Custom path element is missing pathData or natural dimensions:", element.id);
+        shapeNode = /* @__PURE__ */ jsxDEV2(Rect, {
+          ...commonProps,
+          width: element.width || 20,
+          height: element.height || 20,
+          fill: "red"
+        }, undefined, false, undefined, this);
+      }
+      break;
+    default:
+      console.warn("Unsupported shapeType:", element.shapeType);
+      shapeNode = /* @__PURE__ */ jsxDEV2(Rect, {
+        ...commonProps,
+        width: element.width || 50,
+        height: element.height || 50,
+        fill: "gray"
+      }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV2(Fragment2, {
+    children: [
+      shapeNode,
+      isSelected && !element.locked && /* @__PURE__ */ jsxDEV2(Transformer2, {
+        ref: trRef,
+        boundBoxFunc: (oldBox, newBox) => {
+          const minSize = 5;
+          if (newBox.width < minSize || newBox.height < minSize) {
+            if (element.shapeType === "star" || element.shapeType === "circle" || element.shapeType === "triangle" || element.shapeType === "polygon") {
+              if (newBox.width < minSize && newBox.height < minSize)
+                return oldBox;
+              if (newBox.width < minSize)
+                return { ...oldBox, height: newBox.height };
+              if (newBox.height < minSize)
+                return { ...oldBox, width: newBox.width };
+            }
+            return oldBox;
+          }
+          return newBox;
+        },
+        enabledAnchors: element.shapeType === "circle" ? ["top-left", "top-right", "bottom-left", "bottom-right"] : undefined,
+        keepRatio: element.shapeType === "circle"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+// src/elements/UrlImageElement.tsx
+import { useState, useRef as useRef3, useEffect as useEffect3, useCallback } from "react";
+import { Image, Transformer as Transformer3, Group } from "react-konva";
+import Konva from "konva";
+import { jsxDEV as jsxDEV3, Fragment as Fragment3 } from "react/jsx-dev-runtime";
+var UrlImageElement = ({ element, isSelected, onSelect, onChange }) => {
+  const [image, setImage] = useState(null);
+  const imageRef = useRef3(null);
+  const groupRef = useRef3(null);
+  const trRef = useRef3(null);
+  useEffect3(() => {
+    if (element.src) {
+      const img = new window.Image;
+      img.crossOrigin = "anonymous";
+      img.src = element.src;
+      img.onload = () => {
+        setImage(img);
+        if (!element.width || !element.height) {
+          onChange({
+            width: img.width,
+            height: img.height
+          });
+          return;
+        }
+        const naturalWidth = img.naturalWidth || img.width;
+        const naturalHeight = img.naturalHeight || img.height;
+        let updatedCrop = {};
+        let needsUpdate = false;
+        if (element.cropX !== undefined && element.cropX >= 0 && element.cropX <= 1) {
+          updatedCrop.cropX = element.cropX * naturalWidth;
+          needsUpdate = true;
+        }
+        if (element.cropY !== undefined && element.cropY >= 0 && element.cropY <= 1) {
+          updatedCrop.cropY = element.cropY * naturalHeight;
+          needsUpdate = true;
+        }
+        if (element.cropWidth !== undefined && element.cropWidth >= 0 && element.cropWidth <= 1) {
+          updatedCrop.cropWidth = element.cropWidth * naturalWidth;
+          needsUpdate = true;
+        }
+        if (element.cropHeight !== undefined && element.cropHeight >= 0 && element.cropHeight <= 1) {
+          updatedCrop.cropHeight = element.cropHeight * naturalHeight;
+          needsUpdate = true;
+        }
+        if (needsUpdate) {
+          onChange(updatedCrop);
+        }
+      };
+      img.onerror = (error) => {
+        console.error("Failed to load image:", element.src, error);
+        setImage(null);
+      };
+    } else {
+      setImage(null);
+    }
+  }, [element.src]);
+  useEffect3(() => {
+    if (isSelected && trRef.current && !element.locked) {
+      const targetNode = element.mask && element.mask.type ? groupRef.current : imageRef.current;
+      if (targetNode) {
+        trRef.current.nodes([targetNode]);
+        trRef.current.getLayer()?.batchDraw();
+      }
+    }
+  }, [isSelected, element.locked, element.mask]);
+  useEffect3(() => {
+    const node = imageRef.current;
+    if (node && image) {
+      const needsCache = element.filters;
+      const activeFilters = [];
+      if (element.filters?.blur) {
+        activeFilters.push(Konva.Filters.Blur);
+        node.blurRadius(element.filters.blur);
+      }
+      if (element.filters?.brightness !== undefined) {
+        activeFilters.push(Konva.Filters.Brighten);
+        node.brightness(element.filters.brightness);
+      }
+      if (element.filters?.grayscale)
+        activeFilters.push(Konva.Filters.Grayscale);
+      if (element.filters?.sepia)
+        activeFilters.push(Konva.Filters.Sepia);
+      node.filters(activeFilters.length > 0 ? activeFilters : undefined);
+      node.cropX(element.cropX || 0);
+      node.cropY(element.cropY || 0);
+      node.cropWidth(element.cropWidth || element.width);
+      node.cropHeight(element.cropHeight || element.height);
+      if (needsCache && !element.mask) {
+        node.clearCache();
+        node.cache();
+      } else {
+        node.clearCache();
+      }
+      node.getLayer()?.batchDraw();
+    }
+  }, [element.filters, element.mask, element.cropX, element.cropY, element.cropWidth, element.cropHeight, element.width, element.height, image]);
+  const handleDragEnd = (e) => {
+    onChange({
+      x: e.target.x(),
+      y: e.target.y()
+    });
+  };
+  const handleTransformEnd = () => {
+    const node = element.mask && element.mask.type ? groupRef.current : imageRef.current;
+    if (node) {
+      const scaleX = node.scaleX();
+      const scaleY = node.scaleY();
+      node.scaleX(1);
+      node.scaleY(1);
+      onChange({
+        x: node.x(),
+        y: node.y(),
+        rotation: node.rotation(),
+        width: Math.max(5, node.width() * scaleX),
+        height: Math.max(5, node.height() * scaleY)
+      });
+    }
+  };
+  const clipFunc = useCallback((ctx) => {
+    if (!element.mask || !element.mask.type || !element.width || !element.height) {
+      return;
+    }
+    const { type } = element.mask;
+    const width = element.width;
+    const height = element.height;
+    ctx.beginPath();
+    switch (type) {
+      case "circle": {
+        const radius = Math.min(width, height) / 2;
+        ctx.arc(width / 2, height / 2, radius, 0, Math.PI * 2, false);
+        ctx.clip();
+        break;
+      }
+      case "rect":
+      case "rectangle":
+        ctx.rect(0, 0, element.width, element.height);
+        ctx.clip();
+        break;
+      case "star": {
+        const points = element.numPoints || 5;
+        const outerRadius = Math.min(element.width, element.height) / 2;
+        const innerRadius = element.innerRadius || outerRadius / 2;
+        ctx.moveTo(element.width / 2, 0);
+        for (let i = 0;i < points * 2; i++) {
+          const angle = Math.PI / points * i - Math.PI / 2;
+          const radius = i % 2 === 0 ? outerRadius : innerRadius;
+          const x = element.width / 2 + radius * Math.cos(angle);
+          const y = element.height / 2 + radius * Math.sin(angle);
+          ctx.lineTo(x, y);
+        }
+        ctx.closePath();
+        ctx.clip();
+        break;
+      }
+      case "polygon": {
+        const sides = element.sides || 6;
+        const radius = Math.min(element.width, element.height) / 2;
+        ctx.moveTo(element.width / 2 + radius * Math.cos(0), element.height / 2 + radius * Math.sin(0));
+        for (let i = 1;i <= sides; i += 1) {
+          ctx.lineTo(element.width / 2 + radius * Math.cos(i * 2 * Math.PI / sides), element.height / 2 + radius * Math.sin(i * 2 * Math.PI / sides));
+        }
+        ctx.closePath();
+        ctx.clip();
+        break;
+      }
+      case "pentagon": {
+        const sides = 5;
+        const radius = Math.min(element.width, element.height) / 2;
+        ctx.moveTo(element.width / 2 + radius * Math.cos(0), element.height / 2 + radius * Math.sin(0));
+        for (let i = 1;i <= sides; i += 1) {
+          ctx.lineTo(element.width / 2 + radius * Math.cos(i * 2 * Math.PI / sides), element.height / 2 + radius * Math.sin(i * 2 * Math.PI / sides));
+        }
+        ctx.closePath();
+        ctx.clip();
+        break;
+      }
+      case "octagon": {
+        const sides = 8;
+        const radius = Math.min(element.width, element.height) / 2;
+        ctx.moveTo(element.width / 2 + radius * Math.cos(0), element.height / 2 + radius * Math.sin(0));
+        for (let i = 1;i <= sides; i += 1) {
+          ctx.lineTo(element.width / 2 + radius * Math.cos(i * 2 * Math.PI / sides), element.height / 2 + radius * Math.sin(i * 2 * Math.PI / sides));
+        }
+        ctx.closePath();
+        ctx.clip();
+        break;
+      }
+      case "nonagon": {
+        const sides = 9;
+        const radius = Math.min(element.width, element.height) / 2;
+        ctx.moveTo(element.width / 2 + radius * Math.cos(0), element.height / 2 + radius * Math.sin(0));
+        for (let i = 1;i <= sides; i += 1) {
+          ctx.lineTo(element.width / 2 + radius * Math.cos(i * 2 * Math.PI / sides), element.height / 2 + radius * Math.sin(i * 2 * Math.PI / sides));
+        }
+        ctx.closePath();
+        ctx.clip();
+        break;
+      }
+      case "decagon": {
+        const sides = 10;
+        const radius = Math.min(element.width, element.height) / 2;
+        ctx.moveTo(element.width / 2 + radius * Math.cos(0), element.height / 2 + radius * Math.sin(0));
+        for (let i = 1;i <= sides; i += 1) {
+          ctx.lineTo(element.width / 2 + radius * Math.cos(i * 2 * Math.PI / sides), element.height / 2 + radius * Math.sin(i * 2 * Math.PI / sides));
+        }
+        ctx.closePath();
+        ctx.clip();
+        break;
+      }
+      case "hendecagon": {
+        const sides = 11;
+        const radius = Math.min(element.width, element.height) / 2;
+        ctx.moveTo(element.width / 2 + radius * Math.cos(0), element.height / 2 + radius * Math.sin(0));
+        for (let i = 1;i <= sides; i += 1) {
+          ctx.lineTo(element.width / 2 + radius * Math.cos(i * 2 * Math.PI / sides), element.height / 2 + radius * Math.sin(i * 2 * Math.PI / sides));
+        }
+        ctx.closePath();
+        ctx.clip();
+        break;
+      }
+      case "dodecagon": {
+        const sides = 12;
+        const radius = Math.min(element.width, element.height) / 2;
+        ctx.moveTo(element.width / 2 + radius * Math.cos(0), element.height / 2 + radius * Math.sin(0));
+        for (let i = 1;i <= sides; i += 1) {
+          ctx.lineTo(element.width / 2 + radius * Math.cos(i * 2 * Math.PI / sides), element.height / 2 + radius * Math.sin(i * 2 * Math.PI / sides));
+        }
+        ctx.closePath();
+        ctx.clip();
+        break;
+      }
+      case "triangle":
+        ctx.moveTo(element.width / 2, 0);
+        ctx.lineTo(element.width, element.height);
+        ctx.lineTo(0, element.height);
+        ctx.closePath();
+        ctx.clip();
+        break;
+      case "right-triangle":
+        ctx.moveTo(0, 0);
+        ctx.lineTo(0, element.height);
+        ctx.lineTo(element.width, element.height);
+        ctx.closePath();
+        ctx.clip();
+        break;
+      case "isosceles-triangle":
+        ctx.moveTo(element.width / 2, 0);
+        ctx.lineTo(element.width, element.height);
+        ctx.lineTo(0, element.height);
+        ctx.closePath();
+        ctx.clip();
+        break;
+      case "scalene-triangle":
+        ctx.moveTo(element.width / 3, 0);
+        ctx.lineTo(element.width, element.height);
+        ctx.lineTo(0, element.height);
+        ctx.closePath();
+        ctx.clip();
+        break;
+      default:
+        break;
+    }
+  }, [element.mask, element.width, element.height]);
+  if (!image || !element.visible)
+    return null;
+  const imageComponent = /* @__PURE__ */ jsxDEV3(Image, {
+    ref: imageRef,
+    image,
+    x: 0,
+    y: 0,
+    width: element.width || 0,
+    height: element.height || 0,
+    rotation: 0,
+    opacity: element.opacity,
+    draggable: false,
+    cornerRadius: element.cornerRadius || 0,
+    cropX: element.cropX || 0,
+    cropY: element.cropY || 0,
+    cropWidth: element.cropWidth || element.width,
+    cropHeight: element.cropHeight || element.height
+  }, undefined, false, undefined, this);
+  if (element.mask && element.mask.type) {
+    return /* @__PURE__ */ jsxDEV3(Fragment3, {
+      children: [
+        /* @__PURE__ */ jsxDEV3(Group, {
+          ref: groupRef,
+          x: element.x,
+          y: element.y,
+          rotation: element.rotation,
+          draggable: !element.locked,
+          onClick: onSelect,
+          onTap: onSelect,
+          onDragEnd: handleDragEnd,
+          onTransformEnd: handleTransformEnd,
+          clipFunc,
+          children: imageComponent
+        }, undefined, false, undefined, this),
+        isSelected && !element.locked && /* @__PURE__ */ jsxDEV3(Transformer3, {
+          ref: trRef,
+          boundBoxFunc: (oldBox, newBox) => {
+            if (newBox.width < 5 || newBox.height < 5) {
+              return oldBox;
+            }
+            return newBox;
+          }
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV3(Fragment3, {
+    children: [
+      /* @__PURE__ */ jsxDEV3(Image, {
+        ref: imageRef,
+        image,
+        x: element.x,
+        y: element.y,
+        width: element.width || 0,
+        height: element.height || 0,
+        rotation: element.rotation,
+        opacity: element.opacity,
+        draggable: !element.locked,
+        onClick: onSelect,
+        onTap: onSelect,
+        onDragEnd: handleDragEnd,
+        onTransformEnd: handleTransformEnd,
+        cornerRadius: element.cornerRadius || 0,
+        cropX: element.cropX || 0,
+        cropY: element.cropY || 0,
+        cropWidth: element.cropWidth || element.width,
+        cropHeight: element.cropHeight || element.height
+      }, undefined, false, undefined, this),
+      isSelected && !element.locked && /* @__PURE__ */ jsxDEV3(Transformer3, {
+        ref: trRef,
+        boundBoxFunc: (oldBox, newBox) => {
+          if (newBox.width < 5 || newBox.height < 5) {
+            return oldBox;
+          }
+          return newBox;
+        }
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+// src/constants/CanvasPresets.ts
+var CANVAS_PRESETS = [
+  { name: "Instagram Post", width: 1080, height: 1080 },
+  { name: "Instagram Story", width: 1080, height: 1920 },
+  { name: "Facebook Post", width: 1200, height: 630 },
+  { name: "Twitter Post", width: 1024, height: 512 },
+  { name: "A4", width: 794, height: 1123 },
+  { name: "Letter", width: 816, height: 1056 },
+  { name: "YouTube Thumbnail", width: 1280, height: 720 },
+  { name: "Custom", width: 800, height: 600 }
+];
+// src/constants/DefaultColors.ts
+var DEFAULT_COLORS = [
+  "#000000",
+  "#FFFFFF",
+  "#FF0000",
+  "#00FF00",
+  "#0000FF",
+  "#FFFF00",
+  "#FF00FF",
+  "#00FFFF",
+  "#FFA500",
+  "#800080",
+  "#FFC0CB",
+  "#A52A2A",
+  "#808080",
+  "#C0C0C0",
+  "#FFD700"
+];
+// src/constants/FontFamilies.ts
+var FONT_FAMILIES = [
+  "Arial",
+  "Helvetica",
+  "Times New Roman",
+  "Georgia",
+  "Verdana",
+  "Courier New",
+  "Comic Sans MS",
+  "Impact",
+  "Trebuchet MS",
+  "Palatino",
+  "Garamond",
+  "Bookman",
+  "Tahoma"
+];
+// src/config.ts
+var _unsplashAccessKey = typeof process !== "undefined" && process.env?.UNSPLASH_ACCESS_KEY ? process.env.UNSPLASH_ACCESS_KEY : undefined;
+function setUnsplashAccessKey(key) {
+  _unsplashAccessKey = key;
+}
+function getUnsplashAccessKey() {
+  return _unsplashAccessKey;
+}
+
+// src/components/header/AppName.tsx
+import { useTranslation } from "react-i18next";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+var AppName = () => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxDEV4("h1", {
+    className: "text-white font-bold text-lg",
+    children: t("Editor.app_name")
+  }, undefined, false, undefined, this);
+};
+var AppName_default = AppName;
+
+// src/components/header/HistoryControls.tsx
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { Undo, Redo } from "lucide-react";
+import { jsxDEV as jsxDEV5, Fragment as Fragment4 } from "react/jsx-dev-runtime";
+var HistoryControls = ({
+  historyIndex,
+  historyLength,
+  onUndo,
+  onRedo
+}) => {
+  const { t } = useTranslation2();
+  return /* @__PURE__ */ jsxDEV5(Fragment4, {
+    children: [
+      /* @__PURE__ */ jsxDEV5("button", {
+        onClick: onUndo,
+        disabled: historyIndex <= 0,
+        className: "p-2 text-gray-400 hover:text-white disabled:text-gray-600",
+        title: t("Editor.undo"),
+        children: /* @__PURE__ */ jsxDEV5(Undo, {
+          className: "w-4 h-4 "
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV5("button", {
+        onClick: onRedo,
+        disabled: historyIndex >= historyLength - 1,
+        className: "p-2 text-gray-400 hover:text-white disabled:text-gray-600",
+        title: t("Editor.redo"),
+        children: /* @__PURE__ */ jsxDEV5(Redo, {
+          className: "w-4 h-4"
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+var HistoryControls_default = HistoryControls;
+
+// src/components/header/ZoomControls.tsx
+import { useTranslation as useTranslation3 } from "react-i18next";
+import { ZoomIn, ZoomOut, Maximize2 } from "lucide-react";
+import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
+var ZoomControls = ({
+  zoom,
+  onZoomIn,
+  onZoomOut,
+  onZoomReset
+}) => {
+  const { t } = useTranslation3();
+  return /* @__PURE__ */ jsxDEV6("div", {
+    className: "flex items-center space-x-1 bg-gray-700 rounded px-2 py-1",
+    children: [
+      /* @__PURE__ */ jsxDEV6("button", {
+        onClick: onZoomOut,
+        className: "text-gray-400 hover:text-white",
+        title: t("Editor.zoom_out"),
+        children: /* @__PURE__ */ jsxDEV6(ZoomOut, {
+          className: "w-4 h-4"
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV6("span", {
+        className: "text-white text-sm mx-2 select-none",
+        children: [
+          Math.round(zoom * 100),
+          "%"
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV6("button", {
+        onClick: onZoomIn,
+        className: "text-gray-400 hover:text-white",
+        title: t("Editor.zoom_in"),
+        children: /* @__PURE__ */ jsxDEV6(ZoomIn, {
+          className: "w-4 h-4"
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV6("button", {
+        onClick: onZoomReset,
+        className: "text-gray-400 hover:text-white ml-2",
+        title: t("Editor.zoom_to_fit"),
+        children: /* @__PURE__ */ jsxDEV6(Maximize2, {
+          className: "w-4 h-4"
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+var ZoomControls_default = ZoomControls;
+
+// src/components/Header.tsx
+import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
+var Header = ({
+  name,
+  zoom,
+  historyIndex,
+  historyLength,
+  onUndo,
+  onRedo,
+  onZoomIn,
+  onZoomOut,
+  onZoomReset
+}) => {
+  return /* @__PURE__ */ jsxDEV7("div", {
+    className: "bg-gray-800 border-b border-gray-700 px-4 py-2 flex items-center justify-between",
+    children: [
+      /* @__PURE__ */ jsxDEV7("div", {
+        className: "flex items-center space-x-4",
+        children: /* @__PURE__ */ jsxDEV7(AppName_default, {}, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      name && /* @__PURE__ */ jsxDEV7("div", {
+        className: "flex-1 text-center text-white text-lg font-semibold",
+        children: name
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV7("div", {
+        className: "flex items-center space-x-2",
+        children: [
+          /* @__PURE__ */ jsxDEV7(HistoryControls_default, {
+            historyIndex,
+            historyLength,
+            onUndo,
+            onRedo
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV7("div", {
+            className: "border-l border-gray-600 mx-2 h-6"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV7(ZoomControls_default, {
+            zoom,
+            onZoomIn,
+            onZoomOut,
+            onZoomReset
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+var Header_default = Header;
+
+// src/components/LeftMenu.tsx
+import { Type, Square, Image as ImageIcon, Palette, Download, Layers, Variable } from "lucide-react";
+import { jsxDEV as jsxDEV8 } from "react/jsx-dev-runtime";
+var LeftMenu = ({
+  tool,
+  activePanel,
+  onSetTool,
+  onSetActivePanel,
+  config
+}) => {
+  const menuItems = [
+    {
+      id: "text",
+      tooltip: "Text",
+      icon: /* @__PURE__ */ jsxDEV8(Type, {
+        className: "w-5 h-5"
+      }, undefined, false, undefined, this),
+      actionType: "setToolAndPanel",
+      toolValue: "text",
+      panelValue: "text"
+    },
+    {
+      id: "elements",
+      tooltip: "Elements",
+      icon: /* @__PURE__ */ jsxDEV8(Square, {
+        className: "w-5 h-5"
+      }, undefined, false, undefined, this),
+      actionType: "setToolAndPanel",
+      panelValue: "elements",
+      toolValue: "shape"
+    },
+    {
+      id: "image",
+      tooltip: "Images",
+      icon: /* @__PURE__ */ jsxDEV8(ImageIcon, {
+        className: "w-5 h-5"
+      }, undefined, false, undefined, this),
+      actionType: "setPanel",
+      panelValue: "image"
+    },
+    {
+      id: "design",
+      tooltip: "Design",
+      icon: /* @__PURE__ */ jsxDEV8(Palette, {
+        className: "w-5 h-5"
+      }, undefined, false, undefined, this),
+      actionType: "setPanel",
+      panelValue: "design"
+    }
+  ];
+  if (config?.export) {
+    menuItems.push({
+      id: "export",
+      tooltip: "Export",
+      icon: /* @__PURE__ */ jsxDEV8(Download, {
+        className: "w-5 h-5"
+      }, undefined, false, undefined, this),
+      actionType: "setPanel",
+      panelValue: "export"
+    });
+  }
+  menuItems.push({
+    id: "background",
+    tooltip: "Background",
+    icon: /* @__PURE__ */ jsxDEV8(Layers, {
+      className: "w-5 h-5"
+    }, undefined, false, undefined, this),
+    actionType: "setPanel",
+    panelValue: "background"
+  });
+  if (config?.variables) {
+    menuItems.push({
+      id: "variables",
+      tooltip: "Variables",
+      icon: /* @__PURE__ */ jsxDEV8(Variable, {
+        className: "w-5 h-5"
+      }, undefined, false, undefined, this),
+      actionType: "setPanel",
+      panelValue: "variables"
+    });
+  }
+  const handleItemClick = (item) => {
+    if (item.actionType === "setTool" && item.toolValue) {
+      onSetTool(item.toolValue);
+    } else if (item.actionType === "setPanel" && item.panelValue) {
+      onSetActivePanel(item.panelValue);
+      if (item.panelValue === "elements" && !item.toolValue)
+        onSetTool("select");
+      if (item.panelValue === "image" && !item.toolValue)
+        onSetTool("select");
+    } else if (item.actionType === "setToolAndPanel" && item.toolValue && item.panelValue) {
+      onSetTool(item.toolValue);
+      onSetActivePanel(item.panelValue);
+    }
+  };
+  const getButtonClass = (item) => {
+    let isActive = false;
+    if (item.actionType === "setTool") {
+      isActive = tool === item.toolValue;
+    } else if (item.actionType === "setPanel") {
+      isActive = activePanel === item.panelValue;
+    } else if (item.actionType === "setToolAndPanel") {
+      isActive = activePanel === item.panelValue || tool === item.toolValue;
+    }
+    return `w-full p-3 flex justify-center transition-colors duration-200 ${isActive ? "bg-gray-700 text-blue-400" : "text-gray-400 hover:text-white"}`;
+  };
+  return /* @__PURE__ */ jsxDEV8("div", {
+    className: "w-16 bg-gray-900 border-r border-gray-700 py-4",
+    children: /* @__PURE__ */ jsxDEV8("div", {
+      className: "space-y-2",
+      children: menuItems.map((item) => /* @__PURE__ */ jsxDEV8("button", {
+        onClick: () => handleItemClick(item),
+        className: getButtonClass(item),
+        title: item.tooltip,
+        children: item.icon
+      }, item.id, false, undefined, this))
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+};
+var LeftMenu_default = LeftMenu;
+
+// src/panels/ElementPanel.tsx
+import { Square as Square2, Circle as CircleIcon, Star as StarIcon } from "lucide-react";
+import { jsxDEV as jsxDEV9 } from "react/jsx-dev-runtime";
+var ElementPanel = ({ onAddShape }) => {
+  return /* @__PURE__ */ jsxDEV9("div", {
+    children: [
+      /* @__PURE__ */ jsxDEV9("h3", {
+        className: "text-white font-semibold mb-4",
+        children: "Elements"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV9("div", {
+        className: "grid grid-cols-3 gap-3",
+        children: [
+          /* @__PURE__ */ jsxDEV9("button", {
+            onClick: () => onAddShape("rect"),
+            className: "aspect-square bg-gray-700 hover:bg-gray-600 rounded flex items-center justify-center",
+            title: "Rectangle",
+            children: /* @__PURE__ */ jsxDEV9(Square2, {
+              className: "w-8 h-8 text-gray-300"
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV9("button", {
+            onClick: () => onAddShape("circle"),
+            className: "aspect-square bg-gray-700 hover:bg-gray-600 rounded flex items-center justify-center",
+            title: "Circle",
+            children: /* @__PURE__ */ jsxDEV9(CircleIcon, {
+              className: "w-8 h-8 text-gray-300"
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV9("button", {
+            onClick: () => onAddShape("triangle"),
+            className: "aspect-square bg-gray-700 hover:bg-gray-600 rounded flex items-center justify-center",
+            title: "Triangle",
+            children: /* @__PURE__ */ jsxDEV9("div", {
+              className: `w-0 h-0
+            border-l-[16px] border-l-transparent
+            border-b-[28px] border-b-gray-300
+            border-r-[16px] border-r-transparent`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV9("button", {
+            onClick: () => onAddShape("star"),
+            className: "aspect-square bg-gray-700 hover:bg-gray-600 rounded flex items-center justify-center",
+            title: "Star",
+            children: /* @__PURE__ */ jsxDEV9(StarIcon, {
+              className: "w-8 h-8 text-gray-300"
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV9("button", {
+            onClick: () => onAddShape("polygon"),
+            className: "aspect-square bg-gray-700 hover:bg-gray-600 rounded flex items-center justify-center",
+            title: "Polygon",
+            children: /* @__PURE__ */ jsxDEV9("div", {
+              className: "w-8 h-8 text-gray-300 flex items-center justify-center text-2xl",
+              children: "⬡"
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV9("button", {
+            onClick: () => onAddShape("pentagon"),
+            className: "aspect-square bg-gray-700 hover:bg-gray-600 rounded flex items-center justify-center",
+            title: "Pentagon",
+            children: /* @__PURE__ */ jsxDEV9("div", {
+              className: "w-8 h-8 text-gray-300 flex items-center justify-center text-2xl",
+              children: "⬠"
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV9("button", {
+            onClick: () => onAddShape("octagon"),
+            className: "aspect-square bg-gray-700 hover:bg-gray-600 rounded flex items-center justify-center",
+            title: "Octagon",
+            children: /* @__PURE__ */ jsxDEV9("div", {
+              className: "w-8 h-8 text-gray-300 flex items-center justify-center text-2xl",
+              children: "⬡"
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV9("button", {
+            onClick: () => onAddShape("nonagon"),
+            className: "aspect-square bg-gray-700 hover:bg-gray-600 rounded flex items-center justify-center",
+            title: "Nonagon",
+            children: /* @__PURE__ */ jsxDEV9("div", {
+              className: "w-8 h-8 text-gray-300 flex items-center justify-center text-2xl",
+              children: "⬡"
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV9("button", {
+            onClick: () => onAddShape("decagon"),
+            className: "aspect-square bg-gray-700 hover:bg-gray-600 rounded flex items-center justify-center",
+            title: "Decagon",
+            children: /* @__PURE__ */ jsxDEV9("div", {
+              className: "w-8 h-8 text-gray-300 flex items-center justify-center text-2xl",
+              children: "⬡"
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV9("button", {
+            onClick: () => onAddShape("hendecagon"),
+            className: "aspect-square bg-gray-700 hover:bg-gray-600 rounded flex items-center justify-center",
+            title: "Hendecagon",
+            children: /* @__PURE__ */ jsxDEV9("div", {
+              className: "w-8 h-8 text-gray-300 flex items-center justify-center text-2xl",
+              children: "⬡"
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV9("button", {
+            onClick: () => onAddShape("dodecagon"),
+            className: "aspect-square bg-gray-700 hover:bg-gray-600 rounded flex items-center justify-center",
+            title: "Dodecagon",
+            children: /* @__PURE__ */ jsxDEV9("div", {
+              className: "w-8 h-8 text-gray-300 flex items-center justify-center text-2xl",
+              children: "⬡"
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV9("button", {
+            onClick: () => onAddShape("right-triangle"),
+            className: "aspect-square bg-gray-700 hover:bg-gray-600 rounded flex items-center justify-center",
+            title: "Right Triangle",
+            children: /* @__PURE__ */ jsxDEV9("div", {
+              className: "w-8 h-8 text-gray-300 flex items-center justify-center text-2xl",
+              children: "⊿"
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV9("button", {
+            onClick: () => onAddShape("isosceles-triangle"),
+            className: "aspect-square bg-gray-700 hover:bg-gray-600 rounded flex items-center justify-center",
+            title: "Isosceles Triangle",
+            children: /* @__PURE__ */ jsxDEV9("div", {
+              className: "w-8 h-8 text-gray-300 flex items-center justify-center text-2xl",
+              children: "△"
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV9("button", {
+            onClick: () => onAddShape("scalene-triangle"),
+            className: "aspect-square bg-gray-700 hover:bg-gray-600 rounded flex items-center justify-center",
+            title: "Scalene Triangle",
+            children: /* @__PURE__ */ jsxDEV9("div", {
+              className: "w-8 h-8 text-gray-300 flex items-center justify-center text-2xl",
+              children: "△"
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+var ElementPanel_default = ElementPanel;
+
+// src/panels/TextPanel.tsx
+import {
+  Bold,
+  Italic,
+  Underline,
+  AlignLeft,
+  AlignCenter,
+  AlignRight,
+  Strikethrough
+} from "lucide-react";
+import { jsxDEV as jsxDEV10 } from "react/jsx-dev-runtime";
+var TextPanel = ({
+  selectedElement,
+  updateElement,
+  setTool,
+  onAddText
+}) => {
+  const isTextElementSelected = selectedElement?.type === "text";
+  return /* @__PURE__ */ jsxDEV10("div", {
+    children: [
+      /* @__PURE__ */ jsxDEV10("h3", {
+        className: "text-white font-semibold mb-4",
+        children: "Text"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV10("button", {
+        onClick: onAddText,
+        className: "w-full p-3 bg-blue-600 text-white rounded hover:bg-blue-700 mb-4",
+        children: "Add Text"
+      }, undefined, false, undefined, this),
+      !isTextElementSelected && /* @__PURE__ */ jsxDEV10("p", {
+        className: "text-gray-400",
+        children: "Select a text element to edit its properties."
+      }, undefined, false, undefined, this),
+      isTextElementSelected && selectedElement && /* @__PURE__ */ jsxDEV10("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV10("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV10("label", {
+                className: "text-gray-400 text-sm",
+                children: "Font Family"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV10("select", {
+                value: selectedElement.fontFamily || "Arial",
+                onChange: (e) => updateElement(selectedElement.id, {
+                  fontFamily: e.target.value
+                }),
+                className: "w-full mt-1 bg-gray-700 text-white border border-gray-600 rounded px-3 py-2",
+                children: FONT_FAMILIES.map((font) => /* @__PURE__ */ jsxDEV10("option", {
+                  value: font,
+                  children: font
+                }, font, false, undefined, this))
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV10("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV10("label", {
+                className: "text-gray-400 text-sm",
+                children: "Font Size"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV10("input", {
+                type: "number",
+                value: selectedElement.fontSize || 16,
+                onChange: (e) => updateElement(selectedElement.id, {
+                  fontSize: parseInt(e.target.value) || 16
+                }),
+                className: "w-full mt-1 bg-gray-700 text-white border border-gray-600 rounded px-3 py-2"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV10("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV10("label", {
+                className: "text-gray-400 text-sm",
+                children: "Text Color"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV10("div", {
+                className: "flex items-center mt-1",
+                children: [
+                  /* @__PURE__ */ jsxDEV10("input", {
+                    type: "color",
+                    value: selectedElement.fill || "#000000",
+                    onChange: (e) => updateElement(selectedElement.id, {
+                      fill: e.target.value
+                    }),
+                    className: "w-12 h-12 border border-gray-600 rounded cursor-pointer"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV10("input", {
+                    type: "text",
+                    value: selectedElement.fill || "#000000",
+                    onChange: (e) => updateElement(selectedElement.id, {
+                      fill: e.target.value
+                    }),
+                    className: "flex-1 ml-2 bg-gray-700 text-white border border-gray-600 rounded px-3 py-2"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV10("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV10("label", {
+                className: "text-gray-400 text-sm",
+                children: "Style"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV10("div", {
+                className: "flex space-x-2 mt-1",
+                children: [
+                  /* @__PURE__ */ jsxDEV10("button", {
+                    onClick: () => updateElement(selectedElement.id, {
+                      fontStyle: selectedElement.fontStyle?.includes("bold") ? selectedElement.fontStyle.replace("bold", "").trim() : `${selectedElement.fontStyle || ""} bold`.trim()
+                    }),
+                    className: `p-2 rounded ${selectedElement.fontStyle?.includes("bold") ? "bg-gray-600" : "bg-gray-700"} hover:bg-gray-600`,
+                    children: /* @__PURE__ */ jsxDEV10(Bold, {
+                      className: "w-4 h-4 text-white"
+                    }, undefined, false, undefined, this)
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV10("button", {
+                    onClick: () => updateElement(selectedElement.id, {
+                      fontStyle: selectedElement.fontStyle?.includes("italic") ? selectedElement.fontStyle.replace("italic", "").trim() : `${selectedElement.fontStyle || ""} italic`.trim()
+                    }),
+                    className: `p-2 rounded ${selectedElement.fontStyle?.includes("italic") ? "bg-gray-600" : "bg-gray-700"} hover:bg-gray-600`,
+                    children: /* @__PURE__ */ jsxDEV10(Italic, {
+                      className: "w-4 h-4 text-white"
+                    }, undefined, false, undefined, this)
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV10("button", {
+                    onClick: () => updateElement(selectedElement.id, {
+                      textDecoration: selectedElement.textDecoration === "underline" ? "" : "underline"
+                    }),
+                    className: `p-2 rounded ${selectedElement.textDecoration === "underline" ? "bg-gray-600" : "bg-gray-700"} hover:bg-gray-600`,
+                    children: /* @__PURE__ */ jsxDEV10(Underline, {
+                      className: "w-4 h-4 text-white"
+                    }, undefined, false, undefined, this)
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV10("button", {
+                    onClick: () => updateElement(selectedElement.id, {
+                      textDecoration: selectedElement.textDecoration === "strikethrough" ? "" : "strikethrough"
+                    }),
+                    className: `p-2 rounded ${selectedElement.textDecoration === "strikethrough" ? "bg-gray-600" : "bg-gray-700"} hover:bg-gray-600`,
+                    children: /* @__PURE__ */ jsxDEV10(Strikethrough, {
+                      className: "w-4 h-4 text-white"
+                    }, undefined, false, undefined, this)
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV10("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV10("label", {
+                className: "text-gray-400 text-sm",
+                children: "Alignment"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV10("div", {
+                className: "flex space-x-2 mt-1",
+                children: [
+                  /* @__PURE__ */ jsxDEV10("button", {
+                    onClick: () => updateElement(selectedElement.id, { align: "left" }),
+                    className: `p-2 rounded ${selectedElement.align === "left" ? "bg-gray-600" : "bg-gray-700"} hover:bg-gray-600`,
+                    children: /* @__PURE__ */ jsxDEV10(AlignLeft, {
+                      className: "w-4 h-4 text-white"
+                    }, undefined, false, undefined, this)
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV10("button", {
+                    onClick: () => updateElement(selectedElement.id, {
+                      align: "center"
+                    }),
+                    className: `p-2 rounded ${selectedElement.align === "center" ? "bg-gray-600" : "bg-gray-700"} hover:bg-gray-600`,
+                    children: /* @__PURE__ */ jsxDEV10(AlignCenter, {
+                      className: "w-4 h-4 text-white"
+                    }, undefined, false, undefined, this)
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV10("button", {
+                    onClick: () => updateElement(selectedElement.id, {
+                      align: "right"
+                    }),
+                    className: `p-2 rounded ${selectedElement.align === "right" ? "bg-gray-600" : "bg-gray-700"} hover:bg-gray-600`,
+                    children: /* @__PURE__ */ jsxDEV10(AlignRight, {
+                      className: "w-4 h-4 text-white"
+                    }, undefined, false, undefined, this)
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV10("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV10("label", {
+                className: "text-gray-400 text-sm",
+                children: "Text Case"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV10("select", {
+                value: selectedElement.textCase || "none",
+                onChange: (e) => updateElement(selectedElement.id, {
+                  textCase: e.target.value
+                }),
+                className: "w-full mt-1 bg-gray-700 text-white border border-gray-600 rounded px-3 py-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV10("option", {
+                    value: "none",
+                    children: "None"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV10("option", {
+                    value: "uppercase",
+                    children: "Uppercase"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV10("option", {
+                    value: "lowercase",
+                    children: "Lowercase"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV10("option", {
+                    value: "capitalize",
+                    children: "Capitalize"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV10("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV10("label", {
+                className: "text-gray-400 text-sm",
+                children: "Line Height (e.g., 1.2)"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV10("input", {
+                type: "number",
+                step: "0.1",
+                value: selectedElement.lineHeight || 1.2,
+                onChange: (e) => updateElement(selectedElement.id, {
+                  lineHeight: parseFloat(e.target.value) || 1.2
+                }),
+                className: "w-full mt-1 bg-gray-700 text-white border border-gray-600 rounded px-3 py-2"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV10("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV10("label", {
+                className: "text-gray-400 text-sm",
+                children: "Letter Spacing (px)"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV10("input", {
+                type: "number",
+                value: selectedElement.letterSpacing || 0,
+                onChange: (e) => updateElement(selectedElement.id, {
+                  letterSpacing: parseInt(e.target.value) || 0
+                }),
+                className: "w-full mt-1 bg-gray-700 text-white border border-gray-600 rounded px-3 py-2"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV10("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV10("label", {
+                className: "text-gray-400 text-sm",
+                children: "Text Box Width (px, auto if 0)"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV10("input", {
+                type: "number",
+                value: selectedElement.textWidth || "",
+                placeholder: "Auto",
+                onChange: (e) => updateElement(selectedElement.id, {
+                  textWidth: parseInt(e.target.value) || undefined
+                }),
+                className: "w-full mt-1 bg-gray-700 text-white border border-gray-600 rounded px-3 py-2"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV10("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV10("label", {
+                className: "text-gray-400 text-sm",
+                children: "Text Box Height (px, auto if 0)"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV10("input", {
+                type: "number",
+                value: selectedElement.textHeight || "",
+                placeholder: "Auto",
+                onChange: (e) => updateElement(selectedElement.id, {
+                  textHeight: parseInt(e.target.value) || undefined
+                }),
+                className: "w-full mt-1 bg-gray-700 text-white border border-gray-600 rounded px-3 py-2"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+var TextPanel_default = TextPanel;
+
+// src/panels/ImagePanel.tsx
+import { Upload, Search } from "lucide-react";
+import { jsxDEV as jsxDEV11 } from "react/jsx-dev-runtime";
+var ImagePanel = ({
+  selectedElement,
+  updateElement,
+  onUploadClick,
+  onUnsplashClick,
+  canvasWidth,
+  canvasHeight
+}) => {
+  const isImageSelected = selectedElement?.type === "image";
+  const handleFitToPage = () => {
+    if (!selectedElement || !selectedElement.src)
+      return;
+    const img = new window.Image;
+    img.src = selectedElement.src;
+    img.onload = () => {
+      const imgWidth = img.naturalWidth || selectedElement.width || 1;
+      const imgHeight = img.naturalHeight || selectedElement.height || 1;
+      const canvasAspect = canvasWidth / canvasHeight;
+      const imgAspect = imgWidth / imgHeight;
+      let newWidth, newHeight, newX, newY;
+      if (imgAspect > canvasAspect) {
+        newWidth = canvasWidth;
+        newHeight = newWidth / imgAspect;
+        newX = 0;
+        newY = (canvasHeight - newHeight) / 2;
+      } else {
+        newHeight = canvasHeight;
+        newWidth = newHeight * imgAspect;
+        newY = 0;
+        newX = (canvasWidth - newWidth) / 2;
+      }
+      updateElement(selectedElement.id, {
+        width: newWidth,
+        height: newHeight,
+        x: newX,
+        y: newY,
+        cropX: 0,
+        cropY: 0,
+        cropWidth: newWidth,
+        cropHeight: newHeight
+      });
+    };
+  };
+  const handleFillPage = () => {
+    if (!selectedElement || !selectedElement.src)
+      return;
+    const img = new window.Image;
+    img.src = selectedElement.src;
+    img.onload = () => {
+      const imgWidth = img.naturalWidth || selectedElement.width || 1;
+      const imgHeight = img.naturalHeight || selectedElement.height || 1;
+      const canvasAspect = canvasWidth / canvasHeight;
+      const imgAspect = imgWidth / imgHeight;
+      let newWidth, newHeight, newX, newY;
+      if (imgAspect > canvasAspect) {
+        newHeight = canvasHeight;
+        newWidth = newHeight * imgAspect;
+        newY = 0;
+        newX = (canvasWidth - newWidth) / 2;
+      } else {
+        newWidth = canvasWidth;
+        newHeight = newWidth / imgAspect;
+        newX = 0;
+        newY = (canvasHeight - newHeight) / 2;
+      }
+      updateElement(selectedElement.id, {
+        width: newWidth,
+        height: newHeight,
+        x: newX,
+        y: newY,
+        cropX: 0,
+        cropY: 0,
+        cropWidth: newWidth,
+        cropHeight: newHeight
+      });
+    };
+  };
+  return /* @__PURE__ */ jsxDEV11("div", {
+    children: [
+      /* @__PURE__ */ jsxDEV11("h3", {
+        className: "text-white font-semibold mb-4",
+        children: "Images"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV11("div", {
+        className: "space-y-3",
+        children: [
+          /* @__PURE__ */ jsxDEV11("button", {
+            onClick: onUploadClick,
+            className: "w-full p-3 bg-gray-700 text-white rounded hover:bg-gray-600 flex items-center justify-center space-x-2",
+            children: [
+              /* @__PURE__ */ jsxDEV11(Upload, {
+                className: "w-4 h-4"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV11("span", {
+                children: "Upload Image"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV11("button", {
+            onClick: onUnsplashClick,
+            className: "w-full p-3 bg-gray-700 text-white rounded hover:bg-gray-600 flex items-center justify-center space-x-2",
+            children: [
+              /* @__PURE__ */ jsxDEV11(Search, {
+                className: "w-4 h-4"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV11("span", {
+                children: "Add Unsplash Image"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      isImageSelected && selectedElement && /* @__PURE__ */ jsxDEV11("div", {
+        className: "mt-6 space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV11("h4", {
+            className: "text-white font-semibold",
+            children: "Image Settings"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV11("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV11("label", {
+                htmlFor: "opacity",
+                className: "text-gray-400 text-sm",
+                children: "Opacity"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV11("input", {
+                id: "opacity",
+                type: "range",
+                min: "0",
+                max: "1",
+                step: "0.1",
+                value: selectedElement.opacity,
+                onChange: (e) => updateElement(selectedElement.id, {
+                  opacity: parseFloat(e.target.value)
+                }),
+                className: "w-full mt-1"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV11("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV11("label", {
+                htmlFor: "corner-radius",
+                className: "text-gray-400 text-sm",
+                children: "Corner Radius"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV11("input", {
+                id: "corner-radius",
+                type: "number",
+                value: selectedElement.cornerRadius || 0,
+                onChange: (e) => updateElement(selectedElement.id, {
+                  cornerRadius: parseInt(e.target.value) || 0
+                }),
+                className: "w-full mt-1 bg-gray-700 text-white border border-gray-600 rounded px-3 py-2"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV11("div", {
+            className: "grid grid-cols-2 gap-2",
+            children: [
+              /* @__PURE__ */ jsxDEV11("button", {
+                onClick: handleFitToPage,
+                className: "p-2 bg-gray-600 text-white rounded hover:bg-gray-500 text-sm",
+                children: "Fit to Page"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV11("button", {
+                onClick: handleFillPage,
+                className: "p-2 bg-gray-600 text-white rounded hover:bg-gray-500 text-sm",
+                children: "Fill Page"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV11("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV11("h5", {
+                className: "text-gray-300 font-semibold my-2",
+                children: "Crop"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV11("div", {
+                className: "space-y-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV11("div", {
+                    children: [
+                      /* @__PURE__ */ jsxDEV11("label", {
+                        htmlFor: "cropX",
+                        className: "text-gray-400 text-sm",
+                        children: "Crop X"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV11("input", {
+                        id: "cropX",
+                        type: "range",
+                        min: "0",
+                        max: selectedElement.width,
+                        value: selectedElement.cropX || 0,
+                        onChange: (e) => updateElement(selectedElement.id, {
+                          cropX: parseInt(e.target.value)
+                        }),
+                        className: "w-full mt-1"
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV11("div", {
+                    children: [
+                      /* @__PURE__ */ jsxDEV11("label", {
+                        htmlFor: "cropY",
+                        className: "text-gray-400 text-sm",
+                        children: "Crop Y"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV11("input", {
+                        id: "cropY",
+                        type: "range",
+                        min: "0",
+                        max: selectedElement.height,
+                        value: selectedElement.cropY || 0,
+                        onChange: (e) => updateElement(selectedElement.id, {
+                          cropY: parseInt(e.target.value)
+                        }),
+                        className: "w-full mt-1"
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV11("div", {
+                    children: [
+                      /* @__PURE__ */ jsxDEV11("label", {
+                        htmlFor: "cropWidth",
+                        className: "text-gray-400 text-sm",
+                        children: "Crop Width"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV11("input", {
+                        id: "cropWidth",
+                        type: "range",
+                        min: "0",
+                        max: selectedElement.width,
+                        value: selectedElement.cropWidth || selectedElement.width,
+                        onChange: (e) => updateElement(selectedElement.id, {
+                          cropWidth: parseInt(e.target.value)
+                        }),
+                        className: "w-full mt-1"
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV11("div", {
+                    children: [
+                      /* @__PURE__ */ jsxDEV11("label", {
+                        htmlFor: "cropHeight",
+                        className: "text-gray-400 text-sm",
+                        children: "Crop Height"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV11("input", {
+                        id: "cropHeight",
+                        type: "range",
+                        min: "0",
+                        max: selectedElement.height,
+                        value: selectedElement.cropHeight || selectedElement.height,
+                        onChange: (e) => updateElement(selectedElement.id, {
+                          cropHeight: parseInt(e.target.value)
+                        }),
+                        className: "w-full mt-1"
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV11("button", {
+                    onClick: () => updateElement(selectedElement.id, {
+                      cropX: 0,
+                      cropY: 0,
+                      cropWidth: selectedElement.width,
+                      cropHeight: selectedElement.height
+                    }),
+                    className: "w-full p-2 bg-gray-600 text-white rounded hover:bg-gray-500 text-sm",
+                    children: "Reset Crop"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV11("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV11("h5", {
+                className: "text-gray-300 font-semibold my-2",
+                children: "Mask"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV11("select", {
+                value: selectedElement.mask?.type || "",
+                onChange: (e) => {
+                  const maskType = e.target.value;
+                  updateElement(selectedElement.id, {
+                    mask: maskType ? { type: maskType } : undefined
+                  });
+                },
+                className: "w-full mt-1 bg-gray-700 text-white border border-gray-600 rounded px-3 py-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV11("option", {
+                    value: "",
+                    children: "None"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV11("option", {
+                    value: "rect",
+                    children: "Rectangle"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV11("option", {
+                    value: "circle",
+                    children: "Circle"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV11("option", {
+                    value: "star",
+                    children: "Star"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV11("option", {
+                    value: "polygon",
+                    children: "Polygon"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV11("option", {
+                    value: "triangle",
+                    children: "Triangle"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV11("option", {
+                    value: "arrow",
+                    children: "Arrow"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV11("option", {
+                    value: "pentagon",
+                    children: "Pentagon"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV11("option", {
+                    value: "octagon",
+                    children: "Octagon"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV11("option", {
+                    value: "nonagon",
+                    children: "Nonagon"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV11("option", {
+                    value: "decagon",
+                    children: "Decagon"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV11("option", {
+                    value: "hendecagon",
+                    children: "Hendecagon"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV11("option", {
+                    value: "dodecagon",
+                    children: "Dodecagon"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV11("option", {
+                    value: "right-triangle",
+                    children: "Right Triangle"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV11("option", {
+                    value: "isosceles-triangle",
+                    children: "Isosceles Triangle"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV11("option", {
+                    value: "scalene-triangle",
+                    children: "Scalene Triangle"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV11("button", {
+                onClick: () => updateElement(selectedElement.id, { mask: undefined }),
+                className: "w-full p-2 bg-red-700 text-white rounded hover:bg-red-600 text-sm mt-2",
+                children: "Remove Mask"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV11("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV11("label", {
+                className: "text-gray-400 text-sm",
+                children: "Filters"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV11("div", {
+                className: "space-y-2 mt-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV11("div", {
+                    className: "flex items-center justify-between",
+                    children: [
+                      /* @__PURE__ */ jsxDEV11("label", {
+                        htmlFor: "grayscale",
+                        className: "text-gray-300 text-sm",
+                        children: "Grayscale"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV11("input", {
+                        id: "grayscale",
+                        type: "checkbox",
+                        checked: selectedElement.filters?.grayscale || false,
+                        onChange: (e) => updateElement(selectedElement.id, {
+                          filters: {
+                            ...selectedElement.filters,
+                            grayscale: e.target.checked
+                          }
+                        }),
+                        className: "rounded"
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV11("div", {
+                    className: "flex items-center justify-between",
+                    children: [
+                      /* @__PURE__ */ jsxDEV11("label", {
+                        htmlFor: "sepia",
+                        className: "text-gray-300 text-sm",
+                        children: "Sepia"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV11("input", {
+                        id: "sepia",
+                        type: "checkbox",
+                        checked: selectedElement.filters?.sepia || false,
+                        onChange: (e) => updateElement(selectedElement.id, {
+                          filters: {
+                            ...selectedElement.filters,
+                            sepia: e.target.checked
+                          }
+                        }),
+                        className: "rounded"
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+var ImagePanel_default = ImagePanel;
+
+// src/panels/DesignPanel.tsx
+import { jsxDEV as jsxDEV12 } from "react/jsx-dev-runtime";
+var DesignPanel = ({
+  design,
+  currentPage,
+  selectedElement,
+  setDesign,
+  updateElement,
+  onSetUnsplashBackground,
+  config
+}) => {
+  return /* @__PURE__ */ jsxDEV12("div", {
+    children: [
+      /* @__PURE__ */ jsxDEV12("h3", {
+        className: "text-white font-semibold mb-4",
+        children: "Design"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV12("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV12("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV12("label", {
+                htmlFor: "canvas-size",
+                className: "text-gray-400 text-sm",
+                children: "Canvas Size"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV12("select", {
+                id: "canvas-size",
+                value: CANVAS_PRESETS.find((p) => p.width === design.width && p.height === design.height)?.name || "",
+                onChange: (e) => {
+                  const preset = CANVAS_PRESETS.find((p) => p.name === e.target.value);
+                  if (preset) {
+                    setDesign((prev) => ({
+                      ...prev,
+                      width: preset.width,
+                      height: preset.height
+                    }));
+                  }
+                },
+                className: "w-full mt-1 bg-gray-700 text-white border border-gray-600 rounded px-3 py-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV12("option", {
+                    value: "",
+                    disabled: true,
+                    children: "Select a preset"
+                  }, undefined, false, undefined, this),
+                  CANVAS_PRESETS.map((preset) => /* @__PURE__ */ jsxDEV12("option", {
+                    value: preset.name,
+                    children: [
+                      preset.name,
+                      " (",
+                      preset.width,
+                      "x",
+                      preset.height,
+                      ")"
+                    ]
+                  }, preset.name, true, undefined, this))
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          (config?.designSize?.width || config?.designSize?.height) && /* @__PURE__ */ jsxDEV12("div", {
+            className: "grid grid-cols-2 gap-2",
+            children: [
+              config?.designSize?.width && /* @__PURE__ */ jsxDEV12("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV12("label", {
+                    htmlFor: "canvas-width",
+                    className: "text-gray-400 text-sm",
+                    children: "Width"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV12("input", {
+                    id: "canvas-width",
+                    type: "number",
+                    value: design.width,
+                    onChange: (e) => setDesign((prev) => ({
+                      ...prev,
+                      width: parseInt(e.target.value) || 800
+                    })),
+                    className: "w-full mt-1 bg-gray-700 text-white border border-gray-600 rounded px-3 py-2"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              config?.designSize?.height && /* @__PURE__ */ jsxDEV12("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV12("label", {
+                    htmlFor: "canvas-height",
+                    className: "text-gray-400 text-sm",
+                    children: "Height"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV12("input", {
+                    id: "canvas-height",
+                    type: "number",
+                    value: design.height,
+                    onChange: (e) => setDesign((prev) => ({
+                      ...prev,
+                      height: parseInt(e.target.value) || 600
+                    })),
+                    className: "w-full mt-1 bg-gray-700 text-white border border-gray-600 rounded px-3 py-2"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV12("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV12("label", {
+                id: "color-palette-label",
+                className: "text-gray-400 text-sm mb-2 block",
+                children: "Color Palette"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV12("div", {
+                className: "grid grid-cols-5 gap-2",
+                role: "group",
+                "aria-labelledby": "color-palette-label",
+                children: design.colors.map((color, i) => /* @__PURE__ */ jsxDEV12("button", {
+                  "data-testid": `color-palette-button-${i}`,
+                  onClick: () => {
+                    if (selectedElement) {
+                      updateElement(selectedElement.id, { fill: color });
+                    } else {
+                      setDesign((prev) => ({
+                        ...prev,
+                        pages: prev.pages.map((p) => p.id === currentPage.id ? { ...p, background: color, backgroundImageObject: undefined } : p)
+                      }));
+                    }
+                  },
+                  className: "w-full aspect-square rounded border-2 border-gray-600",
+                  style: { backgroundColor: color },
+                  title: `Set color to ${color}`
+                }, i, false, undefined, this))
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+var DesignPanel_default = DesignPanel;
+
+// src/panels/BackgroundPanel.tsx
+import { ImageIcon as ImageIcon2 } from "lucide-react";
+import { jsxDEV as jsxDEV13 } from "react/jsx-dev-runtime";
+var BackgroundPanel = ({
+  design,
+  currentPage,
+  setDesign,
+  onSetUnsplashBackground
+}) => {
+  return /* @__PURE__ */ jsxDEV13("div", {
+    children: [
+      /* @__PURE__ */ jsxDEV13("h3", {
+        className: "text-white font-semibold mb-4",
+        children: "Background"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV13("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV13("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV13("label", {
+                htmlFor: "bg-color",
+                className: "text-gray-400 text-sm",
+                children: "Background Color"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV13("div", {
+                className: "flex items-center mt-1",
+                children: [
+                  /* @__PURE__ */ jsxDEV13("input", {
+                    id: "bg-color",
+                    type: "color",
+                    value: currentPage.background.startsWith("url") ? "#FFFFFF" : currentPage.background,
+                    onChange: (e) => setDesign((prev) => ({
+                      ...prev,
+                      pages: prev.pages.map((p) => p.id === currentPage.id ? { ...p, background: e.target.value, backgroundImageObject: undefined } : p)
+                    })),
+                    className: "w-12 h-12 border border-gray-600 rounded cursor-pointer"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV13("input", {
+                    type: "text",
+                    value: currentPage.background.startsWith("url") ? "#FFFFFF" : currentPage.background,
+                    onChange: (e) => setDesign((prev) => ({
+                      ...prev,
+                      pages: prev.pages.map((p) => p.id === currentPage.id ? { ...p, background: e.target.value, backgroundImageObject: undefined } : p)
+                    })),
+                    className: "flex-1 ml-2 bg-gray-700 text-white border border-gray-600 rounded px-3 py-2"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV13("button", {
+            onClick: onSetUnsplashBackground,
+            className: "w-full p-3 bg-gray-700 text-white rounded hover:bg-gray-600 flex items-center justify-center space-x-2",
+            children: [
+              /* @__PURE__ */ jsxDEV13(ImageIcon2, {
+                className: "w-4 h-4"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV13("span", {
+                children: "Set Background from Unsplash"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+var BackgroundPanel_default = BackgroundPanel;
+
+// src/panels/VariablesPanel.tsx
+import { jsxDEV as jsxDEV14 } from "react/jsx-dev-runtime";
+var VariablesPanel = ({
+  config,
+  design,
+  setDesign
+}) => {
+  const handleVariableChange = (variable, value) => {
+    setDesign((prev) => {
+      const newDesign = { ...prev };
+      newDesign.pages.forEach((page) => {
+        page.elements.forEach((element) => {
+          if (element.text?.includes(`{${variable}}`)) {
+            element.text = element.text.replace(`{${variable}}`, value);
+          }
+          if (element.src?.includes(`{${variable}}`)) {
+            element.src = element.src.replace(`{${variable}}`, value);
+          }
+        });
+      });
+      return newDesign;
+    });
+  };
+  return /* @__PURE__ */ jsxDEV14("div", {
+    children: [
+      /* @__PURE__ */ jsxDEV14("h3", {
+        className: "text-white font-semibold mb-4",
+        children: "Variables"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV14("div", {
+        className: "space-y-4",
+        children: config.steps?.map((step) => /* @__PURE__ */ jsxDEV14("div", {
+          children: [
+            /* @__PURE__ */ jsxDEV14("label", {
+              htmlFor: step.variable,
+              className: "text-gray-400 text-sm",
+              children: step.name
+            }, undefined, false, undefined, this),
+            step.type === "text" && /* @__PURE__ */ jsxDEV14("input", {
+              id: step.variable,
+              type: "text",
+              onChange: (e) => handleVariableChange(step.variable, e.target.value),
+              className: "w-full mt-1 bg-gray-700 text-white border border-gray-600 rounded px-3 py-2"
+            }, undefined, false, undefined, this),
+            step.type === "image" && /* @__PURE__ */ jsxDEV14("input", {
+              id: step.variable,
+              type: "file",
+              accept: "image/*",
+              onChange: (e) => {
+                const file = e.target.files?.[0];
+                if (file) {
+                  const reader = new FileReader;
+                  reader.onload = (event) => {
+                    handleVariableChange(step.variable, event.target?.result);
+                  };
+                  reader.readAsDataURL(file);
+                }
+              },
+              className: "w-full mt-1 bg-gray-700 text-white border border-gray-600 rounded px-3 py-2"
+            }, undefined, false, undefined, this)
+          ]
+        }, step.variable, true, undefined, this))
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+var VariablesPanel_default = VariablesPanel;
+
+// src/panels/ExportPanel.tsx
+import { jsxDEV as jsxDEV15 } from "react/jsx-dev-runtime";
+var ExportPanel = ({
+  onExportToPNG,
+  onExportToJPG,
+  onExportToJSON,
+  onImportJSON
+}) => {
+  return /* @__PURE__ */ jsxDEV15("div", {
+    children: [
+      /* @__PURE__ */ jsxDEV15("h3", {
+        className: "text-white font-semibold mb-4",
+        children: "Export"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV15("div", {
+        className: "space-y-3",
+        children: [
+          /* @__PURE__ */ jsxDEV15("button", {
+            onClick: onExportToPNG,
+            className: "w-full p-3 bg-blue-600 text-white rounded hover:bg-blue-700",
+            children: "Export as PNG"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV15("button", {
+            onClick: onExportToJPG,
+            className: "w-full p-3 bg-blue-600 text-white rounded hover:bg-blue-700",
+            children: "Export as JPG"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV15("button", {
+            onClick: onExportToJSON,
+            className: "w-full p-3 bg-gray-700 text-white rounded hover:bg-gray-600",
+            children: "Export as JSON"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV15("button", {
+            onClick: onImportJSON,
+            className: "w-full p-3 bg-gray-700 text-white rounded hover:bg-gray-600",
+            children: "Import JSON"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+var ExportPanel_default = ExportPanel;
+
+// src/components/sidebar/RightSidebar.tsx
+import {
+  Layers as Layers2,
+  Type as Type2,
+  ImageIcon as ImageIcon3,
+  Square as Square3,
+  Eye,
+  EyeOff,
+  Lock,
+  Unlock,
+  Copy,
+  ChevronDown,
+  Trash2
+} from "lucide-react";
+import { jsxDEV as jsxDEV16 } from "react/jsx-dev-runtime";
+var RightSidebar = ({
+  currentPageElements,
+  selectedElement,
+  selectedId,
+  onSelectElement,
+  onUpdateElement,
+  onDuplicateSelected,
+  onMoveElementUp,
+  onMoveElementDown,
+  onDeleteSelected
+}) => {
+  return /* @__PURE__ */ jsxDEV16("div", {
+    className: "w-64 bg-gray-800 border-l border-gray-700 p-4 flex flex-col",
+    children: [
+      /* @__PURE__ */ jsxDEV16("h3", {
+        className: "text-white font-semibold mb-4 flex items-center",
+        children: [
+          /* @__PURE__ */ jsxDEV16(Layers2, {
+            className: "w-4 h-4 mr-2"
+          }, undefined, false, undefined, this),
+          "Layers"
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV16("div", {
+        className: "space-y-2 flex-1 overflow-y-auto",
+        children: [...currentPageElements].reverse().map((element) => /* @__PURE__ */ jsxDEV16("div", {
+          "data-testid": `sidebar-element-${element.id}`,
+          onClick: () => onSelectElement(element.id),
+          className: `p-2 rounded cursor-pointer flex items-center justify-between group ${element.id === selectedId ? "bg-gray-700" : "hover:bg-gray-700"}`,
+          children: [
+            /* @__PURE__ */ jsxDEV16("div", {
+              className: "flex items-center space-x-2 flex-1 min-w-0",
+              children: [
+                /* @__PURE__ */ jsxDEV16("div", {
+                  className: "text-gray-400",
+                  children: [
+                    element.type === "text" && /* @__PURE__ */ jsxDEV16(Type2, {
+                      className: "w-4 h-4"
+                    }, undefined, false, undefined, this),
+                    element.type === "image" && /* @__PURE__ */ jsxDEV16(ImageIcon3, {
+                      className: "w-4 h-4"
+                    }, undefined, false, undefined, this),
+                    element.type === "shape" && /* @__PURE__ */ jsxDEV16(Square3, {
+                      className: "w-4 h-4"
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this),
+                /* @__PURE__ */ jsxDEV16("span", {
+                  className: "text-gray-300 text-sm truncate",
+                  children: element.name
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV16("div", {
+              className: "flex items-center space-x-1 opacity-0 group-hover:opacity-100",
+              children: [
+                /* @__PURE__ */ jsxDEV16("button", {
+                  "data-testid": `toggle-visibility-${element.id}`,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onUpdateElement(element.id, { visible: !element.visible });
+                  },
+                  className: "p-1 hover:bg-gray-600 rounded",
+                  title: element.visible ? "Hide" : "Show",
+                  children: element.visible ? /* @__PURE__ */ jsxDEV16(Eye, {
+                    className: "w-3 h-3 text-gray-400"
+                  }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV16(EyeOff, {
+                    className: "w-3 h-3 text-gray-400"
+                  }, undefined, false, undefined, this)
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV16("button", {
+                  "data-testid": `toggle-lock-${element.id}`,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onUpdateElement(element.id, { locked: !element.locked });
+                  },
+                  className: "p-1 hover:bg-gray-600 rounded",
+                  title: element.locked ? "Unlock" : "Lock",
+                  children: element.locked ? /* @__PURE__ */ jsxDEV16(Lock, {
+                    className: "w-3 h-3 text-gray-400"
+                  }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV16(Unlock, {
+                    className: "w-3 h-3 text-gray-400"
+                  }, undefined, false, undefined, this)
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          ]
+        }, element.id, true, undefined, this))
+      }, undefined, false, undefined, this),
+      selectedElement && /* @__PURE__ */ jsxDEV16("div", {
+        className: "mt-6 space-y-3 border-t border-gray-700 pt-4",
+        children: [
+          /* @__PURE__ */ jsxDEV16("button", {
+            onClick: onDuplicateSelected,
+            className: "w-full p-2 bg-gray-700 text-white rounded hover:bg-gray-600 flex items-center justify-center space-x-2",
+            children: [
+              /* @__PURE__ */ jsxDEV16(Copy, {
+                className: "w-4 h-4"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV16("span", {
+                children: "Duplicate"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV16("div", {
+            className: "flex space-x-2",
+            children: [
+              /* @__PURE__ */ jsxDEV16("button", {
+                onClick: () => onMoveElementUp(selectedElement.id),
+                className: "flex-1 p-2 bg-gray-700 text-white rounded hover:bg-gray-600",
+                title: "Move Forward",
+                children: /* @__PURE__ */ jsxDEV16(ChevronDown, {
+                  className: "w-4 h-4 mx-auto transform rotate-180"
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV16("button", {
+                onClick: () => onMoveElementDown(selectedElement.id),
+                className: "flex-1 p-2 bg-gray-700 text-white rounded hover:bg-gray-600",
+                title: "Move Backward",
+                children: /* @__PURE__ */ jsxDEV16(ChevronDown, {
+                  className: "w-4 h-4 mx-auto"
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV16("button", {
+            onClick: onDeleteSelected,
+            className: "w-full p-2 bg-red-600 text-white rounded hover:bg-red-700 flex items-center justify-center space-x-2",
+            children: [
+              /* @__PURE__ */ jsxDEV16(Trash2, {
+                className: "w-4 h-4"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV16("span", {
+                children: "Delete"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+var RightSidebar_default = RightSidebar;
+
+// src/utils/exportImportUtils.ts
+function convertTemplateToCanvasDesign(json) {
+  const converted = { ...json };
+  if (!converted.id) {
+    converted.id = Date.now().toString();
+  }
+  if (!converted.name) {
+    converted.name = json.name || "Imported Design";
+  }
+  if (!converted.fonts) {
+    converted.fonts = [];
+  }
+  if (!converted.colors) {
+    converted.colors = [];
+  }
+  if (!converted.templateInputs) {
+    converted.templateInputs = [];
+  }
+  if (converted.pages && Array.isArray(converted.pages)) {
+    converted.pages = converted.pages.map((page, index) => {
+      const elements = (page.elements || page.children || []).map((element) => {
+        return {
+          ...element,
+          id: element.id || `${Date.now()}-${Math.random()}`,
+          type: element.type || "text",
+          name: element.name || "Untitled",
+          x: element.x ?? 0,
+          y: element.y ?? 0,
+          rotation: element.rotation ?? 0,
+          visible: element.visible !== undefined ? element.visible : true,
+          locked: element.locked !== undefined ? element.locked : false,
+          opacity: element.opacity !== undefined ? element.opacity : 1,
+          width: element.width,
+          height: element.height,
+          src: element.src,
+          text: element.text,
+          fontSize: element.fontSize,
+          fontFamily: element.fontFamily,
+          fill: element.fill,
+          stroke: element.stroke,
+          strokeWidth: element.strokeWidth,
+          cropX: element.cropX,
+          cropY: element.cropY,
+          cropWidth: element.cropWidth,
+          cropHeight: element.cropHeight,
+          cornerRadius: element.cornerRadius,
+          filters: element.filters,
+          mask: element.mask,
+          shapeType: element.shapeType,
+          align: element.align,
+          lineHeight: element.lineHeight,
+          letterSpacing: element.letterSpacing,
+          textCase: element.textCase,
+          strikethrough: element.strikethrough,
+          textWidth: element.textWidth,
+          textHeight: element.textHeight,
+          userInput: element.userInput
+        };
+      });
+      const convertedPage = {
+        id: page.id || `${Date.now()}-${index}`,
+        name: page.name || `Page ${index + 1}`,
+        elements,
+        background: page.background || "#ffffff"
+      };
+      return convertedPage;
+    });
+  } else {
+    converted.pages = [
+      {
+        id: "1",
+        name: "Page 1",
+        elements: [],
+        background: "#ffffff"
+      }
+    ];
+  }
+  return converted;
+}
+function findRequiredInputs(design) {
+  const inputs = [];
+  let hasImageInput = false;
+  let hasTextInput = false;
+  design.pages.forEach((page) => {
+    page.elements.forEach((element) => {
+      if (element.userInput) {
+        inputs.push({
+          config: element.userInput,
+          elementId: element.id,
+          elementType: element.type
+        });
+        if (element.userInput.type === "image") {
+          hasImageInput = true;
+        } else if (element.userInput.type === "text") {
+          hasTextInput = true;
+        }
+      } else if (element.type === "image" && element.src?.match(/{{.*}}/)) {
+        const match = element.src.match(/{{(.*?)}}/);
+        const placeholderId = match ? match[1].trim() : "image";
+        inputs.push({
+          config: {
+            required: true,
+            type: "image",
+            id: placeholderId,
+            label: `Upload ${placeholderId}`,
+            property: "src",
+            accept: "image/*"
+          },
+          elementId: element.id,
+          elementType: element.type
+        });
+        hasImageInput = true;
+      } else if (element.type === "text" && element.text?.match(/{{.*}}/)) {
+        const match = element.text.match(/{{(.*?)}}/);
+        const placeholderId = match ? match[1].trim() : "text";
+        inputs.push({
+          config: {
+            required: true,
+            type: "text",
+            id: placeholderId,
+            label: `Enter ${placeholderId}`,
+            property: "text",
+            placeholder: `Enter ${placeholderId}`
+          },
+          elementId: element.id,
+          elementType: element.type
+        });
+        hasTextInput = true;
+      }
+    });
+  });
+  if (design.templateInputs && Array.isArray(design.templateInputs)) {
+    design.templateInputs.forEach((config) => {
+      inputs.push({
+        config,
+        elementId: "",
+        elementType: config.type
+      });
+      if (config.type === "image") {
+        hasImageInput = true;
+      } else if (config.type === "text") {
+        hasTextInput = true;
+      }
+    });
+  }
+  if (!hasImageInput) {
+    inputs.push({
+      config: {
+        required: false,
+        type: "image",
+        id: "optionalImage",
+        label: "Optional Image Upload",
+        property: "optionalImage",
+        accept: "image/*",
+        maxSize: 5242880,
+        helpText: "You can optionally upload an image",
+        order: 999
+      },
+      elementId: "",
+      elementType: "image"
+    });
+  }
+  if (!hasTextInput) {
+    inputs.push({
+      config: {
+        required: false,
+        type: "text",
+        id: "optionalText",
+        label: "Optional Text",
+        property: "optionalText",
+        placeholder: "Enter optional text",
+        helpText: "You can optionally enter some text",
+        order: 1000
+      },
+      elementId: "",
+      elementType: "text"
+    });
+  }
+  return inputs.sort((a, b) => (a.config.order || 0) - (b.config.order || 0));
+}
+function replaceUserInputs(design, collectedInputs) {
+  const updatedDesign = { ...design };
+  updatedDesign.pages = updatedDesign.pages.map((page) => ({
+    ...page,
+    elements: page.elements.map((element) => {
+      if (element.userInput) {
+        const inputId = element.userInput.id;
+        const inputValue = collectedInputs[inputId];
+        const propertyToReplace = element.userInput.property || (element.type === "image" ? "src" : "text");
+        if (inputValue !== undefined) {
+          return {
+            ...element,
+            [propertyToReplace]: inputValue,
+            userInput: undefined
+          };
+        }
+      } else if (element.type === "image" && element.src?.match(/{{.*}}/)) {
+        const match = element.src.match(/{{(.*?)}}/);
+        if (match) {
+          const placeholderId = match[1].trim();
+          const inputValue = collectedInputs[placeholderId];
+          if (inputValue !== undefined) {
+            return {
+              ...element,
+              src: inputValue
+            };
+          }
+        }
+      } else if (element.type === "text" && element.text?.match(/{{.*}}/)) {
+        const match = element.text.match(/{{(.*?)}}/);
+        if (match) {
+          const placeholderId = match[1].trim();
+          const inputValue = collectedInputs[placeholderId];
+          if (inputValue !== undefined) {
+            return {
+              ...element,
+              text: inputValue
+            };
+          }
+        }
+      }
+      return element;
+    })
+  }));
+  return updatedDesign;
+}
+var exportToPNG = (stage, design) => {
+  if (stage) {
+    const oldScale = stage.scaleX();
+    stage.scale({ x: 1, y: 1 });
+    const uri = stage.toDataURL({ pixelRatio: 2 });
+    stage.scale({ x: oldScale, y: oldScale });
+    const link = document.createElement("a");
+    link.download = `${design.name}.png`;
+    link.href = uri;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+};
+var exportToJPG = (stage, design) => {
+  if (stage) {
+    const oldScale = stage.scaleX();
+    stage.scale({ x: 1, y: 1 });
+    const uri = stage.toDataURL({
+      pixelRatio: 2,
+      mimeType: "image/jpeg",
+      quality: 0.9
+    });
+    stage.scale({ x: oldScale, y: oldScale });
+    const link = document.createElement("a");
+    link.download = `${design.name}.jpg`;
+    link.href = uri;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+};
+var exportToJSON = (design) => {
+  const json = JSON.stringify(design, null, 2);
+  const blob = new Blob([json], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.download = `${design.name}.json`;
+  link.href = url;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+};
+var importFromJSON = (event, onLoad, onError, onInputsRequired) => {
+  const file = event.target.files?.[0];
+  if (file) {
+    const reader = new FileReader;
+    reader.onload = (e) => {
+      try {
+        const result = e.target?.result;
+        if (typeof result === "string") {
+          const json = JSON.parse(result);
+          const convertedDesign = convertTemplateToCanvasDesign(json);
+          const requiredInputs = findRequiredInputs(convertedDesign);
+          if (requiredInputs.length > 0 && onInputsRequired) {
+            onInputsRequired(requiredInputs, (collectedValues) => {
+              const finalDesign = replaceUserInputs(convertedDesign, collectedValues);
+              onLoad(finalDesign);
+            });
+          } else {
+            onLoad(convertedDesign);
+          }
+        } else {
+          onError("Failed to read file content as text.");
+        }
+      } catch (error) {
+        onError(`Invalid JSON file: ${error instanceof Error ? error.message : String(error)}`);
+      }
+    };
+    reader.onerror = () => {
+      onError("Failed to read file.");
+    };
+    reader.readAsText(file);
+  } else {}
+};
+
+// src/components/TemplateInputModal.tsx
+import { useState as useState2, useRef as useRef4 } from "react";
+import { X, Upload as Upload2, Image as ImageIcon4, ChevronLeft, ChevronRight } from "lucide-react";
+import { jsxDEV as jsxDEV17 } from "react/jsx-dev-runtime";
+var TemplateInputModal = ({
+  inputs,
+  onComplete,
+  onCancel
+}) => {
+  const [values, setValues] = useState2({});
+  const [errors, setErrors] = useState2({});
+  const [currentStep, setCurrentStep] = useState2(0);
+  const fileInputRefs = useRef4({});
+  const sortedInputs = [...inputs].sort((a, b) => (a.config.order || 0) - (b.config.order || 0));
+  const currentInput = sortedInputs[currentStep];
+  const isFirstStep = currentStep === 0;
+  const isLastStep = currentStep === sortedInputs.length - 1;
+  const handleTextChange = (id, value) => {
+    setValues((prev) => ({ ...prev, [id]: value }));
+    if (errors[id]) {
+      setErrors((prev) => {
+        const newErrors = { ...prev };
+        delete newErrors[id];
+        return newErrors;
+      });
+    }
+  };
+  const handleFileChange = (id, file) => {
+    if (!file) {
+      setValues((prev) => {
+        const newValues = { ...prev };
+        delete newValues[id];
+        return newValues;
+      });
+      return;
+    }
+    const config = inputs.find((input) => input.config.id === id)?.config;
+    if (!config)
+      return;
+    if (config.accept && !file.type.match(config.accept.replace("*", ".*"))) {
+      setErrors((prev) => ({
+        ...prev,
+        [id]: `File must be of type: ${config.accept}`
+      }));
+      return;
+    }
+    if (config.maxSize && file.size > config.maxSize) {
+      const maxSizeMB = (config.maxSize / 1024 / 1024).toFixed(2);
+      setErrors((prev) => ({
+        ...prev,
+        [id]: `File size must be less than ${maxSizeMB}MB`
+      }));
+      return;
+    }
+    const reader = new FileReader;
+    reader.onload = (e) => {
+      const result = e.target?.result;
+      if (typeof result === "string") {
+        setValues((prev) => ({ ...prev, [id]: result }));
+        setErrors((prev) => {
+          const newErrors = { ...prev };
+          delete newErrors[id];
+          return newErrors;
+        });
+      }
+    };
+    reader.onerror = () => {
+      setErrors((prev) => ({
+        ...prev,
+        [id]: "Failed to read file"
+      }));
+    };
+    reader.readAsDataURL(file);
+  };
+  const validateCurrentStep = () => {
+    if (!currentInput)
+      return false;
+    const config = currentInput.config;
+    const value = values[config.id];
+    const newErrors = { ...errors };
+    delete newErrors[config.id];
+    if (config.required && !value) {
+      newErrors[config.id] = "This field is required";
+      setErrors(newErrors);
+      return false;
+    }
+    if (config.type === "text" && value) {
+      if (config.minLength && value.length < config.minLength) {
+        newErrors[config.id] = `Minimum length is ${config.minLength} characters`;
+        setErrors(newErrors);
+        return false;
+      }
+      if (config.maxLength && value.length > config.maxLength) {
+        newErrors[config.id] = `Maximum length is ${config.maxLength} characters`;
+        setErrors(newErrors);
+        return false;
+      }
+    }
+    setErrors(newErrors);
+    return true;
+  };
+  const handleNext = () => {
+    if (!validateCurrentStep()) {
+      return;
+    }
+    if (isLastStep) {
+      const allErrors = {};
+      sortedInputs.forEach((input) => {
+        if (input.config.required && !values[input.config.id]) {
+          allErrors[input.config.id] = "This field is required";
+        }
+      });
+      if (Object.keys(allErrors).length > 0) {
+        setErrors(allErrors);
+        const firstErrorIndex = sortedInputs.findIndex((input) => allErrors[input.config.id]);
+        if (firstErrorIndex !== -1) {
+          setCurrentStep(firstErrorIndex);
+        }
+        return;
+      }
+      onComplete(values);
+    } else {
+      setCurrentStep((prev) => prev + 1);
+    }
+  };
+  const handlePrevious = () => {
+    if (!isFirstStep) {
+      setCurrentStep((prev) => prev - 1);
+    }
+  };
+  const handleSkip = () => {
+    if (!currentInput.config.required) {
+      const defaultValue = currentInput.config.defaultValue || "";
+      const valueToSet = defaultValue;
+      setValues((prev) => ({ ...prev, [currentInput.config.id]: valueToSet }));
+      setErrors((prev) => {
+        const newErrors = { ...prev };
+        delete newErrors[currentInput.config.id];
+        return newErrors;
+      });
+      const updatedValues = { ...values, [currentInput.config.id]: valueToSet };
+      if (isLastStep) {
+        const allErrors = {};
+        sortedInputs.forEach((input) => {
+          if (input.config.required && !updatedValues[input.config.id]) {
+            allErrors[input.config.id] = "This field is required";
+          }
+        });
+        if (Object.keys(allErrors).length > 0) {
+          setErrors(allErrors);
+          const firstErrorIndex = sortedInputs.findIndex((input) => allErrors[input.config.id]);
+          if (firstErrorIndex !== -1) {
+            setCurrentStep(firstErrorIndex);
+          }
+          return;
+        }
+        onComplete(updatedValues);
+      } else {
+        setCurrentStep((prev) => prev + 1);
+      }
+    }
+  };
+  const renderInput = (input) => {
+    const { config } = input;
+    const defaultValue = config.defaultValue || "";
+    const value = values[config.id] !== undefined ? values[config.id] : defaultValue;
+    const error = errors[config.id];
+    switch (config.type) {
+      case "image": {
+        const isUrl = value && (value.startsWith("http://") || value.startsWith("https://") || value.startsWith("data:"));
+        const isDefaultValue = value === defaultValue && defaultValue && (defaultValue.startsWith("http://") || defaultValue.startsWith("https://"));
+        return /* @__PURE__ */ jsxDEV17("div", {
+          className: "space-y-2",
+          children: [
+            /* @__PURE__ */ jsxDEV17("label", {
+              className: "block text-sm font-medium text-gray-300",
+              children: [
+                config.label,
+                config.required && /* @__PURE__ */ jsxDEV17("span", {
+                  className: "text-red-400 ml-1",
+                  children: "*"
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            config.helpText && /* @__PURE__ */ jsxDEV17("p", {
+              className: "text-xs text-gray-400",
+              children: config.helpText
+            }, undefined, false, undefined, this),
+            isDefaultValue && /* @__PURE__ */ jsxDEV17("p", {
+              className: "text-xs text-blue-400",
+              children: "Using default image"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV17("div", {
+              className: "flex items-center space-x-4",
+              children: [
+                /* @__PURE__ */ jsxDEV17("input", {
+                  ref: (el) => {
+                    fileInputRefs.current[config.id] = el;
+                  },
+                  type: "file",
+                  accept: config.accept || "image/*",
+                  onChange: (e) => handleFileChange(config.id, e.target.files?.[0] || null),
+                  className: "hidden"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV17("button", {
+                  type: "button",
+                  onClick: () => fileInputRefs.current[config.id]?.click(),
+                  className: `flex items-center space-x-2 px-4 py-2 rounded border-2 border-dashed transition-colors ${value ? "border-green-500 bg-green-500/10 text-green-400" : "border-gray-600 bg-gray-700/50 text-gray-300 hover:border-gray-500"}`,
+                  children: [
+                    /* @__PURE__ */ jsxDEV17(Upload2, {
+                      className: "w-4 h-4"
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV17("span", {
+                      children: value ? "Change Image" : "Upload Image"
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this),
+                value && /* @__PURE__ */ jsxDEV17("div", {
+                  className: "flex items-center space-x-2",
+                  children: [
+                    /* @__PURE__ */ jsxDEV17(ImageIcon4, {
+                      className: "w-5 h-5 text-green-400"
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV17("span", {
+                      className: "text-sm text-gray-400",
+                      children: isUrl && !isDefaultValue ? "Image URL" : isDefaultValue ? "Default image" : "Image selected"
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV17("button", {
+                      type: "button",
+                      onClick: () => {
+                        const resetValue = defaultValue || "";
+                        setValues((prev) => ({ ...prev, [config.id]: resetValue }));
+                        setErrors((prev) => {
+                          const newErrors = { ...prev };
+                          delete newErrors[config.id];
+                          return newErrors;
+                        });
+                      },
+                      className: "text-red-400 hover:text-red-300 text-sm",
+                      children: isDefaultValue ? "Clear" : "Remove"
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            value && isUrl && /* @__PURE__ */ jsxDEV17("div", {
+              className: "mt-2",
+              children: /* @__PURE__ */ jsxDEV17("img", {
+                src: value,
+                alt: "Preview",
+                className: "max-w-xs max-h-32 object-contain rounded border border-gray-600",
+                onError: (e) => {
+                  setErrors((prev) => ({
+                    ...prev,
+                    [config.id]: "Failed to load image"
+                  }));
+                }
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this),
+            error && /* @__PURE__ */ jsxDEV17("p", {
+              className: "text-sm text-red-400",
+              children: error
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this);
+      }
+      case "text":
+        return /* @__PURE__ */ jsxDEV17("div", {
+          className: "space-y-2",
+          children: [
+            /* @__PURE__ */ jsxDEV17("label", {
+              className: "block text-sm font-medium text-gray-300",
+              children: [
+                config.label,
+                config.required && /* @__PURE__ */ jsxDEV17("span", {
+                  className: "text-red-400 ml-1",
+                  children: "*"
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            config.helpText && /* @__PURE__ */ jsxDEV17("p", {
+              className: "text-xs text-gray-400",
+              children: config.helpText
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV17("input", {
+              type: "text",
+              value,
+              onChange: (e) => handleTextChange(config.id, e.target.value),
+              placeholder: config.placeholder,
+              maxLength: config.maxLength,
+              className: `w-full px-3 py-2 bg-gray-700 text-white border rounded focus:outline-none focus:ring-2 focus:ring-blue-500 ${error ? "border-red-500" : "border-gray-600"}`
+            }, undefined, false, undefined, this),
+            config.maxLength && /* @__PURE__ */ jsxDEV17("p", {
+              className: "text-xs text-gray-400 text-right",
+              children: [
+                value.length,
+                " / ",
+                config.maxLength
+              ]
+            }, undefined, true, undefined, this),
+            error && /* @__PURE__ */ jsxDEV17("p", {
+              className: "text-sm text-red-400",
+              children: error
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this);
+      default:
+        return null;
+    }
+  };
+  if (!currentInput) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxDEV17("div", {
+    className: "fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4",
+    children: /* @__PURE__ */ jsxDEV17("div", {
+      className: "bg-gray-800 rounded-lg w-full max-w-2xl max-h-[90vh] overflow-hidden flex flex-col",
+      children: [
+        /* @__PURE__ */ jsxDEV17("div", {
+          className: "p-6 border-b border-gray-700 flex items-center justify-between",
+          children: [
+            /* @__PURE__ */ jsxDEV17("div", {
+              children: [
+                /* @__PURE__ */ jsxDEV17("h2", {
+                  className: "text-xl font-semibold text-white",
+                  children: "Template Input Required"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV17("p", {
+                  className: "text-sm text-gray-400 mt-1",
+                  children: [
+                    "Step ",
+                    currentStep + 1,
+                    " of ",
+                    sortedInputs.length
+                  ]
+                }, undefined, true, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV17("button", {
+              onClick: onCancel,
+              className: "text-gray-400 hover:text-white transition-colors",
+              children: /* @__PURE__ */ jsxDEV17(X, {
+                className: "w-5 h-5"
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV17("div", {
+          className: "px-6 pt-4",
+          children: /* @__PURE__ */ jsxDEV17("div", {
+            className: "w-full bg-gray-700 rounded-full h-2",
+            children: /* @__PURE__ */ jsxDEV17("div", {
+              className: "bg-blue-600 h-2 rounded-full transition-all duration-300",
+              style: {
+                width: `${(currentStep + 1) / sortedInputs.length * 100}%`
+              }
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV17("div", {
+          className: "flex-1 overflow-y-auto p-6",
+          children: /* @__PURE__ */ jsxDEV17("div", {
+            className: "space-y-4",
+            children: renderInput(currentInput)
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV17("div", {
+          className: "p-6 border-t border-gray-700 flex items-center justify-between",
+          children: [
+            /* @__PURE__ */ jsxDEV17("button", {
+              onClick: onCancel,
+              className: "px-4 py-2 bg-gray-700 text-white rounded hover:bg-gray-600 transition-colors",
+              children: "Cancel"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV17("div", {
+              className: "flex items-center space-x-3",
+              children: [
+                !isFirstStep && /* @__PURE__ */ jsxDEV17("button", {
+                  onClick: handlePrevious,
+                  className: "px-4 py-2 bg-gray-700 text-white rounded hover:bg-gray-600 transition-colors flex items-center space-x-2",
+                  children: [
+                    /* @__PURE__ */ jsxDEV17(ChevronLeft, {
+                      className: "w-4 h-4"
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV17("span", {
+                      children: "Previous"
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this),
+                !currentInput.config.required && /* @__PURE__ */ jsxDEV17("button", {
+                  onClick: handleSkip,
+                  className: "px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-500 transition-colors",
+                  children: "Skip"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV17("button", {
+                  onClick: handleNext,
+                  className: "px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors flex items-center space-x-2",
+                  children: [
+                    /* @__PURE__ */ jsxDEV17("span", {
+                      children: isLastStep ? "Complete" : "Next"
+                    }, undefined, false, undefined, this),
+                    !isLastStep && /* @__PURE__ */ jsxDEV17(ChevronRight, {
+                      className: "w-4 h-4"
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+};
+var TemplateInputModal_default = TemplateInputModal;
+
+// src/CanvasEditor.tsx
+import { jsxDEV as jsxDEV18 } from "react/jsx-dev-runtime";
+var CanvasEditor = ({
+  name,
+  config
+}) => {
+  const [design, setDesign] = useState3({
+    id: Date.now().toString(),
+    name: "Untitled Design",
+    width: 800,
+    height: 600,
+    pages: [
+      {
+        id: "1",
+        name: "Page 1",
+        elements: [],
+        background: "#ffffff"
+      }
+    ],
+    fonts: FONT_FAMILIES,
+    colors: DEFAULT_COLORS
+  });
+  const [currentPageId, setCurrentPageId] = useState3("1");
+  const [selectedId, setSelectedId] = useState3(null);
+  const [selectedIds, setSelectedIds] = useState3([]);
+  const [tool, setTool] = useState3("select");
+  const [activePanelId, setActivePanelId] = useState3("elements");
+  const [showUnsplash, setShowUnsplash] = useState3(false);
+  const [unsplashQuery, setUnsplashQuery] = useState3("");
+  const [unsplashResults, setUnsplashResults] = useState3([]);
+  const [unsplashMode, setUnsplashMode] = useState3("element");
+  const [zoom, setZoom] = useState3(1);
+  const [selectedShape, setSelectedShape] = useState3("rect");
+  const [history, setHistory] = useState3([]);
+  const [historyIndex, setHistoryIndex] = useState3(-1);
+  const [showInputModal, setShowInputModal] = useState3(false);
+  const [pendingInputs, setPendingInputs] = useState3([]);
+  const stageRef = useRef5(null);
+  const fileInputRef = useRef5(null);
+  const jsonInputRef = useRef5(null);
+  const containerRef = useRef5(null);
+  const currentPage = design.pages.find((p) => p.id === currentPageId) || design.pages[0];
+  const selectedElement = currentPage.elements.find((el) => el.id === selectedId);
+  const saveToHistory = useCallback2((newDesign) => {
+    const newHistory = history.slice(0, historyIndex + 1);
+    newHistory.push(JSON.parse(JSON.stringify(newDesign)));
+    setHistory(newHistory);
+    setHistoryIndex(newHistory.length - 1);
+  }, [history, historyIndex]);
+  const undo = useCallback2(() => {
+    if (historyIndex > 0) {
+      setHistoryIndex(historyIndex - 1);
+      setDesign(JSON.parse(JSON.stringify(history[historyIndex - 1])));
+    }
+  }, [history, historyIndex]);
+  const redo = useCallback2(() => {
+    if (historyIndex < history.length - 1) {
+      setHistoryIndex(historyIndex + 1);
+      setDesign(JSON.parse(JSON.stringify(history[historyIndex + 1])));
+    }
+  }, [history, historyIndex]);
+  const addText = useCallback2(() => {
+    const newElement = {
+      id: Date.now().toString(),
+      type: "text",
+      name: "Text",
+      x: design.width / 2 - 50,
+      y: design.height / 2 - 20,
+      rotation: 0,
+      visible: true,
+      locked: false,
+      opacity: 1,
+      text: "Click to edit text",
+      fontSize: 24,
+      fontFamily: "Arial",
+      fill: "#000000",
+      align: "left",
+      lineHeight: 1.2,
+      letterSpacing: 0,
+      textCase: "none",
+      strikethrough: false
+    };
+    setDesign((prev) => {
+      const newDesign = {
+        ...prev,
+        pages: prev.pages.map((page) => page.id === currentPageId ? { ...page, elements: [...page.elements, newElement] } : page)
+      };
+      saveToHistory(newDesign);
+      return newDesign;
+    });
+    setSelectedId(newElement.id);
+    setTool("select");
+  }, [currentPageId, saveToHistory, design.width, design.height]);
+  const addShape = useCallback2((shapeType) => {
+    const newElement = {
+      id: Date.now().toString(),
+      type: "shape",
+      name: shapeType.charAt(0).toUpperCase() + shapeType.slice(1),
+      x: design.width / 2 - 50,
+      y: design.height / 2 - 50,
+      width: 100,
+      height: 100,
+      rotation: 0,
+      visible: true,
+      locked: false,
+      opacity: 1,
+      fill: "#4299e1",
+      stroke: "#000000",
+      strokeWidth: 0,
+      shapeType,
+      sides: shapeType === "polygon" ? 6 : undefined,
+      innerRadius: shapeType === "star" ? 40 : undefined,
+      outerRadius: shapeType === "star" ? 70 : undefined
+    };
+    setDesign((prev) => {
+      const newDesign = {
+        ...prev,
+        pages: prev.pages.map((page) => page.id === currentPageId ? { ...page, elements: [...page.elements, newElement] } : page)
+      };
+      saveToHistory(newDesign);
+      return newDesign;
+    });
+    setSelectedId(newElement.id);
+  }, [currentPageId, saveToHistory, design.width, design.height]);
+  const handleStageClick = useCallback2((e) => {
+    const clickedOnEmpty = e.target === e.target.getStage();
+    if (clickedOnEmpty) {
+      setSelectedId(null);
+      setSelectedIds([]);
+    }
+  }, []);
+  const updateElement = useCallback2((id, attrs) => {
+    setDesign((prev) => ({
+      ...prev,
+      pages: prev.pages.map((page) => ({
+        ...page,
+        elements: page.elements.map((el) => el.id === id ? { ...el, ...attrs } : el)
+      }))
+    }));
+  }, []);
+  const deleteSelected = useCallback2(() => {
+    if (selectedId || selectedIds.length > 0) {
+      const idsToDelete = selectedIds.length > 0 ? selectedIds : [selectedId];
+      setDesign((prev) => ({
+        ...prev,
+        pages: prev.pages.map((page) => ({
+          ...page,
+          elements: page.elements.filter((el) => !idsToDelete.includes(el.id))
+        }))
+      }));
+      setSelectedId(null);
+      setSelectedIds([]);
+      saveToHistory(design);
+    }
+  }, [selectedId, selectedIds, saveToHistory, design]);
+  const duplicateSelected = useCallback2(() => {
+    if (selectedElement) {
+      const newElement = {
+        ...selectedElement,
+        id: Date.now().toString(),
+        name: selectedElement.name + " copy",
+        x: selectedElement.x + 20,
+        y: selectedElement.y + 20
+      };
+      setDesign((prev) => {
+        const newDesign = {
+          ...prev,
+          pages: prev.pages.map((page) => page.id === currentPageId ? { ...page, elements: [...page.elements, newElement] } : page)
+        };
+        saveToHistory(newDesign);
+        return newDesign;
+      });
+      setSelectedId(newElement.id);
+    }
+  }, [selectedElement, currentPageId, saveToHistory]);
+  const moveElementUp = useCallback2((id) => {
+    setDesign((prev) => ({
+      ...prev,
+      pages: prev.pages.map((page) => {
+        if (page.id === currentPageId) {
+          const index = page.elements.findIndex((el) => el.id === id);
+          if (index < page.elements.length - 1) {
+            const newElements = [...page.elements];
+            [newElements[index], newElements[index + 1]] = [
+              newElements[index + 1],
+              newElements[index]
+            ];
+            return { ...page, elements: newElements };
+          }
+        }
+        return page;
+      })
+    }));
+  }, [currentPageId]);
+  const moveElementDown = useCallback2((id) => {
+    setDesign((prev) => ({
+      ...prev,
+      pages: prev.pages.map((page) => {
+        if (page.id === currentPageId) {
+          const index = page.elements.findIndex((el) => el.id === id);
+          if (index > 0) {
+            const newElements = [...page.elements];
+            [newElements[index], newElements[index - 1]] = [
+              newElements[index - 1],
+              newElements[index]
+            ];
+            return { ...page, elements: newElements };
+          }
+        }
+        return page;
+      })
+    }));
+  }, [currentPageId]);
+  const addPage = useCallback2(() => {
+    const newPage = {
+      id: Date.now().toString(),
+      name: `Page ${design.pages.length + 1}`,
+      elements: [],
+      background: "#ffffff",
+      backgroundImageObject: undefined
+    };
+    setDesign((prev) => ({
+      ...prev,
+      pages: [...prev.pages, newPage]
+    }));
+    setCurrentPageId(newPage.id);
+  }, [design.pages.length]);
+  const deletePage = useCallback2((pageId) => {
+    if (design.pages.length > 1) {
+      setDesign((prev) => ({
+        ...prev,
+        pages: prev.pages.filter((p) => p.id !== pageId)
+      }));
+      if (currentPageId === pageId) {
+        setCurrentPageId(design.pages[0].id);
+      }
+    }
+  }, [design.pages, currentPageId]);
+  const handleImageUpload = useCallback2((e) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      const reader = new FileReader;
+      reader.onload = (event) => {
+        const img = new window.Image;
+        img.src = event.target?.result;
+        img.onload = () => {
+          const newElement = {
+            id: Date.now().toString(),
+            type: "image",
+            name: file.name,
+            x: 100,
+            y: 100,
+            width: img.naturalWidth,
+            height: img.naturalHeight,
+            rotation: 0,
+            visible: true,
+            locked: false,
+            opacity: 1,
+            src: event.target?.result,
+            cropX: 0,
+            cropY: 0,
+            cropWidth: img.naturalWidth,
+            cropHeight: img.naturalHeight,
+            mask: undefined
+          };
+          setDesign((prev) => ({
+            ...prev,
+            pages: prev.pages.map((page) => page.id === currentPageId ? { ...page, elements: [...page.elements, newElement] } : page)
+          }));
+          saveToHistory(design);
+        };
+      };
+      reader.readAsDataURL(file);
+    }
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  }, [currentPageId, saveToHistory]);
+  const searchUnsplash = useCallback2(async () => {
+    if (!unsplashQuery)
+      return;
+    const unsplashKey = getUnsplashAccessKey();
+    if (!unsplashKey || unsplashKey === "YOUR_UNSPLASH_ACCESS_KEY_HERE") {
+      console.warn("Unsplash API key is not configured. Please use setUnsplashAccessKey() or set UNSPLASH_ACCESS_KEY environment variable");
+      const mockResults = Array(9).fill(null).map((_, i) => ({
+        id: `unsplash-mock-${i}`,
+        urls: {
+          regular: `https://source.unsplash.com/400x300/?${unsplashQuery}&sig=${i}`,
+          thumb: `https://source.unsplash.com/200x150/?${unsplashQuery}&sig=${i}`
+        },
+        user: { name: "Mock User" }
+      }));
+      setUnsplashResults(mockResults);
+      return;
+    }
+    try {
+      const response = await fetch(`https://api.unsplash.com/search/photos?query=${encodeURIComponent(unsplashQuery)}&per_page=9`, {
+        headers: {
+          Authorization: `Client-ID ${getUnsplashAccessKey() || ""}`
+        }
+      });
+      if (!response.ok) {
+        console.error("Failed to fetch from Unsplash:", response.statusText);
+        setUnsplashResults([]);
+        return;
+      }
+      const data = await response.json();
+      setUnsplashResults(data.results.map((img) => ({
+        id: img.id,
+        urls: { regular: img.urls.regular, thumb: img.urls.thumb },
+        user: { name: img.user.name }
+      })));
+    } catch (error) {
+      console.error("Error searching Unsplash:", error);
+      setUnsplashResults([]);
+    }
+  }, [unsplashQuery]);
+  const addUnsplashImage = useCallback2((imageUrl) => {
+    if (unsplashMode === "element") {
+      const img = new window.Image;
+      img.crossOrigin = "anonymous";
+      img.src = imageUrl;
+      img.onload = () => {
+        const newElement = {
+          id: Date.now().toString(),
+          type: "image",
+          name: "Unsplash Image",
+          x: 100,
+          y: 100,
+          width: img.naturalWidth,
+          height: img.naturalHeight,
+          rotation: 0,
+          visible: true,
+          locked: false,
+          opacity: 1,
+          src: imageUrl,
+          cropX: 0,
+          cropY: 0,
+          cropWidth: img.naturalWidth,
+          cropHeight: img.naturalHeight,
+          mask: undefined
+        };
+        setDesign((prev) => ({
+          ...prev,
+          pages: prev.pages.map((page) => page.id === currentPageId ? { ...page, elements: [...page.elements, newElement] } : page)
+        }));
+        saveToHistory(design);
+      };
+    } else if (unsplashMode === "background") {
+      const bgImg = new window.Image;
+      bgImg.crossOrigin = "anonymous";
+      bgImg.src = imageUrl;
+      bgImg.onload = () => {
+        setDesign((prev) => ({
+          ...prev,
+          pages: prev.pages.map((p) => p.id === currentPageId ? {
+            ...p,
+            background: `url(${imageUrl})`,
+            backgroundImageObject: bgImg
+          } : p)
+        }));
+        saveToHistory(design);
+      };
+    }
+    setShowUnsplash(false);
+    setUnsplashQuery("");
+    setUnsplashResults([]);
+    setUnsplashMode("element");
+  }, [currentPageId, saveToHistory, unsplashMode]);
+  const handleImportJSON = (event) => {
+    importFromJSON(event, (newDesign) => {
+      if (newDesign && newDesign.pages && newDesign.pages.length > 0) {
+        setDesign(newDesign);
+        setSelectedId(null);
+        setSelectedIds([]);
+        const firstPageId = newDesign.pages[0]?.id;
+        setCurrentPageId(firstPageId || "1");
+        saveToHistory(newDesign);
+      } else {
+        alert("Invalid design structure in JSON file. Could not load.");
+      }
+    }, (errorMessage) => {
+      alert(`Error importing JSON: ${errorMessage}`);
+    }, (inputs, onComplete) => {
+      setPendingInputs(inputs);
+      setShowInputModal(true);
+      window.__pendingImportComplete = onComplete;
+    });
+    if (jsonInputRef.current) {
+      jsonInputRef.current.value = "";
+    }
+  };
+  const handleInputModalComplete = (values) => {
+    setShowInputModal(false);
+    const onComplete = window.__pendingImportComplete;
+    if (onComplete) {
+      onComplete(values);
+      delete window.__pendingImportComplete;
+    }
+    setPendingInputs([]);
+  };
+  const handleInputModalCancel = () => {
+    setShowInputModal(false);
+    setPendingInputs([]);
+    delete window.__pendingImportComplete;
+  };
+  const panelConfigs = [
+    {
+      id: "elements",
+      title: "Elements",
+      component: ElementPanel_default,
+      props: { onAddShape: addShape }
+    },
+    {
+      id: "text",
+      title: "Text",
+      component: TextPanel_default,
+      props: {
+        selectedElement,
+        updateElement,
+        setTool,
+        onAddText: addText
+      }
+    },
+    {
+      id: "image",
+      title: "Images",
+      component: ImagePanel_default,
+      props: {
+        selectedElement,
+        updateElement,
+        onUploadClick: () => fileInputRef.current?.click(),
+        onUnsplashClick: () => {
+          setShowUnsplash(true);
+          setUnsplashMode("element");
+        },
+        canvasWidth: design.width,
+        canvasHeight: design.height
+      }
+    },
+    {
+      id: "design",
+      title: "Design",
+      component: DesignPanel_default,
+      props: {
+        design,
+        currentPage,
+        selectedElement,
+        setDesign,
+        updateElement,
+        onSetUnsplashBackground: () => {
+          setShowUnsplash(true);
+          setUnsplashMode("background");
+        },
+        config
+      }
+    },
+    {
+      id: "background",
+      title: "Background",
+      component: BackgroundPanel_default,
+      props: {
+        design,
+        currentPage,
+        setDesign,
+        onSetUnsplashBackground: () => {
+          setShowUnsplash(true);
+          setUnsplashMode("background");
+        }
+      }
+    },
+    ...config?.variables ? [
+      {
+        id: "variables",
+        title: "Variables",
+        component: VariablesPanel_default,
+        props: {
+          config,
+          design,
+          setDesign
+        }
+      }
+    ] : [],
+    ...config?.export ? [
+      {
+        id: "export",
+        title: "Export",
+        component: ExportPanel_default,
+        props: {
+          onExportToPNG: config.export?.png ? () => {
+            if (stageRef.current)
+              exportToPNG(stageRef.current, design);
+          } : undefined,
+          onExportToJPG: config.export?.jpg ? () => {
+            if (stageRef.current)
+              exportToJPG(stageRef.current, design);
+          } : undefined,
+          onExportToJSON: config.export?.json ? () => exportToJSON(design) : undefined,
+          onImportJSON: () => jsonInputRef.current?.click()
+        }
+      }
+    ] : []
+  ];
+  const DynamicPanelRenderer = () => {
+    const activePanelConfig = panelConfigs.find((p) => p.id === activePanelId);
+    if (!activePanelConfig) {
+      return /* @__PURE__ */ jsxDEV18("div", {
+        className: "text-white",
+        children: "Panel not found"
+      }, undefined, false, undefined, this);
+    }
+    const PanelComponent = activePanelConfig.component;
+    return /* @__PURE__ */ jsxDEV18(PanelComponent, {
+      ...activePanelConfig.props
+    }, undefined, false, undefined, this);
+  };
+  useEffect4(() => {
+    const handleKeyDown = (e) => {
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)
+        return;
+      if (e.metaKey || e.ctrlKey) {
+        switch (e.key) {
+          case "z":
+            if (e.shiftKey) {
+              redo();
+            } else {
+              undo();
+            }
+            e.preventDefault();
+            break;
+          case "c":
+            break;
+          case "v":
+            break;
+          case "d":
+            duplicateSelected();
+            e.preventDefault();
+            break;
+          case "s":
+            exportToJSON(design);
+            e.preventDefault();
+            break;
+        }
+      } else {
+        switch (e.key) {
+          case "Delete":
+          case "Backspace":
+            deleteSelected();
+            break;
+          case "Escape":
+            setSelectedId(null);
+            setSelectedIds([]);
+            break;
+        }
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [deleteSelected, duplicateSelected, exportToJSON, undo, redo]);
+  useEffect4(() => {
+    if (history.length === 0) {
+      setHistory([JSON.parse(JSON.stringify(design))]);
+      setHistoryIndex(0);
+    }
+  }, []);
+  return /* @__PURE__ */ jsxDEV18("div", {
+    className: "h-screen flex flex-col bg-gray-900",
+    children: [
+      /* @__PURE__ */ jsxDEV18(Header_default, {
+        name,
+        zoom,
+        historyIndex,
+        historyLength: history.length,
+        onUndo: undo,
+        onRedo: redo,
+        onZoomIn: () => setZoom(Math.min(3, zoom + 0.1)),
+        onZoomOut: () => setZoom(Math.max(0.1, zoom - 0.1)),
+        onZoomReset: () => setZoom(1),
+        onSetActivePanel: setActivePanelId
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV18("div", {
+        className: "flex-1 flex overflow-hidden",
+        children: [
+          /* @__PURE__ */ jsxDEV18("div", {
+            className: "w-80 bg-gray-800 border-r border-gray-700 flex",
+            children: [
+              /* @__PURE__ */ jsxDEV18(LeftMenu_default, {
+                tool,
+                activePanel: activePanelId,
+                onSetTool: setTool,
+                onSetActivePanel: setActivePanelId,
+                config
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV18("div", {
+                className: "flex-1 p-4 overflow-y-auto",
+                children: /* @__PURE__ */ jsxDEV18(DynamicPanelRenderer, {}, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV18("div", {
+            className: "flex-1 bg-gray-700 overflow-hidden relative",
+            ref: containerRef,
+            children: [
+              /* @__PURE__ */ jsxDEV18("div", {
+                className: "absolute inset-0 flex items-center justify-center",
+                children: /* @__PURE__ */ jsxDEV18("div", {
+                  className: "bg-white shadow-2xl",
+                  style: {
+                    transform: `scale(${zoom})`,
+                    transformOrigin: "center center"
+                  },
+                  children: /* @__PURE__ */ jsxDEV18(Stage, {
+                    ref: stageRef,
+                    width: design.width,
+                    height: design.height,
+                    onClick: handleStageClick,
+                    onTap: handleStageClick,
+                    children: /* @__PURE__ */ jsxDEV18(Layer, {
+                      children: [
+                        /* @__PURE__ */ jsxDEV18(Rect2, {
+                          x: 0,
+                          y: 0,
+                          width: design.width,
+                          height: design.height,
+                          fill: currentPage.backgroundImageObject ? undefined : currentPage.background,
+                          fillPatternImage: currentPage.backgroundImageObject,
+                          fillPatternRepeat: "no-repeat"
+                        }, undefined, false, undefined, this),
+                        currentPage.elements.map((element) => {
+                          switch (element.type) {
+                            case "text":
+                              return /* @__PURE__ */ jsxDEV18(EditableTextElement, {
+                                element,
+                                isSelected: element.id === selectedId,
+                                onSelect: () => {
+                                  setSelectedId(element.id);
+                                  setSelectedIds([]);
+                                },
+                                onChange: (attrs) => updateElement(element.id, attrs)
+                              }, element.id, false, undefined, this);
+                            case "image":
+                              return /* @__PURE__ */ jsxDEV18(UrlImageElement, {
+                                element,
+                                isSelected: element.id === selectedId,
+                                onSelect: () => {
+                                  setSelectedId(element.id);
+                                  setSelectedIds([]);
+                                },
+                                onChange: (attrs) => updateElement(element.id, attrs)
+                              }, element.id, false, undefined, this);
+                            case "shape":
+                              return /* @__PURE__ */ jsxDEV18(ShapeElement, {
+                                element,
+                                isSelected: element.id === selectedId,
+                                onSelect: () => {
+                                  setSelectedId(element.id);
+                                  setSelectedIds([]);
+                                },
+                                onChange: (attrs) => updateElement(element.id, attrs)
+                              }, element.id, false, undefined, this);
+                            default:
+                              return null;
+                          }
+                        })
+                      ]
+                    }, undefined, true, undefined, this)
+                  }, undefined, false, undefined, this)
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this),
+              config?.multiPage && /* @__PURE__ */ jsxDEV18("div", {
+                className: "absolute bottom-4 left-4 flex items-center space-x-2",
+                children: [
+                  design.pages.map((page, index) => /* @__PURE__ */ jsxDEV18("button", {
+                    onClick: () => setCurrentPageId(page.id),
+                    className: `px-3 py-1 rounded text-sm ${page.id === currentPageId ? "bg-blue-600 text-white" : "bg-gray-800 text-gray-300 hover:bg-gray-700"}`,
+                    children: [
+                      "Page ",
+                      index + 1
+                    ]
+                  }, page.id, true, undefined, this)),
+                  /* @__PURE__ */ jsxDEV18("button", {
+                    onClick: addPage,
+                    className: "p-1 bg-gray-800 text-gray-300 rounded hover:bg-gray-700",
+                    title: "Add Page",
+                    children: /* @__PURE__ */ jsxDEV18(PlusCircle, {
+                      className: "w-4 h-4"
+                    }, undefined, false, undefined, this)
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV18(RightSidebar_default, {
+            currentPageElements: currentPage.elements,
+            selectedElement,
+            selectedId,
+            onSelectElement: setSelectedId,
+            onUpdateElement: updateElement,
+            onDuplicateSelected: duplicateSelected,
+            onMoveElementUp: moveElementUp,
+            onMoveElementDown: moveElementDown,
+            onDeleteSelected: deleteSelected
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV18("input", {
+        ref: fileInputRef,
+        type: "file",
+        accept: "image/*",
+        onChange: handleImageUpload,
+        className: "hidden",
+        multiple: true
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV18("input", {
+        ref: jsonInputRef,
+        type: "file",
+        accept: ".json",
+        onChange: handleImportJSON,
+        className: "hidden"
+      }, undefined, false, undefined, this),
+      showInputModal && /* @__PURE__ */ jsxDEV18(TemplateInputModal_default, {
+        inputs: pendingInputs,
+        onComplete: handleInputModalComplete,
+        onCancel: handleInputModalCancel
+      }, undefined, false, undefined, this),
+      showUnsplash && /* @__PURE__ */ jsxDEV18("div", {
+        className: "fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-8",
+        children: /* @__PURE__ */ jsxDEV18("div", {
+          className: "bg-gray-800 rounded-lg w-full max-w-4xl max-h-full overflow-hidden flex flex-col",
+          children: [
+            /* @__PURE__ */ jsxDEV18("div", {
+              className: "p-6 border-b border-gray-700",
+              children: [
+                /* @__PURE__ */ jsxDEV18("h3", {
+                  className: "text-xl font-semibold text-white mb-4",
+                  children: "Search Unsplash"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV18("div", {
+                  className: "flex space-x-4",
+                  children: [
+                    /* @__PURE__ */ jsxDEV18("input", {
+                      type: "text",
+                      value: unsplashQuery,
+                      onChange: (e) => setUnsplashQuery(e.target.value),
+                      onKeyDown: (e) => e.key === "Enter" && searchUnsplash(),
+                      placeholder: "Search for images...",
+                      className: "flex-1 bg-gray-700 text-white border border-gray-600 rounded px-4 py-2 focus:border-blue-500 focus:outline-none",
+                      autoFocus: true
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV18("button", {
+                      onClick: searchUnsplash,
+                      className: "px-6 py-2 bg-blue-600 text-white rounded hover:bg-blue-700",
+                      children: "Search"
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV18("button", {
+                      onClick: () => {
+                        setShowUnsplash(false);
+                        setUnsplashQuery("");
+                        setUnsplashResults([]);
+                      },
+                      className: "px-6 py-2 bg-gray-700 text-white rounded hover:bg-gray-600",
+                      children: "Cancel"
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV18("div", {
+              className: "flex-1 overflow-y-auto p-6",
+              children: unsplashResults.length > 0 ? /* @__PURE__ */ jsxDEV18("div", {
+                className: "grid grid-cols-3 gap-4",
+                children: unsplashResults.map((result) => /* @__PURE__ */ jsxDEV18("button", {
+                  onClick: () => addUnsplashImage(result.urls.regular),
+                  className: "relative group overflow-hidden rounded-lg aspect-square",
+                  children: [
+                    /* @__PURE__ */ jsxDEV18("img", {
+                      src: result.urls.thumb,
+                      alt: "",
+                      className: "w-full h-full object-cover group-hover:scale-110 transition-transform duration-200"
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV18("div", {
+                      className: "absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200 flex items-center justify-center",
+                      children: /* @__PURE__ */ jsxDEV18(PlusCircle, {
+                        className: "w-8 h-8 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+                      }, undefined, false, undefined, this)
+                    }, undefined, false, undefined, this)
+                  ]
+                }, result.id, true, undefined, this))
+              }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV18("div", {
+                className: "text-center text-gray-400 py-12",
+                children: "Enter a search term to find images"
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+var CanvasEditor_default = CanvasEditor;
+export {
+  setUnsplashAccessKey,
+  replaceUserInputs,
+  importFromJSON,
+  getUnsplashAccessKey,
+  findRequiredInputs,
+  exportToPNG,
+  exportToJSON,
+  exportToJPG,
+  convertTemplateToCanvasDesign,
+  UrlImageElement,
+  ShapeElement,
+  FONT_FAMILIES,
+  EditableTextElement,
+  DEFAULT_COLORS,
+  CanvasEditor_default as CanvasEditor,
+  CANVAS_PRESETS
+};