@remotion/promo-pages 4.0.438 → 4.0.439

package/dist/Homepage.js

@@ -770,12 +770,7 @@ import { jsx as jsx3 } from "react/jsx-runtime";
 import { useContext as useContext6, useMemo as useMemo5 } from "react";
 import { createContext as createContext7 } from "react";
 import { createContext as createContext9, createRef, useContext as useContext5, useMemo as useMemo4 } from "react";
-import React5, {
-  createContext as createContext8,
-  useCallback as useCallback2,
-  useImperativeHandle,
-  useMemo as useMemo3
-} from "react";
+import React5, { createContext as createContext8, useCallback as useCallback2, useMemo as useMemo3 } from "react";
 import { jsx as jsx4 } from "react/jsx-runtime";
 import { useContext as useContext8 } from "react";
 import { createContext as createContext10 } from "react";
@@ -791,19 +786,19 @@ import { jsx as jsx8 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef3,
   useEffect as useEffect2,
-  useImperativeHandle as useImperativeHandle3,
+  useImperativeHandle as useImperativeHandle2,
   useLayoutEffect as useLayoutEffect2,
   useRef as useRef5,
   useState as useState5
 } from "react";
-import React10, { useCallback as useCallback5, useImperativeHandle as useImperativeHandle2, useRef as useRef4 } from "react";
+import React10, { useCallback as useCallback5, useImperativeHandle, useRef as useRef4 } from "react";
 import { jsx as jsx9 } from "react/jsx-runtime";
 import { jsx as jsx10 } from "react/jsx-runtime";
 import { useContext as useContext14, useLayoutEffect as useLayoutEffect4, useState as useState7 } from "react";
 import {
   createContext as createContext13,
   useCallback as useCallback6,
-  useImperativeHandle as useImperativeHandle4,
+  useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo12,
   useRef as useRef6,
@@ -822,7 +817,7 @@ import React17, {
   forwardRef as forwardRef4,
   useContext as useContext24,
   useEffect as useEffect10,
-  useImperativeHandle as useImperativeHandle5,
+  useImperativeHandle as useImperativeHandle4,
   useMemo as useMemo22,
   useRef as useRef14,
   useState as useState13
@@ -871,7 +866,7 @@ import {
   forwardRef as forwardRef5,
   useContext as useContext25,
   useEffect as useEffect11,
-  useImperativeHandle as useImperativeHandle6,
+  useImperativeHandle as useImperativeHandle5,
   useLayoutEffect as useLayoutEffect8,
   useMemo as useMemo23,
   useRef as useRef15
@@ -891,7 +886,7 @@ import {
   forwardRef as forwardRef8,
   useCallback as useCallback13,
   useContext as useContext29,
-  useImperativeHandle as useImperativeHandle7,
+  useImperativeHandle as useImperativeHandle6,
   useLayoutEffect as useLayoutEffect9,
   useRef as useRef17
 } from "react";
@@ -900,7 +895,7 @@ import { createRef as createRef3 } from "react";
 import React24 from "react";
 import {
   useCallback as useCallback14,
-  useImperativeHandle as useImperativeHandle8,
+  useImperativeHandle as useImperativeHandle7,
   useMemo as useMemo26,
   useRef as useRef18,
   useState as useState15
@@ -929,7 +924,7 @@ import React30, {
   forwardRef as forwardRef9,
   useContext as useContext34,
   useEffect as useEffect16,
-  useImperativeHandle as useImperativeHandle9,
+  useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo31,
   useRef as useRef19,
   useState as useState18
@@ -951,7 +946,7 @@ import {
   forwardRef as forwardRef12,
   useContext as useContext35,
   useEffect as useEffect17,
-  useImperativeHandle as useImperativeHandle10,
+  useImperativeHandle as useImperativeHandle9,
   useLayoutEffect as useLayoutEffect11,
   useMemo as useMemo35,
   useRef as useRef20
@@ -1003,7 +998,7 @@ var useIsPlayer = () => {
 function truthy(value) {
   return Boolean(value);
 }
-var VERSION = "4.0.438";
+var VERSION = "4.0.439";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -1524,9 +1519,6 @@ var CompositionSetters = createContext7({
   setCanvasContent: () => {
     return;
   },
-  updateCompositionDefaultProps: () => {
-    return;
-  },
   onlyRenderComposition: null
 });
 var getKey = () => {
@@ -1646,12 +1638,8 @@ var EditorPropsContext = createContext8({
   props: {},
   updateProps: () => {
     throw new Error("Not implemented");
-  },
-  resetUnsaved: () => {
-    throw new Error("Not implemented");
   }
 });
-var editorPropsProviderRef = React5.createRef();
 var timeValueRef = React5.createRef();
 var EditorPropsProvider = ({ children }) => {
   const [props, setProps] = React5.useState({});
@@ -1667,25 +1655,9 @@ var EditorPropsProvider = ({ children }) => {
       };
     });
   }, []);
-  const resetUnsaved = useCallback2((compositionId) => {
-    setProps((prev) => {
-      if (prev[compositionId]) {
-        const newProps = { ...prev };
-        delete newProps[compositionId];
-        return newProps;
-      }
-      return prev;
-    });
-  }, []);
-  useImperativeHandle(editorPropsProviderRef, () => {
-    return {
-      getProps: () => props,
-      setProps
-    };
-  }, [props]);
   const ctx = useMemo3(() => {
-    return { props, updateProps, resetUnsaved };
-  }, [props, resetUnsaved, updateProps]);
+    return { props, updateProps };
+  }, [props, updateProps]);
   return /* @__PURE__ */ jsx4(EditorPropsContext.Provider, {
     value: ctx,
     children
@@ -1748,7 +1720,6 @@ var resolveCompositionsRef = createRef();
 var needsResolution = (composition) => {
   return Boolean(composition.calculateMetadata);
 };
-var PROPS_UPDATED_EXTERNALLY = "remotion.propsUpdatedExternally";
 var useResolvedVideoConfig = (preferredCompositionId) => {
   const context = useContext5(ResolveCompositionContext);
   const { props: allEditorProps } = useContext5(EditorPropsContext);
@@ -2519,7 +2490,7 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style }, ref
       height: canvasHeight
     }));
   }, [fit, height, width]);
-  useImperativeHandle2(ref, () => {
+  useImperativeHandle(ref, () => {
     return {
       draw,
       getCanvas: () => {
@@ -2718,7 +2689,7 @@ var AnimatedImage = forwardRef3(({
   const currentTimeRef = useRef5(currentTime);
   currentTimeRef.current = currentTime;
   const ref = useRef5(null);
-  useImperativeHandle3(canvasRef, () => {
+  useImperativeHandle2(canvasRef, () => {
     const c = ref.current?.getCanvas();
     if (!c) {
       throw new Error("Canvas ref is not set");
@@ -2844,7 +2815,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
     setRenderAssets(renderAssetsRef.current);
   }, []);
   if (collectAssets) {
-    useImperativeHandle4(collectAssets, () => {
+    useImperativeHandle3(collectAssets, () => {
       return {
         collectAssets: () => {
           const assets = renderAssetsRef.current;
@@ -5275,7 +5246,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
       });
     };
   }, [cleanupOnMediaTagUnmount]);
-  useImperativeHandle5(ref, () => {
+  useImperativeHandle4(ref, () => {
     return audioRef.current;
   }, [audioRef]);
   const currentOnDurationCallback = useRef14(onDuration);
@@ -5346,7 +5317,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useImperativeHandle6(ref, () => {
+  useImperativeHandle5(ref, () => {
     return audioRef.current;
   }, []);
   useEffect11(() => {
@@ -5775,13 +5746,6 @@ var InnerComposition = ({
     registerComposition,
     unregisterComposition
   ]);
-  useEffect13(() => {
-    window.dispatchEvent(new CustomEvent(PROPS_UPDATED_EXTERNALLY, {
-      detail: {
-        resetUnsaved: id
-      }
-    }));
-  }, [defaultProps, id]);
   const resolved = useResolvedVideoConfig(id);
   if (environment.isStudio && video && video.component === lazy && video.id === id) {
     const Comp = lazy;
@@ -5882,7 +5846,7 @@ var ImgRefForwarding = ({
   if (!_propsValid) {
     throw new Error("typecheck error");
   }
-  useImperativeHandle7(ref, () => {
+  useImperativeHandle6(ref, () => {
     return imageRef.current;
   }, []);
   const actualSrc = usePreload(src);
@@ -6056,25 +6020,11 @@ var CompositionManagerProvider = ({
       return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
     });
   }, []);
-  useImperativeHandle8(compositionsRef, () => {
+  useImperativeHandle7(compositionsRef, () => {
     return {
       getCompositions: () => currentcompositionsRef.current
     };
   }, []);
-  const updateCompositionDefaultProps = useCallback14((id, newDefaultProps) => {
-    setCompositions((comps) => {
-      const updated = comps.map((c2) => {
-        if (c2.id === id) {
-          return {
-            ...c2,
-            defaultProps: newDefaultProps
-          };
-        }
-        return c2;
-      });
-      return updated;
-    });
-  }, []);
   const compositionManagerSetters = useMemo26(() => {
     return {
       registerComposition,
@@ -6082,7 +6032,6 @@ var CompositionManagerProvider = ({
       registerFolder,
       unregisterFolder,
       setCanvasContent,
-      updateCompositionDefaultProps,
       onlyRenderComposition
     };
   }, [
@@ -6090,7 +6039,6 @@ var CompositionManagerProvider = ({
     registerFolder,
     unregisterComposition,
     unregisterFolder,
-    updateCompositionDefaultProps,
     onlyRenderComposition
   ]);
   const compositionManagerContextValue = useMemo26(() => {
@@ -6549,7 +6497,7 @@ var useSchema = (schema, currentValue) => {
     const overrideValues = overrides[overrideId] ?? {};
     const propStatus = codeValues[overrideId];
     const currentValueKeys = Object.keys(currentValue);
-    const keysToUpdate = new Set(currentValueKeys).values();
+    const keysToUpdate = [...new Set(currentValueKeys)];
     const merged = {};
     for (const key of keysToUpdate) {
       const codeValueStatus = propStatus?.[key] ?? null;
@@ -6942,7 +6890,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     duration,
     fps
   });
-  useImperativeHandle9(ref, () => {
+  useImperativeHandle8(ref, () => {
     return videoRef.current;
   }, []);
   useState18(() => playbackLogging({
@@ -7415,8 +7363,6 @@ var Internals = {
   CurrentScaleContext,
   PreviewSizeContext,
   calculateScale,
-  editorPropsProviderRef,
-  PROPS_UPDATED_EXTERNALLY,
   validateRenderAsset,
   Log,
   LogLevelContext,
@@ -8100,7 +8046,7 @@ var VideoForRenderingForwardFunction = ({
     sequenceContext?.relativeFrom,
     audioStreamIndex
   ]);
-  useImperativeHandle10(ref, () => {
+  useImperativeHandle9(ref, () => {
     return videoRef.current;
   }, []);
   useEffect17(() => {
@@ -23124,7 +23070,7 @@ var InstallsPerMonth = () => {
         },
         children: [
           /* @__PURE__ */ jsx50(StatItemContent, {
-            content: "900K",
+            content: "1.4M",
             width: "100px",
             fontSize: "2.5rem",
             fontWeight: "bold"
@@ -23176,7 +23122,7 @@ var PagesOfDocs = () => {
             width: "40px"
           }),
           /* @__PURE__ */ jsx50(StatItemContent, {
-            content: "700",
+            content: "800",
             width: "85px",
             maxWidth: "100px",
             fontSize: "2.5rem",
@@ -23232,7 +23178,7 @@ var GitHubStars = () => {
             width: "45px"
           }),
           /* @__PURE__ */ jsx50(StatItemContent, {
-            content: "39k",
+            content: "40k",
             width: "80px",
             fontSize: "2.5rem",
             fontWeight: "bold"
@@ -23268,7 +23214,7 @@ var DiscordMembers = () => {
           },
           children: [
             /* @__PURE__ */ jsx50(StatItemContent, {
-              content: "6000+",
+              content: "8000+",
               width: "142px",
               fontSize: "2.5rem",
               fontWeight: "bold"
@@ -23449,7 +23395,7 @@ import React103, {
   useCallback as useCallback112,
   useContext as useContext52,
   useEffect as useEffect122,
-  useImperativeHandle as useImperativeHandle11,
+  useImperativeHandle as useImperativeHandle10,
   useMemo as useMemo122,
   useRef as useRef112,
   useState as useState113
@@ -23646,6 +23592,10 @@ var PERCENTAGE2 = NUMBER2 + "%";
 function call(...args) {
   return "\\(\\s*(" + args.join(")\\s*,\\s*(") + ")\\s*\\)";
 }
+var MODERN_VALUE = "(?:none|[-+]?\\d*\\.?\\d+(?:%|deg|rad|grad|turn)?)";
+function modernColorCall(name) {
+  return new RegExp(name + "\\(\\s*(" + MODERN_VALUE + ")\\s+(" + MODERN_VALUE + ")\\s+(" + MODERN_VALUE + ")(?:\\s*\\/\\s*(" + MODERN_VALUE + "))?\\s*\\)");
+}
 function getMatchers() {
   const cachedMatchers = {
     rgb: undefined,
@@ -23656,7 +23606,12 @@ function getMatchers() {
     hex4: undefined,
     hex5: undefined,
     hex6: undefined,
-    hex8: undefined
+    hex8: undefined,
+    oklch: undefined,
+    oklab: undefined,
+    lab: undefined,
+    lch: undefined,
+    hwb: undefined
   };
   if (cachedMatchers.rgb === undefined) {
     cachedMatchers.rgb = new RegExp("rgb" + call(NUMBER2, NUMBER2, NUMBER2));
@@ -23667,6 +23622,11 @@ function getMatchers() {
     cachedMatchers.hex4 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
     cachedMatchers.hex6 = /^#([0-9a-fA-F]{6})$/;
     cachedMatchers.hex8 = /^#([0-9a-fA-F]{8})$/;
+    cachedMatchers.oklch = modernColorCall("oklch");
+    cachedMatchers.oklab = modernColorCall("oklab");
+    cachedMatchers.lab = modernColorCall("lab");
+    cachedMatchers.lch = modernColorCall("lch");
+    cachedMatchers.hwb = modernColorCall("hwb");
   }
   return cachedMatchers;
 }
@@ -23730,6 +23690,96 @@ function parsePercentage(str) {
   }
   return int / 100;
 }
+function parseModernComponent(str, percentScale) {
+  if (str === "none")
+    return 0;
+  if (str.endsWith("%")) {
+    return Number.parseFloat(str) / 100 * percentScale;
+  }
+  return Number.parseFloat(str);
+}
+function parseHueAngle(str) {
+  if (str === "none")
+    return 0;
+  if (str.endsWith("rad")) {
+    return Number.parseFloat(str) * 180 / Math.PI;
+  }
+  if (str.endsWith("grad"))
+    return Number.parseFloat(str) * 0.9;
+  if (str.endsWith("turn"))
+    return Number.parseFloat(str) * 360;
+  return Number.parseFloat(str);
+}
+function parseModernAlpha(str) {
+  if (str === undefined || str === "none")
+    return 1;
+  if (str.endsWith("%")) {
+    return Math.max(0, Math.min(1, Number.parseFloat(str) / 100));
+  }
+  return Math.max(0, Math.min(1, Number.parseFloat(str)));
+}
+function linearToSrgb(c) {
+  if (c <= 0.0031308)
+    return 12.92 * c;
+  return 1.055 * c ** (1 / 2.4) - 0.055;
+}
+function clamp01(v) {
+  return Math.max(0, Math.min(1, v));
+}
+function rgbFloatToInt(r2, g, b, alpha) {
+  const ri = Math.round(clamp01(r2) * 255);
+  const gi = Math.round(clamp01(g) * 255);
+  const bi = Math.round(clamp01(b) * 255);
+  const ai = Math.round(clamp01(alpha) * 255);
+  return (ri << 24 | gi << 16 | bi << 8 | ai) >>> 0;
+}
+function oklabToSrgb(L, a, b) {
+  const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+  const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+  const s_ = L - 0.0894841775 * a - 1.291485548 * b;
+  const l = l_ * l_ * l_;
+  const m = m_ * m_ * m_;
+  const s = s_ * s_ * s_;
+  const rLin = 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s;
+  const gLin = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s;
+  const bLin = -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s;
+  return [linearToSrgb(rLin), linearToSrgb(gLin), linearToSrgb(bLin)];
+}
+function labToSrgb(L, a, b) {
+  const epsilon = 216 / 24389;
+  const kappa = 24389 / 27;
+  const Xn = 0.95047;
+  const Yn = 1;
+  const Zn = 1.08883;
+  const fy = (L + 16) / 116;
+  const fx = a / 500 + fy;
+  const fz = fy - b / 200;
+  const fx3 = fx * fx * fx;
+  const fz3 = fz * fz * fz;
+  const xr = fx3 > epsilon ? fx3 : (116 * fx - 16) / kappa;
+  const yr = L > kappa * epsilon ? ((L + 16) / 116) ** 3 : L / kappa;
+  const zr = fz3 > epsilon ? fz3 : (116 * fz - 16) / kappa;
+  const X = xr * Xn;
+  const Y = yr * Yn;
+  const Z = zr * Zn;
+  const rLin = 3.2404542 * X - 1.5371385 * Y - 0.4985314 * Z;
+  const gLin = -0.969266 * X + 1.8760108 * Y + 0.041556 * Z;
+  const bLin = 0.0556434 * X - 0.2040259 * Y + 1.0572252 * Z;
+  return [linearToSrgb(rLin), linearToSrgb(gLin), linearToSrgb(bLin)];
+}
+function hwbToSrgb(h, w, bk) {
+  if (w + bk >= 1) {
+    const gray = w / (w + bk);
+    return [gray, gray, gray];
+  }
+  const q = 1;
+  const p = 0;
+  const r2 = hue2rgb(p, q, h + 1 / 3);
+  const g = hue2rgb(p, q, h);
+  const bl = hue2rgb(p, q, h - 1 / 3);
+  const factor = 1 - w - bk;
+  return [r2 * factor + w, g * factor + w, bl * factor + w];
+}
 var colorNames = {
   transparent: 0,
   aliceblue: 4042850303,
@@ -23928,6 +23978,58 @@ function normalizeColor(color) {
       return (hslToRgb(parse360(match[1]), parsePercentage(match[2]), parsePercentage(match[3])) | parse1(match[4])) >>> 0;
     }
   }
+  if (matchers.oklch) {
+    if (match = matchers.oklch.exec(color)) {
+      const L = parseModernComponent(match[1], 1);
+      const C = parseModernComponent(match[2], 0.4);
+      const H = parseHueAngle(match[3]);
+      const alpha = parseModernAlpha(match[4]);
+      const hRad = H * Math.PI / 180;
+      const [r2, g, b] = oklabToSrgb(L, C * Math.cos(hRad), C * Math.sin(hRad));
+      return rgbFloatToInt(r2, g, b, alpha);
+    }
+  }
+  if (matchers.oklab) {
+    if (match = matchers.oklab.exec(color)) {
+      const L = parseModernComponent(match[1], 1);
+      const a = parseModernComponent(match[2], 0.4);
+      const b = parseModernComponent(match[3], 0.4);
+      const alpha = parseModernAlpha(match[4]);
+      const [r2, g, bl] = oklabToSrgb(L, a, b);
+      return rgbFloatToInt(r2, g, bl, alpha);
+    }
+  }
+  if (matchers.lab) {
+    if (match = matchers.lab.exec(color)) {
+      const L = parseModernComponent(match[1], 100);
+      const a = parseModernComponent(match[2], 125);
+      const b = parseModernComponent(match[3], 125);
+      const alpha = parseModernAlpha(match[4]);
+      const [r2, g, bl] = labToSrgb(L, a, b);
+      return rgbFloatToInt(r2, g, bl, alpha);
+    }
+  }
+  if (matchers.lch) {
+    if (match = matchers.lch.exec(color)) {
+      const L = parseModernComponent(match[1], 100);
+      const C = parseModernComponent(match[2], 150);
+      const H = parseHueAngle(match[3]);
+      const alpha = parseModernAlpha(match[4]);
+      const hRad = H * Math.PI / 180;
+      const [r2, g, bl] = labToSrgb(L, C * Math.cos(hRad), C * Math.sin(hRad));
+      return rgbFloatToInt(r2, g, bl, alpha);
+    }
+  }
+  if (matchers.hwb) {
+    if (match = matchers.hwb.exec(color)) {
+      const H = parseHueAngle(match[1]);
+      const W = parseModernComponent(match[2], 1);
+      const B = parseModernComponent(match[3], 1);
+      const alpha = parseModernAlpha(match[4]);
+      const [r2, g, bl] = hwbToSrgb(H / 360, W, B);
+      return rgbFloatToInt(r2, g, bl, alpha);
+    }
+  }
   throw new Error(`invalid color string ${color} provided`);
 }
 function processColor(color) {
@@ -26557,7 +26659,7 @@ var PlayerUI = ({
       stopped = true;
     };
   }, [bufferStateDelayInMilliseconds, player.emitter]);
-  useImperativeHandle11(ref, () => {
+  useImperativeHandle10(ref, () => {
     const methods = {
       play: player.play,
       pause: () => {
@@ -33893,7 +33995,7 @@ import {
   forwardRef as forwardRef34,
   useCallback as useCallback36,
   useEffect as useEffect46,
-  useImperativeHandle as useImperativeHandle13,
+  useImperativeHandle as useImperativeHandle12,
   useRef as useRef46
 } from "react";
 
@@ -34208,7 +34310,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
       transforms: transforms.current
     });
   }, []);
-  useImperativeHandle13(ref, () => {
+  useImperativeHandle12(ref, () => {
     return {
       onLeft,
       onRight
@@ -34818,7 +34920,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.438";
+var VERSION2 = "4.0.439";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -34826,7 +34928,7 @@ import { AudioSampleSource } from "mediabunny";
 import { createRef as createRef6 } from "react";
 import { flushSync as flushSync22 } from "react-dom";
 import ReactDOM6 from "react-dom/client";
-import { useImperativeHandle as useImperativeHandle14, useState as useState48 } from "react";
+import { useImperativeHandle as useImperativeHandle13, useState as useState48 } from "react";
 import { flushSync as flushSync3 } from "react-dom";
 import { jsx as jsx88 } from "react/jsx-runtime";
 import { jsx as jsx217 } from "react/jsx-runtime";
@@ -35384,7 +35486,7 @@ var UpdateTime = ({
   timeUpdater
 }) => {
   const [frame, setFrame] = useState48(initialFrame);
-  useImperativeHandle14(timeUpdater, () => ({
+  useImperativeHandle13(timeUpdater, () => ({
     update: (f) => {
       flushSync3(() => {
         setFrame(f);
@@ -36227,6 +36329,48 @@ var parseDirection = (directionStr) => {
   }
   return 180;
 };
+var cssColorToRgba = (color) => {
+  try {
+    const packed = NoReactInternals.processColor(color);
+    const a = (packed >>> 24 & 255) / 255;
+    const r2 = packed >>> 16 & 255;
+    const g = packed >>> 8 & 255;
+    const b = packed & 255;
+    return { r: r2, g, b, a };
+  } catch {
+    return null;
+  }
+};
+var isFullyTransparent = (color) => {
+  const rgba2 = cssColorToRgba(color);
+  return rgba2 !== null && rgba2.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 rgba2 = cssColorToRgba(neighbor);
+      if (rgba2) {
+        stops[i].color = `rgba(${rgba2.r}, ${rgba2.g}, ${rgba2.b}, 0)`;
+      }
+    }
+  }
+};
 var parseColorStops = (colorStopsStr) => {
   const parts = colorStopsStr.split(/,(?![^(]*\))/);
   const stops = [];
@@ -36310,6 +36454,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) => {
@@ -40046,7 +40191,7 @@ var ClearButton = (props) => {
 
 // src/components/homepage/MuxVideo.tsx
 import Hls2 from "hls.js";
-import { forwardRef as forwardRef37, useEffect as useEffect58, useImperativeHandle as useImperativeHandle15, useRef as useRef53 } from "react";
+import { forwardRef as forwardRef37, useEffect as useEffect58, useImperativeHandle as useImperativeHandle14, useRef as useRef53 } from "react";
 
 // src/components/homepage/VideoPlayerWithControls.tsx
 import Hls from "hls.js";
@@ -40158,7 +40303,7 @@ var getVideoToPlayUrl = (muxId) => {
 var MuxVideoForward = ({ muxId, ...props }, ref) => {
   const videoRef = useRef53(null);
   const vidUrl = getVideoToPlayUrl(muxId);
-  useImperativeHandle15(ref, () => videoRef.current, []);
+  useImperativeHandle14(ref, () => videoRef.current, []);
   useEffect58(() => {
     let hls;
     if (videoRef.current) {
@@ -42515,7 +42660,7 @@ var GithubButton = () => {
       " ",
       /* @__PURE__ */ jsx164("div", {
         className: "text-xs inline-block ml-2 leading-none mt-[3px] self-center",
-        children: "39k"
+        children: "40k"
       })
     ]
   });