ugcinc-render 1.5.6 → 1.5.8

package/dist/index.d.mts

@@ -892,6 +892,11 @@ interface TextElementProps {
  * - Padding (uniform and individual)
  * - Auto-width with box alignment
  * - Rotation
+ *
+ * When autoWidth is enabled:
+ * - Text wraps at maxWidth (the element's width)
+ * - Background shrinks to the widest line
+ * - boxAlign positions the box within the maxWidth container
  */
 declare function TextElement({ segment, scale }: TextElementProps): react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -892,6 +892,11 @@ interface TextElementProps {
  * - Padding (uniform and individual)
  * - Auto-width with box alignment
  * - Rotation
+ *
+ * When autoWidth is enabled:
+ * - Text wraps at maxWidth (the element's width)
+ * - Background shrinks to the widest line
+ * - boxAlign positions the box within the maxWidth container
  */
 declare function TextElement({ segment, scale }: TextElementProps): react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -86,7 +96,7 @@ var import_react3 = require("react");
 var import_remotion2 = require("remotion");
 
 // src/components/TextElement.tsx
-var import_react = require("react");
+var import_react = __toESM(require("react"));
 
 // src/utils/defaults.ts
 var TEXT_DEFAULTS = {
@@ -294,7 +304,7 @@ function hexToRgba(hex, opacity = 100) {
 
 // src/components/TextElement.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function calculateAutoWidth({
+function calculateAutoWidthAndLines({
   text,
   maxWidth,
   paddingLeft,
@@ -306,52 +316,17 @@ function calculateAutoWidth({
   lineHeight
 }) {
   if (typeof document === "undefined") {
-    throw new Error("calculateAutoWidth requires a browser environment with document available");
+    return { width: maxWidth, lines: [text] };
   }
-  const container = document.createElement("div");
-  container.style.cssText = `
-    position: absolute;
-    visibility: hidden;
-    pointer-events: none;
-    width: ${maxWidth}px;
-    padding: 0 ${paddingRight}px 0 ${paddingLeft}px;
-    box-sizing: border-box;
-    font-family: ${fontFamily};
-    font-size: ${fontSize}px;
-    font-weight: ${fontWeight};
-    letter-spacing: ${letterSpacing}px;
-    line-height: ${lineHeight};
-    white-space: pre-wrap;
-    word-break: break-word;
-  `;
-  container.textContent = text;
-  document.body.appendChild(container);
-  const totalHeight = container.offsetHeight;
-  const lineHeightPx = fontSize * lineHeight;
-  const numLines = Math.max(1, Math.round(totalHeight / lineHeightPx));
-  if (numLines === 1) {
-    const span = document.createElement("span");
-    span.style.cssText = `
-      font-family: ${fontFamily};
-      font-size: ${fontSize}px;
-      font-weight: ${fontWeight};
-      letter-spacing: ${letterSpacing}px;
-      white-space: nowrap;
-    `;
-    span.textContent = text;
-    document.body.appendChild(span);
-    const textWidth = span.offsetWidth;
-    document.body.removeChild(span);
-    document.body.removeChild(container);
-    return Math.min(textWidth + paddingLeft + paddingRight, maxWidth);
+  const availableWidth = maxWidth - paddingLeft - paddingRight;
+  if (availableWidth <= 0) {
+    return { width: maxWidth, lines: [text] };
   }
-  const words = text.split(" ");
-  const lines = [];
-  let currentLine = "";
   const measureSpan = document.createElement("span");
   measureSpan.style.cssText = `
     position: absolute;
     visibility: hidden;
+    pointer-events: none;
     font-family: ${fontFamily};
     font-size: ${fontSize}px;
     font-weight: ${fontWeight};
@@ -359,28 +334,75 @@ function calculateAutoWidth({
     white-space: nowrap;
   `;
   document.body.appendChild(measureSpan);
-  const availableWidth = maxWidth - paddingLeft - paddingRight;
-  for (const word of words) {
+  measureSpan.textContent = "M";
+  const charWidth = measureSpan.getBoundingClientRect().width;
+  const words = text.split(/(\s+)/);
+  const lines = [];
+  let currentLine = "";
+  for (let i = 0; i < words.length; i++) {
+    const word = words[i];
+    if (word === "\n" || word === "\r\n") {
+      if (currentLine) {
+        lines.push(currentLine);
+      }
+      currentLine = "";
+      continue;
+    }
     if (!word) continue;
-    const testLine = currentLine + (currentLine ? " " : "") + word;
+    if (/^\s+$/.test(word)) {
+      if (currentLine) {
+        currentLine += word;
+      }
+      continue;
+    }
+    const testLine = currentLine + word;
     measureSpan.textContent = testLine;
-    const testWidth = measureSpan.offsetWidth;
-    if (testWidth > availableWidth && currentLine) {
-      lines.push(currentLine);
+    const testWidth = measureSpan.getBoundingClientRect().width;
+    const WRAP_TOLERANCE = 0.5;
+    if (testWidth > availableWidth + WRAP_TOLERANCE && currentLine.trim()) {
+      lines.push(currentLine.trimEnd());
       currentLine = word;
+      measureSpan.textContent = word;
+      const wordWidth = measureSpan.getBoundingClientRect().width;
+      if (wordWidth > availableWidth) {
+        let remainingWord = word;
+        while (remainingWord) {
+          let breakPoint = 1;
+          for (let j = 1; j <= remainingWord.length; j++) {
+            measureSpan.textContent = remainingWord.substring(0, j);
+            if (measureSpan.getBoundingClientRect().width > availableWidth) {
+              breakPoint = Math.max(1, j - 1);
+              break;
+            }
+            breakPoint = j;
+          }
+          if (breakPoint >= remainingWord.length) {
+            currentLine = remainingWord;
+            break;
+          } else {
+            lines.push(remainingWord.substring(0, breakPoint));
+            remainingWord = remainingWord.substring(breakPoint);
+          }
+        }
+      }
     } else {
       currentLine = testLine;
     }
   }
-  if (currentLine) lines.push(currentLine);
+  if (currentLine.trim()) {
+    lines.push(currentLine.trimEnd());
+  }
+  if (lines.length === 0) {
+    lines.push("");
+  }
   let widestLineWidth = 0;
   for (const line of lines) {
     measureSpan.textContent = line;
-    widestLineWidth = Math.max(widestLineWidth, measureSpan.offsetWidth);
+    widestLineWidth = Math.max(widestLineWidth, measureSpan.getBoundingClientRect().width);
   }
   document.body.removeChild(measureSpan);
-  document.body.removeChild(container);
-  return Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth);
+  const calculatedWidth = Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth);
+  return { width: calculatedWidth, lines };
 }
 function TextElement({ segment, scale = 1 }) {
   const fontType = segment.fontType ?? TEXT_DEFAULTS.fontType;
@@ -409,9 +431,9 @@ function TextElement({ segment, scale = 1 }) {
   const backgroundOpacity = segment.backgroundOpacity ?? TEXT_DEFAULTS.backgroundOpacity;
   const backgroundBorderRadius = segment.backgroundBorderRadius;
   const fontFamily = getFontFamily(fontType);
-  const calculatedWidth = (0, import_react.useMemo)(() => {
-    if (!autoWidth) return width;
-    return calculateAutoWidth({
+  const autoWidthResult = (0, import_react.useMemo)(() => {
+    if (!autoWidth) return null;
+    return calculateAutoWidthAndLines({
       text: segment.text,
       maxWidth: width,
       paddingLeft,
@@ -423,6 +445,8 @@ function TextElement({ segment, scale = 1 }) {
       lineHeight
     });
   }, [autoWidth, segment.text, width, paddingLeft, paddingRight, fontSize, fontWeight, fontFamily, letterSpacing, lineHeight]);
+  const calculatedWidth = autoWidthResult?.width ?? width;
+  const calculatedLines = autoWidthResult?.lines ?? [segment.text];
   const borderRadiusStyle = (0, import_react.useMemo)(() => {
     if (!backgroundBorderRadius) return void 0;
     const radii = getBorderRadii(backgroundBorderRadius);
@@ -518,12 +542,10 @@ function TextElement({ segment, scale = 1 }) {
     verticalAlign
   ]);
   if (autoWidth) {
-    const autoWidthTextAlign = boxAlign === "center" ? "center" : boxAlign === "right" ? "right" : "left";
-    const autoWidthTextStyle = {
-      ...textStyle,
-      // Override textAlign to match boxAlign for proper visual alignment
-      textAlign: autoWidthTextAlign
-    };
+    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) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: positioningContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "div",
@@ -534,11 +556,11 @@ function TextElement({ segment, scale = 1 }) {
             backgroundColor: hexToRgba(backgroundColor, backgroundOpacity),
             borderRadius: borderRadiusStyle
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: autoWidthTextStyle, children: segment.text })
+          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: { width: calculatedWidth, maxWidth: width }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: autoWidthTextStyle, children: segment.text }) }) });
+    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 }) }) });
 }

package/dist/index.mjs

@@ -12,7 +12,7 @@ import { useMemo as useMemo3 } from "react";
 import { AbsoluteFill, Img as Img2 } from "remotion";
 
 // src/components/TextElement.tsx
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 
 // src/utils/defaults.ts
 var TEXT_DEFAULTS = {
@@ -219,8 +219,8 @@ function hexToRgba(hex, opacity = 100) {
 }
 
 // src/components/TextElement.tsx
-import { jsx } from "react/jsx-runtime";
-function calculateAutoWidth({
+import { jsx, jsxs } from "react/jsx-runtime";
+function calculateAutoWidthAndLines({
   text,
   maxWidth,
   paddingLeft,
@@ -232,52 +232,17 @@ function calculateAutoWidth({
   lineHeight
 }) {
   if (typeof document === "undefined") {
-    throw new Error("calculateAutoWidth requires a browser environment with document available");
+    return { width: maxWidth, lines: [text] };
   }
-  const container = document.createElement("div");
-  container.style.cssText = `
-    position: absolute;
-    visibility: hidden;
-    pointer-events: none;
-    width: ${maxWidth}px;
-    padding: 0 ${paddingRight}px 0 ${paddingLeft}px;
-    box-sizing: border-box;
-    font-family: ${fontFamily};
-    font-size: ${fontSize}px;
-    font-weight: ${fontWeight};
-    letter-spacing: ${letterSpacing}px;
-    line-height: ${lineHeight};
-    white-space: pre-wrap;
-    word-break: break-word;
-  `;
-  container.textContent = text;
-  document.body.appendChild(container);
-  const totalHeight = container.offsetHeight;
-  const lineHeightPx = fontSize * lineHeight;
-  const numLines = Math.max(1, Math.round(totalHeight / lineHeightPx));
-  if (numLines === 1) {
-    const span = document.createElement("span");
-    span.style.cssText = `
-      font-family: ${fontFamily};
-      font-size: ${fontSize}px;
-      font-weight: ${fontWeight};
-      letter-spacing: ${letterSpacing}px;
-      white-space: nowrap;
-    `;
-    span.textContent = text;
-    document.body.appendChild(span);
-    const textWidth = span.offsetWidth;
-    document.body.removeChild(span);
-    document.body.removeChild(container);
-    return Math.min(textWidth + paddingLeft + paddingRight, maxWidth);
+  const availableWidth = maxWidth - paddingLeft - paddingRight;
+  if (availableWidth <= 0) {
+    return { width: maxWidth, lines: [text] };
   }
-  const words = text.split(" ");
-  const lines = [];
-  let currentLine = "";
   const measureSpan = document.createElement("span");
   measureSpan.style.cssText = `
     position: absolute;
     visibility: hidden;
+    pointer-events: none;
     font-family: ${fontFamily};
     font-size: ${fontSize}px;
     font-weight: ${fontWeight};
@@ -285,28 +250,75 @@ function calculateAutoWidth({
     white-space: nowrap;
   `;
   document.body.appendChild(measureSpan);
-  const availableWidth = maxWidth - paddingLeft - paddingRight;
-  for (const word of words) {
+  measureSpan.textContent = "M";
+  const charWidth = measureSpan.getBoundingClientRect().width;
+  const words = text.split(/(\s+)/);
+  const lines = [];
+  let currentLine = "";
+  for (let i = 0; i < words.length; i++) {
+    const word = words[i];
+    if (word === "\n" || word === "\r\n") {
+      if (currentLine) {
+        lines.push(currentLine);
+      }
+      currentLine = "";
+      continue;
+    }
     if (!word) continue;
-    const testLine = currentLine + (currentLine ? " " : "") + word;
+    if (/^\s+$/.test(word)) {
+      if (currentLine) {
+        currentLine += word;
+      }
+      continue;
+    }
+    const testLine = currentLine + word;
     measureSpan.textContent = testLine;
-    const testWidth = measureSpan.offsetWidth;
-    if (testWidth > availableWidth && currentLine) {
-      lines.push(currentLine);
+    const testWidth = measureSpan.getBoundingClientRect().width;
+    const WRAP_TOLERANCE = 0.5;
+    if (testWidth > availableWidth + WRAP_TOLERANCE && currentLine.trim()) {
+      lines.push(currentLine.trimEnd());
       currentLine = word;
+      measureSpan.textContent = word;
+      const wordWidth = measureSpan.getBoundingClientRect().width;
+      if (wordWidth > availableWidth) {
+        let remainingWord = word;
+        while (remainingWord) {
+          let breakPoint = 1;
+          for (let j = 1; j <= remainingWord.length; j++) {
+            measureSpan.textContent = remainingWord.substring(0, j);
+            if (measureSpan.getBoundingClientRect().width > availableWidth) {
+              breakPoint = Math.max(1, j - 1);
+              break;
+            }
+            breakPoint = j;
+          }
+          if (breakPoint >= remainingWord.length) {
+            currentLine = remainingWord;
+            break;
+          } else {
+            lines.push(remainingWord.substring(0, breakPoint));
+            remainingWord = remainingWord.substring(breakPoint);
+          }
+        }
+      }
     } else {
       currentLine = testLine;
     }
   }
-  if (currentLine) lines.push(currentLine);
+  if (currentLine.trim()) {
+    lines.push(currentLine.trimEnd());
+  }
+  if (lines.length === 0) {
+    lines.push("");
+  }
   let widestLineWidth = 0;
   for (const line of lines) {
     measureSpan.textContent = line;
-    widestLineWidth = Math.max(widestLineWidth, measureSpan.offsetWidth);
+    widestLineWidth = Math.max(widestLineWidth, measureSpan.getBoundingClientRect().width);
   }
   document.body.removeChild(measureSpan);
-  document.body.removeChild(container);
-  return Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth);
+  const calculatedWidth = Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth);
+  return { width: calculatedWidth, lines };
 }
 function TextElement({ segment, scale = 1 }) {
   const fontType = segment.fontType ?? TEXT_DEFAULTS.fontType;
@@ -335,9 +347,9 @@ function TextElement({ segment, scale = 1 }) {
   const backgroundOpacity = segment.backgroundOpacity ?? TEXT_DEFAULTS.backgroundOpacity;
   const backgroundBorderRadius = segment.backgroundBorderRadius;
   const fontFamily = getFontFamily(fontType);
-  const calculatedWidth = useMemo(() => {
-    if (!autoWidth) return width;
-    return calculateAutoWidth({
+  const autoWidthResult = useMemo(() => {
+    if (!autoWidth) return null;
+    return calculateAutoWidthAndLines({
       text: segment.text,
       maxWidth: width,
       paddingLeft,
@@ -349,6 +361,8 @@ function TextElement({ segment, scale = 1 }) {
       lineHeight
     });
   }, [autoWidth, segment.text, width, paddingLeft, paddingRight, fontSize, fontWeight, fontFamily, letterSpacing, lineHeight]);
+  const calculatedWidth = autoWidthResult?.width ?? width;
+  const calculatedLines = autoWidthResult?.lines ?? [segment.text];
   const borderRadiusStyle = useMemo(() => {
     if (!backgroundBorderRadius) return void 0;
     const radii = getBorderRadii(backgroundBorderRadius);
@@ -444,12 +458,10 @@ function TextElement({ segment, scale = 1 }) {
     verticalAlign
   ]);
   if (autoWidth) {
-    const autoWidthTextAlign = boxAlign === "center" ? "center" : boxAlign === "right" ? "right" : "left";
-    const autoWidthTextStyle = {
-      ...textStyle,
-      // Override textAlign to match boxAlign for proper visual alignment
-      textAlign: autoWidthTextAlign
-    };
+    const textContent = calculatedLines.map((line, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      line,
+      index < calculatedLines.length - 1 && /* @__PURE__ */ jsx("br", {})
+    ] }, index));
     if (backgroundColor) {
       return /* @__PURE__ */ jsx("div", { style: positioningContainerStyle, children: /* @__PURE__ */ jsx(
         "div",
@@ -460,11 +472,11 @@ function TextElement({ segment, scale = 1 }) {
             backgroundColor: hexToRgba(backgroundColor, backgroundOpacity),
             borderRadius: borderRadiusStyle
           },
-          children: /* @__PURE__ */ jsx("div", { style: autoWidthTextStyle, children: segment.text })
+          children: /* @__PURE__ */ jsx("div", { style: textStyle, children: textContent })
         }
       ) });
     }
-    return /* @__PURE__ */ jsx("div", { style: positioningContainerStyle, children: /* @__PURE__ */ jsx("div", { style: { width: calculatedWidth, maxWidth: width }, children: /* @__PURE__ */ jsx("div", { style: autoWidthTextStyle, children: segment.text }) }) });
+    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 }) }) });
 }
@@ -973,7 +985,7 @@ function isDynamicCropEnabled(dynamicCrop) {
 }
 
 // src/compositions/ImageEditorComposition.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function getSortedSegments(config) {
   const allSegments = [];
   for (const channel of config.channels) {
@@ -1109,7 +1121,7 @@ function ImageEditorComposition({
     return void 0;
   };
   const containerBgColor = backgroundType === "color" && backgroundColor ? backgroundColor : "#000000";
-  return /* @__PURE__ */ jsx3(AbsoluteFill, { style: { backgroundColor: containerBgColor }, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx3(AbsoluteFill, { style: { backgroundColor: containerBgColor }, children: /* @__PURE__ */ jsxs2(
     "div",
     {
       style: {
@@ -1283,7 +1295,7 @@ function VideoElement({
 }
 
 // src/compositions/VideoEditorComposition.tsx
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function calculateSegmentTimings(config, fps) {
   const timings = [];
   const timingsMap = /* @__PURE__ */ new Map();
@@ -1387,7 +1399,7 @@ function VideoEditorComposition({
   const audioTimings = useMemo5(() => {
     return segmentTimings.filter(({ segment }) => segment.type === "audio");
   }, [segmentTimings]);
-  return /* @__PURE__ */ jsxs2(AbsoluteFill2, { style: { backgroundColor: "#000000" }, children: [
+  return /* @__PURE__ */ jsxs3(AbsoluteFill2, { style: { backgroundColor: "#000000" }, children: [
     activeVisualSegments.map(({ segment, startFrame, durationInFrames: durationInFrames2 }) => {
       if (segment.type === "text") {
         const textSegment = segment;
@@ -1703,7 +1715,7 @@ function useResolvedPositions(elements, textValues) {
 
 // src/Root.tsx
 import { Composition } from "remotion";
-import { Fragment, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var defaultImageProps = {
   config: {
     width: 1080,
@@ -1727,7 +1739,7 @@ var defaultVideoProps = {
 var ImageComp = ImageEditorComposition;
 var VideoComp = VideoEditorComposition;
 var RenderRoot = () => {
-  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
     /* @__PURE__ */ jsx6(
       Composition,
       {

package/package.json

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