ugcinc-render 1.4.0 → 1.5.1

package/dist/index.d.mts

@@ -337,27 +337,47 @@ interface ImageEditorNodeConfig {
 }
 
 /**
- * Video editor types for rendering
+ * Video editor types for the WEBAPP UI
+ *
+ * These types include UI-only fields (marked with comments).
+ * The renderer uses types from editor.ts and segment.ts instead.
+ *
+ * UI-only fields are stripped before sending to renderer:
+ * - timeMode: UI helper for displaying timing mode
+ * - inputRef/textInputRef: Resolved to source/text before rendering
+ * - dimensionPreset: Renderer uses width/height directly
+ * - previewUrls/previewTextValues: Only for UI preview
  */
 
 /**
- * UI helper for timing mode
+ * UI helper for timing mode - not sent to renderer
  */
 type TimeMode = 'fixed' | 'flexible';
 /**
- * Base properties for all video editor segments
+ * Base properties for all video editor segments (UI)
  */
 interface VideoEditorBaseSegment {
+    /** Unique segment identifier */
     id: string;
+    /** Order in the channel (0-based) */
     order: number;
+    /** Time offset from previous segment or absolute position */
     offset: TimeValue;
+    /** Segment duration - required for sequential playback */
     duration?: TimeValue;
+    /** Trim from start in milliseconds */
     startTrim?: number;
+    /** Trim from end in milliseconds */
     endTrim?: number;
+    /** UI-only: helper for timing mode display - stripped before rendering */
     timeMode?: TimeMode;
+    /** Parent segment ID for overlays */
     parentId?: string;
+    /** Relative start (0-1) within parent for overlays */
     relativeStart?: number;
+    /** Relative end (0-1) within parent for overlays */
     relativeEnd?: number;
+    /** Fade-in duration in milliseconds */
     fadeIn?: number;
 }
 /**
@@ -374,11 +394,13 @@ interface VideoEditorVisualSegment extends VideoEditorBaseSegment {
     opacity?: number;
 }
 /**
- * Video segment
+ * Video segment (UI)
  */
 interface VideoEditorVideoSegment extends VideoEditorVisualSegment {
     type: 'video';
+    /** UI-only: reference to input node - resolved to source before rendering */
     inputRef?: string;
+    /** Actual source URL (set after inputRef is resolved) */
     source?: string;
     fit?: FitMode;
     speed?: number;
@@ -386,31 +408,37 @@ interface VideoEditorVideoSegment extends VideoEditorVisualSegment {
     borderRadius?: number | BorderRadiusConfig;
 }
 /**
- * Audio segment
+ * Audio segment (UI)
  */
 interface VideoEditorAudioSegment extends VideoEditorBaseSegment {
     type: 'audio';
+    /** UI-only: reference to input node - resolved to source before rendering */
     inputRef?: string;
+    /** Actual source URL (set after inputRef is resolved) */
     source?: string;
     volume?: number;
 }
 /**
- * Image segment
+ * Image segment (UI)
  */
 interface VideoEditorImageSegment extends VideoEditorVisualSegment {
     type: 'image';
+    /** UI-only: reference to input node - resolved to source before rendering */
     inputRef?: string;
+    /** Actual source URL (set after inputRef is resolved) */
     source?: string;
     fit?: FitMode;
     loop?: boolean;
     borderRadius?: number | BorderRadiusConfig;
 }
 /**
- * Text segment
+ * Text segment (UI)
  */
 interface VideoEditorTextSegment extends VideoEditorVisualSegment {
     type: 'text';
+    /** UI-only: reference to text input - resolved to text before rendering */
     textInputRef?: string;
+    /** Actual text content (set after textInputRef is resolved) */
     text?: string;
     alignment?: 'left' | 'center' | 'right' | 'justify';
     verticalAlign?: 'top' | 'middle' | 'bottom';
@@ -445,16 +473,25 @@ interface VideoEditorChannel {
     segments: VideoEditorSegment[];
 }
 /**
- * Video editor node configuration
+ * Video editor node configuration for WEBAPP UI
+ *
+ * Duration is NOT stored - it's calculated from segment durations.
+ * dimensionPreset, previewUrls, previewTextValues are UI-only.
  */
 interface VideoEditorNodeConfig {
+    /** Canvas width in pixels */
     width: number;
+    /** Canvas height in pixels */
     height: number;
+    /** Frames per second */
     fps: number;
-    duration?: number;
+    /** UI-only: dimension preset selector */
     dimensionPreset: DimensionPresetKey;
+    /** Channels containing segments */
     channels: VideoEditorChannel[];
+    /** UI-only: preview URLs for displaying in editor */
     previewUrls?: Record<string, string>;
+    /** UI-only: preview text values for displaying in editor */
     previewTextValues?: Record<string, string>;
 }
 /**
@@ -644,15 +681,16 @@ type VisualSegmentUnion = VideoSegment | ImageSegment | TextSegment;
 type StaticSegment = ImageSegment | TextSegment;
 
 /**
- * Editor configuration types
+ * Editor configuration types for RENDERING
+ *
+ * These types define what the renderer receives.
+ * Duration is always calculated from segments - there is no duration field.
  *
- * Editors are the top-level containers that define the canvas dimensions,
- * timing, and channels containing segments.
+ * Note: UI-specific types (with previewUrls, dimensionPreset, etc.) are in video.ts
  */
 
 /**
- * A channel (track) containing segments
- * Channels allow for parallel playback of segments
+ * A channel (track) containing segments for rendering
  */
 interface Channel<T extends Segment = Segment> {
     /** Unique channel identifier */
@@ -661,17 +699,16 @@ interface Channel<T extends Segment = Segment> {
     segments: T[];
 }
 /**
- * Base editor configuration shared by all editor types
+ * Base editor configuration for rendering
+ * Duration is calculated from segments, not stored.
  */
 interface BaseEditorConfig {
     /** Canvas width in pixels */
     width: number;
     /** Canvas height in pixels */
     height: number;
-    /** Frames per second (video only) */
+    /** Frames per second */
     fps: number;
-    /** Total duration in milliseconds (auto-calculated if 0 or undefined) */
-    duration?: number;
 }
 /**
  * Full editor configuration with all segment types

package/dist/index.d.ts

@@ -337,27 +337,47 @@ interface ImageEditorNodeConfig {
 }
 
 /**
- * Video editor types for rendering
+ * Video editor types for the WEBAPP UI
+ *
+ * These types include UI-only fields (marked with comments).
+ * The renderer uses types from editor.ts and segment.ts instead.
+ *
+ * UI-only fields are stripped before sending to renderer:
+ * - timeMode: UI helper for displaying timing mode
+ * - inputRef/textInputRef: Resolved to source/text before rendering
+ * - dimensionPreset: Renderer uses width/height directly
+ * - previewUrls/previewTextValues: Only for UI preview
  */
 
 /**
- * UI helper for timing mode
+ * UI helper for timing mode - not sent to renderer
  */
 type TimeMode = 'fixed' | 'flexible';
 /**
- * Base properties for all video editor segments
+ * Base properties for all video editor segments (UI)
  */
 interface VideoEditorBaseSegment {
+    /** Unique segment identifier */
     id: string;
+    /** Order in the channel (0-based) */
     order: number;
+    /** Time offset from previous segment or absolute position */
     offset: TimeValue;
+    /** Segment duration - required for sequential playback */
     duration?: TimeValue;
+    /** Trim from start in milliseconds */
     startTrim?: number;
+    /** Trim from end in milliseconds */
     endTrim?: number;
+    /** UI-only: helper for timing mode display - stripped before rendering */
     timeMode?: TimeMode;
+    /** Parent segment ID for overlays */
     parentId?: string;
+    /** Relative start (0-1) within parent for overlays */
     relativeStart?: number;
+    /** Relative end (0-1) within parent for overlays */
     relativeEnd?: number;
+    /** Fade-in duration in milliseconds */
     fadeIn?: number;
 }
 /**
@@ -374,11 +394,13 @@ interface VideoEditorVisualSegment extends VideoEditorBaseSegment {
     opacity?: number;
 }
 /**
- * Video segment
+ * Video segment (UI)
  */
 interface VideoEditorVideoSegment extends VideoEditorVisualSegment {
     type: 'video';
+    /** UI-only: reference to input node - resolved to source before rendering */
     inputRef?: string;
+    /** Actual source URL (set after inputRef is resolved) */
     source?: string;
     fit?: FitMode;
     speed?: number;
@@ -386,31 +408,37 @@ interface VideoEditorVideoSegment extends VideoEditorVisualSegment {
     borderRadius?: number | BorderRadiusConfig;
 }
 /**
- * Audio segment
+ * Audio segment (UI)
  */
 interface VideoEditorAudioSegment extends VideoEditorBaseSegment {
     type: 'audio';
+    /** UI-only: reference to input node - resolved to source before rendering */
     inputRef?: string;
+    /** Actual source URL (set after inputRef is resolved) */
     source?: string;
     volume?: number;
 }
 /**
- * Image segment
+ * Image segment (UI)
  */
 interface VideoEditorImageSegment extends VideoEditorVisualSegment {
     type: 'image';
+    /** UI-only: reference to input node - resolved to source before rendering */
     inputRef?: string;
+    /** Actual source URL (set after inputRef is resolved) */
     source?: string;
     fit?: FitMode;
     loop?: boolean;
     borderRadius?: number | BorderRadiusConfig;
 }
 /**
- * Text segment
+ * Text segment (UI)
  */
 interface VideoEditorTextSegment extends VideoEditorVisualSegment {
     type: 'text';
+    /** UI-only: reference to text input - resolved to text before rendering */
     textInputRef?: string;
+    /** Actual text content (set after textInputRef is resolved) */
     text?: string;
     alignment?: 'left' | 'center' | 'right' | 'justify';
     verticalAlign?: 'top' | 'middle' | 'bottom';
@@ -445,16 +473,25 @@ interface VideoEditorChannel {
     segments: VideoEditorSegment[];
 }
 /**
- * Video editor node configuration
+ * Video editor node configuration for WEBAPP UI
+ *
+ * Duration is NOT stored - it's calculated from segment durations.
+ * dimensionPreset, previewUrls, previewTextValues are UI-only.
  */
 interface VideoEditorNodeConfig {
+    /** Canvas width in pixels */
     width: number;
+    /** Canvas height in pixels */
     height: number;
+    /** Frames per second */
     fps: number;
-    duration?: number;
+    /** UI-only: dimension preset selector */
     dimensionPreset: DimensionPresetKey;
+    /** Channels containing segments */
     channels: VideoEditorChannel[];
+    /** UI-only: preview URLs for displaying in editor */
     previewUrls?: Record<string, string>;
+    /** UI-only: preview text values for displaying in editor */
     previewTextValues?: Record<string, string>;
 }
 /**
@@ -644,15 +681,16 @@ type VisualSegmentUnion = VideoSegment | ImageSegment | TextSegment;
 type StaticSegment = ImageSegment | TextSegment;
 
 /**
- * Editor configuration types
+ * Editor configuration types for RENDERING
+ *
+ * These types define what the renderer receives.
+ * Duration is always calculated from segments - there is no duration field.
  *
- * Editors are the top-level containers that define the canvas dimensions,
- * timing, and channels containing segments.
+ * Note: UI-specific types (with previewUrls, dimensionPreset, etc.) are in video.ts
  */
 
 /**
- * A channel (track) containing segments
- * Channels allow for parallel playback of segments
+ * A channel (track) containing segments for rendering
  */
 interface Channel<T extends Segment = Segment> {
     /** Unique channel identifier */
@@ -661,17 +699,16 @@ interface Channel<T extends Segment = Segment> {
     segments: T[];
 }
 /**
- * Base editor configuration shared by all editor types
+ * Base editor configuration for rendering
+ * Duration is calculated from segments, not stored.
  */
 interface BaseEditorConfig {
     /** Canvas width in pixels */
     width: number;
     /** Canvas height in pixels */
     height: number;
-    /** Frames per second (video only) */
+    /** Frames per second */
     fps: number;
-    /** Total duration in milliseconds (auto-calculated if 0 or undefined) */
-    duration?: number;
 }
 /**
  * Full editor configuration with all segment types

package/dist/index.js

@@ -294,6 +294,55 @@ function hexToRgba(hex, opacity = 100) {
 
 // src/components/TextElement.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+function calculateAutoWidth({
+  text,
+  maxWidth,
+  paddingLeft,
+  paddingRight,
+  fontSize,
+  fontWeight,
+  fontFamily,
+  letterSpacing
+}) {
+  if (typeof document === "undefined") {
+    throw new Error("calculateAutoWidth requires a browser environment with document available");
+  }
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error("Failed to get 2D canvas context for text measurement");
+  }
+  ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+  const availableWidth = maxWidth - paddingLeft - paddingRight;
+  const words = text.split(" ");
+  const lines = [];
+  let currentLine = "";
+  for (const word of words) {
+    if (!word) continue;
+    const testLine = currentLine + (currentLine ? " " : "") + word;
+    const charCount = [...testLine].length;
+    const extraSpacing = charCount > 1 ? (charCount - 1) * letterSpacing : 0;
+    const totalWidth = ctx.measureText(testLine).width + extraSpacing;
+    if (totalWidth > availableWidth && currentLine) {
+      lines.push(currentLine);
+      currentLine = word;
+    } else {
+      currentLine = testLine;
+    }
+  }
+  if (currentLine) lines.push(currentLine);
+  let widestLineWidth = 0;
+  for (const line of lines) {
+    const chars = [...line];
+    let lineWidth = 0;
+    for (const char of chars) {
+      lineWidth += ctx.measureText(char).width + letterSpacing;
+    }
+    if (chars.length > 0) lineWidth -= letterSpacing;
+    widestLineWidth = Math.max(widestLineWidth, lineWidth);
+  }
+  return Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth);
+}
 function TextElement({ segment, scale = 1 }) {
   const fontType = segment.fontType ?? TEXT_DEFAULTS.fontType;
   const fontSize = (segment.fontSize ?? TEXT_DEFAULTS.fontSize) * scale;
@@ -321,6 +370,19 @@ function TextElement({ segment, scale = 1 }) {
   const backgroundOpacity = segment.backgroundOpacity ?? TEXT_DEFAULTS.backgroundOpacity;
   const backgroundBorderRadius = segment.backgroundBorderRadius;
   const fontFamily = getFontFamily(fontType);
+  const calculatedWidth = (0, import_react.useMemo)(() => {
+    if (!autoWidth) return width;
+    return calculateAutoWidth({
+      text: segment.text,
+      maxWidth: width,
+      paddingLeft,
+      paddingRight,
+      fontSize,
+      fontWeight,
+      fontFamily,
+      letterSpacing
+    });
+  }, [autoWidth, segment.text, width, paddingLeft, paddingRight, fontSize, fontWeight, fontFamily, letterSpacing]);
   const borderRadiusStyle = (0, import_react.useMemo)(() => {
     if (!backgroundBorderRadius) return void 0;
     const radii = getBorderRadii(backgroundBorderRadius);
@@ -344,8 +406,10 @@ function TextElement({ segment, scale = 1 }) {
   }), [x, y, width, height, rotation, verticalAlign, autoWidth, boxAlign]);
   const backgroundBoxStyle = (0, import_react.useMemo)(() => {
     const baseStyle = autoWidth ? {
-      width: "fit-content",
-      maxWidth: "100%"
+      // Use explicit calculated width instead of fit-content
+      // This fixes the issue where multi-line text doesn't shrink to widest line
+      width: calculatedWidth,
+      maxWidth: width
     } : {
       // When not autoWidth, let the text div handle everything
       display: "flex",
@@ -359,7 +423,7 @@ function TextElement({ segment, scale = 1 }) {
       backgroundColor: hexToRgba(backgroundColor, backgroundOpacity),
       borderRadius: borderRadiusStyle
     };
-  }, [autoWidth, backgroundColor, backgroundOpacity, borderRadiusStyle]);
+  }, [autoWidth, calculatedWidth, width, backgroundColor, backgroundOpacity, borderRadiusStyle]);
   const textStyle = (0, import_react.useMemo)(() => ({
     fontFamily,
     fontSize,
@@ -1245,9 +1309,9 @@ function calculateSegmentTimings(config, fps) {
       const startFrame = currentFrame + offsetFrames;
       let durationMs;
       if (segment.duration) {
-        durationMs = segment.duration.type === "absolute" ? segment.duration.value : segment.duration.value * (config.duration ?? 1e4);
+        durationMs = segment.duration.type === "absolute" ? segment.duration.value : 5e3;
       } else {
-        durationMs = (config.duration ?? 1e4) - startFrame / fps * 1e3;
+        durationMs = 5e3;
       }
       const durationInFrames = Math.max(1, Math.round(durationMs / 1e3 * fps));
       const endFrame = startFrame + durationInFrames;
@@ -1666,7 +1730,6 @@ var defaultVideoProps = {
     width: 1080,
     height: 1920,
     fps: 30,
-    duration: 5e3,
     channels: []
   },
   sources: {},

package/dist/index.mjs

@@ -220,6 +220,55 @@ function hexToRgba(hex, opacity = 100) {
 
 // src/components/TextElement.tsx
 import { jsx } from "react/jsx-runtime";
+function calculateAutoWidth({
+  text,
+  maxWidth,
+  paddingLeft,
+  paddingRight,
+  fontSize,
+  fontWeight,
+  fontFamily,
+  letterSpacing
+}) {
+  if (typeof document === "undefined") {
+    throw new Error("calculateAutoWidth requires a browser environment with document available");
+  }
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error("Failed to get 2D canvas context for text measurement");
+  }
+  ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+  const availableWidth = maxWidth - paddingLeft - paddingRight;
+  const words = text.split(" ");
+  const lines = [];
+  let currentLine = "";
+  for (const word of words) {
+    if (!word) continue;
+    const testLine = currentLine + (currentLine ? " " : "") + word;
+    const charCount = [...testLine].length;
+    const extraSpacing = charCount > 1 ? (charCount - 1) * letterSpacing : 0;
+    const totalWidth = ctx.measureText(testLine).width + extraSpacing;
+    if (totalWidth > availableWidth && currentLine) {
+      lines.push(currentLine);
+      currentLine = word;
+    } else {
+      currentLine = testLine;
+    }
+  }
+  if (currentLine) lines.push(currentLine);
+  let widestLineWidth = 0;
+  for (const line of lines) {
+    const chars = [...line];
+    let lineWidth = 0;
+    for (const char of chars) {
+      lineWidth += ctx.measureText(char).width + letterSpacing;
+    }
+    if (chars.length > 0) lineWidth -= letterSpacing;
+    widestLineWidth = Math.max(widestLineWidth, lineWidth);
+  }
+  return Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth);
+}
 function TextElement({ segment, scale = 1 }) {
   const fontType = segment.fontType ?? TEXT_DEFAULTS.fontType;
   const fontSize = (segment.fontSize ?? TEXT_DEFAULTS.fontSize) * scale;
@@ -247,6 +296,19 @@ function TextElement({ segment, scale = 1 }) {
   const backgroundOpacity = segment.backgroundOpacity ?? TEXT_DEFAULTS.backgroundOpacity;
   const backgroundBorderRadius = segment.backgroundBorderRadius;
   const fontFamily = getFontFamily(fontType);
+  const calculatedWidth = useMemo(() => {
+    if (!autoWidth) return width;
+    return calculateAutoWidth({
+      text: segment.text,
+      maxWidth: width,
+      paddingLeft,
+      paddingRight,
+      fontSize,
+      fontWeight,
+      fontFamily,
+      letterSpacing
+    });
+  }, [autoWidth, segment.text, width, paddingLeft, paddingRight, fontSize, fontWeight, fontFamily, letterSpacing]);
   const borderRadiusStyle = useMemo(() => {
     if (!backgroundBorderRadius) return void 0;
     const radii = getBorderRadii(backgroundBorderRadius);
@@ -270,8 +332,10 @@ function TextElement({ segment, scale = 1 }) {
   }), [x, y, width, height, rotation, verticalAlign, autoWidth, boxAlign]);
   const backgroundBoxStyle = useMemo(() => {
     const baseStyle = autoWidth ? {
-      width: "fit-content",
-      maxWidth: "100%"
+      // Use explicit calculated width instead of fit-content
+      // This fixes the issue where multi-line text doesn't shrink to widest line
+      width: calculatedWidth,
+      maxWidth: width
     } : {
       // When not autoWidth, let the text div handle everything
       display: "flex",
@@ -285,7 +349,7 @@ function TextElement({ segment, scale = 1 }) {
       backgroundColor: hexToRgba(backgroundColor, backgroundOpacity),
       borderRadius: borderRadiusStyle
     };
-  }, [autoWidth, backgroundColor, backgroundOpacity, borderRadiusStyle]);
+  }, [autoWidth, calculatedWidth, width, backgroundColor, backgroundOpacity, borderRadiusStyle]);
   const textStyle = useMemo(() => ({
     fontFamily,
     fontSize,
@@ -1171,9 +1235,9 @@ function calculateSegmentTimings(config, fps) {
       const startFrame = currentFrame + offsetFrames;
       let durationMs;
       if (segment.duration) {
-        durationMs = segment.duration.type === "absolute" ? segment.duration.value : segment.duration.value * (config.duration ?? 1e4);
+        durationMs = segment.duration.type === "absolute" ? segment.duration.value : 5e3;
       } else {
-        durationMs = (config.duration ?? 1e4) - startFrame / fps * 1e3;
+        durationMs = 5e3;
       }
       const durationInFrames = Math.max(1, Math.round(durationMs / 1e3 * fps));
       const endFrame = startFrame + durationInFrames;
@@ -1592,7 +1656,6 @@ var defaultVideoProps = {
     width: 1080,
     height: 1920,
     fps: 30,
-    duration: 5e3,
     channels: []
   },
   sources: {},

package/package.json

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