@remotion/studio 4.0.516 → 4.0.517

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/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/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.517",
 	"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.517",
+		"@remotion/studio-protocol": "4.0.517",
 		"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.517",
+		"@remotion/captions": "4.0.517",
+		"@remotion/media": "4.0.517",
+		"@remotion/player": "4.0.517",
+		"@remotion/media-utils": "4.0.517",
+		"@remotion/renderer": "4.0.517",
+		"@remotion/web-renderer": "4.0.517",
+		"@remotion/studio-shared": "4.0.517",
+		"@remotion/timeline-utils": "4.0.517",
+		"@remotion/zod-types": "4.0.517",
 		"@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.517",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},