@remotion/studio 4.0.519 → 4.0.520

package/dist/esm/renderEntry.mjs

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

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.sortFolderTreeAlphabetically = exports.createFolderTree = exports.getKeysToExpand = exports.splitParentIntoNameAndParent = exports.buildAssetFolderStructure = void 0;
+const canvas_1 = require("@remotion/canvas");
 const persist_open_folders_1 = require("./persist-open-folders");
-const sort_by_nonce_history_1 = require("./sort-by-nonce-history");
 const buildAssetFolderStructure = (files, parentFolderName, foldersExpanded) => {
     const notInFolder = files.filter((f) => !f.name.includes('/'));
     const inFolder = files.filter((f) => f.name.includes('/'));
@@ -154,10 +154,7 @@ const createFolderTree = (comps, folders, foldersExpanded) => {
         list.push(toPush);
     }
     const sortTreeItems = (treeItems) => {
-        return (0, sort_by_nonce_history_1.sortItemsByNonceHistory)(treeItems.map((item) => ({
-            item,
-            nonce: item.type === 'folder' ? item.folder.nonce : item.composition.nonce,
-        }))).map(({ item }) => {
+        return (0, canvas_1.sortItemsByCommitOrder)(treeItems, (item) => item.type === 'folder' ? item.folder.order : item.composition.order).map((item) => {
             if (item.type === 'composition') {
                 return item;
             }

package/dist/helpers/document-title.d.ts

@@ -1,3 +1,5 @@
 import type { AnyRenderJob } from '../components/RenderQueue/context';
+import type { ModalState } from '../state/modals';
 export declare const setCurrentCanvasContentId: (id: string | null) => void;
 export declare const setRenderJobs: (jobs: AnyRenderJob[]) => void;
+export declare const setCurrentModal: (modal: ModalState | null) => void;

package/dist/helpers/document-title.js

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setRenderJobs = exports.setCurrentCanvasContentId = void 0;
+exports.setCurrentModal = exports.setRenderJobs = exports.setCurrentCanvasContentId = void 0;
 const no_react_1 = require("remotion/no-react");
 const context_1 = require("../components/RenderQueue/context");
+const url_state_1 = require("./url-state");
 let currentItemName = null;
+let currentModal = null;
 let renderJobs = [];
 const setCurrentCanvasContentId = (id) => {
     if (!id) {
@@ -21,15 +23,24 @@ const setRenderJobs = (jobs) => {
     updateTitle();
 };
 exports.setRenderJobs = setRenderJobs;
+const setCurrentModal = (modal) => {
+    currentModal = modal;
+    updateTitle();
+};
+exports.setCurrentModal = setCurrentModal;
 const productName = 'Remotion Studio';
 const suffix = `- ${productName}`;
 const updateTitle = () => {
+    if ((currentModal === null || currentModal === void 0 ? void 0 : currentModal.type) === 'element-install') {
+        (0, url_state_1.getNavigationWindow)().document.title = `📦 Install ${currentModal.request.element.displayName} - ${productName}`;
+        return;
+    }
     if (!currentItemName) {
-        document.title = productName;
+        (0, url_state_1.getNavigationWindow)().document.title = productName;
         return;
     }
     const currentCompTitle = `${currentItemName} / ${window.remotion_projectName}`;
-    document.title = [
+    (0, url_state_1.getNavigationWindow)().document.title = [
         getProgressInBrackets(currentItemName, renderJobs),
         `${currentCompTitle} ${suffix}`,
     ]

package/dist/helpers/get-timeline-max-zoom.d.ts

@@ -1,31 +1,37 @@
-export declare const TIMELINE_MIN_ZOOM = 1;
-export declare const TIMELINE_MAX_ZOOM_FLOOR = 5;
-/**
- * How many frames fill the timeline viewport at max zoom.
- * 30 frames matches the previous 5x cap on a 150-frame composition
- * (5 seconds at 30fps) and keeps a single frame wide enough to trim.
- */
-export declare const TIMELINE_FRAMES_VISIBLE_AT_MAX_ZOOM = 30;
-export declare const getTimelineMaxZoom: (durationInFrames: number) => number;
-export declare const clampTimelineZoom: ({ zoom, durationInFrames, }: {
-    zoom: number;
-    durationInFrames: number;
-}) => number;
-export declare const timelineZoomToNormalized: ({ zoom, maxZoom, }: {
-    zoom: number;
-    maxZoom: number;
-}) => number;
-export declare const timelineZoomToSliderValue: ({ zoom, maxZoom, }: {
-    zoom: number;
-    maxZoom: number;
-}) => number;
-export declare const normalizedToTimelineZoom: ({ normalized, maxZoom, }: {
-    normalized: number;
-    maxZoom: number;
-}) => number;
-export declare const sliderValueToTimelineZoom: ({ sliderValue, maxZoom, }: {
-    sliderValue: number;
-    maxZoom: number;
+export declare const TIMELINE_FRAME_WIDTH_AT_MAX_ZOOM = 30;
+export declare const getTimelineMinZoom: ({ durationInFrames, timelineViewportWidth, }: {
+    readonly durationInFrames: number;
+    readonly timelineViewportWidth: number;
+}) => number;
+export declare const clampTimelineZoom: ({ zoom, durationInFrames, timelineViewportWidth, }: {
+    readonly zoom: number;
+    readonly durationInFrames: number;
+    readonly timelineViewportWidth: number;
+}) => number;
+export declare const getTimelineZoom: ({ durationInFrames, timelineViewportWidth, zoom, }: {
+    readonly durationInFrames: number;
+    readonly timelineViewportWidth: number;
+    readonly zoom: number | null;
+}) => number;
+export declare const getTimelineWidth: ({ durationInFrames, zoom, }: {
+    readonly durationInFrames: number;
+    readonly zoom: number;
+}) => number;
+export declare const timelineZoomToNormalized: ({ zoom, minZoom, }: {
+    readonly zoom: number;
+    readonly minZoom: number;
+}) => number;
+export declare const timelineZoomToSliderValue: ({ zoom, minZoom, }: {
+    readonly zoom: number;
+    readonly minZoom: number;
+}) => number;
+export declare const normalizedToTimelineZoom: ({ normalized, minZoom, }: {
+    readonly normalized: number;
+    readonly minZoom: number;
+}) => number;
+export declare const sliderValueToTimelineZoom: ({ sliderValue, minZoom, }: {
+    readonly sliderValue: number;
+    readonly minZoom: number;
 }) => number;
 export declare const TIMELINE_ZOOM_SLIDER_PROPS: {
     readonly min: 0;

package/dist/helpers/get-timeline-max-zoom.js

@@ -1,51 +1,68 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TIMELINE_ZOOM_SLIDER_PROPS = exports.sliderValueToTimelineZoom = exports.normalizedToTimelineZoom = exports.timelineZoomToSliderValue = exports.timelineZoomToNormalized = exports.clampTimelineZoom = exports.getTimelineMaxZoom = exports.TIMELINE_FRAMES_VISIBLE_AT_MAX_ZOOM = exports.TIMELINE_MAX_ZOOM_FLOOR = exports.TIMELINE_MIN_ZOOM = void 0;
-exports.TIMELINE_MIN_ZOOM = 1;
-exports.TIMELINE_MAX_ZOOM_FLOOR = 5;
-/**
- * How many frames fill the timeline viewport at max zoom.
- * 30 frames matches the previous 5x cap on a 150-frame composition
- * (5 seconds at 30fps) and keeps a single frame wide enough to trim.
- */
-exports.TIMELINE_FRAMES_VISIBLE_AT_MAX_ZOOM = 30;
+exports.TIMELINE_ZOOM_SLIDER_PROPS = exports.sliderValueToTimelineZoom = exports.normalizedToTimelineZoom = exports.timelineZoomToSliderValue = exports.timelineZoomToNormalized = exports.getTimelineWidth = exports.getTimelineZoom = exports.clampTimelineZoom = exports.getTimelineMinZoom = exports.TIMELINE_FRAME_WIDTH_AT_MAX_ZOOM = void 0;
+const timeline_layout_1 = require("./timeline-layout");
+const TIMELINE_ZOOM_FALLBACK = 1;
+exports.TIMELINE_FRAME_WIDTH_AT_MAX_ZOOM = 30;
 const TIMELINE_ZOOM_SLIDER_MAX = 1000;
-const getTimelineMaxZoom = (durationInFrames) => {
-    const frameLevelZoom = durationInFrames / exports.TIMELINE_FRAMES_VISIBLE_AT_MAX_ZOOM;
-    return Math.max(exports.TIMELINE_MAX_ZOOM_FLOOR, Math.ceil(frameLevelZoom * 10) / 10);
+const getTimelineMinZoom = ({ durationInFrames, timelineViewportWidth, }) => {
+    if (durationInFrames <= 0 || timelineViewportWidth <= 0) {
+        return TIMELINE_ZOOM_FALLBACK;
+    }
+    return Math.min(exports.TIMELINE_FRAME_WIDTH_AT_MAX_ZOOM, Math.max(1, timelineViewportWidth - timeline_layout_1.TIMELINE_PADDING * 2) /
+        durationInFrames);
 };
-exports.getTimelineMaxZoom = getTimelineMaxZoom;
-const clampTimelineZoom = ({ zoom, durationInFrames, }) => {
-    const clamped = Math.min((0, exports.getTimelineMaxZoom)(durationInFrames), Math.max(exports.TIMELINE_MIN_ZOOM, zoom));
-    return Math.round(clamped * 10) / 10;
+exports.getTimelineMinZoom = getTimelineMinZoom;
+const clampTimelineZoom = ({ zoom, durationInFrames, timelineViewportWidth, }) => {
+    const minZoom = (0, exports.getTimelineMinZoom)({
+        durationInFrames,
+        timelineViewportWidth,
+    });
+    const clamped = Math.min(exports.TIMELINE_FRAME_WIDTH_AT_MAX_ZOOM, Math.max(minZoom, zoom));
+    if (clamped === minZoom || clamped === exports.TIMELINE_FRAME_WIDTH_AT_MAX_ZOOM) {
+        return clamped;
+    }
+    return Math.min(exports.TIMELINE_FRAME_WIDTH_AT_MAX_ZOOM, Math.max(minZoom, Math.round(clamped * 1000) / 1000));
 };
 exports.clampTimelineZoom = clampTimelineZoom;
-const timelineZoomToNormalized = ({ zoom, maxZoom, }) => {
-    if (maxZoom <= exports.TIMELINE_MIN_ZOOM) {
+const getTimelineZoom = ({ durationInFrames, timelineViewportWidth, zoom, }) => {
+    return (0, exports.clampTimelineZoom)({
+        durationInFrames,
+        timelineViewportWidth,
+        zoom: zoom !== null && zoom !== void 0 ? zoom : (0, exports.getTimelineMinZoom)({ durationInFrames, timelineViewportWidth }),
+    });
+};
+exports.getTimelineZoom = getTimelineZoom;
+const getTimelineWidth = ({ durationInFrames, zoom, }) => {
+    return durationInFrames * zoom + timeline_layout_1.TIMELINE_PADDING * 2;
+};
+exports.getTimelineWidth = getTimelineWidth;
+const timelineZoomToNormalized = ({ zoom, minZoom, }) => {
+    if (minZoom >= exports.TIMELINE_FRAME_WIDTH_AT_MAX_ZOOM) {
         return 0;
     }
-    const clampedZoom = Math.min(maxZoom, Math.max(exports.TIMELINE_MIN_ZOOM, zoom));
-    const normalized = Math.log(clampedZoom / exports.TIMELINE_MIN_ZOOM) /
-        Math.log(maxZoom / exports.TIMELINE_MIN_ZOOM);
+    const clampedZoom = Math.min(exports.TIMELINE_FRAME_WIDTH_AT_MAX_ZOOM, Math.max(minZoom, zoom));
+    const normalized = Math.log(clampedZoom / minZoom) /
+        Math.log(exports.TIMELINE_FRAME_WIDTH_AT_MAX_ZOOM / minZoom);
     return (Math.round(normalized * TIMELINE_ZOOM_SLIDER_MAX) / TIMELINE_ZOOM_SLIDER_MAX);
 };
 exports.timelineZoomToNormalized = timelineZoomToNormalized;
-const timelineZoomToSliderValue = ({ zoom, maxZoom, }) => {
-    return Math.round((0, exports.timelineZoomToNormalized)({ zoom, maxZoom }) * TIMELINE_ZOOM_SLIDER_MAX);
+const timelineZoomToSliderValue = ({ zoom, minZoom, }) => {
+    return Math.round((0, exports.timelineZoomToNormalized)({ zoom, minZoom }) * TIMELINE_ZOOM_SLIDER_MAX);
 };
 exports.timelineZoomToSliderValue = timelineZoomToSliderValue;
-const normalizedToTimelineZoom = ({ normalized, maxZoom, }) => {
-    if (maxZoom <= exports.TIMELINE_MIN_ZOOM) {
-        return exports.TIMELINE_MIN_ZOOM;
+const normalizedToTimelineZoom = ({ normalized, minZoom, }) => {
+    if (minZoom >= exports.TIMELINE_FRAME_WIDTH_AT_MAX_ZOOM) {
+        return exports.TIMELINE_FRAME_WIDTH_AT_MAX_ZOOM;
     }
     const t = Math.min(1, Math.max(0, normalized));
-    return exports.TIMELINE_MIN_ZOOM * (maxZoom / exports.TIMELINE_MIN_ZOOM) ** t;
+    return minZoom * (exports.TIMELINE_FRAME_WIDTH_AT_MAX_ZOOM / minZoom) ** t;
 };
 exports.normalizedToTimelineZoom = normalizedToTimelineZoom;
-const sliderValueToTimelineZoom = ({ sliderValue, maxZoom, }) => {
+const sliderValueToTimelineZoom = ({ sliderValue, minZoom, }) => {
     return (0, exports.normalizedToTimelineZoom)({
         normalized: sliderValue / TIMELINE_ZOOM_SLIDER_MAX,
-        maxZoom,
+        minZoom,
     });
 };
 exports.sliderValueToTimelineZoom = sliderValueToTimelineZoom;

package/dist/helpers/install-fiber-sequence-order-observer.d.ts

@@ -0,0 +1,37 @@
+type Fiber = {
+    readonly child: Fiber | null;
+    readonly elementType: unknown;
+    readonly memoizedProps: unknown;
+    readonly sibling: Fiber | null;
+    readonly type: unknown;
+};
+type FiberRoot = {
+    readonly current: Fiber;
+};
+type DevToolsHook = {
+    readonly supportsFiber?: boolean;
+    onCommitFiberRoot?: (this: DevToolsHook, rendererId: number, root: FiberRoot, priorityLevel: unknown, didError: boolean) => unknown;
+    [key: symbol]: unknown;
+};
+type HookTarget = Window & typeof globalThis & {
+    __REACT_DEVTOOLS_GLOBAL_HOOK__?: DevToolsHook;
+};
+type CompositionAndFolderOrderItem = {
+    readonly type: 'composition';
+    readonly id: string;
+} | {
+    readonly type: 'folder';
+    readonly id: string;
+};
+export declare const collectCommitOrderFromFiber: (root: FiberRoot) => {
+    sequenceManagers: {
+        managerId: string;
+        sequenceIds: string[];
+    }[];
+    compositionManagers: {
+        managerId: string;
+        compositionAndFolderOrder: CompositionAndFolderOrderItem[];
+    }[];
+};
+export declare const installFiberCommitOrderObserver: (target: HookTarget) => boolean;
+export {};

package/dist/helpers/install-fiber-sequence-order-observer.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.installFiberCommitOrderObserver = exports.collectCommitOrderFromFiber = void 0;
+const remotion_1 = require("remotion");
+const installationMarker = Symbol.for('remotion.commit-order-observer-installed');
+const hasMarker = (candidate, marker) => {
+    return ((typeof candidate === 'function' ||
+        (typeof candidate === 'object' && candidate !== null)) &&
+        Reflect.get(candidate, marker) === true);
+};
+const getStringProp = (props, key) => {
+    if (typeof props !== 'object' || props === null) {
+        return null;
+    }
+    const value = Reflect.get(props, key);
+    return typeof value === 'string' ? value : null;
+};
+const hasFiberMarker = (fiber, marker) => hasMarker(fiber.type, marker) || hasMarker(fiber.elementType, marker);
+const collectCommitOrderFromFiber = (root) => {
+    const sequencesByManager = new Map();
+    const compositionsAndFoldersByManager = new Map();
+    const visit = (fiber, currentSequenceManagerId, currentCompositionManagerId) => {
+        var _a, _b, _c;
+        const isSequenceManagerMarker = hasFiberMarker(fiber, remotion_1.Internals.CommitOrderInternals.sequenceManagerMarker);
+        const sequenceManagerId = isSequenceManagerMarker
+            ? getStringProp(fiber.memoizedProps, 'managerId')
+            : currentSequenceManagerId;
+        if (isSequenceManagerMarker &&
+            sequenceManagerId !== null &&
+            !sequencesByManager.has(sequenceManagerId)) {
+            sequencesByManager.set(sequenceManagerId, []);
+        }
+        const isCompositionManagerMarker = hasFiberMarker(fiber, remotion_1.Internals.CommitOrderInternals.compositionManagerMarker);
+        const compositionManagerId = isCompositionManagerMarker
+            ? getStringProp(fiber.memoizedProps, 'managerId')
+            : currentCompositionManagerId;
+        if (isCompositionManagerMarker &&
+            compositionManagerId !== null &&
+            !compositionsAndFoldersByManager.has(compositionManagerId)) {
+            compositionsAndFoldersByManager.set(compositionManagerId, []);
+        }
+        if (hasFiberMarker(fiber, remotion_1.Internals.CommitOrderInternals.sequenceMarker) &&
+            sequenceManagerId !== null) {
+            const sequenceId = getStringProp(fiber.memoizedProps, 'sequenceId');
+            if (sequenceId !== null) {
+                (_a = sequencesByManager.get(sequenceManagerId)) === null || _a === void 0 ? void 0 : _a.push(sequenceId);
+            }
+        }
+        if (hasFiberMarker(fiber, remotion_1.Internals.CommitOrderInternals.compositionMarker) &&
+            compositionManagerId !== null) {
+            const id = getStringProp(fiber.memoizedProps, 'compositionId');
+            if (id !== null) {
+                (_b = compositionsAndFoldersByManager
+                    .get(compositionManagerId)) === null || _b === void 0 ? void 0 : _b.push({ type: 'composition', id });
+            }
+        }
+        if (hasFiberMarker(fiber, remotion_1.Internals.CommitOrderInternals.folderMarker) &&
+            compositionManagerId !== null) {
+            const id = getStringProp(fiber.memoizedProps, 'folderId');
+            if (id !== null) {
+                (_c = compositionsAndFoldersByManager
+                    .get(compositionManagerId)) === null || _c === void 0 ? void 0 : _c.push({ type: 'folder', id });
+            }
+        }
+        let { child } = fiber;
+        while (child !== null) {
+            visit(child, sequenceManagerId, compositionManagerId);
+            child = child.sibling;
+        }
+    };
+    visit(root.current, null, null);
+    return {
+        sequenceManagers: [...sequencesByManager].map(([managerId, sequenceIds]) => ({ managerId, sequenceIds })),
+        compositionManagers: [...compositionsAndFoldersByManager].map(([managerId, compositionAndFolderOrder]) => ({
+            managerId,
+            compositionAndFolderOrder,
+        })),
+    };
+};
+exports.collectCommitOrderFromFiber = collectCommitOrderFromFiber;
+const installFiberCommitOrderObserver = (target) => {
+    const hook = target.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    if (!(hook === null || hook === void 0 ? void 0 : hook.supportsFiber)) {
+        return false;
+    }
+    if (hook[installationMarker] === true) {
+        return true;
+    }
+    const previousOnCommitFiberRoot = hook.onCommitFiberRoot;
+    hook.onCommitFiberRoot = function (...args) {
+        try {
+            const [, root] = args;
+            const order = (0, exports.collectCommitOrderFromFiber)(root);
+            if (order.sequenceManagers.length > 0 ||
+                order.compositionManagers.length > 0) {
+                target.dispatchEvent(new CustomEvent(remotion_1.Internals.CommitOrderInternals.eventName, {
+                    detail: order,
+                }));
+            }
+        }
+        catch (_a) {
+            // Fiber is private React API. An unsupported shape must not break Studio.
+        }
+        return previousOnCommitFiberRoot === null || previousOnCommitFiberRoot === void 0 ? void 0 : previousOnCommitFiberRoot.apply(this, args);
+    };
+    hook[installationMarker] = true;
+    return true;
+};
+exports.installFiberCommitOrderObserver = installFiberCommitOrderObserver;

package/dist/helpers/open-in-editor.js

@@ -38,6 +38,7 @@ const react_1 = require("react");
 const call_api_1 = require("../components/call-api");
 const get_stack_1 = require("../components/Timeline/TimelineStack/get-stack");
 const browser_studio_operations_1 = require("./browser-studio-operations");
+const use_sync_external_store_1 = require("./use-sync-external-store");
 const openInEditor = (stack, editorId) => {
     const { originalFileName, originalLineNumber, originalColumnNumber, originalFunctionName, originalScriptCode, } = stack;
     return (0, call_api_1.callApi)('/api/open-in-editor', {
@@ -119,7 +120,7 @@ const getCachedCompositionComponentInfo = ({ compositionFile, compositionId, })
 };
 exports.getCachedCompositionComponentInfo = getCachedCompositionComponentInfo;
 const useCachedCompositionComponentInfo = ({ compositionFile, compositionId, }) => {
-    const result = (0, react_1.useSyncExternalStore)(exports.subscribeToCompositionComponentInfo, () => {
+    const result = (0, use_sync_external_store_1.useSyncExternalStore)(exports.subscribeToCompositionComponentInfo, () => {
         if (compositionFile === null || compositionId === null) {
             return null;
         }

package/dist/helpers/use-runtime-values.d.ts

@@ -1,4 +1,4 @@
-import type { RuntimeValueStore, SequenceRegistrationControls } from 'remotion';
+import { type RuntimeValueStore, type SequenceRegistrationControls } from 'remotion';
 export declare const useRuntimeValues: (controls: SequenceRegistrationControls | null) => Readonly<Record<string, unknown>>;
 export declare const useRuntimeValue: (controls: SequenceRegistrationControls | null, key: string) => unknown;
 export declare const useRuntimeStoreValue: (storeOrNull: RuntimeValueStore | null, key: string) => unknown;

package/dist/helpers/use-runtime-values.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRuntimeValueSnapshots = exports.useRuntimeValueSelector = exports.useRuntimeStoreValue = exports.useRuntimeValue = exports.useRuntimeValues = void 0;
 const react_1 = require("react");
+const use_sync_external_store_1 = require("./use-sync-external-store");
 const EMPTY_RUNTIME_VALUES = {};
 const EMPTY_RUNTIME_VALUE_STORE = {
     getSnapshot: () => EMPTY_RUNTIME_VALUES,
@@ -10,7 +11,7 @@ const EMPTY_RUNTIME_VALUE_STORE = {
 const useRuntimeValues = (controls) => {
     var _a;
     const store = (_a = controls === null || controls === void 0 ? void 0 : controls.runtimeValues) !== null && _a !== void 0 ? _a : EMPTY_RUNTIME_VALUE_STORE;
-    return (0, react_1.useSyncExternalStore)(store.subscribe, store.getSnapshot, store.getSnapshot);
+    return (0, use_sync_external_store_1.useSyncExternalStore)(store.subscribe, store.getSnapshot, store.getSnapshot);
 };
 exports.useRuntimeValues = useRuntimeValues;
 const useRuntimeValue = (controls, key) => {
@@ -21,7 +22,7 @@ exports.useRuntimeValue = useRuntimeValue;
 const useRuntimeStoreValue = (storeOrNull, key) => {
     const store = storeOrNull !== null && storeOrNull !== void 0 ? storeOrNull : EMPTY_RUNTIME_VALUE_STORE;
     const getSnapshot = (0, react_1.useCallback)(() => store.getSnapshot()[key], [key, store]);
-    return (0, react_1.useSyncExternalStore)(store.subscribe, getSnapshot, getSnapshot);
+    return (0, use_sync_external_store_1.useSyncExternalStore)(store.subscribe, getSnapshot, getSnapshot);
 };
 exports.useRuntimeStoreValue = useRuntimeStoreValue;
 const useRuntimeValueSelector = ({ controls, selector, isEqual = Object.is, }) => {
@@ -47,7 +48,7 @@ const useRuntimeValueSelector = ({ controls, selector, isEqual = Object.is, }) =
             subscribe: store.subscribe,
         };
     }, [isEqual, selector, store]);
-    return (0, react_1.useSyncExternalStore)(selectedStore.subscribe, selectedStore.getSnapshot, selectedStore.getSnapshot);
+    return (0, use_sync_external_store_1.useSyncExternalStore)(selectedStore.subscribe, selectedStore.getSnapshot, selectedStore.getSnapshot);
 };
 exports.useRuntimeValueSelector = useRuntimeValueSelector;
 const useRuntimeValueSnapshots = (controls) => {
@@ -75,6 +76,6 @@ const useRuntimeValueSnapshots = (controls) => {
             },
         };
     }, [stores]);
-    return (0, react_1.useSyncExternalStore)(aggregateStore.subscribe, aggregateStore.getSnapshot, aggregateStore.getSnapshot);
+    return (0, use_sync_external_store_1.useSyncExternalStore)(aggregateStore.subscribe, aggregateStore.getSnapshot, aggregateStore.getSnapshot);
 };
 exports.useRuntimeValueSnapshots = useRuntimeValueSnapshots;

package/dist/helpers/use-sync-external-store.d.ts

@@ -0,0 +1,3 @@
+type UseSyncExternalStore = <TSnapshot>(subscribe: (onStoreChange: () => void) => () => void, getSnapshot: () => TSnapshot, getServerSnapshot?: () => TSnapshot) => TSnapshot;
+export declare const useSyncExternalStore: UseSyncExternalStore;
+export {};

package/dist/helpers/use-sync-external-store.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSyncExternalStore = void 0;
+const remotion_1 = require("remotion");
+({ useSyncExternalStore: exports.useSyncExternalStore } = remotion_1.Internals);

package/dist/previewEntry.js

@@ -10,8 +10,10 @@ const no_react_1 = require("remotion/no-react");
 const NoRegisterRoot_1 = require("./components/NoRegisterRoot");
 const entry_basic_1 = require("./error-overlay/entry-basic");
 const colors_1 = require("./helpers/colors");
+const install_fiber_sequence_order_observer_1 = require("./helpers/install-fiber-sequence-order-observer");
 const client_2 = require("./hot-middleware-client/client");
 const Studio_1 = require("./Studio");
+(0, install_fiber_sequence_order_observer_1.installFiberCommitOrderObserver)(window);
 remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultPreviewCSS(null, colors_1.BACKGROUND_HEX));
 if (!window.__remotionOverlayStarted) {
     window.__remotionOverlayStarted = true;

package/dist/state/modals.d.ts

@@ -1,6 +1,6 @@
 import type { AudioCodec, ChromeMode, Codec, ColorSpace, LogLevel, OpenGlRenderer, PixelFormat, StillImageFormat, VideoImageFormat, X264Preset } from '@remotion/renderer';
 import type { HardwareAccelerationOption } from '@remotion/renderer/client';
-import type { CanvasCaptureData, RenderDefaults } from '@remotion/studio-shared';
+import type { CanvasCaptureData, ElementInstallExpectedFileState, ElementInstallRequest, RenderDefaults } from '@remotion/studio-shared';
 import type { RenderStillOnWebImageFormat, WebRendererAudioCodec, WebRendererContainer, WebRendererHardwareAcceleration, WebRendererPageResponsiveness, WebRendererQuality, WebRendererVideoCodec } from '@remotion/web-renderer';
 import type React from 'react';
 import type { SequencePropsSubscriptionKey, _InternalTypes } from 'remotion';
@@ -116,6 +116,22 @@ export type CanvasCaptureImport = {
     readonly height: number;
     readonly width: number;
 };
+export type ElementInstallPlan = {
+    readonly compositionFile: string;
+    readonly filePath: string;
+    readonly expectedFileState: ElementInstallExpectedFileState;
+};
+export type ElementInstallModalState = {
+    readonly type: 'element-install';
+    readonly currentPlan: ElementInstallPlan | null;
+    readonly dependenciesToReview: string[];
+    readonly missingPackages: string[];
+    readonly newPlan: ElementInstallPlan;
+    readonly onClose: () => void;
+    readonly request: ElementInstallRequest;
+    readonly sourceIsUnverified: boolean;
+    readonly sourceLabel: string;
+};
 export type ModalState = {
     type: 'new-comp';
     folderName: string | null;
@@ -180,7 +196,7 @@ export type ModalState = {
     type: 'element-library';
     name: string;
     url: string;
-} | AddEffectModalState | ConfirmationDialogState | SvgImportDialogState;
+} | ElementInstallModalState | AddEffectModalState | ConfirmationDialogState | SvgImportDialogState;
 export type SetSelectedModalContextType = {
     setSelectedModal: React.Dispatch<React.SetStateAction<ModalState | null>>;
 };

package/dist/state/timeline-sequence-hover.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTimelineSequenceHover = exports.useIsTimelineSequenceHovered = exports.useSetTimelineSequenceHover = exports.useTimelineSequenceHoverState = exports.TimelineSequenceHoverContext = exports.createTimelineSequenceHoverStore = void 0;
 const react_1 = require("react");
 const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
+const use_sync_external_store_1 = require("../helpers/use-sync-external-store");
 const createTimelineSequenceHoverStore = () => {
     let hoveredSequence = null;
     const listeners = new Set();
@@ -28,7 +29,7 @@ exports.createTimelineSequenceHoverStore = createTimelineSequenceHoverStore;
 exports.TimelineSequenceHoverContext = (0, react_1.createContext)((0, exports.createTimelineSequenceHoverStore)());
 const useTimelineSequenceHoverState = () => {
     const store = (0, react_1.useContext)(exports.TimelineSequenceHoverContext);
-    return (0, react_1.useSyncExternalStore)(store.subscribe, store.getSnapshot, store.getSnapshot);
+    return (0, use_sync_external_store_1.useSyncExternalStore)(store.subscribe, store.getSnapshot, store.getSnapshot);
 };
 exports.useTimelineSequenceHoverState = useTimelineSequenceHoverState;
 const useSetTimelineSequenceHover = () => {
@@ -41,7 +42,7 @@ const useIsTimelineSequenceHovered = (nodePathKey) => {
         var _a;
         return nodePathKey !== null && ((_a = store.getSnapshot()) === null || _a === void 0 ? void 0 : _a.nodePathKey) === nodePathKey;
     }, [nodePathKey, store]);
-    return (0, react_1.useSyncExternalStore)(store.subscribe, getSnapshot, getSnapshot);
+    return (0, use_sync_external_store_1.useSyncExternalStore)(store.subscribe, getSnapshot, getSnapshot);
 };
 exports.useIsTimelineSequenceHovered = useIsTimelineSequenceHovered;
 const useTimelineSequenceHover = (nodePathInfo) => {

package/dist/state/timeline-zoom.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-export { getTimelineMaxZoom, TIMELINE_MIN_ZOOM, } from '../helpers/get-timeline-max-zoom';
 export type TimelineSetZoomOptions = {
     anchorFrame: number | null;
     anchorContentX: number | null;

package/dist/state/timeline-zoom.js

@@ -1,16 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineZoomContext = exports.TimelineZoomCtx = exports.TIMELINE_MIN_ZOOM = exports.getTimelineMaxZoom = void 0;
+exports.TimelineZoomContext = exports.TimelineZoomCtx = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
 const imperative_state_1 = require("../components/Timeline/imperative-state");
+const timeline_refs_1 = require("../components/Timeline/timeline-refs");
 const timeline_scroll_logic_1 = require("../components/Timeline/timeline-scroll-logic");
 const ZoomPersistor_1 = require("../components/ZoomPersistor");
 const get_timeline_max_zoom_1 = require("../helpers/get-timeline-max-zoom");
-const get_timeline_max_zoom_2 = require("../helpers/get-timeline-max-zoom");
-Object.defineProperty(exports, "getTimelineMaxZoom", { enumerable: true, get: function () { return get_timeline_max_zoom_2.getTimelineMaxZoom; } });
-Object.defineProperty(exports, "TIMELINE_MIN_ZOOM", { enumerable: true, get: function () { return get_timeline_max_zoom_2.TIMELINE_MIN_ZOOM; } });
 exports.TimelineZoomCtx = (0, react_1.createContext)({
     zoom: {},
     setZoom: () => {
@@ -31,9 +29,18 @@ const TimelineZoomContext = ({ children }) => {
         (0, react_dom_1.flushSync)(() => {
             setZoomState((prevZoomMap) => {
                 var _a;
+                var _b, _c;
+                const durationInFrames = (0, imperative_state_1.getCurrentDuration)();
+                const timelineViewportWidth = (_b = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0;
+                const previousZoom = (0, get_timeline_max_zoom_1.getTimelineZoom)({
+                    durationInFrames,
+                    timelineViewportWidth,
+                    zoom: (_c = prevZoomMap[compositionId]) !== null && _c !== void 0 ? _c : null,
+                });
                 const newZoom = (0, get_timeline_max_zoom_1.clampTimelineZoom)({
-                    zoom: callback((_a = prevZoomMap[compositionId]) !== null && _a !== void 0 ? _a : get_timeline_max_zoom_1.TIMELINE_MIN_ZOOM),
-                    durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                    zoom: callback(previousZoom),
+                    durationInFrames,
+                    timelineViewportWidth,
                 });
                 return { ...prevZoomMap, [compositionId]: newZoom };
             });