@remotion/studio 4.0.462 → 4.0.464

package/dist/esm/renderEntry.mjs

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

package/dist/helpers/client-id.d.ts

@@ -1,15 +1,8 @@
 import type { EventSourceEvent } from '@remotion/studio-shared';
 import React from 'react';
-type PreviewServerState = {
-    type: 'init';
-} | {
-    type: 'connected';
-    clientId: string;
-} | {
-    type: 'disconnected';
-};
+import { type PreviewServerConnectionState } from './preview-server-events';
 type Context = {
-    previewServerState: PreviewServerState;
+    previewServerState: PreviewServerConnectionState;
     subscribeToEvent: (type: EventSourceEvent['type'], listener: (event: EventSourceEvent) => void) => () => void;
 };
 export declare const StudioServerConnectionCtx: React.Context<Context>;

package/dist/helpers/client-id.js

@@ -43,6 +43,7 @@ const remotion_1 = require("remotion");
 const NotificationCenter_1 = require("../components/Notifications/NotificationCenter");
 const PlayBeepSound_1 = __importDefault(require("../components/PlayBeepSound"));
 const context_1 = require("../components/RenderQueue/context");
+const preview_server_events_1 = require("./preview-server-events");
 const url_state_1 = require("./url-state");
 exports.StudioServerConnectionCtx = react_1.default.createContext({
     previewServerState: {
@@ -60,20 +61,20 @@ const PreviewServerConnection = ({ children, readOnlyStudio }) => {
             listeners.current = listeners.current.filter((l) => l.type !== type || l.listener !== listener);
         };
     }, []);
-    const openEventSource = (0, react_1.useCallback)(() => {
-        const source = new EventSource('/events');
-        source.addEventListener('message', (event) => {
-            var _a, _b, _c;
-            const newEvent = JSON.parse(event.data);
+    const [state, setState] = react_1.default.useState({
+        type: 'init',
+    });
+    (0, react_1.useEffect)(() => {
+        if (readOnlyStudio) {
+            return;
+        }
+        const handleEvent = (newEvent) => {
+            var _a, _b;
             if (newEvent.type === 'new-input-props' ||
                 newEvent.type === 'new-env-variables') {
                 (0, url_state_1.reloadUrl)();
             }
             if (newEvent.type === 'init') {
-                setState({
-                    type: 'connected',
-                    clientId: newEvent.clientId,
-                });
                 listeners.current.forEach((l) => {
                     if (l.type === 'undo-redo-stack-changed') {
                         l.listener({
@@ -108,45 +109,19 @@ const PreviewServerConnection = ({ children, readOnlyStudio }) => {
                     detail: payload,
                 }));
             }
-            if (newEvent.type === 'hmr') {
-                (_c = window.__remotion_processHmrEvent) === null || _c === void 0 ? void 0 : _c.call(window, newEvent.hmrEvent);
-            }
             listeners.current.forEach((l) => {
                 if (l.type === newEvent.type) {
                     l.listener(newEvent);
                 }
             });
-        });
-        source.addEventListener('open', () => {
-            source.addEventListener('error', () => {
-                setState({ type: 'disconnected' });
-                // Display an error message that the studio server has disconnected.
-                source === null || source === void 0 ? void 0 : source.close();
-                // Retry later
-                setTimeout(() => {
-                    openEventSource();
-                }, 1000);
-            }, { once: true });
-        });
-        const close = () => {
-            source.close();
         };
-        return {
-            close,
-        };
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if (readOnlyStudio) {
-            return;
-        }
-        const { close } = openEventSource();
+        const unsubscribeFromEvents = (0, preview_server_events_1.subscribeToPreviewServerEvents)(handleEvent);
+        const unsubscribeFromConnectionState = (0, preview_server_events_1.subscribeToPreviewServerConnectionState)(setState);
         return () => {
-            close();
+            unsubscribeFromEvents();
+            unsubscribeFromConnectionState();
         };
-    }, [openEventSource, readOnlyStudio]);
-    const [state, setState] = react_1.default.useState({
-        type: 'init',
-    });
+    }, [readOnlyStudio]);
     const context = (0, react_1.useMemo)(() => {
         return {
             previewServerState: state,

package/dist/helpers/color-conversion.d.ts

@@ -0,0 +1,36 @@
+export type Rgba = {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
+export type Hsva = {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+};
+export declare const clamp: (value: number, min: number, max: number) => number;
+export declare const parseAnyColor: (input: string) => Rgba;
+export declare const formatRgbHex: ({ r, g, b }: {
+    r: number;
+    g: number;
+    b: number;
+}) => string;
+export declare const formatRgba: ({ r, g, b, a }: Rgba) => string;
+export declare const rgbToHsv: ({ r, g, b, }: {
+    r: number;
+    g: number;
+    b: number;
+}) => Hsva;
+export declare const hsvToRgb: ({ h, s, v, }: {
+    h: number;
+    s: number;
+    v: number;
+}) => {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare const rgbaToHsva: (rgba: Rgba) => Hsva;
+export declare const hsvaToRgba: (hsva: Hsva) => Rgba;

package/dist/helpers/color-conversion.js

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hsvaToRgba = exports.rgbaToHsva = exports.hsvToRgb = exports.rgbToHsv = exports.formatRgba = exports.formatRgbHex = exports.parseAnyColor = exports.clamp = void 0;
+const no_react_1 = require("remotion/no-react");
+const clamp = (value, min, max) => {
+    return Math.min(Math.max(value, min), max);
+};
+exports.clamp = clamp;
+const componentToHex = (c) => {
+    return Math.round((0, exports.clamp)(c, 0, 255))
+        .toString(16)
+        .padStart(2, '0');
+};
+// Always returns a normalized {r, g, b, a (0-255)} object,
+// regardless of whether the input was a hex, rgb(), rgba(), or named color.
+// Falls back to opaque black when parsing fails.
+const parseAnyColor = (input) => {
+    try {
+        const argb = no_react_1.NoReactInternals.processColor(input)
+            .toString(16)
+            .padStart(8, '0');
+        const a = parseInt(argb.slice(0, 2), 16);
+        const r = parseInt(argb.slice(2, 4), 16);
+        const g = parseInt(argb.slice(4, 6), 16);
+        const b = parseInt(argb.slice(6, 8), 16);
+        return { r, g, b, a };
+    }
+    catch (_a) {
+        return { r: 0, g: 0, b: 0, a: 255 };
+    }
+};
+exports.parseAnyColor = parseAnyColor;
+const formatRgbHex = ({ r, g, b }) => {
+    return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;
+};
+exports.formatRgbHex = formatRgbHex;
+const formatRgba = ({ r, g, b, a }) => {
+    if (a >= 255) {
+        return (0, exports.formatRgbHex)({ r, g, b });
+    }
+    const opacity = Number((a / 255).toFixed(2));
+    return `rgba(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}, ${opacity})`;
+};
+exports.formatRgba = formatRgba;
+const rgbToHsv = ({ r, g, b, }) => {
+    const rn = r / 255;
+    const gn = g / 255;
+    const bn = b / 255;
+    const max = Math.max(rn, gn, bn);
+    const min = Math.min(rn, gn, bn);
+    const delta = max - min;
+    let h = 0;
+    if (delta !== 0) {
+        if (max === rn) {
+            h = ((gn - bn) / delta) % 6;
+        }
+        else if (max === gn) {
+            h = (bn - rn) / delta + 2;
+        }
+        else {
+            h = (rn - gn) / delta + 4;
+        }
+        h *= 60;
+        if (h < 0) {
+            h += 360;
+        }
+    }
+    const s = max === 0 ? 0 : delta / max;
+    const v = max;
+    return { h, s, v, a: 1 };
+};
+exports.rgbToHsv = rgbToHsv;
+const hsvToRgb = ({ h, s, v, }) => {
+    const c = v * s;
+    const hh = (h % 360) / 60;
+    const x = c * (1 - Math.abs((hh % 2) - 1));
+    let r1 = 0;
+    let g1 = 0;
+    let b1 = 0;
+    if (hh >= 0 && hh < 1) {
+        r1 = c;
+        g1 = x;
+    }
+    else if (hh >= 1 && hh < 2) {
+        r1 = x;
+        g1 = c;
+    }
+    else if (hh >= 2 && hh < 3) {
+        g1 = c;
+        b1 = x;
+    }
+    else if (hh >= 3 && hh < 4) {
+        g1 = x;
+        b1 = c;
+    }
+    else if (hh >= 4 && hh < 5) {
+        r1 = x;
+        b1 = c;
+    }
+    else {
+        r1 = c;
+        b1 = x;
+    }
+    const m = v - c;
+    return {
+        r: Math.round((r1 + m) * 255),
+        g: Math.round((g1 + m) * 255),
+        b: Math.round((b1 + m) * 255),
+    };
+};
+exports.hsvToRgb = hsvToRgb;
+const rgbaToHsva = (rgba) => {
+    const { h, s, v } = (0, exports.rgbToHsv)(rgba);
+    return { h, s, v, a: rgba.a / 255 };
+};
+exports.rgbaToHsva = rgbaToHsva;
+const hsvaToRgba = (hsva) => {
+    const { r, g, b } = (0, exports.hsvToRgb)(hsva);
+    return { r, g, b, a: Math.round(hsva.a * 255) };
+};
+exports.hsvaToRgba = hsvaToRgba;

package/dist/helpers/inject-css.js

@@ -84,7 +84,7 @@ const makeDefaultGlobalCSS = () => {
   
   input:focus,
   textarea:focus,
-  button:focus:not(.__remotion_input_dragger),
+  button:focus:not(.__remotion_input_dragger):not(.__remotion_color_swatch),
   a:focus {
     outline: none;
     box-shadow:
@@ -93,12 +93,9 @@ const makeDefaultGlobalCSS = () => {
       inset 1px -1px #555,
       inset -1px 1px #555;
   }
-  
-  input[type='color'].__remotion_color_picker::-webkit-color-swatch-wrapper {
-    padding: 0;
-  }
-  input[type='color'].__remotion_color_picker::-webkit-color-swatch {
-    border: none;
+
+  .__remotion_color_swatch:focus {
+    outline: none;
   }
   
   .__remotion_thumb,

package/dist/helpers/migrate-expanded-tracks-for-subscription-key.d.ts

@@ -0,0 +1,3 @@
+import type { SequencePropsSubscriptionKey } from 'remotion';
+import type { BooleanMap } from './persist-boolean-map';
+export declare const migrateExpandedTracksForSubscriptionKey: (prev: BooleanMap, oldKey: SequencePropsSubscriptionKey, newKey: SequencePropsSubscriptionKey) => BooleanMap | null;

package/dist/helpers/migrate-expanded-tracks-for-subscription-key.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.migrateExpandedTracksForSubscriptionKey = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const migrateExpandedTracksForSubscriptionKey = (prev, oldKey, newKey) => {
+    const oldPrefix = (0, studio_shared_1.stringifySequenceExpandedRowKey)(oldKey);
+    const newPrefix = (0, studio_shared_1.stringifySequenceExpandedRowKey)(newKey);
+    if (oldPrefix === newPrefix) {
+        return null;
+    }
+    let changed = false;
+    const next = { ...prev };
+    for (const [key, value] of Object.entries(prev)) {
+        if (!value || !key.startsWith(oldPrefix + '.')) {
+            continue;
+        }
+        const migratedKey = newPrefix + key.slice(oldPrefix.length);
+        if (!next[migratedKey]) {
+            next[migratedKey] = true;
+        }
+        delete next[key];
+        changed = true;
+    }
+    return changed ? next : null;
+};
+exports.migrateExpandedTracksForSubscriptionKey = migrateExpandedTracksForSubscriptionKey;

package/dist/helpers/persist-boolean-map.d.ts

@@ -0,0 +1,5 @@
+export type BooleanMap = Record<string, boolean>;
+export declare const onlyExpandedBooleanMapValues: (state: BooleanMap) => BooleanMap;
+export declare const toggleBooleanMapKey: (state: BooleanMap, key: string) => BooleanMap;
+export declare const loadPersistedBooleanMap: (sessionStorageKey: string) => BooleanMap;
+export declare const persistBooleanMap: (sessionStorageKey: string, state: BooleanMap) => void;

package/dist/helpers/persist-boolean-map.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.persistBooleanMap = exports.loadPersistedBooleanMap = exports.toggleBooleanMapKey = exports.onlyExpandedBooleanMapValues = void 0;
+const onlyExpandedBooleanMapValues = (state) => {
+    const result = {};
+    for (const [key, value] of Object.entries(state)) {
+        if (value) {
+            result[key] = true;
+        }
+    }
+    return result;
+};
+exports.onlyExpandedBooleanMapValues = onlyExpandedBooleanMapValues;
+const toggleBooleanMapKey = (state, key) => {
+    const next = { ...state };
+    if (next[key]) {
+        delete next[key];
+    }
+    else {
+        next[key] = true;
+    }
+    return next;
+};
+exports.toggleBooleanMapKey = toggleBooleanMapKey;
+const loadPersistedBooleanMap = (sessionStorageKey) => {
+    if (typeof window === 'undefined') {
+        return {};
+    }
+    try {
+        const raw = window.sessionStorage.getItem(sessionStorageKey);
+        if (raw === null) {
+            return {};
+        }
+        const parsed = JSON.parse(raw);
+        if (!parsed || typeof parsed !== 'object') {
+            return {};
+        }
+        return (0, exports.onlyExpandedBooleanMapValues)(parsed);
+    }
+    catch (_a) {
+        return {};
+    }
+};
+exports.loadPersistedBooleanMap = loadPersistedBooleanMap;
+const persistBooleanMap = (sessionStorageKey, state) => {
+    if (typeof window === 'undefined') {
+        return;
+    }
+    try {
+        window.sessionStorage.setItem(sessionStorageKey, JSON.stringify((0, exports.onlyExpandedBooleanMapValues)(state)));
+    }
+    catch (_a) {
+        // Ignore quota errors or disabled storage.
+    }
+};
+exports.persistBooleanMap = persistBooleanMap;

package/dist/helpers/persist-open-folders.d.ts

@@ -1,11 +1,12 @@
+import { type BooleanMap } from './persist-boolean-map';
 export declare const openFolderKey: ({ folderName, parentName, }: {
     folderName: string;
     parentName: string | null;
 }) => string;
-export type ExpandedFoldersState = Record<string, boolean>;
+export type ExpandedFoldersState = BooleanMap;
 type PersistanceType = 'assets' | 'compositions';
-export declare const persistExpandedFolders: (type: PersistanceType, state: ExpandedFoldersState) => void;
-export declare const loadExpandedFolders: (type: PersistanceType) => ExpandedFoldersState;
+export declare const persistExpandedFolders: (type: PersistanceType, state: BooleanMap) => void;
+export declare const loadExpandedFolders: (type: PersistanceType) => BooleanMap;
 export type ExpandedFoldersRef = {
     toggleFolder: (folderName: string, parentName: string | null) => void;
     foldersExpanded: ExpandedFoldersState;

package/dist/helpers/persist-open-folders.js

@@ -2,23 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExpandedFoldersContext = exports.loadExpandedFolders = exports.persistExpandedFolders = exports.openFolderKey = void 0;
 const react_1 = require("react");
+const persist_boolean_map_1 = require("./persist-boolean-map");
 const openFolderKey = ({ folderName, parentName, }) => {
     return [parentName !== null && parentName !== void 0 ? parentName : 'no-parent', folderName].join('/');
 };
 exports.openFolderKey = openFolderKey;
-const localStorageKey = (type) => type === 'compositions'
+const sessionStorageKey = (type) => type === 'compositions'
     ? 'remotion.expandedFolders'
     : 'remotion.expandedAssetFolders';
 const persistExpandedFolders = (type, state) => {
-    window.localStorage.setItem(localStorageKey(type), JSON.stringify(state));
+    (0, persist_boolean_map_1.persistBooleanMap)(sessionStorageKey(type), state);
 };
 exports.persistExpandedFolders = persistExpandedFolders;
 const loadExpandedFolders = (type) => {
-    const item = window.localStorage.getItem(localStorageKey(type));
-    if (item === null) {
-        return {};
-    }
-    return JSON.parse(item);
+    return (0, persist_boolean_map_1.loadPersistedBooleanMap)(sessionStorageKey(type));
 };
 exports.loadExpandedFolders = loadExpandedFolders;
 exports.ExpandedFoldersContext = (0, react_1.createContext)({

package/dist/helpers/preview-server-events.d.ts

@@ -0,0 +1,15 @@
+import type { EventSourceEvent } from '@remotion/studio-shared';
+export type PreviewServerConnectionState = {
+    type: 'init';
+} | {
+    type: 'connected';
+    clientId: string;
+} | {
+    type: 'disconnected';
+};
+type MessageListener = (event: EventSourceEvent) => void;
+type ConnectionStateListener = (state: PreviewServerConnectionState) => void;
+export declare const ensurePreviewServerEventSource: () => void;
+export declare const subscribeToPreviewServerEvents: (listener: MessageListener) => () => void;
+export declare const subscribeToPreviewServerConnectionState: (listener: ConnectionStateListener) => () => void;
+export {};

package/dist/helpers/preview-server-events.js

@@ -0,0 +1,81 @@
+"use strict";
+/// <reference lib="dom" />
+/// <reference lib="dom.iterable" />
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.subscribeToPreviewServerConnectionState = exports.subscribeToPreviewServerEvents = exports.ensurePreviewServerEventSource = void 0;
+let source = null;
+let connectionState = { type: 'init' };
+let lastInitEvent = null;
+const messageListeners = new Set();
+const connectionStateListeners = new Set();
+const notifyConnectionState = () => {
+    for (const listener of connectionStateListeners) {
+        listener(connectionState);
+    }
+};
+const dispatch = (event) => {
+    for (const listener of messageListeners) {
+        listener(event);
+    }
+};
+const openEventSource = () => {
+    if (source) {
+        return;
+    }
+    source = new EventSource('/events');
+    source.addEventListener('message', (event) => {
+        try {
+            const newEvent = JSON.parse(event.data);
+            if (newEvent.type === 'init') {
+                lastInitEvent = newEvent;
+                connectionState = {
+                    type: 'connected',
+                    clientId: newEvent.clientId,
+                };
+                notifyConnectionState();
+            }
+            dispatch(newEvent);
+        }
+        catch (_a) {
+            // Ignore parse errors
+        }
+    });
+    source.addEventListener('open', () => {
+        source === null || source === void 0 ? void 0 : source.addEventListener('error', () => {
+            connectionState = { type: 'disconnected' };
+            notifyConnectionState();
+            source === null || source === void 0 ? void 0 : source.close();
+            source = null;
+            setTimeout(() => {
+                openEventSource();
+            }, 1000);
+        }, { once: true });
+    });
+};
+const ensurePreviewServerEventSource = () => {
+    if (typeof window === 'undefined' || typeof EventSource === 'undefined') {
+        return;
+    }
+    openEventSource();
+};
+exports.ensurePreviewServerEventSource = ensurePreviewServerEventSource;
+const subscribeToPreviewServerEvents = (listener) => {
+    (0, exports.ensurePreviewServerEventSource)();
+    messageListeners.add(listener);
+    if (lastInitEvent && connectionState.type === 'connected') {
+        listener(lastInitEvent);
+    }
+    return () => {
+        messageListeners.delete(listener);
+    };
+};
+exports.subscribeToPreviewServerEvents = subscribeToPreviewServerEvents;
+const subscribeToPreviewServerConnectionState = (listener) => {
+    (0, exports.ensurePreviewServerEventSource)();
+    connectionStateListeners.add(listener);
+    listener(connectionState);
+    return () => {
+        connectionStateListeners.delete(listener);
+    };
+};
+exports.subscribeToPreviewServerConnectionState = subscribeToPreviewServerConnectionState;

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

@@ -1,5 +1,5 @@
 import { type AnySchemaFieldInfo, type CodeValues, type DragOverrides, type EffectSchemaFieldInfo, type SchemaFieldInfo, type SequenceControls, type SequenceSchemaFieldInfo } from '@remotion/studio-shared';
-import type { GetDragOverrides, TSequence } from 'remotion';
+import type { GetDragOverrides, SequenceSchema as SequenceSchemaShape, TSequence } from 'remotion';
 import type { GetIsExpanded } from '../components/ExpandedTracksProvider';
 import type { SequenceNodePathInfo } from './get-timeline-sequence-sort-key';
 export type { AnySchemaFieldInfo, CodeValues, DragOverrides, EffectSchemaFieldInfo, SchemaFieldInfo, SequenceControls, SequenceSchemaFieldInfo, };
@@ -9,15 +9,19 @@ export declare const TIMELINE_BORDER = 1;
 export declare const TIMELINE_ITEM_BORDER_BOTTOM = 1;
 export declare const TIMELINE_TRACK_EXPANDED_HEIGHT = 100;
 export declare const TREE_GROUP_ROW_HEIGHT = 22;
-export declare const EXPANDED_SECTION_PADDING_LEFT = 28;
 export declare const EXPANDED_SECTION_PADDING_RIGHT = 10;
 export type TimelineFieldOnSave = (value: unknown) => Promise<void>;
 export type TimelineFieldOnDragValueChange = (value: unknown) => void;
+export type TimelineEffectGroupInfo = {
+    readonly effectIndex: number;
+    readonly effectSchema: SequenceSchemaShape;
+};
 export type TimelineTreeNode = {
     readonly kind: 'group';
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly label: string;
     readonly children: TimelineTreeNode[];
+    readonly effectInfo: TimelineEffectGroupInfo | null;
 } | {
     readonly kind: 'field';
     readonly nodePathInfo: SequenceNodePathInfo;

package/dist/helpers/timeline-layout.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTimelineLayerHeight = 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.EXPANDED_SECTION_PADDING_LEFT = exports.TREE_GROUP_ROW_HEIGHT = exports.TIMELINE_TRACK_EXPANDED_HEIGHT = exports.TIMELINE_ITEM_BORDER_BOTTOM = exports.TIMELINE_BORDER = exports.TIMELINE_PADDING = exports.getFieldsToShow = exports.getEffectFieldsToShow = exports.SCHEMA_FIELD_ROW_HEIGHT = void 0;
+exports.getTimelineLayerHeight = 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.getFieldsToShow = exports.getEffectFieldsToShow = exports.SCHEMA_FIELD_ROW_HEIGHT = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const studio_shared_2 = require("@remotion/studio-shared");
 Object.defineProperty(exports, "SCHEMA_FIELD_ROW_HEIGHT", { enumerable: true, get: function () { return studio_shared_2.SCHEMA_FIELD_ROW_HEIGHT; } });
@@ -11,12 +11,33 @@ exports.TIMELINE_BORDER = 1;
 exports.TIMELINE_ITEM_BORDER_BOTTOM = 1;
 exports.TIMELINE_TRACK_EXPANDED_HEIGHT = 100;
 exports.TREE_GROUP_ROW_HEIGHT = 22;
-exports.EXPANDED_SECTION_PADDING_LEFT = 28;
 exports.EXPANDED_SECTION_PADDING_RIGHT = 10;
 const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, codeValues, }) => {
     var _a;
     const roots = [];
     const { sequenceSubscriptionKey, index, auxiliaryKeys } = nodePathInfo;
+    const controlFields = (0, studio_shared_1.getFieldsToShow)({
+        schema: sequence.controls.schema,
+        currentRuntimeValueDotNotation: sequence.controls.currentRuntimeValueDotNotation,
+        getDragOverrides,
+        codeValues,
+        nodePath: sequenceSubscriptionKey,
+    });
+    if (controlFields && controlFields.length > 0) {
+        for (const f of controlFields) {
+            roots.push({
+                kind: 'field',
+                nodePathInfo: {
+                    sequenceSubscriptionKey,
+                    auxiliaryKeys: [...auxiliaryKeys, 'controls', f.key],
+                    index,
+                    numberOfSequencesWithThisNodePath: 0,
+                },
+                label: (_a = f.description) !== null && _a !== void 0 ? _a : f.key,
+                field: f,
+            });
+        }
+    }
     if (sequence.effects.length > 0) {
         roots.push({
             kind: 'group',
@@ -27,6 +48,7 @@ const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, codeValue
                 numberOfSequencesWithThisNodePath: 0,
             },
             label: 'Effects',
+            effectInfo: null,
             children: sequence.effects.map((effect, i) => {
                 const effectFields = (0, studio_shared_1.getEffectFieldsToShow)(effect, i);
                 return {
@@ -38,13 +60,19 @@ const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, codeValue
                         numberOfSequencesWithThisNodePath: 0,
                     },
                     label: effect.label,
+                    effectInfo: { effectIndex: i, effectSchema: effect.schema },
                     children: effectFields.map((f) => {
                         var _a;
                         return ({
                             kind: 'field',
                             nodePathInfo: {
                                 sequenceSubscriptionKey,
-                                auxiliaryKeys: [...auxiliaryKeys, f.key],
+                                auxiliaryKeys: [
+                                    ...auxiliaryKeys,
+                                    'effects',
+                                    i.toString(),
+                                    f.key,
+                                ],
                                 index,
                                 numberOfSequencesWithThisNodePath: 0,
                             },
@@ -56,28 +84,6 @@ const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, codeValue
             }),
         });
     }
-    const controlFields = (0, studio_shared_1.getFieldsToShow)({
-        schema: sequence.controls.schema,
-        currentRuntimeValueDotNotation: sequence.controls.currentRuntimeValueDotNotation,
-        getDragOverrides,
-        codeValues,
-        nodePath: sequenceSubscriptionKey,
-    });
-    if (controlFields && controlFields.length > 0) {
-        for (const f of controlFields) {
-            roots.push({
-                kind: 'field',
-                nodePathInfo: {
-                    sequenceSubscriptionKey,
-                    auxiliaryKeys: [...auxiliaryKeys, 'controls', f.key],
-                    index,
-                    numberOfSequencesWithThisNodePath: 0,
-                },
-                label: (_a = f.description) !== null && _a !== void 0 ? _a : f.key,
-                field: f,
-            });
-        }
-    }
     return roots;
 };
 exports.buildTimelineTree = buildTimelineTree;