@remotion/web-renderer 4.0.428 → 4.0.430

package/dist/drawing/draw-outline.js

@@ -0,0 +1,93 @@
+import { drawRoundedRectPath } from './draw-rounded';
+export const parseOutlineWidth = (value) => {
+    return parseFloat(value) || 0;
+};
+export const parseOutlineOffset = (value) => {
+    return parseFloat(value) || 0;
+};
+const getLineDashPattern = (style, width) => {
+    if (style === 'dashed') {
+        return [width * 2, width];
+    }
+    if (style === 'dotted') {
+        return [width, width];
+    }
+    return [];
+};
+export const drawOutline = ({ ctx, rect, borderRadius, computedStyle, }) => {
+    const outlineWidth = parseOutlineWidth(computedStyle.outlineWidth);
+    const { outlineStyle } = computedStyle;
+    const outlineColor = computedStyle.outlineColor || 'black';
+    const outlineOffset = parseOutlineOffset(computedStyle.outlineOffset);
+    // Check if we have a visible outline
+    if (outlineWidth <= 0 ||
+        outlineStyle === 'none' ||
+        outlineStyle === 'hidden') {
+        return;
+    }
+    // Save original canvas state
+    const originalStrokeStyle = ctx.strokeStyle;
+    const originalLineWidth = ctx.lineWidth;
+    const originalLineDash = ctx.getLineDash();
+    ctx.strokeStyle = outlineColor;
+    ctx.lineWidth = outlineWidth;
+    ctx.setLineDash(getLineDashPattern(outlineStyle, outlineWidth));
+    // Calculate outline position
+    // Outline is drawn outside the border edge, offset by outlineOffset
+    const halfWidth = outlineWidth / 2;
+    const offset = outlineOffset + halfWidth;
+    const outlineX = rect.left - offset;
+    const outlineY = rect.top - offset;
+    const outlineW = rect.width + offset * 2;
+    const outlineH = rect.height + offset * 2;
+    // Adjust border radius for the outline offset
+    // When outline-offset is positive, we need to expand the radius
+    // When outline-offset is negative, we need to shrink the radius
+    const adjustedBorderRadius = {
+        topLeft: {
+            horizontal: borderRadius.topLeft.horizontal === 0
+                ? 0
+                : Math.max(0, borderRadius.topLeft.horizontal + offset),
+            vertical: borderRadius.topLeft.vertical === 0
+                ? 0
+                : Math.max(0, borderRadius.topLeft.vertical + offset),
+        },
+        topRight: {
+            horizontal: borderRadius.topRight.horizontal === 0
+                ? 0
+                : Math.max(0, borderRadius.topRight.horizontal + offset),
+            vertical: borderRadius.topRight.vertical === 0
+                ? 0
+                : Math.max(0, borderRadius.topRight.vertical + offset),
+        },
+        bottomRight: {
+            horizontal: borderRadius.bottomRight.horizontal === 0
+                ? 0
+                : Math.max(0, borderRadius.bottomRight.horizontal + offset),
+            vertical: borderRadius.bottomRight.vertical === 0
+                ? 0
+                : Math.max(0, borderRadius.bottomRight.vertical + offset),
+        },
+        bottomLeft: {
+            horizontal: borderRadius.bottomLeft.horizontal === 0
+                ? 0
+                : Math.max(0, borderRadius.bottomLeft.horizontal + offset),
+            vertical: borderRadius.bottomLeft.vertical === 0
+                ? 0
+                : Math.max(0, borderRadius.bottomLeft.vertical + offset),
+        },
+    };
+    drawRoundedRectPath({
+        ctx,
+        x: outlineX,
+        y: outlineY,
+        width: outlineW,
+        height: outlineH,
+        borderRadius: adjustedBorderRadius,
+    });
+    ctx.stroke();
+    // Restore original canvas state
+    ctx.strokeStyle = originalStrokeStyle;
+    ctx.lineWidth = originalLineWidth;
+    ctx.setLineDash(originalLineDash);
+};

package/dist/drawing/draw-rounded.js

@@ -0,0 +1,34 @@
+export const drawRoundedRectPath = ({ ctx, x, y, width, height, borderRadius, }) => {
+    ctx.beginPath();
+    // Start from top-left corner, after the radius
+    ctx.moveTo(x + borderRadius.topLeft.horizontal, y);
+    // Top edge
+    ctx.lineTo(x + width - borderRadius.topRight.horizontal, y);
+    // Top-right corner
+    if (borderRadius.topRight.horizontal > 0 ||
+        borderRadius.topRight.vertical > 0) {
+        ctx.ellipse(x + width - borderRadius.topRight.horizontal, y + borderRadius.topRight.vertical, borderRadius.topRight.horizontal, borderRadius.topRight.vertical, 0, -Math.PI / 2, 0);
+    }
+    // Right edge
+    ctx.lineTo(x + width, y + height - borderRadius.bottomRight.vertical);
+    // Bottom-right corner
+    if (borderRadius.bottomRight.horizontal > 0 ||
+        borderRadius.bottomRight.vertical > 0) {
+        ctx.ellipse(x + width - borderRadius.bottomRight.horizontal, y + height - borderRadius.bottomRight.vertical, borderRadius.bottomRight.horizontal, borderRadius.bottomRight.vertical, 0, 0, Math.PI / 2);
+    }
+    // Bottom edge
+    ctx.lineTo(x + borderRadius.bottomLeft.horizontal, y + height);
+    // Bottom-left corner
+    if (borderRadius.bottomLeft.horizontal > 0 ||
+        borderRadius.bottomLeft.vertical > 0) {
+        ctx.ellipse(x + borderRadius.bottomLeft.horizontal, y + height - borderRadius.bottomLeft.vertical, borderRadius.bottomLeft.horizontal, borderRadius.bottomLeft.vertical, 0, Math.PI / 2, Math.PI);
+    }
+    // Left edge
+    ctx.lineTo(x, y + borderRadius.topLeft.vertical);
+    // Top-left corner
+    if (borderRadius.topLeft.horizontal > 0 ||
+        borderRadius.topLeft.vertical > 0) {
+        ctx.ellipse(x + borderRadius.topLeft.horizontal, y + borderRadius.topLeft.vertical, borderRadius.topLeft.horizontal, borderRadius.topLeft.vertical, 0, Math.PI, (Math.PI * 3) / 2);
+    }
+    ctx.closePath();
+};

package/dist/drawing/drawn-fn.js

@@ -0,0 +1 @@
+export {};

package/dist/drawing/fit-svg-into-its-dimensions.js

@@ -0,0 +1,35 @@
+// The bitmap created from the SVG height and width might not be what we expect.
+// Adjust the dimensions
+export const fitSvgIntoItsContainer = ({ containerSize, elementSize, }) => {
+    // If was already fitting, no need to calculate and lose precision
+    if (Math.round(containerSize.width) === Math.round(elementSize.width) &&
+        Math.round(containerSize.height) === Math.round(elementSize.height)) {
+        return {
+            width: containerSize.width,
+            height: containerSize.height,
+            top: containerSize.top,
+            left: containerSize.left,
+        };
+    }
+    if (containerSize.width <= 0 || containerSize.height <= 0) {
+        throw new Error(`Container must have positive dimensions, but got ${containerSize.width}x${containerSize.height}`);
+    }
+    if (elementSize.width <= 0 || elementSize.height <= 0) {
+        throw new Error(`Element must have positive dimensions, but got ${elementSize.width}x${elementSize.height}`);
+    }
+    const heightRatio = containerSize.height / elementSize.height;
+    const widthRatio = containerSize.width / elementSize.width;
+    const ratio = Math.min(heightRatio, widthRatio);
+    const newWidth = elementSize.width * ratio;
+    const newHeight = elementSize.height * ratio;
+    if (newWidth > containerSize.width + 0.000001 ||
+        newHeight > containerSize.height + 0.000001) {
+        throw new Error(`Element is too big to fit into the container. Max size: ${containerSize.width}x${containerSize.height}, element size: ${newWidth}x${newHeight}`);
+    }
+    return {
+        width: newWidth,
+        height: newHeight,
+        top: (containerSize.height - newHeight) / 2 + containerSize.top,
+        left: (containerSize.width - newWidth) / 2 + containerSize.left,
+    };
+};

package/dist/drawing/get-clipped-background.d.ts

@@ -0,0 +1,8 @@
+import type { LogLevel } from 'remotion';
+import type { InternalState } from '../internal-state';
+export declare const getClippedBackground: ({ element, boundingRect, logLevel, internalState, }: {
+    element: HTMLElement | SVGElement;
+    boundingRect: DOMRect;
+    logLevel: LogLevel;
+    internalState: InternalState;
+}) => Promise<OffscreenCanvasRenderingContext2D>;

package/dist/drawing/get-clipped-background.js

@@ -0,0 +1,14 @@
+import { compose } from '../compose';
+export const getClippedBackground = async ({ element, boundingRect, logLevel, internalState, }) => {
+    const tempCanvas = new OffscreenCanvas(boundingRect.width, boundingRect.height);
+    const tempContext = tempCanvas.getContext('2d');
+    await compose({
+        element,
+        context: tempContext,
+        logLevel,
+        parentRect: boundingRect,
+        internalState,
+        onlyBackgroundClip: true,
+    });
+    return tempContext;
+};

package/dist/drawing/get-padding-box.js

@@ -0,0 +1,30 @@
+const getPaddingBox = (rect, computedStyle) => {
+    const borderLeft = parseFloat(computedStyle.borderLeftWidth);
+    const borderRight = parseFloat(computedStyle.borderRightWidth);
+    const borderTop = parseFloat(computedStyle.borderTopWidth);
+    const borderBottom = parseFloat(computedStyle.borderBottomWidth);
+    return new DOMRect(rect.left + borderLeft, rect.top + borderTop, rect.width - borderLeft - borderRight, rect.height - borderTop - borderBottom);
+};
+const getContentBox = (rect, computedStyle) => {
+    const paddingBox = getPaddingBox(rect, computedStyle);
+    const paddingLeft = parseFloat(computedStyle.paddingLeft);
+    const paddingRight = parseFloat(computedStyle.paddingRight);
+    const paddingTop = parseFloat(computedStyle.paddingTop);
+    const paddingBottom = parseFloat(computedStyle.paddingBottom);
+    return new DOMRect(paddingBox.left + paddingLeft, paddingBox.top + paddingTop, paddingBox.width - paddingLeft - paddingRight, paddingBox.height - paddingTop - paddingBottom);
+};
+export const getBoxBasedOnBackgroundClip = (rect, computedStyle, backgroundClip) => {
+    if (!backgroundClip) {
+        return rect;
+    }
+    if (backgroundClip.includes('text')) {
+        return rect;
+    }
+    if (backgroundClip.includes('padding-box')) {
+        return getPaddingBox(rect, computedStyle);
+    }
+    if (backgroundClip.includes('content-box')) {
+        return getContentBox(rect, computedStyle);
+    }
+    return rect;
+};

package/dist/drawing/get-pretransform-rect.js

@@ -0,0 +1,49 @@
+// In some cases, we get a matrix that is too compressed:
+// e.g. https://github.com/remotion-dev/remotion/issues/6185
+// > You're rotating around the X-axis by ~89.96°, which means the Y-axis gets compressed to ⁠cos(89.96°) ≈ 0.000691 of its original size in the viewport.
+const MAX_SCALE_FACTOR = 100;
+export function getPreTransformRect(targetRect, matrix) {
+    // 1. Determine the effective 2D transformation by transforming basis vectors
+    const origin = new DOMPoint(0, 0).matrixTransform(matrix);
+    const unitX = new DOMPoint(1, 0).matrixTransform(matrix);
+    const unitY = new DOMPoint(0, 1).matrixTransform(matrix);
+    // 2. Compute the 2D basis vectors after transformation
+    const basisX = { x: unitX.x - origin.x, y: unitX.y - origin.y };
+    const basisY = { x: unitY.x - origin.x, y: unitY.y - origin.y };
+    // Check effective scale in each axis
+    const scaleX = Math.hypot(basisX.x, basisX.y);
+    const scaleY = Math.hypot(basisY.x, basisY.y);
+    // If either axis is too compressed, the inverse will explode
+    const minScale = Math.min(scaleX, scaleY);
+    if (minScale < 1 / MAX_SCALE_FACTOR) {
+        // Content is nearly invisible, e.g. 89.96deg X rotation (edge-on view)
+        return new DOMRect(0, 0, 0, 0);
+    }
+    // 3. Build the effective 2D matrix and invert it
+    const effective2D = new DOMMatrix([
+        basisX.x,
+        basisX.y, // a, b (first column)
+        basisY.x,
+        basisY.y, // c, d (second column)
+        origin.x,
+        origin.y, // e, f (translation)
+    ]);
+    const inverse2D = effective2D.inverse();
+    const wasNotInvertible = isNaN(inverse2D.m11);
+    // For example, a 90 degree rotation, is not being rendered
+    if (wasNotInvertible) {
+        return new DOMRect(0, 0, 0, 0);
+    }
+    // 4. Transform target rect corners using the 2D inverse
+    const corners = [
+        new DOMPoint(targetRect.x, targetRect.y),
+        new DOMPoint(targetRect.x + targetRect.width, targetRect.y),
+        new DOMPoint(targetRect.x + targetRect.width, targetRect.y + targetRect.height),
+        new DOMPoint(targetRect.x, targetRect.y + targetRect.height),
+    ];
+    const transformedCorners = corners.map((c) => c.matrixTransform(inverse2D));
+    // 5. Compute bounding box
+    const xs = transformedCorners.map((p) => p.x);
+    const ys = transformedCorners.map((p) => p.y);
+    return new DOMRect(Math.min(...xs), Math.min(...ys), Math.max(...xs) - Math.min(...xs), Math.max(...ys) - Math.min(...ys));
+}

package/dist/drawing/handle-3d-transform.js

@@ -0,0 +1,26 @@
+import { getBiggestBoundingClientRect } from '../get-biggest-bounding-client-rect';
+import { getNarrowerRect } from './clamp-rect-to-parent-bounds';
+import { getPreTransformRect } from './get-pretransform-rect';
+import { transformIn3d } from './transform-in-3d';
+export const getPrecomposeRectFor3DTransform = ({ element, parentRect, matrix, }) => {
+    const unclampedBiggestBoundingClientRect = getBiggestBoundingClientRect(element);
+    const biggestPossiblePretransformRect = getPreTransformRect(parentRect, matrix);
+    const preTransformRect = getNarrowerRect({
+        firstRect: unclampedBiggestBoundingClientRect,
+        secondRect: biggestPossiblePretransformRect,
+    });
+    return preTransformRect;
+};
+export const handle3dTransform = ({ matrix, precomposeRect, tempCanvas, rectAfterTransforms, internalState, }) => {
+    const { canvas: transformed, rect: transformedRect } = transformIn3d({
+        untransformedRect: precomposeRect,
+        matrix,
+        sourceCanvas: tempCanvas,
+        rectAfterTransforms,
+        internalState,
+    });
+    if (transformedRect.width <= 0 || transformedRect.height <= 0) {
+        return null;
+    }
+    return transformed;
+};

package/dist/drawing/handle-mask.js

@@ -0,0 +1,21 @@
+import { getBiggestBoundingClientRect } from '../get-biggest-bounding-client-rect';
+import { createCanvasGradient } from './parse-linear-gradient';
+export const getPrecomposeRectForMask = (element) => {
+    const boundingRect = getBiggestBoundingClientRect(element);
+    return boundingRect;
+};
+export const handleMask = ({ gradientInfo, rect, precomposeRect, tempContext, }) => {
+    const rectOffsetX = rect.left - precomposeRect.left;
+    const rectOffsetY = rect.top - precomposeRect.top;
+    const rectToFill = new DOMRect(rectOffsetX, rectOffsetY, rect.width, rect.height);
+    const gradient = createCanvasGradient({
+        ctx: tempContext,
+        rect: rectToFill,
+        gradientInfo,
+        offsetLeft: 0,
+        offsetTop: 0,
+    });
+    tempContext.globalCompositeOperation = 'destination-in';
+    tempContext.fillStyle = gradient;
+    tempContext.fillRect(rectToFill.left, rectToFill.top, rectToFill.width, rectToFill.height);
+};

package/dist/drawing/has-transform.js

@@ -0,0 +1,14 @@
+export const hasTransformCssValue = (style) => {
+    return style.transform !== 'none' && style.transform !== '';
+};
+export const hasRotateCssValue = (style) => {
+    return style.rotate !== 'none' && style.rotate !== '';
+};
+export const hasScaleCssValue = (style) => {
+    return style.scale !== 'none' && style.scale !== '';
+};
+export const hasAnyTransformCssValue = (style) => {
+    return (hasTransformCssValue(style) ||
+        hasRotateCssValue(style) ||
+        hasScaleCssValue(style));
+};

package/dist/drawing/mask-image.js

@@ -0,0 +1,14 @@
+import { parseLinearGradient } from './parse-linear-gradient';
+export const getMaskImageValue = (computedStyle) => {
+    // Check both standard and webkit-prefixed properties
+    const { maskImage, webkitMaskImage } = computedStyle;
+    const value = maskImage || webkitMaskImage;
+    if (!value || value === 'none') {
+        return null;
+    }
+    return value;
+};
+export const parseMaskImage = (maskImageValue) => {
+    // Only linear gradients are supported for now
+    return parseLinearGradient(maskImageValue);
+};

package/dist/drawing/opacity.js

@@ -0,0 +1,7 @@
+export const setOpacity = ({ ctx, opacity, }) => {
+    const previousAlpha = ctx.globalAlpha;
+    ctx.globalAlpha = previousAlpha * opacity;
+    return () => {
+        ctx.globalAlpha = previousAlpha;
+    };
+};

package/dist/drawing/overflow.js

@@ -0,0 +1,14 @@
+import { setBorderRadius } from './border-radius';
+export const setOverflowHidden = ({ ctx, rect, borderRadius, overflowHidden, computedStyle, backgroundClip, }) => {
+    if (!overflowHidden) {
+        return () => { };
+    }
+    return setBorderRadius({
+        ctx,
+        rect,
+        borderRadius,
+        forceClipEvenWhenZero: true,
+        computedStyle,
+        backgroundClip,
+    });
+};

package/dist/drawing/parse-linear-gradient.js

@@ -0,0 +1,260 @@
+import { NoReactInternals } from 'remotion/no-react';
+const isValidColor = (color) => {
+    try {
+        const result = NoReactInternals.processColor(color);
+        return result !== null && result !== undefined;
+    }
+    catch (_a) {
+        return false;
+    }
+};
+const parseDirection = (directionStr) => {
+    const trimmed = directionStr.trim().toLowerCase();
+    // Handle keywords like "to right", "to bottom", etc.
+    if (trimmed.startsWith('to ')) {
+        const direction = trimmed.substring(3).trim();
+        switch (direction) {
+            case 'top':
+                return 0;
+            case 'right':
+                return 90;
+            case 'bottom':
+                return 180;
+            case 'left':
+                return 270;
+            case 'top right':
+            case 'right top':
+                return 45;
+            case 'bottom right':
+            case 'right bottom':
+                return 135;
+            case 'bottom left':
+            case 'left bottom':
+                return 225;
+            case 'top left':
+            case 'left top':
+                return 315;
+            default:
+                return 180; // Default to bottom
+        }
+    }
+    // Handle angle values: deg, rad, grad, turn
+    const angleMatch = trimmed.match(/^(-?\d+\.?\d*)(deg|rad|grad|turn)$/);
+    if (angleMatch) {
+        const value = parseFloat(angleMatch[1]);
+        const unit = angleMatch[2];
+        switch (unit) {
+            case 'deg':
+                return value;
+            case 'rad':
+                return (value * 180) / Math.PI;
+            case 'grad':
+                return (value * 360) / 400;
+            case 'turn':
+                return value * 360;
+            default:
+                return value;
+        }
+    }
+    // Default: to bottom
+    return 180;
+};
+const parseColorStops = (colorStopsStr) => {
+    // Split by comma, but respect parentheses in rgba(), rgb(), hsl(), hsla()
+    const parts = colorStopsStr.split(/,(?![^(]*\))/);
+    const stops = [];
+    for (const part of parts) {
+        const trimmed = part.trim();
+        if (!trimmed)
+            continue;
+        // Extract color: can be rgb(), rgba(), hsl(), hsla(), hex, or named color
+        const colorMatch = trimmed.match(/(rgba?\([^)]+\)|hsla?\([^)]+\)|#[0-9a-f]{3,8}|[a-z]+)/i);
+        if (!colorMatch) {
+            continue;
+        }
+        const colorStr = colorMatch[0];
+        // Validate that this is actually a valid CSS color
+        if (!isValidColor(colorStr)) {
+            continue;
+        }
+        const remaining = trimmed
+            .substring(colorMatch.index + colorStr.length)
+            .trim();
+        // Canvas API supports CSS colors directly, so we can use the color string as-is
+        const normalizedColor = colorStr;
+        // Parse position if provided
+        let position = null;
+        if (remaining) {
+            const posMatch = remaining.match(/(-?\d+\.?\d*)(%|px)?/);
+            if (posMatch) {
+                const value = parseFloat(posMatch[1]);
+                const unit = posMatch[2];
+                if (unit === '%') {
+                    position = value / 100;
+                }
+                else if (unit === 'px') {
+                    // px values need element dimensions, which we don't have here
+                    // We'll handle this as a percentage for now (not fully CSS-compliant but good enough)
+                    position = null;
+                }
+                else {
+                    position = value / 100; // Assume percentage if no unit
+                }
+            }
+        }
+        stops.push({
+            color: normalizedColor,
+            position: position !== null ? position : -1, // -1 means needs to be calculated
+        });
+    }
+    if (stops.length === 0) {
+        return null;
+    }
+    // Distribute positions evenly for stops that don't have explicit positions
+    let lastExplicitIndex = -1;
+    let lastExplicitPosition = 0;
+    for (let i = 0; i < stops.length; i++) {
+        if (stops[i].position !== -1) {
+            // Found an explicit position
+            if (lastExplicitIndex >= 0) {
+                // Interpolate between last explicit and current explicit
+                const numImplicit = i - lastExplicitIndex - 1;
+                if (numImplicit > 0) {
+                    const step = (stops[i].position - lastExplicitPosition) / (numImplicit + 1);
+                    for (let j = lastExplicitIndex + 1; j < i; j++) {
+                        stops[j].position =
+                            lastExplicitPosition + step * (j - lastExplicitIndex);
+                    }
+                }
+            }
+            else {
+                // Backfill from start to first explicit
+                const numImplicit = i;
+                if (numImplicit > 0) {
+                    const step = stops[i].position / (numImplicit + 1);
+                    for (let j = 0; j < i; j++) {
+                        stops[j].position = step * (j + 1);
+                    }
+                }
+            }
+            lastExplicitIndex = i;
+            lastExplicitPosition = stops[i].position;
+        }
+    }
+    // If no explicit positions were provided at all, distribute evenly
+    // Check this BEFORE handling trailing stops
+    if (stops.every((s) => s.position === -1)) {
+        if (stops.length === 1) {
+            stops[0].position = 0.5;
+        }
+        else {
+            for (let i = 0; i < stops.length; i++) {
+                stops[i].position = i / (stops.length - 1);
+            }
+        }
+    }
+    else if (lastExplicitIndex < stops.length - 1) {
+        const numImplicit = stops.length - 1 - lastExplicitIndex;
+        const step = (1 - lastExplicitPosition) / (numImplicit + 1);
+        for (let i = lastExplicitIndex + 1; i < stops.length; i++) {
+            stops[i].position = lastExplicitPosition + step * (i - lastExplicitIndex);
+        }
+    }
+    // Clamp positions to 0-1
+    for (const stop of stops) {
+        stop.position = Math.max(0, Math.min(1, stop.position));
+    }
+    return stops;
+};
+const extractGradientContent = (backgroundImage) => {
+    const prefix = 'linear-gradient(';
+    const startIndex = backgroundImage.toLowerCase().indexOf(prefix);
+    if (startIndex === -1) {
+        return null;
+    }
+    // Find matching closing parenthesis, handling nested parens from rgb(), rgba(), etc.
+    let depth = 0;
+    const contentStart = startIndex + prefix.length;
+    for (let i = contentStart; i < backgroundImage.length; i++) {
+        const char = backgroundImage[i];
+        if (char === '(') {
+            depth++;
+        }
+        else if (char === ')') {
+            if (depth === 0) {
+                return backgroundImage.substring(contentStart, i).trim();
+            }
+            depth--;
+        }
+    }
+    return null;
+};
+export const parseLinearGradient = (backgroundImage) => {
+    if (!backgroundImage || backgroundImage === 'none') {
+        return null;
+    }
+    const content = extractGradientContent(backgroundImage);
+    if (!content) {
+        return null;
+    }
+    // Try to identify the direction/angle part vs color stops
+    // Direction/angle is optional and comes first
+    // It can be: "to right", "45deg", etc.
+    // Split into parts, respecting parentheses
+    const parts = content.split(/,(?![^(]*\))/);
+    let angle = 180; // Default: to bottom
+    let colorStopsStart = 0;
+    // Check if first part is a direction/angle
+    if (parts.length > 0) {
+        const firstPart = parts[0].trim();
+        // Check if it looks like a direction or angle (not a color)
+        const isDirection = firstPart.startsWith('to ') ||
+            /^-?\d+\.?\d*(deg|rad|grad|turn)$/.test(firstPart);
+        if (isDirection) {
+            angle = parseDirection(firstPart);
+            colorStopsStart = 1;
+        }
+    }
+    // Parse color stops
+    const colorStopsStr = parts.slice(colorStopsStart).join(',');
+    const colorStops = parseColorStops(colorStopsStr);
+    if (!colorStops || colorStops.length === 0) {
+        return null;
+    }
+    return {
+        angle,
+        colorStops,
+    };
+};
+export const createCanvasGradient = ({ ctx, rect, gradientInfo, offsetLeft, offsetTop, }) => {
+    // Convert angle to radians
+    // CSS angles: 0deg = to top, 90deg = to right, 180deg = to bottom, 270deg = to left
+    // We need to calculate the gradient line that spans the rectangle at the given angle
+    const angleRad = ((gradientInfo.angle - 90) * Math.PI) / 180;
+    const centerX = rect.left - offsetLeft + rect.width / 2;
+    const centerY = rect.top - offsetTop + rect.height / 2;
+    // Calculate gradient line endpoints
+    // The gradient line passes through the center and has the specified angle
+    const cos = Math.cos(angleRad);
+    const sin = Math.sin(angleRad);
+    // Find the intersection of the gradient line with the rectangle edges
+    const halfWidth = rect.width / 2;
+    const halfHeight = rect.height / 2;
+    // Calculate the length from center to edge along the gradient line.
+    // Primary formula should always be > 0 for valid angles and non-zero rects;
+    // fall back to diagonal length only for degenerate or invalid cases.
+    let length = Math.abs(cos) * halfWidth + Math.abs(sin) * halfHeight;
+    if (!Number.isFinite(length) || length === 0) {
+        length = Math.sqrt(halfWidth ** 2 + halfHeight ** 2);
+    }
+    const x0 = centerX - cos * length;
+    const y0 = centerY - sin * length;
+    const x1 = centerX + cos * length;
+    const y1 = centerY + sin * length;
+    const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
+    // Add color stops
+    for (const stop of gradientInfo.colorStops) {
+        gradient.addColorStop(stop.position, stop.color);
+    }
+    return gradient;
+};

package/dist/drawing/parse-transform-origin.js

@@ -0,0 +1,7 @@
+export const parseTransformOrigin = (transformOrigin) => {
+    if (transformOrigin.trim() === '') {
+        return null;
+    }
+    const [x, y] = transformOrigin.split(' ');
+    return { x: parseFloat(x), y: parseFloat(y) };
+};

package/dist/drawing/precompose.d.ts

@@ -0,0 +1,11 @@
+import type { LogLevel } from 'remotion';
+import type { InternalState } from '../internal-state';
+export declare const precomposeDOMElement: ({ boundingRect, element, logLevel, internalState, }: {
+    boundingRect: DOMRect;
+    element: HTMLElement | SVGElement;
+    logLevel: LogLevel;
+    internalState: InternalState;
+}) => Promise<{
+    tempCanvas: OffscreenCanvas;
+    tempContext: OffscreenCanvasRenderingContext2D;
+}>;

package/dist/drawing/precompose.js

@@ -0,0 +1,14 @@
+import { compose } from '../compose';
+export const precomposeDOMElement = async ({ boundingRect, element, logLevel, internalState, }) => {
+    const tempCanvas = new OffscreenCanvas(boundingRect.width, boundingRect.height);
+    const tempContext = tempCanvas.getContext('2d');
+    await compose({
+        element,
+        context: tempContext,
+        logLevel,
+        parentRect: boundingRect,
+        internalState,
+        onlyBackgroundClip: false,
+    });
+    return { tempCanvas, tempContext };
+};