ugcinc-render 1.8.56 → 1.8.58

package/dist/index.js

@@ -4341,35 +4341,58 @@ function IgMessageList({
 // src/compositions/InstagramDmComposition/components/DebugOverlay.tsx
 var import_react7 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
-function DebugOverlay({ width, height, onZoomChange, initialZoom = 100 }) {
+function DebugOverlay({
+  width,
+  height,
+  scrollContainerRef,
+  onZoomChange,
+  initialZoom = 100
+}) {
   const [mousePos, setMousePos] = (0, import_react7.useState)(null);
   const [zoom, setZoom] = (0, import_react7.useState)(initialZoom);
-  (0, import_react7.useEffect)(() => {
-    onZoomChange?.(zoom);
-  }, [zoom, onZoomChange]);
   const handleMouseMove = (0, import_react7.useCallback)(
     (e) => {
+      const container = scrollContainerRef.current;
+      if (!container) return;
       const rect = e.currentTarget.getBoundingClientRect();
-      const scaleX = width / rect.width;
-      const scaleY = height / rect.height;
-      const x = Math.round((e.clientX - rect.left) * scaleX);
-      const y = Math.round((e.clientY - rect.top) * scaleY);
+      const currentZoom = zoom / 100;
+      const mouseViewX = e.clientX - rect.left;
+      const mouseViewY = e.clientY - rect.top;
+      const scrollLeft = container.scrollLeft;
+      const scrollTop = container.scrollTop;
+      const x = Math.round((scrollLeft + mouseViewX) / currentZoom);
+      const y = Math.round((scrollTop + mouseViewY) / currentZoom);
       setMousePos({ x, y });
     },
-    [width, height]
+    [width, height, zoom, scrollContainerRef]
   );
   const handleMouseLeave = (0, import_react7.useCallback)(() => {
     setMousePos(null);
   }, []);
-  const handleWheel = (0, import_react7.useCallback)((e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    const delta = e.deltaY > 0 ? -5 : 5;
-    setZoom((prev) => {
-      const newZoom = Math.max(10, Math.min(500, prev + delta));
-      return newZoom;
-    });
-  }, []);
+  const handleWheel = (0, import_react7.useCallback)(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const container = scrollContainerRef.current;
+      if (!container) return;
+      const rect = e.currentTarget.getBoundingClientRect();
+      const mouseScreenX = e.clientX - rect.left;
+      const mouseScreenY = e.clientY - rect.top;
+      const scrollLeft = container.scrollLeft;
+      const scrollTop = container.scrollTop;
+      const oldZoom = zoom / 100;
+      const canvasX = (scrollLeft + mouseScreenX) / oldZoom;
+      const canvasY = (scrollTop + mouseScreenY) / oldZoom;
+      const delta = e.deltaY > 0 ? -5 : 5;
+      const newZoomPercent = Math.max(10, Math.min(500, zoom + delta));
+      const newZoom = newZoomPercent / 100;
+      const newScrollLeft = canvasX * newZoom - mouseScreenX;
+      const newScrollTop = canvasY * newZoom - mouseScreenY;
+      setZoom(newZoomPercent);
+      onZoomChange?.(newZoomPercent, newScrollLeft, newScrollTop);
+    },
+    [zoom, onZoomChange, scrollContainerRef]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
     {
@@ -4386,36 +4409,7 @@ function DebugOverlay({ width, height, onZoomChange, initialZoom = 100 }) {
       onMouseLeave: handleMouseLeave,
       onWheel: handleWheel,
       children: [
-        mousePos && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                top: 0,
-                left: mousePos.x,
-                width: 1,
-                height: "100%",
-                backgroundColor: "rgba(255, 0, 0, 0.5)",
-                pointerEvents: "none"
-              }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                top: mousePos.y,
-                left: 0,
-                width: "100%",
-                height: 1,
-                backgroundColor: "rgba(255, 0, 0, 0.5)",
-                pointerEvents: "none"
-              }
-            }
-          )
-        ] }),
+        mousePos && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, {}),
         /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "div",
           {
@@ -4474,7 +4468,7 @@ function DebugOverlay({ width, height, onZoomChange, initialZoom = 100 }) {
                 zoom,
                 "%"
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { color: "#888", fontSize: 16, marginTop: 4 }, children: "(scroll to zoom)" })
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { color: "#888", fontSize: 16, marginTop: 4 }, children: "(scroll to zoom, drag to pan)" })
             ]
           }
         )
@@ -4539,6 +4533,16 @@ function InstagramDmComposition({
 }) {
   const [fontsLoaded, setFontsLoaded] = (0, import_react8.useState)(false);
   const [zoom, setZoom] = (0, import_react8.useState)(100);
+  const scrollContainerRef = (0, import_react8.useRef)(null);
+  const handleZoomChange = (0, import_react8.useCallback)((newZoom, scrollX, scrollY) => {
+    setZoom(newZoom);
+    requestAnimationFrame(() => {
+      if (scrollContainerRef.current) {
+        scrollContainerRef.current.scrollLeft = Math.max(0, scrollX);
+        scrollContainerRef.current.scrollTop = Math.max(0, scrollY);
+      }
+    });
+  }, []);
   (0, import_react8.useEffect)(() => {
     const handle = (0, import_remotion14.delayRender)("Loading fonts...");
     preloadFonts().then(() => {
@@ -4564,120 +4568,140 @@ function InstagramDmComposition({
   const footerHeight = mergedFooter.height;
   const contentTop = headerHeight;
   const contentHeight = height - headerHeight - footerHeight;
-  const handleZoomChange = (0, import_react8.useCallback)((newZoom) => {
-    setZoom(newZoom);
-  }, []);
   const zoomScale = zoom / 100;
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     import_remotion14.AbsoluteFill,
     {
       style: {
         backgroundColor: colors.background,
-        fontFamily: '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", sans-serif',
-        overflow: "hidden"
+        fontFamily: '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", sans-serif'
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "div",
           {
+            ref: scrollContainerRef,
             style: {
               position: "absolute",
               top: 0,
               left: 0,
-              width,
-              height,
-              transform: `scale(${zoomScale})`,
-              transformOrigin: "top left"
+              right: 0,
+              bottom: 0,
+              overflow: showDebugOverlay ? "auto" : "hidden"
             },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(IgStatusBar, { config: mergedStatusBar, theme, width }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                IgHeader,
-                {
-                  config: mergedHeader,
-                  theme,
-                  recipient,
-                  avatarUrl: recipientAvatarUrl
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                "div",
-                {
-                  style: {
-                    position: "absolute",
-                    top: contentTop,
-                    left: 0,
-                    right: 0,
-                    height: contentHeight,
-                    overflow: "hidden"
-                  },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                    "div",
-                    {
-                      style: {
-                        position: "absolute",
-                        top: 0,
-                        left: 0,
-                        right: 0,
-                        bottom: 0,
-                        display: "flex",
-                        flexDirection: "column",
-                        justifyContent: "flex-end",
-                        paddingBottom: 16
-                      },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                        IgMessageList,
+            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              "div",
+              {
+                style: {
+                  width: width * zoomScale,
+                  height: height * zoomScale,
+                  position: "relative"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      width,
+                      height,
+                      transform: `scale(${zoomScale})`,
+                      transformOrigin: "top left"
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(IgStatusBar, { config: mergedStatusBar, theme, width }),
+                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                        IgHeader,
                         {
-                          messages,
-                          imageUrls,
-                          style: mergedStyle,
+                          config: mergedHeader,
                           theme,
-                          containerWidth: width - mergedStyle.sideMargin * 2,
-                          showTypingIndicator,
-                          readReceipt,
-                          recipientAvatarUrl,
-                          scrollOffset
+                          recipient,
+                          avatarUrl: recipientAvatarUrl
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                        "div",
+                        {
+                          style: {
+                            position: "absolute",
+                            top: contentTop,
+                            left: 0,
+                            right: 0,
+                            height: contentHeight,
+                            overflow: "hidden"
+                          },
+                          children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                            "div",
+                            {
+                              style: {
+                                position: "absolute",
+                                top: 0,
+                                left: 0,
+                                right: 0,
+                                bottom: 0,
+                                display: "flex",
+                                flexDirection: "column",
+                                justifyContent: "flex-end",
+                                paddingBottom: 16
+                              },
+                              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                                IgMessageList,
+                                {
+                                  messages,
+                                  imageUrls,
+                                  style: mergedStyle,
+                                  theme,
+                                  containerWidth: width - mergedStyle.sideMargin * 2,
+                                  showTypingIndicator,
+                                  readReceipt,
+                                  recipientAvatarUrl,
+                                  scrollOffset
+                                }
+                              )
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                        IgFooter,
+                        {
+                          config: mergedFooter,
+                          theme,
+                          compositionHeight: height
+                        }
+                      ),
+                      referenceImageUrl && referenceOpacity > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                        "div",
+                        {
+                          style: {
+                            position: "absolute",
+                            top: 0,
+                            left: 0,
+                            right: 0,
+                            bottom: 0,
+                            zIndex: 100,
+                            pointerEvents: "none",
+                            opacity: referenceOpacity / 100
+                          },
+                          children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                            import_remotion14.Img,
+                            {
+                              src: referenceImageUrl,
+                              style: {
+                                width: "100%",
+                                height: "100%",
+                                objectFit: "cover"
+                              }
+                            }
+                          )
                         }
                       )
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                IgFooter,
-                {
-                  config: mergedFooter,
-                  theme,
-                  compositionHeight: height
-                }
-              ),
-              referenceImageUrl && referenceOpacity > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                "div",
-                {
-                  style: {
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                    zIndex: 100,
-                    pointerEvents: "none",
-                    opacity: referenceOpacity / 100
-                  },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                    import_remotion14.Img,
-                    {
-                      src: referenceImageUrl,
-                      style: {
-                        width: "100%",
-                        height: "100%",
-                        objectFit: "cover"
-                      }
-                    }
-                  )
-                }
-              )
-            ]
+                    ]
+                  }
+                )
+              }
+            )
           }
         ),
         showDebugOverlay && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
@@ -4685,6 +4709,7 @@ function InstagramDmComposition({
           {
             width,
             height,
+            scrollContainerRef,
             onZoomChange: handleZoomChange,
             initialZoom: zoom
           }

package/dist/index.mjs

@@ -1833,7 +1833,7 @@ function ScreenshotAnimation({
 }
 
 // src/compositions/InstagramDmComposition/index.tsx
-import { useCallback as useCallback2, useEffect as useEffect3, useState as useState3 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useRef, useState as useState3 } from "react";
 import { AbsoluteFill as AbsoluteFill5, Img as Img9, continueRender as continueRender2, delayRender as delayRender2 } from "remotion";
 
 // src/compositions/InstagramDmComposition/theme.ts
@@ -3443,37 +3443,60 @@ function IgMessageList({
 }
 
 // src/compositions/InstagramDmComposition/components/DebugOverlay.tsx
-import { useState as useState2, useCallback, useEffect as useEffect2 } from "react";
+import { useState as useState2, useCallback } from "react";
 import { Fragment, jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
-function DebugOverlay({ width, height, onZoomChange, initialZoom = 100 }) {
+function DebugOverlay({
+  width,
+  height,
+  scrollContainerRef,
+  onZoomChange,
+  initialZoom = 100
+}) {
   const [mousePos, setMousePos] = useState2(null);
   const [zoom, setZoom] = useState2(initialZoom);
-  useEffect2(() => {
-    onZoomChange?.(zoom);
-  }, [zoom, onZoomChange]);
   const handleMouseMove = useCallback(
     (e) => {
+      const container = scrollContainerRef.current;
+      if (!container) return;
       const rect = e.currentTarget.getBoundingClientRect();
-      const scaleX = width / rect.width;
-      const scaleY = height / rect.height;
-      const x = Math.round((e.clientX - rect.left) * scaleX);
-      const y = Math.round((e.clientY - rect.top) * scaleY);
+      const currentZoom = zoom / 100;
+      const mouseViewX = e.clientX - rect.left;
+      const mouseViewY = e.clientY - rect.top;
+      const scrollLeft = container.scrollLeft;
+      const scrollTop = container.scrollTop;
+      const x = Math.round((scrollLeft + mouseViewX) / currentZoom);
+      const y = Math.round((scrollTop + mouseViewY) / currentZoom);
       setMousePos({ x, y });
     },
-    [width, height]
+    [width, height, zoom, scrollContainerRef]
   );
   const handleMouseLeave = useCallback(() => {
     setMousePos(null);
   }, []);
-  const handleWheel = useCallback((e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    const delta = e.deltaY > 0 ? -5 : 5;
-    setZoom((prev) => {
-      const newZoom = Math.max(10, Math.min(500, prev + delta));
-      return newZoom;
-    });
-  }, []);
+  const handleWheel = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const container = scrollContainerRef.current;
+      if (!container) return;
+      const rect = e.currentTarget.getBoundingClientRect();
+      const mouseScreenX = e.clientX - rect.left;
+      const mouseScreenY = e.clientY - rect.top;
+      const scrollLeft = container.scrollLeft;
+      const scrollTop = container.scrollTop;
+      const oldZoom = zoom / 100;
+      const canvasX = (scrollLeft + mouseScreenX) / oldZoom;
+      const canvasY = (scrollTop + mouseScreenY) / oldZoom;
+      const delta = e.deltaY > 0 ? -5 : 5;
+      const newZoomPercent = Math.max(10, Math.min(500, zoom + delta));
+      const newZoom = newZoomPercent / 100;
+      const newScrollLeft = canvasX * newZoom - mouseScreenX;
+      const newScrollTop = canvasY * newZoom - mouseScreenY;
+      setZoom(newZoomPercent);
+      onZoomChange?.(newZoomPercent, newScrollLeft, newScrollTop);
+    },
+    [zoom, onZoomChange, scrollContainerRef]
+  );
   return /* @__PURE__ */ jsxs15(
     "div",
     {
@@ -3490,36 +3513,7 @@ function DebugOverlay({ width, height, onZoomChange, initialZoom = 100 }) {
       onMouseLeave: handleMouseLeave,
       onWheel: handleWheel,
       children: [
-        mousePos && /* @__PURE__ */ jsxs15(Fragment, { children: [
-          /* @__PURE__ */ jsx22(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                top: 0,
-                left: mousePos.x,
-                width: 1,
-                height: "100%",
-                backgroundColor: "rgba(255, 0, 0, 0.5)",
-                pointerEvents: "none"
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx22(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                top: mousePos.y,
-                left: 0,
-                width: "100%",
-                height: 1,
-                backgroundColor: "rgba(255, 0, 0, 0.5)",
-                pointerEvents: "none"
-              }
-            }
-          )
-        ] }),
+        mousePos && /* @__PURE__ */ jsx22(Fragment, {}),
         /* @__PURE__ */ jsx22(
           "div",
           {
@@ -3578,7 +3572,7 @@ function DebugOverlay({ width, height, onZoomChange, initialZoom = 100 }) {
                 zoom,
                 "%"
               ] }),
-              /* @__PURE__ */ jsx22("div", { style: { color: "#888", fontSize: 16, marginTop: 4 }, children: "(scroll to zoom)" })
+              /* @__PURE__ */ jsx22("div", { style: { color: "#888", fontSize: 16, marginTop: 4 }, children: "(scroll to zoom, drag to pan)" })
             ]
           }
         )
@@ -3643,7 +3637,17 @@ function InstagramDmComposition({
 }) {
   const [fontsLoaded, setFontsLoaded] = useState3(false);
   const [zoom, setZoom] = useState3(100);
-  useEffect3(() => {
+  const scrollContainerRef = useRef(null);
+  const handleZoomChange = useCallback2((newZoom, scrollX, scrollY) => {
+    setZoom(newZoom);
+    requestAnimationFrame(() => {
+      if (scrollContainerRef.current) {
+        scrollContainerRef.current.scrollLeft = Math.max(0, scrollX);
+        scrollContainerRef.current.scrollTop = Math.max(0, scrollY);
+      }
+    });
+  }, []);
+  useEffect2(() => {
     const handle = delayRender2("Loading fonts...");
     preloadFonts().then(() => {
       setFontsLoaded(true);
@@ -3668,120 +3672,140 @@ function InstagramDmComposition({
   const footerHeight = mergedFooter.height;
   const contentTop = headerHeight;
   const contentHeight = height - headerHeight - footerHeight;
-  const handleZoomChange = useCallback2((newZoom) => {
-    setZoom(newZoom);
-  }, []);
   const zoomScale = zoom / 100;
   return /* @__PURE__ */ jsxs16(
     AbsoluteFill5,
     {
       style: {
         backgroundColor: colors.background,
-        fontFamily: '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", sans-serif',
-        overflow: "hidden"
+        fontFamily: '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", sans-serif'
       },
       children: [
-        /* @__PURE__ */ jsxs16(
+        /* @__PURE__ */ jsx23(
           "div",
           {
+            ref: scrollContainerRef,
             style: {
               position: "absolute",
               top: 0,
               left: 0,
-              width,
-              height,
-              transform: `scale(${zoomScale})`,
-              transformOrigin: "top left"
+              right: 0,
+              bottom: 0,
+              overflow: showDebugOverlay ? "auto" : "hidden"
             },
-            children: [
-              /* @__PURE__ */ jsx23(IgStatusBar, { config: mergedStatusBar, theme, width }),
-              /* @__PURE__ */ jsx23(
-                IgHeader,
-                {
-                  config: mergedHeader,
-                  theme,
-                  recipient,
-                  avatarUrl: recipientAvatarUrl
-                }
-              ),
-              /* @__PURE__ */ jsx23(
-                "div",
-                {
-                  style: {
-                    position: "absolute",
-                    top: contentTop,
-                    left: 0,
-                    right: 0,
-                    height: contentHeight,
-                    overflow: "hidden"
-                  },
-                  children: /* @__PURE__ */ jsx23(
-                    "div",
-                    {
-                      style: {
-                        position: "absolute",
-                        top: 0,
-                        left: 0,
-                        right: 0,
-                        bottom: 0,
-                        display: "flex",
-                        flexDirection: "column",
-                        justifyContent: "flex-end",
-                        paddingBottom: 16
-                      },
-                      children: /* @__PURE__ */ jsx23(
-                        IgMessageList,
+            children: /* @__PURE__ */ jsx23(
+              "div",
+              {
+                style: {
+                  width: width * zoomScale,
+                  height: height * zoomScale,
+                  position: "relative"
+                },
+                children: /* @__PURE__ */ jsxs16(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      width,
+                      height,
+                      transform: `scale(${zoomScale})`,
+                      transformOrigin: "top left"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx23(IgStatusBar, { config: mergedStatusBar, theme, width }),
+                      /* @__PURE__ */ jsx23(
+                        IgHeader,
                         {
-                          messages,
-                          imageUrls,
-                          style: mergedStyle,
+                          config: mergedHeader,
                           theme,
-                          containerWidth: width - mergedStyle.sideMargin * 2,
-                          showTypingIndicator,
-                          readReceipt,
-                          recipientAvatarUrl,
-                          scrollOffset
+                          recipient,
+                          avatarUrl: recipientAvatarUrl
+                        }
+                      ),
+                      /* @__PURE__ */ jsx23(
+                        "div",
+                        {
+                          style: {
+                            position: "absolute",
+                            top: contentTop,
+                            left: 0,
+                            right: 0,
+                            height: contentHeight,
+                            overflow: "hidden"
+                          },
+                          children: /* @__PURE__ */ jsx23(
+                            "div",
+                            {
+                              style: {
+                                position: "absolute",
+                                top: 0,
+                                left: 0,
+                                right: 0,
+                                bottom: 0,
+                                display: "flex",
+                                flexDirection: "column",
+                                justifyContent: "flex-end",
+                                paddingBottom: 16
+                              },
+                              children: /* @__PURE__ */ jsx23(
+                                IgMessageList,
+                                {
+                                  messages,
+                                  imageUrls,
+                                  style: mergedStyle,
+                                  theme,
+                                  containerWidth: width - mergedStyle.sideMargin * 2,
+                                  showTypingIndicator,
+                                  readReceipt,
+                                  recipientAvatarUrl,
+                                  scrollOffset
+                                }
+                              )
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx23(
+                        IgFooter,
+                        {
+                          config: mergedFooter,
+                          theme,
+                          compositionHeight: height
+                        }
+                      ),
+                      referenceImageUrl && referenceOpacity > 0 && /* @__PURE__ */ jsx23(
+                        "div",
+                        {
+                          style: {
+                            position: "absolute",
+                            top: 0,
+                            left: 0,
+                            right: 0,
+                            bottom: 0,
+                            zIndex: 100,
+                            pointerEvents: "none",
+                            opacity: referenceOpacity / 100
+                          },
+                          children: /* @__PURE__ */ jsx23(
+                            Img9,
+                            {
+                              src: referenceImageUrl,
+                              style: {
+                                width: "100%",
+                                height: "100%",
+                                objectFit: "cover"
+                              }
+                            }
+                          )
                         }
                       )
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx23(
-                IgFooter,
-                {
-                  config: mergedFooter,
-                  theme,
-                  compositionHeight: height
-                }
-              ),
-              referenceImageUrl && referenceOpacity > 0 && /* @__PURE__ */ jsx23(
-                "div",
-                {
-                  style: {
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                    zIndex: 100,
-                    pointerEvents: "none",
-                    opacity: referenceOpacity / 100
-                  },
-                  children: /* @__PURE__ */ jsx23(
-                    Img9,
-                    {
-                      src: referenceImageUrl,
-                      style: {
-                        width: "100%",
-                        height: "100%",
-                        objectFit: "cover"
-                      }
-                    }
-                  )
-                }
-              )
-            ]
+                    ]
+                  }
+                )
+              }
+            )
           }
         ),
         showDebugOverlay && /* @__PURE__ */ jsx23(
@@ -3789,6 +3813,7 @@ function InstagramDmComposition({
           {
             width,
             height,
+            scrollContainerRef,
             onZoomChange: handleZoomChange,
             initialZoom: zoom
           }
@@ -3799,10 +3824,10 @@ function InstagramDmComposition({
 }
 
 // src/hooks/index.ts
-import { useEffect as useEffect4, useState as useState4, useMemo as useMemo7 } from "react";
+import { useEffect as useEffect3, useState as useState4, useMemo as useMemo7 } from "react";
 function useFontsLoaded() {
   const [loaded, setLoaded] = useState4(areFontsLoaded());
-  useEffect4(() => {
+  useEffect3(() => {
     if (!loaded) {
       preloadFonts().then(() => setLoaded(true)).catch(console.error);
     }
@@ -3811,7 +3836,7 @@ function useFontsLoaded() {
 }
 function useImageLoader(src) {
   const [image, setImage] = useState4(null);
-  useEffect4(() => {
+  useEffect3(() => {
     if (!src) {
       setImage(null);
       return;
@@ -3833,7 +3858,7 @@ function useImageLoader(src) {
 function useImagePreloader(sources) {
   const [images, setImages] = useState4({});
   const [loaded, setLoaded] = useState4(false);
-  useEffect4(() => {
+  useEffect3(() => {
     const entries = Object.entries(sources);
     if (entries.length === 0) {
       setLoaded(true);

package/package.json

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