zuljaman-banner-components 1.0.22 → 1.0.24

package/dist/components/BannerRenderer/utils/snapUtils.js

@@ -0,0 +1,109 @@
+"use strict";
+/**
+ * Snap utility functions for BannerRenderer
+ * Pure functions for snapping positions and rotations
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.snapRotation = snapRotation;
+exports.toRelativeBounds = toRelativeBounds;
+exports.calculateSnapDelta = calculateSnapDelta;
+/**
+ * Snap angle to nearest cardinal direction (0°, 90°, 180°, 270°)
+ * @param angle - Input angle in degrees
+ * @param snapThreshold - Degrees threshold for snapping (default: 3)
+ * @returns Snapped angle or normalized input angle
+ */
+function snapRotation(angle, snapThreshold = 3) {
+    const snapAngles = [0, 90, 180, 270, -90, -180, -270];
+    // Normalize angle to -180 to 180 range
+    let normalized = angle % 360;
+    if (normalized > 180)
+        normalized -= 360;
+    if (normalized < -180)
+        normalized += 360;
+    // Check if close to any snap angle
+    for (const snapAngle of snapAngles) {
+        if (Math.abs(normalized - snapAngle) < snapThreshold) {
+            return snapAngle;
+        }
+    }
+    return normalized;
+}
+/**
+ * Convert DOMRect to relative bounds (relative to container center)
+ */
+function toRelativeBounds(bounds, containerBounds, sizeMultiplier) {
+    return {
+        left: (bounds.left - containerBounds.left - containerBounds.width / 2) / sizeMultiplier,
+        centerX: (bounds.left + bounds.width / 2 - containerBounds.left - containerBounds.width / 2) / sizeMultiplier,
+        right: (bounds.right - containerBounds.left - containerBounds.width / 2) / sizeMultiplier,
+        top: (bounds.top - containerBounds.top - containerBounds.height / 2) / sizeMultiplier,
+        centerY: (bounds.top + bounds.height / 2 - containerBounds.top - containerBounds.height / 2) / sizeMultiplier,
+        bottom: (bounds.bottom - containerBounds.top - containerBounds.height / 2) / sizeMultiplier,
+    };
+}
+/**
+ * Calculate snap delta for position alignment
+ * @param draggedBounds - Bounds of the element being dragged
+ * @param otherBoundsArray - Array of other elements' bounds to snap to
+ * @param snapThreshold - Pixel threshold for snapping (default: 5)
+ * @returns Delta to apply to position for snapping
+ */
+function calculateSnapDelta(draggedBounds, otherBoundsArray, snapThreshold = 5) {
+    let snapDeltaX = 0;
+    let snapDeltaY = 0;
+    let hasSnappedX = false;
+    let hasSnappedY = false;
+    for (const other of otherBoundsArray) {
+        // Horizontal snapping (X axis) - only snap to closest alignment
+        if (!hasSnappedX) {
+            if (Math.abs(draggedBounds.left - other.left) < snapThreshold) {
+                snapDeltaX = other.left - draggedBounds.left;
+                hasSnappedX = true;
+            }
+            else if (Math.abs(draggedBounds.centerX - other.centerX) < snapThreshold) {
+                snapDeltaX = other.centerX - draggedBounds.centerX;
+                hasSnappedX = true;
+            }
+            else if (Math.abs(draggedBounds.right - other.right) < snapThreshold) {
+                snapDeltaX = other.right - draggedBounds.right;
+                hasSnappedX = true;
+            }
+            else if (Math.abs(draggedBounds.right - other.left) < snapThreshold) {
+                snapDeltaX = other.left - draggedBounds.right;
+                hasSnappedX = true;
+            }
+            else if (Math.abs(draggedBounds.left - other.right) < snapThreshold) {
+                snapDeltaX = other.right - draggedBounds.left;
+                hasSnappedX = true;
+            }
+        }
+        // Vertical snapping (Y axis) - only snap to closest alignment
+        if (!hasSnappedY) {
+            if (Math.abs(draggedBounds.top - other.top) < snapThreshold) {
+                snapDeltaY = other.top - draggedBounds.top;
+                hasSnappedY = true;
+            }
+            else if (Math.abs(draggedBounds.centerY - other.centerY) < snapThreshold) {
+                snapDeltaY = other.centerY - draggedBounds.centerY;
+                hasSnappedY = true;
+            }
+            else if (Math.abs(draggedBounds.bottom - other.bottom) < snapThreshold) {
+                snapDeltaY = other.bottom - draggedBounds.bottom;
+                hasSnappedY = true;
+            }
+            else if (Math.abs(draggedBounds.bottom - other.top) < snapThreshold) {
+                snapDeltaY = other.top - draggedBounds.bottom;
+                hasSnappedY = true;
+            }
+            else if (Math.abs(draggedBounds.top - other.bottom) < snapThreshold) {
+                snapDeltaY = other.bottom - draggedBounds.top;
+                hasSnappedY = true;
+            }
+        }
+        // Early exit if both axes have snapped
+        if (hasSnappedX && hasSnappedY)
+            break;
+    }
+    return { deltaX: snapDeltaX, deltaY: snapDeltaY };
+}

package/dist/components/BannerVisor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BannerVisor.d.ts","sourceRoot":"","sources":["../../src/components/BannerVisor.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAA+C,MAAM,OAAO,CAAC;AAEpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAc,MAAM,UAAU,CAAC;AAYzE,UAAU,yBAA0B,SAAQ,gBAAgB;IAC1D,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;CACjD;AAUD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAkU3D,CAAC"}
+{"version":3,"file":"BannerVisor.d.ts","sourceRoot":"","sources":["../../src/components/BannerVisor.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAA+C,MAAM,OAAO,CAAC;AAEpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAc,MAAM,UAAU,CAAC;AAYzE,UAAU,yBAA0B,SAAQ,gBAAgB;IAC1D,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;CACjD;AAUD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAgV3D,CAAC"}

package/dist/components/BannerVisor.js

@@ -19,7 +19,7 @@ const BannerRenderer_1 = require("./BannerRenderer");
 const NoImageComponent = () => {
     return ((0, jsx_runtime_1.jsx)("div", { className: "w-full grow flex items-center justify-center text-neutral-500", children: (0, jsx_runtime_1.jsx)("p", { children: "No image selected" }) }));
 };
-const BannerVisor = ({ backgroundImageUrl, copies, copy1, copy2, bannerStyle = 1, bannerSubstyle, bannerSubSubstyle: _bannerSubSubstyle, logoUrl, postType, sizeMultiplier: externalSizeMultiplier, fontSizeMultiplier = 1.0, copy1FontSizeMultiplier, copy2FontSizeMultiplier, logoSizeMultiplier = 1.0, overlayIntensityMultiplier = 1.0, shadowIntensityMultiplier = 1.0, ImageComponent, logoTranslateX = 0, logoTranslateY = 0, copy1TranslateX = 0, copy1TranslateY = 0, copy2TranslateX = 0, copy2TranslateY = 0, draggableMode = false, onLogoPositionChange, onCopyPositionChange, onCopy1PositionChange, onCopy2PositionChange, onLogoRotationChange, onCopyRotationChange, onCopy1RotationChange, onCopy2RotationChange, logoRotation = 0, copy1Rotation = 0, copy2Rotation = 0, logoWidth, copy1Width, copy2Width, onLogoWidthChange, onCopyWidthChange, onCopy1WidthChange, onCopy2WidthChange, copy1Align = 'left', copy2Align = 'center', copy1FontWeight = 'normal', copy2FontWeight = 'normal', textShadowEnabled, textShadowSize, textShadowIntensity, logoShadowEnabled, logoShadowSize, logoShadowIntensity, noiseEnabled, noiseIntensity, fontFamily, }) => {
+const BannerVisor = ({ backgroundImageUrl, copies, copy1, copy2, bannerStyle = 1, bannerSubstyle, bannerSubSubstyle: _bannerSubSubstyle, logoUrl, postType, sizeMultiplier: externalSizeMultiplier, fontSizeMultiplier = 1.0, copy1FontSizeMultiplier, copy2FontSizeMultiplier, logoSizeMultiplier = 1.0, overlayIntensityMultiplier = 1.0, shadowIntensityMultiplier = 1.0, ImageComponent, logoTranslateX = 0, logoTranslateY = 0, copy1TranslateX = 0, copy1TranslateY = 0, copy2TranslateX = 0, copy2TranslateY = 0, draggableMode = false, creationMode = false, linkingModeActive = false, onDebugPositions, onApplyAutoPositioning, onConnectionsDeleted, onLineGapsChange, autoPositioningOverride, onLogoPositionChange, onCopyPositionChange, onCopy1PositionChange, onCopy2PositionChange, onLogoRotationChange, onCopyRotationChange, onCopy1RotationChange, onCopy2RotationChange, logoRotation = 0, copy1Rotation = 0, copy2Rotation = 0, logoWidth, copy1Width, copy2Width, onLogoWidthChange, onCopyWidthChange, onCopy1WidthChange, onCopy2WidthChange, copy1Align = 'left', copy2Align = 'center', copy1FontWeight = 'normal', copy2FontWeight = 'normal', textShadowEnabled, textShadowSize, textShadowIntensity, logoShadowEnabled, logoShadowSize, logoShadowIntensity, noiseEnabled, noiseIntensity, fontFamily, }) => {
     var _a;
     const [internalSizeMultiplier, setInternalSizeMultiplier] = (0, react_1.useState)(1);
     const containerRef = (0, react_1.useRef)(null);
@@ -139,6 +139,13 @@ const BannerVisor = ({ backgroundImageUrl, copies, copy1, copy2, bannerStyle = 1
         logoTranslateX,
         logoTranslateY,
         draggableMode,
+        creationMode,
+        linkingModeActive,
+        onDebugPositions,
+        onApplyAutoPositioning,
+        onConnectionsDeleted,
+        onLineGapsChange,
+        autoPositioningOverride,
         onLogoPositionChange,
         onCopyPositionChange: handleCopyPositionChange,
         onCopyRotationChange: handleCopyRotationChange,

package/dist/components/index.js

@@ -18,7 +18,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./BannerVisor"), exports);
-__exportStar(require("./BannerRenderer"), exports);
+__exportStar(require("./BannerRenderer"), exports); // Now exports from BannerRenderer/index.ts
 // Note: BannerRenderer is a generic component that handles all banner styles
 // Use bannerStyle prop (1, 2, 3, etc.) to select the style
 // Use bannerSubstyle prop (0 for logo only, 1, 2, or 3) to select the substyle

package/dist/components/shared/DraggableElement.d.ts

@@ -23,8 +23,19 @@ export interface DraggableElementProps {
     onSelect: (id: string) => void;
     onDeselect: () => void;
     onRotationSnap?: (angle: number) => number;
+    onPositionSnap?: (bounds: DOMRect, position: {
+        x: number;
+        y: number;
+    }) => {
+        x: number;
+        y: number;
+    };
     onDragMove?: (elementId: string, bounds: DOMRect) => void;
     centerOrigin?: boolean;
+    creationMode?: boolean;
+    linkingModeActive?: boolean;
+    onStartLinking?: () => void;
+    onElementClickWhileDrawing?: (targetId: string) => void;
     children: React.ReactNode;
 }
 export declare const DraggableElement: React.FC<DraggableElementProps>;

package/dist/components/shared/DraggableElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableElement.d.ts","sourceRoot":"","sources":["../../../src/components/shared/DraggableElement.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IAGpB,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3D,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,UAAU,EAAE,MAAM,IAAI,CAAC;IAGvB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAG1D,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAooB5D,CAAC"}
+{"version":3,"file":"DraggableElement.d.ts","sourceRoot":"","sources":["../../../src/components/shared/DraggableElement.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IAGpB,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3D,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,UAAU,EAAE,MAAM,IAAI,CAAC;IAGvB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnG,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAG1D,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,0BAA0B,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAExD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAuoB5D,CAAC"}

package/dist/components/shared/DraggableElement.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DraggableElement = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
-const DraggableElement = ({ enabled, position, rotation, width, scale, elementId, isSelected, onPositionChange, onRotationChange, onWidthChange, onSelect, onDeselect, onRotationSnap, onDragMove, centerOrigin = false, children, }) => {
+const DraggableElement = ({ enabled, position, rotation, width, scale, elementId, isSelected, onPositionChange, onRotationChange, onWidthChange, onSelect, onDeselect, onRotationSnap, onPositionSnap, onDragMove, centerOrigin = false, creationMode = false, linkingModeActive = false, onStartLinking, onElementClickWhileDrawing, children, }) => {
     const [isDragging, setIsDragging] = react_1.default.useState(false);
     const [isRotating, setIsRotating] = react_1.default.useState(false);
     const [isResizing, setIsResizing] = react_1.default.useState(false);
@@ -203,10 +203,15 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
             hasDraggedRef.current = true;
             const deltaX = (e.clientX - dragStartPosRef.current.x) / scaleRef.current;
             const deltaY = (e.clientY - dragStartPosRef.current.y) / scaleRef.current;
-            const newPosition = {
+            let newPosition = {
                 x: startPositionRef.current.x + deltaX,
                 y: startPositionRef.current.y + deltaY,
             };
+            // Apply position snap if callback provided
+            if (onPositionSnap && contentOnlyRef.current) {
+                const elementBounds = contentOnlyRef.current.getBoundingClientRect();
+                newPosition = onPositionSnap(elementBounds, newPosition);
+            }
             setCurrentPosition(newPosition);
             if (contentOnlyRef.current && onDragMoveRef.current) {
                 const elementBounds = contentOnlyRef.current.getBoundingClientRect();
@@ -261,6 +266,10 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
             const deltaY = Math.abs(moveEvent.clientY - startY);
             // If mouse moved more than threshold, activate drag (increased to 8px to prevent accidental drags on click)
             if (deltaX > 8 || deltaY > 8) {
+                // Select element if not already selected before starting drag
+                if (!isSelected) {
+                    onSelect(elementId);
+                }
                 setIsDragging(true);
                 // Remove temporary listeners
                 cleanup();
@@ -363,6 +372,19 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
                 if (deltaX < 5 && deltaY < 5) {
                     e.preventDefault();
                     e.stopPropagation();
+                    // If linking mode is active, handle linking instead of normal selection
+                    if (linkingModeActive) {
+                        // If another element is drawing, complete the link to this element
+                        if (onElementClickWhileDrawing) {
+                            onElementClickWhileDrawing(elementId);
+                            return; // Don't perform normal selection
+                        }
+                        // If no one is drawing, start linking from this element
+                        if (onStartLinking) {
+                            onStartLinking();
+                            return; // Don't perform normal selection
+                        }
+                    }
                     if (!isSelected) {
                         onSelect(elementId);
                     }
@@ -390,18 +412,20 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
                         border: "2px dashed rgba(59, 130, 246, 0.5)",
                         zIndex: 0,
                         pointerEvents: "none",
-                    } })), (0, jsx_runtime_1.jsxs)("div", { ref: rotatingContentRef, style: { transform: `rotate(${rotation}deg)`, position: "relative", display: "inline-block" }, children: [isSelected && ((0, jsx_runtime_1.jsx)("div", { style: {
+                    } })), (0, jsx_runtime_1.jsxs)("div", { ref: rotatingContentRef, style: { transform: `rotate(${rotation}deg)`, position: "relative", display: "inline-block" }, children: [(isSelected || creationMode) && ((0, jsx_runtime_1.jsx)("div", { style: {
                                 position: "absolute",
                                 inset: 0,
-                                border: "4px dotted rgba(59, 130, 246, 1)",
+                                border: creationMode
+                                    ? "4px solid rgba(0, 255, 0, 1)" // Green phosphorescent solid in creation mode
+                                    : "4px dotted rgba(59, 130, 246, 1)", // Blue dotted when selected
                                 zIndex: 1,
                                 pointerEvents: "none",
-                            } })), onRotationChange && isSelected && ((0, jsx_runtime_1.jsx)("div", { ref: blueHandleRef, className: "rotation-handle", onMouseDown: handleRotationStart, style: {
+                            } })), onRotationChange && (isSelected || creationMode) && ((0, jsx_runtime_1.jsx)("div", { ref: blueHandleRef, className: "rotation-handle", onMouseDown: handleRotationStart, style: {
                                 position: "absolute",
-                                top: "-16px",
-                                right: "-16px",
-                                width: "32px",
-                                height: "32px",
+                                top: "-20px",
+                                right: "-20px",
+                                width: "40px",
+                                height: "40px",
                                 borderRadius: "50%",
                                 backgroundColor: "rgba(59, 130, 246, 0.9)",
                                 border: "2px solid white",
@@ -409,72 +433,48 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
                                 display: "flex",
                                 alignItems: "center",
                                 justifyContent: "center",
-                                fontSize: "16px",
+                                fontSize: "20px",
                                 lineHeight: "1",
                                 color: "white",
                                 zIndex: 1000,
                                 boxShadow: "0 2px 4px rgba(0,0,0,0.2)",
                                 transform: `rotate(${-rotation}deg)`,
                                 transformOrigin: "center center",
-                            }, title: "Drag to rotate", children: "\u21BB" })), onRotationChange && isSelected && ((0, jsx_runtime_1.jsx)("div", { ref: purpleIndicatorRef, style: {
+                            }, title: "Drag to rotate", children: "\u21BB" })), onRotationChange && (isSelected || creationMode) && ((0, jsx_runtime_1.jsx)("div", { ref: purpleIndicatorRef, style: {
                                 position: "absolute",
-                                top: "-16px",
-                                right: "-16px",
-                                width: "32px",
-                                height: "32px",
+                                top: "-20px",
+                                right: "-20px",
+                                width: "40px",
+                                height: "40px",
                                 borderRadius: "50%",
                                 backgroundColor: "rgba(139, 92, 246, 0.9)",
                                 border: "2px solid white",
                                 display: "flex",
                                 alignItems: "center",
                                 justifyContent: "center",
-                                fontSize: "16px",
+                                fontSize: "20px",
                                 lineHeight: "1",
                                 color: "white",
                                 zIndex: 999,
                                 boxShadow: "0 2px 4px rgba(0,0,0,0.2)",
                                 pointerEvents: "none",
-                            }, title: "Rotation indicator", children: "\u21BB" })), isSelected && ((0, jsx_runtime_1.jsx)("div", { className: "width-handle width-handle-left", onMouseDown: (e) => handleResizeStart(e, 'left'), style: {
+                            }, title: "Rotation indicator", children: "\u21BB" })), (isSelected || creationMode) && ((0, jsx_runtime_1.jsx)("div", { className: "width-handle width-handle-left", onMouseDown: (e) => handleResizeStart(e, 'left'), style: {
                                 position: "absolute",
-                                left: "-16px",
-                                top: "50%",
-                                transform: `translateY(-50%) rotate(${-rotation}deg)`,
-                                transformOrigin: "center center",
-                                width: "32px",
-                                height: "32px",
-                                borderRadius: "50%",
-                                backgroundColor: "rgba(16, 185, 129, 0.9)",
-                                border: "2px solid white",
+                                left: "-6px",
+                                top: "0",
+                                width: "12px",
+                                height: "100%",
                                 cursor: "ew-resize",
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: "center",
-                                fontSize: "16px",
-                                lineHeight: "1",
-                                color: "white",
                                 zIndex: 1000,
-                                boxShadow: "0 2px 4px rgba(0,0,0,0.2)",
-                            }, title: "Drag to resize width", children: "\u27F7" })), isSelected && ((0, jsx_runtime_1.jsx)("div", { className: "width-handle width-handle-right", onMouseDown: (e) => handleResizeStart(e, 'right'), style: {
+                            }, title: "Drag to resize width" })), (isSelected || creationMode) && ((0, jsx_runtime_1.jsx)("div", { className: "width-handle width-handle-right", onMouseDown: (e) => handleResizeStart(e, 'right'), style: {
                                 position: "absolute",
-                                right: "-16px",
-                                top: "50%",
-                                transform: `translateY(-50%) rotate(${-rotation}deg)`,
-                                transformOrigin: "center center",
-                                width: "32px",
-                                height: "32px",
-                                borderRadius: "50%",
-                                backgroundColor: "rgba(16, 185, 129, 0.9)",
-                                border: "2px solid white",
+                                right: "-6px",
+                                top: "0",
+                                width: "12px",
+                                height: "100%",
                                 cursor: "ew-resize",
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: "center",
-                                fontSize: "16px",
-                                lineHeight: "1",
-                                color: "white",
                                 zIndex: 1000,
-                                boxShadow: "0 2px 4px rgba(0,0,0,0.2)",
-                            }, title: "Drag to resize width", children: "\u27F7" })), (0, jsx_runtime_1.jsx)("div", { ref: contentOnlyRef, style: {
+                            }, title: "Drag to resize width" })), (0, jsx_runtime_1.jsx)("div", { ref: contentOnlyRef, style: {
                                 position: "relative",
                                 zIndex: 1,
                                 width: width ? `${width}px` : undefined,

package/dist/components/styles/Style1/substyleConfig.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"substyleConfig.d.ts","sourceRoot":"","sources":["../../../../src/components/styles/Style1/substyleConfig.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAIxD,YAAY,EAAE,cAAc,EAAE,CAAC;AAE/B;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAiFlE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAAI,UAAU,MAAM,KAAG,cAEpD,CAAC"}
+{"version":3,"file":"substyleConfig.d.ts","sourceRoot":"","sources":["../../../../src/components/styles/Style1/substyleConfig.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAIxD,YAAY,EAAE,cAAc,EAAE,CAAC;AAE/B;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAgFlE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAAI,UAAU,MAAM,KAAG,cAEpD,CAAC"}

package/dist/components/styles/Style1/substyleConfig.js

@@ -18,80 +18,79 @@ exports.STYLE1_SUBSTYLE_CONFIGS = {
             x: -475, // 6% from left (65px) = -475px from center
             y: -486, // 5% from top (54px) = -486px from center
         },
-        copy1: {
-            x: 0, // Centered horizontally
-            y: 432, // 10% from bottom (108px) = 432px from center
-            width: 950, // 88% of 1080px
-            alignment: 'center',
-        },
-        copy2: {
-            x: 0, // Centered horizontally
-            y: 432, // Start at same Y as copy1 (will be auto-positioned above)
-            width: 950, // 88% of 1080px
-            alignment: 'center',
-        },
+        copies: [
+            {
+                x: 0, // Centered horizontally (copy-0)
+                y: 432, // 10% from bottom (108px) = 432px from center
+                width: 950, // 88% of 1080px
+                alignment: 'center',
+            },
+            {
+                x: 0, // Centered horizontally (copy-1)
+                y: 432, // Same Y as copy-0, auto-positioning calculates offset
+                width: 950, // 88% of 1080px
+                alignment: 'center',
+            },
+        ],
         autoPositioning: true,
         autoPositioningConfig: {
-            anchorElement: 'copy1',
-            targetElement: 'copy2',
-            direction: 'up',
+            enabled: true,
+            links: [
+                { fromElement: 'copy-0', toElement: 'copy-1', direction: 'up' },
+            ],
         },
         gapRem: 1.5,
-        fontSize: {
-            copy1: 1.0,
-            copy2: 0.80,
-        },
+        fontSizes: [1.0, 0.80],
     },
     2: {
         logo: {
             x: -475,
             y: -486,
         },
-        copy1: {
-            x: 0,
-            y: 432,
-            width: 950,
-            alignment: 'center',
-        },
-        copy2: {
-            x: -259, // 6% from left (65px), centered within 40% width (432px) = -259px from center
-            y: -486, // Start at same Y as logo (will be auto-positioned below)
-            width: 432, // 40% of 1080px
-            alignment: 'left',
-        },
+        copies: [
+            {
+                x: 0,
+                y: 432,
+                width: 950,
+                alignment: 'center',
+            },
+            {
+                x: -259, // 6% from left (65px), centered within 40% width (432px) = -259px from center
+                y: -486, // Same Y as logo, auto-positioning calculates offset
+                width: 432, // 40% of 1080px
+                alignment: 'left',
+            },
+        ],
         autoPositioning: true,
         autoPositioningConfig: {
-            anchorElement: 'logo',
-            targetElement: 'copy2',
-            direction: 'down',
+            enabled: true,
+            links: [
+                { fromElement: 'logo', toElement: 'copy-1', direction: 'down' },
+            ],
         },
         gapRem: 1.5,
-        fontSize: {
-            copy1: 1.0,
-            copy2: 0.80,
-        },
+        fontSizes: [1.0, 0.80],
     },
     3: {
         logo: {
             x: -475,
             y: -486,
         },
-        copy1: {
-            x: 0,
-            y: 432,
-            width: 950,
-            alignment: 'center',
-        },
-        copy2: {
-            x: 259, // 6% from right (65px), centered within 40% width (432px) = 259px from center
-            y: -350, // Moved down from -432 to -350
-            width: 432, // 40% of 1080px
-            alignment: 'right',
-        },
-        fontSize: {
-            copy1: 1.0,
-            copy2: 0.80,
-        },
+        copies: [
+            {
+                x: 0,
+                y: 432,
+                width: 950,
+                alignment: 'center',
+            },
+            {
+                x: 259, // 6% from right (65px), centered within 40% width (432px) = 259px from center
+                y: -350, // Moved down from -432 to -350
+                width: 432, // 40% of 1080px
+                alignment: 'right',
+            },
+        ],
+        fontSizes: [1.0, 0.80],
     },
 };
 /**