zuljaman-banner-components 1.0.22 → 1.0.24

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

@@ -0,0 +1,332 @@
+"use strict";
+/**
+ * useAutoPositioning hook - Main Orchestrator
+ *
+ * This is the main hook that orchestrates all auto-positioning functionality.
+ * It composes several sub-hooks for better organization and maintainability.
+ */
+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.useAutoPositioning = useAutoPositioning;
+const react_1 = __importStar(require("react"));
+const styleConfig_1 = require("../../../../styleConfig");
+const debugPositions_1 = require("./debugPositions");
+const useAnchorEdgeLocking_1 = require("./useAnchorEdgeLocking");
+const useHeightCompensation_1 = require("./useHeightCompensation");
+const useChainPositioning_1 = require("./useChainPositioning");
+/**
+ * Main hook that orchestrates auto-positioning functionality.
+ */
+function useAutoPositioning({ logoRef, copyRefs, bannerContainerRef, copies, sizeMultiplier, creationMode, completedLines, manualLines, lineGaps, setCompletedLines, setManualLines, setLineGaps, config, autoPositioningOverride, logoTranslateX, logoTranslateY, logoRotation, logoWidth, bannerStyle, onApplyAutoPositioning, onCopyPositionChange, onConnectionsDeleted, exposeDebugFunctions, areElementsOverlapping, areVerticallyAligned, configKey, }) {
+    // ============================================
+    // STATE
+    // ============================================
+    const [autoOffsets, setAutoOffsets] = (0, react_1.useState)({});
+    const [recalcTrigger, setRecalcTrigger] = (0, react_1.useState)(0);
+    const [anchorCompensation, setAnchorCompensation] = (0, react_1.useState)(0);
+    const [lineRecalcTrigger, setLineRecalcTrigger] = (0, react_1.useState)(0);
+    // Anchor edge-locking state
+    const [anchorEdgeConfig, setAnchorEdgeConfig] = (0, react_1.useState)(null);
+    const [targetHeights, setTargetHeights] = (0, react_1.useState)({});
+    // Refs for tracking previous state
+    const prevCompletedLinesRef = (0, react_1.useRef)(new Map());
+    const prevElementsInChainsRef = (0, react_1.useRef)(new Set());
+    const initialPositioningDoneRef = (0, react_1.useRef)(false);
+    // Flag to indicate configKey reset is in progress (prevents CHAIN-POS from resetting positions)
+    const configKeyResetInProgressRef = (0, react_1.useRef)(false);
+    // ============================================
+    // CONFIG KEY RESET
+    // ============================================
+    // Reset ALL state when configKey changes (style/substyle change)
+    // This ensures the library self-resets without requiring consumer to use key prop
+    // IMPORTANT: useLayoutEffect ensures reset happens BEFORE next paint (sync)
+    (0, react_1.useLayoutEffect)(() => {
+        if (!configKey)
+            return; // Skip if configKey not provided (backward compat)
+        console.log('🔧 AUTO-POS useLayoutEffect - configKey reset:', configKey);
+        // Set flag to prevent CHAIN-POS from resetting positions during configKey change
+        configKeyResetInProgressRef.current = true;
+        // Reset all useState values
+        setAutoOffsets({});
+        setRecalcTrigger(0);
+        setAnchorCompensation(0);
+        setLineRecalcTrigger(0);
+        setAnchorEdgeConfig(null);
+        setTargetHeights({});
+        // Reset all refs
+        prevCompletedLinesRef.current = new Map();
+        prevElementsInChainsRef.current = new Set();
+        initialPositioningDoneRef.current = false;
+        console.log('🔧 AUTO-POS useLayoutEffect - reset completado');
+        // Clear flag after microtask to allow ANCHOR-LOCK to position elements first
+        queueMicrotask(() => {
+            configKeyResetInProgressRef.current = false;
+        });
+    }, [configKey]); // eslint-disable-line react-hooks/exhaustive-deps
+    // ^ Intentionally only depend on configKey - we want to reset when config changes
+    // Get style configuration
+    const styleConfig = (0, styleConfig_1.getStyleConfig)(bannerStyle);
+    // ============================================
+    // MEMOIZED VALUES
+    // ============================================
+    // Helper to check if an element exists
+    const elementExists = react_1.default.useCallback((elementId) => {
+        if (elementId === 'logo')
+            return true;
+        if (elementId.startsWith('copy-')) {
+            const styleSlotStr = elementId.replace('copy-', '');
+            const styleSlot = parseInt(styleSlotStr, 10);
+            if (isNaN(styleSlot))
+                return false;
+            return copies.some(c => c.styleSlot === styleSlot) || styleSlot < copies.length;
+        }
+        return false;
+    }, [copies]);
+    // Derive effective auto-positioning config
+    const derivedAutoConfig = (0, react_1.useMemo)(() => {
+        let baseConfig;
+        if (creationMode) {
+            if (completedLines.size > 0) {
+                const links = [];
+                completedLines.forEach((toId, fromId) => {
+                    const lineKey = `${fromId}->${toId}`;
+                    const gapRem = lineGaps.get(lineKey);
+                    links.push({
+                        fromElement: fromId,
+                        toElement: toId,
+                        direction: 'down',
+                        gapRem,
+                    });
+                    // Debug logs removed - were causing 800+ logs per session
+                    // if (gapRem !== undefined) {
+                    //   console.log(`🔗 Link ${lineKey} using preserved gapRem: ${gapRem.toFixed(2)}`);
+                    // }
+                });
+                baseConfig = { enabled: true, links };
+            }
+            else {
+                baseConfig = undefined;
+            }
+        }
+        else {
+            baseConfig = config.autoPositioningConfig;
+        }
+        // Filter out links that reference non-existent elements
+        if (baseConfig === null || baseConfig === void 0 ? void 0 : baseConfig.links) {
+            const validLinks = baseConfig.links.filter(link => {
+                const fromExists = elementExists(link.fromElement);
+                const toExists = elementExists(link.toElement);
+                return fromExists && toExists;
+            });
+            if (validLinks.length !== baseConfig.links.length) {
+                return { ...baseConfig, links: validLinks };
+            }
+        }
+        return baseConfig;
+    }, [creationMode, completedLines, lineGaps, config.autoPositioningConfig, elementExists]);
+    // Derive active links (unified Map for both modes)
+    const activeLinks = (0, react_1.useMemo)(() => {
+        var _a;
+        if (creationMode) {
+            return completedLines;
+        }
+        else if ((derivedAutoConfig === null || derivedAutoConfig === void 0 ? void 0 : derivedAutoConfig.enabled) && ((_a = derivedAutoConfig === null || derivedAutoConfig === void 0 ? void 0 : derivedAutoConfig.links) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            const linksMap = new Map();
+            derivedAutoConfig.links.forEach(link => {
+                linksMap.set(link.fromElement, link.toElement);
+            });
+            return linksMap;
+        }
+        return new Map();
+    }, [creationMode, completedLines, derivedAutoConfig]);
+    const hasActiveLinks = activeLinks.size > 0;
+    // ============================================
+    // BASIC EFFECTS
+    // ============================================
+    // Reset initial positioning flag when config changes
+    (0, react_1.useEffect)(() => {
+        initialPositioningDoneRef.current = false;
+    }, [derivedAutoConfig]);
+    // Trigger recalculation when style changes
+    (0, react_1.useEffect)(() => {
+        setRecalcTrigger(prev => prev + 1);
+    }, [bannerStyle]);
+    // Trigger line recalculation after text changes
+    (0, react_1.useLayoutEffect)(() => {
+        if (!creationMode)
+            return;
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                setLineRecalcTrigger(prev => prev + 1);
+            });
+        });
+    }, [copies.map(c => c.text).join('|'), anchorCompensation, recalcTrigger, creationMode]);
+    // Reset state when config changes
+    (0, react_1.useEffect)(() => {
+        console.log('📏 AUTO-POS - config changed, reseteando autoOffsets a {}');
+        setAutoOffsets({});
+        setAnchorCompensation(0);
+    }, [config]);
+    // ============================================
+    // DEBUG & APPLY FUNCTIONS
+    // ============================================
+    const debugPositions = react_1.default.useCallback(() => {
+        return (0, debugPositions_1.createDebugPositions)({
+            completedLines,
+            copies,
+            logoTranslateX,
+            logoTranslateY,
+            logoWidth,
+            config,
+            sizeMultiplier,
+            logoRef,
+            copyRefs,
+            bannerContainerRef,
+        })();
+    }, [completedLines, copies, logoTranslateX, logoTranslateY, logoWidth, config, sizeMultiplier, logoRef, copyRefs, bannerContainerRef]);
+    const applyAutoPositioningConfig = react_1.default.useCallback(() => {
+        const generatedConfig = debugPositions();
+        if (!generatedConfig)
+            return;
+        if (onApplyAutoPositioning && generatedConfig.autoPositioningConfig) {
+            onApplyAutoPositioning({
+                config: generatedConfig.autoPositioningConfig,
+                gapRem: generatedConfig.gapRem,
+            });
+        }
+        setAutoOffsets(prev => {
+            console.log('📏 AUTO-POS applyAutoPositioningConfig - prev autoOffsets:', prev);
+            const preserved = {};
+            const prevElements = prevElementsInChainsRef.current;
+            Object.entries(prev).forEach(([key, value]) => {
+                const keyNum = Number(key);
+                let copy = copies === null || copies === void 0 ? void 0 : copies.find(c => c.styleSlot === keyNum);
+                if (!copy && copies && keyNum >= 0 && keyNum < copies.length) {
+                    copy = copies[keyNum];
+                }
+                if (copy) {
+                    const copyStyleSlot = copy.styleSlot !== undefined ? copy.styleSlot : keyNum;
+                    const elementId = `copy-${copyStyleSlot}`;
+                    if (prevElements.has(elementId)) {
+                        preserved[keyNum] = value;
+                    }
+                }
+            });
+            console.log('📏 AUTO-POS applyAutoPositioningConfig - preserved autoOffsets:', preserved);
+            return preserved;
+        });
+        setAnchorCompensation(0);
+        setRecalcTrigger(prev => prev + 1);
+    }, [debugPositions, onApplyAutoPositioning, copies]);
+    // Expose debug functions
+    (0, react_1.useEffect)(() => {
+        if (exposeDebugFunctions) {
+            window.__debugBannerPositions = debugPositions;
+            window.__applyAutoPositioning = applyAutoPositioningConfig;
+        }
+    }, [debugPositions, exposeDebugFunctions, applyAutoPositioningConfig]);
+    // ============================================
+    // SUB-HOOKS
+    // ============================================
+    // Anchor edge locking and initial positioning
+    (0, useAnchorEdgeLocking_1.useAnchorEdgeLocking)({
+        activeLinks,
+        copies,
+        sizeMultiplier,
+        creationMode,
+        logoRef,
+        copyRefs,
+        bannerContainerRef,
+        derivedAutoConfig,
+        config,
+        onCopyPositionChange,
+        anchorEdgeConfig,
+        setAnchorEdgeConfig,
+        targetHeights,
+        setTargetHeights,
+        initialPositioningDoneRef,
+    });
+    // Height compensation for anchor and targets
+    (0, useHeightCompensation_1.useHeightCompensation)({
+        anchorEdgeConfig,
+        setAnchorEdgeConfig,
+        targetHeights,
+        setTargetHeights,
+        activeLinks,
+        hasActiveLinks,
+        copies,
+        sizeMultiplier,
+        creationMode,
+        logoRef,
+        copyRefs,
+        bannerContainerRef,
+        derivedAutoConfig,
+        config,
+        lineGaps,
+        onCopyPositionChange,
+    });
+    // Chain positioning and link lifecycle
+    (0, useChainPositioning_1.useChainPositioning)({
+        completedLines,
+        manualLines,
+        lineGaps,
+        setCompletedLines,
+        setLineGaps,
+        copies,
+        creationMode,
+        autoOffsets,
+        setAutoOffsets,
+        setAnchorCompensation,
+        onCopyPositionChange,
+        onConnectionsDeleted,
+        applyAutoPositioningConfig,
+        prevCompletedLinesRef,
+        prevElementsInChainsRef,
+        areElementsOverlapping,
+        areVerticallyAligned,
+        configKeyResetInProgressRef,
+    });
+    // ============================================
+    // RETURN
+    // ============================================
+    return {
+        autoOffsets,
+        anchorCompensation,
+        lineRecalcTrigger,
+        derivedAutoConfig,
+        debugPositions,
+        applyAutoPositioningConfig,
+    };
+}

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

@@ -0,0 +1,61 @@
+/**
+ * useChainPositioning hook
+ *
+ * Handles chain management: auto-apply positioning when links change,
+ * cleanup when links are deleted, and line validation.
+ */
+import type { CopyConfig } from '../../../../types';
+/**
+ * Parameters for useChainPositioning hook.
+ */
+export interface UseChainPositioningParams {
+    /** Map of completed proximity lines (fromId → toId) */
+    completedLines: Map<string, string>;
+    /** Set of manually created line keys */
+    manualLines: Set<string>;
+    /** Map of line gaps (lineKey → gapRem) */
+    lineGaps: Map<string, number>;
+    /** Setter for completed lines */
+    setCompletedLines: React.Dispatch<React.SetStateAction<Map<string, string>>>;
+    /** Setter for line gaps */
+    setLineGaps: React.Dispatch<React.SetStateAction<Map<string, number>>>;
+    /** Array of copy configurations */
+    copies: CopyConfig[];
+    /** Whether in creation mode */
+    creationMode: boolean;
+    /** Record of auto-positioning offsets (styleSlot → offset) */
+    autoOffsets: Record<number, number>;
+    /** Setter for auto offsets */
+    setAutoOffsets: React.Dispatch<React.SetStateAction<Record<number, number>>>;
+    /** Setter for anchor compensation */
+    setAnchorCompensation: React.Dispatch<React.SetStateAction<number>>;
+    /** Callback to update copy position */
+    onCopyPositionChange?: (index: number, pos: {
+        x: number;
+        y: number;
+    }) => void;
+    /** Callback when connections are deleted */
+    onConnectionsDeleted?: () => void;
+    /** Function to apply auto-positioning configuration */
+    applyAutoPositioningConfig: () => void;
+    /** Ref to track previous completed lines state */
+    prevCompletedLinesRef: React.MutableRefObject<Map<string, string>>;
+    /** Ref to track previous elements in chains */
+    prevElementsInChainsRef: React.MutableRefObject<Set<string>>;
+    /** Function to check if two elements are overlapping */
+    areElementsOverlapping: (id1: string, id2: string) => boolean;
+    /** Function to check if two elements are vertically aligned */
+    areVerticallyAligned: (id1: string, id2: string) => boolean;
+    /** Ref to track if configKey reset is in progress (skip resetting positions) */
+    configKeyResetInProgressRef?: React.MutableRefObject<boolean>;
+}
+/**
+ * Hook that manages chain positioning and link lifecycle.
+ *
+ * Responsibilities:
+ * - Auto-apply positioning when new links are created
+ * - Handle link deletion and cleanup
+ * - Validate manual lines
+ */
+export declare function useChainPositioning({ completedLines, manualLines, lineGaps, setCompletedLines, setLineGaps, copies, creationMode, autoOffsets, setAutoOffsets, setAnchorCompensation, onCopyPositionChange, onConnectionsDeleted, applyAutoPositioningConfig, prevCompletedLinesRef, prevElementsInChainsRef, areElementsOverlapping, areVerticallyAligned, configKeyResetInProgressRef, }: UseChainPositioningParams): void;
+//# sourceMappingURL=useChainPositioning.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useChainPositioning.d.ts","sourceRoot":"","sources":["../../../../../src/components/BannerRenderer/hooks/useAutoPositioning/useChainPositioning.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAGpD;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,uDAAuD;IACvD,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,wCAAwC;IACxC,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACzB,0CAA0C;IAC1C,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,iCAAiC;IACjC,iBAAiB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;IAC7E,2BAA2B;IAC3B,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;IACvE,mCAAmC;IACnC,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,+BAA+B;IAC/B,YAAY,EAAE,OAAO,CAAC;IACtB,8DAA8D;IAC9D,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,8BAA8B;IAC9B,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;IAC7E,qCAAqC;IACrC,qBAAqB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IACpE,uCAAuC;IACvC,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC9E,4CAA4C;IAC5C,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,uDAAuD;IACvD,0BAA0B,EAAE,MAAM,IAAI,CAAC;IACvC,kDAAkD;IAClD,qBAAqB,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACnE,+CAA+C;IAC/C,uBAAuB,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;IAC7D,wDAAwD;IACxD,sBAAsB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IAC9D,+DAA+D;IAC/D,oBAAoB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IAC5D,gFAAgF;IAChF,2BAA2B,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;CAC/D;AAED;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,cAAc,EACd,WAAW,EACX,QAAQ,EACR,iBAAiB,EACjB,WAAW,EACX,MAAM,EACN,YAAY,EACZ,WAAW,EACX,cAAc,EACd,qBAAqB,EACrB,oBAAoB,EACpB,oBAAoB,EACpB,0BAA0B,EAC1B,qBAAqB,EACrB,uBAAuB,EACvB,sBAAsB,EACtB,oBAAoB,EACpB,2BAA2B,GAC5B,EAAE,yBAAyB,GAAG,IAAI,CAyMlC"}

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

@@ -0,0 +1,180 @@
+"use strict";
+/**
+ * useChainPositioning hook
+ *
+ * Handles chain management: auto-apply positioning when links change,
+ * cleanup when links are deleted, and line validation.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useChainPositioning = useChainPositioning;
+const react_1 = require("react");
+const positioningUtils_1 = require("../../../styles/utils/positioningUtils");
+/**
+ * Hook that manages chain positioning and link lifecycle.
+ *
+ * Responsibilities:
+ * - Auto-apply positioning when new links are created
+ * - Handle link deletion and cleanup
+ * - Validate manual lines
+ */
+function useChainPositioning({ completedLines, manualLines, lineGaps, setCompletedLines, setLineGaps, copies, creationMode, autoOffsets, setAutoOffsets, setAnchorCompensation, onCopyPositionChange, onConnectionsDeleted, applyAutoPositioningConfig, prevCompletedLinesRef, prevElementsInChainsRef, areElementsOverlapping, areVerticallyAligned, configKeyResetInProgressRef, }) {
+    // Auto-apply positioning when new proximity lines are created
+    (0, react_1.useEffect)(() => {
+        if (!creationMode) {
+            prevCompletedLinesRef.current = completedLines;
+            return;
+        }
+        const prev = prevCompletedLinesRef.current;
+        if ((0, positioningUtils_1.mapsAreEqual)(prev, completedLines)) {
+            return;
+        }
+        const newLines = Array.from(completedLines.entries()).filter(([from, to]) => {
+            const prevTarget = prev.get(from);
+            return prevTarget !== to;
+        });
+        const deletedLines = Array.from(prev.entries()).filter(([from, prevTo]) => {
+            const currentTarget = completedLines.get(from);
+            return currentTarget !== prevTo;
+        });
+        // Build current elements in chains set
+        const elementsInChains = new Set();
+        completedLines.forEach((to, from) => {
+            elementsInChains.add(from);
+            elementsInChains.add(to);
+        });
+        const previousElementsInChains = prevElementsInChainsRef.current;
+        // Check if there are NEW elements in the chain
+        const hasNewElementsInChain = Array.from(elementsInChains).some(elementId => !previousElementsInChains.has(elementId));
+        // If new elements joined the chain OR new lines were created, apply auto-positioning
+        if (hasNewElementsInChain || newLines.length > 0) {
+            // Identify which elements are TARGETs
+            const targetElements = new Set();
+            completedLines.forEach((toId) => {
+                targetElements.add(toId);
+            });
+            // Reset translateY only for TARGET elements that JUST joined the chain
+            elementsInChains.forEach(elementId => {
+                const isNewToChain = !previousElementsInChains.has(elementId);
+                const isTarget = targetElements.has(elementId);
+                // Skip resetting y to 0 if configKey reset is in progress
+                // This prevents race condition where CHAIN-POS resets positions after ANCHOR-LOCK calculated them
+                if (isNewToChain && isTarget && elementId !== 'logo' && onCopyPositionChange && !(configKeyResetInProgressRef === null || configKeyResetInProgressRef === void 0 ? void 0 : configKeyResetInProgressRef.current)) {
+                    const copyIndex = (0, positioningUtils_1.getCopyIndexFromElementId)(elementId, copies || []);
+                    if (copyIndex !== undefined && copyIndex >= 0 && copyIndex < ((copies === null || copies === void 0 ? void 0 : copies.length) || 0)) {
+                        const copy = copies[copyIndex];
+                        console.log('⛓️ CHAIN-POS newToChain - copyIndex:', copyIndex, 'reseteando y a 0');
+                        onCopyPositionChange(copyIndex, {
+                            x: copy.translateX || 0,
+                            y: 0,
+                        });
+                    }
+                }
+            });
+            applyAutoPositioningConfig();
+        }
+        // ALWAYS update the ref to track current chain members
+        prevElementsInChainsRef.current = new Set(elementsInChains);
+        // If lines were deleted, remove auto-positioning
+        if (deletedLines.length > 0) {
+            const targetElements = new Set(deletedLines.map(([, to]) => to));
+            targetElements.forEach(targetElementName => {
+                let styleSlot;
+                const match = targetElementName.match(/^copy-(\d+)$/);
+                if (match) {
+                    styleSlot = parseInt(match[1], 10);
+                }
+                if (styleSlot !== undefined) {
+                    let copyIndex = copies.findIndex(c => c.styleSlot === styleSlot);
+                    if (copyIndex === -1) {
+                        copyIndex = styleSlot;
+                    }
+                    if (copyIndex >= 0 && copyIndex < copies.length) {
+                        const copy = copies[copyIndex];
+                        const offsetKey = copy.styleSlot !== undefined ? copy.styleSlot : copyIndex;
+                        const currentAutoOffset = autoOffsets[offsetKey];
+                        if (currentAutoOffset !== undefined && onCopyPositionChange) {
+                            const currentTranslateY = copy.translateY || 0;
+                            const newTranslateY = currentTranslateY + currentAutoOffset;
+                            console.log('⛓️ CHAIN-POS deleted line - copyIndex:', copyIndex, 'newTranslateY:', newTranslateY);
+                            onCopyPositionChange(copyIndex, {
+                                x: copy.translateX || 0,
+                                y: newTranslateY,
+                            });
+                        }
+                    }
+                }
+            });
+            // Build set of elements still in chains
+            const remainingElementsInChains = new Set();
+            completedLines.forEach((to, from) => {
+                remainingElementsInChains.add(from);
+                remainingElementsInChains.add(to);
+            });
+            setAutoOffsets(prev => {
+                const result = {};
+                Object.entries(prev).forEach(([key, value]) => {
+                    const keyNum = Number(key);
+                    let copy = copies === null || copies === void 0 ? void 0 : copies.find(c => c.styleSlot === keyNum);
+                    if (!copy && copies && keyNum >= 0 && keyNum < copies.length) {
+                        copy = copies[keyNum];
+                    }
+                    if (copy) {
+                        const elementId = `copy-${copy.id}`;
+                        if (remainingElementsInChains.has(elementId)) {
+                            result[keyNum] = value;
+                        }
+                    }
+                });
+                return result;
+            });
+            setAnchorCompensation(0);
+            // Clean up gaps for deleted lines (only manual lines)
+            setLineGaps(prevGaps => {
+                const newGaps = new Map(prevGaps);
+                deletedLines.forEach(([from, to]) => {
+                    const lineKey = `${from}->${to}`;
+                    const isManualLine = manualLines.has(lineKey);
+                    if (isManualLine) {
+                        newGaps.delete(lineKey);
+                    }
+                });
+                return newGaps;
+            });
+            if (onConnectionsDeleted) {
+                onConnectionsDeleted();
+            }
+            prevElementsInChainsRef.current = remainingElementsInChains;
+        }
+        prevCompletedLinesRef.current = new Map(completedLines);
+    }, [completedLines, creationMode, applyAutoPositioningConfig, copies, autoOffsets, onCopyPositionChange, onConnectionsDeleted, setLineGaps, manualLines, prevCompletedLinesRef, prevElementsInChainsRef, setAutoOffsets, setAnchorCompensation]);
+    // Validate and remove invalid lines automatically
+    (0, react_1.useEffect)(() => {
+        if (!creationMode)
+            return;
+        setCompletedLines(prev => {
+            const validLines = new Map();
+            let removedCount = 0;
+            prev.forEach((targetId, sourceId) => {
+                const lineKey = `${sourceId}->${targetId}`;
+                const isManualLine = manualLines.has(lineKey);
+                if (!isManualLine) {
+                    validLines.set(sourceId, targetId);
+                    return;
+                }
+                const isOverlapping = areElementsOverlapping(sourceId, targetId);
+                const isAligned = areVerticallyAligned(sourceId, targetId);
+                if (!isOverlapping && isAligned) {
+                    validLines.set(sourceId, targetId);
+                }
+                else {
+                    removedCount++;
+                }
+            });
+            if (removedCount > 0) {
+                return validLines;
+            }
+            return prev;
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [creationMode, manualLines, setCompletedLines]);
+}

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

@@ -0,0 +1,60 @@
+/**
+ * useHeightCompensation hook
+ *
+ * Handles height compensation for anchor and target elements when their text changes.
+ * Maintains edge-locking by adjusting positions when element heights change.
+ */
+import type { CopyConfig } from '../../../../types';
+import type { SubstyleConfig, AutoPositioningConfig } from '../../../styles/types/substyleTypes';
+import type { AnchorEdgeState } from './useAnchorEdgeLocking';
+/**
+ * Parameters for useHeightCompensation hook.
+ */
+export interface UseHeightCompensationParams {
+    /** Current anchor edge configuration */
+    anchorEdgeConfig: AnchorEdgeState | null;
+    /** Setter for anchor edge configuration */
+    setAnchorEdgeConfig: React.Dispatch<React.SetStateAction<AnchorEdgeState | null>>;
+    /** Record of target element heights (elementId → height) */
+    targetHeights: Record<string, number>;
+    /** Setter for target heights */
+    setTargetHeights: React.Dispatch<React.SetStateAction<Record<string, number>>>;
+    /** Map of active links (fromId → toId) */
+    activeLinks: Map<string, string>;
+    /** Whether there are any active links */
+    hasActiveLinks: boolean;
+    /** Array of copy configurations */
+    copies: CopyConfig[];
+    /** Current size multiplier for scaling */
+    sizeMultiplier: number;
+    /** Whether in creation mode */
+    creationMode: boolean;
+    /** Reference to the logo element */
+    logoRef: React.RefObject<HTMLDivElement | null>;
+    /** References to copy elements */
+    copyRefs: React.MutableRefObject<(HTMLDivElement | null)[]>;
+    /** Reference to the banner container */
+    bannerContainerRef: React.RefObject<HTMLDivElement | null>;
+    /** Derived auto-positioning configuration */
+    derivedAutoConfig: AutoPositioningConfig | undefined;
+    /** Substyle configuration */
+    config: SubstyleConfig;
+    /** Map of line gaps (lineKey → gapRem) */
+    lineGaps: Map<string, number>;
+    /** Callback to update copy position */
+    onCopyPositionChange?: (index: number, pos: {
+        x: number;
+        y: number;
+    }) => void;
+}
+/**
+ * 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
+ */
+export declare function useHeightCompensation({ anchorEdgeConfig, setAnchorEdgeConfig, targetHeights, setTargetHeights, activeLinks, hasActiveLinks, copies, sizeMultiplier, creationMode, logoRef, copyRefs, bannerContainerRef, derivedAutoConfig, config, lineGaps, onCopyPositionChange, }: UseHeightCompensationParams): void;
+//# sourceMappingURL=useHeightCompensation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useHeightCompensation.d.ts","sourceRoot":"","sources":["../../../../../src/components/BannerRenderer/hooks/useAutoPositioning/useHeightCompensation.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AASjG,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAE9D;;GAEG;AACH,MAAM,WAAW,2BAA2B;IAC1C,wCAAwC;IACxC,gBAAgB,EAAE,eAAe,GAAG,IAAI,CAAC;IACzC,2CAA2C;IAC3C,mBAAmB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC,CAAC;IAClF,4DAA4D;IAC5D,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,gCAAgC;IAChC,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;IAC/E,0CAA0C;IAC1C,WAAW,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,yCAAyC;IACzC,cAAc,EAAE,OAAO,CAAC;IACxB,mCAAmC;IACnC,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,0CAA0C;IAC1C,cAAc,EAAE,MAAM,CAAC;IACvB,+BAA+B;IAC/B,YAAY,EAAE,OAAO,CAAC;IACtB,oCAAoC;IACpC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAChD,kCAAkC;IAClC,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC;IAC5D,wCAAwC;IACxC,kBAAkB,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC3D,6CAA6C;IAC7C,iBAAiB,EAAE,qBAAqB,GAAG,SAAS,CAAC;IACrD,6BAA6B;IAC7B,MAAM,EAAE,cAAc,CAAC;IACvB,0CAA0C;IAC1C,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,uCAAuC;IACvC,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC/E;AAED;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,gBAAgB,EAChB,mBAAmB,EACnB,aAAa,EACb,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,MAAM,EACN,cAAc,EACd,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,kBAAkB,EAClB,iBAAiB,EACjB,MAAM,EACN,QAAQ,EACR,oBAAoB,GACrB,EAAE,2BAA2B,GAAG,IAAI,CA4LpC"}