@remotion/studio 4.0.495 → 4.0.496

package/dist/esm/internals.mjs

@@ -1791,6 +1791,7 @@ import { useMemo as useMemo8 } from "react";
 import { jsx as jsx10 } 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 = useMemo8(() => {
     return {
@@ -4714,6 +4715,30 @@ var getFolderMenuItems = ({
   ].filter(NoReactInternals2.truthy);
 };
 
+// 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 left = 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=${left},top=${top}`);
+    },
+    quickSwitcherLabel: null,
+    subMenu: null,
+    type: "item",
+    value: "open-in-new-window"
+  };
+};
+
 // src/components/RenderQueue/actions.ts
 import { NoReactInternals as NoReactInternals3 } from "remotion/no-react";
 var addStillRenderJob = ({
@@ -5570,7 +5595,7 @@ var CompositionSelectorItem = ({
   const style2 = useMemo21(() => {
     return {
       ...itemStyle,
-      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]);
@@ -5608,26 +5633,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 left = 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=${left},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"
@@ -11597,8 +11603,17 @@ var container10 = {
   backgroundColor: INPUT_BACKGROUND,
   borderWidth: 1,
   borderStyle: "solid",
+  borderRadius: 4,
+  fontFamily: "inherit",
   maxWidth: "100%"
 };
+var compactContainer = {
+  ...container10,
+  boxSizing: "border-box",
+  borderRadius: 0,
+  height: COMPACT_CONTROL_ROW_HEIGHT + 2,
+  padding: "5px 6px"
+};
 var smallContainer = {
   ...container10,
   padding: "3px 4px"
@@ -11607,16 +11622,31 @@ var label = {
   flex: 1,
   overflow: "hidden",
   textOverflow: "ellipsis",
+  color: "inherit",
+  fontFamily: "inherit",
   fontSize: 14,
+  lineHeight: "21px",
+  minWidth: 0,
   textAlign: "left",
   whiteSpace: "nowrap"
 };
+var compactLabel = {
+  ...label,
+  fontSize: 12,
+  lineHeight: "16px"
+};
 var smallLabel = {
   ...label,
   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] = useState22(false);
   const [opened, setOpened] = useState22(false);
   const ref = useRef18(null);
@@ -11726,7 +11756,7 @@ var Combobox = ({ values, selectedId, style: customStyle, title, small = false }
   const selected = values.find((v) => v.id === selectedId);
   const style2 = useMemo31(() => {
     return {
-      ...small ? smallContainer : container10,
+      ...controlSize === "small" ? smallContainer : controlSize === "compact" ? compactContainer : container10,
       ...customStyle ?? {},
       userSelect: "none",
       WebkitUserSelect: "none",
@@ -11736,7 +11766,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 : label;
   return /* @__PURE__ */ jsxs13(Fragment5, {
     children: [
       /* @__PURE__ */ jsxs13("button", {
@@ -11749,15 +11780,15 @@ var Combobox = ({ values, selectedId, style: customStyle, title, small = false }
         children: [
           selected ? /* @__PURE__ */ jsx47("div", {
             title: typeof selected.label === "string" ? selected.label : undefined,
-            style: small ? smallLabel : label,
+            style: selectedLabelStyle,
             children: selected?.label
           }) : null,
           /* @__PURE__ */ jsx47(Spacing, {
-            x: small ? 0.5 : 1
+            x: controlSize === "default" ? 1 : 0.5
           }),
           " ",
           /* @__PURE__ */ jsx47(CaretDown, {
-            small
+            small: controlSize === "small"
           })
         ]
       }),
@@ -11829,7 +11860,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 = [];
@@ -11854,7 +11885,7 @@ var SizeSelector = () => {
   const { canvasContent } = useContext20(Internals24.CompositionManager);
   const style2 = useMemo32(() => {
     return {
-      padding: CONTROL_BUTTON_PADDING
+      padding: CONTROL_BUTTON_PADDING - 2
     };
   }, []);
   const zoomable = useMemo32(() => {
@@ -11898,6 +11929,7 @@ var SizeSelector = () => {
     style: style2,
     "aria-label": accessibilityLabel,
     children: /* @__PURE__ */ jsx48(Combobox, {
+      size: "compact",
       title: accessibilityLabel,
       style: comboStyle,
       selectedId: String(size.size),
@@ -27790,7 +27822,7 @@ var AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio }
     return {
       ...itemStyle2,
       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]);
@@ -27870,6 +27902,11 @@ var AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio }
   }, [confirm, relativePath]);
   const contextMenu = useMemo61(() => {
     return [
+      getOpenInNewWindowMenuItem(`/assets/${relativePath}`),
+      {
+        type: "divider",
+        id: "open-in-new-window-divider"
+      },
       {
         id: "copy-asset-file-name",
         keyHint: null,
@@ -28941,7 +28978,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);
@@ -29003,18 +29080,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 = useMemo67(() => {
     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__ */ jsxs51("span", {
       style: innerStyle,
@@ -29025,14 +29108,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,
@@ -29079,8 +29162,20 @@ var subtitle = {
   textOverflow: "ellipsis",
   whiteSpace: "nowrap"
 };
-var InspectorInfoHeader = ({ children, contentSized = false, minHeight }) => {
-  const style5 = contentSized ? containerBase : minHeight === undefined ? container23 : { ...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 ? container23 : { ...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", {
@@ -29092,9 +29187,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
   });
 };
@@ -29299,6 +29394,7 @@ var AssetInfo = ({ assetName, contentSized = false, onAssetClick, readOnlyStudio
   const mediaDetailLines = mediaMetadata ? getCurrentAssetMediaDetailLines(mediaMetadata) : [];
   return /* @__PURE__ */ jsxs52(InspectorInfoHeader, {
     contentSized,
+    padding: contentSized ? `0 ${INSPECTOR_PANEL_HORIZONTAL_PADDING}px 6px` : "4px 0",
     children: [
       /* @__PURE__ */ jsx118(InlineEditableTitle, {
         value: fileName,
@@ -29306,16 +29402,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);
       })
@@ -29373,31 +29473,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,
@@ -29504,7 +29579,11 @@ var detailRow = {
 };
 var detailLabel = {
   color: LIGHT_TEXT,
-  fontSize: 13
+  fontSize: 13,
+  minWidth: 0,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
 };
 var detailValue = {
   color: WHITE,
@@ -29515,22 +29594,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",
@@ -29596,13 +29661,13 @@ var label4 = {
   whiteSpace: "normal",
   overflowWrap: "anywhere"
 };
-var compactLabel = {
+var compactLabel2 = {
   ...label4,
   fontSize: 12
 };
 var ValidationMessage = ({ message, align, type, action, size: size2 = "default" }) => {
   const iconStyle3 = size2 === "compact" ? compactStyle : style5;
-  const labelStyle4 = size2 === "compact" ? compactLabel : label4;
+  const labelStyle4 = size2 === "compact" ? compactLabel2 : label4;
   const finalStyle = useMemo69(() => {
     return {
       ...iconStyle3,
@@ -29671,45 +29736,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__ */ jsxs54("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
     })
   });
 };
@@ -29747,7 +29799,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)`
 };
@@ -29755,6 +29807,9 @@ var inlineLabelButtonDisabled = {
   ...inlineLabelButton,
   opacity: 0.35
 };
+var compactInlineLabelButton = {
+  height: COMPACT_INLINE_ROW_HEIGHT
+};
 var inlineLabelText = {
   color: LIGHT_TEXT,
   flex: 1,
@@ -29774,7 +29829,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(() => ({
@@ -29784,8 +29847,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
@@ -29797,17 +29861,19 @@ var InspectorInlineAction = ({ children, disabled, onClick, renderIcon, style: s
     setHovered(false);
   }, []);
   return /* @__PURE__ */ jsxs54("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
@@ -33302,7 +33368,7 @@ var ZodEnumEditor = ({ schema, jsonPath, setValue, value, onRemove }) => {
           values: comboBoxValues,
           selectedId: value,
           title: value,
-          small: true
+          size: "small"
         })
       }),
       /* @__PURE__ */ jsx152(ZodFieldValidation, {
@@ -33705,7 +33771,7 @@ var ZodStaticFileEditor = ({ schema, jsonPath, setValue, value, onRemove, mayPad
           values: comboBoxValues,
           selectedId: value,
           title: value,
-          small: true
+          size: "small"
         })
       }),
       /* @__PURE__ */ jsx159(ZodFieldValidation, {
@@ -34362,7 +34428,7 @@ var ZodDiscriminatedUnionEditor = ({ schema, setValue, value, mayPad, jsonPath,
             title: "Select type",
             values: comboBoxValues,
             selectedId: value[discriminator],
-            small: true
+            size: "small"
           })
         ]
       }, "replacement")
@@ -35507,7 +35573,8 @@ var InlineCompositionName = ({ compositionId, stack: stack2, compositions }) =>
   return /* @__PURE__ */ jsx177(InlineEditableTitle, {
     value: compositionId,
     canRename,
-    onCommit: commit
+    onCommit: commit,
+    size: "inspector"
   });
 };
 
@@ -35531,8 +35598,8 @@ var content5 = {
 var action = {
   flexShrink: 0,
   height: 24,
-  marginLeft: 4,
-  marginRight: -4
+  marginLeft: 0,
+  marginRight: 4
 };
 var icon3 = {
   flexShrink: 0,
@@ -35629,7 +35696,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 = useMemo107(() => {
     if (!location2?.source || location2.line === null) {
@@ -35669,6 +35736,16 @@ var InspectorSourceLocation = ({ location: location2, canOpen, onOpen, renderIco
   if (!label6) {
     return null;
   }
+  if (size2 === "inline-action") {
+    return /* @__PURE__ */ jsx179(InspectorInlineAction, {
+      disabled: !canOpen,
+      onClick,
+      renderIcon: (iconColor) => renderIcon?.(iconColor),
+      size: "compact",
+      title: fileLocation ?? undefined,
+      children: label6
+    });
+  }
   return /* @__PURE__ */ jsxs91("button", {
     type: "button",
     style: style8,
@@ -35687,12 +35764,16 @@ var InspectorSourceLocation = ({ location: location2, canOpen, onOpen, renderIco
 };
 
 // src/components/InspectorPanel/CompositionInspectorHeader.tsx
-import { jsx as jsx180, jsxs as jsxs92, Fragment as Fragment28 } from "react/jsx-runtime";
+import { jsx as jsx180, jsxs as jsxs92 } 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, {
@@ -35766,34 +35847,33 @@ var CompositionInspectorHeader = () => {
   }, [video]);
   return /* @__PURE__ */ jsx180(InspectorInfoHeader, {
     minHeight: COMPOSITION_INSPECTOR_HEADER_HEIGHT,
-    children: video ? /* @__PURE__ */ jsxs92(Fragment28, {
+    padding: "4px 0",
+    children: video ? /* @__PURE__ */ jsxs92(InspectorLocationCopy, {
+      location: validatedLocation,
+      name: video.id,
       children: [
-        /* @__PURE__ */ jsxs92(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
   });
@@ -35856,7 +35936,7 @@ var reconcilePendingCompositionMetadata = ({
 };
 
 // src/components/InspectorPanel/CompositionMetadata.tsx
-import { jsx as jsx181, jsxs as jsxs93, Fragment as Fragment29 } from "react/jsx-runtime";
+import { jsx as jsx181, jsxs as jsxs93, Fragment as Fragment28 } from "react/jsx-runtime";
 var compositionMetadataContainer = {
   ...detailsContainer,
   paddingBottom: 4,
@@ -36076,7 +36156,7 @@ var CompositionMetadata = ({ compositionId, disabled, stack: stack2 }) => {
           ]
         })
       }),
-      isStill ? null : /* @__PURE__ */ jsxs93(Fragment29, {
+      isStill ? null : /* @__PURE__ */ jsxs93(Fragment28, {
         children: [
           /* @__PURE__ */ jsx181(InspectorDetailRow, {
             label: "Frame rate",
@@ -36204,7 +36284,7 @@ var useCompositionActions = () => {
 };
 
 // src/components/InspectorPanel/CompositionInspector.tsx
-import { jsx as jsx182, jsxs as jsxs94, Fragment as Fragment30 } from "react/jsx-runtime";
+import { jsx as jsx182, jsxs as jsxs94, Fragment as Fragment29 } from "react/jsx-runtime";
 var actionIconStyle = {
   height: 18,
   width: 18
@@ -36292,7 +36372,7 @@ var CompositionDefaultPropsSection = ({ composition, currentDefaultProps, setDef
   if (!canShowDefaultPropsSection) {
     return null;
   }
-  return /* @__PURE__ */ jsxs94(Fragment30, {
+  return /* @__PURE__ */ jsxs94(Fragment29, {
     children: [
       /* @__PURE__ */ jsx182(InspectorSectionDivider, {}),
       /* @__PURE__ */ jsxs94("div", {
@@ -36360,7 +36440,7 @@ var CompositionVisualControlsSection = () => {
   if (!hasVisualControls) {
     return null;
   }
-  return /* @__PURE__ */ jsxs94(Fragment30, {
+  return /* @__PURE__ */ jsxs94(Fragment29, {
     children: [
       /* @__PURE__ */ jsx182(InspectorSectionDivider, {}),
       /* @__PURE__ */ jsxs94("div", {
@@ -36463,7 +36543,7 @@ import {
   useState as useState73
 } from "react";
 import { Easing, Internals as Internals57 } from "remotion";
-import { jsx as jsx183, jsxs as jsxs95, Fragment as Fragment31 } from "react/jsx-runtime";
+import { jsx as jsx183, jsxs as jsxs95, Fragment as Fragment30 } from "react/jsx-runtime";
 var SVG_WIDTH = 560;
 var SVG_HEIGHT = 320;
 var PLOT_LEFT = 42;
@@ -36803,7 +36883,7 @@ var EasingGraphScaffold = ({ labels }) => {
   const yOne = yToSvg(1);
   const bottomLabelWidth = getEasingGraphLabelWidth(labels.start);
   const topLabelWidth = getEasingGraphLabelWidth(labels.end);
-  return /* @__PURE__ */ jsxs95(Fragment31, {
+  return /* @__PURE__ */ jsxs95(Fragment30, {
     children: [
       /* @__PURE__ */ jsx183("line", {
         x1: PLOT_LEFT,
@@ -37221,7 +37301,7 @@ var EasingEditor = ({ state, renderHeader }) => {
           preset
         }, preset.id))
       }),
-      mode === "bezier" ? /* @__PURE__ */ jsxs95(Fragment31, {
+      mode === "bezier" ? /* @__PURE__ */ jsxs95(Fragment30, {
         children: [
           /* @__PURE__ */ jsxs95("svg", {
             ref: svgRef,
@@ -37421,7 +37501,7 @@ var EasingEditor = ({ state, renderHeader }) => {
             ]
           })
         ]
-      }) : /* @__PURE__ */ jsxs95(Fragment31, {
+      }) : /* @__PURE__ */ jsxs95(Fragment30, {
         children: [
           /* @__PURE__ */ jsxs95("svg", {
             width: SVG_WIDTH,
@@ -38453,7 +38533,7 @@ var useTimelineEasingKeyframeDrag = ({
 };
 
 // src/components/Timeline/TimelineKeyframeEasingLine.tsx
-import { jsx as jsx186, jsxs as jsxs97, Fragment as Fragment32 } from "react/jsx-runtime";
+import { jsx as jsx186, jsxs as jsxs97, Fragment as Fragment31 } from "react/jsx-runtime";
 var hitTargetHeight = 12;
 var lineHeight2 = 2;
 var easingLineButton = {
@@ -38604,7 +38684,7 @@ var TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, nod
   if (style8 === null) {
     return null;
   }
-  return /* @__PURE__ */ jsxs97(Fragment32, {
+  return /* @__PURE__ */ jsxs97(Fragment31, {
     children: [
       /* @__PURE__ */ jsx186("button", {
         ref: buttonRef,
@@ -38888,7 +38968,7 @@ import {
   useState as useState75
 } from "react";
 import { Internals as Internals61 } from "remotion";
-import { jsx as jsx188, jsxs as jsxs99, Fragment as Fragment33 } from "react/jsx-runtime";
+import { jsx as jsx188, jsxs as jsxs99, Fragment as Fragment32 } from "react/jsx-runtime";
 var comboStyle2 = {
   minWidth: 120
 };
@@ -39016,7 +39096,7 @@ var KeyframeSettings = ({ update }) => {
   const posterizeFormatter = useCallback107((value) => {
     return String(Math.round(Number(value)));
   }, []);
-  return /* @__PURE__ */ jsxs99(Fragment33, {
+  return /* @__PURE__ */ jsxs99(Fragment32, {
     children: [
       /* @__PURE__ */ jsx188(InspectorSectionHeader, {
         children: "Keyframe settings"
@@ -39024,7 +39104,7 @@ var KeyframeSettings = ({ update }) => {
       /* @__PURE__ */ jsxs99("div", {
         style: keyframeSettingsContainer,
         children: [
-          canEditInterpolationSettings ? /* @__PURE__ */ jsxs99(Fragment33, {
+          canEditInterpolationSettings ? /* @__PURE__ */ jsxs99(Fragment32, {
             children: [
               /* @__PURE__ */ jsx188(InspectorDetailRow, {
                 label: "Extrapolate left",
@@ -39033,7 +39113,7 @@ var KeyframeSettings = ({ update }) => {
                   selectedId: propStatus.clamping.left,
                   title: "Extrapolate left",
                   style: comboStyle2,
-                  small: true
+                  size: "small"
                 })
               }),
               /* @__PURE__ */ jsx188(InspectorDetailRow, {
@@ -39043,7 +39123,7 @@ var KeyframeSettings = ({ update }) => {
                   selectedId: propStatus.clamping.right,
                   title: "Extrapolate right",
                   style: comboStyle2,
-                  small: true
+                  size: "small"
                 })
               }),
               /* @__PURE__ */ jsx188(InspectorDetailRow, {
@@ -39053,7 +39133,7 @@ var KeyframeSettings = ({ update }) => {
                   selectedId: propStatus.output ?? "linear",
                   title: "Output",
                   style: comboStyle2,
-                  small: true
+                  size: "small"
                 })
               })
             ]
@@ -39303,7 +39383,32 @@ var ConnectedCompositionsSection = ({ connectedCompositions }) => {
 };
 
 // src/components/InspectorPanel/SequenceInspectorHeader.tsx
-import { jsx as jsx190, jsxs as jsxs100, Fragment as Fragment34 } from "react/jsx-runtime";
+import { jsx as jsx190, jsxs as jsxs100, 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 = useMemo120(() => {
@@ -39346,7 +39451,7 @@ var SequenceInspectorHeader = ({ sourceLocation, track }) => {
   }, [documentationLink]);
   const subtitleStyle = useMemo120(() => {
     return {
-      ...sequenceHeaderSubtitle,
+      ...sequenceInspectorSubtitle,
       cursor: documentationLink ? "pointer" : "default"
     };
   }, [documentationLink]);
@@ -39356,23 +39461,23 @@ var SequenceInspectorHeader = ({ sourceLocation, track }) => {
       return;
     });
   }, [saveName]);
-  return /* @__PURE__ */ jsx190("div", {
-    style: sequenceHeader,
+  return /* @__PURE__ */ jsx190(InspectorInfoHeader, {
+    contentSized: true,
+    padding: "4px 0",
     children: /* @__PURE__ */ jsxs100(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
@@ -39383,7 +39488,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"
         })
       ]
     })
@@ -39392,13 +39499,13 @@ var SequenceInspectorHeader = ({ sourceLocation, track }) => {
 var SequenceInspectorSections = ({ track }) => {
   const sourceLocation = useSequenceInspectorSourceLocation(track.sequence);
   const connectedCompositions = useConnectedCompositions({ track });
-  return /* @__PURE__ */ jsxs100(Fragment34, {
+  return /* @__PURE__ */ jsxs100(Fragment33, {
     children: [
       /* @__PURE__ */ jsx190(SequenceInspectorHeader, {
         sourceLocation,
         track
       }),
-      connectedCompositions.length > 0 ? /* @__PURE__ */ jsxs100(Fragment34, {
+      connectedCompositions.length > 0 ? /* @__PURE__ */ jsxs100(Fragment33, {
         children: [
           /* @__PURE__ */ jsx190(InspectorSectionDivider, {}),
           /* @__PURE__ */ jsx190(ConnectedCompositionsSection, {
@@ -39429,7 +39536,7 @@ var useTrackForSelection = (selection) => {
 };
 
 // src/components/InspectorPanel/EasingInspector.tsx
-import { jsx as jsx191, jsxs as jsxs101, Fragment as Fragment35 } from "react/jsx-runtime";
+import { jsx as jsx191, jsxs as jsxs101, Fragment as Fragment34 } from "react/jsx-runtime";
 var addKeyframeIcon = {
   display: "block",
   height: 18,
@@ -39599,16 +39706,13 @@ var EasingInspector = ({ selection }) => {
     timelinePosition,
     track
   ]);
-  const renderHeader = useCallback111(() => /* @__PURE__ */ jsxs101(Fragment35, {
+  const renderHeader = useCallback111(() => /* @__PURE__ */ jsxs101(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, {
@@ -39957,11 +40061,17 @@ import { useContext as useContext72, useMemo as useMemo124 } 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
@@ -39977,13 +40087,13 @@ var fieldNameBase = {
   minWidth: 0
 };
 var TimelineFieldLabel = ({ rowDepth, selected, label: label6, stacked = false }) => {
-  const { basePadding } = useContext72(TimelineRowLayoutContext);
+  const { basePadding, highlightSelectedLabel } = useContext72(TimelineRowLayoutContext);
   const labelRowStyle = useMemo124(() => ({
     ...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 = useMemo124(() => ({
     ...fieldNameBase,
     color: getTimelineColor(selected, true)
@@ -39999,7 +40109,7 @@ var TimelineFieldLabel = ({ rowDepth, selected, label: label6, stacked = false }
 };
 
 // src/components/Timeline/TimelineFieldRowContent.tsx
-import { jsx as jsx195, jsxs as jsxs103, Fragment as Fragment36 } from "react/jsx-runtime";
+import { jsx as jsx195, jsxs as jsxs103, Fragment as Fragment35 } from "react/jsx-runtime";
 var TimelineFieldRowContent = ({ field, rowDepth, selected, children }) => {
   const label6 = /* @__PURE__ */ jsx195(TimelineFieldLabel, {
     rowDepth,
@@ -40020,7 +40130,7 @@ var TimelineFieldRowContent = ({ field, rowDepth, selected, children }) => {
       ]
     });
   }
-  return /* @__PURE__ */ jsxs103(Fragment36, {
+  return /* @__PURE__ */ jsxs103(Fragment35, {
     children: [
       label6,
       value
@@ -40075,6 +40185,9 @@ var useTimelineKeyframeTracks = () => {
 
 // src/components/Timeline/TimelineKeyframeControls.tsx
 import { jsx as jsx197, jsxs as jsxs104 } 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",
@@ -40082,6 +40195,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",
@@ -40090,13 +40207,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";
@@ -40105,7 +40229,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";
 };
@@ -40524,16 +40648,18 @@ var TimelineKeyframeControls = ({
   const nextDisabled = nextDisplayFrame === null;
   const previousStyle = useMemo125(() => ({
     ...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 = useMemo125(() => ({
     ...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 = useMemo125(() => ({
     ...diamondButtonStyle,
     cursor: canToggleKeyframe && clientId ? "pointer" : "default",
@@ -40541,7 +40667,7 @@ var TimelineKeyframeControls = ({
   }), [canToggleKeyframe, clientId]);
   const diamondColor = hasKeyframeAtCurrentFrame ? BLUE : LIGHT_TEXT;
   return /* @__PURE__ */ jsxs104("div", {
-    style: controlsContainerStyle,
+    style: mode === "inspector" ? inspectorControlsContainerStyle : controlsContainerStyle,
     children: [
       /* @__PURE__ */ jsx197("button", {
         type: "button",
@@ -40712,7 +40838,7 @@ var TimelineStaticFileAssetField = ({
     ];
   }, [current, onSelect, staticFiles, upload]);
   return /* @__PURE__ */ jsx198(Combobox, {
-    small: true,
+    size: "small",
     title: current,
     selectedId: current,
     values: items,
@@ -40856,7 +40982,7 @@ var TimelineEnumField = ({
     }));
   }, [variantKeys, onSelect]);
   return /* @__PURE__ */ jsx201(Combobox, {
-    small: true,
+    size: "small",
     title: field.key,
     selectedId: current,
     values: items,
@@ -42380,7 +42506,7 @@ var GOOGLE_FONTS_LIST = [
 ];
 
 // src/components/Timeline/TimelineFontFamilyField.tsx
-import { jsx as jsx202, jsxs as jsxs105, Fragment as Fragment37 } from "react/jsx-runtime";
+import { jsx as jsx202, jsxs as jsxs105, Fragment as Fragment36 } from "react/jsx-runtime";
 var ROW_HEIGHT = 30;
 var LIST_HEIGHT = 280;
 var OVERSCAN = 10;
@@ -42870,7 +42996,7 @@ var TimelineFontFamilyField = ({
     };
   }, [hovered, opened]);
   const selectedPreviewStyle = getOptionPreviewStyle(selected);
-  return /* @__PURE__ */ jsxs105(Fragment37, {
+  return /* @__PURE__ */ jsxs105(Fragment36, {
     children: [
       /* @__PURE__ */ jsxs105("button", {
         ref: buttonRef,
@@ -44361,7 +44487,7 @@ var Padder = ({ depth }) => {
 };
 
 // src/components/Timeline/TimelineRowChrome.tsx
-import { jsx as jsx214, jsxs as jsxs111, Fragment as Fragment38 } from "react/jsx-runtime";
+import { jsx as jsx214, jsxs as jsxs111, Fragment as Fragment37 } from "react/jsx-runtime";
 var rowBase = {
   alignItems: "stretch",
   display: "flex"
@@ -44398,7 +44524,12 @@ var TimelineRowChrome = ({
   onDoubleClick
 }) => {
   const ref2 = useRef53(null);
-  const { basePadding, keyframeControlsPadding } = useContext75(TimelineRowLayoutContext);
+  const {
+    basePadding,
+    keyframeControlsPadding,
+    rowBorderRadius,
+    rowHorizontalMargin
+  } = useContext75(TimelineRowLayoutContext);
   const indentWidth = getTimelineRowIndentWidth(depth);
   useTimelineFocusableItem(selectionItem, ref2);
   const keyframeControlsColumnStyle = useMemo137(() => ({
@@ -44435,8 +44566,16 @@ var TimelineRowChrome = ({
   const innerRowStyle = useMemo137(() => ({
     ...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 = useMemo137(() => {
     if (outerHeight === null) {
       return;
@@ -44450,7 +44589,7 @@ var TimelineRowChrome = ({
       backgroundColor: highlightBackground
     };
   }, [outerHeight, highlightBackground]);
-  const chrome = /* @__PURE__ */ jsxs111(Fragment38, {
+  const chrome = /* @__PURE__ */ jsxs111(Fragment37, {
     children: [
       /* @__PURE__ */ jsx214("div", {
         style: leftChromeStyle,
@@ -45357,8 +45496,8 @@ var makeMovedKeyframedDragOverride2 = ({
 var removeKeyframeIcon = {
   display: "block",
   flexShrink: 0,
-  height: 18,
-  width: 18
+  height: 16,
+  width: 16
 };
 var TrashIcon = ({ color }) => {
   return /* @__PURE__ */ jsx217("svg", {
@@ -45366,7 +45505,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"
     })
   });
 };
@@ -45652,14 +45791,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, {
@@ -45696,14 +45832,11 @@ var KeyframeInspector = ({ selection }) => {
                   small: true
                 })
               }),
-              /* @__PURE__ */ jsxs112("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,
@@ -45719,17 +45852,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"
+            })
           })
         ]
       })
@@ -45750,7 +45885,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"
     })
   });
 };
@@ -46319,6 +46454,11 @@ var plusIcon = {
   width: 15,
   height: 15
 };
+var assetSelectorIcon = {
+  flexShrink: 0,
+  height: 18,
+  width: 18
+};
 var remoteSourceLabel = {
   color: LIGHT_TEXT,
   display: "flex",
@@ -46432,6 +46572,7 @@ var InspectorSequenceSection = ({
       openTimelineAssetLink(localAsset, selectAsset);
     }
   }, [localAsset, selectAsset]);
+  const localAssetFileName = localAsset ? localAsset.assetPath.split("/").pop() ?? localAsset.assetPath : null;
   const getIsExpanded = useCallback132((candidate) => {
     return !collapsedKeys.has(getInspectorExpansionKey(candidate));
   }, [collapsedKeys]);
@@ -46548,11 +46689,17 @@ var InspectorSequenceSection = ({
         children: controlGroups.map((group) => /* @__PURE__ */ jsxs114(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__ */ jsxs114("div", {
               style: remoteSourceLabel,
@@ -46992,10 +47139,10 @@ var AlignmentControls = ({ track }) => {
 };
 
 // src/components/InspectorPanel/SequenceSelectionInspector.tsx
-import { jsx as jsx229, jsxs as jsxs119, Fragment as Fragment39 } from "react/jsx-runtime";
+import { jsx as jsx229, jsxs as jsxs119, Fragment as Fragment38 } from "react/jsx-runtime";
 var splitIconStyle = {
-  height: 18,
-  width: 18
+  height: 16,
+  width: 16
 };
 var SplitSequenceAction = ({ selection, track }) => {
   const timelinePosition = Internals74.Timeline.useTimelinePosition();
@@ -47083,7 +47230,7 @@ var SequenceExpandedInspector = ({ track }) => {
         sourceLocation,
         track
       }),
-      connectedCompositions.length > 0 ? /* @__PURE__ */ jsxs119(Fragment39, {
+      connectedCompositions.length > 0 ? /* @__PURE__ */ jsxs119(Fragment38, {
         children: [
           /* @__PURE__ */ jsx229(InspectorSectionDivider, {}),
           /* @__PURE__ */ jsx229(ConnectedCompositionsSection, {
@@ -48476,7 +48623,7 @@ var RenderQueue = () => {
 
 // src/components/RendersTab.tsx
 import { useContext as useContext94, useMemo as useMemo155 } from "react";
-import { jsx as jsx248, jsxs as jsxs123, Fragment as Fragment40 } from "react/jsx-runtime";
+import { jsx as jsx248, jsxs as jsxs123, Fragment as Fragment39 } from "react/jsx-runtime";
 var row5 = {
   display: "flex",
   flexDirection: "row",
@@ -48515,7 +48662,7 @@ var RendersTab = ({ selected, onClick }) => {
       style: row5,
       children: [
         "Renders",
-        jobCount > 0 ? /* @__PURE__ */ jsxs123(Fragment40, {
+        jobCount > 0 ? /* @__PURE__ */ jsxs123(Fragment39, {
           children: [
             /* @__PURE__ */ jsx248(Flex, {}),
             /* @__PURE__ */ jsx248("div", {
@@ -49167,13 +49314,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 } = useContext100(Internals84.CompositionManager);
   const isStill = useIsStill();
   const style8 = useMemo158(() => {
     return {
-      padding: CONTROL_BUTTON_PADDING
+      padding: CONTROL_BUTTON_PADDING - 2
     };
   }, []);
   const items = useMemo158(() => {
@@ -49209,6 +49356,7 @@ var PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
     style: style8,
     "aria-label": accessibilityLabel5,
     children: /* @__PURE__ */ jsx256(Combobox, {
+      size: "compact",
       title: accessibilityLabel5,
       style: comboStyle3,
       selectedId: String(playbackRate),
@@ -49299,7 +49447,7 @@ var StepForward = (props) => {
 };
 
 // src/components/PlayPause.tsx
-import { jsx as jsx262, jsxs as jsxs126, Fragment as Fragment41 } from "react/jsx-runtime";
+import { jsx as jsx262, jsxs as jsxs126, Fragment as Fragment40 } from "react/jsx-runtime";
 var backStyle = {
   height: 18,
   color: WHITE
@@ -49491,7 +49639,7 @@ var PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted })
       stopped = true;
     };
   }, [bufferStateDelayInMilliseconds, emitter]);
-  return /* @__PURE__ */ jsxs126(Fragment41, {
+  return /* @__PURE__ */ jsxs126(Fragment40, {
     children: [
       /* @__PURE__ */ jsx262(ControlButton, {
         "aria-label": "Jump to beginning",
@@ -49542,7 +49690,7 @@ import { PlayerInternals as PlayerInternals17 } from "@remotion/player";
 import { useCallback as useCallback155, useContext as useContext101, useMemo as useMemo159, useRef as useRef55, useState as useState90 } from "react";
 import ReactDOM10 from "react-dom";
 import { Internals as Internals86 } from "remotion";
-import { jsx as jsx263, jsxs as jsxs127, Fragment as Fragment42 } from "react/jsx-runtime";
+import { jsx as jsx263, jsxs as jsxs127, Fragment as Fragment41 } from "react/jsx-runtime";
 var splitButtonContainer = {
   display: "inline-flex",
   flexDirection: "row",
@@ -49585,10 +49733,48 @@ var dropdownTriggerStyle = {
 };
 var mainButtonContent = {
   paddingLeft: 4,
-  paddingRight: 6
+  paddingRight: 6,
+  minWidth: 0
 };
 var label7 = {
-  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 = {
+  ...label7,
+  fontSize: 12,
+  lineHeight: "16px"
 };
 var RENDER_TYPE_STORAGE_KEY = "remotion.renderType";
 var getInitialRenderType = (readOnlyStudio) => {
@@ -49603,9 +49789,7 @@ var getInitialRenderType = (readOnlyStudio) => {
   } catch {}
   return "server-render";
 };
-var RenderButton = ({
-  readOnlyStudio
-}) => {
+var RenderButton = ({ readOnlyStudio, size: controlSize = "default" }) => {
   const { inFrame, outFrame } = useTimelineInOutFramePosition();
   const { setSelectedModal } = useContext101(ModalsContext);
   const [preferredRenderType, setPreferredRenderType] = useState90(() => getInitialRenderType(readOnlyStudio));
@@ -49666,11 +49850,12 @@ var RenderButton = ({
   const iconStyle5 = useMemo159(() => {
     return {
       style: {
-        height: 16,
-        color: CURRENT_COLOR
+        height: controlSize === "compact" ? 14 : 16,
+        color: CURRENT_COLOR,
+        flexShrink: 0
       }
     };
-  }, []);
+  }, [controlSize]);
   const video = Internals86.useVideo();
   const { getCurrentFrame: getCurrentFrame2 } = PlayerInternals17.usePlayer();
   const { props } = useContext101(Internals86.EditorPropsContext);
@@ -49887,15 +50072,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__ */ jsxs127(Fragment42, {
+  return /* @__PURE__ */ jsxs127(Fragment41, {
     children: [
       /* @__PURE__ */ jsx263("button", {
         style: { display: "none" },
@@ -49918,22 +50104,22 @@ var RenderButton = ({
         children: [
           /* @__PURE__ */ jsx263("button", {
             type: "button",
-            style: mainButtonStyle,
+            style: controlSize === "compact" ? compactMainButtonStyle : mainButtonStyle,
             onClick,
             id: "render-modal-button",
             children: /* @__PURE__ */ jsxs127(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: label7,
+                  style: controlSize === "compact" ? compactLabel3 : label7,
                   children: renderLabel
                 })
               ]
@@ -49945,7 +50131,7 @@ var RenderButton = ({
           /* @__PURE__ */ jsx263("button", {
             ref: dropdownRef,
             type: "button",
-            style: dropdownTriggerStyle,
+            style: controlSize === "compact" ? compactDropdownTriggerStyle : dropdownTriggerStyle,
             className: MENU_INITIATOR_CLASSNAME,
             onPointerDown,
             onClick: onClickDropdown,
@@ -50140,8 +50326,8 @@ var TimelineZoomControls = () => {
 };
 
 // src/components/PreviewToolbar.tsx
-import { jsx as jsx268, jsxs as jsxs129, Fragment as Fragment43 } from "react/jsx-runtime";
-var TOOLBAR_HEIGHT = 50;
+import { jsx as jsx268, jsxs as jsxs129, Fragment as Fragment42 } from "react/jsx-runtime";
+var TOOLBAR_HEIGHT = 40;
 var container38 = {
   display: "flex",
   justifyContent: "center",
@@ -50179,7 +50365,7 @@ var scrollIndicatorRight = {
 };
 var sideContainer = {
   width: 300,
-  height: 36,
+  height: 30,
   display: "flex",
   flexDirection: "row",
   alignItems: "center"
@@ -50277,7 +50463,7 @@ var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
         ref: leftScrollIndicatorRef,
         style: scrollIndicatorLeft
       }),
-      isMobileLayout ? null : /* @__PURE__ */ jsxs129(Fragment43, {
+      isMobileLayout ? null : /* @__PURE__ */ jsxs129(Fragment42, {
         children: [
           /* @__PURE__ */ jsxs129("div", {
             style: sideContainer,
@@ -50302,7 +50488,7 @@ var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
           }) : null
         ]
       }),
-      isVideoComposition ? /* @__PURE__ */ jsxs129(Fragment43, {
+      isVideoComposition ? /* @__PURE__ */ jsxs129(Fragment42, {
         children: [
           /* @__PURE__ */ jsx268(Spacing, {
             x: 2
@@ -50341,7 +50527,7 @@ var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
           })
         ]
       }) : null,
-      canvasContent?.type === "composition" ? /* @__PURE__ */ jsxs129(Fragment43, {
+      canvasContent?.type === "composition" ? /* @__PURE__ */ jsxs129(Fragment42, {
         children: [
           /* @__PURE__ */ jsx268(PreviewToolbarControl, {
             children: /* @__PURE__ */ jsx268(CheckboardToggle, {})
@@ -50365,7 +50551,7 @@ var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
         children: /* @__PURE__ */ jsx268(FullScreenToggle, {})
       }) : null,
       /* @__PURE__ */ jsx268(Flex, {}),
-      isMobileLayout && /* @__PURE__ */ jsxs129(Fragment43, {
+      isMobileLayout && /* @__PURE__ */ jsxs129(Fragment42, {
         children: [
           /* @__PURE__ */ jsx268(Flex, {}),
           /* @__PURE__ */ jsx268(PreviewToolbarControl, {
@@ -50391,7 +50577,8 @@ var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
           }),
           /* @__PURE__ */ jsx268(PreviewToolbarControl, {
             children: /* @__PURE__ */ jsx268(RenderButton, {
-              readOnlyStudio
+              readOnlyStudio,
+              size: "compact"
             })
           }),
           /* @__PURE__ */ jsx268(Spacing, {
@@ -50514,7 +50701,7 @@ var SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex,
 // src/components/Splitter/SplitterElement.tsx
 import { useContext as useContext105, useMemo as useMemo161 } from "react";
 import { interpolateColors, random } from "remotion";
-import { jsx as jsx270, jsxs as jsxs130, Fragment as Fragment44 } from "react/jsx-runtime";
+import { jsx as jsx270, jsxs as jsxs130, Fragment as Fragment43 } from "react/jsx-runtime";
 var SplitterElement = ({ children, type, sticky }) => {
   const context = useContext105(SplitterContext);
   const style8 = useMemo161(() => {
@@ -50534,7 +50721,7 @@ var SplitterElement = ({ children, type, sticky }) => {
       backgroundColor: interpolateColors(random(context.flexValue), [0, 1], [RED, "blue"])
     };
   }, [context.flexValue, type]);
-  return /* @__PURE__ */ jsxs130(Fragment44, {
+  return /* @__PURE__ */ jsxs130(Fragment43, {
     children: [
       /* @__PURE__ */ jsx270("div", {
         style: style8,
@@ -50829,7 +51016,7 @@ var TopPanelInner = ({ readOnlyStudio, onMounted, drawRef: drawRef2, bufferState
 var TopPanel = React186.memo(TopPanelInner);
 
 // src/components/SidebarCollapserControls.tsx
-import { jsx as jsx273, jsxs as jsxs132, Fragment as Fragment45 } from "react/jsx-runtime";
+import { jsx as jsx273, jsxs as jsxs132, Fragment as Fragment44 } from "react/jsx-runtime";
 var style8 = {
   width: 16,
   height: 16,
@@ -50961,7 +51148,7 @@ var SidebarCollapserControls = () => {
       })
     });
   }, [colorStyle, rightIcon, toggleRightTooltip]);
-  return /* @__PURE__ */ jsxs132(Fragment45, {
+  return /* @__PURE__ */ jsxs132(Fragment44, {
     children: [
       /* @__PURE__ */ jsx273(InlineAction, {
         onClick: toggleLeft,
@@ -51011,7 +51198,7 @@ var UndoIcon = (props) => {
 };
 
 // src/components/UndoRedoButtons.tsx
-import { jsx as jsx276, jsxs as jsxs133, Fragment as Fragment46 } from "react/jsx-runtime";
+import { jsx as jsx276, jsxs as jsxs133, Fragment as Fragment45 } from "react/jsx-runtime";
 var iconStyle6 = {
   width: 16,
   height: 16
@@ -51103,7 +51290,7 @@ var UndoRedoButtons = () => {
   if (!canUndo && !canRedo) {
     return null;
   }
-  return /* @__PURE__ */ jsxs133(Fragment46, {
+  return /* @__PURE__ */ jsxs133(Fragment45, {
     children: [
       /* @__PURE__ */ jsx276(InlineAction, {
         onClick: onUndo,
@@ -52270,7 +52457,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 jsx283, jsxs as jsxs137, Fragment as Fragment47 } from "react/jsx-runtime";
+import { jsx as jsx283, jsxs as jsxs137, Fragment as Fragment46 } from "react/jsx-runtime";
 var areaHighlight = {
   position: "absolute",
   backgroundColor: BLACK_ALPHA_50,
@@ -52288,7 +52475,7 @@ var TimelineInOutPointer = () => {
   if (!videoConfig || timelineWidth === null) {
     return null;
   }
-  return /* @__PURE__ */ jsxs137(Fragment47, {
+  return /* @__PURE__ */ jsxs137(Fragment46, {
     children: [
       inFrame !== null && /* @__PURE__ */ jsx283("div", {
         ref: inMarkerAreaRef,
@@ -52362,7 +52549,7 @@ var TimelineInOutPointerHandle = ({
 };
 
 // src/components/Timeline/TimelineInOutDragHandler.tsx
-import { jsx as jsx285, jsxs as jsxs138, Fragment as Fragment48 } from "react/jsx-runtime";
+import { jsx as jsx285, jsxs as jsxs138, Fragment as Fragment47 } from "react/jsx-runtime";
 var getClientXWithScroll2 = (x) => {
   return x + scrollableRef.current?.scrollLeft;
 };
@@ -52607,7 +52794,7 @@ var TimelineInOutDragHandlerInner = () => {
       }
     ];
   }, [setInAndOutFrames, videoConfig.id]);
-  return /* @__PURE__ */ jsxs138(Fragment48, {
+  return /* @__PURE__ */ jsxs138(Fragment47, {
     children: [
       inFrame !== null && /* @__PURE__ */ jsx285(ContextMenu, {
         values: inContextMenu,
@@ -52775,7 +52962,7 @@ var TimelineMediaInfo = ({ src }) => {
 
 // src/components/Timeline/TimelineSequenceName.tsx
 import { useCallback as useCallback167, useEffect as useEffect90, useMemo as useMemo175, useRef as useRef64, useState as useState98 } from "react";
-import { jsx as jsx288, jsxs as jsxs140, Fragment as Fragment49 } from "react/jsx-runtime";
+import { jsx as jsx288, jsxs as jsxs140, 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";
@@ -52875,7 +53062,7 @@ var TimelineSequenceName = ({
     save();
   }, [save]);
   if (editing) {
-    return /* @__PURE__ */ jsxs140(Fragment49, {
+    return /* @__PURE__ */ jsxs140(Fragment48, {
       children: [
         /* @__PURE__ */ jsx288("style", {
           children: `.${RENAME_INPUT_CLASS_NAME}::selection { background: ${WHITE_ALPHA_72}; color: ${BLACK}; }`
@@ -52970,7 +53157,7 @@ var useSequenceFreezeFrameMenuItem = ({
 };
 
 // src/components/Timeline/TimelineSequenceItem.tsx
-import { jsx as jsx289, jsxs as jsxs141, Fragment as Fragment50 } from "react/jsx-runtime";
+import { jsx as jsx289, jsxs as jsxs141, Fragment as Fragment49 } from "react/jsx-runtime";
 var labelContainerStyle = {
   alignItems: "center",
   alignSelf: "stretch",
@@ -53674,7 +53861,7 @@ var TimelineSequenceItem = ({
     children: /* @__PURE__ */ jsxs141("div", {
       style: labelContainerStyle,
       children: [
-        connectedCompositions.length > 0 ? /* @__PURE__ */ jsxs141(Fragment50, {
+        connectedCompositions.length > 0 ? /* @__PURE__ */ jsxs141(Fragment49, {
           children: [
             /* @__PURE__ */ jsx289(CompositionOrStillIcon, {
               color: getTimelineColor(false, false),
@@ -53695,7 +53882,7 @@ var TimelineSequenceItem = ({
           onCancelEditing: onCancelRenaming,
           onSaveName
         }),
-        mediaSrc ? /* @__PURE__ */ jsxs141(Fragment50, {
+        mediaSrc ? /* @__PURE__ */ jsxs141(Fragment49, {
           children: [
             /* @__PURE__ */ jsx289(Spacing, {
               x: 0.5
@@ -53728,7 +53915,7 @@ var TimelineSequenceItem = ({
       trackRow
     ]
   }) : trackRow;
-  return /* @__PURE__ */ jsxs141(Fragment50, {
+  return /* @__PURE__ */ jsxs141(Fragment49, {
     children: [
       previewConnected ? /* @__PURE__ */ jsx289(ContextMenu, {
         values: contextMenuValues,
@@ -54197,7 +54384,7 @@ var TimelineKeyframeDiamondUnmemoized = ({ frame: frame2, rowHeight, nodePathInf
 var TimelineKeyframeDiamond = React204.memo(TimelineKeyframeDiamondUnmemoized);
 
 // src/components/Timeline/TimelineExpandedKeyframeRow.tsx
-import { jsx as jsx293, jsxs as jsxs144, Fragment as Fragment51 } from "react/jsx-runtime";
+import { jsx as jsx293, jsxs as jsxs144, Fragment as Fragment50 } from "react/jsx-runtime";
 var row8 = {
   position: "relative"
 };
@@ -54208,7 +54395,7 @@ var TimelineExpandedKeyframeRowUnmemoized = ({ height, keyframes, canEditEasing,
   const timelineWidth = useContext123(TimelineWidthContext);
   const rowHighlightBackground = useTimelineRowHighlightBackground(nodePathInfo);
   const easingSegments = canEditEasing ? getTimelineEasingSegments(keyframes) : [];
-  return /* @__PURE__ */ jsxs144(Fragment51, {
+  return /* @__PURE__ */ jsxs144(Fragment50, {
     children: [
       showSeparator ? /* @__PURE__ */ jsx293("div", {
         style: rowSeparator
@@ -58120,7 +58307,7 @@ var CodemodFooter = ({
 };
 
 // src/components/NewComposition/DeleteComposition.tsx
-import { jsx as jsx315, jsxs as jsxs161, Fragment as Fragment52 } from "react/jsx-runtime";
+import { jsx as jsx315, jsxs as jsxs161, Fragment as Fragment51 } from "react/jsx-runtime";
 var content8 = {
   padding: 16,
   fontSize: 14,
@@ -58143,7 +58330,7 @@ var DeleteCompositionLoaded = ({ compositionId }) => {
   const onSubmit = useCallback179((e) => {
     e.preventDefault();
   }, []);
-  return /* @__PURE__ */ jsxs161(Fragment52, {
+  return /* @__PURE__ */ jsxs161(Fragment51, {
     children: [
       /* @__PURE__ */ jsx315(ModalHeader, {
         title: "Delete composition"
@@ -58306,7 +58493,7 @@ var InputAndValidationContainer = ({
 
 // src/components/NewComposition/NewCompDuration.tsx
 import { useCallback as useCallback181 } from "react";
-import { jsx as jsx318, jsxs as jsxs163, Fragment as Fragment53 } from "react/jsx-runtime";
+import { jsx as jsx318, jsxs as jsxs163, Fragment as Fragment52 } from "react/jsx-runtime";
 var NewCompDuration = ({ durationInFrames, setDurationInFrames }) => {
   const onDurationInFramesChanged = useCallback181((newValue) => {
     setDurationInFrames(Number(newValue));
@@ -58340,7 +58527,7 @@ var NewCompDuration = ({ durationInFrames, setDurationInFrames }) => {
               onValueChange: onDurationChangedDirectly,
               rightAlign: false
             }),
-            compDurationErrMessage ? /* @__PURE__ */ jsxs163(Fragment53, {
+            compDurationErrMessage ? /* @__PURE__ */ jsxs163(Fragment52, {
               children: [
                 /* @__PURE__ */ jsx318(Spacing, {
                   y: 1,
@@ -58361,7 +58548,7 @@ var NewCompDuration = ({ durationInFrames, setDurationInFrames }) => {
 };
 
 // src/components/NewComposition/DuplicateComposition.tsx
-import { jsx as jsx319, jsxs as jsxs164, Fragment as Fragment54 } from "react/jsx-runtime";
+import { jsx as jsx319, jsxs as jsxs164, Fragment as Fragment53 } from "react/jsx-runtime";
 var content10 = {
   padding: 12,
   paddingRight: 12,
@@ -58515,7 +58702,7 @@ var DuplicateCompositionLoaded = ({ initialType }) => {
   const onSubmit = useCallback182((e) => {
     e.preventDefault();
   }, []);
-  return /* @__PURE__ */ jsxs164(Fragment54, {
+  return /* @__PURE__ */ jsxs164(Fragment53, {
     children: [
       /* @__PURE__ */ jsx319(ModalHeader, {
         title: `Duplicate ${resolved.result.id}`
@@ -58564,7 +58751,7 @@ var DuplicateCompositionLoaded = ({ initialType }) => {
                           status: "ok",
                           rightAlign: true
                         }),
-                        compNameErrMessage ? /* @__PURE__ */ jsxs164(Fragment54, {
+                        compNameErrMessage ? /* @__PURE__ */ jsxs164(Fragment53, {
                           children: [
                             /* @__PURE__ */ jsx319(Spacing, {
                               y: 1,
@@ -58582,7 +58769,7 @@ var DuplicateCompositionLoaded = ({ initialType }) => {
                   })
                 ]
               }),
-              hadDimensionsDefined ? /* @__PURE__ */ jsxs164(Fragment54, {
+              hadDimensionsDefined ? /* @__PURE__ */ jsxs164(Fragment53, {
                 children: [
                   /* @__PURE__ */ jsxs164("div", {
                     style: optionRow,
@@ -58610,7 +58797,7 @@ var DuplicateCompositionLoaded = ({ initialType }) => {
                               onValueChange: onWidthDirectlyChanged,
                               rightAlign: false
                             }),
-                            compWidthErrMessage ? /* @__PURE__ */ jsxs164(Fragment54, {
+                            compWidthErrMessage ? /* @__PURE__ */ jsxs164(Fragment53, {
                               children: [
                                 /* @__PURE__ */ jsx319(Spacing, {
                                   y: 1,
@@ -58654,7 +58841,7 @@ var DuplicateCompositionLoaded = ({ initialType }) => {
                               onValueChange: onHeightDirectlyChanged,
                               rightAlign: false
                             }),
-                            compHeightErrMessage ? /* @__PURE__ */ jsxs164(Fragment54, {
+                            compHeightErrMessage ? /* @__PURE__ */ jsxs164(Fragment53, {
                               children: [
                                 /* @__PURE__ */ jsx319(Spacing, {
                                   y: 1,
@@ -58871,7 +59058,7 @@ var getNewCompositionDefaults = (composition) => {
 };
 
 // src/components/NewComposition/NewComposition.tsx
-import { jsx as jsx320, jsxs as jsxs165, Fragment as Fragment55 } from "react/jsx-runtime";
+import { jsx as jsx320, jsxs as jsxs165, Fragment as Fragment54 } from "react/jsx-runtime";
 var content11 = {
   padding: 12,
   paddingRight: 12,
@@ -58962,7 +59149,7 @@ var NewCompositionLoaded = ({ folderName, parentName, stack: stack2 }) => {
     e.preventDefault();
   }, []);
   const folderPath = [parentName, folderName].filter(Boolean).join("/");
-  return /* @__PURE__ */ jsxs165(Fragment55, {
+  return /* @__PURE__ */ jsxs165(Fragment54, {
     children: [
       /* @__PURE__ */ jsx320(ModalHeader, {
         title: "New composition"
@@ -59010,7 +59197,7 @@ var NewCompositionLoaded = ({ folderName, parentName, stack: stack2 }) => {
                           status: "ok",
                           rightAlign: true
                         }),
-                        compNameErrMessage ? /* @__PURE__ */ jsxs165(Fragment55, {
+                        compNameErrMessage ? /* @__PURE__ */ jsxs165(Fragment54, {
                           children: [
                             /* @__PURE__ */ jsx320(Spacing, {
                               y: 1,
@@ -59054,7 +59241,7 @@ var NewCompositionLoaded = ({ folderName, parentName, stack: stack2 }) => {
                           onValueChange: onWidthDirectlyChanged,
                           rightAlign: false
                         }),
-                        compWidthErrMessage ? /* @__PURE__ */ jsxs165(Fragment55, {
+                        compWidthErrMessage ? /* @__PURE__ */ jsxs165(Fragment54, {
                           children: [
                             /* @__PURE__ */ jsx320(Spacing, {
                               y: 1,
@@ -59098,7 +59285,7 @@ var NewCompositionLoaded = ({ folderName, parentName, stack: stack2 }) => {
                           onValueChange: onHeightDirectlyChanged,
                           rightAlign: false
                         }),
-                        compHeightErrMessage ? /* @__PURE__ */ jsxs165(Fragment55, {
+                        compHeightErrMessage ? /* @__PURE__ */ jsxs165(Fragment54, {
                           children: [
                             /* @__PURE__ */ jsx320(Spacing, {
                               y: 1,
@@ -59211,7 +59398,7 @@ var validateNewFolderName = ({
 };
 
 // src/components/NewComposition/NewFolder.tsx
-import { jsx as jsx321, jsxs as jsxs166, Fragment as Fragment56 } from "react/jsx-runtime";
+import { jsx as jsx321, jsxs as jsxs166, Fragment as Fragment55 } from "react/jsx-runtime";
 var content12 = {
   padding: 12,
   paddingRight: 12,
@@ -59308,7 +59495,7 @@ var NewFolder = ({ parentName, stack: stack2 }) => {
                           status: "ok",
                           rightAlign: true
                         }),
-                        folderNameErrMessage ? /* @__PURE__ */ jsxs166(Fragment56, {
+                        folderNameErrMessage ? /* @__PURE__ */ jsxs166(Fragment55, {
                           children: [
                             /* @__PURE__ */ jsx321(Spacing, {
                               y: 1,
@@ -59363,7 +59550,7 @@ import {
   useState as useState110
 } from "react";
 import { Internals as Internals115 } from "remotion";
-import { jsx as jsx322, jsxs as jsxs167, Fragment as Fragment57 } from "react/jsx-runtime";
+import { jsx as jsx322, jsxs as jsxs167, Fragment as Fragment56 } from "react/jsx-runtime";
 var content13 = {
   padding: 12,
   paddingRight: 12,
@@ -59405,7 +59592,7 @@ var RenameCompositionLoaded = () => {
   const onSubmit = useCallback186((e) => {
     e.preventDefault();
   }, []);
-  return /* @__PURE__ */ jsxs167(Fragment57, {
+  return /* @__PURE__ */ jsxs167(Fragment56, {
     children: [
       /* @__PURE__ */ jsx322(ModalHeader, {
         title: `Rename ${resolved.result.id}`
@@ -59436,7 +59623,7 @@ var RenameCompositionLoaded = () => {
                         status: "ok",
                         rightAlign: true
                       }),
-                      compNameErrMessage ? /* @__PURE__ */ jsxs167(Fragment57, {
+                      compNameErrMessage ? /* @__PURE__ */ jsxs167(Fragment56, {
                         children: [
                           /* @__PURE__ */ jsx322(Spacing, {
                             y: 1,
@@ -59512,7 +59699,7 @@ var validateFolderRename = ({
 };
 
 // src/components/NewComposition/RenameFolder.tsx
-import { jsx as jsx323, jsxs as jsxs168, Fragment as Fragment58 } from "react/jsx-runtime";
+import { jsx as jsx323, jsxs as jsxs168, Fragment as Fragment57 } from "react/jsx-runtime";
 var content14 = {
   padding: 12,
   paddingRight: 12,
@@ -59583,7 +59770,7 @@ var RenameFolder = ({ folderName, parentName, stack: stack2 }) => {
                         status: "ok",
                         rightAlign: true
                       }),
-                      folderNameErrMessage ? /* @__PURE__ */ jsxs168(Fragment58, {
+                      folderNameErrMessage ? /* @__PURE__ */ jsxs168(Fragment57, {
                         children: [
                           /* @__PURE__ */ jsx323(Spacing, {
                             y: 1,
@@ -59636,7 +59823,7 @@ import {
   useRef as useRef77,
   useState as useState112
 } from "react";
-import { jsx as jsx324, jsxs as jsxs169, Fragment as Fragment59 } from "react/jsx-runtime";
+import { jsx as jsx324, jsxs as jsxs169, Fragment as Fragment58 } from "react/jsx-runtime";
 var content15 = {
   padding: 12,
   paddingRight: 12,
@@ -59726,7 +59913,7 @@ var RenameStaticFileModal = ({ relativePath }) => {
                         status: validationMessage ? "error" : "ok",
                         rightAlign: true
                       }),
-                      validationMessage ? /* @__PURE__ */ jsxs169(Fragment59, {
+                      validationMessage ? /* @__PURE__ */ jsxs169(Fragment58, {
                         children: [
                           /* @__PURE__ */ jsx324(Spacing, {
                             y: 1,
@@ -59942,7 +60129,7 @@ var ArrowRight = () => {
 };
 
 // src/components/KeyboardShortcutsExplainer.tsx
-import { jsx as jsx327, jsxs as jsxs171, Fragment as Fragment60 } from "react/jsx-runtime";
+import { jsx as jsx327, jsxs as jsxs171, Fragment as Fragment59 } from "react/jsx-runtime";
 var left3 = {
   width: 85,
   paddingTop: 8,
@@ -60903,7 +61090,7 @@ var KeyboardShortcutsExplainer = () => {
                   })
                 ]
               }),
-              getStudioAskAIEnabled() && /* @__PURE__ */ jsxs171(Fragment60, {
+              getStudioAskAIEnabled() && /* @__PURE__ */ jsxs171(Fragment59, {
                 children: [
                   /* @__PURE__ */ jsx327("br", {}),
                   /* @__PURE__ */ jsx327("div", {
@@ -61074,7 +61261,7 @@ var QuickSwitcherNoResults = ({ query, mode }) => {
 
 // src/components/QuickSwitcher/QuickSwitcherResult.tsx
 import { useEffect as useEffect108, useMemo as useMemo199, useRef as useRef78, useState as useState114 } from "react";
-import { jsx as jsx329, jsxs as jsxs173, Fragment as Fragment61 } from "react/jsx-runtime";
+import { jsx as jsx329, jsxs as jsxs173, Fragment as Fragment60 } from "react/jsx-runtime";
 var container52 = {
   paddingLeft: 16,
   paddingRight: 16,
@@ -61170,7 +61357,7 @@ var QuickSwitcherResult = ({ result, selected }) => {
       }),
       /* @__PURE__ */ jsx329("div", {
         style: labelContainer2,
-        children: result.type === "search-result" ? /* @__PURE__ */ jsxs173(Fragment61, {
+        children: result.type === "search-result" ? /* @__PURE__ */ jsxs173(Fragment60, {
           children: [
             /* @__PURE__ */ jsx329("div", {
               dangerouslySetInnerHTML: {
@@ -61195,7 +61382,7 @@ var QuickSwitcherResult = ({ result, selected }) => {
 };
 
 // src/components/QuickSwitcher/QuickSwitcherContent.tsx
-import { jsx as jsx330, jsxs as jsxs174, Fragment as Fragment62 } from "react/jsx-runtime";
+import { jsx as jsx330, jsxs as jsxs174, Fragment as Fragment61 } from "react/jsx-runtime";
 var input2 = {
   width: "100%"
 };
@@ -61480,7 +61667,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
             placeholder: "Search compositions...",
             rightAlign: false
           }),
-          showKeyboardShortcuts ? /* @__PURE__ */ jsxs174(Fragment62, {
+          showKeyboardShortcuts ? /* @__PURE__ */ jsxs174(Fragment61, {
             children: [
               /* @__PURE__ */ jsx330(Spacing, {
                 x: 2
@@ -61903,7 +62090,7 @@ var GuiRenderStatus = ({ job }) => {
 };
 
 // src/components/RenderModal/RenderStatusModal.tsx
-import { jsx as jsx335, jsxs as jsxs177, Fragment as Fragment63 } from "react/jsx-runtime";
+import { jsx as jsx335, jsxs as jsxs177, Fragment as Fragment62 } from "react/jsx-runtime";
 var container53 = {
   padding: 20,
   maxWidth: 900,
@@ -61985,7 +62172,7 @@ var RenderStatusModal = ({
       /* @__PURE__ */ jsxs177("div", {
         style: container53,
         children: [
-          job.status === "failed" ? /* @__PURE__ */ jsxs177(Fragment63, {
+          job.status === "failed" ? /* @__PURE__ */ jsxs177(Fragment62, {
             children: [
               /* @__PURE__ */ jsx335("p", {
                 children: "The render failed because of the following error:"
@@ -62550,7 +62737,7 @@ var CliCopyButton = ({
 };
 
 // src/components/RenderModal/OptionExplainer.tsx
-import { jsx as jsx341, jsxs as jsxs178, Fragment as Fragment64 } from "react/jsx-runtime";
+import { jsx as jsx341, jsxs as jsxs178, Fragment as Fragment63 } from "react/jsx-runtime";
 var container54 = {
   fontSize: 14,
   paddingTop: 10,
@@ -62621,7 +62808,7 @@ var OptionExplainer = ({
                 style: title4,
                 children: option.name
               }),
-              option.docLink ? /* @__PURE__ */ jsxs178(Fragment64, {
+              option.docLink ? /* @__PURE__ */ jsxs178(Fragment63, {
                 children: [
                   /* @__PURE__ */ jsx341(Spacing, {
                     x: 1
@@ -62667,7 +62854,7 @@ var OptionExplainer = ({
           })
         ]
       }),
-      hasInfoRows ? /* @__PURE__ */ jsxs178(Fragment64, {
+      hasInfoRows ? /* @__PURE__ */ jsxs178(Fragment63, {
         children: [
           /* @__PURE__ */ jsx341(Spacing, {
             y: 0.5,
@@ -62795,7 +62982,7 @@ var WebRendererCustomOptionExplainerBubble = ({ apiName, description: descriptio
 };
 
 // src/components/RenderModal/NumberSetting.tsx
-import { jsx as jsx343, jsxs as jsxs179, Fragment as Fragment65 } from "react/jsx-runtime";
+import { jsx as jsx343, jsxs as jsxs179, Fragment as Fragment64 } from "react/jsx-runtime";
 var NumberSetting = ({ name, value, step, hint, onValueChanged, max, min, formatter }) => {
   const onTextChanged = useCallback195((e) => {
     onValueChanged((q) => {
@@ -62816,7 +63003,7 @@ var NumberSetting = ({ name, value, step, hint, onValueChanged, max, min, format
         style: label5,
         children: [
           name,
-          hint ? /* @__PURE__ */ jsxs179(Fragment65, {
+          hint ? /* @__PURE__ */ jsxs179(Fragment64, {
             children: [
               /* @__PURE__ */ jsx343(Spacing, {
                 x: 0.5
@@ -63807,7 +63994,7 @@ var useFileExistence = (outName) => {
 
 // src/components/RenderModal/RenderModalOutputName.tsx
 import { useCallback as useCallback199 } from "react";
-import { jsx as jsx349, jsxs as jsxs183, Fragment as Fragment66 } from "react/jsx-runtime";
+import { jsx as jsx349, jsxs as jsxs183, Fragment as Fragment65 } from "react/jsx-runtime";
 var existsMessageStyle = {
   display: "inline-flex",
   alignItems: "center",
@@ -63864,7 +64051,7 @@ var RenderModalOutputName = ({
               onChange: onValueChange,
               rightAlign: true
             }),
-            validationMessage ? /* @__PURE__ */ jsxs183(Fragment66, {
+            validationMessage ? /* @__PURE__ */ jsxs183(Fragment65, {
               children: [
                 /* @__PURE__ */ jsx349(Spacing, {
                   y: 1,
@@ -63876,7 +64063,7 @@ var RenderModalOutputName = ({
                   type: "error"
                 })
               ]
-            }) : existence ? /* @__PURE__ */ jsxs183(Fragment66, {
+            }) : existence ? /* @__PURE__ */ jsxs183(Fragment65, {
               children: [
                 /* @__PURE__ */ jsx349(Spacing, {
                   y: 1,
@@ -63907,7 +64094,7 @@ var RenderModalOutputName = ({
 };
 
 // src/components/RenderModal/SeparateAudioOption.tsx
-import { jsx as jsx350, jsxs as jsxs184, Fragment as Fragment67 } from "react/jsx-runtime";
+import { jsx as jsx350, jsxs as jsxs184, Fragment as Fragment66 } from "react/jsx-runtime";
 var SeparateAudioOptionInput = ({ separateAudioTo, setSeparateAudioTo, audioCodec }) => {
   const existence = useFileExistence(separateAudioTo);
   const onValueChange = useCallback200((e) => {
@@ -63939,7 +64126,7 @@ var SeparateAudioOption = ({ separateAudioTo, setSeparateAudioTo, audioCodec, ou
       setSeparateAudioTo(null);
     }
   }, [audioCodec, outName, setSeparateAudioTo]);
-  return /* @__PURE__ */ jsxs184(Fragment67, {
+  return /* @__PURE__ */ jsxs184(Fragment66, {
     children: [
       /* @__PURE__ */ jsxs184("div", {
         style: optionRow,
@@ -63977,7 +64164,7 @@ var SeparateAudioOption = ({ separateAudioTo, setSeparateAudioTo, audioCodec, ou
 };
 
 // src/components/RenderModal/RenderModalAudio.tsx
-import { jsx as jsx351, jsxs as jsxs185, Fragment as Fragment68 } from "react/jsx-runtime";
+import { jsx as jsx351, jsxs as jsxs185, Fragment as Fragment67 } from "react/jsx-runtime";
 var container57 = {
   flex: 1,
   overflowY: "auto"
@@ -64047,7 +64234,7 @@ var RenderModalAudio = ({
     style: container57,
     className: VERTICAL_SCROLLBAR_CLASSNAME,
     children: [
-      renderMode === "video" ? /* @__PURE__ */ jsxs185(Fragment68, {
+      renderMode === "video" ? /* @__PURE__ */ jsxs185(Fragment67, {
         children: [
           /* @__PURE__ */ jsx351(MutedSetting, {
             enforceAudioTrack,
@@ -64082,7 +64269,7 @@ var RenderModalAudio = ({
           })
         ]
       }) : null,
-      (renderMode === "video" || renderMode === "audio") && !muted && /* @__PURE__ */ jsxs185(Fragment68, {
+      (renderMode === "video" || renderMode === "audio") && !muted && /* @__PURE__ */ jsxs185(Fragment67, {
         children: [
           /* @__PURE__ */ jsx351(EnforceAudioTrackSetting, {
             muted,
@@ -64701,7 +64888,7 @@ var labelx264Preset = (profile) => {
 };
 
 // src/components/RenderModal/RenderModalEncoding.tsx
-import { jsx as jsx355, jsxs as jsxs189, Fragment as Fragment69 } from "react/jsx-runtime";
+import { jsx as jsx355, jsxs as jsxs189, Fragment as Fragment68 } from "react/jsx-runtime";
 var qualityControlModes = ["crf", "bitrate"];
 var container60 = {
   flex: 1,
@@ -64886,7 +65073,7 @@ var RenderModalEncoding = ({
           })
         ]
       }) : null,
-      renderMode === "video" ? /* @__PURE__ */ jsxs189(Fragment69, {
+      renderMode === "video" ? /* @__PURE__ */ jsxs189(Fragment68, {
         children: [
           /* @__PURE__ */ jsxs189("div", {
             style: optionRow,
@@ -65110,7 +65297,7 @@ var RenderModalEncoding = ({
           })
         ]
       }) : null,
-      renderMode === "still" ? null : /* @__PURE__ */ jsxs189(Fragment69, {
+      renderMode === "still" ? null : /* @__PURE__ */ jsxs189(Fragment68, {
         children: [
           renderMode === "video" ? /* @__PURE__ */ jsx355(RenderModalHr, {}) : null,
           /* @__PURE__ */ jsxs189("div", {
@@ -65174,7 +65361,7 @@ var InlineEyeButton = ({ onClick, enabled }) => {
 };
 
 // src/components/RenderModal/EnvInput.tsx
-import { jsx as jsx357, jsxs as jsxs190, Fragment as Fragment70 } from "react/jsx-runtime";
+import { jsx as jsx357, jsxs as jsxs190, Fragment as Fragment69 } from "react/jsx-runtime";
 var input3 = {
   flex: 1,
   width: "100%"
@@ -65221,7 +65408,7 @@ var EnvInput = ({
     setValueWarningEligible(true);
   }, []);
   const isNodeEnvKey = envKey.trim() === "NODE_ENV";
-  return /* @__PURE__ */ jsxs190(Fragment70, {
+  return /* @__PURE__ */ jsxs190(Fragment69, {
     children: [
       /* @__PURE__ */ jsxs190(Row, {
         align: "center",
@@ -65501,7 +65688,7 @@ var JpegQualitySetting = ({ jpegQuality, setJpegQuality }) => {
 
 // src/components/RenderModal/ScaleSetting.tsx
 import { useMemo as useMemo211 } from "react";
-import { jsx as jsx362, jsxs as jsxs194, Fragment as Fragment71 } from "react/jsx-runtime";
+import { jsx as jsx362, jsxs as jsxs194, Fragment as Fragment70 } from "react/jsx-runtime";
 var MIN_SCALE = 0.1;
 var MAX_SCALE = 10;
 var outputDimensionsStyle = {
@@ -65519,7 +65706,7 @@ var ScaleSetting = ({ scale, setScale, compositionWidth, compositionHeight }) =>
     const outputHeight = Math.round(compositionHeight * scale);
     return `${outputWidth}×${outputHeight}`;
   }, [compositionWidth, compositionHeight, scale]);
-  return /* @__PURE__ */ jsxs194(Fragment71, {
+  return /* @__PURE__ */ jsxs194(Fragment70, {
     children: [
       /* @__PURE__ */ jsx362(NumberSetting, {
         min: MIN_SCALE,
@@ -66958,7 +67145,7 @@ var useEncodableVideoCodecs = (container64) => {
 
 // src/components/RenderModal/WebRenderModalAdvanced.tsx
 import { useCallback as useCallback212, useMemo as useMemo213 } from "react";
-import { jsx as jsx366, jsxs as jsxs197, Fragment as Fragment72 } from "react/jsx-runtime";
+import { jsx as jsx366, jsxs as jsxs197, Fragment as Fragment71 } from "react/jsx-runtime";
 var tabContainer = {
   flex: 1
 };
@@ -66970,7 +67157,7 @@ var lastParagraph = {
   margin: 0
 };
 var PageResponsivenessDescription = () => {
-  return /* @__PURE__ */ jsxs197(Fragment72, {
+  return /* @__PURE__ */ jsxs197(Fragment71, {
     children: [
       /* @__PURE__ */ jsx366("p", {
         style: paragraph,
@@ -67202,7 +67389,7 @@ var WebRenderModalAdvanced = ({
           })
         ]
       }) : null,
-      renderMode === "still" ? null : /* @__PURE__ */ jsxs197(Fragment72, {
+      renderMode === "still" ? null : /* @__PURE__ */ jsxs197(Fragment71, {
         children: [
           /* @__PURE__ */ jsxs197("div", {
             style: optionRow,
@@ -67275,7 +67462,7 @@ var getQualityOptions = (selectedQuality, setQuality) => {
 };
 
 // src/components/RenderModal/WebRenderModalAudio.tsx
-import { jsx as jsx368, jsxs as jsxs198, Fragment as Fragment73 } from "react/jsx-runtime";
+import { jsx as jsx368, jsxs as jsxs198, Fragment as Fragment72 } from "react/jsx-runtime";
 var container64 = {
   flex: 1,
   overflowY: "auto"
@@ -67353,7 +67540,7 @@ var WebRenderModalAudio = ({
         muted,
         setMuted
       }),
-      showAudioSettings ? /* @__PURE__ */ jsxs198(Fragment73, {
+      showAudioSettings ? /* @__PURE__ */ jsxs198(Fragment72, {
         children: [
           isAudioOnly ? null : /* @__PURE__ */ jsx368(RenderModalHr, {}),
           /* @__PURE__ */ jsxs198("div", {
@@ -67418,7 +67605,7 @@ var WebRenderModalAudio = ({
 
 // src/components/RenderModal/WebRenderModalBasic.tsx
 import { useMemo as useMemo215 } from "react";
-import { jsx as jsx369, jsxs as jsxs199, Fragment as Fragment74 } from "react/jsx-runtime";
+import { jsx as jsx369, jsxs as jsxs199, Fragment as Fragment73 } from "react/jsx-runtime";
 var tabContainer2 = {
   flex: 1
 };
@@ -67538,7 +67725,7 @@ var WebRenderModalBasic = ({
   return /* @__PURE__ */ jsxs199("div", {
     style: tabContainer2,
     children: [
-      renderMode === "still" ? /* @__PURE__ */ jsxs199(Fragment74, {
+      renderMode === "still" ? /* @__PURE__ */ jsxs199(Fragment73, {
         children: [
           /* @__PURE__ */ jsxs199("div", {
             style: optionRow,
@@ -67583,7 +67770,7 @@ var WebRenderModalBasic = ({
             ]
           }) : null
         ]
-      }) : /* @__PURE__ */ jsxs199(Fragment74, {
+      }) : /* @__PURE__ */ jsxs199(Fragment73, {
         children: [
           /* @__PURE__ */ jsxs199("div", {
             style: optionRow,
@@ -67788,7 +67975,7 @@ var WebRenderModalLicenseKeyDetails = ({ details }) => {
 };
 
 // src/components/RenderModal/WebRenderModalLicense.tsx
-import { jsx as jsx372, jsxs as jsxs201, Fragment as Fragment75 } from "react/jsx-runtime";
+import { jsx as jsx372, jsxs as jsxs201, Fragment as Fragment74 } from "react/jsx-runtime";
 var row11 = {
   display: "flex",
   flexDirection: "row",
@@ -68041,7 +68228,7 @@ var WebRenderModalLicense = ({
             style: inputStyle3,
             autoFocus: true
           }),
-          licenseValidation.message ? /* @__PURE__ */ jsxs201(Fragment75, {
+          licenseValidation.message ? /* @__PURE__ */ jsxs201(Fragment74, {
             children: [
               /* @__PURE__ */ jsx372(Spacing, {
                 y: 1,
@@ -68054,7 +68241,7 @@ var WebRenderModalLicense = ({
               })
             ]
           }) : null,
-          licenseValidation.valid && licenseKey.length > 0 ? /* @__PURE__ */ jsxs201(Fragment75, {
+          licenseValidation.valid && licenseKey.length > 0 ? /* @__PURE__ */ jsxs201(Fragment74, {
             children: [
               /* @__PURE__ */ jsx372(Spacing, {
                 y: 1,
@@ -68073,7 +68260,7 @@ var WebRenderModalLicense = ({
               })
             ]
           }) : null,
-          isLoading && /* @__PURE__ */ jsxs201(Fragment75, {
+          isLoading && /* @__PURE__ */ jsxs201(Fragment74, {
             children: [
               /* @__PURE__ */ jsx372(Spacing, {
                 y: 1,
@@ -68082,7 +68269,7 @@ var WebRenderModalLicense = ({
               "Loading license key details..."
             ]
           }),
-          licenseValidation.details && /* @__PURE__ */ jsxs201(Fragment75, {
+          licenseValidation.details && /* @__PURE__ */ jsxs201(Fragment74, {
             children: [
               /* @__PURE__ */ jsx372(Spacing, {
                 y: 1,
@@ -68115,7 +68302,7 @@ var WebRenderModalLicense = ({
 
 // src/components/RenderModal/WebRenderModalPicture.tsx
 import { useCallback as useCallback214, useMemo as useMemo216 } from "react";
-import { jsx as jsx373, jsxs as jsxs202, Fragment as Fragment76 } from "react/jsx-runtime";
+import { jsx as jsx373, jsxs as jsxs202, Fragment as Fragment75 } from "react/jsx-runtime";
 var tabContainer4 = {
   flex: 1
 };
@@ -68145,7 +68332,7 @@ var WebRenderModalPicture = ({
         compositionWidth,
         compositionHeight
       }),
-      renderMode !== "video" ? null : /* @__PURE__ */ jsxs202(Fragment76, {
+      renderMode !== "video" ? null : /* @__PURE__ */ jsxs202(Fragment75, {
         children: [
           /* @__PURE__ */ jsxs202("div", {
             style: optionRow,
@@ -68926,7 +69113,7 @@ var KnownBugs = ({ bugs }) => {
 };
 
 // src/components/UpdateModal/UpdateModal.tsx
-import { jsx as jsx378, jsxs as jsxs206, Fragment as Fragment77 } from "react/jsx-runtime";
+import { jsx as jsx378, jsxs as jsxs206, Fragment as Fragment76 } from "react/jsx-runtime";
 var container66 = {
   padding: 20,
   paddingTop: 0
@@ -68977,7 +69164,7 @@ var UpdateModal = ({ info, knownBugs }) => {
       /* @__PURE__ */ jsxs206("div", {
         style: container66,
         children: [
-          hasKnownBugs ? /* @__PURE__ */ jsxs206(Fragment77, {
+          hasKnownBugs ? /* @__PURE__ */ jsxs206(Fragment76, {
             children: [
               /* @__PURE__ */ jsxs206("div", {
                 style: title6,
@@ -69057,11 +69244,11 @@ var UpdateModal = ({ info, knownBugs }) => {
 };
 
 // src/components/Modals.tsx
-import { jsx as jsx379, jsxs as jsxs207, Fragment as Fragment78 } from "react/jsx-runtime";
+import { jsx as jsx379, jsxs as jsxs207, Fragment as Fragment77 } from "react/jsx-runtime";
 var Modals = ({ readOnlyStudio }) => {
   const { selectedModal: modalContextType } = useContext149(ModalsContext);
   const canRender = useContext149(StudioServerConnectionCtx).previewServerState.type === "connected";
-  return /* @__PURE__ */ jsxs207(Fragment78, {
+  return /* @__PURE__ */ jsxs207(Fragment77, {
     children: [
       modalContextType && modalContextType.type === "new-comp" && /* @__PURE__ */ jsx379(NewComposition, {
         folderName: modalContextType.folderName,
@@ -69910,12 +70097,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};
   }