ugcinc-render 1.3.11 → 1.3.13

package/dist/index.d.mts

@@ -276,8 +276,6 @@ interface ImageEditorElement {
     lineHeight?: number;
     /** Letter spacing in pixels */
     letterSpacing?: number;
-    /** Enable font kerning for proper letter pair spacing (default: true) */
-    kerning?: boolean;
     /** Horizontal text alignment */
     textAlign?: TextAlignment;
     /** Vertical text alignment within bounds */
@@ -322,6 +320,10 @@ interface ImageEditorNodeConfig {
     dimensionPreset: DimensionPresetKey;
     /** Elements to render */
     elements: ImageEditorElement[];
+    /** Background type: 'image' for image input, 'color' for solid color */
+    backgroundType?: 'image' | 'color';
+    /** Background color (hex) when backgroundType is 'color' */
+    backgroundColor?: string;
     /** How the background image fits the canvas */
     backgroundFit?: FitMode;
     /** Cached background image URL for consistent preview */
@@ -580,8 +582,6 @@ interface TextSegment extends VisualSegment {
     lineHeight?: number;
     /** Letter spacing in pixels (default: 0) */
     letterSpacing?: number;
-    /** Enable font kerning for proper letter pair spacing (default: true) */
-    kerning?: boolean;
     /** How text wraps to new lines (default: 'word') */
     textWrap?: TextWrap;
     /** How words break across lines (default: 'normal') */
@@ -744,6 +744,10 @@ interface ImageEditorCompositionProps {
     width?: number;
     /** Canvas height (required when using elements) */
     height?: number;
+    /** Background type: 'image' for image input, 'color' for solid color */
+    backgroundType?: 'image' | 'color';
+    /** Background color (hex) when backgroundType is 'color' */
+    backgroundColor?: string;
     /** Background fit mode (when using elements) */
     backgroundFit?: FitMode;
     /** Background image URL (when using elements) */
@@ -786,7 +790,7 @@ interface ImageEditorCompositionProps {
  * />
  * ```
  */
-declare function ImageEditorComposition({ config, sources, scale, elements, width, height, backgroundFit, backgroundUrl, imageUrls, textValues, }: ImageEditorCompositionProps): react_jsx_runtime.JSX.Element;
+declare function ImageEditorComposition({ config, sources, scale, elements, width, height, backgroundType, backgroundColor, backgroundFit, backgroundUrl, imageUrls, textValues, }: ImageEditorCompositionProps): react_jsx_runtime.JSX.Element;
 
 interface VideoEditorCompositionProps {
     /** The editor configuration to render */
@@ -993,7 +997,6 @@ declare const TEXT_DEFAULTS: {
     backgroundOpacity: number;
     autoWidth: boolean;
     boxAlign: "left";
-    kerning: boolean;
 };
 /**
  * Default values for image segments

package/dist/index.d.ts

@@ -276,8 +276,6 @@ interface ImageEditorElement {
     lineHeight?: number;
     /** Letter spacing in pixels */
     letterSpacing?: number;
-    /** Enable font kerning for proper letter pair spacing (default: true) */
-    kerning?: boolean;
     /** Horizontal text alignment */
     textAlign?: TextAlignment;
     /** Vertical text alignment within bounds */
@@ -322,6 +320,10 @@ interface ImageEditorNodeConfig {
     dimensionPreset: DimensionPresetKey;
     /** Elements to render */
     elements: ImageEditorElement[];
+    /** Background type: 'image' for image input, 'color' for solid color */
+    backgroundType?: 'image' | 'color';
+    /** Background color (hex) when backgroundType is 'color' */
+    backgroundColor?: string;
     /** How the background image fits the canvas */
     backgroundFit?: FitMode;
     /** Cached background image URL for consistent preview */
@@ -580,8 +582,6 @@ interface TextSegment extends VisualSegment {
     lineHeight?: number;
     /** Letter spacing in pixels (default: 0) */
     letterSpacing?: number;
-    /** Enable font kerning for proper letter pair spacing (default: true) */
-    kerning?: boolean;
     /** How text wraps to new lines (default: 'word') */
     textWrap?: TextWrap;
     /** How words break across lines (default: 'normal') */
@@ -744,6 +744,10 @@ interface ImageEditorCompositionProps {
     width?: number;
     /** Canvas height (required when using elements) */
     height?: number;
+    /** Background type: 'image' for image input, 'color' for solid color */
+    backgroundType?: 'image' | 'color';
+    /** Background color (hex) when backgroundType is 'color' */
+    backgroundColor?: string;
     /** Background fit mode (when using elements) */
     backgroundFit?: FitMode;
     /** Background image URL (when using elements) */
@@ -786,7 +790,7 @@ interface ImageEditorCompositionProps {
  * />
  * ```
  */
-declare function ImageEditorComposition({ config, sources, scale, elements, width, height, backgroundFit, backgroundUrl, imageUrls, textValues, }: ImageEditorCompositionProps): react_jsx_runtime.JSX.Element;
+declare function ImageEditorComposition({ config, sources, scale, elements, width, height, backgroundType, backgroundColor, backgroundFit, backgroundUrl, imageUrls, textValues, }: ImageEditorCompositionProps): react_jsx_runtime.JSX.Element;
 
 interface VideoEditorCompositionProps {
     /** The editor configuration to render */
@@ -993,7 +997,6 @@ declare const TEXT_DEFAULTS: {
     backgroundOpacity: number;
     autoWidth: boolean;
     boxAlign: "left";
-    kerning: boolean;
 };
 /**
  * Default values for image segments

package/dist/index.js

@@ -96,8 +96,7 @@ var TEXT_DEFAULTS = {
   strokeWidth: 0,
   backgroundOpacity: 100,
   autoWidth: false,
-  boxAlign: "left",
-  kerning: true
+  boxAlign: "left"
 };
 var IMAGE_DEFAULTS = {
   fit: "cover",
@@ -291,7 +290,6 @@ function TextElement({ segment, scale = 1 }) {
   const verticalAlign = segment.verticalAlign ?? TEXT_DEFAULTS.verticalAlign;
   const lineHeight = segment.lineHeight ?? TEXT_DEFAULTS.lineHeight;
   const letterSpacing = (segment.letterSpacing ?? TEXT_DEFAULTS.letterSpacing) * scale;
-  const kerning = segment.kerning ?? TEXT_DEFAULTS.kerning;
   const strokeColor = segment.strokeColor;
   const strokeWidth = (segment.strokeWidth ?? TEXT_DEFAULTS.strokeWidth) * scale;
   const uniformPadding = (segment.padding ?? TEXT_DEFAULTS.padding) * scale;
@@ -356,12 +354,6 @@ function TextElement({ segment, scale = 1 }) {
     color,
     lineHeight,
     letterSpacing,
-    // Font kerning for proper letter pair spacing (can be toggled)
-    fontKerning: kerning ? "normal" : "none",
-    // Enable OpenType font features for kerning
-    fontFeatureSettings: kerning ? '"kern" 1' : '"kern" 0',
-    // Text rendering optimization for better kerning
-    textRendering: kerning ? "optimizeLegibility" : "auto",
     // textAlign works for multi-line text within the (possibly auto-width) box
     textAlign: alignment === "justify" ? "justify" : alignment,
     padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
@@ -398,7 +390,6 @@ function TextElement({ segment, scale = 1 }) {
     color,
     lineHeight,
     letterSpacing,
-    kerning,
     alignment,
     paddingTop,
     paddingRight,
@@ -883,6 +874,8 @@ function ImageEditorComposition({
   elements,
   width,
   height,
+  backgroundType = "image",
+  backgroundColor,
   backgroundFit = "cover",
   backgroundUrl,
   imageUrls = {},
@@ -935,8 +928,9 @@ function ImageEditorComposition({
     }
     return void 0;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_remotion2.AbsoluteFill, { style: { backgroundColor: "#000000" }, children: [
-    bgUrl && segmentsFromElements && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  const containerBgColor = backgroundType === "color" && backgroundColor ? backgroundColor : "#000000";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_remotion2.AbsoluteFill, { style: { backgroundColor: containerBgColor }, children: [
+    backgroundType === "image" && bgUrl && segmentsFromElements && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_remotion2.Img,
       {
         src: bgUrl,

package/dist/index.mjs

@@ -35,8 +35,7 @@ var TEXT_DEFAULTS = {
   strokeWidth: 0,
   backgroundOpacity: 100,
   autoWidth: false,
-  boxAlign: "left",
-  kerning: true
+  boxAlign: "left"
 };
 var IMAGE_DEFAULTS = {
   fit: "cover",
@@ -230,7 +229,6 @@ function TextElement({ segment, scale = 1 }) {
   const verticalAlign = segment.verticalAlign ?? TEXT_DEFAULTS.verticalAlign;
   const lineHeight = segment.lineHeight ?? TEXT_DEFAULTS.lineHeight;
   const letterSpacing = (segment.letterSpacing ?? TEXT_DEFAULTS.letterSpacing) * scale;
-  const kerning = segment.kerning ?? TEXT_DEFAULTS.kerning;
   const strokeColor = segment.strokeColor;
   const strokeWidth = (segment.strokeWidth ?? TEXT_DEFAULTS.strokeWidth) * scale;
   const uniformPadding = (segment.padding ?? TEXT_DEFAULTS.padding) * scale;
@@ -295,12 +293,6 @@ function TextElement({ segment, scale = 1 }) {
     color,
     lineHeight,
     letterSpacing,
-    // Font kerning for proper letter pair spacing (can be toggled)
-    fontKerning: kerning ? "normal" : "none",
-    // Enable OpenType font features for kerning
-    fontFeatureSettings: kerning ? '"kern" 1' : '"kern" 0',
-    // Text rendering optimization for better kerning
-    textRendering: kerning ? "optimizeLegibility" : "auto",
     // textAlign works for multi-line text within the (possibly auto-width) box
     textAlign: alignment === "justify" ? "justify" : alignment,
     padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
@@ -337,7 +329,6 @@ function TextElement({ segment, scale = 1 }) {
     color,
     lineHeight,
     letterSpacing,
-    kerning,
     alignment,
     paddingTop,
     paddingRight,
@@ -822,6 +813,8 @@ function ImageEditorComposition({
   elements,
   width,
   height,
+  backgroundType = "image",
+  backgroundColor,
   backgroundFit = "cover",
   backgroundUrl,
   imageUrls = {},
@@ -874,8 +867,9 @@ function ImageEditorComposition({
     }
     return void 0;
   };
-  return /* @__PURE__ */ jsxs(AbsoluteFill, { style: { backgroundColor: "#000000" }, children: [
-    bgUrl && segmentsFromElements && /* @__PURE__ */ jsx3(
+  const containerBgColor = backgroundType === "color" && backgroundColor ? backgroundColor : "#000000";
+  return /* @__PURE__ */ jsxs(AbsoluteFill, { style: { backgroundColor: containerBgColor }, children: [
+    backgroundType === "image" && bgUrl && segmentsFromElements && /* @__PURE__ */ jsx3(
       Img2,
       {
         src: bgUrl,

package/package.json

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