@remotion/studio 4.0.471 → 4.0.473

package/dist/esm/renderEntry.mjs

@@ -209,7 +209,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-z0z9d4r0.js").then(({ StudioInternals }) => {
+    import("./chunk-q0jkt0zq.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/helpers/calculate-timeline.js

@@ -21,8 +21,8 @@ const getInheritedLoopDisplay = (sequence, sequences) => {
     return getInheritedLoopDisplay(parent, sequences);
 };
 const calculateTimeline = ({ sequences, overrideIdsToNodePaths, }) => {
-    var _a;
-    var _b;
+    var _a, _b;
+    var _c;
     const sortedSequences = (0, sort_by_nonce_history_1.sortItemsByNonceHistory)(sequences);
     const tracks = [];
     if (sortedSequences.length === 0) {
@@ -44,7 +44,7 @@ const calculateTimeline = ({ sequences, overrideIdsToNodePaths, }) => {
         const cascadedStart = (0, get_sequence_visible_range_1.getCascadedStart)(sequence, sortedSequences);
         const visibleStart = (0, get_sequence_visible_range_1.getTimelineVisibleStart)(sequence, sortedSequences);
         const visibleDuration = (0, get_sequence_visible_range_1.getTimelineVisibleDuration)(sequence, sortedSequences);
-        const overrideId = (_b = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.overrideId) !== null && _b !== void 0 ? _b : null;
+        const overrideId = (_c = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.overrideId) !== null && _c !== void 0 ? _c : null;
         const nodePath = overrideId ? overrideIdsToNodePaths[overrideId] : null;
         const hasKeyframeRows = sequence.controls !== null || sequence.effects.length > 0;
         tracks.push({
@@ -63,12 +63,14 @@ const calculateTimeline = ({ sequences, overrideIdsToNodePaths, }) => {
             keyframeDisplayOffset: hasKeyframeRows
                 ? cascadedStart - sequence.from
                 : 0,
+            sequenceFrameOffset: visibleStart - cascadedStart,
             nodePathInfo: nodePath
                 ? {
                     sequenceSubscriptionKey: nodePath,
                     auxiliaryKeys: [],
                     index: 0,
                     numberOfSequencesWithThisNodePath: 0,
+                    supportsEffects: ((_b = sequence.controls) === null || _b === void 0 ? void 0 : _b.supportsEffects) === true,
                 }
                 : null,
         });
@@ -106,6 +108,7 @@ const calculateTimeline = ({ sequences, overrideIdsToNodePaths, }) => {
                 auxiliaryKeys: track.nodePathInfo.auxiliaryKeys,
                 index,
                 numberOfSequencesWithThisNodePath: 0,
+                supportsEffects: track.nodePathInfo.supportsEffects,
             },
         };
     })
@@ -122,6 +125,7 @@ const calculateTimeline = ({ sequences, overrideIdsToNodePaths, }) => {
                 auxiliaryKeys: track.nodePathInfo.auxiliaryKeys,
                 index: track.nodePathInfo.index,
                 numberOfSequencesWithThisNodePath: (_a = nodePathIndexCounters.get(key)) !== null && _a !== void 0 ? _a : 0,
+                supportsEffects: track.nodePathInfo.supportsEffects,
             },
         };
     });

package/dist/helpers/create-folder-tree.js

@@ -113,6 +113,7 @@ const createFolderIfDoesNotExist = (items, availableFolders, folderItem, folders
     }
     itemList.push({
         type: 'folder',
+        folder: folderItem,
         folderName: folderItem.name,
         items: [],
         key: folderItem.name,

package/dist/helpers/get-asset-metadata.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getAssetMetadata = exports.remotion_outputsBase = void 0;
 const media_utils_1 = require("@remotion/media-utils");
 const remotion_1 = require("remotion");
-const Preview_1 = require("../components/Preview");
+const get_preview_file_type_1 = require("./get-preview-file-type");
 exports.remotion_outputsBase = window.remotion_staticBase.replace('static', 'outputs');
 const getSrcFromCanvasContent = (canvasContent) => {
     if (canvasContent.type === 'asset') {
@@ -40,7 +40,7 @@ const getAssetMetadata = async (canvasContent, addTime) => {
         }
         const fetchedAt = Date.now();
         const srcWithTime = addTime ? `${src}?date=${fetchedAt}` : src;
-        const fileType = (0, Preview_1.getPreviewFileType)(src);
+        const fileType = (0, get_preview_file_type_1.getPreviewFileType)(src);
         if (fileType === 'video') {
             const resolution = await (0, media_utils_1.getVideoMetadata)(srcWithTime);
             return {

package/dist/helpers/get-folder-id.d.ts

@@ -0,0 +1,4 @@
+export declare const getFolderId: ({ folderName, parentName, }: {
+    folderName: string;
+    parentName: string | null;
+}) => string;

package/dist/helpers/get-folder-id.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFolderId = void 0;
+const getFolderId = ({ folderName, parentName, }) => {
+    return [parentName, folderName].filter(Boolean).join('/');
+};
+exports.getFolderId = getFolderId;

package/dist/helpers/get-preview-file-type.d.ts

@@ -0,0 +1,2 @@
+export type AssetFileType = 'audio' | 'video' | 'image' | 'json' | 'txt' | 'other';
+export declare const getPreviewFileType: (fileName: string | null) => AssetFileType;

package/dist/helpers/get-preview-file-type.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPreviewFileType = void 0;
+const getPreviewFileType = (fileName) => {
+    var _a;
+    if (!fileName) {
+        return 'other';
+    }
+    const audioExtensions = ['mp3', 'wav', 'ogg', 'aac'];
+    const videoExtensions = ['mp4', 'avi', 'mkv', 'mov', 'webm'];
+    const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp'];
+    const fileExtension = (_a = fileName.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+    if (fileExtension === undefined) {
+        throw new Error('File extension is undefined');
+    }
+    if (audioExtensions.includes(fileExtension)) {
+        return 'audio';
+    }
+    if (videoExtensions.includes(fileExtension)) {
+        return 'video';
+    }
+    if (imageExtensions.includes(fileExtension)) {
+        return 'image';
+    }
+    if (fileExtension === 'json') {
+        return 'json';
+    }
+    if (fileExtension === 'txt') {
+        return 'txt';
+    }
+    return 'other';
+};
+exports.getPreviewFileType = getPreviewFileType;

package/dist/helpers/get-timeline-sequence-sort-key.d.ts

@@ -4,12 +4,14 @@ export type SequenceNodePathInfo = {
     auxiliaryKeys: string[];
     index: number;
     numberOfSequencesWithThisNodePath: number;
+    supportsEffects: boolean;
 };
 type Track = {
     sequence: TSequence;
     depth: number;
     nodePathInfo: SequenceNodePathInfo | null;
     keyframeDisplayOffset: number;
+    sequenceFrameOffset: number;
 };
 export type TrackWithHash = Track & {
     hash: string;

package/dist/helpers/install-required-package.d.ts

@@ -0,0 +1 @@
+export declare const installRequiredPackages: (packageNames: string[]) => Promise<void>;

package/dist/helpers/install-required-package.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.installRequiredPackages = void 0;
+const install_package_1 = require("../api/install-package");
+const NotificationCenter_1 = require("../components/Notifications/NotificationCenter");
+let installQueue = Promise.resolve();
+const getMissingPackages = (packageNames) => {
+    var _a;
+    const uniquePackageNames = Array.from(new Set(packageNames));
+    const installedPackages = (_a = window.remotion_installedPackages) !== null && _a !== void 0 ? _a : [];
+    return uniquePackageNames.filter((packageName) => !installedPackages.includes(packageName));
+};
+const addInstalledPackages = (packageNames) => {
+    var _a;
+    const installedPackages = (_a = window.remotion_installedPackages) !== null && _a !== void 0 ? _a : [];
+    window.remotion_installedPackages = Array.from(new Set([...installedPackages, ...packageNames]));
+};
+const formatPackageList = (packageNames) => {
+    if (packageNames.length === 1) {
+        return packageNames[0];
+    }
+    return `${packageNames.length} packages`;
+};
+const installRequiredPackages = async (packageNames) => {
+    const runInstall = async () => {
+        const missingPackages = getMissingPackages(packageNames);
+        if (missingPackages.length === 0) {
+            return;
+        }
+        (0, NotificationCenter_1.showNotification)(`Installing ${formatPackageList(missingPackages)}...`, 3000);
+        await (0, install_package_1.installPackages)(missingPackages);
+        addInstalledPackages(missingPackages);
+        (0, NotificationCenter_1.showNotification)(`Installed ${formatPackageList(missingPackages)}`, 3000);
+    };
+    const queuedInstall = installQueue.then(runInstall, runInstall);
+    installQueue = queuedInstall.catch(() => undefined);
+    await queuedInstall;
+};
+exports.installRequiredPackages = installRequiredPackages;

package/dist/helpers/remote-asset-drag.d.ts

@@ -0,0 +1,4 @@
+export declare const hasRemoteAssetDragData: (dataTransfer: DataTransfer | null) => boolean;
+export declare const getRemoteAssetUrlFromUriList: (uriList: string) => string | null;
+export declare const getRemoteAssetUrlFromHtml: (html: string) => string | null;
+export declare const getRemoteAssetUrlFromDataTransfer: (dataTransfer: DataTransfer | null) => string | null;

package/dist/helpers/remote-asset-drag.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRemoteAssetUrlFromDataTransfer = exports.getRemoteAssetUrlFromHtml = exports.getRemoteAssetUrlFromUriList = exports.hasRemoteAssetDragData = void 0;
+const remoteAssetDragTypes = ['text/uri-list', 'text/html', 'text/plain'];
+const isHttpUrl = (value) => {
+    try {
+        const url = new URL(value);
+        return url.protocol === 'http:' || url.protocol === 'https:';
+    }
+    catch (_a) {
+        return false;
+    }
+};
+const decodeHtmlAttribute = (value) => {
+    return value
+        .replace(/&/g, '&')
+        .replace(/"/g, '"')
+        .replace(/'/g, "'")
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>');
+};
+const hasRemoteAssetDragData = (dataTransfer) => {
+    return remoteAssetDragTypes.some((type) => {
+        var _a;
+        return Array.from((_a = dataTransfer === null || dataTransfer === void 0 ? void 0 : dataTransfer.types) !== null && _a !== void 0 ? _a : []).includes(type);
+    });
+};
+exports.hasRemoteAssetDragData = hasRemoteAssetDragData;
+const getRemoteAssetUrlFromUriList = (uriList) => {
+    const lines = uriList.split(/\r?\n/g);
+    for (const line of lines) {
+        const trimmed = line.trim();
+        if (trimmed === '' || trimmed.startsWith('#')) {
+            continue;
+        }
+        if (isHttpUrl(trimmed)) {
+            return trimmed;
+        }
+    }
+    return null;
+};
+exports.getRemoteAssetUrlFromUriList = getRemoteAssetUrlFromUriList;
+const getRemoteAssetUrlFromHtml = (html) => {
+    var _a;
+    var _b, _c, _d, _e;
+    const imgSrc = html.match(/<img\b[^>]*\bsrc\s*=\s*(?:"([^"]+)"|'([^']+)'|([^\s>]+))/i);
+    const match = (_d = (_c = (_b = imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc[1]) !== null && _b !== void 0 ? _b : imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc[2]) !== null && _c !== void 0 ? _c : imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc[3]) !== null && _d !== void 0 ? _d : null;
+    if (match) {
+        const decoded = decodeHtmlAttribute(match.trim());
+        if (isHttpUrl(decoded)) {
+            return decoded;
+        }
+    }
+    const fallback = (_e = (_a = html.match(/https?:\/\/[^\s"'<>]+/i)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _e !== void 0 ? _e : null;
+    return fallback && isHttpUrl(fallback) ? decodeHtmlAttribute(fallback) : null;
+};
+exports.getRemoteAssetUrlFromHtml = getRemoteAssetUrlFromHtml;
+const getRemoteAssetUrlFromDataTransfer = (dataTransfer) => {
+    if (!dataTransfer) {
+        return null;
+    }
+    const uriListUrl = (0, exports.getRemoteAssetUrlFromUriList)(dataTransfer.getData('text/uri-list'));
+    if (uriListUrl) {
+        return uriListUrl;
+    }
+    const htmlUrl = (0, exports.getRemoteAssetUrlFromHtml)(dataTransfer.getData('text/html'));
+    if (htmlUrl) {
+        return htmlUrl;
+    }
+    const plainText = dataTransfer.getData('text/plain').trim();
+    return isHttpUrl(plainText) ? plainText : null;
+};
+exports.getRemoteAssetUrlFromDataTransfer = getRemoteAssetUrlFromDataTransfer;

package/dist/helpers/timeline-layout.js

@@ -15,7 +15,7 @@ exports.EXPANDED_SECTION_PADDING_RIGHT = 10;
 const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getEffectDragOverrides, codeValues, }) => {
     var _a;
     const roots = [];
-    const { sequenceSubscriptionKey, index, auxiliaryKeys } = nodePathInfo;
+    const { sequenceSubscriptionKey, index, auxiliaryKeys, supportsEffects } = nodePathInfo;
     const controlFields = (0, studio_shared_1.getFieldsToShow)({
         schema: sequence.controls.schema,
         currentRuntimeValueDotNotation: sequence.controls.currentRuntimeValueDotNotation,
@@ -32,6 +32,7 @@ const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getEffect
                     auxiliaryKeys: [...auxiliaryKeys, 'controls', f.key],
                     index,
                     numberOfSequencesWithThisNodePath: 0,
+                    supportsEffects,
                 },
                 label: (_a = f.description) !== null && _a !== void 0 ? _a : f.key,
                 field: f,
@@ -46,6 +47,7 @@ const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getEffect
                 auxiliaryKeys: [...auxiliaryKeys, 'effects'],
                 index,
                 numberOfSequencesWithThisNodePath: 0,
+                supportsEffects,
             },
             label: 'Effects',
             effectInfo: null,
@@ -65,6 +67,7 @@ const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getEffect
                         auxiliaryKeys: [...auxiliaryKeys, 'effects', i.toString()],
                         index,
                         numberOfSequencesWithThisNodePath: 0,
+                        supportsEffects,
                     },
                     label: effect.label,
                     effectInfo: {
@@ -86,6 +89,7 @@ const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getEffect
                                 ],
                                 index,
                                 numberOfSequencesWithThisNodePath: 0,
+                                supportsEffects,
                             },
                             label: (_a = f.description) !== null && _a !== void 0 ? _a : f.key,
                             field: f,

package/dist/helpers/use-asset-drag-events.d.ts

@@ -1,3 +1,6 @@
+export declare const isFileDragEvent: (event: {
+    readonly dataTransfer: DataTransfer;
+}) => boolean;
 declare function useAssetDragEvents({ name, parentFolder, dropLocation, setDropLocation }: {
     name: string | null;
     parentFolder: string | null;
@@ -5,7 +8,7 @@ declare function useAssetDragEvents({ name, parentFolder, dropLocation, setDropL
     setDropLocation: React.Dispatch<React.SetStateAction<string | null>>;
 }): {
     isDropDiv: boolean;
-    onDragEnter: () => void;
-    onDragLeave: () => void;
+    onDragEnter: import("react").DragEventHandler<Element>;
+    onDragLeave: import("react").DragEventHandler<Element>;
 };
 export default useAssetDragEvents;

package/dist/helpers/use-asset-drag-events.js

@@ -1,7 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.isFileDragEvent = void 0;
 const react_1 = require("react");
 const no_react_1 = require("remotion/no-react");
+const isFileDragEvent = (event) => {
+    return Array.from(event.dataTransfer.types).includes('Files');
+};
+exports.isFileDragEvent = isFileDragEvent;
 function useAssetDragEvents({ name, parentFolder, dropLocation, setDropLocation, }) {
     const dragDepthRef = (0, react_1.useRef)(0);
     const combinedParents = (0, react_1.useMemo)(() => {
@@ -10,7 +15,10 @@ function useAssetDragEvents({ name, parentFolder, dropLocation, setDropLocation,
     const isDropDiv = (0, react_1.useMemo)(() => {
         return dropLocation === combinedParents;
     }, [combinedParents, dropLocation]);
-    const onDragEnter = (0, react_1.useCallback)(() => {
+    const onDragEnter = (0, react_1.useCallback)((event) => {
+        if (!(0, exports.isFileDragEvent)(event)) {
+            return;
+        }
         if (dragDepthRef.current === 0) {
             setDropLocation((currentDropLocation) => (currentDropLocation === null || currentDropLocation === void 0 ? void 0 : currentDropLocation.includes(combinedParents))
                 ? currentDropLocation
@@ -18,7 +26,10 @@ function useAssetDragEvents({ name, parentFolder, dropLocation, setDropLocation,
         }
         dragDepthRef.current++;
     }, [combinedParents, dragDepthRef, setDropLocation]);
-    const onDragLeave = (0, react_1.useCallback)(() => {
+    const onDragLeave = (0, react_1.useCallback)((event) => {
+        if (!(0, exports.isFileDragEvent)(event)) {
+            return;
+        }
         dragDepthRef.current--;
         if (dragDepthRef.current === 0) {
             setDropLocation((currentPath) => currentPath === combinedParents ? parentFolder : currentPath);

package/dist/helpers/validate-folder-rename.d.ts

@@ -0,0 +1,6 @@
+export declare const validateFolderRename: ({ folders, newName, originalName, parentName, }: {
+    folders: import("remotion").TFolder[];
+    newName: string;
+    originalName: string;
+    parentName: string | null;
+}) => string | null;

package/dist/helpers/validate-folder-rename.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateFolderRename = void 0;
+const remotion_1 = require("remotion");
+const validateFolderRename = ({ folders, newName, originalName, parentName, }) => {
+    if (!remotion_1.Internals.isFolderNameValid(newName)) {
+        return remotion_1.Internals.invalidFolderNameErrorMessage;
+    }
+    if (newName === originalName) {
+        return null;
+    }
+    if (folders.find((folder) => {
+        return folder.name === newName && folder.parent === parentName;
+    })) {
+        return `A folder with that name already exists.`;
+    }
+    return null;
+};
+exports.validateFolderRename = validateFolderRename;

package/dist/hot-middleware-client/client.js

@@ -4,6 +4,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.enableHotMiddleware = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
+const error_origin_1 = require("../error-overlay/error-origin");
 const preview_server_events_1 = require("../helpers/preview-server-events");
 const process_update_1 = require("./process-update");
 function createReporter() {
@@ -63,6 +64,11 @@ function processMessage(obj) {
         case 'built': {
             let applyUpdate = true;
             if (obj.errors.length > 0) {
+                obj.errors.forEach((error) => {
+                    if (typeof error === 'string') {
+                        (0, error_origin_1.markErrorMessageAsLoggedByServer)((0, studio_shared_1.stripAnsi)(error));
+                    }
+                });
                 if (reporter)
                     reporter.problems('errors', obj);
                 applyUpdate = false;

package/dist/state/editor-outlines.d.ts

@@ -0,0 +1,8 @@
+type State = {
+    editorShowOutlines: boolean;
+    setEditorShowOutlines: (cb: (prevState: boolean) => boolean) => void;
+};
+export declare const persistEditorShowOutlinesOption: (option: boolean) => void;
+export declare const loadEditorShowOutlinesOption: () => boolean;
+export declare const EditorShowOutlinesContext: import("react").Context<State>;
+export {};

package/dist/state/editor-outlines.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorShowOutlinesContext = exports.loadEditorShowOutlinesOption = exports.persistEditorShowOutlinesOption = void 0;
+const react_1 = require("react");
+const key = 'remotion.editorShowOutlines';
+const persistEditorShowOutlinesOption = (option) => {
+    localStorage.setItem(key, String(option));
+};
+exports.persistEditorShowOutlinesOption = persistEditorShowOutlinesOption;
+const loadEditorShowOutlinesOption = () => {
+    const item = localStorage.getItem(key);
+    return item !== 'false';
+};
+exports.loadEditorShowOutlinesOption = loadEditorShowOutlinesOption;
+exports.EditorShowOutlinesContext = (0, react_1.createContext)({
+    editorShowOutlines: true,
+    setEditorShowOutlines: () => undefined,
+});

package/dist/state/modals.d.ts

@@ -7,6 +7,7 @@ import type { _InternalTypes } from 'remotion';
 import type { CompType } from '../components/NewComposition/DuplicateComposition';
 import type { QuickSwitcherMode } from '../components/QuickSwitcher/NoResults';
 import type { RenderType } from '../components/RenderModal/RenderModalAdvanced';
+import type { KeyframeSettingsModalState } from '../components/Timeline/KeyframeSettingsModal';
 import type { Bug, UpdateInfo } from '../components/UpdateCheck';
 export type WebRenderModalState = {
     type: 'web-render';
@@ -86,6 +87,16 @@ export type RenderModalState = {
     defaulMetadata: Record<string, string> | null;
     renderDefaults: RenderDefaults;
 };
+export type ConfirmationDialogState = {
+    type: 'confirmation-dialog';
+    id: string;
+    title: string;
+    message: React.ReactNode;
+    confirmLabel: string;
+    cancelLabel: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+};
 export type ModalState = {
     type: 'duplicate-comp';
     compositionId: string;
@@ -96,9 +107,25 @@ export type ModalState = {
 } | {
     type: 'rename-comp';
     compositionId: string;
+} | {
+    type: 'delete-folder';
+    folderName: string;
+    parentName: string | null;
+    stack: string | null;
+} | {
+    type: 'rename-folder';
+    folderName: string;
+    parentName: string | null;
+    stack: string | null;
+} | {
+    type: 'delete-static-file';
+    relativePath: string;
+} | {
+    type: 'rename-static-file';
+    relativePath: string;
 } | {
     type: 'input-props-override';
-} | RenderModalState | WebRenderModalState | {
+} | KeyframeSettingsModalState | RenderModalState | WebRenderModalState | {
     type: 'render-progress';
     jobId: string;
 } | {
@@ -112,7 +139,7 @@ export type ModalState = {
     type: 'quick-switcher';
     mode: QuickSwitcherMode;
     invocationTimestamp: number;
-};
+} | ConfirmationDialogState;
 export type ModalContextType = {
     selectedModal: ModalState | null;
     setSelectedModal: React.Dispatch<React.SetStateAction<ModalState | null>>;

package/dist/state/scale-lock.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { SequencePropsSubscriptionKey } from 'remotion';
+export type ScaleLockContextValue = {
+    readonly getScaleLockState: ({ defaultValue, fieldKey, nodePath }: {
+        readonly defaultValue: boolean;
+        readonly fieldKey: string;
+        readonly nodePath: SequencePropsSubscriptionKey;
+    }) => boolean;
+    readonly setScaleLockState: ({ fieldKey, linked, nodePath }: {
+        readonly fieldKey: string;
+        readonly linked: boolean;
+        readonly nodePath: SequencePropsSubscriptionKey;
+    }) => void;
+};
+export declare const ScaleLockContext: React.Context<ScaleLockContextValue>;
+export declare const ScaleLockProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;

package/dist/state/scale-lock.js

@@ -0,0 +1,59 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScaleLockProvider = exports.ScaleLockContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const remotion_1 = require("remotion");
+const makeScaleLockKey = ({ fieldKey, nodePath, }) => `${remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath)}.${fieldKey}`;
+exports.ScaleLockContext = react_1.default.createContext({
+    getScaleLockState: ({ defaultValue }) => defaultValue,
+    setScaleLockState: () => undefined,
+});
+const ScaleLockProvider = ({ children }) => {
+    const [states, setStates] = (0, react_1.useState)({});
+    const getScaleLockState = (0, react_1.useCallback)(({ defaultValue, fieldKey, nodePath }) => {
+        var _a;
+        const key = makeScaleLockKey({ fieldKey, nodePath });
+        return (_a = states[key]) !== null && _a !== void 0 ? _a : defaultValue;
+    }, [states]);
+    const setScaleLockState = (0, react_1.useCallback)(({ fieldKey, linked, nodePath }) => {
+        const key = makeScaleLockKey({ fieldKey, nodePath });
+        setStates((current) => ({ ...current, [key]: linked }));
+    }, []);
+    const value = (0, react_1.useMemo)(() => ({ getScaleLockState, setScaleLockState }), [getScaleLockState, setScaleLockState]);
+    return (jsx_runtime_1.jsx(exports.ScaleLockContext.Provider, { value: value, children: children }));
+};
+exports.ScaleLockProvider = ScaleLockProvider;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.471",
+	"version": "4.0.473",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
@@ -25,14 +25,14 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.471",
-		"@remotion/player": "4.0.471",
-		"@remotion/media-utils": "4.0.471",
-		"@remotion/renderer": "4.0.471",
-		"@remotion/web-renderer": "4.0.471",
-		"@remotion/studio-shared": "4.0.471",
-		"@remotion/timeline-utils": "4.0.471",
-		"@remotion/zod-types": "4.0.471",
+		"remotion": "4.0.473",
+		"@remotion/player": "4.0.473",
+		"@remotion/media-utils": "4.0.473",
+		"@remotion/renderer": "4.0.473",
+		"@remotion/web-renderer": "4.0.473",
+		"@remotion/studio-shared": "4.0.473",
+		"@remotion/timeline-utils": "4.0.473",
+		"@remotion/zod-types": "4.0.473",
 		"@jridgewell/trace-mapping": "0.3.31",
 		"mediabunny": "1.45.0",
 		"memfs": "3.4.3",
@@ -43,7 +43,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.471",
+		"@remotion/eslint-config-internal": "4.0.473",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},