ugcinc-render 1.3.6 → 1.3.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +10 -8
  2. package/dist/index.mjs +10 -8
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -318,19 +318,15 @@ function TextElement({ segment, scale = 1 }) {
318
318
  position: "absolute",
319
319
  left: x,
320
320
  top: y,
321
- width: autoWidth ? "auto" : width,
322
- maxWidth: width,
321
+ width,
323
322
  height: autoWidth ? "auto" : height,
324
323
  transform: rotation !== 0 ? `rotate(${rotation}deg)` : void 0,
325
324
  transformOrigin: "center center",
326
325
  display: "flex",
327
326
  flexDirection: "column",
328
327
  justifyContent: verticalAlign === "top" ? "flex-start" : verticalAlign === "bottom" ? "flex-end" : "center",
329
- // Auto-width alignment
330
- ...autoWidth && {
331
- left: boxAlign === "center" ? x + width / 2 : boxAlign === "right" ? x + width : x,
332
- transform: rotation !== 0 ? `translateX(${boxAlign === "center" ? "-50%" : boxAlign === "right" ? "-100%" : "0"}) rotate(${rotation}deg)` : boxAlign === "center" ? "translateX(-50%)" : boxAlign === "right" ? "translateX(-100%)" : void 0
333
- }
328
+ // When autoWidth is enabled, align the inner content using flexbox
329
+ alignItems: autoWidth ? boxAlign === "center" ? "center" : boxAlign === "right" ? "flex-end" : "flex-start" : "stretch"
334
330
  }), [x, y, width, height, rotation, verticalAlign, autoWidth, boxAlign]);
335
331
  const backgroundStyle = (0, import_react.useMemo)(() => {
336
332
  if (!backgroundColor) return {};
@@ -350,6 +346,11 @@ function TextElement({ segment, scale = 1 }) {
350
346
  padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
351
347
  whiteSpace: "pre-wrap",
352
348
  wordBreak: "break-word",
349
+ // When autoWidth is enabled, shrink to fit content but respect max width
350
+ ...autoWidth && {
351
+ width: "fit-content",
352
+ maxWidth: "100%"
353
+ },
353
354
  // Text stroke using text-shadow for cross-browser support
354
355
  ...strokeWidth > 0 && strokeColor && {
355
356
  textShadow: `
@@ -379,7 +380,8 @@ function TextElement({ segment, scale = 1 }) {
379
380
  paddingBottom,
380
381
  paddingLeft,
381
382
  strokeWidth,
382
- strokeColor
383
+ strokeColor,
384
+ autoWidth
383
385
  ]);
384
386
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...containerStyle, ...backgroundStyle }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: textStyle, children: segment.text }) });
385
387
  }
package/dist/index.mjs CHANGED
@@ -257,19 +257,15 @@ function TextElement({ segment, scale = 1 }) {
257
257
  position: "absolute",
258
258
  left: x,
259
259
  top: y,
260
- width: autoWidth ? "auto" : width,
261
- maxWidth: width,
260
+ width,
262
261
  height: autoWidth ? "auto" : height,
263
262
  transform: rotation !== 0 ? `rotate(${rotation}deg)` : void 0,
264
263
  transformOrigin: "center center",
265
264
  display: "flex",
266
265
  flexDirection: "column",
267
266
  justifyContent: verticalAlign === "top" ? "flex-start" : verticalAlign === "bottom" ? "flex-end" : "center",
268
- // Auto-width alignment
269
- ...autoWidth && {
270
- left: boxAlign === "center" ? x + width / 2 : boxAlign === "right" ? x + width : x,
271
- transform: rotation !== 0 ? `translateX(${boxAlign === "center" ? "-50%" : boxAlign === "right" ? "-100%" : "0"}) rotate(${rotation}deg)` : boxAlign === "center" ? "translateX(-50%)" : boxAlign === "right" ? "translateX(-100%)" : void 0
272
- }
267
+ // When autoWidth is enabled, align the inner content using flexbox
268
+ alignItems: autoWidth ? boxAlign === "center" ? "center" : boxAlign === "right" ? "flex-end" : "flex-start" : "stretch"
273
269
  }), [x, y, width, height, rotation, verticalAlign, autoWidth, boxAlign]);
274
270
  const backgroundStyle = useMemo(() => {
275
271
  if (!backgroundColor) return {};
@@ -289,6 +285,11 @@ function TextElement({ segment, scale = 1 }) {
289
285
  padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
290
286
  whiteSpace: "pre-wrap",
291
287
  wordBreak: "break-word",
288
+ // When autoWidth is enabled, shrink to fit content but respect max width
289
+ ...autoWidth && {
290
+ width: "fit-content",
291
+ maxWidth: "100%"
292
+ },
292
293
  // Text stroke using text-shadow for cross-browser support
293
294
  ...strokeWidth > 0 && strokeColor && {
294
295
  textShadow: `
@@ -318,7 +319,8 @@ function TextElement({ segment, scale = 1 }) {
318
319
  paddingBottom,
319
320
  paddingLeft,
320
321
  strokeWidth,
321
- strokeColor
322
+ strokeColor,
323
+ autoWidth
322
324
  ]);
323
325
  return /* @__PURE__ */ jsx("div", { style: { ...containerStyle, ...backgroundStyle }, children: /* @__PURE__ */ jsx("div", { style: textStyle, children: segment.text }) });
324
326
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ugcinc-render",
3
- "version": "1.3.6",
3
+ "version": "1.3.7",
4
4
  "description": "Unified rendering package for UGC Inc - shared types, components, and compositions for pixel-perfect client/server rendering",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",