@remotion/studio 4.0.462 → 4.0.464

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 }) })) : 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 NotificationCenter_1 = require("../Notifications/NotificationCenter");
-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;
@@ -73,53 +74,30 @@ const Value = ({ field, nodePath, validatedLocation }) => {
             propStatus.codeValue === undefined) {
             return Promise.resolve();
         }
-        let previousUpdate;
-        setCodeValues(nodePath, (prev) => {
-            previousUpdate = prev;
-            return (0, studio_shared_1.optimisticUpdateForEffectCodeValues)({
+        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,
-            });
-        });
-        return (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,
-        })
-            .then((data) => {
-            setCodeValues(nodePath, (prev) => {
-                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 next = [...prev.effects];
-                next[idx] = data;
-                return { ...prev, effects: next };
-            });
-        })
-            .catch((err) => {
-            setCodeValues(nodePath, (current) => {
-                if (previousUpdate) {
-                    return previousUpdate;
-                }
-                return current;
-            });
-            (0, NotificationCenter_1.showNotification)(`Could not save effect prop: ${err instanceof Error ? err.message : String(err)}`, 4000);
+            }),
+            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,
+                clientId,
+            }),
+            errorLabel: 'Could not save effect prop',
         });
     }, [
+        clientId,
         field.effectIndex,
         field.effectSchema,
         field.fieldSchema.default,
@@ -151,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({
@@ -161,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

@@ -0,0 +1,16 @@
+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 rowDepth: number;
+    readonly getIsExpanded: GetIsExpanded;
+    readonly toggleTrack: (nodePathInfo: SequenceNodePathInfo) => void;
+}>;

package/dist/components/Timeline/TimelineEffectGroupRow.js

@@ -0,0 +1,76 @@
+"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 save_effect_prop_1 = require("./save-effect-prop");
+const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
+const TimelineLayerEye_1 = require("./TimelineLayerEye");
+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, 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({
+        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 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,
+        paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
+    }), []);
+    return (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 }) }));
+};
+exports.TimelineEffectGroupRow = TimelineEffectGroupRow;

package/dist/components/Timeline/TimelineExpandedRow.js

@@ -2,54 +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, 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;
 }>;