zuljaman-banner-components 1.0.23 → 1.0.24

package/dist/components/BannerRenderer/hooks/useAutoPositioning/useHeightCompensation.js

@@ -0,0 +1,178 @@
+"use strict";
+/**
+ * useHeightCompensation hook
+ *
+ * Handles height compensation for anchor and target elements when their text changes.
+ * Maintains edge-locking by adjusting positions when element heights change.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHeightCompensation = useHeightCompensation;
+const react_1 = require("react");
+const positioningUtils_1 = require("../../../styles/utils/positioningUtils");
+/**
+ * Hook that manages height compensation for anchor and target elements.
+ *
+ * Responsibilities:
+ * - Adjust anchor position when its height changes (edge-locking)
+ * - Adjust target positions when anchor grows
+ * - Adjust target positions when they grow (self-compensation)
+ * - Move subsequent elements in chain when any element grows
+ */
+function useHeightCompensation({ anchorEdgeConfig, setAnchorEdgeConfig, targetHeights, setTargetHeights, activeLinks, hasActiveLinks, copies, sizeMultiplier, creationMode, logoRef, copyRefs, bannerContainerRef, derivedAutoConfig, config, lineGaps, onCopyPositionChange, }) {
+    // Memoize ANCHOR text to trigger effect when it changes
+    const anchorText = (0, react_1.useMemo)(() => {
+        if (!anchorEdgeConfig)
+            return '';
+        const { anchorId } = anchorEdgeConfig;
+        if (anchorId.startsWith('copy-')) {
+            const styleSlot = parseInt(anchorId.replace('copy-', ''), 10);
+            const copy = copies.find(c => c.styleSlot === styleSlot) || copies[styleSlot];
+            return (copy === null || copy === void 0 ? void 0 : copy.text) || '';
+        }
+        return '';
+    }, [anchorEdgeConfig, copies]);
+    // Adjust ANCHOR position when its height changes to maintain gap with edge
+    (0, react_1.useLayoutEffect)(() => {
+        if (!anchorEdgeConfig || !bannerContainerRef.current || !hasActiveLinks) {
+            return;
+        }
+        const frameId = requestAnimationFrame(() => {
+            const { anchorId, edge, initialHeight } = anchorEdgeConfig;
+            const anchorRef = (0, positioningUtils_1.getElementRef)(anchorId, { logo: logoRef.current, copies: copyRefs.current }, copies);
+            if (!anchorRef) {
+                return;
+            }
+            const currentHeight = anchorRef.getBoundingClientRect().height / sizeMultiplier;
+            const heightDelta = currentHeight - initialHeight;
+            if (Math.abs(heightDelta) < 0.5) {
+                return;
+            }
+            // Calculate compensations using utility functions
+            const anchorCompensation = (0, positioningUtils_1.calculateAnchorHeightCompensation)(edge, heightDelta);
+            const targetCompensation = (0, positioningUtils_1.calculateTargetCompensationForAnchorGrowth)(edge, heightDelta);
+            // Adjust ANCHOR position
+            if (anchorId.startsWith('copy-')) {
+                const styleSlot = parseInt(anchorId.replace('copy-', ''), 10);
+                const copyIndex = copies.findIndex(c => c.styleSlot === styleSlot);
+                const actualIndex = copyIndex !== -1 ? copyIndex : styleSlot;
+                if (actualIndex >= 0 && actualIndex < copies.length && onCopyPositionChange) {
+                    const copy = copies[actualIndex];
+                    const currentTranslateY = copy.translateY || 0;
+                    const newTranslateY = currentTranslateY + anchorCompensation;
+                    onCopyPositionChange(actualIndex, {
+                        x: copy.translateX || 0,
+                        y: newTranslateY,
+                    });
+                }
+            }
+            // Adjust all TARGET positions to maintain gap with anchor
+            Object.keys(targetHeights).forEach(targetId => {
+                if (targetId.startsWith('copy-') && onCopyPositionChange) {
+                    const styleSlot = parseInt(targetId.replace('copy-', ''), 10);
+                    const copyIndex = copies.findIndex(c => c.styleSlot === styleSlot);
+                    const actualIndex = copyIndex !== -1 ? copyIndex : styleSlot;
+                    if (actualIndex >= 0 && actualIndex < copies.length) {
+                        const copy = copies[actualIndex];
+                        const currentTranslateY = copy.translateY || 0;
+                        const newTranslateY = currentTranslateY + targetCompensation;
+                        onCopyPositionChange(actualIndex, {
+                            x: copy.translateX || 0,
+                            y: newTranslateY,
+                        });
+                    }
+                }
+            });
+            // Update the initial height in config so we track from new baseline
+            setAnchorEdgeConfig(prev => prev ? { ...prev, initialHeight: currentHeight } : null);
+        });
+        return () => cancelAnimationFrame(frameId);
+    }, [anchorEdgeConfig, anchorText, sizeMultiplier, creationMode, onCopyPositionChange, logoRef, copyRefs, copies, targetHeights, bannerContainerRef, hasActiveLinks, setAnchorEdgeConfig]);
+    // Memoize TARGET texts to trigger effect when they change
+    const targetTexts = (0, react_1.useMemo)(() => {
+        if (!anchorEdgeConfig || Object.keys(targetHeights).length === 0)
+            return '';
+        const texts = [];
+        Object.keys(targetHeights).forEach(targetId => {
+            if (targetId.startsWith('copy-')) {
+                const styleSlot = parseInt(targetId.replace('copy-', ''), 10);
+                const copy = copies.find(c => c.styleSlot === styleSlot) || copies[styleSlot];
+                if (copy) {
+                    texts.push(`${targetId}:${copy.text}`);
+                }
+            }
+        });
+        return texts.join('|');
+    }, [anchorEdgeConfig, targetHeights, copies]);
+    // Adjust TARGET positions when their height changes
+    // TARGETs grow in the same direction as ANCHOR (inherit edge from anchor)
+    // Also move subsequent elements in the chain to maintain gaps
+    (0, react_1.useLayoutEffect)(() => {
+        if (!anchorEdgeConfig || !bannerContainerRef.current || !hasActiveLinks || Object.keys(targetHeights).length === 0) {
+            return;
+        }
+        const frameId = requestAnimationFrame(() => {
+            const { edge } = anchorEdgeConfig;
+            let hasUpdates = false;
+            const newTargetHeights = { ...targetHeights };
+            // Build links array from activeLinks for chain traversal
+            const links = [];
+            activeLinks.forEach((toId, fromId) => {
+                var _a, _b, _c;
+                const configLink = (_a = derivedAutoConfig === null || derivedAutoConfig === void 0 ? void 0 : derivedAutoConfig.links) === null || _a === void 0 ? void 0 : _a.find(l => l.fromElement === fromId && l.toElement === toId);
+                const gapRem = (_c = (_b = lineGaps.get(`${fromId}->${toId}`)) !== null && _b !== void 0 ? _b : configLink === null || configLink === void 0 ? void 0 : configLink.gapRem) !== null && _c !== void 0 ? _c : config.gapRem;
+                links.push({ from: fromId, to: toId, gapRem });
+            });
+            Object.entries(targetHeights).forEach(([targetId, initialHeight]) => {
+                const targetRef = (0, positioningUtils_1.getElementRef)(targetId, { logo: logoRef.current, copies: copyRefs.current }, copies);
+                if (!targetRef)
+                    return;
+                const currentHeight = targetRef.getBoundingClientRect().height / sizeMultiplier;
+                const heightDelta = currentHeight - initialHeight;
+                if (Math.abs(heightDelta) < 0.5)
+                    return;
+                // Calculate compensations using utility functions
+                const selfCompensation = (0, positioningUtils_1.calculateTargetSelfCompensation)(edge, heightDelta);
+                const subsequentCompensation = (0, positioningUtils_1.calculateSubsequentCompensation)(edge, heightDelta);
+                // Adjust this target's position
+                if (targetId.startsWith('copy-') && onCopyPositionChange) {
+                    const styleSlot = parseInt(targetId.replace('copy-', ''), 10);
+                    const copyIndex = copies.findIndex(c => c.styleSlot === styleSlot);
+                    const actualIndex = copyIndex !== -1 ? copyIndex : styleSlot;
+                    if (actualIndex >= 0 && actualIndex < copies.length) {
+                        const copy = copies[actualIndex];
+                        const currentTranslateY = copy.translateY || 0;
+                        const newTranslateY = currentTranslateY + selfCompensation;
+                        onCopyPositionChange(actualIndex, {
+                            x: copy.translateX || 0,
+                            y: newTranslateY,
+                        });
+                        newTargetHeights[targetId] = currentHeight;
+                        hasUpdates = true;
+                    }
+                }
+                // Move all subsequent elements in the chain
+                const subsequentElements = (0, positioningUtils_1.getSubsequentElementsInChain)(targetId, links);
+                subsequentElements.forEach(subsequentId => {
+                    if (subsequentId.startsWith('copy-') && onCopyPositionChange) {
+                        const styleSlot = parseInt(subsequentId.replace('copy-', ''), 10);
+                        const copyIndex = copies.findIndex(c => c.styleSlot === styleSlot);
+                        const actualIndex = copyIndex !== -1 ? copyIndex : styleSlot;
+                        if (actualIndex >= 0 && actualIndex < copies.length) {
+                            const copy = copies[actualIndex];
+                            const currentTranslateY = copy.translateY || 0;
+                            const newTranslateY = currentTranslateY + subsequentCompensation;
+                            onCopyPositionChange(actualIndex, {
+                                x: copy.translateX || 0,
+                                y: newTranslateY,
+                            });
+                        }
+                    }
+                });
+            });
+            if (hasUpdates) {
+                setTargetHeights(newTargetHeights);
+            }
+        });
+        return () => cancelAnimationFrame(frameId);
+    }, [anchorEdgeConfig, targetTexts, targetHeights, sizeMultiplier, creationMode, onCopyPositionChange, logoRef, copyRefs, copies, bannerContainerRef, activeLinks, hasActiveLinks, derivedAutoConfig, config.gapRem, lineGaps, setTargetHeights]);
+}

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

@@ -0,0 +1,8 @@
+/**
+ * useAutoPositioning hook
+ *
+ * Re-exports from the modular implementation.
+ * This file maintains backwards compatibility with existing imports.
+ */
+export { useAutoPositioning, type UseAutoPositioningParams, type UseAutoPositioningReturn, type AutoPositioningOverride, type SubstyleConfig, type AutoPositioningConfig, type AutoPositioningLink, type GeneratedAutoPositioningConfig, createDebugPositions, } from './useAutoPositioning/index';
+//# sourceMappingURL=useAutoPositioning.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAutoPositioning.d.ts","sourceRoot":"","sources":["../../../../src/components/BannerRenderer/hooks/useAutoPositioning.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EACL,kBAAkB,EAClB,KAAK,wBAAwB,EAC7B,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,EAC5B,KAAK,cAAc,EACnB,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EACxB,KAAK,8BAA8B,EACnC,oBAAoB,GACrB,MAAM,4BAA4B,CAAC"}

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

@@ -0,0 +1,12 @@
+"use strict";
+/**
+ * useAutoPositioning hook
+ *
+ * Re-exports from the modular implementation.
+ * This file maintains backwards compatibility with existing imports.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createDebugPositions = exports.useAutoPositioning = void 0;
+var index_1 = require("./useAutoPositioning/index");
+Object.defineProperty(exports, "useAutoPositioning", { enumerable: true, get: function () { return index_1.useAutoPositioning; } });
+Object.defineProperty(exports, "createDebugPositions", { enumerable: true, get: function () { return index_1.createDebugPositions; } });

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

@@ -0,0 +1,30 @@
+/**
+ * useDragSnap hook
+ * Handles snap positioning and alignment line calculations during drag operations
+ */
+import React from 'react';
+import type { CopyConfig } from '../../../types';
+import type { AlignmentLine } from '../utils';
+export interface UseDragSnapParams {
+    logoRef: React.RefObject<HTMLDivElement | null>;
+    copyRefs: React.MutableRefObject<(HTMLDivElement | null)[]>;
+    bannerContainerRef: React.RefObject<HTMLDivElement | null>;
+    copies: CopyConfig[];
+    sizeMultiplier: number;
+}
+export interface UseDragSnapReturn {
+    handleRotationSnap: (angle: number) => number;
+    handlePositionSnap: (draggedBounds: DOMRect, position: {
+        x: number;
+        y: number;
+    }) => {
+        x: number;
+        y: number;
+    };
+    calculateAlignments: (draggedElementId: string) => AlignmentLine[];
+}
+/**
+ * Hook that provides snap positioning and alignment line calculations during drag.
+ */
+export declare function useDragSnap({ logoRef, copyRefs, bannerContainerRef, copies, sizeMultiplier, }: UseDragSnapParams): UseDragSnapReturn;
+//# sourceMappingURL=useDragSnap.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDragSnap.d.ts","sourceRoot":"","sources":["../../../../src/components/BannerRenderer/hooks/useDragSnap.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAOjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,MAAM,WAAW,iBAAiB;IAChC,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;IAC3D,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,iBAAiB;IAChC,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC9C,kBAAkB,EAAE,CAAC,aAAa,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;IAC7G,mBAAmB,EAAE,CAAC,gBAAgB,EAAE,MAAM,KAAK,aAAa,EAAE,CAAC;CACpE;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,QAAQ,EACR,kBAAkB,EAClB,MAAM,EACN,cAAc,GACf,EAAE,iBAAiB,GAAG,iBAAiB,CA0FvC"}

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

@@ -0,0 +1,90 @@
+"use strict";
+/**
+ * useDragSnap hook
+ * Handles snap positioning and alignment line calculations during drag operations
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDragSnap = useDragSnap;
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../utils");
+/**
+ * Hook that provides snap positioning and alignment line calculations during drag.
+ */
+function useDragSnap({ logoRef, copyRefs, bannerContainerRef, copies, sizeMultiplier, }) {
+    // Rotation snap - uses util function from snapUtils.ts
+    const handleRotationSnap = react_1.default.useCallback((angle) => (0, utils_1.snapRotation)(angle), []);
+    // Position snap function - uses util functions from snapUtils.ts
+    const handlePositionSnap = react_1.default.useCallback((draggedBounds, position) => {
+        if (!bannerContainerRef.current)
+            return position;
+        const bannerBounds = bannerContainerRef.current.getBoundingClientRect();
+        // Convert dragged bounds to relative
+        const draggedRelative = (0, utils_1.toRelativeBounds)(draggedBounds, bannerBounds, sizeMultiplier);
+        // Get all other elements' relative bounds
+        const allElements = [
+            { id: 'logo', ref: logoRef.current },
+            ...copies.map((copy, index) => ({
+                id: `copy-${copy.id}`,
+                ref: copyRefs.current[index],
+            })),
+        ];
+        const otherBoundsArray = allElements
+            .filter(({ ref }) => ref !== null)
+            .map(({ ref }) => (0, utils_1.toRelativeBounds)(ref.getBoundingClientRect(), bannerBounds, sizeMultiplier));
+        // Calculate snap delta using util
+        const { deltaX, deltaY } = (0, utils_1.calculateSnapDelta)(draggedRelative, otherBoundsArray);
+        return {
+            x: position.x + deltaX,
+            y: position.y + deltaY,
+        };
+    }, [logoRef, copyRefs, bannerContainerRef, copies, sizeMultiplier]);
+    // Calculate alignment lines when dragging an element
+    const calculateAlignments = react_1.default.useCallback((draggedElementId) => {
+        if (!bannerContainerRef.current)
+            return [];
+        // Get dragged element ref
+        let draggedRef = null;
+        if (draggedElementId === 'logo') {
+            draggedRef = logoRef.current;
+        }
+        else if (draggedElementId.startsWith('copy-')) {
+            const copyId = draggedElementId.replace('copy-', '');
+            const copyIndex = copies.findIndex(c => c.id === copyId);
+            if (copyIndex !== -1) {
+                draggedRef = copyRefs.current[copyIndex];
+            }
+        }
+        if (!draggedRef)
+            return [];
+        const bannerBounds = bannerContainerRef.current.getBoundingClientRect();
+        const draggedBounds = draggedRef.getBoundingClientRect();
+        const draggedRelative = (0, utils_1.toRelativeBounds)(draggedBounds, bannerBounds, sizeMultiplier);
+        // Collect all other elements' relative bounds
+        const allElements = [
+            { id: 'logo', ref: logoRef.current },
+            ...copies.map((copy, index) => ({
+                id: `copy-${copy.id}`,
+                ref: copyRefs.current[index],
+            })),
+        ];
+        const alignments = [];
+        allElements.forEach(({ id, ref }) => {
+            // Skip the dragged element itself
+            if (id === draggedElementId || !ref)
+                return;
+            const otherBounds = ref.getBoundingClientRect();
+            const otherRelative = (0, utils_1.toRelativeBounds)(otherBounds, bannerBounds, sizeMultiplier);
+            // Use the pure utility function to calculate alignment lines
+            alignments.push(...(0, utils_1.calculateAlignmentLinesBetween)(draggedRelative, otherRelative, 0.5));
+        });
+        return alignments;
+    }, [logoRef, copyRefs, bannerContainerRef, copies, sizeMultiplier]);
+    return {
+        handleRotationSnap,
+        handlePositionSnap,
+        calculateAlignments,
+    };
+}

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

@@ -0,0 +1,22 @@
+/**
+ * useElementRefs hook
+ * Foundation hook for element reference helpers and overlap/alignment checks
+ */
+import React from 'react';
+import type { CopyConfig } from '../../../types';
+export interface UseElementRefsParams {
+    logoRef: React.RefObject<HTMLDivElement | null>;
+    copyRefs: React.MutableRefObject<(HTMLDivElement | null)[]>;
+    copies: CopyConfig[];
+}
+export interface UseElementRefsReturn {
+    getElementRef: (elementId: string) => HTMLDivElement | null;
+    areElementsOverlapping: (elementId1: string, elementId2: string) => boolean;
+    areVerticallyAligned: (elementId1: string, elementId2: string) => boolean;
+}
+/**
+ * Hook that provides element reference helpers and overlap/alignment checks.
+ * Supports both copy-{uuid} and copy-{N} (styleSlot) ID formats.
+ */
+export declare function useElementRefs({ logoRef, copyRefs, copies, }: UseElementRefsParams): UseElementRefsReturn;
+//# sourceMappingURL=useElementRefs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useElementRefs.d.ts","sourceRoot":"","sources":["../../../../src/components/BannerRenderer/hooks/useElementRefs.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGjD,MAAM,WAAW,oBAAoB;IACnC,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,MAAM,EAAE,UAAU,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,cAAc,GAAG,IAAI,CAAC;IAC5D,sBAAsB,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC;IAC5E,oBAAoB,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC;CAC3E;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,QAAQ,EACR,MAAM,GACP,EAAE,oBAAoB,GAAG,oBAAoB,CAqD7C"}

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

@@ -0,0 +1,70 @@
+"use strict";
+/**
+ * useElementRefs hook
+ * Foundation hook for element reference helpers and overlap/alignment checks
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useElementRefs = useElementRefs;
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../utils");
+/**
+ * Hook that provides element reference helpers and overlap/alignment checks.
+ * Supports both copy-{uuid} and copy-{N} (styleSlot) ID formats.
+ */
+function useElementRefs({ logoRef, copyRefs, copies, }) {
+    // Helper: Get element ref by ID (supports both copy-{uuid} and copy-{N} formats)
+    const getElementRef = react_1.default.useCallback((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;
+    }, [logoRef, copyRefs, copies]);
+    // Helper: Check if two elements are overlapping
+    const areElementsOverlapping = react_1.default.useCallback((elementId1, elementId2) => {
+        const ref1 = getElementRef(elementId1);
+        const ref2 = getElementRef(elementId2);
+        if (!ref1 || !ref2)
+            return false;
+        return (0, utils_1.checkElementsOverlapping)(ref1.getBoundingClientRect(), ref2.getBoundingClientRect());
+    }, [getElementRef]);
+    // Helper: Check if two elements are vertically aligned
+    const areVerticallyAligned = react_1.default.useCallback((elementId1, elementId2) => {
+        const ref1 = getElementRef(elementId1);
+        const ref2 = getElementRef(elementId2);
+        if (!ref1 || !ref2)
+            return false;
+        return (0, utils_1.checkVerticallyAligned)(ref1.getBoundingClientRect(), ref2.getBoundingClientRect());
+    }, [getElementRef]);
+    return {
+        getElementRef,
+        areElementsOverlapping,
+        areVerticallyAligned,
+    };
+}

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

@@ -0,0 +1,40 @@
+/**
+ * useLineDrawing hook
+ * Manages manual line drawing state and interactions for auto-positioning
+ */
+import React from 'react';
+import type { CopyConfig } from '../../../types';
+import type { AutoPositioningConfig } from '../../styles/types/substyleTypes';
+export interface UseLineDrawingParams {
+    bannerContainerRef: React.RefObject<HTMLDivElement | null>;
+    copies: CopyConfig[];
+    sizeMultiplier: number;
+    creationMode: boolean;
+    areElementsOverlapping: (elementId1: string, elementId2: string) => boolean;
+    areVerticallyAligned: (elementId1: string, elementId2: string) => boolean;
+    /** Auto-positioning config from substyle - used to initialize completedLines in creationMode */
+    autoPositioningConfig?: AutoPositioningConfig;
+    /** Unique key identifying the current style/substyle configuration - triggers reset when changed */
+    configKey?: string;
+}
+export interface UseLineDrawingReturn {
+    drawingFrom: string | null;
+    drawingMousePos: {
+        x: number;
+        y: number;
+    } | null;
+    completedLines: Map<string, string>;
+    manualLines: Set<string>;
+    setCompletedLines: React.Dispatch<React.SetStateAction<Map<string, string>>>;
+    setManualLines: React.Dispatch<React.SetStateAction<Set<string>>>;
+    handleToggleAutoPositioning: (elementId: string) => void;
+    handleMouseMove: (e: React.MouseEvent<HTMLDivElement>) => void;
+    handleContainerClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+    handleCompleteLineTo: (targetId: string) => void;
+    convertToStyleSlotId: (elementId: string) => string;
+}
+/**
+ * Hook that manages line drawing state and interactions for manual auto-positioning links.
+ */
+export declare function useLineDrawing({ bannerContainerRef, copies, sizeMultiplier, creationMode, areElementsOverlapping, areVerticallyAligned, autoPositioningConfig, configKey, }: UseLineDrawingParams): UseLineDrawingReturn;
+//# sourceMappingURL=useLineDrawing.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useLineDrawing.d.ts","sourceRoot":"","sources":["../../../../src/components/BannerRenderer/hooks/useLineDrawing.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AAG9E,MAAM,WAAW,oBAAoB;IACnC,kBAAkB,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC3D,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;IACtB,sBAAsB,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC;IAC5E,oBAAoB,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC;IAC1E,gGAAgG;IAChG,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C,oGAAoG;IACpG,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,eAAe,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACjD,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACzB,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,2BAA2B,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,eAAe,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC/D,oBAAoB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACpE,oBAAoB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,oBAAoB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;CACrD;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,kBAAkB,EAClB,MAAM,EACN,cAAc,EACd,YAAY,EACZ,sBAAsB,EACtB,oBAAoB,EACpB,qBAAqB,EACrB,SAAS,GACV,EAAE,oBAAoB,GAAG,oBAAoB,CAkL7C"}