@remotion/promo-pages 4.0.457 → 4.0.458

package/dist/design.js

@@ -1378,7 +1378,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React33, { useEffect as useEffect20, useMemo as useMemo39, useState as useState23 } from "react";
+import React33, { useEffect as useEffect21, useMemo as useMemo38, useState as useState23 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -5758,11 +5758,11 @@ import { jsx as jsx82 } from "react/jsx-runtime";
 import { useEffect as useEffect3, useMemo as useMemo10, useRef as useRef4 } from "react";
 import { jsx as jsx92 } from "react/jsx-runtime";
 import {
-  forwardRef as forwardRef2,
-  useContext as useContext15,
+  forwardRef as forwardRef3,
+  useContext as useContext16,
   useEffect as useEffect5,
-  useMemo as useMemo15,
-  useState as useState5
+  useMemo as useMemo16,
+  useState as useState6
 } from "react";
 import { useRef as useRef5 } from "react";
 import { useContext as useContext14, useMemo as useMemo13 } from "react";
@@ -5772,16 +5772,17 @@ import { jsx as jsx102 } from "react/jsx-runtime";
 import { createContext as createContext14 } from "react";
 import React12, { useCallback as useCallback5, useMemo as useMemo14, useRef as useRef6, useState as useState4 } from "react";
 import { jsx as jsx112 } from "react/jsx-runtime";
+import React13, { forwardRef as forwardRef2, useState as useState5, useContext as useContext15, useMemo as useMemo15 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
 import {
-  forwardRef as forwardRef3,
+  forwardRef as forwardRef4,
   useEffect as useEffect6,
   useImperativeHandle as useImperativeHandle2,
   useLayoutEffect as useLayoutEffect2,
   useRef as useRef8,
-  useState as useState6
+  useState as useState7
 } from "react";
-import React14, { useCallback as useCallback6, useImperativeHandle, useRef as useRef7 } from "react";
+import React15, { useCallback as useCallback6, useImperativeHandle, useRef as useRef7 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
 import { jsx as jsx14 } from "react/jsx-runtime";
 import {
@@ -5790,12 +5791,10 @@ import {
   useCallback as useCallback7,
   useContext as useContext17,
   useLayoutEffect as useLayoutEffect3,
-  useMemo as useMemo18,
+  useMemo as useMemo17,
   useRef as useRef9,
   useState as useState8
 } from "react";
-import React15, { forwardRef as forwardRef4, useMemo as useMemo17 } from "react";
-import { useContext as useContext16, useMemo as useMemo16, useState as useState7 } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
 import { useContext as useContext18, useLayoutEffect as useLayoutEffect5, useState as useState10 } from "react";
 import {
@@ -5803,25 +5802,25 @@ import {
   useCallback as useCallback8,
   useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect4,
-  useMemo as useMemo19,
+  useMemo as useMemo18,
   useRef as useRef10,
   useState as useState9
 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
 import { forwardRef as forwardRef8, useCallback as useCallback13, useContext as useContext30 } from "react";
-import React17, { createContext as createContext17, useMemo as useMemo20 } from "react";
+import React17, { createContext as createContext17, useMemo as useMemo19 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
 import { useContext as useContext19 } from "react";
 import { createContext as createContext18, useEffect as useEffect7, useState as useState11 } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
-import { createContext as createContext19, useMemo as useMemo21, useReducer } from "react";
+import { createContext as createContext19, useMemo as useMemo20, useReducer } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 import React23, {
   forwardRef as forwardRef6,
   useContext as useContext28,
-  useEffect as useEffect14,
+  useEffect as useEffect15,
   useImperativeHandle as useImperativeHandle4,
-  useMemo as useMemo29,
+  useMemo as useMemo28,
   useRef as useRef18,
   useState as useState16
 } from "react";
@@ -5831,47 +5830,47 @@ import React20, {
   createRef as createRef2,
   useCallback as useCallback9,
   useContext as useContext20,
-  useMemo as useMemo23,
+  useMemo as useMemo22,
   useRef as useRef11,
   useState as useState12
 } from "react";
-import { useMemo as useMemo22 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo21 } from "react";
 import { jsx as jsx20, jsxs as jsxs22 } from "react/jsx-runtime";
 import { useRef as useRef12 } from "react";
-import { useContext as useContext23, useEffect as useEffect8, useMemo as useMemo24, useState as useState13 } from "react";
+import { useContext as useContext23, useEffect as useEffect9, useMemo as useMemo23, useState as useState13 } from "react";
 import { useContext as useContext22 } from "react";
 import {
   useCallback as useCallback12,
   useContext as useContext26,
-  useEffect as useEffect12,
+  useEffect as useEffect13,
   useLayoutEffect as useLayoutEffect8,
   useRef as useRef17
 } from "react";
-import { useCallback as useCallback11, useMemo as useMemo27, useRef as useRef15 } from "react";
-import { useContext as useContext25, useMemo as useMemo26 } from "react";
+import { useCallback as useCallback11, useMemo as useMemo26, useRef as useRef15 } from "react";
+import { useContext as useContext25, useMemo as useMemo25 } from "react";
 import React21, {
   useCallback as useCallback10,
   useContext as useContext24,
-  useEffect as useEffect9,
+  useEffect as useEffect10,
   useLayoutEffect as useLayoutEffect7,
-  useMemo as useMemo25,
+  useMemo as useMemo24,
   useRef as useRef14,
   useState as useState14
 } from "react";
 import { jsx as jsx21 } from "react/jsx-runtime";
 import React22 from "react";
-import { useEffect as useEffect10, useState as useState15 } from "react";
-import { useEffect as useEffect11, useRef as useRef16 } from "react";
-import { useEffect as useEffect13 } from "react";
-import { createContext as createContext21, useContext as useContext27, useMemo as useMemo28 } from "react";
+import { useEffect as useEffect11, useState as useState15 } from "react";
+import { useEffect as useEffect12, useRef as useRef16 } from "react";
+import { useEffect as useEffect14 } from "react";
+import { createContext as createContext21, useContext as useContext27, useMemo as useMemo27 } from "react";
 import { jsx as jsx222 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef7,
   useContext as useContext29,
-  useEffect as useEffect15,
+  useEffect as useEffect16,
   useImperativeHandle as useImperativeHandle5,
   useLayoutEffect as useLayoutEffect9,
-  useMemo as useMemo30,
+  useMemo as useMemo29,
   useRef as useRef19
 } from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
@@ -5892,14 +5891,14 @@ import React28 from "react";
 import {
   useCallback as useCallback16,
   useImperativeHandle as useImperativeHandle7,
-  useMemo as useMemo31,
+  useMemo as useMemo30,
   useRef as useRef21,
   useState as useState19
 } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
 import React29 from "react";
-import { useMemo as useMemo33 } from "react";
-import { createContext as createContext22, useContext as useContext32, useMemo as useMemo322 } from "react";
+import { useMemo as useMemo322 } from "react";
+import { createContext as createContext22, useContext as useContext32, useMemo as useMemo31 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 import { jsx as jsx29 } from "react/jsx-runtime";
 import React31 from "react";
@@ -5909,27 +5908,27 @@ import { useCallback as useCallback18 } from "react";
 import {
   useCallback as useCallback17,
   useContext as useContext34,
-  useEffect as useEffect16,
+  useEffect as useEffect17,
   useLayoutEffect as useLayoutEffect11,
-  useMemo as useMemo34,
+  useMemo as useMemo33,
   useState as useState20
 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
 import React34, {
   forwardRef as forwardRef10,
   useContext as useContext35,
-  useEffect as useEffect18,
+  useEffect as useEffect19,
   useImperativeHandle as useImperativeHandle8,
-  useMemo as useMemo35,
+  useMemo as useMemo34,
   useRef as useRef22,
   useState as useState21
 } from "react";
-import { useEffect as useEffect17 } from "react";
+import { useEffect as useEffect18 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 import { jsx as jsx322 } from "react/jsx-runtime";
-import React36, { useMemo as useMemo36 } from "react";
+import React36, { useMemo as useMemo35 } from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
-import { Children, forwardRef as forwardRef11, useMemo as useMemo37 } from "react";
+import { Children, forwardRef as forwardRef11, useMemo as useMemo36 } from "react";
 import React37 from "react";
 import React38, { createContext as createContext24 } from "react";
 import { jsx as jsx34 } from "react/jsx-runtime";
@@ -5939,10 +5938,10 @@ import { forwardRef as forwardRef13, useCallback as useCallback19, useContext as
 import {
   forwardRef as forwardRef12,
   useContext as useContext36,
-  useEffect as useEffect19,
+  useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle9,
   useLayoutEffect as useLayoutEffect12,
-  useMemo as useMemo38,
+  useMemo as useMemo37,
   useRef as useRef23
 } from "react";
 import { jsx as jsx36 } from "react/jsx-runtime";
@@ -7021,6 +7020,7 @@ __export2(exports_timeline_position_state, {
   useTimelinePosition: () => useTimelinePosition,
   useTimelineContext: () => useTimelineContext,
   usePlayingState: () => usePlayingState,
+  usePlaybackRate: () => usePlaybackRate,
   useAbsoluteTimelinePosition: () => useAbsoluteTimelinePosition,
   persistCurrentFrame: () => persistCurrentFrame,
   getInitialFrameState: () => getInitialFrameState,
@@ -7067,6 +7067,7 @@ var SetTimelineContext = createContext13({
   }
 });
 var TimelineContext = createContext13(null);
+var PlaybackRateContext = createContext13(null);
 var AbsoluteTimeContext = createContext13(null);
 var TimelineContextProvider = ({ children, frameState }) => {
   const [playing, setPlaying] = useState2(false);
@@ -7109,11 +7110,15 @@ var TimelineContextProvider = ({ children, frameState }) => {
       playing,
       imperativePlaying,
       rootId: remotionRootId,
-      playbackRate,
-      setPlaybackRate,
       audioAndVideoTags
     };
-  }, [frame, playbackRate, playing, remotionRootId]);
+  }, [frame, playing, remotionRootId]);
+  const playbackRateContextValue = useMemo8(() => {
+    return {
+      playbackRate,
+      setPlaybackRate
+    };
+  }, [playbackRate]);
   const setTimelineContextValue = useMemo8(() => {
     return {
       setFrame,
@@ -7122,11 +7127,14 @@ var TimelineContextProvider = ({ children, frameState }) => {
   }, []);
   return /* @__PURE__ */ jsx82(AbsoluteTimeContext.Provider, {
     value: timelineContextValue,
-    children: /* @__PURE__ */ jsx82(TimelineContext.Provider, {
-      value: timelineContextValue,
-      children: /* @__PURE__ */ jsx82(SetTimelineContext.Provider, {
-        value: setTimelineContextValue,
-        children
+    children: /* @__PURE__ */ jsx82(PlaybackRateContext.Provider, {
+      value: playbackRateContextValue,
+      children: /* @__PURE__ */ jsx82(TimelineContext.Provider, {
+        value: timelineContextValue,
+        children: /* @__PURE__ */ jsx82(SetTimelineContext.Provider, {
+          value: setTimelineContextValue,
+          children
+        })
       })
     })
   });
@@ -7169,6 +7177,13 @@ var useTimelineContext = () => {
   }
   return state;
 };
+var usePlaybackRate = () => {
+  const state = useContext10(PlaybackRateContext);
+  if (state === null) {
+    throw new Error("PlaybackRateContext is not available. This hook must be used inside a <Player> or the Remotion Studio.");
+  }
+  return state;
+};
 var useTimelinePosition = () => {
   const state = useTimelineContext();
   return useTimelinePositionFromContext(state);
@@ -7460,7 +7475,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.457";
+var VERSION = "4.0.458";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -7631,6 +7646,54 @@ var Freeze = ({
 var PremountContext = createContext14({
   premountFramesRemaining: 0
 });
+var sequenceStyleSchema = {
+  "style.translate": {
+    type: "translate",
+    step: 1,
+    default: "0px 0px",
+    description: "Offset"
+  },
+  "style.scale": {
+    type: "number",
+    min: 0.05,
+    max: 100,
+    step: 0.01,
+    default: 1,
+    description: "Scale"
+  },
+  "style.rotate": {
+    type: "rotation",
+    step: 1,
+    default: "0deg",
+    description: "Rotation"
+  },
+  "style.opacity": {
+    type: "number",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: 1,
+    description: "Opacity"
+  }
+};
+var sequenceSchema = {
+  layout: {
+    type: "enum",
+    default: "absolute-fill",
+    description: "Layout",
+    variants: {
+      "absolute-fill": sequenceStyleSchema,
+      none: {}
+    }
+  }
+};
+var sequenceSchemaDefaultLayoutNone = {
+  ...sequenceSchema,
+  layout: {
+    ...sequenceSchema.layout,
+    default: "none"
+  }
+};
 var SequenceManager = React12.createContext({
   registerSequence: () => {
     throw new Error("SequenceManagerContext not initialized");
@@ -7752,6 +7815,204 @@ var SequenceManagerProvider = ({ children, visualModeEnabled }) => {
   });
 };
 var ENABLE_V5_BREAKING_CHANGES = false;
+var flattenActiveSchema = (schema, resolve) => {
+  const out = {};
+  for (const key of Object.keys(schema)) {
+    const field = schema[key];
+    if (field.type === "enum") {
+      out[key] = field;
+      const current = resolve(key) ?? field.default;
+      const variant = field.variants[current];
+      if (variant) {
+        Object.assign(out, flattenActiveSchema(variant, resolve));
+      }
+    } else {
+      out[key] = field;
+    }
+  }
+  return out;
+};
+var getFlatSchemaWithAllKeys = (schema) => {
+  const out = {};
+  const addKey = (key, field) => {
+    if (key in out) {
+      throw new Error(`Duplicate key "${key}" in schema: discriminated union variants must not share keys`);
+    }
+    out[key] = field;
+  };
+  for (const key of Object.keys(schema)) {
+    const field = schema[key];
+    addKey(key, field);
+    if (field.type === "enum") {
+      for (const variant of Object.values(field.variants)) {
+        const flatVariant = getFlatSchemaWithAllKeys(variant);
+        for (const variantKey of Object.keys(flatVariant)) {
+          addKey(variantKey, flatVariant[variantKey]);
+        }
+      }
+    }
+  }
+  return out;
+};
+var getEffectiveVisualModeValue = ({
+  codeValue,
+  runtimeValue,
+  dragOverrideValue,
+  defaultValue,
+  shouldResortToDefaultValueIfUndefined = false
+}) => {
+  if (dragOverrideValue !== undefined) {
+    return dragOverrideValue;
+  }
+  if (!codeValue) {
+    return runtimeValue;
+  }
+  if (!codeValue.canUpdate) {
+    return runtimeValue;
+  }
+  if (codeValue.codeValue === undefined && shouldResortToDefaultValueIfUndefined) {
+    return defaultValue;
+  }
+  return codeValue.codeValue;
+};
+var findFieldInSchema = (schema, key) => {
+  if (key in schema) {
+    return schema[key];
+  }
+  for (const field of Object.values(schema)) {
+    if (field.type !== "enum") {
+      continue;
+    }
+    for (const variant of Object.values(field.variants)) {
+      const found = findFieldInSchema(variant, key);
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return;
+};
+var computeEffectiveSchemaValuesDotNotation = ({
+  schema,
+  currentValue,
+  overrideValues,
+  propStatus
+}) => {
+  const merged = {};
+  for (const key of Object.keys(currentValue)) {
+    const codeValueStatus = propStatus?.[key] ?? null;
+    merged[key] = getEffectiveVisualModeValue({
+      codeValue: codeValueStatus,
+      runtimeValue: currentValue[key],
+      dragOverrideValue: overrideValues[key],
+      defaultValue: findFieldInSchema(schema, key)?.default,
+      shouldResortToDefaultValueIfUndefined: false
+    });
+  }
+  return merged;
+};
+var getNestedValue = (obj, key) => {
+  const parts = key.split(".");
+  let current = obj;
+  for (const part of parts) {
+    if (current === null || current === undefined || typeof current !== "object")
+      return;
+    current = current[part];
+  }
+  return current;
+};
+var readValuesFromProps = (props, keys) => {
+  const out = {};
+  for (const key of keys) {
+    out[key] = getNestedValue(props, key);
+  }
+  return out;
+};
+var selectActiveKeys = (schema, values) => {
+  return Object.keys(flattenActiveSchema(schema, (key) => values[key]));
+};
+var mergeValues = ({
+  props,
+  valuesDotNotation,
+  schemaKeys
+}) => {
+  const merged = { ...props };
+  for (const key of schemaKeys) {
+    const value = valuesDotNotation[key];
+    const parts = key.split(".");
+    if (parts.length === 1) {
+      merged[key] = value;
+      continue;
+    }
+    let current = merged;
+    for (let i = 0;i < parts.length - 1; i++) {
+      const part = parts[i];
+      if (typeof current[part] === "object" && current[part] !== null) {
+        current[part] = { ...current[part] };
+      } else {
+        current[part] = {};
+      }
+      current = current[part];
+    }
+    current[parts[parts.length - 1]] = value;
+  }
+  return merged;
+};
+var wrapInSchema = (Component, schema) => {
+  if (typeof process === "undefined" || !process.env?.EXPERIMENTAL_VISUAL_MODE_ENABLED) {
+    return Component;
+  }
+  const flatSchema = getFlatSchemaWithAllKeys(schema);
+  const flatKeys = Object.keys(flatSchema);
+  const Wrapped = forwardRef2((props, ref) => {
+    const env = useRemotionEnvironment();
+    const { visualModeEnabled, dragOverrides, codeValues } = useContext15(VisualModeOverridesContext);
+    if (!env.isStudio || env.isReadOnlyStudio || env.isRendering || !visualModeEnabled) {
+      return React13.createElement(Component, {
+        ...props,
+        _experimentalControls: null,
+        ref
+      });
+    }
+    if (props._experimentalControls) {
+      return React13.createElement(Component, {
+        ...props,
+        ref
+      });
+    }
+    const [overrideId] = useState5(() => String(Math.random()));
+    const runtimeValues = flatKeys.map((k) => getNestedValue(props, k));
+    const currentRuntimeValueDotNotation = useMemo15(() => readValuesFromProps(props, flatKeys), runtimeValues);
+    const controls = useMemo15(() => {
+      return {
+        schema,
+        currentRuntimeValueDotNotation,
+        overrideId
+      };
+    }, [currentRuntimeValueDotNotation, overrideId]);
+    const valuesDotNotation = useMemo15(() => {
+      return computeEffectiveSchemaValuesDotNotation({
+        schema,
+        currentValue: currentRuntimeValueDotNotation,
+        overrideValues: dragOverrides[overrideId] ?? {},
+        propStatus: codeValues[overrideId]
+      });
+    }, [currentRuntimeValueDotNotation, dragOverrides, overrideId, codeValues]);
+    const activeKeys = selectActiveKeys(schema, valuesDotNotation);
+    const mergedProps = mergeValues({
+      props,
+      valuesDotNotation,
+      schemaKeys: activeKeys
+    });
+    return React13.createElement(Component, {
+      ...mergedProps,
+      _experimentalControls: controls,
+      ref
+    });
+  });
+  Wrapped.displayName = `wrapInSchema(${Component.displayName || Component.name || "Component"})`;
+  return Wrapped;
+};
 var RegularSequenceRefForwardingFunction = ({
   from = 0,
   durationInFrames = Infinity,
@@ -7770,8 +8031,8 @@ var RegularSequenceRefForwardingFunction = ({
   ...other
 }, ref) => {
   const { layout = "absolute-fill" } = other;
-  const [id] = useState5(() => String(Math.random()));
-  const parentSequence = useContext15(SequenceContext);
+  const [id] = useState6(() => String(Math.random()));
+  const parentSequence = useContext16(SequenceContext);
   const { rootId } = useTimelineContext();
   const cumulatedFrom = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
   const nonce = useNonce();
@@ -7779,7 +8040,7 @@ var RegularSequenceRefForwardingFunction = ({
     throw new TypeError(`The layout prop of <Sequence /> expects either "absolute-fill" or "none", but you passed: ${layout}`);
   }
   if (layout === "none" && typeof other.style !== "undefined") {
-    throw new TypeError('If layout="none", you may not pass a style.');
+    throw new TypeError('If layout="none", you may not pass a style. Passed: ' + JSON.stringify(other.style));
   }
   if (typeof durationInFrames !== "number") {
     throw new TypeError(`You passed to durationInFrames an argument of type ${typeof durationInFrames}, but it must be a number.`);
@@ -7797,15 +8058,15 @@ var RegularSequenceRefForwardingFunction = ({
   const videoConfig = useVideoConfig();
   const parentSequenceDuration = parentSequence ? Math.min(parentSequence.durationInFrames - from, durationInFrames) : durationInFrames;
   const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
-  const { registerSequence, unregisterSequence } = useContext15(SequenceManager);
-  const { hidden } = useContext15(SequenceVisibilityToggleContext);
-  const premounting = useMemo15(() => {
+  const { registerSequence, unregisterSequence } = useContext16(SequenceManager);
+  const { hidden } = useContext16(SequenceVisibilityToggleContext);
+  const premounting = useMemo16(() => {
     return parentSequence?.premounting || Boolean(other._remotionInternalIsPremounting);
   }, [other._remotionInternalIsPremounting, parentSequence?.premounting]);
-  const postmounting = useMemo15(() => {
+  const postmounting = useMemo16(() => {
     return parentSequence?.postmounting || Boolean(other._remotionInternalIsPostmounting);
   }, [other._remotionInternalIsPostmounting, parentSequence?.postmounting]);
-  const contextValue = useMemo15(() => {
+  const contextValue = useMemo16(() => {
     return {
       cumulatedFrom,
       relativeFrom: from,
@@ -7832,7 +8093,7 @@ var RegularSequenceRefForwardingFunction = ({
     premountDisplay,
     postmountDisplay
   ]);
-  const timelineClipName = useMemo15(() => {
+  const timelineClipName = useMemo16(() => {
     return name ?? "";
   }, [name]);
   const env = useRemotionEnvironment();
@@ -7915,7 +8176,7 @@ var RegularSequenceRefForwardingFunction = ({
   const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
   const content = absoluteFrame < cumulatedFrom + from ? null : absoluteFrame > endThreshold ? null : children;
   const styleIfThere = other.layout === "none" ? undefined : other.style;
-  const defaultStyle = useMemo15(() => {
+  const defaultStyle = useMemo16(() => {
     return {
       flexDirection: undefined,
       ...width ? { width } : {},
@@ -7940,9 +8201,9 @@ var RegularSequenceRefForwardingFunction = ({
     })
   });
 };
-var RegularSequence = forwardRef2(RegularSequenceRefForwardingFunction);
+var RegularSequence = forwardRef3(RegularSequenceRefForwardingFunction);
 var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
-  const parentPremountContext = useContext15(PremountContext);
+  const parentPremountContext = useContext16(PremountContext);
   const frame = useCurrentFrame() - parentPremountContext.premountFramesRemaining;
   if (props.layout === "none") {
     throw new Error('`<Sequence>` with `premountFor` and `postmountFor` props does not support layout="none"');
@@ -7962,7 +8223,7 @@ var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
   const postmountingActive = frame > endThreshold && frame <= endThreshold + postmountFor;
   const freezeFrame = premountingActive ? from : postmountingActive ? from + durationInFrames - 1 : 0;
   const isFreezingActive = premountingActive || postmountingActive;
-  const style = useMemo15(() => {
+  const style = useMemo16(() => {
     return {
       ...passedStyle,
       opacity: premountingActive || postmountingActive ? 0 : 1,
@@ -7980,7 +8241,7 @@ var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
   return /* @__PURE__ */ jsx12(Freeze, {
     frame: freezeFrame,
     active: isFreezingActive,
-    children: /* @__PURE__ */ jsx12(Sequence, {
+    children: /* @__PURE__ */ jsx12(SequenceInner, {
       ref,
       from,
       durationInFrames,
@@ -7993,7 +8254,7 @@ var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
     })
   });
 };
-var PremountedPostmountedSequence = forwardRef2(PremountedPostmountedSequenceRefForwardingFunction);
+var PremountedPostmountedSequence = forwardRef3(PremountedPostmountedSequenceRefForwardingFunction);
 var SequenceRefForwardingFunction = (props, ref) => {
   const env = useRemotionEnvironment();
   const { fps } = useVideoConfig();
@@ -8012,7 +8273,8 @@ var SequenceRefForwardingFunction = (props, ref) => {
     ref
   });
 };
-var Sequence = forwardRef2(SequenceRefForwardingFunction);
+var SequenceInner = forwardRef3(SequenceRefForwardingFunction);
+var Sequence = wrapInSchema(SequenceInner, sequenceSchema);
 var calcArgs = (fit, frameSize, canvasSize) => {
   switch (fit) {
     case "fill": {
@@ -8108,7 +8370,7 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style }, ref
     style
   });
 };
-var Canvas = React14.forwardRef(CanvasRefForwardingFunction);
+var Canvas = React15.forwardRef(CanvasRefForwardingFunction);
 var CACHE_SIZE = 5;
 var getActualTime = ({
   loopBehavior,
@@ -8255,7 +8517,7 @@ var resolveAnimatedImageSource = (src) => {
   }
   return new URL(src, window.origin).href;
 };
-var AnimatedImage = forwardRef3(({
+var AnimatedImage = forwardRef4(({
   src,
   width,
   height,
@@ -8274,9 +8536,9 @@ var AnimatedImage = forwardRef3(({
     };
   }, []);
   const resolvedSrc = resolveAnimatedImageSource(src);
-  const [imageDecoder, setImageDecoder] = useState6(null);
+  const [imageDecoder, setImageDecoder] = useState7(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const [decodeHandle] = useState6(() => delayRender2(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
+  const [decodeHandle] = useState7(() => delayRender2(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
   const currentTime = frame / playbackRate / fps;
@@ -8290,7 +8552,7 @@ var AnimatedImage = forwardRef3(({
     }
     return c;
   }, []);
-  const [initialLoopBehavior] = useState6(() => loopBehavior);
+  const [initialLoopBehavior] = useState7(() => loopBehavior);
   useEffect6(() => {
     const controller = new AbortController;
     decodeImage({
@@ -8362,158 +8624,6 @@ var AnimatedImage = forwardRef3(({
     ...props
   });
 });
-var getEffectiveVisualModeValue = ({
-  codeValue,
-  runtimeValue,
-  dragOverrideValue,
-  defaultValue,
-  shouldResortToDefaultValueIfUndefined = false
-}) => {
-  if (dragOverrideValue !== undefined) {
-    return dragOverrideValue;
-  }
-  if (!codeValue) {
-    return runtimeValue;
-  }
-  if (!codeValue.canUpdate) {
-    return runtimeValue;
-  }
-  if (codeValue.codeValue === undefined && shouldResortToDefaultValueIfUndefined) {
-    return defaultValue;
-  }
-  return codeValue.codeValue;
-};
-var useSchema = (schema, currentValue) => {
-  const env = useRemotionEnvironment();
-  const earlyReturn = useMemo16(() => {
-    if (!env.isStudio || env.isReadOnlyStudio) {
-      return {
-        controls: undefined,
-        values: currentValue ?? {}
-      };
-    }
-    return;
-  }, [env.isStudio, env.isReadOnlyStudio, currentValue]);
-  if (earlyReturn) {
-    return earlyReturn;
-  }
-  const [overrideId] = useState7(() => String(Math.random()));
-  const {
-    visualModeEnabled,
-    dragOverrides: overrides,
-    codeValues
-  } = useContext16(VisualModeOverridesContext);
-  const controls = useMemo16(() => {
-    if (!visualModeEnabled) {
-      return;
-    }
-    if (schema === null || currentValue === null) {
-      return;
-    }
-    return {
-      schema,
-      currentValue,
-      overrideId
-    };
-  }, [schema, currentValue, overrideId, visualModeEnabled]);
-  return useMemo16(() => {
-    if (controls === undefined || currentValue === null || schema === null || !visualModeEnabled) {
-      return {
-        controls: undefined,
-        values: currentValue ?? {}
-      };
-    }
-    const overrideValues = overrides[overrideId] ?? {};
-    const propStatus = codeValues[overrideId];
-    const currentValueKeys = Object.keys(currentValue);
-    const keysToUpdate = [...new Set(currentValueKeys)];
-    const merged = {};
-    for (const key of keysToUpdate) {
-      const codeValueStatus = propStatus?.[key] ?? null;
-      merged[key] = getEffectiveVisualModeValue({
-        codeValue: codeValueStatus,
-        runtimeValue: currentValue[key],
-        dragOverrideValue: overrideValues[key],
-        defaultValue: schema[key]?.default,
-        shouldResortToDefaultValueIfUndefined: false
-      });
-    }
-    return {
-      controls,
-      values: merged
-    };
-  }, [
-    controls,
-    currentValue,
-    overrideId,
-    overrides,
-    codeValues,
-    schema,
-    visualModeEnabled
-  ]);
-};
-var getNestedValue = (obj, key) => {
-  const parts = key.split(".");
-  let current = obj;
-  for (const part of parts) {
-    if (current === null || current === undefined || typeof current !== "object")
-      return;
-    current = current[part];
-  }
-  return current;
-};
-var mergeValues = (props, values, schemaKeys) => {
-  const merged = { ...props };
-  for (const key of schemaKeys) {
-    const value = values[key];
-    const parts = key.split(".");
-    if (parts.length === 1) {
-      merged[key] = value;
-      continue;
-    }
-    let current = merged;
-    for (let i = 0;i < parts.length - 1; i++) {
-      const part = parts[i];
-      if (typeof current[part] === "object" && current[part] !== null) {
-        current[part] = { ...current[part] };
-      } else {
-        current[part] = {};
-      }
-      current = current[part];
-    }
-    current[parts[parts.length - 1]] = value;
-  }
-  return merged;
-};
-var wrapInSchema = (Component, schema) => {
-  const schemaKeys = Object.keys(schema);
-  const Wrapped = forwardRef4((props, ref) => {
-    const env = useRemotionEnvironment();
-    if (!env.isStudio || env.isReadOnlyStudio || env.isRendering || !process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) {
-      return React15.createElement(Component, {
-        ...props,
-        _experimentalControls: null,
-        ref
-      });
-    }
-    const schemaInput = useMemo17(() => {
-      const input = {};
-      for (const key of schemaKeys) {
-        input[key] = getNestedValue(props, key);
-      }
-      return input;
-    }, schemaKeys.map((key) => getNestedValue(props, key)));
-    const { controls, values } = useSchema(schema, schemaInput);
-    const mergedProps = mergeValues(props, values, schemaKeys);
-    return React15.createElement(Component, {
-      ...mergedProps,
-      _experimentalControls: controls,
-      ref
-    });
-  });
-  Wrapped.displayName = `wrapInSchema(${Component.displayName || Component.name || "Component"})`;
-  return Wrapped;
-};
 var cachedSupport = null;
 var isHtmlInCanvasSupported = () => {
   if (cachedSupport !== null) {
@@ -8552,40 +8662,10 @@ var defaultOnPaint = ({
   element.style.transform = transform.toString();
 };
 var HtmlInCanvasAncestorContext = createContext15(false);
-var htmlInCanvasSchema = {
-  "style.translate": {
-    type: "translate",
-    step: 1,
-    default: "0px 0px",
-    description: "Position"
-  },
-  "style.scale": {
-    type: "number",
-    min: 0.05,
-    max: 100,
-    step: 0.01,
-    default: 1,
-    description: "Scale"
-  },
-  "style.rotate": {
-    type: "rotation",
-    step: 1,
-    default: "0deg",
-    description: "Rotation"
-  },
-  "style.opacity": {
-    type: "number",
-    min: 0,
-    max: 1,
-    step: 0.01,
-    default: 1,
-    description: "Opacity"
-  }
-};
 var HtmlInCanvasInner = forwardRef5(({
   width,
   height,
-  _experimentalEffects: experimentalEffects = [],
+  _experimentalEffects: effects = [],
   children,
   onPaint,
   onInit,
@@ -8615,8 +8695,8 @@ var HtmlInCanvasInner = forwardRef5(({
   }, [ref]);
   const [offscreenCanvas] = useState8(() => new OffscreenCanvas(1, 1));
   const chainState = useEffectChainState();
-  const effectsRef = useRef9(experimentalEffects);
-  effectsRef.current = experimentalEffects;
+  const effectsRef = useRef9(effects);
+  effectsRef.current = effects;
   const frameRef = useRef9(frame);
   frameRef.current = frame;
   const onPaintRef = useRef9(onPaint);
@@ -8730,13 +8810,12 @@ var HtmlInCanvasInner = forwardRef5(({
       continueRender2(handle);
     };
   }, [width, height, continueRender2]);
-  const innerStyle = useMemo18(() => {
+  const innerStyle = useMemo17(() => {
     return {
       width,
-      height,
-      ...style
+      height
     };
-  }, [width, height, style]);
+  }, [width, height]);
   if (isInsideAncestorHtmlInCanvas) {
     throw new Error("<HtmlInCanvas> effects cannot be nested together. Chrome will only display the outer effect. Consider merging the effects into one if you can.");
   }
@@ -8744,6 +8823,7 @@ var HtmlInCanvasInner = forwardRef5(({
     durationInFrames: resolvedDuration,
     name: "<HtmlInCanvas>",
     _experimentalControls: controls,
+    _experimentalEffects: effects,
     layout: "none",
     ...sequenceProps,
     children: /* @__PURE__ */ jsx15(HtmlInCanvasAncestorContext.Provider, {
@@ -8752,6 +8832,7 @@ var HtmlInCanvasInner = forwardRef5(({
         ref: setLayoutCanvasRef,
         width,
         height,
+        style,
         children: /* @__PURE__ */ jsx15("div", {
           ref: divRef,
           style: innerStyle,
@@ -8762,7 +8843,7 @@ var HtmlInCanvasInner = forwardRef5(({
   });
 });
 HtmlInCanvasInner.displayName = "HtmlInCanvas";
-var HtmlInCanvasWrapped = wrapInSchema(HtmlInCanvasInner, htmlInCanvasSchema);
+var HtmlInCanvasWrapped = wrapInSchema(HtmlInCanvasInner, sequenceStyleSchema);
 var HtmlInCanvas = Object.assign(HtmlInCanvasWrapped, {
   isSupported: isHtmlInCanvasSupported
 });
@@ -8840,7 +8921,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
       };
     }
   }, []);
-  const contextValue = useMemo19(() => {
+  const contextValue = useMemo18(() => {
     return {
       registerRenderAsset,
       unregisterRenderAsset,
@@ -8969,14 +9050,14 @@ var Loop = ({
   const iteration = Math.floor(currentFrame / durationInFrames);
   const start = iteration * durationInFrames;
   const from = Math.min(start, maxFrame);
-  const loopDisplay = useMemo20(() => {
+  const loopDisplay = useMemo19(() => {
     return {
       numberOfTimes: Math.min(compDuration / durationInFrames, times),
       startOffset: -from,
       durationInFrames
     };
   }, [compDuration, durationInFrames, from, times]);
-  const loopContext = useMemo20(() => {
+  const loopContext = useMemo19(() => {
     return {
       iteration: Math.floor(currentFrame / durationInFrames),
       durationInFrames
@@ -9335,7 +9416,7 @@ var DurationsContext = createContext19({
 });
 var DurationsContextProvider = ({ children }) => {
   const [durations, setDurations] = useReducer(durationReducer, {});
-  const value = useMemo21(() => {
+  const value = useMemo20(() => {
     return {
       durations,
       setDurations
@@ -9469,7 +9550,7 @@ var useSingletonAudioContext = ({
   audioEnabled
 }) => {
   const env = useRemotionEnvironment();
-  return useMemo22(() => {
+  const context = useMemo21(() => {
     if (env.isRendering) {
       return null;
     }
@@ -9486,11 +9567,19 @@ var useSingletonAudioContext = ({
     });
     const gainNode = audioContext.createGain();
     gainNode.connect(audioContext.destination);
+    Log.trace({ logLevel, tag: "audio" }, "Creating new audio context");
+    audioContext.suspend();
     return {
       audioContext,
       gainNode
     };
   }, [logLevel, latencyHint, env.isRendering, audioEnabled]);
+  useEffect8(() => {
+    return () => {
+      context?.audioContext?.close();
+    };
+  }, [context]);
+  return context;
 };
 var waitUntilActuallyResumed = (audioContext, logLevel) => {
   return new Promise((resolve) => {
@@ -9549,9 +9638,9 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
   });
   const audioContextIsPlayingEventually = useRef11(false);
   const isResuming = useRef11(null);
-  const audioSyncAnchor = useMemo23(() => ({ value: 0 }), []);
+  const audioSyncAnchor = useMemo22(() => ({ value: 0 }), []);
   const audioSyncAnchorListeners = useRef11([]);
-  const audioSyncAnchorEmitter = useMemo23(() => {
+  const audioSyncAnchorEmitter = useMemo22(() => {
     return {
       dispatch: (event) => {
         audioSyncAnchorListeners.current.forEach((l) => l(event));
@@ -9571,7 +9660,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
   const unscheduleAudioNode = useCallback9((node) => {
     nodesToResume.current.delete(node);
   }, []);
-  const scheduleAudioNode = useMemo23(() => {
+  const scheduleAudioNode = useMemo22(() => {
     return ({
       node,
       mediaTimestamp,
@@ -9634,12 +9723,11 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
       isResuming.current = null;
     });
     ctxAndGain.gainNode.gain.cancelScheduledValues(ctxAndGain.audioContext.currentTime);
-    ctxAndGain.gainNode?.gain.setValueAtTime(0, ctxAndGain.audioContext.currentTime);
-    ctxAndGain.gainNode?.gain.linearRampToValueAtTime(1, ctxAndGain.audioContext.currentTime + 0.03);
-    return resumePromise.then(() => {
-      nodesToResume.current.forEach((r2, node) => node.start(r2.scheduledTime, r2.offset, r2.duration));
-      nodesToResume.current.clear();
-    }).catch(() => {});
+    ctxAndGain.gainNode.gain.setValueAtTime(0, ctxAndGain.audioContext.currentTime);
+    ctxAndGain.gainNode.gain.linearRampToValueAtTime(1, ctxAndGain.audioContext.currentTime + 0.03);
+    nodesToResume.current.forEach((r2, node) => node.start(r2.scheduledTime, r2.offset, r2.duration));
+    nodesToResume.current.clear();
+    return resumePromise.catch(() => {});
   }, [ctxAndGain, logLevel]);
   const getIsResumingAudioContext = useCallback9(() => {
     return isResuming.current;
@@ -9654,7 +9742,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
     audioContextIsPlayingEventually.current = false;
     ctxAndGain.audioContext.suspend();
   }, [ctxAndGain]);
-  const audioContextValue = useMemo23(() => {
+  const audioContextValue = useMemo22(() => {
     return {
       audioContext: ctxAndGain?.audioContext ?? null,
       gainNode: ctxAndGain?.gainNode ?? null,
@@ -9693,7 +9781,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
   const audioCtx = useContext20(SharedAudioContext);
   const audioContext = audioCtx?.audioContext ?? null;
   const resume = audioCtx?.resume;
-  const refs = useMemo23(() => {
+  const refs = useMemo22(() => {
     return new Array(numberOfAudioTags).fill(true).map(() => {
       const ref = createRef2();
       return {
@@ -9830,7 +9918,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     });
     resume?.();
   }, [logLevel, mountTime, refs, env.isPlayer, resume]);
-  const audioTagsValue = useMemo23(() => {
+  const audioTagsValue = useMemo22(() => {
     return {
       registerAudio,
       unregisterAudio,
@@ -10209,7 +10297,7 @@ var useBasicMediaInTimeline = ({
     parentSequenceDurationInFrames: parentSequence?.durationInFrames ?? null,
     loop
   });
-  const volumes = useMemo24(() => {
+  const volumes = useMemo23(() => {
     if (typeof volume === "number") {
       return volume;
     }
@@ -10221,7 +10309,7 @@ var useBasicMediaInTimeline = ({
       });
     }).join(",");
   }, [duration, mediaStartsAt, volume, mediaVolume]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (typeof volume === "number" && volume !== initialVolume) {
       warnOnce2(`Remotion: The ${mediaType} with src ${src} has changed it's volume. Prefer the callback syntax for setting volume to get better timeline display: https://www.remotion.dev/docs/audio/volume`);
     }
@@ -10230,7 +10318,7 @@ var useBasicMediaInTimeline = ({
   const nonce = useNonce();
   const { rootId } = useTimelineContext();
   const startMediaFrom = 0 - mediaStartsAt + (trimBefore ?? 0);
-  const memoizedResult = useMemo24(() => {
+  const memoizedResult = useMemo23(() => {
     return {
       volumes,
       duration,
@@ -10284,7 +10372,7 @@ var useImageInTimeline = ({
     loop: false
   });
   const { isStudio } = useRemotionEnvironment();
-  useEffect8(() => {
+  useEffect9(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -10367,7 +10455,7 @@ var useMediaInTimeline = ({
     loop: false
   });
   const { isStudio } = useRemotionEnvironment();
-  useEffect8(() => {
+  useEffect9(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -10469,7 +10557,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     };
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     if (rendering) {
       return;
     }
@@ -10499,7 +10587,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     }, [blocks]);
   }
-  return useMemo25(() => {
+  return useMemo24(() => {
     return { addBlock, listenForBuffering, listenForResume, buffering };
   }, [addBlock, buffering, listenForBuffering, listenForResume]);
 };
@@ -10514,7 +10602,7 @@ var BufferingProvider = ({ children }) => {
 };
 var useIsPlayerBuffering = (bufferManager) => {
   const [isBuffering, setIsBuffering] = useState14(bufferManager.buffering.current);
-  useEffect9(() => {
+  useEffect10(() => {
     const onBuffer = () => {
       setIsBuffering(true);
     };
@@ -10537,7 +10625,7 @@ var useIsPlayerBuffering = (bufferManager) => {
 var useBufferState = () => {
   const buffer = useContext25(BufferingContextReact);
   const addBlock = buffer ? buffer.addBlock : null;
-  return useMemo26(() => ({
+  return useMemo25(() => ({
     delayPlayback: () => {
       if (!addBlock) {
         throw new Error("Tried to enable the buffering state, but a Remotion context was not found. This API can only be called in a component that was passed to the Remotion Player or a <Composition>. Or you might have experienced a version mismatch - run `npx remotion versions` and ensure all packages have the same version. This error is thrown by the buffer state https://remotion.dev/docs/player/buffer-state");
@@ -10634,7 +10722,7 @@ var useBufferUntilFirstFrame = ({
     onVariableFpsVideoDetected,
     pauseWhenBuffering
   ]);
-  return useMemo27(() => {
+  return useMemo26(() => {
     return {
       isBuffering: () => bufferingRef.current,
       bufferUntilFirstFrame
@@ -10683,7 +10771,7 @@ var useMediaBuffering = ({
 }) => {
   const buffer = useBufferState();
   const [isBuffering, setIsBuffering] = useState15(false);
-  useEffect10(() => {
+  useEffect11(() => {
     let cleanupFns = [];
     const { current } = element;
     if (!current) {
@@ -10816,7 +10904,7 @@ var useRequestVideoCallbackTime = ({
   onVariableFpsVideoDetected
 }) => {
   const currentTime = useRef16(null);
-  useEffect11(() => {
+  useEffect12(() => {
     const { current } = mediaRef;
     if (current) {
       currentTime.current = {
@@ -11036,7 +11124,7 @@ var useMediaPlayback = ({
   isPostmounting,
   onAutoPlayError
 }) => {
-  const { playbackRate: globalPlaybackRate } = useTimelineContext();
+  const { playbackRate: globalPlaybackRate } = usePlaybackRate();
   const frame = useCurrentFrame();
   const absoluteFrame = useTimelinePosition();
   const [playing] = usePlayingState();
@@ -11102,7 +11190,7 @@ var useMediaPlayback = ({
     return acceptableTimeshift ?? defaultAcceptableTimeshift;
   })();
   const isPlayerBuffering = useIsPlayerBuffering(buffering);
-  useEffect12(() => {
+  useEffect13(() => {
     if (mediaRef.current?.paused) {
       return;
     }
@@ -11147,7 +11235,7 @@ var useMediaPlayback = ({
       mediaRef.current.playbackRate = playbackRateToSet;
     }
   }, [mediaRef, playbackRate]);
-  useEffect12(() => {
+  useEffect13(() => {
     const tagName = mediaType === "audio" ? "<Html5Audio>" : "<Html5Video>";
     if (!mediaRef.current) {
       throw new Error(`No ${mediaType} ref found`);
@@ -11276,7 +11364,7 @@ var useMediaTag = ({
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const env = useRemotionEnvironment();
-  useEffect13(() => {
+  useEffect14(() => {
     const tag = {
       id,
       play: (reason) => {
@@ -11330,14 +11418,14 @@ var SetMediaVolumeContext = createContext21({
 var useMediaVolumeState = () => {
   const { mediaVolume } = useContext27(MediaVolumeContext);
   const { setMediaVolume } = useContext27(SetMediaVolumeContext);
-  return useMemo28(() => {
+  return useMemo27(() => {
     return [mediaVolume, setMediaVolume];
   }, [mediaVolume, setMediaVolume]);
 };
 var useMediaMutedState = () => {
   const { mediaMuted } = useContext27(MediaVolumeContext);
   const { setMediaMuted } = useContext27(SetMediaVolumeContext);
-  return useMemo28(() => {
+  return useMemo27(() => {
     return [mediaMuted, setMediaMuted];
   }, [mediaMuted, setMediaMuted]);
 };
@@ -11405,7 +11493,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     requestsVideoFrame: false,
     isClientSideRendering: false
   });
-  const propsToPass = useMemo29(() => {
+  const propsToPass = useMemo28(() => {
     return {
       muted: muted || mediaMuted || isSequenceHidden || userPreferredVolume <= 0,
       src: preloadedSrc,
@@ -11423,7 +11511,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     userPreferredVolume,
     crossOriginValue
   ]);
-  const id = useMemo29(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
+  const id = useMemo28(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
     src,
     sequenceContext?.relativeFrom,
     sequenceContext?.cumulatedFrom,
@@ -11495,7 +11583,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   }, [audioRef]);
   const currentOnDurationCallback = useRef18(onDuration);
   currentOnDurationCallback.current = onDuration;
-  useEffect14(() => {
+  useEffect15(() => {
     const { current } = audioRef;
     if (!current) {
       return;
@@ -11549,7 +11637,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   const sequenceContext = useContext29(SequenceContext);
   const { registerRenderAsset, unregisterRenderAsset } = useContext29(RenderAssetManager);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const id = useMemo30(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo29(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
     props.src,
     sequenceContext?.relativeFrom,
     sequenceContext?.cumulatedFrom,
@@ -11564,7 +11652,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   useImperativeHandle5(ref, () => {
     return audioRef.current;
   }, []);
-  useEffect15(() => {
+  useEffect16(() => {
     if (!props.src) {
       throw new Error("No src passed");
     }
@@ -11814,36 +11902,6 @@ function truncateSrcForLabel(src) {
   }
   return src;
 }
-var imgSchema = {
-  "style.translate": {
-    type: "translate",
-    step: 1,
-    default: "0px 0px",
-    description: "Position"
-  },
-  "style.scale": {
-    type: "number",
-    min: 0.05,
-    max: 100,
-    step: 0.01,
-    default: 1,
-    description: "Scale"
-  },
-  "style.rotate": {
-    type: "rotation",
-    step: 1,
-    default: "0deg",
-    description: "Rotation"
-  },
-  "style.opacity": {
-    type: "number",
-    min: 0,
-    max: 1,
-    step: 0.01,
-    default: 1,
-    description: "Opacity"
-  }
-};
 var ImgInner = ({
   onError,
   maxRetries = 2,
@@ -12007,7 +12065,7 @@ var ImgInner = ({
     decoding: "sync"
   });
 };
-var Img = wrapInSchema(ImgInner, imgSchema);
+var Img = wrapInSchema(ImgInner, sequenceStyleSchema);
 addSequenceStackTraces(Img);
 var compositionsRef = React28.createRef();
 var CompositionManagerProvider = ({
@@ -12063,7 +12121,7 @@ var CompositionManagerProvider = ({
       getCompositions: () => currentcompositionsRef.current
     };
   }, []);
-  const compositionManagerSetters = useMemo31(() => {
+  const compositionManagerSetters = useMemo30(() => {
     return {
       registerComposition,
       unregisterComposition,
@@ -12079,7 +12137,7 @@ var CompositionManagerProvider = ({
     unregisterFolder,
     onlyRenderComposition
   ]);
-  const compositionManagerContextValue = useMemo31(() => {
+  const compositionManagerContextValue = useMemo30(() => {
     return {
       compositions,
       folders,
@@ -12209,7 +12267,7 @@ var MediaEnabledProvider = ({
   videoEnabled,
   audioEnabled
 }) => {
-  const value = useMemo322(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
+  const value = useMemo31(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
   return /* @__PURE__ */ jsx28(MediaEnabledContext.Provider, {
     value,
     children
@@ -12225,13 +12283,13 @@ var RemotionRootContexts = ({
   frameState,
   visualModeEnabled
 }) => {
-  const nonceContext = useMemo33(() => {
+  const nonceContext = useMemo322(() => {
     let counter = 0;
     return {
       getNonce: () => counter++
     };
   }, []);
-  const logging = useMemo33(() => {
+  const logging = useMemo322(() => {
     return { logLevel, mountTime: Date.now() };
   }, [logLevel]);
   return /* @__PURE__ */ jsx29(LogLevelContext.Provider, {
@@ -12533,7 +12591,7 @@ var OffthreadVideoForRendering = ({
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
-  const id = useMemo34(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo33(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -12548,7 +12606,7 @@ var OffthreadVideoForRendering = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -12588,14 +12646,14 @@ var OffthreadVideoForRendering = ({
     sequenceContext?.relativeFrom,
     audioStreamIndex
   ]);
-  const currentTime = useMemo34(() => {
+  const currentTime = useMemo33(() => {
     return getExpectedMediaFrameUncorrected({
       frame,
       playbackRate: playbackRate || 1,
       startFrom: -mediaStartsAt
     }) / videoConfig.fps;
   }, [frame, mediaStartsAt, playbackRate, videoConfig.fps]);
-  const actualSrc = useMemo34(() => {
+  const actualSrc = useMemo33(() => {
     return getOffthreadVideoSource({
       src,
       currentTime,
@@ -12683,7 +12741,7 @@ var OffthreadVideoForRendering = ({
       cancelRender("Failed to load image with src " + imageSrc);
     }
   }, [imageSrc, onError]);
-  const className = useMemo34(() => {
+  const className = useMemo33(() => {
     return [OBJECTFIT_CONTAIN_CLASS_NAME, props2.className].filter(truthy2).join(" ");
   }, [props2.className]);
   const onImageFrame = useCallback17((img) => {
@@ -12709,7 +12767,7 @@ var useEmitVideoFrame = ({
   ref,
   onVideoFrame
 }) => {
-  useEffect17(() => {
+  useEffect18(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -12746,7 +12804,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     throw new Error("SharedAudioContext not found");
   }
   const videoRef = useRef22(null);
-  const sharedSource = useMemo35(() => {
+  const sharedSource = useMemo34(() => {
     if (!context.audioContext) {
       return null;
     }
@@ -12873,7 +12931,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     tag: "video",
     mountTime
   }));
-  useEffect18(() => {
+  useEffect19(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -12916,7 +12974,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const currentOnDurationCallback = useRef22(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect18(() => {
+  useEffect19(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -12933,7 +12991,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.removeEventListener("loadedmetadata", onLoadedMetadata);
     };
   }, [src]);
-  useEffect18(() => {
+  useEffect19(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -12944,7 +13002,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.preload = "auto";
     }
   }, []);
-  const actualStyle = useMemo35(() => {
+  const actualStyle = useMemo34(() => {
     return {
       ...style,
       opacity: isSequenceHidden ? 0 : style?.opacity ?? 1
@@ -13138,7 +13196,7 @@ function useRemotionContexts() {
   const sequenceManagerContext = React36.useContext(SequenceManager);
   const bufferManagerContext = React36.useContext(BufferingContextReact);
   const logLevelContext = React36.useContext(LogLevelContext);
-  return useMemo36(() => ({
+  return useMemo35(() => ({
     compositionManagerCtx,
     timelineContext,
     setTimelineContext,
@@ -13226,8 +13284,11 @@ var Internals = {
   SequenceManager,
   SequenceStackTracesUpdateContext,
   SequenceVisibilityToggleContext,
-  useSchema,
   wrapInSchema,
+  sequenceSchema,
+  sequenceStyleSchema,
+  flattenActiveSchema,
+  getFlatSchemaWithAllKeys,
   useSequenceControlOverride,
   RemotionRootContexts,
   CompositionManagerProvider,
@@ -13277,6 +13338,7 @@ var Internals = {
   REMOTION_STUDIO_CONTAINER_ELEMENT,
   RenderAssetManager,
   persistCurrentFrame,
+  usePlaybackRate,
   useTimelineContext,
   useTimelineSetFrame,
   isIosSafari,
@@ -13310,6 +13372,7 @@ var Internals = {
   TimelinePosition: exports_timeline_position_state,
   DelayRenderContextType,
   TimelineContext,
+  PlaybackRateContext,
   AbsoluteTimeContext,
   RenderAssetManagerProvider,
   getEffectiveVisualModeValue,
@@ -13318,7 +13381,8 @@ var Internals = {
   runEffectChain,
   useMemoizedEffects,
   defineEffect,
-  createDescriptor
+  createDescriptor,
+  computeEffectiveSchemaValuesDotNotation
 };
 var NUMBER = "[-+]?\\d*\\.?\\d+";
 var PERCENTAGE = NUMBER + "%";
@@ -13382,8 +13446,8 @@ var SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
   });
 };
 var SeriesSequence = forwardRef11(SeriesSequenceRefForwardingFunction);
-var Series = (props2) => {
-  const childrenValue = useMemo37(() => {
+var SeriesInner = (props2) => {
+  const childrenValue = useMemo36(() => {
     let startFrame = 0;
     const flattenedChildren = flattenChildren(props2.children);
     return Children.map(flattenedChildren, (child, i) => {
@@ -13446,7 +13510,9 @@ var Series = (props2) => {
     })
   });
 };
-Series.Sequence = SeriesSequence;
+var Series = Object.assign(wrapInSchema(SeriesInner, sequenceSchemaDefaultLayoutNone), {
+  Sequence: SeriesSequence
+});
 addSequenceStackTraces(Series);
 addSequenceStackTraces(SeriesSequence);
 var validateSpringDuration = (dur) => {
@@ -13921,7 +13987,7 @@ var VideoForRenderingForwardFunction = ({
   const mountTime = useMountTime();
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   const { registerRenderAsset, unregisterRenderAsset } = useContext36(RenderAssetManager);
-  const id = useMemo38(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo37(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -13936,7 +14002,7 @@ var VideoForRenderingForwardFunction = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect19(() => {
+  useEffect20(() => {
     if (!props2.src) {
       throw new Error("No src passed");
     }
@@ -13979,7 +14045,7 @@ var VideoForRenderingForwardFunction = ({
   useImperativeHandle9(ref, () => {
     return videoRef.current;
   }, []);
-  useEffect19(() => {
+  useEffect20(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -14269,10 +14335,10 @@ import { jsx as jsx152 } from "react/jsx-runtime";
 import * as React122 from "react";
 import { jsx as jsx162 } from "react/jsx-runtime";
 import * as React16 from "react";
-import * as React13 from "react";
+import * as React132 from "react";
 import * as ReactDOM from "react-dom";
 import { jsx as jsx172 } from "react/jsx-runtime";
-import * as React142 from "react";
+import * as React14 from "react";
 import * as React152 from "react";
 import { jsx as jsx182 } from "react/jsx-runtime";
 import * as React172 from "react";
@@ -14499,8 +14565,8 @@ var useHoverTransforms = (ref, disabled) => {
     progress: 0,
     isActive: false
   });
-  const eventTarget = useMemo39(() => new EventTarget, []);
-  useEffect20(() => {
+  const eventTarget = useMemo38(() => new EventTarget, []);
+  useEffect21(() => {
     if (disabled) {
       eventTarget.dispatchEvent(new Event("disabled"));
     } else {
@@ -14647,7 +14713,7 @@ var getAngle = (ref, coordinates) => {
 var lastCoordinates = null;
 var useMousePosition = (ref) => {
   const [angle, setAngle] = useState23(getAngle(ref.current, lastCoordinates));
-  useEffect20(() => {
+  useEffect21(() => {
     const element = ref.current;
     if (!element) {
       return;
@@ -15311,7 +15377,7 @@ var NODES = [
   "ul"
 ];
 var Primitive = NODES.reduce((primitive, node) => {
-  const Node2 = React13.forwardRef((props, forwardedRef) => {
+  const Node2 = React132.forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
     const Comp = asChild ? Slot2 : node;
     if (typeof window !== "undefined") {
@@ -15327,11 +15393,11 @@ function dispatchDiscreteCustomEvent(target, event) {
     ReactDOM.flushSync(() => target.dispatchEvent(event));
 }
 function useCallbackRef(callback) {
-  const callbackRef = React142.useRef(callback);
-  React142.useEffect(() => {
+  const callbackRef = React14.useRef(callback);
+  React14.useEffect(() => {
     callbackRef.current = callback;
   });
-  return React142.useMemo(() => (...args) => callbackRef.current?.(...args), []);
+  return React14.useMemo(() => (...args) => callbackRef.current?.(...args), []);
 }
 function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.document) {
   const onEscapeKeyDown = useCallbackRef(onEscapeKeyDownProp);