@remotion/web-renderer 4.0.395 → 4.0.397

package/dist/drawing/canvas-offset-from-rect.js

@@ -0,0 +1,12 @@
+export const canvasOffsetFromRect = ({ rect }) => {
+    const canvasOffsetLeft = Math.min(rect.left, 0);
+    const canvasOffsetTop = Math.min(rect.top, 0);
+    const canvasWidth = Math.max(rect.width, rect.right);
+    const canvasHeight = Math.max(rect.height, rect.bottom);
+    return {
+        offsetLeft: canvasOffsetLeft,
+        offsetTop: canvasOffsetTop,
+        canvasWidth,
+        canvasHeight,
+    };
+};

package/dist/drawing/clamp-rect-to-parent-bounds.d.ts

@@ -0,0 +1,8 @@
+export declare const getNarrowerRect: ({ firstRect, secondRect, }: {
+    firstRect: DOMRect;
+    secondRect: DOMRect;
+}) => DOMRect;
+export declare const getWiderRectAndExpand: ({ firstRect, secondRect, }: {
+    firstRect: DOMRect | null;
+    secondRect: DOMRect;
+}) => DOMRect;

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/compose-canvas.d.ts

@@ -0,0 +1 @@
+export declare const drawElementToCanvas: (canvas: HTMLCanvasElement | HTMLImageElement | SVGSVGElement, context: OffscreenCanvasRenderingContext2D) => Promise<void>;

package/dist/drawing/compose-canvas.js

@@ -0,0 +1,36 @@
+import { setBorderRadius } from './border-radius';
+import { calculateTransforms } from './calculate-transforms';
+import { turnSvgIntoDrawable } from './compose-svg';
+import { setOpacity } from './opacity';
+import { setTransform } from './transform';
+export const drawElementToCanvas = async (canvas, context) => {
+    const { totalMatrix, reset, dimensions, borderRadius, opacity } = calculateTransforms(canvas);
+    if (opacity === 0) {
+        reset();
+        return;
+    }
+    const drawable = canvas instanceof SVGSVGElement
+        ? await turnSvgIntoDrawable(canvas)
+        : canvas;
+    const finishTransform = setTransform({
+        ctx: context,
+        transform: totalMatrix,
+    });
+    const finishBorderRadius = setBorderRadius({
+        ctx: context,
+        x: dimensions.left,
+        y: dimensions.top,
+        width: dimensions.width,
+        height: dimensions.height,
+        borderRadius,
+    });
+    const finishOpacity = setOpacity({
+        ctx: context,
+        opacity,
+    });
+    context.drawImage(drawable, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
+    finishOpacity();
+    finishBorderRadius();
+    finishTransform();
+    reset();
+};

package/dist/drawing/compose-svg.d.ts

@@ -0,0 +1 @@
+export declare const turnSvgIntoDrawable: (svg: SVGSVGElement) => Promise<HTMLImageElement>;

package/dist/drawing/compose-svg.js

@@ -0,0 +1,34 @@
+export const turnSvgIntoDrawable = (svg) => {
+    const originalTransform = svg.style.transform;
+    const originalTransformOrigin = svg.style.transformOrigin;
+    const originalMarginLeft = svg.style.marginLeft;
+    const originalMarginRight = svg.style.marginRight;
+    const originalMarginTop = svg.style.marginTop;
+    const originalMarginBottom = svg.style.marginBottom;
+    svg.style.transform = 'none';
+    svg.style.transformOrigin = '';
+    // Margins were already included in the positioning calculation,
+    // so we need to remove them to avoid double counting.
+    svg.style.marginLeft = '0';
+    svg.style.marginRight = '0';
+    svg.style.marginTop = '0';
+    svg.style.marginBottom = '0';
+    const svgData = new XMLSerializer().serializeToString(svg);
+    svg.style.marginLeft = originalMarginLeft;
+    svg.style.marginRight = originalMarginRight;
+    svg.style.marginTop = originalMarginTop;
+    svg.style.marginBottom = originalMarginBottom;
+    svg.style.transform = originalTransform;
+    svg.style.transformOrigin = originalTransformOrigin;
+    return new Promise((resolve, reject) => {
+        const image = new Image();
+        const url = `data:image/svg+xml;base64,${btoa(svgData)}`;
+        image.onload = function () {
+            resolve(image);
+        };
+        image.onerror = () => {
+            reject(new Error('Failed to convert SVG to image'));
+        };
+        image.src = url;
+    });
+};

package/dist/drawing/compose.d.ts

@@ -0,0 +1,5 @@
+import type { Composable } from '../composable';
+export declare const compose: ({ composables, context, }: {
+    composables: Composable[];
+    context: OffscreenCanvasRenderingContext2D;
+}) => Promise<void>;

package/dist/drawing/compose.js

@@ -0,0 +1,6 @@
+import { drawElementToCanvas } from './draw-element-to-canvas';
+export const compose = async ({ composables, context, }) => {
+    for (const composable of composables) {
+        await drawElementToCanvas(composable.element, context);
+    }
+};

package/dist/drawing/do-rects-intersect.d.ts

@@ -0,0 +1 @@
+export declare function doRectsIntersect(rect1: DOMRect, rect2: DOMRect): boolean;

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-border.d.ts

@@ -1,10 +1,7 @@
 import type { BorderRadiusCorners } from './border-radius';
-export declare const drawBorder: ({ ctx, x, y, width, height, borderRadius, computedStyle, }: {
+export declare const drawBorder: ({ ctx, rect, borderRadius, computedStyle, }: {
     ctx: OffscreenCanvasRenderingContext2D;
-    x: number;
-    y: number;
-    width: number;
-    height: number;
+    rect: DOMRect;
     borderRadius: BorderRadiusCorners;
     computedStyle: CSSStyleDeclaration;
 }) => void;

package/dist/drawing/draw-border.js

@@ -211,7 +211,7 @@ const drawUniformBorder = ({ ctx, x, y, width, height, borderRadius, borderWidth
     ctx.closePath();
     ctx.stroke();
 };
-export const drawBorder = ({ ctx, x, y, width, height, borderRadius, computedStyle, }) => {
+export const drawBorder = ({ ctx, rect, borderRadius, computedStyle, }) => {
     const borders = getBorderSideProperties(computedStyle);
     // Check if we have any visible border
     const hasBorder = borders.top.width > 0 ||
@@ -240,10 +240,10 @@ export const drawBorder = ({ ctx, x, y, width, height, borderRadius, computedSty
         // Draw as a single continuous border for continuous dashing
         drawUniformBorder({
             ctx,
-            x,
-            y,
-            width,
-            height,
+            x: rect.left,
+            y: rect.top,
+            width: rect.width,
+            height: rect.height,
             borderRadius,
             borderWidth: borders.top.width,
             borderColor: borders.top.color,
@@ -255,10 +255,10 @@ export const drawBorder = ({ ctx, x, y, width, height, borderRadius, computedSty
         drawCorner({
             ctx,
             corner: 'topLeft',
-            x,
-            y,
-            width,
-            height,
+            x: rect.left,
+            y: rect.top,
+            width: rect.width,
+            height: rect.height,
             borderRadius,
             topBorder: borders.top,
             rightBorder: borders.right,
@@ -268,10 +268,10 @@ export const drawBorder = ({ ctx, x, y, width, height, borderRadius, computedSty
         drawCorner({
             ctx,
             corner: 'topRight',
-            x,
-            y,
-            width,
-            height,
+            x: rect.left,
+            y: rect.top,
+            width: rect.width,
+            height: rect.height,
             borderRadius,
             topBorder: borders.top,
             rightBorder: borders.right,
@@ -281,10 +281,10 @@ export const drawBorder = ({ ctx, x, y, width, height, borderRadius, computedSty
         drawCorner({
             ctx,
             corner: 'bottomRight',
-            x,
-            y,
-            width,
-            height,
+            x: rect.left,
+            y: rect.top,
+            width: rect.width,
+            height: rect.height,
             borderRadius,
             topBorder: borders.top,
             rightBorder: borders.right,
@@ -294,10 +294,10 @@ export const drawBorder = ({ ctx, x, y, width, height, borderRadius, computedSty
         drawCorner({
             ctx,
             corner: 'bottomLeft',
-            x,
-            y,
-            width,
-            height,
+            x: rect.left,
+            y: rect.top,
+            width: rect.width,
+            height: rect.height,
             borderRadius,
             topBorder: borders.top,
             rightBorder: borders.right,
@@ -308,40 +308,40 @@ export const drawBorder = ({ ctx, x, y, width, height, borderRadius, computedSty
         drawBorderSide({
             ctx,
             side: 'top',
-            x,
-            y,
-            width,
-            height,
+            x: rect.left,
+            y: rect.top,
+            width: rect.width,
+            height: rect.height,
             borderRadius,
             borderProperties: borders.top,
         });
         drawBorderSide({
             ctx,
             side: 'right',
-            x,
-            y,
-            width,
-            height,
+            x: rect.left,
+            y: rect.top,
+            width: rect.width,
+            height: rect.height,
             borderRadius,
             borderProperties: borders.right,
         });
         drawBorderSide({
             ctx,
             side: 'bottom',
-            x,
-            y,
-            width,
-            height,
+            x: rect.left,
+            y: rect.top,
+            width: rect.width,
+            height: rect.height,
             borderRadius,
             borderProperties: borders.bottom,
         });
         drawBorderSide({
             ctx,
             side: 'left',
-            x,
-            y,
-            width,
-            height,
+            x: rect.left,
+            y: rect.top,
+            width: rect.width,
+            height: rect.height,
             borderRadius,
             borderProperties: borders.left,
         });

package/dist/drawing/draw-box-shadow.d.ts

@@ -0,0 +1,18 @@
+import type { LogLevel } from 'remotion';
+import type { BorderRadiusCorners } from './border-radius';
+interface BoxShadow {
+    offsetX: number;
+    offsetY: number;
+    blurRadius: number;
+    color: string;
+    inset: boolean;
+}
+export declare const parseBoxShadow: (boxShadowValue: string) => BoxShadow[];
+export declare const setBoxShadow: ({ ctx, rect, borderRadius, computedStyle, logLevel, }: {
+    ctx: OffscreenCanvasRenderingContext2D;
+    rect: DOMRect;
+    borderRadius: BorderRadiusCorners;
+    computedStyle: CSSStyleDeclaration;
+    logLevel: LogLevel;
+}) => void;
+export {};

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 setBoxShadow = ({ 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);
+    }
+};

package/dist/drawing/draw-element-to-canvas.d.ts

@@ -1,11 +1,12 @@
 import type { LogLevel } from 'remotion';
 import type { DrawFn } from './drawn-fn';
 export type DrawElementToCanvasReturnValue = 'continue' | 'skip-children';
-export declare const drawElementToCanvas: ({ element, context, draw, offsetLeft, offsetTop, logLevel, }: {
+export declare const drawElementToCanvas: ({ element, context, draw, offsetLeft, offsetTop, logLevel, parentRect, }: {
     element: HTMLElement | SVGElement;
     context: OffscreenCanvasRenderingContext2D;
     draw: DrawFn;
     offsetLeft: number;
     offsetTop: number;
     logLevel: LogLevel;
+    parentRect: DOMRect;
 }) => Promise<DrawElementToCanvasReturnValue>;

package/dist/drawing/draw-element-to-canvas.js

@@ -1,11 +1,9 @@
-import { Internals } from 'remotion';
-import { compose } from '../compose';
-import { getBiggestBoundingClientRect } from '../get-biggest-bounding-client-rect';
 import { calculateTransforms } from './calculate-transforms';
 import { drawElement } from './draw-element';
-import { transformIn3d } from './transform-in-3d';
-export const drawElementToCanvas = async ({ element, context, draw, offsetLeft, offsetTop, logLevel, }) => {
-    const { totalMatrix, reset, dimensions, opacity, computedStyle } = calculateTransforms(element);
+import { handle3dTransform } from './handle-3d-transform';
+export const drawElementToCanvas = async ({ element, context, draw, offsetLeft, offsetTop, logLevel, parentRect, }) => {
+    const transforms = calculateTransforms({ element, offsetLeft, offsetTop });
+    const { totalMatrix, reset, dimensions, opacity, computedStyle } = transforms;
     if (opacity === 0) {
         reset();
         return 'continue';
@@ -15,40 +13,14 @@ export const drawElementToCanvas = async ({ element, context, draw, offsetLeft,
         return 'continue';
     }
     if (!totalMatrix.is2D) {
-        const biggestBoundingClientRect = getBiggestBoundingClientRect(element);
-        const canvasOffsetLeft = Math.min(biggestBoundingClientRect.left, 0);
-        const canvasOffsetTop = Math.min(biggestBoundingClientRect.top, 0);
-        const tempCanvasWidth = Math.max(biggestBoundingClientRect.width, biggestBoundingClientRect.right);
-        const tempCanvasHeight = Math.max(biggestBoundingClientRect.height, biggestBoundingClientRect.bottom);
-        const start = Date.now();
-        const tempCanvas = new OffscreenCanvas(tempCanvasWidth, tempCanvasHeight);
-        const context2 = tempCanvas.getContext('2d');
-        if (!context2) {
-            throw new Error('Could not get context');
-        }
-        await compose({
+        await handle3dTransform({
             element,
-            context: context2,
-            offsetLeft: canvasOffsetLeft,
-            offsetTop: canvasOffsetTop,
+            totalMatrix,
+            parentRect,
+            context,
             logLevel,
         });
-        const afterCompose = Date.now();
-        const transformed = transformIn3d({
-            canvasWidth: tempCanvasWidth,
-            canvasHeight: tempCanvasHeight,
-            matrix: totalMatrix,
-            sourceCanvas: tempCanvas,
-            offsetLeft: canvasOffsetLeft,
-            offsetTop: canvasOffsetTop,
-        });
-        context.drawImage(transformed, 0, 0);
-        const afterDraw = Date.now();
         reset();
-        Internals.Log.trace({
-            logLevel,
-            tag: '@remotion/web-renderer',
-        }, `Transforming element in 3D - canvas size: ${tempCanvasWidth}x${tempCanvasHeight} - compose: ${afterCompose - start}ms - draw: ${afterDraw - afterCompose}ms`);
         return 'skip-children';
     }
     await drawElement({

package/dist/drawing/draw-element.d.ts

@@ -1,9 +1,14 @@
+import type { LogLevel } from 'remotion';
 import type { DrawFn } from './drawn-fn';
-export declare const drawElement: ({ dimensions, computedStyle, context, draw, opacity, totalMatrix, }: {
-    dimensions: DOMRect;
+export declare const drawElement: ({ rect, computedStyle, context, draw, opacity, totalMatrix, parentRect, logLevel, }: {
+    rect: DOMRect;
     computedStyle: CSSStyleDeclaration;
     context: OffscreenCanvasRenderingContext2D;
     opacity: number;
     totalMatrix: DOMMatrix;
     draw: DrawFn;
-}) => Promise<void>;
+    parentRect: DOMRect;
+    logLevel: LogLevel;
+}) => Promise<{
+    cleanupAfterChildren: () => void;
+}>;

package/dist/drawing/draw-element.js

@@ -1,50 +1,96 @@
 import { parseBorderRadius, setBorderRadius } from './border-radius';
 import { drawBorder } from './draw-border';
+import { setBoxShadow } from './draw-box-shadow';
+import { drawOutline } from './draw-outline';
 import { setOpacity } from './opacity';
+import { setOverflowHidden } from './overflow';
+import { createCanvasGradient, parseLinearGradient, } from './parse-linear-gradient';
 import { setTransform } from './transform';
-export const drawElement = async ({ dimensions, computedStyle, context, draw, opacity, totalMatrix, }) => {
+export const drawElement = async ({ rect, computedStyle, context, draw, opacity, totalMatrix, parentRect, logLevel, }) => {
     const background = computedStyle.backgroundColor;
+    const { backgroundImage } = computedStyle;
     const borderRadius = parseBorderRadius({
         borderRadius: computedStyle.borderRadius,
-        width: dimensions.width,
-        height: dimensions.height,
+        width: rect.width,
+        height: rect.height,
     });
     const finishTransform = setTransform({
         ctx: context,
         transform: totalMatrix,
+        parentRect,
     });
-    const finishBorderRadius = setBorderRadius({
+    const finishOpacity = setOpacity({
+        ctx: context,
+        opacity,
+    });
+    // Draw box shadow before border radius clip and background
+    setBoxShadow({
         ctx: context,
-        x: dimensions.left,
-        y: dimensions.top,
-        width: dimensions.width,
-        height: dimensions.height,
+        computedStyle,
+        rect,
         borderRadius,
+        logLevel,
     });
-    const finishOpacity = setOpacity({
+    const finishBorderRadius = setBorderRadius({
         ctx: context,
-        opacity,
+        rect,
+        borderRadius,
+        forceClipEvenWhenZero: false,
     });
-    if (background &&
+    // Try to draw linear gradient first
+    let gradientDrawn = false;
+    if (backgroundImage && backgroundImage !== 'none') {
+        const gradientInfo = parseLinearGradient(backgroundImage);
+        if (gradientInfo) {
+            const gradient = createCanvasGradient({
+                ctx: context,
+                rect,
+                gradientInfo,
+            });
+            const originalFillStyle = context.fillStyle;
+            context.fillStyle = gradient;
+            context.fillRect(rect.left, rect.top, rect.width, rect.height);
+            context.fillStyle = originalFillStyle;
+            gradientDrawn = true;
+        }
+    }
+    // Fallback to solid background color if no gradient was drawn
+    if (!gradientDrawn &&
+        background &&
         background !== 'transparent' &&
         !(background.startsWith('rgba') &&
             (background.endsWith(', 0)') || background.endsWith(',0')))) {
         const originalFillStyle = context.fillStyle;
         context.fillStyle = background;
-        context.fillRect(dimensions.left, dimensions.top, dimensions.width, dimensions.height);
+        context.fillRect(rect.left, rect.top, rect.width, rect.height);
         context.fillStyle = originalFillStyle;
     }
-    await draw({ dimensions, computedStyle, contextToDraw: context });
+    await draw({ dimensions: rect, computedStyle, contextToDraw: context });
     drawBorder({
         ctx: context,
-        x: dimensions.left,
-        y: dimensions.top,
-        width: dimensions.width,
-        height: dimensions.height,
+        rect,
         borderRadius,
         computedStyle,
     });
-    finishOpacity();
     finishBorderRadius();
+    // Drawing outline ignores overflow: hidden, finishing it and starting a new one for the outline
+    drawOutline({
+        ctx: context,
+        rect,
+        borderRadius,
+        computedStyle,
+    });
+    const finishOverflowHidden = setOverflowHidden({
+        ctx: context,
+        rect,
+        borderRadius,
+        overflowHidden: computedStyle.overflow === 'hidden',
+    });
     finishTransform();
+    return {
+        cleanupAfterChildren: () => {
+            finishOpacity();
+            finishOverflowHidden();
+        },
+    };
 };

package/dist/drawing/draw-outline.d.ts

@@ -0,0 +1,9 @@
+import type { BorderRadiusCorners } from './border-radius';
+export declare const parseOutlineWidth: (value: string) => number;
+export declare const parseOutlineOffset: (value: string) => number;
+export declare const drawOutline: ({ ctx, rect, borderRadius, computedStyle, }: {
+    ctx: OffscreenCanvasRenderingContext2D;
+    rect: DOMRect;
+    borderRadius: BorderRadiusCorners;
+    computedStyle: CSSStyleDeclaration;
+}) => void;