@remotion/web-renderer 4.0.437 → 4.0.439

package/dist/esm/index.mjs

@@ -1716,6 +1716,48 @@ var parseDirection = (directionStr) => {
   }
   return 180;
 };
+var cssColorToRgba = (color) => {
+  try {
+    const packed = NoReactInternals2.processColor(color);
+    const a = (packed >>> 24 & 255) / 255;
+    const r = packed >>> 16 & 255;
+    const g = packed >>> 8 & 255;
+    const b = packed & 255;
+    return { r, g, b, a };
+  } catch {
+    return null;
+  }
+};
+var isFullyTransparent = (color) => {
+  const rgba = cssColorToRgba(color);
+  return rgba !== null && rgba.a === 0;
+};
+var findNearestNonTransparent = (stops, fromIndex, direction) => {
+  let i = fromIndex + direction;
+  while (i >= 0 && i < stops.length) {
+    if (!isFullyTransparent(stops[i].color)) {
+      return stops[i].color;
+    }
+    i += direction;
+  }
+  return null;
+};
+var resolveTransparentStops = (stops) => {
+  for (let i = 0;i < stops.length; i++) {
+    if (!isFullyTransparent(stops[i].color)) {
+      continue;
+    }
+    const prev = findNearestNonTransparent(stops, i, -1);
+    const next = findNearestNonTransparent(stops, i, 1);
+    const neighbor = prev ?? next;
+    if (neighbor) {
+      const rgba = cssColorToRgba(neighbor);
+      if (rgba) {
+        stops[i].color = `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, 0)`;
+      }
+    }
+  }
+};
 var parseColorStops = (colorStopsStr) => {
   const parts = colorStopsStr.split(/,(?![^(]*\))/);
   const stops = [];
@@ -1799,6 +1841,7 @@ var parseColorStops = (colorStopsStr) => {
   for (const stop of stops) {
     stop.position = Math.max(0, Math.min(1, stop.position));
   }
+  resolveTransparentStops(stops);
   return stops;
 };
 var extractGradientContent = (backgroundImage) => {
@@ -3637,10 +3680,15 @@ var drawText = ({
       fontSize,
       fontWeight,
       fontStyle,
+      fontVariantCaps,
+      fontKerning,
+      fontStretch,
       direction,
       writingMode,
       letterSpacing,
+      wordSpacing,
       textTransform,
+      textRendering,
       webkitTextFillColor,
       webkitTextStrokeWidth,
       webkitTextStrokeColor,
@@ -3663,8 +3711,13 @@ var drawText = ({
     });
     const fontSizePx = parseFloat(fontSize);
     contextToDraw.font = `${fontStyle} ${fontWeight} ${fontSizePx}px ${fontFamily}`;
+    contextToDraw.fontVariantCaps = fontVariantCaps;
+    contextToDraw.fontKerning = fontKerning;
+    contextToDraw.fontStretch = fontStretch;
+    contextToDraw.textRendering = textRendering;
     contextToDraw.fillStyle = onlyBackgroundClipText ? "black" : webkitTextFillColor;
     contextToDraw.letterSpacing = letterSpacing;
+    contextToDraw.wordSpacing = wordSpacing;
     const strokeWidth = parseFloat(webkitTextStrokeWidth);
     const hasStroke = strokeWidth > 0;
     if (hasStroke) {

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.437",
+	"version": "4.0.439",
 	"main": "dist/index.js",
 	"type": "module",
 	"scripts": {
@@ -22,16 +22,16 @@
 		"@mediabunny/mp3-encoder": "1.39.2",
 		"@mediabunny/aac-encoder": "1.39.2",
 		"@mediabunny/flac-encoder": "1.39.2",
-		"@remotion/licensing": "4.0.437",
-		"remotion": "4.0.437",
+		"@remotion/licensing": "4.0.439",
+		"remotion": "4.0.439",
 		"mediabunny": "1.39.2"
 	},
 	"devDependencies": {
 		"@react-three/fiber": "9.2.0",
-		"@remotion/eslint-config-internal": "4.0.437",
-		"@remotion/player": "4.0.437",
-		"@remotion/media": "4.0.437",
-		"@remotion/three": "4.0.437",
+		"@remotion/eslint-config-internal": "4.0.439",
+		"@remotion/player": "4.0.439",
+		"@remotion/media": "4.0.439",
+		"@remotion/three": "4.0.439",
 		"@types/three": "0.170.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1",
 		"@vitejs/plugin-react": "4.3.4",