@remotion/promo-pages 4.0.482 → 4.0.484

package/dist/Homepage.js

@@ -2335,7 +2335,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.482";
+var VERSION = "4.0.484";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -3551,6 +3551,35 @@ function findRange(input, inputRange) {
   return i - 1;
 }
 var defaultEasing = (num) => num;
+var shouldExtendRightForEasing = (easing) => {
+  return easing.remotionShouldExtendRight === true;
+};
+var resolveEasingForSegment = ({
+  easing,
+  segmentIndex
+}) => {
+  if (easing === undefined) {
+    return defaultEasing;
+  }
+  if (typeof easing === "function") {
+    return easing;
+  }
+  return easing[segmentIndex];
+};
+var interpolateSegment = ({
+  input,
+  inputRange,
+  outputRange,
+  easing,
+  extrapolateLeft,
+  extrapolateRight
+}) => {
+  return interpolateFunction(input, inputRange, outputRange, {
+    easing,
+    extrapolateLeft,
+    extrapolateRight: input > inputRange[1] && extrapolateRight === "clamp" && shouldExtendRightForEasing(easing) ? "extend" : extrapolateRight
+  });
+};
 var interpolateNumber = ({
   input,
   inputRange,
@@ -3561,15 +3590,6 @@ var interpolateNumber = ({
     return outputRange[0];
   }
   const easingOption = options?.easing;
-  const resolveEasingForSegment = (segmentIndex) => {
-    if (easingOption === undefined) {
-      return defaultEasing;
-    }
-    if (typeof easingOption === "function") {
-      return easingOption;
-    }
-    return easingOption[segmentIndex];
-  };
   let extrapolateLeft = "extend";
   if (options?.extrapolateLeft !== undefined) {
     extrapolateLeft = options.extrapolateLeft;
@@ -3580,11 +3600,41 @@ var interpolateNumber = ({
   }
   const posterizedInput = options?.posterize === undefined ? input : Math.floor(input / options.posterize) * options.posterize;
   const range = findRange(posterizedInput, inputRange);
-  return interpolateFunction(posterizedInput, [inputRange[range], inputRange[range + 1]], [outputRange[range], outputRange[range + 1]], {
-    easing: resolveEasingForSegment(range),
+  const easing = resolveEasingForSegment({
+    easing: easingOption,
+    segmentIndex: range
+  });
+  let result = interpolateSegment({
+    input: posterizedInput,
+    inputRange: [inputRange[range], inputRange[range + 1]],
+    outputRange: [outputRange[range], outputRange[range + 1]],
+    easing,
     extrapolateLeft,
     extrapolateRight
   });
+  for (let segmentIndex = 0;segmentIndex < range; segmentIndex++) {
+    const previousEasing = resolveEasingForSegment({
+      easing: easingOption,
+      segmentIndex
+    });
+    if (!shouldExtendRightForEasing(previousEasing)) {
+      continue;
+    }
+    const previousSegmentEnd = inputRange[segmentIndex + 1];
+    if (posterizedInput <= previousSegmentEnd) {
+      continue;
+    }
+    const continuedSegmentValue = interpolateSegment({
+      input: posterizedInput,
+      inputRange: [inputRange[segmentIndex], previousSegmentEnd],
+      outputRange: [outputRange[segmentIndex], outputRange[segmentIndex + 1]],
+      easing: previousEasing,
+      extrapolateLeft,
+      extrapolateRight: "extend"
+    });
+    result += continuedSegmentValue - outputRange[segmentIndex + 1];
+  }
+  return result;
 };
 var interpolateString = ({
   input,
@@ -4058,21 +4108,40 @@ class Easing {
   static back(s = 1.70158) {
     return (t) => t * t * ((s + 1) * t - s);
   }
-  static spring(config = {}) {
-    return (t) => {
+  static spring({
+    allowTail = false,
+    durationRestThreshold,
+    ...config
+  } = {}) {
+    const easing = (t) => {
       if (t <= 0) {
         return 0;
       }
-      if (t >= 1) {
+      if (!allowTail && t >= 1) {
         return 1;
       }
+      if (allowTail) {
+        return spring({
+          fps: springEasingDurationInFrames,
+          frame: t * measureSpring({
+            fps: springEasingDurationInFrames,
+            config,
+            threshold: durationRestThreshold
+          }),
+          config
+        });
+      }
       return spring({
         fps: springEasingDurationInFrames,
         frame: t * springEasingDurationInFrames,
         config,
-        durationInFrames: springEasingDurationInFrames
+        durationInFrames: springEasingDurationInFrames,
+        durationRestThreshold
       });
     };
+    return Object.assign(easing, {
+      remotionShouldExtendRight: allowTail
+    });
   }
   static bounce(t) {
     const u = clampUnit(t);
@@ -4603,25 +4672,31 @@ var interpolateColors = (input, inputRange, outputRange, options) => {
   const processedOutputRange = outputRange.map((c2) => processColor(c2));
   return interpolateColorsRGB(input, inputRange, processedOutputRange, options);
 };
-var easingToFn = (e) => {
-  switch (e.type) {
+var easingToFn = ({
+  easing,
+  forceSpringAllowTail
+}) => {
+  switch (easing.type) {
     case "linear":
       return Easing.linear;
     case "spring":
       return Easing.spring({
-        damping: e.damping,
-        mass: e.mass,
-        overshootClamping: e.overshootClamping,
-        stiffness: e.stiffness
+        allowTail: forceSpringAllowTail ?? easing.allowTail ?? undefined,
+        damping: easing.damping,
+        durationRestThreshold: easing.durationRestThreshold ?? undefined,
+        mass: easing.mass,
+        overshootClamping: easing.overshootClamping,
+        stiffness: easing.stiffness
       });
     case "bezier":
-      return bezier(e.x1, e.y1, e.x2, e.y2);
+      return bezier(easing.x1, easing.y1, easing.x2, easing.y2);
     default:
-      throw new TypeError(`Unsupported easing: ${JSON.stringify(e)}`);
+      throw new TypeError(`Unsupported easing: ${JSON.stringify(easing)}`);
   }
 };
 var interpolateKeyframedStatus = ({
   frame,
+  forceSpringAllowTail,
   status
 }) => {
   const { keyframes, easing, clamping, interpolationFunction } = status;
@@ -4640,7 +4715,7 @@ var interpolateKeyframedStatus = ({
     }
     try {
       return interpolateColors(frame, inputRange, outputs, {
-        easing: easing.map(easingToFn),
+        easing: easing.map((e) => easingToFn({ easing: e, forceSpringAllowTail })),
         posterize: status.posterize
       });
     } catch {
@@ -4652,7 +4727,7 @@ var interpolateKeyframedStatus = ({
   }
   try {
     return interpolate(frame, inputRange, outputs, {
-      easing: easing.map(easingToFn),
+      easing: easing.map((e) => easingToFn({ easing: e, forceSpringAllowTail })),
       extrapolateLeft: clamping.left,
       extrapolateRight: clamping.right,
       posterize: status.posterize
@@ -4675,6 +4750,7 @@ var resolveDragOverrideValue = ({
     return { type: "none" };
   }
   const interpolated = interpolateKeyframedStatus({
+    forceSpringAllowTail: null,
     frame,
     status: dragOverrideValue.status
   });
@@ -4700,6 +4776,7 @@ var getEffectiveVisualModeValue = ({
   if (propStatus.status === "keyframed") {
     if (frame !== null) {
       return interpolateKeyframedStatus({
+        forceSpringAllowTail: null,
         frame,
         status: propStatus
       });
@@ -4768,6 +4845,7 @@ var resolvePropStatusOverrides = (propStatus, frame) => {
     }
     if (status.status === "keyframed") {
       const value = interpolateKeyframedStatus({
+        forceSpringAllowTail: null,
         frame,
         status
       });
@@ -4943,6 +5021,17 @@ var findPropsToDelete = ({
 var DEFAULT_LINEAR_EASING = {
   type: "linear"
 };
+var getEasingIndexToDuplicate = ({
+  insertedKeyframeIndex,
+  easingLength,
+  keyframeCount
+}) => {
+  const isSplittingExistingSegment = insertedKeyframeIndex > 0 && insertedKeyframeIndex < keyframeCount - 1;
+  if (!isSplittingExistingSegment || easingLength === 0) {
+    return null;
+  }
+  return Math.min(insertedKeyframeIndex - 1, easingLength - 1);
+};
 var makeStaticDragOverride = (value) => {
   return { type: "static", value };
 };
@@ -4954,6 +5043,16 @@ var makeKeyframedDragOverride = ({
   const existingIndex = status.keyframes.findIndex((keyframe) => keyframe.frame === frame);
   const keyframes = existingIndex === -1 ? [...status.keyframes, { frame, value }].sort((first, second) => first.frame - second.frame) : status.keyframes.map((keyframe, index) => index === existingIndex ? { frame, value } : keyframe);
   const easing = [...status.easing];
+  if (existingIndex === -1) {
+    const insertedKeyframeIndex = keyframes.findIndex((keyframe) => keyframe.frame === frame);
+    const easingIndexToDuplicate = getEasingIndexToDuplicate({
+      insertedKeyframeIndex,
+      easingLength: easing.length,
+      keyframeCount: keyframes.length
+    });
+    const easingToDuplicate = easingIndexToDuplicate === null ? DEFAULT_LINEAR_EASING : easing[easingIndexToDuplicate];
+    easing.splice(insertedKeyframeIndex, 0, easingToDuplicate);
+  }
   while (easing.length < keyframes.length - 1) {
     easing.push(DEFAULT_LINEAR_EASING);
   }
@@ -5025,6 +5124,7 @@ var computeEffectiveSchemaValuesDotNotation = ({
           value = dragOverride.value;
         } else if (frame !== null) {
           const interpolated = interpolateKeyframedStatus({
+            forceSpringAllowTail: null,
             frame,
             status
           });
@@ -9176,6 +9276,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
 var AudioForRendering = forwardRef6(AudioForRenderingRefForwardingFunction);
 var AudioRefForwardingFunction = (props, ref) => {
   const audioTagsContext = useContext30(SharedAudioTagsContext);
+  const propsWithFreeze = props;
   const {
     startFrom,
     endAt,
@@ -9186,14 +9287,18 @@ var AudioRefForwardingFunction = (props, ref) => {
     pauseWhenBuffering,
     showInTimeline,
     onError: onRemotionError,
+    freeze,
     ...otherProps
-  } = props;
-  const { loop, ...propsOtherThanLoop } = props;
+  } = propsWithFreeze;
+  const { loop, freeze: _freeze, ...propsOtherThanLoop } = propsWithFreeze;
   const { fps } = useVideoConfig();
   const environment = useRemotionEnvironment();
   if (environment.isClientSideRendering) {
     throw new Error("<Html5Audio> is not supported in @remotion/web-renderer. Use <Audio> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
   }
+  if (typeof freeze !== "undefined") {
+    throw new TypeError('The "freeze" prop is not supported on <Html5Audio />. Use <Sequence freeze={...}> to freeze media playback.');
+  }
   const { durations, setDurations } = useContext30(DurationsContext);
   if (typeof props.src !== "string") {
     throw new TypeError(`The \`<Html5Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
@@ -9532,6 +9637,10 @@ function resolveHtmlInCanvasPixelDensity(pixelDensity) {
   }
   return pixelDensity;
 }
+var isMissingPaintRecordError = (error2) => {
+  return error2 instanceof DOMException && error2.name === "InvalidStateError";
+};
+var missingPaintRecordMessage = "HtmlInCanvas: Expected the element to be inside the viewport during rendering, but Chrome had no cached paint record for it.";
 var resizeOffscreenCanvas = ({
   offscreen,
   width,
@@ -9575,6 +9684,7 @@ var HtmlInCanvasContent = forwardRef9(({
   const canvasWidth = Math.ceil(width * resolvedPixelDensity);
   const canvasHeight = Math.ceil(height * resolvedPixelDensity);
   const { continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
+  const { isRendering } = useRemotionEnvironment();
   if (!isHtmlInCanvasSupported()) {
     cancelRender2(new Error(HTML_IN_CANVAS_UNSUPPORTED_MESSAGE));
   }
@@ -9625,28 +9735,51 @@ var HtmlInCanvasContent = forwardRef9(({
       }
       const handle = delayRender("onPaint");
       if (!initializedRef.current) {
-        initializedRef.current = true;
-        const initImage = placeholderCanvas.captureElementImage(element);
-        const currentOnInit = onInitRef.current;
-        if (currentOnInit) {
-          const cleanup = await currentOnInit({
-            canvas: offscreen,
-            element,
-            elementImage: initImage,
-            pixelDensity: resolvedPixelDensity
-          });
-          if (typeof cleanup !== "function") {
-            throw new Error("HtmlInCanvas: when `onInit` is provided, it must return a cleanup function, or a Promise that resolves to one.");
-          }
-          if (unmountedRef.current) {
-            cleanup();
+        let initImage = null;
+        try {
+          initImage = placeholderCanvas.captureElementImage(element);
+        } catch (error2) {
+          if (isMissingPaintRecordError(error2) && !isRendering) {} else if (isMissingPaintRecordError(error2)) {
+            throw new Error(missingPaintRecordMessage);
           } else {
-            onInitCleanupRef.current = cleanup;
+            throw error2;
+          }
+        }
+        if (initImage) {
+          initializedRef.current = true;
+          const currentOnInit = onInitRef.current;
+          if (currentOnInit) {
+            const cleanup = await currentOnInit({
+              canvas: offscreen,
+              element,
+              elementImage: initImage,
+              pixelDensity: resolvedPixelDensity
+            });
+            if (typeof cleanup !== "function") {
+              throw new Error("HtmlInCanvas: when `onInit` is provided, it must return a cleanup function, or a Promise that resolves to one.");
+            }
+            if (unmountedRef.current) {
+              cleanup();
+            } else {
+              onInitCleanupRef.current = cleanup;
+            }
           }
         }
       }
       const handler = onPaintRef.current ?? defaultOnPaint;
-      const elImage = placeholderCanvas.captureElementImage(element);
+      let elImage;
+      try {
+        elImage = placeholderCanvas.captureElementImage(element);
+      } catch (error2) {
+        if (isMissingPaintRecordError(error2) && !isRendering) {
+          continueRender2(handle);
+          return;
+        }
+        if (isMissingPaintRecordError(error2)) {
+          throw new Error(missingPaintRecordMessage);
+        }
+        throw error2;
+      }
       await handler({
         canvas: offscreen,
         element,
@@ -9671,7 +9804,8 @@ var HtmlInCanvasContent = forwardRef9(({
     chainState,
     continueRender2,
     cancelRender2,
-    resolvedPixelDensity
+    resolvedPixelDensity,
+    isRendering
   ]);
   useLayoutEffect9(() => {
     const placeholder = canvas2dRef.current;
@@ -29332,7 +29466,7 @@ var PagesOfDocs = () => {
             width: "40px"
           }),
           /* @__PURE__ */ jsx57(StatItemContent, {
-            content: "900",
+            content: "1000",
             width: "85px",
             maxWidth: "100px",
             fontSize: "2.5rem",
@@ -29388,7 +29522,7 @@ var GitHubStars = () => {
             width: "45px"
           }),
           /* @__PURE__ */ jsx57(StatItemContent, {
-            content: "50K",
+            content: "51K",
             width: "80px",
             fontSize: "2.5rem",
             fontWeight: "bold"
@@ -29564,8 +29698,8 @@ var CommunityStats_default = CommunityStats;
 
 // ../player/dist/esm/index.mjs
 import { createContext as createContext32 } from "react";
-import { jsx as jsx59, jsxs as jsxs14 } from "react/jsx-runtime";
-import { jsx as jsx214, jsxs as jsxs24, Fragment as Fragment12 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs14, Fragment as Fragment12 } from "react/jsx-runtime";
+import { jsx as jsx214, jsxs as jsxs24, Fragment as Fragment23 } from "react/jsx-runtime";
 import React56 from "react";
 import { useContext as useContext210, useEffect as useEffect42, useState as useState38 } from "react";
 import { useContext as useContext46, useLayoutEffect as useLayoutEffect17 } from "react";
@@ -29615,10 +29749,10 @@ import { jsx as jsx104, jsxs as jsxs62 } from "react/jsx-runtime";
 import { useMemo as useMemo72 } from "react";
 import { jsxs as jsxs72 } from "react/jsx-runtime";
 import { useMemo as useMemo82 } from "react";
-import { jsx as jsx114, jsxs as jsxs82, Fragment as Fragment23 } from "react/jsx-runtime";
+import { jsx as jsx114, jsxs as jsxs82, Fragment as Fragment32 } from "react/jsx-runtime";
 import { useCallback as useCallback92, useMemo as useMemo112 } from "react";
 import { useCallback as useCallback82, useMemo as useMemo102, useRef as useRef92 } from "react";
-import { jsx as jsx124, jsxs as jsxs92, Fragment as Fragment32 } from "react/jsx-runtime";
+import { jsx as jsx124, jsxs as jsxs92, Fragment as Fragment42 } from "react/jsx-runtime";
 import { useCallback as useCallback112, useMemo as useMemo132, useState as useState122 } from "react";
 import { jsx as jsx133 } from "react/jsx-runtime";
 
@@ -29918,6 +30052,35 @@ function findRange2(input, inputRange) {
   return i - 1;
 }
 var defaultEasing2 = (num) => num;
+var shouldExtendRightForEasing2 = (easing) => {
+  return easing.remotionShouldExtendRight === true;
+};
+var resolveEasingForSegment2 = ({
+  easing,
+  segmentIndex
+}) => {
+  if (easing === undefined) {
+    return defaultEasing2;
+  }
+  if (typeof easing === "function") {
+    return easing;
+  }
+  return easing[segmentIndex];
+};
+var interpolateSegment2 = ({
+  input,
+  inputRange,
+  outputRange,
+  easing,
+  extrapolateLeft,
+  extrapolateRight
+}) => {
+  return interpolateFunction2(input, inputRange, outputRange, {
+    easing,
+    extrapolateLeft,
+    extrapolateRight: input > inputRange[1] && extrapolateRight === "clamp" && shouldExtendRightForEasing2(easing) ? "extend" : extrapolateRight
+  });
+};
 var interpolateNumber2 = ({
   input,
   inputRange,
@@ -29928,15 +30091,6 @@ var interpolateNumber2 = ({
     return outputRange[0];
   }
   const easingOption = options2?.easing;
-  const resolveEasingForSegment = (segmentIndex) => {
-    if (easingOption === undefined) {
-      return defaultEasing2;
-    }
-    if (typeof easingOption === "function") {
-      return easingOption;
-    }
-    return easingOption[segmentIndex];
-  };
   let extrapolateLeft = "extend";
   if (options2?.extrapolateLeft !== undefined) {
     extrapolateLeft = options2.extrapolateLeft;
@@ -29947,11 +30101,41 @@ var interpolateNumber2 = ({
   }
   const posterizedInput = options2?.posterize === undefined ? input : Math.floor(input / options2.posterize) * options2.posterize;
   const range = findRange2(posterizedInput, inputRange);
-  return interpolateFunction2(posterizedInput, [inputRange[range], inputRange[range + 1]], [outputRange[range], outputRange[range + 1]], {
-    easing: resolveEasingForSegment(range),
+  const easing = resolveEasingForSegment2({
+    easing: easingOption,
+    segmentIndex: range
+  });
+  let result = interpolateSegment2({
+    input: posterizedInput,
+    inputRange: [inputRange[range], inputRange[range + 1]],
+    outputRange: [outputRange[range], outputRange[range + 1]],
+    easing,
     extrapolateLeft,
     extrapolateRight
   });
+  for (let segmentIndex = 0;segmentIndex < range; segmentIndex++) {
+    const previousEasing = resolveEasingForSegment2({
+      easing: easingOption,
+      segmentIndex
+    });
+    if (!shouldExtendRightForEasing2(previousEasing)) {
+      continue;
+    }
+    const previousSegmentEnd = inputRange[segmentIndex + 1];
+    if (posterizedInput <= previousSegmentEnd) {
+      continue;
+    }
+    const continuedSegmentValue = interpolateSegment2({
+      input: posterizedInput,
+      inputRange: [inputRange[segmentIndex], previousSegmentEnd],
+      outputRange: [outputRange[segmentIndex], outputRange[segmentIndex + 1]],
+      easing: previousEasing,
+      extrapolateLeft,
+      extrapolateRight: "extend"
+    });
+    result += continuedSegmentValue - outputRange[segmentIndex + 1];
+  }
+  return result;
 };
 var interpolateString2 = ({
   input,
@@ -31061,27 +31245,113 @@ if (typeof createContext32 !== "function") {
 }
 var ICON_SIZE2 = 25;
 var fullscreenIconSize = 16;
-var PlayIcon = () => {
-  return /* @__PURE__ */ jsx59("svg", {
+var focusRingFallbackColor = "Highlight";
+var focusRingColor = "-webkit-focus-ring-color";
+var focusRingStyle = {
+  stroke: focusRingColor
+};
+var playPath = "M8 6.375C7.40904 8.17576 7.06921 10.2486 7.01438 12.3871C6.95955 14.5255 7.19163 16.6547 7.6875 18.5625C9.95364 18.2995 12.116 17.6164 14.009 16.5655C15.902 15.5147 17.4755 14.124 18.6088 12.5C17.5158 10.8949 15.9949 9.51103 14.1585 8.45082C12.3222 7.3906 10.2174 6.68116 8 6.375Z";
+var playFocusPath = "M93.4691 0.0367432C84.4873 0.520935 77.2494 1.93634 69.9553 4.69266C66.3176 6.05219 60.3548 9.0134 57.0734 11.062C43.3476 19.6103 32.8846 32.4606 27.428 47.4154C26.3405 50.3766 23.3966 59.8188 21.5027 66.3185C8.88329 109.768 1.7204 157.277 0.182822 207.561C-0.0609408 215.569 -0.0609408 234.639 0.182822 242.517C1.21413 275.854 4.42055 305.949 10.2334 336.641C12.596 349.063 16.3837 365.75 18.5776 373.33C23.059 388.732 32.2095 401.843 45.2227 411.453C53.9419 417.896 63.8425 422.217 74.8118 424.34C80.0996 425.365 87.075 425.83 92.2127 425.495C99.3194 425.029 113.42 423.148 124.877 421.118C176.517 411.974 224.22 395.604 267.478 372.175C294.874 357.332 318.294 341.26 340.888 321.761C363.408 302.355 382.609 281.478 399.504 258.049C403.423 252.63 405.392 249.464 407.361 245.478C412.424 235.198 414.805 224.974 414.786 213.539C414.786 202.886 412.761 193.425 408.392 183.741C406.292 179.066 404.286 175.714 399.785 169.345C383.21 145.898 364.815 125.467 342.389 105.614C307.624 74.8481 266.335 49.613 220.226 30.9334C210.232 26.8921 200.387 23.335 188.537 19.4799C163.448 11.3413 132.396 4.28293 106.126 0.763062C102.001 0.204346 96.3942 -0.112244 93.4691 0.0367432Z";
+var playIconStrokeWidth = 6.25;
+var playFocusStrokeWidth = 1.5;
+var playFocusPadding = 2;
+var playPathBounds = {
+  x1: 7.006500987565134,
+  y1: 6.375,
+  x2: 18.6088,
+  y2: 18.5625
+};
+var playFocusPathBounds = {
+  x1: -0.00000009999999999649709,
+  y1: 0.000013203698169792638,
+  x2: 414.7861127950162,
+  y2: 425.60252460486765
+};
+var expandBounds = (bounds, padding) => {
+  return {
+    x1: bounds.x1 - padding,
+    y1: bounds.y1 - padding,
+    x2: bounds.x2 + padding,
+    y2: bounds.y2 + padding
+  };
+};
+var getBoundsWidth = (bounds) => bounds.x2 - bounds.x1;
+var getBoundsHeight = (bounds) => bounds.y2 - bounds.y1;
+var fitBoundsTransform = ({
+  source,
+  target
+}) => {
+  const scale = Math.min(getBoundsWidth(target) / getBoundsWidth(source), getBoundsHeight(target) / getBoundsHeight(source));
+  const x = target.x1 + (getBoundsWidth(target) - getBoundsWidth(source) * scale) / 2 - source.x1 * scale;
+  const y = target.y1 + (getBoundsHeight(target) - getBoundsHeight(source) * scale) / 2 - source.y1 * scale;
+  return `translate(${x.toFixed(4)} ${y.toFixed(4)}) scale(${scale.toFixed(5)})`;
+};
+var playFocusTransform = fitBoundsTransform({
+  source: playFocusPathBounds,
+  target: expandBounds(expandBounds(playPathBounds, playIconStrokeWidth / 2), playFocusPadding)
+});
+var PlayIcon = ({ focused }) => {
+  return /* @__PURE__ */ jsxs14("svg", {
     width: ICON_SIZE2,
     height: ICON_SIZE2,
     viewBox: "0 0 25 25",
     fill: "none",
-    children: /* @__PURE__ */ jsx59("path", {
-      d: "M8 6.375C7.40904 8.17576 7.06921 10.2486 7.01438 12.3871C6.95955 14.5255 7.19163 16.6547 7.6875 18.5625C9.95364 18.2995 12.116 17.6164 14.009 16.5655C15.902 15.5147 17.4755 14.124 18.6088 12.5C17.5158 10.8949 15.9949 9.51103 14.1585 8.45082C12.3222 7.3906 10.2174 6.68116 8 6.375Z",
-      fill: "white",
-      stroke: "white",
-      strokeWidth: "6.25",
-      strokeLinejoin: "round"
-    })
+    children: [
+      focused ? /* @__PURE__ */ jsx59("path", {
+        d: playFocusPath,
+        fill: "none",
+        stroke: focusRingFallbackColor,
+        strokeWidth: playFocusStrokeWidth,
+        style: focusRingStyle,
+        transform: playFocusTransform,
+        vectorEffect: "non-scaling-stroke"
+      }) : null,
+      /* @__PURE__ */ jsx59("path", {
+        d: playPath,
+        fill: "white",
+        stroke: "white",
+        strokeWidth: playIconStrokeWidth,
+        strokeLinejoin: "round"
+      })
+    ]
   });
 };
-var PauseIcon = () => {
+var PauseIcon = ({
+  focused
+}) => {
   return /* @__PURE__ */ jsxs14("svg", {
     viewBox: "0 0 100 100",
     width: ICON_SIZE2,
     height: ICON_SIZE2,
     children: [
+      focused ? /* @__PURE__ */ jsxs14(Fragment12, {
+        children: [
+          /* @__PURE__ */ jsx59("rect", {
+            x: "21",
+            y: "16",
+            width: "28",
+            height: "68",
+            fill: "none",
+            stroke: focusRingFallbackColor,
+            strokeWidth: "4",
+            ry: "9",
+            rx: "9",
+            style: focusRingStyle
+          }),
+          /* @__PURE__ */ jsx59("rect", {
+            x: "51",
+            y: "16",
+            width: "28",
+            height: "68",
+            fill: "none",
+            stroke: focusRingFallbackColor,
+            strokeWidth: "4",
+            ry: "9",
+            rx: "9",
+            style: focusRingStyle
+          })
+        ]
+      }) : null,
       /* @__PURE__ */ jsx59("rect", {
         x: "25",
         y: "20",
@@ -31199,7 +31469,7 @@ var studioStyle = {
 };
 var BufferingIndicator = ({ type }) => {
   const style = type === "player" ? playerStyle : studioStyle;
-  return /* @__PURE__ */ jsxs24(Fragment12, {
+  return /* @__PURE__ */ jsxs24(Fragment23, {
     children: [
       /* @__PURE__ */ jsx214("style", {
         type: "text/css",
@@ -32413,16 +32683,20 @@ var RenderWarningIfBlacklist = () => {
     })
   });
 };
-var DefaultPlayPauseButton = ({ playing, buffering }) => {
+var DefaultPlayPauseButton = ({ playing, buffering, focused }) => {
   if (playing && buffering) {
     return /* @__PURE__ */ jsx64(BufferingIndicator, {
       type: "player"
     });
   }
   if (playing) {
-    return /* @__PURE__ */ jsx64(PauseIcon, {});
+    return /* @__PURE__ */ jsx64(PauseIcon, {
+      focused
+    });
   }
-  return /* @__PURE__ */ jsx64(PlayIcon, {});
+  return /* @__PURE__ */ jsx64(PlayIcon, {
+    focused
+  });
 };
 var KNOB_SIZE = 12;
 var BAR_HEIGHT = 5;
@@ -33146,6 +33420,7 @@ var Controls = ({
   renderCustomControls
 }) => {
   const playButtonRef = useRef82(null);
+  const [playButtonFocused, setPlayButtonFocused] = useState102(false);
   const [supportsFullscreen, setSupportsFullscreen] = useState102(false);
   const hovered = useHoverState(containerRef, hideControlsWhenPointerDoesntMove);
   const { maxTimeLabelWidth, displayVerticalVolumeSlider } = useVideoControlsResize({
@@ -33180,6 +33455,15 @@ var Controls = ({
       opacity: Number(shouldShow)
     };
   }, [hovered, shouldShowInitially, playing, alwaysShowControls]);
+  const playPauseButtonStyle = useMemo92(() => {
+    if (renderPlayPauseButton !== null || playing && buffering) {
+      return playerButtonStyle;
+    }
+    return {
+      ...playerButtonStyle,
+      outline: "none"
+    };
+  }, [buffering, playing, renderPlayPauseButton]);
   useEffect112(() => {
     if (playButtonRef.current && spaceKeyToPlayOrPause) {
       playButtonRef.current.focus({
@@ -33232,6 +33516,12 @@ var Controls = ({
       onDoubleClick?.(e);
     }
   }, [onDoubleClick]);
+  const onPlayButtonFocus = useCallback72(() => {
+    setPlayButtonFocused(true);
+  }, []);
+  const onPlayButtonBlur = useCallback72(() => {
+    setPlayButtonFocused(false);
+  }, []);
   return /* @__PURE__ */ jsxs82("div", {
     ref,
     style: containerCss,
@@ -33248,22 +33538,26 @@ var Controls = ({
               /* @__PURE__ */ jsx114("button", {
                 ref: playButtonRef,
                 type: "button",
-                style: playerButtonStyle,
+                style: playPauseButtonStyle,
                 onClick: toggle,
+                onFocus: onPlayButtonFocus,
+                onBlur: onPlayButtonBlur,
                 "aria-label": playing ? "Pause video" : "Play video",
                 title: playing ? "Pause video" : "Play video",
                 children: renderPlayPauseButton === null ? /* @__PURE__ */ jsx114(DefaultPlayPauseButton, {
                   buffering,
+                  focused: playButtonFocused,
                   playing
                 }) : renderPlayPauseButton({
                   playing,
                   isBuffering: buffering
                 }) ?? /* @__PURE__ */ jsx114(DefaultPlayPauseButton, {
                   buffering,
+                  focused: false,
                   playing
                 })
               }),
-              showVolumeControls ? /* @__PURE__ */ jsxs82(Fragment23, {
+              showVolumeControls ? /* @__PURE__ */ jsxs82(Fragment32, {
                 children: [
                   /* @__PURE__ */ jsx114("div", {
                     style: xSpacer
@@ -33800,7 +34094,7 @@ var PlayerUI = ({
     showPosterWhenBufferingAndPaused && showBufferIndicator && !player.isPlaying()
   ].some(Boolean);
   const { left, top, width, height, ...outerWithoutScale } = outer;
-  const content = /* @__PURE__ */ jsxs92(Fragment32, {
+  const content = /* @__PURE__ */ jsxs92(Fragment42, {
     children: [
       /* @__PURE__ */ jsxs92("div", {
         style: outer,
@@ -35773,9 +36067,14 @@ class StaleWaiterError extends Error {
 var CONCURRENCY = 1;
 var waiters = [];
 var running = 0;
+var runningEntry = null;
 var processNext = () => {
   if (running >= CONCURRENCY) {
-    return;
+    if (runningEntry?.waiter.getPriority() === null) {
+      runningEntry.cancel();
+    } else {
+      return;
+    }
   }
   const staleWaiters = [];
   for (let i = waiters.length - 1;i >= 0; i--) {
@@ -35810,11 +36109,37 @@ var processNext = () => {
   }
   const [next] = waiters.splice(bestIndex, 1);
   running++;
+  let settled = false;
+  let cancelled = false;
+  const entry = {
+    waiter: next,
+    cancel: () => {
+      cancelled = true;
+      entry.settle();
+    },
+    settle: () => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      running--;
+      if (runningEntry === entry) {
+        runningEntry = null;
+      }
+    }
+  };
+  runningEntry = entry;
   next.fn().then((value) => {
-    running--;
+    entry.settle();
+    if (cancelled) {
+      return;
+    }
     next.onDone(value, processNext);
   }, (err) => {
-    running--;
+    entry.settle();
+    if (cancelled) {
+      return;
+    }
     next.onError(err);
   });
 };
@@ -40187,32 +40512,19 @@ var VideoForPreviewAssertedShowing = ({
     };
   }, [_experimentalInitiallyDrawCachedFrame, src]);
   useEffect212(() => {
-    if (!sharedAudioContext)
-      return;
-    if (!sharedAudioContext.audioContext)
-      return;
-    const {
-      audioContext,
-      gainNode,
-      audioSyncAnchor,
-      scheduleAudioNode,
-      unscheduleAudioNode
-    } = sharedAudioContext;
-    if (!gainNode) {
-      return;
-    }
+    const sharedAudioContextForMediaPlayer = sharedAudioContext?.audioContext && sharedAudioContext.gainNode ? {
+      audioContext: sharedAudioContext.audioContext,
+      gainNode: sharedAudioContext.gainNode,
+      audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
+      scheduleAudioNode: sharedAudioContext.scheduleAudioNode,
+      unscheduleAudioNode: sharedAudioContext.unscheduleAudioNode
+    } : null;
     try {
       const player = new MediaPlayer({
         canvas: canvasRef.current,
         src: preloadedSrc,
         logLevel,
-        sharedAudioContext: {
-          audioContext,
-          gainNode,
-          audioSyncAnchor,
-          scheduleAudioNode,
-          unscheduleAudioNode
-        },
+        sharedAudioContext: sharedAudioContextForMediaPlayer,
         loop,
         trimAfter: initialTrimAfterRef.current,
         trimBefore: initialTrimBeforeRef.current,
@@ -42350,7 +42662,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.482";
+var VERSION2 = "4.0.484";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -43677,7 +43989,7 @@ var turnSvgIntoDrawable = (svg) => {
   svg.style.marginBottom = "0";
   svg.style.fill = fill;
   svg.style.color = color;
-  const svgData = new XMLSerializer().serializeToString(svg);
+  const svgData = new XMLSerializer().serializeToString(svg).replace(/[\u0000-\u0008\u000B\u000C\u000E-\u001F]/g, "");
   svg.style.marginLeft = originalMarginLeft;
   svg.style.marginRight = originalMarginRight;
   svg.style.marginTop = originalMarginTop;
@@ -46084,6 +46396,124 @@ var parsePaintOrder = (paintOrder) => {
 var parseTextShadow = (textShadowValue) => {
   return parseShadowValues(textShadowValue);
 };
+var textDecorationLines = [
+  "underline",
+  "overline",
+  "line-through"
+];
+var currentColorValues = new Set(["currentcolor", "currentColor"]);
+var getDefaultTextDecorationThickness = (fontSizePx) => {
+  return Math.max(1, Number.isFinite(fontSizePx) ? fontSizePx / 16 : 1);
+};
+var parseTextDecoration = ({
+  onlyBackgroundClipText,
+  style: style2
+}) => {
+  const textDecorationStyle = style2.getPropertyValue("text-decoration-style");
+  if (textDecorationStyle && textDecorationStyle !== "solid") {
+    return null;
+  }
+  const textDecorationLine = style2.getPropertyValue("text-decoration-line");
+  const lineParts = textDecorationLine.split(/\s+/);
+  const lines2 = textDecorationLines.filter((line) => lineParts.includes(line));
+  if (lines2.length === 0) {
+    return null;
+  }
+  const textDecorationThickness = style2.getPropertyValue("text-decoration-thickness");
+  const thicknessValue = parseFloat(textDecorationThickness);
+  const thickness = Number.isFinite(thicknessValue) ? thicknessValue : getDefaultTextDecorationThickness(parseFloat(style2.fontSize));
+  if (thickness <= 0) {
+    return null;
+  }
+  const textDecorationColor = style2.getPropertyValue("text-decoration-color");
+  return {
+    lines: lines2,
+    color: onlyBackgroundClipText || !textDecorationColor || currentColorValues.has(textDecorationColor) ? onlyBackgroundClipText ? "black" : style2.color : textDecorationColor,
+    thickness
+  };
+};
+var getTextDecorations = ({
+  computedStyle,
+  onlyBackgroundClipText,
+  span
+}) => {
+  const decorations = [];
+  const spanDecoration = parseTextDecoration({
+    onlyBackgroundClipText,
+    style: computedStyle
+  });
+  if (spanDecoration) {
+    decorations.push(spanDecoration);
+  }
+  let parent = span.parentElement;
+  while (parent) {
+    const parentDecoration = parseTextDecoration({
+      onlyBackgroundClipText,
+      style: getComputedStyle(parent)
+    });
+    if (parentDecoration) {
+      decorations.push(parentDecoration);
+    }
+    parent = parent.parentElement;
+  }
+  return decorations;
+};
+var getTextDecorationY = ({
+  line,
+  measurements,
+  y,
+  thickness,
+  fontSizePx
+}) => {
+  const fontAscent = measurements.fontBoundingBoxAscent || measurements.actualBoundingBoxAscent || fontSizePx;
+  const fontDescent = measurements.fontBoundingBoxDescent || measurements.actualBoundingBoxDescent || fontSizePx * 0.2;
+  const actualAscent = measurements.actualBoundingBoxAscent || fontAscent;
+  if (line === "underline") {
+    return y + Math.max(thickness, fontDescent * 0.4);
+  }
+  if (line === "overline") {
+    return y - fontAscent + thickness / 2;
+  }
+  return y - actualAscent * 0.35;
+};
+var drawTextDecoration = ({
+  contextToDraw,
+  fontSizePx,
+  measurements,
+  parentRect,
+  textDecorations,
+  token,
+  y
+}) => {
+  if (textDecorations.length === 0) {
+    return;
+  }
+  const startX = token.rect.left - parentRect.x;
+  const endX = token.rect.right - parentRect.x;
+  if (endX <= startX) {
+    return;
+  }
+  contextToDraw.save();
+  contextToDraw.lineCap = "butt";
+  for (const textDecoration of textDecorations) {
+    contextToDraw.strokeStyle = textDecoration.color;
+    contextToDraw.lineWidth = textDecoration.thickness;
+    for (const line of textDecoration.lines) {
+      const lineY = getTextDecorationY({
+        line,
+        measurements,
+        y,
+        thickness: textDecoration.thickness,
+        fontSizePx
+      });
+      contextToDraw.beginPath();
+      contextToDraw.moveTo(startX, lineY);
+      contextToDraw.lineTo(endX, lineY);
+      contextToDraw.stroke();
+    }
+  }
+  contextToDraw.restore();
+};
 var drawText = ({
   span,
   logLevel,
@@ -46134,6 +46564,11 @@ var drawText = ({
     contextToDraw.fillStyle = onlyBackgroundClipText ? "black" : webkitTextFillColor;
     contextToDraw.letterSpacing = letterSpacing;
     contextToDraw.wordSpacing = wordSpacing;
+    const textDecorations = getTextDecorations({
+      computedStyle,
+      onlyBackgroundClipText,
+      span
+    });
     const strokeWidth2 = parseFloat(webkitTextStrokeWidth);
     const hasStroke = strokeWidth2 > 0;
     if (hasStroke) {
@@ -46184,6 +46619,15 @@ var drawText = ({
         drawFill();
         drawStroke();
       }
+      drawTextDecoration({
+        contextToDraw,
+        fontSizePx,
+        measurements,
+        parentRect,
+        textDecorations,
+        token,
+        y
+      });
     }
     span.textContent = originalText;
     finishFilter();
@@ -49201,6 +49645,7 @@ var listOfRemotionPackages = [
   "@remotion/bugs",
   "@remotion/brand",
   "@remotion/bundler",
+  "@remotion/browser-studio",
   "@remotion/canvas-capture",
   "@remotion/cli",
   "@remotion/cloudrun",
@@ -50543,7 +50988,7 @@ var GithubButton = () => {
       " ",
       /* @__PURE__ */ jsx167("div", {
         className: "text-xs inline-block ml-2 leading-none mt-[3px] self-center",
-        children: "50k"
+        children: "51k"
       })
     ]
   });
@@ -50615,32 +51060,6 @@ var GetStarted = () => {
           className: "w-full",
           children: /* @__PURE__ */ jsx168(GithubButton, {})
         })
-      }),
-      " ",
-      /* @__PURE__ */ jsx168("div", {
-        className: "w-2 h-2"
-      }),
-      /* @__PURE__ */ jsx168("div", {
-        className: "w-full lg:w-auto",
-        children: /* @__PURE__ */ jsxs66(Button, {
-          href: "/prompts",
-          className: "w-full",
-          children: [
-            /* @__PURE__ */ jsx168("svg", {
-              width: "20",
-              height: "20",
-              viewBox: "0 0 149 149",
-              fill: "none",
-              xmlns: "http://www.w3.org/2000/svg",
-              style: { marginRight: 8 },
-              children: /* @__PURE__ */ jsx168("path", {
-                d: "M29.05 98.54L58.19 82.19L58.68 80.77L58.19 79.98H56.77L51.9 79.68L35.25 79.23L20.81 78.63L6.82 77.88L3.3 77.13L0 72.78L0.340004 70.61L3.3 68.62L7.54 68.99L16.91 69.63L30.97 70.6L41.17 71.2L56.28 72.77H58.68L59.02 71.8L58.2 71.2L57.56 70.6L43.01 60.74L27.26 50.32L19.01 44.32L14.55 41.28L12.3 38.43L11.33 32.21L15.38 27.75L20.82 28.12L22.21 28.49L27.72 32.73L39.49 41.84L54.86 53.16L57.11 55.03L58.01 54.39L58.12 53.94L57.11 52.25L48.75 37.14L39.83 21.77L35.86 15.4L34.81 11.58C34.44 10.01 34.17 8.69 34.17 7.08L38.78 0.820007L41.33 0L47.48 0.820007L50.07 3.07001L53.89 11.81L60.08 25.57L69.68 44.28L72.49 49.83L73.99 54.97L74.55 56.54H75.52V55.64L76.31 45.1L77.77 32.16L79.19 15.51L79.68 10.82L82 5.2L86.61 2.16L90.21 3.88L93.17 8.12L92.76 10.86L91 22.3L87.55 40.22L85.3 52.22H86.61L88.11 50.72L94.18 42.66L104.38 29.91L108.88 24.85L114.13 19.26L117.5 16.6H123.87L128.56 23.57L126.46 30.77L119.9 39.09L114.46 46.14L106.66 56.64L101.79 65.04L102.24 65.71L103.4 65.6L121.02 61.85L130.54 60.13L141.9 58.18L147.04 60.58L147.6 63.02L145.58 68.01L133.43 71.01L119.18 73.86L97.96 78.88L97.7 79.07L98 79.44L107.56 80.34L111.65 80.56H121.66L140.3 81.95L145.17 85.17L148.09 89.11L147.6 92.11L140.1 95.93L129.98 93.53L106.36 87.91L98.26 85.89H97.14V86.56L103.89 93.16L116.26 104.33L131.75 118.73L132.54 122.29L130.55 125.1L128.45 124.8L114.84 114.56L109.59 109.95L97.7 99.94H96.91V100.99L99.65 105L114.12 126.75L114.87 133.42L113.82 135.59L110.07 136.9L105.95 136.15L97.48 124.26L88.74 110.87L81.69 98.87L80.83 99.36L76.67 144.17L74.72 146.46L70.22 148.18L66.47 145.33L64.48 140.72L66.47 131.61L68.87 119.72L70.82 110.27L72.58 98.53L73.63 94.63L73.56 94.37L72.7 94.48L63.85 106.63L50.39 124.82L39.74 136.22L37.19 137.23L32.77 134.94L33.18 130.85L35.65 127.21L50.39 108.46L59.28 96.84L65.02 90.13L64.98 89.16H64.64L25.49 114.58L18.52 115.48L15.52 112.67L15.89 108.06L17.31 106.56L29.08 98.46L29.04 98.5L29.05 98.54Z",
-                fill: "#D97757"
-              })
-            }),
-            "Prompt a video"
-          ]
-        })
       })
     ]
   });