ugcinc-render 1.5.16 → 1.5.18

package/dist/index.d.mts

@@ -1002,6 +1002,10 @@ declare function preloadFonts(): Promise<void>;
  * Check if fonts are loaded
  */
 declare function areFontsLoaded(): boolean;
+/**
+ * Debug utility to log current font status
+ */
+declare function debugFontStatus(): void;
 
 /**
  * Fit calculation utilities for media positioning
@@ -1357,4 +1361,4 @@ declare function useResolvedPositions(elements: ImageEditorElement[], textValues
 
 declare const RenderRoot: React.FC;
 
-export { APPLE_EMOJI_FONT, type AudioSegment, type BaseEditorConfig, type BaseSegment, type BorderRadiusConfig, type Channel, type CropAxisConfig, type CropBoundary, type CropBounds, DIMENSION_PRESETS, type DimensionPreset, type DimensionPresetKey, type DynamicCropConfig, type EditorConfig, type EditorSegment, FONT_FAMILIES, FONT_URLS, type FitDimensions, type FitMode, type FontType, type FontWeight, type HorizontalAnchor, type HorizontalSelfAnchor, type Hyphenation, IMAGE_DEFAULTS, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, type ImageEditorElement, type ImageEditorNodeConfig, ImageElement, type ImageElementProps, type ImageSegment, type PictureSegment, type PositionResolutionError, type PositionResolutionResult, type RelativePositionConfigX, type RelativePositionConfigY, RenderRoot, type Segment, type SegmentTimelinePosition, type SegmentType, type StaticSegment, TEXT_DEFAULTS, type TextAlignment, type TextDirection, TextElement, type TextElementProps, type TextOverflow, type TextSegment, type TextWrap, type TimeMode, type TimeValue, VIDEO_DEFAULTS, VISUAL_DEFAULTS, type VerticalAlignment, type VerticalAnchor, type VerticalSelfAnchor, type VideoEditorAudioSegment, type VideoEditorBaseSegment, type VideoEditorChannel, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, type VideoEditorImageSegment, type VideoEditorNodeConfig, type VideoEditorSegment, type VideoEditorTextSegment, type VideoEditorVideoSegment, type VideoEditorVisualSegment, VideoElement, type VideoElementProps, type VideoSegment, type VisualSegment, type VisualSegmentUnion, type WordBreak, applyImageDefaults, applyTextDefaults, applyVideoDefaults, areFontsLoaded, buildFontString, calculateAutoWidthDimensions, calculateCropBounds, calculateEstimatedDuration, calculateFitDimensions, calculateLineWidth, calculateTimelineContentEnd, canSetAsReference, defaultOffset, formatTime, generateOverlayId, generateSegmentId, getBaseSegments, getBorderRadii, getDependentElements, getFontFamily, getOverlays, getReferenceElementX, getReferenceElementY, getSegmentTimelinePosition, hexToRgba, isDynamicCropEnabled, isSegmentVisibleAtTime, parseHexColor, parseTime, preloadFonts, resolveElementPositions, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, wrapText };
+export { APPLE_EMOJI_FONT, type AudioSegment, type BaseEditorConfig, type BaseSegment, type BorderRadiusConfig, type Channel, type CropAxisConfig, type CropBoundary, type CropBounds, DIMENSION_PRESETS, type DimensionPreset, type DimensionPresetKey, type DynamicCropConfig, type EditorConfig, type EditorSegment, FONT_FAMILIES, FONT_URLS, type FitDimensions, type FitMode, type FontType, type FontWeight, type HorizontalAnchor, type HorizontalSelfAnchor, type Hyphenation, IMAGE_DEFAULTS, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, type ImageEditorElement, type ImageEditorNodeConfig, ImageElement, type ImageElementProps, type ImageSegment, type PictureSegment, type PositionResolutionError, type PositionResolutionResult, type RelativePositionConfigX, type RelativePositionConfigY, RenderRoot, type Segment, type SegmentTimelinePosition, type SegmentType, type StaticSegment, TEXT_DEFAULTS, type TextAlignment, type TextDirection, TextElement, type TextElementProps, type TextOverflow, type TextSegment, type TextWrap, type TimeMode, type TimeValue, VIDEO_DEFAULTS, VISUAL_DEFAULTS, type VerticalAlignment, type VerticalAnchor, type VerticalSelfAnchor, type VideoEditorAudioSegment, type VideoEditorBaseSegment, type VideoEditorChannel, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, type VideoEditorImageSegment, type VideoEditorNodeConfig, type VideoEditorSegment, type VideoEditorTextSegment, type VideoEditorVideoSegment, type VideoEditorVisualSegment, VideoElement, type VideoElementProps, type VideoSegment, type VisualSegment, type VisualSegmentUnion, type WordBreak, applyImageDefaults, applyTextDefaults, applyVideoDefaults, areFontsLoaded, buildFontString, calculateAutoWidthDimensions, calculateCropBounds, calculateEstimatedDuration, calculateFitDimensions, calculateLineWidth, calculateTimelineContentEnd, canSetAsReference, debugFontStatus, defaultOffset, formatTime, generateOverlayId, generateSegmentId, getBaseSegments, getBorderRadii, getDependentElements, getFontFamily, getOverlays, getReferenceElementX, getReferenceElementY, getSegmentTimelinePosition, hexToRgba, isDynamicCropEnabled, isSegmentVisibleAtTime, parseHexColor, parseTime, preloadFonts, resolveElementPositions, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, wrapText };

package/dist/index.d.ts

@@ -1002,6 +1002,10 @@ declare function preloadFonts(): Promise<void>;
  * Check if fonts are loaded
  */
 declare function areFontsLoaded(): boolean;
+/**
+ * Debug utility to log current font status
+ */
+declare function debugFontStatus(): void;
 
 /**
  * Fit calculation utilities for media positioning
@@ -1357,4 +1361,4 @@ declare function useResolvedPositions(elements: ImageEditorElement[], textValues
 
 declare const RenderRoot: React.FC;
 
-export { APPLE_EMOJI_FONT, type AudioSegment, type BaseEditorConfig, type BaseSegment, type BorderRadiusConfig, type Channel, type CropAxisConfig, type CropBoundary, type CropBounds, DIMENSION_PRESETS, type DimensionPreset, type DimensionPresetKey, type DynamicCropConfig, type EditorConfig, type EditorSegment, FONT_FAMILIES, FONT_URLS, type FitDimensions, type FitMode, type FontType, type FontWeight, type HorizontalAnchor, type HorizontalSelfAnchor, type Hyphenation, IMAGE_DEFAULTS, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, type ImageEditorElement, type ImageEditorNodeConfig, ImageElement, type ImageElementProps, type ImageSegment, type PictureSegment, type PositionResolutionError, type PositionResolutionResult, type RelativePositionConfigX, type RelativePositionConfigY, RenderRoot, type Segment, type SegmentTimelinePosition, type SegmentType, type StaticSegment, TEXT_DEFAULTS, type TextAlignment, type TextDirection, TextElement, type TextElementProps, type TextOverflow, type TextSegment, type TextWrap, type TimeMode, type TimeValue, VIDEO_DEFAULTS, VISUAL_DEFAULTS, type VerticalAlignment, type VerticalAnchor, type VerticalSelfAnchor, type VideoEditorAudioSegment, type VideoEditorBaseSegment, type VideoEditorChannel, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, type VideoEditorImageSegment, type VideoEditorNodeConfig, type VideoEditorSegment, type VideoEditorTextSegment, type VideoEditorVideoSegment, type VideoEditorVisualSegment, VideoElement, type VideoElementProps, type VideoSegment, type VisualSegment, type VisualSegmentUnion, type WordBreak, applyImageDefaults, applyTextDefaults, applyVideoDefaults, areFontsLoaded, buildFontString, calculateAutoWidthDimensions, calculateCropBounds, calculateEstimatedDuration, calculateFitDimensions, calculateLineWidth, calculateTimelineContentEnd, canSetAsReference, defaultOffset, formatTime, generateOverlayId, generateSegmentId, getBaseSegments, getBorderRadii, getDependentElements, getFontFamily, getOverlays, getReferenceElementX, getReferenceElementY, getSegmentTimelinePosition, hexToRgba, isDynamicCropEnabled, isSegmentVisibleAtTime, parseHexColor, parseTime, preloadFonts, resolveElementPositions, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, wrapText };
+export { APPLE_EMOJI_FONT, type AudioSegment, type BaseEditorConfig, type BaseSegment, type BorderRadiusConfig, type Channel, type CropAxisConfig, type CropBoundary, type CropBounds, DIMENSION_PRESETS, type DimensionPreset, type DimensionPresetKey, type DynamicCropConfig, type EditorConfig, type EditorSegment, FONT_FAMILIES, FONT_URLS, type FitDimensions, type FitMode, type FontType, type FontWeight, type HorizontalAnchor, type HorizontalSelfAnchor, type Hyphenation, IMAGE_DEFAULTS, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, type ImageEditorElement, type ImageEditorNodeConfig, ImageElement, type ImageElementProps, type ImageSegment, type PictureSegment, type PositionResolutionError, type PositionResolutionResult, type RelativePositionConfigX, type RelativePositionConfigY, RenderRoot, type Segment, type SegmentTimelinePosition, type SegmentType, type StaticSegment, TEXT_DEFAULTS, type TextAlignment, type TextDirection, TextElement, type TextElementProps, type TextOverflow, type TextSegment, type TextWrap, type TimeMode, type TimeValue, VIDEO_DEFAULTS, VISUAL_DEFAULTS, type VerticalAlignment, type VerticalAnchor, type VerticalSelfAnchor, type VideoEditorAudioSegment, type VideoEditorBaseSegment, type VideoEditorChannel, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, type VideoEditorImageSegment, type VideoEditorNodeConfig, type VideoEditorSegment, type VideoEditorTextSegment, type VideoEditorVideoSegment, type VideoEditorVisualSegment, VideoElement, type VideoElementProps, type VideoSegment, type VisualSegment, type VisualSegmentUnion, type WordBreak, applyImageDefaults, applyTextDefaults, applyVideoDefaults, areFontsLoaded, buildFontString, calculateAutoWidthDimensions, calculateCropBounds, calculateEstimatedDuration, calculateFitDimensions, calculateLineWidth, calculateTimelineContentEnd, canSetAsReference, debugFontStatus, defaultOffset, formatTime, generateOverlayId, generateSegmentId, getBaseSegments, getBorderRadii, getDependentElements, getFontFamily, getOverlays, getReferenceElementX, getReferenceElementY, getSegmentTimelinePosition, hexToRgba, isDynamicCropEnabled, isSegmentVisibleAtTime, parseHexColor, parseTime, preloadFonts, resolveElementPositions, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, wrapText };

package/dist/index.js

@@ -56,6 +56,7 @@ __export(index_exports, {
   calculateLineWidth: () => calculateLineWidth,
   calculateTimelineContentEnd: () => calculateTimelineContentEnd,
   canSetAsReference: () => canSetAsReference,
+  debugFontStatus: () => debugFontStatus,
   defaultOffset: () => defaultOffset,
   formatTime: () => formatTime,
   generateOverlayId: () => generateOverlayId,
@@ -190,43 +191,117 @@ var FONT_URLS = {
   }
 };
 async function preloadFonts() {
+  console.log("[ugcinc-render/fonts] preloadFonts() called");
   if (typeof document !== "undefined") {
-    const fontPromises = [];
-    const tiktokRegular = new FontFace(
-      "TikTok Sans",
-      `url(${FONT_URLS.tiktok.regular})`,
-      { weight: "normal" }
-    );
-    fontPromises.push(tiktokRegular.load());
-    const tiktokBold = new FontFace(
-      "TikTok Sans",
-      `url(${FONT_URLS.tiktok.bold})`,
-      { weight: "bold" }
-    );
-    fontPromises.push(tiktokBold.load());
-    const sfPro = new FontFace(
-      "SF Pro",
-      `url(${FONT_URLS.apple.regular})`,
-      { weight: "normal" }
-    );
-    fontPromises.push(sfPro.load());
-    const appleEmoji = new FontFace(
-      "Apple Color Emoji",
-      `url(${FONT_URLS.emoji.apple})`,
-      { weight: "normal" }
-    );
-    fontPromises.push(appleEmoji.load());
-    const loadedFonts = await Promise.all(fontPromises);
-    loadedFonts.forEach((font) => {
-      document.fonts.add(font);
+    console.log("[ugcinc-render/fonts] Browser environment detected, loading fonts...");
+    const fontResults = [];
+    try {
+      const tiktokRegular = new FontFace(
+        "TikTok Sans",
+        `url(${FONT_URLS.tiktok.regular})`,
+        { weight: "normal" }
+      );
+      console.log(`[ugcinc-render/fonts] Loading TikTok Sans Regular from: ${FONT_URLS.tiktok.regular}`);
+      await tiktokRegular.load();
+      document.fonts.add(tiktokRegular);
+      fontResults.push({ name: "TikTok Sans Regular", status: "success" });
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : String(err);
+      console.error(`[ugcinc-render/fonts] Failed to load TikTok Sans Regular:`, errorMsg);
+      fontResults.push({ name: "TikTok Sans Regular", status: "error", error: errorMsg });
+    }
+    try {
+      const tiktokBold = new FontFace(
+        "TikTok Sans",
+        `url(${FONT_URLS.tiktok.bold})`,
+        { weight: "bold" }
+      );
+      console.log(`[ugcinc-render/fonts] Loading TikTok Sans Bold from: ${FONT_URLS.tiktok.bold}`);
+      await tiktokBold.load();
+      document.fonts.add(tiktokBold);
+      fontResults.push({ name: "TikTok Sans Bold", status: "success" });
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : String(err);
+      console.error(`[ugcinc-render/fonts] Failed to load TikTok Sans Bold:`, errorMsg);
+      fontResults.push({ name: "TikTok Sans Bold", status: "error", error: errorMsg });
+    }
+    try {
+      const sfPro = new FontFace(
+        "SF Pro",
+        `url(${FONT_URLS.apple.regular})`,
+        { weight: "normal" }
+      );
+      console.log(`[ugcinc-render/fonts] Loading SF Pro from: ${FONT_URLS.apple.regular}`);
+      await sfPro.load();
+      document.fonts.add(sfPro);
+      fontResults.push({ name: "SF Pro", status: "success" });
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : String(err);
+      console.error(`[ugcinc-render/fonts] Failed to load SF Pro:`, errorMsg);
+      fontResults.push({ name: "SF Pro", status: "error", error: errorMsg });
+    }
+    try {
+      const appleEmoji = new FontFace(
+        "Apple Color Emoji",
+        `url(${FONT_URLS.emoji.apple})`,
+        { weight: "normal" }
+      );
+      console.log(`[ugcinc-render/fonts] Loading Apple Color Emoji from: ${FONT_URLS.emoji.apple}`);
+      await appleEmoji.load();
+      document.fonts.add(appleEmoji);
+      fontResults.push({ name: "Apple Color Emoji", status: "success" });
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : String(err);
+      console.error(`[ugcinc-render/fonts] Failed to load Apple Color Emoji:`, errorMsg);
+      fontResults.push({ name: "Apple Color Emoji", status: "error", error: errorMsg });
+    }
+    console.log("[ugcinc-render/fonts] Font loading complete. Results:", fontResults);
+    const availableFonts = [];
+    document.fonts.forEach((font) => {
+      availableFonts.push(`${font.family} (${font.weight}, ${font.status})`);
     });
+    console.log("[ugcinc-render/fonts] Available fonts in document:", availableFonts);
+  } else {
+    console.log("[ugcinc-render/fonts] Not in browser environment, skipping font loading");
   }
 }
 function areFontsLoaded() {
   if (typeof document === "undefined") {
+    console.log("[ugcinc-render/fonts] areFontsLoaded: Not in browser environment");
     return false;
   }
-  return document.fonts.check('normal 16px "TikTok Sans"') && document.fonts.check('bold 16px "TikTok Sans"') && document.fonts.check('normal 16px "SF Pro"') && document.fonts.check('normal 16px "Apple Color Emoji"');
+  const tiktokRegular = document.fonts.check('normal 16px "TikTok Sans"');
+  const tiktokBold = document.fonts.check('bold 16px "TikTok Sans"');
+  const sfPro = document.fonts.check('normal 16px "SF Pro"');
+  const appleEmoji = document.fonts.check('normal 16px "Apple Color Emoji"');
+  console.log("[ugcinc-render/fonts] areFontsLoaded check:", {
+    tiktokRegular,
+    tiktokBold,
+    sfPro,
+    appleEmoji
+  });
+  return tiktokRegular && tiktokBold && sfPro && appleEmoji;
+}
+function debugFontStatus() {
+  console.log("[ugcinc-render/fonts] === FONT DEBUG STATUS ===");
+  if (typeof document === "undefined") {
+    console.log("[ugcinc-render/fonts] Not in browser environment");
+    return;
+  }
+  console.log("[ugcinc-render/fonts] Font checks:");
+  console.log("  - TikTok Sans (normal):", document.fonts.check('normal 16px "TikTok Sans"'));
+  console.log("  - TikTok Sans (bold):", document.fonts.check('bold 16px "TikTok Sans"'));
+  console.log("  - SF Pro:", document.fonts.check('normal 16px "SF Pro"'));
+  console.log("  - Apple Color Emoji:", document.fonts.check('normal 16px "Apple Color Emoji"'));
+  console.log("[ugcinc-render/fonts] All fonts in document.fonts:");
+  document.fonts.forEach((font) => {
+    console.log(`  - ${font.family}: weight=${font.weight}, style=${font.style}, status=${font.status}`);
+  });
+  console.log("[ugcinc-render/fonts] Font family stacks:");
+  console.log("  - tiktok:", FONT_FAMILIES.tiktok);
+  console.log("  - apple:", FONT_FAMILIES.apple);
+  console.log("  - arial:", FONT_FAMILIES.arial);
+  console.log("[ugcinc-render/fonts] === END FONT DEBUG ===");
 }
 
 // src/utils/text.ts
@@ -326,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;
@@ -344,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") {
@@ -409,15 +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("[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;
@@ -496,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,
@@ -504,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,
@@ -618,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",
         {
@@ -636,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 }) }) });
@@ -1158,7 +1356,7 @@ function getSortedSegments(config) {
   });
 }
 function elementToTextSegment(elem) {
-  return {
+  const segment = {
     id: elem.id,
     type: "text",
     source: "",
@@ -1196,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 {
@@ -1231,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);
@@ -1958,6 +2189,7 @@ var RenderRoot = () => {
   calculateLineWidth,
   calculateTimelineContentEnd,
   canSetAsReference,
+  debugFontStatus,
   defaultOffset,
   formatTime,
   generateOverlayId,

package/dist/index.mjs

@@ -105,43 +105,117 @@ var FONT_URLS = {
   }
 };
 async function preloadFonts() {
+  console.log("[ugcinc-render/fonts] preloadFonts() called");
   if (typeof document !== "undefined") {
-    const fontPromises = [];
-    const tiktokRegular = new FontFace(
-      "TikTok Sans",
-      `url(${FONT_URLS.tiktok.regular})`,
-      { weight: "normal" }
-    );
-    fontPromises.push(tiktokRegular.load());
-    const tiktokBold = new FontFace(
-      "TikTok Sans",
-      `url(${FONT_URLS.tiktok.bold})`,
-      { weight: "bold" }
-    );
-    fontPromises.push(tiktokBold.load());
-    const sfPro = new FontFace(
-      "SF Pro",
-      `url(${FONT_URLS.apple.regular})`,
-      { weight: "normal" }
-    );
-    fontPromises.push(sfPro.load());
-    const appleEmoji = new FontFace(
-      "Apple Color Emoji",
-      `url(${FONT_URLS.emoji.apple})`,
-      { weight: "normal" }
-    );
-    fontPromises.push(appleEmoji.load());
-    const loadedFonts = await Promise.all(fontPromises);
-    loadedFonts.forEach((font) => {
-      document.fonts.add(font);
+    console.log("[ugcinc-render/fonts] Browser environment detected, loading fonts...");
+    const fontResults = [];
+    try {
+      const tiktokRegular = new FontFace(
+        "TikTok Sans",
+        `url(${FONT_URLS.tiktok.regular})`,
+        { weight: "normal" }
+      );
+      console.log(`[ugcinc-render/fonts] Loading TikTok Sans Regular from: ${FONT_URLS.tiktok.regular}`);
+      await tiktokRegular.load();
+      document.fonts.add(tiktokRegular);
+      fontResults.push({ name: "TikTok Sans Regular", status: "success" });
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : String(err);
+      console.error(`[ugcinc-render/fonts] Failed to load TikTok Sans Regular:`, errorMsg);
+      fontResults.push({ name: "TikTok Sans Regular", status: "error", error: errorMsg });
+    }
+    try {
+      const tiktokBold = new FontFace(
+        "TikTok Sans",
+        `url(${FONT_URLS.tiktok.bold})`,
+        { weight: "bold" }
+      );
+      console.log(`[ugcinc-render/fonts] Loading TikTok Sans Bold from: ${FONT_URLS.tiktok.bold}`);
+      await tiktokBold.load();
+      document.fonts.add(tiktokBold);
+      fontResults.push({ name: "TikTok Sans Bold", status: "success" });
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : String(err);
+      console.error(`[ugcinc-render/fonts] Failed to load TikTok Sans Bold:`, errorMsg);
+      fontResults.push({ name: "TikTok Sans Bold", status: "error", error: errorMsg });
+    }
+    try {
+      const sfPro = new FontFace(
+        "SF Pro",
+        `url(${FONT_URLS.apple.regular})`,
+        { weight: "normal" }
+      );
+      console.log(`[ugcinc-render/fonts] Loading SF Pro from: ${FONT_URLS.apple.regular}`);
+      await sfPro.load();
+      document.fonts.add(sfPro);
+      fontResults.push({ name: "SF Pro", status: "success" });
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : String(err);
+      console.error(`[ugcinc-render/fonts] Failed to load SF Pro:`, errorMsg);
+      fontResults.push({ name: "SF Pro", status: "error", error: errorMsg });
+    }
+    try {
+      const appleEmoji = new FontFace(
+        "Apple Color Emoji",
+        `url(${FONT_URLS.emoji.apple})`,
+        { weight: "normal" }
+      );
+      console.log(`[ugcinc-render/fonts] Loading Apple Color Emoji from: ${FONT_URLS.emoji.apple}`);
+      await appleEmoji.load();
+      document.fonts.add(appleEmoji);
+      fontResults.push({ name: "Apple Color Emoji", status: "success" });
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : String(err);
+      console.error(`[ugcinc-render/fonts] Failed to load Apple Color Emoji:`, errorMsg);
+      fontResults.push({ name: "Apple Color Emoji", status: "error", error: errorMsg });
+    }
+    console.log("[ugcinc-render/fonts] Font loading complete. Results:", fontResults);
+    const availableFonts = [];
+    document.fonts.forEach((font) => {
+      availableFonts.push(`${font.family} (${font.weight}, ${font.status})`);
     });
+    console.log("[ugcinc-render/fonts] Available fonts in document:", availableFonts);
+  } else {
+    console.log("[ugcinc-render/fonts] Not in browser environment, skipping font loading");
   }
 }
 function areFontsLoaded() {
   if (typeof document === "undefined") {
+    console.log("[ugcinc-render/fonts] areFontsLoaded: Not in browser environment");
     return false;
   }
-  return document.fonts.check('normal 16px "TikTok Sans"') && document.fonts.check('bold 16px "TikTok Sans"') && document.fonts.check('normal 16px "SF Pro"') && document.fonts.check('normal 16px "Apple Color Emoji"');
+  const tiktokRegular = document.fonts.check('normal 16px "TikTok Sans"');
+  const tiktokBold = document.fonts.check('bold 16px "TikTok Sans"');
+  const sfPro = document.fonts.check('normal 16px "SF Pro"');
+  const appleEmoji = document.fonts.check('normal 16px "Apple Color Emoji"');
+  console.log("[ugcinc-render/fonts] areFontsLoaded check:", {
+    tiktokRegular,
+    tiktokBold,
+    sfPro,
+    appleEmoji
+  });
+  return tiktokRegular && tiktokBold && sfPro && appleEmoji;
+}
+function debugFontStatus() {
+  console.log("[ugcinc-render/fonts] === FONT DEBUG STATUS ===");
+  if (typeof document === "undefined") {
+    console.log("[ugcinc-render/fonts] Not in browser environment");
+    return;
+  }
+  console.log("[ugcinc-render/fonts] Font checks:");
+  console.log("  - TikTok Sans (normal):", document.fonts.check('normal 16px "TikTok Sans"'));
+  console.log("  - TikTok Sans (bold):", document.fonts.check('bold 16px "TikTok Sans"'));
+  console.log("  - SF Pro:", document.fonts.check('normal 16px "SF Pro"'));
+  console.log("  - Apple Color Emoji:", document.fonts.check('normal 16px "Apple Color Emoji"'));
+  console.log("[ugcinc-render/fonts] All fonts in document.fonts:");
+  document.fonts.forEach((font) => {
+    console.log(`  - ${font.family}: weight=${font.weight}, style=${font.style}, status=${font.status}`);
+  });
+  console.log("[ugcinc-render/fonts] Font family stacks:");
+  console.log("  - tiktok:", FONT_FAMILIES.tiktok);
+  console.log("  - apple:", FONT_FAMILIES.apple);
+  console.log("  - arial:", FONT_FAMILIES.arial);
+  console.log("[ugcinc-render/fonts] === END FONT DEBUG ===");
 }
 
 // src/utils/text.ts
@@ -241,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;
@@ -259,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") {
@@ -324,15 +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("[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;
@@ -411,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,
@@ -419,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,
@@ -533,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",
         {
@@ -551,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 }) }) });
@@ -1073,7 +1270,7 @@ function getSortedSegments(config) {
   });
 }
 function elementToTextSegment(elem) {
-  return {
+  const segment = {
     id: elem.id,
     type: "text",
     source: "",
@@ -1111,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 {
@@ -1146,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);
@@ -1872,6 +2102,7 @@ export {
   calculateLineWidth,
   calculateTimelineContentEnd,
   canSetAsReference,
+  debugFontStatus,
   defaultOffset,
   formatTime,
   generateOverlayId,

package/package.json

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