ugcinc-render 1.5.17 → 1.5.18

package/dist/index.js

@@ -401,15 +401,48 @@ function calculateAutoWidthAndLines({
   letterSpacing,
   lineHeight
 }) {
+  console.log("[TextElement/calculateAutoWidthAndLines] ===== START CALCULATION =====");
+  console.log("[TextElement/calculateAutoWidthAndLines] Input params:", {
+    text: text.substring(0, 100) + (text.length > 100 ? "..." : ""),
+    textLength: text.length,
+    maxWidth,
+    paddingLeft,
+    paddingRight,
+    fontSize,
+    fontWeight,
+    fontFamily,
+    letterSpacing,
+    lineHeight
+  });
   if (typeof document === "undefined") {
+    console.log("[TextElement/calculateAutoWidthAndLines] SSR mode - returning maxWidth");
     return { width: maxWidth, lines: [text] };
   }
+  if (typeof document.fonts !== "undefined") {
+    const fontChecks = {
+      "SF Pro normal": document.fonts.check(`normal ${fontSize}px "SF Pro"`),
+      "SF Pro bold": document.fonts.check(`bold ${fontSize}px "SF Pro"`),
+      "TikTok Sans normal": document.fonts.check(`normal ${fontSize}px "TikTok Sans"`),
+      "TikTok Sans bold": document.fonts.check(`bold ${fontSize}px "TikTok Sans"`),
+      "requestedFont": document.fonts.check(`${fontWeight} ${fontSize}px ${fontFamily.split(",")[0]}`)
+    };
+    console.log("[TextElement/calculateAutoWidthAndLines] Font loading status:", fontChecks);
+    const loadedFonts = [];
+    document.fonts.forEach((font) => {
+      loadedFonts.push(`${font.family} (weight: ${font.weight}, status: ${font.status})`);
+    });
+    console.log("[TextElement/calculateAutoWidthAndLines] All document.fonts:", loadedFonts);
+  } else {
+    console.log("[TextElement/calculateAutoWidthAndLines] document.fonts API not available");
+  }
   const availableWidth = maxWidth - paddingLeft - paddingRight;
+  console.log("[TextElement/calculateAutoWidthAndLines] Available width for text:", availableWidth);
   if (availableWidth <= 0) {
+    console.log("[TextElement/calculateAutoWidthAndLines] Available width <= 0, returning maxWidth");
     return { width: maxWidth, lines: [text] };
   }
   const measureSpan = document.createElement("span");
-  measureSpan.style.cssText = `
+  const cssText = `
     position: absolute;
     visibility: hidden;
     pointer-events: none;
@@ -419,16 +452,29 @@ function calculateAutoWidthAndLines({
     letter-spacing: ${letterSpacing}px;
     white-space: nowrap;
   `;
+  measureSpan.style.cssText = cssText;
+  console.log("[TextElement/calculateAutoWidthAndLines] Measurement span CSS:", cssText.replace(/\s+/g, " ").trim());
   document.body.appendChild(measureSpan);
   const measureText = (textToMeasure) => {
     measureSpan.textContent = textToMeasure;
-    return measureSpan.getBoundingClientRect().width;
+    const width = measureSpan.getBoundingClientRect().width;
+    return width;
   };
   measureSpan.textContent = "M";
   const charWidth = measureSpan.getBoundingClientRect().width;
+  console.log('[TextElement/calculateAutoWidthAndLines] Single "M" character width:', charWidth);
+  measureSpan.textContent = "Test String";
+  const testStringWidth = measureSpan.getBoundingClientRect().width;
+  console.log('[TextElement/calculateAutoWidthAndLines] "Test String" width:', testStringWidth);
+  const computedStyle = window.getComputedStyle(measureSpan);
+  console.log("[TextElement/calculateAutoWidthAndLines] Computed font-family:", computedStyle.fontFamily);
+  console.log("[TextElement/calculateAutoWidthAndLines] Computed font-size:", computedStyle.fontSize);
+  console.log("[TextElement/calculateAutoWidthAndLines] Computed font-weight:", computedStyle.fontWeight);
+  console.log("[TextElement/calculateAutoWidthAndLines] Computed letter-spacing:", computedStyle.letterSpacing);
   const words = text.split(/(\s+)/);
   const lines = [];
   let currentLine = "";
+  console.log("[TextElement/calculateAutoWidthAndLines] Word count:", words.filter((w) => w.trim()).length);
   for (let i = 0; i < words.length; i++) {
     const word = words[i];
     if (word === "\n" || word === "\r\n") {
@@ -484,24 +530,60 @@ function calculateAutoWidthAndLines({
     lines.push("");
   }
   let widestLineWidth = 0;
+  const lineWidths = [];
   for (const line of lines) {
     const lineWidth = measureText(line);
+    lineWidths.push({ line: line.substring(0, 50) + (line.length > 50 ? "..." : ""), width: lineWidth });
     widestLineWidth = Math.max(widestLineWidth, lineWidth);
   }
+  console.log("[TextElement/calculateAutoWidthAndLines] Line measurements:", lineWidths);
+  console.log("[TextElement/calculateAutoWidthAndLines] Widest line width:", widestLineWidth);
   document.body.removeChild(measureSpan);
   const calculatedWidth = Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth);
+  console.log("[TextElement/calculateAutoWidthAndLines] Final calculation:", {
+    widestLineWidth,
+    paddingLeft,
+    paddingRight,
+    rawCalculatedWidth: widestLineWidth + paddingLeft + paddingRight,
+    cappedToMaxWidth: calculatedWidth,
+    maxWidth
+  });
+  console.log("[TextElement/calculateAutoWidthAndLines] ===== END CALCULATION =====");
   return { width: calculatedWidth, lines };
 }
 function TextElement({ segment, scale = 1 }) {
   import_react.default.useEffect(() => {
     const fontFamily2 = getFontFamily(segment.fontType ?? TEXT_DEFAULTS.fontType);
-    console.log("[ugcinc-render/TextElement] Rendering with:", {
+    console.log("[TextElement] ===== RENDER EFFECT =====");
+    console.log("[TextElement] Segment ID:", segment.id);
+    console.log("[TextElement] Rendering with:", {
       text: segment.text?.substring(0, 50) + (segment.text?.length > 50 ? "..." : ""),
       fontType: segment.fontType ?? TEXT_DEFAULTS.fontType,
       fontFamily: fontFamily2,
-      hasEmojis: /[\u{1F300}-\u{1F9FF}]/u.test(segment.text || "")
+      hasEmojis: /[\u{1F300}-\u{1F9FF}]/u.test(segment.text || ""),
+      autoWidth: segment.autoWidth,
+      boxAlign: segment.boxAlign
     });
-  }, [segment.text, segment.fontType]);
+    console.log("[TextElement] Segment dimensions:", {
+      xOffset: segment.xOffset,
+      yOffset: segment.yOffset,
+      width: segment.width,
+      height: segment.height
+    });
+    console.log("[TextElement] Segment padding:", {
+      paddingTop: segment.paddingTop,
+      paddingRight: segment.paddingRight,
+      paddingBottom: segment.paddingBottom,
+      paddingLeft: segment.paddingLeft
+    });
+    console.log("[TextElement] Segment font styling:", {
+      fontSize: segment.fontSize,
+      fontWeight: segment.fontWeight,
+      letterSpacing: segment.letterSpacing,
+      lineHeight: segment.lineHeight
+    });
+    console.log("[TextElement] Scale:", scale);
+  }, [segment, scale]);
   const fontType = segment.fontType ?? TEXT_DEFAULTS.fontType;
   const fontSize = (segment.fontSize ?? TEXT_DEFAULTS.fontSize) * scale;
   const fontWeight = segment.fontWeight ?? TEXT_DEFAULTS.fontWeight;
@@ -580,7 +662,7 @@ function TextElement({ segment, scale = 1 }) {
         lineHeight
       });
     }
-    return {
+    const result = {
       calculatedWidth: autoWidth ? finalResult.width : width,
       calculatedLines: autoWidth ? finalResult.lines : [segment.text],
       paddingTop: finalPaddingTop,
@@ -588,6 +670,19 @@ function TextElement({ segment, scale = 1 }) {
       paddingBottom: finalPaddingBottom,
       paddingLeft: finalPaddingLeft
     };
+    console.log("[TextElement/useMemo] ===== FINAL VALUES =====");
+    console.log("[TextElement/useMemo] autoWidth:", autoWidth);
+    console.log("[TextElement/useMemo] calculatedWidth:", result.calculatedWidth);
+    console.log("[TextElement/useMemo] calculatedLines:", result.calculatedLines);
+    console.log("[TextElement/useMemo] Final padding:", {
+      top: result.paddingTop,
+      right: result.paddingRight,
+      bottom: result.paddingBottom,
+      left: result.paddingLeft
+    });
+    console.log("[TextElement/useMemo] Element width (maxWidth):", width);
+    console.log("[TextElement/useMemo] Difference (maxWidth - calculatedWidth):", width - result.calculatedWidth);
+    return result;
   }, [
     autoWidth,
     segment.text,
@@ -702,11 +797,29 @@ function TextElement({ segment, scale = 1 }) {
     verticalAlign
   ]);
   if (autoWidth) {
+    console.log("[TextElement/render] ===== RENDERING WITH AUTO-WIDTH =====");
+    console.log("[TextElement/render] Segment ID:", segment.id);
+    console.log("[TextElement/render] calculatedWidth being applied:", calculatedWidth);
+    console.log("[TextElement/render] maxWidth (element width):", width);
+    console.log("[TextElement/render] boxAlign:", boxAlign);
+    console.log("[TextElement/render] textAlign:", alignment);
+    console.log("[TextElement/render] Number of lines:", calculatedLines.length);
+    console.log("[TextElement/render] textStyle padding:", textStyle.padding);
+    console.log("[TextElement/render] textStyle fontFamily:", textStyle.fontFamily);
+    console.log("[TextElement/render] textStyle fontSize:", textStyle.fontSize);
+    console.log("[TextElement/render] textStyle letterSpacing:", textStyle.letterSpacing);
     const textContent = calculatedLines.map((line, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.default.Fragment, { children: [
       line,
       index < calculatedLines.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {})
     ] }, index));
     if (backgroundColor) {
+      console.log("[TextElement/render] Rendering WITH background");
+      console.log("[TextElement/render] Background wrapper style:", {
+        width: calculatedWidth,
+        maxWidth: width,
+        backgroundColor: hexToRgba(backgroundColor, backgroundOpacity),
+        borderRadius: borderRadiusStyle
+      });
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: positioningContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "div",
         {
@@ -720,6 +833,7 @@ function TextElement({ segment, scale = 1 }) {
         }
       ) });
     }
+    console.log("[TextElement/render] Rendering WITHOUT background");
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: positioningContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: calculatedWidth, maxWidth: width }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: textStyle, children: textContent }) }) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: positioningContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: backgroundBoxStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: textStyle, children: segment.text }) }) });
@@ -1242,7 +1356,7 @@ function getSortedSegments(config) {
   });
 }
 function elementToTextSegment(elem) {
-  return {
+  const segment = {
     id: elem.id,
     type: "text",
     source: "",
@@ -1280,6 +1394,27 @@ function elementToTextSegment(elem) {
     autoWidth: elem.autoWidth,
     boxAlign: elem.boxAlign
   };
+  console.log("[ImageEditorComposition/elementToTextSegment] ===== CONVERTING ELEMENT TO SEGMENT =====");
+  console.log("[ImageEditorComposition/elementToTextSegment] Element ID:", elem.id);
+  console.log("[ImageEditorComposition/elementToTextSegment] Element text:", (elem.text ?? "").substring(0, 50));
+  console.log("[ImageEditorComposition/elementToTextSegment] Element dimensions:", { x: elem.x, y: elem.y, width: elem.width, height: elem.height });
+  console.log("[ImageEditorComposition/elementToTextSegment] Element padding:", {
+    paddingTop: elem.paddingTop,
+    paddingRight: elem.paddingRight,
+    paddingBottom: elem.paddingBottom,
+    paddingLeft: elem.paddingLeft
+  });
+  console.log("[ImageEditorComposition/elementToTextSegment] Element autoWidth:", elem.autoWidth, "boxAlign:", elem.boxAlign);
+  console.log("[ImageEditorComposition/elementToTextSegment] Element font:", elem.font, "fontSize:", elem.fontSize, "fontWeight:", elem.fontWeight);
+  console.log("[ImageEditorComposition/elementToTextSegment] Element letterSpacing:", elem.letterSpacing, "lineHeight:", elem.lineHeight);
+  console.log("[ImageEditorComposition/elementToTextSegment] Segment created:", {
+    fontType: segment.fontType,
+    fontSize: segment.fontSize,
+    fontWeight: segment.fontWeight,
+    letterSpacing: segment.letterSpacing,
+    lineHeight: segment.lineHeight
+  });
+  return segment;
 }
 function elementToImageSegment(elem, source) {
   return {
@@ -1315,8 +1450,20 @@ function ImageEditorComposition({
   textValues = {},
   dynamicCrop
 }) {
+  console.log("[ImageEditorComposition] ===== COMPOSITION RENDER =====");
+  console.log("[ImageEditorComposition] Props received:", {
+    hasConfig: !!config,
+    hasElements: !!elements,
+    elementCount: elements?.length ?? 0,
+    width,
+    height,
+    scale,
+    backgroundType,
+    textValuesKeys: Object.keys(textValues)
+  });
   const canvasWidth = width ?? config?.width ?? 1080;
   const canvasHeight = height ?? config?.height ?? 1920;
+  console.log("[ImageEditorComposition] Canvas dimensions:", { canvasWidth, canvasHeight });
   const resolvedElements = (0, import_react3.useMemo)(() => {
     if (!elements) return null;
     const result = resolveElementPositions(elements, textValues);

package/dist/index.mjs

@@ -315,15 +315,48 @@ function calculateAutoWidthAndLines({
   letterSpacing,
   lineHeight
 }) {
+  console.log("[TextElement/calculateAutoWidthAndLines] ===== START CALCULATION =====");
+  console.log("[TextElement/calculateAutoWidthAndLines] Input params:", {
+    text: text.substring(0, 100) + (text.length > 100 ? "..." : ""),
+    textLength: text.length,
+    maxWidth,
+    paddingLeft,
+    paddingRight,
+    fontSize,
+    fontWeight,
+    fontFamily,
+    letterSpacing,
+    lineHeight
+  });
   if (typeof document === "undefined") {
+    console.log("[TextElement/calculateAutoWidthAndLines] SSR mode - returning maxWidth");
     return { width: maxWidth, lines: [text] };
   }
+  if (typeof document.fonts !== "undefined") {
+    const fontChecks = {
+      "SF Pro normal": document.fonts.check(`normal ${fontSize}px "SF Pro"`),
+      "SF Pro bold": document.fonts.check(`bold ${fontSize}px "SF Pro"`),
+      "TikTok Sans normal": document.fonts.check(`normal ${fontSize}px "TikTok Sans"`),
+      "TikTok Sans bold": document.fonts.check(`bold ${fontSize}px "TikTok Sans"`),
+      "requestedFont": document.fonts.check(`${fontWeight} ${fontSize}px ${fontFamily.split(",")[0]}`)
+    };
+    console.log("[TextElement/calculateAutoWidthAndLines] Font loading status:", fontChecks);
+    const loadedFonts = [];
+    document.fonts.forEach((font) => {
+      loadedFonts.push(`${font.family} (weight: ${font.weight}, status: ${font.status})`);
+    });
+    console.log("[TextElement/calculateAutoWidthAndLines] All document.fonts:", loadedFonts);
+  } else {
+    console.log("[TextElement/calculateAutoWidthAndLines] document.fonts API not available");
+  }
   const availableWidth = maxWidth - paddingLeft - paddingRight;
+  console.log("[TextElement/calculateAutoWidthAndLines] Available width for text:", availableWidth);
   if (availableWidth <= 0) {
+    console.log("[TextElement/calculateAutoWidthAndLines] Available width <= 0, returning maxWidth");
     return { width: maxWidth, lines: [text] };
   }
   const measureSpan = document.createElement("span");
-  measureSpan.style.cssText = `
+  const cssText = `
     position: absolute;
     visibility: hidden;
     pointer-events: none;
@@ -333,16 +366,29 @@ function calculateAutoWidthAndLines({
     letter-spacing: ${letterSpacing}px;
     white-space: nowrap;
   `;
+  measureSpan.style.cssText = cssText;
+  console.log("[TextElement/calculateAutoWidthAndLines] Measurement span CSS:", cssText.replace(/\s+/g, " ").trim());
   document.body.appendChild(measureSpan);
   const measureText = (textToMeasure) => {
     measureSpan.textContent = textToMeasure;
-    return measureSpan.getBoundingClientRect().width;
+    const width = measureSpan.getBoundingClientRect().width;
+    return width;
   };
   measureSpan.textContent = "M";
   const charWidth = measureSpan.getBoundingClientRect().width;
+  console.log('[TextElement/calculateAutoWidthAndLines] Single "M" character width:', charWidth);
+  measureSpan.textContent = "Test String";
+  const testStringWidth = measureSpan.getBoundingClientRect().width;
+  console.log('[TextElement/calculateAutoWidthAndLines] "Test String" width:', testStringWidth);
+  const computedStyle = window.getComputedStyle(measureSpan);
+  console.log("[TextElement/calculateAutoWidthAndLines] Computed font-family:", computedStyle.fontFamily);
+  console.log("[TextElement/calculateAutoWidthAndLines] Computed font-size:", computedStyle.fontSize);
+  console.log("[TextElement/calculateAutoWidthAndLines] Computed font-weight:", computedStyle.fontWeight);
+  console.log("[TextElement/calculateAutoWidthAndLines] Computed letter-spacing:", computedStyle.letterSpacing);
   const words = text.split(/(\s+)/);
   const lines = [];
   let currentLine = "";
+  console.log("[TextElement/calculateAutoWidthAndLines] Word count:", words.filter((w) => w.trim()).length);
   for (let i = 0; i < words.length; i++) {
     const word = words[i];
     if (word === "\n" || word === "\r\n") {
@@ -398,24 +444,60 @@ function calculateAutoWidthAndLines({
     lines.push("");
   }
   let widestLineWidth = 0;
+  const lineWidths = [];
   for (const line of lines) {
     const lineWidth = measureText(line);
+    lineWidths.push({ line: line.substring(0, 50) + (line.length > 50 ? "..." : ""), width: lineWidth });
     widestLineWidth = Math.max(widestLineWidth, lineWidth);
   }
+  console.log("[TextElement/calculateAutoWidthAndLines] Line measurements:", lineWidths);
+  console.log("[TextElement/calculateAutoWidthAndLines] Widest line width:", widestLineWidth);
   document.body.removeChild(measureSpan);
   const calculatedWidth = Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth);
+  console.log("[TextElement/calculateAutoWidthAndLines] Final calculation:", {
+    widestLineWidth,
+    paddingLeft,
+    paddingRight,
+    rawCalculatedWidth: widestLineWidth + paddingLeft + paddingRight,
+    cappedToMaxWidth: calculatedWidth,
+    maxWidth
+  });
+  console.log("[TextElement/calculateAutoWidthAndLines] ===== END CALCULATION =====");
   return { width: calculatedWidth, lines };
 }
 function TextElement({ segment, scale = 1 }) {
   React.useEffect(() => {
     const fontFamily2 = getFontFamily(segment.fontType ?? TEXT_DEFAULTS.fontType);
-    console.log("[ugcinc-render/TextElement] Rendering with:", {
+    console.log("[TextElement] ===== RENDER EFFECT =====");
+    console.log("[TextElement] Segment ID:", segment.id);
+    console.log("[TextElement] Rendering with:", {
       text: segment.text?.substring(0, 50) + (segment.text?.length > 50 ? "..." : ""),
       fontType: segment.fontType ?? TEXT_DEFAULTS.fontType,
       fontFamily: fontFamily2,
-      hasEmojis: /[\u{1F300}-\u{1F9FF}]/u.test(segment.text || "")
+      hasEmojis: /[\u{1F300}-\u{1F9FF}]/u.test(segment.text || ""),
+      autoWidth: segment.autoWidth,
+      boxAlign: segment.boxAlign
     });
-  }, [segment.text, segment.fontType]);
+    console.log("[TextElement] Segment dimensions:", {
+      xOffset: segment.xOffset,
+      yOffset: segment.yOffset,
+      width: segment.width,
+      height: segment.height
+    });
+    console.log("[TextElement] Segment padding:", {
+      paddingTop: segment.paddingTop,
+      paddingRight: segment.paddingRight,
+      paddingBottom: segment.paddingBottom,
+      paddingLeft: segment.paddingLeft
+    });
+    console.log("[TextElement] Segment font styling:", {
+      fontSize: segment.fontSize,
+      fontWeight: segment.fontWeight,
+      letterSpacing: segment.letterSpacing,
+      lineHeight: segment.lineHeight
+    });
+    console.log("[TextElement] Scale:", scale);
+  }, [segment, scale]);
   const fontType = segment.fontType ?? TEXT_DEFAULTS.fontType;
   const fontSize = (segment.fontSize ?? TEXT_DEFAULTS.fontSize) * scale;
   const fontWeight = segment.fontWeight ?? TEXT_DEFAULTS.fontWeight;
@@ -494,7 +576,7 @@ function TextElement({ segment, scale = 1 }) {
         lineHeight
       });
     }
-    return {
+    const result = {
       calculatedWidth: autoWidth ? finalResult.width : width,
       calculatedLines: autoWidth ? finalResult.lines : [segment.text],
       paddingTop: finalPaddingTop,
@@ -502,6 +584,19 @@ function TextElement({ segment, scale = 1 }) {
       paddingBottom: finalPaddingBottom,
       paddingLeft: finalPaddingLeft
     };
+    console.log("[TextElement/useMemo] ===== FINAL VALUES =====");
+    console.log("[TextElement/useMemo] autoWidth:", autoWidth);
+    console.log("[TextElement/useMemo] calculatedWidth:", result.calculatedWidth);
+    console.log("[TextElement/useMemo] calculatedLines:", result.calculatedLines);
+    console.log("[TextElement/useMemo] Final padding:", {
+      top: result.paddingTop,
+      right: result.paddingRight,
+      bottom: result.paddingBottom,
+      left: result.paddingLeft
+    });
+    console.log("[TextElement/useMemo] Element width (maxWidth):", width);
+    console.log("[TextElement/useMemo] Difference (maxWidth - calculatedWidth):", width - result.calculatedWidth);
+    return result;
   }, [
     autoWidth,
     segment.text,
@@ -616,11 +711,29 @@ function TextElement({ segment, scale = 1 }) {
     verticalAlign
   ]);
   if (autoWidth) {
+    console.log("[TextElement/render] ===== RENDERING WITH AUTO-WIDTH =====");
+    console.log("[TextElement/render] Segment ID:", segment.id);
+    console.log("[TextElement/render] calculatedWidth being applied:", calculatedWidth);
+    console.log("[TextElement/render] maxWidth (element width):", width);
+    console.log("[TextElement/render] boxAlign:", boxAlign);
+    console.log("[TextElement/render] textAlign:", alignment);
+    console.log("[TextElement/render] Number of lines:", calculatedLines.length);
+    console.log("[TextElement/render] textStyle padding:", textStyle.padding);
+    console.log("[TextElement/render] textStyle fontFamily:", textStyle.fontFamily);
+    console.log("[TextElement/render] textStyle fontSize:", textStyle.fontSize);
+    console.log("[TextElement/render] textStyle letterSpacing:", textStyle.letterSpacing);
     const textContent = calculatedLines.map((line, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
       line,
       index < calculatedLines.length - 1 && /* @__PURE__ */ jsx("br", {})
     ] }, index));
     if (backgroundColor) {
+      console.log("[TextElement/render] Rendering WITH background");
+      console.log("[TextElement/render] Background wrapper style:", {
+        width: calculatedWidth,
+        maxWidth: width,
+        backgroundColor: hexToRgba(backgroundColor, backgroundOpacity),
+        borderRadius: borderRadiusStyle
+      });
       return /* @__PURE__ */ jsx("div", { style: positioningContainerStyle, children: /* @__PURE__ */ jsx(
         "div",
         {
@@ -634,6 +747,7 @@ function TextElement({ segment, scale = 1 }) {
         }
       ) });
     }
+    console.log("[TextElement/render] Rendering WITHOUT background");
     return /* @__PURE__ */ jsx("div", { style: positioningContainerStyle, children: /* @__PURE__ */ jsx("div", { style: { width: calculatedWidth, maxWidth: width }, children: /* @__PURE__ */ jsx("div", { style: textStyle, children: textContent }) }) });
   }
   return /* @__PURE__ */ jsx("div", { style: positioningContainerStyle, children: /* @__PURE__ */ jsx("div", { style: backgroundBoxStyle, children: /* @__PURE__ */ jsx("div", { style: textStyle, children: segment.text }) }) });
@@ -1156,7 +1270,7 @@ function getSortedSegments(config) {
   });
 }
 function elementToTextSegment(elem) {
-  return {
+  const segment = {
     id: elem.id,
     type: "text",
     source: "",
@@ -1194,6 +1308,27 @@ function elementToTextSegment(elem) {
     autoWidth: elem.autoWidth,
     boxAlign: elem.boxAlign
   };
+  console.log("[ImageEditorComposition/elementToTextSegment] ===== CONVERTING ELEMENT TO SEGMENT =====");
+  console.log("[ImageEditorComposition/elementToTextSegment] Element ID:", elem.id);
+  console.log("[ImageEditorComposition/elementToTextSegment] Element text:", (elem.text ?? "").substring(0, 50));
+  console.log("[ImageEditorComposition/elementToTextSegment] Element dimensions:", { x: elem.x, y: elem.y, width: elem.width, height: elem.height });
+  console.log("[ImageEditorComposition/elementToTextSegment] Element padding:", {
+    paddingTop: elem.paddingTop,
+    paddingRight: elem.paddingRight,
+    paddingBottom: elem.paddingBottom,
+    paddingLeft: elem.paddingLeft
+  });
+  console.log("[ImageEditorComposition/elementToTextSegment] Element autoWidth:", elem.autoWidth, "boxAlign:", elem.boxAlign);
+  console.log("[ImageEditorComposition/elementToTextSegment] Element font:", elem.font, "fontSize:", elem.fontSize, "fontWeight:", elem.fontWeight);
+  console.log("[ImageEditorComposition/elementToTextSegment] Element letterSpacing:", elem.letterSpacing, "lineHeight:", elem.lineHeight);
+  console.log("[ImageEditorComposition/elementToTextSegment] Segment created:", {
+    fontType: segment.fontType,
+    fontSize: segment.fontSize,
+    fontWeight: segment.fontWeight,
+    letterSpacing: segment.letterSpacing,
+    lineHeight: segment.lineHeight
+  });
+  return segment;
 }
 function elementToImageSegment(elem, source) {
   return {
@@ -1229,8 +1364,20 @@ function ImageEditorComposition({
   textValues = {},
   dynamicCrop
 }) {
+  console.log("[ImageEditorComposition] ===== COMPOSITION RENDER =====");
+  console.log("[ImageEditorComposition] Props received:", {
+    hasConfig: !!config,
+    hasElements: !!elements,
+    elementCount: elements?.length ?? 0,
+    width,
+    height,
+    scale,
+    backgroundType,
+    textValuesKeys: Object.keys(textValues)
+  });
   const canvasWidth = width ?? config?.width ?? 1080;
   const canvasHeight = height ?? config?.height ?? 1920;
+  console.log("[ImageEditorComposition] Canvas dimensions:", { canvasWidth, canvasHeight });
   const resolvedElements = useMemo3(() => {
     if (!elements) return null;
     const result = resolveElementPositions(elements, textValues);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugcinc-render",
-  "version": "1.5.17",
+  "version": "1.5.18",
   "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",