ugcinc-render 1.5.5 → 1.5.7

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,74 @@ 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.offsetWidth;
+  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);
+    if (testWidth > availableWidth && currentLine.trim()) {
+      lines.push(currentLine.trimEnd());
       currentLine = word;
+      measureSpan.textContent = word;
+      const wordWidth = measureSpan.offsetWidth;
+      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.offsetWidth > 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);
   }
   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 +430,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 +444,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);
@@ -517,34 +540,26 @@ function TextElement({ segment, scale = 1 }) {
     autoWidth,
     verticalAlign
   ]);
-  if (autoWidth && backgroundColor) {
-    const bgOffsetX = boxAlign === "center" ? (width - calculatedWidth) / 2 : boxAlign === "right" ? width - calculatedWidth : 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: positioningContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "relative", width }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  if (autoWidth) {
+    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",
         {
           style: {
-            position: "absolute",
-            left: bgOffsetX,
-            top: 0,
             width: calculatedWidth,
-            height: "100%",
+            maxWidth: width,
             backgroundColor: hexToRgba(backgroundColor, backgroundOpacity),
-            borderRadius: borderRadiusStyle,
-            pointerEvents: "none",
-            zIndex: 0
-          }
+            borderRadius: borderRadiusStyle
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: textStyle, children: textContent })
         }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...textStyle, position: "relative", zIndex: 1 }, children: segment.text })
-    ] }) });
-  }
-  if (autoWidth) {
-    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,
-      width,
-      boxSizing: "border-box"
-    }, 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 = {
@@ -220,7 +220,7 @@ function hexToRgba(hex, opacity = 100) {
 
 // src/components/TextElement.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-function calculateAutoWidth({
+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,74 @@ 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.offsetWidth;
+  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);
+    if (testWidth > availableWidth && currentLine.trim()) {
+      lines.push(currentLine.trimEnd());
       currentLine = word;
+      measureSpan.textContent = word;
+      const wordWidth = measureSpan.offsetWidth;
+      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.offsetWidth > 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);
   }
   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 +346,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 +360,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);
@@ -443,34 +456,26 @@ function TextElement({ segment, scale = 1 }) {
     autoWidth,
     verticalAlign
   ]);
-  if (autoWidth && backgroundColor) {
-    const bgOffsetX = boxAlign === "center" ? (width - calculatedWidth) / 2 : boxAlign === "right" ? width - calculatedWidth : 0;
-    return /* @__PURE__ */ jsx("div", { style: positioningContainerStyle, children: /* @__PURE__ */ jsxs("div", { style: { position: "relative", width }, children: [
-      /* @__PURE__ */ jsx(
+  if (autoWidth) {
+    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",
         {
           style: {
-            position: "absolute",
-            left: bgOffsetX,
-            top: 0,
             width: calculatedWidth,
-            height: "100%",
+            maxWidth: width,
             backgroundColor: hexToRgba(backgroundColor, backgroundOpacity),
-            borderRadius: borderRadiusStyle,
-            pointerEvents: "none",
-            zIndex: 0
-          }
+            borderRadius: borderRadiusStyle
+          },
+          children: /* @__PURE__ */ jsx("div", { style: textStyle, children: textContent })
         }
-      ),
-      /* @__PURE__ */ jsx("div", { style: { ...textStyle, position: "relative", zIndex: 1 }, children: segment.text })
-    ] }) });
-  }
-  if (autoWidth) {
-    return /* @__PURE__ */ jsx("div", { style: positioningContainerStyle, children: /* @__PURE__ */ jsx("div", { style: { width: calculatedWidth, maxWidth: width }, children: /* @__PURE__ */ jsx("div", { style: {
-      ...textStyle,
-      width,
-      boxSizing: "border-box"
-    }, 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 }) }) });
 }

package/package.json

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