ugcinc-render 1.8.75 → 1.8.77

package/dist/index.js

@@ -2893,6 +2893,19 @@ function DebugOverlay({
   const [isDragging, setIsDragging] = (0, import_react7.useState)(false);
   const lastDragPos = (0, import_react7.useRef)(null);
   const zoomScale = zoom / 100;
+  (0, import_react7.useEffect)(() => {
+    if (mousePos === null) return;
+    const snappedScreenX = (mousePos.x + 0.5) * zoomScale - scrollX;
+    const snappedScreenY = (mousePos.y + 0.5) * zoomScale - scrollY;
+    const pixelWidth = zoomScale;
+    const pixelHeight = zoomScale;
+    setCrosshairPos({
+      xPercent: snappedScreenX / width * 100,
+      yPercent: snappedScreenY / height * 100,
+      pixelWidthPercent: pixelWidth / width * 100,
+      pixelHeightPercent: pixelHeight / height * 100
+    });
+  }, [mousePos, zoomScale, scrollX, scrollY, width, height]);
   const handleMouseMove = (0, import_react7.useCallback)(
     (e) => {
       const rect = e.currentTarget.getBoundingClientRect();
@@ -2908,16 +2921,6 @@ function DebugOverlay({
       const snappedCanvasX = Math.floor(canvasX);
       const snappedCanvasY = Math.floor(canvasY);
       setMousePos({ x: snappedCanvasX, y: snappedCanvasY });
-      const snappedScreenX = (snappedCanvasX + 0.5) * zoomScale - scrollX;
-      const snappedScreenY = (snappedCanvasY + 0.5) * zoomScale - scrollY;
-      const pixelWidth = zoomScale;
-      const pixelHeight = zoomScale;
-      setCrosshairPos({
-        xPercent: snappedScreenX / width * 100,
-        yPercent: snappedScreenY / height * 100,
-        pixelWidthPercent: pixelWidth / width * 100,
-        pixelHeightPercent: pixelHeight / height * 100
-      });
       if (isDragging && lastDragPos.current) {
         const deltaX = (e.clientX - lastDragPos.current.x) * remotionScaleX;
         const deltaY = (e.clientY - lastDragPos.current.y) * remotionScaleY;
@@ -3278,7 +3281,7 @@ function InstagramDmComposition({
                     bottom: 0,
                     zIndex: 100,
                     pointerEvents: "none",
-                    opacity: showDebugOverlay ? 1 : clampedReferenceOpacity / 100
+                    opacity: clampedReferenceOpacity / 100
                   },
                   children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                     import_remotion9.Img,

package/dist/index.mjs

@@ -1946,7 +1946,7 @@ function ScreenshotAnimation({
 }
 
 // src/compositions/InstagramDmComposition/index.tsx
-import { useCallback as useCallback2, useEffect as useEffect2, useState as useState3 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect3, useState as useState3 } from "react";
 import { AbsoluteFill as AbsoluteFill5, Img as Img5, continueRender as continueRender2, delayRender as delayRender2 } from "remotion";
 
 // src/compositions/InstagramDmComposition/theme.ts
@@ -1983,7 +1983,7 @@ function getThemeColors(theme) {
 }
 
 // src/compositions/InstagramDmComposition/components/DebugOverlay.tsx
-import { useState as useState2, useCallback, useRef } from "react";
+import { useState as useState2, useCallback, useRef, useEffect as useEffect2 } from "react";
 import { Fragment, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function DebugOverlay({
   width,
@@ -2001,6 +2001,19 @@ function DebugOverlay({
   const [isDragging, setIsDragging] = useState2(false);
   const lastDragPos = useRef(null);
   const zoomScale = zoom / 100;
+  useEffect2(() => {
+    if (mousePos === null) return;
+    const snappedScreenX = (mousePos.x + 0.5) * zoomScale - scrollX;
+    const snappedScreenY = (mousePos.y + 0.5) * zoomScale - scrollY;
+    const pixelWidth = zoomScale;
+    const pixelHeight = zoomScale;
+    setCrosshairPos({
+      xPercent: snappedScreenX / width * 100,
+      yPercent: snappedScreenY / height * 100,
+      pixelWidthPercent: pixelWidth / width * 100,
+      pixelHeightPercent: pixelHeight / height * 100
+    });
+  }, [mousePos, zoomScale, scrollX, scrollY, width, height]);
   const handleMouseMove = useCallback(
     (e) => {
       const rect = e.currentTarget.getBoundingClientRect();
@@ -2016,16 +2029,6 @@ function DebugOverlay({
       const snappedCanvasX = Math.floor(canvasX);
       const snappedCanvasY = Math.floor(canvasY);
       setMousePos({ x: snappedCanvasX, y: snappedCanvasY });
-      const snappedScreenX = (snappedCanvasX + 0.5) * zoomScale - scrollX;
-      const snappedScreenY = (snappedCanvasY + 0.5) * zoomScale - scrollY;
-      const pixelWidth = zoomScale;
-      const pixelHeight = zoomScale;
-      setCrosshairPos({
-        xPercent: snappedScreenX / width * 100,
-        yPercent: snappedScreenY / height * 100,
-        pixelWidthPercent: pixelWidth / width * 100,
-        pixelHeightPercent: pixelHeight / height * 100
-      });
       if (isDragging && lastDragPos.current) {
         const deltaX = (e.clientX - lastDragPos.current.x) * remotionScaleX;
         const deltaY = (e.clientY - lastDragPos.current.y) * remotionScaleY;
@@ -2317,7 +2320,7 @@ function InstagramDmComposition({
   const handleToggleReference = useCallback2(() => {
     setReferenceVisible((prev) => !prev);
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     const interceptBeforeUnload = (e) => {
       e.stopImmediatePropagation();
     };
@@ -2336,7 +2339,7 @@ function InstagramDmComposition({
       window.removeEventListener("beforeunload", interceptBeforeUnload, { capture: true });
     };
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     const handle = delayRender2("Loading fonts...");
     preloadFonts().then(() => {
       setFontsLoaded(true);
@@ -2386,7 +2389,7 @@ function InstagramDmComposition({
                     bottom: 0,
                     zIndex: 100,
                     pointerEvents: "none",
-                    opacity: showDebugOverlay ? 1 : clampedReferenceOpacity / 100
+                    opacity: clampedReferenceOpacity / 100
                   },
                   children: /* @__PURE__ */ jsx11(
                     Img5,
@@ -2801,10 +2804,10 @@ function MediaBubble({
 }
 
 // src/hooks/index.ts
-import { useEffect as useEffect3, useState as useState4, useMemo as useMemo7 } from "react";
+import { useEffect as useEffect4, useState as useState4, useMemo as useMemo7 } from "react";
 function useFontsLoaded() {
   const [loaded, setLoaded] = useState4(areFontsLoaded());
-  useEffect3(() => {
+  useEffect4(() => {
     if (!loaded) {
       preloadFonts().then(() => setLoaded(true)).catch(console.error);
     }
@@ -2813,7 +2816,7 @@ function useFontsLoaded() {
 }
 function useImageLoader(src) {
   const [image, setImage] = useState4(null);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!src) {
       setImage(null);
       return;
@@ -2835,7 +2838,7 @@ function useImageLoader(src) {
 function useImagePreloader(sources) {
   const [images, setImages] = useState4({});
   const [loaded, setLoaded] = useState4(false);
-  useEffect3(() => {
+  useEffect4(() => {
     const entries = Object.entries(sources);
     if (entries.length === 0) {
       setLoaded(true);

package/package.json

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