zuljaman-banner-components 1.0.6 → 1.0.8

package/dist/components/BannerVisor.js

@@ -13,43 +13,157 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const clsx_1 = __importDefault(require("clsx"));
 const constants_1 = require("../constants");
-// Import style components (will be created next)
-const BannerStyle1_1 = require("./Style1/BannerStyle1");
-const BannerStyle2_1 = require("./Style2/BannerStyle2");
+const styleConfig_1 = require("../styleConfig");
+// Import generic renderer
+const BannerRenderer_1 = require("./BannerRenderer");
 const NoImageComponent = () => {
     return ((0, jsx_runtime_1.jsx)("div", { className: "w-full grow flex items-center justify-center text-neutral-500", children: (0, jsx_runtime_1.jsx)("p", { children: "No image selected" }) }));
 };
-const BannerVisor = ({ bannerStyle = 1, // Default to style 1 if undefined
-backgroundImageUrl, copy1, copy2, bannerSubstyle, logoUrl, postType, sizeMultiplier: externalSizeMultiplier, ImageComponent, }) => {
+const BannerVisor = ({ backgroundImageUrl, copies, copy1, copy2, bannerStyle = 1, bannerSubstyle, bannerSubSubstyle: _bannerSubSubstyle, logoUrl, postType, sizeMultiplier: externalSizeMultiplier, fontSizeMultiplier = 1.0, copy1FontSizeMultiplier, copy2FontSizeMultiplier, logoSizeMultiplier = 1.0, overlayIntensityMultiplier = 1.0, shadowIntensityMultiplier = 1.0, ImageComponent, logoTranslateX = 0, logoTranslateY = 0, copy1TranslateX = 0, copy1TranslateY = 0, copy2TranslateX = 0, copy2TranslateY = 0, draggableMode = false, onLogoPositionChange, onCopyPositionChange, onCopy1PositionChange, onCopy2PositionChange, onLogoRotationChange, onCopyRotationChange, onCopy1RotationChange, onCopy2RotationChange, logoRotation = 0, copy1Rotation = 0, copy2Rotation = 0, logoWidth, copy1Width, copy2Width, onLogoWidthChange, onCopyWidthChange, onCopy1WidthChange, onCopy2WidthChange, copy1Align = 'left', copy2Align = 'center', copy1FontWeight = 'normal', copy2FontWeight = 'normal', textShadowEnabled, textShadowSize, textShadowIntensity, logoShadowEnabled, logoShadowSize, logoShadowIntensity, noiseEnabled, noiseIntensity, fontFamily, }) => {
+    var _a;
     const [internalSizeMultiplier, setInternalSizeMultiplier] = (0, react_1.useState)(1);
     const containerRef = (0, react_1.useRef)(null);
+    // Get style configuration for centralized settings
+    const styleConfig = (0, styleConfig_1.getStyleConfig)(bannerStyle);
     // Use external size multiplier if provided, otherwise use internal
     const sizeMultiplier = externalSizeMultiplier !== null && externalSizeMultiplier !== void 0 ? externalSizeMultiplier : internalSizeMultiplier;
-    const bannerContentProps = {
+    // Use individual font size multipliers if provided, otherwise fall back to fontSizeMultiplier
+    const effectiveCopy1FontSize = copy1FontSizeMultiplier !== null && copy1FontSizeMultiplier !== void 0 ? copy1FontSizeMultiplier : fontSizeMultiplier;
+    const effectiveCopy2FontSize = copy2FontSizeMultiplier !== null && copy2FontSizeMultiplier !== void 0 ? copy2FontSizeMultiplier : fontSizeMultiplier;
+    // Use noiseEnabled from styleConfig if not provided as prop (centralized configuration)
+    const effectiveNoiseEnabled = (_a = noiseEnabled !== null && noiseEnabled !== void 0 ? noiseEnabled : styleConfig.noiseEnabled) !== null && _a !== void 0 ? _a : true;
+    // Convert legacy props to copies array for backward compatibility
+    const effectiveCopies = (0, react_1.useMemo)(() => {
+        if (copies && copies.length > 0) {
+            // Use new copies array
+            return copies;
+        }
+        // Convert legacy props to copies array
+        const legacyCopies = [];
+        if (copy1) {
+            legacyCopies.push({
+                id: `legacy-copy1-${Date.now()}`,
+                styleSlot: 0, // Legacy copy1 gets styleSlot 0
+                text: copy1,
+                fontSize: effectiveCopy1FontSize,
+                align: copy1Align,
+                fontWeight: copy1FontWeight,
+                translateX: copy1TranslateX,
+                translateY: copy1TranslateY,
+                rotation: copy1Rotation,
+                width: copy1Width,
+            });
+        }
+        if (copy2) {
+            legacyCopies.push({
+                id: `legacy-copy2-${Date.now()}`,
+                styleSlot: 1, // Legacy copy2 gets styleSlot 1
+                text: copy2,
+                fontSize: effectiveCopy2FontSize,
+                align: copy2Align,
+                fontWeight: copy2FontWeight,
+                translateX: copy2TranslateX,
+                translateY: copy2TranslateY,
+                rotation: copy2Rotation,
+                width: copy2Width,
+            });
+        }
+        return legacyCopies;
+    }, [
+        copies,
         copy1,
         copy2,
+        effectiveCopy1FontSize,
+        effectiveCopy2FontSize,
+        copy1Align,
+        copy2Align,
+        copy1FontWeight,
+        copy2FontWeight,
+        copy1TranslateX,
+        copy1TranslateY,
+        copy2TranslateX,
+        copy2TranslateY,
+        copy1Rotation,
+        copy2Rotation,
+        copy1Width,
+        copy2Width,
+    ]);
+    // Wrapper functions for legacy callbacks
+    const handleCopyPositionChange = (copyIndex, position) => {
+        if (onCopyPositionChange) {
+            onCopyPositionChange(copyIndex, position);
+        }
+        // Also call legacy callbacks for backward compatibility
+        if (copyIndex === 0 && onCopy1PositionChange) {
+            onCopy1PositionChange(position);
+        }
+        if (copyIndex === 1 && onCopy2PositionChange) {
+            onCopy2PositionChange(position);
+        }
+    };
+    const handleCopyRotationChange = (copyIndex, rotation) => {
+        if (onCopyRotationChange) {
+            onCopyRotationChange(copyIndex, rotation);
+        }
+        // Also call legacy callbacks for backward compatibility
+        if (copyIndex === 0 && onCopy1RotationChange) {
+            onCopy1RotationChange(rotation);
+        }
+        if (copyIndex === 1 && onCopy2RotationChange) {
+            onCopy2RotationChange(rotation);
+        }
+    };
+    const handleCopyWidthChange = (copyIndex, width) => {
+        if (onCopyWidthChange) {
+            onCopyWidthChange(copyIndex, width);
+        }
+        // Also call legacy callbacks for backward compatibility
+        if (copyIndex === 0 && onCopy1WidthChange) {
+            onCopy1WidthChange(width);
+        }
+        if (copyIndex === 1 && onCopy2WidthChange) {
+            onCopy2WidthChange(width);
+        }
+    };
+    const bannerContentProps = {
+        copies: effectiveCopies,
         bannerSubstyle,
         logoUrl,
         backgroundImageUrl,
         sizeMultiplier,
+        logoSizeMultiplier,
+        overlayIntensityMultiplier,
+        shadowIntensityMultiplier,
         postType,
         ImageComponent,
+        logoTranslateX,
+        logoTranslateY,
+        draggableMode,
+        onLogoPositionChange,
+        onCopyPositionChange: handleCopyPositionChange,
+        onCopyRotationChange: handleCopyRotationChange,
+        onCopyWidthChange: handleCopyWidthChange,
+        logoRotation,
+        logoWidth,
+        onLogoRotationChange,
+        onLogoWidthChange,
+        textShadowEnabled,
+        textShadowSize,
+        textShadowIntensity,
+        logoShadowEnabled,
+        logoShadowSize,
+        logoShadowIntensity,
+        noiseEnabled: effectiveNoiseEnabled,
+        noiseIntensity,
+        fontFamily,
     };
-    const hasBannerContent = copy1 || copy2 || logoUrl;
+    const hasBannerContent = effectiveCopies.length > 0 || logoUrl;
     const renderBannerStyle = () => {
         if (!hasBannerContent)
             return null;
-        // Determine the style ID, defaulting to 1 if null or invalid
-        const effectiveBannerStyle = bannerStyle === null ? 1 : bannerStyle;
-        switch (effectiveBannerStyle) {
-            case 1:
-                return (0, jsx_runtime_1.jsx)(BannerStyle1_1.BannerStyle1, { ...bannerContentProps });
-            case 2:
-                return (0, jsx_runtime_1.jsx)(BannerStyle2_1.BannerStyle2, { ...bannerContentProps });
-            default:
-                // Default to BannerStyle1
-                return (0, jsx_runtime_1.jsx)(BannerStyle1_1.BannerStyle1, { ...bannerContentProps });
-        }
+        // Render the generic BannerRenderer with bannerStyle prop
+        // bannerSubstyle determines which substyle (0 for logo only, 1-3 for different layouts)
+        return (0, jsx_runtime_1.jsx)(BannerRenderer_1.BannerRenderer, { ...bannerContentProps, bannerStyle: bannerStyle });
     };
     (0, react_1.useEffect)(() => {
         // Only use internal size calculation if no external multiplier is provided

package/dist/components/index.d.ts

@@ -2,6 +2,5 @@
  * Banner components exports
  */
 export * from './BannerVisor';
-export * from './Style1/BannerStyle1';
-export * from './Style2/BannerStyle2';
+export * from './BannerRenderer';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC"}

package/dist/components/index.js

@@ -18,5 +18,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./BannerVisor"), exports);
-__exportStar(require("./Style1/BannerStyle1"), exports);
-__exportStar(require("./Style2/BannerStyle2"), exports);
+__exportStar(require("./BannerRenderer"), exports);
+// Note: BannerRenderer is a generic component that handles all banner styles
+// Use bannerStyle prop (1, 2, 3, etc.) to select the style
+// Use bannerSubstyle prop (0 for logo only, 1, 2, or 3) to select the substyle

package/dist/components/shared/DraggableElement.d.ts

@@ -0,0 +1,31 @@
+/**
+ * DraggableElement - Reusable component for draggable/rotatable/resizable elements
+ * Used across all banner styles to provide consistent interaction behavior
+ */
+import React from "react";
+export interface DraggableElementProps {
+    enabled: boolean;
+    position: {
+        x: number;
+        y: number;
+    };
+    rotation: number;
+    width?: number;
+    scale: number;
+    elementId: string;
+    isSelected: boolean;
+    onPositionChange?: (pos: {
+        x: number;
+        y: number;
+    }) => void;
+    onRotationChange?: (rotation: number) => void;
+    onWidthChange?: (width: number) => void;
+    onSelect: (id: string) => void;
+    onDeselect: () => void;
+    onRotationSnap?: (angle: number) => number;
+    onDragMove?: (elementId: string, bounds: DOMRect) => void;
+    centerOrigin?: boolean;
+    children: React.ReactNode;
+}
+export declare const DraggableElement: React.FC<DraggableElementProps>;
+//# sourceMappingURL=DraggableElement.d.ts.map

package/dist/components/shared/DraggableElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraggableElement.d.ts","sourceRoot":"","sources":["../../../src/components/shared/DraggableElement.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IAGpB,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3D,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,UAAU,EAAE,MAAM,IAAI,CAAC;IAGvB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAG1D,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAqhB5D,CAAC"}

package/dist/components/shared/DraggableElement.js

@@ -0,0 +1,398 @@
+"use strict";
+/**
+ * DraggableElement - Reusable component for draggable/rotatable/resizable elements
+ * Used across all banner styles to provide consistent interaction behavior
+ */
+"use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DraggableElement = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const DraggableElement = ({ enabled, position, rotation, width, scale, elementId, isSelected, onPositionChange, onRotationChange, onWidthChange, onSelect, onDeselect, onRotationSnap, onDragMove, centerOrigin = false, children, }) => {
+    const [isDragging, setIsDragging] = react_1.default.useState(false);
+    const [isRotating, setIsRotating] = react_1.default.useState(false);
+    const [isResizing, setIsResizing] = react_1.default.useState(false);
+    const [resizeSide, setResizeSide] = react_1.default.useState(null);
+    const [currentPosition, setCurrentPosition] = react_1.default.useState(position);
+    const elementRef = react_1.default.useRef(null);
+    const rotatingContentRef = react_1.default.useRef(null);
+    const contentOnlyRef = react_1.default.useRef(null);
+    const blueHandleRef = react_1.default.useRef(null);
+    const purpleIndicatorRef = react_1.default.useRef(null);
+    const startAngleRef = react_1.default.useRef(0);
+    const currentRotationRef = react_1.default.useRef(rotation);
+    const hasDraggedRef = react_1.default.useRef(false);
+    const startWidthRef = react_1.default.useRef(0);
+    const startMouseXRef = react_1.default.useRef(0);
+    const startMouseYRef = react_1.default.useRef(0);
+    const startPositionRef = react_1.default.useRef({ x: 0, y: 0 });
+    const mouseDownPosRef = react_1.default.useRef(null);
+    const justSelectedRef = react_1.default.useRef(false);
+    const justStoppedWithoutDragRef = react_1.default.useRef(false);
+    const dragStartPosRef = react_1.default.useRef({ x: 0, y: 0 });
+    react_1.default.useEffect(() => {
+        currentRotationRef.current = rotation;
+    }, [rotation]);
+    react_1.default.useEffect(() => {
+        setCurrentPosition(position);
+    }, [position]);
+    if (!enabled) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+    }
+    // Rotation handlers
+    const handleRotationStart = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!contentOnlyRef.current)
+            return;
+        // Use contentOnlyRef to get the actual content center, not the bounding box with handles
+        const rect = contentOnlyRef.current.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        const angle = Math.atan2(e.clientY - centerY, e.clientX - centerX) * (180 / Math.PI);
+        startAngleRef.current = angle - currentRotationRef.current;
+        setIsRotating(true);
+    };
+    const handleRotationMove = (e) => {
+        if (!isRotating || !contentOnlyRef.current)
+            return;
+        // Use contentOnlyRef for consistent center calculation regardless of rotation
+        const rect = contentOnlyRef.current.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        const angle = Math.atan2(e.clientY - centerY, e.clientX - centerX) * (180 / Math.PI);
+        let newRotation = angle - startAngleRef.current;
+        // Apply snap callback if provided
+        if (onRotationSnap) {
+            newRotation = onRotationSnap(newRotation);
+        }
+        onRotationChange === null || onRotationChange === void 0 ? void 0 : onRotationChange(Math.round(newRotation));
+    };
+    const handleRotationEnd = () => {
+        setIsRotating(false);
+        hasDraggedRef.current = true;
+    };
+    react_1.default.useEffect(() => {
+        if (isRotating) {
+            window.addEventListener('mousemove', handleRotationMove);
+            window.addEventListener('mouseup', handleRotationEnd);
+            return () => {
+                window.removeEventListener('mousemove', handleRotationMove);
+                window.removeEventListener('mouseup', handleRotationEnd);
+            };
+        }
+    }, [isRotating]);
+    // Width resize handlers
+    const handleResizeStart = (e, side) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!contentOnlyRef.current)
+            return;
+        const currentWidth = contentOnlyRef.current.offsetWidth;
+        startWidthRef.current = currentWidth;
+        startMouseXRef.current = e.clientX;
+        startMouseYRef.current = e.clientY;
+        startPositionRef.current = { x: position.x, y: position.y };
+        setResizeSide(side);
+        setIsResizing(true);
+    };
+    const handleResizeMove = (e) => {
+        if (!isResizing || !resizeSide)
+            return;
+        // Calculate mouse delta in viewport coordinates
+        const mouseDeltaX = e.clientX - startMouseXRef.current;
+        const mouseDeltaY = e.clientY - startMouseYRef.current;
+        // Convert rotation to radians
+        const rotationRad = (currentRotationRef.current * Math.PI) / 180;
+        // Project mouse movement onto the element's rotated X-axis
+        // This gives us the actual width change in the element's coordinate system
+        const deltaXRotated = mouseDeltaX * Math.cos(rotationRad) + mouseDeltaY * Math.sin(rotationRad);
+        let newWidth = startWidthRef.current;
+        if (resizeSide === 'right') {
+            // Dragging right handle: increase width (left side stays fixed)
+            newWidth = startWidthRef.current + deltaXRotated;
+        }
+        else {
+            // Dragging left handle: decrease width (right side should stay fixed)
+            newWidth = startWidthRef.current - deltaXRotated;
+        }
+        // Apply minimum width constraint
+        const minWidth = 100;
+        newWidth = Math.max(minWidth, newWidth);
+        // Adjust position to compensate for rotation effects
+        // Both handles experience the same center shift when width changes
+        // The rotation happens around the center, so when width changes by ΔW,
+        // the center shifts by ΔW/2 in element coordinates
+        // We need to move position in the opposite direction to keep visual position stable
+        const widthDiff = newWidth - startWidthRef.current;
+        const centerShift = widthDiff / 2;
+        // Convert center shift to viewport coordinates using rotation
+        // In element coords: width change shifts center along X-axis
+        // At rotation θ, element's X-axis points at angle θ in viewport
+        const offsetXRotated = centerShift * Math.cos(rotationRad);
+        const offsetYRotated = centerShift * Math.sin(rotationRad);
+        // Subtract offset to compensate (move position opposite to center shift)
+        const newX = startPositionRef.current.x - offsetXRotated;
+        const newY = startPositionRef.current.y - offsetYRotated;
+        onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange({ x: newX, y: newY });
+        onWidthChange === null || onWidthChange === void 0 ? void 0 : onWidthChange(Math.round(newWidth));
+    };
+    const handleResizeEnd = () => {
+        setIsResizing(false);
+        setResizeSide(null);
+        hasDraggedRef.current = true;
+    };
+    react_1.default.useEffect(() => {
+        if (isResizing) {
+            window.addEventListener('mousemove', handleResizeMove);
+            window.addEventListener('mouseup', handleResizeEnd);
+            return () => {
+                window.removeEventListener('mousemove', handleResizeMove);
+                window.removeEventListener('mouseup', handleResizeEnd);
+            };
+        }
+    }, [isResizing, resizeSide]);
+    // Drag handlers
+    const handleDragStart = (e) => {
+        const target = e.target;
+        if (target.closest('.rotation-handle') || target.closest('.width-handle')) {
+            return;
+        }
+        // Auto-select element when starting to drag
+        if (!isSelected) {
+            onSelect(elementId);
+        }
+        hasDraggedRef.current = false;
+        dragStartPosRef.current = { x: e.clientX, y: e.clientY };
+        startPositionRef.current = { x: currentPosition.x, y: currentPosition.y };
+        setIsDragging(true);
+    };
+    const handleDragMove = (e) => {
+        if (!isDragging)
+            return;
+        hasDraggedRef.current = true;
+        const deltaX = (e.clientX - dragStartPosRef.current.x) / scale;
+        const deltaY = (e.clientY - dragStartPosRef.current.y) / scale;
+        const newPosition = {
+            x: startPositionRef.current.x + deltaX,
+            y: startPositionRef.current.y + deltaY,
+        };
+        setCurrentPosition(newPosition);
+        if (contentOnlyRef.current && onDragMove) {
+            const elementBounds = contentOnlyRef.current.getBoundingClientRect();
+            onDragMove(elementId, elementBounds);
+        }
+    };
+    const handleDragEnd = () => {
+        // If we didn't actually drag, set flag to prevent onClick from toggling
+        if (!hasDraggedRef.current) {
+            justStoppedWithoutDragRef.current = true;
+        }
+        setIsDragging(false);
+        onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange(currentPosition);
+        // Auto-capture width if not explicitly set
+        if (width === undefined && contentOnlyRef.current && onWidthChange) {
+            const currentWidth = contentOnlyRef.current.offsetWidth;
+            if (currentWidth > 0) {
+                onWidthChange(Math.round(currentWidth));
+            }
+        }
+    };
+    react_1.default.useEffect(() => {
+        if (isDragging) {
+            window.addEventListener('mousemove', handleDragMove);
+            window.addEventListener('mouseup', handleDragEnd);
+            return () => {
+                window.removeEventListener('mousemove', handleDragMove);
+                window.removeEventListener('mouseup', handleDragEnd);
+            };
+        }
+    }, [isDragging, currentPosition, scale]);
+    // Selection handlers
+    const handleElementClick = (e) => {
+        // Don't toggle selection if clicking rotation or width handles
+        const target = e.target;
+        if (target.closest('.rotation-handle') || target.closest('.width-handle')) {
+            return;
+        }
+        // If we just finished dragging, don't toggle
+        if (hasDraggedRef.current) {
+            hasDraggedRef.current = false;
+            return;
+        }
+        // If we just stopped without dragging (click), don't toggle
+        if (justStoppedWithoutDragRef.current) {
+            justStoppedWithoutDragRef.current = false;
+            return;
+        }
+        // If we just selected via mouseUp, don't toggle
+        if (justSelectedRef.current) {
+            justSelectedRef.current = false;
+            return;
+        }
+        e.stopPropagation();
+        // Toggle selection
+        if (isSelected) {
+            onDeselect();
+        }
+        else {
+            onSelect(elementId);
+        }
+    };
+    // Listen for clicks outside to deselect
+    react_1.default.useEffect(() => {
+        if (!isSelected)
+            return;
+        const handleClickOutside = (e) => {
+            if (elementRef.current && !elementRef.current.contains(e.target)) {
+                onDeselect();
+            }
+        };
+        document.addEventListener('click', handleClickOutside);
+        return () => {
+            document.removeEventListener('click', handleClickOutside);
+        };
+    }, [isSelected, onDeselect]);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: elementRef, onClick: handleElementClick, onMouseDown: (e) => {
+            // Track mouse down position for click detection
+            const target = e.target;
+            if (target.closest('.rotation-handle') || target.closest('.width-handle')) {
+                mouseDownPosRef.current = null;
+                return;
+            }
+            mouseDownPosRef.current = { x: e.clientX, y: e.clientY };
+            handleDragStart(e);
+        }, onMouseUp: (e) => {
+            // Detect click (mouse up at same position as mouse down)
+            const target = e.target;
+            if (target.closest('.rotation-handle') || target.closest('.width-handle')) {
+                return;
+            }
+            if (mouseDownPosRef.current) {
+                const deltaX = Math.abs(e.clientX - mouseDownPosRef.current.x);
+                const deltaY = Math.abs(e.clientY - mouseDownPosRef.current.y);
+                // If mouse hasn't moved much (less than 5px), treat as click
+                if (deltaX < 5 && deltaY < 5) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (!isSelected) {
+                        onSelect(elementId);
+                    }
+                    else {
+                        // Toggle off if already selected
+                        onDeselect();
+                    }
+                    justSelectedRef.current = true; // Mark that we just selected
+                }
+                mouseDownPosRef.current = null;
+            }
+        }, style: {
+            cursor: isDragging ? "move" : "grab",
+            opacity: isDragging || isRotating || isResizing ? 0.8 : 1,
+            transition: isDragging || isRotating || isResizing ? "none" : "opacity 0.2s ease",
+            display: "inline-block",
+            position: "relative",
+            transform: `translate(${currentPosition.x}px, ${currentPosition.y}px)`,
+        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                transform: centerOrigin ? 'translate(-50%, -50%)' : undefined,
+                position: "relative"
+            }, children: [(isDragging || isRotating || isResizing) && ((0, jsx_runtime_1.jsx)("div", { style: {
+                        position: "absolute",
+                        inset: "-8px",
+                        border: "2px dashed rgba(59, 130, 246, 0.5)",
+                        zIndex: 0,
+                        pointerEvents: "none",
+                    } })), (0, jsx_runtime_1.jsxs)("div", { ref: rotatingContentRef, style: { transform: `rotate(${rotation}deg)`, position: "relative", display: "inline-block" }, children: [isSelected && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                position: "absolute",
+                                inset: 0,
+                                border: "4px dotted rgba(59, 130, 246, 1)",
+                                zIndex: 1,
+                                pointerEvents: "none",
+                            } })), onRotationChange && isSelected && ((0, jsx_runtime_1.jsx)("div", { ref: blueHandleRef, className: "rotation-handle", onMouseDown: handleRotationStart, style: {
+                                position: "absolute",
+                                top: "-16px",
+                                right: "-16px",
+                                width: "32px",
+                                height: "32px",
+                                borderRadius: "50%",
+                                backgroundColor: "rgba(59, 130, 246, 0.9)",
+                                border: "2px solid white",
+                                cursor: "grab",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                fontSize: "16px",
+                                lineHeight: "1",
+                                color: "white",
+                                zIndex: 1000,
+                                boxShadow: "0 2px 4px rgba(0,0,0,0.2)",
+                                transform: `rotate(${-rotation}deg)`,
+                                transformOrigin: "center center",
+                            }, title: "Drag to rotate", children: "\u21BB" })), onRotationChange && isSelected && ((0, jsx_runtime_1.jsx)("div", { ref: purpleIndicatorRef, style: {
+                                position: "absolute",
+                                top: "-16px",
+                                right: "-16px",
+                                width: "32px",
+                                height: "32px",
+                                borderRadius: "50%",
+                                backgroundColor: "rgba(139, 92, 246, 0.9)",
+                                border: "2px solid white",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                fontSize: "16px",
+                                lineHeight: "1",
+                                color: "white",
+                                zIndex: 999,
+                                boxShadow: "0 2px 4px rgba(0,0,0,0.2)",
+                                pointerEvents: "none",
+                            }, title: "Rotation indicator", children: "\u21BB" })), isSelected && ((0, jsx_runtime_1.jsx)("div", { className: "width-handle width-handle-left", onMouseDown: (e) => handleResizeStart(e, 'left'), style: {
+                                position: "absolute",
+                                left: "-16px",
+                                top: "50%",
+                                transform: `translateY(-50%) rotate(${-rotation}deg)`,
+                                transformOrigin: "center center",
+                                width: "32px",
+                                height: "32px",
+                                borderRadius: "50%",
+                                backgroundColor: "rgba(16, 185, 129, 0.9)",
+                                border: "2px solid white",
+                                cursor: "ew-resize",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                fontSize: "16px",
+                                lineHeight: "1",
+                                color: "white",
+                                zIndex: 1000,
+                                boxShadow: "0 2px 4px rgba(0,0,0,0.2)",
+                            }, title: "Drag to resize width", children: "\u27F7" })), isSelected && ((0, jsx_runtime_1.jsx)("div", { className: "width-handle width-handle-right", onMouseDown: (e) => handleResizeStart(e, 'right'), style: {
+                                position: "absolute",
+                                right: "-16px",
+                                top: "50%",
+                                transform: `translateY(-50%) rotate(${-rotation}deg)`,
+                                transformOrigin: "center center",
+                                width: "32px",
+                                height: "32px",
+                                borderRadius: "50%",
+                                backgroundColor: "rgba(16, 185, 129, 0.9)",
+                                border: "2px solid white",
+                                cursor: "ew-resize",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                fontSize: "16px",
+                                lineHeight: "1",
+                                color: "white",
+                                zIndex: 1000,
+                                boxShadow: "0 2px 4px rgba(0,0,0,0.2)",
+                            }, title: "Drag to resize width", children: "\u27F7" })), (0, jsx_runtime_1.jsx)("div", { ref: contentOnlyRef, style: {
+                                position: "relative",
+                                zIndex: 1,
+                                width: width ? `${width}px` : undefined,
+                            }, children: children })] })] }) }));
+};
+exports.DraggableElement = DraggableElement;

package/dist/components/shared/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Shared components barrel export
+ * Reusable components used across all banner styles
+ */
+export { DraggableElement } from './DraggableElement';
+export type { DraggableElementProps } from './DraggableElement';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/shared/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/shared/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/shared/index.js

@@ -0,0 +1,9 @@
+"use strict";
+/**
+ * Shared components barrel export
+ * Reusable components used across all banner styles
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DraggableElement = void 0;
+var DraggableElement_1 = require("./DraggableElement");
+Object.defineProperty(exports, "DraggableElement", { enumerable: true, get: function () { return DraggableElement_1.DraggableElement; } });