ugcinc 3.84.6 → 3.85.1

package/dist/render/components/TextElement.js

@@ -0,0 +1,390 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextElement = TextElement;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * TextElement Component
+ *
+ * Renders a text segment using HTML/CSS for pixel-perfect consistency
+ * between client preview and server render.
+ */
+const react_1 = __importStar(require("react"));
+const defaults_1 = require("../utils/defaults");
+const fonts_1 = require("../utils/fonts");
+const text_1 = require("../utils/text");
+/**
+ * Calculate the actual width for auto-width text AND the line breaks.
+ * Uses DOM-based measurement to ensure the same fonts are used as CSS rendering.
+ *
+ * This function determines:
+ * 1. Where text would wrap at maxWidth (the line breaks)
+ * 2. The width of the widest line (for background sizing)
+ *
+ * By returning the actual lines, we can render with explicit line breaks,
+ * ensuring text wraps at maxWidth while displaying in a calculatedWidth container.
+ */
+function calculateAutoWidthAndLines({ text, maxWidth, paddingLeft, paddingRight, fontSize, fontWeight, fontFamily, letterSpacing, lineHeight, }) {
+    // Check if we're in a browser environment
+    if (typeof document === 'undefined') {
+        return { width: maxWidth, lines: [text] };
+    }
+    // Available width for text content (excluding padding)
+    const availableWidth = maxWidth - paddingLeft - paddingRight;
+    // Handle edge case of very small or zero available width
+    if (availableWidth <= 0) {
+        return { width: maxWidth, lines: [text] };
+    }
+    // Create a measurement span with exact same styling as render
+    const measureSpan = document.createElement('span');
+    measureSpan.style.cssText = `
+    position: absolute;
+    visibility: hidden;
+    pointer-events: none;
+    font-family: ${fontFamily};
+    font-size: ${fontSize}px;
+    font-weight: ${fontWeight};
+    letter-spacing: ${letterSpacing}px;
+    white-space: nowrap;
+  `;
+    document.body.appendChild(measureSpan);
+    // Get computed style to verify font
+    const computedStyle = window.getComputedStyle(measureSpan);
+    const computedFontFamily = computedStyle.fontFamily;
+    // Check if requested font is loaded
+    const requestedFontLoaded = typeof document.fonts !== 'undefined'
+        ? document.fonts.check(`${fontWeight} ${fontSize}px ${fontFamily.split(',')[0]}`)
+        : 'unknown';
+    const measureText = (textToMeasure) => {
+        measureSpan.textContent = textToMeasure;
+        return measureSpan.getBoundingClientRect().width;
+    };
+    // Measure reference string for debugging
+    measureSpan.textContent = 'M';
+    const mWidth = measureSpan.getBoundingClientRect().width;
+    // Split text into words, preserving spaces for accurate measurement
+    const words = text.split(/(\s+)/);
+    const lines = [];
+    let currentLine = '';
+    for (let i = 0; i < words.length; i++) {
+        const word = words[i];
+        if (word === '\n' || word === '\r\n') {
+            if (currentLine)
+                lines.push(currentLine);
+            currentLine = '';
+            continue;
+        }
+        if (!word)
+            continue;
+        if (/^\s+$/.test(word)) {
+            if (currentLine)
+                currentLine += word;
+            continue;
+        }
+        const testLine = currentLine + word;
+        const testWidth = measureText(testLine);
+        const WRAP_TOLERANCE = 0.5;
+        if (testWidth > availableWidth + WRAP_TOLERANCE && currentLine.trim()) {
+            lines.push(currentLine.trimEnd());
+            currentLine = word;
+            const wordWidth = measureText(word);
+            if (wordWidth > availableWidth) {
+                let remainingWord = word;
+                while (remainingWord) {
+                    let breakPoint = 1;
+                    for (let j = 1; j <= remainingWord.length; j++) {
+                        measureSpan.textContent = remainingWord.substring(0, j);
+                        if (measureSpan.getBoundingClientRect().width > availableWidth) {
+                            breakPoint = Math.max(1, j - 1);
+                            break;
+                        }
+                        breakPoint = j;
+                    }
+                    if (breakPoint >= remainingWord.length) {
+                        currentLine = remainingWord;
+                        break;
+                    }
+                    else {
+                        lines.push(remainingWord.substring(0, breakPoint));
+                        remainingWord = remainingWord.substring(breakPoint);
+                    }
+                }
+            }
+        }
+        else {
+            currentLine = testLine;
+        }
+    }
+    if (currentLine.trim())
+        lines.push(currentLine.trimEnd());
+    if (lines.length === 0)
+        lines.push('');
+    // Find the widest line
+    let widestLineWidth = 0;
+    for (const line of lines) {
+        const lineWidth = measureText(line);
+        widestLineWidth = Math.max(widestLineWidth, lineWidth);
+    }
+    document.body.removeChild(measureSpan);
+    const calculatedWidth = Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth);
+    // CONDENSED DEBUG LOG
+    console.log('[TextElement] WIDTH_CALC:', JSON.stringify({
+        text: text.substring(0, 30),
+        fontFamily: fontFamily.split(',')[0],
+        computedFont: computedFontFamily.split(',')[0],
+        fontLoaded: requestedFontLoaded,
+        fontSize,
+        fontWeight,
+        letterSpacing,
+        mWidth: Math.round(mWidth * 100) / 100,
+        widestLine: Math.round(widestLineWidth * 100) / 100,
+        paddingL: paddingLeft,
+        paddingR: paddingRight,
+        calcWidth: Math.round(calculatedWidth * 100) / 100,
+        maxWidth,
+        lines: lines.length,
+    }));
+    return { width: calculatedWidth, lines };
+}
+/**
+ * TextElement renders text with full styling support including:
+ * - Font family, size, weight, color
+ * - Letter spacing, line height
+ * - Horizontal and vertical alignment
+ * - Text stroke/outline
+ * - Background with opacity and border radius
+ * - Padding (uniform and individual)
+ * - Auto-width with box alignment
+ * - Rotation
+ *
+ * When autoWidth is enabled:
+ * - Text wraps at maxWidth (the element's width)
+ * - Background shrinks to the widest line
+ * - boxAlign positions the box within the maxWidth container
+ */
+function TextElement({ segment, scale = 1 }) {
+    // Apply defaults
+    const fontType = segment.fontType ?? defaults_1.TEXT_DEFAULTS.fontType;
+    const fontSize = (segment.fontSize ?? defaults_1.TEXT_DEFAULTS.fontSize) * scale;
+    const fontWeight = segment.fontWeight ?? defaults_1.TEXT_DEFAULTS.fontWeight;
+    const color = segment.color ?? defaults_1.TEXT_DEFAULTS.color;
+    const alignment = segment.alignment ?? defaults_1.TEXT_DEFAULTS.alignment;
+    const verticalAlign = segment.verticalAlign ?? defaults_1.TEXT_DEFAULTS.verticalAlign;
+    const lineHeight = segment.lineHeight ?? defaults_1.TEXT_DEFAULTS.lineHeight;
+    const letterSpacing = (segment.letterSpacing ?? defaults_1.TEXT_DEFAULTS.letterSpacing) * scale;
+    const strokeColor = segment.strokeColor;
+    const strokeWidth = (segment.strokeWidth ?? defaults_1.TEXT_DEFAULTS.strokeWidth) * scale;
+    // Padding - base values (always used for line calculation)
+    const uniformPadding = (segment.padding ?? defaults_1.TEXT_DEFAULTS.padding) * scale;
+    const basePaddingTop = segment.paddingTop !== undefined ? segment.paddingTop * scale : uniformPadding;
+    const basePaddingRight = segment.paddingRight !== undefined ? segment.paddingRight * scale : uniformPadding;
+    const basePaddingBottom = segment.paddingBottom !== undefined ? segment.paddingBottom * scale : uniformPadding;
+    const basePaddingLeft = segment.paddingLeft !== undefined ? segment.paddingLeft * scale : uniformPadding;
+    // Multi-line EXTRA padding (scaled) - ADDED to base padding when 2+ lines
+    const extraPaddingTop = (segment.multiLineExtraPaddingTop ?? 0) * scale;
+    const extraPaddingRight = (segment.multiLineExtraPaddingRight ?? 0) * scale;
+    const extraPaddingBottom = (segment.multiLineExtraPaddingBottom ?? 0) * scale;
+    const extraPaddingLeft = (segment.multiLineExtraPaddingLeft ?? 0) * scale;
+    // Check if any extra padding is defined
+    const hasExtraPadding = extraPaddingTop > 0 || extraPaddingRight > 0 || extraPaddingBottom > 0 || extraPaddingLeft > 0;
+    // Position and size
+    const x = segment.xOffset * scale;
+    const y = segment.yOffset * scale;
+    const width = segment.width * scale;
+    const height = segment.height * scale;
+    const rotation = segment.rotation ?? 0;
+    // Auto-width
+    const autoWidth = segment.autoWidth ?? defaults_1.TEXT_DEFAULTS.autoWidth;
+    const boxAlign = segment.boxAlign ?? defaults_1.TEXT_DEFAULTS.boxAlign;
+    // Background
+    const backgroundColor = segment.backgroundColor;
+    const backgroundOpacity = segment.backgroundOpacity ?? defaults_1.TEXT_DEFAULTS.backgroundOpacity;
+    const backgroundBorderRadius = segment.backgroundBorderRadius;
+    // Get font family
+    const fontFamily = (0, fonts_1.getFontFamily)(fontType);
+    // Calculate width and line breaks
+    const { calculatedWidth, calculatedLines, paddingTop, paddingRight, paddingBottom, paddingLeft } = (0, react_1.useMemo)(() => {
+        let finalPaddingTop = basePaddingTop;
+        let finalPaddingRight = basePaddingRight;
+        let finalPaddingBottom = basePaddingBottom;
+        let finalPaddingLeft = basePaddingLeft;
+        if (!autoWidth && !hasExtraPadding) {
+            return {
+                calculatedWidth: width,
+                calculatedLines: [segment.text],
+                paddingTop: finalPaddingTop,
+                paddingRight: finalPaddingRight,
+                paddingBottom: finalPaddingBottom,
+                paddingLeft: finalPaddingLeft,
+            };
+        }
+        const baseResult = calculateAutoWidthAndLines({
+            text: segment.text,
+            maxWidth: width,
+            paddingLeft: basePaddingLeft,
+            paddingRight: basePaddingRight,
+            fontSize,
+            fontWeight,
+            fontFamily,
+            letterSpacing,
+            lineHeight,
+        });
+        const isMultiLine = baseResult.lines.length >= 2;
+        if (isMultiLine) {
+            finalPaddingTop = basePaddingTop + extraPaddingTop;
+            finalPaddingRight = basePaddingRight + extraPaddingRight;
+            finalPaddingBottom = basePaddingBottom + extraPaddingBottom;
+            finalPaddingLeft = basePaddingLeft + extraPaddingLeft;
+        }
+        let finalResult = baseResult;
+        if (isMultiLine && (extraPaddingLeft > 0 || extraPaddingRight > 0)) {
+            finalResult = calculateAutoWidthAndLines({
+                text: segment.text,
+                maxWidth: width,
+                paddingLeft: finalPaddingLeft,
+                paddingRight: finalPaddingRight,
+                fontSize,
+                fontWeight,
+                fontFamily,
+                letterSpacing,
+                lineHeight,
+            });
+        }
+        return {
+            calculatedWidth: autoWidth ? finalResult.width : width,
+            calculatedLines: autoWidth ? finalResult.lines : [segment.text],
+            paddingTop: finalPaddingTop,
+            paddingRight: finalPaddingRight,
+            paddingBottom: finalPaddingBottom,
+            paddingLeft: finalPaddingLeft,
+        };
+    }, [
+        autoWidth, segment.text, width,
+        basePaddingTop, basePaddingRight, basePaddingBottom, basePaddingLeft,
+        extraPaddingTop, extraPaddingRight, extraPaddingBottom, extraPaddingLeft,
+        hasExtraPadding,
+        fontSize, fontWeight, fontFamily, letterSpacing, lineHeight
+    ]);
+    // Calculate border radius CSS
+    const borderRadiusStyle = (0, react_1.useMemo)(() => {
+        if (!backgroundBorderRadius)
+            return undefined;
+        const radii = (0, text_1.getBorderRadii)(backgroundBorderRadius);
+        if (!radii || radii.length < 4)
+            return undefined;
+        return `${radii[0] * scale}px ${radii[1] * scale}px ${radii[2] * scale}px ${radii[3] * scale}px`;
+    }, [backgroundBorderRadius, scale]);
+    // Positioning container style
+    const positioningContainerStyle = (0, react_1.useMemo)(() => ({
+        position: 'absolute',
+        left: x,
+        top: y,
+        width: width,
+        height: height,
+        transform: rotation !== 0 ? `rotate(${rotation}deg)` : undefined,
+        transformOrigin: 'center center',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: verticalAlign === 'top' ? 'flex-start' : verticalAlign === 'bottom' ? 'flex-end' : 'center',
+        alignItems: autoWidth
+            ? (boxAlign === 'center' ? 'center' : boxAlign === 'right' ? 'flex-end' : 'flex-start')
+            : 'stretch',
+    }), [x, y, width, height, rotation, verticalAlign, autoWidth, boxAlign]);
+    // Background box style
+    const backgroundBoxStyle = (0, react_1.useMemo)(() => {
+        const baseStyle = autoWidth
+            ? { width: calculatedWidth, maxWidth: width }
+            : { display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 };
+        if (!backgroundColor)
+            return baseStyle;
+        return {
+            ...baseStyle,
+            backgroundColor: (0, text_1.hexToRgba)(backgroundColor, backgroundOpacity),
+            borderRadius: borderRadiusStyle,
+        };
+    }, [autoWidth, calculatedWidth, width, backgroundColor, backgroundOpacity, borderRadiusStyle]);
+    // Text style
+    const textStyle = (0, react_1.useMemo)(() => ({
+        fontFamily,
+        fontSize,
+        fontWeight,
+        color,
+        lineHeight,
+        letterSpacing,
+        textAlign: alignment === 'justify' ? 'justify' : alignment,
+        padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-word',
+        ...(!autoWidth && {
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: verticalAlign === 'top' ? 'flex-start' : verticalAlign === 'bottom' ? 'flex-end' : 'center',
+            flex: 1,
+            minHeight: 0,
+        }),
+        ...(strokeWidth > 0 && strokeColor && {
+            textShadow: `
+        -${strokeWidth}px -${strokeWidth}px 0 ${strokeColor},
+        ${strokeWidth}px -${strokeWidth}px 0 ${strokeColor},
+        -${strokeWidth}px ${strokeWidth}px 0 ${strokeColor},
+        ${strokeWidth}px ${strokeWidth}px 0 ${strokeColor},
+        0 -${strokeWidth}px 0 ${strokeColor},
+        0 ${strokeWidth}px 0 ${strokeColor},
+        -${strokeWidth}px 0 0 ${strokeColor},
+        ${strokeWidth}px 0 0 ${strokeColor}
+      `,
+            WebkitTextStroke: `${strokeWidth}px ${strokeColor}`,
+            paintOrder: 'stroke fill',
+        }),
+    }), [
+        fontFamily, fontSize, fontWeight, color, lineHeight, letterSpacing, alignment,
+        paddingTop, paddingRight, paddingBottom, paddingLeft, strokeWidth, strokeColor,
+        autoWidth, verticalAlign
+    ]);
+    if (autoWidth) {
+        const textContent = calculatedLines.map((line, index) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [line, index < calculatedLines.length - 1 && (0, jsx_runtime_1.jsx)("br", {})] }, index)));
+        if (backgroundColor) {
+            return ((0, jsx_runtime_1.jsx)("div", { style: positioningContainerStyle, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                        width: calculatedWidth,
+                        maxWidth: width,
+                        backgroundColor: (0, text_1.hexToRgba)(backgroundColor, backgroundOpacity),
+                        borderRadius: borderRadiusStyle,
+                    }, children: (0, jsx_runtime_1.jsx)("div", { style: textStyle, children: textContent }) }) }));
+        }
+        return ((0, jsx_runtime_1.jsx)("div", { style: positioningContainerStyle, children: (0, jsx_runtime_1.jsx)("div", { style: { width: calculatedWidth, maxWidth: width }, children: (0, jsx_runtime_1.jsx)("div", { style: textStyle, children: textContent }) }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { style: positioningContainerStyle, children: (0, jsx_runtime_1.jsx)("div", { style: backgroundBoxStyle, children: (0, jsx_runtime_1.jsx)("div", { style: textStyle, children: segment.text }) }) }));
+}
+exports.default = TextElement;

package/dist/render/components/VideoElement.d.ts

@@ -0,0 +1,30 @@
+/**
+ * VideoElement Component
+ *
+ * Renders a video segment with playback controls, fit modes, and visual effects.
+ * Uses the renderer's Video component for frame-accurate playback.
+ */
+import type { VideoSegment } from '../types';
+export interface VideoElementProps {
+    segment: VideoSegment;
+    /** The source URL of the video */
+    src: string;
+    /** Start frame of this segment in the composition */
+    startFrame: number;
+    /** Duration of this segment in frames */
+    durationInFrames: number;
+    /** Optional scale for high-DPI rendering */
+    scale?: number;
+}
+/**
+ * VideoElement renders videos with:
+ * - Playback speed control
+ * - Volume control
+ * - Fit modes (cover, contain, fill)
+ * - Opacity
+ * - Rotation
+ * - Border radius
+ * - Fade-in effect
+ */
+export declare function VideoElement({ segment, src, startFrame, durationInFrames, scale }: VideoElementProps): import("react/jsx-runtime").JSX.Element;
+export default VideoElement;

package/dist/render/components/VideoElement.js

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VideoElement = VideoElement;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * VideoElement Component
+ *
+ * Renders a video segment with playback controls, fit modes, and visual effects.
+ * Uses the renderer's Video component for frame-accurate playback.
+ */
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const defaults_1 = require("../utils/defaults");
+const text_1 = require("../utils/text");
+/**
+ * Map FitMode to CSS object-fit
+ */
+function fitModeToCss(fit) {
+    return fit;
+}
+/**
+ * VideoElement renders videos with:
+ * - Playback speed control
+ * - Volume control
+ * - Fit modes (cover, contain, fill)
+ * - Opacity
+ * - Rotation
+ * - Border radius
+ * - Fade-in effect
+ */
+function VideoElement({ segment, src, startFrame, durationInFrames, scale = 1 }) {
+    const frame = (0, remotion_1.useCurrentFrame)();
+    const { fps } = (0, remotion_1.useVideoConfig)();
+    // Apply defaults
+    const fit = segment.fit ?? defaults_1.VIDEO_DEFAULTS.fit;
+    const speed = segment.speed ?? defaults_1.VIDEO_DEFAULTS.speed;
+    const volume = (segment.volume ?? defaults_1.VIDEO_DEFAULTS.volume) / 100;
+    const opacity = (segment.opacity ?? defaults_1.VISUAL_DEFAULTS.opacity) / 100;
+    const rotation = segment.rotation ?? 0;
+    const borderRadius = segment.borderRadius;
+    const fadeIn = segment.fadeIn ?? 0;
+    const loop = segment.loop ?? defaults_1.VIDEO_DEFAULTS.loop;
+    // For loop timing: use explicit sourceDurationMs, or fall back to segment duration
+    const loopSourceDurationMs = segment.sourceDurationMs
+        ?? (segment.duration?.type === 'absolute' ? segment.duration.value : undefined);
+    // Position and size
+    const x = segment.xOffset * scale;
+    const y = segment.yOffset * scale;
+    const width = segment.width * scale;
+    const height = segment.height * scale;
+    // Calculate start time offset for source video (in frames for OffthreadVideo)
+    const startFromMs = segment.startTrim ?? 0;
+    const startFromFrames = Math.round((startFromMs / 1000) * fps);
+    // Calculate fade-in opacity
+    const fadeOpacity = (0, react_1.useMemo)(() => {
+        if (fadeIn <= 0)
+            return 1;
+        const framesFromStart = frame - startFrame;
+        const fadeInFrames = (fadeIn / 1000) * fps;
+        if (framesFromStart >= fadeInFrames)
+            return 1;
+        if (framesFromStart <= 0)
+            return 0;
+        return framesFromStart / fadeInFrames;
+    }, [frame, startFrame, fadeIn, fps]);
+    // Calculate border radius CSS
+    const borderRadiusStyle = (0, react_1.useMemo)(() => {
+        if (!borderRadius)
+            return undefined;
+        if (typeof borderRadius === 'number') {
+            return `${borderRadius * scale}px`;
+        }
+        const radii = (0, text_1.getBorderRadii)(borderRadius);
+        if (!radii || radii.length < 4)
+            return undefined;
+        return `${radii[0] * scale}px ${radii[1] * scale}px ${radii[2] * scale}px ${radii[3] * scale}px`;
+    }, [borderRadius, scale]);
+    // Container style
+    const containerStyle = (0, react_1.useMemo)(() => ({
+        position: 'absolute',
+        left: x,
+        top: y,
+        width,
+        height,
+        transform: rotation !== 0 ? `rotate(${rotation}deg)` : undefined,
+        transformOrigin: 'center center',
+        overflow: 'hidden',
+        borderRadius: borderRadiusStyle,
+        opacity: opacity * fadeOpacity,
+    }), [x, y, width, height, rotation, borderRadiusStyle, opacity, fadeOpacity]);
+    // Video style
+    const videoStyle = (0, react_1.useMemo)(() => ({
+        width: '100%',
+        height: '100%',
+        objectFit: fitModeToCss(fit),
+    }), [fit]);
+    // Calculate loop duration in frames (accounting for speed)
+    const loopDurationInFrames = (0, react_1.useMemo)(() => {
+        if (!loop || !loopSourceDurationMs)
+            return undefined;
+        // Duration adjusted for playback speed
+        const effectiveDurationMs = loopSourceDurationMs / speed;
+        return Math.max(1, Math.round((effectiveDurationMs / 1000) * fps));
+    }, [loop, loopSourceDurationMs, speed, fps]);
+    const videoElement = ((0, jsx_runtime_1.jsx)(remotion_1.OffthreadVideo, { src: src, style: videoStyle, startFrom: startFromFrames, playbackRate: speed, volume: volume }));
+    return ((0, jsx_runtime_1.jsx)("div", { style: containerStyle, children: loop && loopDurationInFrames ? ((0, jsx_runtime_1.jsx)(remotion_1.Loop, { durationInFrames: loopDurationInFrames, children: videoElement })) : (videoElement) }));
+}
+exports.default = VideoElement;

package/dist/render/components/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Component exports for ugcinc-render
+ */
+export { TextElement, type TextElementProps } from './TextElement';
+export { ImageElement, type ImageElementProps } from './ImageElement';
+export { VideoElement, type VideoElementProps } from './VideoElement';
+export { CaptionOverlay } from './CaptionOverlay';

package/dist/render/components/index.js

@@ -0,0 +1,14 @@
+"use strict";
+/**
+ * Component exports for ugcinc-render
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CaptionOverlay = exports.VideoElement = exports.ImageElement = exports.TextElement = void 0;
+var TextElement_1 = require("./TextElement");
+Object.defineProperty(exports, "TextElement", { enumerable: true, get: function () { return TextElement_1.TextElement; } });
+var ImageElement_1 = require("./ImageElement");
+Object.defineProperty(exports, "ImageElement", { enumerable: true, get: function () { return ImageElement_1.ImageElement; } });
+var VideoElement_1 = require("./VideoElement");
+Object.defineProperty(exports, "VideoElement", { enumerable: true, get: function () { return VideoElement_1.VideoElement; } });
+var CaptionOverlay_1 = require("./CaptionOverlay");
+Object.defineProperty(exports, "CaptionOverlay", { enumerable: true, get: function () { return CaptionOverlay_1.CaptionOverlay; } });

package/dist/render/compositions/AutoCaptionComposition.d.ts

@@ -0,0 +1,42 @@
+/**
+ * AutoCaptionComposition
+ *
+ * A Remotion composition that renders a video with TikTok-style captions overlay.
+ * Used for both server-side rendering (Modal) and client-side preview.
+ *
+ * Features:
+ * - Video playback with caption overlay
+ * - Word-by-word highlighting synchronized to audio
+ * - Customizable styling via CaptionStyle
+ * - Proper text wrapping within bounds
+ *
+ * @example
+ * ```tsx
+ * import { Player } from '@remotion/player';
+ * import { AutoCaptionComposition } from 'ugcinc-render/compositions';
+ *
+ * <Player
+ *   component={AutoCaptionComposition}
+ *   inputProps={{
+ *     videoUrl: 'https://...',
+ *     captions: [{ word: 'Hello', startMs: 0, endMs: 500 }, ...],
+ *     style: { preset: 'hormozi' },
+ *   }}
+ *   durationInFrames={durationInFrames}
+ *   fps={30}
+ *   compositionWidth={1080}
+ *   compositionHeight={1920}
+ * />
+ * ```
+ */
+import type { AutoCaptionCompositionProps } from '../types/caption';
+/**
+ * AutoCaptionComposition renders a video with synchronized caption overlay
+ */
+export declare function AutoCaptionComposition({ videoUrl, captions, style, }: AutoCaptionCompositionProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * AutoCaptionComposition with standard Video component
+ * Use this variant for client-side preview where OffthreadVideo may not work
+ */
+export declare function AutoCaptionCompositionWithVideo({ videoUrl, captions, style, }: AutoCaptionCompositionProps): import("react/jsx-runtime").JSX.Element;
+export default AutoCaptionComposition;

package/dist/render/compositions/AutoCaptionComposition.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutoCaptionComposition = AutoCaptionComposition;
+exports.AutoCaptionCompositionWithVideo = AutoCaptionCompositionWithVideo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const remotion_1 = require("remotion");
+const CaptionOverlay_1 = require("../components/CaptionOverlay");
+/**
+ * AutoCaptionComposition renders a video with synchronized caption overlay
+ */
+function AutoCaptionComposition({ videoUrl, captions, style, }) {
+    return ((0, jsx_runtime_1.jsxs)(remotion_1.AbsoluteFill, { style: { backgroundColor: '#000000' }, children: [(0, jsx_runtime_1.jsx)(remotion_1.OffthreadVideo, { src: videoUrl, style: {
+                    width: '100%',
+                    height: '100%',
+                    objectFit: 'cover',
+                } }), (0, jsx_runtime_1.jsx)(CaptionOverlay_1.CaptionOverlay, { captions: captions, style: style })] }));
+}
+/**
+ * AutoCaptionComposition with standard Video component
+ * Use this variant for client-side preview where OffthreadVideo may not work
+ */
+function AutoCaptionCompositionWithVideo({ videoUrl, captions, style, }) {
+    return ((0, jsx_runtime_1.jsxs)(remotion_1.AbsoluteFill, { style: { backgroundColor: '#000000' }, children: [(0, jsx_runtime_1.jsx)(remotion_1.Video, { src: videoUrl, style: {
+                    width: '100%',
+                    height: '100%',
+                    objectFit: 'cover',
+                } }), (0, jsx_runtime_1.jsx)(CaptionOverlay_1.CaptionOverlay, { captions: captions, style: style })] }));
+}
+exports.default = AutoCaptionComposition;