zuljaman-banner-components 1.0.23 → 1.0.24

package/dist/components/styles/utils/positioningUtils.js

@@ -5,8 +5,28 @@
  * Adapted for absolute positioning system (x, y coordinates from center)
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.calculateAutoPositionOffset = exports.calculateDownOffset = exports.calculateUpOffset = void 0;
+exports.calculateSingleLinkOffset = exports.calculateDownOffset = exports.calculateUpOffset = void 0;
+exports.getElementRef = getElementRef;
+exports.getCopyIndexFromElementId = getCopyIndexFromElementId;
+exports.hasElementCenterOrigin = hasElementCenterOrigin;
+exports.checkElementEdgeProximity = checkElementEdgeProximity;
+exports.calculateChainedOffsets = calculateChainedOffsets;
+exports.detectNearestEdge = detectNearestEdge;
+exports.calculateGapToEdge = calculateGapToEdge;
+exports.orderChainFromAnchor = orderChainFromAnchor;
+exports.getSubsequentElementsInChain = getSubsequentElementsInChain;
+exports.calculateAbsoluteChainPositions = calculateAbsoluteChainPositions;
+exports.calculateTargetPositionsFromAnchor = calculateTargetPositionsFromAnchor;
+exports.getCopyData = getCopyData;
+exports.calculateAnchorHeightCompensation = calculateAnchorHeightCompensation;
+exports.calculateTargetCompensationForAnchorGrowth = calculateTargetCompensationForAnchorGrowth;
+exports.calculateTargetSelfCompensation = calculateTargetSelfCompensation;
+exports.calculateSubsequentCompensation = calculateSubsequentCompensation;
+exports.captureAnchorEdgeConfig = captureAnchorEdgeConfig;
+exports.measureElementHeights = measureElementHeights;
+exports.mapsAreEqual = mapsAreEqual;
 const defaults_1 = require("../../../constants/defaults");
+const chainValidation_1 = require("./chainValidation");
 /**
  * Calculate auto-positioning offset for 'up' direction
  * Target element will be positioned above the anchor with a gap
@@ -14,14 +34,17 @@ const defaults_1 = require("../../../constants/defaults");
  * @param anchorHeight - Height of anchor element in pixels
  * @param targetHeight - Height of target element in pixels
  * @param anchorHasCenterOrigin - Whether anchor is positioned from center (true) or top-left (false)
+ * @param fixAnchorBottomEdge - If true, anchor's bottom edge position is fixed (grows upward)
  * @returns Offset in pixels (negative value to move up)
  */
-const calculateUpOffset = (gapRem, anchorHeight, targetHeight, anchorHasCenterOrigin) => {
+const calculateUpOffset = (gapRem, anchorHeight, targetHeight, anchorHasCenterOrigin, fixAnchorBottomEdge = false) => {
     const gapPixels = gapRem * defaults_1.REM_TO_PIXELS;
     // Target always has centerOrigin=true (positioned from center)
     const targetOffset = targetHeight / 2;
     if (anchorHasCenterOrigin) {
         // Anchor positioned from center: offset from center to center
+        // This calculation is the same regardless of edge fixing
+        // Edge fixing is handled by adjusting the anchor's position, not the offset
         return -((anchorHeight / 2) + gapPixels + targetOffset);
     }
     else {
@@ -37,14 +60,17 @@ exports.calculateUpOffset = calculateUpOffset;
  * @param anchorHeight - Height of anchor element in pixels
  * @param targetHeight - Height of target element in pixels
  * @param anchorHasCenterOrigin - Whether anchor is positioned from center (true) or top-left (false)
+ * @param fixAnchorTopEdge - If true, anchor's top edge position is fixed (grows downward)
  * @returns Offset in pixels (positive value to move down)
  */
-const calculateDownOffset = (gapRem, anchorHeight, targetHeight, anchorHasCenterOrigin) => {
+const calculateDownOffset = (gapRem, anchorHeight, targetHeight, anchorHasCenterOrigin, fixAnchorTopEdge = false) => {
     const gapPixels = gapRem * defaults_1.REM_TO_PIXELS;
     // Target always has centerOrigin=true (positioned from center)
     const targetOffset = targetHeight / 2;
     if (anchorHasCenterOrigin) {
         // Anchor positioned from center: offset from center to center
+        // This calculation is the same regardless of edge fixing
+        // Edge fixing is handled by adjusting the anchor's position, not the offset
         return (anchorHeight / 2) + gapPixels + targetOffset;
     }
     else {
@@ -54,26 +80,501 @@ const calculateDownOffset = (gapRem, anchorHeight, targetHeight, anchorHasCenter
 };
 exports.calculateDownOffset = calculateDownOffset;
 /**
- * Calculate auto-positioning offset based on direction
- * Works with absolute positioning system where elements have x, y coordinates from center
- * @param config - Substyle configuration
- * @param autoConfig - Auto-positioning configuration
- * @param anchorHeight - Height of anchor element in pixels
- * @param targetHeight - Height of target element in pixels
- * @param anchorHasCenterOrigin - Whether anchor is positioned from center (true) or top-left (false)
- * @returns Offset in pixels (Y-axis only for now)
+ * Calculate offset for a single link in the chain
  */
-const calculateAutoPositionOffset = (config, autoConfig, anchorHeight, targetHeight, anchorHasCenterOrigin = true) => {
-    var _a;
-    const { direction } = autoConfig;
-    const gapRem = (_a = config.gapRem) !== null && _a !== void 0 ? _a : 0;
+const calculateSingleLinkOffset = (direction, gapRem, fromHeight, toHeight, fromHasCenterOrigin, fromIsAtBottomEdge) => {
     if (direction === 'up') {
-        return (0, exports.calculateUpOffset)(gapRem, anchorHeight, targetHeight, anchorHasCenterOrigin);
+        return (0, exports.calculateUpOffset)(gapRem, fromHeight, toHeight, fromHasCenterOrigin, fromIsAtBottomEdge);
     }
     else if (direction === 'down') {
-        return (0, exports.calculateDownOffset)(gapRem, anchorHeight, targetHeight, anchorHasCenterOrigin);
+        const fromIsAtTopEdge = !fromIsAtBottomEdge;
+        return (0, exports.calculateDownOffset)(gapRem, fromHeight, toHeight, fromHasCenterOrigin, fromIsAtTopEdge);
     }
-    // Note: left/right directions would need X-axis offset (not implemented yet, only Y-axis)
+    // Note: left/right would need X-axis offset (not implemented yet)
     return 0;
 };
-exports.calculateAutoPositionOffset = calculateAutoPositionOffset;
+exports.calculateSingleLinkOffset = calculateSingleLinkOffset;
+/**
+ * Get element ref from element ID
+ * Supports both copy-{uuid} and copy-{N} (styleSlot) formats
+ */
+function getElementRef(elementId, refs, copies) {
+    if (elementId === 'logo') {
+        return refs.logo;
+    }
+    else if (elementId.startsWith('copy-')) {
+        const suffix = elementId.substring(5); // Remove 'copy-' prefix
+        // Check if it's copy-N format (just a number = styleSlot)
+        if (/^\d+$/.test(suffix)) {
+            const styleSlotIndex = parseInt(suffix, 10);
+            // First try: find copy by styleSlot
+            const copy = copies.find(c => c.styleSlot === styleSlotIndex);
+            if (copy) {
+                const copyIndex = copies.indexOf(copy);
+                if (copyIndex < refs.copies.length) {
+                    return refs.copies[copyIndex];
+                }
+            }
+            // Fallback: use direct array index
+            if (styleSlotIndex < copies.length && styleSlotIndex < refs.copies.length) {
+                return refs.copies[styleSlotIndex];
+            }
+        }
+        else {
+            // It's a UUID format - find by id
+            const copyIndex = copies.findIndex(c => c.id === suffix);
+            if (copyIndex !== -1 && copyIndex < refs.copies.length) {
+                return refs.copies[copyIndex];
+            }
+        }
+        return null;
+    }
+    return null;
+}
+/**
+ * Get copy index from element ID
+ */
+function getCopyIndexFromElementId(elementId, copies) {
+    if (elementId === 'logo') {
+        return undefined;
+    }
+    else if (elementId.startsWith('copy-')) {
+        // DYNAMIC: Handle 'copy-N' format where N is the styleSlot
+        const styleSlotIndex = parseInt(elementId.replace('copy-', ''));
+        const copyIndex = copies.findIndex(c => c.styleSlot === styleSlotIndex);
+        // FIX: Return the array index, not the styleSlot
+        // onCopyPositionChange expects the array index to update the correct copy
+        return copyIndex !== -1 ? copyIndex : styleSlotIndex;
+    }
+    return undefined;
+}
+/**
+ * Check if element has center origin (all copies do, logo doesn't)
+ */
+function hasElementCenterOrigin(elementId) {
+    return elementId !== 'logo';
+}
+/**
+ * Check if element is closest to bottom edge (for compensation)
+ */
+function checkElementEdgeProximity(elementId, elementRef, bannerContainerRef, sizeMultiplier) {
+    if (!bannerContainerRef)
+        return false;
+    const bannerBounds = bannerContainerRef.getBoundingClientRect();
+    const elementBounds = elementRef.getBoundingClientRect();
+    const bannerHeight = bannerBounds.height / sizeMultiplier;
+    // Calculate element's Y position relative to banner center
+    const elementCenterY = (elementBounds.top + elementBounds.height / 2 - bannerBounds.top - bannerBounds.height / 2) / sizeMultiplier;
+    // Calculate distance to top and bottom edges
+    const distToTop = Math.abs(elementCenterY + bannerHeight / 2);
+    const distToBottom = Math.abs(elementCenterY - bannerHeight / 2);
+    // Element is closest to bottom if distance to bottom < distance to top
+    return distToBottom < distToTop;
+}
+/**
+ * Calculate offsets for all elements in a positioning chain
+ * Supports cascading offsets where each element's position depends on its parent
+ *
+ * @param config - Substyle configuration
+ * @param links - Array of positioning links defining the chain
+ * @param copies - Array of copy configurations
+ * @param refs - Object containing refs to logo and copy elements
+ * @param sizeMultiplier - Canvas scaling factor
+ * @param elementCompensations - Record of height-based compensations per element
+ * @param bannerContainerRef - Ref to banner container for edge detection
+ * @returns Record mapping copy index to Y offset in pixels
+ */
+function calculateChainedOffsets(config, links, copies, refs, sizeMultiplier, elementCompensations, bannerContainerRef) {
+    var _a, _b;
+    console.log('📊 calculateChainedOffsets START', { links, copiesCount: copies.length });
+    // Validate configuration
+    const validation = (0, chainValidation_1.validateChainConfiguration)(links);
+    if (!validation.valid) {
+        console.log('❌ Chain validation FAILED:', validation.error);
+        return {};
+    }
+    console.log('✅ Chain validation passed');
+    // Build graph and get calculation order
+    const graph = (0, chainValidation_1.buildDependencyGraph)(links);
+    const calculationOrder = (0, chainValidation_1.topologicalSort)(graph);
+    console.log('📋 Calculation order:', calculationOrder);
+    // Track accumulated offsets for cascading
+    const accumulatedOffsets = {};
+    const offsets = {};
+    // Process each element in topological order
+    for (const elementId of calculationOrder) {
+        // Find incoming link (the link where this element is the "to")
+        const incomingLink = (0, chainValidation_1.findIncomingLink)(links, elementId);
+        if (!incomingLink) {
+            // This is a root/anchor element - no offset
+            console.log(`🔗 ${elementId}: ROOT/ANCHOR (no incoming link)`);
+            accumulatedOffsets[elementId] = 0;
+            continue;
+        }
+        // Get refs for from and to elements
+        const fromRef = getElementRef(incomingLink.fromElement, refs, copies);
+        const toRef = getElementRef(elementId, refs, copies);
+        console.log(`🔗 ${elementId}: fromRef=${!!fromRef}, toRef=${!!toRef}`);
+        if (!fromRef || !toRef) {
+            console.log(`⚠️ ${elementId}: SKIPPED - missing ref`);
+            continue;
+        }
+        // Measure heights
+        const fromHeight = fromRef.getBoundingClientRect().height / sizeMultiplier;
+        const toHeight = toRef.getBoundingClientRect().height / sizeMultiplier;
+        // Get gap (link-specific or global)
+        const gapRem = (_b = (_a = incomingLink.gapRem) !== null && _a !== void 0 ? _a : config.gapRem) !== null && _b !== void 0 ? _b : 0;
+        // Check element properties
+        const fromHasCenterOrigin = hasElementCenterOrigin(incomingLink.fromElement);
+        const fromIsAtBottomEdge = checkElementEdgeProximity(incomingLink.fromElement, fromRef, bannerContainerRef, sizeMultiplier);
+        // Calculate base offset for this link
+        const baseOffset = (0, exports.calculateSingleLinkOffset)(incomingLink.direction, gapRem, fromHeight, toHeight, fromHasCenterOrigin, fromIsAtBottomEdge);
+        // Get accumulated offset of from element (cascading)
+        const fromAccumulatedOffset = accumulatedOffsets[incomingLink.fromElement] || 0;
+        // Get ANCHOR's compensation - needed for correct initial offset calculation
+        // This makes totalOffset = originalBaseOffset (before height change)
+        const fromCompensation = elementCompensations[incomingLink.fromElement] || 0;
+        // Total offset = base + cascade + anchor compensation
+        // The compensation neutralizes the height increase in baseOffset
+        const totalOffset = baseOffset + fromAccumulatedOffset + fromCompensation;
+        console.log(`📐 ${elementId}: baseOffset=${baseOffset.toFixed(2)}, fromAccum=${fromAccumulatedOffset.toFixed(2)}, fromComp=${fromCompensation.toFixed(2)}, TOTAL=${totalOffset.toFixed(2)}`);
+        // Store accumulated offset for this element
+        accumulatedOffsets[elementId] = totalOffset;
+        // Map to copy index for state storage
+        const copyIndex = getCopyIndexFromElementId(elementId, copies);
+        console.log(`📌 ${elementId}: copyIndex=${copyIndex}`);
+        if (copyIndex !== undefined) {
+            offsets[copyIndex] = totalOffset;
+        }
+    }
+    console.log('📊 calculateChainedOffsets RESULT:', offsets);
+    return offsets;
+}
+/**
+ * Detect which edge (top or bottom) the element is closest to
+ */
+function detectNearestEdge(element, container, sizeMultiplier) {
+    const containerBounds = container.getBoundingClientRect();
+    const elementBounds = element.getBoundingClientRect();
+    const containerHeight = containerBounds.height / sizeMultiplier;
+    const elementCenterY = (elementBounds.top + elementBounds.height / 2 - containerBounds.top) / sizeMultiplier;
+    const distToTop = elementCenterY;
+    const distToBottom = containerHeight - elementCenterY;
+    const edge = distToBottom < distToTop ? 'bottom' : 'top';
+    // Debug log - uncomment for troubleshooting
+    // console.log(`🔍 detectNearestEdge: containerHeight=${containerHeight.toFixed(2)}, elementCenterY=${elementCenterY.toFixed(2)}, distToTop=${distToTop.toFixed(2)}, distToBottom=${distToBottom.toFixed(2)}, edge=${edge}`);
+    return edge;
+}
+/**
+ * Calculate the gap from an element's edge to the container's edge
+ */
+function calculateGapToEdge(element, edge, container, sizeMultiplier) {
+    const containerBounds = container.getBoundingClientRect();
+    const elementBounds = element.getBoundingClientRect();
+    const containerHeight = containerBounds.height / sizeMultiplier;
+    const elementTop = (elementBounds.top - containerBounds.top) / sizeMultiplier;
+    const elementBottom = (elementBounds.bottom - containerBounds.top) / sizeMultiplier;
+    if (edge === 'bottom') {
+        // Gap from element's bottom edge to container's bottom edge
+        return containerHeight - elementBottom;
+    }
+    else {
+        // Gap from element's top edge to container's top edge
+        return elementTop;
+    }
+}
+/**
+ * Order targets in chain from anchor to last element
+ */
+function orderChainFromAnchor(anchorId, links) {
+    const ordered = [];
+    let currentId = anchorId;
+    while (true) {
+        const nextLink = links.find(l => l.from === currentId);
+        if (!nextLink)
+            break;
+        ordered.push(nextLink.to);
+        currentId = nextLink.to;
+    }
+    return ordered;
+}
+/**
+ * Get all elements that come AFTER a given element in the chain
+ * Useful for determining which elements need to move when an element's height changes
+ */
+function getSubsequentElementsInChain(elementId, links) {
+    const subsequent = [];
+    let currentId = elementId;
+    while (true) {
+        const nextLink = links.find(l => l.from === currentId);
+        if (!nextLink)
+            break;
+        subsequent.push(nextLink.to);
+        currentId = nextLink.to;
+    }
+    return subsequent;
+}
+/**
+ * Calculate absolute Y positions for all elements in a chain
+ * based on the anchor's fixed edge position
+ */
+function calculateAbsoluteChainPositions(bannerHeight, chainConfig, elementHeights) {
+    var _a;
+    const positions = {};
+    const { anchorId, anchorEdge, anchorGapToEdge, links } = chainConfig;
+    const anchorHeight = elementHeights[anchorId] || 0;
+    // Debug log - uncomment for troubleshooting
+    // console.log(`🎯 calculateAbsoluteChainPositions: anchorId=${anchorId}, edge=${anchorEdge}, gapToEdge=${anchorGapToEdge.toFixed(2)}, anchorHeight=${anchorHeight.toFixed(2)}`);
+    // 1. Calculate anchor's center Y position (relative to banner center, where 0 = center)
+    let anchorCenterY;
+    if (anchorEdge === 'bottom') {
+        // ANCHOR's bottom edge stays at: (bannerHeight/2) - anchorGapToEdge
+        // ANCHOR's center is at: bottomEdge - anchorHeight/2
+        // In center-origin coords: (bannerHeight/2 - anchorGapToEdge - anchorHeight/2) - bannerHeight/2
+        //                        = -anchorGapToEdge - anchorHeight/2
+        // But we need to express as offset from banner center for the y coordinate
+        // Actually, y=0 is banner center, y>0 is down
+        // Bottom edge of banner is at y = bannerHeight/2 (not scaled, in banner coords)
+        // ANCHOR bottom should be at: bannerHeight/2 - anchorGapToEdge (from center)
+        // ANCHOR center should be at: bannerHeight/2 - anchorGapToEdge - anchorHeight/2
+        anchorCenterY = (bannerHeight / 2) - anchorGapToEdge - (anchorHeight / 2);
+    }
+    else {
+        // ANCHOR's top edge stays at: -(bannerHeight/2) + anchorGapToEdge
+        // ANCHOR's center is at: topEdge + anchorHeight/2
+        anchorCenterY = -(bannerHeight / 2) + anchorGapToEdge + (anchorHeight / 2);
+    }
+    positions[anchorId] = anchorCenterY;
+    console.log(`📍 ANCHOR ${anchorId}: centerY=${anchorCenterY.toFixed(2)}`);
+    // 2. Calculate positions for targets (grow in opposite direction from edge)
+    const direction = anchorEdge === 'bottom' ? -1 : 1; // -1 = up, 1 = down
+    const orderedTargets = orderChainFromAnchor(anchorId, links);
+    let prevElementId = anchorId;
+    let prevCenterY = anchorCenterY;
+    for (const targetId of orderedTargets) {
+        const link = links.find(l => l.from === prevElementId && l.to === targetId);
+        const gapPx = ((_a = link === null || link === void 0 ? void 0 : link.gapRem) !== null && _a !== void 0 ? _a : 0) * defaults_1.REM_TO_PIXELS;
+        const prevHeight = elementHeights[prevElementId] || 0;
+        const targetHeight = elementHeights[targetId] || 0;
+        // Target center = prev center + direction * (prev half height + gap + target half height)
+        const targetCenterY = prevCenterY + direction * ((prevHeight / 2) + gapPx + (targetHeight / 2));
+        positions[targetId] = targetCenterY;
+        // Debug log - uncomment for troubleshooting
+        // console.log(`📍 TARGET ${targetId}: centerY=${targetCenterY.toFixed(2)} (gap=${gapPx.toFixed(2)}, prevHeight=${prevHeight.toFixed(2)}, targetHeight=${targetHeight.toFixed(2)})`);
+        prevElementId = targetId;
+        prevCenterY = targetCenterY;
+    }
+    return positions;
+}
+/**
+ * Calculate target positions based on CURRENT anchor position from DOM
+ * This avoids the issue where recalculating anchorCenterY from anchorGapToEdge
+ * can produce different results than the actual DOM position
+ */
+function calculateTargetPositionsFromAnchor(anchorRef, bannerContainerRef, sizeMultiplier, links, elementHeights, anchorId) {
+    var _a;
+    const positions = {};
+    // Get ANCHOR's current center Y directly from DOM (relative to banner center)
+    const bannerBounds = bannerContainerRef.getBoundingClientRect();
+    const anchorBounds = anchorRef.getBoundingClientRect();
+    const bannerCenterY = bannerBounds.top + bannerBounds.height / 2;
+    const anchorCenterY = ((anchorBounds.top + anchorBounds.height / 2) - bannerCenterY) / sizeMultiplier;
+    positions[anchorId] = anchorCenterY;
+    console.log(`📍 ANCHOR ${anchorId}: centerY=${anchorCenterY.toFixed(2)} (from DOM)`);
+    // Detect direction based on anchor's position relative to banner center
+    // If anchor is below center (positive Y), targets grow UP (negative direction)
+    // If anchor is above center (negative Y), targets grow DOWN (positive direction)
+    const direction = anchorCenterY > 0 ? -1 : 1;
+    // Order targets and calculate their positions
+    const orderedTargets = orderChainFromAnchor(anchorId, links);
+    let prevElementId = anchorId;
+    let prevCenterY = anchorCenterY;
+    for (const targetId of orderedTargets) {
+        const link = links.find(l => l.from === prevElementId && l.to === targetId);
+        const gapPx = ((_a = link === null || link === void 0 ? void 0 : link.gapRem) !== null && _a !== void 0 ? _a : 0) * defaults_1.REM_TO_PIXELS;
+        const prevHeight = elementHeights[prevElementId] || 0;
+        const targetHeight = elementHeights[targetId] || 0;
+        // Target center = prev center + direction * (prev half height + gap + target half height)
+        const targetCenterY = prevCenterY + direction * ((prevHeight / 2) + gapPx + (targetHeight / 2));
+        positions[targetId] = targetCenterY;
+        // Debug log - uncomment for troubleshooting
+        // console.log(`📍 TARGET ${targetId}: centerY=${targetCenterY.toFixed(2)} (gap=${gapPx.toFixed(2)}, direction=${direction})`);
+        prevElementId = targetId;
+        prevCenterY = targetCenterY;
+    }
+    return positions;
+}
+/**
+ * Get copy/logo data for positioning calculations
+ * Extracts position and dimension data from a copy or logo element
+ *
+ * @param elementName - Element identifier ('logo' or 'copy-N')
+ * @param copies - Array of copy configurations
+ * @param config - Substyle configuration containing base positions
+ * @param logoTranslateX - Logo X translation
+ * @param logoTranslateY - Logo Y translation
+ * @param logoWidth - Optional logo width
+ * @returns Position and dimension data, or null if element not found
+ */
+function getCopyData(elementName, copies, config, logoTranslateX, logoTranslateY, logoWidth) {
+    var _a, _b, _c;
+    if (elementName === 'logo') {
+        return {
+            x: logoTranslateX,
+            y: logoTranslateY,
+            width: logoWidth || 0,
+            element: 'logo'
+        };
+    }
+    const copyMatch = elementName.match(/^copy-(\d+)$/);
+    if (copyMatch) {
+        const styleSlotIndex = parseInt(copyMatch[1], 10);
+        const copy = copies.find(c => c.styleSlot === styleSlotIndex) || copies[styleSlotIndex];
+        if (!copy) {
+            return null;
+        }
+        const copyConfig = (_a = config.copies) === null || _a === void 0 ? void 0 : _a[styleSlotIndex];
+        const baseX = (_b = copyConfig === null || copyConfig === void 0 ? void 0 : copyConfig.x) !== null && _b !== void 0 ? _b : 0;
+        const baseY = (_c = copyConfig === null || copyConfig === void 0 ? void 0 : copyConfig.y) !== null && _c !== void 0 ? _c : 0;
+        return {
+            x: baseX + (copy.translateX || 0),
+            y: baseY + (copy.translateY || 0),
+            width: copy.width || (copyConfig === null || copyConfig === void 0 ? void 0 : copyConfig.width) || 0,
+            alignment: copy.align || (copyConfig === null || copyConfig === void 0 ? void 0 : copyConfig.alignment),
+            element: elementName
+        };
+    }
+    return null;
+}
+// ============================================================================
+// Height Compensation Functions
+// ============================================================================
+/**
+ * Calculate compensation needed to keep an anchor's edge fixed when its height changes.
+ *
+ * With centerOrigin=true, when height increases the element grows equally up and down from center.
+ * The center stays fixed by CSS, so we need to move the element to keep the desired edge fixed.
+ *
+ * @param edge - Which edge should stay fixed ('top' or 'bottom')
+ * @param heightDelta - Change in height (positive = grew, negative = shrunk)
+ * @returns Compensation in pixels (add to current translateY)
+ *
+ * @example
+ * // If edge is 'bottom' and element grew by 20px:
+ * // Bottom edge moved DOWN by 10px, so move center UP (-10px) to keep bottom fixed
+ * calculateAnchorHeightCompensation('bottom', 20) // returns -10
+ */
+function calculateAnchorHeightCompensation(edge, heightDelta) {
+    // If edge is 'bottom': bottom edge moves DOWN by heightDelta/2, move center UP to compensate
+    // If edge is 'top': top edge moves UP by heightDelta/2, move center DOWN to compensate
+    return edge === 'bottom' ? -heightDelta / 2 : heightDelta / 2;
+}
+/**
+ * Calculate compensation for target elements when anchor height changes.
+ *
+ * When anchor grows, its edge toward the target moves, plus the anchor itself moves.
+ * Target must move by the full height delta to maintain the gap.
+ *
+ * @param edge - Anchor's fixed edge ('top' or 'bottom')
+ * @param heightDelta - Change in anchor height (positive = grew, negative = shrunk)
+ * @returns Compensation in pixels (add to current translateY)
+ *
+ * @example
+ * // If anchor edge is 'bottom' and anchor grew by 20px:
+ * // Target (above anchor) must move UP by 20px to maintain gap
+ * calculateTargetCompensationForAnchorGrowth('bottom', 20) // returns -20
+ */
+function calculateTargetCompensationForAnchorGrowth(edge, heightDelta) {
+    // If edge='bottom': anchor grows UP, target is above, target must move UP
+    // If edge='top': anchor grows DOWN, target is below, target must move DOWN
+    return edge === 'bottom' ? -heightDelta : heightDelta;
+}
+/**
+ * Calculate self-compensation for a target element when its own height changes.
+ *
+ * Target uses the same direction as anchor - it keeps the same edge fixed.
+ *
+ * @param edge - The fixed edge inherited from anchor ('top' or 'bottom')
+ * @param heightDelta - Change in target height (positive = grew, negative = shrunk)
+ * @returns Compensation in pixels (add to current translateY)
+ */
+function calculateTargetSelfCompensation(edge, heightDelta) {
+    // Same logic as anchor - keep the same edge fixed
+    return edge === 'bottom' ? -heightDelta / 2 : heightDelta / 2;
+}
+/**
+ * Calculate compensation for subsequent elements when a target's height changes.
+ *
+ * Elements after the growing target need to move by the full height delta
+ * to maintain their gaps with the target.
+ *
+ * @param edge - The fixed edge inherited from anchor ('top' or 'bottom')
+ * @param heightDelta - Change in target height (positive = grew, negative = shrunk)
+ * @returns Compensation in pixels (add to current translateY)
+ */
+function calculateSubsequentCompensation(edge, heightDelta) {
+    // Subsequent elements need to move by full heightDelta
+    return edge === 'bottom' ? -heightDelta : heightDelta;
+}
+/**
+ * Capture the initial configuration for edge-locking an anchor element.
+ *
+ * @param anchorRef - Reference to the anchor DOM element
+ * @param bannerContainerRef - Reference to the banner container
+ * @param sizeMultiplier - Current size multiplier for scaling
+ * @returns Configuration object for edge-locking, or null if refs are invalid
+ */
+function captureAnchorEdgeConfig(anchorId, anchorRef, bannerContainerRef, sizeMultiplier) {
+    const edge = detectNearestEdge(anchorRef, bannerContainerRef, sizeMultiplier);
+    const gapToEdge = calculateGapToEdge(anchorRef, edge, bannerContainerRef, sizeMultiplier);
+    const initialHeight = anchorRef.getBoundingClientRect().height / sizeMultiplier;
+    return {
+        anchorId,
+        edge,
+        gapToEdge,
+        initialHeight,
+    };
+}
+/**
+ * Measure the heights of multiple elements.
+ *
+ * @param elementIds - Set of element IDs to measure
+ * @param refs - Object containing logo and copies refs
+ * @param copies - Array of copy configurations
+ * @param sizeMultiplier - Current size multiplier for scaling
+ * @returns Record mapping element ID to scaled height
+ */
+function measureElementHeights(elementIds, refs, copies, sizeMultiplier) {
+    const heights = {};
+    elementIds.forEach(elementId => {
+        const ref = getElementRef(elementId, refs, copies);
+        if (ref) {
+            heights[elementId] = ref.getBoundingClientRect().height / sizeMultiplier;
+        }
+    });
+    return heights;
+}
+// ============================================================================
+// Generic Utilities
+// ============================================================================
+/**
+ * Compare two Maps for equality.
+ *
+ * @param map1 - First map to compare
+ * @param map2 - Second map to compare
+ * @returns True if maps have same keys and values
+ *
+ * @example
+ * const map1 = new Map([['a', '1'], ['b', '2']]);
+ * const map2 = new Map([['a', '1'], ['b', '2']]);
+ * mapsAreEqual(map1, map2) // returns true
+ */
+function mapsAreEqual(map1, map2) {
+    if (map1.size !== map2.size)
+        return false;
+    for (const [key, value] of map1) {
+        if (map2.get(key) !== value)
+            return false;
+    }
+    return true;
+}

package/dist/constants/characterLimits.d.ts

@@ -3,26 +3,14 @@
  * Based on maxLengthThreshold values used in font size calculations
  */
 export interface StyleCharacterLimits {
-    copy1: number;
-    copy2?: number;
+    limits: number[];
     copyCount: number;
 }
 export interface BannerConfig {
-    copy1: {
+    copies: {
         supported: true;
-        characterLimit: number;
-        isOptional: boolean;
-    };
-    copy2?: {
-        supported: boolean;
-        characterLimit?: number;
-        isOptional?: boolean;
-    };
-    fontSize_01: {
-        supported: true;
-    };
-    fontSize_02?: {
-        supported: boolean;
+        characterLimits: number[];
+        isOptional: boolean[];
     };
     logoUrl: {
         supported: true;

package/dist/constants/characterLimits.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"characterLimits.d.ts","sourceRoot":"","sources":["../../src/constants/characterLimits.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE;QAAE,SAAS,EAAE,IAAI,CAAC;QAAC,cAAc,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,OAAO,CAAA;KAAE,CAAC;IACxE,KAAK,CAAC,EAAE;QAAE,SAAS,EAAE,OAAO,CAAC;QAAC,cAAc,CAAC,EAAE,MAAM,CAAC;QAAC,UAAU,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IAC9E,WAAW,EAAE;QAAE,SAAS,EAAE,IAAI,CAAA;KAAE,CAAC;IACjC,WAAW,CAAC,EAAE;QAAE,SAAS,EAAE,OAAO,CAAA;KAAE,CAAC;IACrC,OAAO,EAAE;QAAE,SAAS,EAAE,IAAI,CAAA;KAAE,CAAC;IAC7B,kBAAkB,EAAE;QAAE,SAAS,EAAE,IAAI,CAAA;KAAE,CAAC;IACxC,0BAA0B,EAAE;QAAE,SAAS,EAAE,IAAI,CAAA;KAAE,CAAC;IAChD,yBAAyB,EAAE;QAAE,SAAS,EAAE,OAAO,CAAA;KAAE,CAAC;IAClD,kBAAkB,EAAE;QAAE,SAAS,EAAE,IAAI,CAAA;KAAE,CAAC;CACzC;AAED,MAAM,WAAW,qBAAqB;IACpC,CAAC,WAAW,EAAE,MAAM,GAAG;QACrB,CAAC,cAAc,EAAE,MAAM,GAAG,oBAAoB,CAAC;KAChD,CAAC;CACH;AAED,MAAM,WAAW,eAAe;IAC9B,CAAC,WAAW,EAAE,MAAM,GAAG;QACrB,CAAC,cAAc,EAAE,MAAM,GAAG,YAAY,CAAC;KACxC,CAAC;CACH;AAED;;;;GAIG;AACH,eAAO,MAAM,4BAA4B,EAAE,qBAqB1C,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,GAC7B,aAAa,MAAM,EACnB,gBAAgB,MAAM,KACrB,oBAAoB,GAAG,IAEzB,CAAC;AA4BF;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,EAAE,eAyBnC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,eAAe,GAC1B,aAAa,MAAM,EACnB,gBAAgB,MAAM,KACrB,YAAY,GAAG,IAEjB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,YAAY,GAAI,MAAM,MAAM,GAAG,SAAS,EAAE,OAAO,MAAM,KAAG,OAItE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,QAAO,MAAM,EAE3C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,GAAI,aAAa,MAAM,KAAG,MAAM,EAIjE,CAAC"}
+{"version":3,"file":"characterLimits.d.ts","sourceRoot":"","sources":["../../src/constants/characterLimits.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE;QACN,SAAS,EAAE,IAAI,CAAC;QAChB,eAAe,EAAE,MAAM,EAAE,CAAC;QAC1B,UAAU,EAAE,OAAO,EAAE,CAAC;KACvB,CAAC;IACF,OAAO,EAAE;QAAE,SAAS,EAAE,IAAI,CAAA;KAAE,CAAC;IAC7B,kBAAkB,EAAE;QAAE,SAAS,EAAE,IAAI,CAAA;KAAE,CAAC;IACxC,0BAA0B,EAAE;QAAE,SAAS,EAAE,IAAI,CAAA;KAAE,CAAC;IAChD,yBAAyB,EAAE;QAAE,SAAS,EAAE,OAAO,CAAA;KAAE,CAAC;IAClD,kBAAkB,EAAE;QAAE,SAAS,EAAE,IAAI,CAAA;KAAE,CAAC;CACzC;AAED,MAAM,WAAW,qBAAqB;IACpC,CAAC,WAAW,EAAE,MAAM,GAAG;QACrB,CAAC,cAAc,EAAE,MAAM,GAAG,oBAAoB,CAAC;KAChD,CAAC;CACH;AAED,MAAM,WAAW,eAAe;IAC9B,CAAC,WAAW,EAAE,MAAM,GAAG;QACrB,CAAC,cAAc,EAAE,MAAM,GAAG,YAAY,CAAC;KACxC,CAAC;CACH;AAED;;;;GAIG;AACH,eAAO,MAAM,4BAA4B,EAAE,qBAqB1C,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,GAC7B,aAAa,MAAM,EACnB,gBAAgB,MAAM,KACrB,oBAAoB,GAAG,IAEzB,CAAC;AA8BF;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,EAAE,eAyBnC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,eAAe,GAC1B,aAAa,MAAM,EACnB,gBAAgB,MAAM,KACrB,YAAY,GAAG,IAEjB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,YAAY,GAAI,MAAM,MAAM,GAAG,SAAS,EAAE,OAAO,MAAM,KAAG,OAItE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,QAAO,MAAM,EAE3C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,GAAI,aAAa,MAAM,KAAG,MAAM,EAIjE,CAAC"}