@remotion/studio 4.0.503 → 4.0.504

package/dist/components/TimeValue.js

@@ -11,6 +11,7 @@ const use_keybinding_1 = require("../helpers/use-keybinding");
 const render_frame_1 = require("../state/render-frame");
 const layout_1 = require("./layout");
 const InputDragger_1 = require("./NewComposition/InputDragger");
+const TimelineZoomControls_1 = require("./Timeline/TimelineZoomControls");
 const text = {
     color: colors_1.WHITE,
     display: 'flex',
@@ -20,19 +21,32 @@ const text = {
     lineHeight: 1,
     width: '100%',
 };
-const time = {
+const currentTimeTypography = {
+    color: colors_1.WHITE,
     display: 'inline-block',
-    fontSize: 16,
+    fontSize: 14,
+    fontVariantNumeric: 'tabular-nums',
+    fontWeight: 400,
     lineHeight: 1,
     fontFamily: 'monospace',
 };
-const frameStyle = {
+const currentTimeInputStyle = {
+    ...currentTimeTypography,
+    padding: '4px 6px 4px 0',
+};
+const currentTimeButtonStyle = {
+    paddingLeft: 0,
+    transform: 'translateY(-1px)',
+};
+const currentTimeSubtitle = {
     color: colors_1.LIGHT_TEXT,
-    fontWeight: 500,
-    lineHeight: 1,
-    fontSize: 16,
+    display: 'block',
     fontFamily: 'monospace',
-    paddingRight: 10,
+    fontSize: 10,
+    fontWeight: 400,
+    lineHeight: 1,
+    marginTop: -2,
+    textAlign: 'left',
 };
 const TimeValue = () => {
     const frame = (0, remotion_1.useCurrentFrame)();
@@ -47,6 +61,10 @@ const TimeValue = () => {
     const onValueChange = (0, react_1.useCallback)((val) => {
         seek(val);
     }, [seek]);
+    const formatter = (0, react_1.useCallback)((value) => {
+        return config ? (0, render_frame_1.renderFrame)(Number(value), config.fps) : String(value);
+    }, [config]);
+    const formatterSubtitle = (0, react_1.useCallback)((value) => String(value), []);
     (0, react_1.useImperativeHandle)(remotion_1.Internals.timeValueRef, () => ({
         goToFrame: () => {
             var _a;
@@ -81,7 +99,7 @@ const TimeValue = () => {
         return null;
     }
     return (jsx_runtime_1.jsxs("div", { style: text, children: [
-            jsx_runtime_1.jsx("div", { style: time, children: (0, render_frame_1.renderFrame)(frame, config.fps) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { ref: ref, value: frame, onTextChange: onTextChange, onValueChange: onValueChange, rightAlign: true, status: "ok", style: frameStyle })
+            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { ref: ref, "aria-label": String(frame), value: frame, onTextChange: onTextChange, onValueChange: onValueChange, formatter: formatter, formatterStyle: currentTimeTypography, formatterSubtitle: formatterSubtitle, formatterSubtitleStyle: currentTimeSubtitle, buttonStyle: currentTimeButtonStyle, rightAlign: false, status: "ok", style: currentTimeInputStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(TimelineZoomControls_1.TimelineZoomControls, { sliderMaxWidth: 80 }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
         ] }));
 };
 exports.TimeValue = TimeValue;

package/dist/components/Timeline/Timeline.js

@@ -268,7 +268,7 @@ const TimelineInner = () => {
                 }
                 return (jsx_runtime_1.jsx(SubscribeToNodePaths_1.SubscribeToNodePaths, { overrideId: sequence.controls.overrideId, componentIdentity: sequence.controls.componentIdentity, schema: sequence.controls.schema, getStack: sequence.getStack, effects: sequence.effects }, sequence.id));
             }), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}) : null, jsx_runtime_1.jsx(TimelineKeyframeTracksContext_1.TimelineKeyframeTracksProvider, { tracks: filtered, children: jsx_runtime_1.jsxs(TimelineSelection_1.TimelineSelectableItemsProvider, { timeline: shown, children: [(0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectAllKeybindings, { timeline: shown })) : null, jsx_runtime_1.jsx(TimelineHeightContainer_1.TimelineHeightContainer, { shown: shown, hasBeenCut: hasBeenCut, children: isStill ? (jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown })) : (jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
-                                    jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, maxFlexerSize: null, minFlexerSize: MIN_TIMELINE_LABELS_WIDTH, maxAntiFlexerSize: null, children: [
+                                    jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, maxFlexerSize: null, minFlexerSize: MIN_TIMELINE_LABELS_WIDTH, maxAntiFlexerSize: null, minAntiFlexerSize: null, children: [
                                             jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
                                                         jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsx(TimelineInOutDragHandler_1.TimelineInOutDragHandler, {})) : null, jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
                                                     ] }) })

package/dist/components/Timeline/TimelineClipboardKeybindings.js

@@ -18,6 +18,7 @@ const call_update_keyframe_settings_1 = require("./call-update-keyframe-settings
 const delete_selected_timeline_item_1 = require("./delete-selected-timeline-item");
 const effects_clipboard_1 = require("./effects-clipboard");
 const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
+const imperative_state_1 = require("./imperative-state");
 const keyframe_clipboard_1 = require("./keyframe-clipboard");
 const save_effect_prop_1 = require("./save-effect-prop");
 const TimelineSelection_1 = require("./TimelineSelection");
@@ -379,9 +380,6 @@ const getPasteEffectPropTarget = ({ selectedItems, payload, propStatuses, sequen
 exports.getPasteEffectPropTarget = getPasteEffectPropTarget;
 const TimelineClipboardKeybindings = () => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    const timelinePositionRef = (0, react_1.useRef)(timelinePosition);
-    timelinePositionRef.current = timelinePosition;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { canSelect } = (0, TimelineSelection_1.useTimelineSelection)();
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
@@ -556,7 +554,7 @@ const TimelineClipboardKeybindings = () => {
                         clientId,
                         confirm,
                         propStatuses,
-                        timelinePosition: timelinePositionRef.current,
+                        timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
                     });
                     return deletePromise === null || deletePromise === void 0 ? void 0 : deletePromise.then((deleted) => {
                         if (!deleted) {
@@ -612,7 +610,7 @@ const TimelineClipboardKeybindings = () => {
                     const keyframeTarget = (0, keyframe_clipboard_1.getPasteKeyframeTarget)({
                         selectedItems,
                         payload: keyframeResult.data,
-                        timelinePosition: timelinePositionRef.current,
+                        timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
                         sequences,
                         overrideIdsToNodePaths: overrideIdToNodePathMappings,
                         propStatuses,
@@ -870,7 +868,6 @@ const TimelineClipboardKeybindings = () => {
         previewServerState,
         sequencesRef,
         setPropStatuses,
-        timelinePositionRef,
     ]);
     return null;
 };

package/dist/components/Timeline/TimelineDeleteKeybindings.js

@@ -10,6 +10,7 @@ const editor_guides_1 = require("../../state/editor-guides");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const delete_selected_timeline_item_1 = require("./delete-selected-timeline-item");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
+const imperative_state_1 = require("./imperative-state");
 const reset_selected_timeline_props_1 = require("./reset-selected-timeline-props");
 const split_selected_timeline_item_1 = require("./split-selected-timeline-item");
 const TimelineSelection_1 = require("./TimelineSelection");
@@ -25,15 +26,13 @@ const TimelineDeleteKeybindings = () => {
     const { canSelect } = (0, TimelineSelection_1.useTimelineSelection)();
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    const timelinePositionRef = (0, react_1.useRef)(timelinePosition);
-    timelinePositionRef.current = timelinePosition;
     (0, react_1.useEffect)(() => {
         if (!canSelect || previewServerState.type !== 'connected') {
             return;
         }
         const { clientId } = previewServerState;
         const handleDelete = () => {
+            const timelinePosition = (0, imperative_state_1.getCurrentFrame)();
             const { selectedItems, clearSelection, selectItems } = currentSelection.current;
             const sequences = sequencesRef.current;
             const propStatuses = propStatusesRef.current;
@@ -58,7 +57,7 @@ const TimelineDeleteKeybindings = () => {
                 clientId,
                 confirm,
                 propStatuses,
-                timelinePosition: timelinePositionRef.current,
+                timelinePosition,
             });
             if (deletePromise !== null) {
                 deletePromise
@@ -69,7 +68,7 @@ const TimelineDeleteKeybindings = () => {
                             sequences,
                             overrideIdsToNodePaths: overrideIdToNodePathMappings,
                             propStatuses,
-                            timelinePosition: timelinePositionRef.current,
+                            timelinePosition,
                         });
                         if (nextSelection.length === 0) {
                             clearSelection();
@@ -169,7 +168,7 @@ const TimelineDeleteKeybindings = () => {
                     sequences: sequencesRef.current,
                     overrideIdsToNodePaths: overrideIdToNodePathMappings,
                     propStatuses: propStatusesRef.current,
-                    splitFrame: timelinePositionRef.current,
+                    splitFrame: (0, imperative_state_1.getCurrentFrame)(),
                 });
                 if (splitPromise === null) {
                     return;
@@ -198,7 +197,6 @@ const TimelineDeleteKeybindings = () => {
         sequencesRef,
         setGuidesList,
         setPropStatuses,
-        timelinePositionRef,
     ]);
     return null;
 };

package/dist/components/Timeline/TimelineExpandedKeyframeRow.js

@@ -43,6 +43,7 @@ const TimelineKeyframeEasingLine_1 = require("./TimelineKeyframeEasingLine");
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const rowClipper = {
+    boxSizing: 'border-box',
     marginLeft: -timeline_layout_1.TIMELINE_PADDING,
     marginRight: -timeline_layout_1.TIMELINE_PADDING,
     overflow: 'hidden',
@@ -61,7 +62,7 @@ const TimelineExpandedKeyframeRowUnmemoized = ({ height, keyframes, canEditEasin
     const easingSegments = canEditEasing
         ? (0, get_timeline_easing_segments_1.getTimelineEasingSegments)(keyframes)
         : [];
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showSeparator ? jsx_runtime_1.jsx("div", { style: rowSeparator }) : null, jsx_runtime_1.jsx("div", { style: { ...rowClipper, height }, children: jsx_runtime_1.jsxs("div", { style: { ...row, height }, children: [rowHighlightBackground && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth, rowHighlightBackground) })) : null, easingSegments.map((segment) => (jsx_runtime_1.jsx(TimelineKeyframeEasingLine_1.TimelineKeyframeEasingLine, { fromFrame: segment.fromFrame, toFrame: segment.toFrame, rowHeight: height, nodePathInfo: nodePathInfo, segmentIndex: segment.segmentIndex }, `${segment.segmentIndex}-${segment.fromFrame}-${segment.toFrame}`))), keyframes.map((keyframe) => (jsx_runtime_1.jsx(TimelineKeyframeDiamond_1.TimelineKeyframeDiamond, { frame: keyframe.frame, rowHeight: height, nodePathInfo: nodePathInfo }, keyframe.frame)))] }) })
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showSeparator ? jsx_runtime_1.jsx("div", { style: rowSeparator }) : null, jsx_runtime_1.jsx("div", { style: { ...rowClipper, height, width: timelineWidth !== null && timelineWidth !== void 0 ? timelineWidth : undefined }, children: jsx_runtime_1.jsxs("div", { style: { ...row, height }, children: [rowHighlightBackground && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth, rowHighlightBackground) })) : null, easingSegments.map((segment) => (jsx_runtime_1.jsx(TimelineKeyframeEasingLine_1.TimelineKeyframeEasingLine, { fromFrame: segment.fromFrame, toFrame: segment.toFrame, rowHeight: height, nodePathInfo: nodePathInfo, segmentIndex: segment.segmentIndex }, `${segment.segmentIndex}-${segment.fromFrame}-${segment.toFrame}`))), keyframes.map((keyframe) => (jsx_runtime_1.jsx(TimelineKeyframeDiamond_1.TimelineKeyframeDiamond, { frame: keyframe.frame, rowHeight: height, nodePathInfo: nodePathInfo }, keyframe.frame)))] }) })
         ] }));
 };
 exports.TimelineExpandedKeyframeRow = react_1.default.memo(TimelineExpandedKeyframeRowUnmemoized);

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const getTimelineKeyframeEasingLineStyle: (selected: boolean) => React.CSSProperties;
-export declare const TimelineKeyframeEasingLineVisual: React.FC<{
+export declare const TimelineKeyframeEasingLineVisual: React.NamedExoticComponent<{
     readonly selected: boolean;
 }>;
 export declare const TimelineKeyframeEasingLine: React.NamedExoticComponent<{

package/dist/components/Timeline/TimelineKeyframeEasingLine.js

@@ -72,11 +72,11 @@ const getTimelineKeyframeEasingLineStyle = (selected) => ({
     outline: selected ? `1px solid ${colors_1.BLUE}` : undefined,
 });
 exports.getTimelineKeyframeEasingLineStyle = getTimelineKeyframeEasingLineStyle;
-const TimelineKeyframeEasingLineVisual = ({ selected }) => {
+const TimelineKeyframeEasingLineVisualUnmemoized = ({ selected }) => {
     const lineStyle = (0, react_1.useMemo)(() => (0, exports.getTimelineKeyframeEasingLineStyle)(selected), [selected]);
     return jsx_runtime_1.jsx("div", { style: lineStyle });
 };
-exports.TimelineKeyframeEasingLineVisual = TimelineKeyframeEasingLineVisual;
+exports.TimelineKeyframeEasingLineVisual = react_1.default.memo(TimelineKeyframeEasingLineVisualUnmemoized);
 const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, nodePathInfo, segmentIndex }) => {
     const buttonRef = (0, react_1.useRef)(null);
     const videoConfig = (0, remotion_1.useVideoConfig)();

package/dist/components/Timeline/TimelineSelection.js

@@ -17,6 +17,7 @@ const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const options_sidebar_tabs_1 = require("../options-sidebar-tabs");
 const get_node_keyframes_1 = require("./get-node-keyframes");
 const get_timeline_easing_segments_1 = require("./get-timeline-easing-segments");
+const imperative_state_1 = require("./imperative-state");
 const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
 const timeline_refs_1 = require("./timeline-refs");
 const TimelineClipboardKeybindings_1 = require("./TimelineClipboardKeybindings");
@@ -571,7 +572,6 @@ const TimelineSelectableItemsProvider = ({ children, timeline }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { selectedItems } = (0, exports.useTimelineSelection)();
     const selectableItems = (0, react_1.useMemo)(() => (0, exports.getSelectableTimelineItems)({
         getDragOverrides,
@@ -580,7 +580,7 @@ const TimelineSelectableItemsProvider = ({ children, timeline }) => {
         propStatuses,
         selectedItems,
         timeline,
-        timelinePosition,
+        timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
     }), [
         getDragOverrides,
         getEffectDragOverrides,
@@ -588,7 +588,6 @@ const TimelineSelectableItemsProvider = ({ children, timeline }) => {
         propStatuses,
         selectedItems,
         timeline,
-        timelinePosition,
     ]);
     return (jsx_runtime_1.jsx(exports.TimelineSelectionOrderProvider, { items: selectableItems, children: children }));
 };

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

@@ -1,2 +1,4 @@
 import React from 'react';
-export declare const TimelineZoomControls: React.FC;
+export declare const TimelineZoomControls: React.FC<{
+    readonly sliderMaxWidth?: number;
+}>;

package/dist/components/Timeline/TimelineZoomControls.js

@@ -22,34 +22,46 @@ const buttonStyle = {
     fontSize: 24,
 };
 const iconStyle = {
-    color: colors_1.WHITE,
     width: 14,
 };
-const TimelineZoomControls = () => {
+const TimelineZoomSlider = ({ maxWidth }) => {
     var _a;
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { setZoom, zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
     const { tabIndex } = (0, z_index_1.useZIndex)();
-    const onMinusClicked = (0, react_1.useCallback)(() => {
+    const isStill = (0, is_current_selected_still_1.useIsStill)();
+    const onChange = (0, react_1.useCallback)((e) => {
         if (canvasContent === null || canvasContent.type !== 'composition') {
             return;
         }
-        setZoom(canvasContent.compositionId, (z) => Math.max(timeline_zoom_1.TIMELINE_MIN_ZOOM, z - 0.2), { anchorFrame: null, anchorContentX: null });
+        setZoom(canvasContent.compositionId, () => Number(e.target.value), {
+            anchorFrame: null,
+            anchorContentX: null,
+        });
     }, [canvasContent, setZoom]);
-    const onPlusClicked = (0, react_1.useCallback)(() => {
+    if (isStill ||
+        canvasContent === null ||
+        canvasContent.type !== 'composition') {
+        return null;
+    }
+    const zoom = (_a = zoomMap[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM;
+    return (jsx_runtime_1.jsx("input", { style: maxWidth === undefined ? undefined : { maxWidth }, title: `Timeline zoom (${zoom}x)`, alt: `Timeline zoom (${zoom}x)`, type: "range", min: timeline_zoom_1.TIMELINE_MIN_ZOOM, step: 0.1, value: zoom, max: timeline_zoom_1.TIMELINE_MAX_ZOOM, onChange: onChange, className: "__remotion-timeline-slider", tabIndex: tabIndex }));
+};
+const TimelineZoomControls = ({ sliderMaxWidth }) => {
+    var _a;
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { setZoom, zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
+    const onMinusClicked = (0, react_1.useCallback)(() => {
         if (canvasContent === null || canvasContent.type !== 'composition') {
             return;
         }
-        setZoom(canvasContent.compositionId, (z) => Math.min(timeline_zoom_1.TIMELINE_MAX_ZOOM, z + 0.2), { anchorFrame: null, anchorContentX: null });
+        setZoom(canvasContent.compositionId, (z) => Math.max(timeline_zoom_1.TIMELINE_MIN_ZOOM, z - 0.2), { anchorFrame: null, anchorContentX: null });
     }, [canvasContent, setZoom]);
-    const onChange = (0, react_1.useCallback)((e) => {
+    const onPlusClicked = (0, react_1.useCallback)(() => {
         if (canvasContent === null || canvasContent.type !== 'composition') {
             return;
         }
-        setZoom(canvasContent.compositionId, () => Number(e.target.value), {
-            anchorFrame: null,
-            anchorContentX: null,
-        });
+        setZoom(canvasContent.compositionId, (z) => Math.min(timeline_zoom_1.TIMELINE_MAX_ZOOM, z + 0.2), { anchorFrame: null, anchorContentX: null });
     }, [canvasContent, setZoom]);
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     if (isStill ||
@@ -59,7 +71,7 @@ const TimelineZoomControls = () => {
     }
     const zoom = (_a = zoomMap[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM;
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, title: "Zoom out timeline", role: 'ControlButton', type: "button", disabled: timeline_zoom_1.TIMELINE_MIN_ZOOM === zoom, children: jsx_runtime_1.jsx(minus_1.Minus, { style: iconStyle }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx("input", { title: `Timeline zoom (${zoom}x)`, alt: `Timeline zoom (${zoom}x)`, type: 'range', min: timeline_zoom_1.TIMELINE_MIN_ZOOM, step: 0.1, value: zoom, max: timeline_zoom_1.TIMELINE_MAX_ZOOM, onChange: onChange, className: "__remotion-timeline-slider", tabIndex: tabIndex }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onPlusClicked, style: buttonStyle, title: "Zoom in timeline", role: 'button', type: "button", disabled: timeline_zoom_1.TIMELINE_MAX_ZOOM === zoom, children: jsx_runtime_1.jsx(plus_1.Plus, { color: colors_1.CURRENT_COLOR_LOWERCASE, style: iconStyle }) })
+            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, title: "Zoom out timeline", role: 'ControlButton', type: "button", disabled: timeline_zoom_1.TIMELINE_MIN_ZOOM === zoom, children: (color) => jsx_runtime_1.jsx(minus_1.Minus, { style: iconStyle, color: color }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineZoomSlider, { maxWidth: sliderMaxWidth }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onPlusClicked, style: buttonStyle, title: "Zoom in timeline", role: 'button', type: "button", disabled: timeline_zoom_1.TIMELINE_MAX_ZOOM === zoom, children: (color) => jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: iconStyle }) })
         ] }));
 };
 exports.TimelineZoomControls = TimelineZoomControls;

package/dist/components/Timeline/use-expanded-track-keyframe-rows.js

@@ -8,6 +8,7 @@ const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const get_node_keyframes_1 = require("./get-node-keyframes");
+const imperative_state_1 = require("./imperative-state");
 const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
 const TimelineSelection_1 = require("./TimelineSelection");
 const getNodeCanEditEasing = ({ node, nodePath, propStatuses, }) => {
@@ -36,7 +37,6 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({
         sequence,
         nodePathInfo,
@@ -89,7 +89,7 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
             keyframeDisplayOffset,
             getDragOverrides,
             getEffectDragOverrides,
-            timelinePosition,
+            timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
         }),
     ])), [
         flat,
@@ -98,7 +98,6 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
         keyframeDisplayOffset,
         nodePathInfo.sequenceSubscriptionKey,
         propStatuses,
-        timelinePosition,
     ]);
     const rows = (0, react_1.useMemo)(() => flat.map(({ node }) => {
         var _a;

package/dist/components/Timeline/use-timeline-asset-drop.js

@@ -11,6 +11,7 @@ const effect_drag_and_drop_1 = require("../effect-drag-and-drop");
 const handle_drop_1 = require("../handle-drop");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const SvgImportDialog_1 = require("../SvgImportDialog");
+const imperative_state_1 = require("./imperative-state");
 const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const use_resolved_stack_1 = require("./use-resolved-stack");
@@ -28,7 +29,6 @@ const useTimelineAssetDrop = () => {
     var _a, _b;
     const { canvasContent, compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const chooseSvgImportMode = (0, SvgImportDialog_1.useSvgImportDialog)();
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const [isAddingAsset, setIsAddingAsset] = (0, react_1.useState)(false);
@@ -65,8 +65,8 @@ const useTimelineAssetDrop = () => {
                 timelineLeft: scrollable.getBoundingClientRect().left,
                 timelineWidth: scrollable.scrollWidth,
             })
-            : timelinePosition;
-    }, [timelinePosition, videoConfig]);
+            : (0, imperative_state_1.getCurrentFrame)();
+    }, [videoConfig]);
     const onAssetDragOver = (0, react_1.useCallback)((event) => {
         const timeline = timeline_refs_1.timelineVerticalScroll.current;
         const { dataTransfer } = event;

package/dist/components/TimelineInOutToggle.js

@@ -19,8 +19,8 @@ const getTooltipText = (pointType, key) => [
     .filter(no_react_1.NoReactInternals.truthy)
     .join(' ');
 const style = {
-    width: 16,
-    height: 16,
+    width: 17,
+    height: 17,
 };
 exports.inOutHandles = (0, react_1.createRef)();
 exports.defaultInOutValue = { inFrame: null, outFrame: null };
@@ -239,7 +239,7 @@ const TimelineInOutPointToggle = () => {
         };
     }, [confId, onInMark, onInOutClear, onOutMark]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('In', 'I'), "aria-label": getTooltipText('In', 'I'), onClick: onInMark, onContextMenu: clearInMark, disabled: !videoConfig || isFirstFrame, children: jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? colors_1.WHITE : colors_1.BLUE, style: style }) }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('Out', 'O'), "aria-label": getTooltipText('Out', 'O'), onClick: onOutMark, onContextMenu: clearOutMark, disabled: !videoConfig || isLastFrame, children: jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? colors_1.WHITE : colors_1.BLUE, style: style }) })
+            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('In', 'I'), "aria-label": getTooltipText('In', 'I'), onClick: onInMark, onContextMenu: clearInMark, disabled: !videoConfig || isFirstFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? color : colors_1.BLUE, style: style })) }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('Out', 'O'), "aria-label": getTooltipText('Out', 'O'), onClick: onOutMark, onContextMenu: clearOutMark, disabled: !videoConfig || isLastFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? color : colors_1.BLUE, style: style })) })
         ] }));
 };
 exports.TimelineInOutPointToggle = TimelineInOutPointToggle;

package/dist/components/TopPanel.js

@@ -69,6 +69,7 @@ const row = {
     minHeight: 0,
 };
 const MAX_SIDEBAR_WIDTH = 350;
+const MIN_SIDEBAR_WIDTH = 250;
 const useResponsiveSidebarStatus = () => {
     const { sidebarCollapsedStateLeft } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const responsiveLeftStatus = (0, use_breakpoint_1.useBreakpoint)(1200) ? 'collapsed' : 'expanded';
@@ -114,8 +115,8 @@ const TopPanelInner = ({ readOnlyStudio, onMounted, drawRef, bufferStateDelayInM
     return (jsx_runtime_1.jsx(ObserveDefaultPropsContext_1.ObserveDefaultProps, { compositionId: (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition'
             ? canvasContent.compositionId
             : null, readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsxs("div", { style: container, children: [
-                jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, maxFlexerSize: MAX_SIDEBAR_WIDTH, minFlexerSize: null, maxAntiFlexerSize: null, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseLeft, side: "left", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) }))) : null, actualStateLeft === 'expanded' && !isMobileLayout ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, maxFlexerSize: null, minFlexerSize: null, maxAntiFlexerSize: MAX_SIDEBAR_WIDTH, id: "canvas-to-right-sidebar", orientation: "vertical", children: [
-                                        jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx("div", { ref: drawRef, style: canvasContainerStyle, children: jsx_runtime_1.jsx(CanvasIfSizeIsAvailable_1.CanvasIfSizeIsAvailable, {}) }) }), actualStateRight === 'expanded' && !isMobileLayout ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseRight, side: "right", children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) }))) : null] }) })
+                jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, maxFlexerSize: MAX_SIDEBAR_WIDTH, minFlexerSize: null, maxAntiFlexerSize: null, minAntiFlexerSize: null, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseLeft, children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) }))) : null, actualStateLeft === 'expanded' && !isMobileLayout ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, maxFlexerSize: null, minFlexerSize: null, maxAntiFlexerSize: MAX_SIDEBAR_WIDTH, minAntiFlexerSize: MIN_SIDEBAR_WIDTH, id: "canvas-to-right-sidebar", orientation: "vertical", children: [
+                                        jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx("div", { ref: drawRef, style: canvasContainerStyle, children: jsx_runtime_1.jsx(CanvasIfSizeIsAvailable_1.CanvasIfSizeIsAvailable, {}) }) }), actualStateRight === 'expanded' ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) })) : null] }) })
                         ] }) }), jsx_runtime_1.jsx(PreviewToolbar_1.PreviewToolbar, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CurrentCompositionSideEffects_1.TitleUpdater, {})
             ] }) }));
 };

package/dist/components/UndoRedoButtons.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const client_id_1 = require("../helpers/client-id");
+const colors_1 = require("../helpers/colors");
 const is_mac_1 = require("../helpers/is-mac");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const redo_1 = require("../icons/redo");
@@ -13,8 +14,8 @@ const undo_1 = require("../icons/undo");
 const call_api_1 = require("./call-api");
 const InlineAction_1 = require("./InlineAction");
 const iconStyle = {
-    width: 16,
-    height: 16,
+    width: 14,
+    height: 14,
 };
 const UndoRedoButtons = () => {
     const [undoFile, setUndoFile] = (0, react_1.useState)(null);
@@ -130,10 +131,10 @@ const UndoRedoButtons = () => {
             ? `Redo (${ShortcutHint_1.cmdOrCtrlCharacter}+Shift+Z)`
             : `Redo (${ShortcutHint_1.cmdOrCtrlCharacter}+Y)`;
     const renderUndo = (0, react_1.useCallback)((color) => {
-        return jsx_runtime_1.jsx(undo_1.UndoIcon, { style: { ...iconStyle, color } });
+        return jsx_runtime_1.jsx(undo_1.UndoIcon, { style: iconStyle, color: color });
     }, []);
     const renderRedo = (0, react_1.useCallback)((color) => {
-        return jsx_runtime_1.jsx(redo_1.RedoIcon, { style: { ...iconStyle, color } });
+        return jsx_runtime_1.jsx(redo_1.RedoIcon, { style: iconStyle, color: color });
     }, []);
     const canUndo = undoFile !== null;
     const canRedo = redoFile !== null;
@@ -141,7 +142,7 @@ const UndoRedoButtons = () => {
         return null;
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onUndo, renderAction: renderUndo, title: undoTooltip, disabled: !canUndo }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onRedo, renderAction: renderRedo, title: redoTooltip, disabled: !canRedo })
+            jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onUndo, renderAction: renderUndo, title: undoTooltip, disabled: !canUndo, unhoveredColor: colors_1.WHITE_ALPHA_80 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onRedo, renderAction: renderRedo, title: redoTooltip, disabled: !canRedo, unhoveredColor: colors_1.WHITE_ALPHA_80 })
         ] }));
 };
 exports.UndoRedoButtons = UndoRedoButtons;

package/dist/components/UpdateCheck.js

@@ -7,6 +7,7 @@ const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const modals_1 = require("../state/modals");
 const z_index_1 = require("../state/z-index");
+const InlineAction_1 = require("./InlineAction");
 const actions_1 = require("./RenderQueue/actions");
 const buttonStyle = {
     appearance: 'none',
@@ -19,6 +20,11 @@ const buttonStyle = {
     justifyContent: 'center',
     marginLeft: 8,
 };
+const updateIconContainer = {
+    alignItems: 'center',
+    display: 'flex',
+    flexShrink: 0,
+};
 const UpdateCheck = () => {
     const [info, setInfo] = (0, react_1.useState)(null);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
@@ -92,16 +98,23 @@ const UpdateCheck = () => {
     const onPointerLeave = (0, react_1.useCallback)(() => {
         setHovered(false);
     }, []);
+    const renderUpdateIcon = (0, react_1.useCallback)((color) => {
+        return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
+                height: 16,
+                width: 16,
+                color,
+                flexShrink: 0,
+            }, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM135.1 217.4c-4.5 4.2-7.1 10.1-7.1 16.3c0 12.3 10 22.3 22.3 22.3H208v96c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V256h57.7c12.3 0 22.3-10 22.3-22.3c0-6.2-2.6-12.1-7.1-16.3L269.8 117.5c-3.8-3.5-8.7-5.5-13.8-5.5s-10.1 2-13.8 5.5L135.1 217.4z" }) }));
+    }, []);
     if (!info) {
         return null;
     }
     if (!info.updateAvailable && !info.skillsUpdateAvailable) {
         return null;
     }
-    return (jsx_runtime_1.jsx("button", { tabIndex: tabIndex, style: dynButtonStyle, onClick: openModal, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, type: "button", title: hasBugfixesAvailable ? 'Bugfixes available' : 'Update available', children: hasBugfixesAvailable ? ('Bugfixes available') : (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
-                height: 16,
-                width: 16,
-                color: 'inherit',
-            }, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR_LOWERCASE, d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM135.1 217.4c-4.5 4.2-7.1 10.1-7.1 16.3c0 12.3 10 22.3 22.3 22.3H208v96c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V256h57.7c12.3 0 22.3-10 22.3-22.3c0-6.2-2.6-12.1-7.1-16.3L269.8 117.5c-3.8-3.5-8.7-5.5-13.8-5.5s-10.1 2-13.8 5.5L135.1 217.4z" }) })) }));
+    if (!hasBugfixesAvailable) {
+        return (jsx_runtime_1.jsx("div", { style: updateIconContainer, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openModal, renderAction: renderUpdateIcon, unhoveredColor: colors_1.WHITE_ALPHA_80, title: "Update available" }) }));
+    }
+    return (jsx_runtime_1.jsx("button", { tabIndex: tabIndex, style: dynButtonStyle, onClick: openModal, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, type: "button", title: "Bugfixes available", children: "Bugfixes available" }));
 };
 exports.UpdateCheck = UpdateCheck;

package/dist/components/UpdateModal/UpdateModal.js

@@ -5,15 +5,18 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const copy_text_1 = require("../../helpers/copy-text");
-const CopyButton_1 = require("../CopyButton");
+const clipboard_1 = require("../../icons/clipboard");
+const InlineAction_1 = require("../InlineAction");
 const KnownBugs_1 = require("../KnownBugs");
-const layout_1 = require("../layout");
 const ModalHeader_1 = require("../ModalHeader");
 const DismissableModal_1 = require("../NewComposition/DismissableModal");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const container = {
-    padding: 20,
-    paddingTop: 0,
+    padding: '0 16px 8px',
+};
+const panelStyle = {
+    borderRadius: 6,
+    overflow: 'hidden',
 };
 const text = {
     color: colors_1.LIGHT_TEXT,
@@ -26,15 +29,32 @@ const title = {
     paddingBottom: 8,
     ...text,
 };
-const code = {
+const commandField = {
+    alignItems: 'center',
     background: colors_1.SELECTED_BACKGROUND,
-    color: colors_1.LIGHT_TEXT,
+    borderRadius: 6,
+    boxSizing: 'border-box',
+    display: 'flex',
+    marginBottom: 10,
+    marginTop: 10,
+    padding: '8px 8px 8px 10px',
+    width: '100%',
+};
+const code = {
+    color: colors_1.WHITE,
+    flex: 1,
     fontFamily: 'monospace',
-    padding: '12px 10px',
     fontSize: 14,
     lineHeight: 1.5,
-    marginTop: 10,
-    marginBottom: 10,
+    margin: 0,
+    minWidth: 0,
+    overflowX: 'auto',
+    whiteSpace: 'pre',
+};
+const copyIcon = {
+    flexShrink: 0,
+    height: 12,
+    width: 12,
 };
 const link = {
     ...text,
@@ -68,11 +88,14 @@ const UpdateModal = ({ info, knownBugs }) => {
             (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
         });
     }, [updateAction]);
-    return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { children: [
+    const renderCopyAction = (0, react_1.useCallback)((color) => {
+        return jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { color: color, style: copyIcon });
+    }, []);
+    return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { panelStyle: panelStyle, children: [
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Update available" }), jsx_runtime_1.jsxs("div", { style: container, children: [hasKnownBugs && info.updateAvailable ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                             jsx_runtime_1.jsxs("div", { style: title, children: ["The currently installed version ", info.currentVersion, " has the following known bugs:"] }), jsx_runtime_1.jsx(KnownBugs_1.KnownBugs, { bugs: knownBugs }), jsx_runtime_1.jsx("div", { style: { height: '20px' } }), jsx_runtime_1.jsxs("div", { style: text, children: ["To upgrade, run the following ", updateActionType, ":"] })
-                        ] })) : info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: title, children: ["A new update for Remotion is available! Run the following", ' ', updateActionType, ":"] })) : (jsx_runtime_1.jsxs("div", { style: title, children: ["Your Remotion Agent Skills are out of date. Run the following", ' ', updateActionType, ":"] })), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                            jsx_runtime_1.jsx(layout_1.Flex, { children: jsx_runtime_1.jsx("pre", { onClick: onClick, style: code, children: updateAction }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx(CopyButton_1.CopyButton, { textToCopy: updateAction, label: "Copy", labelWhenCopied: "Copied!" })
+                        ] })) : info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: title, children: ["A new update for Remotion is available! Run the following", ' ', updateActionType, ":"] })) : (jsx_runtime_1.jsxs("div", { style: title, children: ["Your Remotion Agent Skills are out of date. Run the following", ' ', updateActionType, ":"] })), jsx_runtime_1.jsxs("div", { style: commandField, children: [
+                            jsx_runtime_1.jsx("pre", { style: code, children: updateAction }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onClick, renderAction: renderCopyAction, title: "Copy command" })
                         ] }), info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: text, children: ["This will upgrade Remotion from ", info.currentVersion, " to", ' ', info.latestVersion, info.skillsUpdateAvailable
                                 ? ' and update your project Remotion Agent Skills.'
                                 : '.'] })) : null, info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: text, children: ["Read the", ' ', jsx_runtime_1.jsx("a", { style: link, target: "_blank", href: "https://github.com/remotion-dev/remotion/releases", children: "Release notes" }), ' ', "to know what", "'s", " new in Remotion."] })) : null] })