@remotion/studio 4.0.487 → 4.0.489

package/dist/esm/{chunk-y2t24cx0.js → chunk-jrta3xaf.js}

@@ -123,6 +123,42 @@ var noop = () => {
   return;
 };
 
+// src/helpers/studio-runtime-config.ts
+import { DEFAULT_TIMELINE_TRACKS } from "@remotion/studio-shared";
+var DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = 300;
+var defaultStudioRuntimeConfig = {
+  askAIEnabled: false,
+  bufferStateDelayInMilliseconds: null,
+  experimentalClientSideRenderingEnabled: false,
+  interactivityEnabled: true,
+  keyboardShortcutsEnabled: true,
+  maxTimelineTracks: null
+};
+var getStudioRuntimeConfig = () => {
+  if (typeof window === "undefined") {
+    return defaultStudioRuntimeConfig;
+  }
+  return window.remotion_studioConfig ?? defaultStudioRuntimeConfig;
+};
+var getStudioAskAIEnabled = () => {
+  return getStudioRuntimeConfig().askAIEnabled;
+};
+var getStudioInteractivityEnabled = () => {
+  return getStudioRuntimeConfig().interactivityEnabled;
+};
+var getStudioKeyboardShortcutsEnabled = () => {
+  return getStudioRuntimeConfig().keyboardShortcutsEnabled;
+};
+var getStudioExperimentalClientSideRenderingEnabled = () => {
+  return getStudioRuntimeConfig().experimentalClientSideRenderingEnabled;
+};
+var getStudioMaxTimelineTracks = () => {
+  return getStudioRuntimeConfig().maxTimelineTracks ?? DEFAULT_TIMELINE_TRACKS;
+};
+var getStudioBufferStateDelayInMilliseconds = () => {
+  return getStudioRuntimeConfig().bufferStateDelayInMilliseconds ?? DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS;
+};
+
 // src/state/canvas-ref.ts
 import { createRef } from "react";
 var canvasRef = createRef();
@@ -942,18 +978,18 @@ var KeybindingContextProvider = ({ children }) => {
 };
 
 // src/helpers/use-keybinding.ts
-if (!process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+if (!getStudioKeyboardShortcutsEnabled()) {
   console.warn("Keyboard shortcuts disabled either due to: a) --disable-keyboard-shortcuts being passed b) Config.setKeyboardShortcutsEnabled(false) being set or c) a Remotion version mismatch.");
 }
 var areKeyboardShortcutsDisabled = () => {
-  return !process.env.KEYBOARD_SHORTCUTS_ENABLED;
+  return !getStudioKeyboardShortcutsEnabled();
 };
 var useKeybinding = () => {
   const [paneId] = useState3(() => String(Math.random()));
   const context = useContext4(KeybindingContext);
   const { isHighestContext } = useZIndex();
   const registerKeybinding = useCallback4((options) => {
-    if (!process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+    if (!getStudioKeyboardShortcutsEnabled()) {
       return {
         unregister: () => {
           return;
@@ -1989,7 +2025,7 @@ var PreviewServerConnection = ({ children, readOnlyStudio }) => {
 };
 
 // src/helpers/show-browser-rendering.ts
-var SHOW_BROWSER_RENDERING = Boolean(process.env.EXPERIMENTAL_CLIENT_SIDE_RENDERING_ENABLED);
+var SHOW_BROWSER_RENDERING = getStudioExperimentalClientSideRenderingEnabled();
 
 // src/helpers/timeline-node-path-key.ts
 import { stringifySequenceExpandedRowKey } from "@remotion/studio-shared";
@@ -3734,7 +3770,7 @@ var MenuContent = ({
     return containerStyles;
   }, [fixedHeight, isMobileLayout]);
   useEffect11(() => {
-    if (!keybindings.isHighestContext || !process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+    if (!keybindings.isHighestContext || !getStudioKeyboardShortcutsEnabled()) {
       return;
     }
     const onKeyDown = (event) => {
@@ -6089,6 +6125,9 @@ import {
   Internals as Internals19
 } from "remotion";
 
+// src/helpers/interactivity-enabled.ts
+var studioInteractivityEnabled = getStudioInteractivityEnabled();
+
 // src/components/ExpandedTracksProvider.tsx
 import { createContext as createContext13, useCallback as useCallback24, useMemo as useMemo24, useState as useState20 } from "react";
 
@@ -9486,7 +9525,7 @@ var TimelineSelectionProvider = ({ children }) => {
   const { canvasContent } = useContext18(Internals19.CompositionManager);
   const timelineSelectionScope = canvasContent?.type === "composition" ? canvasContent.compositionId : null;
   const { expandParentTracks } = useContext18(ExpandedTracksSetterContext);
-  const canSelect = previewServerState.type === "connected" && !window.remotion_isReadOnlyStudio;
+  const canSelect = studioInteractivityEnabled && previewServerState.type === "connected" && !window.remotion_isReadOnlyStudio;
   const [selectedItems, setSelectedItems] = useState21([]);
   const selectionAnchor = useRef16(null);
   const selectionScope = useRef16(null);
@@ -10088,7 +10127,7 @@ var GlobalKeybindings = ({ readOnlyStudio }) => {
       commandCtrlKey: true,
       preventDefault: true
     });
-    const cmdIKey = process.env.ASK_AI_ENABLED ? keybindings.registerKeybinding({
+    const cmdIKey = getStudioAskAIEnabled() ? keybindings.registerKeybinding({
       event: "keydown",
       key: "i",
       callback: () => {
@@ -11713,7 +11752,7 @@ var useMenuStructure = (closeMenu, readOnlyStudio) => {
         label: "Tools",
         leaveLeftPadding: false,
         items: [
-          process.env.ASK_AI_ENABLED ? {
+          getStudioAskAIEnabled() ? {
             id: "ask-ai",
             value: "ask-ai",
             label: "Ask AI",
@@ -13898,12 +13937,12 @@ var ErrorLoader = ({
 // src/components/Canvas.tsx
 import {
   ASSET_DRAG_MIME_TYPE as ASSET_DRAG_MIME_TYPE2,
-  COMPOSITION_DRAG_MIME_TYPE as COMPOSITION_DRAG_MIME_TYPE4,
   COMPONENT_DRAG_MIME_TYPE as COMPONENT_DRAG_MIME_TYPE2,
+  COMPOSITION_DRAG_MIME_TYPE as COMPOSITION_DRAG_MIME_TYPE4,
   ELEMENT_DRAG_MIME_TYPE as ELEMENT_DRAG_MIME_TYPE3,
   parseAssetDragData,
-  parseCompositionDragData as parseCompositionDragData3,
   parseComponentDragData,
+  parseCompositionDragData as parseCompositionDragData3,
   parseSfxDragData,
   SFX_DRAG_MIME_TYPE as SFX_DRAG_MIME_TYPE2
 } from "@remotion/studio-shared";
@@ -23383,7 +23422,7 @@ var SelectedOutlineOverlay = ({
     selectItem(item, interaction, undefined, { reveal: true });
   }, [selectItem]);
   const outlineTargets = useMemo56(() => {
-    if (!editorShowOutlines) {
+    if (!studioInteractivityEnabled || !editorShowOutlines) {
       return [];
     }
     const selectedSequenceKeys = getSelectedSequenceKeys(selectedItems);
@@ -24193,6 +24232,31 @@ var ResetZoomButton = ({ onClick }) => {
 
 // src/components/Canvas.tsx
 import { jsx as jsx94, jsxs as jsxs43, Fragment as Fragment19 } from "react/jsx-runtime";
+var elementInstallCompositionIdStyle = {
+  fontFamily: "monospace",
+  fontSize: 13
+};
+var elementInstallCodeDetailsStyle = {
+  marginTop: 12,
+  fontSize: 13
+};
+var elementInstallCodeSummaryStyle = {
+  cursor: "pointer",
+  fontSize: 13,
+  fontWeight: 500
+};
+var elementInstallCodeBlockStyle = {
+  marginTop: 8,
+  marginBottom: 0,
+  maxHeight: 240,
+  overflow: "auto",
+  padding: 12,
+  borderRadius: 6,
+  backgroundColor: "rgba(255, 255, 255, 0.06)",
+  fontSize: 12,
+  lineHeight: 1.5,
+  whiteSpace: "pre"
+};
 var getContainerStyle = (editorZoomGestures) => ({
   flex: 1,
   display: "flex",
@@ -24327,12 +24391,18 @@ var Canvas = ({ canvasContent, size: size2 }) => {
   const suppressWheelFromWebKitPinchRef = useRef32(false);
   const touchPinchRef = useRef32(null);
   const keybindings = useKeybinding();
+  const confirm = useConfirmationDialog();
   const config = Internals40.useUnsafeVideoConfig();
   const areRulersVisible = useIsRulerVisible();
   const { editorShowGuides } = useContext38(EditorShowGuidesContext);
   const { compositions } = useContext38(Internals40.CompositionManager);
-  const { previewServerState } = useContext38(StudioServerConnectionCtx);
+  const { previewServerState, subscribeToEvent } = useContext38(StudioServerConnectionCtx);
+  const previewServerClientId = previewServerState.type === "connected" ? previewServerState.clientId : null;
   const [isAddingAsset, setIsAddingAsset] = useState42(false);
+  const [installingElementName, setInstallingElementName] = useState42(null);
+  const [pendingElementInstallRequests, setPendingElementInstallRequests] = useState42([]);
+  const [activeElementInstallRequest, setActiveElementInstallRequest] = useState42(null);
+  const lastFocusedAtRef = useRef32(typeof document === "undefined" || document.hasFocus() ? Date.now() : null);
   const [assetResolution, setAssetResolution] = useState42(null);
   const currentCompositionId = canvasContent.type === "composition" ? canvasContent.compositionId : null;
   const currentComposition = useMemo58(() => {
@@ -24347,7 +24417,8 @@ var Canvas = ({ canvasContent, size: size2 }) => {
     compositionFile,
     compositionId: currentCompositionId
   });
-  const canDropAssets = previewServerState.type === "connected" && !window.remotion_isReadOnlyStudio && compositionComponentInfo?.canAddSequence === true && currentCompositionId !== null && compositionFile !== null && !isAddingAsset;
+  const canInstallElements = previewServerClientId !== null && !window.remotion_isReadOnlyStudio && compositionComponentInfo?.canAddSequence === true && currentCompositionId !== null && compositionFile !== null;
+  const canDropAssets = canInstallElements && !isAddingAsset;
   const contentDimensions = useMemo58(() => {
     if ((canvasContent.type === "asset" || canvasContent.type === "output" || canvasContent.type === "output-blob") && assetResolution && assetResolution.type === "found") {
       return assetResolution.dimensions;
@@ -24703,6 +24774,146 @@ var Canvas = ({ canvasContent, size: size2 }) => {
   useEffect42(() => {
     fetchMetadata();
   }, [fetchMetadata]);
+  const updateElementInstallTarget = useCallback51((requestId) => {
+    if (previewServerClientId === null) {
+      return;
+    }
+    callApi("/api/update-element-install-target", {
+      requestId,
+      clientId: previewServerClientId,
+      compositionFile: canInstallElements ? compositionFile : null,
+      compositionId: canInstallElements ? currentCompositionId : null,
+      canInstall: canInstallElements,
+      lastFocusedAt: lastFocusedAtRef.current,
+      readOnly: window.remotion_isReadOnlyStudio
+    }).catch(() => {
+      return;
+    });
+  }, [
+    canInstallElements,
+    compositionFile,
+    currentCompositionId,
+    previewServerClientId
+  ]);
+  useEffect42(() => {
+    const markFocused = () => {
+      lastFocusedAtRef.current = Date.now();
+    };
+    window.addEventListener("focus", markFocused);
+    document.addEventListener("pointerdown", markFocused, { capture: true });
+    return () => {
+      window.removeEventListener("focus", markFocused);
+      document.removeEventListener("pointerdown", markFocused, { capture: true });
+    };
+  }, []);
+  useEffect42(() => {
+    return subscribeToEvent("request-element-install-target", (event) => {
+      if (event.type !== "request-element-install-target") {
+        return;
+      }
+      updateElementInstallTarget(event.requestId);
+    });
+  }, [subscribeToEvent, updateElementInstallTarget]);
+  useEffect42(() => {
+    if (installingElementName === null) {
+      return;
+    }
+    const previousTitle = document.title;
+    document.title = `\uD83D\uDCE6 Install ${installingElementName} - Remotion Studio`;
+    return () => {
+      document.title = previousTitle;
+    };
+  }, [installingElementName]);
+  useEffect42(() => {
+    if (previewServerClientId === null) {
+      return;
+    }
+    return subscribeToEvent("element-install-request", (event) => {
+      if (event.type !== "element-install-request" || event.request.clientId !== previewServerClientId) {
+        return;
+      }
+      setPendingElementInstallRequests((requests) => [
+        ...requests,
+        event.request
+      ]);
+    });
+  }, [previewServerClientId, subscribeToEvent]);
+  useEffect42(() => {
+    if (activeElementInstallRequest !== null || pendingElementInstallRequests.length === 0) {
+      return;
+    }
+    const [nextRequest, ...remainingRequests] = pendingElementInstallRequests;
+    if (!nextRequest) {
+      throw new Error("Expected pending Element install request");
+    }
+    setActiveElementInstallRequest(nextRequest);
+    setPendingElementInstallRequests(remainingRequests);
+  }, [activeElementInstallRequest, pendingElementInstallRequests]);
+  useEffect42(() => {
+    if (activeElementInstallRequest === null) {
+      return;
+    }
+    let canceled = false;
+    const handleInstallRequest = async () => {
+      setInstallingElementName(activeElementInstallRequest.element.displayName);
+      const accepted = await confirm({
+        title: "Install Element",
+        message: /* @__PURE__ */ jsxs43(Fragment19, {
+          children: [
+            "Install “",
+            activeElementInstallRequest.element.displayName,
+            "” into",
+            " ",
+            /* @__PURE__ */ jsx94("code", {
+              style: elementInstallCompositionIdStyle,
+              children: activeElementInstallRequest.compositionId
+            }),
+            " ",
+            "composition? This will create an Element source file and update the composition source.",
+            /* @__PURE__ */ jsxs43("details", {
+              style: elementInstallCodeDetailsStyle,
+              children: [
+                /* @__PURE__ */ jsx94("summary", {
+                  style: elementInstallCodeSummaryStyle,
+                  children: "Preview Element source"
+                }),
+                /* @__PURE__ */ jsx94("pre", {
+                  style: elementInstallCodeBlockStyle,
+                  children: /* @__PURE__ */ jsx94("code", {
+                    children: activeElementInstallRequest.element.sourceCode
+                  })
+                })
+              ]
+            })
+          ]
+        }),
+        confirmLabel: "Install",
+        cancelLabel: "Cancel"
+      });
+      if (accepted && !canceled) {
+        await insertElement({
+          element: activeElementInstallRequest.element,
+          compositionFile: activeElementInstallRequest.compositionFile,
+          compositionId: activeElementInstallRequest.compositionId,
+          dropPosition: null
+        });
+      }
+    };
+    handleInstallRequest().finally(() => {
+      if (canceled) {
+        return;
+      }
+      setInstallingElementName(null);
+      setActiveElementInstallRequest(null);
+    }).catch((err) => {
+      setTimeout(() => {
+        throw err;
+      }, 0);
+    });
+    return () => {
+      canceled = true;
+    };
+  }, [activeElementInstallRequest, confirm]);
   const onDragOver = useCallback51((event) => {
     if (!canDropAssets || !isFileDragEvent(event) && !isAssetDragEvent(event) && !isCompositionDragEvent(event) && !isComponentDragEvent(event) && !isElementDragEvent(event) && !isSfxDragEvent(event) && !isRemoteAssetDragEvent(event) || !isDragEventInsideCanvas(event)) {
       return;
@@ -26907,6 +27118,9 @@ var VisualControlsProvider = ({ children }) => {
     if (!env.isStudio) {
       return value;
     }
+    if (!studioInteractivityEnabled) {
+      return value;
+    }
     if (!z) {
       return value;
     }
@@ -33297,7 +33511,7 @@ var DefaultInspector = ({ composition, currentDefaultProps, readOnlyStudio, setD
   const { handles: visualControlHandles } = useContext56(VisualControlsContext);
   const [defaultPropsMode, setDefaultPropsMode] = useState68("schema");
   const compositionId = composition?.id ?? null;
-  const hasVisualControls = Object.keys(visualControlHandles).length > 0;
+  const hasVisualControls = studioInteractivityEnabled && Object.keys(visualControlHandles).length > 0;
   useEffect60(() => {
     setDefaultPropsMode("schema");
   }, [compositionId]);
@@ -47537,9 +47751,8 @@ import React207, { useCallback as useCallback166, useContext as useContext120, u
 import { Internals as Internals98 } from "remotion";
 
 // src/components/Timeline/MaxTimelineTracks.tsx
-import { DEFAULT_TIMELINE_TRACKS } from "@remotion/studio-shared";
 import { jsxs as jsxs128 } from "react/jsx-runtime";
-var MAX_TIMELINE_TRACKS = typeof process.env.MAX_TIMELINE_TRACKS === "undefined" || process.env.MAX_TIMELINE_TRACKS === null ? DEFAULT_TIMELINE_TRACKS : Number(process.env.MAX_TIMELINE_TRACKS);
+var MAX_TIMELINE_TRACKS = getStudioMaxTimelineTracks();
 var MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = 24;
 var container39 = {
   height: MAX_TIMELINE_TRACKS_NOTICE_HEIGHT,
@@ -48135,7 +48348,7 @@ var TimelineDragHandler = () => {
     ref: sliderAreaRef,
     style: containerStyle9,
     ...{ [TIMELINE_SCRUBBER_ATTR]: true },
-    children: video ? /* @__PURE__ */ jsx258(TimelineDragHandlerInnerMemo, {}) : null
+    children: video && studioInteractivityEnabled ? /* @__PURE__ */ jsx258(TimelineDragHandlerInnerMemo, {}) : null
   });
 };
 var TimelineDragHandlerInner = () => {
@@ -49202,6 +49415,7 @@ var TimelineSequenceItem = ({
   const nodePath = nodePathInfo?.sequenceSubscriptionKey ?? null;
   const { previewServerState } = useContext111(StudioServerConnectionCtx);
   const previewConnected = previewServerState.type === "connected";
+  const previewInteractive = previewConnected && studioInteractivityEnabled;
   const { getIsExpanded } = useContext111(ExpandedTracksGetterContext);
   const { toggleTrack } = useContext111(ExpandedTracksSetterContext);
   const { setPropStatuses } = useContext111(Internals91.VisualModeSettersContext);
@@ -49238,7 +49452,7 @@ var TimelineSequenceItem = ({
     propStatusesForOverride,
     saveName
   } = useRenameSequence({
-    clientId: previewServerState.type === "connected" ? previewServerState.clientId : null,
+    clientId: previewInteractive && previewServerState.type === "connected" ? previewServerState.clientId : null,
     nodePathInfo,
     sequence,
     validatedLocation
@@ -49246,22 +49460,22 @@ var TimelineSequenceItem = ({
   const canDeleteFromSource = Boolean(nodePath && validatedLocation?.source);
   const nodePathKey = useMemo170(() => nodePath ? Internals91.makeSequencePropsSubscriptionKey(nodePath) : null, [nodePath]);
   const parentId = sequence.parent ?? null;
-  const canReorderSequence = previewConnected && Boolean(nodePath && nodePathKey && validatedLocation?.source) && nodePathInfo?.numberOfSequencesWithThisNodePath === 1;
-  const canHandleSequenceDrag = previewConnected;
+  const canReorderSequence = previewInteractive && Boolean(nodePath && nodePathKey && validatedLocation?.source) && nodePathInfo?.numberOfSequencesWithThisNodePath === 1;
+  const canHandleSequenceDrag = previewInteractive;
   const confirm = useConfirmationDialog();
-  const deleteDisabled = useMemo170(() => !previewConnected || !sequence.controls || !canDeleteFromSource, [previewConnected, sequence.controls, canDeleteFromSource]);
+  const deleteDisabled = useMemo170(() => !previewInteractive || !sequence.controls || !canDeleteFromSource, [previewInteractive, sequence.controls, canDeleteFromSource]);
   const duplicateDisabled = deleteDisabled;
-  const disableInteractivityDisabled = !previewConnected || !sequence.showInTimeline || !nodePath || !validatedLocation?.source;
+  const disableInteractivityDisabled = !previewInteractive || !sequence.showInTimeline || !nodePath || !validatedLocation?.source;
   const onDuplicateSequenceFromSource = useCallback162(() => {
-    if (!validatedLocation?.source || !nodePathInfo) {
+    if (duplicateDisabled || !validatedLocation?.source || !nodePathInfo) {
       return;
     }
     duplicateSequencesFromSource([nodePathInfo], confirm).catch(() => {
       return;
     });
-  }, [confirm, nodePathInfo, validatedLocation?.source]);
+  }, [confirm, duplicateDisabled, nodePathInfo, validatedLocation?.source]);
   const onDeleteSequenceFromSource = useCallback162(async () => {
-    if (!validatedLocation?.source || !nodePath) {
+    if (deleteDisabled || !validatedLocation?.source || !nodePath) {
       return;
     }
     if (nodePathInfo && nodePathInfo.numberOfSequencesWithThisNodePath > 1) {
@@ -49291,7 +49505,13 @@ var TimelineSequenceItem = ({
     } catch (err) {
       showNotification(err.message, 4000);
     }
-  }, [confirm, nodePath, validatedLocation?.source, nodePathInfo]);
+  }, [
+    confirm,
+    deleteDisabled,
+    nodePath,
+    validatedLocation?.source,
+    nodePathInfo
+  ]);
   const onDisableSequenceInteractivity = useCallback162(() => {
     if (disableInteractivityDisabled || !nodePath || !validatedLocation?.source || previewServerState.type !== "connected") {
       return;
@@ -49526,8 +49746,8 @@ var TimelineSequenceItem = ({
       ...effectDropHighlight
     } : inner2;
   }, [effectDropHovered, inner2]);
-  const hasExpandableContent = Boolean(sequence.controls) || sequence.effects.length > 0;
-  const canToggleVisibility = previewConnected && Boolean(sequence.controls) && nodePath !== null && validatedLocation !== null && codeHiddenStatus !== undefined && codeHiddenStatus !== null && codeHiddenStatus.status === "static";
+  const hasExpandableContent = studioInteractivityEnabled && (Boolean(sequence.controls) || sequence.effects.length > 0);
+  const canToggleVisibility = previewInteractive && Boolean(sequence.controls) && nodePath !== null && validatedLocation !== null && codeHiddenStatus !== undefined && codeHiddenStatus !== null && codeHiddenStatus.status === "static";
   const onSequenceDoubleClick = useCallback162((e) => {
     if (isTimelineSelectionModifierEvent(e)) {
       e.stopPropagation();
@@ -49549,7 +49769,7 @@ var TimelineSequenceItem = ({
     await saveName(name);
   }, [saveName]);
   React194.useEffect(() => {
-    if (!canRenameSelectedSequence || !process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+    if (!canRenameSelectedSequence || !getStudioKeyboardShortcutsEnabled()) {
       setIsRenaming(false);
       return;
     }
@@ -49580,7 +49800,7 @@ var TimelineSequenceItem = ({
     setIsRenaming(true);
   }, [canRenameThisSequence]);
   const freezeFrameMenuItem = useSequenceFreezeFrameMenuItem({
-    clientId: previewServerState.type === "connected" ? previewServerState.clientId : null,
+    clientId: previewInteractive && previewServerState.type === "connected" ? previewServerState.clientId : null,
     nodePath,
     propStatusesForOverride,
     sequence,
@@ -49589,7 +49809,7 @@ var TimelineSequenceItem = ({
     timelinePosition,
     validatedSource: validatedLocation?.source ?? null
   });
-  const canAddEffect = nodePathInfo?.supportsEffects === true && previewServerState.type === "connected" && Boolean(validatedLocation?.source);
+  const canAddEffect = nodePathInfo?.supportsEffects === true && previewInteractive && Boolean(validatedLocation?.source);
   const onAddEffect = useCallback162(() => {
     if (!canAddEffect || previewServerState.type !== "connected" || !nodePath || !validatedLocation?.source) {
       return;
@@ -49618,7 +49838,7 @@ var TimelineSequenceItem = ({
       disableInteractivityDisabled,
       duplicateDisabled,
       fileLocation,
-      includeSourceEditItems: true,
+      includeSourceEditItems: studioInteractivityEnabled,
       onDeleteSequenceFromSource,
       onDisableSequenceInteractivity,
       onDuplicateSequenceFromSource,
@@ -49626,7 +49846,7 @@ var TimelineSequenceItem = ({
       originalLocation,
       selectAsset,
       sequence,
-      sourceActions: [
+      sourceActions: studioInteractivityEnabled ? [
         ...nodePathInfo?.supportsEffects ? [
           {
             type: "item",
@@ -49660,7 +49880,7 @@ var TimelineSequenceItem = ({
           value: "rename-sequence"
         },
         ...freezeFrameMenuItem ? [freezeFrameMenuItem] : []
-      ]
+      ] : []
     });
   }, [
     assetLinkInfo,
@@ -49684,7 +49904,7 @@ var TimelineSequenceItem = ({
     selectAsset,
     sequence
   ]);
-  const canDropEffect = previewServerState.type === "connected" && nodePath !== null && validatedLocation !== null && sequence.controls?.supportsEffects === true;
+  const canDropEffect = previewInteractive && nodePath !== null && validatedLocation !== null && sequence.controls?.supportsEffects === true;
   const sequenceReorderLineStyle = useMemo170(() => {
     if (!sequenceDropIndicator) {
       return null;
@@ -49740,7 +49960,7 @@ var TimelineSequenceItem = ({
       onInvoked: onToggleVisibility
     }) : /* @__PURE__ */ jsx266(TimelineLayerEyeSpacer, {}),
     arrow: hasExpandableContent && nodePathInfo !== null ? /* @__PURE__ */ jsx266(TimelineSequenceExpandArrow, {
-      disabled: !previewConnected,
+      disabled: !previewInteractive,
       isExpanded,
       nodePathInfo,
       onToggleExpand,
@@ -49810,7 +50030,7 @@ var TimelineSequenceItem = ({
         onOpen: selectable ? onSelect : null,
         children: draggableTrackRow
       }) : draggableTrackRow,
-      previewConnected && isExpanded && hasExpandableContent && nodePathInfo && validatedLocation ? /* @__PURE__ */ jsx266(TimelineExpandedSection, {
+      previewConnected && studioInteractivityEnabled && isExpanded && hasExpandableContent && nodePathInfo && validatedLocation ? /* @__PURE__ */ jsx266(TimelineExpandedSection, {
         sequence,
         validatedLocation,
         nodePathInfo,
@@ -52559,11 +52779,12 @@ var TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffset
   const propStatusesForOverride = useMemo176(() => {
     return nodePath ? Internals97.getPropStatusesCtx(propStatuses, nodePath) : undefined;
   }, [propStatuses, nodePath]);
-  const durationCanUpdate = Boolean(propStatusesForOverride?.durationInFrames?.status === "static");
-  const fromCanUpdate = Boolean(propStatusesForOverride?.from?.status === "static");
-  const trimBeforeCanUpdate = Boolean(propStatusesForOverride?.trimBefore?.status === "static");
+  const durationCanUpdate = Boolean(studioInteractivityEnabled && propStatusesForOverride?.durationInFrames?.status === "static");
+  const fromCanUpdate = Boolean(studioInteractivityEnabled && propStatusesForOverride?.from?.status === "static");
+  const trimBeforeCanUpdate = Boolean(studioInteractivityEnabled && propStatusesForOverride?.trimBefore?.status === "static");
   const { previewServerState } = useContext118(StudioServerConnectionCtx);
   const previewConnected = previewServerState.type === "connected";
+  const previewInteractive = previewConnected && studioInteractivityEnabled;
   const { setPropStatuses } = useContext118(Internals97.VisualModeSettersContext);
   const timelinePosition = Internals97.Timeline.useTimelinePosition();
   const selectAsset = useSelectAsset();
@@ -52583,9 +52804,9 @@ var TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffset
     });
   }, [canOpenInEditor, originalLocation]);
   const canDeleteFromSource = Boolean(nodePath && validatedLocation?.source);
-  const deleteDisabled = !previewConnected || !s.controls || !canDeleteFromSource;
+  const deleteDisabled = !previewInteractive || !s.controls || !canDeleteFromSource;
   const duplicateDisabled = deleteDisabled;
-  const disableInteractivityDisabled = !previewConnected || !s.showInTimeline || !nodePath || !validatedLocation?.source;
+  const disableInteractivityDisabled = !previewInteractive || !s.showInTimeline || !nodePath || !validatedLocation?.source;
   const mediaSrc = s.type === "audio" || s.type === "video" || s.type === "image" ? s.src : null;
   const assetLinkInfo = useMemo176(() => mediaSrc ? getTimelineAssetLinkInfo(mediaSrc) : null, [mediaSrc]);
   const onDuplicateSequenceFromSource = useCallback165(() => {
@@ -52652,7 +52873,7 @@ var TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffset
     validatedLocation?.source
   ]);
   const freezeFrameMenuItem = useSequenceFreezeFrameMenuItem({
-    clientId: previewServerState.type === "connected" ? previewServerState.clientId : null,
+    clientId: previewInteractive && previewServerState.type === "connected" ? previewServerState.clientId : null,
     nodePath,
     propStatusesForOverride,
     sequence: s,
@@ -52672,7 +52893,7 @@ var TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffset
       disableInteractivityDisabled,
       duplicateDisabled,
       fileLocation,
-      includeSourceEditItems: true,
+      includeSourceEditItems: studioInteractivityEnabled,
       onDeleteSequenceFromSource,
       onDisableSequenceInteractivity,
       onDuplicateSequenceFromSource,
@@ -52680,7 +52901,7 @@ var TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffset
       originalLocation,
       selectAsset,
       sequence: s,
-      sourceActions: freezeFrameMenuItem ? [freezeFrameMenuItem] : []
+      sourceActions: studioInteractivityEnabled && freezeFrameMenuItem ? [freezeFrameMenuItem] : []
     });
   }, [
     assetLinkInfo,
@@ -52907,6 +53128,7 @@ var TimelineContextMenuArea = ({ children }) => {
   const [isAddingAsset, setIsAddingAsset] = useState99(false);
   const { previewServerState } = useContext120(StudioServerConnectionCtx);
   const previewConnected = previewServerState.type === "connected";
+  const previewInteractive = previewConnected && studioInteractivityEnabled;
   const currentCompositionId = canvasContent?.type === "composition" ? canvasContent.compositionId : null;
   const currentComposition = useMemo179(() => {
     if (currentCompositionId === null) {
@@ -52920,8 +53142,8 @@ var TimelineContextMenuArea = ({ children }) => {
     compositionFile,
     compositionId: currentCompositionId
   });
-  const canInsertSolid = previewConnected && compositionComponentInfo?.canAddSequence === true && currentCompositionId !== null && compositionFile !== null && videoConfig !== null && !isAddingSolid;
-  const canInsertAsset = previewConnected && !window.remotion_isReadOnlyStudio && compositionComponentInfo?.canAddSequence === true && currentCompositionId !== null && compositionFile !== null && !isAddingAsset;
+  const canInsertSolid = previewInteractive && compositionComponentInfo?.canAddSequence === true && currentCompositionId !== null && compositionFile !== null && videoConfig !== null && !isAddingSolid;
+  const canInsertAsset = previewInteractive && !window.remotion_isReadOnlyStudio && compositionComponentInfo?.canAddSequence === true && currentCompositionId !== null && compositionFile !== null && !isAddingAsset;
   const insertSolid = useCallback166(async () => {
     if (!canInsertSolid || currentCompositionId === null || compositionFile === null || videoConfig === null) {
       return;
@@ -53013,6 +53235,7 @@ var TimelineInner = () => {
   const { overrideIdToNodePathMappings } = useContext120(Internals98.OverrideIdsToNodePathsGettersContext);
   const { previewServerState } = useContext120(StudioServerConnectionCtx);
   const previewConnected = previewServerState.type === "connected";
+  const previewInteractive = previewConnected && studioInteractivityEnabled;
   const videoConfigIsNull = videoConfig === null;
   const timeline = useMemo179(() => {
     if (videoConfigIsNull) {
@@ -53034,7 +53257,7 @@ var TimelineInner = () => {
   return /* @__PURE__ */ jsxs146(TimelineContextMenuArea, {
     children: [
       sequences.map((sequence) => {
-        if (!shouldSubscribeToSequenceProps(sequence, previewConnected)) {
+        if (!shouldSubscribeToSequenceProps(sequence, previewInteractive)) {
           return null;
         }
         return /* @__PURE__ */ jsx282(SubscribeToNodePaths, {
@@ -53045,15 +53268,15 @@ var TimelineInner = () => {
           effects: sequence.effects
         }, sequence.id);
       }),
-      /* @__PURE__ */ jsx282(SequencePropsObserver, {}),
+      studioInteractivityEnabled ? /* @__PURE__ */ jsx282(SequencePropsObserver, {}) : null,
       /* @__PURE__ */ jsx282(TimelineKeyframeTracksProvider, {
         tracks: filtered,
         children: /* @__PURE__ */ jsxs146(TimelineSelectableItemsProvider, {
           timeline: shown,
           children: [
-            /* @__PURE__ */ jsx282(TimelineSelectAllKeybindings, {
+            studioInteractivityEnabled ? /* @__PURE__ */ jsx282(TimelineSelectAllKeybindings, {
               timeline: shown
-            }),
+            }) : null,
             /* @__PURE__ */ jsx282(TimelineHeightContainer, {
               shown,
               hasBeenCut,
@@ -53093,7 +53316,7 @@ var TimelineInner = () => {
                             /* @__PURE__ */ jsx282(TimelineInOutPointer, {}),
                             /* @__PURE__ */ jsx282(TimelineTimeIndicators, {}),
                             /* @__PURE__ */ jsx282(TimelineDragHandler, {}),
-                            /* @__PURE__ */ jsx282(TimelineInOutDragHandler, {}),
+                            studioInteractivityEnabled ? /* @__PURE__ */ jsx282(TimelineInOutDragHandler, {}) : null,
                             /* @__PURE__ */ jsx282(TimelineSlider, {})
                           ]
                         })
@@ -56819,7 +57042,7 @@ var KeyboardShortcutsExplainer = () => {
                   })
                 ]
               }),
-              process.env.ASK_AI_ENABLED && /* @__PURE__ */ jsxs164(Fragment57, {
+              getStudioAskAIEnabled() && /* @__PURE__ */ jsxs164(Fragment57, {
                 children: [
                   /* @__PURE__ */ jsx304("br", {}),
                   /* @__PURE__ */ jsx304("div", {
@@ -65398,7 +65621,7 @@ var Modals = ({ readOnlyStudio }) => {
       modalContextType && modalContextType.type === "confirmation-dialog" && /* @__PURE__ */ jsx360(ConfirmationDialog, {
         state: modalContextType
       }),
-      process.env.ASK_AI_ENABLED && /* @__PURE__ */ jsx360(AskAiModal, {})
+      getStudioAskAIEnabled() && /* @__PURE__ */ jsx360(AskAiModal, {})
     ]
   });
 };
@@ -65486,8 +65709,7 @@ var background = {
   flexDirection: "column",
   position: "absolute"
 };
-var DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = 300;
-var BUFFER_STATE_DELAY_IN_MILLISECONDS = typeof process.env.BUFFER_STATE_DELAY_IN_MILLISECONDS === "undefined" || process.env.BUFFER_STATE_DELAY_IN_MILLISECONDS === null ? DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS : Number(process.env.BUFFER_STATE_DELAY_IN_MILLISECONDS);
+var BUFFER_STATE_DELAY_IN_MILLISECONDS = getStudioBufferStateDelayInMilliseconds();
 var Editor = ({ Root, readOnlyStudio }) => {
   const [drawElement, setDrawElement] = useState125(null);
   const size3 = PlayerInternals23.useElementSize(drawElement, {