@remotion/studio 4.0.499 → 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-pk1zwsn1.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-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/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-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-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;

package/dist/state/modals.d.ts

@@ -4,6 +4,7 @@ import type { PackageManager, RenderDefaults } from '@remotion/studio-shared';
 import type { RenderStillOnWebImageFormat, WebRendererAudioCodec, WebRendererContainer, WebRendererHardwareAcceleration, WebRendererPageResponsiveness, WebRendererQuality, WebRendererVideoCodec } from '@remotion/web-renderer';
 import type React from 'react';
 import type { SequencePropsSubscriptionKey, _InternalTypes } from 'remotion';
+import type { StaticFile } from '../api/get-static-files';
 import type { CompType } from '../components/NewComposition/DuplicateComposition';
 import type { QuickSwitcherMode } from '../components/QuickSwitcher/NoResults';
 import type { RenderType } from '../components/RenderModal/RenderModalAdvanced';
@@ -159,6 +160,10 @@ export type ModalState = {
     type: 'quick-switcher';
     mode: QuickSwitcherMode;
     invocationTimestamp: number;
+    assetSelection: {
+        initialQuery: string;
+        onSelected: (asset: StaticFile) => void;
+    } | null;
 } | AddEffectModalState | ConfirmationDialogState | SvgImportDialogState;
 export type ModalContextType = {
     selectedModal: ModalState | null;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.499",
+	"version": "4.0.500",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
@@ -24,17 +24,17 @@
 		"react-dom": ">=16.8.0"
 	},
 	"dependencies": {
-		"@remotion/drag-and-drop": "4.0.499",
+		"@remotion/drag-and-drop": "4.0.500",
 		"semver": "7.5.3",
-		"remotion": "4.0.499",
-		"@remotion/canvas-capture": "4.0.499",
-		"@remotion/player": "4.0.499",
-		"@remotion/media-utils": "4.0.499",
-		"@remotion/renderer": "4.0.499",
-		"@remotion/web-renderer": "4.0.499",
-		"@remotion/studio-shared": "4.0.499",
-		"@remotion/timeline-utils": "4.0.499",
-		"@remotion/zod-types": "4.0.499",
+		"remotion": "4.0.500",
+		"@remotion/canvas-capture": "4.0.500",
+		"@remotion/player": "4.0.500",
+		"@remotion/media-utils": "4.0.500",
+		"@remotion/renderer": "4.0.500",
+		"@remotion/web-renderer": "4.0.500",
+		"@remotion/studio-shared": "4.0.500",
+		"@remotion/timeline-utils": "4.0.500",
+		"@remotion/zod-types": "4.0.500",
 		"@jridgewell/trace-mapping": "0.3.31",
 		"mediabunny": "1.50.8",
 		"memfs": "3.4.3",
@@ -45,7 +45,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.499",
+		"@remotion/eslint-config-internal": "4.0.500",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},

package/dist/helpers/get-timeline-sequence-hash.d.ts

@@ -1,6 +0,0 @@
-import type { TSequence } from 'remotion';
-export declare const getTimelineSequenceHash: (sequence: TSequence, allSequences: TSequence[], hashesUsedInRoot: {
-    [rootId: string]: string[];
-}, cache: {
-    [sequenceId: string]: string;
-}) => string;

package/dist/helpers/get-timeline-sequence-hash.js

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTimelineSequenceHash = void 0;
-// The goal for this function is to calculate an as unique as possible identifier
-// for a sequence based on it's properties. A sequence can be registered multiple times
-// from main preview and from thumbnails and we use this to deduplicate it.
-// This is why we don't use `id` properties as they will
-// differ as a hash.
-const getTimelineSequenceHash = (sequence, allSequences, hashesUsedInRoot, cache) => {
-    if (cache[sequence.id]) {
-        return cache[sequence.id];
-    }
-    const parent = allSequences.find((a) => a.id === sequence.parent);
-    const baseHash = [
-        parent
-            ? (0, exports.getTimelineSequenceHash)(parent, allSequences, hashesUsedInRoot, cache)
-            : null,
-        sequence.displayName,
-        sequence.duration,
-        sequence.from,
-        sequence.type,
-        sequence.type === 'audio' ? sequence.src : null,
-        sequence.type === 'audio' ? sequence.volume : null,
-        sequence.type === 'video' ? sequence.src : null,
-        sequence.type === 'video' ? sequence.volume : null,
-    ].join('-');
-    const actualHash = baseHash +
-        hashesUsedInRoot[sequence.rootId].filter((h) => h === baseHash).length;
-    hashesUsedInRoot[sequence.rootId].push(baseHash);
-    cache[sequence.id] = actualHash;
-    return actualHash;
-};
-exports.getTimelineSequenceHash = getTimelineSequenceHash;