ugcinc 4.5.12 → 4.5.13

package/dist/automations/nodes/image-composer.d.ts

@@ -26,6 +26,12 @@ export interface ImageEditorNodeConfig {
     elements: ImageEditorElement[];
     /** Background type: 'image' for image input, 'color' for solid color */
     backgroundType?: 'image' | 'color';
+    /** Whether background image comes from a variable input port (default: true for backwards compat) */
+    backgroundIsVariable?: boolean;
+    /** Media library ID for static background image */
+    backgroundMediaId?: string | null;
+    /** URL for static background image */
+    backgroundMediaUrl?: string | null;
     /** Background color (hex) when backgroundType is 'color' */
     backgroundColor?: string;
     /** How the background image fits the canvas */

package/dist/automations/nodes/image-composer.js

@@ -20,6 +20,7 @@ const definition = (0, types_1.defineNode)({
             aspectRatio: '9:16',
             dimensionPreset: '9:16',
             backgroundType: 'image',
+            backgroundIsVariable: false,
             elements: [],
         },
         outputMode: 'per-input',
@@ -29,8 +30,8 @@ const definition = (0, types_1.defineNode)({
         const editorConfig = config?.imageEditor;
         const inputs = [];
         if (editorConfig) {
-            // Add background input if backgroundType is not 'color'
-            if (editorConfig.backgroundType !== 'color') {
+            // Add background input if backgroundType is not 'color' AND is variable
+            if (editorConfig.backgroundType !== 'color' && editorConfig.backgroundIsVariable !== false) {
                 inputs.push({
                     id: 'background',
                     type: 'image',
@@ -40,7 +41,7 @@ const definition = (0, types_1.defineNode)({
             }
             // Add inputs for each element with inputId or textInputId
             editorConfig.elements.forEach(elem => {
-                if (elem.type === 'image' && elem.inputId) {
+                if (elem.type === 'image' && elem.inputId && elem.imageIsVariable !== false) {
                     inputs.push({
                         id: elem.inputId,
                         type: 'image',
@@ -101,17 +102,31 @@ const definition = (0, types_1.defineNode)({
             return null;
         const sources = {};
         const textContent = {};
-        // Add background URL if available
-        if (editorConfig.previewBackgroundUrl) {
-            sources['background'] = editorConfig.previewBackgroundUrl;
+        // Add background URL: use static URL when not variable, otherwise use preview URL
+        if (editorConfig.backgroundIsVariable === false) {
+            if (editorConfig.backgroundMediaUrl) {
+                sources['background'] = editorConfig.backgroundMediaUrl;
+            }
+        }
+        else {
+            if (editorConfig.previewBackgroundUrl) {
+                sources['background'] = editorConfig.previewBackgroundUrl;
+            }
         }
         // Resolve image elements: inputId -> element.id
         // Resolve text elements: textInputId -> element.id
         for (const elem of editorConfig.elements) {
             if (elem.type === 'image' && elem.inputId) {
-                const url = editorConfig.previewImageUrls?.[elem.inputId];
-                if (url) {
-                    sources[elem.id] = url;
+                if (elem.imageIsVariable === false) {
+                    if (elem.imageMediaUrl) {
+                        sources[elem.id] = elem.imageMediaUrl;
+                    }
+                }
+                else {
+                    const url = editorConfig.previewImageUrls?.[elem.inputId];
+                    if (url) {
+                        sources[elem.id] = url;
+                    }
                 }
             }
             else if (elem.type === 'text' && elem.textInputId) {
@@ -161,17 +176,31 @@ function prepareImageComposerInput(editorConfig, inputs) {
     // Build imageUrls map from inputs
     const imageUrls = {};
     const textValues = {};
-    // Add background URL if provided (extract .url from ImageValue)
-    const bgValue = inputs.background;
-    if (bgValue && typeof bgValue === 'object' && typeof bgValue.url === 'string') {
-        imageUrls.background = bgValue.url;
+    // Add background URL: use static URL when not variable, otherwise from inputs
+    if (editorConfig.backgroundIsVariable === false) {
+        if (editorConfig.backgroundMediaUrl) {
+            imageUrls.background = editorConfig.backgroundMediaUrl;
+        }
+    }
+    else {
+        const bgValue = inputs.background;
+        if (bgValue && typeof bgValue === 'object' && typeof bgValue.url === 'string') {
+            imageUrls.background = bgValue.url;
+        }
     }
     // Process each element to extract image URLs and text values
     for (const elem of editorConfig.elements) {
         if (elem.type === 'image' && elem.inputId) {
-            const value = inputs[elem.inputId];
-            if (value && typeof value === 'object' && typeof value.url === 'string') {
-                imageUrls[elem.inputId] = value.url;
+            if (elem.imageIsVariable === false) {
+                if (elem.imageMediaUrl) {
+                    imageUrls[elem.inputId] = elem.imageMediaUrl;
+                }
+            }
+            else {
+                const value = inputs[elem.inputId];
+                if (value && typeof value === 'object' && typeof value.url === 'string') {
+                    imageUrls[elem.inputId] = value.url;
+                }
             }
         }
         else if (elem.type === 'text' && elem.textInputId) {

package/dist/render/types/element.d.ts

@@ -97,6 +97,12 @@ export interface ImageEditorElement {
     boxAlign?: 'left' | 'center' | 'right';
     /** Maps to input port (e.g., "image_1", "image_2") */
     inputId?: string;
+    /** Whether this image comes from a variable input port (default: true for backwards compat) */
+    imageIsVariable?: boolean;
+    /** Media library ID for static image selection */
+    imageMediaId?: string | null;
+    /** URL for static image selection */
+    imageMediaUrl?: string | null;
     /** How the image fits its container */
     fit?: FitMode;
     /** Opacity percentage 0-100 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugcinc",
-  "version": "4.5.12",
+  "version": "4.5.13",
   "description": "TypeScript/JavaScript client for the UGC Inc API",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",