@remotion/web-renderer 4.0.398 → 4.0.400

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import './symbol-dispose';
 export type { EmittedArtifact, WebRendererOnArtifact } from './artifact';
 export type { FrameRange } from './frame-range';
 export type { WebRendererContainer, WebRendererQuality, WebRendererVideoCodec, } from './mediabunny-mappings';

package/dist/internal-state.d.ts

@@ -1,3 +1,19 @@
+type HelperCanvas = {
+    canvas: OffscreenCanvas;
+    gl: WebGLRenderingContext;
+    program: WebGLProgram;
+    locations: {
+        aPosition: number;
+        aTexCoord: number;
+        uTransform: WebGLUniformLocation | null;
+        uProjection: WebGLUniformLocation | null;
+        uTexture: WebGLUniformLocation | null;
+    };
+    cleanup: () => void;
+};
+export type HelperCanvasState = {
+    current: HelperCanvas | null;
+};
 export declare const makeInternalState: () => {
     getDrawn3dPixels: () => number;
     getPrecomposedTiles: () => number;
@@ -5,5 +21,16 @@ export declare const makeInternalState: () => {
         canvasWidth: number;
         canvasHeight: number;
     }) => void;
+    helperCanvasState: HelperCanvasState;
+    [Symbol.dispose]: () => void;
+    getWaitForReadyTime: () => number;
+    addWaitForReadyTime: (time: number) => void;
+    getAddSampleTime: () => number;
+    addAddSampleTime: (time: number) => void;
+    getCreateFrameTime: () => number;
+    addCreateFrameTime: (time: number) => void;
+    getAudioMixingTime: () => number;
+    addAudioMixingTime: (time: number) => void;
 };
 export type InternalState = ReturnType<typeof makeInternalState>;
+export {};

package/dist/mediabunny-mappings.d.ts

@@ -1,9 +1,9 @@
 import type { Quality } from 'mediabunny';
-import { type OutputFormat, type VideoCodec } from 'mediabunny';
+import { type OutputFormat } from 'mediabunny';
 export type WebRendererVideoCodec = 'h264' | 'h265' | 'vp8' | 'vp9' | 'av1';
 export type WebRendererContainer = 'mp4' | 'webm';
 export type WebRendererQuality = 'very-low' | 'low' | 'medium' | 'high' | 'very-high';
-export declare const codecToMediabunnyCodec: (codec: WebRendererVideoCodec) => VideoCodec;
+export declare const codecToMediabunnyCodec: (codec: WebRendererVideoCodec) => "av1" | "avc" | "hevc" | "vp8" | "vp9";
 export declare const containerToMediabunnyContainer: (container: WebRendererContainer) => OutputFormat;
 export declare const getDefaultVideoCodecForContainer: (container: WebRendererContainer) => WebRendererVideoCodec;
 export declare const getQualityForWebRendererQuality: (quality: WebRendererQuality) => Quality;

package/dist/props-if-has-props.d.ts

@@ -1,8 +1,7 @@
 import type { ComponentType } from 'react';
 import type { CalculateMetadataFunction } from 'remotion';
 import type { AnyZodObject, z } from 'zod';
-export type InferProps<Schema extends AnyZodObject, Props extends Record<string, unknown>> = AnyZodObject extends Schema ? {} extends Props ? Record<string, unknown> : Props : {} extends Props ? z.input<Schema> : // Props and schema specified
-z.input<Schema> & Props;
+export type InferProps<Schema extends AnyZodObject, Props extends Record<string, unknown>> = AnyZodObject extends Schema ? {} extends Props ? Record<string, unknown> : Props : {} extends Props ? z.input<Schema> : z.input<Schema> & Props;
 export type DefaultPropsIfHasProps<Schema extends AnyZodObject, Props> = AnyZodObject extends Schema ? {} extends Props ? {
     defaultProps?: z.input<Schema> & Props;
 } : {

package/dist/render-still-on-web.d.ts

@@ -1,7 +1,6 @@
 import { type LogLevel } from 'remotion';
 import type { AnyZodObject } from 'zod';
 import type { WebRendererOnArtifact } from './artifact';
-import type { InternalState } from './internal-state';
 import type { CompositionCalculateMetadataOrExplicit } from './props-if-has-props';
 import type { InputPropsIfHasProps } from './render-media-on-web';
 export type RenderStillOnWebImageFormat = 'png' | 'jpeg' | 'webp';
@@ -23,6 +22,23 @@ type OptionalRenderStillOnWebOptions<Schema extends AnyZodObject> = {
 export type RenderStillOnWebOptions<Schema extends AnyZodObject, Props extends Record<string, unknown>> = MandatoryRenderStillOnWebOptions<Schema, Props> & Partial<OptionalRenderStillOnWebOptions<Schema>> & InputPropsIfHasProps<Schema, Props>;
 export declare const renderStillOnWeb: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(options: RenderStillOnWebOptions<Schema, Props>) => Promise<{
     blob: Blob;
-    internalState: InternalState;
+    internalState: {
+        getDrawn3dPixels: () => number;
+        getPrecomposedTiles: () => number;
+        addPrecompose: ({ canvasWidth, canvasHeight, }: {
+            canvasWidth: number;
+            canvasHeight: number;
+        }) => void;
+        helperCanvasState: import("./internal-state").HelperCanvasState;
+        [Symbol.dispose]: () => void;
+        getWaitForReadyTime: () => number;
+        addWaitForReadyTime: (time: number) => void;
+        getAddSampleTime: () => number;
+        addAddSampleTime: (time: number) => void;
+        getCreateFrameTime: () => number;
+        addCreateFrameTime: (time: number) => void;
+        getAudioMixingTime: () => number;
+        addAudioMixingTime: (time: number) => void;
+    };
 }>;
 export {};

package/dist/take-screenshot.d.ts

@@ -1,18 +1,50 @@
-import type { LogLevel } from 'remotion';
-import type { InternalState } from './internal-state';
 import type { RenderStillOnWebImageFormat } from './render-still-on-web';
 export declare const createFrame: ({ div, width, height, logLevel, internalState, }: {
     div: HTMLDivElement;
     width: number;
     height: number;
-    logLevel: LogLevel;
-    internalState: InternalState;
+    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+    internalState: {
+        getDrawn3dPixels: () => number;
+        getPrecomposedTiles: () => number;
+        addPrecompose: ({ canvasWidth, canvasHeight, }: {
+            canvasWidth: number;
+            canvasHeight: number;
+        }) => void;
+        helperCanvasState: import("./internal-state").HelperCanvasState;
+        [Symbol.dispose]: () => void;
+        getWaitForReadyTime: () => number;
+        addWaitForReadyTime: (time: number) => void;
+        getAddSampleTime: () => number;
+        addAddSampleTime: (time: number) => void;
+        getCreateFrameTime: () => number;
+        addCreateFrameTime: (time: number) => void;
+        getAudioMixingTime: () => number;
+        addAudioMixingTime: (time: number) => void;
+    };
 }) => Promise<OffscreenCanvas>;
 export declare const takeScreenshot: ({ div, width, height, imageFormat, logLevel, internalState, }: {
     div: HTMLDivElement;
     width: number;
     height: number;
     imageFormat: RenderStillOnWebImageFormat;
-    logLevel: LogLevel;
-    internalState: InternalState;
+    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+    internalState: {
+        getDrawn3dPixels: () => number;
+        getPrecomposedTiles: () => number;
+        addPrecompose: ({ canvasWidth, canvasHeight, }: {
+            canvasWidth: number;
+            canvasHeight: number;
+        }) => void;
+        helperCanvasState: import("./internal-state").HelperCanvasState;
+        [Symbol.dispose]: () => void;
+        getWaitForReadyTime: () => number;
+        addWaitForReadyTime: (time: number) => void;
+        getAddSampleTime: () => number;
+        addAddSampleTime: (time: number) => void;
+        getCreateFrameTime: () => number;
+        addCreateFrameTime: (time: number) => void;
+        getAudioMixingTime: () => number;
+        addAudioMixingTime: (time: number) => void;
+    };
 }) => Promise<Blob>;

package/dist/tree-walker-cleanup-after-children.d.ts

@@ -0,0 +1,5 @@
+export declare const createTreeWalkerCleanupAfterChildren: (treeWalker: TreeWalker) => {
+    checkCleanUpAtBeginningOfIteration: () => void;
+    addCleanup: (element: Node, cleanupFn: () => void) => void;
+    cleanupInTheEndOfTheIteration: () => void;
+};

package/dist/wait-for-ready.d.ts

@@ -1,7 +1,25 @@
-import type { _InternalTypes } from 'remotion';
-export declare const waitForReady: ({ timeoutInMilliseconds, scope, signal, apiName, }: {
+import type { DelayRenderScope } from 'remotion';
+export declare const waitForReady: ({ timeoutInMilliseconds, scope, signal, apiName, internalState, }: {
     timeoutInMilliseconds: number;
-    scope: _InternalTypes["DelayRenderScope"];
+    scope: DelayRenderScope;
     signal: AbortSignal | null;
     apiName: "renderMediaOnWeb" | "renderStillOnWeb";
+    internalState: {
+        getDrawn3dPixels: () => number;
+        getPrecomposedTiles: () => number;
+        addPrecompose: ({ canvasWidth, canvasHeight, }: {
+            canvasWidth: number;
+            canvasHeight: number;
+        }) => void;
+        helperCanvasState: import("./internal-state").HelperCanvasState;
+        [Symbol.dispose]: () => void;
+        getWaitForReadyTime: () => number;
+        addWaitForReadyTime: (time: number) => void;
+        getAddSampleTime: () => number;
+        addAddSampleTime: (time: number) => void;
+        getCreateFrameTime: () => number;
+        addCreateFrameTime: (time: number) => void;
+        getAudioMixingTime: () => number;
+        addAudioMixingTime: (time: number) => void;
+    } | null;
 }) => Promise<void>;

package/package.json

@@ -3,27 +3,30 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/web-renderer"
 	},
 	"name": "@remotion/web-renderer",
-	"version": "4.0.398",
+	"version": "4.0.400",
 	"main": "dist/index.js",
+	"type": "module",
 	"sideEffects": false,
 	"scripts": {
 		"formatting": "prettier --experimental-cli src --check",
 		"lint": "eslint src",
-		"make": "tsc -d && bun --env-file=../.env.bundle bundle.ts",
+		"make": "tsgo && bun --env-file=../.env.bundle bundle.ts",
 		"testwebrenderer": "vitest src/test --browser --run",
-		"studio": "cd ../example && bunx remotion studio ../web-renderer/src/test/studio.ts"
+		"studio": "cd ../example && bunx remotion studio ../web-renderer/src/test/studio.ts --public-dir=../example-videos/videos",
+		"remotion": "cd ../example && bunx remotion studio ../web-renderer/src/test/studio.ts --public-dir=../example-videos/videos"
 	},
 	"author": "Remotion <jonny@remotion.dev>",
 	"license": "UNLICENSED",
 	"dependencies": {
-		"@remotion/licensing": "4.0.398",
-		"remotion": "4.0.398",
-		"mediabunny": "1.27.2"
+		"@remotion/licensing": "4.0.400",
+		"remotion": "4.0.400",
+		"mediabunny": "1.27.3"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.398",
-		"@remotion/player": "4.0.398",
-		"@remotion/media": "4.0.398",
+		"@remotion/eslint-config-internal": "4.0.400",
+		"@remotion/player": "4.0.400",
+		"@remotion/media": "4.0.400",
+		"@typescript/native-preview": "7.0.0-dev.20260105.1",
 		"@vitejs/plugin-react": "4.1.0",
 		"@vitest/browser-playwright": "4.0.9",
 		"playwright": "1.55.1",
@@ -45,7 +48,6 @@
 		"./package.json": "./package.json",
 		".": {
 			"types": "./dist/index.d.ts",
-			"require": "./dist/index.js",
 			"module": "./dist/esm/index.mjs",
 			"import": "./dist/esm/index.mjs"
 		}

package/dist/add-sample.js

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

@@ -1,56 +0,0 @@
-import { NoReactInternals } from 'remotion/no-react';
-export const onlyArtifact = async ({ assets, frameBuffer, }) => {
-    const artifacts = assets.filter((asset) => asset.type === 'artifact');
-    let frameBufferUint8 = null;
-    const result = [];
-    for (const artifact of artifacts) {
-        if (artifact.contentType === 'binary' || artifact.contentType === 'text') {
-            result.push({
-                frame: artifact.frame,
-                content: artifact.content,
-                filename: artifact.filename,
-                downloadBehavior: artifact.downloadBehavior,
-            });
-            continue;
-        }
-        if (artifact.contentType === 'thumbnail') {
-            if (frameBuffer === null) {
-                // A thumbnail artifact was defined to be emitted, but the output was not a video.
-                // Also, in Lambda, there are extra frames which are not video frames.
-                // This could happen if a thumbnail is unconditionally emitted.
-                continue;
-            }
-            const ab = frameBuffer instanceof Blob
-                ? await frameBuffer.arrayBuffer()
-                : new Uint8Array(await (await frameBuffer.convertToBlob({ type: 'image/png' })).arrayBuffer());
-            frameBufferUint8 = new Uint8Array(ab);
-            result.push({
-                frame: artifact.frame,
-                content: frameBufferUint8,
-                filename: artifact.filename,
-                downloadBehavior: artifact.downloadBehavior,
-            });
-            continue;
-        }
-        throw new Error('Unknown artifact type: ' + artifact);
-    }
-    return result.filter(NoReactInternals.truthy);
-};
-export const handleArtifacts = () => {
-    const previousArtifacts = [];
-    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.js

@@ -1,42 +0,0 @@
-const TARGET_NUMBER_OF_CHANNELS = 2;
-const TARGET_SAMPLE_RATE = 48000;
-function mixAudio(waves, length) {
-    if (waves.length === 1 && waves[0].length === length) {
-        return waves[0];
-    }
-    const mixed = new Int16Array(length);
-    if (waves.length === 1) {
-        mixed.set(waves[0].subarray(0, length));
-        return mixed;
-    }
-    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

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

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

@@ -1,11 +0,0 @@
-export declare const calculateTransforms: (element: HTMLElement | SVGSVGElement) => {
-    dimensions: DOMRect;
-    totalMatrix: DOMMatrix;
-    reset: () => void;
-    nativeTransformOrigin: {
-        x: number;
-        y: number;
-    };
-    borderRadius: import("./drawing/border-radius").BorderRadiusCorners;
-    opacity: number;
-};

package/dist/calculate-transforms.js

@@ -1,91 +0,0 @@
-import { parseBorderRadius } from './drawing/border-radius';
-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) => {
-    // Compute the cumulative transform by traversing parent nodes
-    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 === ''
-                ? undefined
-                : computedStyle.transform;
-            const matrix = new DOMMatrix(toParse);
-            const { transform } = parent.style;
-            parent.style.transform = 'none';
-            transforms.push({
-                matrix,
-                rect: parent,
-                transformOrigin: computedStyle.transformOrigin,
-                boundingClientRect: null,
-            });
-            const parentRef = parent;
-            toReset.push(() => {
-                parentRef.style.transform = transform;
-            });
-        }
-        parent = parent.parentElement;
-    }
-    for (const transform of transforms) {
-        transform.boundingClientRect = transform.rect.getBoundingClientRect();
-    }
-    const dimensions = transforms[0].boundingClientRect;
-    const nativeTransformOrigin = getInternalTransformOrigin(transforms[0]);
-    const totalMatrix = new DOMMatrix();
-    for (const transform of transforms.slice().reverse()) {
-        if (!transform.boundingClientRect) {
-            throw new Error('Bounding client rect not found');
-        }
-        const globalTransformOrigin = getGlobalTransformOrigin(transform);
-        const transformMatrix = new DOMMatrix()
-            .translate(globalTransformOrigin.x, globalTransformOrigin.y)
-            .multiply(transform.matrix)
-            .translate(-globalTransformOrigin.x, -globalTransformOrigin.y);
-        totalMatrix.multiplySelf(transformMatrix);
-    }
-    return {
-        dimensions,
-        totalMatrix,
-        reset: () => {
-            for (const reset of toReset) {
-                reset();
-            }
-        },
-        nativeTransformOrigin,
-        borderRadius: parseBorderRadius({
-            borderRadius,
-            width: dimensions.width,
-            height: dimensions.height,
-        }),
-        opacity,
-    };
-};