@remotion/web-renderer 4.0.392 → 4.0.393

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export type { WebRendererCodec, WebRendererContainer, WebRendererQuality, } from './mediabunny-mappings';
+export type { WebRendererOutputTarget } from './output-target';
 export { renderMediaOnWeb } from './render-media-on-web';
-export type { RenderMediaOnWebOptions, RenderMediaOnWebProgress, RenderMediaOnWebProgressCallback, } from './render-media-on-web';
+export type { RenderMediaOnWebOptions, RenderMediaOnWebProgress, RenderMediaOnWebProgressCallback, RenderMediaOnWebResult, } from './render-media-on-web';
 export { renderStillOnWeb } from './render-still-on-web';
 export type { RenderStillOnWebImageFormat as RenderStillImageFormat, RenderStillOnWebOptions, } from './render-still-on-web';
 export type { OnFrameCallback } from './validate-video-frame';

package/dist/mediabunny-mappings.d.ts

@@ -7,3 +7,4 @@ export declare const codecToMediabunnyCodec: (codec: WebRendererCodec) => VideoC
 export declare const containerToMediabunnyContainer: (container: WebRendererContainer) => OutputFormat;
 export declare const getDefaultVideoCodecForContainer: (container: WebRendererContainer) => WebRendererCodec;
 export declare const getQualityForWebRendererQuality: (quality: WebRendererQuality) => Quality;
+export declare const getMimeType: (container: WebRendererContainer) => string;

package/dist/mediabunny-mappings.js

@@ -51,3 +51,13 @@ export const getQualityForWebRendererQuality = (quality) => {
             throw new Error(`Unsupported quality: ${quality}`);
     }
 };
+export const getMimeType = (container) => {
+    switch (container) {
+        case 'mp4':
+            return 'video/mp4';
+        case 'webm':
+            return 'video/webm';
+        default:
+            throw new Error(`Unsupported container: ${container}`);
+    }
+};

package/dist/output-target.d.ts

@@ -0,0 +1 @@
+export type WebRendererOutputTarget = 'arraybuffer' | 'web-fs';

package/dist/output-target.js

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

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

@@ -4,6 +4,7 @@ import { type OnArtifact } from './artifact';
 import { type FrameRange } from './frame-range';
 import type { WebRendererContainer, WebRendererQuality } from './mediabunny-mappings';
 import { type WebRendererCodec } from './mediabunny-mappings';
+import type { WebRendererOutputTarget } from './output-target';
 import type { CompositionCalculateMetadataOrExplicit } from './props-if-has-props';
 import { type OnFrameCallback } from './validate-video-frame';
 export type InputPropsIfHasProps<Schema extends AnyZodObject, Props> = AnyZodObject extends Schema ? {} extends Props ? {
@@ -22,6 +23,9 @@ export type RenderMediaOnWebProgress = {
     renderedFrames: number;
     encodedFrames: number;
 };
+export type RenderMediaOnWebResult = {
+    getBlob: () => Promise<Blob>;
+};
 export type RenderMediaOnWebProgressCallback = (progress: RenderMediaOnWebProgress) => void;
 type OptionalRenderMediaOnWebOptions<Schema extends AnyZodObject> = {
     delayRenderTimeoutInMilliseconds: number;
@@ -39,7 +43,8 @@ type OptionalRenderMediaOnWebOptions<Schema extends AnyZodObject> = {
     transparent: boolean;
     onArtifact: OnArtifact | null;
     onFrame: OnFrameCallback | null;
+    outputTarget: WebRendererOutputTarget | null;
 };
 export type RenderMediaOnWebOptions<Schema extends AnyZodObject, Props extends Record<string, unknown>> = MandatoryRenderMediaOnWebOptions<Schema, Props> & Partial<OptionalRenderMediaOnWebOptions<Schema>> & InputPropsIfHasProps<Schema, Props>;
-export declare const renderMediaOnWeb: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(options: RenderMediaOnWebOptions<Schema, Props>) => Promise<ArrayBuffer>;
+export declare const renderMediaOnWeb: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(options: RenderMediaOnWebOptions<Schema, Props>) => Promise<RenderMediaOnWebResult>;
 export {};

package/dist/render-media-on-web.js

@@ -1,24 +1,34 @@
-import { AudioSampleSource, BufferTarget, Output, VideoSampleSource, } from 'mediabunny';
+import { AudioSampleSource, BufferTarget, Output, StreamTarget, VideoSampleSource, } from 'mediabunny';
 import { Internals } from 'remotion';
 import { addAudioSample, addVideoSampleAndCloseFrame } from './add-sample';
 import { handleArtifacts } from './artifact';
 import { onlyInlineAudio } from './audio';
+import { canUseWebFsWriter } from './can-use-webfs-target';
 import { createScaffold } from './create-scaffold';
 import { getRealFrameRange } from './frame-range';
 import { getDefaultAudioEncodingConfig } from './get-audio-encoding-config';
-import { codecToMediabunnyCodec, containerToMediabunnyContainer, getDefaultVideoCodecForContainer, getQualityForWebRendererQuality, } from './mediabunny-mappings';
+import { codecToMediabunnyCodec, containerToMediabunnyContainer, getDefaultVideoCodecForContainer, getMimeType, getQualityForWebRendererQuality, } from './mediabunny-mappings';
+import { onlyOneRenderAtATimeQueue } from './render-operations-queue';
 import { createFrame } from './take-screenshot';
 import { createThrottledProgressCallback } from './throttle-progress';
 import { validateVideoFrame } from './validate-video-frame';
 import { waitForReady } from './wait-for-ready';
+import { cleanupStaleOpfsFiles, createWebFsTarget } from './web-fs-target';
 // TODO: More containers
 // TODO: Audio
 // TODO: Metadata
 // TODO: Validating inputs
-// TODO: Web file system API
 // TODO: Apply defaultCodec
-const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTimeoutInMilliseconds, logLevel, mediaCacheSizeInBytes, schema, codec, container, signal, onProgress, hardwareAcceleration, keyframeIntervalInSeconds, videoBitrate, frameRange, transparent, onArtifact, onFrame, }) => {
+const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTimeoutInMilliseconds, logLevel, mediaCacheSizeInBytes, schema, codec, container, signal, onProgress, hardwareAcceleration, keyframeIntervalInSeconds, videoBitrate, frameRange, transparent, onArtifact, onFrame, outputTarget: userDesiredOutputTarget, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
+    const outputTarget = userDesiredOutputTarget === null
+        ? (await canUseWebFsWriter())
+            ? 'web-fs'
+            : 'arraybuffer'
+        : userDesiredOutputTarget;
+    if (outputTarget === 'web-fs') {
+        await cleanupStaleOpfsFiles();
+    }
     const cleanupFns = [];
     const format = containerToMediabunnyContainer(container);
     if (codec &&
@@ -62,9 +72,13 @@ const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTi
     cleanupFns.push(() => {
         cleanupScaffold();
     });
+    const webFsTarget = outputTarget === 'web-fs' ? await createWebFsTarget() : null;
+    const target = webFsTarget
+        ? new StreamTarget(webFsTarget.stream)
+        : new BufferTarget();
     const output = new Output({
         format,
-        target: new BufferTarget(),
+        target,
     });
     try {
         if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
@@ -190,32 +204,58 @@ const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTi
         videoSampleSource.close();
         audioSampleSource.close();
         await output.finalize();
-        return output.target.buffer;
+        const mimeType = getMimeType(container);
+        if (webFsTarget) {
+            await webFsTarget.close();
+            return {
+                getBlob: () => {
+                    return webFsTarget.getBlob();
+                },
+            };
+        }
+        if (!(target instanceof BufferTarget)) {
+            throw new Error('Expected target to be a BufferTarget');
+        }
+        return {
+            getBlob: () => {
+                if (!target.buffer) {
+                    throw new Error('The resulting buffer is empty');
+                }
+                return Promise.resolve(new Blob([target.buffer], { type: mimeType }));
+            },
+        };
     }
     finally {
         cleanupFns.forEach((fn) => fn());
     }
 };
 export const renderMediaOnWeb = (options) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var _a, _b;
     const container = (_a = options.container) !== null && _a !== void 0 ? _a : 'mp4';
     const codec = (_b = options.codec) !== null && _b !== void 0 ? _b : getDefaultVideoCodecForContainer(container);
-    return internalRenderMediaOnWeb({
-        ...options,
-        delayRenderTimeoutInMilliseconds: (_c = options.delayRenderTimeoutInMilliseconds) !== null && _c !== void 0 ? _c : 30000,
-        logLevel: (_d = options.logLevel) !== null && _d !== void 0 ? _d : 'info',
-        schema: (_e = options.schema) !== null && _e !== void 0 ? _e : undefined,
-        mediaCacheSizeInBytes: (_f = options.mediaCacheSizeInBytes) !== null && _f !== void 0 ? _f : null,
-        codec,
-        container,
-        signal: (_g = options.signal) !== null && _g !== void 0 ? _g : null,
-        onProgress: (_h = options.onProgress) !== null && _h !== void 0 ? _h : null,
-        hardwareAcceleration: (_j = options.hardwareAcceleration) !== null && _j !== void 0 ? _j : 'no-preference',
-        keyframeIntervalInSeconds: (_k = options.keyframeIntervalInSeconds) !== null && _k !== void 0 ? _k : 5,
-        videoBitrate: (_l = options.videoBitrate) !== null && _l !== void 0 ? _l : 'medium',
-        frameRange: (_m = options.frameRange) !== null && _m !== void 0 ? _m : null,
-        transparent: (_o = options.transparent) !== null && _o !== void 0 ? _o : false,
-        onArtifact: (_p = options.onArtifact) !== null && _p !== void 0 ? _p : null,
-        onFrame: (_q = options.onFrame) !== null && _q !== void 0 ? _q : null,
+    onlyOneRenderAtATimeQueue.ref = onlyOneRenderAtATimeQueue.ref
+        .catch(() => Promise.resolve())
+        .then(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        return internalRenderMediaOnWeb({
+            ...options,
+            delayRenderTimeoutInMilliseconds: (_a = options.delayRenderTimeoutInMilliseconds) !== null && _a !== void 0 ? _a : 30000,
+            logLevel: (_b = options.logLevel) !== null && _b !== void 0 ? _b : 'info',
+            schema: (_c = options.schema) !== null && _c !== void 0 ? _c : undefined,
+            mediaCacheSizeInBytes: (_d = options.mediaCacheSizeInBytes) !== null && _d !== void 0 ? _d : null,
+            codec,
+            container,
+            signal: (_e = options.signal) !== null && _e !== void 0 ? _e : null,
+            onProgress: (_f = options.onProgress) !== null && _f !== void 0 ? _f : null,
+            hardwareAcceleration: (_g = options.hardwareAcceleration) !== null && _g !== void 0 ? _g : 'no-preference',
+            keyframeIntervalInSeconds: (_h = options.keyframeIntervalInSeconds) !== null && _h !== void 0 ? _h : 5,
+            videoBitrate: (_j = options.videoBitrate) !== null && _j !== void 0 ? _j : 'medium',
+            frameRange: (_k = options.frameRange) !== null && _k !== void 0 ? _k : null,
+            transparent: (_l = options.transparent) !== null && _l !== void 0 ? _l : false,
+            onArtifact: (_m = options.onArtifact) !== null && _m !== void 0 ? _m : null,
+            onFrame: (_o = options.onFrame) !== null && _o !== void 0 ? _o : null,
+            outputTarget: (_p = options.outputTarget) !== null && _p !== void 0 ? _p : null,
+        });
     });
+    return onlyOneRenderAtATimeQueue.ref;
 };

package/dist/render-operations-queue.d.ts

@@ -0,0 +1,3 @@
+export declare const onlyOneRenderAtATimeQueue: {
+    ref: Promise<unknown>;
+};

package/dist/render-operations-queue.js

@@ -0,0 +1,3 @@
+export const onlyOneRenderAtATimeQueue = {
+    ref: Promise.resolve(),
+};

package/dist/render-still-on-web.js

@@ -1,6 +1,7 @@
 import { Internals, } from 'remotion';
 import { handleArtifacts } from './artifact';
 import { createScaffold } from './create-scaffold';
+import { onlyOneRenderAtATimeQueue } from './render-operations-queue';
 import { takeScreenshot } from './take-screenshot';
 import { waitForReady } from './wait-for-ready';
 async function internalRenderStillOnWeb({ frame, delayRenderTimeoutInMilliseconds, logLevel, inputProps, schema, imageFormat, mediaCacheSizeInBytes, composition, signal, onArtifact, }) {
@@ -68,14 +69,19 @@ async function internalRenderStillOnWeb({ frame, delayRenderTimeoutInMillisecond
     }
 }
 export const renderStillOnWeb = (options) => {
-    var _a, _b, _c, _d, _e, _f;
-    return internalRenderStillOnWeb({
-        ...options,
-        delayRenderTimeoutInMilliseconds: (_a = options.delayRenderTimeoutInMilliseconds) !== null && _a !== void 0 ? _a : 30000,
-        logLevel: (_b = options.logLevel) !== null && _b !== void 0 ? _b : 'info',
-        schema: (_c = options.schema) !== null && _c !== void 0 ? _c : undefined,
-        mediaCacheSizeInBytes: (_d = options.mediaCacheSizeInBytes) !== null && _d !== void 0 ? _d : null,
-        signal: (_e = options.signal) !== null && _e !== void 0 ? _e : null,
-        onArtifact: (_f = options.onArtifact) !== null && _f !== void 0 ? _f : null,
+    onlyOneRenderAtATimeQueue.ref = onlyOneRenderAtATimeQueue.ref
+        .catch(() => Promise.resolve())
+        .then(() => {
+        var _a, _b, _c, _d, _e, _f;
+        return internalRenderStillOnWeb({
+            ...options,
+            delayRenderTimeoutInMilliseconds: (_a = options.delayRenderTimeoutInMilliseconds) !== null && _a !== void 0 ? _a : 30000,
+            logLevel: (_b = options.logLevel) !== null && _b !== void 0 ? _b : 'info',
+            schema: (_c = options.schema) !== null && _c !== void 0 ? _c : undefined,
+            mediaCacheSizeInBytes: (_d = options.mediaCacheSizeInBytes) !== null && _d !== void 0 ? _d : null,
+            signal: (_e = options.signal) !== null && _e !== void 0 ? _e : null,
+            onArtifact: (_f = options.onArtifact) !== null && _f !== void 0 ? _f : null,
+        });
     });
+    return onlyOneRenderAtATimeQueue.ref;
 };

package/dist/take-screenshot.js

@@ -5,7 +5,7 @@ export const createFrame = async ({ div, width, height, }) => {
     if (!context) {
         throw new Error('Could not get context');
     }
-    await compose(div, context);
+    await compose({ element: div, context, offsetLeft: 0, offsetTop: 0 });
     return canvas;
 };
 export const takeScreenshot = async ({ div, width, height, imageFormat, }) => {

package/dist/walk-tree.d.ts

@@ -0,0 +1 @@
+export declare function skipToNextNonDescendant(treeWalker: TreeWalker): boolean;

package/dist/walk-tree.js

@@ -0,0 +1,14 @@
+export function skipToNextNonDescendant(treeWalker) {
+    // Try to go to next sibling
+    if (treeWalker.nextSibling()) {
+        return true;
+    }
+    // No sibling, go up to parent and try to find ancestor's sibling
+    while (treeWalker.parentNode()) {
+        if (treeWalker.nextSibling()) {
+            return true;
+        }
+    }
+    // No more nodes
+    return false;
+}

package/dist/web-fs-target.d.ts

@@ -0,0 +1,7 @@
+import type { StreamTargetChunk } from 'mediabunny';
+export declare const cleanupStaleOpfsFiles: () => Promise<void>;
+export declare const createWebFsTarget: () => Promise<{
+    stream: WritableStream<StreamTargetChunk>;
+    getBlob: () => Promise<File>;
+    close: () => Promise<void>;
+}>;

package/dist/web-fs-target.js

@@ -0,0 +1,41 @@
+let sessionId = null;
+const getPrefix = () => {
+    if (!sessionId) {
+        sessionId = crypto.randomUUID();
+    }
+    return `__remotion_render:${sessionId}:`;
+};
+export const cleanupStaleOpfsFiles = async () => {
+    try {
+        const root = await navigator.storage.getDirectory();
+        for await (const [name] of root.entries()) {
+            if (name.startsWith('__remotion_render:') &&
+                !name.startsWith(getPrefix())) {
+                await root.removeEntry(name);
+            }
+        }
+    }
+    catch (_a) {
+        // Ignore, could already be closed
+    }
+};
+export const createWebFsTarget = async () => {
+    const directoryHandle = await navigator.storage.getDirectory();
+    const filename = `${getPrefix()}${crypto.randomUUID()}`;
+    const fileHandle = await directoryHandle.getFileHandle(filename, {
+        create: true,
+    });
+    const writable = await fileHandle.createWritable();
+    const stream = new WritableStream({
+        async write(chunk) {
+            await writable.seek(chunk.position);
+            await writable.write(chunk);
+        },
+    });
+    const getBlob = async () => {
+        const handle = await directoryHandle.getFileHandle(filename);
+        return handle.getFile();
+    };
+    const close = () => writable.close();
+    return { stream, getBlob, close };
+};

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/web-renderer"
 	},
 	"name": "@remotion/web-renderer",
-	"version": "4.0.392",
+	"version": "4.0.393",
 	"main": "dist/index.js",
 	"sideEffects": false,
 	"scripts": {
@@ -16,13 +16,13 @@
 	"author": "Remotion <jonny@remotion.dev>",
 	"license": "UNLICENSED",
 	"dependencies": {
-		"remotion": "4.0.392",
-		"mediabunny": "1.25.8"
+		"remotion": "4.0.393",
+		"mediabunny": "1.27.0"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.392",
-		"@remotion/player": "4.0.392",
-		"@remotion/media": "4.0.392",
+		"@remotion/eslint-config-internal": "4.0.393",
+		"@remotion/player": "4.0.393",
+		"@remotion/media": "4.0.393",
 		"@vitejs/plugin-react": "4.1.0",
 		"@vitest/browser-playwright": "4.0.9",
 		"playwright": "1.55.1",

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,
-    };
-};

package/dist/composable.d.ts

@@ -1,4 +0,0 @@
-export type Composable = {
-    type: 'element';
-    element: HTMLElement | SVGElement;
-};

package/dist/compose-canvas.d.ts

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