zuljaman-banner-components 1.0.6 → 1.0.8

package/dist/components/BannerRenderer.d.ts

@@ -0,0 +1,48 @@
+/**
+ * BannerRenderer component - Generic platform-agnostic banner renderer
+ * Unified component that handles all banner styles based on configuration
+ */
+import React from "react";
+import type { ImageProps, CopyConfig } from "../types";
+interface BannerRendererProps {
+    bannerStyle: number;
+    copies?: CopyConfig[];
+    bannerSubstyle?: number;
+    logoUrl?: string;
+    sizeMultiplier?: number;
+    logoSizeMultiplier?: number;
+    overlayIntensityMultiplier?: number;
+    shadowIntensityMultiplier?: number;
+    backgroundImageUrl?: string;
+    postType?: string;
+    ImageComponent: React.ComponentType<ImageProps>;
+    logoTranslateX?: number;
+    logoTranslateY?: number;
+    logoRotation?: number;
+    logoWidth?: number;
+    textShadowEnabled?: boolean;
+    textShadowSize?: number;
+    textShadowIntensity?: number;
+    logoShadowEnabled?: boolean;
+    logoShadowSize?: number;
+    logoShadowIntensity?: number;
+    noiseEnabled?: boolean;
+    noiseIntensity?: number;
+    fontFamily?: string;
+    draggableMode?: boolean;
+    onLogoPositionChange?: (position: {
+        x: number;
+        y: number;
+    }) => void;
+    onLogoRotationChange?: (rotation: number) => void;
+    onLogoWidthChange?: (width: number) => void;
+    onCopyPositionChange?: (copyIndex: number, position: {
+        x: number;
+        y: number;
+    }) => void;
+    onCopyRotationChange?: (copyIndex: number, rotation: number) => void;
+    onCopyWidthChange?: (copyIndex: number, width: number) => void;
+}
+export declare const BannerRenderer: React.FC<BannerRendererProps>;
+export {};
+//# sourceMappingURL=BannerRenderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BannerRenderer.d.ts","sourceRoot":"","sources":["../../src/components/BannerRenderer.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAgE,MAAM,OAAO,CAAC;AAGrF,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAUvD,UAAU,mBAAmB;IAE3B,WAAW,EAAE,MAAM,CAAC;IAGpB,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC;IAEtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAGhD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAG7B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IAGxB,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,CAAC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACpE,oBAAoB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAG5C,oBAAoB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACvF,oBAAoB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrE,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAChE;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA4lBxD,CAAC"}

package/dist/components/BannerRenderer.js

@@ -0,0 +1,449 @@
+"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)([]);
+    // 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);
+    // 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]);
+    // Memoize copies without rotation to prevent auto-positioning recalc on rotation changes
+    const copiesWithoutRotation = (0, react_1.useMemo)(() => {
+        return copies.map(copy => ({
+            text: copy.text,
+            styleSlot: copy.styleSlot,
+            translateX: copy.translateX,
+            translateY: copy.translateY,
+            width: copy.width,
+            // Exclude rotation from memoization
+        }));
+    }, [copies.map(c => `${c.text}-${c.styleSlot}-${c.translateX || 0}-${c.translateY || 0}-${c.width || 'auto'}`).join(',')]);
+    // 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;
+        console.log('🎯 AUTO-POSITION CALC:', {
+            anchorElement,
+            targetElement,
+            direction: config.autoPositioningConfig.direction,
+            gapRem: config.gapRem,
+        });
+        // Get anchor element ref
+        let anchorRef = null;
+        if (anchorElement === 'logo') {
+            anchorRef = logoRef.current;
+            console.log('📍 Logo anchor:', {
+                exists: !!anchorRef,
+                height: anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.getBoundingClientRect().height,
+            });
+        }
+        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];
+            }
+            console.log('📍 Copy1 anchor:', {
+                exists: !!anchorRef,
+                height: anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.getBoundingClientRect().height,
+            });
+        }
+        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];
+            }
+            console.log('📍 Copy2 anchor:', {
+                exists: !!anchorRef,
+                height: anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.getBoundingClientRect().height,
+            });
+        }
+        // If anchor element doesn't exist, can't calculate
+        if (!anchorRef) {
+            console.log('❌ NO ANCHOR REF - Skipping calculation');
+            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) {
+            console.log('❌ NO TARGET REF - Skipping calculation');
+            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';
+        console.log('📏 Heights:', { anchorHeight, targetHeight, anchorHasCenterOrigin });
+        // Calculate offset
+        const offset = (0, positioningUtils_1.calculateAutoPositionOffset)(config, config.autoPositioningConfig, anchorHeight, targetHeight, anchorHasCenterOrigin);
+        console.log('✨ Calculated offset:', offset);
+        // Find target styleSlot
+        let targetStyleSlot;
+        if (targetElement === 'copy1') {
+            targetStyleSlot = 0;
+        }
+        else if (targetElement === 'copy2') {
+            targetStyleSlot = 1;
+        }
+        console.log('🎪 Target styleSlot:', targetStyleSlot);
+        // 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
+                console.log('🔄 Offset comparison:', { prevOffset, newOffset: offset, willUpdate: Math.abs(prevOffset - offset) > EPSILON });
+                if (Math.abs(prevOffset - offset) > EPSILON) {
+                    const newOffsets = {
+                        ...prev,
+                        [targetStyleSlot]: offset,
+                    };
+                    console.log('✅ UPDATING OFFSETS:', newOffsets);
+                    return newOffsets;
+                }
+                console.log('⏭️ SKIPPING - no significant change');
+                return prev; // No significant change, return same object to prevent re-render
+            });
+        }
+    }, [config, sizeMultiplier, recalcTrigger, copiesWithoutRotation]);
+    // 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: onLogoPositionChange, onRotationChange: onLogoRotationChange, onWidthChange: onLogoWidthChange, onSelect: (id) => setSelectedElement(id), onDeselect: () => setSelectedElement(null), onRotationSnap: handleRotationSnap, 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`,
+                transform: !draggableMode ? `translate(${logoTranslateX}px, ${logoTranslateY}px)` : undefined,
+            }, 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 + 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);
+        console.log(`📦 DRAGGABLE POSITION (styleSlot ${styleSlot}):`, {
+            configX,
+            configY,
+            autoOffset,
+            baseX,
+            baseY,
+            'copy.translateX': copy.translateX,
+            'copy.translateY': copy.translateY,
+            finalX,
+            finalY,
+            finalWidth,
+        });
+        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) => {
+                // 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), onRotationSnap: handleRotationSnap, 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: {
+                    transform: !draggableMode ? `translate(${finalX}px, ${finalY}px) rotate(${finalRotation}deg)` : undefined,
+                    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", { 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}px)`,
+                    }, children: logoComponent }), (0, jsx_runtime_1.jsx)("div", { className: "absolute pointer-events-none", style: {
+                        top: '50%',
+                        left: '50%',
+                        width: 0,
+                        height: 0
+                    }, 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;

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

@@ -1 +1 @@
-{"version":3,"file":"BannerVisor.d.ts","sourceRoot":"","sources":["../../src/components/BannerVisor.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAY7D,UAAU,yBAA0B,SAAQ,gBAAgB;IAC1D,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;CACjD;AAUD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAwJ3D,CAAC"}
+{"version":3,"file":"BannerVisor.d.ts","sourceRoot":"","sources":["../../src/components/BannerVisor.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAA+C,MAAM,OAAO,CAAC;AAEpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAc,MAAM,UAAU,CAAC;AAYzE,UAAU,yBAA0B,SAAQ,gBAAgB;IAC1D,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;CACjD;AAUD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAkU3D,CAAC"}