@remotion/studio 4.0.527 → 4.0.528

package/dist/helpers/studio-css-variables.js

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.studioCssVariables = void 0;
+// Injected in every Studio document, including standalone previews and cursors.
+// Zero specificity lets a theme override defaults regardless of injection order.
+exports.studioCssVariables = `
+:where(:root) {
+  --remotion-studio-black: black;
+  --remotion-studio-white: white;
+  --remotion-studio-red: red;
+  --remotion-studio-transparent: transparent;
+  --remotion-studio-current-color: currentColor;
+  --remotion-studio-background: rgb(31,36,40);
+  --remotion-studio-background-transparent: rgba(31,36,40, 0);
+  --remotion-studio-input-background: #2f363d;
+  --remotion-studio-light-color: #ddd;
+  --remotion-studio-light-text: #A6A7A9;
+  --remotion-studio-ruler-color: #808080;
+  --remotion-studio-white-alpha-05: rgba(255, 255, 255, 0.05);
+  --remotion-studio-white-alpha-06: rgba(255, 255, 255, 0.06);
+  --remotion-studio-white-alpha-08: rgba(255, 255, 255, 0.08);
+  --remotion-studio-white-alpha-10: rgba(255, 255, 255, 0.1);
+  --remotion-studio-white-alpha-12: rgba(255, 255, 255, 0.12);
+  --remotion-studio-white-alpha-15: rgba(255, 255, 255, 0.15);
+  --remotion-studio-white-alpha-20: rgba(255, 255, 255, 0.2);
+  --remotion-studio-white-alpha-25: rgba(255, 255, 255, 0.25);
+  --remotion-studio-white-alpha-30: rgba(255, 255, 255, 0.3);
+  --remotion-studio-white-alpha-35: rgba(255, 255, 255, 0.35);
+  --remotion-studio-white-alpha-40: rgba(255, 255, 255, 0.4);
+  --remotion-studio-white-alpha-45: rgba(255, 255, 255, 0.45);
+  --remotion-studio-white-alpha-50: rgba(255, 255, 255, 0.5);
+  --remotion-studio-white-alpha-60: rgba(255, 255, 255, 0.6);
+  --remotion-studio-white-alpha-70: rgba(255, 255, 255, 0.7);
+  --remotion-studio-white-alpha-72: rgba(255, 255, 255, 0.72);
+  --remotion-studio-white-alpha-80: rgba(255, 255, 255, 0.8);
+  --remotion-studio-white-alpha-90: rgba(255, 255, 255, 0.9);
+  --remotion-studio-black-alpha-10: rgba(0, 0, 0, 0.1);
+  --remotion-studio-black-alpha-28: rgba(0, 0, 0, 0.28);
+  --remotion-studio-black-alpha-30: rgba(0, 0, 0, 0.3);
+  --remotion-studio-black-alpha-40: rgba(0, 0, 0, 0.4);
+  --remotion-studio-black-alpha-50: rgba(0, 0, 0, 0.5);
+  --remotion-studio-black-alpha-60: rgba(0, 0, 0, 0.6);
+  --remotion-studio-black-alpha-80: rgba(0, 0, 0, 0.8);
+  --remotion-studio-black-alpha-85: rgba(0, 0, 0, 0.85);
+  --remotion-studio-black-alpha-90: rgba(0, 0, 0, 0.9);
+  --remotion-studio-fail-color: #ff3232;
+  --remotion-studio-warning-color: #f1c40f;
+  --remotion-studio-blue: #0b84f3;
+  --remotion-studio-blue-hovered: #4da3f7;
+  --remotion-studio-blue-disabled: #284f73;
+  --remotion-studio-unselected-guide: #7e1219;
+  --remotion-studio-selected-guide: #d22d3a;
+  --remotion-studio-line-color: #363A3E;
+  --remotion-studio-timeline-track-separator: #13161B;
+  --remotion-studio-light-gray: #ccc;
+  --remotion-studio-keyboard-shortcut-key-color: #eee;
+  --remotion-studio-notification-background: #111111;
+  --remotion-studio-render-status-background: #222;
+  --remotion-studio-error-code-frame-background: #070707;
+  --remotion-studio-error-code-frame-line-background: #121212;
+  --remotion-studio-error-link-color: #58a6ff;
+  --remotion-studio-info-blue: #60a5fa;
+  --remotion-studio-server-disconnected-background: #e74c3c;
+  --remotion-studio-timeline-background-color: #15181B;
+  --remotion-studio-timeline-negative-start-background-color: #2C2F32;
+  --remotion-studio-timeline-negative-start-border-color: #414446;
+  --remotion-studio-timeline-selected-background-color: #3B3F42;
+  --remotion-studio-timeline-selected-label-background-color: #B0B0B0;
+  --remotion-studio-timeline-blue: #0b84ff;
+  --remotion-studio-timeline-playhead-color: #f02c00;
+  --remotion-studio-timeline-drop-blue-alpha-12: rgba(0, 155, 255, 0.12);
+  --remotion-studio-timeline-drop-blue-alpha-16: rgba(0, 155, 255, 0.16);
+  --remotion-studio-timeline-drop-blue-alpha-75: rgba(0, 155, 255, 0.75);
+  --remotion-studio-timeline-marquee-blue-alpha-16: rgba(70, 130, 255, 0.16);
+  --remotion-studio-timeline-marquee-blue-alpha-75: rgba(70, 130, 255, 0.75);
+  --remotion-studio-easing-selected-background: rgba(11, 132, 243, 0.18);
+  --remotion-studio-info-blue-background: rgba(59, 130, 246, 0.15);
+  --remotion-studio-color-picker-checker-background-color: #444;
+  --remotion-studio-color-picker-hue-gradient: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+  --remotion-studio-timeline-audio-gradient: linear-gradient(rgb(16 171 58), rgb(43 165 63) 60%);
+  --remotion-studio-timeline-video-gradient: linear-gradient(to top, #8e44ad, #9b59b6);
+  --remotion-studio-focus-color: #555;
+  --remotion-studio-color-picker-checker-color: #888;
+  --remotion-studio-info-blue-border-color: rgba(59, 130, 246, 0.4);
+  --remotion-studio-black-alpha-22: rgba(0, 0, 0, 0.22);
+  --remotion-studio-font-family-error-color: #ff8a8a;
+  --remotion-studio-selected-outline-snap-color: #ff00ff;
+  --remotion-studio-prism-text-color: #d4d4d4;
+  --remotion-studio-prism-selection-background: #264f78;
+  --remotion-studio-prism-background: #1e1e1e;
+  --remotion-studio-prism-inline-color: #db4c69;
+  --remotion-studio-prism-keyword-color: #569cd6;
+  --remotion-studio-prism-variable-color: #9cdcfe;
+  --remotion-studio-prism-comment-color: #6a9955;
+  --remotion-studio-prism-number-color: #b5cea8;
+  --remotion-studio-prism-string-color: #ce9178;
+  --remotion-studio-prism-control-flow-color: #c586c0;
+  --remotion-studio-prism-function-color: #dcdcaa;
+  --remotion-studio-prism-regex-color: #d16969;
+  --remotion-studio-prism-class-name-color: #4ec9b0;
+  --remotion-studio-prism-selector-color: #d7ba7d;
+  --remotion-studio-prism-line-highlight-background: #f7ebc6;
+  --remotion-studio-prism-line-highlight-border-color: #f7d87c;
+}
+`;

package/dist/helpers/studio-pixel-ratio.d.ts

@@ -0,0 +1 @@
+export declare const getStudioPixelRatio: () => number;

package/dist/helpers/studio-pixel-ratio.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStudioPixelRatio = void 0;
+// Set this to a number temporarily to increase Studio canvas backing resolution.
+const OVERRIDE_PIXEL_RATIO = null;
+const getStudioPixelRatio = () => OVERRIDE_PIXEL_RATIO !== null && OVERRIDE_PIXEL_RATIO !== void 0 ? OVERRIDE_PIXEL_RATIO : window.devicePixelRatio;
+exports.getStudioPixelRatio = getStudioPixelRatio;

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

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

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

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.timelineNodePathInfoToKey = exports.timelineSequenceNodePathToKey = void 0;
-const studio_shared_1 = require("@remotion/studio-shared");
 const canvas_1 = require("@remotion/canvas");
-Object.defineProperty(exports, "timelineSequenceNodePathToKey", { enumerable: true, get: function () { return canvas_1.timelineSequenceNodePathToKey; } });
+const studio_shared_1 = require("@remotion/studio-shared");
+({ timelineSequenceNodePathToKey: exports.timelineSequenceNodePathToKey } = canvas_1.CanvasInternals);
 const timelineNodePathInfoToKey = (info) => [
     (0, studio_shared_1.stringifySequenceExpandedRowKey)(info.sequenceSubscriptionKey),
     info.auxiliaryKeys.join('.'),

package/dist/helpers/use-runtime-values.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRuntimeValueSnapshots = exports.useRuntimeValueSelector = exports.useRuntimeStoreValue = exports.useRuntimeValue = exports.useRuntimeValues = void 0;
+const canvas_1 = require("@remotion/canvas");
 const react_1 = require("react");
 const use_sync_external_store_1 = require("./use-sync-external-store");
 const EMPTY_RUNTIME_VALUES = {};
@@ -51,31 +52,4 @@ const useRuntimeValueSelector = ({ controls, selector, isEqual = Object.is, }) =
     return (0, use_sync_external_store_1.useSyncExternalStore)(selectedStore.subscribe, selectedStore.getSnapshot, selectedStore.getSnapshot);
 };
 exports.useRuntimeValueSelector = useRuntimeValueSelector;
-const useRuntimeValueSnapshots = (controls) => {
-    const stores = (0, react_1.useMemo)(() => controls.map((control) => control.runtimeValues), [controls]);
-    const aggregateStore = (0, react_1.useMemo)(() => {
-        let lastSnapshots = stores.map((store) => store.getSnapshot());
-        const getSnapshot = () => {
-            const nextSnapshots = stores.map((store) => store.getSnapshot());
-            if (nextSnapshots.length === lastSnapshots.length &&
-                nextSnapshots.every((snapshot, index) => snapshot === lastSnapshots[index])) {
-                return lastSnapshots;
-            }
-            lastSnapshots = nextSnapshots;
-            return lastSnapshots;
-        };
-        return {
-            getSnapshot,
-            subscribe: (listener) => {
-                const unsubscribers = stores.map((store) => store.subscribe(listener));
-                return () => {
-                    for (const unsubscribe of unsubscribers) {
-                        unsubscribe();
-                    }
-                };
-            },
-        };
-    }, [stores]);
-    return (0, use_sync_external_store_1.useSyncExternalStore)(aggregateStore.subscribe, aggregateStore.getSnapshot, aggregateStore.getSnapshot);
-};
-exports.useRuntimeValueSnapshots = useRuntimeValueSnapshots;
+({ useCanvasRuntimeValueSnapshots: exports.useRuntimeValueSnapshots } = canvas_1.CanvasInternals);

package/dist/hot-middleware-client/client.js

@@ -5,13 +5,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.enableHotMiddleware = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const error_origin_1 = require("../error-overlay/error-origin");
-const colors_1 = require("../helpers/colors");
 const preview_server_events_1 = require("../helpers/preview-server-events");
 const process_update_1 = require("./process-update");
+// DevTools console styles cannot inherit CSS variables from the page.
+const HOT_MIDDLEWARE_ERROR_STYLE = 'color: #ff0000;';
+const HOT_MIDDLEWARE_WARNING_STYLE = 'color: #999933;';
 function createReporter() {
     const styles = {
-        errors: colors_1.HOT_MIDDLEWARE_ERROR_STYLE,
-        warnings: colors_1.HOT_MIDDLEWARE_WARNING_STYLE,
+        errors: HOT_MIDDLEWARE_ERROR_STYLE,
+        warnings: HOT_MIDDLEWARE_WARNING_STYLE,
     };
     let previousProblems = null;
     function log(type, obj) {

package/dist/icons/align-center-horizontal.js

@@ -2,9 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlignCenterHorizontalIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
 const AlignCenterHorizontalIcon = (props) => {
     var _a;
-    const color = (_a = props.color) !== null && _a !== void 0 ? _a : 'currentColor';
+    const color = (_a = props.color) !== null && _a !== void 0 ? _a : colors_1.CURRENT_COLOR;
     return (jsx_runtime_1.jsxs("svg", { ...props, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
             jsx_runtime_1.jsx("path", { d: "M8 2V14", stroke: color, strokeLinecap: "square" }), jsx_runtime_1.jsx("line", { x1: "3", y1: "6", x2: "12", y2: "6", stroke: color, strokeWidth: "2" }), jsx_runtime_1.jsx("line", { x1: "4", y1: "10", x2: "11", y2: "10", stroke: color, strokeWidth: "2" })
         ] }));

package/dist/icons/align-left.js

@@ -2,9 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlignLeftIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
 const AlignLeftIcon = (props) => {
     var _a;
-    const color = (_a = props.color) !== null && _a !== void 0 ? _a : 'currentColor';
+    const color = (_a = props.color) !== null && _a !== void 0 ? _a : colors_1.CURRENT_COLOR;
     return (jsx_runtime_1.jsxs("svg", { ...props, viewBox: "0 0 16 16", fill: "none", children: [
             jsx_runtime_1.jsx("path", { d: "M2 2L2 14", stroke: color, strokeLinecap: "square" }), jsx_runtime_1.jsx("line", { x1: "4", y1: "6", x2: "13", y2: "6", stroke: color, strokeWidth: "2" }), jsx_runtime_1.jsx("line", { x1: "4", y1: "10", x2: "11", y2: "10", stroke: color, strokeWidth: "2" })
         ] }));

package/dist/icons/align-right.js

@@ -2,9 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlignRightIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
 const AlignRightIcon = (props) => {
     var _a;
-    const color = (_a = props.color) !== null && _a !== void 0 ? _a : 'currentColor';
+    const color = (_a = props.color) !== null && _a !== void 0 ? _a : colors_1.CURRENT_COLOR;
     return (jsx_runtime_1.jsxs("svg", { ...props, viewBox: "0 0 16 16", fill: "none", children: [
             jsx_runtime_1.jsx("path", { d: "M14 2V14", stroke: color, strokeLinecap: "square" }), jsx_runtime_1.jsx("line", { x1: "3", y1: "6", x2: "12", y2: "6", stroke: color, strokeWidth: "2" }), jsx_runtime_1.jsx("line", { x1: "5", y1: "10", x2: "12", y2: "10", stroke: color, strokeWidth: "2" })
         ] }));

package/dist/icons/{separation.d.ts → background-removal.d.ts}

@@ -1,4 +1,4 @@
 import type { SVGProps } from 'react';
-export declare const SeparationIcon: ({ color, ...props }: SVGProps<SVGSVGElement> & {
+export declare const BackgroundRemovalIcon: ({ color, ...props }: SVGProps<SVGSVGElement> & {
     readonly color?: string | undefined;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/background-removal.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BackgroundRemovalIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+// Font Awesome Pro v7.3.1, Copyright 2026 Fonticons, Inc.
+// https://fontawesome.com/license
+const BackgroundRemovalIcon = ({ color, ...props }) => (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", ...props, children: jsx_runtime_1.jsx("path", { fill: color !== null && color !== void 0 ? color : colors_1.CURRENT_COLOR_LOWERCASE, d: "M128 64C92.7 64 64 92.7 64 128L64 208C64 216.8 71.2 224 80 224C88.8 224 96 216.8 96 208L96 128C96 110.3 110.3 96 128 96L208 96C216.8 96 224 88.8 224 80C224 71.2 216.8 64 208 64L128 64zM512 64L432 64C423.2 64 416 71.2 416 80C416 88.8 423.2 96 432 96L512 96C529.7 96 544 110.3 544 128L544 208C544 216.8 551.2 224 560 224C568.8 224 576 216.8 576 208L576 128C576 92.7 547.3 64 512 64zM64 512C64 547.3 92.7 576 128 576L208 576C216.8 576 224 568.8 224 560C224 551.2 216.8 544 208 544L128 544C110.3 544 96 529.7 96 512L96 432C96 423.2 88.8 416 80 416C71.2 416 64 423.2 64 432L64 512zM512 576C547.3 576 576 547.3 576 512L576 432C576 423.2 568.8 416 560 416C551.2 416 544 423.2 544 432L544 512C544 529.7 529.7 544 512 544L432 544C423.2 544 416 551.2 416 560C416 568.8 423.2 576 432 576L512 576zM296 288C296 274.7 285.3 264 272 264C258.7 264 248 274.7 248 288C248 301.3 258.7 312 272 312C285.3 312 296 301.3 296 288zM368 312C381.3 312 392 301.3 392 288C392 274.7 381.3 264 368 264C354.7 264 344 274.7 344 288C344 301.3 354.7 312 368 312zM320 192C390.7 192 448 249.3 448 320C448 390.7 390.7 448 320 448C249.3 448 192 390.7 192 320C192 249.3 249.3 192 320 192zM320 480C408.4 480 480 408.4 480 320C480 231.6 408.4 160 320 160C231.6 160 160 231.6 160 320C160 408.4 231.6 480 320 480zM278.4 352C274 344.4 264.2 341.7 256.5 346.2C248.8 350.7 246.2 360.4 250.7 368.1C264.5 392 290.4 408.1 320 408.1C349.6 408.1 375.5 392 389.3 368.1C393.7 360.4 391.1 350.7 383.5 346.2C375.9 341.7 366.1 344.4 361.6 352C353.3 366.4 337.8 376 320 376C302.2 376 286.7 366.4 278.4 352z" }) }));
+exports.BackgroundRemovalIcon = BackgroundRemovalIcon;

package/dist/icons/wrap.d.ts

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

package/dist/icons/wrap.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WrapIcon = 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 WrapIcon = ({ 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: "M480 128C497.7 128 512 142.3 512 160L512 224C512 241.7 497.7 256 480 256L160 256C142.3 256 128 241.7 128 224L128 160C128 142.3 142.3 128 160 128L480 128zM208 288L480 288C515.3 288 544 259.3 544 224L544 160C544 124.7 515.3 96 480 96L160 96C124.7 96 96 124.7 96 160L96 224C96 259.3 124.7 288 160 288L176 288L176 384C176 428.2 211.8 464 256 464L288 464L288 480C288 515.3 316.7 544 352 544L480 544C515.3 544 544 515.3 544 480L544 416C544 380.7 515.3 352 480 352L352 352C316.7 352 288 380.7 288 416L288 432L256 432C229.5 432 208 410.5 208 384L208 288zM320 432L320 416C320 398.3 334.3 384 352 384L480 384C497.7 384 512 398.3 512 416L512 480C512 497.7 497.7 512 480 512L352 512C334.3 512 320 497.7 320 480L320 432z" }) }));
+};
+exports.WrapIcon = WrapIcon;

package/dist/previewEntry.js

@@ -11,9 +11,11 @@ const NoRegisterRoot_1 = require("./components/NoRegisterRoot");
 const entry_basic_1 = require("./error-overlay/entry-basic");
 const colors_1 = require("./helpers/colors");
 const install_fiber_sequence_order_observer_1 = require("./helpers/install-fiber-sequence-order-observer");
+const studio_css_variables_1 = require("./helpers/studio-css-variables");
 const client_2 = require("./hot-middleware-client/client");
 const Studio_1 = require("./Studio");
 (0, install_fiber_sequence_order_observer_1.installFiberCommitOrderObserver)(window);
+remotion_1.Internals.CSSUtils.injectCSS(studio_css_variables_1.studioCssVariables);
 remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultPreviewCSS(null, colors_1.BACKGROUND_HEX));
 if (!window.__remotionOverlayStarted) {
     window.__remotionOverlayStarted = true;

package/dist/renderEntry.js

@@ -50,6 +50,7 @@ const client_1 = __importDefault(require("react-dom/client"));
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const colors_1 = require("./helpers/colors");
+const studio_css_variables_1 = require("./helpers/studio-css-variables");
 let currentBundleMode = {
     type: 'index',
 };
@@ -59,6 +60,7 @@ const setBundleMode = (state) => {
 const getBundleMode = () => {
     return currentBundleMode;
 };
+remotion_1.Internals.CSSUtils.injectCSS(studio_css_variables_1.studioCssVariables);
 remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultPreviewCSS(null, colors_1.BACKGROUND_HEX));
 const getCanSerializeDefaultProps = (object) => {
     try {

package/dist/state/modals.d.ts

@@ -8,6 +8,8 @@ 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';
+import type { useTimelineSelection } from '../components/Timeline/TimelineSelection';
+import type { SequenceNodePathInfo } from '../helpers/get-timeline-sequence-sort-key';
 export type WebRenderModalState = {
     type: 'web-render';
     initialFrame: number;
@@ -106,8 +108,9 @@ export type SvgImportDialogState = {
 export type AddEffectModalState = {
     type: 'add-effect';
     fileName: string;
-    nodePath: SequencePropsSubscriptionKey;
+    nodePathInfo: SequenceNodePathInfo;
     clientId: string;
+    selectItems: ReturnType<typeof useTimelineSelection>['selectItems'];
 };
 export type AssetSelectionModalState = {
     readonly type: 'asset-selection';
@@ -137,6 +140,10 @@ export type VideoMattingModalState = {
     type: 'video-matting';
     src: string;
     displayName: string;
+    target: {
+        fileName: string;
+        nodePath: SequencePropsSubscriptionKey;
+    } | null;
 };
 export type CanvasCaptureImport = {
     readonly data: CanvasCaptureData;
@@ -202,6 +209,13 @@ export type ModalState = {
 } | RenderModalState | WebRenderModalState | {
     type: 'render-progress';
     jobId: string;
+} | {
+    type: 'queue-job-error';
+    title: string;
+    error: {
+        message: string;
+        stack: string | null;
+    };
 } | {
     type: 'fix-computed-value';
     prop: string;

package/dist/state/timeline-sequence-hover.d.ts

@@ -1,23 +1,13 @@
-import type { Dispatch, SetStateAction } from 'react';
+import type { CanvasHover, CanvasHoverController } from '@remotion/canvas';
 import type { SequenceNodePathInfo } from '../helpers/get-timeline-sequence-sort-key';
-export type TimelineSequenceHover = {
-    readonly key: string;
-    readonly nodePathKey: string;
-    readonly source: 'canvas' | 'timeline';
-};
-type TimelineSequenceHoverStore = {
-    readonly getSnapshot: () => TimelineSequenceHover | null;
-    readonly subscribe: (listener: () => void) => () => void;
-    readonly setHoveredSequence: Dispatch<SetStateAction<TimelineSequenceHover | null>>;
-};
-export declare const createTimelineSequenceHoverStore: () => TimelineSequenceHoverStore;
-export declare const TimelineSequenceHoverContext: import("react").Context<TimelineSequenceHoverStore>;
-export declare const useTimelineSequenceHoverState: () => TimelineSequenceHover | null;
-export declare const useSetTimelineSequenceHover: () => Dispatch<SetStateAction<TimelineSequenceHover | null>>;
+export type TimelineSequenceHover = CanvasHover;
+export declare const createTimelineSequenceHoverStore: () => CanvasHoverController;
+export declare const TimelineSequenceHoverContext: import("react").Context<CanvasHoverController>;
+export declare const useTimelineSequenceHoverState: () => CanvasHover | null;
+export declare const useSetTimelineSequenceHover: () => import("react").Dispatch<import("react").SetStateAction<CanvasHover | null>>;
 export declare const useIsTimelineSequenceHovered: (nodePathKey: string | null) => boolean;
 export declare const useTimelineSequenceHover: (nodePathInfo: SequenceNodePathInfo | null) => {
     hovered: boolean;
     onPointerEnter: () => void;
     onPointerLeave: () => void;
 };
-export {};

package/dist/state/timeline-sequence-hover.js

@@ -1,35 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTimelineSequenceHover = exports.useIsTimelineSequenceHovered = exports.useSetTimelineSequenceHover = exports.useTimelineSequenceHoverState = exports.TimelineSequenceHoverContext = exports.createTimelineSequenceHoverStore = void 0;
+const canvas_1 = require("@remotion/canvas");
 const react_1 = require("react");
-const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
-const use_sync_external_store_1 = require("../helpers/use-sync-external-store");
-const createTimelineSequenceHoverStore = () => {
-    let hoveredSequence = null;
-    const listeners = new Set();
-    return {
-        getSnapshot: () => hoveredSequence,
-        subscribe: (listener) => {
-            listeners.add(listener);
-            return () => listeners.delete(listener);
-        },
-        setHoveredSequence: (action) => {
-            const nextHoveredSequence = typeof action === 'function' ? action(hoveredSequence) : action;
-            if (nextHoveredSequence === hoveredSequence) {
-                return;
-            }
-            hoveredSequence = nextHoveredSequence;
-            for (const listener of listeners) {
-                listener();
-            }
-        },
-    };
-};
-exports.createTimelineSequenceHoverStore = createTimelineSequenceHoverStore;
+const { useIsCanvasSequenceHovered } = canvas_1.CanvasInternals;
+exports.createTimelineSequenceHoverStore = canvas_1.createCanvasHoverController;
 exports.TimelineSequenceHoverContext = (0, react_1.createContext)((0, exports.createTimelineSequenceHoverStore)());
 const useTimelineSequenceHoverState = () => {
-    const store = (0, react_1.useContext)(exports.TimelineSequenceHoverContext);
-    return (0, use_sync_external_store_1.useSyncExternalStore)(store.subscribe, store.getSnapshot, store.getSnapshot);
+    return (0, canvas_1.useCanvasHover)((0, react_1.useContext)(exports.TimelineSequenceHoverContext));
 };
 exports.useTimelineSequenceHoverState = useTimelineSequenceHoverState;
 const useSetTimelineSequenceHover = () => {
@@ -37,49 +15,10 @@ const useSetTimelineSequenceHover = () => {
 };
 exports.useSetTimelineSequenceHover = useSetTimelineSequenceHover;
 const useIsTimelineSequenceHovered = (nodePathKey) => {
-    const store = (0, react_1.useContext)(exports.TimelineSequenceHoverContext);
-    const getSnapshot = (0, react_1.useCallback)(() => {
-        var _a;
-        return nodePathKey !== null && ((_a = store.getSnapshot()) === null || _a === void 0 ? void 0 : _a.nodePathKey) === nodePathKey;
-    }, [nodePathKey, store]);
-    return (0, use_sync_external_store_1.useSyncExternalStore)(store.subscribe, getSnapshot, getSnapshot);
+    return useIsCanvasSequenceHovered((0, react_1.useContext)(exports.TimelineSequenceHoverContext), nodePathKey);
 };
 exports.useIsTimelineSequenceHovered = useIsTimelineSequenceHovered;
 const useTimelineSequenceHover = (nodePathInfo) => {
-    const store = (0, react_1.useContext)(exports.TimelineSequenceHoverContext);
-    const sequenceKey = (0, react_1.useMemo)(() => nodePathInfo === null
-        ? null
-        : (0, timeline_node_path_key_1.timelineNodePathInfoToKey)({ ...nodePathInfo, auxiliaryKeys: [] }), [nodePathInfo]);
-    const nodePathKey = (0, react_1.useMemo)(() => nodePathInfo === null
-        ? null
-        : (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(nodePathInfo.sequenceSubscriptionKey), [nodePathInfo]);
-    const hovered = (0, exports.useIsTimelineSequenceHovered)(nodePathKey);
-    const onPointerEnter = (0, react_1.useCallback)(() => {
-        if (sequenceKey === null || nodePathKey === null) {
-            return;
-        }
-        store.setHoveredSequence((currentHover) => {
-            if ((currentHover === null || currentHover === void 0 ? void 0 : currentHover.key) === sequenceKey &&
-                currentHover.nodePathKey === nodePathKey &&
-                currentHover.source === 'timeline') {
-                return currentHover;
-            }
-            return {
-                key: sequenceKey,
-                nodePathKey,
-                source: 'timeline',
-            };
-        });
-    }, [nodePathKey, sequenceKey, store]);
-    const onPointerLeave = (0, react_1.useCallback)(() => {
-        store.setHoveredSequence((currentHover) => {
-            if ((currentHover === null || currentHover === void 0 ? void 0 : currentHover.source) !== 'timeline' ||
-                currentHover.key !== sequenceKey) {
-                return currentHover;
-            }
-            return null;
-        });
-    }, [sequenceKey, store]);
-    return (0, react_1.useMemo)(() => ({ hovered, onPointerEnter, onPointerLeave }), [hovered, onPointerEnter, onPointerLeave]);
+    return (0, canvas_1.useCanvasSequenceHover)((0, react_1.useContext)(exports.TimelineSequenceHoverContext), nodePathInfo, 'timeline');
 };
 exports.useTimelineSequenceHover = useTimelineSequenceHover;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.527",
+	"version": "4.0.528",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
@@ -20,8 +20,8 @@
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},
 	"peerDependencies": {
-		"@remotion/video-matting": "4.0.527",
-		"@remotion/whisper-webgpu": "4.0.527",
+		"@remotion/video-matting": "4.0.528",
+		"@remotion/whisper-webgpu": "4.0.528",
 		"react": ">=16.8.0",
 		"react-dom": ">=16.8.0"
 	},
@@ -35,32 +35,33 @@
 	},
 	"dependencies": {
 		"@jridgewell/trace-mapping": "0.3.31",
-		"@remotion/canvas": "4.0.527",
-		"@remotion/captions": "4.0.527",
-		"@remotion/media": "4.0.527",
-		"@remotion/media-utils": "4.0.527",
-		"@remotion/player": "4.0.527",
-		"@remotion/renderer": "4.0.527",
-		"@remotion/codemods": "4.0.527",
-		"@remotion/studio-protocol": "4.0.527",
-		"@remotion/studio-shared": "4.0.527",
-		"@remotion/timeline-utils": "4.0.527",
-		"@remotion/web-renderer": "4.0.527",
-		"@remotion/zod-types": "4.0.527",
+		"@remotion/canvas": "4.0.528",
+		"@remotion/captions": "4.0.528",
+		"@remotion/media": "4.0.528",
+		"@remotion/media-utils": "4.0.528",
+		"@remotion/paths": "4.0.528",
+		"@remotion/player": "4.0.528",
+		"@remotion/renderer": "4.0.528",
+		"@remotion/codemods": "4.0.528",
+		"@remotion/studio-protocol": "4.0.528",
+		"@remotion/studio-shared": "4.0.528",
+		"@remotion/timeline-utils": "4.0.528",
+		"@remotion/web-renderer": "4.0.528",
+		"@remotion/zod-types": "4.0.528",
 		"@tanstack/react-virtual": "3.14.9",
 		"mediabunny": "1.56.1",
 		"memfs": "3.4.3",
 		"open": "8.4.2",
 		"prismjs": "1.30.0",
-		"remotion": "4.0.527",
+		"remotion": "4.0.528",
 		"semver": "7.5.3",
 		"zod": "4.5.4"
 	},
 	"devDependencies": {
 		"@happy-dom/global-registrator": "14.5.1",
-		"@remotion/eslint-config-internal": "4.0.527",
-		"@remotion/video-matting": "4.0.527",
-		"@remotion/whisper-webgpu": "4.0.527",
+		"@remotion/eslint-config-internal": "4.0.528",
+		"@remotion/video-matting": "4.0.528",
+		"@remotion/whisper-webgpu": "4.0.528",
 		"@testing-library/react": "16.1.0",
 		"@types/prismjs": "1.26.4",
 		"@types/semver": "7.5.3",

package/dist/components/Timeline/get-easing-selection-after-keyframe-delete.d.ts

@@ -1,15 +0,0 @@
-import type { CanUpdateSequencePropStatusKeyframed } from 'remotion';
-import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
-export declare const getEasingSelectionAfterKeyframeDelete: ({ deletedSourceFrames, keyframeDisplayOffset, nodePathInfo, propStatus, timelinePosition, }: {
-    readonly deletedSourceFrames: readonly number[];
-    readonly keyframeDisplayOffset: number;
-    readonly nodePathInfo: SequenceNodePathInfo;
-    readonly propStatus: CanUpdateSequencePropStatusKeyframed;
-    readonly timelinePosition: number;
-}) => {
-    readonly type: "easing";
-    readonly nodePathInfo: SequenceNodePathInfo;
-    readonly fromFrame: number;
-    readonly toFrame: number;
-    readonly segmentIndex: number;
-} | null;

package/dist/components/Timeline/get-easing-selection-after-keyframe-delete.js

@@ -1,31 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getEasingSelectionAfterKeyframeDelete = void 0;
-const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
-const getEasingSelectionAfterKeyframeDelete = ({ deletedSourceFrames, keyframeDisplayOffset, nodePathInfo, propStatus, timelinePosition, }) => {
-    const resolvedKeyframeDisplayOffset = (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
-        propStatus,
-        keyframeDisplayOffset,
-    });
-    const deletedSourceFrameSet = new Set(deletedSourceFrames);
-    const remainingKeyframes = propStatus.keyframes.filter((keyframe) => !deletedSourceFrameSet.has(keyframe.frame));
-    const sourceFrame = timelinePosition - resolvedKeyframeDisplayOffset;
-    for (let i = 0; i < remainingKeyframes.length - 1; i++) {
-        const keyframe = remainingKeyframes[i];
-        const nextKeyframe = remainingKeyframes[i + 1];
-        if (!keyframe || !nextKeyframe) {
-            continue;
-        }
-        if (sourceFrame > keyframe.frame && sourceFrame < nextKeyframe.frame) {
-            return {
-                type: 'easing',
-                nodePathInfo,
-                fromFrame: keyframe.frame + resolvedKeyframeDisplayOffset,
-                toFrame: nextKeyframe.frame + resolvedKeyframeDisplayOffset,
-                segmentIndex: i,
-            };
-        }
-    }
-    return null;
-};
-exports.getEasingSelectionAfterKeyframeDelete = getEasingSelectionAfterKeyframeDelete;

package/dist/esm/LazyModels-nh3c8h9p.mjs

@@ -1,12 +0,0 @@
-import {
-  Models
-} from "./index-614tdz2q.mjs";
-import"./index-r0ejh5sy.mjs";
-import"./index-5t2dwxsk.mjs";
-import"./index-9xxg6218.mjs";
-import"./index-5zrb1ft4.mjs";
-import"./index-k426ye99.mjs";
-import"./index-rcv7qkt5.mjs";
-export {
-  Models as default
-};

package/dist/esm/LazyModels-rr5v8h5y.mjs

@@ -1,12 +0,0 @@
-import {
-  Models
-} from "./index-ac5550e7.mjs";
-import"./index-r0ejh5sy.mjs";
-import"./index-5t2dwxsk.mjs";
-import"./index-9xxg6218.mjs";
-import"./index-5zrb1ft4.mjs";
-import"./index-k426ye99.mjs";
-import"./index-rcv7qkt5.mjs";
-export {
-  Models as default
-};