zuljaman-banner-components 1.0.22 → 1.0.24

package/dist/components/BannerRenderer/components/InteractiveLines.js

@@ -0,0 +1,172 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InteractiveLines = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const InteractiveLines = ({ copies, completedLines, drawingFrom, drawingMousePos, hoveredLine, lineRecalcTrigger, sizeMultiplier, logoRef, copyRefs, bannerContainerRef, setCompletedLines, setManualLines, setHoveredLine, }) => {
+    // Helper to get element ref by ID (supports both copy-{uuid} and copy-{N} formats)
+    const getElementRefLocal = (elementId) => {
+        if (elementId === 'logo') {
+            return logoRef.current;
+        }
+        else if (elementId.startsWith('copy-')) {
+            const suffix = elementId.substring(5);
+            // Check if it's copy-N format (styleSlot)
+            if (/^\d+$/.test(suffix)) {
+                const styleSlotIndex = parseInt(suffix, 10);
+                const copy = copies.find(c => c.styleSlot === styleSlotIndex);
+                if (copy) {
+                    const copyIndex = copies.indexOf(copy);
+                    return copyRefs.current[copyIndex];
+                }
+                if (styleSlotIndex < copies.length) {
+                    return copyRefs.current[styleSlotIndex];
+                }
+            }
+            else {
+                // UUID format
+                const copyIndex = copies.findIndex(c => c.id === suffix);
+                if (copyIndex !== -1) {
+                    return copyRefs.current[copyIndex];
+                }
+            }
+        }
+        return null;
+    };
+    // Helper to get element center position
+    // Read from DOM to ensure consistency with getBorderPoint
+    const getElementCenter = (elementId) => {
+        const ref = getElementRefLocal(elementId);
+        if (!ref || !bannerContainerRef.current)
+            return null;
+        const elementBounds = ref.getBoundingClientRect();
+        const bannerBounds = bannerContainerRef.current.getBoundingClientRect();
+        const centerX = elementBounds.left + elementBounds.width / 2;
+        const centerY = elementBounds.top + elementBounds.height / 2;
+        const bannerCenterX = bannerBounds.left + bannerBounds.width / 2;
+        const bannerCenterY = bannerBounds.top + bannerBounds.height / 2;
+        return {
+            x: (centerX - bannerCenterX) / sizeMultiplier,
+            y: (centerY - bannerCenterY) / sizeMultiplier,
+        };
+    };
+    // Helper to get border intersection point
+    // Calculates where a line from 'from' point to element center intersects the element's border
+    const getBorderPoint = (elementId, fromX, fromY) => {
+        const ref = getElementRefLocal(elementId);
+        if (!ref || !bannerContainerRef.current)
+            return null;
+        // Get element dimensions and position from DOM
+        const elementBounds = ref.getBoundingClientRect();
+        const bannerBounds = bannerContainerRef.current.getBoundingClientRect();
+        const width = elementBounds.width / sizeMultiplier;
+        const height = elementBounds.height / sizeMultiplier;
+        // Calculate element center in banner-relative coordinates
+        const centerXAbs = elementBounds.left + elementBounds.width / 2;
+        const centerYAbs = elementBounds.top + elementBounds.height / 2;
+        const bannerCenterX = bannerBounds.left + bannerBounds.width / 2;
+        const bannerCenterY = bannerBounds.top + bannerBounds.height / 2;
+        const centerX = (centerXAbs - bannerCenterX) / sizeMultiplier;
+        const centerY = (centerYAbs - bannerCenterY) / sizeMultiplier;
+        // Direction from 'from' point to element center
+        const dx = centerX - fromX;
+        const dy = centerY - fromY;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        if (distance === 0)
+            return { x: centerX, y: centerY };
+        // Normalized direction
+        const dirX = dx / distance;
+        const dirY = dy / distance;
+        // Calculate intersection with element bounding box
+        // Using parametric form: point = from + t * dir
+        // Find t where the ray intersects the box edges
+        const halfW = width / 2;
+        const halfH = height / 2;
+        // Calculate t for each edge
+        const tRight = dirX > 0 ? (halfW) / dirX : Infinity;
+        const tLeft = dirX < 0 ? (-halfW) / dirX : Infinity;
+        const tBottom = dirY > 0 ? (halfH) / dirY : Infinity;
+        const tTop = dirY < 0 ? (-halfH) / dirY : Infinity;
+        // Find minimum positive t
+        const t = Math.min(tRight, tLeft, tBottom, tTop);
+        // Calculate intersection point from element center
+        const intersectX = t * dirX;
+        const intersectY = t * dirY;
+        return {
+            x: centerX - intersectX,
+            y: centerY - intersectY,
+        };
+    };
+    const visibleLines = [];
+    const invisibleLines = [];
+    // Render completed lines (both visible and invisible for hit detection)
+    completedLines.forEach((toId, fromId) => {
+        // Get centers of both elements first
+        const fromCenter = getElementCenter(fromId);
+        const toCenter = getElementCenter(toId);
+        // Calculate border points for both elements
+        const fromPos = fromCenter && toCenter ? getBorderPoint(fromId, toCenter.x, toCenter.y) : null;
+        const toPos = toCenter && fromCenter ? getBorderPoint(toId, fromCenter.x, fromCenter.y) : null;
+        const lineId = `${fromId}-${toId}`;
+        const isHovered = hoveredLine === lineId;
+        if (fromPos && toPos) {
+            // Visible line (below elements, z-index: 8)
+            visibleLines.push((0, jsx_runtime_1.jsx)("line", { x1: fromPos.x, y1: fromPos.y, x2: toPos.x, y2: toPos.y, stroke: isHovered ? 'rgba(255, 50, 50, 0.9)' : 'rgba(0, 255, 65, 0.9)', strokeWidth: isHovered ? '10' : '8', strokeDasharray: "8,12", strokeLinecap: "round", style: {
+                    filter: 'drop-shadow(0 0 4px rgba(0, 255, 65, 0.6))',
+                    pointerEvents: 'none',
+                    animation: 'marching-ants 0.5s linear infinite',
+                } }, `visible-${lineId}`));
+            // Invisible line for hit detection (above elements, z-index: 16)
+            invisibleLines.push((0, jsx_runtime_1.jsx)("line", { x1: fromPos.x, y1: fromPos.y, x2: toPos.x, y2: toPos.y, stroke: "transparent", strokeWidth: "20" // Wider for easier clicking
+                , strokeLinecap: "round", style: {
+                    cursor: 'pointer',
+                    pointerEvents: 'auto',
+                }, onClick: (e) => {
+                    e.stopPropagation();
+                    setCompletedLines(prev => {
+                        const newMap = new Map(prev);
+                        newMap.delete(fromId);
+                        return newMap;
+                    });
+                    // Also remove from manual lines
+                    setManualLines(prev => {
+                        const newSet = new Set(prev);
+                        newSet.delete(`${fromId}->${toId}`);
+                        return newSet;
+                    });
+                    setHoveredLine(null);
+                }, onMouseEnter: () => setHoveredLine(lineId), onMouseLeave: () => setHoveredLine(null) }, `invisible-${lineId}`));
+        }
+    });
+    // Render drawing line (following mouse) - only in visible layer
+    if (drawingFrom && drawingMousePos) {
+        // Get element center and calculate border point towards mouse
+        const fromCenter = getElementCenter(drawingFrom);
+        const fromPos = fromCenter ? getBorderPoint(drawingFrom, drawingMousePos.x, drawingMousePos.y) : null;
+        if (fromPos) {
+            visibleLines.push((0, jsx_runtime_1.jsx)("line", { x1: fromPos.x, y1: fromPos.y, x2: drawingMousePos.x, y2: drawingMousePos.y, stroke: "rgba(0, 255, 65, 0.6)", strokeWidth: "4", strokeDasharray: "10,5", strokeLinecap: "round", style: {
+                    filter: 'drop-shadow(0 0 4px rgba(0, 255, 65, 0.4))',
+                    pointerEvents: 'none',
+                } }, "drawing-line"));
+        }
+    }
+    if (visibleLines.length === 0 && invisibleLines.length === 0)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [visibleLines.length > 0 && ((0, jsx_runtime_1.jsx)("svg", { className: "absolute", style: {
+                    top: '50%',
+                    left: '50%',
+                    width: '100%',
+                    height: '100%',
+                    zIndex: 8,
+                    overflow: 'visible',
+                    pointerEvents: 'none',
+                }, children: visibleLines }, `lines-${lineRecalcTrigger}`)), invisibleLines.length > 0 && ((0, jsx_runtime_1.jsx)("svg", { className: "absolute", style: {
+                    top: '50%',
+                    left: '50%',
+                    width: '100%',
+                    height: '100%',
+                    zIndex: 16,
+                    overflow: 'visible',
+                    pointerEvents: 'none', // Container is none, individual lines are auto
+                }, children: invisibleLines }, `lines-invisible-${lineRecalcTrigger}`))] }));
+};
+exports.InteractiveLines = InteractiveLines;

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

@@ -0,0 +1,55 @@
+/**
+ * LogoElement component
+ * Renders the logo with drag, rotation, and resize capabilities
+ */
+import React from 'react';
+import type { ImageProps } from '../../../types';
+import type { AlignmentLine } from '../utils';
+export interface LogoElementProps {
+    logoTranslateX: number;
+    logoTranslateY: number;
+    logoRotation: number;
+    logoWidth?: number;
+    logoUrl?: string;
+    logoSizeMultiplier: number;
+    sizeMultiplier: number;
+    draggableMode: boolean;
+    creationMode: boolean;
+    linkingModeActive: boolean;
+    selectedElement: string | null;
+    completedLines: Map<string, string>;
+    drawingFrom: string | null;
+    logoRef: React.RefObject<HTMLDivElement | null>;
+    bannerContainerRef: React.RefObject<HTMLDivElement | null>;
+    ImageComponent: React.ComponentType<ImageProps>;
+    onLogoPositionChange?: (pos: {
+        x: number;
+        y: number;
+    }) => void;
+    onLogoRotationChange?: (rotation: number) => void;
+    onLogoWidthChange?: (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 LogoElement: React.FC<LogoElementProps>;
+//# sourceMappingURL=LogoElement.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LogoElement.d.ts","sourceRoot":"","sources":["../../../../src/components/BannerRenderer/components/LogoElement.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,MAAM,WAAW,gBAAgB;IAE/B,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;IAGvB,aAAa,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;IACtB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAG/B,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAG3B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAChD,kBAAkB,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAG3D,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAGhD,oBAAoB,CAAC,EAAE,CAAC,GAAG,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/D,oBAAoB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,kBAAkB,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,aAAa,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,mBAAmB,EAAE,CAAC,GAAG,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IACvF,iBAAiB,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IACpD,iBAAiB,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IAC1C,2BAA2B,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,oBAAoB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC9C,kBAAkB,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtG,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,aAAa,EAAE,CAAC;IAC5D,uBAAuB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,oBAAoB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACnD;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA2HlD,CAAC"}

package/dist/components/BannerRenderer/components/LogoElement.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LogoElement = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const shared_1 = require("../../shared");
+const defaults_1 = require("../../../constants/defaults");
+const LogoElement = ({ logoTranslateX, logoTranslateY, logoRotation, logoWidth, logoUrl, logoSizeMultiplier, sizeMultiplier, draggableMode, creationMode, linkingModeActive, selectedElement, completedLines, drawingFrom, logoRef, bannerContainerRef, ImageComponent, onLogoPositionChange, onLogoRotationChange, onLogoWidthChange, setSelectedElement, setIsDragging, setLiveDragPosition, setAlignmentLines, setProximityLines, handleToggleAutoPositioning, handleCompleteLineTo, handleRotationSnap, handlePositionSnap, calculateAlignments, calculateProximityLines, detectProximityLines, }) => {
+    return ((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", creationMode: creationMode, linkingModeActive: linkingModeActive, onStartLinking: creationMode && linkingModeActive ? () => handleToggleAutoPositioning('logo') : undefined, onElementClickWhileDrawing: creationMode && drawingFrom ? handleCompleteLineTo : undefined, onPositionChange: (pos) => {
+            // Clear dragging state when drag ends
+            setIsDragging(false);
+            setLiveDragPosition(null);
+            setAlignmentLines([]); // Clear alignment lines
+            setProximityLines([]); // Clear proximity lines
+            onLogoPositionChange === null || onLogoPositionChange === void 0 ? void 0 : onLogoPositionChange(pos);
+        }, onRotationChange: onLogoRotationChange, onWidthChange: onLogoWidthChange, onSelect: (id) => setSelectedElement(id), onDeselect: () => {
+            setSelectedElement(null);
+            setLiveDragPosition(null);
+            setIsDragging(false);
+            setProximityLines([]); // Clear proximity lines
+        }, onRotationSnap: handleRotationSnap, onPositionSnap: handlePositionSnap, 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,
+            });
+            // Calculate alignment lines
+            const alignments = calculateAlignments(elementId);
+            setAlignmentLines(alignments);
+            // Calculate proximity lines (visual distance indicators)
+            calculateProximityLines(elementId);
+            // Detect proximity and auto-create lines (creation mode only)
+            detectProximityLines(elementId);
+        }, 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`,
+            }, 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" } })) }) }));
+};
+exports.LogoElement = LogoElement;

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

@@ -0,0 +1,43 @@
+/**
+ * VisualGuides component
+ * Renders alignment lines, proximity lines, and center guide lines during drag operations
+ */
+import React from 'react';
+import type { CopyConfig } from '../../../types';
+import type { AlignmentLine } from '../utils';
+import type { CopyElementConfig } from '../../styles/types/substyleTypes';
+export interface ProximityLine {
+    fromId: string;
+    toId: string;
+    fromPos: {
+        x: number;
+        y: number;
+    };
+    toPos: {
+        x: number;
+        y: number;
+    };
+    distance: number;
+}
+export interface VisualGuidesProps {
+    draggableMode: boolean;
+    isDragging: boolean;
+    selectedElement: string | null;
+    alignmentLines: AlignmentLine[];
+    proximityLines: ProximityLine[];
+    liveDragPosition: {
+        elementId: string;
+        x: number;
+        y: number;
+    } | null;
+    logoTranslateX: number;
+    logoTranslateY: number;
+    copies: CopyConfig[];
+    config: {
+        copies?: CopyElementConfig[];
+    };
+    autoOffsets: Record<number, number>;
+    yMultiplier: number;
+}
+export declare const VisualGuides: React.FC<VisualGuidesProps>;
+//# sourceMappingURL=VisualGuides.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VisualGuides.d.ts","sourceRoot":"","sources":["../../../../src/components/BannerRenderer/components/VisualGuides.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAC9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAE1E,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClC,KAAK,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,iBAAiB;IAEhC,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAG/B,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,cAAc,EAAE,aAAa,EAAE,CAAC;IAGhC,gBAAgB,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACrE,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IAGvB,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,MAAM,EAAE;QACN,MAAM,CAAC,EAAE,iBAAiB,EAAE,CAAC;KAC9B,CAAC;IACF,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAmOpD,CAAC"}

package/dist/components/BannerRenderer/components/VisualGuides.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VisualGuides = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const VisualGuides = ({ draggableMode, isDragging, selectedElement, alignmentLines, proximityLines, liveDragPosition, logoTranslateX, logoTranslateY, copies, config, autoOffsets, yMultiplier, }) => {
+    // Don't render if not dragging
+    if (!draggableMode || !isDragging)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [alignmentLines.length > 0 && ((0, jsx_runtime_1.jsx)("svg", { className: "absolute pointer-events-none", style: {
+                    top: '50%',
+                    left: '50%',
+                    width: '100%',
+                    height: '100%',
+                    zIndex: 14,
+                    overflow: 'visible',
+                }, children: alignmentLines.map((line, index) => (line.orientation === 'vertical' ? ((0, jsx_runtime_1.jsx)("line", { x1: line.x, y1: line.y1, x2: line.x, y2: line.y2, stroke: "rgba(255, 0, 255, 0.9)" // Fuschia fosforescente
+                    , strokeWidth: "3", strokeLinecap: "round", style: {
+                        filter: 'drop-shadow(0 0 4px rgba(255, 0, 255, 0.6))', // Glow effect
+                    } }, `alignment-${index}-${line.type}`)) : ((0, jsx_runtime_1.jsx)("line", { x1: line.x1, y1: line.y, x2: line.x2, y2: line.y, stroke: "rgba(255, 0, 255, 0.9)" // Fuschia fosforescente
+                    , strokeWidth: "3", strokeLinecap: "round", style: {
+                        filter: 'drop-shadow(0 0 4px rgba(255, 0, 255, 0.6))', // Glow effect
+                    } }, `alignment-${index}-${line.type}`)))) })), proximityLines.length > 0 && ((0, jsx_runtime_1.jsx)("svg", { className: "absolute pointer-events-none", style: {
+                    top: '50%',
+                    left: '50%',
+                    width: '100%',
+                    height: '100%',
+                    zIndex: 13,
+                    overflow: 'visible',
+                }, children: proximityLines.map((line, index) => {
+                    const midX = (line.fromPos.x + line.toPos.x) / 2;
+                    const midY = (line.fromPos.y + line.toPos.y) / 2;
+                    return ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("line", { x1: line.fromPos.x, y1: line.fromPos.y, x2: line.toPos.x, y2: line.toPos.y, stroke: "rgba(255, 0, 255, 0.7)" // Fuschia slightly transparent
+                                , strokeWidth: "2", strokeDasharray: "5,5", strokeLinecap: "round", style: {
+                                    filter: 'drop-shadow(0 0 3px rgba(255, 0, 255, 0.5))',
+                                } }), (0, jsx_runtime_1.jsx)("rect", { x: midX - 30, y: midY - 14, width: 60, height: 28, fill: "rgba(255, 0, 255, 0.9)", rx: 6, style: {
+                                    filter: 'drop-shadow(0 0 4px rgba(255, 0, 255, 0.6))',
+                                } }), (0, jsx_runtime_1.jsxs)("text", { x: midX, y: midY + 6, textAnchor: "middle", fill: "white", fontSize: "16", fontWeight: "bold", style: {
+                                    pointerEvents: 'none',
+                                    userSelect: 'none',
+                                }, children: [line.distance, "px"] })] }, `proximity-${index}-${line.fromId}-${line.toId}`));
+                }) })), selectedElement && (() => {
+                var _a, _b, _c, _d, _e;
+                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;
+                    // 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;
+                    const copyConfig = ((_b = config.copies) === null || _b === void 0 ? void 0 : _b[styleSlot]) || ((_c = config.copies) === null || _c === void 0 ? void 0 : _c[0]);
+                    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 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,
+                            } }))] }));
+            })()] }));
+};
+exports.VisualGuides = VisualGuides;

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

@@ -0,0 +1,12 @@
+/**
+ * BannerRenderer sub-components barrel file
+ */
+export { LogoElement } from './LogoElement';
+export type { LogoElementProps } from './LogoElement';
+export { CopyElement } from './CopyElement';
+export type { CopyElementProps } from './CopyElement';
+export { InteractiveLines } from './InteractiveLines';
+export type { InteractiveLinesProps } from './InteractiveLines';
+export { VisualGuides } from './VisualGuides';
+export type { VisualGuidesProps, ProximityLine } from './VisualGuides';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/BannerRenderer/components/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAEhE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/BannerRenderer/components/index.js

@@ -0,0 +1,14 @@
+"use strict";
+/**
+ * BannerRenderer sub-components barrel file
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VisualGuides = exports.InteractiveLines = exports.CopyElement = exports.LogoElement = void 0;
+var LogoElement_1 = require("./LogoElement");
+Object.defineProperty(exports, "LogoElement", { enumerable: true, get: function () { return LogoElement_1.LogoElement; } });
+var CopyElement_1 = require("./CopyElement");
+Object.defineProperty(exports, "CopyElement", { enumerable: true, get: function () { return CopyElement_1.CopyElement; } });
+var InteractiveLines_1 = require("./InteractiveLines");
+Object.defineProperty(exports, "InteractiveLines", { enumerable: true, get: function () { return InteractiveLines_1.InteractiveLines; } });
+var VisualGuides_1 = require("./VisualGuides");
+Object.defineProperty(exports, "VisualGuides", { enumerable: true, get: function () { return VisualGuides_1.VisualGuides; } });

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

@@ -0,0 +1,15 @@
+/**
+ * BannerRenderer constants
+ */
+/**
+ * Auto-positioning proximity threshold (in unscaled pixels)
+ * Controls both visual green line display and auto-positioning link creation
+ */
+export declare const PROXIMITY_THRESHOLD_PX = 170;
+/**
+ * Injects the marching ants animation keyframe into the document head.
+ * This animation is used for the dotted line effect in auto-positioning mode.
+ * Safe to call multiple times - will only inject once.
+ */
+export declare function injectMarchingAntsAnimation(): void;
+//# sourceMappingURL=constants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/BannerRenderer/constants.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;;GAGG;AACH,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C;;;;GAIG;AACH,wBAAgB,2BAA2B,IAAI,IAAI,CAgBlD"}

package/dist/components/BannerRenderer/constants.js

@@ -0,0 +1,36 @@
+"use strict";
+/**
+ * BannerRenderer constants
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PROXIMITY_THRESHOLD_PX = void 0;
+exports.injectMarchingAntsAnimation = injectMarchingAntsAnimation;
+/**
+ * Auto-positioning proximity threshold (in unscaled pixels)
+ * Controls both visual green line display and auto-positioning link creation
+ */
+exports.PROXIMITY_THRESHOLD_PX = 170;
+/**
+ * Injects the marching ants animation keyframe into the document head.
+ * This animation is used for the dotted line effect in auto-positioning mode.
+ * Safe to call multiple times - will only inject once.
+ */
+function injectMarchingAntsAnimation() {
+    if (typeof document !== 'undefined') {
+        const styleId = 'marching-ants-keyframe';
+        if (!document.getElementById(styleId)) {
+            const style = document.createElement('style');
+            style.id = styleId;
+            style.textContent = `
+        @keyframes marching-ants {
+          to {
+            stroke-dashoffset: -20;
+          }
+        }
+      `;
+            document.head.appendChild(style);
+        }
+    }
+}
+// Auto-inject on module load (maintains existing behavior)
+injectMarchingAntsAnimation();

package/dist/components/BannerRenderer/hooks/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * BannerRenderer hooks barrel file
+ */
+export { useElementRefs } from './useElementRefs';
+export type { UseElementRefsParams, UseElementRefsReturn } from './useElementRefs';
+export { useDragSnap } from './useDragSnap';
+export type { UseDragSnapParams, UseDragSnapReturn } from './useDragSnap';
+export { useLineDrawing } from './useLineDrawing';
+export type { UseLineDrawingParams, UseLineDrawingReturn } from './useLineDrawing';
+export { useProximityDetection } from './useProximityDetection';
+export type { UseProximityDetectionParams, UseProximityDetectionReturn, ProximityLine } from './useProximityDetection';
+export { useAutoPositioning } from './useAutoPositioning';
+export type { UseAutoPositioningParams, UseAutoPositioningReturn, AutoPositioningConfig, AutoPositioningLink, AutoPositioningOverride, GeneratedAutoPositioningConfig, SubstyleConfig, } from './useAutoPositioning';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/BannerRenderer/hooks/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAEnF,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAE1E,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAEnF,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EAAE,2BAA2B,EAAE,2BAA2B,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAEvH,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EACV,wBAAwB,EACxB,wBAAwB,EACxB,qBAAqB,EACrB,mBAAmB,EACnB,uBAAuB,EACvB,8BAA8B,EAC9B,cAAc,GACf,MAAM,sBAAsB,CAAC"}

package/dist/components/BannerRenderer/hooks/index.js

@@ -0,0 +1,16 @@
+"use strict";
+/**
+ * BannerRenderer hooks barrel file
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAutoPositioning = exports.useProximityDetection = exports.useLineDrawing = exports.useDragSnap = exports.useElementRefs = void 0;
+var useElementRefs_1 = require("./useElementRefs");
+Object.defineProperty(exports, "useElementRefs", { enumerable: true, get: function () { return useElementRefs_1.useElementRefs; } });
+var useDragSnap_1 = require("./useDragSnap");
+Object.defineProperty(exports, "useDragSnap", { enumerable: true, get: function () { return useDragSnap_1.useDragSnap; } });
+var useLineDrawing_1 = require("./useLineDrawing");
+Object.defineProperty(exports, "useLineDrawing", { enumerable: true, get: function () { return useLineDrawing_1.useLineDrawing; } });
+var useProximityDetection_1 = require("./useProximityDetection");
+Object.defineProperty(exports, "useProximityDetection", { enumerable: true, get: function () { return useProximityDetection_1.useProximityDetection; } });
+var useAutoPositioning_1 = require("./useAutoPositioning");
+Object.defineProperty(exports, "useAutoPositioning", { enumerable: true, get: function () { return useAutoPositioning_1.useAutoPositioning; } });

package/dist/components/BannerRenderer/hooks/useAutoPositioning/debugPositions.d.ts

@@ -0,0 +1,30 @@
+/**
+ * debugPositions - Extracts and calculates auto-positioning configuration from completed lines
+ *
+ * This function analyzes the completed proximity lines and generates an AutoPositioningConfig
+ * that can be saved and reused to recreate the same positioning in other contexts.
+ */
+import type { CopyConfig } from '../../../../types';
+import type { SubstyleConfig, AutoPositioningConfig } from '../../../styles/types/substyleTypes';
+export interface GeneratedAutoPositioningConfig {
+    autoPositioningConfig: AutoPositioningConfig;
+    gapRem: number;
+}
+export interface DebugPositionsParams {
+    completedLines: Map<string, string>;
+    copies: CopyConfig[];
+    logoTranslateX: number;
+    logoTranslateY: number;
+    logoWidth?: number;
+    config: SubstyleConfig;
+    sizeMultiplier: number;
+    logoRef: React.RefObject<HTMLDivElement | null>;
+    copyRefs: React.MutableRefObject<(HTMLDivElement | null)[]>;
+    bannerContainerRef: React.RefObject<HTMLDivElement | null>;
+}
+/**
+ * Creates the debugPositions function with the given parameters
+ * Returns a function that can be called to generate the auto-positioning config
+ */
+export declare function createDebugPositions(params: DebugPositionsParams): () => GeneratedAutoPositioningConfig | null;
+//# sourceMappingURL=debugPositions.d.ts.map

package/dist/components/BannerRenderer/hooks/useAutoPositioning/debugPositions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"debugPositions.d.ts","sourceRoot":"","sources":["../../../../../src/components/BannerRenderer/hooks/useAutoPositioning/debugPositions.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,qBAAqB,EAAuB,MAAM,qCAAqC,CAAC;AAGtH,MAAM,WAAW,8BAA8B;IAC7C,qBAAqB,EAAE,qBAAqB,CAAC;IAC7C,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,oBAAoB;IACnC,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,cAAc,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,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;CAC5D;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,oBAAoB,GAAG,MAAM,8BAA8B,GAAG,IAAI,CAoG9G"}