@remotion/studio 4.0.432 → 4.0.434

package/dist/esm/renderEntry.mjs

@@ -164,7 +164,6 @@ var renderContent = (Root) => {
         videoEnabled: window.remotion_videoEnabled,
         logLevel: window.remotion_logLevel,
         numberOfAudioTags: 0,
-        nonceContextSeed: 0,
         audioLatencyHint: window.remotion_audioLatencyHint ?? "interactive",
         visualModeEnabled: false,
         children: /* @__PURE__ */ jsxs(Internals.RenderAssetManagerProvider, {
@@ -193,7 +192,6 @@ var renderContent = (Root) => {
         logLevel: window.remotion_logLevel,
         numberOfAudioTags: 0,
         audioLatencyHint: window.remotion_audioLatencyHint ?? "interactive",
-        nonceContextSeed: 0,
         visualModeEnabled: false,
         children: /* @__PURE__ */ jsx(Internals.RenderAssetManagerProvider, {
           collectAssets: null,
@@ -210,7 +208,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-t28xqw5n.js").then(({ StudioInternals }) => {
+    import("./chunk-t3wtt582.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/helpers/calculate-timeline.js

@@ -5,9 +5,11 @@ const get_sequence_visible_range_1 = require("./get-sequence-visible-range");
 const get_timeline_nestedness_1 = require("./get-timeline-nestedness");
 const get_timeline_sequence_hash_1 = require("./get-timeline-sequence-hash");
 const get_timeline_sequence_sort_key_1 = require("./get-timeline-sequence-sort-key");
+const sort_by_nonce_history_1 = require("./sort-by-nonce-history");
 const calculateTimeline = ({ sequences, sequenceDuration, }) => {
+    const sortedSequences = (0, sort_by_nonce_history_1.sortItemsByNonceHistory)(sequences);
     const tracks = [];
-    if (sequences.length === 0) {
+    if (sortedSequences.length === 0) {
         return [
             {
                 sequence: {
@@ -19,7 +21,7 @@ const calculateTimeline = ({ sequences, sequenceDuration, }) => {
                     type: 'sequence',
                     rootId: '-',
                     showInTimeline: true,
-                    nonce: 0,
+                    nonce: [[0, 0]],
                     loopDisplay: undefined,
                     stack: null,
                     premountDisplay: null,
@@ -34,26 +36,26 @@ const calculateTimeline = ({ sequences, sequenceDuration, }) => {
     const sameHashes = {};
     const hashesUsedInRoot = {};
     const cache = {};
-    for (let i = 0; i < sequences.length; i++) {
-        const sequence = sequences[i];
+    for (let i = 0; i < sortedSequences.length; i++) {
+        const sequence = sortedSequences[i];
         if (!hashesUsedInRoot[sequence.rootId]) {
             hashesUsedInRoot[sequence.rootId] = [];
         }
-        const actualHash = (0, get_timeline_sequence_hash_1.getTimelineSequenceHash)(sequence, sequences, hashesUsedInRoot, cache);
+        const actualHash = (0, get_timeline_sequence_hash_1.getTimelineSequenceHash)(sequence, sortedSequences, hashesUsedInRoot, cache);
         if (!sameHashes[actualHash]) {
             sameHashes[actualHash] = [];
         }
         sameHashes[actualHash].push(sequence.id);
-        const cascadedStart = (0, get_sequence_visible_range_1.getCascadedStart)(sequence, sequences);
-        const visibleStart = (0, get_sequence_visible_range_1.getTimelineVisibleStart)(sequence, sequences);
-        const visibleDuration = (0, get_sequence_visible_range_1.getTimelineVisibleDuration)(sequence, sequences);
+        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);
         tracks.push({
             sequence: {
                 ...sequence,
                 from: visibleStart,
                 duration: visibleDuration,
             },
-            depth: (0, get_timeline_nestedness_1.getTimelineNestedLevel)(sequence, sequences, 0),
+            depth: (0, get_timeline_nestedness_1.getTimelineNestedLevel)(sequence, sortedSequences, 0),
             hash: actualHash,
             cascadedStart,
             cascadedDuration: sequence.duration,
@@ -66,9 +68,13 @@ const calculateTimeline = ({ sequences, sequenceDuration, }) => {
             uniqueTracks.push(cleanTrack);
         }
     }
+    const nonceRanks = new Map();
+    for (let i = 0; i < tracks.length; i++) {
+        nonceRanks.set(tracks[i].sequence.id, i);
+    }
     return uniqueTracks.sort((a, b) => {
-        const sortKeyA = (0, get_timeline_sequence_sort_key_1.getTimelineSequenceSequenceSortKey)(a, tracks, sameHashes);
-        const sortKeyB = (0, get_timeline_sequence_sort_key_1.getTimelineSequenceSequenceSortKey)(b, tracks, sameHashes);
+        const sortKeyA = (0, get_timeline_sequence_sort_key_1.getTimelineSequenceSequenceSortKey)(a, tracks, sameHashes, nonceRanks);
+        const sortKeyB = (0, get_timeline_sequence_sort_key_1.getTimelineSequenceSequenceSortKey)(b, tracks, sameHashes, nonceRanks);
         return sortKeyA.localeCompare(sortKeyB);
     });
 };

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

@@ -13,5 +13,5 @@ export type TrackWithHashAndOriginalTimings = TrackWithHash & {
 };
 export declare const getTimelineSequenceSequenceSortKey: (track: TrackWithHash, tracks: TrackWithHash[], sameHashes?: {
     [hash: string]: string[];
-}) => string;
+}, nonceRanks?: Map<string, number>) => string;
 export {};

package/dist/helpers/get-timeline-sequence-sort-key.js

@@ -1,9 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTimelineSequenceSequenceSortKey = void 0;
-const getTimelineSequenceSequenceSortKey = (track, tracks, sameHashes = {}) => {
+const getTimelineSequenceSequenceSortKey = (track, tracks, sameHashes = {}, nonceRanks = new Map()) => {
+    var _a;
     const firstSequenceWithSameHash = tracks.find((t) => sameHashes[track.hash].includes(t.sequence.id));
-    const id = String(firstSequenceWithSameHash.sequence.nonce).padStart(6, '0');
+    const sequenceId = firstSequenceWithSameHash.sequence.id;
+    const rank = (_a = nonceRanks.get(sequenceId)) !== null && _a !== void 0 ? _a : 0;
+    const id = String(rank).padStart(6, '0');
     if (!track.sequence.parent) {
         return id;
     }
@@ -19,6 +22,6 @@ const getTimelineSequenceSequenceSortKey = (track, tracks, sameHashes = {}) => {
     if (!firstParentWithSameHash) {
         throw new Error('could not find parent: ' + track.sequence.parent);
     }
-    return `${(0, exports.getTimelineSequenceSequenceSortKey)(firstParentWithSameHash, tracks, sameHashes)}-${id}`;
+    return `${(0, exports.getTimelineSequenceSequenceSortKey)(firstParentWithSameHash, tracks, sameHashes, nonceRanks)}-${id}`;
 };
 exports.getTimelineSequenceSequenceSortKey = getTimelineSequenceSequenceSortKey;

package/dist/helpers/inject-css.js

@@ -11,6 +11,7 @@ const makeDefaultGlobalCSS = () => {
     return `
   html {
     --remotion-cli-internals-blue: #0b84f3;
+    --remotion-cli-internals-blue-hovered: #4da3f7;
     overscroll-behavior-y: none;
     overscroll-behavior-x: none;
   }
@@ -83,7 +84,7 @@ const makeDefaultGlobalCSS = () => {
   
   input:focus,
   textarea:focus,
-  button:focus,
+  button:focus:not(.__remotion_input_dragger),
   a:focus {
     outline: none;
     box-shadow:
@@ -143,6 +144,10 @@ const makeDefaultGlobalCSS = () => {
     position: relative;
   }  
 
+  .__remotion_input_dragger:hover span {
+    color: var(--remotion-cli-internals-blue-hovered) !important;
+  }
+
   .${scroll_to_default_props_path_1.DEFAULT_PROPS_PATH_ACTIVE_CLASSNAME} span {
     color: var(--remotion-cli-internals-blue) !important;
     transition: color 0.2s ease-in-out;

package/dist/helpers/make-render-command.d.ts

@@ -0,0 +1,51 @@
+import type { RenderFramesOptions, RenderMediaOptions, RenderStillOptions } from '@remotion/renderer';
+import type { RenderDefaults } from '@remotion/studio-shared';
+import type { renderMediaOnWeb } from '@remotion/web-renderer';
+type RenderMode = 'still' | 'video' | 'audio' | 'sequence';
+export declare const getNpmRemotionCommandPrefix: (version: string) => string;
+export declare const normalizeServeUrlForRenderCommand: ({ locationHref, compositionId, }: {
+    locationHref: string;
+    compositionId: string;
+}) => string;
+type StrictRequired<T> = {
+    [K in keyof T]-?: Exclude<T[K], undefined>;
+};
+type RenderMediaCommandOptions = Omit<StrictRequired<Pick<RenderMediaOptions, 'codec' | 'crf' | 'concurrency' | 'disallowParallelEncoding' | 'muted' | 'enforceAudioTrack' | 'everyNthFrame' | 'numberOfGifLoops' | 'colorSpace' | 'scale' | 'logLevel' | 'repro' | 'metadata' | 'jpegQuality' | 'pixelFormat' | 'proResProfile' | 'x264Preset' | 'audioCodec' | 'forSeamlessAacConcatenation' | 'separateAudioTo' | 'hardwareAcceleration' | 'chromeMode' | 'offthreadVideoCacheSizeInBytes' | 'offthreadVideoThreads' | 'mediaCacheSizeInBytes' | 'audioBitrate' | 'videoBitrate' | 'encodingMaxRate' | 'encodingBufferSize'>>, 'audioBitrate' | 'videoBitrate' | 'encodingMaxRate' | 'encodingBufferSize' | 'jpegQuality' | 'proResProfile'> & {
+    audioBitrate: string | null;
+    videoBitrate: string | null;
+    encodingMaxRate: string | null;
+    encodingBufferSize: string | null;
+    jpegQuality: Exclude<RenderMediaOptions['jpegQuality'], undefined> | null;
+    proResProfile: Exclude<RenderMediaOptions['proResProfile'], undefined> | null;
+};
+type RenderStillCommandOptions = StrictRequired<Pick<RenderStillOptions, 'frame'>>;
+type RenderFramesSharedOptions = StrictRequired<Pick<RenderFramesOptions, 'concurrency' | 'everyNthFrame' | 'scale' | 'logLevel'>>;
+type RenderMediaOnWebInput = Parameters<typeof renderMediaOnWeb>[0];
+type CrossRendererOptions = StrictRequired<Pick<RenderMediaOnWebInput, 'muted' | 'scale' | 'logLevel'>>;
+type ReadOnlyStudioRenderCommandInput = RenderMediaCommandOptions & RenderStillCommandOptions & RenderFramesSharedOptions & CrossRendererOptions & {
+    remotionVersion: string;
+    locationHref: string;
+    compositionId: string;
+    outName: string;
+    renderMode: RenderMode;
+    renderDefaults: RenderDefaults;
+    durationInFrames: number;
+    startFrame: number;
+    endFrame: number;
+    stillImageFormat: RenderDefaults['stillImageFormat'];
+    sequenceImageFormat: RenderDefaults['videoImageFormat'];
+    videoImageFormat: RenderDefaults['videoImageFormat'];
+    delayRenderTimeout: number;
+    headless: boolean;
+    disableWebSecurity: boolean;
+    ignoreCertificateErrors: boolean;
+    gl: RenderDefaults['openGlRenderer'];
+    userAgent: string | null;
+    multiProcessOnLinux: boolean;
+    darkMode: boolean;
+    beepOnFinish: boolean;
+    envVariables: Record<string, string>;
+    inputProps: Record<string, unknown>;
+};
+export declare const makeReadOnlyStudioRenderCommand: ({ remotionVersion, locationHref, compositionId, outName, renderMode, renderDefaults, durationInFrames, concurrency, frame, startFrame, endFrame, stillImageFormat, sequenceImageFormat, videoImageFormat, jpegQuality, codec, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, crf, videoBitrate, audioBitrate, audioCodec, everyNthFrame, numberOfGifLoops, disallowParallelEncoding, encodingBufferSize, encodingMaxRate, forSeamlessAacConcatenation, separateAudioTo, colorSpace, scale, logLevel, delayRenderTimeout, hardwareAcceleration, chromeMode, headless, disableWebSecurity, ignoreCertificateErrors, gl, userAgent, multiProcessOnLinux, darkMode, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, mediaCacheSizeInBytes, beepOnFinish, repro, metadata, envVariables, inputProps, }: ReadOnlyStudioRenderCommandInput) => string;
+export {};

package/dist/helpers/make-render-command.js

@@ -0,0 +1,201 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeReadOnlyStudioRenderCommand = exports.normalizeServeUrlForRenderCommand = exports.getNpmRemotionCommandPrefix = void 0;
+const client_1 = require("@remotion/renderer/client");
+const shellQuote = (value) => {
+    return `'${value.replace(/'/g, "'\\''")}'`;
+};
+const addFlagWithValue = (flags, flag, value) => {
+    if (value === null || value === undefined) {
+        return;
+    }
+    flags.push(`--${flag}=${shellQuote(String(value))}`);
+};
+const addBooleanFlag = (flags, flag, value) => {
+    if (value) {
+        flags.push(`--${flag}`);
+    }
+};
+const valueFlag = (flag, value, defaultValue) => {
+    return { flag, value, defaultValue };
+};
+const booleanFlag = (flag, value, defaultValue) => {
+    return { flag, value, defaultValue };
+};
+const addValueFlagsIfChanged = (flags, mappings) => {
+    for (const mapping of mappings) {
+        if (mapping.value !== mapping.defaultValue) {
+            addFlagWithValue(flags, mapping.flag, mapping.value);
+        }
+    }
+};
+const addTrueBooleanFlagsIfChanged = (flags, mappings) => {
+    for (const mapping of mappings) {
+        if (mapping.value && mapping.value !== mapping.defaultValue) {
+            addBooleanFlag(flags, mapping.flag, true);
+        }
+    }
+};
+const getNpmRemotionCommandPrefix = (version) => {
+    return version.trim() === ''
+        ? 'npx --yes --location=global -p @remotion/cli remotion'
+        : `npx --yes --location=global -p @remotion/cli@${version} remotion`;
+};
+exports.getNpmRemotionCommandPrefix = getNpmRemotionCommandPrefix;
+const normalizeServeUrlForRenderCommand = ({ locationHref, compositionId, }) => {
+    const parsed = new URL(locationHref);
+    parsed.hash = '';
+    parsed.search = '';
+    const suffix = `/${compositionId}`;
+    if (parsed.pathname === suffix) {
+        parsed.pathname = '/';
+    }
+    else if (parsed.pathname.endsWith(suffix)) {
+        const basePath = parsed.pathname.slice(0, -suffix.length);
+        parsed.pathname = basePath === '' ? '/' : basePath;
+    }
+    if (parsed.pathname !== '/' && parsed.pathname.endsWith('/')) {
+        parsed.pathname = parsed.pathname.slice(0, -1);
+    }
+    return `${parsed.origin}${parsed.pathname === '/' ? '' : parsed.pathname}`;
+};
+exports.normalizeServeUrlForRenderCommand = normalizeServeUrlForRenderCommand;
+const trimDefaultOutPrefix = (outName) => {
+    if (outName.startsWith('out/')) {
+        const trimmed = outName.slice('out/'.length);
+        return trimmed.length === 0 ? outName : trimmed;
+    }
+    if (outName.startsWith('./out/')) {
+        const trimmed = outName.slice('./out/'.length);
+        return trimmed.length === 0 ? outName : trimmed;
+    }
+    return outName;
+};
+const getRenderMediaFlag = (option) => {
+    return client_1.BrowserSafeApis.optionsMap.renderMedia[option].cliFlag;
+};
+const renderMediaValueFlag = (option, value, defaultValue) => {
+    return valueFlag(getRenderMediaFlag(option), value, defaultValue);
+};
+const renderMediaBooleanFlag = (option, value, defaultValue) => {
+    return booleanFlag(getRenderMediaFlag(option), value, defaultValue);
+};
+const makeReadOnlyStudioRenderCommand = ({ remotionVersion, locationHref, compositionId, outName, renderMode, renderDefaults, durationInFrames, concurrency, frame, startFrame, endFrame, stillImageFormat, sequenceImageFormat, videoImageFormat, jpegQuality, codec, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, crf, videoBitrate, audioBitrate, audioCodec, everyNthFrame, numberOfGifLoops, disallowParallelEncoding, encodingBufferSize, encodingMaxRate, forSeamlessAacConcatenation, separateAudioTo, colorSpace, scale, logLevel, delayRenderTimeout, hardwareAcceleration, chromeMode, headless, disableWebSecurity, ignoreCertificateErrors, gl, userAgent, multiProcessOnLinux, darkMode, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, mediaCacheSizeInBytes, beepOnFinish, repro, metadata, envVariables, inputProps, }) => {
+    var _a;
+    const serveUrl = (0, exports.normalizeServeUrlForRenderCommand)({
+        locationHref,
+        compositionId,
+    });
+    const isStillRender = renderMode === 'still';
+    const isSequenceRender = renderMode === 'sequence';
+    const hasCodecSpecificOptions = !isSequenceRender;
+    const commandType = isStillRender ? 'still' : 'render';
+    const command = (0, exports.getNpmRemotionCommandPrefix)(remotionVersion);
+    const { options } = client_1.BrowserSafeApis;
+    const flags = [];
+    addValueFlagsIfChanged(flags, [
+        valueFlag(options.scaleOption.cliFlag, scale, renderDefaults.scale),
+        renderMediaValueFlag('logLevel', logLevel, renderDefaults.logLevel),
+        renderMediaValueFlag('timeoutInMilliseconds', delayRenderTimeout, renderDefaults.delayRenderTimeout),
+        renderMediaValueFlag('chromeMode', chromeMode, renderDefaults.chromeMode),
+        valueFlag(options.glOption.cliFlag, gl, renderDefaults.openGlRenderer),
+        valueFlag(options.userAgentOption.cliFlag, userAgent, renderDefaults.userAgent),
+        renderMediaValueFlag('offthreadVideoCacheSizeInBytes', offthreadVideoCacheSizeInBytes, renderDefaults.offthreadVideoCacheSizeInBytes),
+        renderMediaValueFlag('offthreadVideoThreads', offthreadVideoThreads, renderDefaults.offthreadVideoThreads),
+        renderMediaValueFlag('mediaCacheSizeInBytes', mediaCacheSizeInBytes, renderDefaults.mediaCacheSizeInBytes),
+    ]);
+    if (headless !== renderDefaults.headless) {
+        addFlagWithValue(flags, options.headlessOption.cliFlag, !headless);
+    }
+    addTrueBooleanFlagsIfChanged(flags, [
+        booleanFlag(options.disableWebSecurityOption.cliFlag, disableWebSecurity, renderDefaults.disableWebSecurity),
+        booleanFlag(options.ignoreCertificateErrorsOption.cliFlag, ignoreCertificateErrors, renderDefaults.ignoreCertificateErrors),
+        booleanFlag(options.enableMultiprocessOnLinuxOption.cliFlag, multiProcessOnLinux, renderDefaults.multiProcessOnLinux),
+        booleanFlag(options.darkModeOption.cliFlag, darkMode, renderDefaults.darkMode),
+        booleanFlag(options.beepOnFinishOption.cliFlag, beepOnFinish, renderDefaults.beepOnFinish),
+    ]);
+    if (isStillRender) {
+        addValueFlagsIfChanged(flags, [
+            valueFlag(options.stillFrameOption.cliFlag, frame, 0),
+            valueFlag(options.stillImageFormatOption.cliFlag, stillImageFormat, renderDefaults.stillImageFormat),
+            valueFlag(options.jpegQualityOption.cliFlag, jpegQuality, renderDefaults.jpegQuality),
+        ]);
+    }
+    else {
+        addValueFlagsIfChanged(flags, [
+            valueFlag(options.concurrencyOption.cliFlag, concurrency, renderDefaults.concurrency),
+        ]);
+        if (isSequenceRender) {
+            addBooleanFlag(flags, options.imageSequenceOption.cliFlag, true);
+            if (sequenceImageFormat !== 'jpeg') {
+                addFlagWithValue(flags, options.videoImageFormatOption.cliFlag, sequenceImageFormat);
+            }
+        }
+        else {
+            addValueFlagsIfChanged(flags, [
+                valueFlag(options.videoImageFormatOption.cliFlag, videoImageFormat, renderDefaults.videoImageFormat),
+                renderMediaValueFlag('hardwareAcceleration', hardwareAcceleration, renderDefaults.hardwareAcceleration),
+            ]);
+        }
+        if (hasCodecSpecificOptions && codec !== renderDefaults.codec) {
+            addFlagWithValue(flags, getRenderMediaFlag('codec'), codec);
+        }
+        if (startFrame !== 0 || endFrame !== durationInFrames - 1) {
+            addFlagWithValue(flags, options.framesOption.cliFlag, `${startFrame}-${endFrame}`);
+        }
+        if (hasCodecSpecificOptions) {
+            addTrueBooleanFlagsIfChanged(flags, [
+                renderMediaBooleanFlag('muted', muted, renderDefaults.muted),
+                booleanFlag(options.enforceAudioOption.cliFlag, enforceAudioTrack, renderDefaults.enforceAudioTrack),
+                renderMediaBooleanFlag('forSeamlessAacConcatenation', forSeamlessAacConcatenation, renderDefaults.forSeamlessAacConcatenation),
+            ]);
+            addValueFlagsIfChanged(flags, [
+                valueFlag(options.pixelFormatOption.cliFlag, pixelFormat, renderDefaults.pixelFormat),
+                renderMediaValueFlag('colorSpace', colorSpace, renderDefaults.colorSpace),
+                valueFlag(options.proResProfileOption.cliFlag, proResProfile, renderDefaults.proResProfile),
+                renderMediaValueFlag('x264Preset', x264Preset, renderDefaults.x264Preset),
+                valueFlag(options.crfOption.cliFlag, crf, null),
+                valueFlag(options.jpegQualityOption.cliFlag, jpegQuality, renderDefaults.jpegQuality),
+                renderMediaValueFlag('videoBitrate', videoBitrate, renderDefaults.videoBitrate),
+                renderMediaValueFlag('audioBitrate', audioBitrate, renderDefaults.audioBitrate),
+                valueFlag(options.everyNthFrameOption.cliFlag, everyNthFrame, renderDefaults.everyNthFrame),
+                renderMediaValueFlag('numberOfGifLoops', numberOfGifLoops, renderDefaults.numberOfGifLoops),
+                renderMediaValueFlag('encodingBufferSize', encodingBufferSize, renderDefaults.encodingBufferSize),
+                renderMediaValueFlag('encodingMaxRate', encodingMaxRate, renderDefaults.encodingMaxRate),
+                renderMediaValueFlag('separateAudioTo', separateAudioTo, null),
+            ]);
+            const defaultAudioCodec = (_a = client_1.BrowserSafeApis.defaultAudioCodecs[codec]) === null || _a === void 0 ? void 0 : _a.compressed;
+            if (audioCodec !== defaultAudioCodec) {
+                addFlagWithValue(flags, getRenderMediaFlag('audioCodec'), audioCodec);
+            }
+        }
+        addTrueBooleanFlagsIfChanged(flags, [
+            renderMediaBooleanFlag('disallowParallelEncoding', disallowParallelEncoding, false),
+            renderMediaBooleanFlag('repro', repro, renderDefaults.repro),
+        ]);
+    }
+    if (metadata) {
+        for (const [key, value] of Object.entries(metadata)) {
+            addFlagWithValue(flags, options.metadataOption.cliFlag, `${key}=${value}`);
+        }
+    }
+    if (Object.keys(inputProps).length > 0) {
+        addFlagWithValue(flags, options.propsOption.cliFlag, JSON.stringify(inputProps));
+    }
+    const envArgs = Object.entries(envVariables)
+        .sort(([a], [b]) => a.localeCompare(b))
+        .map(([key, value]) => shellQuote(`${key}=${value}`));
+    const renderCommand = [
+        command,
+        commandType,
+        shellQuote(serveUrl),
+        shellQuote(compositionId),
+        shellQuote(trimDefaultOutPrefix(outName)),
+        ...flags,
+    ].join(' ');
+    if (envArgs.length === 0) {
+        return renderCommand;
+    }
+    return ['env', ...envArgs, renderCommand].join(' ');
+};
+exports.makeReadOnlyStudioRenderCommand = makeReadOnlyStudioRenderCommand;

package/dist/helpers/retry-payload.js

@@ -58,6 +58,7 @@ const makeRetryPayload = (job) => {
             initialChromeMode: job.chromeMode,
             initialMediaCacheSizeInBytes: job.mediaCacheSizeInBytes,
             renderDefaults: defaults,
+            readOnlyStudio: false,
         };
     }
     if (job.type === 'sequence') {
@@ -110,6 +111,7 @@ const makeRetryPayload = (job) => {
             initialChromeMode: job.chromeMode,
             initialMediaCacheSizeInBytes: job.mediaCacheSizeInBytes,
             renderDefaults: defaults,
+            readOnlyStudio: false,
         };
     }
     if (job.type === 'video') {
@@ -162,6 +164,7 @@ const makeRetryPayload = (job) => {
             initialChromeMode: job.chromeMode,
             initialMediaCacheSizeInBytes: job.mediaCacheSizeInBytes,
             renderDefaults: defaults,
+            readOnlyStudio: false,
         };
     }
     throw new Error(`Job ${JSON.stringify(job)} Not implemented`);

package/dist/helpers/sort-by-nonce-history.d.ts

@@ -0,0 +1,5 @@
+import type { NonceHistory } from 'remotion';
+export declare const compareNonceHistories: (a: NonceHistory, b: NonceHistory) => number;
+export declare const sortItemsByNonceHistory: <T extends {
+    nonce: NonceHistory;
+}>(items: T[]) => T[];

package/dist/helpers/sort-by-nonce-history.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sortItemsByNonceHistory = exports.compareNonceHistories = void 0;
+const getSharedEpochOrder = (a, b) => {
+    const aMap = new Map(a);
+    const bMap = new Map(b);
+    const allEpochs = [...new Set([...aMap.keys(), ...bMap.keys()])].sort((x, y) => y - x);
+    for (const epoch of allEpochs) {
+        const aNonce = aMap.get(epoch);
+        const bNonce = bMap.get(epoch);
+        if (aNonce !== undefined && bNonce !== undefined) {
+            return aNonce - bNonce;
+        }
+    }
+    return null;
+};
+const compareNonceHistories = (a, b) => {
+    const shared = getSharedEpochOrder(a, b);
+    if (shared !== null) {
+        return shared;
+    }
+    // No shared epoch — items from a lower latest epoch come first
+    const aLatestEpoch = a[a.length - 1][0];
+    const bLatestEpoch = b[b.length - 1][0];
+    return aLatestEpoch - bLatestEpoch;
+};
+exports.compareNonceHistories = compareNonceHistories;
+const sortItemsByNonceHistory = (items) => {
+    const n = items.length;
+    if (n <= 1) {
+        return items.slice();
+    }
+    // Build a pairwise ordering matrix from shared epochs.
+    // order[i][j] < 0 means i before j, > 0 means j before i, null means no direct relationship.
+    const order = Array.from({ length: n }, () => Array(n).fill(null));
+    for (let i = 0; i < n; i++) {
+        for (let j = i + 1; j < n; j++) {
+            const cmp = getSharedEpochOrder(items[i].nonce, items[j].nonce);
+            order[i][j] = cmp;
+            order[j][i] = cmp !== null ? -cmp : null;
+        }
+    }
+    // Compute transitive closure: if i < j and j < k, then i < k.
+    for (let k = 0; k < n; k++) {
+        for (let i = 0; i < n; i++) {
+            for (let j = 0; j < n; j++) {
+                if (order[i][j] === null &&
+                    order[i][k] !== null &&
+                    order[k][j] !== null &&
+                    order[i][k] < 0 &&
+                    order[k][j] < 0) {
+                    order[i][j] = -1;
+                    order[j][i] = 1;
+                }
+            }
+        }
+    }
+    // Sort using transitive order, falling back to lower latest epoch first.
+    const indexMap = new Map(items.map((item, i) => [item, i]));
+    const result = items.slice();
+    result.sort((a, b) => {
+        const ai = indexMap.get(a);
+        const bi = indexMap.get(b);
+        const transitiveOrder = order[ai][bi];
+        if (transitiveOrder !== null) {
+            return transitiveOrder;
+        }
+        // No transitive relationship — lower latest epoch first
+        return a.nonce[a.nonce.length - 1][0] - b.nonce[b.nonce.length - 1][0];
+    });
+    return result;
+};
+exports.sortItemsByNonceHistory = sortItemsByNonceHistory;

package/dist/helpers/timeline-layout.js

@@ -7,7 +7,12 @@ exports.TIMELINE_ITEM_BORDER_BOTTOM = 1;
 exports.TIMELINE_TRACK_EXPANDED_HEIGHT = 100;
 exports.SCHEMA_FIELD_ROW_HEIGHT = 22;
 exports.UNSUPPORTED_FIELD_ROW_HEIGHT = 22;
-const SUPPORTED_SCHEMA_TYPES = new Set(['number', 'boolean']);
+const SUPPORTED_SCHEMA_TYPES = new Set([
+    'number',
+    'boolean',
+    'rotation',
+    'translate',
+]);
 const getSchemaFields = (controls) => {
     if (!controls) {
         return null;
@@ -34,7 +39,8 @@ const getExpandedTrackHeight = (controls) => {
     if (!fields || fields.length === 0) {
         return exports.TIMELINE_TRACK_EXPANDED_HEIGHT;
     }
-    return fields.reduce((sum, f) => sum + f.rowHeight, 0);
+    const separators = Math.max(0, fields.length - 1);
+    return fields.reduce((sum, f) => sum + f.rowHeight, 0) + separators;
 };
 exports.getExpandedTrackHeight = getExpandedTrackHeight;
 const getTimelineLayerHeight = (type) => {

package/dist/renderEntry.js

@@ -185,13 +185,13 @@ const renderContent = (Root) => {
                 defaultVideoImageFormat: bundleMode.compositionDefaultVideoImageFormat,
                 defaultPixelFormat: bundleMode.compositionDefaultPixelFormat,
                 defaultProResProfile: bundleMode.compositionDefaultProResProfile,
-            }, initialCompositions: [], children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: window.remotion_logLevel, numberOfAudioTags: 0, nonceContextSeed: 0, audioLatencyHint: (_a = window.remotion_audioLatencyHint) !== null && _a !== void 0 ? _a : 'interactive', visualModeEnabled: false, children: jsx_runtime_1.jsxs(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: [
+            }, initialCompositions: [], children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: window.remotion_logLevel, numberOfAudioTags: 0, audioLatencyHint: (_a = window.remotion_audioLatencyHint) !== null && _a !== void 0 ? _a : 'interactive', visualModeEnabled: false, children: jsx_runtime_1.jsxs(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: [
                         jsx_runtime_1.jsx(Root, {}), jsx_runtime_1.jsx(GetVideoComposition, { state: bundleMode })
                     ] }) }) }));
         renderToDOM(markup);
     }
     if (bundleMode.type === 'evaluation') {
-        const markup = (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { initialCanvasContent: null, onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: window.remotion_logLevel, numberOfAudioTags: 0, audioLatencyHint: (_b = window.remotion_audioLatencyHint) !== null && _b !== void 0 ? _b : 'interactive', nonceContextSeed: 0, visualModeEnabled: false, children: jsx_runtime_1.jsx(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: jsx_runtime_1.jsx(Root, {}) }) }) }));
+        const markup = (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { initialCanvasContent: null, onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: window.remotion_logLevel, numberOfAudioTags: 0, audioLatencyHint: (_b = window.remotion_audioLatencyHint) !== null && _b !== void 0 ? _b : 'interactive', visualModeEnabled: false, children: jsx_runtime_1.jsx(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: jsx_runtime_1.jsx(Root, {}) }) }) }));
         renderToDOM(markup);
     }
     if (bundleMode.type === 'index') {

package/dist/state/modals.d.ts

@@ -34,6 +34,7 @@ export type WebRenderModalState = {
 };
 export type RenderModalState = {
     type: 'server-render';
+    readOnlyStudio: boolean;
     compositionId: string;
     initialFrame: number;
     initialStillImageFormat: StillImageFormat;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.432",
+	"version": "4.0.434",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"sideEffects": false,
@@ -26,14 +26,14 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.432",
-		"@remotion/player": "4.0.432",
-		"@remotion/media-utils": "4.0.432",
-		"@remotion/renderer": "4.0.432",
-		"@remotion/web-renderer": "4.0.432",
-		"@remotion/studio-shared": "4.0.432",
-		"@remotion/zod-types": "4.0.432",
-		"mediabunny": "1.35.1",
+		"remotion": "4.0.434",
+		"@remotion/player": "4.0.434",
+		"@remotion/media-utils": "4.0.434",
+		"@remotion/renderer": "4.0.434",
+		"@remotion/web-renderer": "4.0.434",
+		"@remotion/studio-shared": "4.0.434",
+		"@remotion/zod-types": "4.0.434",
+		"mediabunny": "1.37.0",
 		"memfs": "3.4.3",
 		"source-map": "0.7.3",
 		"open": "^8.4.2",
@@ -43,9 +43,9 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "^7.3.4",
-		"@remotion/eslint-config-internal": "4.0.432",
+		"@remotion/eslint-config-internal": "4.0.434",
 		"eslint": "9.19.0",
-		"@typescript/native-preview": "7.0.0-dev.20260301.1"
+		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},
 	"publishConfig": {
 		"access": "public"

package/dist/helpers/should-show-render-button.d.ts

@@ -1 +0,0 @@
-export declare const shouldShowRenderButton: (readOnlyStudio: boolean) => boolean;

package/dist/helpers/should-show-render-button.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.shouldShowRenderButton = void 0;
-const show_browser_rendering_1 = require("./show-browser-rendering");
-const shouldShowRenderButton = (readOnlyStudio) => {
-    if (readOnlyStudio) {
-        return show_browser_rendering_1.SHOW_BROWSER_RENDERING;
-    }
-    return true;
-};
-exports.shouldShowRenderButton = shouldShowRenderButton;