ugcinc-render 1.5.4 → 1.5.6

package/dist/index.js

@@ -517,33 +517,28 @@ 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 autoWidthTextAlign = boxAlign === "center" ? "center" : boxAlign === "right" ? "right" : "left";
+    const autoWidthTextStyle = {
+      ...textStyle,
+      // Override textAlign to match boxAlign for proper visual alignment
+      textAlign: autoWidthTextAlign
+    };
+    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"
-          }
+            borderRadius: borderRadiusStyle
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: autoWidthTextStyle, children: segment.text })
         }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: textStyle, 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: autoWidthTextStyle, children: segment.text }) }) });
   }
   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

@@ -219,7 +219,7 @@ function hexToRgba(hex, opacity = 100) {
 }
 
 // src/components/TextElement.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 function calculateAutoWidth({
   text,
   maxWidth,
@@ -443,33 +443,28 @@ 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 autoWidthTextAlign = boxAlign === "center" ? "center" : boxAlign === "right" ? "right" : "left";
+    const autoWidthTextStyle = {
+      ...textStyle,
+      // Override textAlign to match boxAlign for proper visual alignment
+      textAlign: autoWidthTextAlign
+    };
+    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"
-          }
+            borderRadius: borderRadiusStyle
+          },
+          children: /* @__PURE__ */ jsx("div", { style: autoWidthTextStyle, children: segment.text })
         }
-      ),
-      /* @__PURE__ */ jsx("div", { style: textStyle, 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: autoWidthTextStyle, children: segment.text }) }) });
   }
   return /* @__PURE__ */ jsx("div", { style: positioningContainerStyle, children: /* @__PURE__ */ jsx("div", { style: backgroundBoxStyle, children: /* @__PURE__ */ jsx("div", { style: textStyle, children: segment.text }) }) });
 }
@@ -978,7 +973,7 @@ function isDynamicCropEnabled(dynamicCrop) {
 }
 
 // src/compositions/ImageEditorComposition.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 function getSortedSegments(config) {
   const allSegments = [];
   for (const channel of config.channels) {
@@ -1114,7 +1109,7 @@ function ImageEditorComposition({
     return void 0;
   };
   const containerBgColor = backgroundType === "color" && backgroundColor ? backgroundColor : "#000000";
-  return /* @__PURE__ */ jsx3(AbsoluteFill, { style: { backgroundColor: containerBgColor }, children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx3(AbsoluteFill, { style: { backgroundColor: containerBgColor }, children: /* @__PURE__ */ jsxs(
     "div",
     {
       style: {
@@ -1288,7 +1283,7 @@ function VideoElement({
 }
 
 // src/compositions/VideoEditorComposition.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 function calculateSegmentTimings(config, fps) {
   const timings = [];
   const timingsMap = /* @__PURE__ */ new Map();
@@ -1392,7 +1387,7 @@ function VideoEditorComposition({
   const audioTimings = useMemo5(() => {
     return segmentTimings.filter(({ segment }) => segment.type === "audio");
   }, [segmentTimings]);
-  return /* @__PURE__ */ jsxs3(AbsoluteFill2, { style: { backgroundColor: "#000000" }, children: [
+  return /* @__PURE__ */ jsxs2(AbsoluteFill2, { style: { backgroundColor: "#000000" }, children: [
     activeVisualSegments.map(({ segment, startFrame, durationInFrames: durationInFrames2 }) => {
       if (segment.type === "text") {
         const textSegment = segment;
@@ -1708,7 +1703,7 @@ function useResolvedPositions(elements, textValues) {
 
 // src/Root.tsx
 import { Composition } from "remotion";
-import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var defaultImageProps = {
   config: {
     width: 1080,
@@ -1732,7 +1727,7 @@ var defaultVideoProps = {
 var ImageComp = ImageEditorComposition;
 var VideoComp = VideoEditorComposition;
 var RenderRoot = () => {
-  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
     /* @__PURE__ */ jsx6(
       Composition,
       {

package/package.json

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