@remotion/studio 4.0.501 → 4.0.502

package/dist/components/Timeline/TimelineAssetField.js

@@ -3,11 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineAssetField = exports.toFileToken = exports.AssetSelectionContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
+const write_static_file_1 = require("../../api/write-static-file");
 const pen_1 = require("../../icons/pen");
 const modals_1 = require("../../state/modals");
+const import_assets_1 = require("../import-assets");
 const InlineAction_1 = require("../InlineAction");
 const common_1 = require("../InspectorPanel/common");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const use_static_files_1 = require("../use-static-files");
 const penIcon = {
     display: 'block',
     height: 14,
@@ -30,6 +35,7 @@ const TimelineAssetField = ({ field, effectiveValue, propStatus, onSave, onDragV
         throw new Error('TimelineAssetField rendered for non-asset field');
     }
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const staticFiles = (0, use_static_files_1.useStaticFiles)();
     const { getSourceAction, initialQuery, sourceAction } = (0, react_1.useContext)(exports.AssetSelectionContext);
     const inlineSourceAction = (0, react_1.useMemo)(() => {
         if (field.key !== 'src') {
@@ -49,6 +55,32 @@ const TimelineAssetField = ({ field, effectiveValue, propStatus, onSave, onDragV
             onDragEnd();
         });
     }, [propStatus.codeValue, onDragValueChange, onSave, onDragEnd]);
+    const selectFile = (0, react_1.useCallback)(async () => {
+        const [file] = await (0, import_assets_1.pickFilesToImport)({ multiple: false });
+        if (!file) {
+            return;
+        }
+        const existing = staticFiles.find((candidate) => candidate.name === file.name);
+        if (existing && existing.sizeInBytes !== file.size) {
+            (0, NotificationCenter_1.showNotification)(`File with name ${file.name} already exists and is different`, 4000);
+            return;
+        }
+        try {
+            if (!existing) {
+                await (0, write_static_file_1.writeStaticFile)({
+                    contents: await file.arrayBuffer(),
+                    filePath: file.name,
+                });
+            }
+            onSelect(file.name, (0, remotion_1.staticFile)(file.name));
+            if (!existing) {
+                (0, NotificationCenter_1.showNotification)(`Created ${file.name} in public folder`, 3000);
+            }
+        }
+        catch (error) {
+            (0, NotificationCenter_1.showNotification)(`Could not upload asset: ${error instanceof Error ? error.message : String(error)}`, 4000);
+        }
+    }, [onSelect, staticFiles]);
     const openAssetSelection = (0, react_1.useCallback)(() => {
         setSelectedModal({
             type: 'quick-switcher',
@@ -56,11 +88,14 @@ const TimelineAssetField = ({ field, effectiveValue, propStatus, onSave, onDragV
             invocationTimestamp: Date.now(),
             assetSelection: {
                 initialQuery,
+                onSelectFile: () => {
+                    selectFile().catch(() => undefined);
+                },
                 onSelected: (asset) => onSelect(asset.name, asset.src),
             },
             compositionSelection: null,
         });
-    }, [initialQuery, onSelect, setSelectedModal]);
+    }, [initialQuery, onSelect, selectFile, setSelectedModal]);
     const action = (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: openAssetSelection, disabled: window.remotion_isReadOnlyStudio, title: "Change source", renderAction: (color) => jsx_runtime_1.jsx(pen_1.PenIcon, { color: color, style: penIcon }) }));
     if (inlineSourceAction === null) {
         return action;

package/dist/components/Timeline/TimelineDragHandler.js

@@ -89,7 +89,7 @@ const TimelineDragHandler = () => {
     if (!canvasContent || canvasContent.type !== 'composition') {
         return null;
     }
-    return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.sliderAreaRef, style: containerStyle, [TimelineSelection_1.TIMELINE_SCRUBBER_ATTR]: true, children: video && (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsx(TimelineDragHandlerInnerMemo, {})) : null }));
+    return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.sliderAreaRef, style: containerStyle, [TimelineSelection_1.TIMELINE_SCRUBBER_ATTR]: true, children: video && (0, interactivity_enabled_1.isStudioSelectionEnabled)() ? (jsx_runtime_1.jsx(TimelineDragHandlerInnerMemo, {})) : null }));
 };
 exports.TimelineDragHandler = TimelineDragHandler;
 const TimelineDragHandlerInner = () => {

package/dist/components/Timeline/TimelineStack/get-stack.js

@@ -6,6 +6,7 @@ const get_source_map_1 = require("../../../error-overlay/react-overlay/utils/get
 const get_location_of_sequence_1 = require("../../../helpers/get-location-of-sequence");
 const traceMapCache = {};
 const traceMapPromises = {};
+const browserStudioOriginalSourcePrefix = 'browser-studio-original://';
 const getSourceMapCache = async (fileName) => {
     if (traceMapCache[fileName]) {
         return traceMapCache[fileName];
@@ -32,6 +33,13 @@ const getOriginalLocationFromStack = async (stack, type) => {
     if (!location) {
         return null;
     }
+    if (location.fileName.startsWith(browserStudioOriginalSourcePrefix)) {
+        return {
+            column: location.columnNumber,
+            line: location.lineNumber,
+            source: decodeURIComponent(location.fileName.slice(browserStudioOriginalSourcePrefix.length)),
+        };
+    }
     const map = await getSourceMapCache(location.fileName);
     const originalPosition = (0, get_source_map_1.getOriginalPosition)(map, location.lineNumber, location.columnNumber);
     return originalPosition;

package/dist/components/Timeline/save-sequence-prop.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.saveSequenceProps = exports.saveInlineCaptionPatches = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
-const call_api_1 = require("../call-api");
+const sequence_props_api_1 = require("../sequence-props-api");
 const call_move_keyframe_1 = require("./call-move-keyframe");
 const save_prop_queue_1 = require("./save-prop-queue");
 const serializeSequencePropValue = (value) => {
@@ -22,7 +22,7 @@ const saveInlineCaptionPatches = ({ fileName, nodePath, schema, patches, nextCap
             defaultValue: null,
             schema,
         }),
-        apiCall: () => (0, call_api_1.callApi)('/api/save-sequence-props', {
+        apiCall: () => (0, sequence_props_api_1.saveSequenceProps)({
             edits: [],
             captionPatches: [{ fileName, nodePath, schema, patches }],
             addedKeyframes: null,
@@ -65,7 +65,7 @@ const saveSequenceProps = ({ changes, addedKeyframes, movedKeyframes, setPropSta
             }),
             apiCall: () => {
                 var _a;
-                return (0, call_api_1.callApi)('/api/save-sequence-props', {
+                return (0, sequence_props_api_1.saveSequenceProps)({
                     edits: [
                         {
                             fileName: change.fileName,
@@ -110,7 +110,7 @@ const saveSequenceProps = ({ changes, addedKeyframes, movedKeyframes, setPropSta
             schema: change.schema,
         }));
     }
-    return (0, call_api_1.callApi)('/api/save-sequence-props', {
+    return (0, sequence_props_api_1.saveSequenceProps)({
         edits: changes.map((change) => {
             var _a;
             return {

package/dist/components/Timeline/sequence-props-subscription-store.d.ts

@@ -1,6 +1,6 @@
 import type { SequenceNodePath, InteractivitySchema, VideoConfigValues } from 'remotion';
-import { callApi } from '../call-api';
-type SubscribeResult = Awaited<ReturnType<typeof callApi<'/api/subscribe-to-sequence-props'>>>;
+import { subscribeToSequenceProps } from '../sequence-props-api';
+type SubscribeResult = Awaited<ReturnType<typeof subscribeToSequenceProps>>;
 type ApplyResult = (result: SubscribeResult) => void;
 export declare const acquireSequencePropsSubscription: ({ fileName, line, column, schema, componentIdentity, effects, nodePath, clientId, applyOnce, applyEach, videoConfigValues, }: {
     fileName: string;

package/dist/components/Timeline/sequence-props-subscription-store.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.acquireSequencePropsSubscription = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
-const call_api_1 = require("../call-api");
+const sequence_props_api_1 = require("../sequence-props-api");
 const makeKey = ({ fileName, line, column, componentIdentity, sequenceKeys, assetKeys, effectKeys, videoConfigValues, }) => `${fileName}\0${line}\0${column}\0${componentIdentity !== null && componentIdentity !== void 0 ? componentIdentity : ''}\0${sequenceKeys.join('\0')}\0${assetKeys.join('\0')}\0${effectKeys.map((keys) => keys.join('\0')).join('\0\0')}\0${JSON.stringify(videoConfigValues)}`;
 const entries = new Map();
 const acquireSequencePropsSubscription = ({ fileName, line, column, schema, componentIdentity, effects, nodePath, clientId, applyOnce, applyEach, videoConfigValues, }) => {
@@ -22,7 +22,7 @@ const acquireSequencePropsSubscription = ({ fileName, line, column, schema, comp
     });
     let entry = entries.get(key);
     if (!entry) {
-        const promise = (0, call_api_1.callApi)('/api/subscribe-to-sequence-props', {
+        const promise = (0, sequence_props_api_1.subscribeToSequenceProps)({
             fileName,
             line,
             column,
@@ -86,7 +86,7 @@ const acquireSequencePropsSubscription = ({ fileName, line, column, schema, comp
                 if (!result.success) {
                     return;
                 }
-                return (0, call_api_1.callApi)('/api/unsubscribe-from-sequence-props', {
+                return (0, sequence_props_api_1.unsubscribeFromSequenceProps)({
                     fileName: acquired.fileName,
                     nodePath: result.nodePath,
                     clientId: acquired.clientId,

package/dist/components/TopPanel.js

@@ -114,7 +114,7 @@ const TopPanelInner = ({ readOnlyStudio, onMounted, drawRef, bufferStateDelayInM
     return (jsx_runtime_1.jsx(ObserveDefaultPropsContext_1.ObserveDefaultProps, { compositionId: (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition'
             ? canvasContent.compositionId
             : null, readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsxs("div", { style: container, children: [
-                jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, maxFlexerSize: MAX_SIDEBAR_WIDTH, maxAntiFlexerSize: null, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseLeft, side: "left", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) }))) : null, actualStateLeft === 'expanded' && !isMobileLayout ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, maxFlexerSize: null, maxAntiFlexerSize: MAX_SIDEBAR_WIDTH, id: "canvas-to-right-sidebar", orientation: "vertical", children: [
+                jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, maxFlexerSize: MAX_SIDEBAR_WIDTH, minFlexerSize: null, maxAntiFlexerSize: null, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseLeft, side: "left", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) }))) : null, actualStateLeft === 'expanded' && !isMobileLayout ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, maxFlexerSize: null, minFlexerSize: null, maxAntiFlexerSize: MAX_SIDEBAR_WIDTH, id: "canvas-to-right-sidebar", orientation: "vertical", children: [
                                         jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx("div", { ref: drawRef, style: canvasContainerStyle, children: jsx_runtime_1.jsx(CanvasIfSizeIsAvailable_1.CanvasIfSizeIsAvailable, {}) }) }), actualStateRight === 'expanded' && !isMobileLayout ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseRight, side: "right", children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) }))) : null] }) })
                         ] }) }), jsx_runtime_1.jsx(PreviewToolbar_1.PreviewToolbar, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CurrentCompositionSideEffects_1.TitleUpdater, {})
             ] }) }));

package/dist/components/UpdateCheck.js

@@ -10,7 +10,6 @@ const z_index_1 = require("../state/z-index");
 const actions_1 = require("./RenderQueue/actions");
 const buttonStyle = {
     appearance: 'none',
-    color: colors_1.BLUE,
     border: 'none',
     fontWeight: 'bold',
     backgroundColor: colors_1.TRANSPARENT,
@@ -24,6 +23,7 @@ const UpdateCheck = () => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const [knownBugs, setKnownBugs] = (0, react_1.useState)(null);
+    const [hovered, setHovered] = (0, react_1.useState)(false);
     const hasKnownBugs = (0, react_1.useMemo)(() => {
         return knownBugs && knownBugs.length > 0;
     }, [knownBugs]);
@@ -78,18 +78,25 @@ const UpdateCheck = () => {
     const dynButtonStyle = (0, react_1.useMemo)(() => {
         return {
             ...buttonStyle,
-            color: hasKnownBugs ? colors_1.WARNING_COLOR : colors_1.LIGHT_TEXT,
+            color: hovered ? colors_1.WHITE : hasKnownBugs ? colors_1.WARNING_COLOR : colors_1.WHITE_ALPHA_80,
         };
-    }, [hasKnownBugs]);
+    }, [hasKnownBugs, hovered]);
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
     if (!info) {
         return null;
     }
     if (!info.updateAvailable) {
         return null;
     }
-    return (jsx_runtime_1.jsx("button", { tabIndex: tabIndex, style: dynButtonStyle, onClick: openModal, type: "button", title: hasKnownBugs ? 'Bugfixes available' : 'Update available', children: hasKnownBugs ? ('Bugfixes available') : (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
+    return (jsx_runtime_1.jsx("button", { tabIndex: tabIndex, style: dynButtonStyle, onClick: openModal, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, type: "button", title: hasKnownBugs ? 'Bugfixes available' : 'Update available', children: hasKnownBugs ? ('Bugfixes available') : (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
                 height: 16,
                 width: 16,
+                color: 'inherit',
             }, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR_LOWERCASE, d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM135.1 217.4c-4.5 4.2-7.1 10.1-7.1 16.3c0 12.3 10 22.3 22.3 22.3H208v96c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V256h57.7c12.3 0 22.3-10 22.3-22.3c0-6.2-2.6-12.1-7.1-16.3L269.8 117.5c-3.8-3.5-8.7-5.5-13.8-5.5s-10.1 2-13.8 5.5L135.1 217.4z" }) })) }));
 };
 exports.UpdateCheck = UpdateCheck;

package/dist/components/default-props-api.d.ts

@@ -0,0 +1,3 @@
+import type { SubscribeToDefaultPropsRequest, UnsubscribeFromDefaultPropsRequest } from '@remotion/studio-shared';
+export declare const subscribeToDefaultProps: (request: SubscribeToDefaultPropsRequest) => Promise<import("@remotion/studio-shared").CanUpdateDefaultPropsResponse>;
+export declare const unsubscribeFromDefaultProps: (request: UnsubscribeFromDefaultPropsRequest) => Promise<undefined>;

package/dist/components/default-props-api.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.unsubscribeFromDefaultProps = exports.subscribeToDefaultProps = void 0;
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const call_api_1 = require("./call-api");
+const subscribeToDefaultProps = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    return browserStudioOperations
+        ? browserStudioOperations.subscribeToDefaultProps(request)
+        : (0, call_api_1.callApi)('/api/subscribe-to-default-props', request);
+};
+exports.subscribeToDefaultProps = subscribeToDefaultProps;
+const unsubscribeFromDefaultProps = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    return browserStudioOperations
+        ? browserStudioOperations.unsubscribeFromDefaultProps(request)
+        : (0, call_api_1.callApi)('/api/unsubscribe-from-default-props', request);
+};
+exports.unsubscribeFromDefaultProps = unsubscribeFromDefaultProps;

package/dist/components/drop-handler-data.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentDragData, type CompositionDragData } from '@remotion/drag-and-drop';
+import { type ComponentDragData, type CompositionDragData } from '@remotion/studio-protocol';
 export declare const isFileDragEvent: (event: DragEvent) => boolean;
 export declare const isAssetDragEvent: (event: DragEvent) => boolean;
 export declare const isComponentDragEvent: (event: DragEvent) => boolean;

package/dist/components/drop-handler-data.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSfxDragUrl = exports.getComponentDragData = exports.getCompositionDragData = exports.getAssetDragPath = exports.isSupportedDropEvent = exports.isRemoteAssetDragEvent = exports.isSfxDragEvent = exports.isElementDragEvent = exports.isCompositionDragEvent = exports.isComponentDragEvent = exports.isAssetDragEvent = exports.isFileDragEvent = void 0;
-const drag_and_drop_1 = require("@remotion/drag-and-drop");
+const studio_protocol_1 = require("@remotion/studio-protocol");
 const remote_asset_drag_1 = require("../helpers/remote-asset-drag");
 const isFileDragEvent = (event) => {
     var _a;
@@ -12,7 +12,7 @@ exports.isFileDragEvent = isFileDragEvent;
 const isRemotionDragEvent = (event, type) => {
     var _a, _b;
     var _c;
-    return (((_b = drag_and_drop_1.DragAndDropInternals.getDragPreviewMetadata((_c = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _c !== void 0 ? _c : [])) === null || _b === void 0 ? void 0 : _b.type) === type);
+    return (((_b = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata((_c = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _c !== void 0 ? _c : [])) === null || _b === void 0 ? void 0 : _b.type) === type);
 };
 const isAssetDragEvent = (event) => {
     return isRemotionDragEvent(event, 'asset');
@@ -56,28 +56,28 @@ const isSupportedDropEvent = (event) => {
 exports.isSupportedDropEvent = isSupportedDropEvent;
 const getAssetDragPath = (event) => {
     const parsed = event.dataTransfer
-        ? drag_and_drop_1.DragAndDropInternals.parseDragData(event.dataTransfer)
+        ? studio_protocol_1.StudioProtocolInternals.parseDragData(event.dataTransfer)
         : null;
     return (parsed === null || parsed === void 0 ? void 0 : parsed.type) === 'asset' ? parsed.data.assetPath : null;
 };
 exports.getAssetDragPath = getAssetDragPath;
 const getCompositionDragData = (event) => {
     const parsed = event.dataTransfer
-        ? drag_and_drop_1.DragAndDropInternals.parseDragData(event.dataTransfer)
+        ? studio_protocol_1.StudioProtocolInternals.parseDragData(event.dataTransfer)
         : null;
     return (parsed === null || parsed === void 0 ? void 0 : parsed.type) === 'composition' ? parsed.data : null;
 };
 exports.getCompositionDragData = getCompositionDragData;
 const getComponentDragData = (event) => {
     const parsed = event.dataTransfer
-        ? drag_and_drop_1.DragAndDropInternals.parseDragData(event.dataTransfer)
+        ? studio_protocol_1.StudioProtocolInternals.parseDragData(event.dataTransfer)
         : null;
     return (parsed === null || parsed === void 0 ? void 0 : parsed.type) === 'component' ? parsed.data : null;
 };
 exports.getComponentDragData = getComponentDragData;
 const getSfxDragUrl = (event) => {
     const parsed = event.dataTransfer
-        ? drag_and_drop_1.DragAndDropInternals.parseDragData(event.dataTransfer)
+        ? studio_protocol_1.StudioProtocolInternals.parseDragData(event.dataTransfer)
         : null;
     return (parsed === null || parsed === void 0 ? void 0 : parsed.type) === 'sfx' ? parsed.data.sfx.url : null;
 };

package/dist/components/effect-drag-and-drop.d.ts

@@ -1,4 +1,4 @@
-import { type EffectDragData } from '@remotion/drag-and-drop';
+import { type EffectDragData } from '@remotion/studio-protocol';
 import type { SequencePropsSubscriptionKey } from 'remotion';
 export declare const hasEffectDragType: (dataTransfer: DataTransfer) => boolean;
 export declare const hasExplicitEffectDragType: (dataTransfer: DataTransfer) => boolean;

package/dist/components/effect-drag-and-drop.js

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addEffectToSequence = exports.addEffectFromDragData = exports.getEffectDragData = exports.hasExplicitEffectDragType = exports.hasEffectDragType = void 0;
-const drag_and_drop_1 = require("@remotion/drag-and-drop");
+const studio_protocol_1 = require("@remotion/studio-protocol");
 const studio_shared_1 = require("@remotion/studio-shared");
 const install_required_package_1 = require("../helpers/install-required-package");
 const call_api_1 = require("./call-api");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const hasEffectDragType = (dataTransfer) => {
     var _a;
-    return (((_a = drag_and_drop_1.DragAndDropInternals.getDragPreviewMetadata(dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) ===
+    return (((_a = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata(dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) ===
         'effect');
 };
 exports.hasEffectDragType = hasEffectDragType;
@@ -17,7 +17,7 @@ const hasExplicitEffectDragType = (dataTransfer) => {
 };
 exports.hasExplicitEffectDragType = hasExplicitEffectDragType;
 const getEffectDragData = (dataTransfer) => {
-    const parsed = drag_and_drop_1.DragAndDropInternals.parseDragData(dataTransfer);
+    const parsed = studio_protocol_1.StudioProtocolInternals.parseDragData(dataTransfer);
     return (parsed === null || parsed === void 0 ? void 0 : parsed.type) === 'effect' ? parsed.data : null;
 };
 exports.getEffectDragData = getEffectDragData;

package/dist/components/element-drag-and-drop.d.ts

@@ -1,3 +1,3 @@
-import { type ElementDragData } from '@remotion/drag-and-drop';
+import { type ElementDragData } from '@remotion/studio-protocol';
 export declare const hasElementDragType: (dataTransfer: DataTransfer | null) => boolean;
 export declare const getElementDragData: (dataTransfer: DataTransfer | null) => ElementDragData | null;

package/dist/components/element-drag-and-drop.js

@@ -1,18 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getElementDragData = exports.hasElementDragType = void 0;
-const drag_and_drop_1 = require("@remotion/drag-and-drop");
+const studio_protocol_1 = require("@remotion/studio-protocol");
 const hasElementDragType = (dataTransfer) => {
     var _a;
     var _b;
-    return (((_a = drag_and_drop_1.DragAndDropInternals.getDragPreviewMetadata((_b = dataTransfer === null || dataTransfer === void 0 ? void 0 : dataTransfer.types) !== null && _b !== void 0 ? _b : [])) === null || _a === void 0 ? void 0 : _a.type) === 'element');
+    return (((_a = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata((_b = dataTransfer === null || dataTransfer === void 0 ? void 0 : dataTransfer.types) !== null && _b !== void 0 ? _b : [])) === null || _a === void 0 ? void 0 : _a.type) === 'element');
 };
 exports.hasElementDragType = hasElementDragType;
 const getElementDragData = (dataTransfer) => {
     if (!dataTransfer) {
         return null;
     }
-    const parsed = drag_and_drop_1.DragAndDropInternals.parseDragData(dataTransfer);
+    const parsed = studio_protocol_1.StudioProtocolInternals.parseDragData(dataTransfer);
     return (parsed === null || parsed === void 0 ? void 0 : parsed.type) === 'element' ? parsed.data : null;
 };
 exports.getElementDragData = getElementDragData;

package/dist/components/import-assets.d.ts

@@ -1,4 +1,4 @@
-import { type CompositionDragData, type ComponentProp } from '@remotion/drag-and-drop';
+import { type CompositionDragData, type ComponentProp } from '@remotion/studio-protocol';
 import { type FileType, type InsertElementFileConflict, type InsertableCompositionElementPosition } from '@remotion/studio-shared';
 import type { Dimensions } from '../helpers/is-current-selected-still';
 export type InsertElementDropPosition = {
@@ -64,7 +64,7 @@ export declare const getAssetPositionForDrop: ({ assetDimensions, destinationDim
 }) => InsertableCompositionElementPosition | null;
 export declare const getComponentDimensions: (component: {
     componentName: string;
-    dimensions?: import("@remotion/drag-and-drop").ComponentDimensions | undefined;
+    dimensions?: import("@remotion/studio-protocol").ComponentDimensions | undefined;
     importName: string;
     importPath: string;
     props: ComponentProp[];
@@ -128,7 +128,7 @@ export declare const insertExistingAssets: ({ assetPaths, compositionFile, compo
 export declare const insertComponent: ({ component, compositionFile, compositionId, dropPosition, from, }: {
     component: {
         componentName: string;
-        dimensions?: import("@remotion/drag-and-drop").ComponentDimensions | undefined;
+        dimensions?: import("@remotion/studio-protocol").ComponentDimensions | undefined;
         importName: string;
         importPath: string;
         props: ComponentProp[];
@@ -155,7 +155,7 @@ export declare const insertElement: ({ compositionFile, compositionId, confirmOv
         slug: string;
         displayName: string;
         sourceCode: string;
-        dimensions: import("@remotion/drag-and-drop").ComponentDimensions | null;
+        dimensions: import("@remotion/studio-protocol").ComponentDimensions | null;
     };
     from: number | null;
 }) => Promise<void>;

package/dist/components/sequence-props-api.d.ts

@@ -0,0 +1,4 @@
+import type { SaveSequencePropsRequest, SaveSequencePropsResponse, SubscribeToSequencePropsRequest, SubscribeToSequencePropsResponse, UnsubscribeFromSequencePropsRequest } from '@remotion/studio-shared';
+export declare const saveSequenceProps: (request: SaveSequencePropsRequest) => Promise<SaveSequencePropsResponse>;
+export declare const subscribeToSequenceProps: (request: SubscribeToSequencePropsRequest) => Promise<SubscribeToSequencePropsResponse>;
+export declare const unsubscribeFromSequenceProps: (request: UnsubscribeFromSequencePropsRequest) => Promise<undefined>;

package/dist/components/sequence-props-api.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.unsubscribeFromSequenceProps = exports.subscribeToSequenceProps = exports.saveSequenceProps = void 0;
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const call_api_1 = require("./call-api");
+const saveSequenceProps = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    return browserStudioOperations
+        ? browserStudioOperations.saveSequenceProps(request)
+        : (0, call_api_1.callApi)('/api/save-sequence-props', request);
+};
+exports.saveSequenceProps = saveSequenceProps;
+const subscribeToSequenceProps = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    return browserStudioOperations
+        ? browserStudioOperations.subscribeToSequenceProps(request)
+        : (0, call_api_1.callApi)('/api/subscribe-to-sequence-props', request);
+};
+exports.subscribeToSequenceProps = subscribeToSequenceProps;
+const unsubscribeFromSequenceProps = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    return browserStudioOperations
+        ? browserStudioOperations.unsubscribeFromSequenceProps(request)
+        : (0, call_api_1.callApi)('/api/unsubscribe-from-sequence-props', request);
+};
+exports.unsubscribeFromSequenceProps = unsubscribeFromSequenceProps;

package/dist/error-overlay/remotion-overlay/ErrorDisplay.d.ts

@@ -7,4 +7,5 @@ export declare const ErrorDisplay: React.FC<{
     readonly onRetry: OnRetry;
     readonly canHaveDismissButton: boolean;
     readonly calculateMetadata: boolean;
+    readonly symbolicationFailure: string | null;
 }>;

package/dist/error-overlay/remotion-overlay/ErrorDisplay.js

@@ -7,6 +7,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const layout_1 = require("../../components/layout");
 const is_menu_item_1 = require("../../components/Menu/is-menu-item");
+const colors_1 = require("../../helpers/colors");
 const AskOnDiscord_1 = require("./AskOnDiscord");
 const CalculateMetadataErrorExplainer_1 = require("./CalculateMetadataErrorExplainer");
 const CopyStackTrace_1 = require("./CopyStackTrace");
@@ -23,12 +24,35 @@ const stack = {
     overflowX: 'scroll',
     marginBottom: '10vh',
 };
+const rawStack = {
+    backgroundColor: colors_1.ERROR_CODE_FRAME_BACKGROUND,
+    boxSizing: 'border-box',
+    color: colors_1.WHITE,
+    fontFamily: 'monospace',
+    fontSize: 14,
+    lineHeight: 1.7,
+    marginBottom: 0,
+    marginTop: 17,
+    maxWidth: '100%',
+    overflowX: 'auto',
+    padding: 12,
+    whiteSpace: 'pre',
+};
+const symbolicationFailureStyle = {
+    color: colors_1.WHITE_ALPHA_60,
+    fontFamily: 'SF Pro Text, sans-serif',
+    fontSize: 14,
+    lineHeight: 1.5,
+    marginBottom: '10vh',
+    marginTop: 24,
+};
 const spacer = {
     width: 5,
     display: 'inline-block',
 };
-const ErrorDisplay = ({ display, keyboardShortcuts, onRetry, canHaveDismissButton, calculateMetadata, }) => {
-    const highestLineNumber = Math.max(...display.stackFrames
+const ErrorDisplay = ({ display, keyboardShortcuts, onRetry, canHaveDismissButton, calculateMetadata, symbolicationFailure, }) => {
+    var _a;
+    const highestLineNumber = Math.max(0, ...display.stackFrames
         .map((s) => s.originalScriptCode)
         .flat(1)
         .map((s) => {
@@ -70,11 +94,11 @@ const ErrorDisplay = ({ display, keyboardShortcuts, onRetry, canHaveDismissButto
                     jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx(layout_1.Spacing, { y: 0.5 }), jsx_runtime_1.jsx(CalculateMetadataErrorExplainer_1.CalculateMetadataErrorExplainer, {})
                 ] })) : null, display.error instanceof remotion_1.MediaPlaybackError ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx(layout_1.Spacing, { y: 0.5 }), jsx_runtime_1.jsx(MediaPlaybackErrorExplainer_1.MediaPlaybackErrorExplainer, { src: display.error.src })
-                ] })) : null, jsx_runtime_1.jsx("div", { style: stack, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, children: display.stackFrames.map((s, i) => {
+                ] })) : null, display.stackFrames.length > 0 ? (jsx_runtime_1.jsx("div", { style: stack, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, children: display.stackFrames.map((s, i) => {
                     return (jsx_runtime_1.jsx(StackFrame_1.StackElement
                     // eslint-disable-next-line react/no-array-index-key
                     , { isFirst: i === 0, s: s, lineNumberWidth: lineNumberWidth, defaultFunctionName: '(anonymous function)' }, i));
-                }) })
-        ] }));
+                }) })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx("pre", { "aria-label": "Unsymbolicated stack trace", className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, style: rawStack, children: (_a = display.error.stack) !== null && _a !== void 0 ? _a : 'Check the Terminal and browser console for error messages.' }), symbolicationFailure ? (jsx_runtime_1.jsx("div", { style: symbolicationFailureStyle, children: symbolicationFailure })) : null] }))] }));
 };
 exports.ErrorDisplay = ErrorDisplay;

package/dist/error-overlay/remotion-overlay/ErrorLoader.js

@@ -4,7 +4,6 @@ exports.ErrorLoader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
-const colors_1 = require("../../helpers/colors");
 const error_origin_1 = require("../error-origin");
 const listen_to_runtime_errors_1 = require("../react-overlay/listen-to-runtime-errors");
 const ErrorDisplay_1 = require("./ErrorDisplay");
@@ -19,17 +18,7 @@ const container = {
     marginRight: 'auto',
     fontFamily: 'SF Pro Text, sans-serif',
     paddingTop: '5vh',
-};
-const errorWhileErrorStyle = {
-    color: colors_1.WHITE,
-    lineHeight: 1.5,
-    whiteSpace: 'pre',
-};
-const errorWhileSymbolicatingStyle = {
-    color: colors_1.WHITE,
-    lineHeight: 1.5,
-    marginTop: 24,
-    opacity: 0.7,
+    boxSizing: 'border-box',
 };
 const shouldLogError = (error) => {
     return (!(0, error_origin_1.wasErrorLoggedByServer)(error) && (0, studio_shared_1.getLocationFromBuildError)(error) === null);
@@ -58,7 +47,6 @@ const logSymbolicatedStudioError = (record) => {
     });
 };
 const ErrorLoader = ({ error, keyboardShortcuts, onRetry, canHaveDismissButton, calculateMetadata, }) => {
-    var _a;
     const [state, setState] = (0, react_1.useState)({
         type: 'loading',
     });
@@ -97,15 +85,11 @@ const ErrorLoader = ({ error, keyboardShortcuts, onRetry, canHaveDismissButton,
         return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx(ErrorTitle_1.ErrorTitle, { symbolicating: true, name: error.name, message: error.message, canHaveDismissButton: canHaveDismissButton }) }));
     }
     if (state.type === 'error') {
-        return (jsx_runtime_1.jsxs("div", { style: container, children: [
-                jsx_runtime_1.jsx(ErrorTitle_1.ErrorTitle, { symbolicating: false, name: error.name, message: error.message, canHaveDismissButton: canHaveDismissButton }), jsx_runtime_1.jsx("div", { style: errorWhileErrorStyle, children: (_a = error.stack) !== null && _a !== void 0 ? _a : 'Check the Terminal and browser console for error messages.' }), jsx_runtime_1.jsxs("div", { style: errorWhileSymbolicatingStyle, children: ["Could not symbolicate the stack trace: ", state.err.message] })
-            ] }));
+        return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx(ErrorDisplay_1.ErrorDisplay, { keyboardShortcuts: keyboardShortcuts, display: { error, contextSize: 0, stackFrames: [] }, onRetry: onRetry, canHaveDismissButton: canHaveDismissButton, calculateMetadata: calculateMetadata, symbolicationFailure: `Could not symbolicate the stack trace: ${state.err.message}` }) }));
     }
     if (state.type === 'no-record') {
-        return (jsx_runtime_1.jsxs("div", { style: container, children: [
-                jsx_runtime_1.jsx(ErrorTitle_1.ErrorTitle, { symbolicating: false, name: error.name, message: error.message, canHaveDismissButton: canHaveDismissButton }), jsx_runtime_1.jsx("div", { style: errorWhileErrorStyle, children: "Check the Terminal and browser console for error messages." })
-            ] }));
+        return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx(ErrorDisplay_1.ErrorDisplay, { keyboardShortcuts: keyboardShortcuts, display: { error, contextSize: 0, stackFrames: [] }, onRetry: onRetry, canHaveDismissButton: canHaveDismissButton, calculateMetadata: calculateMetadata, symbolicationFailure: "Could not symbolicate the stack trace." }) }));
     }
-    return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx(ErrorDisplay_1.ErrorDisplay, { keyboardShortcuts: keyboardShortcuts, display: state.record, onRetry: onRetry, canHaveDismissButton: canHaveDismissButton, calculateMetadata: calculateMetadata }) }));
+    return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx(ErrorDisplay_1.ErrorDisplay, { keyboardShortcuts: keyboardShortcuts, display: state.record, onRetry: onRetry, canHaveDismissButton: canHaveDismissButton, calculateMetadata: calculateMetadata, symbolicationFailure: null }) }));
 };
 exports.ErrorLoader = ErrorLoader;