@remotion/studio 4.0.516 → 4.0.518

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

@@ -1,19 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTimelineSequenceSortKey = void 0;
-const getTimelineSequenceSortKey = (track, tracks, nonceRanks) => {
-    var _a;
-    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;
-    }
-    const parent = tracks.find((t) => t.sequence.id === track.sequence.parent);
-    if (!parent) {
-        // Due to effects and conditional `showInTimeline`, a parent
-        // may not exist in the `allTracks` array.
-        return id;
-    }
-    return `${(0, exports.getTimelineSequenceSortKey)(parent, tracks, nonceRanks)}-${id}`;
-};
-exports.getTimelineSequenceSortKey = getTimelineSequenceSortKey;
+const canvas_1 = require("@remotion/canvas");
+Object.defineProperty(exports, "getTimelineSequenceSortKey", { enumerable: true, get: function () { return canvas_1.getTimelineSequenceSortKey; } });

package/dist/helpers/hoverable.d.ts

@@ -3,6 +3,7 @@ export declare const HOVERABLE_CLASS_NAME = "__remotion-hoverable";
 export declare const HOVER_GROUP_CLASS_NAME = "__remotion-hover-group";
 export declare const HOVER_GROUP_REVEAL_CLASS_NAME = "__remotion-hover-group-reveal";
 export declare const FOCUS_VISIBLE_ONLY_CLASS_NAME = "__remotion-focus-visible-only";
+export declare const NO_HOVER_BACKGROUND_STYLE: React.CSSProperties;
 export declare const hoverableStyle: ({ idleBackground, hoverBackground, idleColor, hoverColor, }: {
     idleBackground: string;
     hoverBackground: string;

package/dist/helpers/hoverable.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeHoverableCSS = exports.hoverableStyle = exports.FOCUS_VISIBLE_ONLY_CLASS_NAME = exports.HOVER_GROUP_REVEAL_CLASS_NAME = exports.HOVER_GROUP_CLASS_NAME = exports.HOVERABLE_CLASS_NAME = void 0;
+exports.makeHoverableCSS = exports.hoverableStyle = exports.NO_HOVER_BACKGROUND_STYLE = exports.FOCUS_VISIBLE_ONLY_CLASS_NAME = exports.HOVER_GROUP_REVEAL_CLASS_NAME = exports.HOVER_GROUP_CLASS_NAME = exports.HOVERABLE_CLASS_NAME = void 0;
 const colors_1 = require("./colors");
 // Purely visual hover styling must be driven by CSS `:hover` rather than
 // React state: When the Studio runs in an <iframe> (like in Browser Studio),
@@ -16,6 +16,9 @@ const BG_VARIABLE = '--remotion-hoverable-bg';
 const HOVER_BG_VARIABLE = '--remotion-hoverable-hover-bg';
 const COLOR_VARIABLE = '--remotion-hoverable-color';
 const HOVER_COLOR_VARIABLE = '--remotion-hoverable-hover-color';
+exports.NO_HOVER_BACKGROUND_STYLE = {
+    [HOVER_BG_VARIABLE]: colors_1.TRANSPARENT,
+};
 // To disable the hover effect (e.g. for a disabled control), pass the idle
 // values as the hover values.
 const hoverableStyle = ({ idleBackground, hoverBackground, idleColor, hoverColor, }) => {

package/dist/helpers/is-current-selected-still.js

@@ -14,13 +14,15 @@ const useIsStill = () => {
 exports.useIsStill = useIsStill;
 const useIsVideoComposition = () => {
     const isStill = (0, exports.useIsStill)();
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { canvasContent, currentAssetMetadata } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     if (canvasContent === null) {
         return false;
     }
     if (isStill) {
         return false;
     }
-    return canvasContent.type === 'composition';
+    return (canvasContent.type === 'composition' ||
+        (canvasContent.type === 'asset' &&
+            (currentAssetMetadata === null || currentAssetMetadata === void 0 ? void 0 : currentAssetMetadata.asset) === canvasContent.asset));
 };
 exports.useIsVideoComposition = useIsVideoComposition;

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

@@ -1,5 +1 @@
-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[];
+export { compareNonceHistories, sortItemsByNonceHistory } from '@remotion/canvas';

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

@@ -1,151 +1,6 @@
 "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;
-// 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();
-    }
-    // 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 = 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);
-            }
-        }
-    }
-    // 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++) {
-            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;
-                }
-            }
-        }
-    }
-    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);
-        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];
-    });
-    return result;
-};
-exports.sortItemsByNonceHistory = sortItemsByNonceHistory;
+const canvas_1 = require("@remotion/canvas");
+Object.defineProperty(exports, "compareNonceHistories", { enumerable: true, get: function () { return canvas_1.compareNonceHistories; } });
+Object.defineProperty(exports, "sortItemsByNonceHistory", { enumerable: true, get: function () { return canvas_1.sortItemsByNonceHistory; } });

package/dist/helpers/timeline-node-path-key.d.ts

@@ -1,4 +1,3 @@
-import type { SequencePropsSubscriptionKey } from 'remotion';
 import type { SequenceNodePathInfo } from './get-timeline-sequence-sort-key';
-export declare const timelineSequenceNodePathToKey: (key: SequencePropsSubscriptionKey) => string;
+export { timelineSequenceNodePathToKey } from '@remotion/canvas';
 export declare const timelineNodePathInfoToKey: (info: SequenceNodePathInfo) => string;

package/dist/helpers/timeline-node-path-key.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.timelineNodePathInfoToKey = exports.timelineSequenceNodePathToKey = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
-const timelineSequenceNodePathToKey = (key) => `${key.absolutePath}:${JSON.stringify(key.nodePath)}`;
-exports.timelineSequenceNodePathToKey = timelineSequenceNodePathToKey;
+const canvas_1 = require("@remotion/canvas");
+Object.defineProperty(exports, "timelineSequenceNodePathToKey", { enumerable: true, get: function () { return canvas_1.timelineSequenceNodePathToKey; } });
 const timelineNodePathInfoToKey = (info) => [
     (0, studio_shared_1.stringifySequenceExpandedRowKey)(info.sequenceSubscriptionKey),
     info.auxiliaryKeys.join('.'),

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

@@ -20,6 +20,7 @@ const Checkmark_1 = require("../icons/Checkmark");
 const canvas_ref_1 = require("../state/canvas-ref");
 const checkerboard_1 = require("../state/checkerboard");
 const editor_guides_1 = require("../state/editor-guides");
+const editor_pixel_grid_1 = require("../state/editor-pixel-grid");
 const editor_rulers_1 = require("../state/editor-rulers");
 const editor_snapping_1 = require("../state/editor-snapping");
 const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
@@ -234,6 +235,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     const { editorZoomGestures, setEditorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
+    const { editorShowPixelGrid, setEditorShowPixelGrid } = (0, react_1.useContext)(editor_pixel_grid_1.EditorShowPixelGridContext);
     const { editorShowRulers, setEditorShowRulers } = (0, react_1.useContext)(editor_rulers_1.EditorShowRulersContext);
     const { editorShowGuides, setEditorShowGuides } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
     const { editorSnapping, setEditorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
@@ -423,6 +425,22 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                             ? 'Disable Zoom and Pan Gestures'
                             : 'Enable Zoom and Pan Gestures',
                     },
+                    {
+                        id: 'pixel-grid',
+                        keyHint: null,
+                        label: 'Pixel Grid',
+                        onClick: () => {
+                            closeMenu();
+                            setEditorShowPixelGrid((c) => !c);
+                        },
+                        type: 'item',
+                        value: 'pixel-grid',
+                        leftItem: editorShowPixelGrid ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+                        subMenu: null,
+                        quickSwitcherLabel: editorShowPixelGrid
+                            ? 'Hide Pixel Grid'
+                            : 'Show Pixel Grid',
+                    },
                     {
                         id: 'show-rulers',
                         keyHint: null,
@@ -990,6 +1008,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
         currentComposition,
         resolvedCompositionLocation,
         editorZoomGestures,
+        editorShowPixelGrid,
         editorShowRulers,
         editorShowGuides,
         editorSnapping,
@@ -1007,6 +1026,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
         size.size,
         setSize,
         setEditorZoomGestures,
+        setEditorShowPixelGrid,
         setEditorShowRulers,
         setEditorShowGuides,
         setEditorSnapping,

package/dist/icons/enter.d.ts

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

package/dist/icons/enter.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EnterIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Font Awesome Pro v7.3.1, Copyright 2026 Fonticons, Inc.
+// https://fontawesome.com/license (Commercial License)
+const EnterIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", children: jsx_runtime_1.jsx("path", { fill: color, d: "M544 144C544 135.2 551.2 128 560 128C568.8 128 576 135.2 576 144L576 240C576 293 533 336 480 336L118.6 336L235.3 452.7C241.5 458.9 241.5 469.1 235.3 475.3C229.1 481.5 218.9 481.5 212.7 475.3L68.7 331.3C65.7 328.3 64 324.2 64 320C64 315.8 65.7 311.7 68.7 308.7L212.7 164.7C218.9 158.5 229.1 158.5 235.3 164.7C241.5 170.9 241.5 181.1 235.3 187.3L118.6 304L480 304C515.3 304 544 275.3 544 240L544 144z" }) }));
+};
+exports.EnterIcon = EnterIcon;

package/dist/state/editor-pixel-grid.d.ts

@@ -0,0 +1,8 @@
+type State = {
+    editorShowPixelGrid: boolean;
+    setEditorShowPixelGrid: (cb: (prevState: boolean) => boolean) => void;
+};
+export declare const persistEditorShowPixelGridOption: (option: boolean) => void;
+export declare const loadEditorShowPixelGridOption: () => boolean;
+export declare const EditorShowPixelGridContext: import("react").Context<State>;
+export {};

package/dist/state/editor-pixel-grid.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorShowPixelGridContext = exports.loadEditorShowPixelGridOption = exports.persistEditorShowPixelGridOption = void 0;
+const react_1 = require("react");
+const key = 'remotion.editorShowPixelGrid';
+const persistEditorShowPixelGridOption = (option) => {
+    localStorage.setItem(key, String(option));
+};
+exports.persistEditorShowPixelGridOption = persistEditorShowPixelGridOption;
+const loadEditorShowPixelGridOption = () => {
+    const item = localStorage.getItem(key);
+    return item !== 'false';
+};
+exports.loadEditorShowPixelGridOption = loadEditorShowPixelGridOption;
+exports.EditorShowPixelGridContext = (0, react_1.createContext)({
+    editorShowPixelGrid: true,
+    setEditorShowPixelGrid: () => undefined,
+});

package/dist/state/modals.d.ts

@@ -181,6 +181,10 @@ export type ModalState = {
         excludeCompositionId: string;
         onSelected: (composition: _InternalTypes['AnyComposition']) => void;
     } | null;
+} | {
+    type: 'element-library';
+    name: string;
+    url: string;
 } | AddEffectModalState | ConfirmationDialogState | SvgImportDialogState;
 export type SetSelectedModalContextType = {
     setSelectedModal: React.Dispatch<React.SetStateAction<ModalState | null>>;

package/dist/state/playbackrate.d.ts

@@ -1,2 +1,3 @@
+export declare const commonPlaybackRates: number[];
 export declare const persistPlaybackRate: (option: number) => void;
 export declare const loadPlaybackRate: () => number;

package/dist/state/playbackrate.js

@@ -1,7 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.loadPlaybackRate = exports.persistPlaybackRate = void 0;
+exports.loadPlaybackRate = exports.persistPlaybackRate = exports.commonPlaybackRates = void 0;
 const key = 'remotion.playbackrate';
+exports.commonPlaybackRates = [
+    -4, -2, -1, -0.5, -0.25, 0.25, 0.5, 1, 1.5, 2, 4,
+];
 const persistPlaybackRate = (option) => {
     localStorage.setItem(key, String(option));
 };

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.516",
+	"version": "4.0.518",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
@@ -25,17 +25,19 @@
 	},
 	"dependencies": {
 		"@tanstack/react-virtual": "3.14.9",
-		"@remotion/studio-protocol": "4.0.516",
+		"@remotion/canvas": "4.0.518",
+		"@remotion/studio-protocol": "4.0.518",
 		"semver": "7.5.3",
-		"remotion": "4.0.516",
-		"@remotion/captions": "4.0.516",
-		"@remotion/player": "4.0.516",
-		"@remotion/media-utils": "4.0.516",
-		"@remotion/renderer": "4.0.516",
-		"@remotion/web-renderer": "4.0.516",
-		"@remotion/studio-shared": "4.0.516",
-		"@remotion/timeline-utils": "4.0.516",
-		"@remotion/zod-types": "4.0.516",
+		"remotion": "4.0.518",
+		"@remotion/captions": "4.0.518",
+		"@remotion/media": "4.0.518",
+		"@remotion/player": "4.0.518",
+		"@remotion/media-utils": "4.0.518",
+		"@remotion/renderer": "4.0.518",
+		"@remotion/web-renderer": "4.0.518",
+		"@remotion/studio-shared": "4.0.518",
+		"@remotion/timeline-utils": "4.0.518",
+		"@remotion/zod-types": "4.0.518",
 		"@jridgewell/trace-mapping": "0.3.31",
 		"mediabunny": "1.55.1",
 		"memfs": "3.4.3",
@@ -46,7 +48,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.516",
+		"@remotion/eslint-config-internal": "4.0.518",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},

package/dist/components/selected-outline-order.d.ts

@@ -1,12 +0,0 @@
-import type { SelectedOutline } from './selected-outline-geometry';
-import type { SelectedOutlineLayoutTarget } from './selected-outline-types';
-type OutlineSequenceParent = {
-    readonly id: string;
-    readonly parent: string | null;
-};
-export declare const orderOutlinesForRendering: ({ outlines, sequences, targetsByKey, }: {
-    readonly outlines: readonly SelectedOutline[];
-    readonly sequences: readonly OutlineSequenceParent[];
-    readonly targetsByKey: ReadonlyMap<string, SelectedOutlineLayoutTarget>;
-}) => readonly SelectedOutline[];
-export {};