@remotion/studio 4.0.504 → 4.0.506

package/dist/icons/canvas-zoom.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CanvasZoomOutIcon = exports.CanvasFitIcon = exports.CanvasZoomIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const iconStyle = {
+    width: 20,
+    height: 20,
+    flexShrink: 0,
+};
+const CanvasZoomIcon = ({ color }) => {
+    return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", style: iconStyle, children: jsx_runtime_1.jsx("path", { fill: color, d: "M272 96C369.2 96 448 174.8 448 272C448 369.2 369.2 448 272 448C174.8 448 96 369.2 96 272C96 174.8 174.8 96 272 96zM272 480C323.7 480 371 461.2 407.3 430L548.7 571.3C554.9 577.5 565.1 577.5 571.3 571.3C577.5 565.1 577.5 554.9 571.3 548.7L430 407.3C461.2 371 480 323.7 480 272C480 157.1 386.9 64 272 64C157.1 64 64 157.1 64 272C64 386.9 157.1 480 272 480zM256 344C256 352.8 263.2 360 272 360C280.8 360 288 352.8 288 344L288 288L344 288C352.8 288 360 280.8 360 272C360 263.2 352.8 256 344 256L288 256L288 200C288 191.2 280.8 184 272 184C263.2 184 256 191.2 256 200L256 256L200 256C191.2 256 184 263.2 184 272C184 280.8 191.2 288 200 288L256 288L256 344z" }) }));
+};
+exports.CanvasZoomIcon = CanvasZoomIcon;
+const CanvasFitIcon = ({ color }) => {
+    return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", style: iconStyle, children: jsx_runtime_1.jsx("path", { fill: color, d: "M448 272C448 174.8 369.2 96 272 96C174.8 96 96 174.8 96 272C96 369.2 174.8 448 272 448C369.2 448 448 369.2 448 272zM407.3 430C371 461.2 323.7 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272C480 323.7 461.2 371 430 407.3L571.3 548.7C577.5 554.9 577.5 565.1 571.3 571.3C565.1 577.5 554.9 577.5 548.7 571.3L407.3 430z" }) }));
+};
+exports.CanvasFitIcon = CanvasFitIcon;
+const CanvasZoomOutIcon = ({ color }) => {
+    return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", style: iconStyle, children: jsx_runtime_1.jsx("path", { fill: color, d: "M272 96C369.2 96 448 174.8 448 272C448 369.2 369.2 448 272 448C174.8 448 96 369.2 96 272C96 174.8 174.8 96 272 96zM272 480C323.7 480 371 461.2 407.3 430L548.7 571.3C554.9 577.5 565.1 577.5 571.3 571.3C577.5 565.1 577.5 554.9 571.3 548.7L430 407.3C461.2 371 480 323.7 480 272C480 157.1 386.9 64 272 64C157.1 64 64 157.1 64 272C64 386.9 157.1 480 272 480zM192 256C183.2 256 176 263.2 176 272C176 280.8 183.2 288 192 288L352 288C360.8 288 368 280.8 368 272C368 263.2 360.8 256 352 256L192 256z" }) }));
+};
+exports.CanvasZoomOutIcon = CanvasZoomOutIcon;

package/dist/icons/playback-rate.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const PlaybackRateIcon: React.FC<{
+    readonly color: string;
+    readonly playbackRate: number;
+}>;

package/dist/icons/playback-rate.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlaybackRateIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const iconStyle = {
+    width: 20,
+    height: 20,
+    flexShrink: 0,
+};
+const defaultPlaybackRatePath = 'M320 96C443.7 96 544 196.3 544 320C544 443.7 443.7 544 320 544C196.3 544 96 443.7 96 320C96 196.3 196.3 96 320 96zM320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM320 384C337.7 384 352 398.3 352 416C352 433.7 337.7 448 320 448C302.3 448 288 433.7 288 416C288 398.3 302.3 384 320 384zM320 480C355.3 480 384 451.3 384 416C384 386.2 363.6 361.1 336 354L336 160C336 151.2 328.8 144 320 144C311.2 144 304 151.2 304 160L304 354C276.4 361.1 256 386.2 256 416C256 451.3 284.7 480 320 480zM208 232C221.3 232 232 221.3 232 208C232 194.7 221.3 184 208 184C194.7 184 184 194.7 184 208C184 221.3 194.7 232 208 232zM184 320C184 306.7 173.3 296 160 296C146.7 296 136 306.7 136 320C136 333.3 146.7 344 160 344C173.3 344 184 333.3 184 320zM480 344C493.3 344 504 333.3 504 320C504 306.7 493.3 296 480 296C466.7 296 456 306.7 456 320C456 333.3 466.7 344 480 344zM456 208C456 194.7 445.3 184 432 184C418.7 184 408 194.7 408 208C408 221.3 418.7 232 432 232C445.3 232 456 221.3 456 208z';
+const halfPlaybackRatePath = 'M320 544C443.7 544 544 443.7 544 320C544 196.3 443.7 96 320 96C196.3 96 96 196.3 96 320C96 443.7 196.3 544 320 544zM320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64zM344 160C344 173.3 333.3 184 320 184C306.7 184 296 173.3 296 160C296 146.7 306.7 136 320 136C333.3 136 344 146.7 344 160zM288 416C288 433.7 302.3 448 320 448C337.7 448 352 433.7 352 416C352 398.3 337.7 384 320 384C302.3 384 288 398.3 288 416zM256 416C256 397.4 263.9 380.7 276.5 369L193.9 215.6L186.3 201.5L214.5 186.3L222.1 200.4L304.7 353.8C309.6 352.6 314.7 352 320 352C355.3 352 384 380.7 384 416C384 451.3 355.3 480 320 480C284.7 480 256 451.3 256 416zM456 208C456 221.3 445.3 232 432 232C418.7 232 408 221.3 408 208C408 194.7 418.7 184 432 184C445.3 184 456 194.7 456 208zM480 296C493.3 296 504 306.7 504 320C504 333.3 493.3 344 480 344C466.7 344 456 333.3 456 320C456 306.7 466.7 296 480 296zM184 320C184 333.3 173.3 344 160 344C146.7 344 136 333.3 136 320C136 306.7 146.7 296 160 296C173.3 296 184 306.7 184 320z';
+const quarterPlaybackRatePath = 'M320 96C443.7 96 544 196.3 544 320C544 443.7 443.7 544 320 544C196.3 544 96 443.7 96 320C96 196.3 196.3 96 320 96zM320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM344 160C344 146.7 333.3 136 320 136C306.7 136 296 146.7 296 160C296 173.3 306.7 184 320 184C333.3 184 344 173.3 344 160zM288 416C288 398.3 302.3 384 320 384C337.7 384 352 398.3 352 416C352 433.7 337.7 448 320 448C302.3 448 288 433.7 288 416zM384 416C384 380.7 355.3 352 320 352C302.5 352 286.6 359 275.1 370.4L168.2 306.3L154.5 298.1L138 325.5L151.7 333.7L258.5 397.8C256.8 403.6 255.9 409.7 255.9 416C255.9 451.3 284.6 480 319.9 480C355.2 480 383.9 451.3 383.9 416zM232 208C232 194.7 221.3 184 208 184C194.7 184 184 194.7 184 208C184 221.3 194.7 232 208 232C221.3 232 232 221.3 232 208zM480 344C493.3 344 504 333.3 504 320C504 306.7 493.3 296 480 296C466.7 296 456 306.7 456 320C456 333.3 466.7 344 480 344zM456 208C456 194.7 445.3 184 432 184C418.7 184 408 194.7 408 208C408 221.3 418.7 232 432 232C445.3 232 456 221.3 456 208z';
+const mediumFastPlaybackRatePath = 'M320 96C443.7 96 544 196.3 544 320C544 443.7 443.7 544 320 544C196.3 544 96 443.7 96 320C96 196.3 196.3 96 320 96zM320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM344 160C344 146.7 333.3 136 320 136C306.7 136 296 146.7 296 160C296 173.3 306.7 184 320 184C333.3 184 344 173.3 344 160zM288 416C288 398.3 302.3 384 320 384C337.7 384 352 398.3 352 416C352 433.7 337.7 448 320 448C302.3 448 288 433.7 288 416zM384 416C384 397.4 376.1 380.7 363.5 369L446.1 215.6L453.7 201.5L425.5 186.3L417.9 200.4L335.3 353.8C330.4 352.6 325.3 352 320 352C284.7 352 256 380.7 256 416C256 451.3 284.7 480 320 480C355.3 480 384 451.3 384 416zM232 208C232 194.7 221.3 184 208 184C194.7 184 184 194.7 184 208C184 221.3 194.7 232 208 232C221.3 232 232 221.3 232 208zM160 344C173.3 344 184 333.3 184 320C184 306.7 173.3 296 160 296C146.7 296 136 306.7 136 320C136 333.3 146.7 344 160 344zM504 320C504 306.7 493.3 296 480 296C466.7 296 456 306.7 456 320C456 333.3 466.7 344 480 344C493.3 344 504 333.3 504 320z';
+const fastPlaybackRatePath = 'M320 544C443.7 544 544 443.7 544 320C544 196.3 443.7 96 320 96C196.3 96 96 196.3 96 320C96 443.7 196.3 544 320 544zM320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64zM344 160C344 173.3 333.3 184 320 184C306.7 184 296 173.3 296 160C296 146.7 306.7 136 320 136C333.3 136 344 146.7 344 160zM288 416C288 433.7 302.3 448 320 448C337.7 448 352 433.7 352 416C352 398.3 337.7 384 320 384C302.3 384 288 398.3 288 416zM256 416C256 380.7 284.7 352 320 352C337.5 352 353.4 359 364.9 370.4L471.8 306.3L485.5 298.1L502 325.5L488.3 333.7L381.5 397.8C383.2 403.6 384.1 409.7 384.1 416C384.1 451.3 355.4 480 320.1 480C284.8 480 256.1 451.3 256.1 416zM456 208C456 221.3 445.3 232 432 232C418.7 232 408 221.3 408 208C408 194.7 418.7 184 432 184C445.3 184 456 194.7 456 208zM160 296C173.3 296 184 306.7 184 320C184 333.3 173.3 344 160 344C146.7 344 136 333.3 136 320C136 306.7 146.7 296 160 296zM232 208C232 221.3 221.3 232 208 232C194.7 232 184 221.3 184 208C184 194.7 194.7 184 208 184C221.3 184 232 194.7 232 208z';
+const PlaybackRateIcon = ({ color, playbackRate }) => {
+    let path = defaultPlaybackRatePath;
+    if (playbackRate === 0.5) {
+        path = halfPlaybackRatePath;
+    }
+    else if (playbackRate === 0.25) {
+        path = quarterPlaybackRatePath;
+    }
+    else if (playbackRate > 2) {
+        path = fastPlaybackRatePath;
+    }
+    else if (playbackRate > 1) {
+        path = mediumFastPlaybackRatePath;
+    }
+    return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", style: iconStyle, children: jsx_runtime_1.jsx("path", { fill: color, d: path }) }));
+};
+exports.PlaybackRateIcon = PlaybackRateIcon;

package/dist/icons/search.d.ts

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

package/dist/icons/search.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchIcon = 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 SearchIcon = ({ color, ...props }) => {
+    return (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, d: "M432 272C432 183.6 360.4 112 272 112C183.6 112 112 183.6 112 272C112 360.4 183.6 432 272 432C360.4 432 432 360.4 432 272zM401.1 435.1C365.7 463.2 320.8 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272C480 320.8 463.2 365.7 435.1 401.1L569 535C578.4 544.4 578.4 559.6 569 568.9C559.6 578.2 544.4 578.3 535.1 568.9L401.1 435.1z" }) }));
+};
+exports.SearchIcon = SearchIcon;

package/dist/state/modals.d.ts

@@ -144,10 +144,9 @@ export type ModalState = {
 } | {
     type: 'input-props-override';
 } | {
-    type: 'configure-license';
+    type: 'settings';
+    initialTab: 'apps' | 'license';
     initialPublicLicenseKey: string | null;
-} | {
-    type: 'configure-default-editor';
 } | RenderModalState | WebRenderModalState | {
     type: 'render-progress';
     jobId: string;
@@ -172,8 +171,8 @@ export type ModalState = {
         onSelected: (composition: _InternalTypes['AnyComposition']) => void;
     } | null;
 } | AddEffectModalState | ConfirmationDialogState | SvgImportDialogState;
-export type ModalContextType = {
-    selectedModal: ModalState | null;
+export type SetSelectedModalContextType = {
     setSelectedModal: React.Dispatch<React.SetStateAction<ModalState | null>>;
 };
-export declare const ModalsContext: React.Context<ModalContextType>;
+export declare const SelectedModalContext: React.Context<ModalState | null>;
+export declare const SetSelectedModalContext: React.Context<SetSelectedModalContextType>;

package/dist/state/modals.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalsContext = void 0;
+exports.SetSelectedModalContext = exports.SelectedModalContext = void 0;
 const react_1 = require("react");
-exports.ModalsContext = (0, react_1.createContext)({
-    selectedModal: null,
+// Keep modal state separate from its stable setter so opening a modal only
+// updates consumers that need to render the selected modal.
+exports.SelectedModalContext = (0, react_1.createContext)(null);
+exports.SetSelectedModalContext = (0, react_1.createContext)({
     setSelectedModal: () => undefined,
 });

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.504",
+	"version": "4.0.506",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
@@ -24,17 +24,17 @@
 		"react-dom": ">=16.8.0"
 	},
 	"dependencies": {
-		"@remotion/studio-protocol": "4.0.504",
+		"@remotion/studio-protocol": "4.0.506",
 		"semver": "7.5.3",
-		"remotion": "4.0.504",
-		"@remotion/captions": "4.0.504",
-		"@remotion/player": "4.0.504",
-		"@remotion/media-utils": "4.0.504",
-		"@remotion/renderer": "4.0.504",
-		"@remotion/web-renderer": "4.0.504",
-		"@remotion/studio-shared": "4.0.504",
-		"@remotion/timeline-utils": "4.0.504",
-		"@remotion/zod-types": "4.0.504",
+		"remotion": "4.0.506",
+		"@remotion/captions": "4.0.506",
+		"@remotion/player": "4.0.506",
+		"@remotion/media-utils": "4.0.506",
+		"@remotion/renderer": "4.0.506",
+		"@remotion/web-renderer": "4.0.506",
+		"@remotion/studio-shared": "4.0.506",
+		"@remotion/timeline-utils": "4.0.506",
+		"@remotion/zod-types": "4.0.506",
 		"@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.504",
+		"@remotion/eslint-config-internal": "4.0.506",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},