@remotion/studio 4.0.495 → 4.0.496

package/dist/esm/previewEntry.mjs

@@ -771,6 +771,7 @@ import { useMemo as useMemo5 } from "react";
 import { jsx as jsx6 } from "react/jsx-runtime";
 var SPACING_UNIT = 8;
 var COMPACT_CONTROL_ROW_HEIGHT = 28;
+var COMPACT_INLINE_ROW_HEIGHT = 22;
 var Spacing = ({ x = 0, y = 0, block = false }) => {
   const style = useMemo5(() => {
     return {
@@ -2508,8 +2509,17 @@ var container7 = {
   backgroundColor: INPUT_BACKGROUND,
   borderWidth: 1,
   borderStyle: "solid",
+  borderRadius: 4,
+  fontFamily: "inherit",
   maxWidth: "100%"
 };
+var compactContainer = {
+  ...container7,
+  boxSizing: "border-box",
+  borderRadius: 0,
+  height: COMPACT_CONTROL_ROW_HEIGHT + 2,
+  padding: "5px 6px"
+};
 var smallContainer = {
   ...container7,
   padding: "3px 4px"
@@ -2518,16 +2528,31 @@ var label2 = {
   flex: 1,
   overflow: "hidden",
   textOverflow: "ellipsis",
+  color: "inherit",
+  fontFamily: "inherit",
   fontSize: 14,
+  lineHeight: "21px",
+  minWidth: 0,
   textAlign: "left",
   whiteSpace: "nowrap"
 };
+var compactLabel = {
+  ...label2,
+  fontSize: 12,
+  lineHeight: "16px"
+};
 var smallLabel = {
   ...label2,
   fontSize: 11,
-  lineHeight: 1
+  lineHeight: "12px"
 };
-var Combobox = ({ values, selectedId, style: customStyle, title, small = false }) => {
+var Combobox = ({
+  values,
+  selectedId,
+  style: customStyle,
+  title,
+  size: controlSize = "default"
+}) => {
   const [hovered, setIsHovered] = useState9(false);
   const [opened, setOpened] = useState9(false);
   const ref = useRef7(null);
@@ -2637,7 +2662,7 @@ var Combobox = ({ values, selectedId, style: customStyle, title, small = false }
   const selected = values.find((v) => v.id === selectedId);
   const style2 = useMemo10(() => {
     return {
-      ...small ? smallContainer : container7,
+      ...controlSize === "small" ? smallContainer : controlSize === "compact" ? compactContainer : container7,
       ...customStyle ?? {},
       userSelect: "none",
       WebkitUserSelect: "none",
@@ -2647,7 +2672,8 @@ var Combobox = ({ values, selectedId, style: customStyle, title, small = false }
       alignItems: "center",
       borderColor: opened ? SELECTED_BACKGROUND : hovered ? WHITE_ALPHA_05 : BLACK_ALPHA_60
     };
-  }, [customStyle, hovered, opened, small]);
+  }, [controlSize, customStyle, hovered, opened]);
+  const selectedLabelStyle = controlSize === "small" ? smallLabel : controlSize === "compact" ? compactLabel : label2;
   return /* @__PURE__ */ jsxs6(Fragment2, {
     children: [
       /* @__PURE__ */ jsxs6("button", {
@@ -2660,15 +2686,15 @@ var Combobox = ({ values, selectedId, style: customStyle, title, small = false }
         children: [
           selected ? /* @__PURE__ */ jsx19("div", {
             title: typeof selected.label === "string" ? selected.label : undefined,
-            style: small ? smallLabel : label2,
+            style: selectedLabelStyle,
             children: selected?.label
           }) : null,
           /* @__PURE__ */ jsx19(Spacing, {
-            x: small ? 0.5 : 1
+            x: controlSize === "default" ? 1 : 0.5
           }),
           " ",
           /* @__PURE__ */ jsx19(CaretDown, {
-            small
+            small: controlSize === "small"
           })
         ]
       }),
@@ -2740,7 +2766,7 @@ var getPreviewSizeLabel = (previewSize) => {
   return `${(previewSize.size * 100).toFixed(0)}%`;
 };
 var accessibilityLabel = "Preview Size";
-var comboStyle = { width: 80 };
+var comboStyle = { width: 64 };
 var getUniqueSizes = (size) => {
   const customPreviewSizes = [size, ...commonPreviewSizes];
   const uniqueSizes = [];
@@ -2765,7 +2791,7 @@ var SizeSelector = () => {
   const { canvasContent } = useContext4(Internals.CompositionManager);
   const style2 = useMemo11(() => {
     return {
-      padding: CONTROL_BUTTON_PADDING
+      padding: CONTROL_BUTTON_PADDING - 2
     };
   }, []);
   const zoomable = useMemo11(() => {
@@ -2809,6 +2835,7 @@ var SizeSelector = () => {
     style: style2,
     "aria-label": accessibilityLabel,
     children: /* @__PURE__ */ jsx20(Combobox, {
+      size: "compact",
       title: accessibilityLabel,
       style: comboStyle,
       selectedId: String(size.size),
@@ -26139,6 +26166,30 @@ var AssetFileIcon = ({
   });
 };
 
+// src/components/open-in-new-window.ts
+var getOpenInNewWindowMenuItem = (route) => {
+  return {
+    id: "open-in-new-window",
+    keyHint: null,
+    label: "Open in new window",
+    leftItem: null,
+    onClick: () => {
+      const screen = window.screen;
+      const width = Math.min(1200, Math.floor(screen.availWidth * 0.8));
+      const height = Math.min(800, Math.floor(screen.availHeight * 0.8));
+      const displayLeft = screen.availLeft ?? 0;
+      const displayTop = screen.availTop ?? 0;
+      const left3 = Math.round(Math.min(Math.max(window.screenX + (window.outerWidth - width) / 2, displayLeft), displayLeft + screen.availWidth - width));
+      const top = Math.round(Math.min(Math.max(window.screenY + (window.outerHeight - height) / 2, displayTop), displayTop + screen.availHeight - height));
+      window.open(getUrlForRoute(route), "_blank", `popup,width=${width},height=${height},left=${left3},top=${top}`);
+    },
+    quickSwitcherLabel: null,
+    subMenu: null,
+    type: "item",
+    value: "open-in-new-window"
+  };
+};
+
 // src/components/AssetSelectorItem.tsx
 import { jsx as jsx99, jsxs as jsxs45, Fragment as Fragment19 } from "react/jsx-runtime";
 var iconStyle = {
@@ -26393,7 +26444,7 @@ var AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio }
     return {
       ...itemStyle,
       color: hovered || selected ? WHITE : LIGHT_TEXT,
-      backgroundColor: hovered ? selected ? SELECTED_BACKGROUND : WHITE_ALPHA_06 : selected ? SELECTED_BACKGROUND : TRANSPARENT,
+      backgroundColor: hovered || selected ? WHITE_ALPHA_06 : TRANSPARENT,
       paddingLeft: 12 + level * 8
     };
   }, [hovered, level, selected]);
@@ -26473,6 +26524,11 @@ var AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio }
   }, [confirm, relativePath]);
   const contextMenu = useMemo55(() => {
     return [
+      getOpenInNewWindowMenuItem(`/assets/${relativePath}`),
+      {
+        type: "divider",
+        id: "open-in-new-window-divider"
+      },
       {
         id: "copy-asset-file-name",
         keyHint: null,
@@ -27346,7 +27402,7 @@ var CompositionSelectorItem = ({
   const style5 = useMemo60(() => {
     return {
       ...itemStyle2,
-      backgroundColor: dragHovered ? WHITE_ALPHA_12 : getBackgroundFromHoverState({ hovered, selected }),
+      backgroundColor: dragHovered ? WHITE_ALPHA_12 : hovered || selected ? WHITE_ALPHA_06 : TRANSPARENT,
       paddingLeft: 12 + level * 8
     };
   }, [dragHovered, hovered, level, selected]);
@@ -27384,26 +27440,7 @@ var CompositionSelectorItem = ({
         readOnlyStudio: window.remotion_isReadOnlyStudio
       });
       return [
-        {
-          id: "open-in-new-window",
-          keyHint: null,
-          label: "Open in new window",
-          leftItem: null,
-          onClick: () => {
-            const screen = window.screen;
-            const width = Math.min(1200, Math.floor(screen.availWidth * 0.8));
-            const height = Math.min(800, Math.floor(screen.availHeight * 0.8));
-            const displayLeft = screen.availLeft ?? 0;
-            const displayTop = screen.availTop ?? 0;
-            const left3 = Math.round(Math.min(Math.max(window.screenX + (window.outerWidth - width) / 2, displayLeft), displayLeft + screen.availWidth - width));
-            const top = Math.round(Math.min(Math.max(window.screenY + (window.outerHeight - height) / 2, displayTop), displayTop + screen.availHeight - height));
-            window.open(getUrlForRoute(`/${item.composition.id}`), "_blank", `popup,width=${width},height=${height},left=${left3},top=${top}`);
-          },
-          quickSwitcherLabel: null,
-          subMenu: null,
-          type: "item",
-          value: "open-in-new-window"
-        },
+        getOpenInNewWindowMenuItem(`/${item.composition.id}`),
         {
           type: "divider",
           id: "open-in-new-window-divider"
@@ -28715,7 +28752,47 @@ var titleInput = {
   WebkitAppearance: "none",
   width: "100%"
 };
-var InlineEditableTitle = ({ value, canRename, getInitialSelection, onClick, onCommit, title: title2 }) => {
+var inspectorTitleWrapper = {
+  ...titleWrapper,
+  fontFamily: "sans-serif",
+  fontSize: 13,
+  height: COMPACT_INLINE_ROW_HEIGHT,
+  margin: "0 4px",
+  width: "calc(100% - 8px)"
+};
+var inspectorTitleInner = {
+  ...titleInner,
+  alignItems: "center",
+  fontFamily: "sans-serif",
+  fontSize: 13,
+  height: COMPACT_INLINE_ROW_HEIGHT,
+  paddingBottom: 0,
+  paddingLeft: 8,
+  paddingRight: 8,
+  paddingTop: 0,
+  width: "100%"
+};
+var inspectorTitleGridItem = {
+  ...titleGridItem,
+  color: "inherit",
+  fontFamily: "sans-serif",
+  fontSize: 13,
+  lineHeight: "18px"
+};
+var inspectorTitleInput = {
+  ...titleInput,
+  fontFamily: "sans-serif",
+  fontSize: 13
+};
+var InlineEditableTitle = ({
+  value,
+  canRename,
+  getInitialSelection,
+  onClick,
+  onCommit,
+  size: size2 = "default",
+  title: title2
+}) => {
   const [isEditing, setIsEditing] = useState51(false);
   const [isHovered, setIsHovered] = useState51(false);
   const [draftValue, setDraftValue] = useState51(value);
@@ -28777,18 +28854,24 @@ var InlineEditableTitle = ({ value, canRename, getInitialSelection, onClick, onC
     }
   }, [value]);
   const isInteractive = canRename || onClick !== undefined;
-  const backgroundColor = isEditing ? INPUT_BACKGROUND : isHovered && isInteractive ? WHITE_ALPHA_06 : TRANSPARENT;
+  const backgroundColor = isEditing ? INPUT_BACKGROUND : getBackgroundFromHoverState({
+    hovered: isHovered && isInteractive,
+    selected: false
+  });
+  const isInspectorSize = size2 === "inspector";
   const innerStyle = useMemo66(() => {
     return {
-      ...titleInner,
+      ...isInspectorSize ? inspectorTitleInner : titleInner,
       backgroundColor,
-      cursor: isEditing ? "text" : isInteractive ? "pointer" : "default",
+      cursor: isEditing ? "text" : isInspectorSize ? "text" : isInteractive ? "pointer" : "default",
       userSelect: isEditing ? "text" : "none",
-      width: isEditing ? "100%" : undefined
+      width: isEditing || isInspectorSize ? "100%" : undefined
     };
-  }, [backgroundColor, isEditing, isInteractive]);
+  }, [backgroundColor, isEditing, isInspectorSize, isInteractive]);
+  const gridItemStyle = isInspectorSize ? inspectorTitleGridItem : titleGridItem;
+  const inputStyle = isInspectorSize ? inspectorTitleInput : titleInput;
   return /* @__PURE__ */ jsx116("div", {
-    style: titleWrapper,
+    style: isInspectorSize ? inspectorTitleWrapper : titleWrapper,
     title: title2 ?? value,
     children: /* @__PURE__ */ jsxs52("span", {
       style: innerStyle,
@@ -28799,14 +28882,14 @@ var InlineEditableTitle = ({ value, canRename, getInitialSelection, onClick, onC
         /* @__PURE__ */ jsx116("span", {
           "aria-hidden": isEditing,
           style: {
-            ...titleGridItem,
+            ...gridItemStyle,
             visibility: isEditing ? "hidden" : "visible"
           },
           children: value
         }),
         isEditing ? /* @__PURE__ */ jsx116("input", {
           ref: focusInput,
-          style: { ...titleGridItem, ...titleInput },
+          style: { ...gridItemStyle, ...inputStyle },
           value: draftValue,
           onChange,
           onBlur,
@@ -28853,8 +28936,20 @@ var subtitle = {
   textOverflow: "ellipsis",
   whiteSpace: "nowrap"
 };
-var InspectorInfoHeader = ({ children, contentSized = false, minHeight }) => {
-  const style5 = contentSized ? containerBase : minHeight === undefined ? container24 : { ...containerBase, minHeight };
+var inspectorSubtitle = {
+  ...subtitle,
+  boxSizing: "border-box",
+  fontFamily: "sans-serif",
+  fontSize: 13,
+  height: 28,
+  lineHeight: "18px",
+  margin: "0 4px",
+  padding: "5px 8px",
+  width: "calc(100% - 8px)"
+};
+var InspectorInfoHeader = ({ children, contentSized = false, minHeight, padding: padding2 }) => {
+  const sizeStyle = contentSized ? containerBase : minHeight === undefined ? container24 : { ...containerBase, minHeight };
+  const style5 = padding2 === undefined ? sizeStyle : { ...sizeStyle, padding: padding2 };
   return /* @__PURE__ */ jsx117("div", {
     style: style5,
     children: children === undefined || children === null ? null : /* @__PURE__ */ jsx117("div", {
@@ -28866,9 +28961,9 @@ var InspectorInfoHeader = ({ children, contentSized = false, minHeight }) => {
     })
   });
 };
-var InspectorInfoSubtitle = ({ children }) => {
+var InspectorInfoSubtitle = ({ children, size: size2 = "default" }) => {
   return /* @__PURE__ */ jsx117("div", {
-    style: subtitle,
+    style: size2 === "inspector" ? inspectorSubtitle : subtitle,
     children
   });
 };
@@ -29073,6 +29168,7 @@ var AssetInfo = ({ assetName, contentSized = false, onAssetClick, readOnlyStudio
   const mediaDetailLines = mediaMetadata ? getCurrentAssetMediaDetailLines(mediaMetadata) : [];
   return /* @__PURE__ */ jsxs53(InspectorInfoHeader, {
     contentSized,
+    padding: contentSized ? `0 ${INSPECTOR_PANEL_HORIZONTAL_PADDING}px 6px` : "4px 0",
     children: [
       /* @__PURE__ */ jsx118(InlineEditableTitle, {
         value: fileName,
@@ -29080,16 +29176,20 @@ var AssetInfo = ({ assetName, contentSized = false, onAssetClick, readOnlyStudio
         getInitialSelection: getStaticFileRenameSelection,
         onClick: onAssetClick,
         onCommit: onRename,
+        size: contentSized ? "default" : "inspector",
         title: assetName
       }),
       subtitleParts.length > 0 ? /* @__PURE__ */ jsx118(InspectorInfoSubtitle, {
+        size: contentSized ? "default" : "inspector",
         children: subtitleParts.join(" · ")
       }) : null,
       mediaMetadata ? /* @__PURE__ */ jsx118(InspectorInfoSubtitle, {
+        size: contentSized ? "default" : "inspector",
         children: formatMediaDuration(mediaMetadata.duration)
       }) : null,
       mediaDetailLines.map((line2) => {
         return /* @__PURE__ */ jsx118(InspectorInfoSubtitle, {
+          size: contentSized ? "default" : "inspector",
           children: line2
         }, line2);
       })
@@ -29147,31 +29247,6 @@ var inspectorSectionBody = {
   minWidth: 0,
   paddingBottom: 8
 };
-var sequenceHeader = {
-  backgroundColor: BACKGROUND,
-  display: "flex",
-  flexDirection: "column",
-  minWidth: 0,
-  padding: `6px ${INSPECTOR_PANEL_HORIZONTAL_PADDING}px 4px`
-};
-var sequenceHeaderTitle = {
-  alignSelf: "stretch",
-  backgroundColor: BACKGROUND,
-  border: "none",
-  color: 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"
-};
 var sequenceHeaderSubtitle = {
   alignSelf: "flex-start",
   backgroundColor: BACKGROUND,
@@ -29278,7 +29353,11 @@ var detailRow = {
 };
 var detailLabel = {
   color: LIGHT_TEXT,
-  fontSize: 13
+  fontSize: 13,
+  minWidth: 0,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
 };
 var detailValue = {
   color: WHITE,
@@ -29289,22 +29368,8 @@ var detailValue = {
   wordBreak: "break-word"
 };
 var keyframeEditorRow = {
-  alignItems: "flex-start",
-  display: "flex",
-  gap: 12,
-  justifyContent: "space-between",
-  minWidth: 0,
   padding: "10px 0"
 };
-var keyframeEditorLabel = {
-  color: LIGHT_TEXT,
-  fontSize: 13,
-  lineHeight: "22px",
-  minWidth: 0,
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap"
-};
 var keyframeEditorValue = {
   alignItems: "center",
   display: "flex",
@@ -29370,13 +29435,13 @@ var label5 = {
   whiteSpace: "normal",
   overflowWrap: "anywhere"
 };
-var compactLabel = {
+var compactLabel2 = {
   ...label5,
   fontSize: 12
 };
 var ValidationMessage = ({ message, align, type, action, size: size2 = "default" }) => {
   const iconStyle3 = size2 === "compact" ? compactStyle : style5;
-  const labelStyle4 = size2 === "compact" ? compactLabel : label5;
+  const labelStyle4 = size2 === "compact" ? compactLabel2 : label5;
   const finalStyle = useMemo68(() => {
     return {
       ...iconStyle3,
@@ -29445,45 +29510,32 @@ var InspectorSection = ({ children, header: header2 }) => {
     ]
   });
 };
-var backIcon = {
-  alignItems: "center",
-  display: "flex",
-  height: 12,
-  justifyContent: "center",
-  width: 12
+var backArrowIcon = {
+  display: "block",
+  height: 15,
+  width: 15
 };
-var BackChevron = ({ color }) => {
+var BackArrow = ({ color }) => {
   return /* @__PURE__ */ jsx121("svg", {
-    viewBox: "0 0 8 12",
-    style: backIcon,
+    viewBox: "0 0 512 512",
+    style: backArrowIcon,
     children: /* @__PURE__ */ jsx121("path", {
-      d: "M6 1L2 6L6 11",
-      fill: "none",
-      stroke: color,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: "1.5"
+      d: "M7 239c-9.4 9.4-9.4 24.6 0 33.9L175 441c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L81.9 280 488 280c13.3 0 24-10.7 24-24s-10.7-24-24-24L81.9 232 209 105c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L7 239z",
+      fill: color
     })
   });
 };
-var InspectorBackHeader = ({ children, disabled, onClick, title: title2 }) => {
-  return /* @__PURE__ */ jsx121(InspectorSectionHeader, {
-    children: /* @__PURE__ */ jsx121("div", {
-      style: sectionHeaderRow,
-      children: /* @__PURE__ */ jsxs55("div", {
-        style: sectionHeaderStart,
-        children: [
-          /* @__PURE__ */ jsx121(InlineAction, {
-            disabled,
-            onClick,
-            title: title2,
-            renderAction: (color) => /* @__PURE__ */ jsx121(BackChevron, {
-              color
-            })
-          }),
-          children
-        ]
-      })
+var InspectorBackAction = ({ children, disabled, onClick, title: title2 }) => {
+  return /* @__PURE__ */ jsx121("div", {
+    style: inspectorActionSection,
+    children: /* @__PURE__ */ jsx121(InspectorInlineAction, {
+      disabled,
+      onClick,
+      renderIcon: (color) => /* @__PURE__ */ jsx121(BackArrow, {
+        color
+      }),
+      title: title2,
+      children
     })
   });
 };
@@ -29521,7 +29573,7 @@ var inlineLabelButton = {
   height: COMPACT_CONTROL_ROW_HEIGHT,
   lineHeight: "18px",
   margin: `0 ${INLINE_LABEL_BUTTON_MARGIN}px`,
-  padding: `5px ${INSPECTOR_PANEL_HORIZONTAL_PADDING - INLINE_LABEL_BUTTON_MARGIN}px`,
+  padding: `0 ${INSPECTOR_PANEL_HORIZONTAL_PADDING - INLINE_LABEL_BUTTON_MARGIN}px`,
   textAlign: "left",
   width: `calc(100% - ${INLINE_LABEL_BUTTON_MARGIN * 2}px)`
 };
@@ -29529,6 +29581,9 @@ var inlineLabelButtonDisabled = {
   ...inlineLabelButton,
   opacity: 0.35
 };
+var compactInlineLabelButton = {
+  height: COMPACT_INLINE_ROW_HEIGHT
+};
 var inlineLabelText = {
   color: LIGHT_TEXT,
   flex: 1,
@@ -29548,7 +29603,15 @@ var inlineLabelIcon = {
   justifyContent: "center",
   width: 18
 };
-var InspectorInlineAction = ({ children, disabled, onClick, renderIcon, style: style6 }) => {
+var InspectorInlineAction = ({
+  children,
+  disabled,
+  onClick,
+  renderIcon,
+  size: size2 = "default",
+  style: style6,
+  title: title2
+}) => {
   const [hovered, setHovered] = React81.useState(false);
   const color = hovered && !disabled ? WHITE : LIGHT_TEXT;
   const buttonStyle3 = React81.useMemo(() => ({
@@ -29558,8 +29621,9 @@ var InspectorInlineAction = ({ children, disabled, onClick, renderIcon, style: s
       selected: false
     }),
     color,
+    ...size2 === "compact" ? compactInlineLabelButton : null,
     ...style6
-  }), [color, disabled, hovered, style6]);
+  }), [color, disabled, hovered, size2, style6]);
   const textStyle2 = React81.useMemo(() => ({
     ...inlineLabelText,
     color
@@ -29571,17 +29635,19 @@ var InspectorInlineAction = ({ children, disabled, onClick, renderIcon, style: s
     setHovered(false);
   }, []);
   return /* @__PURE__ */ jsxs55("button", {
+    className: "__remotion-inspector-inline-action",
     type: "button",
     disabled,
     style: buttonStyle3,
+    title: title2,
     onClick,
     onPointerEnter: disabled ? undefined : onPointerEnter,
     onPointerLeave,
     children: [
-      /* @__PURE__ */ jsx121("span", {
+      renderIcon ? /* @__PURE__ */ jsx121("span", {
         style: inlineLabelIcon,
         children: renderIcon(color)
-      }),
+      }) : null,
       /* @__PURE__ */ jsx121("span", {
         style: textStyle2,
         children
@@ -33076,7 +33142,7 @@ var ZodEnumEditor = ({ schema, jsonPath, setValue, value, onRemove }) => {
           values: comboBoxValues,
           selectedId: value,
           title: value,
-          small: true
+          size: "small"
         })
       }),
       /* @__PURE__ */ jsx152(ZodFieldValidation, {
@@ -33479,7 +33545,7 @@ var ZodStaticFileEditor = ({ schema, jsonPath, setValue, value, onRemove, mayPad
           values: comboBoxValues,
           selectedId: value,
           title: value,
-          small: true
+          size: "small"
         })
       }),
       /* @__PURE__ */ jsx159(ZodFieldValidation, {
@@ -34136,7 +34202,7 @@ var ZodDiscriminatedUnionEditor = ({ schema, setValue, value, mayPad, jsonPath,
             title: "Select type",
             values: comboBoxValues,
             selectedId: value[discriminator],
-            small: true
+            size: "small"
           })
         ]
       }, "replacement")
@@ -35281,7 +35347,8 @@ var InlineCompositionName = ({ compositionId, stack: stack2, compositions }) =>
   return /* @__PURE__ */ jsx177(InlineEditableTitle, {
     value: compositionId,
     canRename,
-    onCommit: commit
+    onCommit: commit,
+    size: "inspector"
   });
 };
 
@@ -35305,8 +35372,8 @@ var content5 = {
 var action = {
   flexShrink: 0,
   height: 24,
-  marginLeft: 4,
-  marginRight: -4
+  marginLeft: 0,
+  marginRight: 4
 };
 var icon3 = {
   flexShrink: 0,
@@ -35403,7 +35470,7 @@ var sourceLocationLabelStyle = {
   textOverflow: "ellipsis",
   whiteSpace: "nowrap"
 };
-var InspectorSourceLocation = ({ location: location2, canOpen, onOpen, renderIcon }) => {
+var InspectorSourceLocation = ({ location: location2, canOpen, onOpen, renderIcon, size: size2 = "default" }) => {
   const [hovered, setHovered] = useState69(false);
   const validLocation = useMemo106(() => {
     if (!location2?.source || location2.line === null) {
@@ -35443,6 +35510,16 @@ var InspectorSourceLocation = ({ location: location2, canOpen, onOpen, renderIco
   if (!label7) {
     return null;
   }
+  if (size2 === "inline-action") {
+    return /* @__PURE__ */ jsx179(InspectorInlineAction, {
+      disabled: !canOpen,
+      onClick,
+      renderIcon: (iconColor) => renderIcon?.(iconColor),
+      size: "compact",
+      title: fileLocation ?? undefined,
+      children: label7
+    });
+  }
   return /* @__PURE__ */ jsxs92("button", {
     type: "button",
     style: style8,
@@ -35461,12 +35538,16 @@ var InspectorSourceLocation = ({ location: location2, canOpen, onOpen, renderIco
 };
 
 // src/components/InspectorPanel/CompositionInspectorHeader.tsx
-import { jsx as jsx180, jsxs as jsxs93, Fragment as Fragment28 } from "react/jsx-runtime";
+import { jsx as jsx180, jsxs as jsxs93 } from "react/jsx-runtime";
 var COMPOSITION_INSPECTOR_HEADER_HEIGHT = 66;
 var sourceLocationIconStyle = {
   flexShrink: 0,
-  height: 13,
-  width: 13
+  height: 18,
+  width: 18
+};
+var componentLocationPlaceholder = {
+  flexShrink: 0,
+  height: COMPACT_INLINE_ROW_HEIGHT
 };
 var renderReactIcon = (color) => {
   return /* @__PURE__ */ jsx180(ReactIcon, {
@@ -35540,34 +35621,33 @@ var CompositionInspectorHeader = () => {
   }, [video]);
   return /* @__PURE__ */ jsx180(InspectorInfoHeader, {
     minHeight: COMPOSITION_INSPECTOR_HEADER_HEIGHT,
-    children: video ? /* @__PURE__ */ jsxs93(Fragment28, {
+    padding: "4px 0",
+    children: video ? /* @__PURE__ */ jsxs93(InspectorLocationCopy, {
+      location: validatedLocation,
+      name: video.id,
       children: [
-        /* @__PURE__ */ jsxs93(InspectorLocationCopy, {
+        /* @__PURE__ */ jsx180(InlineCompositionName, {
+          compositionId: video.id,
+          stack: currentComposition?.stack ?? null,
+          compositions
+        }, video.id),
+        /* @__PURE__ */ jsx180(InspectorSourceLocation, {
           location: validatedLocation,
-          name: video.id,
-          children: [
-            /* @__PURE__ */ jsx180(InlineCompositionName, {
-              compositionId: video.id,
-              stack: currentComposition?.stack ?? null,
-              compositions
-            }, video.id),
-            /* @__PURE__ */ jsx180(InspectorSourceLocation, {
-              location: validatedLocation,
-              canOpen: validatedLocation !== null,
-              onOpen: openFileLocation,
-              renderIcon: renderCompositionIcon
-            }),
-            /* @__PURE__ */ jsx180(InspectorSourceLocation, {
-              location: componentLocation,
-              canOpen: componentLocation !== null,
-              onOpen: openComponentLocation,
-              renderIcon: renderReactIcon
-            })
-          ]
+          canOpen: validatedLocation !== null,
+          onOpen: openFileLocation,
+          renderIcon: renderCompositionIcon,
+          size: "inline-action"
         }),
-        isCompositionStill(video) ? /* @__PURE__ */ jsx180(InspectorInfoSubtitle, {
-          children: "Still"
-        }) : null
+        compositionComponentInfo === null && compositionFile !== null && compositionId !== null ? /* @__PURE__ */ jsx180("div", {
+          "aria-hidden": true,
+          style: componentLocationPlaceholder
+        }) : /* @__PURE__ */ jsx180(InspectorSourceLocation, {
+          location: componentLocation,
+          canOpen: componentLocation !== null,
+          onOpen: openComponentLocation,
+          renderIcon: renderReactIcon,
+          size: "inline-action"
+        })
       ]
     }) : null
   });
@@ -35630,7 +35710,7 @@ var reconcilePendingCompositionMetadata = ({
 };
 
 // src/components/InspectorPanel/CompositionMetadata.tsx
-import { jsx as jsx181, jsxs as jsxs94, Fragment as Fragment29 } from "react/jsx-runtime";
+import { jsx as jsx181, jsxs as jsxs94, Fragment as Fragment28 } from "react/jsx-runtime";
 var compositionMetadataContainer = {
   ...detailsContainer,
   paddingBottom: 4,
@@ -35850,7 +35930,7 @@ var CompositionMetadata = ({ compositionId, disabled, stack: stack2 }) => {
           ]
         })
       }),
-      isStill ? null : /* @__PURE__ */ jsxs94(Fragment29, {
+      isStill ? null : /* @__PURE__ */ jsxs94(Fragment28, {
         children: [
           /* @__PURE__ */ jsx181(InspectorDetailRow, {
             label: "Frame rate",
@@ -35978,7 +36058,7 @@ var useCompositionActions = () => {
 };
 
 // src/components/InspectorPanel/CompositionInspector.tsx
-import { jsx as jsx182, jsxs as jsxs95, Fragment as Fragment30 } from "react/jsx-runtime";
+import { jsx as jsx182, jsxs as jsxs95, Fragment as Fragment29 } from "react/jsx-runtime";
 var actionIconStyle = {
   height: 18,
   width: 18
@@ -36066,7 +36146,7 @@ var CompositionDefaultPropsSection = ({ composition, currentDefaultProps, setDef
   if (!canShowDefaultPropsSection) {
     return null;
   }
-  return /* @__PURE__ */ jsxs95(Fragment30, {
+  return /* @__PURE__ */ jsxs95(Fragment29, {
     children: [
       /* @__PURE__ */ jsx182(InspectorSectionDivider, {}),
       /* @__PURE__ */ jsxs95("div", {
@@ -36134,7 +36214,7 @@ var CompositionVisualControlsSection = () => {
   if (!hasVisualControls) {
     return null;
   }
-  return /* @__PURE__ */ jsxs95(Fragment30, {
+  return /* @__PURE__ */ jsxs95(Fragment29, {
     children: [
       /* @__PURE__ */ jsx182(InspectorSectionDivider, {}),
       /* @__PURE__ */ jsxs95("div", {
@@ -36237,7 +36317,7 @@ import {
   useState as useState73
 } from "react";
 import { Easing, Internals as Internals54 } from "remotion";
-import { jsx as jsx183, jsxs as jsxs96, Fragment as Fragment31 } from "react/jsx-runtime";
+import { jsx as jsx183, jsxs as jsxs96, Fragment as Fragment30 } from "react/jsx-runtime";
 var SVG_WIDTH = 560;
 var SVG_HEIGHT = 320;
 var PLOT_LEFT = 42;
@@ -36577,7 +36657,7 @@ var EasingGraphScaffold = ({ labels }) => {
   const yOne = yToSvg(1);
   const bottomLabelWidth = getEasingGraphLabelWidth(labels.start);
   const topLabelWidth = getEasingGraphLabelWidth(labels.end);
-  return /* @__PURE__ */ jsxs96(Fragment31, {
+  return /* @__PURE__ */ jsxs96(Fragment30, {
     children: [
       /* @__PURE__ */ jsx183("line", {
         x1: PLOT_LEFT,
@@ -36995,7 +37075,7 @@ var EasingEditor = ({ state, renderHeader }) => {
           preset
         }, preset.id))
       }),
-      mode === "bezier" ? /* @__PURE__ */ jsxs96(Fragment31, {
+      mode === "bezier" ? /* @__PURE__ */ jsxs96(Fragment30, {
         children: [
           /* @__PURE__ */ jsxs96("svg", {
             ref: svgRef,
@@ -37195,7 +37275,7 @@ var EasingEditor = ({ state, renderHeader }) => {
             ]
           })
         ]
-      }) : /* @__PURE__ */ jsxs96(Fragment31, {
+      }) : /* @__PURE__ */ jsxs96(Fragment30, {
         children: [
           /* @__PURE__ */ jsxs96("svg", {
             width: SVG_WIDTH,
@@ -38227,7 +38307,7 @@ var useTimelineEasingKeyframeDrag = ({
 };
 
 // src/components/Timeline/TimelineKeyframeEasingLine.tsx
-import { jsx as jsx186, jsxs as jsxs98, Fragment as Fragment32 } from "react/jsx-runtime";
+import { jsx as jsx186, jsxs as jsxs98, Fragment as Fragment31 } from "react/jsx-runtime";
 var hitTargetHeight = 12;
 var lineHeight2 = 2;
 var easingLineButton = {
@@ -38378,7 +38458,7 @@ var TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, nod
   if (style8 === null) {
     return null;
   }
-  return /* @__PURE__ */ jsxs98(Fragment32, {
+  return /* @__PURE__ */ jsxs98(Fragment31, {
     children: [
       /* @__PURE__ */ jsx186("button", {
         ref: buttonRef,
@@ -38662,7 +38742,7 @@ import {
   useState as useState75
 } from "react";
 import { Internals as Internals58 } from "remotion";
-import { jsx as jsx188, jsxs as jsxs100, Fragment as Fragment33 } from "react/jsx-runtime";
+import { jsx as jsx188, jsxs as jsxs100, Fragment as Fragment32 } from "react/jsx-runtime";
 var comboStyle2 = {
   minWidth: 120
 };
@@ -38790,7 +38870,7 @@ var KeyframeSettings = ({ update }) => {
   const posterizeFormatter = useCallback105((value) => {
     return String(Math.round(Number(value)));
   }, []);
-  return /* @__PURE__ */ jsxs100(Fragment33, {
+  return /* @__PURE__ */ jsxs100(Fragment32, {
     children: [
       /* @__PURE__ */ jsx188(InspectorSectionHeader, {
         children: "Keyframe settings"
@@ -38798,7 +38878,7 @@ var KeyframeSettings = ({ update }) => {
       /* @__PURE__ */ jsxs100("div", {
         style: keyframeSettingsContainer,
         children: [
-          canEditInterpolationSettings ? /* @__PURE__ */ jsxs100(Fragment33, {
+          canEditInterpolationSettings ? /* @__PURE__ */ jsxs100(Fragment32, {
             children: [
               /* @__PURE__ */ jsx188(InspectorDetailRow, {
                 label: "Extrapolate left",
@@ -38807,7 +38887,7 @@ var KeyframeSettings = ({ update }) => {
                   selectedId: propStatus.clamping.left,
                   title: "Extrapolate left",
                   style: comboStyle2,
-                  small: true
+                  size: "small"
                 })
               }),
               /* @__PURE__ */ jsx188(InspectorDetailRow, {
@@ -38817,7 +38897,7 @@ var KeyframeSettings = ({ update }) => {
                   selectedId: propStatus.clamping.right,
                   title: "Extrapolate right",
                   style: comboStyle2,
-                  small: true
+                  size: "small"
                 })
               }),
               /* @__PURE__ */ jsx188(InspectorDetailRow, {
@@ -38827,7 +38907,7 @@ var KeyframeSettings = ({ update }) => {
                   selectedId: propStatus.output ?? "linear",
                   title: "Output",
                   style: comboStyle2,
-                  small: true
+                  size: "small"
                 })
               })
             ]
@@ -39077,7 +39157,32 @@ var ConnectedCompositionsSection = ({ connectedCompositions }) => {
 };
 
 // src/components/InspectorPanel/SequenceInspectorHeader.tsx
-import { jsx as jsx190, jsxs as jsxs101, Fragment as Fragment34 } from "react/jsx-runtime";
+import { jsx as jsx190, jsxs as jsxs101, Fragment as Fragment33 } from "react/jsx-runtime";
+var sourceLocationIconStyle2 = {
+  flexShrink: 0,
+  height: 18,
+  width: 18
+};
+var renderReactIcon2 = (color) => {
+  return /* @__PURE__ */ jsx190(ReactIcon, {
+    color,
+    style: sourceLocationIconStyle2
+  });
+};
+var sequenceInspectorSubtitle = {
+  ...sequenceHeaderSubtitle,
+  alignItems: "center",
+  boxSizing: "border-box",
+  fontSize: 13,
+  height: COMPACT_INLINE_ROW_HEIGHT,
+  lineHeight: "18px",
+  margin: "0 4px",
+  padding: "0 8px",
+  width: "calc(100% - 8px)"
+};
+var defaultCursor = {
+  cursor: "default"
+};
 var useSequenceInspectorSourceLocation = (sequence) => {
   const { canOpenInEditor, openInEditor: openInEditor2, originalLocation } = useOpenSequenceInEditor(sequence);
   const validatedLocation = useMemo119(() => {
@@ -39120,7 +39225,7 @@ var SequenceInspectorHeader = ({ sourceLocation, track }) => {
   }, [documentationLink]);
   const subtitleStyle = useMemo119(() => {
     return {
-      ...sequenceHeaderSubtitle,
+      ...sequenceInspectorSubtitle,
       cursor: documentationLink ? "pointer" : "default"
     };
   }, [documentationLink]);
@@ -39130,23 +39235,23 @@ var SequenceInspectorHeader = ({ sourceLocation, track }) => {
       return;
     });
   }, [saveName]);
-  return /* @__PURE__ */ jsx190("div", {
-    style: sequenceHeader,
+  return /* @__PURE__ */ jsx190(InspectorInfoHeader, {
+    contentSized: true,
+    padding: "4px 0",
     children: /* @__PURE__ */ jsxs101(InspectorLocationCopy, {
       location: sourceLocation.validatedLocation,
       name: componentName ?? null,
       children: [
-        /* @__PURE__ */ jsx190("div", {
-          style: sequenceHeaderTitle,
-          children: /* @__PURE__ */ jsx190(InlineEditableTitle, {
-            value: sequenceDisplayName,
-            canRename,
-            onCommit: onRename
-          })
+        /* @__PURE__ */ jsx190(InlineEditableTitle, {
+          value: sequenceDisplayName,
+          canRename,
+          onCommit: onRename,
+          size: "inspector"
         }),
-        documentationLink ? /* @__PURE__ */ jsx190("button", {
-          type: "button",
-          style: subtitleStyle,
+        documentationLink ? /* @__PURE__ */ jsx190(InspectorInlineAction, {
+          disabled: false,
+          style: defaultCursor,
+          size: "compact",
           title: "Open component docs",
           onClick: openDocumentationLink,
           children: componentName
@@ -39157,7 +39262,9 @@ var SequenceInspectorHeader = ({ sourceLocation, track }) => {
         /* @__PURE__ */ jsx190(InspectorSourceLocation, {
           location: sourceLocation.validatedLocation,
           canOpen: sourceLocation.canOpenInEditor,
-          onOpen: sourceLocation.openFileLocation
+          onOpen: sourceLocation.openFileLocation,
+          renderIcon: renderReactIcon2,
+          size: "inline-action"
         })
       ]
     })
@@ -39166,13 +39273,13 @@ var SequenceInspectorHeader = ({ sourceLocation, track }) => {
 var SequenceInspectorSections = ({ track }) => {
   const sourceLocation = useSequenceInspectorSourceLocation(track.sequence);
   const connectedCompositions = useConnectedCompositions({ track });
-  return /* @__PURE__ */ jsxs101(Fragment34, {
+  return /* @__PURE__ */ jsxs101(Fragment33, {
     children: [
       /* @__PURE__ */ jsx190(SequenceInspectorHeader, {
         sourceLocation,
         track
       }),
-      connectedCompositions.length > 0 ? /* @__PURE__ */ jsxs101(Fragment34, {
+      connectedCompositions.length > 0 ? /* @__PURE__ */ jsxs101(Fragment33, {
         children: [
           /* @__PURE__ */ jsx190(InspectorSectionDivider, {}),
           /* @__PURE__ */ jsx190(ConnectedCompositionsSection, {
@@ -39203,7 +39310,7 @@ var useTrackForSelection = (selection) => {
 };
 
 // src/components/InspectorPanel/EasingInspector.tsx
-import { jsx as jsx191, jsxs as jsxs102, Fragment as Fragment35 } from "react/jsx-runtime";
+import { jsx as jsx191, jsxs as jsxs102, Fragment as Fragment34 } from "react/jsx-runtime";
 var addKeyframeIcon = {
   display: "block",
   height: 18,
@@ -39373,16 +39480,13 @@ var EasingInspector = ({ selection }) => {
     timelinePosition,
     track
   ]);
-  const renderHeader = useCallback109(() => /* @__PURE__ */ jsxs102(Fragment35, {
+  const renderHeader = useCallback109(() => /* @__PURE__ */ jsxs102(Fragment34, {
     children: [
-      /* @__PURE__ */ jsx191(InspectorBackHeader, {
+      /* @__PURE__ */ jsx191(InspectorBackAction, {
         disabled: parentSelection === null,
         onClick: onSelectParent,
         title: "Back to property",
-        children: /* @__PURE__ */ jsx191("div", {
-          style: sectionHeaderTitle,
-          children: fieldLabel
-        })
+        children: fieldLabel
       }),
       /* @__PURE__ */ jsx191(InspectorSectionDivider, {}),
       easingUpdate === null || track === null ? null : /* @__PURE__ */ jsx191(KeyframeEasingNavigator, {
@@ -39731,11 +39835,17 @@ import { useContext as useContext71, useMemo as useMemo123 } from "react";
 import { createContext as createContext26 } from "react";
 var INSPECTOR_TIMELINE_ROW_LAYOUT = {
   basePadding: INSPECTOR_ROW_BASE_PADDING,
-  keyframeControlsPadding: 0
+  highlightSelectedLabel: false,
+  keyframeControlsPadding: 0,
+  rowBorderRadius: 4,
+  rowHorizontalMargin: 4
 };
 var TimelineRowLayoutContext = createContext26({
   basePadding: TIMELINE_ROW_BASE_PADDING,
-  keyframeControlsPadding: TIMELINE_ROW_BASE_PADDING
+  highlightSelectedLabel: true,
+  keyframeControlsPadding: TIMELINE_ROW_BASE_PADDING,
+  rowBorderRadius: 0,
+  rowHorizontalMargin: 0
 });
 
 // src/components/Timeline/TimelineFieldLabel.tsx
@@ -39751,13 +39861,13 @@ var fieldNameBase = {
   minWidth: 0
 };
 var TimelineFieldLabel = ({ rowDepth, selected, label: label7, stacked = false }) => {
-  const { basePadding } = useContext71(TimelineRowLayoutContext);
+  const { basePadding, highlightSelectedLabel } = useContext71(TimelineRowLayoutContext);
   const labelRowStyle = useMemo123(() => ({
     ...getTimelineFieldLabelRowStyle(rowDepth, basePadding),
-    ...getTimelineSelectedLabelStyle(selected, true),
+    ...getTimelineSelectedLabelStyle(selected && highlightSelectedLabel, true),
     ...stacked ? { flex: `0 0 ${SCHEMA_FIELD_ROW_HEIGHT}px` } : null,
     alignSelf: "stretch"
-  }), [basePadding, rowDepth, selected, stacked]);
+  }), [basePadding, highlightSelectedLabel, rowDepth, selected, stacked]);
   const fieldNameStyle = useMemo123(() => ({
     ...fieldNameBase,
     color: getTimelineColor(selected, true)
@@ -39773,7 +39883,7 @@ var TimelineFieldLabel = ({ rowDepth, selected, label: label7, stacked = false }
 };
 
 // src/components/Timeline/TimelineFieldRowContent.tsx
-import { jsx as jsx195, jsxs as jsxs104, Fragment as Fragment36 } from "react/jsx-runtime";
+import { jsx as jsx195, jsxs as jsxs104, Fragment as Fragment35 } from "react/jsx-runtime";
 var TimelineFieldRowContent = ({ field, rowDepth, selected, children }) => {
   const label7 = /* @__PURE__ */ jsx195(TimelineFieldLabel, {
     rowDepth,
@@ -39794,7 +39904,7 @@ var TimelineFieldRowContent = ({ field, rowDepth, selected, children }) => {
       ]
     });
   }
-  return /* @__PURE__ */ jsxs104(Fragment36, {
+  return /* @__PURE__ */ jsxs104(Fragment35, {
     children: [
       label7,
       value
@@ -39849,6 +39959,9 @@ var useTimelineKeyframeTracks = () => {
 
 // src/components/Timeline/TimelineKeyframeControls.tsx
 import { jsx as jsx197, jsxs as jsxs105 } from "react/jsx-runtime";
+var NAV_BUTTON_SIZE = 14;
+var INSPECTOR_NAV_BUTTON_WIDTH = NAV_BUTTON_SIZE / 2;
+var INSPECTOR_PREVIOUS_BUTTON_EXTRA_GAP = 1;
 var controlsContainerStyle = {
   alignItems: "center",
   display: "flex",
@@ -39856,6 +39969,10 @@ var controlsContainerStyle = {
   gap: 1,
   marginRight: 4
 };
+var inspectorControlsContainerStyle = {
+  ...controlsContainerStyle,
+  paddingLeft: NAV_BUTTON_SIZE - INSPECTOR_NAV_BUTTON_WIDTH - INSPECTOR_PREVIOUS_BUTTON_EXTRA_GAP
+};
 var navButtonStyle = {
   alignItems: "center",
   background: "none",
@@ -39864,13 +39981,20 @@ var 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
+};
+var inspectorNavButtonStyle = {
+  width: INSPECTOR_NAV_BUTTON_WIDTH
+};
+var inspectorPreviousNavButtonStyle = {
+  ...inspectorNavButtonStyle,
+  marginRight: INSPECTOR_PREVIOUS_BUTTON_EXTRA_GAP
 };
 var isKeyframedStatus = (status) => {
   return status.status === "keyframed";
@@ -39879,7 +40003,7 @@ var diamondButtonStyle = {
   ...navButtonStyle,
   background: "none"
 };
-var svgStyle4 = { display: "block" };
+var svgStyle4 = { display: "block", flexShrink: 0 };
 var isKeyframeControlSelection = (selection) => {
   return selection.type === "sequence-prop" || selection.type === "sequence-effect-prop";
 };
@@ -40298,16 +40422,18 @@ var TimelineKeyframeControls = ({
   const nextDisabled = nextDisplayFrame === null;
   const previousStyle = useMemo124(() => ({
     ...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 = useMemo124(() => ({
     ...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 = useMemo124(() => ({
     ...diamondButtonStyle,
     cursor: canToggleKeyframe && clientId ? "pointer" : "default",
@@ -40315,7 +40441,7 @@ var TimelineKeyframeControls = ({
   }), [canToggleKeyframe, clientId]);
   const diamondColor = hasKeyframeAtCurrentFrame ? BLUE : LIGHT_TEXT;
   return /* @__PURE__ */ jsxs105("div", {
-    style: controlsContainerStyle,
+    style: mode === "inspector" ? inspectorControlsContainerStyle : controlsContainerStyle,
     children: [
       /* @__PURE__ */ jsx197("button", {
         type: "button",
@@ -40486,7 +40612,7 @@ var TimelineStaticFileAssetField = ({
     ];
   }, [current, onSelect, staticFiles, upload]);
   return /* @__PURE__ */ jsx198(Combobox, {
-    small: true,
+    size: "small",
     title: current,
     selectedId: current,
     values: items,
@@ -40630,7 +40756,7 @@ var TimelineEnumField = ({
     }));
   }, [variantKeys, onSelect]);
   return /* @__PURE__ */ jsx201(Combobox, {
-    small: true,
+    size: "small",
     title: field.key,
     selectedId: current,
     values: items,
@@ -42154,7 +42280,7 @@ var GOOGLE_FONTS_LIST = [
 ];
 
 // src/components/Timeline/TimelineFontFamilyField.tsx
-import { jsx as jsx202, jsxs as jsxs106, Fragment as Fragment37 } from "react/jsx-runtime";
+import { jsx as jsx202, jsxs as jsxs106, Fragment as Fragment36 } from "react/jsx-runtime";
 var ROW_HEIGHT = 30;
 var LIST_HEIGHT = 280;
 var OVERSCAN = 10;
@@ -42644,7 +42770,7 @@ var TimelineFontFamilyField = ({
     };
   }, [hovered, opened]);
   const selectedPreviewStyle = getOptionPreviewStyle(selected);
-  return /* @__PURE__ */ jsxs106(Fragment37, {
+  return /* @__PURE__ */ jsxs106(Fragment36, {
     children: [
       /* @__PURE__ */ jsxs106("button", {
         ref: buttonRef,
@@ -44135,7 +44261,7 @@ var Padder = ({ depth }) => {
 };
 
 // src/components/Timeline/TimelineRowChrome.tsx
-import { jsx as jsx214, jsxs as jsxs112, Fragment as Fragment38 } from "react/jsx-runtime";
+import { jsx as jsx214, jsxs as jsxs112, Fragment as Fragment37 } from "react/jsx-runtime";
 var rowBase = {
   alignItems: "stretch",
   display: "flex"
@@ -44172,7 +44298,12 @@ var TimelineRowChrome = ({
   onDoubleClick
 }) => {
   const ref2 = useRef53(null);
-  const { basePadding, keyframeControlsPadding } = useContext74(TimelineRowLayoutContext);
+  const {
+    basePadding,
+    keyframeControlsPadding,
+    rowBorderRadius,
+    rowHorizontalMargin
+  } = useContext74(TimelineRowLayoutContext);
   const indentWidth = getTimelineRowIndentWidth(depth);
   useTimelineFocusableItem(selectionItem, ref2);
   const keyframeControlsColumnStyle = useMemo136(() => ({
@@ -44209,8 +44340,16 @@ var TimelineRowChrome = ({
   const innerRowStyle = useMemo136(() => ({
     ...rowBase,
     ...style8,
-    backgroundColor: outerHeight === null ? highlightBackground : undefined
-  }), [style8, outerHeight, highlightBackground]);
+    backgroundColor: outerHeight === null ? highlightBackground : undefined,
+    borderRadius: rowBorderRadius,
+    margin: `0 ${rowHorizontalMargin}px`
+  }), [
+    style8,
+    outerHeight,
+    highlightBackground,
+    rowBorderRadius,
+    rowHorizontalMargin
+  ]);
   const outerStyle = useMemo136(() => {
     if (outerHeight === null) {
       return;
@@ -44224,7 +44363,7 @@ var TimelineRowChrome = ({
       backgroundColor: highlightBackground
     };
   }, [outerHeight, highlightBackground]);
-  const chrome = /* @__PURE__ */ jsxs112(Fragment38, {
+  const chrome = /* @__PURE__ */ jsxs112(Fragment37, {
     children: [
       /* @__PURE__ */ jsx214("div", {
         style: leftChromeStyle,
@@ -45131,8 +45270,8 @@ var makeMovedKeyframedDragOverride2 = ({
 var removeKeyframeIcon = {
   display: "block",
   flexShrink: 0,
-  height: 18,
-  width: 18
+  height: 16,
+  width: 16
 };
 var TrashIcon = ({ color }) => {
   return /* @__PURE__ */ jsx217("svg", {
@@ -45140,7 +45279,7 @@ var TrashIcon = ({ color }) => {
     style: removeKeyframeIcon,
     children: /* @__PURE__ */ jsx217("path", {
       fill: color,
-      d: "M136.7 5.9C141.1-7.2 153.3-16 167.1-16l113.9 0c13.8 0 26 8.8 30.4 21.9L320 32 416 32c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 96C14.3 96 0 81.7 0 64S14.3 32 32 32l96 0 8.7-26.1zM32 144l384 0 0 304c0 35.3-28.7 64-64 64L96 512c-35.3 0-64-28.7-64-64l0-304zm88 64c-13.3 0-24 10.7-24 24l0 192c0 13.3 10.7 24 24 24s24-10.7 24-24l0-192c0-13.3-10.7-24-24-24zm104 0c-13.3 0-24 10.7-24 24l0 192c0 13.3 10.7 24 24 24s24-10.7 24-24l0-192c0-13.3-10.7-24-24-24zm104 0c-13.3 0-24 10.7-24 24l0 192c0 13.3 10.7 24 24 24s24-10.7 24-24l0-192c0-13.3-10.7-24-24-24z"
+      d: "M160.5 27.4c2-6.8 8.3-11.4 15.3-11.4l96.4 0c7.1 0 13.3 4.6 15.3 11.4l11 36.6-149 0 11-36.6zM116.1 64L16 64C7.2 64 0 71.2 0 80S7.2 96 16 96l416 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-100.1 0-13.7-45.8C312.1-2.1 293.4-16 272.2-16l-96.4 0c-21.2 0-39.9 13.9-46 34.2L116.1 64zM28.7 144L51.6 452.7c2.5 33.4 30.3 59.3 63.8 59.3l217.1 0c33.5 0 61.3-25.9 63.8-59.3l22.9-308.7-32.1 0-22.7 306.4c-1.2 16.7-15.2 29.6-31.9 29.6l-217.1 0c-16.8 0-30.7-12.9-31.9-29.6L60.8 144 28.7 144z"
     })
   });
 };
@@ -45426,14 +45565,11 @@ var KeyframeInspector = ({ selection }) => {
         track
       }),
       /* @__PURE__ */ jsx217(InspectorSectionDivider, {}),
-      /* @__PURE__ */ jsx217(InspectorBackHeader, {
+      /* @__PURE__ */ jsx217(InspectorBackAction, {
         disabled: parentSelection === null,
         onClick: onSelectParent,
         title: "Back to property",
-        children: /* @__PURE__ */ jsx217("div", {
-          style: sectionHeaderTitle,
-          children: details.fieldLabel
-        })
+        children: details.fieldLabel
       }),
       /* @__PURE__ */ jsx217(InspectorSectionDivider, {}),
       /* @__PURE__ */ jsx217(KeyframeEasingNavigator, {
@@ -45470,14 +45606,11 @@ var KeyframeInspector = ({ selection }) => {
                   small: true
                 })
               }),
-              /* @__PURE__ */ jsxs113("div", {
+              /* @__PURE__ */ jsx217("div", {
                 style: keyframeEditorRow,
-                children: [
-                  /* @__PURE__ */ jsx217("div", {
-                    style: keyframeEditorLabel,
-                    children: details.fieldLabel
-                  }),
-                  /* @__PURE__ */ jsx217("div", {
+                children: /* @__PURE__ */ jsx217(InspectorDetailRow, {
+                  label: details.fieldLabel,
+                  children: /* @__PURE__ */ jsx217("div", {
                     style: keyframeEditorValue,
                     children: details.type === "sequence" ? /* @__PURE__ */ jsx217(TimelineSequenceKeyframedValue, {
                       field: details.field,
@@ -45493,17 +45626,19 @@ var KeyframeInspector = ({ selection }) => {
                       sourceFrame: details.sourceFrame
                     })
                   })
-                ]
+                })
               })
             ]
           }),
-          /* @__PURE__ */ jsx217(InspectorInlineAction, {
-            disabled: removeDisabled,
-            onClick: onRemoveKeyframe,
-            renderIcon: (color) => /* @__PURE__ */ jsx217(TrashIcon, {
-              color
-            }),
-            children: "Remove keyframe"
+          /* @__PURE__ */ jsx217(InspectorActionSection, {
+            children: /* @__PURE__ */ jsx217(InspectorInlineAction, {
+              disabled: removeDisabled,
+              onClick: onRemoveKeyframe,
+              renderIcon: (color) => /* @__PURE__ */ jsx217(TrashIcon, {
+                color
+              }),
+              children: "Remove keyframe"
+            })
           })
         ]
       })
@@ -45524,7 +45659,7 @@ var ScissorsIcon = ({ color, ...props }) => {
     ...props,
     children: /* @__PURE__ */ jsx218("path", {
       fill: color,
-      d: "M112 32a80 80 0 1 0 0 160 80 80 0 1 0 0-160zm0-32c61.9 0 112 50.1 112 112 0 12.4-2 24.4-5.8 35.6L256 185.4 383.9 57.5c31-31 81.2-31 112.2 0 12.4 12.4 12.4 32.6 0 45L221.6 377c1.6 7.4 2.4 15.1 2.4 23 0 61.9-50.1 112-112 112S0 461.9 0 400s50.1-112 112-112c12.4 0 24.4 2 35.6 5.8L177.4 264 135 221.6c-7.4 1.6-15.1 2.4-23 2.4-61.9 0-112-50.1-112-112S50.1 0 112 0zm55.8 209.1l32.2 32.2 33.4-33.4-30.5-30.5c-9.3 12.9-21.3 23.7-35.1 31.7zm238.7-129-229 229c12.9 9.3 23.7 21.3 31.7 35.1L473.4 80c-18.5-18.4-48.4-18.3-66.9.1zM192 400a80 80 0 1 0-160 0 80 80 0 1 0 160 0zm206.5 39.9c18.5 18.5 48.4 18.5 66.9.1L346 320.6l22.6-22.6 119.5 119.5c12.4 12.4 12.4 32.6 0 45-31 31-81.2 31-112.2 0L290 376.6l22.6-22.6 85.9 85.9z"
+      d: "M48 112a64 64 0 1 1 128 0 64 64 0 1 1 -128 0zm176 0C224 50.1 173.9 0 112 0S0 50.1 0 112 50.1 224 112 224c24 0 46.3-7.6 64.5-20.4l57.3 52.4-57.3 52.4C158.3 295.6 136 288 112 288 50.1 288 0 338.1 0 400s50.1 112 112 112 112-50.1 112-112c0-20.5-5.5-39.6-15.1-56.2L504.2 73.7c9.8-8.9 10.5-24.1 1.5-33.9s-24.1-10.5-33.9-1.5l-202.4 185.2-60.5-55.3c9.6-16.5 15.1-35.7 15.1-56.2zM471.8 473.7c9.8 8.9 25 8.3 33.9-1.5s8.3-25-1.5-33.9L338.6 286.8 302.7 319 471.8 473.7zM48 400a64 64 0 1 1 128 0 64 64 0 1 1 -128 0z"
     })
   });
 };
@@ -46093,6 +46228,11 @@ var plusIcon = {
   width: 15,
   height: 15
 };
+var assetSelectorIcon = {
+  flexShrink: 0,
+  height: 18,
+  width: 18
+};
 var remoteSourceLabel = {
   color: LIGHT_TEXT,
   display: "flex",
@@ -46206,6 +46346,7 @@ var InspectorSequenceSection = ({
       openTimelineAssetLink(localAsset, selectAsset);
     }
   }, [localAsset, selectAsset]);
+  const localAssetFileName = localAsset ? localAsset.assetPath.split("/").pop() ?? localAsset.assetPath : null;
   const getIsExpanded = useCallback130((candidate) => {
     return !collapsedKeys.has(getInspectorExpansionKey(candidate));
   }, [collapsedKeys]);
@@ -46322,11 +46463,17 @@ var InspectorSequenceSection = ({
         children: controlGroups.map((group) => /* @__PURE__ */ jsxs115(InspectorSection, {
           header: group.label,
           children: [
-            group.id === "source" && localAsset ? /* @__PURE__ */ jsx221(AssetInfo, {
-              assetName: localAsset.assetPath,
-              contentSized: true,
-              onAssetClick: jumpToAsset,
-              readOnlyStudio: true
+            group.id === "source" && localAsset ? /* @__PURE__ */ jsx221(InspectorInlineAction, {
+              disabled: false,
+              onClick: jumpToAsset,
+              renderIcon: (color) => /* @__PURE__ */ jsx221(AssetFileIcon, {
+                color,
+                fileType: getPreviewFileType(localAsset.assetPath),
+                style: assetSelectorIcon
+              }),
+              size: "compact",
+              title: localAsset.assetPath,
+              children: localAssetFileName
             }) : null,
             group.id === "source" && remoteAsset && remoteSourceParts ? /* @__PURE__ */ jsxs115("div", {
               style: remoteSourceLabel,
@@ -46766,10 +46913,10 @@ var AlignmentControls = ({ track }) => {
 };
 
 // src/components/InspectorPanel/SequenceSelectionInspector.tsx
-import { jsx as jsx229, jsxs as jsxs120, Fragment as Fragment39 } from "react/jsx-runtime";
+import { jsx as jsx229, jsxs as jsxs120, Fragment as Fragment38 } from "react/jsx-runtime";
 var splitIconStyle = {
-  height: 18,
-  width: 18
+  height: 16,
+  width: 16
 };
 var SplitSequenceAction = ({ selection, track }) => {
   const timelinePosition = Internals71.Timeline.useTimelinePosition();
@@ -46857,7 +47004,7 @@ var SequenceExpandedInspector = ({ track }) => {
         sourceLocation,
         track
       }),
-      connectedCompositions.length > 0 ? /* @__PURE__ */ jsxs120(Fragment39, {
+      connectedCompositions.length > 0 ? /* @__PURE__ */ jsxs120(Fragment38, {
         children: [
           /* @__PURE__ */ jsx229(InspectorSectionDivider, {}),
           /* @__PURE__ */ jsx229(ConnectedCompositionsSection, {
@@ -48250,7 +48397,7 @@ var RenderQueue = () => {
 
 // src/components/RendersTab.tsx
 import { useContext as useContext93, useMemo as useMemo154 } from "react";
-import { jsx as jsx248, jsxs as jsxs124, Fragment as Fragment40 } from "react/jsx-runtime";
+import { jsx as jsx248, jsxs as jsxs124, Fragment as Fragment39 } from "react/jsx-runtime";
 var row5 = {
   display: "flex",
   flexDirection: "row",
@@ -48289,7 +48436,7 @@ var RendersTab = ({ selected, onClick }) => {
       style: row5,
       children: [
         "Renders",
-        jobCount > 0 ? /* @__PURE__ */ jsxs124(Fragment40, {
+        jobCount > 0 ? /* @__PURE__ */ jsxs124(Fragment39, {
           children: [
             /* @__PURE__ */ jsx248(Flex, {}),
             /* @__PURE__ */ jsx248("div", {
@@ -48941,13 +49088,13 @@ var getPlaybackRateLabel = (playbackRate) => {
   return `${playbackRate}x`;
 };
 var accessibilityLabel5 = "Change the playback rate";
-var comboStyle3 = { width: 80 };
+var comboStyle3 = { width: 64 };
 var PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
   const { canvasContent } = useContext99(Internals81.CompositionManager);
   const isStill = useIsStill();
   const style8 = useMemo157(() => {
     return {
-      padding: CONTROL_BUTTON_PADDING
+      padding: CONTROL_BUTTON_PADDING - 2
     };
   }, []);
   const items = useMemo157(() => {
@@ -48983,6 +49130,7 @@ var PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
     style: style8,
     "aria-label": accessibilityLabel5,
     children: /* @__PURE__ */ jsx256(Combobox, {
+      size: "compact",
       title: accessibilityLabel5,
       style: comboStyle3,
       selectedId: String(playbackRate),
@@ -49073,7 +49221,7 @@ var StepForward = (props) => {
 };
 
 // src/components/PlayPause.tsx
-import { jsx as jsx262, jsxs as jsxs127, Fragment as Fragment41 } from "react/jsx-runtime";
+import { jsx as jsx262, jsxs as jsxs127, Fragment as Fragment40 } from "react/jsx-runtime";
 var backStyle = {
   height: 18,
   color: WHITE
@@ -49265,7 +49413,7 @@ var PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted })
       stopped = true;
     };
   }, [bufferStateDelayInMilliseconds, emitter]);
-  return /* @__PURE__ */ jsxs127(Fragment41, {
+  return /* @__PURE__ */ jsxs127(Fragment40, {
     children: [
       /* @__PURE__ */ jsx262(ControlButton, {
         "aria-label": "Jump to beginning",
@@ -49316,7 +49464,7 @@ import { PlayerInternals as PlayerInternals17 } from "@remotion/player";
 import { useCallback as useCallback153, useContext as useContext100, useMemo as useMemo158, useRef as useRef55, useState as useState90 } from "react";
 import ReactDOM10 from "react-dom";
 import { Internals as Internals83 } from "remotion";
-import { jsx as jsx263, jsxs as jsxs128, Fragment as Fragment42 } from "react/jsx-runtime";
+import { jsx as jsx263, jsxs as jsxs128, Fragment as Fragment41 } from "react/jsx-runtime";
 var splitButtonContainer = {
   display: "inline-flex",
   flexDirection: "row",
@@ -49359,10 +49507,48 @@ var dropdownTriggerStyle = {
 };
 var mainButtonContent = {
   paddingLeft: 4,
-  paddingRight: 6
+  paddingRight: 6,
+  minWidth: 0
 };
 var label8 = {
-  fontSize: 14
+  color: "inherit",
+  fontFamily: "inherit",
+  fontSize: 14,
+  lineHeight: "21px",
+  minWidth: 0,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+var compactSplitButtonSegmentHeight = COMPACT_CONTROL_ROW_HEIGHT;
+var compactMainButtonStyle = {
+  ...mainButtonStyle,
+  boxSizing: "border-box",
+  height: compactSplitButtonSegmentHeight,
+  paddingLeft: 6,
+  paddingRight: 6,
+  paddingTop: 6,
+  paddingBottom: 6,
+  fontSize: 12
+};
+var compactDropdownTriggerStyle = {
+  ...dropdownTriggerStyle,
+  boxSizing: "border-box",
+  height: compactSplitButtonSegmentHeight,
+  paddingLeft: 5,
+  paddingRight: 5,
+  paddingTop: 6,
+  paddingBottom: 6
+};
+var compactMainButtonContent = {
+  ...mainButtonContent,
+  paddingLeft: 2,
+  paddingRight: 4
+};
+var compactLabel3 = {
+  ...label8,
+  fontSize: 12,
+  lineHeight: "16px"
 };
 var RENDER_TYPE_STORAGE_KEY = "remotion.renderType";
 var getInitialRenderType = (readOnlyStudio) => {
@@ -49377,9 +49563,7 @@ var getInitialRenderType = (readOnlyStudio) => {
   } catch {}
   return "server-render";
 };
-var RenderButton = ({
-  readOnlyStudio
-}) => {
+var RenderButton = ({ readOnlyStudio, size: controlSize = "default" }) => {
   const { inFrame, outFrame } = useTimelineInOutFramePosition();
   const { setSelectedModal } = useContext100(ModalsContext);
   const [preferredRenderType, setPreferredRenderType] = useState90(() => getInitialRenderType(readOnlyStudio));
@@ -49440,11 +49624,12 @@ var RenderButton = ({
   const iconStyle5 = useMemo158(() => {
     return {
       style: {
-        height: 16,
-        color: CURRENT_COLOR
+        height: controlSize === "compact" ? 14 : 16,
+        color: CURRENT_COLOR,
+        flexShrink: 0
       }
     };
-  }, []);
+  }, [controlSize]);
   const video = Internals83.useVideo();
   const { getCurrentFrame: getCurrentFrame2 } = PlayerInternals17.usePlayer();
   const { props } = useContext100(Internals83.EditorPropsContext);
@@ -49661,15 +49846,16 @@ var RenderButton = ({
     return {
       ...splitButtonContainer,
       borderColor: BLACK_ALPHA_60,
+      borderRadius: controlSize === "compact" ? 0 : 4,
       opacity: 1,
       cursor: "pointer"
     };
-  }, []);
+  }, [controlSize]);
   const renderLabel = renderType === "server-render" ? "Render" : renderType === "render-command" ? "Render via CLI" : "Render on web";
   if (!video) {
     return null;
   }
-  return /* @__PURE__ */ jsxs128(Fragment42, {
+  return /* @__PURE__ */ jsxs128(Fragment41, {
     children: [
       /* @__PURE__ */ jsx263("button", {
         style: { display: "none" },
@@ -49692,22 +49878,22 @@ var RenderButton = ({
         children: [
           /* @__PURE__ */ jsx263("button", {
             type: "button",
-            style: mainButtonStyle,
+            style: controlSize === "compact" ? compactMainButtonStyle : mainButtonStyle,
             onClick,
             id: "render-modal-button",
             children: /* @__PURE__ */ jsxs128(Row, {
               align: "center",
-              style: mainButtonContent,
+              style: controlSize === "compact" ? compactMainButtonContent : mainButtonContent,
               children: [
                 /* @__PURE__ */ jsx263(ThinRenderIcon, {
                   fill: CURRENT_COLOR_LOWERCASE,
                   svgProps: iconStyle5
                 }),
                 /* @__PURE__ */ jsx263(Spacing, {
-                  x: 1
+                  x: controlSize === "compact" ? 0.75 : 1
                 }),
                 /* @__PURE__ */ jsx263("span", {
-                  style: label8,
+                  style: controlSize === "compact" ? compactLabel3 : label8,
                   children: renderLabel
                 })
               ]
@@ -49719,7 +49905,7 @@ var RenderButton = ({
           /* @__PURE__ */ jsx263("button", {
             ref: dropdownRef,
             type: "button",
-            style: dropdownTriggerStyle,
+            style: controlSize === "compact" ? compactDropdownTriggerStyle : dropdownTriggerStyle,
             className: MENU_INITIATOR_CLASSNAME,
             onPointerDown,
             onClick: onClickDropdown,
@@ -49914,8 +50100,8 @@ var TimelineZoomControls = () => {
 };
 
 // src/components/PreviewToolbar.tsx
-import { jsx as jsx268, jsxs as jsxs130, Fragment as Fragment43 } from "react/jsx-runtime";
-var TOOLBAR_HEIGHT = 50;
+import { jsx as jsx268, jsxs as jsxs130, Fragment as Fragment42 } from "react/jsx-runtime";
+var TOOLBAR_HEIGHT = 40;
 var container39 = {
   display: "flex",
   justifyContent: "center",
@@ -49953,7 +50139,7 @@ var scrollIndicatorRight = {
 };
 var sideContainer = {
   width: 300,
-  height: 36,
+  height: 30,
   display: "flex",
   flexDirection: "row",
   alignItems: "center"
@@ -50051,7 +50237,7 @@ var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
         ref: leftScrollIndicatorRef,
         style: scrollIndicatorLeft
       }),
-      isMobileLayout ? null : /* @__PURE__ */ jsxs130(Fragment43, {
+      isMobileLayout ? null : /* @__PURE__ */ jsxs130(Fragment42, {
         children: [
           /* @__PURE__ */ jsxs130("div", {
             style: sideContainer,
@@ -50076,7 +50262,7 @@ var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
           }) : null
         ]
       }),
-      isVideoComposition ? /* @__PURE__ */ jsxs130(Fragment43, {
+      isVideoComposition ? /* @__PURE__ */ jsxs130(Fragment42, {
         children: [
           /* @__PURE__ */ jsx268(Spacing, {
             x: 2
@@ -50115,7 +50301,7 @@ var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
           })
         ]
       }) : null,
-      canvasContent?.type === "composition" ? /* @__PURE__ */ jsxs130(Fragment43, {
+      canvasContent?.type === "composition" ? /* @__PURE__ */ jsxs130(Fragment42, {
         children: [
           /* @__PURE__ */ jsx268(PreviewToolbarControl, {
             children: /* @__PURE__ */ jsx268(CheckboardToggle, {})
@@ -50139,7 +50325,7 @@ var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
         children: /* @__PURE__ */ jsx268(FullScreenToggle, {})
       }) : null,
       /* @__PURE__ */ jsx268(Flex, {}),
-      isMobileLayout && /* @__PURE__ */ jsxs130(Fragment43, {
+      isMobileLayout && /* @__PURE__ */ jsxs130(Fragment42, {
         children: [
           /* @__PURE__ */ jsx268(Flex, {}),
           /* @__PURE__ */ jsx268(PreviewToolbarControl, {
@@ -50165,7 +50351,8 @@ var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
           }),
           /* @__PURE__ */ jsx268(PreviewToolbarControl, {
             children: /* @__PURE__ */ jsx268(RenderButton, {
-              readOnlyStudio
+              readOnlyStudio,
+              size: "compact"
             })
           }),
           /* @__PURE__ */ jsx268(Spacing, {
@@ -50288,7 +50475,7 @@ var SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex,
 // src/components/Splitter/SplitterElement.tsx
 import { useContext as useContext104, useMemo as useMemo160 } from "react";
 import { interpolateColors, random } from "remotion";
-import { jsx as jsx270, jsxs as jsxs131, Fragment as Fragment44 } from "react/jsx-runtime";
+import { jsx as jsx270, jsxs as jsxs131, Fragment as Fragment43 } from "react/jsx-runtime";
 var SplitterElement = ({ children, type, sticky }) => {
   const context = useContext104(SplitterContext);
   const style8 = useMemo160(() => {
@@ -50308,7 +50495,7 @@ var SplitterElement = ({ children, type, sticky }) => {
       backgroundColor: interpolateColors(random(context.flexValue), [0, 1], [RED, "blue"])
     };
   }, [context.flexValue, type]);
-  return /* @__PURE__ */ jsxs131(Fragment44, {
+  return /* @__PURE__ */ jsxs131(Fragment43, {
     children: [
       /* @__PURE__ */ jsx270("div", {
         style: style8,
@@ -50603,7 +50790,7 @@ var TopPanelInner = ({ readOnlyStudio, onMounted, drawRef: drawRef2, bufferState
 var TopPanel = React186.memo(TopPanelInner);
 
 // src/components/SidebarCollapserControls.tsx
-import { jsx as jsx273, jsxs as jsxs133, Fragment as Fragment45 } from "react/jsx-runtime";
+import { jsx as jsx273, jsxs as jsxs133, Fragment as Fragment44 } from "react/jsx-runtime";
 var style8 = {
   width: 16,
   height: 16,
@@ -50735,7 +50922,7 @@ var SidebarCollapserControls = () => {
       })
     });
   }, [colorStyle, rightIcon, toggleRightTooltip]);
-  return /* @__PURE__ */ jsxs133(Fragment45, {
+  return /* @__PURE__ */ jsxs133(Fragment44, {
     children: [
       /* @__PURE__ */ jsx273(InlineAction, {
         onClick: toggleLeft,
@@ -50785,7 +50972,7 @@ var UndoIcon = (props) => {
 };
 
 // src/components/UndoRedoButtons.tsx
-import { jsx as jsx276, jsxs as jsxs134, Fragment as Fragment46 } from "react/jsx-runtime";
+import { jsx as jsx276, jsxs as jsxs134, Fragment as Fragment45 } from "react/jsx-runtime";
 var iconStyle6 = {
   width: 16,
   height: 16
@@ -50877,7 +51064,7 @@ var UndoRedoButtons = () => {
   if (!canUndo && !canRedo) {
     return null;
   }
-  return /* @__PURE__ */ jsxs134(Fragment46, {
+  return /* @__PURE__ */ jsxs134(Fragment45, {
     children: [
       /* @__PURE__ */ jsx276(InlineAction, {
         onClick: onUndo,
@@ -52882,7 +53069,7 @@ import { Internals as Internals98, useVideoConfig as useVideoConfig13 } from "re
 // src/components/Timeline/TimelineInOutPointer.tsx
 import { createRef as createRef11, useContext as useContext116 } from "react";
 import { Internals as Internals97 } from "remotion";
-import { jsx as jsx285, jsxs as jsxs138, Fragment as Fragment47 } from "react/jsx-runtime";
+import { jsx as jsx285, jsxs as jsxs138, Fragment as Fragment46 } from "react/jsx-runtime";
 var areaHighlight = {
   position: "absolute",
   backgroundColor: BLACK_ALPHA_50,
@@ -52900,7 +53087,7 @@ var TimelineInOutPointer = () => {
   if (!videoConfig || timelineWidth === null) {
     return null;
   }
-  return /* @__PURE__ */ jsxs138(Fragment47, {
+  return /* @__PURE__ */ jsxs138(Fragment46, {
     children: [
       inFrame !== null && /* @__PURE__ */ jsx285("div", {
         ref: inMarkerAreaRef,
@@ -52974,7 +53161,7 @@ var TimelineInOutPointerHandle = ({
 };
 
 // src/components/Timeline/TimelineInOutDragHandler.tsx
-import { jsx as jsx287, jsxs as jsxs139, Fragment as Fragment48 } from "react/jsx-runtime";
+import { jsx as jsx287, jsxs as jsxs139, Fragment as Fragment47 } from "react/jsx-runtime";
 var getClientXWithScroll2 = (x) => {
   return x + scrollableRef.current?.scrollLeft;
 };
@@ -53219,7 +53406,7 @@ var TimelineInOutDragHandlerInner = () => {
       }
     ];
   }, [setInAndOutFrames, videoConfig.id]);
-  return /* @__PURE__ */ jsxs139(Fragment48, {
+  return /* @__PURE__ */ jsxs139(Fragment47, {
     children: [
       inFrame !== null && /* @__PURE__ */ jsx287(ContextMenu, {
         values: inContextMenu,
@@ -53387,7 +53574,7 @@ var TimelineMediaInfo = ({ src }) => {
 
 // src/components/Timeline/TimelineSequenceName.tsx
 import { useCallback as useCallback167, useEffect as useEffect91, useMemo as useMemo175, useRef as useRef64, useState as useState99 } from "react";
-import { jsx as jsx290, jsxs as jsxs141, Fragment as Fragment49 } from "react/jsx-runtime";
+import { jsx as jsx290, jsxs as jsxs141, Fragment as Fragment48 } from "react/jsx-runtime";
 var MAX_DISPLAY_NAME_LENGTH = 1000;
 var MAX_RENAME_INPUT_WIDTH = 240;
 var RENAME_INPUT_CLASS_NAME = "remotion-timeline-sequence-name-input";
@@ -53487,7 +53674,7 @@ var TimelineSequenceName = ({
     save();
   }, [save]);
   if (editing) {
-    return /* @__PURE__ */ jsxs141(Fragment49, {
+    return /* @__PURE__ */ jsxs141(Fragment48, {
       children: [
         /* @__PURE__ */ jsx290("style", {
           children: `.${RENAME_INPUT_CLASS_NAME}::selection { background: ${WHITE_ALPHA_72}; color: ${BLACK}; }`
@@ -53582,7 +53769,7 @@ var useSequenceFreezeFrameMenuItem = ({
 };
 
 // src/components/Timeline/TimelineSequenceItem.tsx
-import { jsx as jsx291, jsxs as jsxs142, Fragment as Fragment50 } from "react/jsx-runtime";
+import { jsx as jsx291, jsxs as jsxs142, Fragment as Fragment49 } from "react/jsx-runtime";
 var labelContainerStyle = {
   alignItems: "center",
   alignSelf: "stretch",
@@ -54286,7 +54473,7 @@ var TimelineSequenceItem = ({
     children: /* @__PURE__ */ jsxs142("div", {
       style: labelContainerStyle,
       children: [
-        connectedCompositions.length > 0 ? /* @__PURE__ */ jsxs142(Fragment50, {
+        connectedCompositions.length > 0 ? /* @__PURE__ */ jsxs142(Fragment49, {
           children: [
             /* @__PURE__ */ jsx291(CompositionOrStillIcon, {
               color: getTimelineColor(false, false),
@@ -54307,7 +54494,7 @@ var TimelineSequenceItem = ({
           onCancelEditing: onCancelRenaming,
           onSaveName
         }),
-        mediaSrc ? /* @__PURE__ */ jsxs142(Fragment50, {
+        mediaSrc ? /* @__PURE__ */ jsxs142(Fragment49, {
           children: [
             /* @__PURE__ */ jsx291(Spacing, {
               x: 0.5
@@ -54340,7 +54527,7 @@ var TimelineSequenceItem = ({
       trackRow
     ]
   }) : trackRow;
-  return /* @__PURE__ */ jsxs142(Fragment50, {
+  return /* @__PURE__ */ jsxs142(Fragment49, {
     children: [
       previewConnected ? /* @__PURE__ */ jsx291(ContextMenu, {
         values: contextMenuValues,
@@ -54809,7 +54996,7 @@ var TimelineKeyframeDiamondUnmemoized = ({ frame: frame2, rowHeight, nodePathInf
 var TimelineKeyframeDiamond = React205.memo(TimelineKeyframeDiamondUnmemoized);
 
 // src/components/Timeline/TimelineExpandedKeyframeRow.tsx
-import { jsx as jsx295, jsxs as jsxs145, Fragment as Fragment51 } from "react/jsx-runtime";
+import { jsx as jsx295, jsxs as jsxs145, Fragment as Fragment50 } from "react/jsx-runtime";
 var row8 = {
   position: "relative"
 };
@@ -54820,7 +55007,7 @@ var TimelineExpandedKeyframeRowUnmemoized = ({ height, keyframes, canEditEasing,
   const timelineWidth = useContext123(TimelineWidthContext);
   const rowHighlightBackground = useTimelineRowHighlightBackground(nodePathInfo);
   const easingSegments = canEditEasing ? getTimelineEasingSegments(keyframes) : [];
-  return /* @__PURE__ */ jsxs145(Fragment51, {
+  return /* @__PURE__ */ jsxs145(Fragment50, {
     children: [
       showSeparator ? /* @__PURE__ */ jsx295("div", {
         style: rowSeparator
@@ -58732,7 +58919,7 @@ var CodemodFooter = ({
 };
 
 // src/components/NewComposition/DeleteComposition.tsx
-import { jsx as jsx317, jsxs as jsxs162, Fragment as Fragment52 } from "react/jsx-runtime";
+import { jsx as jsx317, jsxs as jsxs162, Fragment as Fragment51 } from "react/jsx-runtime";
 var content8 = {
   padding: 16,
   fontSize: 14,
@@ -58755,7 +58942,7 @@ var DeleteCompositionLoaded = ({ compositionId }) => {
   const onSubmit = useCallback179((e) => {
     e.preventDefault();
   }, []);
-  return /* @__PURE__ */ jsxs162(Fragment52, {
+  return /* @__PURE__ */ jsxs162(Fragment51, {
     children: [
       /* @__PURE__ */ jsx317(ModalHeader, {
         title: "Delete composition"
@@ -58918,7 +59105,7 @@ var InputAndValidationContainer = ({
 
 // src/components/NewComposition/NewCompDuration.tsx
 import { useCallback as useCallback181 } from "react";
-import { jsx as jsx320, jsxs as jsxs164, Fragment as Fragment53 } from "react/jsx-runtime";
+import { jsx as jsx320, jsxs as jsxs164, Fragment as Fragment52 } from "react/jsx-runtime";
 var NewCompDuration = ({ durationInFrames, setDurationInFrames }) => {
   const onDurationInFramesChanged = useCallback181((newValue) => {
     setDurationInFrames(Number(newValue));
@@ -58952,7 +59139,7 @@ var NewCompDuration = ({ durationInFrames, setDurationInFrames }) => {
               onValueChange: onDurationChangedDirectly,
               rightAlign: false
             }),
-            compDurationErrMessage ? /* @__PURE__ */ jsxs164(Fragment53, {
+            compDurationErrMessage ? /* @__PURE__ */ jsxs164(Fragment52, {
               children: [
                 /* @__PURE__ */ jsx320(Spacing, {
                   y: 1,
@@ -58973,7 +59160,7 @@ var NewCompDuration = ({ durationInFrames, setDurationInFrames }) => {
 };
 
 // src/components/NewComposition/DuplicateComposition.tsx
-import { jsx as jsx321, jsxs as jsxs165, Fragment as Fragment54 } from "react/jsx-runtime";
+import { jsx as jsx321, jsxs as jsxs165, Fragment as Fragment53 } from "react/jsx-runtime";
 var content10 = {
   padding: 12,
   paddingRight: 12,
@@ -59127,7 +59314,7 @@ var DuplicateCompositionLoaded = ({ initialType }) => {
   const onSubmit = useCallback182((e) => {
     e.preventDefault();
   }, []);
-  return /* @__PURE__ */ jsxs165(Fragment54, {
+  return /* @__PURE__ */ jsxs165(Fragment53, {
     children: [
       /* @__PURE__ */ jsx321(ModalHeader, {
         title: `Duplicate ${resolved.result.id}`
@@ -59176,7 +59363,7 @@ var DuplicateCompositionLoaded = ({ initialType }) => {
                           status: "ok",
                           rightAlign: true
                         }),
-                        compNameErrMessage ? /* @__PURE__ */ jsxs165(Fragment54, {
+                        compNameErrMessage ? /* @__PURE__ */ jsxs165(Fragment53, {
                           children: [
                             /* @__PURE__ */ jsx321(Spacing, {
                               y: 1,
@@ -59194,7 +59381,7 @@ var DuplicateCompositionLoaded = ({ initialType }) => {
                   })
                 ]
               }),
-              hadDimensionsDefined ? /* @__PURE__ */ jsxs165(Fragment54, {
+              hadDimensionsDefined ? /* @__PURE__ */ jsxs165(Fragment53, {
                 children: [
                   /* @__PURE__ */ jsxs165("div", {
                     style: optionRow,
@@ -59222,7 +59409,7 @@ var DuplicateCompositionLoaded = ({ initialType }) => {
                               onValueChange: onWidthDirectlyChanged,
                               rightAlign: false
                             }),
-                            compWidthErrMessage ? /* @__PURE__ */ jsxs165(Fragment54, {
+                            compWidthErrMessage ? /* @__PURE__ */ jsxs165(Fragment53, {
                               children: [
                                 /* @__PURE__ */ jsx321(Spacing, {
                                   y: 1,
@@ -59266,7 +59453,7 @@ var DuplicateCompositionLoaded = ({ initialType }) => {
                               onValueChange: onHeightDirectlyChanged,
                               rightAlign: false
                             }),
-                            compHeightErrMessage ? /* @__PURE__ */ jsxs165(Fragment54, {
+                            compHeightErrMessage ? /* @__PURE__ */ jsxs165(Fragment53, {
                               children: [
                                 /* @__PURE__ */ jsx321(Spacing, {
                                   y: 1,
@@ -59483,7 +59670,7 @@ var getNewCompositionDefaults = (composition) => {
 };
 
 // src/components/NewComposition/NewComposition.tsx
-import { jsx as jsx322, jsxs as jsxs166, Fragment as Fragment55 } from "react/jsx-runtime";
+import { jsx as jsx322, jsxs as jsxs166, Fragment as Fragment54 } from "react/jsx-runtime";
 var content11 = {
   padding: 12,
   paddingRight: 12,
@@ -59574,7 +59761,7 @@ var NewCompositionLoaded = ({ folderName, parentName, stack: stack2 }) => {
     e.preventDefault();
   }, []);
   const folderPath = [parentName, folderName].filter(Boolean).join("/");
-  return /* @__PURE__ */ jsxs166(Fragment55, {
+  return /* @__PURE__ */ jsxs166(Fragment54, {
     children: [
       /* @__PURE__ */ jsx322(ModalHeader, {
         title: "New composition"
@@ -59622,7 +59809,7 @@ var NewCompositionLoaded = ({ folderName, parentName, stack: stack2 }) => {
                           status: "ok",
                           rightAlign: true
                         }),
-                        compNameErrMessage ? /* @__PURE__ */ jsxs166(Fragment55, {
+                        compNameErrMessage ? /* @__PURE__ */ jsxs166(Fragment54, {
                           children: [
                             /* @__PURE__ */ jsx322(Spacing, {
                               y: 1,
@@ -59666,7 +59853,7 @@ var NewCompositionLoaded = ({ folderName, parentName, stack: stack2 }) => {
                           onValueChange: onWidthDirectlyChanged,
                           rightAlign: false
                         }),
-                        compWidthErrMessage ? /* @__PURE__ */ jsxs166(Fragment55, {
+                        compWidthErrMessage ? /* @__PURE__ */ jsxs166(Fragment54, {
                           children: [
                             /* @__PURE__ */ jsx322(Spacing, {
                               y: 1,
@@ -59710,7 +59897,7 @@ var NewCompositionLoaded = ({ folderName, parentName, stack: stack2 }) => {
                           onValueChange: onHeightDirectlyChanged,
                           rightAlign: false
                         }),
-                        compHeightErrMessage ? /* @__PURE__ */ jsxs166(Fragment55, {
+                        compHeightErrMessage ? /* @__PURE__ */ jsxs166(Fragment54, {
                           children: [
                             /* @__PURE__ */ jsx322(Spacing, {
                               y: 1,
@@ -59823,7 +60010,7 @@ var validateNewFolderName = ({
 };
 
 // src/components/NewComposition/NewFolder.tsx
-import { jsx as jsx323, jsxs as jsxs167, Fragment as Fragment56 } from "react/jsx-runtime";
+import { jsx as jsx323, jsxs as jsxs167, Fragment as Fragment55 } from "react/jsx-runtime";
 var content12 = {
   padding: 12,
   paddingRight: 12,
@@ -59920,7 +60107,7 @@ var NewFolder = ({ parentName, stack: stack2 }) => {
                           status: "ok",
                           rightAlign: true
                         }),
-                        folderNameErrMessage ? /* @__PURE__ */ jsxs167(Fragment56, {
+                        folderNameErrMessage ? /* @__PURE__ */ jsxs167(Fragment55, {
                           children: [
                             /* @__PURE__ */ jsx323(Spacing, {
                               y: 1,
@@ -59975,7 +60162,7 @@ import {
   useState as useState111
 } from "react";
 import { Internals as Internals115 } from "remotion";
-import { jsx as jsx324, jsxs as jsxs168, Fragment as Fragment57 } from "react/jsx-runtime";
+import { jsx as jsx324, jsxs as jsxs168, Fragment as Fragment56 } from "react/jsx-runtime";
 var content13 = {
   padding: 12,
   paddingRight: 12,
@@ -60017,7 +60204,7 @@ var RenameCompositionLoaded = () => {
   const onSubmit = useCallback186((e) => {
     e.preventDefault();
   }, []);
-  return /* @__PURE__ */ jsxs168(Fragment57, {
+  return /* @__PURE__ */ jsxs168(Fragment56, {
     children: [
       /* @__PURE__ */ jsx324(ModalHeader, {
         title: `Rename ${resolved.result.id}`
@@ -60048,7 +60235,7 @@ var RenameCompositionLoaded = () => {
                         status: "ok",
                         rightAlign: true
                       }),
-                      compNameErrMessage ? /* @__PURE__ */ jsxs168(Fragment57, {
+                      compNameErrMessage ? /* @__PURE__ */ jsxs168(Fragment56, {
                         children: [
                           /* @__PURE__ */ jsx324(Spacing, {
                             y: 1,
@@ -60124,7 +60311,7 @@ var validateFolderRename = ({
 };
 
 // src/components/NewComposition/RenameFolder.tsx
-import { jsx as jsx325, jsxs as jsxs169, Fragment as Fragment58 } from "react/jsx-runtime";
+import { jsx as jsx325, jsxs as jsxs169, Fragment as Fragment57 } from "react/jsx-runtime";
 var content14 = {
   padding: 12,
   paddingRight: 12,
@@ -60195,7 +60382,7 @@ var RenameFolder = ({ folderName, parentName, stack: stack2 }) => {
                         status: "ok",
                         rightAlign: true
                       }),
-                      folderNameErrMessage ? /* @__PURE__ */ jsxs169(Fragment58, {
+                      folderNameErrMessage ? /* @__PURE__ */ jsxs169(Fragment57, {
                         children: [
                           /* @__PURE__ */ jsx325(Spacing, {
                             y: 1,
@@ -60248,7 +60435,7 @@ import {
   useRef as useRef77,
   useState as useState113
 } from "react";
-import { jsx as jsx326, jsxs as jsxs170, Fragment as Fragment59 } from "react/jsx-runtime";
+import { jsx as jsx326, jsxs as jsxs170, Fragment as Fragment58 } from "react/jsx-runtime";
 var content15 = {
   padding: 12,
   paddingRight: 12,
@@ -60338,7 +60525,7 @@ var RenameStaticFileModal = ({ relativePath }) => {
                         status: validationMessage ? "error" : "ok",
                         rightAlign: true
                       }),
-                      validationMessage ? /* @__PURE__ */ jsxs170(Fragment59, {
+                      validationMessage ? /* @__PURE__ */ jsxs170(Fragment58, {
                         children: [
                           /* @__PURE__ */ jsx326(Spacing, {
                             y: 1,
@@ -60554,7 +60741,7 @@ var ArrowRight = () => {
 };
 
 // src/components/KeyboardShortcutsExplainer.tsx
-import { jsx as jsx329, jsxs as jsxs172, Fragment as Fragment60 } from "react/jsx-runtime";
+import { jsx as jsx329, jsxs as jsxs172, Fragment as Fragment59 } from "react/jsx-runtime";
 var left3 = {
   width: 85,
   paddingTop: 8,
@@ -61515,7 +61702,7 @@ var KeyboardShortcutsExplainer = () => {
                   })
                 ]
               }),
-              getStudioAskAIEnabled() && /* @__PURE__ */ jsxs172(Fragment60, {
+              getStudioAskAIEnabled() && /* @__PURE__ */ jsxs172(Fragment59, {
                 children: [
                   /* @__PURE__ */ jsx329("br", {}),
                   /* @__PURE__ */ jsx329("div", {
@@ -61686,7 +61873,7 @@ var QuickSwitcherNoResults = ({ query, mode }) => {
 
 // src/components/QuickSwitcher/QuickSwitcherResult.tsx
 import { useEffect as useEffect109, useMemo as useMemo199, useRef as useRef78, useState as useState115 } from "react";
-import { jsx as jsx331, jsxs as jsxs174, Fragment as Fragment61 } from "react/jsx-runtime";
+import { jsx as jsx331, jsxs as jsxs174, Fragment as Fragment60 } from "react/jsx-runtime";
 var container53 = {
   paddingLeft: 16,
   paddingRight: 16,
@@ -61782,7 +61969,7 @@ var QuickSwitcherResult = ({ result, selected }) => {
       }),
       /* @__PURE__ */ jsx331("div", {
         style: labelContainer2,
-        children: result.type === "search-result" ? /* @__PURE__ */ jsxs174(Fragment61, {
+        children: result.type === "search-result" ? /* @__PURE__ */ jsxs174(Fragment60, {
           children: [
             /* @__PURE__ */ jsx331("div", {
               dangerouslySetInnerHTML: {
@@ -61807,7 +61994,7 @@ var QuickSwitcherResult = ({ result, selected }) => {
 };
 
 // src/components/QuickSwitcher/QuickSwitcherContent.tsx
-import { jsx as jsx332, jsxs as jsxs175, Fragment as Fragment62 } from "react/jsx-runtime";
+import { jsx as jsx332, jsxs as jsxs175, Fragment as Fragment61 } from "react/jsx-runtime";
 var input2 = {
   width: "100%"
 };
@@ -62092,7 +62279,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
             placeholder: "Search compositions...",
             rightAlign: false
           }),
-          showKeyboardShortcuts ? /* @__PURE__ */ jsxs175(Fragment62, {
+          showKeyboardShortcuts ? /* @__PURE__ */ jsxs175(Fragment61, {
             children: [
               /* @__PURE__ */ jsx332(Spacing, {
                 x: 2
@@ -62515,7 +62702,7 @@ var GuiRenderStatus = ({ job }) => {
 };
 
 // src/components/RenderModal/RenderStatusModal.tsx
-import { jsx as jsx337, jsxs as jsxs178, Fragment as Fragment63 } from "react/jsx-runtime";
+import { jsx as jsx337, jsxs as jsxs178, Fragment as Fragment62 } from "react/jsx-runtime";
 var container54 = {
   padding: 20,
   maxWidth: 900,
@@ -62597,7 +62784,7 @@ var RenderStatusModal = ({
       /* @__PURE__ */ jsxs178("div", {
         style: container54,
         children: [
-          job.status === "failed" ? /* @__PURE__ */ jsxs178(Fragment63, {
+          job.status === "failed" ? /* @__PURE__ */ jsxs178(Fragment62, {
             children: [
               /* @__PURE__ */ jsx337("p", {
                 children: "The render failed because of the following error:"
@@ -63162,7 +63349,7 @@ var CliCopyButton = ({
 };
 
 // src/components/RenderModal/OptionExplainer.tsx
-import { jsx as jsx343, jsxs as jsxs179, Fragment as Fragment64 } from "react/jsx-runtime";
+import { jsx as jsx343, jsxs as jsxs179, Fragment as Fragment63 } from "react/jsx-runtime";
 var container55 = {
   fontSize: 14,
   paddingTop: 10,
@@ -63233,7 +63420,7 @@ var OptionExplainer = ({
                 style: title4,
                 children: option.name
               }),
-              option.docLink ? /* @__PURE__ */ jsxs179(Fragment64, {
+              option.docLink ? /* @__PURE__ */ jsxs179(Fragment63, {
                 children: [
                   /* @__PURE__ */ jsx343(Spacing, {
                     x: 1
@@ -63279,7 +63466,7 @@ var OptionExplainer = ({
           })
         ]
       }),
-      hasInfoRows ? /* @__PURE__ */ jsxs179(Fragment64, {
+      hasInfoRows ? /* @__PURE__ */ jsxs179(Fragment63, {
         children: [
           /* @__PURE__ */ jsx343(Spacing, {
             y: 0.5,
@@ -63407,7 +63594,7 @@ var WebRendererCustomOptionExplainerBubble = ({ apiName, description: descriptio
 };
 
 // src/components/RenderModal/NumberSetting.tsx
-import { jsx as jsx345, jsxs as jsxs180, Fragment as Fragment65 } from "react/jsx-runtime";
+import { jsx as jsx345, jsxs as jsxs180, Fragment as Fragment64 } from "react/jsx-runtime";
 var NumberSetting = ({ name, value, step, hint, onValueChanged, max, min, formatter }) => {
   const onTextChanged = useCallback195((e) => {
     onValueChanged((q) => {
@@ -63428,7 +63615,7 @@ var NumberSetting = ({ name, value, step, hint, onValueChanged, max, min, format
         style: label6,
         children: [
           name,
-          hint ? /* @__PURE__ */ jsxs180(Fragment65, {
+          hint ? /* @__PURE__ */ jsxs180(Fragment64, {
             children: [
               /* @__PURE__ */ jsx345(Spacing, {
                 x: 0.5
@@ -64419,7 +64606,7 @@ var useFileExistence = (outName) => {
 
 // src/components/RenderModal/RenderModalOutputName.tsx
 import { useCallback as useCallback199 } from "react";
-import { jsx as jsx351, jsxs as jsxs184, Fragment as Fragment66 } from "react/jsx-runtime";
+import { jsx as jsx351, jsxs as jsxs184, Fragment as Fragment65 } from "react/jsx-runtime";
 var existsMessageStyle = {
   display: "inline-flex",
   alignItems: "center",
@@ -64476,7 +64663,7 @@ var RenderModalOutputName = ({
               onChange: onValueChange,
               rightAlign: true
             }),
-            validationMessage ? /* @__PURE__ */ jsxs184(Fragment66, {
+            validationMessage ? /* @__PURE__ */ jsxs184(Fragment65, {
               children: [
                 /* @__PURE__ */ jsx351(Spacing, {
                   y: 1,
@@ -64488,7 +64675,7 @@ var RenderModalOutputName = ({
                   type: "error"
                 })
               ]
-            }) : existence ? /* @__PURE__ */ jsxs184(Fragment66, {
+            }) : existence ? /* @__PURE__ */ jsxs184(Fragment65, {
               children: [
                 /* @__PURE__ */ jsx351(Spacing, {
                   y: 1,
@@ -64519,7 +64706,7 @@ var RenderModalOutputName = ({
 };
 
 // src/components/RenderModal/SeparateAudioOption.tsx
-import { jsx as jsx352, jsxs as jsxs185, Fragment as Fragment67 } from "react/jsx-runtime";
+import { jsx as jsx352, jsxs as jsxs185, Fragment as Fragment66 } from "react/jsx-runtime";
 var SeparateAudioOptionInput = ({ separateAudioTo, setSeparateAudioTo, audioCodec }) => {
   const existence = useFileExistence(separateAudioTo);
   const onValueChange = useCallback200((e) => {
@@ -64551,7 +64738,7 @@ var SeparateAudioOption = ({ separateAudioTo, setSeparateAudioTo, audioCodec, ou
       setSeparateAudioTo(null);
     }
   }, [audioCodec, outName, setSeparateAudioTo]);
-  return /* @__PURE__ */ jsxs185(Fragment67, {
+  return /* @__PURE__ */ jsxs185(Fragment66, {
     children: [
       /* @__PURE__ */ jsxs185("div", {
         style: optionRow,
@@ -64589,7 +64776,7 @@ var SeparateAudioOption = ({ separateAudioTo, setSeparateAudioTo, audioCodec, ou
 };
 
 // src/components/RenderModal/RenderModalAudio.tsx
-import { jsx as jsx353, jsxs as jsxs186, Fragment as Fragment68 } from "react/jsx-runtime";
+import { jsx as jsx353, jsxs as jsxs186, Fragment as Fragment67 } from "react/jsx-runtime";
 var container58 = {
   flex: 1,
   overflowY: "auto"
@@ -64659,7 +64846,7 @@ var RenderModalAudio = ({
     style: container58,
     className: VERTICAL_SCROLLBAR_CLASSNAME,
     children: [
-      renderMode === "video" ? /* @__PURE__ */ jsxs186(Fragment68, {
+      renderMode === "video" ? /* @__PURE__ */ jsxs186(Fragment67, {
         children: [
           /* @__PURE__ */ jsx353(MutedSetting, {
             enforceAudioTrack,
@@ -64694,7 +64881,7 @@ var RenderModalAudio = ({
           })
         ]
       }) : null,
-      (renderMode === "video" || renderMode === "audio") && !muted && /* @__PURE__ */ jsxs186(Fragment68, {
+      (renderMode === "video" || renderMode === "audio") && !muted && /* @__PURE__ */ jsxs186(Fragment67, {
         children: [
           /* @__PURE__ */ jsx353(EnforceAudioTrackSetting, {
             muted,
@@ -65313,7 +65500,7 @@ var labelx264Preset = (profile) => {
 };
 
 // src/components/RenderModal/RenderModalEncoding.tsx
-import { jsx as jsx357, jsxs as jsxs190, Fragment as Fragment69 } from "react/jsx-runtime";
+import { jsx as jsx357, jsxs as jsxs190, Fragment as Fragment68 } from "react/jsx-runtime";
 var qualityControlModes = ["crf", "bitrate"];
 var container61 = {
   flex: 1,
@@ -65498,7 +65685,7 @@ var RenderModalEncoding = ({
           })
         ]
       }) : null,
-      renderMode === "video" ? /* @__PURE__ */ jsxs190(Fragment69, {
+      renderMode === "video" ? /* @__PURE__ */ jsxs190(Fragment68, {
         children: [
           /* @__PURE__ */ jsxs190("div", {
             style: optionRow,
@@ -65722,7 +65909,7 @@ var RenderModalEncoding = ({
           })
         ]
       }) : null,
-      renderMode === "still" ? null : /* @__PURE__ */ jsxs190(Fragment69, {
+      renderMode === "still" ? null : /* @__PURE__ */ jsxs190(Fragment68, {
         children: [
           renderMode === "video" ? /* @__PURE__ */ jsx357(RenderModalHr, {}) : null,
           /* @__PURE__ */ jsxs190("div", {
@@ -65786,7 +65973,7 @@ var InlineEyeButton = ({ onClick, enabled }) => {
 };
 
 // src/components/RenderModal/EnvInput.tsx
-import { jsx as jsx359, jsxs as jsxs191, Fragment as Fragment70 } from "react/jsx-runtime";
+import { jsx as jsx359, jsxs as jsxs191, Fragment as Fragment69 } from "react/jsx-runtime";
 var input3 = {
   flex: 1,
   width: "100%"
@@ -65833,7 +66020,7 @@ var EnvInput = ({
     setValueWarningEligible(true);
   }, []);
   const isNodeEnvKey = envKey.trim() === "NODE_ENV";
-  return /* @__PURE__ */ jsxs191(Fragment70, {
+  return /* @__PURE__ */ jsxs191(Fragment69, {
     children: [
       /* @__PURE__ */ jsxs191(Row, {
         align: "center",
@@ -66113,7 +66300,7 @@ var JpegQualitySetting = ({ jpegQuality, setJpegQuality }) => {
 
 // src/components/RenderModal/ScaleSetting.tsx
 import { useMemo as useMemo211 } from "react";
-import { jsx as jsx364, jsxs as jsxs195, Fragment as Fragment71 } from "react/jsx-runtime";
+import { jsx as jsx364, jsxs as jsxs195, Fragment as Fragment70 } from "react/jsx-runtime";
 var MIN_SCALE = 0.1;
 var MAX_SCALE = 10;
 var outputDimensionsStyle = {
@@ -66131,7 +66318,7 @@ var ScaleSetting = ({ scale, setScale, compositionWidth, compositionHeight }) =>
     const outputHeight = Math.round(compositionHeight * scale);
     return `${outputWidth}×${outputHeight}`;
   }, [compositionWidth, compositionHeight, scale]);
-  return /* @__PURE__ */ jsxs195(Fragment71, {
+  return /* @__PURE__ */ jsxs195(Fragment70, {
     children: [
       /* @__PURE__ */ jsx364(NumberSetting, {
         min: MIN_SCALE,
@@ -67570,7 +67757,7 @@ var useEncodableVideoCodecs = (container65) => {
 
 // src/components/RenderModal/WebRenderModalAdvanced.tsx
 import { useCallback as useCallback212, useMemo as useMemo213 } from "react";
-import { jsx as jsx368, jsxs as jsxs198, Fragment as Fragment72 } from "react/jsx-runtime";
+import { jsx as jsx368, jsxs as jsxs198, Fragment as Fragment71 } from "react/jsx-runtime";
 var tabContainer = {
   flex: 1
 };
@@ -67582,7 +67769,7 @@ var lastParagraph = {
   margin: 0
 };
 var PageResponsivenessDescription = () => {
-  return /* @__PURE__ */ jsxs198(Fragment72, {
+  return /* @__PURE__ */ jsxs198(Fragment71, {
     children: [
       /* @__PURE__ */ jsx368("p", {
         style: paragraph,
@@ -67814,7 +68001,7 @@ var WebRenderModalAdvanced = ({
           })
         ]
       }) : null,
-      renderMode === "still" ? null : /* @__PURE__ */ jsxs198(Fragment72, {
+      renderMode === "still" ? null : /* @__PURE__ */ jsxs198(Fragment71, {
         children: [
           /* @__PURE__ */ jsxs198("div", {
             style: optionRow,
@@ -67887,7 +68074,7 @@ var getQualityOptions = (selectedQuality, setQuality) => {
 };
 
 // src/components/RenderModal/WebRenderModalAudio.tsx
-import { jsx as jsx370, jsxs as jsxs199, Fragment as Fragment73 } from "react/jsx-runtime";
+import { jsx as jsx370, jsxs as jsxs199, Fragment as Fragment72 } from "react/jsx-runtime";
 var container65 = {
   flex: 1,
   overflowY: "auto"
@@ -67965,7 +68152,7 @@ var WebRenderModalAudio = ({
         muted,
         setMuted
       }),
-      showAudioSettings ? /* @__PURE__ */ jsxs199(Fragment73, {
+      showAudioSettings ? /* @__PURE__ */ jsxs199(Fragment72, {
         children: [
           isAudioOnly ? null : /* @__PURE__ */ jsx370(RenderModalHr, {}),
           /* @__PURE__ */ jsxs199("div", {
@@ -68030,7 +68217,7 @@ var WebRenderModalAudio = ({
 
 // src/components/RenderModal/WebRenderModalBasic.tsx
 import { useMemo as useMemo215 } from "react";
-import { jsx as jsx371, jsxs as jsxs200, Fragment as Fragment74 } from "react/jsx-runtime";
+import { jsx as jsx371, jsxs as jsxs200, Fragment as Fragment73 } from "react/jsx-runtime";
 var tabContainer2 = {
   flex: 1
 };
@@ -68150,7 +68337,7 @@ var WebRenderModalBasic = ({
   return /* @__PURE__ */ jsxs200("div", {
     style: tabContainer2,
     children: [
-      renderMode === "still" ? /* @__PURE__ */ jsxs200(Fragment74, {
+      renderMode === "still" ? /* @__PURE__ */ jsxs200(Fragment73, {
         children: [
           /* @__PURE__ */ jsxs200("div", {
             style: optionRow,
@@ -68195,7 +68382,7 @@ var WebRenderModalBasic = ({
             ]
           }) : null
         ]
-      }) : /* @__PURE__ */ jsxs200(Fragment74, {
+      }) : /* @__PURE__ */ jsxs200(Fragment73, {
         children: [
           /* @__PURE__ */ jsxs200("div", {
             style: optionRow,
@@ -68400,7 +68587,7 @@ var WebRenderModalLicenseKeyDetails = ({ details }) => {
 };
 
 // src/components/RenderModal/WebRenderModalLicense.tsx
-import { jsx as jsx374, jsxs as jsxs202, Fragment as Fragment75 } from "react/jsx-runtime";
+import { jsx as jsx374, jsxs as jsxs202, Fragment as Fragment74 } from "react/jsx-runtime";
 var row11 = {
   display: "flex",
   flexDirection: "row",
@@ -68653,7 +68840,7 @@ var WebRenderModalLicense = ({
             style: inputStyle3,
             autoFocus: true
           }),
-          licenseValidation.message ? /* @__PURE__ */ jsxs202(Fragment75, {
+          licenseValidation.message ? /* @__PURE__ */ jsxs202(Fragment74, {
             children: [
               /* @__PURE__ */ jsx374(Spacing, {
                 y: 1,
@@ -68666,7 +68853,7 @@ var WebRenderModalLicense = ({
               })
             ]
           }) : null,
-          licenseValidation.valid && licenseKey.length > 0 ? /* @__PURE__ */ jsxs202(Fragment75, {
+          licenseValidation.valid && licenseKey.length > 0 ? /* @__PURE__ */ jsxs202(Fragment74, {
             children: [
               /* @__PURE__ */ jsx374(Spacing, {
                 y: 1,
@@ -68685,7 +68872,7 @@ var WebRenderModalLicense = ({
               })
             ]
           }) : null,
-          isLoading && /* @__PURE__ */ jsxs202(Fragment75, {
+          isLoading && /* @__PURE__ */ jsxs202(Fragment74, {
             children: [
               /* @__PURE__ */ jsx374(Spacing, {
                 y: 1,
@@ -68694,7 +68881,7 @@ var WebRenderModalLicense = ({
               "Loading license key details..."
             ]
           }),
-          licenseValidation.details && /* @__PURE__ */ jsxs202(Fragment75, {
+          licenseValidation.details && /* @__PURE__ */ jsxs202(Fragment74, {
             children: [
               /* @__PURE__ */ jsx374(Spacing, {
                 y: 1,
@@ -68727,7 +68914,7 @@ var WebRenderModalLicense = ({
 
 // src/components/RenderModal/WebRenderModalPicture.tsx
 import { useCallback as useCallback214, useMemo as useMemo216 } from "react";
-import { jsx as jsx375, jsxs as jsxs203, Fragment as Fragment76 } from "react/jsx-runtime";
+import { jsx as jsx375, jsxs as jsxs203, Fragment as Fragment75 } from "react/jsx-runtime";
 var tabContainer4 = {
   flex: 1
 };
@@ -68757,7 +68944,7 @@ var WebRenderModalPicture = ({
         compositionWidth,
         compositionHeight
       }),
-      renderMode !== "video" ? null : /* @__PURE__ */ jsxs203(Fragment76, {
+      renderMode !== "video" ? null : /* @__PURE__ */ jsxs203(Fragment75, {
         children: [
           /* @__PURE__ */ jsxs203("div", {
             style: optionRow,
@@ -69538,7 +69725,7 @@ var KnownBugs = ({ bugs }) => {
 };
 
 // src/components/UpdateModal/UpdateModal.tsx
-import { jsx as jsx380, jsxs as jsxs207, Fragment as Fragment77 } from "react/jsx-runtime";
+import { jsx as jsx380, jsxs as jsxs207, Fragment as Fragment76 } from "react/jsx-runtime";
 var container67 = {
   padding: 20,
   paddingTop: 0
@@ -69589,7 +69776,7 @@ var UpdateModal = ({ info, knownBugs }) => {
       /* @__PURE__ */ jsxs207("div", {
         style: container67,
         children: [
-          hasKnownBugs ? /* @__PURE__ */ jsxs207(Fragment77, {
+          hasKnownBugs ? /* @__PURE__ */ jsxs207(Fragment76, {
             children: [
               /* @__PURE__ */ jsxs207("div", {
                 style: title6,
@@ -69669,11 +69856,11 @@ var UpdateModal = ({ info, knownBugs }) => {
 };
 
 // src/components/Modals.tsx
-import { jsx as jsx381, jsxs as jsxs208, Fragment as Fragment78 } from "react/jsx-runtime";
+import { jsx as jsx381, jsxs as jsxs208, Fragment as Fragment77 } from "react/jsx-runtime";
 var Modals = ({ readOnlyStudio }) => {
   const { selectedModal: modalContextType } = useContext149(ModalsContext);
   const canRender = useContext149(StudioServerConnectionCtx).previewServerState.type === "connected";
-  return /* @__PURE__ */ jsxs208(Fragment78, {
+  return /* @__PURE__ */ jsxs208(Fragment77, {
     children: [
       modalContextType && modalContextType.type === "new-comp" && /* @__PURE__ */ jsx381(NewComposition, {
         folderName: modalContextType.folderName,
@@ -70522,12 +70709,14 @@ var makeDefaultGlobalCSS = () => {
 	    box-shadow: ${FOCUS_BOX_SHADOW};
 	  }
 
-  .__remotion-composition-selector-item:focus {
+  .__remotion-composition-selector-item:focus,
+  .__remotion-inspector-inline-action:focus {
     outline: none;
     box-shadow: none;
   }
 
-  .__remotion-composition-selector-item:focus-visible {
+  .__remotion-composition-selector-item:focus-visible,
+  .__remotion-inspector-inline-action:focus-visible {
     box-shadow: ${FOCUS_BOX_SHADOW};
   }