@remotion/studio 4.0.489 → 4.0.490

package/dist/esm/renderEntry.mjs

@@ -212,7 +212,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-jrta3xaf.js").then(({ StudioInternals }) => {
+    import("./chunk-16nwrbrm.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/helpers/install-required-package.d.ts

@@ -1 +1,2 @@
+export declare const getMissingPackages: (packageNames: string[]) => string[];
 export declare const installRequiredPackages: (packageNames: string[]) => Promise<void>;

package/dist/helpers/install-required-package.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.installRequiredPackages = void 0;
+exports.installRequiredPackages = exports.getMissingPackages = void 0;
 const install_package_1 = require("../api/install-package");
 const NotificationCenter_1 = require("../components/Notifications/NotificationCenter");
 let installQueue = Promise.resolve();
@@ -10,6 +10,7 @@ const getMissingPackages = (packageNames) => {
     const installedPackages = (_a = window.remotion_installedPackages) !== null && _a !== void 0 ? _a : [];
     return uniquePackageNames.filter((packageName) => !installedPackages.includes(packageName));
 };
+exports.getMissingPackages = getMissingPackages;
 const addInstalledPackages = (packageNames) => {
     var _a;
     const installedPackages = (_a = window.remotion_installedPackages) !== null && _a !== void 0 ? _a : [];
@@ -23,7 +24,7 @@ const formatPackageList = (packageNames) => {
 };
 const installRequiredPackages = async (packageNames) => {
     const runInstall = async () => {
-        const missingPackages = getMissingPackages(packageNames);
+        const missingPackages = (0, exports.getMissingPackages)(packageNames);
         if (missingPackages.length === 0) {
             return;
         }

package/dist/icons/align-bottom.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const AlignBottomIcon: React.FC<SVGProps<SVGSVGElement>>;

package/dist/icons/align-bottom.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlignBottomIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const align_right_1 = require("./align-right");
+const AlignBottomIcon = (props) => {
+    return (jsx_runtime_1.jsx(align_right_1.AlignRightIcon, { ...props, style: {
+            ...props.style,
+            transform: 'rotate(90deg)',
+        } }));
+};
+exports.AlignBottomIcon = AlignBottomIcon;

package/dist/icons/align-center-horizontal.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const AlignCenterHorizontalIcon: React.FC<SVGProps<SVGSVGElement>>;

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlignCenterHorizontalIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AlignCenterHorizontalIcon = (props) => {
+    var _a;
+    const color = (_a = props.color) !== null && _a !== void 0 ? _a : 'currentColor';
+    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, strokeOpacity: "0.5", 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" })
+        ] }));
+};
+exports.AlignCenterHorizontalIcon = AlignCenterHorizontalIcon;

package/dist/icons/align-center-vertical.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const AlignCenterVerticalIcon: React.FC<SVGProps<SVGSVGElement>>;

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlignCenterVerticalIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const align_center_horizontal_1 = require("./align-center-horizontal");
+const AlignCenterVerticalIcon = (props) => {
+    return (jsx_runtime_1.jsx(align_center_horizontal_1.AlignCenterHorizontalIcon, { ...props, style: {
+            ...props.style,
+            transform: 'rotate(90deg)',
+        } }));
+};
+exports.AlignCenterVerticalIcon = AlignCenterVerticalIcon;

package/dist/icons/align-left.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const AlignLeftIcon: React.FC<SVGProps<SVGSVGElement>>;

package/dist/icons/align-left.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlignLeftIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AlignLeftIcon = (props) => {
+    var _a;
+    const color = (_a = props.color) !== null && _a !== void 0 ? _a : 'currentColor';
+    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, strokeOpacity: "0.5", 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" })
+        ] }));
+};
+exports.AlignLeftIcon = AlignLeftIcon;

package/dist/icons/align-right.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const AlignRightIcon: React.FC<SVGProps<SVGSVGElement>>;

package/dist/icons/align-right.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlignRightIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AlignRightIcon = (props) => {
+    var _a;
+    const color = (_a = props.color) !== null && _a !== void 0 ? _a : 'currentColor';
+    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, strokeOpacity: "0.5", 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" })
+        ] }));
+};
+exports.AlignRightIcon = AlignRightIcon;

package/dist/icons/align-top.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const AlignTopIcon: React.FC<SVGProps<SVGSVGElement>>;

package/dist/icons/align-top.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlignTopIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const align_left_1 = require("./align-left");
+const AlignTopIcon = (props) => {
+    return (jsx_runtime_1.jsx(align_left_1.AlignLeftIcon, { ...props, style: {
+            ...props.style,
+            transform: 'rotate(90deg)',
+        } }));
+};
+exports.AlignTopIcon = AlignTopIcon;

package/dist/state/modals.d.ts

@@ -7,7 +7,6 @@ import type { SequencePropsSubscriptionKey, _InternalTypes } from 'remotion';
 import type { CompType } from '../components/NewComposition/DuplicateComposition';
 import type { QuickSwitcherMode } from '../components/QuickSwitcher/NoResults';
 import type { RenderType } from '../components/RenderModal/RenderModalAdvanced';
-import type { KeyframeSettingsModalState } from '../components/Timeline/KeyframeSettingsModal';
 import type { Bug, UpdateInfo } from '../components/UpdateCheck';
 export type WebRenderModalState = {
     type: 'web-render';
@@ -138,7 +137,7 @@ export type ModalState = {
     relativePath: string;
 } | {
     type: 'input-props-override';
-} | KeyframeSettingsModalState | RenderModalState | WebRenderModalState | {
+} | RenderModalState | WebRenderModalState | {
     type: 'render-progress';
     jobId: string;
 } | {

package/package.json

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

package/dist/components/Timeline/KeyframeSettingsModal.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-import type { CanUpdateSequencePropStatusKeyframed, SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
-export type KeyframeSettingsModalState = {
-    type: 'keyframe-settings';
-    fileName: string;
-    nodePath: SequencePropsSubscriptionKey;
-    fieldKey: string;
-    fieldLabel: string;
-    status: CanUpdateSequencePropStatusKeyframed;
-    schema: InteractivitySchema;
-    effectIndex: number | null;
-};
-export declare const KeyframeSettingsModal: React.FC<{
-    readonly state: KeyframeSettingsModalState;
-}>;

package/dist/components/Timeline/KeyframeSettingsModal.js

@@ -1,151 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KeyframeSettingsModal = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const client_id_1 = require("../../helpers/client-id");
-const colors_1 = require("../../helpers/colors");
-const modals_1 = require("../../state/modals");
-const Button_1 = require("../Button");
-const layout_1 = require("../layout");
-const ModalButton_1 = require("../ModalButton");
-const ModalFooter_1 = require("../ModalFooter");
-const ModalHeader_1 = require("../ModalHeader");
-const ComboBox_1 = require("../NewComposition/ComboBox");
-const DismissableModal_1 = require("../NewComposition/DismissableModal");
-const InputDragger_1 = require("../NewComposition/InputDragger");
-const call_update_keyframe_settings_1 = require("./call-update-keyframe-settings");
-const container = {
-    padding: 16,
-    width: 520,
-};
-const row = {
-    alignItems: 'center',
-    display: 'flex',
-    justifyContent: 'space-between',
-    marginBottom: 12,
-};
-const label = {
-    fontSize: 13,
-};
-const helperText = {
-    color: colors_1.WHITE_ALPHA_60,
-    fontSize: 12,
-    lineHeight: 1.4,
-    marginTop: 4,
-};
-const comboStyle = {
-    minWidth: 150,
-};
-const posterizeInputStyle = {
-    backgroundColor: colors_1.INPUT_BACKGROUND,
-    borderRadius: 4,
-    minWidth: 64,
-    textAlign: 'right',
-};
-const extrapolateOptions = [
-    'extend',
-    'clamp',
-    'identity',
-    'wrap',
-];
-const labelForExtrapolate = (value) => value[0].toUpperCase() + value.slice(1);
-const getExtrapolateValues = (onSelect) => {
-    return extrapolateOptions.map((value) => ({
-        type: 'item',
-        id: value,
-        keyHint: null,
-        label: labelForExtrapolate(value),
-        leftItem: null,
-        disabled: false,
-        onClick: () => onSelect(value),
-        quickSwitcherLabel: null,
-        subMenu: null,
-        value,
-    }));
-};
-const KeyframeSettingsModal = ({ state }) => {
-    var _a;
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const [left, setLeft] = (0, react_1.useState)(state.status.clamping.left);
-    const [right, setRight] = (0, react_1.useState)(state.status.clamping.right);
-    const [posterize, setPosterize] = (0, react_1.useState)((_a = state.status.posterize) !== null && _a !== void 0 ? _a : 0);
-    const [saving, setSaving] = (0, react_1.useState)(false);
-    const canEditClamping = state.status.interpolationFunction === 'interpolate';
-    const close = (0, react_1.useCallback)(() => {
-        setSelectedModal(null);
-    }, [setSelectedModal]);
-    const leftOptions = (0, react_1.useMemo)(() => getExtrapolateValues(setLeft), []);
-    const rightOptions = (0, react_1.useMemo)(() => getExtrapolateValues(setRight), []);
-    const onPosterizeChange = (0, react_1.useCallback)((value) => {
-        setPosterize(Math.max(0, Math.round(value)));
-    }, []);
-    const posterizeFormatter = (0, react_1.useCallback)((value) => {
-        const numericValue = Number(value);
-        return String(Math.round(numericValue));
-    }, []);
-    const onSave = (0, react_1.useCallback)(() => {
-        if (previewServerState.type !== 'connected') {
-            return;
-        }
-        const settings = {
-            type: 'settings',
-            clamping: canEditClamping ? { left, right } : undefined,
-            posterize: posterize <= 0 ? undefined : posterize,
-        };
-        setSaving(true);
-        const promise = state.effectIndex === null
-            ? (0, call_update_keyframe_settings_1.callUpdateSequenceKeyframeSettings)({
-                fileName: state.fileName,
-                nodePath: state.nodePath,
-                fieldKey: state.fieldKey,
-                settings,
-                schema: state.schema,
-                setPropStatuses,
-                clientId: previewServerState.clientId,
-            })
-            : (0, call_update_keyframe_settings_1.callUpdateEffectKeyframeSettings)({
-                fileName: state.fileName,
-                nodePath: state.nodePath,
-                effectIndex: state.effectIndex,
-                fieldKey: state.fieldKey,
-                settings,
-                schema: state.schema,
-                setPropStatuses,
-                clientId: previewServerState.clientId,
-            });
-        promise.then(close).finally(() => {
-            setSaving(false);
-        });
-    }, [
-        canEditClamping,
-        close,
-        left,
-        posterize,
-        previewServerState,
-        right,
-        setPropStatuses,
-        state,
-    ]);
-    const saveDisabled = saving || previewServerState.type !== 'connected';
-    return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { children: [
-            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Keyframe settings: ${state.fieldLabel}` }), jsx_runtime_1.jsxs("div", { style: container, children: [canEditClamping ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsxs("div", { style: row, children: [
-                                    jsx_runtime_1.jsx("div", { style: label, children: "Extrapolate left" }), jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: leftOptions, selectedId: left, title: "Extrapolate left", style: comboStyle })
-                                ] }), jsx_runtime_1.jsxs("div", { style: row, children: [
-                                    jsx_runtime_1.jsx("div", { style: label, children: "Extrapolate right" }), jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: rightOptions, selectedId: right, title: "Extrapolate right", style: comboStyle })
-                                ] })
-                        ] })) : null, jsx_runtime_1.jsxs("div", { style: row, children: [
-                            jsx_runtime_1.jsxs("div", { children: [
-                                    jsx_runtime_1.jsx("div", { style: label, children: "Posterize" }), jsx_runtime_1.jsx("div", { style: helperText, children: "Use 0 to turn posterization off." })
-                                ] }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: posterize, status: "ok", onValueChange: onPosterizeChange, onValueChangeEnd: onPosterizeChange, onTextChange: () => undefined, min: 0, step: 1, formatter: posterizeFormatter, rightAlign: true, style: posterizeInputStyle })
-                        ] })
-                ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsxs(layout_1.Row, { justify: "flex-end", align: "center", children: [
-                        jsx_runtime_1.jsx(Button_1.Button, { onClick: close, children: "Cancel" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx(ModalButton_1.ModalButton, { onClick: onSave, disabled: saveDisabled, children: "Save" })
-                    ] }) })
-        ] }));
-};
-exports.KeyframeSettingsModal = KeyframeSettingsModal;