ugcinc-render 1.3.12 → 1.3.14

package/dist/index.d.mts

@@ -320,6 +320,10 @@ interface ImageEditorNodeConfig {
     dimensionPreset: DimensionPresetKey;
     /** Elements to render */
     elements: ImageEditorElement[];
+    /** Background type: 'image' for image input, 'color' for solid color */
+    backgroundType?: 'image' | 'color';
+    /** Background color (hex) when backgroundType is 'color' */
+    backgroundColor?: string;
     /** How the background image fits the canvas */
     backgroundFit?: FitMode;
     /** Cached background image URL for consistent preview */
@@ -740,6 +744,10 @@ interface ImageEditorCompositionProps {
     width?: number;
     /** Canvas height (required when using elements) */
     height?: number;
+    /** Background type: 'image' for image input, 'color' for solid color */
+    backgroundType?: 'image' | 'color';
+    /** Background color (hex) when backgroundType is 'color' */
+    backgroundColor?: string;
     /** Background fit mode (when using elements) */
     backgroundFit?: FitMode;
     /** Background image URL (when using elements) */
@@ -748,6 +756,8 @@ interface ImageEditorCompositionProps {
     imageUrls?: Record<string, string | null>;
     /** Text values keyed by textInputId (when using elements, for autoWidth calculation) */
     textValues?: Record<string, string>;
+    /** Dynamic crop configuration */
+    dynamicCrop?: DynamicCropConfig;
 }
 /**
  * ImageEditorComposition renders a complete image editor configuration.
@@ -782,7 +792,7 @@ interface ImageEditorCompositionProps {
  * />
  * ```
  */
-declare function ImageEditorComposition({ config, sources, scale, elements, width, height, backgroundFit, backgroundUrl, imageUrls, textValues, }: ImageEditorCompositionProps): react_jsx_runtime.JSX.Element;
+declare function ImageEditorComposition({ config, sources, scale, elements, width, height, backgroundType, backgroundColor, backgroundFit, backgroundUrl, imageUrls, textValues, dynamicCrop, }: ImageEditorCompositionProps): react_jsx_runtime.JSX.Element;
 
 interface VideoEditorCompositionProps {
     /** The editor configuration to render */
@@ -1136,6 +1146,25 @@ declare function getReferenceElementX(elements: ImageEditorElement[], elementId:
  */
 declare function getReferenceElementY(elements: ImageEditorElement[], elementId: string): ImageEditorElement | null;
 
+/**
+ * Utility functions for calculating dynamic crop bounds
+ */
+
+/**
+ * Calculate dynamic crop bounds based on element positions
+ *
+ * @param elements - Array of resolved elements with absolute positions
+ * @param dynamicCrop - Crop configuration
+ * @param canvasWidth - Original canvas width
+ * @param canvasHeight - Original canvas height
+ * @returns CropBounds with x, y, width, height
+ */
+declare function calculateCropBounds(elements: ImageEditorElement[], dynamicCrop: DynamicCropConfig | undefined, canvasWidth: number, canvasHeight: number): CropBounds;
+/**
+ * Check if dynamic crop is enabled (either vertical or horizontal)
+ */
+declare function isDynamicCropEnabled(dynamicCrop: DynamicCropConfig | undefined): boolean;
+
 /**
  * Hook exports for ugcinc-render
  *
@@ -1195,4 +1224,4 @@ declare function useResolvedPositions(elements: ImageEditorElement[], textValues
 
 declare const RenderRoot: React.FC;
 
-export { type AudioSegment, type BaseEditorConfig, type BaseSegment, type BorderRadiusConfig, type Channel, type CropAxisConfig, type CropBoundary, type CropBounds, DIMENSION_PRESETS, type DimensionPreset, type DimensionPresetKey, type DynamicCropConfig, type EditorConfig, type EditorSegment, FONT_FAMILIES, FONT_URLS, type FitDimensions, type FitMode, type FontType, type FontWeight, type HorizontalAnchor, type HorizontalSelfAnchor, type Hyphenation, IMAGE_DEFAULTS, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, type ImageEditorElement, type ImageEditorNodeConfig, ImageElement, type ImageElementProps, type ImageSegment, type PictureSegment, type PositionResolutionError, type PositionResolutionResult, type RelativePositionConfigX, type RelativePositionConfigY, RenderRoot, type Segment, type SegmentType, type StaticSegment, TEXT_DEFAULTS, type TextAlignment, type TextDirection, TextElement, type TextElementProps, type TextOverflow, type TextSegment, type TextWrap, type TimeMode, type TimeValue, VIDEO_DEFAULTS, VISUAL_DEFAULTS, type VerticalAlignment, type VerticalAnchor, type VerticalSelfAnchor, type VideoEditorAudioSegment, type VideoEditorBaseSegment, type VideoEditorChannel, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, type VideoEditorImageSegment, type VideoEditorNodeConfig, type VideoEditorSegment, type VideoEditorTextSegment, type VideoEditorVideoSegment, type VideoEditorVisualSegment, VideoElement, type VideoElementProps, type VideoSegment, type VisualSegment, type VisualSegmentUnion, type WordBreak, applyImageDefaults, applyTextDefaults, applyVideoDefaults, areFontsLoaded, buildFontString, calculateAutoWidthDimensions, calculateFitDimensions, calculateLineWidth, canSetAsReference, getBorderRadii, getDependentElements, getFontFamily, getReferenceElementX, getReferenceElementY, hexToRgba, parseHexColor, preloadFonts, resolveElementPositions, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, wrapText };
+export { type AudioSegment, type BaseEditorConfig, type BaseSegment, type BorderRadiusConfig, type Channel, type CropAxisConfig, type CropBoundary, type CropBounds, DIMENSION_PRESETS, type DimensionPreset, type DimensionPresetKey, type DynamicCropConfig, type EditorConfig, type EditorSegment, FONT_FAMILIES, FONT_URLS, type FitDimensions, type FitMode, type FontType, type FontWeight, type HorizontalAnchor, type HorizontalSelfAnchor, type Hyphenation, IMAGE_DEFAULTS, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, type ImageEditorElement, type ImageEditorNodeConfig, ImageElement, type ImageElementProps, type ImageSegment, type PictureSegment, type PositionResolutionError, type PositionResolutionResult, type RelativePositionConfigX, type RelativePositionConfigY, RenderRoot, type Segment, type SegmentType, type StaticSegment, TEXT_DEFAULTS, type TextAlignment, type TextDirection, TextElement, type TextElementProps, type TextOverflow, type TextSegment, type TextWrap, type TimeMode, type TimeValue, VIDEO_DEFAULTS, VISUAL_DEFAULTS, type VerticalAlignment, type VerticalAnchor, type VerticalSelfAnchor, type VideoEditorAudioSegment, type VideoEditorBaseSegment, type VideoEditorChannel, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, type VideoEditorImageSegment, type VideoEditorNodeConfig, type VideoEditorSegment, type VideoEditorTextSegment, type VideoEditorVideoSegment, type VideoEditorVisualSegment, VideoElement, type VideoElementProps, type VideoSegment, type VisualSegment, type VisualSegmentUnion, type WordBreak, applyImageDefaults, applyTextDefaults, applyVideoDefaults, areFontsLoaded, buildFontString, calculateAutoWidthDimensions, calculateCropBounds, calculateFitDimensions, calculateLineWidth, canSetAsReference, getBorderRadii, getDependentElements, getFontFamily, getReferenceElementX, getReferenceElementY, hexToRgba, isDynamicCropEnabled, parseHexColor, preloadFonts, resolveElementPositions, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, wrapText };

package/dist/index.d.ts

@@ -320,6 +320,10 @@ interface ImageEditorNodeConfig {
     dimensionPreset: DimensionPresetKey;
     /** Elements to render */
     elements: ImageEditorElement[];
+    /** Background type: 'image' for image input, 'color' for solid color */
+    backgroundType?: 'image' | 'color';
+    /** Background color (hex) when backgroundType is 'color' */
+    backgroundColor?: string;
     /** How the background image fits the canvas */
     backgroundFit?: FitMode;
     /** Cached background image URL for consistent preview */
@@ -740,6 +744,10 @@ interface ImageEditorCompositionProps {
     width?: number;
     /** Canvas height (required when using elements) */
     height?: number;
+    /** Background type: 'image' for image input, 'color' for solid color */
+    backgroundType?: 'image' | 'color';
+    /** Background color (hex) when backgroundType is 'color' */
+    backgroundColor?: string;
     /** Background fit mode (when using elements) */
     backgroundFit?: FitMode;
     /** Background image URL (when using elements) */
@@ -748,6 +756,8 @@ interface ImageEditorCompositionProps {
     imageUrls?: Record<string, string | null>;
     /** Text values keyed by textInputId (when using elements, for autoWidth calculation) */
     textValues?: Record<string, string>;
+    /** Dynamic crop configuration */
+    dynamicCrop?: DynamicCropConfig;
 }
 /**
  * ImageEditorComposition renders a complete image editor configuration.
@@ -782,7 +792,7 @@ interface ImageEditorCompositionProps {
  * />
  * ```
  */
-declare function ImageEditorComposition({ config, sources, scale, elements, width, height, backgroundFit, backgroundUrl, imageUrls, textValues, }: ImageEditorCompositionProps): react_jsx_runtime.JSX.Element;
+declare function ImageEditorComposition({ config, sources, scale, elements, width, height, backgroundType, backgroundColor, backgroundFit, backgroundUrl, imageUrls, textValues, dynamicCrop, }: ImageEditorCompositionProps): react_jsx_runtime.JSX.Element;
 
 interface VideoEditorCompositionProps {
     /** The editor configuration to render */
@@ -1136,6 +1146,25 @@ declare function getReferenceElementX(elements: ImageEditorElement[], elementId:
  */
 declare function getReferenceElementY(elements: ImageEditorElement[], elementId: string): ImageEditorElement | null;
 
+/**
+ * Utility functions for calculating dynamic crop bounds
+ */
+
+/**
+ * Calculate dynamic crop bounds based on element positions
+ *
+ * @param elements - Array of resolved elements with absolute positions
+ * @param dynamicCrop - Crop configuration
+ * @param canvasWidth - Original canvas width
+ * @param canvasHeight - Original canvas height
+ * @returns CropBounds with x, y, width, height
+ */
+declare function calculateCropBounds(elements: ImageEditorElement[], dynamicCrop: DynamicCropConfig | undefined, canvasWidth: number, canvasHeight: number): CropBounds;
+/**
+ * Check if dynamic crop is enabled (either vertical or horizontal)
+ */
+declare function isDynamicCropEnabled(dynamicCrop: DynamicCropConfig | undefined): boolean;
+
 /**
  * Hook exports for ugcinc-render
  *
@@ -1195,4 +1224,4 @@ declare function useResolvedPositions(elements: ImageEditorElement[], textValues
 
 declare const RenderRoot: React.FC;
 
-export { type AudioSegment, type BaseEditorConfig, type BaseSegment, type BorderRadiusConfig, type Channel, type CropAxisConfig, type CropBoundary, type CropBounds, DIMENSION_PRESETS, type DimensionPreset, type DimensionPresetKey, type DynamicCropConfig, type EditorConfig, type EditorSegment, FONT_FAMILIES, FONT_URLS, type FitDimensions, type FitMode, type FontType, type FontWeight, type HorizontalAnchor, type HorizontalSelfAnchor, type Hyphenation, IMAGE_DEFAULTS, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, type ImageEditorElement, type ImageEditorNodeConfig, ImageElement, type ImageElementProps, type ImageSegment, type PictureSegment, type PositionResolutionError, type PositionResolutionResult, type RelativePositionConfigX, type RelativePositionConfigY, RenderRoot, type Segment, type SegmentType, type StaticSegment, TEXT_DEFAULTS, type TextAlignment, type TextDirection, TextElement, type TextElementProps, type TextOverflow, type TextSegment, type TextWrap, type TimeMode, type TimeValue, VIDEO_DEFAULTS, VISUAL_DEFAULTS, type VerticalAlignment, type VerticalAnchor, type VerticalSelfAnchor, type VideoEditorAudioSegment, type VideoEditorBaseSegment, type VideoEditorChannel, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, type VideoEditorImageSegment, type VideoEditorNodeConfig, type VideoEditorSegment, type VideoEditorTextSegment, type VideoEditorVideoSegment, type VideoEditorVisualSegment, VideoElement, type VideoElementProps, type VideoSegment, type VisualSegment, type VisualSegmentUnion, type WordBreak, applyImageDefaults, applyTextDefaults, applyVideoDefaults, areFontsLoaded, buildFontString, calculateAutoWidthDimensions, calculateFitDimensions, calculateLineWidth, canSetAsReference, getBorderRadii, getDependentElements, getFontFamily, getReferenceElementX, getReferenceElementY, hexToRgba, parseHexColor, preloadFonts, resolveElementPositions, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, wrapText };
+export { type AudioSegment, type BaseEditorConfig, type BaseSegment, type BorderRadiusConfig, type Channel, type CropAxisConfig, type CropBoundary, type CropBounds, DIMENSION_PRESETS, type DimensionPreset, type DimensionPresetKey, type DynamicCropConfig, type EditorConfig, type EditorSegment, FONT_FAMILIES, FONT_URLS, type FitDimensions, type FitMode, type FontType, type FontWeight, type HorizontalAnchor, type HorizontalSelfAnchor, type Hyphenation, IMAGE_DEFAULTS, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, type ImageEditorElement, type ImageEditorNodeConfig, ImageElement, type ImageElementProps, type ImageSegment, type PictureSegment, type PositionResolutionError, type PositionResolutionResult, type RelativePositionConfigX, type RelativePositionConfigY, RenderRoot, type Segment, type SegmentType, type StaticSegment, TEXT_DEFAULTS, type TextAlignment, type TextDirection, TextElement, type TextElementProps, type TextOverflow, type TextSegment, type TextWrap, type TimeMode, type TimeValue, VIDEO_DEFAULTS, VISUAL_DEFAULTS, type VerticalAlignment, type VerticalAnchor, type VerticalSelfAnchor, type VideoEditorAudioSegment, type VideoEditorBaseSegment, type VideoEditorChannel, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, type VideoEditorImageSegment, type VideoEditorNodeConfig, type VideoEditorSegment, type VideoEditorTextSegment, type VideoEditorVideoSegment, type VideoEditorVisualSegment, VideoElement, type VideoElementProps, type VideoSegment, type VisualSegment, type VisualSegmentUnion, type WordBreak, applyImageDefaults, applyTextDefaults, applyVideoDefaults, areFontsLoaded, buildFontString, calculateAutoWidthDimensions, calculateCropBounds, calculateFitDimensions, calculateLineWidth, canSetAsReference, getBorderRadii, getDependentElements, getFontFamily, getReferenceElementX, getReferenceElementY, hexToRgba, isDynamicCropEnabled, parseHexColor, preloadFonts, resolveElementPositions, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, wrapText };

package/dist/index.js

@@ -39,6 +39,7 @@ __export(index_exports, {
   areFontsLoaded: () => areFontsLoaded,
   buildFontString: () => buildFontString,
   calculateAutoWidthDimensions: () => calculateAutoWidthDimensions,
+  calculateCropBounds: () => calculateCropBounds,
   calculateFitDimensions: () => calculateFitDimensions,
   calculateLineWidth: () => calculateLineWidth,
   canSetAsReference: () => canSetAsReference,
@@ -48,6 +49,7 @@ __export(index_exports, {
   getReferenceElementX: () => getReferenceElementX,
   getReferenceElementY: () => getReferenceElementY,
   hexToRgba: () => hexToRgba,
+  isDynamicCropEnabled: () => isDynamicCropEnabled,
   parseHexColor: () => parseHexColor,
   preloadFonts: () => preloadFonts,
   resolveElementPositions: () => resolveElementPositions,
@@ -799,6 +801,113 @@ function getReferenceElementY(elements, elementId) {
   return elements.find((e) => e.id === element.relativePositionY.elementId) ?? null;
 }
 
+// src/utils/cropBounds.ts
+function calculateCropBounds(elements, dynamicCrop, canvasWidth, canvasHeight) {
+  if (!dynamicCrop) {
+    return { x: 0, y: 0, width: canvasWidth, height: canvasHeight };
+  }
+  const elementMap = /* @__PURE__ */ new Map();
+  for (const elem of elements) {
+    elementMap.set(elem.id, elem);
+  }
+  const resolveBoundary = (boundary) => {
+    if (!boundary) return void 0;
+    if (boundary.elementId) return boundary.elementId;
+    return void 0;
+  };
+  let cropY = 0;
+  let cropHeight = canvasHeight;
+  if (dynamicCrop.vertical?.enabled) {
+    const vCrop = dynamicCrop.vertical;
+    const paddingStart = vCrop.paddingStart ?? 0;
+    const paddingEnd = vCrop.paddingEnd ?? 0;
+    if (vCrop.mode === "all-elements") {
+      let minY = canvasHeight;
+      let maxY = 0;
+      for (const elem of elements) {
+        minY = Math.min(minY, elem.y);
+        maxY = Math.max(maxY, elem.y + elem.height);
+      }
+      if (elements.length > 0) {
+        cropY = Math.max(0, minY - paddingStart);
+        const bottomY = Math.min(canvasHeight, maxY + paddingEnd);
+        cropHeight = bottomY - cropY;
+      }
+    } else if (vCrop.mode === "between-elements") {
+      const startElementId = resolveBoundary(vCrop.startBoundary);
+      const endElementId = resolveBoundary(vCrop.endBoundary);
+      let topY = 0;
+      let bottomY = canvasHeight;
+      if (startElementId) {
+        const startElem = elementMap.get(startElementId);
+        if (startElem) {
+          topY = startElem.y;
+        }
+      }
+      if (endElementId) {
+        const endElem = elementMap.get(endElementId);
+        if (endElem) {
+          bottomY = endElem.y + endElem.height;
+        }
+      }
+      cropY = Math.max(0, topY - paddingStart);
+      const adjustedBottom = Math.min(canvasHeight, bottomY + paddingEnd);
+      cropHeight = adjustedBottom - cropY;
+    }
+    if (vCrop.minSize && cropHeight < vCrop.minSize) {
+      cropHeight = vCrop.minSize;
+    }
+  }
+  let cropX = 0;
+  let cropWidth = canvasWidth;
+  if (dynamicCrop.horizontal?.enabled) {
+    const hCrop = dynamicCrop.horizontal;
+    const paddingStart = hCrop.paddingStart ?? 0;
+    const paddingEnd = hCrop.paddingEnd ?? 0;
+    if (hCrop.mode === "all-elements") {
+      let minX = canvasWidth;
+      let maxX = 0;
+      for (const elem of elements) {
+        minX = Math.min(minX, elem.x);
+        maxX = Math.max(maxX, elem.x + elem.width);
+      }
+      if (elements.length > 0) {
+        cropX = Math.max(0, minX - paddingStart);
+        const rightX = Math.min(canvasWidth, maxX + paddingEnd);
+        cropWidth = rightX - cropX;
+      }
+    } else if (hCrop.mode === "between-elements") {
+      const startElementId = resolveBoundary(hCrop.startBoundary);
+      const endElementId = resolveBoundary(hCrop.endBoundary);
+      let leftX = 0;
+      let rightX = canvasWidth;
+      if (startElementId) {
+        const startElem = elementMap.get(startElementId);
+        if (startElem) {
+          leftX = startElem.x;
+        }
+      }
+      if (endElementId) {
+        const endElem = elementMap.get(endElementId);
+        if (endElem) {
+          rightX = endElem.x + endElem.width;
+        }
+      }
+      cropX = Math.max(0, leftX - paddingStart);
+      const adjustedRight = Math.min(canvasWidth, rightX + paddingEnd);
+      cropWidth = adjustedRight - cropX;
+    }
+    if (hCrop.minSize && cropWidth < hCrop.minSize) {
+      cropWidth = hCrop.minSize;
+    }
+  }
+  return { x: cropX, y: cropY, width: cropWidth, height: cropHeight };
+}
+function isDynamicCropEnabled(dynamicCrop) {
+  if (!dynamicCrop) return false;
+  return !!(dynamicCrop.vertical?.enabled || dynamicCrop.horizontal?.enabled);
+}
+
 // src/compositions/ImageEditorComposition.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function getSortedSegments(config) {
@@ -874,11 +983,16 @@ function ImageEditorComposition({
   elements,
   width,
   height,
+  backgroundType = "image",
+  backgroundColor,
   backgroundFit = "cover",
   backgroundUrl,
   imageUrls = {},
-  textValues = {}
+  textValues = {},
+  dynamicCrop
 }) {
+  const canvasWidth = width ?? config?.width ?? 1080;
+  const canvasHeight = height ?? config?.height ?? 1920;
   const resolvedElements = (0, import_react3.useMemo)(() => {
     if (!elements) return null;
     const result = resolveElementPositions(elements, textValues);
@@ -887,6 +1001,10 @@ function ImageEditorComposition({
     }
     return result.elements;
   }, [elements, textValues]);
+  const cropBounds = (0, import_react3.useMemo)(() => {
+    if (!isDynamicCropEnabled(dynamicCrop) || !resolvedElements) return null;
+    return calculateCropBounds(resolvedElements, dynamicCrop, canvasWidth, canvasHeight);
+  }, [resolvedElements, dynamicCrop, canvasWidth, canvasHeight]);
   const segmentsFromElements = (0, import_react3.useMemo)(() => {
     if (!resolvedElements) return null;
     const segments = [];
@@ -903,10 +1021,10 @@ function ImageEditorComposition({
     }
     return segments.sort((a, b) => (a.zIndex ?? 0) - (b.zIndex ?? 0));
   }, [resolvedElements, imageUrls, textValues]);
-  const canvasWidth = width ?? config?.width ?? 1080;
-  const canvasHeight = height ?? config?.height ?? 1920;
   const bgFit = backgroundFit ?? "cover";
   const bgUrl = backgroundUrl ?? sources.background;
+  const cropOffsetX = cropBounds?.x ?? 0;
+  const cropOffsetY = cropBounds?.y ?? 0;
   const contentSegments = segmentsFromElements ?? (() => {
     if (!config) return [];
     const sorted = getSortedSegments(config);
@@ -926,61 +1044,74 @@ function ImageEditorComposition({
     }
     return void 0;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_remotion2.AbsoluteFill, { style: { backgroundColor: "#000000" }, children: [
-    bgUrl && segmentsFromElements && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_remotion2.Img,
-      {
-        src: bgUrl,
-        style: {
-          position: "absolute",
-          left: 0,
-          top: 0,
-          width: canvasWidth * scale,
-          height: canvasHeight * scale,
-          objectFit: bgFit
-        }
-      }
-    ),
-    legacyBackgroundSegment && !segmentsFromElements && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      BackgroundImage,
-      {
-        segment: legacyBackgroundSegment,
-        src: getSource(legacyBackgroundSegment),
-        width: canvasWidth,
-        height: canvasHeight,
-        scale
-      }
-    ),
-    contentSegments.map((segment) => {
-      if (segment.type === "text") {
-        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          TextElement,
+  const containerBgColor = backgroundType === "color" && backgroundColor ? backgroundColor : "#000000";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_remotion2.AbsoluteFill, { style: { backgroundColor: containerBgColor }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: -cropOffsetX * scale,
+        top: -cropOffsetY * scale,
+        width: canvasWidth * scale,
+        height: canvasHeight * scale
+      },
+      children: [
+        backgroundType === "image" && bgUrl && segmentsFromElements && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_remotion2.Img,
           {
-            segment,
-            scale
-          },
-          segment.id
-        );
-      }
-      if (segment.type === "image") {
-        const src = segment.source || getSource(segment);
-        if (!src) {
-          console.warn(`No source found for image segment: ${segment.id}`);
-          return null;
-        }
-        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          ImageElement,
+            src: bgUrl,
+            style: {
+              position: "absolute",
+              left: 0,
+              top: 0,
+              width: canvasWidth * scale,
+              height: canvasHeight * scale,
+              objectFit: bgFit
+            }
+          }
+        ),
+        legacyBackgroundSegment && !segmentsFromElements && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          BackgroundImage,
           {
-            segment,
-            src,
+            segment: legacyBackgroundSegment,
+            src: getSource(legacyBackgroundSegment),
+            width: canvasWidth,
+            height: canvasHeight,
             scale
-          },
-          segment.id
-        );
-      }
-      return null;
-    })
-  ] });
+          }
+        ),
+        contentSegments.map((segment) => {
+          if (segment.type === "text") {
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              TextElement,
+              {
+                segment,
+                scale
+              },
+              segment.id
+            );
+          }
+          if (segment.type === "image") {
+            const src = segment.source || getSource(segment);
+            if (!src) {
+              console.warn(`No source found for image segment: ${segment.id}`);
+              return null;
+            }
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              ImageElement,
+              {
+                segment,
+                src,
+                scale
+              },
+              segment.id
+            );
+          }
+          return null;
+        })
+      ]
+    }
+  ) });
 }
 function BackgroundImage({
   segment,
@@ -1486,6 +1617,7 @@ var RenderRoot = () => {
   areFontsLoaded,
   buildFontString,
   calculateAutoWidthDimensions,
+  calculateCropBounds,
   calculateFitDimensions,
   calculateLineWidth,
   canSetAsReference,
@@ -1495,6 +1627,7 @@ var RenderRoot = () => {
   getReferenceElementX,
   getReferenceElementY,
   hexToRgba,
+  isDynamicCropEnabled,
   parseHexColor,
   preloadFonts,
   resolveElementPositions,

package/dist/index.mjs

@@ -738,6 +738,113 @@ function getReferenceElementY(elements, elementId) {
   return elements.find((e) => e.id === element.relativePositionY.elementId) ?? null;
 }
 
+// src/utils/cropBounds.ts
+function calculateCropBounds(elements, dynamicCrop, canvasWidth, canvasHeight) {
+  if (!dynamicCrop) {
+    return { x: 0, y: 0, width: canvasWidth, height: canvasHeight };
+  }
+  const elementMap = /* @__PURE__ */ new Map();
+  for (const elem of elements) {
+    elementMap.set(elem.id, elem);
+  }
+  const resolveBoundary = (boundary) => {
+    if (!boundary) return void 0;
+    if (boundary.elementId) return boundary.elementId;
+    return void 0;
+  };
+  let cropY = 0;
+  let cropHeight = canvasHeight;
+  if (dynamicCrop.vertical?.enabled) {
+    const vCrop = dynamicCrop.vertical;
+    const paddingStart = vCrop.paddingStart ?? 0;
+    const paddingEnd = vCrop.paddingEnd ?? 0;
+    if (vCrop.mode === "all-elements") {
+      let minY = canvasHeight;
+      let maxY = 0;
+      for (const elem of elements) {
+        minY = Math.min(minY, elem.y);
+        maxY = Math.max(maxY, elem.y + elem.height);
+      }
+      if (elements.length > 0) {
+        cropY = Math.max(0, minY - paddingStart);
+        const bottomY = Math.min(canvasHeight, maxY + paddingEnd);
+        cropHeight = bottomY - cropY;
+      }
+    } else if (vCrop.mode === "between-elements") {
+      const startElementId = resolveBoundary(vCrop.startBoundary);
+      const endElementId = resolveBoundary(vCrop.endBoundary);
+      let topY = 0;
+      let bottomY = canvasHeight;
+      if (startElementId) {
+        const startElem = elementMap.get(startElementId);
+        if (startElem) {
+          topY = startElem.y;
+        }
+      }
+      if (endElementId) {
+        const endElem = elementMap.get(endElementId);
+        if (endElem) {
+          bottomY = endElem.y + endElem.height;
+        }
+      }
+      cropY = Math.max(0, topY - paddingStart);
+      const adjustedBottom = Math.min(canvasHeight, bottomY + paddingEnd);
+      cropHeight = adjustedBottom - cropY;
+    }
+    if (vCrop.minSize && cropHeight < vCrop.minSize) {
+      cropHeight = vCrop.minSize;
+    }
+  }
+  let cropX = 0;
+  let cropWidth = canvasWidth;
+  if (dynamicCrop.horizontal?.enabled) {
+    const hCrop = dynamicCrop.horizontal;
+    const paddingStart = hCrop.paddingStart ?? 0;
+    const paddingEnd = hCrop.paddingEnd ?? 0;
+    if (hCrop.mode === "all-elements") {
+      let minX = canvasWidth;
+      let maxX = 0;
+      for (const elem of elements) {
+        minX = Math.min(minX, elem.x);
+        maxX = Math.max(maxX, elem.x + elem.width);
+      }
+      if (elements.length > 0) {
+        cropX = Math.max(0, minX - paddingStart);
+        const rightX = Math.min(canvasWidth, maxX + paddingEnd);
+        cropWidth = rightX - cropX;
+      }
+    } else if (hCrop.mode === "between-elements") {
+      const startElementId = resolveBoundary(hCrop.startBoundary);
+      const endElementId = resolveBoundary(hCrop.endBoundary);
+      let leftX = 0;
+      let rightX = canvasWidth;
+      if (startElementId) {
+        const startElem = elementMap.get(startElementId);
+        if (startElem) {
+          leftX = startElem.x;
+        }
+      }
+      if (endElementId) {
+        const endElem = elementMap.get(endElementId);
+        if (endElem) {
+          rightX = endElem.x + endElem.width;
+        }
+      }
+      cropX = Math.max(0, leftX - paddingStart);
+      const adjustedRight = Math.min(canvasWidth, rightX + paddingEnd);
+      cropWidth = adjustedRight - cropX;
+    }
+    if (hCrop.minSize && cropWidth < hCrop.minSize) {
+      cropWidth = hCrop.minSize;
+    }
+  }
+  return { x: cropX, y: cropY, width: cropWidth, height: cropHeight };
+}
+function isDynamicCropEnabled(dynamicCrop) {
+  if (!dynamicCrop) return false;
+  return !!(dynamicCrop.vertical?.enabled || dynamicCrop.horizontal?.enabled);
+}
+
 // src/compositions/ImageEditorComposition.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 function getSortedSegments(config) {
@@ -813,11 +920,16 @@ function ImageEditorComposition({
   elements,
   width,
   height,
+  backgroundType = "image",
+  backgroundColor,
   backgroundFit = "cover",
   backgroundUrl,
   imageUrls = {},
-  textValues = {}
+  textValues = {},
+  dynamicCrop
 }) {
+  const canvasWidth = width ?? config?.width ?? 1080;
+  const canvasHeight = height ?? config?.height ?? 1920;
   const resolvedElements = useMemo3(() => {
     if (!elements) return null;
     const result = resolveElementPositions(elements, textValues);
@@ -826,6 +938,10 @@ function ImageEditorComposition({
     }
     return result.elements;
   }, [elements, textValues]);
+  const cropBounds = useMemo3(() => {
+    if (!isDynamicCropEnabled(dynamicCrop) || !resolvedElements) return null;
+    return calculateCropBounds(resolvedElements, dynamicCrop, canvasWidth, canvasHeight);
+  }, [resolvedElements, dynamicCrop, canvasWidth, canvasHeight]);
   const segmentsFromElements = useMemo3(() => {
     if (!resolvedElements) return null;
     const segments = [];
@@ -842,10 +958,10 @@ function ImageEditorComposition({
     }
     return segments.sort((a, b) => (a.zIndex ?? 0) - (b.zIndex ?? 0));
   }, [resolvedElements, imageUrls, textValues]);
-  const canvasWidth = width ?? config?.width ?? 1080;
-  const canvasHeight = height ?? config?.height ?? 1920;
   const bgFit = backgroundFit ?? "cover";
   const bgUrl = backgroundUrl ?? sources.background;
+  const cropOffsetX = cropBounds?.x ?? 0;
+  const cropOffsetY = cropBounds?.y ?? 0;
   const contentSegments = segmentsFromElements ?? (() => {
     if (!config) return [];
     const sorted = getSortedSegments(config);
@@ -865,61 +981,74 @@ function ImageEditorComposition({
     }
     return void 0;
   };
-  return /* @__PURE__ */ jsxs(AbsoluteFill, { style: { backgroundColor: "#000000" }, children: [
-    bgUrl && segmentsFromElements && /* @__PURE__ */ jsx3(
-      Img2,
-      {
-        src: bgUrl,
-        style: {
-          position: "absolute",
-          left: 0,
-          top: 0,
-          width: canvasWidth * scale,
-          height: canvasHeight * scale,
-          objectFit: bgFit
-        }
-      }
-    ),
-    legacyBackgroundSegment && !segmentsFromElements && /* @__PURE__ */ jsx3(
-      BackgroundImage,
-      {
-        segment: legacyBackgroundSegment,
-        src: getSource(legacyBackgroundSegment),
-        width: canvasWidth,
-        height: canvasHeight,
-        scale
-      }
-    ),
-    contentSegments.map((segment) => {
-      if (segment.type === "text") {
-        return /* @__PURE__ */ jsx3(
-          TextElement,
+  const containerBgColor = backgroundType === "color" && backgroundColor ? backgroundColor : "#000000";
+  return /* @__PURE__ */ jsx3(AbsoluteFill, { style: { backgroundColor: containerBgColor }, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: -cropOffsetX * scale,
+        top: -cropOffsetY * scale,
+        width: canvasWidth * scale,
+        height: canvasHeight * scale
+      },
+      children: [
+        backgroundType === "image" && bgUrl && segmentsFromElements && /* @__PURE__ */ jsx3(
+          Img2,
           {
-            segment,
-            scale
-          },
-          segment.id
-        );
-      }
-      if (segment.type === "image") {
-        const src = segment.source || getSource(segment);
-        if (!src) {
-          console.warn(`No source found for image segment: ${segment.id}`);
-          return null;
-        }
-        return /* @__PURE__ */ jsx3(
-          ImageElement,
+            src: bgUrl,
+            style: {
+              position: "absolute",
+              left: 0,
+              top: 0,
+              width: canvasWidth * scale,
+              height: canvasHeight * scale,
+              objectFit: bgFit
+            }
+          }
+        ),
+        legacyBackgroundSegment && !segmentsFromElements && /* @__PURE__ */ jsx3(
+          BackgroundImage,
           {
-            segment,
-            src,
+            segment: legacyBackgroundSegment,
+            src: getSource(legacyBackgroundSegment),
+            width: canvasWidth,
+            height: canvasHeight,
             scale
-          },
-          segment.id
-        );
-      }
-      return null;
-    })
-  ] });
+          }
+        ),
+        contentSegments.map((segment) => {
+          if (segment.type === "text") {
+            return /* @__PURE__ */ jsx3(
+              TextElement,
+              {
+                segment,
+                scale
+              },
+              segment.id
+            );
+          }
+          if (segment.type === "image") {
+            const src = segment.source || getSource(segment);
+            if (!src) {
+              console.warn(`No source found for image segment: ${segment.id}`);
+              return null;
+            }
+            return /* @__PURE__ */ jsx3(
+              ImageElement,
+              {
+                segment,
+                src,
+                scale
+              },
+              segment.id
+            );
+          }
+          return null;
+        })
+      ]
+    }
+  ) });
 }
 function BackgroundImage({
   segment,
@@ -1424,6 +1553,7 @@ export {
   areFontsLoaded,
   buildFontString,
   calculateAutoWidthDimensions,
+  calculateCropBounds,
   calculateFitDimensions,
   calculateLineWidth,
   canSetAsReference,
@@ -1433,6 +1563,7 @@ export {
   getReferenceElementX,
   getReferenceElementY,
   hexToRgba,
+  isDynamicCropEnabled,
   parseHexColor,
   preloadFonts,
   resolveElementPositions,

package/package.json

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