@remotion/promo-pages 4.0.460 → 4.0.461

package/dist/prompts/PromptsShow.js

@@ -23090,6 +23090,7 @@ import {
 } from "react";
 import { jsx as jsx82 } from "react/jsx-runtime";
 import { useEffect as useEffect3, useMemo as useMemo10, useRef as useRef4 } from "react";
+import { useRef as useRef5 } from "react";
 import { jsx as jsx92 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef3,
@@ -23098,7 +23099,6 @@ import {
   useMemo as useMemo16,
   useState as useState6
 } from "react";
-import { useRef as useRef5 } from "react";
 import { useContext as useContext14, useMemo as useMemo13 } from "react";
 import { useContext as useContext13 } from "react";
 import { useContext as useContext12, useMemo as useMemo12 } from "react";
@@ -24552,6 +24552,39 @@ var useCurrentFrame = () => {
   const contextOffset = context ? context.cumulatedFrom + context.relativeFrom : 0;
   return frame - contextOffset;
 };
+var flattenEffects = (effects) => {
+  const out = [];
+  for (const item of effects) {
+    if (Array.isArray(item)) {
+      for (const inner of item) {
+        out.push(inner);
+      }
+    } else {
+      out.push(item);
+    }
+  }
+  return out;
+};
+var groupByBackend = (effects) => {
+  const runs = [];
+  let current = [];
+  let currentBackend = null;
+  for (const eff of effects) {
+    const { backend } = eff.definition;
+    if (currentBackend === null || backend === currentBackend) {
+      current.push(eff);
+      currentBackend = backend;
+    } else {
+      runs.push({ backend: currentBackend, effects: current });
+      current = [eff];
+      currentBackend = backend;
+    }
+  }
+  if (currentBackend !== null && current.length > 0) {
+    runs.push({ backend: currentBackend, effects: current });
+  }
+  return runs;
+};
 
 class CanvasPool {
   width;
@@ -24625,39 +24658,6 @@ class CanvasPool {
     }
   }
 }
-var flattenEffects = (effects) => {
-  const out = [];
-  for (const item of effects) {
-    if (Array.isArray(item)) {
-      for (const inner of item) {
-        out.push(inner);
-      }
-    } else {
-      out.push(item);
-    }
-  }
-  return out;
-};
-var groupByBackend = (effects) => {
-  const runs = [];
-  let current = [];
-  let currentBackend = null;
-  for (const eff of effects) {
-    const { backend } = eff.definition;
-    if (currentBackend === null || backend === currentBackend) {
-      current.push(eff);
-      currentBackend = backend;
-    } else {
-      runs.push({ backend: currentBackend, effects: current });
-      current = [eff];
-      currentBackend = backend;
-    }
-  }
-  if (currentBackend !== null && current.length > 0) {
-    runs.push({ backend: currentBackend, effects: current });
-  }
-  return runs;
-};
 var devicePromise = null;
 var getGpuDevice = () => {
   if (devicePromise) {
@@ -24709,8 +24709,7 @@ var runEffectChain = async ({
 }) => {
   const runId = ++state.currentRunId;
   const isCancelled = () => state.currentRunId !== runId;
-  const flattened = flattenEffects(effects);
-  const runs = groupByBackend(flattened);
+  const runs = groupByBackend(effects);
   let currentImage = source;
   let lastTarget = null;
   if (runs.length === 0) {
@@ -24804,12 +24803,29 @@ var useEffectChainState = () => {
     }
   }), []);
 };
+var useMemoizedEffects = (effects) => {
+  const previousRef = useRef5(null);
+  const previous = previousRef.current;
+  const isSame = previous !== null && previous.length === effects.length && previous.every((p, i) => p.definition === effects[i].definition && p.effectKey === effects[i].effectKey);
+  if (isSame) {
+    return previous;
+  }
+  const next = effects.map((e) => ({
+    definition: e.definition,
+    stack: e.stack,
+    effectKey: e.effectKey,
+    params: e.params,
+    memoized: true
+  }));
+  previousRef.current = next;
+  return next;
+};
 var componentsToAddStacksTo = [];
 var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.460";
+var VERSION = "4.0.461";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -24837,20 +24853,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   set();
 };
-var useMemoizedEffects = (effects) => {
-  const previousRef = useRef5(null);
-  const previous = previousRef.current;
-  const isSame = previous !== null && previous.length === effects.length && previous.every((p, i) => p.definition === effects[i].definition && p.stack === effects[i].stack);
-  if (isSame) {
-    return previous;
-  }
-  const next = effects.map((e) => ({
-    definition: e.definition,
-    stack: e.stack
-  }));
-  previousRef.current = next;
-  return next;
-};
 var useUnsafeVideoConfig = () => {
   const context = useContext12(SequenceContext);
   const ctxWidth = context?.width ?? null;
@@ -25008,6 +25010,22 @@ var sequenceStyleSchema = {
     step: 0.01,
     default: 1,
     description: "Opacity"
+  },
+  premountFor: {
+    type: "number",
+    default: 0,
+    description: "Premount For",
+    min: 0,
+    step: 1
+  },
+  postmountFor: {
+    type: "hidden"
+  },
+  styleWhilePremounted: {
+    type: "hidden"
+  },
+  styleWhilePostmounted: {
+    type: "hidden"
   }
 };
 var sequenceSchema = {
@@ -25046,7 +25064,7 @@ var SequenceVisibilityToggleContext = React12.createContext({
     throw new Error("SequenceVisibilityToggle not initialized");
   }
 });
-var getCodeValues = (codeValues, nodePath) => {
+var getCodeValuesCtx = (codeValues, nodePath) => {
   const status = codeValues[nodePathToString(nodePath)];
   if (!status) {
     return;
@@ -25056,27 +25074,15 @@ var getCodeValues = (codeValues, nodePath) => {
   }
   return status.props;
 };
-var getIsJsxInMapCallback = (codeValues, nodePath) => {
-  const status = codeValues[nodePathToString(nodePath)];
-  if (!status) {
-    return false;
-  }
-  if (!status.canUpdate) {
-    return false;
+var VisualModeCodeValuesContext = React12.createContext({
+  getCodeValues: () => {
+    throw new Error("VisualModeCodeValuesContext not initialized");
   }
-  return status.jsxInMapCallback;
-};
-var VisualModeGettersContext = React12.createContext({
+});
+var VisualModeDragOverridesContext = React12.createContext({
   getDragOverrides: () => {
-    throw new Error("VisualModeGettersContext not initialized");
-  },
-  getCodeValues: () => {
-    throw new Error("VisualModeGettersContext not initialized");
-  },
-  getIsJsxInMapCallback: () => {
-    throw new Error("VisualModeGettersContext not initialized");
-  },
-  visualModeEnabled: false
+    throw new Error("VisualModeDragOverridesContext not initialized");
+  }
 });
 var VisualModeSettersContext = React12.createContext({
   setDragOverrides: () => {
@@ -25089,7 +25095,7 @@ var VisualModeSettersContext = React12.createContext({
     throw new Error("VisualModeSettersContext not initialized");
   }
 });
-var SequenceManagerProvider = ({ children, visualModeEnabled }) => {
+var SequenceManagerProvider = ({ children }) => {
   const [sequences, setSequences] = useState4([]);
   const [hidden, setHidden] = useState4({});
   const [dragOverrides, setControlOverrides] = useState4({});
@@ -25119,10 +25125,12 @@ var SequenceManagerProvider = ({ children, visualModeEnabled }) => {
   const setCodeValues = useCallback5((nodePath, values) => {
     setCodeValuesMapState((prev) => {
       const key = nodePathToString(nodePath);
-      if (prev[key] === values) {
+      const prevKey = prev[key];
+      const newKey = values(prevKey);
+      if (prevKey === newKey) {
         return prev;
       }
-      return { ...prev, [key]: values };
+      return { ...prev, [key]: newKey };
     });
   }, []);
   const registerSequence = useCallback5((seq) => {
@@ -25146,14 +25154,22 @@ var SequenceManagerProvider = ({ children, visualModeEnabled }) => {
       setHidden
     };
   }, [hidden]);
-  const gettersContext = useMemo14(() => {
+  const getDragOverrides = useCallback5((nodePath) => {
+    return dragOverrides[nodePathToString(nodePath)] ?? {};
+  }, [dragOverrides]);
+  const getCodeValues = useCallback5((nodePath) => {
+    return getCodeValuesCtx(codeValues, nodePath);
+  }, [codeValues]);
+  const codeValuesContext = useMemo14(() => {
     return {
-      visualModeEnabled,
-      getDragOverrides: (nodePath) => dragOverrides[nodePathToString(nodePath)] ?? {},
-      getCodeValues: (nodePath) => getCodeValues(codeValues, nodePath),
-      getIsJsxInMapCallback: (nodePath) => getIsJsxInMapCallback(codeValues, nodePath)
+      getCodeValues
     };
-  }, [visualModeEnabled, dragOverrides, codeValues]);
+  }, [getCodeValues]);
+  const dragOverridesContext = useMemo14(() => {
+    return {
+      getDragOverrides
+    };
+  }, [getDragOverrides]);
   const settersContext = useMemo14(() => {
     return {
       setDragOverrides,
@@ -25165,22 +25181,58 @@ var SequenceManagerProvider = ({ children, visualModeEnabled }) => {
     value: sequenceContext,
     children: /* @__PURE__ */ jsx112(SequenceVisibilityToggleContext.Provider, {
       value: hiddenContext,
-      children: /* @__PURE__ */ jsx112(VisualModeGettersContext.Provider, {
-        value: gettersContext,
-        children: /* @__PURE__ */ jsx112(VisualModeSettersContext.Provider, {
-          value: settersContext,
-          children
+      children: /* @__PURE__ */ jsx112(VisualModeCodeValuesContext.Provider, {
+        value: codeValuesContext,
+        children: /* @__PURE__ */ jsx112(VisualModeDragOverridesContext.Provider, {
+          value: dragOverridesContext,
+          children: /* @__PURE__ */ jsx112(VisualModeSettersContext.Provider, {
+            value: settersContext,
+            children
+          })
         })
       })
     })
   });
 };
 var ENABLE_V5_BREAKING_CHANGES = false;
+var deleteNestedKey = (obj, keysToRemove) => {
+  for (const key of keysToRemove) {
+    const parts = key.split(".");
+    const parents = [obj];
+    let current = obj;
+    for (let i = 0;i < parts.length - 1; i++) {
+      const part = parts[i];
+      const next = current[part];
+      if (next === undefined || next === null) {
+        current = null;
+        break;
+      }
+      current = next;
+      parents.push(current);
+    }
+    if (current === null) {
+      continue;
+    }
+    delete current[parts[parts.length - 1]];
+    for (let i = parents.length - 1;i > 0; i--) {
+      const parent = parents[i];
+      if (Object.keys(parent).length === 0) {
+        const parentKey = parts[i - 1];
+        delete parents[i - 1][parentKey];
+      } else {
+        break;
+      }
+    }
+  }
+  return obj;
+};
 var flattenActiveSchema = (schema, resolve) => {
   const out = {};
   for (const key of Object.keys(schema)) {
     const field = schema[key];
-    if (field.type === "enum") {
+    if (field.type === "hidden") {
+      continue;
+    } else if (field.type === "enum") {
       out[key] = field;
       const current = resolve(key) ?? field.default;
       const variant = field.variants[current];
@@ -25223,6 +25275,36 @@ var OverrideIdsToNodePathsSettersContext = createContext15({
     throw new Error("OverrideIdsToNodePathsSettersContext not initialized");
   }
 });
+var findPropsToDelete = ({
+  schema,
+  key,
+  value
+}) => {
+  const fieldSchema = schema[key];
+  if (!fieldSchema) {
+    throw new Error("Key " + JSON.stringify(key) + " not found in schema");
+  }
+  if (typeof value !== "string") {
+    throw new Error("Value must be a string, but is " + JSON.stringify(value));
+  }
+  if (fieldSchema.type !== "enum") {
+    throw new Error("Key " + JSON.stringify(key) + " is not an enum");
+  }
+  const currentVariant = fieldSchema.variants[value];
+  if (!currentVariant) {
+    throw new Error("Value for " + JSON.stringify(key) + " must be one of " + Object.keys(fieldSchema.variants).map((v) => JSON.stringify(v)).join(", ") + ", got " + JSON.stringify(value));
+  }
+  const otherVariants = Object.keys(fieldSchema.variants).filter((v) => v !== value);
+  const otherKeys = new Set;
+  for (const variant of otherVariants) {
+    const otherVariant = fieldSchema.variants[variant];
+    const keys = Object.keys(otherVariant);
+    for (const k of keys) {
+      otherKeys.add(k);
+    }
+  }
+  return [...otherKeys];
+};
 var getEffectiveVisualModeValue = ({
   codeValue,
   runtimeValue,
@@ -25268,17 +25350,38 @@ var computeEffectiveSchemaValuesDotNotation = ({
   propStatus
 }) => {
   const merged = {};
+  const propsToDelete = new Set;
   for (const key of Object.keys(currentValue)) {
     const codeValueStatus = propStatus?.[key] ?? null;
-    merged[key] = getEffectiveVisualModeValue({
+    const field = findFieldInSchema(schema, key);
+    if (field?.type === "hidden") {
+      continue;
+    }
+    const value = getEffectiveVisualModeValue({
       codeValue: codeValueStatus,
       runtimeValue: currentValue[key],
       dragOverrideValue: overrideValues[key],
-      defaultValue: findFieldInSchema(schema, key)?.default,
+      defaultValue: field?.default,
       shouldResortToDefaultValueIfUndefined: false
     });
+    if (value === undefined) {
+      propsToDelete.add(key);
+    }
+    merged[key] = value;
   }
-  return merged;
+  for (const key of Object.keys(overrideValues)) {
+    if (schema[key]?.type === "enum") {
+      const propsToDeleteForKey = findPropsToDelete({
+        schema,
+        key,
+        value: merged[key]
+      });
+      for (const propToDelete of propsToDeleteForKey) {
+        propsToDelete.add(propToDelete);
+      }
+    }
+  }
+  return { merged, propsToDelete };
 };
 var getNestedValue = (obj, key) => {
   const parts = key.split(".");
@@ -25303,7 +25406,8 @@ var selectActiveKeys = (schema, values) => {
 var mergeValues = ({
   props,
   valuesDotNotation,
-  schemaKeys
+  schemaKeys,
+  propsToDelete
 }) => {
   const merged = { ...props };
   for (const key of schemaKeys) {
@@ -25325,26 +25429,25 @@ var mergeValues = ({
     }
     current[parts[parts.length - 1]] = value;
   }
+  deleteNestedKey(merged, propsToDelete);
   return merged;
 };
 var stackToOverrideMap = {};
 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, getDragOverrides, getCodeValues: getCodeValues2 } = useContext15(VisualModeGettersContext);
-    const nodePathMapping = useContext15(OverrideIdsToNodePathsGettersContext);
-    if (!env.isStudio || env.isReadOnlyStudio || env.isRendering || !visualModeEnabled) {
+    if (!env.isStudio || env.isReadOnlyStudio || env.isRendering) {
       return React13.createElement(Component, {
         ...props,
         _experimentalControls: null,
         ref
       });
     }
+    const { getCodeValues } = useContext15(VisualModeCodeValuesContext);
+    const { getDragOverrides } = useContext15(VisualModeDragOverridesContext);
+    const nodePathMapping = useContext15(OverrideIdsToNodePathsGettersContext);
     if (props._experimentalControls) {
       return React13.createElement(Component, {
         ...props,
@@ -25374,24 +25477,25 @@ var wrapInSchema = (Component, schema) => {
         overrideId
       };
     }, [currentRuntimeValueDotNotation, overrideId]);
-    const valuesDotNotation = useMemo15(() => {
+    const { merged: valuesDotNotation, propsToDelete } = useMemo15(() => {
       return computeEffectiveSchemaValuesDotNotation({
         schema,
         currentValue: currentRuntimeValueDotNotation,
         overrideValues: nodePath === null ? {} : getDragOverrides(nodePath),
-        propStatus: nodePath === null ? undefined : getCodeValues2(nodePath)
+        propStatus: nodePath === null ? undefined : getCodeValues(nodePath)
       });
     }, [
       currentRuntimeValueDotNotation,
       getDragOverrides,
       nodePath,
-      getCodeValues2
+      getCodeValues
     ]);
     const activeKeys = selectActiveKeys(schema, valuesDotNotation);
     const mergedProps = mergeValues({
       props,
       valuesDotNotation,
-      schemaKeys: activeKeys
+      schemaKeys: activeKeys,
+      propsToDelete
     });
     return React13.createElement(Component, {
       ...mergedProps,
@@ -25487,7 +25591,6 @@ var RegularSequenceRefForwardingFunction = ({
   }, [name]);
   const env = useRemotionEnvironment();
   const inheritedStack = other?.stack ?? null;
-  const memoizedEffects = useMemoizedEffects(flattenEffects(_experimentalEffects ?? []));
   useEffect5(() => {
     if (!env.isStudio) {
       return;
@@ -25496,7 +25599,7 @@ var RegularSequenceRefForwardingFunction = ({
       registerSequence({
         type: isMedia.type,
         controls: controls ?? null,
-        effects: memoizedEffects,
+        effects: _experimentalEffects ?? [],
         displayName: timelineClipName,
         doesVolumeChange: isMedia.data.doesVolumeChange,
         duration: actualDurationInFrames,
@@ -25534,7 +25637,7 @@ var RegularSequenceRefForwardingFunction = ({
       premountDisplay: premountDisplay ?? null,
       postmountDisplay: postmountDisplay ?? null,
       controls: controls ?? null,
-      effects: memoizedEffects
+      effects: _experimentalEffects ?? []
     });
     return () => {
       unregisterSequence(id);
@@ -25559,7 +25662,7 @@ var RegularSequenceRefForwardingFunction = ({
     env.isStudio,
     inheritedStack,
     controls,
-    memoizedEffects,
+    _experimentalEffects,
     isMedia
   ]);
   const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
@@ -26084,8 +26187,9 @@ var HtmlInCanvasInner = forwardRef5(({
   }, [ref]);
   const [offscreenCanvas] = useState8(() => new OffscreenCanvas(1, 1));
   const chainState = useEffectChainState();
-  const effectsRef = useRef9(effects);
-  effectsRef.current = effects;
+  const memoizedEffects = useMemoizedEffects(flattenEffects(effects));
+  const effectsRef = useRef9(memoizedEffects);
+  effectsRef.current = memoizedEffects;
   const frameRef = useRef9(frame);
   frameRef.current = frame;
   const onPaintRef = useRef9(onPaint);
@@ -26185,7 +26289,7 @@ var HtmlInCanvasInner = forwardRef5(({
       return;
     }
     canvas.requestPaint?.();
-  }, [onPaint]);
+  }, [onPaint, memoizedEffects]);
   useLayoutEffect3(() => {
     const canvas = canvas2dRef.current;
     if (!canvas) {
@@ -26212,7 +26316,7 @@ var HtmlInCanvasInner = forwardRef5(({
     durationInFrames: resolvedDuration,
     name: "<HtmlInCanvas>",
     _experimentalControls: controls,
-    _experimentalEffects: effects,
+    _experimentalEffects: memoizedEffects,
     layout: "none",
     ...sequenceProps,
     children: /* @__PURE__ */ jsx15(HtmlInCanvasAncestorContext.Provider, {
@@ -29617,10 +29721,13 @@ var makeDefaultPreviewCSS = (scope, backgroundColor) => {
 };
 var defineEffect = (definition) => definition;
 var createDescriptor = (definition, params) => {
+  const widened = definition;
   return {
-    definition,
+    definition: widened,
     params,
-    stack: new Error().stack
+    stack: new Error().stack,
+    effectKey: widened.calculateKey(params),
+    memoized: false
   };
 };
 var REMOTION_STUDIO_CONTAINER_ELEMENT = "__remotion-studio-container";
@@ -29684,8 +29791,7 @@ var RemotionRootContexts = ({
   audioLatencyHint,
   videoEnabled,
   audioEnabled,
-  frameState,
-  visualModeEnabled
+  frameState
 }) => {
   const nonceContext = useMemo322(() => {
     let counter = 0;
@@ -29708,7 +29814,6 @@ var RemotionRootContexts = ({
           children: /* @__PURE__ */ jsx29(EditorPropsProvider, {
             children: /* @__PURE__ */ jsx29(PrefetchProvider, {
               children: /* @__PURE__ */ jsx29(SequenceManagerProvider, {
-                visualModeEnabled,
                 children: /* @__PURE__ */ jsx29(DurationsContextProvider, {
                   children: /* @__PURE__ */ jsx29(BufferingProvider, {
                     children: /* @__PURE__ */ jsx29(SharedAudioContextProvider, {
@@ -30676,7 +30781,8 @@ var Internals = {
   VideoForPreview,
   CompositionManager,
   CompositionSetters,
-  VisualModeGettersContext,
+  VisualModeCodeValuesContext,
+  VisualModeDragOverridesContext,
   VisualModeSettersContext,
   SequenceManager,
   SequenceStackTracesUpdateContext,
@@ -30780,7 +30886,9 @@ var Internals = {
   createDescriptor,
   computeEffectiveSchemaValuesDotNotation,
   OverrideIdsToNodePathsGettersContext,
-  OverrideIdsToNodePathsSettersContext
+  OverrideIdsToNodePathsSettersContext,
+  findPropsToDelete,
+  flattenEffects
 };
 var NUMBER = "[-+]?\\d*\\.?\\d+";
 var PERCENTAGE = NUMBER + "%";