@remotion/studio 4.0.469 → 4.0.471

package/dist/helpers/get-box-quads-ponyfill.d.ts

@@ -0,0 +1,10 @@
+export type GetBoxQuadsBox = 'margin' | 'border' | 'padding' | 'content';
+export type GetBoxQuadsPonyfillOptions = {
+    readonly box?: GetBoxQuadsBox;
+    readonly relativeTo?: Element;
+};
+/**
+ * Returns border/margin/padding/content box quads for an element.
+ * Uses the native API when available, otherwise the getBoxQuads ponyfill.
+ */
+export declare const getBoxQuadsPonyfill: (element: Element, options?: GetBoxQuadsPonyfillOptions | undefined) => readonly DOMQuad[] | null;

package/dist/helpers/get-box-quads-ponyfill.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBoxQuadsPonyfill = void 0;
+const get_box_quads_polyfill_internals_js_1 = require("./get-box-quads-polyfill-internals.js");
+const hasNativeGetBoxQuads = (element) => {
+    return (typeof element.getBoxQuads === 'function');
+};
+/**
+ * Returns border/margin/padding/content box quads for an element.
+ * Uses the native API when available, otherwise the getBoxQuads ponyfill.
+ */
+const getBoxQuadsPonyfill = (element, options) => {
+    try {
+        if (hasNativeGetBoxQuads(element)) {
+            return element.getBoxQuads(options);
+        }
+        return (0, get_box_quads_polyfill_internals_js_1.getBoxQuads)(element, options);
+    }
+    catch (_a) {
+        return null;
+    }
+};
+exports.getBoxQuadsPonyfill = getBoxQuadsPonyfill;

package/dist/helpers/get-left-of-timeline-slider.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getXPositionOfItemInTimelineImperatively = void 0;
 const timeline_layout_1 = require("./timeline-layout");
 const getXPositionOfItemInTimelineImperatively = (frame, duration, width) => {
-    const proportion = frame / (duration - 1);
+    const proportion = frame / duration;
     return proportion * (width - timeline_layout_1.TIMELINE_PADDING * 2) + timeline_layout_1.TIMELINE_PADDING;
 };
 exports.getXPositionOfItemInTimelineImperatively = getXPositionOfItemInTimelineImperatively;

package/dist/helpers/get-timeline-sequence-layout.js

@@ -3,35 +3,34 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTimelineSequenceLayout = exports.SEQUENCE_BORDER_WIDTH = void 0;
 const timeline_layout_1 = require("./timeline-layout");
 exports.SEQUENCE_BORDER_WIDTH = 1;
-const getWidthOfTrack = ({ durationInFrames, lastFrame, windowWidth, spatialDuration, nonNegativeMarginLeft, }) => {
+const getWidthOfTrack = ({ durationInFrames, timelineDuration, windowWidth, spatialDuration, nonNegativeMarginLeft, }) => {
     const fullWidth = windowWidth - timeline_layout_1.TIMELINE_PADDING * 2;
-    const base = durationInFrames === Infinity || lastFrame === 0
+    const base = durationInFrames === Infinity || timelineDuration <= 0
         ? fullWidth
-        : (spatialDuration / lastFrame) * fullWidth;
+        : (spatialDuration / timelineDuration) * fullWidth;
     return Math.max(0, base - exports.SEQUENCE_BORDER_WIDTH + nonNegativeMarginLeft);
 };
 const getTimelineSequenceLayout = ({ durationInFrames, startFrom, maxMediaDuration, startFromMedia, video, windowWidth, premountDisplay, postmountDisplay, }) => {
     var _a;
     const maxMediaSequenceDuration = (maxMediaDuration !== null && maxMediaDuration !== void 0 ? maxMediaDuration : Infinity) - startFromMedia;
     const timelineDuration = (_a = video.durationInFrames) !== null && _a !== void 0 ? _a : 1;
-    const lastFrame = timelineDuration - 1;
     const spatialDuration = Math.max(0, Math.min(maxMediaSequenceDuration, durationInFrames, timelineDuration - startFrom));
-    // Unclipped spatial duration: without the lastFrame - startFrom constraint
+    // Unclipped spatial duration: without the timeline-end constraint
     const naturalSpatialDuration = Math.max(0, Math.min(maxMediaSequenceDuration, durationInFrames));
-    const marginLeft = lastFrame === 0
+    const marginLeft = timelineDuration <= 0
         ? 0
-        : (startFrom / lastFrame) * (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2);
+        : (startFrom / timelineDuration) * (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2);
     const nonNegativeMarginLeft = Math.min(marginLeft, 0);
     const width = getWidthOfTrack({
         durationInFrames,
-        lastFrame,
+        timelineDuration,
         nonNegativeMarginLeft,
         spatialDuration,
         windowWidth,
     });
     const naturalWidth = getWidthOfTrack({
         durationInFrames,
-        lastFrame,
+        timelineDuration,
         nonNegativeMarginLeft,
         spatialDuration: naturalSpatialDuration,
         windowWidth,
@@ -39,7 +38,7 @@ const getTimelineSequenceLayout = ({ durationInFrames, startFrom, maxMediaDurati
     const premountWidth = premountDisplay
         ? getWidthOfTrack({
             durationInFrames: premountDisplay,
-            lastFrame,
+            timelineDuration,
             nonNegativeMarginLeft,
             spatialDuration: premountDisplay,
             windowWidth,
@@ -48,7 +47,7 @@ const getTimelineSequenceLayout = ({ durationInFrames, startFrom, maxMediaDurati
     const postmountWidth = postmountDisplay
         ? getWidthOfTrack({
             durationInFrames: postmountDisplay,
-            lastFrame,
+            timelineDuration,
             nonNegativeMarginLeft,
             spatialDuration: postmountDisplay,
             windowWidth,

package/dist/helpers/open-in-editor.d.ts

@@ -1,7 +1,24 @@
-import type { SymbolicatedStackFrame } from '@remotion/studio-shared';
+import type { CompositionComponentInfoResponse, SymbolicatedStackFrame } from '@remotion/studio-shared';
 import type { OriginalPosition } from '../error-overlay/react-overlay/utils/get-source-map';
-export declare const openInEditor: (stack: SymbolicatedStackFrame) => Promise<Response>;
+export declare const openInEditor: (stack: SymbolicatedStackFrame) => Promise<import("@remotion/studio-shared").OpenInEditorResponse>;
 export declare const openOriginalPositionInEditor: (originalPosition: OriginalPosition) => Promise<void>;
+type ResolvedCompositionComponentInfo = {
+    location: CompositionComponentInfoResponse['location'];
+    canAddSequence: boolean;
+};
+export declare const subscribeToCompositionComponentInfo: (listener: () => void) => () => void;
+export declare const getCachedCompositionComponentInfo: ({ compositionFile, compositionId, }: {
+    compositionFile: string;
+    compositionId: string;
+}) => ResolvedCompositionComponentInfo | null;
+export declare const useCachedCompositionComponentInfo: ({ compositionFile, compositionId, }: {
+    compositionFile: string | null;
+    compositionId: string | null;
+}) => ResolvedCompositionComponentInfo | null;
+export declare const loadCompositionComponentInfo: ({ compositionFile, compositionId, }: {
+    compositionFile: string;
+    compositionId: string;
+}) => Promise<ResolvedCompositionComponentInfo>;
 export declare const preloadCompositionComponentInfo: ({ compositionFile, compositionId, }: {
     compositionFile: string;
     compositionId: string;
@@ -10,3 +27,4 @@ export declare const openCompositionComponentInEditor: ({ compositionFile, compo
     compositionFile: string;
     compositionId: string;
 }) => Promise<void>;
+export {};

package/dist/helpers/open-in-editor.js

@@ -1,22 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.openCompositionComponentInEditor = exports.preloadCompositionComponentInfo = exports.openOriginalPositionInEditor = exports.openInEditor = void 0;
+exports.openCompositionComponentInEditor = exports.preloadCompositionComponentInfo = exports.loadCompositionComponentInfo = exports.useCachedCompositionComponentInfo = exports.getCachedCompositionComponentInfo = exports.subscribeToCompositionComponentInfo = exports.openOriginalPositionInEditor = exports.openInEditor = void 0;
+const react_1 = require("react");
+const call_api_1 = require("../components/call-api");
 const openInEditor = (stack) => {
     const { originalFileName, originalLineNumber, originalColumnNumber, originalFunctionName, originalScriptCode, } = stack;
-    return fetch(`/api/open-in-editor`, {
-        method: 'post',
-        headers: {
-            'content-type': 'application/json',
+    return (0, call_api_1.callApi)('/api/open-in-editor', {
+        stack: {
+            originalFileName,
+            originalLineNumber,
+            originalColumnNumber,
+            originalFunctionName,
+            originalScriptCode,
         },
-        body: JSON.stringify({
-            stack: {
-                originalFileName,
-                originalLineNumber,
-                originalColumnNumber,
-                originalFunctionName,
-                originalScriptCode,
-            },
-        }),
     });
 };
 exports.openInEditor = openInEditor;
@@ -31,9 +27,40 @@ const openOriginalPositionInEditor = async (originalPosition) => {
 };
 exports.openOriginalPositionInEditor = openOriginalPositionInEditor;
 const componentResolutionCache = new Map();
+const componentResolutionResults = new Map();
+const componentResolutionListeners = new Set();
 const getComponentResolutionCacheKey = ({ compositionFile, compositionId, }) => {
     return `${compositionFile}::${compositionId}`;
 };
+const notifyComponentResolutionListeners = () => {
+    for (const listener of componentResolutionListeners) {
+        listener();
+    }
+};
+const subscribeToCompositionComponentInfo = (listener) => {
+    componentResolutionListeners.add(listener);
+    return () => {
+        componentResolutionListeners.delete(listener);
+    };
+};
+exports.subscribeToCompositionComponentInfo = subscribeToCompositionComponentInfo;
+const getCachedCompositionComponentInfo = ({ compositionFile, compositionId, }) => {
+    var _a;
+    return ((_a = componentResolutionResults.get(getComponentResolutionCacheKey({ compositionFile, compositionId }))) !== null && _a !== void 0 ? _a : null);
+};
+exports.getCachedCompositionComponentInfo = getCachedCompositionComponentInfo;
+const useCachedCompositionComponentInfo = ({ compositionFile, compositionId, }) => {
+    return (0, react_1.useSyncExternalStore)(exports.subscribeToCompositionComponentInfo, () => {
+        if (compositionFile === null || compositionId === null) {
+            return null;
+        }
+        return (0, exports.getCachedCompositionComponentInfo)({
+            compositionFile,
+            compositionId,
+        });
+    }, () => null);
+};
+exports.useCachedCompositionComponentInfo = useCachedCompositionComponentInfo;
 const loadCompositionComponentInfo = async ({ compositionFile, compositionId, }) => {
     const cacheKey = getComponentResolutionCacheKey({
         compositionFile,
@@ -44,24 +71,17 @@ const loadCompositionComponentInfo = async ({ compositionFile, compositionId, })
         return existing;
     }
     const promise = (async () => {
-        const response = await fetch(`/api/composition-component-info`, {
-            method: 'post',
-            headers: {
-                'content-type': 'application/json',
-            },
-            body: JSON.stringify({
-                compositionFile,
-                compositionId,
-            }),
+        const body = await (0, call_api_1.callApi)('/api/composition-component-info', {
+            compositionFile,
+            compositionId,
         });
-        const body = (await response.json());
-        if (!body.success) {
-            throw new Error(body.error);
-        }
-        return {
+        const result = {
             location: body.location,
             canAddSequence: body.canAddSequence,
         };
+        componentResolutionResults.set(cacheKey, result);
+        notifyComponentResolutionListeners();
+        return result;
     })();
     componentResolutionCache.set(cacheKey, promise);
     try {
@@ -69,18 +89,21 @@ const loadCompositionComponentInfo = async ({ compositionFile, compositionId, })
     }
     catch (err) {
         componentResolutionCache.delete(cacheKey);
+        componentResolutionResults.delete(cacheKey);
+        notifyComponentResolutionListeners();
         throw err;
     }
 };
+exports.loadCompositionComponentInfo = loadCompositionComponentInfo;
 const preloadCompositionComponentInfo = ({ compositionFile, compositionId, }) => {
-    loadCompositionComponentInfo({
+    (0, exports.loadCompositionComponentInfo)({
         compositionFile,
         compositionId,
     }).catch(() => undefined);
 };
 exports.preloadCompositionComponentInfo = preloadCompositionComponentInfo;
 const openCompositionComponentInEditor = async ({ compositionFile, compositionId, }) => {
-    const info = await loadCompositionComponentInfo({
+    const info = await (0, exports.loadCompositionComponentInfo)({
         compositionFile,
         compositionId,
     });

package/dist/helpers/use-menu-structure.js

@@ -114,7 +114,6 @@ const getFileMenu = ({ readOnlyStudio, closeMenu, previewServerState, setSelecte
                         originalFunctionName: null,
                         originalScriptCode: null,
                     })
-                        .then((res) => res.json())
                         .then(({ success }) => {
                         if (!success) {
                             (0, NotificationCenter_1.showNotification)(`Could not open ${window.remotion_editorName}`, 2000);
@@ -172,7 +171,6 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
     const resolvedCompositionLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.stack) !== null && _a !== void 0 ? _a : null);
     (0, react_1.useEffect)(() => {
         if (type !== 'connected' ||
-            !window.remotion_editorName ||
             !currentComposition ||
             !(resolvedCompositionLocation === null || resolvedCompositionLocation === void 0 ? void 0 : resolvedCompositionLocation.source)) {
             return;
@@ -664,20 +662,12 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                         type: 'item',
                         quickSwitcherLabel: 'Open spring() Editor',
                     },
-                ].filter(remotion_1.Internals.truthy),
-                quickSwitcherLabel: null,
-            },
-            readOnlyStudio || remotion_packageManager === 'unknown'
-                ? null
-                : {
-                    id: 'install',
-                    label: 'Packages',
-                    leaveLeftPadding: false,
-                    items: [
-                        {
+                    readOnlyStudio || remotion_packageManager === 'unknown'
+                        ? null
+                        : {
                             id: 'install-packages',
                             value: 'install-packages',
-                            label: 'Install...',
+                            label: 'Install package',
                             onClick: () => {
                                 closeMenu();
                                 setSelectedModal({
@@ -689,10 +679,11 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                             keyHint: null,
                             leftItem: null,
                             subMenu: null,
-                            quickSwitcherLabel: `Install packages`,
+                            quickSwitcherLabel: `Install package`,
                         },
-                    ],
-                },
+                ].filter(remotion_1.Internals.truthy),
+                quickSwitcherLabel: null,
+            },
             {
                 id: 'help',
                 label: 'Help',

package/dist/renderEntry.js

@@ -186,13 +186,13 @@ const renderContent = (Root) => {
                 defaultPixelFormat: bundleMode.compositionDefaultPixelFormat,
                 defaultProResProfile: bundleMode.compositionDefaultProResProfile,
                 defaultSampleRate: bundleMode.compositionDefaultSampleRate,
-            }, initialCompositions: [], children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_a = window.remotion_logLevel) !== null && _a !== void 0 ? _a : 'info', numberOfAudioTags: 0, audioLatencyHint: (_b = window.remotion_audioLatencyHint) !== null && _b !== void 0 ? _b : 'playback', children: jsx_runtime_1.jsxs(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: [
+            }, initialCompositions: [], children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_a = window.remotion_logLevel) !== null && _a !== void 0 ? _a : 'info', numberOfAudioTags: 0, audioLatencyHint: (_b = window.remotion_audioLatencyHint) !== null && _b !== void 0 ? _b : 'playback', previewSampleRate: window.remotion_previewSampleRate, children: jsx_runtime_1.jsxs(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: [
                         jsx_runtime_1.jsx(Root, {}), jsx_runtime_1.jsx(GetVideoComposition, { state: bundleMode })
                     ] }) }) }));
         renderToDOM(markup);
     }
     if (bundleMode.type === 'evaluation') {
-        const markup = (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { initialCanvasContent: null, onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_c = window.remotion_logLevel) !== null && _c !== void 0 ? _c : 'info', numberOfAudioTags: 0, audioLatencyHint: (_d = window.remotion_audioLatencyHint) !== null && _d !== void 0 ? _d : 'playback', children: jsx_runtime_1.jsx(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: jsx_runtime_1.jsx(Root, {}) }) }) }));
+        const markup = (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { initialCanvasContent: null, onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_c = window.remotion_logLevel) !== null && _c !== void 0 ? _c : 'info', numberOfAudioTags: 0, audioLatencyHint: (_d = window.remotion_audioLatencyHint) !== null && _d !== void 0 ? _d : 'playback', previewSampleRate: window.remotion_previewSampleRate, children: jsx_runtime_1.jsx(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: jsx_runtime_1.jsx(Root, {}) }) }) }));
         renderToDOM(markup);
     }
     if (bundleMode.type === 'index') {

package/dist/state/z-index.js

@@ -70,7 +70,10 @@ const HigherZIndex = ({ children, onEscape, onOutsideClick, disabled }) => {
         // If a menu is opened, then this component will also still receive the pointerdown event.
         // However we may not interpret it as a outside click, so we need to wait for the next tick
         requestAnimationFrame(() => {
-            window.addEventListener('pointerdown', listener);
+            // The third argument `true` registers a capture-phase listener. Some Studio
+            // elements stop pointerdown propagation while still being outside the menu,
+            // so bubbling listeners would miss those clicks and keep the menu open.
+            window.addEventListener('pointerdown', listener, true);
         });
         return () => {
             if (onUp) {
@@ -78,7 +81,7 @@ const HigherZIndex = ({ children, onEscape, onOutsideClick, disabled }) => {
                 window.removeEventListener('pointerup', onUp, { once: true });
             }
             onUp = null;
-            return window.removeEventListener('pointerdown', listener);
+            return window.removeEventListener('pointerdown', listener, true);
         };
     }, [currentIndex, disabled, highestContext.highestIndex, onOutsideClick]);
     const value = (0, react_1.useMemo)(() => {

package/package.json

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

package/dist/components/Timeline/TimelineEffectGroupRow.js

@@ -1,153 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineEffectGroupRow = 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 timeline_layout_1 = require("../../helpers/timeline-layout");
-const call_api_1 = require("../call-api");
-const ContextMenu_1 = require("../ContextMenu");
-const NotificationCenter_1 = require("../Notifications/NotificationCenter");
-const save_effect_prop_1 = require("./save-effect-prop");
-const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
-const TimelineLayerEye_1 = require("./TimelineLayerEye");
-const TimelineRowChrome_1 = require("./TimelineRowChrome");
-const TimelineSelection_1 = require("./TimelineSelection");
-const rowLabel = {
-    fontSize: 12,
-    color: 'rgba(255, 255, 255, 0.8)',
-    userSelect: 'none',
-};
-const TimelineEffectGroupRow = ({ label, nodePathInfo, effectIndex, effectSchema, documentationLink, nodePath, validatedLocation, rowDepth, getIsExpanded, toggleTrack, }) => {
-    var _a;
-    var _b;
-    const [labelHovered, setLabelHovered] = (0, react_1.useState)(false);
-    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const previewConnected = previewServerState.type === 'connected';
-    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
-    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
-    const effectStatus = (0, react_1.useMemo)(() => remotion_1.Internals.getEffectCodeValuesCtx({
-        codeValues,
-        nodePath,
-        effectIndex,
-    }), [codeValues, nodePath, effectIndex]);
-    const disabledStatus = effectStatus.type === 'can-update-effect'
-        ? ((_b = (_a = effectStatus.props) === null || _a === void 0 ? void 0 : _a.disabled) !== null && _b !== void 0 ? _b : null)
-        : null;
-    const isDisabled = (0, react_1.useMemo)(() => {
-        if (disabledStatus && disabledStatus.canUpdate) {
-            return Boolean(disabledStatus.codeValue);
-        }
-        return false;
-    }, [disabledStatus]);
-    const canToggle = previewConnected && disabledStatus !== null && disabledStatus.canUpdate;
-    const deleteDisabled = !previewConnected ||
-        effectStatus.type !== 'can-update-effect' ||
-        !validatedLocation.source;
-    const onDeleteEffectFromSource = (0, react_1.useCallback)(async () => {
-        if (deleteDisabled) {
-            return;
-        }
-        try {
-            const result = await (0, call_api_1.callApi)('/api/delete-effect', {
-                fileName: validatedLocation.source,
-                sequenceNodePath: nodePath,
-                effectIndex,
-            });
-            if (result.success) {
-                (0, NotificationCenter_1.showNotification)('Removed effect from source file', 2000);
-            }
-            else {
-                (0, NotificationCenter_1.showNotification)(result.reason, 4000);
-            }
-        }
-        catch (err) {
-            (0, NotificationCenter_1.showNotification)(err.message, 4000);
-        }
-    }, [deleteDisabled, effectIndex, nodePath, validatedLocation.source]);
-    const contextMenuValues = (0, react_1.useMemo)(() => {
-        if (!previewConnected) {
-            return [];
-        }
-        return [
-            {
-                type: 'item',
-                id: 'delete-effect',
-                keyHint: null,
-                label: 'Delete',
-                leftItem: null,
-                disabled: deleteDisabled,
-                onClick: () => {
-                    if (deleteDisabled) {
-                        return;
-                    }
-                    onDeleteEffectFromSource();
-                },
-                quickSwitcherLabel: null,
-                subMenu: null,
-                value: 'delete-effect',
-            },
-        ];
-    }, [deleteDisabled, onDeleteEffectFromSource, previewConnected]);
-    const onToggle = (0, react_1.useCallback)((type) => {
-        if (!canToggle || previewServerState.type !== 'connected') {
-            return;
-        }
-        const newValue = type !== 'enable';
-        const fieldSchema = effectSchema.disabled;
-        const defaultValue = fieldSchema && fieldSchema.type === 'boolean'
-            ? JSON.stringify(fieldSchema.default)
-            : null;
-        (0, save_effect_prop_1.saveEffectProp)({
-            fileName: validatedLocation.source,
-            nodePath,
-            effectIndex,
-            fieldKey: 'disabled',
-            value: newValue,
-            defaultValue,
-            schema: effectSchema,
-            setCodeValues,
-            clientId: previewServerState.clientId,
-        });
-    }, [
-        canToggle,
-        effectIndex,
-        effectSchema,
-        nodePath,
-        previewServerState,
-        setCodeValues,
-        validatedLocation.source,
-    ]);
-    const isExpanded = getIsExpanded(nodePathInfo);
-    const rowStyle = (0, react_1.useMemo)(() => ({
-        height: timeline_layout_1.TREE_GROUP_ROW_HEIGHT,
-    }), []);
-    const labelStyle = (0, react_1.useMemo)(() => {
-        const hoverEffect = labelHovered && documentationLink !== null;
-        return {
-            ...rowLabel,
-            ...(0, TimelineSelection_1.getTimelineSelectedLabelStyle)(selection.selected, true),
-            alignSelf: 'stretch',
-            alignItems: 'center',
-            color: (0, TimelineSelection_1.getTimelineColor)(selection.selected, true),
-            display: 'flex',
-            flex: 1,
-            minWidth: 0,
-            paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
-            textDecoration: hoverEffect ? 'underline' : 'none',
-            textUnderlineOffset: 2,
-            cursor: hoverEffect ? 'pointer' : undefined,
-        };
-    }, [documentationLink, labelHovered, selection.selected]);
-    const onClickLabel = (0, react_1.useCallback)(() => {
-        if (documentationLink === null) {
-            return;
-        }
-        window.open(documentationLink, '_blank', 'noopener,noreferrer');
-    }, [documentationLink]);
-    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: canToggle ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: "effect", hidden: isDisabled, onInvoked: onToggle })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(nodePathInfo), label: `${label} section`, disabled: false }), style: rowStyle, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { onPointerEnter: () => setLabelHovered(true), onPointerLeave: () => setLabelHovered(false), onClick: onClickLabel, title: documentationLink ? `Open documentation: ${documentationLink}` : label, style: labelStyle, children: label }) }));
-    return previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: row })) : (row);
-};
-exports.TimelineEffectGroupRow = TimelineEffectGroupRow;