ugcinc-render 1.3.6 → 1.3.8

package/dist/index.js

@@ -314,31 +314,39 @@ function TextElement({ segment, scale = 1 }) {
     if (!radii) return void 0;
     return `${radii[0] * scale}px ${radii[1] * scale}px ${radii[2] * scale}px ${radii[3] * scale}px`;
   }, [backgroundBorderRadius, scale]);
-  const containerStyle = (0, import_react.useMemo)(() => ({
+  const positioningContainerStyle = (0, import_react.useMemo)(() => ({
     position: "absolute",
     left: x,
     top: y,
-    width: autoWidth ? "auto" : width,
-    maxWidth: width,
-    height: autoWidth ? "auto" : height,
+    width,
+    height,
     transform: rotation !== 0 ? `rotate(${rotation}deg)` : void 0,
     transformOrigin: "center center",
     display: "flex",
     flexDirection: "column",
+    // Vertical alignment within the container
     justifyContent: verticalAlign === "top" ? "flex-start" : verticalAlign === "bottom" ? "flex-end" : "center",
-    // Auto-width alignment
-    ...autoWidth && {
-      left: boxAlign === "center" ? x + width / 2 : boxAlign === "right" ? x + width : x,
-      transform: rotation !== 0 ? `translateX(${boxAlign === "center" ? "-50%" : boxAlign === "right" ? "-100%" : "0"}) rotate(${rotation}deg)` : boxAlign === "center" ? "translateX(-50%)" : boxAlign === "right" ? "translateX(-100%)" : void 0
-    }
+    // Horizontal alignment (boxAlign) - only applies when autoWidth is enabled
+    alignItems: autoWidth ? boxAlign === "center" ? "center" : boxAlign === "right" ? "flex-end" : "flex-start" : "stretch"
   }), [x, y, width, height, rotation, verticalAlign, autoWidth, boxAlign]);
-  const backgroundStyle = (0, import_react.useMemo)(() => {
-    if (!backgroundColor) return {};
+  const backgroundBoxStyle = (0, import_react.useMemo)(() => {
+    const baseStyle = autoWidth ? {
+      width: "fit-content",
+      maxWidth: "100%"
+    } : {
+      // When not autoWidth, let the text div handle everything
+      display: "flex",
+      flexDirection: "column",
+      flex: 1,
+      minHeight: 0
+    };
+    if (!backgroundColor) return baseStyle;
     return {
+      ...baseStyle,
       backgroundColor: hexToRgba(backgroundColor, backgroundOpacity),
       borderRadius: borderRadiusStyle
     };
-  }, [backgroundColor, backgroundOpacity, borderRadiusStyle]);
+  }, [autoWidth, backgroundColor, backgroundOpacity, borderRadiusStyle]);
   const textStyle = (0, import_react.useMemo)(() => ({
     fontFamily,
     fontSize,
@@ -346,10 +354,19 @@ function TextElement({ segment, scale = 1 }) {
     color,
     lineHeight,
     letterSpacing,
+    // textAlign works for multi-line text within the (possibly auto-width) box
     textAlign: alignment === "justify" ? "justify" : alignment,
     padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
     whiteSpace: "pre-wrap",
     wordBreak: "break-word",
+    // When not autoWidth, handle vertical alignment via flex
+    ...!autoWidth && {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: verticalAlign === "top" ? "flex-start" : verticalAlign === "bottom" ? "flex-end" : "center",
+      flex: 1,
+      minHeight: 0
+    },
     // Text stroke using text-shadow for cross-browser support
     ...strokeWidth > 0 && strokeColor && {
       textShadow: `
@@ -379,9 +396,11 @@ function TextElement({ segment, scale = 1 }) {
     paddingBottom,
     paddingLeft,
     strokeWidth,
-    strokeColor
+    strokeColor,
+    autoWidth,
+    verticalAlign
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...containerStyle, ...backgroundStyle }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: textStyle, 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 }) }) });
 }
 
 // src/components/ImageElement.tsx

package/dist/index.mjs

@@ -253,31 +253,39 @@ function TextElement({ segment, scale = 1 }) {
     if (!radii) return void 0;
     return `${radii[0] * scale}px ${radii[1] * scale}px ${radii[2] * scale}px ${radii[3] * scale}px`;
   }, [backgroundBorderRadius, scale]);
-  const containerStyle = useMemo(() => ({
+  const positioningContainerStyle = useMemo(() => ({
     position: "absolute",
     left: x,
     top: y,
-    width: autoWidth ? "auto" : width,
-    maxWidth: width,
-    height: autoWidth ? "auto" : height,
+    width,
+    height,
     transform: rotation !== 0 ? `rotate(${rotation}deg)` : void 0,
     transformOrigin: "center center",
     display: "flex",
     flexDirection: "column",
+    // Vertical alignment within the container
     justifyContent: verticalAlign === "top" ? "flex-start" : verticalAlign === "bottom" ? "flex-end" : "center",
-    // Auto-width alignment
-    ...autoWidth && {
-      left: boxAlign === "center" ? x + width / 2 : boxAlign === "right" ? x + width : x,
-      transform: rotation !== 0 ? `translateX(${boxAlign === "center" ? "-50%" : boxAlign === "right" ? "-100%" : "0"}) rotate(${rotation}deg)` : boxAlign === "center" ? "translateX(-50%)" : boxAlign === "right" ? "translateX(-100%)" : void 0
-    }
+    // Horizontal alignment (boxAlign) - only applies when autoWidth is enabled
+    alignItems: autoWidth ? boxAlign === "center" ? "center" : boxAlign === "right" ? "flex-end" : "flex-start" : "stretch"
   }), [x, y, width, height, rotation, verticalAlign, autoWidth, boxAlign]);
-  const backgroundStyle = useMemo(() => {
-    if (!backgroundColor) return {};
+  const backgroundBoxStyle = useMemo(() => {
+    const baseStyle = autoWidth ? {
+      width: "fit-content",
+      maxWidth: "100%"
+    } : {
+      // When not autoWidth, let the text div handle everything
+      display: "flex",
+      flexDirection: "column",
+      flex: 1,
+      minHeight: 0
+    };
+    if (!backgroundColor) return baseStyle;
     return {
+      ...baseStyle,
       backgroundColor: hexToRgba(backgroundColor, backgroundOpacity),
       borderRadius: borderRadiusStyle
     };
-  }, [backgroundColor, backgroundOpacity, borderRadiusStyle]);
+  }, [autoWidth, backgroundColor, backgroundOpacity, borderRadiusStyle]);
   const textStyle = useMemo(() => ({
     fontFamily,
     fontSize,
@@ -285,10 +293,19 @@ function TextElement({ segment, scale = 1 }) {
     color,
     lineHeight,
     letterSpacing,
+    // textAlign works for multi-line text within the (possibly auto-width) box
     textAlign: alignment === "justify" ? "justify" : alignment,
     padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
     whiteSpace: "pre-wrap",
     wordBreak: "break-word",
+    // When not autoWidth, handle vertical alignment via flex
+    ...!autoWidth && {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: verticalAlign === "top" ? "flex-start" : verticalAlign === "bottom" ? "flex-end" : "center",
+      flex: 1,
+      minHeight: 0
+    },
     // Text stroke using text-shadow for cross-browser support
     ...strokeWidth > 0 && strokeColor && {
       textShadow: `
@@ -318,9 +335,11 @@ function TextElement({ segment, scale = 1 }) {
     paddingBottom,
     paddingLeft,
     strokeWidth,
-    strokeColor
+    strokeColor,
+    autoWidth,
+    verticalAlign
   ]);
-  return /* @__PURE__ */ jsx("div", { style: { ...containerStyle, ...backgroundStyle }, children: /* @__PURE__ */ jsx("div", { style: textStyle, children: segment.text }) });
+  return /* @__PURE__ */ jsx("div", { style: positioningContainerStyle, children: /* @__PURE__ */ jsx("div", { style: backgroundBoxStyle, children: /* @__PURE__ */ jsx("div", { style: textStyle, children: segment.text }) }) });
 }
 
 // src/components/ImageElement.tsx

package/package.json

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