@remotion/studio 4.0.487 → 4.0.488

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

@@ -6089,6 +6089,10 @@ import {
   Internals as Internals19
 } from "remotion";
 
+// src/helpers/interactivity-enabled.ts
+var interactivityEnabled = process.env.INTERACTIVITY_ENABLED;
+var studioInteractivityEnabled = interactivityEnabled === undefined || interactivityEnabled === null ? true : interactivityEnabled !== false && interactivityEnabled !== "false";
+
 // src/components/ExpandedTracksProvider.tsx
 import { createContext as createContext13, useCallback as useCallback24, useMemo as useMemo24, useState as useState20 } from "react";
 
@@ -9486,7 +9490,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);
@@ -13898,12 +13902,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 +23387,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 +24197,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 +24356,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 +24382,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 +24739,145 @@ var Canvas = ({ canvasContent, size: size2 }) => {
   useEffect42(() => {
     fetchMetadata();
   }, [fetchMetadata]);
+  const updateElementInstallTarget = useCallback51(() => {
+    if (previewServerClientId === null) {
+      return;
+    }
+    callApi("/api/update-element-install-target", {
+      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(() => {
+    updateElementInstallTarget();
+    const interval = window.setInterval(updateElementInstallTarget, 2000);
+    return () => {
+      window.clearInterval(interval);
+    };
+  }, [updateElementInstallTarget]);
+  useEffect42(() => {
+    const markFocused = () => {
+      lastFocusedAtRef.current = Date.now();
+      updateElementInstallTarget();
+    };
+    window.addEventListener("focus", markFocused);
+    document.addEventListener("pointerdown", markFocused, { capture: true });
+    return () => {
+      window.removeEventListener("focus", markFocused);
+      document.removeEventListener("pointerdown", markFocused, { capture: true });
+    };
+  }, [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 +27082,9 @@ var VisualControlsProvider = ({ children }) => {
     if (!env.isStudio) {
       return value;
     }
+    if (!studioInteractivityEnabled) {
+      return value;
+    }
     if (!z) {
       return value;
     }
@@ -33297,7 +33475,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]);
@@ -48135,7 +48313,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 +49380,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 +49417,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 +49425,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 +49470,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 +49711,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();
@@ -49580,7 +49765,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 +49774,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 +49803,7 @@ var TimelineSequenceItem = ({
       disableInteractivityDisabled,
       duplicateDisabled,
       fileLocation,
-      includeSourceEditItems: true,
+      includeSourceEditItems: studioInteractivityEnabled,
       onDeleteSequenceFromSource,
       onDisableSequenceInteractivity,
       onDuplicateSequenceFromSource,
@@ -49626,7 +49811,7 @@ var TimelineSequenceItem = ({
       originalLocation,
       selectAsset,
       sequence,
-      sourceActions: [
+      sourceActions: studioInteractivityEnabled ? [
         ...nodePathInfo?.supportsEffects ? [
           {
             type: "item",
@@ -49660,7 +49845,7 @@ var TimelineSequenceItem = ({
           value: "rename-sequence"
         },
         ...freezeFrameMenuItem ? [freezeFrameMenuItem] : []
-      ]
+      ] : []
     });
   }, [
     assetLinkInfo,
@@ -49684,7 +49869,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 +49925,7 @@ var TimelineSequenceItem = ({
       onInvoked: onToggleVisibility
     }) : /* @__PURE__ */ jsx266(TimelineLayerEyeSpacer, {}),
     arrow: hasExpandableContent && nodePathInfo !== null ? /* @__PURE__ */ jsx266(TimelineSequenceExpandArrow, {
-      disabled: !previewConnected,
+      disabled: !previewInteractive,
       isExpanded,
       nodePathInfo,
       onToggleExpand,
@@ -49810,7 +49995,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 +52744,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 +52769,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 +52838,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 +52858,7 @@ var TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffset
       disableInteractivityDisabled,
       duplicateDisabled,
       fileLocation,
-      includeSourceEditItems: true,
+      includeSourceEditItems: studioInteractivityEnabled,
       onDeleteSequenceFromSource,
       onDisableSequenceInteractivity,
       onDuplicateSequenceFromSource,
@@ -52680,7 +52866,7 @@ var TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffset
       originalLocation,
       selectAsset,
       sequence: s,
-      sourceActions: freezeFrameMenuItem ? [freezeFrameMenuItem] : []
+      sourceActions: studioInteractivityEnabled && freezeFrameMenuItem ? [freezeFrameMenuItem] : []
     });
   }, [
     assetLinkInfo,
@@ -52907,6 +53093,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 +53107,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 +53200,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 +53222,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 +53233,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 +53281,7 @@ var TimelineInner = () => {
                             /* @__PURE__ */ jsx282(TimelineInOutPointer, {}),
                             /* @__PURE__ */ jsx282(TimelineTimeIndicators, {}),
                             /* @__PURE__ */ jsx282(TimelineDragHandler, {}),
-                            /* @__PURE__ */ jsx282(TimelineInOutDragHandler, {}),
+                            studioInteractivityEnabled ? /* @__PURE__ */ jsx282(TimelineInOutDragHandler, {}) : null,
                             /* @__PURE__ */ jsx282(TimelineSlider, {})
                           ]
                         })

package/dist/esm/index.mjs

@@ -584,6 +584,9 @@ import {
 import { jsx as jsx2 } from "react/jsx-runtime";
 var ZodContext = createContext(null);
 
+// src/helpers/interactivity-enabled.ts
+var interactivityEnabled = process.env.INTERACTIVITY_ENABLED;
+
 // src/visual-controls/VisualControls.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
 var VisualControlsTabActivatedContext = createContext2(false);