ugcinc-render 1.5.9 → 1.5.10

package/dist/index.d.mts

@@ -290,10 +290,10 @@ interface ImageEditorElement {
     paddingRight?: number;
     paddingBottom?: number;
     paddingLeft?: number;
-    multiLinePaddingTop?: number;
-    multiLinePaddingRight?: number;
-    multiLinePaddingBottom?: number;
-    multiLinePaddingLeft?: number;
+    multiLineExtraPaddingTop?: number;
+    multiLineExtraPaddingRight?: number;
+    multiLineExtraPaddingBottom?: number;
+    multiLineExtraPaddingLeft?: number;
     /** When true, box shrinks to fit content (width becomes max width) */
     autoWidth?: boolean;
     /** Which side the box anchors to when autoWidth is true */
@@ -622,14 +622,14 @@ interface TextSegment extends VisualSegment {
     paddingBottom?: number;
     /** Left padding in pixels (overrides uniform padding) */
     paddingLeft?: number;
-    /** Top padding for multi-line text (2+ lines) */
-    multiLinePaddingTop?: number;
-    /** Right padding for multi-line text (2+ lines) */
-    multiLinePaddingRight?: number;
-    /** Bottom padding for multi-line text (2+ lines) */
-    multiLinePaddingBottom?: number;
-    /** Left padding for multi-line text (2+ lines) */
-    multiLinePaddingLeft?: number;
+    /** Extra top padding added when text has 2+ lines */
+    multiLineExtraPaddingTop?: number;
+    /** Extra right padding added when text has 2+ lines */
+    multiLineExtraPaddingRight?: number;
+    /** Extra bottom padding added when text has 2+ lines */
+    multiLineExtraPaddingBottom?: number;
+    /** Extra left padding added when text has 2+ lines */
+    multiLineExtraPaddingLeft?: number;
     /** Font family (default: 'arial') */
     fontType?: FontType;
     /** Font size in pixels (default: 40) */

package/dist/index.d.ts

@@ -290,10 +290,10 @@ interface ImageEditorElement {
     paddingRight?: number;
     paddingBottom?: number;
     paddingLeft?: number;
-    multiLinePaddingTop?: number;
-    multiLinePaddingRight?: number;
-    multiLinePaddingBottom?: number;
-    multiLinePaddingLeft?: number;
+    multiLineExtraPaddingTop?: number;
+    multiLineExtraPaddingRight?: number;
+    multiLineExtraPaddingBottom?: number;
+    multiLineExtraPaddingLeft?: number;
     /** When true, box shrinks to fit content (width becomes max width) */
     autoWidth?: boolean;
     /** Which side the box anchors to when autoWidth is true */
@@ -622,14 +622,14 @@ interface TextSegment extends VisualSegment {
     paddingBottom?: number;
     /** Left padding in pixels (overrides uniform padding) */
     paddingLeft?: number;
-    /** Top padding for multi-line text (2+ lines) */
-    multiLinePaddingTop?: number;
-    /** Right padding for multi-line text (2+ lines) */
-    multiLinePaddingRight?: number;
-    /** Bottom padding for multi-line text (2+ lines) */
-    multiLinePaddingBottom?: number;
-    /** Left padding for multi-line text (2+ lines) */
-    multiLinePaddingLeft?: number;
+    /** Extra top padding added when text has 2+ lines */
+    multiLineExtraPaddingTop?: number;
+    /** Extra right padding added when text has 2+ lines */
+    multiLineExtraPaddingRight?: number;
+    /** Extra bottom padding added when text has 2+ lines */
+    multiLineExtraPaddingBottom?: number;
+    /** Extra left padding added when text has 2+ lines */
+    multiLineExtraPaddingLeft?: number;
     /** Font family (default: 'arial') */
     fontType?: FontType;
     /** Font size in pixels (default: 40) */

package/dist/index.js

@@ -420,11 +420,11 @@ function TextElement({ segment, scale = 1 }) {
   const basePaddingRight = segment.paddingRight !== void 0 ? segment.paddingRight * scale : uniformPadding;
   const basePaddingBottom = segment.paddingBottom !== void 0 ? segment.paddingBottom * scale : uniformPadding;
   const basePaddingLeft = segment.paddingLeft !== void 0 ? segment.paddingLeft * scale : uniformPadding;
-  const multiLinePaddingTop = segment.multiLinePaddingTop !== void 0 ? segment.multiLinePaddingTop * scale : void 0;
-  const multiLinePaddingRight = segment.multiLinePaddingRight !== void 0 ? segment.multiLinePaddingRight * scale : void 0;
-  const multiLinePaddingBottom = segment.multiLinePaddingBottom !== void 0 ? segment.multiLinePaddingBottom * scale : void 0;
-  const multiLinePaddingLeft = segment.multiLinePaddingLeft !== void 0 ? segment.multiLinePaddingLeft * scale : void 0;
-  const hasMultiLinePadding = multiLinePaddingTop !== void 0 || multiLinePaddingRight !== void 0 || multiLinePaddingBottom !== void 0 || multiLinePaddingLeft !== void 0;
+  const extraPaddingTop = (segment.multiLineExtraPaddingTop ?? 0) * scale;
+  const extraPaddingRight = (segment.multiLineExtraPaddingRight ?? 0) * scale;
+  const extraPaddingBottom = (segment.multiLineExtraPaddingBottom ?? 0) * scale;
+  const extraPaddingLeft = (segment.multiLineExtraPaddingLeft ?? 0) * scale;
+  const hasExtraPadding = extraPaddingTop > 0 || extraPaddingRight > 0 || extraPaddingBottom > 0 || extraPaddingLeft > 0;
   const x = segment.xOffset * scale;
   const y = segment.yOffset * scale;
   const width = segment.width * scale;
@@ -436,22 +436,14 @@ function TextElement({ segment, scale = 1 }) {
   const backgroundOpacity = segment.backgroundOpacity ?? TEXT_DEFAULTS.backgroundOpacity;
   const backgroundBorderRadius = segment.backgroundBorderRadius;
   const fontFamily = getFontFamily(fontType);
-  const { autoWidthResult, finalPaddingTop, finalPaddingRight, finalPaddingBottom, finalPaddingLeft, isMultiLine } = (0, import_react.useMemo)(() => {
-    let effectivePaddingTop = basePaddingTop;
-    let effectivePaddingRight = basePaddingRight;
-    let effectivePaddingBottom = basePaddingBottom;
-    let effectivePaddingLeft = basePaddingLeft;
-    if (!autoWidth && !hasMultiLinePadding) {
+  const { autoWidthResult, isMultiLine } = (0, import_react.useMemo)(() => {
+    if (!autoWidth && !hasExtraPadding) {
       return {
         autoWidthResult: null,
-        finalPaddingTop: effectivePaddingTop,
-        finalPaddingRight: effectivePaddingRight,
-        finalPaddingBottom: effectivePaddingBottom,
-        finalPaddingLeft: effectivePaddingLeft,
         isMultiLine: false
       };
     }
-    const firstPassResult = calculateAutoWidthAndLines({
+    const result = calculateAutoWidthAndLines({
       text: segment.text,
       maxWidth: width,
       paddingLeft: basePaddingLeft,
@@ -462,67 +454,68 @@ function TextElement({ segment, scale = 1 }) {
       letterSpacing,
       lineHeight
     });
-    const multiLine = firstPassResult.lines.length >= 2;
-    if (multiLine && hasMultiLinePadding) {
-      effectivePaddingTop = multiLinePaddingTop ?? basePaddingTop;
-      effectivePaddingRight = multiLinePaddingRight ?? basePaddingRight;
-      effectivePaddingBottom = multiLinePaddingBottom ?? basePaddingBottom;
-      effectivePaddingLeft = multiLinePaddingLeft ?? basePaddingLeft;
-      if (effectivePaddingLeft !== basePaddingLeft || effectivePaddingRight !== basePaddingRight) {
-        const secondPassResult = calculateAutoWidthAndLines({
-          text: segment.text,
-          maxWidth: width,
-          paddingLeft: effectivePaddingLeft,
-          paddingRight: effectivePaddingRight,
-          fontSize,
-          fontWeight,
-          fontFamily,
-          letterSpacing,
-          lineHeight
-        });
-        return {
-          autoWidthResult: autoWidth ? secondPassResult : null,
-          finalPaddingTop: effectivePaddingTop,
-          finalPaddingRight: effectivePaddingRight,
-          finalPaddingBottom: effectivePaddingBottom,
-          finalPaddingLeft: effectivePaddingLeft,
-          isMultiLine: secondPassResult.lines.length >= 2
-        };
-      }
-    }
     return {
-      autoWidthResult: autoWidth ? firstPassResult : null,
-      finalPaddingTop: effectivePaddingTop,
-      finalPaddingRight: effectivePaddingRight,
-      finalPaddingBottom: effectivePaddingBottom,
-      finalPaddingLeft: effectivePaddingLeft,
-      isMultiLine: multiLine
+      autoWidthResult: autoWidth ? result : null,
+      isMultiLine: result.lines.length >= 2
     };
   }, [
     autoWidth,
     segment.text,
     width,
-    basePaddingTop,
-    basePaddingRight,
-    basePaddingBottom,
     basePaddingLeft,
-    multiLinePaddingTop,
-    multiLinePaddingRight,
-    multiLinePaddingBottom,
-    multiLinePaddingLeft,
-    hasMultiLinePadding,
+    basePaddingRight,
+    hasExtraPadding,
     fontSize,
     fontWeight,
     fontFamily,
     letterSpacing,
     lineHeight
   ]);
-  const calculatedWidth = autoWidthResult?.width ?? width;
   const calculatedLines = autoWidthResult?.lines ?? [segment.text];
-  const paddingTop = finalPaddingTop;
-  const paddingRight = finalPaddingRight;
-  const paddingBottom = finalPaddingBottom;
-  const paddingLeft = finalPaddingLeft;
+  const paddingTop = basePaddingTop + (isMultiLine ? extraPaddingTop : 0);
+  const paddingRight = basePaddingRight + (isMultiLine ? extraPaddingRight : 0);
+  const paddingBottom = basePaddingBottom + (isMultiLine ? extraPaddingBottom : 0);
+  const paddingLeft = basePaddingLeft + (isMultiLine ? extraPaddingLeft : 0);
+  const calculatedWidth = (0, import_react.useMemo)(() => {
+    if (!autoWidth) return width;
+    if (!isMultiLine || extraPaddingLeft === 0 && extraPaddingRight === 0) {
+      return autoWidthResult?.width ?? width;
+    }
+    if (typeof document === "undefined") return width;
+    const measureSpan = document.createElement("span");
+    measureSpan.style.cssText = `
+      position: absolute;
+      visibility: hidden;
+      pointer-events: none;
+      font-family: ${fontFamily};
+      font-size: ${fontSize}px;
+      font-weight: ${fontWeight};
+      letter-spacing: ${letterSpacing}px;
+      white-space: nowrap;
+    `;
+    document.body.appendChild(measureSpan);
+    let widestLineWidth = 0;
+    for (const line of calculatedLines) {
+      measureSpan.textContent = line;
+      widestLineWidth = Math.max(widestLineWidth, measureSpan.getBoundingClientRect().width);
+    }
+    document.body.removeChild(measureSpan);
+    return Math.min(widestLineWidth + paddingLeft + paddingRight, width);
+  }, [
+    autoWidth,
+    autoWidthResult,
+    width,
+    isMultiLine,
+    extraPaddingLeft,
+    extraPaddingRight,
+    paddingLeft,
+    paddingRight,
+    calculatedLines,
+    fontFamily,
+    fontSize,
+    fontWeight,
+    letterSpacing
+  ]);
   const borderRadiusStyle = (0, import_react.useMemo)(() => {
     if (!backgroundBorderRadius) return void 0;
     const radii = getBorderRadii(backgroundBorderRadius);
@@ -1189,10 +1182,10 @@ function elementToTextSegment(elem) {
     paddingRight: elem.paddingRight,
     paddingBottom: elem.paddingBottom,
     paddingLeft: elem.paddingLeft,
-    multiLinePaddingTop: elem.multiLinePaddingTop,
-    multiLinePaddingRight: elem.multiLinePaddingRight,
-    multiLinePaddingBottom: elem.multiLinePaddingBottom,
-    multiLinePaddingLeft: elem.multiLinePaddingLeft,
+    multiLineExtraPaddingTop: elem.multiLineExtraPaddingTop,
+    multiLineExtraPaddingRight: elem.multiLineExtraPaddingRight,
+    multiLineExtraPaddingBottom: elem.multiLineExtraPaddingBottom,
+    multiLineExtraPaddingLeft: elem.multiLineExtraPaddingLeft,
     autoWidth: elem.autoWidth,
     boxAlign: elem.boxAlign
   };

package/dist/index.mjs

@@ -336,11 +336,11 @@ function TextElement({ segment, scale = 1 }) {
   const basePaddingRight = segment.paddingRight !== void 0 ? segment.paddingRight * scale : uniformPadding;
   const basePaddingBottom = segment.paddingBottom !== void 0 ? segment.paddingBottom * scale : uniformPadding;
   const basePaddingLeft = segment.paddingLeft !== void 0 ? segment.paddingLeft * scale : uniformPadding;
-  const multiLinePaddingTop = segment.multiLinePaddingTop !== void 0 ? segment.multiLinePaddingTop * scale : void 0;
-  const multiLinePaddingRight = segment.multiLinePaddingRight !== void 0 ? segment.multiLinePaddingRight * scale : void 0;
-  const multiLinePaddingBottom = segment.multiLinePaddingBottom !== void 0 ? segment.multiLinePaddingBottom * scale : void 0;
-  const multiLinePaddingLeft = segment.multiLinePaddingLeft !== void 0 ? segment.multiLinePaddingLeft * scale : void 0;
-  const hasMultiLinePadding = multiLinePaddingTop !== void 0 || multiLinePaddingRight !== void 0 || multiLinePaddingBottom !== void 0 || multiLinePaddingLeft !== void 0;
+  const extraPaddingTop = (segment.multiLineExtraPaddingTop ?? 0) * scale;
+  const extraPaddingRight = (segment.multiLineExtraPaddingRight ?? 0) * scale;
+  const extraPaddingBottom = (segment.multiLineExtraPaddingBottom ?? 0) * scale;
+  const extraPaddingLeft = (segment.multiLineExtraPaddingLeft ?? 0) * scale;
+  const hasExtraPadding = extraPaddingTop > 0 || extraPaddingRight > 0 || extraPaddingBottom > 0 || extraPaddingLeft > 0;
   const x = segment.xOffset * scale;
   const y = segment.yOffset * scale;
   const width = segment.width * scale;
@@ -352,22 +352,14 @@ function TextElement({ segment, scale = 1 }) {
   const backgroundOpacity = segment.backgroundOpacity ?? TEXT_DEFAULTS.backgroundOpacity;
   const backgroundBorderRadius = segment.backgroundBorderRadius;
   const fontFamily = getFontFamily(fontType);
-  const { autoWidthResult, finalPaddingTop, finalPaddingRight, finalPaddingBottom, finalPaddingLeft, isMultiLine } = useMemo(() => {
-    let effectivePaddingTop = basePaddingTop;
-    let effectivePaddingRight = basePaddingRight;
-    let effectivePaddingBottom = basePaddingBottom;
-    let effectivePaddingLeft = basePaddingLeft;
-    if (!autoWidth && !hasMultiLinePadding) {
+  const { autoWidthResult, isMultiLine } = useMemo(() => {
+    if (!autoWidth && !hasExtraPadding) {
       return {
         autoWidthResult: null,
-        finalPaddingTop: effectivePaddingTop,
-        finalPaddingRight: effectivePaddingRight,
-        finalPaddingBottom: effectivePaddingBottom,
-        finalPaddingLeft: effectivePaddingLeft,
         isMultiLine: false
       };
     }
-    const firstPassResult = calculateAutoWidthAndLines({
+    const result = calculateAutoWidthAndLines({
       text: segment.text,
       maxWidth: width,
       paddingLeft: basePaddingLeft,
@@ -378,67 +370,68 @@ function TextElement({ segment, scale = 1 }) {
       letterSpacing,
       lineHeight
     });
-    const multiLine = firstPassResult.lines.length >= 2;
-    if (multiLine && hasMultiLinePadding) {
-      effectivePaddingTop = multiLinePaddingTop ?? basePaddingTop;
-      effectivePaddingRight = multiLinePaddingRight ?? basePaddingRight;
-      effectivePaddingBottom = multiLinePaddingBottom ?? basePaddingBottom;
-      effectivePaddingLeft = multiLinePaddingLeft ?? basePaddingLeft;
-      if (effectivePaddingLeft !== basePaddingLeft || effectivePaddingRight !== basePaddingRight) {
-        const secondPassResult = calculateAutoWidthAndLines({
-          text: segment.text,
-          maxWidth: width,
-          paddingLeft: effectivePaddingLeft,
-          paddingRight: effectivePaddingRight,
-          fontSize,
-          fontWeight,
-          fontFamily,
-          letterSpacing,
-          lineHeight
-        });
-        return {
-          autoWidthResult: autoWidth ? secondPassResult : null,
-          finalPaddingTop: effectivePaddingTop,
-          finalPaddingRight: effectivePaddingRight,
-          finalPaddingBottom: effectivePaddingBottom,
-          finalPaddingLeft: effectivePaddingLeft,
-          isMultiLine: secondPassResult.lines.length >= 2
-        };
-      }
-    }
     return {
-      autoWidthResult: autoWidth ? firstPassResult : null,
-      finalPaddingTop: effectivePaddingTop,
-      finalPaddingRight: effectivePaddingRight,
-      finalPaddingBottom: effectivePaddingBottom,
-      finalPaddingLeft: effectivePaddingLeft,
-      isMultiLine: multiLine
+      autoWidthResult: autoWidth ? result : null,
+      isMultiLine: result.lines.length >= 2
     };
   }, [
     autoWidth,
     segment.text,
     width,
-    basePaddingTop,
-    basePaddingRight,
-    basePaddingBottom,
     basePaddingLeft,
-    multiLinePaddingTop,
-    multiLinePaddingRight,
-    multiLinePaddingBottom,
-    multiLinePaddingLeft,
-    hasMultiLinePadding,
+    basePaddingRight,
+    hasExtraPadding,
     fontSize,
     fontWeight,
     fontFamily,
     letterSpacing,
     lineHeight
   ]);
-  const calculatedWidth = autoWidthResult?.width ?? width;
   const calculatedLines = autoWidthResult?.lines ?? [segment.text];
-  const paddingTop = finalPaddingTop;
-  const paddingRight = finalPaddingRight;
-  const paddingBottom = finalPaddingBottom;
-  const paddingLeft = finalPaddingLeft;
+  const paddingTop = basePaddingTop + (isMultiLine ? extraPaddingTop : 0);
+  const paddingRight = basePaddingRight + (isMultiLine ? extraPaddingRight : 0);
+  const paddingBottom = basePaddingBottom + (isMultiLine ? extraPaddingBottom : 0);
+  const paddingLeft = basePaddingLeft + (isMultiLine ? extraPaddingLeft : 0);
+  const calculatedWidth = useMemo(() => {
+    if (!autoWidth) return width;
+    if (!isMultiLine || extraPaddingLeft === 0 && extraPaddingRight === 0) {
+      return autoWidthResult?.width ?? width;
+    }
+    if (typeof document === "undefined") return width;
+    const measureSpan = document.createElement("span");
+    measureSpan.style.cssText = `
+      position: absolute;
+      visibility: hidden;
+      pointer-events: none;
+      font-family: ${fontFamily};
+      font-size: ${fontSize}px;
+      font-weight: ${fontWeight};
+      letter-spacing: ${letterSpacing}px;
+      white-space: nowrap;
+    `;
+    document.body.appendChild(measureSpan);
+    let widestLineWidth = 0;
+    for (const line of calculatedLines) {
+      measureSpan.textContent = line;
+      widestLineWidth = Math.max(widestLineWidth, measureSpan.getBoundingClientRect().width);
+    }
+    document.body.removeChild(measureSpan);
+    return Math.min(widestLineWidth + paddingLeft + paddingRight, width);
+  }, [
+    autoWidth,
+    autoWidthResult,
+    width,
+    isMultiLine,
+    extraPaddingLeft,
+    extraPaddingRight,
+    paddingLeft,
+    paddingRight,
+    calculatedLines,
+    fontFamily,
+    fontSize,
+    fontWeight,
+    letterSpacing
+  ]);
   const borderRadiusStyle = useMemo(() => {
     if (!backgroundBorderRadius) return void 0;
     const radii = getBorderRadii(backgroundBorderRadius);
@@ -1105,10 +1098,10 @@ function elementToTextSegment(elem) {
     paddingRight: elem.paddingRight,
     paddingBottom: elem.paddingBottom,
     paddingLeft: elem.paddingLeft,
-    multiLinePaddingTop: elem.multiLinePaddingTop,
-    multiLinePaddingRight: elem.multiLinePaddingRight,
-    multiLinePaddingBottom: elem.multiLinePaddingBottom,
-    multiLinePaddingLeft: elem.multiLinePaddingLeft,
+    multiLineExtraPaddingTop: elem.multiLineExtraPaddingTop,
+    multiLineExtraPaddingRight: elem.multiLineExtraPaddingRight,
+    multiLineExtraPaddingBottom: elem.multiLineExtraPaddingBottom,
+    multiLineExtraPaddingLeft: elem.multiLineExtraPaddingLeft,
     autoWidth: elem.autoWidth,
     boxAlign: elem.boxAlign
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugcinc-render",
-  "version": "1.5.9",
+  "version": "1.5.10",
   "description": "Unified rendering package for UGC Inc - shared types, components, and compositions for pixel-perfect client/server rendering",
   "main": "dist/index.js",
   "module": "dist/index.mjs",