@remotion/studio 4.0.467 → 4.0.469

package/dist/esm/renderEntry.mjs

@@ -1,6 +1,7 @@
 import {
-  __require
-} from "./chunk-5gtx3pza.js";
+  __require,
+  __toESM
+} from "./chunk-6jf1natv.js";
 
 // src/renderEntry.tsx
 import { useContext, useEffect, useRef, useState } from "react";
@@ -206,7 +207,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-vwnse6c9.js").then(({ StudioInternals }) => {
+    import("./chunk-1mp51e0w.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/helpers/calculate-timeline.js

@@ -46,6 +46,7 @@ const calculateTimeline = ({ sequences, overrideIdsToNodePaths, }) => {
         const visibleDuration = (0, get_sequence_visible_range_1.getTimelineVisibleDuration)(sequence, sortedSequences);
         const overrideId = (_b = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.overrideId) !== null && _b !== void 0 ? _b : null;
         const nodePath = overrideId ? overrideIdsToNodePaths[overrideId] : null;
+        const hasKeyframeRows = sequence.controls !== null || sequence.effects.length > 0;
         tracks.push({
             sequence: {
                 ...sequence,
@@ -59,6 +60,9 @@ const calculateTimeline = ({ sequences, overrideIdsToNodePaths, }) => {
             hash: actualHash,
             cascadedStart,
             cascadedDuration: sequence.duration,
+            keyframeDisplayOffset: hasKeyframeRows
+                ? cascadedStart - sequence.from
+                : 0,
             nodePathInfo: nodePath
                 ? {
                     sequenceSubscriptionKey: nodePath,

package/dist/helpers/colors.d.ts

@@ -20,7 +20,7 @@ export declare const LIGHT_TRANSPARENT = "rgba(255, 255, 255, 0.7)";
 export declare const UNSELECTED_GUIDE = "#7e1219";
 export declare const SELECTED_GUIDE = "#d22d3a";
 export declare const LINE_COLOR = "#363A3E";
-export declare const TIMELINE_TRACK_SEPARATOR = "rgba(0, 0, 0, 0.3)";
+export declare const TIMELINE_TRACK_SEPARATOR = "#13161B";
 export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
     selected: boolean;
     hovered: boolean;

package/dist/helpers/colors.js

@@ -24,7 +24,7 @@ exports.LIGHT_TRANSPARENT = 'rgba(255, 255, 255, 0.7)';
 exports.UNSELECTED_GUIDE = '#7e1219';
 exports.SELECTED_GUIDE = '#d22d3a';
 exports.LINE_COLOR = '#363A3E';
-exports.TIMELINE_TRACK_SEPARATOR = 'rgba(0, 0, 0, 0.3)';
+exports.TIMELINE_TRACK_SEPARATOR = '#13161B';
 const getBackgroundFromHoverState = ({ selected, hovered, }) => {
     if (selected) {
         if (hovered) {

package/dist/helpers/get-timeline-sequence-sort-key.d.ts

@@ -9,6 +9,7 @@ type Track = {
     sequence: TSequence;
     depth: number;
     nodePathInfo: SequenceNodePathInfo | null;
+    keyframeDisplayOffset: number;
 };
 export type TrackWithHash = Track & {
     hash: string;

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

@@ -52,10 +52,11 @@ export declare const getExpandedTrackHeight: ({ sequence, nodePathInfo, getIsExp
     getIsExpanded: GetIsExpanded;
     codeValues: CodeValues;
 }) => number;
-export declare const TIMELINE_LAYER_HEIGHT_VIDEO = 75;
-export declare const TIMELINE_LAYER_HEIGHT_IMAGE = 58;
-export declare const TIMELINE_LAYER_HEIGHT_AUDIO = 58;
-export declare const TIMELINE_LAYER_HEIGHT_DEFAULT = 25;
-export declare const TIMELINE_LIST_ITEM_ROW_HEIGHT = 25;
-export declare const TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT = 25;
-export declare const getTimelineLayerHeight: (type: "audio" | "image" | "other" | "sequence" | "video") => 25 | 58 | 75;
+export declare const TIMELINE_LAYER_FILMSTRIP_HEIGHT = 26;
+export declare const TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT = 17;
+export declare const TIMELINE_LAYER_HEIGHT_VIDEO: number;
+export declare const TIMELINE_LAYER_HEIGHT_IMAGE = 26;
+export declare const TIMELINE_LAYER_HEIGHT_AUDIO = 34;
+export declare const TIMELINE_LAYER_HEIGHT_DEFAULT = 21;
+export declare const TIMELINE_LIST_ITEM_ROW_HEIGHT = 21;
+export declare const getTimelineLayerHeight: (type: "audio" | "image" | "other" | "sequence" | "video") => number;

package/dist/helpers/timeline-layout.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTimelineLayerHeight = exports.TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT = exports.TIMELINE_LIST_ITEM_ROW_HEIGHT = exports.TIMELINE_LAYER_HEIGHT_DEFAULT = exports.TIMELINE_LAYER_HEIGHT_AUDIO = exports.TIMELINE_LAYER_HEIGHT_IMAGE = exports.TIMELINE_LAYER_HEIGHT_VIDEO = exports.getExpandedTrackHeight = exports.getTreeRowHeight = exports.flattenVisibleTreeNodes = exports.buildTimelineTree = exports.EXPANDED_SECTION_PADDING_RIGHT = exports.TREE_GROUP_ROW_HEIGHT = exports.TIMELINE_TRACK_EXPANDED_HEIGHT = exports.TIMELINE_ITEM_BORDER_BOTTOM = exports.TIMELINE_BORDER = exports.TIMELINE_PADDING = exports.SCHEMA_FIELD_ROW_HEIGHT = exports.getFieldsToShow = exports.getEffectFieldsToShow = void 0;
+exports.getTimelineLayerHeight = exports.TIMELINE_LIST_ITEM_ROW_HEIGHT = exports.TIMELINE_LAYER_HEIGHT_DEFAULT = exports.TIMELINE_LAYER_HEIGHT_AUDIO = exports.TIMELINE_LAYER_HEIGHT_IMAGE = exports.TIMELINE_LAYER_HEIGHT_VIDEO = exports.TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT = exports.TIMELINE_LAYER_FILMSTRIP_HEIGHT = exports.getExpandedTrackHeight = exports.getTreeRowHeight = exports.flattenVisibleTreeNodes = exports.buildTimelineTree = exports.EXPANDED_SECTION_PADDING_RIGHT = exports.TREE_GROUP_ROW_HEIGHT = exports.TIMELINE_TRACK_EXPANDED_HEIGHT = exports.TIMELINE_ITEM_BORDER_BOTTOM = exports.TIMELINE_BORDER = exports.TIMELINE_PADDING = exports.SCHEMA_FIELD_ROW_HEIGHT = exports.getFieldsToShow = exports.getEffectFieldsToShow = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const studio_shared_2 = require("@remotion/studio-shared");
 Object.defineProperty(exports, "getEffectFieldsToShow", { enumerable: true, get: function () { return studio_shared_2.getEffectFieldsToShow; } });
@@ -138,14 +138,15 @@ const getExpandedTrackHeight = ({ sequence, nodePathInfo, getIsExpanded, codeVal
     return totalRowsHeight + separators;
 };
 exports.getExpandedTrackHeight = getExpandedTrackHeight;
-exports.TIMELINE_LAYER_HEIGHT_VIDEO = 75;
-exports.TIMELINE_LAYER_HEIGHT_IMAGE = 58;
-exports.TIMELINE_LAYER_HEIGHT_AUDIO = 58;
-exports.TIMELINE_LAYER_HEIGHT_DEFAULT = 25;
-// The horizontal row inside a timeline list item (eye + arrow + label).
-exports.TIMELINE_LIST_ITEM_ROW_HEIGHT = 25;
+exports.TIMELINE_LAYER_FILMSTRIP_HEIGHT = 26;
 // The waveform stripe rendered underneath the filmstrip in TimelineVideoInfo.
-exports.TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT = 25;
+exports.TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT = 17;
+exports.TIMELINE_LAYER_HEIGHT_VIDEO = 2 + exports.TIMELINE_LAYER_FILMSTRIP_HEIGHT + exports.TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT;
+exports.TIMELINE_LAYER_HEIGHT_IMAGE = 26;
+exports.TIMELINE_LAYER_HEIGHT_AUDIO = 34;
+exports.TIMELINE_LAYER_HEIGHT_DEFAULT = 21;
+// The horizontal row inside a timeline list item (eye + arrow + label).
+exports.TIMELINE_LIST_ITEM_ROW_HEIGHT = 21;
 const getTimelineLayerHeight = (type) => {
     if (type === 'video') {
         return exports.TIMELINE_LAYER_HEIGHT_VIDEO;

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

@@ -0,0 +1,2 @@
+import type { SequenceNodePathInfo } from './get-timeline-sequence-sort-key';
+export declare const timelineNodePathInfoToKey: (info: SequenceNodePathInfo) => string;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.timelineNodePathInfoToKey = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const timelineNodePathInfoToKey = (info) => [
+    (0, studio_shared_1.stringifySequenceExpandedRowKey)(info.sequenceSubscriptionKey),
+    info.auxiliaryKeys.join('.'),
+    info.index,
+].join('.');
+exports.timelineNodePathInfoToKey = timelineNodePathInfoToKey;

package/package.json

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

package/dist/components/Timeline/TimelineStack/index.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import type { TSequence } from 'remotion';
-import type { OriginalPosition } from '../../../error-overlay/react-overlay/utils/get-source-map';
-export declare const TimelineStack: React.FC<{
-    readonly isCompact: boolean;
-    readonly sequence: TSequence;
-    readonly originalLocation: OriginalPosition | null;
-}>;

package/dist/components/Timeline/TimelineStack/index.js

@@ -1,119 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineStack = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const client_id_1 = require("../../../helpers/client-id");
-const colors_1 = require("../../../helpers/colors");
-const get_git_menu_item_1 = require("../../../helpers/get-git-menu-item");
-const open_in_editor_1 = require("../../../helpers/open-in-editor");
-const layout_1 = require("../../layout");
-const NotificationCenter_1 = require("../../Notifications/NotificationCenter");
-const Spinner_1 = require("../../Spinner");
-const source_attribution_1 = require("./source-attribution");
-const TimelineStack = ({ isCompact, sequence, originalLocation }) => {
-    const [stackHovered, setStackHovered] = (0, react_1.useState)(false);
-    const [titleHovered, setTitleHovered] = (0, react_1.useState)(false);
-    const [opening, setOpening] = (0, react_1.useState)(false);
-    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
-        .previewServerState.type;
-    const openEditor = (0, react_1.useCallback)(async (location) => {
-        if (!window.remotion_editorName) {
-            return;
-        }
-        setOpening(true);
-        try {
-            await (0, open_in_editor_1.openOriginalPositionInEditor)(location);
-        }
-        catch (err) {
-            (0, NotificationCenter_1.showNotification)(err.message, 2000);
-        }
-        finally {
-            setOpening(false);
-        }
-    }, []);
-    const canOpenInEditor = window.remotion_editorName &&
-        connectionStatus === 'connected' &&
-        originalLocation;
-    const canOpenInGitHub = window.remotion_gitSource && originalLocation;
-    const { documentationLink } = sequence;
-    const titleHoverable = documentationLink !== null;
-    const stackHoverable = !isCompact && (canOpenInEditor || canOpenInGitHub);
-    const onClickTitle = (0, react_1.useCallback)(() => {
-        if (documentationLink === null) {
-            return null;
-        }
-        window.open(documentationLink, '_blank', 'noopener,noreferrer');
-    }, [documentationLink]);
-    const onClickStack = (0, react_1.useCallback)(() => {
-        if (!originalLocation) {
-            return;
-        }
-        if (canOpenInEditor) {
-            openEditor(originalLocation);
-            return;
-        }
-        if (canOpenInGitHub) {
-            window.open((0, get_git_menu_item_1.getGitRefUrl)(window.remotion_gitSource, originalLocation), '_blank');
-        }
-    }, [canOpenInEditor, canOpenInGitHub, openEditor, originalLocation]);
-    const onStackPointerEnter = (0, react_1.useCallback)(() => {
-        setStackHovered(true);
-    }, []);
-    const onStackPointerLeave = (0, react_1.useCallback)(() => {
-        setStackHovered(false);
-    }, []);
-    const onTitlePointerEnter = (0, react_1.useCallback)(() => {
-        setTitleHovered(true);
-    }, []);
-    const onTitlePointerLeave = (0, react_1.useCallback)(() => {
-        setTitleHovered(false);
-    }, []);
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            fontSize: 12,
-            color: opening
-                ? colors_1.VERY_LIGHT_TEXT
-                : stackHovered && stackHoverable
-                    ? colors_1.LIGHT_TEXT
-                    : colors_1.VERY_LIGHT_TEXT,
-            marginLeft: 5,
-            cursor: stackHoverable ? 'pointer' : undefined,
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            whiteSpace: 'nowrap',
-            textOverflow: 'ellipsis',
-            overflow: 'hidden',
-            flexShrink: 100000,
-            userSelect: 'none',
-            WebkitUserSelect: 'none',
-        };
-    }, [opening, stackHovered, stackHoverable]);
-    const titleStyle = (0, react_1.useMemo)(() => {
-        const hoverEffect = titleHovered && titleHoverable;
-        return {
-            fontSize: 12,
-            whiteSpace: 'nowrap',
-            textOverflow: 'ellipsis',
-            overflow: 'hidden',
-            lineHeight: 1.2,
-            color: opening && isCompact ? colors_1.VERY_LIGHT_TEXT : colors_1.LIGHT_COLOR,
-            userSelect: 'none',
-            WebkitUserSelect: 'none',
-            textDecoration: hoverEffect ? 'underline' : 'none',
-            textUnderlineOffset: 2,
-            cursor: hoverEffect ? 'pointer' : undefined,
-        };
-    }, [titleHoverable, isCompact, opening, titleHovered]);
-    const text = sequence.displayName.length > 1000
-        ? sequence.displayName.slice(0, 1000) + '...'
-        : sequence.displayName;
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("div", { onPointerEnter: onTitlePointerEnter, onPointerLeave: onTitlePointerLeave, title: documentationLink
-                    ? `Open documentation: ${documentationLink}`
-                    : text || '<Sequence>', style: titleStyle, onClick: onClickTitle, children: text || '<Sequence>' }), isCompact || !originalLocation ? null : (jsx_runtime_1.jsx("div", { onPointerEnter: onStackPointerEnter, onPointerLeave: onStackPointerLeave, onClick: onClickStack, style: style, children: (0, source_attribution_1.getOriginalSourceAttribution)(originalLocation) })), opening ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 12 })
-                ] })) : null] }));
-};
-exports.TimelineStack = TimelineStack;

package/dist/esm/chunk-5gtx3pza.js

@@ -1,9 +0,0 @@
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined")
-    return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-
-export { __require };