@remotion/studio 4.0.388 → 4.0.390

package/dist/esm/{chunk-fea6d7v0.js → chunk-w9aq75yh.js}

@@ -41694,7 +41694,7 @@ var RenderModalWithLoader = (props) => {
 import { getDefaultOutLocation as getDefaultOutLocation2 } from "@remotion/studio-shared";
 
 // ../web-renderer/dist/esm/index.mjs
-import { Internals as Internals310 } from "remotion";
+import { Internals as Internals410 } from "remotion";
 import { NoReactInternals as NoReactInternals16 } from "remotion/no-react";
 import { createRef as createRef12 } from "react";
 import { flushSync as flushSync2 } from "react-dom";
@@ -41705,8 +41705,9 @@ import { flushSync } from "react-dom";
 import { Internals as Internals62 } from "remotion";
 import { jsx as jsx257 } from "react/jsx-runtime";
 import { jsx as jsx258 } from "react/jsx-runtime";
+import { Internals as Internals310 } from "remotion";
 import {
-  Internals as Internals410
+  Internals as Internals510
 } from "remotion";
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
@@ -50455,12 +50456,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);
@@ -50493,6 +50498,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,
@@ -50502,7 +50510,8 @@ var calculateTransforms = (element) => {
       }
     },
     nativeTransformOrigin,
-    opacity
+    opacity,
+    computedStyle: elementComputedStyle
   };
 };
 var drawBorder = ({
@@ -50609,43 +50618,12 @@ var setTransform = ({
     ctx.setTransform(new DOMMatrix);
   };
 };
-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;
-  });
-};
 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;
@@ -50654,7 +50632,6 @@ var drawElementToCanvas = async ({
     reset();
     return;
   }
-  const computedStyle = getComputedStyle(element);
   const background2 = computedStyle.backgroundColor;
   const borderRadius = parseBorderRadius({
     borderRadius: computedStyle.borderRadius,
@@ -50677,16 +50654,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 (background2 && background2 !== "transparent" && !(background2.startsWith("rgba") && (background2.endsWith(", 0)") || background2.endsWith(",0")))) {
     const originalFillStyle = context.fillStyle;
     context.fillStyle = background2;
     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,
@@ -50701,9 +50675,209 @@ var drawElementToCanvas = async ({
   finishTransform();
   reset();
 };
+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 = (text3) => {
+    textNode.textContent = text3;
+    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;
+};
+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 lines2 = [];
+  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");
+      lines2.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;
+    lines2.push({
+      text: currentLine,
+      offsetTop: rect.height - previousRect.height,
+      offsetHorizontal
+    });
+  }
+  textNode.textContent = originalText;
+  return lines2;
+}
+var applyTextTransform = (text3, transform) => {
+  if (transform === "uppercase") {
+    return text3.toUpperCase();
+  }
+  if (transform === "lowercase") {
+    return text3.toLowerCase();
+  }
+  if (transform === "capitalize") {
+    return text3.replace(/\b\w/g, (char) => char.toUpperCase());
+  }
+  return text3;
+};
+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, style12) {
+      const {
+        fontFamily,
+        fontSize: fontSize2,
+        fontWeight,
+        color,
+        lineHeight: lineHeight2,
+        direction,
+        writingMode,
+        letterSpacing,
+        textTransform
+      } = style12;
+      const isVertical = writingMode !== "horizontal-tb";
+      if (isVertical) {
+        Internals310.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} ${fontSize2} ${fontFamily}`;
+      context.fillStyle = color;
+      context.letterSpacing = letterSpacing;
+      const fontSizePx = parseFloat(fontSize2);
+      const lineHeightPx = lineHeight2 === "normal" ? 1.2 * fontSizePx : parseFloat(lineHeight2);
+      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 lines2 = findLineBreaks(span, isRTL);
+      let offsetTop = 0;
+      for (const line4 of lines2) {
+        context.fillText(line4.text, xPosition + line4.offsetHorizontal, rect.top + baselineOffset + offsetTop);
+        offsetTop += line4.offsetTop;
+      }
+      span.textContent = originalText;
+      context.restore();
+    }
+  });
+  parent.insertBefore(node, span);
+  parent.removeChild(span);
+};
+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;
+  });
+};
 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;
     }
@@ -50712,7 +50886,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);
     }
   }
 };
@@ -50863,7 +51048,7 @@ var internalRenderMediaOnWeb = async ({
   if (codec && !format.getSupportedCodecs().includes(codecToMediabunnyCodec(codec))) {
     return Promise.reject(new Error(`Codec ${codec} is not supported for container ${container60}`));
   }
-  const resolved = await Internals310.resolveVideoConfig({
+  const resolved = await Internals410.resolveVideoConfig({
     calculateMetadata: composition.calculateMetadata ?? null,
     signal: signal ?? new AbortController().signal,
     defaultProps: composition.defaultProps ?? {},
@@ -51062,7 +51247,7 @@ async function internalRenderStillOnWeb({
   signal,
   onArtifact
 }) {
-  const resolved = await Internals410.resolveVideoConfig({
+  const resolved = await Internals510.resolveVideoConfig({
     calculateMetadata: composition.calculateMetadata ?? null,
     signal: signal ?? new AbortController().signal,
     defaultProps: composition.defaultProps ?? {},

package/dist/esm/internals.mjs

@@ -41713,7 +41713,7 @@ var RenderModalWithLoader = (props) => {
 import { getDefaultOutLocation as getDefaultOutLocation2 } from "@remotion/studio-shared";
 
 // ../web-renderer/dist/esm/index.mjs
-import { Internals as Internals310 } from "remotion";
+import { Internals as Internals410 } from "remotion";
 import { NoReactInternals as NoReactInternals16 } from "remotion/no-react";
 import { createRef as createRef12 } from "react";
 import { flushSync as flushSync2 } from "react-dom";
@@ -41724,8 +41724,9 @@ import { flushSync } from "react-dom";
 import { Internals as Internals62 } from "remotion";
 import { jsx as jsx257 } from "react/jsx-runtime";
 import { jsx as jsx258 } from "react/jsx-runtime";
+import { Internals as Internals310 } from "remotion";
 import {
-  Internals as Internals410
+  Internals as Internals510
 } from "remotion";
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
@@ -50474,12 +50475,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);
@@ -50512,6 +50517,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,
@@ -50521,7 +50529,8 @@ var calculateTransforms = (element) => {
       }
     },
     nativeTransformOrigin,
-    opacity
+    opacity,
+    computedStyle: elementComputedStyle
   };
 };
 var drawBorder = ({
@@ -50628,43 +50637,12 @@ var setTransform = ({
     ctx.setTransform(new DOMMatrix);
   };
 };
-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;
-  });
-};
 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;
@@ -50673,7 +50651,6 @@ var drawElementToCanvas = async ({
     reset();
     return;
   }
-  const computedStyle = getComputedStyle(element);
   const background2 = computedStyle.backgroundColor;
   const borderRadius = parseBorderRadius({
     borderRadius: computedStyle.borderRadius,
@@ -50696,16 +50673,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 (background2 && background2 !== "transparent" && !(background2.startsWith("rgba") && (background2.endsWith(", 0)") || background2.endsWith(",0")))) {
     const originalFillStyle = context.fillStyle;
     context.fillStyle = background2;
     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,
@@ -50720,9 +50694,209 @@ var drawElementToCanvas = async ({
   finishTransform();
   reset();
 };
+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 = (text3) => {
+    textNode.textContent = text3;
+    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;
+};
+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 lines2 = [];
+  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");
+      lines2.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;
+    lines2.push({
+      text: currentLine,
+      offsetTop: rect.height - previousRect.height,
+      offsetHorizontal
+    });
+  }
+  textNode.textContent = originalText;
+  return lines2;
+}
+var applyTextTransform = (text3, transform) => {
+  if (transform === "uppercase") {
+    return text3.toUpperCase();
+  }
+  if (transform === "lowercase") {
+    return text3.toLowerCase();
+  }
+  if (transform === "capitalize") {
+    return text3.replace(/\b\w/g, (char) => char.toUpperCase());
+  }
+  return text3;
+};
+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, style12) {
+      const {
+        fontFamily,
+        fontSize: fontSize2,
+        fontWeight,
+        color,
+        lineHeight: lineHeight2,
+        direction,
+        writingMode,
+        letterSpacing,
+        textTransform
+      } = style12;
+      const isVertical = writingMode !== "horizontal-tb";
+      if (isVertical) {
+        Internals310.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} ${fontSize2} ${fontFamily}`;
+      context.fillStyle = color;
+      context.letterSpacing = letterSpacing;
+      const fontSizePx = parseFloat(fontSize2);
+      const lineHeightPx = lineHeight2 === "normal" ? 1.2 * fontSizePx : parseFloat(lineHeight2);
+      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 lines2 = findLineBreaks(span, isRTL);
+      let offsetTop = 0;
+      for (const line4 of lines2) {
+        context.fillText(line4.text, xPosition + line4.offsetHorizontal, rect.top + baselineOffset + offsetTop);
+        offsetTop += line4.offsetTop;
+      }
+      span.textContent = originalText;
+      context.restore();
+    }
+  });
+  parent.insertBefore(node, span);
+  parent.removeChild(span);
+};
+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;
+  });
+};
 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;
     }
@@ -50731,7 +50905,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);
     }
   }
 };
@@ -50882,7 +51067,7 @@ var internalRenderMediaOnWeb = async ({
   if (codec && !format.getSupportedCodecs().includes(codecToMediabunnyCodec(codec))) {
     return Promise.reject(new Error(`Codec ${codec} is not supported for container ${container60}`));
   }
-  const resolved = await Internals310.resolveVideoConfig({
+  const resolved = await Internals410.resolveVideoConfig({
     calculateMetadata: composition.calculateMetadata ?? null,
     signal: signal ?? new AbortController().signal,
     defaultProps: composition.defaultProps ?? {},
@@ -51081,7 +51266,7 @@ async function internalRenderStillOnWeb({
   signal,
   onArtifact
 }) {
-  const resolved = await Internals410.resolveVideoConfig({
+  const resolved = await Internals510.resolveVideoConfig({
     calculateMetadata: composition.calculateMetadata ?? null,
     signal: signal ?? new AbortController().signal,
     defaultProps: composition.defaultProps ?? {},

package/dist/esm/previewEntry.mjs

@@ -41993,7 +41993,7 @@ var RenderModalWithLoader = (props) => {
 import { getDefaultOutLocation as getDefaultOutLocation2 } from "@remotion/studio-shared";
 
 // ../web-renderer/dist/esm/index.mjs
-import { Internals as Internals310 } from "remotion";
+import { Internals as Internals410 } from "remotion";
 import { NoReactInternals as NoReactInternals16 } from "remotion/no-react";
 import { createRef as createRef13 } from "react";
 import { flushSync as flushSync2 } from "react-dom";
@@ -42004,8 +42004,9 @@ import { flushSync } from "react-dom";
 import { Internals as Internals62 } from "remotion";
 import { jsx as jsx258 } from "react/jsx-runtime";
 import { jsx as jsx259 } from "react/jsx-runtime";
+import { Internals as Internals310 } from "remotion";
 import {
-  Internals as Internals410
+  Internals as Internals510
 } from "remotion";
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
@@ -50754,12 +50755,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);
@@ -50792,6 +50797,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,
@@ -50801,7 +50809,8 @@ var calculateTransforms = (element) => {
       }
     },
     nativeTransformOrigin,
-    opacity
+    opacity,
+    computedStyle: elementComputedStyle
   };
 };
 var drawBorder = ({
@@ -50908,43 +50917,12 @@ var setTransform = ({
     ctx.setTransform(new DOMMatrix);
   };
 };
-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;
-  });
-};
 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;
@@ -50953,7 +50931,6 @@ var drawElementToCanvas = async ({
     reset();
     return;
   }
-  const computedStyle = getComputedStyle(element);
   const background2 = computedStyle.backgroundColor;
   const borderRadius = parseBorderRadius({
     borderRadius: computedStyle.borderRadius,
@@ -50976,16 +50953,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 (background2 && background2 !== "transparent" && !(background2.startsWith("rgba") && (background2.endsWith(", 0)") || background2.endsWith(",0")))) {
     const originalFillStyle = context.fillStyle;
     context.fillStyle = background2;
     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,
@@ -51000,9 +50974,209 @@ var drawElementToCanvas = async ({
   finishTransform();
   reset();
 };
+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 = (text3) => {
+    textNode.textContent = text3;
+    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;
+};
+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 lines2 = [];
+  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");
+      lines2.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;
+    lines2.push({
+      text: currentLine,
+      offsetTop: rect.height - previousRect.height,
+      offsetHorizontal
+    });
+  }
+  textNode.textContent = originalText;
+  return lines2;
+}
+var applyTextTransform = (text3, transform) => {
+  if (transform === "uppercase") {
+    return text3.toUpperCase();
+  }
+  if (transform === "lowercase") {
+    return text3.toLowerCase();
+  }
+  if (transform === "capitalize") {
+    return text3.replace(/\b\w/g, (char) => char.toUpperCase());
+  }
+  return text3;
+};
+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, style12) {
+      const {
+        fontFamily,
+        fontSize: fontSize2,
+        fontWeight,
+        color,
+        lineHeight: lineHeight2,
+        direction,
+        writingMode,
+        letterSpacing,
+        textTransform
+      } = style12;
+      const isVertical = writingMode !== "horizontal-tb";
+      if (isVertical) {
+        Internals310.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} ${fontSize2} ${fontFamily}`;
+      context.fillStyle = color;
+      context.letterSpacing = letterSpacing;
+      const fontSizePx = parseFloat(fontSize2);
+      const lineHeightPx = lineHeight2 === "normal" ? 1.2 * fontSizePx : parseFloat(lineHeight2);
+      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 lines2 = findLineBreaks(span, isRTL);
+      let offsetTop = 0;
+      for (const line4 of lines2) {
+        context.fillText(line4.text, xPosition + line4.offsetHorizontal, rect.top + baselineOffset + offsetTop);
+        offsetTop += line4.offsetTop;
+      }
+      span.textContent = originalText;
+      context.restore();
+    }
+  });
+  parent.insertBefore(node, span);
+  parent.removeChild(span);
+};
+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;
+  });
+};
 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;
     }
@@ -51011,7 +51185,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);
     }
   }
 };
@@ -51162,7 +51347,7 @@ var internalRenderMediaOnWeb = async ({
   if (codec && !format.getSupportedCodecs().includes(codecToMediabunnyCodec(codec))) {
     return Promise.reject(new Error(`Codec ${codec} is not supported for container ${container60}`));
   }
-  const resolved = await Internals310.resolveVideoConfig({
+  const resolved = await Internals410.resolveVideoConfig({
     calculateMetadata: composition.calculateMetadata ?? null,
     signal: signal ?? new AbortController().signal,
     defaultProps: composition.defaultProps ?? {},
@@ -51361,7 +51546,7 @@ async function internalRenderStillOnWeb({
   signal,
   onArtifact
 }) {
-  const resolved = await Internals410.resolveVideoConfig({
+  const resolved = await Internals510.resolveVideoConfig({
     calculateMetadata: composition.calculateMetadata ?? null,
     signal: signal ?? new AbortController().signal,
     defaultProps: composition.defaultProps ?? {},

package/dist/esm/renderEntry.mjs

@@ -206,7 +206,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-fea6d7v0.js").then(({ StudioInternals }) => {
+    import("./chunk-w9aq75yh.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.388",
+	"version": "4.0.390",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"sideEffects": false,
@@ -25,13 +25,13 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.388",
-		"@remotion/player": "4.0.388",
-		"@remotion/media-utils": "4.0.388",
-		"@remotion/renderer": "4.0.388",
-		"@remotion/web-renderer": "4.0.388",
-		"@remotion/studio-shared": "4.0.388",
-		"@remotion/zod-types": "4.0.388",
+		"remotion": "4.0.390",
+		"@remotion/player": "4.0.390",
+		"@remotion/media-utils": "4.0.390",
+		"@remotion/renderer": "4.0.390",
+		"@remotion/web-renderer": "4.0.390",
+		"@remotion/studio-shared": "4.0.390",
+		"@remotion/zod-types": "4.0.390",
 		"mediabunny": "1.25.8",
 		"memfs": "3.4.3",
 		"source-map": "0.7.3",
@@ -42,7 +42,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "^7.3.4",
-		"@remotion/eslint-config-internal": "4.0.388",
+		"@remotion/eslint-config-internal": "4.0.390",
 		"eslint": "9.19.0"
 	},
 	"publishConfig": {