@remotion/studio 4.0.523 → 4.0.524

package/dist/components/SettingsModal.js

@@ -104,6 +104,6 @@ const SettingsModal = ({ initialPublicLicenseKey, initialTab }) => {
     }, [initialPublicLicenseKey, setPublicLicenseKey]);
     return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { panelStyle: render_modals_1.outerModalStyle, children: jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                 jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Settings", onClose: dismiss }), jsx_runtime_1.jsxs("div", { style: render_modals_1.horizontalLayout, children: [
-                        jsx_runtime_1.jsxs("div", { style: settingsLeftSidebar, children: [isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'rendering', onClick: () => selectTab('rendering'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: render_modals_1.icon }) })), children: "Defaults" })), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'studio', onClick: () => selectTab('studio'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(remotion_triangle_1.RemotionTriangleIcon, { color: color, style: render_modals_1.icon }) })), children: "Studio" })), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'shortcuts', onClick: () => selectTab('shortcuts'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(keyboard_1.KeyboardIcon, { color: color, style: keyboardIcon }) })), children: "Shortcuts" }), showPackages ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'packages', onClick: () => selectTab('packages'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(package_1.PackageIcon, { color: color, style: render_modals_1.icon }) })), children: "Packages" })) : null, isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'skills', onClick: () => selectTab('skills'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(skills_1.SkillsIcon, { color: color, style: skillsIcon }) })), children: "Skills" })), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'models', onClick: () => selectTab('models'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(models_1.ModelsIcon, { color: color, style: render_modals_1.icon }) })), children: "Models" }), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'apps', onClick: () => selectTab('apps'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(apps_1.AppsIcon, { color: color, style: appsIcon }) })), children: "Apps" })), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'license', onClick: () => selectTab('license'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(license_1.LicenseIcon, { color: color, style: render_modals_1.icon }) })), children: "License" })), showUpdates ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'updates', onClick: () => selectTab('updates'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(cloud_download_1.CloudDownloadIcon, { color: color, style: render_modals_1.icon }) })), children: "Updates" })) : null] }), openedTabs.includes('packages') ? (jsx_runtime_1.jsx("div", { style: tab === 'packages' ? render_modals_1.optionsPanel : hiddenPanel, children: jsx_runtime_1.jsx(InstallPackage_1.InstallPackageSettings, { footerContainer: packagesFooterContainer, packageManager: packageManager }) })) : null, openedTabs.includes('apps') ? (jsx_runtime_1.jsx("div", { style: tab === 'apps' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ConfigureDefaultEditorModal_1.DefaultEditorSettings, {}) })) : null, openedTabs.includes('models') ? (jsx_runtime_1.jsx("div", { style: tab === 'models' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ModelsSettings_1.ModelsSettings, {}) })) : null, openedTabs.includes('license') ? (jsx_runtime_1.jsx("div", { style: tab === 'license' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ConfigureLicenseModal_1.LicenseSettings, {}) })) : null, openedTabs.includes('skills') ? (jsx_runtime_1.jsx("div", { style: tab === 'skills' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(SkillsSettings_1.SkillsSettings, {}) })) : null, openedTabs.includes('shortcuts') ? (jsx_runtime_1.jsx("div", { style: tab === 'shortcuts' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(KeyboardShortcutsSettings_1.KeyboardShortcutsSettings, {}) })) : null, openedTabs.includes('rendering') ? (jsx_runtime_1.jsx("div", { style: tab === 'rendering' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(RenderingSettings_1.RenderingSettings, {}) })) : null, openedTabs.includes('studio') ? (jsx_runtime_1.jsx("div", { style: tab === 'studio' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(StudioSettings_1.StudioSettings, {}) })) : null, showUpdates && openedTabs.includes('updates') ? (jsx_runtime_1.jsx("div", { style: tab === 'updates' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(UpdatesSettings_1.UpdatesSettings, {}) })) : null] }), tab === 'packages' ? (jsx_runtime_1.jsx("div", { ref: setPackagesFooterContainer })) : isBrowserStudio || tab === 'models' || tab === 'updates' ? null : (jsx_runtime_1.jsx(SettingsModalFooter_1.SettingsModalFooter, { showLicenseFaq: tab === 'license' }))] }) }));
+                        jsx_runtime_1.jsxs("div", { style: settingsLeftSidebar, children: [isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'studio', onClick: () => selectTab('studio'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(remotion_triangle_1.RemotionTriangleIcon, { color: color, style: render_modals_1.icon }) })), children: "Studio" })), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'rendering', onClick: () => selectTab('rendering'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: render_modals_1.icon }) })), children: "Defaults" })), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'shortcuts', onClick: () => selectTab('shortcuts'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(keyboard_1.KeyboardIcon, { color: color, style: keyboardIcon }) })), children: "Shortcuts" }), showPackages ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'packages', onClick: () => selectTab('packages'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(package_1.PackageIcon, { color: color, style: render_modals_1.icon }) })), children: "Packages" })) : null, isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'skills', onClick: () => selectTab('skills'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(skills_1.SkillsIcon, { color: color, style: skillsIcon }) })), children: "Skills" })), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'models', onClick: () => selectTab('models'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(models_1.ModelsIcon, { color: color, style: render_modals_1.icon }) })), children: "Models" }), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'apps', onClick: () => selectTab('apps'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(apps_1.AppsIcon, { color: color, style: appsIcon }) })), children: "Apps" })), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'license', onClick: () => selectTab('license'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(license_1.LicenseIcon, { color: color, style: render_modals_1.icon }) })), children: "License" })), showUpdates ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'updates', onClick: () => selectTab('updates'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(cloud_download_1.CloudDownloadIcon, { color: color, style: render_modals_1.icon }) })), children: "Updates" })) : null] }), openedTabs.includes('packages') ? (jsx_runtime_1.jsx("div", { style: tab === 'packages' ? render_modals_1.optionsPanel : hiddenPanel, children: jsx_runtime_1.jsx(InstallPackage_1.InstallPackageSettings, { footerContainer: packagesFooterContainer, packageManager: packageManager }) })) : null, openedTabs.includes('apps') ? (jsx_runtime_1.jsx("div", { style: tab === 'apps' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ConfigureDefaultEditorModal_1.DefaultEditorSettings, {}) })) : null, openedTabs.includes('models') ? (jsx_runtime_1.jsx("div", { style: tab === 'models' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ModelsSettings_1.ModelsSettings, {}) })) : null, openedTabs.includes('license') ? (jsx_runtime_1.jsx("div", { style: tab === 'license' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ConfigureLicenseModal_1.LicenseSettings, {}) })) : null, openedTabs.includes('skills') ? (jsx_runtime_1.jsx("div", { style: tab === 'skills' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(SkillsSettings_1.SkillsSettings, {}) })) : null, openedTabs.includes('shortcuts') ? (jsx_runtime_1.jsx("div", { style: tab === 'shortcuts' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(KeyboardShortcutsSettings_1.KeyboardShortcutsSettings, {}) })) : null, openedTabs.includes('rendering') ? (jsx_runtime_1.jsx("div", { style: tab === 'rendering' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(RenderingSettings_1.RenderingSettings, {}) })) : null, openedTabs.includes('studio') ? (jsx_runtime_1.jsx("div", { style: tab === 'studio' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(StudioSettings_1.StudioSettings, {}) })) : null, showUpdates && openedTabs.includes('updates') ? (jsx_runtime_1.jsx("div", { style: tab === 'updates' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(UpdatesSettings_1.UpdatesSettings, {}) })) : null] }), tab === 'packages' ? (jsx_runtime_1.jsx("div", { ref: setPackagesFooterContainer })) : isBrowserStudio || tab === 'models' || tab === 'updates' ? null : (jsx_runtime_1.jsx(SettingsModalFooter_1.SettingsModalFooter, { showLicenseFaq: tab === 'license' }))] }) }));
 };
 exports.SettingsModal = SettingsModal;

package/dist/components/SidebarCollapserControls.js

@@ -7,6 +7,7 @@ const colors_1 = require("../helpers/colors");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const use_keyboard_shortcut_label_1 = require("../helpers/use-keyboard-shortcut-label");
 const sidebar_1 = require("../state/sidebar");
+const ActionTooltip_1 = require("./ActionTooltip");
 const InlineAction_1 = require("./InlineAction");
 const TopPanel_1 = require("./TopPanel");
 const style = {
@@ -123,14 +124,13 @@ const SidebarCollapserControl = ({ side }) => {
             right.unregister();
         };
     }, [keybindings, side, toggleBoth, toggleLeft, toggleRight]);
-    const leftShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('toggleLeftSidebar');
-    const rightShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('toggleRightSidebar');
-    const toggleLeftTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)() || leftShortcut === ''
-        ? 'Toggle Left Sidebar'
-        : `Toggle Left Sidebar (${leftShortcut})`;
-    const toggleRightTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)() || rightShortcut === ''
-        ? 'Toggle Right Sidebar'
-        : `Toggle Right Sidebar (${rightShortcut})`;
+    const action = side === 'left' ? 'toggleLeftSidebar' : 'toggleRightSidebar';
+    const shortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)(action);
+    const ariaShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutAriaKeyShortcuts)(action);
+    const shortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
+    const expanded = (side === 'left' ? leftSidebarStatus : sidebarCollapsedStateRight) ===
+        'expanded' && sidebarCollapsedDuringDrag !== side;
+    const label = `${expanded ? 'Collapse' : 'Expand'} ${side} sidebar`;
     const colorStyle = (0, react_1.useCallback)((color) => {
         return {
             ...style,
@@ -138,14 +138,11 @@ const SidebarCollapserControl = ({ side }) => {
         };
     }, []);
     const toggleLeftAction = (0, react_1.useCallback)((color) => {
-        return (jsx_runtime_1.jsx("div", { "data-sidebar-toggle": "left", style: colorStyle(color), title: toggleLeftTooltip, children: jsx_runtime_1.jsx("div", { style: leftIcon(color) }) }));
-    }, [colorStyle, leftIcon, toggleLeftTooltip]);
+        return (jsx_runtime_1.jsx("div", { "data-sidebar-toggle": "left", style: colorStyle(color), children: jsx_runtime_1.jsx("div", { style: leftIcon(color) }) }));
+    }, [colorStyle, leftIcon]);
     const toggleRightAction = (0, react_1.useCallback)((color) => {
-        return (jsx_runtime_1.jsx("div", { "data-sidebar-toggle": "right", style: colorStyle(color), title: toggleRightTooltip, children: jsx_runtime_1.jsx("div", { style: rightIcon(color) }) }));
-    }, [colorStyle, rightIcon, toggleRightTooltip]);
-    if (side === 'left') {
-        return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: toggleLeft, renderAction: toggleLeftAction, style: { marginRight: 4 } }));
-    }
-    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: toggleRight, renderAction: toggleRightAction }));
+        return (jsx_runtime_1.jsx("div", { "data-sidebar-toggle": "right", style: colorStyle(color), children: jsx_runtime_1.jsx("div", { style: rightIcon(color) }) }));
+    }, [colorStyle, rightIcon]);
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: label, shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: side === 'left' ? toggleLeft : toggleRight, renderAction: side === 'left' ? toggleLeftAction : toggleRightAction, style: side === 'left' ? { marginRight: 4 } : undefined, "aria-label": label, "aria-expanded": expanded, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaShortcut || undefined }) }));
 };
 exports.SidebarCollapserControl = SidebarCollapserControl;

package/dist/components/SizeSelector.js

@@ -48,7 +48,7 @@ const getPreviewSizeLabel = (previewSize) => {
     return `${(previewSize.size * 100).toFixed(0)}%`;
 };
 exports.getPreviewSizeLabel = getPreviewSizeLabel;
-const accessibilityLabel = 'Preview Size';
+const accessibilityLabel = 'Zoom';
 const getUniqueSizes = (size) => {
     const customPreviewSizes = [size, ...commonPreviewSizes];
     const uniqueSizes = [];
@@ -126,6 +126,6 @@ const SizeSelector = () => {
     if (!zoomable) {
         return null;
     }
-    return (jsx_runtime_1.jsx(TimelineCombobox_1.TimelineCombobox, { title: accessibilityLabel, selectedId: selectedId, values: items, renderLeftItem: (color) => selectedId === 'auto' ? (jsx_runtime_1.jsx(canvas_zoom_1.CanvasFitIcon, { color: color })) : Number(selectedId) < 1 ? (jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomOutIcon, { color: color })) : (jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomIcon, { color: color })), unhoveredIconColor: colors_1.WHITE_ALPHA_80 }));
+    return (jsx_runtime_1.jsx(TimelineCombobox_1.TimelineCombobox, { title: accessibilityLabel, tooltipDelay: 800, selectedId: selectedId, values: items, renderLeftItem: (color) => selectedId === 'auto' ? (jsx_runtime_1.jsx(canvas_zoom_1.CanvasFitIcon, { color: color })) : Number(selectedId) < 1 ? (jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomOutIcon, { color: color })) : (jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomIcon, { color: color })), unhoveredIconColor: colors_1.WHITE_ALPHA_80 }));
 };
 exports.SizeSelector = SizeSelector;

package/dist/components/SnappingToggle.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SnappingToggle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const no_react_1 = require("remotion/no-react");
 const colors_1 = require("../helpers/colors");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const use_keyboard_shortcut_label_1 = require("../helpers/use-keyboard-shortcut-label");
 const magnet_1 = require("../icons/magnet");
 const editor_snapping_1 = require("../state/editor-snapping");
+const ActionTooltip_1 = require("./ActionTooltip");
 const ControlButton_1 = require("./ControlButton");
 const SnappingToggle = () => {
     const { editorSnapping, setEditorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
@@ -17,12 +17,10 @@ const SnappingToggle = () => {
     }, [setEditorSnapping]);
     const shortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('toggleSnapping');
     const ariaKeyShortcuts = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutAriaKeyShortcuts)('toggleSnapping');
-    const accessibilityLabel = [
-        editorSnapping ? 'Disable snapping' : 'Enable snapping',
-        (0, use_keybinding_1.areKeyboardShortcutsDisabled)() || shortcut === '' ? null : `(${shortcut})`,
-    ]
-        .filter(no_react_1.NoReactInternals.truthy)
-        .join(' ');
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, "aria-pressed": editorSnapping, "aria-keyshortcuts": ariaKeyShortcuts || undefined, onClick: onClick, children: (color) => (jsx_runtime_1.jsx(magnet_1.MagnetIcon, { style: { width: 18, height: 18, transform: 'translateY(1px)' }, color: editorSnapping ? colors_1.BLUE : color, "aria-hidden": "true", focusable: "false" })) }));
+    const accessibilityLabel = editorSnapping
+        ? 'Disable snapping'
+        : 'Enable snapping';
+    const shortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: accessibilityLabel, shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": accessibilityLabel, "aria-pressed": editorSnapping, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaKeyShortcuts || undefined, onClick: onClick, children: (color) => (jsx_runtime_1.jsx(magnet_1.MagnetIcon, { style: { width: 18, height: 18, transform: 'translateY(1px)' }, color: editorSnapping ? colors_1.BLUE : color, "aria-hidden": "true", focusable: "false" })) }) }));
 };
 exports.SnappingToggle = SnappingToggle;

package/dist/components/StudioSettings.js

@@ -3,20 +3,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StudioSettings = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const client_1 = require("@remotion/renderer/client");
-const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const undo_1 = require("../icons/undo");
 const Button_1 = require("./Button");
+const Checkbox_1 = require("./Checkbox");
 const ConfigSelect_1 = require("./ConfigSelect");
 const styles_1 = require("./InspectorPanel/styles");
 const layout_1 = require("./layout");
 const InputDragger_1 = require("./NewComposition/InputDragger");
 const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
+const InfoBubble_1 = require("./RenderModal/InfoBubble");
 const layout_2 = require("./RenderModal/layout");
 const SettingsContext_1 = require("./SettingsContext");
 const use_auto_save_config_1 = require("./use-auto-save-config");
 const container = {
+    alignSelf: 'flex-start',
     display: 'flex',
     flex: 1,
     flexDirection: 'column',
@@ -47,11 +49,10 @@ const initialSettings = {
     numberOfSharedAudioTags: null,
     rspack: null,
 };
-const ConfigNumber = ({ defaultLabel, defaultValue, name, onChange, onChangeEnd, value, }) => {
-    const resolvedDefaultLabel = defaultLabel !== null && defaultLabel !== void 0 ? defaultLabel : String(defaultValue);
+const ConfigNumber = ({ defaultValue, name, onChange, onChangeEnd, value, }) => {
     return (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
             jsx_runtime_1.jsx("div", { style: layout_2.label, children: name }), jsx_runtime_1.jsxs("div", { style: { ...layout_2.rightRow, gap: 6 }, children: [
-                    jsx_runtime_1.jsx(InputDragger_1.InputDragger, { "aria-label": name, buttonStyle: { textAlign: 'right', width: 140 }, formatter: () => value === null ? `Default (${resolvedDefaultLabel})` : String(value), min: 0, onTextChange: () => undefined, onValueChange: onChange, onValueChangeEnd: onChangeEnd, placeholder: `Default (${resolvedDefaultLabel})`, rightAlign: true, status: "ok", step: 1, value: value !== null && value !== void 0 ? value : defaultValue }), jsx_runtime_1.jsx(Button_1.Button, { disabled: value === null, onClick: () => onChangeEnd(null), size: "compact", style: { color: colors_1.LIGHT_TEXT }, title: `Use default (${resolvedDefaultLabel})`, children: jsx_runtime_1.jsx(undo_1.UndoIcon, { style: resetIcon }) })
+                    jsx_runtime_1.jsx(InputDragger_1.InputDragger, { "aria-label": name, buttonStyle: { textAlign: 'right', width: 140 }, formatter: () => value === null ? `Default (${defaultValue})` : String(value), min: 0, onTextChange: () => undefined, onValueChange: onChange, onValueChangeEnd: onChangeEnd, placeholder: `Default (${defaultValue})`, rightAlign: true, status: "ok", step: 1, value: value !== null && value !== void 0 ? value : defaultValue }), jsx_runtime_1.jsx(Button_1.Button, { disabled: value === null, onClick: () => onChangeEnd(null), size: "compact", style: { color: colors_1.LIGHT_TEXT }, title: `Use default (${defaultValue})`, children: jsx_runtime_1.jsx(undo_1.UndoIcon, { style: resetIcon }) })
                 ] })
         ] }));
 };
@@ -59,20 +60,19 @@ const StudioSettings = () => {
     var _a;
     const { error: settingsError, revision, studioRuntimeConfig } = (0, SettingsContext_1.useSettings)();
     const [settings, setSettings] = (0, react_1.useState)(initialSettings);
-    const [committedNumberSettings, setCommittedNumberSettings] = (0, react_1.useState)({ maxTimelineTracks: null, numberOfSharedAudioTags: null });
+    const [committedNumberSettings, setCommittedNumberSettings] = (0, react_1.useState)({ numberOfSharedAudioTags: null });
     const [editedSetters, setEditedSetters] = (0, react_1.useState)(() => new Set());
     const [syncedRevision, setSyncedRevision] = (0, react_1.useState)(-1);
     const [error, setError] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
-        var _a, _b;
-        var _c, _d, _e;
+        var _a;
+        var _b, _c;
         if (studioRuntimeConfig === null) {
             return;
         }
-        setSettings((_c = studioRuntimeConfig.configFileStudioSettings) !== null && _c !== void 0 ? _c : initialSettings);
+        setSettings((_b = studioRuntimeConfig.configFileStudioSettings) !== null && _b !== void 0 ? _b : initialSettings);
         setCommittedNumberSettings({
-            maxTimelineTracks: (_d = (_a = studioRuntimeConfig.configFileStudioSettings) === null || _a === void 0 ? void 0 : _a.maxTimelineTracks) !== null && _d !== void 0 ? _d : null,
-            numberOfSharedAudioTags: (_e = (_b = studioRuntimeConfig.configFileStudioSettings) === null || _b === void 0 ? void 0 : _b.numberOfSharedAudioTags) !== null && _e !== void 0 ? _e : null,
+            numberOfSharedAudioTags: (_c = (_a = studioRuntimeConfig.configFileStudioSettings) === null || _a === void 0 ? void 0 : _a.numberOfSharedAudioTags) !== null && _c !== void 0 ? _c : null,
         });
         setEditedSetters(new Set());
         setSyncedRevision(revision);
@@ -96,7 +96,6 @@ const StudioSettings = () => {
             update('setAskAIEnabled', settings.askAIEnabled),
             update('setEnableCrossSiteIsolation', settings.enableCrossSiteIsolation),
             update('setBeepOnFinish', settings.beepOnFinish),
-            update('setMaxTimelineTracks', committedNumberSettings.maxTimelineTracks),
             update('setAudioLatencyHint', settings.audioLatencyHint),
             update('setNumberOfSharedAudioTags', committedNumberSettings.numberOfSharedAudioTags),
             update('setRspack', settings.rspack),
@@ -126,17 +125,32 @@ const StudioSettings = () => {
         return null;
     }
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx("p", { style: dividerLabel, children: "Interface" }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Enabled", name: "Ask AI enabled", onChange: (value) => changeSetting('askAIEnabled', 'setAskAIEnabled', value), options: ConfigSelect_1.booleanOptions, value: settings.askAIEnabled }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Enabled", name: "Interactivity enabled", onChange: (value) => changeSetting('interactivityEnabled', 'setInteractivityEnabled', value), options: ConfigSelect_1.booleanOptions, value: settings.interactivityEnabled }), jsx_runtime_1.jsx(ConfigNumber, { defaultLabel: "Unlimited", defaultValue: studio_shared_1.DEFAULT_TIMELINE_TRACKS, name: "Max timeline tracks", onChange: (value) => previewNumberSetting('maxTimelineTracks', value), onChangeEnd: (value) => commitNumberSetting('maxTimelineTracks', 'setMaxTimelineTracks', value), value: settings.maxTimelineTracks }), jsx_runtime_1.jsx("p", { style: sectionTitle, children: "Audio" }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Playback", name: "Audio latency hint", onChange: (value) => changeSetting('audioLatencyHint', 'setAudioLatencyHint', value), options: [
-                    { label: 'Interactive', value: 'interactive' },
-                    { label: 'Balanced', value: 'balanced' },
-                    { label: 'Playback', value: 'playback' },
-                ], value: settings.audioLatencyHint }), jsx_runtime_1.jsx(ConfigNumber, { defaultValue: 0, name: "Number of shared audio tags", onChange: (value) => previewNumberSetting('numberOfSharedAudioTags', value), onChangeEnd: (value) => commitNumberSetting('numberOfSharedAudioTags', 'setNumberOfSharedAudioTags', value), value: settings.numberOfSharedAudioTags }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Disabled", name: "Beep on finish", onChange: (value) => changeSetting('beepOnFinish', 'setBeepOnFinish', value), options: ConfigSelect_1.booleanOptions, value: settings.beepOnFinish }), jsx_runtime_1.jsx("p", { style: sectionTitle, children: "Development" }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Webpack", name: "Bundler", onChange: (value) => changeSetting('rspack', 'setRspack', value), options: [
+            jsx_runtime_1.jsx("p", { style: dividerLabel, children: "Development" }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Webpack", name: "Bundler", onChange: (value) => changeSetting('rspack', 'setRspack', value), options: [
                     { label: 'Rspack', value: true },
                     { label: 'Webpack', value: false },
-                ], value: settings.rspack }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Disabled", name: "Cross-site isolation", onChange: (value) => changeSetting('enableCrossSiteIsolation', 'setEnableCrossSiteIsolation', value), options: ConfigSelect_1.booleanOptions, value: settings.enableCrossSiteIsolation }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Info", name: "Log level", onChange: (value) => changeSetting('logLevel', 'setLogLevel', value), options: client_1.BrowserSafeApis.logLevels.map((value) => ({
+                ], value: settings.rspack }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Cross-site isolation",
+                            jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { title: "About cross-site isolation", horizontalAlignment: "right", children: jsx_runtime_1.jsx("div", { style: {
+                                        padding: 12,
+                                        maxWidth: 280,
+                                        fontSize: 14,
+                                        lineHeight: 1.5,
+                                    }, children: "Isolates Studio from other websites to enable shared memory and multithreading. Required for @remotion/whisper-web and can speed up ProRes decoding. Media from other websites that requires cookies or authentication may not load. Disabled by default." }) })
+                        ] }), jsx_runtime_1.jsx("label", { style: layout_2.rightRow, "aria-label": "Cross-site isolation", children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: settings.enableCrossSiteIsolation === true, name: "Cross-site isolation", onChange: (event) => changeSetting('enableCrossSiteIsolation', 'setEnableCrossSiteIsolation', event.target.checked ? true : null) }) })
+                ] }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Info", name: "Log level", onChange: (value) => changeSetting('logLevel', 'setLogLevel', value), options: client_1.BrowserSafeApis.logLevels.map((value) => ({
                     label: value[0].toUpperCase() + value.slice(1),
                     value,
-                })), value: settings.logLevel }), (error !== null && error !== void 0 ? error : settingsError) ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                })), value: settings.logLevel }), jsx_runtime_1.jsx("p", { style: sectionTitle, children: "Interface" }), jsx_runtime_1.jsxs("label", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Ask AI enabled" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: settings.askAIEnabled !== false, name: "Ask AI enabled", onChange: (event) => changeSetting('askAIEnabled', 'setAskAIEnabled', event.target.checked ? null : false) }) })
+                ] }), jsx_runtime_1.jsxs("label", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Interactivity enabled" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: settings.interactivityEnabled !== false, name: "Interactivity enabled", onChange: (event) => changeSetting('interactivityEnabled', 'setInteractivityEnabled', event.target.checked ? null : false) }) })
+                ] }), jsx_runtime_1.jsx("p", { style: sectionTitle, children: "Audio" }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Playback", name: "Audio latency hint", onChange: (value) => changeSetting('audioLatencyHint', 'setAudioLatencyHint', value), options: [
+                    { label: 'Interactive', value: 'interactive' },
+                    { label: 'Balanced', value: 'balanced' },
+                    { label: 'Playback', value: 'playback' },
+                ], value: settings.audioLatencyHint }), jsx_runtime_1.jsx(ConfigNumber, { defaultValue: 0, name: "Number of shared audio tags", onChange: (value) => previewNumberSetting('numberOfSharedAudioTags', value), onChangeEnd: (value) => commitNumberSetting('numberOfSharedAudioTags', 'setNumberOfSharedAudioTags', value), value: settings.numberOfSharedAudioTags }), jsx_runtime_1.jsxs("label", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Beep on finish" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: settings.beepOnFinish === true, name: "Beep on finish", onChange: (event) => changeSetting('beepOnFinish', 'setBeepOnFinish', event.target.checked ? true : null) }) })
+                ] }), (error !== null && error !== void 0 ? error : settingsError) ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx("div", { style: { paddingLeft: 16, paddingRight: 16 }, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: (_a = error !== null && error !== void 0 ? error : settingsError) !== null && _a !== void 0 ? _a : '', type: "error" }) })
                 ] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { y: 2, block: true })
         ] }));

package/dist/components/SyntaxHighlightedSource.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const SyntaxHighlightedSource: React.FC<{
+    readonly source: string;
+}>;
+export default SyntaxHighlightedSource;

package/dist/components/{HighlightedElementSource.js → SyntaxHighlightedSource.js}

@@ -71,8 +71,8 @@ const renderTokens = (tokens) => {
                 : ((_a = tokens.alias) !== null && _a !== void 0 ? _a : [])),
         ].join(' '), style: tokenStyle, children: renderTokens(tokens.content) }));
 };
-const HighlightedElementSource = ({ source, }) => {
+const SyntaxHighlightedSource = ({ source, }) => {
     const tokens = (0, react_1.useMemo)(() => prismjs_1.default.tokenize(source, prismjs_1.default.languages.tsx), [source]);
     return (jsx_runtime_1.jsx("span", { style: { ...tokenStyle, color: 'inherit' }, children: renderTokens(tokens) }));
 };
-exports.default = HighlightedElementSource;
+exports.default = SyntaxHighlightedSource;

package/dist/components/Timeline/Timeline.js

@@ -259,22 +259,54 @@ const TimelineInner = () => {
         overrideIdToNodePathMappings,
         compositions,
     ]);
+    const durationInFrames = (_a = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames) !== null && _a !== void 0 ? _a : 0;
+    const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const filtered = (0, react_1.useMemo)(() => {
+        return timeline.filter((t) => {
+            // Moving outside the composition can reduce the displayed duration to
+            // zero. Keep the drag owner mounted until its pending edit is saved.
+            if (t.sequence.showInTimeline &&
+                t.nodePathInfo !== null &&
+                getDragOverrides(t.nodePathInfo.sequenceSubscriptionKey).from !==
+                    undefined) {
+                return true;
+            }
+            return (0, should_show_track_in_timeline_1.shouldShowTrackInTimeline)(t, durationInFrames);
+        });
+    }, [durationInFrames, getDragOverrides, timeline]);
+    // Keep `filtered` complete so a future toggle can show every programmatic
+    // instance without recalculating the timeline or losing its instance index.
+    const collapsed = (0, react_1.useMemo)(() => {
+        const seenNodePaths = new Set();
+        return filtered.filter((track) => {
+            if (track.nodePathInfo === null) {
+                return true;
+            }
+            const key = (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(track.nodePathInfo.sequenceSubscriptionKey);
+            if (seenNodePaths.has(key)) {
+                return false;
+            }
+            seenNodePaths.add(key);
+            return true;
+        });
+    }, [filtered]);
+    const { visibleTracks, value: layerChildrenValue } = (0, TimelineLayerChildren_1.useTimelineLayerChildren)(collapsed, sequences, (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null);
     const pendingInsertedElementSelection = (0, use_sync_external_store_1.useSyncExternalStore)(inserted_element_selection_1.subscribeToInsertedElementSelection, inserted_element_selection_1.getInsertedElementSelection, inserted_element_selection_1.getInsertedElementSelection);
     const { fastRefreshes } = (0, react_1.useContext)(fast_refresh_context_1.FastRefreshContext);
     const pendingSelectionStart = (0, react_1.useRef)(null);
     const { selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
-    (0, react_1.useEffect)(() => {
+    (0, react_1.useLayoutEffect)(() => {
         var _a;
         if (pendingInsertedElementSelection === null) {
             pendingSelectionStart.current = null;
             return;
         }
-        const matchesInsertedNodePath = (track) => track.nodePathInfo !== null &&
-            (pendingInsertedElementSelection.nodePath === null ||
-                (track.nodePathInfo.sequenceSubscriptionKey.absolutePath ===
+        const matchesInsertedNodePath = (track) => pendingInsertedElementSelection.nodePath === null ||
+            (track.nodePathInfo !== null &&
+                track.nodePathInfo.sequenceSubscriptionKey.absolutePath ===
                     pendingInsertedElementSelection.nodePath.absolutePath &&
-                    JSON.stringify(track.nodePathInfo.sequenceSubscriptionKey.nodePath) ===
-                        JSON.stringify(pendingInsertedElementSelection.nodePath.nodePath)));
+                JSON.stringify(track.nodePathInfo.sequenceSubscriptionKey.nodePath) ===
+                    JSON.stringify(pendingInsertedElementSelection.nodePath.nodePath));
         if (((_a = pendingSelectionStart.current) === null || _a === void 0 ? void 0 : _a.selection) !==
             pendingInsertedElementSelection) {
             pendingSelectionStart.current = {
@@ -300,7 +332,14 @@ const TimelineInner = () => {
             return matchesInsertedNodePath(track) &&
                 !((_a = pendingSelectionStart.current) === null || _a === void 0 ? void 0 : _a.existingSequenceIds.has(track.sequence.id));
         });
-        if (!insertedTrack || insertedTrack.nodePathInfo === null) {
+        if (!insertedTrack) {
+            return;
+        }
+        const layerKey = layerChildrenValue.keys.get(insertedTrack.sequence.id);
+        if (layerKey !== undefined && !layerChildrenValue.collapsed[layerKey]) {
+            layerChildrenValue.toggle(layerKey);
+        }
+        if (insertedTrack.nodePathInfo === null) {
             return;
         }
         selectItems([{ type: 'sequence', nodePathInfo: insertedTrack.nodePathInfo }], { reveal: true });
@@ -311,42 +350,11 @@ const TimelineInner = () => {
     }, [
         canvasContent,
         fastRefreshes,
+        layerChildrenValue,
         pendingInsertedElementSelection,
         selectItems,
         timeline,
     ]);
-    const durationInFrames = (_a = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames) !== null && _a !== void 0 ? _a : 0;
-    const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
-    const filtered = (0, react_1.useMemo)(() => {
-        return timeline.filter((t) => {
-            // Moving outside the composition can reduce the displayed duration to
-            // zero. Keep the drag owner mounted until its pending edit is saved.
-            if (t.sequence.showInTimeline &&
-                t.nodePathInfo !== null &&
-                getDragOverrides(t.nodePathInfo.sequenceSubscriptionKey).from !==
-                    undefined) {
-                return true;
-            }
-            return (0, should_show_track_in_timeline_1.shouldShowTrackInTimeline)(t, durationInFrames);
-        });
-    }, [durationInFrames, getDragOverrides, timeline]);
-    // Keep `filtered` complete so a future toggle can show every programmatic
-    // instance without recalculating the timeline or losing its instance index.
-    const collapsed = (0, react_1.useMemo)(() => {
-        const seenNodePaths = new Set();
-        return filtered.filter((track) => {
-            if (track.nodePathInfo === null) {
-                return true;
-            }
-            const key = (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(track.nodePathInfo.sequenceSubscriptionKey);
-            if (seenNodePaths.has(key)) {
-                return false;
-            }
-            seenNodePaths.add(key);
-            return true;
-        });
-    }, [filtered]);
-    const { visibleTracks, value: layerChildrenValue } = (0, TimelineLayerChildren_1.useTimelineLayerChildren)(collapsed, sequences, (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null);
     const maxTimelineTracks = (0, studio_runtime_config_1.getStudioMaxTimelineTracks)();
     const shown = (0, react_1.useMemo)(() => {
         return maxTimelineTracks !== null &&

package/dist/components/Timeline/TimelineLayerChildren.js

@@ -8,7 +8,16 @@ const hoverable_1 = require("../../helpers/hoverable");
 const persist_boolean_map_1 = require("../../helpers/persist-boolean-map");
 const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
 const TimelineCollapseToggle_1 = require("./TimelineCollapseToggle");
-const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
+// Reserve the same space before and after children register or unregister.
+const toggleLayout = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 12,
+    height: 16,
+    marginRight: 0,
+    flexShrink: 0,
+};
 const STORAGE_KEY = 'remotion.editor.collapsedLayerChildren.v1';
 const TimelineLayerChildrenContext = (0, react_1.createContext)(null);
 exports.TimelineLayerChildrenProvider = TimelineLayerChildrenContext.Provider;
@@ -104,7 +113,7 @@ const TimelineLayerChildrenToggle = ({ sequence }) => {
     }, [context, key]);
     const stopPropagation = (0, react_1.useCallback)((event) => event.stopPropagation(), []);
     if (!(context === null || context === void 0 ? void 0 : context.parents.has(sequence.id)) || key === undefined) {
-        return jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {});
+        return jsx_runtime_1.jsx("div", { style: toggleLayout });
     }
     const label = `${isCollapsed ? 'Expand' : 'Collapse'} children of ${sequence.displayName}`;
     return (jsx_runtime_1.jsx("button", { type: "button", className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, "aria-label": label, "aria-expanded": !isCollapsed, title: label, onClick: onClick, onPointerDown: stopPropagation, onDoubleClick: stopPropagation, style: {
@@ -114,16 +123,10 @@ const TimelineLayerChildrenToggle = ({ sequence }) => {
                 idleColor: colors_1.LIGHT_TEXT,
                 hoverColor: colors_1.WHITE,
             }),
+            ...toggleLayout,
             border: 'none',
             padding: 0,
             cursor: 'default',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: 12,
-            height: 16,
-            marginRight: 0,
-            flexShrink: 0,
         }, children: jsx_runtime_1.jsx(TimelineCollapseToggle_1.TimelineCollapseToggle, { collapsed: isCollapsed, color: "currentColor" }) }));
 };
 exports.TimelineLayerChildrenToggle = TimelineLayerChildrenToggle;

package/dist/components/Timeline/TimelineZoomControls.js

@@ -44,6 +44,7 @@ const is_current_selected_still_1 = require("../../helpers/is-current-selected-s
 const canvas_zoom_1 = require("../../icons/canvas-zoom");
 const timeline_zoom_1 = require("../../state/timeline-zoom");
 const z_index_1 = require("../../state/z-index");
+const ActionTooltip_1 = require("../ActionTooltip");
 const ControlButton_1 = require("../ControlButton");
 const layout_1 = require("../layout");
 const timeline_refs_1 = require("./timeline-refs");
@@ -123,7 +124,7 @@ const TimelineZoomControlsInner = ({ sliderMaxWidth }) => {
         return null;
     }
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, title: "Zoom out timeline", role: 'ControlButton', type: "button", children: (color) => jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomOutIcon, { color: color }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineZoomSlider, { maxWidth: sliderMaxWidth, minZoom: minZoom, timelineViewportWidth: timelineViewportWidth }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onPlusClicked, style: buttonStyle, title: "Zoom in timeline", role: 'button', type: "button", children: (color) => jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomIcon, { color: color }) })
+            jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Zoom out timeline", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, title: "", "aria-label": "Zoom out timeline", type: "button", children: (color) => jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomOutIcon, { color: color }) }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineZoomSlider, { maxWidth: sliderMaxWidth, minZoom: minZoom, timelineViewportWidth: timelineViewportWidth }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Zoom in timeline", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onPlusClicked, style: buttonStyle, title: "", "aria-label": "Zoom in timeline", type: "button", children: (color) => jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomIcon, { color: color }) }) })
         ] }));
 };
 exports.TimelineZoomControls = react_1.default.memo(TimelineZoomControlsInner);

package/dist/components/Timeline/timeline-field-display-utils.js

@@ -95,11 +95,14 @@ const formatNumberTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
         const digits = (0, timeline_field_utils_1.getDecimalPlaces)(numericValue);
         return digits === 0 ? String(numericValue) : numericValue.toFixed(digits);
     }
-    return (0, timeline_field_utils_1.formatTimelineNumber)({
-        decimalPlaces: stepDecimals,
-        fixed: true,
-        value: numericValue,
-    });
+    // The step controls increments, not the precision of source or typed values.
+    // Keep finer values while trimming floating point noise.
+    const normalizedValue = (0, timeline_field_utils_1.getDecimalPlaces)(numericValue) > stepDecimals
+        ? Number(numericValue.toPrecision(15))
+        : numericValue;
+    return (0, timeline_field_utils_1.getDecimalPlaces)(normalizedValue) > stepDecimals
+        ? String(normalizedValue)
+        : normalizedValue.toFixed(stepDecimals);
 };
 const formatRotationTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
     const configuredStep = fieldSchema.type === 'rotation-css' ||

package/dist/components/TimelineCombobox.d.ts

@@ -5,6 +5,7 @@ export declare const TimelineCombobox: React.FC<{
     readonly values: ComboboxValue[];
     readonly selectedId: string | number;
     readonly title: string;
+    readonly tooltipDelay: number | null;
     readonly labelWidth?: number;
     readonly renderLeftItem?: RenderInlineAction;
     readonly unhoveredIconColor?: string;

package/dist/components/TimelineCombobox.js

@@ -4,6 +4,7 @@ exports.TimelineCombobox = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../helpers/colors");
 const caret_1 = require("../icons/caret");
+const ActionTooltip_1 = require("./ActionTooltip");
 const layout_1 = require("./layout");
 const SegmentedButton_1 = require("./SegmentedButton");
 const segmentedButtonStyle = {
@@ -21,7 +22,7 @@ const label = {
     userSelect: 'none',
     whiteSpace: 'nowrap',
 };
-const TimelineCombobox = ({ values, selectedId, title, labelWidth = 32, renderLeftItem, unhoveredIconColor = colors_1.LIGHT_TEXT, }) => {
+const TimelineCombobox = ({ values, selectedId, title, tooltipDelay, labelWidth = 32, renderLeftItem, unhoveredIconColor = colors_1.LIGHT_TEXT, }) => {
     const selected = values.find((value) => value.id === selectedId);
     const segments = [
         {
@@ -32,16 +33,19 @@ const TimelineCombobox = ({ values, selectedId, title, labelWidth = 32, renderLe
             leaveLeftSpace: true,
             onOpenChange: null,
             renderContent: (color) => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [renderLeftItem ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [renderLeftItem(color), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
-                        ] })) : null, selected ? (jsx_runtime_1.jsx("div", { title: typeof selected.label === 'string' ? selected.label : undefined, style: { ...label, width: labelWidth }, children: selected.label })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(caret_1.CaretDown, { color: color })
+                        ] })) : null, selected ? (jsx_runtime_1.jsx("div", { title: tooltipDelay === null && typeof selected.label === 'string'
+                            ? selected.label
+                            : undefined, style: { ...label, width: labelWidth }, children: selected.label })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(caret_1.CaretDown, { color: color })
                 ] })),
             segmentId: 'selector',
             selectedId,
             style: { fontFamily: 'inherit', padding: '0 4px' },
-            title,
+            title: tooltipDelay === null ? title : null,
             type: 'menu',
             values,
         },
     ];
-    return (jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: segmentedButtonStyle, title: null }));
+    const button = (jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: segmentedButtonStyle, title: null }));
+    return tooltipDelay === null ? (button) : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: title, shortcut: null, delay: tooltipDelay, dismissOnClick: true, children: button }));
 };
 exports.TimelineCombobox = TimelineCombobox;

package/dist/components/TimelineInOutToggle.js

@@ -5,24 +5,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const no_react_1 = require("remotion/no-react");
-const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const use_keybinding_1 = require("../helpers/use-keybinding");
+const use_keyboard_shortcut_label_1 = require("../helpers/use-keyboard-shortcut-label");
 const timelineInOutPointer_1 = require("../icons/timelineInOutPointer");
 const in_out_1 = require("../state/in-out");
+const ActionTooltip_1 = require("./ActionTooltip");
 const ControlButton_1 = require("./ControlButton");
-const keyboard_shortcuts_1 = require("./keyboard-shortcuts");
-const getTooltipText = (pointType, action) => {
-    const shortcut = (0, keyboard_shortcuts_1.getKeyboardShortcutLabel)(action);
-    return [
-        `Mark ${pointType}`,
-        (0, use_keybinding_1.areKeyboardShortcutsDisabled)() || shortcut === '' ? null : `(${shortcut})`,
-        '- right click to clear',
-    ]
-        .filter(no_react_1.NoReactInternals.truthy)
-        .join(' ');
-};
 const style = {
     width: 17,
     height: 17,
@@ -34,7 +23,11 @@ exports.inOutHandles = (0, react_1.createRef)();
 exports.defaultInOutValue = { inFrame: null, outFrame: null };
 const TimelineInOutPointToggle = () => {
     var _a;
-    (0, client_id_1.useStudioConfigRevision)();
+    const inShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('setInPoint');
+    const outShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('setOutPoint');
+    const inAriaShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutAriaKeyShortcuts)('setInPoint');
+    const outAriaShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutAriaKeyShortcuts)('setOutPoint');
+    const shortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const { setInAndOutFrames } = (0, in_out_1.useTimelineSetInOutFramePosition)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
@@ -249,7 +242,7 @@ const TimelineInOutPointToggle = () => {
         };
     }, [confId, onInMark, onInOutClear, onOutMark]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('In', 'setInPoint'), "aria-label": getTooltipText('In', 'setInPoint'), style: buttonStyle, onClick: onInMark, onContextMenu: clearInMark, disabled: !videoConfig || isFirstFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? color : colors_1.BLUE, style: style })) }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('Out', 'setOutPoint'), "aria-label": getTooltipText('Out', 'setOutPoint'), style: buttonStyle, onClick: onOutMark, onContextMenu: clearOutMark, disabled: !videoConfig || isLastFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? color : colors_1.BLUE, style: style })) })
+            jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "In point", shortcut: shortcutsDisabled ? null : inShortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": "In point", "aria-description": "Right click to clear", "aria-keyshortcuts": shortcutsDisabled ? undefined : inAriaShortcut || undefined, style: buttonStyle, onClick: onInMark, onContextMenu: clearInMark, disabled: !videoConfig || isFirstFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? color : colors_1.BLUE, style: style })) }) }), jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Out point", shortcut: shortcutsDisabled ? null : outShortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": "Out point", "aria-description": "Right click to clear", "aria-keyshortcuts": shortcutsDisabled ? undefined : outAriaShortcut || undefined, style: buttonStyle, onClick: onOutMark, onContextMenu: clearOutMark, disabled: !videoConfig || isLastFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? color : colors_1.BLUE, style: style })) }) })
         ] }));
 };
 exports.TimelineInOutPointToggle = TimelineInOutPointToggle;