@remotion/web-renderer 4.0.394 → 4.0.396

package/dist/esm/index.mjs

@@ -6,7 +6,7 @@ import {
   StreamTarget,
   VideoSampleSource
 } from "mediabunny";
-import { Internals as Internals4 } from "remotion";
+import { Internals as Internals6 } from "remotion";
 
 // src/add-sample.ts
 import { AudioSample, VideoSample } from "mediabunny";
@@ -382,6 +382,23 @@ var getDefaultAudioEncodingConfig = async () => {
   return null;
 };
 
+// src/internal-state.ts
+var makeInternalState = () => {
+  let drawn3dPixels = 0;
+  let drawn3dTextures = 0;
+  return {
+    getDrawn3dPixels: () => drawn3dPixels,
+    getDrawn3dTextures: () => drawn3dTextures,
+    add3DTransform: ({
+      canvasWidth,
+      canvasHeight
+    }) => {
+      drawn3dPixels += canvasWidth * canvasHeight;
+      drawn3dTextures++;
+    }
+  };
+};
+
 // src/mediabunny-mappings.ts
 import {
   Mp4OutputFormat,
@@ -460,20 +477,95 @@ var onlyOneRenderAtATimeQueue = {
   ref: Promise.resolve()
 };
 
+// ../licensing/dist/esm/index.mjs
+var HOST = "https://www.remotion.pro";
+var registerUsageEvent = async ({
+  apiKey,
+  host,
+  succeeded,
+  event
+}) => {
+  const abortController = new AbortController;
+  const timeout = setTimeout(() => {
+    abortController.abort();
+  }, 1e4);
+  try {
+    const res = await fetch(`${HOST}/api/track/register-usage-point`, {
+      method: "POST",
+      body: JSON.stringify({
+        event,
+        apiKey,
+        host,
+        succeeded
+      }),
+      headers: {
+        "Content-Type": "application/json"
+      },
+      signal: abortController.signal
+    });
+    clearTimeout(timeout);
+    const json = await res.json();
+    if (json.success) {
+      return {
+        billable: json.billable,
+        classification: json.classification
+      };
+    }
+    if (!res.ok) {
+      throw new Error(json.error);
+    }
+    const read = await res.json();
+    return read;
+  } catch (err) {
+    clearTimeout(timeout);
+    if (err instanceof Error && err.name === "AbortError") {
+      throw new Error("Request timed out after 10 seconds");
+    }
+    throw err;
+  }
+};
+
+// src/send-telemetry-event.ts
+import { Internals as Internals3 } from "remotion";
+var sendUsageEvent = async ({
+  licenseKey,
+  succeeded,
+  apiName
+}) => {
+  const host = typeof window === "undefined" ? null : typeof window.location === "undefined" ? null : window.location.origin ?? null;
+  if (host === null) {
+    return;
+  }
+  if (licenseKey === null) {
+    Internals3.Log.warn({ logLevel: "warn", tag: "web-renderer" }, `Pass "licenseKey" to ${apiName}(). If you qualify for the free license (https://remotion.dev/license), pass "free-license" instead.`);
+  }
+  await registerUsageEvent({
+    apiKey: licenseKey === "free-license" ? null : licenseKey,
+    event: "webcodec-conversion",
+    host,
+    succeeded
+  });
+};
+
 // src/drawing/turn-svg-into-drawable.ts
 var turnSvgIntoDrawable = (svg) => {
+  const { fill, color } = getComputedStyle(svg);
   const originalTransform = svg.style.transform;
   const originalTransformOrigin = svg.style.transformOrigin;
   const originalMarginLeft = svg.style.marginLeft;
   const originalMarginRight = svg.style.marginRight;
   const originalMarginTop = svg.style.marginTop;
   const originalMarginBottom = svg.style.marginBottom;
+  const originalFill = svg.style.fill;
+  const originalColor = svg.style.color;
   svg.style.transform = "none";
   svg.style.transformOrigin = "";
   svg.style.marginLeft = "0";
   svg.style.marginRight = "0";
   svg.style.marginTop = "0";
   svg.style.marginBottom = "0";
+  svg.style.fill = fill;
+  svg.style.color = color;
   const svgData = new XMLSerializer().serializeToString(svg);
   svg.style.marginLeft = originalMarginLeft;
   svg.style.marginRight = originalMarginRight;
@@ -481,6 +573,8 @@ var turnSvgIntoDrawable = (svg) => {
   svg.style.marginBottom = originalMarginBottom;
   svg.style.transform = originalTransform;
   svg.style.transformOrigin = originalTransformOrigin;
+  svg.style.fill = originalFill;
+  svg.style.color = originalColor;
   return new Promise((resolve, reject) => {
     const image = new Image;
     const url = `data:image/svg+xml;base64,${btoa(svgData)}`;
@@ -506,6 +600,20 @@ var drawDomElement = (node) => {
   return domDrawFn;
 };
 
+// src/drawing/has-transform.ts
+var hasTransformCssValue = (style) => {
+  return style.transform !== "none" && style.transform !== "";
+};
+var hasRotateCssValue = (style) => {
+  return style.rotate !== "none" && style.rotate !== "";
+};
+var hasScaleCssValue = (style) => {
+  return style.scale !== "none" && style.scale !== "";
+};
+var hasAnyTransformCssValue = (style) => {
+  return hasTransformCssValue(style) || hasRotateCssValue(style) || hasScaleCssValue(style);
+};
+
 // src/drawing/parse-transform-origin.ts
 var parseTransformOrigin = (transformOrigin) => {
   if (transformOrigin.trim() === "") {
@@ -525,30 +633,33 @@ var getInternalTransformOrigin = (transform) => {
   };
   return origin;
 };
-var getGlobalTransformOrigin = (transform) => {
+var getGlobalTransformOrigin = ({
+  transform,
+  offsetLeft,
+  offsetTop
+}) => {
   const { x: originX, y: originY } = getInternalTransformOrigin(transform);
   return {
-    x: originX + transform.boundingClientRect.left,
-    y: originY + transform.boundingClientRect.top
+    x: originX + transform.boundingClientRect.left - offsetLeft,
+    y: originY + transform.boundingClientRect.top - offsetTop
   };
 };
-var calculateTransforms = (element) => {
+var calculateTransforms = ({
+  element,
+  offsetLeft,
+  offsetTop
+}) => {
   let parent = element;
   const transforms = [];
   const toReset = [];
-  let opacity = 1;
   let elementComputedStyle = null;
   while (parent) {
     const computedStyle = getComputedStyle(parent);
-    const parentOpacity = computedStyle.opacity;
-    if (parentOpacity && parentOpacity !== "") {
-      opacity *= parseFloat(parentOpacity);
-    }
     if (parent === element) {
       elementComputedStyle = computedStyle;
     }
-    if (computedStyle.transform && computedStyle.transform !== "none" || parent === element) {
-      const toParse = computedStyle.transform === "none" || computedStyle.transform === "" ? undefined : computedStyle.transform;
+    if (hasAnyTransformCssValue(computedStyle) || parent === element) {
+      const toParse = hasTransformCssValue(computedStyle) ? computedStyle.transform : undefined;
       const matrix = new DOMMatrix(toParse);
       const { transform, scale, rotate } = parent.style;
       const additionalMatrices = [];
@@ -563,7 +674,7 @@ var calculateTransforms = (element) => {
       parent.style.scale = "none";
       parent.style.rotate = "none";
       transforms.push({
-        rect: parent,
+        element: parent,
         transformOrigin: computedStyle.transformOrigin,
         boundingClientRect: null,
         matrices: additionalMatrices
@@ -578,17 +689,18 @@ var calculateTransforms = (element) => {
     parent = parent.parentElement;
   }
   for (const transform of transforms) {
-    transform.boundingClientRect = transform.rect.getBoundingClientRect();
+    transform.boundingClientRect = transform.element.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");
-    }
     for (const matrix of transform.matrices) {
-      const globalTransformOrigin = getGlobalTransformOrigin(transform);
+      const globalTransformOrigin = getGlobalTransformOrigin({
+        transform,
+        offsetLeft,
+        offsetTop
+      });
       const transformMatrix = new DOMMatrix().translate(globalTransformOrigin.x, globalTransformOrigin.y).multiply(matrix).translate(-globalTransformOrigin.x, -globalTransformOrigin.y);
       totalMatrix.multiplySelf(transformMatrix);
     }
@@ -605,8 +717,8 @@ var calculateTransforms = (element) => {
       }
     },
     nativeTransformOrigin,
-    opacity,
-    computedStyle: elementComputedStyle
+    computedStyle: elementComputedStyle,
+    opacity: elementComputedStyle.opacity && elementComputedStyle.opacity !== "" ? parseFloat(elementComputedStyle.opacity) : 1
   };
 };
 
@@ -711,33 +823,31 @@ function parseBorderRadius({
 }
 function setBorderRadius({
   ctx,
-  x,
-  y,
-  width,
-  height,
-  borderRadius
+  rect,
+  borderRadius,
+  forceClipEvenWhenZero = false
 }) {
-  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) {
+  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();
   ctx.beginPath();
-  ctx.moveTo(x + borderRadius.topLeft.horizontal, y);
-  ctx.lineTo(x + width - borderRadius.topRight.horizontal, y);
+  ctx.moveTo(rect.left + borderRadius.topLeft.horizontal, rect.top);
+  ctx.lineTo(rect.left + rect.width - borderRadius.topRight.horizontal, rect.top);
   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);
+    ctx.ellipse(rect.left + rect.width - borderRadius.topRight.horizontal, rect.top + borderRadius.topRight.vertical, borderRadius.topRight.horizontal, borderRadius.topRight.vertical, 0, -Math.PI / 2, 0);
   }
-  ctx.lineTo(x + width, y + height - borderRadius.bottomRight.vertical);
+  ctx.lineTo(rect.left + rect.width, rect.top + rect.height - borderRadius.bottomRight.vertical);
   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);
+    ctx.ellipse(rect.left + rect.width - borderRadius.bottomRight.horizontal, rect.top + rect.height - borderRadius.bottomRight.vertical, borderRadius.bottomRight.horizontal, borderRadius.bottomRight.vertical, 0, 0, Math.PI / 2);
   }
-  ctx.lineTo(x + borderRadius.bottomLeft.horizontal, y + height);
+  ctx.lineTo(rect.left + borderRadius.bottomLeft.horizontal, rect.top + rect.height);
   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);
+    ctx.ellipse(rect.left + borderRadius.bottomLeft.horizontal, rect.top + rect.height - borderRadius.bottomLeft.vertical, borderRadius.bottomLeft.horizontal, borderRadius.bottomLeft.vertical, 0, Math.PI / 2, Math.PI);
   }
-  ctx.lineTo(x, y + borderRadius.topLeft.vertical);
+  ctx.lineTo(rect.left, rect.top + borderRadius.topLeft.vertical);
   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.ellipse(rect.left + borderRadius.topLeft.horizontal, rect.top + borderRadius.topLeft.vertical, borderRadius.topLeft.horizontal, borderRadius.topLeft.vertical, 0, Math.PI, Math.PI * 3 / 2);
   }
   ctx.closePath();
   ctx.clip();
@@ -747,86 +857,420 @@ function setBorderRadius({
 }
 
 // src/drawing/draw-border.ts
-var drawBorder = ({
+var parseBorderWidth = (value) => {
+  return parseFloat(value) || 0;
+};
+var getBorderSideProperties = (computedStyle) => {
+  return {
+    top: {
+      width: parseBorderWidth(computedStyle.borderTopWidth),
+      color: computedStyle.borderTopColor || computedStyle.borderColor || "black",
+      style: computedStyle.borderTopStyle || computedStyle.borderStyle || "solid"
+    },
+    right: {
+      width: parseBorderWidth(computedStyle.borderRightWidth),
+      color: computedStyle.borderRightColor || computedStyle.borderColor || "black",
+      style: computedStyle.borderRightStyle || computedStyle.borderStyle || "solid"
+    },
+    bottom: {
+      width: parseBorderWidth(computedStyle.borderBottomWidth),
+      color: computedStyle.borderBottomColor || computedStyle.borderColor || "black",
+      style: computedStyle.borderBottomStyle || computedStyle.borderStyle || "solid"
+    },
+    left: {
+      width: parseBorderWidth(computedStyle.borderLeftWidth),
+      color: computedStyle.borderLeftColor || computedStyle.borderColor || "black",
+      style: computedStyle.borderLeftStyle || computedStyle.borderStyle || "solid"
+    }
+  };
+};
+var getLineDashPattern = (style, width) => {
+  if (style === "dashed") {
+    return [width * 2, width];
+  }
+  if (style === "dotted") {
+    return [width, width];
+  }
+  return [];
+};
+var drawBorderSide = ({
+  ctx,
+  side,
+  x,
+  y,
+  width,
+  height,
+  borderRadius,
+  borderProperties
+}) => {
+  const { width: borderWidth, color, style } = borderProperties;
+  if (borderWidth <= 0 || style === "none" || style === "hidden") {
+    return;
+  }
+  ctx.beginPath();
+  ctx.strokeStyle = color;
+  ctx.lineWidth = borderWidth;
+  ctx.setLineDash(getLineDashPattern(style, borderWidth));
+  const halfWidth = borderWidth / 2;
+  if (side === "top") {
+    const startX = x + borderRadius.topLeft.horizontal;
+    const startY = y + halfWidth;
+    const endX = x + width - borderRadius.topRight.horizontal;
+    const endY = y + halfWidth;
+    ctx.moveTo(startX, startY);
+    ctx.lineTo(endX, endY);
+  } else if (side === "right") {
+    const startX = x + width - halfWidth;
+    const startY = y + borderRadius.topRight.vertical;
+    const endX = x + width - halfWidth;
+    const endY = y + height - borderRadius.bottomRight.vertical;
+    ctx.moveTo(startX, startY);
+    ctx.lineTo(endX, endY);
+  } else if (side === "bottom") {
+    const startX = x + borderRadius.bottomLeft.horizontal;
+    const startY = y + height - halfWidth;
+    const endX = x + width - borderRadius.bottomRight.horizontal;
+    const endY = y + height - halfWidth;
+    ctx.moveTo(startX, startY);
+    ctx.lineTo(endX, endY);
+  } else if (side === "left") {
+    const startX = x + halfWidth;
+    const startY = y + borderRadius.topLeft.vertical;
+    const endX = x + halfWidth;
+    const endY = y + height - borderRadius.bottomLeft.vertical;
+    ctx.moveTo(startX, startY);
+    ctx.lineTo(endX, endY);
+  }
+  ctx.stroke();
+};
+var drawCorner = ({
   ctx,
+  corner,
   x,
   y,
   width,
   height,
   borderRadius,
+  topBorder,
+  rightBorder,
+  bottomBorder,
+  leftBorder
+}) => {
+  const radius = borderRadius[corner];
+  if (radius.horizontal <= 0 && radius.vertical <= 0) {
+    return;
+  }
+  let border1;
+  let border2;
+  let centerX;
+  let centerY;
+  let startAngle;
+  let endAngle;
+  if (corner === "topLeft") {
+    border1 = leftBorder;
+    border2 = topBorder;
+    centerX = x + radius.horizontal;
+    centerY = y + radius.vertical;
+    startAngle = Math.PI;
+    endAngle = Math.PI * 3 / 2;
+  } else if (corner === "topRight") {
+    border1 = topBorder;
+    border2 = rightBorder;
+    centerX = x + width - radius.horizontal;
+    centerY = y + radius.vertical;
+    startAngle = -Math.PI / 2;
+    endAngle = 0;
+  } else if (corner === "bottomRight") {
+    border1 = rightBorder;
+    border2 = bottomBorder;
+    centerX = x + width - radius.horizontal;
+    centerY = y + height - radius.vertical;
+    startAngle = 0;
+    endAngle = Math.PI / 2;
+  } else {
+    border1 = bottomBorder;
+    border2 = leftBorder;
+    centerX = x + radius.horizontal;
+    centerY = y + height - radius.vertical;
+    startAngle = Math.PI / 2;
+    endAngle = Math.PI;
+  }
+  const avgWidth = (border1.width + border2.width) / 2;
+  const useColor = border1.width >= border2.width ? border1.color : border2.color;
+  const useStyle = border1.width >= border2.width ? border1.style : border2.style;
+  if (avgWidth > 0 && useStyle !== "none" && useStyle !== "hidden") {
+    ctx.beginPath();
+    ctx.strokeStyle = useColor;
+    ctx.lineWidth = avgWidth;
+    ctx.setLineDash(getLineDashPattern(useStyle, avgWidth));
+    const adjustedRadiusH = Math.max(0, radius.horizontal - avgWidth / 2);
+    const adjustedRadiusV = Math.max(0, radius.vertical - avgWidth / 2);
+    ctx.ellipse(centerX, centerY, adjustedRadiusH, adjustedRadiusV, 0, startAngle, endAngle);
+    ctx.stroke();
+  }
+};
+var drawUniformBorder = ({
+  ctx,
+  x,
+  y,
+  width,
+  height,
+  borderRadius,
+  borderWidth,
+  borderColor,
+  borderStyle
+}) => {
+  ctx.beginPath();
+  ctx.strokeStyle = borderColor;
+  ctx.lineWidth = borderWidth;
+  ctx.setLineDash(getLineDashPattern(borderStyle, borderWidth));
+  const halfWidth = borderWidth / 2;
+  const borderX = x + halfWidth;
+  const borderY = y + halfWidth;
+  const borderW = width - borderWidth;
+  const borderH = height - borderWidth;
+  const adjustedBorderRadius = {
+    topLeft: {
+      horizontal: Math.max(0, borderRadius.topLeft.horizontal - halfWidth),
+      vertical: Math.max(0, borderRadius.topLeft.vertical - halfWidth)
+    },
+    topRight: {
+      horizontal: Math.max(0, borderRadius.topRight.horizontal - halfWidth),
+      vertical: Math.max(0, borderRadius.topRight.vertical - halfWidth)
+    },
+    bottomRight: {
+      horizontal: Math.max(0, borderRadius.bottomRight.horizontal - halfWidth),
+      vertical: Math.max(0, borderRadius.bottomRight.vertical - halfWidth)
+    },
+    bottomLeft: {
+      horizontal: Math.max(0, borderRadius.bottomLeft.horizontal - halfWidth),
+      vertical: Math.max(0, borderRadius.bottomLeft.vertical - halfWidth)
+    }
+  };
+  ctx.moveTo(borderX + adjustedBorderRadius.topLeft.horizontal, borderY);
+  ctx.lineTo(borderX + borderW - adjustedBorderRadius.topRight.horizontal, borderY);
+  if (adjustedBorderRadius.topRight.horizontal > 0 || adjustedBorderRadius.topRight.vertical > 0) {
+    ctx.ellipse(borderX + borderW - adjustedBorderRadius.topRight.horizontal, borderY + adjustedBorderRadius.topRight.vertical, adjustedBorderRadius.topRight.horizontal, adjustedBorderRadius.topRight.vertical, 0, -Math.PI / 2, 0);
+  }
+  ctx.lineTo(borderX + borderW, borderY + borderH - adjustedBorderRadius.bottomRight.vertical);
+  if (adjustedBorderRadius.bottomRight.horizontal > 0 || adjustedBorderRadius.bottomRight.vertical > 0) {
+    ctx.ellipse(borderX + borderW - adjustedBorderRadius.bottomRight.horizontal, borderY + borderH - adjustedBorderRadius.bottomRight.vertical, adjustedBorderRadius.bottomRight.horizontal, adjustedBorderRadius.bottomRight.vertical, 0, 0, Math.PI / 2);
+  }
+  ctx.lineTo(borderX + adjustedBorderRadius.bottomLeft.horizontal, borderY + borderH);
+  if (adjustedBorderRadius.bottomLeft.horizontal > 0 || adjustedBorderRadius.bottomLeft.vertical > 0) {
+    ctx.ellipse(borderX + adjustedBorderRadius.bottomLeft.horizontal, borderY + borderH - adjustedBorderRadius.bottomLeft.vertical, adjustedBorderRadius.bottomLeft.horizontal, adjustedBorderRadius.bottomLeft.vertical, 0, Math.PI / 2, Math.PI);
+  }
+  ctx.lineTo(borderX, borderY + adjustedBorderRadius.topLeft.vertical);
+  if (adjustedBorderRadius.topLeft.horizontal > 0 || adjustedBorderRadius.topLeft.vertical > 0) {
+    ctx.ellipse(borderX + adjustedBorderRadius.topLeft.horizontal, borderY + adjustedBorderRadius.topLeft.vertical, adjustedBorderRadius.topLeft.horizontal, adjustedBorderRadius.topLeft.vertical, 0, Math.PI, Math.PI * 3 / 2);
+  }
+  ctx.closePath();
+  ctx.stroke();
+};
+var drawBorder = ({
+  ctx,
+  rect,
+  borderRadius,
   computedStyle
 }) => {
-  const {
-    borderStyle,
-    borderColor,
-    borderWidth: computedBorderWidth
-  } = computedStyle;
-  const borderWidths = computedBorderWidth.split(/\s+/).map((w) => parseFloat(w));
-  const borderTop = borderWidths[0] || 0;
-  const borderRight = borderWidths[1] || borderTop;
-  const borderBottom = borderWidths[2] || borderTop;
-  const borderLeft = borderWidths[3] || borderRight;
-  const hasBorder = borderStyle && borderStyle !== "none" && borderStyle !== "hidden" && (borderTop > 0 || borderRight > 0 || borderBottom > 0 || borderLeft > 0);
+  const borders = getBorderSideProperties(computedStyle);
+  const hasBorder = borders.top.width > 0 || borders.right.width > 0 || borders.bottom.width > 0 || borders.left.width > 0;
   if (!hasBorder) {
     return;
   }
   const originalStrokeStyle = ctx.strokeStyle;
   const originalLineWidth = ctx.lineWidth;
   const originalLineDash = ctx.getLineDash();
-  ctx.strokeStyle = borderColor;
-  if (borderStyle === "dashed") {
-    const max = Math.max(borderTop, borderRight, borderBottom, borderLeft);
-    ctx.setLineDash([max * 2, max]);
-  } else if (borderStyle === "dotted") {
-    ctx.setLineDash([
-      Math.max(borderTop, borderRight, borderBottom, borderLeft)
-    ]);
+  const allSidesEqual = borders.top.width === borders.right.width && borders.top.width === borders.bottom.width && borders.top.width === borders.left.width && borders.top.color === borders.right.color && borders.top.color === borders.bottom.color && borders.top.color === borders.left.color && borders.top.style === borders.right.style && borders.top.style === borders.bottom.style && borders.top.style === borders.left.style && borders.top.width > 0;
+  if (allSidesEqual) {
+    drawUniformBorder({
+      ctx,
+      x: rect.left,
+      y: rect.top,
+      width: rect.width,
+      height: rect.height,
+      borderRadius,
+      borderWidth: borders.top.width,
+      borderColor: borders.top.color,
+      borderStyle: borders.top.style
+    });
   } else {
-    ctx.setLineDash([]);
+    drawCorner({
+      ctx,
+      corner: "topLeft",
+      x: rect.left,
+      y: rect.top,
+      width: rect.width,
+      height: rect.height,
+      borderRadius,
+      topBorder: borders.top,
+      rightBorder: borders.right,
+      bottomBorder: borders.bottom,
+      leftBorder: borders.left
+    });
+    drawCorner({
+      ctx,
+      corner: "topRight",
+      x: rect.left,
+      y: rect.top,
+      width: rect.width,
+      height: rect.height,
+      borderRadius,
+      topBorder: borders.top,
+      rightBorder: borders.right,
+      bottomBorder: borders.bottom,
+      leftBorder: borders.left
+    });
+    drawCorner({
+      ctx,
+      corner: "bottomRight",
+      x: rect.left,
+      y: rect.top,
+      width: rect.width,
+      height: rect.height,
+      borderRadius,
+      topBorder: borders.top,
+      rightBorder: borders.right,
+      bottomBorder: borders.bottom,
+      leftBorder: borders.left
+    });
+    drawCorner({
+      ctx,
+      corner: "bottomLeft",
+      x: rect.left,
+      y: rect.top,
+      width: rect.width,
+      height: rect.height,
+      borderRadius,
+      topBorder: borders.top,
+      rightBorder: borders.right,
+      bottomBorder: borders.bottom,
+      leftBorder: borders.left
+    });
+    drawBorderSide({
+      ctx,
+      side: "top",
+      x: rect.left,
+      y: rect.top,
+      width: rect.width,
+      height: rect.height,
+      borderRadius,
+      borderProperties: borders.top
+    });
+    drawBorderSide({
+      ctx,
+      side: "right",
+      x: rect.left,
+      y: rect.top,
+      width: rect.width,
+      height: rect.height,
+      borderRadius,
+      borderProperties: borders.right
+    });
+    drawBorderSide({
+      ctx,
+      side: "bottom",
+      x: rect.left,
+      y: rect.top,
+      width: rect.width,
+      height: rect.height,
+      borderRadius,
+      borderProperties: borders.bottom
+    });
+    drawBorderSide({
+      ctx,
+      side: "left",
+      x: rect.left,
+      y: rect.top,
+      width: rect.width,
+      height: rect.height,
+      borderRadius,
+      borderProperties: borders.left
+    });
+  }
+  ctx.strokeStyle = originalStrokeStyle;
+  ctx.lineWidth = originalLineWidth;
+  ctx.setLineDash(originalLineDash);
+};
+
+// src/drawing/draw-outline.ts
+var parseOutlineWidth = (value) => {
+  return parseFloat(value) || 0;
+};
+var parseOutlineOffset = (value) => {
+  return parseFloat(value) || 0;
+};
+var getLineDashPattern2 = (style, width) => {
+  if (style === "dashed") {
+    return [width * 2, width];
+  }
+  if (style === "dotted") {
+    return [width, width];
+  }
+  return [];
+};
+var drawOutline = ({
+  ctx,
+  rect,
+  borderRadius,
+  computedStyle
+}) => {
+  const outlineWidth = parseOutlineWidth(computedStyle.outlineWidth);
+  const { outlineStyle } = computedStyle;
+  const outlineColor = computedStyle.outlineColor || "black";
+  const outlineOffset = parseOutlineOffset(computedStyle.outlineOffset);
+  if (outlineWidth <= 0 || outlineStyle === "none" || outlineStyle === "hidden") {
+    return;
   }
-  const maxBorderWidth = Math.max(borderTop, borderRight, borderBottom, borderLeft);
+  const originalStrokeStyle = ctx.strokeStyle;
+  const originalLineWidth = ctx.lineWidth;
+  const originalLineDash = ctx.getLineDash();
   ctx.beginPath();
-  const borderX = x + maxBorderWidth / 2;
-  const borderY = y + maxBorderWidth / 2;
-  const borderWidth = width - maxBorderWidth;
-  const borderHeight = height - maxBorderWidth;
+  ctx.strokeStyle = outlineColor;
+  ctx.lineWidth = outlineWidth;
+  ctx.setLineDash(getLineDashPattern2(outlineStyle, outlineWidth));
+  const halfWidth = outlineWidth / 2;
+  const offset = outlineOffset + halfWidth;
+  const outlineX = rect.left - offset;
+  const outlineY = rect.top - offset;
+  const outlineW = rect.width + offset * 2;
+  const outlineH = rect.height + offset * 2;
   const adjustedBorderRadius = {
     topLeft: {
-      horizontal: Math.max(0, borderRadius.topLeft.horizontal - maxBorderWidth / 2),
-      vertical: Math.max(0, borderRadius.topLeft.vertical - maxBorderWidth / 2)
+      horizontal: borderRadius.topLeft.horizontal === 0 ? 0 : Math.max(0, borderRadius.topLeft.horizontal + offset),
+      vertical: borderRadius.topLeft.vertical === 0 ? 0 : Math.max(0, borderRadius.topLeft.vertical + offset)
     },
     topRight: {
-      horizontal: Math.max(0, borderRadius.topRight.horizontal - maxBorderWidth / 2),
-      vertical: Math.max(0, borderRadius.topRight.vertical - maxBorderWidth / 2)
+      horizontal: borderRadius.topRight.horizontal === 0 ? 0 : Math.max(0, borderRadius.topRight.horizontal + offset),
+      vertical: borderRadius.topRight.vertical === 0 ? 0 : Math.max(0, borderRadius.topRight.vertical + offset)
     },
     bottomRight: {
-      horizontal: Math.max(0, borderRadius.bottomRight.horizontal - maxBorderWidth / 2),
-      vertical: Math.max(0, borderRadius.bottomRight.vertical - maxBorderWidth / 2)
+      horizontal: borderRadius.bottomRight.horizontal === 0 ? 0 : Math.max(0, borderRadius.bottomRight.horizontal + offset),
+      vertical: borderRadius.bottomRight.vertical === 0 ? 0 : Math.max(0, borderRadius.bottomRight.vertical + offset)
     },
     bottomLeft: {
-      horizontal: Math.max(0, borderRadius.bottomLeft.horizontal - maxBorderWidth / 2),
-      vertical: Math.max(0, borderRadius.bottomLeft.vertical - maxBorderWidth / 2)
+      horizontal: borderRadius.bottomLeft.horizontal === 0 ? 0 : Math.max(0, borderRadius.bottomLeft.horizontal + offset),
+      vertical: borderRadius.bottomLeft.vertical === 0 ? 0 : Math.max(0, borderRadius.bottomLeft.vertical + offset)
     }
   };
-  ctx.moveTo(borderX + adjustedBorderRadius.topLeft.horizontal, borderY);
-  ctx.lineTo(borderX + borderWidth - adjustedBorderRadius.topRight.horizontal, borderY);
+  ctx.moveTo(outlineX + adjustedBorderRadius.topLeft.horizontal, outlineY);
+  ctx.lineTo(outlineX + outlineW - adjustedBorderRadius.topRight.horizontal, outlineY);
   if (adjustedBorderRadius.topRight.horizontal > 0 || adjustedBorderRadius.topRight.vertical > 0) {
-    ctx.ellipse(borderX + borderWidth - adjustedBorderRadius.topRight.horizontal, borderY + adjustedBorderRadius.topRight.vertical, adjustedBorderRadius.topRight.horizontal, adjustedBorderRadius.topRight.vertical, 0, -Math.PI / 2, 0);
+    ctx.ellipse(outlineX + outlineW - adjustedBorderRadius.topRight.horizontal, outlineY + adjustedBorderRadius.topRight.vertical, adjustedBorderRadius.topRight.horizontal, adjustedBorderRadius.topRight.vertical, 0, -Math.PI / 2, 0);
   }
-  ctx.lineTo(borderX + borderWidth, borderY + borderHeight - adjustedBorderRadius.bottomRight.vertical);
+  ctx.lineTo(outlineX + outlineW, outlineY + outlineH - adjustedBorderRadius.bottomRight.vertical);
   if (adjustedBorderRadius.bottomRight.horizontal > 0 || adjustedBorderRadius.bottomRight.vertical > 0) {
-    ctx.ellipse(borderX + borderWidth - adjustedBorderRadius.bottomRight.horizontal, borderY + borderHeight - adjustedBorderRadius.bottomRight.vertical, adjustedBorderRadius.bottomRight.horizontal, adjustedBorderRadius.bottomRight.vertical, 0, 0, Math.PI / 2);
+    ctx.ellipse(outlineX + outlineW - adjustedBorderRadius.bottomRight.horizontal, outlineY + outlineH - adjustedBorderRadius.bottomRight.vertical, adjustedBorderRadius.bottomRight.horizontal, adjustedBorderRadius.bottomRight.vertical, 0, 0, Math.PI / 2);
   }
-  ctx.lineTo(borderX + adjustedBorderRadius.bottomLeft.horizontal, borderY + borderHeight);
+  ctx.lineTo(outlineX + adjustedBorderRadius.bottomLeft.horizontal, outlineY + outlineH);
   if (adjustedBorderRadius.bottomLeft.horizontal > 0 || adjustedBorderRadius.bottomLeft.vertical > 0) {
-    ctx.ellipse(borderX + adjustedBorderRadius.bottomLeft.horizontal, borderY + borderHeight - adjustedBorderRadius.bottomLeft.vertical, adjustedBorderRadius.bottomLeft.horizontal, adjustedBorderRadius.bottomLeft.vertical, 0, Math.PI / 2, Math.PI);
+    ctx.ellipse(outlineX + adjustedBorderRadius.bottomLeft.horizontal, outlineY + outlineH - adjustedBorderRadius.bottomLeft.vertical, adjustedBorderRadius.bottomLeft.horizontal, adjustedBorderRadius.bottomLeft.vertical, 0, Math.PI / 2, Math.PI);
   }
-  ctx.lineTo(borderX, borderY + adjustedBorderRadius.topLeft.vertical);
+  ctx.lineTo(outlineX, outlineY + adjustedBorderRadius.topLeft.vertical);
   if (adjustedBorderRadius.topLeft.horizontal > 0 || adjustedBorderRadius.topLeft.vertical > 0) {
-    ctx.ellipse(borderX + adjustedBorderRadius.topLeft.horizontal, borderY + adjustedBorderRadius.topLeft.vertical, adjustedBorderRadius.topLeft.horizontal, adjustedBorderRadius.topLeft.vertical, 0, Math.PI, Math.PI * 3 / 2);
+    ctx.ellipse(outlineX + adjustedBorderRadius.topLeft.horizontal, outlineY + adjustedBorderRadius.topLeft.vertical, adjustedBorderRadius.topLeft.horizontal, adjustedBorderRadius.topLeft.vertical, 0, Math.PI, Math.PI * 3 / 2);
   }
   ctx.closePath();
-  ctx.lineWidth = maxBorderWidth;
   ctx.stroke();
   ctx.strokeStyle = originalStrokeStyle;
   ctx.lineWidth = originalLineWidth;
@@ -845,6 +1289,24 @@ var setOpacity = ({
   };
 };
 
+// src/drawing/overflow.ts
+var setOverflowHidden = ({
+  ctx,
+  rect,
+  borderRadius,
+  overflowHidden
+}) => {
+  if (!overflowHidden) {
+    return () => {};
+  }
+  return setBorderRadius({
+    ctx,
+    rect,
+    borderRadius,
+    forceClipEvenWhenZero: true
+  });
+};
+
 // src/drawing/transform.ts
 var setTransform = ({
   ctx,
@@ -858,7 +1320,7 @@ var setTransform = ({
 
 // src/drawing/draw-element.ts
 var drawElement = async ({
-  dimensions,
+  rect,
   computedStyle,
   context,
   draw,
@@ -868,8 +1330,8 @@ var drawElement = async ({
   const background = computedStyle.backgroundColor;
   const borderRadius = parseBorderRadius({
     borderRadius: computedStyle.borderRadius,
-    width: dimensions.width,
-    height: dimensions.height
+    width: rect.width,
+    height: rect.height
   });
   const finishTransform = setTransform({
     ctx: context,
@@ -877,11 +1339,9 @@ var drawElement = async ({
   });
   const finishBorderRadius = setBorderRadius({
     ctx: context,
-    x: dimensions.left,
-    y: dimensions.top,
-    width: dimensions.width,
-    height: dimensions.height,
-    borderRadius
+    rect,
+    borderRadius,
+    forceClipEvenWhenZero: false
   });
   const finishOpacity = setOpacity({
     ctx: context,
@@ -890,24 +1350,142 @@ var drawElement = async ({
   if (background && background !== "transparent" && !(background.startsWith("rgba") && (background.endsWith(", 0)") || background.endsWith(",0")))) {
     const originalFillStyle = context.fillStyle;
     context.fillStyle = background;
-    context.fillRect(dimensions.left, dimensions.top, dimensions.width, dimensions.height);
+    context.fillRect(rect.left, rect.top, rect.width, rect.height);
     context.fillStyle = originalFillStyle;
   }
-  await draw({ dimensions, computedStyle, contextToDraw: context });
+  await draw({ dimensions: rect, computedStyle, contextToDraw: context });
   drawBorder({
     ctx: context,
-    x: dimensions.left,
-    y: dimensions.top,
-    width: dimensions.width,
-    height: dimensions.height,
+    rect,
     borderRadius,
     computedStyle
   });
-  finishOpacity();
   finishBorderRadius();
+  drawOutline({
+    ctx: context,
+    rect,
+    borderRadius,
+    computedStyle
+  });
+  const finishOverflowHidden = setOverflowHidden({
+    ctx: context,
+    rect,
+    borderRadius,
+    overflowHidden: computedStyle.overflow === "hidden"
+  });
   finishTransform();
+  return {
+    cleanupAfterChildren: () => {
+      finishOpacity();
+      finishOverflowHidden();
+    }
+  };
 };
 
+// src/drawing/handle-3d-transform.ts
+import { Internals as Internals4 } from "remotion";
+
+// src/walk-tree.ts
+function skipToNextNonDescendant(treeWalker) {
+  if (treeWalker.nextSibling()) {
+    return true;
+  }
+  while (treeWalker.parentNode()) {
+    if (treeWalker.nextSibling()) {
+      return true;
+    }
+  }
+  return false;
+}
+
+// src/get-biggest-bounding-client-rect.ts
+var getBiggestBoundingClientRect = (element) => {
+  const treeWalker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT);
+  let mostLeft = Infinity;
+  let mostTop = Infinity;
+  let mostRight = -Infinity;
+  let mostBottom = -Infinity;
+  while (true) {
+    const computedStyle = getComputedStyle(treeWalker.currentNode);
+    const outlineWidth = parseOutlineWidth(computedStyle.outlineWidth);
+    const outlineOffset = parseOutlineOffset(computedStyle.outlineOffset);
+    const rect = treeWalker.currentNode.getBoundingClientRect();
+    mostLeft = Math.min(mostLeft, rect.left - outlineOffset - outlineWidth);
+    mostTop = Math.min(mostTop, rect.top - outlineOffset - outlineWidth);
+    mostRight = Math.max(mostRight, rect.right + outlineOffset + outlineWidth);
+    mostBottom = Math.max(mostBottom, rect.bottom + outlineOffset + outlineWidth);
+    if (computedStyle.overflow === "hidden") {
+      if (!skipToNextNonDescendant(treeWalker)) {
+        break;
+      }
+    }
+    if (!treeWalker.nextNode()) {
+      break;
+    }
+  }
+  return new DOMRect(mostLeft, mostTop, mostRight - mostLeft, mostBottom - mostTop);
+};
+
+// src/drawing/clamp-rect-to-parent-bounds.ts
+var getNarrowerRect = ({
+  firstRect,
+  secondRect
+}) => {
+  const left = Math.max(firstRect.left, secondRect.left);
+  const top = Math.max(firstRect.top, secondRect.top);
+  const bottom = Math.min(firstRect.bottom, secondRect.bottom);
+  const right = Math.min(firstRect.right, secondRect.right);
+  return new DOMRect(left, top, right - left, bottom - top);
+};
+
+// src/drawing/get-pretransform-rect.ts
+function getPreTransformRect(targetRect, matrix) {
+  const origin = new DOMPoint(0, 0).matrixTransform(matrix);
+  const unitX = new DOMPoint(1, 0).matrixTransform(matrix);
+  const unitY = new DOMPoint(0, 1).matrixTransform(matrix);
+  const basisX = { x: unitX.x - origin.x, y: unitX.y - origin.y };
+  const basisY = { x: unitY.x - origin.x, y: unitY.y - origin.y };
+  const effective2D = new DOMMatrix([
+    basisX.x,
+    basisX.y,
+    basisY.x,
+    basisY.y,
+    origin.x,
+    origin.y
+  ]);
+  const inverse2D = effective2D.inverse();
+  const corners = [
+    new DOMPoint(targetRect.x, targetRect.y),
+    new DOMPoint(targetRect.x + targetRect.width, targetRect.y),
+    new DOMPoint(targetRect.x + targetRect.width, targetRect.y + targetRect.height),
+    new DOMPoint(targetRect.x, targetRect.y + targetRect.height)
+  ];
+  const transformedCorners = corners.map((c) => c.matrixTransform(inverse2D));
+  const xs = transformedCorners.map((p) => p.x);
+  const ys = transformedCorners.map((p) => p.y);
+  return new DOMRect(Math.min(...xs), Math.min(...ys), Math.max(...xs) - Math.min(...xs), Math.max(...ys) - Math.min(...ys));
+}
+
+// src/drawing/transform-rect-with-matrix.ts
+function transformDOMRect({
+  rect,
+  matrix
+}) {
+  const topLeft = new DOMPointReadOnly(rect.left, rect.top);
+  const topRight = new DOMPointReadOnly(rect.right, rect.top);
+  const bottomLeft = new DOMPointReadOnly(rect.left, rect.bottom);
+  const bottomRight = new DOMPointReadOnly(rect.right, rect.bottom);
+  const transformedTopLeft = topLeft.matrixTransform(matrix);
+  const transformedTopRight = topRight.matrixTransform(matrix);
+  const transformedBottomLeft = bottomLeft.matrixTransform(matrix);
+  const transformedBottomRight = bottomRight.matrixTransform(matrix);
+  const minX = Math.min(transformedTopLeft.x / transformedTopLeft.w, transformedTopRight.x / transformedTopRight.w, transformedBottomLeft.x / transformedBottomLeft.w, transformedBottomRight.x / transformedBottomRight.w);
+  const maxX = Math.max(transformedTopLeft.x / transformedTopLeft.w, transformedTopRight.x / transformedTopRight.w, transformedBottomLeft.x / transformedBottomLeft.w, transformedBottomRight.x / transformedBottomRight.w);
+  const minY = Math.min(transformedTopLeft.y / transformedTopLeft.w, transformedTopRight.y / transformedTopRight.w, transformedBottomLeft.y / transformedBottomLeft.w, transformedBottomRight.y / transformedBottomRight.w);
+  const maxY = Math.max(transformedTopLeft.y / transformedTopLeft.w, transformedTopRight.y / transformedTopRight.w, transformedBottomLeft.y / transformedBottomLeft.w, transformedBottomRight.y / transformedBottomRight.w);
+  return new DOMRect(minX, minY, maxX - minX, maxY - minY);
+}
+
 // src/drawing/transform-in-3d.ts
 function compileShader(shaderGl, source, type) {
   const shader = shaderGl.createShader(type);
@@ -933,6 +1511,12 @@ var createHelperCanvas = ({
     helperCanvas.gl.clear(helperCanvas.gl.COLOR_BUFFER_BIT);
     return helperCanvas;
   }
+  if (helperCanvas) {
+    helperCanvas.gl.deleteProgram(helperCanvas.program);
+    helperCanvas.gl.deleteShader(helperCanvas.vertexShader);
+    helperCanvas.gl.deleteShader(helperCanvas.fragmentShader);
+    helperCanvas = null;
+  }
   const canvas = new OffscreenCanvas(canvasWidth, canvasHeight);
   const gl = canvas.getContext("webgl");
   if (!gl) {
@@ -973,43 +1557,47 @@ var createHelperCanvas = ({
   gl.clear(gl.COLOR_BUFFER_BIT);
   gl.enable(gl.BLEND);
   gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-  helperCanvas = { canvas, gl, program };
+  helperCanvas = { canvas, gl, program, vertexShader, fragmentShader };
   return helperCanvas;
 };
 var transformIn3d = ({
-  canvasWidth,
-  canvasHeight,
   matrix,
   sourceCanvas,
-  offsetLeft,
-  offsetTop
+  untransformedRect
 }) => {
-  const { canvas, gl, program } = createHelperCanvas({ canvasWidth, canvasHeight });
+  const rectAfterTransforms = transformDOMRect({
+    rect: untransformedRect,
+    matrix
+  });
+  const { canvas, gl, program } = createHelperCanvas({
+    canvasWidth: Math.ceil(rectAfterTransforms.width),
+    canvasHeight: Math.ceil(rectAfterTransforms.height)
+  });
   const vertexBuffer = gl.createBuffer();
   gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
   const vertices = new Float32Array([
-    offsetLeft,
-    offsetTop,
+    untransformedRect.x,
+    untransformedRect.y,
     0,
     0,
-    canvasWidth + offsetLeft,
-    offsetTop,
+    untransformedRect.x + untransformedRect.width,
+    untransformedRect.y,
     1,
     0,
-    offsetLeft,
-    canvasHeight + offsetTop,
+    untransformedRect.x,
+    untransformedRect.y + untransformedRect.height,
     0,
     1,
-    offsetLeft,
-    canvasHeight + offsetTop,
+    untransformedRect.x,
+    untransformedRect.y + untransformedRect.height,
     0,
     1,
-    canvasWidth + offsetLeft,
-    offsetTop,
+    untransformedRect.x + untransformedRect.width,
+    untransformedRect.y,
     1,
     0,
-    canvasWidth + offsetLeft,
-    canvasHeight + offsetTop,
+    untransformedRect.x + untransformedRect.width,
+    untransformedRect.y + untransformedRect.height,
     1,
     1
   ]);
@@ -1042,8 +1630,8 @@ var transformIn3d = ({
     0,
     -2 / zScale,
     0,
-    -1,
-    1,
+    -1 + 2 * -rectAfterTransforms.x / canvas.width,
+    1 - 2 * -rectAfterTransforms.y / canvas.height,
     0,
     1
   ]);
@@ -1056,56 +1644,88 @@ var transformIn3d = ({
   gl.drawArrays(gl.TRIANGLES, 0, 6);
   gl.deleteTexture(texture);
   gl.deleteBuffer(vertexBuffer);
-  return canvas;
+  return { canvas, rect: rectAfterTransforms };
+};
+
+// src/drawing/handle-3d-transform.ts
+var handle3dTransform = async ({
+  element,
+  matrix,
+  parentRect,
+  context,
+  logLevel,
+  internalState
+}) => {
+  const unclampedBiggestBoundingClientRect = getBiggestBoundingClientRect(element);
+  const biggestPossiblePretransformRect = getPreTransformRect(parentRect, matrix);
+  const preTransformRect = getNarrowerRect({
+    firstRect: unclampedBiggestBoundingClientRect,
+    secondRect: biggestPossiblePretransformRect
+  });
+  const start = Date.now();
+  const tempCanvas = new OffscreenCanvas(Math.ceil(preTransformRect.width), Math.ceil(preTransformRect.height));
+  await compose({
+    element,
+    context: tempCanvas.getContext("2d"),
+    logLevel,
+    parentRect: preTransformRect,
+    internalState
+  });
+  const afterCompose = Date.now();
+  const { canvas: transformed, rect: transformedRect } = transformIn3d({
+    untransformedRect: preTransformRect,
+    matrix,
+    sourceCanvas: tempCanvas
+  });
+  context.drawImage(transformed, transformedRect.x, transformedRect.y);
+  const afterDraw = Date.now();
+  Internals4.Log.trace({
+    logLevel,
+    tag: "@remotion/web-renderer"
+  }, `Transforming element in 3D - canvas size: ${transformedRect.width}x${transformedRect.height} - compose: ${afterCompose - start}ms - draw: ${afterDraw - afterCompose}ms`);
+  internalState.add3DTransform({
+    canvasWidth: Math.ceil(transformedRect.width),
+    canvasHeight: Math.ceil(transformedRect.height)
+  });
 };
 
-// src/drawing/draw-element-to-canvas.ts
-var drawElementToCanvas = async ({
+// src/drawing/process-node.ts
+var processNode = async ({
   element,
   context,
   draw,
-  offsetLeft,
-  offsetTop
+  logLevel,
+  parentRect,
+  internalState
 }) => {
-  const { totalMatrix, reset, dimensions, opacity, computedStyle } = calculateTransforms(element);
+  const transforms = calculateTransforms({
+    element,
+    offsetLeft: parentRect.x,
+    offsetTop: parentRect.y
+  });
+  const { totalMatrix, reset, dimensions, opacity, computedStyle } = transforms;
   if (opacity === 0) {
     reset();
-    return "continue";
+    return { type: "continue", cleanupAfterChildren: () => {} };
   }
   if (dimensions.width <= 0 || dimensions.height <= 0) {
     reset();
-    return "continue";
+    return { type: "continue", cleanupAfterChildren: () => {} };
   }
   if (!totalMatrix.is2D) {
-    const canvasOffsetLeft = Math.min(dimensions.left, 0);
-    const canvasOffsetTop = Math.min(dimensions.top, 0);
-    const tempCanvasWidth = Math.max(dimensions.width, dimensions.right);
-    const tempCanvasHeight = Math.max(dimensions.height, dimensions.bottom);
-    const tempCanvas = new OffscreenCanvas(tempCanvasWidth, tempCanvasHeight);
-    const context2 = tempCanvas.getContext("2d");
-    if (!context2) {
-      throw new Error("Could not get context");
-    }
-    await compose({
+    await handle3dTransform({
       element,
-      context: context2,
-      offsetLeft: canvasOffsetLeft,
-      offsetTop: canvasOffsetTop
-    });
-    const transformed = transformIn3d({
-      canvasWidth: tempCanvasWidth,
-      canvasHeight: tempCanvasHeight,
       matrix: totalMatrix,
-      sourceCanvas: tempCanvas,
-      offsetLeft: canvasOffsetLeft,
-      offsetTop: canvasOffsetTop
+      parentRect,
+      context,
+      logLevel,
+      internalState
     });
-    context.drawImage(transformed, 0, 0);
     reset();
-    return "skip-children";
+    return { type: "skip-children" };
   }
-  await drawElement({
-    dimensions: new DOMRect(dimensions.left - offsetLeft, dimensions.top - offsetTop, dimensions.width, dimensions.height),
+  const { cleanupAfterChildren } = await drawElement({
+    rect: new DOMRect(dimensions.left - parentRect.x, dimensions.top - parentRect.y, dimensions.width, dimensions.height),
     computedStyle,
     context,
     draw,
@@ -1113,11 +1733,11 @@ var drawElementToCanvas = async ({
     totalMatrix
   });
   reset();
-  return "continue";
+  return { type: "continue", cleanupAfterChildren };
 };
 
 // src/drawing/text/draw-text.ts
-import { Internals as Internals3 } from "remotion";
+import { Internals as Internals5 } from "remotion";
 
 // src/drawing/text/apply-text-transform.ts
 var applyTextTransform = (text, transform) => {
@@ -1239,7 +1859,6 @@ var drawText = (span) => {
       fontSize,
       fontWeight,
       color,
-      lineHeight,
       direction,
       writingMode,
       letterSpacing,
@@ -1247,22 +1866,20 @@ var drawText = (span) => {
     } = computedStyle;
     const isVertical = writingMode !== "horizontal-tb";
     if (isVertical) {
-      Internals3.Log.warn({
+      Internals5.Log.warn({
         logLevel: "warn",
         tag: "@remotion/web-renderer"
       }, 'Detected "writing-mode" CSS property. Vertical text is not yet supported in @remotion/web-renderer');
       return;
     }
     contextToDraw.save();
-    contextToDraw.font = `${fontWeight} ${fontSize} ${fontFamily}`;
+    const fontSizePx = parseFloat(fontSize);
+    contextToDraw.font = `${fontWeight} ${fontSizePx}px ${fontFamily}`;
     contextToDraw.fillStyle = color;
     contextToDraw.letterSpacing = letterSpacing;
-    const fontSizePx = parseFloat(fontSize);
-    const lineHeightPx = lineHeight === "normal" ? 1.2 * fontSizePx : parseFloat(lineHeight);
-    const baselineOffset = (lineHeightPx - fontSizePx) / 2;
     const isRTL = direction === "rtl";
     contextToDraw.textAlign = isRTL ? "right" : "left";
-    contextToDraw.textBaseline = "top";
+    contextToDraw.textBaseline = "alphabetic";
     const originalText = span.textContent;
     const collapsedText = getCollapsedText(span);
     const transformedText = applyTextTransform(collapsedText, textTransform);
@@ -1270,8 +1887,9 @@ var drawText = (span) => {
     const xPosition = isRTL ? rect.right : rect.left;
     const lines = findLineBreaks(span, isRTL);
     let offsetTop = 0;
+    const { fontBoundingBoxAscent } = contextToDraw.measureText(lines[0].text);
     for (const line of lines) {
-      contextToDraw.fillText(line.text, xPosition + line.offsetHorizontal, rect.top + baselineOffset + offsetTop);
+      contextToDraw.fillText(line.text, xPosition + line.offsetHorizontal, rect.top + offsetTop + fontBoundingBoxAscent);
       offsetTop += line.offsetTop;
     }
     span.textContent = originalText;
@@ -1284,8 +1902,9 @@ var drawText = (span) => {
 var handleTextNode = async ({
   node,
   context,
-  offsetLeft,
-  offsetTop
+  logLevel,
+  parentRect,
+  internalState
 }) => {
   const span = document.createElement("span");
   const parent = node.parentNode;
@@ -1294,58 +1913,56 @@ var handleTextNode = async ({
   }
   parent.insertBefore(span, node);
   span.appendChild(node);
-  const value = await drawElementToCanvas({
+  const value = await processNode({
     context,
     element: span,
     draw: drawText(span),
-    offsetLeft,
-    offsetTop
+    logLevel,
+    parentRect,
+    internalState
   });
   parent.insertBefore(node, span);
   parent.removeChild(span);
   return value;
 };
 
-// src/walk-tree.ts
-function skipToNextNonDescendant(treeWalker) {
-  if (treeWalker.nextSibling()) {
-    return true;
-  }
-  while (treeWalker.parentNode()) {
-    if (treeWalker.nextSibling()) {
-      return true;
-    }
-  }
-  return false;
-}
-
 // src/compose.ts
 var walkOverNode = ({
   node,
   context,
-  offsetLeft,
-  offsetTop
+  logLevel,
+  parentRect,
+  internalState
 }) => {
   if (node instanceof HTMLElement || node instanceof SVGElement) {
-    return drawElementToCanvas({
+    return processNode({
       element: node,
       context,
       draw: drawDomElement(node),
-      offsetLeft,
-      offsetTop
+      logLevel,
+      parentRect,
+      internalState
     });
   }
   if (node instanceof Text) {
-    return handleTextNode({ node, context, offsetLeft, offsetTop });
+    return handleTextNode({
+      node,
+      context,
+      logLevel,
+      parentRect,
+      internalState
+    });
   }
   throw new Error("Unknown node type");
 };
 var compose = async ({
   element,
   context,
-  offsetLeft,
-  offsetTop
+  logLevel,
+  parentRect,
+  internalState
 }) => {
+  const cleanupAfterChildren = [];
   const treeWalker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, (node) => {
     if (node instanceof Element) {
       if (node.parentElement instanceof SVGSVGElement) {
@@ -1357,43 +1974,78 @@ var compose = async ({
     return NodeFilter.FILTER_ACCEPT;
   });
   while (true) {
+    for (let i = 0;i < cleanupAfterChildren.length; ) {
+      const cleanup = cleanupAfterChildren[i];
+      if (!(cleanup.element === treeWalker.currentNode || cleanup.element.contains(treeWalker.currentNode))) {
+        cleanup.cleanupFn();
+        cleanupAfterChildren.splice(i, 1);
+      } else {
+        i++;
+      }
+    }
     const val = await walkOverNode({
       node: treeWalker.currentNode,
       context,
-      offsetLeft,
-      offsetTop
+      logLevel,
+      parentRect,
+      internalState
     });
-    if (val === "skip-children") {
+    if (val.type === "skip-children") {
       if (!skipToNextNonDescendant(treeWalker)) {
         break;
       }
-    } else if (!treeWalker.nextNode()) {
-      break;
+    } else {
+      cleanupAfterChildren.push({
+        element: treeWalker.currentNode,
+        cleanupFn: val.cleanupAfterChildren
+      });
+      if (!treeWalker.nextNode()) {
+        break;
+      }
     }
   }
+  for (const cleanup of cleanupAfterChildren) {
+    cleanup.cleanupFn();
+  }
 };
 
 // src/take-screenshot.ts
 var createFrame = async ({
   div,
   width,
-  height
+  height,
+  logLevel,
+  internalState
 }) => {
   const canvas = new OffscreenCanvas(width, height);
   const context = canvas.getContext("2d");
   if (!context) {
     throw new Error("Could not get context");
   }
-  await compose({ element: div, context, offsetLeft: 0, offsetTop: 0 });
+  await compose({
+    element: div,
+    context,
+    logLevel,
+    parentRect: new DOMRect(0, 0, width, height),
+    internalState
+  });
   return canvas;
 };
 var takeScreenshot = async ({
   div,
   width,
   height,
-  imageFormat
+  imageFormat,
+  logLevel,
+  internalState
 }) => {
-  const frame = await createFrame({ div, width, height });
+  const frame = await createFrame({
+    div,
+    width,
+    height,
+    logLevel,
+    internalState
+  });
   const imageData = await frame.convertToBlob({
     type: `image/${imageFormat}`
   });
@@ -1562,7 +2214,8 @@ var internalRenderMediaOnWeb = async ({
   transparent,
   onArtifact,
   onFrame,
-  outputTarget: userDesiredOutputTarget
+  outputTarget: userDesiredOutputTarget,
+  licenseKey
 }) => {
   const outputTarget = userDesiredOutputTarget === null ? await canUseWebFsWriter() ? "web-fs" : "arraybuffer" : userDesiredOutputTarget;
   if (outputTarget === "web-fs") {
@@ -1573,7 +2226,7 @@ var internalRenderMediaOnWeb = async ({
   if (codec && !format.getSupportedCodecs().includes(codecToMediabunnyCodec(codec))) {
     return Promise.reject(new Error(`Codec ${codec} is not supported for container ${container}`));
   }
-  const resolved = await Internals4.resolveVideoConfig({
+  const resolved = await Internals6.resolveVideoConfig({
     calculateMetadata: composition.calculateMetadata ?? null,
     signal: signal ?? new AbortController().signal,
     defaultProps: composition.defaultProps ?? {},
@@ -1606,6 +2259,7 @@ var internalRenderMediaOnWeb = async ({
     defaultCodec: resolved.defaultCodec,
     defaultOutName: resolved.defaultOutName
   });
+  const internalState = makeInternalState();
   const artifactsHandler = handleArtifacts();
   cleanupFns.push(() => {
     cleanupScaffold();
@@ -1683,7 +2337,9 @@ var internalRenderMediaOnWeb = async ({
       const imageData = await createFrame({
         div,
         width: resolved.width,
-        height: resolved.height
+        height: resolved.height,
+        logLevel,
+        internalState
       });
       if (signal?.aborted) {
         throw new Error("renderMediaOnWeb() was cancelled");
@@ -1741,20 +2397,36 @@ var internalRenderMediaOnWeb = async ({
       return {
         getBlob: () => {
           return webFsTarget.getBlob();
-        }
+        },
+        internalState
       };
     }
     if (!(target instanceof BufferTarget)) {
       throw new Error("Expected target to be a BufferTarget");
     }
+    sendUsageEvent({
+      licenseKey: licenseKey ?? null,
+      succeeded: true,
+      apiName: "renderMediaOnWeb"
+    });
     return {
       getBlob: () => {
         if (!target.buffer) {
           throw new Error("The resulting buffer is empty");
         }
         return Promise.resolve(new Blob([target.buffer], { type: mimeType }));
-      }
+      },
+      internalState
     };
+  } catch (err) {
+    sendUsageEvent({
+      succeeded: false,
+      licenseKey: licenseKey ?? null,
+      apiName: "renderMediaOnWeb"
+    }).catch((err2) => {
+      Internals6.Log.error({ logLevel: "error", tag: "web-renderer" }, "Failed to send usage event", err2);
+    });
+    throw err;
   } finally {
     cleanupFns.forEach((fn) => fn());
   }
@@ -1765,7 +2437,7 @@ var renderMediaOnWeb = (options) => {
   onlyOneRenderAtATimeQueue.ref = onlyOneRenderAtATimeQueue.ref.catch(() => Promise.resolve()).then(() => internalRenderMediaOnWeb({
     ...options,
     delayRenderTimeoutInMilliseconds: options.delayRenderTimeoutInMilliseconds ?? 30000,
-    logLevel: options.logLevel ?? "info",
+    logLevel: options.logLevel ?? window.remotion_logLevel ?? "info",
     schema: options.schema ?? undefined,
     mediaCacheSizeInBytes: options.mediaCacheSizeInBytes ?? null,
     codec,
@@ -1779,13 +2451,14 @@ var renderMediaOnWeb = (options) => {
     transparent: options.transparent ?? false,
     onArtifact: options.onArtifact ?? null,
     onFrame: options.onFrame ?? null,
-    outputTarget: options.outputTarget ?? null
+    outputTarget: options.outputTarget ?? null,
+    licenseKey: options.licenseKey ?? undefined
   }));
   return onlyOneRenderAtATimeQueue.ref;
 };
 // src/render-still-on-web.tsx
 import {
-  Internals as Internals5
+  Internals as Internals7
 } from "remotion";
 async function internalRenderStillOnWeb({
   frame,
@@ -1797,9 +2470,10 @@ async function internalRenderStillOnWeb({
   mediaCacheSizeInBytes,
   composition,
   signal,
-  onArtifact
+  onArtifact,
+  licenseKey
 }) {
-  const resolved = await Internals5.resolveVideoConfig({
+  const resolved = await Internals7.resolveVideoConfig({
     calculateMetadata: composition.calculateMetadata ?? null,
     signal: signal ?? new AbortController().signal,
     defaultProps: composition.defaultProps ?? {},
@@ -1813,6 +2487,7 @@ async function internalRenderStillOnWeb({
   if (signal?.aborted) {
     return Promise.reject(new Error("renderStillOnWeb() was cancelled"));
   }
+  const internalState = makeInternalState();
   const { delayRenderScope, div, cleanupScaffold, collectAssets } = await createScaffold({
     width: resolved.width,
     height: resolved.height,
@@ -1849,13 +2524,29 @@ async function internalRenderStillOnWeb({
       div,
       width: resolved.width,
       height: resolved.height,
-      imageFormat
+      imageFormat,
+      logLevel,
+      internalState
     });
     const assets = collectAssets.current.collectAssets();
     if (onArtifact) {
       await artifactsHandler.handle({ imageData, frame, assets, onArtifact });
     }
-    return imageData;
+    sendUsageEvent({
+      licenseKey: licenseKey ?? null,
+      succeeded: true,
+      apiName: "renderStillOnWeb"
+    });
+    return { blob: imageData, internalState };
+  } catch (err) {
+    sendUsageEvent({
+      succeeded: false,
+      licenseKey: licenseKey ?? null,
+      apiName: "renderStillOnWeb"
+    }).catch((err2) => {
+      Internals7.Log.error({ logLevel: "error", tag: "web-renderer" }, "Failed to send usage event", err2);
+    });
+    throw err;
   } finally {
     cleanupScaffold();
   }
@@ -1864,11 +2555,12 @@ var renderStillOnWeb = (options) => {
   onlyOneRenderAtATimeQueue.ref = onlyOneRenderAtATimeQueue.ref.catch(() => Promise.resolve()).then(() => internalRenderStillOnWeb({
     ...options,
     delayRenderTimeoutInMilliseconds: options.delayRenderTimeoutInMilliseconds ?? 30000,
-    logLevel: options.logLevel ?? "info",
+    logLevel: options.logLevel ?? window.remotion_logLevel ?? "info",
     schema: options.schema ?? undefined,
     mediaCacheSizeInBytes: options.mediaCacheSizeInBytes ?? null,
     signal: options.signal ?? null,
-    onArtifact: options.onArtifact ?? null
+    onArtifact: options.onArtifact ?? null,
+    licenseKey: options.licenseKey ?? undefined
   }));
   return onlyOneRenderAtATimeQueue.ref;
 };