ugcinc-render 1.8.49 → 1.8.51

package/dist/index.js

@@ -4341,8 +4341,8 @@ function IgMessageList({
 // src/compositions/InstagramDmComposition/index.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var defaultInstagramDmProps = {
-  width: 1080,
-  height: 1920,
+  width: 1206,
+  height: 2622,
   durationInFrames: 90,
   fps: 30,
   theme: "dark",
@@ -4371,8 +4371,8 @@ var defaultInstagramDmProps = {
   }
 };
 function InstagramDmComposition({
-  width = 1080,
-  height = 1920,
+  width = 1206,
+  height = 2622,
   theme,
   statusBar,
   user,
@@ -4917,6 +4917,145 @@ var screenshotAnimationSchema = import_zod.z.object({
   borderColor: import_zod.z.string().optional().default("rgba(254, 255, 255, 1)").describe("Border color"),
   backgroundColor: import_zod.z.string().optional().default("#000000").describe("Background color")
 });
+var gradientColorSchema = import_zod.z.object({
+  type: import_zod.z.enum(["solid", "linear"]).describe("Color type"),
+  colors: import_zod.z.array(import_zod.z.string()).describe("Color values"),
+  angle: import_zod.z.number().optional().describe("Gradient angle in degrees")
+});
+var messageReactionSchema = import_zod.z.object({
+  emoji: import_zod.z.string().describe("Reaction emoji"),
+  fromUser: import_zod.z.boolean().describe("Is reaction from user")
+});
+var baseMessageSchema = import_zod.z.object({
+  id: import_zod.z.string().describe("Message ID"),
+  sender: import_zod.z.enum(["user", "recipient"]).describe("Message sender"),
+  reaction: messageReactionSchema.optional().describe("Message reaction")
+});
+var textMessageSchema = baseMessageSchema.extend({
+  type: import_zod.z.literal("text"),
+  text: import_zod.z.string().describe("Message text")
+});
+var imageMessageSchema = baseMessageSchema.extend({
+  type: import_zod.z.literal("image"),
+  imageInputId: import_zod.z.string().describe("Image input ID")
+});
+var storyReplyMessageSchema = baseMessageSchema.extend({
+  type: import_zod.z.literal("story-reply"),
+  storyLabel: import_zod.z.string().describe("Story reply label"),
+  imageInputId: import_zod.z.string().describe("Story image input ID"),
+  replyText: import_zod.z.string().optional().describe("Reply text")
+});
+var igMessageSchema = import_zod.z.discriminatedUnion("type", [
+  textMessageSchema,
+  imageMessageSchema,
+  storyReplyMessageSchema
+]);
+var igUserProfileSchema = import_zod.z.object({
+  username: import_zod.z.string().describe("Username"),
+  displayName: import_zod.z.string().optional().describe("Display name"),
+  avatarInputId: import_zod.z.string().describe("Avatar image input ID"),
+  verified: import_zod.z.boolean().optional().describe("Is verified"),
+  isActive: import_zod.z.boolean().optional().describe("Is active now")
+});
+var igStatusBarSchema = import_zod.z.object({
+  time: import_zod.z.string().describe("Status bar time"),
+  showCellular: import_zod.z.boolean().optional().default(true).describe("Show cellular icon"),
+  showWifi: import_zod.z.boolean().optional().default(true).describe("Show WiFi icon"),
+  showBattery: import_zod.z.boolean().optional().default(true).describe("Show battery icon"),
+  batteryLevel: import_zod.z.number().optional().default(100).describe("Battery level 0-100"),
+  isCharging: import_zod.z.boolean().optional().default(false).describe("Is charging")
+});
+var igHeaderConfigSchema = import_zod.z.object({
+  height: import_zod.z.number().default(110).describe("Header height (px)"),
+  showBackButton: import_zod.z.boolean().default(true).describe("Show back button"),
+  showVideoCallButton: import_zod.z.boolean().default(true).describe("Show video call button"),
+  showCallButton: import_zod.z.boolean().default(true).describe("Show call button"),
+  showInfoButton: import_zod.z.boolean().default(true).describe("Show info button")
+});
+var igFooterConfigSchema = import_zod.z.object({
+  height: import_zod.z.number().default(90).describe("Footer height (px)"),
+  showCamera: import_zod.z.boolean().default(true).describe("Show camera button"),
+  showGallery: import_zod.z.boolean().default(true).describe("Show gallery button"),
+  showMic: import_zod.z.boolean().default(true).describe("Show mic button"),
+  showSticker: import_zod.z.boolean().default(true).describe("Show sticker button"),
+  placeholderText: import_zod.z.string().default("Message...").describe("Input placeholder"),
+  inputText: import_zod.z.string().optional().describe("Text in input field")
+});
+var igMessageStyleSchema = import_zod.z.object({
+  // Text styling
+  fontSize: import_zod.z.number().default(28).describe("Font size (px)"),
+  fontWeight: import_zod.z.enum(["normal", "bold"]).default("normal").describe("Font weight"),
+  lineHeight: import_zod.z.number().default(1.35).describe("Line height multiplier"),
+  letterSpacing: import_zod.z.number().default(0).describe("Letter spacing (px)"),
+  // Bubble colors
+  userBubbleColor: gradientColorSchema.default({ type: "solid", colors: ["#3797F0"] }).describe("User bubble color"),
+  recipientBubbleColor: gradientColorSchema.default({ type: "solid", colors: ["#262626"] }).describe("Recipient bubble color"),
+  userTextColor: import_zod.z.string().default("#FFFFFF").describe("User text color"),
+  recipientTextColor: import_zod.z.string().default("#FFFFFF").describe("Recipient text color"),
+  // Bubble sizing
+  bubbleMaxWidth: import_zod.z.number().default(70).describe("Max bubble width (%)"),
+  bubblePaddingH: import_zod.z.number().default(14).describe("Bubble horizontal padding (px)"),
+  bubblePaddingV: import_zod.z.number().default(10).describe("Bubble vertical padding (px)"),
+  // Corner radii
+  bubbleRadiusOuter: import_zod.z.number().default(20).describe("Outer corner radius (px)"),
+  bubbleRadiusInner: import_zod.z.number().default(4).describe("Inner corner radius (px)"),
+  // Spacing
+  messageGapInGroup: import_zod.z.number().default(2).describe("Gap between messages in group (px)"),
+  messageGapBetweenGroups: import_zod.z.number().default(10).describe("Gap between groups (px)"),
+  sideMargin: import_zod.z.number().default(16).describe("Side margin (px)"),
+  // Media
+  mediaMaxWidth: import_zod.z.number().default(220).describe("Media max width (px)"),
+  mediaMaxHeight: import_zod.z.number().default(300).describe("Media max height (px)"),
+  mediaBorderRadius: import_zod.z.number().default(18).describe("Media border radius (px)"),
+  // Story reply
+  storyReplyLabelColor: import_zod.z.string().default("#A8A8A8").describe("Story label color"),
+  storyReplyLabelSize: import_zod.z.number().default(20).describe("Story label font size (px)"),
+  storyImageSize: import_zod.z.number().default(80).describe("Story image size (px)"),
+  storyImageRadius: import_zod.z.number().default(8).describe("Story image radius (px)"),
+  // Reactions
+  reactionSize: import_zod.z.number().default(20).describe("Reaction emoji size (px)"),
+  reactionBubbleColor: import_zod.z.string().default("#363636").describe("Reaction bubble color"),
+  reactionBorderRadius: import_zod.z.number().default(10).describe("Reaction border radius (px)"),
+  reactionOffsetY: import_zod.z.number().default(-6).describe("Reaction Y offset (px)"),
+  // Typing indicator
+  typingDotSize: import_zod.z.number().default(8).describe("Typing dot size (px)"),
+  typingDotColor: import_zod.z.string().default("#A8A8A8").describe("Typing dot color"),
+  typingDotSpacing: import_zod.z.number().default(4).describe("Typing dot spacing (px)"),
+  typingBubblePaddingH: import_zod.z.number().default(16).describe("Typing bubble H padding (px)"),
+  typingBubblePaddingV: import_zod.z.number().default(14).describe("Typing bubble V padding (px)"),
+  // Profile picture
+  profilePicSize: import_zod.z.number().default(28).describe("Profile pic size (px)"),
+  profilePicGap: import_zod.z.number().default(8).describe("Profile pic gap (px)")
+});
+var readReceiptSchema = import_zod.z.object({
+  state: import_zod.z.enum(["none", "sent", "delivered", "seen"]).describe("Receipt state"),
+  showAvatar: import_zod.z.boolean().optional().describe("Show avatar for seen"),
+  timestamp: import_zod.z.string().optional().describe("Timestamp text")
+});
+var instagramDmSchema = import_zod.z.object({
+  // Canvas
+  width: import_zod.z.number().optional().default(1206).describe("Canvas width (px)"),
+  height: import_zod.z.number().optional().default(2622).describe("Canvas height (px)"),
+  // Theme
+  theme: import_zod.z.enum(["light", "dark"]).describe("Color theme"),
+  // Status bar
+  statusBar: igStatusBarSchema.describe("Status bar config"),
+  // Profiles
+  user: igUserProfileSchema.describe("User profile"),
+  recipient: igUserProfileSchema.describe("Recipient profile"),
+  // Messages
+  messages: import_zod.z.array(igMessageSchema).describe("Messages array"),
+  showTypingIndicator: import_zod.z.boolean().optional().default(false).describe("Show typing indicator"),
+  readReceipt: readReceiptSchema.optional().describe("Read receipt"),
+  // Image URLs
+  imageUrls: import_zod.z.record(import_zod.z.string(), import_zod.z.string()).describe("Image URLs map"),
+  // Styling
+  messageStyle: igMessageStyleSchema.optional().describe("Message styling"),
+  headerConfig: igHeaderConfigSchema.optional().describe("Header config"),
+  footerConfig: igFooterConfigSchema.optional().describe("Footer config"),
+  // Scroll
+  scrollOffset: import_zod.z.number().optional().default(0).describe("Scroll offset (px)")
+});
 var ImageComp = ImageEditorComposition;
 var VideoComp = VideoEditorComposition;
 var AutoCaptionComp = AutoCaptionComposition;
@@ -5028,10 +5167,11 @@ var RenderRoot = () => {
       {
         id: "InstagramDmComposition",
         component: InstagramDmComp,
+        schema: instagramDmSchema,
         durationInFrames: 90,
         fps: 30,
-        width: 1080,
-        height: 1920,
+        width: 1206,
+        height: 2622,
         defaultProps: defaultInstagramDmProps
       }
     )

package/dist/index.mjs

@@ -3445,8 +3445,8 @@ function IgMessageList({
 // src/compositions/InstagramDmComposition/index.tsx
 import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 var defaultInstagramDmProps = {
-  width: 1080,
-  height: 1920,
+  width: 1206,
+  height: 2622,
   durationInFrames: 90,
   fps: 30,
   theme: "dark",
@@ -3475,8 +3475,8 @@ var defaultInstagramDmProps = {
   }
 };
 function InstagramDmComposition({
-  width = 1080,
-  height = 1920,
+  width = 1206,
+  height = 2622,
   theme,
   statusBar,
   user,
@@ -3738,6 +3738,145 @@ var screenshotAnimationSchema = z.object({
   borderColor: z.string().optional().default("rgba(254, 255, 255, 1)").describe("Border color"),
   backgroundColor: z.string().optional().default("#000000").describe("Background color")
 });
+var gradientColorSchema = z.object({
+  type: z.enum(["solid", "linear"]).describe("Color type"),
+  colors: z.array(z.string()).describe("Color values"),
+  angle: z.number().optional().describe("Gradient angle in degrees")
+});
+var messageReactionSchema = z.object({
+  emoji: z.string().describe("Reaction emoji"),
+  fromUser: z.boolean().describe("Is reaction from user")
+});
+var baseMessageSchema = z.object({
+  id: z.string().describe("Message ID"),
+  sender: z.enum(["user", "recipient"]).describe("Message sender"),
+  reaction: messageReactionSchema.optional().describe("Message reaction")
+});
+var textMessageSchema = baseMessageSchema.extend({
+  type: z.literal("text"),
+  text: z.string().describe("Message text")
+});
+var imageMessageSchema = baseMessageSchema.extend({
+  type: z.literal("image"),
+  imageInputId: z.string().describe("Image input ID")
+});
+var storyReplyMessageSchema = baseMessageSchema.extend({
+  type: z.literal("story-reply"),
+  storyLabel: z.string().describe("Story reply label"),
+  imageInputId: z.string().describe("Story image input ID"),
+  replyText: z.string().optional().describe("Reply text")
+});
+var igMessageSchema = z.discriminatedUnion("type", [
+  textMessageSchema,
+  imageMessageSchema,
+  storyReplyMessageSchema
+]);
+var igUserProfileSchema = z.object({
+  username: z.string().describe("Username"),
+  displayName: z.string().optional().describe("Display name"),
+  avatarInputId: z.string().describe("Avatar image input ID"),
+  verified: z.boolean().optional().describe("Is verified"),
+  isActive: z.boolean().optional().describe("Is active now")
+});
+var igStatusBarSchema = z.object({
+  time: z.string().describe("Status bar time"),
+  showCellular: z.boolean().optional().default(true).describe("Show cellular icon"),
+  showWifi: z.boolean().optional().default(true).describe("Show WiFi icon"),
+  showBattery: z.boolean().optional().default(true).describe("Show battery icon"),
+  batteryLevel: z.number().optional().default(100).describe("Battery level 0-100"),
+  isCharging: z.boolean().optional().default(false).describe("Is charging")
+});
+var igHeaderConfigSchema = z.object({
+  height: z.number().default(110).describe("Header height (px)"),
+  showBackButton: z.boolean().default(true).describe("Show back button"),
+  showVideoCallButton: z.boolean().default(true).describe("Show video call button"),
+  showCallButton: z.boolean().default(true).describe("Show call button"),
+  showInfoButton: z.boolean().default(true).describe("Show info button")
+});
+var igFooterConfigSchema = z.object({
+  height: z.number().default(90).describe("Footer height (px)"),
+  showCamera: z.boolean().default(true).describe("Show camera button"),
+  showGallery: z.boolean().default(true).describe("Show gallery button"),
+  showMic: z.boolean().default(true).describe("Show mic button"),
+  showSticker: z.boolean().default(true).describe("Show sticker button"),
+  placeholderText: z.string().default("Message...").describe("Input placeholder"),
+  inputText: z.string().optional().describe("Text in input field")
+});
+var igMessageStyleSchema = z.object({
+  // Text styling
+  fontSize: z.number().default(28).describe("Font size (px)"),
+  fontWeight: z.enum(["normal", "bold"]).default("normal").describe("Font weight"),
+  lineHeight: z.number().default(1.35).describe("Line height multiplier"),
+  letterSpacing: z.number().default(0).describe("Letter spacing (px)"),
+  // Bubble colors
+  userBubbleColor: gradientColorSchema.default({ type: "solid", colors: ["#3797F0"] }).describe("User bubble color"),
+  recipientBubbleColor: gradientColorSchema.default({ type: "solid", colors: ["#262626"] }).describe("Recipient bubble color"),
+  userTextColor: z.string().default("#FFFFFF").describe("User text color"),
+  recipientTextColor: z.string().default("#FFFFFF").describe("Recipient text color"),
+  // Bubble sizing
+  bubbleMaxWidth: z.number().default(70).describe("Max bubble width (%)"),
+  bubblePaddingH: z.number().default(14).describe("Bubble horizontal padding (px)"),
+  bubblePaddingV: z.number().default(10).describe("Bubble vertical padding (px)"),
+  // Corner radii
+  bubbleRadiusOuter: z.number().default(20).describe("Outer corner radius (px)"),
+  bubbleRadiusInner: z.number().default(4).describe("Inner corner radius (px)"),
+  // Spacing
+  messageGapInGroup: z.number().default(2).describe("Gap between messages in group (px)"),
+  messageGapBetweenGroups: z.number().default(10).describe("Gap between groups (px)"),
+  sideMargin: z.number().default(16).describe("Side margin (px)"),
+  // Media
+  mediaMaxWidth: z.number().default(220).describe("Media max width (px)"),
+  mediaMaxHeight: z.number().default(300).describe("Media max height (px)"),
+  mediaBorderRadius: z.number().default(18).describe("Media border radius (px)"),
+  // Story reply
+  storyReplyLabelColor: z.string().default("#A8A8A8").describe("Story label color"),
+  storyReplyLabelSize: z.number().default(20).describe("Story label font size (px)"),
+  storyImageSize: z.number().default(80).describe("Story image size (px)"),
+  storyImageRadius: z.number().default(8).describe("Story image radius (px)"),
+  // Reactions
+  reactionSize: z.number().default(20).describe("Reaction emoji size (px)"),
+  reactionBubbleColor: z.string().default("#363636").describe("Reaction bubble color"),
+  reactionBorderRadius: z.number().default(10).describe("Reaction border radius (px)"),
+  reactionOffsetY: z.number().default(-6).describe("Reaction Y offset (px)"),
+  // Typing indicator
+  typingDotSize: z.number().default(8).describe("Typing dot size (px)"),
+  typingDotColor: z.string().default("#A8A8A8").describe("Typing dot color"),
+  typingDotSpacing: z.number().default(4).describe("Typing dot spacing (px)"),
+  typingBubblePaddingH: z.number().default(16).describe("Typing bubble H padding (px)"),
+  typingBubblePaddingV: z.number().default(14).describe("Typing bubble V padding (px)"),
+  // Profile picture
+  profilePicSize: z.number().default(28).describe("Profile pic size (px)"),
+  profilePicGap: z.number().default(8).describe("Profile pic gap (px)")
+});
+var readReceiptSchema = z.object({
+  state: z.enum(["none", "sent", "delivered", "seen"]).describe("Receipt state"),
+  showAvatar: z.boolean().optional().describe("Show avatar for seen"),
+  timestamp: z.string().optional().describe("Timestamp text")
+});
+var instagramDmSchema = z.object({
+  // Canvas
+  width: z.number().optional().default(1206).describe("Canvas width (px)"),
+  height: z.number().optional().default(2622).describe("Canvas height (px)"),
+  // Theme
+  theme: z.enum(["light", "dark"]).describe("Color theme"),
+  // Status bar
+  statusBar: igStatusBarSchema.describe("Status bar config"),
+  // Profiles
+  user: igUserProfileSchema.describe("User profile"),
+  recipient: igUserProfileSchema.describe("Recipient profile"),
+  // Messages
+  messages: z.array(igMessageSchema).describe("Messages array"),
+  showTypingIndicator: z.boolean().optional().default(false).describe("Show typing indicator"),
+  readReceipt: readReceiptSchema.optional().describe("Read receipt"),
+  // Image URLs
+  imageUrls: z.record(z.string(), z.string()).describe("Image URLs map"),
+  // Styling
+  messageStyle: igMessageStyleSchema.optional().describe("Message styling"),
+  headerConfig: igHeaderConfigSchema.optional().describe("Header config"),
+  footerConfig: igFooterConfigSchema.optional().describe("Footer config"),
+  // Scroll
+  scrollOffset: z.number().optional().default(0).describe("Scroll offset (px)")
+});
 var ImageComp = ImageEditorComposition;
 var VideoComp = VideoEditorComposition;
 var AutoCaptionComp = AutoCaptionComposition;
@@ -3849,10 +3988,11 @@ var RenderRoot = () => {
       {
         id: "InstagramDmComposition",
         component: InstagramDmComp,
+        schema: instagramDmSchema,
         durationInFrames: 90,
         fps: 30,
-        width: 1080,
-        height: 1920,
+        width: 1206,
+        height: 2622,
         defaultProps: defaultInstagramDmProps
       }
     )

package/package.json

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