ugcinc-render 1.3.7 → 1.3.9

package/dist/index.js

@@ -314,27 +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,
-    height: autoWidth ? "auto" : height,
+    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",
-    // When autoWidth is enabled, align the inner content using flexbox
+    // 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,
@@ -342,14 +354,20 @@ function TextElement({ segment, scale = 1 }) {
     color,
     lineHeight,
     letterSpacing,
+    // Enable font kerning for proper letter pair spacing
+    fontKerning: "normal",
+    // 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 autoWidth is enabled, shrink to fit content but respect max width
-    ...autoWidth && {
-      width: "fit-content",
-      maxWidth: "100%"
+    // 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 && {
@@ -381,9 +399,10 @@ function TextElement({ segment, scale = 1 }) {
     paddingLeft,
     strokeWidth,
     strokeColor,
-    autoWidth
+    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,27 +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,
-    height: autoWidth ? "auto" : height,
+    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",
-    // When autoWidth is enabled, align the inner content using flexbox
+    // 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,
@@ -281,14 +293,20 @@ function TextElement({ segment, scale = 1 }) {
     color,
     lineHeight,
     letterSpacing,
+    // Enable font kerning for proper letter pair spacing
+    fontKerning: "normal",
+    // 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 autoWidth is enabled, shrink to fit content but respect max width
-    ...autoWidth && {
-      width: "fit-content",
-      maxWidth: "100%"
+    // 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 && {
@@ -320,9 +338,10 @@ function TextElement({ segment, scale = 1 }) {
     paddingLeft,
     strokeWidth,
     strokeColor,
-    autoWidth
+    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.7",
+  "version": "1.3.9",
   "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",