ugcinc-render 1.8.138 → 1.8.140

package/dist/index.d.mts

@@ -865,6 +865,8 @@ interface InstagramDmCompositionProps {
     storyReplyTextGap?: number;
     storyReplyTextFontSize?: number;
     storyReplyTextLetterSpacing?: number;
+    dividerLineY?: number;
+    dividerLineColor?: string;
 }
 
 /**

package/dist/index.d.ts

@@ -865,6 +865,8 @@ interface InstagramDmCompositionProps {
     storyReplyTextGap?: number;
     storyReplyTextFontSize?: number;
     storyReplyTextLetterSpacing?: number;
+    dividerLineY?: number;
+    dividerLineColor?: string;
 }
 
 /**

package/dist/index.js

@@ -3504,9 +3504,9 @@ var HEADER_DEFAULTS = {
 var STORY_REPLY_DEFAULTS = {
   storyReplyImageWidth: 263,
   storyReplyImageHeight: 467,
-  storyReplyImageRight: 1170,
+  storyReplyImageRight: 1133,
   storyReplyImageGap: 24,
-  storyReplyImageBorderRadius: 0,
+  storyReplyImageBorderRadius: 44,
   storyReplyBarLeft: 1170,
   storyReplyBarRight: 1181,
   storyReplyTextLeft: 728,
@@ -4370,21 +4370,62 @@ function buildImageUrls(props) {
   }
   return imageUrls;
 }
+var DIVIDER_DEFAULTS = {
+  dividerLineY: 353,
+  dividerLineColor: "#25282d"
+};
+function generateDividerLineElements(props) {
+  const width = props.width ?? 1206;
+  const dividerLineY = props.dividerLineY ?? DIVIDER_DEFAULTS.dividerLineY;
+  const dividerLineColor = props.dividerLineColor ?? DIVIDER_DEFAULTS.dividerLineColor;
+  return [{
+    id: "divider-line",
+    type: "text",
+    x: 0,
+    y: dividerLineY,
+    width,
+    height: 1,
+    zIndex: 25,
+    text: "",
+    backgroundColor: dividerLineColor,
+    backgroundOpacity: 100
+  }];
+}
+function generateHeaderBackgroundElements(props) {
+  const width = props.width ?? 1206;
+  const dividerLineY = props.dividerLineY ?? DIVIDER_DEFAULTS.dividerLineY;
+  return [{
+    id: "header-background",
+    type: "text",
+    x: 0,
+    y: 0,
+    width,
+    height: dividerLineY,
+    zIndex: 25,
+    text: "",
+    backgroundColor: "#000000",
+    backgroundOpacity: 100
+  }];
+}
 function convertPropsToElements(props) {
   const calculatedMessages = calculateMessagePositions(props);
   const headerElements = generateHeaderElements(props);
+  const headerBackgroundElements = generateHeaderBackgroundElements(props);
   const footerElements = generateFooterElements(props);
   const footerIconElements = generateFooterIconElements(props);
   const messageElements = generateMessageElements(props, calculatedMessages);
   const profilePicElements = generateProfilePicElements(props, calculatedMessages);
   const storyReplyElements = generateStoryReplyElements(props, calculatedMessages);
+  const dividerLineElements = generateDividerLineElements(props);
   const elements = [
     ...headerElements,
+    ...headerBackgroundElements,
     ...footerElements,
     ...footerIconElements,
     ...messageElements,
     ...profilePicElements,
-    ...storyReplyElements
+    ...storyReplyElements,
+    ...dividerLineElements
   ].sort((a, b) => a.zIndex - b.zIndex);
   const imageUrls = buildImageUrls(props);
   return { elements, imageUrls };
@@ -4597,9 +4638,9 @@ var defaultInstagramDmProps = {
   // Story reply (sender) - image
   storyReplyImageWidth: 263,
   storyReplyImageHeight: 467,
-  storyReplyImageRight: 1170,
+  storyReplyImageRight: 1133,
   storyReplyImageGap: 24,
-  storyReplyImageBorderRadius: 0,
+  storyReplyImageBorderRadius: 44,
   // Story reply (sender) - side bar
   storyReplyBarLeft: 1170,
   storyReplyBarRight: 1181,
@@ -4607,7 +4648,10 @@ var defaultInstagramDmProps = {
   storyReplyTextLeft: 728,
   storyReplyTextGap: 22,
   storyReplyTextFontSize: 36,
-  storyReplyTextLetterSpacing: 2.25
+  storyReplyTextLetterSpacing: 2.25,
+  // Divider line
+  dividerLineY: 353,
+  dividerLineColor: "#25282d"
 };
 function InstagramDmComposition(props) {
   const {
@@ -6001,9 +6045,9 @@ var instagramDmSchema = import_zod.z.object({
   // Story reply (sender) - image
   storyReplyImageWidth: import_zod.z.number().optional().default(263).describe("Story reply image width"),
   storyReplyImageHeight: import_zod.z.number().optional().default(467).describe("Story reply image height"),
-  storyReplyImageRight: import_zod.z.number().optional().default(1170).describe("Story reply image right X"),
+  storyReplyImageRight: import_zod.z.number().optional().default(1133).describe("Story reply image right X"),
   storyReplyImageGap: import_zod.z.number().optional().default(24).describe("Gap between story image and message"),
-  storyReplyImageBorderRadius: import_zod.z.number().optional().default(0).describe("Story reply image corner radius"),
+  storyReplyImageBorderRadius: import_zod.z.number().optional().default(44).describe("Story reply image corner radius"),
   // Story reply (sender) - side bar
   storyReplyBarLeft: import_zod.z.number().optional().default(1170).describe("Story reply bar left X"),
   storyReplyBarRight: import_zod.z.number().optional().default(1181).describe("Story reply bar right X"),
@@ -6011,7 +6055,10 @@ var instagramDmSchema = import_zod.z.object({
   storyReplyTextLeft: import_zod.z.number().optional().default(728).describe("Story reply text left X"),
   storyReplyTextGap: import_zod.z.number().optional().default(22).describe("Gap between text and story image"),
   storyReplyTextFontSize: import_zod.z.number().optional().default(36).describe("Story reply text font size"),
-  storyReplyTextLetterSpacing: import_zod.z.number().optional().default(2.25).describe("Story reply text letter spacing")
+  storyReplyTextLetterSpacing: import_zod.z.number().optional().default(2.25).describe("Story reply text letter spacing"),
+  // Divider line
+  dividerLineY: import_zod.z.number().optional().default(353).describe("Divider line Y position"),
+  dividerLineColor: import_zod.z.string().optional().default("#25282d").describe("Divider line color")
 });
 var ImageComp = ImageEditorComposition;
 var VideoComp = VideoEditorComposition;

package/dist/index.mjs

@@ -2573,9 +2573,9 @@ var HEADER_DEFAULTS = {
 var STORY_REPLY_DEFAULTS = {
   storyReplyImageWidth: 263,
   storyReplyImageHeight: 467,
-  storyReplyImageRight: 1170,
+  storyReplyImageRight: 1133,
   storyReplyImageGap: 24,
-  storyReplyImageBorderRadius: 0,
+  storyReplyImageBorderRadius: 44,
   storyReplyBarLeft: 1170,
   storyReplyBarRight: 1181,
   storyReplyTextLeft: 728,
@@ -3439,21 +3439,62 @@ function buildImageUrls(props) {
   }
   return imageUrls;
 }
+var DIVIDER_DEFAULTS = {
+  dividerLineY: 353,
+  dividerLineColor: "#25282d"
+};
+function generateDividerLineElements(props) {
+  const width = props.width ?? 1206;
+  const dividerLineY = props.dividerLineY ?? DIVIDER_DEFAULTS.dividerLineY;
+  const dividerLineColor = props.dividerLineColor ?? DIVIDER_DEFAULTS.dividerLineColor;
+  return [{
+    id: "divider-line",
+    type: "text",
+    x: 0,
+    y: dividerLineY,
+    width,
+    height: 1,
+    zIndex: 25,
+    text: "",
+    backgroundColor: dividerLineColor,
+    backgroundOpacity: 100
+  }];
+}
+function generateHeaderBackgroundElements(props) {
+  const width = props.width ?? 1206;
+  const dividerLineY = props.dividerLineY ?? DIVIDER_DEFAULTS.dividerLineY;
+  return [{
+    id: "header-background",
+    type: "text",
+    x: 0,
+    y: 0,
+    width,
+    height: dividerLineY,
+    zIndex: 25,
+    text: "",
+    backgroundColor: "#000000",
+    backgroundOpacity: 100
+  }];
+}
 function convertPropsToElements(props) {
   const calculatedMessages = calculateMessagePositions(props);
   const headerElements = generateHeaderElements(props);
+  const headerBackgroundElements = generateHeaderBackgroundElements(props);
   const footerElements = generateFooterElements(props);
   const footerIconElements = generateFooterIconElements(props);
   const messageElements = generateMessageElements(props, calculatedMessages);
   const profilePicElements = generateProfilePicElements(props, calculatedMessages);
   const storyReplyElements = generateStoryReplyElements(props, calculatedMessages);
+  const dividerLineElements = generateDividerLineElements(props);
   const elements = [
     ...headerElements,
+    ...headerBackgroundElements,
     ...footerElements,
     ...footerIconElements,
     ...messageElements,
     ...profilePicElements,
-    ...storyReplyElements
+    ...storyReplyElements,
+    ...dividerLineElements
   ].sort((a, b) => a.zIndex - b.zIndex);
   const imageUrls = buildImageUrls(props);
   return { elements, imageUrls };
@@ -3666,9 +3707,9 @@ var defaultInstagramDmProps = {
   // Story reply (sender) - image
   storyReplyImageWidth: 263,
   storyReplyImageHeight: 467,
-  storyReplyImageRight: 1170,
+  storyReplyImageRight: 1133,
   storyReplyImageGap: 24,
-  storyReplyImageBorderRadius: 0,
+  storyReplyImageBorderRadius: 44,
   // Story reply (sender) - side bar
   storyReplyBarLeft: 1170,
   storyReplyBarRight: 1181,
@@ -3676,7 +3717,10 @@ var defaultInstagramDmProps = {
   storyReplyTextLeft: 728,
   storyReplyTextGap: 22,
   storyReplyTextFontSize: 36,
-  storyReplyTextLetterSpacing: 2.25
+  storyReplyTextLetterSpacing: 2.25,
+  // Divider line
+  dividerLineY: 353,
+  dividerLineColor: "#25282d"
 };
 function InstagramDmComposition(props) {
   const {
@@ -4787,9 +4831,9 @@ var instagramDmSchema = z.object({
   // Story reply (sender) - image
   storyReplyImageWidth: z.number().optional().default(263).describe("Story reply image width"),
   storyReplyImageHeight: z.number().optional().default(467).describe("Story reply image height"),
-  storyReplyImageRight: z.number().optional().default(1170).describe("Story reply image right X"),
+  storyReplyImageRight: z.number().optional().default(1133).describe("Story reply image right X"),
   storyReplyImageGap: z.number().optional().default(24).describe("Gap between story image and message"),
-  storyReplyImageBorderRadius: z.number().optional().default(0).describe("Story reply image corner radius"),
+  storyReplyImageBorderRadius: z.number().optional().default(44).describe("Story reply image corner radius"),
   // Story reply (sender) - side bar
   storyReplyBarLeft: z.number().optional().default(1170).describe("Story reply bar left X"),
   storyReplyBarRight: z.number().optional().default(1181).describe("Story reply bar right X"),
@@ -4797,7 +4841,10 @@ var instagramDmSchema = z.object({
   storyReplyTextLeft: z.number().optional().default(728).describe("Story reply text left X"),
   storyReplyTextGap: z.number().optional().default(22).describe("Gap between text and story image"),
   storyReplyTextFontSize: z.number().optional().default(36).describe("Story reply text font size"),
-  storyReplyTextLetterSpacing: z.number().optional().default(2.25).describe("Story reply text letter spacing")
+  storyReplyTextLetterSpacing: z.number().optional().default(2.25).describe("Story reply text letter spacing"),
+  // Divider line
+  dividerLineY: z.number().optional().default(353).describe("Divider line Y position"),
+  dividerLineColor: z.string().optional().default("#25282d").describe("Divider line color")
 });
 var ImageComp = ImageEditorComposition;
 var VideoComp = VideoEditorComposition;

package/package.json

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