@remotion/studio 4.0.498 → 4.0.500

package/dist/esm/renderEntry.mjs

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

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

@@ -1,7 +1,7 @@
 import type { OverrideIdToNodePaths, TSequence } from 'remotion';
-import type { TrackWithHash } from './get-timeline-sequence-sort-key';
+import type { TimelineTrackData } from './get-timeline-sequence-sort-key';
 export declare const calculateTimeline: ({ sequences, overrideIdsToNodePaths, compositions, }: {
     sequences: TSequence[];
     overrideIdsToNodePaths: OverrideIdToNodePaths;
     compositions?: readonly import("remotion").AnyComposition[] | undefined;
-}) => TrackWithHash[];
+}) => TimelineTrackData[];

package/dist/helpers/calculate-timeline.js

@@ -5,7 +5,6 @@ const studio_shared_1 = require("@remotion/studio-shared");
 const get_connected_compositions_1 = require("./get-connected-compositions");
 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 getInheritedLoopDisplay = (sequence, sequences) => {
@@ -52,19 +51,8 @@ const calculateTimeline = ({ sequences, overrideIdsToNodePaths, compositions = [
         }
         return true;
     });
-    const sameHashes = {};
-    const hashesUsedInRoot = {};
-    const cache = {};
     for (let i = 0; i < timelineSequences.length; i++) {
         const sequence = timelineSequences[i];
-        if (!hashesUsedInRoot[sequence.rootId]) {
-            hashesUsedInRoot[sequence.rootId] = [];
-        }
-        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, sortedSequences);
         const cascadedStartWithTrim = (0, get_sequence_visible_range_1.getCascadedStartWithTrim)(sequence, sortedSequences);
         const effectiveFrom = sequence.trimBefore === null
@@ -87,7 +75,6 @@ const calculateTimeline = ({ sequences, overrideIdsToNodePaths, compositions = [
                     : sequence.loopDisplay,
             },
             depth: (0, get_timeline_nestedness_1.getTimelineNestedLevel)(sequence, sortedSequences, 0),
-            hash: actualHash,
             cascadedStart,
             cascadedDuration: sequence.duration,
             keyframeDisplayOffset: hasKeyframeRows
@@ -105,26 +92,19 @@ const calculateTimeline = ({ sequences, overrideIdsToNodePaths, compositions = [
                 : null,
         });
     }
-    const uniqueTracks = [];
-    for (const track of tracks) {
-        const existingTrack = uniqueTracks.find((t) => t.hash === track.hash);
-        if (!existingTrack) {
-            const { cascadedDuration, cascadedStart, ...cleanTrack } = track;
-            uniqueTracks.push(cleanTrack);
-        }
-        else if (existingTrack.connectedCompositions === undefined &&
-            track.connectedCompositions !== undefined) {
-            existingTrack.connectedCompositions = track.connectedCompositions;
-        }
-    }
     const nonceRanks = new Map();
     for (let i = 0; i < tracks.length; i++) {
         nonceRanks.set(tracks[i].sequence.id, i);
     }
-    const sortedTracks = uniqueTracks.sort((a, b) => {
-        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);
+    const sortedTracks = tracks
+        .sort((a, b) => {
+        const sortKeyA = (0, get_timeline_sequence_sort_key_1.getTimelineSequenceSortKey)(a, tracks, nonceRanks);
+        const sortKeyB = (0, get_timeline_sequence_sort_key_1.getTimelineSequenceSortKey)(b, tracks, nonceRanks);
         return sortKeyA.localeCompare(sortKeyB);
+    })
+        .map((track) => {
+        const { cascadedDuration, cascadedStart, ...cleanTrack } = track;
+        return cleanTrack;
     });
     const nodePathIndexCounters = new Map();
     return sortedTracks

package/dist/helpers/get-effective-translation.d.ts

@@ -13,7 +13,19 @@ export declare const getEffectiveTranslation: ({ canvasSize, scale, compositionH
     x: number;
     y: number;
 };
-export declare const getCenterPointWhileScrolling: ({ size, clientX, clientY, compositionWidth, compositionHeight, scale, translation, }: {
+export declare const getUnboundedCenterPointWhileScrolling: ({ size, clientX, clientY, compositionWidth, compositionHeight, scale, translation, }: {
+    size: Size;
+    clientX: number;
+    clientY: number;
+    compositionWidth: number;
+    compositionHeight: number;
+    scale: number;
+    translation: Translation;
+}) => {
+    centerX: number;
+    centerY: number;
+};
+export declare const getCenterPointWhileScrolling: (options: {
     size: Size;
     clientX: number;
     clientY: number;

package/dist/helpers/get-effective-translation.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.applyZoomAroundFocalPoint = exports.getCenterPointWhileScrolling = exports.getEffectiveTranslation = void 0;
+exports.applyZoomAroundFocalPoint = exports.getCenterPointWhileScrolling = exports.getUnboundedCenterPointWhileScrolling = exports.getEffectiveTranslation = void 0;
 const remotion_1 = require("remotion");
 const smooth_zoom_1 = require("./smooth-zoom");
 const studio_fit_padding_1 = require("./studio-fit-padding");
@@ -33,16 +33,22 @@ const getEffectiveTranslation = ({ canvasSize, scale, compositionHeight, composi
     };
 };
 exports.getEffectiveTranslation = getEffectiveTranslation;
-const getCenterPointWhileScrolling = ({ size, clientX, clientY, compositionWidth, compositionHeight, scale, translation, }) => {
+const getUnboundedCenterPointWhileScrolling = ({ size, clientX, clientY, compositionWidth, compositionHeight, scale, translation, }) => {
     const mouseLeft = clientX - size.left;
     const mouseTop = clientY - size.top;
     const contentLeftPoint = size.width / 2 - (compositionWidth * scale) / 2 - translation.x;
     const contentTopPoint = size.height / 2 - (compositionHeight * scale) / 2 - translation.y;
-    const offsetFromVideoLeft = Math.min(compositionWidth, Math.max(0, (mouseLeft - contentLeftPoint) / scale));
-    const offsetFromVideoTop = Math.min(compositionHeight, Math.max(0, (mouseTop - contentTopPoint) / scale));
     return {
-        centerX: offsetFromVideoLeft,
-        centerY: offsetFromVideoTop,
+        centerX: (mouseLeft - contentLeftPoint) / scale,
+        centerY: (mouseTop - contentTopPoint) / scale,
+    };
+};
+exports.getUnboundedCenterPointWhileScrolling = getUnboundedCenterPointWhileScrolling;
+const getCenterPointWhileScrolling = (options) => {
+    const { centerX, centerY } = (0, exports.getUnboundedCenterPointWhileScrolling)(options);
+    return {
+        centerX: Math.min(options.compositionWidth, Math.max(0, centerX)),
+        centerY: Math.min(options.compositionHeight, Math.max(0, centerY)),
     };
 };
 exports.getCenterPointWhileScrolling = getCenterPointWhileScrolling;

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

@@ -6,7 +6,7 @@ export type SequenceNodePathInfo = {
     numberOfSequencesWithThisNodePath: number;
     supportsEffects: boolean;
 };
-type Track = {
+export type TimelineTrackData = {
     sequence: TSequence;
     connectedCompositions?: readonly _InternalTypes['AnyComposition'][];
     depth: number;
@@ -14,15 +14,8 @@ type Track = {
     keyframeDisplayOffset: number;
     sequenceFrameOffset: number;
 };
-export type TrackWithHash = Track & {
-    hash: string;
-};
-export type TrackWithHashAndOriginalTimings = TrackWithHash & {
-    hash: string;
+export type TimelineTrackWithOriginalTimings = TimelineTrackData & {
     cascadedStart: number;
     cascadedDuration: number;
 };
-export declare const getTimelineSequenceSequenceSortKey: (track: TrackWithHash, tracks: TrackWithHash[], sameHashes?: {
-    [hash: string]: string[];
-}, nonceRanks?: Map<string, number>) => string;
-export {};
+export declare const getTimelineSequenceSortKey: (track: TimelineTrackData, tracks: TimelineTrackData[], nonceRanks: Map<string, number>) => string;

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

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

package/dist/helpers/interactivity-enabled.d.ts

@@ -1 +1,2 @@
 export declare const isStudioInteractivityEnabled: () => boolean;
+export declare const isStudioSelectionEnabled: () => boolean;

package/dist/helpers/interactivity-enabled.js

@@ -1,5 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isStudioInteractivityEnabled = void 0;
+exports.isStudioSelectionEnabled = exports.isStudioInteractivityEnabled = void 0;
 const studio_runtime_config_1 = require("./studio-runtime-config");
-exports.isStudioInteractivityEnabled = studio_runtime_config_1.getStudioInteractivityEnabled;
+const isStudioInteractivityEnabled = () => {
+    return ((0, studio_runtime_config_1.getStudioInteractivityEnabled)() &&
+        (typeof window === 'undefined' || !window.remotion_isReadOnlyStudio));
+};
+exports.isStudioInteractivityEnabled = isStudioInteractivityEnabled;
+exports.isStudioSelectionEnabled = studio_runtime_config_1.getStudioInteractivityEnabled;

package/dist/helpers/is-mac.d.ts

@@ -0,0 +1 @@
+export declare const isMac: boolean;

package/dist/helpers/is-mac.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isMac = void 0;
+exports.isMac = typeof window !== 'undefined' && window.navigator.platform.startsWith('Mac');

package/dist/helpers/open-in-editor.d.ts

@@ -1,7 +1,11 @@
 import type { CompositionComponentInfoResponse, SymbolicatedStackFrame } from '@remotion/studio-shared';
-import type { OriginalPosition } from '../error-overlay/react-overlay/utils/get-source-map';
+import type { CodePosition, OriginalPosition } from '../error-overlay/react-overlay/utils/get-source-map';
 export declare const openInEditor: (stack: SymbolicatedStackFrame) => Promise<import("@remotion/studio-shared").OpenInEditorResponse>;
 export declare const openOriginalPositionInEditor: (originalPosition: OriginalPosition) => Promise<void>;
+export declare const openOriginalPositionInEditorAtProperty: ({ originalPosition, property, }: {
+    originalPosition: CodePosition;
+    property: string;
+}) => Promise<void>;
 type ResolvedCompositionComponentInfo = {
     location: CompositionComponentInfoResponse['location'];
     canAddSequence: boolean;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.openCompositionComponentInEditor = exports.preloadCompositionComponentInfo = exports.loadCompositionComponentInfo = exports.useCachedCompositionComponentInfo = exports.getCachedCompositionComponentInfo = exports.subscribeToCompositionComponentInfo = exports.openOriginalPositionInEditor = exports.openInEditor = void 0;
+exports.openCompositionComponentInEditor = exports.preloadCompositionComponentInfo = exports.loadCompositionComponentInfo = exports.useCachedCompositionComponentInfo = exports.getCachedCompositionComponentInfo = exports.subscribeToCompositionComponentInfo = exports.openOriginalPositionInEditorAtProperty = exports.openOriginalPositionInEditor = exports.openInEditor = void 0;
 const react_1 = require("react");
 const call_api_1 = require("../components/call-api");
 const openInEditor = (stack) => {
@@ -26,6 +26,20 @@ const openOriginalPositionInEditor = async (originalPosition) => {
     });
 };
 exports.openOriginalPositionInEditor = openOriginalPositionInEditor;
+const openOriginalPositionInEditorAtProperty = async ({ originalPosition, property, }) => {
+    const position = await (0, call_api_1.callApi)('/api/find-in-file', {
+        fileName: originalPosition.source,
+        lineNumber: originalPosition.line,
+        columnNumber: originalPosition.column,
+        search: property,
+    });
+    await (0, exports.openOriginalPositionInEditor)({
+        source: originalPosition.source,
+        line: position.lineNumber,
+        column: position.columnNumber,
+    });
+};
+exports.openOriginalPositionInEditorAtProperty = openOriginalPositionInEditorAtProperty;
 const componentResolutionCache = new Map();
 const componentResolutionResults = new Map();
 const componentResolutionListeners = new Set();

package/dist/helpers/ruler-canvas-size.d.ts

@@ -3,3 +3,10 @@ export declare const applyRulerInsetsToCanvasSize: ({ rulersAreVisible, size, }:
     readonly rulersAreVisible: boolean;
     readonly size: Size;
 }) => Size;
+export declare const getRulerCanvasSize: ({ orientation, size, }: {
+    readonly orientation: "horizontal" | "vertical";
+    readonly size: Size;
+}) => {
+    height: number;
+    width: number;
+};

package/dist/helpers/ruler-canvas-size.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.applyRulerInsetsToCanvasSize = void 0;
+exports.getRulerCanvasSize = exports.applyRulerInsetsToCanvasSize = void 0;
 const editor_rulers_1 = require("../state/editor-rulers");
 const applyRulerInsetsToCanvasSize = ({ rulersAreVisible, size, }) => {
     if (!rulersAreVisible) {
@@ -15,3 +15,16 @@ const applyRulerInsetsToCanvasSize = ({ rulersAreVisible, size, }) => {
     };
 };
 exports.applyRulerInsetsToCanvasSize = applyRulerInsetsToCanvasSize;
+const getRulerCanvasSize = ({ orientation, size, }) => {
+    if (orientation === 'vertical') {
+        return {
+            height: size.height,
+            width: editor_rulers_1.RULER_WIDTH,
+        };
+    }
+    return {
+        height: editor_rulers_1.RULER_WIDTH,
+        width: size.width,
+    };
+};
+exports.getRulerCanvasSize = getRulerCanvasSize;

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

@@ -25,45 +25,123 @@ const compareNonceHistories = (a, b) => {
     return aLatestEpoch - bLatestEpoch;
 };
 exports.compareNonceHistories = compareNonceHistories;
+// Compare two histories, each pre-collapsed to parallel arrays of epochs and
+// nonces sorted by descending epoch, without rebuilding a Map per comparison.
+// Equivalent to getSharedEpochOrder: both find the newest shared epoch and
+// compare its nonces.
+const sharedEpochOrderFromSorted = (aEpochs, aNonces, bEpochs, bNonces) => {
+    let i = 0;
+    let j = 0;
+    while (i < aEpochs.length && j < bEpochs.length) {
+        const ae = aEpochs[i];
+        const be = bEpochs[j];
+        if (ae === be) {
+            return aNonces[i] - bNonces[j];
+        }
+        if (ae > be) {
+            i++;
+        }
+        else {
+            j++;
+        }
+    }
+    return null;
+};
 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));
+    // Collapse each history once into epoch/nonce arrays sorted by descending
+    // epoch. `new Map(nonce)` keeps the last value per duplicated epoch, matching
+    // getSharedEpochOrder. This removes the per-pair Map/Set construction the
+    // pairwise loop below would otherwise repeat O(n^2) times.
+    const epochsOf = new Array(n);
+    const noncesOf = new Array(n);
+    for (let i = 0; i < n; i++) {
+        const map = new Map(items[i].nonce);
+        const epochs = [...map.keys()].sort((x, y) => y - x);
+        epochsOf[i] = epochs;
+        noncesOf[i] = epochs.map((e) => map.get(e));
+    }
+    // Pairwise "strictly before" relation, stored as bitsets: `before[i]` has
+    // bit j set when i must come before j, `known[i]` has bit j set when the
+    // pair (i, j) is directly determined by a shared epoch. Bitsets let the
+    // transitive closure below combine 32 relationships per word.
+    const words = (n + 31) >> 5;
+    const before = new Uint32Array(n * words);
+    const known = new Uint32Array(n * words);
+    // Direct comparison sign per ordered pair; only read where `known` is set.
+    const sign = new Int8Array(n * n);
     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;
+            const cmp = sharedEpochOrderFromSorted(epochsOf[i], noncesOf[i], epochsOf[j], noncesOf[j]);
+            if (cmp === null) {
+                continue;
+            }
+            known[i * words + (j >> 5)] |= 1 << (j & 31);
+            known[j * words + (i >> 5)] |= 1 << (i & 31);
+            sign[i * n + j] = cmp < 0 ? -1 : cmp > 0 ? 1 : 0;
+            sign[j * n + i] = cmp < 0 ? 1 : cmp > 0 ? -1 : 0;
+            if (cmp < 0) {
+                before[i * words + (j >> 5)] |= 1 << (j & 31);
+            }
+            else if (cmp > 0) {
+                before[j * words + (i >> 5)] |= 1 << (i & 31);
+            }
         }
     }
-    // Compute transitive closure: if i < j and j < k, then i < k.
+    // Transitive closure: if i < k and k < j, then i < j. This is the same
+    // Floyd-Warshall relation as before, but the inner sweep is bitwise
+    // (`before[k] & ~known[i]` finds all reachable j at once). A newly derived
+    // edge is marked known immediately so the first path decides an otherwise
+    // undetermined pair — preserving behavior on the inputs where the pairwise
+    // comparison is intentionally non-transitive.
     for (let k = 0; k < n; k++) {
+        const kBase = k * words;
+        const kWord = k >> 5;
+        const kBit = 1 << (k & 31);
         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;
+            if (i === k) {
+                continue;
+            }
+            const iBase = i * words;
+            if ((before[iBase + kWord] & kBit) === 0) {
+                continue; // i is not before k, so k adds nothing for i
+            }
+            for (let w = 0; w < words; w++) {
+                const add = before[kBase + w] & ~known[iBase + w];
+                if (add === 0) {
+                    continue;
+                }
+                before[iBase + w] |= add;
+                known[iBase + w] |= add;
+                // Set the mirror relationship (j after i) for each newly known pair.
+                let bits = add;
+                while (bits !== 0) {
+                    const lowest = bits & -bits;
+                    const j = (w << 5) + (31 - Math.clz32(lowest));
+                    sign[i * n + j] = -1;
+                    known[j * words + (i >> 5)] |= 1 << (i & 31);
+                    sign[j * n + i] = 1;
+                    bits ^= lowest;
                 }
             }
         }
     }
-    // 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;
+        if ((known[ai * words + (bi >> 5)] >> (bi & 31)) & 1) {
+            return sign[ai * n + bi];
+        }
+        if ((before[ai * words + (bi >> 5)] >> (bi & 31)) & 1) {
+            return -1;
+        }
+        if ((before[bi * words + (ai >> 5)] >> (ai & 31)) & 1) {
+            return 1;
         }
         // No transitive relationship — lower latest epoch first
         return a.nonce[a.nonce.length - 1][0] - b.nonce[b.nonce.length - 1][0];

package/dist/helpers/use-image-metadata.d.ts

@@ -3,6 +3,7 @@ export type ImageMetadata = {
     readonly width: number;
     readonly height: number;
 };
+export declare const getCachedImageMetadata: (src: string) => ImageMetadata | null;
 export declare const getImageMetadataFromData: (data: Uint8Array<ArrayBufferLike>) => ImageMetadata | null;
 export declare const getImageMetadata: (src: string) => Promise<ImageMetadata | null>;
 export declare const useImageMetadata: (src: string | null) => ImageMetadata | null;

package/dist/helpers/use-image-metadata.js

@@ -1,10 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useImageMetadata = exports.getImageMetadata = exports.getImageMetadataFromData = void 0;
+exports.useImageMetadata = exports.getImageMetadata = exports.getImageMetadataFromData = exports.getCachedImageMetadata = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const cache = new Map();
 const pendingRequests = new Map();
+const getCachedImageMetadata = (src) => {
+    var _a;
+    return (_a = cache.get(src)) !== null && _a !== void 0 ? _a : null;
+};
+exports.getCachedImageMetadata = getCachedImageMetadata;
 const formatImageType = (fileType) => {
     if (fileType === 'webp') {
         return 'WebP';
@@ -58,11 +63,9 @@ const getImageMetadata = (src) => {
 };
 exports.getImageMetadata = getImageMetadata;
 const useImageMetadata = (src) => {
-    var _a;
-    const [imageMetadata, setImageMetadata] = (0, react_1.useState)(src ? ((_a = cache.get(src)) !== null && _a !== void 0 ? _a : null) : null);
+    const [imageMetadata, setImageMetadata] = (0, react_1.useState)(src ? (0, exports.getCachedImageMetadata)(src) : null);
     (0, react_1.useEffect)(() => {
-        var _a;
-        const cached = src ? ((_a = cache.get(src)) !== null && _a !== void 0 ? _a : null) : null;
+        const cached = src ? (0, exports.getCachedImageMetadata)(src) : null;
         setImageMetadata(cached);
         if (!src || cached) {
             return;

package/dist/helpers/use-keybinding.js

@@ -4,6 +4,7 @@ exports.useKeybinding = exports.areKeyboardShortcutsDisabled = void 0;
 const react_1 = require("react");
 const keybindings_1 = require("../state/keybindings");
 const z_index_1 = require("../state/z-index");
+const is_mac_1 = require("./is-mac");
 const studio_runtime_config_1 = require("./studio-runtime-config");
 if (!(0, studio_runtime_config_1.getStudioKeyboardShortcutsEnabled)()) {
     // eslint-disable-next-line no-console
@@ -29,9 +30,7 @@ const useKeybinding = () => {
             };
         }
         const listener = (e) => {
-            const commandKey = window.navigator.platform.startsWith('Mac')
-                ? e.metaKey
-                : e.ctrlKey;
+            const commandKey = is_mac_1.isMac ? e.metaKey : e.ctrlKey;
             // Apparently, e.key can be undefined in Edge:
             // https://github.com/remotion-dev/remotion/issues/5637
             if (!e.key) {

package/dist/helpers/use-media-metadata.d.ts

@@ -12,5 +12,6 @@ export type MediaMetadata = {
     hasVideoTrack: boolean | null;
     hasAudioTrack: boolean | null;
 };
+export declare const getCachedMediaMetadata: (src: string) => MediaMetadata | null;
 export declare const getMediaMetadata: (src: string) => Promise<MediaMetadata | null>;
 export declare const useMediaMetadata: (src: string | null) => MediaMetadata | null;

package/dist/helpers/use-media-metadata.js

@@ -1,12 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMediaMetadata = exports.getMediaMetadata = void 0;
+exports.useMediaMetadata = exports.getMediaMetadata = exports.getCachedMediaMetadata = void 0;
 const media_utils_1 = require("@remotion/media-utils");
 const mediabunny_1 = require("mediabunny");
 const react_1 = require("react");
 const get_duration_or_compute_1 = require("./get-duration-or-compute");
 const cache = new Map();
 const pendingRequests = new Map();
+const getCachedMediaMetadata = (src) => {
+    var _a;
+    return (_a = cache.get(src)) !== null && _a !== void 0 ? _a : null;
+};
+exports.getCachedMediaMetadata = getCachedMediaMetadata;
 const safeCall = async (fn) => {
     try {
         return await fn();
@@ -116,11 +121,9 @@ const getMediaMetadata = (src) => {
 };
 exports.getMediaMetadata = getMediaMetadata;
 const useMediaMetadata = (src) => {
-    var _a;
-    const [mediaMetadata, setMediaMetadata] = (0, react_1.useState)(src ? ((_a = cache.get(src)) !== null && _a !== void 0 ? _a : null) : null);
+    const [mediaMetadata, setMediaMetadata] = (0, react_1.useState)(src ? (0, exports.getCachedMediaMetadata)(src) : null);
     (0, react_1.useEffect)(() => {
-        var _a;
-        const cached = src ? ((_a = cache.get(src)) !== null && _a !== void 0 ? _a : null) : null;
+        const cached = src ? (0, exports.getCachedMediaMetadata)(src) : null;
         setMediaMetadata(cached);
         if (!src || cached) {
             return;

package/dist/helpers/use-menu-structure.js

@@ -39,6 +39,13 @@ const openExternal = (link) => {
 };
 const rotate = {
     transform: `rotate(90deg)`,
+    color: 'inherit',
+};
+const iconContainer = {
+    color: 'inherit',
+};
+const iconPath = {
+    color: 'inherit',
 };
 const ICON_SIZE = 16;
 const getFileMenu = ({ readOnlyStudio, closeMenu, previewServerState, setSelectedModal, }) => {
@@ -235,7 +242,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
         let struct = [
             {
                 id: 'remotion',
-                label: (jsx_runtime_1.jsx(layout_1.Row, { align: "center", justify: "center", children: jsx_runtime_1.jsx("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate, children: jsx_runtime_1.jsx("path", { fill: colors_1.WHITE_HEX, stroke: colors_1.WHITE_HEX, strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }) }) })),
+                label: (jsx_runtime_1.jsx(layout_1.Row, { align: "center", justify: "center", style: iconContainer, children: jsx_runtime_1.jsx("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, stroke: colors_1.CURRENT_COLOR, style: iconPath, strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }) }) })),
                 leaveLeftPadding: false,
                 items: [
                     {
@@ -574,6 +581,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                                 type: 'quick-switcher',
                                 mode: 'compositions',
                                 invocationTimestamp: Date.now(),
+                                assetSelection: null,
                             });
                         },
                         type: 'item',
@@ -762,6 +770,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                                 type: 'quick-switcher',
                                 mode: 'docs',
                                 invocationTimestamp: Date.now(),
+                                assetSelection: null,
                             });
                         },
                         keyHint: '?',

package/dist/icons/caret.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export declare const CaretRight: () => import("react/jsx-runtime").JSX.Element;
 export declare const CaretDown: React.FC<{
+    readonly color?: string;
     readonly small?: boolean;
 }>;
 export declare const AngleDown: React.FC<{

package/dist/icons/caret.js

@@ -18,8 +18,8 @@ const angleDown = {
 };
 const CaretRight = () => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 192 512", style: caret, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z" }) }));
 exports.CaretRight = CaretRight;
-const CaretDown = ({ small = false, }) => {
-    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 320 512", style: small ? caretDownSmall : caretDown, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" }) }));
+const CaretDown = ({ color = colors_1.CURRENT_COLOR, small = false }) => {
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 320 512", style: small ? caretDownSmall : caretDown, children: jsx_runtime_1.jsx("path", { fill: color, d: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" }) }));
 };
 exports.CaretDown = CaretDown;
 const AngleDown = ({ down }) => {

package/dist/icons/pen.d.ts

@@ -0,0 +1,5 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const PenIcon: React.FC<SVGProps<SVGSVGElement> & {
+    readonly color: string;
+}>;

package/dist/icons/pen.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PenIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PenIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...props, children: jsx_runtime_1.jsx("path", { fill: color, d: "M18.7 2.3a1 1 0 0 0-1.4 0L5.2 14.4a1 1 0 0 0-.26.46l-1.4 4.95a.5.5 0 0 0 .62.62l4.95-1.4a1 1 0 0 0 .46-.26L21.7 6.7a1 1 0 0 0 0-1.4l-3-3Zm-10.33 14.9-2.4.68.68-2.4L15.5 6.62l1.73 1.73-8.86 8.85Zm10.28-10.27L16.92 5.2 18 4.12l1.73 1.73-1.08 1.08Z" }) }));
+};
+exports.PenIcon = PenIcon;