@remotion/web-renderer 4.0.383 → 4.0.385

package/dist/add-sample.d.ts

@@ -0,0 +1,3 @@
+import type { AudioSampleSource, VideoSampleSource } from 'mediabunny';
+export declare const addVideoSampleAndCloseFrame: (frameToEncode: VideoFrame, videoSampleSource: VideoSampleSource) => Promise<void>;
+export declare const addAudioSample: (audio: AudioData, audioSampleSource: AudioSampleSource) => Promise<void>;

package/dist/add-sample.js

@@ -0,0 +1,20 @@
+import { AudioSample, VideoSample } from 'mediabunny';
+export const addVideoSampleAndCloseFrame = async (frameToEncode, videoSampleSource) => {
+    const sample = new VideoSample(frameToEncode);
+    try {
+        await videoSampleSource.add(sample);
+    }
+    finally {
+        sample.close();
+        frameToEncode.close();
+    }
+};
+export const addAudioSample = async (audio, audioSampleSource) => {
+    const sample = new AudioSample(audio);
+    try {
+        await audioSampleSource.add(sample);
+    }
+    finally {
+        sample.close();
+    }
+};

package/dist/artifact.d.ts

@@ -13,12 +13,11 @@ export type OnArtifact = (asset: EmittedArtifact) => void;
 export type ArtifactsRef = React.RefObject<{
     collectAssets: () => TRenderAsset[];
 } | null>;
-export declare const handleArtifacts: ({ ref, onArtifact, }: {
-    ref: ArtifactsRef;
-    onArtifact: OnArtifact | null;
-}) => {
-    handle: ({ imageData, frame, }: {
+export declare const handleArtifacts: () => {
+    handle: ({ imageData, frame, assets: artifactAssets, onArtifact, }: {
         imageData: Blob | OffscreenCanvas | null;
         frame: number;
+        assets: TRenderAsset[];
+        onArtifact: OnArtifact;
     }) => Promise<void>;
 };

package/dist/artifact.js

@@ -36,23 +36,20 @@ export const onlyArtifact = async ({ assets, frameBuffer, }) => {
     }
     return result.filter(NoReactInternals.truthy);
 };
-export const handleArtifacts = ({ ref, onArtifact, }) => {
+export const handleArtifacts = () => {
     const previousArtifacts = [];
-    const handle = async ({ imageData, frame, }) => {
-        const artifactAssets = ref.current.collectAssets();
-        if (onArtifact) {
-            const artifacts = await onlyArtifact({
-                assets: artifactAssets,
-                frameBuffer: imageData,
-            });
-            for (const artifact of artifacts) {
-                const previousArtifact = previousArtifacts.find((a) => a.filename === artifact.filename);
-                if (previousArtifact) {
-                    throw new Error(`An artifact with output "${artifact.filename}" was already registered at frame ${previousArtifact.frame}, but now registered again at frame ${frame}. Artifacts must have unique names. https://remotion.dev/docs/artifacts`);
-                }
-                onArtifact(artifact);
-                previousArtifacts.push({ frame, filename: artifact.filename });
+    const handle = async ({ imageData, frame, assets: artifactAssets, onArtifact, }) => {
+        const artifacts = await onlyArtifact({
+            assets: artifactAssets,
+            frameBuffer: imageData,
+        });
+        for (const artifact of artifacts) {
+            const previousArtifact = previousArtifacts.find((a) => a.filename === artifact.filename);
+            if (previousArtifact) {
+                throw new Error(`An artifact with output "${artifact.filename}" was already registered at frame ${previousArtifact.frame}, but now registered again at frame ${frame}. Artifacts must have unique names. https://remotion.dev/docs/artifacts`);
             }
+            onArtifact(artifact);
+            previousArtifacts.push({ frame, filename: artifact.filename });
         }
     };
     return { handle };

package/dist/audio.d.ts

@@ -0,0 +1,6 @@
+import type { TRenderAsset } from 'remotion';
+export declare const onlyInlineAudio: ({ assets, fps, frame, }: {
+    assets: TRenderAsset[];
+    fps: number;
+    frame: number;
+}) => AudioData | null;

package/dist/audio.js

@@ -0,0 +1,38 @@
+const TARGET_NUMBER_OF_CHANNELS = 2;
+const TARGET_SAMPLE_RATE = 48000;
+function mixAudio(waves, length) {
+    if (waves.length === 1) {
+        return waves[0];
+    }
+    const mixed = new Int16Array(length);
+    for (let i = 0; i < length; i++) {
+        const sum = waves.reduce((acc, wave) => {
+            var _a;
+            return acc + ((_a = wave[i]) !== null && _a !== void 0 ? _a : 0);
+        }, 0);
+        // Clamp to Int16 range
+        mixed[i] = Math.max(-32768, Math.min(32767, sum));
+    }
+    return mixed;
+}
+export const onlyInlineAudio = ({ assets, fps, frame, }) => {
+    const inlineAudio = assets.filter((asset) => asset.type === 'inline-audio');
+    if (inlineAudio.length === 0) {
+        return null;
+    }
+    const expectedLength = Math.round((TARGET_NUMBER_OF_CHANNELS * TARGET_SAMPLE_RATE) / fps);
+    for (const asset of inlineAudio) {
+        if (asset.toneFrequency !== 1) {
+            throw new Error('Setting the toneFrequency is not supported yet in web rendering.');
+        }
+    }
+    const mixedAudio = mixAudio(inlineAudio.map((asset) => asset.audio), expectedLength);
+    return new AudioData({
+        data: mixedAudio,
+        format: 's16',
+        numberOfChannels: TARGET_NUMBER_OF_CHANNELS,
+        numberOfFrames: expectedLength / TARGET_NUMBER_OF_CHANNELS,
+        sampleRate: TARGET_SAMPLE_RATE,
+        timestamp: (frame / fps) * 1000000,
+    });
+};

package/dist/border-radius.d.ts

@@ -0,0 +1,31 @@
+export type BorderRadiusCorners = {
+    topLeft: {
+        horizontal: number;
+        vertical: number;
+    };
+    topRight: {
+        horizontal: number;
+        vertical: number;
+    };
+    bottomRight: {
+        horizontal: number;
+        vertical: number;
+    };
+    bottomLeft: {
+        horizontal: number;
+        vertical: number;
+    };
+};
+export declare function parseBorderRadius({ borderRadius, width, height, }: {
+    borderRadius: string;
+    width: number;
+    height: number;
+}): BorderRadiusCorners;
+export declare function setBorderRadius({ ctx, x, y, width, height, borderRadius, }: {
+    ctx: OffscreenCanvasRenderingContext2D;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    borderRadius: BorderRadiusCorners;
+}): () => void;

package/dist/border-radius.js

@@ -0,0 +1,152 @@
+function parseValue({ value, reference, }) {
+    value = value.trim();
+    if (value.endsWith('%')) {
+        const percentage = parseFloat(value);
+        return (percentage / 100) * reference;
+    }
+    if (value.endsWith('px')) {
+        return parseFloat(value);
+    }
+    // If no unit, assume pixels
+    return parseFloat(value);
+}
+function expandShorthand(values) {
+    if (values.length === 1) {
+        // All corners the same
+        return [values[0], values[0], values[0], values[0]];
+    }
+    if (values.length === 2) {
+        // [0] = top-left & bottom-right, [1] = top-right & bottom-left
+        return [values[0], values[1], values[0], values[1]];
+    }
+    if (values.length === 3) {
+        // [0] = top-left, [1] = top-right & bottom-left, [2] = bottom-right
+        return [values[0], values[1], values[2], values[1]];
+    }
+    // 4 values: top-left, top-right, bottom-right, bottom-left
+    return [values[0], values[1], values[2], values[3]];
+}
+function clampBorderRadius({ borderRadius, width, height, }) {
+    // According to CSS spec, if the sum of border radii on adjacent corners
+    // exceeds the length of the edge, they should be proportionally reduced
+    const clamped = {
+        topLeft: { ...borderRadius.topLeft },
+        topRight: { ...borderRadius.topRight },
+        bottomRight: { ...borderRadius.bottomRight },
+        bottomLeft: { ...borderRadius.bottomLeft },
+    };
+    // Check top edge
+    const topSum = clamped.topLeft.horizontal + clamped.topRight.horizontal;
+    if (topSum > width) {
+        const factor = width / topSum;
+        clamped.topLeft.horizontal *= factor;
+        clamped.topRight.horizontal *= factor;
+    }
+    // Check right edge
+    const rightSum = clamped.topRight.vertical + clamped.bottomRight.vertical;
+    if (rightSum > height) {
+        const factor = height / rightSum;
+        clamped.topRight.vertical *= factor;
+        clamped.bottomRight.vertical *= factor;
+    }
+    // Check bottom edge
+    const bottomSum = clamped.bottomRight.horizontal + clamped.bottomLeft.horizontal;
+    if (bottomSum > width) {
+        const factor = width / bottomSum;
+        clamped.bottomRight.horizontal *= factor;
+        clamped.bottomLeft.horizontal *= factor;
+    }
+    // Check left edge
+    const leftSum = clamped.bottomLeft.vertical + clamped.topLeft.vertical;
+    if (leftSum > height) {
+        const factor = height / leftSum;
+        clamped.bottomLeft.vertical *= factor;
+        clamped.topLeft.vertical *= factor;
+    }
+    return clamped;
+}
+export function parseBorderRadius({ borderRadius, width, height, }) {
+    // Split by '/' to separate horizontal and vertical radii
+    const parts = borderRadius.split('/').map((part) => part.trim());
+    const horizontalPart = parts[0];
+    const verticalPart = parts[1];
+    // Split each part into individual values
+    const horizontalValues = horizontalPart.split(/\s+/).filter((v) => v);
+    const verticalValues = verticalPart
+        ? verticalPart.split(/\s+/).filter((v) => v)
+        : horizontalValues; // If no '/', use horizontal values for vertical
+    // Expand shorthand to 4 values
+    const [hTopLeft, hTopRight, hBottomRight, hBottomLeft] = expandShorthand(horizontalValues);
+    const [vTopLeft, vTopRight, vBottomRight, vBottomLeft] = expandShorthand(verticalValues);
+    return clampBorderRadius({
+        borderRadius: {
+            topLeft: {
+                horizontal: parseValue({ value: hTopLeft, reference: width }),
+                vertical: parseValue({ value: vTopLeft, reference: height }),
+            },
+            topRight: {
+                horizontal: parseValue({ value: hTopRight, reference: width }),
+                vertical: parseValue({ value: vTopRight, reference: height }),
+            },
+            bottomRight: {
+                horizontal: parseValue({ value: hBottomRight, reference: width }),
+                vertical: parseValue({ value: vBottomRight, reference: height }),
+            },
+            bottomLeft: {
+                horizontal: parseValue({ value: hBottomLeft, reference: width }),
+                vertical: parseValue({ value: vBottomLeft, reference: height }),
+            },
+        },
+        width,
+        height,
+    });
+}
+export function setBorderRadius({ ctx, x, y, width, height, borderRadius, }) {
+    if (borderRadius.topLeft.horizontal === 0 &&
+        borderRadius.topLeft.vertical === 0 &&
+        borderRadius.topRight.horizontal === 0 &&
+        borderRadius.topRight.vertical === 0 &&
+        borderRadius.bottomRight.horizontal === 0 &&
+        borderRadius.bottomRight.vertical === 0 &&
+        borderRadius.bottomLeft.horizontal === 0 &&
+        borderRadius.bottomLeft.vertical === 0) {
+        return () => { };
+    }
+    ctx.save();
+    ctx.beginPath();
+    // Start at top-left corner, after the horizontal radius
+    ctx.moveTo(x + borderRadius.topLeft.horizontal, y);
+    // Top edge to top-right corner
+    ctx.lineTo(x + width - borderRadius.topRight.horizontal, y);
+    // Top-right corner (elliptical arc)
+    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 to bottom-right corner
+    ctx.lineTo(x + width, y + height - borderRadius.bottomRight.vertical);
+    // Bottom-right corner (elliptical arc)
+    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 to bottom-left corner
+    ctx.lineTo(x + borderRadius.bottomLeft.horizontal, y + height);
+    // Bottom-left corner (elliptical arc)
+    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 to top-left corner
+    ctx.lineTo(x, y + borderRadius.topLeft.vertical);
+    // Top-left corner (elliptical arc)
+    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();
+    ctx.clip();
+    return () => {
+        ctx.restore();
+    };
+}

package/dist/calculate-transforms.d.ts

@@ -6,4 +6,6 @@ export declare const calculateTransforms: (element: HTMLElement | SVGSVGElement)
         x: number;
         y: number;
     };
+    borderRadius: import("./drawing/border-radius").BorderRadiusCorners;
+    opacity: number;
 };

package/dist/calculate-transforms.js

@@ -1,3 +1,4 @@
+import { parseBorderRadius } from './drawing/border-radius';
 import { parseTransformOrigin } from './parse-transform-origin';
 const getInternalTransformOrigin = (transform) => {
     var _a;
@@ -21,8 +22,18 @@ export const calculateTransforms = (element) => {
     let parent = element;
     const transforms = [];
     const toReset = [];
+    let borderRadius = '';
+    let opacity = 1;
     while (parent) {
         const computedStyle = getComputedStyle(parent);
+        if (parent === element) {
+            borderRadius = computedStyle.borderRadius;
+        }
+        // Multiply opacity values from element and all parents
+        const parentOpacity = computedStyle.opacity;
+        if (parentOpacity && parentOpacity !== '') {
+            opacity *= parseFloat(parentOpacity);
+        }
         if ((computedStyle.transform && computedStyle.transform !== 'none') ||
             parent === element) {
             const toParse = computedStyle.transform === 'none' || computedStyle.transform === ''
@@ -70,5 +81,11 @@ export const calculateTransforms = (element) => {
             }
         },
         nativeTransformOrigin,
+        borderRadius: parseBorderRadius({
+            borderRadius,
+            width: dimensions.width,
+            height: dimensions.height,
+        }),
+        opacity,
     };
 };

package/dist/composable.d.ts

@@ -1,10 +1,4 @@
 export type Composable = {
-    type: 'canvas';
-    element: HTMLCanvasElement;
-} | {
-    type: 'svg';
-    element: SVGSVGElement;
-} | {
-    type: 'img';
-    element: HTMLImageElement;
+    type: 'element';
+    element: HTMLElement | SVGElement;
 };

package/dist/compose-canvas.js

@@ -1,12 +1,36 @@
+import { setBorderRadius } from './border-radius';
 import { calculateTransforms } from './calculate-transforms';
-import { turnSvgIntoDrawable } from './compose-svg';
+import { turnSvgIntoDrawable } from './drawing/compose-svg';
+import { setOpacity } from './drawing/opacity';
+import { setTransform } from './drawing/transform';
 export const composeCanvas = async (canvas, context) => {
-    const { totalMatrix, reset, dimensions } = calculateTransforms(canvas);
-    context.setTransform(totalMatrix);
+    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);
-    context.setTransform(new DOMMatrix());
+    finishOpacity();
+    finishBorderRadius();
+    finishTransform();
     reset();
 };

package/dist/compose.d.ts

@@ -1,6 +1 @@
-import type { Composable } from './composable';
-export declare const compose: ({ composables, width, height, }: {
-    composables: Composable[];
-    width: number;
-    height: number;
-}) => Promise<OffscreenCanvas>;
+export declare const compose: (element: HTMLDivElement, context: OffscreenCanvasRenderingContext2D) => Promise<void>;

package/dist/compose.js

@@ -1,13 +1,18 @@
-import { composeCanvas } from './compose-canvas';
-export const compose = async ({ composables, width, height, }) => {
-    const canvas = new OffscreenCanvas(width, height);
-    const context = canvas.getContext('2d');
-    if (!context) {
-        throw new Error('Could not get context');
+import { drawElementToCanvas } from './drawing/draw-element-to-canvas';
+export const compose = async (element, context) => {
+    const treeWalker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, (node) => {
+        if (node instanceof Element) {
+            const computedStyle = getComputedStyle(node);
+            return computedStyle.display === 'none'
+                ? NodeFilter.FILTER_REJECT
+                : NodeFilter.FILTER_ACCEPT;
+        }
+        return NodeFilter.FILTER_ACCEPT;
+    });
+    while (treeWalker.nextNode()) {
+        const node = treeWalker.currentNode;
+        if (node instanceof HTMLElement || node instanceof SVGElement) {
+            await drawElementToCanvas({ element: node, context });
+        }
     }
-    // TODO: Consider z-index
-    for (const composable of composables) {
-        await composeCanvas(composable.element, context);
-    }
-    return canvas;
 };

package/dist/drawing/border-radius.d.ts

@@ -0,0 +1,31 @@
+export type BorderRadiusCorners = {
+    topLeft: {
+        horizontal: number;
+        vertical: number;
+    };
+    topRight: {
+        horizontal: number;
+        vertical: number;
+    };
+    bottomRight: {
+        horizontal: number;
+        vertical: number;
+    };
+    bottomLeft: {
+        horizontal: number;
+        vertical: number;
+    };
+};
+export declare function parseBorderRadius({ borderRadius, width, height, }: {
+    borderRadius: string;
+    width: number;
+    height: number;
+}): BorderRadiusCorners;
+export declare function setBorderRadius({ ctx, x, y, width, height, borderRadius, }: {
+    ctx: OffscreenCanvasRenderingContext2D;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    borderRadius: BorderRadiusCorners;
+}): () => void;

package/dist/drawing/border-radius.js

@@ -0,0 +1,152 @@
+function parseValue({ value, reference, }) {
+    value = value.trim();
+    if (value.endsWith('%')) {
+        const percentage = parseFloat(value);
+        return (percentage / 100) * reference;
+    }
+    if (value.endsWith('px')) {
+        return parseFloat(value);
+    }
+    // If no unit, assume pixels
+    return parseFloat(value);
+}
+function expandShorthand(values) {
+    if (values.length === 1) {
+        // All corners the same
+        return [values[0], values[0], values[0], values[0]];
+    }
+    if (values.length === 2) {
+        // [0] = top-left & bottom-right, [1] = top-right & bottom-left
+        return [values[0], values[1], values[0], values[1]];
+    }
+    if (values.length === 3) {
+        // [0] = top-left, [1] = top-right & bottom-left, [2] = bottom-right
+        return [values[0], values[1], values[2], values[1]];
+    }
+    // 4 values: top-left, top-right, bottom-right, bottom-left
+    return [values[0], values[1], values[2], values[3]];
+}
+function clampBorderRadius({ borderRadius, width, height, }) {
+    // According to CSS spec, if the sum of border radii on adjacent corners
+    // exceeds the length of the edge, they should be proportionally reduced
+    const clamped = {
+        topLeft: { ...borderRadius.topLeft },
+        topRight: { ...borderRadius.topRight },
+        bottomRight: { ...borderRadius.bottomRight },
+        bottomLeft: { ...borderRadius.bottomLeft },
+    };
+    // Check top edge
+    const topSum = clamped.topLeft.horizontal + clamped.topRight.horizontal;
+    if (topSum > width) {
+        const factor = width / topSum;
+        clamped.topLeft.horizontal *= factor;
+        clamped.topRight.horizontal *= factor;
+    }
+    // Check right edge
+    const rightSum = clamped.topRight.vertical + clamped.bottomRight.vertical;
+    if (rightSum > height) {
+        const factor = height / rightSum;
+        clamped.topRight.vertical *= factor;
+        clamped.bottomRight.vertical *= factor;
+    }
+    // Check bottom edge
+    const bottomSum = clamped.bottomRight.horizontal + clamped.bottomLeft.horizontal;
+    if (bottomSum > width) {
+        const factor = width / bottomSum;
+        clamped.bottomRight.horizontal *= factor;
+        clamped.bottomLeft.horizontal *= factor;
+    }
+    // Check left edge
+    const leftSum = clamped.bottomLeft.vertical + clamped.topLeft.vertical;
+    if (leftSum > height) {
+        const factor = height / leftSum;
+        clamped.bottomLeft.vertical *= factor;
+        clamped.topLeft.vertical *= factor;
+    }
+    return clamped;
+}
+export function parseBorderRadius({ borderRadius, width, height, }) {
+    // Split by '/' to separate horizontal and vertical radii
+    const parts = borderRadius.split('/').map((part) => part.trim());
+    const horizontalPart = parts[0];
+    const verticalPart = parts[1];
+    // Split each part into individual values
+    const horizontalValues = horizontalPart.split(/\s+/).filter((v) => v);
+    const verticalValues = verticalPart
+        ? verticalPart.split(/\s+/).filter((v) => v)
+        : horizontalValues; // If no '/', use horizontal values for vertical
+    // Expand shorthand to 4 values
+    const [hTopLeft, hTopRight, hBottomRight, hBottomLeft] = expandShorthand(horizontalValues);
+    const [vTopLeft, vTopRight, vBottomRight, vBottomLeft] = expandShorthand(verticalValues);
+    return clampBorderRadius({
+        borderRadius: {
+            topLeft: {
+                horizontal: parseValue({ value: hTopLeft, reference: width }),
+                vertical: parseValue({ value: vTopLeft, reference: height }),
+            },
+            topRight: {
+                horizontal: parseValue({ value: hTopRight, reference: width }),
+                vertical: parseValue({ value: vTopRight, reference: height }),
+            },
+            bottomRight: {
+                horizontal: parseValue({ value: hBottomRight, reference: width }),
+                vertical: parseValue({ value: vBottomRight, reference: height }),
+            },
+            bottomLeft: {
+                horizontal: parseValue({ value: hBottomLeft, reference: width }),
+                vertical: parseValue({ value: vBottomLeft, reference: height }),
+            },
+        },
+        width,
+        height,
+    });
+}
+export function setBorderRadius({ ctx, x, y, width, height, borderRadius, }) {
+    if (borderRadius.topLeft.horizontal === 0 &&
+        borderRadius.topLeft.vertical === 0 &&
+        borderRadius.topRight.horizontal === 0 &&
+        borderRadius.topRight.vertical === 0 &&
+        borderRadius.bottomRight.horizontal === 0 &&
+        borderRadius.bottomRight.vertical === 0 &&
+        borderRadius.bottomLeft.horizontal === 0 &&
+        borderRadius.bottomLeft.vertical === 0) {
+        return () => { };
+    }
+    ctx.save();
+    ctx.beginPath();
+    // Start at top-left corner, after the horizontal radius
+    ctx.moveTo(x + borderRadius.topLeft.horizontal, y);
+    // Top edge to top-right corner
+    ctx.lineTo(x + width - borderRadius.topRight.horizontal, y);
+    // Top-right corner (elliptical arc)
+    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 to bottom-right corner
+    ctx.lineTo(x + width, y + height - borderRadius.bottomRight.vertical);
+    // Bottom-right corner (elliptical arc)
+    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 to bottom-left corner
+    ctx.lineTo(x + borderRadius.bottomLeft.horizontal, y + height);
+    // Bottom-left corner (elliptical arc)
+    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 to top-left corner
+    ctx.lineTo(x, y + borderRadius.topLeft.vertical);
+    // Top-left corner (elliptical arc)
+    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();
+    ctx.clip();
+    return () => {
+        ctx.restore();
+    };
+}

package/dist/drawing/calculate-transforms.d.ts

@@ -0,0 +1,10 @@
+export declare const calculateTransforms: (element: HTMLElement | SVGElement) => {
+    dimensions: DOMRect;
+    totalMatrix: DOMMatrix;
+    reset: () => void;
+    nativeTransformOrigin: {
+        x: number;
+        y: number;
+    };
+    opacity: number;
+};