zuljaman-banner-components 1.0.23 → 1.0.25

package/dist/components/BannerRenderer.js

@@ -1,559 +0,0 @@
-"use strict";
-/**
- * BannerRenderer component - Generic platform-agnostic banner renderer
- * Unified component that handles all banner styles based on configuration
- */
-"use client";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BannerRenderer = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const clsx_1 = __importDefault(require("clsx"));
-const shadowUtils_1 = require("../styles/shadowUtils");
-const shared_1 = require("./shared");
-const styleConfig_1 = require("../styleConfig");
-const defaults_1 = require("../constants/defaults");
-const substyleConfig_1 = require("./styles/Style1/substyleConfig");
-const substyleConfig_2 = require("./styles/Style2/substyleConfig");
-const substyleConfig_3 = require("./styles/Style3/substyleConfig");
-const substyleConfig_4 = require("./styles/Style4/substyleConfig");
-const positioningUtils_1 = require("./styles/utils/positioningUtils");
-const BannerRenderer = ({ bannerStyle, copies = [], bannerSubstyle = 1, logoUrl, sizeMultiplier = 1.0, logoSizeMultiplier = 1.0, overlayIntensityMultiplier: _overlayIntensityMultiplier = 1.0, shadowIntensityMultiplier = 1.0, backgroundImageUrl, postType, ImageComponent, logoTranslateX = 0, logoTranslateY = 0, draggableMode = false, onLogoPositionChange, logoRotation = 0, onLogoRotationChange, logoWidth, onLogoWidthChange, onCopyPositionChange, onCopyRotationChange, onCopyWidthChange, textShadowEnabled, textShadowSize, textShadowIntensity, logoShadowEnabled, logoShadowSize, logoShadowIntensity, noiseEnabled, noiseIntensity = 1.0, fontFamily, }) => {
-    const [selectedElement, setSelectedElement] = (0, react_1.useState)(null);
-    // Auto-positioning state and refs
-    const [autoOffsets, setAutoOffsets] = (0, react_1.useState)({});
-    const [recalcTrigger, setRecalcTrigger] = (0, react_1.useState)(0);
-    const logoRef = (0, react_1.useRef)(null);
-    const copyRefs = (0, react_1.useRef)([]);
-    const bannerContainerRef = (0, react_1.useRef)(null);
-    // Live drag position for guide lines
-    const [liveDragPosition, setLiveDragPosition] = (0, react_1.useState)(null);
-    // Track if currently dragging
-    const [isDragging, setIsDragging] = (0, react_1.useState)(false);
-    // Get substyle configuration based on bannerStyle
-    const config = (0, react_1.useMemo)(() => {
-        switch (bannerStyle) {
-            case 2:
-                return (0, substyleConfig_2.getSubstyleConfig)(bannerSubstyle);
-            case 3:
-                return (0, substyleConfig_3.getSubstyleConfig)(bannerSubstyle);
-            case 4:
-                return (0, substyleConfig_4.getSubstyleConfig)(bannerSubstyle);
-            case 1:
-            default:
-                return (0, substyleConfig_1.getSubstyleConfig)(bannerSubstyle);
-        }
-    }, [bannerStyle, bannerSubstyle]);
-    // Get style configuration
-    const styleConfig = (0, styleConfig_1.getStyleConfig)(bannerStyle);
-    // Y-axis multiplier for STORY format (to spread elements vertically)
-    const yMultiplier = postType === "STORY" ? 1.42 : 1.0; // 1920/1350 ≈ 1.42
-    // Trigger auto-positioning recalculation when style or substyle changes
-    react_1.default.useEffect(() => {
-        setRecalcTrigger(prev => prev + 1);
-    }, [bannerStyle, bannerSubstyle]);
-    // Calculate font sizes for copies based on their styleSlot and fontSize multiplier
-    const fontSizes = (0, react_1.useMemo)(() => {
-        const baseSizeRem = defaults_1.DEFAULT_BASE_FONT_SIZE_REM;
-        return {
-            fontSize_01: `${baseSizeRem * (config.fontSize.copy1 || 1.0)}rem`,
-            fontSize_02: `${baseSizeRem * (config.fontSize.copy2 || 0.65)}rem`,
-        };
-    }, [config.fontSize]);
-    // Convert font weight string to CSS value
-    const getFontWeight = (weight) => {
-        switch (weight) {
-            case 'thin': return '300';
-            case 'normal': return '400';
-            case 'bold': return '700';
-            default: return '400';
-        }
-    };
-    // Reset auto-offsets when config changes (e.g., when changing substyle)
-    (0, react_1.useEffect)(() => {
-        setAutoOffsets({});
-    }, [config]);
-    // Auto-positioning calculation
-    (0, react_1.useLayoutEffect)(() => {
-        // Only calculate if auto-positioning is enabled
-        if (!config.autoPositioning || !config.autoPositioningConfig) {
-            return;
-        }
-        const { anchorElement, targetElement } = config.autoPositioningConfig;
-        // Get anchor copy object to check if it's been dragged
-        let anchorCopy;
-        if (anchorElement === 'copy1') {
-            anchorCopy = copies.find(c => c.styleSlot === 0);
-        }
-        else if (anchorElement === 'copy2') {
-            anchorCopy = copies.find(c => c.styleSlot === 1);
-        }
-        // Get target copy object to check if it's been dragged
-        let targetCopy;
-        if (targetElement === 'copy1') {
-            targetCopy = copies.find(c => c.styleSlot === 0);
-        }
-        else if (targetElement === 'copy2') {
-            targetCopy = copies.find(c => c.styleSlot === 1);
-        }
-        // Check if anchor has been manually dragged
-        const anchorHasBeenDragged = anchorCopy && ((anchorCopy.translateX !== undefined && anchorCopy.translateX !== 0) ||
-            (anchorCopy.translateY !== undefined && anchorCopy.translateY !== 0));
-        // Check if target has been manually dragged
-        const targetHasBeenDragged = targetCopy && ((targetCopy.translateX !== undefined && targetCopy.translateX !== 0) ||
-            (targetCopy.translateY !== undefined && targetCopy.translateY !== 0));
-        // Skip auto-positioning if either anchor or target has been manually positioned
-        if (anchorHasBeenDragged || targetHasBeenDragged) {
-            return;
-        }
-        // Get anchor element ref
-        let anchorRef = null;
-        if (anchorElement === 'logo') {
-            anchorRef = logoRef.current;
-        }
-        else if (anchorElement === 'copy1') {
-            // Find copy with styleSlot 0 (copy1)
-            const copy1Index = copies.findIndex(c => c.styleSlot === 0);
-            if (copy1Index !== -1) {
-                anchorRef = copyRefs.current[copy1Index];
-            }
-        }
-        else if (anchorElement === 'copy2') {
-            // Find copy with styleSlot 1 (copy2)
-            const copy2Index = copies.findIndex(c => c.styleSlot === 1);
-            if (copy2Index !== -1) {
-                anchorRef = copyRefs.current[copy2Index];
-            }
-        }
-        // If anchor element doesn't exist, can't calculate
-        if (!anchorRef) {
-            return;
-        }
-        // Get target element ref
-        let targetRef = null;
-        if (targetElement === 'copy1') {
-            const copy1Index = copies.findIndex(c => c.styleSlot === 0);
-            if (copy1Index !== -1) {
-                targetRef = copyRefs.current[copy1Index];
-            }
-        }
-        else if (targetElement === 'copy2') {
-            const copy2Index = copies.findIndex(c => c.styleSlot === 1);
-            if (copy2Index !== -1) {
-                targetRef = copyRefs.current[copy2Index];
-            }
-        }
-        // If target element doesn't exist, can't calculate
-        if (!targetRef) {
-            return;
-        }
-        // Measure anchor and target heights
-        const anchorHeight = anchorRef.getBoundingClientRect().height / sizeMultiplier;
-        const targetHeight = targetRef.getBoundingClientRect().height / sizeMultiplier;
-        // Determine if anchor has centerOrigin (logo doesn't, copies do)
-        const anchorHasCenterOrigin = anchorElement !== 'logo';
-        // Calculate offset
-        const offset = (0, positioningUtils_1.calculateAutoPositionOffset)(config, config.autoPositioningConfig, anchorHeight, targetHeight, anchorHasCenterOrigin);
-        // Find target styleSlot
-        let targetStyleSlot;
-        if (targetElement === 'copy1') {
-            targetStyleSlot = 0;
-        }
-        else if (targetElement === 'copy2') {
-            targetStyleSlot = 1;
-        }
-        // Update offsets only if changed
-        if (targetStyleSlot !== undefined) {
-            setAutoOffsets(prev => {
-                // Only update if offset has changed significantly (to prevent infinite loops from floating point precision)
-                const prevOffset = prev[targetStyleSlot] || 0;
-                const EPSILON = 0.1; // 0.1px tolerance
-                if (Math.abs(prevOffset - offset) > EPSILON) {
-                    const newOffsets = {
-                        ...prev,
-                        [targetStyleSlot]: offset,
-                    };
-                    return newOffsets;
-                }
-                return prev; // No significant change, return same object to prevent re-render
-            });
-        }
-    }, [config, recalcTrigger, copies]); // Recalculate on style/substyle change and when copy text changes (if not dragged)
-    // Rotation snap function - snaps to 0°, 90°, 180°, 270°
-    const handleRotationSnap = react_1.default.useCallback((angle) => {
-        const snapAngles = [0, 90, 180, 270, -90, -180, -270];
-        const snapThreshold = 3; // degrees
-        // Normalize angle to -180 to 180 range
-        let normalized = angle % 360;
-        if (normalized > 180)
-            normalized -= 360;
-        if (normalized < -180)
-            normalized += 360;
-        // Check if close to any snap angle
-        for (const snapAngle of snapAngles) {
-            if (Math.abs(normalized - snapAngle) < snapThreshold) {
-                return snapAngle;
-            }
-        }
-        return normalized;
-    }, []);
-    // Shadow calculations using style configuration
-    const { shadowStyle, logoShadowStyle } = (0, react_1.useMemo)(() => {
-        var _a, _b;
-        // Get shadow defaults from style config (or use fallback values)
-        const textShadowConfig = ((_a = styleConfig.shadows) === null || _a === void 0 ? void 0 : _a.textShadow) || {
-            enabled: true,
-            size: 70,
-            intensity: 0.85,
-            direction: 'bottom',
-        };
-        const logoShadowConfig = ((_b = styleConfig.shadows) === null || _b === void 0 ? void 0 : _b.logoShadow) || {
-            enabled: true,
-            size: 150,
-            intensity: 0.375,
-            direction: 'top-left',
-        };
-        // Use prop overrides if provided, otherwise use config values
-        const effectiveTextShadowEnabled = textShadowEnabled !== null && textShadowEnabled !== void 0 ? textShadowEnabled : textShadowConfig.enabled;
-        const effectiveTextShadowSize = textShadowSize !== null && textShadowSize !== void 0 ? textShadowSize : textShadowConfig.size;
-        const effectiveTextShadowIntensity = textShadowIntensity !== null && textShadowIntensity !== void 0 ? textShadowIntensity : textShadowConfig.intensity;
-        const effectiveLogoShadowEnabled = logoShadowEnabled !== null && logoShadowEnabled !== void 0 ? logoShadowEnabled : logoShadowConfig.enabled;
-        const effectiveLogoShadowSize = logoShadowSize !== null && logoShadowSize !== void 0 ? logoShadowSize : logoShadowConfig.size;
-        const effectiveLogoShadowIntensity = logoShadowIntensity !== null && logoShadowIntensity !== void 0 ? logoShadowIntensity : logoShadowConfig.intensity;
-        // Generate shadow styles only if enabled
-        const shadowStyle = effectiveTextShadowEnabled
-            ? (0, shadowUtils_1.createAbstractShadowStyle)({
-                direction: textShadowConfig.direction,
-                size: `${effectiveTextShadowSize}%`,
-                intensity: effectiveTextShadowIntensity * shadowIntensityMultiplier,
-            })
-            : {};
-        const logoShadowStyle = effectiveLogoShadowEnabled
-            ? (0, shadowUtils_1.createAbstractShadowStyle)({
-                direction: logoShadowConfig.direction,
-                size: `${effectiveLogoShadowSize}%`,
-                intensity: effectiveLogoShadowIntensity * shadowIntensityMultiplier,
-            })
-            : {};
-        return { shadowStyle, logoShadowStyle };
-    }, [
-        styleConfig.shadows,
-        textShadowEnabled,
-        textShadowSize,
-        textShadowIntensity,
-        logoShadowEnabled,
-        logoShadowSize,
-        logoShadowIntensity,
-        shadowIntensityMultiplier,
-    ]);
-    // Shared logo component
-    const logoComponent = ((0, jsx_runtime_1.jsx)(shared_1.DraggableElement, { enabled: draggableMode, position: { x: logoTranslateX, y: logoTranslateY }, rotation: logoRotation, width: logoWidth, scale: sizeMultiplier, elementId: "logo", isSelected: selectedElement === "logo", onPositionChange: (pos) => {
-            // Clear dragging state when drag ends
-            setIsDragging(false);
-            setLiveDragPosition(null);
-            onLogoPositionChange === null || onLogoPositionChange === void 0 ? void 0 : onLogoPositionChange(pos);
-        }, onRotationChange: onLogoRotationChange, onWidthChange: onLogoWidthChange, onSelect: (id) => setSelectedElement(id), onDeselect: () => {
-            setSelectedElement(null);
-            setLiveDragPosition(null);
-            setIsDragging(false);
-        }, onRotationSnap: handleRotationSnap, onDragMove: (elementId, bounds) => {
-            // Set dragging state to true
-            setIsDragging(true);
-            // Calculate live position from element bounds
-            if (!bannerContainerRef.current)
-                return;
-            const bannerBounds = bannerContainerRef.current.getBoundingClientRect();
-            const elementCenterX = bounds.left + bounds.width / 2;
-            const elementCenterY = bounds.top + bounds.height / 2;
-            // Banner center in viewport coordinates
-            const bannerCenterX = bannerBounds.left + bannerBounds.width / 2;
-            const bannerCenterY = bannerBounds.top + bannerBounds.height / 2;
-            // Calculate offset from banner center (in scaled pixels)
-            const offsetX = (elementCenterX - bannerCenterX) / sizeMultiplier;
-            const offsetY = (elementCenterY - bannerCenterY) / sizeMultiplier;
-            // Store the live position
-            setLiveDragPosition({
-                elementId,
-                x: offsetX,
-                y: offsetY,
-            });
-        }, children: (0, jsx_runtime_1.jsx)("div", { ref: logoRef, className: "relative", style: {
-                width: logoWidth ? `${logoWidth}px` : `${defaults_1.DEFAULT_LOGO_SIZE_REM * logoSizeMultiplier}rem`,
-                height: logoWidth ? `${logoWidth}px` : `${defaults_1.DEFAULT_LOGO_SIZE_REM * logoSizeMultiplier}rem`,
-                // Remove transform - DraggableElement already handles positioning
-            }, children: logoUrl && ((0, jsx_runtime_1.jsx)(ImageComponent, { src: logoUrl, alt: "Logo", width: 256, height: 256, className: "object-contain absolute inset-0 w-full h-full", style: { objectFit: "contain", pointerEvents: "none" } })) }) }));
-    // Function to render a copy component by styleSlot
-    // Function to render a copy component with absolute positioning
-    const renderCopyComponent = (copy) => {
-        var _a, _b, _c, _d;
-        // Use styleSlot to determine config (0 = copy1, 1 = copy2)
-        const styleSlot = copy.styleSlot !== undefined ? copy.styleSlot : 0;
-        // Determine if this is a styled copy (copy1 or copy2) vs overflow copy
-        const isStyled = styleSlot === 0 || styleSlot === 1;
-        // Get copy config, with fallback for styles that don't have copy2
-        const copyConfig = styleSlot === 0
-            ? config.copy1
-            : ('copy2' in config ? config.copy2 : config.copy1);
-        // Get config position and width
-        const configX = (_a = copyConfig === null || copyConfig === void 0 ? void 0 : copyConfig.x) !== null && _a !== void 0 ? _a : 0;
-        const configY = (_b = copyConfig === null || copyConfig === void 0 ? void 0 : copyConfig.y) !== null && _b !== void 0 ? _b : 0;
-        const configWidth = copyConfig === null || copyConfig === void 0 ? void 0 : copyConfig.width;
-        const autoOffset = autoOffsets[styleSlot] || 0;
-        // Get the font size multiplier from copy config (used for both font size and padding scaling)
-        const copyFontSizeMultiplier = copy.fontSize || 1.0;
-        // Calculate font size
-        // copy.fontSize is now an absolute multiplier, not relative to config
-        // Config fontSize values only set the initial copy.fontSize value
-        const effectiveFontSize = `${defaults_1.DEFAULT_BASE_FONT_SIZE_REM * copyFontSizeMultiplier}rem`;
-        // Get alignment - always prioritize copy's own align property
-        const effectiveAlign = copy.align || (isStyled && copyConfig ? copyConfig.alignment : 'center');
-        // Get font weight - use copy's fontWeight, then config default, then fallback
-        const effectiveFontWeight = copy.fontWeight || (isStyled ? (styleSlot === 0 ? (styleConfig.copy1FontWeight || 'bold') : (styleConfig.copy2FontWeight || 'normal')) : 'normal');
-        // Get font family - prioritize copy's own fontFamily, then global override, then style config
-        const effectiveCopyFontFamily = copy.fontFamily || fontFamily || styleConfig.fontFamily;
-        // Get color properties - prioritize copy's own properties, then substyle config, then defaults
-        const effectiveColor = copy.color || (isStyled && copyConfig ? copyConfig.color : undefined) || 'white';
-        const effectiveBgColor = copy.bgColor || (isStyled && copyConfig ? copyConfig.bgColor : undefined);
-        const effectiveHasBg = copy.hasBg !== undefined ? copy.hasBg : (isStyled && copyConfig ? copyConfig.hasBg : false);
-        // Get padding and scale it proportionally with font size to maintain visual consistency
-        const basePaddingX = copy.paddingX || (isStyled && copyConfig ? copyConfig.paddingX : undefined);
-        const basePaddingY = copy.paddingY || (isStyled && copyConfig ? copyConfig.paddingY : undefined);
-        const effectivePaddingX = basePaddingX
-            ? `${parseFloat(basePaddingX.replace('rem', '')) * copyFontSizeMultiplier}rem`
-            : undefined;
-        const effectivePaddingY = basePaddingY
-            ? `${parseFloat(basePaddingY.replace('rem', '')) * copyFontSizeMultiplier}rem`
-            : undefined;
-        const effectiveBorderRadius = copy.borderRadius || (isStyled && copyConfig ? copyConfig.borderRadius : undefined);
-        // Apply text decoration styles
-        const textDecorationStyles = [];
-        if (copy.underline)
-            textDecorationStyles.push('underline');
-        const textDecoration = textDecorationStyles.length > 0 ? textDecorationStyles.join(' ') : 'none';
-        // Apply font style
-        const fontStyle = copy.italic ? 'italic' : 'normal';
-        // Apply additional bold if textBold is true (combines with fontWeight)
-        const finalFontWeight = copy.textBold
-            ? 'bold'
-            : getFontWeight(effectiveFontWeight);
-        // Text element
-        const textElement = ((0, jsx_runtime_1.jsx)("p", { style: {
-                fontSize: effectiveFontSize,
-                fontWeight: finalFontWeight,
-                fontFamily: effectiveCopyFontFamily,
-                color: effectiveColor,
-                textDecoration,
-                fontStyle,
-            }, className: (0, clsx_1.default)("whitespace-pre-wrap", `text-${effectiveAlign}`), children: copy.text }));
-        // Wrap with background if needed
-        const contentElement = effectiveHasBg ? ((0, jsx_runtime_1.jsx)("div", { style: {
-                backgroundColor: effectiveBgColor,
-                paddingLeft: effectivePaddingX,
-                paddingRight: effectivePaddingX,
-                paddingTop: effectivePaddingY,
-                paddingBottom: effectivePaddingY,
-                borderRadius: effectiveBorderRadius,
-                display: 'inline-block',
-            }, children: textElement })) : textElement;
-        // Calculate final position: config position + auto-offset + user adjustment
-        const baseX = isStyled ? configX : 0;
-        const baseY = isStyled ? (configY * yMultiplier + autoOffset) : 0;
-        const finalX = baseX + (copy.translateX || 0);
-        const finalY = baseY + (copy.translateY || 0);
-        const finalWidth = copy.width || configWidth;
-        const finalRotation = (_c = copy.rotation) !== null && _c !== void 0 ? _c : (isStyled ? ((_d = copyConfig === null || copyConfig === void 0 ? void 0 : copyConfig.rotation) !== null && _d !== void 0 ? _d : 0) : 0);
-        return ((0, jsx_runtime_1.jsx)(shared_1.DraggableElement, { enabled: draggableMode, position: { x: finalX, y: finalY }, rotation: finalRotation, width: finalWidth, scale: sizeMultiplier, elementId: `copy-${copy.id}`, isSelected: selectedElement === `copy-${copy.id}`, centerOrigin: true, onPositionChange: (pos) => {
-                // Clear live drag position and dragging state when drag ends
-                setLiveDragPosition(null);
-                setIsDragging(false);
-                // Subtract base position to get only user adjustment
-                const adjustedPos = {
-                    x: pos.x - baseX,
-                    y: pos.y - baseY,
-                };
-                // Find index of this copy in the copies array to call the callback
-                const copyIndex = copies.findIndex(c => c.id === copy.id);
-                if (copyIndex !== -1) {
-                    onCopyPositionChange === null || onCopyPositionChange === void 0 ? void 0 : onCopyPositionChange(copyIndex, adjustedPos);
-                }
-            }, onRotationChange: (rot) => {
-                const copyIndex = copies.findIndex(c => c.id === copy.id);
-                if (copyIndex !== -1) {
-                    onCopyRotationChange === null || onCopyRotationChange === void 0 ? void 0 : onCopyRotationChange(copyIndex, rot);
-                }
-            }, onWidthChange: (w) => {
-                const copyIndex = copies.findIndex(c => c.id === copy.id);
-                if (copyIndex !== -1) {
-                    onCopyWidthChange === null || onCopyWidthChange === void 0 ? void 0 : onCopyWidthChange(copyIndex, w);
-                }
-            }, onSelect: (id) => setSelectedElement(id), onDeselect: () => {
-                setSelectedElement(null);
-                setLiveDragPosition(null);
-            }, onRotationSnap: handleRotationSnap, onDragMove: (elementId, bounds) => {
-                // Set dragging state to true
-                setIsDragging(true);
-                // Calculate live position from element bounds
-                if (!bannerContainerRef.current)
-                    return;
-                const bannerBounds = bannerContainerRef.current.getBoundingClientRect();
-                const elementCenterX = bounds.left + bounds.width / 2;
-                const elementCenterY = bounds.top + bounds.height / 2;
-                // Banner center in viewport coordinates
-                const bannerCenterX = bannerBounds.left + bannerBounds.width / 2;
-                const bannerCenterY = bannerBounds.top + bannerBounds.height / 2;
-                // Calculate offset from banner center (in scaled pixels)
-                const offsetX = (elementCenterX - bannerCenterX) / sizeMultiplier;
-                const offsetY = (elementCenterY - bannerCenterY) / sizeMultiplier;
-                // Store the live position
-                setLiveDragPosition({
-                    elementId,
-                    x: offsetX,
-                    y: offsetY,
-                });
-            }, children: (0, jsx_runtime_1.jsx)("div", { ref: (el) => {
-                    // Store ref by styleSlot for auto-positioning
-                    if (styleSlot === 0)
-                        copyRefs.current[0] = el;
-                    else if (styleSlot === 1)
-                        copyRefs.current[1] = el;
-                }, style: {
-                    // Remove transform - DraggableElement already handles positioning and rotation
-                    width: '100%',
-                    // Hide copy if hidden property is true
-                    display: copy.hidden ? 'none' : undefined,
-                }, children: contentElement }) }, copy.id));
-    };
-    return ((0, jsx_runtime_1.jsx)("div", { className: "w-full h-full text-white leading-[1.05]", children: (0, jsx_runtime_1.jsxs)("div", { ref: bannerContainerRef, className: (0, clsx_1.default)("inset-0 flex flex-col items-start h-full relative isolate overflow-hidden gap-4 px-20", postType === "STORY" ? "pb-32 pt-44" : "py-20"), children: [backgroundImageUrl && ((0, jsx_runtime_1.jsx)(ImageComponent, { src: backgroundImageUrl, alt: "Background", width: 1080, height: postType === "STORY" ? 1920 : 1350, className: "object-cover absolute inset-0 w-full h-full -z-10", style: { objectFit: "cover", pointerEvents: "none" } })), noiseEnabled && ((0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 pointer-events-none", style: {
-                        opacity: Math.min(noiseIntensity / 2, 1), // Normalize 0-2 range to 0-1
-                        mixBlendMode: 'overlay',
-                        backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`,
-                        zIndex: 5,
-                    } })), (0, jsx_runtime_1.jsx)("div", { style: shadowStyle, className: "relative z-10", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { style: logoShadowStyle, className: "relative z-10", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute z-20", style: {
-                        top: '50%',
-                        left: '50%',
-                        transform: `translate(${config.logo.x}px, ${config.logo.y * yMultiplier}px)`,
-                    }, children: logoComponent }), draggableMode && isDragging && selectedElement && (() => {
-                    var _a, _b;
-                    let displayX = 0;
-                    let displayY = 0;
-                    if (selectedElement === 'logo') {
-                        // Logo position
-                        const finalX = logoTranslateX;
-                        const finalY = logoTranslateY;
-                        // Use live drag position if available, otherwise use final position
-                        displayX = liveDragPosition && liveDragPosition.elementId === selectedElement
-                            ? liveDragPosition.x
-                            : finalX;
-                        displayY = liveDragPosition && liveDragPosition.elementId === selectedElement
-                            ? liveDragPosition.y
-                            : finalY;
-                    }
-                    else if (selectedElement.startsWith('copy-')) {
-                        // Copy position
-                        const selectedCopyId = selectedElement.replace('copy-', '');
-                        const selectedCopy = copies.find(c => c.id === selectedCopyId);
-                        if (!selectedCopy)
-                            return null;
-                        // Calculate position for selected copy
-                        const styleSlot = selectedCopy.styleSlot !== undefined ? selectedCopy.styleSlot : 0;
-                        const isStyled = styleSlot === 0 || styleSlot === 1;
-                        const copyConfig = styleSlot === 0
-                            ? config.copy1
-                            : ('copy2' in config ? config.copy2 : config.copy1);
-                        const configX = (_a = copyConfig === null || copyConfig === void 0 ? void 0 : copyConfig.x) !== null && _a !== void 0 ? _a : 0;
-                        const configY = (_b = copyConfig === null || copyConfig === void 0 ? void 0 : copyConfig.y) !== null && _b !== void 0 ? _b : 0;
-                        const autoOffset = autoOffsets[styleSlot] || 0;
-                        const baseX = isStyled ? configX : 0;
-                        const baseY = isStyled ? (configY * yMultiplier + autoOffset) : 0;
-                        const finalX = baseX + (selectedCopy.translateX || 0);
-                        const finalY = baseY + (selectedCopy.translateY || 0);
-                        // Use live drag position if available, otherwise use final position
-                        displayX = liveDragPosition && liveDragPosition.elementId === selectedElement
-                            ? liveDragPosition.x
-                            : finalX;
-                        displayY = liveDragPosition && liveDragPosition.elementId === selectedElement
-                            ? liveDragPosition.y
-                            : finalY;
-                    }
-                    else {
-                        return null;
-                    }
-                    // Threshold for considering element "centered" (in pixels)
-                    const CENTER_THRESHOLD = 5;
-                    // Check if element is centered on each axis
-                    const isCenteredHorizontally = Math.abs(displayX) <= CENTER_THRESHOLD;
-                    const isCenteredVertically = Math.abs(displayY) <= CENTER_THRESHOLD;
-                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isCenteredHorizontally && ((0, jsx_runtime_1.jsx)("div", { className: "absolute pointer-events-none", style: {
-                                    left: '50%',
-                                    top: 0,
-                                    bottom: 0,
-                                    width: '6px',
-                                    backgroundColor: 'rgb(125, 211, 252)', // sky-300
-                                    transform: `translateX(${displayX - 3}px)`, // -3px to center the 6px line
-                                    zIndex: 5,
-                                } })), isCenteredVertically && ((0, jsx_runtime_1.jsx)("div", { className: "absolute pointer-events-none", style: {
-                                    top: '50%',
-                                    left: 0,
-                                    right: 0,
-                                    height: '6px',
-                                    backgroundColor: 'rgb(125, 211, 252)', // sky-300
-                                    transform: `translateY(${displayY - 3}px)`, // -3px to center the 6px line
-                                    zIndex: 5,
-                                } }))] }));
-                })(), (0, jsx_runtime_1.jsx)("div", { className: "absolute pointer-events-none", style: {
-                        top: '50%',
-                        left: '50%',
-                        width: 0,
-                        height: 0,
-                        zIndex: 10,
-                    }, children: copies.map((copy) => {
-                        // Get width from config for the wrapper
-                        const styleSlot = copy.styleSlot !== undefined ? copy.styleSlot : 0;
-                        const copyConfig = styleSlot === 0
-                            ? config.copy1
-                            : ('copy2' in config ? config.copy2 : config.copy1);
-                        const configWidth = copy.width || (copyConfig === null || copyConfig === void 0 ? void 0 : copyConfig.width);
-                        return ((0, jsx_runtime_1.jsx)("div", { className: "pointer-events-auto absolute", style: {
-                                top: '50%',
-                                left: '50%',
-                                width: configWidth,
-                            }, children: renderCopyComponent(copy) }, copy.id));
-                    }) })] }) }));
-};
-exports.BannerRenderer = BannerRenderer;