@remotion/studio 4.0.495 → 4.0.496

package/dist/components/InspectorPanel/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.keyframeEditorValue = exports.keyframeEditorLabel = exports.keyframeEditorRow = exports.detailValue = exports.detailLabel = exports.detailRow = exports.guideDetailsContainer = exports.detailsBeforeInlineAction = exports.inspectorActionSection = exports.detailsWithInlineAction = exports.detailsContainer = exports.centeredMessage = exports.selectedContainer = exports.resolveLinkStyle = exports.defaultPropsWarningMessages = exports.defaultPropsWarningContainer = exports.sectionHeaderEnd = exports.sectionHeaderStart = exports.sectionHeaderTitle = exports.sectionHeaderRow = exports.sequenceHeaderSubtitle = exports.sequenceHeaderTitle = exports.sequenceHeader = exports.inspectorSectionBody = exports.sectionHeader = exports.sequenceHeaderDivider = exports.inspectorSectionDivider = exports.inspectorOverviewSection = exports.compositionVisualControlsSection = exports.compositionDefaultPropsSection = exports.scrollableContainer = exports.container = void 0;
+exports.keyframeEditorValue = exports.keyframeEditorRow = exports.detailValue = exports.detailLabel = exports.detailRow = exports.guideDetailsContainer = exports.detailsBeforeInlineAction = exports.inspectorActionSection = exports.detailsWithInlineAction = exports.detailsContainer = exports.centeredMessage = exports.selectedContainer = exports.resolveLinkStyle = exports.defaultPropsWarningMessages = exports.defaultPropsWarningContainer = exports.sectionHeaderEnd = exports.sectionHeaderStart = exports.sectionHeaderTitle = exports.sectionHeaderRow = exports.sequenceHeaderSubtitle = exports.inspectorSectionBody = exports.sectionHeader = exports.sequenceHeaderDivider = exports.inspectorSectionDivider = exports.inspectorOverviewSection = exports.compositionVisualControlsSection = exports.compositionDefaultPropsSection = exports.scrollableContainer = exports.container = void 0;
 const colors_1 = require("../../helpers/colors");
 const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 exports.container = {
@@ -50,31 +50,6 @@ exports.inspectorSectionBody = {
     minWidth: 0,
     paddingBottom: 8,
 };
-exports.sequenceHeader = {
-    backgroundColor: colors_1.BACKGROUND,
-    display: 'flex',
-    flexDirection: 'column',
-    minWidth: 0,
-    padding: `6px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 4px`,
-};
-exports.sequenceHeaderTitle = {
-    alignSelf: 'stretch',
-    backgroundColor: colors_1.BACKGROUND,
-    border: 'none',
-    color: colors_1.WHITE,
-    display: 'flex',
-    fontFamily: 'sans-serif',
-    fontSize: 12,
-    lineHeight: '18px',
-    margin: 0,
-    maxWidth: '100%',
-    minWidth: 0,
-    overflow: 'hidden',
-    padding: 0,
-    textAlign: 'left',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-};
 exports.sequenceHeaderSubtitle = {
     alignSelf: 'flex-start',
     backgroundColor: colors_1.BACKGROUND,
@@ -182,6 +157,10 @@ exports.detailRow = {
 exports.detailLabel = {
     color: colors_1.LIGHT_TEXT,
     fontSize: 13,
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
 };
 exports.detailValue = {
     color: colors_1.WHITE,
@@ -192,22 +171,8 @@ exports.detailValue = {
     wordBreak: 'break-word',
 };
 exports.keyframeEditorRow = {
-    alignItems: 'flex-start',
-    display: 'flex',
-    gap: 12,
-    justifyContent: 'space-between',
-    minWidth: 0,
     padding: '10px 0',
 };
-exports.keyframeEditorLabel = {
-    color: colors_1.LIGHT_TEXT,
-    fontSize: 13,
-    lineHeight: '22px',
-    minWidth: 0,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-};
 exports.keyframeEditorValue = {
     alignItems: 'center',
     display: 'flex',

package/dist/components/InspectorSequenceSection.js

@@ -5,10 +5,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
+const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
 const timeline_layout_1 = require("../helpers/timeline-layout");
 const plus_1 = require("../icons/plus");
 const modals_1 = require("../state/modals");
-const CurrentAsset_1 = require("./CurrentAsset");
+const AssetFileIcon_1 = require("./AssetFileIcon");
 const InlineAction_1 = require("./InlineAction");
 const common_1 = require("./InspectorPanel/common");
 const styles_1 = require("./InspectorPanel/styles");
@@ -41,6 +42,11 @@ const plusIcon = {
     width: 15,
     height: 15,
 };
+const assetSelectorIcon = {
+    flexShrink: 0,
+    height: 18,
+    width: 18,
+};
 const remoteSourceLabel = {
     color: colors_1.LIGHT_TEXT,
     display: 'flex',
@@ -135,6 +141,7 @@ const hasSequenceControls = (sequence) => {
 };
 exports.hasSequenceControls = hasSequenceControls;
 const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, keyframeDisplayOffset, renderTransformControls, }) => {
+    var _a;
     const { tree } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
         sequence,
         nodePathInfo,
@@ -155,6 +162,9 @@ const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, k
             (0, timeline_asset_link_1.openTimelineAssetLink)(localAsset, selectAsset);
         }
     }, [localAsset, selectAsset]);
+    const localAssetFileName = localAsset
+        ? ((_a = localAsset.assetPath.split('/').pop()) !== null && _a !== void 0 ? _a : localAsset.assetPath)
+        : null;
     const getIsExpanded = (0, react_1.useCallback)((candidate) => {
         return !collapsedKeys.has(getInspectorExpansionKey(candidate));
     }, [collapsedKeys]);
@@ -232,7 +242,7 @@ const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, k
     if (controlRows.length === 0 && !showEffectsSection) {
         return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Controls", children: jsx_runtime_1.jsx("div", { style: emptyState, children: "No schema" }) }) }));
     }
-    return (jsx_runtime_1.jsxs("div", { style: container, children: [controlRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlGroups.map((group) => (jsx_runtime_1.jsxs(common_1.InspectorSection, { header: group.label, children: [group.id === 'source' && localAsset ? (jsx_runtime_1.jsx(CurrentAsset_1.AssetInfo, { assetName: localAsset.assetPath, contentSized: true, onAssetClick: jumpToAsset, readOnlyStudio: true })) : null, group.id === 'source' && remoteAsset && remoteSourceParts ? (jsx_runtime_1.jsxs("div", { style: remoteSourceLabel, title: remoteAsset.href, children: [
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [controlRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlGroups.map((group) => (jsx_runtime_1.jsxs(common_1.InspectorSection, { header: group.label, children: [group.id === 'source' && localAsset ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: false, onClick: jumpToAsset, renderIcon: (color) => (jsx_runtime_1.jsx(AssetFileIcon_1.AssetFileIcon, { color: color, fileType: (0, get_preview_file_type_1.getPreviewFileType)(localAsset.assetPath), style: assetSelectorIcon })), size: "compact", title: localAsset.assetPath, children: localAssetFileName })) : null, group.id === 'source' && remoteAsset && remoteSourceParts ? (jsx_runtime_1.jsxs("div", { style: remoteSourceLabel, title: remoteAsset.href, children: [
                                 jsx_runtime_1.jsx("span", { style: remoteSourceLeading, children: remoteSourceParts.leading }), jsx_runtime_1.jsx("span", { style: remoteSourceTrailing, children: remoteSourceParts.trailing })
                             ] })) : null, group.id === 'transforms' ? renderTransformControls() : null, group.id === 'source' ? null : group.rows.map(renderRow)] }, group.id))) })) : null, showEffectsSection ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: effectsHeader, children: effectRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: effectSelectableItems, children: effectRows.map(renderRow) })) : null })) : null] }));
 };

package/dist/components/InspectorSourceLocation.d.ts

@@ -5,4 +5,5 @@ export declare const InspectorSourceLocation: React.FC<{
     readonly canOpen: boolean;
     readonly onOpen: () => void;
     readonly renderIcon?: (color: string) => React.ReactNode;
+    readonly size?: 'default' | 'inline-action';
 }>;

package/dist/components/InspectorSourceLocation.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const format_file_location_1 = require("../helpers/format-file-location");
+const common_1 = require("./InspectorPanel/common");
 const source_attribution_1 = require("./Timeline/TimelineStack/source-attribution");
 const sourceLocationStyle = {
     alignSelf: 'flex-start',
@@ -40,7 +41,7 @@ const sourceLocationLabelStyle = {
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
 };
-const InspectorSourceLocation = ({ location, canOpen, onOpen, renderIcon }) => {
+const InspectorSourceLocation = ({ location, canOpen, onOpen, renderIcon, size = 'default' }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const validLocation = (0, react_1.useMemo)(() => {
         if (!(location === null || location === void 0 ? void 0 : location.source) || location.line === null) {
@@ -80,6 +81,9 @@ const InspectorSourceLocation = ({ location, canOpen, onOpen, renderIcon }) => {
     if (!label) {
         return null;
     }
+    if (size === 'inline-action') {
+        return (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: !canOpen, onClick: onClick, renderIcon: (iconColor) => renderIcon === null || renderIcon === void 0 ? void 0 : renderIcon(iconColor), size: "compact", title: fileLocation !== null && fileLocation !== void 0 ? fileLocation : undefined, children: label }));
+    }
     return (jsx_runtime_1.jsxs("button", { type: "button", style: style, title: fileLocation !== null && fileLocation !== void 0 ? fileLocation : undefined, onClick: onClick, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [renderIcon ? renderIcon(color) : null, jsx_runtime_1.jsx("span", { style: sourceLocationLabelStyle, children: label })
         ] }));
 };

package/dist/components/NewComposition/ComboBox.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+export type ComboboxSize = 'default' | 'compact' | 'small';
 type DividerItem = {
     type: 'divider';
     id: string;
@@ -26,6 +27,6 @@ export declare const Combobox: React.FC<{
     readonly selectedId: string | number;
     readonly style?: React.CSSProperties;
     readonly title: string;
-    readonly small?: boolean;
+    readonly size?: ComboboxSize;
 }>;
 export {};

package/dist/components/NewComposition/ComboBox.js

@@ -24,8 +24,17 @@ const container = {
     backgroundColor: colors_1.INPUT_BACKGROUND,
     borderWidth: 1,
     borderStyle: 'solid',
+    borderRadius: 4,
+    fontFamily: 'inherit',
     maxWidth: '100%',
 };
+const compactContainer = {
+    ...container,
+    boxSizing: 'border-box',
+    borderRadius: 0,
+    height: layout_1.COMPACT_CONTROL_ROW_HEIGHT + 2,
+    padding: '5px 6px',
+};
 const smallContainer = {
     ...container,
     padding: '3px 4px',
@@ -34,16 +43,25 @@ const label = {
     flex: 1,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
+    color: 'inherit',
+    fontFamily: 'inherit',
     fontSize: 14,
+    lineHeight: '21px',
+    minWidth: 0,
     textAlign: 'left',
     whiteSpace: 'nowrap',
 };
+const compactLabel = {
+    ...label,
+    fontSize: 12,
+    lineHeight: '16px',
+};
 const smallLabel = {
     ...label,
     fontSize: 11,
-    lineHeight: 1,
+    lineHeight: '12px',
 };
-const Combobox = ({ values, selectedId, style: customStyle, title, small = false }) => {
+const Combobox = ({ values, selectedId, style: customStyle, title, size: controlSize = 'default', }) => {
     const [hovered, setIsHovered] = (0, react_1.useState)(false);
     const [opened, setOpened] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
@@ -163,7 +181,11 @@ const Combobox = ({ values, selectedId, style: customStyle, title, small = false
     const selected = values.find((v) => v.id === selectedId);
     const style = (0, react_1.useMemo)(() => {
         return {
-            ...(small ? smallContainer : container),
+            ...(controlSize === 'small'
+                ? smallContainer
+                : controlSize === 'compact'
+                    ? compactContainer
+                    : container),
             ...(customStyle !== null && customStyle !== void 0 ? customStyle : {}),
             userSelect: 'none',
             WebkitUserSelect: 'none',
@@ -177,11 +199,14 @@ const Combobox = ({ values, selectedId, style: customStyle, title, small = false
                     ? colors_1.WHITE_ALPHA_05
                     : colors_1.BLACK_ALPHA_60,
         };
-    }, [customStyle, hovered, opened, small]);
+    }, [controlSize, customStyle, hovered, opened]);
+    const selectedLabelStyle = controlSize === 'small'
+        ? smallLabel
+        : controlSize === 'compact'
+            ? compactLabel
+            : label;
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsxs("button", { ref: ref, title: title, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: [selected ? (jsx_runtime_1.jsx("div", { title: typeof selected.label === 'string' ? selected.label : undefined, style: small ? smallLabel : label, children: selected === null || selected === void 0 ? void 0 : selected.label })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: small ? 0.5 : 1 }),
-                    " ",
-                    jsx_runtime_1.jsx(caret_1.CaretDown, { small: small })
+            jsx_runtime_1.jsxs("button", { ref: ref, title: title, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: [selected ? (jsx_runtime_1.jsx("div", { title: typeof selected.label === 'string' ? selected.label : undefined, style: selectedLabelStyle, children: selected === null || selected === void 0 ? void 0 : selected.label })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: controlSize === 'default' ? 1 : 0.5 }), ' ', jsx_runtime_1.jsx(caret_1.CaretDown, { small: controlSize === 'small' })
                 ] }), portalStyle
                 ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, onPointerDown: onOverlayPointerDown, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: values.findIndex((v) => selected && v.id === selected.id), topItemCanBeUnselected: false, fixedHeight: derivedMaxHeight }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));

package/dist/components/PlaybackRateSelector.js

@@ -16,13 +16,13 @@ const getPlaybackRateLabel = (playbackRate) => {
     return `${playbackRate}x`;
 };
 const accessibilityLabel = 'Change the playback rate';
-const comboStyle = { width: 80 };
+const comboStyle = { width: 64 };
 const PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     const style = (0, react_1.useMemo)(() => {
         return {
-            padding: ControlButton_1.CONTROL_BUTTON_PADDING,
+            padding: ControlButton_1.CONTROL_BUTTON_PADDING - 2,
         };
     }, []);
     const items = (0, react_1.useMemo)(() => {
@@ -54,6 +54,6 @@ const PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
     if (isStill || canvasContent === null || canvasContent.type === 'asset') {
         return null;
     }
-    return (jsx_runtime_1.jsx("div", { style: style, "aria-label": accessibilityLabel, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: accessibilityLabel, style: comboStyle, selectedId: String(playbackRate), values: items }) }));
+    return (jsx_runtime_1.jsx("div", { style: style, "aria-label": accessibilityLabel, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { size: "compact", title: accessibilityLabel, style: comboStyle, selectedId: String(playbackRate), values: items }) }));
 };
 exports.PlaybackRateSelector = PlaybackRateSelector;

package/dist/components/PreviewToolbar.js

@@ -26,7 +26,7 @@ const SizeSelector_1 = require("./SizeSelector");
 const SnappingToggle_1 = require("./SnappingToggle");
 const TimelineZoomControls_1 = require("./Timeline/TimelineZoomControls");
 const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
-const TOOLBAR_HEIGHT = 50;
+const TOOLBAR_HEIGHT = 40;
 const container = {
     display: 'flex',
     justifyContent: 'center',
@@ -64,7 +64,7 @@ const scrollIndicatorRight = {
 };
 const sideContainer = {
     width: 300,
-    height: 36,
+    height: 30,
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
@@ -169,7 +169,7 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
                     jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(OutlineToggle_1.OutlineToggle, { disabled: readOnlyStudio }) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SnappingToggle_1.SnappingToggle, { disabled: readOnlyStudio }) })
                 ] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), canvasContent && isFullscreenSupported ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, {}) })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), isMobileLayout && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}) }), isStill || isVideoComposition ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }) })) : null] })), jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
-                    jsx_runtime_1.jsx(layout_1.Flex, {}), !isMobileLayout && jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
+                    jsx_runtime_1.jsx(layout_1.Flex, {}), !isMobileLayout && jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio, size: "compact" }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
                 ] }), jsx_runtime_1.jsx(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), jsx_runtime_1.jsx(PlaybackRatePersistor_1.PlaybackRatePersistor, {}), jsx_runtime_1.jsx("div", { ref: rightScrollIndicatorRef, style: scrollIndicatorRight })
         ] }));
 };

package/dist/components/RenderButton.d.ts

@@ -2,4 +2,5 @@ import React from 'react';
 export type RenderType = 'server-render' | 'client-render' | 'render-command';
 export declare const RenderButton: React.FC<{
     readonly readOnlyStudio: boolean;
+    readonly size?: 'default' | 'compact';
 }>;

package/dist/components/RenderButton.js

@@ -65,9 +65,47 @@ const dropdownTriggerStyle = {
 const mainButtonContent = {
     paddingLeft: 4,
     paddingRight: 6,
+    minWidth: 0,
 };
 const label = {
+    color: 'inherit',
+    fontFamily: 'inherit',
     fontSize: 14,
+    lineHeight: '21px',
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const compactSplitButtonSegmentHeight = layout_1.COMPACT_CONTROL_ROW_HEIGHT;
+const compactMainButtonStyle = {
+    ...mainButtonStyle,
+    boxSizing: 'border-box',
+    height: compactSplitButtonSegmentHeight,
+    paddingLeft: 6,
+    paddingRight: 6,
+    paddingTop: 6,
+    paddingBottom: 6,
+    fontSize: 12,
+};
+const compactDropdownTriggerStyle = {
+    ...dropdownTriggerStyle,
+    boxSizing: 'border-box',
+    height: compactSplitButtonSegmentHeight,
+    paddingLeft: 5,
+    paddingRight: 5,
+    paddingTop: 6,
+    paddingBottom: 6,
+};
+const compactMainButtonContent = {
+    ...mainButtonContent,
+    paddingLeft: 2,
+    paddingRight: 4,
+};
+const compactLabel = {
+    ...label,
+    fontSize: 12,
+    lineHeight: '16px',
 };
 const RENDER_TYPE_STORAGE_KEY = 'remotion.renderType';
 const getInitialRenderType = (readOnlyStudio) => {
@@ -85,7 +123,7 @@ const getInitialRenderType = (readOnlyStudio) => {
     }
     return 'server-render';
 };
-const RenderButton = ({ readOnlyStudio, }) => {
+const RenderButton = ({ readOnlyStudio, size: controlSize = 'default' }) => {
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const [preferredRenderType, setPreferredRenderType] = (0, react_1.useState)(() => getInitialRenderType(readOnlyStudio));
@@ -153,11 +191,12 @@ const RenderButton = ({ readOnlyStudio, }) => {
     const iconStyle = (0, react_1.useMemo)(() => {
         return {
             style: {
-                height: 16,
+                height: controlSize === 'compact' ? 14 : 16,
                 color: colors_1.CURRENT_COLOR,
+                flexShrink: 0,
             },
         };
-    }, []);
+    }, [controlSize]);
     const video = remotion_1.Internals.useVideo();
     const { getCurrentFrame } = player_1.PlayerInternals.usePlayer();
     const { props } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
@@ -385,10 +424,11 @@ const RenderButton = ({ readOnlyStudio, }) => {
         return {
             ...splitButtonContainer,
             borderColor: colors_1.BLACK_ALPHA_60,
+            borderRadius: controlSize === 'compact' ? 0 : 4,
             opacity: 1,
             cursor: 'pointer',
         };
-    }, []);
+    }, [controlSize]);
     const renderLabel = renderType === 'server-render'
         ? 'Render'
         : renderType === 'render-command'
@@ -399,9 +439,13 @@ const RenderButton = ({ readOnlyStudio, }) => {
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-server", disabled: !canServerRender, onClick: () => openServerRenderModal(false), type: "button" }), ' ', jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-client", onClick: openClientRenderModal, type: "button" }), jsx_runtime_1.jsxs("div", { ref: containerRef, style: containerStyle, title: tooltip, children: [
-                    jsx_runtime_1.jsx("button", { type: "button", style: mainButtonStyle, onClick: onClick, id: "render-modal-button", children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", style: mainButtonContent, children: [
-                                jsx_runtime_1.jsx(render_1.ThinRenderIcon, { fill: colors_1.CURRENT_COLOR_LOWERCASE, svgProps: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("span", { style: label, children: renderLabel })
-                            ] }) }), jsx_runtime_1.jsx("div", { style: dividerStyle }), jsx_runtime_1.jsx("button", { ref: dropdownRef, type: "button", style: dropdownTriggerStyle, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, onPointerDown: onPointerDown, onClick: onClickDropdown, children: jsx_runtime_1.jsx(caret_1.CaretDown, {}) })
+                    jsx_runtime_1.jsx("button", { type: "button", style: controlSize === 'compact' ? compactMainButtonStyle : mainButtonStyle, onClick: onClick, id: "render-modal-button", children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", style: controlSize === 'compact'
+                                ? compactMainButtonContent
+                                : mainButtonContent, children: [
+                                jsx_runtime_1.jsx(render_1.ThinRenderIcon, { fill: colors_1.CURRENT_COLOR_LOWERCASE, svgProps: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: controlSize === 'compact' ? 0.75 : 1 }), jsx_runtime_1.jsx("span", { style: controlSize === 'compact' ? compactLabel : label, children: renderLabel })
+                            ] }) }), jsx_runtime_1.jsx("div", { style: dividerStyle }), jsx_runtime_1.jsx("button", { ref: dropdownRef, type: "button", style: controlSize === 'compact'
+                            ? compactDropdownTriggerStyle
+                            : dropdownTriggerStyle, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, onPointerDown: onPointerDown, onClick: onClickDropdown, children: jsx_runtime_1.jsx(caret_1.CaretDown, {}) })
                 ] }), portalStyle
                 ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHideDropdown, onEscape: onHideDropdown, children: jsx_runtime_1.jsx("div", { style: portalStyle, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: () => { }, onPreviousMenu: () => { }, values: dropdownValues, onHide: onHideDropdown, leaveLeftSpace: false, preselectIndex: dropdownValues.findIndex((v) => v.id === renderType), topItemCanBeUnselected: false, fixedHeight: derivedMaxHeight }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));

package/dist/components/RenderModal/SchemaEditor/ZodDiscriminatedUnionEditor.js

@@ -47,7 +47,7 @@ const ZodDiscriminatedUnionEditor = ({ schema, setValue, value, mayPad, jsonPath
         return {
             discriminator,
             markup: (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [
-                    jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: [...jsonPath, discriminator], onRemove: onRemove, suffix: null, valid: zodValidation.success }), jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: "Select type", values: comboBoxValues, selectedId: value[discriminator], small: true })
+                    jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: [...jsonPath, discriminator], onRemove: onRemove, suffix: null, valid: zodValidation.success }), jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: "Select type", values: comboBoxValues, selectedId: value[discriminator], size: "small" })
                 ] }, 'replacement')),
         };
     }, [

package/dist/components/RenderModal/SchemaEditor/ZodEnumEditor.js

@@ -39,7 +39,7 @@ const ZodEnumEditor = ({ schema, jsonPath, setValue, value, onRemove }) => {
     }, [enumValues, onChange, value]);
     const zodValidation = (0, react_1.useMemo)(() => (0, zod_schema_type_1.zodSafeParse)(schema, value), [schema, value]);
     return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: true, children: [
-            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null }), jsx_runtime_1.jsx("div", { style: isRoot ? undefined : container, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: value, title: value, small: true }) }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
+            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null }), jsx_runtime_1.jsx("div", { style: isRoot ? undefined : container, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: value, title: value, size: "small" }) }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
         ] }));
 };
 exports.ZodEnumEditor = ZodEnumEditor;

package/dist/components/RenderModal/SchemaEditor/ZodStaticFileEditor.js

@@ -38,7 +38,7 @@ const ZodStaticFileEditor = ({ schema, jsonPath, setValue, value, onRemove, mayP
         });
     }, [onChange, staticFiles, value]);
     return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [
-            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null }), jsx_runtime_1.jsx("div", { style: isRoot ? undefined : container, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: value, title: value, small: true }) }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
+            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null }), jsx_runtime_1.jsx("div", { style: isRoot ? undefined : container, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: value, title: value, size: "small" }) }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
         ] }));
 };
 exports.ZodStaticFileEditor = ZodStaticFileEditor;

package/dist/components/SizeSelector.js

@@ -46,7 +46,7 @@ const getPreviewSizeLabel = (previewSize) => {
 };
 exports.getPreviewSizeLabel = getPreviewSizeLabel;
 const accessibilityLabel = 'Preview Size';
-const comboStyle = { width: 80 };
+const comboStyle = { width: 64 };
 const getUniqueSizes = (size) => {
     const customPreviewSizes = [size, ...commonPreviewSizes];
     const uniqueSizes = [];
@@ -72,7 +72,7 @@ const SizeSelector = () => {
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const style = (0, react_1.useMemo)(() => {
         return {
-            padding: ControlButton_1.CONTROL_BUTTON_PADDING,
+            padding: ControlButton_1.CONTROL_BUTTON_PADDING - 2,
         };
     }, []);
     const zoomable = (0, react_1.useMemo)(() => {
@@ -114,6 +114,6 @@ const SizeSelector = () => {
     if (!zoomable) {
         return null;
     }
-    return (jsx_runtime_1.jsx("div", { style: style, "aria-label": accessibilityLabel, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: accessibilityLabel, style: comboStyle, selectedId: String(size.size), values: items }) }));
+    return (jsx_runtime_1.jsx("div", { style: style, "aria-label": accessibilityLabel, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { size: "compact", title: accessibilityLabel, style: comboStyle, selectedId: String(size.size), values: items }) }));
 };
 exports.SizeSelector = SizeSelector;

package/dist/components/Timeline/TimelineAssetField.js

@@ -109,7 +109,7 @@ const TimelineStaticFileAssetField = ({ propStatus, effectiveValue, onSave, onDr
             },
         ];
     }, [current, onSelect, staticFiles, upload]);
-    return (jsx_runtime_1.jsx(ComboBox_1.Combobox, { small: true, title: current, selectedId: current, values: items, style: comboboxStyle }));
+    return (jsx_runtime_1.jsx(ComboBox_1.Combobox, { size: "small", title: current, selectedId: current, values: items, style: comboboxStyle }));
 };
 const TimelineAssetField = (props) => {
     var _a;

package/dist/components/Timeline/TimelineEnumField.js

@@ -37,6 +37,6 @@ const TimelineEnumField = ({ field, propStatus, effectiveValue, onSave, onDragVa
             disabled: false,
         }));
     }, [variantKeys, onSelect]);
-    return (jsx_runtime_1.jsx(ComboBox_1.Combobox, { small: true, title: field.key, selectedId: current, values: items, style: comboboxStyle }));
+    return (jsx_runtime_1.jsx(ComboBox_1.Combobox, { size: "small", title: field.key, selectedId: current, values: items, style: comboboxStyle }));
 };
 exports.TimelineEnumField = TimelineEnumField;

package/dist/components/Timeline/TimelineFieldLabel.js

@@ -19,13 +19,13 @@ const fieldNameBase = {
     minWidth: 0,
 };
 const TimelineFieldLabel = ({ rowDepth, selected, label, stacked = false }) => {
-    const { basePadding } = (0, react_1.useContext)(TimelineRowLayoutContext_1.TimelineRowLayoutContext);
+    const { basePadding, highlightSelectedLabel } = (0, react_1.useContext)(TimelineRowLayoutContext_1.TimelineRowLayoutContext);
     const labelRowStyle = (0, react_1.useMemo)(() => ({
         ...(0, timeline_field_row_layout_1.getTimelineFieldLabelRowStyle)(rowDepth, basePadding),
-        ...(0, TimelineSelection_1.getTimelineSelectedLabelStyle)(selected, true),
+        ...(0, TimelineSelection_1.getTimelineSelectedLabelStyle)(selected && highlightSelectedLabel, true),
         ...(stacked ? { flex: `0 0 ${timeline_layout_1.SCHEMA_FIELD_ROW_HEIGHT}px` } : null),
         alignSelf: 'stretch',
-    }), [basePadding, rowDepth, selected, stacked]);
+    }), [basePadding, highlightSelectedLabel, rowDepth, selected, stacked]);
     const fieldNameStyle = (0, react_1.useMemo)(() => ({
         ...fieldNameBase,
         color: (0, TimelineSelection_1.getTimelineColor)(selected, true),

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -18,6 +18,9 @@ const TimelineKeyframeDiamondIcon_1 = require("./TimelineKeyframeDiamondIcon");
 const TimelineKeyframeTracksContext_1 = require("./TimelineKeyframeTracksContext");
 const TimelineSelection_1 = require("./TimelineSelection");
 const update_selected_easing_1 = require("./update-selected-easing");
+const NAV_BUTTON_SIZE = 14;
+const INSPECTOR_NAV_BUTTON_WIDTH = NAV_BUTTON_SIZE / 2;
+const INSPECTOR_PREVIOUS_BUTTON_EXTRA_GAP = 1;
 const controlsContainerStyle = {
     alignItems: 'center',
     display: 'flex',
@@ -25,6 +28,12 @@ const controlsContainerStyle = {
     gap: 1,
     marginRight: 4,
 };
+const inspectorControlsContainerStyle = {
+    ...controlsContainerStyle,
+    paddingLeft: NAV_BUTTON_SIZE -
+        INSPECTOR_NAV_BUTTON_WIDTH -
+        INSPECTOR_PREVIOUS_BUTTON_EXTRA_GAP,
+};
 const navButtonStyle = {
     alignItems: 'center',
     background: 'none',
@@ -33,13 +42,20 @@ const navButtonStyle = {
     cursor: 'pointer',
     display: 'flex',
     flexShrink: 0,
-    height: 14,
+    height: NAV_BUTTON_SIZE,
     justifyContent: 'center',
     lineHeight: 1,
     outline: 'none',
     padding: 0,
     userSelect: 'none',
-    width: 14,
+    width: NAV_BUTTON_SIZE,
+};
+const inspectorNavButtonStyle = {
+    width: INSPECTOR_NAV_BUTTON_WIDTH,
+};
+const inspectorPreviousNavButtonStyle = {
+    ...inspectorNavButtonStyle,
+    marginRight: INSPECTOR_PREVIOUS_BUTTON_EXTRA_GAP,
 };
 const isKeyframedStatus = (status) => {
     return status.status === 'keyframed';
@@ -48,7 +64,7 @@ const diamondButtonStyle = {
     ...navButtonStyle,
     background: 'none',
 };
-const svgStyle = { display: 'block' };
+const svgStyle = { display: 'block', flexShrink: 0 };
 const isKeyframeControlSelection = (selection) => {
     return (selection.type === 'sequence-prop' ||
         selection.type === 'sequence-effect-prop');
@@ -454,23 +470,27 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
     const nextDisabled = nextDisplayFrame === null;
     const previousStyle = (0, react_1.useMemo)(() => ({
         ...navButtonStyle,
+        ...(mode === 'inspector' ? inspectorPreviousNavButtonStyle : null),
         cursor: previousDisabled ? 'default' : 'pointer',
         opacity: previousDisabled ? 0.35 : 1,
         visibility: showNavigationButtons ? 'visible' : 'hidden',
-    }), [previousDisabled, showNavigationButtons]);
+    }), [mode, previousDisabled, showNavigationButtons]);
     const nextStyle = (0, react_1.useMemo)(() => ({
         ...navButtonStyle,
+        ...(mode === 'inspector' ? inspectorNavButtonStyle : null),
         cursor: nextDisabled ? 'default' : 'pointer',
         opacity: nextDisabled ? 0.35 : 1,
         visibility: showNavigationButtons ? 'visible' : 'hidden',
-    }), [nextDisabled, showNavigationButtons]);
+    }), [mode, nextDisabled, showNavigationButtons]);
     const diamondStyle = (0, react_1.useMemo)(() => ({
         ...diamondButtonStyle,
         cursor: canToggleKeyframe && clientId ? 'pointer' : 'default',
         opacity: canToggleKeyframe && clientId ? 1 : 0.35,
     }), [canToggleKeyframe, clientId]);
     const diamondColor = hasKeyframeAtCurrentFrame ? colors_1.BLUE : colors_1.LIGHT_TEXT;
-    return (jsx_runtime_1.jsxs("div", { style: controlsContainerStyle, children: [
+    return (jsx_runtime_1.jsxs("div", { style: mode === 'inspector'
+            ? inspectorControlsContainerStyle
+            : controlsContainerStyle, children: [
             jsx_runtime_1.jsx("button", { type: "button", style: previousStyle, disabled: previousDisabled, onPointerDown: previousDisabled ? undefined : onPrevious, "aria-label": "Go to previous keyframe", title: "Previous keyframe", children: jsx_runtime_1.jsx("svg", { width: "14", height: "14", viewBox: "0 0 10 10", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M7 1.5L3 5L7 8.5Z", fill: colors_1.LIGHT_GRAY }) }) }), jsx_runtime_1.jsx("button", { type: "button", style: diamondStyle, disabled: !canToggleKeyframe || !clientId, onPointerDown: canToggleKeyframe && clientId ? onToggleKeyframe : undefined, "aria-label": hasKeyframeAtCurrentFrame ? 'Remove keyframe' : 'Add keyframe', title: hasKeyframeAtCurrentFrame ? 'Remove keyframe' : 'Add keyframe', children: jsx_runtime_1.jsx(TimelineKeyframeDiamondIcon_1.TimelineKeyframeDiamondIcon, { color: diamondColor, size: 12 }) }), jsx_runtime_1.jsx("button", { type: "button", style: nextStyle, disabled: nextDisabled, onPointerDown: nextDisabled ? undefined : onNext, "aria-label": "Go to next keyframe", title: "Next keyframe", children: jsx_runtime_1.jsx("svg", { width: "14", height: "14", viewBox: "0 0 10 10", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M3 1.5L7 5L3 8.5Z", fill: colors_1.LIGHT_GRAY }) }) })
         ] }));
 };

package/dist/components/Timeline/TimelineRowChrome.js

@@ -26,7 +26,7 @@ const keyframeControlsColumnBaseStyle = {
 };
 const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, style, selected, selectable, selectionItem, onSelect, showSelectedBackground, containsSelection, outerHeight, onDragLeave, onDragOver, onDrop, onDoubleClick, }) => {
     const ref = (0, react_1.useRef)(null);
-    const { basePadding, keyframeControlsPadding } = (0, react_1.useContext)(TimelineRowLayoutContext_1.TimelineRowLayoutContext);
+    const { basePadding, keyframeControlsPadding, rowBorderRadius, rowHorizontalMargin, } = (0, react_1.useContext)(TimelineRowLayoutContext_1.TimelineRowLayoutContext);
     const indentWidth = (0, timeline_row_layout_1.getTimelineRowIndentWidth)(depth);
     (0, TimelineSelection_1.useTimelineFocusableItem)(selectionItem, ref);
     const keyframeControlsColumnStyle = (0, react_1.useMemo)(() => ({
@@ -64,7 +64,15 @@ const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, styl
         ...rowBase,
         ...style,
         backgroundColor: outerHeight === null ? highlightBackground : undefined,
-    }), [style, outerHeight, highlightBackground]);
+        borderRadius: rowBorderRadius,
+        margin: `0 ${rowHorizontalMargin}px`,
+    }), [
+        style,
+        outerHeight,
+        highlightBackground,
+        rowBorderRadius,
+        rowHorizontalMargin,
+    ]);
     const outerStyle = (0, react_1.useMemo)(() => {
         if (outerHeight === null) {
             return undefined;