@remotion/studio 4.0.500 → 4.0.502

package/dist/components/Timeline/get-sequence-prop-reset-changes.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSequencePropResetChanges = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const remotion_1 = require("remotion");
+const isVisibleFieldSchema = (fieldSchema) => fieldSchema !== undefined && fieldSchema.type !== 'hidden';
+const getDefaultValue = (fieldSchema) => fieldSchema.default !== undefined
+    ? JSON.stringify(fieldSchema.default)
+    : null;
+const getSequencePropResetChanges = ({ fileName, nodePath, fieldKey, value, defaultValue, schema, }) => {
+    const flatSchema = remotion_1.Internals.getFlatSchemaWithAllKeys(schema);
+    const longhandChanges = (0, studio_shared_1.getStylePropertyLonghandKeys)(fieldKey).flatMap((longhandKey) => {
+        const fieldSchema = flatSchema[longhandKey];
+        if (!isVisibleFieldSchema(fieldSchema)) {
+            return [];
+        }
+        return [
+            {
+                fileName,
+                nodePath,
+                fieldKey: longhandKey,
+                value: fieldSchema.default,
+                defaultValue: getDefaultValue(fieldSchema),
+                schema,
+            },
+        ];
+    });
+    return [
+        { fileName, nodePath, fieldKey, value, defaultValue, schema },
+        ...longhandChanges,
+    ];
+};
+exports.getSequencePropResetChanges = getSequencePropResetChanges;

package/dist/components/Timeline/reset-selected-timeline-props.js

@@ -4,6 +4,7 @@ exports.resetSelectedTimelineProps = exports.getTimelinePropResetTargets = void
 const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
 const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
+const get_sequence_prop_reset_changes_1 = require("./get-sequence-prop-reset-changes");
 const save_effect_prop_1 = require("./save-effect-prop");
 const save_sequence_prop_1 = require("./save-sequence-prop");
 const isPropResetSelection = (selection) => selection.type === 'sequence-prop' ||
@@ -157,14 +158,7 @@ const resetSelectedTimelineProps = ({ selections, sequences, overrideIdsToNodePa
         resetPromises.push((0, save_sequence_prop_1.saveSequenceProps)({
             addedKeyframes: null,
             movedKeyframes: null,
-            changes: sequencePropTargets.map((target) => ({
-                fileName: target.fileName,
-                nodePath: target.nodePath,
-                fieldKey: target.fieldKey,
-                value: target.value,
-                defaultValue: target.defaultValue,
-                schema: target.schema,
-            })),
+            changes: sequencePropTargets.flatMap((target) => (0, get_sequence_prop_reset_changes_1.getSequencePropResetChanges)(target)),
             setPropStatuses,
             clientId,
             undoLabel: sequencePropTargets.length > 1

package/dist/components/Timeline/save-sequence-prop.d.ts

@@ -1,4 +1,4 @@
-import { type SaveSequencePropSourceEdit } from '@remotion/studio-shared';
+import { type CaptionPatch, type SaveSequencePropSourceEdit } from '@remotion/studio-shared';
 import type { CanUpdateSequencePropsResponse, SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
 import type { AddSequenceKeyframeChange } from './call-add-keyframe';
 import { type MoveEffectKeyframeChange, type MoveSequenceKeyframeChange } from './call-move-keyframe';
@@ -24,5 +24,16 @@ type SaveSequencePropsOptions = {
     undoLabel: string;
     redoLabel: string;
 };
+export declare const saveInlineCaptionPatches: ({ fileName, nodePath, schema, patches, nextCaptions, setPropStatuses, clientId, undoLabel, redoLabel, }: {
+    fileName: string;
+    nodePath: SequencePropsSubscriptionKey;
+    schema: InteractivitySchema;
+    patches: CaptionPatch[];
+    nextCaptions: unknown;
+    setPropStatuses: SetPropStatuses;
+    clientId: string;
+    undoLabel: string;
+    redoLabel: string;
+}) => Promise<void>;
 export declare const saveSequenceProps: ({ changes, addedKeyframes, movedKeyframes, setPropStatuses, clientId, undoLabel, redoLabel, }: SaveSequencePropsOptions) => Promise<void>;
 export {};

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.saveSequenceProps = void 0;
+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) => {
@@ -11,6 +11,30 @@ const serializeSequencePropValue = (value) => {
     }
     return { type: 'json', serialized: JSON.stringify(value) };
 };
+const saveInlineCaptionPatches = ({ fileName, nodePath, schema, patches, nextCaptions, setPropStatuses, clientId, undoLabel, redoLabel, }) => {
+    return (0, save_prop_queue_1.enqueueSavePropChange)({
+        nodePath,
+        setPropStatuses,
+        applyOptimistic: (previous) => (0, studio_shared_1.optimisticUpdateForPropStatuses)({
+            previous,
+            fieldKey: 'captions',
+            value: nextCaptions,
+            defaultValue: null,
+            schema,
+        }),
+        apiCall: () => (0, sequence_props_api_1.saveSequenceProps)({
+            edits: [],
+            captionPatches: [{ fileName, nodePath, schema, patches }],
+            addedKeyframes: null,
+            movedKeyframes: null,
+            clientId,
+            undoLabel,
+            redoLabel,
+        }),
+        errorLabel: 'Could not save captions',
+    });
+};
+exports.saveInlineCaptionPatches = saveInlineCaptionPatches;
 const saveSequenceProps = ({ changes, addedKeyframes, movedKeyframes, setPropStatuses, clientId, undoLabel, redoLabel, }) => {
     const keyframesToAdd = addedKeyframes === null ? [] : addedKeyframes;
     const sequenceKeyframes = movedKeyframes === null ? [] : movedKeyframes.sequenceKeyframes;
@@ -41,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,
@@ -86,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/Timeline/timeline-field-display-utils.js

@@ -239,6 +239,7 @@ const formatTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
         case 'asset':
         case 'array':
         case 'boolean':
+        case 'remotion-captions':
         case 'color':
         case 'enum':
         case 'font-family':

package/dist/components/Timeline/use-timeline-asset-drop.js

@@ -11,6 +11,7 @@ const effect_drag_and_drop_1 = require("../effect-drag-and-drop");
 const handle_drop_1 = require("../handle-drop");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const SvgImportDialog_1 = require("../SvgImportDialog");
+const use_element_overwrite_confirmation_1 = require("../use-element-overwrite-confirmation");
 const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const use_resolved_stack_1 = require("./use-resolved-stack");
@@ -30,6 +31,7 @@ const useTimelineAssetDrop = () => {
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const chooseSvgImportMode = (0, SvgImportDialog_1.useSvgImportDialog)();
+    const confirmElementOverwrite = (0, use_element_overwrite_confirmation_1.useElementOverwriteConfirmation)();
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const [isAddingAsset, setIsAddingAsset] = (0, react_1.useState)(false);
     const [assetDropFrame, setAssetDropFrame] = (0, react_1.useState)(null);
@@ -120,6 +122,7 @@ const useTimelineAssetDrop = () => {
             await (0, handle_drop_1.handleDrop)({
                 chooseSvgImportMode,
                 compositionFile,
+                confirmElementOverwrite,
                 compositionId: currentCompositionId,
                 destinationDimensions: {
                     height: videoConfig.height,
@@ -142,6 +145,7 @@ const useTimelineAssetDrop = () => {
         chooseSvgImportMode,
         compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence,
         compositionFile,
+        confirmElementOverwrite,
         currentCompositionId,
         getDropFrame,
         videoConfig,

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/UndoRedoButtons.js

@@ -4,6 +4,7 @@ exports.UndoRedoButtons = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const client_id_1 = require("../helpers/client-id");
 const is_mac_1 = require("../helpers/is-mac");
 const use_keybinding_1 = require("../helpers/use-keybinding");
@@ -37,7 +38,11 @@ const UndoRedoButtons = () => {
             return;
         }
         undoInFlight.current = true;
-        (0, call_api_1.callApi)('/api/undo', {})
+        const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+        const promise = browserStudioOperations
+            ? browserStudioOperations.undo()
+            : (0, call_api_1.callApi)('/api/undo', {});
+        promise
             .catch(() => {
             // Ignore errors
         })
@@ -50,7 +55,11 @@ const UndoRedoButtons = () => {
             return;
         }
         redoInFlight.current = true;
-        (0, call_api_1.callApi)('/api/redo', {})
+        const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+        const promise = browserStudioOperations
+            ? browserStudioOperations.redo()
+            : (0, call_api_1.callApi)('/api/redo', {});
+        promise
             .catch(() => {
             // Ignore errors
         })
@@ -121,11 +130,11 @@ const UndoRedoButtons = () => {
             ? `Redo (${ShortcutHint_1.cmdOrCtrlCharacter}+Shift+Z)`
             : `Redo (${ShortcutHint_1.cmdOrCtrlCharacter}+Y)`;
     const renderUndo = (0, react_1.useCallback)((color) => {
-        return (jsx_runtime_1.jsx(undo_1.UndoIcon, { style: { ...iconStyle, color, opacity: undoFile ? 1 : 0.5 } }));
-    }, [undoFile]);
+        return jsx_runtime_1.jsx(undo_1.UndoIcon, { style: { ...iconStyle, color } });
+    }, []);
     const renderRedo = (0, react_1.useCallback)((color) => {
-        return (jsx_runtime_1.jsx(redo_1.RedoIcon, { style: { ...iconStyle, color, opacity: redoFile ? 1 : 0.5 } }));
-    }, [redoFile]);
+        return jsx_runtime_1.jsx(redo_1.RedoIcon, { style: { ...iconStyle, color } });
+    }, []);
     const canUndo = undoFile !== null;
     const canRedo = redoFile !== null;
     if (!canUndo && !canRedo) {

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/handle-drop.d.ts

@@ -1,9 +1,10 @@
 import type { Dimensions } from '../helpers/is-current-selected-still';
-import { type InsertElementDropPosition } from './import-assets';
+import { type ConfirmElementOverwrite, type InsertElementDropPosition } from './import-assets';
 import type { SvgImportMode } from './SvgImportDialog';
-export declare const handleDrop: ({ chooseSvgImportMode, compositionFile, compositionId, destinationDimensions, dropPosition, event, fps, from, }: {
+export declare const handleDrop: ({ chooseSvgImportMode, compositionFile, confirmElementOverwrite, compositionId, destinationDimensions, dropPosition, event, fps, from, }: {
     chooseSvgImportMode: () => Promise<SvgImportMode | null>;
     compositionFile: string;
+    confirmElementOverwrite: ConfirmElementOverwrite;
     compositionId: string;
     destinationDimensions: Dimensions | null;
     dropPosition: InsertElementDropPosition | null;

package/dist/components/handle-drop.js

@@ -5,7 +5,7 @@ const remote_asset_drag_1 = require("../helpers/remote-asset-drag");
 const drop_handler_data_1 = require("./drop-handler-data");
 const element_drag_and_drop_1 = require("./element-drag-and-drop");
 const import_assets_1 = require("./import-assets");
-const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId, destinationDimensions, dropPosition, event, fps, from, }) => {
+const handleDrop = async ({ chooseSvgImportMode, compositionFile, confirmElementOverwrite, compositionId, destinationDimensions, dropPosition, event, fps, from, }) => {
     var _a;
     var _b;
     if ((0, drop_handler_data_1.isFileDragEvent)(event)) {
@@ -80,6 +80,7 @@ const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId,
         await (0, import_assets_1.insertElement)({
             compositionFile,
             compositionId,
+            confirmOverwrite: confirmElementOverwrite,
             dropPosition,
             element: element.element,
             from,

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

@@ -1,10 +1,11 @@
-import { type CompositionDragData, type ComponentProp } from '@remotion/drag-and-drop';
-import { type FileType, type InsertableCompositionElementPosition } from '@remotion/studio-shared';
+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 = {
     readonly centerX: number;
     readonly centerY: number;
 };
+export type ConfirmElementOverwrite = (conflict: InsertElementFileConflict) => Promise<boolean>;
 export declare const getAssetElement: ({ fileType, src, }: {
     fileType: FileType;
     src: string;
@@ -63,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[];
@@ -127,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[];
@@ -144,16 +145,17 @@ export declare const insertComposition: ({ composition, compositionFile, composi
     dropPosition: InsertElementDropPosition | null;
     from: number | null;
 }) => Promise<void>;
-export declare const insertElement: ({ compositionFile, compositionId, dropPosition, element, from, }: {
+export declare const insertElement: ({ compositionFile, compositionId, confirmOverwrite, dropPosition, element, from, }: {
     compositionFile: string;
     compositionId: string;
+    confirmOverwrite: ConfirmElementOverwrite;
     dropPosition: InsertElementDropPosition | null;
     element: {
         dependencies: string[];
         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/import-assets.js

@@ -872,21 +872,34 @@ const insertComposition = async ({ composition, compositionFile, compositionId,
     }
 };
 exports.insertComposition = insertComposition;
-const insertElement = async ({ compositionFile, compositionId, dropPosition, element, from, }) => {
+const insertElement = async ({ compositionFile, compositionId, confirmOverwrite, dropPosition, element, from, }) => {
     try {
         await (0, install_required_package_1.installRequiredPackages)(element.dependencies);
-        const response = await (0, call_api_1.callApi)('/api/insert-element', {
+        const position = (0, exports.getElementPositionForDrop)({
+            dimensions: element.dimensions,
+            dropPosition,
+        });
+        const callInsertElementApi = (overwriteExisting) => (0, call_api_1.callApi)('/api/insert-element', {
             compositionFile,
             compositionId,
             element,
             from,
-            position: (0, exports.getElementPositionForDrop)({
-                dimensions: element.dimensions,
-                dropPosition,
-            }),
+            overwriteExisting,
+            position,
         });
+        let response = await callInsertElementApi(false);
+        if (!response.success && response.type === 'file-conflict') {
+            const shouldOverwrite = await confirmOverwrite(response.conflict);
+            if (!shouldOverwrite) {
+                return;
+            }
+            response = await callInsertElementApi(true);
+        }
         if (!response.success) {
-            (0, NotificationCenter_1.showNotification)(`Could not add Element: ${response.reason}`, 4000);
+            const reason = response.type === 'error'
+                ? response.reason
+                : `Element file still conflicts: ${response.conflict.filePath}`;
+            (0, NotificationCenter_1.showNotification)(`Could not add Element: ${reason}`, 4000);
             return;
         }
         (0, NotificationCenter_1.showNotification)(`Added ${element.displayName} to source file`, 2000);

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>;