ugcinc-render 1.8.51 → 1.8.52

package/dist/index.js

@@ -2779,14 +2779,14 @@ var DEFAULT_STATUS_BAR = {
   isCharging: false
 };
 var DEFAULT_HEADER = {
-  height: 110,
+  height: 160,
   showBackButton: true,
   showVideoCallButton: true,
   showCallButton: true,
   showInfoButton: true
 };
 var DEFAULT_FOOTER = {
-  height: 90,
+  height: 130,
   showCamera: true,
   showGallery: true,
   showMic: true,
@@ -2799,7 +2799,7 @@ var DEFAULT_RECIPIENT_BUBBLE = {
 };
 var DEFAULT_MESSAGE_STYLE = {
   // Text styling
-  fontSize: 28,
+  fontSize: 42,
   fontWeight: "normal",
   lineHeight: 1.35,
   letterSpacing: 0,
@@ -2810,38 +2810,38 @@ var DEFAULT_MESSAGE_STYLE = {
   recipientTextColor: "#FFFFFF",
   // Bubble sizing
   bubbleMaxWidth: 70,
-  bubblePaddingH: 14,
-  bubblePaddingV: 10,
+  bubblePaddingH: 20,
+  bubblePaddingV: 14,
   // Corner radii
-  bubbleRadiusOuter: 20,
-  bubbleRadiusInner: 4,
+  bubbleRadiusOuter: 28,
+  bubbleRadiusInner: 6,
   // Spacing
-  messageGapInGroup: 2,
-  messageGapBetweenGroups: 10,
-  sideMargin: 16,
+  messageGapInGroup: 3,
+  messageGapBetweenGroups: 16,
+  sideMargin: 24,
   // Media
-  mediaMaxWidth: 220,
-  mediaMaxHeight: 300,
-  mediaBorderRadius: 18,
+  mediaMaxWidth: 340,
+  mediaMaxHeight: 450,
+  mediaBorderRadius: 26,
   // Story reply
   storyReplyLabelColor: "#A8A8A8",
-  storyReplyLabelSize: 20,
-  storyImageSize: 80,
-  storyImageRadius: 8,
+  storyReplyLabelSize: 30,
+  storyImageSize: 140,
+  storyImageRadius: 12,
   // Reactions
-  reactionSize: 20,
+  reactionSize: 32,
   reactionBubbleColor: "#363636",
-  reactionBorderRadius: 10,
-  reactionOffsetY: -6,
+  reactionBorderRadius: 16,
+  reactionOffsetY: -10,
   // Typing indicator
-  typingDotSize: 8,
+  typingDotSize: 12,
   typingDotColor: "#A8A8A8",
-  typingDotSpacing: 4,
-  typingBubblePaddingH: 16,
-  typingBubblePaddingV: 14,
+  typingDotSpacing: 6,
+  typingBubblePaddingH: 24,
+  typingBubblePaddingV: 20,
   // Profile picture
-  profilePicSize: 28,
-  profilePicGap: 8
+  profilePicSize: 44,
+  profilePicGap: 12
 };
 function mergeMessageStyle(partial) {
   if (!partial) {
@@ -2870,9 +2870,9 @@ function mergeStatusBarConfig(partial) {
 
 // src/compositions/InstagramDmComposition/components/IgStatusBar.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var STATUS_BAR_HEIGHT = 54;
+var STATUS_BAR_HEIGHT = 75;
 function CellularIcon({ color }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { width: "18", height: "12", viewBox: "0 0 18 12", fill: "none", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { width: "26", height: "18", viewBox: "0 0 18 12", fill: "none", children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "0", y: "8", width: "3", height: "4", rx: "0.5", fill: color }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "4", y: "5", width: "3", height: "7", rx: "0.5", fill: color }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "8", y: "3", width: "3", height: "9", rx: "0.5", fill: color }),
@@ -2880,7 +2880,7 @@ function CellularIcon({ color }) {
   ] });
 }
 function WifiIcon({ color }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { width: "17", height: "12", viewBox: "0 0 17 12", fill: "none", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { width: "24", height: "18", viewBox: "0 0 17 12", fill: "none", children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "path",
       {
@@ -2945,7 +2945,7 @@ function BatteryIcon({
 }) {
   const fillWidth = Math.max(0, Math.min(100, level)) * 0.22;
   const fillColor = level <= 20 ? "#FF3B30" : isCharging ? "#34C759" : color;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { width: "27", height: "13", viewBox: "0 0 27 13", fill: "none", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { width: "38", height: "18", viewBox: "0 0 27 13", fill: "none", children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "rect",
       {
@@ -2995,7 +2995,7 @@ function IgStatusBar({ config, theme, width }) {
         display: "flex",
         alignItems: "center",
         justifyContent: "space-between",
-        padding: "0 24px",
+        padding: "0 36px",
         zIndex: 20
       },
       children: [
@@ -3003,11 +3003,11 @@ function IgStatusBar({ config, theme, width }) {
           "div",
           {
             style: {
-              fontSize: 17,
+              fontSize: 24,
               fontWeight: 600,
               fontFamily: '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif',
               color: textColor,
-              minWidth: 54
+              minWidth: 70
             },
             children: config.time
           }
@@ -3016,8 +3016,8 @@ function IgStatusBar({ config, theme, width }) {
           "div",
           {
             style: {
-              width: width > 1e3 ? 126 : 80,
-              height: 34,
+              width: width > 1e3 ? 180 : 120,
+              height: 48,
               backgroundColor: "transparent"
             }
           }
@@ -3028,7 +3028,7 @@ function IgStatusBar({ config, theme, width }) {
             style: {
               display: "flex",
               alignItems: "center",
-              gap: 6
+              gap: 8
             },
             children: [
               config.showCellular && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CellularIcon, { color: textColor }),
@@ -3053,7 +3053,7 @@ function IgStatusBar({ config, theme, width }) {
 var import_remotion8 = require("remotion");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function BackIcon({ color }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { width: "34", height: "34", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "path",
     {
       d: "M15 18L9 12L15 6",
@@ -3065,7 +3065,7 @@ function BackIcon({ color }) {
   ) });
 }
 function VideoCallIcon({ color }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("svg", { width: "26", height: "26", viewBox: "0 0 24 24", fill: "none", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("svg", { width: "36", height: "36", viewBox: "0 0 24 24", fill: "none", children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "rect",
       {
@@ -3091,7 +3091,7 @@ function VideoCallIcon({ color }) {
   ] });
 }
 function CallIcon({ color }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { width: "34", height: "34", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "path",
     {
       d: "M22 16.92V19.92C22 20.48 21.56 20.97 20.92 21C14.44 21.5 8.5 19.1 4.7 15.3C0.9 11.5 -1.5 5.56 3 3.08C3.03 2.44 3.52 2 4.08 2H7.08C7.56 2 7.97 2.34 8.05 2.81C8.22 3.87 8.54 4.9 9 5.85C9.14 6.14 9.07 6.49 8.83 6.71L7.29 8.25C8.91 11.1 11.19 13.38 14.04 15L15.58 13.46C15.8 13.22 16.15 13.15 16.44 13.29C17.39 13.75 18.42 14.07 19.48 14.24C19.95 14.32 20.29 14.73 20.29 15.21V16.92H22Z",
@@ -3103,7 +3103,7 @@ function CallIcon({ color }) {
   ) });
 }
 function InfoIcon({ color }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("svg", { width: "34", height: "34", viewBox: "0 0 24 24", fill: "none", children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: color, strokeWidth: "2" }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "path",
@@ -3118,7 +3118,7 @@ function InfoIcon({ color }) {
   ] });
 }
 function VerifiedBadge() {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "#3897F0", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "#3897F0", children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M12 2L14.4 4.4L17.6 3.6L18.4 6.8L21.6 7.6L20.8 10.8L24 12L20.8 13.2L21.6 16.4L18.4 17.2L17.6 20.4L14.4 19.6L12 22L9.6 19.6L6.4 20.4L5.6 17.2L2.4 16.4L3.2 13.2L0 12L3.2 10.8L2.4 7.6L5.6 6.8L6.4 3.6L9.6 4.4L12 2Z" }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "path",
@@ -3147,7 +3147,7 @@ function IgHeader({ config, theme, recipient, avatarUrl }) {
         backgroundColor: colors.headerBg,
         display: "flex",
         alignItems: "center",
-        padding: "0 12px",
+        padding: "0 18px",
         zIndex: 10
       },
       children: [
@@ -3157,18 +3157,18 @@ function IgHeader({ config, theme, recipient, avatarUrl }) {
             style: {
               display: "flex",
               alignItems: "center",
-              gap: 12,
+              gap: 16,
               flex: 1
             },
             children: [
-              config.showBackButton && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { padding: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(BackIcon, { color: iconColor }) }),
+              config.showBackButton && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { padding: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(BackIcon, { color: iconColor }) }),
               /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                 "div",
                 {
                   style: {
                     position: "relative",
-                    width: 44,
-                    height: 44,
+                    width: 64,
+                    height: 64,
                     borderRadius: "50%",
                     overflow: "hidden",
                     flexShrink: 0
@@ -3192,11 +3192,11 @@ function IgHeader({ config, theme, recipient, avatarUrl }) {
                           position: "absolute",
                           bottom: 0,
                           right: 0,
-                          width: 14,
-                          height: 14,
+                          width: 20,
+                          height: 20,
                           borderRadius: "50%",
                           backgroundColor: colors.activeGreen,
-                          border: `2px solid ${colors.headerBg}`,
+                          border: `3px solid ${colors.headerBg}`,
                           boxSizing: "border-box"
                         }
                       }
@@ -3210,7 +3210,7 @@ function IgHeader({ config, theme, recipient, avatarUrl }) {
                   style: {
                     display: "flex",
                     flexDirection: "column",
-                    gap: 2
+                    gap: 4
                   },
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
@@ -3219,7 +3219,7 @@ function IgHeader({ config, theme, recipient, avatarUrl }) {
                         style: {
                           display: "flex",
                           alignItems: "center",
-                          gap: 4
+                          gap: 6
                         },
                         children: [
                           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -3227,7 +3227,7 @@ function IgHeader({ config, theme, recipient, avatarUrl }) {
                             {
                               style: {
                                 fontFamily: '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif',
-                                fontSize: 16,
+                                fontSize: 24,
                                 fontWeight: 600,
                                 color: colors.textPrimary
                               },
@@ -3243,7 +3243,7 @@ function IgHeader({ config, theme, recipient, avatarUrl }) {
                       {
                         style: {
                           fontFamily: '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif',
-                          fontSize: 13,
+                          fontSize: 18,
                           color: colors.textSecondary
                         },
                         children: recipient.isActive ? "Active now" : recipient.displayName ? recipient.username : ""
@@ -3261,7 +3261,7 @@ function IgHeader({ config, theme, recipient, avatarUrl }) {
             style: {
               display: "flex",
               alignItems: "center",
-              gap: 20
+              gap: 28
             },
             children: [
               config.showCallButton && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CallIcon, { color: iconColor }),
@@ -3278,7 +3278,7 @@ function IgHeader({ config, theme, recipient, avatarUrl }) {
 // src/compositions/InstagramDmComposition/components/IgFooter.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function CameraIcon({ color }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: "26", height: "26", viewBox: "0 0 24 24", fill: "none", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: "36", height: "36", viewBox: "0 0 24 24", fill: "none", children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "12", cy: "13", r: "4", stroke: color, strokeWidth: "2" }),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "path",
@@ -3293,7 +3293,7 @@ function CameraIcon({ color }) {
   ] });
 }
 function GalleryIcon({ color }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: "34", height: "34", viewBox: "0 0 24 24", fill: "none", children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "rect",
       {
@@ -3320,7 +3320,7 @@ function GalleryIcon({ color }) {
   ] });
 }
 function MicIcon({ color }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("rect", { x: "9", y: "2", width: "6", height: "11", rx: "3", stroke: color, strokeWidth: "2" }),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "path",
@@ -3343,7 +3343,7 @@ function MicIcon({ color }) {
   ] });
 }
 function StickerIcon({ color }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: "34", height: "34", viewBox: "0 0 24 24", fill: "none", children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: color, strokeWidth: "2" }),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "path",
@@ -3374,8 +3374,8 @@ function IgFooter({ config, theme, compositionHeight }) {
         backgroundColor: colors.footerBg,
         display: "flex",
         alignItems: "center",
-        padding: "0 12px",
-        gap: 12,
+        padding: "0 18px",
+        gap: 16,
         zIndex: 10
       },
       children: [
@@ -3383,8 +3383,8 @@ function IgFooter({ config, theme, compositionHeight }) {
           "div",
           {
             style: {
-              width: 44,
-              height: 44,
+              width: 64,
+              height: 64,
               borderRadius: "50%",
               backgroundColor: "#3797F0",
               display: "flex",
@@ -3400,14 +3400,14 @@ function IgFooter({ config, theme, compositionHeight }) {
           {
             style: {
               flex: 1,
-              height: 44,
-              borderRadius: 22,
-              border: `1px solid ${colors.divider}`,
+              height: 64,
+              borderRadius: 32,
+              border: `1.5px solid ${colors.divider}`,
               backgroundColor: colors.footerBg,
               display: "flex",
               alignItems: "center",
-              padding: "0 16px",
-              gap: 12
+              padding: "0 24px",
+              gap: 16
             },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -3416,7 +3416,7 @@ function IgFooter({ config, theme, compositionHeight }) {
                   style: {
                     flex: 1,
                     fontFamily: '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif',
-                    fontSize: 16,
+                    fontSize: 24,
                     color: hasInputText ? colors.textPrimary : colors.textSecondary
                   },
                   children: hasInputText ? config.inputText : config.placeholderText
@@ -3428,7 +3428,7 @@ function IgFooter({ config, theme, compositionHeight }) {
                   style: {
                     display: "flex",
                     alignItems: "center",
-                    gap: 12
+                    gap: 16
                   },
                   children: [
                     config.showSticker && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StickerIcon, { color: iconColor }),
@@ -3439,7 +3439,7 @@ function IgFooter({ config, theme, compositionHeight }) {
             ]
           }
         ),
-        config.showMic && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { padding: 4, flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MicIcon, { color: iconColor }) })
+        config.showMic && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { padding: 6, flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MicIcon, { color: iconColor }) })
       ]
     }
   );
@@ -4966,14 +4966,14 @@ var igStatusBarSchema = import_zod.z.object({
   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)"),
+  height: import_zod.z.number().default(160).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)"),
+  height: import_zod.z.number().default(130).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"),
@@ -4983,7 +4983,7 @@ var igFooterConfigSchema = import_zod.z.object({
 });
 var igMessageStyleSchema = import_zod.z.object({
   // Text styling
-  fontSize: import_zod.z.number().default(28).describe("Font size (px)"),
+  fontSize: import_zod.z.number().default(42).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)"),
@@ -4994,38 +4994,38 @@ var igMessageStyleSchema = import_zod.z.object({
   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)"),
+  bubblePaddingH: import_zod.z.number().default(20).describe("Bubble horizontal padding (px)"),
+  bubblePaddingV: import_zod.z.number().default(14).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)"),
+  bubbleRadiusOuter: import_zod.z.number().default(28).describe("Outer corner radius (px)"),
+  bubbleRadiusInner: import_zod.z.number().default(6).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)"),
+  messageGapInGroup: import_zod.z.number().default(3).describe("Gap between messages in group (px)"),
+  messageGapBetweenGroups: import_zod.z.number().default(16).describe("Gap between groups (px)"),
+  sideMargin: import_zod.z.number().default(24).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)"),
+  mediaMaxWidth: import_zod.z.number().default(340).describe("Media max width (px)"),
+  mediaMaxHeight: import_zod.z.number().default(450).describe("Media max height (px)"),
+  mediaBorderRadius: import_zod.z.number().default(26).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)"),
+  storyReplyLabelSize: import_zod.z.number().default(30).describe("Story label font size (px)"),
+  storyImageSize: import_zod.z.number().default(140).describe("Story image size (px)"),
+  storyImageRadius: import_zod.z.number().default(12).describe("Story image radius (px)"),
   // Reactions
-  reactionSize: import_zod.z.number().default(20).describe("Reaction emoji size (px)"),
+  reactionSize: import_zod.z.number().default(32).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)"),
+  reactionBorderRadius: import_zod.z.number().default(16).describe("Reaction border radius (px)"),
+  reactionOffsetY: import_zod.z.number().default(-10).describe("Reaction Y offset (px)"),
   // Typing indicator
-  typingDotSize: import_zod.z.number().default(8).describe("Typing dot size (px)"),
+  typingDotSize: import_zod.z.number().default(12).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)"),
+  typingDotSpacing: import_zod.z.number().default(6).describe("Typing dot spacing (px)"),
+  typingBubblePaddingH: import_zod.z.number().default(24).describe("Typing bubble H padding (px)"),
+  typingBubblePaddingV: import_zod.z.number().default(20).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)")
+  profilePicSize: import_zod.z.number().default(44).describe("Profile pic size (px)"),
+  profilePicGap: import_zod.z.number().default(12).describe("Profile pic gap (px)")
 });
 var readReceiptSchema = import_zod.z.object({
   state: import_zod.z.enum(["none", "sent", "delivered", "seen"]).describe("Receipt state"),

package/dist/index.mjs

@@ -1883,14 +1883,14 @@ var DEFAULT_STATUS_BAR = {
   isCharging: false
 };
 var DEFAULT_HEADER = {
-  height: 110,
+  height: 160,
   showBackButton: true,
   showVideoCallButton: true,
   showCallButton: true,
   showInfoButton: true
 };
 var DEFAULT_FOOTER = {
-  height: 90,
+  height: 130,
   showCamera: true,
   showGallery: true,
   showMic: true,
@@ -1903,7 +1903,7 @@ var DEFAULT_RECIPIENT_BUBBLE = {
 };
 var DEFAULT_MESSAGE_STYLE = {
   // Text styling
-  fontSize: 28,
+  fontSize: 42,
   fontWeight: "normal",
   lineHeight: 1.35,
   letterSpacing: 0,
@@ -1914,38 +1914,38 @@ var DEFAULT_MESSAGE_STYLE = {
   recipientTextColor: "#FFFFFF",
   // Bubble sizing
   bubbleMaxWidth: 70,
-  bubblePaddingH: 14,
-  bubblePaddingV: 10,
+  bubblePaddingH: 20,
+  bubblePaddingV: 14,
   // Corner radii
-  bubbleRadiusOuter: 20,
-  bubbleRadiusInner: 4,
+  bubbleRadiusOuter: 28,
+  bubbleRadiusInner: 6,
   // Spacing
-  messageGapInGroup: 2,
-  messageGapBetweenGroups: 10,
-  sideMargin: 16,
+  messageGapInGroup: 3,
+  messageGapBetweenGroups: 16,
+  sideMargin: 24,
   // Media
-  mediaMaxWidth: 220,
-  mediaMaxHeight: 300,
-  mediaBorderRadius: 18,
+  mediaMaxWidth: 340,
+  mediaMaxHeight: 450,
+  mediaBorderRadius: 26,
   // Story reply
   storyReplyLabelColor: "#A8A8A8",
-  storyReplyLabelSize: 20,
-  storyImageSize: 80,
-  storyImageRadius: 8,
+  storyReplyLabelSize: 30,
+  storyImageSize: 140,
+  storyImageRadius: 12,
   // Reactions
-  reactionSize: 20,
+  reactionSize: 32,
   reactionBubbleColor: "#363636",
-  reactionBorderRadius: 10,
-  reactionOffsetY: -6,
+  reactionBorderRadius: 16,
+  reactionOffsetY: -10,
   // Typing indicator
-  typingDotSize: 8,
+  typingDotSize: 12,
   typingDotColor: "#A8A8A8",
-  typingDotSpacing: 4,
-  typingBubblePaddingH: 16,
-  typingBubblePaddingV: 14,
+  typingDotSpacing: 6,
+  typingBubblePaddingH: 24,
+  typingBubblePaddingV: 20,
   // Profile picture
-  profilePicSize: 28,
-  profilePicGap: 8
+  profilePicSize: 44,
+  profilePicGap: 12
 };
 function mergeMessageStyle(partial) {
   if (!partial) {
@@ -1974,9 +1974,9 @@ function mergeStatusBarConfig(partial) {
 
 // src/compositions/InstagramDmComposition/components/IgStatusBar.tsx
 import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
-var STATUS_BAR_HEIGHT = 54;
+var STATUS_BAR_HEIGHT = 75;
 function CellularIcon({ color }) {
-  return /* @__PURE__ */ jsxs7("svg", { width: "18", height: "12", viewBox: "0 0 18 12", fill: "none", children: [
+  return /* @__PURE__ */ jsxs7("svg", { width: "26", height: "18", viewBox: "0 0 18 12", fill: "none", children: [
     /* @__PURE__ */ jsx9("rect", { x: "0", y: "8", width: "3", height: "4", rx: "0.5", fill: color }),
     /* @__PURE__ */ jsx9("rect", { x: "4", y: "5", width: "3", height: "7", rx: "0.5", fill: color }),
     /* @__PURE__ */ jsx9("rect", { x: "8", y: "3", width: "3", height: "9", rx: "0.5", fill: color }),
@@ -1984,7 +1984,7 @@ function CellularIcon({ color }) {
   ] });
 }
 function WifiIcon({ color }) {
-  return /* @__PURE__ */ jsxs7("svg", { width: "17", height: "12", viewBox: "0 0 17 12", fill: "none", children: [
+  return /* @__PURE__ */ jsxs7("svg", { width: "24", height: "18", viewBox: "0 0 17 12", fill: "none", children: [
     /* @__PURE__ */ jsx9(
       "path",
       {
@@ -2049,7 +2049,7 @@ function BatteryIcon({
 }) {
   const fillWidth = Math.max(0, Math.min(100, level)) * 0.22;
   const fillColor = level <= 20 ? "#FF3B30" : isCharging ? "#34C759" : color;
-  return /* @__PURE__ */ jsxs7("svg", { width: "27", height: "13", viewBox: "0 0 27 13", fill: "none", children: [
+  return /* @__PURE__ */ jsxs7("svg", { width: "38", height: "18", viewBox: "0 0 27 13", fill: "none", children: [
     /* @__PURE__ */ jsx9(
       "rect",
       {
@@ -2099,7 +2099,7 @@ function IgStatusBar({ config, theme, width }) {
         display: "flex",
         alignItems: "center",
         justifyContent: "space-between",
-        padding: "0 24px",
+        padding: "0 36px",
         zIndex: 20
       },
       children: [
@@ -2107,11 +2107,11 @@ function IgStatusBar({ config, theme, width }) {
           "div",
           {
             style: {
-              fontSize: 17,
+              fontSize: 24,
               fontWeight: 600,
               fontFamily: '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif',
               color: textColor,
-              minWidth: 54
+              minWidth: 70
             },
             children: config.time
           }
@@ -2120,8 +2120,8 @@ function IgStatusBar({ config, theme, width }) {
           "div",
           {
             style: {
-              width: width > 1e3 ? 126 : 80,
-              height: 34,
+              width: width > 1e3 ? 180 : 120,
+              height: 48,
               backgroundColor: "transparent"
             }
           }
@@ -2132,7 +2132,7 @@ function IgStatusBar({ config, theme, width }) {
             style: {
               display: "flex",
               alignItems: "center",
-              gap: 6
+              gap: 8
             },
             children: [
               config.showCellular && /* @__PURE__ */ jsx9(CellularIcon, { color: textColor }),
@@ -2157,7 +2157,7 @@ function IgStatusBar({ config, theme, width }) {
 import { Img as Img4 } from "remotion";
 import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 function BackIcon({ color }) {
-  return /* @__PURE__ */ jsx10("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx10("svg", { width: "34", height: "34", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx10(
     "path",
     {
       d: "M15 18L9 12L15 6",
@@ -2169,7 +2169,7 @@ function BackIcon({ color }) {
   ) });
 }
 function VideoCallIcon({ color }) {
-  return /* @__PURE__ */ jsxs8("svg", { width: "26", height: "26", viewBox: "0 0 24 24", fill: "none", children: [
+  return /* @__PURE__ */ jsxs8("svg", { width: "36", height: "36", viewBox: "0 0 24 24", fill: "none", children: [
     /* @__PURE__ */ jsx10(
       "rect",
       {
@@ -2195,7 +2195,7 @@ function VideoCallIcon({ color }) {
   ] });
 }
 function CallIcon({ color }) {
-  return /* @__PURE__ */ jsx10("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx10("svg", { width: "34", height: "34", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx10(
     "path",
     {
       d: "M22 16.92V19.92C22 20.48 21.56 20.97 20.92 21C14.44 21.5 8.5 19.1 4.7 15.3C0.9 11.5 -1.5 5.56 3 3.08C3.03 2.44 3.52 2 4.08 2H7.08C7.56 2 7.97 2.34 8.05 2.81C8.22 3.87 8.54 4.9 9 5.85C9.14 6.14 9.07 6.49 8.83 6.71L7.29 8.25C8.91 11.1 11.19 13.38 14.04 15L15.58 13.46C15.8 13.22 16.15 13.15 16.44 13.29C17.39 13.75 18.42 14.07 19.48 14.24C19.95 14.32 20.29 14.73 20.29 15.21V16.92H22Z",
@@ -2207,7 +2207,7 @@ function CallIcon({ color }) {
   ) });
 }
 function InfoIcon({ color }) {
-  return /* @__PURE__ */ jsxs8("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [
+  return /* @__PURE__ */ jsxs8("svg", { width: "34", height: "34", viewBox: "0 0 24 24", fill: "none", children: [
     /* @__PURE__ */ jsx10("circle", { cx: "12", cy: "12", r: "10", stroke: color, strokeWidth: "2" }),
     /* @__PURE__ */ jsx10(
       "path",
@@ -2222,7 +2222,7 @@ function InfoIcon({ color }) {
   ] });
 }
 function VerifiedBadge() {
-  return /* @__PURE__ */ jsxs8("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "#3897F0", children: [
+  return /* @__PURE__ */ jsxs8("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "#3897F0", children: [
     /* @__PURE__ */ jsx10("path", { d: "M12 2L14.4 4.4L17.6 3.6L18.4 6.8L21.6 7.6L20.8 10.8L24 12L20.8 13.2L21.6 16.4L18.4 17.2L17.6 20.4L14.4 19.6L12 22L9.6 19.6L6.4 20.4L5.6 17.2L2.4 16.4L3.2 13.2L0 12L3.2 10.8L2.4 7.6L5.6 6.8L6.4 3.6L9.6 4.4L12 2Z" }),
     /* @__PURE__ */ jsx10(
       "path",
@@ -2251,7 +2251,7 @@ function IgHeader({ config, theme, recipient, avatarUrl }) {
         backgroundColor: colors.headerBg,
         display: "flex",
         alignItems: "center",
-        padding: "0 12px",
+        padding: "0 18px",
         zIndex: 10
       },
       children: [
@@ -2261,18 +2261,18 @@ function IgHeader({ config, theme, recipient, avatarUrl }) {
             style: {
               display: "flex",
               alignItems: "center",
-              gap: 12,
+              gap: 16,
               flex: 1
             },
             children: [
-              config.showBackButton && /* @__PURE__ */ jsx10("div", { style: { padding: 4 }, children: /* @__PURE__ */ jsx10(BackIcon, { color: iconColor }) }),
+              config.showBackButton && /* @__PURE__ */ jsx10("div", { style: { padding: 6 }, children: /* @__PURE__ */ jsx10(BackIcon, { color: iconColor }) }),
               /* @__PURE__ */ jsxs8(
                 "div",
                 {
                   style: {
                     position: "relative",
-                    width: 44,
-                    height: 44,
+                    width: 64,
+                    height: 64,
                     borderRadius: "50%",
                     overflow: "hidden",
                     flexShrink: 0
@@ -2296,11 +2296,11 @@ function IgHeader({ config, theme, recipient, avatarUrl }) {
                           position: "absolute",
                           bottom: 0,
                           right: 0,
-                          width: 14,
-                          height: 14,
+                          width: 20,
+                          height: 20,
                           borderRadius: "50%",
                           backgroundColor: colors.activeGreen,
-                          border: `2px solid ${colors.headerBg}`,
+                          border: `3px solid ${colors.headerBg}`,
                           boxSizing: "border-box"
                         }
                       }
@@ -2314,7 +2314,7 @@ function IgHeader({ config, theme, recipient, avatarUrl }) {
                   style: {
                     display: "flex",
                     flexDirection: "column",
-                    gap: 2
+                    gap: 4
                   },
                   children: [
                     /* @__PURE__ */ jsxs8(
@@ -2323,7 +2323,7 @@ function IgHeader({ config, theme, recipient, avatarUrl }) {
                         style: {
                           display: "flex",
                           alignItems: "center",
-                          gap: 4
+                          gap: 6
                         },
                         children: [
                           /* @__PURE__ */ jsx10(
@@ -2331,7 +2331,7 @@ function IgHeader({ config, theme, recipient, avatarUrl }) {
                             {
                               style: {
                                 fontFamily: '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif',
-                                fontSize: 16,
+                                fontSize: 24,
                                 fontWeight: 600,
                                 color: colors.textPrimary
                               },
@@ -2347,7 +2347,7 @@ function IgHeader({ config, theme, recipient, avatarUrl }) {
                       {
                         style: {
                           fontFamily: '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif',
-                          fontSize: 13,
+                          fontSize: 18,
                           color: colors.textSecondary
                         },
                         children: recipient.isActive ? "Active now" : recipient.displayName ? recipient.username : ""
@@ -2365,7 +2365,7 @@ function IgHeader({ config, theme, recipient, avatarUrl }) {
             style: {
               display: "flex",
               alignItems: "center",
-              gap: 20
+              gap: 28
             },
             children: [
               config.showCallButton && /* @__PURE__ */ jsx10(CallIcon, { color: iconColor }),
@@ -2382,7 +2382,7 @@ function IgHeader({ config, theme, recipient, avatarUrl }) {
 // src/compositions/InstagramDmComposition/components/IgFooter.tsx
 import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 function CameraIcon({ color }) {
-  return /* @__PURE__ */ jsxs9("svg", { width: "26", height: "26", viewBox: "0 0 24 24", fill: "none", children: [
+  return /* @__PURE__ */ jsxs9("svg", { width: "36", height: "36", viewBox: "0 0 24 24", fill: "none", children: [
     /* @__PURE__ */ jsx11("circle", { cx: "12", cy: "13", r: "4", stroke: color, strokeWidth: "2" }),
     /* @__PURE__ */ jsx11(
       "path",
@@ -2397,7 +2397,7 @@ function CameraIcon({ color }) {
   ] });
 }
 function GalleryIcon({ color }) {
-  return /* @__PURE__ */ jsxs9("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [
+  return /* @__PURE__ */ jsxs9("svg", { width: "34", height: "34", viewBox: "0 0 24 24", fill: "none", children: [
     /* @__PURE__ */ jsx11(
       "rect",
       {
@@ -2424,7 +2424,7 @@ function GalleryIcon({ color }) {
   ] });
 }
 function MicIcon({ color }) {
-  return /* @__PURE__ */ jsxs9("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
+  return /* @__PURE__ */ jsxs9("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: [
     /* @__PURE__ */ jsx11("rect", { x: "9", y: "2", width: "6", height: "11", rx: "3", stroke: color, strokeWidth: "2" }),
     /* @__PURE__ */ jsx11(
       "path",
@@ -2447,7 +2447,7 @@ function MicIcon({ color }) {
   ] });
 }
 function StickerIcon({ color }) {
-  return /* @__PURE__ */ jsxs9("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [
+  return /* @__PURE__ */ jsxs9("svg", { width: "34", height: "34", viewBox: "0 0 24 24", fill: "none", children: [
     /* @__PURE__ */ jsx11("circle", { cx: "12", cy: "12", r: "10", stroke: color, strokeWidth: "2" }),
     /* @__PURE__ */ jsx11(
       "path",
@@ -2478,8 +2478,8 @@ function IgFooter({ config, theme, compositionHeight }) {
         backgroundColor: colors.footerBg,
         display: "flex",
         alignItems: "center",
-        padding: "0 12px",
-        gap: 12,
+        padding: "0 18px",
+        gap: 16,
         zIndex: 10
       },
       children: [
@@ -2487,8 +2487,8 @@ function IgFooter({ config, theme, compositionHeight }) {
           "div",
           {
             style: {
-              width: 44,
-              height: 44,
+              width: 64,
+              height: 64,
               borderRadius: "50%",
               backgroundColor: "#3797F0",
               display: "flex",
@@ -2504,14 +2504,14 @@ function IgFooter({ config, theme, compositionHeight }) {
           {
             style: {
               flex: 1,
-              height: 44,
-              borderRadius: 22,
-              border: `1px solid ${colors.divider}`,
+              height: 64,
+              borderRadius: 32,
+              border: `1.5px solid ${colors.divider}`,
               backgroundColor: colors.footerBg,
               display: "flex",
               alignItems: "center",
-              padding: "0 16px",
-              gap: 12
+              padding: "0 24px",
+              gap: 16
             },
             children: [
               /* @__PURE__ */ jsx11(
@@ -2520,7 +2520,7 @@ function IgFooter({ config, theme, compositionHeight }) {
                   style: {
                     flex: 1,
                     fontFamily: '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif',
-                    fontSize: 16,
+                    fontSize: 24,
                     color: hasInputText ? colors.textPrimary : colors.textSecondary
                   },
                   children: hasInputText ? config.inputText : config.placeholderText
@@ -2532,7 +2532,7 @@ function IgFooter({ config, theme, compositionHeight }) {
                   style: {
                     display: "flex",
                     alignItems: "center",
-                    gap: 12
+                    gap: 16
                   },
                   children: [
                     config.showSticker && /* @__PURE__ */ jsx11(StickerIcon, { color: iconColor }),
@@ -2543,7 +2543,7 @@ function IgFooter({ config, theme, compositionHeight }) {
             ]
           }
         ),
-        config.showMic && /* @__PURE__ */ jsx11("div", { style: { padding: 4, flexShrink: 0 }, children: /* @__PURE__ */ jsx11(MicIcon, { color: iconColor }) })
+        config.showMic && /* @__PURE__ */ jsx11("div", { style: { padding: 6, flexShrink: 0 }, children: /* @__PURE__ */ jsx11(MicIcon, { color: iconColor }) })
       ]
     }
   );
@@ -3787,14 +3787,14 @@ var igStatusBarSchema = z.object({
   isCharging: z.boolean().optional().default(false).describe("Is charging")
 });
 var igHeaderConfigSchema = z.object({
-  height: z.number().default(110).describe("Header height (px)"),
+  height: z.number().default(160).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)"),
+  height: z.number().default(130).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"),
@@ -3804,7 +3804,7 @@ var igFooterConfigSchema = z.object({
 });
 var igMessageStyleSchema = z.object({
   // Text styling
-  fontSize: z.number().default(28).describe("Font size (px)"),
+  fontSize: z.number().default(42).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)"),
@@ -3815,38 +3815,38 @@ var igMessageStyleSchema = z.object({
   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)"),
+  bubblePaddingH: z.number().default(20).describe("Bubble horizontal padding (px)"),
+  bubblePaddingV: z.number().default(14).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)"),
+  bubbleRadiusOuter: z.number().default(28).describe("Outer corner radius (px)"),
+  bubbleRadiusInner: z.number().default(6).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)"),
+  messageGapInGroup: z.number().default(3).describe("Gap between messages in group (px)"),
+  messageGapBetweenGroups: z.number().default(16).describe("Gap between groups (px)"),
+  sideMargin: z.number().default(24).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)"),
+  mediaMaxWidth: z.number().default(340).describe("Media max width (px)"),
+  mediaMaxHeight: z.number().default(450).describe("Media max height (px)"),
+  mediaBorderRadius: z.number().default(26).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)"),
+  storyReplyLabelSize: z.number().default(30).describe("Story label font size (px)"),
+  storyImageSize: z.number().default(140).describe("Story image size (px)"),
+  storyImageRadius: z.number().default(12).describe("Story image radius (px)"),
   // Reactions
-  reactionSize: z.number().default(20).describe("Reaction emoji size (px)"),
+  reactionSize: z.number().default(32).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)"),
+  reactionBorderRadius: z.number().default(16).describe("Reaction border radius (px)"),
+  reactionOffsetY: z.number().default(-10).describe("Reaction Y offset (px)"),
   // Typing indicator
-  typingDotSize: z.number().default(8).describe("Typing dot size (px)"),
+  typingDotSize: z.number().default(12).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)"),
+  typingDotSpacing: z.number().default(6).describe("Typing dot spacing (px)"),
+  typingBubblePaddingH: z.number().default(24).describe("Typing bubble H padding (px)"),
+  typingBubblePaddingV: z.number().default(20).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)")
+  profilePicSize: z.number().default(44).describe("Profile pic size (px)"),
+  profilePicGap: z.number().default(12).describe("Profile pic gap (px)")
 });
 var readReceiptSchema = z.object({
   state: z.enum(["none", "sent", "delivered", "seen"]).describe("Receipt state"),

package/package.json

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