@remotion/studio 4.0.523 → 4.0.525

package/dist/components/SkillsSettings.js

@@ -3,15 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SkillsSettings = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const 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 cloud_download_1 = require("../icons/cloud-download");
 const copy_1 = require("../icons/copy");
+const trash_1 = require("../icons/trash");
 const InlineAction_1 = require("./InlineAction");
 const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const SettingsContext_1 = require("./SettingsContext");
+const Spinner_1 = require("./Spinner");
 const INSTALL_COMMAND = 'npx remotion skills add';
 const container = {
     alignSelf: 'flex-start',
@@ -87,13 +91,28 @@ const status = {
     lineHeight: 1.4,
     whiteSpace: 'nowrap',
 };
+const actionIcon = {
+    height: 14,
+    width: 14,
+};
+const actionSlot = {
+    alignItems: 'center',
+    display: 'inline-flex',
+    flexShrink: 0,
+    height: 24,
+    justifyContent: 'center',
+    width: 24,
+};
 const loading = {
     ...description,
     marginTop: 14,
 };
 const SkillsSettings = () => {
     var _a;
-    const { error, remotionSkillsInfo } = (0, SettingsContext_1.useSettings)();
+    const { error, remotionSkillsInfo, installSkill, removeSkill, skillAction, skillActionError, } = (0, SettingsContext_1.useSettings)();
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const canInstall = !window.remotion_isReadOnlyStudio &&
+        previewServerState.type === 'connected';
     const { copied, markCopied } = (0, use_copy_feedback_1.useCopyFeedback)();
     const installedSkills = (0, react_1.useMemo)(() => {
         var _a;
@@ -110,23 +129,35 @@ const SkillsSettings = () => {
     const renderCopyAction = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(copy_1.CopyIcon, { copied: copied, color: color, style: copyIcon });
     }, [copied]);
-    return (jsx_runtime_1.jsxs("div", { style: container, children: [remotionSkillsInfo === null && error === null ? (jsx_runtime_1.jsx("p", { style: loading, children: "Checking installed skills..." })) : null, remotionSkillsInfo === null && error ? (jsx_runtime_1.jsx("div", { style: { marginTop: 14 }, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: error, align: "flex-start", type: "error" }) })) : null, missingSkills > 0 ? (jsx_runtime_1.jsxs("div", { children: [
+    const renderInstallAction = (0, react_1.useCallback)((color) => {
+        return jsx_runtime_1.jsx(cloud_download_1.CloudDownloadIcon, { color: color, style: actionIcon });
+    }, []);
+    const renderRemoveAction = (0, react_1.useCallback)((color) => {
+        return jsx_runtime_1.jsx(trash_1.TrashIcon, { color: color, style: actionIcon });
+    }, []);
+    const actionInProgress = skillAction !== null;
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [remotionSkillsInfo === null && error === null ? (jsx_runtime_1.jsx("p", { style: loading, children: "Checking installed skills..." })) : null, remotionSkillsInfo === null && error ? (jsx_runtime_1.jsx("div", { style: { marginTop: 14 }, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: error, align: "flex-start", type: "error" }) })) : null, missingSkills > 0 && canInstall ? (jsx_runtime_1.jsx("p", { style: description, children: "Install skills in this project to use them with your coding agent." })) : null, skillActionError ? (jsx_runtime_1.jsx("div", { style: { marginTop: 14 }, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: skillActionError, align: "flex-start", type: "error" }) })) : null, missingSkills > 0 && !canInstall ? (jsx_runtime_1.jsxs("div", { children: [
                     jsx_runtime_1.jsx("p", { style: description, children: "Not all skills are installed. Run this command in the project directory, then reload Studio and restart your coding agent." }), jsx_runtime_1.jsxs("div", { style: commandField, children: [
                             jsx_runtime_1.jsx("pre", { style: command, children: INSTALL_COMMAND }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopy, renderAction: renderCopyAction, title: "Copy install command" })
                         ] })
                 ] })) : null, remotionSkillsInfo ? (jsx_runtime_1.jsx("div", { style: list, role: "list", "aria-label": "Remotion Agent Skills", children: remotionSkillsInfo.skills.map((skill, index) => {
                     const installed = skill.installedInProject || skill.installedGlobally;
+                    const processingThisSkill = (skillAction === null || skillAction === void 0 ? void 0 : skillAction.skill) === skill.name;
                     const installedLocation = skill.installedInProject && skill.installedGlobally
                         ? 'Project and global'
                         : skill.installedInProject
                             ? 'Project'
                             : skill.installedGlobally
                                 ? 'Global'
-                                : 'Not installed';
+                                : null;
                     return (jsx_runtime_1.jsxs("div", { role: "listitem", style: index === remotionSkillsInfo.skills.length - 1
                             ? lastSkillRow
                             : 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));
+                            jsx_runtime_1.jsxs("span", { style: skillName, children: ["/", skill.name] }), processingThisSkill ? (jsx_runtime_1.jsx("span", { style: status, children: skillAction.type === 'installing'
+                                    ? 'Installing…'
+                                    : 'Removing…' })) : installedLocation ? (jsx_runtime_1.jsx("span", { style: status, children: installedLocation })) : null, installed ? (jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { "aria-hidden": true, style: { ...statusIcon, fill: colors_1.BLUE } })) : null, processingThisSkill ? (jsx_runtime_1.jsx("span", { style: actionSlot, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 14 }) })) : installed && canInstall ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: skill.installedInProject
+                                    ? `Remove ${skill.name} from this project`
+                                    : `Remove ${skill.name} globally`, disabled: actionInProgress, onClick: () => removeSkill(skill.name), renderAction: renderRemoveAction, variant: null })) : canInstall ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: `Install ${skill.name} in this project`, disabled: actionInProgress, onClick: () => installSkill(skill.name), renderAction: renderInstallAction, variant: null })) : null] }, skill.name));
                 }) })) : null] }));
 };
 exports.SkillsSettings = SkillsSettings;

package/dist/components/SnappingToggle.js

@@ -3,13 +3,14 @@ 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 buttonStyle = { width: 26 };
 const SnappingToggle = () => {
     const { editorSnapping, setEditorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
     const onClick = (0, react_1.useCallback)(() => {
@@ -17,12 +18,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: "Snapping", 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, style: buttonStyle, 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/Splitter/SplitterHandle.js

@@ -116,8 +116,7 @@ const SplitterHandle = ({ allowToCollapse, onCollapse, onCollapseDuringDrag }) =
                 onMove: onPointerMove,
                 onEnd: (reason, endEvent) => {
                     var _a, _b;
-                    if ((reason === 'pointerup' || reason === 'buttons-released') &&
-                        endEvent) {
+                    if ((0, pointer_session_1.isPointerSessionRelease)(reason, endEvent)) {
                         lastFlex = getNewValue(endEvent, true);
                         lastCollapsedSide = getCollapsedSide(endEvent);
                     }

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/Tabs/vertical.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare const VerticalTab: React.FC<{
-    readonly children: React.ReactNode;
+    readonly children: string;
     readonly onClick: React.MouseEventHandler<HTMLButtonElement>;
     readonly renderIcon?: (color: string) => React.ReactNode;
     readonly style?: React.CSSProperties;

package/dist/components/Tabs/vertical.js

@@ -4,7 +4,10 @@ exports.VerticalTab = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
+const use_breakpoint_1 = require("../../helpers/use-breakpoint");
 const z_index_1 = require("../../state/z-index");
+const ActionTooltip_1 = require("../ActionTooltip");
+const compactTabBreakpoint = 700;
 const selectorButton = {
     border: 'none',
     flex: 1,
@@ -19,9 +22,15 @@ const selectorButton = {
     userSelect: 'none',
     WebkitUserSelect: 'none',
 };
+const compactSelectorButton = {
+    width: 42,
+    paddingLeft: 12,
+    paddingRight: 4,
+};
 const VerticalTab = ({ children, onClick, renderIcon, style, selected, autoFocus }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const { tabIndex } = (0, z_index_1.useZIndex)();
+    const isCompact = (0, use_breakpoint_1.useBreakpoint)(compactTabBreakpoint);
     const onPointerEnter = (0, react_1.useCallback)(() => {
         setHovered(true);
     }, []);
@@ -36,8 +45,13 @@ const VerticalTab = ({ children, onClick, renderIcon, style, selected, autoFocus
             color,
             boxShadow: 'none',
             ...style,
+            ...(isCompact ? compactSelectorButton : null),
         };
-    }, [color, hovered, selected, style]);
-    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] }));
+    }, [color, hovered, isCompact, selected, style]);
+    const button = (jsx_runtime_1.jsxs("button", { "aria-label": children, autoFocus: autoFocus, style: definiteStyle, type: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: [renderIcon ? renderIcon(color) : null, isCompact ? null : children] }));
+    if (!isCompact) {
+        return button;
+    }
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: children, shortcut: null, delay: 800, dismissOnClick: true, side: "right", children: button }));
 };
 exports.VerticalTab = VerticalTab;

package/dist/components/Timeline/EasingEditorModal.js

@@ -687,8 +687,8 @@ const EasingEditor = ({ state, renderHeader }) => {
             onMove: (moveEvent) => {
                 updateHandleFromPointer(handle, moveEvent);
             },
-            onEnd: (reason) => {
-                if (reason === 'pointerup' || reason === 'buttons-released') {
+            onEnd: (reason, endEvent) => {
+                if ((0, pointer_session_1.isPointerSessionRelease)(reason, endEvent)) {
                     commitEasing(serializeBezier(bezierRef.current), liveOverrideVersionRef.current);
                 }
                 else {

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 &&