@remotion/studio 4.0.494 → 4.0.496

package/dist/icons/video.d.ts

@@ -3,3 +3,6 @@ import React from 'react';
 export declare const FilmIcon: React.FC<SVGProps<SVGSVGElement> & {
     readonly color: string;
 }>;
+export declare const VideoFileIcon: React.FC<SVGProps<SVGSVGElement> & {
+    readonly color: string;
+}>;

package/dist/icons/video.js

@@ -1,8 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilmIcon = void 0;
+exports.VideoFileIcon = exports.FilmIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const FilmIcon = ({ color, ...props }) => {
     return (jsx_runtime_1.jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M448 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h384c35.35 0 64-28.65 64-64V96C512 60.65 483.3 32 448 32zM384 64v176H128V64H384zM32 96c0-17.64 14.36-32 32-32h32v80H32V96zM32 176h64v64H32V176zM32 272h64v64H32V272zM64 448c-17.64 0-32-14.36-32-32v-48h64V448H64zM128 448V272h256V448H128zM480 416c0 17.64-14.36 32-32 32h-32v-80h64V416zM480 336h-64v-64h64V336zM480 240h-64v-64h64V240zM480 144h-64V64h32c17.64 0 32 14.36 32 32V144z" }) }));
 };
 exports.FilmIcon = FilmIcon;
+const VideoFileIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l256 0c17.7 0 32-14.3 32-32l0-256c0-17.7-14.3-32-32-32L96 96zM32 128c0-35.3 28.7-64 64-64l256 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64L96 448c-35.3 0-64-28.7-64-64l0-256zm432 84l0-40 73.6-55.2c4.2-3.1 9.2-4.8 14.4-4.8 13.3 0 24 10.7 24 24l0 240c0 13.3-10.7 24-24 24-5.2 0-10.2-1.7-14.4-4.8l-73.6-55.2 0-40 80 60 0-208-80 60z" }) }));
+};
+exports.VideoFileIcon = VideoFileIcon;

package/dist/state/modals.d.ts

@@ -96,6 +96,13 @@ export type ConfirmationDialogState = {
     onConfirm: () => void;
     onCancel: () => void;
 };
+export type SvgImportDialogState = {
+    type: 'svg-import-dialog';
+    id: string;
+    onImage: () => void;
+    onInline: () => void;
+    onDismiss: () => void;
+};
 export type AddEffectModalState = {
     type: 'add-effect';
     fileName: string;
@@ -150,7 +157,7 @@ export type ModalState = {
     type: 'quick-switcher';
     mode: QuickSwitcherMode;
     invocationTimestamp: number;
-} | AddEffectModalState | ConfirmationDialogState;
+} | AddEffectModalState | ConfirmationDialogState | SvgImportDialogState;
 export type ModalContextType = {
     selectedModal: ModalState | null;
     setSelectedModal: React.Dispatch<React.SetStateAction<ModalState | null>>;

package/dist/state/timeline-zoom.js

@@ -18,24 +18,25 @@ exports.TimelineZoomCtx = (0, react_1.createContext)({
 const TimelineZoomContext = ({ children }) => {
     const [zoom, setZoomState] = (0, react_1.useState)(() => (0, ZoomPersistor_1.getZoomFromLocalStorage)());
     const setZoom = (0, react_1.useCallback)((compositionId, callback, options) => {
+        var _a, _b;
+        // Capture the old geometry before committing the new timeline width.
+        const preserveTimelineCursor = (0, timeline_scroll_logic_1.prepareToPreserveTimelineCursor)({
+            currentDurationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+            currentFrame: (0, imperative_state_1.getCurrentFrame)(),
+            anchorFrame: (_a = options === null || options === void 0 ? void 0 : options.anchorFrame) !== null && _a !== void 0 ? _a : null,
+            anchorContentX: (_b = options === null || options === void 0 ? void 0 : options.anchorContentX) !== null && _b !== void 0 ? _b : null,
+        });
         (0, react_dom_1.flushSync)(() => {
             setZoomState((prevZoomMap) => {
-                var _a, _b, _c, _d;
+                var _a;
                 const newZoomWithFloatingPointErrors = Math.min(exports.TIMELINE_MAX_ZOOM, Math.max(exports.TIMELINE_MIN_ZOOM, callback((_a = prevZoomMap[compositionId]) !== null && _a !== void 0 ? _a : exports.TIMELINE_MIN_ZOOM)));
                 const newZoom = Math.round(newZoomWithFloatingPointErrors * 10) / 10;
-                const anchorFrame = (_b = options === null || options === void 0 ? void 0 : options.anchorFrame) !== null && _b !== void 0 ? _b : null;
-                const anchorContentX = (_c = options === null || options === void 0 ? void 0 : options.anchorContentX) !== null && _c !== void 0 ? _c : null;
-                (0, timeline_scroll_logic_1.zoomAndPreserveCursor)({
-                    oldZoom: (_d = prevZoomMap[compositionId]) !== null && _d !== void 0 ? _d : exports.TIMELINE_MIN_ZOOM,
-                    newZoom,
-                    currentDurationInFrames: (0, imperative_state_1.getCurrentDuration)(),
-                    currentFrame: (0, imperative_state_1.getCurrentFrame)(),
-                    anchorFrame,
-                    anchorContentX,
-                });
                 return { ...prevZoomMap, [compositionId]: newZoom };
             });
         });
+        // The new scroll range exists now, so the browser will not clamp the offset
+        // against the previous width.
+        preserveTimelineCursor();
     }, []);
     const value = (0, react_1.useMemo)(() => {
         return {

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.494",
+	"version": "4.0.496",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
@@ -25,15 +25,15 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.494",
-		"@remotion/canvas-capture": "4.0.494",
-		"@remotion/player": "4.0.494",
-		"@remotion/media-utils": "4.0.494",
-		"@remotion/renderer": "4.0.494",
-		"@remotion/web-renderer": "4.0.494",
-		"@remotion/studio-shared": "4.0.494",
-		"@remotion/timeline-utils": "4.0.494",
-		"@remotion/zod-types": "4.0.494",
+		"remotion": "4.0.496",
+		"@remotion/canvas-capture": "4.0.496",
+		"@remotion/player": "4.0.496",
+		"@remotion/media-utils": "4.0.496",
+		"@remotion/renderer": "4.0.496",
+		"@remotion/web-renderer": "4.0.496",
+		"@remotion/studio-shared": "4.0.496",
+		"@remotion/timeline-utils": "4.0.496",
+		"@remotion/zod-types": "4.0.496",
 		"@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.494",
+		"@remotion/eslint-config-internal": "4.0.496",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},

package/dist/components/CurrentComposition.d.ts

@@ -1,2 +0,0 @@
-export declare const CURRENT_COMPOSITION_HEIGHT = 66;
-export declare const CurrentComposition: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/InspectorPanel/DefaultInspector.js

@@ -1,97 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DefaultInspector = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
-const VisualControls_1 = require("../../visual-controls/VisualControls");
-const CurrentAsset_1 = require("../CurrentAsset");
-const CurrentComposition_1 = require("../CurrentComposition");
-const DefaultPropsEditor_1 = require("../DefaultPropsEditor");
-const get_zod_if_possible_1 = require("../get-zod-if-possible");
-const is_menu_item_1 = require("../Menu/is-menu-item");
-const ObserveDefaultPropsContext_1 = require("../ObserveDefaultPropsContext");
-const DataEditor_1 = require("../RenderModal/DataEditor");
-const zod_schema_type_1 = require("../RenderModal/SchemaEditor/zod-schema-type");
-const WarningIndicatorButton_1 = require("../RenderModal/WarningIndicatorButton");
-const SegmentedControl_1 = require("../SegmentedControl");
-const VisualControlsContent_1 = require("../VisualControls/VisualControlsContent");
-const common_1 = require("./common");
-const CompositionDimensions_1 = require("./CompositionDimensions");
-const styles_1 = require("./styles");
-const DefaultInspector = ({ composition, currentDefaultProps, readOnlyStudio, setDefaultProps }) => {
-    var _a, _b;
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const hasSelectedAsset = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset';
-    const z = (0, get_zod_if_possible_1.useZodIfPossible)();
-    const canSaveDefaultProps = (0, react_1.useContext)(ObserveDefaultPropsContext_1.ObserveDefaultPropsContext);
-    const { handles: visualControlHandles } = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
-    const [defaultPropsMode, setDefaultPropsMode] = (0, react_1.useState)('schema');
-    const compositionId = (_a = composition === null || composition === void 0 ? void 0 : composition.id) !== null && _a !== void 0 ? _a : null;
-    const hasVisualControls = interactivity_enabled_1.studioInteractivityEnabled && Object.keys(visualControlHandles).length > 0;
-    (0, react_1.useEffect)(() => {
-        setDefaultPropsMode('schema');
-    }, [compositionId]);
-    const defaultPropsModeItems = (0, react_1.useMemo)(() => {
-        return [
-            {
-                key: 'schema',
-                label: 'Schema',
-                onClick: () => {
-                    setDefaultPropsMode('schema');
-                },
-                selected: defaultPropsMode === 'schema',
-            },
-            {
-                key: 'json',
-                label: 'JSON',
-                onClick: () => {
-                    setDefaultPropsMode('json');
-                },
-                selected: defaultPropsMode === 'json',
-            },
-        ];
-    }, [defaultPropsMode]);
-    const canShowDefaultPropsSection = (0, react_1.useMemo)(() => {
-        if (!z || !(composition === null || composition === void 0 ? void 0 : composition.schema) || !composition.defaultProps) {
-            return false;
-        }
-        if (!(typeof composition.schema.safeParse ===
-            'function')) {
-            return false;
-        }
-        return (0, zod_schema_type_1.getZodSchemaType)(composition.schema) !== 'any';
-    }, [composition === null || composition === void 0 ? void 0 : composition.defaultProps, composition === null || composition === void 0 ? void 0 : composition.schema, z]);
-    const { setShowWarning, showWarning } = (0, DataEditor_1.useDataEditorWarningVisibility)();
-    const { warnings: defaultPropsWarnings } = (0, DataEditor_1.useDataEditorWarnings)({
-        canSaveDefaultProps: (_b = canSaveDefaultProps === null || canSaveDefaultProps === void 0 ? void 0 : canSaveDefaultProps.canSaveDefaultProps) !== null && _b !== void 0 ? _b : null,
-        defaultProps: currentDefaultProps,
-        mode: defaultPropsMode,
-        propsEditType: 'default-props',
-        showCannotSaveDefaultPropsWarning: canShowDefaultPropsSection,
-    });
-    if (hasSelectedAsset) {
-        return (jsx_runtime_1.jsx("div", { style: styles_1.scrollableContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx("div", { style: styles_1.compositionSection, children: jsx_runtime_1.jsx(CurrentAsset_1.CurrentAsset, { readOnlyStudio: readOnlyStudio }) }) }));
-    }
-    if (composition === null) {
-        return jsx_runtime_1.jsx("div", { style: styles_1.container });
-    }
-    return (jsx_runtime_1.jsxs("div", { style: styles_1.scrollableContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
-            jsx_runtime_1.jsxs("div", { style: styles_1.compositionSection, children: [
-                    jsx_runtime_1.jsx(CurrentComposition_1.CurrentComposition, {}), jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(CompositionDimensions_1.CompositionDimensions, { compositionId: composition.id, disabled: readOnlyStudio, stack: composition.stack })
-                ] }), canShowDefaultPropsSection ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsxs("div", { style: styles_1.defaultPropsSection, children: [
-                            jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderRow, children: [
-                                        jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderStart, children: [
-                                                jsx_runtime_1.jsx("span", { style: styles_1.sectionHeaderTitle, children: "Default Props" }), jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: defaultPropsModeItems, needsWrapping: false, size: "compact" })
-                                            ] }), jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderEnd, children: defaultPropsWarnings.length > 0 ? (jsx_runtime_1.jsx(WarningIndicatorButton_1.WarningIndicatorButton, { setShowWarning: setShowWarning, showWarning: showWarning, warningCount: defaultPropsWarnings.length, size: "compact" })) : null })
-                                    ] }) }), defaultPropsWarnings.length > 0 && showWarning ? (jsx_runtime_1.jsx("div", { style: styles_1.defaultPropsWarningContainer, children: jsx_runtime_1.jsx(common_1.InspectorDefaultPropsWarnings, { warnings: defaultPropsWarnings }) })) : null, jsx_runtime_1.jsx(DefaultPropsEditor_1.DefaultPropsEditor, { unresolvedComposition: composition, defaultProps: currentDefaultProps, setDefaultProps: setDefaultProps, propsEditType: "default-props", schemaErrorMode: "compact", layout: "inspector", mode: defaultPropsMode, onModeChange: setDefaultPropsMode, hideModeControls: canShowDefaultPropsSection, warnings: defaultPropsWarnings, showWarning: false, setShowWarning: setShowWarning, hideWarningButton: true }, composition.id)
-                        ] })
-                ] })) : null, hasVisualControls ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsxs("div", { style: styles_1.visualControlsSection, children: [
-                            jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: "Visual Controls" }), jsx_runtime_1.jsx(VisualControlsContent_1.VisualControlsContent, {})
-                        ] })
-                ] })) : null] }));
-};
-exports.DefaultInspector = DefaultInspector;