@remotion/web-renderer 4.0.387 → 4.0.390

package/dist/esm/index.mjs

@@ -8259,7 +8259,7 @@ class Output {
  */
 
 // src/render-media-on-web.tsx
-import { Internals as Internals3 } from "remotion";
+import { Internals as Internals4 } from "remotion";
 
 // src/add-sample.ts
 var addVideoSampleAndCloseFrame = async (frameToEncode, videoSampleSource) => {
@@ -8826,12 +8826,16 @@ var calculateTransforms = (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;
       const matrix = new DOMMatrix(toParse);
@@ -8864,6 +8868,9 @@ var calculateTransforms = (element) => {
     const transformMatrix = new DOMMatrix().translate(globalTransformOrigin.x, globalTransformOrigin.y).multiply(transform.matrix).translate(-globalTransformOrigin.x, -globalTransformOrigin.y);
     totalMatrix.multiplySelf(transformMatrix);
   }
+  if (!elementComputedStyle) {
+    throw new Error("Element computed style not found");
+  }
   return {
     dimensions,
     totalMatrix,
@@ -8873,7 +8880,8 @@ var calculateTransforms = (element) => {
       }
     },
     nativeTransformOrigin,
-    opacity
+    opacity,
+    computedStyle: elementComputedStyle
   };
 };
 
@@ -8987,46 +8995,13 @@ var setTransform = ({
   };
 };
 
-// src/drawing/turn-svg-into-drawable.ts
-var turnSvgIntoDrawable = (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;
-  svg.style.transform = "none";
-  svg.style.transformOrigin = "";
-  svg.style.marginLeft = "0";
-  svg.style.marginRight = "0";
-  svg.style.marginTop = "0";
-  svg.style.marginBottom = "0";
-  const svgData = new XMLSerializer().serializeToString(svg);
-  svg.style.marginLeft = originalMarginLeft;
-  svg.style.marginRight = originalMarginRight;
-  svg.style.marginTop = originalMarginTop;
-  svg.style.marginBottom = originalMarginBottom;
-  svg.style.transform = originalTransform;
-  svg.style.transformOrigin = originalTransformOrigin;
-  return new Promise((resolve, reject) => {
-    const image = new Image;
-    const url2 = `data:image/svg+xml;base64,${btoa(svgData)}`;
-    image.onload = function() {
-      resolve(image);
-    };
-    image.onerror = () => {
-      reject(new Error("Failed to convert SVG to image"));
-    };
-    image.src = url2;
-  });
-};
-
 // src/drawing/draw-element-to-canvas.ts
 var drawElementToCanvas = async ({
   element,
-  context
+  context,
+  draw
 }) => {
-  const { totalMatrix, reset, dimensions, opacity } = calculateTransforms(element);
+  const { totalMatrix, reset, dimensions, opacity, computedStyle } = calculateTransforms(element);
   if (opacity === 0) {
     reset();
     return;
@@ -9035,7 +9010,6 @@ var drawElementToCanvas = async ({
     reset();
     return;
   }
-  const computedStyle = getComputedStyle(element);
   const background = computedStyle.backgroundColor;
   const borderRadius = parseBorderRadius({
     borderRadius: computedStyle.borderRadius,
@@ -9058,16 +9032,13 @@ var drawElementToCanvas = async ({
     ctx: context,
     opacity
   });
-  const drawable = element instanceof SVGSVGElement ? await turnSvgIntoDrawable(element) : element instanceof HTMLImageElement ? element : element instanceof HTMLCanvasElement ? element : null;
   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.fillStyle = originalFillStyle;
   }
-  if (drawable) {
-    context.drawImage(drawable, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
-  }
+  await draw(dimensions, computedStyle);
   drawBorder({
     ctx: context,
     x: dimensions.left,
@@ -9083,10 +9054,221 @@ var drawElementToCanvas = async ({
   reset();
 };
 
+// src/drawing/text/handle-text-node.ts
+import { Internals as Internals3 } from "remotion";
+
+// src/drawing/text/get-collapsed-text.ts
+var getCollapsedText = (span) => {
+  const textNode = span.firstChild;
+  if (!textNode || textNode.nodeType !== Node.TEXT_NODE) {
+    throw new Error("Span must contain a single text node");
+  }
+  const originalText = textNode.textContent || "";
+  let collapsedText = originalText;
+  const measureWidth = (text) => {
+    textNode.textContent = text;
+    return span.getBoundingClientRect().width;
+  };
+  const originalWidth = measureWidth(originalText);
+  if (/^\s/.test(collapsedText)) {
+    const trimmedLeading = collapsedText.replace(/^\s+/, "");
+    const newWidth = measureWidth(trimmedLeading);
+    if (newWidth === originalWidth) {
+      collapsedText = trimmedLeading;
+    }
+  }
+  if (/\s$/.test(collapsedText)) {
+    const currentWidth = measureWidth(collapsedText);
+    const trimmedTrailing = collapsedText.replace(/\s+$/, "");
+    const newWidth = measureWidth(trimmedTrailing);
+    if (newWidth === currentWidth) {
+      collapsedText = trimmedTrailing;
+    }
+  }
+  if (/\s\s/.test(collapsedText)) {
+    const currentWidth = measureWidth(collapsedText);
+    const collapsedInternal = collapsedText.replace(/\s\s+/g, " ");
+    const newWidth = measureWidth(collapsedInternal);
+    if (newWidth === currentWidth) {
+      collapsedText = collapsedInternal;
+    }
+  }
+  textNode.textContent = originalText;
+  return collapsedText;
+};
+
+// src/drawing/text/find-line-breaks.text.ts
+function findLineBreaks(span, rtl) {
+  const textNode = span.childNodes[0];
+  const originalText = textNode.textContent;
+  const originalRect = span.getBoundingClientRect();
+  const computedStyle = getComputedStyle(span);
+  const segmenter = new Intl.Segmenter("en", { granularity: "word" });
+  const segments = segmenter.segment(originalText);
+  const words = Array.from(segments).map((s) => s.segment);
+  const lines = [];
+  let currentLine = "";
+  let testText = "";
+  let previousRect = originalRect;
+  textNode.textContent = "";
+  for (let i = 0;i < words.length; i += 1) {
+    const word = words[i];
+    testText += word;
+    let wordsToAdd = word;
+    while (typeof words[i + 1] !== "undefined" && words[i + 1].trim() === "") {
+      testText += words[i + 1];
+      wordsToAdd += words[i + 1];
+      i++;
+    }
+    previousRect = span.getBoundingClientRect();
+    textNode.textContent = testText;
+    const collapsedText = getCollapsedText(span);
+    textNode.textContent = collapsedText;
+    const rect = span.getBoundingClientRect();
+    const currentHeight = rect.height;
+    if (previousRect && previousRect.height !== 0 && Math.abs(currentHeight - previousRect.height) > 2) {
+      const offsetHorizontal = rtl ? previousRect.right - originalRect.right : previousRect.left - originalRect.left;
+      const shouldCollapse = !computedStyle.whiteSpaceCollapse.includes("preserve");
+      lines.push({
+        text: shouldCollapse ? currentLine.trim() : currentLine,
+        offsetTop: currentHeight - previousRect.height,
+        offsetHorizontal
+      });
+      currentLine = wordsToAdd;
+    } else {
+      currentLine += wordsToAdd;
+    }
+  }
+  if (currentLine) {
+    textNode.textContent = testText;
+    const rects = span.getClientRects();
+    const rect = span.getBoundingClientRect();
+    const lastRect = rects[rects.length - 1];
+    const offsetHorizontal = rtl ? lastRect.right - originalRect.right : lastRect.left - originalRect.left;
+    lines.push({
+      text: currentLine,
+      offsetTop: rect.height - previousRect.height,
+      offsetHorizontal
+    });
+  }
+  textNode.textContent = originalText;
+  return lines;
+}
+
+// src/drawing/text/handle-text-node.ts
+var applyTextTransform = (text, transform) => {
+  if (transform === "uppercase") {
+    return text.toUpperCase();
+  }
+  if (transform === "lowercase") {
+    return text.toLowerCase();
+  }
+  if (transform === "capitalize") {
+    return text.replace(/\b\w/g, (char) => char.toUpperCase());
+  }
+  return text;
+};
+var handleTextNode = async (node, context) => {
+  const span = document.createElement("span");
+  const parent = node.parentNode;
+  if (!parent) {
+    throw new Error("Text node has no parent");
+  }
+  parent.insertBefore(span, node);
+  span.appendChild(node);
+  await drawElementToCanvas({
+    context,
+    element: span,
+    draw(rect, style) {
+      const {
+        fontFamily,
+        fontSize,
+        fontWeight,
+        color,
+        lineHeight,
+        direction,
+        writingMode,
+        letterSpacing,
+        textTransform
+      } = style;
+      const isVertical = writingMode !== "horizontal-tb";
+      if (isVertical) {
+        Internals3.Log.warn({
+          logLevel: "warn",
+          tag: "@remotion/web-renderer"
+        }, 'Detected "writing-mode" CSS property. Vertical text is not yet supported in @remotion/web-renderer');
+        return;
+      }
+      context.save();
+      context.font = `${fontWeight} ${fontSize} ${fontFamily}`;
+      context.fillStyle = color;
+      context.letterSpacing = letterSpacing;
+      const fontSizePx = parseFloat(fontSize);
+      const lineHeightPx = lineHeight === "normal" ? 1.2 * fontSizePx : parseFloat(lineHeight);
+      const baselineOffset = (lineHeightPx - fontSizePx) / 2;
+      const isRTL = direction === "rtl";
+      context.textAlign = isRTL ? "right" : "left";
+      context.textBaseline = "top";
+      const originalText = span.textContent;
+      const collapsedText = getCollapsedText(span);
+      const transformedText = applyTextTransform(collapsedText, textTransform);
+      span.textContent = transformedText;
+      const xPosition = isRTL ? rect.right : rect.left;
+      const lines = findLineBreaks(span, isRTL);
+      let offsetTop = 0;
+      for (const line of lines) {
+        context.fillText(line.text, xPosition + line.offsetHorizontal, rect.top + baselineOffset + offsetTop);
+        offsetTop += line.offsetTop;
+      }
+      span.textContent = originalText;
+      context.restore();
+    }
+  });
+  parent.insertBefore(node, span);
+  parent.removeChild(span);
+};
+
+// src/drawing/turn-svg-into-drawable.ts
+var turnSvgIntoDrawable = (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;
+  svg.style.transform = "none";
+  svg.style.transformOrigin = "";
+  svg.style.marginLeft = "0";
+  svg.style.marginRight = "0";
+  svg.style.marginTop = "0";
+  svg.style.marginBottom = "0";
+  const svgData = new XMLSerializer().serializeToString(svg);
+  svg.style.marginLeft = originalMarginLeft;
+  svg.style.marginRight = originalMarginRight;
+  svg.style.marginTop = originalMarginTop;
+  svg.style.marginBottom = originalMarginBottom;
+  svg.style.transform = originalTransform;
+  svg.style.transformOrigin = originalTransformOrigin;
+  return new Promise((resolve, reject) => {
+    const image = new Image;
+    const url2 = `data:image/svg+xml;base64,${btoa(svgData)}`;
+    image.onload = function() {
+      resolve(image);
+    };
+    image.onerror = () => {
+      reject(new Error("Failed to convert SVG to image"));
+    };
+    image.src = url2;
+  });
+};
+
 // src/compose.ts
 var compose = async (element, context) => {
   const treeWalker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, (node) => {
     if (node instanceof Element) {
+      if (node.parentElement instanceof SVGSVGElement) {
+        return NodeFilter.FILTER_REJECT;
+      }
       const computedStyle = getComputedStyle(node);
       return computedStyle.display === "none" ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT;
     }
@@ -9095,7 +9277,18 @@ var compose = async (element, context) => {
   while (treeWalker.nextNode()) {
     const node = treeWalker.currentNode;
     if (node instanceof HTMLElement || node instanceof SVGElement) {
-      await drawElementToCanvas({ element: node, context });
+      await drawElementToCanvas({
+        element: node,
+        context,
+        draw: async (dimensions) => {
+          const drawable = await (node instanceof SVGSVGElement ? turnSvgIntoDrawable(node) : node instanceof HTMLImageElement ? node : node instanceof HTMLCanvasElement ? node : null);
+          if (drawable) {
+            context.drawImage(drawable, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
+          }
+        }
+      });
+    } else if (node instanceof Text) {
+      await handleTextNode(node, context);
     }
   }
 };
@@ -9256,7 +9449,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 Internals3.resolveVideoConfig({
+  const resolved = await Internals4.resolveVideoConfig({
     calculateMetadata: composition.calculateMetadata ?? null,
     signal: signal ?? new AbortController().signal,
     defaultProps: composition.defaultProps ?? {},
@@ -9445,7 +9638,7 @@ var renderMediaOnWeb = (options) => {
 };
 // src/render-still-on-web.tsx
 import {
-  Internals as Internals4
+  Internals as Internals5
 } from "remotion";
 async function internalRenderStillOnWeb({
   frame,
@@ -9459,7 +9652,7 @@ async function internalRenderStillOnWeb({
   signal,
   onArtifact
 }) {
-  const resolved = await Internals4.resolveVideoConfig({
+  const resolved = await Internals5.resolveVideoConfig({
     calculateMetadata: composition.calculateMetadata ?? null,
     signal: signal ?? new AbortController().signal,
     defaultProps: composition.defaultProps ?? {},

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.387",
+	"version": "4.0.390",
 	"main": "dist/index.js",
 	"sideEffects": false,
 	"scripts": {
@@ -16,13 +16,13 @@
 	"author": "Remotion <jonny@remotion.dev>",
 	"license": "UNLICENSED",
 	"dependencies": {
-		"remotion": "4.0.387",
+		"remotion": "4.0.390",
 		"mediabunny": "1.25.8"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.387",
-		"@remotion/player": "4.0.387",
-		"@remotion/media": "4.0.387",
+		"@remotion/eslint-config-internal": "4.0.390",
+		"@remotion/player": "4.0.390",
+		"@remotion/media": "4.0.390",
 		"@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;
-};