@remotion/studio 4.0.526 → 4.0.528

package/dist/components/SkillsSettings.js

@@ -10,7 +10,9 @@ const use_copy_feedback_1 = require("../helpers/use-copy-feedback");
 const check_circle_filled_1 = require("../icons/check-circle-filled");
 const cloud_download_1 = require("../icons/cloud-download");
 const copy_1 = require("../icons/copy");
+const skills_1 = require("../icons/skills");
 const trash_1 = require("../icons/trash");
+const ActionTooltip_1 = require("./ActionTooltip");
 const InlineAction_1 = require("./InlineAction");
 const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
@@ -33,7 +35,7 @@ const description = {
 };
 const commandField = {
     alignItems: 'center',
-    backgroundColor: 'rgba(0, 0, 0, 0.22)',
+    backgroundColor: colors_1.BLACK_ALPHA_22,
     borderRadius: 4,
     display: 'flex',
     marginTop: 8,
@@ -59,15 +61,14 @@ const list = {
 };
 const skillRow = {
     alignItems: 'center',
-    borderBottom: colors_1.BORDER_WHITE_ALPHA_12,
     display: 'flex',
     gap: 10,
     minHeight: 38,
-    padding: '0 10px',
 };
-const lastSkillRow = {
-    ...skillRow,
-    borderBottom: 'none',
+const skillIcon = {
+    flexShrink: 0,
+    height: 16,
+    width: 16,
 };
 const statusIcon = {
     flexShrink: 0,
@@ -75,7 +76,7 @@ const statusIcon = {
     width: 14,
 };
 const skillName = {
-    color: colors_1.WHITE,
+    color: colors_1.LIGHT_TEXT,
     flex: 1,
     fontFamily: 'monospace',
     fontSize: 13,
@@ -107,7 +108,7 @@ const loading = {
     ...description,
     marginTop: 14,
 };
-const SkillSettingsRow = ({ isLast, skill }) => {
+const SkillSettingsRow = ({ skill }) => {
     const { installSkill, removeSkill, skillAction } = (0, SettingsContext_1.useSettings)();
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const canInstall = !window.remotion_isReadOnlyStudio &&
@@ -127,10 +128,8 @@ const SkillSettingsRow = ({ isLast, skill }) => {
     const renderRemoveAction = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(trash_1.TrashIcon, { color: color, style: actionIcon });
     }, []);
-    return (jsx_runtime_1.jsxs("div", { role: "listitem", style: isLast ? lastSkillRow : skillRow, children: [
-            jsx_runtime_1.jsxs("span", { style: skillName, children: ["/", skill.name] }), processingThisSkill ? (jsx_runtime_1.jsx("span", { style: status, children: skillAction.type === 'installing' ? 'Installing…' : 'Removing…' })) : installedLocation ? (jsx_runtime_1.jsx("span", { style: status, children: installedLocation })) : null, installed ? (jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { "aria-hidden": true, style: { ...statusIcon, fill: colors_1.BLUE } })) : null, processingThisSkill ? (jsx_runtime_1.jsx("span", { style: actionSlot, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 14 }) })) : installed && canInstall ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: skill.installedInProject
-                    ? `Remove ${skill.name} from this project`
-                    : `Remove ${skill.name} globally`, disabled: skillAction !== null, onClick: () => removeSkill(skill.name), renderAction: renderRemoveAction, variant: null })) : canInstall ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: `Install ${skill.name} in this project`, disabled: skillAction !== null, onClick: () => installSkill(skill.name), renderAction: renderInstallAction, variant: null })) : null] }));
+    return (jsx_runtime_1.jsxs("div", { role: "listitem", style: skillRow, children: [
+            jsx_runtime_1.jsx(skills_1.SkillsIcon, { "aria-hidden": true, color: colors_1.LIGHT_TEXT, style: skillIcon }), jsx_runtime_1.jsxs("span", { style: skillName, children: ["/", skill.name] }), processingThisSkill ? (jsx_runtime_1.jsx("span", { style: status, children: skillAction.type === 'installing' ? 'Installing…' : 'Removing…' })) : installedLocation ? (jsx_runtime_1.jsx("span", { style: status, children: installedLocation })) : null, installed ? (jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { "aria-hidden": true, style: { ...statusIcon, fill: colors_1.BLUE } })) : null, processingThisSkill ? (jsx_runtime_1.jsx("span", { style: actionSlot, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 14 }) })) : installed && canInstall ? (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Uninstall", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": `Remove ${skill.name}`, title: "", disabled: skillAction !== null, onClick: () => removeSkill(skill.name), renderAction: renderRemoveAction, variant: null }) })) : canInstall ? (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Install", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": `Install ${skill.name}`, title: "", disabled: skillAction !== null, onClick: () => installSkill(skill.name), renderAction: renderInstallAction, variant: null }) })) : null] }));
 };
 exports.SkillSettingsRow = SkillSettingsRow;
 const SkillsSettings = () => {
@@ -159,8 +158,8 @@ const SkillsSettings = () => {
                     jsx_runtime_1.jsx("p", { style: description, children: "Not all skills are installed. Run this command in the project directory, then reload Studio and restart your coding agent." }), jsx_runtime_1.jsxs("div", { style: commandField, children: [
                             jsx_runtime_1.jsx("pre", { style: command, children: INSTALL_COMMAND }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopy, renderAction: renderCopyAction, title: "Copy install command" })
                         ] })
-                ] })) : null, remotionSkillsInfo ? (jsx_runtime_1.jsx("div", { style: list, role: "list", "aria-label": "Remotion Agent Skills", children: remotionSkillsInfo.skills.map((skill, index) => {
-                    return (jsx_runtime_1.jsx(exports.SkillSettingsRow, { isLast: index === remotionSkillsInfo.skills.length - 1, skill: skill }, skill.name));
+                ] })) : null, remotionSkillsInfo ? (jsx_runtime_1.jsx("div", { style: list, role: "list", "aria-label": "Remotion Agent Skills", children: remotionSkillsInfo.skills.map((skill) => {
+                    return jsx_runtime_1.jsx(exports.SkillSettingsRow, { skill: skill }, skill.name);
                 }) })) : null] }));
 };
 exports.SkillsSettings = SkillsSettings;

package/dist/components/Splitter/SplitterElement.js

@@ -4,7 +4,6 @@ exports.SplitterElement = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const colors_1 = require("../../helpers/colors");
 const SplitterContext_1 = require("./SplitterContext");
 const SplitterElement = ({ children, type, sticky }) => {
     const context = (0, react_1.useContext)(SplitterContext_1.SplitterContext);
@@ -44,7 +43,7 @@ const SplitterElement = ({ children, type, sticky }) => {
             left: (type === 'flexer' ? 0 : context.flexValue) * 100 + '%',
             width: (type === 'flexer' ? context.flexValue : 1 - context.flexValue) * 100 +
                 '%',
-            backgroundColor: (0, remotion_1.interpolateColors)((0, remotion_1.random)(context.flexValue), [0, 1], [colors_1.RED, 'blue']),
+            backgroundColor: (0, remotion_1.interpolateColors)((0, remotion_1.random)(context.flexValue), [0, 1], ['red', 'blue']),
         };
     }, [context.flexValue, type]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [

package/dist/components/TimeValue.js

@@ -49,7 +49,7 @@ const currentTimeButtonStyle = {
     padding: 0,
     border: 'none',
     lineHeight: '21px',
-    '--remotion-cli-internals-blue-hovered': colors_1.WHITE,
+    '--remotion-studio-blue-hovered': colors_1.WHITE,
 };
 const currentTimeSubtitle = {
     ...(0, hoverable_1.hoverableStyle)({

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

@@ -1,6 +1,7 @@
 import React from 'react';
 export declare const LoopedTimelineIndicator: React.FC<{
     readonly loops: number;
+    readonly phase: number;
     readonly fullWidth: number;
     readonly visibleOffset: number;
     readonly visibleWidth: number;

package/dist/components/Timeline/LoopedTimelineIndicators.js

@@ -7,18 +7,19 @@ const LoopedIndicator_1 = require("./LoopedIndicator");
 const row = {
     overflow: 'hidden',
 };
-const LoopedTimelineIndicator = ({ loops, fullWidth, visibleOffset, visibleWidth }) => {
-    if (loops <= 1 || fullWidth <= 0 || visibleWidth <= 0) {
+const LoopedTimelineIndicator = ({ loops, phase, fullWidth, visibleOffset, visibleWidth }) => {
+    if (loops + phase <= 1 || fullWidth <= 0 || visibleWidth <= 0) {
         return null;
     }
     const loopWidth = fullWidth / loops;
-    const lastBoundaryIndex = Math.ceil(loops) - 1;
-    const firstVisibleBoundaryIndex = Math.max(1, Math.floor(visibleOffset / loopWidth));
-    const lastVisibleBoundaryIndex = Math.min(lastBoundaryIndex, Math.ceil((visibleOffset + visibleWidth) / loopWidth));
+    const phaseWidth = phase * loopWidth;
+    const lastBoundaryIndex = Math.ceil(loops + phase) - 1;
+    const firstVisibleBoundaryIndex = Math.max(1, Math.floor((visibleOffset + phaseWidth) / loopWidth));
+    const lastVisibleBoundaryIndex = Math.min(lastBoundaryIndex, Math.ceil((visibleOffset + visibleWidth + phaseWidth) / loopWidth));
     const visibleBoundaryCount = Math.max(0, lastVisibleBoundaryIndex - firstVisibleBoundaryIndex + 1);
     const boundaries = new Array(visibleBoundaryCount)
         .fill(true)
-        .map((_, index) => (firstVisibleBoundaryIndex + index) * loopWidth);
+        .map((_, index) => (firstVisibleBoundaryIndex + index) * loopWidth - phaseWidth);
     return (jsx_runtime_1.jsx(remotion_1.Internals.AbsoluteFillElement, { style: row, children: boundaries.map((boundary) => {
             return (jsx_runtime_1.jsx("div", { style: {
                     position: 'absolute',

package/dist/components/Timeline/TimelineArrayField.js

@@ -67,7 +67,7 @@ const getFallbackItemValue = (field) => {
         return [0.5, 0.5];
     }
     if (field.item.type === 'color') {
-        return colors_1.BLACK_FULL_HEX;
+        return '#000000';
     }
     if (field.item.type === 'enum') {
         const [firstVariant] = field.item.variants;

package/dist/components/Timeline/TimelineClipboardKeybindings.js

@@ -560,7 +560,6 @@ const TimelineClipboardKeybindings = () => {
                         }
                         const nextSelection = (0, delete_selected_timeline_item_1.getTimelineSelectionAfterDeletingItems)({
                             selections: selectedItems,
-                            propStatuses,
                         });
                         if (nextSelection.length === 0) {
                             clearSelection();

package/dist/components/Timeline/TimelineColorField.js

@@ -31,7 +31,7 @@ const TimelineColorField = ({ field, effectiveValue, propStatus, onSave, onDragV
     const currentValue = typeof effectiveValue === 'string'
         ? effectiveValue
         : field.fieldSchema.type === 'color'
-            ? ((_a = field.fieldSchema.default) !== null && _a !== void 0 ? _a : colors_1.BLACK_HEX)
+            ? ((_a = field.fieldSchema.default) !== null && _a !== void 0 ? _a : '#000')
             : '';
     const onChange = (0, react_1.useCallback)((next) => {
         onDragValueChange(next);

package/dist/components/Timeline/TimelineDeleteKeybindings.js

@@ -6,6 +6,7 @@ const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
+const SequencePropsSubscriptionProvider_1 = require("../SequencePropsSubscriptionProvider");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
 const imperative_state_1 = require("./imperative-state");
 const split_selected_timeline_item_1 = require("./split-selected-timeline-item");
@@ -15,7 +16,7 @@ const TimelineDeleteKeybindings = () => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
-    const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
+    const overrideIdToNodePathMappingsRef = (0, react_1.useContext)(SequencePropsSubscriptionProvider_1.OverrideIdToNodePathMappingsRefContext);
     const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
     const { canSelect } = (0, TimelineSelection_1.useTimelineSelection)();
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
@@ -56,11 +57,8 @@ const TimelineDeleteKeybindings = () => {
         });
         const split = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'd',
-            callback: (event) => {
-                if (!(0, split_selected_timeline_item_1.shouldHandleTimelineSplitShortcut)(event)) {
-                    return;
-                }
+            action: 'splitSequences',
+            callback: () => {
                 const { selectedItems } = currentSelection.current;
                 if (selectedItems.length === 0) {
                     return;
@@ -68,7 +66,7 @@ const TimelineDeleteKeybindings = () => {
                 const splitPromise = (0, split_selected_timeline_item_1.splitSelectedTimelineItems)({
                     selections: selectedItems,
                     sequences: sequencesRef.current,
-                    overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                    overrideIdsToNodePaths: overrideIdToNodePathMappingsRef.current,
                     propStatuses: propStatusesRef.current,
                     splitFrame: (0, imperative_state_1.getCurrentFrame)(),
                 });
@@ -77,7 +75,6 @@ const TimelineDeleteKeybindings = () => {
                 }
                 splitPromise.catch(() => undefined);
             },
-            commandCtrlKey: true,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
@@ -93,7 +90,7 @@ const TimelineDeleteKeybindings = () => {
         currentSelection,
         deleteTimelineItems,
         keybindings,
-        overrideIdToNodePathMappings,
+        overrideIdToNodePathMappingsRef,
         propStatusesRef,
         previewServerState,
         sequencesRef,

package/dist/components/Timeline/TimelineDragHandler.js

@@ -122,7 +122,7 @@ const TimelineDragHandlerInner = () => {
         shouldApplyCssTransforms: true,
     });
     const { isHighestContext } = (0, z_index_1.useZIndex)();
-    const setFrame = remotion_1.Internals.useTimelineSetFrame();
+    const setFrame = remotion_1.Internals.Timeline.useTimelineSeekFrame();
     const width = (0, timeline_scroll_logic_1.getTimelineContentWidth)();
     const left = (_a = size === null || size === void 0 ? void 0 : size.left) !== null && _a !== void 0 ? _a : 0;
     const [dragging, setDragging] = (0, react_1.useState)({

package/dist/components/Timeline/TimelineEffectItem.js

@@ -24,6 +24,7 @@ const rowLabel = {
     fontSize: 12,
     color: colors_1.WHITE_ALPHA_80,
     userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
 const rowStyle = {
     height: timeline_layout_1.TREE_GROUP_ROW_HEIGHT,

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

@@ -18,6 +18,7 @@ export declare const TimelineEffectPropItem: React.FC<{
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
     readonly keyframeControlsMode: TimelineKeyframeControlsMode;
     readonly revealInInspector: boolean;
     readonly runtimeValueStore: RuntimeValueStore | null;

package/dist/components/Timeline/TimelineEffectPropItem.js

@@ -228,11 +228,16 @@ const TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFra
     return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue, scaleLockNodePath: null }));
 };
 exports.TimelineEffectPropValue = TimelineEffectPropValue;
-const TimelineEffectPropValueAtCurrentFrame = ({ field, nodePath, validatedLocation, keyframeDisplayOffset, runtimeValueStore, }) => {
+const TimelineEffectPropValueAtCurrentFrame = ({ field, nodePath, validatedLocation, keyframeDisplayOffset, keyframePlaybackRate, propStatus, runtimeValueStore, }) => {
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    return (jsx_runtime_1.jsx(exports.TimelineEffectPropValue, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, sourceFrame: timelinePosition - keyframeDisplayOffset, runtimeValueStore: runtimeValueStore }));
+    return (jsx_runtime_1.jsx(exports.TimelineEffectPropValue, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, sourceFrame: (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
+            displayFrame: timelinePosition,
+            keyframeDisplayOffset,
+            keyframePlaybackRate,
+            propStatus,
+        }), runtimeValueStore: runtimeValueStore }));
 };
-const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, keyframeDisplayOffset, keyframeControlsMode, revealInInspector, runtimeValueStore, }) => {
+const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, keyframeDisplayOffset, keyframePlaybackRate, keyframeControlsMode, revealInInspector, runtimeValueStore, }) => {
     var _a;
     var _b;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -241,6 +246,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo, revealInInspector);
+    const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(nodePathInfo);
     const style = (0, react_1.useMemo)(() => {
         return field.typeName === 'text-content'
             ? fieldRowBase
@@ -257,6 +263,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
     const resolvedKeyframeDisplayOffset = (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
         propStatus,
         keyframeDisplayOffset,
+        keyframePlaybackRate,
     });
     const dragOverrideValue = (0, react_1.useMemo)(() => {
         const overrides = getEffectDragOverrides(nodePath, field.effectIndex);
@@ -273,7 +280,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
                 propStatus,
                 selected: selection.selected,
                 keyframable,
-            })) ? (jsx_runtime_1.jsx(TimelineKeyframeControls_1.TimelineKeyframeControls, { fieldKey: field.key, propStatus: propStatus, nodePath: nodePath, fileName: validatedLocation.source, keyframeDisplayOffset: keyframeDisplayOffset, defaultValue: field.fieldSchema.default, dragOverrideValue: dragOverrideValue, schema: field.effectSchema, effectIndex: field.effectIndex, nodePathInfo: nodePathInfo, mode: keyframeControlsMode })) : null;
+            })) ? (jsx_runtime_1.jsx(TimelineKeyframeControls_1.TimelineKeyframeControls, { fieldKey: field.key, propStatus: propStatus, nodePath: nodePath, fileName: validatedLocation.source, keyframeDisplayOffset: keyframeDisplayOffset, keyframePlaybackRate: keyframePlaybackRate, defaultValue: field.fieldSchema.default, dragOverrideValue: dragOverrideValue, schema: field.effectSchema, effectIndex: field.effectIndex, nodePathInfo: nodePathInfo, mode: keyframeControlsMode })) : null;
     const canResetToDefault = (0, react_1.useMemo)(() => {
         if (!propStatus || propStatus.status === 'computed') {
             return false;
@@ -361,7 +368,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
             property: field.key,
         }).catch(() => undefined);
     }, [canOpenInEditor, defaultEditorId, field.key, validatedLocation]);
-    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, onDoubleClick: onPropertyDoubleClick, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected, children: jsx_runtime_1.jsx(TimelineEffectPropValueAtCurrentFrame, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, keyframeDisplayOffset: resolvedKeyframeDisplayOffset, runtimeValueStore: runtimeValueStore }) }) }));
+    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, onDoubleClick: onPropertyDoubleClick, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: null, children: jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected || containsSelection, children: jsx_runtime_1.jsx(TimelineEffectPropValueAtCurrentFrame, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, keyframeDisplayOffset: resolvedKeyframeDisplayOffset, keyframePlaybackRate: keyframePlaybackRate, propStatus: propStatus, runtimeValueStore: runtimeValueStore }) }) }));
     return jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: row });
 };
 exports.TimelineEffectPropItem = TimelineEffectPropItem;

package/dist/components/Timeline/TimelineExpandArrowButton.js

@@ -52,6 +52,7 @@ const arrowButton = {
     fontSize: 8,
     marginRight: 4,
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     outline: 'none',
     lineHeight: 1,
 };

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

@@ -16,6 +16,7 @@ type TimelineExpandedRowProps = {
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: InteractivitySchema;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
     readonly keyframeControlsMode: TimelineKeyframeControlsMode;
 };
 export declare const TimelineExpandedRow: React.NamedExoticComponent<TimelineExpandedRowProps>;

package/dist/components/Timeline/TimelineExpandedRow.js

@@ -20,11 +20,13 @@ const rowLabel = {
     fontSize: 12,
     color: colors_1.WHITE_ALPHA_80,
     userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
-const TimelineExpandedRowInner = ({ node, depth, nestedDepth, rowDepthBase, getIsExpanded, toggleTrack, validatedLocation, nodePath, schema, keyframeDisplayOffset, keyframeControlsMode, }) => {
+const TimelineExpandedRowInner = ({ node, depth, nestedDepth, rowDepthBase, getIsExpanded, toggleTrack, validatedLocation, nodePath, schema, keyframeDisplayOffset, keyframePlaybackRate, keyframeControlsMode, }) => {
     const rowDepth = (rowDepthBase !== null && rowDepthBase !== void 0 ? rowDepthBase : (0, timeline_row_layout_1.getExpandedRowDepth)({ nestedDepth, treeDepth: 0 })) + depth;
     const isInspector = keyframeControlsMode === 'inspector';
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(node.nodePathInfo);
+    const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(node.nodePathInfo);
     const labelStyle = react_1.default.useMemo(() => ({
         ...rowLabel,
         ...(0, TimelineSelection_1.getTimelineSelectedLabelStyle)(selection.selected, true),
@@ -46,14 +48,14 @@ const TimelineExpandedRowInner = ({ node, depth, nestedDepth, rowDepthBase, getI
         const isExpanded = getIsExpanded(node.nodePathInfo);
         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,
-            }, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
+            }, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
     }
     if (node.field) {
         if (node.field.kind === 'effect-field') {
-            return (jsx_runtime_1.jsx(TimelineEffectPropItem_1.TimelineEffectPropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: isInspector ? rowDepth - 1 : rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: keyframeControlsMode, revealInInspector: !isInspector, runtimeValueStore: node.runtimeValueStore }));
+            return (jsx_runtime_1.jsx(TimelineEffectPropItem_1.TimelineEffectPropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: isInspector ? rowDepth - 1 : rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, keyframeDisplayOffset: keyframeDisplayOffset, keyframePlaybackRate: keyframePlaybackRate, keyframeControlsMode: keyframeControlsMode, revealInInspector: !isInspector, runtimeValueStore: node.runtimeValueStore }));
         }
         if (node.field.kind === 'sequence-field') {
-            return (jsx_runtime_1.jsx(TimelineSequencePropItem_1.TimelineSequencePropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: keyframeControlsMode, runtimeValue: node.runtimeValue }));
+            return (jsx_runtime_1.jsx(TimelineSequencePropItem_1.TimelineSequencePropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframePlaybackRate: keyframePlaybackRate, keyframeControlsMode: keyframeControlsMode, runtimeValue: node.runtimeValue }));
         }
         throw new Error('Unexpected field kind: ' + JSON.stringify(node.field));
     }

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

@@ -8,4 +8,5 @@ export declare const TimelineExpandedSection: React.FC<{
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly nestedDepth: number;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
 }>;

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -55,7 +55,7 @@ const separator = {
     height: 0,
     borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
 };
-const TimelineExpandedSection = ({ sequence, validatedLocation, nodePathInfo, nestedDepth, keyframeDisplayOffset, }) => {
+const TimelineExpandedSection = ({ sequence, validatedLocation, nodePathInfo, nestedDepth, keyframeDisplayOffset, keyframePlaybackRate, }) => {
     const { filteredTree, getIsExpanded, toggleTrack } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
         sequence,
         nodePathInfo,
@@ -79,7 +79,7 @@ const TimelineExpandedSection = ({ sequence, validatedLocation, nodePathInfo, ne
         return null;
     }
     return (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowSelectedBackgroundContext.Provider, { value: TimelineSelection_1.TIMELINE_EXPANDED_SELECTED_BACKGROUND, children: jsx_runtime_1.jsx("div", { style: style, children: flat.map(({ node, depth }, i) => {
-                return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i > 0 ? jsx_runtime_1.jsx("div", { style: separator }) : null, jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: nestedDepth, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: "timeline" })
+                return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i > 0 ? jsx_runtime_1.jsx("div", { style: separator }) : null, jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: nestedDepth, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframePlaybackRate: keyframePlaybackRate, keyframeControlsMode: "timeline" })
                     ] }, JSON.stringify(node.nodePathInfo)));
             }) }) }));
 };

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

@@ -5,6 +5,7 @@ type TimelineExpandedTrackKeyframesProps = {
     readonly sequence: TSequence;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
 };
 export declare const TimelineExpandedTrackKeyframes: React.NamedExoticComponent<TimelineExpandedTrackKeyframesProps>;
 export {};

package/dist/components/Timeline/TimelineExpandedTrackKeyframes.js

@@ -9,17 +9,19 @@ const react_1 = __importDefault(require("react"));
 const are_sequence_node_path_infos_equal_1 = require("../../helpers/are-sequence-node-path-infos-equal");
 const TimelineExpandedKeyframeRow_1 = require("./TimelineExpandedKeyframeRow");
 const use_expanded_track_keyframe_rows_1 = require("./use-expanded-track-keyframe-rows");
-const TimelineExpandedTrackKeyframesInner = ({ nodePathInfo, sequence, keyframeDisplayOffset }) => {
+const TimelineExpandedTrackKeyframesInner = ({ nodePathInfo, sequence, keyframeDisplayOffset, keyframePlaybackRate }) => {
     const { rows, expandedHeight } = (0, use_expanded_track_keyframe_rows_1.useExpandedTrackKeyframeRows)({
         sequence,
         nodePathInfo,
         keyframeDisplayOffset,
+        keyframePlaybackRate,
     });
     return (jsx_runtime_1.jsx("div", { style: { height: expandedHeight }, children: rows.map((row, index) => (jsx_runtime_1.jsx(TimelineExpandedKeyframeRow_1.TimelineExpandedKeyframeRow, { height: row.height, keyframes: row.keyframes, canEditEasing: row.canEditEasing, nodePathInfo: row.nodePathInfo, showSeparator: index > 0 }, row.rowKey))) }));
 };
 const areTimelineExpandedTrackKeyframesPropsEqual = (first, second) => {
     var _a, _b, _c, _d;
     return (first.keyframeDisplayOffset === second.keyframeDisplayOffset &&
+        first.keyframePlaybackRate === second.keyframePlaybackRate &&
         ((_a = first.sequence.controls) === null || _a === void 0 ? void 0 : _a.schema) === ((_b = second.sequence.controls) === null || _b === void 0 ? void 0 : _b.schema) &&
         ((_c = first.sequence.controls) === null || _c === void 0 ? void 0 : _c.runtimeValues) ===
             ((_d = second.sequence.controls) === null || _d === void 0 ? void 0 : _d.runtimeValues) &&

package/dist/components/Timeline/TimelineFieldLabel.js

@@ -12,6 +12,7 @@ const fieldNameBase = {
     lineHeight: `${timeline_field_row_layout_1.TIMELINE_STACKED_FIELD_HEADER_HEIGHT}px`,
     color: colors_1.WHITE_ALPHA_80,
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis',

package/dist/components/Timeline/TimelineFontFamilyField.js

@@ -22,9 +22,9 @@ const ROW_HEIGHT = 30;
 const LIST_HEIGHT = 280;
 const OVERSCAN = 10;
 const POPOVER_WIDTH = 280;
-const CLEAR_HOVER = 'rgba(255, 255, 255, 0.06)';
-const INPUT_BORDER_COLOR_UNHOVERED = 'rgba(0, 0, 0, 0.6)';
-const INPUT_BORDER_COLOR_HOVERED = 'rgba(255, 255, 255, 0.05)';
+const CLEAR_HOVER = colors_1.WHITE_ALPHA_06;
+const INPUT_BORDER_COLOR_UNHOVERED = colors_1.BLACK_ALPHA_60;
+const INPUT_BORDER_COLOR_HOVERED = colors_1.WHITE_ALPHA_05;
 const googleFonts = google_fonts_list_1.GOOGLE_FONTS_LIST.map((font) => ({
     id: `google-${font.importName}`,
     fontFamily: font.fontFamily,
@@ -67,7 +67,7 @@ const triggerStyle = {
     borderWidth: 1,
     borderStyle: 'solid',
     maxWidth: 140,
-    color: 'white',
+    color: colors_1.WHITE,
     userSelect: 'none',
     WebkitUserSelect: 'none',
 };
@@ -83,17 +83,17 @@ const popover = {
     position: 'fixed',
     width: POPOVER_WIDTH,
     backgroundColor: colors_1.BACKGROUND,
-    color: 'white',
+    color: colors_1.WHITE,
     userSelect: 'none',
     WebkitUserSelect: 'none',
-    border: '1px solid rgba(255, 255, 255, 0.08)',
+    border: `1px solid ${colors_1.WHITE_ALPHA_08}`,
 };
 const searchInput = {
     boxSizing: 'border-box',
     width: '100%',
     backgroundColor: colors_1.INPUT_BACKGROUND,
-    border: '1px solid rgba(255, 255, 255, 0.12)',
-    color: 'white',
+    border: colors_1.BORDER_WHITE_ALPHA_12,
+    color: colors_1.WHITE,
     fontSize: 12,
     outline: 'none',
     padding: '6px 8px',
@@ -113,8 +113,8 @@ const optionButton = {
     height: ROW_HEIGHT,
     width: '100%',
     border: 'none',
-    background: 'transparent',
-    color: 'white',
+    background: colors_1.TRANSPARENT,
+    color: colors_1.WHITE,
     display: 'flex',
     alignItems: 'center',
     padding: '0 8px',
@@ -136,7 +136,7 @@ const optionSource = {
 };
 const errorText = {
     padding: '6px 8px',
-    color: '#ff8a8a',
+    color: colors_1.FONT_FAMILY_ERROR_COLOR,
     fontSize: 10,
 };
 const portalStyle = ({ size, }) => {
@@ -520,7 +520,7 @@ const TimelineFontFamilyField = ({ field, propStatus, effectiveValue, onSave, on
                                                             ? CLEAR_HOVER
                                                             : isSelected
                                                                 ? colors_1.SELECTED_BACKGROUND
-                                                                : 'transparent',
+                                                                : colors_1.TRANSPARENT,
                                                     }, onPointerEnter: () => setHighlightedIndex(actualIndex), onPointerDown: (event) => {
                                                         event.preventDefault();
                                                         event.stopPropagation();

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

@@ -21,6 +21,7 @@ export declare const TimelineKeyframeControls: React.FC<{
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly fileName: string;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
     readonly defaultValue: unknown;
     readonly dragOverrideValue: DragOverrideValue | undefined;
     readonly schema: InteractivitySchema;