zuljaman-banner-components 1.0.23 → 1.0.25

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

@@ -0,0 +1,491 @@
+"use strict";
+/**
+ * useProximityDetection hook
+ * Handles auto-detection of proximity chains and visual proximity indicators
+ */
+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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useProximityDetection = useProximityDetection;
+const react_1 = __importStar(require("react"));
+const constants_1 = require("../constants");
+const utils_1 = require("../utils");
+/**
+ * Hook that handles auto-detection of proximity chains and visual proximity line indicators.
+ */
+function useProximityDetection({ logoRef, copyRefs, bannerContainerRef, copies, sizeMultiplier, creationMode, manualLines, completedLines, setCompletedLines, setLineGaps, getElementRef, }) {
+    // Proximity lines state (visual distance indicators)
+    const [proximityLines, setProximityLines] = (0, react_1.useState)([]);
+    // Auto-detect proximity and create lines
+    const detectProximityLines = react_1.default.useCallback((draggedElementId) => {
+        // DEBUG: Log entry point
+        // console.log('🔍 detectProximityLines called', { draggedElementId, creationMode, hasBannerRef: !!bannerContainerRef.current });
+        if (!creationMode || !bannerContainerRef.current) {
+            // console.log('🔍 detectProximityLines SKIPPED - creationMode:', creationMode, 'hasBannerRef:', !!bannerContainerRef.current);
+            return;
+        }
+        const proximityThreshold = constants_1.PROXIMITY_THRESHOLD_PX;
+        // Get all elements - PHASE 1: Use styleSlot format for IDs (copy-N)
+        const allElements = [
+            { id: 'logo', ref: logoRef.current },
+            ...copies.map((copy, index) => ({
+                // Use styleSlot if available, otherwise fall back to array index
+                id: `copy-${copy.styleSlot !== undefined ? copy.styleSlot : index}`,
+                ref: copyRefs.current[index],
+            })),
+        ];
+        // Convert draggedElementId from copy-{uuid} to copy-{styleSlot} format
+        let draggedStyleSlotId = draggedElementId;
+        if (draggedElementId.startsWith('copy-')) {
+            const suffix = draggedElementId.substring(5);
+            // If it's NOT a number, it's a UUID - convert to styleSlot format
+            if (!/^\d+$/.test(suffix)) {
+                const draggedCopy = copies.find(c => c.id === suffix);
+                if (draggedCopy) {
+                    const styleSlot = draggedCopy.styleSlot !== undefined ? draggedCopy.styleSlot : copies.indexOf(draggedCopy);
+                    draggedStyleSlotId = `copy-${styleSlot}`;
+                }
+            }
+        }
+        // console.log('🔍 Converted draggedElementId:', { original: draggedElementId, converted: draggedStyleSlotId });
+        // Step 1: Collect element bounds
+        const elementBounds = new Map();
+        allElements.forEach(({ id, ref }) => {
+            if (ref) {
+                elementBounds.set(id, ref.getBoundingClientRect());
+            }
+        });
+        // Step 2: Build proximity graph using utility function
+        const adjacencyGraph = (0, utils_1.buildProximityGraph)(elementBounds, proximityThreshold, sizeMultiplier);
+        // Step 3: Find connected clusters using Union-Find
+        const clusters = (0, utils_1.findConnectedClusters)(adjacencyGraph);
+        // Step 4: Create proximity map with intelligent chain extension
+        // When extending existing chains, the chain tail becomes SOURCE, new element becomes TARGET
+        const proximityMap = new Map();
+        // Helper: Get the tail of an existing chain (TARGET that is NOT a SOURCE)
+        const getChainTail = (completedLines) => {
+            if (completedLines.size === 0)
+                return null;
+            const targets = new Set(completedLines.values());
+            const sources = new Set(completedLines.keys());
+            for (const target of targets) {
+                if (!sources.has(target)) {
+                    return target; // TARGET that is NOT a SOURCE = chain tail
+                }
+            }
+            return null;
+        };
+        // Helper: Check if element is already part of the chain
+        const isInChain = (elementId, completedLines) => {
+            return completedLines.has(elementId) ||
+                Array.from(completedLines.values()).includes(elementId);
+        };
+        // clusters is Map<string, string[]> where key is root ID and value is array of element IDs
+        clusters.forEach((clusterElements) => {
+            var _a;
+            if (clusterElements.length < 2)
+                return;
+            const draggedIsInCluster = clusterElements.includes(draggedStyleSlotId);
+            if (draggedIsInCluster && clusterElements.length === 2) {
+                // For 2-element clusters with dragged element:
+                const otherElement = clusterElements.find(e => e !== draggedStyleSlotId);
+                if (otherElement) {
+                    // Use completedLines directly to determine link direction
+                    const chainTail = getChainTail(completedLines);
+                    const otherIsChainTail = otherElement === chainTail;
+                    const draggedIsChainTail = draggedStyleSlotId === chainTail;
+                    const draggedInChain = isInChain(draggedStyleSlotId, completedLines);
+                    const otherInChain = isInChain(otherElement, completedLines);
+                    // console.log('🔗 Chain analysis for link creation:', {
+                    //   chainTail,
+                    //   otherElement,
+                    //   draggedStyleSlotId,
+                    //   otherIsChainTail,
+                    //   draggedIsChainTail,
+                    //   draggedInChain,
+                    //   otherInChain,
+                    //   existingChain: Array.from(completedLines.entries()),
+                    // });
+                    let sourceId;
+                    let targetId;
+                    if (otherIsChainTail && !draggedInChain) {
+                        // Other element is chain tail, dragged is new - extend chain
+                        sourceId = otherElement;
+                        targetId = draggedStyleSlotId;
+                        // console.log('🔗 Extending chain: tail becomes source', `${sourceId} → ${targetId}`);
+                    }
+                    else if (draggedIsChainTail && !otherInChain) {
+                        // Dragged is chain tail, other is new - extend chain
+                        sourceId = draggedStyleSlotId;
+                        targetId = otherElement;
+                        // console.log('🔗 Extending chain: dragged tail becomes source', `${sourceId} → ${targetId}`);
+                    }
+                    else {
+                        // Default: static element = ANCHOR, dragged = TARGET
+                        sourceId = otherElement;
+                        targetId = draggedStyleSlotId;
+                        // console.log('🔗 Default link creation (dragged as TARGET):', `${sourceId} → ${targetId}`);
+                    }
+                    proximityMap.set(sourceId, targetId);
+                }
+            }
+            else {
+                // Clusters of 3+ elements or dragged not in cluster
+                // IMPORTANT: Respect existing chains and only extend them
+                // 1. Find which elements are already in the chain
+                const elementsInChain = clusterElements.filter(e => isInChain(e, completedLines));
+                const elementsNotInChain = clusterElements.filter(e => !isInChain(e, completedLines));
+                // console.log('🔗 Large cluster analysis:', {
+                //   clusterSize: clusterElements.length,
+                //   elementsInChain,
+                //   elementsNotInChain,
+                //   chainTail: getChainTail(completedLines),
+                //   draggedStyleSlotId,
+                // });
+                // 2. If there are new elements (not in chain) and a chain exists
+                if (elementsNotInChain.length > 0 && completedLines.size > 0) {
+                    const chainTail = getChainTail(completedLines);
+                    if (chainTail && clusterElements.includes(chainTail)) {
+                        // The chain tail is in this cluster
+                        // CRITICAL: chainTail is the element that is TARGET but NOT SOURCE
+                        // It's already the tail, so it CAN be a source for the next element
+                        // Only extend if the dragged element is new (not already in chain)
+                        if (elementsNotInChain.includes(draggedStyleSlotId)) {
+                            proximityMap.set(chainTail, draggedStyleSlotId);
+                            // console.log('🔗 Extending chain from tail:', `${chainTail} → ${draggedStyleSlotId}`);
+                        }
+                    }
+                }
+                else if (completedLines.size === 0) {
+                    // No existing chain - detect edge and order accordingly
+                    const bannerBounds = (_a = bannerContainerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+                    if (bannerBounds) {
+                        // Calculate cluster's center Y to determine which edge it's closer to
+                        let clusterCenterY = 0;
+                        let validElements = 0;
+                        clusterElements.forEach(e => {
+                            const bounds = elementBounds.get(e);
+                            if (bounds) {
+                                clusterCenterY += bounds.top + bounds.height / 2;
+                                validElements++;
+                            }
+                        });
+                        clusterCenterY = validElements > 0 ? clusterCenterY / validElements : 0;
+                        const bannerCenterY = bannerBounds.top + bannerBounds.height / 2;
+                        const isCloserToBottom = clusterCenterY > bannerCenterY;
+                        // Sort elements by Y position
+                        const sorted = [...clusterElements].sort((a, b) => {
+                            const boundsA = elementBounds.get(a);
+                            const boundsB = elementBounds.get(b);
+                            if (!boundsA || !boundsB)
+                                return 0;
+                            const centerA = boundsA.top + boundsA.height / 2;
+                            const centerB = boundsB.top + boundsB.height / 2;
+                            // If closer to bottom: sort descending (highest Y = ANCHOR first)
+                            // If closer to top: sort ascending (lowest Y = ANCHOR first)
+                            return isCloserToBottom
+                                ? centerB - centerA // bottom anchor: highest Y first
+                                : centerA - centerB; // top anchor: lowest Y first
+                        });
+                        // Create chain: ANCHOR → TARGET1 → TARGET2 → ...
+                        for (let i = 0; i < sorted.length - 1; i++) {
+                            proximityMap.set(sorted[i], sorted[i + 1]);
+                        }
+                        // console.log('🔗 Y-ordering for new chain:', {
+                        //   isCloserToBottom,
+                        //   sorted,
+                        //   chain: sorted.slice(0, -1).map((s, i) => `${s} → ${sorted[i + 1]}`).join(', ')
+                        // });
+                    }
+                }
+                // If all elements are already in chain, don't create new links
+            }
+        });
+        // DEBUG: Log proximity detection results
+        // console.log('🔍 Proximity detection results:', {
+        //   elementCount: elementBounds.size,
+        //   clusterCount: clusters.size,
+        //   proximityMapSize: proximityMap.size,
+        //   proximityMapEntries: Array.from(proximityMap.entries()),
+        //   draggedStyleSlotId,
+        // });
+        // Update lines based on proximity
+        setCompletedLines(prev => {
+            const newMap = new Map(prev);
+            // CRITICAL FIX: If proximityMap is empty (no drag active), keep all existing links
+            // Links should only be removed when there's actual proximity detection happening
+            if (proximityMap.size === 0) {
+                return prev; // Keep all existing links unchanged
+            }
+            // First, remove auto-proximity lines that are no longer valid
+            // Only remove if: (1) NOT a manual line AND (2) elements are no longer in proximity
+            let deletedLinks = [];
+            prev.forEach((targetId, sourceId) => {
+                const isManualLine = manualLines.has(`${sourceId}->${targetId}`);
+                // CRITICAL: Check if proximityMap wants to INVERT this link
+                // If so, DON'T remove it - keep the original direction
+                const inverseInProximityMap = proximityMap.get(targetId) === sourceId;
+                // CRITICAL FIX: Never delete links from completedLines unless proximityMap explicitly replaces them
+                // A link should ONLY be deleted if:
+                // 1. Source exists in proximityMap but points to a DIFFERENT target (being replaced)
+                // 2. AND it's not a manual line
+                // 3. AND proximityMap is not inverting it
+                const sourceHasNewTarget = proximityMap.has(sourceId) &&
+                    proximityMap.get(sourceId) !== targetId;
+                // Only delete if source is being actively replaced with a different target
+                if (!isManualLine && !inverseInProximityMap && sourceHasNewTarget) {
+                    deletedLinks.push(`${sourceId}→${targetId}`);
+                    newMap.delete(sourceId);
+                }
+            });
+            // Only log if links were deleted
+            // if (deletedLinks.length > 0) {
+            //   console.log('🗑️ [THIRD ELEMENT] DELETED links', {
+            //     deleted: deletedLinks,
+            //     prevLinks: Array.from(prev.entries()).map(([s,t]) => `${s}→${t}`),
+            //     remainingLinks: Array.from(newMap.entries()).map(([s,t]) => `${s}→${t}`),
+            //     proximityLinks: Array.from(proximityMap.entries()).map(([s,t]) => `${s}→${t}`),
+            //   });
+            // }
+            // Then, add auto-proximity lines
+            const newLinksToAdd = [];
+            proximityMap.forEach((targetId, sourceId) => {
+                const currentTarget = prev.get(sourceId);
+                const isManualLine = currentTarget && manualLines.has(`${sourceId}->${currentTarget}`);
+                // Don't override manual lines
+                if (isManualLine) {
+                    return;
+                }
+                // CRITICAL: Check if there's ALREADY a link in the OPPOSITE direction in newMap
+                // This prevents direction inversion when one element moves above/below another
+                if (newMap.get(targetId) === sourceId) {
+                    // Link already exists in opposite direction - keep it, don't add inverted
+                    return;
+                }
+                // CRITICAL: Check if this source already has a target (preserve existing links)
+                if (newMap.has(sourceId)) {
+                    // Source already connected to something - don't change it
+                    return;
+                }
+                // Add new link
+                newMap.set(sourceId, targetId);
+                newLinksToAdd.push({ sourceId, targetId });
+            });
+            // Only log if new links were added
+            // if (newLinksToAdd.length > 0) {
+            //   console.log('➕ [THIRD ELEMENT] ADDED new links', {
+            //     added: newLinksToAdd.map(({sourceId, targetId}) => `${sourceId}→${targetId}`),
+            //     finalLinks: Array.from(newMap.entries()).map(([s,t]) => `${s}→${t}`)
+            //   });
+            // }
+            // Calculate and store gap for new links
+            if (newLinksToAdd.length > 0) {
+                setLineGaps(prevGaps => {
+                    const newGaps = new Map(prevGaps);
+                    newLinksToAdd.forEach(({ sourceId, targetId }) => {
+                        const lineKey = `${sourceId}->${targetId}`;
+                        // Only calculate gap if it doesn't already exist
+                        if (!newGaps.has(lineKey)) {
+                            const anchorBounds = elementBounds.get(sourceId);
+                            const targetBounds = elementBounds.get(targetId);
+                            if (anchorBounds && targetBounds) {
+                                // Calculate gap based on center-to-center distance minus half heights
+                                // This gives the actual edge-to-edge gap regardless of overlap
+                                const anchorCenterY = anchorBounds.top + anchorBounds.height / 2;
+                                const targetCenterY = targetBounds.top + targetBounds.height / 2;
+                                const anchorHalfHeight = anchorBounds.height / 2;
+                                const targetHalfHeight = targetBounds.height / 2;
+                                // Distance between centers minus the sum of half-heights = edge gap
+                                const centerDistance = Math.abs(targetCenterY - anchorCenterY);
+                                const rawGapPixels = (centerDistance - anchorHalfHeight - targetHalfHeight) / sizeMultiplier;
+                                // If gap is negative (overlapping) or very small, use minimum gap
+                                const MIN_GAP_PIXELS = 8; // 0.5rem minimum
+                                const effectiveGapPixels = Math.max(rawGapPixels, MIN_GAP_PIXELS);
+                                const gapRem = effectiveGapPixels / 16; // Convert to rem
+                                newGaps.set(lineKey, gapRem);
+                                console.log(`📏 Stored gap for ${lineKey}: ${gapRem.toFixed(2)}rem (raw: ${rawGapPixels.toFixed(0)}px, effective: ${effectiveGapPixels.toFixed(0)}px)`);
+                            }
+                        }
+                    });
+                    return newGaps;
+                });
+            }
+            // CRITICAL FIX: Always return new Map to ensure useEffect triggers
+            // This is necessary for the reset/preserve logic to run when new lines are added
+            return newMap;
+        });
+    }, [logoRef, copyRefs, bannerContainerRef, copies, manualLines, completedLines, creationMode, sizeMultiplier, setCompletedLines, setLineGaps]);
+    // Calculate proximity lines (visual distance indicators)
+    const calculateProximityLines = react_1.default.useCallback((draggedElementId) => {
+        if (!bannerContainerRef.current)
+            return;
+        const proximityThreshold = constants_1.PROXIMITY_THRESHOLD_PX;
+        // Helper to get element ref (PHASE 1: 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); // Remove 'copy-' prefix
+                // Check if it's copy-N format (styleSlot)
+                if (/^\d+$/.test(suffix)) {
+                    const styleSlotIndex = parseInt(suffix, 10);
+                    // Find copy by styleSlot first, then fallback to array index
+                    const copy = copies.find(c => c.styleSlot === styleSlotIndex);
+                    if (copy) {
+                        const copyIndex = copies.indexOf(copy);
+                        return copyRefs.current[copyIndex];
+                    }
+                    // Fallback to array index
+                    if (styleSlotIndex < copies.length) {
+                        return copyRefs.current[styleSlotIndex];
+                    }
+                }
+                else {
+                    // It's a UUID format - find by id
+                    const copyIndex = copies.findIndex(c => c.id === suffix);
+                    if (copyIndex !== -1) {
+                        return copyRefs.current[copyIndex];
+                    }
+                }
+            }
+            return null;
+        };
+        // Helper to get element center position
+        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
+        const getBorderPoint = (elementId, fromX, fromY) => {
+            const ref = getElementRef(elementId);
+            if (!ref || !bannerContainerRef.current)
+                return null;
+            const elementBounds = ref.getBoundingClientRect();
+            const bannerBounds = bannerContainerRef.current.getBoundingClientRect();
+            const width = elementBounds.width / sizeMultiplier;
+            const height = elementBounds.height / sizeMultiplier;
+            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;
+            const dx = centerX - fromX;
+            const dy = centerY - fromY;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            if (distance === 0)
+                return { x: centerX, y: centerY };
+            const dirX = dx / distance;
+            const dirY = dy / distance;
+            const halfW = width / 2;
+            const halfH = height / 2;
+            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;
+            const t = Math.min(tRight, tLeft, tBottom, tTop);
+            return {
+                x: centerX - dirX * t,
+                y: centerY - dirY * t,
+            };
+        };
+        // Get dragged element bounds
+        const draggedRef = getElementRef(draggedElementId);
+        if (!draggedRef)
+            return;
+        const draggedBounds = draggedRef.getBoundingClientRect();
+        // Check proximity with all other elements
+        const allElements = [
+            { id: 'logo' },
+            ...copies.map((copy) => ({ id: `copy-${copy.id}` })),
+        ];
+        const newProximityLines = [];
+        allElements.forEach(({ id }) => {
+            if (id === draggedElementId)
+                return;
+            const otherRef = getElementRef(id);
+            if (!otherRef)
+                return;
+            const otherBounds = otherRef.getBoundingClientRect();
+            // Calculate minimum distance between two rectangles (edge-to-edge)
+            // This is the same logic as detectProximityLines for green lines
+            const dx = Math.max(draggedBounds.left - otherBounds.right, otherBounds.left - draggedBounds.right, 0);
+            const dy = Math.max(draggedBounds.top - otherBounds.bottom, otherBounds.top - draggedBounds.bottom, 0);
+            const edgeDistance = Math.sqrt(dx * dx + dy * dy);
+            // Convert to unscaled pixels (same as detectProximityLines)
+            const edgeDistanceUnscaled = edgeDistance / sizeMultiplier;
+            // If within threshold, add proximity line
+            // But don't show if elements are touching (edgeDistanceUnscaled = 0)
+            if (edgeDistanceUnscaled <= proximityThreshold && edgeDistanceUnscaled > 0) {
+                // Get centers for border point calculation
+                const draggedCenter = getElementCenter(draggedElementId);
+                const otherCenter = getElementCenter(id);
+                if (draggedCenter && otherCenter) {
+                    const fromPos = getBorderPoint(draggedElementId, otherCenter.x, otherCenter.y);
+                    const toPos = getBorderPoint(id, draggedCenter.x, draggedCenter.y);
+                    if (fromPos && toPos) {
+                        // Use edge-to-edge distance for display (same as green line threshold)
+                        const distance = Math.round(edgeDistanceUnscaled);
+                        newProximityLines.push({
+                            fromId: draggedElementId,
+                            toId: id,
+                            distance: distance,
+                            fromPos,
+                            toPos,
+                        });
+                    }
+                }
+            }
+        });
+        setProximityLines(newProximityLines);
+    }, [logoRef, copyRefs, bannerContainerRef, copies, sizeMultiplier, getElementRef]);
+    return {
+        proximityLines,
+        setProximityLines,
+        detectProximityLines,
+        calculateProximityLines,
+    };
+}

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

@@ -0,0 +1,6 @@
+/**
+ * BannerRenderer module exports
+ */
+export { BannerRenderer } from './BannerRenderer';
+export type { BannerRendererProps } from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/BannerRenderer/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/BannerRenderer/index.js

@@ -0,0 +1,8 @@
+"use strict";
+/**
+ * BannerRenderer module exports
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BannerRenderer = void 0;
+var BannerRenderer_1 = require("./BannerRenderer");
+Object.defineProperty(exports, "BannerRenderer", { enumerable: true, get: function () { return BannerRenderer_1.BannerRenderer; } });

package/dist/components/{BannerRenderer.d.ts → BannerRenderer/types.d.ts}

@@ -1,10 +1,12 @@
 /**
- * BannerRenderer component - Generic platform-agnostic banner renderer
- * Unified component that handles all banner styles based on configuration
+ * BannerRenderer types and interfaces
  */
-import React from "react";
-import type { ImageProps, CopyConfig } from "../types";
-interface BannerRendererProps {
+import type { ImageProps, CopyConfig } from "../../types";
+import type { AutoPositioningConfig, CopyElementConfig } from "../styles/types/substyleTypes";
+/**
+ * Props for the BannerRenderer component
+ */
+export interface BannerRendererProps {
     bannerStyle: number;
     copies?: CopyConfig[];
     bannerSubstyle?: number;
@@ -30,6 +32,21 @@ interface BannerRendererProps {
     noiseIntensity?: number;
     fontFamily?: string;
     draggableMode?: boolean;
+    creationMode?: boolean;
+    linkingModeActive?: boolean;
+    onDebugPositions?: () => void;
+    onApplyAutoPositioning?: (config: {
+        config: AutoPositioningConfig;
+        gapRem: number;
+        copies?: Array<{
+            x: number;
+            y: number;
+            width?: number;
+            alignment?: string;
+        }>;
+    }) => void;
+    onConnectionsDeleted?: () => void;
+    onLineGapsChange?: (lineGaps: Record<string, number>) => void;
     onLogoPositionChange?: (position: {
         x: number;
         y: number;
@@ -42,7 +59,11 @@ interface BannerRendererProps {
     }) => void;
     onCopyRotationChange?: (copyIndex: number, rotation: number) => void;
     onCopyWidthChange?: (copyIndex: number, width: number) => void;
+    autoPositioningOverride?: {
+        enabled: boolean;
+        config?: AutoPositioningConfig;
+        gapRem?: number;
+        copies?: CopyElementConfig[];
+    };
 }
-export declare const BannerRenderer: React.FC<BannerRendererProps>;
-export {};
-//# sourceMappingURL=BannerRenderer.d.ts.map
+//# sourceMappingURL=types.d.ts.map

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

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

package/dist/components/BannerRenderer/types.js

@@ -0,0 +1,5 @@
+"use strict";
+/**
+ * BannerRenderer types and interfaces
+ */
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/BannerRenderer/utils/alignmentUtils.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Alignment utility functions for BannerRenderer
+ * Pure functions for calculating alignment guides between elements
+ */
+import type { RelativeBounds } from './snapUtils';
+/**
+ * Represents an alignment line between two elements
+ */
+export interface AlignmentLine {
+    x?: number;
+    y?: number;
+    x1?: number;
+    x2?: number;
+    y1?: number;
+    y2?: number;
+    type: 'left' | 'center' | 'right' | 'top' | 'middle' | 'bottom';
+    orientation: 'vertical' | 'horizontal';
+}
+/**
+ * Calculate alignment lines between a dragged element and another element.
+ * Uses relative bounds (relative to container center).
+ *
+ * @param dragged - Relative bounds of the dragged element
+ * @param other - Relative bounds of the other element
+ * @param tolerance - Alignment tolerance in pixels (default: 0.5)
+ * @returns Array of alignment lines
+ */
+export declare function calculateAlignmentLinesBetween(dragged: RelativeBounds, other: RelativeBounds, tolerance?: number): AlignmentLine[];
+/**
+ * Calculate all alignment lines between a dragged element and multiple other elements.
+ *
+ * @param dragged - Relative bounds of the dragged element
+ * @param others - Array of relative bounds of other elements
+ * @param tolerance - Alignment tolerance in pixels (default: 0.5)
+ * @returns Array of all alignment lines
+ */
+export declare function calculateAllAlignmentLines(dragged: RelativeBounds, others: RelativeBounds[], tolerance?: number): AlignmentLine[];
+//# sourceMappingURL=alignmentUtils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alignmentUtils.d.ts","sourceRoot":"","sources":["../../../../src/components/BannerRenderer/utils/alignmentUtils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAChE,WAAW,EAAE,UAAU,GAAG,YAAY,CAAC;CACxC;AAED;;;;;;;;GAQG;AACH,wBAAgB,8BAA8B,CAC5C,OAAO,EAAE,cAAc,EACvB,KAAK,EAAE,cAAc,EACrB,SAAS,SAAM,GACd,aAAa,EAAE,CAoHjB;AAED;;;;;;;GAOG;AACH,wBAAgB,0BAA0B,CACxC,OAAO,EAAE,cAAc,EACvB,MAAM,EAAE,cAAc,EAAE,EACxB,SAAS,SAAM,GACd,aAAa,EAAE,CAQjB"}