@remotion/promo-pages 4.0.438 → 4.0.440

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,19 +886,20 @@ import {
   forwardRef as forwardRef8,
   useCallback as useCallback13,
   useContext as useContext29,
-  useImperativeHandle as useImperativeHandle7,
+  useImperativeHandle as useImperativeHandle6,
   useLayoutEffect as useLayoutEffect9,
-  useRef as useRef17
+  useRef as useRef17,
+  useState as useState15
 } from "react";
 import { jsx as jsx24 } from "react/jsx-runtime";
 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
+  useState as useState16
 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
 import React25 from "react";
@@ -913,7 +909,7 @@ import { jsx as jsx26 } from "react/jsx-runtime";
 import { jsx as jsx27 } from "react/jsx-runtime";
 import React27 from "react";
 import React28, { createContext as createContext21 } from "react";
-import { useContext as useContext31, useMemo as useMemo29, useState as useState16 } from "react";
+import { useContext as useContext31, useMemo as useMemo29, useState as useState17 } from "react";
 import { useContext as useContext32 } from "react";
 import { useCallback as useCallback16 } from "react";
 import {
@@ -922,17 +918,17 @@ import {
   useEffect as useEffect14,
   useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo30,
-  useState as useState17
+  useState as useState18
 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 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
+  useState as useState19
 } from "react";
 import { useEffect as useEffect15 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
@@ -951,7 +947,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 +999,7 @@ var useIsPlayer = () => {
 function truthy(value) {
   return Boolean(value);
 }
-var VERSION = "4.0.438";
+var VERSION = "4.0.440";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -1524,9 +1520,6 @@ var CompositionSetters = createContext7({
   setCanvasContent: () => {
     return;
   },
-  updateCompositionDefaultProps: () => {
-    return;
-  },
   onlyRenderComposition: null
 });
 var getKey = () => {
@@ -1646,12 +1639,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 +1656,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 +1721,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 +2491,7 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style }, ref
       height: canvasHeight
     }));
   }, [fit, height, width]);
-  useImperativeHandle2(ref, () => {
+  useImperativeHandle(ref, () => {
     return {
       draw,
       getCanvas: () => {
@@ -2718,7 +2690,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 +2816,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
     setRenderAssets(renderAssetsRef.current);
   }, []);
   if (collectAssets) {
-    useImperativeHandle4(collectAssets, () => {
+    useImperativeHandle3(collectAssets, () => {
       return {
         collectAssets: () => {
           const assets = renderAssetsRef.current;
@@ -4118,6 +4090,76 @@ var useBasicMediaInTimeline = ({
     finalDisplayName: displayName ?? getAssetDisplayName(src)
   };
 };
+var useImageInTimeline = ({
+  src,
+  displayName,
+  id,
+  stack,
+  showInTimeline,
+  premountDisplay,
+  postmountDisplay,
+  loopDisplay
+}) => {
+  const parentSequence = useContext19(SequenceContext);
+  const { registerSequence, unregisterSequence } = useContext19(SequenceManager);
+  const { duration, nonce, rootId, isStudio, finalDisplayName } = useBasicMediaInTimeline({
+    volume: undefined,
+    mediaVolume: 0,
+    mediaType: "image",
+    src,
+    displayName,
+    trimAfter: undefined,
+    trimBefore: undefined,
+    playbackRate: 1
+  });
+  useEffect4(() => {
+    if (!src) {
+      throw new Error("No src passed");
+    }
+    if (!isStudio && window.process?.env?.NODE_ENV !== "test") {
+      return;
+    }
+    if (!showInTimeline) {
+      return;
+    }
+    registerSequence({
+      type: "image",
+      src,
+      id,
+      duration,
+      from: 0,
+      parent: parentSequence?.id ?? null,
+      displayName: finalDisplayName,
+      rootId,
+      showInTimeline: true,
+      nonce: nonce.get(),
+      loopDisplay,
+      stack,
+      premountDisplay,
+      postmountDisplay,
+      controls: null
+    });
+    return () => {
+      unregisterSequence(id);
+    };
+  }, [
+    duration,
+    id,
+    parentSequence,
+    src,
+    registerSequence,
+    unregisterSequence,
+    nonce,
+    stack,
+    showInTimeline,
+    premountDisplay,
+    postmountDisplay,
+    isStudio,
+    loopDisplay,
+    rootId,
+    finalDisplayName
+  ]);
+};
 var useMediaInTimeline = ({
   volume,
   mediaVolume,
@@ -5275,7 +5317,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
       });
     };
   }, [cleanupOnMediaTagUnmount]);
-  useImperativeHandle5(ref, () => {
+  useImperativeHandle4(ref, () => {
     return audioRef.current;
   }, [audioRef]);
   const currentOnDurationCallback = useRef14(onDuration);
@@ -5346,7 +5388,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useImperativeHandle6(ref, () => {
+  useImperativeHandle5(ref, () => {
     return audioRef.current;
   }, []);
   useEffect11(() => {
@@ -5775,13 +5817,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;
@@ -5869,12 +5904,16 @@ var ImgRefForwarding = ({
   delayRenderTimeoutInMilliseconds,
   onImageFrame,
   crossOrigin,
+  showInTimeline,
+  name,
+  stack,
   ...props2
 }, ref) => {
   const imageRef = useRef17(null);
   const errors = useRef17({});
   const { delayPlayback } = useBufferState();
   const sequenceContext = useContext29(SequenceContext);
+  const [timelineId] = useState15(() => String(Math.random()));
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
   }
@@ -5882,9 +5921,19 @@ var ImgRefForwarding = ({
   if (!_propsValid) {
     throw new Error("typecheck error");
   }
-  useImperativeHandle7(ref, () => {
+  useImperativeHandle6(ref, () => {
     return imageRef.current;
   }, []);
+  useImageInTimeline({
+    src,
+    displayName: name ?? null,
+    id: timelineId,
+    stack: stack ?? null,
+    showInTimeline: showInTimeline ?? true,
+    premountDisplay: sequenceContext?.premountDisplay ?? null,
+    postmountDisplay: sequenceContext?.postmountDisplay ?? null,
+    loopDisplay: undefined
+  });
   const actualSrc = usePreload(src);
   const retryIn = useCallback13((timeout) => {
     if (!imageRef.current) {
@@ -6007,6 +6056,7 @@ var ImgRefForwarding = ({
   });
 };
 var Img = forwardRef8(ImgRefForwarding);
+addSequenceStackTraces(Img);
 var compositionsRef = React24.createRef();
 var CompositionManagerProvider = ({
   children,
@@ -6015,9 +6065,9 @@ var CompositionManagerProvider = ({
   initialCompositions,
   initialCanvasContent
 }) => {
-  const [folders, setFolders] = useState15([]);
-  const [canvasContent, setCanvasContent] = useState15(initialCanvasContent);
-  const [compositions, setCompositions] = useState15(initialCompositions);
+  const [folders, setFolders] = useState16([]);
+  const [canvasContent, setCanvasContent] = useState16(initialCanvasContent);
+  const [compositions, setCompositions] = useState16(initialCompositions);
   const currentcompositionsRef = useRef18(compositions);
   const updateCompositions = useCallback14((updateComps) => {
     setCompositions((comps) => {
@@ -6056,25 +6106,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 +6118,6 @@ var CompositionManagerProvider = ({
       registerFolder,
       unregisterFolder,
       setCanvasContent,
-      updateCompositionDefaultProps,
       onlyRenderComposition
     };
   }, [
@@ -6090,7 +6125,6 @@ var CompositionManagerProvider = ({
     registerFolder,
     unregisterComposition,
     unregisterFolder,
-    updateCompositionDefaultProps,
     onlyRenderComposition
   ]);
   const compositionManagerContextValue = useMemo26(() => {
@@ -6297,6 +6331,7 @@ var validCodecs = [
   "h265",
   "vp8",
   "vp9",
+  "av1",
   "mp3",
   "aac",
   "wav",
@@ -6520,7 +6555,7 @@ var useSchema = (schema, currentValue) => {
   if (earlyReturn) {
     return earlyReturn;
   }
-  const [overrideId] = useState16(() => String(Math.random()));
+  const [overrideId] = useState17(() => String(Math.random()));
   const {
     visualModeEnabled,
     dragOverrides: overrides,
@@ -6549,7 +6584,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;
@@ -6690,7 +6725,7 @@ var OffthreadVideoForRendering = ({
       toneMapped
     });
   }, [toneMapped, currentTime, src, transparent]);
-  const [imageSrc, setImageSrc] = useState17(null);
+  const [imageSrc, setImageSrc] = useState18(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   useLayoutEffect10(() => {
     if (!window.remotion_videoEnabled) {
@@ -6879,7 +6914,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const { hidden } = useContext34(SequenceVisibilityToggleContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
-  const [timelineId] = useState18(() => String(Math.random()));
+  const [timelineId] = useState19(() => String(Math.random()));
   const isSequenceHidden = hidden[timelineId] ?? false;
   if (typeof acceptableTimeShift !== "undefined") {
     throw new Error("acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.");
@@ -6942,10 +6977,10 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     duration,
     fps
   });
-  useImperativeHandle9(ref, () => {
+  useImperativeHandle8(ref, () => {
     return videoRef.current;
   }, []);
-  useState18(() => playbackLogging({
+  useState19(() => playbackLogging({
     logLevel,
     message: `Mounting video with source = ${actualSrc}, v=${VERSION}, user agent=${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
     tag: "video",
@@ -7415,8 +7450,6 @@ var Internals = {
   CurrentScaleContext,
   PreviewSizeContext,
   calculateScale,
-  editorPropsProviderRef,
-  PROPS_UPDATED_EXTERNALLY,
   validateRenderAsset,
   Log,
   LogLevelContext,
@@ -8100,7 +8133,7 @@ var VideoForRenderingForwardFunction = ({
     sequenceContext?.relativeFrom,
     audioStreamIndex
   ]);
-  useImperativeHandle10(ref, () => {
+  useImperativeHandle9(ref, () => {
     return videoRef.current;
   }, []);
   useEffect17(() => {
@@ -10115,7 +10148,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React6, { useEffect as useEffect18, useMemo as useMemo39, useState as useState19 } from "react";
+import React6, { useEffect as useEffect18, useMemo as useMemo39, useState as useState20 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -14718,7 +14751,7 @@ var getAngle = (ref, coordinates) => {
 };
 var lastCoordinates = null;
 var useMousePosition = (ref) => {
-  const [angle, setAngle] = useState19(getAngle(ref.current, lastCoordinates));
+  const [angle, setAngle] = useState20(getAngle(ref.current, lastCoordinates));
   useEffect18(() => {
     const element = ref.current;
     if (!element) {
@@ -22343,10 +22376,10 @@ function cn2(...inputs) {
 }
 
 // src/components/homepage/InfoTooltip.tsx
-import { useState as useState38 } from "react";
+import { useState as useState39 } from "react";
 import { jsx as jsx44, jsxs as jsxs7 } from "react/jsx-runtime";
 var InfoTooltip = ({ children }) => {
-  const [isVisible, setIsVisible] = useState38(false);
+  const [isVisible, setIsVisible] = useState39(false);
   return /* @__PURE__ */ jsxs7("span", {
     className: "relative inline-block ml-1 text-gray-600 cursor-default",
     onPointerEnter: () => setIsVisible(true),
@@ -23124,7 +23157,7 @@ var InstallsPerMonth = () => {
         },
         children: [
           /* @__PURE__ */ jsx50(StatItemContent, {
-            content: "900K",
+            content: "1.4M",
             width: "100px",
             fontSize: "2.5rem",
             fontWeight: "bold"
@@ -23176,7 +23209,7 @@ var PagesOfDocs = () => {
             width: "40px"
           }),
           /* @__PURE__ */ jsx50(StatItemContent, {
-            content: "700",
+            content: "800",
             width: "85px",
             maxWidth: "100px",
             fontSize: "2.5rem",
@@ -23232,7 +23265,7 @@ var GitHubStars = () => {
             width: "45px"
           }),
           /* @__PURE__ */ jsx50(StatItemContent, {
-            content: "39k",
+            content: "40k",
             width: "80px",
             fontSize: "2.5rem",
             fontWeight: "bold"
@@ -23268,7 +23301,7 @@ var DiscordMembers = () => {
           },
           children: [
             /* @__PURE__ */ jsx50(StatItemContent, {
-              content: "6000+",
+              content: "8000+",
               width: "142px",
               fontSize: "2.5rem",
               fontWeight: "bold"
@@ -23424,7 +23457,7 @@ var CommunityStats_default = CommunityStats;
 import { jsx as jsx56, jsxs as jsxs14 } from "react/jsx-runtime";
 import { jsx as jsx214, jsxs as jsxs24, Fragment as Fragment9 } from "react/jsx-runtime";
 import React55 from "react";
-import { useContext as useContext210, useEffect as useEffect40, useState as useState39 } from "react";
+import { useContext as useContext210, useEffect as useEffect40, useState as useState40 } from "react";
 import { useContext as useContext43, useLayoutEffect as useLayoutEffect16 } from "react";
 import { jsx as jsx312 } from "react/jsx-runtime";
 import { useCallback as useCallback31, useRef as useRef38 } from "react";
@@ -23449,7 +23482,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 +23679,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 +23693,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 +23709,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 +23777,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 +24065,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) {
@@ -23972,6 +24161,7 @@ var validCodecs2 = [
   "h265",
   "vp8",
   "vp9",
+  "av1",
   "mp3",
   "aac",
   "wav",
@@ -24580,7 +24770,7 @@ var useBufferStateEmitter = (emitter) => {
   }, [bufferManager, emitter]);
 };
 var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
-  const [emitter] = useState39(() => new PlayerEmitter);
+  const [emitter] = useState40(() => new PlayerEmitter);
   const bufferManager = useContext210(Internals.BufferingContextReact);
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
@@ -26557,7 +26747,7 @@ var PlayerUI = ({
       stopped = true;
     };
   }, [bufferStateDelayInMilliseconds, player.emitter]);
-  useImperativeHandle11(ref, () => {
+  useImperativeHandle10(ref, () => {
     const methods = {
       play: player.play,
       pause: () => {
@@ -27538,7 +27728,7 @@ import {
   useEffect as useEffect56,
   useMemo as useMemo61,
   useRef as useRef50,
-  useState as useState54
+  useState as useState56
 } from "react";
 
 // ../../node_modules/.bun/@babel+runtime@7.27.1/node_modules/@babel/runtime/helpers/esm/extends.js
@@ -28318,7 +28508,7 @@ import { AudioBufferSink, InputDisposedError } from "mediabunny";
 import { CanvasSink } from "mediabunny";
 import { useMemo as useMemo51 } from "react";
 import { useContext as useContext47, useLayoutEffect as useLayoutEffect17 } from "react";
-import { useContext as useContext212, useState as useState40, useEffect as useEffect41 } from "react";
+import { useContext as useContext212, useState as useState41, useEffect as useEffect41 } from "react";
 import { jsx as jsx58 } from "react/jsx-runtime";
 import { useContext as useContext46, useLayoutEffect as useLayoutEffect24, useMemo as useMemo310, useState as useState312 } from "react";
 import React211 from "react";
@@ -30206,8 +30396,8 @@ var useMediaInTimeline2 = ({
   const parentSequence = useContext212(Internals.SequenceContext);
   const startsAt = Internals.useMediaStartsAt();
   const { registerSequence, unregisterSequence } = useContext212(Internals.SequenceManager);
-  const [sequenceId] = useState40(() => String(Math.random()));
-  const [mediaId] = useState40(() => String(Math.random()));
+  const [sequenceId] = useState41(() => String(Math.random()));
+  const [mediaId] = useState41(() => String(Math.random()));
   const frame = useCurrentFrame();
   const {
     volumes,
@@ -33518,7 +33708,7 @@ var Video = Internals.wrapInSchema(VideoInner, videoSchema);
 Internals.addSequenceStackTraces(Video);
 
 // src/components/homepage/Demo/Comp.tsx
-import { useCallback as useCallback38, useEffect as useEffect48, useMemo as useMemo57, useState as useState47 } from "react";
+import { useCallback as useCallback38, useEffect as useEffect48, useMemo as useMemo57, useState as useState48 } from "react";
 
 // src/components/homepage/Demo/Cards.tsx
 import {
@@ -33526,7 +33716,7 @@ import {
   useCallback as useCallback37,
   useEffect as useEffect47,
   useRef as useRef47,
-  useState as useState46
+  useState as useState47
 } from "react";
 
 // src/components/homepage/Demo/Card.tsx
@@ -33893,13 +34083,13 @@ import {
   forwardRef as forwardRef34,
   useCallback as useCallback36,
   useEffect as useEffect46,
-  useImperativeHandle as useImperativeHandle13,
+  useImperativeHandle as useImperativeHandle12,
   useRef as useRef46
 } from "react";
 
 // ../lottie/dist/esm/index.mjs
 import lottie from "lottie-web";
-import { useEffect as useEffect43, useRef as useRef45, useState as useState41 } from "react";
+import { useEffect as useEffect43, useRef as useRef45, useState as useState44 } from "react";
 import { jsx as jsx69 } from "react/jsx-runtime";
 var getLottieMetadata = (animationData) => {
   const width2 = animationData.w;
@@ -33974,7 +34164,7 @@ var Lottie = ({
   const onAnimationLoadedRef = useRef45(onAnimationLoaded);
   onAnimationLoadedRef.current = onAnimationLoaded;
   const { delayRender, continueRender } = useDelayRender();
-  const [handle] = useState41(() => delayRender("Waiting for Lottie animation to load"));
+  const [handle] = useState44(() => delayRender("Waiting for Lottie animation to load"));
   useEffect43(() => {
     return () => {
       continueRender(handle);
@@ -34070,12 +34260,12 @@ var Lottie = ({
 };
 
 // src/components/homepage/Demo/DisplayedEmoji.tsx
-import { useEffect as useEffect45, useMemo as useMemo54, useState as useState44 } from "react";
+import { useEffect as useEffect45, useMemo as useMemo54, useState as useState46 } from "react";
 import { jsx as jsx70 } from "react/jsx-runtime";
 var DisplayedEmoji = ({ emoji }) => {
-  const [data, setData] = useState44(null);
+  const [data, setData] = useState46(null);
   const { durationInFrames, fps } = useVideoConfig();
-  const [browser, setBrowser] = useState44(typeof document !== "undefined");
+  const [browser, setBrowser] = useState46(typeof document !== "undefined");
   const { delayRender, continueRender, cancelRender: cancelRender2 } = useDelayRender();
   const src = useMemo54(() => {
     if (emoji === "melting") {
@@ -34089,7 +34279,7 @@ var DisplayedEmoji = ({ emoji }) => {
     }
     throw new Error("Unknown emoji");
   }, [emoji]);
-  const [handle] = useState44(() => delayRender("Loading emojis!"));
+  const [handle] = useState46(() => delayRender("Loading emojis!"));
   useEffect45(() => {
     fetch(src).then((res) => res.json()).then((json) => {
       setData({
@@ -34208,7 +34398,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
       transforms: transforms.current
     });
   }, []);
-  useImperativeHandle13(ref, () => {
+  useImperativeHandle12(ref, () => {
     return {
       onLeft,
       onRight
@@ -34621,7 +34811,7 @@ var Cards = ({
   trending
 }) => {
   const container4 = useRef47(null);
-  const [refs] = useState46(() => {
+  const [refs] = useState47(() => {
     return new Array(4).fill(true).map(() => {
       return createRef4();
     });
@@ -34719,7 +34909,7 @@ var HomepageVideoComp = ({
   onClickLeft,
   onClickRight
 }) => {
-  const [rerenders, setRerenders] = useState47(0);
+  const [rerenders, setRerenders] = useState48(0);
   const onUpdate = useCallback38((newIndices) => {
     setRerenders(rerenders + 1);
     updateCardOrder(newIndices);
@@ -34818,7 +35008,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.438";
+var VERSION2 = "4.0.440";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -34826,7 +35016,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 useState49 } 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";
@@ -35383,8 +35573,8 @@ var UpdateTime = ({
   initialFrame,
   timeUpdater
 }) => {
-  const [frame, setFrame] = useState48(initialFrame);
-  useImperativeHandle14(timeUpdater, () => ({
+  const [frame, setFrame] = useState49(initialFrame);
+  useImperativeHandle13(timeUpdater, () => ({
     update: (f) => {
       flushSync3(() => {
         setFrame(f);
@@ -36227,6 +36417,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 +36542,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) => {
@@ -39261,12 +39494,12 @@ var DragAndDropNudge = () => {
 };
 
 // src/components/homepage/Demo/PlayerSeekBar.tsx
-import { useCallback as useCallback41, useEffect as useEffect50, useMemo as useMemo60, useRef as useRef48, useState as useState50 } from "react";
+import { useCallback as useCallback41, useEffect as useEffect50, useMemo as useMemo60, useRef as useRef48, useState as useState51 } from "react";
 
 // src/components/homepage/layout/use-el-size.ts
-import { useCallback as useCallback40, useEffect as useEffect49, useMemo as useMemo59, useState as useState49 } from "react";
+import { useCallback as useCallback40, useEffect as useEffect49, useMemo as useMemo59, useState as useState50 } from "react";
 var useElementSize2 = (ref) => {
-  const [size4, setSize] = useState49(null);
+  const [size4, setSize] = useState50(null);
   const observer = useMemo59(() => {
     if (typeof ResizeObserver === "undefined") {
       return;
@@ -39343,7 +39576,7 @@ var findBodyInWhichDivIsLocated2 = (div) => {
   return current;
 };
 var useHoverState2 = (ref, hideControlsWhenPointerDoesntMove) => {
-  const [hovered, setHovered] = useState50(false);
+  const [hovered, setHovered] = useState51(false);
   useEffect50(() => {
     const { current } = ref;
     if (!current) {
@@ -39393,8 +39626,8 @@ var PlayerSeekBar2 = ({
   const containerRef = useRef48(null);
   const barHovered = useHoverState2(containerRef, false);
   const size4 = useElementSize2(containerRef.current);
-  const [playing, setPlaying] = useState50(false);
-  const [frame, setFrame] = useState50(0);
+  const [playing, setPlaying] = useState51(false);
+  const [frame, setFrame] = useState51(0);
   useEffect50(() => {
     const { current } = playerRef;
     if (!current) {
@@ -39426,7 +39659,7 @@ var PlayerSeekBar2 = ({
       current.removeEventListener("pause", onPause);
     };
   }, [playerRef]);
-  const [dragging, setDragging] = useState50({
+  const [dragging, setDragging] = useState51({
     dragging: false
   });
   const width2 = size4?.width ?? 0;
@@ -39539,7 +39772,7 @@ var PlayerSeekBar2 = ({
 };
 
 // src/components/homepage/Demo/PlayerVolume.tsx
-import { useCallback as useCallback43, useEffect as useEffect51, useRef as useRef49, useState as useState51 } from "react";
+import { useCallback as useCallback43, useEffect as useEffect51, useRef as useRef49, useState as useState54 } from "react";
 
 // src/components/homepage/Demo/icons.tsx
 import { jsx as jsx101 } from "react/jsx-runtime";
@@ -39597,8 +39830,8 @@ var IsMutedIcon = (props) => {
 // src/components/homepage/Demo/PlayerVolume.tsx
 import { jsx as jsx105 } from "react/jsx-runtime";
 var PlayerVolume = ({ playerRef }) => {
-  const [muted, setIsMuted] = useState51(() => playerRef.current?.isMuted() ?? true);
-  const [isHovered, setIsHovered] = useState51(false);
+  const [muted, setIsMuted] = useState54(() => playerRef.current?.isMuted() ?? true);
+  const [isHovered, setIsHovered] = useState54(false);
   const timerRef = useRef49(null);
   useEffect51(() => {
     const { current } = playerRef;
@@ -39887,12 +40120,12 @@ var playerWrapper = {
 };
 var Demo = () => {
   const { colorMode } = useColorMode();
-  const [data2, setData] = useState54(null);
+  const [data2, setData] = useState56(null);
   const ref = useRef50(null);
-  const [isFullscreen, setIsFullscreen] = useState54(false);
-  const [cardOrder, setCardOrder] = useState54([0, 1, 2, 3]);
-  const [emojiIndex, setEmojiIndex] = useState54(0);
-  const [error2, setError] = useState54(false);
+  const [isFullscreen, setIsFullscreen] = useState56(false);
+  const [cardOrder, setCardOrder] = useState56([0, 1, 2, 3]);
+  const [emojiIndex, setEmojiIndex] = useState56(0);
+  const [error2, setError] = useState56(false);
   useEffect56(() => {
     getDataAndProps().then((d2) => {
       setData(d2);
@@ -40046,12 +40279,12 @@ 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";
 import"plyr/dist/plyr.css";
-import { forwardRef as forwardRef36, useCallback as useCallback47, useEffect as useEffect57, useRef as useRef51, useState as useState56 } from "react";
+import { forwardRef as forwardRef36, useCallback as useCallback47, useEffect as useEffect57, useRef as useRef51, useState as useState57 } from "react";
 import { jsx as jsx116 } from "react/jsx-runtime";
 var useCombinedRefs = function(...refs) {
   const targetRef = useRef51(null);
@@ -40072,7 +40305,7 @@ var VideoPlayerWithControls = forwardRef36(({ playbackId, poster, currentTime, o
   const videoRef = useRef51(null);
   const metaRef = useCombinedRefs(ref, videoRef);
   const playerRef = useRef51(null);
-  const [playerInitTime] = useState56(Date.now());
+  const [playerInitTime] = useState57(Date.now());
   const videoError = useCallback47((event) => onError(event), [onError]);
   const onImageLoad = useCallback47((event) => {
     const [w, h] = [event.target.width, event.target.height];
@@ -40158,7 +40391,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) {
@@ -40272,10 +40505,10 @@ var EditorStarterSection = () => {
 var EditorStarterSection_default = EditorStarterSection;
 
 // src/components/homepage/EvaluateRemotion.tsx
-import { useEffect as useEffect59, useState as useState57 } from "react";
+import { useEffect as useEffect59, useState as useState58 } from "react";
 import { jsx as jsx119, jsxs as jsxs41 } from "react/jsx-runtime";
 var EvaluateRemotionSection = () => {
-  const [dailyAvatars, setDailyAvatars] = useState57([]);
+  const [dailyAvatars, setDailyAvatars] = useState58([]);
   useEffect59(() => {
     const avatars = experts.map((expert) => expert.image);
     const selectedAvatars = [];
@@ -40373,7 +40606,7 @@ var EvaluateRemotionSection = () => {
 var EvaluateRemotion_default = EvaluateRemotionSection;
 
 // src/components/homepage/IfYouKnowReact.tsx
-import { useEffect as useEffect60, useState as useState58 } from "react";
+import { useEffect as useEffect60, useState as useState59 } from "react";
 import { jsx as jsx120, jsxs as jsxs44 } from "react/jsx-runtime";
 var isWebkit = () => {
   if (typeof window === "undefined") {
@@ -40388,7 +40621,7 @@ var icon2 = {
   marginLeft: 10
 };
 var IfYouKnowReact = () => {
-  const [vid, setVid] = useState58("/img/compose.webm");
+  const [vid, setVid] = useState59("/img/compose.webm");
   useEffect60(() => {
     if (isWebkit()) {
       setVid("/img/compose.mp4");
@@ -40448,12 +40681,12 @@ var IfYouKnowReact = () => {
 };
 
 // src/components/homepage/NewsletterButton.tsx
-import { useCallback as useCallback48, useState as useState59 } from "react";
+import { useCallback as useCallback48, useState as useState60 } from "react";
 import { jsx as jsx121, jsxs as jsxs46 } from "react/jsx-runtime";
 var NewsletterButton = () => {
-  const [email, setEmail] = useState59("");
-  const [submitting, setSubmitting] = useState59(false);
-  const [subscribed, setSubscribed] = useState59(false);
+  const [email, setEmail] = useState60("");
+  const [submitting, setSubmitting] = useState60(false);
+  const [subscribed, setSubscribed] = useState60(false);
   const handleSubmit = useCallback48(async (e) => {
     try {
       setSubmitting(true);
@@ -40536,7 +40769,7 @@ var NewsletterButton = () => {
 };
 
 // src/components/homepage/ParameterizeAndEdit.tsx
-import { useEffect as useEffect61, useRef as useRef55, useState as useState60 } from "react";
+import { useEffect as useEffect61, useRef as useRef55, useState as useState61 } from "react";
 import { jsx as jsx124, jsxs as jsxs47 } from "react/jsx-runtime";
 var icon3 = {
   height: 16,
@@ -40544,7 +40777,7 @@ var icon3 = {
 };
 var ParameterizeAndEdit = () => {
   const ref = useRef55(null);
-  const [vid, setVid] = useState60("/img/editing-vp9-chrome.webm");
+  const [vid, setVid] = useState61("/img/editing-vp9-chrome.webm");
   useEffect61(() => {
     if (isWebkit()) {
       setVid("/img/editing-safari.mp4");
@@ -40659,7 +40892,7 @@ var ParameterizeAndEdit = () => {
 };
 
 // src/components/homepage/RealMp4Videos.tsx
-import { useEffect as useEffect63, useRef as useRef56, useState as useState61 } from "react";
+import { useEffect as useEffect63, useRef as useRef56, useState as useState63 } from "react";
 import { jsx as jsx126, jsxs as jsxs48 } from "react/jsx-runtime";
 var icon4 = {
   height: 16,
@@ -40668,7 +40901,7 @@ var icon4 = {
 var RealMP4Videos = () => {
   const ref = useRef56(null);
   const videoRef = useRef56(null);
-  const [vid, setVid] = useState61("/img/render-progress.webm");
+  const [vid, setVid] = useState63("/img/render-progress.webm");
   useEffect63(() => {
     if (isWebkit()) {
       setVid("/img/render-progress.mp4");
@@ -40920,7 +41153,7 @@ var TrustedByBanner = () => {
 var TrustedByBanner_default = TrustedByBanner;
 
 // src/components/homepage/VideoAppsShowcase.tsx
-import { useRef as useRef57, useState as useState63 } from "react";
+import { useRef as useRef57, useState as useState65 } from "react";
 import { jsx as jsx128, jsxs as jsxs50 } from "react/jsx-runtime";
 var tabs = [
   "Music visualization",
@@ -40973,10 +41206,10 @@ var icon5 = {
   marginLeft: 10
 };
 var VideoAppsShowcase = () => {
-  const [activeTab, setActiveTab] = useState63(0);
-  const [isMuted, setIsMuted] = useState63(true);
-  const [isPlaying, setIsPlaying] = useState63(false);
-  const [videoLoaded, setVideoLoaded] = useState63(false);
+  const [activeTab, setActiveTab] = useState65(0);
+  const [isMuted, setIsMuted] = useState65(true);
+  const [isPlaying, setIsPlaying] = useState65(false);
+  const [videoLoaded, setVideoLoaded] = useState65(false);
   const videoRef = useRef57(null);
   const containerRef = useRef57(null);
   const handleTabChange = (index2) => {
@@ -42489,7 +42722,7 @@ var ChooseTemplate = () => {
 };
 
 // src/components/homepage/GetStartedStrip.tsx
-import { useState as useState65 } from "react";
+import { useState as useState66 } from "react";
 
 // src/components/homepage/GitHubButton.tsx
 import { jsx as jsx164, jsxs as jsxs66 } from "react/jsx-runtime";
@@ -42515,7 +42748,7 @@ var GithubButton = () => {
       " ",
       /* @__PURE__ */ jsx164("div", {
         className: "text-xs inline-block ml-2 leading-none mt-[3px] self-center",
-        children: "39k"
+        children: "40k"
       })
     ]
   });
@@ -42524,7 +42757,7 @@ var GithubButton = () => {
 // src/components/homepage/GetStartedStrip.tsx
 import { jsx as jsx166, jsxs as jsxs67 } from "react/jsx-runtime";
 var GetStarted = () => {
-  const [clicked, setClicked] = useState65(null);
+  const [clicked, setClicked] = useState66(null);
   return /* @__PURE__ */ jsxs67("div", {
     className: "flex flex-col lg:flex-row items-center justify-center text-center w-full",
     children: [