ugcinc-render 1.8.61 → 1.8.62

package/dist/index.js

@@ -4347,7 +4347,9 @@ function DebugOverlay({
   zoom,
   scrollX,
   scrollY,
-  onZoomChange
+  referenceVisible,
+  onZoomChange,
+  onToggleReference
 }) {
   const [mousePos, setMousePos] = (0, import_react7.useState)(null);
   const [viewportPos, setViewportPos] = (0, import_react7.useState)(null);
@@ -4386,8 +4388,8 @@ function DebugOverlay({
       const { x: vpX, y: vpY } = viewportPos;
       const canvasX = (vpX + scrollX) / zoomScale;
       const canvasY = (vpY + scrollY) / zoomScale;
-      const delta = e.deltaY > 0 ? -5 : 5;
-      const newZoom = Math.max(100, Math.min(400, zoom + delta));
+      const delta = e.deltaY > 0 ? -15 : 15;
+      const newZoom = Math.max(100, Math.min(1e4, zoom + delta));
       const newZoomScale = newZoom / 100;
       const newScrollX = Math.max(0, canvasX * newZoomScale - vpX);
       const newScrollY = Math.max(0, canvasY * newZoomScale - vpY);
@@ -4398,19 +4400,24 @@ function DebugOverlay({
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
     {
+      "data-debug-overlay-root": true,
       style: {
         position: "absolute",
         top: 0,
         left: 0,
         right: 0,
         bottom: 0,
-        zIndex: 200,
-        cursor: "crosshair"
+        zIndex: 200
       },
       onMouseMove: handleMouseMove,
       onMouseLeave: handleMouseLeave,
       onWheel: handleWheel,
       children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("style", { children: `
+        [data-debug-overlay-root], [data-debug-overlay-root] * {
+          cursor: none !important;
+        }
+      ` }),
         screenPosPercent && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "div",
@@ -4421,7 +4428,7 @@ function DebugOverlay({
                 left: `${screenPosPercent.x}%`,
                 width: 1,
                 height: "100%",
-                backgroundColor: "rgba(255, 0, 0, 0.6)",
+                backgroundColor: "#FF0000",
                 pointerEvents: "none"
               }
             }
@@ -4435,13 +4442,13 @@ function DebugOverlay({
                 left: 0,
                 width: "100%",
                 height: 1,
-                backgroundColor: "rgba(255, 0, 0, 0.6)",
+                backgroundColor: "#FF0000",
                 pointerEvents: "none"
               }
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        mousePos && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
           "div",
           {
             style: {
@@ -4459,7 +4466,7 @@ function DebugOverlay({
               border: "2px solid rgba(0, 255, 0, 0.5)",
               minWidth: 200
             },
-            children: mousePos ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+            children: [
               /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
                 "X: ",
                 mousePos.x
@@ -4468,7 +4475,7 @@ function DebugOverlay({
                 "Y: ",
                 mousePos.y
               ] })
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: "Move mouse over preview" })
+            ]
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
@@ -4485,21 +4492,41 @@ function DebugOverlay({
               fontWeight: "bold",
               padding: "12px 20px",
               borderRadius: 8,
-              pointerEvents: "none",
               border: "2px solid rgba(255, 255, 0, 0.5)"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { pointerEvents: "none" }, children: [
                 width,
                 " x ",
                 height
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { color: "#00FFFF", marginTop: 8 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { color: "#00FFFF", marginTop: 8, pointerEvents: "none" }, children: [
                 "Zoom: ",
                 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, pointerEvents: "none" }, children: "(scroll to zoom)" }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { color: "#FF00FF", fontSize: 20, marginTop: 8, pointerEvents: "none", fontWeight: "bold" }, children: "VERSION: 3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                "button",
+                {
+                  onClick: onToggleReference,
+                  style: {
+                    marginTop: 12,
+                    padding: "8px 16px",
+                    fontSize: 16,
+                    fontWeight: "bold",
+                    fontFamily: "monospace",
+                    backgroundColor: referenceVisible ? "#FF6B6B" : "#4CAF50",
+                    color: "#FFFFFF",
+                    border: "none",
+                    borderRadius: 4,
+                    cursor: "none",
+                    width: "100%"
+                  },
+                  children: referenceVisible ? "Hide Reference" : "Show Reference"
+                }
+              )
             ]
           }
         )
@@ -4562,15 +4589,40 @@ function InstagramDmComposition({
   footerConfig,
   scrollOffset
 }) {
+  const clampedReferenceOpacity = Math.max(0, Math.min(100, referenceOpacity));
+  const clampedBatteryLevel = Math.max(0, Math.min(100, statusBar?.batteryLevel ?? 100));
   const [fontsLoaded, setFontsLoaded] = (0, import_react8.useState)(false);
   const [zoom, setZoom] = (0, import_react8.useState)(100);
   const [scrollX, setScrollX] = (0, import_react8.useState)(0);
   const [scrollY, setScrollY] = (0, import_react8.useState)(0);
+  const [referenceVisible, setReferenceVisible] = (0, import_react8.useState)(true);
   const handleZoomChange = (0, import_react8.useCallback)((newZoom, newScrollX, newScrollY) => {
     setZoom(newZoom);
     setScrollX(newScrollX);
     setScrollY(newScrollY);
   }, []);
+  const handleToggleReference = (0, import_react8.useCallback)(() => {
+    setReferenceVisible((prev) => !prev);
+  }, []);
+  (0, import_react8.useEffect)(() => {
+    const interceptBeforeUnload = (e) => {
+      e.stopImmediatePropagation();
+    };
+    window.addEventListener("beforeunload", interceptBeforeUnload, { capture: true });
+    try {
+      window.onbeforeunload = null;
+      if (window.parent && window.parent !== window) {
+        window.parent.onbeforeunload = null;
+      }
+      if (window.top && window.top !== window) {
+        window.top.onbeforeunload = null;
+      }
+    } catch {
+    }
+    return () => {
+      window.removeEventListener("beforeunload", interceptBeforeUnload, { capture: true });
+    };
+  }, []);
   (0, import_react8.useEffect)(() => {
     const handle = (0, import_remotion14.delayRender)("Loading fonts...");
     preloadFonts().then(() => {
@@ -4585,7 +4637,10 @@ function InstagramDmComposition({
   if (!fontsLoaded) {
     return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_remotion14.AbsoluteFill, {});
   }
-  const mergedStatusBar = mergeStatusBarConfig(statusBar);
+  const mergedStatusBar = {
+    ...mergeStatusBarConfig(statusBar),
+    batteryLevel: clampedBatteryLevel
+  };
   const mergedStyle = mergeMessageStyle(messageStyle);
   const mergedHeader = mergeHeaderConfig(headerConfig);
   const mergedFooter = mergeFooterConfig(footerConfig);
@@ -4659,7 +4714,7 @@ function InstagramDmComposition({
         compositionHeight: height
       }
     ),
-    referenceImageUrl && referenceOpacity > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    referenceImageUrl && (showDebugOverlay ? referenceVisible : clampedReferenceOpacity > 0) && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "div",
       {
         style: {
@@ -4670,7 +4725,7 @@ function InstagramDmComposition({
           bottom: 0,
           zIndex: 100,
           pointerEvents: "none",
-          opacity: referenceOpacity / 100
+          opacity: showDebugOverlay ? 1 : clampedReferenceOpacity / 100
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           import_remotion14.Img,
@@ -4718,7 +4773,9 @@ function InstagramDmComposition({
             zoom,
             scrollX,
             scrollY,
-            onZoomChange: handleZoomChange
+            referenceVisible,
+            onZoomChange: handleZoomChange,
+            onToggleReference: handleToggleReference
           }
         )
       ]
@@ -5202,7 +5259,7 @@ var igStatusBarSchema = import_zod.z.object({
   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"),
+  batteryLevel: import_zod.z.number().gte(0).lte(100).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({
@@ -5277,7 +5334,7 @@ var instagramDmSchema = import_zod.z.object({
   showDebugOverlay: import_zod.z.boolean().optional().default(true).describe("Show debug overlay with mouse coordinates"),
   // Reference overlay
   referenceImageUrl: import_zod.z.string().optional().default("https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/IMG_3171-DmKgZAYCYJpLxiZjJBYYCk4mynmjkv.png").describe("Reference screenshot URL"),
-  referenceOpacity: import_zod.z.number().optional().default(50).describe("Reference overlay opacity (0-100)"),
+  referenceOpacity: import_zod.z.number().min(0).max(100).optional().default(50).describe("Reference overlay opacity (0-100)"),
   // 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)"),

package/dist/index.mjs

@@ -3451,7 +3451,9 @@ function DebugOverlay({
   zoom,
   scrollX,
   scrollY,
-  onZoomChange
+  referenceVisible,
+  onZoomChange,
+  onToggleReference
 }) {
   const [mousePos, setMousePos] = useState2(null);
   const [viewportPos, setViewportPos] = useState2(null);
@@ -3490,8 +3492,8 @@ function DebugOverlay({
       const { x: vpX, y: vpY } = viewportPos;
       const canvasX = (vpX + scrollX) / zoomScale;
       const canvasY = (vpY + scrollY) / zoomScale;
-      const delta = e.deltaY > 0 ? -5 : 5;
-      const newZoom = Math.max(100, Math.min(400, zoom + delta));
+      const delta = e.deltaY > 0 ? -15 : 15;
+      const newZoom = Math.max(100, Math.min(1e4, zoom + delta));
       const newZoomScale = newZoom / 100;
       const newScrollX = Math.max(0, canvasX * newZoomScale - vpX);
       const newScrollY = Math.max(0, canvasY * newZoomScale - vpY);
@@ -3502,19 +3504,24 @@ function DebugOverlay({
   return /* @__PURE__ */ jsxs15(
     "div",
     {
+      "data-debug-overlay-root": true,
       style: {
         position: "absolute",
         top: 0,
         left: 0,
         right: 0,
         bottom: 0,
-        zIndex: 200,
-        cursor: "crosshair"
+        zIndex: 200
       },
       onMouseMove: handleMouseMove,
       onMouseLeave: handleMouseLeave,
       onWheel: handleWheel,
       children: [
+        /* @__PURE__ */ jsx22("style", { children: `
+        [data-debug-overlay-root], [data-debug-overlay-root] * {
+          cursor: none !important;
+        }
+      ` }),
         screenPosPercent && /* @__PURE__ */ jsxs15(Fragment, { children: [
           /* @__PURE__ */ jsx22(
             "div",
@@ -3525,7 +3532,7 @@ function DebugOverlay({
                 left: `${screenPosPercent.x}%`,
                 width: 1,
                 height: "100%",
-                backgroundColor: "rgba(255, 0, 0, 0.6)",
+                backgroundColor: "#FF0000",
                 pointerEvents: "none"
               }
             }
@@ -3539,13 +3546,13 @@ function DebugOverlay({
                 left: 0,
                 width: "100%",
                 height: 1,
-                backgroundColor: "rgba(255, 0, 0, 0.6)",
+                backgroundColor: "#FF0000",
                 pointerEvents: "none"
               }
             }
           )
         ] }),
-        /* @__PURE__ */ jsx22(
+        mousePos && /* @__PURE__ */ jsxs15(
           "div",
           {
             style: {
@@ -3563,7 +3570,7 @@ function DebugOverlay({
               border: "2px solid rgba(0, 255, 0, 0.5)",
               minWidth: 200
             },
-            children: mousePos ? /* @__PURE__ */ jsxs15(Fragment, { children: [
+            children: [
               /* @__PURE__ */ jsxs15("div", { children: [
                 "X: ",
                 mousePos.x
@@ -3572,7 +3579,7 @@ function DebugOverlay({
                 "Y: ",
                 mousePos.y
               ] })
-            ] }) : /* @__PURE__ */ jsx22("div", { children: "Move mouse over preview" })
+            ]
           }
         ),
         /* @__PURE__ */ jsxs15(
@@ -3589,21 +3596,41 @@ function DebugOverlay({
               fontWeight: "bold",
               padding: "12px 20px",
               borderRadius: 8,
-              pointerEvents: "none",
               border: "2px solid rgba(255, 255, 0, 0.5)"
             },
             children: [
-              /* @__PURE__ */ jsxs15("div", { children: [
+              /* @__PURE__ */ jsxs15("div", { style: { pointerEvents: "none" }, children: [
                 width,
                 " x ",
                 height
               ] }),
-              /* @__PURE__ */ jsxs15("div", { style: { color: "#00FFFF", marginTop: 8 }, children: [
+              /* @__PURE__ */ jsxs15("div", { style: { color: "#00FFFF", marginTop: 8, pointerEvents: "none" }, children: [
                 "Zoom: ",
                 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, pointerEvents: "none" }, children: "(scroll to zoom)" }),
+              /* @__PURE__ */ jsx22("div", { style: { color: "#FF00FF", fontSize: 20, marginTop: 8, pointerEvents: "none", fontWeight: "bold" }, children: "VERSION: 3" }),
+              /* @__PURE__ */ jsx22(
+                "button",
+                {
+                  onClick: onToggleReference,
+                  style: {
+                    marginTop: 12,
+                    padding: "8px 16px",
+                    fontSize: 16,
+                    fontWeight: "bold",
+                    fontFamily: "monospace",
+                    backgroundColor: referenceVisible ? "#FF6B6B" : "#4CAF50",
+                    color: "#FFFFFF",
+                    border: "none",
+                    borderRadius: 4,
+                    cursor: "none",
+                    width: "100%"
+                  },
+                  children: referenceVisible ? "Hide Reference" : "Show Reference"
+                }
+              )
             ]
           }
         )
@@ -3666,15 +3693,40 @@ function InstagramDmComposition({
   footerConfig,
   scrollOffset
 }) {
+  const clampedReferenceOpacity = Math.max(0, Math.min(100, referenceOpacity));
+  const clampedBatteryLevel = Math.max(0, Math.min(100, statusBar?.batteryLevel ?? 100));
   const [fontsLoaded, setFontsLoaded] = useState3(false);
   const [zoom, setZoom] = useState3(100);
   const [scrollX, setScrollX] = useState3(0);
   const [scrollY, setScrollY] = useState3(0);
+  const [referenceVisible, setReferenceVisible] = useState3(true);
   const handleZoomChange = useCallback2((newZoom, newScrollX, newScrollY) => {
     setZoom(newZoom);
     setScrollX(newScrollX);
     setScrollY(newScrollY);
   }, []);
+  const handleToggleReference = useCallback2(() => {
+    setReferenceVisible((prev) => !prev);
+  }, []);
+  useEffect2(() => {
+    const interceptBeforeUnload = (e) => {
+      e.stopImmediatePropagation();
+    };
+    window.addEventListener("beforeunload", interceptBeforeUnload, { capture: true });
+    try {
+      window.onbeforeunload = null;
+      if (window.parent && window.parent !== window) {
+        window.parent.onbeforeunload = null;
+      }
+      if (window.top && window.top !== window) {
+        window.top.onbeforeunload = null;
+      }
+    } catch {
+    }
+    return () => {
+      window.removeEventListener("beforeunload", interceptBeforeUnload, { capture: true });
+    };
+  }, []);
   useEffect2(() => {
     const handle = delayRender2("Loading fonts...");
     preloadFonts().then(() => {
@@ -3689,7 +3741,10 @@ function InstagramDmComposition({
   if (!fontsLoaded) {
     return /* @__PURE__ */ jsx23(AbsoluteFill5, {});
   }
-  const mergedStatusBar = mergeStatusBarConfig(statusBar);
+  const mergedStatusBar = {
+    ...mergeStatusBarConfig(statusBar),
+    batteryLevel: clampedBatteryLevel
+  };
   const mergedStyle = mergeMessageStyle(messageStyle);
   const mergedHeader = mergeHeaderConfig(headerConfig);
   const mergedFooter = mergeFooterConfig(footerConfig);
@@ -3763,7 +3818,7 @@ function InstagramDmComposition({
         compositionHeight: height
       }
     ),
-    referenceImageUrl && referenceOpacity > 0 && /* @__PURE__ */ jsx23(
+    referenceImageUrl && (showDebugOverlay ? referenceVisible : clampedReferenceOpacity > 0) && /* @__PURE__ */ jsx23(
       "div",
       {
         style: {
@@ -3774,7 +3829,7 @@ function InstagramDmComposition({
           bottom: 0,
           zIndex: 100,
           pointerEvents: "none",
-          opacity: referenceOpacity / 100
+          opacity: showDebugOverlay ? 1 : clampedReferenceOpacity / 100
         },
         children: /* @__PURE__ */ jsx23(
           Img9,
@@ -3822,7 +3877,9 @@ function InstagramDmComposition({
             zoom,
             scrollX,
             scrollY,
-            onZoomChange: handleZoomChange
+            referenceVisible,
+            onZoomChange: handleZoomChange,
+            onToggleReference: handleToggleReference
           }
         )
       ]
@@ -4023,7 +4080,7 @@ var igStatusBarSchema = z.object({
   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"),
+  batteryLevel: z.number().gte(0).lte(100).optional().default(100).describe("Battery level 0-100"),
   isCharging: z.boolean().optional().default(false).describe("Is charging")
 });
 var igHeaderConfigSchema = z.object({
@@ -4098,7 +4155,7 @@ var instagramDmSchema = z.object({
   showDebugOverlay: z.boolean().optional().default(true).describe("Show debug overlay with mouse coordinates"),
   // Reference overlay
   referenceImageUrl: z.string().optional().default("https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/IMG_3171-DmKgZAYCYJpLxiZjJBYYCk4mynmjkv.png").describe("Reference screenshot URL"),
-  referenceOpacity: z.number().optional().default(50).describe("Reference overlay opacity (0-100)"),
+  referenceOpacity: z.number().min(0).max(100).optional().default(50).describe("Reference overlay opacity (0-100)"),
   // Canvas
   width: z.number().optional().default(1206).describe("Canvas width (px)"),
   height: z.number().optional().default(2622).describe("Canvas height (px)"),

package/package.json

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