@remotion/web-renderer 4.0.424 → 4.0.425

package/dist/drawing/calculate-transforms.js

@@ -0,0 +1,127 @@
+import { hasAnyTransformCssValue, hasTransformCssValue } from './has-transform';
+import { getMaskImageValue, parseMaskImage } from './mask-image';
+import { parseTransformOrigin } from './parse-transform-origin';
+const getInternalTransformOrigin = (transform) => {
+    var _a;
+    const centerX = transform.boundingClientRect.width / 2;
+    const centerY = transform.boundingClientRect.height / 2;
+    const origin = (_a = parseTransformOrigin(transform.transformOrigin)) !== null && _a !== void 0 ? _a : {
+        x: centerX,
+        y: centerY,
+    };
+    return origin;
+};
+const getGlobalTransformOrigin = ({ transform }) => {
+    const { x: originX, y: originY } = getInternalTransformOrigin(transform);
+    return {
+        x: originX + transform.boundingClientRect.left,
+        y: originY + transform.boundingClientRect.top,
+    };
+};
+export const calculateTransforms = ({ element, rootElement, }) => {
+    // Compute the cumulative transform by traversing parent nodes
+    let parent = element;
+    const transforms = [];
+    const toReset = [];
+    let opacity = 1;
+    let elementComputedStyle = null;
+    let maskImageInfo = null;
+    while (parent) {
+        const computedStyle = getComputedStyle(parent);
+        if (parent === element) {
+            elementComputedStyle = computedStyle;
+            opacity = parseFloat(computedStyle.opacity);
+            const maskImageValue = getMaskImageValue(computedStyle);
+            maskImageInfo = maskImageValue ? parseMaskImage(maskImageValue) : null;
+            const originalMaskImage = parent.style.maskImage;
+            const originalWebkitMaskImage = parent.style.webkitMaskImage;
+            parent.style.maskImage = 'none';
+            parent.style.webkitMaskImage = 'none';
+            const parentRef = parent;
+            toReset.push(() => {
+                parentRef.style.maskImage = originalMaskImage;
+                parentRef.style.webkitMaskImage = originalWebkitMaskImage;
+            });
+        }
+        if (hasAnyTransformCssValue(computedStyle) || parent === element) {
+            const toParse = hasTransformCssValue(computedStyle)
+                ? computedStyle.transform
+                : undefined;
+            const matrix = new DOMMatrix(toParse);
+            const { transform, scale, rotate } = parent.style;
+            const additionalMatrices = [];
+            // The order of transformations is:
+            // 1. Translate --> We do not have to consider it since it changes getClientBoundingRect()
+            // 2. Rotate
+            // 3. Scale
+            // 4. CSS "transform"
+            if (rotate !== '' && rotate !== 'none') {
+                additionalMatrices.push(new DOMMatrix(`rotate(${rotate})`));
+            }
+            if (scale !== '' && scale !== 'none') {
+                additionalMatrices.push(new DOMMatrix(`scale(${scale})`));
+            }
+            additionalMatrices.push(matrix);
+            parent.style.transform = 'none';
+            parent.style.scale = 'none';
+            parent.style.rotate = 'none';
+            transforms.push({
+                element: parent,
+                transformOrigin: computedStyle.transformOrigin,
+                boundingClientRect: null,
+                matrices: additionalMatrices,
+            });
+            const parentRef = parent;
+            toReset.push(() => {
+                parentRef.style.transform = transform;
+                parentRef.style.scale = scale;
+                parentRef.style.rotate = rotate;
+            });
+        }
+        if (parent === rootElement) {
+            break;
+        }
+        parent = parent.parentElement;
+    }
+    for (const transform of transforms) {
+        transform.boundingClientRect = transform.element.getBoundingClientRect();
+    }
+    const dimensions = transforms[0].boundingClientRect;
+    const nativeTransformOrigin = getInternalTransformOrigin(transforms[0]);
+    const totalMatrix = new DOMMatrix();
+    for (const transform of transforms.slice().reverse()) {
+        for (const matrix of transform.matrices) {
+            const globalTransformOrigin = getGlobalTransformOrigin({
+                transform,
+            });
+            const transformMatrix = new DOMMatrix()
+                .translate(globalTransformOrigin.x, globalTransformOrigin.y)
+                .multiply(matrix)
+                .translate(-globalTransformOrigin.x, -globalTransformOrigin.y);
+            totalMatrix.multiplySelf(transformMatrix);
+        }
+    }
+    if (!elementComputedStyle) {
+        throw new Error('Element computed style not found');
+    }
+    const needs3DTransformViaWebGL = !totalMatrix.is2D;
+    const needsMaskImage = maskImageInfo !== null;
+    return {
+        dimensions,
+        totalMatrix,
+        reset: () => {
+            for (const reset of toReset) {
+                reset();
+            }
+        },
+        nativeTransformOrigin,
+        computedStyle: elementComputedStyle,
+        opacity,
+        maskImageInfo,
+        precompositing: {
+            needs3DTransformViaWebGL,
+            needsMaskImage: maskImageInfo,
+            needsPrecompositing: Boolean(needs3DTransformViaWebGL || needsMaskImage),
+        },
+    };
+};

package/dist/drawing/clamp-rect-to-parent-bounds.js

@@ -0,0 +1,18 @@
+import { roundToExpandRect } from './round-to-expand-rect';
+export const getNarrowerRect = ({ firstRect, secondRect, }) => {
+    const left = Math.max(firstRect.left, secondRect.left);
+    const top = Math.max(firstRect.top, secondRect.top);
+    const bottom = Math.min(firstRect.bottom, secondRect.bottom);
+    const right = Math.min(firstRect.right, secondRect.right);
+    return new DOMRect(left, top, right - left, bottom - top);
+};
+export const getWiderRectAndExpand = ({ firstRect, secondRect, }) => {
+    if (firstRect === null) {
+        return roundToExpandRect(secondRect);
+    }
+    const left = Math.min(firstRect.left, secondRect.left);
+    const top = Math.min(firstRect.top, secondRect.top);
+    const bottom = Math.max(firstRect.bottom, secondRect.bottom);
+    const right = Math.max(firstRect.right, secondRect.right);
+    return roundToExpandRect(new DOMRect(left, top, right - left, bottom - top));
+};

package/dist/drawing/do-rects-intersect.js

@@ -0,0 +1,6 @@
+export function doRectsIntersect(rect1, rect2) {
+    return !(rect1.right <= rect2.left ||
+        rect1.left >= rect2.right ||
+        rect1.bottom <= rect2.top ||
+        rect1.top >= rect2.bottom);
+}

package/dist/drawing/draw-background.js

@@ -0,0 +1,62 @@
+import { getClippedBackground } from './get-clipped-background';
+import { getBoxBasedOnBackgroundClip } from './get-padding-box';
+import { createCanvasGradient, parseLinearGradient, } from './parse-linear-gradient';
+export const drawBackground = async ({ backgroundImage, context, rect, backgroundColor, backgroundClip, element, logLevel, internalState, computedStyle, offsetLeft: parentOffsetLeft, offsetTop: parentOffsetTop, }) => {
+    let contextToDraw = context;
+    const originalCompositeOperation = context.globalCompositeOperation;
+    let offsetLeft = 0;
+    let offsetTop = 0;
+    const finish = () => {
+        context.globalCompositeOperation = originalCompositeOperation;
+        if (context !== contextToDraw) {
+            context.drawImage(contextToDraw.canvas, offsetLeft, offsetTop, contextToDraw.canvas.width, contextToDraw.canvas.height);
+        }
+    };
+    const boundingRect = getBoxBasedOnBackgroundClip(rect, computedStyle, backgroundClip);
+    if (backgroundClip.includes('text')) {
+        offsetLeft = boundingRect.left;
+        offsetTop = boundingRect.top;
+        const originalBackgroundClip = element.style.backgroundClip;
+        const originalWebkitBackgroundClip = element.style.webkitBackgroundClip;
+        element.style.backgroundClip = 'initial';
+        element.style.webkitBackgroundClip = 'initial';
+        const drawn = await getClippedBackground({
+            element,
+            boundingRect: new DOMRect(boundingRect.left + parentOffsetLeft, boundingRect.top + parentOffsetTop, boundingRect.width, boundingRect.height),
+            logLevel,
+            internalState,
+        });
+        element.style.backgroundClip = originalBackgroundClip;
+        element.style.webkitBackgroundClip = originalWebkitBackgroundClip;
+        contextToDraw = drawn;
+        contextToDraw.globalCompositeOperation = 'source-in';
+    }
+    if (backgroundImage && backgroundImage !== 'none') {
+        const gradientInfo = parseLinearGradient(backgroundImage);
+        if (gradientInfo) {
+            const gradient = createCanvasGradient({
+                ctx: contextToDraw,
+                rect: boundingRect,
+                gradientInfo,
+                offsetLeft,
+                offsetTop,
+            });
+            const originalFillStyle = contextToDraw.fillStyle;
+            contextToDraw.fillStyle = gradient;
+            contextToDraw.fillRect(boundingRect.left - offsetLeft, boundingRect.top - offsetTop, boundingRect.width, boundingRect.height);
+            contextToDraw.fillStyle = originalFillStyle;
+            return finish();
+        }
+    }
+    // Fallback to solid background color if no gradient was drawn
+    if (backgroundColor &&
+        backgroundColor !== 'transparent' &&
+        !(backgroundColor.startsWith('rgba') &&
+            (backgroundColor.endsWith(', 0)') || backgroundColor.endsWith(',0')))) {
+        const originalFillStyle = contextToDraw.fillStyle;
+        contextToDraw.fillStyle = backgroundColor;
+        contextToDraw.fillRect(boundingRect.left - offsetLeft, boundingRect.top - offsetTop, boundingRect.width, boundingRect.height);
+        contextToDraw.fillStyle = originalFillStyle;
+    }
+    finish();
+};

package/dist/drawing/draw-border.js

@@ -0,0 +1,353 @@
+const parseBorderWidth = (value) => {
+    return parseFloat(value) || 0;
+};
+const getBorderSideProperties = (computedStyle) => {
+    // Parse individual border properties for each side
+    // This handles both shorthand (border: "1px solid red") and longhand (border-top-width: "1px") properties
+    return {
+        top: {
+            width: parseBorderWidth(computedStyle.borderTopWidth),
+            color: computedStyle.borderTopColor || computedStyle.borderColor || 'black',
+            style: computedStyle.borderTopStyle || computedStyle.borderStyle || 'solid',
+        },
+        right: {
+            width: parseBorderWidth(computedStyle.borderRightWidth),
+            color: computedStyle.borderRightColor || computedStyle.borderColor || 'black',
+            style: computedStyle.borderRightStyle || computedStyle.borderStyle || 'solid',
+        },
+        bottom: {
+            width: parseBorderWidth(computedStyle.borderBottomWidth),
+            color: computedStyle.borderBottomColor || computedStyle.borderColor || 'black',
+            style: computedStyle.borderBottomStyle || computedStyle.borderStyle || 'solid',
+        },
+        left: {
+            width: parseBorderWidth(computedStyle.borderLeftWidth),
+            color: computedStyle.borderLeftColor || computedStyle.borderColor || 'black',
+            style: computedStyle.borderLeftStyle || computedStyle.borderStyle || 'solid',
+        },
+    };
+};
+const getLineDashPattern = (style, width) => {
+    if (style === 'dashed') {
+        return [width * 2, width];
+    }
+    if (style === 'dotted') {
+        return [width, width];
+    }
+    return [];
+};
+const drawBorderSide = ({ ctx, side, x, y, width, height, borderRadius, borderProperties, }) => {
+    const { width: borderWidth, color, style } = borderProperties;
+    if (borderWidth <= 0 || style === 'none' || style === 'hidden') {
+        return;
+    }
+    ctx.beginPath();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = borderWidth;
+    ctx.setLineDash(getLineDashPattern(style, borderWidth));
+    const halfWidth = borderWidth / 2;
+    if (side === 'top') {
+        // Start point (accounting for left border and top-left radius)
+        const startX = x + borderRadius.topLeft.horizontal;
+        const startY = y + halfWidth;
+        // End point (accounting for top-right radius)
+        const endX = x + width - borderRadius.topRight.horizontal;
+        const endY = y + halfWidth;
+        ctx.moveTo(startX, startY);
+        ctx.lineTo(endX, endY);
+    }
+    else if (side === 'right') {
+        // Start point (accounting for top border and top-right radius)
+        const startX = x + width - halfWidth;
+        const startY = y + borderRadius.topRight.vertical;
+        // End point (accounting for bottom-right radius)
+        const endX = x + width - halfWidth;
+        const endY = y + height - borderRadius.bottomRight.vertical;
+        ctx.moveTo(startX, startY);
+        ctx.lineTo(endX, endY);
+    }
+    else if (side === 'bottom') {
+        // Start point (accounting for bottom-left radius)
+        const startX = x + borderRadius.bottomLeft.horizontal;
+        const startY = y + height - halfWidth;
+        // End point (accounting for right border and bottom-right radius)
+        const endX = x + width - borderRadius.bottomRight.horizontal;
+        const endY = y + height - halfWidth;
+        ctx.moveTo(startX, startY);
+        ctx.lineTo(endX, endY);
+    }
+    else if (side === 'left') {
+        // Start point (accounting for top-left radius)
+        const startX = x + halfWidth;
+        const startY = y + borderRadius.topLeft.vertical;
+        // End point (accounting for bottom border and bottom-left radius)
+        const endX = x + halfWidth;
+        const endY = y + height - borderRadius.bottomLeft.vertical;
+        ctx.moveTo(startX, startY);
+        ctx.lineTo(endX, endY);
+    }
+    ctx.stroke();
+};
+const drawCorner = ({ ctx, corner, x, y, width, height, borderRadius, topBorder, rightBorder, bottomBorder, leftBorder, }) => {
+    const radius = borderRadius[corner];
+    if (radius.horizontal <= 0 && radius.vertical <= 0) {
+        return;
+    }
+    let border1;
+    let border2;
+    let centerX;
+    let centerY;
+    let startAngle;
+    let endAngle;
+    if (corner === 'topLeft') {
+        border1 = leftBorder;
+        border2 = topBorder;
+        centerX = x + radius.horizontal;
+        centerY = y + radius.vertical;
+        startAngle = Math.PI;
+        endAngle = (Math.PI * 3) / 2;
+    }
+    else if (corner === 'topRight') {
+        border1 = topBorder;
+        border2 = rightBorder;
+        centerX = x + width - radius.horizontal;
+        centerY = y + radius.vertical;
+        startAngle = -Math.PI / 2;
+        endAngle = 0;
+    }
+    else if (corner === 'bottomRight') {
+        border1 = rightBorder;
+        border2 = bottomBorder;
+        centerX = x + width - radius.horizontal;
+        centerY = y + height - radius.vertical;
+        startAngle = 0;
+        endAngle = Math.PI / 2;
+    }
+    else {
+        // bottomLeft
+        border1 = bottomBorder;
+        border2 = leftBorder;
+        centerX = x + radius.horizontal;
+        centerY = y + height - radius.vertical;
+        startAngle = Math.PI / 2;
+        endAngle = Math.PI;
+    }
+    // Draw corner arc - use the average of the two adjacent borders
+    // In a more sophisticated implementation, we could blend the two borders
+    const avgWidth = (border1.width + border2.width) / 2;
+    const useColor = border1.width >= border2.width ? border1.color : border2.color;
+    const useStyle = border1.width >= border2.width ? border1.style : border2.style;
+    if (avgWidth > 0 && useStyle !== 'none' && useStyle !== 'hidden') {
+        ctx.beginPath();
+        ctx.strokeStyle = useColor;
+        ctx.lineWidth = avgWidth;
+        ctx.setLineDash(getLineDashPattern(useStyle, avgWidth));
+        // Adjust radius for the border width
+        const adjustedRadiusH = Math.max(0, radius.horizontal - avgWidth / 2);
+        const adjustedRadiusV = Math.max(0, radius.vertical - avgWidth / 2);
+        ctx.ellipse(centerX, centerY, adjustedRadiusH, adjustedRadiusV, 0, startAngle, endAngle);
+        ctx.stroke();
+    }
+};
+const drawUniformBorder = ({ ctx, x, y, width, height, borderRadius, borderWidth, borderColor, borderStyle, }) => {
+    ctx.beginPath();
+    ctx.strokeStyle = borderColor;
+    ctx.lineWidth = borderWidth;
+    ctx.setLineDash(getLineDashPattern(borderStyle, borderWidth));
+    const halfWidth = borderWidth / 2;
+    const borderX = x + halfWidth;
+    const borderY = y + halfWidth;
+    const borderW = width - borderWidth;
+    const borderH = height - borderWidth;
+    // Adjust border radius for the border width
+    const adjustedBorderRadius = {
+        topLeft: {
+            horizontal: Math.max(0, borderRadius.topLeft.horizontal - halfWidth),
+            vertical: Math.max(0, borderRadius.topLeft.vertical - halfWidth),
+        },
+        topRight: {
+            horizontal: Math.max(0, borderRadius.topRight.horizontal - halfWidth),
+            vertical: Math.max(0, borderRadius.topRight.vertical - halfWidth),
+        },
+        bottomRight: {
+            horizontal: Math.max(0, borderRadius.bottomRight.horizontal - halfWidth),
+            vertical: Math.max(0, borderRadius.bottomRight.vertical - halfWidth),
+        },
+        bottomLeft: {
+            horizontal: Math.max(0, borderRadius.bottomLeft.horizontal - halfWidth),
+            vertical: Math.max(0, borderRadius.bottomLeft.vertical - halfWidth),
+        },
+    };
+    // Draw continuous path with border radius
+    ctx.moveTo(borderX + adjustedBorderRadius.topLeft.horizontal, borderY);
+    // Top edge
+    ctx.lineTo(borderX + borderW - adjustedBorderRadius.topRight.horizontal, borderY);
+    // Top-right corner
+    if (adjustedBorderRadius.topRight.horizontal > 0 ||
+        adjustedBorderRadius.topRight.vertical > 0) {
+        ctx.ellipse(borderX + borderW - adjustedBorderRadius.topRight.horizontal, borderY + adjustedBorderRadius.topRight.vertical, adjustedBorderRadius.topRight.horizontal, adjustedBorderRadius.topRight.vertical, 0, -Math.PI / 2, 0);
+    }
+    // Right edge
+    ctx.lineTo(borderX + borderW, borderY + borderH - adjustedBorderRadius.bottomRight.vertical);
+    // Bottom-right corner
+    if (adjustedBorderRadius.bottomRight.horizontal > 0 ||
+        adjustedBorderRadius.bottomRight.vertical > 0) {
+        ctx.ellipse(borderX + borderW - adjustedBorderRadius.bottomRight.horizontal, borderY + borderH - adjustedBorderRadius.bottomRight.vertical, adjustedBorderRadius.bottomRight.horizontal, adjustedBorderRadius.bottomRight.vertical, 0, 0, Math.PI / 2);
+    }
+    // Bottom edge
+    ctx.lineTo(borderX + adjustedBorderRadius.bottomLeft.horizontal, borderY + borderH);
+    // Bottom-left corner
+    if (adjustedBorderRadius.bottomLeft.horizontal > 0 ||
+        adjustedBorderRadius.bottomLeft.vertical > 0) {
+        ctx.ellipse(borderX + adjustedBorderRadius.bottomLeft.horizontal, borderY + borderH - adjustedBorderRadius.bottomLeft.vertical, adjustedBorderRadius.bottomLeft.horizontal, adjustedBorderRadius.bottomLeft.vertical, 0, Math.PI / 2, Math.PI);
+    }
+    // Left edge
+    ctx.lineTo(borderX, borderY + adjustedBorderRadius.topLeft.vertical);
+    // Top-left corner
+    if (adjustedBorderRadius.topLeft.horizontal > 0 ||
+        adjustedBorderRadius.topLeft.vertical > 0) {
+        ctx.ellipse(borderX + adjustedBorderRadius.topLeft.horizontal, borderY + adjustedBorderRadius.topLeft.vertical, adjustedBorderRadius.topLeft.horizontal, adjustedBorderRadius.topLeft.vertical, 0, Math.PI, (Math.PI * 3) / 2);
+    }
+    ctx.closePath();
+    ctx.stroke();
+};
+export const drawBorder = ({ ctx, rect, borderRadius, computedStyle, }) => {
+    const borders = getBorderSideProperties(computedStyle);
+    // Check if we have any visible border
+    const hasBorder = borders.top.width > 0 ||
+        borders.right.width > 0 ||
+        borders.bottom.width > 0 ||
+        borders.left.width > 0;
+    if (!hasBorder) {
+        return;
+    }
+    // Save original canvas state
+    const originalStrokeStyle = ctx.strokeStyle;
+    const originalLineWidth = ctx.lineWidth;
+    const originalLineDash = ctx.getLineDash();
+    // Check if all borders are uniform (same width, color, and style)
+    const allSidesEqual = borders.top.width === borders.right.width &&
+        borders.top.width === borders.bottom.width &&
+        borders.top.width === borders.left.width &&
+        borders.top.color === borders.right.color &&
+        borders.top.color === borders.bottom.color &&
+        borders.top.color === borders.left.color &&
+        borders.top.style === borders.right.style &&
+        borders.top.style === borders.bottom.style &&
+        borders.top.style === borders.left.style &&
+        borders.top.width > 0;
+    if (allSidesEqual) {
+        // Draw as a single continuous border for continuous dashing
+        drawUniformBorder({
+            ctx,
+            x: rect.left,
+            y: rect.top,
+            width: rect.width,
+            height: rect.height,
+            borderRadius,
+            borderWidth: borders.top.width,
+            borderColor: borders.top.color,
+            borderStyle: borders.top.style,
+        });
+    }
+    else {
+        // Draw corners first (they go underneath the straight edges)
+        drawCorner({
+            ctx,
+            corner: 'topLeft',
+            x: rect.left,
+            y: rect.top,
+            width: rect.width,
+            height: rect.height,
+            borderRadius,
+            topBorder: borders.top,
+            rightBorder: borders.right,
+            bottomBorder: borders.bottom,
+            leftBorder: borders.left,
+        });
+        drawCorner({
+            ctx,
+            corner: 'topRight',
+            x: rect.left,
+            y: rect.top,
+            width: rect.width,
+            height: rect.height,
+            borderRadius,
+            topBorder: borders.top,
+            rightBorder: borders.right,
+            bottomBorder: borders.bottom,
+            leftBorder: borders.left,
+        });
+        drawCorner({
+            ctx,
+            corner: 'bottomRight',
+            x: rect.left,
+            y: rect.top,
+            width: rect.width,
+            height: rect.height,
+            borderRadius,
+            topBorder: borders.top,
+            rightBorder: borders.right,
+            bottomBorder: borders.bottom,
+            leftBorder: borders.left,
+        });
+        drawCorner({
+            ctx,
+            corner: 'bottomLeft',
+            x: rect.left,
+            y: rect.top,
+            width: rect.width,
+            height: rect.height,
+            borderRadius,
+            topBorder: borders.top,
+            rightBorder: borders.right,
+            bottomBorder: borders.bottom,
+            leftBorder: borders.left,
+        });
+        // Draw each border side
+        drawBorderSide({
+            ctx,
+            side: 'top',
+            x: rect.left,
+            y: rect.top,
+            width: rect.width,
+            height: rect.height,
+            borderRadius,
+            borderProperties: borders.top,
+        });
+        drawBorderSide({
+            ctx,
+            side: 'right',
+            x: rect.left,
+            y: rect.top,
+            width: rect.width,
+            height: rect.height,
+            borderRadius,
+            borderProperties: borders.right,
+        });
+        drawBorderSide({
+            ctx,
+            side: 'bottom',
+            x: rect.left,
+            y: rect.top,
+            width: rect.width,
+            height: rect.height,
+            borderRadius,
+            borderProperties: borders.bottom,
+        });
+        drawBorderSide({
+            ctx,
+            side: 'left',
+            x: rect.left,
+            y: rect.top,
+            width: rect.width,
+            height: rect.height,
+            borderRadius,
+            borderProperties: borders.left,
+        });
+    }
+    // Restore original canvas state
+    ctx.strokeStyle = originalStrokeStyle;
+    ctx.lineWidth = originalLineWidth;
+    ctx.setLineDash(originalLineDash);
+};

package/dist/drawing/draw-box-shadow.js

@@ -0,0 +1,103 @@
+import { Internals } from 'remotion';
+import { drawRoundedRectPath } from './draw-rounded';
+export const parseBoxShadow = (boxShadowValue) => {
+    if (!boxShadowValue || boxShadowValue === 'none') {
+        return [];
+    }
+    const shadows = [];
+    // Split by comma, but respect rgba() colors
+    const shadowStrings = boxShadowValue.split(/,(?![^(]*\))/);
+    for (const shadowStr of shadowStrings) {
+        const trimmed = shadowStr.trim();
+        if (!trimmed || trimmed === 'none') {
+            continue;
+        }
+        const shadow = {
+            offsetX: 0,
+            offsetY: 0,
+            blurRadius: 0,
+            color: 'rgba(0, 0, 0, 0.5)',
+            inset: false,
+        };
+        // Check for inset
+        shadow.inset = /\binset\b/i.test(trimmed);
+        // Remove 'inset' keyword
+        let remaining = trimmed.replace(/\binset\b/gi, '').trim();
+        // Extract color (can be rgb(), rgba(), hsl(), hsla(), hex, or named color)
+        const colorMatch = remaining.match(/(rgba?\([^)]+\)|hsla?\([^)]+\)|#[0-9a-f]{3,8}|[a-z]+)/i);
+        if (colorMatch) {
+            shadow.color = colorMatch[0];
+            remaining = remaining.replace(colorMatch[0], '').trim();
+        }
+        // Parse remaining numeric values (offset-x offset-y blur spread)
+        const numbers = remaining.match(/[+-]?\d*\.?\d+(?:px|em|rem|%)?/gi) || [];
+        const values = numbers.map((n) => parseFloat(n) || 0);
+        if (values.length >= 2) {
+            shadow.offsetX = values[0];
+            shadow.offsetY = values[1];
+            if (values.length >= 3) {
+                shadow.blurRadius = Math.max(0, values[2]); // Blur cannot be negative
+            }
+        }
+        shadows.push(shadow);
+    }
+    return shadows;
+};
+export const drawBorderRadius = ({ ctx, rect, borderRadius, computedStyle, logLevel, }) => {
+    const shadows = parseBoxShadow(computedStyle.boxShadow);
+    if (shadows.length === 0) {
+        return;
+    }
+    // Draw shadows from last to first (so first shadow appears on top)
+    for (let i = shadows.length - 1; i >= 0; i--) {
+        const shadow = shadows[i];
+        const newLeft = rect.left + Math.min(shadow.offsetX, 0) - shadow.blurRadius;
+        const newRight = rect.right + Math.max(shadow.offsetX, 0) + shadow.blurRadius;
+        const newTop = rect.top + Math.min(shadow.offsetY, 0) - shadow.blurRadius;
+        const newBottom = rect.bottom + Math.max(shadow.offsetY, 0) + shadow.blurRadius;
+        const newRect = new DOMRect(newLeft, newTop, newRight - newLeft, newBottom - newTop);
+        const leftOffset = rect.left - newLeft;
+        const topOffset = rect.top - newTop;
+        const newCanvas = new OffscreenCanvas(newRect.width, newRect.height);
+        const newCtx = newCanvas.getContext('2d');
+        if (!newCtx) {
+            throw new Error('Failed to get context');
+        }
+        if (shadow.inset) {
+            // TODO: Only warn once per render.
+            Internals.Log.warn({
+                logLevel,
+                tag: '@remotion/web-renderer',
+            }, 'Detected "box-shadow" with "inset". This is not yet supported in @remotion/web-renderer');
+            continue;
+        }
+        // Apply shadow properties to canvas
+        newCtx.shadowBlur = shadow.blurRadius;
+        newCtx.shadowColor = shadow.color;
+        newCtx.shadowOffsetX = shadow.offsetX;
+        newCtx.shadowOffsetY = shadow.offsetY;
+        newCtx.fillStyle = 'black';
+        drawRoundedRectPath({
+            ctx: newCtx,
+            x: leftOffset,
+            y: topOffset,
+            width: rect.width,
+            height: rect.height,
+            borderRadius,
+        });
+        newCtx.fill();
+        // Cut out the shape, leaving only shadow
+        newCtx.shadowColor = 'transparent';
+        newCtx.globalCompositeOperation = 'destination-out';
+        drawRoundedRectPath({
+            ctx: newCtx,
+            x: leftOffset,
+            y: topOffset,
+            width: rect.width,
+            height: rect.height,
+            borderRadius,
+        });
+        newCtx.fill();
+        ctx.drawImage(newCanvas, rect.left - leftOffset, rect.top - topOffset);
+    }
+};