@remotion/studio 4.0.522 → 4.0.523

package/dist/components/SettingsButton.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const SettingsButton: React.FC<{
+    readonly showUpdates: boolean;
+}>;

package/dist/components/SettingsButton.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingsButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const colors_1 = require("../helpers/colors");
+const gear_1 = require("../icons/gear");
+const modals_1 = require("../state/modals");
+const InlineAction_1 = require("./InlineAction");
+const UpdateStatusContext_1 = require("./UpdateStatusContext");
+const SettingsButton = ({ showUpdates }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    const { info, knownBugs } = (0, UpdateStatusContext_1.useUpdateStatus)();
+    const updateAvailable = showUpdates &&
+        Boolean((info === null || info === void 0 ? void 0 : info.updateAvailable) || (info === null || info === void 0 ? void 0 : info.skillsUpdateAvailable));
+    const hasBugfixesAvailable = showUpdates &&
+        Boolean((info === null || info === void 0 ? void 0 : info.updateAvailable) && knownBugs && knownBugs.length > 0);
+    const openModal = (0, react_1.useCallback)(() => {
+        var _a;
+        var _b;
+        setSelectedModal({
+            type: 'settings',
+            initialTab: updateAvailable
+                ? 'updates'
+                : (0, browser_studio_operations_1.getBrowserStudioOperations)() === null
+                    ? 'rendering'
+                    : 'shortcuts',
+            initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
+        });
+    }, [setSelectedModal, updateAvailable]);
+    const renderGearIcon = (0, react_1.useCallback)((color) => {
+        return jsx_runtime_1.jsx(gear_1.GearIcon, { color: color, width: 16, height: 16 });
+    }, []);
+    const renderUpdateIcon = (0, react_1.useCallback)((color) => {
+        return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
+                height: 16,
+                width: 16,
+                color,
+                flexShrink: 0,
+            }, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M256 32a224 224 0 1 1 0 448 224 224 0 1 1 0-448zm0 480a256 256 0 1 0 0-512 256 256 0 1 0 0 512zM377 231L273 127c-9.4-9.4-24.6-9.4-33.9 0L135 231c-6.9 6.9-8.9 17.2-5.2 26.2S142.3 272 152 272l40 0 0 72c0 22.1 17.9 40 40 40l48 0c22.1 0 40-17.9 40-40l0-72 40 0c9.7 0 18.5-5.8 22.2-14.8s1.7-19.3-5.2-26.2z" }) }));
+    }, []);
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openModal, renderAction: updateAvailable ? renderUpdateIcon : renderGearIcon, unhoveredColor: hasBugfixesAvailable ? colors_1.WARNING_COLOR : colors_1.WHITE_ALPHA_80, title: hasBugfixesAvailable
+            ? 'Bugfixes available'
+            : updateAvailable
+                ? 'Update available'
+                : 'Settings' }));
+};
+exports.SettingsButton = SettingsButton;

package/dist/components/SettingsModal.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-type SettingsTab = 'apps' | 'rendering' | 'studio' | 'packages' | 'shortcuts' | 'skills' | 'license' | 'updates';
+type SettingsTab = 'apps' | 'rendering' | 'studio' | 'packages' | 'models' | 'shortcuts' | 'skills' | 'license' | 'updates';
 export declare const SettingsModal: React.FC<{
     readonly initialTab: SettingsTab;
     readonly initialPublicLicenseKey: string | null;

package/dist/components/SettingsModal.js

@@ -10,6 +10,7 @@ const apps_1 = require("../icons/apps");
 const cloud_download_1 = require("../icons/cloud-download");
 const keyboard_1 = require("../icons/keyboard");
 const license_1 = require("../icons/license");
+const models_1 = require("../icons/models");
 const package_1 = require("../icons/package");
 const remotion_triangle_1 = require("../icons/remotion-triangle");
 const skills_1 = require("../icons/skills");
@@ -21,6 +22,7 @@ const InstallPackage_1 = require("./InstallPackage");
 const KeyboardShortcutsSettings_1 = require("./KeyboardShortcutsSettings");
 const is_menu_item_1 = require("./Menu/is-menu-item");
 const ModalHeader_1 = require("./ModalHeader");
+const ModelsSettings_1 = require("./ModelsSettings");
 const DismissableModal_1 = require("./NewComposition/DismissableModal");
 const RenderingSettings_1 = require("./RenderingSettings");
 const render_modals_1 = require("./RenderModal/render-modals");
@@ -102,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" })), 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('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 === '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 === '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' }))] }) }));
 };
 exports.SettingsModal = SettingsModal;

package/dist/components/ShowOutlinesProvider.js

@@ -5,9 +5,21 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const editor_outlines_1 = require("../state/editor-outlines");
 const timeline_sequence_hover_1 = require("../state/timeline-sequence-hover");
+const browserStudioPointerLeaveEvent = 'remotion-browser-studio-pointerleave';
 const ShowOutlinesProvider = ({ children }) => {
     const [editorShowOutlines, setEditorShowOutlinesState] = (0, react_1.useState)(() => (0, editor_outlines_1.loadEditorShowOutlinesOption)());
     const timelineSequenceHoverStore = (0, react_1.useMemo)(() => (0, timeline_sequence_hover_1.createTimelineSequenceHoverStore)(), []);
+    (0, react_1.useEffect)(() => {
+        const onPointerLeave = () => {
+            timelineSequenceHoverStore.setHoveredSequence((hover) => (hover === null || hover === void 0 ? void 0 : hover.source) === 'timeline' ? null : hover);
+        };
+        window.addEventListener('pointerleave', onPointerLeave);
+        window.addEventListener(browserStudioPointerLeaveEvent, onPointerLeave);
+        return () => {
+            window.removeEventListener('pointerleave', onPointerLeave);
+            window.removeEventListener(browserStudioPointerLeaveEvent, onPointerLeave);
+        };
+    }, [timelineSequenceHoverStore]);
     const setEditorShowOutlines = (0, react_1.useCallback)((newValue) => {
         setEditorShowOutlinesState((prevState) => {
             const newVal = newValue(prevState);

package/dist/components/SidebarCollapserControls.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SidebarCollapserControl = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
 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 InlineAction_1 = require("./InlineAction");
 const TopPanel_1 = require("./TopPanel");
@@ -92,8 +92,7 @@ const SidebarCollapserControl = ({ side }) => {
         if (side === 'left') {
             const left = keybindings.registerKeybinding({
                 event: 'keydown',
-                key: 'b',
-                commandCtrlKey: true,
+                action: 'toggleLeftSidebar',
                 callback: toggleLeft,
                 preventDefault: true,
                 triggerIfInputFieldFocused: false,
@@ -101,8 +100,7 @@ const SidebarCollapserControl = ({ side }) => {
             });
             const zen = keybindings.registerKeybinding({
                 event: 'keydown',
-                key: 'g',
-                commandCtrlKey: true,
+                action: 'toggleBothSidebars',
                 callback: toggleBoth,
                 preventDefault: true,
                 triggerIfInputFieldFocused: false,
@@ -115,8 +113,7 @@ const SidebarCollapserControl = ({ side }) => {
         }
         const right = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'j',
-            commandCtrlKey: true,
+            action: 'toggleRightSidebar',
             callback: toggleRight,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
@@ -126,12 +123,14 @@ const SidebarCollapserControl = ({ side }) => {
             right.unregister();
         };
     }, [keybindings, side, toggleBoth, toggleLeft, toggleRight]);
-    const toggleLeftTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
+    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 (${ShortcutHint_1.cmdOrCtrlCharacter}+B)`;
-    const toggleRightTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
+        : `Toggle Left Sidebar (${leftShortcut})`;
+    const toggleRightTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)() || rightShortcut === ''
         ? 'Toggle Right Sidebar'
-        : `Toggle Right Sidebar (${ShortcutHint_1.cmdOrCtrlCharacter}+J)`;
+        : `Toggle Right Sidebar (${rightShortcut})`;
     const colorStyle = (0, react_1.useCallback)((color) => {
         return {
             ...style,

package/dist/components/SizeSelector.js

@@ -6,6 +6,8 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
+const use_keybinding_1 = require("../helpers/use-keybinding");
+const use_keyboard_shortcut_label_1 = require("../helpers/use-keyboard-shortcut-label");
 const canvas_zoom_1 = require("../icons/canvas-zoom");
 const Checkmark_1 = require("../icons/Checkmark");
 const TimelineCombobox_1 = require("./TimelineCombobox");
@@ -87,6 +89,10 @@ const usePreviewSizeMenuItems = () => {
         }
         return false;
     }, [canvasContent]);
+    const configuredResetZoomShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('resetZoom');
+    const resetZoomShortcut = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
+        ? ''
+        : configuredResetZoomShortcut;
     const items = (0, react_1.useMemo)(() => {
         return (0, exports.getUniqueSizes)(size).map((newSize) => {
             return {
@@ -99,13 +105,15 @@ const usePreviewSizeMenuItems = () => {
                 },
                 type: 'item',
                 value: newSize.size,
-                keyHint: newSize.size === 'auto' ? '0' : null,
+                keyHint: newSize.size === 'auto' && resetZoomShortcut !== ''
+                    ? resetZoomShortcut
+                    : null,
                 leftItem: String(size.size) === String(newSize.size) ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
                 subMenu: null,
                 quickSwitcherLabel: null,
             };
         });
-    }, [setSize, size]);
+    }, [resetZoomShortcut, setSize, size]);
     return {
         items,
         selectedId: String(size.size),

package/dist/components/SkillsSettings.js

@@ -8,7 +8,6 @@ const copy_text_1 = require("../helpers/copy-text");
 const use_copy_feedback_1 = require("../helpers/use-copy-feedback");
 const check_circle_filled_1 = require("../icons/check-circle-filled");
 const copy_1 = require("../icons/copy");
-const minus_1 = require("../icons/minus");
 const InlineAction_1 = require("./InlineAction");
 const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
@@ -126,8 +125,8 @@ const SkillsSettings = () => {
                                 : 'Not installed';
                     return (jsx_runtime_1.jsxs("div", { role: "listitem", style: index === remotionSkillsInfo.skills.length - 1
                             ? lastSkillRow
-                            : skillRow, children: [installed ? (jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { "aria-hidden": true, style: { ...statusIcon, fill: colors_1.BLUE } })) : (jsx_runtime_1.jsx(minus_1.Minus, { "aria-hidden": true, color: colors_1.LIGHT_TEXT, style: statusIcon })), jsx_runtime_1.jsxs("span", { style: skillName, children: ["/", skill.name] }), jsx_runtime_1.jsx("span", { style: status, children: installedLocation })
-                        ] }, skill.name));
+                            : skillRow, children: [
+                            jsx_runtime_1.jsxs("span", { style: skillName, children: ["/", skill.name] }), jsx_runtime_1.jsx("span", { style: status, children: installedLocation }), installed ? (jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { "aria-hidden": true, style: { ...statusIcon, fill: colors_1.BLUE } })) : null] }, skill.name));
                 }) })) : null] }));
 };
 exports.SkillsSettings = SkillsSettings;

package/dist/components/SnappingToggle.js

@@ -6,6 +6,7 @@ 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 ControlButton_1 = require("./ControlButton");
@@ -14,12 +15,14 @@ const SnappingToggle = () => {
     const onClick = (0, react_1.useCallback)(() => {
         setEditorSnapping((current) => !current);
     }, [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)() ? null : '(Shift+M)',
+        (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": "Shift+M", 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" })) }));
+    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" })) }));
 };
 exports.SnappingToggle = SnappingToggle;

package/dist/components/Tabs/vertical.d.ts

@@ -5,4 +5,5 @@ export declare const VerticalTab: React.FC<{
     readonly renderIcon?: (color: string) => React.ReactNode;
     readonly style?: React.CSSProperties;
     readonly selected: boolean;
+    readonly autoFocus?: boolean;
 }>;

package/dist/components/Tabs/vertical.js

@@ -19,7 +19,7 @@ const selectorButton = {
     userSelect: 'none',
     WebkitUserSelect: 'none',
 };
-const VerticalTab = ({ children, onClick, renderIcon, style, selected }) => {
+const VerticalTab = ({ children, onClick, renderIcon, style, selected, autoFocus }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const onPointerEnter = (0, react_1.useCallback)(() => {
@@ -38,6 +38,6 @@ const VerticalTab = ({ children, onClick, renderIcon, style, selected }) => {
             ...style,
         };
     }, [color, hovered, selected, style]);
-    return (jsx_runtime_1.jsxs("button", { style: definiteStyle, type: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: [renderIcon ? renderIcon(color) : null, children] }));
+    return (jsx_runtime_1.jsxs("button", { autoFocus: autoFocus, style: definiteStyle, type: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: [renderIcon ? renderIcon(color) : null, children] }));
 };
 exports.VerticalTab = VerticalTab;

package/dist/components/TimeValue.js

@@ -102,13 +102,12 @@ const TimeValue = () => {
     }), [seek, play, pause, toggle]);
     (0, react_1.useEffect)(() => {
         const gKey = keybindings.registerKeybinding({
-            event: 'keypress',
-            key: 'g',
+            event: 'keydown',
+            action: 'goToFrame',
             callback: () => {
                 var _a;
                 (_a = ref.current) === null || _a === void 0 ? void 0 : _a.click();
             },
-            commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,

package/dist/components/Timeline/SequencePropsObserver.js

@@ -8,6 +8,7 @@ const client_id_1 = require("../../helpers/client-id");
 const sequence_node_path_mutations_1 = require("../../helpers/sequence-node-path-mutations");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const sequence_props_subscription_store_1 = require("./sequence-props-subscription-store");
+const TimelineSelection_1 = require("./TimelineSelection");
 const SequencePropsObserver = () => {
     const { subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { remapPropStatuses, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -18,6 +19,7 @@ const SequencePropsObserver = () => {
     const { setOverrideIdToNodePath } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsSettersContext);
     const { fastRefreshes } = (0, react_1.useContext)(fast_refresh_context_1.FastRefreshContext);
     const { migrateExpandedTracksForSubscriptionKey } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
+    const { remapSelectionNodePaths } = (0, TimelineSelection_1.useTimelineSelection)();
     (0, react_1.useEffect)(() => {
         const handleEvent = (event) => {
             if (event.type !== 'sequence-props-updated') {
@@ -36,6 +38,7 @@ const SequencePropsObserver = () => {
         if (mutations.length === 0) {
             return;
         }
+        remapSelectionNodePaths(mutations);
         const statusRemappings = [];
         const overrideUpdates = [];
         const overrideIdsToRefresh = new Set();
@@ -127,6 +130,7 @@ const SequencePropsObserver = () => {
         fastRefreshes,
         migrateExpandedTracksForSubscriptionKey,
         propStatusesRef,
+        remapSelectionNodePaths,
         remapPropStatuses,
         setOverrideIdToNodePath,
     ]);

package/dist/components/Timeline/Timeline.js

@@ -63,7 +63,6 @@ const should_subscribe_to_sequence_props_1 = require("./should-subscribe-to-sequ
 const SubscribeToNodePaths_1 = require("./SubscribeToNodePaths");
 const timeline_asset_drop_context_1 = require("./timeline-asset-drop-context");
 const timeline_refs_1 = require("./timeline-refs");
-const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const TimelineDragHandler_1 = require("./TimelineDragHandler");
 const TimelineHeightContainer_1 = require("./TimelineHeightContainer");
 const TimelineInOutDragHandler_1 = require("./TimelineInOutDragHandler");
@@ -75,7 +74,7 @@ const TimelinePinchZoom_1 = require("./TimelinePinchZoom");
 const TimelinePlayCursorSyncer_1 = require("./TimelinePlayCursorSyncer");
 const TimelineScrollable_1 = require("./TimelineScrollable");
 const TimelineSelection_1 = require("./TimelineSelection");
-const TimelineSequenceItem_1 = require("./TimelineSequenceItem");
+const TimelineSequenceRightEdgeDragHandle_1 = require("./TimelineSequenceRightEdgeDragHandle");
 const TimelineSlider_1 = require("./TimelineSlider");
 const TimelineTickFormatProvider_1 = require("./TimelineTickFormatProvider");
 const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
@@ -99,7 +98,6 @@ const TimelineContextMenuArea = ({ children }) => {
     const assetDropFrame = (0, use_timeline_asset_drop_1.useTimelineAssetDrop)();
     const { compositions, canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
-    const isStill = (0, is_current_selected_still_1.useIsStill)();
     const [isAddingSolid, setIsAddingSolid] = (0, react_1.useState)(false);
     const [isAddingAsset, setIsAddingAsset] = (0, react_1.useState)(false);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -107,44 +105,6 @@ const TimelineContextMenuArea = ({ children }) => {
     const previewInteractive = previewConnected && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
     const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
     const browserStudioCanInsertSolid = browserStudioOperations !== null;
-    (0, react_1.useEffect)(() => {
-        const verticalScroll = timeline_refs_1.timelineVerticalScroll.current;
-        if (!verticalScroll) {
-            return;
-        }
-        const autoScroll = (0, timeline_scroll_logic_1.startTimelineEdgeAutoScroll)({
-            includeHorizontal: false,
-            includeVertical: true,
-            verticalTopOffset: isStill ? 0 : TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT,
-            onTick: (directions) => {
-                if (directions.y === null) {
-                    return;
-                }
-                verticalScroll.scrollTop +=
-                    directions.y === 'up'
-                        ? -timeline_scroll_logic_1.EDGE_SCROLL_VERTICAL_INCREMENT
-                        : timeline_scroll_logic_1.EDGE_SCROLL_VERTICAL_INCREMENT;
-            },
-        });
-        const onDragOver = (event) => {
-            if (!event.dataTransfer ||
-                !Array.from(event.dataTransfer.types).includes(TimelineSequenceItem_1.SEQUENCE_REORDER_MIME_TYPE)) {
-                autoScroll.stop();
-                return;
-            }
-            autoScroll.update(event);
-        };
-        const stopAutoScroll = () => autoScroll.stop();
-        verticalScroll.addEventListener('dragover', onDragOver, true);
-        document.addEventListener('dragend', stopAutoScroll, true);
-        document.addEventListener('drop', stopAutoScroll, true);
-        return () => {
-            autoScroll.stop();
-            verticalScroll.removeEventListener('dragover', onDragOver, true);
-            document.removeEventListener('dragend', stopAutoScroll, true);
-            document.removeEventListener('drop', stopAutoScroll, true);
-        };
-    }, [isStill]);
     const currentCompositionId = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
     const currentComposition = (0, react_1.useMemo)(() => {
         var _a;
@@ -413,6 +373,6 @@ const TimelineInner = () => {
 };
 const MemoizedTimelineInner = react_1.default.memo(TimelineInner);
 const Timeline = () => {
-    return (jsx_runtime_1.jsx(TimelineTickFormatProvider_1.TimelineTickFormatProvider, { children: jsx_runtime_1.jsx(MemoizedTimelineInner, {}) }));
+    return (jsx_runtime_1.jsx(TimelineTickFormatProvider_1.TimelineTickFormatProvider, { children: jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceMediaDurationDragLimitsProvider, { children: jsx_runtime_1.jsx(MemoizedTimelineInner, {}) }) }));
 };
 exports.Timeline = Timeline;

package/dist/components/Timeline/TimelineClipboardKeybindings.js

@@ -367,7 +367,7 @@ const TimelineClipboardKeybindings = () => {
         const { clientId } = previewServerState;
         const copy = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'c',
+            action: 'copyEffectsAndValues',
             callback: (e) => {
                 var _a, _b;
                 const { selectedItems } = currentSelection.current;
@@ -509,14 +509,13 @@ const TimelineClipboardKeybindings = () => {
                     (0, NotificationCenter_1.showNotification)(`Could not copy effects: ${err.message}`, 2000);
                 });
             },
-            commandCtrlKey: true,
             preventDefault: false,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
         const cut = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'x',
+            action: 'cutEffects',
             callback: (e) => {
                 const { selectedItems, clearSelection, selectItems } = currentSelection.current;
                 if (selectedItems.length === 0) {
@@ -575,7 +574,6 @@ const TimelineClipboardKeybindings = () => {
                     (0, NotificationCenter_1.showNotification)(`Could not cut effects: ${err.message}`, 2000);
                 });
             },
-            commandCtrlKey: true,
             preventDefault: false,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,

package/dist/components/Timeline/TimelineDeleteKeybindings.js

@@ -25,31 +25,18 @@ const TimelineDeleteKeybindings = () => {
         if (!canSelect || previewServerState.type !== 'connected') {
             return;
         }
-        const backspace = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'Backspace',
-            callback: () => deleteTimelineItems(null),
-            commandCtrlKey: false,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
         const deleteKey = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'Delete',
+            action: 'deleteSelection',
             callback: () => deleteTimelineItems(null),
-            commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
         const duplicate = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'd',
-            callback: (event) => {
-                if (!(0, split_selected_timeline_item_1.shouldHandleTimelineDuplicateShortcut)(event)) {
-                    return;
-                }
+            action: 'duplicateSequences',
+            callback: () => {
                 const { selectedItems } = currentSelection.current;
                 if (selectedItems.length === 0) {
                     return;
@@ -63,7 +50,6 @@ const TimelineDeleteKeybindings = () => {
                 }
                 duplicatePromise.catch(() => undefined);
             },
-            commandCtrlKey: true,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
@@ -97,7 +83,6 @@ const TimelineDeleteKeybindings = () => {
             keepRegisteredWhenNotHighestContext: false,
         });
         return () => {
-            backspace.unregister();
             deleteKey.unregister();
             duplicate.unregister();
             split.unregister();

package/dist/components/Timeline/TimelineDragHandler.js

@@ -115,7 +115,7 @@ const TimelineDragHandler = () => {
 };
 exports.TimelineDragHandler = TimelineDragHandler;
 const TimelineDragHandlerInner = () => {
-    var _a;
+    var _a, _b;
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const size = player_1.PlayerInternals.useElementSize(timeline_refs_1.scrollableRef, {
         triggerOnWindowResize: true,
@@ -320,6 +320,6 @@ const TimelineDragHandlerInner = () => {
             current.removeEventListener('scroll', onScroll);
         };
     }, []);
-    return (jsx_runtime_1.jsx("div", { ref: ref, style: style, onPointerDown: onPointerDown, children: jsx_runtime_1.jsx("div", { style: inner, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME }) }));
+    return (jsx_runtime_1.jsx("div", { ref: ref, style: { ...style, minWidth: (_b = size === null || size === void 0 ? void 0 : size.width) !== null && _b !== void 0 ? _b : 0 }, onPointerDown: onPointerDown, children: jsx_runtime_1.jsx("div", { style: inner, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME }) }));
 };
 const TimelineDragHandlerInnerMemo = react_1.default.memo(TimelineDragHandlerInner);

package/dist/components/Timeline/TimelineExpandedKeyframeRow.js

@@ -47,6 +47,7 @@ const rowClipper = {
     boxSizing: 'border-box',
     marginLeft: -timeline_layout_1.TIMELINE_PADDING,
     marginRight: -timeline_layout_1.TIMELINE_PADDING,
+    minWidth: `calc(100% + ${timeline_layout_1.TIMELINE_PADDING * 2}px)`,
     overflow: 'hidden',
     paddingLeft: timeline_layout_1.TIMELINE_PADDING,
     paddingRight: timeline_layout_1.TIMELINE_PADDING,

package/dist/components/Timeline/TimelineRowChrome.js

@@ -37,6 +37,7 @@ exports.TimelineRowChrome = exports.TimelineRowKeyframeControlsColumn = exports.
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const colors_1 = require("../../helpers/colors");
+const drag_aware_double_click_1 = require("../../helpers/drag-aware-double-click");
 const Padder_1 = require("./Padder");
 const timeline_row_layout_1 = require("./timeline-row-layout");
 const TimelineRowLayoutContext_1 = require("./TimelineRowLayoutContext");
@@ -72,6 +73,7 @@ exports.TimelineRowKeyframeControlsColumn = TimelineRowKeyframeControlsColumn;
 const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, style, selected, selectable, onSelect, showSelectedBackground, containsSelection, hovered = false, outerHeight, onDragLeave, onDragOver, onDrop, onDoubleClick, onPointerEnter, onPointerLeave, }) => {
     const { basePadding, rowBorderRadius, rowHorizontalMargin } = (0, react_1.useContext)(TimelineRowLayoutContext_1.TimelineRowLayoutContext);
     const selectedBackground = (0, react_1.useContext)(exports.TimelineRowSelectedBackgroundContext);
+    const doubleClickTracker = (0, react_1.useMemo)(() => (0, drag_aware_double_click_1.createDragAwareDoubleClickTracker)(), []);
     const indentWidth = (0, timeline_row_layout_1.getTimelineRowIndentWidth)(depth);
     const chromeColumnStyle = (0, react_1.useMemo)(() => ({
         alignItems: 'center',
@@ -95,7 +97,7 @@ const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, styl
             onSelect();
         }
     }, [onSelect, selected]);
-    const onDoubleClickIfNotInteractive = (0, react_1.useCallback)((e) => {
+    const performDoubleClickIfNotInteractive = (0, react_1.useCallback)((e) => {
         const { target } = e;
         if (target instanceof Element &&
             e.currentTarget.contains(target.closest('button, input, select, textarea, a, [contenteditable="true"]'))) {
@@ -104,6 +106,12 @@ const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, styl
         }
         onDoubleClick === null || onDoubleClick === void 0 ? void 0 : onDoubleClick(e);
     }, [onDoubleClick]);
+    const onClick = (0, react_1.useCallback)((e) => {
+        if (!doubleClickTracker.acceptClickAsDoubleClick(e)) {
+            return;
+        }
+        performDoubleClickIfNotInteractive(e);
+    }, [doubleClickTracker, performDoubleClickIfNotInteractive]);
     const highlightBackground = (0, TimelineSelection_1.getTimelineRowHighlightBackground)({
         showSelectedBackground,
         selected,
@@ -139,8 +147,8 @@ const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, styl
     }, [outerHeight, highlightBackground]);
     const chrome = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [keyframeControls ? (jsx_runtime_1.jsx(exports.TimelineRowKeyframeControlsColumn, { depth: depth, children: keyframeControls })) : (jsx_runtime_1.jsx("div", { style: leftChromeStyle, children: jsx_runtime_1.jsxs("div", { style: chromeColumnStyle, children: [eye, indentWidth > 0 ? jsx_runtime_1.jsx(Padder_1.Padder, { depth: depth }) : null, arrow] }) })), children] }));
     if (outerStyle) {
-        return (jsx_runtime_1.jsx("div", { style: outerStyle, onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClickIfNotInteractive, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx("div", { style: innerRowStyle, children: chrome }) }));
+        return (jsx_runtime_1.jsx("div", { style: outerStyle, onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDownCapture: doubleClickTracker.beginPointerGesture, onPointerDown: selectable ? onPointerDown : undefined, onClick: onClick, onContextMenu: selectable ? onContextMenu : undefined, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx("div", { style: innerRowStyle, children: chrome }) }));
     }
-    return (jsx_runtime_1.jsx("div", { onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClickIfNotInteractive, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: innerRowStyle, children: chrome }));
+    return (jsx_runtime_1.jsx("div", { onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDownCapture: doubleClickTracker.beginPointerGesture, onPointerDown: selectable ? onPointerDown : undefined, onClick: onClick, onContextMenu: selectable ? onContextMenu : undefined, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: innerRowStyle, children: chrome }));
 };
 exports.TimelineRowChrome = TimelineRowChrome;

package/dist/components/Timeline/TimelineSchemaField.js

@@ -52,8 +52,10 @@ const unsupportedStatusWrapper = {
 };
 const unsupportedLabel = {
     color: colors_1.WHITE_ALPHA_40,
+    fontFamily: 'Arial, Helvetica, sans-serif',
     fontSize: 12,
     fontStyle: 'italic',
+    lineHeight: '18px',
 };
 const computedValue = {
     color: colors_1.WHITE_ALPHA_40,
@@ -119,10 +121,12 @@ const TimelineNonEditableStatus = ({ propStatus, field, runtimeValue, validatedL
         });
     }, [field.key, remotionSkillsInfo, setSelectedModal, validatedLocation]);
     if (propStatus.status === 'computed') {
-        return (jsx_runtime_1.jsx(exports.UnsupportedStatus, { label: (0, timeline_field_display_utils_1.formatTimelineFieldValueForDisplay)({
-                fieldSchema: field.fieldSchema,
-                value: runtimeValue,
-            }), onFix: onFix, formattedValue: true }));
+        return (jsx_runtime_1.jsx(exports.UnsupportedStatus, { label: runtimeValue === undefined
+                ? 'computed'
+                : (0, timeline_field_display_utils_1.formatTimelineFieldValueForDisplay)({
+                    fieldSchema: field.fieldSchema,
+                    value: runtimeValue,
+                }), onFix: onFix, formattedValue: runtimeValue !== undefined }));
     }
 };
 exports.TimelineNonEditableStatus = TimelineNonEditableStatus;