ugcinc-render 1.8.111 → 1.8.113

package/dist/index.js

@@ -3547,7 +3547,7 @@ var MESSAGE_DEFAULTS = {
   profilePicSize: 83,
   profilePicGap: 37
 };
-var FONT_FAMILY = '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif';
+var FONT_FAMILY = getFontFamily("apple");
 function calculateAutoWidthAndLines2({
   text,
   maxWidth,
@@ -3563,6 +3563,10 @@ function calculateAutoWidthAndLines2({
   if (availableWidth <= 0) {
     return { width: maxWidth, lines: [text] };
   }
+  const fontLoaded = typeof document.fonts !== "undefined" ? document.fonts.check(`normal ${fontSize}px "SF Pro"`) : false;
+  if (!fontLoaded) {
+    console.warn("[convertPropsToElements] SF Pro font not loaded! Text measurement may be inaccurate.");
+  }
   const measureSpan = document.createElement("span");
   measureSpan.style.cssText = `
     position: absolute;
@@ -3570,7 +3574,7 @@ function calculateAutoWidthAndLines2({
     pointer-events: none;
     font-family: ${FONT_FAMILY};
     font-size: ${fontSize}px;
-    font-weight: 400;
+    font-weight: normal;
     letter-spacing: ${letterSpacing}px;
     white-space: nowrap;
   `;
@@ -3597,9 +3601,11 @@ function calculateAutoWidthAndLines2({
     const testLine = currentLine + word;
     const testWidth = measureText(testLine);
     const WRAP_TOLERANCE = 0.5;
-    if (testWidth > availableWidth + WRAP_TOLERANCE && currentLine.trim()) {
-      lines.push(currentLine.trimEnd());
-      currentLine = word;
+    if (testWidth > availableWidth + WRAP_TOLERANCE) {
+      if (currentLine.trim()) {
+        lines.push(currentLine.trimEnd());
+        currentLine = "";
+      }
       const wordWidth = measureText(word);
       if (wordWidth > availableWidth) {
         let remainingWord = word;
@@ -3621,6 +3627,8 @@ function calculateAutoWidthAndLines2({
             remainingWord = remainingWord.substring(breakPoint);
           }
         }
+      } else {
+        currentLine = word;
       }
     } else {
       currentLine = testLine;
@@ -4052,7 +4060,17 @@ function InstagramDmComposition(props) {
   const [fontsLoaded, setFontsLoaded] = (0, import_react8.useState)(false);
   (0, import_react8.useEffect)(() => {
     const handle = (0, import_remotion9.delayRender)("Loading fonts for InstagramDmComposition");
-    preloadFonts().then(() => {
+    const loadFonts = async () => {
+      await preloadFonts();
+      if (typeof document !== "undefined" && document.fonts?.ready) {
+        await document.fonts.ready;
+      }
+      if (typeof document !== "undefined" && document.fonts) {
+        const sfProLoaded = document.fonts.check('normal 51px "SF Pro"');
+        console.log("[InstagramDmComposition] Font check - SF Pro loaded:", sfProLoaded);
+      }
+    };
+    loadFonts().then(() => {
       setFontsLoaded(true);
       (0, import_remotion9.continueRender)(handle);
     }).catch((err) => {

package/dist/index.mjs

@@ -2616,7 +2616,7 @@ var MESSAGE_DEFAULTS = {
   profilePicSize: 83,
   profilePicGap: 37
 };
-var FONT_FAMILY = '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif';
+var FONT_FAMILY = getFontFamily("apple");
 function calculateAutoWidthAndLines2({
   text,
   maxWidth,
@@ -2632,6 +2632,10 @@ function calculateAutoWidthAndLines2({
   if (availableWidth <= 0) {
     return { width: maxWidth, lines: [text] };
   }
+  const fontLoaded = typeof document.fonts !== "undefined" ? document.fonts.check(`normal ${fontSize}px "SF Pro"`) : false;
+  if (!fontLoaded) {
+    console.warn("[convertPropsToElements] SF Pro font not loaded! Text measurement may be inaccurate.");
+  }
   const measureSpan = document.createElement("span");
   measureSpan.style.cssText = `
     position: absolute;
@@ -2639,7 +2643,7 @@ function calculateAutoWidthAndLines2({
     pointer-events: none;
     font-family: ${FONT_FAMILY};
     font-size: ${fontSize}px;
-    font-weight: 400;
+    font-weight: normal;
     letter-spacing: ${letterSpacing}px;
     white-space: nowrap;
   `;
@@ -2666,9 +2670,11 @@ function calculateAutoWidthAndLines2({
     const testLine = currentLine + word;
     const testWidth = measureText(testLine);
     const WRAP_TOLERANCE = 0.5;
-    if (testWidth > availableWidth + WRAP_TOLERANCE && currentLine.trim()) {
-      lines.push(currentLine.trimEnd());
-      currentLine = word;
+    if (testWidth > availableWidth + WRAP_TOLERANCE) {
+      if (currentLine.trim()) {
+        lines.push(currentLine.trimEnd());
+        currentLine = "";
+      }
       const wordWidth = measureText(word);
       if (wordWidth > availableWidth) {
         let remainingWord = word;
@@ -2690,6 +2696,8 @@ function calculateAutoWidthAndLines2({
             remainingWord = remainingWord.substring(breakPoint);
           }
         }
+      } else {
+        currentLine = word;
       }
     } else {
       currentLine = testLine;
@@ -3121,7 +3129,17 @@ function InstagramDmComposition(props) {
   const [fontsLoaded, setFontsLoaded] = useState3(false);
   useEffect3(() => {
     const handle = delayRender2("Loading fonts for InstagramDmComposition");
-    preloadFonts().then(() => {
+    const loadFonts = async () => {
+      await preloadFonts();
+      if (typeof document !== "undefined" && document.fonts?.ready) {
+        await document.fonts.ready;
+      }
+      if (typeof document !== "undefined" && document.fonts) {
+        const sfProLoaded = document.fonts.check('normal 51px "SF Pro"');
+        console.log("[InstagramDmComposition] Font check - SF Pro loaded:", sfProLoaded);
+      }
+    };
+    loadFonts().then(() => {
       setFontsLoaded(true);
       continueRender2(handle);
     }).catch((err) => {

package/package.json

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