@remotion/studio 4.0.518 → 4.0.520

package/dist/helpers/get-box-quads-ponyfill.d.ts

@@ -0,0 +1,10 @@
+export type GetBoxQuadsBox = 'margin' | 'border' | 'padding' | 'content';
+export type GetBoxQuadsPonyfillOptions = {
+    readonly box?: GetBoxQuadsBox;
+    readonly relativeTo?: Element;
+};
+/**
+ * Returns border/margin/padding/content box quads for an element.
+ * Uses the native API when available, otherwise the getBoxQuads ponyfill.
+ */
+export declare const getBoxQuadsPonyfill: (element: Element, options?: GetBoxQuadsPonyfillOptions | undefined) => readonly DOMQuad[] | null;

package/dist/helpers/get-box-quads-ponyfill.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBoxQuadsPonyfill = void 0;
+const get_box_quads_polyfill_internals_js_1 = require("./get-box-quads-polyfill-internals.js");
+const hasNativeGetBoxQuads = (element) => {
+    return (typeof element.getBoxQuads === 'function');
+};
+/**
+ * Returns border/margin/padding/content box quads for an element.
+ * Uses the native API when available, otherwise the getBoxQuads ponyfill.
+ */
+const getBoxQuadsPonyfill = (element, options) => {
+    try {
+        if (hasNativeGetBoxQuads(element)) {
+            return element.getBoxQuads(options);
+        }
+        return (0, get_box_quads_polyfill_internals_js_1.getBoxQuads)(element, options);
+    }
+    catch (_a) {
+        return null;
+    }
+};
+exports.getBoxQuadsPonyfill = getBoxQuadsPonyfill;

package/dist/helpers/get-git-menu-item.d.ts

@@ -4,4 +4,9 @@ import type { OriginalPosition } from '../error-overlay/react-overlay/utils/get-
 export declare const getGitSourceName: (gitSource: GitSource) => string;
 export declare const getGitSourceBranchUrl: (gitSource: GitSource) => string;
 export declare const getGitRefUrl: (gitSource: GitSource, originalLocation: OriginalPosition, remotionRoot: string) => string;
+export declare const hasReadOnlyGitSource: () => boolean;
+export declare const openGitSource: ({ folder, location, }: {
+    folder: boolean;
+    location: OriginalPosition | null;
+}) => void;
 export declare const getGitMenuItem: () => ComboboxValue | null;

package/dist/helpers/get-git-menu-item.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getGitMenuItem = exports.getGitRefUrl = exports.getGitSourceBranchUrl = exports.getGitSourceName = void 0;
+exports.getGitMenuItem = exports.openGitSource = exports.hasReadOnlyGitSource = exports.getGitRefUrl = exports.getGitSourceBranchUrl = exports.getGitSourceName = void 0;
 const getGitSourceName = (gitSource) => {
     if (gitSource.type === 'github') {
         return 'GitHub';
@@ -52,6 +52,20 @@ const getGitRefUrl = (gitSource, originalLocation, remotionRoot) => {
     throw new Error('Unknown git source type');
 };
 exports.getGitRefUrl = getGitRefUrl;
+const hasReadOnlyGitSource = () => {
+    return Boolean(window.remotion_isReadOnlyStudio && window.remotion_gitSource);
+};
+exports.hasReadOnlyGitSource = hasReadOnlyGitSource;
+const openGitSource = ({ folder, location, }) => {
+    const gitSource = window.remotion_gitSource;
+    if (!gitSource) {
+        return;
+    }
+    window.open(folder || !location
+        ? (0, exports.getGitSourceBranchUrl)(gitSource)
+        : (0, exports.getGitRefUrl)(gitSource, location, window.remotion_cwd), '_blank');
+};
+exports.openGitSource = openGitSource;
 const getGitMenuItem = () => {
     if (!window.remotion_gitSource) {
         return null;

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

@@ -50,18 +50,23 @@ const makeHoverableCSS = () => `
   }
 
   @media (hover: hover) {
-    ${hoverable}:hover,
-    ${hoverGroup}:hover ${hoverable} {
+    ${hoverable}:hover {
       background-color: var(${HOVER_BG_VARIABLE}, var(${BG_VARIABLE}, ${colors_1.TRANSPARENT}));
     }
 
     ${hoverable}:hover,
-    ${hoverable}:hover *,
-    ${hoverGroup}:hover ${hoverable},
-    ${hoverGroup}:hover ${hoverable} * {
+    ${hoverable}:hover * {
       color: var(${HOVER_COLOR_VARIABLE}, var(${COLOR_VARIABLE}, inherit));
     }
 
+    /* An outer hoverable must not put a nested inline action into its hover
+       state. The nested action should only use its hover color when the
+       pointer is over the action itself. */
+    ${hoverable}:hover ${hoverable}:not(:hover),
+    ${hoverable}:hover ${hoverable}:not(:hover) * {
+      color: var(${COLOR_VARIABLE}, inherit);
+    }
+
     ${hoverGroup} ${reveal} {
       opacity: 0;
     }

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

@@ -1,9 +1,44 @@
 "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.openCompositionComponentInEditor = exports.preloadCompositionComponentInfo = exports.loadCompositionComponentInfo = exports.useCachedCompositionComponentInfo = exports.getCachedCompositionComponentInfo = exports.subscribeToCompositionComponentInfo = exports.openOriginalPositionInEditorAtProperty = exports.openOriginalPositionInEditor = exports.openInGitClient = exports.openInTerminal = exports.openInCodingAgent = exports.openInEditor = void 0;
 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', {
@@ -85,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;
         }
@@ -125,7 +160,23 @@ const loadCompositionComponentInfo = async ({ compositionFile, compositionId, })
         const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
         const body = browserStudioOperations
             ? await browserStudioOperations.getCompositionComponentInfo(request)
-            : await (0, call_api_1.callApi)('/api/composition-component-info', request);
+            : typeof window !== 'undefined' && window.remotion_isReadOnlyStudio
+                ? await (async () => {
+                    const files = (0, get_stack_1.getSourceMapFilesForSource)(compositionFile);
+                    if (files === null) {
+                        throw new Error(`Could not find source map contents for ${compositionFile}`);
+                    }
+                    const { resolveCompositionComponentLocation } = await Promise.resolve().then(() => __importStar(require('@remotion/studio-codemods/resolve-composition-component-location')));
+                    return {
+                        canAddSequence: false,
+                        location: resolveCompositionComponentLocation({
+                            compositionFile,
+                            compositionId,
+                            project: { files, rootDir: '.' },
+                        }),
+                    };
+                })()
+                : await (0, call_api_1.callApi)('/api/composition-component-info', request);
         const result = {
             location: body.location,
             canAddSequence: body.canAddSequence,

package/dist/helpers/preview-server-events.js

@@ -90,6 +90,9 @@ const ensurePreviewServerEventSource = () => {
     if (connectToBrowserStudio()) {
         return;
     }
+    if (window.remotion_isReadOnlyStudio) {
+        return;
+    }
     if (typeof EventSource === 'undefined') {
         return;
     }

package/dist/helpers/timeline-layout.d.ts

@@ -62,7 +62,6 @@ export declare const getExpandedTrackHeight: ({ sequence, nodePathInfo, getIsExp
 export declare const TIMELINE_LAYER_FILMSTRIP_HEIGHT = 26;
 export declare const TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT = 17;
 export declare const TIMELINE_LAYER_HEIGHT_VIDEO: number;
-export declare const TIMELINE_LAYER_HEIGHT_IMAGE = 26;
 export declare const TIMELINE_LAYER_HEIGHT_AUDIO = 34;
 export declare const TIMELINE_LAYER_HEIGHT_DEFAULT = 21;
 export declare const TIMELINE_LIST_ITEM_ROW_HEIGHT = 21;

package/dist/helpers/timeline-layout.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTimelineLayerHeight = exports.TIMELINE_LIST_ITEM_ROW_HEIGHT = exports.TIMELINE_LAYER_HEIGHT_DEFAULT = exports.TIMELINE_LAYER_HEIGHT_AUDIO = exports.TIMELINE_LAYER_HEIGHT_IMAGE = exports.TIMELINE_LAYER_HEIGHT_VIDEO = exports.TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT = exports.TIMELINE_LAYER_FILMSTRIP_HEIGHT = exports.getExpandedTrackHeight = exports.getTreeRowHeight = exports.flattenVisibleTreeNodes = exports.buildTimelineTree = exports.EXPANDED_SECTION_PADDING_RIGHT = exports.TREE_GROUP_ROW_HEIGHT = exports.TIMELINE_TRACK_EXPANDED_HEIGHT = exports.TIMELINE_ITEM_BORDER_BOTTOM = exports.TIMELINE_BORDER = exports.TIMELINE_PADDING = exports.SCHEMA_FIELD_ROW_HEIGHT = exports.getSchemaFieldGroup = exports.getFieldsToShow = exports.getEffectFieldsToShow = exports.SCHEMA_FIELD_GROUPS = void 0;
+exports.getTimelineLayerHeight = exports.TIMELINE_LIST_ITEM_ROW_HEIGHT = exports.TIMELINE_LAYER_HEIGHT_DEFAULT = exports.TIMELINE_LAYER_HEIGHT_AUDIO = exports.TIMELINE_LAYER_HEIGHT_VIDEO = exports.TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT = exports.TIMELINE_LAYER_FILMSTRIP_HEIGHT = exports.getExpandedTrackHeight = exports.getTreeRowHeight = exports.flattenVisibleTreeNodes = exports.buildTimelineTree = exports.EXPANDED_SECTION_PADDING_RIGHT = exports.TREE_GROUP_ROW_HEIGHT = exports.TIMELINE_TRACK_EXPANDED_HEIGHT = exports.TIMELINE_ITEM_BORDER_BOTTOM = exports.TIMELINE_BORDER = exports.TIMELINE_PADDING = exports.SCHEMA_FIELD_ROW_HEIGHT = exports.getSchemaFieldGroup = exports.getFieldsToShow = exports.getEffectFieldsToShow = exports.SCHEMA_FIELD_GROUPS = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const studio_shared_2 = require("@remotion/studio-shared");
 Object.defineProperty(exports, "SCHEMA_FIELD_GROUPS", { enumerable: true, get: function () { return studio_shared_2.SCHEMA_FIELD_GROUPS; } });
@@ -162,7 +162,6 @@ exports.TIMELINE_LAYER_FILMSTRIP_HEIGHT = 26;
 // The waveform stripe rendered underneath the filmstrip in TimelineVideoInfo.
 exports.TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT = 17;
 exports.TIMELINE_LAYER_HEIGHT_VIDEO = 2 + exports.TIMELINE_LAYER_FILMSTRIP_HEIGHT + exports.TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT;
-exports.TIMELINE_LAYER_HEIGHT_IMAGE = 26;
 exports.TIMELINE_LAYER_HEIGHT_AUDIO = 34;
 exports.TIMELINE_LAYER_HEIGHT_DEFAULT = 21;
 // The horizontal row inside a timeline list item (eye + arrow + label).
@@ -171,9 +170,6 @@ const getTimelineLayerHeight = (type) => {
     if (type === 'video') {
         return exports.TIMELINE_LAYER_HEIGHT_VIDEO;
     }
-    if (type === 'image') {
-        return exports.TIMELINE_LAYER_HEIGHT_IMAGE;
-    }
     if (type === 'audio') {
         return exports.TIMELINE_LAYER_HEIGHT_AUDIO;
     }

package/dist/helpers/url-state.d.ts

@@ -1,3 +1,4 @@
+export declare const getNavigationWindow: () => Window;
 export declare const getUrlForRoute: (route: string) => string;
 export declare const pushUrl: (url: string) => void;
 export declare const replaceUrl: (url: string) => void;

package/dist/helpers/url-state.js

@@ -1,25 +1,32 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRoute = exports.reloadUrl = exports.clearUrl = exports.replaceUrl = exports.pushUrl = exports.getUrlForRoute = void 0;
+exports.getRoute = exports.reloadUrl = exports.clearUrl = exports.replaceUrl = exports.pushUrl = exports.getUrlForRoute = exports.getNavigationWindow = void 0;
 const getUrlHandlingType = () => {
     if (window.remotion_isReadOnlyStudio || window.remotion_browserStudio) {
         return 'query-string';
     }
     return 'spa';
 };
+const getNavigationWindow = () => {
+    if (window.remotion_browserStudio && window.parent !== window) {
+        return window.parent;
+    }
+    return window;
+};
+exports.getNavigationWindow = getNavigationWindow;
 const getUrlForRoute = (route) => {
     if (getUrlHandlingType() === 'query-string') {
-        return `${window.location.pathname}?${route}`;
+        return `${(0, exports.getNavigationWindow)().location.pathname}?${route}`;
     }
     return route;
 };
 exports.getUrlForRoute = getUrlForRoute;
 const pushUrl = (url) => {
-    window.history.pushState({}, 'Studio', (0, exports.getUrlForRoute)(url));
+    (0, exports.getNavigationWindow)().history.pushState({}, 'Studio', (0, exports.getUrlForRoute)(url));
 };
 exports.pushUrl = pushUrl;
 const replaceUrl = (url) => {
-    window.history.replaceState({}, 'Studio', (0, exports.getUrlForRoute)(url));
+    (0, exports.getNavigationWindow)().history.replaceState({}, 'Studio', (0, exports.getUrlForRoute)(url));
 };
 exports.replaceUrl = replaceUrl;
 const clearUrl = () => {
@@ -32,7 +39,7 @@ const reloadUrl = () => {
 exports.reloadUrl = reloadUrl;
 const getRoute = () => {
     if (getUrlHandlingType() === 'query-string') {
-        const route = window.location.search.substring(1);
+        const route = (0, exports.getNavigationWindow)().location.search.substring(1);
         return route.startsWith('/') ? route : '';
     }
     return window.location.pathname;

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;