ugcinc-render 1.8.83 → 1.8.85

package/dist/index.js

@@ -2885,9 +2885,11 @@ function DebugOverlay({
   scrollY,
   referenceVisible,
   onZoomChange,
-  onToggleReference
+  onToggleReference,
+  currentProps
 }) {
   const [mousePos, setMousePos] = (0, import_react7.useState)(null);
+  const [copyFeedback, setCopyFeedback] = (0, import_react7.useState)(null);
   const [crosshairPos, setCrosshairPos] = (0, import_react7.useState)(null);
   const [viewportPos, setViewportPos] = (0, import_react7.useState)(null);
   const [pinnedPos, setPinnedPos] = (0, import_react7.useState)(null);
@@ -2995,6 +2997,23 @@ function DebugOverlay({
     },
     [zoom, zoomScale, scrollX, scrollY, viewportPos, onZoomChange]
   );
+  const handleCopyDefaults = (0, import_react7.useCallback)(() => {
+    if (!currentProps) return;
+    const lines = Object.entries(currentProps).filter(([key]) => !["showDebugOverlay", "referenceImageUrl", "showReferenceImage", "referenceOpacity", "durationInFrames", "fps"].includes(key)).map(([key, value]) => {
+      if (typeof value === "string") {
+        return `  ${key}: '${value}',`;
+      }
+      return `  ${key}: ${value},`;
+    });
+    const code = lines.join("\n");
+    navigator.clipboard.writeText(code).then(() => {
+      setCopyFeedback("Copied!");
+      setTimeout(() => setCopyFeedback(null), 2e3);
+    }).catch(() => {
+      setCopyFeedback("Failed to copy");
+      setTimeout(() => setCopyFeedback(null), 2e3);
+    });
+  }, [currentProps]);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
@@ -3180,6 +3199,24 @@ function DebugOverlay({
                     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "#FFFFFF", fontSize: 16 }, children: "Show Reference" })
                   ]
                 }
+              ),
+              currentProps && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                "button",
+                {
+                  onClick: handleCopyDefaults,
+                  style: {
+                    marginTop: 12,
+                    padding: "8px 16px",
+                    backgroundColor: copyFeedback === "Copied!" ? "#4CAF50" : "#333",
+                    color: "#FFFFFF",
+                    border: "1px solid #555",
+                    borderRadius: 4,
+                    cursor: "pointer",
+                    fontSize: 14,
+                    fontFamily: "monospace"
+                  },
+                  children: copyFeedback || "Copy Defaults"
+                }
               )
             ]
           }
@@ -3204,9 +3241,9 @@ var DEFAULTS = {
   cameraBtnRight: 141,
   cameraBtnBgColor: "#5354fc",
   cameraIconTop: 2400,
-  cameraIconBottom: 2454,
-  cameraIconLeft: 62,
-  cameraIconRight: 118
+  cameraIconBottom: 2455,
+  cameraIconLeft: 61,
+  cameraIconRight: 119
 };
 function IgMessageFooter({
   theme,
@@ -3289,7 +3326,24 @@ var defaultInstagramDmProps = {
   height: 2622,
   durationInFrames: 90,
   fps: 30,
-  theme: "dark"
+  theme: "dark",
+  // Footer defaults
+  footerTop: 2363,
+  footerBottom: 2496,
+  footerLeft: 24,
+  footerRight: 1181,
+  footerBgColor: "#0a0a0a",
+  // Camera button defaults
+  cameraBtnTop: 2379,
+  cameraBtnBottom: 2481,
+  cameraBtnLeft: 39,
+  cameraBtnRight: 141,
+  cameraBtnBgColor: "#5354fc",
+  // Camera icon defaults
+  cameraIconTop: 2400,
+  cameraIconBottom: 2455,
+  cameraIconLeft: 61,
+  cameraIconRight: 119
 };
 function InstagramDmComposition({
   showDebugOverlay = false,
@@ -3445,7 +3499,26 @@ function InstagramDmComposition({
             scrollY,
             referenceVisible,
             onZoomChange: handleZoomChange,
-            onToggleReference: handleToggleReference
+            onToggleReference: handleToggleReference,
+            currentProps: {
+              width,
+              height,
+              theme,
+              footerTop,
+              footerBottom,
+              footerLeft,
+              footerRight,
+              footerBgColor,
+              cameraBtnTop,
+              cameraBtnBottom,
+              cameraBtnLeft,
+              cameraBtnRight,
+              cameraBtnBgColor,
+              cameraIconTop,
+              cameraIconBottom,
+              cameraIconLeft,
+              cameraIconRight
+            }
           }
         )
       ]
@@ -4405,9 +4478,9 @@ var instagramDmSchema = import_zod.z.object({
   cameraBtnBgColor: import_zod.z.string().optional().default("#5354fc").describe("Camera button background color"),
   // Camera icon position
   cameraIconTop: import_zod.z.number().optional().default(2400).describe("Camera icon top Y"),
-  cameraIconBottom: import_zod.z.number().optional().default(2454).describe("Camera icon bottom Y"),
-  cameraIconLeft: import_zod.z.number().optional().default(62).describe("Camera icon left X"),
-  cameraIconRight: import_zod.z.number().optional().default(118).describe("Camera icon right X")
+  cameraIconBottom: import_zod.z.number().optional().default(2455).describe("Camera icon bottom Y"),
+  cameraIconLeft: import_zod.z.number().optional().default(61).describe("Camera icon left X"),
+  cameraIconRight: import_zod.z.number().optional().default(119).describe("Camera icon right X")
 });
 var ImageComp = ImageEditorComposition;
 var VideoComp = VideoEditorComposition;

package/dist/index.mjs

@@ -1993,9 +1993,11 @@ function DebugOverlay({
   scrollY,
   referenceVisible,
   onZoomChange,
-  onToggleReference
+  onToggleReference,
+  currentProps
 }) {
   const [mousePos, setMousePos] = useState2(null);
+  const [copyFeedback, setCopyFeedback] = useState2(null);
   const [crosshairPos, setCrosshairPos] = useState2(null);
   const [viewportPos, setViewportPos] = useState2(null);
   const [pinnedPos, setPinnedPos] = useState2(null);
@@ -2103,6 +2105,23 @@ function DebugOverlay({
     },
     [zoom, zoomScale, scrollX, scrollY, viewportPos, onZoomChange]
   );
+  const handleCopyDefaults = useCallback(() => {
+    if (!currentProps) return;
+    const lines = Object.entries(currentProps).filter(([key]) => !["showDebugOverlay", "referenceImageUrl", "showReferenceImage", "referenceOpacity", "durationInFrames", "fps"].includes(key)).map(([key, value]) => {
+      if (typeof value === "string") {
+        return `  ${key}: '${value}',`;
+      }
+      return `  ${key}: ${value},`;
+    });
+    const code = lines.join("\n");
+    navigator.clipboard.writeText(code).then(() => {
+      setCopyFeedback("Copied!");
+      setTimeout(() => setCopyFeedback(null), 2e3);
+    }).catch(() => {
+      setCopyFeedback("Failed to copy");
+      setTimeout(() => setCopyFeedback(null), 2e3);
+    });
+  }, [currentProps]);
   return /* @__PURE__ */ jsxs7(
     "div",
     {
@@ -2288,6 +2307,24 @@ function DebugOverlay({
                     /* @__PURE__ */ jsx9("span", { style: { color: "#FFFFFF", fontSize: 16 }, children: "Show Reference" })
                   ]
                 }
+              ),
+              currentProps && /* @__PURE__ */ jsx9(
+                "button",
+                {
+                  onClick: handleCopyDefaults,
+                  style: {
+                    marginTop: 12,
+                    padding: "8px 16px",
+                    backgroundColor: copyFeedback === "Copied!" ? "#4CAF50" : "#333",
+                    color: "#FFFFFF",
+                    border: "1px solid #555",
+                    borderRadius: 4,
+                    cursor: "pointer",
+                    fontSize: 14,
+                    fontFamily: "monospace"
+                  },
+                  children: copyFeedback || "Copy Defaults"
+                }
               )
             ]
           }
@@ -2312,9 +2349,9 @@ var DEFAULTS = {
   cameraBtnRight: 141,
   cameraBtnBgColor: "#5354fc",
   cameraIconTop: 2400,
-  cameraIconBottom: 2454,
-  cameraIconLeft: 62,
-  cameraIconRight: 118
+  cameraIconBottom: 2455,
+  cameraIconLeft: 61,
+  cameraIconRight: 119
 };
 function IgMessageFooter({
   theme,
@@ -2397,7 +2434,24 @@ var defaultInstagramDmProps = {
   height: 2622,
   durationInFrames: 90,
   fps: 30,
-  theme: "dark"
+  theme: "dark",
+  // Footer defaults
+  footerTop: 2363,
+  footerBottom: 2496,
+  footerLeft: 24,
+  footerRight: 1181,
+  footerBgColor: "#0a0a0a",
+  // Camera button defaults
+  cameraBtnTop: 2379,
+  cameraBtnBottom: 2481,
+  cameraBtnLeft: 39,
+  cameraBtnRight: 141,
+  cameraBtnBgColor: "#5354fc",
+  // Camera icon defaults
+  cameraIconTop: 2400,
+  cameraIconBottom: 2455,
+  cameraIconLeft: 61,
+  cameraIconRight: 119
 };
 function InstagramDmComposition({
   showDebugOverlay = false,
@@ -2553,7 +2607,26 @@ function InstagramDmComposition({
             scrollY,
             referenceVisible,
             onZoomChange: handleZoomChange,
-            onToggleReference: handleToggleReference
+            onToggleReference: handleToggleReference,
+            currentProps: {
+              width,
+              height,
+              theme,
+              footerTop,
+              footerBottom,
+              footerLeft,
+              footerRight,
+              footerBgColor,
+              cameraBtnTop,
+              cameraBtnBottom,
+              cameraBtnLeft,
+              cameraBtnRight,
+              cameraBtnBgColor,
+              cameraIconTop,
+              cameraIconBottom,
+              cameraIconLeft,
+              cameraIconRight
+            }
           }
         )
       ]
@@ -3230,9 +3303,9 @@ var instagramDmSchema = z.object({
   cameraBtnBgColor: z.string().optional().default("#5354fc").describe("Camera button background color"),
   // Camera icon position
   cameraIconTop: z.number().optional().default(2400).describe("Camera icon top Y"),
-  cameraIconBottom: z.number().optional().default(2454).describe("Camera icon bottom Y"),
-  cameraIconLeft: z.number().optional().default(62).describe("Camera icon left X"),
-  cameraIconRight: z.number().optional().default(118).describe("Camera icon right X")
+  cameraIconBottom: z.number().optional().default(2455).describe("Camera icon bottom Y"),
+  cameraIconLeft: z.number().optional().default(61).describe("Camera icon left X"),
+  cameraIconRight: z.number().optional().default(119).describe("Camera icon right X")
 });
 var ImageComp = ImageEditorComposition;
 var VideoComp = VideoEditorComposition;

package/package.json

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