ugcinc-render 1.5.18 → 1.5.20

package/dist/index.js

@@ -401,48 +401,15 @@ 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");
-  const cssText = `
+  measureSpan.style.cssText = `
     position: absolute;
     visibility: hidden;
     pointer-events: none;
@@ -452,43 +419,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 computedStyle = window.getComputedStyle(measureSpan);
+  const computedFontFamily = computedStyle.fontFamily;
+  const requestedFontLoaded = typeof document.fonts !== "undefined" ? document.fonts.check(`${fontWeight} ${fontSize}px ${fontFamily.split(",")[0]}`) : "unknown";
   const measureText = (textToMeasure) => {
     measureSpan.textContent = textToMeasure;
-    const width = measureSpan.getBoundingClientRect().width;
-    return width;
+    return measureSpan.getBoundingClientRect().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 mWidth = measureSpan.getBoundingClientRect().width;
   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") {
-      if (currentLine) {
-        lines.push(currentLine);
-      }
+      if (currentLine) lines.push(currentLine);
       currentLine = "";
       continue;
     }
     if (!word) continue;
     if (/^\s+$/.test(word)) {
-      if (currentLine) {
-        currentLine += word;
-      }
+      if (currentLine) currentLine += word;
       continue;
     }
     const testLine = currentLine + word;
@@ -523,67 +476,34 @@ function calculateAutoWidthAndLines({
       currentLine = testLine;
     }
   }
-  if (currentLine.trim()) {
-    lines.push(currentLine.trimEnd());
-  }
-  if (lines.length === 0) {
-    lines.push("");
-  }
+  if (currentLine.trim()) lines.push(currentLine.trimEnd());
+  if (lines.length === 0) 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 =====");
+  console.log("[TextElement] WIDTH_CALC:", JSON.stringify({
+    text: text.substring(0, 30),
+    fontFamily: fontFamily.split(",")[0],
+    computedFont: computedFontFamily.split(",")[0],
+    fontLoaded: requestedFontLoaded,
+    fontSize,
+    fontWeight,
+    letterSpacing,
+    mWidth: Math.round(mWidth * 100) / 100,
+    widestLine: Math.round(widestLineWidth * 100) / 100,
+    paddingL: paddingLeft,
+    paddingR: paddingRight,
+    calcWidth: Math.round(calculatedWidth * 100) / 100,
+    maxWidth,
+    lines: lines.length
+  }));
   return { width: calculatedWidth, lines };
 }
 function TextElement({ segment, scale = 1 }) {
-  import_react.default.useEffect(() => {
-    const fontFamily2 = getFontFamily(segment.fontType ?? TEXT_DEFAULTS.fontType);
-    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 || ""),
-      autoWidth: segment.autoWidth,
-      boxAlign: segment.boxAlign
-    });
-    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;
@@ -662,7 +582,7 @@ function TextElement({ segment, scale = 1 }) {
         lineHeight
       });
     }
-    const result = {
+    return {
       calculatedWidth: autoWidth ? finalResult.width : width,
       calculatedLines: autoWidth ? finalResult.lines : [segment.text],
       paddingTop: finalPaddingTop,
@@ -670,19 +590,6 @@ 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,
@@ -718,24 +625,11 @@ function TextElement({ segment, scale = 1 }) {
     transformOrigin: "center center",
     display: "flex",
     flexDirection: "column",
-    // Vertical alignment within the container
     justifyContent: verticalAlign === "top" ? "flex-start" : verticalAlign === "bottom" ? "flex-end" : "center",
-    // Horizontal alignment (boxAlign) - only applies when autoWidth is enabled
     alignItems: autoWidth ? boxAlign === "center" ? "center" : boxAlign === "right" ? "flex-end" : "flex-start" : "stretch"
   }), [x, y, width, height, rotation, verticalAlign, autoWidth, boxAlign]);
   const backgroundBoxStyle = (0, import_react.useMemo)(() => {
-    const baseStyle = autoWidth ? {
-      // Use explicit calculated width instead of fit-content
-      // This fixes the issue where multi-line text doesn't shrink to widest line
-      width: calculatedWidth,
-      maxWidth: width
-    } : {
-      // When not autoWidth, let the text div handle everything
-      display: "flex",
-      flexDirection: "column",
-      flex: 1,
-      minHeight: 0
-    };
+    const baseStyle = autoWidth ? { width: calculatedWidth, maxWidth: width } : { display: "flex", flexDirection: "column", flex: 1, minHeight: 0 };
     if (!backgroundColor) return baseStyle;
     return {
       ...baseStyle,
@@ -750,12 +644,10 @@ function TextElement({ segment, scale = 1 }) {
     color,
     lineHeight,
     letterSpacing,
-    // textAlign works for multi-line text within the (possibly auto-width) box
     textAlign: alignment === "justify" ? "justify" : alignment,
     padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
     whiteSpace: "pre-wrap",
     wordBreak: "break-word",
-    // When not autoWidth, handle vertical alignment via flex
     ...!autoWidth && {
       display: "flex",
       flexDirection: "column",
@@ -763,7 +655,6 @@ function TextElement({ segment, scale = 1 }) {
       flex: 1,
       minHeight: 0
     },
-    // Text stroke using text-shadow for cross-browser support
     ...strokeWidth > 0 && strokeColor && {
       textShadow: `
         -${strokeWidth}px -${strokeWidth}px 0 ${strokeColor},
@@ -775,7 +666,6 @@ function TextElement({ segment, scale = 1 }) {
         -${strokeWidth}px 0 0 ${strokeColor},
         ${strokeWidth}px 0 0 ${strokeColor}
       `,
-      // Also use WebKit text stroke for better quality where supported
       WebkitTextStroke: `${strokeWidth}px ${strokeColor}`,
       paintOrder: "stroke fill"
     }
@@ -797,29 +687,11 @@ 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",
         {
@@ -833,7 +705,6 @@ 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 }) }) });
@@ -1394,26 +1265,17 @@ 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
-  });
+  console.log("[Composition] ELEMENT:", JSON.stringify({
+    id: elem.id,
+    text: (elem.text ?? "").substring(0, 20),
+    w: elem.width,
+    h: elem.height,
+    font: elem.font,
+    fontSize: elem.fontSize,
+    autoWidth: elem.autoWidth,
+    pL: elem.paddingLeft,
+    pR: elem.paddingRight
+  }));
   return segment;
 }
 function elementToImageSegment(elem, source) {
@@ -1450,20 +1312,45 @@ 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 [fontsLoaded, setFontsLoaded] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => {
+    const handle = (0, import_remotion2.delayRender)("Loading fonts...");
+    const loadFonts = async () => {
+      try {
+        if (typeof document !== "undefined" && document.fonts) {
+          console.log("[Composition] Waiting for fonts to load...");
+          await document.fonts.ready;
+          const fontChecks = await Promise.all([
+            document.fonts.load('normal 48px "SF Pro"').catch(() => []),
+            document.fonts.load('bold 48px "SF Pro"').catch(() => []),
+            document.fonts.load('normal 48px "TikTok Sans"').catch(() => []),
+            document.fonts.load('bold 48px "TikTok Sans"').catch(() => [])
+          ]);
+          console.log("[Composition] Fonts loaded:", {
+            sfProNormal: document.fonts.check('normal 48px "SF Pro"'),
+            sfProBold: document.fonts.check('bold 48px "SF Pro"'),
+            tiktokNormal: document.fonts.check('normal 48px "TikTok Sans"'),
+            tiktokBold: document.fonts.check('bold 48px "TikTok Sans"')
+          });
+        }
+        setFontsLoaded(true);
+        (0, import_remotion2.continueRender)(handle);
+      } catch (err) {
+        console.error("[Composition] Font loading error:", err);
+        setFontsLoaded(true);
+        (0, import_remotion2.continueRender)(handle);
+      }
+    };
+    loadFonts();
+    return () => {
+      try {
+        (0, import_remotion2.continueRender)(handle);
+      } catch {
+      }
+    };
+  }, []);
   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);
@@ -1516,6 +1403,9 @@ function ImageEditorComposition({
     return void 0;
   };
   const containerBgColor = backgroundType === "color" && backgroundColor ? backgroundColor : "#000000";
+  if (!fontsLoaded) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_remotion2.AbsoluteFill, { style: { backgroundColor: containerBgColor } });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_remotion2.AbsoluteFill, { style: { backgroundColor: containerBgColor }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {

package/dist/index.mjs

@@ -8,8 +8,8 @@ var DIMENSION_PRESETS = {
 };
 
 // src/compositions/ImageEditorComposition.tsx
-import { useMemo as useMemo3 } from "react";
-import { AbsoluteFill, Img as Img2 } from "remotion";
+import { useMemo as useMemo3, useState, useEffect } from "react";
+import { AbsoluteFill, Img as Img2, delayRender, continueRender } from "remotion";
 
 // src/components/TextElement.tsx
 import React, { useMemo } from "react";
@@ -315,48 +315,15 @@ 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");
-  const cssText = `
+  measureSpan.style.cssText = `
     position: absolute;
     visibility: hidden;
     pointer-events: none;
@@ -366,43 +333,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 computedStyle = window.getComputedStyle(measureSpan);
+  const computedFontFamily = computedStyle.fontFamily;
+  const requestedFontLoaded = typeof document.fonts !== "undefined" ? document.fonts.check(`${fontWeight} ${fontSize}px ${fontFamily.split(",")[0]}`) : "unknown";
   const measureText = (textToMeasure) => {
     measureSpan.textContent = textToMeasure;
-    const width = measureSpan.getBoundingClientRect().width;
-    return width;
+    return measureSpan.getBoundingClientRect().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 mWidth = measureSpan.getBoundingClientRect().width;
   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") {
-      if (currentLine) {
-        lines.push(currentLine);
-      }
+      if (currentLine) lines.push(currentLine);
       currentLine = "";
       continue;
     }
     if (!word) continue;
     if (/^\s+$/.test(word)) {
-      if (currentLine) {
-        currentLine += word;
-      }
+      if (currentLine) currentLine += word;
       continue;
     }
     const testLine = currentLine + word;
@@ -437,67 +390,34 @@ function calculateAutoWidthAndLines({
       currentLine = testLine;
     }
   }
-  if (currentLine.trim()) {
-    lines.push(currentLine.trimEnd());
-  }
-  if (lines.length === 0) {
-    lines.push("");
-  }
+  if (currentLine.trim()) lines.push(currentLine.trimEnd());
+  if (lines.length === 0) 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 =====");
+  console.log("[TextElement] WIDTH_CALC:", JSON.stringify({
+    text: text.substring(0, 30),
+    fontFamily: fontFamily.split(",")[0],
+    computedFont: computedFontFamily.split(",")[0],
+    fontLoaded: requestedFontLoaded,
+    fontSize,
+    fontWeight,
+    letterSpacing,
+    mWidth: Math.round(mWidth * 100) / 100,
+    widestLine: Math.round(widestLineWidth * 100) / 100,
+    paddingL: paddingLeft,
+    paddingR: paddingRight,
+    calcWidth: Math.round(calculatedWidth * 100) / 100,
+    maxWidth,
+    lines: lines.length
+  }));
   return { width: calculatedWidth, lines };
 }
 function TextElement({ segment, scale = 1 }) {
-  React.useEffect(() => {
-    const fontFamily2 = getFontFamily(segment.fontType ?? TEXT_DEFAULTS.fontType);
-    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 || ""),
-      autoWidth: segment.autoWidth,
-      boxAlign: segment.boxAlign
-    });
-    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;
@@ -576,7 +496,7 @@ function TextElement({ segment, scale = 1 }) {
         lineHeight
       });
     }
-    const result = {
+    return {
       calculatedWidth: autoWidth ? finalResult.width : width,
       calculatedLines: autoWidth ? finalResult.lines : [segment.text],
       paddingTop: finalPaddingTop,
@@ -584,19 +504,6 @@ 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,
@@ -632,24 +539,11 @@ function TextElement({ segment, scale = 1 }) {
     transformOrigin: "center center",
     display: "flex",
     flexDirection: "column",
-    // Vertical alignment within the container
     justifyContent: verticalAlign === "top" ? "flex-start" : verticalAlign === "bottom" ? "flex-end" : "center",
-    // Horizontal alignment (boxAlign) - only applies when autoWidth is enabled
     alignItems: autoWidth ? boxAlign === "center" ? "center" : boxAlign === "right" ? "flex-end" : "flex-start" : "stretch"
   }), [x, y, width, height, rotation, verticalAlign, autoWidth, boxAlign]);
   const backgroundBoxStyle = useMemo(() => {
-    const baseStyle = autoWidth ? {
-      // Use explicit calculated width instead of fit-content
-      // This fixes the issue where multi-line text doesn't shrink to widest line
-      width: calculatedWidth,
-      maxWidth: width
-    } : {
-      // When not autoWidth, let the text div handle everything
-      display: "flex",
-      flexDirection: "column",
-      flex: 1,
-      minHeight: 0
-    };
+    const baseStyle = autoWidth ? { width: calculatedWidth, maxWidth: width } : { display: "flex", flexDirection: "column", flex: 1, minHeight: 0 };
     if (!backgroundColor) return baseStyle;
     return {
       ...baseStyle,
@@ -664,12 +558,10 @@ function TextElement({ segment, scale = 1 }) {
     color,
     lineHeight,
     letterSpacing,
-    // textAlign works for multi-line text within the (possibly auto-width) box
     textAlign: alignment === "justify" ? "justify" : alignment,
     padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
     whiteSpace: "pre-wrap",
     wordBreak: "break-word",
-    // When not autoWidth, handle vertical alignment via flex
     ...!autoWidth && {
       display: "flex",
       flexDirection: "column",
@@ -677,7 +569,6 @@ function TextElement({ segment, scale = 1 }) {
       flex: 1,
       minHeight: 0
     },
-    // Text stroke using text-shadow for cross-browser support
     ...strokeWidth > 0 && strokeColor && {
       textShadow: `
         -${strokeWidth}px -${strokeWidth}px 0 ${strokeColor},
@@ -689,7 +580,6 @@ function TextElement({ segment, scale = 1 }) {
         -${strokeWidth}px 0 0 ${strokeColor},
         ${strokeWidth}px 0 0 ${strokeColor}
       `,
-      // Also use WebKit text stroke for better quality where supported
       WebkitTextStroke: `${strokeWidth}px ${strokeColor}`,
       paintOrder: "stroke fill"
     }
@@ -711,29 +601,11 @@ 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",
         {
@@ -747,7 +619,6 @@ 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 }) }) });
@@ -1308,26 +1179,17 @@ 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
-  });
+  console.log("[Composition] ELEMENT:", JSON.stringify({
+    id: elem.id,
+    text: (elem.text ?? "").substring(0, 20),
+    w: elem.width,
+    h: elem.height,
+    font: elem.font,
+    fontSize: elem.fontSize,
+    autoWidth: elem.autoWidth,
+    pL: elem.paddingLeft,
+    pR: elem.paddingRight
+  }));
   return segment;
 }
 function elementToImageSegment(elem, source) {
@@ -1364,20 +1226,45 @@ 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 [fontsLoaded, setFontsLoaded] = useState(false);
+  useEffect(() => {
+    const handle = delayRender("Loading fonts...");
+    const loadFonts = async () => {
+      try {
+        if (typeof document !== "undefined" && document.fonts) {
+          console.log("[Composition] Waiting for fonts to load...");
+          await document.fonts.ready;
+          const fontChecks = await Promise.all([
+            document.fonts.load('normal 48px "SF Pro"').catch(() => []),
+            document.fonts.load('bold 48px "SF Pro"').catch(() => []),
+            document.fonts.load('normal 48px "TikTok Sans"').catch(() => []),
+            document.fonts.load('bold 48px "TikTok Sans"').catch(() => [])
+          ]);
+          console.log("[Composition] Fonts loaded:", {
+            sfProNormal: document.fonts.check('normal 48px "SF Pro"'),
+            sfProBold: document.fonts.check('bold 48px "SF Pro"'),
+            tiktokNormal: document.fonts.check('normal 48px "TikTok Sans"'),
+            tiktokBold: document.fonts.check('bold 48px "TikTok Sans"')
+          });
+        }
+        setFontsLoaded(true);
+        continueRender(handle);
+      } catch (err) {
+        console.error("[Composition] Font loading error:", err);
+        setFontsLoaded(true);
+        continueRender(handle);
+      }
+    };
+    loadFonts();
+    return () => {
+      try {
+        continueRender(handle);
+      } catch {
+      }
+    };
+  }, []);
   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);
@@ -1430,6 +1317,9 @@ function ImageEditorComposition({
     return void 0;
   };
   const containerBgColor = backgroundType === "color" && backgroundColor ? backgroundColor : "#000000";
+  if (!fontsLoaded) {
+    return /* @__PURE__ */ jsx3(AbsoluteFill, { style: { backgroundColor: containerBgColor } });
+  }
   return /* @__PURE__ */ jsx3(AbsoluteFill, { style: { backgroundColor: containerBgColor }, children: /* @__PURE__ */ jsxs2(
     "div",
     {
@@ -1942,10 +1832,10 @@ function generateOverlayId() {
 }
 
 // src/hooks/index.ts
-import { useEffect, useState, useMemo as useMemo6 } from "react";
+import { useEffect as useEffect2, useState as useState2, useMemo as useMemo6 } from "react";
 function useFontsLoaded() {
-  const [loaded, setLoaded] = useState(areFontsLoaded());
-  useEffect(() => {
+  const [loaded, setLoaded] = useState2(areFontsLoaded());
+  useEffect2(() => {
     if (!loaded) {
       preloadFonts().then(() => setLoaded(true)).catch(console.error);
     }
@@ -1953,8 +1843,8 @@ function useFontsLoaded() {
   return loaded;
 }
 function useImageLoader(src) {
-  const [image, setImage] = useState(null);
-  useEffect(() => {
+  const [image, setImage] = useState2(null);
+  useEffect2(() => {
     if (!src) {
       setImage(null);
       return;
@@ -1974,9 +1864,9 @@ function useImageLoader(src) {
   return image;
 }
 function useImagePreloader(sources) {
-  const [images, setImages] = useState({});
-  const [loaded, setLoaded] = useState(false);
-  useEffect(() => {
+  const [images, setImages] = useState2({});
+  const [loaded, setLoaded] = useState2(false);
+  useEffect2(() => {
     const entries = Object.entries(sources);
     if (entries.length === 0) {
       setLoaded(true);

package/package.json

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