@remotion/web-renderer 4.0.430 → 4.0.432

package/dist/drawing/draw-outline.js

@@ -1,93 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

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

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

@@ -1,35 +0,0 @@
-// 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

@@ -1,8 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,49 +0,0 @@
-// 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

@@ -1,26 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

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

package/dist/drawing/overflow.js

@@ -1,14 +0,0 @@
-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

@@ -1,260 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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;
-}>;