ugcinc-render 1.8.170 → 1.8.172

package/dist/index.d.mts

@@ -1108,6 +1108,15 @@ interface IMessageDmCompositionProps {
     senderImageHeight?: number;
     senderImageGapToText?: number;
     senderImageBorderRadius?: number;
+    messageHeaderImessageText?: string;
+    messageHeaderTimestampText?: string;
+    messageHeaderTimestampGap?: number;
+    messageHeaderImessageGap?: number;
+    messageHeaderTextColor?: string;
+    messageHeaderFontSize?: number;
+    messageHeaderLetterSpacing?: number;
+    messageHeaderLeft?: number;
+    messageHeaderRight?: number;
     messages?: ImMessage[];
 }
 

package/dist/index.d.ts

@@ -1108,6 +1108,15 @@ interface IMessageDmCompositionProps {
     senderImageHeight?: number;
     senderImageGapToText?: number;
     senderImageBorderRadius?: number;
+    messageHeaderImessageText?: string;
+    messageHeaderTimestampText?: string;
+    messageHeaderTimestampGap?: number;
+    messageHeaderImessageGap?: number;
+    messageHeaderTextColor?: string;
+    messageHeaderFontSize?: number;
+    messageHeaderLetterSpacing?: number;
+    messageHeaderLeft?: number;
+    messageHeaderRight?: number;
     messages?: ImMessage[];
 }
 

package/dist/index.js

@@ -5293,7 +5293,17 @@ var MESSAGE_DEFAULTS2 = {
   senderImageLeft: 336,
   senderImageHeight: 1120,
   senderImageGapToText: 3,
-  senderImageBorderRadius: 30
+  senderImageBorderRadius: 51,
+  // Message area header text (above first message)
+  messageHeaderImessageText: "iMessage",
+  messageHeaderTimestampText: "Today 12:16 PM",
+  messageHeaderTimestampGap: 36,
+  messageHeaderImessageGap: 39,
+  messageHeaderTextColor: "#626167",
+  messageHeaderFontSize: 36,
+  messageHeaderLetterSpacing: 0.5,
+  messageHeaderLeft: 0,
+  messageHeaderRight: 1206
 };
 var FONT_FAMILY2 = getFontFamily("apple");
 function calculateAutoWidthAndLines3({
@@ -5592,6 +5602,66 @@ function generateMessageElements2(props, calculatedMessages) {
   }
   return elements;
 }
+function generateHeaderTextElements(props, calculatedMessages) {
+  if (calculatedMessages.length === 0) {
+    return [];
+  }
+  const elements = [];
+  const messageHeaderImessageText = props.messageHeaderImessageText ?? MESSAGE_DEFAULTS2.messageHeaderImessageText;
+  const messageHeaderTimestampText = props.messageHeaderTimestampText ?? MESSAGE_DEFAULTS2.messageHeaderTimestampText;
+  const messageHeaderTimestampGap = props.messageHeaderTimestampGap ?? MESSAGE_DEFAULTS2.messageHeaderTimestampGap;
+  const messageHeaderImessageGap = props.messageHeaderImessageGap ?? MESSAGE_DEFAULTS2.messageHeaderImessageGap;
+  const messageHeaderTextColor = props.messageHeaderTextColor ?? MESSAGE_DEFAULTS2.messageHeaderTextColor;
+  const messageHeaderFontSize = props.messageHeaderFontSize ?? MESSAGE_DEFAULTS2.messageHeaderFontSize;
+  const messageHeaderLetterSpacing = props.messageHeaderLetterSpacing ?? MESSAGE_DEFAULTS2.messageHeaderLetterSpacing;
+  const messageHeaderLeft = props.messageHeaderLeft ?? MESSAGE_DEFAULTS2.messageHeaderLeft;
+  const messageHeaderRight = props.messageHeaderRight ?? MESSAGE_DEFAULTS2.messageHeaderRight;
+  const messageHeaderWidth = messageHeaderRight - messageHeaderLeft;
+  const firstMessage = calculatedMessages[0];
+  let firstMessageTop = firstMessage.top;
+  if (firstMessage.imageY !== void 0) {
+    firstMessageTop = firstMessage.imageY;
+  }
+  const timestampBottom = firstMessageTop - messageHeaderTimestampGap;
+  const timestampTop = timestampBottom - messageHeaderFontSize;
+  elements.push({
+    id: "message-header-timestamp",
+    type: "text",
+    x: messageHeaderLeft,
+    y: timestampTop,
+    width: messageHeaderWidth,
+    height: messageHeaderFontSize,
+    zIndex: 4,
+    text: messageHeaderTimestampText,
+    font: "apple",
+    fontWeight: 400,
+    fontSize: messageHeaderFontSize,
+    letterSpacing: messageHeaderLetterSpacing,
+    color: messageHeaderTextColor,
+    textAlign: "center",
+    verticalAlign: "middle"
+  });
+  const imessageBottom = timestampTop - messageHeaderImessageGap;
+  const imessageTop = imessageBottom - messageHeaderFontSize;
+  elements.push({
+    id: "message-header-imessage",
+    type: "text",
+    x: messageHeaderLeft,
+    y: imessageTop,
+    width: messageHeaderWidth,
+    height: messageHeaderFontSize,
+    zIndex: 4,
+    text: messageHeaderImessageText,
+    font: "apple",
+    fontWeight: 400,
+    fontSize: messageHeaderFontSize,
+    letterSpacing: messageHeaderLetterSpacing,
+    color: messageHeaderTextColor,
+    textAlign: "center",
+    verticalAlign: "middle"
+  });
+  return elements;
+}
 function buildImageUrls2(props) {
   const imageUrls = {};
   const messages = props.messages ?? [];
@@ -5607,10 +5677,12 @@ function convertPropsToElements2(props) {
   const height = props.height ?? 2622;
   const calculatedMessages = calculateMessagePositions2(props);
   const messageElements = generateMessageElements2(props, calculatedMessages);
-  messageElements.sort((a, b) => (a.zIndex ?? 0) - (b.zIndex ?? 0));
+  const headerTextElements = generateHeaderTextElements(props, calculatedMessages);
+  const allElements = [...messageElements, ...headerTextElements];
+  allElements.sort((a, b) => (a.zIndex ?? 0) - (b.zIndex ?? 0));
   const imageUrls = buildImageUrls2(props);
   return {
-    elements: messageElements,
+    elements: allElements,
     imageUrls,
     width,
     height
@@ -5641,7 +5713,7 @@ var defaultIMessageDmProps = {
   username: "aidan gollan",
   usernameTop: 355,
   usernameBottom: 404,
-  usernameLeft: 429,
+  usernameLeft: 452,
   usernameRight: 752,
   usernameFontSize: 36,
   usernameLetterSpacing: 0.8,
@@ -5754,7 +5826,17 @@ var defaultIMessageDmProps = {
   senderImageLeft: 336,
   senderImageHeight: 1120,
   senderImageGapToText: 3,
-  senderImageBorderRadius: 30,
+  senderImageBorderRadius: 51,
+  // Message area header text (above first message)
+  messageHeaderImessageText: "iMessage",
+  messageHeaderTimestampText: "Today 12:16 PM",
+  messageHeaderTimestampGap: 36,
+  messageHeaderImessageGap: 39,
+  messageHeaderTextColor: "#626167",
+  messageHeaderFontSize: 36,
+  messageHeaderLetterSpacing: 0.5,
+  messageHeaderLeft: 0,
+  messageHeaderRight: 1206,
   // Example messages
   messages: [
     { id: "msg-1", sender: "user", text: "heyyy fae, help me slide on this baddie pls \u{1F64F}", imageUrl: "https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/06c3ed1c-eefb-4a60-b0c4-5fb872811ba0/pinterest-1766175214139-0-JpXmGIxVWdjEJ3qxGyoC4DAi2KAZrg.jpg" },
@@ -6986,6 +7068,16 @@ var iMessageDmPropsSchema = import_zod.z.object({
   senderImageHeight: import_zod.z.number().optional(),
   senderImageGapToText: import_zod.z.number().optional(),
   senderImageBorderRadius: import_zod.z.number().optional(),
+  // Message area header text
+  messageHeaderImessageText: import_zod.z.string().optional(),
+  messageHeaderTimestampText: import_zod.z.string().optional(),
+  messageHeaderTimestampGap: import_zod.z.number().optional(),
+  messageHeaderImessageGap: import_zod.z.number().optional(),
+  messageHeaderTextColor: import_zod.z.string().optional(),
+  messageHeaderFontSize: import_zod.z.number().optional(),
+  messageHeaderLetterSpacing: import_zod.z.number().optional(),
+  messageHeaderLeft: import_zod.z.number().optional(),
+  messageHeaderRight: import_zod.z.number().optional(),
   // Messages
   messages: import_zod.z.array(import_zod.z.object({
     id: import_zod.z.string(),

package/dist/index.mjs

@@ -4339,7 +4339,17 @@ var MESSAGE_DEFAULTS2 = {
   senderImageLeft: 336,
   senderImageHeight: 1120,
   senderImageGapToText: 3,
-  senderImageBorderRadius: 30
+  senderImageBorderRadius: 51,
+  // Message area header text (above first message)
+  messageHeaderImessageText: "iMessage",
+  messageHeaderTimestampText: "Today 12:16 PM",
+  messageHeaderTimestampGap: 36,
+  messageHeaderImessageGap: 39,
+  messageHeaderTextColor: "#626167",
+  messageHeaderFontSize: 36,
+  messageHeaderLetterSpacing: 0.5,
+  messageHeaderLeft: 0,
+  messageHeaderRight: 1206
 };
 var FONT_FAMILY2 = getFontFamily("apple");
 function calculateAutoWidthAndLines3({
@@ -4638,6 +4648,66 @@ function generateMessageElements2(props, calculatedMessages) {
   }
   return elements;
 }
+function generateHeaderTextElements(props, calculatedMessages) {
+  if (calculatedMessages.length === 0) {
+    return [];
+  }
+  const elements = [];
+  const messageHeaderImessageText = props.messageHeaderImessageText ?? MESSAGE_DEFAULTS2.messageHeaderImessageText;
+  const messageHeaderTimestampText = props.messageHeaderTimestampText ?? MESSAGE_DEFAULTS2.messageHeaderTimestampText;
+  const messageHeaderTimestampGap = props.messageHeaderTimestampGap ?? MESSAGE_DEFAULTS2.messageHeaderTimestampGap;
+  const messageHeaderImessageGap = props.messageHeaderImessageGap ?? MESSAGE_DEFAULTS2.messageHeaderImessageGap;
+  const messageHeaderTextColor = props.messageHeaderTextColor ?? MESSAGE_DEFAULTS2.messageHeaderTextColor;
+  const messageHeaderFontSize = props.messageHeaderFontSize ?? MESSAGE_DEFAULTS2.messageHeaderFontSize;
+  const messageHeaderLetterSpacing = props.messageHeaderLetterSpacing ?? MESSAGE_DEFAULTS2.messageHeaderLetterSpacing;
+  const messageHeaderLeft = props.messageHeaderLeft ?? MESSAGE_DEFAULTS2.messageHeaderLeft;
+  const messageHeaderRight = props.messageHeaderRight ?? MESSAGE_DEFAULTS2.messageHeaderRight;
+  const messageHeaderWidth = messageHeaderRight - messageHeaderLeft;
+  const firstMessage = calculatedMessages[0];
+  let firstMessageTop = firstMessage.top;
+  if (firstMessage.imageY !== void 0) {
+    firstMessageTop = firstMessage.imageY;
+  }
+  const timestampBottom = firstMessageTop - messageHeaderTimestampGap;
+  const timestampTop = timestampBottom - messageHeaderFontSize;
+  elements.push({
+    id: "message-header-timestamp",
+    type: "text",
+    x: messageHeaderLeft,
+    y: timestampTop,
+    width: messageHeaderWidth,
+    height: messageHeaderFontSize,
+    zIndex: 4,
+    text: messageHeaderTimestampText,
+    font: "apple",
+    fontWeight: 400,
+    fontSize: messageHeaderFontSize,
+    letterSpacing: messageHeaderLetterSpacing,
+    color: messageHeaderTextColor,
+    textAlign: "center",
+    verticalAlign: "middle"
+  });
+  const imessageBottom = timestampTop - messageHeaderImessageGap;
+  const imessageTop = imessageBottom - messageHeaderFontSize;
+  elements.push({
+    id: "message-header-imessage",
+    type: "text",
+    x: messageHeaderLeft,
+    y: imessageTop,
+    width: messageHeaderWidth,
+    height: messageHeaderFontSize,
+    zIndex: 4,
+    text: messageHeaderImessageText,
+    font: "apple",
+    fontWeight: 400,
+    fontSize: messageHeaderFontSize,
+    letterSpacing: messageHeaderLetterSpacing,
+    color: messageHeaderTextColor,
+    textAlign: "center",
+    verticalAlign: "middle"
+  });
+  return elements;
+}
 function buildImageUrls2(props) {
   const imageUrls = {};
   const messages = props.messages ?? [];
@@ -4653,10 +4723,12 @@ function convertPropsToElements2(props) {
   const height = props.height ?? 2622;
   const calculatedMessages = calculateMessagePositions2(props);
   const messageElements = generateMessageElements2(props, calculatedMessages);
-  messageElements.sort((a, b) => (a.zIndex ?? 0) - (b.zIndex ?? 0));
+  const headerTextElements = generateHeaderTextElements(props, calculatedMessages);
+  const allElements = [...messageElements, ...headerTextElements];
+  allElements.sort((a, b) => (a.zIndex ?? 0) - (b.zIndex ?? 0));
   const imageUrls = buildImageUrls2(props);
   return {
-    elements: messageElements,
+    elements: allElements,
     imageUrls,
     width,
     height
@@ -4687,7 +4759,7 @@ var defaultIMessageDmProps = {
   username: "aidan gollan",
   usernameTop: 355,
   usernameBottom: 404,
-  usernameLeft: 429,
+  usernameLeft: 452,
   usernameRight: 752,
   usernameFontSize: 36,
   usernameLetterSpacing: 0.8,
@@ -4800,7 +4872,17 @@ var defaultIMessageDmProps = {
   senderImageLeft: 336,
   senderImageHeight: 1120,
   senderImageGapToText: 3,
-  senderImageBorderRadius: 30,
+  senderImageBorderRadius: 51,
+  // Message area header text (above first message)
+  messageHeaderImessageText: "iMessage",
+  messageHeaderTimestampText: "Today 12:16 PM",
+  messageHeaderTimestampGap: 36,
+  messageHeaderImessageGap: 39,
+  messageHeaderTextColor: "#626167",
+  messageHeaderFontSize: 36,
+  messageHeaderLetterSpacing: 0.5,
+  messageHeaderLeft: 0,
+  messageHeaderRight: 1206,
   // Example messages
   messages: [
     { id: "msg-1", sender: "user", text: "heyyy fae, help me slide on this baddie pls \u{1F64F}", imageUrl: "https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/06c3ed1c-eefb-4a60-b0c4-5fb872811ba0/pinterest-1766175214139-0-JpXmGIxVWdjEJ3qxGyoC4DAi2KAZrg.jpg" },
@@ -5749,6 +5831,16 @@ var iMessageDmPropsSchema = z.object({
   senderImageHeight: z.number().optional(),
   senderImageGapToText: z.number().optional(),
   senderImageBorderRadius: z.number().optional(),
+  // Message area header text
+  messageHeaderImessageText: z.string().optional(),
+  messageHeaderTimestampText: z.string().optional(),
+  messageHeaderTimestampGap: z.number().optional(),
+  messageHeaderImessageGap: z.number().optional(),
+  messageHeaderTextColor: z.string().optional(),
+  messageHeaderFontSize: z.number().optional(),
+  messageHeaderLetterSpacing: z.number().optional(),
+  messageHeaderLeft: z.number().optional(),
+  messageHeaderRight: z.number().optional(),
   // Messages
   messages: z.array(z.object({
     id: z.string(),

package/package.json

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