ugcinc-render 1.3.5 → 1.3.7

package/dist/index.d.mts

@@ -762,8 +762,7 @@ interface ImageEditorCompositionProps {
  *
  * @example
  * ```tsx
- * import { Player } from '@remotion/player';
- * import { ImageEditorComposition } from '@ugcinc/remotion';
+ * import { ImageEditorComposition } from 'ugcinc-render/compositions';
  *
  * // NEW: Pass raw elements directly (preferred)
  * <Player
@@ -808,8 +807,7 @@ interface VideoEditorCompositionProps {
  *
  * @example
  * ```tsx
- * import { Player } from '@remotion/player';
- * import { VideoEditorComposition } from '@ugcinc/remotion';
+ * import { VideoEditorComposition } from 'ugcinc-render/compositions';
  *
  * <Player
  *   component={VideoEditorComposition}
@@ -915,7 +913,7 @@ declare const FONT_URLS: {
     };
 };
 /**
- * Preload fonts for Remotion rendering
+ * Preload fonts for rendering
  * Call this in your Root component or composition
  */
 declare function preloadFonts(): Promise<void>;
@@ -1139,7 +1137,7 @@ declare function getReferenceElementX(elements: ImageEditorElement[], elementId:
 declare function getReferenceElementY(elements: ImageEditorElement[], elementId: string): ImageEditorElement | null;
 
 /**
- * Hook exports for @ugcinc/remotion
+ * Hook exports for ugcinc-render
  *
  * Hooks for common operations like font loading, media preloading,
  * and position resolution.
@@ -1189,12 +1187,12 @@ declare function useImagePreloader(sources: Record<string, string>): {
 declare function useResolvedPositions(elements: ImageEditorElement[], textValues?: Record<string, string>): PositionResolutionResult;
 
 /**
- * Remotion Root Component
+ * Render Root Component
  *
- * This file registers all available compositions with Remotion.
- * It serves as the entry point for the Remotion bundler.
+ * This file registers all available compositions with the renderer.
+ * It serves as the entry point for the renderer bundler.
  */
 
-declare const RemotionRoot: React.FC;
+declare const RenderRoot: React.FC;
 
-export { type AudioSegment, type BaseEditorConfig, type BaseSegment, type BorderRadiusConfig, type Channel, type CropAxisConfig, type CropBoundary, type CropBounds, DIMENSION_PRESETS, type DimensionPreset, type DimensionPresetKey, type DynamicCropConfig, type EditorConfig, type EditorSegment, FONT_FAMILIES, FONT_URLS, type FitDimensions, type FitMode, type FontType, type FontWeight, type HorizontalAnchor, type HorizontalSelfAnchor, type Hyphenation, IMAGE_DEFAULTS, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, type ImageEditorElement, type ImageEditorNodeConfig, ImageElement, type ImageElementProps, type ImageSegment, type PictureSegment, type PositionResolutionError, type PositionResolutionResult, type RelativePositionConfigX, type RelativePositionConfigY, RemotionRoot, type Segment, type SegmentType, type StaticSegment, TEXT_DEFAULTS, type TextAlignment, type TextDirection, TextElement, type TextElementProps, type TextOverflow, type TextSegment, type TextWrap, type TimeMode, type TimeValue, VIDEO_DEFAULTS, VISUAL_DEFAULTS, type VerticalAlignment, type VerticalAnchor, type VerticalSelfAnchor, type VideoEditorAudioSegment, type VideoEditorBaseSegment, type VideoEditorChannel, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, type VideoEditorImageSegment, type VideoEditorNodeConfig, type VideoEditorSegment, type VideoEditorTextSegment, type VideoEditorVideoSegment, type VideoEditorVisualSegment, VideoElement, type VideoElementProps, type VideoSegment, type VisualSegment, type VisualSegmentUnion, type WordBreak, applyImageDefaults, applyTextDefaults, applyVideoDefaults, areFontsLoaded, buildFontString, calculateAutoWidthDimensions, calculateFitDimensions, calculateLineWidth, canSetAsReference, getBorderRadii, getDependentElements, getFontFamily, getReferenceElementX, getReferenceElementY, hexToRgba, parseHexColor, preloadFonts, resolveElementPositions, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, wrapText };
+export { type AudioSegment, type BaseEditorConfig, type BaseSegment, type BorderRadiusConfig, type Channel, type CropAxisConfig, type CropBoundary, type CropBounds, DIMENSION_PRESETS, type DimensionPreset, type DimensionPresetKey, type DynamicCropConfig, type EditorConfig, type EditorSegment, FONT_FAMILIES, FONT_URLS, type FitDimensions, type FitMode, type FontType, type FontWeight, type HorizontalAnchor, type HorizontalSelfAnchor, type Hyphenation, IMAGE_DEFAULTS, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, type ImageEditorElement, type ImageEditorNodeConfig, ImageElement, type ImageElementProps, type ImageSegment, type PictureSegment, type PositionResolutionError, type PositionResolutionResult, type RelativePositionConfigX, type RelativePositionConfigY, RenderRoot, type Segment, type SegmentType, type StaticSegment, TEXT_DEFAULTS, type TextAlignment, type TextDirection, TextElement, type TextElementProps, type TextOverflow, type TextSegment, type TextWrap, type TimeMode, type TimeValue, VIDEO_DEFAULTS, VISUAL_DEFAULTS, type VerticalAlignment, type VerticalAnchor, type VerticalSelfAnchor, type VideoEditorAudioSegment, type VideoEditorBaseSegment, type VideoEditorChannel, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, type VideoEditorImageSegment, type VideoEditorNodeConfig, type VideoEditorSegment, type VideoEditorTextSegment, type VideoEditorVideoSegment, type VideoEditorVisualSegment, VideoElement, type VideoElementProps, type VideoSegment, type VisualSegment, type VisualSegmentUnion, type WordBreak, applyImageDefaults, applyTextDefaults, applyVideoDefaults, areFontsLoaded, buildFontString, calculateAutoWidthDimensions, calculateFitDimensions, calculateLineWidth, canSetAsReference, getBorderRadii, getDependentElements, getFontFamily, getReferenceElementX, getReferenceElementY, hexToRgba, parseHexColor, preloadFonts, resolveElementPositions, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, wrapText };

package/dist/index.d.ts

@@ -762,8 +762,7 @@ interface ImageEditorCompositionProps {
  *
  * @example
  * ```tsx
- * import { Player } from '@remotion/player';
- * import { ImageEditorComposition } from '@ugcinc/remotion';
+ * import { ImageEditorComposition } from 'ugcinc-render/compositions';
  *
  * // NEW: Pass raw elements directly (preferred)
  * <Player
@@ -808,8 +807,7 @@ interface VideoEditorCompositionProps {
  *
  * @example
  * ```tsx
- * import { Player } from '@remotion/player';
- * import { VideoEditorComposition } from '@ugcinc/remotion';
+ * import { VideoEditorComposition } from 'ugcinc-render/compositions';
  *
  * <Player
  *   component={VideoEditorComposition}
@@ -915,7 +913,7 @@ declare const FONT_URLS: {
     };
 };
 /**
- * Preload fonts for Remotion rendering
+ * Preload fonts for rendering
  * Call this in your Root component or composition
  */
 declare function preloadFonts(): Promise<void>;
@@ -1139,7 +1137,7 @@ declare function getReferenceElementX(elements: ImageEditorElement[], elementId:
 declare function getReferenceElementY(elements: ImageEditorElement[], elementId: string): ImageEditorElement | null;
 
 /**
- * Hook exports for @ugcinc/remotion
+ * Hook exports for ugcinc-render
  *
  * Hooks for common operations like font loading, media preloading,
  * and position resolution.
@@ -1189,12 +1187,12 @@ declare function useImagePreloader(sources: Record<string, string>): {
 declare function useResolvedPositions(elements: ImageEditorElement[], textValues?: Record<string, string>): PositionResolutionResult;
 
 /**
- * Remotion Root Component
+ * Render Root Component
  *
- * This file registers all available compositions with Remotion.
- * It serves as the entry point for the Remotion bundler.
+ * This file registers all available compositions with the renderer.
+ * It serves as the entry point for the renderer bundler.
  */
 
-declare const RemotionRoot: React.FC;
+declare const RenderRoot: React.FC;
 
-export { type AudioSegment, type BaseEditorConfig, type BaseSegment, type BorderRadiusConfig, type Channel, type CropAxisConfig, type CropBoundary, type CropBounds, DIMENSION_PRESETS, type DimensionPreset, type DimensionPresetKey, type DynamicCropConfig, type EditorConfig, type EditorSegment, FONT_FAMILIES, FONT_URLS, type FitDimensions, type FitMode, type FontType, type FontWeight, type HorizontalAnchor, type HorizontalSelfAnchor, type Hyphenation, IMAGE_DEFAULTS, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, type ImageEditorElement, type ImageEditorNodeConfig, ImageElement, type ImageElementProps, type ImageSegment, type PictureSegment, type PositionResolutionError, type PositionResolutionResult, type RelativePositionConfigX, type RelativePositionConfigY, RemotionRoot, type Segment, type SegmentType, type StaticSegment, TEXT_DEFAULTS, type TextAlignment, type TextDirection, TextElement, type TextElementProps, type TextOverflow, type TextSegment, type TextWrap, type TimeMode, type TimeValue, VIDEO_DEFAULTS, VISUAL_DEFAULTS, type VerticalAlignment, type VerticalAnchor, type VerticalSelfAnchor, type VideoEditorAudioSegment, type VideoEditorBaseSegment, type VideoEditorChannel, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, type VideoEditorImageSegment, type VideoEditorNodeConfig, type VideoEditorSegment, type VideoEditorTextSegment, type VideoEditorVideoSegment, type VideoEditorVisualSegment, VideoElement, type VideoElementProps, type VideoSegment, type VisualSegment, type VisualSegmentUnion, type WordBreak, applyImageDefaults, applyTextDefaults, applyVideoDefaults, areFontsLoaded, buildFontString, calculateAutoWidthDimensions, calculateFitDimensions, calculateLineWidth, canSetAsReference, getBorderRadii, getDependentElements, getFontFamily, getReferenceElementX, getReferenceElementY, hexToRgba, parseHexColor, preloadFonts, resolveElementPositions, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, wrapText };
+export { type AudioSegment, type BaseEditorConfig, type BaseSegment, type BorderRadiusConfig, type Channel, type CropAxisConfig, type CropBoundary, type CropBounds, DIMENSION_PRESETS, type DimensionPreset, type DimensionPresetKey, type DynamicCropConfig, type EditorConfig, type EditorSegment, FONT_FAMILIES, FONT_URLS, type FitDimensions, type FitMode, type FontType, type FontWeight, type HorizontalAnchor, type HorizontalSelfAnchor, type Hyphenation, IMAGE_DEFAULTS, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, type ImageEditorElement, type ImageEditorNodeConfig, ImageElement, type ImageElementProps, type ImageSegment, type PictureSegment, type PositionResolutionError, type PositionResolutionResult, type RelativePositionConfigX, type RelativePositionConfigY, RenderRoot, type Segment, type SegmentType, type StaticSegment, TEXT_DEFAULTS, type TextAlignment, type TextDirection, TextElement, type TextElementProps, type TextOverflow, type TextSegment, type TextWrap, type TimeMode, type TimeValue, VIDEO_DEFAULTS, VISUAL_DEFAULTS, type VerticalAlignment, type VerticalAnchor, type VerticalSelfAnchor, type VideoEditorAudioSegment, type VideoEditorBaseSegment, type VideoEditorChannel, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, type VideoEditorImageSegment, type VideoEditorNodeConfig, type VideoEditorSegment, type VideoEditorTextSegment, type VideoEditorVideoSegment, type VideoEditorVisualSegment, VideoElement, type VideoElementProps, type VideoSegment, type VisualSegment, type VisualSegmentUnion, type WordBreak, applyImageDefaults, applyTextDefaults, applyVideoDefaults, areFontsLoaded, buildFontString, calculateAutoWidthDimensions, calculateFitDimensions, calculateLineWidth, canSetAsReference, getBorderRadii, getDependentElements, getFontFamily, getReferenceElementX, getReferenceElementY, hexToRgba, parseHexColor, preloadFonts, resolveElementPositions, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, wrapText };

package/dist/index.js

@@ -26,7 +26,7 @@ __export(index_exports, {
   IMAGE_DEFAULTS: () => IMAGE_DEFAULTS,
   ImageEditorComposition: () => ImageEditorComposition,
   ImageElement: () => ImageElement,
-  RemotionRoot: () => RemotionRoot,
+  RenderRoot: () => RenderRoot,
   TEXT_DEFAULTS: () => TEXT_DEFAULTS,
   TextElement: () => TextElement,
   VIDEO_DEFAULTS: () => VIDEO_DEFAULTS,
@@ -318,19 +318,15 @@ function TextElement({ segment, scale = 1 }) {
     position: "absolute",
     left: x,
     top: y,
-    width: autoWidth ? "auto" : width,
-    maxWidth: width,
+    width,
     height: autoWidth ? "auto" : height,
     transform: rotation !== 0 ? `rotate(${rotation}deg)` : void 0,
     transformOrigin: "center center",
     display: "flex",
     flexDirection: "column",
     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
-    }
+    // When autoWidth is enabled, align the inner content using flexbox
+    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 {};
@@ -350,6 +346,11 @@ function TextElement({ segment, scale = 1 }) {
     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%"
+    },
     // Text stroke using text-shadow for cross-browser support
     ...strokeWidth > 0 && strokeColor && {
       textShadow: `
@@ -379,7 +380,8 @@ function TextElement({ segment, scale = 1 }) {
     paddingBottom,
     paddingLeft,
     strokeWidth,
-    strokeColor
+    strokeColor,
+    autoWidth
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...containerStyle, ...backgroundStyle }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: textStyle, children: segment.text }) });
 }
@@ -1418,7 +1420,7 @@ var defaultVideoProps = {
 };
 var ImageComp = ImageEditorComposition;
 var VideoComp = VideoEditorComposition;
-var RemotionRoot = () => {
+var RenderRoot = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       import_remotion5.Composition,
@@ -1454,7 +1456,7 @@ var RemotionRoot = () => {
   IMAGE_DEFAULTS,
   ImageEditorComposition,
   ImageElement,
-  RemotionRoot,
+  RenderRoot,
   TEXT_DEFAULTS,
   TextElement,
   VIDEO_DEFAULTS,

package/dist/index.mjs

@@ -257,19 +257,15 @@ function TextElement({ segment, scale = 1 }) {
     position: "absolute",
     left: x,
     top: y,
-    width: autoWidth ? "auto" : width,
-    maxWidth: width,
+    width,
     height: autoWidth ? "auto" : height,
     transform: rotation !== 0 ? `rotate(${rotation}deg)` : void 0,
     transformOrigin: "center center",
     display: "flex",
     flexDirection: "column",
     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
-    }
+    // When autoWidth is enabled, align the inner content using flexbox
+    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 {};
@@ -289,6 +285,11 @@ function TextElement({ segment, scale = 1 }) {
     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%"
+    },
     // Text stroke using text-shadow for cross-browser support
     ...strokeWidth > 0 && strokeColor && {
       textShadow: `
@@ -318,7 +319,8 @@ function TextElement({ segment, scale = 1 }) {
     paddingBottom,
     paddingLeft,
     strokeWidth,
-    strokeColor
+    strokeColor,
+    autoWidth
   ]);
   return /* @__PURE__ */ jsx("div", { style: { ...containerStyle, ...backgroundStyle }, children: /* @__PURE__ */ jsx("div", { style: textStyle, children: segment.text }) });
 }
@@ -1357,7 +1359,7 @@ var defaultVideoProps = {
 };
 var ImageComp = ImageEditorComposition;
 var VideoComp = VideoEditorComposition;
-var RemotionRoot = () => {
+var RenderRoot = () => {
   return /* @__PURE__ */ jsxs3(Fragment, { children: [
     /* @__PURE__ */ jsx6(
       Composition,
@@ -1392,7 +1394,7 @@ export {
   IMAGE_DEFAULTS,
   ImageEditorComposition,
   ImageElement,
-  RemotionRoot,
+  RenderRoot,
   TEXT_DEFAULTS,
   TextElement,
   VIDEO_DEFAULTS,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ugcinc-render",
-  "version": "1.3.5",
-  "description": "Unified Remotion rendering package for UGC Inc - shared types, components, and compositions for pixel-perfect client/server rendering",
+  "version": "1.3.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",
   "types": "dist/index.d.ts",
@@ -38,10 +38,10 @@
     "README.md"
   ],
   "keywords": [
-    "remotion",
     "video-rendering",
     "canvas",
-    "react"
+    "react",
+    "rendering"
   ],
   "author": "UGC Inc",
   "license": "MIT",
@@ -63,4 +63,3 @@
     "typescript": "^5.3.0"
   }
 }
-