ugcinc-render 1.8.185 → 1.8.187

package/dist/index.d.mts

@@ -997,6 +997,7 @@ interface IMessageDmCompositionProps {
     referenceImageUrl?: string;
     showReferenceImage?: boolean;
     referenceOpacity?: number;
+    lightMode?: boolean;
     headerTop?: number;
     headerBottom?: number;
     headerBackgroundColor?: string;

package/dist/index.d.ts

@@ -997,6 +997,7 @@ interface IMessageDmCompositionProps {
     referenceImageUrl?: string;
     showReferenceImage?: boolean;
     referenceOpacity?: number;
+    lightMode?: boolean;
     headerTop?: number;
     headerBottom?: number;
     headerBackgroundColor?: string;

package/dist/index.js

@@ -5773,6 +5773,7 @@ var defaultIMessageDmProps = {
   referenceImageUrl: "https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/06c3ed1c-eefb-4a60-b0c4-5fb872811ba0/IMG_3189-hUoucNOmBoT8fihIL7ybuEXwoRrngz.png",
   showReferenceImage: true,
   referenceOpacity: 50,
+  lightMode: false,
   width: 1206,
   height: 2622,
   durationInFrames: 90,
@@ -5940,34 +5941,34 @@ var defaultIMessageDmProps = {
   // Recipient tail anchor points (offsets from message left & bottom)
   recipientTailSideY: -53,
   // Y where tail meets bubble (top of straight line)
-  recipientTailCurveStartY: -33,
+  recipientTailCurveStartY: -28,
   // Y where straight line ends and top curve begins
-  recipientTailTipX: -17,
+  recipientTailTipX: -16,
   recipientTailTipY: -1,
   recipientTailBottomX: 19,
   // X where bottom curve ends (connects to bubble)
   recipientTailBottomY: -12,
   // Y where bottom curve ends (connects to bubble)
   // Recipient tail curve bend (-1 to 1, negative = inward, positive = outward)
-  recipientTailTopBend: -0.3,
+  recipientTailTopBend: -0.32,
   // Top curve bends inward
-  recipientTailBottomBend: 0.5,
+  recipientTailBottomBend: 0.3,
   // Bottom curve bends outward
   // Sender tail anchor points (offsets from message right & bottom)
   senderTailSideY: -53,
   // Y where tail meets bubble (top of straight line)
-  senderTailCurveStartY: -33,
+  senderTailCurveStartY: -28,
   // Y where straight line ends and top curve begins
-  senderTailTipX: 17,
+  senderTailTipX: 16,
   senderTailTipY: -1,
   senderTailBottomX: -19,
   // X where bottom curve ends (connects to bubble)
   senderTailBottomY: -12,
   // Y where bottom curve ends (connects to bubble)
   // Sender tail curve bend (-1 to 1, negative = inward, positive = outward)
-  senderTailTopBend: -0.3,
+  senderTailTopBend: -0.32,
   // Top curve bends inward
-  senderTailBottomBend: 0.5,
+  senderTailBottomBend: 0.3,
   // Bottom curve bends outward
   // Read receipt (under last sender message)
   showReadReceipt: true,
@@ -6024,7 +6025,11 @@ var IMessageDmComposition = (props) => {
     if (!fontsLoaded) {
       return { elements: [], imageUrls: {}, tails: [], width: mergedProps.width ?? 1206, height: mergedProps.height ?? 2622 };
     }
-    return convertPropsToElements2(mergedProps);
+    const propsWithEffectiveColors = {
+      ...mergedProps,
+      recipientBubbleColor: mergedProps.lightMode ? "#dfdfe1" : mergedProps.recipientBubbleColor ?? "#303032"
+    };
+    return convertPropsToElements2(propsWithEffectiveColors);
   }, [mergedProps, fontsLoaded]);
   const {
     width = 1206,
@@ -6032,6 +6037,7 @@ var IMessageDmComposition = (props) => {
     backgroundColor = "#000000",
     headerBackgroundColor = "#171717",
     headerBottom = 424,
+    lightMode = false,
     // Profile section
     profilePicUrl,
     profilePicTop = 195,
@@ -6132,41 +6138,38 @@ var IMessageDmComposition = (props) => {
     footerBorderRadius = 55,
     footerBorderColor = "#3a3a3c",
     footerBorderWidth = 2,
-    // Message text
-    messageTextTop = 2412,
-    messageTextBottom = 2468,
-    messageTextLeft = 220,
-    messageTextFontSize = 48,
-    messageTextColor = "#8e8e93",
-    messageText = "iMessage",
     // Bubble colors
     senderBubbleColor = "#1a42d5",
     recipientBubbleColor = "#303032",
     // Tail props - recipient (offsets from message left & bottom)
     recipientTailSideY = -53,
-    recipientTailCurveStartY = -33,
-    recipientTailTipX = -17,
+    recipientTailCurveStartY = -28,
+    recipientTailTipX = -16,
     recipientTailTipY = -1,
     recipientTailBottomX = 19,
     recipientTailBottomY = -12,
-    recipientTailTopBend = -0.3,
-    recipientTailBottomBend = 0.5,
+    recipientTailTopBend = -0.32,
+    recipientTailBottomBend = 0.3,
     // Tail props - sender (offsets from message right & bottom)
     senderTailSideY = -53,
-    senderTailCurveStartY = -33,
-    senderTailTipX = 17,
+    senderTailCurveStartY = -28,
+    senderTailTipX = 16,
     senderTailTipY = -1,
     senderTailBottomX = -19,
     senderTailBottomY = -12,
-    senderTailTopBend = -0.3,
-    senderTailBottomBend = 0.5
+    senderTailTopBend = -0.32,
+    senderTailBottomBend = 0.3
   } = mergedProps;
+  const effectiveBackgroundColor = lightMode ? "#ffffff" : backgroundColor;
+  const effectiveHeaderBgColor = lightMode ? "#f7f7f7" : headerBackgroundColor;
+  const effectiveRecipientBubbleColor = lightMode ? "#dfdfe1" : recipientBubbleColor;
+  const effectiveHomeIndicatorColor = lightMode ? "#000000" : homeIndicatorColor;
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     BaseDmComposition,
     {
       width,
       height,
-      backgroundColor,
+      backgroundColor: effectiveBackgroundColor,
       showDebugOverlay,
       referenceImageUrl,
       showReferenceImage,
@@ -6210,7 +6213,7 @@ var IMessageDmComposition = (props) => {
       homeIndicatorBottom,
       homeIndicatorLeft,
       homeIndicatorRight,
-      homeIndicatorColor,
+      homeIndicatorColor: effectiveHomeIndicatorColor,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "div",
@@ -6221,7 +6224,7 @@ var IMessageDmComposition = (props) => {
               left: 0,
               width,
               height: headerBottom,
-              backgroundColor: headerBackgroundColor,
+              backgroundColor: effectiveHeaderBgColor,
               zIndex: 25
             }
           }
@@ -6364,7 +6367,7 @@ var IMessageDmComposition = (props) => {
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           import_remotion10.Img,
           {
-            src: (0, import_remotion10.staticFile)("imsg-footer-plus.png"),
+            src: (0, import_remotion10.staticFile)(lightMode ? "imsg-light-footer-plus.png" : "imsg-footer-plus.png"),
             style: {
               position: "absolute",
               top: plusButtonTop,
@@ -6375,39 +6378,33 @@ var IMessageDmComposition = (props) => {
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          "div",
+        lightMode ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          import_remotion10.Img,
           {
+            src: (0, import_remotion10.staticFile)("imsg-light-main-footer.png"),
             style: {
               position: "absolute",
               top: footerTop,
               left: footerLeft,
               width: footerRight - footerLeft,
               height: footerBottom - footerTop,
-              backgroundColor: footerBgColor,
-              borderRadius: footerBorderRadius,
-              border: `${footerBorderWidth}px solid ${footerBorderColor}`,
               zIndex: 20
             }
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "div",
           {
             style: {
               position: "absolute",
-              top: messageTextTop,
-              left: messageTextLeft,
-              height: messageTextBottom - messageTextTop,
-              display: "flex",
-              alignItems: "center",
-              fontFamily: "SF Pro Display",
-              fontWeight: 400,
-              fontSize: messageTextFontSize,
-              color: messageTextColor,
-              zIndex: 21
-            },
-            children: messageText
+              top: footerTop,
+              left: footerLeft,
+              width: footerRight - footerLeft,
+              height: footerBottom - footerTop,
+              backgroundColor: footerBgColor,
+              borderRadius: footerBorderRadius,
+              border: `${footerBorderWidth}px solid ${footerBorderColor}`,
+              zIndex: 20
+            }
           }
         ),
         conversionResult.tails.map((tail) => {
@@ -6441,7 +6438,7 @@ var IMessageDmComposition = (props) => {
           const bottomPerpY = tail.isUser ? -bottomDx / bottomLen : bottomDx / bottomLen;
           const bottomCurveX = bottomMidX + bottomPerpX * bottomBend * bottomLen;
           const bottomCurveY = bottomMidY + bottomPerpY * bottomBend * bottomLen;
-          const fillColor = tail.isUser ? senderBubbleColor : recipientBubbleColor;
+          const fillColor = tail.isUser ? senderBubbleColor : effectiveRecipientBubbleColor;
           const pathD = `M ${sideX} ${sideY} L ${curveStartX} ${curveStartY} Q ${topCurveX} ${topCurveY} ${tipX} ${tipY} Q ${bottomCurveX} ${bottomCurveY} ${bottomX} ${bottomY} Z`;
           return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "svg",
@@ -7234,6 +7231,8 @@ var iMessageDmPropsSchema = import_zod.z.object({
   referenceImageUrl: import_zod.z.string().optional(),
   showReferenceImage: import_zod.z.boolean().optional(),
   referenceOpacity: import_zod.z.number().optional(),
+  // Light mode
+  lightMode: import_zod.z.boolean().optional(),
   // iMessage header
   headerTop: import_zod.z.number().optional(),
   headerBottom: import_zod.z.number().optional(),

package/dist/index.mjs

@@ -4819,6 +4819,7 @@ var defaultIMessageDmProps = {
   referenceImageUrl: "https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/06c3ed1c-eefb-4a60-b0c4-5fb872811ba0/IMG_3189-hUoucNOmBoT8fihIL7ybuEXwoRrngz.png",
   showReferenceImage: true,
   referenceOpacity: 50,
+  lightMode: false,
   width: 1206,
   height: 2622,
   durationInFrames: 90,
@@ -4986,34 +4987,34 @@ var defaultIMessageDmProps = {
   // Recipient tail anchor points (offsets from message left & bottom)
   recipientTailSideY: -53,
   // Y where tail meets bubble (top of straight line)
-  recipientTailCurveStartY: -33,
+  recipientTailCurveStartY: -28,
   // Y where straight line ends and top curve begins
-  recipientTailTipX: -17,
+  recipientTailTipX: -16,
   recipientTailTipY: -1,
   recipientTailBottomX: 19,
   // X where bottom curve ends (connects to bubble)
   recipientTailBottomY: -12,
   // Y where bottom curve ends (connects to bubble)
   // Recipient tail curve bend (-1 to 1, negative = inward, positive = outward)
-  recipientTailTopBend: -0.3,
+  recipientTailTopBend: -0.32,
   // Top curve bends inward
-  recipientTailBottomBend: 0.5,
+  recipientTailBottomBend: 0.3,
   // Bottom curve bends outward
   // Sender tail anchor points (offsets from message right & bottom)
   senderTailSideY: -53,
   // Y where tail meets bubble (top of straight line)
-  senderTailCurveStartY: -33,
+  senderTailCurveStartY: -28,
   // Y where straight line ends and top curve begins
-  senderTailTipX: 17,
+  senderTailTipX: 16,
   senderTailTipY: -1,
   senderTailBottomX: -19,
   // X where bottom curve ends (connects to bubble)
   senderTailBottomY: -12,
   // Y where bottom curve ends (connects to bubble)
   // Sender tail curve bend (-1 to 1, negative = inward, positive = outward)
-  senderTailTopBend: -0.3,
+  senderTailTopBend: -0.32,
   // Top curve bends inward
-  senderTailBottomBend: 0.5,
+  senderTailBottomBend: 0.3,
   // Bottom curve bends outward
   // Read receipt (under last sender message)
   showReadReceipt: true,
@@ -5070,7 +5071,11 @@ var IMessageDmComposition = (props) => {
     if (!fontsLoaded) {
       return { elements: [], imageUrls: {}, tails: [], width: mergedProps.width ?? 1206, height: mergedProps.height ?? 2622 };
     }
-    return convertPropsToElements2(mergedProps);
+    const propsWithEffectiveColors = {
+      ...mergedProps,
+      recipientBubbleColor: mergedProps.lightMode ? "#dfdfe1" : mergedProps.recipientBubbleColor ?? "#303032"
+    };
+    return convertPropsToElements2(propsWithEffectiveColors);
   }, [mergedProps, fontsLoaded]);
   const {
     width = 1206,
@@ -5078,6 +5083,7 @@ var IMessageDmComposition = (props) => {
     backgroundColor = "#000000",
     headerBackgroundColor = "#171717",
     headerBottom = 424,
+    lightMode = false,
     // Profile section
     profilePicUrl,
     profilePicTop = 195,
@@ -5178,41 +5184,38 @@ var IMessageDmComposition = (props) => {
     footerBorderRadius = 55,
     footerBorderColor = "#3a3a3c",
     footerBorderWidth = 2,
-    // Message text
-    messageTextTop = 2412,
-    messageTextBottom = 2468,
-    messageTextLeft = 220,
-    messageTextFontSize = 48,
-    messageTextColor = "#8e8e93",
-    messageText = "iMessage",
     // Bubble colors
     senderBubbleColor = "#1a42d5",
     recipientBubbleColor = "#303032",
     // Tail props - recipient (offsets from message left & bottom)
     recipientTailSideY = -53,
-    recipientTailCurveStartY = -33,
-    recipientTailTipX = -17,
+    recipientTailCurveStartY = -28,
+    recipientTailTipX = -16,
     recipientTailTipY = -1,
     recipientTailBottomX = 19,
     recipientTailBottomY = -12,
-    recipientTailTopBend = -0.3,
-    recipientTailBottomBend = 0.5,
+    recipientTailTopBend = -0.32,
+    recipientTailBottomBend = 0.3,
     // Tail props - sender (offsets from message right & bottom)
     senderTailSideY = -53,
-    senderTailCurveStartY = -33,
-    senderTailTipX = 17,
+    senderTailCurveStartY = -28,
+    senderTailTipX = 16,
     senderTailTipY = -1,
     senderTailBottomX = -19,
     senderTailBottomY = -12,
-    senderTailTopBend = -0.3,
-    senderTailBottomBend = 0.5
+    senderTailTopBend = -0.32,
+    senderTailBottomBend = 0.3
   } = mergedProps;
+  const effectiveBackgroundColor = lightMode ? "#ffffff" : backgroundColor;
+  const effectiveHeaderBgColor = lightMode ? "#f7f7f7" : headerBackgroundColor;
+  const effectiveRecipientBubbleColor = lightMode ? "#dfdfe1" : recipientBubbleColor;
+  const effectiveHomeIndicatorColor = lightMode ? "#000000" : homeIndicatorColor;
   return /* @__PURE__ */ jsxs10(
     BaseDmComposition,
     {
       width,
       height,
-      backgroundColor,
+      backgroundColor: effectiveBackgroundColor,
       showDebugOverlay,
       referenceImageUrl,
       showReferenceImage,
@@ -5256,7 +5259,7 @@ var IMessageDmComposition = (props) => {
       homeIndicatorBottom,
       homeIndicatorLeft,
       homeIndicatorRight,
-      homeIndicatorColor,
+      homeIndicatorColor: effectiveHomeIndicatorColor,
       children: [
         /* @__PURE__ */ jsx12(
           "div",
@@ -5267,7 +5270,7 @@ var IMessageDmComposition = (props) => {
               left: 0,
               width,
               height: headerBottom,
-              backgroundColor: headerBackgroundColor,
+              backgroundColor: effectiveHeaderBgColor,
               zIndex: 25
             }
           }
@@ -5410,7 +5413,7 @@ var IMessageDmComposition = (props) => {
         /* @__PURE__ */ jsx12(
           Img5,
           {
-            src: staticFile3("imsg-footer-plus.png"),
+            src: staticFile3(lightMode ? "imsg-light-footer-plus.png" : "imsg-footer-plus.png"),
             style: {
               position: "absolute",
               top: plusButtonTop,
@@ -5421,39 +5424,33 @@ var IMessageDmComposition = (props) => {
             }
           }
         ),
-        /* @__PURE__ */ jsx12(
-          "div",
+        lightMode ? /* @__PURE__ */ jsx12(
+          Img5,
           {
+            src: staticFile3("imsg-light-main-footer.png"),
             style: {
               position: "absolute",
               top: footerTop,
               left: footerLeft,
               width: footerRight - footerLeft,
               height: footerBottom - footerTop,
-              backgroundColor: footerBgColor,
-              borderRadius: footerBorderRadius,
-              border: `${footerBorderWidth}px solid ${footerBorderColor}`,
               zIndex: 20
             }
           }
-        ),
-        /* @__PURE__ */ jsx12(
+        ) : /* @__PURE__ */ jsx12(
           "div",
           {
             style: {
               position: "absolute",
-              top: messageTextTop,
-              left: messageTextLeft,
-              height: messageTextBottom - messageTextTop,
-              display: "flex",
-              alignItems: "center",
-              fontFamily: "SF Pro Display",
-              fontWeight: 400,
-              fontSize: messageTextFontSize,
-              color: messageTextColor,
-              zIndex: 21
-            },
-            children: messageText
+              top: footerTop,
+              left: footerLeft,
+              width: footerRight - footerLeft,
+              height: footerBottom - footerTop,
+              backgroundColor: footerBgColor,
+              borderRadius: footerBorderRadius,
+              border: `${footerBorderWidth}px solid ${footerBorderColor}`,
+              zIndex: 20
+            }
           }
         ),
         conversionResult.tails.map((tail) => {
@@ -5487,7 +5484,7 @@ var IMessageDmComposition = (props) => {
           const bottomPerpY = tail.isUser ? -bottomDx / bottomLen : bottomDx / bottomLen;
           const bottomCurveX = bottomMidX + bottomPerpX * bottomBend * bottomLen;
           const bottomCurveY = bottomMidY + bottomPerpY * bottomBend * bottomLen;
-          const fillColor = tail.isUser ? senderBubbleColor : recipientBubbleColor;
+          const fillColor = tail.isUser ? senderBubbleColor : effectiveRecipientBubbleColor;
           const pathD = `M ${sideX} ${sideY} L ${curveStartX} ${curveStartY} Q ${topCurveX} ${topCurveY} ${tipX} ${tipY} Q ${bottomCurveX} ${bottomCurveY} ${bottomX} ${bottomY} Z`;
           return /* @__PURE__ */ jsx12(
             "svg",
@@ -5997,6 +5994,8 @@ var iMessageDmPropsSchema = z.object({
   referenceImageUrl: z.string().optional(),
   showReferenceImage: z.boolean().optional(),
   referenceOpacity: z.number().optional(),
+  // Light mode
+  lightMode: z.boolean().optional(),
   // iMessage header
   headerTop: z.number().optional(),
   headerBottom: z.number().optional(),

package/package.json

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