@remotion/studio 4.0.463 → 4.0.465

package/dist/components/Timeline/TimelineColorField.js

@@ -3,179 +3,41 @@ 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 ColorPicker_1 = require("../ColorPicker/ColorPicker");
 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 SWATCH_WIDTH = 20;
+const SWATCH_HEIGHT = 15;
 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();
-            }
-        };
-    }, []);
+    var _a;
     const currentValue = typeof effectiveValue === 'string'
         ? effectiveValue
         : field.fieldSchema.type === 'color'
-            ? field.fieldSchema.default
+            ? ((_a = field.fieldSchema.default) !== null && _a !== void 0 ? _a : '#000')
             : '';
-    const hexValue = (0, react_1.useMemo)(() => toHex(currentValue), [currentValue]);
-    const onColorChange = (0, react_1.useCallback)((e) => {
-        const newValue = e.target.value;
+    const onChange = (0, react_1.useCallback)((next) => {
         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) {
+        onDragValueChange(next);
+    }, [onDragValueChange, propStatus.canUpdate]);
+    const onChangeComplete = (0, react_1.useCallback)((next) => {
+        if (!propStatus.canUpdate) {
             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)(() => {
+        if (next !== propStatus.codeValue) {
+            onSave(next);
+        }
+        onDragEnd();
+    }, [onSave, onDragEnd, propStatus]);
+    const swatchStyle = (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] }));
+    }, []);
+    return (jsx_runtime_1.jsx("span", { style: containerStyle, children: jsx_runtime_1.jsx(ColorPicker_1.ColorPicker, { value: currentValue, status: "ok", onChange: onChange, onChangeComplete: onChangeComplete, width: SWATCH_WIDTH, height: SWATCH_HEIGHT, disabled: !propStatus.canUpdate, name: field.key, title: currentValue, style: swatchStyle }) }));
 };
 exports.TimelineColorField = TimelineColorField;

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

@@ -5,7 +5,6 @@ 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 rowDepth: number;
     readonly nodePath: SequencePropsSubscriptionKey;
 }>;

package/dist/components/Timeline/TimelineEffectFieldRow.js

@@ -5,15 +5,16 @@ 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 client_id_1 = require("../../helpers/client-id");
 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 timeline_field_row_layout_1 = require("./timeline-field-row-layout");
+const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
+const TimelineLayerEye_1 = require("./TimelineLayerEye");
+const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const fieldRowBase = {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 8,
     paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
 };
 const fieldName = {
@@ -21,19 +22,16 @@ const fieldName = {
     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 { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const clientId = previewServerState.type === 'connected'
+        ? previewServerState.clientId
+        : null;
     const effectStatus = remotion_1.Internals.getEffectCodeValuesCtx({
         codeValues: visualModeCodeValues,
         nodePath,
@@ -62,6 +60,9 @@ const Value = ({ field, nodePath, validatedLocation }) => {
         if (!propStatus.canUpdate) {
             return Promise.reject(new Error('Cannot save'));
         }
+        if (!clientId) {
+            return Promise.reject(new Error('Not connected to studio server'));
+        }
         const defaultValue = field.fieldSchema.default !== undefined
             ? JSON.stringify(field.fieldSchema.default)
             : null;
@@ -91,25 +92,12 @@ const Value = ({ field, nodePath, validatedLocation }) => {
                 value: stringifiedValue,
                 defaultValue,
                 schema: field.effectSchema,
+                clientId,
             }),
-            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',
         });
     }, [
+        clientId,
         field.effectIndex,
         field.effectSchema,
         field.fieldSchema.default,
@@ -141,6 +129,9 @@ const Value = ({ field, nodePath, validatedLocation }) => {
         throw new Error(`Unsupported effect status: ${effectStatus.reason}`);
     }
     if (propStatus === null || !propStatus.canUpdate) {
+        if ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.reason) === 'computed') {
+            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "computed" });
+        }
         return null;
     }
     const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
@@ -151,17 +142,17 @@ const Value = ({ field, nodePath, validatedLocation }) => {
     });
     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 }) => {
+const TimelineEffectFieldRow = ({ field, validatedLocation, rowDepth, 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 })
+    }, [field.rowHeight]);
+    const labelRowStyle = (0, react_1.useMemo)(() => (0, timeline_field_row_layout_1.getTimelineFieldLabelRowStyle)(rowDepth), [rowDepth]);
+    return (jsx_runtime_1.jsxs(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, children: [
+            jsx_runtime_1.jsx("div", { style: labelRowStyle, 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

@@ -10,8 +10,7 @@ export declare const TimelineEffectGroupRow: React.FC<{
     readonly effectSchema: SequenceSchema;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly validatedLocation: CodePosition;
-    readonly nestedDepth: number;
-    readonly style: React.CSSProperties;
+    readonly rowDepth: number;
     readonly getIsExpanded: GetIsExpanded;
     readonly toggleTrack: (nodePathInfo: SequenceNodePathInfo) => void;
 }>;

package/dist/components/Timeline/TimelineEffectGroupRow.js

@@ -4,22 +4,25 @@ 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 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 groupRowBase = {
-    display: 'flex',
-    alignItems: 'center',
-};
+const TimelineRowChrome_1 = require("./TimelineRowChrome");
 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, }) => {
+const TimelineEffectGroupRow = ({ label, nodePathInfo, effectIndex, effectSchema, nodePath, validatedLocation, rowDepth, getIsExpanded, toggleTrack, }) => {
     var _a;
     var _b;
+    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 effectStatus = (0, react_1.useMemo)(() => remotion_1.Internals.getEffectCodeValuesCtx({
@@ -36,9 +39,57 @@ const TimelineEffectGroupRow = ({ label, nodePathInfo, effectIndex, effectSchema
         }
         return false;
     }, [disabledStatus]);
-    const canToggle = disabledStatus !== null && disabledStatus.canUpdate;
+    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) {
+        if (!canToggle || previewServerState.type !== 'connected') {
             return;
         }
         const newValue = type !== 'enable';
@@ -55,19 +106,23 @@ const TimelineEffectGroupRow = ({ label, nodePathInfo, effectIndex, effectSchema
             defaultValue,
             schema: effectSchema,
             setCodeValues,
+            clientId: previewServerState.clientId,
         });
     }, [
         canToggle,
         effectIndex,
         effectSchema,
         nodePath,
+        previewServerState,
         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 })
-        ] }));
+    const rowStyle = (0, react_1.useMemo)(() => ({
+        height: timeline_layout_1.TREE_GROUP_ROW_HEIGHT,
+        paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
+    }), []);
+    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, children: jsx_runtime_1.jsx("span", { style: rowLabel, children: label }) }));
+    return previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, children: row })) : (row);
 };
 exports.TimelineEffectGroupRow = TimelineEffectGroupRow;

package/dist/components/Timeline/TimelineExpandedRow.js

@@ -2,58 +2,43 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineExpandedRow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
-const Padder_1 = require("./Padder");
+const timeline_row_layout_1 = require("./timeline-row-layout");
 const TimelineEffectFieldRow_1 = require("./TimelineEffectFieldRow");
 const TimelineEffectGroupRow_1 = require("./TimelineEffectGroupRow");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineFieldRow_1 = require("./TimelineFieldRow");
-const TimelineListItem_1 = require("./TimelineListItem");
-const groupRowBase = {
-    height: timeline_layout_1.TREE_GROUP_ROW_HEIGHT,
-    display: 'flex',
-    alignItems: 'center',
-    paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
-};
+const TimelineLayerEye_1 = require("./TimelineLayerEye");
+const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const rowLabel = {
     fontSize: 12,
     color: 'rgba(255, 255, 255, 0.8)',
     userSelect: 'none',
 };
-const labelOnlyRowBase = {
-    display: 'flex',
-    alignItems: 'center',
-    paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
-};
 const TimelineExpandedRow = ({ node, depth, nestedDepth, getIsExpanded, toggleTrack, validatedLocation, nodePath, schema, }) => {
-    const paddingLeft = timeline_layout_1.EXPANDED_SECTION_PADDING_LEFT + depth * TimelineListItem_1.INDENT;
-    const groupStyle = (0, react_1.useMemo)(() => ({ ...groupRowBase, paddingLeft }), [paddingLeft]);
-    const labelOnlyStyle = (0, react_1.useMemo)(() => ({
-        ...labelOnlyRowBase,
-        height: (0, timeline_layout_1.getTreeRowHeight)(node),
-        paddingLeft,
-    }), [node, paddingLeft]);
+    const rowDepth = (0, timeline_row_layout_1.getExpandedRowDepth)({ nestedDepth, treeDepth: depth });
     if (node.kind === 'group') {
         if (node.effectInfo) {
-            return (jsx_runtime_1.jsx(TimelineEffectGroupRow_1.TimelineEffectGroupRow, { label: node.label, nodePathInfo: node.nodePathInfo, effectIndex: node.effectInfo.effectIndex, effectSchema: node.effectInfo.effectSchema, nodePath: nodePath, validatedLocation: validatedLocation, nestedDepth: nestedDepth, style: groupStyle, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack }));
+            return (jsx_runtime_1.jsx(TimelineEffectGroupRow_1.TimelineEffectGroupRow, { label: node.label, nodePathInfo: node.nodePathInfo, effectIndex: node.effectInfo.effectIndex, effectSchema: node.effectInfo.effectSchema, nodePath: nodePath, validatedLocation: validatedLocation, rowDepth: rowDepth, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack }));
         }
         const isExpanded = getIsExpanded(node.nodePathInfo);
-        return (jsx_runtime_1.jsxs("div", { style: groupStyle, children: [
-                jsx_runtime_1.jsx(Padder_1.Padder, { depth: nestedDepth + 1 }), jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(node.nodePathInfo), label: `${node.label} section`, disabled: false }), jsx_runtime_1.jsx("span", { style: rowLabel, children: node.label })
-            ] }));
+        return (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(node.nodePathInfo), label: `${node.label} section`, disabled: false }), style: {
+                height: timeline_layout_1.TREE_GROUP_ROW_HEIGHT,
+                paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
+            }, children: jsx_runtime_1.jsx("span", { style: rowLabel, children: node.label }) }));
     }
     if (node.field) {
         if (node.field.kind === 'effect-field') {
-            return (jsx_runtime_1.jsx(TimelineEffectFieldRow_1.TimelineEffectFieldRow, { field: node.field, validatedLocation: validatedLocation, paddingLeft: paddingLeft, nestedDepth: nestedDepth, nodePath: nodePath }));
+            return (jsx_runtime_1.jsx(TimelineEffectFieldRow_1.TimelineEffectFieldRow, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath }));
         }
         if (node.field.kind === 'sequence-field') {
-            return (jsx_runtime_1.jsx(TimelineFieldRow_1.TimelineFieldRow, { field: node.field, validatedLocation: validatedLocation, paddingLeft: paddingLeft, nestedDepth: nestedDepth, nodePath: nodePath, schema: schema }));
+            return (jsx_runtime_1.jsx(TimelineFieldRow_1.TimelineFieldRow, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, schema: schema }));
         }
         throw new Error('Unexpected field kind: ' + JSON.stringify(node.field));
     }
-    return (jsx_runtime_1.jsxs("div", { style: labelOnlyStyle, children: [
-            jsx_runtime_1.jsx(Padder_1.Padder, { depth: nestedDepth + 1 }), jsx_runtime_1.jsx("span", { style: rowLabel, children: node.label })
-        ] }));
+    return (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: {
+            height: (0, timeline_layout_1.getTreeRowHeight)(node),
+            paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
+        }, children: jsx_runtime_1.jsx("span", { style: rowLabel, children: node.label }) }));
 };
 exports.TimelineExpandedRow = TimelineExpandedRow;

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

@@ -6,8 +6,7 @@ import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
 export declare const TimelineFieldRow: React.FC<{
     readonly field: SchemaFieldInfo;
     readonly validatedLocation: CodePosition;
-    readonly paddingLeft: number;
-    readonly nestedDepth: number;
+    readonly rowDepth: number;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: SequenceSchema;
 }>;

package/dist/components/Timeline/TimelineFieldRow.js

@@ -4,14 +4,15 @@ exports.TimelineFieldRow = 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 Padder_1 = require("./Padder");
 const save_sequence_prop_1 = require("./save-sequence-prop");
+const timeline_field_row_layout_1 = require("./timeline-field-row-layout");
+const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
+const TimelineLayerEye_1 = require("./TimelineLayerEye");
+const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const fieldRowBase = {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 8,
     paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
 };
 const fieldName = {
@@ -19,13 +20,6 @@ const fieldName = {
     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, schema, codeValue }) => {
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -42,10 +36,17 @@ const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
         shouldResortToDefaultValueIfUndefined: true,
     });
     const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const clientId = previewServerState.type === 'connected'
+        ? previewServerState.clientId
+        : null;
     const onSave = (0, react_1.useCallback)((value) => {
         if (!codeValue || !codeValue.canUpdate) {
             return Promise.reject(new Error('Cannot save'));
         }
+        if (!clientId) {
+            return Promise.reject(new Error('Not connected to studio server'));
+        }
         const defaultValue = field.fieldSchema.default !== undefined
             ? JSON.stringify(field.fieldSchema.default)
             : null;
@@ -65,9 +66,11 @@ const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
             defaultValue,
             schema,
             setCodeValues,
+            clientId,
         });
     }, [
         codeValue,
+        clientId,
         field.fieldSchema.default,
         field.key,
         nodePath,
@@ -89,7 +92,7 @@ const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
     }, [clearDragOverrides, nodePath]);
     return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: codeValue, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue }));
 };
-const TimelineFieldRow = ({ field, validatedLocation, paddingLeft, nestedDepth, nodePath, schema, }) => {
+const TimelineFieldRow = ({ field, validatedLocation, rowDepth, nodePath, schema }) => {
     var _a, _b;
     const { codeValues: visualModeCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
     const codeValuesForOverride = remotion_1.Internals.getCodeValuesCtx(visualModeCodeValues, nodePath);
@@ -98,13 +101,13 @@ const TimelineFieldRow = ({ field, validatedLocation, paddingLeft, nestedDepth,
         return {
             ...fieldRowBase,
             height: field.rowHeight,
-            paddingLeft,
         };
-    }, [field.rowHeight, paddingLeft]);
+    }, [field.rowHeight]);
+    const labelRowStyle = (0, react_1.useMemo)(() => (0, timeline_field_row_layout_1.getTimelineFieldLabelRowStyle)(rowDepth), [rowDepth]);
     if (codeValue === null) {
         return null;
     }
-    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: (_b = field.description) !== null && _b !== void 0 ? _b : field.key }) }), codeValue.canUpdate ? (jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, schema: schema, codeValue: codeValue })) : (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: codeValue }))] }));
+    return (jsx_runtime_1.jsxs(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, children: [
+            jsx_runtime_1.jsx("div", { style: labelRowStyle, children: jsx_runtime_1.jsx("span", { style: fieldName, children: (_b = field.description) !== null && _b !== void 0 ? _b : field.key }) }), codeValue.canUpdate ? (jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, schema: schema, codeValue: codeValue })) : (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: codeValue }))] }));
 };
 exports.TimelineFieldRow = TimelineFieldRow;