@remotion/studio 4.0.461 → 4.0.463

package/dist/components/AssetSelector.js

@@ -11,6 +11,7 @@ const write_static_file_1 = require("../api/write-static-file");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const create_folder_tree_1 = require("../helpers/create-folder-tree");
+const persist_boolean_map_1 = require("../helpers/persist-boolean-map");
 const persist_open_folders_1 = require("../helpers/persist-open-folders");
 const use_asset_drag_events_1 = __importDefault(require("../helpers/use-asset-drag-events"));
 const folders_1 = require("../state/folders");
@@ -68,13 +69,8 @@ const AssetSelector = ({ readOnlyStudio }) => {
     }, [assetFoldersExpanded, staticFiles]);
     const toggleFolder = (0, react_1.useCallback)((folderName, parentName) => {
         setAssetFoldersExpanded((p) => {
-            var _a;
             const key = [parentName, folderName].filter(Boolean).join('/');
-            const prev = (_a = p[key]) !== null && _a !== void 0 ? _a : false;
-            const foldersExpandedState = {
-                ...p,
-                [key]: !prev,
-            };
+            const foldersExpandedState = (0, persist_boolean_map_1.toggleBooleanMapKey)(p, key);
             (0, persist_open_folders_1.persistExpandedFolders)('assets', foldersExpandedState);
             return foldersExpandedState;
         });

package/dist/components/CompSelectorRef.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const create_folder_tree_1 = require("../helpers/create-folder-tree");
+const persist_boolean_map_1 = require("../helpers/persist-boolean-map");
 const persist_open_folders_1 = require("../helpers/persist-open-folders");
 const folders_1 = require("../state/folders");
 const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
@@ -14,13 +15,8 @@ const CompSelectorRef = ({ children }) => {
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const toggleFolder = (0, react_1.useCallback)((folderName, parentName) => {
         setCompositionFoldersExpanded((p) => {
-            var _a;
             const key = (0, persist_open_folders_1.openFolderKey)({ folderName, parentName });
-            const prev = (_a = p[key]) !== null && _a !== void 0 ? _a : false;
-            const foldersExpandedState = {
-                ...p,
-                [key]: !prev,
-            };
+            const foldersExpandedState = (0, persist_boolean_map_1.toggleBooleanMapKey)(p, key);
             (0, persist_open_folders_1.persistExpandedFolders)('compositions', foldersExpandedState);
             return foldersExpandedState;
         });

package/dist/components/ExpandedTracksProvider.js

@@ -2,27 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExpandedTracksProvider = exports.ExpandedTracksSetterContext = exports.ExpandedTracksGetterContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
-const nodePathInfoToKey = (info) => JSON.stringify([info.nodePath, info.index]);
-const LOCAL_STORAGE_KEY = 'remotion.editor.expandedTracks';
+const persist_boolean_map_1 = require("../helpers/persist-boolean-map");
+const nodePathInfoToExpandedKey = (info) => [
+    (0, studio_shared_1.stringifySequenceExpandedRowKey)(info.sequenceSubscriptionKey),
+    info.auxiliaryKeys.join('.'),
+    info.index,
+].join('.');
+const SESSION_STORAGE_KEY = 'remotion.editor.expandedTracks';
 const loadExpandedTracks = () => {
-    if (typeof window === 'undefined') {
-        return {};
-    }
-    const item = window.localStorage.getItem(LOCAL_STORAGE_KEY);
-    if (item === null) {
-        return {};
-    }
-    try {
-        const parsed = JSON.parse(item);
-        if (parsed && typeof parsed === 'object') {
-            return parsed;
-        }
-        return {};
-    }
-    catch (_a) {
-        return {};
-    }
+    return (0, persist_boolean_map_1.loadPersistedBooleanMap)(SESSION_STORAGE_KEY);
 };
 exports.ExpandedTracksGetterContext = (0, react_1.createContext)({
     getIsExpanded: () => {
@@ -38,16 +28,16 @@ const ExpandedTracksProvider = ({ children }) => {
     const [expandedTracks, setExpandedTracks] = (0, react_1.useState)(loadExpandedTracks);
     const toggleTrack = (0, react_1.useCallback)((nodePathInfo) => {
         setExpandedTracks((prev) => {
-            const key = nodePathInfoToKey(nodePathInfo);
-            const next = { ...prev, [key]: !prev[key] };
-            window.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(next));
+            const key = nodePathInfoToExpandedKey(nodePathInfo);
+            const next = (0, persist_boolean_map_1.toggleBooleanMapKey)(prev, key);
+            (0, persist_boolean_map_1.persistBooleanMap)(SESSION_STORAGE_KEY, next);
             return next;
         });
     }, []);
     const getterValue = (0, react_1.useMemo)(() => ({
         getIsExpanded: (nodePathInfo) => {
             var _a;
-            return (_a = expandedTracks[nodePathInfoToKey(nodePathInfo)]) !== null && _a !== void 0 ? _a : false;
+            return (_a = expandedTracks[nodePathInfoToExpandedKey(nodePathInfo)]) !== null && _a !== void 0 ? _a : false;
         },
     }), [expandedTracks]);
     const setterValue = (0, react_1.useMemo)(() => ({ toggleTrack }), [toggleTrack]);

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

@@ -1,7 +1,8 @@
-import type React from 'react';
-import type { SequenceSchema } from 'remotion';
-export declare const SubscribeToNodePaths: React.FC<{
+import { type FC } from 'react';
+import type { EffectDefinition, SequenceSchema } from 'remotion';
+export declare const SubscribeToNodePaths: FC<{
     readonly overrideId: string;
     readonly schema: SequenceSchema;
     readonly stack: string;
+    readonly effects: readonly EffectDefinition<unknown>[];
 }>;

package/dist/components/Timeline/SubscribeToNodePaths.js

@@ -1,13 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SubscribeToNodePaths = void 0;
+const react_1 = require("react");
 const use_resolved_stack_1 = require("./use-resolved-stack");
 const use_sequence_props_subscription_1 = require("./use-sequence-props-subscription");
-const SubscribeToNodePaths = ({ overrideId, schema, stack }) => {
+const SubscribeToNodePaths = ({ overrideId, schema, stack, effects }) => {
     const originalLocation = (0, use_resolved_stack_1.useResolvedStack)(stack);
+    const effectSubscriptions = (0, react_1.useMemo)(() => {
+        return effects.map((effect) => effect.schema);
+    }, [effects]);
     (0, use_sequence_props_subscription_1.useSequencePropsSubscription)({
         overrideId,
         schema,
+        effects: effectSubscriptions,
         originalLocation,
     });
     return null;

package/dist/components/Timeline/Timeline.js

@@ -103,7 +103,7 @@ const TimelineInner = () => {
                 if (!sequence.controls || !previewConnected || !sequence.stack) {
                     return null;
                 }
-                return (jsx_runtime_1.jsx(SubscribeToNodePaths_1.SubscribeToNodePaths, { overrideId: sequence.controls.overrideId, schema: sequence.controls.schema, stack: sequence.stack }, sequence.id));
+                return (jsx_runtime_1.jsx(SubscribeToNodePaths_1.SubscribeToNodePaths, { overrideId: sequence.controls.overrideId, schema: sequence.controls.schema, stack: sequence.stack, effects: sequence.effects }, sequence.id));
             }), jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}), jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
                     jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsx(TimelineHeightContainer_1.TimelineHeightContainer, { shown: shown, hasBeenCut: hasBeenCut, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [
                                 jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { CanUpdateSequencePropStatus } from 'remotion';
+import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
+export declare const TimelineColorField: React.FC<{
+    readonly field: SchemaFieldInfo;
+    readonly effectiveValue: unknown;
+    readonly propStatus: CanUpdateSequencePropStatus;
+    readonly onSave: TimelineFieldOnSave;
+    readonly onDragValueChange: TimelineFieldOnDragValueChange;
+    readonly onDragEnd: () => void;
+}>;

package/dist/components/Timeline/TimelineColorField.js

@@ -0,0 +1,181 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineColorField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const no_react_1 = require("remotion/no-react");
+const colors_1 = require("../../helpers/colors");
+const eyedropper_1 = require("../../icons/eyedropper");
+const z_index_1 = require("../../state/z-index");
+const SWATCH_WIDTH = 20;
+const SWATCH_HEIGHT = 15;
+const containerStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 3,
+};
+const swatchWrapperBase = {
+    position: 'relative',
+    width: SWATCH_WIDTH,
+    height: SWATCH_HEIGHT,
+    display: 'inline-block',
+    borderRadius: 3,
+    overflow: 'hidden',
+    cursor: 'pointer',
+    borderStyle: 'solid',
+    borderWidth: 1,
+};
+const hiddenInputStyle = {
+    position: 'absolute',
+    inset: 0,
+    width: '100%',
+    height: '100%',
+    opacity: 0,
+    cursor: 'pointer',
+    border: 'none',
+    padding: 0,
+    margin: 0,
+};
+const swatchFillStyle = {
+    width: '100%',
+    height: '100%',
+};
+const eyedropperButtonBase = {
+    background: 'transparent',
+    border: 'none',
+    padding: 0,
+    margin: 0,
+    cursor: 'pointer',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 20,
+    height: 20,
+    color: 'rgba(255, 255, 255, 0.7)',
+};
+const eyedropperIconStyle = {
+    width: 16,
+    height: 16,
+};
+// Normalizes any color string the user provided (e.g. `red`, `rgb(...)`, `#fff`)
+// into a `#rrggbb` string that `<input type="color">` accepts.
+const toHex = (value) => {
+    try {
+        const argb = no_react_1.NoReactInternals.processColor(value);
+        const r = (argb >>> 16) & 0xff;
+        const g = (argb >>> 8) & 0xff;
+        const b = argb & 0xff;
+        return `#${r.toString(16).padStart(2, '0')}${g
+            .toString(16)
+            .padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+    }
+    catch (_a) {
+        return '#000000';
+    }
+};
+const hasEyeDropper = () => typeof window !== 'undefined' && 'EyeDropper' in window;
+const TimelineColorField = ({ field, effectiveValue, propStatus, onSave, onDragValueChange, onDragEnd, }) => {
+    const inputRef = (0, react_1.useRef)(null);
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const commitTimeoutRef = (0, react_1.useRef)(null);
+    const pendingCommitRef = (0, react_1.useRef)(null);
+    // `<input type="color">` doesn't fire an event when dismissed; debounce
+    // commits and flush any pending commit on unmount so we never lose the
+    // final value.
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (commitTimeoutRef.current) {
+                clearTimeout(commitTimeoutRef.current);
+            }
+            if (pendingCommitRef.current) {
+                pendingCommitRef.current();
+            }
+        };
+    }, []);
+    const currentValue = typeof effectiveValue === 'string'
+        ? effectiveValue
+        : field.fieldSchema.type === 'color'
+            ? field.fieldSchema.default
+            : '';
+    const hexValue = (0, react_1.useMemo)(() => toHex(currentValue), [currentValue]);
+    const onColorChange = (0, react_1.useCallback)((e) => {
+        const newValue = e.target.value;
+        if (!propStatus.canUpdate) {
+            return;
+        }
+        onDragValueChange(newValue);
+        if (commitTimeoutRef.current) {
+            clearTimeout(commitTimeoutRef.current);
+        }
+        const commit = () => {
+            pendingCommitRef.current = null;
+            if (propStatus.canUpdate && newValue !== propStatus.codeValue) {
+                onSave(newValue);
+            }
+            onDragEnd();
+        };
+        pendingCommitRef.current = commit;
+        commitTimeoutRef.current = setTimeout(() => {
+            commitTimeoutRef.current = null;
+            commit();
+        }, 500);
+    }, [onSave, onDragValueChange, onDragEnd, propStatus]);
+    const onPickColor = (0, react_1.useCallback)(() => {
+        // `EyeDropper` is a Chromium-only API; it's feature-detected at render
+        // time so this only runs in supported browsers.
+        const EyeDropperCtor = typeof window !== 'undefined'
+            ? window.EyeDropper
+            : undefined;
+        if (!EyeDropperCtor) {
+            return;
+        }
+        const eyeDropper = new EyeDropperCtor();
+        eyeDropper
+            .open()
+            .then((result) => {
+            if (propStatus.canUpdate && result.sRGBHex !== propStatus.codeValue) {
+                onSave(result.sRGBHex);
+            }
+        })
+            .catch(() => {
+            // User aborted or picker failed; safe to ignore.
+        });
+    }, [onSave, propStatus]);
+    const swatchWrapperStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...swatchWrapperBase,
+            borderColor: isHovered || isFocused
+                ? colors_1.INPUT_BORDER_COLOR_HOVERED
+                : colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+            cursor: propStatus.canUpdate ? 'pointer' : 'not-allowed',
+            marginLeft: 5,
+        };
+    }, [isFocused, isHovered, propStatus.canUpdate]);
+    const swatchFill = (0, react_1.useMemo)(() => {
+        return {
+            ...swatchFillStyle,
+            backgroundColor: currentValue || hexValue,
+            position: 'absolute',
+            display: 'block',
+        };
+    }, [currentValue, hexValue]);
+    const onMouseEnter = (0, react_1.useCallback)(() => setIsHovered(true), []);
+    const onMouseLeave = (0, react_1.useCallback)(() => setIsHovered(false), []);
+    const onFocus = (0, react_1.useCallback)(() => setIsFocused(true), []);
+    const onBlur = (0, react_1.useCallback)(() => setIsFocused(false), []);
+    const onSwatchClick = (0, react_1.useCallback)(() => {
+        var _a;
+        if (!propStatus.canUpdate) {
+            return;
+        }
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    }, [propStatus.canUpdate]);
+    const showEyeDropper = hasEyeDropper();
+    return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
+            jsx_runtime_1.jsxs("span", { style: swatchWrapperStyle, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: onSwatchClick, title: currentValue, children: [
+                    jsx_runtime_1.jsx("span", { style: swatchFill }), jsx_runtime_1.jsx("input", { ref: inputRef, type: "color", value: hexValue, onChange: onColorChange, onFocus: onFocus, onBlur: onBlur, disabled: !propStatus.canUpdate, name: field.key, tabIndex: tabIndex, style: hiddenInputStyle })
+                ] }), showEyeDropper ? (jsx_runtime_1.jsx("button", { type: "button", onClick: onPickColor, disabled: !propStatus.canUpdate, style: eyedropperButtonBase, tabIndex: tabIndex, title: "Pick color from screen", "aria-label": "Pick color from screen", children: jsx_runtime_1.jsx(eyedropper_1.EyedropperIcon, { style: eyedropperIconStyle, color: "rgba(255, 255, 255, 0.7)" }) })) : null] }));
+};
+exports.TimelineColorField = TimelineColorField;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { SequencePropsSubscriptionKey } from 'remotion';
+import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
+import type { EffectSchemaFieldInfo } from '../../helpers/timeline-layout';
+export declare const TimelineEffectFieldRow: React.FC<{
+    readonly field: EffectSchemaFieldInfo;
+    readonly validatedLocation: CodePosition;
+    readonly paddingLeft: number;
+    readonly nestedDepth: number;
+    readonly nodePath: SequencePropsSubscriptionKey;
+}>;

package/dist/components/Timeline/TimelineEffectFieldRow.js

@@ -0,0 +1,167 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineEffectFieldRow = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const studio_shared_1 = require("@remotion/studio-shared");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const call_api_1 = require("../call-api");
+const Padder_1 = require("./Padder");
+const save_prop_queue_1 = require("./save-prop-queue");
+const TimelineSchemaField_1 = require("./TimelineSchemaField");
+const fieldRowBase = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 8,
+    paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
+};
+const fieldName = {
+    fontSize: 12,
+    color: 'rgba(255, 255, 255, 0.8)',
+    userSelect: 'none',
+};
+const fieldLabelRow = {
+    flex: '0 0 50%',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+};
+const Value = ({ field, nodePath, validatedLocation }) => {
+    var _a;
+    var _b;
+    const { setEffectDragOverrides, clearEffectDragOverrides, setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const { codeValues: visualModeCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const effectStatus = remotion_1.Internals.getEffectCodeValuesCtx({
+        codeValues: visualModeCodeValues,
+        nodePath,
+        effectIndex: field.effectIndex,
+    });
+    const propStatus = effectStatus.type === 'can-update-effect'
+        ? ((_b = (_a = effectStatus.props) === null || _a === void 0 ? void 0 : _a[field.key]) !== null && _b !== void 0 ? _b : null)
+        : null;
+    const onDragValueChange = (0, react_1.useCallback)((value) => {
+        setEffectDragOverrides(nodePath, field.effectIndex, field.key, value);
+    }, [setEffectDragOverrides, nodePath, field.effectIndex, field.key]);
+    const onDragEnd = (0, react_1.useCallback)(() => {
+        clearEffectDragOverrides(nodePath, field.effectIndex);
+    }, [clearEffectDragOverrides, nodePath, field.effectIndex]);
+    const dragOverrideValue = (0, react_1.useMemo)(() => {
+        const overrides = getEffectDragOverrides(nodePath, field.effectIndex);
+        return overrides[field.key];
+    }, [getEffectDragOverrides, nodePath, field.effectIndex, field.key]);
+    const onSave = (0, react_1.useCallback)((value) => {
+        if (!validatedLocation) {
+            return Promise.reject(new Error('Cannot save'));
+        }
+        if (!propStatus) {
+            return Promise.reject(new Error('Cannot save'));
+        }
+        if (!propStatus.canUpdate) {
+            return Promise.reject(new Error('Cannot save'));
+        }
+        const defaultValue = field.fieldSchema.default !== undefined
+            ? JSON.stringify(field.fieldSchema.default)
+            : null;
+        const stringifiedValue = JSON.stringify(value);
+        if (value === propStatus.codeValue) {
+            return Promise.resolve();
+        }
+        if (defaultValue === stringifiedValue &&
+            propStatus.codeValue === undefined) {
+            return Promise.resolve();
+        }
+        return (0, save_prop_queue_1.enqueueSavePropChange)({
+            nodePath,
+            setCodeValues,
+            applyOptimistic: (prev) => (0, studio_shared_1.optimisticUpdateForEffectCodeValues)({
+                previous: prev,
+                effectIndex: field.effectIndex,
+                fieldKey: field.key,
+                value,
+                schema: field.effectSchema,
+            }),
+            apiCall: () => (0, call_api_1.callApi)('/api/save-effect-props', {
+                fileName: validatedLocation.source,
+                sequenceNodePath: nodePath,
+                effectIndex: field.effectIndex,
+                key: field.key,
+                value: stringifiedValue,
+                defaultValue,
+                schema: field.effectSchema,
+            }),
+            mergeServerResponse: (prev, data) => {
+                if (!prev.canUpdate) {
+                    return prev;
+                }
+                const idx = prev.effects.findIndex((e) => e.effectIndex === field.effectIndex);
+                if (idx === -1) {
+                    return {
+                        ...prev,
+                        effects: [...prev.effects, data],
+                    };
+                }
+                const nextEffects = [...prev.effects];
+                nextEffects[idx] = data;
+                return { ...prev, effects: nextEffects };
+            },
+            errorLabel: 'Could not save effect prop',
+        });
+    }, [
+        field.effectIndex,
+        field.effectSchema,
+        field.fieldSchema.default,
+        field.key,
+        nodePath,
+        propStatus,
+        setCodeValues,
+        validatedLocation,
+    ]);
+    if (effectStatus.type === 'cannot-update-effect') {
+        if (effectStatus.reason === 'computed') {
+            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "computed" });
+        }
+        if (effectStatus.reason === 'not-call-expression') {
+            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "not inline" });
+        }
+        if (effectStatus.reason === 'not-found') {
+            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "not found in code" });
+        }
+        throw new Error(`Unsupported effect status: ${effectStatus.reason}`);
+    }
+    if (effectStatus.type === 'cannot-update-sequence') {
+        if (effectStatus.reason === 'not-found') {
+            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "not found in code" });
+        }
+        if (effectStatus.reason === 'error') {
+            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "error" });
+        }
+        throw new Error(`Unsupported effect status: ${effectStatus.reason}`);
+    }
+    if (propStatus === null || !propStatus.canUpdate) {
+        return null;
+    }
+    const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
+        codeValue: propStatus,
+        dragOverrideValue,
+        defaultValue: field.fieldSchema.default,
+        shouldResortToDefaultValueIfUndefined: true,
+    });
+    return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue }));
+};
+const TimelineEffectFieldRow = ({ field, validatedLocation, paddingLeft, nestedDepth, nodePath }) => {
+    var _a;
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...fieldRowBase,
+            height: field.rowHeight,
+            paddingLeft,
+        };
+    }, [field.rowHeight, paddingLeft]);
+    return (jsx_runtime_1.jsxs("div", { style: style, children: [
+            jsx_runtime_1.jsx(Padder_1.Padder, { depth: nestedDepth + 1 }), jsx_runtime_1.jsx("div", { style: fieldLabelRow, children: jsx_runtime_1.jsx("span", { style: fieldName, children: (_a = field.description) !== null && _a !== void 0 ? _a : field.key }) }), jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation })
+        ] }));
+};
+exports.TimelineEffectFieldRow = TimelineEffectFieldRow;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+import type { GetIsExpanded } from '../ExpandedTracksProvider';
+export declare const TimelineEffectGroupRow: React.FC<{
+    readonly label: string;
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly effectIndex: number;
+    readonly effectSchema: SequenceSchema;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly validatedLocation: CodePosition;
+    readonly nestedDepth: number;
+    readonly style: React.CSSProperties;
+    readonly getIsExpanded: GetIsExpanded;
+    readonly toggleTrack: (nodePathInfo: SequenceNodePathInfo) => void;
+}>;

package/dist/components/Timeline/TimelineEffectGroupRow.js

@@ -0,0 +1,73 @@
+"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 Padder_1 = require("./Padder");
+const save_effect_prop_1 = require("./save-effect-prop");
+const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
+const TimelineLayerEye_1 = require("./TimelineLayerEye");
+const groupRowBase = {
+    display: 'flex',
+    alignItems: 'center',
+};
+const rowLabel = {
+    fontSize: 12,
+    color: 'rgba(255, 255, 255, 0.8)',
+    userSelect: 'none',
+};
+const TimelineEffectGroupRow = ({ label, nodePathInfo, effectIndex, effectSchema, nodePath, validatedLocation, nestedDepth, style, getIsExpanded, toggleTrack, }) => {
+    var _a;
+    var _b;
+    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    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 = disabledStatus !== null && disabledStatus.canUpdate;
+    const onToggle = (0, react_1.useCallback)((type) => {
+        if (!canToggle) {
+            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,
+        });
+    }, [
+        canToggle,
+        effectIndex,
+        effectSchema,
+        nodePath,
+        setCodeValues,
+        validatedLocation.source,
+    ]);
+    const isExpanded = getIsExpanded(nodePathInfo);
+    const mergedStyle = (0, react_1.useMemo)(() => ({ ...groupRowBase, ...style }), [style]);
+    return (jsx_runtime_1.jsxs("div", { style: mergedStyle, children: [
+            jsx_runtime_1.jsx(Padder_1.Padder, { depth: nestedDepth + 1 }), canToggle ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: "effect", hidden: isDisabled, onInvoked: onToggle })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(nodePathInfo), label: `${label} section`, disabled: false }), jsx_runtime_1.jsx("span", { style: rowLabel, children: label })
+        ] }));
+};
+exports.TimelineEffectGroupRow = TimelineEffectGroupRow;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { SequenceSchema, SequenceNodePath } from 'remotion';
+import type { SequenceSchema, SequencePropsSubscriptionKey } from 'remotion';
 import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import type { TimelineTreeNode } from '../../helpers/timeline-layout';
@@ -10,7 +10,7 @@ export declare const TimelineExpandedRow: React.FC<{
     readonly nestedDepth: number;
     readonly getIsExpanded: GetIsExpanded;
     readonly toggleTrack: (nodePathInfo: SequenceNodePathInfo) => void;
-    readonly validatedLocation: CodePosition | null;
-    readonly nodePath: SequenceNodePath;
+    readonly validatedLocation: CodePosition;
+    readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: SequenceSchema;
 }>;