@remotion/promo-pages 4.0.430 → 4.0.432

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/template-modal-content.js

@@ -1,4 +1,19 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
 var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, {
@@ -4137,46 +4152,7 @@ import { jsx as jsx6 } from "react/jsx-runtime";
 import { jsx as jsx7 } from "react/jsx-runtime";
 import { jsx as jsx8 } from "react/jsx-runtime";
 import { jsx as jsx9 } from "react/jsx-runtime";
-var makeCircle = ({ radius }) => {
-  const instructions = [
-    {
-      type: "M",
-      x: radius,
-      y: 0
-    },
-    {
-      type: "a",
-      rx: radius,
-      ry: radius,
-      xAxisRotation: 0,
-      largeArcFlag: true,
-      sweepFlag: true,
-      dx: 0,
-      dy: radius * 2
-    },
-    {
-      type: "a",
-      rx: radius,
-      ry: radius,
-      xAxisRotation: 0,
-      largeArcFlag: true,
-      sweepFlag: true,
-      dx: 0,
-      dy: -radius * 2
-    },
-    {
-      type: "Z"
-    }
-  ];
-  const path = serializeInstructions(instructions);
-  return {
-    height: radius * 2,
-    width: radius * 2,
-    path,
-    instructions,
-    transformOrigin: `${radius} ${radius}`
-  };
-};
+import { jsx as jsx10 } from "react/jsx-runtime";
 var doesReactSupportTransformOriginProperty = (version2) => {
   if (version2.includes("canary") || version2.includes("experimental")) {
     const last8Chars = parseInt(version2.slice(-8), 10);
@@ -4270,6 +4246,46 @@ var RenderSvg = ({
     ]
   });
 };
+var makeCircle = ({ radius }) => {
+  const instructions = [
+    {
+      type: "M",
+      x: radius,
+      y: 0
+    },
+    {
+      type: "a",
+      rx: radius,
+      ry: radius,
+      xAxisRotation: 0,
+      largeArcFlag: true,
+      sweepFlag: true,
+      dx: 0,
+      dy: radius * 2
+    },
+    {
+      type: "a",
+      rx: radius,
+      ry: radius,
+      xAxisRotation: 0,
+      largeArcFlag: true,
+      sweepFlag: true,
+      dx: 0,
+      dy: -radius * 2
+    },
+    {
+      type: "Z"
+    }
+  ];
+  const path = serializeInstructions(instructions);
+  return {
+    height: radius * 2,
+    width: radius * 2,
+    path,
+    instructions,
+    transformOrigin: `${radius} ${radius}`
+  };
+};
 var makeHeart = ({
   height,
   aspectRatio = 1.1,
@@ -4366,7 +4382,7 @@ var Heart = ({
   depthAdjustment = 0,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx4(RenderSvg, {
+  return /* @__PURE__ */ jsx5(RenderSvg, {
     ...makeHeart({
       aspectRatio,
       height,
@@ -5699,7 +5715,7 @@ var extrudeAndTransformElement = (options) => {
 // ../core/dist/esm/index.mjs
 import { createContext } from "react";
 import { createContext as createContext2, useContext } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef2,
   useContext as useContext13,
@@ -5767,7 +5783,7 @@ import {
   useRef as useRef6,
   useState as useState7
 } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx112 } from "react/jsx-runtime";
 import { forwardRef as forwardRef6, useCallback as useCallback10, useContext as useContext27 } from "react";
 import React11, { createContext as createContext14, useMemo as useMemo12 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
@@ -5869,7 +5885,8 @@ import { useMemo as useMemo27 } from "react";
 import { createContext as createContext20, useContext as useContext31, useMemo as useMemo26 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
 import { jsx as jsx27 } from "react/jsx-runtime";
-import React27, { createContext as createContext21 } from "react";
+import React27 from "react";
+import React28, { createContext as createContext21 } from "react";
 import { useContext as useContext32, useMemo as useMemo28, useState as useState17 } from "react";
 import { useContext as useContext33 } from "react";
 import { useCallback as useCallback15 } from "react";
@@ -5882,7 +5899,7 @@ import {
   useState as useState18
 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
-import React29, {
+import React30, {
   forwardRef as forwardRef9,
   useContext as useContext35,
   useEffect as useEffect17,
@@ -5894,14 +5911,14 @@ import React29, {
 import { useEffect as useEffect16 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
 import { jsx as jsx30 } from "react/jsx-runtime";
-import React31, { useMemo as useMemo31 } from "react";
+import React32, { useMemo as useMemo31 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 import { Children, forwardRef as forwardRef10, useMemo as useMemo32 } from "react";
-import React32 from "react";
-import React33, { createContext as createContext22 } from "react";
+import React33 from "react";
+import React34, { createContext as createContext22 } from "react";
 import { jsx as jsx322 } from "react/jsx-runtime";
 import { jsx as jsx33 } from "react/jsx-runtime";
-import React35 from "react";
+import React36 from "react";
 import { forwardRef as forwardRef12, useCallback as useCallback16, useContext as useContext37 } from "react";
 import {
   forwardRef as forwardRef11,
@@ -5948,7 +5965,7 @@ var IsPlayerContext = createContext2(false);
 var IsPlayerContextProvider = ({
   children
 }) => {
-  return /* @__PURE__ */ jsx10(IsPlayerContext.Provider, {
+  return /* @__PURE__ */ jsx11(IsPlayerContext.Provider, {
     value: true,
     children
   });
@@ -5959,7 +5976,7 @@ var useIsPlayer = () => {
 function truthy2(value) {
   return Boolean(value);
 }
-var VERSION = "4.0.430";
+var VERSION = "4.0.432";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -6117,6 +6134,7 @@ __export2(exports_timeline_position_state, {
   useTimelineSetFrame: () => useTimelineSetFrame,
   useTimelinePosition: () => useTimelinePosition,
   usePlayingState: () => usePlayingState,
+  useAbsoluteTimelinePosition: () => useAbsoluteTimelinePosition,
   persistCurrentFrame: () => persistCurrentFrame,
   getInitialFrameState: () => getInitialFrameState,
   getFrameForComposition: () => getFrameForComposition
@@ -6513,9 +6531,8 @@ var getFrameForComposition = (composition) => {
   }
   return window.remotion_initialFrame ?? 0;
 };
-var useTimelinePosition = () => {
+var useTimelinePositionFromContext = (state) => {
   const videoConfig = useVideo();
-  const state = useContext5(TimelineContext);
   const env = useRemotionEnvironment();
   if (!videoConfig) {
     return typeof window === "undefined" ? 0 : window.remotion_initialFrame ?? 0;
@@ -6523,6 +6540,14 @@ var useTimelinePosition = () => {
   const unclamped = state.frame[videoConfig.id] ?? (env.isPlayer ? 0 : getFrameForComposition(videoConfig.id));
   return Math.min(videoConfig.durationInFrames - 1, unclamped);
 };
+var useTimelinePosition = () => {
+  const state = useContext5(TimelineContext);
+  return useTimelinePositionFromContext(state);
+};
+var useAbsoluteTimelinePosition = () => {
+  const state = useContext5(AbsoluteTimeContext);
+  return useTimelinePositionFromContext(state);
+};
 var useTimelineSetFrame = () => {
   const { setFrame } = useContext5(SetTimelineContext);
   return setFrame;
@@ -6790,6 +6815,19 @@ var TimelineContext = createContext9({
   },
   audioAndVideoTags: { current: [] }
 });
+var AbsoluteTimeContext = createContext9({
+  frame: {},
+  playing: false,
+  playbackRate: 1,
+  rootId: "",
+  imperativePlaying: {
+    current: false
+  },
+  setPlaybackRate: () => {
+    throw new Error("default");
+  },
+  audioAndVideoTags: { current: [] }
+});
 var TimelineContextProvider = ({ children, frameState }) => {
   const [playing, setPlaying] = useState2(false);
   const imperativePlaying = useRef(false);
@@ -6842,11 +6880,14 @@ var TimelineContextProvider = ({ children, frameState }) => {
       setPlaying
     };
   }, []);
-  return /* @__PURE__ */ jsx42(TimelineContext.Provider, {
+  return /* @__PURE__ */ jsx42(AbsoluteTimeContext.Provider, {
     value: timelineContextValue,
-    children: /* @__PURE__ */ jsx42(SetTimelineContext.Provider, {
-      value: setTimelineContextValue,
-      children
+    children: /* @__PURE__ */ jsx42(TimelineContext.Provider, {
+      value: timelineContextValue,
+      children: /* @__PURE__ */ jsx42(SetTimelineContext.Provider, {
+        value: setTimelineContextValue,
+        children
+      })
     })
   });
 };
@@ -7030,22 +7071,28 @@ var SequenceVisibilityToggleContext = React8.createContext({
     throw new Error("SequenceVisibilityToggle not initialized");
   }
 });
-var SequenceControlOverrideContext = React8.createContext({
-  overrides: {},
-  setOverride: () => {
-    throw new Error("SequenceControlOverrideContext not initialized");
+var VisualModeOverridesContext = React8.createContext({
+  dragOverrides: {},
+  setDragOverrides: () => {
+    throw new Error("VisualModeOverridesContext not initialized");
   },
-  clearOverrides: () => {
-    throw new Error("SequenceControlOverrideContext not initialized");
-  }
+  clearDragOverrides: () => {
+    throw new Error("VisualModeOverridesContext not initialized");
+  },
+  codeValues: {},
+  setCodeValues: () => {
+    throw new Error("VisualModeOverridesContext not initialized");
+  },
+  visualModeEnabled: false
 });
-var SequenceManagerProvider = ({ children }) => {
+var SequenceManagerProvider = ({ children, visualModeEnabled }) => {
   const [sequences, setSequences] = useState4([]);
   const [hidden, setHidden] = useState4({});
-  const [controlOverrides, setControlOverrides] = useState4({});
-  const controlOverridesRef = useRef3(controlOverrides);
-  controlOverridesRef.current = controlOverrides;
-  const setOverride = useCallback3((sequenceId, key, value) => {
+  const [dragOverrides, setControlOverrides] = useState4({});
+  const controlOverridesRef = useRef3(dragOverrides);
+  controlOverridesRef.current = dragOverrides;
+  const [codeValues, setCodeValuesMapState] = useState4({});
+  const setDragOverrides = useCallback3((sequenceId, key, value) => {
     setControlOverrides((prev) => ({
       ...prev,
       [sequenceId]: {
@@ -7054,7 +7101,7 @@ var SequenceManagerProvider = ({ children }) => {
       }
     }));
   }, []);
-  const clearOverrides = useCallback3((sequenceId) => {
+  const clearDragOverrides = useCallback3((sequenceId) => {
     setControlOverrides((prev) => {
       if (!prev[sequenceId]) {
         return prev;
@@ -7064,6 +7111,22 @@ var SequenceManagerProvider = ({ children }) => {
       return next;
     });
   }, []);
+  const setCodeValues = useCallback3((sequenceId, values) => {
+    setCodeValuesMapState((prev) => {
+      if (prev[sequenceId] === values) {
+        return prev;
+      }
+      if (values === null) {
+        if (!(sequenceId in prev)) {
+          return prev;
+        }
+        const next = { ...prev };
+        delete next[sequenceId];
+        return next;
+      }
+      return { ...prev, [sequenceId]: values };
+    });
+  }, []);
   const registerSequence = useCallback3((seq) => {
     setSequences((seqs) => {
       return [...seqs, seq];
@@ -7087,16 +7150,26 @@ var SequenceManagerProvider = ({ children }) => {
   }, [hidden]);
   const overrideContext = useMemo9(() => {
     return {
-      overrides: controlOverrides,
-      setOverride,
-      clearOverrides
+      visualModeEnabled,
+      dragOverrides,
+      setDragOverrides,
+      clearDragOverrides,
+      codeValues,
+      setCodeValues
     };
-  }, [controlOverrides, setOverride, clearOverrides]);
+  }, [
+    visualModeEnabled,
+    dragOverrides,
+    setDragOverrides,
+    clearDragOverrides,
+    codeValues,
+    setCodeValues
+  ]);
   return /* @__PURE__ */ jsx72(SequenceManager.Provider, {
     value: sequenceContext,
     children: /* @__PURE__ */ jsx72(SequenceVisibilityToggleContext.Provider, {
       value: hiddenContext,
-      children: /* @__PURE__ */ jsx72(SequenceControlOverrideContext.Provider, {
+      children: /* @__PURE__ */ jsx72(VisualModeOverridesContext.Provider, {
         value: overrideContext,
         children
       })
@@ -7261,7 +7334,8 @@ var RegularSequenceRefForwardingFunction = ({
 };
 var RegularSequence = forwardRef2(RegularSequenceRefForwardingFunction);
 var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
-  const frame = useCurrentFrame();
+  const parentPremountContext = useContext13(PremountContext);
+  const frame = useCurrentFrame() - parentPremountContext.premountFramesRemaining;
   if (props.layout === "none") {
     throw new Error('`<Sequence>` with `premountFor` and `postmountFor` props does not support layout="none"');
   }
@@ -7295,9 +7369,8 @@ var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
     styleWhilePremounted,
     styleWhilePostmounted
   ]);
-  const parentPremountContext = useContext13(PremountContext);
   const { playing } = useContext13(TimelineContext);
-  const premountFramesRemaining = parentPremountContext.premountFramesRemaining + (premountingActive ? from - frame : 0);
+  const premountFramesRemaining = premountingActive ? from - frame : 0;
   const premountContextValue = useMemo10(() => {
     return {
       premountFramesRemaining,
@@ -7771,7 +7844,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
       renderAssets
     };
   }, [renderAssets, registerRenderAsset, unregisterRenderAsset]);
-  return /* @__PURE__ */ jsx11(RenderAssetManager.Provider, {
+  return /* @__PURE__ */ jsx112(RenderAssetManager.Provider, {
     value: contextValue,
     children
   });
@@ -8442,6 +8515,63 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
     latencyHint: audioLatencyHint,
     audioEnabled
   });
+  const audioSyncAnchor = useMemo15(() => ({ value: 0 }), []);
+  const prevEndTimes = useRef7({ scheduledEndTime: null, mediaEndTime: null });
+  const scheduleAudioNode = useMemo15(() => {
+    return ({
+      node,
+      mediaTimestamp,
+      targetTime,
+      currentTime,
+      sequenceEndTime,
+      sequenceStartTime,
+      debugAudioScheduling
+    }) => {
+      if (!audioContext) {
+        throw new Error("Audio context not found");
+      }
+      const bufferDuration = node.buffer?.duration ?? 0;
+      const unclampedMediaEndTime = mediaTimestamp + bufferDuration;
+      const needsTrimEnd = unclampedMediaEndTime > sequenceEndTime;
+      const needsTrimStart = mediaTimestamp < sequenceStartTime;
+      const offsetBecauseOfTrim = needsTrimStart ? sequenceStartTime - mediaTimestamp : 0;
+      const offsetBecauseOfTooLate = targetTime < 0 ? -targetTime : 0;
+      const offset = offsetBecauseOfTrim + offsetBecauseOfTooLate;
+      const duration = needsTrimEnd ? bufferDuration - Math.max(0, unclampedMediaEndTime - sequenceEndTime) - offset : bufferDuration - offset;
+      const scheduledTime = targetTime + currentTime + offset;
+      if (offset < 0) {
+        throw new Error("offset < 0: " + JSON.stringify({
+          offset,
+          targetTime,
+          currentTime,
+          offsetBecauseOfTrim,
+          offsetBecauseOfTooLate
+        }));
+      }
+      if (duration > 0) {
+        node.start(scheduledTime, offset, duration);
+      }
+      const scheduledEndTime = scheduledTime + duration / node.playbackRate.value;
+      const mediaTime = mediaTimestamp + offset;
+      const mediaEndTime = mediaTime + duration;
+      const latency = audioContext.baseLatency + audioContext.outputLatency;
+      const timeDiff = scheduledTime - currentTime - latency;
+      const prev = prevEndTimes.current;
+      const scheduledMismatch = prev.scheduledEndTime !== null && Math.abs(scheduledTime - prev.scheduledEndTime) > 0.001;
+      const mediaMismatch = prev.mediaEndTime !== null && Math.abs(mediaTime - prev.mediaEndTime) > 0.001;
+      if (debugAudioScheduling) {
+        Log.info({ logLevel, tag: "audio-scheduling" }, "scheduled %c%s%c %s %c%s%c %s %c%s%c %s %s %s", scheduledMismatch ? "color: red; font-weight: bold" : "", scheduledTime.toFixed(4), "", scheduledEndTime.toFixed(4), mediaMismatch ? "color: red; font-weight: bold" : "", mediaTime.toFixed(4), "", mediaEndTime.toFixed(4), duration < 0 ? "color: red; font-weight: bold" : timeDiff < 0 ? "color: red; font-weight: bold" : "color: blue; font-weight: bold", duration < 0 ? "missed " + Math.abs(offset).toFixed(2) + "s" : Math.abs(timeDiff).toFixed(2) + (timeDiff < 0 ? " delay" : " ahead"), "", "current=" + currentTime.toFixed(4), "offset=" + offset.toFixed(4), "latency=" + latency.toFixed(4), "state=" + audioContext.state);
+      }
+      prev.scheduledEndTime = scheduledEndTime;
+      prev.mediaEndTime = mediaEndTime;
+      return duration > 0 ? {
+        type: "started",
+        scheduledTime
+      } : {
+        type: "not-started"
+      };
+    };
+  }, [audioContext, logLevel]);
   const refs = useMemo15(() => {
     return new Array(numberOfAudioTags).fill(true).map(() => {
       const ref = createRef2();
@@ -8588,7 +8718,9 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
       updateAudio,
       playAllAudios,
       numberOfAudioTags,
-      audioContext
+      audioContext,
+      audioSyncAnchor,
+      scheduleAudioNode
     };
   }, [
     numberOfAudioTags,
@@ -8596,7 +8728,9 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
     registerAudio,
     unregisterAudio,
     updateAudio,
-    audioContext
+    audioContext,
+    audioSyncAnchor,
+    scheduleAudioNode
   ]);
   return /* @__PURE__ */ jsxs2(SharedAudioContext.Provider, {
     value,
@@ -10737,6 +10871,7 @@ var ImgRefForwarding = ({
       imageRef.current.setAttribute("src", newSrc);
     }, timeout);
   }, []);
+  const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
   const didGetError = useCallback12((e) => {
     if (!errors.current) {
       return;
@@ -10752,9 +10887,10 @@ var ImgRefForwarding = ({
       retryIn(backoff);
       return;
     }
-    cancelRender("Error loading image with src: " + imageRef.current?.src);
-  }, [maxRetries, onError, retryIn]);
-  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
+    try {
+      cancelRender2("Error loading image with src: " + imageRef.current?.src);
+    } catch {}
+  }, [cancelRender2, maxRetries, onError, retryIn]);
   if (typeof window !== "undefined") {
     const isPremounting = Boolean(sequenceContext?.premounting);
     const isPostmounting = Boolean(sequenceContext?.postmounting);
@@ -10799,7 +10935,7 @@ var ImgRefForwarding = ({
       current.src = actualSrc;
       current.decode().then(onComplete).catch((err) => {
         console.warn(err);
-        if (current.complete) {
+        if (current.complete && current.naturalWidth > 0 && current.naturalHeight > 0) {
           onComplete();
         } else {
           current.addEventListener("load", onComplete);
@@ -10999,6 +11135,26 @@ var makeDefaultPreviewCSS = (scope, backgroundColor) => {
     }
   `;
 };
+var getEffectiveVisualModeValue = ({
+  codeValue,
+  runtimeValue,
+  dragOverrideValue,
+  defaultValue
+}) => {
+  if (dragOverrideValue !== undefined) {
+    return dragOverrideValue;
+  }
+  if (!codeValue) {
+    return runtimeValue;
+  }
+  if (!codeValue.canUpdate) {
+    return runtimeValue;
+  }
+  if (codeValue.codeValue === undefined) {
+    return defaultValue;
+  }
+  return codeValue.codeValue;
+};
 var REMOTION_STUDIO_CONTAINER_ELEMENT = "__remotion-studio-container";
 var getPreviewDomElement = () => {
   return document.getElementById(REMOTION_STUDIO_CONTAINER_ELEMENT);
@@ -11061,7 +11217,8 @@ var RemotionRootContexts = ({
   videoEnabled,
   audioEnabled,
   frameState,
-  nonceContextSeed
+  nonceContextSeed,
+  visualModeEnabled
 }) => {
   const nonceContext = useMemo27(() => {
     let counter = 0;
@@ -11084,6 +11241,7 @@ var RemotionRootContexts = ({
           children: /* @__PURE__ */ jsx27(EditorPropsProvider, {
             children: /* @__PURE__ */ jsx27(PrefetchProvider, {
               children: /* @__PURE__ */ jsx27(SequenceManagerProvider, {
+                visualModeEnabled,
                 children: /* @__PURE__ */ jsx27(SharedAudioContextProvider, {
                   numberOfAudioTags,
                   audioLatencyHint,
@@ -11266,6 +11424,7 @@ var resolveVideoConfigOrCatch = (params) => {
     };
   }
 };
+var SequenceStackTracesUpdateContext = React27.createContext(() => {});
 var getEnvVariables = () => {
   if (getRemotionEnvironment().isRendering) {
     const param = window.remotion_envVariables;
@@ -11291,7 +11450,7 @@ var setupEnvVariables = () => {
     window.process.env[key] = env[key];
   });
 };
-var CurrentScaleContext = React27.createContext(null);
+var CurrentScaleContext = React28.createContext(null);
 var PreviewSizeContext = createContext21({
   setSize: () => {
     return;
@@ -11330,34 +11489,62 @@ var useSchema = (schema, currentValue) => {
     return earlyReturn;
   }
   const [overrideId] = useState17(() => String(Math.random()));
-  const { overrides } = useContext32(SequenceControlOverrideContext);
-  return useMemo28(() => {
+  const {
+    visualModeEnabled,
+    dragOverrides: overrides,
+    codeValues
+  } = useContext32(VisualModeOverridesContext);
+  const controls = useMemo28(() => {
+    if (!visualModeEnabled) {
+      return;
+    }
     if (schema === null || currentValue === null) {
+      return;
+    }
+    return {
+      schema,
+      currentValue,
+      overrideId
+    };
+  }, [schema, currentValue, overrideId, visualModeEnabled]);
+  return useMemo28(() => {
+    if (controls === undefined || currentValue === null || schema === null || !visualModeEnabled) {
       return {
         controls: undefined,
         values: currentValue ?? {}
       };
     }
     const overrideValues = overrides[overrideId] ?? {};
-    const merged = { ...currentValue };
-    for (const key of Object.keys(overrideValues)) {
-      if (key in merged) {
-        merged[key] = overrideValues[key];
-      }
+    const propStatus = codeValues[overrideId];
+    const currentValueKeys = Object.keys(currentValue);
+    const keysToUpdate = new Set(currentValueKeys).values();
+    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
+      });
     }
     return {
-      controls: {
-        schema,
-        currentValue,
-        overrideId
-      },
+      controls,
       values: merged
     };
-  }, [schema, currentValue, overrides, overrideId]);
+  }, [
+    controls,
+    currentValue,
+    overrideId,
+    overrides,
+    codeValues,
+    schema,
+    visualModeEnabled
+  ]);
 };
 var useSequenceControlOverride = (key) => {
   const seqContext = useContext33(SequenceContext);
-  const { overrides } = useContext33(SequenceControlOverrideContext);
+  const { dragOverrides: overrides } = useContext33(VisualModeOverridesContext);
   if (!seqContext) {
     return;
   }
@@ -11613,7 +11800,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       ref: videoRef
     });
   }, [context.audioContext]);
-  const effectToUse = React29.useInsertionEffect ?? React29.useLayoutEffect;
+  const effectToUse = React30.useInsertionEffect ?? React30.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -11972,18 +12159,18 @@ var OffthreadVideo = ({
 addSequenceStackTraces(OffthreadVideo);
 var WATCH_REMOTION_STATIC_FILES = "remotion_staticFilesChanged";
 function useRemotionContexts() {
-  const compositionManagerCtx = React31.useContext(CompositionManager);
-  const timelineContext = React31.useContext(TimelineContext);
-  const setTimelineContext = React31.useContext(SetTimelineContext);
-  const sequenceContext = React31.useContext(SequenceContext);
-  const nonceContext = React31.useContext(NonceContext);
-  const canUseRemotionHooksContext = React31.useContext(CanUseRemotionHooks);
-  const preloadContext = React31.useContext(PreloadContext);
-  const resolveCompositionContext = React31.useContext(ResolveCompositionContext);
-  const renderAssetManagerContext = React31.useContext(RenderAssetManager);
-  const sequenceManagerContext = React31.useContext(SequenceManager);
-  const bufferManagerContext = React31.useContext(BufferingContextReact);
-  const logLevelContext = React31.useContext(LogLevelContext);
+  const compositionManagerCtx = React32.useContext(CompositionManager);
+  const timelineContext = React32.useContext(TimelineContext);
+  const setTimelineContext = React32.useContext(SetTimelineContext);
+  const sequenceContext = React32.useContext(SequenceContext);
+  const nonceContext = React32.useContext(NonceContext);
+  const canUseRemotionHooksContext = React32.useContext(CanUseRemotionHooks);
+  const preloadContext = React32.useContext(PreloadContext);
+  const resolveCompositionContext = React32.useContext(ResolveCompositionContext);
+  const renderAssetManagerContext = React32.useContext(RenderAssetManager);
+  const sequenceManagerContext = React32.useContext(SequenceManager);
+  const bufferManagerContext = React32.useContext(BufferingContextReact);
+  const logLevelContext = React32.useContext(LogLevelContext);
   return useMemo31(() => ({
     compositionManagerCtx,
     timelineContext,
@@ -12058,6 +12245,7 @@ var Internals = {
   useUnsafeVideoConfig,
   useFrameForVolumeProp,
   useTimelinePosition,
+  useAbsoluteTimelinePosition,
   evaluateVolume,
   getAbsoluteSrc,
   Timeline: exports_timeline_position_state,
@@ -12067,8 +12255,9 @@ var Internals = {
   VideoForPreview,
   CompositionManager,
   CompositionSetters,
-  SequenceControlOverrideContext,
+  VisualModeOverridesContext,
   SequenceManager,
+  SequenceStackTracesUpdateContext,
   SequenceVisibilityToggleContext,
   useSchema,
   useSequenceControlOverride,
@@ -12152,7 +12341,9 @@ var Internals = {
   TimelinePosition: exports_timeline_position_state,
   DelayRenderContextType,
   TimelineContext,
-  RenderAssetManagerProvider
+  AbsoluteTimeContext,
+  RenderAssetManagerProvider,
+  getEffectiveVisualModeValue
 };
 var NUMBER = "[-+]?\\d*\\.?\\d+";
 var PERCENTAGE = NUMBER + "%";
@@ -12181,9 +12372,9 @@ var validateFrame = ({
   }
 };
 var flattenChildren = (children) => {
-  const childrenArray = React32.Children.toArray(children);
+  const childrenArray = React33.Children.toArray(children);
   return childrenArray.reduce((flatChildren, child) => {
-    if (child.type === React32.Fragment) {
+    if (child.type === React33.Fragment) {
       return flatChildren.concat(flattenChildren(child.props.children));
     }
     flatChildren.push(child);
@@ -12204,7 +12395,7 @@ var IsNotInsideSeriesProvider = ({ children }) => {
   });
 };
 var useRequireToBeInsideSeries = () => {
-  const isInsideSeries = React33.useContext(IsInsideSeriesContext);
+  const isInsideSeries = React34.useContext(IsInsideSeriesContext);
   if (!isInsideSeries) {
     throw new Error("This component must be inside a <Series /> component.");
   }
@@ -13084,8 +13275,8 @@ import { jsx as jsx83 } from "react/jsx-runtime";
 import React52 from "react";
 import { jsx as jsx93 } from "react/jsx-runtime";
 import { jsx as jsx103 } from "react/jsx-runtime";
-import { jsx as jsx112 } from "react/jsx-runtime";
-import * as React34 from "react";
+import { jsx as jsx113 } from "react/jsx-runtime";
+import * as React342 from "react";
 import * as ReactDOM4 from "react-dom";
 import React9 from "react";
 import * as React6 from "react";
@@ -13124,21 +13315,21 @@ import * as React252 from "react";
 import * as React26 from "react";
 import { jsx as jsx223 } from "react/jsx-runtime";
 import * as React332 from "react";
-import * as React292 from "react";
+import * as React29 from "react";
 import { useState as useState112 } from "react";
 import * as React272 from "react";
-import * as React28 from "react";
+import * as React282 from "react";
 import * as React322 from "react";
-import * as React312 from "react";
-import * as React30 from "react";
+import * as React31 from "react";
+import * as React302 from "react";
 import { Fragment as Fragment62, jsx as jsx232, jsxs as jsxs4 } from "react/jsx-runtime";
 import { forwardRef as forwardRef132, createElement as createElement7 } from "react";
 import { forwardRef as forwardRef122, createElement as createElement6 } from "react";
-import * as React352 from "react";
+import * as React35 from "react";
 import { jsx as jsx242, jsxs as jsxs5 } from "react/jsx-runtime";
 import { jsx as jsx252 } from "react/jsx-runtime";
 import * as React48 from "react";
-import * as React36 from "react";
+import * as React362 from "react";
 import { jsx as jsx262 } from "react/jsx-runtime";
 import * as React46 from "react";
 import React39 from "react";
@@ -13736,11 +13927,11 @@ var Link = ({
   });
 };
 var PlanePaperIcon = (props) => {
-  return /* @__PURE__ */ jsx112("svg", {
+  return /* @__PURE__ */ jsx113("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
     viewBox: "0 0 576 512",
-    children: /* @__PURE__ */ jsx112("path", {
+    children: /* @__PURE__ */ jsx113("path", {
       fill: "currentcolor",
       d: "M169.9 280L94.9 448.6 461.2 280 169.9 280zm291.3-48L94.9 63.4 169.9 232 461.2 232zM34.8 465.6L128 256 34.8 46.4C33 42.2 32 37.6 32 33 32 14.8 46.7 0 64.8 0 69.5 0 74.2 1 78.5 3L554.2 222c13.3 6.1 21.8 19.4 21.8 34s-8.5 27.9-21.8 34L78.5 509c-4.3 2-9 3-13.7 3-18.1 0-32.8-14.8-32.8-33 0-4.6 1-9.2 2.8-13.4z"
     })
@@ -16719,7 +16910,7 @@ var hideOthers = function(originalTarget, parentNode, markerName) {
   return applyAttributeToOthers(targets, activeParentNode, markerName, "aria-hidden");
 };
 var __assign = function() {
-  __assign = Object.assign || function __assign2(t) {
+  __assign = Object.assign || function __assign(t) {
     for (var s, i = 1, n = arguments.length;i < n; i++) {
       s = arguments[i];
       for (var p in s)
@@ -16909,7 +17100,7 @@ var SideCar = function(_a) {
   if (!Target) {
     throw new Error("Sidecar medium not found");
   }
-  return React28.createElement(Target, __assign({}, rest));
+  return React282.createElement(Target, __assign({}, rest));
 };
 SideCar.isSideCarExport = true;
 function exportSidecar(medium, exported) {
@@ -16920,9 +17111,9 @@ var effectCar = createSidecarMedium();
 var nothing = function() {
   return;
 };
-var RemoveScroll = React292.forwardRef(function(props, parentRef) {
-  var ref = React292.useRef(null);
-  var _a = React292.useState({
+var RemoveScroll = React29.forwardRef(function(props, parentRef) {
+  var ref = React29.useRef(null);
+  var _a = React29.useState({
     onScrollCapture: nothing,
     onWheelCapture: nothing,
     onTouchMoveCapture: nothing
@@ -16931,7 +17122,7 @@ var RemoveScroll = React292.forwardRef(function(props, parentRef) {
   var SideCar2 = sideCar;
   var containerRef = useMergeRefs([ref, parentRef]);
   var containerProps = __assign(__assign({}, rest), callbacks);
-  return React292.createElement(React292.Fragment, null, enabled && React292.createElement(SideCar2, { sideCar: effectCar, removeScrollBar, shards, noIsolation, inert, setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode }), forwardProps ? React292.cloneElement(React292.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef })) : React292.createElement(Container, __assign({}, containerProps, { className, ref: containerRef }), children));
+  return React29.createElement(React29.Fragment, null, enabled && React29.createElement(SideCar2, { sideCar: effectCar, removeScrollBar, shards, noIsolation, inert, setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode }), forwardProps ? React29.cloneElement(React29.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef })) : React29.createElement(Container, __assign({}, containerProps, { className, ref: containerRef }), children));
 });
 RemoveScroll.defaultProps = {
   enabled: true,
@@ -16999,7 +17190,7 @@ var stylesheetSingleton = function() {
 var styleHookSingleton = function() {
   var sheet = stylesheetSingleton();
   return function(styles, isDynamic) {
-    React30.useEffect(function() {
+    React302.useEffect(function() {
       sheet.add(styles);
       return function() {
         sheet.remove();
@@ -17104,7 +17295,7 @@ var getCurrentUseCounter = function() {
   return isFinite(counter) ? counter : 0;
 };
 var useLockAttribute = function() {
-  React312.useEffect(function() {
+  React31.useEffect(function() {
     document.body.setAttribute(lockAttribute, (getCurrentUseCounter() + 1).toString());
     return function() {
       var newCounter = getCurrentUseCounter() - 1;
@@ -17119,10 +17310,10 @@ var useLockAttribute = function() {
 var RemoveScrollBar = function(_a) {
   var { noRelative, noImportant, gapMode: _b } = _a, gapMode = _b === undefined ? "margin" : _b;
   useLockAttribute();
-  var gap = React312.useMemo(function() {
+  var gap = React31.useMemo(function() {
     return getGapWidth(gapMode);
   }, [gapMode]);
-  return React312.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : "") });
+  return React31.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : "") });
 };
 var passiveSupported = false;
 if (typeof window !== "undefined") {
@@ -17423,9 +17614,9 @@ var Select = (props) => {
     required
   } = props;
   const popperScope = usePopperScope(__scopeSelect);
-  const [trigger, setTrigger] = React34.useState(null);
-  const [valueNode, setValueNode] = React34.useState(null);
-  const [valueNodeHasChildren, setValueNodeHasChildren] = React34.useState(false);
+  const [trigger, setTrigger] = React342.useState(null);
+  const [valueNode, setValueNode] = React342.useState(null);
+  const [valueNodeHasChildren, setValueNodeHasChildren] = React342.useState(false);
   const direction = useDirection(dir);
   const [open = false, setOpen] = useControllableState({
     prop: openProp,
@@ -17437,9 +17628,9 @@ var Select = (props) => {
     defaultProp: defaultValue,
     onChange: onValueChange
   });
-  const triggerPointerDownPosRef = React34.useRef(null);
+  const triggerPointerDownPosRef = React342.useRef(null);
   const isFormControl = trigger ? Boolean(trigger.closest("form")) : true;
-  const [nativeOptionsSet, setNativeOptionsSet] = React34.useState(/* @__PURE__ */ new Set);
+  const [nativeOptionsSet, setNativeOptionsSet] = React342.useState(/* @__PURE__ */ new Set);
   const nativeSelectKey = Array.from(nativeOptionsSet).map((option) => option.props.value).join(";");
   return /* @__PURE__ */ jsx232(Root22, { ...popperScope, children: /* @__PURE__ */ jsxs4(SelectProvider, {
     required,
@@ -17461,10 +17652,10 @@ var Select = (props) => {
     children: [
       /* @__PURE__ */ jsx232(Collection.Provider, { scope: __scopeSelect, children: /* @__PURE__ */ jsx232(SelectNativeOptionsProvider, {
         scope: props.__scopeSelect,
-        onNativeOptionAdd: React34.useCallback((option) => {
+        onNativeOptionAdd: React342.useCallback((option) => {
           setNativeOptionsSet((prev) => new Set(prev).add(option));
         }, []),
-        onNativeOptionRemove: React34.useCallback((option) => {
+        onNativeOptionRemove: React342.useCallback((option) => {
           setNativeOptionsSet((prev) => {
             const optionsSet = new Set(prev);
             optionsSet.delete(option);
@@ -17492,7 +17683,7 @@ var Select = (props) => {
 };
 Select.displayName = SELECT_NAME;
 var TRIGGER_NAME = "SelectTrigger";
-var SelectTrigger = React34.forwardRef((props, forwardedRef) => {
+var SelectTrigger = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, disabled = false, ...triggerProps } = props;
   const popperScope = usePopperScope(__scopeSelect);
   const context = useSelectContext(TRIGGER_NAME, __scopeSelect);
@@ -17560,7 +17751,7 @@ var SelectTrigger = React34.forwardRef((props, forwardedRef) => {
 });
 SelectTrigger.displayName = TRIGGER_NAME;
 var VALUE_NAME = "SelectValue";
-var SelectValue = React34.forwardRef((props, forwardedRef) => {
+var SelectValue = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, className, style, children, placeholder = "", ...valueProps } = props;
   const context = useSelectContext(VALUE_NAME, __scopeSelect);
   const { onValueNodeHasChildrenChange } = context;
@@ -17578,7 +17769,7 @@ var SelectValue = React34.forwardRef((props, forwardedRef) => {
 });
 SelectValue.displayName = VALUE_NAME;
 var ICON_NAME = "SelectIcon";
-var SelectIcon = React34.forwardRef((props, forwardedRef) => {
+var SelectIcon = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, children, ...iconProps } = props;
   return /* @__PURE__ */ jsx232(Primitive.span, { "aria-hidden": true, ...iconProps, ref: forwardedRef, children: children || "▼" });
 });
@@ -17589,9 +17780,9 @@ var SelectPortal = (props) => {
 };
 SelectPortal.displayName = PORTAL_NAME2;
 var CONTENT_NAME2 = "SelectContent";
-var SelectContent = React34.forwardRef((props, forwardedRef) => {
+var SelectContent = React342.forwardRef((props, forwardedRef) => {
   const context = useSelectContext(CONTENT_NAME2, props.__scopeSelect);
-  const [fragment, setFragment] = React34.useState();
+  const [fragment, setFragment] = React342.useState();
   useLayoutEffect22(() => {
     setFragment(new DocumentFragment);
   }, []);
@@ -17605,7 +17796,7 @@ SelectContent.displayName = CONTENT_NAME2;
 var CONTENT_MARGIN = 10;
 var [SelectContentProvider, useSelectContentContext] = createSelectContext(CONTENT_NAME2);
 var CONTENT_IMPL_NAME = "SelectContentImpl";
-var SelectContentImpl = React34.forwardRef((props, forwardedRef) => {
+var SelectContentImpl = React342.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
     position = "item-aligned",
@@ -17625,20 +17816,20 @@ var SelectContentImpl = React34.forwardRef((props, forwardedRef) => {
     ...contentProps
   } = props;
   const context = useSelectContext(CONTENT_NAME2, __scopeSelect);
-  const [content, setContent] = React34.useState(null);
-  const [viewport, setViewport] = React34.useState(null);
+  const [content, setContent] = React342.useState(null);
+  const [viewport, setViewport] = React342.useState(null);
   const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));
-  const [selectedItem, setSelectedItem] = React34.useState(null);
-  const [selectedItemText, setSelectedItemText] = React34.useState(null);
+  const [selectedItem, setSelectedItem] = React342.useState(null);
+  const [selectedItemText, setSelectedItemText] = React342.useState(null);
   const getItems = useCollection(__scopeSelect);
-  const [isPositioned, setIsPositioned] = React34.useState(false);
-  const firstValidItemFoundRef = React34.useRef(false);
-  React34.useEffect(() => {
+  const [isPositioned, setIsPositioned] = React342.useState(false);
+  const firstValidItemFoundRef = React342.useRef(false);
+  React342.useEffect(() => {
     if (content)
       return hideOthers(content);
   }, [content]);
   useFocusGuards();
-  const focusFirst2 = React34.useCallback((candidates) => {
+  const focusFirst2 = React342.useCallback((candidates) => {
     const [firstItem, ...restItems] = getItems().map((item) => item.ref.current);
     const [lastItem] = restItems.slice(-1);
     const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
@@ -17655,14 +17846,14 @@ var SelectContentImpl = React34.forwardRef((props, forwardedRef) => {
         return;
     }
   }, [getItems, viewport]);
-  const focusSelectedItem = React34.useCallback(() => focusFirst2([selectedItem, content]), [focusFirst2, selectedItem, content]);
-  React34.useEffect(() => {
+  const focusSelectedItem = React342.useCallback(() => focusFirst2([selectedItem, content]), [focusFirst2, selectedItem, content]);
+  React342.useEffect(() => {
     if (isPositioned) {
       focusSelectedItem();
     }
   }, [isPositioned, focusSelectedItem]);
   const { onOpenChange, triggerPointerDownPosRef } = context;
-  React34.useEffect(() => {
+  React342.useEffect(() => {
     if (content) {
       let pointerMoveDelta = { x: 0, y: 0 };
       const handlePointerMove = (event) => {
@@ -17692,7 +17883,7 @@ var SelectContentImpl = React34.forwardRef((props, forwardedRef) => {
       };
     }
   }, [content, onOpenChange, triggerPointerDownPosRef]);
-  React34.useEffect(() => {
+  React342.useEffect(() => {
     const close = () => onOpenChange(false);
     window.addEventListener("blur", close);
     window.addEventListener("resize", close);
@@ -17709,7 +17900,7 @@ var SelectContentImpl = React34.forwardRef((props, forwardedRef) => {
       setTimeout(() => nextItem.ref.current.focus());
     }
   });
-  const itemRefCallback = React34.useCallback((node, value, disabled) => {
+  const itemRefCallback = React342.useCallback((node, value, disabled) => {
     const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
     const isSelectedItem = context.value !== undefined && context.value === value;
     if (isSelectedItem || isFirstValidItem) {
@@ -17718,8 +17909,8 @@ var SelectContentImpl = React34.forwardRef((props, forwardedRef) => {
         firstValidItemFoundRef.current = true;
     }
   }, [context.value]);
-  const handleItemLeave = React34.useCallback(() => content?.focus(), [content]);
-  const itemTextRefCallback = React34.useCallback((node, value, disabled) => {
+  const handleItemLeave = React342.useCallback(() => content?.focus(), [content]);
+  const itemTextRefCallback = React342.useCallback((node, value, disabled) => {
     const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
     const isSelectedItem = context.value !== undefined && context.value === value;
     if (isSelectedItem || isFirstValidItem) {
@@ -17814,18 +18005,18 @@ var SelectContentImpl = React34.forwardRef((props, forwardedRef) => {
 });
 SelectContentImpl.displayName = CONTENT_IMPL_NAME;
 var ITEM_ALIGNED_POSITION_NAME = "SelectItemAlignedPosition";
-var SelectItemAlignedPosition = React34.forwardRef((props, forwardedRef) => {
+var SelectItemAlignedPosition = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, onPlaced, ...popperProps } = props;
   const context = useSelectContext(CONTENT_NAME2, __scopeSelect);
   const contentContext = useSelectContentContext(CONTENT_NAME2, __scopeSelect);
-  const [contentWrapper, setContentWrapper] = React34.useState(null);
-  const [content, setContent] = React34.useState(null);
+  const [contentWrapper, setContentWrapper] = React342.useState(null);
+  const [content, setContent] = React342.useState(null);
   const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));
   const getItems = useCollection(__scopeSelect);
-  const shouldExpandOnScrollRef = React34.useRef(false);
-  const shouldRepositionRef = React34.useRef(true);
+  const shouldExpandOnScrollRef = React342.useRef(false);
+  const shouldRepositionRef = React342.useRef(true);
   const { viewport, selectedItem, selectedItemText, focusSelectedItem } = contentContext;
-  const position = React34.useCallback(() => {
+  const position = React342.useCallback(() => {
     if (context.trigger && context.valueNode && contentWrapper && content && viewport && selectedItem && selectedItemText) {
       const triggerRect = context.trigger.getBoundingClientRect();
       const contentRect = content.getBoundingClientRect();
@@ -17906,12 +18097,12 @@ var SelectItemAlignedPosition = React34.forwardRef((props, forwardedRef) => {
     onPlaced
   ]);
   useLayoutEffect22(() => position(), [position]);
-  const [contentZIndex, setContentZIndex] = React34.useState();
+  const [contentZIndex, setContentZIndex] = React342.useState();
   useLayoutEffect22(() => {
     if (content)
       setContentZIndex(window.getComputedStyle(content).zIndex);
   }, [content]);
-  const handleScrollButtonChange = React34.useCallback((node) => {
+  const handleScrollButtonChange = React342.useCallback((node) => {
     if (node && shouldRepositionRef.current === true) {
       position();
       focusSelectedItem?.();
@@ -17945,7 +18136,7 @@ var SelectItemAlignedPosition = React34.forwardRef((props, forwardedRef) => {
 });
 SelectItemAlignedPosition.displayName = ITEM_ALIGNED_POSITION_NAME;
 var POPPER_POSITION_NAME = "SelectPopperPosition";
-var SelectPopperPosition = React34.forwardRef((props, forwardedRef) => {
+var SelectPopperPosition = React342.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
     align = "start",
@@ -17975,12 +18166,12 @@ var SelectPopperPosition = React34.forwardRef((props, forwardedRef) => {
 SelectPopperPosition.displayName = POPPER_POSITION_NAME;
 var [SelectViewportProvider, useSelectViewportContext] = createSelectContext(CONTENT_NAME2, {});
 var VIEWPORT_NAME = "SelectViewport";
-var SelectViewport = React34.forwardRef((props, forwardedRef) => {
+var SelectViewport = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, nonce, ...viewportProps } = props;
   const contentContext = useSelectContentContext(VIEWPORT_NAME, __scopeSelect);
   const viewportContext = useSelectViewportContext(VIEWPORT_NAME, __scopeSelect);
   const composedRefs = useComposedRefs(forwardedRef, contentContext.onViewportChange);
-  const prevScrollTopRef = React34.useRef(0);
+  const prevScrollTopRef = React342.useRef(0);
   return /* @__PURE__ */ jsxs4(Fragment62, { children: [
     /* @__PURE__ */ jsx232("style", {
       dangerouslySetInnerHTML: {
@@ -18029,14 +18220,14 @@ var SelectViewport = React34.forwardRef((props, forwardedRef) => {
 SelectViewport.displayName = VIEWPORT_NAME;
 var GROUP_NAME = "SelectGroup";
 var [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME);
-var SelectGroup = React34.forwardRef((props, forwardedRef) => {
+var SelectGroup = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...groupProps } = props;
   const groupId = useId();
   return /* @__PURE__ */ jsx232(SelectGroupContextProvider, { scope: __scopeSelect, id: groupId, children: /* @__PURE__ */ jsx232(Primitive.div, { role: "group", "aria-labelledby": groupId, ...groupProps, ref: forwardedRef }) });
 });
 SelectGroup.displayName = GROUP_NAME;
 var LABEL_NAME = "SelectLabel";
-var SelectLabel = React34.forwardRef((props, forwardedRef) => {
+var SelectLabel = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...labelProps } = props;
   const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
   return /* @__PURE__ */ jsx232(Primitive.div, { id: groupContext.id, ...labelProps, ref: forwardedRef });
@@ -18044,7 +18235,7 @@ var SelectLabel = React34.forwardRef((props, forwardedRef) => {
 SelectLabel.displayName = LABEL_NAME;
 var ITEM_NAME = "SelectItem";
 var [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME);
-var SelectItem = React34.forwardRef((props, forwardedRef) => {
+var SelectItem = React342.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
     value,
@@ -18055,8 +18246,8 @@ var SelectItem = React34.forwardRef((props, forwardedRef) => {
   const context = useSelectContext(ITEM_NAME, __scopeSelect);
   const contentContext = useSelectContentContext(ITEM_NAME, __scopeSelect);
   const isSelected = context.value === value;
-  const [textValue, setTextValue] = React34.useState(textValueProp ?? "");
-  const [isFocused, setIsFocused] = React34.useState(false);
+  const [textValue, setTextValue] = React342.useState(textValueProp ?? "");
+  const [isFocused, setIsFocused] = React342.useState(false);
   const composedRefs = useComposedRefs(forwardedRef, (node) => contentContext.itemRefCallback?.(node, value, disabled));
   const textId = useId();
   const handleSelect = () => {
@@ -18074,7 +18265,7 @@ var SelectItem = React34.forwardRef((props, forwardedRef) => {
     disabled,
     textId,
     isSelected,
-    onItemTextChange: React34.useCallback((node) => {
+    onItemTextChange: React342.useCallback((node) => {
       setTextValue((prevTextValue) => prevTextValue || (node?.textContent ?? "").trim());
     }, []),
     children: /* @__PURE__ */ jsx232(Collection.ItemSlot, {
@@ -18123,16 +18314,16 @@ var SelectItem = React34.forwardRef((props, forwardedRef) => {
 });
 SelectItem.displayName = ITEM_NAME;
 var ITEM_TEXT_NAME = "SelectItemText";
-var SelectItemText = React34.forwardRef((props, forwardedRef) => {
+var SelectItemText = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, className, style, ...itemTextProps } = props;
   const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect);
   const contentContext = useSelectContentContext(ITEM_TEXT_NAME, __scopeSelect);
   const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect);
   const nativeOptionsContext = useSelectNativeOptionsContext(ITEM_TEXT_NAME, __scopeSelect);
-  const [itemTextNode, setItemTextNode] = React34.useState(null);
+  const [itemTextNode, setItemTextNode] = React342.useState(null);
   const composedRefs = useComposedRefs(forwardedRef, (node) => setItemTextNode(node), itemContext.onItemTextChange, (node) => contentContext.itemTextRefCallback?.(node, itemContext.value, itemContext.disabled));
   const textContent = itemTextNode?.textContent;
-  const nativeOption = React34.useMemo(() => /* @__PURE__ */ jsx232("option", { value: itemContext.value, disabled: itemContext.disabled, children: textContent }, itemContext.value), [itemContext.disabled, itemContext.value, textContent]);
+  const nativeOption = React342.useMemo(() => /* @__PURE__ */ jsx232("option", { value: itemContext.value, disabled: itemContext.disabled, children: textContent }, itemContext.value), [itemContext.disabled, itemContext.value, textContent]);
   const { onNativeOptionAdd, onNativeOptionRemove } = nativeOptionsContext;
   useLayoutEffect22(() => {
     onNativeOptionAdd(nativeOption);
@@ -18145,17 +18336,17 @@ var SelectItemText = React34.forwardRef((props, forwardedRef) => {
 });
 SelectItemText.displayName = ITEM_TEXT_NAME;
 var ITEM_INDICATOR_NAME = "SelectItemIndicator";
-var SelectItemIndicator = React34.forwardRef((props, forwardedRef) => {
+var SelectItemIndicator = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...itemIndicatorProps } = props;
   const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
   return itemContext.isSelected ? /* @__PURE__ */ jsx232(Primitive.span, { "aria-hidden": true, ...itemIndicatorProps, ref: forwardedRef }) : null;
 });
 SelectItemIndicator.displayName = ITEM_INDICATOR_NAME;
 var SCROLL_UP_BUTTON_NAME = "SelectScrollUpButton";
-var SelectScrollUpButton = React34.forwardRef((props, forwardedRef) => {
+var SelectScrollUpButton = React342.forwardRef((props, forwardedRef) => {
   const contentContext = useSelectContentContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
   const viewportContext = useSelectViewportContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
-  const [canScrollUp, setCanScrollUp] = React34.useState(false);
+  const [canScrollUp, setCanScrollUp] = React342.useState(false);
   const composedRefs = useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);
   useLayoutEffect22(() => {
     if (contentContext.viewport && contentContext.isPositioned) {
@@ -18183,10 +18374,10 @@ var SelectScrollUpButton = React34.forwardRef((props, forwardedRef) => {
 });
 SelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME;
 var SCROLL_DOWN_BUTTON_NAME = "SelectScrollDownButton";
-var SelectScrollDownButton = React34.forwardRef((props, forwardedRef) => {
+var SelectScrollDownButton = React342.forwardRef((props, forwardedRef) => {
   const contentContext = useSelectContentContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
   const viewportContext = useSelectViewportContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
-  const [canScrollDown, setCanScrollDown] = React34.useState(false);
+  const [canScrollDown, setCanScrollDown] = React342.useState(false);
   const composedRefs = useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);
   useLayoutEffect22(() => {
     if (contentContext.viewport && contentContext.isPositioned) {
@@ -18214,18 +18405,18 @@ var SelectScrollDownButton = React34.forwardRef((props, forwardedRef) => {
   }) : null;
 });
 SelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
-var SelectScrollButtonImpl = React34.forwardRef((props, forwardedRef) => {
+var SelectScrollButtonImpl = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, onAutoScroll, ...scrollIndicatorProps } = props;
   const contentContext = useSelectContentContext("SelectScrollButton", __scopeSelect);
-  const autoScrollTimerRef = React34.useRef(null);
+  const autoScrollTimerRef = React342.useRef(null);
   const getItems = useCollection(__scopeSelect);
-  const clearAutoScrollTimer = React34.useCallback(() => {
+  const clearAutoScrollTimer = React342.useCallback(() => {
     if (autoScrollTimerRef.current !== null) {
       window.clearInterval(autoScrollTimerRef.current);
       autoScrollTimerRef.current = null;
     }
   }, []);
-  React34.useEffect(() => {
+  React342.useEffect(() => {
     return () => clearAutoScrollTimer();
   }, [clearAutoScrollTimer]);
   useLayoutEffect22(() => {
@@ -18254,13 +18445,13 @@ var SelectScrollButtonImpl = React34.forwardRef((props, forwardedRef) => {
   });
 });
 var SEPARATOR_NAME = "SelectSeparator";
-var SelectSeparator = React34.forwardRef((props, forwardedRef) => {
+var SelectSeparator = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...separatorProps } = props;
   return /* @__PURE__ */ jsx232(Primitive.div, { "aria-hidden": true, ...separatorProps, ref: forwardedRef });
 });
 SelectSeparator.displayName = SEPARATOR_NAME;
 var ARROW_NAME2 = "SelectArrow";
-var SelectArrow = React34.forwardRef((props, forwardedRef) => {
+var SelectArrow = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...arrowProps } = props;
   const popperScope = usePopperScope(__scopeSelect);
   const context = useSelectContext(ARROW_NAME2, __scopeSelect);
@@ -18271,12 +18462,12 @@ SelectArrow.displayName = ARROW_NAME2;
 function shouldShowPlaceholder(value) {
   return value === "" || value === undefined;
 }
-var BubbleSelect = React34.forwardRef((props, forwardedRef) => {
+var BubbleSelect = React342.forwardRef((props, forwardedRef) => {
   const { value, ...selectProps } = props;
-  const ref = React34.useRef(null);
+  const ref = React342.useRef(null);
   const composedRefs = useComposedRefs(forwardedRef, ref);
   const prevValue = usePrevious(value);
-  React34.useEffect(() => {
+  React342.useEffect(() => {
     const select = ref.current;
     const selectProto = window.HTMLSelectElement.prototype;
     const descriptor = Object.getOwnPropertyDescriptor(selectProto, "value");
@@ -18292,9 +18483,9 @@ var BubbleSelect = React34.forwardRef((props, forwardedRef) => {
 BubbleSelect.displayName = "BubbleSelect";
 function useTypeaheadSearch(onSearchChange) {
   const handleSearchChange = useCallbackRef(onSearchChange);
-  const searchRef = React34.useRef("");
-  const timerRef = React34.useRef(0);
-  const handleTypeaheadSearch = React34.useCallback((key) => {
+  const searchRef = React342.useRef("");
+  const timerRef = React342.useRef(0);
+  const handleTypeaheadSearch = React342.useCallback((key) => {
     const search = searchRef.current + key;
     handleSearchChange(search);
     (function updateSearch(value) {
@@ -18304,11 +18495,11 @@ function useTypeaheadSearch(onSearchChange) {
         timerRef.current = window.setTimeout(() => updateSearch(""), 1000);
     })(search);
   }, [handleSearchChange]);
-  const resetTypeahead = React34.useCallback(() => {
+  const resetTypeahead = React342.useCallback(() => {
     searchRef.current = "";
     window.clearTimeout(timerRef.current);
   }, []);
-  React34.useEffect(() => {
+  React342.useEffect(() => {
     return () => window.clearTimeout(timerRef.current);
   }, []);
   return [searchRef, handleTypeaheadSearch, resetTypeahead];
@@ -18397,7 +18588,7 @@ var ChevronDown = createLucideIcon("ChevronDown", [
 var ChevronUp = createLucideIcon("ChevronUp", [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]]);
 var Select2 = Root222;
 var SelectValue2 = Value;
-var SelectTrigger2 = React352.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(Trigger, {
+var SelectTrigger2 = React35.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(Trigger, {
   ref,
   className: cn("flex h-10 w-full items-center justify-between rounded-md border-black border-2 border-b-4 bg-card-bg px-3 py-5 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 font-brand", className),
   ...props,
@@ -18412,7 +18603,7 @@ var SelectTrigger2 = React352.forwardRef(({ className, children, ...props }, ref
   ]
 }));
 SelectTrigger2.displayName = Trigger.displayName;
-var SelectScrollUpButton2 = React352.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx242(ScrollUpButton, {
+var SelectScrollUpButton2 = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx242(ScrollUpButton, {
   ref,
   className: cn("flex cursor-default items-center justify-center py-1", className),
   ...props,
@@ -18421,7 +18612,7 @@ var SelectScrollUpButton2 = React352.forwardRef(({ className, ...props }, ref) =
   })
 }));
 SelectScrollUpButton2.displayName = ScrollUpButton.displayName;
-var SelectScrollDownButton2 = React352.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx242(ScrollDownButton, {
+var SelectScrollDownButton2 = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx242(ScrollDownButton, {
   ref,
   className: cn("flex cursor-default items-center justify-center py-1", className),
   ...props,
@@ -18430,7 +18621,7 @@ var SelectScrollDownButton2 = React352.forwardRef(({ className, ...props }, ref)
   })
 }));
 SelectScrollDownButton2.displayName = ScrollDownButton.displayName;
-var SelectContent2 = React352.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx242(Portal2, {
+var SelectContent2 = React35.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx242(Portal2, {
   children: /* @__PURE__ */ jsxs5(Content2, {
     ref,
     className: cn(" border-2 border-black relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md font-brand bg-card-bg text-text shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
@@ -18447,13 +18638,13 @@ var SelectContent2 = React352.forwardRef(({ className, children, position = "pop
   })
 }));
 SelectContent2.displayName = Content2.displayName;
-var SelectLabel2 = React352.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx242(Label, {
+var SelectLabel2 = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx242(Label, {
   ref,
   className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
   ...props
 }));
 SelectLabel2.displayName = Label.displayName;
-var SelectItem2 = React352.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(Item, {
+var SelectItem2 = React35.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(Item, {
   ref,
   className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-slate-200 dark:focus:bg-white/10 data-disabled:pointer-events-none data-disabled:opacity-50 font-brand", className),
   ...props,
@@ -18472,7 +18663,7 @@ var SelectItem2 = React352.forwardRef(({ className, children, ...props }, ref) =
   ]
 }));
 SelectItem2.displayName = Item.displayName;
-var SelectSeparator2 = React352.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx242(Separator, {
+var SelectSeparator2 = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx242(Separator, {
   ref,
   className: cn("-mx-1 my-1 h-px bg-muted", className),
   ...props
@@ -18501,19 +18692,19 @@ function composeEventHandlers2(originalEventHandler, ourEventHandler, { checkFor
 function createContextScope2(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
   function createContext32(rootComponentName, defaultContext) {
-    const BaseContext = React36.createContext(defaultContext);
+    const BaseContext = React362.createContext(defaultContext);
     const index2 = defaultContexts.length;
     defaultContexts = [...defaultContexts, defaultContext];
     const Provider = (props) => {
       const { scope, children, ...context } = props;
       const Context = scope?.[scopeName]?.[index2] || BaseContext;
-      const value = React36.useMemo(() => context, Object.values(context));
+      const value = React362.useMemo(() => context, Object.values(context));
       return /* @__PURE__ */ jsx262(Context.Provider, { value, children });
     };
     Provider.displayName = rootComponentName + "Provider";
     function useContext222(consumerName, scope) {
       const Context = scope?.[scopeName]?.[index2] || BaseContext;
-      const context = React36.useContext(Context);
+      const context = React362.useContext(Context);
       if (context)
         return context;
       if (defaultContext !== undefined)
@@ -18524,11 +18715,11 @@ function createContextScope2(scopeName, createContextScopeDeps = []) {
   }
   const createScope = () => {
     const scopeContexts = defaultContexts.map((defaultContext) => {
-      return React36.createContext(defaultContext);
+      return React362.createContext(defaultContext);
     });
     return function useScope(scope) {
       const contexts = scope?.[scopeName] || scopeContexts;
-      return React36.useMemo(() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }), [scope, contexts]);
+      return React362.useMemo(() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }), [scope, contexts]);
     };
   };
   createScope.scopeName = scopeName;
@@ -18549,7 +18740,7 @@ function composeContextScopes2(...scopes) {
         const currentScope = scopeProps[`__scope${scopeName}`];
         return { ...nextScopes2, ...currentScope };
       }, {});
-      return React36.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
+      return React362.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
     };
   };
   createScope.scopeName = baseScope.scopeName;