@remotion/studio 4.0.487 → 4.0.489

package/dist/esm/previewEntry.mjs

@@ -447,19 +447,55 @@ var KeybindingContextProvider = ({ children }) => {
   });
 };
 
+// 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/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 = useContext(KeybindingContext);
   const { isHighestContext } = useZIndex();
   const registerKeybinding = useCallback2((options) => {
-    if (!process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+    if (!getStudioKeyboardShortcutsEnabled()) {
       return {
         unregister: () => {
           return;
@@ -2278,7 +2314,7 @@ var MenuContent = ({
     return containerStyles;
   }, [fixedHeight, isMobileLayout]);
   useEffect8(() => {
-    if (!keybindings.isHighestContext || !process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+    if (!keybindings.isHighestContext || !getStudioKeyboardShortcutsEnabled()) {
       return;
     }
     const onKeyDown = (event) => {
@@ -4168,7 +4204,7 @@ var pickColor = () => {
 };
 
 // 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/use-menu-structure.tsx
 import { jsx as jsx29 } from "react/jsx-runtime";
@@ -4812,7 +4848,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",
@@ -7676,12 +7712,12 @@ var TimelineZoomContext = ({ children }) => {
 // src/components/Canvas.tsx
 import {
   ASSET_DRAG_MIME_TYPE as ASSET_DRAG_MIME_TYPE2,
-  COMPOSITION_DRAG_MIME_TYPE as COMPOSITION_DRAG_MIME_TYPE2,
   COMPONENT_DRAG_MIME_TYPE as COMPONENT_DRAG_MIME_TYPE2,
+  COMPOSITION_DRAG_MIME_TYPE as COMPOSITION_DRAG_MIME_TYPE2,
   ELEMENT_DRAG_MIME_TYPE as ELEMENT_DRAG_MIME_TYPE3,
   parseAssetDragData,
-  parseCompositionDragData,
   parseComponentDragData,
+  parseCompositionDragData,
   parseSfxDragData,
   SFX_DRAG_MIME_TYPE as SFX_DRAG_MIME_TYPE2
 } from "@remotion/studio-shared";
@@ -7963,21 +7999,191 @@ var getRemoteAssetUrlFromDataTransfer = (dataTransfer) => {
   return isHttpUrl(plainText) ? plainText : null;
 };
 
+// src/components/ConfirmationDialog.tsx
+import {
+  useCallback as useCallback28,
+  useContext as useContext13,
+  useEffect as useEffect25,
+  useMemo as useMemo32,
+  useRef as useRef15
+} from "react";
+
+// src/components/ModalButton.tsx
+import { useMemo as useMemo31 } from "react";
+import { jsx as jsx57 } from "react/jsx-runtime";
+var buttonStyle2 = {
+  backgroundColor: BLUE,
+  color: WHITE
+};
+var ModalButton = (props) => {
+  const style5 = useMemo31(() => {
+    return {
+      ...buttonStyle2,
+      backgroundColor: props.disabled ? BLUE_DISABLED : BLUE
+    };
+  }, [props.disabled]);
+  return /* @__PURE__ */ jsx57(Button, {
+    ...props,
+    style: style5
+  });
+};
+
+// src/components/ModalFooter.tsx
+import { jsx as jsx58 } from "react/jsx-runtime";
+var content = {
+  padding: 12,
+  paddingRight: 12,
+  flex: 1,
+  fontSize: 13,
+  minWidth: 500
+};
+var ModalFooterContainer = ({ children }) => {
+  return /* @__PURE__ */ jsx58("div", {
+    style: { ...content, borderTop: BORDER_BLACK },
+    children
+  });
+};
+
+// src/components/ConfirmationDialog.tsx
+import { jsx as jsx59, jsxs as jsxs28 } from "react/jsx-runtime";
+var content2 = {
+  padding: 16,
+  fontSize: 14,
+  flex: 1,
+  minWidth: 420,
+  maxWidth: 560,
+  lineHeight: 1.4
+};
+var useConfirmationDialog = () => {
+  const { setSelectedModal } = useContext13(ModalsContext);
+  return useCallback28((options) => {
+    return new Promise((resolve) => {
+      let settled = false;
+      const settle = (result) => {
+        if (settled) {
+          return;
+        }
+        settled = true;
+        resolve(result);
+      };
+      setSelectedModal({
+        type: "confirmation-dialog",
+        id: String(Math.random()),
+        title: options.title,
+        message: options.message,
+        confirmLabel: options.confirmLabel ?? "Continue",
+        cancelLabel: options.cancelLabel ?? "Cancel",
+        onConfirm: () => settle(true),
+        onCancel: () => settle(false)
+      });
+    });
+  }, [setSelectedModal]);
+};
+var ConfirmationDialog = ({ state }) => {
+  const { setSelectedModal } = useContext13(ModalsContext);
+  const settledRef = useRef15(false);
+  const closeCurrentModal = useCallback28(() => {
+    setSelectedModal((modal) => modal?.type === "confirmation-dialog" && modal.id === state.id ? null : modal);
+  }, [setSelectedModal, state.id]);
+  const settle = useCallback28((confirmed) => {
+    if (settledRef.current) {
+      return;
+    }
+    settledRef.current = true;
+    closeCurrentModal();
+    if (confirmed) {
+      state.onConfirm();
+    } else {
+      state.onCancel();
+    }
+  }, [closeCurrentModal, state]);
+  useEffect25(() => {
+    return () => {
+      if (settledRef.current) {
+        return;
+      }
+      settledRef.current = true;
+      state.onCancel();
+    };
+  }, [state]);
+  const onCancel = useCallback28(() => {
+    settle(false);
+  }, [settle]);
+  const onConfirm = useCallback28(() => {
+    settle(true);
+  }, [settle]);
+  const onSubmit = useCallback28((e) => {
+    e.preventDefault();
+    onConfirm();
+  }, [onConfirm]);
+  const cancelStyle = useMemo32(() => {
+    return {
+      minWidth: 90
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs28(ModalContainer, {
+    onOutsideClick: onCancel,
+    onEscape: onCancel,
+    children: [
+      /* @__PURE__ */ jsx59(ModalHeader, {
+        title: state.title,
+        onClose: onCancel
+      }),
+      /* @__PURE__ */ jsxs28("form", {
+        onSubmit,
+        children: [
+          /* @__PURE__ */ jsx59("div", {
+            style: content2,
+            children: state.message
+          }),
+          /* @__PURE__ */ jsx59(ModalFooterContainer, {
+            children: /* @__PURE__ */ jsxs28(Row, {
+              align: "center",
+              children: [
+                /* @__PURE__ */ jsx59(Flex, {}),
+                /* @__PURE__ */ jsx59(Button, {
+                  onClick: onCancel,
+                  style: cancelStyle,
+                  children: state.cancelLabel
+                }),
+                /* @__PURE__ */ jsx59(Spacing, {
+                  x: 1
+                }),
+                /* @__PURE__ */ jsxs28(ModalButton, {
+                  onClick: onConfirm,
+                  autoFocus: true,
+                  children: [
+                    state.confirmLabel,
+                    /* @__PURE__ */ jsx59(ShortcutHint, {
+                      keyToPress: "↵",
+                      cmdOrCtrl: false
+                    })
+                  ]
+                })
+              ]
+            })
+          })
+        ]
+      })
+    ]
+  });
+};
+
 // src/components/EditorGuides/index.tsx
 import { useContext as useContext19, useMemo as useMemo39 } from "react";
 import { Internals as Internals22 } from "remotion";
 
 // src/helpers/use-studio-canvas-dimensions.ts
 import { PlayerInternals as PlayerInternals7 } from "@remotion/player";
-import { useContext as useContext13, useMemo as useMemo31 } from "react";
+import { useContext as useContext14, useMemo as useMemo33 } from "react";
 import { Internals as Internals12 } from "remotion";
 var useStudioCanvasDimensions = ({
   canvasSize,
   contentDimensions,
   assetMetadata
 }) => {
-  const { size: previewSize } = useContext13(Internals12.PreviewSizeContext);
-  const { centerX, centerY, scale } = useMemo31(() => {
+  const { size: previewSize } = useContext14(Internals12.PreviewSizeContext);
+  const { centerX, centerY, scale } = useMemo33(() => {
     if (contentDimensions === "none" || contentDimensions === null || assetMetadata && (assetMetadata.type === "not-found" || assetMetadata.type === "metadata-error") || !canvasSize) {
       return {
         centerX: previewSize.translation.x,
@@ -7999,7 +8205,7 @@ var useStudioCanvasDimensions = ({
     previewSize.translation.x,
     assetMetadata
   ]);
-  const canvasPosition = useMemo31(() => {
+  const canvasPosition = useMemo33(() => {
     return {
       left: centerX - previewSize.translation.x,
       top: centerY - previewSize.translation.y,
@@ -8086,9 +8292,9 @@ var getRulerGuideHighlight = ({
 
 // src/components/ContextMenu.tsx
 import { PlayerInternals as PlayerInternals8 } from "@remotion/player";
-import React44, { useCallback as useCallback28, useEffect as useEffect25, useMemo as useMemo32, useRef as useRef15, useState as useState24 } from "react";
+import React46, { useCallback as useCallback29, useEffect as useEffect26, useMemo as useMemo34, useRef as useRef16, useState as useState24 } from "react";
 import ReactDOM4 from "react-dom";
-import { jsx as jsx57, jsxs as jsxs28, Fragment as Fragment11 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs29, Fragment as Fragment11 } from "react/jsx-runtime";
 var CONTEXT_MENU_Z_INDEX = 1001;
 var contextMenuFullScreenOverlay = {
   ...fullScreenOverlay,
@@ -8107,25 +8313,25 @@ var notifyContextMenuOpened = (id) => {
   }));
 };
 var ContextMenuPortal = ({ sizeSource, currentZIndex, onHide, opened, values }) => {
-  const menuRef = useRef15(null);
+  const menuRef = useRef16(null);
   const size2 = PlayerInternals8.useElementSize(sizeSource, {
     triggerOnWindowResize: true,
     shouldApplyCssTransforms: true
   });
   const isMobileLayout = useMobileLayout();
-  const spaceToBottom = useMemo32(() => {
+  const spaceToBottom = useMemo34(() => {
     if (size2) {
       return size2.windowSize.height - opened.top;
     }
     return 0;
   }, [opened.top, size2]);
-  const spaceToTop = useMemo32(() => {
+  const spaceToTop = useMemo34(() => {
     if (size2) {
       return opened.top;
     }
     return 0;
   }, [opened.top, size2]);
-  const portalStyle = useMemo32(() => {
+  const portalStyle = useMemo34(() => {
     if (!size2) {
       return;
     }
@@ -8157,7 +8363,7 @@ var ContextMenuPortal = ({ sizeSource, currentZIndex, onHide, opened, values })
     spaceToTop,
     spaceToBottom
   ]);
-  useEffect25(() => {
+  useEffect26(() => {
     const preventNativeContextMenu = (event) => {
       event.preventDefault();
     };
@@ -8166,7 +8372,7 @@ var ContextMenuPortal = ({ sizeSource, currentZIndex, onHide, opened, values })
       window.removeEventListener("contextmenu", preventNativeContextMenu, true);
     };
   }, []);
-  useEffect25(() => {
+  useEffect26(() => {
     const dismissWithoutClickThrough = (event) => {
       if (event.button !== 0) {
         return;
@@ -8184,26 +8390,26 @@ var ContextMenuPortal = ({ sizeSource, currentZIndex, onHide, opened, values })
       window.removeEventListener("pointerdown", dismissWithoutClickThrough, true);
     };
   }, [onHide]);
-  const onMenuPointerDown = useCallback28((e) => {
+  const onMenuPointerDown = useCallback29((e) => {
     e.stopPropagation();
   }, []);
   if (!portalStyle) {
     return null;
   }
-  return ReactDOM4.createPortal(/* @__PURE__ */ jsx57("div", {
+  return ReactDOM4.createPortal(/* @__PURE__ */ jsx60("div", {
     style: contextMenuFullScreenOverlay,
-    children: /* @__PURE__ */ jsx57("div", {
+    children: /* @__PURE__ */ jsx60("div", {
       style: contextMenuOuterPortal,
       className: "css-reset",
-      children: /* @__PURE__ */ jsx57(HigherZIndex, {
+      children: /* @__PURE__ */ jsx60(HigherZIndex, {
         onOutsideClick: onHide,
         onEscape: onHide,
         outsideClickButton: "primary",
-        children: /* @__PURE__ */ jsx57("div", {
+        children: /* @__PURE__ */ jsx60("div", {
           ref: menuRef,
           style: portalStyle,
           onPointerDown: onMenuPointerDown,
-          children: /* @__PURE__ */ jsx57(MenuContent, {
+          children: /* @__PURE__ */ jsx60(MenuContent, {
             onNextMenu: noop,
             onPreviousMenu: noop,
             values,
@@ -8218,7 +8424,7 @@ var ContextMenuPortal = ({ sizeSource, currentZIndex, onHide, opened, values })
     })
   }), getPortal(currentZIndex));
 };
-var ContextMenu = React44.forwardRef(({
+var ContextMenu = React46.forwardRef(({
   children,
   values,
   onOpen,
@@ -8226,11 +8432,11 @@ var ContextMenu = React44.forwardRef(({
   className: className2 = undefined,
   onPointerDown = undefined
 }, forwardedRef) => {
-  const ref = useRef15(null);
-  const idRef = useRef15(nextContextMenuId++);
+  const ref = useRef16(null);
+  const idRef = useRef16(nextContextMenuId++);
   const [opened, setOpened] = useState24({ type: "not-open" });
   const { currentZIndex } = useZIndex();
-  const setRef = useCallback28((node) => {
+  const setRef = useCallback29((node) => {
     ref.current = node;
     if (typeof forwardedRef === "function") {
       forwardedRef(node);
@@ -8240,7 +8446,7 @@ var ContextMenu = React44.forwardRef(({
       forwardedRef.current = node;
     }
   }, [forwardedRef]);
-  useEffect25(() => {
+  useEffect26(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -8260,10 +8466,10 @@ var ContextMenu = React44.forwardRef(({
       current.removeEventListener("contextmenu", onClick);
     };
   }, [onOpen]);
-  const onHide = useCallback28(() => {
+  const onHide = useCallback29(() => {
     setOpened({ type: "not-open" });
   }, []);
-  useEffect25(() => {
+  useEffect26(() => {
     const onOtherContextMenuOpened = (event) => {
       if (event.detail === idRef.current) {
         return;
@@ -8275,9 +8481,9 @@ var ContextMenu = React44.forwardRef(({
       window.removeEventListener(contextMenuOpenedEvent, onOtherContextMenuOpened);
     };
   }, [onHide]);
-  return /* @__PURE__ */ jsxs28(Fragment11, {
+  return /* @__PURE__ */ jsxs29(Fragment11, {
     children: [
-      /* @__PURE__ */ jsx57("div", {
+      /* @__PURE__ */ jsx60("div", {
         ref: setRef,
         onContextMenu: () => false,
         style: style5,
@@ -8285,7 +8491,7 @@ var ContextMenu = React44.forwardRef(({
         onPointerDown,
         children
       }),
-      opened.type === "open" ? /* @__PURE__ */ jsx57(ContextMenuPortal, {
+      opened.type === "open" ? /* @__PURE__ */ jsx60(ContextMenuPortal, {
         sizeSource: ref,
         currentZIndex,
         onHide,
@@ -8297,15 +8503,15 @@ var ContextMenu = React44.forwardRef(({
 });
 ContextMenu.displayName = "ContextMenu";
 var ContextMenuForTarget = ({ triggerRef, values, onOpen }) => {
-  const idRef = useRef15(nextContextMenuId++);
+  const idRef = useRef16(nextContextMenuId++);
   const [opened, setOpened] = useState24({ type: "not-open" });
   const [openedValues, setOpenedValues] = useState24(values);
   const [body, setBody] = useState24(null);
   const { currentZIndex } = useZIndex();
-  useEffect25(() => {
+  useEffect26(() => {
     setBody(document.body);
   }, []);
-  useEffect25(() => {
+  useEffect26(() => {
     const { current } = triggerRef;
     if (!current) {
       return;
@@ -8332,10 +8538,10 @@ var ContextMenuForTarget = ({ triggerRef, values, onOpen }) => {
       current.removeEventListener("contextmenu", onClick);
     };
   }, [onOpen, triggerRef, values]);
-  const onHide = useCallback28(() => {
+  const onHide = useCallback29(() => {
     setOpened({ type: "not-open" });
   }, []);
-  useEffect25(() => {
+  useEffect26(() => {
     const onOtherContextMenuOpened = (event) => {
       if (event.detail === idRef.current) {
         return;
@@ -8347,7 +8553,7 @@ var ContextMenuForTarget = ({ triggerRef, values, onOpen }) => {
       window.removeEventListener(contextMenuOpenedEvent, onOtherContextMenuOpened);
     };
   }, [onHide]);
-  return opened.type === "open" ? /* @__PURE__ */ jsx57(ContextMenuPortal, {
+  return opened.type === "open" ? /* @__PURE__ */ jsx60(ContextMenuPortal, {
     sizeSource: body,
     currentZIndex,
     onHide,
@@ -8357,9 +8563,9 @@ var ContextMenuForTarget = ({ triggerRef, values, onOpen }) => {
 };
 
 // src/components/ForceSpecificCursor.tsx
-import React45, { useMemo as useMemo33 } from "react";
-import { jsx as jsx58 } from "react/jsx-runtime";
-var ref = React45.createRef();
+import React47, { useMemo as useMemo35 } from "react";
+import { jsx as jsx61 } from "react/jsx-runtime";
+var ref = React47.createRef();
 var forceSpecificCursor = (cursor) => {
   if (!ref.current) {
     throw new Error("ForceSpecificCursor is not mounted");
@@ -8376,7 +8582,7 @@ var stopForcingSpecificCursor = () => {
 };
 var Z_INDEX_FORCE_SPECIFIC_CURSOR = 100;
 var ForceSpecificCursor = () => {
-  const style5 = useMemo33(() => {
+  const style5 = useMemo35(() => {
     return {
       position: "fixed",
       inset: 0,
@@ -8384,7 +8590,7 @@ var ForceSpecificCursor = () => {
       pointerEvents: "none"
     };
   }, []);
-  return /* @__PURE__ */ jsx58("div", {
+  return /* @__PURE__ */ jsx61("div", {
     ref,
     style: style5
   });
@@ -8420,6 +8626,9 @@ import {
   Internals as Internals21
 } from "remotion";
 
+// src/helpers/interactivity-enabled.ts
+var studioInteractivityEnabled = getStudioInteractivityEnabled();
+
 // src/helpers/timeline-node-path-key.ts
 import { stringifySequenceExpandedRowKey } from "@remotion/studio-shared";
 var timelineNodePathInfoToKey = (info) => [
@@ -8429,7 +8638,7 @@ var timelineNodePathInfoToKey = (info) => [
 ].join(".");
 
 // src/components/ExpandedTracksProvider.tsx
-import { createContext as createContext14, useCallback as useCallback29, useMemo as useMemo34, useState as useState25 } from "react";
+import { createContext as createContext14, useCallback as useCallback30, useMemo as useMemo36, useState as useState25 } from "react";
 
 // src/helpers/migrate-expanded-tracks-for-subscription-key.ts
 import { stringifySequenceExpandedRowKey as stringifySequenceExpandedRowKey2 } from "@remotion/studio-shared";
@@ -8456,7 +8665,7 @@ var migrateExpandedTracksForSubscriptionKey = (prev, oldKey, newKey) => {
 };
 
 // src/components/ExpandedTracksProvider.tsx
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx62 } from "react/jsx-runtime";
 var SESSION_STORAGE_KEY = "remotion.editor.expandedTracks";
 var onlyCollapsedTrackValues = (state) => {
   const result = {};
@@ -8511,7 +8720,7 @@ var ExpandedTracksSetterContext = createContext14({
 });
 var ExpandedTracksProvider = ({ children }) => {
   const [expandedTracks, setExpandedTracks] = useState25(loadExpandedTracks);
-  const expandParentTracks = useCallback29((nodePathInfo) => {
+  const expandParentTracks = useCallback30((nodePathInfo) => {
     const keysToExpand = [];
     for (let i = 0;i < nodePathInfo.auxiliaryKeys.length; i++) {
       keysToExpand.push(timelineNodePathInfoToKey({
@@ -8538,7 +8747,7 @@ var ExpandedTracksProvider = ({ children }) => {
       return next;
     });
   }, []);
-  const toggleTrack = useCallback29((nodePathInfo) => {
+  const toggleTrack = useCallback30((nodePathInfo) => {
     setExpandedTracks((prev) => {
       const key2 = timelineNodePathInfoToKey(nodePathInfo);
       const next = { ...prev };
@@ -8552,7 +8761,7 @@ var ExpandedTracksProvider = ({ children }) => {
       return next;
     });
   }, []);
-  const migrateExpandedTracks = useCallback29((oldKey, newKey) => {
+  const migrateExpandedTracks = useCallback30((oldKey, newKey) => {
     setExpandedTracks((prev) => {
       const next = migrateExpandedTracksForSubscriptionKey(prev, oldKey, newKey);
       if (!next) {
@@ -8562,17 +8771,17 @@ var ExpandedTracksProvider = ({ children }) => {
       return next;
     });
   }, []);
-  const getterValue = useMemo34(() => ({
+  const getterValue = useMemo36(() => ({
     getIsExpanded: (nodePathInfo) => expandedTracks[timelineNodePathInfoToKey(nodePathInfo)] ?? true
   }), [expandedTracks]);
-  const setterValue = useMemo34(() => ({
+  const setterValue = useMemo36(() => ({
     expandParentTracks,
     toggleTrack,
     migrateExpandedTracksForSubscriptionKey: migrateExpandedTracks
   }), [expandParentTracks, toggleTrack, migrateExpandedTracks]);
-  return /* @__PURE__ */ jsx59(ExpandedTracksSetterContext.Provider, {
+  return /* @__PURE__ */ jsx62(ExpandedTracksSetterContext.Provider, {
     value: setterValue,
-    children: /* @__PURE__ */ jsx59(ExpandedTracksGetterContext.Provider, {
+    children: /* @__PURE__ */ jsx62(ExpandedTracksGetterContext.Provider, {
       value: getterValue,
       children
     })
@@ -8769,7 +8978,7 @@ import {
   parseEffectClipboardDataResult,
   parseEffectPropClipboardDataResult
 } from "@remotion/studio-shared";
-import { useContext as useContext14, useEffect as useEffect26 } from "react";
+import { useContext as useContext15, useEffect as useEffect27 } from "react";
 import {
   Internals as Internals16
 } from "remotion";
@@ -9713,14 +9922,14 @@ var getPasteEffectPropTarget = ({
 };
 var TimelineClipboardKeybindings = () => {
   const keybindings = useKeybinding();
-  const { previewServerState } = useContext14(StudioServerConnectionCtx);
+  const { previewServerState } = useContext15(StudioServerConnectionCtx);
   const { canSelect } = useTimelineSelection();
   const currentSelection = useCurrentTimelineSelectionStateAsRef();
-  const propStatusesRef = useContext14(Internals16.VisualModePropStatusesRefContext);
-  const { setPropStatuses } = useContext14(Internals16.VisualModeSettersContext);
-  const sequencesRef = useContext14(Internals16.SequenceManagerRefContext);
-  const { overrideIdToNodePathMappings } = useContext14(Internals16.OverrideIdsToNodePathsGettersContext);
-  useEffect26(() => {
+  const propStatusesRef = useContext15(Internals16.VisualModePropStatusesRefContext);
+  const { setPropStatuses } = useContext15(Internals16.VisualModeSettersContext);
+  const sequencesRef = useContext15(Internals16.SequenceManagerRefContext);
+  const { overrideIdToNodePathMappings } = useContext15(Internals16.OverrideIdsToNodePathsGettersContext);
+  useEffect27(() => {
     if (!canSelect || previewServerState.type !== "connected") {
       return;
     }
@@ -9987,176 +10196,6 @@ import { LINEAR_KEYFRAME_EASING as LINEAR_KEYFRAME_EASING2 } from "@remotion/stu
 import { useContext as useContext16, useEffect as useEffect28, useRef as useRef17 } from "react";
 import { Internals as Internals20 } from "remotion";
 
-// src/components/ConfirmationDialog.tsx
-import {
-  useCallback as useCallback30,
-  useContext as useContext15,
-  useEffect as useEffect27,
-  useMemo as useMemo36,
-  useRef as useRef16
-} from "react";
-
-// src/components/ModalButton.tsx
-import { useMemo as useMemo35 } from "react";
-import { jsx as jsx60 } from "react/jsx-runtime";
-var buttonStyle2 = {
-  backgroundColor: BLUE,
-  color: WHITE
-};
-var ModalButton = (props) => {
-  const style5 = useMemo35(() => {
-    return {
-      ...buttonStyle2,
-      backgroundColor: props.disabled ? BLUE_DISABLED : BLUE
-    };
-  }, [props.disabled]);
-  return /* @__PURE__ */ jsx60(Button, {
-    ...props,
-    style: style5
-  });
-};
-
-// src/components/ModalFooter.tsx
-import { jsx as jsx61 } from "react/jsx-runtime";
-var content = {
-  padding: 12,
-  paddingRight: 12,
-  flex: 1,
-  fontSize: 13,
-  minWidth: 500
-};
-var ModalFooterContainer = ({ children }) => {
-  return /* @__PURE__ */ jsx61("div", {
-    style: { ...content, borderTop: BORDER_BLACK },
-    children
-  });
-};
-
-// src/components/ConfirmationDialog.tsx
-import { jsx as jsx62, jsxs as jsxs29 } from "react/jsx-runtime";
-var content2 = {
-  padding: 16,
-  fontSize: 14,
-  flex: 1,
-  minWidth: 420,
-  maxWidth: 560,
-  lineHeight: 1.4
-};
-var useConfirmationDialog = () => {
-  const { setSelectedModal } = useContext15(ModalsContext);
-  return useCallback30((options) => {
-    return new Promise((resolve) => {
-      let settled = false;
-      const settle = (result) => {
-        if (settled) {
-          return;
-        }
-        settled = true;
-        resolve(result);
-      };
-      setSelectedModal({
-        type: "confirmation-dialog",
-        id: String(Math.random()),
-        title: options.title,
-        message: options.message,
-        confirmLabel: options.confirmLabel ?? "Continue",
-        cancelLabel: options.cancelLabel ?? "Cancel",
-        onConfirm: () => settle(true),
-        onCancel: () => settle(false)
-      });
-    });
-  }, [setSelectedModal]);
-};
-var ConfirmationDialog = ({ state }) => {
-  const { setSelectedModal } = useContext15(ModalsContext);
-  const settledRef = useRef16(false);
-  const closeCurrentModal = useCallback30(() => {
-    setSelectedModal((modal) => modal?.type === "confirmation-dialog" && modal.id === state.id ? null : modal);
-  }, [setSelectedModal, state.id]);
-  const settle = useCallback30((confirmed) => {
-    if (settledRef.current) {
-      return;
-    }
-    settledRef.current = true;
-    closeCurrentModal();
-    if (confirmed) {
-      state.onConfirm();
-    } else {
-      state.onCancel();
-    }
-  }, [closeCurrentModal, state]);
-  useEffect27(() => {
-    return () => {
-      if (settledRef.current) {
-        return;
-      }
-      settledRef.current = true;
-      state.onCancel();
-    };
-  }, [state]);
-  const onCancel = useCallback30(() => {
-    settle(false);
-  }, [settle]);
-  const onConfirm = useCallback30(() => {
-    settle(true);
-  }, [settle]);
-  const onSubmit = useCallback30((e) => {
-    e.preventDefault();
-    onConfirm();
-  }, [onConfirm]);
-  const cancelStyle = useMemo36(() => {
-    return {
-      minWidth: 90
-    };
-  }, []);
-  return /* @__PURE__ */ jsxs29(ModalContainer, {
-    onOutsideClick: onCancel,
-    onEscape: onCancel,
-    children: [
-      /* @__PURE__ */ jsx62(ModalHeader, {
-        title: state.title,
-        onClose: onCancel
-      }),
-      /* @__PURE__ */ jsxs29("form", {
-        onSubmit,
-        children: [
-          /* @__PURE__ */ jsx62("div", {
-            style: content2,
-            children: state.message
-          }),
-          /* @__PURE__ */ jsx62(ModalFooterContainer, {
-            children: /* @__PURE__ */ jsxs29(Row, {
-              align: "center",
-              children: [
-                /* @__PURE__ */ jsx62(Flex, {}),
-                /* @__PURE__ */ jsx62(Button, {
-                  onClick: onCancel,
-                  style: cancelStyle,
-                  children: state.cancelLabel
-                }),
-                /* @__PURE__ */ jsx62(Spacing, {
-                  x: 1
-                }),
-                /* @__PURE__ */ jsxs29(ModalButton, {
-                  onClick: onConfirm,
-                  autoFocus: true,
-                  children: [
-                    state.confirmLabel,
-                    /* @__PURE__ */ jsx62(ShortcutHint, {
-                      keyToPress: "↵",
-                      cmdOrCtrl: false
-                    })
-                  ]
-                })
-              ]
-            })
-          })
-        ]
-      })
-    ]
-  });
-};
-
 // src/components/Timeline/delete-selected-timeline-item.ts
 import { Internals as Internals17 } from "remotion";
 
@@ -12004,7 +12043,7 @@ var TimelineSelectionProvider = ({ children }) => {
   const { canvasContent } = useContext17(Internals21.CompositionManager);
   const timelineSelectionScope = canvasContent?.type === "composition" ? canvasContent.compositionId : null;
   const { expandParentTracks } = useContext17(ExpandedTracksSetterContext);
-  const canSelect = previewServerState.type === "connected" && !window.remotion_isReadOnlyStudio;
+  const canSelect = studioInteractivityEnabled && previewServerState.type === "connected" && !window.remotion_isReadOnlyStudio;
   const [selectedItems, setSelectedItems] = useState26([]);
   const selectionAnchor = useRef18(null);
   const selectionScope = useRef18(null);
@@ -21709,7 +21748,7 @@ var SelectedOutlineOverlay = ({
     selectItem(item, interaction, undefined, { reveal: true });
   }, [selectItem]);
   const outlineTargets = useMemo50(() => {
-    if (!editorShowOutlines) {
+    if (!studioInteractivityEnabled || !editorShowOutlines) {
       return [];
     }
     const selectedSequenceKeys = getSelectedSequenceKeys(selectedItems);
@@ -22571,6 +22610,31 @@ var ResetZoomButton = ({ onClick }) => {
 
 // src/components/Canvas.tsx
 import { jsx as jsx84, jsxs as jsxs41, Fragment as Fragment17 } 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",
@@ -22705,12 +22769,18 @@ var Canvas = ({ canvasContent, size: size2 }) => {
   const suppressWheelFromWebKitPinchRef = useRef29(false);
   const touchPinchRef = useRef29(null);
   const keybindings = useKeybinding();
+  const confirm = useConfirmationDialog();
   const config = Internals34.useUnsafeVideoConfig();
   const areRulersVisible = useIsRulerVisible();
   const { editorShowGuides } = useContext32(EditorShowGuidesContext);
   const { compositions } = useContext32(Internals34.CompositionManager);
-  const { previewServerState } = useContext32(StudioServerConnectionCtx);
+  const { previewServerState, subscribeToEvent } = useContext32(StudioServerConnectionCtx);
+  const previewServerClientId = previewServerState.type === "connected" ? previewServerState.clientId : null;
   const [isAddingAsset, setIsAddingAsset] = useState39(false);
+  const [installingElementName, setInstallingElementName] = useState39(null);
+  const [pendingElementInstallRequests, setPendingElementInstallRequests] = useState39([]);
+  const [activeElementInstallRequest, setActiveElementInstallRequest] = useState39(null);
+  const lastFocusedAtRef = useRef29(typeof document === "undefined" || document.hasFocus() ? Date.now() : null);
   const [assetResolution, setAssetResolution] = useState39(null);
   const currentCompositionId = canvasContent.type === "composition" ? canvasContent.compositionId : null;
   const currentComposition = useMemo52(() => {
@@ -22725,7 +22795,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 = useMemo52(() => {
     if ((canvasContent.type === "asset" || canvasContent.type === "output" || canvasContent.type === "output-blob") && assetResolution && assetResolution.type === "found") {
       return assetResolution.dimensions;
@@ -23081,6 +23152,146 @@ var Canvas = ({ canvasContent, size: size2 }) => {
   useEffect40(() => {
     fetchMetadata();
   }, [fetchMetadata]);
+  const updateElementInstallTarget = useCallback43((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
+  ]);
+  useEffect40(() => {
+    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 });
+    };
+  }, []);
+  useEffect40(() => {
+    return subscribeToEvent("request-element-install-target", (event) => {
+      if (event.type !== "request-element-install-target") {
+        return;
+      }
+      updateElementInstallTarget(event.requestId);
+    });
+  }, [subscribeToEvent, updateElementInstallTarget]);
+  useEffect40(() => {
+    if (installingElementName === null) {
+      return;
+    }
+    const previousTitle = document.title;
+    document.title = `\uD83D\uDCE6 Install ${installingElementName} - Remotion Studio`;
+    return () => {
+      document.title = previousTitle;
+    };
+  }, [installingElementName]);
+  useEffect40(() => {
+    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]);
+  useEffect40(() => {
+    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]);
+  useEffect40(() => {
+    if (activeElementInstallRequest === null) {
+      return;
+    }
+    let canceled = false;
+    const handleInstallRequest = async () => {
+      setInstallingElementName(activeElementInstallRequest.element.displayName);
+      const accepted = await confirm({
+        title: "Install Element",
+        message: /* @__PURE__ */ jsxs41(Fragment17, {
+          children: [
+            "Install “",
+            activeElementInstallRequest.element.displayName,
+            "” into",
+            " ",
+            /* @__PURE__ */ jsx84("code", {
+              style: elementInstallCompositionIdStyle,
+              children: activeElementInstallRequest.compositionId
+            }),
+            " ",
+            "composition? This will create an Element source file and update the composition source.",
+            /* @__PURE__ */ jsxs41("details", {
+              style: elementInstallCodeDetailsStyle,
+              children: [
+                /* @__PURE__ */ jsx84("summary", {
+                  style: elementInstallCodeSummaryStyle,
+                  children: "Preview Element source"
+                }),
+                /* @__PURE__ */ jsx84("pre", {
+                  style: elementInstallCodeBlockStyle,
+                  children: /* @__PURE__ */ jsx84("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 = useCallback43((event) => {
     if (!canDropAssets || !isFileDragEvent(event) && !isAssetDragEvent(event) && !isCompositionDragEvent(event) && !isComponentDragEvent(event) && !isElementDragEvent(event) && !isSfxDragEvent(event) && !isRemoteAssetDragEvent(event) || !isDragEventInsideCanvas(event)) {
       return;
@@ -26733,6 +26944,9 @@ var VisualControlsProvider = ({ children }) => {
     if (!env.isStudio) {
       return value;
     }
+    if (!studioInteractivityEnabled) {
+      return value;
+    }
     if (!z) {
       return value;
     }
@@ -33123,7 +33337,7 @@ var DefaultInspector = ({ composition, currentDefaultProps, readOnlyStudio, setD
   const { handles: visualControlHandles } = useContext55(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]);
@@ -48108,7 +48322,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: () => {
@@ -48206,9 +48420,8 @@ import React208, { 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 jsxs129 } 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 container40 = {
   height: MAX_TIMELINE_TRACKS_NOTICE_HEIGHT,
@@ -48804,7 +49017,7 @@ var TimelineDragHandler = () => {
     ref: sliderAreaRef,
     style: containerStyle9,
     ...{ [TIMELINE_SCRUBBER_ATTR]: true },
-    children: video ? /* @__PURE__ */ jsx260(TimelineDragHandlerInnerMemo, {}) : null
+    children: video && studioInteractivityEnabled ? /* @__PURE__ */ jsx260(TimelineDragHandlerInnerMemo, {}) : null
   });
 };
 var TimelineDragHandlerInner = () => {
@@ -49871,6 +50084,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);
@@ -49907,7 +50121,7 @@ var TimelineSequenceItem = ({
     propStatusesForOverride,
     saveName
   } = useRenameSequence({
-    clientId: previewServerState.type === "connected" ? previewServerState.clientId : null,
+    clientId: previewInteractive && previewServerState.type === "connected" ? previewServerState.clientId : null,
     nodePathInfo,
     sequence,
     validatedLocation
@@ -49915,22 +50129,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) {
@@ -49960,7 +50174,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;
@@ -50195,8 +50415,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();
@@ -50218,7 +50438,7 @@ var TimelineSequenceItem = ({
     await saveName(name);
   }, [saveName]);
   React195.useEffect(() => {
-    if (!canRenameSelectedSequence || !process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+    if (!canRenameSelectedSequence || !getStudioKeyboardShortcutsEnabled()) {
       setIsRenaming(false);
       return;
     }
@@ -50249,7 +50469,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,
@@ -50258,7 +50478,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;
@@ -50287,7 +50507,7 @@ var TimelineSequenceItem = ({
       disableInteractivityDisabled,
       duplicateDisabled,
       fileLocation,
-      includeSourceEditItems: true,
+      includeSourceEditItems: studioInteractivityEnabled,
       onDeleteSequenceFromSource,
       onDisableSequenceInteractivity,
       onDuplicateSequenceFromSource,
@@ -50295,7 +50515,7 @@ var TimelineSequenceItem = ({
       originalLocation,
       selectAsset,
       sequence,
-      sourceActions: [
+      sourceActions: studioInteractivityEnabled ? [
         ...nodePathInfo?.supportsEffects ? [
           {
             type: "item",
@@ -50329,7 +50549,7 @@ var TimelineSequenceItem = ({
           value: "rename-sequence"
         },
         ...freezeFrameMenuItem ? [freezeFrameMenuItem] : []
-      ]
+      ] : []
     });
   }, [
     assetLinkInfo,
@@ -50353,7 +50573,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;
@@ -50409,7 +50629,7 @@ var TimelineSequenceItem = ({
       onInvoked: onToggleVisibility
     }) : /* @__PURE__ */ jsx268(TimelineLayerEyeSpacer, {}),
     arrow: hasExpandableContent && nodePathInfo !== null ? /* @__PURE__ */ jsx268(TimelineSequenceExpandArrow, {
-      disabled: !previewConnected,
+      disabled: !previewInteractive,
       isExpanded,
       nodePathInfo,
       onToggleExpand,
@@ -50479,7 +50699,7 @@ var TimelineSequenceItem = ({
         onOpen: selectable ? onSelect : null,
         children: draggableTrackRow
       }) : draggableTrackRow,
-      previewConnected && isExpanded && hasExpandableContent && nodePathInfo && validatedLocation ? /* @__PURE__ */ jsx268(TimelineExpandedSection, {
+      previewConnected && studioInteractivityEnabled && isExpanded && hasExpandableContent && nodePathInfo && validatedLocation ? /* @__PURE__ */ jsx268(TimelineExpandedSection, {
         sequence,
         validatedLocation,
         nodePathInfo,
@@ -53228,11 +53448,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();
@@ -53252,9 +53473,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(() => {
@@ -53321,7 +53542,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,
@@ -53341,7 +53562,7 @@ var TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffset
       disableInteractivityDisabled,
       duplicateDisabled,
       fileLocation,
-      includeSourceEditItems: true,
+      includeSourceEditItems: studioInteractivityEnabled,
       onDeleteSequenceFromSource,
       onDisableSequenceInteractivity,
       onDuplicateSequenceFromSource,
@@ -53349,7 +53570,7 @@ var TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffset
       originalLocation,
       selectAsset,
       sequence: s,
-      sourceActions: freezeFrameMenuItem ? [freezeFrameMenuItem] : []
+      sourceActions: studioInteractivityEnabled && freezeFrameMenuItem ? [freezeFrameMenuItem] : []
     });
   }, [
     assetLinkInfo,
@@ -53576,6 +53797,7 @@ var TimelineContextMenuArea = ({ children }) => {
   const [isAddingAsset, setIsAddingAsset] = useState100(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) {
@@ -53589,8 +53811,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;
@@ -53682,6 +53904,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) {
@@ -53703,7 +53926,7 @@ var TimelineInner = () => {
   return /* @__PURE__ */ jsxs147(TimelineContextMenuArea, {
     children: [
       sequences.map((sequence) => {
-        if (!shouldSubscribeToSequenceProps(sequence, previewConnected)) {
+        if (!shouldSubscribeToSequenceProps(sequence, previewInteractive)) {
           return null;
         }
         return /* @__PURE__ */ jsx284(SubscribeToNodePaths, {
@@ -53714,15 +53937,15 @@ var TimelineInner = () => {
           effects: sequence.effects
         }, sequence.id);
       }),
-      /* @__PURE__ */ jsx284(SequencePropsObserver, {}),
+      studioInteractivityEnabled ? /* @__PURE__ */ jsx284(SequencePropsObserver, {}) : null,
       /* @__PURE__ */ jsx284(TimelineKeyframeTracksProvider, {
         tracks: filtered,
         children: /* @__PURE__ */ jsxs147(TimelineSelectableItemsProvider, {
           timeline: shown,
           children: [
-            /* @__PURE__ */ jsx284(TimelineSelectAllKeybindings, {
+            studioInteractivityEnabled ? /* @__PURE__ */ jsx284(TimelineSelectAllKeybindings, {
               timeline: shown
-            }),
+            }) : null,
             /* @__PURE__ */ jsx284(TimelineHeightContainer, {
               shown,
               hasBeenCut,
@@ -53762,7 +53985,7 @@ var TimelineInner = () => {
                             /* @__PURE__ */ jsx284(TimelineInOutPointer, {}),
                             /* @__PURE__ */ jsx284(TimelineTimeIndicators, {}),
                             /* @__PURE__ */ jsx284(TimelineDragHandler, {}),
-                            /* @__PURE__ */ jsx284(TimelineInOutDragHandler, {}),
+                            studioInteractivityEnabled ? /* @__PURE__ */ jsx284(TimelineInOutDragHandler, {}) : null,
                             /* @__PURE__ */ jsx284(TimelineSlider, {})
                           ]
                         })
@@ -57488,7 +57711,7 @@ var KeyboardShortcutsExplainer = () => {
                   })
                 ]
               }),
-              process.env.ASK_AI_ENABLED && /* @__PURE__ */ jsxs165(Fragment57, {
+              getStudioAskAIEnabled() && /* @__PURE__ */ jsxs165(Fragment57, {
                 children: [
                   /* @__PURE__ */ jsx306("br", {}),
                   /* @__PURE__ */ jsx306("div", {
@@ -66067,7 +66290,7 @@ var Modals = ({ readOnlyStudio }) => {
       modalContextType && modalContextType.type === "confirmation-dialog" && /* @__PURE__ */ jsx362(ConfirmationDialog, {
         state: modalContextType
       }),
-      process.env.ASK_AI_ENABLED && /* @__PURE__ */ jsx362(AskAiModal, {})
+      getStudioAskAIEnabled() && /* @__PURE__ */ jsx362(AskAiModal, {})
     ]
   });
 };
@@ -66155,8 +66378,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] = useState126(null);
   const size3 = PlayerInternals23.useElementSize(drawElement, {