ugcinc-render 1.8.77 → 1.8.79

package/dist/{index-Be_MW5c-.d.mts → index-DO1B0LJo.d.mts}

@@ -444,6 +444,8 @@ interface VideoEditorBaseSegment {
     endTrimInputRef?: string;
     /** UI-only: helper for timing mode display - stripped before rendering */
     timeMode?: TimeMode;
+    /** UI-only: whether this segment's input is optional (default: false = required) */
+    optional?: boolean;
     /** Parent segment ID for overlays */
     parentId?: string;
     /** Relative start (0-1) within parent for overlays */

package/dist/{index-Be_MW5c-.d.ts → index-DO1B0LJo.d.ts}

@@ -444,6 +444,8 @@ interface VideoEditorBaseSegment {
     endTrimInputRef?: string;
     /** UI-only: helper for timing mode display - stripped before rendering */
     timeMode?: TimeMode;
+    /** UI-only: whether this segment's input is optional (default: false = required) */
+    optional?: boolean;
     /** Parent segment ID for overlays */
     parentId?: string;
     /** Relative start (0-1) within parent for overlays */

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import { S as SegmentType, T as TimeValue, R as RelativePositionConfigX, a as RelativePositionConfigY, F as FitMode, B as BorderRadiusConfig, b as TextStyleProperties, D as DynamicCropConfig, I as ImageEditorElement, A as AutoCaptionCompositionProps, c as ScreenshotAnimationProps, d as FontWeight, C as CaptionOverlayProps, P as PositionResolutionResult } from './index-Be_MW5c-.mjs';
-export { a2 as APPLE_EMOJI_FONT, aH as CAPTION_PRESETS, Y as CaptionFontWeight, Q as CaptionPage, X as CaptionPosition, U as CaptionPreset, Z as CaptionStyle, O as CaptionWord, M as CropAxisConfig, L as CropBoundary, N as CropBounds, aI as DEFAULT_CAPTION_STYLE, q as DIMENSION_PRESETS, p as DimensionPreset, o as DimensionPresetKey, a1 as FONT_FAMILIES, a5 as FONT_URLS, aa as FitDimensions, e as FontType, k as HorizontalAnchor, l as HorizontalSelfAnchor, H as Hyphenation, ac as IMAGE_DEFAULTS, n as ImageEditorNodeConfig, at as PositionResolutionError, $ as SCREENSHOT_ANIMATION_DEFAULTS, _ as ScreenshotAnimationConfig, K as SegmentTimelinePosition, ab as TEXT_DEFAULTS, f as TextAlignment, g as TextDirection, i as TextOverflow, h as TextWrap, r as TimeMode, ad as VIDEO_DEFAULTS, ae as VISUAL_DEFAULTS, V as VerticalAlignment, j as VerticalAnchor, m as VerticalSelfAnchor, v as VideoEditorAudioSegment, s as VideoEditorBaseSegment, G as VideoEditorChannel, w as VideoEditorImageSegment, y as VideoEditorImageSequenceSegment, J as VideoEditorNodeConfig, E as VideoEditorSegment, x as VideoEditorTextSegment, u as VideoEditorVideoSegment, z as VideoEditorVideoSequenceSegment, t as VideoEditorVisualSegment, W as WordBreak, ag as applyImageDefaults, af as applyTextDefaults, ah as applyVideoDefaults, a7 as areFontsLoaded, a4 as buildFontString, ao as calculateAutoWidthDimensions, au as calculateCropBounds, aB as calculateEstimatedDuration, a9 as calculateFitDimensions, aj as calculateLineWidth, a0 as calculateScreenshotAnimationDuration, aC as calculateTimelineContentEnd, ap as canSetAsReference, a8 as debugFontStatus, aw as defaultOffset, aD as formatTime, aG as generateOverlayId, aF as generateSegmentId, ax as getBaseSegments, ak as getBorderRadii, aK as getCaptionPresetNames, aq as getDependentElements, a3 as getFontFamily, ay as getOverlays, ar as getReferenceElementX, as as getReferenceElementY, az as getSegmentTimelinePosition, am as hexToRgba, av as isDynamicCropEnabled, aA as isSegmentVisibleAtTime, aL as isValidCaptionPreset, al as parseHexColor, aE as parseTime, a6 as preloadFonts, aJ as resolveCaptionStyle, an as resolveElementPositions, ai as wrapText } from './index-Be_MW5c-.mjs';
+import { S as SegmentType, T as TimeValue, R as RelativePositionConfigX, a as RelativePositionConfigY, F as FitMode, B as BorderRadiusConfig, b as TextStyleProperties, D as DynamicCropConfig, I as ImageEditorElement, A as AutoCaptionCompositionProps, c as ScreenshotAnimationProps, d as FontWeight, C as CaptionOverlayProps, P as PositionResolutionResult } from './index-DO1B0LJo.mjs';
+export { a2 as APPLE_EMOJI_FONT, aH as CAPTION_PRESETS, Y as CaptionFontWeight, Q as CaptionPage, X as CaptionPosition, U as CaptionPreset, Z as CaptionStyle, O as CaptionWord, M as CropAxisConfig, L as CropBoundary, N as CropBounds, aI as DEFAULT_CAPTION_STYLE, q as DIMENSION_PRESETS, p as DimensionPreset, o as DimensionPresetKey, a1 as FONT_FAMILIES, a5 as FONT_URLS, aa as FitDimensions, e as FontType, k as HorizontalAnchor, l as HorizontalSelfAnchor, H as Hyphenation, ac as IMAGE_DEFAULTS, n as ImageEditorNodeConfig, at as PositionResolutionError, $ as SCREENSHOT_ANIMATION_DEFAULTS, _ as ScreenshotAnimationConfig, K as SegmentTimelinePosition, ab as TEXT_DEFAULTS, f as TextAlignment, g as TextDirection, i as TextOverflow, h as TextWrap, r as TimeMode, ad as VIDEO_DEFAULTS, ae as VISUAL_DEFAULTS, V as VerticalAlignment, j as VerticalAnchor, m as VerticalSelfAnchor, v as VideoEditorAudioSegment, s as VideoEditorBaseSegment, G as VideoEditorChannel, w as VideoEditorImageSegment, y as VideoEditorImageSequenceSegment, J as VideoEditorNodeConfig, E as VideoEditorSegment, x as VideoEditorTextSegment, u as VideoEditorVideoSegment, z as VideoEditorVideoSequenceSegment, t as VideoEditorVisualSegment, W as WordBreak, ag as applyImageDefaults, af as applyTextDefaults, ah as applyVideoDefaults, a7 as areFontsLoaded, a4 as buildFontString, ao as calculateAutoWidthDimensions, au as calculateCropBounds, aB as calculateEstimatedDuration, a9 as calculateFitDimensions, aj as calculateLineWidth, a0 as calculateScreenshotAnimationDuration, aC as calculateTimelineContentEnd, ap as canSetAsReference, a8 as debugFontStatus, aw as defaultOffset, aD as formatTime, aG as generateOverlayId, aF as generateSegmentId, ax as getBaseSegments, ak as getBorderRadii, aK as getCaptionPresetNames, aq as getDependentElements, a3 as getFontFamily, ay as getOverlays, ar as getReferenceElementX, as as getReferenceElementY, az as getSegmentTimelinePosition, am as hexToRgba, av as isDynamicCropEnabled, aA as isSegmentVisibleAtTime, aL as isValidCaptionPreset, al as parseHexColor, aE as parseTime, a6 as preloadFonts, aJ as resolveCaptionStyle, an as resolveElementPositions, ai as wrapText } from './index-DO1B0LJo.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 
@@ -669,6 +669,8 @@ interface InstagramDmCompositionProps {
     showDebugOverlay?: boolean;
     /** URL of a reference screenshot to overlay on top */
     referenceImageUrl?: string;
+    /** Show/hide the reference image (default: true) */
+    showReferenceImage?: boolean;
     /** Opacity of the reference overlay (0-100, default: 50) */
     referenceOpacity?: number;
     /** Canvas width in pixels (default: 1206) */
@@ -687,7 +689,7 @@ interface InstagramDmCompositionProps {
  * Default composition props for registration
  */
 declare const defaultInstagramDmProps: InstagramDmCompositionProps;
-declare function InstagramDmComposition({ showDebugOverlay, referenceImageUrl, referenceOpacity, width, height, theme, }: InstagramDmCompositionProps): react_jsx_runtime.JSX.Element;
+declare function InstagramDmComposition({ showDebugOverlay, referenceImageUrl, showReferenceImage, referenceOpacity, width, height, theme, }: InstagramDmCompositionProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Platform-agnostic messaging types

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { S as SegmentType, T as TimeValue, R as RelativePositionConfigX, a as RelativePositionConfigY, F as FitMode, B as BorderRadiusConfig, b as TextStyleProperties, D as DynamicCropConfig, I as ImageEditorElement, A as AutoCaptionCompositionProps, c as ScreenshotAnimationProps, d as FontWeight, C as CaptionOverlayProps, P as PositionResolutionResult } from './index-Be_MW5c-.js';
-export { a2 as APPLE_EMOJI_FONT, aH as CAPTION_PRESETS, Y as CaptionFontWeight, Q as CaptionPage, X as CaptionPosition, U as CaptionPreset, Z as CaptionStyle, O as CaptionWord, M as CropAxisConfig, L as CropBoundary, N as CropBounds, aI as DEFAULT_CAPTION_STYLE, q as DIMENSION_PRESETS, p as DimensionPreset, o as DimensionPresetKey, a1 as FONT_FAMILIES, a5 as FONT_URLS, aa as FitDimensions, e as FontType, k as HorizontalAnchor, l as HorizontalSelfAnchor, H as Hyphenation, ac as IMAGE_DEFAULTS, n as ImageEditorNodeConfig, at as PositionResolutionError, $ as SCREENSHOT_ANIMATION_DEFAULTS, _ as ScreenshotAnimationConfig, K as SegmentTimelinePosition, ab as TEXT_DEFAULTS, f as TextAlignment, g as TextDirection, i as TextOverflow, h as TextWrap, r as TimeMode, ad as VIDEO_DEFAULTS, ae as VISUAL_DEFAULTS, V as VerticalAlignment, j as VerticalAnchor, m as VerticalSelfAnchor, v as VideoEditorAudioSegment, s as VideoEditorBaseSegment, G as VideoEditorChannel, w as VideoEditorImageSegment, y as VideoEditorImageSequenceSegment, J as VideoEditorNodeConfig, E as VideoEditorSegment, x as VideoEditorTextSegment, u as VideoEditorVideoSegment, z as VideoEditorVideoSequenceSegment, t as VideoEditorVisualSegment, W as WordBreak, ag as applyImageDefaults, af as applyTextDefaults, ah as applyVideoDefaults, a7 as areFontsLoaded, a4 as buildFontString, ao as calculateAutoWidthDimensions, au as calculateCropBounds, aB as calculateEstimatedDuration, a9 as calculateFitDimensions, aj as calculateLineWidth, a0 as calculateScreenshotAnimationDuration, aC as calculateTimelineContentEnd, ap as canSetAsReference, a8 as debugFontStatus, aw as defaultOffset, aD as formatTime, aG as generateOverlayId, aF as generateSegmentId, ax as getBaseSegments, ak as getBorderRadii, aK as getCaptionPresetNames, aq as getDependentElements, a3 as getFontFamily, ay as getOverlays, ar as getReferenceElementX, as as getReferenceElementY, az as getSegmentTimelinePosition, am as hexToRgba, av as isDynamicCropEnabled, aA as isSegmentVisibleAtTime, aL as isValidCaptionPreset, al as parseHexColor, aE as parseTime, a6 as preloadFonts, aJ as resolveCaptionStyle, an as resolveElementPositions, ai as wrapText } from './index-Be_MW5c-.js';
+import { S as SegmentType, T as TimeValue, R as RelativePositionConfigX, a as RelativePositionConfigY, F as FitMode, B as BorderRadiusConfig, b as TextStyleProperties, D as DynamicCropConfig, I as ImageEditorElement, A as AutoCaptionCompositionProps, c as ScreenshotAnimationProps, d as FontWeight, C as CaptionOverlayProps, P as PositionResolutionResult } from './index-DO1B0LJo.js';
+export { a2 as APPLE_EMOJI_FONT, aH as CAPTION_PRESETS, Y as CaptionFontWeight, Q as CaptionPage, X as CaptionPosition, U as CaptionPreset, Z as CaptionStyle, O as CaptionWord, M as CropAxisConfig, L as CropBoundary, N as CropBounds, aI as DEFAULT_CAPTION_STYLE, q as DIMENSION_PRESETS, p as DimensionPreset, o as DimensionPresetKey, a1 as FONT_FAMILIES, a5 as FONT_URLS, aa as FitDimensions, e as FontType, k as HorizontalAnchor, l as HorizontalSelfAnchor, H as Hyphenation, ac as IMAGE_DEFAULTS, n as ImageEditorNodeConfig, at as PositionResolutionError, $ as SCREENSHOT_ANIMATION_DEFAULTS, _ as ScreenshotAnimationConfig, K as SegmentTimelinePosition, ab as TEXT_DEFAULTS, f as TextAlignment, g as TextDirection, i as TextOverflow, h as TextWrap, r as TimeMode, ad as VIDEO_DEFAULTS, ae as VISUAL_DEFAULTS, V as VerticalAlignment, j as VerticalAnchor, m as VerticalSelfAnchor, v as VideoEditorAudioSegment, s as VideoEditorBaseSegment, G as VideoEditorChannel, w as VideoEditorImageSegment, y as VideoEditorImageSequenceSegment, J as VideoEditorNodeConfig, E as VideoEditorSegment, x as VideoEditorTextSegment, u as VideoEditorVideoSegment, z as VideoEditorVideoSequenceSegment, t as VideoEditorVisualSegment, W as WordBreak, ag as applyImageDefaults, af as applyTextDefaults, ah as applyVideoDefaults, a7 as areFontsLoaded, a4 as buildFontString, ao as calculateAutoWidthDimensions, au as calculateCropBounds, aB as calculateEstimatedDuration, a9 as calculateFitDimensions, aj as calculateLineWidth, a0 as calculateScreenshotAnimationDuration, aC as calculateTimelineContentEnd, ap as canSetAsReference, a8 as debugFontStatus, aw as defaultOffset, aD as formatTime, aG as generateOverlayId, aF as generateSegmentId, ax as getBaseSegments, ak as getBorderRadii, aK as getCaptionPresetNames, aq as getDependentElements, a3 as getFontFamily, ay as getOverlays, ar as getReferenceElementX, as as getReferenceElementY, az as getSegmentTimelinePosition, am as hexToRgba, av as isDynamicCropEnabled, aA as isSegmentVisibleAtTime, aL as isValidCaptionPreset, al as parseHexColor, aE as parseTime, a6 as preloadFonts, aJ as resolveCaptionStyle, an as resolveElementPositions, ai as wrapText } from './index-DO1B0LJo.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 
@@ -669,6 +669,8 @@ interface InstagramDmCompositionProps {
     showDebugOverlay?: boolean;
     /** URL of a reference screenshot to overlay on top */
     referenceImageUrl?: string;
+    /** Show/hide the reference image (default: true) */
+    showReferenceImage?: boolean;
     /** Opacity of the reference overlay (0-100, default: 50) */
     referenceOpacity?: number;
     /** Canvas width in pixels (default: 1206) */
@@ -687,7 +689,7 @@ interface InstagramDmCompositionProps {
  * Default composition props for registration
  */
 declare const defaultInstagramDmProps: InstagramDmCompositionProps;
-declare function InstagramDmComposition({ showDebugOverlay, referenceImageUrl, referenceOpacity, width, height, theme, }: InstagramDmCompositionProps): react_jsx_runtime.JSX.Element;
+declare function InstagramDmComposition({ showDebugOverlay, referenceImageUrl, showReferenceImage, referenceOpacity, width, height, theme, }: InstagramDmCompositionProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Platform-agnostic messaging types

package/dist/index.js

@@ -2890,6 +2890,8 @@ function DebugOverlay({
   const [mousePos, setMousePos] = (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);
+  const [pinnedCrosshairPos, setPinnedCrosshairPos] = (0, import_react7.useState)(null);
   const [isDragging, setIsDragging] = (0, import_react7.useState)(false);
   const lastDragPos = (0, import_react7.useRef)(null);
   const zoomScale = zoom / 100;
@@ -2906,6 +2908,22 @@ function DebugOverlay({
       pixelHeightPercent: pixelHeight / height * 100
     });
   }, [mousePos, zoomScale, scrollX, scrollY, width, height]);
+  (0, import_react7.useEffect)(() => {
+    if (pinnedPos === null) {
+      setPinnedCrosshairPos(null);
+      return;
+    }
+    const snappedScreenX = (pinnedPos.x + 0.5) * zoomScale - scrollX;
+    const snappedScreenY = (pinnedPos.y + 0.5) * zoomScale - scrollY;
+    const pixelWidth = zoomScale;
+    const pixelHeight = zoomScale;
+    setPinnedCrosshairPos({
+      xPercent: snappedScreenX / width * 100,
+      yPercent: snappedScreenY / height * 100,
+      pixelWidthPercent: pixelWidth / width * 100,
+      pixelHeightPercent: pixelHeight / height * 100
+    });
+  }, [pinnedPos, zoomScale, scrollX, scrollY, width, height]);
   const handleMouseMove = (0, import_react7.useCallback)(
     (e) => {
       const rect = e.currentTarget.getBoundingClientRect();
@@ -2933,11 +2951,22 @@ function DebugOverlay({
     [width, height, zoomScale, scrollX, scrollY, isDragging, zoom, onZoomChange]
   );
   const handleMouseDown = (0, import_react7.useCallback)((e) => {
-    if (e.target.tagName === "BUTTON") return;
+    const tagName = e.target.tagName;
+    if (tagName === "BUTTON" || tagName === "INPUT" || tagName === "LABEL") return;
     e.preventDefault();
+    if (e.ctrlKey || e.metaKey) {
+      if (mousePos) {
+        setPinnedPos({ x: mousePos.x, y: mousePos.y });
+      }
+      return;
+    }
+    if (pinnedPos) {
+      setPinnedPos(null);
+      return;
+    }
     setIsDragging(true);
     lastDragPos.current = { x: e.clientX, y: e.clientY };
-  }, []);
+  }, [mousePos, pinnedPos]);
   const handleMouseUp = (0, import_react7.useCallback)(() => {
     setIsDragging(false);
     lastDragPos.current = null;
@@ -2989,6 +3018,38 @@ function DebugOverlay({
           cursor: none !important;
         }
       ` }),
+        pinnedCrosshairPos && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                top: 0,
+                left: `${pinnedCrosshairPos.xPercent}%`,
+                width: `${Math.max(pinnedCrosshairPos.pixelWidthPercent, 0.1)}%`,
+                height: "100%",
+                backgroundColor: "#00FFFF",
+                pointerEvents: "none",
+                transform: "translateX(-50%)"
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                top: `${pinnedCrosshairPos.yPercent}%`,
+                left: 0,
+                width: "100%",
+                height: `${Math.max(pinnedCrosshairPos.pixelHeightPercent, 0.1)}%`,
+                backgroundColor: "#00FFFF",
+                pointerEvents: "none",
+                transform: "translateY(-50%)"
+              }
+            }
+          )
+        ] }),
         crosshairPos && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "div",
@@ -3047,6 +3108,17 @@ function DebugOverlay({
               /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
                 "Y: ",
                 mousePos.y
+              ] }),
+              pinnedPos && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { marginTop: 12, paddingTop: 12, borderTop: "1px solid rgba(0, 255, 255, 0.5)" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { color: "#00FFFF", fontSize: 20 }, children: "Pinned:" }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { color: "#00FFFF" }, children: [
+                  "X: ",
+                  pinnedPos.x
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { color: "#00FFFF" }, children: [
+                  "Y: ",
+                  pinnedPos.y
+                ] })
               ] })
             ]
           }
@@ -3079,24 +3151,34 @@ function DebugOverlay({
                 "%"
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { color: "#888", fontSize: 14, marginTop: 4, pointerEvents: "none" }, children: "Scroll to zoom, drag to pan" }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                "button",
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                "label",
                 {
-                  onClick: onToggleReference,
                   style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 8,
                     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%"
+                    cursor: "pointer",
+                    userSelect: "none"
                   },
-                  children: referenceVisible ? "Hide Reference" : "Show Reference"
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      "input",
+                      {
+                        type: "checkbox",
+                        checked: referenceVisible,
+                        onChange: onToggleReference,
+                        style: {
+                          width: 20,
+                          height: 20,
+                          cursor: "pointer",
+                          accentColor: "#4CAF50"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "#FFFFFF", fontSize: 16 }, children: "Show Reference" })
+                  ]
                 }
               )
             ]
@@ -3183,6 +3265,7 @@ var import_jsx_runtime11 = require("react/jsx-runtime");
 var defaultInstagramDmProps = {
   showDebugOverlay: true,
   referenceImageUrl: "https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/IMG_3171-DmKgZAYCYJpLxiZjJBYYCk4mynmjkv.png",
+  showReferenceImage: true,
   referenceOpacity: 50,
   width: 1206,
   height: 2622,
@@ -3193,6 +3276,7 @@ var defaultInstagramDmProps = {
 function InstagramDmComposition({
   showDebugOverlay = false,
   referenceImageUrl,
+  showReferenceImage = true,
   referenceOpacity = 50,
   width = 1206,
   height = 2622,
@@ -3270,7 +3354,7 @@ function InstagramDmComposition({
             },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IgMessageFooter, { theme }),
-              referenceImageUrl && (showDebugOverlay ? referenceVisible : clampedReferenceOpacity > 0) && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              referenceImageUrl && (showDebugOverlay ? referenceVisible : showReferenceImage) && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 "div",
                 {
                   style: {

package/dist/index.mjs

@@ -1998,6 +1998,8 @@ function DebugOverlay({
   const [mousePos, setMousePos] = useState2(null);
   const [crosshairPos, setCrosshairPos] = useState2(null);
   const [viewportPos, setViewportPos] = useState2(null);
+  const [pinnedPos, setPinnedPos] = useState2(null);
+  const [pinnedCrosshairPos, setPinnedCrosshairPos] = useState2(null);
   const [isDragging, setIsDragging] = useState2(false);
   const lastDragPos = useRef(null);
   const zoomScale = zoom / 100;
@@ -2014,6 +2016,22 @@ function DebugOverlay({
       pixelHeightPercent: pixelHeight / height * 100
     });
   }, [mousePos, zoomScale, scrollX, scrollY, width, height]);
+  useEffect2(() => {
+    if (pinnedPos === null) {
+      setPinnedCrosshairPos(null);
+      return;
+    }
+    const snappedScreenX = (pinnedPos.x + 0.5) * zoomScale - scrollX;
+    const snappedScreenY = (pinnedPos.y + 0.5) * zoomScale - scrollY;
+    const pixelWidth = zoomScale;
+    const pixelHeight = zoomScale;
+    setPinnedCrosshairPos({
+      xPercent: snappedScreenX / width * 100,
+      yPercent: snappedScreenY / height * 100,
+      pixelWidthPercent: pixelWidth / width * 100,
+      pixelHeightPercent: pixelHeight / height * 100
+    });
+  }, [pinnedPos, zoomScale, scrollX, scrollY, width, height]);
   const handleMouseMove = useCallback(
     (e) => {
       const rect = e.currentTarget.getBoundingClientRect();
@@ -2041,11 +2059,22 @@ function DebugOverlay({
     [width, height, zoomScale, scrollX, scrollY, isDragging, zoom, onZoomChange]
   );
   const handleMouseDown = useCallback((e) => {
-    if (e.target.tagName === "BUTTON") return;
+    const tagName = e.target.tagName;
+    if (tagName === "BUTTON" || tagName === "INPUT" || tagName === "LABEL") return;
     e.preventDefault();
+    if (e.ctrlKey || e.metaKey) {
+      if (mousePos) {
+        setPinnedPos({ x: mousePos.x, y: mousePos.y });
+      }
+      return;
+    }
+    if (pinnedPos) {
+      setPinnedPos(null);
+      return;
+    }
     setIsDragging(true);
     lastDragPos.current = { x: e.clientX, y: e.clientY };
-  }, []);
+  }, [mousePos, pinnedPos]);
   const handleMouseUp = useCallback(() => {
     setIsDragging(false);
     lastDragPos.current = null;
@@ -2097,6 +2126,38 @@ function DebugOverlay({
           cursor: none !important;
         }
       ` }),
+        pinnedCrosshairPos && /* @__PURE__ */ jsxs7(Fragment, { children: [
+          /* @__PURE__ */ jsx9(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                top: 0,
+                left: `${pinnedCrosshairPos.xPercent}%`,
+                width: `${Math.max(pinnedCrosshairPos.pixelWidthPercent, 0.1)}%`,
+                height: "100%",
+                backgroundColor: "#00FFFF",
+                pointerEvents: "none",
+                transform: "translateX(-50%)"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                top: `${pinnedCrosshairPos.yPercent}%`,
+                left: 0,
+                width: "100%",
+                height: `${Math.max(pinnedCrosshairPos.pixelHeightPercent, 0.1)}%`,
+                backgroundColor: "#00FFFF",
+                pointerEvents: "none",
+                transform: "translateY(-50%)"
+              }
+            }
+          )
+        ] }),
         crosshairPos && /* @__PURE__ */ jsxs7(Fragment, { children: [
           /* @__PURE__ */ jsx9(
             "div",
@@ -2155,6 +2216,17 @@ function DebugOverlay({
               /* @__PURE__ */ jsxs7("div", { children: [
                 "Y: ",
                 mousePos.y
+              ] }),
+              pinnedPos && /* @__PURE__ */ jsxs7("div", { style: { marginTop: 12, paddingTop: 12, borderTop: "1px solid rgba(0, 255, 255, 0.5)" }, children: [
+                /* @__PURE__ */ jsx9("div", { style: { color: "#00FFFF", fontSize: 20 }, children: "Pinned:" }),
+                /* @__PURE__ */ jsxs7("div", { style: { color: "#00FFFF" }, children: [
+                  "X: ",
+                  pinnedPos.x
+                ] }),
+                /* @__PURE__ */ jsxs7("div", { style: { color: "#00FFFF" }, children: [
+                  "Y: ",
+                  pinnedPos.y
+                ] })
               ] })
             ]
           }
@@ -2187,24 +2259,34 @@ function DebugOverlay({
                 "%"
               ] }),
               /* @__PURE__ */ jsx9("div", { style: { color: "#888", fontSize: 14, marginTop: 4, pointerEvents: "none" }, children: "Scroll to zoom, drag to pan" }),
-              /* @__PURE__ */ jsx9(
-                "button",
+              /* @__PURE__ */ jsxs7(
+                "label",
                 {
-                  onClick: onToggleReference,
                   style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 8,
                     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%"
+                    cursor: "pointer",
+                    userSelect: "none"
                   },
-                  children: referenceVisible ? "Hide Reference" : "Show Reference"
+                  children: [
+                    /* @__PURE__ */ jsx9(
+                      "input",
+                      {
+                        type: "checkbox",
+                        checked: referenceVisible,
+                        onChange: onToggleReference,
+                        style: {
+                          width: 20,
+                          height: 20,
+                          cursor: "pointer",
+                          accentColor: "#4CAF50"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx9("span", { style: { color: "#FFFFFF", fontSize: 16 }, children: "Show Reference" })
+                  ]
                 }
               )
             ]
@@ -2291,6 +2373,7 @@ import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var defaultInstagramDmProps = {
   showDebugOverlay: true,
   referenceImageUrl: "https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/IMG_3171-DmKgZAYCYJpLxiZjJBYYCk4mynmjkv.png",
+  showReferenceImage: true,
   referenceOpacity: 50,
   width: 1206,
   height: 2622,
@@ -2301,6 +2384,7 @@ var defaultInstagramDmProps = {
 function InstagramDmComposition({
   showDebugOverlay = false,
   referenceImageUrl,
+  showReferenceImage = true,
   referenceOpacity = 50,
   width = 1206,
   height = 2622,
@@ -2378,7 +2462,7 @@ function InstagramDmComposition({
             },
             children: [
               /* @__PURE__ */ jsx11(IgMessageFooter, { theme }),
-              referenceImageUrl && (showDebugOverlay ? referenceVisible : clampedReferenceOpacity > 0) && /* @__PURE__ */ jsx11(
+              referenceImageUrl && (showDebugOverlay ? referenceVisible : showReferenceImage) && /* @__PURE__ */ jsx11(
                 "div",
                 {
                   style: {

package/dist/utils/index.d.mts

@@ -1 +1 @@
-export { a2 as APPLE_EMOJI_FONT, aH as CAPTION_PRESETS, Y as CaptionFontWeight, Q as CaptionPage, X as CaptionPosition, U as CaptionPreset, Z as CaptionStyle, O as CaptionWord, aI as DEFAULT_CAPTION_STYLE, a1 as FONT_FAMILIES, a5 as FONT_URLS, aa as FitDimensions, ac as IMAGE_DEFAULTS, at as PositionResolutionError, P as PositionResolutionResult, $ as SCREENSHOT_ANIMATION_DEFAULTS, _ as ScreenshotAnimationConfig, c as ScreenshotAnimationProps, ab as TEXT_DEFAULTS, ad as VIDEO_DEFAULTS, ae as VISUAL_DEFAULTS, ag as applyImageDefaults, af as applyTextDefaults, ah as applyVideoDefaults, a7 as areFontsLoaded, a4 as buildFontString, ao as calculateAutoWidthDimensions, au as calculateCropBounds, aB as calculateEstimatedDuration, a9 as calculateFitDimensions, aj as calculateLineWidth, a0 as calculateScreenshotAnimationDuration, aC as calculateTimelineContentEnd, ap as canSetAsReference, a8 as debugFontStatus, aw as defaultOffset, aD as formatTime, aG as generateOverlayId, aF as generateSegmentId, ax as getBaseSegments, ak as getBorderRadii, aK as getCaptionPresetNames, aq as getDependentElements, a3 as getFontFamily, ay as getOverlays, ar as getReferenceElementX, as as getReferenceElementY, az as getSegmentTimelinePosition, am as hexToRgba, av as isDynamicCropEnabled, aA as isSegmentVisibleAtTime, aL as isValidCaptionPreset, al as parseHexColor, aE as parseTime, a6 as preloadFonts, aJ as resolveCaptionStyle, an as resolveElementPositions, ai as wrapText } from '../index-Be_MW5c-.mjs';
+export { a2 as APPLE_EMOJI_FONT, aH as CAPTION_PRESETS, Y as CaptionFontWeight, Q as CaptionPage, X as CaptionPosition, U as CaptionPreset, Z as CaptionStyle, O as CaptionWord, aI as DEFAULT_CAPTION_STYLE, a1 as FONT_FAMILIES, a5 as FONT_URLS, aa as FitDimensions, ac as IMAGE_DEFAULTS, at as PositionResolutionError, P as PositionResolutionResult, $ as SCREENSHOT_ANIMATION_DEFAULTS, _ as ScreenshotAnimationConfig, c as ScreenshotAnimationProps, ab as TEXT_DEFAULTS, ad as VIDEO_DEFAULTS, ae as VISUAL_DEFAULTS, ag as applyImageDefaults, af as applyTextDefaults, ah as applyVideoDefaults, a7 as areFontsLoaded, a4 as buildFontString, ao as calculateAutoWidthDimensions, au as calculateCropBounds, aB as calculateEstimatedDuration, a9 as calculateFitDimensions, aj as calculateLineWidth, a0 as calculateScreenshotAnimationDuration, aC as calculateTimelineContentEnd, ap as canSetAsReference, a8 as debugFontStatus, aw as defaultOffset, aD as formatTime, aG as generateOverlayId, aF as generateSegmentId, ax as getBaseSegments, ak as getBorderRadii, aK as getCaptionPresetNames, aq as getDependentElements, a3 as getFontFamily, ay as getOverlays, ar as getReferenceElementX, as as getReferenceElementY, az as getSegmentTimelinePosition, am as hexToRgba, av as isDynamicCropEnabled, aA as isSegmentVisibleAtTime, aL as isValidCaptionPreset, al as parseHexColor, aE as parseTime, a6 as preloadFonts, aJ as resolveCaptionStyle, an as resolveElementPositions, ai as wrapText } from '../index-DO1B0LJo.mjs';

package/dist/utils/index.d.ts

@@ -1 +1 @@
-export { a2 as APPLE_EMOJI_FONT, aH as CAPTION_PRESETS, Y as CaptionFontWeight, Q as CaptionPage, X as CaptionPosition, U as CaptionPreset, Z as CaptionStyle, O as CaptionWord, aI as DEFAULT_CAPTION_STYLE, a1 as FONT_FAMILIES, a5 as FONT_URLS, aa as FitDimensions, ac as IMAGE_DEFAULTS, at as PositionResolutionError, P as PositionResolutionResult, $ as SCREENSHOT_ANIMATION_DEFAULTS, _ as ScreenshotAnimationConfig, c as ScreenshotAnimationProps, ab as TEXT_DEFAULTS, ad as VIDEO_DEFAULTS, ae as VISUAL_DEFAULTS, ag as applyImageDefaults, af as applyTextDefaults, ah as applyVideoDefaults, a7 as areFontsLoaded, a4 as buildFontString, ao as calculateAutoWidthDimensions, au as calculateCropBounds, aB as calculateEstimatedDuration, a9 as calculateFitDimensions, aj as calculateLineWidth, a0 as calculateScreenshotAnimationDuration, aC as calculateTimelineContentEnd, ap as canSetAsReference, a8 as debugFontStatus, aw as defaultOffset, aD as formatTime, aG as generateOverlayId, aF as generateSegmentId, ax as getBaseSegments, ak as getBorderRadii, aK as getCaptionPresetNames, aq as getDependentElements, a3 as getFontFamily, ay as getOverlays, ar as getReferenceElementX, as as getReferenceElementY, az as getSegmentTimelinePosition, am as hexToRgba, av as isDynamicCropEnabled, aA as isSegmentVisibleAtTime, aL as isValidCaptionPreset, al as parseHexColor, aE as parseTime, a6 as preloadFonts, aJ as resolveCaptionStyle, an as resolveElementPositions, ai as wrapText } from '../index-Be_MW5c-.js';
+export { a2 as APPLE_EMOJI_FONT, aH as CAPTION_PRESETS, Y as CaptionFontWeight, Q as CaptionPage, X as CaptionPosition, U as CaptionPreset, Z as CaptionStyle, O as CaptionWord, aI as DEFAULT_CAPTION_STYLE, a1 as FONT_FAMILIES, a5 as FONT_URLS, aa as FitDimensions, ac as IMAGE_DEFAULTS, at as PositionResolutionError, P as PositionResolutionResult, $ as SCREENSHOT_ANIMATION_DEFAULTS, _ as ScreenshotAnimationConfig, c as ScreenshotAnimationProps, ab as TEXT_DEFAULTS, ad as VIDEO_DEFAULTS, ae as VISUAL_DEFAULTS, ag as applyImageDefaults, af as applyTextDefaults, ah as applyVideoDefaults, a7 as areFontsLoaded, a4 as buildFontString, ao as calculateAutoWidthDimensions, au as calculateCropBounds, aB as calculateEstimatedDuration, a9 as calculateFitDimensions, aj as calculateLineWidth, a0 as calculateScreenshotAnimationDuration, aC as calculateTimelineContentEnd, ap as canSetAsReference, a8 as debugFontStatus, aw as defaultOffset, aD as formatTime, aG as generateOverlayId, aF as generateSegmentId, ax as getBaseSegments, ak as getBorderRadii, aK as getCaptionPresetNames, aq as getDependentElements, a3 as getFontFamily, ay as getOverlays, ar as getReferenceElementX, as as getReferenceElementY, az as getSegmentTimelinePosition, am as hexToRgba, av as isDynamicCropEnabled, aA as isSegmentVisibleAtTime, aL as isValidCaptionPreset, al as parseHexColor, aE as parseTime, a6 as preloadFonts, aJ as resolveCaptionStyle, an as resolveElementPositions, ai as wrapText } from '../index-DO1B0LJo.js';

package/package.json

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