@remotion/web-renderer 4.0.424 → 4.0.425

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.js

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

@@ -0,0 +1,42 @@
+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/can-use-webfs-target.js

@@ -0,0 +1,19 @@
+export const canUseWebFsWriter = async () => {
+    if (!('storage' in navigator)) {
+        return false;
+    }
+    if (!('getDirectory' in navigator.storage)) {
+        return false;
+    }
+    try {
+        const directoryHandle = await navigator.storage.getDirectory();
+        const fileHandle = await directoryHandle.getFileHandle('remotion-probe-web-fs-support', {
+            create: true,
+        });
+        const canUse = fileHandle.createWritable !== undefined;
+        return canUse;
+    }
+    catch (_a) {
+        return false;
+    }
+};

package/dist/compose.js

@@ -0,0 +1,85 @@
+import { drawDomElement } from './drawing/draw-dom-element';
+import { processNode } from './drawing/process-node';
+import { handleTextNode } from './drawing/text/handle-text-node';
+import { createTreeWalkerCleanupAfterChildren } from './tree-walker-cleanup-after-children';
+import { skipToNextNonDescendant } from './walk-tree';
+const walkOverNode = ({ node, context, logLevel, parentRect, internalState, rootElement, onlyBackgroundClip, }) => {
+    if (node instanceof HTMLElement || node instanceof SVGElement) {
+        return processNode({
+            element: node,
+            context,
+            draw: drawDomElement(node),
+            logLevel,
+            parentRect,
+            internalState,
+            rootElement,
+        });
+    }
+    if (node instanceof Text) {
+        return handleTextNode({
+            node,
+            context,
+            logLevel,
+            parentRect,
+            internalState,
+            rootElement,
+            onlyBackgroundClip,
+        });
+    }
+    throw new Error('Unknown node type');
+};
+const getFilterFunction = (node) => {
+    if (!(node instanceof Element)) {
+        // Must be a text node!
+        return NodeFilter.FILTER_ACCEPT;
+    }
+    // SVG does have children, but we process SVG elements in its
+    // entirety
+    if (node.parentElement instanceof SVGSVGElement) {
+        return NodeFilter.FILTER_REJECT;
+    }
+    const computedStyle = getComputedStyle(node);
+    if (computedStyle.display === 'none') {
+        return NodeFilter.FILTER_REJECT;
+    }
+    return NodeFilter.FILTER_ACCEPT;
+};
+export const compose = async ({ element, context, logLevel, parentRect, internalState, onlyBackgroundClip, }) => {
+    const treeWalker = document.createTreeWalker(element, onlyBackgroundClip
+        ? NodeFilter.SHOW_TEXT
+        : NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, getFilterFunction);
+    // Skip to the first text node
+    if (onlyBackgroundClip) {
+        treeWalker.nextNode();
+        if (!treeWalker.currentNode) {
+            return;
+        }
+    }
+    const { checkCleanUpAtBeginningOfIteration, addCleanup, cleanupInTheEndOfTheIteration, } = createTreeWalkerCleanupAfterChildren(treeWalker);
+    while (true) {
+        checkCleanUpAtBeginningOfIteration();
+        const val = await walkOverNode({
+            node: treeWalker.currentNode,
+            context,
+            logLevel,
+            parentRect,
+            internalState,
+            rootElement: element,
+            onlyBackgroundClip,
+        });
+        if (val.type === 'skip-children') {
+            if (!skipToNextNonDescendant(treeWalker)) {
+                break;
+            }
+        }
+        else {
+            if (val.cleanupAfterChildren) {
+                addCleanup(treeWalker.currentNode, val.cleanupAfterChildren);
+            }
+            if (!treeWalker.nextNode()) {
+                break;
+            }
+        }
+    }
+    cleanupInTheEndOfTheIteration();
+};

package/dist/create-scaffold.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createRef } from 'react';
+import { flushSync } from 'react-dom';
+import ReactDOM from 'react-dom/client';
+import { Internals } from 'remotion';
+import { UpdateTime } from './update-time';
+import { withResolvers } from './with-resolvers';
+export async function createScaffold({ width, height, delayRenderTimeoutInMilliseconds, logLevel, resolvedProps, id, mediaCacheSizeInBytes, durationInFrames, fps, initialFrame, schema, Component, audioEnabled, videoEnabled, defaultCodec, defaultOutName, }) {
+    if (!ReactDOM.createRoot) {
+        throw new Error('@remotion/web-renderer requires React 18 or higher');
+    }
+    const div = document.createElement('div');
+    // Match same behavior as in portal-node.ts
+    div.style.position = 'fixed';
+    div.style.display = 'flex';
+    div.style.flexDirection = 'column';
+    div.style.backgroundColor = 'transparent';
+    div.style.width = `${width}px`;
+    div.style.height = `${height}px`;
+    div.style.zIndex = '-9999';
+    div.style.top = '0';
+    div.style.left = '0';
+    div.style.right = '0';
+    div.style.bottom = '0';
+    div.style.visibility = 'hidden';
+    div.style.pointerEvents = 'none';
+    const scaffoldClassName = `remotion-scaffold-${Math.random().toString(36).substring(2, 15)}`;
+    div.className = scaffoldClassName;
+    const cleanupCSS = Internals.CSSUtils.injectCSS(Internals.CSSUtils.makeDefaultPreviewCSS(`.${scaffoldClassName}`, 'white'));
+    document.body.appendChild(div);
+    const { promise, resolve, reject } = withResolvers();
+    // TODO: This might not work in React 18
+    const root = ReactDOM.createRoot(div, {
+        onUncaughtError: (err) => {
+            reject(err);
+        },
+    });
+    const delayRenderScope = {
+        remotion_renderReady: true,
+        remotion_delayRenderTimeouts: {},
+        remotion_puppeteerTimeout: delayRenderTimeoutInMilliseconds,
+        remotion_attempt: 0,
+        remotion_delayRenderHandles: [],
+    };
+    const timeUpdater = createRef();
+    const collectAssets = createRef();
+    flushSync(() => {
+        root.render(_jsx(Internals.MaxMediaCacheSizeContext.Provider, { value: mediaCacheSizeInBytes, children: _jsx(Internals.RemotionEnvironmentContext.Provider, { value: {
+                    isStudio: false,
+                    isRendering: true,
+                    isPlayer: false,
+                    isReadOnlyStudio: false,
+                    isClientSideRendering: true,
+                }, children: _jsx(Internals.DelayRenderContextType.Provider, { value: delayRenderScope, children: _jsx(Internals.CompositionManager.Provider, { value: {
+                            compositions: [
+                                {
+                                    id,
+                                    // @ts-expect-error
+                                    component: Component,
+                                    nonce: 0,
+                                    defaultProps: {},
+                                    folderName: null,
+                                    parentFolderName: null,
+                                    schema: schema !== null && schema !== void 0 ? schema : null,
+                                    calculateMetadata: null,
+                                    durationInFrames,
+                                    fps,
+                                    height,
+                                    width,
+                                },
+                            ],
+                            canvasContent: {
+                                type: 'composition',
+                                compositionId: id,
+                            },
+                            currentCompositionMetadata: {
+                                props: resolvedProps,
+                                durationInFrames,
+                                fps,
+                                height,
+                                width,
+                                defaultCodec: defaultCodec !== null && defaultCodec !== void 0 ? defaultCodec : null,
+                                defaultOutName: defaultOutName !== null && defaultOutName !== void 0 ? defaultOutName : null,
+                                defaultVideoImageFormat: null,
+                                defaultPixelFormat: null,
+                                defaultProResProfile: null,
+                            },
+                            folders: [],
+                        }, children: _jsx(Internals.RenderAssetManagerProvider, { collectAssets: collectAssets, children: _jsx(UpdateTime, { audioEnabled: audioEnabled, videoEnabled: videoEnabled, logLevel: logLevel, compId: id, initialFrame: initialFrame, timeUpdater: timeUpdater, children: _jsx(Internals.CanUseRemotionHooks.Provider, { value: true, children: _jsx(Component, { ...resolvedProps }) }) }) }) }) }) }) }));
+    });
+    resolve();
+    await promise;
+    return {
+        delayRenderScope,
+        div,
+        cleanupScaffold: () => {
+            root.unmount();
+            div.remove();
+            cleanupCSS();
+        },
+        timeUpdater,
+        collectAssets,
+    };
+}

package/dist/drawing/border-radius.js

@@ -0,0 +1,151 @@
+import { drawRoundedRectPath } from './draw-rounded';
+import { getBoxBasedOnBackgroundClip } from './get-padding-box';
+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, rect, borderRadius, forceClipEvenWhenZero = false, computedStyle, backgroundClip, }) {
+    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 &&
+        !forceClipEvenWhenZero) {
+        return () => { };
+    }
+    ctx.save();
+    const boundingRect = getBoxBasedOnBackgroundClip(rect, computedStyle, backgroundClip);
+    // See background-clip tests for why this logic matters!
+    const actualBorderRadius = {
+        topLeft: {
+            horizontal: Math.max(0, borderRadius.topLeft.horizontal - (boundingRect.left - rect.left)),
+            vertical: Math.max(0, borderRadius.topLeft.vertical - (boundingRect.top - rect.top)),
+        },
+        topRight: {
+            horizontal: Math.max(0, borderRadius.topRight.horizontal - (rect.right - boundingRect.right)),
+            vertical: Math.max(0, borderRadius.topRight.vertical - (boundingRect.top - rect.top)),
+        },
+        bottomRight: {
+            horizontal: Math.max(0, borderRadius.bottomRight.horizontal - (rect.right - boundingRect.right)),
+            vertical: Math.max(0, borderRadius.bottomRight.vertical - (rect.bottom - boundingRect.bottom)),
+        },
+        bottomLeft: {
+            horizontal: Math.max(0, borderRadius.bottomLeft.horizontal - (boundingRect.left - rect.left)),
+            vertical: Math.max(0, borderRadius.bottomLeft.vertical - (rect.bottom - boundingRect.bottom)),
+        },
+    };
+    drawRoundedRectPath({
+        ctx,
+        x: boundingRect.left,
+        y: boundingRect.top,
+        width: boundingRect.width,
+        height: boundingRect.height,
+        borderRadius: actualBorderRadius,
+    });
+    ctx.clip();
+    return () => {
+        ctx.restore();
+    };
+}

package/dist/drawing/calculate-object-fit.js

@@ -0,0 +1,208 @@
+/**
+ * fill: Stretch the image to fill the container, ignoring aspect ratio
+ */
+const calculateFill = ({ containerSize, intrinsicSize, }) => {
+    return {
+        sourceX: 0,
+        sourceY: 0,
+        sourceWidth: intrinsicSize.width,
+        sourceHeight: intrinsicSize.height,
+        destX: containerSize.left,
+        destY: containerSize.top,
+        destWidth: containerSize.width,
+        destHeight: containerSize.height,
+    };
+};
+/**
+ * contain: Scale the image to fit inside the container while maintaining aspect ratio.
+ * This may result in letterboxing (empty space on sides or top/bottom).
+ */
+const calculateContain = ({ containerSize, intrinsicSize, }) => {
+    const containerAspect = containerSize.width / containerSize.height;
+    const imageAspect = intrinsicSize.width / intrinsicSize.height;
+    let destWidth;
+    let destHeight;
+    if (imageAspect > containerAspect) {
+        // Image is wider than container (relative to their heights)
+        // Fit by width, letterbox top/bottom
+        destWidth = containerSize.width;
+        destHeight = containerSize.width / imageAspect;
+    }
+    else {
+        // Image is taller than container (relative to their widths)
+        // Fit by height, letterbox left/right
+        destHeight = containerSize.height;
+        destWidth = containerSize.height * imageAspect;
+    }
+    // Center the image in the container
+    const destX = containerSize.left + (containerSize.width - destWidth) / 2;
+    const destY = containerSize.top + (containerSize.height - destHeight) / 2;
+    return {
+        sourceX: 0,
+        sourceY: 0,
+        sourceWidth: intrinsicSize.width,
+        sourceHeight: intrinsicSize.height,
+        destX,
+        destY,
+        destWidth,
+        destHeight,
+    };
+};
+/**
+ * cover: Scale the image to cover the container while maintaining aspect ratio.
+ * Parts of the image may be cropped.
+ */
+const calculateCover = ({ containerSize, intrinsicSize, }) => {
+    // Guard against zero or non-positive heights to avoid division by zero and NaN/Infinity.
+    if (containerSize.height <= 0 || intrinsicSize.height <= 0) {
+        return {
+            sourceX: 0,
+            sourceY: 0,
+            sourceWidth: 0,
+            sourceHeight: 0,
+            destX: containerSize.left,
+            destY: containerSize.top,
+            destWidth: 0,
+            destHeight: 0,
+        };
+    }
+    const containerAspect = containerSize.width / containerSize.height;
+    const imageAspect = intrinsicSize.width / intrinsicSize.height;
+    let sourceX = 0;
+    let sourceY = 0;
+    let sourceWidth = intrinsicSize.width;
+    let sourceHeight = intrinsicSize.height;
+    if (imageAspect > containerAspect) {
+        // Image is wider than container - crop horizontally
+        // Scale by height, then crop width
+        sourceWidth = intrinsicSize.height * containerAspect;
+        sourceX = (intrinsicSize.width - sourceWidth) / 2;
+    }
+    else {
+        // Image is taller than container - crop vertically
+        // Scale by width, then crop height
+        sourceHeight = intrinsicSize.width / containerAspect;
+        sourceY = (intrinsicSize.height - sourceHeight) / 2;
+    }
+    return {
+        sourceX,
+        sourceY,
+        sourceWidth,
+        sourceHeight,
+        destX: containerSize.left,
+        destY: containerSize.top,
+        destWidth: containerSize.width,
+        destHeight: containerSize.height,
+    };
+};
+/**
+ * none: Draw the image at its natural size, centered in the container.
+ * Clips to the container bounds if the image overflows.
+ */
+const calculateNone = ({ containerSize, intrinsicSize, }) => {
+    // Calculate centered position (can be negative if image is larger than container)
+    const centeredX = containerSize.left + (containerSize.width - intrinsicSize.width) / 2;
+    const centeredY = containerSize.top + (containerSize.height - intrinsicSize.height) / 2;
+    // Calculate clipping bounds
+    let sourceX = 0;
+    let sourceY = 0;
+    let sourceWidth = intrinsicSize.width;
+    let sourceHeight = intrinsicSize.height;
+    let destX = centeredX;
+    let destY = centeredY;
+    let destWidth = intrinsicSize.width;
+    let destHeight = intrinsicSize.height;
+    // Clip left edge
+    if (destX < containerSize.left) {
+        const clipAmount = containerSize.left - destX;
+        sourceX = clipAmount;
+        sourceWidth -= clipAmount;
+        destX = containerSize.left;
+        destWidth -= clipAmount;
+    }
+    // Clip top edge
+    if (destY < containerSize.top) {
+        const clipAmount = containerSize.top - destY;
+        sourceY = clipAmount;
+        sourceHeight -= clipAmount;
+        destY = containerSize.top;
+        destHeight -= clipAmount;
+    }
+    // Clip right edge
+    const containerRight = containerSize.left + containerSize.width;
+    if (destX + destWidth > containerRight) {
+        const clipAmount = destX + destWidth - containerRight;
+        sourceWidth -= clipAmount;
+        destWidth -= clipAmount;
+    }
+    // Clip bottom edge
+    const containerBottom = containerSize.top + containerSize.height;
+    if (destY + destHeight > containerBottom) {
+        const clipAmount = destY + destHeight - containerBottom;
+        sourceHeight -= clipAmount;
+        destHeight -= clipAmount;
+    }
+    return {
+        sourceX,
+        sourceY,
+        sourceWidth,
+        sourceHeight,
+        destX,
+        destY,
+        destWidth,
+        destHeight,
+    };
+};
+/**
+ * Calculates how to draw an image based on object-fit CSS property.
+ *
+ * @param objectFit - The CSS object-fit value
+ * @param containerSize - The container dimensions (where the image should be drawn)
+ * @param intrinsicSize - The natural/intrinsic size of the image
+ * @returns Source and destination rectangles for drawImage
+ */
+export const calculateObjectFit = ({ objectFit, containerSize, intrinsicSize, }) => {
+    switch (objectFit) {
+        case 'fill':
+            return calculateFill({ containerSize, intrinsicSize });
+        case 'contain':
+            return calculateContain({ containerSize, intrinsicSize });
+        case 'cover':
+            return calculateCover({ containerSize, intrinsicSize });
+        case 'none':
+            return calculateNone({ containerSize, intrinsicSize });
+        case 'scale-down': {
+            // scale-down behaves like contain or none, whichever results in a smaller image
+            const containResult = calculateContain({ containerSize, intrinsicSize });
+            const noneResult = calculateNone({ containerSize, intrinsicSize });
+            // Compare the rendered size - use whichever is smaller
+            const containArea = containResult.destWidth * containResult.destHeight;
+            const noneArea = noneResult.destWidth * noneResult.destHeight;
+            return containArea < noneArea ? containResult : noneResult;
+        }
+        default: {
+            const exhaustiveCheck = objectFit;
+            throw new Error(`Unknown object-fit value: ${exhaustiveCheck}`);
+        }
+    }
+};
+/**
+ * Parse an object-fit CSS value string into our ObjectFit type.
+ * Returns 'fill' as the default if the value is not recognized.
+ */
+export const parseObjectFit = (value) => {
+    if (!value) {
+        return 'fill';
+    }
+    const normalized = value.trim().toLowerCase();
+    switch (normalized) {
+        case 'fill':
+        case 'contain':
+        case 'cover':
+        case 'none':
+        case 'scale-down':
+            return normalized;
+        default:
+            return 'fill';
+    }
+};