zuljaman-banner-components 1.0.23 → 1.0.24

package/dist/components/BannerRenderer/BannerRenderer.js

@@ -0,0 +1,325 @@
+"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 styleConfig_1 = require("../../styleConfig");
+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 hooks_1 = require("./hooks");
+const components_1 = require("./components");
+// Note: marching ants animation is auto-injected by constants.ts import
+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, creationMode = false, linkingModeActive = false, onDebugPositions, onApplyAutoPositioning, onConnectionsDeleted, onLineGapsChange, onLogoPositionChange, logoRotation = 0, onLogoRotationChange, logoWidth, onLogoWidthChange, onCopyPositionChange, onCopyRotationChange, onCopyWidthChange, textShadowEnabled, textShadowSize, textShadowIntensity, logoShadowEnabled, logoShadowSize, logoShadowIntensity, noiseEnabled, noiseIntensity = 1.0, fontFamily, autoPositioningOverride, }) => {
+    const [selectedElement, setSelectedElement] = (0, react_1.useState)(null);
+    // Element refs
+    const logoRef = (0, react_1.useRef)(null);
+    const copyRefs = (0, react_1.useRef)([]);
+    const bannerContainerRef = (0, react_1.useRef)(null);
+    // Element reference helpers from custom hook
+    const { getElementRef, areElementsOverlapping, areVerticallyAligned } = (0, hooks_1.useElementRefs)({
+        logoRef,
+        copyRefs,
+        copies,
+    });
+    // Drag snap and alignment helpers from custom hook
+    const { handleRotationSnap, handlePositionSnap, calculateAlignments } = (0, hooks_1.useDragSnap)({
+        logoRef,
+        copyRefs,
+        bannerContainerRef,
+        copies,
+        sizeMultiplier,
+    });
+    // Config key for auto-resetting hooks when style/substyle changes
+    // This allows hooks to self-reset without requiring consumer to use key prop
+    const configKey = `${bannerStyle}-${bannerSubstyle}`;
+    // Get autoPositioningConfig early (needed for useLineDrawing to initialize completedLines)
+    const autoPositioningConfigForLines = (0, react_1.useMemo)(() => {
+        let baseConfig;
+        switch (bannerStyle) {
+            case 2:
+                baseConfig = (0, substyleConfig_2.getSubstyleConfig)(bannerSubstyle);
+                break;
+            case 3:
+                baseConfig = (0, substyleConfig_3.getSubstyleConfig)(bannerSubstyle);
+                break;
+            case 4:
+                baseConfig = (0, substyleConfig_4.getSubstyleConfig)(bannerSubstyle);
+                break;
+            case 1:
+            default:
+                baseConfig = (0, substyleConfig_1.getSubstyleConfig)(bannerSubstyle);
+        }
+        // Apply override if provided
+        if (autoPositioningOverride === null || autoPositioningOverride === void 0 ? void 0 : autoPositioningOverride.config) {
+            return autoPositioningOverride.config;
+        }
+        return baseConfig.autoPositioningConfig;
+    }, [bannerStyle, bannerSubstyle, autoPositioningOverride]);
+    // Line drawing state and handlers from custom hook
+    const { drawingFrom, drawingMousePos, completedLines, manualLines, setCompletedLines, setManualLines, handleToggleAutoPositioning, handleMouseMove, handleContainerClick, handleCompleteLineTo, convertToStyleSlotId, } = (0, hooks_1.useLineDrawing)({
+        bannerContainerRef,
+        copies,
+        sizeMultiplier,
+        creationMode,
+        areElementsOverlapping,
+        areVerticallyAligned,
+        autoPositioningConfig: autoPositioningConfigForLines,
+        configKey,
+    });
+    // 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);
+    // Track which line is being hovered
+    const [hoveredLine, setHoveredLine] = (0, react_1.useState)(null);
+    // Store gap values for each line (preserved when link is created)
+    const [lineGaps, setLineGaps] = (0, react_1.useState)(new Map());
+    // Expose lineGaps to parent via callback (using ref to avoid infinite loops)
+    const prevLineGapsRef = (0, react_1.useRef)('');
+    (0, react_1.useEffect)(() => {
+        if (onLineGapsChange && lineGaps.size > 0) {
+            const gapsObject = {};
+            lineGaps.forEach((value, key) => {
+                gapsObject[key] = value;
+            });
+            // Only call callback if gaps actually changed
+            const gapsJson = JSON.stringify(gapsObject);
+            if (gapsJson !== prevLineGapsRef.current) {
+                prevLineGapsRef.current = gapsJson;
+                onLineGapsChange(gapsObject);
+            }
+        }
+    }, [lineGaps, onLineGapsChange]);
+    // Proximity detection from custom hook
+    const { proximityLines, setProximityLines, detectProximityLines, calculateProximityLines, } = (0, hooks_1.useProximityDetection)({
+        logoRef,
+        copyRefs,
+        bannerContainerRef,
+        copies,
+        sizeMultiplier,
+        creationMode,
+        manualLines,
+        completedLines,
+        setCompletedLines,
+        setLineGaps,
+        getElementRef,
+    });
+    // Alignment lines when dragging
+    const [alignmentLines, setAlignmentLines] = (0, react_1.useState)([]);
+    // Get substyle configuration based on bannerStyle (needed before useAutoPositioning)
+    const config = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        let baseConfig;
+        switch (bannerStyle) {
+            case 2:
+                baseConfig = (0, substyleConfig_2.getSubstyleConfig)(bannerSubstyle);
+                break;
+            case 3:
+                baseConfig = (0, substyleConfig_3.getSubstyleConfig)(bannerSubstyle);
+                break;
+            case 4:
+                baseConfig = (0, substyleConfig_4.getSubstyleConfig)(bannerSubstyle);
+                break;
+            case 1:
+            default:
+                baseConfig = (0, substyleConfig_1.getSubstyleConfig)(bannerSubstyle);
+        }
+        // Apply auto-positioning override if provided
+        if (autoPositioningOverride) {
+            const result = {
+                ...baseConfig,
+                autoPositioning: autoPositioningOverride.enabled,
+                autoPositioningConfig: autoPositioningOverride.config,
+                gapRem: (_a = autoPositioningOverride.gapRem) !== null && _a !== void 0 ? _a : baseConfig.gapRem,
+                copies: (_b = autoPositioningOverride.copies) !== null && _b !== void 0 ? _b : baseConfig.copies,
+            };
+            return result;
+        }
+        return baseConfig;
+    }, [bannerStyle, bannerSubstyle, autoPositioningOverride]);
+    // 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
+    // Auto-positioning state and calculations from custom hook
+    const { autoOffsets, anchorCompensation, lineRecalcTrigger, derivedAutoConfig, debugPositions, applyAutoPositioningConfig, } = (0, hooks_1.useAutoPositioning)({
+        logoRef,
+        copyRefs,
+        bannerContainerRef,
+        copies,
+        sizeMultiplier,
+        creationMode,
+        completedLines,
+        manualLines,
+        lineGaps,
+        setCompletedLines,
+        setManualLines,
+        setLineGaps,
+        config,
+        autoPositioningOverride,
+        logoTranslateX,
+        logoTranslateY,
+        logoRotation,
+        logoWidth,
+        bannerStyle,
+        onApplyAutoPositioning,
+        onCopyPositionChange,
+        onConnectionsDeleted,
+        exposeDebugFunctions: !!onDebugPositions,
+        areElementsOverlapping,
+        areVerticallyAligned,
+        configKey,
+    });
+    // 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,
+    ]);
+    // ===== DETAILED POSITIONING DEBUG LOGGING =====
+    react_1.default.useEffect(() => {
+        // Log detailed positioning information for all copies
+        const positioningDetails = copies.map((copy, idx) => {
+            var _a, _b, _c;
+            const styleSlot = copy.styleSlot !== undefined ? copy.styleSlot : idx;
+            const copyConfig = ((_a = config.copies) === null || _a === void 0 ? void 0 : _a[styleSlot]) || ((_b = config.copies) === null || _b === void 0 ? void 0 : _b[0]);
+            const configY = (_c = copyConfig === null || copyConfig === void 0 ? void 0 : copyConfig.y) !== null && _c !== void 0 ? _c : 0;
+            const autoOffset = autoOffsets[styleSlot] || 0;
+            const baseY = configY * yMultiplier + autoOffset;
+            const effectiveTranslateY = copy.translateY || 0;
+            const finalY = baseY + effectiveTranslateY;
+            return {
+                index: idx,
+                styleSlot,
+                text: copy.text.substring(0, 30) + '...',
+                configY,
+                yMultiplier,
+                autoOffset,
+                baseY,
+                translateY: copy.translateY,
+                effectiveTranslateY,
+                finalY: Math.round(finalY),
+                translateX: copy.translateX,
+            };
+        });
+        console.log('📐 POSITIONING DETAILS:', Date.now(), JSON.stringify(positioningDetails, null, 2));
+    }, [copies, autoOffsets, config, yMultiplier]);
+    // Shared logo component (extracted to LogoElement)
+    const logoComponent = ((0, jsx_runtime_1.jsx)(components_1.LogoElement, { logoTranslateX: logoTranslateX, logoTranslateY: logoTranslateY, logoRotation: logoRotation, logoWidth: logoWidth, logoUrl: logoUrl, logoSizeMultiplier: logoSizeMultiplier, sizeMultiplier: sizeMultiplier, draggableMode: draggableMode, creationMode: creationMode, linkingModeActive: linkingModeActive, selectedElement: selectedElement, completedLines: completedLines, drawingFrom: drawingFrom, logoRef: logoRef, bannerContainerRef: bannerContainerRef, ImageComponent: ImageComponent, onLogoPositionChange: onLogoPositionChange, onLogoRotationChange: onLogoRotationChange, onLogoWidthChange: onLogoWidthChange, setSelectedElement: setSelectedElement, setIsDragging: setIsDragging, setLiveDragPosition: setLiveDragPosition, setAlignmentLines: setAlignmentLines, setProximityLines: setProximityLines, handleToggleAutoPositioning: handleToggleAutoPositioning, handleCompleteLineTo: handleCompleteLineTo, handleRotationSnap: handleRotationSnap, handlePositionSnap: handlePositionSnap, calculateAlignments: calculateAlignments, calculateProximityLines: calculateProximityLines, detectProximityLines: detectProximityLines }));
+    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 banner-container-bg", postType === "STORY" ? "pb-32 pt-44" : "py-20"), onMouseMove: handleMouseMove, onClick: handleContainerClick, 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 }), creationMode && (completedLines.size > 0 || drawingFrom) && ((0, jsx_runtime_1.jsx)(components_1.InteractiveLines, { copies: copies, completedLines: completedLines, drawingFrom: drawingFrom, drawingMousePos: drawingMousePos, hoveredLine: hoveredLine, lineRecalcTrigger: lineRecalcTrigger, sizeMultiplier: sizeMultiplier, logoRef: logoRef, copyRefs: copyRefs, bannerContainerRef: bannerContainerRef, setCompletedLines: setCompletedLines, setManualLines: setManualLines, setHoveredLine: setHoveredLine })), (0, jsx_runtime_1.jsx)(components_1.VisualGuides, { draggableMode: draggableMode, isDragging: isDragging, selectedElement: selectedElement, alignmentLines: alignmentLines, proximityLines: proximityLines, liveDragPosition: liveDragPosition, logoTranslateX: logoTranslateX, logoTranslateY: logoTranslateY, copies: copies, config: config, autoOffsets: autoOffsets, yMultiplier: yMultiplier }), (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, copyIndex) => {
+                        var _a, _b;
+                        // Get width from config for the wrapper
+                        const styleSlot = copy.styleSlot !== undefined ? copy.styleSlot : copyIndex;
+                        const copyConfig = ((_a = config.copies) === null || _a === void 0 ? void 0 : _a[styleSlot]) || ((_b = config.copies) === null || _b === void 0 ? void 0 : _b[0]);
+                        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: (0, jsx_runtime_1.jsx)(components_1.CopyElement, { copy: copy, copyIndex: copyIndex, copies: copies, config: config, styleConfig: styleConfig, yMultiplier: yMultiplier, autoOffsets: autoOffsets, sizeMultiplier: sizeMultiplier, fontFamily: fontFamily, draggableMode: draggableMode, creationMode: creationMode, linkingModeActive: linkingModeActive, selectedElement: selectedElement, completedLines: completedLines, drawingFrom: drawingFrom, copyRefs: copyRefs, bannerContainerRef: bannerContainerRef, onCopyPositionChange: onCopyPositionChange, onCopyRotationChange: onCopyRotationChange, onCopyWidthChange: onCopyWidthChange, setSelectedElement: setSelectedElement, setIsDragging: setIsDragging, setLiveDragPosition: setLiveDragPosition, setAlignmentLines: setAlignmentLines, setProximityLines: setProximityLines, handleToggleAutoPositioning: handleToggleAutoPositioning, handleCompleteLineTo: handleCompleteLineTo, handleRotationSnap: handleRotationSnap, handlePositionSnap: handlePositionSnap, calculateAlignments: calculateAlignments, calculateProximityLines: calculateProximityLines, detectProximityLines: detectProximityLines }) }, copy.id));
+                    }) })] }) }));
+};
+exports.BannerRenderer = BannerRenderer;

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

@@ -0,0 +1,62 @@
+/**
+ * CopyElement component
+ * Renders a single copy/text element with drag, rotation, and resize capabilities
+ */
+import React from 'react';
+import type { CopyConfig } from '../../../types';
+import type { CopyElementConfig } from '../../styles/types/substyleTypes';
+import type { AlignmentLine } from '../utils';
+export interface CopyElementProps {
+    copy: CopyConfig;
+    copyIndex: number;
+    copies: CopyConfig[];
+    config: {
+        copies?: CopyElementConfig[];
+    };
+    styleConfig: {
+        copyFontWeights?: Record<number, string>;
+        fontFamily?: string;
+    };
+    yMultiplier: number;
+    autoOffsets: Record<number, number>;
+    sizeMultiplier: number;
+    fontFamily?: string;
+    draggableMode: boolean;
+    creationMode: boolean;
+    linkingModeActive: boolean;
+    selectedElement: string | null;
+    completedLines: Map<string, string>;
+    drawingFrom: string | null;
+    copyRefs: React.MutableRefObject<(HTMLDivElement | null)[]>;
+    bannerContainerRef: React.RefObject<HTMLDivElement | null>;
+    onCopyPositionChange?: (copyIndex: number, pos: {
+        x: number;
+        y: number;
+    }) => void;
+    onCopyRotationChange?: (copyIndex: number, rotation: number) => void;
+    onCopyWidthChange?: (copyIndex: number, width: number) => void;
+    setSelectedElement: (id: string | null) => void;
+    setIsDragging: (dragging: boolean) => void;
+    setLiveDragPosition: (pos: {
+        elementId: string;
+        x: number;
+        y: number;
+    } | null) => void;
+    setAlignmentLines: (lines: AlignmentLine[]) => void;
+    setProximityLines: (lines: any[]) => void;
+    handleToggleAutoPositioning: (elementId: string) => void;
+    handleCompleteLineTo: (targetId: string) => void;
+    handleRotationSnap: (angle: number) => number;
+    handlePositionSnap: (bounds: DOMRect, position: {
+        x: number;
+        y: number;
+    }) => {
+        x: number;
+        y: number;
+    };
+    calculateAlignments: (elementId: string) => AlignmentLine[];
+    calculateProximityLines: (elementId: string) => void;
+    detectProximityLines: (elementId: string) => void;
+}
+export declare const CopyElement: React.NamedExoticComponent<CopyElementProps>;
+//# sourceMappingURL=CopyElement.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CopyElement.d.ts","sourceRoot":"","sources":["../../../../src/components/BannerRenderer/components/CopyElement.tsx"],"names":[],"mappings":"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"}

package/dist/components/BannerRenderer/components/CopyElement.js

@@ -0,0 +1,220 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CopyElement = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * CopyElement component
+ * Renders a single copy/text element with drag, rotation, and resize capabilities
+ */
+const react_1 = __importDefault(require("react"));
+const clsx_1 = __importDefault(require("clsx"));
+const shared_1 = require("../../shared");
+const defaults_1 = require("../../../constants/defaults");
+const utils_1 = require("../utils");
+const CopyElementComponent = ({ copy, copyIndex, copies, config, styleConfig, yMultiplier, autoOffsets, sizeMultiplier, fontFamily, draggableMode, creationMode, linkingModeActive, selectedElement, completedLines, drawingFrom, copyRefs, bannerContainerRef, onCopyPositionChange, onCopyRotationChange, onCopyWidthChange, setSelectedElement, setIsDragging, setLiveDragPosition, setAlignmentLines, setProximityLines, handleToggleAutoPositioning, handleCompleteLineTo, handleRotationSnap, handlePositionSnap, calculateAlignments, calculateProximityLines, detectProximityLines, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    // Use styleSlot to determine config (0 = first copy, 1 = second copy, etc.)
+    // Fallback to copyIndex for creation mode
+    const styleSlot = copy.styleSlot !== undefined ? copy.styleSlot : copyIndex;
+    // Wrapper to convert UUID-based targetId to styleSlot format before calling handleCompleteLineTo
+    // This is needed because DraggableElement passes elementId (UUID format) but completedLines uses styleSlot format
+    const handleCompleteLineToWithConversion = react_1.default.useCallback((targetId) => {
+        var _a;
+        // targetId comes as 'copy-{uuid}' from DraggableElement
+        // We need to find the copy with that UUID and get its styleSlot
+        if (targetId === 'logo') {
+            handleCompleteLineTo('logo');
+            return;
+        }
+        if (targetId.startsWith('copy-')) {
+            const suffix = targetId.substring(5); // Remove 'copy-' prefix
+            const targetCopy = copies.find(c => c.id === suffix);
+            const targetStyleSlot = (_a = targetCopy === null || targetCopy === void 0 ? void 0 : targetCopy.styleSlot) !== null && _a !== void 0 ? _a : copies.findIndex(c => c.id === suffix);
+            if (targetStyleSlot !== -1) {
+                handleCompleteLineTo(`copy-${targetStyleSlot}`);
+            }
+            else {
+                // Fallback: pass as-is (handleCompleteLineTo will try to convert)
+                handleCompleteLineTo(targetId);
+            }
+        }
+        else {
+            handleCompleteLineTo(targetId);
+        }
+    }, [copies, handleCompleteLineTo]);
+    // DYNAMIC: Check if this styleSlot has config (not limited to 0 and 1)
+    const isStyled = ((_a = config.copies) === null || _a === void 0 ? void 0 : _a[styleSlot]) !== undefined;
+    // Get copy config from copies array
+    const copyConfig = ((_b = config.copies) === null || _b === void 0 ? void 0 : _b[styleSlot]) || ((_c = config.copies) === null || _c === void 0 ? void 0 : _c[0]);
+    // Get config position and width
+    const configX = (_d = copyConfig === null || copyConfig === void 0 ? void 0 : copyConfig.x) !== null && _d !== void 0 ? _d : 0;
+    const configY = (_e = copyConfig === null || copyConfig === void 0 ? void 0 : copyConfig.y) !== null && _e !== void 0 ? _e : 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 ? (((_f = styleConfig.copyFontWeights) === null || _f === void 0 ? void 0 : _f[styleSlot]) || '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'
+        : (0, utils_1.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;
+    // DYNAMIC: Consistent 'copy-N' format for all styleSlots
+    const elementId = `copy-${styleSlot}`;
+    // Plan v30: Check if this element is a TARGET in the chain
+    // TARGETs appear as values in completedLines (they are the "to" in "from -> to")
+    // When an element is a TARGET with autoOffset, ignore translateY because position is calculated by auto-positioning
+    const isTargetInChain = react_1.default.useMemo(() => {
+        // Check if this element appears as a target (value) in completedLines
+        for (const [, toId] of completedLines.entries()) {
+            if (toId === `copy-${styleSlot}`) {
+                return true;
+            }
+        }
+        return false;
+    }, [completedLines, styleSlot]);
+    // If element is TARGET in chain and has autoOffset, ignore translateY
+    // This ensures auto-positioning controls the Y position completely
+    const effectiveTranslateY = (isTargetInChain && autoOffset !== 0) ? 0 : (copy.translateY || 0);
+    const finalX = baseX + (copy.translateX || 0);
+    const finalY = baseY + effectiveTranslateY;
+    const finalWidth = copy.width || configWidth;
+    const finalRotation = (_g = copy.rotation) !== null && _g !== void 0 ? _g : (isStyled ? ((_h = copyConfig === null || copyConfig === void 0 ? void 0 : copyConfig.rotation) !== null && _h !== void 0 ? _h : 0) : 0);
+    // DEBUG: Log positioning only when final position changes (not on every render)
+    react_1.default.useEffect(() => {
+        console.log(`📍 Copy[${styleSlot}] position changed:`, {
+            finalX: Math.round(finalX),
+            finalY: Math.round(finalY),
+            baseY: Math.round(baseY),
+            autoOffset: Math.round(autoOffset),
+            translateY: Math.round(effectiveTranslateY),
+        });
+    }, [finalX, finalY, styleSlot, baseY, autoOffset, effectiveTranslateY]);
+    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, creationMode: creationMode, linkingModeActive: linkingModeActive, onStartLinking: creationMode && linkingModeActive ? () => handleToggleAutoPositioning(`copy-${styleSlot}`) : undefined, onElementClickWhileDrawing: creationMode && drawingFrom ? handleCompleteLineToWithConversion : undefined, onPositionChange: (pos) => {
+            // Clear live drag position and dragging state when drag ends
+            setLiveDragPosition(null);
+            setIsDragging(false);
+            setAlignmentLines([]); // Clear alignment lines
+            setProximityLines([]); // Clear proximity lines
+            // 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 foundIndex = copies.findIndex(c => c.id === copy.id);
+            if (foundIndex !== -1) {
+                console.log('🖱️ COPY DRAG - copyIndex:', foundIndex, 'adjustedPos:', adjustedPos);
+                onCopyPositionChange === null || onCopyPositionChange === void 0 ? void 0 : onCopyPositionChange(foundIndex, adjustedPos);
+            }
+        }, onRotationChange: (rot) => {
+            const foundIndex = copies.findIndex(c => c.id === copy.id);
+            if (foundIndex !== -1) {
+                onCopyRotationChange === null || onCopyRotationChange === void 0 ? void 0 : onCopyRotationChange(foundIndex, rot);
+            }
+        }, onWidthChange: (w) => {
+            const foundIndex = copies.findIndex(c => c.id === copy.id);
+            if (foundIndex !== -1) {
+                onCopyWidthChange === null || onCopyWidthChange === void 0 ? void 0 : onCopyWidthChange(foundIndex, w);
+            }
+        }, onSelect: (id) => setSelectedElement(id), onDeselect: () => {
+            setSelectedElement(null);
+            setLiveDragPosition(null);
+            setProximityLines([]); // Clear proximity lines
+        }, onRotationSnap: handleRotationSnap, onPositionSnap: handlePositionSnap, onDragMove: (dragElementId, 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: dragElementId,
+                x: offsetX,
+                y: offsetY,
+            });
+            // Calculate alignment lines
+            const alignments = calculateAlignments(dragElementId);
+            setAlignmentLines(alignments);
+            // Calculate proximity lines (visual distance indicators)
+            calculateProximityLines(dragElementId);
+            // Detect proximity and auto-create lines (creation mode only)
+            detectProximityLines(dragElementId);
+        }, children: (0, jsx_runtime_1.jsx)("div", { ref: (el) => {
+                // Store ref by copy index in the copies array
+                const foundIndex = copies.findIndex(c => c.id === copy.id);
+                if (foundIndex !== -1) {
+                    copyRefs.current[foundIndex] = 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));
+};
+// Memoize CopyElement to prevent unnecessary re-renders
+exports.CopyElement = react_1.default.memo(CopyElementComponent);

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

@@ -0,0 +1,26 @@
+/**
+ * InteractiveLines component
+ * Renders the green dotted lines for auto-positioning connections between elements
+ */
+import React from 'react';
+import type { CopyConfig } from '../../../types';
+export interface InteractiveLinesProps {
+    copies: CopyConfig[];
+    completedLines: Map<string, string>;
+    drawingFrom: string | null;
+    drawingMousePos: {
+        x: number;
+        y: number;
+    } | null;
+    hoveredLine: string | null;
+    lineRecalcTrigger: number;
+    sizeMultiplier: number;
+    logoRef: React.RefObject<HTMLDivElement | null>;
+    copyRefs: React.MutableRefObject<(HTMLDivElement | null)[]>;
+    bannerContainerRef: React.RefObject<HTMLDivElement | null>;
+    setCompletedLines: React.Dispatch<React.SetStateAction<Map<string, string>>>;
+    setManualLines: React.Dispatch<React.SetStateAction<Set<string>>>;
+    setHoveredLine: (lineId: string | null) => void;
+}
+export declare const InteractiveLines: React.FC<InteractiveLinesProps>;
+//# sourceMappingURL=InteractiveLines.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InteractiveLines.d.ts","sourceRoot":"","sources":["../../../../src/components/BannerRenderer/components/InteractiveLines.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,MAAM,WAAW,qBAAqB;IAEpC,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,eAAe,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACjD,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,cAAc,EAAE,MAAM,CAAC;IAGvB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAChD,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC;IAC5D,kBAAkB,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAG3D,iBAAiB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;IAC7E,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAClE,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACjD;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA4Q5D,CAAC"}