ugcinc-render 1.8.144 → 1.8.145

package/dist/index.d.mts

@@ -1074,7 +1074,7 @@ interface IMessageDmCompositionProps {
  * iMessage DM Composition
  *
  * A fully parameterized iMessage DM conversation renderer.
- * Uses ImageEditorComposition for rendering, with props converted to elements.
+ * Uses BaseDmComposition for shared zoom/pan/crosshair functionality.
  */
 
 /**
@@ -1086,6 +1086,48 @@ declare const defaultIMessageDmProps: IMessageDmCompositionProps;
  */
 declare const IMessageDmComposition: React.FC<IMessageDmCompositionProps>;
 
+interface BaseDmCompositionProps {
+    /** Canvas width */
+    width: number;
+    /** Canvas height */
+    height: number;
+    /** Background color */
+    backgroundColor: string;
+    /** Show debug overlay with crosshair and coordinates */
+    showDebugOverlay?: boolean;
+    /** Reference image URL for overlay comparison */
+    referenceImageUrl?: string;
+    /** Show reference image overlay */
+    showReferenceImage?: boolean;
+    /** Reference image opacity (0-100) */
+    referenceOpacity?: number;
+    /** Current props for copy-to-clipboard feature in debug overlay */
+    currentProps?: Record<string, unknown>;
+    /** Children to render inside the zoomable/pannable content area */
+    children: React.ReactNode;
+}
+declare function BaseDmComposition({ width, height, backgroundColor, showDebugOverlay, referenceImageUrl, showReferenceImage, referenceOpacity, currentProps, children, }: BaseDmCompositionProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Debug Overlay Component
+ *
+ * Shows mouse coordinates, zoom controls, and pixel-snapped crosshair.
+ * Useful for matching elements to a reference screenshot.
+ */
+interface DebugOverlayProps {
+    width: number;
+    height: number;
+    zoom: number;
+    scrollX: number;
+    scrollY: number;
+    referenceVisible: boolean;
+    onZoomChange: (zoom: number, scrollX: number, scrollY: number) => void;
+    onToggleReference: () => void;
+    /** Current prop values for copy-to-clipboard feature */
+    currentProps?: Record<string, unknown>;
+}
+declare function DebugOverlay({ width, height, zoom, scrollX, scrollY, referenceVisible, onZoomChange, onToggleReference, currentProps, }: DebugOverlayProps): react_jsx_runtime.JSX.Element;
+
 /**
  * Platform-agnostic messaging types
  *
@@ -1563,4 +1605,4 @@ declare function useResolvedPositions(elements: ImageEditorElement[], textValues
 
 declare const RenderRoot: React.FC;
 
-export { type Acceleration, type AudioConfig, type AudioSegment, AutoCaptionComposition, AutoCaptionCompositionProps, AutoCaptionCompositionWithVideo, type BaseBubbleStyle, type BaseEditorConfig, type BaseMessage, type BaseMessageType, type BaseSegment, type BlendMode, BorderRadiusConfig, type BubbleRadii, CaptionOverlay, CaptionOverlayProps, type Channel, type ColorFilterConfig, type ColorShiftConfig, type CropConfig, type CuttingConfig, DEDUPLICATION_LEVELS, type DeduplicationConfig, type DeduplicationInput, type DeduplicationLevel, type DiagonalFilterConfig, type DiagonalFilterType, DynamicCropConfig, type EditorConfig, type EditorSegment, type EnhanceLevel, type EnhancementConfig, FitMode, FontWeight, type FrameManipulationConfig, type GifOverlayConfig, type GifSource, type GradientColor, type GradientOverlayConfig, IMessageDmComposition, type IMessageDmCompositionProps, type IgDmMessage, type IgDmSender, type IgDmTheme, type IgTheme, type ImMessage, type ImMessageSender, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, ImageEditorElement, ImageElement, type ImageElementProps, type ImageMessage, type ImageSegment, type ImageSequenceSegment, InstagramDmComposition, type InstagramDmCompositionProps, type InstagramDmPublicInput, LEVEL_1_CONFIG, LEVEL_2_CONFIG, LEVEL_3_CONFIG, LEVEL_4_CONFIG, LEVEL_5_CONFIG, type LensCorrectionConfig, MediaBubble, type MediaBubbleProps, type Message, MessageBubble, type MessageBubbleProps, type MessageGroup, type MessageOrTyping, type MessagePosition, type MessageReaction, type MessageSender, type MobileEncodingConfig, type ParticleOverlayConfig, type PhoneConfig, type PhoneModel, type PhoneType, type PictureSegment, PositionResolutionResult, type PositionedMessage, ProfilePic, type ProfilePicProps, Reaction, type ReactionProps, type ReadReceipt, type ReadReceiptState, RelativePositionConfigX, RelativePositionConfigY, RenderRoot, ScreenshotAnimation, ScreenshotAnimationProps, type Segment, SegmentType, type SpeedConfig, type StaticSegment, TYPING_ANIMATION, TextElement, type TextElementProps, type TextMessage, type TextSegment, TextStyleProperties, TimeValue, type TraceRemovalConfig, TypingIndicator, type TypingIndicatorProps, type TypingIndicatorStyle, type TypingMessage, type UserProfile, type ValidationError, type VideoCodec, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, VideoElement, type VideoElementProps, type VideoExtension, type VideoSegment, type VideoSequenceSegment, type VisualAdjustmentsConfig, type VisualSegment, type VisualSegmentUnion, bubbleRadiiToCss, calculateBubbleRadii, convertPublicToProps, defaultIMessageDmProps, defaultInstagramDmProps, flattenGroups, groupMessages, isDeduplicationLevel, resolveDeduplicationConfig, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, validatePublicInput };
+export { type Acceleration, type AudioConfig, type AudioSegment, AutoCaptionComposition, AutoCaptionCompositionProps, AutoCaptionCompositionWithVideo, type BaseBubbleStyle, BaseDmComposition, type BaseDmCompositionProps, type BaseEditorConfig, type BaseMessage, type BaseMessageType, type BaseSegment, type BlendMode, BorderRadiusConfig, type BubbleRadii, CaptionOverlay, CaptionOverlayProps, type Channel, type ColorFilterConfig, type ColorShiftConfig, type CropConfig, type CuttingConfig, DEDUPLICATION_LEVELS, DebugOverlay, type DeduplicationConfig, type DeduplicationInput, type DeduplicationLevel, type DiagonalFilterConfig, type DiagonalFilterType, DynamicCropConfig, type EditorConfig, type EditorSegment, type EnhanceLevel, type EnhancementConfig, FitMode, FontWeight, type FrameManipulationConfig, type GifOverlayConfig, type GifSource, type GradientColor, type GradientOverlayConfig, IMessageDmComposition, type IMessageDmCompositionProps, type IgDmMessage, type IgDmSender, type IgDmTheme, type IgTheme, type ImMessage, type ImMessageSender, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, ImageEditorElement, ImageElement, type ImageElementProps, type ImageMessage, type ImageSegment, type ImageSequenceSegment, InstagramDmComposition, type InstagramDmCompositionProps, type InstagramDmPublicInput, LEVEL_1_CONFIG, LEVEL_2_CONFIG, LEVEL_3_CONFIG, LEVEL_4_CONFIG, LEVEL_5_CONFIG, type LensCorrectionConfig, MediaBubble, type MediaBubbleProps, type Message, MessageBubble, type MessageBubbleProps, type MessageGroup, type MessageOrTyping, type MessagePosition, type MessageReaction, type MessageSender, type MobileEncodingConfig, type ParticleOverlayConfig, type PhoneConfig, type PhoneModel, type PhoneType, type PictureSegment, PositionResolutionResult, type PositionedMessage, ProfilePic, type ProfilePicProps, Reaction, type ReactionProps, type ReadReceipt, type ReadReceiptState, RelativePositionConfigX, RelativePositionConfigY, RenderRoot, ScreenshotAnimation, ScreenshotAnimationProps, type Segment, SegmentType, type SpeedConfig, type StaticSegment, TYPING_ANIMATION, TextElement, type TextElementProps, type TextMessage, type TextSegment, TextStyleProperties, TimeValue, type TraceRemovalConfig, TypingIndicator, type TypingIndicatorProps, type TypingIndicatorStyle, type TypingMessage, type UserProfile, type ValidationError, type VideoCodec, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, VideoElement, type VideoElementProps, type VideoExtension, type VideoSegment, type VideoSequenceSegment, type VisualAdjustmentsConfig, type VisualSegment, type VisualSegmentUnion, bubbleRadiiToCss, calculateBubbleRadii, convertPublicToProps, defaultIMessageDmProps, defaultInstagramDmProps, flattenGroups, groupMessages, isDeduplicationLevel, resolveDeduplicationConfig, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, validatePublicInput };

package/dist/index.d.ts

@@ -1074,7 +1074,7 @@ interface IMessageDmCompositionProps {
  * iMessage DM Composition
  *
  * A fully parameterized iMessage DM conversation renderer.
- * Uses ImageEditorComposition for rendering, with props converted to elements.
+ * Uses BaseDmComposition for shared zoom/pan/crosshair functionality.
  */
 
 /**
@@ -1086,6 +1086,48 @@ declare const defaultIMessageDmProps: IMessageDmCompositionProps;
  */
 declare const IMessageDmComposition: React.FC<IMessageDmCompositionProps>;
 
+interface BaseDmCompositionProps {
+    /** Canvas width */
+    width: number;
+    /** Canvas height */
+    height: number;
+    /** Background color */
+    backgroundColor: string;
+    /** Show debug overlay with crosshair and coordinates */
+    showDebugOverlay?: boolean;
+    /** Reference image URL for overlay comparison */
+    referenceImageUrl?: string;
+    /** Show reference image overlay */
+    showReferenceImage?: boolean;
+    /** Reference image opacity (0-100) */
+    referenceOpacity?: number;
+    /** Current props for copy-to-clipboard feature in debug overlay */
+    currentProps?: Record<string, unknown>;
+    /** Children to render inside the zoomable/pannable content area */
+    children: React.ReactNode;
+}
+declare function BaseDmComposition({ width, height, backgroundColor, showDebugOverlay, referenceImageUrl, showReferenceImage, referenceOpacity, currentProps, children, }: BaseDmCompositionProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Debug Overlay Component
+ *
+ * Shows mouse coordinates, zoom controls, and pixel-snapped crosshair.
+ * Useful for matching elements to a reference screenshot.
+ */
+interface DebugOverlayProps {
+    width: number;
+    height: number;
+    zoom: number;
+    scrollX: number;
+    scrollY: number;
+    referenceVisible: boolean;
+    onZoomChange: (zoom: number, scrollX: number, scrollY: number) => void;
+    onToggleReference: () => void;
+    /** Current prop values for copy-to-clipboard feature */
+    currentProps?: Record<string, unknown>;
+}
+declare function DebugOverlay({ width, height, zoom, scrollX, scrollY, referenceVisible, onZoomChange, onToggleReference, currentProps, }: DebugOverlayProps): react_jsx_runtime.JSX.Element;
+
 /**
  * Platform-agnostic messaging types
  *
@@ -1563,4 +1605,4 @@ declare function useResolvedPositions(elements: ImageEditorElement[], textValues
 
 declare const RenderRoot: React.FC;
 
-export { type Acceleration, type AudioConfig, type AudioSegment, AutoCaptionComposition, AutoCaptionCompositionProps, AutoCaptionCompositionWithVideo, type BaseBubbleStyle, type BaseEditorConfig, type BaseMessage, type BaseMessageType, type BaseSegment, type BlendMode, BorderRadiusConfig, type BubbleRadii, CaptionOverlay, CaptionOverlayProps, type Channel, type ColorFilterConfig, type ColorShiftConfig, type CropConfig, type CuttingConfig, DEDUPLICATION_LEVELS, type DeduplicationConfig, type DeduplicationInput, type DeduplicationLevel, type DiagonalFilterConfig, type DiagonalFilterType, DynamicCropConfig, type EditorConfig, type EditorSegment, type EnhanceLevel, type EnhancementConfig, FitMode, FontWeight, type FrameManipulationConfig, type GifOverlayConfig, type GifSource, type GradientColor, type GradientOverlayConfig, IMessageDmComposition, type IMessageDmCompositionProps, type IgDmMessage, type IgDmSender, type IgDmTheme, type IgTheme, type ImMessage, type ImMessageSender, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, ImageEditorElement, ImageElement, type ImageElementProps, type ImageMessage, type ImageSegment, type ImageSequenceSegment, InstagramDmComposition, type InstagramDmCompositionProps, type InstagramDmPublicInput, LEVEL_1_CONFIG, LEVEL_2_CONFIG, LEVEL_3_CONFIG, LEVEL_4_CONFIG, LEVEL_5_CONFIG, type LensCorrectionConfig, MediaBubble, type MediaBubbleProps, type Message, MessageBubble, type MessageBubbleProps, type MessageGroup, type MessageOrTyping, type MessagePosition, type MessageReaction, type MessageSender, type MobileEncodingConfig, type ParticleOverlayConfig, type PhoneConfig, type PhoneModel, type PhoneType, type PictureSegment, PositionResolutionResult, type PositionedMessage, ProfilePic, type ProfilePicProps, Reaction, type ReactionProps, type ReadReceipt, type ReadReceiptState, RelativePositionConfigX, RelativePositionConfigY, RenderRoot, ScreenshotAnimation, ScreenshotAnimationProps, type Segment, SegmentType, type SpeedConfig, type StaticSegment, TYPING_ANIMATION, TextElement, type TextElementProps, type TextMessage, type TextSegment, TextStyleProperties, TimeValue, type TraceRemovalConfig, TypingIndicator, type TypingIndicatorProps, type TypingIndicatorStyle, type TypingMessage, type UserProfile, type ValidationError, type VideoCodec, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, VideoElement, type VideoElementProps, type VideoExtension, type VideoSegment, type VideoSequenceSegment, type VisualAdjustmentsConfig, type VisualSegment, type VisualSegmentUnion, bubbleRadiiToCss, calculateBubbleRadii, convertPublicToProps, defaultIMessageDmProps, defaultInstagramDmProps, flattenGroups, groupMessages, isDeduplicationLevel, resolveDeduplicationConfig, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, validatePublicInput };
+export { type Acceleration, type AudioConfig, type AudioSegment, AutoCaptionComposition, AutoCaptionCompositionProps, AutoCaptionCompositionWithVideo, type BaseBubbleStyle, BaseDmComposition, type BaseDmCompositionProps, type BaseEditorConfig, type BaseMessage, type BaseMessageType, type BaseSegment, type BlendMode, BorderRadiusConfig, type BubbleRadii, CaptionOverlay, CaptionOverlayProps, type Channel, type ColorFilterConfig, type ColorShiftConfig, type CropConfig, type CuttingConfig, DEDUPLICATION_LEVELS, DebugOverlay, type DeduplicationConfig, type DeduplicationInput, type DeduplicationLevel, type DiagonalFilterConfig, type DiagonalFilterType, DynamicCropConfig, type EditorConfig, type EditorSegment, type EnhanceLevel, type EnhancementConfig, FitMode, FontWeight, type FrameManipulationConfig, type GifOverlayConfig, type GifSource, type GradientColor, type GradientOverlayConfig, IMessageDmComposition, type IMessageDmCompositionProps, type IgDmMessage, type IgDmSender, type IgDmTheme, type IgTheme, type ImMessage, type ImMessageSender, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, ImageEditorElement, ImageElement, type ImageElementProps, type ImageMessage, type ImageSegment, type ImageSequenceSegment, InstagramDmComposition, type InstagramDmCompositionProps, type InstagramDmPublicInput, LEVEL_1_CONFIG, LEVEL_2_CONFIG, LEVEL_3_CONFIG, LEVEL_4_CONFIG, LEVEL_5_CONFIG, type LensCorrectionConfig, MediaBubble, type MediaBubbleProps, type Message, MessageBubble, type MessageBubbleProps, type MessageGroup, type MessageOrTyping, type MessagePosition, type MessageReaction, type MessageSender, type MobileEncodingConfig, type ParticleOverlayConfig, type PhoneConfig, type PhoneModel, type PhoneType, type PictureSegment, PositionResolutionResult, type PositionedMessage, ProfilePic, type ProfilePicProps, Reaction, type ReactionProps, type ReadReceipt, type ReadReceiptState, RelativePositionConfigX, RelativePositionConfigY, RenderRoot, ScreenshotAnimation, ScreenshotAnimationProps, type Segment, SegmentType, type SpeedConfig, type StaticSegment, TYPING_ANIMATION, TextElement, type TextElementProps, type TextMessage, type TextSegment, TextStyleProperties, TimeValue, type TraceRemovalConfig, TypingIndicator, type TypingIndicatorProps, type TypingIndicatorStyle, type TypingMessage, type UserProfile, type ValidationError, type VideoCodec, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, VideoElement, type VideoElementProps, type VideoExtension, type VideoSegment, type VideoSequenceSegment, type VisualAdjustmentsConfig, type VisualSegment, type VisualSegmentUnion, bubbleRadiiToCss, calculateBubbleRadii, convertPublicToProps, defaultIMessageDmProps, defaultInstagramDmProps, flattenGroups, groupMessages, isDeduplicationLevel, resolveDeduplicationConfig, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, validatePublicInput };