zuljaman-banner-components 1.0.22 → 1.0.24

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

@@ -0,0 +1,87 @@
+"use strict";
+/**
+ * debugPositions - Extracts and calculates auto-positioning configuration from completed lines
+ *
+ * This function analyzes the completed proximity lines and generates an AutoPositioningConfig
+ * that can be saved and reused to recreate the same positioning in other contexts.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createDebugPositions = createDebugPositions;
+const positioningUtils_1 = require("../../../styles/utils/positioningUtils");
+/**
+ * Creates the debugPositions function with the given parameters
+ * Returns a function that can be called to generate the auto-positioning config
+ */
+function createDebugPositions(params) {
+    const { completedLines, copies, logoTranslateX, logoTranslateY, logoWidth, config, sizeMultiplier, logoRef, copyRefs, bannerContainerRef, } = params;
+    return function debugPositions() {
+        if (completedLines.size === 0) {
+            return null;
+        }
+        const allLinks = [];
+        const allElements = new Set();
+        let globalGapRem = 0;
+        let linkCount = 0;
+        // Process ALL lines from completedLines
+        completedLines.forEach((toId, fromId) => {
+            const fromRef = (0, positioningUtils_1.getElementRef)(fromId, { logo: logoRef.current, copies: copyRefs.current }, copies);
+            const toRef = (0, positioningUtils_1.getElementRef)(toId, { logo: logoRef.current, copies: copyRefs.current }, copies);
+            if (fromRef && toRef && bannerContainerRef.current) {
+                const bannerBounds = bannerContainerRef.current.getBoundingClientRect();
+                const fromBounds = fromRef.getBoundingClientRect();
+                const toBounds = toRef.getBoundingClientRect();
+                const fromCenterY = (fromBounds.top + fromBounds.height / 2 - bannerBounds.top - bannerBounds.height / 2) / sizeMultiplier;
+                const toCenterY = (toBounds.top + toBounds.height / 2 - bannerBounds.top - bannerBounds.height / 2) / sizeMultiplier;
+                const bannerHeight = bannerBounds.height / sizeMultiplier;
+                const fromDistToTop = Math.abs(fromCenterY + bannerHeight / 2);
+                const fromDistToBottom = Math.abs(fromCenterY - bannerHeight / 2);
+                const toDistToTop = Math.abs(toCenterY + bannerHeight / 2);
+                const toDistToBottom = Math.abs(toCenterY - bannerHeight / 2);
+                const fromClosestEdge = Math.min(fromDistToTop, fromDistToBottom);
+                const toClosestEdge = Math.min(toDistToTop, toDistToBottom);
+                const anchorId = fromClosestEdge < toClosestEdge ? fromId : toId;
+                const targetId = anchorId === fromId ? toId : fromId;
+                const anchorBounds = anchorId === fromId ? fromBounds : toBounds;
+                const targetBounds = anchorId === fromId ? toBounds : fromBounds;
+                const anchorY = (anchorBounds.top + anchorBounds.height / 2 - bannerBounds.top - bannerBounds.height / 2) / sizeMultiplier;
+                const targetY = (targetBounds.top + targetBounds.height / 2 - bannerBounds.top - bannerBounds.height / 2) / sizeMultiplier;
+                const direction = targetY < anchorY ? 'up' : 'down';
+                const anchorBottom = anchorBounds.bottom;
+                const anchorTop = anchorBounds.top;
+                const targetBottom = targetBounds.bottom;
+                const targetTop = targetBounds.top;
+                let gapPixels;
+                if (direction === 'down') {
+                    gapPixels = (targetTop - anchorBottom) / sizeMultiplier;
+                }
+                else {
+                    gapPixels = (anchorTop - targetBottom) / sizeMultiplier;
+                }
+                const REM_TO_PIXELS = 16;
+                const gapRem = gapPixels / REM_TO_PIXELS;
+                const anchorElement = anchorId;
+                const targetElement = targetId;
+                const anchorData = (0, positioningUtils_1.getCopyData)(anchorElement, copies, config, logoTranslateX, logoTranslateY, logoWidth);
+                const targetData = (0, positioningUtils_1.getCopyData)(targetElement, copies, config, logoTranslateX, logoTranslateY, logoWidth);
+                if (anchorData && targetData) {
+                    allLinks.push({ fromElement: anchorElement, toElement: targetElement, direction: direction });
+                    allElements.add(anchorElement);
+                    allElements.add(targetElement);
+                    globalGapRem += Number(gapRem.toFixed(2));
+                    linkCount++;
+                }
+            }
+        });
+        if (allLinks.length > 0) {
+            const avgGapRem = linkCount > 0 ? globalGapRem / linkCount : 0;
+            return {
+                autoPositioningConfig: {
+                    enabled: true,
+                    links: allLinks,
+                },
+                gapRem: Number(avgGapRem.toFixed(2)),
+            };
+        }
+        return null;
+    };
+}

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

@@ -0,0 +1,13 @@
+/**
+ * useAutoPositioning module
+ *
+ * Main hook and sub-hooks for auto-positioning functionality.
+ */
+export { useAutoPositioning, type UseAutoPositioningParams, type UseAutoPositioningReturn, type AutoPositioningOverride, } from './useAutoPositioningMain';
+export type { SubstyleConfig, AutoPositioningConfig, AutoPositioningLink } from './useAutoPositioningMain';
+export { createDebugPositions } from './debugPositions';
+export type { GeneratedAutoPositioningConfig, DebugPositionsParams } from './debugPositions';
+export { useAnchorEdgeLocking, type AnchorEdgeState, type UseAnchorEdgeLockingParams } from './useAnchorEdgeLocking';
+export { useHeightCompensation, type UseHeightCompensationParams } from './useHeightCompensation';
+export { useChainPositioning, type UseChainPositioningParams } from './useChainPositioning';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/BannerRenderer/hooks/useAutoPositioning/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EACL,kBAAkB,EAClB,KAAK,wBAAwB,EAC7B,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,GAC7B,MAAM,0BAA0B,CAAC;AAGlC,YAAY,EAAE,cAAc,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAG3G,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACxD,YAAY,EAAE,8BAA8B,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAG7F,OAAO,EAAE,oBAAoB,EAAE,KAAK,eAAe,EAAE,KAAK,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AACrH,OAAO,EAAE,qBAAqB,EAAE,KAAK,2BAA2B,EAAE,MAAM,yBAAyB,CAAC;AAClG,OAAO,EAAE,mBAAmB,EAAE,KAAK,yBAAyB,EAAE,MAAM,uBAAuB,CAAC"}

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

@@ -0,0 +1,21 @@
+"use strict";
+/**
+ * useAutoPositioning module
+ *
+ * Main hook and sub-hooks for auto-positioning functionality.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useChainPositioning = exports.useHeightCompensation = exports.useAnchorEdgeLocking = exports.createDebugPositions = exports.useAutoPositioning = void 0;
+// Main hook (default export)
+var useAutoPositioningMain_1 = require("./useAutoPositioningMain");
+Object.defineProperty(exports, "useAutoPositioning", { enumerable: true, get: function () { return useAutoPositioningMain_1.useAutoPositioning; } });
+// Debug positions utility
+var debugPositions_1 = require("./debugPositions");
+Object.defineProperty(exports, "createDebugPositions", { enumerable: true, get: function () { return debugPositions_1.createDebugPositions; } });
+// Sub-hooks (for advanced usage)
+var useAnchorEdgeLocking_1 = require("./useAnchorEdgeLocking");
+Object.defineProperty(exports, "useAnchorEdgeLocking", { enumerable: true, get: function () { return useAnchorEdgeLocking_1.useAnchorEdgeLocking; } });
+var useHeightCompensation_1 = require("./useHeightCompensation");
+Object.defineProperty(exports, "useHeightCompensation", { enumerable: true, get: function () { return useHeightCompensation_1.useHeightCompensation; } });
+var useChainPositioning_1 = require("./useChainPositioning");
+Object.defineProperty(exports, "useChainPositioning", { enumerable: true, get: function () { return useChainPositioning_1.useChainPositioning; } });

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

@@ -0,0 +1,71 @@
+/**
+ * useAnchorEdgeLocking hook
+ *
+ * Handles capturing anchor edge configuration and initial positioning in testing mode.
+ * When a link is created, saves the anchor's gap to the nearest edge.
+ * In testing mode, auto-positions elements based on saved config.
+ */
+import type { CopyConfig } from '../../../../types';
+import type { SubstyleConfig, AutoPositioningConfig } from '../../../styles/types/substyleTypes';
+/**
+ * State representing the anchor's edge-locking configuration.
+ * Used to maintain consistent positioning when element heights change.
+ */
+export interface AnchorEdgeState {
+    /** ID of the anchor element (e.g., 'logo' or 'copy-0') */
+    anchorId: string;
+    /** Which edge of the banner the anchor is locked to */
+    edge: 'top' | 'bottom';
+    /** Distance from anchor to the locked edge in unscaled pixels */
+    gapToEdge: number;
+    /** Anchor's height when the link was created (baseline for compensation) */
+    initialHeight: number;
+}
+/**
+ * Parameters for useAnchorEdgeLocking hook.
+ */
+export interface UseAnchorEdgeLockingParams {
+    /** Map of active links (fromId → toId) */
+    activeLinks: Map<string, string>;
+    /** Array of copy configurations */
+    copies: CopyConfig[];
+    /** Current size multiplier for scaling */
+    sizeMultiplier: number;
+    /** Whether in creation mode (user positioning) or testing mode (auto positioning) */
+    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;
+    /** Callback to update copy position */
+    onCopyPositionChange?: (index: number, pos: {
+        x: number;
+        y: number;
+    }) => void;
+    /** Current anchor edge configuration state */
+    anchorEdgeConfig: AnchorEdgeState | null;
+    /** Setter for anchor edge configuration */
+    setAnchorEdgeConfig: React.Dispatch<React.SetStateAction<AnchorEdgeState | null>>;
+    /** Record of target element heights */
+    targetHeights: Record<string, number>;
+    /** Setter for target heights */
+    setTargetHeights: React.Dispatch<React.SetStateAction<Record<string, number>>>;
+    /** Ref to track if initial positioning has been done */
+    initialPositioningDoneRef: React.MutableRefObject<boolean>;
+}
+/**
+ * Hook that manages anchor edge locking and initial positioning.
+ *
+ * Responsibilities:
+ * - Capture anchor edge config when links are created
+ * - Track target element heights
+ * - Apply initial positioning in testing mode
+ */
+export declare function useAnchorEdgeLocking({ activeLinks, copies, sizeMultiplier, creationMode, logoRef, copyRefs, bannerContainerRef, derivedAutoConfig, config, onCopyPositionChange, anchorEdgeConfig, setAnchorEdgeConfig, targetHeights, setTargetHeights, initialPositioningDoneRef, }: UseAnchorEdgeLockingParams): void;
+//# sourceMappingURL=useAnchorEdgeLocking.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAnchorEdgeLocking.d.ts","sourceRoot":"","sources":["../../../../../src/components/BannerRenderer/hooks/useAutoPositioning/useAnchorEdgeLocking.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAQjG;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,0DAA0D;IAC1D,QAAQ,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,IAAI,EAAE,KAAK,GAAG,QAAQ,CAAC;IACvB,iEAAiE;IACjE,SAAS,EAAE,MAAM,CAAC;IAClB,4EAA4E;IAC5E,aAAa,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC,0CAA0C;IAC1C,WAAW,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,mCAAmC;IACnC,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,0CAA0C;IAC1C,cAAc,EAAE,MAAM,CAAC;IACvB,qFAAqF;IACrF,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,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,8CAA8C;IAC9C,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,uCAAuC;IACvC,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,wDAAwD;IACxD,yBAAyB,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;CAC5D;AAED;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,WAAW,EACX,MAAM,EACN,cAAc,EACd,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,kBAAkB,EAClB,iBAAiB,EACjB,MAAM,EACN,oBAAoB,EACpB,gBAAgB,EAChB,mBAAmB,EACnB,aAAa,EACb,gBAAgB,EAChB,yBAAyB,GAC1B,EAAE,0BAA0B,GAAG,IAAI,CAuJnC"}

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

@@ -0,0 +1,151 @@
+"use strict";
+/**
+ * useAnchorEdgeLocking hook
+ *
+ * Handles capturing anchor edge configuration and initial positioning in testing mode.
+ * When a link is created, saves the anchor's gap to the nearest edge.
+ * In testing mode, auto-positions elements based on saved config.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAnchorEdgeLocking = useAnchorEdgeLocking;
+const react_1 = require("react");
+const positioningUtils_1 = require("../../../styles/utils/positioningUtils");
+/**
+ * Hook that manages anchor edge locking and initial positioning.
+ *
+ * Responsibilities:
+ * - Capture anchor edge config when links are created
+ * - Track target element heights
+ * - Apply initial positioning in testing mode
+ */
+function useAnchorEdgeLocking({ activeLinks, copies, sizeMultiplier, creationMode, logoRef, copyRefs, bannerContainerRef, derivedAutoConfig, config, onCopyPositionChange, anchorEdgeConfig, setAnchorEdgeConfig, targetHeights, setTargetHeights, initialPositioningDoneRef, }) {
+    // Capture anchor edge config and target heights when there are active links
+    // Works in both creationMode (completedLines) and testing mode (derivedAutoConfig.links)
+    (0, react_1.useEffect)(() => {
+        if (activeLinks.size === 0 || !bannerContainerRef.current) {
+            // Clear anchor config and target heights when no links
+            if (activeLinks.size === 0) {
+                if (anchorEdgeConfig)
+                    setAnchorEdgeConfig(null);
+                if (Object.keys(targetHeights).length > 0)
+                    setTargetHeights({});
+            }
+            return;
+        }
+        // Find the ANCHOR (element that is source but NOT target of any link)
+        const targetElementIds = new Set(Array.from(activeLinks.values()));
+        const sourceElements = new Set(Array.from(activeLinks.keys()));
+        let anchorId;
+        for (const sourceId of sourceElements) {
+            if (!targetElementIds.has(sourceId)) {
+                anchorId = sourceId;
+                break;
+            }
+        }
+        if (!anchorId)
+            return;
+        // Capture anchor config if we don't have one yet, or if anchor changed
+        if (!anchorEdgeConfig || anchorEdgeConfig.anchorId !== anchorId) {
+            const anchorRef = (0, positioningUtils_1.getElementRef)(anchorId, { logo: logoRef.current, copies: copyRefs.current }, copies);
+            if (anchorRef) {
+                const edge = (0, positioningUtils_1.detectNearestEdge)(anchorRef, bannerContainerRef.current, sizeMultiplier);
+                const gapToEdge = (0, positioningUtils_1.calculateGapToEdge)(anchorRef, edge, bannerContainerRef.current, sizeMultiplier);
+                const initialHeight = anchorRef.getBoundingClientRect().height / sizeMultiplier;
+                setAnchorEdgeConfig({
+                    anchorId,
+                    edge,
+                    gapToEdge,
+                    initialHeight,
+                });
+            }
+        }
+        // Capture initial heights for any new TARGET elements
+        const newTargetHeights = { ...targetHeights };
+        let hasNewTargets = false;
+        targetElementIds.forEach(targetId => {
+            if (!(targetId in newTargetHeights)) {
+                const targetRef = (0, positioningUtils_1.getElementRef)(targetId, { logo: logoRef.current, copies: copyRefs.current }, copies);
+                if (targetRef) {
+                    const height = targetRef.getBoundingClientRect().height / sizeMultiplier;
+                    newTargetHeights[targetId] = height;
+                    hasNewTargets = true;
+                }
+            }
+        });
+        if (hasNewTargets) {
+            setTargetHeights(newTargetHeights);
+        }
+        // INITIAL POSITIONING: Apply in both testing mode AND creationMode
+        // In creationMode, when lines are initialized from autoPositioningConfig, we need to position elements
+        // In testing mode, we auto-position based on saved config
+        // Only run ONCE to avoid infinite loops (copies changes trigger this effect)
+        // SKIP if copies already have saved positions (custom styles)
+        const copiesHaveSavedPositions = copies.some(c => c.translateY !== undefined && c.translateY !== 0);
+        // Allow initial positioning in both modes when config has links
+        if (!initialPositioningDoneRef.current && onCopyPositionChange && (derivedAutoConfig === null || derivedAutoConfig === void 0 ? void 0 : derivedAutoConfig.enabled) && (derivedAutoConfig === null || derivedAutoConfig === void 0 ? void 0 : derivedAutoConfig.links) && !copiesHaveSavedPositions) {
+            const anchorRef = (0, positioningUtils_1.getElementRef)(anchorId, { logo: logoRef.current, copies: copyRefs.current }, copies);
+            if (!anchorRef)
+                return;
+            // Build links array with gaps from derivedAutoConfig
+            const links = derivedAutoConfig.links.map(link => {
+                var _a, _b;
+                return ({
+                    from: link.fromElement,
+                    to: link.toElement,
+                    gapRem: (_b = (_a = link.gapRem) !== null && _a !== void 0 ? _a : config.gapRem) !== null && _b !== void 0 ? _b : 0
+                });
+            });
+            // Measure current heights of all elements in the chain
+            const elementHeights = {};
+            const chainElementIds = new Set();
+            links.forEach(link => {
+                chainElementIds.add(link.from);
+                chainElementIds.add(link.to);
+            });
+            for (const elementId of chainElementIds) {
+                const ref = (0, positioningUtils_1.getElementRef)(elementId, { logo: logoRef.current, copies: copyRefs.current }, copies);
+                if (ref) {
+                    elementHeights[elementId] = ref.getBoundingClientRect().height / sizeMultiplier;
+                }
+            }
+            // Calculate absolute positions for all targets
+            const absolutePositions = (0, positioningUtils_1.calculateTargetPositionsFromAnchor)(anchorRef, bannerContainerRef.current, sizeMultiplier, links, elementHeights, anchorId);
+            // Apply positions to targets via translateY
+            for (const [elementId, absoluteY] of Object.entries(absolutePositions)) {
+                if (elementId === 'logo')
+                    continue;
+                if (elementId === anchorId)
+                    continue;
+                const styleSlotMatch = elementId.match(/^copy-(\d+)$/);
+                if (!styleSlotMatch)
+                    continue;
+                const styleSlot = parseInt(styleSlotMatch[1], 10);
+                const copy = copies.find(c => c.styleSlot === styleSlot) || copies[styleSlot];
+                if (!copy)
+                    continue;
+                const copyIndex = copies.indexOf(copy);
+                if (copyIndex === -1)
+                    continue;
+                const targetRef = (0, positioningUtils_1.getElementRef)(elementId, { logo: logoRef.current, copies: copyRefs.current }, copies);
+                if (!targetRef)
+                    continue;
+                const targetRect = targetRef.getBoundingClientRect();
+                const containerRect = bannerContainerRef.current.getBoundingClientRect();
+                const bannerCenterY = containerRect.top + containerRect.height / 2;
+                const currentCenterY = ((targetRect.top + targetRect.height / 2) - bannerCenterY) / sizeMultiplier;
+                const currentTranslateY = copy.translateY || 0;
+                const deltaY = absoluteY - currentCenterY;
+                const newTranslateY = currentTranslateY + deltaY;
+                // Debug log - uncomment for troubleshooting
+                // console.log(`🎯 Initial positioning ${elementId}: currentCenterY=${currentCenterY.toFixed(2)}, targetCenterY=${absoluteY.toFixed(2)}, delta=${deltaY.toFixed(2)}, translateY=${newTranslateY.toFixed(2)}`);
+                console.log('🔒 ANCHOR-LOCK onCopyPositionChange:', { copyIndex, elementId, newTranslateY: newTranslateY.toFixed(2) });
+                onCopyPositionChange(copyIndex, {
+                    x: copy.translateX || 0,
+                    y: newTranslateY,
+                });
+            }
+            // Mark initial positioning as done
+            initialPositioningDoneRef.current = true;
+        }
+    }, [activeLinks, copies, sizeMultiplier, anchorEdgeConfig, targetHeights, logoRef, copyRefs, bannerContainerRef, creationMode, onCopyPositionChange, derivedAutoConfig, config.gapRem, setAnchorEdgeConfig, setTargetHeights, initialPositioningDoneRef]);
+}

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

@@ -0,0 +1,66 @@
+/**
+ * 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.
+ */
+import React from 'react';
+import type { CopyConfig } from '../../../../types';
+import type { SubstyleConfig, AutoPositioningConfig, AutoPositioningLink } from '../../../styles/types/substyleTypes';
+import { type GeneratedAutoPositioningConfig } from './debugPositions';
+export type { SubstyleConfig, AutoPositioningConfig, AutoPositioningLink };
+export type { GeneratedAutoPositioningConfig } from './debugPositions';
+export interface AutoPositioningOverride {
+    enabled: boolean;
+    config?: AutoPositioningConfig;
+    gapRem?: number;
+    copies?: SubstyleConfig['copies'];
+}
+export interface UseAutoPositioningParams {
+    logoRef: React.RefObject<HTMLDivElement | null>;
+    copyRefs: React.MutableRefObject<(HTMLDivElement | null)[]>;
+    bannerContainerRef: React.RefObject<HTMLDivElement | null>;
+    copies: CopyConfig[];
+    sizeMultiplier: number;
+    creationMode: boolean;
+    completedLines: Map<string, string>;
+    manualLines: Set<string>;
+    lineGaps: Map<string, number>;
+    setCompletedLines: React.Dispatch<React.SetStateAction<Map<string, string>>>;
+    setManualLines: React.Dispatch<React.SetStateAction<Set<string>>>;
+    setLineGaps: React.Dispatch<React.SetStateAction<Map<string, number>>>;
+    config: SubstyleConfig;
+    autoPositioningOverride?: AutoPositioningOverride;
+    logoTranslateX: number;
+    logoTranslateY: number;
+    logoRotation: number;
+    logoWidth?: number;
+    bannerStyle: number;
+    onApplyAutoPositioning?: (config: {
+        config: AutoPositioningConfig;
+        gapRem: number;
+    }) => void;
+    onCopyPositionChange?: (index: number, pos: {
+        x: number;
+        y: number;
+    }) => void;
+    onConnectionsDeleted?: () => void;
+    exposeDebugFunctions?: boolean;
+    areElementsOverlapping: (id1: string, id2: string) => boolean;
+    areVerticallyAligned: (id1: string, id2: string) => boolean;
+    /** Unique key identifying the current style/substyle configuration - triggers reset when changed */
+    configKey?: string;
+}
+export interface UseAutoPositioningReturn {
+    autoOffsets: Record<number, number>;
+    anchorCompensation: number;
+    lineRecalcTrigger: number;
+    derivedAutoConfig: AutoPositioningConfig | undefined;
+    debugPositions: () => GeneratedAutoPositioningConfig | null;
+    applyAutoPositioningConfig: () => void;
+}
+/**
+ * Main hook that orchestrates auto-positioning functionality.
+ */
+export declare 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, }: UseAutoPositioningParams): UseAutoPositioningReturn;
+//# sourceMappingURL=useAutoPositioningMain.d.ts.map

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

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