@remotion/studio 4.0.484 → 4.0.485

package/dist/esm/renderEntry.mjs

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

package/dist/helpers/render-codec-label.d.ts

@@ -1,2 +1,2 @@
 export declare const renderHumanReadableAudioCodec: (codec: "aac" | "ac3" | "alaw" | "eac3" | "flac" | "mp3" | "opus" | "pcm-f32" | "pcm-f32be" | "pcm-f64" | "pcm-f64be" | "pcm-s16" | "pcm-s16be" | "pcm-s24" | "pcm-s24be" | "pcm-s32" | "pcm-s32be" | "pcm-s8" | "pcm-u8" | "ulaw" | "vorbis" | null) => string;
-export declare const renderHumanReadableVideoCodec: (codec: "av1" | "avc" | "hevc" | "vp8" | "vp9" | null) => string;
+export declare const renderHumanReadableVideoCodec: (codec: "av1" | "avc" | "hevc" | "prores" | "vp8" | "vp9" | null) => string;

package/dist/helpers/timeline-layout.d.ts

@@ -1,9 +1,9 @@
-import { type AnySchemaFieldInfo, type DragOverrides, type EffectSchemaFieldInfo, type SchemaFieldGroup, type SchemaFieldGroupInfo, type PropStatuses, type SchemaFieldInfo, type SequenceControls, type InteractivitySchemaFieldInfo } from '@remotion/studio-shared';
+import { type AnySchemaFieldInfo, type DragOverrides, type EffectSchemaFieldInfo, type InteractivitySchemaFieldInfo, type SchemaFieldGroup, type SchemaFieldGroupInfo, type PropStatuses, type SchemaFieldInfo, type SequenceControls } from '@remotion/studio-shared';
 import type { GetDragOverrides, GetEffectDragOverrides, InteractivitySchema as InteractivitySchemaShape, TSequence } from 'remotion';
 import type { GetIsExpanded } from '../components/ExpandedTracksProvider';
 import type { SequenceNodePathInfo } from './get-timeline-sequence-sort-key';
 export { SCHEMA_FIELD_GROUPS, getEffectFieldsToShow, getFieldsToShow, getSchemaFieldGroup, SCHEMA_FIELD_ROW_HEIGHT, } from '@remotion/studio-shared';
-export type { AnySchemaFieldInfo, DragOverrides, EffectSchemaFieldInfo, PropStatuses, SchemaFieldGroup, SchemaFieldGroupInfo, SchemaFieldInfo, SequenceControls, InteractivitySchemaFieldInfo, };
+export type { AnySchemaFieldInfo, DragOverrides, EffectSchemaFieldInfo, InteractivitySchemaFieldInfo, PropStatuses, SchemaFieldGroup, SchemaFieldGroupInfo, SchemaFieldInfo, SequenceControls, };
 export declare const TIMELINE_PADDING = 16;
 export declare const TIMELINE_BORDER = 1;
 export declare const TIMELINE_ITEM_BORDER_BOTTOM = 1;
@@ -29,12 +29,13 @@ export type TimelineTreeNode = {
     readonly label: string;
     readonly field: AnySchemaFieldInfo | null;
 };
-export declare const buildTimelineTree: ({ sequence, nodePathInfo, getDragOverrides, getEffectDragOverrides, propStatuses, }: {
+export declare const buildTimelineTree: ({ sequence, nodePathInfo, getDragOverrides, getEffectDragOverrides, propStatuses, includeTextContent, }: {
     sequence: TSequence;
     nodePathInfo: SequenceNodePathInfo;
     getDragOverrides: GetDragOverrides;
     getEffectDragOverrides: GetEffectDragOverrides;
     propStatuses: PropStatuses;
+    includeTextContent: boolean;
 }) => TimelineTreeNode[];
 export type FlatTreeRow = {
     readonly node: TimelineTreeNode;

package/dist/helpers/timeline-layout.js

@@ -14,7 +14,7 @@ exports.TIMELINE_ITEM_BORDER_BOTTOM = 1;
 exports.TIMELINE_TRACK_EXPANDED_HEIGHT = 100;
 exports.TREE_GROUP_ROW_HEIGHT = 22;
 exports.EXPANDED_SECTION_PADDING_RIGHT = 10;
-const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getEffectDragOverrides, propStatuses, }) => {
+const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getEffectDragOverrides, propStatuses, includeTextContent, }) => {
     var _a;
     const roots = [];
     const { sequenceSubscriptionKey, index, auxiliaryKeys, supportsEffects } = nodePathInfo;
@@ -24,6 +24,7 @@ const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getEffect
         getDragOverrides,
         propStatuses,
         nodePath: sequenceSubscriptionKey,
+        includeTextContent,
     });
     if (controlFields && controlFields.length > 0) {
         for (const f of controlFields) {
@@ -134,6 +135,7 @@ const getExpandedTrackHeight = ({ sequence, nodePathInfo, getIsExpanded, propSta
         getDragOverrides: () => ({}),
         getEffectDragOverrides: () => ({}),
         propStatuses,
+        includeTextContent: false,
     });
     const flat = (0, exports.flattenVisibleTreeNodes)({ nodes: tree, getIsExpanded });
     if (flat.length === 0) {

package/dist/helpers/use-create-composition.d.ts

@@ -0,0 +1,35 @@
+import type { SymbolicatedStackFrame } from '@remotion/studio-shared';
+export declare const getUniqueCompositionName: (compositions: import("remotion").AnyComposition[]) => string;
+export declare const useCreateComposition: ({ compositions, durationInFrames, folderName, newId, parentName, selectedFrameRate, size, }: {
+    compositions: import("remotion").AnyComposition[];
+    durationInFrames: number;
+    folderName: string | null;
+    newId: string;
+    parentName: string | null;
+    selectedFrameRate: number;
+    size: {
+        width: number;
+        height: number;
+    };
+}) => {
+    codemod: {
+        type: "new-composition";
+        newId: string;
+        componentName: string;
+        componentImportPath: string;
+        folderName: string | null;
+        parentName: string | null;
+        newHeight: number;
+        newWidth: number;
+        newFps: number;
+        newDurationInFrames: number;
+    };
+    createComposition: ({ signal, symbolicatedStack, }: {
+        signal: AbortSignal;
+        symbolicatedStack: SymbolicatedStackFrame | null;
+    }) => Promise<import("@remotion/studio-shared").ApplyCodemodResponse>;
+    heightValidationMessage: string | null;
+    nameValidationMessage: string | null;
+    valid: boolean;
+    widthValidationMessage: string | null;
+};

package/dist/helpers/use-create-composition.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCreateComposition = exports.getUniqueCompositionName = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const actions_1 = require("../components/RenderQueue/actions");
+const url_state_1 = require("./url-state");
+const validate_new_comp_data_1 = require("./validate-new-comp-data");
+const toPascalCase = (value) => {
+    var _a;
+    const words = (_a = value.match(/[a-zA-Z0-9]+/g)) !== null && _a !== void 0 ? _a : [];
+    const candidate = words
+        .map((word) => `${word.charAt(0).toUpperCase()}${word.slice(1)}`)
+        .join('');
+    if (!candidate) {
+        return 'NewComposition';
+    }
+    if (/^[0-9]/.test(candidate)) {
+        return `Composition${candidate}`;
+    }
+    return candidate;
+};
+const waitForComposition = (compositionId) => {
+    return new Promise((resolve) => {
+        const started = Date.now();
+        const interval = window.setInterval(() => {
+            var _a;
+            var _b;
+            const compositionNames = (_b = (_a = window.remotion_getCompositionNames) === null || _a === void 0 ? void 0 : _a.call(window)) !== null && _b !== void 0 ? _b : [];
+            if (compositionNames.includes(compositionId) ||
+                Date.now() - started > 10000) {
+                window.clearInterval(interval);
+                resolve();
+            }
+        }, 100);
+    });
+};
+const getUniqueCompositionName = (compositions) => {
+    let counter = 1;
+    while (true) {
+        const name = counter === 1 ? 'NewComposition' : `NewComposition${counter}`;
+        const err = (0, validate_new_comp_data_1.validateCompositionName)(name, compositions);
+        if (!err) {
+            return name;
+        }
+        counter++;
+    }
+};
+exports.getUniqueCompositionName = getUniqueCompositionName;
+const useCreateComposition = ({ compositions, durationInFrames, folderName, newId, parentName, selectedFrameRate, size, }) => {
+    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
+    const componentName = (0, react_1.useMemo)(() => toPascalCase(newId), [newId]);
+    const nameValidationMessage = (0, react_1.useMemo)(() => {
+        return (0, validate_new_comp_data_1.validateCompositionName)(newId, compositions);
+    }, [compositions, newId]);
+    const widthValidationMessage = (0, react_1.useMemo)(() => {
+        return (0, validate_new_comp_data_1.validateCompositionDimension)('Width', size.width);
+    }, [size.width]);
+    const heightValidationMessage = (0, react_1.useMemo)(() => {
+        return (0, validate_new_comp_data_1.validateCompositionDimension)('Height', size.height);
+    }, [size.height]);
+    const codemod = (0, react_1.useMemo)(() => {
+        return {
+            type: 'new-composition',
+            newDurationInFrames: Number(durationInFrames),
+            newFps: Number(selectedFrameRate),
+            newHeight: Number(size.height),
+            newWidth: Number(size.width),
+            newId,
+            componentName,
+            componentImportPath: `./${componentName}`,
+            folderName,
+            parentName,
+        };
+    }, [
+        componentName,
+        durationInFrames,
+        folderName,
+        newId,
+        parentName,
+        selectedFrameRate,
+        size.height,
+        size.width,
+    ]);
+    const valid = nameValidationMessage === null &&
+        widthValidationMessage === null &&
+        heightValidationMessage === null;
+    const createComposition = (0, react_1.useCallback)(async ({ signal, symbolicatedStack, }) => {
+        const result = await (0, actions_1.applyCodemod)({
+            codemod,
+            dryRun: false,
+            signal,
+            symbolicatedStack,
+        });
+        if (result.success) {
+            await waitForComposition(newId);
+            setCanvasContent({ type: 'composition', compositionId: newId });
+            (0, url_state_1.pushUrl)(`/${newId}`);
+        }
+        return result;
+    }, [codemod, newId, setCanvasContent]);
+    return {
+        codemod,
+        createComposition,
+        heightValidationMessage,
+        nameValidationMessage,
+        valid,
+        widthValidationMessage,
+    };
+};
+exports.useCreateComposition = useCreateComposition;

package/dist/helpers/use-rename-composition.d.ts

@@ -0,0 +1,16 @@
+import type { RecastCodemod, SymbolicatedStackFrame } from '@remotion/studio-shared';
+export declare const useRenameComposition: ({ compositions, currentId, newId, }: {
+    compositions: import("remotion").AnyComposition[];
+    currentId: string;
+    newId: string;
+}) => {
+    codemod: RecastCodemod;
+    getValidationMessage: (value: string) => string | null;
+    renameComposition: ({ newCompositionId, signal, symbolicatedStack, }: {
+        newCompositionId: string;
+        signal: AbortSignal;
+        symbolicatedStack: SymbolicatedStackFrame | null;
+    }) => Promise<import("@remotion/studio-shared").ApplyCodemodResponse>;
+    valid: boolean;
+    validationMessage: string | null;
+};

package/dist/helpers/use-rename-composition.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRenameComposition = void 0;
+const react_1 = require("react");
+const actions_1 = require("../components/RenderQueue/actions");
+const url_state_1 = require("./url-state");
+const validate_new_comp_data_1 = require("./validate-new-comp-data");
+const useRenameComposition = ({ compositions, currentId, newId, }) => {
+    const getValidationMessage = (0, react_1.useCallback)((value) => {
+        if (value === currentId) {
+            return null;
+        }
+        return (0, validate_new_comp_data_1.validateCompositionName)(value, compositions);
+    }, [compositions, currentId]);
+    const getCodemod = (0, react_1.useCallback)((value) => {
+        return {
+            type: 'rename-composition',
+            idToRename: currentId,
+            newId: value,
+        };
+    }, [currentId]);
+    const validationMessage = (0, react_1.useMemo)(() => {
+        return getValidationMessage(newId);
+    }, [getValidationMessage, newId]);
+    const codemod = (0, react_1.useMemo)(() => {
+        return getCodemod(newId);
+    }, [getCodemod, newId]);
+    const valid = validationMessage === null && currentId !== newId;
+    const renameComposition = (0, react_1.useCallback)(async ({ newCompositionId, signal, symbolicatedStack, }) => {
+        const result = await (0, actions_1.applyCodemod)({
+            codemod: getCodemod(newCompositionId),
+            dryRun: false,
+            signal,
+            symbolicatedStack,
+        });
+        if (result.success) {
+            (0, url_state_1.pushUrl)(`/${newCompositionId}`);
+        }
+        return result;
+    }, [getCodemod]);
+    return {
+        codemod,
+        getValidationMessage,
+        renameComposition,
+        valid,
+        validationMessage,
+    };
+};
+exports.useRenameComposition = useRenameComposition;

package/dist/state/modals.d.ts

@@ -105,6 +105,9 @@ export type AddEffectModalState = {
 };
 export type ModalState = {
     type: 'new-comp';
+    folderName: string | null;
+    parentName: string | null;
+    stack: string | null;
 } | {
     type: 'duplicate-comp';
     compositionId: string;

package/dist/state/timeline-zoom.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineZoomContext = exports.TimelineZoomCtx = exports.TIMELINE_MAX_ZOOM = exports.TIMELINE_MIN_ZOOM = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const react_dom_1 = require("react-dom");
 const imperative_state_1 = require("../components/Timeline/imperative-state");
 const timeline_scroll_logic_1 = require("../components/Timeline/timeline-scroll-logic");
 const ZoomPersistor_1 = require("../components/ZoomPersistor");
@@ -17,21 +18,23 @@ 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) => {
-        setZoomState((prevZoomMap) => {
-            var _a, _b, _c, _d;
-            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,
+        (0, react_dom_1.flushSync)(() => {
+            setZoomState((prevZoomMap) => {
+                var _a, _b, _c, _d;
+                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 };
             });
-            return { ...prevZoomMap, [compositionId]: newZoom };
         });
     }, []);
     const value = (0, react_1.useMemo)(() => {

package/dist/state/z-index.d.ts

@@ -4,6 +4,7 @@ export declare const HigherZIndex: React.FC<{
     readonly onOutsideClick: (target: Node) => void;
     readonly children: React.ReactNode;
     readonly disabled?: boolean;
+    readonly outsideClickButton?: 'any' | 'primary';
 }>;
 export declare const useZIndex: () => {
     currentZIndex: number;

package/dist/state/z-index.js

@@ -31,7 +31,7 @@ const EscapeHook = ({ onEscape }) => {
     }, [keybindings, onEscape]);
     return null;
 };
-const HigherZIndex = ({ children, onEscape, onOutsideClick, disabled }) => {
+const HigherZIndex = ({ children, onEscape, onOutsideClick, disabled, outsideClickButton = 'any', }) => {
     const context = (0, react_1.useContext)(ZIndexContext);
     const highestContext = (0, react_1.useContext)(highest_z_index_1.HighestZIndexContext);
     const containerRef = (0, react_1.useRef)(null);
@@ -52,6 +52,9 @@ const HigherZIndex = ({ children, onEscape, onOutsideClick, disabled }) => {
         let onUp = null;
         const listener = (downEvent) => {
             var _a;
+            if (outsideClickButton === 'primary' && downEvent.button !== 0) {
+                return;
+            }
             const outsideClick = !((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(downEvent.target));
             if (!outsideClick) {
                 return;
@@ -83,7 +86,13 @@ const HigherZIndex = ({ children, onEscape, onOutsideClick, disabled }) => {
             onUp = null;
             return window.removeEventListener('pointerdown', listener, true);
         };
-    }, [currentIndex, disabled, highestContext.highestIndex, onOutsideClick]);
+    }, [
+        currentIndex,
+        disabled,
+        highestContext.highestIndex,
+        onOutsideClick,
+        outsideClickButton,
+    ]);
     const value = (0, react_1.useMemo)(() => {
         return {
             currentIndex,

package/package.json

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